:root {
  --vc-bg: #f5f1e8;
  --vc-bg-sunken: #efe9dd;
  --vc-bg-tint: #e9f1ec;
  --vc-surface: #fffdf8;
  --vc-surface-2: #fbf8f2;
  --vc-track: #ebe3d6;
  --vc-border: #e6ded0;
  --vc-border-strong: #d8cfbd;
  --vc-border-control: #918b7f;
  --vc-text: #1d332a;
  --vc-text-2: #46574f;
  --vc-text-3: #5a6b61;
  --vc-primary: #124e3b;
  --vc-primary-hover: #1c6048;
  --vc-on-primary: #fffdf8;
  --vc-accent-bg: #deece5;
  --vc-accent-ink: #1f5d47;
  --vc-sage-hover: #cfe1d8;
  --vc-blue-ink: #2b4a78;
  --vc-ai-bg: #efe7fb;
  --vc-ai-ink: #7452b4;
  --vc-danger: #ad3f33;
  --vc-brand-forest: #1e4a37;
  --vc-brand-cream: #f1ece0;
  --vc-brand-sage: #7fa890;
  --vn-bg: #141c18;
  --vn-sidebar: #1a231f;
  --vn-tint: #1b2d25;
  --vn-surface: #1d2722;
  --vn-press: #26312b;
  --vn-border: #2e3a34;
  --vn-border-strong: #3d4b44;
  --vn-text: #ece6da;
  --vn-text-2: #bfc8c0;
  --vn-text-3: #9aa89f;
  --vn-primary: #86c9a6;
  --vn-accent-bg: #21382e;
  --vn-accent-ink: #9fd4b7;
  --vn-speaker-1: #8fd2af;
}

:root, .site-head.site-head--v2, .site-foot.site-foot--v2 { --gutter: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right)); }

