@view-transition { navigation: auto; }

:root {

  --bg: #040d20;
  --bg-1: #06152f;
  --bg-2: #071a39;
  --bg-3: #0c2452;
  --ink: #f5f9ff;
  --ink-2: #e6f0fd;
  --ink-3: #b4d2f3;

  --gold: #e6bc5c;
  --gold-hi: #e6bc5c;
  --gold-lo: #e6bc5c;
  --gold-ink: #e6bc5c;
  --gold-d: #e6bc5c;

  --line: rgba(164, 210, 255, .3);
  --line-2: rgba(164, 210, 255, .3);
  --line-gold: #e6bc5c;
  --ok: #62d89c;
  --hair: 1px;

  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: 22px;
  --max: 1240px;
  --top-h: 64px;
  --desk-h: 58px;

  --out: cubic-bezier(.16, 1, .3, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
  --soft: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: calc(var(--desk-h) + 28px);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(201, 166, 102, .34); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; }
main { position: relative; z-index: 2; }

.label {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--gold);
}
.label i { font-style: normal; font-family: var(--mono); letter-spacing: .08em; color: var(--gold-lo); font-size: 12px; }
.label::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .7; flex: none; }
.js .label.rise::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--inout) .25s; }
.js .label.rise.in::before { transform: none; }
.label.bare::before { display: none; }

.h1 { font-weight: 300; font-size: clamp(39px, 11.4vw, 50px); line-height: 1.03; letter-spacing: -.038em; text-wrap: balance; }
.h2 { font-weight: 300; font-size: clamp(31px, 8.6vw, 40px); line-height: 1.07; letter-spacing: -.032em; text-wrap: balance; }
.h3 { font-weight: 400; font-size: 24px; line-height: 1.14; letter-spacing: -.024em; text-wrap: balance; }
.h1 em, .h2 em, .h3 em, .say em { font-style: normal; font-weight: 500; color: var(--gold); }
.h1 em { background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, #fff3d2 50%, var(--gold) 62%, var(--gold) 100%) 100% 0 / 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.js .h1.in em { animation: sheen 2.2s var(--inout) 1.1s both; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.lede { font-size: 17.5px; line-height: 1.58; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.body { color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.fine { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.mono { font-family: var(--mono); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 24px 0 26px; border-radius: 999px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; color: #120e06;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 62%, #b8944f);
  box-shadow: inset 0 1px 0 rgba(255, 248, 228, .55), inset 0 -1px 0 rgba(70, 48, 10, .35), 0 12px 32px -14px rgba(201, 166, 102, .75), 0 2px 5px rgba(0, 0, 0, .4);
  transition: transform .5s var(--out), box-shadow .4s var(--soft), filter .3s var(--soft);
  will-change: transform;
}
.btn .arr { display: inline-flex; transition: transform .5s var(--out); }
.btn:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 248, 228, .6), inset 0 -1px 0 rgba(70, 48, 10, .35), 0 18px 44px -14px rgba(201, 166, 102, .9), 0 2px 5px rgba(0, 0, 0, .4); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: scale(.975); transition-duration: .12s; }
.btn.ghost {
  color: var(--ink); background: rgba(241, 236, 226, .035);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.btn.ghost:hover { background: rgba(241, 236, 226, .07); box-shadow: inset 0 0 0 1px var(--line-gold); filter: none; }

.go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
}
.go span.t { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--out), color .3s; }
.go .arr { color: var(--gold); transition: transform .5s var(--out); }
.go:hover span.t { background-size: 0 1px; background-position: 100% 100%; color: var(--gold-hi); }
.go:hover .arr { transform: translateX(5px); }
.arr svg { width: 16px; height: 16px; }

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--top-h);
  display: flex; align-items: center;
  transition: background .5s var(--soft), border-color .5s var(--soft), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.top.solid { background: rgba(5, 9, 13, .72); -webkit-backdrop-filter: saturate(140%) blur(18px); backdrop-filter: saturate(140%) blur(18px); border-color: var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .top::after { animation: fillX linear both; animation-timeline: scroll(root); } }
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.brand svg { width: 19px; height: 26px; flex: none; }
.nav { display: none; }
.burger { position: relative; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; }
.burger span { position: absolute; width: 22px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .5s var(--out), opacity .3s; }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55; background: rgba(5, 9, 13, .97); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  padding: calc(var(--top-h) + 18px) var(--pad) 32px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--soft), visibility 0s .45s;
  display: flex; flex-direction: column;
}
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .45s var(--soft), visibility 0s; }
.menu .grp { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin: 14px 0 8px; }
.menu a.big { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; font-size: 28px; line-height: 1.12; font-weight: 300; letter-spacing: -.03em; border-bottom: 1px solid var(--line); }
.menu a.big i { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--gold-lo); }
.menu a.big[aria-current="page"] { color: var(--gold); }
.menu .rest { margin-top: 18px; }
.menu .rest a.big { font-size: 22px; }
.menu .tail { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 15px; }
.menu .tail a { min-height: 44px; display: inline-flex; align-items: center; }
.menu .tail a.mail { color: var(--gold); }
.menu > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--soft), transform .7s var(--out); }
.menu-open .menu > * { opacity: 1; transform: none; }
.menu-open .menu > *:nth-child(2) { transition-delay: .05s; }
.menu-open .menu > *:nth-child(3) { transition-delay: .1s; }
.menu-open .menu > *:nth-child(4) { transition-delay: .15s; }
.menu-open body, body.menu-open { overflow: hidden; }

.js .rise { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .9s var(--soft), transform 1.1s var(--out), filter .9s var(--soft); transition-delay: calc(var(--i, 0) * 80ms); }
.js .rise.in { opacity: 1; transform: none; filter: none; }
.js .lines:not(.split) { visibility: hidden; }
.js .lines .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.js .lines .ln > span { display: block; transform: translateY(108%); transition: transform 1.15s var(--out); transition-delay: calc(var(--l, 0) * 95ms + var(--d, 0ms)); }
.js .lines.in .ln > span { transform: none; }
.js .draw { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--inout); transition-delay: calc(var(--i, 0) * 80ms); }
.js .draw.in { transform: none; }

.hero { position: relative; min-height: 100svh; padding: calc(var(--top-h) + 22px) 0 0; display: flex; flex-direction: column; isolation: isolate; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 62% at 50% -8%, #12222c 0%, rgba(13, 26, 34, .55) 38%, transparent 70%),
    radial-gradient(70% 40% at 96% 78%, rgba(201, 166, 102, .13), transparent 70%);
}
.hero__mark { position: absolute; z-index: -1; right: -19vw; bottom: -3svh; height: 56svh; aspect-ratio: 100 / 150; pointer-events: none; }
.hero__mark svg { width: 100%; height: 100%; overflow: visible; }
.hero__glow { position: absolute; z-index: -1; right: -30vw; bottom: -6svh; width: 120vw; height: 70svh; pointer-events: none; background: radial-gradient(42% 46% at 58% 56%, rgba(201, 166, 102, .16), rgba(201, 166, 102, .05) 46%, transparent 72%); opacity: 0; transition: opacity 2.4s var(--soft) .6s; }
.lit .hero__glow { opacity: 1; animation: glowdrift 16s var(--inout) 3s infinite alternate; }
@keyframes glowdrift { to { transform: translate(-7vw, -4svh) scale(1.12); } }
.hero__mark .p-base { fill: none; stroke: rgba(201, 166, 102, .085); stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.hero__mark .p-run { fill: none; stroke: #fff1cf; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .13 .87; stroke-dashoffset: 1.13; opacity: 0; filter: drop-shadow(0 0 5px rgba(236, 210, 155, .95)) drop-shadow(0 0 16px rgba(201, 166, 102, .7)); }
.hero__mark .p-edge { fill: none; stroke: rgba(236, 210, 155, .3); stroke-width: .35; stroke-dasharray: 1; }
.js .hero__mark .p-base, .js .hero__mark .p-edge { stroke-dashoffset: 1; opacity: 0; }
.lit .hero__mark .p-base { animation: pdraw 2.4s var(--inout) .25s forwards; }
.lit .hero__mark .p-edge { animation: pdraw 2.4s var(--inout) .25s forwards; }
.lit .hero__mark .p-run { animation: prun 7.5s linear 2.4s infinite; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .hero__mark svg { animation: markdrift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; } }
}
@keyframes markdrift { to { transform: translateY(9svh); } }
@keyframes pdraw { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes prun { 0% { stroke-dashoffset: 1.13; opacity: 0; } 5% { opacity: 1; } 58% { opacity: 1; } 66%, 100% { stroke-dashoffset: 0; opacity: 0; } }

.hero .wrap { flex: 1; display: flex; flex-direction: column; }
.hero .h1, .close .h1 { font-size: min(calc((100vw - 2 * var(--pad)) / 8.3), 52px); }
.hero .h1 { margin-top: 10px; }

.h1 > .lines { display: block; }
.h1__tail { font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400; font-size: .64em; line-height: 1.1; letter-spacing: -.012em; color: var(--ink); margin-top: .1em; }
.hero .lede { margin-top: 12px; max-width: 21.5em; }
.hero .acts { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }

.index { margin-top: auto; padding-top: 24px; }
.index__note { font-size: 13px; line-height: 1.4; color: var(--ink-2); padding-bottom: 11px; }
.index ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.index li { border-bottom: 1px solid var(--line); }
.index li:nth-child(odd) { border-right: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 12px; min-height: 80px; padding: 13px 12px 14px 0; font-size: 16.5px; line-height: 1.2; font-weight: 400; letter-spacing: -.012em; transition: color .3s; }
.index li:nth-child(even) a { padding-left: 16px; padding-right: 0; }
.index a i { grid-column: 1 / -1; align-self: start; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold-lo); letter-spacing: .06em; }
.index a .arr { color: var(--ink-3); transition: transform .5s var(--out), color .3s; }

.index a .res small { display: block; margin-top: 3px; font-size: 12.5px; letter-spacing: .01em; color: var(--ink-2); }
.plate__top .label { flex-wrap: wrap; row-gap: 2px; }
.plate__top .label .sys { color: var(--ink-3); }
.plate__top .label .sys::before { content: "·"; margin: 0 .7em 0 0; color: var(--ink-3); }
.index a { position: relative; }
.index a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--out); }
.index a:hover::before { transform: scaleX(1); }
.index a:hover { color: var(--gold-hi); }
.index a:hover .arr { color: var(--gold); transform: translate(3px, 3px); }
.hero .index { margin-bottom: calc(var(--desk-h) + 30px); padding-top: 3px; }
@media (max-width: 999px) {
  .index.three ol { grid-template-columns: 1fr; }
  .index.three li { border-right: 0 !important; }
  .index.three a, .index.three li:nth-child(even) a { grid-template-columns: 34px 1fr auto; align-items: center; min-height: 48px; padding: 0; row-gap: 0; }
  .index.three a i { grid-column: auto; align-self: center; }
}

.sec { position: relative; padding: 104px 0 0; }
.sec > .wrap > .label { margin-bottom: 26px; }
.rule { height: 1px; background: linear-gradient(90deg, var(--line-gold), var(--line) 55%, transparent); }

.say { font-weight: 300; font-size: clamp(25px, 6.9vw, 31px); line-height: 1.24; letter-spacing: -.028em; max-width: 23em; text-wrap: pretty; }
.say .w { color: var(--ink); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .say .w { color: rgba(241, 236, 226, .42); animation: wlit linear both; animation-timeline: view(); animation-range: cover 11% cover 38%; }
    .js .say .w.g { animation-name: wlitg; }
  }
}
@keyframes wlit { to { color: var(--ink); } }
@keyframes wlitg { to { color: var(--gold); } }
.say .w.g { color: var(--gold); font-weight: 400; }

.points { margin-top: 56px; display: grid; gap: 0; counter-reset: pt; }
.point { position: relative; padding: 24px 0 26px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; column-gap: 6px; align-content: start; }
.point:last-child { border-bottom: 1px solid var(--line); }
.point::before { counter-increment: pt; content: "0" counter(pt); font-family: var(--mono); font-size: 12px; color: var(--gold-lo); letter-spacing: .06em; padding-top: 6px; }
.point h3 { font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; }
.point p { grid-column: 2; margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }

.what .h2 { max-width: 11em; }
.what .intro, .together .intro { display: grid; gap: 18px; }
.what .intro .lede, .together .intro .lede { max-width: 30em; }
.what .choose { margin-top: 44px; }
.what .choose .acts { gap: 8px 24px; }
.plates { margin-top: 44px; display: grid; gap: 18px; }
.plate {
  position: relative;
  border-radius: 26px; overflow: clip; isolation: isolate;
  background: linear-gradient(180deg, #0e1821 0%, #0a1219 46%, #080e14 100%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06), 0 -18px 40px -22px rgba(0, 0, 0, .9);
}
.plates.stack .plate { position: sticky; top: calc(var(--top-h) + 10px + var(--n, 0) * 10px); }

.plates.stack { grid-auto-rows: 1fr; }
.plates.stack .plate { display: grid; }
.plate::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, transparent); opacity: .55; }
.plate__txt { padding: 26px 22px 6px; }
.plate__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plate__top .label::before { display: none; }
.plate__n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.plate h3 { margin-top: 16px; font-size: 27px; line-height: 1.1; font-weight: 300; letter-spacing: -.03em; max-width: 12em; text-wrap: balance; }
.plate p.body { margin-top: 12px; font-size: 16px; line-height: 1.55; }
.plate .go { margin-top: 12px; }

.plate__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 16px; }
.plate__acts .btn { min-height: 48px; padding: 0 20px 0 22px; font-size: 15px; }
.plate__acts .btn:hover .arr { transform: translateY(3px); }
.plate__acts .go { margin-top: 0; }
.plate .have { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin-top: 16px; padding: 14px 16px 15px; border-radius: 14px; background: rgba(201, 166, 102, .08); box-shadow: inset 0 0 0 1px var(--line-gold); font-size: 15px; line-height: 1.5; color: var(--ink); }
.plate .have svg { width: 16px; height: 16px; margin-top: 3px; color: var(--gold-hi); }

.plate__side .have { margin: 0 12px 14px; }

.plate .turn { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--gold); color: var(--ink); font-size: 17.5px; line-height: 1.5; max-width: 30em; }
.plate .turn + .body { margin-top: 16px; }
.stage { position: relative; margin: 14px 12px 12px; border-radius: 18px; overflow: hidden; min-height: 318px; background: radial-gradient(120% 90% at 50% 0%, #131f29, #070c11 72%); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 22px 16px 46px; }
.stage .note { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); padding: 0 14px; }
.stage.two { padding-bottom: 66px; }

@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    .plates.stack { timeline-scope: --p1, --p2; }
    .plates.stack .plate:nth-child(2) { view-timeline: --p1 block; } .plates.stack .plate:nth-child(3) { view-timeline: --p2 block; }
    .plates.stack .plate:nth-child(1) .plate__in { animation: stepback linear both; animation-timeline: --p1; animation-range: entry 10% entry 100%; }
    .plates.stack .plate:nth-child(2) .plate__in { animation: stepback linear both; animation-timeline: --p2; animation-range: entry 10% entry 100%; }
  }
}
@keyframes stepback { to { transform: scale(.955); filter: brightness(.62); } }
.plate__in { transform-origin: 50% 0; will-change: transform; }

