/* Approved preview: cinematic hook, clearly labelled examples and a readable needs board. */
.hero .h-copy { justify-content:center; padding-block:36px; }
.hero { min-height:570px; padding-top:32px; padding-bottom:32px; align-items:center; }
.hero h1 { display:block; font-size:clamp(42px,4.9vw,76px); line-height:1.2; }
.hero h1 small { font-size:clamp(15px,1.4vw,20px); margin-bottom:18px; }
.hero h1 .hook { display:block; font-family:var(--head); letter-spacing:-.035em; }
.hero .lede { font-size:17px; max-width:30em; }
.hero .vow { margin-top:24px; }
.hero .card { align-self:center; }
#s-stats { padding-top:26px; padding-bottom:26px; background:#fff; }
#s-stats .stat b { font-variant-numeric:tabular-nums; }
#s-stats .stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
#s-stats .stat { min-width:0; padding:18px 10px; }
#s-stats .stat b { display:flex; justify-content:center; align-items:baseline; gap:2px; white-space:nowrap; font-size:clamp(28px,3.8vw,48px); }
#s-stats .stat b small { font-size:16px; }
#s-stats .stat b span { display:inline; margin:0; font:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; }
#s-stats .section-heading { text-align:center; margin-bottom:12px; }
.stats-note { max-width:920px; margin:16px auto 0; padding:0 18px; font-size:13px; line-height:1.8; color:#555952; }
.need-description { margin-top:6px; color:#555952; font-size:14px; line-height:1.6; }
.top nav { gap:4px 15px; }
.scenario-strip { grid-column:1/-1; display:grid; grid-template-columns:300px minmax(0,1fr); align-items:center; gap:24px; padding:28px max(24px,calc((100% - 1200px)/2)); background:#fbf7ef; border-bottom:1px solid #e5ddcf; }
.scenario-label h2 { font:900 clamp(24px,2.7vw,34px)/1.3 var(--head); }
.scenario-label p { margin-top:4px; font-size:12px; color:#5b574f; }
.scenario-content { min-width:0; }
.scenario-window { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.scenario-card { display:flex; align-items:center; gap:12px; min-height:84px; padding:14px; border:1px solid #ded5c5; border-radius:8px; background:#fffdf8; }
.scenario-card[hidden],.need-row[hidden],#board-empty[hidden] { display:none!important; }
.scenario-icon { flex:none; color:#8a6a19; }
.scenario-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.scenario-card b { display:block; font-size:16px; }
.scenario-card span { display:block; color:#615d55; font-size:13px; }
.scenario-controls { display:flex; justify-content:flex-end; gap:6px; margin-top:9px; }
.scenario-controls button { min-width:44px; min-height:36px; border:1px solid #d9d0c1; border-radius:4px; background:#fffdf8; font-size:13px; }
.scenario-controls button:hover { background:#f0e9dc; }
#s-board { padding-bottom:56px; background:#fff; }
.board-intro { text-align:center; margin-bottom:40px; }
.board-intro h2 { font-size:clamp(32px,4.6vw,60px); line-height:1.25; }
.board-intro p { margin-top:12px; color:var(--dim); font-size:14px; }
.board-cta { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:10px 30px; margin-top:20px; border-radius:5px; background:#bb2816; color:#fff; font-size:20px; font-weight:900; text-decoration:none; }
.board-cta:hover { background:#a51e0e; }
.board-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:40px; }
.board-filters { border-right:1px solid var(--line); padding-right:24px; }
#board-filter-panel > summary { display:none; }
.board-filters h3 { font:900 22px/1.3 var(--head); color:#781b0f; padding-bottom:12px; }
.board-search-label { display:block; font-size:14px; font-weight:700; }
#board-search { display:block; width:100%; min-height:44px; padding:9px 11px; margin-top:6px; border:1px solid #b9b6b0; border-radius:4px; font-size:14px; background:#fff; }
.board-filters fieldset { padding:0; margin:24px 0 0; border:0; min-width:0; }
.board-filters legend { font-weight:800; margin-bottom:9px; }
.board-filter-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.board-filter-buttons button { min-height:42px; padding:7px 12px; border:1px solid #c9c6c0; background:#faf9f6; border-radius:5px; font-size:14px; }
.board-filter-buttons button[aria-pressed="true"] { color:#fff; background:#ad2515; border-color:#ad2515; font-weight:700; }
.board-list { min-width:0; }
.board-list-header { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); }
.board-list-header h3 { font:900 26px/1.3 var(--head); color:#781b0f; }
.example-label { display:inline-block; color:#8e2618; border:1px solid #b93624; border-radius:4px; padding:3px 8px; font-size:13px; font-weight:700; }
.board-disclosure { margin-top:10px; color:#555952; font-size:13px; }
#board-results { margin-top:7px; color:var(--dim); font-size:12px; }
.need-row { display:grid; grid-template-columns:82px minmax(0,1fr) 44px; align-items:center; gap:15px; padding:23px 0; border-bottom:1px solid var(--line); }
.need-state { align-self:start; width:max-content; padding:3px 9px; border-radius:4px; background:#426f2d; color:#fff; font-weight:700; font-size:13px; }
.need-row:nth-child(even) .need-state { background:#836413; }
.need-row h4 { font-size:18px; line-height:1.5; margin:0; text-wrap:pretty; }
.need-meta { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:7px; color:#60615e; font-size:12px; }
.need-link { display:grid; place-items:center; min-width:44px; min-height:44px; font-size:25px; text-decoration:none; color:#862719; border-radius:50%; }
.need-link:hover { color:#fff; background:#ad2515; }
#board-empty { padding:32px 0; }
#board-empty p { margin-bottom:12px; }
#board-reset { min-height:44px; padding:8px 16px; border:1px solid #b9b6b0; border-radius:4px; background:#faf9f6; }
.board-explainer { margin-top:40px; background:#142030 url('img/north-900.webp') center 68%/cover; border-radius:6px; overflow:hidden; }
.board-explainer a { display:flex; align-items:center; gap:24px; min-height:148px; padding:28px 38px; background:linear-gradient(90deg,rgba(10,16,28,.94),rgba(10,16,28,.43)); color:#fff; text-decoration:none; }
.board-play { display:grid; place-items:center; flex:none; width:58px; height:58px; border:2px solid white; border-radius:50%; color:#fff; font-size:24px; }
.board-explainer strong { display:block; font:900 clamp(23px,3vw,38px)/1.4 var(--head); }
.board-explainer small { display:block; margin-top:4px; font-size:15px; }
.board-trust { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 36px; padding:26px 16px 0; font-weight:700; }
@media (min-width:760px) and (max-width:1040px) {
  .hero { grid-template-columns:minmax(0,1fr) 340px; gap:22px; padding:26px 24px; min-height:530px; }
  .hero .h-copy { min-height:0; padding:16px 0; }
  .hero h1 { font-size:clamp(35px,4.6vw,48px); }
  .hero h1 small { font-size:15px; }
  .hero .lede { font-size:15px; }
  .scenario-strip { grid-template-columns:230px minmax(0,1fr); gap:20px; }
  .board-layout { grid-template-columns:200px minmax(0,1fr); gap:25px; }
}
@media (min-width:621px) and (max-width:1040px) {
  .scenario-window { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:759px) {
  .hero { display:block; padding:0 0 22px; background:#101a2b; }
  .hero .h-photo { height:330px; }
  .hero .h-copy { min-height:330px; padding:24px 22px; justify-content:center; display:flex; }
  .hero h1 { display:block; font-size:clamp(35px,7.8vw,52px); }
  .hero h1 small { font-size:14px; margin-bottom:12px; }
  .hero .lede { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; display:block; margin-top:13px; font-size:14px; }
  .hero .vow { position:static; inset:auto; display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; margin-top:16px; font-size:12px; }
  .hero form.card { margin:0 18px; padding:20px; }
  .scenario-strip { grid-template-columns:1fr; gap:16px; padding:26px 22px 20px; }
  .scenario-label h2 { font-size:27px; }
  .board-layout { grid-template-columns:1fr; gap:24px; }
  .board-filters { border:0; padding:0; }
  #board-filter-panel > summary { display:block; min-height:48px; padding:12px 16px; border:1px solid #b9b6b0; border-radius:5px; font-weight:700; cursor:pointer; }
  #board-filter-panel > summary::after { content:'＋'; float:right; }
  #board-filter-panel[open] > summary { margin-bottom:20px; }
  #board-filter-panel[open] > summary::after { content:'－'; }
  .board-filters h3 { font-size:23px; }
  .board-filters fieldset { margin-top:18px; }
  .board-intro { margin-bottom:30px; }
  .board-intro h2 { font-size:clamp(31px,7vw,44px); }
  .board-intro p { font-size:13px; }
  .board-list-header h3 { font-size:24px; }
  .need-row { grid-template-columns:minmax(0,1fr) 44px; gap:9px; padding:20px 0; }
  .need-state { grid-column:1; font-size:12px; }
  .need-copy { grid-column:1; }
  .need-row h4 { font-size:17px; }
  .need-link { grid-column:2; grid-row:1/3; }
  .board-explainer a { gap:16px; min-height:150px; padding:24px 20px; }
  .board-play { width:44px; height:44px; font-size:20px; }
  .board-explainer strong { font-size:25px; }
  .board-explainer small { font-size:13px; }
  .board-trust { gap:10px 16px; font-size:13px; }
}
@media (max-width:620px) {
  #s-stats .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scenario-window { grid-template-columns:minmax(0,1fr); }
  .scenario-card { min-height:78px; padding:14px 18px; }
  .scenario-card b { font-size:18px; }
  .scenario-card span { font-size:14px; }
  .board-cta { width:100%; font-size:18px; }
  #s-board { padding-top:38px; padding-bottom:38px; }
  .board-list-header { gap:8px; }
  .contact-fields { grid-template-columns:1fr 1fr; }
  .hero h1 small { order:initial; }
}

/* The scenario carousel replaces the old header ticker on the homepage. */
.tick { display:none; }

@media (min-width:621px) and (max-width:1023px) { #s-stats .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
