:root {
  --ink: #0d0e10;
  --ink-2: #3c3f46;
  --ink-3: #64676f;
  --paper: #f6f7f9;
  --card: #ffffff;
  --rule: #e4e6ea;
  --night: #08090a;
  --night-2: #131417;
  --night-rule: #25272c;
  --snow: #f5f5f7;
  --mist: #a4a6ad;
  --yellow: #f3d94e;
  --yellow-deep: #d9bd21;
  --radius: 22px;
  --max: 1180px;
  --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1); /* one easing everywhere, as on the Digivolut page */
  --x-dir: 1; /* -1 on right-to-left pages: horizontal motion follows the reading direction */
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--snow); font: 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 50; background: var(--yellow); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Navigation: transparent over the hero, floating pill once scrolled. */
.nav { position: sticky; top: 0; z-index: 20; padding: 14px 16px; }
.nav-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 8px; padding-inline: 16px 10px; border-radius: 18px; border: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.nav.is-scrolled .nav-inner { background: rgba(13, 14, 16, .78); border-color: var(--night-rule); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1 var(--display); letter-spacing: -.02em; text-decoration: none; }
.brand-mark { display: block; width: 30px; height: 30px; }
.nav nav { margin-inline-start: auto; }
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--mist); }
.nav-links a { text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--snow); }
/* Language toggle, as on digivolut.foxary.com: a pill with the current language lit and the other a
   link. Short (EN | FR) in the nav, 12px from the button; full (English | Français) in the footer. */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.lang-item { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 30px; padding: 0 9px; border-radius: 999px; color: inherit; text-decoration: none; opacity: .64; transition: opacity .15s ease-out, background-color .15s ease-out; }
.lang-item.is-current { opacity: 1; background: color-mix(in srgb, currentColor 13%, transparent); }
a.lang-item:hover, a.lang-item:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.lang.is-full { letter-spacing: 0; }
.lang.is-full .lang-item { padding: 0 12px; }
.nav .lang, .nav .lang-menu { margin-inline-end: -16px; color: var(--snow); }
/* Six languages: the nav's menu is a native disclosure (it opens without JavaScript; main.js adds
   Escape and outside clicks), the footer lists every language by its own name. */
