/* Career Reset — single structural core, final editorial polish 11 September 2026.
   Founder visual direction: one centered composition with a disciplined desktop
   frame, then deliberately narrower inner reading widths according to content.
   Full-bleed chapter backgrounds remain full width; alignment remains shared. */

:root{
  --site-core:1520px;
  --site-side:24px;
  --site-rail:max(var(--site-side),calc((100vw - var(--site-core))/2));
}

/* HEADER
   The bar remains full bleed. Its contents live in a real inner shell so the
   brand is flush with the left rail and Request access is flush with the right
   rail — the same geometry as the page content below. */
.header{
  padding-left:0 !important;
  padding-right:0 !important;
}
.header-core{
  width:min(var(--site-core),calc(100% - (2 * var(--site-side)))) !important;
  margin-inline:auto !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:17px 0;
}
.header.scrolled{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.header.scrolled .header-core{
  padding-top:11px;
  padding-bottom:11px;
}
.header-core .identity{margin:0 !important;flex:0 0 auto;}
.header-core nav{margin-left:auto;}

/* HERO
   Atmospheric background remains edge-to-edge; the actual hero composition is
   exactly the same width as the shared content core. */
.hero-wrap{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.hero{
  width:min(var(--site-core),calc(100% - (2 * var(--site-side)))) !important;
  max-width:var(--site-core) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.hero-copy{
  padding-left:0 !important;
}

/* Keep the compass concept intact — stage titles remain outside the circular
   rings — but reserve enough side room for the complete visual to stay inside
   the same shared rails as the rest of the hero. */
@media (min-width:1051px){
  .hero-compass{
    width:100% !important;
    max-width:100% !important;
  }
  .career-compass{
    width:min(82%,500px) !important;
  }
  .compass-stage{
    width:36% !important;
  }
  .stage-1{left:-2% !important;}
  .stage-2{right:-2% !important;}
  .stage-3{right:-8% !important;width:36% !important;}
  .stage-4{right:-2% !important;}
  .stage-5{left:-2% !important;}
  .stage-6{left:-8% !important;width:36% !important;}
  .compass-stage b{
    width:100% !important;
    max-width:100% !important;
  }
}

/* CHAPTERS
   Top-level chapters keep common outer rails. Inner composition widths are
   intentionally differentiated below so prose, artefacts and visual systems do
   not all stretch to the same measure. */
main > .section,
main > .statement-section,
main > .proof-band{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--site-rail) !important;
  padding-right:var(--site-rail) !important;
}

.story-tension::before{
  left:var(--site-rail) !important;
  right:var(--site-rail) !important;
}

footer{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--site-rail) !important;
  padding-right:var(--site-rail) !important;
}

/* Editorial chapter identifiers: quiet, consistent and subordinate to H2s. */
@media (min-width:761px){
  .section-label{
    font-size:clamp(.78rem,.72vw,.88rem) !important;
    line-height:1.25 !important;
    letter-spacing:.14em !important;
    font-weight:800 !important;
    text-transform:uppercase;
    margin-bottom:18px !important;
  }
  .section-label::after{
    width:clamp(32px,2.4vw,46px) !important;
  }
}

/* The founder recording exposed a device-class bug: a desktop browser can have
   a CSS viewport inside the old 761–1050px range even though it is being used
   as a full desktop canvas. Do not collapse fine-pointer / hover-capable desktop
   browsers into the narrow 820px tablet core. Reserve that compact core for
   genuine touch-first tablets only. */
@media (min-width:761px) and (max-width:1050px) and (hover:none) and (pointer:coarse){
  :root{
    --site-core:820px;
    --site-side:20px;
  }
  .header-core{
    gap:18px;
  }
  .hero-copy{
    padding-right:0 !important;
  }
}

/* Mobile remains fluid and calm. */
@media (max-width:760px){
  :root{
    --site-core:100%;
    --site-side:20px;
    --site-rail:20px;
  }
  .header-core{
    width:calc(100% - 36px) !important;
    padding:14px 0;
    gap:12px;
  }
  .header.scrolled .header-core{
    padding-top:10px;
    padding-bottom:10px;
  }
  .hero{
    width:calc(100% - 40px) !important;
  }
  .section-label{
    font-size:.76rem !important;
    line-height:1.25 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase;
    margin-bottom:16px !important;
  }
}

/* PUBLIC v1.0 CLOSEOUT — presentation only.
   Current authoritative core is 1520px desktop, 820px only for touch-first
   tablets, fluid mobile. These rules preserve the approved hero while improving
   readability and visual hierarchy without changing wording or methodology. */
.header{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.hero h1{
  font-size:clamp(3rem,4.72vw,4.25rem) !important;
}
.hero .lede{
  color:#efe5ec;
  font-size:clamp(1.06rem,1.34vw,1.26rem);
  line-height:1.62;
  max-width:40rem;
}
.hero-facts>div{border-top-color:rgba(214,183,123,.58)}
.hero-facts dt{
  font-size:.72rem;
  letter-spacing:.14em;
  color:#e7cc97;
  margin-bottom:7px;
}
.hero-facts dd{color:#f6eef3;line-height:1.55}

@media(min-width:1101px){
  .hero{grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);gap:clamp(36px,4vw,64px)}
  .hero-copy{padding-top:22px;max-width:760px}
  .hero .eyebrow{margin-bottom:14px}
  .hero .lede{margin-top:16px;max-width:38rem}
  .hero-facts{gap:0 26px;margin-top:22px;max-width:700px}
  .hero-facts>div{padding-top:14px}
  .hero .actions{margin-top:24px}
  .hero-compass{justify-self:end;max-width:640px !important}
}
@media(min-width:761px) and (max-width:1100px){
  .hero-copy{padding-top:28px}
  .hero-facts{gap:12px;margin-top:22px}
  .hero-facts>div{padding-top:12px}
  .hero .actions{margin-top:24px}
}
@media(max-width:760px){
  .hero-copy{padding-top:26px;padding-right:0 !important}
  .hero .lede{font-size:1.03rem;line-height:1.58;margin-top:14px}
  .hero-facts{margin-top:18px;gap:12px}
  .hero-facts>div{padding-top:11px}
  .hero-facts dt{margin-bottom:5px}
  .hero .actions{margin-top:22px}
}
/* On narrow phones, preserve every word while using the available vertical
   space more efficiently so the primary action remains visible without scroll. */
@media(max-width:420px){
  .hero-copy{padding-top:18px}
  .hero h1{font-size:clamp(2.6rem,11vw,2.7rem) !important}
  .hero .eyebrow{margin-bottom:12px}
  .hero .lede{font-size:.98rem;line-height:1.48;margin-top:10px}
  .hero-facts{margin-top:14px;gap:8px}
  .hero-facts>div{padding-top:8px}
  .hero-facts dt{font-size:.67rem;line-height:1.2;margin-bottom:4px}
  .hero-facts dd{font-size:.84rem;line-height:1.38}
  .hero .actions{margin-top:18px;gap:10px}
}

/* ================================================================
   FINAL PUBLIC DESIGN POLISH
   One outer frame; deliberately varied inner widths and section intensity.
   Palette, story, methodology, evidence and access policy remain unchanged.
   ================================================================ */

/* Quiet editorial bridge. */
.story-tension > .reveal{
  width:min(100%,1120px);
  margin-inline:auto;
}
.story-tension p{
  max-width:980px !important;
  line-height:1.22;
}

/* Fit: one dominant editorial statement with two quieter supporting panels. */
.audience-section > .section-label,
.audience-section > .audience-grid{
  width:min(100%,1240px);
  margin-inline:auto;
}
@media(min-width:1051px){
  .audience-grid{
    grid-template-columns:minmax(0,1.34fr) minmax(0,.83fr) minmax(0,.83fr) !important;
    gap:18px !important;
    align-items:stretch;
  }
  .audience-grid article:not(.audience-primary){
    background:#faf6ef !important;
    box-shadow:none !important;
  }
  .audience-grid article:last-child{
    background:#fffdfa !important;
    border-style:solid !important;
  }
  .audience-primary{
    padding:clamp(34px,3.4vw,48px) !important;
  }
}

/* Flagship output: dark anchor + premium working-paper artefact. */
main > .section.map-preview-section{
  background:#21151f !important;
  color:#f8f0e7 !important;
}
.map-preview-shell{
  width:min(100%,1400px);
  margin-inline:auto;
}
.map-copy .section-label{color:#e7cc97 !important}
.map-copy h2{color:#fff8ef !important}
.map-copy>p{color:#dfd1d9 !important;max-width:500px !important;line-height:1.7}
.map-sheet.map-example{
  max-width:820px !important;
  border:1px solid rgba(214,183,123,.5) !important;
  box-shadow:0 34px 90px rgba(5,2,5,.42) !important;
}
.map-example .sheet-stages li{
  box-shadow:0 3px 14px rgba(61,43,53,.035);
}

/* Demonstration: three semantic surfaces, not three identical cards. */
.product-preview-section > .preview-intro,
.product-preview-section > .preview-flow,
.product-preview-section > .preview-note{
  width:min(100%,1260px);
  margin-left:auto;
  margin-right:auto;
}
.preview-intro{max-width:940px}
.preview-flow{align-items:stretch !important}
.preview-card{
  border-radius:20px !important;
  box-shadow:none !important;
}
.preview-flow .preview-card:first-of-type{
  background:#fffdfa !important;
  border:1px solid #e4d9cb !important;
}
.preview-card.example{
  background:#f3ebe0 !important;
  border:1px solid #dfd2c2 !important;
}
.preview-card.output{
  background:#e1ebe5 !important;
  border:1px solid #c7d7ce !important;
  color:#2f4a43 !important;
}
.preview-card.output h3,
.preview-card.output p{color:#2f4a43 !important}
.preview-arrow{
  width:34px !important;
  height:34px !important;
  border-radius:50%;
  display:grid !important;
  place-items:center;
  align-self:center;
  color:#7b5c2c !important;
  border:1px solid #dcc9a8;
  background:#fffdfa;
}

/* Journey: readable pathway with larger indices and a clear Stage 4 pacing cue. */
.journey-section > .journey-heading,
.journey-section > .journey-list{
  width:min(100%,1260px);
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:1051px){
  .journey-heading{grid-template-columns:.88fr 1.12fr !important;gap:72px !important}
  .journey-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important}
  .journey-list article,.journey-list article:hover{
    grid-template-columns:64px minmax(0,1fr) !important;
    padding:28px 28px 26px !important;
    border-radius:20px !important;
    box-shadow:none !important;
  }
  .journey-list .stage-index{
    font-size:2.6rem !important;
    line-height:1 !important;
    color:#b89558 !important;
    opacity:.72;
  }
  .journey-list article:nth-child(4) h3::after{
    content:"DEEPER · 2–3 SITTINGS";
    display:inline-block;
    margin-left:10px;
    vertical-align:middle;
    border:1px solid #dcc9a8;
    border-radius:999px;
    padding:4px 8px 3px;
    font:700 .56rem/1.2 Inter,ui-sans-serif,sans-serif;
    letter-spacing:.1em;
    color:#7b5c2c;
  }
}

/* Operating idea: a brand-signature manifesto followed by three principles. */
.philosophy > .section-label,
.philosophy > .philosophy-grid{
  width:min(100%,1260px);
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:1051px){
  .philosophy-grid{grid-template-columns:1fr !important;gap:44px !important}
  .philosophy-lead{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:64px;
    align-items:end;
  }
  .philosophy-lead h2{
    font-size:clamp(4rem,5.4vw,5.8rem) !important;
    line-height:.88 !important;
    letter-spacing:-.035em;
    margin:0 !important;
  }
  .philosophy-lead p{max-width:520px;margin:0 0 8px auto;font-size:1.08rem;line-height:1.7}
  .principle-stack{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px !important}
  .principle-stack article{
    border-top:1px solid rgba(214,183,123,.5) !important;
    padding:24px 4px 0 !important;
  }
}

/* Care / privacy: intentionally softer, protective visual register. */
main > .section.care-section{background:#e7efe9 !important}
.care-section > .care-heading,
.care-section > .care-grid{
  width:min(100%,1220px);
  margin-left:auto;
  margin-right:auto;
}
.care-heading{max-width:1040px}
.care-grid article{
  background:rgba(255,253,250,.78) !important;
  border:1px solid #cbd8d0 !important;
  box-shadow:none !important;
}

/* Evidence: metrics lead visually; caveat remains explicit but subordinate. */
.evidence-section > .section-label,
.evidence-section > .evidence-head,
.evidence-section > .proof-band,
.evidence-section > .evidence-design-note,
.evidence-section > .pilot-lessons{
  width:min(100%,1320px);
  margin-left:auto;
  margin-right:auto;
}
.evidence-head{max-width:1180px}
#evidence .proof-band{
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(61,43,53,.06);
}
#evidence .proof-item{padding:28px 22px !important}
#evidence .proof-item strong{
  font-size:clamp(2.6rem,3.5vw,4rem) !important;
  line-height:.9 !important;
  letter-spacing:-.035em;
}
#evidence .proof-item span{margin-top:12px;line-height:1.45}
.evidence-note{
  font-size:.9rem !important;
  line-height:1.58 !important;
  padding:22px 24px !important;
  box-shadow:none !important;
}
.evidence-design-note{max-width:1180px}

/* Creator: human editorial composition, not another full-width report section. */
.narrative-section > .section-label,
.narrative-section > .editorial-split{
  width:min(100%,1120px);
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:1051px){
  .editorial-split{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
    gap:80px !important;
    align-items:start;
  }
  .large-prose{max-width:650px}
  .large-prose p{line-height:1.72}
}

/* FAQ: intentionally quiet and narrow. */
.faq-section > .section-label,
.faq-section > h2,
.faq-section > .faq-grid{
  width:min(100%,1080px);
  margin-left:auto;
  margin-right:auto;
}
.faq-section > h2{max-width:780px}
@media(min-width:761px){
  .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 34px !important}
  .faq-item{
    background:transparent !important;
    border:0 !important;
    border-top:1px solid #e4d9cb !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:24px 0 26px !important;
  }
}

/* No-fee statement: compact trust declaration before access. */
.free-section{padding-top:48px !important;padding-bottom:48px !important}
.free-card{
  width:min(100%,1080px);
  margin-left:auto !important;
  margin-right:auto !important;
  padding:clamp(28px,3.5vw,44px) !important;
  border-radius:24px !important;
}

/* Access: confident conclusion; protected without feeling bureaucratic. */
.access-section > .access-heading,
.access-section > .what-next,
.access-section > form{
  width:min(100%,1180px);
  margin-left:auto;
  margin-right:auto;
}
.access-heading{max-width:920px}
.what-next{
  background:#faf6ef !important;
  border:1px solid #e4d9cb !important;
  border-radius:20px !important;
  padding:24px 26px !important;
  box-shadow:none !important;
}
.what-next ol{
  counter-reset:access-step;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
  padding:0;
  list-style:none;
}
.what-next li{
  counter-increment:access-step;
  position:relative;
  padding:44px 16px 16px !important;
  border-top:1px solid #dcc9a8;
  line-height:1.5;
}
.what-next li::before{
  content:"0" counter(access-step);
  position:absolute;
  top:12px;
  left:16px;
  font:700 .68rem/1 Inter,ui-sans-serif,sans-serif;
  letter-spacing:.12em;
  color:#7b5c2c;
}
#access form{margin-top:28px}

@media(max-width:900px){
  .what-next ol{grid-template-columns:1fr}
  .what-next li{padding:18px 0 18px 42px !important;border-top:1px solid #dcc9a8}
  .what-next li::before{top:21px;left:0}
}

/* Reading comfort: keep long-form prose from stretching even inside wide frames. */
.narrative-section .prose,
.evidence-section .lede,
.care-heading>p,
.access-heading>p,
.faq-item p{
  max-width:72ch;
}

/* Mobile keeps the approved fluid system; only remove desktop-only embellishment. */
@media(max-width:760px){
  .map-preview-shell,
  .product-preview-section > .preview-intro,
  .product-preview-section > .preview-flow,
  .product-preview-section > .preview-note,
  .journey-section > .journey-heading,
  .journey-section > .journey-list,
  .philosophy > .section-label,
  .philosophy > .philosophy-grid,
  .care-section > .care-heading,
  .care-section > .care-grid,
  .evidence-section > .section-label,
  .evidence-section > .evidence-head,
  .evidence-section > .proof-band,
  .evidence-section > .evidence-design-note,
  .evidence-section > .pilot-lessons,
  .narrative-section > .section-label,
  .narrative-section > .editorial-split,
  .faq-section > .section-label,
  .faq-section > h2,
  .faq-section > .faq-grid,
  .free-card,
  .access-section > .access-heading,
  .access-section > .what-next,
  .access-section > form{
    width:100%;
  }
  .preview-arrow{border:0;background:transparent;width:auto !important;height:auto !important}
  .free-section{padding-top:36px !important;padding-bottom:36px !important}
}