/* ============================================================
   Basefund — Help section (/app) styles
   Layered on /shared/base.css. Linked by the /app hub and each guide.
   One stylesheet rather than four inline blocks so the section
   cannot drift page to page.
   ============================================================ */

/* ── BROWSER SURFACES ── */
::selection{background:var(--blue-pale);color:var(--ink);}
.help{scrollbar-color:var(--slate-lt) var(--off);}

/* ── HERO ── */
.hero-editorial{background:#fff;padding:80px 0 64px;border-bottom:1px solid var(--border);}
.hero-eyebrow{align-items:center;column-gap:8px;display:inline-flex;font-size:14px;font-weight:600;letter-spacing:.18em;margin:0 0 14px;row-gap:8px;text-transform:uppercase;color:var(--blue);}
.hero-editorial h1{font-family:var(--f-head);font-size:clamp(42px,5.8vw,68px);font-weight:600;letter-spacing:-.025em;line-height:.96;margin:0 0 22px;max-width:26ch;text-wrap:balance;color:var(--ink);}
.hero-sub{font-size:18px;font-weight:300;line-height:1.65;color:var(--slate);max-width:80ch;margin:0;}

/* ── BANDS ── */
.band{padding:var(--sp-section-tight) 0;background:#fff;}
.band.alt{background:var(--off);}
.band h2{font-family:var(--f-head);font-size:clamp(28px,3.4vw,42px);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:0 0 20px;max-width:34ch;color:var(--ink);text-wrap:balance;}
.band h2 em{font-style:italic;color:var(--blue);}
.band h3{font-family:var(--f-head);font-size:23px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:44px 0 0;}
.band .body{max-width:80ch;font-size:17px;line-height:1.75;color:var(--slate);margin:0 0 18px;}
.band .body:last-child{margin-bottom:0;}
.band .body strong{color:var(--ink);font-weight:600;}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-ligatures:none;}
code{font-size:.9em;color:var(--ink);background:var(--chrome);border-radius:2px;padding:2px 6px;}

/* ── BLUE PANEL (the section's one loud surface) ── */
.panel{margin-top:40px;padding:40px 44px;background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);position:relative;overflow:hidden;isolation:isolate;}
.panel::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 70% 80% at 85% 20%,black 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 20%,black 10%,transparent 70%);pointer-events:none;z-index:-1;}
.panel .s-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.panel .s-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(20px,3.2vw,32px);font-weight:500;letter-spacing:-.02em;color:#fff;word-break:break-word;}
.panel p{margin:16px 0 0;max-width:80ch;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.72);}
.panel p strong{color:#fff;font-weight:600;}
.panel p code{background:rgba(255,255,255,.12);color:#fff;}
.panel a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* ── TWO-UP: recommended route vs IT route ── */
.fixes{display:grid;grid-template-columns:1.1fr 1fr;gap:0;margin-top:36px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.fix{padding:38px 40px;}
.fix.it{border-left:1px solid var(--border);}
.fix.rec{background:linear-gradient(150deg,var(--blue-deep) 0%,#07204f 100%);position:relative;overflow:hidden;isolation:isolate;}
.fix.rec::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 60% 70% at 90% 10%,black 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 90% 10%,black 10%,transparent 70%);pointer-events:none;z-index:-1;}
.fix .f-tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;}
.fix.rec .f-tag{color:var(--accent);}
.fix.it .f-tag{color:var(--slate-lt);}
.fix h3{font-family:var(--f-head);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 14px;color:var(--ink);}
.fix.rec h3{color:#fff;}
.fix p{font-size:15.5px;line-height:1.7;color:var(--slate);margin:0 0 14px;max-width:80ch;}
.fix p:last-child{margin-bottom:0;}
.fix p strong{color:var(--ink);font-weight:600;}
.fix.rec p{color:rgba(255,255,255,.92);}
.fix.rec p strong{color:#fff;}
.fix ol{margin:0 0 16px;padding:0;list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:11px;}
.fix ol li{counter-increment:step;position:relative;padding-left:30px;font-size:15.5px;line-height:1.55;color:var(--slate);}
.fix ol li::before{content:counter(step);position:absolute;left:0;top:1px;width:19px;height:19px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;border-radius:999px;}
.fix.rec ol li{color:rgba(255,255,255,.88);}
.fix.rec ol li::before{background:rgba(255,255,255,.22);color:#fff;}
.fix.it ol li::before{background:var(--blue-tint);color:var(--blue);}
.fix a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.fix.rec a{color:var(--accent);}

/* ── FIGURES ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--border);}
.stat{padding:30px 32px;border-right:1px solid var(--border);}
.stat:first-child{padding-left:0;}
.stat:last-child{border-right:0;padding-right:0;}
.st-n{font-family:var(--f-head);font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--blue);margin-bottom:12px;}
.st-d{font-size:14.5px;line-height:1.6;color:var(--slate);}
.st-note{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--slate-lt);max-width:80ch;}

/* ── KEY / DESCRIPTION ROWS ── */
.causes{margin-top:36px;border-top:1px solid var(--border);}
.cause{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--border);}
.c-t{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.c-d{font-size:15.5px;line-height:1.7;color:var(--slate);max-width:80ch;}
.c-d code{font-size:.88em;}

/* ── NOTES ── */
.expiry{margin-top:36px;padding:20px 0 0;border-top:2px solid var(--amber);font-size:15.5px;line-height:1.7;color:var(--slate);max-width:80ch;}
.expiry strong{color:var(--ink);font-weight:600;}
.never{margin-top:40px;padding:22px 0 0;border-top:2px solid var(--blue);font-family:var(--f-head);font-size:19px;font-weight:600;line-height:1.5;color:var(--ink);max-width:80ch;}

/* ── CHECK LIST ── */
.checks{margin:32px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;}
.checks li{position:relative;padding-left:32px;font-size:16px;line-height:1.7;color:var(--slate);max-width:80ch;}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145DD0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain;}
.checks li strong{color:var(--ink);font-weight:600;}

/* ── REFERENCE TABLES ── */
.facts{width:100%;margin-top:20px;border-collapse:separate;border-spacing:0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.facts th,.facts td{padding:18px 24px;font-size:14.5px;line-height:1.65;text-align:left;vertical-align:top;border-top:1px solid var(--border);}
.facts tr:first-child th,.facts tr:first-child td{border-top:0;}
.facts th{width:270px;font-weight:600;color:var(--ink);background:var(--off);border-right:1px solid var(--border);}
.facts th code{background:transparent;padding:0;font-size:13.5px;font-weight:500;}
.facts td{color:var(--slate);}
.facts td code{font-size:.9em;}
.facts td a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.facts .tag{display:inline-flex;align-items:center;gap:6px;margin-right:10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;}
.facts .tag::before{content:"";width:6px;height:6px;border-radius:999px;background:currentcolor;}
.facts .tag.req{color:var(--green);}
.facts .tag.opt{color:var(--slate-lt);}

/* ── PLAIN STATEMENT LIST ── */
.ours{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--border);}
.ours li{padding:20px 0;border-bottom:1px solid var(--border);font-size:16px;line-height:1.7;color:var(--slate);max-width:80ch;}
.ours li code{font-size:.9em;}

/* ── SCROLLABLE WIDE CONTENT ── */
.scroll-x{overflow-x:auto;}

@media(max-width:940px){
  .fixes{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;border-top:0;}
  .stat{padding:26px 0;border-right:0;border-top:1px solid var(--border);}
  .stat:first-child,.stat:last-child{padding-left:0;padding-right:0;}
  .cause{grid-template-columns:1fr;gap:6px;}
  .hero-editorial{padding:56px 0 44px;}
  .hero-editorial h1{max-width:none;}
  .panel{padding:32px 26px;}
  .fix{padding:30px 26px;}
  .facts th{width:auto;}
}
@media(max-width:600px){
  .facts th,.facts td{display:block;border-right:0;}
  .facts td{border-top:0;padding-top:0;}
  .facts th{padding-bottom:10px;}
}

/* ── GUIDE INDEX (the /app hub) ── */
.guide-list{margin:44px -24px 0;border-top:1px solid var(--border);}
.guide{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:34px 24px;border-bottom:1px solid var(--border);transition:background 200ms var(--ease);}
.guide:hover{background:rgba(20,93,208,.03);}
.g-meta{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-lt);margin-bottom:10px;transition:color 200ms var(--ease);}
.guide:hover .g-meta{color:var(--blue);}
.guide h3{font-family:var(--f-head);font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--ink);margin:0 0 10px;}
.guide p{font-size:16px;line-height:1.7;color:var(--slate);margin:0;}
.g-go{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--slate-lt);transition:all 220ms var(--ease);}
.guide:hover .g-go{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateX(4px);}
.g-go svg{width:17px;height:17px;}
.panel-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.panel-cta p{margin:0;max-width:60ch;}
@media(max-width:940px){
  .guide-list{margin:36px -16px 0;}
  .guide{grid-template-columns:1fr;gap:18px;padding:28px 16px;}
  .g-go{width:38px;height:38px;}
}

/* ── CTA BAND (base.css .cta-section, adjusted for these pages) ── */
.help .cta-section p{max-width:80ch;}
.help .cta-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,300px);justify-content:center;gap:12px;}
.help .cta-actions .btn{width:100%;}
@media(max-width:600px){
  .help .cta-actions{grid-auto-flow:row;grid-auto-columns:minmax(0,1fr);width:100%;max-width:340px;margin:0 auto;}
}