/* ===========================================================================
   The Gen Z Executive — genzexe.com
   Palette and type lifted from the printed cover: deep navy field, gold
   plates, geometric sans (Jost) with a rounded bold (Nunito) for the chips.
   =========================================================================== */

/* ---- Fonts (self-hosted; no CDN dependency on launch day) ---------------- */
@font-face{font-family:Jost;src:url(/fonts/jost-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/jost-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/jost-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/jost-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:NunitoChip;src:url(/fonts/nunito-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --navy-deep:#0B1730;
  --navy:#12213F;
  --navy-mid:#1B2C51;
  --navy-line:#26385F;
  --ink:#22314F;

  --gold:#E4B063;
  --gold-soft:#EFC886;
  --gold-deep:#C4913F;

  --text:#E8EEF9;
  --text-dim:#A9BAD8;
  --text-faint:#7C8FB4;

  --shell:1180px;
  --r:4px;

  --display:Jost,'Century Gothic','Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --chip:NunitoChip,Jost,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--navy-deep);
  color:var(--text);
  font-family:var(--display);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
em{font-style:italic}
strong{font-weight:500;color:#fff}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}

/* A <table> runs its own layout and ignores width:1px, so anything wrapped here
   must be a block element — see the chart's data table. clip-path is the modern
   half of the pair; clip is kept for older engines. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--ink);padding:12px 20px;font-weight:500;
}
.skip-link:focus{left:16px;top:16px}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---- Constellation field ------------------------------------------------ */
/* Two layered radial-gradient "star" tiles plus a soft navy wash. Cheap,
   resolution-independent, and it never blocks first paint. */
.mesh{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 22% 12%, rgba(64,101,168,.28), transparent 42%),
    radial-gradient(circle at 82% 8%,  rgba(74,112,182,.20), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(40,68,124,.30), transparent 55%),
    radial-gradient(ellipse at 50% 34%, var(--navy-mid) 0%, var(--navy) 46%, var(--navy-deep) 100%);
}
.mesh::after{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.7px 1.7px at 18px 26px, #6B8AC4 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 132px 78px, #5C7AB8 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 74px 168px, #7FA0D8 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 196px 132px, #5C7AB8 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 232px 44px, #6B8AC4 50%, transparent 51%);
  background-size:260px 220px;
}

.nav,main,.footer{position:relative;z-index:1}

/* The nav is sticky, so an anchor jump would otherwise land with the section's
   kicker and heading hidden underneath it. */
.hero,.section,.band{scroll-margin-top:84px}

/* ---- Nav ---------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  background:rgba(11,23,48,.72);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav__inner{display:flex;align-items:center;gap:28px;min-height:68px}

.wordmark{
  display:flex;align-items:baseline;gap:8px;
  text-decoration:none;color:var(--text);flex:0 0 auto;
}
.wordmark__the{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.wordmark__name{
  font-size:16px;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
}

.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{
  color:var(--text-dim);text-decoration:none;font-size:14.5px;letter-spacing:.02em;
  transition:color .18s ease;
}
.nav__links a:hover{color:var(--gold)}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.btn--gold{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  color:var(--ink);
  box-shadow:0 6px 22px -10px rgba(228,176,99,.85);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(228,176,99,.95)}
.btn--ghost{
  background:transparent;color:var(--text);border-color:rgba(200,214,238,.32);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:9px 18px;font-size:13px}
.btn--lg{padding:16px 34px;font-size:15.5px}
.btn[aria-disabled="true"]{
  opacity:.45;pointer-events:none;box-shadow:none;transform:none;
}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---- Hero --------------------------------------------------------------- */
.hero{padding:clamp(34px,7vw,104px) 0 clamp(44px,6vw,88px)}
.hero__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(32px,6vw,80px);align-items:center;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
  padding:6px 14px 6px 11px;border:1px solid rgba(228,176,99,.38);border-radius:100px;
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  background:rgba(228,176,99,.07);
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(228,176,99,.6);animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(228,176,99,.55)}
  70%{box-shadow:0 0 0 9px rgba(228,176,99,0)}
  100%{box-shadow:0 0 0 0 rgba(228,176,99,0)}
}
@media (prefers-reduced-motion:reduce){.eyebrow .dot{animation:none}}

.hero__title{
  margin:0 0 22px;font-weight:300;
  font-size:clamp(34px,5.2vw,60px);line-height:1.08;letter-spacing:-.012em;
  color:#fff;
}
.hero__lede{
  margin:0 0 28px;max-width:56ch;
  font-size:clamp(16.5px,1.5vw,19px);line-height:1.68;color:var(--text-dim);font-weight:400;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero__meta{margin:0;font-size:14px;color:var(--text-faint);letter-spacing:.03em}

.countdown{display:flex;gap:12px;margin:0 0 26px;flex-wrap:wrap}
.countdown--get{margin:0 0 clamp(28px,3.5vw,40px)}
.countdown--get .countdown__unit{min-width:88px;padding:14px 18px}
.countdown--get .countdown__num{font-size:32px}
.countdown__unit{
  min-width:74px;padding:10px 14px;border-radius:var(--r);text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(200,214,238,.16);
}
.countdown__num{
  display:block;font-size:26px;font-weight:400;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.15;
}
.countdown__lbl{
  display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);
}

/* ---- Cover ------------------------------------------------------------- */
.hero__art{display:flex;justify-content:center}
.cover{
  position:relative;width:min(100%,420px);
  transform:perspective(1600px) rotateY(-13deg) rotateX(3deg);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.62));
}
.cover:hover{transform:perspective(1600px) rotateY(-6deg) rotateX(1.5deg) translateY(-6px)}
.cover img{
  width:100%;height:auto;border-radius:2px 5px 5px 2px;
  border:1px solid rgba(200,214,238,.18);
}
/* Page-block edge along the fore-edge of the book */
.cover__spine{
  position:absolute;top:2%;right:-7px;width:8px;height:96%;
  background:linear-gradient(90deg,#8A99B4 0%,#C3CEDF 30%,#9FADC6 58%,#CDD7E6 80%,#7E8CA6 100%);
  border-radius:0 2px 2px 0;opacity:.85;
  transform:rotateY(22deg);transform-origin:left center;
}
@media (prefers-reduced-motion:reduce){
  .cover{transition:none}
  .cover:hover{transform:perspective(1600px) rotateY(-13deg) rotateX(3deg)}
}

/* ---- Stat band ---------------------------------------------------------- */
.band{
  border-block:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.028);
  padding-block:clamp(28px,4vw,44px);
}
.band__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,3vw,40px);
}
.stat{display:flex;flex-direction:column;gap:8px}
.stat__num{
  font-size:clamp(30px,3.6vw,44px);font-weight:300;color:var(--gold);line-height:1;
  letter-spacing:-.01em;
}
.stat__label{font-size:14.5px;line-height:1.5;color:var(--text-dim);max-width:34ch;font-weight:400}

