@layer reset, tokens, base, layout, components, media, motion, pages, print;
@layer tokens {
:root {
color-scheme: light;
--bg: #FAF8F4;
--paper: #FAF8F4;
--paper-2: #F1ECE3;
--white: #FFFFFF;
--sky: #DDE9F0;
--sky-ink: #3F4A52;
--chip: rgba(250, 248, 244, .92);
--ink: #15130F;
--ink-2: #57514A;
--line: rgba(21, 19, 15, .16);
--line-strong: rgba(21, 19, 15, .32);
--control: #7A7269;
--orange: #EC520A;
--accent-ink: #B53905;
--sun: #FFC24A;
--warn-ink: #8A4B00;
--gut: clamp(16px, 4.4vw, 64px);
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--gut-l: max(var(--gut), var(--safe-l));
--gut-r: max(var(--gut), var(--safe-r));
--max: 1376px;
--narrow: 760px;
--header: 64px;
--sec: clamp(72px, 7.4vw, 120px);
--sec-s: clamp(56px, 7vw, 104px);
--r-s: 8px;
--r-m: 14px;
--r-l: 22px;
--r-pill: 999px;
--display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--text: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--fs-display: clamp(34px, min(7.4vw, 16svh), 116px);
--fs-h1: clamp(40px, min(6.4vw, 14svh), 100px);
--fs-h2: clamp(34px, min(5.4vw, 12svh), 84px);
--fs-h3: clamp(24px, 2.6vw, 40px);
--fs-h4: clamp(19px, 1.5vw, 22px);
--fs-intro: clamp(18px, 1.5vw, 21px);
--fs-body: 18px;
--fs-s: 15px;
--fs-xs: 14px;
--shadow-shot: 0 30px 60px -32px rgba(21, 19, 15, .38);
--shadow-pop: 0 24px 60px -20px rgba(21, 19, 15, .28);
--ease: cubic-bezier(.16, 1, .3, 1);
--t-fast: .2s;
--t-base: .35s;
}
@media (max-width: 699.98px) { :root { --fs-body: 17px; --header: 56px; } }
@media (max-height: 500px) {
:root {
--header: 52px; --sec: clamp(48px, 6vw, 72px); --sec-s: clamp(40px, 5vw, 56px);
--fs-display: clamp(32px, 12svh, 56px); --fs-h1: clamp(30px, 11svh, 48px); --fs-h2: clamp(28px, 10svh, 44px); --fs-h3: clamp(22px, 7.5svh, 30px);
}
}
}
@font-face {
font-family: "Archivo";
src: url("/fonts/archivo-latin.woff2") format("woff2");
font-weight: 100 900;
font-stretch: 62% 125%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Han Quotes";
src: local("HiraginoSansGB-W3"), local("Hiragino Sans GB W3"), local("SimSun"), local("NotoSansSC-Regular"), local("Noto Sans SC");
font-weight: 100 549;
unicode-range: U+2018-2019, U+201C-201D;
}
@font-face {
font-family: "Han Quotes";
src: local("HiraginoSansGB-W6"), local("Hiragino Sans GB W6"), local("SimHei"), local("NotoSansSC-Bold"), local("Noto Sans SC Bold");
font-weight: 550 900;
unicode-range: U+2018-2019, U+201C-201D;
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 12px); overflow-x: clip; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
}
@layer base {
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-body)/1.55 var(--text);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sun); color: var(--ink); }
strong, b { font-weight: 650; }
code, kbd, pre { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { padding: .1em .35em; border-radius: 6px; background: var(--paper-2); overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--line); margin-block: 32px; }
small { font-size: var(--fs-s); }
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); font-stretch: 106%; line-height: .96; letter-spacing: -.04em; }
h2, .h2 { font-size: var(--fs-h2); font-stretch: 106%; line-height: .96; letter-spacing: -.035em; }
h3, .h3 { font-size: var(--fs-h3); font-stretch: 104%; line-height: 1.04; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 750; letter-spacing: -.015em; line-height: 1.2; }
.display { font-size: var(--fs-display); font-stretch: 108%; line-height: .94; letter-spacing: -.04em; }
.display em, h1 em, h2 em, .accent { font-style: normal; color: var(--orange); }
p, li, dd { text-wrap: pretty; }
.intro, .lede, .sub { font-size: var(--fs-intro); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.label, .kicker {
display: flex; align-items: baseline; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line-strong);
font: 600 14px/1.2 var(--display); letter-spacing: 0; color: var(--ink-2);
}
.on-sky .label { color: var(--sky-ink); }
.hero-lede .label, .page-hero .label { padding-top: 0; border-top: 0; }
.fine, .small, .fineprint { font-size: var(--fs-s); line-height: 1.5; color: var(--ink-2); }
.legal-text { font-size: var(--fs-s); line-height: 1.6; color: var(--ink-2); max-width: 70em; }
.legal-text + .legal-text { margin-top: 8px; }
.hl { background: linear-gradient(var(--sun), var(--sun)) 0 88% / 100% .32em no-repeat; padding-inline: .04em; }
[dir="rtl"] .hl { background-position: 100% 88%; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.sr-only, .visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; inset-inline-start: 16px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-s);
background: var(--ink); color: var(--paper); text-decoration: none; font: 650 15px/1 var(--display);
}
.skip-link:focus { top: 12px; }
.ai-badge, .icon svg, .tile-icon svg {
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ai-badge { flex: none; width: 18px; height: 18px; }
:lang(ja) {
--display: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
--text: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}
:lang(ko) {
--display: "Archivo", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
--text: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
:lang(zh) {
--display: "Han Quotes", "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
--text: "Han Quotes", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
:lang(ar) {
--display: "Archivo", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--text: system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
html:lang(ar), html:lang(ar) * { letter-spacing: 0 !important; }
html:lang(ar) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .hero-title, .world-q, .callout-title, .stage-act, .scrolly-act, .faq summary, .marquee-row span, .quote blockquote p, .for-quote blockquote p, .plan h3) { line-height: 1.25 !important; }
html:is(:lang(ja), :lang(ko), :lang(zh)), html:is(:lang(ja), :lang(ko), :lang(zh)) * { letter-spacing: 0 !important; line-break: strict; hyphens: none; }
html:lang(ko) { word-break: keep-all; }
html:is(:lang(ja), :lang(ko), :lang(zh), :lang(ar)) .wordmark { letter-spacing: -.06em !important; }
html:is(:lang(ja), :lang(ko), :lang(zh)) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .hero-title, .world-q, .callout-title, .stage-act, .scrolly-act, .marquee-row span) { line-height: 1.15 !important; }
html:is(:lang(fr), :lang(de), :lang(es), :lang(it), :lang(pt)) :is(p, li, dd, td, figcaption, blockquote) {
hyphens: var(--hyphens, auto); hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
html:is(:lang(fr), :lang(de), :lang(es), :lang(it), :lang(pt)) :is(h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3, .h4, .hero-title, .world-q, .callout-title, .stage-act, .scrolly-act, summary, th, caption, .btn, .label, .kicker, .breadcrumb, .foot-nav, .foot-brand, .lang-menu, code, kbd, pre, .sr-only, .visually-hidden) { --hyphens: manual; hyphens: manual; }
.nohy, code, kbd, pre { hyphens: manual; }
.nohy { display: contents; }
.nohy.nb { white-space: nowrap; }
html:lang(de) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .world-q, .callout-title) {
hyphens: auto; hyphenate-limit-chars: 15 6 5; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 5;
}
html:not([lang="en"]) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .hero-title, .world-q, .callout-title, .plan h3, .stage-act, .scrolly-act) { overflow-wrap: anywhere; }
html:lang(ja) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .hero-title, .world-q, .callout-title, .stage-act, .scrolly-act, .for-q, summary, .btn) { word-break: keep-all; }
}
@layer layout {
.wrap, .container {
width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r);
}
.wrap-narrow, .prose-container {
width: 100%; max-width: calc(var(--narrow) + 2 * var(--gut)); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r);
}
.sec, .section, .band { padding-block: var(--sec); }
.sec-s { padding-block: var(--sec-s); }
.flush-top { padding-top: 0; }
.flush-bottom { padding-bottom: 0; }
.on-white, .band { background: var(--white); border-block: 1px solid var(--line); }
.on-sand { background: var(--paper-2); }
.on-sky { background: var(--sky); }
.on-sky .intro, .on-sky .sub, .on-sky .fine, .on-sky .small { color: var(--sky-ink); }
.band + .band, .on-white + .on-white { border-top: 0; }
.split { display: grid; gap: 20px 48px; margin-bottom: clamp(40px, 6vw, 96px); }
.split > :last-child:not(:first-child) { max-width: 30em; }
@media (min-width: 1000px) {
.split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
.split.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split.is-top { align-items: start; }
}
.split .label { margin-bottom: 18px; }
@media (min-width: 1000px) {
.split.is-stack, .split.is-center { grid-template-columns: minmax(0, 1fr); }
}
.split.is-stack > :last-child:not(:first-child) { max-width: 40em; }
.split.is-center { justify-items: center; text-align: center; }
.split.is-center > * { max-width: 46em; }
.split.is-center .intro { margin-inline: auto; }
.split.is-center .label { justify-content: center; padding-top: 0; border-top: 0; }
.split.is-center .btn-row { justify-content: center; }
.section-head { max-width: 52em; margin-bottom: clamp(32px, 4.5vw, 64px); }
.section-head > * + * { margin-top: 18px; }
.stack > * + * { margin-top: var(--stack, 20px); }
.stack-l > * + * { margin-top: clamp(28px, 3.4vw, 48px); }
.grid, .grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(20px, 2.6vw, 40px); }
@media (min-width: 700px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
}
@layer components {
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: var(--r-pill);
font: 650 16px/1.15 var(--display); font-stretch: 104%; letter-spacing: -.005em; text-align: center; text-decoration: none;
cursor: pointer; background: none; color: var(--ink);
transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform var(--t-base) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-ink, .btn-primary { background: var(--ink); color: var(--paper); }
.btn-ink:hover, .btn-primary:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }
.btn-line, .btn-glass { border-color: var(--ink); color: var(--ink); }
.btn-line:hover, .btn-glass:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-sm, .btn-small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-lg { min-height: 60px; padding: 0 34px; font-size: 18px; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn-row, .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
@media (max-width: 479.98px) { .btn { white-space: normal; } }
.link-more, .btn-text {
display: inline-flex; align-items: center; min-height: 44px;
font: 650 16px/1.25 var(--display); color: var(--ink);
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
transition: color var(--t-fast) ease;
}
.link-more:hover, .btn-text:hover { color: var(--accent-ink); }
.icon-btn {
display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); cursor: pointer;
transition: background-color var(--t-fast) ease;
}
.icon-btn:hover { background: var(--sun); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg [fill] { stroke: none; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(250, 248, 244, .9);
-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
@media (max-height: 500px) {
.site-header { transition: border-color .3s ease, transform var(--t-base) var(--ease); }
.site-header.is-tucked:not(:has(details[open], :focus-visible)) { transform: translateY(-100%); }
}
.bar {
position: relative; display: flex; align-items: center; gap: 12px; height: var(--header);
max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r);
}
.brand {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none;
color: var(--ink); text-decoration: none; font: 800 18px/1 var(--display); font-stretch: 108%; letter-spacing: -.02em;
}
.brand img { width: 34px; height: 34px; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav > a, .nav-menu > summary {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
color: var(--ink); text-decoration: none; font: 550 15px/1 var(--display); cursor: pointer; white-space: nowrap;
transition: background-color var(--t-fast) ease;
}
.nav > a:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { background: var(--paper-2); }
.nav > a[aria-current], .nav-menu > summary[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-menu > summary, .menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker, .menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform var(--t-base) var(--ease);
}
.nav-menu[open] > summary::after { transform: translateY(4px) rotate(225deg); }
.nav-menu-panel {
position: absolute; top: calc(100% - 4px); inset-inline-end: var(--gut); z-index: 2; width: min(600px, calc(100vw - 2 * var(--gut)));
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 10px;
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-pop);
}
.nav-menu-panel a { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.nav-menu-panel a:hover, .nav-menu-panel a[aria-current] { background: var(--paper); }
.nav-menu-panel b { font: 750 16px/1.2 var(--display); letter-spacing: -.01em; }
.nav-menu-panel span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.menu { display: none; }
.menu > summary {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px;
border-radius: var(--r-pill); background: var(--paper-2); font: 650 15px/1 var(--display); cursor: pointer;
}
.menu-icon { display: grid; gap: 5px; width: 16px; }
.menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-base) var(--ease); }
.menu[open] .menu-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu[open] .menu-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-panel {
position: absolute; inset-inline: 0; top: 100%; height: calc(100svh - var(--header)); overflow-y: auto; overscroll-behavior: contain;
display: grid; align-content: start; padding: 8px var(--gut-r) max(32px, calc(var(--safe-b) + 16px)) var(--gut-l);
background:
linear-gradient(rgba(250, 248, 244, 0), var(--paper) 70%) center bottom / 100% 48px no-repeat local,
radial-gradient(farthest-side at 50% 100%, rgba(21, 19, 15, .2), rgba(21, 19, 15, 0)) center bottom / 100% 14px no-repeat scroll,
var(--paper);
border-block: 1px solid var(--line); box-shadow: var(--shadow-pop);
}
.menu-panel a {
display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line);
color: var(--ink); text-decoration: none; font: 750 21px/1.15 var(--display); letter-spacing: -.02em;
}
.menu-panel a[aria-current] { color: var(--accent-ink); }
.menu-label { padding-top: 12px; font: 600 14px/1.2 var(--display); color: var(--ink-2); }
.menu-panel hr { margin: 16px 0 0; border: 0; }
@media (max-height: 700px) {
.menu-panel { padding-top: 4px; }
.menu-panel a { min-height: 46px; font-size: 19px; }
.menu-label { padding-top: 8px; }
.menu-panel hr { margin-top: 8px; }
}
@media (max-height: 500px) and (min-width: 560px) {
.menu-panel { grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 32px; height: auto; max-height: calc(100svh - var(--header)); padding-bottom: 20px; }
.menu-panel a { min-height: 44px; font-size: 18px; }
.menu-label { display: flex; align-items: center; min-height: 44px; padding-top: 0; border-bottom: 1px solid var(--line); }
.menu-panel hr { display: none; }
}
@media (min-width: 700px) and (max-width: 999.98px) and (min-height: 500.02px) {
.menu-panel { grid-template-rows: repeat(8, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 48px; height: auto; max-height: calc(100svh - var(--header)); padding-bottom: 28px; }
.menu-label { display: flex; align-items: center; min-height: 52px; padding-top: 0; border-bottom: 1px solid var(--line); }
.menu-panel hr { display: none; }
}
@media (max-width: 999.98px) { html:has(.menu[open]) { overflow: hidden; } }
.lang-menu { flex: none; }
.lang-menu > summary {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--r-pill);
color: var(--ink); font: 650 14px/1 var(--display); letter-spacing: 0; white-space: nowrap; cursor: pointer; list-style: none;
transition: background-color var(--t-fast) ease;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { background: var(--paper-2); }
.lang-globe { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.lang-panel {
position: absolute; top: calc(100% - 4px); inset-inline-end: var(--gut); z-index: 3; width: min(380px, calc(100vw - 2 * var(--gut)));
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 8px; list-style: none;
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-pop);
}
.lang-panel a {
display: flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: var(--r-m);
color: var(--ink); text-decoration: none; font: 600 15px/1.2 var(--display); letter-spacing: 0;
}
.lang-panel a:hover { background: var(--paper); }
.lang-panel a[aria-current] { background: var(--paper-2); font-weight: 750; }
@media (max-width: 999.98px) {
.nav { display: none; }
.menu { display: block; margin-inline-start: auto; }
.lang-menu { margin-inline-start: auto; }
.lang-menu ~ .menu { margin-inline-start: 0; }
}
@media (max-width: 479.98px) {
.bar:has(.lang-menu) { gap: 8px; }
.lang-menu > summary { padding: 0 8px; gap: 4px; }
}
@media (max-width: 359.98px) { .lang-code { display: none; } .lang-menu > summary { justify-content: center; padding: 0; } }
@media (max-width: 339.98px) { .bar .brand { min-width: 44px; } .bar .brand-name { display: none; } }
@media (max-width: 399.98px) { .bar:has(.lang-menu) .brand { min-width: 44px; } .bar:has(.lang-menu) .brand-name { display: none; } }
@media (max-width: 369.98px) {
.bar { gap: 8px; }
.menu > summary { padding: 0 14px; }
.menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.site-footer { background: var(--paper-2); padding-top: clamp(56px, 7vw, 104px); overflow: hidden; }
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 1200px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: 56px; } }
.foot-brand p { margin-top: 12px; max-width: 22em; color: var(--ink-2); font-size: 16px; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 1200px) { .foot-nav { column-gap: 40px; } }
@media (min-width: 700px) { .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .foot-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .8fr); } }
@media (max-width: 699.98px) { .foot-col:has(a[href^="mailto:"]) { grid-column: 1 / -1; } }
html:not([lang="en"]) .foot-nav { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
@media (min-width: 700px) { html:not([lang="en"]) .foot-nav { grid-template-columns: repeat(3, minmax(min-content, 1fr)); } }
@media (min-width: 1200px) { html:not([lang="en"]) .foot-nav { grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1.4fr) minmax(min-content, 1.1fr) minmax(min-content, .8fr); } }
.foot-col h2 { margin-bottom: 6px; font: 700 14px/1.2 var(--display); letter-spacing: 0; color: var(--ink-2); }
.foot-col ul { list-style: none; }
.foot-col a {
display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 6px;
color: var(--ink); text-decoration: none; font: 600 15px/1.25 var(--display); overflow-wrap: break-word;
}
.foot-col a:hover, .foot-col a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.wordmark {
margin: clamp(40px, 6vw, 88px) 0 0; padding: 0 0 .1em;
font: 860 min(12.8vw, 190px)/.8 var(--display); font-stretch: 100%; letter-spacing: -.06em; white-space: nowrap;
color: var(--orange); text-align: center; user-select: none;
}
.foot-langs { display: flex; align-items: flex-start; gap: 4px 14px; margin-top: clamp(36px, 5vw, 56px); }
.foot-langs .lang-globe { width: 20px; height: 20px; margin-top: 12px; color: var(--ink-2); }
.foot-langs ul { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; }
.foot-langs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font: 600 15px/1.25 var(--display); letter-spacing: 0; }
.foot-langs a:hover, .foot-langs a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.foot-legal { display: grid; gap: 8px; padding-block: 28px 40px; font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-2); }
.foot-legal p { max-width: 90em; }
.breadcrumb { margin-bottom: clamp(16px, 2.4vw, 32px); font: 550 14px/1.3 var(--display); color: var(--ink-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-inline: 10px; color: var(--control); }
.breadcrumb a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.breadcrumb a::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; width: max(100%, 44px); transform: translateX(-50%); }
[dir="rtl"] .breadcrumb a::before { transform: translateX(50%); }
.breadcrumb [aria-current] { color: var(--ink-2); }
.page-hero { padding-block: clamp(20px, 3vw, 48px) var(--sec-s); }
.page-hero h1 { max-width: 15em; }
.page-hero .label { margin-bottom: 18px; }
.page-hero-grid { display: grid; gap: 24px 64px; }
.page-hero-grid > :last-child > :first-child { margin-top: 0; }
@media (min-width: 1100px) {
.page-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
.page-hero-grid .btn-row { margin-top: 24px; }
}
.page-hero .bleed, .page-hero .film-block { margin-top: clamp(32px, 5vw, 72px); }
.hero { padding: clamp(12px, min(2.6vw, 2.8svh), 40px) var(--gut-r) clamp(56px, 8vw, 120px) var(--gut-l); max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.hero-title {
grid-row: 1 / 4; grid-column: 1 / -1; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid;
font-size: clamp(42px, 8.7vw, 134px); font-stretch: 100%; font-weight: 820; line-height: .9; letter-spacing: -.045em;
pointer-events: none;
}
.hero-title .line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.06em; }
.hero-title .line-a { grid-row: 1; grid-column: 1 / -1; justify-self: start; }
.hero-title .line-b { grid-row: 3; grid-column: 1 / -1; justify-self: end; text-align: end; padding-top: .06em; }
.hero-title .lift { display: block; }
.hero-film { grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 1; width: 100vw; margin-inline: calc(50% - 50vw); height: clamp(300px, 53svh, 820px); background: #F1ECE3; }
.hero-lede { grid-row: 4; max-width: 32em; margin-top: 28px; font-size: var(--fs-intro); color: var(--ink-2); }
.hero-actions { grid-row: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.hero-actions .fine { flex-basis: 100%; }
@media (min-width: 1200px) {
.hero-grid { --hero-fs: min(134px, calc((100cqi - 22rem - 40px) / 8.1)); grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 40px; }
.hero-title { font-size: var(--hero-fs); }
.hero-title .line-a { grid-column: 1; }
.hero-lede { grid-row: 1; grid-column: 2; align-self: end; max-width: none; margin: 0 0 18px; font-size: 17px; position: relative; z-index: 2; }
.hero-actions { grid-row: 3; grid-column: 1; align-self: start; max-width: calc(100cqi - 7.8 * var(--hero-fs) - 32px); margin: clamp(12px, 2.6svh, 24px) 0 0; position: relative; z-index: 2; }
html:not([lang="en"]) .hero-grid { --hero-fit: 1; }
html:not([lang="en"]) .hero-actions { grid-row: 4; grid-column: 1 / -1; max-width: 46rem; }
html:not([lang="en"]) .hero-film { height: clamp(300px, calc(53svh - var(--hero-cut, 0px)), 820px); }
}
@media (max-width: 699.98px) {
.hero-film { height: auto; aspect-ratio: 4 / 5; }
.hero-title { font-size: 11.6vw; }
.hero-title .line-b { justify-self: start; text-align: start; }
}
.worlds { position: relative; background: var(--white); border-block: 1px solid var(--line); }
.worlds-sticky { padding-block: var(--sec); }
.worlds-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 56px); }
.worlds-head .intro, .worlds-head .sub { padding-bottom: 6px; }
.worlds-head .label { flex-basis: 100%; }
.worlds-progress { display: none; margin-inline-start: auto; width: 160px; height: 3px; margin-bottom: 18px; border-radius: 3px; background: var(--line); overflow: hidden; }
.worlds-progress span { display: block; width: 100%; height: 100%; background: var(--ink); transform: translateX(-100%); }
.worlds-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 12px; overscroll-behavior-x: contain; }
.worlds-track {
display: flex; gap: clamp(16px, 2.2vw, 32px); width: max-content; list-style: none; counter-reset: world;
padding-left: max(var(--gut-l), calc((100vw - var(--max)) / 2)); padding-right: max(var(--gut-r), calc((100vw - var(--max)) / 2));
}
.world { flex: none; width: clamp(272px, 46vw, 720px); scroll-snap-align: center; counter-increment: world; }
.world-link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; color: var(--ink); text-decoration: none; }
.world-link::before { content: counter(world, decimal-leading-zero); grid-row: 2 / 5; padding-top: .7em; font: 700 14px/1 var(--display); color: var(--accent-ink); }
.world-link picture, .world-link > img { grid-column: 1 / -1; display: block; margin-bottom: 18px; overflow: hidden; border-radius: 6px; background: var(--paper-2); transition: transform .6s var(--ease); }
.world-media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.world-link:hover picture, .world-link:hover > img { transform: translateY(-6px); }
.world-q { grid-column: 2; font-size: clamp(26px, 3vw, 46px); font-weight: 820; font-stretch: 106%; line-height: 1; letter-spacing: -.035em; }
.world-t { grid-column: 2; margin-top: 10px; max-width: 28em; color: var(--ink-2); font-size: 17px; }
.world-more {
grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
font: 650 16px/1 var(--display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.world-link:hover .world-more { color: var(--accent-ink); }
.world-end { flex: none; width: clamp(240px, 26vw, 380px); align-self: center; padding-inline-end: var(--gut); }
.world-end p { font: 600 clamp(20px, 1.8vw, 26px)/1.3 var(--display); letter-spacing: -.01em; }
@media (max-width: 699.98px) { .world { width: 82vw; } .world-end { width: 70vw; } }
.worlds-track.is-strip { display: grid; width: auto; padding-inline: 0; gap: 40px 32px; }
.is-strip .world { width: auto; }
.is-strip .world-q { font-size: clamp(24px, 2.2vw, 32px); }
@media (min-width: 800px) { .worlds-track.is-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fixes, .pairs { list-style: none; counter-reset: fx; }
.fixes > li, .fixes > div, .pairs > div {
counter-increment: fx; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px;
padding-block: 26px; border-top: 1px solid var(--line);
}
.fixes > :last-child, .pairs > :last-child { border-bottom: 1px solid var(--line); }
.fixes > li::before, .fixes > div::before, .pairs > div::before {
content: counter(fx, decimal-leading-zero); grid-row: 1 / 3; padding-top: .6em;
font: 700 14px/1 var(--display); color: var(--ink-2); transition: color .3s ease;
}
.fx-p, .fixes dt, .pairs dt {
font: 800 clamp(22px, 2.6vw, 40px)/1.06 var(--display); font-stretch: 106%; letter-spacing: -.03em;
transition: transform .5s var(--ease);
}
.fx-a, .fixes dd, .pairs dd { max-width: 34em; color: var(--ink-2); }
.fixes > :hover .fx-p, .fixes > :hover dt, .pairs > :hover dt { transform: translateX(8px); }
.fixes > :hover::before, .pairs > :hover::before { color: var(--accent-ink); }
@media (min-width: 900px) {
.fixes > li, .fixes > div, .pairs > div { grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; gap: 32px; padding-block: 34px; }
.fixes > li::before, .fixes > div::before, .pairs > div::before { grid-row: auto; padding-top: 0; }
}
.steps { list-style: none; counter-reset: step; }
.steps > li {
counter-increment: step; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: baseline;
padding-block: 20px; border-top: 1px solid var(--line);
}
.steps > li::before { content: counter(step); font: 820 clamp(30px, 3vw, 44px)/1 var(--display); letter-spacing: -.04em; color: var(--accent-ink); }
.steps > li > * { grid-column: 2; }
.steps > li p { font-size: 18px; }
@media (min-width: 1000px) {
.steps.is-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; }
.steps.is-row > li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 24px; border-top: 2px solid var(--ink); }
.steps.is-row > li > * { grid-column: 1; }
}
.stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 32px; border-top: 1px solid var(--line-strong); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-n, .stat-num { display: block; font: 820 clamp(56px, 9vw, 140px)/.85 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat-n small, .stat-num small { font-size: .4em; letter-spacing: -.02em; margin-inline-start: .06em; }
.stat-l, .stat-label { display: block; margin-top: 12px; max-width: 14em; font-size: 16px; color: var(--ink-2); }
.on-sky .stat-l, .on-sky .stat-label { color: var(--sky-ink); }
.plans { display: grid; gap: 20px; }
@media (min-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: stretch; } }
.plan { display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 48px); border: 2px solid var(--ink); border-radius: var(--r-l); }
.plan.featured, .plan.is-premium { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.plan h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 18px 0 10px; font: 820 clamp(56px, 8vw, 120px)/.85 var(--display); letter-spacing: -.05em; }
.plan-price small { font: 700 20px/1 var(--display); letter-spacing: 0; }
.plan-tax { font-size: var(--fs-s); color: var(--ink-2); }
.plan.featured .plan-tax, .plan.is-premium .plan-tax { color: var(--ink); }
.plan ul { list-style: none; margin: 26px 0 32px; }
.plan li { position: relative; padding-block: 12px; padding-inline: 28px 0; border-top: 1px solid var(--line); }
.plan.featured li, .plan.is-premium li { border-top-color: rgba(21, 19, 15, .25); }
.plan li::before {
content: ""; position: absolute; inset-inline-start: 2px; top: 1.05em; width: 12px; height: 7px;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.featured .btn-ink:hover, .plan.featured .btn-primary:hover, .plan.is-premium .btn-ink:hover { background: var(--paper); color: var(--ink); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding-block: 16px;
list-style: none; cursor: pointer; font: 750 clamp(19px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat, var(--paper-2);
transition: transform var(--t-base) var(--ease), background-color var(--t-fast) ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover::after { background-color: var(--sun); }
.faq details > div { padding-block: 0 24px; padding-inline: 0 48px; color: var(--ink-2); max-width: 44em; }
.faq details > div > * + * { margin-top: .8em; }
@media (max-width: 599.98px) { .faq details > div { padding-inline-end: 0; } }
.faq-more { margin-top: 18px; }
.faq-split { display: grid; gap: 28px; }
@media (min-width: 900px) {
.faq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.faq-split > :first-child { position: sticky; top: calc(var(--header) + 32px); align-self: start; }
}
.callout { padding: clamp(22px, 3vw, 40px); border-radius: var(--r-l); background: var(--paper-2); }
.callout > * + * { margin-top: 14px; }
.callout-title { font: 800 clamp(22px, 2.2vw, 32px)/1.1 var(--display); font-stretch: 104%; letter-spacing: -.025em; }
.callout h3 { font-size: var(--fs-h4); }
.callout.note { padding-block: 4px; padding-inline: 20px 0; border-inline-start: 4px solid var(--orange); border-radius: 0; background: none; }
.callout.warn { background: none; border: 2px solid var(--warn-ink); color: var(--ink); }
.custom-apps { background: var(--white); border: 2px solid var(--ink); max-width: 56em; }
.custom-apps p:not(.callout-title) { color: var(--ink-2); max-width: 40em; }
@media (min-width: 900px) { section:has(> .faq-split) + #custom-apps .custom-apps { margin-inline-start: calc((100% - 48px) / 3 + 48px); } }
.disclosure {
display: inline-flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-radius: var(--r-m);
background: var(--paper-2); color: var(--ink); font-size: 14px; line-height: 1.4;
}
.disclosure .ai-badge { margin-top: 1px; }
.disclosure-note {
display: flex; align-items: flex-start; gap: 12px; max-width: 46em; padding: 16px 20px; border-radius: var(--r-m);
background: var(--paper-2); color: var(--ink-2); font-size: var(--fs-s);
}
.disclosure-note .ai-badge { margin-top: 2px; color: var(--ink); }
.disclosure-note + * { margin-top: 32px; }
.tiles { list-style: none; display: grid; gap: 0 32px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.tile { padding-block: 24px 28px; border-top: 1px solid var(--line); }
.tile-icon { display: block; margin-bottom: 18px; color: var(--ink); }
.tile-icon svg { display: block; width: 34px; height: 34px; }
.tile h3 { font-size: var(--fs-h4); }
.tile p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font: 600 16px/1.45 var(--display); }
.chips > li { display: inline-flex; align-items: center; }
.chips > li::before { content: ""; flex: none; width: 6px; height: 6px; margin-inline-end: 9px; border-radius: 50%; background: var(--accent-ink); }
.chip {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill);
background: var(--paper-2); color: var(--ink); font: 600 14px/1.2 var(--display); text-decoration: none;
}
a.chip { min-height: 44px; padding: 0 16px; font-size: 15px; }
a.chip:hover { background: var(--sun); }
.chips > .chip { min-height: 0; padding: 0; border-radius: 0; background: none; font: inherit; }
.chip-real { background: var(--sun); }
.checklist { list-style: none; }
.checklist li { position: relative; padding-block: 14px; padding-inline: 40px 0; border-top: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist li::before {
content: ""; position: absolute; inset-inline-start: 3px; top: calc(14px + .5em); width: 15px; height: 8px;
border-left: 3px solid var(--accent-ink); border-bottom: 3px solid var(--accent-ink); transform: rotate(-45deg);
}
.table-wrap { overflow-x: auto; }
.compare table, .table-wrap table, .prose table { width: 100%; font-size: 16px; line-height: 1.45; }
.compare th, .compare td, .table-wrap th, .table-wrap td, .prose th, .prose td { padding-block: 16px; padding-inline: 0 16px; text-align: start; vertical-align: top; border-top: 1px solid var(--line); }
.compare thead th, .table-wrap thead th, .prose thead th { padding-block: 0 12px; border-top: 0; font: 700 14px/1.3 var(--display); color: var(--ink-2); }
.compare tbody th { font: 750 18px/1.25 var(--display); letter-spacing: -.01em; }
.compare th, .compare td { padding-inline: 16px; }
.compare tr.is-ours > * { background: var(--sun); }
@media (max-width: 699.98px) {
:is(.compare, .table-wrap) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is(.compare, .table-wrap) :is(table, tbody, tr, th, td) { display: block; }
:is(.compare, .table-wrap) tr { padding-block: 16px; border-top: 1px solid var(--line); }
.compare tr.is-ours { background: var(--sun); }
.compare tr.is-ours > * { background: none; }
:is(.compare, .table-wrap) :is(th, td) { padding: 4px 0; border: 0; }
.compare :is(th, td) { padding-inline: 16px; }
.table-wrap tbody th { font: 750 17px/1.3 var(--display); }
:is(.compare, .table-wrap) td[data-label]::before { content: attr(data-label); display: block; font: 700 14px/1.4 var(--display); color: var(--ink-2); }
}
.copy-stack > * + * { margin-top: 16px; }
.copy-block { position: relative; margin: 0; padding: 16px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); }
.copy-label { display: flex; align-items: center; min-height: 36px; margin-bottom: 14px; padding-inline-end: 96px; font: 700 14px/1.3 var(--display); color: var(--ink-2); }
.copy-block pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.6 var(--mono); }
.copy-block.is-code pre, .copy-block pre.is-code { white-space: pre; overflow-x: auto; }
.copy-block [data-copy] {
position: absolute; top: 8px; inset-inline-end: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
background: var(--ink); color: var(--paper); font: 650 14px/1 var(--display); cursor: pointer;
}
.copy-block [data-copy]:hover { background: var(--orange); color: var(--ink); }
.copy-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.doc { padding-block: clamp(20px, 3vw, 48px) var(--sec-s); }
.doc-head { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(40px, 6vw, 84px); }
.updated { margin-top: 14px; font-size: var(--fs-s); color: var(--ink-2); }
.lang-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.i18n-notice { margin-top: 18px; max-width: 46em; padding: 14px 18px; border-radius: var(--r-m); background: var(--paper-2); font-size: var(--fs-s); line-height: 1.5; color: var(--ink-2); }
.i18n-notice a { color: var(--ink); }
.lang-switch a, .page-nav a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
background: var(--white); color: var(--ink); text-decoration: none; font: 600 15px/1.2 var(--display);
}
.lang-switch a:hover, .page-nav a:hover { border-color: var(--ink); }
.page-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
@media (max-width: 999.98px) {
.page-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; scroll-snap-type: x proximity; }
.wrap .page-nav { margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); padding-left: var(--gut-l); padding-right: var(--gut-r); }
.page-nav::-webkit-scrollbar { display: none; }
.page-nav a { flex: none; scroll-snap-align: start; }
}
.prose { font-size: 17px; line-height: 1.65; }
.prose > * + *, .prose :where(section, .lang-block, div) > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.02; }
.prose h3 { margin-top: 1.8em; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.02em; }
.prose h4 { margin-top: 1.4em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--ink-2); }
.prose section { scroll-margin-top: calc(var(--header) + 16px); }
.prose section + section { margin-top: 2.4em; }
.prose .btn { text-decoration: none; }
:is(.prose, .checklist) :is(p, li, dd, td) a:not([class]), :is(p.fine, p.legal-text, .checklist li) > a:not([class]) { padding-block: .6em; }
.toc { padding: 20px 24px; border-radius: var(--r-m); background: var(--paper-2); }
.toc > p { font: 700 14px/1.2 var(--display); color: var(--ink-2); }
.toc ol { margin-top: 6px; padding-inline-start: 1.4em; columns: 2 240px; column-gap: 32px; }
.toc li { break-inside: avoid; margin: 0; }
.toc li + li { margin-top: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink); }
.lang-block + .lang-block { margin-top: var(--sec-s); padding-top: var(--sec-s); border-top: 2px solid var(--ink); }
.legal-block { padding: 24px; border-radius: var(--r-m); background: var(--paper-2); }
.card, .contact-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); }
.card > * + *, .contact-card > * + * { margin-top: 10px; }
.card h3, .contact-card h3 { font-size: var(--fs-h4); }
.card .btn, .contact-card .btn { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 479.98px) { .card, .contact-card { padding: 20px; } }
.cards, .contact-cards { list-style: none; display: grid; gap: 16px; padding: 0; }
@media (min-width: 700px) { .cards, .contact-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.prose .contact-cards { padding-inline-start: 0; }
.facts { display: grid; }
.facts > div { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--line); }
.facts dt { font: 700 14px/1.3 var(--display); color: var(--ink-2); }
@media (min-width: 700px) { .facts > div { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } }
.link-list, .download-list { list-style: none; }
.link-list a, .download-list a {
display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--line);
color: var(--ink); text-decoration: none; font: 650 17px/1.3 var(--display);
}
.link-list li:last-child a, .download-list li:last-child a { border-bottom: 1px solid var(--line); }
.link-list a:hover, .download-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.quote blockquote p, .for-quote blockquote p { font: 700 clamp(24px, 2.6vw, 38px)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.quote figcaption, .for-quote figcaption { margin-top: 14px; font-size: var(--fs-s); color: var(--ink-2); }
.marquee { overflow: hidden; padding-block: clamp(14px, 2vw, 26px); border-block: 1px solid var(--line); }
.marquee-row { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: max-content; }
.marquee-row span { font: 820 clamp(36px, 6vw, 96px)/1 var(--display); font-stretch: 112%; letter-spacing: -.04em; white-space: nowrap; }
.marquee-row i { flex: none; width: clamp(12px, 1.4vw, 22px); height: clamp(12px, 1.4vw, 22px); border-radius: 50%; background: var(--orange); }
.cta-band { padding-block: var(--sec-s) var(--sec); overflow: hidden; }
.reel { margin-bottom: clamp(48px, 6vw, 96px); overflow: hidden; }
.reel-row { display: flex; gap: clamp(10px, 1.4vw, 20px); width: max-content; transform: translateX(-12%); }
.reel-row picture { flex: none; }
.reel-row img { width: clamp(220px, 26vw, 420px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.cta-body { display: grid; gap: 28px; }
.cta-body h2 { font-size: clamp(34px, min(6.2vw, 13svh), 92px); }
@media (min-width: 1000px) { .cta-body { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: end; } }
.cta-side { display: grid; gap: 14px; justify-items: start; }
.cta-side .fine { max-width: 28em; }
[dir="rtl"] .worlds-progress span { transform: translateX(100%); }
[dir="rtl"] .reel-row { transform: translateX(12%); }
[dir="rtl"] .fixes > :hover .fx-p, [dir="rtl"] .fixes > :hover dt, [dir="rtl"] .pairs > :hover dt { transform: translateX(-8px); }
[dir="rtl"] :is(.nowrap, bdi, .stat-n, .stat-num, .plan-price, .lost-code, .wordmark, .brand-name) { unicode-bidi: plaintext; }
[dir="rtl"] :is(code, kbd, pre, .scrolly-count) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] pre { text-align: left; }
[dir="rtl"] svg { direction: ltr; }
[dir="rtl"] :is(img, video, picture) { transform: none; }
[dir="rtl"] :is(dd, .foot-marks) { unicode-bidi: plaintext; text-align: right; }
}
@layer media {
.film { position: relative; overflow: hidden; background: #D9D3CB; --film-inset: 16px; }
.hero-film .film, .film.is-bleed { height: 100%; --film-inset: max(var(--gut), calc((100vw - var(--max)) / 2)); }
.film-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-film .film-video { object-position: 50% 50%; }
.film-block .film, .film.is-wide { aspect-ratio: 16 / 9; border-radius: 10px; }
.film.is-tall { aspect-ratio: 9 / 16; max-width: 360px; border-radius: 22px; }
.film-bar { position: absolute; inset-inline-end: var(--film-inset); bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.film-block .film-bar { top: 16px; bottom: auto; }
.film-btn {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 0; padding-inline: 12px 16px; border: 0; border-radius: var(--r-pill);
background: var(--chip); color: var(--ink); font: 600 14px/1 var(--display); cursor: pointer;
transition: background-color var(--t-fast) ease;
}
.film-btn:hover { background: var(--white); }
.film-btn:focus-visible, .film-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--paper); }
.film-btn svg { width: 18px; height: 18px; fill: currentColor; }
.film-btn svg .stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 419.98px) {
.film-bar:has([data-film-sound]) .film-btn { width: 44px; padding: 0; justify-content: center; }
.film-bar:has([data-film-sound]) .film-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.film:has([data-film-play]:not([hidden])) [data-film-toggle] { display: none; }
.film-btn .i-play, .film.is-paused .film-btn .i-pause { display: none; }
.film.is-paused .film-btn .i-play { display: block; }
.film-btn .i-sound-on, .film-btn[aria-pressed="true"] .i-sound-off { display: none; }
.film-btn[aria-pressed="true"] .i-sound-on { display: block; }
.film-play {
position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); width: max-content;
display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding-block: 0; padding-inline: 22px 28px; border: 0; border-radius: var(--r-pill);
background: var(--ink); color: var(--paper); font: 700 18px/1 var(--display); white-space: nowrap; cursor: pointer;
transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.film-play:hover { background: var(--orange); color: var(--ink); }
.film-play svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.film-caption {
position: absolute; inset-inline-start: var(--film-inset); bottom: 16px; z-index: 2; max-width: calc(100% - 2 * var(--film-inset) - 260px);
display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: var(--r-pill);
background: var(--chip); color: var(--ink); font: 550 14px/1.25 var(--display);
}
@media (max-width: 699.98px) {
.film-caption { bottom: auto; top: 14px; max-width: calc(100% - 2 * var(--film-inset)); }
.film-btn { padding-block: 0; padding-inline: 10px 14px; }
}
.film.is-tall .film-caption { bottom: auto; top: 14px; max-width: calc(100% - 2 * var(--film-inset)); }
.film-block figcaption, .bleed figcaption, .shot figcaption, .device figcaption {
margin-top: 12px; font: 600 14px/1.35 var(--display); color: var(--ink-2);
}
.film-video:fullscreen { object-fit: contain; background: #000; }
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.bleed img { width: 100%; max-height: 86svh; object-fit: cover; }
.bleed figcaption { max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.shot { margin: 0; }
.shot img { width: 100%; border-radius: 10px; box-shadow: var(--shadow-shot); }
.shot-vision img { border-radius: 14px; }
.shot-iphone { max-width: 300px; }
.shot-iphone img { border-radius: 28px; }
.shot-ipad { max-width: 440px; }
.shot-ipad img { border-radius: 18px; }
.shot-row { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 36px); align-items: flex-end; }
.device-wall { display: grid; gap: clamp(28px, 4vw, 56px); }
.device-row { display: flex; gap: clamp(16px, 2.4vw, 36px); align-items: flex-start; }
.device { min-width: 0; margin: 0; }
.device.is-vision { flex: 1.7778 1 0; }
.device.is-mac { flex: 1.6 1 0; }
.device.is-iphone { flex: .4604 1 0; }
.device.is-ipad { flex: .7498 1 0; }
.device img { width: 100%; border-radius: 10px; box-shadow: var(--shadow-shot); }
.device.is-iphone img { border-radius: 18px; }
.device.is-ipad img { border-radius: 14px; }
.device figcaption, .device p { margin-top: 14px; max-width: 34em; font: 400 15px/1.45 var(--text); color: var(--ink-2); }
.on-sky .device figcaption, .on-sky .device p { color: var(--sky-ink); }
.device figcaption strong, .device h3 { display: block; margin: 14px 0 4px; font: 800 20px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.device figcaption strong { margin-top: 0; }
.device h3 + p { margin-top: 0; }
@media (max-width: 699.98px) {
.device-row { flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.device { width: 100%; }
.device.is-iphone { width: 56%; }
.device.is-ipad { width: 82%; }
}
.story { list-style: none; }
.step { display: grid; gap: 24px; padding-block: 40px; border-top: 1px solid var(--line); }
.step-fig { margin: 0; }
.step-fig img { width: 100%; border-radius: 10px; box-shadow: var(--shadow-shot); }
.step-fig.is-tall img { width: auto; max-width: 100%; max-height: 70svh; margin-inline: auto; border-radius: 22px; }
.step-fig figcaption { margin-top: 10px; font: 600 14px/1.3 var(--display); color: var(--ink-2); }
.step-fig.is-tall figcaption { text-align: center; }
.step-act { margin-bottom: 14px; font: 700 15px/1.2 var(--display); color: var(--accent-ink); }
.step-text h3 { margin-bottom: 14px; }
.step-text p:not(.step-act) { max-width: 30em; color: var(--ink-2); }
@media (min-width: 900px) { .step { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 48px; } }
.story-stage { display: none; }
.story-wrap.is-on { display: grid; --stage-h: clamp(270px, 38svh, 440px); }
.is-on .story-stage {
display: flex; flex-direction: column; position: sticky; top: var(--header); z-index: 2;
height: var(--stage-h); padding: 12px 0 14px; background: var(--paper);
}
.is-on .step { min-height: 36svh; align-content: end; border-top: 0; padding-block: 0 5svh; }
.is-on .step:last-child { min-height: 44svh; padding-bottom: 14svh; }
.is-on .step > .step-fig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.is-on .step-text h3 { color: var(--ink-2); transition: color .5s ease; }
.is-on .step.is-active .step-text h3 { color: var(--ink); }
.stage-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.stage-act { font: 820 clamp(28px, 3.6vw, 56px)/1 var(--display); font-stretch: 108%; letter-spacing: -.04em; }
.stage-count { font: 650 14px/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stage-frame { position: relative; flex: 1; min-height: 0; }
.stage-frame .step-fig {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .9s var(--ease);
}
.stage-frame .step-fig:not(.is-active) { transition-duration: .3s, .9s; }
.stage-frame .step-fig.is-active { opacity: 1; transform: none; transition-delay: .12s; }
.stage-frame .step-fig:not(.is-active) { pointer-events: none; }
.stage-frame picture { display: block; min-height: 0; }
.stage-frame img { width: auto; max-width: 100%; max-height: calc(var(--stage-h) - 64px); margin-inline: auto; }
.stage-frame .step-fig.is-tall img { max-height: calc(var(--stage-h) - 64px); border-radius: 22px; }
@media (min-width: 900px) {
.story-wrap.is-on { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); }
.is-on .story-stage { grid-column: 2; grid-row: 1; top: calc(var(--header) + 24px); height: calc(100svh - var(--header) - 48px); max-height: 820px; padding: 0; background: none; }
.is-on .story { grid-column: 1; grid-row: 1; }
.is-on .stage-frame img, .stage-frame .step-fig.is-tall img { max-height: calc(min(100svh - var(--header) - 48px, 820px) - 100px); }
.is-on .step { grid-template-columns: minmax(0, 1fr); min-height: 78svh; align-content: center; padding-block: 0; }
.is-on .step:first-child { min-height: 60svh; align-content: start; padding-top: 12svh; }
.is-on .step:last-child { min-height: 78svh; padding-bottom: 24svh; }
}
.capsule-row { list-style: none; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.capsule { flex: none; display: grid; gap: 12px; align-content: start; width: clamp(240px, 70vw, 300px); scroll-snap-align: start; }
@media (min-width: 1100px) {
.capsule-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.capsule-row .capsule { width: auto; }
}
.capsule-link { display: grid; gap: 10px; color: var(--ink); text-decoration: none; }
.capsule-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper-2); box-shadow: var(--shadow-shot); }
.capsule-frame picture, .capsule-poster { width: 100%; height: 100%; object-fit: cover; }
.capsule-play {
position: absolute; inset-inline-start: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%;
background: var(--ink); color: var(--paper); transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.capsule-play svg { width: 22px; height: 22px; }
.capsule-link:hover .capsule-play { background: var(--orange); color: var(--ink); }
.capsule-dur { position: absolute; inset-inline-end: 12px; top: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--chip); font: 650 14px/1.2 var(--display); }
.capsule-who { font-size: var(--fs-h4); }
.capsule-quote { color: var(--ink-2); font-size: 16px; }
.capsule-cta, .capsule-page { display: inline-flex; align-items: center; min-height: 44px; font: 650 15px/1.2 var(--display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; color: var(--ink); }
.capsule.is-single { width: auto; gap: 32px; }
@media (min-width: 900px) { .capsule.is-single { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 64px; align-items: center; } }
.capsule.is-single > * > * + * { margin-top: 16px; }
.for-story-label { font: 700 15px/1.2 var(--display); color: var(--accent-ink); }
.for-story-intro { font-size: var(--fs-intro); color: var(--ink-2); }
.for-story-small { font-size: var(--fs-s); color: var(--ink-2); }
.lightbox {
width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: var(--r-l);
background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); overflow-y: auto;
}
.lightbox::backdrop { background: rgba(21, 19, 15, .62); }
.lightbox-inner { display: grid; gap: 14px; padding: 16px 16px 20px; }
.lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lightbox-title { font-size: 20px; letter-spacing: -.02em; }
.lightbox-frame { overflow: hidden; border-radius: var(--r-m); background: #000; }
.lightbox-video { display: block; width: auto; max-width: 100%; height: min(62svh, 900px); margin-inline: auto; }
.transcript summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 650 15px/1.2 var(--display); }
.transcript div { color: var(--ink-2); font-size: var(--fs-s); }
.lightbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
}
@layer media {
@media (max-width: 999.98px) {
picture.has-panel.is-upright { display: block; max-width: min(100%, 460px); margin-inline: auto; }
}
.can-zoom main img:is([src*="/screens/"], [src*="/press/"]) { cursor: zoom-in; }
@media (hover: none) {
.can-zoom main picture:has(> img:is([src*="/screens/mac"], [src*="/screens/vision-pro/"], [src*="/press/"]):not(.world-media)):not(:is(a, button, [data-capsule]) *) {
position: relative; display: block;
}
.can-zoom .stage-frame picture:has(> img:is([src*="/screens/mac"], [src*="/screens/vision-pro/"])) { width: fit-content; max-width: 100%; margin-inline: auto; }
.can-zoom main picture.is-hug { width: fit-content; max-width: 100%; margin-inline: auto; }
.can-zoom main picture.is-hug-start { margin-inline: 0 auto; }
.can-zoom main picture:has(> img:is([src*="/screens/mac"], [src*="/screens/vision-pro/"], [src*="/press/"]):not(.world-media)):not(:is(a, button, [data-capsule]) *)::after {
content: ""; position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%;
background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315130F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
box-shadow: 0 0 0 1px rgba(21, 19, 15, .12), 0 4px 12px -4px rgba(21, 19, 15, .35); pointer-events: none;
}
@media (max-height: 499.98px) {
.can-zoom main picture:has(> img:is([src*="/screens/mac"], [src*="/screens/vision-pro/"], [src*="/press/"]):not(.world-media)):not(:is(a, button, [data-capsule]) *)::after {
inset-block-start: 6px; inset-inline-end: 6px; width: 26px; height: 26px; background-size: 15px 15px;
}
}
}
}
@layer motion {
.motion [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .6s ease, transform .8s var(--ease); }
.motion [data-reveal].is-in, .motion [data-reveal]:focus-within { opacity: 1; transform: none; }
.motion .hero-title .lift { transform: translateY(108%); transition: transform 1.2s var(--ease); }
.motion .hero-title .line-b .lift { transition-delay: .12s; }
.motion .hero-film { opacity: 0; transform: translateY(32px); transition: opacity 1s ease .2s, transform 1.3s var(--ease) .2s; }
.motion.is-loaded .hero-title .lift, .motion.is-loaded .hero-film { opacity: 1; transform: none; }
.motion .hl { background-size: 0% .32em; transition: background-size 1.2s var(--ease) .35s; }
.motion .is-in .hl, .motion .hl.is-in { background-size: 100% .32em; }
.is-hscroll .worlds-sticky {
position: sticky; top: 0; height: 100svh; min-height: 560px; max-height: 1080px; overflow: hidden;
display: flex; flex-direction: column; justify-content: safe center; padding-block: calc(var(--header) + 24px) 32px;
}
.is-hscroll .worlds-viewport { overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.is-hscroll .worlds-progress { display: block; }
.is-hscroll .world { width: clamp(272px, 44vw, 680px); }
@media (min-width: 700px) and (max-width: 999.98px) and (orientation: portrait) and (min-height: 900px) {
.is-hscroll .world { width: 62vw; }
.is-hscroll .world-q { font-size: 36px; }
.is-hscroll .world-t { font-size: 18px; }
}
@media (max-height: 760px) and (min-width: 700px) {
.is-hscroll .worlds-sticky { padding-block: calc(var(--header) + 12px) 16px; }
.is-hscroll .worlds-head { margin-bottom: 18px; row-gap: 4px; }
.is-hscroll .worlds-head h2 { font-size: clamp(34px, 4.6vw, 60px); }
.is-hscroll .worlds-head .label { margin-bottom: 4px; }
.is-hscroll .world { width: clamp(272px, 36vw, 520px); }
.is-hscroll .world-media { aspect-ratio: 2 / 1; }
.is-hscroll .world-link picture, .is-hscroll .world-link > img { margin-bottom: 12px; }
.is-hscroll .world-q { font-size: clamp(22px, 2.4vw, 32px); }
.is-hscroll .world-t { margin-top: 6px; font-size: 16px; }
.is-hscroll .world-more { margin-top: 2px; }
}
@media (orientation: landscape) and (max-height: 639.98px) and (min-width: 600px) {
.story-wrap:not(.is-on) .step { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 28px; padding-block: 24px; }
.story-wrap:not(.is-on) .step-fig img,
.story-wrap:not(.is-on) .step-fig.is-tall img { width: auto; max-width: 100%; max-height: calc(100svh - var(--header) - 56px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
.stage-frame .step-fig { transform: none; }
}
}
@layer pages {
.hero-lede > * + * { margin-top: 10px; }
.hero-lede .label { margin: 0; }
.hero-actions .fine { flex-basis: 100%; max-width: 34em; }
.hero-actions .chips { flex-basis: 100%; font-size: 15px; margin-top: 4px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1200px) {
.hero-lede { font-size: 16px; line-height: 1.5; }
.hero-actions .fine { font-size: 14px; }
.hero-actions .chips { max-width: 40em; }
}
@media (max-width: 699.98px) {
.hero { padding-bottom: 64px; }
.hero-title { grid-row: 1; display: block; }
.hero-title .line-b { padding-top: 0; }
.hero-film { grid-row: 2; margin-top: 16px; aspect-ratio: auto; height: clamp(280px, calc(100svh - var(--header) - 23.2vw - 166px), 125vw); }
.hero-actions { display: contents; }
.hero-btns { grid-row: 3; margin-top: 20px; }
.hero-btns .btn { flex: 1 1 auto; }
.hero-lede { grid-row: 4; margin-top: 32px; font-size: 19px; line-height: 1.5; color: var(--ink); }
.hero-actions .fine { grid-row: 5; margin-top: 20px; font-size: 15px; }
.hero-actions .chips { grid-row: 6; margin-top: 16px; font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 499.98px) {
.hero {
padding-top: 12px; padding-bottom: 48px;
padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 24px; }
.hero-title { grid-row: 1; grid-column: 1; display: block; align-self: start; font-size: min(52px, 5vw); }
.hero-title .line-b { text-align: start; }
.hero-film {
grid-row: 1 / 3; grid-column: 2; width: auto; margin: 0; height: clamp(180px, calc(100svh - var(--header) - 24px), 320px);
border-radius: var(--r-m); overflow: hidden;
}
.hero-actions { display: contents; }
.hero-btns { grid-row: 2; grid-column: 1; align-self: start; margin-top: 16px; }
.hero-btns .btn { min-height: 44px; }
.hero-lede { grid-row: 3; grid-column: 1 / -1; max-width: 44em; margin-top: 28px; }
.hero-actions .fine { grid-row: 4; grid-column: 1 / -1; margin-top: 18px; }
.hero-actions .chips { grid-row: 5; grid-column: 1 / -1; margin-top: 12px; }
}
@media (min-width: 1000px) and (max-height: 760px) and (min-height: 500px) {
.hero { padding-bottom: clamp(48px, 6vw, 96px); }
.hero-grid { --hero-fs: min(120px, calc((100cqi - 23rem - 32px) / 8.1)); grid-template-columns: minmax(0, 1fr) 23rem; column-gap: 32px; }
.hero-title { font-size: var(--hero-fs); }
.hero-title .line-a { grid-column: 1; }
.hero-lede { grid-row: 1; grid-column: 2; align-self: end; max-width: none; margin: 0 0 14px; font-size: 15px; line-height: 1.45; position: relative; z-index: 2; }
.hero-lede > * + * { margin-top: 6px; }
.hero-film {
--hf: clamp(220px, calc(100svh - var(--header) - 2.25 * var(--hero-fs) - 110px), 53svh);
height: var(--hf); width: min(100vw, calc(var(--hf) * 2.6)); justify-self: center; margin-inline: 0;
border-radius: clamp(0px, (100vw - var(--hf) * 2.6) * 100, var(--r-l)); overflow: clip;
}
.hero-actions { grid-row: 3; grid-column: 1; align-self: start; max-width: calc(100cqi - 7.8 * var(--hero-fs) - 32px); margin: 12px 0 0; position: relative; z-index: 2; }
.hero-actions .fine { font-size: 14px; }
html:not([lang="en"]) .hero-grid { --hero-fit: 1; }
html:not([lang="en"]) .hero-actions { grid-row: 4; grid-column: 1 / -1; max-width: 46rem; }
html:not([lang="en"]) .hero-film { --hf: clamp(220px, calc(min(100svh - var(--header) - 2.25 * var(--hero-fs) - 110px, 53svh) - var(--hero-cut, 0px)), 53svh); }
}
html:not([lang="en"]) .hero-grid[data-fit] .hero-actions { grid-row: 3; grid-column: 1; max-width: var(--hero-room); }
.hero-grid[data-fit="stack"] .hero-btns { flex-direction: column; width: max-content; }
@media (max-width: 699.98px) {
#who .worlds-viewport { overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
#who .worlds-track { flex-direction: column; width: auto; gap: 44px; }
#who .world, #who .world-end { width: auto; }
#who .world-end { padding: 4px 0 0; }
#who .world-q { font-size: 30px; }
#who .world-t { font-size: 18px; line-height: 1.45; }
#who .world-link picture, #who .world-link > img { margin-bottom: 16px; }
}
@media (orientation: landscape) and (max-height: 499.98px) and (min-width: 600px) {
#who .worlds-viewport { overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
#who .worlds-track {
flex-direction: column; width: auto; gap: 28px;
padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
#who .world, #who .world-end { width: auto; }
#who .world-link { grid-template-columns: minmax(0, 5fr) auto minmax(0, 6fr); column-gap: 16px; align-items: start; }
#who .world-link picture, #who .world-link > img { grid-column: 1; grid-row: 1 / 5; margin: 0; }
#who .world-link::before { grid-column: 2; grid-row: 1; padding-top: .45em; }
#who .world-q, #who .world-t, #who .world-more { grid-column: 3; }
#who .world-q { font-size: 28px; }
#who .world-end { padding: 0; max-width: 34em; }
}
.how-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 88px); }
.how-head .intro { max-width: 30em; }
#how { padding-bottom: clamp(32px, 4vw, 56px); }
.app-film { padding-top: clamp(16px, 2.5vw, 40px); }
.app-film .film-block { margin: 0; }
.app-film figcaption { display: grid; gap: 12px; margin-top: 16px; font: 600 16px/1.4 var(--display); color: var(--ink); }
.film-text summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 650 15px/1.2 var(--display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.film-text p { max-width: 44em; margin-top: 8px; font: 400 16px/1.55 var(--text); color: var(--ink-2); }
.app-film .film { overflow: visible; margin-bottom: 60px; border-radius: 0; background: none; }
.app-film .film-video { border-radius: 10px; background: #D9D3CB; }
.app-film .film-bar { top: calc(100% + 8px); bottom: auto; inset-inline-end: 0; }
.app-film .film-btn { background: var(--paper-2); }
.app-film .film-btn:hover { background: var(--line); }
.booth-shot { margin: 0 0 clamp(40px, 6vw, 88px); }
.booth-shot img { aspect-ratio: 16 / 10; object-fit: cover; }
.booth-shot figcaption { font: 700 15px/1.3 var(--display); color: var(--accent-ink); }
@media (min-width: 700px) { .booth-shot img { aspect-ratio: 21 / 9; } }
@media (orientation: landscape) and (max-height: 499.98px) {
.hero-title .line { justify-self: start; }
.app-film .film-block { max-width: calc((100svh - var(--header) - 24px) * 16 / 9); margin-inline: auto; }
.booth-shot img { max-height: calc(100svh - var(--header) - 56px); }
#devices .device img { width: auto; max-width: 100%; max-height: calc(100svh - var(--header) - 40px); }
}
.math-grid { display: grid; gap: 24px 48px; margin-top: clamp(32px, 4vw, 56px); }
.math-side { display: grid; gap: 20px; align-content: start; }
.math-note { max-width: 34em; }
@media (min-width: 900px) { .math-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.one-small { max-width: 40em; margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 700px) and (max-width: 999.98px) {
#devices .device-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 32px); }
#devices .device-row { display: contents; }
#devices .device.is-vision, #devices .device.is-mac { grid-column: 1 / -1; }
#devices .device.is-iphone img { width: min(100%, 240px); }
#devices .device.is-ipad img { width: min(100%, 320px); }
#devices .device figcaption, #devices .device p { font-size: 16px; }
}
@media (max-width: 699.98px) {
#devices .device.is-iphone, #devices .device.is-ipad { width: 100%; }
#devices .device.is-iphone img { width: 56%; }
#devices .device.is-ipad img { width: 82%; }
}
.formats { margin-top: clamp(56px, 7vw, 104px); padding-top: 28px; border-top: 1px solid var(--line-strong); display: grid; gap: 16px; }
.formats-line { max-width: 40em; color: var(--sky-ink); }
.privacy-tiles { margin-top: 8px; }
.maker-row { margin-top: 28px; }
#pricing .split { gap: 24px; }
.pricing-legal { margin-top: clamp(28px, 3.4vw, 48px); max-width: 52em; }
.pricing-legal > * + * { margin-top: 12px; }
.stories-more { margin-top: 24px; }
.stories-follow { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line-strong); display: grid; gap: 14px; }
}
@layer pages {
.hiw-hero { padding-bottom: clamp(32px, 5vw, 72px); }
.scrolly { counter-reset: beat; padding-bottom: var(--sec-s); }
.scrolly-stage[hidden] { display: none; }
.scrolly-steps { list-style: none; }
.scrolly-step { counter-increment: beat; padding-block: 28px; border-top: 1px solid var(--line); }
.scrolly-step::before { content: counter(beat, decimal-leading-zero) " / 10"; display: block; margin-bottom: 10px; font: 650 14px/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scrolly-label { margin-bottom: 12px; font: 750 16px/1.2 var(--display); color: var(--accent-ink); }
.scrolly-step h3 { max-width: 12em; font-size: clamp(30px, 3.7vw, 54px); }
.scrolly-step h3 + p { margin-top: 14px; max-width: 26em; font-size: var(--fs-intro); color: var(--ink-2); }
.scrolly-step .scrolly-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; font: 650 15px/1.2 var(--display); color: var(--ink); }
.scrolly-choices span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-s); background: var(--paper-2); }
.scrolly { --brand-orange: var(--orange); --brand-yellow: var(--sun); --surface: var(--white); --shadow: rgba(21, 19, 15, .3); --font: var(--display); }
.scrolly.is-live .scrolly-stage {
display: flex; flex-direction: column; position: sticky; top: var(--header); z-index: 2; height: clamp(290px, 48svh, 460px); padding-block: 4px 10px;
background: var(--paper);
}
.scrolly-view { position: relative; flex: 1; min-height: 0; border-radius: var(--r-l); background: var(--paper-2); overflow: hidden; }
.scrolly-world { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#storyWorldB { opacity: 0; }
.scrolly-meta { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 4px 10px; }
.scrolly-act { font: 820 clamp(24px, 3vw, 44px)/1 var(--display); font-stretch: 108%; letter-spacing: -.04em; }
.scrolly-count { font: 650 14px/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scrolly.is-live .scrolly-step { display: grid; align-content: center; min-height: 44svh; padding-block: 0; border-top: 0; }
.scrolly.is-live .scrolly-step::before { display: none; }
.scrolly.is-live .scrolly-step:last-child { min-height: 64svh; }
.scrolly.is-live .scrolly-step { padding-inline-start: 20px; box-shadow: inset 3px 0 0 transparent; transition: box-shadow .4s ease; }
.scrolly.is-live .scrolly-step h3 { color: var(--ink-2); transition: color .4s ease; }
.scrolly.is-live .scrolly-step.is-current { box-shadow: inset 3px 0 0 var(--orange); }
.scrolly.is-live .scrolly-step.is-current h3 { color: var(--ink); }
[dir="rtl"] .scrolly-step::before { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .scrolly.is-live .scrolly-step.is-current { box-shadow: inset -3px 0 0 var(--orange); }
.scrolly-pic { display: none; }
.scrolly.is-seq .scrolly-step { display: flex; flex-direction: column; padding-block: 32px; }
.scrolly.is-seq .scrolly-pic { display: block; order: -1; flex: none; aspect-ratio: 16 / 10; margin-bottom: 20px; }
.scrolly.is-seq .scrolly-step h3 { font-size: clamp(30px, 3.7vw, 44px); }
@media (orientation: landscape) and (max-height: 639.98px) and (min-width: 600px) {
.scrolly.is-seq .scrolly-steps { display: block; max-width: none; }
.scrolly.is-seq .scrolly-step {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr;
column-gap: 28px; align-items: start; padding-block: 24px;
}
.scrolly.is-seq .scrolly-pic { grid-column: 1; grid-row: 1 / 7; aspect-ratio: auto; height: clamp(180px, calc(100svh - var(--header) - 56px), 420px); margin: 0; }
.scrolly.is-seq .scrolly-step::before, .scrolly.is-seq .scrolly-step > :not(.scrolly-pic) { grid-column: 2; }
.scrolly.is-seq .scrolly-step h3 { font-size: clamp(26px, 3.4vw, 40px); }
}
.scrolly.is-still .scrolly-stage { display: block; aspect-ratio: 16 / 9; max-height: 440px; margin-bottom: 24px; }
.scrolly.is-still .scrolly-view { height: 100%; }
.scrolly.is-still .scrolly-meta { display: none; }
@media (min-width: 1000px) {
.scrolly:not(.is-live) .scrolly-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 72px); }
.scrolly:not(.is-live) .scrolly-step h3 { font-size: clamp(26px, 2.6vw, 38px); }
}
@media (min-width: 900px) {
.scrolly-grid { --stage-h: min(calc(100svh - var(--header) - 48px), 700px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
.scrolly.is-live .scrolly-stage { grid-column: 2; grid-row: 1; top: calc((100svh + var(--header)) / 2 - var(--stage-h) / 2); height: var(--stage-h); margin: 0; padding: 0; background: none; }
.scrolly-steps { grid-column: 1; grid-row: 1; }
.scrolly:not(.is-live) .scrolly-steps { grid-column: 1 / -1; grid-row: 2; }
.scrolly.is-still .scrolly-stage { grid-column: 1 / -1; grid-row: 1; }
.scrolly.is-live .scrolly-step { min-height: 72svh; }
.scrolly.is-live .scrolly-step:last-child { min-height: 110svh; }
.scrolly-meta { padding: 0 4px 14px; }
}
.hiw-row { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.hiw-row > * { min-width: 0; }
@media (min-width: 1000px) {
.hiw-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 104px); }
.hiw-row.is-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.hiw-row.is-flip > .hiw-text { order: 2; }
}
.hiw-text .label { margin-bottom: 18px; }
.hiw-h { font-size: clamp(32px, 4vw, 60px); }
.hiw-body { margin-top: 20px; max-width: 34em; color: var(--ink-2); }
.hiw-body + .hiw-body { margin-top: 14px; }
.hiw-body code { font-size: .88em; }
.hiw-link { margin-top: 20px; }
.hiw-small { margin-top: 20px; max-width: 34em; }
.hiw-sub { margin: 36px 0 12px; font-size: var(--fs-h4); }
.hiw-steps { margin-top: 24px; max-width: 36em; }
.hiw-sub + .hiw-steps { margin-top: 8px; }
.hiw-steps + .hiw-body, .hiw-steps + .hiw-stat { margin-top: 28px; }
.on-sky .hiw-steps > li { border-top-color: rgba(21, 19, 15, .22); }
.on-sky .steps > li p { color: var(--ink); }
#words { padding-bottom: 0; }
.hiw-line { max-width: 22em; }
.hiw-bleed { margin-top: clamp(40px, 6vw, 96px); }
.hiw-bleed img { width: 100%; max-height: 86svh; object-fit: cover; }
@media (orientation: landscape) and (max-height: 499.98px) and (min-width: 600px) {
.hiw-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.hiw-row.is-flip > .hiw-text { order: 2; }
.hiw-row img, .hiw-bleed img { width: auto; max-width: 100%; max-height: calc(100svh - var(--header) - 40px); margin-inline: auto; }
.hiw-pair .shot-iphone { width: 34%; }
}
.points { list-style: none; max-width: 34em; }
.hiw-text .points { margin-top: 22px; }
.points li { padding-block: 16px; border-top: 1px solid var(--line); font: 600 clamp(18px, 1.5vw, 21px)/1.35 var(--display); letter-spacing: -.01em; }
.points li:last-child { border-bottom: 1px solid var(--line); }
.hiw-panel { padding: clamp(14px, 3vw, 40px); border-radius: var(--r-l); }
.hiw-shot { width: 100%; }
.hiw-stack { display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 1000px) {
.hiw-stack > :first-child { margin-inline-end: 10%; }
.hiw-stack > :last-child { margin-inline-start: 10%; }
}
.hiw-pair { display: grid; }
.hiw-pair .shot-iphone { width: min(46%, 240px); margin-block: calc(-1 * clamp(56px, 12vw, 140px)) 0; margin-inline: auto 0; position: relative; }
@media (min-width: 1000px) { .hiw-pair .shot-iphone { width: 36%; margin-inline-end: -2%; } }
.hiw-stat { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-strong); max-width: 34em; }
.hiw-stat-line { font-size: var(--fs-intro); color: var(--ink-2); }
.hiw-stat-line strong { font: 820 1.5em/1 var(--display); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.hiw-spec-lines { max-width: 34em; color: var(--ink-2); font-size: var(--fs-intro); line-height: 1.5; }
.hiw-spec-lines p + p { margin-top: 14px; }
.hiw-formats { gap: 8px 28px; font-size: clamp(18px, 2.1vw, 28px); line-height: 1.3; letter-spacing: -.01em; }
.hiw-formats + .hiw-sub { margin-top: 56px; }
@media (max-width: 699.98px) {
.hiw-formats { flex-direction: column; gap: 0; }
.hiw-formats > li { padding-block: 10px; border-top: 1px solid var(--line); }
.hiw-formats > li:last-child { border-bottom: 1px solid var(--line); }
.hiw-formats > li::after { display: none; }
}
.hiw-devices .compare, .hiw-devices table { text-align: start; }
.hiw-devices td.yes::before, .hiw-devices td.no::before { margin-bottom: 4px; }
@media (min-width: 700px) {
.hiw-devices th[scope="col"]:first-child { width: 34%; }
.hiw-devices td.yes, .hiw-devices td.no { vertical-align: middle; }
.hiw-devices td.yes::after { content: ""; display: block; width: 18px; height: 10px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-3px) rotate(-45deg); }
.hiw-devices td.no::after { content: ""; display: block; width: 18px; height: 3px; background: var(--control); }
}
@media (max-width: 699.98px) {
.hiw-devices td.no { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hiw-devices td.yes[data-label]::before { display: inline; }
.hiw-devices td.yes[data-label]::after { content: "\2713"; margin-inline-start: .5em; font-weight: 800; }
}
}
@layer pages {
.for-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.for-hero h1 { max-width: 13em; font-size: clamp(38px, 4.7vw, 68px); text-wrap: balance; }
.for-q { display: block; margin-bottom: .08em; }
.for-hero .for-credit { margin-top: 18px; }
.for-hero .page-hero-grid { align-items: end; }
@media (min-width: 1100px) { .for-hero .page-hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.for-bleed picture { display: block; }
.for-bleed img { aspect-ratio: 21 / 9; object-fit: cover; }
.for-bleed .film { height: auto; aspect-ratio: 21 / 9; }
.for-bleed figcaption { margin-top: 14px; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); font-size: var(--fs-s); }
.for-bleed .film { --film-inset: max(var(--gut), calc((100vw - var(--max)) / 2), env(safe-area-inset-left), env(safe-area-inset-right)); }
@media (max-width: 699.98px) {
.for-bleed img, .for-bleed .film { aspect-ratio: 4 / 3; }
.for-hero { display: flex; flex-direction: column; }
.for-hero > .wrap, .for-hero .page-hero-grid { display: contents; }
.for-hero .breadcrumb, .for-hero .page-hero-grid > div { padding-inline: var(--gut); }
.for-hero .page-hero-grid > :first-child { order: 1; }
.for-hero .for-bleed { order: 2; margin-top: 24px; }
.for-hero .page-hero-grid > :last-child { order: 3; margin-top: 24px; }
.for-hero .btn-row { margin-top: 20px; }
.for-hero .breadcrumb { margin-bottom: 4px; }
.for-hero .label { margin-bottom: 12px; }
.for-hero h1 { font-size: clamp(38px, 9.6vw, 46px); }
}
@media (min-width: 700px) and (max-width: 899.98px) {
.for-hero h1 { font-size: clamp(44px, 7vw, 60px); }
}
@media (min-width: 900px) and (max-height: 760px) {
.for-hero { padding-top: 12px; }
.for-hero .breadcrumb { margin-bottom: 8px; }
.for-hero .page-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
.for-hero h1 { font-size: clamp(38px, min(4.7vw, 8.2svh), 68px); }
.for-hero .page-hero-grid .btn-row { margin-top: 18px; }
.for-hero .for-credit { margin-top: 12px; }
.page-hero.for-hero .bleed { margin-top: 28px; }
}
@media (min-width: 600px) and (max-height: 560px) {
.for-hero { padding-top: 4px; }
.for-hero .breadcrumb { margin-bottom: 0; }
.for-hero .page-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 16px 40px; }
.for-hero .label { margin-bottom: 10px; }
.for-hero h1 { font-size: clamp(28px, 4.2vw, 40px); }
.for-hero .intro { font-size: 17px; }
.for-hero .page-hero-grid .btn-row { margin-top: 16px; }
.page-hero.for-hero .bleed { margin-top: 24px; }
.for-bleed img, .for-bleed .film { aspect-ratio: auto; height: calc(100svh - var(--header) - 24px); min-height: 180px; max-height: none; }
}
.for-world h2 { max-width: 12em; margin-bottom: clamp(40px, 6vw, 96px); }
.world-lines { list-style: none; display: grid; gap: 0 clamp(24px, 3vw, 48px); counter-reset: wl; }
.world-lines li {
counter-increment: wl; padding-top: 22px; margin-bottom: clamp(32px, 4vw, 48px); border-top: 2px solid var(--ink);
font: 650 clamp(20px, 1.8vw, 26px)/1.28 var(--display); letter-spacing: -.015em; text-wrap: pretty;
}
.world-lines li::before {
content: counter(wl, decimal-leading-zero); display: block; margin-bottom: 20px;
font: 700 14px/1 var(--display); letter-spacing: 0; color: var(--accent-ink);
}
@media (max-width: 699.98px) { .world-lines li { font-size: clamp(21px, 5.6vw, 24px); } }
@media (min-width: 700px) { .world-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
.world-lines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.world-lines.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.for-how h2 { max-width: 12em; margin-bottom: clamp(24px, 4vw, 64px); }
.for-how .story { counter-reset: fstep; }
.for-how .step { counter-increment: fstep; }
.for-how .step-text::before {
content: counter(fstep, decimal-leading-zero); display: block; margin-bottom: 16px;
font: 700 14px/1 var(--display); color: var(--accent-ink);
}
.for-how .step-text p { max-width: 21em; font: 620 clamp(21px, 2vw, 30px)/1.25 var(--display); letter-spacing: -.018em; color: var(--ink); text-wrap: pretty; }
.for-how .is-on .step-text { padding-inline-start: 18px; border-inline-start: 2px solid transparent; transition: border-color .5s ease; }
.for-how .is-on .step-text::before { color: var(--ink-2); transition: color .5s ease; }
.for-how .is-on .step-text p { opacity: .7; transition: opacity .5s ease; }
.for-how .is-on .step.is-active .step-text { border-inline-start-color: var(--ink); }
.for-how .is-on .step.is-active .step-text::before { color: var(--accent-ink); }
.for-how .is-on .step.is-active .step-text p { opacity: 1; }
.story .step-fig.is-echo { display: none; }
@media (min-width: 900px) {
.is-on .stage-frame .step-fig.is-tall img { max-height: calc(min(100svh - var(--header) - 48px, 820px) - 70px); }
}
@media (max-width: 699.98px), (max-height: 560px) {
.for-how .story-wrap.is-on { display: block; }
.for-how .is-on .story-stage { display: none; }
.for-how .is-on .step,
.for-how .is-on .step:first-child,
.for-how .is-on .step:last-child { min-height: 0; align-content: start; gap: 20px; padding-block: 32px 36px; border-top: 1px solid var(--line); }
.for-how .is-on .step:first-child { padding-top: 8px; border-top: 0; }
.for-how .is-on .step:last-child { padding-bottom: 0; }
.for-how .is-on .step > .step-fig { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.for-how .is-on .step-text { padding-inline-start: 0; border-inline-start: 0; }
.for-how .is-on .step-text::before { color: var(--accent-ink); }
.for-how .is-on .step-text p { opacity: 1; }
.for-how .step-fig.is-tall img { max-height: min(64svh, 480px); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.motion .for-how .is-on .step > .step-fig { animation: for-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
}
}
@keyframes for-rise { from { opacity: 0; transform: translateY(40px); } }
@media (max-width: 699.98px) {
.for-how .step-text p { font-size: clamp(22px, 6vw, 26px); }
}
@media (min-width: 700px) and (max-width: 899.98px) {
.for-how .step-text p { max-width: 24em; font-size: clamp(24px, 3.3vw, 28px); }
}
@media (min-width: 600px) and (max-height: 560px) {
.for-how .is-on .step { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.for-how .is-on .step > .step-fig.is-echo + .step-text { grid-column: 1 / -1; }
.for-how .step-fig img, .for-how .step-fig.is-tall img { width: auto; max-width: 100%; max-height: calc(100svh - var(--header) - 48px); margin-inline: auto; }
.for-how .step-text p { font-size: clamp(20px, 2.6vw, 24px); }
}
.ex { display: grid; gap: clamp(24px, 3vw, 40px) clamp(28px, 4.5vw, 72px); }
.ex-media { margin: 0; }
.ex-media picture { display: block; }
.ex-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow-shot); }
.ex-body > * + * { margin-top: 14px; }
.ex-body h3 { text-wrap: balance; font-size: clamp(32px, 3.8vw, 56px); font-weight: 820; font-stretch: 106%; line-height: .98; letter-spacing: -.035em; }
.ex-by { font: 700 18px/1.3 var(--display); color: var(--ink); }
.ex-by .chip-real { margin-inline-start: 8px; vertical-align: 2px; }
.ex-format { font: 700 15px/1.3 var(--display); color: var(--accent-ink); }
.ex-text { max-width: 30em; color: var(--ink-2); }
@media (min-width: 1000px) {
.ex { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: end; }
.ex-thumbs { grid-column: 1 / -1; }
}
@media (max-width: 699.98px) {
.ex > .ex-media { margin-inline: calc(-1 * var(--gut)); }
.ex > .ex-media img { border-radius: 0; box-shadow: none; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
.ex { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.ex-thumbs { grid-column: 1 / -1; }
.ex-body h3 { font-size: clamp(30px, 4.4vw, 40px); }
}
html:is(:lang(ja), :lang(ko), :lang(zh)) .ex-body h3 { font-size: clamp(28px, 2.8vw, 42px); }
@media (min-width: 700px) and (max-width: 999.98px) { html:is(:lang(ja), :lang(ko), :lang(zh)) .ex-body h3 { font-size: clamp(26px, 3.4vw, 32px); } }
@media (min-width: 600px) and (max-height: 560px) {
.ex-media img { max-height: calc(100svh - var(--header) - 32px); }
}
.ex-thumbs { list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; counter-reset: th; }
.ex-thumb { flex: none; width: min(62vw, 300px); scroll-snap-align: start; counter-increment: th; }
.thumb-media { position: relative; display: block; }
.thumb-media picture { display: block; }
.thumb-chip { position: absolute; inset-inline-start: 10px; top: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--chip); font: 650 14px/1.2 var(--display); color: var(--ink); }
.ex-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--paper-2); }
.thumb-title { display: block; margin-top: 10px; font: 650 16px/1.3 var(--display); letter-spacing: -.01em; }
.thumb-title::before { content: counter(th, decimal-leading-zero); margin-inline-end: 10px; font-weight: 700; font-size: 14px; color: var(--accent-ink); }
@media (min-width: 1000px) {
.ex-thumbs { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 32px 20px; overflow: visible; padding-bottom: 0; }
.ex-thumbs.cols-4 { --cols: 4; }
.ex-thumb { width: auto; }
}
.ex-minis { display: grid; gap: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 64px); margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.ex-mini { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ex-mini-text { max-width: 30em; font: 500 clamp(18px, 1.5vw, 21px)/1.45 var(--display); color: var(--ink-2); }
.ex-mini-text strong { color: var(--ink); font-weight: 800; }
.ex-mini .ex-thumbs { margin-top: 4px; }
@media (min-width: 700px) {
.ex-minis:not(.is-solo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-minis.is-solo .ex-mini { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px clamp(32px, 4.5vw, 72px); }
.ex-minis.is-solo .ex-mini .ex-thumbs { grid-column: 1 / -1; }
}
.for-check .faq-split > h2, .for-faq .faq-split > h2 { font-size: clamp(34px, 4.4vw, 64px); text-wrap: balance; }
@media (min-width: 1000px) { .for-check .faq-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); } }
.for-check .checklist li { padding-block: 18px; padding-inline-start: 44px; font-size: 18px; }
.for-check .checklist li::before { top: calc(18px + .5em); }
.for-check { border-block: 0; }
.for-check .checklist a { padding-block: 12px; }
@media (max-width: 799.98px) {
.for-more .worlds-track.is-strip {
display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 14px; scroll-padding-inline: var(--gut);
}
.for-more .is-strip .world { flex: none; width: 78vw; scroll-snap-align: start; }
}
@media (min-width: 700px) and (max-width: 799.98px) {
.for-more .is-strip .world { width: 44vw; }
}
@media (min-width: 600px) and (max-height: 560px) {
.for-more .is-strip .world-media { aspect-ratio: 2 / 1; }
.for-more .is-strip .world-link picture, .for-more .is-strip .world-link > img { margin-bottom: 12px; }
.for-more .is-strip .world-q { font-size: clamp(20px, 2.6vw, 26px); }
.for-more .is-strip .world-t { font-size: 15px; }
}
@media (max-width: 699.98px) {
[data-page="for"] .cta-body h2 { font-size: clamp(34px, 9.4vw, 42px); }
}
@media (min-width: 600px) and (max-height: 560px) {
[data-page="for"] .cta-body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; gap: 20px 40px; }
[data-page="for"] .cta-body h2 { font-size: clamp(28px, 4.4vw, 44px); }
}
.for-story .capsule.is-single { align-items: center; }
.for-story .for-quote { margin-block: 8px; }
.for-story-action { margin-top: 8px; }
.for-story .disclosure-note { margin-top: 8px; }
}
@layer pages {
.misc-cols { display: grid; gap: clamp(24px, 3.4vw, 40px) clamp(32px, 5vw, 80px); }
.misc-cols > h2 { font-size: clamp(32px, 4vw, 60px); }
@media (min-width: 1000px) {
.misc-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: start; }
.misc-cols > h2 { position: sticky; top: calc(var(--header) + 32px); }
}
.misc-cols > .copy-stack { max-width: 56em; }
.copy-stack > .copy-block + .copy-block { margin-top: 16px; }
.split:has(> :only-child) { margin-bottom: clamp(28px, 4vw, 56px); }
.page-hero a { text-decoration-thickness: 2px; text-underline-offset: .2em; }
.page-hero .page-nav { margin-top: clamp(28px, 4vw, 56px); }
.sec-s h2, .sec h2 { overflow-wrap: anywhere; }
.split > h2 { max-width: 12em; }
.split > .asset-all { align-self: end; }
:is([data-page="pricing"], [data-page="press"], [data-page="share-kit"]) :is(.page-hero .intro, .facts dd, #contact .prose p, .faq details > div p, .show-us) > a { padding-block: 12px; }
:is([data-page="pricing"], [data-page="press"], [data-page="share-kit"]) .legal-text > a { padding-block: 14px; }
@media (max-height: 500px) and (orientation: landscape) {
:is([data-page="pricing"], [data-page="press"], [data-page="share-kit"], [data-page="404"]) {
--fs-h1: clamp(34px, 5.6vw, 52px); --fs-h2: clamp(30px, 4.4vw, 42px); --sec: 56px; --sec-s: 48px;
}
:is([data-page="pricing"], [data-page="press"], [data-page="share-kit"]) .page-hero { padding-top: 16px; }
:is([data-page="pricing"], [data-page="press"], [data-page="share-kit"]) .split { margin-bottom: 28px; }
[data-page="pricing"] .cta-body h2 { font-size: clamp(30px, 4.4vw, 42px); }
.misc-cols > h2 { font-size: clamp(28px, 3.6vw, 36px); }
}
.legal-block { margin-top: 32px; }
.legal-block .legal-text a { color: var(--ink); }
.steps-note { margin-top: 32px; max-width: 60ch; }
.math-example { margin-top: clamp(28px, 4vw, 48px); max-width: 56em; }
.math-example .callout-title, .math-example h3 { font: 800 clamp(22px, 2.2vw, 32px)/1.1 var(--display); letter-spacing: -.025em; }
.math-example p { color: var(--ink-2); max-width: 44em; }
.math-foot { margin-top: 20px; max-width: 70ch; }
#compare .compare td.yes::before, #compare .compare td.no::before { margin-bottom: 4px; }
@media (min-width: 700px) {
#compare .compare th[scope="col"]:first-child { width: 46%; }
#compare .compare td.yes, #compare .compare td.no { vertical-align: middle; }
#compare .compare td.yes::after { content: ""; display: block; width: 18px; height: 10px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-3px) rotate(-45deg); }
#compare .compare td.no::after { content: ""; display: block; width: 18px; height: 3px; background: var(--control); }
}
@media (max-width: 699.98px) {
#compare .compare tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; padding-block: 18px; }
#compare .compare tbody th { grid-column: 1 / -1; font-size: 19px; }
#compare .compare td { min-height: 0; font-size: 17px; font-weight: 600; }
#compare .compare td[data-label]::before { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
#math .compare td[data-label]::before { margin-top: 6px; font-size: 14px; }
#compare .compare td.yes::after { content: ""; display: block; width: 18px; height: 10px; margin-top: 4px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg); transform-origin: 30% 70%; }
#compare .compare td.no::after { content: ""; display: block; width: 18px; height: 3px; margin-top: 12px; background: var(--control); }
}
@media (max-width: 699.98px) {
#compare .compare :is(th, td), #math .compare :is(th, td) { padding-inline: 0; }
#compare .compare tr.is-ours, #math .compare tr.is-ours { padding-inline: 16px; margin-inline: -16px; }
}
@media (min-width: 700px) and (max-width: 899.98px) {
#plans .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch; }
#plans .plan { padding: 24px 22px 26px; }
#plans .plan-price { font-size: clamp(52px, 7.4vw, 64px); }
}
.legal-block .legal-text { font-size: var(--fs-s); line-height: 1.55; }
@media (max-width: 699.98px) { .legal-block { padding: 20px 18px; } }
#math .compare td { overflow-wrap: anywhere; }
@media (min-width: 700px) {
html:is(:lang(ja), :lang(ko), :lang(zh)) #math .compare table { table-layout: fixed; }
html:is(:lang(ja), :lang(ko), :lang(zh)) #math .compare thead th:nth-child(1) { width: 28%; }
html:is(:lang(ja), :lang(ko), :lang(zh)) #math .compare thead th:nth-child(2) { width: 30%; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
[data-page="pricing"] #one-subscription .steps.is-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
[data-page="pricing"] #one-subscription .steps.is-row > li { grid-template-columns: 44px minmax(0, 1fr); }
}
#one-title em { color: var(--accent-ink); }
@media (min-width: 1000px) { [data-page="pricing"] .cta-body { grid-template-columns: minmax(0, 1fr); } }
.facts { border-top: 2px solid var(--ink); }
.facts dd { overflow-wrap: anywhere; }
.facts a { text-decoration-thickness: 2px; }
@media (min-width: 700px) { .facts > div { align-items: baseline; } }
.what-grid { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: 0; align-items: start; }
@media (min-width: 700px) { .what-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (min-width: 700px) and (max-width: 959.98px) { .what-grid { gap: 32px; } .what-grid .callout.note { padding-inline-start: 18px; } }
.what-grid .prose { max-width: none; }
.what-grid .prose li { color: var(--ink-2); }
.what-grid .callout h3 { font-size: var(--fs-h3); margin-bottom: 4px; }
.plain-list { display: grid; gap: 12px; padding-inline-start: 1.2em; list-style: disc; color: var(--ink-2); }
.plain-list li::marker { color: var(--accent-ink); }
.angles .tile { padding-top: 28px; border-top: 2px solid var(--ink); }
.angles .tile h3 { font-size: clamp(24px, 2.2vw, 32px); }
.angles .tile p { font-size: 17px; }
@media (min-width: 700px) and (max-width: 999.98px) { .grid-3.angles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .angles .tile p { font-size: 16px; } }
.copy-block .copy-label { letter-spacing: 0; font-stretch: 100%; line-height: 1.3; }
.copy-block pre { font-family: var(--text); font-size: 17px; line-height: 1.6; }
.copy-block pre.is-code { font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.founder-grid { display: grid; gap: clamp(32px, 4vw, 48px); max-width: 52em; }
.founder-grid .prose h3 { margin-top: 0; font-size: var(--fs-h4); }
.founder-grid .prose h3 + p { margin-top: 6px; }
.founder-grid .prose p + h3 { margin-top: 32px; }
.founder-grid .link-list { max-width: 30em; }
.link-list a { overflow-wrap: anywhere; }
.asset-all { margin: 0; }
.asset-block + .asset-block { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--ink); }
.asset-block > h3 { font-size: clamp(28px, 3vw, 44px); }
.asset-note { margin-top: 12px; max-width: 46em; color: var(--ink-2); }
.asset-block > .asset-note + *, .asset-block > h3 + :not(.asset-note) { margin-top: clamp(24px, 3vw, 40px); }
.asset-foot { margin-top: 20px; }
.asset-block h4 { font-size: var(--fs-h4); }
.asset-block .prose { max-width: 46em; }
.asset-block .prose li { color: var(--ink-2); }
.brand-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 760px) { .brand-grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } }
.brand-icon { display: grid; gap: 20px; justify-items: start; }
.brand-icon img { width: 128px; height: 128px; border-radius: 29px; box-shadow: var(--shadow-shot); }
.download-list { display: grid; gap: 14px; }
.download-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.download-list a.btn { min-height: 44px; border: 2px solid var(--ink); font: 650 15px/1.15 var(--display); }
.download-list a.btn:hover { text-decoration: none; }
.asset-note + .brand-grid, .brand-grid > div > .asset-note { margin-top: 0; }
.swatches { list-style: none; display: grid; gap: 20px 16px; margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.swatches li { display: grid; gap: 4px; justify-items: start; }
.swatch { display: block; width: 72px; height: 72px; margin-bottom: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch-yellow { background: #FFC24A; }
.swatch-orange { background: #F0540A; }
.swatch-brown { background: #1A1411; }
.swatch-black { background: #0B0908; }
.swatch-name { font: 700 16px/1.3 var(--display); }
.swatches code { padding: 0; background: none; font-size: 14px; color: var(--ink-2); }
.shot-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) {
.shot-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 64px); }
.shot-group.is-wide { grid-column: 1 / -1; }
}
@media (min-width: 1200px) { .shot-group.is-wide { grid-column: auto; } }
.shot-group { min-width: 0; }
.shot-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 20px; }
.shot-group-head h4 { margin-inline-end: auto; font-size: clamp(22px, 2vw, 28px); }
.shot-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); align-items: start; }
.shot-row li { min-width: 0; }
.shot-row img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-shot); outline: 1px solid var(--line); outline-offset: -1px; }
@media (max-width: 599.98px) {
.shot-group.is-wide .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot-group.is-wide .shot-row > li:first-child { grid-column: 1 / -1; }
}
.film-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
@media (min-width: 720px) { .film-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 359.98px) { .film-cards { grid-template-columns: minmax(0, 1fr); } }
.film-card { display: grid; gap: 4px; align-content: start; min-width: 0; }
.film-card h4 { margin-top: 14px; }
.film-poster { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-m); background: var(--paper-2); transition: background-color var(--t-fast) ease; }
.film-poster:hover { background: var(--sun); }
.film-poster img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); max-width: none; object-fit: contain; border-radius: 6px; }
.poster-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 600px) { .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 900px) { .poster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.poster-grid a { display: grid; gap: 10px; color: var(--ink-2); text-decoration: none; font: 600 14px/1.35 var(--display); }
.poster-grid a:hover { color: var(--ink); text-decoration: underline; }
.poster-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.capsule-links { max-width: 560px; margin-top: 20px; }
.capsule-links + .disclosure-note { margin-top: 24px; }
.why-list { list-style: none; display: grid; gap: 0 clamp(32px, 5vw, 80px); counter-reset: why; }
@media (min-width: 720px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-list li { counter-increment: why; padding: 24px 0 32px; border-top: 2px solid var(--ink); color: var(--ink-2); font-size: 18px; }
.why-list li::before { content: counter(why); display: block; margin-bottom: 14px; font: 820 clamp(30px, 3vw, 44px)/1 var(--display); letter-spacing: -.04em; color: var(--accent-ink); }
@media (max-width: 719.98px) {
.why-list li { position: relative; padding-block: 20px 24px; padding-inline-start: 56px; }
.why-list li::before { position: absolute; inset-inline-start: 0; top: 20px; margin: 0; }
}
.why-list strong { display: block; margin-bottom: 4px; font: 800 clamp(22px, 2.2vw, 32px)/1.1 var(--display); letter-spacing: -.025em; color: var(--ink); }
.badge-card { padding: clamp(20px, 3.4vw, 48px); border-radius: var(--r-l); background: var(--paper); }
.badge-card + .badge-card { margin-top: clamp(20px, 2.6vw, 32px); }
.badge-card h3 { font-size: clamp(28px, 3vw, 44px); }
.badge-card > p { margin-top: 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.badge-variants { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 640px) { .badge-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.badge-variant { display: grid; gap: 14px; align-content: start; }
.badge-panel { display: grid; place-items: center; min-height: 136px; padding: 28px 16px; border-radius: var(--r-m); }
.badge-panel.is-dark { background: var(--ink); }
.badge-panel.is-light { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.badge-panel img { width: 200px; height: 56px; max-width: 100%; }
.badge-variant figcaption { display: grid; gap: 4px; }
.badge-variant-name { font: 700 14px/1.3 var(--display); color: var(--ink-2); }
.badge-links { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-links a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
background: var(--white); color: var(--ink); text-decoration: none; font: 600 15px/1.2 var(--display);
}
.badge-links a:hover { border-color: var(--ink); background: var(--sun); }
.badge-helper { margin-top: 24px; }
.badge-helper a { display: inline-block; padding-block: 10px; }
.badge-card .copy-stack { margin-top: 24px; }
.badge-card .copy-block { background: var(--white); }
.badge-card .copy-block pre.is-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.badge-zip { display: grid; gap: 12px; justify-items: start; margin-top: clamp(32px, 4vw, 56px); }
.badge-zip p:first-child { font: 800 clamp(22px, 2.2vw, 32px)/1.15 var(--display); letter-spacing: -.025em; max-width: 24em; }
.website-soon { max-width: 44em; color: var(--ink-2); }
.website-soon strong { color: var(--ink); }
.rules { align-items: start; }
.rules .callout h3 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 6px; }
.rules .callout.note { padding-block: clamp(22px, 3vw, 40px); padding-inline: clamp(20px, 2.4vw, 32px) 0; }
.rules .callout.warn { padding: clamp(22px, 3vw, 40px); border-radius: var(--r-l); background: var(--white); }
.show-us { margin-top: clamp(32px, 4vw, 56px); max-width: 44em; font: 650 clamp(19px, 1.8vw, 24px)/1.35 var(--display); }
.show-us a { overflow-wrap: anywhere; }
.lost { padding-top: clamp(24px, 5vw, 72px); }
.lost-card { display: grid; gap: clamp(12px, 2vw, 28px) clamp(32px, 5vw, 80px); }
.lost-code { font: 820 clamp(110px, 30vw, 300px)/.8 var(--display); font-stretch: 112%; letter-spacing: -.06em; color: var(--orange); }
.lost-main { display: grid; gap: 20px; justify-items: start; align-content: end; }
.lost-main .btn-row { margin-top: 8px; }
.lost-icon { width: 80px; height: 80px; border-radius: 18px; }
.lost-main h1 { max-width: 12em; }
@media (min-width: 1000px) { .lost-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .lost-code { font-size: clamp(160px, 19vw, 290px); } }
.lost-main h1 { overflow-wrap: anywhere; }
@media (max-width: 999.98px) { .lost-card { row-gap: 20px; } .lost-main { display: contents; } .lost-icon { order: -1; } }
.lost .worlds-track.is-strip { margin-top: clamp(56px, 8vw, 112px); padding-inline: 0; }
@media (min-width: 700px) and (max-width: 799.98px) { .lost .worlds-track.is-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } }
@media (min-width: 700px) and (max-width: 799.98px) { html:not([lang="en"]) .lost .is-strip .world-q { font-size: 21px; } }
@media (max-height: 500px) and (orientation: landscape) {
.lost { padding-top: 16px; }
.lost-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; column-gap: 32px; }
.lost-main { display: grid; }
.lost-code { grid-row: 1; padding-top: 0; border-top: 0; font-size: clamp(96px, 44svh, 150px); }
.lost-icon { order: 0; width: 56px; height: 56px; border-radius: 13px; }
.lost-main h1 { font-size: clamp(30px, 4.4vw, 42px); }
.lost .worlds-track.is-strip { margin-top: 48px; }
}
}
@layer pages {
.doc { padding-block: clamp(28px, 4vw, 64px) var(--sec-s); }
.doc :is(h2, h3, section)[id] { scroll-margin-top: calc(var(--header) + 20px); }
.doc-head { margin-bottom: clamp(28px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 36px); }
.doc-head h1 { font-size: clamp(40px, 7vw, 96px); line-height: .98; text-wrap: balance; overflow-wrap: anywhere; }
.doc-head .updated { margin-top: 18px; }
html:is(:lang(ja), :lang(ko), :lang(zh)) .doc-head h1 { font-size: clamp(32px, 6vw, 80px); }
@media (max-height: 500px) and (orientation: landscape) {
.doc { padding-top: 20px; }
.doc-head { margin-bottom: 24px; padding-bottom: 20px; }
.doc-head h1 { font-size: clamp(36px, 5.4vw, 52px); }
.doc-head .updated { margin-top: 10px; }
}
.doc .prose { font-size: var(--fs-body); line-height: 1.65; }
.doc .prose :is(p, li, dd, td, a, summary) { overflow-wrap: anywhere; }
.doc .prose a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.doc .prose a:hover { text-decoration-thickness: 2px; }
.doc .prose :is(p, li, dd) > a:not(.btn) { padding-block: 12px; }
.doc .prose .legal-text > a { padding-block: 14px; }
.doc .prose strong { font-weight: 700; }
.doc .prose code { font: .9em var(--mono); padding: .1em .4em; border-radius: 6px; background: var(--paper-2); }
.doc .prose :is(ul, ol) { padding-inline-start: 1.3em; }
.doc .prose li { padding-inline-start: .2em; }
.doc .prose h2 {
margin-top: clamp(48px, 5vw, 76px); padding-top: clamp(24px, 2.4vw, 34px); border-top: 1px solid var(--line);
font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; text-wrap: balance;
}
.doc .prose section > h2:first-child { margin-top: 0; }
.doc .prose .lang-block > h2:first-child { margin-top: 0; }
.doc .prose :is(.lang-block > h2:first-child, .toc + section > h2:first-child) { padding-top: 0; border-top: 0; }
.doc .prose h2 + * { margin-top: .8em; }
.doc .prose h3 { margin-top: 1.9em; font-size: clamp(21px, 2vw, 26px); line-height: 1.15; }
.doc .prose h2 + h3 { margin-top: 1.2em; }
.doc .prose h3 + * { margin-top: .5em; }
.doc .prose section:not(.lang-block) { margin-top: clamp(48px, 5vw, 76px); }
.doc .prose .callout { padding: 22px 26px; border-radius: var(--r-m); }
.doc .prose .callout.note { padding-block: 4px; padding-inline: 20px 0; border-radius: 0; }
.doc .prose .callout > * + * { margin-top: 10px; }
.doc .prose .callout-title { font-size: clamp(24px, 2.4vw, 32px); }
.doc .prose .callout :is(ul, ol) { padding-inline-start: 1.2em; }
.doc .prose .callout li + li { margin-top: .5em; }
.doc .prose .callout.note.summary { padding-block: 8px; }
.doc .prose .callout .legal-text { font-size: var(--fs-s); line-height: 1.55; }
@media (max-width: 479.98px) { .doc .prose .callout { padding: 20px 18px; } }
.doc .toc { padding: 22px clamp(18px, 3vw, 28px); }
.doc .toc > p { font: 800 15px/1.2 var(--display); letter-spacing: -.005em; color: var(--ink); }
.doc .toc ol { margin-top: 8px; }
.doc .toc li { padding-inline-start: 0; }
.doc .toc li::marker { color: var(--ink-2); font-size: 14px; }
.doc .toc a { min-height: 44px; text-decoration: none; color: var(--ink); }
.doc .toc a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (max-width: 599.98px) {
.doc .toc { padding: 18px 16px 12px; }
.doc .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; columns: auto; padding-inline-start: 0; font-size: 15px; line-height: 1.25; }
.doc .toc li { margin-inline-start: 1.6em; padding-inline-start: 0; }
.doc .toc a { min-height: 44px; padding-block: 4px; }
}
@media (max-width: 359.98px) { .doc .toc ol { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) and (max-width: 1099.98px) {
.doc .toc ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; columns: auto; padding-inline-start: 0; font-size: 16px; line-height: 1.25; }
.doc .toc li { margin-inline-start: 1.7em; }
.doc .toc a { padding-block: 4px; }
}
@media (min-width: 1100px) {
.doc > .prose-container { max-width: calc(1180px + 2 * var(--gut)); }
.doc .prose.doc-cols, .doc .prose > .lang-block {
display: grid; grid-template-columns: 15rem minmax(0, 41rem); column-gap: clamp(48px, 6vw, 96px); row-gap: 0; justify-content: start;
}
.doc .prose.doc-cols > *, .doc .prose > .lang-block > * { grid-column: 2; min-width: 0; }
.doc .prose.doc-cols > .toc, .doc .prose > .lang-block > .toc {
grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: calc(var(--header) + 28px); margin-top: 0;
max-height: calc(100vh - var(--header) - 56px); overflow-y: auto; padding-block: 0; padding-inline: 0 12px; border-radius: 0; background: none;
}
.doc .toc > p { padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.doc .toc ol { columns: 1; margin-top: 6px; padding-inline-start: 0; list-style: none; counter-reset: toc; }
.doc .toc li { counter-increment: toc; }
.doc .toc li a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.doc .toc li a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 1.6em; font: 700 14px/1.7 var(--display); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.doc .toc li a:hover { color: var(--ink); }
.doc .prose.doc-cols > .toc:first-child + section { margin-top: 0; }
}
@media (min-width: 1100px) and (max-height: 719.98px) {
.doc .prose.doc-cols > .toc, .doc .prose > .lang-block > .toc { position: static; max-height: none; overflow: visible; }
}
@media (min-width: 1100px) and (max-height: 789.98px) {
.doc .prose.doc-cols > .toc:has(li:nth-child(14)), .doc .prose > .lang-block > .toc:has(li:nth-child(14)) { position: static; max-height: none; overflow: visible; }
}
@media (min-width: 1100px) and (max-height: 1019.98px) {
.doc .prose.doc-cols > .toc:has(li:nth-child(15)), .doc .prose > .lang-block > .toc:has(li:nth-child(15)) { position: static; max-height: none; overflow: visible; }
}
.doc .prose dl { display: grid; margin-top: 1.2em; border-bottom: 1px solid var(--line); }
.doc .prose dt { padding-top: 14px; border-top: 1px solid var(--line); font: 700 14px/1.4 var(--display); color: var(--ink-2); }
.doc .prose dd { padding-bottom: 14px; }
@media (min-width: 640px) {
.doc .prose dl { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); }
.doc .prose dt, .doc .prose dd { padding-block: 13px; border-top: 1px solid var(--line); }
.doc .prose dt { padding-top: 17px; }
.doc .prose dd { margin: 0; padding-inline-start: 24px; }
}
.doc .prose .table-wrap { margin-top: 1.3em; }
.doc .prose .table-wrap table { font-size: 16px; }
.doc .prose .table-wrap td { color: var(--ink-2); }
.doc .prose .table-wrap tbody th { font: 750 17px/1.3 var(--display); letter-spacing: -.01em; }
@media (min-width: 700px) {
.doc .prose .table-wrap { border-bottom: 1px solid var(--line); }
.doc .prose .table-wrap :is(th, td) { padding-inline-end: 18px; }
.doc .prose .table-wrap table { font-size: 15px; }
}
@media (min-width: 700px) {
html:not([lang="en"]) .doc .prose .table-wrap :is(th, td) { overflow-wrap: break-word; }
html:not([lang="en"]) .doc .prose .table-wrap tbody th { min-width: 9em; }
html:is(:lang(ja), :lang(ko), :lang(zh)) .doc .prose .table-wrap table { table-layout: fixed; }
html:lang(ja) .doc .prose .table-wrap tbody th { word-break: keep-all; overflow-wrap: anywhere; }
}
@media (max-width: 699.98px) {
.doc .prose .table-wrap tr { padding-block: 18px; }
.doc .prose .table-wrap tr:last-child { border-bottom: 1px solid var(--line); }
.doc .prose .table-wrap td[data-label]::before { margin-bottom: 1px; }
}
.doc .prose .contact-cards { margin-top: 1.1em; padding-inline-start: 0; gap: 14px; }
.doc .prose .contact-cards > li { margin-top: 0; }
.doc .prose .contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 24px 24px 26px; }
.doc .prose .contact-card > * { margin-top: 0; }
.doc .prose .contact-card h3 { margin-top: 0; font: 800 clamp(20px, 2vw, 24px)/1.15 var(--display); }
.doc .prose .contact-card p { color: var(--ink-2); }
.doc .prose .contact-card .btn { margin-top: auto; max-width: 100%; height: auto; min-height: 44px; padding-block: 10px; white-space: normal; overflow-wrap: anywhere; text-align: start; }
@media (max-width: 479.98px) {
.doc .prose .contact-card { padding: 20px 16px; }
.doc .prose .contact-card .btn { align-self: stretch; justify-content: center; text-align: center; }
}
@media (max-width: 359.98px) { .doc .prose .contact-card .btn { padding-inline: 12px; font-size: 14px; } }
.doc .prose :is(.doc-steps, .doc-checks) { list-style: none; padding-inline-start: 0; counter-reset: dstep; }
.doc .prose .doc-steps > li {
position: relative; counter-increment: dstep; min-height: 44px; padding-block: 7px; padding-inline: 52px 0; margin-top: 0;
}
.doc .prose .doc-steps > li + li { margin-top: 4px; }
.doc .prose .doc-steps > li::before, .doc .prose .doc-checks > li::before {
content: counter(dstep); position: absolute; inset-inline-start: 0; top: 7px; display: grid; place-items: center; width: 32px; height: 32px;
border-radius: 50%; background: var(--ink); color: var(--paper); font: 750 14px/1 var(--display); font-variant-numeric: tabular-nums;
}
.doc .prose .doc-checks > li {
position: relative; counter-increment: dstep; margin-top: 0; padding-block: 18px; padding-inline: 52px 0; border-top: 1px solid var(--line);
}
.doc .prose .doc-checks > li:last-child { border-bottom: 1px solid var(--line); }
.doc .prose .doc-checks > li::before { top: 19px; }
.doc .prose .doc-checks h3 { margin-top: 0; font: 800 clamp(19px, 1.8vw, 22px)/1.25 var(--display); letter-spacing: -.015em; }
.doc .prose .doc-checks h3 + p { margin-top: 4px; color: var(--ink-2); }
.doc .prose .doc-checks li + li { margin-top: 0; }
.doc .prose .faq { margin-top: 1.1em; }
.doc .prose .faq > details { margin-top: 0; }
.doc .prose .faq summary { min-height: 64px; padding-block: 14px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; }
.doc .prose .faq summary:focus-visible { outline-offset: 2px; }
.doc .prose .faq details > div { padding-block: 0 22px; padding-inline: 0 52px; max-width: none; }
@media (max-width: 599.98px) { .doc .prose .faq details > div { padding-inline-end: 0; } }
.doc .prose .fr-contact { padding-top: 1.4em; border-top: 2px solid var(--ink); }
.doc .prose .fr-contact > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc .prose .lang-block + .lang-block { margin-top: clamp(64px, 8vw, 120px); padding-top: clamp(40px, 5vw, 72px); border-top: 2px solid var(--ink); }
.doc .prose .lang-block + .lang-block > :first-child { margin-top: 0; }
.doc .prose .btn { min-height: 44px; }
}
@layer print {
@media print {
body { background: #fff; color: #000; font-size: 11pt; }
.site-header, .menu, .film-bar, .film-play, .reel, .marquee, .wordmark, .skip-link, .lightbox, [data-copy], .story-stage { display: none !important; }
.site-header { position: static; }
.worlds-sticky, .is-hscroll .worlds-sticky { position: static; height: auto; }
.worlds-track { flex-wrap: wrap; width: auto; transform: none !important; }
.on-sky, .on-sand, .on-white, .band, .site-footer, .plan.featured { background: none; }
.motion [data-reveal] { opacity: 1; transform: none; }
.is-on .step > .step-fig { position: static; width: auto; height: auto; clip-path: none; }
.doc a[href^="http"]::after, .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
h1, h2, h3 { break-after: avoid; }
figure, .plan, .faq details { break-inside: avoid; }
}
}