/* TableFlow Hotels website, "Lights on".
   Layout: full-bleed bands that alternate night and day: a night hero with a hotel front whose windows light up (the
   guest's room the one orange window), light working sections, a navy blueprint for accessibility, and the night again
   to close. One 1240px content column; display type set huge and tight; modern CSS (scroll-driven reveals, view
   transitions, @property glows, container queries).
   Display, as in the app (same menu, same saved setting "tfh.display"): theme (html[data-theme]), text size (the
   root font size; everything is in rem), high contrast (html[data-contrast]) and fewer animations (html[data-motion]);
   the computer's own dark, contrast and reduce-motion settings apply too. With motion off everything is still,
   readable and complete. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("source-sans-3.ac057a5593.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("source-sans-3-italic.dba77455b9.woff2") format("woff2"); }

:root {
  --night: #07081c; --night-2: #101236; --navy: #0b1638;
  --purple: #2d2e88; --violet: #6466f1; --lav: #a3a5f7; --lav-2: #d5d5e7;
  --amber: #f49609; --amber-2: #fbd59d; --pink: #d93151;
  /* Daylight: warm cream, the brand purple as ink, and four cheerful accents (with darker inks for text). */
  --coral: #ff7a5c; --sun: #ffc93c; --mint: #3fcf9f; --sky: #6aaeff; --lilac: #b9a8ff;
  --coral-soft: #ffe2d9; --sun-soft: #fff0c2; --mint-soft: #d6f6ea; --sky-soft: #ddebff; --lilac-soft: #ebe5ff;
  --coral-ink: #b53a22; --sun-ink: #8a5a00; --mint-ink: #0b6f4e; --sky-ink: #1d5cb8; --lilac-ink: #4b3fb0;
  --surface: #fffaf2; --sunken: #fff3e3; --raised: #ffffff; --tint: #f3eeff; --line: #efe3d1; --line-strong: #8a8299;
  --ink: #1f1b3a; --muted: #5a5470; --lead: #2d2e88; --lead-hover: #232470; --on-lead: #ffffff; --lead-soft: #e7e7f7;
  --accent-ink: #8a4b00; --accent-soft: #fff1dc; --ready: #0f7a53; --focus: #2d2e88; --alert: #b4233f;
  --font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 40px); --wrap: 1240px; --r: 14px; --r-xl: 24px; --top-h: 68px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 24px 48px -24px rgba(15, 23, 42, .28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1d1938; --sunken: #18142f; --raised: #29244c; --tint: #2c2658; --line: #3b3466; --line-strong: #8f88b0;
    --coral-soft: #4a2a33; --sun-soft: #46391c; --mint-soft: #193f3a; --sky-soft: #1f3157; --lilac-soft: #332c63;
    --coral-ink: #ffb3a1; --sun-ink: #ffd978; --mint-ink: #8eeacb; --sky-ink: #a9cdff; --lilac-ink: #d3c8ff;
    --ink: #fff8ee; --muted: #cfc8e6; --lead: #a3a5f7; --lead-hover: #c3c4fb; --on-lead: #0f172a; --lead-soft: #23266a;
    --accent-ink: #f6a93a; --accent-soft: #3a2605; --ready: #4fd19b; --focus: #f6a93a; --alert: #ff8398;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 60px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --surface: #1d1938; --sunken: #18142f; --raised: #29244c; --tint: #2c2658; --line: #3b3466; --line-strong: #8f88b0;
    --coral-soft: #4a2a33; --sun-soft: #46391c; --mint-soft: #193f3a; --sky-soft: #1f3157; --lilac-soft: #332c63;
    --coral-ink: #ffb3a1; --sun-ink: #ffd978; --mint-ink: #8eeacb; --sky-ink: #a9cdff; --lilac-ink: #d3c8ff;
    --ink: #fff8ee; --muted: #cfc8e6; --lead: #a3a5f7; --lead-hover: #c3c4fb; --on-lead: #0f172a; --lead-soft: #23266a;
    --accent-ink: #f6a93a; --accent-soft: #3a2605; --ready: #4fd19b; --focus: #f6a93a; --alert: #ff8398;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 60px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
/* Japanese and Chinese: the system's own typefaces, and no tight tracking. */
:lang(ja) { --font: "Source Sans 3", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; }
:lang(zh) { --font: "Source Sans 3", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
:lang(ja) :is(.mega, .big, .closing, .tile-big, h1, h2), :lang(zh) :is(.mega, .big, .closing, .tile-big, h1, h2) { letter-spacing: -0.01em; line-height: 1.12; }
:lang(ja) { word-break: auto-phrase; line-break: strict; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@view-transition { navigation: auto; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--lead); text-underline-offset: 3px; }
a:hover { color: var(--lead-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
p { margin: 0; text-wrap: pretty; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.big { font-size: clamp(2.25rem, 5.2vw, 4.25rem); line-height: .98; font-weight: 800; letter-spacing: -0.035em; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.small { font-size: .875rem; color: var(--muted); }
.muted { color: var(--muted); }
.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lead); }
.eyebrow-light { color: var(--amber-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--lead); color: var(--on-lead); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Buttons */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 650 1.0625rem/1.1 var(--font); text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--lead); color: var(--on-lead); }
.btn-primary:hover { background: var(--lead-hover); color: var(--on-lead); }
/* The glowing call to action: a turning light around a solid pill. */
.btn-glow { background: #ffffff; color: var(--purple); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 40px -12px rgba(244, 150, 9, .55); }
.btn-glow::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--spin), var(--amber), var(--pink), var(--violet), var(--amber)); animation: spin 4s linear infinite; }
.btn-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #ffffff; }
.btn-glow:hover { transform: translateY(-2px); color: var(--purple); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 24px 50px -12px rgba(244, 150, 9, .75); }
@keyframes spin { to { --spin: 360deg; } }
.btn-line { color: #ffffff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); backdrop-filter: blur(8px); }
.btn-line:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
.btn-ghost { color: var(--lead); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--lead-soft); }
.btn-light { background: #ffffff; color: var(--purple); }
.btn-light:hover { color: var(--purple); background: var(--amber-2); }
.btn-ghost-light { color: #ffffff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { font-weight: 650; text-decoration: none; }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* Header: glass over everything; light over the night hero. */
.top { container: top / inline-size; position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--surface) 72%, transparent); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s; }
.top.is-scrolled { border-bottom-color: var(--line); }
.top-inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); min-height: var(--top-h); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { height: 30px; width: auto; }
.brand-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-light { display: none; } :root:not([data-theme="light"]) .brand-dark { display: block; } }
:root[data-theme="dark"] .brand-light { display: none; } :root[data-theme="dark"] .brand-dark { display: block; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a:not(.btn), .lang summary { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 10px 2px; cursor: pointer; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--lead); }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.lang[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.globe { width: 18px; height: 18px; }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 8px; min-width: 210px; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.lang ul a { display: flex !important; justify-content: space-between; gap: 12px; padding: 10px 12px !important; border-radius: 10px; color: var(--ink) !important; }
.lang ul a:hover { background: var(--lead-soft); }
.lang ul a[aria-current="true"] { background: var(--lead-soft); }
.lang ul a[aria-current="true"]::after { content: "✓"; color: var(--lead); }
.lang-auto { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.lang-auto button { width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 .875rem var(--font); cursor: pointer; }
.lang-auto button:hover { background: var(--lead-soft); color: var(--ink); }
.lang-auto button[aria-pressed="true"] { color: var(--lead); }
/* Display (theme, text size, contrast, animations): the same menu as the app, opening like the language one. */
.aa { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; }
.disp-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2; width: min(330px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 16px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.disp-title { font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); }
.seg-row button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 600 .875rem var(--font); cursor: pointer; }
.seg-row button[aria-checked="true"] { background: var(--lead); color: var(--on-lead); }
.size-row { display: flex; align-items: center; gap: 8px; }
.size-row button { min-width: 44px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 700 .9375rem var(--font); cursor: pointer; }
.size-row button:disabled { opacity: .4; cursor: default; }
.size-row output { min-width: 3.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.size-row .size-reset { margin-left: auto; border-color: transparent; color: var(--lead); font-weight: 650; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 .9375rem var(--font); text-align: left; cursor: pointer; }
.switch-row strong { display: block; font-weight: 650; }
.switch-row small { display: block; color: var(--muted); font-size: .8125rem; }
.disp-note { font-size: .8125rem; color: var(--muted); }
.hero-purple .top .disp-panel, .hero-purple .top .disp-panel * { color: var(--ink); }
.hero-purple .top .disp-panel .seg-row button[aria-checked="true"] { color: var(--on-lead); }
.hero-purple .top .disp-panel :is(.disp-title, small, .disp-note) { color: var(--muted); }
.hero-purple .top .disp-panel .size-reset { color: var(--lead); }
/* A switch: its state in words as well as in the knob. */
.motion-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); transition: background-color .2s; flex: none; }
.motion-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: transform .2s; }
.switch-row[aria-checked="true"] .motion-track { background: var(--violet); }
.switch-row[aria-checked="true"] .motion-track::after { transform: translateX(16px); }
.menu-toggle { display: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 650 .9375rem var(--font); }
@container top (max-width: 66rem) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100dvh - var(--top-h)); overflow-y: auto; }
  .nav[data-open="false"] { display: none; }
  .nav > a:not(.btn), .lang summary { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .disp-panel { position: static; width: auto; margin: 8px 0; }
  .lang summary { display: flex; }
  .lang ul { position: static; box-shadow: none; border: 0; padding: 4px 0 8px; background: transparent; }
  .nav .btn { margin-top: 14px; }
}
.hero-purple .top { background: color-mix(in oklab, var(--night) 70%, transparent); }
.hero-purple .top .nav > a:not(.btn), .hero-purple .top .lang summary { color: #ffffff; }
.hero-purple .top .nav > a:not(.btn):hover { color: var(--amber-2); }
.hero-purple .top .brand-light { display: none; }
.hero-purple .top .brand-dark { display: block; }
.hero-purple .top .btn-primary { background: #ffffff; color: var(--purple); }
.hero-purple .top .menu-toggle { color: #ffffff; border-color: rgba(255, 255, 255, .45); }
.hero-purple .top.is-scrolled { border-bottom-color: rgba(255, 255, 255, .1); }
.hero-purple .top :focus-visible { outline-color: var(--amber-2); }
@container top (max-width: 66rem) {
  .hero-purple .top .nav { background: var(--night); border-bottom-color: rgba(255, 255, 255, .12); }
  .hero-purple .top .nav > a:not(.btn), .hero-purple .top .lang summary { border-bottom-color: rgba(255, 255, 255, .12); }
  .hero-purple .top .lang ul a { color: #ffffff !important; }
  .hero-purple .top .lang ul a:hover, .hero-purple .top .lang ul a[aria-current="true"] { background: rgba(255, 255, 255, .1); }
  .hero-purple .top .lang-auto { border-top-color: rgba(255, 255, 255, .12); }
  .hero-purple .top .lang-auto button { color: var(--lav-2); }
}

/* The notice after the site changed language by itself: one tap back. */
.notice { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px 14px 20px; border-radius: 18px; background: var(--night-2); color: #ffffff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.notice p { flex: 1 1 220px; }
.notice button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #ffffff; font: 650 .9375rem var(--font); cursor: pointer; }
.notice button:hover { background: rgba(255, 255, 255, .12); }
.notice .notice-close { border: 0; width: 40px; padding: 0; font-size: 1.25rem; }
.notice :focus-visible { outline-color: var(--amber-2); }

/* ============ The night hero ============ */
.night { position: relative; overflow: hidden; isolation: isolate; color: #ffffff; background: var(--night); margin-top: calc(-1 * var(--top-h)); padding-top: calc(var(--top-h) + clamp(48px, 8vw, 120px)); }
.night :focus-visible { outline-color: var(--amber-2); }
.aurora { position: absolute; inset: -20%; z-index: -2; background:
  radial-gradient(40% 35% at 20% 25%, color-mix(in oklab, var(--violet) 70%, transparent), transparent 70%),
  radial-gradient(35% 30% at 80% 15%, color-mix(in oklab, var(--pink) 40%, transparent), transparent 70%),
  radial-gradient(45% 40% at 70% 80%, color-mix(in oklab, var(--purple) 90%, transparent), transparent 70%);
  filter: blur(40px) saturate(1.2); animation: aurora 22s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.08); } }
.night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
/* The hotel front: windows that light up at nightfall, one of them the guest's. */
.facade { position: absolute; z-index: -1; right: max(-2%, calc(50vw - 840px)); top: 8%; width: min(60vw, 860px); display: grid; grid-template-columns: repeat(14, 1fr); gap: clamp(6px, 1vw, 14px); opacity: .85;
  -webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 85%); mask-image: linear-gradient(200deg, #000 30%, transparent 85%); }
@media (max-width: 700px) { .facade { width: 120vw; right: -40%; opacity: .5; } }
.win { aspect-ratio: 3 / 5; border-radius: 999px 999px 4px 4px; border: 1.5px solid rgba(171, 171, 207, .22); background: rgba(255, 255, 255, .02); }
.win-lit { background: linear-gradient(180deg, rgba(251, 213, 157, .65), rgba(244, 150, 9, .35)); border-color: rgba(251, 213, 157, .5); box-shadow: 0 0 24px rgba(244, 150, 9, .35); animation: lightOn .6s ease-out both; animation-delay: calc(400ms + var(--i) * 30ms); }
.win-yours { background: radial-gradient(circle at 50% 62%, #fff4dc 0 14%, var(--amber) 34%, rgba(244, 150, 9, .5) 70%); border-color: var(--amber-2); box-shadow: 0 0 0 4px rgba(244, 150, 9, .18), 0 0 60px 10px rgba(244, 150, 9, .55); animation: lightOn .8s ease-out 2.4s both, breathe 3.5s ease-in-out 3.2s infinite; }
@keyframes lightOn { from { background: rgba(255, 255, 255, .02); box-shadow: none; border-color: rgba(171, 171, 207, .22); } }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(244, 150, 9, .12), 0 0 80px 18px rgba(244, 150, 9, .7); } }
.night-inner { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); }
.kicker { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); font-size: .875rem; font-weight: 600; color: var(--lav-2); }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); flex: none; }
.mega { hyphens: manual; font-size: clamp(2.75rem, 8.6vw, 8.25rem); line-height: .92; font-weight: 850; letter-spacing: -0.05em; display: grid; max-width: 14ch; }
.mega-line { display: block; animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.mega-line + .mega-line { animation-delay: .12s; }
.mega-glow { background: linear-gradient(100deg, #ffffff 0%, var(--lav-2) 35%, var(--amber-2) 70%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
@keyframes rise { from { opacity: .001; transform: translateY(24px); filter: blur(6px); } }
.night-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
@media (max-width: 900px) { .night-row { grid-template-columns: 1fr; } }
.night-sub { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.5; color: var(--lav-2); max-width: 46ch; }
.night-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
@media (max-width: 900px) { .night-cta { justify-content: flex-start; } }
.launch { flex-basis: 100%; text-align: right; font-size: .875rem; color: var(--lav); }
@media (max-width: 900px) { .launch { text-align: left; } }
/* The product on the room: tilts with the pointer. */
.stage { position: relative; perspective: 1400px; margin-top: clamp(8px, 2vw, 24px); }
.stage-photo { border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; aspect-ratio: 21 / 9; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; box-shadow: 0 -30px 80px -20px rgba(100, 102, 241, .45); }
.stage-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 55%; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.03); } to { transform: scale(1.14) translate3d(-2%, -2%, 0); } }
.stage-ui { position: absolute; left: clamp(12px, 4vw, 56px); bottom: clamp(16px, 4vw, 48px); width: min(380px, 82%); transform: translate3d(calc(var(--ry, 0deg) / 1deg * -2px), calc(var(--rx, 0deg) / 1deg * 2px), 0); transition: transform .3s ease-out; }
@media (max-width: 700px) { .stage-photo { aspect-ratio: 4 / 3; } .stage-ui { position: relative; left: auto; bottom: auto; width: auto; margin: -80px 12px 0; } }
.ui { background: color-mix(in oklab, #13163a 84%, transparent); color: #f1f2f9; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); overflow: hidden; backdrop-filter: blur(16px) saturate(1.4); }
.ui-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .8125rem; }
.ui-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ui-bar b { margin-left: 8px; font-weight: 600; color: var(--lav); }
.ui-body { padding: 16px; display: grid; gap: 12px; }
.ui-hello { font-weight: 700; font-size: 1.0625rem; }
.ui-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-stats div { background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 8px 10px; display: grid; min-width: 0; }
.ui-stats small { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lav); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-stats strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.ui-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .8125rem; }
.ui-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-accent { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .dot-ready { background: #4fd19b; } .dot-lead { background: var(--lav); } .dot-pink { background: #f0adb9; }

/* ============ Moments: two rows moving in opposite directions ============ */
.moments { background: var(--night); padding: 22px 0 92px; display: grid; gap: 12px; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); }
.marquee { display: flex; gap: 12px; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; animation: marquee 60s linear infinite; }
.marquee-right ul { animation-direction: reverse; animation-duration: 70s; }
.moments:hover ul, .moments:focus-within ul { animation-play-state: paused; }
.marquee li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: var(--lav-2); font-size: .9375rem; font-weight: 600; }
@keyframes marquee { to { transform: translateX(calc(-100% - 12px)); } }

/* ============ A day at your inn ============ */
.day { padding: clamp(80px, 11vw, 160px) 0; background: var(--surface); }
.day-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .day-grid { grid-template-columns: 1fr; } }
.day-head { position: sticky; top: calc(var(--top-h) + 40px); display: grid; gap: 18px; }
@media (max-width: 900px) { .day-head { position: static; } }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.moment { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px; border-radius: var(--r-xl); background: var(--sunken); border: 1px solid var(--line); }
.moment-time { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px var(--lead); }
.moment:last-child .moment-time { -webkit-text-stroke-color: var(--accent-ink); }
.moment h3 { margin-bottom: 6px; }
.moment p:last-child { color: var(--muted); }
@media (max-width: 520px) { .moment { grid-template-columns: 1fr; gap: 8px; } }
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  @keyframes reveal { from { opacity: .15; transform: translateY(40px) scale(.97); } }
}

