/* ==========================================================================
   DPDP Core, component layer for the shared-stylesheet pages.

   Load order on those pages: styles.css, site.css, design.css, this file.
   design.css owns the palette; this file owns the components and must not
   redeclare a colour that design.css already names.

   It restyles the class names the site already uses. The only markup that
   moved was a <div class="sitehead"> wrapper placed around the existing
   header.top and nav.tabs so the pair can be sticky as one bar, which is
   what the prototype does. The wrapper is NOT called .masthead, because
   simulation/notice.html already uses that name for its own page title block.
   Nothing the scripts hook into (nav.tabs a, #lang, #pending, #greetA,
   #greetB) changed.
   ========================================================================== */

body{font-family:var(--font-ui)}

/* ==========================================================================
   Masthead: one sticky bar carrying the brand and the primary navigation
   ========================================================================== */

.sitehead{
  position:sticky;top:0;z-index:30;
  margin:-22px 0 0;      /* cancel .wrap's top padding so the bar meets the viewport */
  padding:14px 0 0;
}
/* the translucent band runs edge to edge even though .wrap is centred and padded */
.sitehead:before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:rgba(244,239,228,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}

header.top{
  align-items:center;
  gap:20px;
  padding-bottom:12px;
}
.brand{gap:11px}
.brand h1{font-size:18px;letter-spacing:-.04em;line-height:1.15}
.brand p{margin-top:1px;font-size:11px;color:var(--muted)}
/* No logo mark. The prototype carried a navy "D" tile; the owner removed it
   2026-08-17. The brand is the wordmark alone. */
.brand .logo{display:none}       /* the old emoji mark, also gone */
.langbox label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.langbox select{border-radius:999px;padding:7px 12px;font-size:12.5px}

/* ---------- primary navigation ----------
   The pill treatment itself lives in design.css, shared with the other two
   nav implementations. Only its placement inside the sticky bar is set here. */
nav.tabs{margin:0;padding-bottom:12px}

/* an in-page anchor must not land underneath the sticky bar */
:target{scroll-margin-top:130px}

/* ==========================================================================
   Home hero
   ========================================================================== */

