/* The Hiring Blueprint™ — marketing site
   A program by AMJ Talent Solutions.

   Every value here comes from the application's public/tokens.json, which was
   extracted verbatim from the partner's own playbook. Do not invent colours or
   typefaces: this site and the app must read as one brand. The app is the
   source of truth — if she changes her brand, it changes there first.

   The one exception is the --sky value, which is her third phase colour
   (#7A93D6) as it appears in the playbook's own phase graphics. */

:root{
  --blue:#3058B0; --blue-dark:#213E80; --blue-tint:#E9EDFA;
  --burgundy:#783430; --burgundy-tint:#F6EAE9;
  --sky:#7A93D6;
  --bg:#F4F6FC; --gray:#A2A1A1; --gray-line:#D9DCE8; --charcoal:#2F2F2F;
  --radius-card:14px; --radius-control:10px;
  --shadow-card:0 6px 24px rgba(33,62,128,.10);
  --font-display:'Montserrat',sans-serif;
  --font-body:'Source Sans 3',sans-serif;
  --wrap:1280px;            /* laptop: fill the width, keep a modest margin */
  --gutter:clamp(20px,4vw,48px);
  --header-h:63px;           /* sticky header height, used by the full-screen hero */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
html,body{margin:0;padding:0}
body{
  background:#fff; color:var(--charcoal);
  font-family:var(--font-body); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}

h1,h2,h3,h4{font-family:var(--font-display); color:var(--blue-dark); line-height:1.15; margin:0 0 .5em}
h1{font-weight:800; font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-.01em}
h2{font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-weight:700; font-size:1.15rem}
h4{font-weight:700; font-size:1rem}
p{margin:0 0 1.1em}
a{color:var(--blue)}
.tm{font-size:.55em; vertical-align:super}

.eyebrow{
  display:block; font-family:var(--font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--burgundy); margin-bottom:.7em;
}
.lead{font-size:1.18rem; color:var(--charcoal)}
.note{color:var(--gray); font-size:.92rem}
.center{text-align:center}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.narrow{max-width:720px; margin-left:auto; margin-right:auto}
section{padding:72px 0}
section.tint{background:var(--bg)}
section.deep{background:var(--blue-dark); color:#fff}
section.deep h2,section.deep h3{color:#fff}
section.deep .eyebrow{color:#E7B3AE}
section.deep p{color:rgba(255,255,255,.88)}

/* Skip link — the first thing a keyboard or screen reader hits */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff;
  padding:12px 18px; z-index:100; font-family:var(--font-display); font-weight:700;
}
.skip:focus{left:0}

/* ---- Header ---- */
header.top{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--gray-line);
}
.topin{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px var(--gutter); max-width:var(--wrap); margin:0 auto}
.brandlink{display:flex; align-items:center; gap:11px; text-decoration:none}
.brandlink img{width:38px; height:38px}
.wordmark{font-family:var(--font-display); font-weight:800; color:var(--blue-dark); font-size:1.04rem; line-height:1.1}
.wordmark small{display:block; font-weight:600; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gray)}
nav.site{display:flex; gap:4px; flex-wrap:wrap}
nav.site a{
  font-family:var(--font-display); font-weight:700; font-size:.86rem; color:var(--gray);
  text-decoration:none; padding:8px 12px; border-radius:var(--radius-control);
}
nav.site a:hover{color:var(--blue-dark); background:var(--bg)}
nav.site a.on{color:var(--blue-dark); background:var(--blue-tint)}

/* ---- Hero ---- */
.hero{padding:88px 0 72px; background:linear-gradient(180deg,#fff 0%, var(--bg) 100%)}
.hero .quote{
  font-family:var(--font-display); font-weight:800; color:var(--blue-dark);
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.14; margin:0 0 .5em; letter-spacing:-.01em;
}
.hero .quote em{font-style:normal; color:var(--burgundy)}
.hero .attrib{
  border-left:3px solid var(--burgundy); padding-left:16px; margin:26px 0 0;
  max-width:520px; color:var(--charcoal);
}

/* ---- Cards ---- */
.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:26px;
}
.card.plain{box-shadow:none}
.card.tint{background:var(--blue-tint); border-color:transparent; box-shadow:none}
.card.warm{background:var(--burgundy-tint); border-color:transparent; box-shadow:none}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}

/* Numbered phase rows, as her playbook draws them */
.phase{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--gray-line)}
.phase:first-child{border-top:0}
.pnum{
  flex:0 0 40px; height:40px; border-radius:50%; color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
}
.pnum.one{background:var(--blue)} .pnum.two{background:var(--burgundy)} .pnum.three{background:var(--sky)}
.phase h3{margin-bottom:.1em}
.phase p{margin:0}

