/* ==========================================================================
   Theme: Indigo & Marigold (custom, theme-factory)
   Deep indigo from India's dye trade carries the page; marigold marks
   what matters; warm ivory paper keeps it calm. Bricolage Grotesque for
   headings, Figtree for reading, IBM Plex Mono for labels and data.
   Layout: a clear 12-column grid; one idea per band; motion only where
   it explains something (the order journey, the flip cards).
   ========================================================================== */
:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #EFECE4;
  --ink: #23264A;
  --ink-strong: #12142C;
  --muted: #5A5F7A;
  --line: #E2DED3;
  --line-strong: #CBC6B8;
  --indigo: #2E3A8C;
  --indigo-2: #1F2766;
  --indigo-soft: #E6E8F7;
  --marigold: #F2A007;
  --marigold-soft: #FDF0D2;
  --marigold-ink: #8F5200;
  --on-indigo: #FFFFFF;
  --on-marigold: #1E1300;
  --deep: #161A3D;
  --deep-2: #1E2350;
  --deep-3: #2B3166;
  --on-deep: #F4F2FA;
  --on-deep-muted: #AEB2D3;
  --ok: #12806A;
  --warn: #C2410C;
  --wa: #1E9E58;
  --wa-bubble: #DCF5CF;
  --chat-bg: #ECE8DF;
  --shadow: 0 30px 60px -32px rgba(22, 26, 61, .45);
  --shadow-sm: 0 1px 2px rgba(22, 26, 61, .06), 0 8px 18px -12px rgba(22, 26, 61, .28);

  --display: "Bricolage Grotesque", "Noto Sans Devanagari", "Noto Sans Gujarati", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1024; --surface: #151833; --surface-2: #1C2041; --ink: #E7E6F2; --ink-strong: #FFFFFF; --muted: #A2A6C4;
    --line: #2A2F57; --line-strong: #3A4072; --indigo: #8E9BFF; --indigo-2: #7381F5; --indigo-soft: #232A5C;
    --marigold: #FFB627; --marigold-soft: #3A2C0B; --marigold-ink: #FFC95C; --on-indigo: #0E1024; --on-marigold: #1E1300;
    --deep: #090B1C; --deep-2: #12153A; --deep-3: #252B5E; --on-deep: #F4F2FA; --on-deep-muted: #A7ABCF;
    --ok: #4CC9A8; --warn: #F2875A; --wa: #2BB866; --wa-bubble: #1C4836; --chat-bg: #0F1330;
    --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 8px 18px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1024; --surface: #151833; --surface-2: #1C2041; --ink: #E7E6F2; --ink-strong: #FFFFFF; --muted: #A2A6C4;
  --line: #2A2F57; --line-strong: #3A4072; --indigo: #8E9BFF; --indigo-2: #7381F5; --indigo-soft: #232A5C;
  --marigold: #FFB627; --marigold-soft: #3A2C0B; --marigold-ink: #FFC95C; --on-indigo: #0E1024; --on-marigold: #1E1300;
  --deep: #090B1C; --deep-2: #12153A; --deep-3: #252B5E; --on-deep: #F4F2FA; --on-deep-muted: #A7ABCF;
  --ok: #4CC9A8; --warn: #F2875A; --wa: #2BB866; --wa-bubble: #1C4836; --chat-bg: #0F1330;
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 8px 18px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
h1, h2, h3, h4, h5 { margin: 0; text-wrap: balance; color: var(--ink-strong); font-family: var(--display); }
p { margin: 0; }
a { color: inherit; }
svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(72px, 9vw, 120px); }
.alt { background: var(--surface-2); }
.ph { border-bottom: 1.5px dashed var(--marigold); }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 14px; color: var(--muted); }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); }
.kicker::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--marigold); transform: rotate(45deg); flex: none; }
.h2 { font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.03em; margin-top: 14px; max-width: 20ch; }
.h2 .hl { color: var(--indigo); }
.lede { color: var(--muted); max-width: 60ch; margin-top: 16px; font-size: 18.5px; }
.sec-head { margin-bottom: clamp(32px, 4.5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.sec-head > div { min-width: 0; }
@media (max-width: 820px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; white-space: nowrap; color: var(--ink-strong); }
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); box-shadow: 0 10px 22px -12px var(--indigo); }
.btn-primary:hover { border-color: var(--indigo); box-shadow: 0 14px 26px -12px var(--indigo); }
.btn-gold { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.btn-gold:hover { border-color: var(--marigold); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14.5px; border-radius: 10px; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; }
.icon-btn svg { width: 19px; height: 19px; }
.linkbtn { background: none; border: 0; padding: 4px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; }

/* ---------- Header ---------- */
.progress { position: fixed; left: 0; top: env(safe-area-inset-top, 0px); height: 3px; width: 100%; z-index: 70; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--indigo), var(--marigold)); pointer-events: none; }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
header.top.scrolled { border-bottom-color: var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; text-decoration: none; letter-spacing: -.02em; color: var(--ink-strong); }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--indigo); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 22px; height: 22px; }
nav.links { display: flex; gap: 2px; }
nav.links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 10px; }
nav.links a:hover, nav.links a.active { color: var(--ink-strong); background: var(--surface-2); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.lang-select { width: auto; min-height: 42px; padding: 6px 30px 6px 12px; border-radius: 12px; font-weight: 700; font-size: 14px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-strong); }
.menu-btn { display: none; }
.mobile-menu { display: none; }
@media (max-width: 1080px) {
  nav.links { display: none; }
  .menu-btn { display: inline-grid; }
  .mobile-menu:not([hidden]) { display: grid; gap: 2px; padding-block: 6px 14px; border-top: 1px solid var(--line); }
  .mobile-menu a { text-decoration: none; padding: 12px 8px; font-weight: 600; border-radius: 10px; }
}
@media (max-width: 600px) { .top-actions .btn-primary { display: none; } .lang-select { max-width: 104px; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 84px) clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -10%; top: -20%; width: 70%; height: 140%; background: radial-gradient(closest-side, color-mix(in srgb, var(--indigo) 16%, transparent), transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--indigo) 22%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 75%); mask-image: linear-gradient(90deg, transparent 35%, #000 75%); opacity: .5; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-weight: 800; font-size: clamp(46px, 7vw, 88px); line-height: .98; letter-spacing: -.045em; margin-top: 18px; }
.hero h1 .mark { position: relative; color: var(--indigo); isolation: isolate; }
.hero h1 .mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .16em; border-radius: 99px; background: var(--marigold); z-index: -1; transform: skewX(-12deg); }
.hero .sub { font-size: clamp(18px, 1.7vw, 20.5px); color: var(--muted); max-width: 46ch; margin-top: 24px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pillars { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; max-width: 580px; }
@media (max-width: 480px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillars li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.pillars .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-soft); display: grid; place-items: center; color: var(--indigo); }
.pillars .ic svg { width: 18px; height: 18px; }
.pillars b { display: block; font-size: 15.5px; color: var(--ink-strong); }
.pillars span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; }

/* Hero showcase: owner dashboard behind, WhatsApp phone in front */
.showcase { position: relative; display: grid; gap: 16px; min-width: 0; }
.sol-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); width: fit-content; max-width: 100%; justify-self: center; }
.sol-tabs button { border: 0; background: none; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.sol-tabs button svg { width: 15px; height: 15px; }
.sol-tabs button[aria-selected="true"] { background: var(--indigo); color: var(--on-indigo); }
.stage { position: relative; padding: 0 0 64px 96px; }
.dash { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.dash-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); font-size: 12.5px; color: var(--muted); }
.dash-bar .dots { display: flex; gap: 5px; }
.dash-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.dash-bar b { color: var(--ink-strong); font-weight: 700; }
.dash-bar .sd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--marigold-ink); background: var(--marigold-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dash-body { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.dash-side { background: var(--deep); display: grid; gap: 6px; align-content: start; justify-items: center; padding: 12px 0; }
.dash-side i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--on-deep-muted); }
.dash-side i.on { background: var(--indigo); color: #fff; }
.dash-side svg { width: 15px; height: 15px; }
.dash-main { padding: 14px 14px 14px 120px; display: grid; gap: 12px; min-width: 0; }
.dash-greet { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dash-greet b { font-family: var(--display); font-size: 17px; color: var(--ink-strong); letter-spacing: -.01em; }
.dash-greet span { font-size: 12px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: grid; gap: 1px; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.kpi span { font-size: 10.5px; color: var(--muted); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { font-family: var(--display); font-size: 22px; color: var(--ink-strong); letter-spacing: -.02em; line-height: 1.15; }
.kpi small { font-size: 11px; color: var(--ok); font-weight: 600; }
.kpi.hot { border-color: var(--marigold); background: var(--marigold-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marigold) 22%, transparent); }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.card-mini { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.card-mini .h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--indigo-soft); height: var(--h); transition: height .6s cubic-bezier(.3, 1, .4, 1), background .3s ease; }
.bars i.on { background: var(--indigo); }
.bars-x { display: flex; gap: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.bars-x span { flex: 1; text-align: center; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.feed li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; line-height: 1.35; padding: 5px 6px; border-radius: 8px; transition: background .4s ease; }
.feed li i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--indigo); }
.feed li i svg { width: 12px; height: 12px; }
.feed li b { color: var(--ink-strong); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.feed li time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.feed li.new { background: var(--marigold-soft); animation: rise .4s ease; }
.phone { position: absolute; left: 0; bottom: 0; width: 232px; background: #0E1126; border-radius: 32px; padding: 8px; box-shadow: 0 40px 70px -28px rgba(14, 17, 38, .75), inset 0 0 0 2px rgba(255,255,255,.07); z-index: 2; }
.phone-screen { background: var(--chat-bg); border-radius: 25px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; height: 400px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; background: var(--deep-2); color: var(--on-deep); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marigold); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--on-marigold); flex: none; }
.avatar svg { width: 16px; height: 16px; }
.chat-head b { display: block; font-size: 13.5px; line-height: 1.2; color: var(--on-deep); font-family: var(--body); }
.chat-head span { font-size: 11.5px; color: var(--on-deep-muted); }
.chat { padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; scrollbar-width: none; }
.msg { max-width: 90%; padding: 8px 10px 6px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: var(--surface); box-shadow: 0 1px 0 rgba(0,0,0,.07); animation: pop .32s cubic-bezier(.2, 1.3, .4, 1); white-space: pre-line; }
.phone .msg { font-size: 11.5px; padding: 7px 9px 5px; }
.msg.out { align-self: flex-end; background: var(--wa-bubble); border-bottom-right-radius: 4px; }
.msg.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg time { display: block; text-align: right; font-size: 10px; color: var(--muted); margin-top: 2px; }
.msg em { font-style: normal; display: block; }
.msg .tag { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; background: var(--indigo-soft); color: var(--indigo); padding: 1px 6px; border-radius: 4px; margin-bottom: 4px; }
.attach { display: flex; gap: 8px; align-items: center; background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 7px; border-radius: 8px; margin-bottom: 5px; font-weight: 700; font-size: 12px; white-space: normal; }
.attach i { width: 26px; height: 32px; border-radius: 4px; background: var(--warn); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 800; flex: none; }
.attach.img i { background: var(--indigo); color: var(--on-indigo); }
.voice { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.voice i { width: 24px; height: 24px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; flex: none; font-style: normal; font-size: 9px; }
.voice span { flex: 1; height: 16px; background: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 5px); opacity: .55; clip-path: polygon(0 40%, 8% 10%, 16% 50%, 24% 0, 32% 60%, 40% 20%, 48% 45%, 56% 5%, 64% 55%, 72% 25%, 80% 50%, 88% 15%, 100% 40%, 100% 60%, 88% 85%, 80% 50%, 72% 75%, 64% 45%, 56% 95%, 48% 55%, 40% 80%, 32% 40%, 24% 100%, 16% 50%, 8% 90%, 0 60%); }
.voice small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.msg .btnrow { display: flex; gap: 5px; margin-top: 6px; }
.msg .btnrow span { flex: 1; text-align: center; font-weight: 700; font-size: 11px; color: var(--indigo); background: var(--indigo-soft); border-radius: 6px; padding: 4px; }
.typing { align-self: flex-start; background: var(--surface); padding: 10px 14px; border-radius: 12px; display: flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes pop { from { transform: scale(.9) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chat-input { display: flex; gap: 6px; padding: 8px 10px 10px; align-items: center; }
.chat-input span { flex: 1; background: var(--surface); border-radius: 999px; padding: 7px 12px; font-size: 12px; color: var(--muted); }
.chat-input i { width: 32px; height: 32px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; color: #fff; }
.chat-input i svg { width: 15px; height: 15px; }
.demo-note { font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 1180px) {
  .stage { padding: 0; }
  .dash-main { padding-left: 14px; }
  .phone { position: relative; margin: -40px auto 0; }
}
@media (min-width: 640px) and (max-width: 1180px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dash-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .dash-body { grid-template-columns: minmax(0, 1fr); } .dash-side { display: none; } }

/* ---------- Works with / built for ---------- */
.fit { padding-block: 0; border-block: 1px solid var(--line); background: var(--surface); }
.fit .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .fit .wrap { grid-template-columns: minmax(0, 1fr); } }
.fit-col { padding-block: 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.fit-col:first-child { padding-right: 32px; }
.fit-col + .fit-col { border-left: 1px solid var(--line); padding-left: 32px; }
@media (max-width: 900px) { .fit-col:first-child { padding-right: 0; } .fit-col + .fit-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: 14px; color: var(--ink-strong); }
.tchip svg { width: 16px; height: 16px; color: var(--indigo); }

/* ---------- Problems: flip cards ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; color: var(--muted); }
.filters button[aria-pressed="true"] { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--bg); }
.flip-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1080px) { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .flip-grid { grid-template-columns: minmax(0, 1fr); } }
.flip { perspective: 1200px; border: 0; padding: 0; background: none; text-align: left; display: grid; animation: rise .35s ease; color: inherit; }
.flip-inner { display: grid; transition: transform .65s cubic-bezier(.3, 1.15, .4, 1); transform-style: preserve-3d; }
.flip[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r); padding: 22px; display: grid; gap: 12px; align-content: start; min-height: 340px; }
.face.front { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.face.back { background: var(--deep); color: var(--on-deep); transform: rotateY(180deg); }
.face .vis { height: 104px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.face.back .vis { background: var(--deep-2); }
.face q { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--ink-strong); quotes: "“" "”"; letter-spacing: -.01em; }
.face h3 { font-size: 19.5px; line-height: 1.2; color: var(--on-deep); letter-spacing: -.01em; }
.face p { font-size: 14.5px; color: var(--muted); }
.face.back p { color: var(--on-deep-muted); }
.face .who { font-size: 13px; color: var(--muted); }
.face .hint { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); font-weight: 600; }
.face.back .hint { color: var(--marigold); }
.face .hint svg { width: 16px; height: 16px; }
.tag-pain, .tag-fix { width: fit-content; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; font-weight: 700; }
.tag-pain { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.tag-fix { background: var(--marigold); color: var(--on-marigold); }
.measure { font-size: 13px; color: var(--on-deep-muted); border-top: 1px dashed var(--deep-3); padding-top: 10px; }
.measure b { color: var(--on-deep); }
.v-bubbles { display: grid; gap: 6px; width: 84%; }
.v-bubbles span { background: var(--surface); border-radius: 10px 10px 10px 3px; padding: 5px 10px; font-size: 12px; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 0 var(--line); }
.v-bubbles span em { font-style: normal; color: var(--warn); font-family: var(--mono); font-size: 10px; margin-left: 6px; }
.v-big { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; text-align: center; color: var(--ink-strong); letter-spacing: -.03em; }
.v-big small { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .08em; margin-top: 6px; }
.face.back .v-big { color: var(--marigold); }
.face.back .v-big small { color: var(--on-deep-muted); }
.v-papers { position: relative; width: 84px; height: 78px; }
.v-papers i { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; background-image: repeating-linear-gradient(transparent 0 11px, var(--line) 11px 12px); background-position: 0 14px; }
.v-papers i:nth-child(1) { transform: rotate(-9deg) translate(-10px, 4px); }
.v-papers i:nth-child(2) { transform: rotate(6deg) translate(8px, 2px); }
.v-grid { display: grid; grid-template-columns: repeat(4, 22px); gap: 5px; }
.v-grid i { height: 22px; border-radius: 4px; background: var(--line); display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.v-grid i.k { background: var(--indigo); }
.v-ok { display: grid; gap: 6px; width: 86%; }
.v-ok span { display: flex; justify-content: space-between; gap: 8px; background: color-mix(in srgb, var(--on-deep) 8%, transparent); border-radius: 6px; padding: 5px 10px; font-size: 12px; }
.v-ok span b { color: var(--marigold); font-family: var(--mono); font-size: 10.5px; }

/* ---------- Usual vs ours ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line); padding: 4px; border-radius: 12px; }
.seg button { border: 0; background: none; padding: 9px 16px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--indigo); color: var(--on-indigo); }
.diff { display: grid; gap: 10px; }
.diff-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
@media (max-width: 760px) { .diff-row { grid-template-columns: minmax(0, 1fr); } }
.diff-row .topic { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink-strong); align-self: center; letter-spacing: -.01em; }
.diff-row .usual, .diff-row .ours { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: 15.5px; align-items: start; }
.diff-row .usual { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.diff-row .usual svg { width: 20px; height: 20px; color: var(--warn); margin-top: 2px; }
.diff-row .ours { background: var(--deep); color: var(--on-deep); }
.diff-row .ours svg { width: 20px; height: 20px; color: var(--marigold); margin-top: 2px; }
.diff.ours-only .usual { display: none; }
.diff.ours-only .diff-row { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 760px) { .diff.ours-only .diff-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How it works: order journey ---------- */
.how { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; }
.how::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--on-deep) 10%, transparent) 1px, transparent 1.4px); background-size: 26px 26px; opacity: .6; pointer-events: none; }
.how .wrap { position: relative; }
.how .h2 { color: var(--on-deep); }
.how .h2 .hl { color: var(--marigold); }
.how .lede { color: var(--on-deep-muted); }
.how .kicker { color: var(--marigold); }
.how .seg { background: var(--deep-2); border-color: var(--deep-3); }
.how .seg button { color: var(--on-deep-muted); }
.how .seg button[aria-selected="true"] { background: var(--marigold); color: var(--on-marigold); }
.journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
@media (max-width: 960px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .journey { grid-template-columns: minmax(0, 1fr); } }
.rail { position: absolute; left: 30px; right: calc(25% - 30px); top: 38px; height: 3px; background: var(--deep-3); border-radius: 3px; }
.rail::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--prog, 0%); background: var(--marigold); border-radius: 3px; transition: width .6s ease; }
.packet { position: absolute; top: -7px; left: var(--prog, 0%); width: 17px; height: 17px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--marigold) 25%, transparent); transform: translateX(-50%); transition: left .6s ease; }
@media (max-width: 960px) { .rail { display: none; } }
.station { position: relative; text-align: left; border: 1.5px solid var(--deep-3); background: var(--deep-2); color: var(--on-deep); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; align-content: start; transition: border-color .3s ease, transform .3s ease, background .3s ease; }
.station .num { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--deep-3); color: var(--on-deep); position: relative; z-index: 1; transition: background .3s ease; }
.station .num svg { width: 20px; height: 20px; }
.station .who { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-deep-muted); }
.station h3 { font-size: 19px; line-height: 1.2; color: var(--on-deep); letter-spacing: -.01em; }
.station p { font-size: 14.5px; color: var(--on-deep-muted); }
.station .mini { background: var(--deep); border: 1px solid var(--deep-3); border-radius: 10px; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--on-deep-muted); min-height: 96px; white-space: pre-line; }
.station .mini b { color: var(--marigold); font-weight: 600; }
.station.on { border-color: var(--marigold); background: color-mix(in srgb, var(--marigold) 8%, var(--deep-2)); transform: translateY(-4px); }
.station.on .num { background: var(--marigold); color: var(--on-marigold); }
.station.done .num { background: var(--ok); color: #fff; }
.journey-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; color: var(--on-deep-muted); font-size: 14px; }
.journey-ctrl button { border: 1.5px solid var(--deep-3); background: var(--deep-2); color: var(--on-deep); border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.journey-ctrl svg { width: 16px; height: 16px; }
.same { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .same { grid-template-columns: minmax(0, 1fr); } }
.same div { border-top: 2px solid var(--marigold); padding-top: 14px; display: grid; gap: 4px; }
.same b { font-size: 17px; color: var(--on-deep); }
.same span { font-size: 14.5px; color: var(--on-deep-muted); }

/* ---------- Form fields (shared) ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
select, input[type="text"], input[type="tel"], input[type="email"], input[type="search"], textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 20%, transparent); }

/* ---------- Packages: growth ladder ---------- */
.finder { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; margin-bottom: 22px; font-size: 15px; color: var(--muted); }
.finder .q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.toggle button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--muted); transition: background .2s ease, color .2s ease; }
.toggle button[aria-pressed="true"] { background: var(--ink-strong); color: var(--bg); }
.pk { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 20px; align-items: start; }
@media (max-width: 940px) { .pk { grid-template-columns: minmax(0, 1fr); } }
.ladder { position: relative; display: grid; gap: 10px; }
.ladder::before { content: ""; position: absolute; left: 27px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(var(--indigo), var(--marigold)); opacity: .35; }
.rung { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 14px 14px 0; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; color: inherit; }
.rung:hover { transform: translateX(3px); }
.rung .dot { justify-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; position: relative; z-index: 1; transition: all .2s ease; }
.rung .step { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rung b { display: block; font-family: var(--display); font-size: 18px; color: var(--ink-strong); letter-spacing: -.01em; line-height: 1.2; }
.rung .s { display: block; font-size: 13.5px; color: var(--muted); }
.rung .rec { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--marigold); color: var(--on-marigold); padding: 3px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.rung[aria-selected="true"] { border-color: var(--indigo); box-shadow: var(--shadow-sm); }
.rung[aria-selected="true"] .dot { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.pk-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.pk-head { padding: 24px 26px; background: linear-gradient(135deg, var(--indigo-soft), transparent 70%); border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.pk-head .lbl { color: var(--indigo); }
.pk-head h3 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; }
.pk-head p { color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.pill svg { width: 14px; height: 14px; color: var(--indigo); }
.pk-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .pk-groups { grid-template-columns: minmax(0, 1fr); } }
.grp { padding: 18px 26px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.grp:nth-child(odd) { border-right: 1px solid var(--line); }
@media (max-width: 560px) { .grp:nth-child(odd) { border-right: 0; } }
.grp h4 { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.grp h4 svg { width: 16px; height: 16px; color: var(--indigo); }
.grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.grp li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; }
.grp li svg { width: 16px; height: 16px; color: var(--ok); margin-top: 3px; }
.pk-foot { padding: 16px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg); }
.pk-foot span { font-size: 14px; color: var(--muted); }
.pk-detail.swap .pk-head, .pk-detail.swap .pk-groups { animation: rise .35s ease; }
.incl-row { margin-top: 22px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (max-width: 1000px) { .incl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.incl-row div { padding: 16px; display: grid; gap: 6px; align-content: start; font-size: 13.5px; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.incl-row svg { width: 20px; height: 20px; color: var(--indigo); }
.incl-row b { color: var(--ink-strong); font-size: 14.5px; }
.addon-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.addon-row .lbl { margin-right: 6px; }
.addon { border: 1.5px dashed var(--line-strong); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink-strong); background: transparent; transition: border-color .15s ease, background .15s ease; }
.addon:hover { border-color: var(--indigo); }
.addon[aria-pressed="true"] { border-style: solid; border-color: var(--indigo); background: var(--indigo-soft); }
.addon-desc { margin-top: 10px; font-size: 14.5px; color: var(--muted); min-height: 1.6em; }
.addon-desc b { color: var(--ink-strong); }

/* ---------- Demo ---------- */
.tour-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (max-width: 760px) { .tour-tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .tour-tabs button { flex: 0 0 auto; } }
.tour-tabs button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 11px 14px; text-align: left; display: grid; gap: 2px; position: relative; overflow: hidden; }
.tour-tabs .n { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.tour-tabs .t { font-weight: 800; font-size: 15px; color: var(--ink-strong); }
.tour-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--marigold); transition: width .3s ease; }
.tour-tabs button.seen::after { width: 100%; background: var(--line-strong); }
.tour-tabs button[aria-selected="true"] { border-color: var(--indigo); }
.tour-tabs button[aria-selected="true"]::after { width: 100%; background: var(--marigold); }
.app { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.app-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--deep); color: var(--on-deep-muted); font-family: var(--mono); font-size: 12px; }
.app-bar .dots { display: flex; gap: 6px; }
.app-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--deep-3); }
.app-bar .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-deep); }
.app-bar .sd { color: var(--marigold); white-space: nowrap; }
.app-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 400px; }
@media (max-width: 760px) { .app-body { grid-template-columns: minmax(0, 1fr); } .app-side { display: none; } }
.app-side { border-right: 1px solid var(--line); padding: 14px 10px; display: grid; gap: 2px; align-content: start; font-size: 14px; background: var(--bg); }
.app-side span { padding: 8px 12px; border-radius: 9px; color: var(--muted); font-weight: 600; }
.app-side span.on { background: var(--indigo); color: var(--on-indigo); }
.screen { padding: clamp(16px, 2.6vw, 26px); display: grid; gap: 16px; align-content: start; min-width: 0; animation: rise .3s ease; }
.screen h4 { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.tip { display: flex; gap: 12px; align-items: flex-start; background: var(--marigold-soft); border-radius: 10px; padding: 11px 14px; font-size: 14.5px; }
.tip b { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; flex: none; padding-top: 2px; color: var(--marigold-ink); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 540px; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.tbl thead th { border-top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--surface-2); }
.tbl .r { text-align: right; }
.tbl tr.sel td { background: var(--marigold-soft); }
.tbl small { color: var(--muted); font-size: 12.5px; }
.chip { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1.5px solid var(--line); white-space: nowrap; font-weight: 600; }
.chip.wa { border-color: var(--wa); color: var(--wa); }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.facts div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.facts .v { font-weight: 800; font-size: 15.5px; color: var(--ink-strong); }
.screen-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.doclist { display: grid; gap: 8px; }
.doclist div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
dialog.docview { border: 0; padding: 0; width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border-radius: var(--r); background: var(--bg); color: var(--ink); box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); }
dialog.docview::backdrop { background: rgba(9, 11, 28, .65); backdrop-filter: blur(4px); }
.dv-bar { position: sticky; top: 0; z-index: 2; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.docpaper { margin: 18px; background: #FFFFFF; color: #1B1E3A; border-radius: 6px; padding: clamp(16px, 3vw, 34px); position: relative; overflow-x: auto; font-size: 13px; line-height: 1.45; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.docpaper .wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--display); font-weight: 800; font-size: clamp(54px, 10vw, 110px); color: rgba(15, 107, 92, .1); transform: rotate(-18deg); letter-spacing: .08em; }
.docpaper h5 { font-size: 24px; margin: 0 0 4px; text-align: center; color: #1B1E3A; }
.docpaper .dsub { text-align: center; font-family: var(--mono); font-size: 11px; color: #5A5F7A; margin-bottom: 16px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #1B1E3A; min-width: 560px; }
.dgrid > div { padding: 8px 10px; border-right: 1px solid #1B1E3A; border-bottom: 1px solid #1B1E3A; }
.dgrid > div:nth-child(2n) { border-right: 0; }
.dgrid .k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #5A5F7A; }
.dtable { width: 100%; min-width: 560px; border-collapse: collapse; border: 1px solid #1B1E3A; border-top: 0; font-variant-numeric: tabular-nums; }
.dtable th, .dtable td { border: 1px solid #1B1E3A; padding: 6px 8px; text-align: left; }
.dtable th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; background: #EEF0FA; }
.dtable .r { text-align: right; }
.dsign { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; font-size: 12px; min-width: 560px; }

/* What buyers receive */
.bm-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 24px; }
.bm-steps::before, .bm-steps .fill { content: ""; position: absolute; left: 10%; top: 21px; height: 2px; }
.bm-steps::before { right: 10%; background: var(--line); }
.bm-steps .fill { background: var(--indigo); width: calc(var(--p, 0) * 80%); transition: width .5s ease; }
.bm-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; border: 0; background: none; padding: 0; color: inherit; }
.bm-step .dot { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: all .25s ease; }
.bm-step .dot svg { width: 19px; height: 19px; }
.bm-step b { font-size: 14px; color: var(--ink-strong); }
.bm-step small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.bm-step.done .dot { border-color: var(--indigo); color: var(--indigo); }
.bm-step[aria-selected="true"] .dot { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); box-shadow: 0 0 0 6px color-mix(in srgb, var(--indigo) 16%, transparent); }
@media (max-width: 620px) { .bm-step b { font-size: 11.5px; } .bm-step small { display: none; } .bm-step .dot { width: 36px; height: 36px; } .bm-steps::before, .bm-steps .fill { top: 17px; } }
.bm-pair { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .bm-pair { grid-template-columns: minmax(0, 1fr); } }
.bm-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); display: grid; grid-template-rows: auto 1fr auto; animation: rise .35s ease; box-shadow: var(--shadow-sm); }
.bm-card .cap { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-strong); }
.bm-card .cap svg { width: 17px; height: 17px; }
.bm-card .cap span { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 12px; }
.bm-card.wa .cap svg { color: var(--wa); }
.bm-card.mail .cap svg { color: var(--indigo); }
.bm-wa-body { background: var(--chat-bg); padding: 18px; display: grid; align-content: start; gap: 8px; }
.bm-wa-body .msg { max-width: 100%; font-size: 14px; animation: none; }
.bm-mail-body { padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.bm-mail-body .subj { font-weight: 800; color: var(--ink-strong); font-size: 16px; }
.bm-mail-body .meta { font-size: 12.5px; color: var(--muted); }
.bm-mail-body .txt { white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; }
.bm-foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bm-foot i { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--indigo-soft); color: var(--indigo); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.hv { font-weight: 700; color: var(--ink-strong); }

/* ---------- Security and ownership ---------- */
.own { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
@media (max-width: 860px) { .own { grid-template-columns: minmax(0, 1fr); gap: 12px; } .own .handshake { display: none; } }
.own-card { border-radius: var(--r); padding: clamp(20px, 3vw, 30px); display: grid; gap: 16px; align-content: start; }
.own-card.yours { background: var(--marigold-soft); border: 1px solid color-mix(in srgb, var(--marigold) 45%, var(--line)); }
.own-card.ours { background: var(--surface); border: 1px solid var(--line); }
.own-card h3 { font-size: 26px; letter-spacing: -.02em; }
.own-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.own-card li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; }
.own-card li .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--marigold-ink); }
.own-card.ours li .ic { background: var(--indigo-soft); color: var(--indigo); }
.own-card li .ic svg { width: 18px; height: 18px; }
.own-card li b { display: block; color: var(--ink-strong); }
.own-card li span { color: var(--muted); font-size: 14.5px; }
.handshake { display: grid; place-items: center; }
.handshake span { width: 52px; height: 52px; border-radius: 50%; background: var(--ink-strong); color: var(--bg); display: grid; place-items: center; }
.handshake svg { width: 22px; height: 22px; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .promises { grid-template-columns: minmax(0, 1fr); } }
.promise { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 6px; align-content: start; }
.promise svg { width: 22px; height: 22px; color: var(--indigo); }
.promise b { color: var(--ink-strong); font-size: 15.5px; }
.promise span { color: var(--muted); font-size: 14px; }
.leave { margin-top: 16px; background: var(--deep); color: var(--on-deep); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 24px; align-items: center; }
@media (max-width: 860px) { .leave { grid-template-columns: minmax(0, 1fr); } }
.leave h3 { color: var(--on-deep); font-size: 24px; letter-spacing: -.02em; }
.leave p { color: var(--on-deep-muted); font-size: 14.5px; margin-top: 6px; }
.leave ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .leave ol { grid-template-columns: minmax(0, 1fr); } }
.leave li { counter-increment: s; background: var(--deep-2); border-radius: 12px; padding: 14px; display: grid; gap: 4px; font-size: 14.5px; color: var(--on-deep-muted); }
.leave li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--marigold); color: var(--on-marigold); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.leave li b { color: var(--on-deep); }
.docs-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.docs-row .lbl { margin-right: 6px; }
.docs-row span.d { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; font-weight: 600; background: var(--surface); }

