/* ===================================================================================================
   Version 2, inner pages. Loaded after the version-1 stylesheet (structure), compositions.css and canvas.css.
   Remaps every version-1 token to the canvas palette and type, then reshapes the shared components
   (buttons, rows, notes, tables, forms, FAQ, steps, compositions) in the canvas's language.
   =================================================================================================== */
:root {
  --paper: #FFFFFF; --paper-2: #F2F4F7; --surface: #FFFFFF;
  --ink: #0C111D; --ink-2: #475467; --ink-3: #5D6B82;
  --rule: #E4E7EC; --rule-2: #D0D5DD;
  --reserve: #0B3997; --reserve-2: #0B3997; --reserve-tint: #E7EEFE;
  --stamp: #B42318; --stamp-tint: #FDE4E1;
  --amber: #92580A; --amber-tint: #FDF0D7;
  --band: #031432; --on-ink: #F5F7FA; --on-ink-2: #C9D2E3;
  --focus: #0D55E8;
  --font-display: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-text: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --btn-bg: #0D55E8; --btn-bg-hover: #0B3997; --btn-fg: #FFFFFF;
  --r-control: 12px; --r-media: 14px;
  --shadow-media: 0 2px 4px rgba(12,17,29,.06), 0 16px 40px -12px rgba(12,17,29,.22);
  --t-body: 17px; --measure: 62ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #031432; --paper-2: #020F27; --surface: #0A1B3D;
    --ink: #F5F7FA; --ink-2: #C9D2E3; --ink-3: #98A2B3;
    --rule: #1A2E5C; --rule-2: #2A4178;
    --reserve: #8FB0FF; --reserve-2: #B9CCFF; --reserve-tint: #0F2350;
    --stamp: #FF8A80; --stamp-tint: #3D1A1A; --amber: #FBBF4E; --amber-tint: #3A2C10;
    --band: #031432; --focus: #8FB0FF;
    --btn-bg: #105FFA; --btn-bg-hover: #4D88FF; --btn-fg: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  --paper: #031432; --paper-2: #020F27; --surface: #0A1B3D;
  --ink: #F5F7FA; --ink-2: #C9D2E3; --ink-3: #98A2B3;
  --rule: #1A2E5C; --rule-2: #2A4178;
  --reserve: #8FB0FF; --reserve-2: #B9CCFF; --reserve-tint: #0F2350;
  --stamp: #FF8A80; --stamp-tint: #3D1A1A; --amber: #FBBF4E; --amber-tint: #3A2C10;
  --band: #031432; --focus: #8FB0FF;
  --btn-bg: #105FFA; --btn-bg-hover: #4D88FF; --btn-fg: #FFFFFF;
}

