/* The public landing page (/about). Layout and type follow design/landing-reference.html; colors start from
   rally-tokens.css. Fonts are the app's bundled files, which the Flutter build serves under /assets/google_fonts/. */
@font-face { font-family: 'Inter'; src: url('/assets/google_fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/google_fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/google_fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/google_fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/google_fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/assets/google_fonts/SourceCodePro-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --accent: var(--rally-primary);
  --accent-deep: #0058C4;
  --ink: #0D0E12;
  --ink-2: #2A2E38;
  --ink-3: #3E4350;
  --body: #4A5060;
  --muted: #5B6170;
  --faint: #9AA0AE;
  --line: #E4E6EB;
  --line-soft: #ECEEF2;
  --line-faint: #F2F3F6;
  --panel: #F5F6F8;
  --chip: #EEF0F4;
  --night: #1B1D24;
  --night-text: #B4B9C5;
  --ok-bg: #E6F7EC; --ok: #156B34;
  --warn-bg: #FFF0E0; --warn: #96480A;
  --info-bg: #E5F1FF; --info: #0058C4;
  --display: 'Inter', system-ui, sans-serif;
  --mono: 'Source Code Pro', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, summary:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; }
.mono-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.h2 { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.045em; }
.lede { font-size: 16.5px; line-height: 1.6; color: var(--body); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.check { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.brand svg { width: 32px; height: 32px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 16px; padding: 15px 26px; border-radius: 12px; min-height: 52px; box-sizing: border-box; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--accent); color: #FFFFFF; box-shadow: 0 8px 24px -8px rgba(0, 122, 255, 0.55); }
.btn-primary:hover { color: #FFFFFF; background: var(--rally-primary-action); }
.btn-outline { background: #FFFFFF; color: var(--ink); border: 1px solid #DADDE4; }
.btn-dark { background: var(--ink); color: #FFFFFF; font-size: 14.5px; padding: 11px 18px; border-radius: 10px; min-height: 44px; }
.btn-dark:hover { color: #FFFFFF; }
.btn-accent { background: var(--accent); color: #FFFFFF; font-weight: 700; padding: 16px 28px; }
.btn-accent:hover { color: #FFFFFF; background: var(--rally-primary-action); }
.btn-ghost { background: transparent; color: #FFFFFF; border: 1px solid #3A3E4A; padding: 16px 28px; }
.btn-ghost:hover { color: #FFFFFF; border-color: #5A5F6C; }

/* Nav */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); }
.site-nav { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.navlinks { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
.navlinks a, .nav-login { color: var(--ink-3); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login { font-size: 14.5px; font-weight: 500; padding: 10px 12px; }

/* Hero */
.dots { background-image: radial-gradient(#D5D9E2 1px, transparent 1px); background-size: 22px 22px; }
.hero { position: relative; padding: 80px 0; }
.hero .hero-inner { padding: 0 24px; }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink-2); box-shadow: 0 1px 2px rgba(13, 14, 18, 0.05); }
.pill-tag { background: var(--accent); color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero h1 { margin-top: 28px; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 7.4vw, 96px); line-height: 0.98; letter-spacing: -0.05em; max-width: 1000px; }
.hero h1 span { color: var(--faint); }
.hero-sub { margin-top: 28px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--body); max-width: 640px; }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* App preview */
.mock-frame { margin-top: 48px; width: 100%; max-width: 1140px; border-radius: 20px; padding: 10px; background: rgba(13, 14, 18, 0.04); border: 1px solid var(--line); box-sizing: border-box; text-align: left; }
.mock-window { border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(13, 14, 18, 0.28); }
.mock-body { display: flex; min-height: 520px; }
.appside { width: 212px; flex-shrink: 0; border-right: 1px solid var(--line-soft); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; background: #FBFBFC; font-size: 13.5px; }
.appside-chapter { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.appside-crest { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 13px; }
.appside-name { font-weight: 600; font-size: 13.5px; }
.appside-sub { font-size: 11.5px; color: var(--muted); }
.appside-item { padding: 8px 10px; border-radius: 8px; color: var(--body); }
.appside-item.is-active { background: var(--chip); color: var(--ink); font-weight: 600; }
.mock-main { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.mock-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.mock-title { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.mock-caption { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mock-actions { display: flex; gap: 8px; }
.mock-chip { font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); }
.mock-chip.is-dark { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.mock-tabs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; }
.mock-tabs span { padding: 7px 12px; border-radius: 8px; color: var(--body); }
.mock-tabs .is-active { background: var(--chip); color: var(--ink); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat { border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.stat-value { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin-top: 6px; }
.stat-value small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.meter { height: 6px; background: var(--chip); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.w-14 { width: 14%; } .w-18 { width: 18%; } .w-28 { width: 28%; } .w-62 { width: 62%; } .w-66 { width: 66%; } .w-71 { width: 71%; } .w-79 { width: 79%; } .w-86 { width: 86%; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin-top: 6px; }
.bars span { flex: 1; background: #CFE4FF; border-radius: 3px; }
.bars .h55 { height: 55%; } .bars .h70 { height: 70%; } .bars .h62 { height: 62%; } .bars .h80 { height: 80%; } .bars .h88 { height: 88%; } .bars .h100 { height: 100%; background: var(--accent); }
.mock-row { display: flex; flex-wrap: wrap; gap: 14px; }
.mock-card { min-width: 0; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.mock-card.is-wide { flex: 999 1 380px; }
.mock-card.is-narrow { flex: 1 1 260px; }
.mock-card-head { padding: 12px 16px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; }
.mock-card-head span + span { color: var(--muted); font-weight: 500; }
.person-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--line-faint); }
.person-row:last-child { border-bottom: 0; }
.person { display: flex; align-items: center; gap: 10px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.av-1 { background: #FFE3CF; } .av-2 { background: #DCE9FF; } .av-3 { background: #E8F9C2; } .av-4 { background: #F1E3FF; }
.status { font-size: 12px; font-weight: 600; }
.status-ok { color: var(--ok); } .status-info { color: var(--info); } .status-warn { color: var(--warn); }
.event-row { padding: 12px 16px; display: flex; gap: 12px; border-bottom: 1px solid var(--line-faint); }
.event-row:last-child { border-bottom: 0; }
.event-date { width: 40px; text-align: center; flex-shrink: 0; }
.event-dow { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.event-day { font-family: var(--display); font-weight: 700; font-size: 18px; }
.event-title { font-size: 13px; font-weight: 600; }
.event-meta { font-size: 12px; color: var(--muted); }

/* Statement */
.statement { padding: 96px 24px 40px; }
.statement .wrap { max-width: 980px; }
.statement p { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.18; letter-spacing: -0.035em; color: var(--faint); }
.statement strong { color: var(--ink); font-weight: 600; }
.statement .punch { margin-top: 28px; font-weight: 700; color: var(--accent); }

/* Feature bento */
.features { padding: 72px 24px 112px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.section-head > div { max-width: 640px; }
.section-head .lede { max-width: 380px; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.b2 { grid-column: span 2; } .b3 { grid-column: span 3; } .b4 { grid-column: span 4; }
.card { background: var(--panel); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 22px; min-height: 330px; box-sizing: border-box; }
.card.is-tall { min-height: 360px; }
.card.is-dark { background: var(--ink); color: #FFFFFF; }
.card.is-accent { background: var(--accent); color: #FFFFFF; }
.card-kicker { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.card.is-dark .card-kicker { color: var(--accent); }
.card.is-accent .card-kicker { color: #FFFFFF; }
.card h3 { margin-top: 12px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
.card.is-tall h3 { font-size: 26px; }
.card-copy { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.card.is-dark .card-copy { color: var(--night-text); }
.card.is-accent .card-copy { color: #E0EEFF; }
.card-intro { max-width: 460px; }
.card-demo { margin-top: auto; }
.demo-box { background: #FFFFFF; border-radius: 14px; border: 1px solid var(--line); }
.demo-pad { padding: 16px; }
.reminder { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.reminder-text { display: flex; flex-direction: column; gap: 4px; }
.reminder-meta { font-size: 12px; color: var(--muted); }
.reminder-body { font-size: 14px; font-weight: 600; }
.reminder-cta { font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #FFFFFF; }
.chat-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.chat-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--night); }
.chat-item span:last-child { font-family: var(--mono); color: var(--night-text); font-size: 12px; }
.chat-item.is-hot { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.chat-item.is-hot span:last-child { color: #FFFFFF; }
.split-line { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.split-line span:last-child { color: var(--accent); }
.demo-meter { height: 8px; background: var(--chip); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.demo-meter span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.demo-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.rank-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.rank-row:last-child { border-bottom: 0; }
.rank-row b { font-weight: 600; }
.rank-no { font-family: var(--mono); color: var(--muted); margin-right: 10px; }
.bubble { align-self: flex-start; max-width: 90%; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }
.bubble-col { display: flex; flex-direction: column; gap: 8px; }
.bubble-note { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.bubble-note svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.doc-row:last-child { border-bottom: 0; }
.vote { font-size: 13px; }
.vote + .vote { margin-top: 10px; }
.vote-line { display: flex; justify-content: space-between; margin-bottom: 6px; }
.vote-line span:last-child { font-weight: 600; }
.vote-track { height: 8px; background: rgba(255, 255, 255, 0.22); border-radius: 99px; }
.vote-track span { display: block; height: 100%; background: #FFFFFF; border-radius: 99px; }
.vote-track .is-soft { background: rgba(255, 255, 255, 0.7); }
.vote-note { margin-top: 10px; font-size: 12px; color: #E0EEFF; }

/* Roles (tabs) */
.roles { padding: 112px 24px; background: var(--panel); }
.center-head { text-align: center; max-width: 720px; margin: 0 auto; }
.tablist { margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; width: fit-content; max-width: 100%; box-sizing: border-box; }
.tab { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; padding: 12px 20px; min-height: 44px; border-radius: 10px; border: 0; cursor: pointer; background: transparent; color: var(--body); }
.tab[aria-selected="true"] { background: var(--ink); color: #FFFFFF; }
.tabpanels { margin-top: 32px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 56px); box-sizing: border-box; }
.panel { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.panel[hidden] { display: none; }
.panel-copy { flex: 1 1 380px; min-width: 0; }
.panel-copy h3 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; }
.panel-copy .lede { margin-top: 14px; }
.ticks { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.tick { display: flex; gap: 12px; }
.panel-demo { flex: 1 1 380px; min-width: 0; background: var(--panel); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.panel-demo.is-dark { background: var(--ink); color: #FFFFFF; gap: 12px; }
.panel-demo-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.panel-demo.is-dark .panel-demo-label { color: var(--night-text); }
.todo { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.todo span:last-child { font-weight: 600; color: var(--accent); white-space: nowrap; }
.todo .is-done { color: var(--ok); }
.night-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.night-tile { background: var(--night); border-radius: 12px; padding: 14px; }
.night-label { font-size: 12px; color: var(--night-text); }
.night-value { font-family: var(--display); font-weight: 700; font-size: 26px; margin-top: 4px; }
.night-value.is-highlight { color: var(--accent); }
.night-row { background: var(--night); border-radius: 12px; padding: 14px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; }
.night-row span:last-child { font-weight: 600; }

/* Lifecycle */
.lifecycle { padding: 112px 24px; }
.lifecycle .wrap > div:first-child { max-width: 720px; }
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.step { border-top: 2px solid var(--ink); padding-top: 20px; }
.step.is-current { border-top-color: var(--accent); }
.step-no { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.step.is-current .step-no { color: var(--accent); }
.step h3 { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.step p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--body); }

/* Mobile */
.mobile { padding: 112px 24px; background: var(--ink); color: #FFFFFF; overflow: hidden; }
.mobile .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.mobile-copy { flex: 1 1 420px; min-width: 0; }
.mobile .mono-label { color: var(--accent); }
.mobile-copy > p { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--night-text); max-width: 480px; }
.perks { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 480px; }
.perk-title { font-weight: 600; font-size: 15px; }
.perk-copy { font-size: 14px; color: var(--night-text); margin-top: 4px; line-height: 1.5; }
.phone-wrap { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }
.phone { width: 300px; max-width: 100%; border-radius: 46px; padding: 12px; background: #23262F; box-shadow: 0 50px 100px -30px rgba(0, 122, 255, 0.3); }
.phone-screen { border-radius: 36px; background: #FFFFFF; color: var(--ink); padding: 26px 18px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 560px; box-sizing: border-box; }
.notch { width: 90px; height: 24px; border-radius: 99px; background: var(--ink); align-self: center; margin-top: -12px; }
.phone-day { font-size: 12.5px; color: var(--muted); }
.phone-hi { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.phone-card { border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px; }
.phone-card.is-dark { background: var(--ink); color: #FFFFFF; border-color: var(--ink); padding: 16px; border-radius: 18px; }
.phone-card.is-highlight { background: var(--accent); border-color: var(--accent); color: #FFFFFF; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.phone-small { font-size: 12px; color: var(--muted); }
.phone-card.is-dark .phone-small { color: var(--night-text); }
.phone-big { font-family: var(--display); font-weight: 700; font-size: 30px; margin-top: 2px; }
.phone-good { font-size: 12px; color: var(--accent); margin-top: 4px; font-weight: 600; }
.phone-event { font-weight: 700; font-size: 15px; }
.phone-card.is-highlight .phone-small { color: #E0EEFF; }
.phone-btn { background: var(--ink); color: #FFFFFF; font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px; white-space: nowrap; }
.phone-line { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.phone-line span:last-child { color: var(--accent); }
.phone-list { padding: 4px 14px; font-size: 13px; }
.phone-list div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-faint); }
.phone-list div:last-child { border-bottom: 0; }
.phone-list .ok { color: var(--ok); font-weight: 600; }
.phone-list .go { color: var(--accent); font-weight: 600; }

/* Trust */
.trust { padding: 112px 24px 72px; }
.trust-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.trust-head h2 { max-width: 620px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.04em; }
.trust-head a { font-size: 15px; font-weight: 600; color: var(--accent); }
.trust-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.trust-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.trust-card svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-title { margin-top: 14px; font-weight: 600; font-size: 16px; }
.trust-copy { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* Pricing */
.pricing { padding: 72px 24px 112px; }
.pricing .center-head { max-width: 680px; }
.plans { margin: 56px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; max-width: 820px; }
.plan { border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; }
.plan.is-featured { border: 2px solid var(--accent); box-shadow: 0 30px 60px -30px rgba(0, 122, 255, 0.35); }
.plan-name { font-weight: 600; font-size: 17px; }
.plan-for { margin-top: 6px; font-size: 14.5px; color: var(--body); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.plan-price span:first-child { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -0.035em; }
.plan-price span + span { font-size: 14px; color: var(--muted); }
.plan-cta { text-align: center; font-weight: 600; font-size: 15px; padding: 14px; border-radius: 12px; min-height: 48px; box-sizing: border-box; }
.plan-cta.is-primary { background: var(--accent); color: #FFFFFF; }
.plan-cta.is-outline { border: 1px solid #DADDE4; }
.plan-cta.is-primary:hover { color: #FFFFFF; }
.plans.is-single { max-width: 440px; grid-template-columns: minmax(0, 1fr); }
.pricing-sub { margin: 16px auto 0; max-width: 520px; }
.plan-note { font-size: 13px; line-height: 1.55; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); }
.plan-list { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--ink-2); }

/* FAQ */
.faq-section { padding: 112px 24px; background: var(--panel); }
.faq-section .wrap { display: flex; flex-wrap: wrap; gap: 56px; }
.faq-intro { flex: 1 1 320px; min-width: 0; }
.faq-intro h2 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.045em; }
.faq-intro p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--body); }
.faq-intro a { color: var(--accent); font-weight: 600; }
.faq-list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.faq { border-bottom: 1px solid #DADDE4; }
.faq summary { list-style: none; min-height: 64px; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; box-sizing: border-box; }
.faq summary::-webkit-details-marker { display: none; }
.faq .sign { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; border: 1px solid #DADDE4; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.faq .sign::before { content: "+"; }
.faq[open] .sign::before { content: "\2212"; }
.faq p { padding: 0 48px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--body); }

/* Final call to action */
.cta-section { padding: 24px; }
.cta { max-width: 1392px; margin: 0 auto; background: var(--ink); color: #FFFFFF; border-radius: 32px; padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px); position: relative; overflow: hidden; box-sizing: border-box; }
.cta-body { position: relative; max-width: 760px; }
.cta h2 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.05em; }
.cta-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Footer */
.site-footer { padding: 72px 24px 48px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.footer-brand { flex: 1 1 260px; max-width: 320px; }
.footer-brand p { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 64px; font-size: 14.5px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col div { font-weight: 600; }
.footer-col a, .footer-bottom a { color: var(--muted); }
.footer-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.footer-bottom nav { display: flex; gap: 24px; }

@media (max-width: 960px) {
  .b2, .b3, .b4 { grid-column: span 6; }
  .navlinks, .nav-login, .appside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}