/* ---------- Ask us (assistant) ---------- */
.ask { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 940px) { .ask { grid-template-columns: minmax(0, 1fr); } }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
@media (max-width: 420px) { .topics { grid-template-columns: minmax(0, 1fr); } }
.topic { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: 14px; color: var(--ink-strong); transition: border-color .15s ease, transform .15s ease; }
.topic:hover { border-color: var(--indigo); transform: translateY(-1px); }
.topic i { width: 34px; height: 34px; border-radius: 10px; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; }
.topic i svg { width: 17px; height: 17px; }
.human { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.human p { font-size: 14.5px; color: var(--muted); }
.human .row { display: flex; flex-wrap: wrap; gap: 8px; }
.bot { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 600px; overflow: hidden; }
@media (max-width: 940px) { .ask .bot { height: 540px; } }
.bot-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--indigo); color: var(--on-indigo); }
.bot-head b { display: block; font-size: 15px; font-family: var(--body); color: inherit; }
.bot-head span { font-size: 12.5px; opacity: .85; display: inline-flex; align-items: center; gap: 6px; }
.bot-head .live { width: 8px; height: 8px; border-radius: 50%; background: #3BD671; box-shadow: 0 0 0 3px rgba(59, 214, 113, .25); }
.bot-log { padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; background: var(--bg); }
.bot-log .msg { font-size: 14.5px; max-width: 90%; }
.bot-log .msg.out { background: var(--indigo); color: var(--on-indigo); }
.bot-log .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bot-log .acts a { text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); }
.sugg { display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--surface); }
.sugg button { flex: none; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.sugg button:hover { border-color: var(--indigo); }
.bot-form { display: flex; gap: 8px; padding: 12px; background: var(--surface); }
.bot-form input { flex: 1; min-width: 0; min-height: 46px; border-radius: 999px; }
.bot-form button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--indigo); color: var(--on-indigo); display: grid; place-items: center; flex: none; }
.bot-form button svg { width: 18px; height: 18px; }
.bot-close { margin-left: auto; background: none; border: 0; color: inherit; font-size: 24px; line-height: 1; padding: 2px 8px; }

/* ---------- Contact ---------- */
.contact { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 55%, transparent), transparent 65%); pointer-events: none; }
.contact .wrap { position: relative; }
.contact .h2 { color: var(--on-deep); }
.contact .h2 .hl { color: var(--marigold); }
.contact .lede { color: var(--on-deep-muted); }
.contact .kicker { color: var(--marigold); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .quick { grid-template-columns: minmax(0, 1fr); } }
.qt { background: var(--deep-2); border: 1px solid var(--deep-3); border-radius: 16px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--on-deep); transition: border-color .2s ease, transform .2s ease; }
.qt:hover { border-color: var(--marigold); transform: translateY(-2px); }
.qt .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--deep-3); color: var(--marigold); }
.qt.wa .ic { background: var(--wa); color: #fff; }
.qt .ic svg { width: 22px; height: 22px; }
.qt b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; }
.qt p { font-size: 13.5px; color: var(--on-deep-muted); }
.qt .v { font-family: var(--mono); font-size: 13px; color: var(--on-deep); overflow-wrap: anywhere; user-select: all; }
.qt .go { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.qt .go a, .qt .go button { border: 1.5px solid var(--deep-3); background: none; color: var(--on-deep); border-radius: 9px; padding: 6px 12px; font-size: 13px; font-weight: 700; text-decoration: none; }
.qt .go .main { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.ct-info { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--on-deep-muted); font-size: 14px; margin-top: 18px; }
.ct-info span { display: inline-flex; align-items: center; gap: 8px; }
.ct-info svg { width: 16px; height: 16px; color: var(--marigold); }
.cform { background: var(--surface); color: var(--ink); border-radius: 18px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 14px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }
.cform h3 { font-size: 22px; letter-spacing: -.02em; }
.cform .sub { color: var(--muted); font-size: 14.5px; margin-top: -6px; }
.cform .btn-primary { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; flex: none; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 13.5px; font-weight: 700; cursor: pointer; background: var(--surface); }
.chips span svg { width: 15px; height: 15px; }
.chips input:checked + span { background: var(--indigo); color: var(--on-indigo); border-color: var(--indigo); }
.chips input:focus-visible + span { outline: 3px solid var(--marigold); outline-offset: 2px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .two { grid-template-columns: minmax(0, 1fr); } }
.err { color: var(--warn); font-weight: 700; font-size: 14px; }
.err:empty { display: none; }
.done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 10px 0; }
.done .tick-big { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.done .tick-big svg { width: 30px; height: 30px; }
.done h3 { font-size: 24px; }
.confirm-preview { background: var(--chat-bg); border-radius: 12px; padding: 12px; display: grid; width: 100%; text-align: left; }
.confirm-preview .msg { max-width: 100%; animation: none; }

/* ---------- Footer ---------- */
footer { background: var(--deep); color: var(--on-deep-muted); padding-block: 56px calc(56px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; border-top: 1px solid var(--deep-3); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep); margin-bottom: 12px; font-weight: 500; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--on-deep); }
footer .brand { color: var(--on-deep); }
.foot-base { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--deep-3); display: grid; gap: 8px; font-size: 13px; }

/* ---------- Floating assistant ---------- */
.fab { position: fixed; z-index: 45; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: end; gap: 10px; }
.fab-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--indigo); color: var(--on-indigo); font-weight: 800; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); }
.fab-btn svg { width: 22px; height: 22px; }
.fab-pop { width: min(370px, calc(100vw - 32px)); animation: pop .25s ease; }
@media (max-width: 520px) { .fab-btn span { display: none; } .fab-btn { padding: 15px; } }

.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink-strong); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 80; opacity: 0; pointer-events: none; transition: all .25s ease; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Indian languages ---------- */
:root:lang(hi) .h2, :root:lang(mr) .h2, :root:lang(gu) .h2, :root:lang(hi) .hero h1, :root:lang(mr) .hero h1, :root:lang(gu) .hero h1 { line-height: 1.3; letter-spacing: 0; }
:root:lang(hi) .kicker, :root:lang(mr) .kicker, :root:lang(gu) .kicker { letter-spacing: 0; text-transform: none; font-family: var(--body); font-size: 14px; }
:root:lang(hi) .face q, :root:lang(mr) .face q, :root:lang(gu) .face q { line-height: 1.5; letter-spacing: 0; }
/* rail runs above the stations so the moving dot stays visible */
.journey { padding-top: 34px; }
.rail { top: 6px; left: 40px; right: calc(25% - 40px); z-index: 1; }

/* ---------- Subtle interaction ---------- */
.hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 1180px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(44px, 6vw, 78px); }
.reveal.in { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--indigo) 10%, transparent), transparent 60%); opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: -1; }
.spot:hover::after { opacity: 1; }
.qt.spot::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--marigold) 14%, transparent), transparent 60%); }
.fab-pop .bot { height: min(540px, calc(100vh - 150px)); }


/* ---------- v6: polish ---------- */
/* Hero: slow-moving glow and a soft grain over the whole page */
.hero::before { right: -15%; top: -30%; width: 85%; height: 160%; background: radial-gradient(38% 42% at 62% 34%, color-mix(in srgb, var(--indigo) 20%, transparent), transparent 70%), radial-gradient(26% 30% at 82% 72%, color-mix(in srgb, var(--marigold) 22%, transparent), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-5%, 4%) scale(1.07); } }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage { transform: perspective(1500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-strong); white-space: nowrap; animation: bob 6s ease-in-out infinite; }
.float-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.fc1 { top: -16px; right: 22px; }
.fc2 { top: 44%; right: -22px; animation-delay: -2s; }
.fc2 i { background: var(--marigold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marigold) 30%, transparent); }
.fc3 { bottom: 14px; right: 34%; animation-delay: -4s; }
.fc3 i { background: var(--wa); }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 1180px) { .float-chip { display: none; } }

/* Buttons: a quiet sheen on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.btn-primary:hover::after { transform: translateX(120%); }

/* Highlighted words get a marigold underline that draws in */
.h2 .hl { background: linear-gradient(var(--marigold), var(--marigold)) 0 94% / 100% .1em no-repeat; padding-bottom: .04em; }
.how .h2 .hl, .contact .h2 .hl { background-image: linear-gradient(color-mix(in srgb, var(--on-deep) 30%, transparent), color-mix(in srgb, var(--on-deep) 30%, transparent)); }
.reveal.in .hl { animation: draw 1s .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes draw { from { background-size: 0% .1em; } }
.foot-tag { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--on-deep); letter-spacing: -.01em; }

/* ---------- Comparison slider ---------- */
.cmp { position: relative; --pos: 0%; --p: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-sm); user-select: none; }
.cmp:focus-within { outline: 3px solid var(--marigold); outline-offset: 3px; }
.cmp-tags { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px 162px; }
.cmp-tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.t-usual { background: var(--surface-2); color: var(--muted); }
.t-ours { background: var(--deep); color: var(--marigold); }
.cmp-rows { display: grid; gap: 10px; }
.cmp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.cmp-topic { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink-strong); align-self: center; letter-spacing: -.01em; }
.cmp-cell { position: relative; display: grid; border-radius: 12px; overflow: hidden; }
.cmp-cell > div { grid-area: 1 / 1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 16px; font-size: 15.5px; align-items: start; }
.cmp-cell svg { width: 20px; height: 20px; margin-top: 2px; }
.c-usual { background: var(--surface-2); color: var(--muted); }
.c-usual svg { color: var(--warn); }
.c-ours { background: var(--deep); color: var(--on-deep); clip-path: inset(0 0 0 var(--pos)); }
.c-ours svg { color: var(--marigold); }
.cmp-handle { position: absolute; top: 52px; bottom: 18px; left: calc(180px + (100% - 198px) * var(--p)); width: 2px; margin-left: -1px; background: var(--marigold); pointer-events: none; z-index: 2; }
.cmp-handle span { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--marigold); box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.cmp-handle span::before, .cmp-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.cmp-handle span::before { left: 7px; border-right-color: var(--on-marigold); }
.cmp-handle span::after { right: 7px; border-left-color: var(--on-marigold); }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.cmp.glide .c-ours { transition: clip-path 1.5s cubic-bezier(.6, 0, .2, 1); }
.cmp.glide .cmp-handle { transition: left 1.5s cubic-bezier(.6, 0, .2, 1); }
@media (max-width: 760px) {
  .cmp-tags { margin-left: 0; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cmp-topic { font-size: 16px; }
  .cmp-handle { left: calc(18px + (100% - 36px) * var(--p)); }
}

/* ---------- About us ---------- */
.about { background: linear-gradient(180deg, var(--bg), var(--surface-2)); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }
.about .lede + .lede { margin-top: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 4px; align-content: start; }
.stat b { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.03em; color: var(--indigo); line-height: 1; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .42em; color: var(--muted); font-weight: 700; margin-left: 3px; letter-spacing: 0; }
.stat span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px; display: grid; justify-items: center; text-align: center; gap: 6px; align-content: start; transition: transform .2s ease, border-color .2s ease; }
.member:hover { transform: translateY(-3px); border-color: var(--indigo); }
.member .av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); font-family: var(--display); font-weight: 800; font-size: 18px; border: 2px dashed var(--line-strong); }
.member .av svg { width: 22px; height: 22px; }
.member.lead { grid-column: span 2; background: var(--deep); border-color: var(--deep); }
.member.lead .av { width: 64px; height: 64px; background: var(--marigold); color: var(--on-marigold); border: 0; font-size: 20px; }
.member.lead b { color: var(--on-deep); }
.member.lead span { color: var(--marigold); }
.member b { font-size: 14.5px; color: var(--ink-strong); line-height: 1.3; }
.member span { font-size: 12.5px; color: var(--muted); }
.skills { margin-top: 18px; display: grid; gap: 10px; }
.values { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .values { grid-template-columns: minmax(0, 1fr); } }
.value { border-top: 2px solid var(--marigold); padding-top: 14px; display: grid; gap: 4px; align-content: start; }
.value svg { width: 22px; height: 22px; color: var(--indigo); }
.value b { color: var(--ink-strong); font-size: 16px; }
.value span { color: var(--muted); font-size: 14.5px; }

/* ---------- v7: type, header, footer, lighter copy ---------- */
:root {
  --display: "Schibsted Grotesk", "Noto Sans Devanagari", "Noto Sans Gujarati", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-size: 16.5px; }
.hero h1 { font-weight: 800; letter-spacing: -.04em; font-size: clamp(42px, 5.6vw, 74px); line-height: 1; }
.h2 { font-weight: 700; letter-spacing: -.035em; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; }
.lede { font-size: 17.5px; max-width: 52ch; }
.hero .sub { max-width: 40ch; }
.pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 30px; }
.pillars li { align-items: center; }
.pillars li span:not(.ic) { display: none; }
.kicker { font-size: 11.5px; }

/* Header */
header.top { background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
header.top .bar { min-height: 72px; transition: min-height .25s ease; gap: 18px; }
header.top.scrolled { background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 10px 30px -24px rgba(18, 20, 44, .45); border-bottom-color: var(--line); }
header.top.scrolled .bar { min-height: 60px; }
.brand { font-size: 21px; letter-spacing: -.03em; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
nav.links { position: relative; display: flex; gap: 0; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
nav.links a { position: relative; z-index: 1; padding: 7px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; background: none !important; transition: color .2s ease; }
nav.links a:hover, nav.links a.active { color: var(--ink-strong); }
.nav-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px rgba(18, 20, 44, .08), 0 4px 10px -6px rgba(18, 20, 44, .25); transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; opacity: 0; pointer-events: none; }
.top-actions { gap: 6px; }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; border-color: color-mix(in srgb, var(--line) 80%, transparent); background: transparent; color: var(--ink-strong); transition: background .2s ease, border-color .2s ease; }
.icon-btn:hover { background: var(--surface-2); }
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: transparent; font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--ink-strong); transition: background .2s ease; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--surface-2); }
.lang-btn svg { width: 17px; height: 17px; }
.lang-btn .chev { width: 14px; height: 14px; opacity: .6; transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); animation: rise .2s ease; }
.lang-pop button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 9px; background: none; font-size: 15px; font-weight: 600; color: var(--ink-strong); text-align: left; }
.lang-pop button small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .08em; }
.lang-pop button:hover { background: var(--surface-2); }
.lang-pop button[aria-selected="true"] { background: var(--indigo-soft); color: var(--indigo); }
.lang-pop button[aria-selected="true"] small { color: var(--indigo); }
.cta-top { margin-left: 4px; }
.mobile-menu { display: none !important; }
.sheet { border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 40px -30px rgba(18, 20, 44, .4); }
.sheet .wrap { display: grid; gap: 18px; padding-block: 18px 22px; }
.sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sheet-links a { text-decoration: none; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--ink-strong); }
.sheet-langs, .foot-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-langs button, .foot-langs button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sheet-langs button[aria-pressed="true"] { background: var(--ink-strong); color: var(--bg); border-color: var(--ink-strong); }
.sheet .btn { width: 100%; }
@media (min-width: 1181px) { .sheet { display: none !important; } }
@media (max-width: 1180px) { nav.links { display: none; } .menu-btn { display: inline-grid; } }
@media (max-width: 640px) { .cta-top { display: none; } .lang-btn .chev { display: none; } }

/* Footer */
footer { background: var(--deep); color: var(--on-deep-muted); padding-block: 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 0; font-size: 14.5px; }
.foot-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; padding-block: 48px 40px; border-bottom: 1px solid var(--deep-3); }
.foot-tag { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.035em; line-height: 1.05; color: var(--on-deep); }
.foot-sub { margin-top: 8px; color: var(--on-deep-muted); font-size: 16px; }
.foot-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-ghost-dark { background: transparent; border-color: var(--deep-3); color: var(--on-deep); }
.btn-ghost-dark:hover { border-color: var(--on-deep-muted); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 40px 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand p { max-width: 36ch; }
.foot-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-contact li { display: flex; gap: 10px; align-items: center; color: var(--on-deep); font-size: 14px; }
.foot-contact svg { width: 16px; height: 16px; color: var(--marigold); flex: none; }
footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep); margin-bottom: 14px; font-weight: 500; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer a { text-decoration: none; transition: color .15s ease; }
footer a:hover { color: var(--marigold); }
.foot-base { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--deep-3); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; font-size: 13px; }
.foot-langs button { border-color: var(--deep-3); color: var(--on-deep-muted); }
.foot-langs button:hover { color: var(--on-deep); }
.foot-langs button[aria-pressed="true"] { background: var(--on-deep); color: var(--deep); border-color: var(--on-deep); }
.tm { margin-top: 16px; font-size: 12px; color: color-mix(in srgb, var(--on-deep-muted) 75%, transparent); max-width: 90ch; }
:root:lang(hi) .foot-tag, :root:lang(gu) .foot-tag, :root:lang(mr) .foot-tag { letter-spacing: 0; line-height: 1.3; }
:root:lang(hi) nav.links a, :root:lang(gu) nav.links a, :root:lang(mr) nav.links a { font-size: 14px; padding-inline: 10px; }
header.top .sheet .wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-content: stretch; min-height: 0; gap: 18px; }
header.top .sheet .sheet-links a { white-space: normal; }

