/* =============================================================
   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-sheethead{display:none;}
    .dtfhd-item--tel{display:none;}
    .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;}
    /* phones: the nav IS the drawer (off-canvas left, slides in under body.dtfhd-navopen).
       It stays rendered but visibility:hidden while closed, so nothing is focusable off-screen
       and nothing counts toward scrollWidth. Styled in the drawer block further down. */


      /* header auth links (front door): highlight mirrors the active card tab */
        .hd-phoneico{display:none;}
        .hd-auth{display:inline-flex;align-items:center;font-weight:700;font-size:13.5px;line-height:1;
      color:#0D1422;text-decoration:none;padding:10px 12px;border-radius:999px;white-space:nowrap;}
    .hd-auth:hover,.hd-auth:focus-visible{color:var(--brand-link,#D9481A);background:none;}
    .dtfhd-toplink.is-on{color:var(--blue-dark);background:var(--blue-soft);}
    /* the ACTIVE auth link keeps only the colour shift: the tinted pill read as an orange glow
       stuck on Sign In after a tap (Justin 2026-08-01) */
    .hd-auth{-webkit-tap-highlight-color:transparent;}
    .hd-auth.is-on{color:#0D1422;background:none;} /* active tab shows no state on the link at all (Justin 2026-08-01) */
    /* the Sign up half of the pair wears the brand gradient; declared after the hover rule so the
       gradient wins on hover too (equal specificity, later declaration) */
    .hd-auth--primary,.hd-auth--primary:hover,.hd-auth--primary:focus-visible,.hd-auth--primary.is-on{
      color:#fff;padding:11px 17px;border-radius:999px;
      background:var(--grad-brand,linear-gradient(135deg,#FF8A2B 0%,#FF394C 100%));
      box-shadow:0 8px 18px -8px rgba(255,57,76,.55);}
    .hd-auth--primary:hover{filter:brightness(1.05);}
    /* the in-sheet copy of the pair exists only on phones; desktop shows the .hd-cta pair instead */
    .dtfhd-item--auth{display:none;}
    /* 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;}
    }
/* The pair + handset made the phone bar overflow 375px and wrap under the logo: trim the
   gaps, the logo, the Sign in side-padding and the icon box until one row fits at 360. */
@media(max-width:560px){
  .hd-in{gap:.25rem;}
  .hd-logo .brandmark{height:clamp(23px,6.4vw,30px);}
  .hd-cta .hd-auth{padding:9px 6px;}
  .hd-cta .hd-auth--primary{padding:10px 13px;}
  .hd-phoneico{width:30px;height:40px;}
  .hd-phoneico svg{width:18px;height:18px;}
}
@media(max-width:420px){
  .hd-logo .brandmark{height:22px;}
  .hd-cta .hd-auth{padding:9px 5px;font-size:12px;}
  .hd-cta .hd-auth--primary{padding:10px 12px;font-size:12px;}
  .hd-phoneico{width:26px;}
}
@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){
      /* no phone in the phone-size bar (Justin 2026-08-01): the number lives in the drawer's
         bottom block instead, and the Sign in / Sign up pair takes the right edge */
      .dtfhd-rep{display:none;}
    }

    /* ---- 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-grid;place-items:center;flex:0 0 auto;
        width:44px;height:44px;padding:0;border:0;border-radius:10px;
        background:none;color:var(--ink,#0d1422);cursor:pointer;
      }
      .dtfhd-burger:hover{background:var(--blue-soft,rgba(255,57,76,.1));color:var(--blue-dark,#D9481A);}
      /* 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-nav + .hd-cta (two classes) outweighs a bare .hd-cta, which is why the pair sat
         next to the logo instead of flush right - match its specificity */
      .hd-nav + .hd-cta,.hd-cta{margin-left:auto;margin-right:0;gap:2px;}
      .hd-cta .hd-auth{padding:9px 8px;font-size:12.5px;}
      .hd-cta .hd-auth--primary{padding:10px 14px;font-size:12.5px;}
      /* bare handset to the RIGHT of the pair, phones only (Justin 2026-08-03) - desktop
         keeps the full talk-to-a-rep block so the icon would be a duplicate there */
      .hd-phoneico{display:inline-grid;place-items:center;width:40px;height:40px;color:var(--ink,#0d1422);}
      .hd-phoneico svg{width:20px;height:20px;display:block;}
      .dtfhd-burger svg{display:block;}

      /* ---- the drawer: EXACT port of sections/dtf-header.liquid's mobile drawer from the
         Justin 7-23 staging theme (widths, paddings, and type sizes copied verbatim). ---- */
      .hd-nav{
        display:flex;flex-direction:column;
        position:fixed;top:0;left:0;bottom:0;z-index:200;
        width:min(86vw,24rem);margin-right:0;flex-wrap:nowrap;
        background:#fff;
        padding:0 0 calc(4px + env(safe-area-inset-bottom,0px));
        transform:translateX(-100%);visibility:hidden;
        transition:transform .22s ease,visibility .22s;
        overflow-y:auto;overscroll-behavior:contain;
      }
      body.dtfhd-navopen .hd-nav{transform:translateX(0);visibility:visible;}
      body.dtfhd-navopen{overflow:hidden;}
      /* The scrim lives on .hd, NOT body: .hd is position:sticky with a z-index, i.e. its own
         stacking context, so the drawer's z-index only counts INSIDE it. A body-level scrim at
         any z sits above the whole header subtree - which painted the dim OVER the drawer and
         swallowed its taps. Inside .hd's context the drawer (200) beats the scrim (150), and the
         bar's own content dims beneath it like the reference. */
      body.dtfhd-navopen .hd::after{content:'';position:fixed;inset:0;background:rgba(13,20,34,.45);z-index:150;}
      .dtfhd-sheethead{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
        padding:14px 16px 12px 20px;border-bottom:1px solid var(--line,#e6ebf2);}
      .dtfhd-sheethead span{font-size:15px;font-weight:800;color:var(--ink,#0d1422);}
      .dtfhd-sheetclose{display:inline-grid;place-items:center;
        width:44px;height:44px;border:0;border-radius:10px;background:none;
        color:var(--ink,#0d1422);cursor:pointer;padding:0;}
      .dtfhd-sheetclose svg{width:20px;height:20px;}
      .dtfhd-menu{display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
        flex:1 1 auto;min-height:0;padding:8px 10px;}
      .dtfhd-item{width:100%;}
      .dtfhd-menu>.dtfhd-item+.dtfhd-item{border-top:1px solid var(--line,#e6ebf2);}
      .dtfhd-item.has-panel::after{content:none;}
      .dtfhd-toplink{width:100%;justify-content:space-between;gap:10px;
        padding:14px 10px;border-radius:10px;font-size:15px;font-weight:700;
        color:var(--ink,#0d1422);white-space:normal;}
      .dtfhd-item.open>.dtfhd-toplink{color:var(--blue-dark,#D9481A);background:none;}
      .dtfhd-caret{opacity:.55;}
      .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;}
      .dtfhd-item.open>.dtfhd-panel{display:block;visibility:visible;pointer-events:auto;
        background:none;padding:0 4px 12px;}
      .dtfhd-linkrow{white-space:normal;font-size:14px;font-weight:600;color:var(--ink2,#475569);
        padding:10px 8px;border-radius:8px;}
      /* the transfers mega inside the drawer: families stack, the column divider becomes a hairline */
      .dtfhd-mega{grid-template-columns:1fr;}
      .dtfhd-mcol{padding:0;}
      .dtfhd-mcol+.dtfhd-mcol{border-left:0;border-top:1px solid var(--line,#e6ebf2);margin-top:12px;padding-top:12px;}
      /* foot: Sign Up over Sign In (column reverses the DOM order), then the phone number */
      .dtfhd-item--auth{margin-top:auto;display:flex;flex-direction:column-reverse;gap:8px;
        border-top:1px solid var(--line,#e6ebf2);padding:14px 10px 2px;}
      .dtfhd-item--auth .hd-auth{width:100%;justify-content:center;padding:13px;font-size:15px;
        border-radius:999px;border:1.5px solid #E2E6EE;color:var(--ink,#0d1422);}
      .dtfhd-item--auth .hd-auth--primary{padding:14px;border:0;color:#fff;}
      .dtfhd-item--tel{display:block;border-top:0 !important;text-align:center;padding:10px 10px 12px;}
      .dtfhd-item--tel a{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink2,#475569);text-decoration:none;}



    }

/* ---- phone bar one-liner (Justin 2026-08-03): the pair + handset must share the row with
   the burger and logo. LAST in the file on purpose - the drawer block above re-declares
   .hd-cta .hd-auth at equal specificity, so source order is the only thing that wins. ---- */
@media(max-width:759px){
  .hd-cta .hd-auth{padding:8px 5px;font-size:12px;}
  .hd-cta .hd-auth--primary{padding:9px 12px;font-size:12px;}
  .hd-phoneico{width:26px;}
}
@media(max-width:389px){
  .hd-cta .hd-auth{padding:8px 4px;font-size:11.5px;}
  .hd-cta .hd-auth--primary{padding:9px 10px;font-size:11.5px;}
  .hd-phoneico{width:24px;}
  .hd-logo .brandmark{height:21px;}
}
@media(max-width:340px){
  .hd-cta .hd-auth{padding:7px 3px;font-size:11px;}
  .hd-cta .hd-auth--primary{padding:8px 9px;font-size:11px;}
  .hd-phoneico{width:22px;}
  .hd-logo .brandmark{height:19px;}
}


/* 760-989: nav wraps to its own row, so the auth pair joins the phone block on the
   right edge of row one (it was hugging the logo; Justin 2026-08-03) */
@media(min-width:760px) and (max-width:989px){
  .hd-nav + .hd-cta,.hd-cta{margin-left:auto;}
  .dtfhd-rep{margin-left:14px;}
}