.home-hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;
  padding:44px 0 30px;
}
.eyebrow{
  margin:0 0 11px;color:var(--navy);
  font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.hh-title{
  margin:0;max-width:16ch;
  font-size:clamp(38px,4.7vw,58px);font-weight:800;
  line-height:.98;letter-spacing:-.055em;
}
.hh-title em{font-style:normal;color:var(--navy)}
.home-hero .home-intro{margin:22px 0 0;max-width:34rem;font-size:17px}
/* The hero carried a three button row (Explore the Act / Explore by Sector /
   Assess My Readiness). Removed 2026-08-17: it duplicated the pathway card
   beside it, which already routes to the same three destinations. */
.scope{
  max-width:36rem;margin:26px 0 0;
  border-left:3px solid var(--lime);padding-left:13px;
  color:var(--muted);font-size:12.5px;line-height:1.55;
}
.scope strong{color:var(--ink)}

/* ---------- the pathway card, the hero's second column ---------- */
.command{
  border:1px solid var(--line);border-radius:var(--round);
  background:var(--surface);box-shadow:var(--shadow);
  padding:20px;
}
.command-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:13px;
}
.command-top strong{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
.status{display:flex;align-items:center;gap:6px;color:var(--green);font-size:11px;font-weight:800}
.status i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.command h3{margin:22px 0 8px;font-size:26px;letter-spacing:-.05em;line-height:1.05;font-weight:800}
.command>p{margin:0;color:var(--muted);font-size:13px}
.command-flow{margin-top:22px;border-left:2px solid var(--line);padding-left:20px}
.flow-item{
  position:relative;display:block;margin:0 0 18px;
  text-decoration:none;color:inherit;border-radius:8px;
}
.flow-item:last-child{margin-bottom:0}
.flow-item:before{
  content:'';position:absolute;left:-27px;top:3px;
  width:11px;height:11px;border:3px solid var(--surface);border-radius:50%;
  background:var(--navy);box-shadow:0 0 0 1px var(--navy);
}
.flow-item:nth-child(2):before{background:var(--lime);box-shadow:0 0 0 1px #9db21b}
.flow-item:nth-child(3):before{background:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.flow-item b{display:block;font-size:13px;font-weight:800}
.flow-item span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.flow-item:hover b{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.flow-item:focus-visible{outline:2.5px solid var(--navy);outline-offset:4px}
.command-foot{
  display:flex;justify-content:space-between;gap:10px;
  margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11px;
}

@media(max-width:900px){
  .home-hero{grid-template-columns:1fr;gap:28px;padding-top:32px}
  .hh-title{max-width:none}
}

/* ==========================================================================
   Bands: the routes, then the supporting tools
   ========================================================================== */

.band{padding:52px 0 8px;border-top:1px solid var(--line);margin-top:44px}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:20px}
.band-head h2{margin:0;font-size:clamp(28px,3.7vw,46px);letter-spacing:-.06em;line-height:.98;font-weight:800}
.band-head>p{max-width:26rem;margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.path{
  position:relative;display:flex;flex-direction:column;min-height:265px;
  border:1px solid var(--line);border-radius:var(--round);
  background:var(--surface);padding:21px;
  text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.path:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--navy)}
.path:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px}
.path:nth-child(1){background:linear-gradient(140deg,var(--surface),var(--blue))}
.path:nth-child(2){background:linear-gradient(140deg,var(--surface),#f1eadc)}
.path:nth-child(3){background:linear-gradient(140deg,var(--surface),var(--orange2))}
.path-num{font-size:11px;font-weight:900;color:var(--muted)}
.path-label,.feature .path-label{
  margin-top:27px;color:var(--muted);
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.path h3{margin:5px 0 10px;font-size:27px;letter-spacing:-.06em;line-height:1.02;font-weight:800}
.path p{margin:0;color:#514c45;font-size:13px;line-height:1.5}
.path small{margin-top:auto;padding-top:22px;color:var(--navy);font-weight:850;font-size:12px}

.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* with an odd number of cards the last one would sit alone in the left column
   beside an empty half. Let it run the full width instead. */
.feature-grid>:last-child:nth-child(odd){grid-column:1 / -1;min-height:0}
.feature{
  display:flex;flex-direction:column;min-height:180px;
  border:1px solid var(--line);border-radius:var(--round);
  background:var(--surface);padding:22px;
  text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--navy)}
.feature:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px}
.feature .path-label{margin-top:0}
.feature h3{margin:6px 0 7px;font-size:22px;letter-spacing:-.05em;line-height:1.05;font-weight:800}
.feature p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.feature small{margin-top:auto;padding-top:16px;color:var(--navy);font-weight:850;font-size:12px}
/* The language card is not a link; it carries the live greeting cycler instead.
   Kept compact deliberately, so it does not tower over the card beside it in
   the same grid row. */
.feature.lang{background:linear-gradient(140deg,var(--surface),var(--green2))}
.feature.lang .greet-hero{margin:auto 0 0;max-width:none;width:100%;gap:9px;padding-top:16px}
.feature.lang .bubble{max-width:74%;padding:8px 13px;border-radius:15px}
.feature.lang .bubble .g{font-size:17px}
.feature.lang .bubble .c{font-size:11px}
.feature.lang .bubble.a{border-bottom-left-radius:4px}
.feature.lang .bubble.b{border-bottom-right-radius:4px}

@media(max-width:900px){
  .band{padding-top:40px;margin-top:34px}
  .band-head{display:block}
  .band-head>p{margin-top:12px}
  .path-grid,.feature-grid{grid-template-columns:1fr}
  .path{min-height:0}
}

/* ==========================================================================
   Statistics
   ========================================================================== */

.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:52px 0 8px}
.statgrid .stat{border-top:2px solid var(--navy);padding-top:9px}
.statgrid .stat .n{display:block;font-size:33px;font-weight:900;letter-spacing:-.07em;color:var(--navy);line-height:1}
.statgrid .stat .l{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.35}
@media(max-width:760px){.statgrid{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   Page heads on the inner pages
   ========================================================================== */

.hero{margin:30px 0 6px}
.hero h2{font-size:clamp(30px,5vw,52px);letter-spacing:-.055em;line-height:.98;margin:0 0 10px;font-weight:800}
.hero p{font-size:16.5px;color:#514c45;line-height:1.5;max-width:720px}
.home-intro{font-size:16.5px;color:#514c45;line-height:1.5;max-width:760px}
.langnote{font-size:13px;color:var(--muted)}
.choose{
  font-size:clamp(26px,3.4vw,40px);letter-spacing:-.055em;line-height:1;
  margin:38px 0 14px;font-weight:800;color:var(--ink);
  padding-top:30px;border-top:1px solid var(--line);
}

/* reading measure: the panels hold body copy, so they are capped independently
   of the page shell */
.ipanel,.icta,.twohats{max-width:860px}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border-radius:999px;padding:11px 20px;border:1.5px solid var(--navy);
  background:var(--navy);color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:800;letter-spacing:0;
  transition:filter .15s ease,background .15s ease,color .15s ease;
}
.btn:hover,.btn:focus{text-decoration:none}
.btn:hover{filter:brightness(1.18)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff;filter:none}
.btn:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px}

/* ==========================================================================
   Statistics
   ========================================================================== */

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 8px}
.stats .stat{
  background:none;border:0;border-top:2px solid var(--navy);
  border-radius:0;padding:10px 0 0;text-align:left;min-width:0;
}
.stats .stat .n{font-size:32px;font-weight:900;letter-spacing:-.06em;color:var(--navy)}
.stats .stat .l{margin-top:5px;font-size:12.5px;color:var(--muted)}

/* ==========================================================================
   Section cards, the main route grid
   ========================================================================== */

.cards-nav{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;flex-direction:unset;
  counter-reset:card;
}
.section-card{
  position:relative;
  display:flex;flex-direction:column;min-height:190px;
  background:var(--surface);border:1px solid var(--line);border-left-width:1px;
  border-radius:var(--round);padding:20px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  counter-increment:card;
}
.section-card:hover{
  background:var(--surface);transform:translateY(-4px);
  box-shadow:var(--shadow);border-color:var(--navy);
}
.section-card:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px}
.section-card:before{
  content:'0' counter(card);
  display:block;margin-bottom:22px;
  font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.06em;
}
.section-card .t{font-size:22px;font-weight:800;letter-spacing:-.05em;line-height:1.05}
.section-card .d{margin-top:8px;font-size:13px;color:#514c45;line-height:1.45}
.section-card:after{
  content:'Open \2192';margin-top:auto;padding-top:18px;
  color:var(--navy);font-size:12px;font-weight:850;
}
/* a quiet colour rhythm across the grid, as in the prototype */
.cards-nav .section-card:nth-child(3n+1){background:linear-gradient(140deg,var(--surface),var(--blue))}
.cards-nav .section-card:nth-child(3n+2){background:linear-gradient(140deg,var(--surface),#f1eadc)}
.cards-nav .section-card:nth-child(3n+3){background:linear-gradient(140deg,var(--surface),var(--orange2))}

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.waitlist{
  border:0;border-radius:var(--round);background:var(--navy);color:#fff;
  padding:clamp(26px,5vw,46px);margin-top:34px;
}
.waitlist h2{
  max-width:740px;margin:0 0 10px;
  font-size:clamp(28px,4.6vw,48px);letter-spacing:-.06em;line-height:1;color:#fff;
}
.waitlist p{max-width:650px;color:#dbe3ff;font-size:15px}
.waitlist .btn{background:#fff;color:var(--navy);border-color:#fff;margin-top:6px}
.waitlist .btn:hover{filter:brightness(.93)}

/* ==========================================================================
   Footer
   ========================================================================== */

footer{border-top:1px solid var(--line);margin-top:38px;padding-top:26px;font-size:12.5px}
footer p{max-width:820px}
.foot-links{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:12px}
.foot-links a{color:var(--muted2);text-decoration:none}
.foot-links a:hover{color:var(--navy);text-decoration:underline}

/* ==========================================================================
   Article and reading surfaces
   ========================================================================== */

.rcard,.ipanel,.tldr,.post-figure{border-radius:16px}
.chip{border-radius:999px}
.post h1{letter-spacing:-.045em;font-size:34px;line-height:1.1}
.post .kicker,.series-head h2{letter-spacing:-.02em}

/* article cards pick up the same treatment as the route cards: a raised
   surface with a hover lift, rather than the tinted panel with a heavy rule
   down its left edge */
.post-card{
  background:var(--surface);border:1px solid var(--line);border-left-width:1px;
  border-radius:var(--round);padding:20px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.post-card:hover{
  background:var(--surface);transform:translateY(-4px);
  box-shadow:var(--shadow);border-color:var(--navy);
}
.post-card .tag{
  color:var(--navy);background:var(--blue);
  font-size:9.5px;letter-spacing:.09em;
}
.post-card .pt{font-size:17px;font-weight:800;letter-spacing:-.03em}
.post-card.soon{border-color:var(--line);opacity:.72}
.post-card.soon .tag{color:var(--muted);background:var(--soft)}
.slider-btn{border-color:var(--line);background:var(--surface)}
.slider-btn:hover{background:var(--navy);border-color:var(--navy)}
.series-head h2{font-size:22px;letter-spacing:-.04em}

/* page titles on the legal and commerce pages, which the prototype sets at
   display scale rather than at body scale */
.legal h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.05em;line-height:1.02;font-weight:800;margin:6px 0 14px}
.legal h2{font-size:20px;letter-spacing:-.03em;font-weight:800;margin:26px 0 8px}
.blog-intro{font-size:16.5px;color:#514c45;line-height:1.5}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  nav.tabs{gap:5px}   /* design.css turns it into one scrolling row here */
  :target{scroll-margin-top:120px}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .cards-nav{grid-template-columns:1fr}
  .section-card{min-height:0}
  .hh-title{font-size:clamp(34px,11vw,50px)}
}
@media(prefers-reduced-motion:reduce){
  .section-card,.btn,nav.tabs a{transition:none}
  .section-card:hover{transform:none}
}