@property --shp { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --vis { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --rise { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --trp { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --qp { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ap { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --bp { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --cp { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --t24 { syntax: '<length>'; inherits: true; initial-value: 64px; }
@property --d2 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --d3 { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --d4 { syntax: '<length>'; inherits: true; initial-value: 0px; }

:lang(ja) { --vc-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP"; }
:lang(ko) { --vc-cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR"; }
:lang(zh-Hant) { --vc-cjk: "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC"; }
:is(:lang(ja), :lang(ko), :lang(zh-Hant)) body { font-family: -apple-system, BlinkMacSystemFont, var(--vc-cjk), "Segoe UI", system-ui, sans-serif; line-height: 1.75; }
:is(:lang(ja), :lang(ko), :lang(zh-Hant)) :is(h1, h2, h3, .h2-display, .brand, .m-nav a, .zero-list b, .faq summary, .callout-card b, .voice-q, .sign-text) { letter-spacing: 0; word-spacing: 0; }
:is(:lang(ja), :lang(ko), :lang(zh-Hant)) :is(h1, h2, h3) { line-height: 1.3; }
:is(:lang(ja), :lang(ko), :lang(zh-Hant)) h1 { line-height: 1.22; }
:is(:lang(ja), :lang(ko), :lang(zh-Hant)) .h-l { font-weight: 300; }
:lang(ko) { word-break: keep-all; }
:lang(ja) :is(p, li, dd, dt, blockquote) { word-break: auto-phrase; }
:is(:lang(ja), :lang(zh-Hant)) :is(h1, h2, h3, .kicker, .eyebrow, .moment-cap, .btn, .text-link, .tut-row, .zero-list b, .faq summary, .route-pill, .route-l, .callout-card, .ticket-rows dt, .ticket-per, .foot-h, .foot-cols a, .m-nav a, .nav a, .nums dd, .win-h, .win-sub, .label-t small, .label-t b, .quad h3, .sign-text, .voice-title, .voice-rt, .voice-who, .voice-meta, .voice-mark, .tr-note a) { word-break: keep-all; overflow-wrap: break-word; }
:lang(zh-Hant) :is(h1, h2, h3, .kicker, .eyebrow, .moment-cap, .btn, .text-link, .tut-row, .zero-list b, .faq summary, .route-pill, .route-l, .callout-card, .ticket-rows dt, .ticket-per, .foot-h, .foot-cols a, .m-nav a, .nav a, .nums dd, .win-h, .win-sub, .label-t small, .label-t b, .quad h3, .sign-text, .voice-title, .voice-rt, .voice-who, .voice-meta, .voice-mark, .tr-note a) { overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) {
  html:lang(ja) { word-break: auto-phrase; }
  :lang(ja) :is(h1, h2, h3, .kicker, .eyebrow, .moment-cap, .text-link, .tut-row, .zero-list b, .faq summary, .route-pill, .callout-card, .ticket-per, .foot-h, .foot-cols a, .m-nav a, .nums dd, .win-h, .win-sub, .label-t small, .label-t b, .quad h3, .sign-text, .voice-q, .voice-title, .voice-rt, .voice-who, .voice-meta, .voice-mark) { word-break: auto-phrase; }
}
@supports not (word-break: auto-phrase) {
  html:lang(ja) { line-break: strict; }
  :lang(ja) .faq summary { word-break: normal; text-wrap: balance; }
  :lang(ja) .foot-brand p { word-break: keep-all; }
  :lang(ja) :is(h1, h2, h3, p, li, dd, dt, blockquote, .kicker, .eyebrow, .moment-cap, .btn, .text-link, .tut-row, .zero-list b, .faq summary, .route-pill, .route-l, .callout-card, .ticket-rows dt, .ticket-per, .foot-h, .foot-cols a, .m-nav a, .nav a, .nums dd, .win-h, .win-sub, .label-t small, .label-t b, .quad h3, .sign-text, .voice-q, .voice-title, .voice-rt, .voice-who, .voice-meta, .voice-mark, .tr-note a) { overflow-wrap: anywhere; }
}
:is(:lang(de), :lang(nl), :lang(sv), :lang(da), :lang(nb), :lang(cs), :lang(sk), :lang(uk), :lang(tr)) :is(h3, .moment-cap, .zero-list b, .ticket-rows dt, .btn, .quad h3, .faq summary, .callout-card, .route-pill, .label-t, .nums dd, .win-h) {
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0; background-color: var(--vc-bg); color: var(--vc-text);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--vc-primary); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
b, strong { font-weight: 600; }
q { quotes: "„" "”"; }
:lang(en) q { quotes: "“" "”"; }
:lang(de) q { quotes: "„" "“"; }
:lang(ja) q { quotes: "「" "」"; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.i { width: 22px; height: 22px; flex: none; }
.i--sm { width: 18px; height: 18px; }
.i--xs { width: 13px; height: 13px; }
:focus-visible { outline: 3px solid var(--vc-accent-ink); outline-offset: 3px; border-radius: var(--r-s); }
.skip-link { position: absolute; left: max(12px, env(safe-area-inset-left)); top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill); background: var(--vc-primary); color: var(--vc-on-primary); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: var(--grain); background-size: var(--grain-size); opacity: .2; mix-blend-mode: multiply;
}
.grain--light::before { background-image: var(--grain-light); background-size: var(--grain-light-size); opacity: .06; mix-blend-mode: screen; }
.band-sunken { background: radial-gradient(80% 60% at 10% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-bg-sunken); }
.plane { background: radial-gradient(80% 60% at 0% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-accent-bg); }

.device {
  --pw: 360px;
  --bzr: .026;
  --rim: 2px;
  --bz: calc(var(--pw) * var(--bzr));
  --sw: calc(var(--pw) - 2 * var(--bz) - 2 * var(--rim));
  position: relative; flex: none;
  width: var(--pw); padding: var(--bz);
  border-radius: calc(var(--pw) * .165);
  border: var(--rim) solid transparent;
  background:
    linear-gradient(150deg, var(--vn-press) 0%, var(--vn-bg) 26%, var(--vn-bg) 74%, var(--vn-surface) 100%) padding-box,
    linear-gradient(135deg, var(--vn-text-2) 0%, var(--vn-border-strong) 12%, var(--vn-press) 38%, var(--vn-border-strong) 60%, var(--vn-border) 82%, var(--vn-text-3) 100%) border-box;
  box-shadow:
    0 0 0 1px rgb(20 28 24 / .32),
    inset 0 0 0 1px rgb(236 230 218 / .07),
    0 2px 3px rgb(20 28 24 / .26),
    5px 12px 20px -8px rgb(var(--ink-shadow) / .32),
    var(--cast, 52px 80px 110px -34px) rgb(var(--ink-shadow) / .42);
}
.device img, .device .screens { width: 100%; border-radius: calc(var(--pw) * .136); }
.device::after {
  content: ""; position: absolute; inset: var(--bz); border-radius: calc(var(--pw) * .136); pointer-events: none;
  background: linear-gradient(122deg, rgb(255 253 248 / .16) 0%, rgb(255 253 248 / 0) 16%);
}
.btns { position: absolute; inset: calc(-1 * var(--rim)); pointer-events: none; }
.btns::before, .btns::after {
  content: ""; position: absolute; width: calc(var(--pw) * .008 + 1.5px); border-radius: 2px;
  background: linear-gradient(90deg, var(--vn-border) 0%, var(--vn-text-3) 45%, var(--vn-border-strong) 100%);
  box-shadow: 0 1px 2px rgb(20 28 24 / .3);
}
.btns::before {
  left: calc(var(--pw) * -.008 - 1px); top: 17%; height: 22%;
  -webkit-mask: linear-gradient(180deg, #000 0 15%, #0000 15% 29%, #000 29% 61%, #0000 61% 69%, #000 69% 100%);
          mask: linear-gradient(180deg, #000 0 15%, #0000 15% 29%, #000 29% 61%, #0000 61% 69%, #000 69% 100%);
}
.btns::after { right: calc(var(--pw) * -.008 - 1px); top: 26%; height: 10.5%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 6px 20px; border-radius: var(--r-pill); border: 0;
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--vc-primary); color: var(--vc-on-primary); }
.btn--primary:hover { background: var(--vc-primary-hover); }
.btn .i, .text-link .i { transition: transform .2s var(--ease); }
.btn:hover .i, .text-link:hover .i { transform: translateX(2px); }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--vc-primary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgb(18 78 59 / .32); }
.text-link:hover { text-decoration-color: currentColor; }
.text-link--night { color: var(--vn-accent-ink); text-decoration-color: rgb(159 212 183 / .4); }
.appstore { display: inline-flex; border-radius: var(--r-s); flex: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.appstore img { height: 52px; width: auto; }
.appstore:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgb(var(--ink-shadow) / .35); }

.site-head.site-head--v2 { background: none; border-bottom: 0; }
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(245 241 232 / 0); border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s;
}
.site-head[data-scrolled]::before {
  background: rgb(245 241 232 / .94); border-bottom-color: var(--vc-border);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
}
.site-head[data-night]::before { background: rgb(20 28 24 / .9); border-bottom-color: var(--vn-border); }
html:not(.js) .site-head::before { background: var(--vc-bg); border-bottom-color: var(--vc-border); }
@media (min-width: 1021px) and (max-height: 660px) { :root { --head-h: 52px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 800 19px/1 var(--font-display); letter-spacing: -.012em; color: var(--vc-text); text-decoration: none; flex: none; transition: color .25s; }
.nav > a, .nav .dd > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-pill); color: var(--vc-text); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background-color .15s, color .25s;
}
.btn--head { min-height: 40px; padding: 0 18px; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--vc-primary); transition: background-color .2s linear, box-shadow .2s linear, color 0s linear .1s; }
html.js .head-cta:not(.is-on) .btn--head { background: rgb(18 78 59 / 0); color: var(--vc-primary); }
html.js .head-cta:not(.is-on) .btn--head:hover { background: var(--vc-accent-bg); }
.site-head[data-night] :is(.brand, .nav > a, .nav .dd > summary, .lang > summary, .m-menu > summary) { color: var(--vn-text); }
.site-head[data-night] :is(.nav > a, .nav .dd > summary, .lang > summary):hover { background: rgb(236 230 218 / .08); }
.site-head[data-night] .btn--head { background: var(--vn-primary); color: var(--vn-bg); box-shadow: inset 0 0 0 1.5px var(--vn-primary); }
.site-head[data-night] :focus-visible { outline-color: var(--vn-accent-ink); }
.site-head[data-night] :is(.dd-panel, .m-sheet) :focus-visible { outline-color: var(--vc-accent-ink); }
.site-head :is(a, summary, button):not(.m-sheet *) { scroll-margin-top: calc(-1 * (var(--head-h) + 16px)); }
html.js .site-head[data-night] .head-cta:not(.is-on) .btn--head { background: rgb(134 201 166 / 0); color: var(--vn-primary); }

.dd > summary .i--sm { transition: transform .2s var(--ease); }
.dd-panel {
  position: absolute; top: calc(100% + 10px); z-index: 60; color: var(--vc-text);
  background: var(--vc-surface); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--vc-border), var(--shadow-pop); padding: 8px;
  animation: pop-in .18s var(--ease);
}
.lang > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 11px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; color: var(--vc-text); transition: color .25s; }
.m-sheet {
  position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain;
  background: var(--vc-bg); border-top: 1px solid var(--vc-border); color: var(--vc-text);
  padding: 4px var(--gutter) calc(32px + env(safe-area-inset-bottom)); animation: sheet-in .22s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }

.kicker, .eyebrow { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--vc-accent-ink); }
.eyebrow { margin-bottom: 16px; }
h1 { font-size: var(--h1); line-height: 1.04; font-weight: 800; letter-spacing: -.024em; word-spacing: .05em; }
h2, .h2-display { font-size: var(--h2-d); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; word-spacing: .05em; }
h2.h2-minor { font-size: var(--h2-m); line-height: 1.1; letter-spacing: -.016em; word-spacing: .04em; }
.h-l, .h-h { display: block; }
.h-l { font-weight: 200; letter-spacing: -.018em; word-spacing: .02em; }
.h-h { font-weight: 800; }
h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--vc-text-2); }
.sec { padding-block: var(--sec-y); }
.sec-head { max-width: 800px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-sub { margin-top: 18px; font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.55; color: var(--vc-text-2); }
.sec-head--center .sec-sub { max-width: 600px; margin-inline: auto; }
.num { font-family: var(--font-display); font-weight: 200; letter-spacing: -.045em; line-height: .92; font-variant-numeric: lining-nums tabular-nums; color: var(--vc-text); }
.num small { font-size: .4em; font-weight: 600; letter-spacing: -.01em; color: var(--vc-text-2); margin-inline: .08em; vertical-align: .12em; }
.num .pre { vertical-align: .95em; margin-inline: 0 .06em; }
.num .num-pre { margin-inline: 0 .08em; }
.num:has(.num-pre) { white-space: nowrap; }

.hero {
  --copy-w: min(560px, max(40vw, 528px));
  --gap: 30px;
  --pw: clamp(340px, 30vw, 432px);
  --bzr: .026; --rim: 2px;
  --bz: calc(var(--pw) * var(--bzr));
  --sw: calc(var(--pw) - 2 * var(--bz) - 2 * var(--rim));
  --sh: calc(var(--sw) * 2.1727);
  --dy: 64px;
  --hero-h: 820px;
  position: relative; isolation: isolate; overflow: clip;
}
.hero-plane {
  position: absolute; z-index: 0; top: 16px; bottom: 0; right: 0;
  left: calc(var(--bleed) + var(--copy-w) + var(--gap) + var(--pw) * .3);
  border-radius: var(--r-l) 0 0 0;
  box-shadow: inset 1px 1px 0 rgb(255 253 248 / .7);
}
.hero-plane.grain { position: absolute; }
.hero-plane.grain::before, .hero-stage::after { opacity: .3; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: var(--copy-w) minmax(0, 1fr); column-gap: var(--gap); min-height: var(--hero-h); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding-block: 24px 48px; }
.hero h1 { margin-top: 18px; }
.hero .lead { margin-top: 24px; max-width: 31em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.nums { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 36px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--vc-border-strong); }
.nums > div + div { padding-left: 36px; border-left: 1px solid var(--vc-border-strong); }
.nums .num { font-size: clamp(2.6rem, 1.6rem + 2.3vw, 3.6rem); }
.nums .num--2 { font-size: calc(.85 * clamp(2.6rem, 1.6rem + 2.3vw, 3.6rem)); }
.nums dd { margin-top: 8px; max-width: 15em; font-size: 15px; line-height: 1.45; color: var(--vc-text-2); }
.nums .num-alt { margin-top: 8px; font-weight: 500; color: var(--vc-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nums .num-alt + dd { margin-top: 0; }

.hero-stage { position: relative; }
.stage-set { position: absolute; inset: 0; margin: 0; }
.device--hero { --pw: inherit; position: absolute; left: 0; top: var(--dy); animation: rise .7s var(--ease) both; }
.device--hero picture, .device--hero img { display: block; }
.screen-foot {
  position: absolute; z-index: 1; left: var(--bz); right: var(--bz); bottom: var(--bz); pointer-events: none;
  top: calc(var(--bz) + var(--sh) * var(--hf));
  background: #f5f1e8; border-radius: 0 0 calc(var(--pw) * .136) calc(var(--pw) * .136);
}
.type-veil {
  position: absolute; left: var(--bz); right: var(--bz); z-index: 1; pointer-events: none;
  top: calc(var(--bz) + var(--sh) * var(--va0)); height: calc(var(--sh) * (var(--va1) - var(--va0)));
  background: #f5f1e8;
  -webkit-mask: linear-gradient(180deg, transparent 0 50%, #000 56% 100%) 0 0 / 100% 200% no-repeat;
          mask: linear-gradient(180deg, transparent 0 50%, #000 56% 100%) 0 0 / 100% 200% no-repeat;
  animation: type-in .7s .1s cubic-bezier(.5, 0, .4, 1) both;
}
@keyframes type-in { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.chip-ring {
  position: absolute; z-index: 2;
  left: calc(var(--bz) + var(--sw) * var(--chip-x) - 6px);
  top: calc(var(--bz) + var(--sh) * var(--chip-y) - 6px);
  width: calc(var(--sw) * var(--chip-w) + 12px);
  height: calc(var(--sh) * var(--chip-h) + 12px);
  border-radius: var(--r-pill); box-shadow: var(--ring);
  animation: ring-in .3s 1.3s var(--ease) both;
}
.chip-pre {
  display: none; position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--bz) + var(--sw) * var(--chip-x));
  top: calc(var(--bz) + var(--sh) * var(--chip-y));
  width: calc(var(--sw) * var(--chip-w));
  height: calc(var(--sh) * var(--chip-h));
  container-type: size; border-radius: var(--r-pill); background: var(--vc-surface); color: var(--vc-text);
  animation: chip-pre-out .3s 1s var(--ease) both;
}
.chip-pre i { position: absolute; left: 22.7cqh; top: 38.7cqh; width: 22.6cqh; height: 22.6cqh; border-radius: 50%; background: var(--vc-ai-ink); }
.chip-pre b { position: absolute; left: 63.2cqh; right: 8cqh; top: 0; bottom: 0; display: flex; align-items: center; font-size: 36cqh; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .chip-pre { display: block; } }
@keyframes chip-pre-out { to { opacity: 0; } }
.callout {
  --drop: 22px;
  --cc: calc(var(--rim) + var(--bz) + var(--sw) * (var(--chip-x) + var(--chip-w) / 2));
  --cardw: min(240px, 100% - var(--pw) + var(--cc) - 16px);
  position: absolute; z-index: 3; margin: 0; height: 0;
  left: var(--cc);
  top: calc(var(--dy) + var(--rim) + var(--bz) + var(--sh) * (var(--chip-y) + var(--chip-h)) + 6px);
  right: 0;
  animation: callout-in .3s 1.45s var(--ease) both;
}
.callout-arm {
  position: absolute; left: -1px; top: 0; height: var(--drop); right: calc(var(--cardw) - 1px);
  border-left: 2px solid var(--vc-primary); border-bottom: 2px solid var(--vc-primary); border-bottom-left-radius: 10px;
}
.callout-arm::after { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-primary); }
.callout-card {
  position: absolute; right: 0; top: var(--drop); translate: 0 -50%;
  width: var(--cardw);
  display: grid; gap: 3px; padding: 12px 14px 14px;
  background: var(--vc-surface); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--vc-border), var(--shadow-pop);
}
.loupe { width: auto; max-width: min(100%, 176px); height: auto; margin: 2px 0 10px; border-radius: var(--r-pill); box-shadow: var(--ring); }
.callout-card b { font-size: 15px; line-height: 1.3; color: var(--vc-text); }
.callout--mac .callout-card b { display: flex; align-items: flex-start; gap: 8px; }
.callout-card b .i { margin-top: 1px; color: var(--vc-accent-ink); }
.callout-card > span { font-size: 14px; line-height: 1.38; color: var(--vc-text-2); text-wrap: balance; }
.callout-via { display: none; font-weight: 500; color: var(--vc-text-2); white-space: nowrap; }
@keyframes rise { from { transform: translateY(14px); } }
@keyframes ring-in { from { opacity: 0; transform: scale(1.12); } }
@keyframes callout-in { from { opacity: 0; translate: -8px 0; } }

.film-sp { word-spacing: 4px; }
.film-link { display: inline-flex; align-items: center; gap: 8px; color: var(--vc-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.film-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgb(18 78 59 / .32); }
.film-link:hover .film-t { text-decoration-color: currentColor; }
@media (pointer: coarse) and (min-width: 561px) {
  .film-link { position: relative; }
  .film-link::after { content: ""; position: absolute; inset: -9px 0; }
}
.play-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vc-primary); color: var(--vc-on-primary); padding-left: 2px; }
.film-len { color: var(--vc-text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.how-sec.grain::before { opacity: .08; }

html.js .how-stage, .how-fig {
  background: radial-gradient(80% 60% at 100% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-accent-bg);
}
.how-stage.grain::before { opacity: .3; }
.how-sec .device { --cast: -48px 80px 110px -30px; }

.how-steps { display: grid; gap: clamp(72px, 9vw, 120px); }
.how-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.how-stage-col { display: none; }
.how-fig { position: relative; height: 640px; border-radius: var(--r-l); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 52px; }
.how-fig--ai { background: radial-gradient(80% 60% at 100% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-ai-bg); }
.device--how { --pw: 392px; }
.how-copy { max-width: 480px; }
.lines-card {
  position: absolute; z-index: 2; left: 50%; bottom: 40px; width: min(400px, 84%); height: auto;
  translate: -40% 0; border-radius: var(--r-s); background: #f5f1e8;
  box-shadow: inset 0 0 0 1px var(--vc-border), 0 2px 4px rgb(var(--ink-shadow) / .08), 10px 26px 44px -16px rgb(var(--ink-shadow) / .34);
}
.moment { display: flex; align-items: flex-end; gap: 6px 18px; }
.idx { flex: none; font: 200 clamp(3.4rem, 2.4rem + 2.6vw, 5.2rem)/.85 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; color: var(--vc-primary); transition: color .4s var(--ease); }
.moment-cap { padding-bottom: .3em; max-width: 25em; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--vc-text-2); }
.m-ts { font-weight: 650; color: var(--vc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.new-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: var(--vc-accent-bg); color: var(--vc-accent-ink); font: 600 14px/1 var(--font); letter-spacing: 0; vertical-align: .28em; margin-left: 4px; white-space: nowrap; }
.how-copy h3 { margin-top: 22px; }
.how-copy > p:not([class]) { margin-top: 14px; color: var(--vc-text-2); }
.tut-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--vc-text-2); }
.tut-i { display: inline-block; white-space: nowrap; }
.tut-row a { color: var(--vc-text); font-weight: 600; text-decoration: none; }
.tut-row small { font-weight: 400; }
.tut-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgb(29 51 42 / .28); }
.tut-row a:hover .tut-t { text-decoration-color: currentColor; }
.tut-row small { font-size: 14px; color: var(--vc-text-3); font-variant-numeric: tabular-nums; }
.tut-label { font-weight: 600; color: var(--vc-text-2); }
.tut-dot { color: var(--vc-text-3); }
.tut-w { white-space: nowrap; }
.tut-play { display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: var(--vc-surface); color: var(--vc-primary); box-shadow: inset 0 0 0 1px var(--vc-border-strong); padding-left: 2px; flex: none; }
.tut-play--i { display: none; }
@media (pointer: coarse) and (min-width: 561px) {
  .tut-row { display: block; }
  .tut-row > .tut-play, .tut-dot { display: none; }
  .tut-w { display: contents; }
  .tut-body { display: grid; }
  .tut-label { margin-bottom: 2px; }
  .tut-i { display: flex; justify-self: start; align-items: center; gap: 12px; min-height: 44px; white-space: normal; }
  .tut-tx { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .tut-t { white-space: nowrap; }
  .tut-play--i { display: grid; margin-top: 0; }
}
.tr-list { display: grid; gap: 8px; margin-top: 18px; }
.tr-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 16px; line-height: 1.4; }
.tr-list .i { color: var(--vc-accent-ink); margin-top: 1px; }
.tr-note { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--vc-text-3); }
.tr-note a { position: relative; display: inline-block; font-weight: 600; text-underline-offset: 3px; }
@media (pointer: coarse), (max-width: 560px) { .tr-note a::after { content: ""; position: absolute; inset: -12px 0; } }

.live-card {
  position: absolute; z-index: 2; left: 50%; bottom: 36px; width: min(420px, 84%); translate: -40% 0;
  display: grid; gap: 2px; padding: 10px 8px 4px; border-radius: var(--r-s); background: var(--vn-surface);
  box-shadow: inset 0 0 0 1px var(--vn-border-strong), 0 2px 4px rgb(20 28 24 / .2), 10px 26px 44px -16px rgb(var(--ink-shadow) / .45);
}
.live-rec { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 10px 0 12px; }
.rec-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--vc-danger); box-shadow: 0 0 0 4px rgb(173 63 51 / .22); }
.live-bars { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.live-bars i { width: 3.5px; height: calc(100% * var(--h)); border-radius: 2px; background: var(--vc-danger); transform-origin: 50% 50%; }
.live-lines { width: 100%; height: auto; border-radius: 6px; }
@media (min-width: 1021px) {
  .how { --ov: 20px; --g1: 12px; --k1: 64px; --gb: 28px; --slv: 0px; }
  html.js .how { --slv: 24px; }
  :is(.how-fig--rec, .how-stage) {
    --sh1: calc((var(--pw) * .948 - 4px) * 2.1727);
    --cw: calc(var(--pw) + 2 * var(--ov));
  }
  .how-fig--rec { --pw: 392px; }
  .how-fig--rec { height: calc(var(--sh1) * (var(--rc) - var(--r1t)) + var(--g1) + var(--k1) + var(--cw) * var(--llr) + var(--gb)); }
  .how-fig--rec .device--how { translate: 0 calc(-1 * (54px + var(--pw) * .026 + (var(--pw) * .948 - 4px) * 2.1727 * var(--r1t))); }
  .how-fig--rec .device--how img { clip-path: inset(0 0 calc((1 - var(--rc)) * 100%) 0); }
  :is(.how-fig, .how-stage) .live-card {
    top: calc(var(--sh1) * (var(--rc) - var(--r1t)) + var(--g1)); bottom: auto; left: 50%;
    width: var(--cw); gap: 8px; padding: 12px calc(var(--cw) * 12 / 408) 14px; aspect-ratio: auto;
    grid-template-rows: 30px auto;
    border-radius: calc(var(--cw) * 18 / 408); translate: -50% 0;
    box-shadow: inset 0 0 0 1px var(--vn-border-strong), 0 2px 4px rgb(20 28 24 / .2), 10px 26px 44px -16px rgb(var(--ink-shadow) / .45);
  }
  html.js .how-stage .live-card { top: calc(var(--sh1) * (var(--rc) - var(--r1t)) + var(--g1) + var(--slv)); }
  :is(.how-fig, .how-stage) .live-card .live-rec { height: 30px; padding: 0 4px; }
  :is(.how-fig, .how-stage) .live-card .live-lines { width: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .live-card:not(.is-on) .live-lines { clip-path: inset(0 0 100% 0); }
  html.js .live-card:not(.is-on) .live-bars i { transform: scaleY(.2); }
  .live-card .live-bars i { transition: transform .5s var(--ease); }
  .live-card .live-lines { clip-path: inset(0 0 0 0); transition: clip-path 1.5s .3s cubic-bezier(.4, 0, .6, 1); }
  .live-card.is-on .live-bars i { animation: talk 3.2s ease-in-out var(--d, 0s) infinite both; }
  .live-card.is-on .rec-dot { animation: rec-pulse 1.6s ease-in-out infinite; }
  html.js .live-card:not(.is-vis) :is(.live-bars i, .rec-dot),
  html.js .how:not([data-active="1"]) .stage-live :is(.live-bars i, .rec-dot) { animation-play-state: paused; }
}
@keyframes talk {
  0% { transform: scaleY(.3); } 6% { transform: scaleY(.95); } 11% { transform: scaleY(.5); } 17% { transform: scaleY(1.05); }
  22% { transform: scaleY(.6); } 28% { transform: scaleY(.9); } 33% { transform: scaleY(.4); }
  38%, 50% { transform: scaleY(.12); }
  55% { transform: scaleY(.7); } 60% { transform: scaleY(1); } 65% { transform: scaleY(.45); } 71% { transform: scaleY(.85); }
  77% { transform: scaleY(.55); } 82% { transform: scaleY(.95); } 88% { transform: scaleY(.35); }
  94%, 100% { transform: scaleY(.3); }
}
@keyframes rec-pulse { 50% { opacity: .35; } }

.rec-layer { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .rec-layer { display: block; position: absolute; pointer-events: none; }
  html.js .rec-fig { inset: var(--bz); }
  html.js .rec-stage { inset: 0; opacity: 0; transition: opacity .15s var(--ease); }
  html.js .how[data-active="1"] .rec-stage { opacity: 1; transition: opacity .2s .4s var(--ease); }
  .rec-fig .rec-box { top: calc((var(--bt) - var(--c0)) / var(--ch) * 100%); height: calc(var(--bh) / var(--ch) * 100%); }
  .rec-stage .rec-box { top: calc(var(--bt) * 100%); height: calc(var(--bh) * 100%); }
  .rec-box { position: absolute; left: 0; width: 100%; container-type: inline-size; background: rgb(var(--gr)); opacity: 0; overflow: hidden; }
  .rec-box.is-on { opacity: 1; }
  .rec-box .rg { position: absolute; top: var(--cy); left: calc(var(--cx) - 6cqi); width: 12cqi; height: calc(var(--fs) * 1cqi); margin-top: calc(var(--fs) * -.5cqi); overflow: hidden; text-align: center; color: rgb(var(--clk)); font: 200 calc(var(--fs) * 1cqi) / 1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
  .rec-box .rg b { display: block; font-weight: inherit; animation: rec-roll var(--rp) steps(var(--rn)) var(--rd) infinite; }
  .rec-box .rw i { position: absolute; left: var(--x); width: var(--w); top: var(--y); height: var(--h); border-radius: 999px; background: rgb(var(--bar)); transform-origin: 50% 50%; animation: rec-wave var(--wd) ease-in-out infinite; }
  .rec-box :is(.rw i, .rg b) { animation-play-state: paused; }
  .rec-box.is-vis :is(.rw i, .rg b) { animation-play-state: running; }
  html.js .how:not([data-active="1"]) .rec-stage .rec-box :is(.rw i, .rg b) { animation-play-state: paused; }
}
@keyframes rec-roll { to { transform: translateY(-100%); } }
@keyframes rec-wave {
  0%, 100% { transform: scaleY(1); } 15% { transform: scaleY(.55); } 33% { transform: scaleY(1.15); }
  50% { transform: scaleY(.7); } 68% { transform: scaleY(1.1); } 84% { transform: scaleY(.6); }
}

@media (prefers-reduced-motion: no-preference) {
  html.js :is(.how-fig--tr[data-anim] img, .how-stage .scr[data-reveal]) {
    --tve: calc(var(--tv0) + (var(--tv1) - var(--tv0)) * var(--trp));
    -webkit-mask: linear-gradient(180deg, #000 calc(var(--tve) * 100%), transparent calc(min(var(--tve) + .003, var(--tv1)) * 100%), transparent calc(var(--tv1) * 100%), #000 calc(var(--tv1) * 100%));
            mask: linear-gradient(180deg, #000 calc(var(--tve) * 100%), transparent calc(min(var(--tve) + .003, var(--tv1)) * 100%), transparent calc(var(--tv1) * 100%), #000 calc(var(--tv1) * 100%));
  }
  html.js .how-fig--tr[data-anim] img { transition: --trp 1.1s .2s cubic-bezier(.4, 0, .6, 1); }
  html.js .how-fig--tr[data-anim]:not(.is-on) img, html.js .how-stage .scr[data-reveal]:not(.is-on) { --trp: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js :is(.how-fig--ai[data-anim] img, .how-stage .scr[data-ask]) {
    --ake: calc(var(--ak0) + (var(--ak1) - var(--ak0)) * var(--qp) + (var(--ak2) - var(--ak1)) * var(--ap) + (var(--ak3) - var(--ak2)) * var(--bp) + (1 - var(--ak3)) * var(--cp));
    -webkit-mask: linear-gradient(180deg, #000 calc(var(--ake) * 100%), transparent calc(min(var(--ake) + .003, 1) * 100%), transparent 100%, #000 100%);
            mask: linear-gradient(180deg, #000 calc(var(--ake) * 100%), transparent calc(min(var(--ake) + .003, 1) * 100%), transparent 100%, #000 100%);
  }
  html.js .how-fig--ai[data-anim] img { transition: --qp .8s .2s cubic-bezier(.4, 0, .6, 1), --ap 1.1s 1.3s cubic-bezier(.4, 0, .6, 1), --bp .6s 2.7s cubic-bezier(.4, 0, .6, 1), --cp .5s 3.3s cubic-bezier(.4, 0, .6, 1); }
  html.js .how-fig--ai[data-anim]:not(.is-on) img, html.js .how-stage .scr[data-ask]:not(.is-on) { --qp: 0; --ap: 0; --bp: 0; --cp: 0; }
}

@media (min-width: 1021px) {
  html.js .how {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 104px);
    --r1k: var(--r1t); --A0: calc((var(--rc) - var(--r1k)) * 2.1727);
    --need: calc(clamp(380px, 32.6vw, 470px) * (.948 * var(--A0) + var(--llr)) + var(--slv) + var(--g1) + var(--k1) + var(--gb) - 4px * var(--A0) + 2 * var(--ov) * var(--llr));
    --tmin: 16px;
    --pwf: min(clamp(380px, 32vw, 460px), 411px);
    --need34: calc(var(--tmin) + 2px + var(--pwf) * .026 + (var(--pwf) * .948 - 4px) * 2.1727 * var(--k34) + 4.5px);
    --m1: clamp(12px, 100vh - var(--head-h) - var(--need), 56px);
    --m34: clamp(12px, 100vh - var(--head-h) - var(--need34), 56px);
    --stage-m: min(var(--m1), max(var(--m34), clamp(0px, (12px - (100vh - var(--head-h) - var(--need34))) * 1000, 56px)));
    --stage-h: min(720px, calc(100vh - var(--head-h) - var(--stage-m)));
  }
  @media (max-height: 800px) { html.js .how { --r1k: var(--r1s); } }
  html.js .how-stage-col { display: block; grid-column: 1; grid-row: 1; }
  html.js .how-steps { grid-column: 2; grid-row: 1; gap: 0; }
  html.js .how-step { display: flex; align-items: center; min-height: clamp(420px, 50vh, 480px); }
  html.js .how-step:first-child { min-height: calc(var(--stage-h) - 200px); align-items: flex-start; padding-top: 64px; }
  html.js .how-step:last-child { min-height: calc(var(--stage-h) + 64px); align-items: flex-start; padding-top: 24px; }
  html.js .how-sec { padding-bottom: calc(var(--sec-y) * .5); }
  html.js .how-fig { display: none; }
  html.js .how-step .idx { color: var(--vc-text-3); }
  html.js .how[data-active="1"] [data-step="1"] .idx,
  html.js .how[data-active="2"] [data-step="2"] .idx,
  html.js .how[data-active="3"] [data-step="3"] .idx,
  html.js .how[data-active="4"] [data-step="4"] .idx { color: var(--vc-primary); }
  html.js .how-step :is(h3, .how-copy > p:not([class]), .moment-cap, .m-ts, .tr-list li, .tut-label, .tut-row a, .tr-note a) { transition: color .4s var(--ease); }
  html.js .how:not([data-active="1"]) [data-step="1"] :is(h3, .how-copy > p:not([class]), .moment-cap, .m-ts),
  html.js .how:not([data-active="2"]) [data-step="2"] :is(h3, .how-copy > p:not([class]), .moment-cap, .m-ts),
  html.js .how:not([data-active="3"]) [data-step="3"] :is(h3, .how-copy > p:not([class]), .moment-cap, .m-ts, .tut-label, .tut-row a),
  html.js .how:not([data-active="4"]) [data-step="4"] :is(h3, .how-copy > p:not([class]), .moment-cap, .m-ts, .tr-list li, .tr-note a) { color: var(--vc-text-3); }
  html.js .how-stage {
    position: sticky; top: calc(var(--head-h) + (100vh - var(--head-h) - var(--stage-h)) / 2);
    height: var(--stage-h); border-radius: var(--r-l); overflow: hidden;
    display: flex; justify-content: center; align-items: flex-start; padding-top: var(--t24);
    container-type: inline-size;
  }
  @media (max-height: 800px) { html.js .how-stage { --r1t: var(--r1s); } }
  html.js .how-stage {
    --A: calc((var(--rc) - var(--r1t)) * 2.1727);
    --pw-card: calc((var(--stage-h) - var(--slv) - var(--g1) - var(--k1) - var(--gb) + 4px * var(--A) - 2 * var(--ov) * var(--llr)) / (.948 * var(--A) + var(--llr)));
    --pw-34: calc((var(--stage-h) - var(--tmin) - 6.5px + 4px * 2.1727 * var(--k34)) / (.026 + .948 * 2.1727 * var(--k34)));
    --pw: min(clamp(380px, 32.6vw, 470px), var(--pw-card), max(var(--pwf), var(--pw-34)));
    --t24: clamp(var(--tmin), var(--stage-h) - 6.5px - var(--pw) * .026 - (var(--pw) * .948 - 4px) * 2.1727 * var(--k34), 64px);
    --shp: calc((var(--pw) * .948 - 4px) * 2.1727);
    --vis: calc(var(--stage-h) - var(--t24) - 2px - var(--pw) * .026);
    --rise: calc(var(--t24) - 8px);
  }
  html.js .how[data-active="2"] .how-stage .device--how { translate: 0 var(--d2, 0px); }
  html.js .how[data-active="3"] .how-stage .device--how { translate: 0 var(--d3, 0px); }
  html.js .how[data-active="4"] .how-stage .device--how { translate: 0 var(--d4, 0px); }
  @media (max-height: 600px) { html.js .how { --gb: 20px; } }
  html.js .how-stage .device--how { --pw: inherit; }
  .stage-ai { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s var(--ease); background: radial-gradient(80% 60% at 100% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-ai-bg); }
  html.js .how[data-active="3"] .stage-ai { opacity: 1; }
  .how-progress { position: absolute; z-index: 3; top: calc(max(var(--t24), var(--slv) + 12px) - 8px); left: calc((100% - var(--pw)) / 4 - 12px); display: grid; margin: 0; }
  .how-progress button { display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
  .how-progress button:focus-visible { outline: 3px solid var(--vc-accent-ink); outline-offset: -2px; }
  .how-progress i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--vc-primary); background: rgb(var(--ink-shadow) / .16); transition: background-color .4s var(--ease); }
  .how-progress button:hover i { background: rgb(var(--ink-shadow) / .32); }
  html.js .how[data-active="1"] .how-progress [data-go="1"] i,
  html.js .how[data-active="2"] .how-progress :is([data-go="1"], [data-go="2"]) i,
  html.js .how[data-active="3"] .how-progress :is([data-go="1"], [data-go="2"], [data-go="3"]) i,
  html.js .how[data-active="4"] .how-progress i { background: var(--vc-primary); }
  .screens { position: relative; overflow: hidden; }
  .screens .scr { display: block; width: 100%; border-radius: 0; opacity: 0; transform: scale(.985); transition: opacity .25s var(--ease), transform .7s var(--ease); }
  .screens .scr + .scr { position: absolute; inset: 0; }
  html.js .how[data-active="1"] .scr[data-s="1"],
  html.js .how[data-active="2"] .scr[data-s="2"],
  html.js .how[data-active="3"] .scr[data-s="3"],
  html.js .how[data-active="4"] .scr[data-s="4"] { opacity: 1; transform: none; transition: opacity .3s .1s var(--ease), transform .7s var(--ease); }
  html.js .how[data-active="4"] .scr[data-s="4"][data-reveal] { transition: opacity .3s .1s var(--ease), transform .7s var(--ease), --trp 1.1s .45s cubic-bezier(.4, 0, .6, 1); }
  html.js .how[data-active="3"] .scr[data-s="3"][data-ask] { transition: opacity .3s .1s var(--ease), transform .7s var(--ease), --qp .8s .45s cubic-bezier(.4, 0, .6, 1), --ap 1.1s 1.55s cubic-bezier(.4, 0, .6, 1), --bp .6s 2.95s cubic-bezier(.4, 0, .6, 1), --cp .5s 3.55s cubic-bezier(.4, 0, .6, 1); }
  html.js .how[data-active="4"] .screens:has(> .scr[data-s="4"][data-reveal]) { background-color: rgb(244 241 233); transition: background-color 0s .1s; }
  html.js .how[data-active="3"] .screens:has(> .scr[data-s="3"][data-ask]) { background-color: rgb(243 240 231); transition: background-color 0s .1s; }
  .stage-lines {
    position: absolute; z-index: 2; left: 50%; width: min(420px, 78cqw); height: auto;
    top: min(calc(var(--t24) + var(--pw) * .026 + var(--pw) * .948 * 2.1727 * .452 + 18px), calc(var(--stage-h) - 24px - min(420px, 78cqw) * var(--lnr)));
    border-radius: var(--r-s); background: #f5f1e8; opacity: 0; translate: -40% 24px;
    box-shadow: inset 0 0 0 1px var(--vc-border), 0 2px 4px rgb(var(--ink-shadow) / .08), 10px 26px 44px -16px rgb(var(--ink-shadow) / .34);
    transition: opacity .12s var(--ease), translate .6s var(--ease);
  }
  html.js .how[data-active="2"] .stage-lines { opacity: 1; translate: -40% 0; transition: opacity .45s .55s var(--ease), translate .6s .55s var(--ease); }
  html.js .how-stage .device--how { transition: translate .7s var(--ease); }
  html.js .how[data-active="1"] .how-stage .device--how { translate: 0 calc(var(--slv) - (var(--t24) + 2px + var(--pw) * .026 + (var(--pw) * .948 - 4px) * 2.1727 * var(--r1t))); }
  html.js .how-stage .scr[data-s="1"] { clip-path: inset(calc(var(--r1t) * 100%) 0 calc((1 - var(--rc)) * 100%) 0); }
  html.js .how-stage { --sh1: calc((var(--pw) * .948 - 4px) * 2.1727); clip-path: inset(0 round var(--r-l)); transition: clip-path .7s var(--ease); }
  html.js .how[data-active="1"] .how-stage {
    clip-path: inset(0 0 max(0px, var(--stage-h) - var(--slv) - var(--sh1) * (var(--rc) - var(--r1t)) - var(--g1) - var(--k1) - var(--cw) * var(--llr) - var(--gb)) 0 round var(--r-l));
  }
  html.js .how-stage::after {
    content: ""; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: var(--slv); pointer-events: none;
    background: radial-gradient(80% 60% at 100% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-accent-bg);
    box-shadow: inset 0 -1px 0 rgb(255 253 248 / .85), 0 1px 0 rgb(var(--ink-shadow) / .07), 0 8px 14px -8px rgb(var(--ink-shadow) / .45);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  html.js .how[data-active="1"] .how-stage::after { opacity: 1; transition-delay: .35s; }
  html.js .how-stage .stage-live { opacity: 0; translate: -50% calc(var(--t24) + 2px + var(--pw) * .026 + (var(--pw) * .948 - 4px) * 2.1727 * var(--r1t) - var(--slv)); transition: opacity .2s var(--ease), translate .7s var(--ease); }
  html.js .how[data-active="1"] .how-stage .stage-live { opacity: 1; translate: -50% 0; transition: opacity .35s .25s var(--ease), translate .7s var(--ease); }
}
.stage-lines, .stage-live { display: none; }
@media (min-width: 1021px) { html.js :is(.stage-lines, .stage-live) { display: block; } html.js .stage-live { display: grid; } }

.sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: start; max-width: none; }
.sec-head--split .sec-sub { margin-top: 0; }
.mac-sec { padding-bottom: calc(var(--sec-y) * .8); }
.mac-sec .sec-head { max-width: none; }
.mac-sec .sec-sub { max-width: 28em; }
.desk {
  --gw: clamp(496px, 100vw - var(--bleed) - var(--mw-max, 891px) - 40px, 509px);
  --mw: clamp(858px, 100vw - var(--bleed) - var(--gw) - 20px, var(--mw-max, 891px));
  --zone: calc(100vw - var(--bleed) - var(--mw));
  --cx: max(0px, (var(--zone) - 20px - var(--gw)) / 2);
  --cw: min(280px, var(--zone) - 64px);
  --ph: calc(var(--gw) * var(--lib-h));
  --ptop: calc(40px + var(--mw) * var(--k-hgt) - var(--ph));
  position: relative; margin: 0; overflow: hidden;
  background: radial-gradient(70% 70% at 6% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-accent-bg);
  box-shadow: inset 0 1px 0 rgb(var(--ink-shadow) / .05);
}
.desk.grain::before { opacity: .3; }
.desk-in { position: relative; }
.mac-win {
  position: relative; width: var(--mw); margin: 0 0 0 var(--zone); padding-top: 40px;
  filter: drop-shadow(0 1px 1px rgb(var(--ink-shadow) / .16)) drop-shadow(0 22px 40px rgb(var(--ink-shadow) / .22));
}
.mac-win picture, .mac-win img { display: block; width: 100%; }
.win-card {
  position: absolute; z-index: 2;
  left: var(--wc-x); top: calc(40px + var(--mw) * var(--k-top)); width: var(--wc-w); min-height: calc(var(--mw) * var(--k-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 14px; border-radius: calc(var(--mw) * var(--k-r)); background: var(--vc-surface);
  box-shadow: var(--ring), 0 2px 4px rgb(var(--ink-shadow) / .1);
}
.win-card--ring { min-height: 0; height: calc(var(--mw) * var(--k-h)); padding: 0; background: transparent; box-shadow: var(--ring); overflow: hidden; }
.win-card--ring > * { visibility: hidden; }
.win-h { display: flex; gap: 9px; align-items: flex-start; font-size: clamp(14px, var(--mw) * .0172, 15.5px); font-weight: 600; line-height: 1.32; color: var(--vc-text); }
.win-h .i { margin-top: 1px; color: var(--vc-text-2); }
.win-sub { margin-top: 4px; font-size: clamp(14px, var(--mw) * .016, 14.5px); line-height: 1.38; color: var(--vc-text-2); }
.win-track { height: 6px; margin-top: 8px; border-radius: var(--r-pill); background: var(--vc-track); overflow: hidden; }
.win-track i { display: block; height: 100%; border-radius: inherit; background: var(--vc-primary); }
.callout--mac {
  right: auto; height: auto; display: flex; flex-direction: row-reverse; align-items: center; animation: none;
  top: calc(40px + var(--mw) * var(--k-mid)); translate: 0 -50%;
  left: calc(var(--cx) + (var(--gw) - var(--cw)) / 2);
  width: calc(var(--zone) - var(--cx) - (var(--gw) - var(--cw)) / 2 + var(--mw) * var(--k-x) - 8px);
}
.callout--mac .callout-card { position: relative; right: auto; top: auto; translate: none; width: var(--cw); flex: none; }
.callout--mac .callout-arm { position: relative; left: auto; top: auto; right: auto; flex: 1; height: 2px; border: 0; border-radius: 0; background: var(--vc-primary); }
.callout--mac .callout-arm::after { left: auto; right: -4px; top: -3px; }
.callout-stem { display: none; }
.callout--mac .callout-stem {
  display: block; position: absolute; left: calc(var(--cw) / 2 - 1px); top: 100%; width: 2px;
  height: calc(var(--ptop) - 40px - var(--mw) * var(--k-mid) - 50%); background: var(--vc-primary);
}
.device--pair {
  position: absolute; z-index: 3; top: var(--ptop); left: var(--cx);
  width: var(--gw); height: var(--ph); overflow: hidden; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--vc-bg);
  box-shadow: 0 0 0 1px rgb(var(--ink-shadow) / .06), 0 1px 2px rgb(var(--ink-shadow) / .08), 10px 24px 44px -20px rgb(var(--ink-shadow) / .34);
}
.device--pair picture, .device--pair img { display: block; width: 100%; }
@media (min-width: 1180px) and (max-width: 1573px) {
  .desk {
    --gw: 496px; --mw: var(--mw-max, 891px);
    --cx: max(0px, var(--zone) + 80px - var(--gw));
    --cw: min(280px, var(--zone) - 24px - var(--cx));
  }
  .callout--mac { left: var(--cx); width: calc(var(--zone) - var(--cx) + var(--mw) * var(--k-x) - 8px); }
  .device--pair { box-shadow: 0 0 0 1px rgb(var(--ink-shadow) / .06), 0 1px 2px rgb(var(--ink-shadow) / .08), 18px 24px 48px -16px rgb(var(--ink-shadow) / .42); }
  .mac-win::after {
    content: ""; position: absolute; z-index: 1; left: 0; top: var(--ptop); bottom: 0;
    width: calc(var(--mw) * 566 / 1592); background: rgb(238 232 223);
  }
}
.route { display: none; }
@media (min-width: 961px) and (max-width: 1179px) {
  .desk {
    --gw: 496px;
    --mw: min(var(--mw-max, 891px), 100vw - 2 * var(--bleed));
    --wx: calc(100vw - 2 * var(--bleed) - var(--mw));
    --ax: calc(var(--wx) + var(--mw) * .206);
    --cx: clamp(0px, var(--ax) - var(--gw) / 2, 100vw - 2 * var(--bleed) - var(--gw));
    padding-top: 40px;
  }
  .desk-in { display: flex; flex-direction: column; align-items: flex-start; }
  .callout--mac { display: none; }
  .device--pair { order: 1; position: relative; top: auto; left: auto; margin-left: var(--cx); height: auto; border-radius: var(--r-l); }
  .route { display: block; order: 2; position: relative; z-index: 4; width: 100%; height: 128px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--vc-text-2); }
  .route::before { content: ""; position: absolute; left: calc(var(--ax) - 1px); top: 0; bottom: calc(7px - 40px - var(--mw) * var(--k-top)); border-left: 2px dashed rgb(70 87 79 / .5); }
  .route-pill { position: absolute; left: var(--ax); top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--vc-surface); box-shadow: 0 0 0 1px var(--vc-border-strong), var(--shadow-card); color: var(--vc-text); font-size: 15px; white-space: nowrap; }
  .route-pill .i { color: var(--vc-accent-ink); }
  .route-l { position: absolute; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .route-l--go { right: calc(100% - var(--ax) + 14px); top: 10px; }
  .route-l--back { left: calc(var(--ax) + 14px); bottom: 10px; }
  .route-l--go .i { transform: rotate(90deg); }
  .route-l--back .i { transform: rotate(-90deg); }
  .mac-win { order: 3; margin: 0 0 0 var(--wx); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .desk-in:not(.is-on) .route::before { clip-path: inset(0 0 100% 0); }
  html.js .desk-in .route::before { transition: clip-path .45s cubic-bezier(.4, 0, .6, 1); }
  html.js .desk-in:not(.is-on) .win-card { opacity: 0; transform: translateY(6px); }
  html.js .desk-in .win-card { transition: opacity .3s .5s, transform .3s .5s var(--ease); }
  html.js .desk-in:not(.is-on) .win-track i { transform: scaleX(0); }
  html.js .desk-in .win-track i { transform-origin: left; transition: transform 1.2s .8s cubic-bezier(.25, .8, .3, 1); }
  html.js .mac-win--ring::before {
    content: ""; position: absolute; z-index: 3; pointer-events: none;
    left: var(--rb-x); width: var(--rb-w); top: calc(40px + var(--mw) * var(--rb-top)); height: calc(var(--mw) * var(--rb-h));
    border-radius: 999px 0 0 999px; background: var(--rb-track);
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path 1.2s .8s cubic-bezier(.25, .8, .3, 1), visibility 0s 2s;
  }
  html.js .desk-in:not(.is-on) .mac-win--ring::before { clip-path: inset(0); visibility: visible; }
}
@media print {
  .desk-in .win-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .desk-in .win-track i { transform: none !important; transition: none !important; }
  .desk-in .route::before { clip-path: none !important; transition: none !important; }
  .mac-win--ring::before { display: none !important; }
}
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(40px, 4.5vw, 56px); }
.quad li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid var(--vc-border-strong); }
.q-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; background: var(--vc-primary); color: var(--vc-on-primary); box-shadow: inset 0 1px 0 rgb(255 253 248 / .14), 0 6px 14px -8px rgb(var(--ink-shadow) / .5); }
.q-ico svg { width: 30px; height: 30px; }
.quad h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.quad p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--vc-text-2); }

.night {
  position: relative; overflow: hidden; color: var(--vn-text); padding-block: var(--sec-y);
  background: radial-gradient(60% 70% at 78% 40%, var(--vn-tint) 0%, rgb(27 45 37 / 0) 72%), var(--vn-bg);
}
.priv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.eyebrow--night { color: var(--vn-accent-ink); }
.night .h2-display { max-width: 17ch; }
.night .h-l { font-weight: 300; }
.priv-p { margin-top: 24px; color: var(--vn-text-2); max-width: 34em; }
.label-card {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 12px 18px 12px 12px; max-width: 100%;
  border-radius: var(--r-s); background: var(--vn-surface); box-shadow: inset 0 0 0 1px var(--vn-border-strong);
  color: var(--vn-text); text-decoration: none; transition: box-shadow .2s var(--ease), background-color .2s;
}
.label-card:hover { background: var(--vn-press); box-shadow: inset 0 0 0 1px var(--vn-accent-ink); }
.label-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vn-accent-bg); color: var(--vn-accent-ink); flex: none; }
.label-t { display: grid; gap: 1px; min-width: 0; }
.label-t small { font-size: 14px; line-height: 1.35; color: var(--vn-text-2); }
.label-t b { font-size: 17px; line-height: 1.3; font-weight: 650; }
.label-out { color: var(--vn-text-3); margin-left: 4px; }
.night .text-link { display: flex; width: max-content; max-width: 100%; margin-top: 18px; }
.night :focus-visible { outline-color: var(--vn-accent-ink); }
.zero-list { display: grid; }
.zero-list li { display: grid; grid-template-columns: clamp(44px, 3.8vw, 58px) minmax(0, 1fr); align-items: baseline; column-gap: 14px; padding: 22px 0; border-top: 1px solid var(--vn-border); }
.zero-list li:last-child { border-bottom: 1px solid var(--vn-border); }
.zero-list li > div { display: grid; gap: 6px; }
.zr { font: 200 clamp(3.4rem, 2.6rem + 2vw, 4.6rem)/.8 var(--font-display); letter-spacing: -.04em; color: var(--vn-primary); font-variant-numeric: lining-nums tabular-nums; }
.zero-list b { font: 650 clamp(1.2rem, 1rem + .5vw, 1.45rem)/1.2 var(--font-display); letter-spacing: -.01em; color: var(--vn-text); }
.zero-list span:not(.zr) { font-size: 15.5px; line-height: 1.5; color: var(--vn-text-2); }