/* Type: one family, heavy and tight headings (canvas .h1 / .h2 / .h3) */
body.hm { font-family: var(--font); font-size: 17px; line-height: 1.6; background: var(--bg); color: var(--ink); }
.hm h1, .hm h2, .hm h3, .hm h4 { font-family: var(--font); font-variation-settings: normal; color: var(--ink); }
.hm main h1 { font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.hm main h2 { font-weight: 800; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.hm main h3 { font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.hm main .statement-head, .hm main .statement h3, .hm .module-index h2 { font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; }
.lead, .page-hero .lead, .section-head .lead, .closing .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.hm main p { max-width: 68ch; }
.hm a { color: var(--accent-ink); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }

/* Sections: canvas rhythm and grounds */
.section, .section.tight { padding: 72px 0; }
@media (max-width: 767px) { .section, .section.tight { padding: 56px 0; } }
.section.alt { background: var(--bg-2); }
.section.closing { background: var(--bg); }
.container { max-width: 1200px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .container { padding-left: 32px; padding-right: 32px; } }

/* Buttons: pills */
.hm .btn { border-radius: 999px; min-height: 44px; padding: 0 20px; font: 700 15.5px/1 var(--font); }
.hm .btn.lg { min-height: 48px; padding: 0 24px; font-size: 16px; }
.hm .btn.primary { background: var(--grad); color: #FFFFFF; box-shadow: 0 6px 18px -6px rgba(16,95,250,.6); border-color: transparent; }
.hm .btn.primary:hover { background: var(--grad); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(59,123,255,.75); }
.hm .btn.secondary, .hm .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.hm .btn.secondary:hover, .hm .btn.ghost:hover { border-color: var(--ink); background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm .btn.primary { background: #105FFA; color: #FFFFFF; } }
:root[data-theme="dark"] .hm .btn.primary { background: #105FFA; color: #FFFFFF; }
.link-arrow { color: var(--accent-ink); font-weight: 700; }

/* Statement rows become cards on a sand ground */
.statement { border-top: 0; display: grid; gap: 10px; }
.statement > li, .statement > .row { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); }
.statement > li { padding: 14px 18px; }
.statement > .row, .statement > li > .row { padding: 16px 20px; }
.statement > li > a.row { border: 0; border-radius: 16px; }
.statement a.row:hover { background: var(--bg-2); }
.statement.lines > li { padding: 14px 18px; }
.row dt, .row .label { font-weight: 700; }
.row dd, .row .value { color: var(--ink-2); }

/* Notes: tinted pills instead of rules */
.note { border-left: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; color: var(--ink-2); }
.note.no, .note.warn { background: var(--bad-tint); border-color: transparent; color: var(--ink); }
.note.roadmap { background: var(--warn-tint); border-color: transparent; color: var(--ink); }

/* Steps (switching, persona days) */
.steps { border-top: 0; display: grid; gap: 10px; }
.steps li { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 18px 20px; box-shadow: var(--shadow-1); }
.steps li::before { font-family: var(--font); font-weight: 800; font-size: 15px; width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; }
.steps h3 { font-family: var(--font); font-weight: 700; font-size: 17px; }
.steps p { color: var(--ink-2); }

/* Tables */
.table-wrap { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 4px 16px; box-shadow: var(--shadow-1); }
.hm table th { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hm table th, .hm table td { border-color: var(--line); }

/* Forms: canvas fields */
.hm main label { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hm main input[type="text"], .hm main input[type="email"], .hm main input[type="tel"], .hm main input[type="number"], .hm main select, .hm main textarea {
  font: 500 16px/1.4 var(--font); color: var(--ink); background: var(--bg); border: 1.5px solid var(--field-line); border-radius: 12px; padding: 11px 14px; min-height: 48px; }
.hm main input:focus, .hm main select:focus, .hm main textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.hm main .form fieldset { border: 0; padding: 0; margin: 0; }
.hm main .form legend { font-weight: 700; margin-bottom: 8px; }
.hm main .check { font-size: 15.5px; }
.hm main .check input { accent-color: #0D55E8; }
.hm .form .row { border: 0; box-shadow: none; background: none; border-radius: 0; padding: 0; }
.hm .result { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 24px; box-shadow: var(--shadow-1); }

/* Asides */
.aside-block { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 24px; box-shadow: var(--shadow-1); }
.aside-block + .aside-block { margin-top: 16px; }
.aside-block h2 { font-size: 19px !important; letter-spacing: -.01em !important; }

/* FAQ page: canvas accordion rows */
.hm main .faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0 20px; margin-top: 10px; }
.hm main .faq details:first-of-type { border-top: 1px solid var(--line); }
.hm main .faq summary { font-family: var(--font); font-weight: 700; font-size: 17px; padding: 18px 32px 18px 0; min-height: 44px; display: block; }
.hm main .faq summary::before, .hm main .faq summary::after { background: var(--accent-ink); }
.hm main .faq details > div { padding: 0 0 18px; color: var(--ink-2); }

/* Roadmap areas, module index, glossary, pricing table */
.roadmap-area, .module-index > * { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 24px; box-shadow: var(--shadow-1); }
.roadmap-area .statement > li { box-shadow: none; background: var(--bg-2); }

/* The dark band used by inner pages */
.band, .section.ink { background: var(--slate-950); color: #F5F7FA; }

/* Closing CTA on inner pages: the canvas's rounded dark block */
.section.closing > .container { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--slate-950); color: #FFFFFF; padding: 56px 32px; }
.section.closing > .container::before { content: ""; position: absolute; inset: -40% -10% auto 20%; height: 120%; background: radial-gradient(circle at 40% 40%, rgba(16,95,250,.7), transparent 55%), radial-gradient(circle at 75% 60%, rgba(59,123,255,.6), transparent 55%), radial-gradient(circle at 25% 80%, rgba(127,168,255,.45), transparent 50%); filter: blur(40px); z-index: -1; }
.hm .section.closing h2, .hm .section.closing h3 { color: #FFFFFF; }
.hm .section.closing p, .hm .section.closing .lead { color: #D0D8E6; }
.hm .section.closing a:not(.btn) { color: #B9CCFF; }
.hm .section.closing .btn.primary { background: #FFFFFF; color: #0C111D; box-shadow: none; }
.hm .section.closing .btn.primary:hover { background: #FFFFFF; color: #0C111D; }
.hm .section.closing .link-arrow { color: #B9CCFF; }
@media (max-width: 767px) { .section.closing > .container { border-radius: 20px; padding: 40px 20px; margin: 0 16px; width: auto; } }

/* Product compositions in the canvas palette */
.comp-panel { --c-panel: #EAEEF5; --c-grid: rgba(12,17,29,.05); --c-card-border: #E4E7EC; --c-btn: #0D55E8; --c-tag-bg: #FFFFFF; --c-tag-border: #D0D5DD; --c-tag: #475467; --c-paper: #F2F4F7; border-radius: 20px; }
.comp-dark .comp-panel, .band .comp-panel { --c-panel: #071A3F; --c-grid: rgba(255,255,255,.05); --c-card-border: #1A2E5C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .comp-panel { --c-panel: #071A3F; --c-grid: rgba(255,255,255,.05); --c-card-border: #1A2E5C; } }
:root[data-theme="dark"] .comp-panel { --c-panel: #071A3F; --c-grid: rgba(255,255,255,.05); --c-card-border: #1A2E5C; }

/* Money-out sequence */
.seq-steps li[aria-current="step"] h3 { color: var(--accent-ink); }
.seq-steps li::before { color: var(--accent-ink); font-family: var(--font); font-weight: 800; }

/* Lists inside a card read as plain rows, not cards within cards */
.aside-block .statement, .roadmap-area .statement, .result .statement { gap: 0; }
.aside-block .statement > li, .roadmap-area .statement > li, .result .statement > li, .aside-block .statement > .row { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; padding: 12px 0; }
.aside-block .statement > li:first-child, .roadmap-area .statement > li:first-child { border-top: 0; }
.stack > .aside-block + .aside-block { margin-top: 16px; }

/* Glossary: its inline style names --ink-900 and --slate-700, which the canvas defines as band colours; pin it to page text colours */
.hm .glossary dt { color: var(--ink); font-weight: 700; }
.hm .glossary dd { color: var(--ink-2); }

/* Notes inside the dark top band: translucent on slate, light text */
.hm .top-page .page-hero .note { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #D0D8E6; }
.hm .top-page .page-hero .note.roadmap { border-color: rgba(127,168,255,.45); }
.hm .top-page .page-hero .note.no, .hm .top-page .page-hero .note.warn { border-color: rgba(255,138,128,.45); }