/* ==========================================================================
   v8 theme: Peacock & Saffron (custom, theme-factory) for Kaarya OS
   Deep peacock teal carries trust; saffron is the Indian accent; graphite
   ink on soft porcelain. Variable names (--indigo, --marigold) are kept
   so earlier rules inherit the new palette.
   ========================================================================== */
:root {
  --bg: #F5F7F6; --surface: #FFFFFF; --surface-2: #EBF0EE;
  --ink: #1C2B29; --ink-strong: #0D1A18; --muted: #566663;
  --line: #DCE4E1; --line-strong: #C3CFCB;
  --indigo: #0F6B5C; --indigo-2: #0B5347; --indigo-soft: #E0F0EB;
  --marigold: #F29D1F; --marigold-soft: #FDF0DA; --marigold-ink: #8A5200;
  --on-indigo: #FFFFFF; --on-marigold: #1F1300;
  --deep: #0C201D; --deep-2: #12302B; --deep-3: #1D4740;
  --on-deep: #F0F6F4; --on-deep-muted: #A3BCB6;
  --ok: #138A5E; --warn: #C2410C; --chat-bg: #E8EDEA;
  --shadow: 0 30px 60px -32px rgba(10, 32, 29, .42);
  --shadow-sm: 0 1px 2px rgba(10, 32, 29, .06), 0 8px 18px -12px rgba(10, 32, 29, .26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1312; --surface: #101D1B; --surface-2: #162724; --ink: #E3EDEA; --ink-strong: #FFFFFF; --muted: #9AB0AB;
    --line: #213833; --line-strong: #31514A; --indigo: #3EC2A6; --indigo-2: #2EA88E; --indigo-soft: #12352E;
    --marigold: #FFB443; --marigold-soft: #3A2A0D; --marigold-ink: #FFC872; --on-indigo: #04201A; --on-marigold: #1F1300;
    --deep: #050C0B; --deep-2: #0D1C1A; --deep-3: #1A3833; --on-deep: #EEF5F3; --on-deep-muted: #9CB4AE;
    --ok: #4CC99A; --warn: #F2875A; --chat-bg: #0D1A18;
    --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 8px 18px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1312; --surface: #101D1B; --surface-2: #162724; --ink: #E3EDEA; --ink-strong: #FFFFFF; --muted: #9AB0AB;
  --line: #213833; --line-strong: #31514A; --indigo: #3EC2A6; --indigo-2: #2EA88E; --indigo-soft: #12352E;
  --marigold: #FFB443; --marigold-soft: #3A2A0D; --marigold-ink: #FFC872; --on-indigo: #04201A; --on-marigold: #1F1300;
  --deep: #050C0B; --deep-2: #0D1C1A; --deep-3: #1A3833; --on-deep: #EEF5F3; --on-deep-muted: #9CB4AE;
  --ok: #4CC99A; --warn: #F2875A; --chat-bg: #0D1A18;
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 8px 18px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
.brand-mark { background: linear-gradient(145deg, #13806D, #0B5347); }

/* ---------- Subtle header ---------- */
header.top { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid transparent; }
header.top.scrolled { background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: none; border-bottom-color: var(--line); }
header.top .bar { min-height: 66px; }
header.top.scrolled .bar { min-height: 58px; }
.brand { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.brand-mark svg { width: 19px; height: 19px; }
nav.links { background: none; border: 0; padding: 0; gap: 2px; }
nav.links a { padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
nav.links a:hover, nav.links a.active { color: var(--ink-strong); }
.nav-ind { top: auto; bottom: 2px; height: 2px; border-radius: 2px; background: var(--indigo); box-shadow: none; }
.lang-btn, .icon-btn { border-color: transparent; height: 36px; }
.icon-btn { width: 36px; }
.lang-btn { padding: 0 8px; font-size: 12.5px; color: var(--muted); }
.lang-btn:hover, .icon-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-strong); }
.cta-top { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 9px; box-shadow: none; }
.progress { height: 2px; background: var(--indigo); }

/* ---------- About: founders and team ---------- */
.team-wrap { display: grid; gap: 12px; align-content: start; }
.founders { display: grid; gap: 12px; }
.founder { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }
.founder .av { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg, #13806D, #0B5347); color: #fff; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.founder b { display: block; font-family: var(--display); font-size: 19px; color: var(--ink-strong); letter-spacing: -.01em; }
.founder .role { display: inline-block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold-ink); background: var(--marigold-soft); padding: 2px 8px; border-radius: 999px; }
.founder .focus { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.team-row { margin-top: 28px; display: grid; gap: 12px; }
.team { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 960px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.member { padding: 18px 12px; }
.member .av { border: 0; background: var(--indigo-soft); color: var(--indigo); font-size: 16px; }

/* ---------- Problems: calmer, even cards ---------- */
.flip-grid { gap: 14px; }
.face { min-height: 300px; padding: 20px; gap: 10px; }
.face .vis { height: 88px; }
.face q { font-size: 17.5px; }
.face h3 { font-size: 18px; }
.face p { font-size: 14px; }
.filters button { padding: 7px 14px; font-size: 13.5px; }

/* ---------- Packages: tidier ladder and detail ---------- */
.finder { gap: 10px 22px; margin-bottom: 18px; }
.rung { padding: 12px 12px 12px 0; grid-template-columns: 52px minmax(0, 1fr) auto; }
.rung b { font-size: 16.5px; }
.rung .s { font-size: 13px; }
.ladder::before { left: 25px; }
.pk-head { padding: 22px 24px; }
.pk-head h3 { font-size: clamp(24px, 2.6vw, 28px); }
.grp { padding: 16px 24px; }
.grp ul { font-size: 14px; }
.pk-foot { padding: 14px 24px; }
.incl-row div { padding: 14px; font-size: 13px; }

/* Keep every section legible: section intros and labels never fade below readable contrast */
.small, .lbl { color: var(--muted); }
.how .lbl, .contact .lbl, footer .lbl { color: var(--on-deep-muted); }

/* Reveal: a short upward slide only; content never fades out, so every section stays readable */
.reveal.in { animation: lift .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lift { from { transform: translateY(14px); } to { transform: none; } }

/* ==========================================================================
   v9 theme: Ink & Antique Gold (custom, theme-factory) for Shreni
   Midnight navy carries trust, antique gold adds the luxury accent, warm
   ivory paper keeps long reads easy. Fraunces (serif display) with
   Instrument Sans body. Variable names (--indigo, --marigold) are kept so
   earlier rules inherit the palette.
   ========================================================================== */
:root {
  --display: "Fraunces", "Noto Sans Devanagari", "Noto Sans Gujarati", Georgia, serif;
  --body: "Instrument Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #F6F3EC; --surface: #FFFFFF; --surface-2: #EDE8DD;
  --ink: #1A1F2B; --ink-strong: #0C1019; --muted: #5C6170;
  --line: #E1DACB; --line-strong: #CABFA8;
  --indigo: #1B2A4A; --indigo-2: #13203A; --indigo-soft: #E6E9F1;
  --marigold: #B8893B; --marigold-soft: #F5EBD7; --marigold-ink: #7A5617;
  --on-indigo: #FFFFFF; --on-marigold: #1A1206;
  --deep: #0F1626; --deep-2: #172038; --deep-3: #26314E;
  --on-deep: #F4F1EA; --on-deep-muted: #AEB5C7;
  --ok: #2F7D5B; --warn: #B4472C; --chat-bg: #ECE7DC;
  --gold-line: linear-gradient(90deg, transparent, #C9A25A, transparent);
  --shadow: 0 30px 60px -34px rgba(15, 22, 38, .45);
  --shadow-sm: 0 1px 2px rgba(15, 22, 38, .05), 0 10px 22px -16px rgba(15, 22, 38, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F18; --surface: #121827; --surface-2: #182036; --ink: #ECE8DF; --ink-strong: #FFFFFF; --muted: #A3A9B9;
    --line: #263049; --line-strong: #36425F; --indigo: #9DB0E0; --indigo-2: #8296CC; --indigo-soft: #1E2944;
    --marigold: #D9AE5F; --marigold-soft: #3A2D14; --marigold-ink: #E9C47C; --on-indigo: #0B0F18; --on-marigold: #1A1206;
    --deep: #070A11; --deep-2: #0F1525; --deep-3: #222C47; --on-deep: #F4F1EA; --on-deep-muted: #AEB5C7;
    --ok: #5FC198; --warn: #F08A6C; --chat-bg: #0F1525;
    --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 10px 22px -14px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0F18; --surface: #121827; --surface-2: #182036; --ink: #ECE8DF; --ink-strong: #FFFFFF; --muted: #A3A9B9;
  --line: #263049; --line-strong: #36425F; --indigo: #9DB0E0; --indigo-2: #8296CC; --indigo-soft: #1E2944;
  --marigold: #D9AE5F; --marigold-soft: #3A2D14; --marigold-ink: #E9C47C; --on-indigo: #0B0F18; --on-marigold: #1A1206;
  --deep: #070A11; --deep-2: #0F1525; --deep-3: #222C47; --on-deep: #F4F1EA; --on-deep-muted: #AEB5C7;
  --ok: #5FC198; --warn: #F08A6C; --chat-bg: #0F1525;
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 10px 22px -14px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* ---------- Type: serif display, calmer tracking ---------- */
h1, h2, h3, h4, h5 { font-optical-sizing: auto; }
.hero h1 { font-weight: 600; letter-spacing: -.025em; font-size: clamp(42px, 5.4vw, 72px); line-height: 1.02; }
.h2 { font-weight: 600; letter-spacing: -.02em; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; max-width: 22ch; }
.h3 { font-weight: 600; letter-spacing: -.015em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin-top: 10px; max-width: 30ch; }
.brand { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.foot-tag { font-weight: 600; letter-spacing: -.02em; }
.v-big, .stat b, .kpi b, .rung b, .face q, .cmp-topic, .qt b, .dash-greet b { letter-spacing: -.01em; }
.face q { font-weight: 500; }
.stat b { font-weight: 600; }
.v-big { font-weight: 600; }
.kicker { color: var(--marigold-ink); letter-spacing: .14em; }
.kicker::before { width: 18px; height: 1px; border-radius: 0; transform: none; background: var(--marigold); }
.how .kicker, .contact .kicker { color: var(--marigold); }

/* ---------- Brand mark: gold S on midnight navy ---------- */
.brand-mark { background: #1B2A4A; box-shadow: inset 0 0 0 1px rgba(217, 174, 95, .55); border-radius: 8px; }
:root[data-theme="dark"] .brand-mark { background: #1B2A4A; }
.foot-brand .brand-mark { background: #1B2A4A; }

/* ---------- Buttons: quieter, tailored ---------- */
.btn { border-radius: 10px; }
.btn-primary { box-shadow: 0 10px 22px -14px var(--indigo); }
.btn-primary::after { background: linear-gradient(110deg, transparent 30%, rgba(217, 174, 95, .35) 50%, transparent 70%); }
.h2 .hl { background-image: linear-gradient(var(--marigold), var(--marigold)); background-size: 100% .06em; }
.hero h1 .mark::after { height: .07em; bottom: .02em; }

/* ---------- Density: less empty space everywhere ---------- */
section { padding-block: clamp(56px, 7vw, 88px); }
.sec-head { margin-bottom: clamp(22px, 3vw, 34px); }
.lede { margin-top: 12px; }
.flip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
@media (max-width: 960px) { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .flip-grid { grid-template-columns: minmax(0, 1fr); } }
.face { min-height: 264px; }

/* ---------- Integrations by category ---------- */
.fit { padding-block: clamp(40px, 5vw, 60px); background: var(--surface); border-block: 1px solid var(--line); }
.fit .wrap { display: block; }
.fit-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 12px 40px; align-items: end; margin-bottom: 22px; }
.intg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.intg { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: border-color .2s; }
.intg:hover { border-color: var(--marigold); }
.intg h3 { display: flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold-ink); }
.intg h3 svg { width: 18px; height: 18px; color: var(--indigo); flex: none; }
.intg ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.intg li { font-size: 14px; font-weight: 500; color: var(--ink-strong); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.made-for { margin-top: 18px; display: grid; gap: 10px; }
@media (max-width: 960px) { .intg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fit-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .intg-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Packages: five rungs, three questions ---------- */
.rung .dot svg { width: 16px; height: 16px; }
.finder { flex-wrap: wrap; }

/* ---------- Lead generation ---------- */
.leads { background: var(--surface); border-top: 1px solid var(--line); }
.lead-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.lead-steps li { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.lead-steps .n { position: absolute; top: 14px; right: 16px; font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--marigold); opacity: .55; line-height: 1; }
.lead-steps svg { width: 22px; height: 22px; color: var(--indigo); }
.lead-steps b { color: var(--ink-strong); font-size: 16px; margin-top: 6px; }
.lead-steps span:not(.n) { color: var(--muted); font-size: 14px; line-height: 1.45; }
.regions { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.region-tabs { display: grid; gap: 4px; align-content: start; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 6px; }
.region-tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.region-tabs button::after { content: "→"; opacity: 0; transition: opacity .2s; color: var(--marigold); }
.region-tabs button:hover { color: var(--ink-strong); background: var(--surface); }
.region-tabs button[aria-selected="true"] { background: var(--indigo); color: var(--on-indigo); }
.region-tabs button[aria-selected="true"]::after { opacity: 1; }
.region-tabs button:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
.region-panel { background: var(--deep); color: var(--on-deep); border-radius: 14px; padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; }
.region-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); }
.region-panel h3 { display: flex; align-items: center; gap: 10px; color: var(--on-deep); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; }
.region-panel h3 svg { width: 24px; height: 24px; color: var(--marigold); }
.region-panel .mk { color: var(--marigold); font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; margin: -4px 0 0; }
.region-panel dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.region-panel dl div { background: var(--deep-2); border: 1px solid var(--deep-3); border-radius: 12px; padding: 12px 14px; }
.region-panel dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-deep-muted); }
.region-panel dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--on-deep); }
.region-panel .btn { justify-self: start; background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); box-shadow: none; }
.region-panel .btn svg { width: 16px; height: 16px; }
.lead-note { margin-top: 14px; max-width: 80ch; }
@media (max-width: 960px) { .lead-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .regions { grid-template-columns: minmax(0, 1fr); } .region-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } .region-panel dl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lead-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- About: leadership, team ---------- */
.about { background: var(--bg); }
.about-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 20px clamp(28px, 4vw, 56px); align-items: end; margin-bottom: 28px; }
.about-head .stats { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat b { color: var(--indigo); }
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.leader { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.leader::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-line); }
.lead-top { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; }
.leader .av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #1B2A4A; color: #E9C47C; font-family: var(--display); font-weight: 600; font-size: 20px; box-shadow: inset 0 0 0 1px rgba(217, 174, 95, .6); }
.leader b { display: block; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--ink-strong); letter-spacing: -.01em; line-height: 1.15; }
.leader .role { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.leader .badge { display: inline-block; margin: 4px 0 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--marigold-ink); background: var(--marigold-soft); border: 1px solid color-mix(in srgb, var(--marigold) 40%, transparent); padding: 1px 8px; border-radius: 999px; }
.leader .focus { margin: 0; font-weight: 600; color: var(--indigo); font-size: 15.5px; }
.leader ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.leader li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.leader li svg { width: 16px; height: 16px; color: var(--marigold); flex: none; margin-top: 2px; }
.team-row { margin-top: 22px; }
.team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.member .av { background: var(--indigo-soft); color: var(--indigo); font-family: var(--display); font-weight: 600; }
.skills { margin-top: 20px; }
.values { margin-top: 26px; }
.value { border-top-width: 1px; }
@media (max-width: 960px) { .about-head { grid-template-columns: minmax(0, 1fr); } .leaders { grid-template-columns: minmax(0, 1fr); } .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Footer and dark sections: a hairline of gold ---------- */
footer { position: relative; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); }
.leader .badge { display: table; margin: 6px 0 0; }
.lead-top { min-height: 72px; }

/* ==========================================================================
   v10 theme: Monsoon Slate & Brass (custom, theme-factory) for Sutradhar
   Deep slate-teal for steadiness, brushed brass as the single accent, misty
   off-white paper. Manrope (confident geometric display) with IBM Plex Sans
   for calm, enterprise-grade reading. Names --indigo and --marigold are kept
   so every earlier rule inherits the palette.
   ========================================================================== */
:root {
  --display: "Manrope", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #F2F3F0; --surface: #FFFFFF; --surface-2: #E8EBE7;
  --ink: #1E272A; --ink-strong: #0F171A; --muted: #59656A;
  --line: #DCE1DD; --line-strong: #C4CCC7;
  --indigo: #243F48; --indigo-2: #1A3139; --indigo-soft: #E0E9EA;
  --marigold: #B5864E; --marigold-soft: #F1E7D9; --marigold-ink: #7A5528;
  --on-indigo: #FFFFFF; --on-marigold: #1C1308;
  --deep: #15242A; --deep-2: #1D2F36; --deep-3: #2C434B;
  --on-deep: #EEF2F0; --on-deep-muted: #A8B7B8;
  --ok: #2E7A5A; --warn: #A9483A; --chat-bg: #E7EAE5; --wa: #1E7A55;
  --gold-line: linear-gradient(90deg, transparent, var(--marigold), transparent);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --shadow: 0 30px 60px -36px rgba(21, 36, 42, .42);
  --shadow-sm: 0 1px 2px rgba(21, 36, 42, .05), 0 10px 24px -18px rgba(21, 36, 42, .32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1518; --surface: #141E22; --surface-2: #1A262B; --ink: #E2E9E7; --ink-strong: #FFFFFF; --muted: #9DACAD;
    --line: #253539; --line-strong: #35494F; --indigo: #93B9C2; --indigo-2: #7EA7B1; --indigo-soft: #1C2F35;
    --marigold: #D3A46C; --marigold-soft: #352819; --marigold-ink: #E4BD8C; --on-indigo: #0E1518; --on-marigold: #1C1308;
    --deep: #091013; --deep-2: #111C20; --deep-3: #223439; --on-deep: #EEF2F0; --on-deep-muted: #A8B7B8;
    --ok: #62BE96; --warn: #E98B79; --chat-bg: #111C20; --wa: #3FA57A;
    --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 10px 24px -16px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1518; --surface: #141E22; --surface-2: #1A262B; --ink: #E2E9E7; --ink-strong: #FFFFFF; --muted: #9DACAD;
  --line: #253539; --line-strong: #35494F; --indigo: #93B9C2; --indigo-2: #7EA7B1; --indigo-soft: #1C2F35;
  --marigold: #D3A46C; --marigold-soft: #352819; --marigold-ink: #E4BD8C; --on-indigo: #0E1518; --on-marigold: #1C1308;
  --deep: #091013; --deep-2: #111C20; --deep-3: #223439; --on-deep: #EEF2F0; --on-deep-muted: #A8B7B8;
  --ok: #62BE96; --warn: #E98B79; --chat-bg: #111C20; --wa: #3FA57A;
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 10px 24px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- Type: confident, unhurried ---------- */
body { font-size: 16.5px; }
.hero h1 { font-weight: 700; letter-spacing: -.035em; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; }
.h2 { font-weight: 700; letter-spacing: -.03em; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; }
.h3 { font-weight: 700; letter-spacing: -.02em; }
.brand { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.foot-tag { font-weight: 700; letter-spacing: -.03em; }
.face q { font-weight: 600; letter-spacing: -.015em; }
.stat b, .v-big { font-weight: 700; letter-spacing: -.03em; }

/* ---------- Brand mark: three threads gathered, brass point ---------- */
.brand-mark, :root[data-theme="dark"] .brand-mark, .foot-brand .brand-mark { background: #243F48; color: #E9EEEC; box-shadow: none; border-radius: 8px; }
.brand-mark svg { width: 20px; height: 20px; }

/* ---------- Header: tucks away while reading ---------- */
header.top { transition: transform .45s var(--ease), background .3s, border-color .3s; }
header.top.tucked { transform: translateY(calc(-100% - 4px)); }
.progress { background: linear-gradient(90deg, var(--indigo), var(--marigold)); }

/* ---------- Buttons ---------- */
.btn { transition: transform .35s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s; }
.btn-primary { box-shadow: 0 12px 24px -16px var(--indigo); }
.btn-primary::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); }
.cta-top { transition: transform .35s var(--ease), background .2s; }

/* ---------- Hero: slow threads drifting behind ---------- */
.hero::before { opacity: .7; }
.hero-threads { position: absolute; inset: auto 0 0 0; width: 100%; height: 78%; pointer-events: none; z-index: 0; }
.hero-threads path { fill: none; stroke: var(--indigo); stroke-width: 1.1; opacity: .16; stroke-dasharray: 2 9; animation: threadflow 38s linear infinite; vector-effect: non-scaling-stroke; }
.hero-threads path:nth-child(2) { opacity: .12; animation-duration: 52s; animation-direction: reverse; }
.hero-threads path:nth-child(3) { opacity: .09; animation-duration: 64s; }
.hero-threads path.gold { stroke: var(--marigold); opacity: .55; stroke-width: 1.4; stroke-dasharray: 160 2400; animation: threadrun 14s var(--ease) infinite; }
@keyframes threadflow { to { stroke-dashoffset: -440; } }
@keyframes threadrun { from { stroke-dashoffset: 2560; } to { stroke-dashoffset: 0; } }
.hero h1 .mark { color: var(--indigo); }
.hero h1 .mark::after { height: .06em; bottom: .02em; transform: none; border-radius: 0; background: var(--marigold); transform-origin: left; animation: inkline 1.2s .5s var(--ease) both; }
@keyframes inkline { from { transform: scaleX(0); } }

/* ---------- Scroll thread (desktop) ---------- */
.thread { position: fixed; z-index: 40; left: max(18px, calc((100vw - 1200px) / 2 - 64px)); top: 24vh; bottom: 24vh; width: 22px; display: none; }
@media (min-width: 1340px) { .thread { display: block; } }
.thread-track, .thread-fill { position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.thread-fill { background: linear-gradient(var(--indigo), var(--marigold)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.thread-bead { position: absolute; left: 10px; top: calc(var(--p, 0) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marigold) 22%, transparent); }
.thread-bead::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--marigold); opacity: 0; animation: beadpulse 2.8s ease-out infinite; }
@keyframes beadpulse { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.thread ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.thread li { position: absolute; left: 0; top: calc(var(--at) * 100%); transform: translateY(-50%); }
.thread a { display: flex; align-items: center; gap: 10px; height: 18px; text-decoration: none; }
.thread a i { width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); transition: transform .3s var(--ease), background .3s, border-color .3s; }
.thread a.past i { background: var(--indigo); border-color: var(--indigo); }
.thread a.on i { transform: scale(1.5); background: var(--marigold); border-color: var(--marigold); }
.thread a span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 2px 6px; border-radius: 4px; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.thread:hover a span, .thread a:focus-visible span { opacity: 1; transform: none; }
.thread a.on span { color: var(--ink-strong); }

/* ---------- Reveal motion: headings rise, cards follow one by one ---------- */
.pre-head.in > div > * { animation: up .8s var(--ease) both; }
.pre-head.in > div > *:nth-child(2) { animation-delay: .08s; }
.pre-head.in > div > *:nth-child(3) { animation-delay: .16s; }
.pre-head.in .kicker::before { animation: grow .9s .2s var(--ease) both; transform-origin: left; }
.pre-head.in .h2 .hl { animation: draw 1.1s .45s var(--ease) both; }
.pre-stagger.in > * { animation: up .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.pre-block.in { animation: up .85s var(--ease) both; }
@keyframes up { from { opacity: .001; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } }
.kicker::before { width: 22px; height: 1.5px; border-radius: 0; transform: none; background: var(--marigold); }
.kicker { color: var(--marigold-ink); }
.how .kicker { color: var(--marigold); }

/* ---------- Problems: no empty space on the problem side ---------- */
.face { min-height: 0; padding: 18px; gap: 10px; }
.face.front { display: flex; flex-direction: column; }
.face.front .vis { flex: 1 1 auto; height: auto; min-height: 104px; }
.face.front q { font-size: 18px; line-height: 1.3; }
.face.front .who { margin-top: -4px; }
.face.front .hint { margin-top: 2px; }
.face.back .vis { height: 84px; }
.flip:hover .face.front { border-color: var(--line-strong); }
.flip .flip-inner { transition: transform .8s var(--ease); }

/* ---------- Contact: the team and one way in ---------- */
.contact { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); }
.contact::before { display: none; }
.contact .h2 { color: var(--ink-strong); }
.contact .h2 .hl { color: var(--indigo); background-image: linear-gradient(var(--marigold), var(--marigold)); }
.contact .lede { color: var(--muted); }
.contact .kicker { color: var(--marigold-ink); }
.contact .lbl { color: var(--muted); }
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.people { display: grid; gap: 14px; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.founder { display: grid; grid-template-columns: none; gap: 14px; align-content: start; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .4s var(--ease), border-color .3s; }
.founder::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--indigo), var(--marigold)); }
.founder:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.f-top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.founder .av { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: var(--on-indigo); font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .02em; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px color-mix(in srgb, var(--marigold) 60%, transparent); }
.founder .role { display: block; margin: 0; padding: 0; background: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold-ink); }
.founder b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -.02em; color: var(--ink-strong); line-height: 1.15; }
.founder .focus { display: block; margin-top: 3px; font-size: 14.5px; color: var(--indigo); font-weight: 600; }
.founder ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.founder li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.founder li svg { width: 16px; height: 16px; color: var(--marigold); flex: none; margin-top: 2px; }
.people-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch; }
.fm { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.fm .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); font-family: var(--display); font-weight: 700; font-size: 17px; }
.fm b { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink-strong); letter-spacing: -.01em; }
.fm .role { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.fm .tag { font-style: normal; display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--marigold-ink); border: 1px solid color-mix(in srgb, var(--marigold) 45%, transparent); padding: 0 6px; border-radius: 4px; vertical-align: 1px; }
.fm .focus { display: block; font-size: 14px; color: var(--indigo); font-weight: 600; margin-top: 4px; }
.contact .team { list-style: none; margin: 0; padding: 6px 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.contact .member { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; justify-items: start; text-align: left; align-items: center; padding: 8px 10px; background: none; border: 0; border-radius: 10px; }
.contact .member:hover { transform: none; background: var(--surface-2); }
.contact .member .av { grid-row: span 2; width: 34px; height: 34px; font-size: 12px; margin: 0; }
.contact .member b { font-size: 14px; }
.contact .member span:not(.av) { font-size: 12.5px; line-height: 1.3; }
.contact .stats { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.contact .stat { padding: 14px 16px; }
.wa-card { position: sticky; top: 96px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); }
.wa-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--wa) 12%, transparent); color: var(--wa); }
.wa-ic svg { width: 24px; height: 24px; }
.wa-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.wa-card p { margin: 0; color: var(--muted); font-size: 15px; }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; justify-content: center; }
.btn-wa:hover { filter: brightness(1.06); }
:root[data-theme="dark"] .btn-wa { color: #08130E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-wa { color: #08130E; } }
.btn-wa svg { width: 18px; height: 18px; }
.wa-num { text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.wa-topics { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; }
.wa-topics .lbl { margin-bottom: 4px; }
.wa-topics a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-strong); font-size: 15px; font-weight: 500; transition: background .2s, padding .3s var(--ease); }
.wa-topics a svg { width: 16px; height: 16px; color: var(--marigold); transition: transform .3s var(--ease); }
.wa-topics a:hover { background: var(--surface-2); padding-left: 14px; }
.wa-topics a:hover svg { transform: translateX(3px); }
@media (max-width: 1020px) { .ct-layout { grid-template-columns: minmax(0, 1fr); } .wa-card { position: static; } }
@media (max-width: 720px) { .founders, .people-row { grid-template-columns: minmax(0, 1fr); } .contact .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .contact .team { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Calmer surfaces elsewhere ---------- */
.intg:hover, .lead-steps li:hover { border-color: var(--line-strong); }
.region-tabs button[aria-selected="true"] { background: var(--indigo); color: var(--on-indigo); }
.region-panel .btn { background: var(--wa); border-color: var(--wa); color: #fff; }
footer::before { background: var(--gold-line); opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .hero-threads path, .thread-bead::after, .hero h1 .mark::after { animation: none; }
  header.top.tucked { transform: none; }
}
.hero h1 { font-size: clamp(38px, 4.5vw, 62px); }

/* ==========================================================================
   v11 theme: Dusk Teal & Sandstone (custom, theme-factory) for Sutradhar AI
   A quieter deep teal, sandstone brass used sparingly, warm stone paper with
   a faint grain. One easing curve and one rise motion everywhere.
   ========================================================================== */
:root {
  --bg: #F5F4F0; --surface: #FFFFFF; --surface-2: #EEEDE7;
  --ink: #22292C; --ink-strong: #12181A; --muted: #5E686B;
  --line: #E4E1DA; --line-strong: #CFCBC1;
  --indigo: #2C4A50; --indigo-2: #213A3F; --indigo-soft: #E5EDEC;
  --marigold: #A9844F; --marigold-soft: #F3ECE0; --marigold-ink: #7A5A2C;
  --on-indigo: #FFFFFF; --on-marigold: #1C1308;
  --deep: #172427; --deep-2: #1E2F33; --deep-3: #2E4347;
  --on-deep: #EEF1EE; --on-deep-muted: #A9B7B6;
  --ok: #2F7458; --warn: #A14C3F; --chat-bg: #ECEAE4; --wa: #2A7A5C;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 30px 60px -38px rgba(23, 36, 39, .4);
  --shadow-sm: 0 1px 2px rgba(23, 36, 39, .04), 0 12px 28px -22px rgba(23, 36, 39, .35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1416; --surface: #151C1F; --surface-2: #1B2427; --ink: #E3E8E5; --ink-strong: #FFFFFF; --muted: #9CA9A9;
    --line: #263236; --line-strong: #37464A; --indigo: #9DBDC2; --indigo-2: #88AAB0; --indigo-soft: #1D2E31;
    --marigold: #CFA772; --marigold-soft: #33291B; --marigold-ink: #E0BF8E; --on-indigo: #0F1416; --on-marigold: #1C1308;
    --deep: #0A0F11; --deep-2: #121A1D; --deep-3: #233236; --on-deep: #EEF1EE; --on-deep-muted: #A9B7B6;
    --ok: #6CBF9C; --warn: #E2917F; --chat-bg: #121A1D; --wa: #4AA37F;
    --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 12px 28px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1416; --surface: #151C1F; --surface-2: #1B2427; --ink: #E3E8E5; --ink-strong: #FFFFFF; --muted: #9CA9A9;
  --line: #263236; --line-strong: #37464A; --indigo: #9DBDC2; --indigo-2: #88AAB0; --indigo-soft: #1D2E31;
  --marigold: #CFA772; --marigold-soft: #33291B; --marigold-ink: #E0BF8E; --on-indigo: #0F1416; --on-marigold: #1C1308;
  --deep: #0A0F11; --deep-2: #121A1D; --deep-3: #233236; --on-deep: #EEF1EE; --on-deep-muted: #A9B7B6;
  --ok: #6CBF9C; --warn: #E2917F; --chat-bg: #121A1D; --wa: #4AA37F;
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 12px 28px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- Environment: warm paper with a faint grain ---------- */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background-image: var(--grain); opacity: .045; mix-blend-mode: multiply; }
:root[data-theme="dark"] body::after { opacity: .06; mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { opacity: .06; mix-blend-mode: screen; } }
.hero::before { opacity: .45; }
.hero-threads path.gold { opacity: .4; }

/* ---------- Quiet the effects that felt busy ---------- */
.btn-primary::after, .spot::after { display: none; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); box-shadow: none; }
.float-chip { animation-duration: 9s !important; }
.flip { animation: none; }

/* ---------- Brand: monoline S thread with a sandstone knot ---------- */
.brand { gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--ink-strong); }
.brand-mark, :root[data-theme="dark"] .brand-mark, .foot-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(180deg, #365A60, #1D3135); color: #F1EEE6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(29, 49, 53, .7); }
.brand-mark svg { width: 22px; height: 22px; }
.wm { display: inline-flex; align-items: center; }
.wm .ai { margin-left: 7px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--marigold-ink); border: 1px solid color-mix(in srgb, var(--marigold) 55%, transparent); border-radius: 4px; padding: 1px 5px 0; line-height: 1.5; }
footer .wm .ai { color: var(--marigold); }

/* ---------- Header ---------- */
header.top { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
header.top.scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); border-bottom-color: var(--line); }
header.top .bar, header.top.scrolled .bar { min-height: 68px; }
nav.links a { font-size: 14px; font-weight: 500; padding: 8px 13px; letter-spacing: -.005em; }
.nav-ind { height: 1.5px; bottom: 4px; background: var(--marigold); }
.top-sep { width: 1px; height: 22px; background: var(--line-strong); margin-inline: 4px; }
.wa-top { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; transition: background .2s, color .2s; }
.wa-top svg { width: 17px; height: 17px; color: var(--wa); }
.wa-top:hover { background: var(--surface-2); color: var(--ink-strong); }
.cta-top { border-radius: 9px; font-weight: 600; }
@media (max-width: 1180px) { .wa-top span { display: none; } }
@media (max-width: 860px) { .wa-top, .top-sep { display: none; } }

/* ---------- Packages: pick across the top, details below, then compare ---------- */
.pk { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ladder::before { display: none; }
.rung { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 10px; padding: 16px; border-width: 1px; border-radius: 14px; transition: border-color .25s, background .25s, transform .4s var(--ease); }
.rung:hover { transform: translateY(-2px); }
.rung .dot { justify-self: start; width: 28px; height: 28px; font-size: 13px; border-width: 1.5px; }
.rung b { font-size: 16px; }
.rung .s { font-size: 13px; margin-top: 2px; }
.rung .rec { position: absolute; top: 14px; right: 14px; background: var(--marigold-soft); color: var(--marigold-ink); }
.rung[aria-selected="true"] { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo-soft) 55%, var(--surface)); box-shadow: none; }
.pk-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: end; }
.pk-head .lbl, .pk-head h3, .pk-head p { grid-column: 1; }
.pk-head .pills { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.grp { border-top: 1px solid var(--line); }
@media (max-width: 1020px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ladder { grid-template-columns: minmax(0, 1fr); } .pk-groups { grid-template-columns: minmax(0, 1fr); } .pk-head { grid-template-columns: minmax(0, 1fr); } .pk-head .pills { grid-column: 1; grid-row: auto; } }

.compare { margin-top: 28px; }
.compare-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
.compare-head .h3 { margin-top: 0; font-size: clamp(20px, 2vw, 24px); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.table-scroll:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.ptable { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ptable th, .ptable td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.ptable tbody tr:last-child > * { border-bottom: 0; }
.ptable th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 240px; }
.ptable thead th { background: var(--surface); vertical-align: bottom; padding: 14px 10px 12px; }
.ptable thead th:first-child { position: sticky; left: 0; z-index: 2; }
.ptable thead button { all: unset; cursor: pointer; display: grid; gap: 3px; justify-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-strong); line-height: 1.25; letter-spacing: -.01em; padding: 4px 6px; border-radius: 8px; }
.ptable thead button small { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ptable thead button:hover { color: var(--indigo); }
.ptable thead button:focus-visible { outline: 2px solid var(--marigold); }
.ptable .sel { background: color-mix(in srgb, var(--indigo-soft) 60%, var(--surface)); }
.ptable thead th.sel { box-shadow: inset 0 2px 0 var(--indigo); }
.ptable .grp-row th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold-ink); background: var(--surface-2); padding: 9px 14px; position: sticky; left: 0; }
.ptable .yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.ptable .yes svg { width: 13px; height: 13px; }
.ptable .no { color: var(--line-strong); }
.ptable .txt { font-size: 12.5px; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.incl-lbl { display: block; margin-top: 28px; margin-bottom: 10px; }

/* ---------- About us and team ---------- */
.about-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px clamp(28px, 5vw, 64px); align-items: end; margin-bottom: clamp(26px, 3.4vw, 40px); }
.about-intro .h2 { margin-top: 12px; }
.about-co { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--ink); padding-left: 22px; border-left: 1px solid var(--marigold); max-width: 62ch; }
@media (max-width: 860px) { .about-intro { grid-template-columns: minmax(0, 1fr); } }
.people > .lbl { margin-bottom: -4px; }
.founder { padding: 24px; border-radius: 16px; box-shadow: none; }
.founder::before { height: 1px; background: linear-gradient(90deg, transparent, var(--marigold), transparent); }
.founder .av { background: linear-gradient(180deg, #365A60, #1D3135); color: #F1EEE6; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px color-mix(in srgb, var(--marigold) 45%, transparent); }
.fm, .contact .team, .contact .stat, .wa-card { box-shadow: none; }
.wa-card { border-radius: 16px; }

/* ---------- Footer ---------- */
footer { background: var(--deep); padding-top: 28px; }
footer::before { display: none; }
.foot-cta { border: 1px solid var(--deep-3); border-radius: 20px; padding: clamp(24px, 3.4vw, 40px); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--marigold) 12%, transparent), transparent 55%), var(--deep-2); margin-bottom: 8px; }
.foot-cta .kicker { color: var(--marigold); margin-bottom: 10px; }
.foot-tag { font-size: clamp(24px, 3vw, 34px); max-width: 22ch; }
.foot-cta .btn-wa { color: #fff; }
.foot-grid { padding-block: 44px 34px; }
footer h4 { color: var(--on-deep-muted); font-weight: 500; letter-spacing: .14em; }
footer ul a { color: var(--on-deep); opacity: .82; transition: opacity .2s, color .2s; }
footer ul a:hover { opacity: 1; color: var(--marigold); }
.foot-brand p { color: var(--on-deep-muted); }
.foot-base { font-size: 13px; color: var(--on-deep-muted); }
.foot-base .legal { display: inline-flex; gap: 18px; }
.foot-base .legal a { color: var(--on-deep-muted); }
.foot-base .legal a:hover { color: var(--on-deep); }
.tm { color: color-mix(in srgb, var(--on-deep-muted) 75%, transparent); font-size: 12px; margin-top: 14px; }

/* ==========================================================================
   v12: one fluid surface. Sections blend into each other instead of
   switching between light and dark blocks; only the footer stays deep.
   ========================================================================== */
.alt, .how { background: linear-gradient(180deg, var(--bg), var(--surface-2) 140px, var(--surface-2) calc(100% - 140px), var(--bg)); }
.fit { background: transparent; border-block: 0; }
.contact { border-top: 0; }

/* ---------- Hero ---------- */
.hero-note { margin: 22px 0 0; font-size: 14px; color: var(--muted); letter-spacing: .005em; }
.hero-threads path { opacity: .2; }
.hero-threads path:nth-child(2) { opacity: .15; }
.hero-threads path:nth-child(3) { opacity: .11; }

/* ---------- How it works, in the page's own light ---------- */
.how { color: var(--ink); }
.how::before { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px); opacity: .5; -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.how .h2 { color: var(--ink-strong); }
.how .h2 .hl { color: var(--indigo); background-image: linear-gradient(var(--marigold), var(--marigold)); }
.how .lede, .how .lbl { color: var(--muted); }
.how .kicker { color: var(--marigold-ink); }
.how .seg { background: var(--surface); border-color: var(--line); }
.how .seg button { color: var(--muted); font-weight: 600; }
.how .seg button[aria-selected="true"] { background: var(--indigo); color: var(--on-indigo); }
.rail { background: var(--line-strong); height: 1.5px; }
.rail::after { background: linear-gradient(90deg, var(--indigo), var(--marigold)); }
.packet { width: 11px; height: 11px; top: -5px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--marigold) 20%, transparent); transition: left .7s var(--ease); }
.station { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 16px; transition: border-color .35s, background .35s, transform .5s var(--ease), box-shadow .35s; }
.station .num { background: var(--surface-2); color: var(--indigo); border-radius: 11px; }
.station .who { color: var(--muted); }
.station h3 { color: var(--ink-strong); font-size: 18px; }
.station p { color: var(--muted); }
.station .mini { background: var(--bg); border-color: var(--line); color: var(--muted); }
.station .mini b { color: var(--indigo); }
.station.on { border-color: var(--indigo); background: var(--surface); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.station.on .num { background: var(--indigo); color: var(--on-indigo); }
.station.done .num { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }
.journey-ctrl { color: var(--muted); }
.journey-ctrl button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.journey-ctrl button:hover { border-color: var(--line-strong); }
.same div { border-top: 1px solid var(--marigold); }
.same b { color: var(--ink-strong); }
.same span { color: var(--muted); }

/* ---------- Why we're different: each reason resolves as you read ---------- */
.diff { display: grid; gap: 10px; }
.d-row { display: grid; grid-template-columns: 44px minmax(120px, .5fr) minmax(0, 1fr) 64px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .3s, box-shadow .3s, opacity .7s var(--ease), transform .7s var(--ease); transition-delay: 0s, 0s, calc(var(--i) * 60ms), calc(var(--i) * 60ms); }
.d-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.d-num { font-family: var(--mono); font-size: 12px; color: var(--marigold-ink); letter-spacing: .06em; }
.d-topic { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-strong); }
.d-old, .d-new { margin: 0; font-size: 15px; line-height: 1.5; }
.d-tag { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.d-new .d-tag { color: var(--ok); }
.d-old .d-txt { color: var(--muted); background: linear-gradient(color-mix(in srgb, var(--muted) 70%, transparent), color-mix(in srgb, var(--muted) 70%, transparent)) 0 58% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .8s var(--ease) .35s, color .6s .35s; }
.d-new .d-txt { color: var(--ink-strong); font-weight: 500; }
.d-new { transition: opacity .7s var(--ease) 1.15s, transform .7s var(--ease) 1.15s; }
.d-link { position: relative; height: 1px; background: var(--line); }
.d-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--line-strong), var(--marigold)); transform-origin: left; transition: transform .6s var(--ease) .8s; }
.d-link::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--marigold); border-right: 0; }
.d-link i { position: absolute; top: -3.5px; left: calc(100% - 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marigold) 18%, transparent); opacity: 0; transition: left .9s var(--ease) .8s, opacity .3s .8s; }
.d-row.armed:not(.on) { opacity: .001; transform: translateY(18px); }
.d-row.armed:not(.on) .d-old .d-txt { background-size: 0% 1px; color: var(--ink); }
.d-row.armed:not(.on) .d-link::before { transform: scaleX(0); }
.d-row.armed:not(.on) .d-link i { left: 0; opacity: 1; }
.d-row.armed:not(.on) .d-new { opacity: .001; transform: translateX(-12px); }
.d-row.armed.on .d-link i { opacity: 0; transition: left .9s var(--ease) .8s, opacity .3s 1.6s; }
@media (max-width: 900px) {
  .d-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; padding: 18px; }
  .d-old, .d-new { grid-column: 2; }
  .d-link { display: none; }
  .d-new { padding-top: 8px; border-top: 1px dashed var(--line); }
}

