/* =========================================================================
   Eastbound Link — homepage heading trial: warm yellow, larger
   Loaded after css/blackout.css on index.html only.

   Scope is deliberately narrow: the heading hierarchy (h1/h2/h3), the small
   section labels, and the nav words. Body copy, descriptions, links and the
   buttons keep their existing colours. Fold into blackout.css once approved.
   ========================================================================= */

:root{
  --yellow:#ffc93c;        /* heading tone */
  --yellow-deep:#c69c34;   /* dimmed second clause inside a heading */
  --nav-yellow:#d5ad46;    /* page-select words at rest */
  --magenta:#f0067b;       /* logo magenta — troubleshooting mail line */
  --magenta-bright:#ff5aa8;
}

/* ---------------- heading hierarchy ---------------- */
h1,h2,h3{color:var(--yellow)}

.hero h1{color:#fff;font-size:clamp(2.6rem,4.75vw,4.45rem);letter-spacing:-.035em;line-height:.99}
.hero h1 mark{color:#fff}

.sec h2{font-size:clamp(2.05rem,3.45vw,3rem);font-weight:600;letter-spacing:-.033em;line-height:1.03}
.sec h2 .thin{color:var(--yellow-deep)}

.cta h2{font-size:clamp(2.05rem,3.45vw,3rem);font-weight:600;letter-spacing:-.033em;line-height:1.03}

.row h3{font-size:1.45rem;font-weight:600;letter-spacing:-.022em}
.step2 h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em}
.scope-head h2,.step2 h3{color:#fff}
.diag__q{font-size:1.36rem;font-weight:600;letter-spacing:-.02em}

/* the footer column labels are <h3> but function as meta, so they stay quiet */
.footer-grid h3{color:var(--faint)}

/* ---------------- small section labels ---------------- */
.sec__tag{font-size:11px;letter-spacing:.2em;color:var(--yellow-deep)}
.eyebrow{font-size:11px;color:var(--yellow-deep)}

/* "+ Vietnam site" tags and the sub-supplier locations read as data, not labels */
.ledger__where,
.ledger__sub span:last-child{color:#fff}

/* ---------------- small mono labels and numerals ----------------
   Section caps, row/step numbers, the map caption, the symptom-picker
   categories and the diagnosis keys sit in the same yellow as the headings.
   Body copy and descriptions stay untouched. */
.row .n,
.ledger__cap,
.ledger__id,
.ledger__note,
.subs__cap,
.dg-cap,
.cat__h,
.step2__no,
.diag__k,
.diag__more{color:var(--yellow)}

/* the hero lede is one sentence now — give it room to sit on one line */
.lede{max-width:62ch}
.lede__accent{color:var(--magenta);font-weight:700}

/* markets: the industry names carry the body face, not a heavier cut */
.industry span{font-weight:400;letter-spacing:0;font-size:15.5px}

/* troubleshooting card placeholders */
/* inline email prompt at the end of the symptom intro */
.cat__note{font-size:inherit;line-height:inherit;color:var(--magenta)}
.cat__note a{display:inline-block;color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:transform .18s ease,color .18s ease;transform-origin:left center}
.cat__note a:hover{color:var(--magenta-bright);transform:scale(1.12)}

/* row hover: the number already turns white, the title follows it */
.row:hover h3{color:#fff}

/* ---------------- page select (nav) ---------------- */
.nav__links{color:#fff}
.nav__links a:hover{color:#fff}
.nav__links .is-active{color:#fff}

/* ---------------- homepage password gate ---------------- */
.site-content[hidden]{display:none!important}
.password-gate{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:32px 5vw;background:#000}
.password-gate[hidden]{display:none!important}
.password-gate__panel{position:relative;width:min(100%,440px);padding:clamp(28px,6vw,48px);
  border:1px solid var(--line);background:#050505}
.password-gate__panel::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.password-gate__logo{width:min(100%,240px);height:auto;margin:0 0 36px}
.password-gate__panel .eyebrow{margin:0 0 18px}
.password-gate__panel h1{color:#fff;font-size:clamp(2rem,5vw,2.8rem);font-weight:600;line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
.password-gate__intro{color:var(--dim);font-size:15px;margin:0 0 28px}
.password-gate__form label{display:block;color:#fff;font-size:13px;font-weight:500;margin:0 0 8px}
.password-gate__field{display:flex;border:1px solid var(--line-2);margin-bottom:16px}
.password-gate__field:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.password-gate__field input{width:100%;min-width:0;height:48px;padding:0 14px;border:0;background:#080808;color:#fff;font:16px var(--sans)}
.password-gate__field input:focus{outline:0}
.password-gate__toggle{min-width:64px;padding:0 12px;border:0;border-left:1px solid var(--line-2);background:#080808;color:var(--dim);font:12px var(--mono);cursor:pointer}
.password-gate__toggle:hover{color:#fff}
.password-gate__submit{width:100%;min-height:48px;font-size:14px}
.password-gate__status{min-height:1.5em;margin:12px 0 0;color:#ff9b9b;font-size:13px}
.password-gate__status:empty{margin-top:0;min-height:0}

/* ---------------- small screens ---------------- */
@media (max-width:860px){
  .hero h1{font-size:clamp(2.15rem,8.4vw,3rem);letter-spacing:-.03em}
  .sec h2,.cta h2{font-size:clamp(1.9rem,6.4vw,2.5rem)}
  .row h3{font-size:1.3rem}
  .step2 h3{font-size:1.08rem}
}