/* =============================================================
   Two-path pitch panel — shared by the front door (/) and
   /create-account so the two pages stay identical. Loaded AFTER
   nod.css and dtf-site-header.css, before each page's own <style>.

   Layout: 60/40 split under a sticky site header. The blue column is
   pinned (only the form/card aside scrolls) and its copy aligns with
   the site container, so the panel and the header line up at any width.
   ============================================================= */

:root{
  --hd-h:63px;           /* sticky header: 62px min-height + 1px border */
  /* MUST match the .auth-split column ratio below (1.5fr of 1.5fr + 1fr). The pitch copy aligns
     to the header's container by dividing this column's own width by its share, so the number
     here and the grid there cannot drift apart. */
  --panel-share:0.6;
}

.auth-brand{
  background:linear-gradient(150deg,#015C99 0%,#0177C4 55%,#2688cf 100%);
  min-width:0; /* opt out of the grid item's min-content floor */
}
.auth-brand-inner{max-width:min(47rem,100%);min-width:0;}

/* Mobile/tablet: the panel is the hero, so it grows with its content. */
@media (max-width:989px){
  .auth-brand{height:auto;min-height:100svh;}
}

/* ---- the two paths ---- */
.paths{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  /* Row gap first, then column gap. Both are wider than they were when each path was a white
     card: the card's own padding used to supply most of the visual separation between the two
     columns, and with the cards gone the gap has to do that work by itself. */
  gap:clamp(1.6rem,1rem + 1.5vw,2.25rem) clamp(1.4rem,.9rem + 1.8vw,3rem);
  margin:0 0 clamp(1rem,.7rem + 1vw,1.6rem);
  /* stretch, not start: the two paths stay the same height even at widths where the copy wraps to
     a different number of lines. The sub-headlines are also written to run the same line count at
     desktop widths so the list rows line up, but this is the guarantee. */
  align-items:stretch;
}
/* The two paths sit directly ON the blue, with no white card, so their copy starts flush with the
   headline above them and the pill tag is what marks the start of each block. */
.path{display:flex;flex-direction:column;min-width:0;}
.path-tag{
  /* .path is a flex column: without align-self the pill would stretch the whole column */
  align-self:flex-start;margin:0 0 .7rem;padding:.36rem .72rem;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.path-h{margin:0 0 .5rem;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);font-weight:800;letter-spacing:-.015em;line-height:1.15;color:#fff;}
/* the bottom margin carries the separation the divider rule used to provide */
.path-sub{margin:0 0 clamp(.95rem,.7rem + .6vw,1.35rem);font-size:var(--fs-0);line-height:1.5;color:rgba(255,255,255,.82);opacity:1;}
.path-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.path-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;line-height:1.4;color:#fff;opacity:1;}
.path-list li svg{flex:0 0 auto;margin-top:2px;color:#fff;}

/* ---- guarantee strip under the paths ---- */
.auth-brand-list--compact{display:flex;flex-direction:row;flex-wrap:wrap;gap:.6rem 1.6rem;}
.auth-brand-list--compact li{white-space:nowrap;}
.auth-guars{
  /* a translucent panel on the blue rather than a light-grey card, so the strip reads as part of
     the same surface as the paths above it */
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;
  padding:.95rem clamp(1rem,.7rem + .8vw,1.5rem);margin:0;
  /* flex-start, not space-between: when the four items wrap onto two rows, space-between stretches
     the first row edge to edge and leaves the second row short, which reads as broken alignment */
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:.6rem clamp(1rem,.6rem + 1.4vw,2rem);
}
.auth-guars li{align-items:center;font-size:13.5px;font-weight:700;color:#fff;opacity:1;}
.auth-guars li svg{margin-top:0;color:#fff;}

/* ---- desktop: ONE full-bleed panel that holds the auth card ----
   Justin: the sign-in card is encapsulated inside the panel, not sitting on a separate grey
   column next to it. So the background moves off .auth-brand and onto .auth-split, and
   .auth-pane simply centres the card inside it.

   Full bleed, square corners, no inset (Justin 2026-07-29: "the header shouldnt be with
   rounded edges and the left and right edge and bottom should go to the end"). The header
   therefore keeps its own full-width bar and bottom hairline.

   From 990px up only: in the 760-989px band the header wraps its nav onto a second row, so
   --hd-h is wrong there, and below that the panel is the mobile hero instead. */
@media (min-width:990px){
  .auth-split{
    grid-template-columns:1.5fr 1fr;
    align-items:center;
    background:linear-gradient(150deg,#015C99 0%,#0177C4 55%,#2688cf 100%);
    overflow:hidden;                   /* keeps the decorative circle from escaping sideways */
    min-height:calc(100svh - var(--hd-h));
  }
  /* The blue belongs to the container now, so this column is only layout. This also undoes
     the sticky pin nod.css sets from 900px: with both columns inside one bounded panel
     nothing scrolls independently, so there is nothing to pin against. */
  .auth-brand{
    background:none;
    /* relative, NOT static: static drops this box as the containing block for the decorative
       ::after circle, which is offset right:-130px. It then resolves against the initial
       containing block, so neither this element's nor .auth-split's overflow:hidden can clip
       it (a clip only applies to descendants whose containing block is inside it) and the
       page gains exactly 130px of horizontal scroll. relative keeps the containing block
       while still undoing the sticky pin, since there are no offsets. */
    position:relative;top:auto;height:auto;min-height:0;
    /* Let .auth-split do the clipping. This column's own overflow:hidden used to be
       invisible because its right edge WAS the blue/grey boundary; now that the blue spans
       both columns, clipping the circle there draws a hard vertical seam inside the panel. */
    overflow:visible;
    /* flex-start, not center: Justin wants the h1 to sit DOWN from the header rather than be
       vertically centred, which on a tall viewport parks it mid-panel and on a short one pins
       it to the top edge. */
    justify-content:flex-start;
    padding-top:clamp(2.5rem,1.5rem + 3.2vw,5rem);
    padding-bottom:clamp(2rem,1rem + 2.6vw,3.25rem);
    padding-right:clamp(1.5rem,1rem + 2vw,3rem);
    /* Align the copy's left edge with the header logo instead of a flat padding. .hd-in is
       min(100% - gutter, --site-max) centred, so its left edge is
       max(gutter / 2, (page - --site-max) / 2). This column is --panel-share of the page, so
       its own 100% / share IS the page width. Percentages resolve against this column and never
       the viewport, so unlike 100vw this stays exact when a scrollbar is present. */
    padding-left:max(calc(clamp(1.25rem,4vw,3rem) / 2),
                     calc((100% / var(--panel-share) - var(--site-max,87.5rem)) / 2));
  }
  .auth-brand::after{bottom:0;right:-130px;}
  .auth-brand-h{margin-top:0;}          /* redundant once the block is centred */
  .auth-brand-cta{display:none;}        /* the real form is right beside it */
  /* Card anchored to the RIGHT (Justin 2026-07-30): its right edge aligns with the header
     container's right edge, i.e. exactly under the phone number, and the card grows LEFTWARD
     from that line when a state needs more room. Same trick as the h1 on the left: this pane is
     (1 - --panel-share) of the page, so 100% divided by that share IS the page width, and the
     inset to the container edge is max(gutter/2, (page - --site-max)/2). Percentages resolve
     against this pane, never the viewport, so it stays exact when a scrollbar is present. */
  .auth-pane{
    min-height:0;
    justify-content:flex-end;
    padding:clamp(1.5rem,1rem + 2vw,3rem);
    padding-right:max(calc(clamp(1.25rem,4vw,3rem) / 2),
                      calc((100% / (1 - var(--panel-share)) - var(--site-max,87.5rem)) / 2));
  }
  .auth-card-logo{display:none;}        /* the site header carries the wordmark right above it */
  /* Keep the two paths side by side all the way down to 990px. Stacked, the pitch runs
     taller than the panel and the guarantee strip gets clipped: measured 818px of content
     in a 797px column at 1024x860, because 17rem tracks need 577px and the column offers 537px. */
  .paths{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));}
}

/* Short viewports have to fit too: the pitch runs ~800px tall, so tighten the vertical rhythm
   with svh-based padding rather than spend the height on padding. Note the panel is CONTENT
   driven, so on genuinely short screens (a 768px-tall laptop) the page still scrolls a little.
   That is the graceful outcome and it beats the old behaviour, where the pinned column clipped
   its own content and hid the guarantee strip. */
@media (min-width:990px) and (max-height:900px){
  .auth-brand{padding-block:clamp(1rem,2.2svh,2.25rem);}
  .auth-brand-sub{margin-bottom:clamp(.9rem,1.8svh,1.5rem);}
  .path-tag{margin-bottom:clamp(.4rem,.9svh,.7rem);}
  .path-sub{margin-bottom:clamp(.6rem,1.2svh,1.35rem);}
  .path-list{gap:clamp(.36rem,.85svh,.55rem);}
  .paths{margin-bottom:clamp(.75rem,1.5svh,1.3rem);}
  .auth-guars{padding-block:clamp(.5rem,1.1svh,.8rem);}
}