/* ---------- Team: leadership cards, one row of people, a slim stats strip ---------- */
.founder { grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 18px; }
.founder .av { width: 76px; height: 76px; font-size: 23px; }
.f-body { display: grid; gap: 2px; min-width: 0; }
.founder ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.founder li { display: inline-block; font-size: 13px; line-height: 1.35; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.contact .team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; }
.contact .member { display: grid; grid-template-columns: none; grid-template-rows: none; justify-items: center; align-content: start; text-align: center; row-gap: 3px; padding: 18px 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s, transform .5s var(--ease); }
.contact .member:hover { background: var(--surface); border-color: var(--line-strong); transform: translateY(-2px); }
.contact .member .av { grid-row: auto; width: 46px; height: 46px; font-size: 14px; margin: 0 0 8px; background: var(--indigo-soft); color: var(--indigo); font-family: var(--display); font-weight: 700; }
.contact .member b { font-size: 14px; line-height: 1.3; }
.contact .member span:not(.av) { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.contact .member .tag { font-style: normal; margin-top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold-ink); border: 1px solid color-mix(in srgb, var(--marigold) 45%, transparent); border-radius: 4px; padding: 1px 6px; }
.contact .stats { gap: 0; margin-top: 4px; border-block: 1px solid var(--line); }
.contact .stat { background: none; border: 0; border-radius: 0; padding: 16px 18px; }
.contact .stat + .stat { border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .contact .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .contact .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder { grid-template-columns: 60px minmax(0, 1fr); } .founder .av { width: 60px; height: 60px; font-size: 19px; }
  .contact .stat:nth-child(3) { border-left: 0; } .contact .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Ask us ---------- */
.ask { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ask-side .lbl { display: block; margin: 24px 0 10px; }
.ask .topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ask .topic { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .25s, transform .4s var(--ease); }
.ask .topic:hover { border-color: var(--indigo); transform: translateY(-1px); }
.ask-wa { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-strong); font-weight: 500; font-size: 15px; }
.ask-wa svg { width: 18px; height: 18px; flex: none; }
.ask-wa svg:first-child { color: var(--wa); }
.ask-wa svg:last-child { margin-left: auto; color: var(--marigold); transition: transform .3s var(--ease); }
.ask-wa:hover svg:last-child { transform: translateX(4px); }
.ask .bot { border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 92px; }
.bot-head .avatar { background: linear-gradient(180deg, #365A60, #1D3135); color: #F1EEE6; }
.bot-head .avatar svg { width: 20px; height: 20px; }
.bot .msg.in { white-space: pre-line; }
.bot-form input { font-size: 15px; }
@media (max-width: 960px) { .ask { grid-template-columns: minmax(0, 1fr); } .ask .bot { position: static; } }
@media (max-width: 480px) { .ask .topics { grid-template-columns: minmax(0, 1fr); } }
.ask .topics { margin-top: 0; }

/* ---------- Hero: the record each WhatsApp flow creates, in sync with the tabs ---------- */
.float-chip { display: none; }
.rec-card { position: absolute; z-index: 3; top: -18px; right: 18px; width: 248px; display: grid; gap: 2px; padding: 12px 14px 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--marigold); border-radius: 12px; box-shadow: var(--shadow); pointer-events: none; }
.rec-card:empty { display: none; }
.rec-card.in { animation: recIn .7s var(--ease) both; }
@keyframes recIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rc-app { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rec-card b { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-strong); line-height: 1.3; }
.rc-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.rc-state { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.rc-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
@media (max-width: 1180px) { .rec-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .rec-card.in { animation: none; } }

/* ==========================================================================
   v13: a calmer dark mode (deep teal-charcoal, soft elevation, no browns),
   integrations as a spec sheet, and the About section rebuilt.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1618; --surface: #141E21; --surface-2: #182427; --ink: #DFE7E5; --ink-strong: #F5F8F7; --muted: #94A5A6;
    --line: #223033; --line-strong: #314347; --indigo: #A3C4C9; --indigo-2: #B7D3D7; --indigo-soft: #1A2C30;
    --marigold: #CDA672; --marigold-soft: #221E17; --marigold-ink: #D9B98A; --on-indigo: #0E1618;
    --deep: #0A1113; --deep-2: #111B1E; --deep-3: #213034; --chat-bg: #111B1E; --wa: #4FA984; --ok: #6CC09D;
    --shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 30px -22px rgba(0, 0, 0, .85);
  }
}
:root[data-theme="dark"] {
  --bg: #0E1618; --surface: #141E21; --surface-2: #182427; --ink: #DFE7E5; --ink-strong: #F5F8F7; --muted: #94A5A6;
  --line: #223033; --line-strong: #314347; --indigo: #A3C4C9; --indigo-2: #B7D3D7; --indigo-soft: #1A2C30;
  --marigold: #CDA672; --marigold-soft: #221E17; --marigold-ink: #D9B98A; --on-indigo: #0E1618;
  --deep: #0A1113; --deep-2: #111B1E; --deep-3: #213034; --chat-bg: #111B1E; --wa: #4FA984; --ok: #6CC09D;
  --shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 30px -22px rgba(0, 0, 0, .85);
}
:root[data-theme="dark"] body::after { opacity: .028; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { opacity: .028; } }
:root[data-theme="dark"] .hero::before { opacity: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { opacity: .3; } }
:root[data-theme="dark"] .btn-wa, :root[data-theme="dark"] .foot-cta .btn-wa { color: #08130E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-wa, :root:not([data-theme="light"]) .foot-cta .btn-wa { color: #08130E; } }
:root[data-theme="dark"] .rung .rec { background: color-mix(in srgb, var(--marigold) 16%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rung .rec { background: color-mix(in srgb, var(--marigold) 16%, transparent); } }
.dash-side i.on { color: var(--on-indigo); }

/* ---------- Security: two matching cards, the exit plan as a quiet card ---------- */
.own-card.yours, .own-card.ours { background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.own-card.yours::before, .own-card.ours::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; }
.own-card.yours::before { background: var(--marigold); }
.own-card.ours::before { background: var(--indigo); }
.own-card.yours li .ic { background: var(--marigold-soft); color: var(--marigold-ink); }
.leave { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.leave h3 { color: var(--ink-strong); }
.leave p, .leave li, .leave span { color: var(--muted); }
.leave b { color: var(--ink-strong); }

/* ---------- Integrations: a spec sheet, easy to scan ---------- */
.fit { padding-block: clamp(48px, 6vw, 72px); }
.fit-head { align-items: end; margin-bottom: 24px; }
.fit-l { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 40ch; justify-self: end; }
.intg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.intg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 22px 26px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.intg:nth-child(odd) { border-right: 1px solid var(--line); }
.intg:nth-last-child(-n+2) { border-bottom: 0; }
.intg:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.it-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); }
.it-ic svg { width: 19px; height: 19px; }
.it-head h3 { font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; color: var(--ink-strong); text-transform: none; }
.it-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.it-items { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14.5px; color: var(--ink); }
.it-items li { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; font-weight: 500; }
.it-items li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--marigold); margin: 0 10px; }
.made-for { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.made-for .lbl { margin: 0; }
.made-for .chiprow { gap: 6px; }
.made-for .tchip { background: transparent; border-color: var(--line); font-size: 13.5px; padding: 6px 11px; }
.made-for .small { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 860px) {
  .intg-grid { grid-template-columns: minmax(0, 1fr); }
  .intg:nth-child(odd) { border-right: 0; }
  .intg:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .fit-l { justify-self: start; }
}

/* ---------- About ---------- */
.ab-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px clamp(32px, 5vw, 72px); align-items: start; }
.ab-title .h2 { margin-top: 12px; max-width: 18ch; }
.ab-copy { display: grid; gap: 14px; padding-top: 30px; }
.ab-copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 60ch; }
.ab-copy p + p { color: var(--muted); }
.contact .stats { margin-top: clamp(26px, 3.4vw, 40px); }
.ab-block { margin-top: clamp(30px, 4vw, 48px); display: grid; gap: 12px; }
.ab-block > .lbl { display: flex; align-items: center; gap: 12px; }
.ab-block > .lbl::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.founder { display: grid; grid-template-columns: none; gap: 14px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.founder::before { height: 2px; background: linear-gradient(90deg, var(--indigo), var(--marigold)); opacity: .8; }
.f-id { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.founder .av { width: 64px; height: 64px; font-size: 21px; }
.founder b { margin: 0; font-size: 22px; }
.founder .role { display: block; margin-top: 3px; font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--indigo); font-weight: 600; }
.f-bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.founder ul { margin: 0; padding: 14px 0 0; }

.contact .team { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.contact .member { position: relative; padding: 16px 14px 18px; justify-items: start; text-align: left; row-gap: 2px; }
.contact .member .dept { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold-ink); margin-bottom: 12px; }
.contact .member .av { margin: 0 0 10px; }
.contact .member .rl { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.contact .member .tag { margin-top: 8px; }

.values { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 0; }
.value { background: var(--surface); border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 14px; padding: 18px; gap: 6px; }
.value svg { color: var(--marigold); }

.ct-band { margin-top: clamp(30px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 18px 32px; align-items: center; padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; position: relative; overflow: hidden; }
.ct-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--wa); opacity: .7; }
.ct-band-copy { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-band h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-strong); }
.ct-band p { margin: 4px 0 0; color: var(--muted); font-size: 15px; max-width: 54ch; }
.ct-band-act { display: grid; gap: 6px; justify-items: center; }
.ct-band .wa-topics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 16px; }
.ct-band .wa-topics .lbl { margin: 0 8px 0 0; }
.ct-band .wa-topics a { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 14px; gap: 8px; }
.ct-band .wa-topics a:hover { padding-left: 12px; border-color: var(--wa); background: color-mix(in srgb, var(--wa) 8%, transparent); }
@media (max-width: 1100px) { .contact .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ab-intro { grid-template-columns: minmax(0, 1fr); } .ab-copy { padding-top: 0; } .founders { grid-template-columns: minmax(0, 1fr); } .ct-band { grid-template-columns: minmax(0, 1fr); } .ct-band-act { justify-items: start; } }
@media (max-width: 560px) { .contact .team, .values { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   v14 theme: "Oxblood Ledger" (custom, theme-factory) for Yellowkey
   Named for the red cloth bahi-khata every Indian business has kept: deep
   oxblood as the ink of record, antique brass for the accent, warm cream
   paper in light mode, a wine-black study in dark mode. Fraunces is NOT
   used; Manrope + IBM Plex Sans stay for a modern, engineered feel.
   ========================================================================== */
:root {
  --bg: #F8F4EC; --surface: #FFFDF9; --surface-2: #F0E9DC;
  --ink: #241C1C; --ink-strong: #140E0E; --muted: #6B5F5B;
  --line: #E6DBCB; --line-strong: #D3C4AD;
  --indigo: #6B1E2E; --indigo-2: #521622; --indigo-soft: #F4E3E1;
  --marigold: #A8803F; --marigold-soft: #F4EAD6; --marigold-ink: #79581F;
  --on-indigo: #FFF8F0; --on-marigold: #1C1308;
  --deep: #1F1314; --deep-2: #2A191B; --deep-3: #432C2F;
  --on-deep: #F7F0E5; --on-deep-muted: #C4B3AA;
  --ok: #3A7A55; --warn: #B0402F; --chat-bg: #EFE6D8; --wa: #2A7A5C;
  --mark: linear-gradient(180deg, #7C2637, #4A1520);
  --glow: radial-gradient(60% 60% at 50% 40%, rgba(168, 128, 63, .16), transparent 70%);
  --shadow: 0 30px 60px -36px rgba(70, 20, 30, .38);
  --shadow-sm: 0 1px 2px rgba(70, 20, 30, .05), 0 14px 30px -22px rgba(70, 20, 30, .32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #110C0D; --surface: #1A1315; --surface-2: #221A1C; --ink: #EDE4D8; --ink-strong: #FFF8EE; --muted: #A99C95;
    --line: #2F2426; --line-strong: #46363A; --indigo: #E3A9A5; --indigo-2: #EDBFBB; --indigo-soft: #2B1A1D;
    --marigold: #D2B06F; --marigold-soft: #2A2214; --marigold-ink: #E2C789; --on-indigo: #1A0D0F;
    --deep: #0B0708; --deep-2: #150E10; --deep-3: #2A1D20; --on-deep: #F3EADF; --on-deep-muted: #B5A59D;
    --ok: #6CBF93; --warn: #EE9A86; --chat-bg: #170F11; --wa: #4FA984;
    --mark: linear-gradient(180deg, #8A2B3E, #531824);
    --glow: radial-gradient(60% 60% at 50% 40%, rgba(210, 176, 111, .12), transparent 70%);
    --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 1px 0 rgba(255, 240, 220, .03) inset, 0 14px 30px -22px rgba(0, 0, 0, .85);
  }
}
:root[data-theme="dark"] {
  --bg: #110C0D; --surface: #1A1315; --surface-2: #221A1C; --ink: #EDE4D8; --ink-strong: #FFF8EE; --muted: #A99C95;
  --line: #2F2426; --line-strong: #46363A; --indigo: #E3A9A5; --indigo-2: #EDBFBB; --indigo-soft: #2B1A1D;
  --marigold: #D2B06F; --marigold-soft: #2A2214; --marigold-ink: #E2C789; --on-indigo: #1A0D0F;
  --deep: #0B0708; --deep-2: #150E10; --deep-3: #2A1D20; --on-deep: #F3EADF; --on-deep-muted: #B5A59D;
  --ok: #6CBF93; --warn: #EE9A86; --chat-bg: #170F11; --wa: #4FA984;
  --mark: linear-gradient(180deg, #8A2B3E, #531824);
  --glow: radial-gradient(60% 60% at 50% 40%, rgba(210, 176, 111, .12), transparent 70%);
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); --shadow-sm: 0 1px 0 rgba(255, 240, 220, .03) inset, 0 14px 30px -22px rgba(0, 0, 0, .85);
  color-scheme: dark;
}

/* ---------- Mark, avatars and chat head follow the theme ---------- */
.brand-mark, :root[data-theme="dark"] .brand-mark, .foot-brand .brand-mark, .founder .av, .leader .av, .bot-head .avatar { background: var(--mark); color: #F8F1E4; box-shadow: inset 0 0 0 1px rgba(255, 235, 200, .14), 0 8px 16px -10px rgba(74, 21, 32, .7); }
.founder .av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px color-mix(in srgb, var(--marigold) 55%, transparent); }
.brand-mark svg { width: 21px; height: 21px; }
.bot-head { background: var(--deep); color: var(--on-deep); border-bottom: 1px solid var(--deep-3); }
.bot-head .avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.bot-head .live { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.ptable, .rec-card { border-color: var(--line); }
.rec-card { border-left-color: var(--marigold); }
.dash-side i.on { background: var(--indigo); color: var(--on-indigo); }
.hero::before { background: var(--glow); opacity: 1; }
.hero-threads path { stroke: var(--marigold); }
.hero-threads path.gold { stroke: var(--indigo); opacity: .5; }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.btn-primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.kicker { color: var(--marigold-ink); }
.h2 .hl, .how .h2 .hl, .contact .h2 .hl { color: var(--indigo); background-image: linear-gradient(var(--marigold), var(--marigold)); }
.wm .ai { color: var(--marigold-ink); border-color: color-mix(in srgb, var(--marigold) 55%, transparent); }

/* ---------- Ledger details: ruled paper, double rules, brass corner marks ---------- */
.hero { background-image: repeating-linear-gradient(180deg, transparent 0 39px, color-mix(in srgb, var(--line) 55%, transparent) 39px 40px); background-size: 100% 100%; }
.hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(14px, 4vw, 56px); width: 1px; background: color-mix(in srgb, var(--indigo) 38%, transparent); pointer-events: none; }
.sec-head .kicker, .ab-title .kicker { position: relative; }
section + section::before { content: ""; display: block; height: 4px; margin: 0 auto; width: min(1160px, calc(100% - 40px)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); position: absolute; left: 0; right: 0; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
section { position: relative; }
section.rule-in::before { transform: scaleX(1); }
.founder::before, .own-card.yours::before, .own-card.ours::before, .ct-band::before { background: linear-gradient(90deg, var(--indigo), var(--marigold)); opacity: 1; }

/* ---------- Hero headline: a clean wipe, line by line ---------- */
.hero h1 > span { display: inline-block; animation: wipe 1.1s var(--ease) both; }
.hero h1 > span:nth-child(1) { animation-delay: .1s; }
.hero h1 > span:nth-child(2) { animation-delay: .38s; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); transform: translateY(8px); opacity: .001; } to { clip-path: inset(-10% -2% -10% 0); transform: none; opacity: 1; } }
.hero .kicker, .hero .sub, .hero .ctas, .hero-note { animation: up .9s var(--ease) both; }
.hero .sub { animation-delay: .55s; } .hero .ctas { animation-delay: .7s; } .hero-note { animation-delay: .85s; }
.showcase { animation: up 1.1s .3s var(--ease) both; }

/* ---------- Cards: a brass hairline traces the edge on hover ---------- */
.intg, .station, .value, .member, .founder, .promise, .rung, .topic, .incl-row > div, .d-row { position: relative; }
.intg::after, .value::after, .member::after, .promise::after, .incl-row > div::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--marigold) 80%, transparent), transparent 45%, transparent 60%, color-mix(in srgb, var(--indigo) 60%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.intg:hover::after, .value:hover::after, .member:hover::after, .promise:hover::after, .incl-row > div:hover::after { opacity: 1; }

/* ---------- Integrations: tidy cards, monogram chips ---------- */
.intg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
.intg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), border-color .3s; }
.intg:nth-child(odd) { border-right: 1px solid var(--line); }
.intg:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.intg:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--surface); }
.it-ic { background: var(--indigo-soft); color: var(--indigo); }
.it-items { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.it-items li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.it-items li + li::before { display: none; }
.it-items i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: var(--on-indigo); font-family: var(--display); font-size: 11px; font-weight: 700; }
.it-items li:nth-child(3n+2) i { background: var(--marigold); color: var(--on-marigold); }
.it-items li:nth-child(3n) i { background: var(--ink-strong); color: var(--bg); }
@media (max-width: 1020px) { .intg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .intg-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Problems: cards that turn over on their own ---------- */
.flip .hint svg { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-24deg); } 90% { transform: rotate(14deg); } }
.flip:not([aria-pressed="true"]):hover .flip-inner { transform: rotateY(-9deg) translateY(-3px); }
.flip .flip-inner { transition: transform .9s var(--ease); }
.flip.peek .face.front { border-color: var(--marigold); }
.flip.peek::after { content: "Tap to keep it open"; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold); background: var(--deep); padding: 4px 10px; border-radius: 999px; z-index: 3; pointer-events: none; animation: up .5s var(--ease) both; white-space: nowrap; }
.flip { position: relative; }
.face.back { background: var(--deep); border: 1px solid var(--deep-3); }
.face.back .tag-fix { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.face.back .hint { color: var(--marigold); }

/* ---------- Floating assistant ---------- */
.fab { gap: 12px; }
.fab-btn { padding: 8px 20px 8px 8px; gap: 12px; background: var(--deep); color: var(--on-deep); font-weight: 600; font-size: 15px; letter-spacing: -.005em; border: 1px solid var(--deep-3); box-shadow: 0 18px 36px -14px rgba(20, 8, 10, .6); transition: transform .4s var(--ease), box-shadow .3s; }
.fab-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(20, 8, 10, .7); }
.fab-mark { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mark); color: #F8F1E4; }
.fab-mark svg { width: 20px; height: 20px; }
.fab-live { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--deep); }
.fab-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ok); opacity: 0; animation: beadpulse 2.8s ease-out infinite; }
.fab-btn svg { width: 20px; height: 20px; }
.fab-nudge { background: var(--surface); color: var(--ink-strong); border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; padding: 9px 14px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); animation: up .6s var(--ease) both; }
.fab-pop { width: min(392px, calc(100vw - 32px)); animation: popin .5s var(--ease) both; transform-origin: bottom right; }
@keyframes popin { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.fab-pop .bot { height: min(560px, calc(100vh - 150px)); border-radius: 20px; box-shadow: 0 30px 70px -24px rgba(20, 8, 10, .6); }
.sugg { gap: 6px; }
.sugg button { border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.sugg button:hover { border-color: var(--marigold); }
@media (max-width: 520px) { .fab-btn .fab-txt { display: none; } .fab-btn { padding: 8px; } }

/* ---------- Footer in the same ink ---------- */
.foot-cta { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--marigold) 14%, transparent), transparent 55%), var(--deep-2); }
.foot-cta .btn-wa { color: #08130E; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 > span, .hero .kicker, .hero .sub, .hero .ctas, .hero-note, .showcase, .flip .hint svg, .fab-live::after { animation: none; }
  section + section::before { transform: scaleX(1); transition: none; }
}
.hero { background-image: repeating-linear-gradient(180deg, transparent 0 39px, color-mix(in srgb, var(--line) 32%, transparent) 39px 40px); }

