/* ===================================================================================================
   Inner pages. Loaded after hoamly.css (layout and components), compositions.css and brand.css.
   Maps hoamly.css's tokens to the brand palette and type, then restyles the shared components
   (buttons, rows, notes, tables, forms, FAQ, steps, compositions) to match the homepage.
   =================================================================================================== */
: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 (as the homepage .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: 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: 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: 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 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 brand 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 brand.css 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); }