/* =============================================================
   DTFtransfers site header — shared by the front door (/) and
   /create-account so the two pages cannot drift apart. Ported from
   the store theme's sections/dtf-header.liquid. --site-max below is the page
   container width; the blue panel aligns its copy to the same token.
   The header MARKUP stays inline in each page on purpose: the nav
   links must be in the HTML for crawlers, and a JS-injected header
   would visibly pop in. Edit both pages when the nav changes.
   ============================================================= */
:root{
      --blue:#0177C4; --blue-dark:#0177c4; --blue-soft:rgba(1,119,196,.1);
      --ink:#0d1422; --ink2:#475569; --ink3:#7c8aa0; --line:#e6ebf2; --bg:#f7f9fc; --card:#fff;
      --ok:#0f9d58;
      --step-0:clamp(1rem,.95rem + .25vw,1.125rem);
      --step-1:clamp(1.15rem,1.05rem + .5vw,1.5rem);
      --step-2:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);
      --step-3:clamp(2rem,1.5rem + 2.6vw,3.6rem);
      --sp-s:clamp(.75rem,.5rem + 1vw,1.25rem);
      --sp-m:clamp(1.25rem,.9rem + 1.75vw,2.5rem);
      --sp-l:clamp(2.25rem,1.5rem + 3.5vw,4.5rem);
      --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      /* page container width — the blue auth panel aligns its copy to this too
         (dtf-auth-panel.css reads var(--site-max)), so ONE change moves both */
      --site-max:87.5rem; /* 1400px */
    }
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto;}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;text-decoration:none;border-radius:11px;cursor:pointer;border:0;min-height:44px;padding:10px 18px;font-size:15px;white-space:nowrap;}
    .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px -10px rgba(1,119,196,.65);}
    .btn-primary:hover{background:#015C99;}
    .btn-ghost{background:none;color:var(--ink);border:1px solid var(--line);}
    .btn-ghost:hover{border-color:var(--blue);color:var(--blue-dark);}
    /* ---------- header ---------- */
    .hd{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);}
    /* wrap at EVERY width, not just in the 760-989 band below: with five menu items the row can
       also run out of room just above 990 (measured 54px of page overflow at 990, 24px at 1024).
       Wrapping is inert while everything fits, so this costs nothing at desktop and means another
       nav item can never push the page into horizontal scroll. */
    .hd-in{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.5rem);min-height:64px;flex-wrap:wrap;}
    .hd-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto;}
    .hd-logo img.mark{width:clamp(28px,2rem + .4vw,34px);height:auto}
    .hd-logo img.word{height:clamp(18px,1rem + .5vw,23px);width:auto}
    .hd-logo img.full{height:clamp(30px,1.6rem + .8vw,40px);width:auto}
    .hd-nav{display:flex;gap:2px;margin-right:auto;flex-wrap:wrap;min-width:0;}
    .hd-logo .brandmark{height:clamp(38px,2rem + .9vw,46px);width:auto;display:block;}
    /* mega menu — matches sections/dtf-header.liquid on the store theme (NOD-HEADER-HANDOFF) */
    .dtfhd-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
    .dtfhd-item{position:relative;}
    .dtfhd-toplink{display:inline-flex;align-items:center;gap:clamp(3px,.5vw,6px);
      padding:9px clamp(7px,2.2vw - 16px,12px);border-radius:9px;
      font-size:clamp(12.5px,.6vw + 6.4px,14px);font-weight:650;
      color:var(--ink2,#475569);text-decoration:none;white-space:nowrap;
      transition:color .15s ease,background-color .15s ease;}
    .dtfhd-item.open>.dtfhd-toplink,.dtfhd-toplink:hover,.dtfhd-toplink:focus-visible{
      color:var(--blue-dark,#0177c4);background:var(--blue-soft,rgba(1,119,196,.1));}
    /* placeholder top-level item: looks native, but nothing to click yet — so no pointer and no
       hover highlight (both promise an action). Two classes beat .dtfhd-toplink:hover on its own. */
    .dtfhd-toplink--inert{cursor:default;}
    .dtfhd-toplink--inert:hover,.dtfhd-toplink--inert:focus-visible{color:var(--ink2);background:none;}
    .dtfhd-caret{opacity:.55;transition:transform .18s ease;flex:0 0 auto;}
    .dtfhd-item.open .dtfhd-caret{transform:rotate(180deg);}
    .dtfhd-item.has-panel::after{content:'';position:absolute;top:100%;left:-16px;right:-16px;height:16px;}
    /* CLOSED panels are invisible (visibility:hidden) but STILL LAID OUT, so they count toward the
       page's scrollWidth: centred on the last item, the 240px Support panel hung past the viewport
       and put the whole page into horizontal scroll (54px at 990, 63px at 760 — appeared as soon as
       a 5th menu item pushed Support further right). Park closed panels anchored to their item's
       RIGHT edge, where they can never reach past the container. Where a panel sits while closed
       doesn't matter: openItem() zeroes --shift, measures, and clamps it on open, and the .open
       rule below restores the centred geometry. */
    .dtfhd-panel{position:absolute;top:calc(100% + 10px);left:auto;right:0;
      transform:translateX(var(--shift,0px)) translateY(-6px);
      background:#fff;border:1px solid var(--line,#e6ebf2);border-radius:14px;
      box-shadow:0 12px 40px -12px rgba(13,20,34,.22);padding:10px;
      opacity:0;visibility:hidden;pointer-events:none;
      transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:150;}
    .dtfhd-item.open>.dtfhd-panel{opacity:1;visibility:visible;pointer-events:auto;
      left:50%;right:auto;
      transform:translateX(calc(-50% + var(--shift,0px))) translateY(0);}
    .dtfhd-panel--cards{width:min(360px,calc(100vw - 24px));}
    .dtfhd-panel--links{min-width:240px;}
    /* merged DTF + UV mega panel: two .dtfhd-card columns with an eyebrow, one-line pitch and a
       gradient rule per family. Brand tokens come from dtf-palette.css on the pages that load it;
       the literal fallbacks are the same values so the panel cannot render blue anywhere else. */
    .dtfhd-panel--mega{width:min(720px,calc(100vw - 24px));padding:16px 6px;} /* 720, not 660: at 660 the Transfers-by-Size title plus the Most-popular pill need ~20px more than the column offers and the pill wraps under the title */
    .dtfhd-mega{display:grid;grid-template-columns:1fr 1fr;}
    .dtfhd-mcol{min-width:0;padding:0 14px;}
    .dtfhd-mcol+.dtfhd-mcol{border-left:1px solid var(--line,#e6ebf2);}
    .dtfhd-mhead{margin:2px 10px 3px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}
    .dtfhd-mhead--dtf{color:var(--brand-eyebrow,#E4550A);}
    .dtfhd-mhead--uv{color:var(--brand-pink,#FF2E86);}
    .dtfhd-msub{margin:0 10px 10px;font-size:12.5px;line-height:1.4;color:var(--ink2,#475569);}
    .dtfhd-mrule{display:block;height:2px;border-radius:2px;margin:0 10px 10px;}
    .dtfhd-mrule--dtf{background:linear-gradient(90deg,var(--brand-orange,#FF8A2B),var(--brand-red,#FF394C));}
    .dtfhd-mrule--uv{background:linear-gradient(90deg,var(--brand-red,#FF394C),var(--brand-pink,#FF2E86));}
    /* title + "Most popular" pill share a row in the mega panel (the stacked badge is the old
       single-column look) */
    .dtfhd-card-trow{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}
    .dtfhd-card-trow .dtfhd-card-badge{margin-bottom:0;}
    .dtfhd-cards{display:grid;grid-template-columns:1fr;gap:4px;}
    .dtfhd-card{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;
      text-decoration:none;transition:background-color .12s ease;min-width:0;}
    .dtfhd-card:hover,.dtfhd-card:focus-visible{background:var(--blue-soft,rgba(1,119,196,.1));}
    .dtfhd-card-img{flex:0 0 auto;width:64px;height:64px;border-radius:10px;
      background:var(--bg,#f7f9fc);border:1px solid var(--line,#e6ebf2);overflow:hidden;}
    .dtfhd-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .dtfhd-card-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .dtfhd-card-badge{align-self:flex-start;font-size:9px;font-weight:800;letter-spacing:.07em;
      text-transform:uppercase;color:var(--blue-dark,#0177c4);
      background:var(--blue-soft,rgba(1,119,196,.1));padding:2px 6px;border-radius:4px;margin-bottom:1px;}
    .dtfhd-card-title{font-size:13.5px;font-weight:700;color:var(--ink,#0d1422);line-height:1.25;}
    .dtfhd-card-sub{font-size:12px;color:var(--ink2,#475569);line-height:1.35;}
    .dtfhd-links{list-style:none;margin:0;padding:2px;}
    .dtfhd-linkrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:600;
      color:var(--ink2,#475569);text-decoration:none;white-space:nowrap;
      transition:color .12s ease,background-color .12s ease;}
    .dtfhd-linkrow:hover,.dtfhd-linkrow:focus-visible{
      color:var(--blue-dark,#0177c4);background:var(--blue-soft,rgba(1,119,196,.1));}
    @media (prefers-reduced-motion:reduce){.dtfhd-panel,.dtfhd-caret{transition:none;}}
    /* tablet band: logo + 4 menu items + CTAs exceed one row until ~990px — wrap the menu
       onto its own centered second row instead of overflowing the viewport */
    @media(min-width:760px) and (max-width:989px){
      .hd-in{flex-wrap:wrap;row-gap:2px;padding-block:8px;}
      .hd-nav{order:3;flex-basis:100%;justify-content:center;margin-right:0;}
      .dtfhd-menu{flex-wrap:wrap;justify-content:center;}
    }
    .hd-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}
    .hd-nav + .hd-cta{margin-left:0;}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;text-decoration:none;border-radius:11px;cursor:pointer;border:0;min-height:44px;padding:10px 18px;font-size:15px;white-space:nowrap;}
    .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px -10px rgba(1,119,196,.65);}
    .btn-primary:hover{background:#015C99;}
    .btn-ghost{background:none;color:var(--ink);border:1px solid var(--line);}
    .btn-ghost:hover{border-color:var(--blue);color:var(--blue-dark);}
    .btn-big{padding:14px 28px;font-size:clamp(15px,.9rem + .3vw,17px);border-radius:13px;}
    @media(max-width:759px){.hd-nav{display:none}}


      /* header auth links (front door): highlight mirrors the active card tab */
    .hd-auth{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:9px;font-size:14.5px;font-weight:700;color:var(--ink2);text-decoration:none;transition:color .15s ease,background-color .15s ease;}
    .hd-auth:hover,.hd-auth:focus-visible{color:var(--blue-dark);background:var(--blue-soft);}
    .hd-auth.is-on,.dtfhd-toplink.is-on{color:var(--blue-dark);background:var(--blue-soft);}
    /* match the dtftransfers.com store header (dtf-header.liquid): container, bar, logo */
    .hd-in{width:min(100% - clamp(1.25rem,4vw,3rem),var(--site-max));gap:clamp(.25rem,1vw,1rem);min-height:62px;}
    .hd-logo .brandmark{height:clamp(32px,1.9rem + .48vw,36px);}

/* Phones: the logo + "Sign in" + "Create Account" needed ~415px against 355px of
   container at 375, which pushed the whole PAGE into horizontal scroll (+50px at 375,
   +104px at 320). Tighten the logo and the auth links instead of letting the body slide. */
@media(max-width:560px){
  .hd-in{gap:.35rem;}
  .hd-logo .brandmark{height:clamp(26px,7vw,32px);}
  .hd-auth{padding:9px 9px;font-size:13.5px;}
    }
@media(max-width:389px){
  .hd-logo .brandmark{height:24px;}
  .hd-auth{padding:9px 7px;font-size:12.75px;letter-spacing:-.01em;}
    }
@media(max-width:340px){ /* 320px still slid by 12px */
  .hd-logo .brandmark{height:21px;}
  .hd-auth{padding:8px 5px;font-size:12px;}
}

    /* ---- Talk-to-a-rep phone block ----
       Desktop: two-line text, top line cross-fading between "Talk to a rep" and "Wait Time: 0 min".
       The two tops stack in one GRID CELL (grid-area 1/1), so the container sizes itself to the
       wider of the two and nothing jumps when they trade places - absolute positioning here would
       need a hand-tuned width. Phones swap the whole block for a bare handset icon button. */
    .dtfhd-rep{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;color:var(--ink,#0d1422);}
    .dtfhd-rep-icon{display:none;}
    .dtfhd-rep-body{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;}
    .dtfhd-rep-tops{display:grid;justify-items:start;}
    .dtfhd-rep-top{grid-area:1/1;display:inline-flex;align-items:center;white-space:nowrap;
      font-size:12.5px;font-weight:600;color:var(--ink,#0d1422);
      animation:dtfhdRepFade 8s ease-in-out infinite;}
    /* same keyframes, opposite phase: -4s starts B mid-cycle, exactly where A is faded out */
    .dtfhd-rep-top--b{opacity:0;animation-delay:-4s;}
    .dtfhd-rep-num{font-size:15.5px;font-weight:800;letter-spacing:.01em;color:var(--ink,#0d1422);font-variant-numeric:tabular-nums;}
    .dtfhd-rep:hover .dtfhd-rep-num,.dtfhd-rep:focus-visible .dtfhd-rep-num{color:var(--blue-dark,#0177c4);}
    .dtfhd-rep-dot{width:8px;height:8px;border-radius:50%;background:var(--ok,#0f9d58);margin-right:7px;flex:0 0 auto;
      animation:dtfhdRepPulse 2s ease-out infinite;}
    /* each state holds ~3.4s, fades over ~0.6s */
    @keyframes dtfhdRepFade{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
    /* the ring fades to ITS OWN hue at alpha 0 - fading to transparent interpolates through black */
    @keyframes dtfhdRepPulse{0%{box-shadow:0 0 0 0 rgba(15,157,88,.45)}70%{box-shadow:0 0 0 6px rgba(15,157,88,0)}100%{box-shadow:0 0 0 0 rgba(15,157,88,0)}}
    @media(prefers-reduced-motion:reduce){
      /* animation:none leaves the base opacities: A visible, B hidden - a static first state */
      .dtfhd-rep-top,.dtfhd-rep-dot{animation:none;}
    }
    /* 760-989 wraps the nav onto its own row, and below 760 hides it entirely - in both bands
       nothing to the left carries margin-right:auto any more, so the rep block pins itself */
    @media(max-width:989px){.dtfhd-rep{margin-left:auto;}}
    @media(max-width:759px){
      .dtfhd-rep-body{display:none;}
      /* bare glyph, no bordered square (Justin 2026-07-30) - the 42px box stays as the TAP TARGET,
         it just doesn't paint */
      .dtfhd-rep-icon{display:inline-flex;align-items:center;justify-content:center;
        width:42px;height:42px;}
    }

    /* ---- phones: the burger ----
       Below 760 the rule above hides .hd-nav outright and nothing revealed it, so every nav item
       was unreachable on a phone (Justin 2026-07-29: "where is the hamburger menu on ipad /
       iphone?"). iPad portrait is untouched: the 760-989 band wraps the nav onto its own row and
       needs no burger.

       The sheet reuses the SAME .dtfhd-item.open accordion the desktop panels use, so there is no
       parallel mobile nav to keep in sync. */
    .dtfhd-burger{display:none;}
    @media(max-width:759px){
      .dtfhd-burger{
        display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
        width:42px;height:42px;padding:0;
        /* no margin-left:auto any more: the burger now leads the row, to the LEFT of the logo
           (JS inserts it as .hd-in's first child). The rep phone icon owns the right edge via
           its own margin-left:auto in the ≤989 rule above. */
        border:1px solid var(--line,#e6ebf2);border-radius:11px;background:#fff;
        color:var(--ink,#0d1422);cursor:pointer;
      }
      /* If a page DOES carry .hd-cta, drop its own margin-left:auto: two auto margins would split
         the free space between them and strand the CTA mid-bar. This way the CTA follows the logo
         and the burger still takes the right edge. */
      .hd-cta{margin-left:0;}
      .dtfhd-burger svg{display:block;}

      /* .hd is sticky, which is a positioned ancestor, so top:100% lands the sheet right under
         the bar without needing position:relative added anywhere. */
      body.dtfhd-navopen .hd-nav{
        display:block;position:absolute;left:0;right:0;top:100%;
        background:#fff;border-top:1px solid var(--line,#e6ebf2);
        box-shadow:0 20px 44px -22px rgba(13,20,34,.4);
        padding:4px 0 8px;z-index:160;
        max-height:calc(100svh - 62px);overflow-y:auto;overscroll-behavior:contain;
      }
      body.dtfhd-navopen .dtfhd-menu{flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;}
      body.dtfhd-navopen .dtfhd-item{width:100%;}
      /* the hover bridge is meaningless in an accordion and would swallow taps */
      body.dtfhd-navopen .dtfhd-item.has-panel::after{content:none;}
      body.dtfhd-navopen .dtfhd-toplink{
        width:100%;justify-content:space-between;border-radius:0;
        padding:13px clamp(1.25rem,4vw,3rem);
      }
      /* Panels go static so the accordion pushes the list down instead of floating over it, and
         display:none rather than visibility:hidden when closed. Per the note above, a merely
         invisible panel is still laid out and still counts toward scrollWidth, which is exactly
         how the closed Support panel put the whole page into horizontal scroll before. */
      body.dtfhd-navopen .dtfhd-panel{
        position:static;transform:none;opacity:1;display:none;
        width:auto;min-width:0;max-width:none;
        border:0;border-radius:0;box-shadow:none;padding:0;
      }
      body.dtfhd-navopen .dtfhd-item.open>.dtfhd-panel{
        display:block;visibility:visible;pointer-events:auto;
        background:var(--bg,#f7f9fc);padding:2px clamp(1.25rem,4vw,3rem) 10px;
      }
      body.dtfhd-navopen .dtfhd-panel--cards{width:auto;}
      body.dtfhd-navopen .dtfhd-linkrow{white-space:normal;}
      /* mega panel inside the phone sheet: the two families stack, the divider becomes a top
         hairline, and the desktop column padding collapses into the sheet's own gutter */
      body.dtfhd-navopen .dtfhd-panel--mega{width:auto;}
      body.dtfhd-navopen .dtfhd-mega{grid-template-columns:1fr;}
      body.dtfhd-navopen .dtfhd-mcol{padding:0;}
      body.dtfhd-navopen .dtfhd-mcol+.dtfhd-mcol{border-left:0;border-top:1px solid var(--line,#e6ebf2);margin-top:12px;padding-top:12px;}
      body.dtfhd-navopen .dtfhd-mhead,body.dtfhd-navopen .dtfhd-msub,body.dtfhd-navopen .dtfhd-mrule{margin-left:10px;margin-right:10px;}
    }