/* ==========================================================================
   v15 "Oxblood Ledger", refined. One calm canvas for the whole page: no band
   changes between sections, no grain, no ruled lines. Cards share one style
   (white on cream, hairline border); colour is used only for meaning.
   ========================================================================== */
:root {
  --bg: #FAF7F2; --surface: #FFFFFF; --surface-2: #F4EFE7;
  --ink: #26191B; --ink-strong: #150D0F; --muted: #6C5F5E;
  --line: #EAE2D6; --line-strong: #D8CCBA;
  --indigo: #5E1B2C; --indigo-2: #461421; --indigo-soft: #F6E8E6;
  --marigold: #A07A3A; --marigold-soft: #F5ECD9; --marigold-ink: #76561E;
  --on-indigo: #FFF9F1;
  --deep: #20141A; --deep-2: #2B1A1E; --deep-3: #432C32;
  --chat-bg: #F1EBE0;
  --mark: linear-gradient(180deg, #74243A, #461421);
  --glow: radial-gradient(55% 60% at 70% 30%, rgba(160, 122, 58, .12), transparent 70%);
  --radius: 16px;
  --shadow: 0 24px 50px -34px rgba(70, 20, 33, .35);
  --shadow-sm: 0 1px 2px rgba(70, 20, 33, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0B0C; --surface: #171011; --surface-2: #1E1517; --ink: #ECE3D7; --ink-strong: #FFF9F0; --muted: #A99B94;
    --line: #2A1F21; --line-strong: #3D2D30; --indigo: #E6B0AB; --indigo-2: #F0C7C3; --indigo-soft: #2A1A1C;
    --marigold: #D3B173; --marigold-soft: #27200F; --marigold-ink: #E3C88C; --on-indigo: #1B0E10;
    --deep: #0A0708; --deep-2: #130D0F; --deep-3: #261A1D; --chat-bg: #130D0F;
    --mark: linear-gradient(180deg, #8C2D40, #531825);
    --glow: radial-gradient(55% 60% at 70% 30%, rgba(211, 177, 115, .09), transparent 70%);
    --shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); --shadow-sm: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0F0B0C; --surface: #171011; --surface-2: #1E1517; --ink: #ECE3D7; --ink-strong: #FFF9F0; --muted: #A99B94;
  --line: #2A1F21; --line-strong: #3D2D30; --indigo: #E6B0AB; --indigo-2: #F0C7C3; --indigo-soft: #2A1A1C;
  --marigold: #D3B173; --marigold-soft: #27200F; --marigold-ink: #E3C88C; --on-indigo: #1B0E10;
  --deep: #0A0708; --deep-2: #130D0F; --deep-3: #261A1D; --chat-bg: #130D0F;
  --mark: linear-gradient(180deg, #8C2D40, #531825);
  --glow: radial-gradient(55% 60% at 70% 30%, rgba(211, 177, 115, .09), transparent 70%);
  --shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); --shadow-sm: none;
  color-scheme: dark;
}

/* ---------- Strip the earlier decoration ---------- */
body::after, .hero::after, section + section::before, .how::before, .contact::before, .spot::after { display: none !important; }
.hero { background-image: none !important; }
.hero::before { background: var(--glow); opacity: 1; }
.hero-threads path { opacity: .16; stroke: var(--marigold); }
.hero-threads path.gold { stroke: var(--indigo); opacity: .38; }

/* ---------- One canvas: every section sits on the page background ---------- */
.alt, .how, .about, .contact, .leads, .fit { background: none !important; border: 0 !important; color: var(--ink); }
section { padding-block: clamp(56px, 7vw, 92px); }
main > section + section { border-top: 1px solid var(--line) !important; }
.fit { padding-block: clamp(44px, 5vw, 64px); }
.how .h2, .contact .h2, .alt .h2 { color: var(--ink-strong); }
.how .lede, .contact .lede, .how .lbl, .contact .lbl { color: var(--muted); }
.how .kicker, .contact .kicker, .alt .kicker { color: var(--marigold-ink); }
.sec-head { margin-bottom: clamp(24px, 3vw, 38px); }
.kicker::before { background: var(--marigold); }

/* ---------- One card style ---------- */
.intg, .station, .value, .member, .founder, .promise, .rung, .topic, .incl-row > div, .d-row, .pcard, .own-card, .leave, .ct-band, .stat, .pk-detail, .bm-pair > *, .promises > * {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.intg::after, .value::after, .member::after, .promise::after, .incl-row > div::after { display: none; }
.intg:hover, .member:hover, .founder:hover, .d-row:hover, .rung:hover { border-color: var(--line-strong); transform: none; box-shadow: none; }
.own-card.yours, .own-card.ours { background: var(--surface); }
.own-card.yours::before { background: var(--marigold); }
.own-card.ours::before { background: var(--indigo); }
.founder::before, .ct-band::before { background: var(--marigold); opacity: .8; height: 2px; }

/* ---------- How it works, in the same light ---------- */
.how { padding-block: clamp(56px, 7vw, 92px); }
.station.on { border-color: var(--indigo); box-shadow: none; transform: translateY(-3px); }
.rail::after { background: var(--indigo); }
.packet { background: var(--marigold); }
.same div { border-top: 1px solid var(--line-strong); }

/* ---------- Why we're different: a calm ledger of five rows ---------- */
.diff { gap: 8px; }
.d-row { padding: 20px 24px; }
.d-link::before { background: linear-gradient(90deg, var(--line-strong), var(--marigold)); }

/* ---------- Integrations: logo tiles ---------- */
.intg { transition: border-color .3s; }
.it-items li { background: var(--surface-2); border-color: var(--line); padding: 4px 12px 4px 4px; }
.lg { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent); display: grid; place-items: center; overflow: hidden; }
.lg b { font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--indigo); }
.lg img { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: #fff; box-sizing: content-box; padding: 4px; }
.it-items i { display: none; }

/* ---------- Problems and fixes: the fix slides up over the problem ---------- */
.flip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pcard { position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; min-height: 330px; transition: border-color .3s; }
.pc-front { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 6px; }
.pc-front .vis { flex: 1 1 auto; min-height: 104px; height: auto; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.pc-front q { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink-strong); quotes: "“" "”"; }
.pc-front .who { font-size: 13px; color: var(--muted); }
.pc-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 18px 16px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink-strong); font-weight: 600; font-size: 14px; text-align: left; transition: border-color .25s, background .25s; }
.pc-btn:hover { border-color: var(--indigo); }
.pc-plus { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); flex: none; }
.pc-plus::before, .pc-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; background: var(--on-indigo); transform: translate(-50%, -50%); border-radius: 2px; }
.pc-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.pcard:not(.open):not(:hover) .pc-plus { animation: plusbeat 3.2s ease-in-out infinite; }
@keyframes plusbeat { 0%, 78%, 100% { box-shadow: 0 0 0 0 transparent; } 88% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--indigo) 22%, transparent); } }
.pc-fix { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; background: var(--deep); color: var(--on-deep); clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
.pcard.open .pc-fix { clip-path: inset(0 0 0 0); }
.pc-fix > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.pcard.open .pc-fix > * { opacity: 1; transform: none; transition-delay: .25s; }
.pcard.open .pc-fix > :nth-child(3) { transition-delay: .32s; } .pcard.open .pc-fix > :nth-child(4) { transition-delay: .4s; }
.pc-fix h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.015em; color: var(--on-deep); }
.pc-fix p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--on-deep-muted); }
.pc-fix .tag-fix { background: color-mix(in srgb, var(--ok) 22%, transparent); color: #8FD3AE; }
.pc-fix .measure { margin-top: auto; font-size: 12.5px; color: var(--on-deep-muted); padding-top: 12px; border-top: 1px solid var(--deep-3); }
.pc-fix .measure b { color: var(--marigold); }
.pc-back { align-self: flex-start; border: 1px solid var(--deep-3); background: transparent; color: var(--on-deep); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.pc-back:hover { border-color: var(--marigold); }
.pcard.peek { border-color: var(--marigold); }
@media (max-width: 960px) { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .flip-grid { grid-template-columns: minmax(0, 1fr); } .pcard { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .pc-fix, .pc-fix > * { transition: none; } .pcard:not(.open) .pc-plus { animation: none; } }

/* ---------- About: founders first, one rhythm ---------- */
.ab-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.ab-title .h2 { max-width: 16ch; }
.ab-copy { padding-top: 34px; gap: 16px; }
.ab-copy p { font-size: 16.5px; line-height: 1.7; }
.ab-copy p.ab-name { margin-top: 4px; padding: 12px 0 0 16px; border-left: 2px solid var(--marigold); font-size: 14.5px; color: var(--muted); font-style: normal; }
.contact .stats { margin-top: clamp(26px, 3vw, 36px); border-block: 0; gap: 14px; }
.contact .stat { padding: 18px 20px; border-left: 1px solid var(--line); }
.contact .stat + .stat { border-left: 1px solid var(--line); }
.stat b { color: var(--indigo); }
.founders { gap: 16px; }
.founder { padding: 28px; gap: 16px; }
.f-id { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; }
.founder .av { width: 68px; height: 68px; font-size: 22px; }
.founder b { font-size: 24px; }
.founder .role { font-size: 14px; color: var(--marigold-ink); }
.f-bio { font-size: 15.5px; color: var(--ink); line-height: 1.65; }
.founder ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.founder li { background: none; border: 0; border-radius: 0; padding: 0 0 0 16px; position: relative; font-size: 14.5px; color: var(--ink); }
.founder li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--marigold); }
.contact .team { gap: 12px; }
.contact .member { padding: 18px 16px 20px; }
.contact .member .dept { margin-bottom: 14px; }
.contact .member:first-child { border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); }
.ab-block { margin-top: clamp(32px, 4vw, 52px); }
.value { padding: 20px; }
.ct-band { background: var(--surface); }
.ct-band::before { background: var(--wa); opacity: 1; }
@media (max-width: 720px) { .founder ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Header, chat and footer ---------- */
header.top.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--line); }
.fab-btn { background: var(--indigo); color: var(--on-indigo); border: 0; }
.fab-live { border-color: var(--indigo); }
.fab-mark { background: color-mix(in srgb, #000 22%, var(--indigo)); }
:root[data-theme="dark"] .fab-mark { background: var(--mark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fab-mark { background: var(--mark); } }
.foot-cta { background: var(--deep-2); border-color: var(--deep-3); }
:root[data-theme="light"] footer, footer { background: var(--deep); }
.hero h1 .mark { color: var(--indigo); }

/* ==========================================================================
   v16 "Copper & Graphite" for R&K Labs
   A cooler, lab-like palette: graphite-blue ink and cool paper, with one
   copper accent. Higher contrast throughout so every label is easy to read.
   A slow ambient light sits behind the page to keep it calm and alive.
   ========================================================================== */
:root {
  --bg: #F5F6F7; --surface: #FFFFFF; --surface-2: #EBEEF1;
  --ink: #18202A; --ink-strong: #0B1118; --muted: #4F5C6B;
  --line: #DCE2E8; --line-strong: #BFC8D3;
  --indigo: #1B2B3F; --indigo-2: #101C2C; --indigo-soft: #E2EAF3;
  --marigold: #B4682B; --marigold-soft: #F8EADC; --marigold-ink: #8A4712;
  --on-indigo: #FFFFFF; --on-marigold: #1C0F05;
  --deep: #0F1722; --deep-2: #172231; --deep-3: #263449;
  --on-deep: #EEF2F6; --on-deep-muted: #AAB7C7;
  --ok: #1D7753; --warn: #B03E29; --chat-bg: #E7ECF1; --wa: #1E7A57;
  --mark: linear-gradient(180deg, #2E4768, #101B2A);
  --glow: radial-gradient(55% 60% at 72% 28%, rgba(180, 104, 43, .12), transparent 70%);
  --shadow: 0 26px 54px -34px rgba(16, 28, 44, .35);
  --shadow-sm: 0 1px 2px rgba(16, 28, 44, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1016; --surface: #121A23; --surface-2: #18222E; --ink: #E7ECF1; --ink-strong: #FFFFFF; --muted: #A2B0BF;
    --line: #223041; --line-strong: #34475C; --indigo: #9DC0E4; --indigo-2: #B8D3EE; --indigo-soft: #172536;
    --marigold: #E0905A; --marigold-soft: #2B1D12; --marigold-ink: #F2AB7B; --on-indigo: #0B1016;
    --deep: #070B10; --deep-2: #0E151D; --deep-3: #1D2A38; --on-deep: #EEF2F6; --on-deep-muted: #A9B7C7;
    --ok: #6CC49C; --warn: #F0937E; --chat-bg: #0E151D; --wa: #4FA984;
    --mark: linear-gradient(180deg, #38577F, #14233A);
    --glow: radial-gradient(55% 60% at 72% 28%, rgba(224, 144, 90, .10), transparent 70%);
    --shadow: 0 26px 54px -30px rgba(0, 0, 0, .85); --shadow-sm: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1016; --surface: #121A23; --surface-2: #18222E; --ink: #E7ECF1; --ink-strong: #FFFFFF; --muted: #A2B0BF;
  --line: #223041; --line-strong: #34475C; --indigo: #9DC0E4; --indigo-2: #B8D3EE; --indigo-soft: #172536;
  --marigold: #E0905A; --marigold-soft: #2B1D12; --marigold-ink: #F2AB7B; --on-indigo: #0B1016;
  --deep: #070B10; --deep-2: #0E151D; --deep-3: #1D2A38; --on-deep: #EEF2F6; --on-deep-muted: #A9B7C7;
  --ok: #6CC49C; --warn: #F0937E; --chat-bg: #0E151D; --wa: #4FA984;
  --mark: linear-gradient(180deg, #38577F, #14233A);
  --glow: radial-gradient(55% 60% at 72% 28%, rgba(224, 144, 90, .10), transparent 70%);
  --shadow: 0 26px 54px -30px rgba(0, 0, 0, .85); --shadow-sm: none;
  color-scheme: dark;
}

/* ---------- Wordmark and logo ---------- */
.wm { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.wm .amp { color: var(--marigold); font-weight: 600; margin: 0 .5px; }
.wm .ai { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); border: 0; padding: 0; align-self: center; }
footer .wm .ai { color: var(--on-deep-muted); }
.brand { font-size: 21px; }
.brand-mark, :root[data-theme="dark"] .brand-mark, .foot-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--mark); color: #F6F1E8; box-shadow: inset 0 0 0 1px rgba(224, 144, 90, .45), 0 8px 18px -10px rgba(16, 28, 44, .7); }
.brand-mark svg { width: 24px; height: 24px; }
.foot-brand .brand { font-size: 24px; }
.foot-brand .brand-mark { width: 40px; height: 40px; }

/* ---------- Visibility: stronger labels and small text ---------- */
.kicker { color: var(--marigold-ink); font-weight: 700; font-size: 12px; letter-spacing: .14em; }
.lbl, .who, .small, .hero-note, .dash-greet span, .rc-sub { color: var(--muted); }
.how .lbl, .contact .lbl { color: var(--muted); }
.d-tag, .rc-app, .it-head p { color: var(--muted); }
.h2 .hl, .how .h2 .hl, .contact .h2 .hl { color: var(--indigo); }
:root[data-theme="dark"] .h2 .hl { color: var(--indigo); }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.btn-primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }

/* ---------- Ambient light: slow, calm, behind everything ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transform: translate(var(--px, 0px), var(--py, 0px)); }
.ambient i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.ambient i:nth-child(1) { width: 58vmax; height: 58vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, rgba(93, 140, 196, .34), transparent 66%); animation: driftA 52s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { width: 46vmax; height: 46vmax; right: -16vmax; top: 6vh; background: radial-gradient(circle, rgba(224, 144, 90, .26), transparent 66%); animation: driftB 60s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { width: 52vmax; height: 52vmax; left: 22vw; bottom: -34vmax; background: radial-gradient(circle, rgba(93, 140, 196, .22), transparent 66%); animation: driftC 68s ease-in-out infinite alternate; }
:root[data-theme="dark"] .ambient i:nth-child(1) { background: radial-gradient(circle, rgba(61, 104, 158, .42), transparent 66%); }
:root[data-theme="dark"] .ambient i:nth-child(2) { background: radial-gradient(circle, rgba(224, 144, 90, .20), transparent 66%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient i:nth-child(1) { background: radial-gradient(circle, rgba(61, 104, 158, .42), transparent 66%); }
  :root:not([data-theme="light"]) .ambient i:nth-child(2) { background: radial-gradient(circle, rgba(224, 144, 90, .20), transparent 66%); }
}
@keyframes driftA { to { transform: translate(14vmax, 10vmax) scale(1.18); } }
@keyframes driftB { to { transform: translate(-12vmax, 16vmax) scale(.9); } }
@keyframes driftC { to { transform: translate(-16vmax, -8vmax) scale(1.12); } }
main, footer { position: relative; z-index: 1; }
.hero::before { background: var(--glow); }

/* ---------- Opening: the mark draws itself once per visit ---------- */
.splash { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--bg); pointer-events: none; animation: splashOut .7s 1.75s var(--ease) forwards; }
.sp-logo { width: 92px; height: 92px; overflow: visible; }
.sp-badge { fill: #14233A; fill-opacity: 0; stroke: var(--marigold); stroke-width: 1.2; stroke-dasharray: 250; stroke-dashoffset: 250; animation: spDraw 1.1s .1s var(--ease) forwards, spFill .6s 1s ease forwards; }
.sp-glyph path { fill: none; stroke: #F6F1E8; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: spDraw .9s .7s var(--ease) forwards; }
.sp-glyph path:nth-child(1) { stroke-dasharray: 160; stroke-dashoffset: 160; }
.sp-dot { fill: #E0905A; opacity: 0; animation: spFade .4s 1.45s forwards; }
.sp-wm { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -.02em; color: var(--ink-strong); opacity: 0; transform: translateY(8px); animation: spUp .7s 1.15s var(--ease) forwards; }
.sp-wm i { font-style: normal; color: var(--marigold); font-weight: 600; }
@keyframes spDraw { to { stroke-dashoffset: 0; } }
@keyframes spFill { to { fill-opacity: 1; } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spUp { to { opacity: 1; transform: none; } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } .ambient i { animation: none; } }

/* ---------- About: a plain, scannable layout ---------- */
.ab-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ab-lead .h2 { max-width: 18ch; margin-top: 12px; }
.ab-p { margin: 18px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 62ch; }
.ab-p2 { color: var(--muted); }
.ab-name { margin: 22px 0 0; padding-left: 16px; border-left: 2px solid var(--marigold); font-size: 14.5px; color: var(--muted); }
.glance { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 0 4px; position: sticky; top: 96px; }
.glance > .lbl { display: block; padding: 0 24px 12px; }
.contact .glance .stats { display: block; margin: 0; border: 0; gap: 0; }
.contact .glance .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 24px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.glance .stat b { font-size: 34px; }
.glance .stat span { text-align: right; max-width: 17ch; font-size: 13.5px; color: var(--muted); }
.ab-block { margin-top: clamp(36px, 4.5vw, 56px); }

.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.founder ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.founder li { position: static; padding: 0; font-size: 14px; color: var(--muted); background: none; border: 0; }
.founder li::before { display: none; }
.founder li + li::before { display: inline-block; content: ""; position: static; width: 3px; height: 3px; border-radius: 50%; background: var(--marigold); margin: 0 10px; vertical-align: middle; }

.contact .team { display: block; padding: 0; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.contact .member { display: grid; grid-template-columns: 44px minmax(140px, .9fr) minmax(0, 1.5fr) auto; align-items: center; justify-items: start; text-align: left; gap: 6px 18px; padding: 14px 22px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none; }
.contact .member:first-child { border-top: 0; background: color-mix(in srgb, var(--marigold-soft) 60%, transparent); }
.contact .member:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); transform: none; }
.contact .member:first-child:hover { background: color-mix(in srgb, var(--marigold-soft) 80%, transparent); }
.contact .member .av { width: 40px; height: 40px; margin: 0; font-size: 13px; }
.contact .member b { font-size: 15.5px; color: var(--ink-strong); }
.contact .member .rl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.contact .member .dept { margin: 0; justify-self: end; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold-ink); }
.contact .member .tag { margin: 0; }
@media (max-width: 720px) {
  .contact .member { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; }
  .contact .member .rl, .contact .member .dept { grid-column: 2; justify-self: start; }
}

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; }
.value { display: grid; gap: 6px; align-content: start; background: none; border: 0; border-top: 2px solid var(--marigold); border-radius: 0; box-shadow: none; padding: 16px 0 0; }
.value .vn { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--marigold-ink); }
.value b { font-size: 17px; color: var(--ink-strong); }
.value span:not(.vn) { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 1020px) { .ab-top { grid-template-columns: minmax(0, 1fr); } .glance { position: static; } .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .founders { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .values { grid-template-columns: minmax(0, 1fr); } }
.glance .stat b { white-space: nowrap; }
.glance .stat span { max-width: 24ch; }
.contact .member .rl { justify-self: start; }
.contact .glance .stat b { flex: none; white-space: nowrap; }
.contact .glance .stat span { flex: 1; max-width: none; text-align: right; }
.contact .glance { display: block; width: 100%; }
.contact .glance .stats { width: 100%; max-width: none; padding: 0; }





/* ==========================================================================
   Yellowkeys "Graphite, Stone & Champagne" (custom, theme-factory)
   Researched direction: a low-saturation base (warm grey, graphite, off-white)
   with one restrained metallic accent, roughly 60 / 30 / 10. Calm, credible,
   enterprise. Champagne is the "yellow" of the brand, used like a hallmark.
   Playfair Display (headlines, wordmark) + Lato (reading) + Red Hat Mono.
   ========================================================================== */
:root {
  --serif: "Playfair Display", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --display: "Lato", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, sans-serif;
  --body: "Lato", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Red Hat Mono", ui-monospace, Consolas, monospace;
  --bg: #F4F2EE; --surface: #FBFAF7; --surface-2: #EAE7E0;
  --ink: #23262B; --ink-strong: #14161A; --muted: #5F636B;
  --line: #DEDAD1; --line-strong: #C7C2B5;
  --indigo: #2A2E35; --indigo-2: #181B20; --indigo-soft: #E7E5E0;
  --marigold: #B59A55; --marigold-soft: #F1EAD6; --marigold-ink: #7D6724;
  --on-indigo: #F4F2EE; --on-marigold: #1A1608;
  --deep: #16181C; --deep-2: #1E2126; --deep-3: #31353C;
  --on-deep: #EDEBE6; --on-deep-muted: #A5A7AB;
  --chat-bg: #EAE7E0;
  --slate: #66798A;
  --mark: linear-gradient(180deg, #34383F, #14161A);
  --glow: radial-gradient(55% 60% at 72% 28%, rgba(181, 154, 85, .13), transparent 70%);
  --r: 18px; --radius: 18px;
  --shadow: 0 28px 56px -38px rgba(20, 22, 26, .38);
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --surface: #1A1D21; --surface-2: #21252A; --ink: #E8E6E1; --ink-strong: #FAF8F3; --muted: #9A9DA4;
    --line: #292D33; --line-strong: #3B4047; --indigo: #DCC98F; --indigo-2: #EBDDB0; --indigo-soft: #22252A;
    --marigold: #C9AE6A; --marigold-soft: #272317; --marigold-ink: #D9C48A; --on-indigo: #14161A;
    --deep: #0D0F12; --deep-2: #14171B; --deep-3: #24282E; --on-deep: #EDEBE6; --on-deep-muted: #9FA2A8;
    --chat-bg: #14171B; --slate: #8FA3B3;
    --mark: linear-gradient(180deg, #2B2F36, #121417);
    --glow: radial-gradient(55% 60% at 72% 28%, rgba(201, 174, 106, .09), transparent 70%);
    --shadow: 0 28px 56px -34px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #121417; --surface: #1A1D21; --surface-2: #21252A; --ink: #E8E6E1; --ink-strong: #FAF8F3; --muted: #9A9DA4;
  --line: #292D33; --line-strong: #3B4047; --indigo: #DCC98F; --indigo-2: #EBDDB0; --indigo-soft: #22252A;
  --marigold: #C9AE6A; --marigold-soft: #272317; --marigold-ink: #D9C48A; --on-indigo: #14161A;
  --deep: #0D0F12; --deep-2: #14171B; --deep-3: #24282E; --on-deep: #EDEBE6; --on-deep-muted: #9FA2A8;
  --chat-bg: #14171B; --slate: #8FA3B3;
  --mark: linear-gradient(180deg, #2B2F36, #121417);
  --glow: radial-gradient(55% 60% at 72% 28%, rgba(201, 174, 106, .09), transparent 70%);
  --shadow: 0 28px 56px -34px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
.progress { display: none !important; }

/* ---------- Type ---------- */
body { font-size: 16.5px; font-weight: 400; }
h1, h2, h3.h3, .h2, .foot-tag, .stat b, .v-big, .kpi b, .dash-greet b, .pc-front q, .founder b, .wm, .foot-giant span, .ul-txt, .pillar h3, .ab-wm, .sp-wm { font-family: var(--serif); font-variant-numeric: lining-nums; }
b, strong { font-weight: 700; }
.hero h1 { font-weight: 500; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(44px, 5.4vw, 80px); }
.h2 { font-weight: 500; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(34px, 4vw, 56px); max-width: 20ch; }
.h3, .foot-tag { font-weight: 500; letter-spacing: -.012em; }
.foot-tag { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.pc-front q { font-weight: 500; letter-spacing: -.005em; font-size: 20px; line-height: 1.28; }
.stat b, .v-big { font-weight: 500; letter-spacing: -.01em; }
.founder b { font-weight: 500; font-size: 26px; letter-spacing: -.005em; }
.kpi b { font-size: 22px; font-weight: 500; }
.dash-greet b { font-size: 18px; font-weight: 500; }
.hero h1 .mark { font-style: italic; color: var(--marigold-ink); font-weight: 400; }
.hero h1 .mark::after { height: 1.5px; bottom: .1em; opacity: .75; background: var(--marigold); transform: none; border-radius: 2px; z-index: 0; }
.h2 .hl, .how .h2 .hl, .contact .h2 .hl { color: var(--ink-strong); font-style: italic; font-weight: 400; background-image: linear-gradient(var(--marigold), var(--marigold)); background-size: 100% 1.5px; background-position: 0 96%; background-repeat: no-repeat; padding-bottom: .04em; }
.kicker { font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--marigold-ink); letter-spacing: .16em; }
.kicker::before { width: 22px; height: 1px; border-radius: 0; background: var(--marigold); box-shadow: none; }
.lbl, .tag-pain, .tag-fix, .rc-app, .d-tag, .dept { font-family: var(--mono); }
.lede { font-size: 18px; color: var(--muted); }

/* ---------- Surfaces: calm, flat, hairline ---------- */
.intg, .station, .value, .member, .founder, .promise, .rung, .topic, .incl-row > div, .d-row, .pcard, .own-card, .leave, .ct-band, .stat, .pk-detail, .cmp, .contact .team {
  border-radius: 18px; background: var(--surface); border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.contact .member { border-radius: 0; background: none; }
.btn { border-radius: 12px; }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); font-weight: 700; letter-spacing: .01em; box-shadow: none; }
.btn-primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.sol-tabs, .seg, .filters button, .sol-tabs button, .seg button, nav.links a { border-radius: 12px; }
.nav-ind { background: var(--marigold); height: 1.5px; border-radius: 2px; }
.rung[aria-selected="true"], .station.on { border-color: var(--indigo); }
:root[data-theme="dark"] .rung[aria-selected="true"], :root[data-theme="dark"] .station.on { border-color: var(--marigold); }
.stat b, .d-num, .value .vn { color: var(--marigold-ink); }
.contact .member:first-child { background: color-mix(in srgb, var(--marigold-soft) 55%, transparent); }
.founder::before, .ct-band::before { background: linear-gradient(90deg, transparent, var(--marigold), transparent); height: 1px; opacity: .9; }
.pc-fix { background: var(--deep); }
.pc-fix h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.sol-tabs button[aria-selected="true"] { background: var(--indigo); color: var(--on-indigo); }
.hero-threads path { stroke: var(--marigold); opacity: .26; }
.hero-threads path.gold { stroke: var(--slate); opacity: .2; }
.hero::before { background: var(--glow); }
.showcase .stage { filter: drop-shadow(0 36px 44px rgba(20, 22, 26, .2)); }
.lede, p { text-wrap: pretty; }

/* ---------- Brand: a seal, a key in a ring whose arms form a Y ---------- */
.brand-mark, :root[data-theme="dark"] .brand-mark, .foot-brand .brand-mark { background: var(--mark); color: #D9C48A; border-radius: 50%; width: 36px; height: 36px; box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .55), inset 0 0 0 4px rgba(20, 22, 26, .9), inset 0 0 0 5px rgba(217, 196, 138, .22), 0 8px 18px -10px rgba(20, 22, 26, .8); }
.brand-mark svg { width: 24px; height: 24px; }
.founder .av, .leader .av, .bot-head .avatar, .fab-mark { color: #D9C48A; background: var(--mark); }
.wm { font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; font-size: 1.12em; line-height: 1; }
.wm b { font-weight: 400; font-style: italic; color: var(--marigold-ink); }
.wm .ai { font-family: var(--mono); font-weight: 400; font-size: 10.5px; font-style: normal; letter-spacing: 0; color: var(--muted); margin-left: 3px; text-transform: none; }
.brand { font-size: 22px; }
@media (max-width: 440px) { header .wm .ai { display: none; } }

/* ---------- Ambient light: stone and champagne ---------- */
.ambient i:nth-child(1) { background: radial-gradient(circle, rgba(102, 121, 138, .16), transparent 66%) !important; }
.ambient i:nth-child(2) { background: radial-gradient(circle, rgba(181, 154, 85, .18), transparent 66%) !important; }
.ambient i:nth-child(3) { background: radial-gradient(circle, rgba(102, 121, 138, .11), transparent 66%) !important; }
:root[data-theme="dark"] .ambient i:nth-child(1) { background: radial-gradient(circle, rgba(110, 132, 152, .16), transparent 66%) !important; }
:root[data-theme="dark"] .ambient i:nth-child(2) { background: radial-gradient(circle, rgba(201, 174, 106, .09), transparent 66%) !important; }
:root[data-theme="dark"] .ambient i:nth-child(3) { background: radial-gradient(circle, rgba(110, 132, 152, .10), transparent 66%) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient i:nth-child(1) { background: radial-gradient(circle, rgba(110, 132, 152, .16), transparent 66%) !important; }
  :root:not([data-theme="light"]) .ambient i:nth-child(2) { background: radial-gradient(circle, rgba(201, 174, 106, .09), transparent 66%) !important; }
  :root:not([data-theme="light"]) .ambient i:nth-child(3) { background: radial-gradient(circle, rgba(110, 132, 152, .10), transparent 66%) !important; }
}

/* ---------- Motion language: soft focus-in, line-masked headlines, quiet parallax ---------- */
@keyframes up { from { opacity: .001; transform: translateY(24px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes wipe { from { clip-path: inset(0 0 105% 0); transform: translateY(40%); opacity: .001; } to { clip-path: inset(-12% -3% -12% -3%); transform: none; opacity: 1; } }
.hero h1 > span { animation: wipe 1.15s cubic-bezier(.2, .75, .2, 1) both; }
.hero h1 > span:nth-child(1) { animation-delay: .15s; } .hero h1 > span:nth-child(2) { animation-delay: .42s; }
.showcase { transform: translate3d(0, calc(var(--sy, 0) * -.05px), 0); }
.pre-head.in > div > *, .pre-stagger.in > *, .pre-block.in { animation-duration: .95s; }
a, button { transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.pcard:hover, .intg:hover, .founder:hover { border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); }

/* ---------- Side scroller: a slim key blade ---------- */
.thread { left: max(16px, calc((100vw - 1200px) / 2 - 76px)); top: 20vh; bottom: 20vh; width: 54px; }
.thread-track { left: 6px; width: 5px; border-radius: 5px; background: color-mix(in srgb, var(--line-strong) 65%, transparent); box-shadow: none; }
.thread-fill { left: 6px; width: 5px; border-radius: 5px; background: linear-gradient(var(--slate), var(--marigold)); }
.thread-bead { left: 8.5px; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--marigold); box-shadow: 0 6px 14px -4px rgba(20, 22, 26, .4); transform: rotate(calc(var(--p, 0) * 720deg)); }
.thread-bead::before { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--marigold); }
.thread-bead::after { inset: -7px; border: 1px solid var(--marigold); }
.thread a { height: 20px; gap: 12px; }
.thread a i { width: 8px; height: 2px; margin-left: 14px; border: 0; border-radius: 2px; background: var(--line-strong); transition: width .35s var(--ease), background .3s; transform: none; }
.thread li:nth-child(odd) a i { width: 11px; }
.thread a.past i { background: var(--slate); width: 14px; }
.thread a.on i { width: 22px; background: var(--marigold); transform: none; }
.thread a span { font-size: 10.5px; padding: 3px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 18px -10px rgba(20, 22, 26, .3); opacity: 0; transform: translateX(-6px); }
.thread:hover a span, .thread a:focus-visible span { opacity: 1; transform: none; }
.thread a.on span { color: var(--ink-strong); border-color: color-mix(in srgb, var(--marigold) 60%, var(--line)); }
@media (min-width: 1620px) { .thread a.on span { opacity: 1; transform: none; } }

/* ---------- Loader: graphite doors, the seal draws itself, the doors part ---------- */
.splash { position: fixed; inset: 0; z-index: 300; display: block; background: none; pointer-events: none; clip-path: none; animation: spHide 0s 3.05s forwards; }
.sp-l, .sp-r { position: absolute; top: 0; bottom: 0; width: 50.2%; background: linear-gradient(180deg, #1B1E23, #121417); animation-duration: .95s; animation-delay: 2.1s; animation-timing-function: cubic-bezier(.76, 0, .2, 1); animation-fill-mode: forwards; }
.sp-l { left: 0; border-right: 1px solid rgba(217, 196, 138, .25); animation-name: doorL; }
.sp-r { right: 0; border-left: 1px solid rgba(217, 196, 138, .25); animation-name: doorR; }
.sp-core { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 18px; animation: coreOut .5s 2s ease forwards; }
.sp-logo { width: 116px; height: 116px; overflow: visible; color: #D9C48A; }
.sp-logo * { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.sp-ring { stroke-width: 1; stroke-dasharray: 190; stroke-dashoffset: 190; animation: spDraw 1.1s .1s cubic-bezier(.5, 0, .2, 1) forwards; }
.sp-ring2 { stroke-width: .6; stroke-opacity: .5; stroke-dasharray: 167; stroke-dashoffset: 167; animation: spDraw 1.1s .3s cubic-bezier(.5, 0, .2, 1) forwards; }
.sp-emb * { stroke-width: 2.6; }
.sp-bow { stroke-dasharray: 66; stroke-dashoffset: 66; animation: spDraw .7s .7s cubic-bezier(.5, 0, .2, 1) forwards; }
.sp-v { stroke-dasharray: 40; stroke-dashoffset: 40; animation: spDraw .5s 1.1s cubic-bezier(.5, 0, .2, 1) forwards; }
.sp-bl { stroke-dasharray: 20; stroke-dashoffset: 20; animation: spDraw .4s 1.4s cubic-bezier(.5, 0, .2, 1) forwards; }
.sp-t1, .sp-t2 { stroke-dasharray: 7; stroke-dashoffset: 7; animation: spDraw .25s 1.7s ease forwards; }
.sp-wm { display: block; overflow: hidden; padding: 4px 6px; font-size: 36px; font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; color: #F2EFE8; }
.sp-wm > span { display: block; transform: translateY(110%); animation: spRise .8s 1.35s cubic-bezier(.2, .75, .2, 1) forwards; }
.sp-wm i { color: #D9C48A; font-style: italic; font-weight: 400; }
.sp-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: #8F939A; opacity: 0; animation: spFade .8s 1.75s ease forwards; }
.sp-bar { position: absolute; left: 50%; bottom: 14vh; z-index: 2; width: 120px; height: 1px; margin-left: -60px; background: rgba(217, 196, 138, .2); overflow: hidden; animation: coreOut .4s 2s ease forwards; }
.sp-bar i { display: block; height: 100%; background: #D9C48A; transform: scaleX(0); transform-origin: left; animation: spBar 1.9s .1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes spDraw { to { stroke-dashoffset: 0; } }
@keyframes spRise { to { transform: none; } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spBar { to { transform: scaleX(1); } }
@keyframes coreOut { to { opacity: 0; transform: scale(.94); } }
@keyframes doorL { to { transform: translateX(-101%); } }
@keyframes doorR { to { transform: translateX(101%); } }
@keyframes spHide { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }

/* ---------- The break before the footer: the emblem turns upright ---------- */
.unlock { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 90px); padding: clamp(40px, 6vw, 70px) 0 clamp(70px, 9vw, 120px); background: linear-gradient(180deg, transparent, color-mix(in srgb, #121417 30%, transparent) 55%, #121417); --p: 0; }
.ul-plate { fill: #1A1D21; stroke: #D9C48A; stroke-opacity: .5; }
.ul-ring { fill: none; stroke: #D9C48A; }
.ul-ticks line { stroke: #D9C48A; }
.ul-key { transform-origin: 100px 100px; transform: rotate(calc((var(--p) - 1) * 90deg)); }
.ul-key g { stroke: #D9C48A; }
.ul-plate { filter: drop-shadow(0 0 calc(var(--p) * 16px) rgba(217, 196, 138, calc(var(--p) * .45))); }
.ul-txt { font-size: clamp(30px, 4vw, 50px); font-weight: 400; color: #EDEBE6; }
.ul-a { color: #8F939A; }
.ul-b { color: #D9C48A; }

/* ---------- Footer: graphite with a champagne hairline ---------- */
footer { --deep: #121417; --on-deep: #EDEBE6; --on-deep-muted: #A0A3A9; --deep-3: #2B2F36; --deep-2: #1A1D21; background: #121417; color: #EDEBE6; margin-top: 0; padding-top: 0; overflow: hidden; }
footer::before { display: none !important; }
footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 50% 0%, rgba(217, 196, 138, .08), transparent 70%); }
footer .wrap { position: relative; z-index: 1; padding-top: 10px; }
footer .brand, footer .foot-contact li, footer .foot-base, footer .foot-brand p { color: #EDEBE6; }
footer .foot-brand p, footer .foot-base { color: #A0A3A9; }
footer h4 { color: #8A8D94; font-weight: 500; font-family: var(--mono); }
footer .brand-mark { color: #D9C48A; }
footer .wm b { color: #D9C48A; }
footer .wm .ai { color: #8A8D94; }
footer ul a { color: #D1D2D4; opacity: 1; font-weight: 400; text-decoration: none; transition: color .2s; }
footer ul a:hover { color: #D9C48A; }
.foot-contact svg { color: #D9C48A; }
.foot-cta { --on-deep: #EDEBE6; --on-deep-muted: #A0A3A9; --deep-3: #2B2F36; background: #1A1D21; border: 1px solid #2B2F36; border-radius: 22px; box-shadow: none; position: relative; overflow: hidden; }
.foot-cta::before { content: ""; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(217, 196, 138, .3); box-shadow: 0 0 0 28px rgba(217, 196, 138, .03), 0 0 0 56px rgba(217, 196, 138, .02); }
.foot-cta .kicker { color: #D9C48A; }
.foot-cta .kicker::before { background: #D9C48A; }
.foot-cta .foot-tag { color: #F4F2EE; }
.foot-cta .btn-ghost-dark { color: #EDEBE6; border-color: #3B4047; }
.foot-cta .btn-ghost-dark:hover { border-color: #D9C48A; color: #D9C48A; }
.foot-base { border-top-color: #2B2F36; }
.foot-langs button { color: #A0A3A9; border-color: #30353C; }
.foot-langs button:hover { background: #1A1D21; color: #EDEBE6; }
.foot-langs button[aria-pressed="true"] { background: #D9C48A; color: #14161A; border-color: #D9C48A; }
.tm { color: #6A6E75; position: relative; z-index: 2; margin-top: 10px; }
.foot-giant { position: relative; margin: 22px 0 16px; line-height: .9; white-space: nowrap; user-select: none; }
.foot-giant span { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 15.5vw, 224px); letter-spacing: -.035em; color: transparent; -webkit-text-stroke: 1px rgba(217, 196, 138, .55); text-transform: lowercase; }
.foot-giant b { font-weight: 400; font-style: italic; }
.foot-giant i { font-style: normal; font-family: var(--mono); font-size: .2em; letter-spacing: -.02em; -webkit-text-stroke: 0; color: rgba(217, 196, 138, .5); margin-left: .06em; }
.foot-key { position: absolute; right: 3%; top: -10%; width: clamp(56px, 7vw, 100px); color: #D9C48A; opacity: .9; transform-origin: 50% 0; animation: keysway 9s ease-in-out infinite; }
@keyframes keysway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .foot-key { animation: none; } }

/* ---------- Channels, marketplaces and books: clean rows ---------- */
.intg-grid { display: block; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; }
.intg-grid .intg { display: grid; grid-template-columns: 46px minmax(190px, 290px) minmax(0, 1fr); gap: 6px 26px; align-items: center; padding: 22px 6px; border: 0; border-right: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transition: background .3s; }
.intg-grid .intg:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); transform: none; border-color: var(--line); }
.intg-grid .intg:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
.intg .it-ic { grid-row: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--marigold-ink); }
.intg .it-head h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-strong); text-transform: none; }
.intg .it-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.intg .it-items { grid-column: 3; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.intg .it-items li { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 400; color: var(--ink); }
.intg .it-items li:hover { border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); }
.lg { width: 28px; height: 28px; background: #fff; border: 1px solid var(--line); }
.lg b { color: var(--indigo); font-family: var(--serif); font-size: 12px; }
:root[data-theme="dark"] .lg b { color: #2A2E35; }
.lg img { width: 14px; height: 14px; padding: 6px; }
@media (max-width: 880px) { .intg-grid .intg { grid-template-columns: 44px minmax(0, 1fr); } .intg .it-items { grid-column: 1 / -1; } }

/* ---------- About: a luxe company panel with the logo, pillars, then people ---------- */
.ab-panel { position: relative; display: grid; grid-template-columns: minmax(210px, .6fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 60px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: linear-gradient(155deg, #23262C, #121417 70%); color: #EDEBE6; overflow: hidden; border: 1px solid #2B2F36; }
.ab-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 0% 0%, rgba(217, 196, 138, .14), transparent 60%); pointer-events: none; }
.ab-seal { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center; padding-right: clamp(0px, 3vw, 40px); border-right: 1px solid #2B2F36; }
.ab-emblem { width: clamp(130px, 14vw, 180px); height: auto; color: #D9C48A; }
.ab-emblem * { fill: none; stroke: currentColor; }
.ab-r1 { stroke-width: .9; } .ab-r2 { stroke-width: .5; stroke-opacity: .5; }
.ab-wm { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 34px); font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; color: #F4F2EE; line-height: 1; }
.ab-wm b { font-weight: 400; font-style: italic; color: #D9C48A; }
.ab-wm i { font-family: var(--mono); font-style: normal; font-size: .38em; color: #8A8D94; margin-left: 2px; }
.ab-est { font-family: var(--mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #8A8D94; }
.ab-main { position: relative; }
.ab-main .kicker { color: #D9C48A; }
.ab-main .kicker::before { background: #D9C48A; }
.ab-main .h2 { color: #F4F2EE; margin-top: 12px; max-width: 16ch; }
.ab-main .h2 .hl { color: #F4F2EE; background-image: linear-gradient(#D9C48A, #D9C48A); }
.ab-p { margin: 16px 0 0; font-size: 16.5px; line-height: 1.7; color: #D5D6D8; max-width: 62ch; }
.ab-p2 { color: #A0A3A9; }
.ab-panel .stats { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 4px 0 0; padding-top: 6px; border: 0; border-top: 1px solid #2B2F36; }
.ab-panel .stat { background: none; border: 0; border-radius: 0; padding: 18px 20px 6px; border-left: 1px solid #2B2F36; display: grid; gap: 4px; }
.ab-panel .stat:first-child { border-left: 0; padding-left: 0; }
.ab-panel .stat b { color: #D9C48A; font-size: clamp(34px, 3.6vw, 48px); }
.ab-panel .stat span { color: #A0A3A9; font-size: 13.5px; }
.wwb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { position: relative; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); display: grid; gap: 8px; align-content: start; transition: border-color .3s; }
.pillar:hover { border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); }
.pillar .pn { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--marigold-ink); letter-spacing: .04em; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pillar h3 { font-size: 24px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-strong); }
.pillar p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ab-name { margin: 22px 0 0; padding-left: 16px; border-left: 2px solid var(--marigold); font-size: 14.5px; color: var(--muted); max-width: 70ch; }
.ab-block { margin-top: clamp(34px, 4.5vw, 54px); }
.founder ul { border-top-color: var(--line); }
@media (max-width: 960px) { .ab-panel { grid-template-columns: minmax(0, 1fr); } .ab-seal { border-right: 0; border-bottom: 1px solid #2B2F36; padding: 0 0 24px; } .wwb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ab-panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-panel .stat:nth-child(3) { border-left: 0; padding-left: 0; } .ab-panel .stat:nth-child(n+3) { border-top: 1px solid #2B2F36; margin-top: 8px; } }
.ab-block > .wwb { width: 100%; justify-self: stretch; }
.ab-block { justify-items: stretch; }
.ul-inner { display: grid; justify-items: center; gap: 6px; }
.ul-lock { width: clamp(150px, 19vw, 210px); height: auto; overflow: visible; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .35)); }
.ul-plate { stroke-width: 1.2; }
.ul-ring { stroke-opacity: calc(.2 + var(--p) * .6); stroke-width: 1; stroke-dasharray: 3 5; }
.ul-ticks line { stroke-opacity: .45; stroke-width: 1.2; stroke-linecap: round; }
.ul-txt { margin: 10px 0 0; position: relative; height: 1.3em; min-width: 8em; text-align: center; font-style: italic; letter-spacing: -.01em; }
.ul-txt span { position: absolute; left: 0; right: 0; transition: opacity .5s ease, transform .6s var(--ease); }
.ul-a { opacity: calc(1 - var(--p) * 1.4); }
.ul-b { opacity: 0; transform: translateY(10px); }
.unlock.open .ul-b { opacity: 1; transform: none; }
.unlock.open .ul-a { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .unlock { --p: 1 !important; } }

/* ==========================================================================
   Yellowkeys: final polish.
   Fonts: Newsreader (headlines, numbers, wordmark), Figtree (reading, UI),
   IBM Plex Mono (labels). Colours unchanged. New header, team tiles,
   "how we work" list, key rack footer, bezel on the seal.
   ========================================================================== */
:root {
  --serif: "Newsreader", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --display: "Figtree", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, sans-serif;
  --body: "Figtree", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
body { font-size: 16.5px; line-height: 1.62; letter-spacing: .002em; }
.hero h1 { font-weight: 400; letter-spacing: -.028em; line-height: 1.02; font-size: clamp(48px, 5.9vw, 88px); }
.h2 { font-weight: 400; letter-spacing: -.024em; line-height: 1.06; font-size: clamp(36px, 4.2vw, 60px); max-width: 19ch; }
.h3, .foot-tag, .pillar h3, .pc-fix h3, .founder b, .intg .it-head h3, .hw-title { font-weight: 400; }
.foot-tag { font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -.02em; }
.pc-front q { font-weight: 400; font-size: 23px; line-height: 1.22; letter-spacing: -.01em; }
.stat b, .v-big { font-weight: 400; }
.founder b { font-size: 30px; letter-spacing: -.012em; }
.pillar h3 { font-size: 27px; letter-spacing: -.012em; }
.intg .it-head h3 { font-size: 24px; }
.kpi b { font-size: 25px; font-weight: 400; } .dash-greet b { font-size: 20px; font-weight: 400; }
.hero h1 .mark, .h2 .hl { font-weight: 400; }
b, strong { font-weight: 600; }
.btn, nav.links a, .sol-tabs button, .seg button, .filters button { font-weight: 500; }
.btn-primary { font-weight: 600; }
.kicker, .lbl, .rc-app, .d-tag, .dept, .tag-pain, .tag-fix { font-family: var(--mono); font-weight: 400; }
.wm { font-weight: 500; letter-spacing: -.015em; font-size: 1.2em; }
.wm b { font-style: normal; font-weight: 500; color: var(--marigold-ink); }
.wm .ai { font-weight: 400; font-size: 10.5px; }
footer .wm b { color: #D9C48A; } .ab-wm b { font-style: normal; } .sp-wm i { font-style: normal; }
.foot-giant b { font-style: normal; }

/* ---------- Header: brand, centred nav, tools, one action ---------- */
header.top { background: transparent; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, transform .5s var(--ease); }
header.top.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--line); }
header.top .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 72px; transition: min-height .3s; }
header.top.scrolled .bar { min-height: 62px; }
header.top .brand { justify-self: start; gap: 11px; }
header.top nav.links { justify-self: center; display: flex; gap: 4px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; position: relative; }
header.top nav.links a { padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--muted); border-radius: 8px; background: none !important; letter-spacing: .005em; }
header.top nav.links a:hover, header.top nav.links a.active { color: var(--ink-strong); }
header.top .nav-ind { bottom: -2px; height: 1.5px; background: var(--marigold); }
header.top .top-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
header.top .lang-btn, header.top .icon-btn { height: 38px; border: 0; background: none; border-radius: 10px; color: var(--muted); }
header.top .lang-btn { padding: 0 10px; font-size: 13px; font-weight: 500; }
header.top .lang-btn:hover, header.top .icon-btn:hover, header.top .lang-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-strong); }
header.top .icon-btn { width: 38px; }
header.top .cta-top { margin-left: 10px; min-height: 40px; padding: 8px 18px; font-size: 14px; font-weight: 600; border-radius: 10px; letter-spacing: .005em; }
header.top .menu-btn { display: none; }
@media (max-width: 1080px) {
  header.top .bar { grid-template-columns: auto 1fr; }
  header.top nav.links { display: none; }
  header.top .menu-btn { display: inline-flex; }
  header.top .cta-top { display: none; }
}
@media (max-width: 460px) { header.top .bar { min-height: 64px; } }

/* ---------- Team: a roster of equal tiles ---------- */
.contact .team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.contact .member { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; padding: 20px 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s, transform .5s var(--ease); min-height: 190px; }
.contact .member:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); background: var(--surface); }
.contact .member:first-child { background: var(--surface); border-color: color-mix(in srgb, var(--marigold) 50%, var(--line)); }
.contact .member .dept { order: -2; align-self: stretch; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--marigold-ink); margin: 0 0 18px; padding: 0; justify-self: auto; }
.contact .member .av { order: -1; width: 54px; height: 54px; margin: 0 0 16px; font-size: 16px; font-family: var(--serif); background: var(--mark); color: #D9C48A; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .45), inset 0 0 0 4px rgba(20, 22, 26, .85), inset 0 0 0 5px rgba(217, 196, 138, .2); }
.contact .member b { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--ink-strong); line-height: 1.15; }
.contact .member .rl { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.contact .member .tag { display: inline-block; margin: 10px 0 0; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold-ink); border: 1px solid color-mix(in srgb, var(--marigold) 55%, transparent); border-radius: 999px; padding: 2px 9px; }
@media (max-width: 1100px) { .contact .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .contact .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact .member { min-height: 0; } }

/* ---------- How we work: title left, four numbered promises right ---------- */
.hw-block { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.hw-intro { position: sticky; top: 100px; display: grid; gap: 14px; align-content: start; }
.hw-intro .lbl { display: block; }
.hw-title { margin: 0; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink-strong); max-width: 14ch; }
.hw-block .values { display: block; margin: 0; border-top: 1px solid var(--line-strong); }
.hw-block .value { display: grid; grid-template-columns: 58px minmax(0, .9fr) minmax(0, 1.4fr); gap: 4px 24px; align-items: baseline; padding: 26px 4px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: background .35s, padding .4s var(--ease); }
.hw-block .value:hover { background: color-mix(in srgb, var(--surface) 75%, transparent); padding-left: 14px; }
.hw-block .value .vn { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--marigold-ink); letter-spacing: 0; }
.hw-block .value b { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -.012em; color: var(--ink-strong); line-height: 1.15; }
.hw-block .value span:not(.vn) { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 960px) { .hw-block { grid-template-columns: minmax(0, 1fr); } .hw-intro { position: static; } .hw-title { max-width: none; } }
@media (max-width: 640px) { .hw-block .value { grid-template-columns: 40px minmax(0, 1fr); } .hw-block .value span:not(.vn) { grid-column: 2; } }

/* ---------- Footer: a key rack ---------- */
.foot-giant { position: relative; }
.foot-rack { position: absolute; right: 1%; top: -4%; width: clamp(200px, 25vw, 340px); height: auto; color: #D9C48A; overflow: visible; }
.foot-rack path, .foot-rack circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fr-rail path { stroke-width: 2.5; stroke-opacity: .7; }
.fr-rail circle { fill: #121417; stroke-width: 2; }
.fk circle { stroke-width: 2.2; }
.fk text { fill: #A0A3A9; stroke: none; font-family: var(--mono); font-size: 7.5px; letter-spacing: .2em; }
.fk { animation: fkSway 7s ease-in-out infinite; }
.fk.k2 { animation-duration: 8.5s; animation-delay: -2s; } .fk.k3 { animation-duration: 6.4s; animation-delay: -4s; } .fk.k4 { animation-duration: 9.2s; animation-delay: -1s; }
.foot-rack:hover .fk { animation-duration: 3.2s; }
@keyframes fkSway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@media (prefers-reduced-motion: reduce) { .fk { animation: none; } }
@media (max-width: 700px) { .foot-rack { position: relative; right: auto; top: auto; display: block; margin: 0 0 8px auto; width: min(240px, 70%); } }

/* ---------- The seal: a fine bezel of ticks ---------- */
.sp-ticks, .ab-ticks { stroke: currentColor; stroke-width: .5; stroke-linecap: round; fill: none; }
.sp-ticks { opacity: 0; transform-origin: 32px 32px; animation: spFade 1s .5s ease forwards, spTurn 4s .5s cubic-bezier(.3, 0, .2, 1) forwards; }
.ab-ticks { opacity: .55; transform-origin: 32px 32px; animation: abTurn 120s linear infinite; }
.ab-emblem { overflow: visible; }
@keyframes spTurn { to { transform: rotate(90deg); } }
@keyframes abTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ab-ticks { animation: none; } }

/* ---------- Alignment and rhythm ---------- */
.ab-block > .lbl { display: flex; align-items: center; gap: 14px; }
.hw-block .hw-intro .lbl::after { display: none; }
.founders { align-items: stretch; }
.founder { height: 100%; }
.ab-panel { align-items: center; }
.sec-head { align-items: end; }
.foot-giant { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px, 3vw, 48px); margin: 30px 0 20px; line-height: .92; }
.foot-giant > span { flex: 1 1 auto; min-width: 0; font-size: clamp(54px, 12.6vw, 190px); }
.foot-giant .foot-rack { position: static; flex: 0 0 auto; width: clamp(190px, 23vw, 320px); margin: 0 0 .1em; align-self: flex-end; }
@media (max-width: 760px) { .foot-giant { flex-direction: column-reverse; align-items: flex-start; } .foot-giant > span { font-size: clamp(50px, 17vw, 120px); } .foot-giant .foot-rack { align-self: flex-end; width: min(230px, 60%); } }

/* ==========================================================================
   Round 7: packages, a footer that belongs to the page, a quieter scroller,
   the story behind the name, six numbers, and a proper language switcher.
   ========================================================================== */

/* ---------- Packages: choose, read, compare ---------- */
.finder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 20px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; counter-reset: fq; }
.finder .q { display: grid; gap: 10px; align-content: start; padding: 16px 20px 18px; border-left: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); counter-increment: fq; }
.finder .q:first-child { border-left: 0; }
.finder .q > span:first-child::before { content: "0" counter(fq); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--marigold-ink); margin-right: 10px; }
.finder .q > span:first-child { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink-strong); letter-spacing: -.005em; }
.finder .toggle { display: inline-flex; width: 100%; padding: 3px; gap: 3px; background: var(--surface-2); border-radius: 11px; border: 0; }
.finder .toggle button { flex: 1 1 0; min-height: 36px; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); background: none; border: 0; transition: background .2s, color .2s; }
.finder .toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink-strong); box-shadow: 0 1px 2px rgba(20, 22, 26, .12), 0 0 0 1px var(--line); font-weight: 600; }
@media (max-width: 760px) { .finder { grid-template-columns: minmax(0, 1fr); } .finder .q { border-left: 0; border-top: 1px solid var(--line); } .finder .q:first-child { border-top: 0; } }

.ladder { position: relative; gap: 12px; }
.ladder::before { display: block; content: ""; position: absolute; left: 7%; right: 7%; top: 33px; height: 1px; background: var(--line-strong); z-index: 0; }
.rung { position: relative; z-index: 1; gap: 12px; padding: 18px 16px 16px; background: var(--surface); text-align: left; }
.rung .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--serif); font-size: 14px; box-shadow: 0 0 0 5px var(--surface); }
.rung .dot svg { width: 14px; height: 14px; }
.rung .step { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold-ink); margin-bottom: 6px; }
.rung b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17.5px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink-strong); }
.rung .s { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.rung .rec { top: 16px; right: 14px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.rung[aria-selected="true"] { background: var(--surface); border-color: var(--marigold); box-shadow: 0 18px 36px -28px rgba(20, 22, 26, .5), inset 0 2px 0 var(--marigold); }
.rung[aria-selected="true"] .dot { background: var(--mark); color: #D9C48A; border-color: #D9C48A; }

#pkDetail { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; padding: 0; display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.6fr); }
#pkDetail > * { min-width: 0; }
#pkDetail .pk-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: clamp(24px, 3vw, 36px); background: var(--surface-2); border-right: 1px solid var(--line); }
#pkDetail .pk-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.018em; color: var(--ink-strong); }
#pkDetail .pk-head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
#pkDetail .pk-head .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#pkDetail .pill { background: var(--surface); border: 1px solid var(--line); }
#pkDetail .pk-groups { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
#pkDetail .grp { padding: 22px 26px; border-top: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
#pkDetail .grp:nth-child(odd) { border-left: 0; }
#pkDetail .grp:nth-last-child(-n+2):nth-child(odd), #pkDetail .grp:last-child { border-bottom: 0; }
#pkDetail .grp h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--marigold-ink); }
#pkDetail .grp h4 svg { width: 16px; height: 16px; }
#pkDetail .grp ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
#pkDetail .grp li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
#pkDetail .grp li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--marigold-ink); }
#pkDetail .pk-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { #pkDetail { grid-template-columns: minmax(0, 1fr); } #pkDetail .pk-head { border-right: 0; border-bottom: 1px solid var(--line); } #pkDetail .pk-groups { grid-column: 1; grid-row: auto; } }
@media (max-width: 600px) { #pkDetail .pk-groups { grid-template-columns: minmax(0, 1fr); } #pkDetail .grp { border-left: 0; border-bottom: 1px solid var(--line); } #pkDetail .grp:last-child { border-bottom: 0; } }
@media (max-width: 1020px) { .ladder::before { display: none; } }
@media (max-width: 640px) { .rung { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 4px 14px; } .rung .rec { position: static; justify-self: start; grid-column: 2; } }

.incl-lbl { margin-top: 40px; }
.incl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; margin-top: 4px; }
.incl-row > div { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 13.5px; line-height: 1.5; color: var(--muted); transition: border-color .25s, transform .4s var(--ease); }
.incl-row > div:hover { border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); transform: translateY(-2px); }
.incl-row > div > svg { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--surface-2); color: var(--marigold-ink); }
.incl-row > div > b { align-self: end; font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -.005em; color: var(--ink-strong); }
@media (max-width: 900px) { .incl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl-row { grid-template-columns: minmax(0, 1fr); } }

.addon-row { margin-top: 28px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 0 0; border-bottom: 0; }
.addon-desc { margin: 0; padding: 4px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; }
.addon { border: 1px solid var(--line-strong); border-style: solid; background: var(--bg); font-weight: 500; }
.addon[aria-pressed="true"] { background: var(--mark); border-color: #D9C48A; color: #EDEBE6; }

/* ---------- About: six numbers, the story behind the name ---------- */
.ab-panel .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ab-panel .stat b { font-size: clamp(28px, 2.8vw, 40px); }
.ab-panel .stat span { font-size: 12.5px; line-height: 1.4; }
@media (max-width: 1020px) { .ab-panel .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ab-panel .stat:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 520px) { .ab-panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-panel .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .ab-panel .stat:nth-child(even) { border-left: 1px solid rgba(217, 196, 138, .18); padding-left: 20px; } }

.story-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); margin: 14px 0 0; padding: 0; list-style: none; }
.story-line::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: linear-gradient(90deg, var(--marigold), var(--line-strong) 60%, transparent); }
.story-line li { position: relative; padding-top: 52px; }
.story-line .sn { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); border: 1px solid var(--marigold); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--marigold-ink); box-shadow: 0 0 0 6px var(--bg); }
.story-line h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.012em; color: var(--ink-strong); }
.story-line p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 40ch; }
@media (max-width: 820px) { .story-line { grid-template-columns: minmax(0, 1fr); gap: 26px; } .story-line::before { left: 19px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--marigold), var(--line-strong)); } .story-line li { padding: 4px 0 0 58px; } }

/* ---------- Left scroller: a hairline with a small seal ---------- */
.thread-track { width: 1px; left: 10px; border-radius: 0; background: var(--line-strong); opacity: .9; }
.thread-fill { width: 1px; left: 10px; border-radius: 0; background: var(--marigold); }
.thread-bead { left: 10.5px; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--bg); border: 1px solid var(--marigold); box-shadow: 0 0 0 4px var(--bg); }
.thread-bead::before { height: 4px; top: 1px; background: var(--marigold-ink); }
.thread-bead::after { display: none; }
.thread a { height: 22px; }
.thread a i { width: 5px; height: 1px; margin-left: 20px; background: var(--line-strong); }
.thread li:nth-child(odd) a i { width: 5px; }
.thread a.past i { width: 8px; background: var(--marigold); opacity: .7; }
.thread a.on i { width: 16px; background: var(--marigold-ink); }
.thread a span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--bg); border-color: var(--line); box-shadow: none; }

/* ---------- Footer: part of the page, not a black slab ---------- */
.unlock { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-2) 70%, transparent) 60%, var(--surface-2)); }
.ul-txt { color: var(--ink-strong); }
.ul-a { color: var(--muted); }
.ul-b { color: var(--marigold-ink); }
.ul-plate { stroke-opacity: .7; }
footer { --on-deep: var(--ink); --on-deep-muted: var(--muted); --deep-3: var(--line); --deep-2: var(--surface); --deep: var(--surface-2); background: var(--surface-2); color: var(--ink); border-top: 0; }
footer::after { background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--marigold) 14%, transparent), transparent 70%); }
footer .brand, footer .foot-contact li { color: var(--ink); }
footer .foot-brand p, footer .foot-base { color: var(--muted); }
footer h4 { color: var(--marigold-ink); }
footer .brand-mark, footer .wm b, footer .foot-contact svg { color: var(--marigold-ink); }
footer .wm .ai { color: var(--marigold-ink); }
footer ul a { color: var(--ink); opacity: .9; }
footer ul a:hover { color: var(--marigold-ink); opacity: 1; }
.foot-cta { --on-deep: var(--ink); --on-deep-muted: var(--muted); --deep-3: var(--line); background: var(--surface); border-color: var(--line); box-shadow: 0 30px 60px -48px rgba(20, 22, 26, .45); }
.foot-cta::before { border-color: color-mix(in srgb, var(--marigold) 45%, transparent); box-shadow: 0 0 0 28px color-mix(in srgb, var(--marigold) 5%, transparent), 0 0 0 56px color-mix(in srgb, var(--marigold) 3%, transparent); }
.foot-cta .kicker { color: var(--marigold-ink); }
.foot-cta .kicker::before { background: var(--marigold); }
.foot-cta .foot-tag { color: var(--ink-strong); }
.foot-cta .btn-ghost-dark { color: var(--ink-strong); border-color: var(--line-strong); }
.foot-cta .btn-ghost-dark:hover { border-color: var(--marigold-ink); color: var(--marigold-ink); }
.foot-base { border-top-color: var(--line-strong); }
.foot-base .legal a { color: var(--muted); }
.foot-base .legal a:hover { color: var(--ink-strong); }
.foot-giant span { -webkit-text-stroke: 1px color-mix(in srgb, var(--marigold) 75%, transparent); }
.foot-giant i { color: color-mix(in srgb, var(--marigold) 80%, transparent); }
.foot-rack { color: var(--marigold-ink); }
.fr-rail circle { fill: var(--surface-2); }
.fk text { fill: var(--muted); }

/* ---------- Language switcher: nine languages, native names ---------- */
.lang-pop { width: 232px; max-height: min(70vh, 460px); overflow-y: auto; padding: 6px; margin: 0; list-style: none; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20, 22, 26, .5); }
.lang-pop li { margin: 0; }
.lang-pop button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.lang-pop button small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.lang-pop button:hover, .lang-pop button:focus-visible { background: var(--surface-2); outline: 0; }
.lang-pop button[aria-selected="true"] { background: var(--surface-2); color: var(--ink-strong); font-weight: 600; box-shadow: inset 2px 0 0 var(--marigold); }
.lang-pop button[aria-selected="true"] small { color: var(--marigold-ink); }
.foot-langs, .sheet-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-langs button, .sheet-langs button { min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.foot-langs button:hover, .sheet-langs button:hover { background: var(--surface); color: var(--ink-strong); border-color: var(--marigold); }
.foot-langs button[aria-pressed="true"], .sheet-langs button[aria-pressed="true"] { background: var(--mark); border-color: var(--mark); color: #EDEBE6; box-shadow: inset 0 0 0 1px #D9C48A; }
:lang(bn), :lang(ta), :lang(te), :lang(kn) { line-height: 1.75; }
:lang(bn) { font-family: "Noto Sans Bengali", var(--body); }
:lang(ta) { font-family: "Noto Sans Tamil", var(--body); }
:lang(te) { font-family: "Noto Sans Telugu", var(--body); }
:lang(kn) { font-family: "Noto Sans Kannada", var(--body); }
:lang(bn) .hero h1, :lang(ta) .hero h1, :lang(te) .hero h1, :lang(kn) .hero h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.18; letter-spacing: 0; }
:lang(bn) .h2, :lang(ta) .h2, :lang(te) .h2, :lang(kn) .h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.2; letter-spacing: 0; }

/* ==========================================================================
   Round 8: one type system, a master-detail packages section, a plain and
   readable About, and a closing sequence (unlock, call to action, footer)
   that stays on the page's own surface.
   ========================================================================== */

/* ---------- Type system ---------- */
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
body { font-size: 17px; line-height: 1.65; font-feature-settings: "kern", "liga", "calt"; }
.h2, .hero h1, .hw-title, .foot-tag, .pillar h3, .founder b, .rung b, #pkDetail .pk-head h3, .incl-row > div > b, .contact .member b, .hw-block .value b, .ul-txt { font-feature-settings: "kern", "liga", "lnum"; }
.stat b, .stat small, .d-num, .vn { font-variant-numeric: lining-nums tabular-nums; }
.h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.1; letter-spacing: -.022em; max-width: 21ch; text-wrap: balance; }
.lede { font-size: 18.5px; line-height: 1.6; max-width: 54ch; color: var(--muted); }
.kicker { font-size: 11.5px; letter-spacing: .18em; font-weight: 500; }
p { max-width: 68ch; }
.sec-head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec-head .lede { margin-top: 14px; }

/* ---------- Packages: pick on the left, read on the right ---------- */
#packages .sec-head { margin-bottom: 28px; }
.finder { margin-bottom: 18px; border-radius: 16px; }
#packages .pk { display: grid; grid-template-columns: minmax(280px, .5fr) minmax(0, 1.5fr); gap: 20px; align-items: start; }
#packages .ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; position: sticky; top: 92px; }
#packages .ladder::before { display: none; }
#packages .rung { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; transform: none; text-align: left; }
#packages .rung:last-child { border-bottom: 0; }
#packages .rung:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); transform: none; }
#packages .rung[aria-selected="true"] { background: var(--surface-2); border-color: var(--line); box-shadow: inset 3px 0 0 var(--marigold); }
#packages .rung .dot { grid-row: 1; width: 34px; height: 34px; font-size: 15px; box-shadow: none; }
#packages .rung .step { margin-bottom: 4px; padding-right: 64px; }
#packages .rung b { font-size: 18px; }
#packages .rung .s { font-size: 13.5px; }
#packages .rung .rec { position: absolute; top: 18px; right: 18px; }
#packages .pk-detail { min-width: 0; }
#pkDetail { display: grid; grid-template-columns: minmax(0, 1fr); }
#pkDetail .pk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; padding: clamp(24px, 3vw, 36px); border-right: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
#pkDetail .pk-head > .lbl, #pkDetail .pk-head > h3, #pkDetail .pk-head > p { grid-column: 1; }
#pkDetail .pk-head .pills { grid-column: 2; grid-row: 1 / span 3; align-self: end; flex-direction: column; align-items: flex-start; margin: 0; }
#pkDetail .pk-head h3 { font-size: clamp(28px, 2.8vw, 38px); }
#pkDetail .pk-groups { grid-column: 1; grid-row: auto; }
#pkDetail .grp li { font-size: 15px; }
@media (max-width: 960px) {
  #packages .pk { grid-template-columns: minmax(0, 1fr); }
  #packages .ladder { position: static; }
}
@media (max-width: 640px) {
  #pkDetail .pk-head { grid-template-columns: minmax(0, 1fr); }
  #pkDetail .pk-head .pills { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
  #packages .rung { display: grid; }
}
.incl-lbl { margin-top: 48px; }

/* ---------- About: plain, readable, no marks ---------- */
.contact .ab-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); overflow: visible; }
.contact .ab-panel::before, .contact .ab-panel::after { display: none; }
.contact .ab-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "k k" "h p" "h q"; gap: 0 clamp(32px, 6vw, 96px); align-items: start; }
.contact .ab-main .kicker { grid-area: k; color: var(--marigold-ink); margin-bottom: 14px; }
.contact .ab-main .kicker::before { background: var(--marigold); }
.contact .ab-main .h2 { grid-area: h; margin: 0; color: var(--ink-strong); max-width: 14ch; }
.contact .ab-main .h2 .hl { color: var(--ink-strong); background-image: linear-gradient(var(--marigold), var(--marigold)); }
.contact .ab-main .ab-p { grid-area: p; margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink); max-width: 56ch; }
.contact .ab-main .ab-p2 { grid-area: q; margin-top: 16px; color: var(--muted); }
.contact .ab-panel .stats { margin: clamp(36px, 4.4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.contact .ab-panel .stat { display: grid; align-content: start; gap: 6px; padding: 22px 18px 22px; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.contact .ab-panel .stat:first-child { border-left: 0; padding-left: 0; }
.contact .ab-panel .stat b { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--ink-strong); }
.contact .ab-panel .stat b small { font-size: .42em; color: var(--marigold-ink); letter-spacing: 0; margin-left: 3px; }
.contact .ab-panel .stat span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 960px) {
  .contact .ab-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "h" "p" "q"; }
  .contact .ab-main .h2 { margin-bottom: 20px; max-width: 18ch; }
  .contact .ab-panel .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact .ab-panel .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .contact .ab-panel .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .contact .ab-panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .ab-panel .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .contact .ab-panel .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 18px; }
  .contact .ab-panel .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.contact .ab-block { margin-top: clamp(56px, 7vw, 96px); }
.contact .ab-block > .lbl { margin-bottom: 20px; }
.wwb { gap: 0; border-top: 1px solid var(--line-strong); }
.wwb .pillar { padding: 28px 28px 8px 0; background: none; border: 0; border-radius: 0; border-right: 1px solid var(--line); box-shadow: none; transform: none; }
.wwb .pillar + .pillar { padding-left: 28px; }
.wwb .pillar:last-child { border-right: 0; }
.wwb .pillar:hover { border-color: var(--line); }
.wwb .pillar h3 { font-size: 25px; margin: 8px 0 10px; }
.wwb .pillar p { font-size: 15.5px; line-height: 1.65; }
@media (max-width: 820px) { .wwb { grid-template-columns: minmax(0, 1fr); } .wwb .pillar, .wwb .pillar + .pillar { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); } .wwb .pillar:last-child { border-bottom: 0; } }

.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.contact .founder { display: flex; flex-direction: column; gap: 0; height: auto; padding: clamp(26px, 3vw, 38px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: none; }
.contact .founder::before { display: none; }
.contact .founder .av { display: none; }
.contact .founder .f-id { display: block; padding: 0; margin: 0; }
.contact .founder .f-id b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.016em; color: var(--ink-strong); }
.contact .founder .role { display: block; margin-top: 8px; font-family: var(--body); font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--marigold-ink); }
.contact .founder .f-bio { margin: 18px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.contact .founder ul { margin: 22px 0 0; padding: 18px 0 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; border-top: 1px solid var(--line); }
.contact .founder li { position: relative; padding-left: 16px; font-size: 14.5px; color: var(--muted); }
.contact .founder li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--marigold); }
@media (max-width: 860px) { .founders { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .contact .founder ul { grid-template-columns: minmax(0, 1fr); } }

.contact .team { display: block; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); background: none; border-radius: 0; }
.contact .team .member { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr) auto; align-items: baseline; gap: 4px 24px; min-height: 0; padding: 18px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; transform: none; text-align: left; }
.contact .team .member:hover { background: none; transform: none; }
.contact .team .member:first-child { background: none; }
.contact .team .member .av { display: none; }
.contact .team .member b { order: 0; font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.contact .team .member .rl { order: 1; display: block; margin: 0; font-size: 15px; color: var(--muted); line-height: 1.45; }
.contact .team .member .dept { order: 2; margin: 0; display: block; justify-self: end; align-self: center; font-size: 10.5px; letter-spacing: .14em; }
.contact .team .member .tag { display: inline-block; margin: 0 0 0 8px; font-size: 10px; vertical-align: 1px; }
@media (max-width: 700px) { .contact .team .member { grid-template-columns: minmax(0, 1fr) auto; } .contact .team .member .rl { grid-column: 1 / -1; order: 3; } }

/* ---------- Closing sequence: unlock, call to action, footer ---------- */
.unlock { background: none; margin-top: clamp(16px, 3vw, 40px); padding: clamp(24px, 4vw, 44px) 0 clamp(8px, 2vw, 20px); }
.ul-plate { fill: var(--surface); stroke: var(--marigold); stroke-opacity: .85; }
.ul-ring { stroke: var(--marigold); opacity: .55; }
.ul-ticks line { stroke: var(--marigold); opacity: .8; }
.ul-key g { stroke: var(--marigold-ink); }
.ul-txt { font-size: clamp(28px, 3.4vw, 42px); }
footer { background: linear-gradient(180deg, var(--bg) 0, var(--surface-2) 100%); }
footer::after { background: none; }
.foot-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 5vw, 72px); align-items: end; padding: clamp(28px, 4vw, 52px) 0; margin: 0 0 clamp(28px, 3.6vw, 48px); background: none; border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.foot-cta::before { display: none; }
.foot-cta .foot-tag { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; max-width: 18ch; margin: 8px 0 12px; }
.foot-cta .foot-sub { color: var(--muted); font-size: 17px; max-width: 46ch; }
.foot-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) { .foot-cta { grid-template-columns: minmax(0, 1fr); } }
.foot-base { border-top-color: var(--line); }
.contact .founder ul { width: 100%; max-width: none; align-self: stretch; }
#packages .rung .step { padding-right: 52px; }
footer { background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--surface-2) 60%, transparent) 40%, var(--surface-2) 100%); }

/* ==========================================================================
   Round 9: packages as a path (three steps, two add-ons), a logo lockup in
   About, founder cards with structure, and a last typographic pass.
   ========================================================================== */

/* ---------- Packages ---------- */
.pk-reco { margin: 0 0 clamp(28px, 3.4vw, 44px); padding: 16px 22px; border: 1px solid color-mix(in srgb, var(--marigold) 45%, var(--line)); border-left-width: 3px; border-radius: 12px; background: color-mix(in srgb, var(--marigold-soft) 55%, var(--surface)); font-size: 16px; line-height: 1.55; color: var(--ink); max-width: none; }
.pk-reco b { font-family: var(--serif); font-weight: 500; font-size: 1.06em; color: var(--ink-strong); }
.pk-tier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 16px; padding-top: 6px; }
.pk-tier .lbl { margin: 0; }
.pk-tier .lbl::after { display: none; }
.pk-tier-note { font-size: 14px; color: var(--muted); }
.pk-core, .pk-add { display: grid; gap: 16px; align-items: stretch; }
.pk-core { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(36px, 4.4vw, 56px); }
.pk-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.4vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; transition: border-color .3s, box-shadow .4s var(--ease), transform .5s var(--ease); }
.pk-card:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -40px rgba(20, 22, 26, .5); }
.pk-card.is-rec { border-color: color-mix(in srgb, var(--marigold) 70%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marigold) 35%, transparent), 0 34px 60px -46px rgba(20, 22, 26, .55); }
.pk-card.is-rec::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--marigold), transparent); }
.pk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-bottom: 14px; }
.pk-step { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--marigold-ink); }
.pk-rec { padding: 3px 10px; border-radius: 999px; background: var(--mark); color: #D9C48A; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .4); }
.pk-card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.016em; color: var(--ink-strong); }
.pk-for { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.pk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0 0 22px; list-style: none; border-bottom: 1px solid var(--line); }
.pk-meta li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 500; color: var(--ink-strong); }
.pk-meta svg { width: 14px; height: 14px; color: var(--marigold-ink); }
.pk-groups { display: grid; gap: 0; margin: 0 0 24px; }
.pk-add .pk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.pk-groups .grp { padding: 20px 0 4px; border: 0; }
.pk-core .pk-groups .grp + .grp { border-top: 1px solid var(--line); margin-top: 16px; }
.pk-groups h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--marigold-ink); }
.pk-groups h4 svg { width: 15px; height: 15px; }
.pk-groups ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pk-groups li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pk-groups li svg { width: 14px; height: 14px; margin-top: 3px; color: var(--marigold-ink); }
.pk-card > .btn { margin-top: auto; align-self: flex-start; }
.pk-card:not(.is-rec) > .btn-primary { background: transparent; color: var(--ink-strong); border: 1px solid var(--line-strong); box-shadow: none; }
.pk-card:not(.is-rec) > .btn-primary:hover { border-color: var(--marigold-ink); color: var(--marigold-ink); }
@media (max-width: 1060px) { .pk-core { grid-template-columns: minmax(0, 1fr); } .pk-core .pk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .pk-core .pk-groups .grp + .grp { border-top: 0; margin-top: 0; } }
@media (max-width: 860px) { .pk-add { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pk-core .pk-groups, .pk-add .pk-groups { grid-template-columns: minmax(0, 1fr); } .pk-card > .btn { align-self: stretch; justify-content: center; } }

.incl-lbl { margin-top: clamp(44px, 5vw, 64px); }
.incl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- About: logo lockup and founders ---------- */
.contact .ab-main { grid-template-areas: "k k" "h p" "b q"; }
.ab-brand { grid-area: b; display: flex; align-items: center; gap: 18px; margin-top: clamp(24px, 3vw, 36px); padding: 18px 22px 18px 18px; width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.ab-plate { flex: 0 0 auto; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--mark); box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .55), inset 0 0 0 5px rgba(20, 22, 26, .9), inset 0 0 0 6px rgba(217, 196, 138, .25); }
.ab-plate svg { width: 34px; height: 34px; color: #D9C48A; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-lock { display: grid; gap: 6px; }
.ab-brand .ab-wm { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 36px); font-weight: 500; letter-spacing: -.015em; line-height: 1; color: var(--ink-strong); text-transform: lowercase; }
.ab-brand .ab-wm b { font-weight: 500; font-style: normal; color: var(--marigold-ink); }
.ab-brand .ab-wm i { font-style: normal; font-family: var(--mono); font-size: .42em; letter-spacing: 0; color: var(--muted); margin-left: .12em; }
.ab-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 960px) { .contact .ab-main { grid-template-areas: "k" "h" "p" "q" "b"; } .ab-brand { margin-top: 28px; } }