/* Wave table */
.waves{width:100%; border-collapse:collapse; margin-top:10px}
.waves th,.waves td{text-align:left; padding:14px 12px; border-bottom:1px solid var(--gray-line); vertical-align:top}
.waves th{
  font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray);
}
.waves td.w{font-family:var(--font-display); font-weight:800; color:var(--blue-dark); white-space:nowrap}
.waves td.win{font-weight:600; white-space:nowrap}
@media (max-width:640px){
  .waves,.waves tbody,.waves tr,.waves td{display:block; width:100%}
  .waves thead{display:none}
  .waves tr{border-bottom:1px solid var(--gray-line); padding:12px 0}
  .waves td{border:0; padding:2px 0}
}

/* Founder */
.founder{display:flex; gap:28px; align-items:flex-start}
.founder .photo{flex:0 0 150px; text-align:center}
.founder .photo img{width:150px; height:150px; border-radius:50%; object-fit:cover; box-shadow:0 8px 20px rgba(33,62,128,.18)}
.founder .photo .cap{margin-top:10px; font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--gray); line-height:1.4}
@media (max-width:640px){ .founder{flex-direction:column; align-items:center; text-align:center} }

/* Checklist vs roadmap, her own comparison */
.vs{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vs .col{border-radius:var(--radius-card); padding:24px}
.vs .a{background:var(--bg); border:1px solid var(--gray-line)}
.vs .b{background:var(--blue-tint)}
.vs .cap{font-family:var(--font-display); font-weight:800; color:var(--blue-dark); margin:0 0 2px}
.vs .sub{color:var(--gray); font-size:.9rem; margin:0 0 16px}
.vs .item{display:flex; gap:10px; align-items:center; padding:7px 0; color:var(--gray)}
.vs .box{flex:0 0 16px; width:16px; height:16px; border:2px solid var(--gray-line); border-radius:4px}

/* Audience switcher */
.who{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:26px}
.who a{
  display:block; text-decoration:none; padding:20px 22px; border-radius:var(--radius-card);
  background:#fff; border:1px solid var(--gray-line); box-shadow:var(--shadow-card);
}
.who a:hover{border-color:var(--blue)}
.who .t{display:block; font-family:var(--font-display); font-weight:800; color:var(--blue-dark); margin-bottom:3px}
.who .b{display:block; color:var(--gray); font-size:.92rem; line-height:1.45}

/* FAQ */
details.faq{border-top:1px solid var(--gray-line); padding:16px 0}
details.faq summary{
  cursor:pointer; font-family:var(--font-display); font-weight:700; color:var(--blue-dark);
  font-size:1.02rem; list-style:none;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:" +"; color:var(--burgundy)}
details.faq[open] summary::after{content:" –"}
details.faq p{margin:12px 0 0}

/* ---- Footer ---- */
footer.site{background:var(--blue-dark); color:rgba(255,255,255,.75); padding:52px 0 40px; font-size:.92rem}
footer.site a{color:#fff}
footer.site .brandline{font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.05rem; margin-bottom:6px}
footer.site .cols{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
footer.site .legal{margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); font-size:.82rem; color:rgba(255,255,255,.6)}
footer.site nav a{display:block; padding:3px 0; text-decoration:none; color:rgba(255,255,255,.8)}
footer.site nav a:hover{color:#fff}

/* Long-form (legal) pages */
.doc{max-width:720px; margin:0 auto; padding:56px 24px 72px}
.doc h2{margin-top:1.6em}
.doc ul{padding-left:22px}
.doc li{margin:.4em 0}

/* =====================================================================
   Wide layout — added 2026-10-12.
   Phone stays exactly as it was: one column, everything stacked. From
   960px up the page uses the laptop's width instead of a 1040px column:
   the hero fills the first screen, section intros sit beside their
   heading, and lists of three run side by side. Body text is still
   capped near 70 characters a line — wide pages, not wide paragraphs.
   ===================================================================== */

/* Prose measure, wherever it lands */
.measure{max-width:68ch}

/* ---- Hero: quote + supporting copy, with an illustration on the right ---- */
.hero{
  background:
    linear-gradient(90deg, rgba(48,88,176,.055) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(0deg,  rgba(48,88,176,.055) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(180deg,#fff 0%, var(--bg) 100%);
}
h1.quote{margin:0 0 .5em}
.hero-grid{display:grid; gap:40px; align-items:center}
.hero .lead{max-width:62ch}

/* Sample plan: a drawing of the app's dated plan, not a screenshot */
.plancard{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius-card);
  box-shadow:0 18px 50px rgba(33,62,128,.16); padding:24px 24px 20px; max-width:520px;
}
.plancard .ph{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-bottom:1px solid var(--gray-line); padding-bottom:12px; margin-bottom:6px}
.plancard .ph b{font-family:var(--font-display); font-weight:800; color:var(--blue-dark); font-size:1.05rem}
.plancard .ph span{font-size:.88rem; color:var(--gray)}
.plancard .field{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 8px}
.plancard .chip{font-family:var(--font-display); font-weight:700; font-size:.74rem;
  padding:5px 10px; border-radius:999px; background:var(--blue-tint); color:var(--blue-dark)}
.plancard .chip.w2{background:var(--burgundy-tint); color:var(--burgundy)}
.plancard ol{list-style:none; margin:6px 0 0; padding:0}
.plancard li{display:grid; grid-template-columns:12px 1fr auto; gap:12px; align-items:center;
  padding:9px 0; border-top:1px solid #EEF0F6; font-size:.98rem; line-height:1.35}
.plancard li:first-child{border-top:0}
.plancard .dot{width:12px; height:12px; border-radius:50%}
.plancard .dot.one{background:var(--blue)} .plancard .dot.two{background:var(--burgundy)} .plancard .dot.three{background:var(--sky)}
.plancard .when{font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--blue-dark); white-space:nowrap}
.plancard li.done{color:var(--gray)}
.plancard li.done .when{color:var(--gray); font-weight:600}
.plancard li.next{background:var(--blue-tint); margin:2px -10px; padding:9px 10px; border-radius:8px; border-top:0}
.plancard .coach{margin-top:14px; background:var(--bg); border-radius:10px; padding:12px 14px; font-size:.95rem; line-height:1.45}
.plancard .coach b{display:block; font-family:var(--font-display); font-size:.78rem; color:var(--burgundy); margin-bottom:2px}
.hero .illus-note{font-size:.82rem; color:var(--gray); margin:10px 0 0; max-width:520px}

/* ---- Section intro: heading on the left, lead on the right ---- */
.sechead{display:grid; gap:4px 56px}
.sechead .lead{margin:0}

/* ---- Hiring waves as a timeline ---- */
.timeline{margin-top:26px}
.tl-axis{display:none}
.tl-row{display:block; margin-bottom:14px}
.tl-bar{display:block; border-radius:10px; padding:14px 16px; color:#fff}
.tl-bar .n{font-family:var(--font-display); font-weight:800; font-size:1.05rem}
.tl-bar .win{display:block; font-weight:600; font-size:.95rem; opacity:.92}
.tl-row.w1 .tl-bar{background:var(--blue)}
.tl-row.w2 .tl-bar{background:var(--burgundy)}
.tl-row.w3 .tl-bar{background:var(--sky)}
.tl-who{padding:10px 2px 0}
.tl-who p{margin:0 0 4px}
.tl-who .note{display:block}

/* ---- Two-column prose block (heading side + body side) ---- */
.split{display:grid; gap:8px 56px}
.split > *{min-width:0}

/* ---- FAQ beside its heading ---- */
.faqsplit{display:grid; gap:8px 56px}

@media (min-width:960px){
  /* Hero fills the first screen below the sticky header */
  .hero{min-height:calc(100svh - var(--header-h)); display:flex; align-items:center; padding:56px 0}
  .hero > .wrap{width:100%}
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px}
  .hero-grid > .art{justify-self:end; width:100%; max-width:520px}
  .hero .quote{font-size:clamp(2.6rem,4.2vw,3.7rem)}
  /* Pages without an illustration: quote left, copy right */
  .hero-grid.text{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center}
  .hero-grid.text .lead{margin-bottom:0}

  section{padding:88px 0}
  .sechead{grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start}
  .sechead h2{margin-bottom:0}

  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:22px}

  /* Timeline: eleven equal columns, earlier to later; bars show order and relative length only */
  .timeline{display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); column-gap:0; row-gap:12px}
  .tl-axis{grid-column:1 / -1; grid-row:1; display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--gray); margin-bottom:6px}
  .tl-axis::before{content:""; order:1; flex:1; height:2px; margin-right:6px;
    background:linear-gradient(90deg,var(--gray-line),var(--gray-line)) center/100% 2px no-repeat}
  .tl-axis span:last-child{order:2}
  .tl-axis span:last-child::after{content:" \203A"}
  .tl-row{display:contents}
  .tl-bar{margin:0 3px}
  .tl-row.w1 .tl-bar{grid-column:1 / 5; grid-row:2}
  .tl-row.w2 .tl-bar{grid-column:2 / 9; grid-row:3}
  .tl-row.w3 .tl-bar{grid-column:9 / 12; grid-row:4}
  .tl-who{display:none}
  .tl-key{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:22px}
  .tl-key .tl-who{display:block; padding:16px 0 0; border-top:4px solid}
  .tl-key .tl-who.w1{border-color:var(--blue)}
  .tl-key .tl-who.w2{border-color:var(--burgundy)}
  .tl-key .tl-who.w3{border-color:var(--sky)}
  .tl-key h3{margin-bottom:.25em}

  .phases-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
  .phases-row .phase{border-top:0; border-left:1px solid var(--gray-line); padding:6px 28px; flex-direction:column; gap:14px}
  .phases-row .phase:first-child{border-left:0; padding-left:0}
  .phases-row .pnum{flex:none; width:40px; height:40px}

  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
  .split.lead-left{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .faqsplit{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .faqsplit > .head{position:sticky; top:calc(var(--header-h) + 32px); align-self:start}
  .faqsplit details.faq:first-of-type{border-top:0; padding-top:4px}

  .founder{gap:56px; align-items:center}
  .founder .photo{flex:0 0 220px}
  .founder .photo img{width:220px; height:220px}
  .founder .body{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px}
  .founder .body > h2{grid-column:1 / -1}
  .founder .body > p:nth-child(2){grid-column:1; grid-row:2 / span 2}
  .founder .body > p:nth-child(3){grid-column:2; grid-row:2; border-left:3px solid var(--burgundy); padding-left:20px}
  .founder .body > p.note{grid-column:2; grid-row:3; padding-left:23px}
}
/* Timeline key is only for the wide layout; phones read the per-wave text */
@media (max-width:959px){ .tl-key{display:none} }

/* Phone header: the three links used to stack beside the logo and the whole
   ~150px block stayed pinned while scrolling. Now: logo row, one row of
   links under it, and it scrolls away with the page. */
@media (max-width:700px){
  header.top{position:static}
  .topin{flex-wrap:wrap; gap:6px 12px; padding-top:10px; padding-bottom:8px}
  nav.site{width:100%; flex-wrap:nowrap; gap:2px; margin:0 -10px; overflow-x:auto}
  nav.site a{padding:7px 10px; font-size:.82rem; white-space:nowrap}
  .wordmark small{font-size:.56rem}
  .hero{padding:44px 0 56px}
  section{padding:56px 0}
  .hero-grid{gap:32px}
}