/* ---- Sections ----------------------------------------------------------- */
.section{padding-block:clamp(56px,7.5vw,104px)}
.section--alt{background:rgba(255,255,255,.026);border-block:1px solid rgba(255,255,255,.06)}

.kicker{
  margin:0 0 12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}
.section h2{
  margin:0 0 18px;font-weight:300;letter-spacing:-.01em;color:#fff;
  font-size:clamp(26px,3.6vw,40px);line-height:1.16;
}
.section__head{max-width:62ch;margin-bottom:clamp(30px,4vw,48px)}
.section__sub{margin:0;color:var(--text-dim);font-size:17px;line-height:1.65;font-weight:400}

/* The premise is the argument of the book, so it runs the full width of the
   section rather than sitting in a narrow column. Type scales up with it to
   keep the line length readable at that measure. */
.prose{max-width:68ch;margin-inline:auto}
.prose .kicker{text-align:center;margin-bottom:clamp(20px,2.6vw,32px)}
.prose p{
  margin:0 0 26px;color:var(--text-dim);
  font-size:clamp(18px,1.75vw,22px);line-height:1.7;font-weight:400;
}

/* The opening figure is the hook — it should land before anything else does. */
.prose__lead{
  margin-bottom:clamp(26px,3vw,36px)!important;
  color:var(--text)!important;
  font-size:clamp(23px,2.9vw,34px)!important;
  line-height:1.34!important;font-weight:300!important;
}
.prose__lead strong{color:var(--gold);font-weight:400}