.price-sec { position: relative; background: radial-gradient(70% 50% at 50% 0%, var(--lit), rgb(255 253 248 / 0) 70%), linear-gradient(180deg, var(--vc-bg-tint) 0%, var(--vc-accent-bg) 100%); }
.price-sec.grain::before { opacity: .28; }
.ticket-wrap { max-width: 620px; margin-inline: auto; filter: drop-shadow(0 1px 1px rgb(var(--ink-shadow) / .12)) drop-shadow(10px 26px 36px rgb(var(--ink-shadow) / .18)); }
.ticket { --notch: 14px; --pad: clamp(24px, 4vw, 48px); }
.t-top, .t-bot { background: var(--vc-surface); }
.t-top { border-radius: var(--r-l) var(--r-l) 0 0; padding: 40px var(--pad) 30px; text-align: center;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat; }
.t-bot { border-radius: 0 0 var(--r-l) var(--r-l); padding: 22px var(--pad) 34px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat; }
.t-bot::after { content: ""; position: absolute; left: calc(var(--notch) + 12px); right: calc(var(--notch) + 12px); top: 0; border-top: 2px dashed var(--vc-border-strong); }
.t-top.grain::before, .t-bot.grain::before { opacity: .14; }
.ticket-tag { font-size: 14.5px; font-weight: 600; color: var(--vc-text-2); }
.ticket-amt { display: grid; justify-items: center; gap: 10px; margin-top: 14px; }
.num--xl { font-size: clamp(4.4rem, 3rem + 4vw, 7rem); }
@media (max-width: 419px) {
  .ticket-amt { container-type: inline-size; }
  :lang(tr) .num--xl { font-size: min(4.4rem, 22.5cqi); }
  :is(:lang(pt), :lang(ko), :lang(uk), :lang(ro)) .num--xl { font-size: min(4.4rem, 26cqi); }
}
.ticket-per { font-size: 16px; color: var(--vc-text-2); }
.ticket-alt { margin-top: 6px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--vc-text); font-variant-numeric: tabular-nums; }
.ticket-rows div { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; }
.ticket-rows dt { flex: 1; display: flex; align-items: baseline; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--vc-text-2); }
.ticket-rows dt::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--vc-border-strong); transform: translateY(-4px); }
.ticket-rows dd { font-size: 16px; font-weight: 650; color: var(--vc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket-foot { display: grid; justify-items: center; text-align: center; gap: 16px; margin-top: 22px; padding-top: 28px; border-top: 1px solid var(--vc-border); }
.ticket-foot p { max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--vc-text-3); }
.ticket-compare { margin-top: 14px; text-align: center; font-size: 14px; line-height: 1.5; }
.ticket-compare a { display: inline-block; color: var(--vc-text-2); text-decoration: underline; text-underline-offset: 3px; }
.ticket-compare a:hover { color: var(--vc-text); }
@media (pointer: coarse), (max-width: 560px) { .ticket-compare a { padding-block: 12px; margin-block: -12px; } }

.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 88px); max-width: 1040px; margin: clamp(72px, 8vw, 104px) auto 0; padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid rgb(var(--ink-shadow) / .14); }
.voice { display: flex; flex-direction: column; margin: 0; }
.voice > blockquote { flex: 1 0 auto; }
@media (min-width: 1021px) {
  .voices { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  :lang(de) .voices { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  :lang(ja) .voices { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
  @supports (grid-template-rows: subgrid) {
    .voices { row-gap: 0; }
    .voice { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
  .voice--review .voice-who { flex: 1; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: baseline; }
  .voice--review .voice-meta { grid-column: 1 / -1; grid-row: 2; }
  .voice--review .voice-link { grid-column: 2; grid-row: 1; justify-self: end; padding-block: 6px; margin-block: -6px; }
}
@media (pointer: coarse) and (min-width: 1021px) {
  .voice--review .voice-link { position: relative; }
  .voice--review .voice-link::after { content: ""; position: absolute; inset: -7px 0; }
}
.voice-title { font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--vc-accent-ink); margin-bottom: 14px; }
.voice-q { font-size: clamp(1.25rem, 1.02rem + .65vw, 1.6rem); line-height: 1.36; font-weight: 500; letter-spacing: -.008em; color: var(--vc-text); text-indent: -.42em; text-wrap: pretty; }
:lang(ja) .voice-q { text-indent: 0; hanging-punctuation: none; font-feature-settings: "palt"; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.voice-rt { font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--vc-text); margin-bottom: 8px; text-wrap: balance; }
.voice-by { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; font-size: 15px; line-height: 1.45; color: var(--vc-text-2); }
.voice-who { display: grid; gap: 2px; min-width: 0; }
.voice-who b { color: var(--vc-text); }
.monogram { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vc-brand-forest); color: var(--vc-brand-cream); font: 700 15px/1 var(--font-display); letter-spacing: .03em; box-shadow: inset 0 1px 0 rgb(241 236 224 / .22), 0 8px 18px -10px rgb(var(--ink-shadow) / .5); }
.monogram--user { background: var(--vc-surface); color: var(--vc-accent-ink); box-shadow: inset 0 0 0 1.5px var(--vc-border-strong); }
.stars { display: inline-block; margin-left: 6px; color: var(--vc-accent-ink); letter-spacing: .06em; font-size: 14px; }
.voice-meta { display: block; font-size: 14px; line-height: 1.5; color: var(--vc-text-2); }
.voice-meta > span { display: inline-block; }
.voice-link { display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; padding-block: 12px; margin-block: -8px -12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vc-primary); text-underline-offset: 3px; text-decoration-color: rgb(18 78 59 / .35); }

.faq-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.faq-head .sec-sub { font-size: 17px; }
.faq-head .text-link { margin-top: 12px; gap: 10px; }
.faq details { border-bottom: 1px solid var(--vc-border-strong); }
.faq details:first-child { border-top: 1px solid var(--vc-border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 14px 0; cursor: pointer; list-style: none; font: 650 19px/1.35 var(--font-display); letter-spacing: -.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--vc-text-3); transition: transform .25s var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq summary:hover, .faq details[open] summary { color: var(--vc-primary); }
.faq details[open] summary .i { color: var(--vc-primary); }
.faq details p { max-width: 62ch; padding: 0 0 24px; color: var(--vc-text-2); }

.about { padding-block: calc(var(--sec-y) * .6); }
.about__layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.about__intro { max-width: 34em; margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--vc-text-2); }

.closing {
  --icon: 152px;
  position: relative; overflow: hidden; color: var(--vn-text); text-align: center;
  padding-block: clamp(64px, 5.6vw, 88px) clamp(72px, 6.4vw, 104px);
  background: radial-gradient(56% 50% at 50% 18%, var(--vn-tint) 0%, rgb(27 45 37 / 0) 72%), var(--vn-bg);
}
.closing :focus-visible { outline-color: var(--vn-accent-ink); }
.closing-in { display: grid; justify-items: center; }
.sign { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--icon) minmax(0, 1fr); align-items: center; margin-bottom: clamp(48px, 4.4vw, 64px); }
.sign-wave { position: absolute; left: 0; top: 50%; width: 50%; height: var(--icon); margin-top: calc(var(--icon) / -2); color: var(--vc-brand-sage); }
.sign-icon { grid-column: 2; grid-row: 1; position: relative; width: var(--icon); height: var(--icon); border-radius: 21.5%; box-shadow: 0 0 0 1px rgb(241 236 224 / .06), 0 24px 60px -18px rgb(0 0 0 / .55); }
.sign-line { grid-column: 3; grid-row: 1; position: relative; justify-self: start; display: grid; justify-items: start; gap: 14px; max-width: calc(100% - var(--bleed)); padding-left: clamp(32px, 2.8vw, 44px); text-align: left; }
.sign-who { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1; }
.sign-who b { color: var(--vn-speaker-1); font-weight: 700; }
.sign-ts { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--vn-surface); box-shadow: inset 0 0 0 1px var(--vn-border-strong); color: var(--vn-accent-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sign-text { font: 500 clamp(2.5rem, 1rem + 1.95vw, 3rem)/1.14 var(--font-display); letter-spacing: -.02em; color: var(--vn-text); text-wrap: balance; }
.closing .h2-display { max-width: 24ch; color: var(--vn-text); }
.closing .h-l { font-weight: 300; }
.closing-sub { margin-top: 20px; font-size: 1.2rem; color: var(--vn-text-2); }
.cta-row--center { justify-content: center; margin-top: 32px; }
.closing .text-link { margin-top: 10px; }
@media (min-width: 1180px) { :lang(de) .sign-text { font-size: min(clamp(2.5rem, 1rem + 1.95vw, 3rem), 2.75rem); } }
@media (min-width: 1180px) and (max-width: 1279px) { :lang(de) .sign-line { padding-left: 24px; max-width: calc(100% - var(--bleed) + 8px); } }
@media (min-width: 1021px) and (max-height: 700px) { .sign { margin-bottom: clamp(40px, 3.6vw, 52px); } }
@media (min-width: 1021px) and (max-height: 620px) { .sign { margin-bottom: 28px; } .closing-sub { margin-top: 14px; } .cta-row--center { margin-top: 22px; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .sign:not(.is-on) .sign-wave { opacity: .6; transform: scaleY(.42); }
  .sign-wave { transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
  .sign-wave rect { transform-box: fill-box; transform-origin: 50% 50%; }
  .sign.is-on .sign-wave rect { animation: sign-talk 1.2s ease-in-out var(--d, 0s) 2 backwards; }
  html.js .sign:not(.is-on) .sign-text { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  html.js .sign .sign-text {
    -webkit-mask: linear-gradient(90deg, #000 0 46%, transparent 54% 100%) 0 0 / 220% 100% no-repeat;
            mask: linear-gradient(90deg, #000 0 46%, transparent 54% 100%) 0 0 / 220% 100% no-repeat;
    transition: -webkit-mask-position .9s .5s cubic-bezier(.5, 0, .4, 1), mask-position .9s .5s cubic-bezier(.5, 0, .4, 1);
  }
  html.js .sign:not(.is-on) .sign-who { opacity: 0; translate: 0 6px; }
  .sign-who { transition: opacity .4s 1.5s var(--ease), translate .4s 1.5s var(--ease); }
}
@media print { .sign-text { -webkit-mask: none !important; mask: none !important; } .sign-who { opacity: 1 !important; translate: none !important; transition: none !important; } .sign-wave { opacity: 1 !important; transform: none !important; transition: none !important; } }
@keyframes sign-talk {
  0% { transform: scaleY(.35); } 15% { transform: scaleY(1); } 28% { transform: scaleY(.55); } 42% { transform: scaleY(.95); }
  56% { transform: scaleY(.3); } 70% { transform: scaleY(.85); } 85% { transform: scaleY(.5); } 100% { transform: scaleY(1); }
}
@media (max-width: 1179px) {
  .sign { grid-template-rows: var(--icon) auto; row-gap: clamp(24px, 3.2vw, 40px); }
  .sign-wave { top: 0; margin-top: 0; }
  .sign-line { grid-column: 1 / -1; grid-row: 2; justify-self: center; justify-items: center; max-width: 100%; padding: 0 var(--gutter); text-align: center; }
  .sign-text { max-width: min(15em, 100%); min-width: 0; }
}

.site-foot.site-foot--v2 { background: none; }
@media (max-width: 1020px) { .site-foot--v2 .foot-lang-grid a { min-width: 0; } }
.lang-tag { display: inline; padding: 1px 6px 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--vc-border-strong); color: var(--vc-text-2); font-size: 13px; font-weight: 650; letter-spacing: .04em; vertical-align: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(:lang(de), :lang(nl), :lang(sv), :lang(da), :lang(nb), :lang(cs), :lang(sk), :lang(uk), :lang(tr)) :is(.foot-cols a, .foot-h, .tut-row, .text-link, .tr-list li) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }

.film-dlg { padding: 0; border: 0; background: transparent; width: min(92vw, 420px, calc((100vh - 48px) * 9 / 16)); max-width: min(92vw, 420px); }
.film-dlg::backdrop { background: rgb(15 28 23 / .72); }
.film-box { position: relative; }
.film-box video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--r-l); background: var(--vn-bg); }
.film-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--vc-surface); box-shadow: var(--shadow-pop); cursor: pointer; }
.film-close:focus-visible { outline: 3px solid var(--vc-accent-ink); outline-offset: 3px; }

@media (min-width: 941px) {
  .hero-copy { align-self: start; min-height: min(var(--hero-h), 100vh - var(--head-h)); }
}
@media (min-width: 941px) and (max-width: 1279px) {
  .hero {
    --copy-w: min(540px, 47vw, 100vw - 2 * var(--bleed) - 462px); --pw: clamp(412px, 100vw - 2 * var(--bleed) - var(--copy-w) - var(--gap) - 24px, 420px); --dy: 156px;
    --hero-h: max(780px, calc(var(--dy) + var(--rim) + var(--bz) + var(--sh) * var(--hf) + 16px));
  }
  .hero-plane { left: calc(var(--bleed) + var(--copy-w) + var(--gap) + (100vw - 2 * var(--bleed) - var(--copy-w) - var(--gap) - var(--pw)) / 2 + var(--pw) * .3); }
  .device--hero { left: calc((100% - var(--pw)) / 2); }
  .hero .callout { left: 50%; right: auto; top: auto; bottom: calc(100% - var(--dy) + 2px); height: auto; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
  .hero .callout-arm { position: relative; order: 2; left: auto; right: auto; width: 2px; height: 26px; border: 0; border-radius: 0; background: var(--vc-primary); }
  .hero .callout-arm::after { left: -3px; top: auto; bottom: -4px; }
  .hero .callout-card { position: relative; order: 1; right: auto; top: auto; translate: none; width: max-content; max-width: min(360px, 90vw); grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 16px 12px 12px; }
  .hero .loupe { grid-row: 1 / 3; margin: 0; max-width: 150px; }
  .hero .callout-card b, .hero .callout-card > span { grid-column: 2; }
}
@media (max-width: 1020px) {
  :root { --head-h: 62px; }
  .how-step { grid-template-columns: 1fr; gap: 28px; }
  .how-copy { max-width: 640px; }
  .how-fig { height: auto; padding: 0; display: block; max-width: 560px; background: none; overflow: visible; }
  .how-fig::before { display: none; }
  .how-fig .device--how {
    position: relative; width: 100%; padding: 0; border: 0; border-radius: var(--r-l); overflow: hidden;
    background: #f5f1e8; box-shadow: inset 0 0 0 1px rgb(var(--ink-shadow) / .08), 0 1px 2px rgb(var(--ink-shadow) / .08), 10px 24px 44px -20px rgb(var(--ink-shadow) / .36);
  }
  .how-fig--rec .device--how { background: var(--vn-bg); }
  .how-fig .device--how::before { content: ""; display: block; padding-top: calc(217.27% * 1320 / var(--scw) * var(--ch)); }
  .how-fig .device--how::after, .how-fig .btns { display: none; }
  .how-fig { --scx: 24; --scw: 1272; }
  .how-fig .device--how img { position: absolute; left: 0; top: 0; width: calc(100% * 1320 / var(--scw)); max-width: none; margin-left: calc(-100% * var(--scx) / var(--scw)); margin-top: calc(-217.27% * 1320 / var(--scw) * var(--c0)); border-radius: 0; }
  html.js .how-fig .rec-fig { inset: 0 auto 0 0; width: calc(100% * 1320 / var(--scw)); margin-left: calc(-100% * var(--scx) / var(--scw)); }
  .lines-card { display: none; }
  .how-step > * { width: 100%; margin-inline: auto; }
  .how-fig .live-card { position: relative; left: auto; bottom: auto; translate: none; width: calc(100% - 12px); margin: 10px auto 0; padding: 8px 4px 2px; }
  .sec-head--split { grid-template-columns: 1fr; }
  .quad { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .quad li { padding: 18px 0; }
  .quad li:last-child { border-bottom: 1px solid var(--vc-border-strong); }
  .priv-grid { grid-template-columns: 1fr; }
  .zero-list { margin-top: 8px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .closing { --icon: 120px; }
  .sign-text { font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem); }
  .voices { grid-template-columns: 1fr; max-width: 620px; gap: 44px; }
}
@media (max-width: 960px) {
  .desk { padding: 28px 0 36px; }
  .desk-in { display: flex; flex-direction: column; align-items: center; }
  .callout--mac { display: none; }
  .device--pair {
    order: 1; position: relative; left: auto; top: auto; bottom: auto; width: min(100%, 420px); height: auto; padding: 0; border: 0; border-radius: var(--r-l); overflow: hidden;
    background: #f5f1e8; box-shadow: inset 0 0 0 1px rgb(var(--ink-shadow) / .08), 0 1px 2px rgb(var(--ink-shadow) / .08), 10px 24px 44px -20px rgb(var(--ink-shadow) / .34);
  }
  .device--pair img { border-radius: 0; }
  .route { display: block; order: 2; position: relative; width: 100%; height: 128px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--vc-text-2); }
  .route::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgb(70 87 79 / .5); }
  .route-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--vc-surface); box-shadow: 0 0 0 1px var(--vc-border-strong), var(--shadow-card); color: var(--vc-text); font-size: 15px; white-space: nowrap; }
  .route-pill .i { color: var(--vc-accent-ink); }
  .route-l { position: absolute; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .route-l--go { right: calc(50% + 14px); top: 10px; }
  .route-l--back { left: calc(50% + 14px); bottom: 10px; }
  .route-l--go .i { transform: rotate(90deg); }
  .route-l--back .i { transform: rotate(-90deg); }
  .mac-win {
    order: 3; width: min(100%, 420px); margin: 0; padding: 0; filter: none;
    border-radius: var(--r-s); overflow: hidden; background: var(--vc-bg-sunken);
    box-shadow: inset 0 0 0 1px rgb(var(--ink-shadow) / .1), 0 1px 2px rgb(var(--ink-shadow) / .08), 10px 24px 48px -16px rgb(var(--ink-shadow) / .34);
  }
  .win-card { left: 4.55%; top: var(--side-top); width: 87.8%; min-height: var(--side-card); padding: 12px 14px; border-radius: 12px; }
  .win-card--ring { min-height: 0; height: calc(var(--side-card) * 170 / 174); padding: 0; border-radius: 12px; }
  .win-h { font-size: 15px; }
  .win-h span { min-width: 0; }
  .win-sub { margin-top: 6px; font-size: 14px; }
}
@media (min-width: 961px) and (max-resolution: 1dppx) and (prefers-reduced-motion: no-preference) {
  html.js .mac-win--ring::before { background: var(--rb-track-1x); }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  html.js .mac-win--ring::before { left: var(--rbs-x); width: var(--rbs-w); top: var(--rbs-top); height: var(--rbs-h); background: var(--rbs-track); }
}
@media (max-width: 940px) {
  .hero { --pw: 412px; --dy: 32px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-block: 24px 28px; }
  .hero h1 { max-width: 15ch; }
  .hero-plane { display: none; }
  .hero-stage { margin-inline: calc(-1 * var(--gutter)); height: calc(var(--dy) + var(--rim) + var(--bz) + var(--sh) * var(--vt1)); overflow: hidden; }
  .hero-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: radial-gradient(80% 60% at 0% 0%, var(--lit), rgb(255 253 248 / 0) 70%), var(--vc-accent-bg); box-shadow: inset 0 1px 0 rgb(255 253 248 / .7); }
  .hero-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: var(--grain); background-size: var(--grain-size); mix-blend-mode: multiply; pointer-events: none; }
  .hero-stage .stage-set { z-index: 1; }
  .device--hero { left: var(--gutter); }
  .hero .callout { left: calc(var(--gutter) + var(--cc)); right: var(--gutter); --cardw: min(260px, 100% - var(--pw) + var(--cc) - 24px); }
  .type-veil { top: calc(var(--bz) + var(--sh) * var(--vt0)); height: calc(var(--sh) * (var(--vt1) - var(--vt0))); }
  .screen-foot { display: none; }
}
@media (max-width: 700px) {
  .hero-stage { --m-top: 62px; --cw: min(100vw - 24px, 480px); height: auto; overflow: visible; padding: 0 calc((100vw - var(--cw)) / 2); }
  .hero-stage::before, .hero-stage::after { top: calc(var(--m-top) - 16px); bottom: -28px; }
  .stage-set { position: relative; inset: auto; padding-top: var(--m-top); }
  .device--hero {
    position: relative; left: auto; top: auto; width: 100%; padding: 0; border: 0; border-radius: var(--r-l); overflow: hidden;
    background: #f5f1e8; box-shadow: inset 0 0 0 1px rgb(var(--ink-shadow) / .08), 0 2px 3px rgb(var(--ink-shadow) / .1), 10px 26px 44px -18px rgb(var(--ink-shadow) / .38);
  }
  .device--hero img { border-radius: 0; -webkit-mask: linear-gradient(180deg, #000 calc(100% - 44px), #0000); mask: linear-gradient(180deg, #000 calc(100% - 44px), #0000); }
  .device--hero::after, .device--hero .btns { display: none; }
  .device--hero .chip-ring { left: calc(100% * var(--hc-x) - 5px); top: calc(100% * var(--hc-y) - 5px); width: calc(100% * var(--hc-w) + 10px); height: calc(100% * var(--hc-h) + 10px); }
  .device--hero .chip-pre { left: calc(100% * var(--hc-x)); top: calc(100% * var(--hc-y)); width: calc(100% * var(--hc-w)); height: calc(100% * var(--hc-h)); }
  .type-veil { left: 0; right: 0; top: calc(100% * var(--vm0)); bottom: 0; height: auto; }
  .hero .callout { position: absolute; left: 8px; right: 8px; top: 4px; bottom: auto; height: auto; transform: none; display: block; }
  .hero .callout-card { position: static; display: block; width: max-content; max-width: 100%; padding: 8px 14px; translate: none; }
  .hero .loupe, .hero .callout-card > span { display: none; }
  .hero .callout-card b { display: block; font-size: 14.5px; line-height: 1.3; }
  .hero .callout-arm { position: absolute; z-index: -1; left: calc((100% + 16px) * (var(--hc-x) + var(--hc-w) / 2) - 8px - 1px); right: auto; top: 18px; width: 2px; height: calc(var(--m-top) - 4px - 18px - 3px); border: 0; border-radius: 0; background: var(--vc-primary); }
  .hero .callout-arm::after { left: -3px; top: auto; bottom: -4px; }
}
@media (max-width: 560px) {
  .hero-stage { --fw: var(--cw); --fbz: calc(var(--fw) * .026); }
  .hero-stage::before, .hero-stage::after { bottom: 0; }
  .device--hero {
    --pw: var(--fw);
    padding: var(--bz) var(--bz) 0; border: var(--rim) solid transparent; border-bottom: 0;
    border-radius: calc(var(--pw) * .165) calc(var(--pw) * .165) 0 0;
    background:
      linear-gradient(150deg, var(--vn-press) 0%, var(--vn-bg) 26%, var(--vn-bg) 74%, var(--vn-surface) 100%) padding-box,
      linear-gradient(135deg, var(--vn-text-2) 0%, var(--vn-border-strong) 12%, var(--vn-press) 38%, var(--vn-border-strong) 60%, var(--vn-border) 82%, var(--vn-text-3) 100%) border-box;
    box-shadow: 0 0 0 1px rgb(20 28 24 / .32), inset 0 0 0 1px rgb(236 230 218 / .07), 0 2px 3px rgb(20 28 24 / .26), 5px 12px 20px -8px rgb(var(--ink-shadow) / .32);
    clip-path: inset(-40px -40px 0 -40px);
  }
  .device--hero picture { display: block; overflow: hidden; background: #f5f1e8; border-radius: calc(var(--pw) * .136) calc(var(--pw) * .136) 0 0; }
  .device--hero img { width: 100%; }
  .device--hero .chip-ring { left: calc(var(--bz) + (100% - 2 * var(--bz)) * var(--hc-x) - 5px); top: calc(var(--bz) + (100% - var(--bz)) * var(--hc-y) - 5px); width: calc((100% - 2 * var(--bz)) * var(--hc-w) + 10px); height: calc((100% - var(--bz)) * var(--hc-h) + 10px); }
  .device--hero .chip-pre { left: calc(var(--bz) + (100% - 2 * var(--bz)) * var(--hc-x)); top: calc(var(--bz) + (100% - var(--bz)) * var(--hc-y)); width: calc((100% - 2 * var(--bz)) * var(--hc-w)); height: calc((100% - var(--bz)) * var(--hc-h)); }
  .type-veil { left: var(--bz); right: var(--bz); top: calc(var(--bz) + (100% - var(--bz)) * var(--vm0)); }
  .hero .callout { left: calc(var(--gutter) - (100vw - var(--fw)) / 2); right: calc(var(--gutter) - (100vw - var(--fw)) / 2); }
  .hero .callout-arm { left: calc((100vw - var(--fw)) / 2 + 2px + var(--fbz) + (var(--fw) - 2 * var(--fbz) - 4px) * (var(--hc-x) + var(--hc-w) / 2) - var(--gutter) - 1px); }
}
@media (max-width: 359px) {
  .hero-copy { display: contents; }
  .hero .kicker { margin-top: 22px; }
  .hero .cta-row { margin-bottom: 12px; }
  .hero-stage { order: 1; }
  .hero .nums { order: 2; margin-top: 52px; }
}
@media (max-width: 760px) {
}
@media (max-width: 560px) {
  :root, .site-head.site-head--v2, .site-foot.site-foot--v2 { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  body { font-size: 16px; }
  .xs-hide { display: none; }
  .hero-copy { padding-block: 22px 12px; }
  .kicker { font-size: 14px; }
  .hero h1 { margin-top: 10px; }
  .hero .lead { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .cta-row { margin-top: 16px; gap: 6px 16px; flex-wrap: nowrap; }
  .nums { gap: 0 18px; margin-top: 16px; padding-top: 12px; }
  .nums > div + div { padding-left: 18px; }
  .nums .num { font-size: 2.4rem; }
  .nums .num--2 { font-size: calc(.85 * 2.4rem); }
  .nums dd { margin-top: 4px; font-size: 14px; line-height: 1.4; }
  .how-sec, .mac-sec, .night, .price-sec, .faq-sec { padding-block: 56px; }
  .how-steps { gap: 48px; grid-template-columns: minmax(0, 1fr); }
  .how-step { gap: 22px; grid-template-columns: minmax(0, 1fr); }
  .idx { font-size: 3.2rem; }
  .moment { gap: 4px 14px; }
  .moment-cap { font-size: 14.5px; }
  .how-copy h3 { margin-top: 14px; }
  .how-fig { width: auto; margin-inline: calc(-1 * var(--gutter)); max-width: none; --scx: 6; --scw: 1308; }
  .how-fig .device--how { border-radius: 0; box-shadow: inset 0 1px 0 rgb(var(--ink-shadow) / .08), inset 0 -1px 0 rgb(var(--ink-shadow) / .08); }
  .how-fig .live-card { width: 100%; border-radius: 0; padding: 8px 10px 2px; box-shadow: none; }
  .tut-row { display: block; margin-top: 16px; font-size: 15px; }
  .tut-row > .tut-play, .tut-dot { display: none; }
  .tut-w { display: contents; }
  .tut-body { display: grid; }
  .tut-label { font-size: 14.5px; line-height: 1.5; margin-bottom: 2px; }
  .tut-i { display: flex; justify-self: start; align-items: center; gap: 12px; min-height: 44px; white-space: normal; }
  .tut-tx { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .tut-t { white-space: nowrap; }
  .tut-play--i { display: grid; margin-top: 0; }
  .label-card { margin-top: 24px; }
  .zero-list li { padding: 18px 0; column-gap: 10px; }
  .desk { padding: 24px 0 32px; }
  .device--pair, .mac-win { width: calc(100% + 2 * var(--gutter) - 28px); }
  .voices { margin-top: 56px; padding-top: 36px; gap: 40px; }
  .voice-q { font-size: 1.22rem; }
  .voice-rt { font-size: 17px; }
  .monogram { width: 40px; height: 40px; font-size: 14px; }
  .faq summary { min-height: 60px; padding: 12px 0; font-size: 18px; }
  .closing { padding-block: 64px 56px; }
  .film-link { display: flex; width: max-content; max-width: 100%; margin: -1px 0 -9px; padding-block: 9px; }
  .closing { --icon: 88px; }
  .sign { row-gap: 22px; margin-bottom: 44px; }
  .sign-line { gap: 10px; }
  .sign-text { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.012em; }
  .sign-who { font-size: 17px; }
  .sign-ts { font-size: 15px; padding: 5px 10px; }
  .closing .h2-display { max-width: none; }
  .ticket-rows dt { font-size: 15px; }
  .ticket-rows dt::after { display: none; }
  .ticket-rows div { justify-content: space-between; }
  .ticket-rows dd { font-size: 15px; }
  .route-pill { font-size: 14.5px; padding: 0 14px; }
  .sec-head { margin-bottom: 36px; }
  .t-top { padding: 30px var(--pad) 24px; }
  .t-bot { padding: 16px var(--pad) 28px; }
  .ticket-rows div { padding: 9px 0; }
  .ticket-foot { margin-top: 16px; padding-top: 22px; }
  .quad li { padding: 16px 0; grid-template-columns: 44px 1fr; gap: 14px; }
  .q-ico { width: 44px; height: 44px; border-radius: 10px; }
  .q-ico svg { width: 28px; height: 28px; }
  .quad p { font-size: 15px; margin-top: 4px; }
}
@media (max-width: 389px) {
  .how-fig { --sm: 10px; }
  .how-fig .device--how::before { padding-top: calc((100% - 2 * var(--sm)) * 1320 / 1224 * 2.1727 * var(--ch)); }
  .how-fig .device--how img { width: calc((100% - 2 * var(--sm)) * 1320 / 1224); margin-left: calc(var(--sm) - (100% - 2 * var(--sm)) * 48 / 1224); margin-top: calc((2 * var(--sm) - 100%) * 1320 / 1224 * 2.1727 * var(--c0)); }
  html.js .how-fig .rec-fig { width: calc((100% - 2 * var(--sm)) * 1320 / 1224); margin-left: calc(var(--sm) - (100% - 2 * var(--sm)) * 48 / 1224); }
}
@media (min-width: 357px) and (max-width: 376px) { .how-fig { --sm: max(0px, (100vw - 357.2px) / 2); } }
@media (max-width: 359px) {
  .tut-i { min-height: 50px; }
  .tut-tx { flex-direction: column; align-items: flex-start; row-gap: 3px; line-height: 1.3; }
}
@media (min-width: 375px) and (max-width: 700px) {
  .hero .callout-via { display: inline; }
}
@media (max-width: 379px) {
  :lang(en) .hero .callout-via { display: none; }
}
.cta-row .text-link { white-space: nowrap; }
@media (max-width: 389px) {
  .cta-row { flex-wrap: wrap; }
}
@media (max-width: 419px) {
  :lang(uk) .cta-row { flex-wrap: wrap; }
}
@media (max-width: 459px) {
  :lang(ro) .cta-row { flex-wrap: wrap; }
}
@media (max-width: 409px) {
  :lang(hr) .cta-row { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  :root { --h1: 2.05rem; --h2-d: 1.85rem; --h2-m: 1.6rem; }
  .nums { grid-template-columns: 1fr; gap: 12px; }
  .nums > div + div { padding-left: 0; border-left: 0; }
}
@media (max-width: 340px) {
  :root { --h2-d: 1.6875rem; }
}
@media (max-height: 500px) { .site-head { position: relative; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .type-veil { display: none; }
}
@media print {
  .site-head, .film-dlg, .how-stage-col, .type-veil, .chip-pre, .rec-layer { display: none !important; }
  .how-fig--tr img, .how-fig--ai img { -webkit-mask: none !important; mask: none !important; }
  .how-fig { display: flex !important; }
}