.lang-menu { position: relative; flex: none; }
.lang-menu summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 9px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color .15s ease-out; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: color-mix(in srgb, currentColor 9%, transparent); }
.lang-globe { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .8; }
.lang-chevron { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .2s var(--ease); }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; z-index: 30; display: grid; gap: 2px; min-width: 184px; padding: 6px; border: 1px solid var(--night-rule); border-radius: 16px; background: rgba(19, 20, 23, .97); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lang-menu[open] .lang-list { animation: menu-in .22s var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-option { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: #c9cbd1; font-size: 14px; font-weight: 500; text-decoration: none; }
a.lang-option:hover, a.lang-option:focus-visible { background: #1f2024; color: var(--snow); }
.lang-option[aria-current] { color: var(--snow); font-weight: 600; }
.lang-option[aria-current]::after { content: ""; margin-inline-start: auto; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3d94e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lang.is-full { flex-wrap: wrap; gap: 2px 0; padding: 0; border: 0; }
.lang.is-full .lang-item { gap: 7px; }
/* Each language's flag beside its own name, in the menu and the footer row (flag-icons 7.5.0, MIT:
   /assets/flags/LICENSE.txt). Decorative CSS backgrounds with a fixed box, so the name stays the only
   label and nothing moves when they load; keyed on each option's lang attribute. */
:is(.lang-option, .lang-item)::before { content: ""; flex: none; width: 20px; height: 15px; border-radius: 3px; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
:is(.lang-option, .lang-item):lang(en)::before { background-image: url("/assets/flags/gb.svg"); }
:is(.lang-option, .lang-item):lang(fr)::before { background-image: url("/assets/flags/fr.svg"); }
:is(.lang-option, .lang-item):lang(de)::before { background-image: url("/assets/flags/de.svg"); }
:is(.lang-option, .lang-item):lang(es)::before { background-image: url("/assets/flags/es.svg"); }
:is(.lang-option, .lang-item):lang(pt)::before { background-image: url("/assets/flags/br.svg"); }
:is(.lang-option, .lang-item):lang(zh)::before { background-image: url("/assets/flags/cn.svg"); }
:is(.lang-option, .lang-item):lang(tr)::before { background-image: url("/assets/flags/tr.svg"); }
:is(.lang-option, .lang-item):lang(ru)::before { background-image: url("/assets/flags/ru.svg"); }
:is(.lang-option, .lang-item):lang(ar)::before { background-image: url("/assets/flags/sa.svg"); }
:is(.lang-option, .lang-item):lang(it)::before { background-image: url("/assets/flags/it.svg"); }
:is(.lang-option, .lang-item):lang(ja)::before { background-image: url("/assets/flags/jp.svg"); }
:is(.lang-option, .lang-item):lang(ko)::before { background-image: url("/assets/flags/kr.svg"); }
/* Nine languages: on phones the footer row becomes an even grid instead of ragged lines (full
   width, or auto-fill would find room for one column only). */
@media (max-width: 480px) {
  .footer-legal .lang.is-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); justify-self: stretch; }
  .lang.is-full .lang-item { justify-content: flex-start; padding: 0 10px; }
}
/* A link to a page that only exists in English, from a page in another language. */
.link-lang { font-size: .92em; } /* No fading: faded, it failed contrast on dark and light backgrounds. */
/* Simplified Chinese: a system CJK face (no webfont), no tight or wide tracking, roomier lines. */
html:lang(zh) {
  --display: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
}
:lang(zh) { line-break: strict; }
.lang-option:lang(zh), .lang-item:lang(zh), .lang-code:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; letter-spacing: 0; }
html:lang(zh) :is(h1, h2, h3, h4, .eyebrow, .flow-caps, .flow-node, .faq summary, .co-l, .tp-kicker, .tp-title, .lang-menu summary) { letter-spacing: 0; }
html:lang(zh) :is(.hero h1, .section h2, .hub h2, .closing h2, .why-title, .feature h3) { line-height: 1.22; }
html:lang(zh) .hero h1 { font-size: clamp(38px, 7vw, 76px); }
html:lang(zh) .dvp video::cue { font-family: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
/* Japanese and Korean: like Chinese, the system's own face (no webfont), no tracking, roomier lines,
   and Japanese breaks lines by its strict rules; Korean keeps whole words together. */
html:lang(ja) {
  --display: "Geist", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
}
html:lang(ko) {
  --display: "Geist", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
}
:lang(ja) { line-break: strict; }
/* Japanese headings break between phrases, not inside words (Chrome; others keep strict breaking). */
html:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
:lang(ko) { word-break: keep-all; }
.lang-option:lang(ja), .lang-item:lang(ja), .lang-code:lang(ja) { font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif; letter-spacing: 0; }
.lang-option:lang(ko), .lang-item:lang(ko), .lang-code:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; letter-spacing: 0; }
html:is(:lang(ja), :lang(ko)) :is(h1, h2, h3, h4, .eyebrow, .flow-caps, .flow-node, .faq summary, .co-l, .tp-kicker, .tp-title, .lang-menu summary) { letter-spacing: 0; }
html:is(:lang(ja), :lang(ko)) :is(.hero h1, .section h2, .hub h2, .closing h2, .why-title, .feature h3) { line-height: 1.22; }
html:is(:lang(ja), :lang(ko)) .hero h1 { font-size: clamp(36px, 6.6vw, 72px); }
html:lang(ja) .dvp video::cue { font-family: "Geist", "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif; }
html:lang(ko) .dvp video::cue { font-family: "Geist", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; }
/* Russian: the site's font has no Cyrillic, so the whole page uses the system face (San Francisco,
   Segoe UI, Roboto) rather than mixing two faces in one line; the Titan wordmark stays. */
html:lang(ru) {
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html:lang(ru) .brand { font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html:lang(ru) :is(.hero h1, .section h2, .hub h2, .closing h2) { letter-spacing: -.025em; }
/* Arabic: right to left (dir="rtl" on the page), a system Arabic face, no letter-spacing (the
   letters join) and taller lines for the script's ascenders and descenders. */
html:lang(ar) {
  --display: "Geist", -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
html:lang(ar) body, html:lang(ar) body * { letter-spacing: 0 !important; }
html:lang(ar) :is(.hero h1, .section h2, .hub h2, .closing h2, .why-title, .feature h3, .how-copy h3, .faq summary) { line-height: 1.3; }
.lang-option:lang(ar), .lang-item:lang(ar), .lang-code:lang(ar), .lang-suggest:lang(ar) { font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
[dir="rtl"] { --x-dir: -1; }
/* What stays left to right on a right-to-left page: the film and its controls (the film isn't
   mirrored), Titan's tool log lines, numeric formulas like 60 kg × 6, and charts (time runs left to
   right, as in the Arabic film), plus the email field. */
[dir="rtl"] .dvp, .tp-chart { direction: ltr; }
[dir="rtl"] :is(.tool, .co-v, .tp-big) { direction: ltr; text-align: right; }
[dir="rtl"] .wl-field input { direction: ltr; text-align: right; }
[dir="rtl"] .demo-tabs i::after { transform-origin: right; }
[dir="rtl"] .made-by-arrow { transform: scaleX(-1); }
@media (min-width: 721px) {
  /* The phone sits on the left in right-to-left: its glow follows it. */
  [dir="rtl"] .demo-stage { background:
    radial-gradient(360px 300px at 180px 50%, rgba(243, 217, 78, .15), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
    #0b0c0e; }
}
/* German compounds in running text may break with a hyphen rather than overflow a phone (not in
   balanced headlines, where it would split words that fit). */
html:is(:lang(de), :lang(it)) :is(p, li, summary) { -webkit-hyphens: auto; hyphens: auto; }
/* "Titan is also available in …": suggested from the browser's languages by lang.js, written in
   that language. Fixed under the nav so nothing moves; hidden while the waitlist form is up there. */
.lang-suggest { position: fixed; top: 80px; left: 50%; z-index: 19; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); padding: 8px; padding-inline: 16px 8px; border: 1px solid var(--night-rule); border-radius: 16px; background: rgba(19, 20, 23, .95); color: var(--snow); font-size: 14px; line-height: 1.4; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateX(-50%); transition: opacity .25s var(--ease), transform .35s var(--ease); animation: suggest-in .5s var(--ease); }
.lang-suggest p { color: #d7d8dc; }
.lang-suggest a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lang-suggest button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #8b8e96; font: 400 22px/1 var(--text); cursor: pointer; }
.lang-suggest button:hover { background: #1f2024; color: var(--snow); }
.lang-suggest.is-away { opacity: 0; pointer-events: none; transform: translate(-50%, -8px); }
@keyframes suggest-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 720px) {
  .lang-suggest { left: 12px; right: 12px; width: auto; max-width: none; flex-wrap: wrap; gap: 8px 12px; padding: 12px 8px; padding-inline: 14px 8px; transform: none; animation-name: suggest-in-phone; }
  .lang-suggest p { flex: 1 1 calc(100% - 60px); }
  .lang-suggest button { order: 1; margin-top: -4px; }
  .lang-suggest a { order: 2; }
  .lang-suggest.is-away { transform: translateY(-8px); }
  @keyframes suggest-in-phone { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu[open] .lang-list, .lang-suggest { animation: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 14px; background: var(--yellow); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .2s, background .2s; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.btn-glow { box-shadow: 0 0 0 1px rgba(243, 217, 78, .35), 0 10px 40px -8px rgba(243, 217, 78, .55); }
.btn-dark { background: var(--night-2); color: var(--snow); border: 1px solid var(--night-rule); }
.btn-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #25272c; overflow: hidden; }
.btn-block { width: 100%; margin-top: 28px; }
section[id], #film { scroll-margin-top: 84px; }

/* Hero, stacked: what Titan is and the one action, centred, then the film full width. The film
   ends on the tagline that heads the waitlist. */
.hero { position: relative; padding: 132px 20px 32px; overflow: hidden; margin-top: -76px; }
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 50% 22%, rgba(243, 217, 78, .12), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(1000px 680px at 60% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(1000px 680px at 60% 35%, #000 25%, transparent 75%); }
.hero-inner { position: relative; max-width: var(--max); margin: 0 auto; display: grid; justify-items: center; gap: 56px; text-align: center; }
.hero-copy { position: relative; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--night-rule); border-radius: 999px; background: rgba(19, 20, 23, .8); font-size: 13px; color: #d7d8dc; }
.hero h1 { margin-inline: auto; font-size: clamp(40px, 6vw, 78px); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; max-width: 22ch; }
.hero h1 .accent { display: block; margin-top: .04em; }
.accent { color: var(--yellow); }
/* Words that read as one phrase stay on one line when a headline wraps. */
.keep { white-space: nowrap; }
.lead { max-width: 560px; margin: 22px auto 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: #b9bbc1; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero .waitlist { width: min(100%, 520px); margin: 32px auto 0; gap: 12px; }
.hero .wl-done { margin: 32px auto 0; text-align: start; }


.stage { position: relative; max-width: 1056px; margin: 0 auto; text-align: left; }

/* Film player, ported from the Digivolut landing page (.dvp in trend-hero.css and tt-hero.css). */
.dvp { position: relative; padding: 10px; overflow: hidden; border-radius: 36px; background: rgba(255, 255, 255, .02); outline: 1px solid rgba(255, 255, 255, .06); outline-offset: -1px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.dvp video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 26px; outline: 1px solid rgba(255, 255, 255, .04); outline-offset: -1px; background: #08090a; cursor: pointer; }
.dvp video::cue { font: 600 clamp(13px, 1.7vw, 24px)/1.3 "Geist", system-ui, sans-serif; color: #f5f5f7; background: rgba(8, 9, 10, .74); }
.dvp button { font-family: inherit; cursor: pointer; color: #fff; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
.dvp button:focus-visible, .dvp input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.dvp svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvp svg.solid { fill: currentColor; stroke: none; }
.dvp-sound { position: absolute; left: 26px; bottom: 26px; /* film 5: titles run along the top and cards reach the bottom right; this corner stays clear */ gap: 8px; border: 1px solid #ffffff35 !important; border-radius: 99px; padding: 8px 13px; font-size: 14px; font-weight: 500; line-height: 21px; background: #33373360 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 7; }
.dvp-play { position: absolute; inset: 10px; z-index: 5; border-radius: 26px; background: #00000018 !important; width: calc(100% - 20px); height: calc(100% - 20px); padding: 0; }
.dvp-play svg { filter: drop-shadow(0 2px 8px #0005); }
.dvp-controls { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 30px 18px 12px; background: linear-gradient(transparent, #1015108c); border-radius: 0 0 26px 26px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 6; }
.dvp[data-controls="true"] .dvp-controls, .dvp[data-activated="true"]:has(:focus-visible) .dvp-controls { opacity: 1; transform: none; pointer-events: auto; }
.dvp-toolbar { display: flex; align-items: center; gap: 10px; }
.dvp-toolbar button { width: 28px; height: 32px; flex-shrink: 0; padding: 0; opacity: .85; }
.dvp-toolbar button:hover { opacity: 1; }
.dvp-toolbar svg { width: 18px; height: 18px; stroke-width: 1.8; }
.dvp [data-state="playing"] .when-paused, .dvp [data-state="paused"] .when-playing, .dvp [data-state="muted"] .when-sound, .dvp [data-state="sound"] .when-muted { display: none; }
.dvp-time { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; flex-shrink: 0; }
.dvp-duration { opacity: .6; }
.dvp-seek { appearance: none; -webkit-appearance: none; flex: 1; min-width: 20px; width: auto; height: 20px; margin: 0 7px; cursor: pointer; background: linear-gradient(to right, var(--yellow) var(--progress, 0%), #ffffff35 var(--progress, 0%)) center / 100% 2px no-repeat; }
.dvp-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.dvp-seek::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--yellow); }
.dvp-seek.dvp-volume { flex: 0 0 64px; width: 64px; min-width: 0; margin: 0; height: 32px; }
.dvp-error { position: absolute; left: 30%; top: 65%; color: #fff; background: #151811; padding: 12px; z-index: 8; }
.dvp:fullscreen { width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; background: #000; }
.dvp:fullscreen video { height: 100%; aspect-ratio: auto; border-radius: 0; }

/* Assistant marks (ChatGPT, Claude) from the inline sprite. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk { display: block; flex: none; width: 16px; height: 16px; fill: #fff; }
.mk-claude { display: none; }
.pill-logos { display: inline-flex; gap: 5px; }
.pill-logos .mk { width: 15px; height: 15px; }

/* Your AI: ChatGPT and Claude sending data into Titan (packets drawn by main.js). */
/* overflow-x: the entrance starts the logos off to the sides. */
.hub { position: relative; padding: 128px 20px 136px; overflow-x: hidden; overflow-x: clip; }
.hub .section-head { max-width: 940px; margin-bottom: 72px; }
.hub .section-lead { max-width: 560px; margin-left: auto; margin-right: auto; color: #b9bbc1; }
.flow { --logo: 108px; --tile: 184px; position: relative; max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(48px, 1fr) auto minmax(48px, 1fr) auto; grid-template-rows: auto auto; align-items: start; }
.flow::before { content: ""; position: absolute; left: 20%; right: 20%; top: -30%; height: 150%; background: radial-gradient(closest-side, rgba(243, 217, 78, .13), transparent); pointer-events: none; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-lane { fill: none; stroke: #3a3d45; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; }
.flow-packet { fill: var(--yellow); }
.flow-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 140px; padding-top: calc((var(--tile) - var(--logo)) / 2); font: 600 22px/1 var(--display); letter-spacing: -.02em; }
.flow-logo { width: var(--logo); height: var(--logo); fill: #fff; }
/* Claude has no logo here (Anthropic declined logo use, 20 Oct 2026): its name sits in a Titan chip in the logo's place. */
/* Claude has no logo here (Anthropic declined its use): its name, in a circle like the film's, takes the logo's place. */
.flow-word { display: grid; place-items: center; width: var(--logo); height: var(--logo); border: 3px solid #f4d63e; border-radius: 50%; background: #18181b; color: #fff; font: 700 calc(var(--logo) * .22)/1 var(--display); letter-spacing: -.02em; }
/* As in the film: ChatGPT's logo sits in a dark circle, the same size as Claude's. */
.flow-gpt .flow-logo { box-sizing: border-box; padding: calc(var(--logo) * .2); border: 1px solid #34373e; border-radius: 50%; background: #18181b; }
.flow-gpt { grid-column: 1; }
.flow-titan { grid-column: 3; position: relative; }
.flow-claude { grid-column: 5; }
/* As tall as ChatGPT's logo and label, so both lanes start at the same height. */
.flow-claude::after { content: ""; height: 1em; }
.flow-titan img { --pulse: 0; width: var(--tile); height: var(--tile); border-radius: 21%; transform: scale(calc(1 + .035 * var(--pulse))); box-shadow: 0 0 calc(90px + 70px * var(--pulse)) rgba(243, 217, 78, calc(.3 + .3 * var(--pulse))); }
.flow-receipt { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; padding: 9px 12px; padding-inline: 12px 15px; border-radius: 999px; border: 1px solid #34373e; background: #15161a; font-size: 14px; font-weight: 600; white-space: nowrap; }
.flow-receipt::after { content: "✓"; color: var(--yellow); }
.flow-receipt.is-in { animation: receipt 2s ease both; }
@keyframes receipt { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 12%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.flow-caps { margin-top: 56px; text-align: center; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; color: #8b8e96; }
.flow-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: 20px auto 0; }
.flow-chips li { padding: 9px 16px; border-radius: 999px; border: 1px solid #34373e; background: #15161a; font-size: 15px; font-weight: 600; }
/* Entrance, like the film: logos slide in, Titan springs up, chips pop in. Only when JS runs. */
[data-hub].is-armed .flow-gpt { opacity: 0; transform: translateX(calc(-70px * var(--x-dir))); }
[data-hub].is-armed .flow-claude { opacity: 0; transform: translateX(calc(70px * var(--x-dir))); }
[data-hub].is-armed .flow-titan { opacity: 0; transform: scale(.55); }
[data-hub].is-armed .flow-lines, [data-hub].is-armed .flow-receipt, [data-hub].is-armed .flow-caps { opacity: 0; }
[data-hub].is-armed .flow-chips li { opacity: 0; transform: translateY(24px) scale(.8); }
[data-hub].is-in .flow-gpt, [data-hub].is-in .flow-claude, [data-hub].is-in .flow-titan, [data-hub].is-in .flow-chips li { opacity: 1; transform: none; }
[data-hub].is-in .flow-lines, [data-hub].is-in .flow-caps { opacity: 1; }
.flow-gpt, .flow-claude { transition: opacity .3s, transform .9s cubic-bezier(.2, 1.3, .35, 1); }
.flow-gpt { transition-delay: .15s; } .flow-claude { transition-delay: .25s; }
.flow-titan { transition: opacity .15s, transform .8s cubic-bezier(.3, 1.6, .4, 1); }
.flow-lines { transition: opacity .6s .45s; }
.flow-caps { transition: opacity .4s .6s; }
.flow-chips li { transition: opacity .25s calc(.7s + var(--i) * .1s), transform .6s calc(.7s + var(--i) * .1s) cubic-bezier(.3, 1.5, .45, 1); }

.why { max-width: var(--max); margin: 104px auto 0; }
.why-title { text-align: center; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 44px; }
.why-card { padding-top: 22px; border-top: 1px solid var(--night-rule); }
.why-card svg { width: 24px; height: 24px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.why-card h4 { margin: 16px 0 0; font: 600 19px/1.25 var(--display); letter-spacing: -.02em; }
.why-card p { margin-top: 8px; color: var(--mist); font-size: 15px; }

/* Light sections */
.light { background: var(--paper); color: var(--ink); border-radius: 32px; position: relative; z-index: 1; }
.section { max-width: var(--max); margin: 0 auto; padding: 112px 20px 40px; }
.section-tight { padding-top: 72px; }
.section-head { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow-dark { color: var(--mist); }
.section h2, .hub h2, .closing h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; font-weight: 600; letter-spacing: -.04em; margin-top: 14px; }
.section-lead { margin-top: 18px; font-size: 18px; color: var(--ink-2); }

.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; padding: 40px 0; }
.feature-flip .feature-media { order: 2; }
.feature-media { display: grid; place-items: center; padding: 48px 24px 0; border-radius: var(--radius); background: linear-gradient(180deg, #e9ebef, #f1f2f5); overflow: hidden; height: 540px; }
.feature-media img { width: 290px; border-radius: 40px 40px 0 0; border: 9px solid #0b0c0e; background: #f2f2f6; border-bottom: 0; box-shadow: 0 30px 80px -30px rgba(13, 14, 16, .45); align-self: start; }
.step { display: inline-block; font: 600 14px/1 var(--display); color: var(--ink-3); padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.feature h3 { margin-top: 18px; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.feature-copy > p { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 480px; }
.ticks { display: grid; gap: 10px; margin-top: 22px; }
.ticks li { position: relative; padding-inline-start: 30px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3d94e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }


/* Chat demo */
.chat { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; border: 1px solid var(--night-rule); background: linear-gradient(180deg, #141518, #0d0e10); font-size: 15px; }
.bubble { max-width: 88%; padding: 12px 16px; border-radius: 18px; line-height: 1.5; }
.bubble-me { align-self: flex-end; background: #2a2c31; border-end-end-radius: 5px; }
.bubble-ai { border: 1px solid var(--night-rule); border-end-start-radius: 5px; color: #d7d8dc; }
.tool { display: block; margin-bottom: 6px; font: 600 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--yellow); }
.chat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--night-rule); }
.chat-switch { display: inline-flex; padding: 3px; border-radius: 12px; background: #1b1c20; }
.chat-switch button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #8b8e96; font: 600 13px var(--text); cursor: pointer; }
.chat-switch button[aria-pressed="true"] { background: #2c2e33; color: var(--snow); }
.chat-switch button[aria-pressed="false"] .mk { opacity: .55; }
.chat-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #8b8e96; }
.chat-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.chat[data-assistant="claude"] .bubble-me { background: #34302d; }
.chat figcaption { margin-top: 6px; font-size: 12px; color: #82858d; text-align: end; }

/* Pricing */
.plan { max-width: 480px; margin: 0 auto; padding: 32px; border-radius: 28px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 30px 80px -40px rgba(13, 14, 16, .35); }
.plan-toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 13px; background: #eef0f3; }
.plan-toggle button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; font: 600 15px var(--text); color: var(--ink-3); cursor: pointer; }
.plan-toggle button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(13, 14, 16, .12); }
.plan-price { margin-top: 28px; }
.plan-price p:first-child { display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { font: 600 56px/1 var(--display); letter-spacing: -.04em; }
.plan-price span { color: var(--ink-3); font-size: 17px; }
.plan-note { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.plan .ticks { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.plan .btn-block { background: var(--ink); color: var(--snow); }
.plan-fine { margin-top: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; padding-bottom: 72px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 600 18px/1.35 var(--display); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--text); color: var(--ink-3); transition: transform .3s var(--ease), color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 640px; }

/* Closing and footer */
/* Closing band, ported from the Digivolut page (tt-close): a dot grid that lights up as
   blurred yellow rings expand behind it, with centred copy and the hero's two buttons. */
.closing { position: relative; isolation: isolate; overflow: hidden; padding: 140px 20px 150px; text-align: center; background: var(--night); }
.close-bg { position: absolute; z-index: -1; top: 40px; left: 50%; translate: -50% 0; width: min(1200px, 100%); height: 520px; pointer-events: none; -webkit-mask: radial-gradient(50% 50% at 50% 42%, #000 40%, transparent 100%); mask: radial-gradient(50% 50% at 50% 42%, #000 40%, transparent 100%); }
.close-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(59% 50% at 50% 50%, rgba(255, 255, 255, .08) 0%, transparent 100%); }
.close-dots { position: absolute; inset: 0; -webkit-mask: radial-gradient(circle, #000 1.45px, transparent 1.8px) 0 0 / 12px 12px; mask: radial-gradient(circle, #000 1.45px, transparent 1.8px) 0 0 / 12px 12px; }
.close-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: blur(14px); }
.close-rings i { position: absolute; width: 100%; aspect-ratio: 1; border: clamp(64px, 10vh, 160px) solid #cdb42a; border-radius: 999em; opacity: 0; transform: scale(0); animation: close-ring 9s ease infinite; }
.close-rings i:nth-child(2) { animation-delay: 3s; }
.close-rings i:nth-child(3) { animation-delay: 6s; }
.closing:not(.is-live) .close-rings i { animation-play-state: paused; }
@keyframes close-ring { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.close-copy { position: relative; max-width: 1056px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.closing h2 { max-width: 20ch; margin-top: 0; }
.close-sub { max-width: 44ch; font-size: 18px; line-height: 1.4; color: rgba(255, 255, 255, .73); }
.closing .ctas { margin-top: 12px; }
/* Waitlist, in the closing section: the visitor's phone, their email and one button. */
.waitlist { position: relative; width: min(100%, 540px); margin-top: 14px; display: grid; justify-items: center; gap: 14px; }
.wl-platform { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid color-mix(in srgb, var(--snow) 18%, transparent); border-radius: 999px; }
.wl-platform label { position: relative; }
.wl-platform input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wl-platform span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: .64; transition: opacity .15s ease-out, background-color .15s ease-out; }
.wl-platform input:checked + span { opacity: 1; background: color-mix(in srgb, var(--snow) 13%, transparent); }
.wl-platform input:hover + span { opacity: 1; }
.wl-platform input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.wl-field { display: flex; gap: 10px; width: 100%; }
.wl-field input { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: 1px solid var(--night-rule); border-radius: 14px; background: var(--night-2); color: var(--snow); font: 16px var(--text); transition: border-color .2s, box-shadow .2s; }
.wl-field input::placeholder { color: #82858d; }
.wl-field input:focus-visible { outline: none; border-color: rgba(243, 217, 78, .7); box-shadow: 0 0 0 3px rgba(243, 217, 78, .2); }
.wl-field input[aria-invalid="true"] { border-color: #ff8a73; }
.wl-field .btn { flex: none; }
.wl-status { font-size: 14px; color: #ff9f8a; }
.wl-status:empty { display: none; }
.wl-note { font-size: 13px; color: rgba(255, 255, 255, .55); }
.wl-note a { color: inherit; text-underline-offset: 3px; }
.wl-note a:hover { color: var(--snow); }
/* Android is live: one download button in the site's own yellow (Linear-style, per Mobbin), and a quiet
   line naming the store and the iPhone release still to come. The waitlist forms are gone. */
.get-app { display: grid; justify-items: center; gap: 12px; margin: 30px 0 0; }
.get-btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
.get-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.get-note { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.wl-trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist[aria-busy="true"] .btn { opacity: .7; cursor: progress; }
.wl-done { display: flex; align-items: center; gap: 14px; max-width: 520px; margin-top: 14px; padding: 16px 20px; border: 1px solid rgba(110, 231, 168, .35); border-radius: 16px; background: rgba(110, 231, 168, .08); text-align: start; font-size: 16px; color: rgba(255, 255, 255, .8); }
.wl-done[hidden] { display: none; }
.wl-done:focus { outline: none; }
.wl-done strong { color: var(--snow); font-weight: 600; }
.wl-check { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #6ee7a8; }
.wl-check svg { width: 18px; height: 18px; fill: none; stroke: #0b0c0e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* The answer page for forms posted without JavaScript. */
.waitlist-page main { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.waitlist-page h1 { font: 600 clamp(30px, 5vw, 46px)/1.1 var(--display); letter-spacing: -.03em; }
.waitlist-page p { color: var(--mist); }
/* 404.html: the same centred page, with the nine home pages. */
.not-found main { max-width: 640px; margin: 0 auto; }
.not-found .brand { color: var(--snow); }
.not-found .lang { justify-content: center; font-size: 13px; color: #c9cbd1; }
.not-found-links { font-size: 14px; }
.not-found-links a { color: inherit; text-underline-offset: 3px; }
/* Visually hidden, still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer { border-top: 1px solid var(--night-rule); background: var(--night); }
/* Until the page has loaded (main.js adds .is-loaded), the footer and its nine flag images wait, so
   they never compete with the hero's first paint. Without JavaScript it renders on approach. */
html:not(.is-loaded) .footer { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 40px 20px 44px; display: grid; gap: 28px; font-size: 14px; color: var(--mist); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer-links a { display: inline-block; padding-block: 8px; }
.footer-links a, .footer-legal a, .footer-legal button { color: inherit; text-decoration: none; transition: color .2s; }
.footer-links a:hover, .footer-legal a:hover, .footer-legal button:hover { color: var(--snow); }
.made-by { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--night-rule); border-radius: 999px; font-size: 13px; text-decoration: none; transition: border-color .25s, color .25s; }
.made-by img { width: 22px; height: 22px; border-radius: 6px; }
.made-by strong { color: var(--snow); font-weight: 600; }
.footer-legal { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--night-rule); font-size: 13px; color: #8b8e96; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.footer-legal .lang { justify-self: start; font-size: 13px; color: #c9cbd1; }
.footer-legal .lang-item { min-height: 36px; }
.footer-legal .lang-item:hover { color: inherit; }

/* Responsive */
@media (max-width: 960px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature-flip .feature-media { order: 0; }
  .feature-media { height: 460px; }
}
/* The smallest phones keep the Titan mark without the wordmark so the pill and the button fit. */
@media (max-width: 359px) {
  .nav .brand { gap: 0; font-size: 0; }
  /* A kept phrase can be wider than a 320px column (Arabic's hero line is 313px): let it wrap. */
  .keep { white-space: normal; }
}
/* Buttons with a long and a short label (the nav button) switch on phones. */
.label-short { display: none; }
@media (max-width: 480px) {
  .label-long { display: none; }
  .label-short { display: inline; }
  .wl-field { flex-direction: column; }
  .waitlist .wl-field .btn { width: 100%; }
}
@media (max-width: 720px) {
  .nav-inner { gap: 12px; }
  .nav nav { display: none; }
  .nav .lang, .nav .lang-menu { margin: 0; margin-inline-start: auto; }
  /* The open list hangs from the bar's end edge, not from the language button, so nine
     languages stay on screen whatever the width of the button beside it. */
  .nav-inner { position: relative; }
  .nav .lang-menu { position: static; }
  .hero { padding-top: 112px; padding-inline: 16px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .lead { margin-top: 18px; font-size: 17px; }
  .ctas { margin-top: 28px; }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .why-card { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; padding-block: 20px; }
  .why-card h4 { margin: 0; align-self: center; }
  .why-card p { grid-column: 2; }
  .hub { padding: 96px 16px 104px; }
  .flow { --logo: 72px; --tile: 124px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; row-gap: 64px; }
  .flow-node { min-width: 84px; padding-top: 0; gap: 12px; font-size: 16px; }
  .flow-gpt { grid-column: 1; grid-row: 1; justify-self: start; }
  .flow-claude { grid-column: 2; grid-row: 1; justify-self: end; }
  .flow-titan { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .flow-receipt { grid-row: 3; margin-top: -26px; font-size: 13px; }
  .flow-caps { margin-top: 44px; font-size: 11px; letter-spacing: .2em; }
  .flow-chips li { padding: 8px 13px; font-size: 14px; }
  .why { margin-top: 80px; }
  .chat { padding: 20px; }
  .section { padding-top: 84px; }
  .section-head { margin-bottom: 40px; }
  .feature { padding: 24px 0; }
  .feature-media { height: 400px; padding-top: 36px; }
  .feature-media img { width: 230px; border-radius: 32px 32px 0 0; border-width: 7px; }
  .plan { padding: 24px; }
  .btn-glow, .btn-dark { width: 100%; }
  /* The email row keeps the field and its button side by side until 480px stacks them. */
  .wl-field .btn { width: auto; }
}
@media (max-width: 600px) {
  .dvp { padding: 7px; border-radius: 24px; }
  .dvp video { border-radius: 17px; }
  /* Top left on phones: the film's chat bubbles sit in the top right corner. */
  .dvp-sound { bottom: 17px; left: 17px; padding: 6px 10px; gap: 6px; font-size: 12px; }
  .dvp-sound svg { width: 16px; height: 16px; }
  .dvp-play { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 17px; }
  .dvp-play svg { width: 32px; height: 32px; }
  .dvp-controls { left: 7px; right: 7px; bottom: 7px; padding: 20px 10px 7px; border-radius: 0 0 17px 17px; }
  .dvp-toolbar { gap: 5px; }
  .dvp-toolbar button { width: 26px; height: 28px; }
  .dvp-toolbar svg { width: 16px; height: 16px; }
  .dvp-time { font-size: 11px; }
  .dvp-seek { margin: 0 5px; }
  .dvp-seek.dvp-volume { flex-basis: 48px; width: 48px; }
  .dvp-duration { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .flow-receipt.is-in { animation: none; }
}

.chips li svg { stroke: #ff8b8f; }
.light .chat { color: var(--snow); box-shadow: 0 40px 90px -40px rgba(13, 14, 16, .6); }

/* Light motion. Hero entrance on load; main.js fades below-the-fold blocks up as they
   enter (never what is already on screen). Reduced motion turns all of it off. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rise-blur { from { transform: translateY(12px); filter: blur(8px); } to { transform: none; filter: blur(0); } }
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > h1 { animation-name: rise-blur; animation-duration: 1s; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4) { animation-delay: .4s; }
.hero-copy > :nth-child(5) { animation-delay: .5s; }
.hero .stage { width: 100%; animation: rise 1s var(--ease) .5s both; }
html.motion .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.motion .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
@media (hover: hover) and (pointer: fine) {
  .why-card, .how-get, .how-connect { transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
  .why-card:hover { transform: translateY(-3px); border-color: #34373e; }
  .how-get:hover, .how-connect:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -34px rgba(13, 14, 16, .4); }
}

/* How it works: three steps; step 3 is the live chat-to-Titan demo (main.js). */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.how-card { position: relative; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); padding: 12px 12px 28px; }
.how-visual { position: relative; display: grid; place-items: center; align-content: center; height: 196px; margin-bottom: 22px; border-radius: 16px; background: linear-gradient(180deg, #eceef2, #f5f6f8); overflow: hidden; }
.how-copy { padding: 0 16px; }
.how-copy h3 { margin-top: 14px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.how-copy p { margin-top: 6px; color: var(--ink-2); }
.get-icon { position: relative; display: grid; place-items: center; width: 100px; height: 100px; }
.get-icon img { width: 66px; height: 66px; border-radius: 21%; box-shadow: 0 16px 30px -12px rgba(217, 189, 33, .75); }
.get-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.get-ring circle { fill: none; stroke: var(--yellow-deep); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 290; stroke-dashoffset: 0; opacity: 0; }
.get-os { display: flex; gap: 8px; margin-top: 12px; }
.get-os span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.connect { display: grid; gap: 8px; width: min(300px, 88%); }
.connect-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #101113; color: var(--snow); font-size: 13px; font-weight: 600; box-shadow: 0 12px 26px -16px rgba(13, 14, 16, .6); }
.connect-row .mk { width: 18px; height: 18px; }
.connect-row em { font-style: normal; font-size: 12px; font-weight: 500; color: #8b8e96; }
.toggle { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--yellow); }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(calc(14px * var(--x-dir))); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: no-preference) {
  .how-get.is-live .get-ring circle { animation: install 5s var(--ease) infinite; }
  .how-get.is-live .get-icon img { animation: land 5s var(--ease) infinite; }
  .how-connect.is-live .toggle { animation: toggle-track 6s var(--ease) infinite; }
  .how-connect.is-live .toggle::after { animation: toggle-knob 6s var(--ease) infinite; }
  .how-connect.is-live .connect-row em { animation: toggle-label 6s var(--ease) infinite; }
  .how-connect.is-live .connect-row + .connect-row :is(.toggle, em), .how-connect.is-live .connect-row + .connect-row .toggle::after { animation-delay: .7s; }
}
@keyframes install { 0% { stroke-dashoffset: 290; opacity: 1; } 34% { stroke-dashoffset: 0; opacity: 1; } 46%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes land { 0%, 32% { transform: scale(.86); filter: grayscale(.8); } 42% { transform: scale(1.07); filter: none; } 50%, 100% { transform: none; } }
@keyframes toggle-track { 0%, 14% { background: #2c2e33; } 20%, 82% { background: var(--yellow); } 88%, 100% { background: #2c2e33; } }
@keyframes toggle-knob { 0%, 14% { transform: none; } 20%, 82% { transform: translateX(calc(14px * var(--x-dir))); } 88%, 100% { transform: none; } }
@keyframes toggle-label { 0%, 14% { color: #8b8e96; } 20%, 82% { color: var(--yellow); } 88%, 100% { color: #8b8e96; } }

.how-talk { grid-column: 1 / -1; display: grid; gap: 24px; padding: 28px; }
.how-talk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.how-talk .how-copy { padding: 0 4px; }
.how-talk .how-copy h3 { margin-top: 14px; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; }
.demo-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #eef0f3; }
.demo-tabs button { position: relative; padding: 10px 16px 13px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); font: 600 14px var(--text); white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), color .3s, box-shadow .3s; }
.demo-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(13, 14, 16, .12); }
.demo-tabs i { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; opacity: 0; }
.demo-tabs i::after { content: ""; position: absolute; inset: 0; background: var(--yellow-deep); transform-origin: left; transform: scaleX(var(--progress, 0)); }
.demo-tabs button[aria-selected="true"] i { opacity: 1; }

/* The stage: the film's scene, live. Chat on the left, Titan on a phone on the right,
   and a packet flies from the tool call into the app. */
.demo-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 262px; align-items: center; gap: 64px; padding: 44px 56px 52px; border-radius: 24px; overflow: hidden; color: var(--snow);
  background:
    radial-gradient(360px 300px at calc(100% - 180px) 50%, rgba(243, 217, 78, .15), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
    #0b0c0e; }
.demo-flow { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.demo-flow path { fill: none; stroke: url(#demo-flow-fade); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.demo-flow circle { fill: #fffbe6; opacity: 0; filter: drop-shadow(0 0 8px var(--yellow)) drop-shadow(0 0 18px var(--yellow)); }
.demo-chat { display: flex; flex-direction: column; height: 432px; padding: 0; overflow: hidden; border-radius: 22px; background: #131417; }
.demo-chat .chat-head { margin: 0; padding: 16px 18px 14px; }
.demo-chat .chat-thread { flex: 1; padding: 16px 18px; overflow: hidden; }
.chat-composer { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 8px; padding-inline: 16px 8px; border-radius: 16px; border: 1px solid var(--night-rule); background: #0e0f11; font-size: 14px; color: #82858d; min-height: 50px; }
.chat-composer span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-composer.is-typing span { color: var(--snow); }
.chat-composer.is-typing span::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: -2px; background: var(--yellow); animation: caret .9s steps(2) infinite; }
.chat-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #2c2e33; transition: background .25s, transform .25s var(--ease); }
.chat-send svg { width: 16px; height: 16px; fill: none; stroke: #8b8e96; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-composer.is-typing .chat-send { background: var(--snow); }
.chat-composer.is-typing .chat-send svg { stroke: var(--ink); }
.chat-composer.is-sent .chat-send { transform: scale(.85); }
.demo-note { position: absolute; inset-inline-start: 56px; bottom: 16px; font-size: 12px; color: #82858d; }
.chat-thread { display: flex; flex-direction: column; gap: 12px; }
.chat-thread > :not([hidden]) { animation: bubble-in .45s var(--ease) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes caret { 50% { opacity: 0; } }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--night-rule); border-end-start-radius: 5px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8b8e96; animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.tool.is-pending::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-start: 7px; vertical-align: -1px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.reply { display: block; }
.reply:not([hidden]) { animation: rise .45s var(--ease) both; }

/* Titan on a phone, drawn like the app. */
.phone { position: relative; z-index: 1; width: 262px; height: 500px; padding: 8px; border-radius: 42px; background: #1c1d21; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.phone-screen { height: 100%; padding: 14px 16px; border-radius: 34px; background: #0d0e10; overflow: hidden; }
.phone-status { display: flex; align-items: center; justify-content: space-between; height: 22px; margin-bottom: 14px; padding: 0 6px; font: 600 12px var(--text); }
.phone-status i { width: 62px; height: 20px; margin-inline-end: 48px; border-radius: 999px; background: #000; }
.tp-scene { display: flex; flex-direction: column; gap: 10px; }
.tp-scene:not([hidden]) { animation: rise .5s var(--ease) both; }
.tp-kicker { font: 600 10px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #8b8e96; }
.tp-title { margin-top: -2px; font: 700 24px/1.1 var(--display); letter-spacing: -.02em; }
.tp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; font-size: 12px; color: #8b8e96; }
.tp-card { padding: 14px; border-radius: 16px; background: #17181b; }
.tp-label { font-size: 11px; color: #8b8e96; }
.tp-kcal { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 10px; }
.tp-kcal strong { font: 700 28px/1.05 var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tp-kcal span { font-size: 11px; color: #8b8e96; }
.tp-meter { height: 6px; border-radius: 6px; background: #2a2c31; overflow: hidden; }
.tp-meter i { display: block; height: 100%; border-radius: inherit; background: var(--yellow); }
.tp-macros { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; font-size: 10px; color: #8b8e96; }
.tp-macros strong { display: block; font-size: 14px; color: var(--snow); font-variant-numeric: tabular-nums; }
.tp-section { margin-top: 4px; font: 600 15px var(--display); }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.tp-row small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: #8b8e96; }
.tp-row b { font-variant-numeric: tabular-nums; }
.tp-via { display: inline-block; width: fit-content; padding: 1px 7px; border-radius: 999px; background: rgba(243, 217, 78, .14); color: var(--yellow) !important; font-size: 10px !important; font-weight: 600 !important; }
.tp-new { background: #17181b; }
.tp-new:not([hidden]) { animation: rise .5s var(--ease) both, flash 1.8s var(--ease) both; }
@keyframes flash { from { box-shadow: inset 0 0 0 1px rgba(243, 217, 78, .7); background: rgba(243, 217, 78, .16); } to { box-shadow: inset 0 0 0 1px rgba(243, 217, 78, 0); background: #17181b; } }
.tp-empty { padding: 26px 0; border: 1px dashed #2a2c31; border-radius: 14px; text-align: center; font-size: 12px; color: #82858d; }
.tp-workout { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 14px; background: #17181b; }
.tp-workout:not([hidden]) { animation: rise .45s var(--ease) both; }
.tp-workout img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; object-position: 50% 30%; background: #202124; }
.tp-workout p { display: grid; font-size: 11px; color: #8b8e96; }
.tp-workout b { font: 600 15px var(--display); color: var(--snow); }
.tp-chart { display: block; width: 100%; height: auto; margin: 4px 0; overflow: visible; }
.tp-grid { fill: none; stroke: #232428; stroke-width: 1; }
.tp-line { fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
.tp-chart text { fill: #8b8e96; font: 600 9px var(--text); text-anchor: end; }
.tp-plan { padding: 14px; border-radius: 16px; border: 1px solid rgba(243, 217, 78, .35); background: rgba(243, 217, 78, .07); }
.tp-plan:not([hidden]) { animation: pop .6s cubic-bezier(.3, 1.5, .45, 1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.tp-plan .tp-label { color: var(--yellow); }
.tp-big { margin-top: 4px; font: 700 20px/1.2 var(--display); }
.tp-small { margin-top: 2px; font-size: 12px; color: #a4a6ad; }

/* Callouts on the app screens: numbers from the screenshot, animated while in view. */
.feature-media { position: relative; }
.co { position: absolute; top: var(--y); z-index: 2; max-width: 188px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(13, 14, 16, .9); color: var(--snow); text-align: start; box-shadow: 0 22px 44px -20px rgba(13, 14, 16, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(-50%); }
/* Logical sides: each page shows the app in its own language, and the Arabic app is mirrored. */
.co-start { inset-inline-start: 18px; }
.co-end { inset-inline-end: 18px; }
.co-l { font: 600 10px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #9a9ca3; }
.co-v { margin-top: 4px; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.co-s { margin-top: 3px; font-size: 12px; color: #a4a6ad; }
.co-rotation { max-width: none; }
.co-steps { display: flex; gap: 4px; margin-top: 7px; }
.co-steps span { padding: 4px 8px; border-radius: 999px; background: #1d1e22; color: #8b8e96; font-size: 12px; font-weight: 600; transition: background .4s var(--ease), color .4s; }
.co-steps .is-on { background: var(--yellow); color: var(--ink); }
.co-spark { display: block; width: 120px; height: 30px; margin-top: 6px; overflow: visible; }
.co-spark path { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.co-toast { display: flex; align-items: center; gap: 10px; max-width: 250px; }
.co-toast .mk { width: 22px; height: 22px; }
.co-t { font-size: 13px; font-weight: 600; white-space: nowrap; }
html.motion [data-feature] .co { opacity: 0; transform: translateY(calc(-50% + 14px)) scale(.95); transition: opacity .5s var(--ease), transform .8s var(--ease); }
html.motion [data-feature] .co + .co { transition-delay: .2s; }
html.motion [data-feature].is-live .co { opacity: 1; transform: translateY(-50%); }
html.motion [data-feature] .co-spark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .5s; }
html.motion [data-feature].is-live .co-spark path { stroke-dashoffset: 0; }

/* FAQ answers slide open where the browser can animate to auto height. */
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Privacy choices, as on foxary.com (built by main.js). */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.consent-card { pointer-events: auto; display: flex; align-items: center; gap: 16px; width: min(680px, 100%); padding: 16px 18px; border-radius: 18px; border: 1px solid var(--night-rule); background: rgba(19, 20, 23, .95); color: var(--snow); box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: rise .6s var(--ease) both; }
.consent-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #1f2024; color: var(--yellow); }
.consent-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.consent-copy { flex: 1; font-size: 14px; color: #b9bbc1; }
.consent-copy strong { display: block; color: var(--snow); }
.consent-link { padding: 0; border: 0; background: none; color: var(--snow); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-actions, .consent-dialog-actions { display: flex; gap: 8px; }
.consent-actions { flex: none; }
.consent button.consent-btn, .consent-dialog button.consent-btn { min-height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid #34373e; background: #1f2024; color: var(--snow); font: 600 14px var(--text); cursor: pointer; transition: background .2s; }
.consent-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--night-rule); border-radius: 22px; background: #131417; color: var(--snow); box-shadow: 0 30px 80px -20px #000; }
.consent-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.consent-dialog[open] { animation: rise .45s var(--ease) both; }
.consent-dialog form { display: grid; gap: 12px; padding: 24px; }
.consent-dialog h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.consent-dialog form > p { font-size: 14px; color: #b9bbc1; }
.consent-dialog form > p a { color: var(--snow); }
.consent-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; background: #1b1c20; }
label.consent-option { cursor: pointer; }
.consent-option strong { font-size: 15px; }
.consent-option small { display: block; margin-top: 2px; font-size: 13px; color: #8b8e96; }
.consent-always { flex: none; font-size: 12px; color: #8b8e96; }
.consent-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #34373e; transition: background .25s var(--ease); }
.consent-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.consent-option input:checked + .consent-switch { background: var(--yellow); }
.consent-option input:checked + .consent-switch::after { transform: translateX(calc(18px * var(--x-dir))); }
.consent-option input:focus-visible + .consent-switch { outline: 2px solid var(--yellow); outline-offset: 3px; }
.consent-dialog-actions { flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.consent-close { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #8b8e96; font-size: 20px; line-height: 1; cursor: pointer; }
.consent-close:hover { background: #1f2024; color: var(--snow); }

/* Legal pages */
.legal-page .light { margin-top: 8px; }
.legal { max-width: 800px; margin: 0 auto; padding: 96px 20px 104px; }
.legal-head h1 { margin-top: 14px; font-size: clamp(40px, 6vw, 60px); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; }
.legal-lead { margin-top: 16px; font-size: 18px; color: var(--ink-2); }
.legal-date { margin-top: 16px; font: 600 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.legal-list { margin-top: 56px; }
.legal-list > li { display: grid; grid-template-columns: 56px 1fr; gap: 10px 16px; padding: 28px 0; border-top: 1px solid var(--rule); }
.legal-list > li > span { font: 600 14px/1.9 var(--display); color: var(--ink-3); }
.legal-list h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.legal-body { grid-column: 2; display: grid; gap: 10px; color: var(--ink-2); }
.legal-body ul { display: grid; gap: 6px; padding-inline-start: 20px; list-style: disc; }
.legal-body a { color: var(--ink); text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
  .demo-stage { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; padding: 36px 32px 48px; }
  .phone { width: 240px; height: 470px; }
  .demo-note { inset-inline-start: 32px; }
}
@media (max-width: 720px) {
  .how { grid-template-columns: 1fr; }
  .how-visual { height: 176px; }
  .how-talk { padding: 16px 12px 12px; gap: 16px; }
  .demo-tabs { width: 100%; }
  .demo-tabs button { flex: 1; padding: 9px 6px 13px; font-size: 13px; line-height: 1.25; white-space: normal; }
  .demo-tabs i { left: 10px; right: 10px; }
  .demo-stage { grid-template-columns: 1fr; justify-items: center; gap: 44px; padding: 14px 12px 56px; border-radius: 18px;
    background: radial-gradient(300px 260px at 50% 78%, rgba(243, 217, 78, .15), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px, #0b0c0e; }
  .demo-chat { width: 100%; height: 350px; }
  .phone { width: min(236px, 100%); height: 440px; }
  /* Room for two lines under the phone: longer notes wrap on small phones. */
  .demo-note { left: 0; right: 0; bottom: 12px; padding: 0 8px; line-height: 1.4; text-align: center; }
  .co { max-width: 150px; padding: 10px 12px; }
  .co-start { inset-inline-start: 10px; }
  .co-end { inset-inline-end: 10px; }
  .co-v { font-size: 18px; }
  .co-extra { display: none; }
  .co-rotation { left: 10px; right: 10px; top: 84%; max-width: none; }
  .co-steps span { flex: 1; text-align: center; }
  .co-spark { width: 100px; }
  .co-toast { max-width: 230px; }
  .consent-card { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .consent-icon { display: none; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1; }
  .made-by { margin-inline-start: 0; }
  .closing { padding: 100px 16px 110px; }
  .close-sub { font-size: 16px; }
  .legal { padding-top: 72px; }
  .legal-list > li { grid-template-columns: 1fr; }
  .legal-body { grid-column: 1; }
}
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .close-rings i { animation: none; }
  .hero-copy > *, .hero .stage, .consent-card, .consent-dialog[open], .chat-thread > *, .reply, .tp-scene, .tp-new, .tp-workout, .tp-plan, .typing i, .tool.is-pending::after { animation: none !important; }
  .demo-tabs i { display: none; }
}

/* Buttons: one quiet vocabulary shared with the Digivolut page. Labels roll up to a copy
   of themselves, arrows swap, and a press sinks a little. Hover effects are for pointers
   only, so nothing sticks after a tap; reduced motion turns the movement off. */
.btn, .made-by, .dvp-sound, .consent-btn, .demo-tabs button, .plan-toggle button, .chat-switch button { transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .45s var(--ease), color .3s var(--ease), transform .2s var(--ease); }
.btn-text { display: inline-flex; height: 1.35em; overflow: hidden; }
.btn-label { display: inline-block; line-height: 1.35em; white-space: nowrap; text-shadow: 0 1.35em currentColor; transition: transform .45s var(--ease); }
.btn-arrow svg, .made-by-arrow svg { grid-area: 1 / 1; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.btn-arrow svg + svg { transform: translateY(-22px); }
.btn-up .btn-arrow svg + svg { transform: translateY(22px); }
.made-by-arrow { display: grid; place-items: center; width: 14px; height: 14px; overflow: hidden; }
.made-by-arrow svg + svg { transform: translate(-14px, 14px); }
.dvp-play svg { transition: transform .45s var(--ease); }
.btn-status, .btn-status:active { cursor: default; transform: none; }
.btn:active, .made-by:active, .dvp-sound:active, .consent-btn:active, .demo-tabs button:active, .plan-toggle button:active, .chat-switch button:active { transform: scale(.97); }
.btn-status:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #f7e26a; }
  .btn-dark:hover { background: #1b1d21; border-color: #34373e; }
  .btn-glow:hover { box-shadow: 0 0 0 1px rgba(243, 217, 78, .55), 0 14px 46px -8px rgba(243, 217, 78, .75); }
  .btn-status:hover { background: var(--ink); }
  .btn:not(.btn-status):hover .btn-label { transform: translateY(-1.35em); }
  .btn:hover .btn-arrow svg:first-child { transform: translateY(22px); }
  .btn-up:hover .btn-arrow svg:first-child { transform: translateY(-22px); }
  .btn:hover .btn-arrow svg + svg { transform: none; }
  .made-by:hover { border-color: #3a3d45; color: var(--snow); }
  .made-by:hover .made-by-arrow svg:first-child { transform: translate(14px, -14px); }
  .made-by:hover .made-by-arrow svg + svg { transform: none; }
  .dvp-sound:hover { background: #33373390 !important; }
  .dvp-play:hover svg { transform: scale(1.08); }
  .consent button.consent-btn:hover, .consent-dialog button.consent-btn:hover { background: #2a2c31; border-color: #44474f; }
  .demo-tabs button:not([aria-selected="true"]):hover, .plan-toggle button:not([aria-checked="true"]):hover { background: rgba(13, 14, 16, .045); color: var(--ink); }
  .chat-switch button:not([aria-pressed="true"]):hover { background: #232428; color: var(--snow); }
  .faq summary:hover::after { color: var(--ink); }
}

/* Connect page (/connect/): pick the assistant in the hero and every step follows it
   (connect.js hides the other assistants' variants; without JavaScript all of them show).
   Step visuals are dark "screens" in Titan's style, labelled as illustrations; the sign-in
   and consent screens show Titan's real wording. Page-only pieces are prefixed cx-. */
.cx-hero { padding-bottom: 48px; }
.cx-hero-grid, .gd-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 32px; text-align: left; }
.cx-hero .hero-copy, .gd-hero .hero-copy { margin: 0; }
.cx-hero .lead, .gd-hero .lead { margin-left: 0; margin-right: 0; }
.gd-hero .ctas { justify-content: flex-start; }
.cx-choose { margin-top: 30px; animation: rise .8s var(--ease) .45s both; }
.cx-choose > p { font: 600 14px/1.3 var(--text); color: #d7d8dc; }
.cx-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.cx-choice { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 14px; border: 1px solid var(--night-rule); border-radius: 16px; background: rgba(19, 20, 23, .82); color: var(--snow); text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease), transform .16s var(--ease); }
.cx-choice .mk { flex: none; width: 26px; height: 26px; }
/* Line icons (the bot for other assistants) are strokes; on light surfaces, marks take the ink colour. */
.mk-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.cx-seg, .cx-plan-name) .mk:not(.mk-claude, .mk-line) { fill: currentColor; }
.cx-choice-text { display: grid; gap: 3px; min-width: 0; }
.cx-choice strong { font: 600 16px/1.2 var(--display); letter-spacing: -.01em; }
.cx-choice small { font-size: 12.5px; line-height: 1.3; color: var(--mist); }
.cx-choice[aria-current="true"] { border-color: rgba(243, 217, 78, .8); background: #1d1c14; box-shadow: 0 0 0 1px rgba(243, 217, 78, .8) inset, 0 14px 44px -20px rgba(243, 217, 78, .55); }
.cx-choice:active, .cx-seg:active, .gd-filter a:active, .gd-copy:active { transform: scale(.97); }
.cx-buddy, .gd-buddy { position: relative; margin: 0; animation: rise 1s var(--ease) .35s both; }
.cx-buddy img, .gd-buddy img { width: 100%; max-width: 440px; margin: 40px auto 0; filter: drop-shadow(0 34px 36px rgba(0, 0, 0, .5)); }
.cx-says, .gd-bubble { position: absolute; top: 3%; left: 0; max-width: 58%; padding: 12px 16px; border-radius: 18px 18px 5px 18px; background: #2a2c31; color: var(--snow); font: 600 16px/1.3 var(--display); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.cx-need { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; max-width: 1100px; margin: 48px auto 0; padding-top: 26px; border-top: 1px solid var(--night-rule); font-size: 14px; color: var(--mist); }
.cx-need li { display: flex; align-items: center; gap: 10px; }
.cx-soon { position: relative; max-width: 1100px; margin: 18px auto 0; text-align: center; font-size: 14px; color: var(--mist); }
.gd-hero .cx-soon { margin: 14px 0 0; text-align: inherit; }
.cx-soon a { color: var(--yellow); font-weight: 600; text-underline-offset: 3px; }
.cx-need svg { flex: none; width: 14px; height: 14px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: rgba(243, 217, 78, .14); fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cx-need strong { margin-right: 6px; color: var(--snow); font-weight: 600; }

/* The walkthrough: numbered stages on a rail, each a card with its copy and a dark screen. */
.cx-switch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: -30px auto 44px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.cx-segs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e9ebef; }
.cx-seg { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; color: var(--ink-3); font: 600 14px var(--text); text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .16s var(--ease); }
.cx-seg .mk { width: 18px; height: 18px; }
.cx-seg small { display: none; }
.cx-seg strong { font-weight: 600; }
.cx-seg[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(13, 14, 16, .12); }
.cx-seg[aria-current="false"] .mk { opacity: .55; }
.cx-flow { position: relative; display: grid; gap: 22px; }
.cx-flow::before { content: ""; position: absolute; left: 25px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: var(--rule); }
.cx-stage { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 20px; scroll-margin-top: 96px; }
.cx-num { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-top: 18px; border-radius: 50%; background: var(--ink); color: var(--yellow); font: 700 17px/1 var(--display); box-shadow: 0 0 0 7px var(--paper); }
.cx-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 36px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); scroll-margin-top: 150px; }
.cx-variants { display: grid; gap: 14px; }
.cx-stage-copy { padding: 18px 8px 18px 20px; }
.cx-stage-copy h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.cx-stage-copy > p { margin-top: 10px; font-size: 17px; color: var(--ink-2); max-width: 440px; }
.cx-stage-copy kbd, .cx-how kbd, .gd-how kbd, .sp kbd { display: inline-block; padding: 0 8px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 7px; background: var(--paper); font: 600 13.5px/1.6 var(--text); color: var(--ink); white-space: nowrap; }
.cx-fine { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.cx-visual { position: relative; display: grid; place-items: center; align-content: center; gap: 18px; min-height: 320px; padding: 44px 28px; border-radius: 16px; overflow: hidden; color: var(--snow);
  background:
    radial-gradient(320px 240px at 50% 42%, rgba(243, 217, 78, .14), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
    #0b0c0e; }
.cx-illus { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: #82858d; }
.cx-plan { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cx-plan svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--yellow-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx-plan strong { color: var(--ink); font-weight: 600; }
.cx-how { display: grid; gap: 14px; margin-top: 20px; counter-reset: how; }
.cx-how li { position: relative; padding-left: 40px; color: var(--ink-2); counter-increment: how; }
.cx-how li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); font: 700 13px/1 var(--display); }
.cx-open { margin-top: 22px; }
.cx-open .cx-icon { width: 17px; height: 17px; }
.btn .cx-icon, .gd-copy .cx-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.is-done { background: #e8e9ec; }

/* 01 · the link */
.cx-linkcard { width: min(440px, 100%); padding: 22px; border-radius: 20px; border: 1px solid var(--night-rule); background: linear-gradient(180deg, #16171b, #101114); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.cx-linkcard-top { display: flex; align-items: center; gap: 12px; font: 600 17px/1.2 var(--display); letter-spacing: -.01em; }
.cx-linkcard-top img { width: 38px; height: 38px; border-radius: 21%; box-shadow: 0 10px 24px -10px rgba(243, 217, 78, .7); }
.cx-label { display: block; margin: 20px 0 8px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8b8e96; }
.cx-url { display: block; padding: 15px 14px; border: 1px solid #34373e; border-radius: 13px; background: #08090a; color: #fff; font: 500 15px/1.35 ui-monospace, "SF Mono", Menlo, monospace; text-align: center; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.cx-copy-btn { width: 100%; margin-top: 10px; }

/* 02 · where to go in the assistant, and the form to fill in */
.cx-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #c7c9ce; }
.cx-route li { display: flex; align-items: center; gap: 6px; }
.cx-route li + li::before { content: "›"; color: #82858d; }
.cx-route li:last-child { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(243, 217, 78, .6); color: var(--yellow); }
.cx-dialog { width: min(380px, 100%); padding: 18px; border-radius: 18px; border: 1px solid #2c2e33; background: #141518; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85); }
.cx-dialog-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #25272c; font-size: 14px; font-weight: 600; }
.cx-dialog-head .mk { width: 20px; height: 20px; }
.cx-dialog-head i { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #2c2e33; }
.cx-field { display: grid; gap: 6px; margin-top: 14px; font-size: 12px; color: #8b8e96; }
.cx-field em { display: block; padding: 11px 12px; border: 1px solid #2c2e33; border-radius: 10px; background: #0b0c0e; font-style: normal; font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-field em.is-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--yellow); animation: cx-caret 1.1s steps(1) infinite; }
.cx-field .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.cx-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cx-dialog-actions span { padding: 8px 14px; border-radius: 10px; border: 1px solid #2c2e33; font-size: 13px; font-weight: 600; color: #c7c9ce; }
.cx-dialog-actions .is-go { border-color: transparent; background: var(--snow); color: var(--ink); animation: cx-press 3.2s ease-in-out infinite; }
@keyframes cx-caret { 50% { opacity: 0; } }
@keyframes cx-press { 0%, 70%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(243, 217, 78, 0); } 78% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(243, 217, 78, .35); } }

/* 03 · Titan's own sign-in and consent screens */
.cx-allow { display: grid; grid-auto-flow: column; align-items: center; gap: 14px; }
.cx-screen { width: 190px; padding: 18px 16px; border-radius: 18px; border: 1px solid #2c2e33; background: #141518; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85); }
.cx-screen-kicker { font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: #8b8e96; }
.cx-screen-title { margin-top: 10px; font: 600 15px/1.3 var(--display); letter-spacing: -.01em; }
.cx-apple { display: grid; place-items: center; margin-top: 18px; min-height: 36px; border-radius: 10px; background: #fff; color: #000; font-size: 12.5px; font-weight: 600; }
.cx-google { display: grid; place-items: center; margin-top: 8px; min-height: 36px; border-radius: 10px; border: 1px solid #3a3d45; background: #1d1e22; color: var(--snow); font-size: 12.5px; font-weight: 600; }
.cx-screen-sub { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: #8b8e96; }
.cx-arrow { width: 26px; height: 26px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-consent { width: 230px; }
.cx-consent-top { display: flex; align-items: center; gap: 7px; }
.cx-consent-top .mk { display: block; width: 24px; height: 24px; }
.cx-consent-top img { width: 26px; height: 26px; border-radius: 21%; }
.cx-consent-top i { width: 4px; height: 4px; border-radius: 50%; background: var(--yellow); opacity: .35; animation: cx-dots 1.4s ease-in-out infinite; }
.cx-consent-top i:nth-of-type(2) { animation-delay: .2s; } .cx-consent-top i:nth-of-type(3) { animation-delay: .4s; }
@keyframes cx-dots { 50% { opacity: 1; } }
.cx-scopes { display: grid; gap: 7px; margin-top: 12px; font-size: 11.5px; line-height: 1.35; color: #c7c9ce; }
.cx-scopes li { position: relative; padding-left: 18px; }
.cx-scopes li::before { content: "✓"; position: absolute; left: 0; color: var(--yellow); font-weight: 700; }
.cx-scopes li.is-danger { color: #ffb4a3; }
.cx-scopes li.is-danger::before { content: "!"; color: #ff8a73; }
.cx-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.cx-consent-actions span { display: grid; place-items: center; min-height: 32px; border-radius: 9px; border: 1px solid #2c2e33; font-size: 11.5px; font-weight: 600; color: #c7c9ce; text-align: center; }
.cx-consent-actions .is-allow { border-color: transparent; background: var(--yellow); color: var(--ink); animation: cx-press 3.2s ease-in-out 1.6s infinite; }

/* 04 · switching Titan on in a chat: the assistant's menu above its message box */
.cx-chatbox { display: grid; gap: 10px; width: min(380px, 100%); }
.cx-menu { justify-self: start; width: min(250px, 100%); padding: 10px; border-radius: 16px; border: 1px solid #2c2e33; background: #141518; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85); }
.cx-menu-title { margin: 2px 0 8px 6px; font-size: 12px; font-weight: 600; color: #8b8e96; }
.cx-menu-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: #1f2024; font-size: 14px; font-weight: 600; }
.cx-menu-row img { width: 24px; height: 24px; border-radius: 21%; }
.cx-switch { position: relative; margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 14px rgba(243, 217, 78, .45); }
.cx-switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.cx-composer { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; border: 1px solid #2c2e33; background: #141518; color: #8b8e96; font-size: 14px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85); }
.cx-plus { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 700 18px/1 var(--text); animation: cx-press 3.2s ease-in-out infinite; }
.cx-composer > span:last-child { margin-left: auto; }
.cx-composer .mk { display: block; width: 18px; height: 18px; }

/* 05 · the first, read-only question */
.cx-chat { width: 100%; gap: 12px; margin: 0; }
.cx-chat .bubble-me { max-width: 92%; }
.cx-reply { max-width: 88%; }
/* The first message keeps its line breaks, on screen and when copied. */
.is-message { white-space: pre-line; }
.is-message[data-folded] { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.cx-more { align-self: flex-start; min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--yellow); font: 600 14px/1 var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gd-card .cx-more { justify-self: start; }
.gd-card-dark .gd-say.is-message, .cx-chat .is-message { font-size: 15px; line-height: 1.5; }
.cx-chat .bubble-me.is-message { max-width: 100%; }
.cx-chat .btn { align-self: flex-end; margin-top: 4px; }
/* The first message's two versions (the app's StarterPicker): native radios drawn as a segmented
   control on the dark message surfaces, revealed by connect.js. */
.msg-versions { display: flex; gap: 3px; min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--night-rule); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.msg-versions label { position: relative; display: flex; flex: 1 1 0; min-width: 0; cursor: pointer; }
.msg-versions input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.msg-versions span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 40px; padding: 6px 10px; border-radius: 9px; color: #8b8e96; font: 600 13.5px/1.25 var(--text); text-align: center; transition: background-color .2s var(--ease), color .2s var(--ease); }
.msg-versions input:checked + span { background: #2c2e33; color: var(--snow); }
.msg-versions input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 1px; }
.cx-chat .msg-versions { align-self: stretch; }
.cx-talk { margin-top: 22px; }

/* Plans, help, control */
.cx-plans-wrap { max-width: 900px; margin: 0 auto; }
.cx-plans { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); font-size: 15px; }
.cx-plans th, .cx-plans td { padding: 16px 20px; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.cx-plans thead th { border-top: 0; font: 600 11.5px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cx-plans tbody th { font-weight: 600; }
.cx-plan-name { display: flex; align-items: center; gap: 10px; }
.cx-plan-name .mk { flex: none; width: 20px; height: 20px; }
.cx-plans td:last-child { color: var(--ink-2); }
.cx-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cx-status svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cx-status.is-yes { background: #e6f5ec; color: #1d6b43; }
.cx-status.is-mode { background: #fff4cc; color: #7a6200; }
.cx-status.is-maybe { background: var(--paper); color: var(--ink-2); }
.cx-plans-wrap .cx-fine { text-align: center; }
.cx-control-title { margin: 56px 0 24px; text-align: center; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.cx-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cx-control li { padding: 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); }
.cx-control svg { width: 26px; height: 26px; padding: 7px; box-sizing: content-box; border-radius: 12px; background: var(--ink); fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-control h3 { margin-top: 16px; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.cx-control p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.cx-control a { color: var(--ink); font-weight: 600; }
.cx-next, .gd-close { display: grid; justify-items: center; max-width: 640px; margin: 0 auto; padding-bottom: 104px; text-align: center; }
.cx-next img { width: 220px; margin-bottom: 4px; }
.section .cx-next h2, .section .gd-close h2 { margin-top: 0; }
.cx-next .btn, .gd-close .btn { margin-top: 28px; }

/* Copy feedback */
.cx-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border: 1px solid #34373e; border-radius: 999px; background: #1b1c20; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); transform: translateX(-50%); transition: opacity .2s var(--ease), transform .3s var(--ease); }
.cx-toast:empty { opacity: 0; pointer-events: none; transform: translate(-50%, 10px); }

/* Things to ask (/guides/): the live demo, then the app's examples by topic, each marked
   Reads or Changes. Page-only pieces are prefixed gd-; connect.js copies and filters. */
.gd-hero { padding-bottom: 80px; }
.gd-demo .section-head { margin-bottom: 36px; }
.gd-demo .cx-talk { margin-top: 0; }
.gd-start { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; padding: 30px; margin-bottom: 44px; border-radius: var(--radius); color: var(--snow);
  background: radial-gradient(420px 260px at 85% 20%, rgba(243, 217, 78, .12), transparent 70%), var(--night-2); }
.gd-start .eyebrow { color: var(--yellow); }
.gd-start h3 { margin-top: 10px; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.gd-start-copy > p:last-child { margin-top: 10px; color: #b9bbc1; }
.gd-filter { position: sticky; top: 82px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto 8px; padding: 8px; border-radius: 18px; background: rgba(246, 247, 249, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gd-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease); }
.gd-filter a[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--snow); }
/* The smallest phones: the assistant switch wraps, and the topic chips scroll sideways inside their bar. */
@media (max-width: 360px) {
  .cx-segs { flex-wrap: wrap; justify-content: center; }
  .cx-seg { padding: 0 10px; }
  .gd-filter { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gd-filter::-webkit-scrollbar { display: none; }
}
.gd-group { padding: 40px 0 8px; scroll-margin-top: 150px; }
.gd-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.gd-group-head img { flex: none; width: 128px; margin: -18px -6px -14px -20px; }
.gd-group-head h3 { margin-top: 6px; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.gd-group-head p:last-child { margin-top: 6px; color: var(--ink-2); }
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gd-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 16px 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); transition: border-color .25s var(--ease), box-shadow .35s var(--ease); }
.gd-meta { display: flex; align-items: center; min-height: 36px; padding-right: 96px; }
.gd-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 12.5px/1 var(--text); white-space: nowrap; }
.gd-kind svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gd-kind.is-read { background: #eef0f3; color: var(--ink-2); }
.gd-kind.is-change { background: #fff1bd; color: #6f5900; }
.gd-kind.is-start { background: var(--yellow); color: var(--ink); }
b.gd-kind { vertical-align: 1px; }
.gd-say { align-self: start; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: var(--ink); color: var(--snow); font-size: 15px; line-height: 1.45; }
.gd-does { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gd-does img { flex: none; width: 22px; height: 22px; border-radius: 21%; }
.gd-copy { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #eef0f3; color: var(--ink); font: 600 13.5px var(--text); cursor: pointer; transition: background-color .2s var(--ease), transform .16s var(--ease); }
.gd-copy .cx-icon { width: 15px; height: 15px; }
.gd-copy.is-done { background: var(--yellow); }
.gd-card-dark { border-color: var(--night-rule); background: #1b1c20; color: var(--snow); }
.gd-card-dark .gd-say { background: #2a2c31; font-size: 17px; }
.gd-card-dark .gd-does { color: #c7c9ce; }
.gd-card-dark .gd-kind.is-read { background: #2a2c31; color: #d7d8dc; }
.gd-card-dark .gd-copy { background: var(--yellow); }
.gd-card-dark .gd-copy.is-done { background: #e8e9ec; }
.gd-ways { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 48px; }
.gd-ways-copy h2 { margin-top: 14px; }
.gd-ways-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .85fr); align-items: center; gap: 18px; margin: 0; padding: 30px; border-radius: var(--radius); color: var(--snow);
  background: radial-gradient(360px 240px at 80% 50%, rgba(243, 217, 78, .12), transparent 70%), var(--night-2); }
.gd-ways-says { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.gd-ways-says .bubble { max-width: 100%; }
.gd-ways-arrow { width: 26px; height: 26px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gd-ways-result { padding: 16px; border-radius: 16px; border: 1px solid var(--night-rule); background: #1b1c20; }
.gd-ways-label { font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.gd-ways-meal { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.gd-ways-meal img { flex: none; width: 28px; height: 28px; border-radius: 21%; }
.gd-ways-meal span { display: grid; gap: 2px; font-size: 13px; color: var(--mist); }
.gd-ways-meal strong { font: 600 16px/1.2 var(--display); color: var(--snow); }
.gd-ways-result .cx-fine { margin-top: 12px; font-size: 12.5px; color: #8b8e96; }
.gd-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 72px; }

@media (hover: hover) and (pointer: fine) {
  .cx-choice:hover { border-color: #3a3d45; background: #1a1b1f; }
  .cx-choice[aria-current="true"]:hover { border-color: rgba(243, 217, 78, .9); background: #1d1c14; }
  .cx-seg[aria-current="false"]:hover { color: var(--ink); background: rgba(13, 14, 16, .045); }
  .gd-filter a[aria-current="false"]:hover { border-color: #cfd2d8; color: var(--ink); }
  .msg-versions input:not(:checked):hover + span { color: #d7d8dc; }
  .gd-card:hover { border-color: #d5d8de; box-shadow: 0 20px 44px -30px rgba(13, 14, 16, .35); }
  .gd-copy:hover { background: #e4e6ea; }
  .gd-copy.is-done:hover, .gd-card-dark .gd-copy:hover { background: var(--yellow); }
}
@media (max-width: 960px) {
  .cx-hero-grid, .gd-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: center; }
  .cx-hero .lead, .gd-hero .lead { margin-left: auto; margin-right: auto; }
  .gd-hero .ctas { justify-content: center; }
  .cx-choose { max-width: 620px; margin-left: auto; margin-right: auto; }
  .cx-buddy, .gd-buddy { order: -1; width: min(300px, 80%); margin: 0 auto -8px; }
  .cx-buddy img, .gd-buddy img { margin-top: 36px; }
  .cx-card, .gd-start, .gd-ways { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cx-stage-copy { padding: 14px 10px 6px; }
  .cx-control, .gd-tips { grid-template-columns: minmax(0, 1fr); }
  .gd-ways-demo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .gd-ways-says { align-items: flex-end; width: 100%; }
  .gd-ways-result { width: 100%; }
  .gd-ways-arrow { transform: rotate(90deg); }
}
@media (max-width: 720px) {
  /* On phones Titan stays small above the headline; the bubble would crowd him. */
  .cx-buddy, .gd-buddy { width: min(190px, 52%); margin-bottom: -2px; }
  .cx-buddy img, .gd-buddy img { margin-top: 20px; }
  .cx-says, .gd-bubble { display: none; }
  .cx-choices { grid-template-columns: minmax(0, 1fr); }
  .cx-choice { min-height: 58px; text-align: start; }
  .cx-need { justify-content: flex-start; flex-direction: column; gap: 12px; max-width: 420px; }
  .cx-flow::before { display: none; }
  .cx-stage { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cx-num { width: 40px; height: 40px; margin: 0; font-size: 15px; box-shadow: none; }
  .cx-switch-bar { margin-top: -36px; }
  .cx-segs { display: flex; width: 100%; }
  .cx-seg { flex: 1; justify-content: center; padding: 0 8px; }
  .cx-plans thead { display: none; }
  .cx-plans, .cx-plans tbody, .cx-plans tr, .cx-plans th, .cx-plans td { display: block; }
  .cx-plans tr { padding: 14px 16px; border-top: 1px solid var(--rule); }
  .cx-plans tr:first-child { border-top: 0; }
  .cx-plans th, .cx-plans td { padding: 3px 0; border: 0; }
  .cx-plans td:empty { display: none; }
  .gd-grid { grid-template-columns: minmax(0, 1fr); }
  .gd-group-head img { width: 104px; }
}
@media (max-width: 600px) {
  .cx-visual { min-height: 0; padding: 30px 16px 16px; }
  .cx-illus { position: static; justify-self: end; }
  .cx-url { font-size: 13.5px; }
  .cx-linkcard { padding: 18px 16px; }
  .cx-allow { grid-auto-flow: row; }
  .cx-arrow { transform: rotate(90deg); }
  .cx-screen, .cx-consent { width: min(260px, 100%); }
  .cx-open, .cx-chat .btn { width: 100%; }
  .cx-says, .gd-bubble { font-size: 14.5px; }
  .gd-start { padding: 22px 18px; }
  .gd-filter { top: 76px; }
  .gd-filter { flex-wrap: nowrap; gap: 6px; padding: 6px; }
  .gd-filter a { flex: none; min-height: 38px; padding: 0 11px; font-size: 13px; }
  .gd-ways-demo { padding: 22px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-buddy, .gd-buddy, .cx-choose { animation: none; }
  .cx-field em.is-typed::after, .cx-dialog-actions .is-go, .cx-consent-actions .is-allow, .cx-consent-top i, .cx-plus { animation: none; }
}

/* Support (/support/) and deleting an account (/delete-account/): the legal pages' layout with
   the ways to get help or delete first, as cards. Page-only pieces are prefixed sp-. */
.sp [id] { scroll-margin-top: 96px; }
.sp-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 24px; }
.sp-before { margin-top: 40px; padding: 22px 24px; border-radius: var(--radius); background: #fff8dc; border: 1px solid #f1df8f; }
.sp-before h2 { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.sp-before ul { display: grid; gap: 8px; margin-top: 10px; padding-inline-start: 18px; list-style: disc; color: var(--ink-2); }
.sp-way { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); }
.sp-kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sp-kicker svg, .sp-card > svg:first-child { flex: none; width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 11px; background: var(--ink); fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-way h2 { margin-top: 18px; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.sp-way .cx-how { margin-top: 18px; }
.sp-way .cx-how a, .sp-more a, .sp .faq a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.sp-way .btn { margin-top: 22px; }
.sp-more { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.sp-contact { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 12px 24px; margin-top: 44px; padding: 26px 30px 26px 18px; border-radius: var(--radius); color: var(--snow);
  background: radial-gradient(420px 260px at 85% 20%, rgba(243, 217, 78, .12), transparent 70%), var(--night-2); }
.sp-contact img { width: 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.sp-contact h2 { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.sp-contact p { margin-top: 10px; color: #b9bbc1; }
.sp-contact strong { color: var(--snow); font-weight: 600; }
.sp-contact .btn { margin-top: 20px; }
.sp-block { margin-top: 64px; }
.sp-title { font-size: clamp(26px, 3vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.sp .faq { max-width: none; margin-top: 10px; padding-bottom: 0; }
.sp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.sp-card { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px 16px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .25s var(--ease), box-shadow .35s var(--ease), transform .2s var(--ease); }
.sp-card > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.sp-card strong { font: 600 17px/1.25 var(--display); letter-spacing: -.01em; }
.sp-card small { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.sp-card > svg:last-child { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.sp-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .sp-card:hover { border-color: #d5d8de; box-shadow: 0 20px 44px -30px rgba(13, 14, 16, .35); }
  .sp-card:hover > svg:last-child { transform: translateX(3px); stroke: var(--ink); }
}
@media (max-width: 720px) {
  .sp-ways, .sp-cards { grid-template-columns: minmax(0, 1fr); }
  .sp-way { padding: 22px 20px; }
  .sp-way .btn, .sp-contact .btn { width: 100%; }
  .sp-contact { grid-template-columns: minmax(0, 1fr); padding: 8px 20px 24px; text-align: center; }
  .sp-contact img { width: 170px; margin: 0 auto -6px; }
  .sp-block { margin-top: 52px; }
}

/* Home, "Mascot stage" (Bilal's pick A, 1 Nov 2026): one dark page led by Titan in 3D. The copy
   sits beside him under a spotlight, the app's screens sit behind tabs, the three steps each get a
   pose, and he rises with the sun at the end. The art is
   generated (art lives in the shared notes folder, titan-3d-art); edges fade into the page. */
.home { --card-3d: #111214; }
.home .hero { padding-bottom: 40px; }
.home .hero-glow { background:
    radial-gradient(560px 420px at 72% 34%, rgba(243, 217, 78, .1), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0) 0 0 / 22px 22px; }
.home .hero-inner { justify-items: stretch; gap: 40px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: center; gap: 24px; text-align: start; }
.home .hero h1 { margin: 0; max-width: none; font-size: clamp(44px, 5vw, 70px); line-height: 1; }
.home .lead { margin-inline: 0; max-width: 520px; }
.home .hero .get-app { justify-items: start; }
/* No animation on the figure itself: it would isolate the image from the page and break the blend. */
.hero-buddy { position: relative; margin: 0; }
/* The art's blacks are lifted to the page's #08090a and blend as "lighten", so the hero's dot grid shows through; only the spotlight's top fades. */
.hero-buddy img { width: 100%; max-width: 560px; margin-inline: auto; mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(transparent, #000 14%); mask-image: linear-gradient(transparent, #000 14%); }
[dir="rtl"] .hero-buddy img, [dir="rtl"] .close-art { scale: -1 1; }
@media (min-width: 861px) {
  .hero-buddy img { width: 118%; max-width: none; margin: -48px -9% -40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-buddy img { animation: rise 1s var(--ease) .2s both, bob 5s ease-in-out 1.4s infinite; }
}
@keyframes bob { 50% { transform: translateY(-8px); } }

/* Everything after the hub stays on the dark page. */
.home .section h2 { color: var(--snow); }
.home .section-lead { color: #b9bbc1; }
.home .step { border: 0; background: rgba(243, 217, 78, .12); color: var(--yellow); }

/* The app: tabs over one screen at a time (main.js); stacked without JavaScript. */
.show-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: -24px auto 40px; padding: 4px; border: 1px solid var(--night-rule); border-radius: 999px; background: #111214; }
.show-tabs button { position: relative; min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: #8b8e96; font: 600 15px var(--text); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.show-tabs button[aria-selected="true"] { background: var(--yellow); color: var(--ink); }
.show-tabs i { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
.show-tabs i::after { content: ""; position: absolute; inset: 0; background: rgba(13, 14, 16, .45); transform-origin: left; transform: scaleX(var(--progress, 0)); }
[dir="rtl"] .show-tabs i::after { transform-origin: right; }
.show-tabs button[aria-selected="true"] i { opacity: 1; }
.show-tabs button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .show-tabs button:not([aria-selected="true"]):hover { color: var(--snow); background: #1b1c20; } }
.show.is-tabbed .feature:not(.is-on) { display: none; }
.show.is-tabbed .feature.is-on { animation: rise .6s var(--ease) both; }
.home .feature { gap: 64px; padding: 24px 0; }
.home .feature-flip .feature-media { order: 0; }
.home .feature-media { height: 580px; border: 1px solid var(--night-rule); background: radial-gradient(360px 320px at 50% 62%, rgba(243, 217, 78, .16), transparent 70%), #0f1012; }
.home .feature-media img { width: 300px; border-color: #1f2024; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.home .feature h3 { margin-top: 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -.035em; }
.home .feature-copy > p { color: #b9bbc1; font-size: 18px; }
.home .feature-copy strong { color: var(--snow); }

/* How it works: a pose per step, then the live demo full width. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step-card { overflow: hidden; padding-bottom: 28px; border: 1px solid var(--night-rule); border-radius: 26px; background: var(--card-3d); }
.step-card img { width: 100%; mix-blend-mode: lighten; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 55%; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 62%, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000 62%, transparent); }
.step-card .how-copy { padding: 0 24px; }
.step-card h3 { margin-top: 14px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.step-card p { margin-top: 6px; color: #b9bbc1; }
@media (hover: hover) and (pointer: fine) {
  .step-card { transition: transform .45s var(--ease), border-color .3s; }
  .step-card:hover { transform: translateY(-4px); border-color: #34373e; }
}
.how-demo { display: grid; justify-items: center; gap: 20px; margin-top: 16px; padding: 20px; border: 1px solid var(--night-rule); border-radius: 28px; background: var(--card-3d); }
.how-demo .demo-stage { width: 100%; }
.home .demo-tabs { background: #1b1c20; }
.home .demo-tabs button { color: #8b8e96; }
.home .demo-tabs button[aria-selected="true"] { background: #2c2e33; color: var(--snow); box-shadow: none; }
.home .demo-tabs i { background: #34373e; }
.home .demo-tabs i::after { background: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .home .demo-tabs button:not([aria-selected="true"]):hover { background: #232428; color: var(--snow); } }

/* Facts, not claims: what Titan is, in one band. */
.facts-band { max-width: var(--max); margin: 0 auto; padding: 72px 20px 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--night-rule); border-radius: 24px; background: #0f1012; }
.facts li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 26px 24px; font: 600 17px/1.3 var(--display); letter-spacing: -.01em; }
.facts li + li { border-inline-start: 1px solid var(--night-rule); }
.facts svg { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.facts .mk { fill: var(--yellow); stroke: none; }

/* FAQ: the heading stays beside the questions. */
.home #faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 56px; }
.faq-side { position: sticky; top: 104px; }
.home #faq .section-head { margin: 0; text-align: start; }
.home .faq { max-width: none; margin: 0; padding-bottom: 96px; }
.home .faq details { margin-bottom: 10px; padding: 0 22px; border: 1px solid var(--night-rule); border-radius: 18px; background: var(--card-3d); transition: border-color .3s; }
.home .faq details[open] { border-color: #34373e; }
.home .faq summary { color: var(--snow); }
.home .faq summary::after { color: var(--mist); }
.home .faq details p { color: #b9bbc1; }
.home .faq a { color: var(--snow); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .home .faq summary:hover::after { color: var(--yellow); } }

/* Closing: Titan walks out of the sun with the bar on his shoulders; the copy sits in the dark beside him. */
.home .closing { display: flex; align-items: center; justify-content: flex-end; min-height: 680px; padding: 120px max(20px, calc((100% - var(--max)) / 2)) 140px; text-align: start; }
.close-art { position: absolute; z-index: -1; inset-inline-start: 0; bottom: 0; width: min(1180px, 82%); height: auto; mix-blend-mode: lighten; }
.home .close-copy { margin: 0; max-width: 500px; align-items: flex-start; }
.home .closing h2 { font-size: clamp(40px, 5vw, 64px); }
.home .closing .get-app { justify-items: start; }

@media (max-width: 960px) {
  .home .feature { grid-template-columns: 1fr; gap: 28px; }
  .home .feature-media { height: 480px; }
  .steps { grid-template-columns: 1fr; }
  .step-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; padding: 0; }
  .step-card img { aspect-ratio: 1; }
  .step-card .how-copy { padding: 16px 20px 16px 0; }
  [dir="rtl"] .step-card .how-copy { padding: 16px 0 16px 20px; }
  .home #faq { grid-template-columns: 1fr; gap: 24px; }
  .faq-side { position: static; }
  .home .closing { flex-direction: column; justify-content: flex-end; min-height: 0; padding: 0 20px 96px; text-align: center; }
  .close-art { position: relative; inset: auto; width: calc(100% + 40px); max-width: 760px; margin: 0 -20px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 22% 100%; -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
  .home .close-copy { align-items: center; margin-top: 4px; }
  .home .closing .get-app { justify-items: center; }
}
@media (max-width: 860px) {
  .hero-top { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .hero-buddy { order: -1; width: min(300px, 78%); margin: -20px auto -12px; }
  .home .hero h1 { margin-inline: auto; }
  .home .lead { margin-inline: auto; }
  .home .hero .get-app { justify-items: center; }
  .facts { grid-template-columns: 1fr; }
  .facts li { justify-content: flex-start; padding: 18px 22px; }
  .facts li + li { border-inline-start: 0; border-top: 1px solid var(--night-rule); }
}
@media (max-width: 720px) {
  .home .hero h1 { font-size: clamp(36px, 10.4vw, 48px); }
  .show-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: -12px; border-radius: 18px; }
  .show-tabs button { min-height: 44px; padding: 4px 4px 8px; border-radius: 14px; font-size: 13px; line-height: 1.2; }
  .show-tabs i { left: 10px; right: 10px; bottom: 4px; }
  .home .feature-media { height: 420px; }
  .home .feature-media img { width: 236px; }
  .step-card { grid-template-columns: 128px minmax(0, 1fr); }
  .step-card h3 { margin-top: 10px; font-size: 20px; }
  .step-card p { font-size: 15px; }
  .how-demo { padding: 12px; border-radius: 22px; }
  .facts-band { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-buddy img, .show.is-tabbed .feature.is-on { animation: none !important; }
}

/* Connect page, for everyone (1 Nov 2026): Titan is in ChatGPT's and Claude's official directories,
   so the hero is two buttons that open them, and the steps below (dark, like the home page) follow
   whichever was tapped. Another AI, by hand, stays reachable from a quiet link. */
.cx-adds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 540px; margin-top: 32px; }
.cx-add { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border-radius: 20px; background: var(--yellow); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px rgba(243, 217, 78, .35), 0 14px 40px -12px rgba(243, 217, 78, .5); transition: transform .2s var(--ease), box-shadow .45s var(--ease), background-color .3s var(--ease); }
.cx-add .mk { width: 28px; height: 28px; fill: var(--ink); }
.cx-add-text { display: grid; flex: 1; gap: 2px; min-width: 0; text-align: start; }
.cx-add small { font-size: 13px; font-weight: 600; opacity: .7; }
.cx-add strong { font: 700 22px/1.1 var(--display); letter-spacing: -.02em; }
.cx-add .cx-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx-add:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .cx-add:hover { background: #f7e26a; box-shadow: 0 0 0 1px rgba(243, 217, 78, .55), 0 18px 46px -10px rgba(243, 217, 78, .7); } }
.connect-page .cx-hero .cx-soon { margin: 18px 0 0; text-align: start; }
.cx-other { margin-top: 8px; font-size: 14px; color: var(--mist); }
.cx-other a { color: var(--snow); text-underline-offset: 3px; }
/* The figure doesn't animate (that would isolate the art and break its blend); the image does. */
.connect-page .cx-buddy { animation: none; }
.connect-page .cx-buddy img { max-width: 420px; margin-top: 0; filter: none; mix-blend-mode: lighten; scale: -1 1; animation: rise 1s var(--ease) .35s both; }
.connect-page .cx-says { top: 6%; animation: pop .7s cubic-bezier(.3, 1.5, .45, 1) 1s both; }
@media (prefers-reduced-motion: reduce) { .connect-page .cx-buddy img, .connect-page .cx-says { animation: none; } }

/* The steps on the dark page. */
.connect-page .cx-body { position: relative; }
.connect-page .section h2, .connect-page .cx-control-title { color: var(--snow); }
.connect-page .section-lead { color: #b9bbc1; }
.connect-page .cx-switch-bar { color: var(--mist); }
.connect-page .cx-segs { border: 1px solid var(--night-rule); background: #111214; }
.connect-page .cx-seg { color: #8b8e96; }
.connect-page .cx-seg[aria-current="true"] { background: var(--yellow); color: var(--ink); box-shadow: none; }
.connect-page .cx-seg[aria-current="true"] .mk { fill: var(--ink); }
.connect-page .cx-flow::before { background: var(--night-rule); }
.connect-page .cx-num { background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 7px var(--night); }
.connect-page .cx-card { border-color: var(--night-rule); background: #111214; }
.connect-page .cx-stage-copy > p { color: #b9bbc1; }
.connect-page .cx-stage-copy kbd, .connect-page .sp kbd { border-color: #34373e; background: #1b1c20; color: var(--snow); }
.connect-page .cx-fine { color: #8b8e96; }
.connect-page .cx-plan { border-color: var(--night-rule); background: #17181b; color: #b9bbc1; }
.connect-page .cx-plan strong, .connect-page .cx-how a, .connect-page .cx-control a { color: var(--snow); }
.connect-page .cx-plan svg { stroke: var(--yellow); }
.connect-page .cx-how li { color: #d7d8dc; }
.connect-page .cx-how li::before { border-color: #34373e; background: #1b1c20; color: var(--yellow); }
.connect-page .cx-open { width: auto; }
.connect-page .cx-visual { background: radial-gradient(320px 240px at 50% 42%, rgba(243, 217, 78, .12), transparent 70%), #0b0c0e; }
.connect-page .how-card { border-color: var(--night-rule); background: #111214; }
.connect-page .how-copy p { color: #b9bbc1; }
.connect-page .demo-tabs { background: #1b1c20; }
.connect-page .demo-tabs button { color: #8b8e96; }
.connect-page .demo-tabs button[aria-selected="true"] { background: #2c2e33; color: var(--snow); box-shadow: none; }
.connect-page .demo-tabs i { background: #34373e; }
.connect-page .demo-tabs i::after { background: var(--yellow); }
.connect-page .cx-plans { border-color: var(--night-rule); background: #111214; }
.connect-page .cx-plans th, .connect-page .cx-plans td { border-color: var(--night-rule); }
.connect-page .cx-plans thead th { color: #8b8e96; }
.connect-page .cx-plans td:last-child { color: #b9bbc1; }
.connect-page .cx-plan-name .mk:not(.mk-claude, .mk-line) { fill: var(--snow); }
.connect-page .cx-status.is-yes { background: rgba(110, 231, 168, .12); color: #6ee7a8; }
.connect-page .cx-status.is-maybe { background: #1b1c20; color: #d7d8dc; }
.connect-page .faq details { margin-bottom: 10px; padding: 0 22px; border: 1px solid var(--night-rule); border-radius: 18px; background: #111214; }
.connect-page .faq summary { color: var(--snow); }
.connect-page .faq summary::after { color: var(--mist); }
.connect-page .faq details p { color: #b9bbc1; }
.connect-page .cx-control li { border-color: var(--night-rule); background: #111214; }
.connect-page .cx-control svg { background: rgba(243, 217, 78, .12); }
.connect-page .cx-control p { color: #b9bbc1; }
.connect-page .cx-next img { width: 260px; mix-blend-mode: lighten; }
@media (hover: hover) and (pointer: fine) {
  .connect-page .cx-seg[aria-current="false"]:hover { color: var(--snow); background: #1b1c20; }
  .connect-page .demo-tabs button:not([aria-selected="true"]):hover { background: #232428; color: var(--snow); }
  .connect-page .faq summary:hover::after { color: var(--yellow); }
}
@media (max-width: 960px) {
  .connect-page .cx-hero .cx-soon, .cx-other { text-align: center; }
  .cx-adds { margin-inline: auto; }
  .connect-page .cx-buddy img { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .cx-adds { grid-template-columns: minmax(0, 1fr); }
  .cx-add { min-height: 68px; }
}

/* One rhythm for the home and connect pages: the same gap between every section and the same gap
   from a section's heading to its content, scaling down on phones. Sections own only their top
   space, so two never add up. */
:is(.home, .connect-page) { --space-section: clamp(88px, 10vw, 136px); --space-head: clamp(36px, 4vw, 56px); }
.home .hero { padding-bottom: 0; }
:is(.home, .connect-page) :is(.hub, .section) { padding: var(--space-section) 20px 0; }
:is(.home, .connect-page) .section-tight { padding-top: var(--space-section); }
:is(.home, .connect-page) :is(.hub, .section) .section-head { margin-bottom: var(--space-head); }
.home .show-tabs { margin: calc(var(--space-head) * -.4) auto var(--space-head); }
.home .feature { padding: 0; }
.home .why { margin-top: calc(var(--space-head) * 1.5); }
.home .facts-band { padding-top: var(--space-section); }
.home .faq, .connect-page .faq { padding-bottom: 0; }
.home .closing { min-height: calc(min(1180px, 82vw) * .6667 + var(--space-section) * .55); padding-block: var(--space-section); }
@media (max-width: 960px) { .home .closing { padding-top: calc(var(--space-section) * .5); } }
.connect-page .cx-hero { padding-bottom: 0; }
.connect-page .cx-switch-bar { margin: calc(var(--space-head) * -.4) auto var(--space-head); }
.connect-page .cx-talk { margin-top: var(--space-head); }
.connect-page .cx-control-title { margin: var(--space-section) 0 var(--space-head); }
.connect-page .cx-next { padding-bottom: var(--space-section); }
@media (max-width: 720px) {
  :is(.home, .connect-page) :is(.hub, .section) { padding-inline: 16px; }
}
:is(.home, .connect-page) .section-head h2 { margin-top: 0; }

/* Motion (Bilal approved 2 Nov 2026): the home page told by scrolling. Where the browser links
   animations to scroll position (animation-timeline), blocks reveal as they scroll in and the
   mascot, film and closing move with the page; elsewhere main.js's reveals stand in. Only
   transform, opacity and the small calorie ring's stroke move. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

/* The app, on wide screens: the phone stays pinned while each screen's words scroll past. */
.show.is-story .show-tabs { display: none; }
.show.is-story .show-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; }
.show.is-story .feature, .show.is-tabbed.is-story .feature:not(.is-on) { display: contents; }
.show.is-tabbed.is-story .feature.is-on { animation: none; }
.show.is-story .feature-copy { grid-column: 1; display: flex; flex-direction: column; justify-content: center; min-height: 78vh; padding-inline-start: 48px; opacity: .28; transition: opacity .5s var(--ease-out); }
.show.is-story .feature.is-on .feature-copy { opacity: 1; }
.show.is-story .feature:nth-child(2) .feature-copy { grid-row: 1; }
.show.is-story .feature:nth-child(3) .feature-copy { grid-row: 2; }
.show.is-story .feature:nth-child(4) .feature-copy { grid-row: 3; }
.show.is-story .feature:nth-child(5) .feature-copy { grid-row: 4; }
.show.is-story .feature-media { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: calc(50vh - 290px); align-self: start; opacity: 0; transform: translateY(28px) scale(.96); transition: opacity .45s var(--ease-out), transform .7s var(--ease-out); }
.show.is-story .feature.is-on .feature-media { opacity: 1; transform: none; }
.show.is-story .feature.is-on .feature-media img { animation: none; }
.story-kicker { margin-bottom: 14px; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.story-rail { position: absolute; inset-block: 10vh; inset-inline-start: 0; width: 2px; border-radius: 2px; background: var(--night-rule); overflow: hidden; }
.story-rail i { position: absolute; inset: 0; background: var(--yellow); transform-origin: top; transform: scaleY(0); }
/* The callouts follow the chosen screen instead of the viewport. */
html.motion .show.is-story .co { opacity: 0; transform: translateY(calc(-50% + 14px)) scale(.95); }
html.motion .show.is-story .feature.is-on .co { opacity: 1; transform: translateY(-50%); transition-delay: .25s; }
html.motion .show.is-story .feature.is-on .co + .co { transition-delay: .4s; }
/* The calorie ring fills to what's eaten (1,390 of 2,400 kcal). */
.co-ringed { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.co-ringed > p { grid-column: 2; }
.co-ring { grid-row: 1 / span 3; width: 44px; height: 44px; transform: rotate(-90deg); }
.co-ring circle { fill: none; stroke: #2a2c31; stroke-width: 5; }
.co-ring .co-ring-fill { stroke: var(--yellow); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 42; transition: stroke-dashoffset 1.4s var(--ease-out) .5s; }
html.motion .feature:not(.is-on) .co-ring-fill { stroke-dashoffset: 100; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The rail beside the story fills as you read through it. */
    .home .show-stage { view-timeline-name: --story; }
    .home .story-rail i { animation: story-fill linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    @keyframes story-fill { to { transform: scaleY(1); } }

    /* Hero: the copy drifts up and dims as you leave; Titan sinks back; the film grows into place. */
    .home .hero-copy { animation: hero-leave linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    @keyframes hero-leave { to { opacity: .15; transform: translateY(-60px); } }
    .home .hero-buddy img { animation: rise 1s var(--ease) .2s both, bob 5s ease-in-out 1.4s infinite, buddy-depth linear both; animation-timeline: auto, auto, scroll(root); animation-range: normal, normal, 0 90vh; }
    @keyframes buddy-depth { to { translate: 0 90px; scale: .86; opacity: .35; } }
    .home .hero .stage { animation: rise 1s var(--ease) .5s both, stage-grow linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% cover 45%; }
    @keyframes stage-grow { from { scale: .9; } to { scale: 1; } }

    /* Blocks rise in as they scroll into view, and settle back as they leave the top. */
    .home :is(.section-head, .why-card, .step-card, .facts li, .faq details, .close-copy > *, .how-demo, .flow-chips) { animation: scroll-in linear both; animation-timeline: view(); animation-range: entry 5% entry 75%; }
    @keyframes scroll-in { from { opacity: 0; transform: translateY(48px) scale(.98); } }
    .home .step-card:nth-child(2) { animation-range: entry 15% entry 85%; }
    .home .step-card:nth-child(3) { animation-range: entry 25% entry 95%; }
    .home .facts li:nth-child(2) { animation-range: entry 15% entry 85%; }
    .home .facts li:nth-child(3) { animation-range: entry 25% entry 95%; }
    /* Depth: each step's Titan moves a little slower than its card. */
    .home .step-card img { animation: step-depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes step-depth { from { translate: 0 24px; } to { translate: 0 -24px; } }

    /* Closing: Titan walks up out of the dark as the section arrives. */
    .home .close-art { animation: close-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes close-rise { from { opacity: 0; translate: 0 18%; scale: .94; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .show.is-story .feature-media { transform: none; transition: opacity .3s ease; }
  .co-ring .co-ring-fill { transition: none; }
}


/* ==== Titan 2026 layer (keep last: it overrides the rules above) ==== */
/* Titan 2026 (jointitan.app): one layer over styles.css for every page.
   Linear-style: one dark surface, Geist, left-aligned headings with a gold second line, 8px buttons,
   colour-only hovers with a rolling label, press = scale .97, no glows, no mascots, no blurred reveals.
   Sections: fonts · tokens · every page · home (hero, film, FAQ, closing) · home sections (.v26) · buttons. */

/* Geist (OFL 1.1, fonts/GEIST-OFL.txt), self-hosted: the CSP only allows same-origin fonts. */
@font-face { font-family: "Geist"; src: url("/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --night: #08090a; --night-2: #0f1011; --night-rule: rgba(255, 255, 255, .08);
  --snow: #f7f8f8; --mist: #8a8f98;
  --radius: 14px;
}
body { background: #08090a; color: #f7f8f8; }

/* the white sheets become the page */
.light {
  --paper: #0f1011; --card: #0f1011; --rule: rgba(255, 255, 255, .08);
  --ink: #f7f8f8; --ink-2: #b4bcc8; --ink-3: #8a8f98;
  background: transparent !important; color: #f7f8f8; border-radius: 0 !important; box-shadow: none !important;
}

/* type: one heading style, no blur/rise entrance on titles */
h1, h2, h3 { font-weight: 560; letter-spacing: -0.035em; }
h1 { line-height: 1.06; }
h1, h2, .hero h1, .hero-copy h1 { animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
h1 .accent, h2 .accent, .accent { color: #f3d94e; }
.lead, .section-lead, .hero .lead { color: #8a8f98; }
.eyebrow, .eyebrow-dark { display: none; }

/* no decoration */
.hero-glow, .cx-buddy, img[src*="/titan-3d/"] { display: none !important; }
.hero::before, .hero::after { content: none !important; }
.btn-glow { box-shadow: none !important; }

/* nav: flat bar like the home page */
.nav { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(8, 9, 10, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-inner, .nav.is-scrolled .nav-inner { border-radius: 0; border-color: transparent; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 14px 16px; }

/* cards and pills inside the old sheets */
.cx-card, .how-card, .gd-card, .sp-way, .sp-card, .cx-control li, .plan, .cx-plans {
  background: #0f1011 !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; border-radius: 14px !important;
}
kbd, .cx-stage-copy kbd, .cx-how kbd, .gd-how kbd, .sp kbd { background: #1c1d20 !important; color: #f7f8f8 !important; border-color: rgba(255, 255, 255, .12) !important; }

/* heroes: left-aligned copy only, Linear proportions */
.cx-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
.hero-copy { max-width: 760px; }
.hero h1, .hero-copy h1 { font-size: clamp(40px, 5.4vw, 64px); }
.gd-hero-inner { grid-template-columns: minmax(0, 1fr) !important; text-align: left !important; }
.hero-copy > *, .hero .lead, .cx-adds, .cx-soon, .cx-other { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.hero { padding-bottom: 24px !important; }
.cx-hero, .gd-hero { min-height: 0 !important; }

/* section heads: left-aligned like the home page */
.section-head { margin: 0 0 48px !important; text-align: left !important; max-width: 760px; }
.section-head .section-lead { margin-inline: 0 !important; }
.section-head h2 { font-size: clamp(32px, 4vw, 48px); }
.light { padding-top: 64px !important; }

/* support: contact card without mascot or yellow wash */
.sp-contact { grid-template-columns: minmax(0, 1fr) !important; padding: 24px !important; background: #0f1011 !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; }
.sp-contact img, img[src*="/assets/titan/"] { display: none !important; }

/* delete account: the notice is a dark card with a yellow edge, not a cream box */
.sp-before { background: rgba(243, 217, 78, .06) !important; border: 1px solid rgba(243, 217, 78, .28) !important; color: #f7f8f8; }
.sp-before ul { color: #b4bcc8 !important; }
.sp-before strong, .sp-before b { color: #f3d94e; }

/* elements that were "ink on paper" need a dark tile, not inverted white */
.light .gd-say { background: #1c1d20 !important; color: #f7f8f8 !important; }
.light .cx-control svg, .light .sp-kicker svg, .light .sp-card > svg:first-child { background: #1c1d20 !important; }
.light .ticks li::before { background-color: #1c1d20 !important; }
.light .plan .btn-block { background: var(--yellow) !important; color: #08090a !important; }
.gd-filter { background: rgba(8, 9, 10, .85) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 12px !important; box-shadow: none !important; }

/* connect: the two add buttons follow the button system */
.cx-control-title { text-align: left !important; font-size: clamp(32px, 4vw, 48px) !important; }
@media (max-width: 900px) {
  .cx-hero-grid, .gd-hero-inner, .hero-copy, .sp-contact { text-align: left !important; }
  .hero-copy .lead { margin-inline: 0 !important; }
}


/* ===== Home: hero, film, FAQ, closing ===== */
.home .hero { padding: 120px 20px 0; margin-top: -76px; }
.home .hero-inner { max-width: 1160px; margin: 0 auto; }
.home .hero-top { display: block; }
.home .hero-copy { max-width: 760px; margin: 0; text-align: start; }
.home .hero h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.04; letter-spacing: -0.04em; }
.home .hero .lead { max-width: 36em; margin: 20px 0 0; font-size: 17px; line-height: 1.55; color: #8a8f98; }
.home .get-app { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; justify-content: flex-start; }
.home .get-note { margin: 0; font-size: 13px; color: #8a8f98; }
.home .stage { margin-top: clamp(40px, 5vw, 64px); }
/* the film: a thin frame, no glow */
.dvp { padding: 0; border-radius: 14px; background: #0f1011; outline: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .8); }
.dvp video { border-radius: 14px; outline: 0; }
.dvp-play { inset: 0; width: 100%; height: 100%; border-radius: 14px; }
.dvp-controls { left: 0; right: 0; bottom: 0; border-radius: 0 0 14px 14px; }
.dvp-sound { left: 18px; bottom: 18px; border-radius: 999px; background: rgba(15, 16, 17, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; }
.dvp-seek { accent-color: #f3d94e; }
@media (max-width: 700px) { .dvp, .dvp video, .dvp-play { border-radius: 10px; } .dvp-controls { border-radius: 0 0 10px 10px; } .dvp-sound { left: 12px; bottom: 12px; } }
/* FAQ */
.home #faq { max-width: 1160px; margin: 0 auto; padding: 120px 20px 40px; }
.home #faq .section-head { margin: 0 0 24px !important; }
.home .faq details { border-color: rgba(255, 255, 255, .08); }
.home .faq summary { font-weight: 500; }
.home .faq p { color: #8a8f98; }
/* closing: the one yellow moment on the page, with the app's Home screen */
.home .closing { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 32px;
  max-width: 1160px; min-height: 0; margin: 80px auto 96px; padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px) 0; overflow: hidden; border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, #fff1a6 0%, #f3d94e 45%, #e9cb3c 100%); color: #08090a; box-shadow: none; }
.home .closing::before, .home .closing::after { content: none !important; }
.home .close-copy { padding-bottom: clamp(32px, 5vw, 64px); text-align: start; align-items: flex-start; align-self: center; margin: 0; }
.home .closing h2 { color: #08090a; font-size: clamp(36px, 4.6vw, 58px); }
.home .closing h2 .accent { color: #08090a; }
.home .close-sub { color: rgba(8, 9, 10, .7); }
.home .closing .get-app { justify-content: flex-start; }
.home .closing .get-note { color: rgba(8, 9, 10, .6); }
.home .closing .btn { background: #08090a; color: #f7f8f8; box-shadow: none; }
.home .closing .btn:hover { background: #1f2023; }
.home .close-phone { margin: 0; justify-self: center; width: min(300px, 100%); border-radius: 44px 44px 0 0; padding: 9px 9px 0; background: #0b0c0d; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); height: clamp(320px, 34vw, 440px); overflow: hidden; align-self: end; }
.home .close-phone img { display: block; width: 100%; height: auto; border-radius: 36px 36px 0 0; }
@media (max-width: 760px) { .home .closing { grid-template-columns: minmax(0, 1fr); margin: 56px 16px 72px; } .home .close-phone { width: 240px; } }
.home .facts-band, .home .hero-buddy, .home .close-art, .home .hero-glow { display: none !important; }

/* ===== Home sections (.v26): who does what, say it, coaching ===== */
.v26 { --night: #08090a; --night-2: #0f1011; --night-3: #181b1f; --night-line: rgba(255, 255, 255, .08);
  --sheet: #0f1011; --sheet-2: #141517; --sheet-3: #222428; --sheet-line: rgba(255, 255, 255, .08);
  --yellow: #f3d94e; --yellow-hi: #ffe970; --yellow-deep: #8a6c00; --yellow-soft: #fbf3c4;
  --white: #f7f8f8; --grey: #8a8f98; --ink: #f7f8f8; --ink-2: #8a8f98; --green: #2fb457; --red: #d9473b;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1); --wrap: 1160px; color: #f7f8f8; font-family: var(--text); }
.v26 h2, .v26 b, .v26 .who-tag, .v26 .ex, .v26 .q { font-family: var(--display); }
.v26 .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.v26 h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 560; line-height: 1.06; letter-spacing: -0.035em; color: #f7f8f8; text-wrap: balance; }
.v26 h2 span { color: #f3d94e; }
.v26 .lead { margin: 16px 0 0; max-width: 34em; font-size: 16.5px; line-height: 1.55; color: #8a8f98; }
.v26 .lin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.v26 .lin-head h2 { max-width: 12em; }
.v26 .lin-head p { margin: 0; max-width: 26em; color: #8a8f98; font-size: 16px; line-height: 1.55; }
.v26 .jobs { padding-top: 112px; }
.v26 .say { padding-top: 120px; }
.v26 .sec { padding: 120px 0 0; }
.v26 .sec-head { max-width: 640px; }
.v26 .qs { margin-top: 24px; }
@media (max-width: 760px) { .v26 .lin-head { flex-direction: column; align-items: flex-start; gap: 16px; } .v26 .jobs, .v26 .say, .v26 .sec { padding-top: 88px; } }
.v26 .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.v26 .try { margin-top: 34px; display: grid; gap: 10px; }
.v26 .try-label { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.v26 .try-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v26 .try-row button { cursor: pointer; border: 0; padding: 9px 13px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--night-line); font-size: 13.5px; color: #d6d8db; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s; }
.v26 .try-row button:hover { background: rgba(243, 217, 78, .08); box-shadow: inset 0 0 0 1px rgba(243, 217, 78, .35); transform: translateY(-1px); }
.v26 .try-row button[aria-pressed="true"] { background: rgba(243, 217, 78, .14); box-shadow: inset 0 0 0 1px rgba(243, 217, 78, .55); color: #fff; }
.v26 .demo { position: relative; height: 560px; }
.v26 .chat { position: absolute; left: 0; bottom: 44px; width: 340px; background: #1f1f1f; border-radius: 22px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .8); z-index: 3; }
.v26 .chat-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #9a9a9a; }
.v26 .chat-head .who { display: inline-flex; gap: 7px; align-items: center; color: #ececec; font-weight: 500; font-size: 13px; }
.v26 .chat-head img { width: 15px; height: 15px; filter: invert(1); }
.v26 .u-msg { justify-self: end; max-width: 88%; background: #2f2f2f; color: #ececec; border-radius: 16px; padding: 10px 14px; font-size: 14.5px; min-height: 41px; }
.v26 .caret { display: inline-block; width: 2px; height: 1.05em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.v26 .tool { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 12.5px; color: #bdbdbd; padding: 7px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px #3a3a3a; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s var(--ease); }
.v26 .tool.on { opacity: 1; transform: none; }
.v26 .tool i { width: 16px; height: 16px; border-radius: 4px; background: var(--yellow); display: grid; place-items: center; }
.v26 .tool i img { width: 11px; height: 11px; }
.v26 .tool .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #555; border-top-color: var(--yellow); animation: spin .7s linear infinite; }
.v26 .tool.done .spin { border: 0; animation: none; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
.v26 .a-msg { color: #ececec; font-size: 14.5px; line-height: 1.55; min-height: 45px; }
.v26 .fly { position: absolute; z-index: 5; pointer-events: none; background: var(--yellow); color: var(--ink); font: 600 12.5px/1 var(--sans); padding: 8px 11px; border-radius: 999px; box-shadow: 0 12px 30px -8px rgba(243, 217, 78, .7); opacity: 0; }
.v26 .phone { position: absolute; right: 0; top: 0; width: 300px; height: 600px; border-radius: 46px; padding: 10px; background: linear-gradient(160deg, #3a3d42, #16181b 40%, #0b0c0d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(243, 217, 78, .25); }
.v26 .screen { position: relative; height: 100%; border-radius: 37px; background: #f4f4f2; color: var(--ink); overflow: hidden; font-size: 12px; }
.v26 .island { position: absolute; top: 10px; left: 50%; width: 86px; height: 24px; margin-left: -43px; background: #000; border-radius: 20px; }
@keyframes landIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes pulse { 40% { transform: scale(1.06); color: var(--yellow-deep); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-18px) scale(.97); } }
.v26 .trust { border-block: 1px solid var(--night-line); }
.v26 .trust ul { list-style: none; margin: 0 auto; padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--grey); }
.v26 .trust li { display: inline-flex; align-items: center; gap: 9px; }
.v26 .trust li b { color: var(--white); font-weight: 500; }
.v26 .trust img { width: 18px; height: 18px; filter: invert(1); }
.v26 .trust svg { color: var(--yellow); }
.v26 .sheet { position: relative; z-index: 2; background: var(--sheet); color: var(--ink); border-radius: 36px; margin: 72px max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); padding-block: 104px 24px; }
.v26 .sec { padding-bottom: 120px; }
.v26 .sec-head { max-width: 640px; }
.v26 .sec h2 { font-size: clamp(34px, 4.6vw, 54px); margin-top: 16px; }
.v26 .sec .lead { color: var(--ink-2); font-size: 17.5px; margin-top: 16px; max-width: 36em; }
.v26 .coach { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; margin-top: 52px; }
.v26 .qs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.v26 .qs button { cursor: pointer; border: 0; padding: 10px 14px; border-radius: 999px; background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--sheet-line); font-size: 14px; font-weight: 500; transition: background-color .2s, box-shadow .2s, transform .2s; }
.v26 .qs button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #c9c9c2; }
.v26 .qs button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.v26 .chart-card { background: #fff; border-radius: 26px; box-shadow: inset 0 0 0 1px var(--sheet-line); padding: 24px; display: grid; gap: 12px; min-width: 0; }
.v26 .chart-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.v26 .chart-top b { font-size: 15px; }
.v26 .chart-top span { font-size: 12.5px; color: var(--ink-2); }
.v26 .chart-card svg { width: 100%; height: auto; }
.v26 .chart-card svg text { font: 400 11px var(--mono); fill: var(--ink-2); }
.v26 .answer { background: var(--ink); color: #eee; border-radius: 26px; padding: 24px; display: grid; gap: 14px; align-content: start; min-height: 360px; }
.v26 .answer .chat-head { color: #8f9196; }
.v26 .answer .u-msg { background: #26282c; }
.v26 .answer .a-msg { font-size: 15.5px; }
.v26 .suggest { border-radius: 16px; padding: 16px; background: rgba(243, 217, 78, .08); box-shadow: inset 0 0 0 1px rgba(243, 217, 78, .3); display: grid; gap: 12px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s var(--ease); }
.v26 .suggest.on { opacity: 1; transform: none; }
.v26 .suggest small { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); }
.v26 .suggest b { font-size: 19px; letter-spacing: -0.02em; }
.v26 .suggest button { cursor: pointer; border: 0; border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 13.5px; transition: transform .15s ease, background-color .2s ease; }
.v26 .suggest button:active { transform: scale(.96); }
.v26 .suggest .result { font-size: 14px; color: #ddd; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.v26 .jobs { padding-block: 112px 40px; }
.v26 .jobs h2, .v26 .say h2 { font-size: clamp(34px, 4.6vw, 54px); margin-top: 16px; }
.v26 .who-tag { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.v26 .ai-tag { color: var(--yellow); background: rgba(243, 217, 78, .1); }
.v26 .ai-tag img { width: 13px; height: 13px; filter: invert(1); }
.v26 .say { padding-block: 72px 40px; }
.v26 .say-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.v26 .say .lead { color: var(--grey); font-size: 17.5px; margin-top: 16px; max-width: 30em; }
.v26 .dark .sec-head .lead { color: var(--grey); }
.v26 .say .chat { width: 280px; bottom: 30px; }
.v26 .say .demo { height: 620px; }
@media (max-width: 980px) {
  .v26 .say-grid { grid-template-columns: minmax(0, 1fr); }
}
.v26 .real-phone { width: min(330px, 100%); border-radius: 46px; padding: 9px; background: linear-gradient(160deg, #3a3d42, #16181b 40%, #0b0c0d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.v26 .rp-screen { position: relative; aspect-ratio: 1320 / 2868; border-radius: 38px; overflow: hidden; background: #000; }
.v26 .rp-shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s ease; }
.v26 .rp-shot.on { opacity: 1; }
.v26 .rp-anim { position: absolute; left: 2.727%; top: 21.234%; width: 94.545%; height: 33.996%; border-radius: 4.2% / 5.4%; overflow: hidden; background: rgb(39, 41, 45); display: grid; place-items: center; opacity: 0; transition: opacity .3s ease; }
.v26 .rp-anim.on { opacity: 1; }
.v26 .rp-anim video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v26 .rp-anim canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes tap { 40% { background: rgba(0, 0, 0, .18); transform: scale(.98); } }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }
.v26 .screen { background: #000; color: #f4f4f2; }
.v26 .island { background: #1a1a1a; }
.v26 .screen { background: #000; }
.v26 .shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.015); transition: opacity .45s ease, transform .6s var(--ease); }
.v26 .shot-img.on { opacity: 1; transform: none; }
.v26 .land { position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none; }
.v26 .land.go { animation: ring .8s ease-out; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(243, 217, 78, .7); } to { box-shadow: 0 0 0 160px rgba(243, 217, 78, 0); } }
.v26 .island { position: absolute; top: 2.2%; left: 50%; width: 31%; height: 3.6%; margin-left: -15.5%; background: #000 !important; border-radius: 99px; z-index: 4; }
.v26 .try-row .ex, .v26 .qs .q { padding: 9px 13px; border-radius: 10px; font-size: 13.5px; transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; }
.v26 .try-row .ex { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--night-line); color: #9a9da3; }
.v26 .try-row .ex[aria-current="true"] { background: rgba(243, 217, 78, .14); box-shadow: inset 0 0 0 1px rgba(243, 217, 78, .55); color: #fff; }
.v26 .qs .q { border-radius: 999px; background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--sheet-line); font-weight: 500; color: var(--ink-2); }
.v26 .qs .q[aria-current="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.v26 .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 56px; max-width: 1060px; margin-inline: auto; }
.v26 .duo-col { margin: 0; display: grid; justify-items: center; gap: 22px; align-content: start; }
.v26 .duo-col figcaption { display: flex; align-items: center; gap: 12px; }
.v26 .duo-col figcaption b { font-size: 20px; letter-spacing: -0.02em; }
.v26 .duo-col p { color: var(--grey); font-size: 15.5px; text-align: center; max-width: 30em; }
.v26 .real-phone.big { width: min(470px, 100%); border-radius: 66px; padding: 12px; }
.v26 .real-phone.big .rp-screen { border-radius: 54px; }
.v26 .gpt-phone .gpt { position: relative; aspect-ratio: 1320 / 2868; border-radius: 54px; overflow: hidden; background: #212121; color: #ececec; display: flex; flex-direction: column; font-size: 15px; }
.v26 .gpt-top { display: flex; align-items: center; justify-content: space-between; padding: 58px 22px 14px; }
.v26 .gpt-top b { font-size: 18px; font-weight: 600; }
.v26 .gpt-menu { width: 22px; height: 12px; border-top: 2px solid #ececec; border-bottom: 2px solid #ececec; }
.v26 .gpt-new { width: 20px; height: 20px; border: 2px solid #ececec; border-radius: 6px; }
.v26 .gpt-feed { flex: 1; padding: 6px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; overflow: hidden; }
.v26 .gpt-feed > * { animation: msgIn .45s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(12px); } }
.v26 .g-user { align-self: flex-end; max-width: 82%; background: #303030; border-radius: 20px; padding: 10px 15px; line-height: 1.4; }
.v26 .g-ai { align-self: flex-start; line-height: 1.5; color: #dcdcdc; max-width: 92%; }
.v26 .gpt-input { margin: 10px 14px 30px; display: flex; justify-content: space-between; align-items: center; background: #303030; border-radius: 26px; padding: 13px 16px; color: #9b9b9b; }
.v26 .gpt-mic { width: 26px; height: 26px; border-radius: 50%; background: #ececec; }
@media (max-width: 760px) {
  .v26 .duo { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
.v26 .gpt-feed { justify-content: flex-start !important; padding-top: 4px !important; }
.v26 .g-frame { width: 100%; height: 300px; border: 0; overflow: hidden; display: block; background: transparent; animation: msgIn .5s var(--ease) both; }
.v26 .ex-pill { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--yellow-deep); background: var(--yellow-soft); padding: 6px 9px; border-radius: 999px; }
.v26 .try-row .ex, .v26 .qs .q { border: 0; font-family: inherit; cursor: pointer; }
.v26 .try-row .ex:hover:not([aria-current="true"]) { background: rgba(255, 255, 255, .09); color: #d6d8db; }
.v26 .qs .q:hover:not([aria-current="true"]) { box-shadow: inset 0 0 0 1px #c9c9c2; color: var(--ink); transform: translateY(-1px); }
.v26 .qs .q { transition: background-color .2s, box-shadow .2s, color .2s, transform .2s; }
@keyframes dial-run { 0% { transform: rotate(0deg); opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { transform: rotate(180deg); opacity: 0; } }
.v26 .reveal { transform: translateY(22px); opacity: 0; transition: transform .8s var(--ease), opacity .8s ease; }
.v26 .reveal.in { transform: none; opacity: 1; }
@media (max-width: 980px) {
  .v26 .coach { grid-template-columns: minmax(0, 1fr); }
  .v26 .demo { height: 600px; max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .v26 .demo { height: 620px; }
  .v26 .phone { right: 50%; margin-right: -142px; width: 284px; height: 560px; }
  .v26 .chat { width: auto; left: 0; right: 0; bottom: 0; }
  .v26 .sheet { border-radius: 26px; padding-top: 72px; }
  .v26 .sec { padding-bottom: 88px; }
  .v26 .trust ul { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .v26 .reveal { opacity: 1; transform: none; }
}
.v26 .dark h2, .v26 .sec h2 { font-weight: 560; letter-spacing: -0.035em; line-height: 1.06; margin-top: 0; }
.v26 .jobs h2, .v26 .say h2, .v26 .sec h2 { font-size: clamp(32px, 4vw, 48px); }
.v26 .lin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.v26 .lin-head h2 { max-width: 12em; }
.v26 .lin-head h2 span, .v26 .say h2 span { color: var(--yellow); }
.v26 .lin-head p { margin: 0; max-width: 26em; color: #8a8f98; font-size: 16px; line-height: 1.55; }
.v26 .lead { color: #8a8f98; }
.v26 .jobs { padding-top: 128px; }
.v26 .duo { margin-top: 64px; }
.v26 .phone, .v26 .real-phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9) !important; }
.v26 .trust ul { justify-content: space-between; }
.v26 .trust { border-color: rgba(255, 255, 255, .06); }
@media (max-width: 760px) {
  .v26 .lin-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.v26 .sheet { --sheet: #0f1011; --sheet-2: #141517; --sheet-3: #222428; --sheet-line: rgba(255, 255, 255, .08); --ink: #f7f8f8; --ink-2: #8a8f98; background: transparent; color: var(--white); border-radius: 0; margin: 0; padding-block: 128px 0; }
.v26 .sec h2 span { color: var(--yellow); }
.v26 .sec .lead { color: #8a8f98; }
.v26 .qs button { background: transparent; color: #d0d6e0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); border-radius: 8px; }
.v26 .qs button:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #f7f8f8; }
.v26 .qs button[aria-current="true"], .v26 .qs button[aria-pressed="true"] { background: #f7f8f8; color: #08090a; box-shadow: none; }
.v26 .chart-card, .v26 .answer { background: #0f1011; color: #f7f8f8; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.v26 .chart-card svg text { fill: #8a8f98; }
.v26 .ex-pill { color: #8a8f98; background: rgba(255, 255, 255, .06); border-radius: 6px; }
.v26 .answer .u-msg { background: #1c1d20; }
.v26 .qs .q { border-radius: 8px; background: transparent; color: #d0d6e0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.v26 .qs .q:hover:not([aria-current="true"]) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: #f7f8f8; }
.v26 .qs .q[aria-current="true"] { background: #f7f8f8; color: #08090a; box-shadow: none; }
.v26 .try-row .ex, .v26 .qs .q { height: 34px; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent; color: #b4bcc8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font: 500 13.5px/1 var(--sans, "Geist", system-ui, sans-serif); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .1s ease-out; }
@media (hover: hover) {
}

.v26 .chart-card, .v26 .answer { background: #0f1011; color: #f7f8f8; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.v26 .chart-card svg text { fill: #8a8f98; font: 400 11px var(--mono); }
.v26 .ex-pill { color: #8a8f98; background: rgba(255, 255, 255, .06); border-radius: 6px; }
.v26 .answer .u-msg { background: #1c1d20; }
.v26 .phone, .v26 .real-phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.v26 .g-frame { display: block; width: 100%; height: 300px; border: 0; color-scheme: dark; }
.v26 .trust { border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); margin-top: 72px; }
.v26 .trust ul { justify-content: space-between; }
[dir="rtl"] .v26 .chart-card svg { direction: ltr; }

/* ===== Titan button system (one source for every page) =====
   Primary = yellow · Secondary = white · Ghost = outline · Chip = small outline, selected = white.
   Signature hover: the label rolls up and a fresh copy rolls in (300ms), the fill brightens (150ms),
   arrows nudge forward. Press: scale .97. Touch screens get press only. */
:root { --b-ease: cubic-bezier(.2, .8, .2, 1); }
.btn, .lin-btn, .gd-copy, .cx-more, .cta-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-height: 40px; padding: 0 16px; border-radius: 8px; border: 0;
  font: 560 14px/1 var(--sans, "Geist", system-ui, sans-serif); letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .1s ease-out;
}
.btn-sm, .btn-small, .nav .btn, .gd-copy { height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; }
/* primary */
.btn, .cx-add { background: #f3d94e; color: #08090a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
/* secondary */
.btn-dark, .lin-btn, .cta-btn { background: #f7f8f8; color: #08090a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.cta-sec .cta-btn, .cta-card .cta-btn { background: #08090a; color: #f7f8f8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
/* ghost */
.gd-copy, .cx-more { background: transparent; color: #d0d6e0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.btn.is-done, .gd-copy.is-done { background: #1c1d20; color: #f3d94e; box-shadow: inset 0 0 0 1px rgba(243, 217, 78, .4); }

/* label roll */
.btn-text { display: inline-flex; height: 1.35em; overflow: hidden; }
.btn-label { display: inline-block; line-height: 1.35em; text-shadow: 0 1.35em currentColor; transform: none; transition: transform .3s var(--b-ease); }
.btn svg, .lin-btn svg, .cx-add svg, .gd-copy svg, .cta-btn svg, .lin-link svg { flex: none; transition: transform .3s var(--b-ease); }

@media (hover: hover) {
  .btn:hover, .cx-add:hover { background: #ffe56b; }
  .btn-dark:hover, .lin-btn:hover, .cta-btn:hover { background: #fff; }
  .cta-sec .cta-btn:hover, .cta-card .cta-btn:hover { background: #1f2023; }
  .gd-copy:hover, .cx-more:hover { color: #f7f8f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .03); }
  :is(.btn, .lin-btn, .cx-add, .gd-copy, .cx-more, .cta-btn):hover .btn-label { transform: translateY(-1.35em); }
  :is(.btn, .lin-btn, .cta-btn, .lin-link):hover svg:last-child { transform: translateX(2px); }
  .cx-add:hover .cx-icon, .cx-open:hover svg:last-child { transform: translate(2px, -2px); }
}
:is(.btn, .lin-btn, .cx-add, .gd-copy, .cx-more, .cta-btn):active { transform: scale(.97); transition-duration: .08s; }
:is(.btn, .lin-btn, .cx-add, .gd-copy, .cx-more, .cta-btn):focus-visible { outline: 2px solid #f3d94e; outline-offset: 2px; }

/* chips, tabs, segments: one look */
.try-row .ex, .qs .q, .cx-seg, .demo-tabs button, .chat-switch button, .gd-filter a, .plan-toggle button {
  height: 34px; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 0;
  background: transparent; color: #b4bcc8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font: 500 13.5px/1 var(--sans, "Geist", system-ui, sans-serif); cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .1s ease-out;
}
:is(.try-row .ex, .qs .q, .cx-seg, .demo-tabs button, .chat-switch button, .gd-filter a, .plan-toggle button):is([aria-current="true"], [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]) {
  background: #f7f8f8; color: #08090a; box-shadow: none;
}
@media (hover: hover) {
  :is(.try-row .ex, .qs .q, .cx-seg, .demo-tabs button, .chat-switch button, .gd-filter a, .plan-toggle button):not([aria-current="true"], [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]):hover {
    color: #f7f8f8; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  }
}
:is(.try-row .ex, .qs .q, .cx-seg, .demo-tabs button, .chat-switch button, .gd-filter a, .plan-toggle button):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn-label { transition: none; } }
.cx-add { border-radius: 10px; transition: background-color .15s ease-out, transform .1s ease-out; }
.cx-add .btn-text { height: 1.15em; } .cx-add .btn-label { line-height: 1.15em; text-shadow: 0 1.15em currentColor; }
@media (hover: hover) { .cx-add:hover .btn-label { transform: translateY(-1.15em); } }

/* Things to ask: what each example does, as dark tags */
.gd-kind.is-read, .gd-card-dark .gd-kind.is-read { background: rgba(255, 255, 255, .06); color: #b4bcc8; }
.gd-kind.is-change { background: rgba(243, 217, 78, .12); color: #f3d94e; }
.gd-kind.is-start { background: #f3d94e; color: #08090a; }
.demo-tabs { background: rgba(255, 255, 255, .04) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
.gd-card-dark .gd-copy { background: #f3d94e; color: #08090a; box-shadow: none; }

/* Store badges (Apple's and Google's official artwork): the same lift and press as the buttons */
.store { display: inline-flex; border-radius: 8px; transition: transform .2s var(--b-ease, ease-out), box-shadow .2s ease-out; }
.store img { display: block; height: 44px; width: auto; }
.home .get-app { gap: 12px; }
@media (hover: hover) { .store:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .9); } }
.store:active { transform: scale(.97); transition-duration: .08s; }
.store:focus-visible { outline: 2px solid #f3d94e; outline-offset: 3px; }
.home .closing .store:focus-visible { outline-color: #08090a; }
@media (prefers-reduced-motion: reduce) { .store { transition: none; } }
/* a long last phrase (Arabic, Russian) may wrap on a phone rather than push the hero past the screen */
.home .hero-top, .home .hero-copy { min-width: 0; }
@media (max-width: 480px) { .home .hero .keep { white-space: normal; } }
/* Home hero: the official store badges replace the single download button */
.home .t-hero .t-hero-stores { justify-content: center; margin-top: 26px; }