/* The short single-line paragraphs are rhetorical beats, not body copy. */
.prose__beat{
  margin:clamp(30px,3.6vw,44px) 0!important;text-align:center;
  color:#fff!important;font-weight:300!important;
  font-size:clamp(22px,2.7vw,32px)!important;line-height:1.35!important;
}
.prose__beat--strong{
  color:var(--gold)!important;
  font-size:clamp(26px,3.4vw,40px)!important;
}

.prose strong{color:#fff;font-weight:500}
.term-coin{color:var(--gold);font-style:italic}

.prose .pull{
  margin-top:clamp(34px,4vw,48px);padding-left:26px;
  border-left:2px solid var(--gold);
  color:var(--text);font-size:clamp(19.5px,1.95vw,24px);line-height:1.6;
}


/* ---- Chart: change in hiring since 2019 --------------------------------- */
/* Two declines against a zero baseline — the contrast in bar length is the
   argument. Built from HTML rather than SVG so the labels stay real text and the
   whole thing reflows on a phone without viewBox arithmetic. One series, so one
   hue and no legend; the title names what is being measured. */
.chart{
  margin:clamp(34px,4.5vw,52px) 0;padding:clamp(22px,3vw,32px);
  border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid rgba(200,214,238,.14);
}
.chart__cap{display:block;margin-bottom:clamp(22px,3vw,30px)}
.chart__title{
  display:block;font-size:clamp(17px,1.6vw,20px);color:#fff;letter-spacing:.01em;
}
.chart__sub{
  display:block;margin-top:6px;max-width:52ch;
  font-size:clamp(14px,1.3vw,15.5px);line-height:1.5;color:var(--text-dim);
}

.chart__plot{display:flex;flex-direction:column;gap:18px}

/* label | track | value. The value gets its own column so a short bar can never
   push its label off the end — which is exactly what a positioned label did. */
.bar{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 54px;
  gap:16px;align-items:center;
}
.bar__label{
  font-size:14.5px;line-height:1.3;color:var(--text);
  display:flex;flex-direction:column;gap:2px;
}
.bar__label small{font-size:12.5px;color:var(--text-faint);letter-spacing:.02em}

.bar__track{position:relative;display:block;height:30px}
/* The zero baseline sits where the scale crosses, not in the middle. */
.bar__zero{
  position:absolute;left:97.2%;top:-6px;bottom:-6px;width:1px;
  background:rgba(200,214,238,.42);
}
/* Both values are declines, so this is one hue against a zero baseline rather
   than a diverging pair. #4A7AD4 clears 3:1 against the navy surface.
   The 2px transparent border keeps a gap between the fill and the zero rule,
   per the mark spec. */
.bar__fill{
  position:absolute;top:0;height:100%;border-radius:3px;
  background:#4A7AD4;border-right:2px solid transparent;
  background-clip:padding-box;
}

/* Values wear text ink, never the series colour. Right-aligned and tabular so
   the three magnitudes can be compared down the column. */
.bar__val{
  text-align:right;font-size:15px;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;
}

.chart__source{
  margin:clamp(20px,2.4vw,26px) 0 0!important;
  font-size:12.5px!important;line-height:1.5!important;
  color:var(--text-faint)!important;letter-spacing:.02em;
}

@media (max-width:640px){
  /* Label spans the full row; track and value share the one below it. */
  .bar{grid-template-columns:minmax(0,1fr) 48px;gap:6px 12px}
  .bar__label{grid-column:1 / -1;font-size:14px}
  .bar__track{height:26px}
}

/* ---- Four translations -------------------------------------------------- */
.translations{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;
}
.tcard{
  padding:26px 24px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid rgba(200,214,238,.14);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.tcard:hover{
  border-color:rgba(228,176,99,.45);background:rgba(228,176,99,.055);
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){.tcard:hover{transform:none}}

/* The pairs stack rather than sit side by side. Horizontally, "corporate ladder
   → portfolio life" cannot fit a ~300px card, and letting it wrap stranded the
   arrow at the end of the first line. Stacking reads as a transformation and is
   identical across all four cards whatever the word lengths. */
.tcard__pair{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin-bottom:18px;
}
.tcard__pair .term__arrow{transform:rotate(90deg);margin-left:14px}
.term{
  display:inline-block;padding:7px 15px;border-radius:2px;
  font-family:var(--chip);font-weight:800;font-size:15px;letter-spacing:.01em;
}
.term--old{
  background:transparent;color:var(--text-faint);
  border:1px dashed rgba(200,214,238,.34);
}
.term--new{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  color:var(--ink);border:1px solid rgba(200,214,238,.6);
}
.term__arrow{color:var(--gold);font-size:17px;line-height:1;display:block}
.tcard p{margin:0;font-size:15.5px;line-height:1.65;color:var(--text-dim);font-weight:400}

/* ---- Retailers ---------------------------------------------------------- */
.get{max-width:900px}
.retailers{
  list-style:none;margin:0 0 clamp(32px,4vw,44px);padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;
}
.retailers > li{display:flex}
.retailer{
  flex:1;display:flex;flex-direction:column;gap:5px;
  padding:18px 20px;border-radius:var(--r);text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid rgba(200,214,238,.14);
  color:var(--text);transition:all .2s ease;
}
.retailer[href]:hover{
  border-color:var(--gold);background:rgba(228,176,99,.09);transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){.retailer[href]:hover{transform:none}}
.retailer__name{font-size:16.5px;font-weight:400;letter-spacing:.02em}
.retailer__meta{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#94A7CA;
}
.retailer--soon{background:rgba(255,255,255,.022);border-color:rgba(200,214,238,.1)}
.retailer--soon .retailer__name{color:var(--text-dim)}
.retailer--soon .retailer__meta{color:var(--gold)}

/* ---- Signup ------------------------------------------------------------- */
.signup{
  padding:clamp(24px,3.4vw,34px);border-radius:var(--r);
  background:rgba(255,255,255,.045);border:1px solid rgba(200,214,238,.16);
}
.signup__title{
  margin:0 0 18px;font-weight:400;font-size:20px;letter-spacing:.01em;color:#fff;
}
.signup__row{display:flex;gap:12px;flex-wrap:wrap}
.signup input[type=email]{
  flex:1 1 260px;min-width:0;
  padding:14px 16px;border-radius:var(--r);
  background:rgba(11,23,48,.6);border:1px solid rgba(200,214,238,.24);
  color:var(--text);font-family:var(--display);font-size:16px;
  transition:border-color .18s ease;
}
.signup input[type=email]::placeholder{color:var(--text-faint)}
.signup input[type=email]:focus{border-color:var(--gold);outline:none}
.signup input[type=email][aria-invalid=true]{border-color:#E07A6A}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.signup__note{margin:14px 0 0;font-size:13px;color:var(--text-faint);line-height:1.5}
.signup__msg{margin:12px 0 0;font-size:14.5px;min-height:1.2em}
.signup__msg[data-tone=ok]{color:var(--gold)}
.signup__msg[data-tone=err]{color:#F0968A}

/* ---- Author ------------------------------------------------------------- */
.author{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,56px);align-items:start;
}
.author__body p{margin:0 0 18px;color:var(--text-dim);font-size:17px;line-height:1.72;font-weight:400}
.author__line{
  margin-block:24px;padding-left:20px;border-left:2px solid var(--gold);
  color:var(--text);font-size:18.5px;line-height:1.62;
}
.author__card{
  padding:26px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid rgba(200,214,238,.14);
}
.author__card h3{margin:0 0 12px;font-weight:400;font-size:19px;color:#fff}
.author__card p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--text-dim)}

/* ---- Footer ------------------------------------------------------------- */
.footer{border-top:1px solid rgba(255,255,255,.08);padding-block:34px;margin-top:8px}
.footer__inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.footer__title{
  margin:0 0 4px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.footer__meta{margin:0;font-size:13px;color:var(--text-faint)}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:980px){
  .nav__links{display:none}
  .hero__inner{grid-template-columns:1fr;text-align:left}
  .hero__art{order:-1;margin-bottom:4px;justify-content:flex-start}
  .cover{width:min(52%,200px)}
  .cover,.cover:hover{transform:none}
  .cover__spine{display:none}
  .band__grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .author{grid-template-columns:1fr}
}

@media (max-width:560px){
  body{font-size:16px}
  .shell{padding-inline:18px}
  .nav__inner{gap:14px;min-height:60px}
  .wordmark__name{font-size:14px}
  .band__grid{grid-template-columns:1fr}
  .hero__cta .btn{flex:1 1 100%}
  .signup__row .btn{flex:1 1 100%}
  .footer__inner{flex-direction:column;align-items:flex-start}
}