.contact .founder { padding: 0; gap: 0; overflow: hidden; border-radius: 22px; }
.contact .founder .f-top { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(22px, 2.6vw, 32px); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.f-kind, .f-no { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--marigold-ink); }
.contact .founder .f-name { margin: 0; padding: clamp(24px, 2.8vw, 34px) clamp(22px, 2.6vw, 32px) 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink-strong); }
.contact .founder .f-role { margin: 8px 0 0; padding: 0 clamp(22px, 2.6vw, 32px); font-size: 15px; font-weight: 500; color: var(--marigold-ink); max-width: none; }
.contact .founder .f-bio { margin: 18px 0 0; padding: 0 clamp(22px, 2.6vw, 32px); font-size: 16.5px; line-height: 1.7; color: var(--ink); max-width: none; }
.contact .founder .f-owns { margin-top: auto; padding: 26px clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px); }
.f-lbl { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact .founder .f-owns ul { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 12px 0 0; padding: 0; border: 0; list-style: none; }
.contact .founder .f-owns li { padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13.5px; color: var(--ink); background: var(--bg); }
.contact .founder .f-owns li::before { display: none; }

/* ---------- Final pass: rhythm, rules and details ---------- */
section { scroll-margin-top: 80px; }
.h2 .hl { text-decoration-thickness: 1px; }
.lbl { letter-spacing: .16em; }
.btn { letter-spacing: .005em; }
.btn-primary { border-radius: 11px; }
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--marigold) 40%, transparent); color: var(--ink-strong); }
.pk-core .pk-groups { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1060px) { .pk-core .pk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pk-core .pk-groups { grid-template-columns: minmax(0, 1fr); } }
.contact .founder { display: flex; flex-direction: column; align-items: stretch; }
.contact .founder .f-top { width: 100%; align-self: stretch; }
.hero .kicker { display: flex; align-items: flex-start; gap: 12px; line-height: 1.7; max-width: 34ch; }
.hero .kicker::before { flex: 0 0 22px; margin-top: .85em; }