/* =============================================================
   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. */
  /* 0.66, was 0.6: the auth card is right-anchored at a fixed max width, so the pane's extra
     width was rendering as a dead gap between the trust strip and the card. The left column
     takes it instead (Justin 2026-08-12). */
  /* .63: .6 starved the left panel, .66 starved the CARD (the signup form went single-column
     skinny, Justin 2026-08-12). .63 holds the left improvement and gives the card ~75px back. */
  --panel-share:0.63;
}

.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 */
}
/* 56rem, was 47: widening the panel to .66 of the page did nothing on its own because this
   cap was the true limit — the extra width landed as blank space inside the panel while the
   gap to the card stayed 252px. The content (headline, reel, both paths) is what wanted room. */
.auth-brand-inner{max-width:min(56rem,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;}

/* the site header carries the logo at every width, so the card never needs its own copy */
.auth-card-logo{display:none;}

/* ---- 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;}
/* phones: flex-wrap gave a ragged 1-2-1 stack because the four labels differ in width; a fixed
   2x2 grid reads as designed (Justin 2026-07-31). Items may wrap their text rather than overflow
   a column on the narrowest phones. */
@media (max-width:759px){
  .auth-guars{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem;}
  .auth-guars li{white-space:normal;}
}

/* ---- 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.7fr 1fr;    /* = share/(1-share) at 0.63, keeps the two in step */
    align-items:center;
    background:linear-gradient(150deg,#015C99 0%,#0177C4 55%,#2688cf 100%);
    /* clip, NOT hidden: hidden makes this box a scroll container, which silently disables
       position:sticky on the brand column below it (the pitch scrolled away with the form,
       Justin 2026-08-12). clip contains the decorative circle without capturing stickiness;
       the hidden line stays first as the fallback for engines without clip. */
    overflow:hidden;
    overflow:clip;
    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. */
    /* Sticky again (Justin 2026-08-12): with the real signup form on the right the row is
       far taller than a screen, so the pitch scrolled away with it. top matches the header
       height; align-self:start is load-bearing, because .auth-split centres its items and a
       centred grid child cannot stick. The 2026-08-04 note about "nothing to pin against"
       described the short lead form and no longer holds. */
    position:sticky;top:var(--hd-h,64px);align-self:start;height:auto;min-height:0;
    max-height:calc(100svh - var(--hd-h,64px));overflow-y:auto;
    /* 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;
    /* Was clamp(2.5rem,1.5rem + 3.2vw,5rem). Halved so the h1 starts nearer the header and the
       reel below it clears the fold (Justin 2026-08-12); flex-start still keeps it off the top
       edge on a short viewport. */
    padding-top:clamp(1.25rem,.75rem + 1.6vw,2.5rem);
    padding-bottom:clamp(2rem,1rem + 2.6vw,3.25rem);
    /* Trimmed from clamp(1.5rem,1rem + 2vw,3rem): the reel and the headline both wanted room
       and this gutter was the cheapest 24px to give them (Justin 2026-08-12). The auth card
       keeps its own gap, so the two columns still read as separate. */
    padding-right:clamp(1rem,.6rem + 1vw,1.5rem);
    /* 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;
    /* Left padding trimmed (was the same clamp as the rest): the card is right-anchored, so
       every pixel of pane padding on this side came straight out of the card's width. With
       the real signup form here the card needs it more (Justin 2026-08-12). */
    padding:clamp(1.5rem,1rem + 2vw,3rem);
    padding-left:clamp(.75rem,.5rem + .6vw,1rem);
    padding-right:max(calc(clamp(1.25rem,4vw,3rem) / 2),
                      calc((100% / (1 - var(--panel-share)) - var(--site-max,87.5rem)) / 2));
  }

  /* 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);}
}

/* phones: the chat launcher covers the form controls on the auth pages, so it sits this one out
   (Justin 2026-08-01). This sheet loads only on / and /create-account, which scopes the hide. */
@media (max-width:759px){
  .nodi-launcher,.nodi-panel{display:none !important;}
}

/* =============================================================
   "Talk to a specialist" card (sign-up form, staffed hours only)
   -------------------------------------------------------------
   Sits between the form's subtext and its first field. It has to read as the faster option
   without shouting over the form it is trying to replace, so: warm tint and a hairline rather
   than a solid brand block, the live dot as the only moving part, and the two actions sized
   like the fields below them so the eye stays in one column.
   ============================================================= */
.dtf-spec{
  margin:0 0 1.15rem;
  padding:clamp(.85rem,2.4vw,1.1rem);
  border:1px solid var(--brand-tint,#FFF3EC);
  border-radius:14px;
  background:var(--bg-warm,#FFF6EF);
}
.dtf-spec[hidden]{display:none;}
.dtf-spec-live{
  display:flex;align-items:center;gap:7px;margin:0 0 .35rem;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-link,#D9481A);
}
.dtf-spec-dot{
  width:8px;height:8px;border-radius:50%;background:var(--success,#21AF70);flex:0 0 auto;
  animation:dtfSpecPulse 2s ease-out infinite;
}
/* the ring fades to its OWN hue at alpha 0: `transparent` computes as rgba(0,0,0,0), so
   engines interpolate through black and the halo goes grey halfway */
@keyframes dtfSpecPulse{
  0%{box-shadow:0 0 0 0 rgba(33,175,112,.45)}
  70%{box-shadow:0 0 0 6px rgba(33,175,112,0)}
  100%{box-shadow:0 0 0 0 rgba(33,175,112,0)}
}
@media(prefers-reduced-motion:reduce){.dtf-spec-dot{animation:none;}}
.dtf-spec-h{margin:0 0 .3rem;font-size:clamp(15px,.9rem + .3vw,17px);font-weight:800;letter-spacing:-.01em;color:var(--ink,#2B2B2B);}
.dtf-spec-sub{margin:0 0 .8rem;font-size:13.5px;line-height:1.5;color:var(--ink-70,rgba(43,43,43,.72));}
.dtf-spec-acts{display:flex;gap:.6rem;flex-wrap:wrap;}
.dtf-spec-btn{
  /* one action: the call. Chat came out because this sheet already hides the Nodi launcher
     on the auth pages below 760 (it covered the form controls), so a chat button here would
     have been dead on exactly the screens this card is aimed at. */
  flex:1 1 100%;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 14px;border-radius:11px;
  font:inherit;font-size:14.5px;font-weight:800;line-height:1;white-space:nowrap;
  text-decoration:none;cursor:pointer;
}
/* dtf-palette.css loads AFTER this file and colours every link inside the form with
   `.auth-body .auth-form a`, which outranked a bare class here and painted the number
   brand-orange on an orange button. Out-specify it rather than reach for !important. */
.dtf-spec-btn--call{background:var(--grad-brand,linear-gradient(135deg,#FF8A2B 0%,#FF394C 100%));border:0;box-shadow:var(--glow-orange,0 8px 24px rgba(255,138,43,.5));}
.dtf-spec-btn--call,
.auth-body .dtf-spec a.dtf-spec-btn--call,
.auth-body .dtf-spec a.dtf-spec-btn--call:hover{color:#fff;}
.dtf-spec-btn--call:hover{background:var(--grad-heat,linear-gradient(100deg,#FF394C 0%,#FF2E86 100%));box-shadow:var(--glow-red,0 10px 30px rgba(255,57,76,.35));}
.dtf-spec-btn:focus-visible{outline:2px solid var(--brand-red,#FF394C);outline-offset:2px;}
.dtf-spec-hours{margin:.7rem 0 0;font-size:12px;line-height:1.45;color:var(--ink-60,rgba(43,43,43,.62));}

/* =============================================================
   Front-door sizzle reel (see how it works)
   -------------------------------------------------------------
   Same treatment as the capacity and storefront landing pages on the store: a 16:9 card with a
   gradient play button and a duration chip, sitting under the pitch. The frame is the video
   itself seeked to 1s, so the card is never out of sync with the reel.
   ============================================================= */
.dtf-vid{margin:0;max-width:min(46rem,100%);}
.dtf-vid-eyebrow{
  margin:0 0 .55rem;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-link,#D9481A);
}
.dtf-vid-card{
  position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;overflow:hidden;
  border-radius:18px;background:#0D1422;cursor:pointer;
  box-shadow:0 24px 60px -28px rgba(13,20,34,.45);
}
.dtf-vid-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0D1422;}
.dtf-vid-card::after{content:"";position:absolute;inset:0;background:transparent;transition:background .2s;}
.dtf-vid-card:hover::after{background:rgba(13,20,34,.08);}
.dtf-vid-card.is-playing{cursor:default;}
.dtf-vid-card.is-playing::after,
.dtf-vid-card.is-playing .dtf-vid-play{display:none;}
/* controls need to be reachable, so the playing video sits above the (now hidden) overlay */
.dtf-vid-card.is-playing .dtf-vid-frame{object-fit:contain;background:#000;z-index:2;}
/* White disc with a dark triangle, matching the capacity and storefront cards on the store
   (Justin 2026-08-12). Those pages override the gradient disc the base component ships with,
   and they carry no duration chip, so this one does not either. */
/* Dead centre both axes, matching the store's capacity/storefront cards (Justin 2026-08-13). */
.dtf-vid-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:clamp(46px,5vw,58px);aspect-ratio:1;border-radius:50%;
  background:#fff;
  display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(13,20,34,.45);
}
.dtf-vid-play svg{margin-left:4px;}
.dtf-vid-play svg path{fill:#0D1422;}
.dtf-vid-cap{margin:.7rem 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-70,rgba(43,43,43,.72));}
.dtf-vid-cap b{color:var(--ink,#2B2B2B);font-weight:800;}
@media(prefers-reduced-motion:reduce){.dtf-vid-card::after{transition:none;}}


/* =============================================================
   Front-door hero: pitch left, reel right (Justin 2026-08-12)
   -------------------------------------------------------------
   The reel used to sit at the bottom of the panel under everything else. It now pairs off
   against the headline in a top row, with the two paths and the trust strip spanning the full
   panel underneath. Below 900 the panel is the mobile hero and everything stacks, so the row
   collapses to one column and the reel follows the copy.
   ============================================================= */
.dtf-herotop{display:grid;grid-template-columns:1fr;gap:clamp(1.1rem,2.4vw,2rem);align-items:start;margin-bottom:30px;}
/* Two columns only from 1080. The panel is a fraction of the page, so between 900 and 1079 the
   copy column measured 250px or less: the headline broke to four lines and the reel shrank to
   180px. Stacked, both get the full panel width, which is the better trade in that band. */
@media(min-width:1080px){
  /* The reel takes the larger share (Justin 2026-08-12). */
  .dtf-herotop{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:clamp(1rem,1.25vw,1.25rem);align-items:center;}
}
.dtf-herotop-copy{min-width:0;}
.dtf-herotop .dtf-vid{margin:0;max-width:100%;width:100%;}

/* Headline: line one in ink, the promise in the brand ramp. Blocks, so the three lines break
   where they are written rather than wherever the column happens to run out. */
/* The reel takes the wider column, so the headline sizes to the column it actually has: at
   --fs-3 "to make money on" broke and left "on" stranded on a line of its own. This clamp keeps
   the three written lines intact from 900 up without touching the h1 anywhere else. */
@media(min-width:1080px){
  /* Sized to the widest written line, with room to spare: at 41.6px "to make money on" cleared
     its column by 3px, which is one font-metric difference away from stranding "on" on its own
     line. 40px at 1600 leaves ~47px of slack and still reads a full step larger than before. */
  .dtf-herotop .auth-brand-h{font-size:clamp(1.85rem,1rem + 1.5vw,2.75rem);margin-top:0;}
}
.auth-brand-h .l1,.auth-brand-h .l2,.auth-brand-h .l3{display:block;}
.auth-brand-h .l1{color:var(--ink,#2B2B2B);}
.auth-brand-h .l2{
  background:var(--grad-brand,linear-gradient(135deg,#FF8A2B 0%,#FF394C 100%));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--brand-orange,#FF8A2B); /* fallback first, in case background-clip is unsupported */
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .auth-brand-h .l2{-webkit-text-fill-color:currentColor;background:none;}
}
.auth-brand-h .l3{color:var(--brand-red,#FF394C);}

/* label ABOVE the card (Justin 2026-08-12) */
.dtf-vid .dtf-vid-eyebrow{margin:0 0 .55rem;}

/* An <a> wearing .auth-btn (the signup pane's Create Account door) still matched
   dtf-palette.css's `.auth-body .auth-form a` link rule — orange underlined text on the
   gradient. Three classes beat that selector at any load order. */
.auth-body .auth-form a.auth-btn,
.auth-body .auth-form a.auth-btn:hover{color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}