/* ============ Inside: the bento ============ */
.inside { padding: clamp(80px, 11vw, 160px) 0; background: var(--sunken); }
.inside-title { max-width: 18ch; margin-bottom: 48px; }
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: 16px; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }
.tile { container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; gap: 8px; padding: 26px; border-radius: var(--r-xl); background: var(--raised); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--violet) 24%, transparent), transparent 60%); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile:hover::before { opacity: 1; }
.tile p:last-child { color: var(--muted); }
.tile-big { font-size: clamp(2.25rem, 14cqi, 5rem); line-height: .95; font-weight: 850; letter-spacing: -0.05em; color: var(--lead); overflow-wrap: anywhere; }
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }
@media (min-width: 1001px) { .tile-wide-3 { grid-column: span 3; } }
@media (max-width: 600px) { .tile-wide, .tile-tall { grid-column: auto; grid-row: auto; } }
.tile-lead { background: radial-gradient(120% 120% at 100% 0%, var(--violet), var(--purple) 55%, var(--night-2)); color: #ffffff; border-color: transparent; }
.tile-lead .tile-big { color: #ffffff; font-size: clamp(4rem, 22cqi, 9rem); }
.tile-lead p:last-child { color: var(--lav-2); }
.tile-ink { background: linear-gradient(160deg, #22255e, var(--night) 70%); color: #ffffff; border-color: rgba(255, 255, 255, .08); }
.tile-ink .tile-big { background: linear-gradient(90deg, var(--lav), var(--amber-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile-ink p:last-child { color: var(--lav-2); }
.tile-accent { background: linear-gradient(160deg, var(--amber-2), var(--amber)); color: #0f172a; border-color: transparent; }
.tile-accent .tile-big { color: #0f172a; }
.tile-accent p:last-child { color: #3a2605; }
.tile-lang .tile-big { -webkit-text-stroke: 2px var(--lead); color: transparent; }
.tile-photo { padding: 0; min-height: 230px; }
.tile-photo figure, .tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-photo img { object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.tile-photo:hover img { transform: scale(1.06); }
.more { margin-top: 32px; }

/* ============ Blueprint: accessibility, measured ============ */
.blueprint { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 160px) 0; color: #ffffff; background-color: var(--navy);
  background-image: linear-gradient(rgba(163, 165, 247, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 165, 247, .08) 1px, transparent 1px), linear-gradient(rgba(163, 165, 247, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 165, 247, .04) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
.blueprint :focus-visible { outline-color: var(--amber-2); }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .bp-grid { grid-template-columns: 1fr; } }
.bp-copy { display: grid; gap: 22px; }
.bp-text { color: var(--lav-2); font-size: 1.1875rem; max-width: 54ch; }
.bp-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(163, 165, 247, .3); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.bp-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-lines path { fill: none; stroke: var(--amber); stroke-width: 2.5px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(244, 150, 9, .8)); }
.bp-photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; }
@media (max-width: 520px) { .bp-photo figcaption { position: static; padding: 12px; background: var(--night); } }
.bp-measures { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.bp-measures div { padding: 10px 12px; border-radius: 12px; background: rgba(7, 8, 28, .8); backdrop-filter: blur(10px); border: 1px solid rgba(163, 165, 247, .25); }
.bp-measures dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lav); }
.bp-measures dd { margin: 0; font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--amber-2); }
@supports (animation-timeline: view()) {
  .bp-lines path { stroke-dasharray: 400; animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
  @keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
}
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--lead-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D2E88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A5F7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A5F7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }
.checks-light li { color: var(--lav-2); }
.checks-light li::before { background-color: rgba(244, 150, 9, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBD59D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }

/* ============ Price for your room count ============ */
.price-band { padding: clamp(80px, 11vw, 160px) 0; background: var(--surface); }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.price-grid > div:first-child { display: grid; gap: 18px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.calc { position: relative; isolation: isolate; display: grid; gap: 14px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--raised); }
.calc::before { content: ""; position: absolute; inset: -1.5px; z-index: -2; border-radius: 30px; background: conic-gradient(from var(--spin), var(--violet), var(--amber), var(--pink), var(--violet)); animation: spin 8s linear infinite; }
.calc::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--raised); }
.calc-label { font-weight: 650; }
.calc output { font-weight: 850; color: var(--lead); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; padding: 0; min-height: 0; border: 0; background: transparent; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--violet) var(--fill, 11%), var(--line) var(--fill, 11%)); }
.calc input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--line); }
.calc input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--violet); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: #ffffff; border: 3px solid var(--violet); box-shadow: 0 4px 14px rgba(100, 102, 241, .5); }
.calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #ffffff; border: 3px solid var(--violet); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.calc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.calc-price strong { font-size: clamp(3.25rem, 8vw, 6rem); line-height: 1; font-weight: 850; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.calc-price.is-quote strong { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; }
.calc-price span, .calc-year { color: var(--muted); }
.calc-tiers { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: .8125rem; font-weight: 650; color: var(--muted); }
.calc-tiers li { padding: 6px 8px; border-radius: 8px; background: var(--sunken); text-align: center; transition: background-color .2s, color .2s; }
.calc-tiers li.on { background: var(--lead); color: var(--on-lead); }

/* ============ Reserve and the closing ============ */
.reserve { position: relative; overflow: hidden; isolation: isolate; color: #ffffff; padding: clamp(80px, 11vw, 160px) 0 0; background: radial-gradient(60% 50% at 80% 0%, rgba(100, 102, 241, .45), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(217, 49, 81, .25), transparent 70%), var(--night); }
.reserve:focus { outline: none; }
.reserve :focus-visible { outline-color: var(--amber-2); }
.reserve-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .reserve-grid { grid-template-columns: 1fr; } }
.reserve-copy { display: grid; gap: 20px; }
.reserve-copy p:last-child { color: var(--lav-2); font-size: 1.1875rem; max-width: 46ch; }
.closing { margin: clamp(64px, 10vw, 140px) 0 0; padding: 0 var(--gutter); text-align: center; font-size: clamp(2.5rem, 10vw, 10rem); line-height: .9; font-weight: 900; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(163, 165, 247, .5); transform: translateY(14%); user-select: none; text-wrap: balance; }
@supports (animation-timeline: view()) {
  .closing { background: linear-gradient(90deg, var(--amber), var(--amber-2)) no-repeat; background-size: 0% 100%; -webkit-background-clip: text; background-clip: text; animation: fillText linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
  @keyframes fillText { to { background-size: 100% 100%; } }
}

/* Form */
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: color-mix(in oklab, #ffffff 7%, transparent); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field > span { font-weight: 650; font-size: .9375rem; }
.field small { font-weight: 400; opacity: .8; }
input, select { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 12px; font: 400 1rem var(--font); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.reserve input, .reserve select { background: rgba(7, 8, 28, .55); border-color: rgba(163, 165, 247, .5); color: #ffffff; }
.reserve select option { color: #0f172a; background: #ffffff; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.reserve input:focus-visible, .reserve select:focus-visible { outline-color: var(--amber-2); border-color: var(--amber-2); }
input[aria-invalid="true"] { border-color: var(--alert) !important; }
.reserve input[aria-invalid="true"] { border-color: #ff8398 !important; }
.err { font-style: normal; font-size: .875rem; font-weight: 650; color: var(--alert); }
.reserve .err { color: #ff9fb0; }
.reserve .small { color: var(--lav-2); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { padding: 12px 14px; border-radius: 12px; background: rgba(255, 131, 152, .15); color: #ffc2cd; font-weight: 650; }
.form-done { display: grid; gap: 8px; padding: 20px; border-radius: 16px; background: rgba(79, 209, 155, .14); color: #b6f0d6; border: 1px solid rgba(79, 209, 155, .35); }
.form-done:focus { outline: none; }

/* ============ Other pages ============ */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-tint { background: var(--tint); }
.section-sunken { background: var(--sunken); }
.section-title { margin-bottom: 40px; max-width: 760px; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split-top { align-items: start; }
.split > div { display: grid; gap: 20px; min-width: 0; }
.split > div > h2:not(:first-child) { margin-top: 20px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.band { display: grid; gap: 16px; justify-items: start; }
.band > * { max-width: 760px; }
.band h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
/* Inner pages open on the night too, shorter. */
.page-night { position: relative; overflow: hidden; isolation: isolate; color: #ffffff; background: var(--night); margin-top: calc(-1 * var(--top-h)); padding: calc(var(--top-h) + clamp(48px, 7vw, 104px)) 0 clamp(56px, 7vw, 96px); }
.page-night .aurora { opacity: .8; }
.page-night .split h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); }
.page-night h1 { hyphens: manual; font-size: clamp(2.75rem, 7vw, 6rem); line-height: .94; font-weight: 850; letter-spacing: -0.05em; }
.page-night .lede { color: var(--lav-2); }
.page-night .eyebrow { color: var(--amber-2); }
.page-night :focus-visible { outline-color: var(--amber-2); }
.page-night .stats li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); }
.page-night .stats strong { color: #ffffff; }
.page-night .stats span { color: var(--lav-2); }
.hero-copy { display: grid; gap: 22px; }
.hero-narrow { display: grid; gap: 20px; }
.hero-narrow > * { max-width: 820px; }
.photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.hero-side { transform: rotate(1.5deg); transition: transform .4s ease; box-shadow: 0 40px 80px -30px rgba(100, 102, 241, .6); }
.hero-side:hover { transform: rotate(0deg) scale(1.01); }
.stats { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.stats li { display: grid; gap: 6px; padding: 22px; border-radius: var(--r-xl); background: var(--raised); border: 1px solid var(--line); }
.stats strong { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-weight: 850; letter-spacing: -0.04em; color: var(--lead); }
.stats span { color: var(--muted); }
.diffs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; counter-reset: diff; }
.diffs li { counter-increment: diff; position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-xl); background: var(--raised); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.diffs li::after { content: counter(diff, decimal-leading-zero); position: absolute; right: 18px; top: 6px; z-index: -1; font-size: 4.5rem; font-weight: 900; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--line); }
.diffs li::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--violet) 18%, transparent), transparent 60%); }
.diffs li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.diffs li:hover::before { opacity: 1; }
.tag { justify-self: start; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--lead); background: var(--lead-soft); padding: 5px 12px; border-radius: 999px; }
.diffs p:last-child { color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--raised); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare th[scope="row"] { font-weight: 650; width: 28%; }
.compare td { color: var(--muted); }
.compare .us { background: linear-gradient(90deg, var(--lead-soft), color-mix(in oklab, var(--lead-soft) 50%, transparent)); color: var(--ink); font-weight: 650; }
.compare thead .us { color: var(--lead); }
.roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.roles li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--r-xl); background: var(--sunken); border: 1px solid var(--line); }
.roles p { color: var(--muted); }
.cta-band { position: relative; overflow: hidden; isolation: isolate; color: #ffffff; padding-bottom: 0; background: radial-gradient(60% 80% at 80% 0%, rgba(100, 102, 241, .5), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(217, 49, 81, .22), transparent 70%), var(--night); }
.cta-band .lede { color: var(--lav-2); }
.cta-band :focus-visible { outline-color: var(--amber-2); }
.arches { display: block; width: 100%; height: auto; max-height: 120px; margin-top: 32px; }
.arches path { fill: none; stroke: rgba(163, 165, 247, .25); stroke-width: 3; }
.arches .lit { fill: var(--amber); filter: drop-shadow(0 0 12px rgba(244, 150, 9, .8)); animation: glow 3.5s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .7; } }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.tier { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; display: grid; gap: 10px; background: var(--raised); align-content: start; transition: transform .3s, box-shadow .3s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier:nth-child(2) { background: radial-gradient(120% 120% at 100% 0%, var(--violet), var(--purple) 60%, var(--night-2)); color: #ffffff; border-color: transparent; }
.tier:nth-child(2) .price span, .tier:nth-child(2) .price-year { color: var(--lav-2); }
.price strong { font-size: 2.75rem; line-height: 1; font-weight: 850; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tier-quote .price strong { font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.25; }
.price-year, .tier .price span { color: var(--muted); }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 22px 0; font-weight: 700; font-size: 1.1875rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--lead); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary::-webkit-details-marker { display: none; }
.faq p { padding: 0 0 22px; color: var(--muted); max-width: 70ch; }
.confirm { min-height: 60vh; }
.confirm h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1; font-weight: 850; letter-spacing: -0.04em; }
.confirm h1:focus { outline: none; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.02; font-weight: 850; letter-spacing: -0.04em; }
.legal h2 { font-size: 1.375rem; margin-top: 32px; }
.legal p, .legal ul { max-width: 72ch; line-height: 1.7; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }
.draft { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }

/* Footer */
.foot { position: relative; overflow: hidden; padding: 56px 0 0; background: var(--night); color: var(--lav-2); border-top: 1px solid rgba(255, 255, 255, .08); }
.foot-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.foot-brand { display: grid; gap: 12px; }
.foot-brand img { height: 28px; width: auto; }
.foot .brand-light { display: none; }
.foot .brand-dark { display: block; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: flex-end; }
.foot-links a { color: #ffffff; text-decoration: none; font-weight: 600; padding: 6px 0; }
.foot-links a:hover { color: var(--amber-2); }
.foot :focus-visible { outline-color: var(--amber-2); }
.foot .zook { display: inline-block; vertical-align: -0.45em; margin: 0 .15em; padding: 2px 4px; border-radius: 6px; transition: opacity .2s, transform .2s; }
.foot .zook img { display: block; height: 1.5em; width: auto; }
.foot .zook:hover { opacity: .85; transform: translateY(-1px); }
.foot-small { grid-column: 1 / -1; font-size: .875rem; color: var(--lav); }
@media (max-width: 760px) { .foot-inner { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; } }

/* ============ Features: a magazine of eight decisions ============ */
.why-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.ghost-num { position: absolute; z-index: -1; right: -4vw; top: 50%; transform: translateY(-50%); margin: 0; font-size: clamp(20rem, 48vw, 46rem); line-height: .8; font-weight: 900; color: transparent; -webkit-text-stroke: 2px rgba(163, 165, 247, .12); pointer-events: none; user-select: none; }
.why-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.index { padding: 22px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(14px); }
.index-title { font-size: .75rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 8px; }
.index ol { list-style: none; margin: 0; padding: 0; display: grid; }
.index a { display: grid; grid-template-columns: 2.5rem 1fr; gap: 8px; align-items: baseline; padding: 9px 6px; border-radius: 10px; color: #ffffff; text-decoration: none; font-weight: 600; line-height: 1.3; transition: background-color .2s, padding .2s; }
.index a:hover { background: rgba(255, 255, 255, .08); padding-left: 12px; }
.index-n { font-variant-numeric: tabular-nums; color: var(--lav); font-weight: 750; font-size: .875rem; }

.evidence { padding: clamp(72px, 10vw, 140px) 0; background: var(--surface); }
.ev-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .ev-grid { grid-template-columns: 1fr; } }
.ev { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--sunken); border: 1px solid var(--line); }
.ev:nth-child(2) { background: var(--night); color: #ffffff; border-color: transparent; }
.ev-n { font-size: clamp(5rem, 13vw, 11rem); line-height: .85; font-weight: 900; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--violet), var(--pink) 60%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev blockquote { margin: 0; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
.ev figcaption { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev:nth-child(2) figcaption { color: var(--lav); }
.ev-answer { padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; }
.ev:nth-child(2) .ev-answer { border-top-color: rgba(255, 255, 255, .15); color: var(--amber-2); }
.ev-answer::before { content: "→ "; }

.chapters-band { padding: clamp(64px, 9vw, 128px) 0; background: var(--sunken); }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; }
.chapter { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 5vw, 80px); padding: clamp(32px, 5vw, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 16px); }
.chapter:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .chapter { grid-template-columns: 1fr; gap: 8px; } }
.ch-n { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; margin: 0; font-size: clamp(5rem, 12vw, 10rem); line-height: .8; font-weight: 900; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 2px var(--lead); background: linear-gradient(180deg, var(--violet), var(--pink)) no-repeat; background-size: 100% 0%; background-position: bottom; -webkit-background-clip: text; background-clip: text; }
@media (max-width: 760px) { .ch-n { position: static; font-size: 4rem; } }
.ch-body { display: grid; gap: 14px; align-content: start; max-width: 640px; }
.ch-body h3 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.ch-body p:last-child { font-size: 1.1875rem; color: var(--muted); }
.chapter::before { content: ""; position: absolute; inset: 0 -24px; z-index: -1; border-radius: var(--r-xl); opacity: 0; transition: opacity .3s; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--violet) 12%, transparent), transparent 60%); }
.chapter:hover::before { opacity: 1; }
@supports (animation-timeline: view()) {
  .ch-n { animation: fillUp linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  @keyframes fillUp { to { background-size: 100% 100%; } }
}

.opening { position: relative; overflow: hidden; background: var(--night); }
.opening-photo img { width: 100%; height: clamp(420px, 80vh, 820px); object-fit: cover; filter: saturate(1.05); }
.opening::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 28, .2), rgba(7, 8, 28, .75)); }
.opening-quote { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 6vw, 80px); max-width: 16ch; margin: 0 auto; text-align: center; font-size: clamp(2.25rem, 6.4vw, 6rem); line-height: .95; font-weight: 850; letter-spacing: -0.045em; color: #ffffff; text-wrap: balance; }
@supports (animation-timeline: view()) {
  .opening-photo { animation: openUp linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  @keyframes openUp { from { clip-path: inset(8% 12% round 32px); transform: scale(1.08); } to { clip-path: inset(0 0 round 0); transform: scale(1); } }
}

.versus-head, .vs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.versus-head { padding: 0 24px 12px; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.versus-head span:last-child { color: var(--lead); }
.versus { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs { padding: 20px 24px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); }
.vs-topic { font-weight: 750; }
.vs-them { color: var(--muted); }
.vs-them s { text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 55% / 100% 2px; }
.vs-us { font-weight: 700; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.vs-us::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); transform: translateY(-1px); }
.vs-note { margin-top: 16px; }
@media (max-width: 760px) { .versus-head { display: none; } .vs { grid-template-columns: 1fr; gap: 6px; } }
@supports (animation-timeline: view()) {
  .vs-them s { animation: strike linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
  @keyframes strike { from { background-size: 0% 2px; } }
}

.roles-band { padding: clamp(64px, 9vw, 128px) 0; background: var(--surface); overflow: hidden; }
.roles-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.roles-head .section-title { margin-bottom: 0; }
.rail { margin-top: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); scrollbar-width: thin; }
.rail:focus-visible { outline-offset: -4px; }
.rail ul { list-style: none; margin: 0; display: flex; gap: 16px; padding: 4px max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 24px; width: max-content; }
.role-card { scroll-snap-align: start; width: min(78vw, 360px); min-height: 380px; display: grid; align-content: end; gap: 12px; padding: 28px; border-radius: 28px; color: #ffffff; position: relative; overflow: hidden; isolation: isolate; }
.role-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%); }
.role-0 { background: linear-gradient(160deg, var(--violet), var(--purple)); }
.role-1 { background: linear-gradient(160deg, #22255e, var(--night)); }
.role-2 { background: linear-gradient(160deg, var(--amber), #c45e00); color: #0f172a; }
.role-3 { background: linear-gradient(160deg, var(--pink), #7a1530); }
.role-4 { background: linear-gradient(160deg, #0f7a53, #0b3b2c); }
.role-n { position: absolute; top: 18px; right: 22px; font-size: 5rem; line-height: 1; font-weight: 900; letter-spacing: -0.06em; opacity: .25; }
.role-card h3 { font-size: 2rem; font-weight: 850; letter-spacing: -0.03em; }
.role-card p:last-child { opacity: .9; }

.secure { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 160px) 0; color: #ffffff; background-color: var(--navy);
  background-image: linear-gradient(rgba(163, 165, 247, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 165, 247, .08) 1px, transparent 1px); background-size: 48px 48px; }
.secure :focus-visible { outline-color: var(--amber-2); }
.terminal { border-radius: 20px; overflow: hidden; background: #050612; border: 1px solid rgba(163, 165, 247, .3); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04) inset; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .8125rem; color: var(--lav); }
.term-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.term-bar span:first-child { background: #ff5f57; } .term-bar span:nth-child(2) { background: #febc2e; } .term-bar span:nth-child(3) { background: #28c840; }
.term-bar b { margin-left: 10px; font-weight: 500; }
.terminal ul { list-style: none; margin: 0; padding: 20px; display: grid; gap: 12px; font-size: .9375rem; color: #d5d5e7; }
.terminal li { display: flex; gap: 12px; }
.term-ok { color: #4fd19b; font-weight: 700; }
@supports (animation-timeline: view()) {
  .terminal li { animation: typeIn linear both; animation-timeline: view(); animation-range: entry calc(30% + var(--i) * 8%) entry calc(60% + var(--i) * 8%); }
  @keyframes typeIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
}

/* ============ Pricing: the calculator, the building, the receipt ============ */
.price-hero { padding-bottom: clamp(64px, 8vw, 112px); }
.price-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .price-hero-grid { grid-template-columns: 1fr; } }
.calc-xl { color: var(--ink); }
.bill { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); }
.bill button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 650 .9375rem var(--font); cursor: pointer; transition: background-color .2s, color .2s; }
.bill button small { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .75rem; font-weight: 750; }
.bill button[aria-checked="true"] { background: var(--lead); color: var(--on-lead); }
.calc-night { font-weight: 650; color: var(--lead); }
.calc-night:empty { display: none; }

.floors-band { padding: clamp(80px, 11vw, 160px) 0; background: var(--surface); }
.floors-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .floors-grid { grid-template-columns: 1fr; } }
.floors-copy { display: grid; gap: 18px; }
.building { display: grid; justify-items: center; }
.roof { margin: 0 0 -1px; padding: 10px 22px; border-radius: 14px 14px 0 0; background: var(--night); }
.roof span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; color: var(--amber-2); text-shadow: 0 0 12px rgba(244, 150, 9, .9), 0 0 2px #fff; }
.floors { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; justify-items: center; }
.floor { width: var(--w); min-width: min(100%, 300px); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 16px 20px; background: #12143a; color: var(--lav-2); border-top: 1px solid rgba(255, 255, 255, .08); transition: background-color .35s, color .35s, transform .35s; }
.floor:first-child { border-radius: 10px 10px 0 0; }
.floor-wins { grid-column: 1 / -1; display: flex; gap: 6px; }
.floor-wins i { flex: 1; max-width: 22px; aspect-ratio: 3 / 5; border-radius: 999px 999px 2px 2px; border: 1.5px solid rgba(171, 171, 207, .25); transition: background-color .35s, box-shadow .35s; }
.floor-label { font-weight: 700; color: #ffffff; }
.floor-price { display: grid; justify-items: end; text-align: right; }
.floor-price strong { color: #ffffff; font-variant-numeric: tabular-nums; }
.floor-price small { font-size: .8125rem; }
.floor.on { background: linear-gradient(90deg, #2d2e88, #4b4dd6); transform: scale(1.03); box-shadow: 0 20px 40px -20px rgba(100, 102, 241, .8); position: relative; z-index: 1; }
.floor.on .floor-wins i { background: linear-gradient(180deg, var(--amber-2), var(--amber)); border-color: var(--amber-2); box-shadow: 0 0 12px rgba(244, 150, 9, .6); }
.ground { width: 100%; height: 10px; margin: 0; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

.receipt-band { padding: clamp(80px, 11vw, 160px) 0; background: var(--sunken); overflow: hidden; }
.receipt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .receipt-grid { grid-template-columns: 1fr; } }
.receipt-copy { display: grid; gap: 18px; }
.receipt-copy h3 { margin-top: 12px; }
.receipt-wrap { position: relative; justify-self: center; width: min(100%, 420px); }
.receipt { position: relative; padding: 32px 28px 40px; background: #fffdf7; color: #1d1d1d; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875rem; transform: rotate(-2deg); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.rc-head { text-align: center; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 1rem; }
.rc-sub { text-align: center; color: #666; margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px dashed #bbb; }
.receipt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.receipt li { display: flex; align-items: baseline; gap: 6px; }
.receipt li span:first-child { flex: 0 1 auto; }
.rc-dots { flex: 1 1 20px; border-bottom: 2px dotted #c9c9c9; transform: translateY(-3px); }
.receipt li span:last-child { font-weight: 700; white-space: nowrap; }
.rc-total { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 2px solid #1d1d1d; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }
.rc-thanks { margin-top: 16px; text-align: center; color: #666; }
.stamp { position: absolute; right: -36px; top: -28px; display: grid; place-items: center; width: 132px; height: 132px; margin: 0; border-radius: 50%; border: 4px solid var(--pink); color: var(--pink); font-weight: 900; font-size: 2.25rem; letter-spacing: -0.04em; transform: rotate(-14deg); mix-blend-mode: multiply; opacity: .85; box-shadow: inset 0 0 0 6px #fffdf7, inset 0 0 0 8px var(--pink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { mix-blend-mode: normal; } }
:root[data-theme="dark"] .stamp { mix-blend-mode: normal; }
@supports (animation-timeline: view()) {
  .stamp { animation: stampIn linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
  @keyframes stampIn { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 60% { opacity: .9; transform: rotate(-14deg) scale(.92); } 100% { opacity: .85; transform: rotate(-14deg) scale(1); } }
}

.scale { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 28px; padding-top: 14px; border-top: 4px solid var(--line); }
.scale-step { position: relative; display: grid; gap: 2px; padding-top: 12px; }
.scale-step::before { content: ""; position: absolute; top: -23px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--surface); }
.scale-step b { font-size: 1.5rem; font-weight: 850; letter-spacing: -0.03em; }
.scale-step small { color: var(--muted); font-size: .8125rem; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-grid > h2 { position: sticky; top: calc(var(--top-h) + 32px); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid > h2 { position: static; } }

/* ============ About: a manifesto ============ */
.about-hero { min-height: min(92vh, 900px); display: grid; align-items: end; }
.big-arch { position: absolute; z-index: -1; right: max(-6vw, calc(50vw - 760px)); top: 10%; width: min(46vw, 560px); height: auto; }
.big-arch path { fill: none; stroke: rgba(163, 165, 247, .7); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 3000; animation: drawArch 2.4s cubic-bezier(.6, 0, .2, 1) .3s both; }
.big-arch circle { fill: var(--amber); filter: drop-shadow(0 0 24px rgba(244, 150, 9, .9)); animation: lightOn 1s ease-out 2.4s both, glow 3.5s ease-in-out 3.4s infinite; }
.big-arch .a2 { stroke: rgba(163, 165, 247, .45); animation-delay: .6s; }
.big-arch .a3 { stroke: rgba(251, 213, 157, .55); animation-delay: .9s; }
@keyframes drawArch { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
@media (max-width: 700px) { .big-arch { width: 80vw; right: -20vw; opacity: .5; } }
.about-hero h1 { font-size: clamp(3rem, 8vw, 7.5rem); max-width: 13ch; }

.manifesto-band { padding: clamp(80px, 11vw, 160px) 0; background: var(--night); color: #ffffff; }
.manifesto { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 56px); }
.manifesto li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 16px 48px; align-items: end; padding-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 800px) { .manifesto li { grid-template-columns: 1fr; } }
.mf-big { font-size: clamp(2.75rem, 7.5vw, 7rem); line-height: .92; font-weight: 900; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(213, 213, 231, .6); background: linear-gradient(90deg, #ffffff, var(--amber-2)) no-repeat; background-size: 0% 100%; -webkit-background-clip: text; background-clip: text; }
.mf-small { color: var(--lav-2); font-size: 1.1875rem; }
@supports not (animation-timeline: view()) { .mf-big { background-size: 100% 100%; } }
@supports (animation-timeline: view()) {
  .mf-big { animation: fillText linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
}
.arch-photo { overflow: hidden; border-radius: 999px 999px var(--r-xl) var(--r-xl); aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.arch-photo img { width: 100%; height: 100%; object-fit: cover; }
.story .split > div { gap: 18px; }
.story-p { font-size: 1.1875rem; color: var(--muted); }
.story-p:first-of-type { font-size: 1.375rem; color: var(--ink); font-weight: 600; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.rules li { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; align-content: start; padding: 72px 28px 28px; border-radius: var(--r-xl); background: var(--raised); border: 1px solid var(--line); }
.rules li::before { content: "“"; position: absolute; top: -8px; left: 20px; font-size: 7rem; line-height: 1; font-weight: 900; color: var(--lead); opacity: .25; }
.rules li::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--violet) 16%, transparent), transparent 60%); }
.rules li:hover::after { opacity: 1; }
.rules h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.rules p { color: var(--muted); }
.timeline-h { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; position: relative; }
.timeline-h::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--amber), var(--violet) 50%, var(--line)); }
.timeline-h li { position: relative; display: grid; gap: 8px; padding-top: 36px; }
.tl-dot { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 5px var(--surface); }
.is-now .tl-dot { background: var(--amber); animation: breathe 3s ease-in-out infinite; }
.tl-when { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 850; letter-spacing: -0.03em; }
@media (max-width: 600px) { .timeline-h { grid-template-columns: 1fr; } }
.contact-band { padding: clamp(80px, 11vw, 160px) 0; background: radial-gradient(60% 80% at 0% 100%, rgba(244, 150, 9, .25), transparent 70%), var(--night); color: #ffffff; }
.contact-band :focus-visible { outline-color: var(--amber-2); }
.contact-text { margin: 18px 0 28px; max-width: 52ch; font-size: 1.25rem; color: var(--lav-2); }
.mega-mail { display: inline-block; font-size: clamp(1.75rem, 6.2vw, 6rem); line-height: 1; font-weight: 850; letter-spacing: -0.04em; color: #ffffff; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 100% / 0% 4px; transition: background-size .5s cubic-bezier(.2, .8, .2, 1), color .3s; padding-bottom: 6px; }
.mega-mail:hover { color: var(--amber-2); background-size: 100% 4px; }
.ui-preview { margin-left: auto; font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(244, 150, 9, .18); color: var(--amber-2); }

/* Icons (Font Awesome Free, inline SVG) */
.ch-tag { display: flex; align-items: center; gap: 12px; }
.ch-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(140deg, var(--violet), var(--purple)); color: #ffffff; font-size: 1.25rem; box-shadow: 0 10px 24px -10px rgba(100, 102, 241, .8); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.chapter:hover .ch-icon { transform: rotate(-8deg) scale(1.08); }
.role-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: auto; border-radius: 16px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); font-size: 1.5rem; }
.role-card { align-content: space-between; }
.ev-answer { display: flex; gap: 12px; align-items: flex-start; }
.ev-answer::before { content: none; }
.ev-icon { font-size: 1.375rem; margin-top: 2px; color: var(--violet); }
.ev:nth-child(2) .ev-icon { color: var(--amber); }

/* ============ Sunlit: daylight after the night hero ============ */
.fa { width: 1em; height: 1em; flex: none; }
:is(.day, .inside, .price-band) { background: var(--surface); }
.inside { background: var(--sunken); }
.day-head .big, .inside-title, .price-band .big { color: var(--ink); }
.day-sun { position: relative; width: 120px; height: 120px; margin-top: 12px; }
.day-sun::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, var(--sun) 60%, #ffab2e); box-shadow: 0 0 40px rgba(255, 201, 60, .7); }
.day-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--sun) 0 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(circle, transparent 46px, #000 47px, #000 58px, transparent 59px); mask: radial-gradient(circle, transparent 46px, #000 47px, #000 58px, transparent 59px); animation: spin-rays 40s linear infinite; }
@keyframes spin-rays { to { transform: rotate(360deg); } }
.moment { background: var(--raised); border: 0; border-radius: 28px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(31, 27, 58, .35); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.moment:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 1px 0 var(--line), 0 26px 50px -26px rgba(31, 27, 58, .45); }
.moment-time { color: var(--c-ink, var(--lilac-ink)); -webkit-text-stroke: 0 !important; }
.moment:nth-child(6n+1) { --c-soft: var(--sun-soft); --c-ink: var(--sun-ink); }
.moment:nth-child(6n+2) { --c-soft: var(--mint-soft); --c-ink: var(--mint-ink); }
.moment:nth-child(6n+3) { --c-soft: var(--sky-soft); --c-ink: var(--sky-ink); }
.moment:nth-child(6n+4) { --c-soft: var(--coral-soft); --c-ink: var(--coral-ink); }
.moment:nth-child(6n+5) { --c-soft: var(--lilac-soft); --c-ink: var(--lilac-ink); }
.moment:nth-child(6n) { --c-soft: var(--lilac-soft); --c-ink: var(--lilac-ink); }
.moment h3 { display: flex; align-items: center; gap: 10px; }
.bubble { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-soft, var(--lilac-soft)); color: var(--c-ink, var(--lilac-ink)); font-size: 1.05rem; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
:is(.moment, .tile):hover .bubble { transform: scale(1.12) rotate(-8deg); }

/* The bento in daylight colours */
.inside-head { position: relative; }
.sticker { position: absolute; right: 0; top: -12px; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--coral); color: #ffffff; font-weight: 900; font-size: 1.75rem; letter-spacing: -0.03em; transform: rotate(12deg); box-shadow: 0 14px 30px -12px rgba(255, 122, 92, .8); animation: wobble 5s ease-in-out infinite; }
.sticker::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .7); }
@keyframes wobble { 50% { transform: rotate(-6deg) scale(1.04); } }
@media (max-width: 700px) { .sticker { width: 84px; height: 84px; font-size: 1.25rem; top: -40px; } }
.tile { border: 0; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(31, 27, 58, .35); border-radius: 28px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.tile:hover { transform: translateY(-6px) rotate(-.6deg); }
.tile .bubble { justify-self: start; align-self: start; margin-bottom: 14px; width: 46px; height: 46px; font-size: 1.15rem; background: rgba(255, 255, 255, .9); color: var(--c-ink, var(--lilac-ink)); }
.tile:not(.tile-photo) { grid-template-rows: 1fr auto auto auto; align-content: stretch; }
.tile-lang .tile-big { color: var(--sky-ink) !important; }
.tile-big { color: var(--c-ink, var(--lead)); -webkit-text-stroke: 0 !important; }
.tile-lead { --c-ink: #ffffff; background: linear-gradient(135deg, #6466f1, #a45cff 60%, #ff7ab6); }
.tile-lead .bubble { color: #6466f1; }
.tile-ink { --c-ink: var(--mint-ink); background: var(--mint-soft); color: var(--ink); }
.tile-ink .tile-big { background: none; color: var(--mint-ink); }
.tile-ink p:last-child { color: var(--muted); }
.tile-accent { --c-ink: var(--sun-ink); background: var(--sun-soft); color: var(--ink); }
.tile-accent .tile-big { color: var(--sun-ink); }
.tile-accent p:last-child { color: var(--muted); }
.tile-lang { --c-ink: var(--sky-ink); background: var(--sky-soft); }
.tile:not(.tile-lead):not(.tile-ink):not(.tile-accent):not(.tile-lang):not(.tile-photo) { --c-ink: var(--coral-ink); }
.tile-photo { border-radius: 28px; }
.tile-photo.tile-tall { border-radius: 999px 999px 28px 28px; }
.tile::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 60%); }

/* Accessibility, measured: sky-blue graph paper instead of a night blueprint */
.blueprint { color: var(--ink); background-color: #eaf3ff; background-image: linear-gradient(rgba(29, 92, 184, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 92, 184, .1) 1px, transparent 1px), linear-gradient(rgba(29, 92, 184, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 92, 184, .05) 1px, transparent 1px); }
.blueprint .eyebrow-light { color: var(--sky-ink); }
.blueprint .bp-text, .blueprint .checks-light li { color: var(--muted); }
.blueprint .checks-light li::before { background-color: var(--mint-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6F4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }
.blueprint :focus-visible { outline-color: var(--focus); }
.bp-photo { border: 6px solid #ffffff; border-radius: 999px 999px 28px 28px; box-shadow: 0 30px 60px -30px rgba(29, 92, 184, .5); }
.bp-lines path { stroke: var(--coral); filter: none; }
.bp-measures div { background: rgba(255, 255, 255, .92); border: 0; box-shadow: 0 8px 20px -12px rgba(29, 92, 184, .5); }
.bp-measures dt { color: var(--muted); }
.bp-measures dd { color: var(--sky-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blueprint { background-color: #1c2550; } :root:not([data-theme="light"]) .bp-measures div { background: rgba(29, 25, 56, .92); } }
:root[data-theme="dark"] .blueprint { background-color: #1c2550; }
:root[data-theme="dark"] .bp-measures div { background: rgba(29, 25, 56, .92); }

/* The price: a bright card and a number that pops */
.calc { box-shadow: 0 30px 60px -30px rgba(31, 27, 58, .4); }
.calc::before { background: conic-gradient(from var(--spin), var(--coral), var(--sun), var(--mint), var(--sky), var(--lilac), var(--coral)); }
.calc-tiers li.on { background: var(--coral); color: #ffffff; }
.pop { animation: pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop { 40% { transform: scale(1.08); } }
.calc-price strong { display: inline-block; }

/* Reserve: a warm sunrise instead of the night */
.reserve { color: var(--ink); background: radial-gradient(60% 70% at 85% 10%, var(--sun-soft), transparent 70%), radial-gradient(60% 70% at 0% 100%, var(--coral-soft), transparent 70%), radial-gradient(50% 60% at 50% 50%, var(--lilac-soft), transparent 80%), var(--surface); }
.reserve .eyebrow-light { color: var(--coral-ink); }
.reserve-copy p:last-child { color: var(--muted); }
.reserve :focus-visible { outline-color: var(--focus); }
.reserve .form { background: var(--raised); border: 0; backdrop-filter: none; box-shadow: 0 40px 80px -40px rgba(31, 27, 58, .45); }
.reserve input, .reserve select { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.reserve input:focus-visible, .reserve select:focus-visible { outline-color: var(--focus); border-color: var(--lead); }
.reserve .err { color: var(--alert); }
.reserve input[aria-invalid="true"] { border-color: var(--alert) !important; }
.reserve .small { color: var(--muted); }
.reserve .form-status { background: var(--coral-soft); color: var(--coral-ink); }
.reserve .form-done { background: var(--mint-soft); color: var(--mint-ink); border-color: transparent; }
.reserve .btn-glow { background: var(--lead); color: #ffffff; }
.reserve .btn-glow::after { background: var(--lead); }
.reserve .btn-glow:hover { color: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reserve .btn-glow, :root:not([data-theme="light"]) .reserve .btn-glow::after { background: #6466f1; } }
:root[data-theme="dark"] .reserve .btn-glow, :root[data-theme="dark"] .reserve .btn-glow::after { background: #6466f1; }
.form-lights { display: flex; gap: 10px; margin-top: 8px; }
.form-lights i { width: 30px; aspect-ratio: 3 / 5; border-radius: 999px 999px 4px 4px; border: 2px solid var(--line-strong); transition: background-color .4s, border-color .4s, box-shadow .4s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.form-lights i.on { background: linear-gradient(180deg, var(--sun), var(--coral)); border-color: var(--sun); box-shadow: 0 0 16px rgba(255, 201, 60, .8); transform: translateY(-3px); }
.closing { color: var(--lead) !important; -webkit-text-stroke: 0 !important; background: none !important; transform: none; padding-bottom: clamp(32px, 5vw, 64px); }

/* Footer in the brand purple */
.foot { background: linear-gradient(180deg, #2d2e88, #232470); }
.foot-small { color: var(--lav-2); }

/* Inner pages open in daylight too */
.page-night { color: var(--ink); background: var(--surface); }
.page-night .aurora { opacity: 1; filter: blur(50px); background: radial-gradient(40% 40% at 15% 20%, var(--sun-soft), transparent 70%), radial-gradient(40% 40% at 85% 10%, var(--lilac-soft), transparent 70%), radial-gradient(50% 50% at 70% 90%, var(--coral-soft), transparent 70%); }
.page-night .lede { color: var(--muted); }
.page-night .eyebrow { color: var(--coral-ink); }
.page-night :focus-visible { outline-color: var(--focus); }
.page-night .stats li { background: var(--raised); border: 0; box-shadow: 0 18px 40px -28px rgba(31, 27, 58, .35); }
.page-night .stats strong { color: var(--lead); }
.page-night .stats span { color: var(--muted); }
.cta-band { color: var(--ink); background: radial-gradient(60% 80% at 85% 0%, var(--sun-soft), transparent 70%), radial-gradient(50% 70% at 0% 100%, var(--coral-soft), transparent 70%), var(--surface); }
.cta-band .lede { color: var(--muted); }
.cta-band :focus-visible { outline-color: var(--focus); }
.cta-band .btn-glow { background: var(--lead); color: #ffffff; }
.cta-band .btn-glow::after { background: var(--lead); }
.cta-band .btn-ghost-light { color: var(--lead); border-color: var(--line-strong); }
.arches path { stroke: rgba(45, 46, 136, .18); }
.foot .arches path { stroke: rgba(213, 213, 231, .25); }
.diffs li, .roles li, .tier { border: 0; border-radius: 28px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(31, 27, 58, .35); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.diffs li:hover, .tier:hover { transform: translateY(-6px) rotate(-.5deg); }
.diffs li::after { -webkit-text-stroke: 0; color: var(--lilac-soft); }
.tag { color: var(--coral-ink); background: var(--coral-soft); }
.tier:nth-child(2) { background: linear-gradient(135deg, #6466f1, #a45cff 60%, #ff7ab6); }
.compare .us { background: var(--mint-soft); }

/* Display serif: Moret Bold (Adobe Fonts) for headlines; body text stays Source Sans. Not for Japanese or Chinese. */
:root { --serif: "moret", Georgia, "Times New Roman", serif; }
:is(.big, .section-title, .page-night h1, .band h2, .split h2, .legal h1, .confirm h1, .closing, .calc-price strong) { font-family: var(--serif); font-weight: 700; letter-spacing: -0.025em; }
.big, .section-title { line-height: 1.02; }
.mega { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; line-height: .98; }
.tile-big { font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; }
.moment-time { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
.closing { font-style: italic; font-weight: 700; letter-spacing: -0.03em; }
:lang(ja) :is(.mega, .big, .section-title, .page-night h1, .band h2, .split h2, .legal h1, .confirm h1, .closing, .tile-big, .moment-time, .calc-price strong),
:lang(zh) :is(.mega, .big, .section-title, .page-night h1, .band h2, .split h2, .legal h1, .confirm h1, .closing, .tile-big, .moment-time, .calc-price strong) { font-family: var(--font); font-style: normal; }
/* Headlines rise into view as you reach them; without scroll timelines they simply stand. */
@supports (animation-timeline: view()) {
  :is(.day, .inside, .blueprint, .price-band, .reserve, .section) :is(.big, .section-title) { animation: riseIn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes riseIn { from { opacity: 0; transform: translateY(.5em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
}
/* Daylight begins under an arch: the brand's mark, with its lit room, cut into the night. */
.day { position: relative; }
.day::before { content: ""; position: absolute; left: 50%; top: -64px; width: 128px; height: 64px; transform: translateX(-50%); background: var(--surface); border-radius: 64px 64px 0 0; }
.day::after { content: ""; position: absolute; left: 50%; top: -30px; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: var(--sun); box-shadow: 0 0 20px rgba(255, 201, 60, .9); }
/* Reserve, always in reach once the hero has passed. */
.float-cta { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--coral); color: #ffffff; font-weight: 700; text-decoration: none; box-shadow: 0 16px 34px -12px rgba(255, 122, 92, .75); transform: translateY(140%); opacity: 0; visibility: hidden; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s, visibility 0s .5s, background-color .2s; }
.float-cta.show { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.float-cta:hover { color: #ffffff; background: #f2603f; }
.float-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.float-cta { color: #1f1b3a; } .float-cta:hover { color: #1f1b3a; }

/* ============ Sunlit: Features, Pricing and About in daylight ============ */
.ghost-num { color: var(--lilac-soft); -webkit-text-stroke: 0; font-family: var(--serif); }
.index { background: var(--raised); border: 0; backdrop-filter: none; box-shadow: 0 30px 60px -36px rgba(31, 27, 58, .4); }
.index-title { color: var(--coral-ink); }
.index a { color: var(--ink); }
.index a:hover { background: var(--sunken); }
.index-n { color: var(--lilac-ink); font-family: var(--serif); }
.evidence { background: var(--surface); }
.ev { background: var(--sun-soft); border: 0; }
.ev:nth-child(2) { background: var(--lilac-soft); color: var(--ink); }
.ev-n { font-family: var(--serif); font-weight: 700; background: linear-gradient(120deg, var(--coral), #a45cff); -webkit-background-clip: text; background-clip: text; }
.ev:nth-child(2) figcaption { color: var(--muted); }
.ev-answer { border-top-color: rgba(31, 27, 58, .12); }
.ev:nth-child(2) .ev-answer { border-top-color: rgba(31, 27, 58, .12); color: var(--ink); }
.ev-icon { color: var(--coral-ink); }
.ev:nth-child(2) .ev-icon { color: var(--lilac-ink); }
.chapters-band { background: var(--sunken); }
.ch-n { font-family: var(--serif); font-weight: 700; color: var(--lilac-soft); -webkit-text-stroke: 0; background-image: linear-gradient(180deg, var(--coral), #a45cff); }
.ch-icon { background: var(--coral); box-shadow: 0 10px 24px -10px rgba(255, 122, 92, .8); }
.ch-body h3, .ev blockquote, .vs-topic { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
.opening-quote { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
.vs { border: 0; box-shadow: 0 1px 0 var(--line), 0 14px 30px -24px rgba(31, 27, 58, .35); }
.vs-them s { background-image: linear-gradient(var(--coral), var(--coral)); }
.vs-us::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.versus-head span:last-child { color: var(--coral-ink); }
.roles-band { background: var(--surface); }
.role-1 { background: linear-gradient(160deg, #6aaeff, #1d5cb8); }
.role-card h3 { font-family: var(--serif); font-weight: 700; }
.secure { color: var(--ink); background-color: var(--mint-soft); background-image: linear-gradient(rgba(11, 111, 78, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 111, 78, .1) 1px, transparent 1px); }
.secure .eyebrow-light { color: var(--mint-ink); }
.secure .bp-text { color: var(--muted); }
.secure :focus-visible { outline-color: var(--focus); }
.terminal { border-color: transparent; box-shadow: 0 40px 80px -30px rgba(11, 111, 78, .55); }
.bill button small { background: var(--sun-soft); color: var(--sun-ink); }
.bill button[aria-checked="true"] { background: var(--coral); color: #1f1b3a; }
.calc-night { color: var(--coral-ink); }
.floors-band { background: var(--surface); }
.roof { background: var(--lead); }
.roof span { color: var(--sun); text-shadow: 0 0 10px rgba(255, 201, 60, .8); }
.floor { background: var(--lilac-soft); color: var(--muted); border-top-color: rgba(255, 255, 255, .6); }
.floor-label, .floor-price strong { color: var(--ink); }
.floor-wins i { border-color: rgba(75, 63, 176, .35); background: rgba(255, 255, 255, .6); }
.floor.on { background: linear-gradient(90deg, #6466f1, #a45cff); color: #ffffff; box-shadow: 0 20px 40px -18px rgba(100, 102, 241, .7); }
.floor.on :is(.floor-label, .floor-price strong, .floor-price small) { color: #ffffff; }
.floor.on .floor-wins i { background: linear-gradient(180deg, #fff3b0, var(--sun)); border-color: var(--sun); box-shadow: 0 0 12px rgba(255, 201, 60, .8); }
.receipt-band { background: var(--sunken); }
.stamp { border-color: var(--coral); color: var(--coral); box-shadow: inset 0 0 0 6px #fffdf7, inset 0 0 0 8px var(--coral); }
.scale-step::before { background: var(--coral); }
.big-arch path { stroke: rgba(100, 102, 241, .8); stroke-width: 4; }
.big-arch .a2 { stroke: rgba(164, 92, 255, .6); }
.big-arch .a3 { stroke: rgba(255, 122, 92, .9); }
.big-arch circle { fill: var(--sun); filter: drop-shadow(0 0 18px rgba(255, 201, 60, .9)); }
.about-hero h1 { color: var(--ink); }
.manifesto-band { background: var(--surface); color: var(--ink); }
.manifesto-band .eyebrow { color: var(--coral-ink); }
.manifesto li { border-bottom-color: var(--line); }
/* A highlighter sweeps under each line of the manifesto as you read it. */
.mf-big { font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); -webkit-text-stroke: 0; background: linear-gradient(transparent 62%, var(--sun-soft) 62%, var(--sun-soft) 92%, transparent 92%) no-repeat; background-size: 0% 100%; -webkit-background-clip: border-box; background-clip: border-box; justify-self: start; width: fit-content; }
.manifesto li:nth-child(2) .mf-big { background-image: linear-gradient(transparent 62%, var(--mint-soft) 62%, var(--mint-soft) 92%, transparent 92%); }
.manifesto li:nth-child(3) .mf-big { background-image: linear-gradient(transparent 62%, var(--coral-soft) 62%, var(--coral-soft) 92%, transparent 92%); }
.manifesto li:nth-child(4) .mf-big { background-image: linear-gradient(transparent 62%, var(--sky-soft) 62%, var(--sky-soft) 92%, transparent 92%); }
.mf-small { color: var(--muted); }
@supports not (animation-timeline: view()) { .mf-big { background-size: 100% 100%; } }
@supports (animation-timeline: view()) { .mf-big { animation: highlight linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; } @keyframes highlight { to { background-size: 100% 100%; } } }
.rules li::before { color: var(--coral); opacity: .5; font-family: var(--serif); }
.rules h3 { font-family: var(--serif); font-weight: 700; }
.tl-when { font-family: var(--serif); font-weight: 700; }
.contact-band { color: var(--ink); background: radial-gradient(60% 70% at 85% 10%, var(--sun-soft), transparent 70%), radial-gradient(60% 70% at 0% 100%, var(--coral-soft), transparent 70%), var(--surface); }
.contact-band .eyebrow-light { color: var(--coral-ink); }
.contact-text { color: var(--muted); }
.contact-band :focus-visible { outline-color: var(--focus); }
.mega-mail { font-family: var(--serif); font-weight: 700; color: var(--lead); background-image: linear-gradient(var(--coral), var(--coral)); }
.mega-mail:hover { color: var(--coral-ink); }
:root[data-contrast="high"] :is(.ch-n, .ghost-num) { color: var(--ink); background: none; }
:root[data-contrast="high"] .mf-big { background: none; text-decoration: underline; }
html[data-motion="reduce"] .ch-n { color: var(--lilac-ink); background: none; }
html[data-motion="reduce"] .mf-big { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .ch-n { color: var(--lilac-ink); background: none; } .mf-big { background-size: 100% 100%; } }

/* Everything that's included: every feature, by area */
.included { padding: clamp(72px, 10vw, 140px) 0; background: var(--surface); }
.included-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.included-head .section-title { margin-bottom: 0; }
.included-grid { columns: 3 300px; column-gap: 16px; }
.inc-group { break-inside: avoid; margin-bottom: 16px; padding: 24px; border-radius: 28px; background: var(--raised); box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(31, 27, 58, .35); }
.inc-group h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-family: var(--serif); font-weight: 700; font-size: 1.375rem; }
.inc-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.inc-group li { position: relative; padding-left: 22px; color: var(--muted); line-height: 1.45; }
.inc-group li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--c-dot, var(--coral)); }
.inc-0 { --c-soft: var(--sun-soft); --c-ink: var(--sun-ink); --c-dot: var(--sun); }
.inc-1 { --c-soft: var(--mint-soft); --c-ink: var(--mint-ink); --c-dot: var(--mint); }
.inc-2 { --c-soft: var(--sky-soft); --c-ink: var(--sky-ink); --c-dot: var(--sky); }
.inc-3 { --c-soft: var(--coral-soft); --c-ink: var(--coral-ink); --c-dot: var(--coral); }
.inc-4 { --c-soft: var(--lilac-soft); --c-ink: var(--lilac-ink); --c-dot: var(--lilac); }
:lang(ja) .inc-group h3, :lang(zh) .inc-group h3 { font-family: var(--font); }

/* Fewer animations: chosen in Display, or asked for by the computer. Everything still, nothing hidden. */
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
html[data-motion="reduce"] .marquee { width: auto; -webkit-mask-image: none; mask-image: none; }
html[data-motion="reduce"] .marquee ul { flex-wrap: wrap; }
html[data-motion="reduce"] .marquee ul[aria-hidden="true"] { display: none; }
html[data-motion="reduce"] .moments { padding-inline: var(--gutter); }
html[data-motion="reduce"] .closing { color: var(--amber); -webkit-text-stroke: 0; background: none; }
html[data-motion="reduce"] .stage-photo, html[data-motion="reduce"] .stage-ui { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { width: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee ul { flex-wrap: wrap; }
  .marquee ul[aria-hidden="true"] { display: none; }
  .moments { padding-inline: var(--gutter); }
  .closing { color: var(--amber); -webkit-text-stroke: 0; background: none; }
  .stage-photo, .stage-ui { transform: none; }
}

/* High contrast: chosen in Display, or asked for by the computer. Plain text instead of outlines and gradients,
   stronger lines, underlined links, a thicker focus ring. */
:root[data-contrast="high"] { --muted: var(--ink); --line: var(--line-strong); --lav: #ffffff; --lav-2: #ffffff; }
:root[data-contrast="high"] :focus-visible { outline-width: 3px; outline-offset: 3px; }
:root[data-contrast="high"] main a:not(.btn), :root[data-contrast="high"] .foot a { text-decoration: underline; }
:root[data-contrast="high"] :is(.moment-time, .tile-lang .tile-big, .closing, .diffs li::after) { color: currentColor; -webkit-text-stroke: 0; }
:root[data-contrast="high"] .moment-time { color: var(--ink); }
:root[data-contrast="high"] :is(.mega-glow, .tile-ink .tile-big) { background: none; color: #ffffff; }
:root[data-contrast="high"] :is(.tile, .moment, .diffs li, .roles li, .tier, .stats li, .calc, .form, .ui, .marquee li, .kicker) { border: 1px solid currentColor; }
:root[data-contrast="high"] :is(.aurora, .facade, .night::after) { opacity: .35; }
:root[data-contrast="high"] .night::after { display: none; }
:root[data-contrast="high"] input, :root[data-contrast="high"] select { border-width: 2px; }
@media (prefers-contrast: more) {
  :root:not([data-contrast]) { --muted: var(--ink); --line: var(--line-strong); --lav: #ffffff; --lav-2: #ffffff; }
  :root:not([data-contrast]) main a:not(.btn) { text-decoration: underline; }
  :root:not([data-contrast]) :is(.moment-time, .tile-lang .tile-big) { color: var(--ink); -webkit-text-stroke: 0; }
}