.ph { position: relative; width: 168px; aspect-ratio: 390 / 800; border-radius: 26px; background: #0d151c; box-shadow: 0 0 0 1px #26323b, 0 0 0 6px #0f171e, 0 0 0 7px #232e36, 0 30px 60px -20px rgba(0, 0, 0, .9); overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.call { width: 100%; max-width: 318px; display: flex; flex-direction: column; gap: 14px; }
.call .who { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.call .who b { font-weight: 500; color: var(--ink); }
.call .who .nm { min-width: 0; line-height: 1.3; }
@media (max-width: 999px) { .call .who .nm b { display: block; } .call .who .sep { display: none; } }

.call .modes { margin-left: auto; display: inline-flex; gap: 6px; flex: none; }
.call .modes span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.call .modes .on { color: #120e06; background: var(--gold); box-shadow: none; font-weight: 500; }
.call .modes svg { width: 12px; height: 12px; }
.orb { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 32% 28%, #fff3d2 0%, var(--gold-hi) 22%, var(--gold) 52%, #7a5d2a 100%); box-shadow: 0 0 18px -2px rgba(236, 210, 155, .6), inset 0 -3px 6px rgba(60, 40, 8, .5); }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.wave s { width: 2px; height: 4px; border-radius: 2px; background: var(--gold); opacity: .5; }
.said { display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid var(--line-2); }
.said.a { border-left-color: var(--line-gold); }
.said .by { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.said.a .by { color: var(--gold); }
.said.v .wave s { background: var(--ink-2); }
.said .q { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.bub { max-width: 86%; padding: 10px 13px; font-size: 14px; line-height: 1.42; border-radius: 16px; }
.bub.v { align-self: flex-end; background: #1a2630; color: var(--ink); border-bottom-right-radius: 5px; }
.bub.a { align-self: flex-start; background: rgba(201, 166, 102, .13); box-shadow: inset 0 0 0 1px rgba(201, 166, 102, .26); color: var(--ink); border-bottom-left-radius: 5px; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; padding: 7px 12px 7px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #0b140f; background: var(--ok); }
.chip svg { width: 14px; height: 14px; }

.hear { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px 8px 8px; border-radius: 999px; text-align: left; background: rgba(201, 166, 102, .1); box-shadow: inset 0 0 0 1px var(--line-gold); transition: background .3s var(--soft), box-shadow .3s var(--soft); }
.hear:hover { background: rgba(201, 166, 102, .16); box-shadow: inset 0 0 0 1px var(--gold); }
.hear__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #120e06; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 62%, #b8944f); box-shadow: 0 8px 22px -10px rgba(201, 166, 102, .8); }
.hear__ic svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.hear__ic svg:last-child, .hear.playing .hear__ic svg:first-child { display: none; }
.hear.playing .hear__ic svg:last-child { display: block; }
.hear__tx { min-width: 0; }
.hear__tx b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -.005em; line-height: 1.25; }
.hear__tx small { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.hear__bar { height: 2px; margin: -6px 22px 0; border-radius: 2px; background: var(--line); overflow: hidden; }
.hear__bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.call .turns { display: grid; gap: 14px; }
.js .call .turns { gap: 0; }
.js .call .turns .said { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--soft), visibility 0s .35s; }
.js .call .turns .said.on { opacity: 1; visibility: visible; transition: opacity .35s var(--soft); }
.said.speaking .wave s { animation: talk .4s var(--inout) calc(var(--k) * .07s) infinite alternate; }
.js .sc-ast .chip { opacity: 0; visibility: hidden; transition: opacity .4s var(--soft); }
.js .sc-ast .chip.on { opacity: 1; visibility: visible; }
html:not(.js) .hear, html:not(.js) .hear__bar { display: none; }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes talk { from { height: 4px; opacity: .5; } to { height: 16px; opacity: 1; } }

.rev { width: 100%; max-width: 318px; display: flex; flex-direction: column; gap: 12px; }
.job { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 14px; background: #101a22; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.job small { display: block; font-size: 12px; color: var(--ink-3); font-family: var(--mono); letter-spacing: .02em; }
.tap { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.tap svg { width: 13px; height: 13px; opacity: .35; }
.sms { align-self: flex-start; max-width: 92%; padding: 11px 13px 12px; border-radius: 16px; border-bottom-left-radius: 5px; background: #1a2630; font-size: 13.8px; line-height: 1.42; }
.sms u { display: block; margin-top: 6px; color: #8fc1ff; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: 13px; }
.sms small { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.newrev { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(201, 166, 102, .1); box-shadow: inset 0 0 0 1px rgba(201, 166, 102, .28); font-size: 13px; font-weight: 500; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; fill: rgba(201, 166, 102, .2); }
.js .sc-rev .sms, .js .sc-rev .newrev { opacity: 0; transform: translateY(10px) scale(.97); }
.sc-rev.play .tap { animation: tapped .5s var(--out) .7s forwards; }
.sc-rev.play .tap svg { animation: ticked .4s var(--out) .8s forwards; }
.sc-rev.play .sms { animation: pop .6s var(--out) 1.5s forwards; }
.sc-rev.play .newrev { animation: pop .6s var(--out) 3.1s forwards; }
.sc-rev.play .stars svg { animation: star .45s var(--out) forwards; animation-delay: calc(3.5s + var(--k) * .13s); }
@keyframes tapped { 40% { transform: scale(.94); } 100% { transform: none; background: var(--gold); color: #120e06; box-shadow: none; } }
@keyframes ticked { to { opacity: 1; } }
@keyframes star { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; fill: var(--gold-hi); } }

.day { width: 100%; max-width: 318px; }
.day__h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); font-weight: 500; }
.day__h span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-weight: 400; }
.slot { display: grid; grid-template-columns: 46px 1fr; gap: 4px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.slot time { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: .02em; }
.slot b { font-size: 14px; font-weight: 400; }
.tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 12px; line-height: 1.3; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag.gold { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--line-gold); background: rgba(201, 166, 102, .08); }
.tag.ok { color: #0b140f; background: var(--ok); box-shadow: none; font-weight: 500; }
.tag svg { width: 11px; height: 11px; }
.js .sc-apt .tag { opacity: 0; transform: translateY(6px) scale(.96); }
.sc-apt.play .tag { animation: pop .55s var(--out) forwards; animation-delay: var(--t); }

.system .grid { display: grid; gap: 34px; }
.ring { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto; }
.ring svg.track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring .track circle { fill: none; stroke: var(--line-gold); stroke-width: 1; }
.ring .track circle.in { stroke: var(--line); }
.ring .comet { position: absolute; inset: 9.5%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(201, 166, 102, .12) 78%, rgba(236, 210, 155, .95) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.ring .head { position: absolute; inset: 9.5%; }
.ring .head::after { content: ""; position: absolute; left: 50%; top: -5.5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff5db; box-shadow: 0 0 16px 5px rgba(236, 210, 155, .7), 0 0 42px 14px rgba(201, 166, 102, .32); }
.ring.go .comet, .ring.go .head { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.node::before { content: ""; position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--gold); }
.node::after { content: ""; position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 18px 6px rgba(236, 210, 155, .5); opacity: 0; }
.node span { position: absolute; white-space: nowrap; font-size: 13.5px; font-weight: 400; letter-spacing: -.005em; color: var(--ink-2); }
.node span i { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold-lo); letter-spacing: .06em; }
.node.n1 { transform: translate(0, -40.5cqw); } .node.n2 { transform: translate(35.07cqw, 20.25cqw); } .node.n3 { transform: translate(-35.07cqw, 20.25cqw); }
.ring { container-type: inline-size; }
.node.n1 span { left: 0; top: 16px; transform: translateX(-50%); text-align: center; }
.node.n2 span { right: 15px; bottom: 2px; text-align: right; }
.node.n3 span { left: 15px; bottom: 2px; text-align: left; }
.node.n2 span, .node.n3 span { white-space: normal; width: max-content; max-width: 28cqw; line-height: 1.22; }
.node.n2 span i, .node.n3 span i { margin-bottom: 2px; }
.ring.go .node::after { animation: nodelit 14s linear infinite; animation-delay: calc(var(--k) * 4.6667s - 14s); }
.ring.go .node span { animation: nodetxt 14s linear infinite; animation-delay: calc(var(--k) * 4.6667s - 14s); }
@keyframes nodelit { 0% { opacity: 1; } 16% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nodetxt { 0% { color: var(--ink); } 20% { color: var(--ink-2); } 96% { color: var(--ink-2); } 100% { color: var(--ink); } }
.ring .hub { position: absolute; left: 50%; top: 50%; width: 30px; height: 45px; margin: -22px 0 0 -13px; opacity: .9; }
@container (max-width: 420px) { .ring .hub { margin-top: -40px; } }
@container (max-width: 300px) { .ring .hub { display: none; } }
.system .h2 { max-width: 10em; }
.system .body { margin-top: 0; }
.system .aside { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); font-size: 16px; max-width: 26em; }

.money .intro { display: grid; gap: 18px; }
.money .intro .lede { max-width: 30em; }
.beats { margin-top: 52px; display: grid; gap: 64px; }
.beat { display: grid; gap: 26px; }
.beat__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--gold); display: flex; align-items: center; gap: 12px; }
.beat__n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-gold), transparent); }
.beat .h3 { margin-top: 16px; font-size: 27px; line-height: 1.1; font-weight: 300; letter-spacing: -.03em; }
.beat .body { margin-top: 14px; font-size: 16.5px; line-height: 1.6; }
.beat .turn { margin-top: 16px; padding-left: 16px; border-left: 1px solid var(--gold); color: var(--ink); font-size: 16.5px; line-height: 1.6; max-width: 32em; }
.beat .by { margin-top: 18px; }
.beat .by .tag { font-size: 12px; padding: 5px 11px; transition: background .3s, color .3s; }
.beat .by .tag:hover { background: var(--gold); color: #120e06; }
.beat .stage { margin: 0; min-height: 0; padding: 26px 18px 50px; border-radius: 22px; }
.beat .sc-shops { padding-bottom: 24px; }

.serp { width: 100%; max-width: 330px; }
.serp__bar { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 15px; border-radius: 999px; background: #101a22; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.serp__bar svg { width: 15px; height: 15px; flex: none; }
.serp__bar span { height: 8px; width: 44%; border-radius: 4px; background: #22303a; }
.serp__list { position: relative; margin: 26px 8px 0; height: 254px; }
.serp__box { position: absolute; left: -8px; right: -8px; top: -8px; height: 166px; border-radius: 17px; background: rgba(201, 166, 102, .05); box-shadow: inset 0 0 0 1px var(--line-gold); }
.srow { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 0 13px 0 11px; border-radius: 12px; background: #0f1820; box-shadow: inset 0 0 0 1px var(--line); transform: translateY(calc(var(--p) * 52px)); transition: transform .9s var(--out); }
.srow i { width: 8px; height: 8px; border-radius: 50%; background: #2a3944; justify-self: center; }
.srow b { display: block; height: 8px; width: var(--w, 50%); border-radius: 4px; background: #26333d; }
.srow .st { display: inline-flex; gap: 2px; }
.srow .st svg { width: 10px; height: 10px; fill: #34444f; }
.srow.you { z-index: 2; background: #1d2018; box-shadow: inset 0 0 0 1px rgba(201, 166, 102, .55), 0 10px 26px -12px rgba(0, 0, 0, .9); }
.srow.you i { background: var(--gold-hi); box-shadow: 0 0 10px rgba(236, 210, 155, .7); }
.srow.you b { height: auto; width: auto; background: none; font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.srow.you .st svg { fill: var(--gold); }
.srow em { position: absolute; right: 10px; top: -13px; font-style: normal; font-size: 12px; font-weight: 500; line-height: 1.3; padding: 3px 9px; border-radius: 999px; background: var(--gold-hi); color: #120e06; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.94); transition: opacity .35s var(--soft), transform .5s var(--out); }
.srow.you.ping em { opacity: 1; transform: none; }

.shops { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop { display: grid; align-content: start; }
.room { position: relative; height: 176px; border-radius: 16px; overflow: hidden; background: #0b1319; box-shadow: inset 0 0 0 1px var(--line); }
.shop.b .room { background: radial-gradient(95% 72% at 50% 0%, rgba(201, 166, 102, .2), #0b1319 72%); box-shadow: inset 0 0 0 1px var(--line-gold); }
.room .counter { position: absolute; left: 20%; right: 20%; top: 56px; height: 2px; border-radius: 2px; background: var(--line-2); }
.shop.b .room .counter { background: rgba(201, 166, 102, .65); }
.room .seat { position: absolute; left: 50%; top: 20px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; border: 1px dashed rgba(241, 236, 226, .22); }
.room .orb { position: absolute; left: 50%; top: 18px; width: 28px; height: 28px; margin-left: -14px; }
.room .door { position: absolute; left: 50%; bottom: 0; width: 46px; height: 3px; margin-left: -23px; border-radius: 3px 3px 0 0; background: rgba(241, 236, 226, .2); }
.room .guest { position: absolute; left: 50%; bottom: 20px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(241, 236, 226, .09); }
.shop.a .guest { transform: translate(0, 50px); }
.shop.b .guest { transform: translate(0, -72px); }
.room .chip { position: absolute; left: 10px; right: 10px; bottom: 12px; justify-content: center; margin: 0; white-space: nowrap; }
.shop__h { margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.shop__l { margin-top: 3px; font-size: 13px; line-height: 1.42; color: var(--ink-2); }
.js .sc-shops .shop.b .guest { transform: translate(0, 50px); }
.js .sc-shops .room .chip { opacity: 0; transform: translateY(8px) scale(.96); }
.sc-shops.play .shop.a .guest { animation: wander 4.6s var(--inout) .3s both; }
.sc-shops.play .shop.b .guest { animation: approach 1.5s var(--out) .3s both; }
.sc-shops.play .shop.b .orb { animation: greet .9s var(--out) 1.7s both; }
.sc-shops.play .room .chip { animation: pop .6s var(--out) 2.7s forwards; }
@keyframes wander { 0% { transform: translate(0, 50px); } 14% { transform: translate(0, -8px); } 32% { transform: translate(-30px, -52px); } 50%, 62% { transform: translate(27px, -64px); } 80% { transform: translate(5px, -12px); } 100% { transform: translate(0, 50px); } }
@keyframes approach { from { transform: translate(0, 50px); } to { transform: translate(0, -72px); } }
@keyframes greet { 0% { transform: scale(1); } 45% { transform: scale(1.22); box-shadow: 0 0 26px 2px rgba(236, 210, 155, .8), inset 0 -3px 6px rgba(60, 40, 8, .5); } 100% { transform: scale(1); } }

.ask { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line-gold); }
.ask .lede { color: var(--ink); max-width: 30em; }
.ask .say { margin-top: 22px; font-size: clamp(27px, 7.4vw, 34px); line-height: 1.2; max-width: 20em; }
.ask .acts { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }

.together { position: relative; padding-top: 92px; }
.together > .wrap > .label { margin-bottom: 26px; }

.ring .track .way path { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.together .grid { margin-top: 36px; }
.cycle { list-style: none; display: grid; }
.cyc { position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: start; padding-bottom: 28px; }
.cyc::before { content: ""; position: absolute; left: 16px; top: 40px; bottom: 6px; width: 1px; background: var(--line-2); }
.cyc::after { content: ""; position: absolute; left: 13px; bottom: 6px; width: 6px; height: 6px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); opacity: .8; }
.cyc .n { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--gold-hi); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-gold); transition: background .6s var(--soft), color .6s var(--soft), box-shadow .6s var(--soft); }
.cyc .n svg { width: 15px; height: 15px; }
.cyc h3 { font-size: 22px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; padding-top: 3px; transition: color .6s var(--soft); }
.cyc p { margin-top: 7px; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 27em; transition: color .6s var(--soft); }
.cyc .by { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cyc .by .tag, .beat .by .tag { position: relative; }
.cyc .by .tag::after, .beat .by .tag::after { content: ""; position: absolute; inset: -10px -4px; }
.cyc .by { padding: 4px 0; }
.cyc .by .tag { font-size: 12px; padding: 5px 11px; transition: background .3s, color .3s; }
.cyc .by .tag:hover { background: var(--gold); color: #120e06; }
.cyc.back { padding-bottom: 0; }
.cyc.back::before, .cyc.back::after { display: none; }
.cyc.back p { margin-top: 0; padding-top: 5px; color: var(--ink); }
.cyc.back .n { color: var(--gold); }
.cycle.live .cyc[data-k]:not(.on) h3 { color: var(--ink-2); }
.cyc.on .n { background: var(--gold); color: #120e06; box-shadow: 0 0 24px -2px rgba(236, 210, 155, .65); }
.cyc.on h3 { color: var(--gold-hi); }
.cyc.on p { color: var(--ink); }
.together .aside { margin-top: 34px; }

.whofor { padding: 54px 0 0; }
.whofor .wrap { display: grid; gap: 26px; }
.whofor .h3 { margin-top: 16px; max-width: 14em; }
.whofor .body { margin-top: 12px; max-width: 30em; }
.whofor__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; border-top: 1px solid var(--line-2); }
.whofor__list li { padding: 11px 0 12px; border-bottom: 1px solid var(--line); line-height: 1.3; }
.whofor__list b { display: block; font-weight: 400; font-size: 15.5px; color: var(--ink); letter-spacing: -.01em; }
.whofor__list span { display: block; margin-top: 2px; font-size: 13px; color: var(--gold); }

#demos { scroll-margin-top: 10px; }
.work .head { display: grid; gap: 18px; }
.work .h2 { max-width: 10em; }
.reel { margin-top: 38px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--pad) 26px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reel::-webkit-scrollbar { display: none; }
.reel { --ph-h: clamp(230px, calc(100svh - 600px), 507px); }
.demo { flex: none; width: max(140px, calc(var(--ph-h) * .4875)); scroll-snap-align: center; display: flex; flex-direction: column; }
.demo .ph { width: calc(var(--ph-h) * .4875); max-width: 100%; border-radius: 30px; transition: transform .8s var(--out), box-shadow .6s var(--soft); }
.demo .ph img { transition: transform 1.4s var(--out); }
.demo:hover .ph { transform: translateY(-8px); box-shadow: 0 0 0 1px #33414b, 0 0 0 6px #0f171e, 0 0 0 7px rgba(201, 166, 102, .45), 0 44px 70px -24px rgba(0, 0, 0, .95); }
.demo:hover .ph img { transform: scale(1.035); }
.demo .kind { margin-top: 20px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.demo .name { margin-top: 5px; font-size: 18px; font-weight: 400; letter-spacing: -.015em; }
.demo .go { margin-top: 4px; font-size: 14.5px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
    .demo .ph { animation: focus linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
  }
}
@keyframes focus { 0%, 100% { transform: scale(.93); filter: brightness(.6); } 50% { transform: scale(1); filter: none; } }
.work .after { margin-top: 6px; display: grid; gap: 14px; }

.how .h2 { max-width: 10em; }
.steps { margin-top: 42px; position: relative; display: grid; gap: 0; }
.steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--line-2); }
.steps .fill { position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--gold-hi), var(--gold)); transform-origin: 50% 0; transform: scaleY(1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .steps .fill { transform: scaleY(0); animation: fillY linear both; animation-timeline: view(); animation-range: entry 30% cover 62%; }
  }
}
@keyframes fillY { to { transform: scaleY(1); } }
.step { position: relative; padding: 0 0 34px 48px; }
.step:last-child { padding-bottom: 0; }
.step .n { position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px var(--gold); font-family: var(--mono); font-size: 12px; color: var(--gold-hi); }
.step :is(h2, h3) { font-size: 21px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; padding-top: 1px; }
.step p { margin-top: 7px; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 26em; }
.terms { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.terms b { font-weight: 400; font-size: 18px; letter-spacing: -.015em; color: var(--ink); }
.terms b em { font-style: normal; color: var(--gold); }

.about .box, .you .box { position: relative; border-radius: 26px; padding: 34px 22px 30px; overflow: hidden; background: linear-gradient(160deg, #0f1a23, #080e14 70%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06); }
.about .box svg.wm, .you .box svg.wm { position: absolute; right: -44px; bottom: -70px; width: 220px; height: 330px; opacity: .07; pointer-events: none; }
.about .h2, .you .h2 { margin-top: 22px; max-width: 11em; }
.about .body, .you .body { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.about .go, .you .go { margin-top: 18px; }

.close { padding-bottom: 20px; text-align: left; isolation: isolate; }
.close::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -220px; height: 115%; pointer-events: none; background: radial-gradient(58% 46% at 50% 62%, rgba(201, 166, 102, .15), rgba(201, 166, 102, .05) 48%, transparent 76%); }
.close .h1 { max-width: 9.5em; }
.close .lede { margin-top: 20px; }
.close .acts { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.mail { display: grid; gap: 4px; }
.mail small { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.mail a { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(20px, 5.6vw, 30px); font-weight: 300; letter-spacing: -.025em; color: var(--gold-hi); background: linear-gradient(var(--line-gold), var(--line-gold)) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size .6s var(--out); }
.mail a:hover { background-size: 0 1px; background-position: 100% 100%; }

.foot { position: relative; z-index: 2; margin-top: 96px; padding: 44px 0 30px; border-top: 1px solid var(--line); }
.foot .lead { color: var(--ink-2); font-size: 15.5px; max-width: 24em; margin-top: 16px; }
.foot .cols { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.foot .fh { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.foot li { list-style: none; }
.foot li a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; color: var(--ink-2); font-size: 15px; transition: color .3s; }
.foot li a:hover { color: var(--gold-hi); }
.foot .base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.foot .base .stamp { font-family: var(--mono); font-size: 12px; }

.desk { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; }
.desk__bar {
  pointer-events: auto; width: 100%; max-width: 460px; height: var(--desk-h); border-radius: 999px; padding: 0 18px 0 12px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(14, 22, 30, .78); -webkit-backdrop-filter: saturate(150%) blur(20px); backdrop-filter: saturate(150%) blur(20px);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 44px -12px rgba(0, 0, 0, .85);
  transition: transform .6s var(--out), box-shadow .4s var(--soft), opacity .4s;
}
.desk__bar:hover { box-shadow: inset 0 0 0 1px var(--line-gold), inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 50px -12px rgba(0, 0, 0, .9); }
.desk__bar:active { transform: scale(.985); }
.desk__bar .orb { width: 34px; height: 34px; }
.desk__bar b { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1.2; }
.desk__bar small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk__bar .txt { min-width: 0; flex: 1; }
.desk__bar .up { color: var(--gold); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-gold); flex: none; }
.desk__bar .up svg { width: 14px; height: 14px; }
.js .desk__bar { transform: translateY(130%); opacity: 0; }
.js.lit .desk__bar { transform: none; opacity: 1; transition-delay: 1.5s; }
.desk-open .desk__bar, .menu-open .desk__bar { transform: translateY(130%) !important; opacity: 0 !important; transition-delay: 0s !important; }

.desk__bar .orb { position: relative; }
.desk__bar .orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--gold-hi); opacity: 0; pointer-events: none; }
.desk__bar.buzz { animation: buzz 1.1s linear both; }
.desk__bar.buzz .orb::after { animation: buzzring 1.1s var(--soft) both; }
@keyframes buzz {
  0%, 36%, 50%, 86%, 100% { transform: none; }
  4%, 12%, 20%, 28%, 54%, 62%, 70%, 78% { transform: translateX(-2.5px) rotate(-1deg); }
  8%, 16%, 24%, 32%, 58%, 66%, 74%, 82% { transform: translateX(2.5px) rotate(1deg); }
}
@keyframes buzzring { 0%, 50% { opacity: .75; transform: scale(1); } 40%, 90%, 100% { opacity: 0; transform: scale(2.3); } 49.9% { opacity: 0; transform: scale(1); } }

.sheet-veil { position: fixed; inset: 0; z-index: 75; background: rgba(2, 4, 6, .6); opacity: 0; visibility: hidden; transition: opacity .4s var(--soft), visibility 0s .4s; }
.desk-open .sheet-veil { opacity: 1; visibility: visible; transition: opacity .4s var(--soft), visibility 0s; }
.sheet {
  position: fixed; z-index: 80; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width: 480px; margin: 0 auto;
  border-radius: 28px; padding: 18px 18px 16px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #121d27, #0a1118); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px -10px rgba(0, 0, 0, .95);
  transform: translateY(24px) scale(.97); opacity: 0; visibility: hidden; transition: transform .35s var(--soft), opacity .25s var(--soft), visibility 0s .35s;
}
.desk-open .sheet { transform: none; opacity: 1; visibility: visible; transition: transform .6s var(--out), opacity .35s var(--soft), visibility 0s; }
.sheet__h { display: flex; align-items: center; gap: 12px; }
.sheet__h .orb { width: 38px; height: 38px; }
.sheet__h b { display: block; font-size: 16px; font-weight: 500; line-height: 1.2; }
.sheet__h small { display: block; font-size: 12.5px; color: var(--ink-2); }
.sheet__x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.sheet__x svg { width: 14px; height: 14px; }
.sheet__log { margin-top: 16px; padding-bottom: 3px; display: flex; flex-direction: column; gap: 9px; max-height: 42svh; overflow-y: auto; }
.sheet__log .bub { font-size: 15.5px; line-height: 1.46; max-width: 94%; padding: 12px 15px; }
.sheet__log .sys { align-self: center; font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 6px 10px; }
.sheet__in { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.sheet__in input { flex: 1; min-width: 0; height: 50px; border-radius: 999px; padding: 0 18px; font: inherit; font-size: 16px; color: var(--ink); background: rgba(241, 236, 226, .05); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s; }
.sheet__in input::placeholder { color: var(--ink-3); }
.sheet__in input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 4px rgba(201, 166, 102, .14); }
.sheet__send { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #120e06; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 248, 228, .55); transition: transform .4s var(--out); }
.sheet__send:active { transform: scale(.94); }
.sheet__send svg { width: 18px; height: 18px; }
.sheet__talk { margin-top: 10px; width: 100%; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, background .3s; }
.sheet__talk:hover { box-shadow: inset 0 0 0 1px var(--line-gold); background: rgba(201, 166, 102, .06); }
.sheet__talk svg { width: 16px; height: 16px; color: var(--gold); }
.sheet .fine { margin-top: 12px; text-align: center; }

@media (min-width: 720px) {
  :root { --pad: 40px; }
  .points { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .point:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .foot .cols { grid-template-columns: repeat(4, 1fr); }
  .stage { min-height: 360px; }
}

@media (min-width: 1000px) {
  :root { --pad: 56px; --top-h: 76px; }
  body { font-size: 17.5px; }
  .burger, .menu { display: none; }
  .nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; color: var(--ink-2); }
  .nav > a, .nav .dd > button { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; transition: color .3s; font-size: 14.5px; color: var(--ink-2); }
  .nav > a:hover, .nav .dd:hover > button, .nav a[aria-current="page"] { color: var(--ink); }
  .nav .dd { position: relative; }
  .nav .dd svg { width: 10px; height: 10px; opacity: .6; transition: transform .4s var(--out); }
  .nav .dd:hover svg, .nav .dd:focus-within svg { transform: rotate(180deg); }
  .nav .drop { position: absolute; top: 100%; left: -18px; min-width: 250px; padding: 8px; border-radius: 18px; background: rgba(12, 19, 27, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0, 0, 0, .9); transform-origin: 20% 0; transform: translateY(6px) scale(.98); opacity: 0; visibility: hidden; transition: transform .3s var(--soft), opacity .22s var(--soft), visibility 0s .3s; }
  .nav .dd:hover .drop, .nav .dd:focus-within .drop { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--out), opacity .3s var(--soft), visibility 0s; }
  .nav .drop a { display: grid; grid-template-columns: 30px 1fr; align-items: center; padding: 11px 12px; border-radius: 12px; color: var(--ink); font-size: 15px; transition: background .25s; }
  .nav .drop a i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold-lo); }
  .nav .drop a:hover { background: rgba(241, 236, 226, .06); }
  .nav .login { color: var(--ink-3); }
  .nav .pill { min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-gold); transition: background .3s, color .3s; }
  .nav .pill:hover { background: var(--gold); color: #120e06; }

  .h1 { font-size: clamp(64px, 6.6vw, 98px); line-height: .99; letter-spacing: -.045em; }
  .h2 { font-size: clamp(46px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
  .lede { font-size: 20px; }
  .sec { padding-top: 168px; }
  .sec > .wrap > .label { margin-bottom: 34px; }

  .hero { padding-top: calc(var(--top-h) + 6.4svh); }
  .hero__mark { right: 3vw; bottom: auto; top: 15svh; height: 62svh; }
  .hero__glow { right: -8vw; bottom: auto; top: 4svh; width: 62vw; height: 86svh; }
  .hero__mark .p-base { stroke: rgba(201, 166, 102, .1); }
  .hero .h1, .close .h1 { font-size: clamp(60px, 6.2vw, 92px); }
  .hero .h1 { margin-top: 30px; }
  .hero .lede { margin-top: 24px; max-width: 30em; }
  .hero .acts { margin-top: 32px; gap: 14px 30px; }
  .index ol { grid-template-columns: repeat(4, 1fr); }
  .index.three ol { grid-template-columns: repeat(3, 1fr); }
  .index li { border-bottom: 0; border-right: 0 !important; border-left: 1px solid var(--line); }
  .index li:first-child { border-left: 0; }
  .index a, .index li:nth-child(even) a { min-height: 112px; padding: 18px 22px 22px; font-size: 20px; row-gap: 18px; }
  .index li:first-child a { padding-left: 0; }
  .hero .index { margin-bottom: 104px; padding-top: 22px; }

  .say { font-size: clamp(38px, 3.5vw, 52px); line-height: 1.16; letter-spacing: -.035em; max-width: 21em; }
  .points { grid-template-columns: repeat(4, 1fr); column-gap: 0; margin-top: 88px; }
  .point { grid-template-columns: 1fr; padding: 26px 26px 0 0; border-top: 1px solid var(--line-2); border-bottom: 0 !important; }
  .point::before { padding: 0 0 46px; }
  .point p { grid-column: 1; }
  .point h3 { font-size: 23px; }

  .what .wrap > .h2 { max-width: 12em; }
  .plates { margin-top: 70px; gap: 26px; }
  .plate { border-radius: 34px; }
  .plates.stack .plate { top: calc(var(--top-h) + 22px + var(--n, 0) * 14px); }

  .plate__in { display: grid; grid-template-columns: 1.25fr 1fr; min-height: min(620px, 74svh); }
  .plate__txt { padding: 30px 24px 30px 50px; display: flex; flex-direction: column; }
  .plate h3 { margin-top: auto; padding-top: 16px; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.04; letter-spacing: -.038em; max-width: none; }
  .plate p.body { margin-top: 10px; font-size: 15px; line-height: 1.5; max-width: none; }
  .plate .go { margin-top: 14px; }
  .stage { margin: 16px; border-radius: 22px; min-height: 0; padding: 30px 30px 54px; }
  .stage.two { padding-bottom: 76px; }
  .stage .note { bottom: 20px; font-size: 13px; }
  .ph { width: 232px; }
  .call, .rev, .day { max-width: 400px; }
  .bub { font-size: 15.5px; padding: 12px 16px; }
  .said .q { font-size: 15.5px; }
  .sms { font-size: 15px; }
  .slot b { font-size: 15.5px; }

  .what .intro, .together .intro { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 60px; }
  .money .intro { gap: 28px; }
  .money .intro .lede { font-size: 22px; }
  .plate .have { font-size: 14px; margin-top: 12px; padding: 10px 14px 11px; max-width: none; }
  .plate__side { display: flex; flex-direction: column; min-width: 0; }
  .plate__side .stage { flex: 1; margin-bottom: 10px; padding-top: 12px; padding-bottom: 62px; }
  .plate__side .stage .note { bottom: 14px; }
  .plate__side .call { gap: 11px; }
  .plate__side .have { margin: 0 16px 14px; }
  .plate .turn { font-size: 16.5px; margin-top: 14px; padding-left: 18px; max-width: none; }
  .plate .turn + .body { margin-top: 12px; }
  .beats { margin-top: 90px; gap: 120px; }
  .beat { grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
  .beat:nth-child(even) .beat__txt { order: 2; }
  .beat .h3 { font-size: clamp(34px, 3.1vw, 44px); letter-spacing: -.036em; margin-top: 22px; }
  .beat .body, .beat .turn { font-size: 18px; }
  .beat .turn { margin-top: 20px; padding-left: 20px; }
  .beat .stage { padding: 44px 30px 58px; border-radius: 26px; min-height: 440px; }
  .beat .sc-shops { padding-bottom: 40px; }
  .serp { max-width: 380px; }
  .shops { max-width: 440px; gap: 18px; }
  .room { height: 210px; }
  .room .counter { top: 66px; }
  .room .seat { top: 26px; } .room .orb { top: 24px; }
  .shop.b .guest { transform: translate(0, -96px); }
  .shop__h { font-size: 15.5px; margin-top: 14px; }
  .shop__l { font-size: 14px; }
  .ask { margin-top: 110px; padding-top: 60px; }
  .ask .lede { font-size: 20px; }
  .ask .say { font-size: clamp(40px, 3.7vw, 54px); line-height: 1.14; margin-top: 30px; }
  .ask .acts { margin-top: 44px; gap: 14px 34px; }
  .together { padding-top: 170px; }
  .together > .wrap > .label { margin-bottom: 34px; }
  .what .choose { margin-top: 80px; }
  .together .grid { grid-template-columns: .92fr 1.08fr !important; grid-template-areas: "ring steps" !important; column-gap: 90px !important; margin-top: 80px; align-items: start; }
  .together .ring { position: sticky; top: calc(var(--top-h) + 70px); align-self: start; }
  .together .cycle { grid-area: steps; }
  .cyc { grid-template-columns: 66px 1fr; padding-bottom: 40px; }
  .cyc .n { width: 41px; height: 41px; font-size: 12.5px; }
  .cyc .n svg { width: 18px; height: 18px; }
  .cyc::before { left: 20px; top: 50px; }
  .cyc::after { left: 17px; }
  .cyc h3 { font-size: 28px; font-weight: 300; letter-spacing: -.03em; padding-top: 4px; }
  .cyc p { font-size: 18px; margin-top: 10px; }
  .cyc .by { margin-top: 16px; }
  .cyc .by .tag { font-size: 13px; padding: 6px 13px; }
  .cyc.back p { padding-top: 8px; font-size: 18px; }
  .together .aside { margin-top: 64px; max-width: none; }
  .system .grid { grid-template-columns: 1fr 1fr; grid-template-areas: "ring head" "ring txt"; align-items: start; column-gap: 70px; row-gap: 28px; }
  .system .grid > .h2 { grid-area: head; align-self: end; }
  .system .grid > .txt { grid-area: txt; }
  .ring { grid-area: ring; width: min(100%, 480px); margin: 0; align-self: center; }
  .node span { font-size: 16px; }
  .node span i { font-size: 12px; }
  .ring .hub { width: 44px; height: 66px; margin: -33px 0 0 -19px; }
  .system .aside { font-size: 18px; margin-top: 30px; padding-top: 24px; }

  .whofor { padding-top: 96px; }
  .whofor .wrap { grid-template-columns: 1fr 1.25fr; gap: 70px; align-items: end; }
  .whofor__list { column-gap: 44px; }
  .whofor__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0 14px; }
  .whofor__list b { font-size: 17px; }
  .whofor__list span { margin-top: 0; font-size: 14px; white-space: nowrap; }
  .work .head { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 60px; }
  .work .h2 { max-width: none; }
  .reel { --ph-h: clamp(250px, calc(100svh - 486px), 422px); margin-top: 36px; overflow: visible; padding: 0 var(--pad); max-width: var(--max); margin-left: auto; margin-right: auto; gap: 24px; }
  .demo { flex: 1; width: auto; min-width: 0; }
  .demo .ph { width: auto; max-width: 100%; height: var(--ph-h); align-self: flex-start; border-radius: 28px; }
  .demo:nth-child(even) { margin-top: 24px; }
  .work .after { margin-top: 54px; grid-template-columns: 1fr auto; align-items: center; }

  .steps { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 76px; }
  .steps::before { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 1px; }
  .steps .fill { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
  .js .steps .fill { transform: scaleX(0); animation-name: fillX; animation-range: entry 60% cover 48%; }
  .step { padding: 62px 30px 0 0; }
  .step :is(h2, h3) { font-size: 25px; }
  .step p { font-size: 17px; }
  .terms { margin-top: 76px; padding: 28px 0; }
  .terms b { font-size: 24px; }

  .about .box, .you .box { padding: 76px 70px 70px; border-radius: 34px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px 70px; align-items: start; }
  .about .box .label, .you .box .label { grid-column: 1 / -1; }
  .about .box svg.wm, .you .box svg.wm { right: 40px; bottom: -110px; width: 300px; height: 450px; opacity: .06; }
  .about .h2, .you .h2 { margin-top: 26px; }
  .about .txt, .you .txt { padding-top: 34px; }
  .about .body, .you .body { margin-top: 0; font-size: 20px; }
  .about .go, .you .go { margin-top: 26px; }

  .close { padding-top: 190px; padding-bottom: 40px; }
  .close .h1 { max-width: 9em; }
  .close .acts { flex-direction: row; align-items: center; gap: 44px; margin-top: 44px; }
  .foot { margin-top: 150px; padding-top: 70px; }
  .foot .top-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; }
  .foot .cols { margin-top: 0; }

  .desk { left: auto; right: 26px; bottom: 26px; }
  .desk__bar { width: 330px; transition: transform .6s var(--out), box-shadow .4s var(--soft), opacity .4s, width .7s var(--out), padding .7s var(--out); overflow: hidden; }
  .desk__bar .txt, .desk__bar .up { transition: opacity .35s var(--soft); }
  .desk.compact .desk__bar:not(:hover):not(:focus-visible) { width: 58px; padding: 0 12px; }
  .desk.compact .desk__bar:not(:hover):not(:focus-visible) .txt, .desk.compact .desk__bar:not(:hover):not(:focus-visible) .up { opacity: 0; }
  .desk__bar .orb { flex: none; }
  .sheet { left: auto; right: 22px; bottom: 22px; width: 420px; margin: 0; transform-origin: 100% 100%; }
  .sheet-veil { background: rgba(2, 4, 6, .35); }
  body { padding-bottom: 0; }
}
@keyframes fillX { to { transform: scaleX(1); } }
@media (min-width: 1000px) { @keyframes approach { from { transform: translate(0, 50px); } to { transform: translate(0, -96px); } } }

.phero { position: relative; padding: calc(var(--top-h) + 40px) 0 0; isolation: isolate; overflow: clip; }
.phero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -2; background: radial-gradient(120% 70% at 50% -12%, #12222c 0%, rgba(13, 26, 34, .5) 40%, transparent 72%); }
.phero .h1 { margin-top: 20px; font-size: clamp(30px, 8.7vw, 44px); line-height: 1.05; }
.phero .lede { margin-top: 20px; }
.phero .acts { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.phero__pic { margin-top: 38px; }
.phero__pic .stage { margin: 0; border-radius: 26px; min-height: 340px; }
.phero.solo { padding-bottom: 8px; }
.phero__mark { position: absolute; z-index: -1; right: -70px; top: 70px; width: 250px; opacity: .07; pointer-events: none; }

.does .h2, .asks .h2 { max-width: 11em; }
.points.four, .points.six { margin-top: 40px; }
.terms-line { margin-top: 20px; }
.terms-line b { font-weight: 400; font-size: 18px; letter-spacing: -.015em; color: var(--gold-hi); }

.aside-block { margin-top: 0; }
.aside-block .inner { border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line); padding: 34px 0 36px; display: grid; gap: 16px; }
.aside-block .h3 { font-size: 26px; font-weight: 300; letter-spacing: -.03em; }
.aside-block .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; }
.aside-block.second { position: relative; z-index: 2; }
.aside-block.second .inner { border-top: 0; }

.ways.twoways { padding-top: 40px; scroll-margin-top: calc(var(--top-h) + 4px); }
.twoways .way { gap: 12px; }
.twoways .way.first { box-shadow: inset 0 0 0 1px var(--line-gold), inset 0 1px 0 rgba(255, 255, 255, .06); background: linear-gradient(160deg, #17201f, #080e14 72%); }
.way__i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--line-gold); }
.way__i svg { width: 15px; height: 15px; }
.twoways .way .h3 { font-size: 24px; font-weight: 300; letter-spacing: -.028em; margin-top: 4px; }
.kinds .pair { display: grid; gap: 22px; }
.kinds .pair h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 400; letter-spacing: -.015em; }
.kinds .pair h3 svg { width: 17px; height: 17px; color: var(--gold); }
.kinds .pair .body { margin-top: 6px; }

.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 20px 0; font-size: 19px; line-height: 1.25; font-weight: 400; letter-spacing: -.018em; transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-hi); }
.qa summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-gold); transition: transform .5s var(--out), background .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--gold); border-radius: 2px; transition: transform .5s var(--out); }
.qa summary i::after { transform: rotate(90deg); }
.qa details[open] summary i { background: rgba(201, 166, 102, .12); }
.qa details[open] summary i::after { transform: rotate(0deg); }
.qa .ans { padding: 0 44px 22px 0; color: var(--ink-2); max-width: 36em; }
.qa details[open] .ans { animation: ansin .6s var(--out) both; }
@keyframes ansin { from { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@supports (interpolate-size: allow-keywords) {
  .qa { interpolate-size: allow-keywords; }
  .qa details::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--out), content-visibility .55s allow-discrete; }
  .qa details[open]::details-content { block-size: auto; }
}

.joins .index.others { margin-top: 26px; padding-top: 0; }
.joins .index.others ol { grid-template-columns: 1fr; }
.joins .index.others li { border-right: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--line) !important; }
.joins .index.others a { grid-template-columns: 34px 1fr auto; align-items: center; min-height: 54px; padding: 0 !important; row-gap: 0; }
.joins .index.others a i { grid-column: auto; align-self: center; }

.next { display: block; position: relative; z-index: 2; margin-top: 96px; padding: 34px 0 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(201, 166, 102, .05), transparent); transition: background .5s; }
.next + .foot, main:has(.next) + .foot { margin-top: 0; border-top: 0; }
.next .wrap { display: grid; gap: 10px; }
.next .label { color: var(--ink-3); }
.next__name { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: clamp(34px, 9.4vw, 46px); line-height: 1.05; font-weight: 300; letter-spacing: -.035em; transition: color .4s; }
.next__name .arr { color: var(--gold); transition: transform .6s var(--out); }
.next__name .arr svg { width: 28px; height: 28px; }
.next:hover { background: linear-gradient(180deg, rgba(201, 166, 102, .1), transparent); }
.next:hover .next__name { color: var(--gold-hi); }
.next:hover .next__name .arr { transform: translateX(10px); }

.rows { padding-top: 44px; }
.row { display: grid; gap: 22px; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 1px solid var(--line-2); }
.row .ph { width: min(72%, 270px); border-radius: 30px; justify-self: center; transition: transform .8s var(--out), box-shadow .6s var(--soft); }
.row .ph img { transition: transform 1.4s var(--out); }
.row:hover .ph { transform: translateY(-6px); box-shadow: 0 0 0 1px #33414b, 0 0 0 6px #0f171e, 0 0 0 7px rgba(201, 166, 102, .45), 0 44px 70px -24px rgba(0, 0, 0, .95); }
.row:hover .ph img { transform: scale(1.035); }
.row__txt { display: grid; gap: 8px; align-content: start; }
.row .kind { display: flex; gap: 12px; align-items: baseline; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.row .kind i { font-style: normal; font-family: var(--mono); letter-spacing: .06em; color: var(--gold-lo); }
.row .name { font-size: 28px; line-height: 1.1; font-weight: 300; letter-spacing: -.03em; }
.row .line { color: var(--ink-2); max-width: 30em; }
.rows__note { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 36em; }

.long { padding-top: 48px; }
.steps.tall { margin-top: 0; }
.steps.tall .step { padding-bottom: 46px; }
.steps.tall .step :is(h2, h3) { font-size: 26px; font-weight: 300; letter-spacing: -.03em; }
.steps.tall .step p { font-size: 17px; margin-top: 12px; max-width: 30em; }

.who .say { max-width: 22em; }
.points.six .point:nth-child(4), .points.six .point:nth-child(5), .points.six .point:nth-child(6) { }

.ways { padding-top: 44px; }
.ways .wrap { display: grid; gap: 16px; }
.way { border-radius: 26px; padding: 28px 22px 26px; background: linear-gradient(160deg, #0f1a23, #080e14 70%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06); display: grid; gap: 16px; align-content: start; justify-items: start; }
.way .mail a { font-size: clamp(20px, 5.4vw, 28px); }
.formsec { padding-top: 80px; padding-bottom: 20px; }
.formsec .h2 { margin-top: 22px; }
#form-report { position: absolute; top: -90px; }
.ways + .aside-block { padding-top: 72px; }
.formgrid { display: grid; gap: 30px; }
.report { margin-top: 4px; display: grid; gap: 12px; }
.report .h3 { font-size: 28px; font-weight: 300; letter-spacing: -.03em; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field span { font-size: 12.5px; color: var(--ink-2); letter-spacing: .01em; }
.field input, .field textarea { width: 100%; border: 0; border-radius: 14px; padding: 15px 16px; font: inherit; font-size: 16px; color: var(--ink); background: rgba(241, 236, 226, .045); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, background .3s; resize: vertical; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(241, 236, 226, .28); }
.field input:focus, .field textarea:focus { outline: none; background: rgba(241, 236, 226, .07); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 4px rgba(201, 166, 102, .14); }
.tick { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; padding: 6px 0; }
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tick .box { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: transparent; transition: background .3s, box-shadow .3s, color .2s; }
.tick .box svg { width: 14px; height: 14px; }
.tick input:checked + .box { background: var(--gold); color: #120e06; box-shadow: none; }
.tick input:focus-visible + .box { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.form .send { display: grid; gap: 14px; justify-items: start; margin-top: 6px; }

@media (min-width: 720px) {
  .row { grid-template-columns: 240px 1fr; gap: 44px; align-items: center; padding: 44px 0; }
  .row .ph { width: 100%; }
  .ways .wrap { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr 1fr; }
  .form .wide { grid-column: 1 / -1; }
  .points.six { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .phero { padding-top: calc(var(--top-h) + 84px); }
  .phero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
  .phero__txt { padding-top: 34px; }
  .phero.solo .phero__txt { padding-top: 0; }
  .phero.solo .wrap { display: block; }
  .phero .h1 { font-size: clamp(46px, 4.5vw, 68px); line-height: 1.02; letter-spacing: -.042em; margin-top: 28px; }
  .phero.solo .h1 { font-size: clamp(60px, 6.2vw, 92px); max-width: 11em; }
  .phero .lede { margin-top: 28px; max-width: 26em; }
  .phero .acts { margin-top: 36px; gap: 14px 30px; }
  .phero__pic { margin-top: 0; }
  .phero__pic .stage { min-height: 520px; border-radius: 30px; }
  .phero__mark { right: 6vw; top: 110px; width: 380px; opacity: .06; }
  .points.four { grid-template-columns: repeat(4, 1fr); margin-top: 70px; }
  .points.six { grid-template-columns: repeat(3, 1fr); column-gap: 0; margin-top: 70px; row-gap: 46px; }
  .points.six .point { grid-template-columns: 1fr; padding: 26px 30px 0 0; border-top: 1px solid var(--line-2); border-bottom: 0 !important; }
  .aside-block .inner { grid-template-columns: 1fr 1.1fr; gap: 20px 70px; padding: 60px 0; align-items: start; }
  .aside-block .h3 { font-size: 40px; }
  .aside-block .body { font-size: 19px; }
  .terms-line b { font-size: 21px; }
  .qa { max-width: 900px; }
  .qa summary { font-size: 24px; padding: 28px 0; }
  .qa .ans { font-size: 18px; padding-bottom: 30px; }
  .asks .wrap { display: grid; grid-template-columns: 300px 1fr; align-items: start; }
  .next { margin-top: 160px; padding: 60px 0 64px; }
  .next__name { font-size: clamp(60px, 6.4vw, 96px); letter-spacing: -.045em; }
  .next__name .arr svg { width: 54px; height: 54px; }
  .rows { padding-top: 80px; }
  .row { grid-template-columns: 250px 1fr auto; gap: 80px; padding: 60px 0; }
  .row .name { font-size: 46px; letter-spacing: -.04em; }
  .row .line { font-size: 19px; }
  .row .go { margin-top: 10px; }
  .long { padding-top: 90px; }
  .steps.tall { grid-template-columns: 1fr; max-width: 860px; }
  .steps.tall::before, .steps.tall .fill { left: 21px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; transform-origin: 50% 0; background: var(--line-2); }
  .steps.tall .fill { background: linear-gradient(var(--gold-hi), var(--gold)); }
  .js .steps.tall .fill { transform: scaleY(0); animation-name: fillY; animation-range: entry 30% cover 62%; }
  .steps.tall .step { padding: 0 0 80px 96px; }
  .steps.tall .step .n { width: 43px; height: 43px; font-size: 14px; }
  .steps.tall .step :is(h2, h3) { font-size: 44px; letter-spacing: -.04em; }
  .steps.tall .step p { font-size: 20px; margin-top: 18px; }
  .ways { padding-top: 80px; }
  .ways.twoways { padding-top: 70px; }
  .twoways .way .h3 { font-size: 32px; }
  .kinds .pair { grid-template-columns: 1fr 1fr; gap: 40px; }
  .kinds .pair h3 { font-size: 22px; }
  .ways .wrap { gap: 26px; }
  .way { padding: 44px 44px 40px; border-radius: 34px; gap: 20px; }
  .way .body { font-size: 19px; }
  .formsec { padding-top: 150px; }
  .formgrid { grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
  .report .h3 { font-size: 40px; }
  .report .body { font-size: 19px; }
  .joins .index.others a { min-height: 62px; font-size: 19px; }
}

@media (min-width: 1000px) and (min-height: 891px) and (max-height: 960px) {
  .hero { padding-top: calc(var(--top-h) + 5svh); }
  .hero .index { padding-top: 12px; }
}

@media (min-width: 1000px) and (min-height: 801px) and (max-height: 890px) {
  .hero { padding-top: calc(var(--top-h) + 4.4svh); }
  .hero .h1 { font-size: clamp(56px, 5.3vw, 80px); }
  .hero .index { padding-top: 8px; }
}

@media (min-width: 1000px) and (max-height: 800px) {
  .hero { padding-top: calc(var(--top-h) + 12px); }
  .hero .h1 { font-size: clamp(50px, 5vw, 74px); margin-top: 14px; }
  .hero .lede { margin-top: 14px; }
  .hero .acts { margin-top: 16px; }
  .hero .index { padding-top: 2px; margin-bottom: 96px; }
  .index a, .index li:nth-child(even) a { min-height: 84px; row-gap: 10px; padding-top: 13px; padding-bottom: 15px; }
  .hero__mark { top: 13svh; height: 58svh; }
}

@media (hover: hover) and (pointer: fine) {
  .plate::after, .about .box::after, .you .box::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--soft); background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(236, 210, 155, .09), transparent 62%); z-index: 3; }
  .plate:hover::after, .about .box:hover::after, .you .box:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rise, .js .lines .ln > span, .js .draw, .js .desk__bar { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__mark .p-base, .hero__mark .p-edge { stroke-dashoffset: 0 !important; }
  .hero__mark .p-run { display: none; }
  .hero__glow { opacity: 1 !important; }
  .js .sc-rev .sms, .js .sc-rev .newrev, .js .sc-apt .tag { opacity: 1 !important; transform: none !important; }
  .stars svg { fill: var(--gold-hi) !important; }
  .node::after { opacity: 1 !important; }
  .js .sc-shops .shop.b .guest { transform: translate(0, -72px) !important; }
  .js .sc-shops .room .chip { opacity: 1 !important; transform: none !important; }
  .cyc.on .n { background: var(--bg) !important; color: var(--gold-hi) !important; box-shadow: inset 0 0 0 1px var(--line-gold) !important; }
  .ring .comet, .ring .head { display: none; }
}

:root {

  --gap: 13px;
  --sx: calc(var(--gap) * .6);
  --sy: var(--gap);
  --shade: 0, 3, 12;

  --ts-d: .051em .085em .1em rgba(var(--shade), .56);
  --ts: calc(var(--sx) * .13) calc(var(--sy) * .13) calc(var(--gap) * .17) rgba(var(--shade), .5);
  --ts-s: calc(var(--sx) * .11) calc(var(--sy) * .11) calc(var(--gap) * .14) rgba(var(--shade), .46);

  --cast: calc(var(--sx) * 1.35) calc(var(--sy) * 1.35) calc(var(--gap) * 2) calc(var(--gap) * -.45) rgba(var(--shade), .82);

  --drop: calc(var(--sx) * .8) calc(var(--sy) * .8) calc(var(--gap) * 1.1) calc(var(--gap) * -.25) rgba(var(--shade), .76);
  --drop-up: calc(var(--sx) * 1.3) calc(var(--sy) * 1.3) calc(var(--gap) * 1.7) calc(var(--gap) * -.3) rgba(var(--shade), .64);
  --drop-s: calc(var(--sx) * .45) calc(var(--sy) * .45) calc(var(--gap) * .55) calc(var(--gap) * -.12) rgba(var(--shade), .72);
  --drop-dn: calc(var(--sx) * .4) calc(var(--sy) * .4) calc(var(--gap) * .4) calc(var(--gap) * -.08) rgba(var(--shade), .72);

  --glass: linear-gradient(180deg, rgba(2, 8, 21, .2), rgba(2, 8, 21, .2));
  --glass-dense: var(--glass);

  --glass-solid: linear-gradient(180deg, #051129, #051129);
  --glass-gold: var(--glass);

  --pane: rgba(64, 132, 255, .1);
  --pane-lit: #12306a;

  --rim: inset 0 0 0 var(--hair, .5px) rgba(180, 218, 255, .46);
  --rim-gold: inset 0 0 0 var(--hair, .5px) color-mix(in srgb, var(--gold) 92%, transparent);

  --thick: 0 0 0 0 transparent;
}
@media (min-width: 1000px) { :root { --gap: 19px; } }

.plate, .stage, .about .box, .you .box, .way, .whofor__list, .sheet, .menu, .top, .desk__bar, .index a {
  --drop: 3px 5px 9px -3px rgba(var(--shade), .6);
  --drop-up: 5px 9px 15px -4px rgba(var(--shade), .52);
  --drop-dn: 1px 2px 3px -1px rgba(var(--shade), .7);
}

html { background: #041029; }
body { background: none; }
.sky { --sky-p: 2000px; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; background: #041029; }

.sky i { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--sky-p) + 160px); will-change: transform; transform: translate3d(0, 0, 0);
  background-color: #041029; background-repeat: repeat-y; background-size: 100% var(--sky-p); background-position: 0 calc(var(--sky-p) * -.36);
  background-image: radial-gradient(max(76vw, 300px) calc(var(--sky-p) * .5) at 30% 50%, #081e48 0%, #081e47 8.33%, #081d46 16.67%, #071c43 25%, #071a40 33.33%, #07193d 41.67%, #061738 50%, #051534 58.33%, #051431 66.67%, #05122e 75%, #04112b 83.33%, #04102a 91.67%, #041029 100%);
  background-image: radial-gradient(max(76vw, 300px) calc(var(--sky-p) * .5) at 30% 50% in srgb, color(srgb .0314 .1176 .2824) 0%, color(srgb .0311 .1167 .2803) 8.33%, color(srgb .0303 .114 .2742) 16.67%, color(srgb .0291 .1096 .2645) 25%, color(srgb .0275 .1039 .252) 33.33%, color(srgb .0256 .0973 .2373) 41.67%, color(srgb .0235 .0902 .2216) 50%, color(srgb .0215 .0831 .2058) 58.33%, color(srgb .0196 .0765 .1912) 66.67%, color(srgb .018 .0708 .1786) 75%, color(srgb .0167 .0664 .1689) 83.33%, color(srgb .016 .0637 .1629) 91.67%, color(srgb .0157 .0627 .1608) 100%); }
.sky::after { content: none; }
.hero::before { background: none; }
.phero::before { background: none; }
.close::before { background: none; }

body::before { display: none; }

main, .foot { text-shadow: var(--ts); }
.foot .cols, .foot .base, .fine { text-shadow: var(--ts-s); }

.phero { overflow: visible; overflow-x: clip; }
.h1, .h2, .h3, .say, .next__name, .row .name, .terms b, .mail a, .point h3, .cyc h3, .step :is(h2, h3) { text-shadow: var(--ts-d); }

.h1 em { text-shadow: none; filter: drop-shadow(.051em .085em .05em rgba(var(--shade), .56)); }
.h1 em { background-image: linear-gradient(100deg, var(--gold-d) 0%, var(--gold-d) 38%, #f8e3a4 50%, var(--gold-d) 62%, var(--gold-d) 100%); }
.h2 em, .h3 em { color: var(--gold-d); }

.js .lines .ln { overflow: visible; clip-path: inset(-1em -3em 0 -1em); transition: clip-path .7s var(--soft); }
.js .lines.in .ln { clip-path: inset(-1em -3em -80px -1em); transition-delay: calc(var(--l, 0) * 95ms + var(--d, 0ms) + 820ms); }

.plate, .stage, .about .box, .you .box, .way, .whofor__list, .index a, .btn, .go:not(.ring), .tag, .ph, .hear, .field, .tick, .sheet, .menu, .drop, .chip, .srow, .n, .beat__n span, .plate__n { text-shadow: none; }
:is(.plate, .stage, .box, .way, .whofor__list, .sheet, .menu) :is(.h1, .h2, .h3, .say, .mail a, .terms-line b) { text-shadow: none; }
.label, .whofor__list span, .menu .grp, .demo .kind, .row .kind, .foot .fh, .said.a .by, .beat__n, .slot time, .menu .tail a.mail, .menu a.big[aria-current="page"], .terms b em { color: var(--gold-ink); }
.label i { color: var(--gold-lo); }
.js .say .w { color: rgba(238, 246, 255, .42); }
.say .w.g { color: var(--gold-hi); }
@keyframes wlitg { to { color: var(--gold-hi); } }

.plate { background: var(--glass-dense); box-shadow: var(--thick), var(--cast); }

.plate::before, .beat .stage::before, .phero__pic .stage::before, .about .box::before, .you .box::before, div.way::before, .whofor__list::before {
  content: ""; position: absolute; inset: 0; height: auto; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 1;
  background: none; box-shadow: inset 0 0 0 var(--hair, .5px) rgb(196, 226, 255);
  -webkit-mask: linear-gradient(138deg, #000 0%, rgba(0, 0, 0, .66) 6%, rgba(0, 0, 0, .44) 15%, rgba(0, 0, 0, .44) 100%);
  mask: linear-gradient(138deg, #000 0%, rgba(0, 0, 0, .66) 6%, rgba(0, 0, 0, .44) 15%, rgba(0, 0, 0, .44) 100%);
}

.plates.stack .plate { background: var(--glass-solid); }

.plates.stack.glass .plate { background: none; }
.plates.stack.glass .plate__in { background: var(--glass-dense); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .plates.stack.glass .plate:not(:last-child) .plate__in { overflow: hidden; animation: coverout linear both; animation-timeline: scroll(root); animation-range: var(--c0) var(--c1); }
    .plates.stack.glass .plate:not(:last-child) .plate__in > * { animation: coverin linear both; animation-timeline: scroll(root); animation-range: var(--c0) var(--c1); will-change: transform; }
    .plates.stack.glass .plate:not(:last-child) { animation: edgeout linear both, capout linear both; animation-timeline: scroll(root), scroll(root); animation-range: var(--c0) var(--c1), calc(var(--z1) - var(--pk)) var(--z1); }
  }
}
@keyframes coverout { to { transform: translateY(calc(-1 * var(--ph))); } }
@keyframes coverin { to { transform: translateY(var(--ph)); } }

@keyframes capout { to { opacity: 0; } }
@keyframes edgeout { 0% { clip-path: inset(-240px -240px -240px -240px); } 3% { clip-path: inset(-240px 0 calc(3% - var(--pr) - 1px) -240px); } 100% { clip-path: inset(-240px 0 calc(100% - var(--pr) - var(--pk)) -240px); } }
.plate__top .label .sys, .plate__top .label .sys::before, .plate__n { color: var(--ink-3); }
.plate .turn { border-left-color: var(--gold); }

.stage { background: rgba(2, 8, 21, .26); box-shadow: var(--rim); }

.beat .stage, .phero__pic .stage { background: var(--glass); box-shadow: var(--thick), var(--cast); }
.stage .note { color: var(--ink-3); }
.plate .have { background: var(--glass-gold); box-shadow: var(--rim-gold), var(--drop); }
.plate .have svg { width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; color: #120e06; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 250, 235, .7), inset 0 -1px 0 rgba(84, 56, 10, .5); }
.about .box, .you .box, div.way { position: relative; background: var(--glass); box-shadow: var(--thick), var(--cast); }
.twoways .way.first { background: var(--glass-gold); box-shadow: var(--thick), var(--cast); }

.twoways .way.first::before { box-shadow: inset 0 0 0 var(--hair, .5px) var(--gold); -webkit-mask: none; mask: none; opacity: .92; }
.way__i { color: #120e06; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 250, 235, .7), inset 0 -1px 0 rgba(84, 56, 10, .5), var(--drop); }
.way:not(.first) .way__i { color: var(--gold-hi); background: radial-gradient(120% 120% at 30% 24%, rgba(170, 214, 255, .2), rgba(6, 20, 50, .5) 62%); box-shadow: var(--rim-gold), var(--drop); }
.kinds .pair h3 svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--gold-hi); background: radial-gradient(120% 120% at 30% 24%, rgba(170, 214, 255, .2), rgba(6, 20, 50, .5) 62%); box-shadow: var(--rim-gold), var(--drop); }

.whofor__list { position: relative; border-top: 0; border-radius: 22px; padding: 1px 16px 0; background: var(--glass); box-shadow: var(--thick), var(--cast); }
.whofor__list li:nth-last-child(-n+2) { border-bottom-color: transparent; }

.ph { background: #081a3c; box-shadow: 0 0 0 6px #071534, 0 0 0 calc(6px + var(--hair, .5px)) rgba(180, 218, 255, .46), var(--cast); }
.demo:hover .ph, .row:hover .ph { box-shadow: 0 0 0 6px #071534, 0 0 0 calc(6px + var(--hair, .5px)) color-mix(in srgb, var(--gold) 92%, transparent), calc(var(--sx) * 2) calc(var(--sy) * 2) calc(var(--gap) * 2.4) calc(var(--gap) * -.45) rgba(var(--shade), .52), calc(var(--sx) * 3.2) calc(var(--sy) * 3.2) calc(var(--gap) * 5) calc(var(--gap) * -.8) rgba(var(--shade), .3); }
.orb { box-shadow: inset 0 -3px 6px rgba(60, 40, 8, .5), inset 0 1px 1px rgba(255, 250, 235, .5), var(--drop); }
.call .modes .on { color: var(--on-metal, #120e06); background: var(--metal, linear-gradient(180deg, var(--gold-hi), var(--gold))); box-shadow: var(--metal-edge, inset 0 0 0 var(--hair, .5px) rgba(255, 246, 214, .8)); }
.call .modes span { color: var(--ink-2); box-shadow: var(--rim); }
.call .modes svg { width: 12px; height: 12px; }
.hear { background: var(--glass-gold); box-shadow: var(--rim-gold), var(--drop); transition: translate .5s var(--out), box-shadow .5s var(--out), background .3s var(--soft); }
.hear:hover { background: var(--glass-gold); box-shadow: var(--rim-gold), var(--drop-up); translate: 0 -1px; }
.hear:active { translate: 0 1px; box-shadow: var(--rim-gold), var(--drop-dn); transition-duration: .12s; }
.hear__ic { background: linear-gradient(180deg, rgba(255, 252, 240, .5), rgba(255, 252, 240, 0) 50%), linear-gradient(180deg, #efd7a2, #c9a666 62%, #b18c48); box-shadow: inset 0 1px 0 rgba(255, 253, 244, .9), inset 0 -1px 0 rgba(84, 56, 10, .6), 0 0 0 1px rgba(66, 44, 8, .38), 2px 4px 7px -2px rgba(var(--shade), .7); }
.hear__bar { background: rgba(160, 208, 255, .16); }
.bub.v, .sms { background: var(--pane); box-shadow: var(--rim), var(--drop); }
.bub.a { background: var(--pane-lit); box-shadow: var(--rim-gold), var(--drop); }
.sms u { color: #a9d0ff; }
.job, .serp__bar { background: var(--pane); box-shadow: var(--rim), var(--drop); }
.serp__bar span { background: rgba(170, 212, 255, .24); }
.tap { box-shadow: var(--rim); }
.newrev { background: var(--pane-lit); box-shadow: var(--rim-gold), var(--drop); }
.stars svg { fill: rgba(170, 212, 255, .3); }
.chip, .tag.ok { box-shadow: inset 0 1px 0 rgba(235, 255, 244, .6), inset 0 -1px 0 rgba(10, 60, 34, .35), var(--drop); }

.serp__box { height: 161px; border-radius: 20px / 20px 20px 15px 15px; background: none; box-shadow: var(--rim-gold); }
.srow { background: var(--pane); box-shadow: var(--rim), var(--drop); }
.srow i { background: rgba(170, 212, 255, .34); }
.srow b { background: rgba(170, 212, 255, .24); }
.srow .st svg { fill: rgba(170, 212, 255, .32); }

.srow.you { background: var(--pane-lit); box-shadow: var(--rim-gold), 5px 9px 14px -5px rgba(var(--shade), .75); }
.srow.you i { box-shadow: none; }
.srow em { color: var(--on-metal, #120e06); background: var(--metal, linear-gradient(180deg, var(--gold-hi), var(--gold))); box-shadow: var(--metal-edge, inset 0 0 0 var(--hair, .5px) rgba(255, 246, 214, .8)), 2px 4px 7px -2px rgba(var(--shade), .6); }

.room { background: rgba(2, 8, 21, .26); box-shadow: var(--rim); }
.shop.b .room { background: var(--pane-lit); box-shadow: var(--rim-gold); }
.room .seat { border-color: rgba(190, 224, 255, .3); }
.shop.b .room .counter { background: var(--gold); }
.room .door { background: rgba(190, 224, 255, .28); }
.room .guest { box-shadow: 0 0 0 4px rgba(96, 160, 255, .2), 2px 4px 5px rgba(var(--shade), .6); }
@keyframes greet { 0% { transform: scale(1); } 45% { transform: scale(1.22); filter: brightness(1.14); } 100% { transform: scale(1); } }

.btn {
  gap: 14px; padding: 0 7px 0 26px; color: var(--on-metal);
  background: var(--metal);
  box-shadow: var(--metal-edge), var(--drop);
  text-shadow: none; filter: none;
  transition: translate .5s var(--out), scale .5s var(--out), transform .5s var(--out), box-shadow .5s var(--out), background-color .3s var(--soft);
}
.btn .arr { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--metal-hi);
  background: var(--disc);
  box-shadow: none;
  transition: color .3s var(--soft), background-color .3s var(--soft); }
.btn .arr svg { transition: transform .5s var(--out); }
.btn:hover { filter: none; translate: 0 -3px; background-color: var(--metal-hi); box-shadow: var(--metal-edge), var(--drop-up); }
.btn:hover .arr, .plate__acts .btn:hover .arr { transform: none; color: #fff; background-color: var(--disc-lit); }
.btn:hover .arr svg { transform: translateX(3px); }
.btn:hover .arr.dn svg { transform: translateY(3px); }
.btn:active { translate: 0 2px; scale: .985; transform: none; filter: none; background-color: var(--metal-lo); box-shadow: var(--metal-edge), var(--drop-dn); transition-duration: .12s; }
.btn:active .arr, .plate__acts .btn:active .arr { color: var(--metal-hi); background-color: var(--disc); transition-duration: .12s; }
.btn:active .arr svg, .btn:active .arr.dn svg { transform: none; transition-duration: .12s; }
.btn:focus-visible, .go:not(.ring):focus-visible, .index a:focus-visible, .desk__bar:focus-visible, .nav .pill:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 999px; }
.index a:focus-visible { border-radius: 20px; }
.plate__acts .btn { padding: 0 6px 0 22px; }
.plate__acts .btn .arr { width: 36px; height: 36px; }

.btn.ghost { color: var(--ink); background: var(--tint); box-shadow: var(--rim-gold), var(--drop); text-shadow: none; }
.btn.ghost .arr { color: var(--gold-hi); background: transparent; box-shadow: var(--rim-gold); transition: background-color .3s, color .3s; }
.btn.ghost:hover { background: var(--tint); box-shadow: var(--rim-gold), var(--drop-up); filter: none; }
.btn.ghost:hover .arr { color: var(--on-metal); background: var(--metal-flat); box-shadow: var(--rim-gold); }
.btn.ghost:active { background: var(--tint); box-shadow: var(--rim-gold), var(--drop-dn); filter: none; }
.btn.ghost:active .arr { color: var(--on-metal); background: var(--metal-lo); }

.go:not(.ring) { padding: 0 6px 0 17px; border-radius: 999px; gap: 11px; color: var(--ink);
  background: var(--tint);
  box-shadow: var(--rim), var(--drop);
  transition: translate .5s var(--out), box-shadow .5s var(--out), background .4s var(--soft); }
.go:not(.ring) span.t, .go:not(.ring):hover span.t { background: none; padding-bottom: 0; color: inherit; }
.go:not(.ring) .arr { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); background: transparent; box-shadow: var(--rim-gold); transition: background-color .4s var(--soft), color .3s var(--soft); }
.go:not(.ring) .arr svg { width: 14px; height: 14px; transition: transform .5s var(--out); }
.go:not(.ring):hover, .demo:hover .go { translate: 0 -2px; box-shadow: var(--rim-gold), var(--drop-up); }
.go:not(.ring):hover .arr, .demo:hover .go .arr { transform: none; color: var(--on-metal); background: var(--metal-flat); box-shadow: var(--rim-gold); }
.go:not(.ring):hover .arr svg { transform: translateX(2px); }
.demo:hover .go .arr svg { transform: translate(1.5px, -1.5px); }
.go:not(.ring):active, .demo:active .go { translate: 0 1px; box-shadow: var(--rim), var(--drop-dn); transition-duration: .12s; }
.demo .go { padding: 0 5px 0 14px; gap: 9px; }
.demo .go .arr { width: 30px; height: 30px; }

.go:not(.ring) { justify-self: start; }
.plate__txt > .go, .demo > .go { align-self: flex-start; }
.go[href^="#"]:hover .arr svg { transform: translateY(2px); }

.index ol { border-top: 0; gap: 6px; }
.index li, .index li:nth-child(odd) { border: 0 !important; }
.index a, .index li:nth-child(even) a { border-radius: 16px; background: var(--glass); box-shadow: var(--rim), var(--cast); transition: color .3s, translate .5s var(--out), box-shadow .5s var(--out); }
.index a::before { display: none; }
.index a:hover { color: var(--ink); translate: 0 -2px; box-shadow: var(--rim-gold), calc(var(--sx) * 2.2) calc(var(--sy) * 2.2) calc(var(--gap) * 3.2) calc(var(--gap) * -.55) rgba(var(--shade), .58); }
.index a:active { translate: 0 1px; transition-duration: .12s; }
.index a i { display: grid; place-items: center; justify-self: start; width: 28px; height: 28px; border-radius: 50%; color: var(--gold-ink); letter-spacing: 0; background: none; box-shadow: var(--rim-gold); }
.index a .arr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); background: transparent; box-shadow: var(--rim-gold); transition: background-color .4s var(--soft), color .3s var(--soft); }
.index a .arr svg { width: 14px; height: 14px; transition: transform .5s var(--out); }
.index a:hover .arr { transform: none; color: var(--on-metal); background: var(--metal-flat); }
.index a:hover .arr svg { transform: translate(1.5px, 1.5px); }
.index a .res small { color: var(--ink-2); }
@media (max-width: 999px) {
  .index.three a, .index.three li:nth-child(even) a { grid-template-columns: 38px 1fr auto; padding: 0 8px 0 10px; }
}
.joins .index.others ol { gap: 8px; }
.joins .index.others li { border: 0 !important; }
.joins .index.others a { grid-template-columns: 38px 1fr auto; padding: 0 8px 0 10px !important; }
.joins .index.others a:hover .arr svg { transform: translateX(2px); }

.tag { color: var(--ink-2); background: var(--tint); box-shadow: var(--rim), var(--drop); }
.tag.gold { color: var(--gold-hi); background: none; box-shadow: var(--rim-gold), var(--drop); }
.tag.ok { color: #0b140f; background: var(--ok); }
.tag svg { width: 15px; height: 15px; margin: -1px 0 -1px -4px; padding: 2.5px; border-radius: 50%; background: rgba(3, 12, 32, .3); }
.tag.ok svg { background: rgba(8, 40, 22, .22); }
.cyc .by .tag, .beat .by .tag { --drop: var(--drop-s); --drop-up: var(--drop-s); transition: background-color .3s, color .3s, translate .5s var(--out), box-shadow .5s var(--out); }
.cyc .by .tag:hover, .beat .by .tag:hover { background: var(--metal-flat); color: var(--on-metal); translate: 0 -1px; box-shadow: var(--rim-gold), var(--drop-up); }

.cyc .n, .step .n, .beat__n span { color: var(--gold-hi); background: var(--disc); box-shadow: var(--rim-gold); }
.beat__n span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-block: -5.5px; border-radius: 50%; letter-spacing: 0; }
.cyc.on .n { color: var(--on-metal); background: var(--metal-flat); box-shadow: var(--rim-gold); }
.cyc.back .n { color: var(--gold-hi); }
.cyc.on h3 { color: var(--gold-hi); }
.plate__n { color: var(--ink-3); }
@media (min-width: 1000px) {
  .plate__n { white-space: nowrap; margin: -5px 0; padding: 5px 11px; border-radius: 999px; color: var(--ink-2); background: none; box-shadow: var(--rim); }
}
.point::before, .menu a.big i, .node span i, .row .kind i { color: var(--gold-lo); }
.qa summary i { background: radial-gradient(125% 125% at 30% 22%, rgba(170, 214, 255, .22), rgba(6, 20, 50, .5) 62%); box-shadow: var(--rim-gold), var(--drop); }
.qa details[open] summary i { background: var(--glass-gold); }
.tick .box { background: rgba(3, 12, 32, .38); box-shadow: inset 0 0 0 1px var(--line-2), inset 1px 2px 3px rgba(0, 5, 18, .5); }
.tick input:checked + .box { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 250, 235, .7), inset 0 -1px 0 rgba(84, 56, 10, .5); }
.field input, .field textarea { background: rgba(3, 12, 32, .4); box-shadow: inset 0 0 0 1px rgba(156, 208, 255, .2), inset 2px 3px 7px -3px rgba(0, 5, 18, .62); }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(176, 218, 255, .36), inset 2px 3px 7px -3px rgba(0, 5, 18, .62); }
.field input:focus, .field textarea:focus { background: rgba(3, 12, 32, .5); box-shadow: inset 0 0 0 1px var(--gold), inset 2px 3px 7px -3px rgba(0, 5, 18, .62), 0 0 0 4px rgba(201, 166, 102, .16); }

.ring svg.track { filter: none; }
.ring .track circle { stroke: var(--metal-flat); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ring .track circle.in { stroke: rgba(150, 200, 255, .34); stroke-width: var(--edge-w); }
.ring .track .way path { stroke: var(--metal-flat); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 1; }
.node::before { background: var(--disc); box-shadow: inset 0 0 0 1px var(--metal-flat); }
.node::after { background: var(--metal-flat); box-shadow: none; transform: scale(0); }

.ring.go .node::after { opacity: 1; }
@keyframes nodelit { 0% { transform: scale(1); } 16% { transform: scale(0); } 97% { transform: scale(0); } 100% { transform: scale(1); } }

.ring .comet { inset: calc(9.5% - 1px); background: conic-gradient(from 0deg, rgba(255, 240, 200, 0) 0 66%, rgba(255, 240, 200, .96) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.node span { color: var(--ink-2); }
.ring .head::after { top: -5px; background: #fff0c8; box-shadow: none; }
.ring .hub path { stroke: var(--metal-flat); }
.ring .hub { opacity: 1; filter: drop-shadow(var(--sx) var(--sy) calc(var(--gap) * .5) rgba(var(--shade), .46)); }
.steps::before { background: rgba(160, 208, 255, .22); }

.hero__mark svg { position: absolute; inset: 0; animation: none; shape-rendering: geometricPrecision; }

.hero__mark .m-shade { translate: calc(var(--sx) * 2.2) calc(var(--sy) * 2.2); filter: blur(11px); }
.hero__mark .p-shade { fill: rgba(var(--shade), .4); }
.hero__mark :is(.p-spill, .p-warm, .p-wall, .p-in, .p-hi, .p-hi2, .p-hi3, .p-hi4, .p-hi5, .p-rim, .p-f1, .p-f2, .p-edge, .p-run) { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.hero__mark .p-spill { stroke: #ffab45; stroke-width: 16; opacity: 0; }
.hero__mark .p-warm { stroke: #ffb04c; stroke-width: 10; opacity: 0; }

.hero__mark .p-body { fill: url(#pBody); }
.hero__mark .p-wall { stroke: rgba(1, 8, 26, .46); stroke-width: 3.2; }
.hero__mark .p-in { stroke: url(#pIn); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hero__mark .p-hi { stroke: url(#pHi); stroke-width: 1.1; }
.hero__mark .p-hi2 { stroke: url(#pHi2); stroke-width: .9; }
.hero__mark .p-hi3 { stroke: url(#pHi3); stroke-width: 1.25; }
.hero__mark .p-hi4 { stroke: #fff; stroke-opacity: .1; stroke-width: 3.4; }
.hero__mark .p-hi5 { stroke: #fff4dc; stroke-opacity: .34; stroke-width: .7; }
.hero__mark .p-rim { stroke: url(#pLit); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }

.hero__mark .p-f1 { stroke: #ffa53a; stroke-width: 5.4; stroke-dasharray: 1; opacity: 0; }
.hero__mark .p-f2 { stroke: #ffd27e; stroke-width: 2; stroke-dasharray: 1; opacity: 0; }
.hero__mark .p-edge { stroke: #dccba6; stroke-opacity: .5; stroke-width: .4; stroke-dasharray: 1; }

@property --h { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero__mark .m-run { --h: 0; }
.hero__mark .p-run { fill: none; filter: none; opacity: 1; animation: none; stroke: var(--c); stroke-width: var(--w); stroke-opacity: var(--k, 1); stroke-linecap: butt; stroke-dasharray: var(--L) 2.4; stroke-dashoffset: calc(var(--L) - var(--f, 0) - var(--h)); }
.hero__mark .r-wire .p-run:last-child { stroke-linecap: round; }
@keyframes pheat { from { --h: 0; } to { --h: 1.9; } }
.js .hero__mark :is(.m-shade, .p-spill, .p-warm, .p-body, .p-wall, .p-in, .p-hi, .p-hi2, .p-hi3, .p-hi4, .p-hi5, .p-rim) { opacity: 0; }
.lit .hero__mark :is(.m-shade, .p-body, .p-wall, .p-in, .p-hi, .p-hi2, .p-hi3, .p-hi4, .p-hi5, .p-rim) { animation: pfade 1.8s var(--soft) .2s forwards; }
.lit .hero__mark .p-run { animation: none; }
.lit .hero__mark .m-run { animation: pheat 7.6s linear 2.4s infinite; }
.lit .hero__mark.away .m-run { animation-play-state: paused; }
@keyframes pfade { to { opacity: 1; } }
@keyframes prunb { 0% { stroke-dashoffset: var(--o0); opacity: 0; } 6% { opacity: 1; } 82% { opacity: 1; } 90%, 100% { stroke-dashoffset: var(--o1); opacity: 0; } }
@keyframes pfade13 { to { opacity: .13; } }
@keyframes pfade34 { to { opacity: .26; } }
@keyframes pdraw50 { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: .56; } 100% { stroke-dashoffset: 0; opacity: .56; } }
@keyframes pdraw85 { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

@media (max-width: 999px) { .hero__mark .m-glass, .hero__mark .m-shade, .hero__mark .m-run { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 74%); mask-image: linear-gradient(180deg, #000 50%, transparent 74%); } .hero__mark { opacity: .34; } }
.about .box svg.wm, .you .box svg.wm, .phero__mark { opacity: .075; }
.about .box svg.wm path, .you .box svg.wm path, .phero__mark path { stroke: #b4d8ff; }

.top { text-shadow: none; border-bottom: var(--edge-w) solid var(--bar-line); background: var(--bar); transition: background-color .4s var(--soft), border-color .4s var(--soft); }
.top.solid { text-shadow: none; background: var(--bar); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--bar-line); box-shadow: none; }
.top::after { bottom: calc(var(--edge-w) * -1); height: var(--edge-w); background: var(--metal-flat); }
.menu-open .top { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; text-shadow: none; }
.burger { margin-right: -4px; border-radius: 50%; background: var(--tint); box-shadow: var(--rim), var(--drop); }
.burger span { width: 18px; background: var(--ink); }
.nav .pill { color: var(--ink); background: transparent; box-shadow: var(--rim-gold), var(--drop); transition: background-color .3s, color .3s, translate .5s var(--out), box-shadow .5s var(--out); }
.nav .pill:hover { background: var(--metal-flat); color: var(--on-metal); translate: 0 -1px; box-shadow: var(--rim-gold), var(--drop-up); }
.nav .pill:active { translate: 0 1px; box-shadow: var(--rim-gold), var(--drop-dn); }
.nav .login { color: var(--ink-3); }
.nav .drop { background: var(--bar); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--rim), calc(var(--sx) * 1.4) calc(var(--sy) * 1.4) calc(var(--gap) * 2) calc(var(--gap) * -.4) rgba(var(--shade), .7); }
.nav .drop a:hover { background: var(--tint); }
.menu { background: var(--bar); -webkit-backdrop-filter: none; backdrop-filter: none; }

.desk__bar { background: var(--bar); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--rim), var(--cast);
  transition: transform .6s var(--out), translate .5s var(--out), box-shadow .5s var(--out), opacity .4s; }
.desk__bar:hover { translate: 0 -2px; box-shadow: var(--rim-gold), calc(var(--sx) * 2.1) calc(var(--sy) * 2.1) calc(var(--gap) * 3) calc(var(--gap) * -.5) rgba(var(--shade), .6); }
.desk__bar:active { translate: 0 1px; }
.desk__bar .up { color: var(--gold-hi); background: transparent; box-shadow: var(--rim-gold); transition: background-color .4s var(--soft), color .3s var(--soft), opacity .35s var(--soft); }
.desk__bar:hover .up { color: var(--on-metal); background: var(--metal-flat); }
.desk__bar .orb { box-shadow: var(--metal-edge), var(--drop); }
@media (min-width: 1000px) { .desk__bar { transition: transform .6s var(--out), translate .5s var(--out), box-shadow .5s var(--out), opacity .4s, width .7s var(--out), padding .7s var(--out); } }
.sheet-veil { background: rgba(2, 9, 26, .55); }
.sheet { background: linear-gradient(140deg, rgba(164, 208, 255, .12) 0%, rgba(164, 208, 255, 0) 44%), linear-gradient(180deg, rgba(14, 40, 88, .86), rgba(6, 18, 46, .92)); -webkit-backdrop-filter: saturate(150%) blur(22px); backdrop-filter: saturate(150%) blur(22px); box-shadow: var(--rim), calc(var(--sx) * 2) calc(var(--sy) * 2) calc(var(--gap) * 3) calc(var(--gap) * -.4) rgba(var(--shade), .75); }
.sheet__x { box-shadow: var(--rim); background: rgba(170, 212, 255, .08); }
.sheet__in input { background: rgba(3, 12, 32, .4); box-shadow: inset 0 0 0 1px rgba(156, 208, 255, .2), inset 2px 3px 7px -3px rgba(0, 5, 18, .62); }
.sheet__send { color: var(--on-metal); background: var(--metal); box-shadow: var(--metal-edge), var(--drop); }
.sheet__talk { background: rgba(170, 212, 255, .07); box-shadow: var(--rim); }
.sheet__talk:hover { background: rgba(214, 180, 115, .1); box-shadow: var(--rim-gold); }

@media (hover: hover) and (pointer: fine) {
  .plate::after, .about .box::after, .you .box::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(196, 228, 255, .1), transparent 62%); }
}
.next { background: linear-gradient(180deg, rgba(164, 208, 255, .06), transparent); }
.next:hover { background: linear-gradient(180deg, rgba(214, 180, 115, .12), transparent); }
.next .label { color: var(--ink-3); }
::selection { background: rgba(214, 180, 115, .4); }

@media (min-width: 1000px) {
  .index ol { gap: 14px; }

  .index a, .index li:nth-child(even) a { border-radius: 20px; padding-top: 14px; row-gap: 10px; }
  .index li:first-child a { padding-left: 22px; }
  .index a i { width: 26px; height: 26px; }
  .whofor__list { padding: 1px 28px 0; border-radius: 26px; }
  .beat__n span { width: 34px; height: 34px; margin-block: -7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sky i { transform: none !important; }
  .btn, .go, .index a, .desk__bar, .tag, .hear, .nav .pill { translate: none !important; }
  .js .lines .ln { clip-path: none !important; }
  .cyc.on .n { color: var(--gold-hi) !important; background: var(--disc) !important; box-shadow: var(--rim-gold) !important; }
  .hero__mark :is(.m-shade, .p-body, .p-wall, .p-in, .p-hi, .p-hi2, .p-hi3, .p-hi4, .p-hi5, .p-rim) { opacity: 1 !important; animation: none !important; }
  .hero__mark .p-run { display: inline; } .hero__mark .m-run { --h: .62; animation: none !important; }
}

@media (min-width: 1000px) and (max-height: 800px) {
  .index a, .index li:nth-child(even) a { padding-top: 10px; padding-bottom: 13px; row-gap: 5px; }
  .index a i { width: 24px; height: 24px; }
}

.hero__glow { display: none; }

.menu a.big, .point, .point:last-child, .point:nth-last-child(2), .points.six .point, .whofor__list li, .call .who, .day__h, .slot, .said, .system .aside, .ask, .terms, .foot, .foot .base, .aside-block .inner, .qa, .qa details, .next, .row, .row:first-child, .rows__note { border-width: var(--hair); }

.label::before { height: 0; background: none; opacity: 1; border-top: var(--hair) solid var(--gold); }

.rule, .beat__n::after { height: 0; background: none; border-top: var(--hair) solid var(--gold); border-image: linear-gradient(90deg, var(--gold), transparent) 1; }

.cyc::before, .steps::before, .steps .fill { width: 0; background: none; border-left: var(--hair) solid var(--line); }
.steps .fill { border-color: var(--gold); }
@media (min-width: 1000px) {
  .steps::before, .steps .fill { width: auto; height: 0; border-left: 0; border-top: var(--hair) solid var(--line); }
  .steps.tall::before, .steps.tall .fill { width: 0; height: auto; background: none; border-top: 0; border-left: var(--hair) solid var(--line); }
  .steps .fill, .steps.tall .fill { border-color: var(--gold); }
}
.cyc::after { opacity: 1; }

.cyc::before { border-left-width: 1px; }

.beat .turn { border-left-width: 2px; }

:is(.plate, .stage, .box, .way, .whofor__list, .sheet, .menu) .fine { text-shadow: none; }

.js .say .w { color: #6b8fb9; }
.say .w.g, .js .say .w.g { color: var(--gold-d); }
@keyframes wlitg { to { color: var(--gold-d); } }

.cyc.on h3, .mail a, .terms-line b { color: var(--gold-d); }

.brand svg path, .ring .hub path { stroke: var(--gold); }

::selection { background: var(--gold); color: #120e06; }

.plate { --pr: 26px; --pk: 10px; --pm: 12px; }
@media (min-width: 1000px) { .plate { --pr: 34px; --pk: 14px; --pm: 16px; } }
.plate .stage, .plate__side .have { border-radius: calc(var(--pr) - var(--pm)); }

@keyframes tapped { 40% { transform: scale(.94); } 100% { transform: none; background: var(--metal, linear-gradient(180deg, var(--gold-hi), var(--gold))); color: var(--on-metal, #120e06); box-shadow: var(--metal-edge, inset 0 0 0 var(--hair, .5px) rgba(255, 246, 214, .8)); } }

.plate::after, .about .box::after, .you .box::after { content: none; }

.about .box svg.wm path, .you .box svg.wm path { stroke: #3d7fe6; }

:root {
  --edge-w: 1px;
  --edge: inset 0 0 0 var(--edge-w) rgba(180, 218, 255, .46);
  --edge-gold: inset 0 0 0 var(--edge-w) rgba(230, 188, 92, .92);

  --metal-flat: #e6bc5c;
  --metal-hi: #f6ca55;
  --metal-lo: #d8ab48;
  --metal-run: linear-gradient(180deg, rgba(255, 228, 140, .36) 0%, rgba(255, 228, 140, 0) 46%, rgba(150, 96, 10, .24) 100%);
  --metal: var(--metal-run) var(--metal-flat);
  --metal-edge: inset 0 0 0 var(--edge-w) rgba(255, 246, 214, .8);
  --on-metal: #08152f;
  --disc: #0a2050;
  --disc-lit: #17408f;
  --tint: rgba(64, 132, 255, .1);
  --bar: #06152f;
  --bar-line: rgba(164, 210, 255, .3);
}

:is(.btn, .go, .index a, .tag, .chip, .cyc .n, .step .n, .beat__n span, .plate__n, .nav .pill, .burger, .nav .drop, .desk__bar, .way__i, .kinds .pair h3 svg, .qa summary i) { --rim: var(--edge); --rim-gold: var(--edge-gold); }

.orb { background: var(--metal); box-shadow: var(--metal-edge), var(--drop); }
.hear__ic { color: var(--on-metal); background: var(--metal); box-shadow: var(--metal-edge), var(--drop); }
.chip, .tag.ok { box-shadow: var(--drop); }

.plate .have svg, .way__i { color: var(--on-metal); background: var(--metal-flat); box-shadow: none; }
.way__i { box-shadow: var(--drop); }
.way:not(.first) .way__i, .kinds .pair h3 svg, .qa summary i { color: var(--gold-hi); background: var(--disc); box-shadow: var(--rim-gold), var(--drop); }
.qa details[open] summary i { background: var(--disc); }

.js.lit .desk__bar { transition-delay: 1.5s, 0s, 0s, 1.5s; }
@media (min-width: 1000px) {
  .js.lit .desk__bar { transition-delay: 1.5s, 0s, 0s, 1.5s, 0s, 0s; }

  .desk__bar b { white-space: nowrap; }
  .desk__bar .txt { flex: none; }
  .desk__bar .up { margin-left: auto; }
}

.tag { box-shadow: var(--rim), var(--drop-s); }
.tag.gold { background: #081a40; box-shadow: var(--rim-gold), var(--drop-s); }
.cyc .by .tag:hover, .beat .by .tag:hover { box-shadow: var(--rim-gold), var(--drop-s); }

.nav .pill, .nav .pill:hover { box-shadow: var(--rim-gold); }

.cyc .n, .step .n, .beat__n span { box-shadow: var(--rim-gold), var(--drop-s); }
.cyc.on .n { box-shadow: var(--rim-gold), var(--drop-s); }

.ring .hub { filter: none; }
.ring .comet { inset: calc(9.5% - .75px); background: conic-gradient(from 0deg, rgba(255, 232, 160, 0) 0 66%, rgba(255, 232, 160, .98) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.25px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.25px)); }

.top.solid { box-shadow: 0 16px 30px -18px rgba(var(--shade), .95); }

.serp__box { left: -4px; right: -4px; top: -4px; height: 158px; border-radius: 16px; }

.plate .stage { --rim: inset 0 0 0 1px rgba(180, 218, 255, .2); }

.sms u { color: var(--ink-3); }

@media (max-width: 719px) {
  main.home { display: flex; flex-direction: column; }
  main.home > #work { order: 1; }
  main.home > #who { order: 2; }

  main.home > #about { order: 3; }
  main.home > #need { order: 4; }
  main.home > #together { order: 5; }
  main.home > #what { order: 6; }
  main.home > #contact { order: 9; }
  main.home > #how, main.home > #stand { display: none; }

  main.home .label > i { display: none; }

  main.home #need .beat .stage { display: none; }

  main.home #together .grid, main.home #together .aside { display: none; }

  main.home .plate .body { display: none; }
  main.home .plate .plate__in > .stage { display: none; }

  main.home .plate__side .stage { min-height: 0; padding-bottom: 76px; }
  main.home .plate__side .said:not(.speaking) { display: none; }

  main.home .sec { padding-top: 68px; }
  main.home > #work { padding-top: 30px; }

  main.home > #together { display: none; }
  main.home #what .intro .lede { display: none; }

  main.home .plate__acts .btn { display: none; }
}

.whofor__nosite { margin-top: 10px; color: var(--ink); }

.about.owner .box { padding: 0; }
.owner__pic { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #071534; }
.owner__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 16%; }
.owner__tx { padding: 30px 22px 30px; }
.about.owner .h2 { margin-top: 20px; max-width: none; }
.about.owner .body { margin-top: 14px; max-width: 31em; }
.about.owner .h2 + .body { margin-top: 20px; }
.owner__sig { margin-top: 22px; font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.01em; color: var(--gold); }
.about.owner .go { margin-top: 22px; }
@media (min-width: 600px) and (max-width: 999px) {
  .owner__pic { aspect-ratio: 16 / 10; }
  .owner__pic img { object-position: 50% 30%; }
  .owner__tx { padding: 40px 38px 40px; }
}
@media (min-width: 1000px) {
  .about.owner .box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; align-items: stretch; }
  .owner__pic { aspect-ratio: auto; min-height: 100%; }
  .owner__pic img { object-position: 58% 26%; }
  .owner__tx { padding: clamp(52px, 5vw, 72px); padding-bottom: clamp(48px, 4.6vw, 66px); }
  .about.owner .h2 { margin-top: 26px; font-size: clamp(38px, 3.3vw, 46px); line-height: 1.05; }
  .about.owner .h2 + .body { margin-top: 28px; }
  .about.owner .body { margin-top: 16px; }
  .owner__sig { margin-top: 28px; font-size: 42px; }
  .about.owner .go { margin-top: 28px; }
}

.vw-fab, .vw-bubble { display: none !important; }
.vw-panel {
  --ink: #f5f9ff; --grey: #b4d2f3; --pink: var(--gold); --pink-soft: rgba(230, 188, 92, .2);
  z-index: 80; right: 24px; bottom: 24px; width: 380px; border-radius: 24px;
  background: var(--bar); color: var(--ink); font-family: var(--sans); box-shadow: var(--rim), var(--cast);
}
.vw-head { background: transparent; color: var(--ink); padding: 16px 20px 14px; border-bottom: var(--hair) solid var(--line); font-size: 15px; letter-spacing: .01em; }
.vw-head button { color: var(--ink-2); width: 44px; height: 44px; margin: -12px -12px -12px 0; }
.vw-body { padding: 26px 22px 22px; }
.vw-face { box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px rgba(230, 188, 92, .14); }
.vw-panel.typing .vw-face { box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px rgba(230, 188, 92, .14); }
.vw-name { font-weight: 500; letter-spacing: -.01em; }
.vw-sub { color: var(--ink-2); font-size: 14.5px; }
.vw-go, .vw-lead button { font-family: var(--sans); color: var(--on-metal); background: var(--metal-flat); box-shadow: var(--drop-s); }
.vw-go.end { background: var(--pane-lit); color: var(--ink); box-shadow: var(--rim); }
.vw-state, .vw-lead-n { color: var(--ink-3); }
.vw-msg { background: var(--pane-lit); color: var(--ink); font-size: 14.5px; }
.vw-msg.you { background: rgba(180, 218, 255, .14); color: var(--ink); }
.vw-type input, .vw-lead input { font-family: var(--sans); color: var(--ink); background: rgba(2, 8, 21, .45); border: 0; box-shadow: var(--rim); }
.vw-type input::placeholder, .vw-lead input::placeholder { color: var(--ink-3); }
.vw-type input:focus, .vw-lead input:focus { outline: none; box-shadow: var(--rim-gold); }
.vw-type button { color: var(--on-metal); background: var(--metal-flat); }
.vw-lead { border-top: var(--hair) solid var(--line); }
.vw-lead-p { color: var(--ink-2); }
@media (max-width: 520px) { .vw-panel { right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)); } }

:root {
  --navy: #0f2540;
  --navy-hi: #1b3658;
  --navy-lo: #0a1b30;
  --steel: #8fb0c9;
  --ink: #0f2540;
  --ink-2: #4a5560;
  --ink-3: #6b7378;
  --gold: #0f2540; --gold-hi: #0f2540; --gold-lo: #0f2540; --gold-ink: #0f2540; --gold-d: #0f2540;
  --line: rgba(15, 37, 64, .12);
  --line-2: rgba(15, 37, 64, .12);
  --line-gold: rgba(15, 37, 64, .5);
  --ok: #2f8f5b;
  --shade: 15, 37, 64;
  --ts-d: none; --ts: none; --ts-s: none;
  --cast: 0 1px 2px rgba(15, 37, 64, .05), 0 22px 44px -26px rgba(15, 37, 64, .28);
  --drop: 0 1px 2px rgba(15, 37, 64, .06), 0 8px 18px -10px rgba(15, 37, 64, .3);
  --drop-up: 0 2px 4px rgba(15, 37, 64, .06), 0 16px 28px -12px rgba(15, 37, 64, .32);
  --drop-s: 0 1px 2px rgba(15, 37, 64, .08);
  --drop-dn: 0 1px 1px rgba(15, 37, 64, .1);
  --glass: linear-gradient(#ffffff, #ffffff);
  --glass-dense: var(--glass);
  --glass-solid: linear-gradient(#ffffff, #ffffff);
  --glass-gold: var(--glass);
  --pane: rgba(15, 37, 64, .045);
  --pane-lit: #e7eef5;
  --rim: inset 0 0 0 1px rgba(15, 37, 64, .1);
  --rim-gold: inset 0 0 0 1px rgba(15, 37, 64, .45);
  --edge: inset 0 0 0 1px rgba(15, 37, 64, .14);
  --edge-gold: inset 0 0 0 1px rgba(15, 37, 64, .55);
  --metal-flat: #0f2540; --metal-hi: #1b3658; --metal-lo: #0a1b30;
  --metal-run: linear-gradient(transparent, transparent);
  --metal: #0f2540;
  --metal-edge: inset 0 0 0 1px rgba(15, 37, 64, 1);
  --on-metal: #ffffff;
  --disc: #ffffff;
  --disc-lit: #ffffff;
  --tint: rgba(255, 255, 255, .75);
  --bar: #ffffff;
  --bar-line: rgba(15, 37, 64, .1);
}
.plate, .stage, .about .box, .you .box, .way, .whofor__list, .sheet, .menu, .top, .desk__bar, .index a {
  --drop: 0 1px 2px rgba(15, 37, 64, .06), 0 6px 14px -8px rgba(15, 37, 64, .28);
  --drop-up: 0 2px 4px rgba(15, 37, 64, .06), 0 12px 22px -10px rgba(15, 37, 64, .3);
  --drop-dn: 0 1px 1px rgba(15, 37, 64, .1);
}

html { background: #f1f1f1; }
.sky { background: #f1f1f1; }
.sky i { background: linear-gradient(90deg, #e5e5e5 0%, #eeeeee 16%, #f4f4f4 32%, #f6f6f6 48%, #f3f3f4 70%, #ebebec 100%) !important; }
main, .foot, .h1, .h2, .h3, .say, .fine, .foot .cols, .foot .base { text-shadow: none !important; }
::selection { background: var(--navy); color: #fff; }

.h1, .h2, .h3, .say { color: var(--navy); }
.h1 em, .h2 em, .h3 em, .say em { color: inherit; font-weight: inherit; background: none !important; -webkit-text-fill-color: currentColor; filter: none !important; }
.body, .lede, p { color: var(--ink-2); }
.label { color: var(--navy); }
.label::before { border-top-color: var(--steel) !important; border-top-width: 2px !important; }
.rule, .beat__n::after { border-top: 2px solid var(--steel) !important; border-image: none !important; }
.js .say .w { color: rgba(15, 37, 64, .22); }
.say .w.g, .js .say .w.g { color: var(--navy); }
@keyframes wlitg { to { color: var(--navy); } }
@keyframes wlit { to { color: var(--navy); } }
.brand svg path { stroke: #c9a666 !important; }
.ring .hub path { stroke: var(--navy); }
.owner__sig { color: var(--navy); }

.btn { height: 58px; padding: 0 26px 0 28px; gap: 14px; border-radius: 3px; color: #fff; background: var(--navy); box-shadow: 0 10px 24px -14px rgba(15, 37, 64, .55); }
.btn .arr { width: auto; height: auto; color: #fff; background: none !important; }
.btn:hover { background-color: var(--navy-hi); background: var(--navy-hi); box-shadow: 0 16px 30px -14px rgba(15, 37, 64, .55); }
.btn:hover .arr, .plate__acts .btn:hover .arr { color: #fff; background: none; }
.btn:active { background: var(--navy-lo); }
.btn:active .arr, .plate__acts .btn:active .arr { color: #fff; background: none; }
.btn .arr.dn svg, .btn .arr svg { width: 16px; height: 16px; }
.btn:focus-visible, .go:not(.ring):focus-visible, .index a:focus-visible, .desk__bar:focus-visible, .nav .pill:focus-visible { outline-color: var(--steel); border-radius: 4px; }
.btn.ghost { color: var(--navy); background: transparent; box-shadow: inset 0 0 0 1px var(--navy); }
.btn.ghost .arr { color: var(--navy); box-shadow: none; }
.btn.ghost:hover { background: var(--navy); color: #fff; }
.btn.ghost:hover .arr { color: #fff; background: none; }

.go:not(.ring) { color: var(--navy); background: transparent; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .22); }
.go:not(.ring) .arr { color: var(--navy); box-shadow: none; }
.go:not(.ring):hover, .demo:hover .go { box-shadow: inset 0 0 0 1px var(--navy); }
.go:not(.ring):hover .arr, .demo:hover .go .arr { color: #fff; background: var(--navy); box-shadow: none; }
.go:not(.ring):active, .demo:active .go { box-shadow: inset 0 0 0 1px var(--navy); }

.plate::before, .beat .stage::before, .phero__pic .stage::before, .about .box::before, .you .box::before, div.way::before, .whofor__list::before {
  box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .08); -webkit-mask: none; mask: none;
}
.plate, .about .box, .you .box, div.way, .whofor__list, .beat .stage, .phero__pic .stage { box-shadow: var(--cast); }
.stage, .plate .stage { background: #f6f7f9; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .07); }
.stage .note { color: var(--ink-3); }
.plate .turn, .beat .turn { border-left-color: var(--steel); }
.twoways .way.first::before { box-shadow: inset 0 0 0 1px var(--navy); }
.way__i, .plate .have svg { color: #fff; background: var(--navy); }
.way:not(.first) .way__i, .kinds .pair h3 svg, .qa summary i { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .3); }
.plate .have { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .3); }

.tag { color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .14); }
.tag.gold { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .4); }
.tag.ok { color: #fff; background: var(--ok); }
.tag svg { background: rgba(15, 37, 64, .08); }
.tag.ok svg { background: rgba(255, 255, 255, .2); }
.cyc .by .tag:hover, .beat .by .tag:hover { color: #fff; background: var(--navy); }
.cyc .n, .step .n, .beat__n span { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .35); }
.cyc.on .n { color: #fff; background: var(--navy); }
.cyc.on h3 { color: var(--navy); }
.chip, .tag.ok { box-shadow: none; }
.cyc::before, .steps::before { border-color: rgba(15, 37, 64, .16) !important; }
.steps .fill { border-color: var(--steel) !important; }

.ph { background: #fff; box-shadow: 0 0 0 6px #f4f5f7, 0 0 0 7px #d3d7dc, 0 30px 50px -28px rgba(15, 37, 64, .45); }
.demo:hover .ph, .row:hover .ph { box-shadow: 0 0 0 6px #f4f5f7, 0 0 0 7px var(--navy), 0 40px 60px -28px rgba(15, 37, 64, .5); }
.bub.v, .sms, .job, .serp__bar, .srow { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .1), 0 1px 2px rgba(15, 37, 64, .05); }
.bub.a, .newrev, .srow.you { background: var(--pane-lit); box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .35), 0 4px 10px -6px rgba(15, 37, 64, .3); }
.sms u { color: var(--navy); }
.serp__bar span, .srow b { background: rgba(15, 37, 64, .1); }
.srow i { background: rgba(15, 37, 64, .16); }
.srow .st svg, .stars svg { fill: rgba(15, 37, 64, .2); }
.serp__box { box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .45); }
.srow em { color: #fff; background: var(--navy); box-shadow: none; }
.room { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .12); }
.shop.b .room { background: var(--pane-lit); box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .35); }
.room .seat { border-color: rgba(15, 37, 64, .2); }
.shop.b .room .counter { background: var(--navy); }
.room .door { background: rgba(15, 37, 64, .16); }
.room .guest { box-shadow: 0 0 0 4px rgba(143, 176, 201, .35); }
.hear { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .3), var(--drop); }
.hear:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy), var(--drop-up); }
.hear__ic { color: #fff; background: var(--navy); box-shadow: none; }
.hear__bar { background: rgba(15, 37, 64, .1); }
.call .modes .on { color: #fff; background: var(--navy); box-shadow: none; }
.call .modes span { color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .16); }
.orb, .desk__bar .orb { background: var(--navy); box-shadow: none; }
.tick .box { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .25); }
.tick input:checked + .box { background: var(--navy); box-shadow: none; }
.field input, .field textarea { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .18); }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .35); }
.field input:focus, .field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--navy), 0 0 0 4px rgba(143, 176, 201, .3); }

.ring .track circle, .ring .track .way path { stroke: var(--navy); }
.ring .track circle.in { stroke: rgba(15, 37, 64, .12); }
.node::before { background: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
.node::after { background: var(--navy); }
.ring .comet { background: conic-gradient(from 0deg, rgba(143, 176, 201, 0) 0 66%, rgba(143, 176, 201, 1) 100%); }
.ring .head::after { background: var(--steel); }
.node span { color: var(--ink-2); }

.top { background: transparent; border-bottom-color: transparent; }
.top.solid { background: rgba(243, 243, 243, .9); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border-color: rgba(15, 37, 64, .08); box-shadow: none; }
.top::after { background: var(--steel); }
.nav a, .nav button { color: #1d2733; }
.nav .login { color: #1d2733; }
.nav .pill { color: #fff; background: var(--navy); border-radius: 3px; box-shadow: none; }
.nav .pill:hover { color: #fff; background: var(--navy-hi); box-shadow: none; }
.nav .drop { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .08), 0 24px 40px -20px rgba(15, 37, 64, .3); }
.nav .drop a:hover { background: #f4f5f7; }
.burger { background: transparent; box-shadow: none; }
.burger span { background: var(--navy); }
.menu { background: #f4f4f4; }

.desk__bar { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .08), 0 18px 36px -18px rgba(15, 37, 64, .35); }
.desk__bar:hover { box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .2), 0 22px 40px -18px rgba(15, 37, 64, .4); }
.desk__bar .up { color: var(--navy); box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .3); }
.desk__bar:hover .up { color: #fff; background: var(--navy); }
.sheet-veil { background: rgba(15, 37, 64, .25); }
.sheet { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 60px -20px rgba(15, 37, 64, .35); }
.sheet__x, .sheet__talk { background: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .1); }
.sheet__in input { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .18); }
.next { background: transparent; }
.next:hover { background: rgba(255, 255, 255, .6); }
.vw-panel { --ink: #0f2540; --grey: #6b7378; --pink: #0f2540; --pink-soft: rgba(143, 176, 201, .3); background: #fff; color: #0f2540; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .08), 0 30px 60px -20px rgba(15, 37, 64, .35); }
.vw-head { color: #0f2540; }
.vw-face { box-shadow: 0 0 0 1px var(--navy), 0 0 0 7px rgba(143, 176, 201, .25); }
.vw-msg { background: #e7eef5; color: #0f2540; }
.vw-msg.you { background: #f4f5f7; }
.vw-type input, .vw-lead input { color: #0f2540; background: #fff; }
.vw-go.end { background: #f4f5f7; color: #0f2540; }

.owner__pic { background: #e9ebee; }
.about .box svg.wm, .you .box svg.wm, .phero__mark { opacity: .05; }
.about .box svg.wm path, .you .box svg.wm path, .phero__mark path { stroke: var(--navy); }

.hero--clean { min-height: 100svh; padding-top: calc(var(--top-h) + 10px); overflow: visible; overflow-x: clip; }
.hero--clean::before { content: none; }
.hero--clean .hero__grid { flex: 1; display: grid; align-content: center; }
.hero--clean .h1 { margin-top: 26px; font-size: clamp(40px, 10.6vw, 92px); line-height: 1.04; letter-spacing: -.042em; font-weight: 300; text-wrap: balance; }
.hero__rule { width: 70px; height: 3px; background: var(--steel); margin: 34px 0 28px; }
.hero--clean .lede { margin-top: 0; max-width: 30em; font-size: 17px; line-height: 1.65; color: #6b7378; }
.hero--clean .acts { margin-top: 34px; }
.hero__stage { display: grid; place-items: center; padding: 50px 0 calc(var(--desk-h) + 60px); }
.hero__phone { width: 250px; aspect-ratio: 390 / 800; border-radius: 40px; padding: 9px; background: linear-gradient(145deg, #fbfbfb, #d6d8db); box-shadow: inset 0 0 0 1px #cdd0d4; filter: drop-shadow(0 30px 34px rgba(15, 37, 64, .22)) drop-shadow(0 8px 12px rgba(15, 37, 64, .14)); }
.hero__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
@media (min-width: 1000px) {
  .hero--clean .hero__grid { grid-template-columns: 1.25fr .75fr; align-items: center; }
  .hero--clean .h1 { margin-top: 0; font-size: clamp(54px, 4.9vw, 82px); letter-spacing: -.046em; line-height: 1.02; max-width: 11.5em; }
  .hero__stage { padding: 0; }
  .hero__phone { width: min(300px, 26vw); }
}

@keyframes stepback { to { transform: scale(.955); } }
@keyframes focus { 0%, 100% { transform: scale(.93); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }

main .label { display: none; }
main .plate__top .label { display: flex; }

.label i, .plate__n, .node span i { display: none; }
.point::before { content: none; }
.cyc .n, .step .n, .beat__n span { width: 11px; height: 11px; padding: 0; font-size: 0; color: transparent; background: var(--navy); box-shadow: none; }
.cyc.on .n { background: var(--steel); }
.step .n { top: 8px; left: 8px; }

.h1 em, .h2 em, .h3 em, .say em, .say .w.g, .js .say .w.g { font-weight: inherit; }

.h2, .say, .ask .say { font-size: 34px; line-height: 1.08; letter-spacing: -.035em; }
.plate h3, .beat .h3, .whofor .h3 { font-size: 26px; line-height: 1.12; letter-spacing: -.03em; }
.point h3, .step :is(h2, h3), .cyc h3 { font-size: 21px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; }
.plate p.body, .plate .turn, .beat .body, .beat .turn, .step p, .point p, .about .body, .you .body, .body, .cyc p { font-size: 17px; line-height: 1.6; }
.lede, .money .intro .lede, .ask .lede { font-size: 18px; line-height: 1.55; }
.close .h1 { font-size: 40px; }
@media (min-width: 1000px) {
  .h2, .say, .ask .say { font-size: 52px; line-height: 1.05; letter-spacing: -.042em; }
  .plate h3, .beat .h3, .whofor .h3 { font-size: 34px; line-height: 1.08; letter-spacing: -.035em; }
  .point h3, .step :is(h2, h3), .cyc h3 { font-size: 24px; font-weight: 400; letter-spacing: -.022em; }
  .plate p.body, .plate .turn, .beat .body, .beat .turn, .step p, .point p, .about .body, .you .body, .body, .cyc p { font-size: 18px; line-height: 1.6; }
  .lede, .money .intro .lede, .ask .lede { font-size: 20px; }
  .close .h1 { font-size: 60px; }
}
.hero--clean .lede { font-size: 17px; }
.whofor .h3 { font-weight: 300; }
.about.owner .h2 { font-size: 34px; line-height: 1.08; }
@media (min-width: 1000px) { .about.owner .h2 { font-size: 34px; } }

.js .say .w.g { color: rgba(15, 37, 64, .22); }

main.home > * { order: 0 !important; }
main.home > section { display: block; }
.glance .index { margin-top: 34px; padding-top: 0; }
.glance .index ol { border-top: 0; gap: 10px; }
.glance .go { margin-top: 26px; }
@media (min-width: 1000px) { .glance .index ol { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.glance .index a i { display: none; }
.glance .index.three a, .glance .index.three li:nth-child(even) a { grid-template-columns: 1fr auto; padding: 14px 10px 14px 20px; min-height: 64px; align-items: center; }

.hero__phone, .ph {
  position: relative; aspect-ratio: 390 / 844; padding: 9px; border-radius: 48px;
  background: #0c0e11; filter: none;
  box-shadow: inset 0 0 0 1px #3b4048, 0 0 0 1.5px #b9bec5, 0 0 0 2.5px #e3e5e8, 0 40px 70px -34px rgba(15, 37, 64, .5);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 92%); mask-image: linear-gradient(180deg, #000 62%, transparent 92%);
}
.hero__phone::before, .ph::before { content: ""; position: absolute; z-index: 2; top: 19px; left: 50%; width: 31%; height: 24px; margin-left: -15.5%; border-radius: 14px; background: #000; }
.hero__phone img, .ph img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 39px; }
.hero__phone { width: min(310px, calc((100svh - 220px) * .462)); }
.hero__stage { padding-bottom: 20px; }
@media (min-width: 1000px) { .hero__phone { width: min(330px, calc((100svh - 200px) * .462), 26vw); } }
.ph { width: 100%; padding: 6px; border-radius: 30px; }
.ph::before { top: 11px; height: 14px; border-radius: 8px; }
.ph img { border-radius: 25px; }
.demo .ph { width: calc(var(--ph-h) * .462); }
.demo:hover .ph, .row:hover .ph { box-shadow: inset 0 0 0 1px #3b4048, 0 0 0 1.5px var(--navy), 0 0 0 2.5px #e3e5e8, 0 46px 70px -30px rgba(15, 37, 64, .55); }
@keyframes focus { 0%, 100% { transform: scale(.93); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }

.desk__bar { gap: 14px; padding-left: 9px; }
.desk__bar .orb { width: 40px; height: 40px; background: url(assets/owner/volkan-520.jpg) 50% 20% / cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 37, 64, .14); }
html.in-hero .desk__bar, html.in-hero.js.lit .desk__bar { transform: translateY(140%) !important; opacity: 0 !important; pointer-events: none; transition-delay: 0s !important; }

.hero__phone, .ph { background: linear-gradient(#edf2f8, #edf2f8) content-box, #0c0e11; }
.hero__phone img { height: calc(100% - 38px); margin-top: 38px; border-radius: 0 0 39px 39px; }
.hero__phone::after { content: "9:41"; position: absolute; z-index: 2; top: 21px; left: 15%; font: 600 13px/20px var(--sans); letter-spacing: -.01em; color: #0c0e11; }
.ph img { height: calc(100% - 22px); margin-top: 22px; border-radius: 0 0 25px 25px; }
.ph::after { content: "9:41"; position: absolute; z-index: 2; top: 10px; left: 14%; font: 600 8px/16px var(--sans); color: #0c0e11; }

.demo:nth-child(even) { margin-top: 0; }
.demo .name { font-size: 17px; line-height: 1.3; min-height: 2.6em; }
.demo .kind { margin-top: 22px; font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3); }
.demo .go { margin-top: 10px; align-self: flex-start; }

@media (min-width: 1000px) {
  .plate__in { min-height: 0; }
  .plate h3 { margin-top: 28px; padding-top: 0; }
  .plate__txt { padding: 40px 32px 40px 50px; }
}

:root { --cast: 0 0 0 0 transparent; --drop: 0 0 0 0 transparent; --drop-up: 0 0 0 0 transparent; --drop-s: 0 0 0 0 transparent; --drop-dn: 0 0 0 0 transparent; }
.plate, .about .box, .you .box, div.way, .whofor__list, .beat .stage, .phero__pic .stage, .index a, .glance .index a { border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .09); }
.plate::before, .about .box::before, .you .box::before, div.way::before, .whofor__list::before, .beat .stage::before { border-radius: 20px; }
.btn, .btn:hover { box-shadow: none; }
.go:not(.ring), .demo .go { border-radius: 3px; }
.go:not(.ring) .arr, .index a .arr { width: auto; height: auto; box-shadow: none !important; background: none !important; color: var(--navy) !important; }
.go:not(.ring):hover .arr, .demo:hover .go .arr { background: none; color: var(--navy); }
.go:not(.ring):hover, .demo:hover .go, .index a:hover { translate: none; background: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
.demo:hover .ph, .demo .ph:hover { transform: none; }
.demo:hover .ph img { transform: none; }
.index a:hover { translate: none; }
@media (min-width: 1000px) { .owner__tx { border-radius: 0 20px 20px 0; } }

.nav > a:not(.pill):not(.login), .nav .login { position: relative; }
.nav > a:not(.pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--out); }
.nav > a:not(.pill):hover::after { transform: scaleX(1); }

.demo .kind { display: none; }
.plate__top .label, .plate__top .label .sys { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-3); }
.plate__top .label .sys { display: block; font-weight: 400; }
.plate__top .label .sys::before { content: none; }
.foot .fh, .menu .grp { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--navy); font-weight: 500; }
.menu a.big i { display: none; }

.foot .base .stamp { display: none; }

.top::after { display: none; }

.about .box svg.wm, .you .box svg.wm { display: none; }

.plates.stack .plate, .plates.stack.glass .plate { position: relative !important; top: auto !important; animation: none !important; clip-path: none !important; }
.plates.stack.glass .plate .plate__in, .plates.stack.glass .plate .plate__in > *, .plates.stack .plate .plate__in { animation: none !important; transform: none !important; overflow: visible !important; }
.plates { display: grid; gap: 24px; }
@media (min-width: 1000px) { .plate__side { justify-content: center; } .plate__side .stage { margin-block: auto; } }

.cyc .n { margin-left: 11px; margin-top: 8px; }
@media (min-width: 1000px) { .cyc .n { margin-left: 15px; margin-top: 10px; } }
.cyc::after { content: none; }

.long .wrap > .h2 { margin-bottom: 56px; }
.steps.tall .step :is(h2, h3) { font-size: 24px; }
@media (min-width: 1000px) { .steps.tall .step :is(h2, h3) { font-size: 30px; } .long .wrap > .h2 { margin-bottom: 72px; } }
.steps.tall .step .n { width: 11px; height: 11px; }
@media (min-width: 1000px) { .steps.tall .step .n { left: 16px; top: 12px; } }

@media (max-width: 999px) { .point { grid-template-columns: 1fr; row-gap: 6px; } }

main .asks .label { display: block; font-size: 34px; font-weight: 300; letter-spacing: -.035em; line-height: 1.08; text-transform: none; color: var(--navy); }
main .asks .label::before { content: none; }
@media (min-width: 1000px) { .asks .wrap { grid-template-columns: 340px minmax(0, 820px); column-gap: 60px; } main .asks .label { font-size: 52px; letter-spacing: -.042em; } }

@media (min-width: 1000px) { .whofor .wrap { align-items: start; } .whofor__tx { padding-top: 0; margin-top: 0; } }

@media (min-width: 1000px) { .hero__stage { justify-items: end; } }

main .sec, main section.whofor, main .system, main section.long { padding-top: 72px; padding-bottom: 0; }
@media (min-width: 1000px) { main .sec, main section.whofor, main .system, main section.long { padding-top: 120px; } }
main > section:last-of-type { padding-bottom: 120px; }
.hero__stage { padding-bottom: 0; }

.foot p { text-wrap: pretty; }
.foot a { white-space: nowrap; }
.foot .cols { column-gap: 40px; }
.plates.stack { grid-auto-rows: auto; }

.point { grid-template-columns: 1fr; }
.point p { grid-column: 1; }

@media (min-width: 1000px) { .plate__side .stage { margin-top: 16px; padding-top: 30px; padding-bottom: 62px; } }

.btn:hover, .demo:hover .ph, .demo:hover .go, .plate:hover, .index a:hover, .desk__bar:hover, .tag:hover, .cyc .by .tag:hover, .beat .by .tag:hover { translate: none !important; }
.demo:hover .ph { transform: none !important; }

.plate__top .label, .plate__top .label .sys { font-size: 14px; }
.work .after .fine, .demo + .fine, main .fine { font-size: 15px; }

@media (min-width: 1000px) { .hero--clean { min-height: 0; padding-bottom: 64px; } .hero--clean .hero__grid { padding-top: 56px; } }

@media (max-width: 719px) { main.home > #work { padding-top: 72px; } main.home > #what { padding-top: 48px; } }

main .close { min-height: 0; padding-bottom: 120px; }

@media (min-width: 1000px) { .foot .cols { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 0; } }

.system .aside { border-top: 0; padding-top: 0; margin-top: 14px; }

.menu .grp { display: none; }
.menu__ask { display: none; }
@media (max-width: 999px) { .menu__ask { display: inline-flex; margin: 28px 0 8px; align-self: flex-start; } }

.vw-go { border-radius: 3px; }

.brand svg path, .foot .brand svg path { stroke: var(--navy) !important; }

.hero__hear { margin-top: 22px; max-width: 330px; }
.hero__hear .hear { padding: 6px 18px 6px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .14); }
.hero__hear .hear:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
.hero__hear .hear__ic { width: 40px; height: 40px; color: #fff; background: var(--navy); box-shadow: none; }
.hero__hear .hear__tx b { font-size: 15px; color: var(--navy); }
.hero__hear .hear__tx small { font-size: 13.5px; color: var(--ink-3); }
.hero__hear audio { display: none; }

.beat { grid-template-columns: 1fr !important; }
.beat__txt { max-width: 34em; }
@media (min-width: 1000px) { .beats { grid-template-columns: 1fr 1fr; column-gap: 80px; margin-top: 64px; } .beat:nth-child(even) .beat__txt { margin-left: 0; } }
.beats, .beat { align-items: start !important; }

.go:not(.ring), .go:not(.ring):hover, .demo .go, .demo:hover .go { height: auto; padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; gap: 8px; color: var(--navy); font-weight: 500; }
.go:not(.ring) span.t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat !important; padding-bottom: 2px; transition: background-size .4s var(--out); }
.go:not(.ring):hover span.t { background-size: 100% 1px !important; }
.go:not(.ring) .arr svg { transition: transform .4s var(--out); }
.go:not(.ring):hover .arr svg { transform: translateX(3px); }
.demo .go { display: none; }
.demo .name { transition: color .3s; }
.demo:hover .name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.glance .index ol { gap: 0 !important; border-top: 1px solid rgba(15, 37, 64, .12); }
.glance .index li { border-bottom: 1px solid rgba(15, 37, 64, .12) !important; }
.glance .index a, .glance .index a:hover { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 20px 0 !important; }
.glance .index a:hover .res { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (min-width: 1000px) { .glance .index ol { grid-template-columns: repeat(3, 1fr); column-gap: 40px !important; border-top: 0; } .glance .index li { border-top: 1px solid rgba(15, 37, 64, .12); } }

.cyc .by .tag, .beat .by .tag, .tag.gold { padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; color: var(--navy); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); }
.cyc .by .tag:hover, .beat .by .tag:hover { color: var(--navy); background: none !important; text-decoration-color: var(--navy); }

.nav .pill { transition: opacity .35s var(--soft), visibility 0s .35s; }
html.in-hero .nav .pill { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.in-hero) .nav .pill { transition-delay: 0s; }
.hero__hear { margin-top: 20px; max-width: none; }
.hero__hear .hear, .hero__hear .hear:hover { width: auto; display: inline-flex; gap: 10px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hero__hear .hear__ic { width: 26px; height: 26px; color: var(--navy); background: none; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .35); }
.hero__hear .hear__ic svg { width: 10px; height: 10px; }
.hero__hear .hear__tx { display: flex; align-items: baseline; gap: 8px; }
.hero__hear .hear__tx b { font-size: 15px; font-weight: 500; color: var(--navy); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--out); }
.hero__hear .hear:hover .hear__tx b { background-size: 100% 1px; }
.hero__hear .hear__tx small { font-size: 14px; color: var(--ink-3); }
@media (max-width: 599px) {
  .hero__hear .hear { align-items: center; text-align: left; }
  .hero__hear .hear__tx { display: block; }
  .hero__hear .hear__tx b, .hero__hear .hear__tx small { display: block; white-space: nowrap; }
  .hero__hear .hear__tx small { margin-top: 1px; }
}

.desk__bar .orb { background: url(assets/assistant-mark.svg) center / cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 37, 64, .14); }
.vw-face { background: #0f2540; }

.phero__mark { display: none; }
.row .kind i, .joins .index.others a i, .index a i { display: none; }
.joins .index.others a { grid-template-columns: 1fr auto !important; }

.nav .pill, .nav .pill:hover, .nav .pill[aria-current], .nav a.pill[aria-current="page"] { color: #fff !important; }
html.in-hero .nav .pill { opacity: 1; visibility: visible; pointer-events: auto; }
html.in-hero:has(.hero--clean) .nav .pill { opacity: 0; visibility: hidden; pointer-events: none; }

.go:not(.ring) span.t { background-image: linear-gradient(rgba(15, 37, 64, .3), rgba(15, 37, 64, .3)), linear-gradient(currentColor, currentColor) !important; background-size: 100% 1px, 0 1px !important; background-position: 0 100%, 0 100% !important; background-repeat: no-repeat !important; }
.go:not(.ring):hover span.t { background-size: 100% 1px, 100% 1px !important; }
.mail a, .mail a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); }
.mail a:hover { text-decoration-color: var(--navy); }

.joins .index.others ol { gap: 0 !important; border-top: 1px solid rgba(15, 37, 64, .12); }
.joins .index.others li { border-bottom: 1px solid rgba(15, 37, 64, .12) !important; }
.joins .index.others a, .joins .index.others a:hover { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 18px 0 !important; min-height: 0; }
.joins .index.others a:hover .res { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.row .kind { display: none; }
.mail small { display: none; }
.call .said .by, .said .by, .call .who .lab { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; }

main .way .label.bare { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.02em; text-transform: none; color: var(--navy); margin-bottom: 12px; }
main .way .label.bare::before { content: none; }

.phero .h1 { font-size: clamp(40px, 10.6vw, 52px); line-height: 1.04; letter-spacing: -.042em; font-weight: 300; max-width: 14em; }
@media (min-width: 1000px) { .phero .h1 { font-size: clamp(54px, 4.9vw, 72px); max-width: 15em; } .phero__txt { max-width: 760px; } }
main p:not(.fine):not(.mail):not(.say):not(.owner__sig) { font-size: 17px; }
@media (min-width: 1000px) { main p:not(.fine):not(.mail):not(.say):not(.owner__sig) { font-size: 18px; } main .lede { font-size: 20px; } }
main .stage p, main .ph p, main .scene p, main .stage .q, main .sms, main .shop__l, main .way p.body { font-size: inherit; }
main .fine, main .rows__note, main .stage .note { font-size: 15px; }

.phero__pic .stage { display: grid; place-items: center; min-height: 0 !important; padding: 40px 30px; }
@media (min-width: 1000px) { .phero__pic .stage { min-height: 380px !important; } }

@media (min-width: 1000px) { .steps:not(.tall) .step :is(h2, h3), .points .point h3 { min-height: 2.4em; } }

:root { --line-gold: rgba(15, 37, 64, .12); }
.aside-block .inner, .terms, .next { border-color: rgba(15, 37, 64, .12) !important; }

@media (min-width: 1000px) { .about .box:not(.owner .box), .you .box { padding: 56px 48px; align-items: start; } }

@media (min-width: 1000px) {
  .row { grid-template-columns: 260px 1fr; align-items: center; column-gap: 64px; padding: 40px 0; }
  .row .ph { width: 240px !important; justify-self: start; }
}
.row:hover .ph, .row .ph:hover, .row:hover .ph img { transform: none !important; translate: none !important; }
.rows__note { max-width: none; }

.btn, .btn:hover, .btn:active { transform: none !important; translate: none !important; scale: 1 !important; }

main .close { padding-bottom: 96px; }
.foot { margin-top: 0 !important; padding-bottom: 110px; }
@media (min-width: 1000px) { .foot .cols { grid-template-columns: repeat(4, 1fr) !important; column-gap: 40px !important; justify-content: stretch; } }

.twoways .way.first::before, .twoways .way::before { box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .09) !important; }
.way__i, .way:not(.first) .way__i { display: none; }
main p.owner__sig { font-size: 34px; }
@media (min-width: 1000px) { main p.owner__sig { font-size: 42px; } }

.legal .legal__doc { max-width: 720px; }
.legal__doc h2 { margin: 48px 0 12px; font-size: 24px; font-weight: 400; letter-spacing: -.02em; line-height: 1.25; color: var(--navy); }
.legal__doc h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 500; color: var(--navy); }
.legal__doc p, .legal__doc li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.legal__doc p + p { margin-top: 12px; }
.legal__doc ul, .legal__doc ol { margin: 12px 0 0 22px; display: grid; gap: 8px; }
.legal__doc strong { color: var(--navy); font-weight: 500; }
.legal__doc a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 37, 64, .3); }
.legal__doc table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.legal__doc th, .legal__doc td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(15, 37, 64, .12); vertical-align: top; color: var(--ink-2); }
main section.legal { padding-top: 24px; }
@media (min-width: 1000px) { main section.legal { padding-top: 40px; } }
.legal__doc ul + p, .legal__doc ol + p { margin-top: 16px; }

main .phero .h1, main .phero.solo .h1, main .hero--clean .h1 { font-size: clamp(40px, 10.6vw, 44px) !important; line-height: 1.04 !important; letter-spacing: -.042em !important; }
@media (min-width: 1000px) { main .phero .h1, main .phero.solo .h1, main .hero--clean .h1 { font-size: clamp(54px, 4.9vw, 70px) !important; } }
main .close .h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -.035em !important; }
@media (min-width: 1000px) { main .close .h1 { font-size: 52px !important; } }

.steps.tall .step :is(h2, h3) { font-size: 21px !important; }
@media (min-width: 1000px) { .steps.tall .step :is(h2, h3), .cyc h3 { font-size: 24px !important; } .about.owner .h2 { font-size: 34px !important; } }
main .lede, main .money .intro .lede { font-size: 18px; }
@media (min-width: 1000px) { main .lede, main .money .intro .lede { font-size: 20px; } }

.glance .index a .res, .joins .index.others a .res { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); transition: text-decoration-color .3s; }
.glance .index a:hover .res, .joins .index.others a:hover .res { text-decoration-color: var(--navy); }
.glance .index a .res small, .joins .index.others a .res small { display: block; text-decoration: none; }

@media (min-width: 1000px) { .foot .top-row .cols { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 40px !important; } }

.phero__pic .stage { padding-bottom: 76px !important; }
main .stage .note, main .phero__pic .stage .note { font-size: 13px !important; line-height: 1.4; left: 40px; right: 40px; bottom: 18px; text-wrap: balance; }

.plate .have, .plate .have:hover { background: none !important; box-shadow: none !important; padding-left: 0; }
.plate .have svg { color: var(--navy) !important; background: none !important; box-shadow: inset 0 0 0 1px rgba(15, 37, 64, .35) !important; }

@media (min-width: 1000px) {
  .phero--split .wrap { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 64px; align-items: end; }
  .phero--split .phero__portrait { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
}
.phero--split .phero__portrait { margin-top: 32px; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.phero--split .phero__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 22%; }
.phero--split + .about.owner .box { display: block !important; }
.phero--split + .about.owner .owner__tx { max-width: 760px; }

.aside-block .mail { margin-top: 14px; }
@media (min-width: 1000px) {
  .foot .top-row { grid-template-columns: minmax(0, .55fr) minmax(0, 2fr) !important; column-gap: 56px !important; }
  .foot .top-row .cols { column-gap: 24px !important; }
  .foot .cols a { font-size: 14px; }
}
@media (min-width: 1000px) { .phero--split .wrap { display: grid !important; } .phero--split .phero__portrait { max-height: 520px; justify-self: end; width: 100%; max-width: 420px; } }
@media (max-width: 999px) { .phero--split .phero__portrait { max-width: 420px; } }
@media (min-width: 1000px) { .phero--split .wrap { align-items: center; } }

.hero__phone { aspect-ratio: 366 / 760; -webkit-mask-image: none; mask-image: none; background: linear-gradient(#fff, #fff) content-box, #0c0e11; }
.hero__phone img { height: calc(100% - 38px); margin-top: 38px; object-fit: cover; object-position: top; border-radius: 0 0 39px 39px; }
.hero__phone { width: min(300px, calc((100svh - 200px) * .48)); }
@media (min-width: 1000px) { .hero__phone { width: min(310px, calc((100svh - 190px) * .48), 25vw); } }

.ph { aspect-ratio: 366 / 760; -webkit-mask-image: none; mask-image: none; background: linear-gradient(#fff, #fff) content-box, #0c0e11; }
.ph img { height: calc(100% - 22px); margin-top: 22px; object-fit: cover; object-position: top; border-radius: 0 0 25px 25px; }
.demo .ph { width: calc(var(--ph-h) * .48); }

.brand { gap: 14px; font-size: 15px; font-weight: 600; letter-spacing: .2em; color: var(--navy); }
.brand svg { width: 22px; height: 33px; }
.brand svg path, .foot .brand svg path { fill: var(--navy) !important; stroke: none !important; }
.ring .hub svg path { fill: var(--navy) !important; stroke: none !important; }
@media (max-width: 599px) { .brand { font-size: 13.5px; letter-spacing: .17em; gap: 12px; } .brand svg { width: 20px; height: 30px; } }

.brand { font-weight: 800; }

.hero__phone, .ph {
  --pw: 300px;
  width: var(--pw); aspect-ratio: 366 / 776; padding: calc(var(--pw) * .024); border-radius: calc(var(--pw) * .16);
  background: #050506; filter: none;
  box-shadow: inset 0 0 0 1px #2a2d33, 0 0 0 1.2px #8d939b, 0 0 0 2.4px #d4d8dc, 0 0 0 3px #a9aeb5, 0 40px 70px -34px rgba(15, 37, 64, .5);
  -webkit-mask-image: none; mask-image: none;
}
.hero__phone img, .ph img {
  position: static; display: block; box-sizing: border-box; width: 100%; height: 100%; margin: 0;
  padding-top: calc(var(--pw) * .115); background: #fff; object-fit: cover; object-position: top;
  border-radius: calc(var(--pw) * .137);
}
.hero__phone::before, .ph::before {
  top: calc(var(--pw) * .056); left: 50%; width: calc(var(--pw) * .215); height: calc(var(--pw) * .068);
  margin-left: calc(var(--pw) * -.1075); border-radius: calc(var(--pw) * .034); background: #000;
}
.hero__phone::after, .ph::after {
  content: "9:41"; top: calc(var(--pw) * .057); left: calc(var(--pw) * .15); height: calc(var(--pw) * .068);
  display: flex; align-items: center; font: 600 calc(var(--pw) * .043)/1 var(--sans); letter-spacing: -.01em; color: #0c0e11;
}
.hero__phone { --pw: min(300px, calc((100svh - 200px) * .47)); }
@media (min-width: 1000px) { .hero__phone { --pw: min(310px, calc((100svh - 190px) * .47), 25vw); } }
.demo .ph { --pw: calc(var(--ph-h) * .47); }
.row .ph { --pw: 240px; }
.demo:hover .ph, .row:hover .ph { box-shadow: inset 0 0 0 1px #2a2d33, 0 0 0 1.2px #8d939b, 0 0 0 2.4px #d4d8dc, 0 0 0 3px var(--navy), 0 40px 70px -34px rgba(15, 37, 64, .5); }

.hero__phone, .ph { aspect-ratio: 71.9 / 150; padding: calc(var(--pw) * .026); }
.hero__phone::before, .ph::before { top: calc(var(--pw) * .064); width: calc(var(--pw) * .224); height: calc(var(--pw) * .081); margin-left: calc(var(--pw) * -.112); border-radius: calc(var(--pw) * .0405); }
.hero__phone::after, .ph::after { top: calc(var(--pw) * .064); height: calc(var(--pw) * .081); }
.hero__phone img, .ph img { padding-top: calc(var(--pw) * .128); }

.next { background: none; }
.next .label.bare { display: none; }
.next__name { font-size: 34px !important; }
@media (min-width: 1000px) { .next__name { font-size: 52px !important; } }
.next__name { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); }
.next:hover .next__name { text-decoration-color: var(--navy); }

.row .name { font-size: 34px !important; }
main .aside-block .h3, main .aside-block h2, main .does .h2, main .does h2 { font-size: 34px !important; }
main .way h3, main .twoways .way h3, main .twoways h3 { font-size: 24px !important; }
main .kinds .pair h3, main .does h3 { font-size: 24px !important; }
.glance .index a .res, .whofor__list b, .demo .name, main .legal__doc li, main .legal__doc p { font-size: 18px !important; }
main .stage .note, main .phero__pic .stage .note { font-size: 15px !important; }
.phero__pic .stage { padding-bottom: 84px !important; }
@media (max-width: 999px) { .row .name, main .aside-block .h3, main .aside-block h2, main .does .h2, main .does h2 { font-size: 26px !important; } main .way h3, main .kinds .pair h3, main .does h3 { font-size: 21px !important; } }

.go:not(.ring) span.t { background: none !important; padding-bottom: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); transition: text-decoration-color .3s; }
.go:not(.ring):hover span.t { text-decoration-color: var(--navy); }
.row .go, .row .go:hover { border: 0 !important; box-shadow: none !important; }

main.home > #work { padding-top: 120px !important; }
@media (max-width: 999px) { main.home > #work { padding-top: 72px !important; } }
@media (min-width: 1000px) { .work .head { align-items: end; } }

.phero.solo:not(.phero--split) { padding-bottom: 0; }
.phero.solo:not(.phero--split) + section { padding-top: 64px !important; }
.plate__top .label .sys, .whofor__list span { font-size: 15px !important; }
main .mail a { font-size: 24px !important; }
main .terms b, main .terms-line b { font-size: 24px !important; }
main .twoways h2.h3, main .twoways .h3 { font-size: 34px !important; }
@media (max-width: 999px) { main .mail a { font-size: 21px !important; } main .twoways h2.h3, main .twoways .h3 { font-size: 26px !important; } }

.btn, .btn span, .go:not(.ring), .go:not(.ring) span.t, .nav .pill { font-size: 18px !important; }
.nav .pill { font-size: 16px !important; }
.hero__hear .hear__tx small, .glance .index a .res small, .joins .index.others a .res small, .tag, .tag.gold, .node span, .ring .node span { font-size: 15px !important; }
.row .line, .joins .index.others a .res { font-size: 18px !important; }
.step .n, .steps.tall .step .n, .cyc .n { font-size: 0 !important; color: transparent !important; }
.joins .index.others a .res, .joins .index.others a .res > span, .joins .index.others a span:not(.arr) { font-size: 18px !important; }
.joins .index.others a .res small { font-size: 15px !important; }
.next { margin-top: 0 !important; }

.joins .index.others a .res > span:not(small), .joins .index.others a .res { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); }
.joins .index.others a:hover .res > span:not(small), .joins .index.others a:hover .res { text-decoration-color: var(--navy); }

.nav > a:not(.pill):hover, .nav .login:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.phero--phone .hero__phone { --pw: min(280px, calc((100svh - 200px) * .45)); justify-self: end; }
@media (max-width: 999px) { .phero--phone .hero__phone { margin: 40px auto 0; justify-self: center; } }
.phero--phone .phero__txt { max-width: 640px; }

.ways .way { align-self: start; }
@media (min-width: 1000px) { .ways .wrap { align-items: start; } }

main .close .acts { flex-direction: column; align-items: flex-start; gap: 16px; }
main .close .acts .mail a { font-size: 18px !important; }
.joins .index.others a > span:not(.arr) { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(15, 37, 64, .3); transition: text-decoration-color .3s; }
.joins .index.others a:hover > span:not(.arr) { text-decoration-color: var(--navy); }

.nav > a:not(.pill)::after, .nav .login::after { content: none !important; display: none !important; }
.mail a, .mail a:hover { border-bottom: 0 !important; background-image: none !important; box-shadow: none !important; padding-bottom: 0 !important; }
.mail a::after, .mail a::before { content: none !important; }