@font-face {
font-family: "Schibsted Grotesk";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("/assets/fonts/schibsted-grotesk-latin-v1.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Schibsted Grotesk";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("/assets/fonts/schibsted-grotesk-latin-ext-v1.woff2") format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Vazirmatn";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/vazirmatn-400-arabic.woff2") format("woff2");
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "Vazirmatn";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/vazirmatn-600-arabic.woff2") format("woff2");
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
:root {
color-scheme: light dark;
--paper: oklch(0.965 0.012 95);
--card: oklch(0.995 0.004 95);
--sunk: oklch(0.94 0.014 95);
--ink: oklch(0.22 0.015 85);
--ink-2: oklch(0.36 0.015 85);
--dim: oklch(0.5 0.02 85);
--accent: oklch(0.5 0.11 150);
--accent-ink: oklch(0.42 0.1 150);
--on-accent: #fff;
--accent-soft: oklch(0.5 0.11 150 / 0.11);
--accent-line: oklch(0.5 0.11 150 / 0.28);
--coral: oklch(0.62 0.16 30 / 0.6);
--coral-strong: oklch(0.55 0.17 30);
--coral-soft: oklch(0.62 0.16 30 / 0.12);
--amber: oklch(0.55 0.12 75);
--amber-soft: oklch(0.75 0.13 80 / 0.18);
--line: oklch(0.88 0.012 95);
--line-soft: oklch(0.22 0.015 85 / 0.08);
--rule: oklch(0.9 0.01 95);
--frame: #15150f;
--frame-ring: oklch(1 0 0 / 0.1);
--glass: oklch(0.965 0.012 95 / 0.72);
--glow: oklch(0.8 0.12 150 / 0.45);
--glow-2: oklch(0.86 0.08 110 / 0.5);
--shadow-color: 85 30% 20%;
--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 2px 6px hsl(var(--shadow-color) / 0.04);
--shadow: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 10px 30px -10px hsl(var(--shadow-color) / 0.16);
--shadow-lg: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 18px 40px -12px hsl(var(--shadow-color) / 0.2), 0 50px 90px -40px hsl(var(--shadow-color) / 0.3);
--chat-stage: #000;
--chat-ink: oklch(0.94 0.01 85);
--chat-dim: oklch(0.7 0.01 85);
--night-paper: oklch(0.166 0.016 158);
--night-ink: oklch(0.95 0.01 150);
--night-dim: oklch(0.72 0.018 150);
--night-frame: #0a0f0c;
--night-line: oklch(0.32 0.014 158);
--hero-green: #1a3024;
--hero-text: #f2f5eb;
--hero-muted: #b8c7b9;
--lime: #d5ebb1;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: oklch(0.166 0.016 158);
--card: oklch(0.205 0.018 158);
--sunk: oklch(0.14 0.014 158);
--ink: oklch(0.95 0.01 150);
--ink-2: oklch(0.85 0.014 150);
--dim: oklch(0.72 0.018 150);
--accent: oklch(0.78 0.11 150);
--accent-ink: oklch(0.82 0.1 150);
--on-accent: oklch(0.166 0.016 158);
--accent-soft: oklch(0.78 0.11 150 / 0.13);
--accent-line: oklch(0.78 0.11 150 / 0.3);
--coral: oklch(0.6 0.13 30 / 0.55);
--coral-strong: oklch(0.75 0.13 30);
--coral-soft: oklch(0.7 0.13 30 / 0.16);
--amber: oklch(0.82 0.11 80);
--amber-soft: oklch(0.8 0.12 80 / 0.14);
--line: oklch(0.3 0.01 95);
--line-soft: oklch(1 0 0 / 0.07);
--rule: oklch(0.26 0.01 95);
--frame: #050504;
--frame-ring: oklch(1 0 0 / 0.14);
--glass: oklch(0.17 0.008 95 / 0.7);
--glow: oklch(0.55 0.11 150 / 0.4);
--glow-2: oklch(0.45 0.07 110 / 0.35);
--shadow-color: 0 0% 0%;
--shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
--shadow: 0 1px 2px hsl(0 0% 0% / 0.4), 0 12px 32px -10px hsl(0 0% 0% / 0.6);
--shadow-lg: 0 2px 4px hsl(0 0% 0% / 0.4), 0 24px 50px -14px hsl(0 0% 0% / 0.7), 0 60px 100px -40px hsl(0 0% 0% / 0.6);
}
}
:root {
--sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--fa: Vazirmatn, system-ui, sans-serif;
--fs-display: clamp(3rem, 6.6vw, 5.75rem);
--fs-h1: clamp(2.5rem, 4.9vw, 4.4rem);
--fs-h2: clamp(2.1rem, 4.4vw, 3.6rem);
--fs-h3: clamp(1.2rem, 1.6vw, 1.4rem);
--fs-lead: clamp(1.125rem, 1.5vw, 1.3rem);
--fs-small: 0.9375rem;
--fs-micro: 0.8125rem;
--track-display: -0.052em;
--track-head: -0.04em;
--container: 1240px;
--reading: 720px;
--gutter: clamp(20px, 4vw, 48px);
--section-gap: clamp(64px, 8vw, 104px);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--radius-sm: 10px;
--radius: 22px;
--radius-lg: 30px;
--header-h: 68px;
--easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 20px);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
main {
display: block;
overflow-x: clip;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
blockquote {
margin: 0;
}
h1,
h2,
h3,
h4 {
line-height: 1.05;
text-wrap: balance;
color: var(--ink);
}
h1 {
font-size: var(--fs-h1);
font-weight: 750;
letter-spacing: var(--track-display);
line-height: 0.98;
}
h2 {
font-size: var(--fs-h2);
font-weight: 700;
letter-spacing: var(--track-head);
}
h3 {
font-size: var(--fs-h3);
font-weight: 650;
letter-spacing: -0.022em;
line-height: 1.2;
}
h4 {
font-size: 1.0625rem;
font-weight: 650;
letter-spacing: -0.01em;
line-height: 1.3;
}
p {
color: var(--dim);
text-wrap: pretty;
}
strong,
b {
font-weight: 650;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--accent-ink);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
a:hover {
text-decoration: underline;
}
a,
summary,
button {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
border-radius: 6px;
}
::selection {
background: var(--accent-soft);
}
code,
kbd {
font-family: var(--mono);
font-size: 0.86em;
background: var(--sunk);
border: 1px solid var(--line-soft);
border-radius: 6px;
padding: 0.1em 0.38em;
color: var(--ink);
overflow-wrap: anywhere;
}
.fa {
font-family: var(--fa);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-gap);
}
.reading {
max-width: var(--reading);
}
.skip-link {
position: absolute;
top: 8px;
left: 16px;
transform: translateY(-200%);
z-index: 100;
background: var(--card);
color: var(--ink);
padding: 12px 16px;
border-radius: 10px;
box-shadow: var(--shadow);
}
.skip-link:focus {
transform: none;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
min-height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
isolation: isolate;
}
.site-header::before {
content: "";
position: absolute;
inset: 0 calc(50% - 50vw);
z-index: -1;
background: var(--glass);
-webkit-backdrop-filter: saturate(1.8) blur(20px);
backdrop-filter: saturate(1.8) blur(20px);
border-bottom: 1px solid var(--line-soft);
}
@media (prefers-reduced-transparency: reduce) {
.site-header::before {
background: var(--paper);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.3rem;
font-weight: 750;
letter-spacing: -0.04em;
color: var(--ink);
text-decoration: none;
}
.logo:hover {
text-decoration: none;
}
.logo img {
width: 28px;
height: 28px;
border-radius: 25%;
}
.site-nav {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
}
.site-nav > a:not(.pill) {
color: var(--ink-2);
text-decoration: none;
padding: 8px 14px;
border-radius: 999px;
min-height: 40px;
display: inline-flex;
align-items: center;
transition: background 0.2s, color 0.2s;
}
.site-nav > a:not(.pill):hover {
background: var(--line-soft);
color: var(--ink);
}
.site-nav > a[aria-current="page"] {
color: var(--ink);
background: var(--line-soft);
}
.site-nav .pill {
margin-left: 8px;
}
.button,
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
min-height: 50px;
border-radius: 999px;
font-size: 0.97rem;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
border: 1px solid transparent;
transition:
transform 0.25s var(--easing),
box-shadow 0.25s var(--easing),
background-color 0.2s;
}
.button:hover,
.pill:hover {
text-decoration: none;
}
.pill {
padding: 9px 18px;
min-height: 42px;
font-size: 0.9rem;
}
.primary,
.site-nav .pill {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
box-shadow: 0 1px 0 oklch(1 0 0 / 0.2) inset, var(--shadow-sm);
}
.secondary {
background: var(--card);
color: var(--ink);
border-color: var(--line);
box-shadow: var(--shadow-sm);
}
.button-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 32px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
text-decoration: none;
color: var(--accent-ink);
}
.text-link:hover {
text-decoration: underline;
}
:is(p, ul, ol) + p:has(> .text-link:only-child) {
margin-top: var(--space-5);
}
.eyebrow {
font-size: 0.9375rem;
letter-spacing: 0;
font-weight: 650;
color: var(--accent-ink);
margin-bottom: 18px;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--dim);
}
.note {
font-size: var(--fs-micro);
line-height: 1.6;
margin-top: 16px;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 8px;
border-radius: 999px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
font-size: 0.82rem;
font-weight: 550;
color: var(--ink-2);
margin-bottom: 26px;
text-decoration: none;
}
.kicker > span:first-child {
background: var(--accent);
color: var(--on-accent);
border-radius: 999px;
padding: 2px 9px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
a.kicker:hover {
text-decoration: none;
border-color: var(--accent-line);
}
.section-head {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
align-items: end;
gap: 24px 64px;
margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head > p,
.section-head > div > p:not(.eyebrow) {
font-size: 1.0625rem;
max-width: 460px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 650;
letter-spacing: 0.01em;
line-height: 1.5;
white-space: nowrap;
background: var(--accent-soft);
color: var(--accent-ink);
}
.badge.is-read {
background: var(--sunk);
color: var(--ink-2);
box-shadow: inset 0 0 0 1px var(--line);
}
.badge.is-change {
background: var(--amber-soft);
color: var(--amber);
}
.badge.is-danger {
background: var(--coral-soft);
color: var(--coral-strong);
}
.card {
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: clamp(22px, 3vw, 32px);
}
.card h3 {
margin-bottom: 10px;
}
.card p {
font-size: var(--fs-small);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 18px;
}
.card-grid.two {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.card .icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 1.15rem;
margin-bottom: 18px;
}
.phone {
width: 250px;
margin: 0;
}
.phone img {
width: 100%;
border: 6px solid var(--frame);
border-radius: clamp(22px, 2.6vw, 34px);
background: var(--sunk);
box-shadow: 0 0 0 1px var(--frame-ring), var(--shadow-lg);
}
.screen-caption,
.phone figcaption {
font-size: var(--fs-micro);
color: var(--dim);
text-align: center;
margin-top: 16px;
line-height: 1.45;
}
.shot {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-lg);
}
.shot img {
width: 100%;
}
.shot.is-chat {
background: var(--chat-stage);
border-color: oklch(1 0 0 / 0.08);
padding: 8px clamp(8px, 2vw, 18px) 14px;
}
.shot.is-chat .shot-bar {
color: var(--chat-dim);
border-bottom-color: oklch(1 0 0 / 0.1);
margin: 0 calc(clamp(8px, 2vw, 18px) * -1) 10px;
}
.shot-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--dim);
border-bottom: 1px solid var(--line-soft);
}
.shot-bar::before {
content: "";
width: 42px;
height: 10px;
flex: 0 0 auto;
background:
radial-gradient(circle at 5px 5px, oklch(0.65 0.18 28) 4.5px, transparent 5px),
radial-gradient(circle at 21px 5px, oklch(0.8 0.15 85) 4.5px, transparent 5px),
radial-gradient(circle at 37px 5px, oklch(0.72 0.17 145) 4.5px, transparent 5px);
}
.shot-caption {
font-size: var(--fs-micro);
color: var(--dim);
margin-top: 14px;
line-height: 1.5;
}
figure.shot-wrap {
margin: 0;
}
.stage {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px);
border-radius: var(--radius-lg);
background:
radial-gradient(60% 55% at 30% 25%, var(--glow), transparent 70%),
radial-gradient(55% 50% at 80% 85%, var(--glow-2), transparent 70%),
var(--sunk);
border: 1px solid var(--line-soft);
overflow: hidden;
}
.stage.is-plain {
background: transparent;
border: 0;
padding: 0;
overflow: visible;
}
.duo {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(12px, 3vw, 28px);
}
.duo .phone {
width: min(44%, 240px);
}
.duo .phone:nth-child(2) {
margin-top: 48px;
}
.glance {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.glance > div {
background: var(--card);
padding: 22px 24px;
}
.glance dt {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 650;
color: var(--dim);
margin-bottom: 6px;
}
.glance dd {
font-size: 1rem;
font-weight: 550;
color: var(--ink);
line-height: 1.4;
}
.page-nav {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
padding: 4px 2px 8px;
margin-top: 28px;
-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.page-nav::-webkit-scrollbar {
display: none;
}
.page-nav strong {
flex: 0 0 auto;
align-self: center;
font-size: var(--fs-micro);
color: var(--dim);
font-weight: 600;
margin-right: 6px;
}
.page-nav a {
flex: 0 0 auto;
font-size: 0.875rem;
color: var(--ink-2);
text-decoration: none;
padding: 8px 15px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--card);
min-height: 40px;
display: inline-flex;
align-items: center;
}
.page-nav a:hover {
border-color: var(--accent-line);
color: var(--ink);
}
.ticks {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: grid;
gap: 12px;
}
.ticks li {
position: relative;
padding-inline-start: 32px;
color: var(--dim);
font-size: 1rem;
}
.ticks li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.18em;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-soft);
}
.ticks li::after {
content: "";
position: absolute;
inset-inline-start: 7px;
top: calc(0.18em + 5px);
width: 5px;
height: 9px;
border: solid var(--accent-ink);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ticks strong {
color: var(--ink);
}
.ticks.is-cross li::before {
background: var(--coral-soft);
}
.ticks.is-cross li::after {
border: 0;
width: 10px;
height: 2px;
inset-inline-start: 5px;
top: calc(0.18em + 9px);
transform: none;
background: var(--coral-strong);
}
.numbered {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step;
display: grid;
gap: 0;
}
.numbered > li {
counter-increment: step;
position: relative;
padding: 0 0 22px 52px;
color: var(--dim);
}
.numbered > li::before {
content: counter(step);
position: absolute;
left: 0;
top: -2px;
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--accent);
color: var(--on-accent);
font-size: 0.85rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.numbered > li::after {
content: "";
position: absolute;
left: 15.5px;
top: 34px;
bottom: 2px;
width: 1px;
background: var(--accent-line);
}
.numbered > li:last-child {
padding-bottom: 0;
}
.numbered > li:last-child::after {
display: none;
}
.numbered strong {
color: var(--ink);
}
.numbered h4 {
margin-bottom: 4px;
}
.step-cards {
list-style: none;
padding: 0;
margin: 0;
counter-reset: stepcard;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: 16px;
}
.step-cards > li {
counter-increment: stepcard;
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.step-cards > li::before {
content: counter(stepcard, decimal-leading-zero);
display: block;
font-family: var(--mono);
font-size: 0.8rem;
color: var(--accent-ink);
margin-bottom: 16px;
}
.step-cards h3,
.step-cards h4 {
margin-bottom: 8px;
}
.step-cards p {
font-size: var(--fs-small);
}
.ui {
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0.12em 0.5em;
border-radius: 7px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: 0 1px 0 var(--line);
color: var(--ink);
font-weight: 600;
font-size: 0.92em;
line-height: 1.45;
white-space: nowrap;
}
.try {
border-radius: var(--radius);
background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--card);
border: 1px solid var(--accent-line);
padding: clamp(22px, 3vw, 30px);
margin-top: 28px;
}
.try-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--accent-ink);
margin-bottom: 18px;
}
.try-title::before {
content: "▸";
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-size: 0.7rem;
padding-left: 2px;
}
.try .numbered > li {
padding-bottom: 16px;
}
.try .numbered > li::before {
width: 26px;
height: 26px;
font-size: 0.75rem;
background: var(--card);
color: var(--accent-ink);
box-shadow: inset 0 0 0 1.5px var(--accent);
}
.try .numbered > li::after {
left: 12.5px;
top: 28px;
}
.try .numbered > li {
padding-left: 42px;
}
.try-result {
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed var(--accent-line);
font-size: var(--fs-small);
}
.try-result strong {
color: var(--ink);
}
.prompt-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 16px;
}
.prompt-grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.prompt {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-sm);
transition: transform 0.25s var(--easing), box-shadow 0.25s var(--easing);
}
.prompt-say {
align-self: flex-end;
max-width: 100%;
background: var(--accent);
color: var(--on-accent);
border-radius: 18px 18px 5px 18px;
padding: 11px 15px;
font-weight: 550;
font-size: 0.97rem;
line-height: 1.45;
}
.prompt-say[dir="rtl"] {
align-self: flex-start;
border-radius: 18px 18px 18px 5px;
font-family: var(--fa);
font-weight: 600;
}
.prompt-does {
font-size: var(--fs-small);
color: var(--dim);
padding-left: 22px;
position: relative;
}
.prompt-does::before {
content: "↳";
position: absolute;
left: 0;
color: var(--accent-ink);
font-weight: 700;
}
.prompt-tools {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.prompt-tools code {
font-size: 0.74rem;
}
.prompt-group + .prompt-group {
margin-top: 48px;
}
.prompt-group > h3 {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.prompt-group > h3 .badge {
font-size: 0.72rem;
}
.callout {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
padding: 18px 20px;
border-radius: 16px;
background: var(--accent-soft);
border: 1px solid var(--accent-line);
margin-top: 24px;
font-size: var(--fs-small);
}
.callout::before {
content: "i";
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-weight: 700;
font-size: 0.8rem;
font-family: Georgia, serif;
font-style: italic;
}
.callout p {
color: var(--ink-2);
}
.callout p + p {
margin-top: var(--space-3);
}
.callout strong {
color: var(--ink);
}
.callout.is-warn {
background: var(--amber-soft);
border-color: color-mix(in oklch, var(--amber) 35%, transparent);
}
.callout.is-warn::before {
content: "!";
background: var(--amber);
font-family: var(--sans);
font-style: normal;
}
.codebox {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
padding: 18px 22px;
border-radius: 18px;
background: var(--night-paper);
color: var(--night-ink);
border: 1px solid var(--night-line);
box-shadow: var(--shadow);
}
.codebox span {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 650;
color: var(--night-dim);
}
.codebox code {
background: none;
border: 0;
padding: 0;
color: var(--lime);
font-size: clamp(0.95rem, 2.2vw, 1.25rem);
-webkit-user-select: all;
user-select: all;
cursor: text;
}
.codebox small {
flex-basis: 100%;
color: var(--night-dim);
font-size: 0.78rem;
}
.table-wrap {
border-radius: var(--radius);
border: 1px solid var(--line-soft);
background: var(--card);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-small);
}
.data-table caption {
text-align: start;
padding: 18px 22px 0;
font-size: var(--fs-micro);
color: var(--dim);
caption-side: bottom;
padding-bottom: 18px;
}
.data-table th,
.data-table td {
text-align: start;
vertical-align: top;
padding: 14px 18px;
border-bottom: 1px solid var(--line-soft);
}
.data-table thead th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dim);
font-weight: 650;
background: var(--sunk);
}
.data-table tbody th {
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.data-table td {
color: var(--dim);
}
.data-table tbody tr:last-child > * {
border-bottom: 0;
}
.data-table .group-row th {
background: var(--sunk);
color: var(--ink);
font-size: 0.8rem;
letter-spacing: 0.02em;
white-space: normal;
}
.data-table code {
white-space: nowrap;
}
.faq-list {
border-top: 1px solid var(--line);
}
.faq-list details,
.faq details {
border-bottom: 1px solid var(--line);
}
.faq-list summary,
.faq summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 20px 0;
min-height: 44px;
font-weight: 600;
font-size: 1.0625rem;
color: var(--ink);
}
.faq-list summary::-webkit-details-marker,
.faq summary::-webkit-details-marker {
display: none;
}
.faq-list summary::after,
.faq summary::after {
content: "";
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background:
linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat,
linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat,
var(--sunk);
transition: transform 0.25s var(--easing);
}
.faq-list details[open] summary::after,
.faq details[open] summary::after {
transform: rotate(45deg);
}
.faq-list details > :not(summary),
.faq details > p {
padding-bottom: 22px;
max-width: 760px;
font-size: 1rem;
}
summary {
cursor: pointer;
color: var(--ink);
font-weight: 600;
}
details p {
margin-top: 0;
}
.tile {
position: relative;
display: flex;
flex-direction: column;
min-height: 260px;
padding: clamp(22px, 2.6vw, 32px);
border-radius: var(--radius-lg);
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow);
overflow: hidden;
isolation: isolate;
color: var(--ink);
text-decoration: none;
transition: transform 0.35s var(--easing), box-shadow 0.35s var(--easing);
}
a.tile:hover {
text-decoration: none;
}
.tile-kicker {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 650;
color: var(--accent-ink);
margin-bottom: 10px;
}
.tile h3 {
font-size: clamp(1.4rem, 2.1vw, 1.85rem);
letter-spacing: -0.035em;
line-height: 1.08;
max-width: 18ch;
}
.tile p:not(.tile-kicker) {
margin-top: 12px;
font-size: var(--fs-small);
max-width: 40ch;
}
.tile-more {
margin-top: auto;
padding-top: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 650;
color: var(--accent-ink);
}
.tile-more::after {
content: "→";
transition: transform 0.25s var(--easing);
}
a.tile:hover .tile-more::after {
transform: translateX(4px);
}
.tile-copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex: 1;
}
.tile.has-peek .tile-copy {
max-width: 58%;
}
.peek {
position: absolute;
right: clamp(12px, 3vw, 36px);
bottom: -150px;
width: 200px;
z-index: 0;
transform: none;
transition: transform 0.45s var(--easing);
}
a.tile:hover .peek {
transform: translateY(-8px);
}
.tile.is-tall .peek {
position: relative;
right: auto;
bottom: auto;
margin: auto auto -120px;
transform: none;
width: min(86%, 236px);
}
a.tile.is-tall:hover .peek {
transform: translateY(-8px);
}
.tile.is-tall .tile-copy {
flex: 0 0 auto;
margin-bottom: 28px;
}
.tile.is-tall .tile-more {
margin-top: 16px;
padding-top: 0;
}
.tile.is-glow {
background:
radial-gradient(80% 70% at 100% 0%, var(--glow), transparent 70%),
var(--card);
}
.tile.is-night {
background:
radial-gradient(70% 60% at 85% 0%, oklch(0.5 0.1 150 / 0.45), transparent 70%),
var(--night-paper);
border-color: var(--night-line);
color: var(--night-ink);
}
.tile.is-night h3 {
color: var(--night-ink);
}
.tile.is-night p:not(.tile-kicker) {
color: var(--night-dim);
}
.tile.is-night .tile-kicker,
.tile.is-night .tile-more {
color: var(--lime);
}
.tile-shot {
margin: 22px calc(clamp(22px, 2.6vw, 32px) * -1) calc(clamp(22px, 2.6vw, 32px) * -1) auto;
width: calc(100% + clamp(22px, 2.6vw, 32px));
border-radius: 14px 0 0 0;
overflow: hidden;
border: 1px solid var(--line-soft);
border-right: 0;
border-bottom: 0;
box-shadow: var(--shadow);
max-height: 280px;
}
.tile-shot img {
width: 100%;
object-fit: cover;
object-position: top left;
}
.tile.is-night .tile-shot {
border-color: oklch(1 0 0 / 0.12);
background: var(--chat-stage);
}
.tile-art {
margin-top: auto;
padding-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-size: clamp(1.3rem, 2vw, 1.75rem);
font-weight: 650;
letter-spacing: -0.03em;
color: var(--accent-ink);
line-height: 1.3;
}
.bento {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 320px;
grid-auto-flow: dense;
gap: 18px;
}
.tile.has-shot .tile-copy {
max-width: 44%;
}
.tile.has-shot .tile-shot {
position: absolute;
right: 0;
bottom: 0;
width: 54%;
margin: 0;
max-height: 86%;
}
.bento .span-2 {
grid-column: span 2;
}
.bento .rows-2 {
grid-row: span 2;
}
.bento .span-4 {
grid-column: 1 / -1;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.related-grid .tile {
min-height: 210px;
}
.cta-band {
position: relative;
isolation: isolate;
text-align: center;
padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
border-radius: var(--radius-lg);
overflow: hidden;
background:
radial-gradient(60% 80% at 50% 0%, var(--glow), transparent 70%),
var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow);
}
.cta-band h2 {
font-size: clamp(2.2rem, 5vw, 4.2rem);
letter-spacing: var(--track-display);
}
.cta-band p:not(.eyebrow) {
max-width: 560px;
margin: 18px auto 0;
}
.cta-band .button-row {
justify-content: center;
}
.hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
align-items: center;
gap: 40px;
padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px);
min-height: min(820px, calc(100vh - var(--header-h)));
}
.hero h1 {
font-size: var(--fs-display);
}
.hero h1 span {
color: var(--accent-ink);
}
.hero .lead {
max-width: 470px;
margin-top: 28px;
}
.facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--line-soft);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
}
.facts > div {
background: var(--card);
padding: 24px 28px;
font-size: 0.92rem;
color: var(--dim);
}
.facts b {
display: block;
font-size: clamp(1.25rem, 2.2vw, 1.7rem);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.035em;
margin-bottom: 2px;
}
.source {
padding: 22px;
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
}
.source .number {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--accent-ink);
margin-bottom: 12px;
}
.source h3 {
font-size: 1.1rem;
}
.source p {
font-size: 0.9rem;
margin-top: 8px;
}
.source h3 a {
color: var(--ink);
text-decoration: none;
}
.night {
background:
radial-gradient(50% 60% at 90% 10%, oklch(0.45 0.09 150 / 0.55), transparent 70%),
var(--hero-green);
color: var(--hero-text);
padding-block: clamp(72px, 10vw, 128px);
}
.night h2,
.night h3 {
color: var(--hero-text);
}
.night p {
color: var(--hero-muted);
}
.night .eyebrow {
color: var(--lime);
}
.night :focus-visible {
outline-color: var(--lime);
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: center;
}
.split h2 {
margin-bottom: 24px;
}
.split .phone {
margin: auto;
}
.steps {
padding: 0;
list-style: none;
margin: 28px 0;
}
.steps li {
display: grid;
grid-template-columns: 30px 1fr;
gap: 14px;
border-top: 1px solid oklch(1 0 0 / 0.14);
padding-block: 17px;
font-weight: 600;
}
.steps b {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 400;
color: var(--lime);
}
.steps small {
display: block;
color: var(--hero-muted);
font-size: 0.9rem;
font-weight: 400;
margin-top: 5px;
}
.method {
margin-top: 72px;
padding-top: 40px;
border-top: 1px solid oklch(1 0 0 / 0.14);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 50px;
align-items: end;
}
.method h3 {
margin-bottom: 12px;
}
.ladder {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: end;
gap: 10px;
}
.ladder li {
flex: 1;
background: linear-gradient(180deg, var(--lime), oklch(0.85 0.1 125));
color: var(--hero-green);
padding: 16px 12px;
border-radius: 14px 14px 4px 4px;
}
.ladder li:nth-child(2) {
padding-top: 36px;
}
.ladder li:nth-child(3) {
padding-top: 58px;
}
.ladder li:nth-child(4) {
padding-top: 80px;
}
.ladder li:nth-child(5) {
padding-top: 106px;
}
.ladder b {
font-size: 1.2rem;
display: block;
letter-spacing: -0.02em;
}
.ladder small {
font-size: 0.75rem;
}
.feature {
padding: 28px;
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
}
.feature h3 {
margin-bottom: 12px;
}
.feature p {
font-size: var(--fs-small);
}
.languages {
background:
radial-gradient(60% 80% at 100% 50%, var(--glow), transparent 70%),
var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 52px);
margin-top: 56px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 50px;
}
.languages h3 {
font-size: clamp(1.5rem, 2.6vw, 2rem);
letter-spacing: -0.035em;
margin-bottom: 18px;
}
.appearance {
margin-top: 72px;
padding-top: 72px;
border-top: 1px solid var(--line);
}
.plans {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.plan {
padding: 32px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
background: var(--card);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.plan.featured {
position: relative;
padding-top: 0;
overflow: hidden;
border: 2px solid var(--accent);
box-shadow: 0 20px 50px -20px var(--glow), var(--shadow);
}
.plan-name {
font-size: 1rem;
color: var(--ink);
font-weight: 650;
}
.price {
font-size: 3.8rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.055em;
color: var(--ink);
margin-top: 18px;
}
.price small {
font-size: 0.875rem;
letter-spacing: 0;
font-weight: 500;
}
.per {
font-size: 0.9rem;
min-height: 48px;
margin-top: 5px;
}
.plan-list {
padding-left: 20px;
font-size: 0.94rem;
color: var(--dim);
margin-block: 24px 30px;
}
.plan-list li {
margin-bottom: 10px;
}
.plan-list li::marker {
color: var(--accent);
}
.plan-cta {
margin-top: auto;
}
.yearly-banner {
margin: 0 -32px 26px;
padding: 18px 32px 20px;
color: var(--hero-text);
background:
radial-gradient(80% 120% at 100% 0%, oklch(0.5 0.1 150 / 0.6), transparent 70%),
var(--hero-green);
}
.yearly-banner > span {
display: block;
font-size: 0.65rem;
font-weight: 650;
letter-spacing: 0.15em;
color: var(--hero-muted);
}
.yearly-banner strong {
display: block;
margin-top: 5px;
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--lime);
}
.yearly-comparison {
border-block: 1px solid var(--line);
padding: 15px 0;
font-size: 0.875rem;
}
.yearly-comparison s {
margin-right: 8px;
}
.yearly-comparison strong {
color: var(--accent-ink);
}
.yearly-comparison > span {
display: block;
margin-top: 5px;
font-size: 0.78rem;
}
.plan-offer {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
grid-column: 1 / -1;
gap: 20px;
}
.plan-offer p {
margin: 0;
padding: 20px 24px;
border-radius: var(--radius);
font-size: 0.94rem;
line-height: 1.55;
}
.plan-early {
border: 1px solid var(--accent-line);
background: var(--accent-soft);
color: var(--ink-2);
}
.plan-early strong {
color: var(--ink);
}
.plan-tag {
display: inline-block;
margin-inline-end: 10px;
padding: 2px 10px;
border-radius: 999px;
background: var(--accent);
color: var(--on-accent);
font-size: 0.8rem;
font-weight: 650;
vertical-align: 1px;
}
.plan-promise {
display: flex;
gap: 12px;
align-items: center;
border: 1px solid var(--line);
color: var(--ink-2);
}
.plan-promise .g {
flex: none;
margin-top: 2px;
color: var(--accent-ink);
}
.plan-promise strong {
color: var(--ink);
}
.plan-promise a {
white-space: nowrap;
}
@media (max-width: 860px) {
.plans .plan-offer {
order: 1;
}
.plan-offer {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.plan-offer p {
padding: 18px 20px;
}
}
.platforms {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.platform {
padding: 26px;
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.platform .eyebrow {
font-size: 0.7rem;
margin-bottom: 14px;
}
.platform p {
font-size: var(--fs-small);
margin-top: 10px;
margin-bottom: 18px;
}
.platform > a {
margin-top: auto;
font-size: 0.9rem;
font-weight: 600;
min-height: 40px;
display: flex;
align-items: center;
}
.platform > a + a {
margin-top: 0;
}
.faq {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.faq h2 {
margin-bottom: 18px;
}
.faq-lede {
color: var(--ink-2);
font-size: 1.0625rem;
max-width: 34ch;
}
.faq-more {
margin-top: 22px;
color: var(--dim);
font-size: 0.9375rem;
}
.faq-more a {
color: var(--accent-ink);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--accent-line);
text-underline-offset: 3px;
}
.faq-more a:hover {
text-decoration-color: currentColor;
}
.faq-groups {
display: grid;
gap: 36px;
}
.faq-group-title {
margin: 0 0 6px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dim);
}
.faq-group details:first-of-type {
border-top: 1px solid var(--line);
}
.faq-group summary {
padding-block: 18px;
border-radius: var(--radius-sm);
transition: color 0.2s var(--easing);
}
.faq-group summary:hover {
color: var(--accent-ink);
}
.faq-group summary:hover::after,
.faq-group details[open] summary::after {
background:
linear-gradient(var(--on-accent), var(--on-accent)) center / 11px 1.5px no-repeat,
linear-gradient(var(--on-accent), var(--on-accent)) center / 1.5px 11px no-repeat,
var(--accent);
}
.faq-group summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.faq-group details > p {
padding-bottom: 22px;
color: var(--ink-2);
line-height: 1.6;
max-width: 62ch;
}
@media (min-width: 861px) {
.faq {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(48px, 6vw, 96px);
align-items: start;
}
.faq-intro {
position: sticky;
top: 110px;
}
}
@media (prefers-reduced-motion: no-preference) {
.faq-group details[open] > p {
animation: faq-open 0.25s var(--easing);
}
}
@keyframes faq-open {
from {
opacity: 0;
transform: translateY(-4px);
}
}
.night .text-link {
color: var(--lime);
}
.fhero {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
gap: 40px 64px;
align-items: center;
padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 64px);
}
.fhero::before {
content: "";
position: absolute;
z-index: -1;
inset: -10% -20% 10% 40%;
background:
radial-gradient(45% 45% at 50% 40%, var(--glow), transparent 70%),
radial-gradient(35% 35% at 70% 75%, var(--glow-2), transparent 70%);
filter: blur(20px);
pointer-events: none;
}
.fhero.is-text {
grid-template-columns: minmax(0, 1fr);
max-width: 900px;
}
.fhero h1 {
font-size: var(--fs-h1);
}
.fhero .lead {
margin-top: 26px;
max-width: 600px;
}
.fhero-media {
display: flex;
justify-content: center;
}
.fhero-media .phone {
width: min(280px, 70vw);
}
.fhero-media .duo .phone {
width: min(46%, 240px);
}
.fhero-media > .shot,
.fhero-media > .shot-wrap {
width: 100%;
}
.breadcrumb {
font-size: var(--fs-micro);
margin-bottom: 22px;
color: var(--dim);
}
.breadcrumb a {
color: var(--dim);
}
.updated {
font-size: var(--fs-micro);
margin-top: 22px;
}
.page-hero .updated + p {
margin-top: var(--space-4);
}
.fbody {
padding-bottom: var(--space-8);
}
.fsec {
padding-block: clamp(44px, 5.5vw, 72px);
border-top: 1px solid var(--line-soft);
}
.fsec:first-child {
border-top: 0;
padding-top: clamp(32px, 4vw, 48px);
}
.fsec-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 48px clamp(40px, 6vw, 88px);
align-items: center;
}
.fsec.is-flip .fsec-grid > .fsec-media {
order: -1;
}
.fsec-copy {
min-width: 0;
}
.fsec-copy > h2,
.fsec-head > h2 {
font-size: clamp(1.9rem, 3.6vw, 3rem);
margin-bottom: 20px;
}
.fsec-copy > p,
.fsec-text > p {
font-size: 1.0625rem;
margin-top: 14px;
max-width: var(--reading);
}
.fsec-copy > h2 + p,
.fsec-text > h2 + p {
margin-top: 0;
}
.fsec-copy > p + :is(.ticks, .numbered),
.fsec-text > p + :is(.ticks, .numbered) {
margin-top: var(--space-5);
}
.fsec-copy > :is(.ticks, .numbered) + p,
.fsec-text > :is(.ticks, .numbered) + p {
margin-top: var(--space-5);
}
.fsec-copy strong,
.fsec-text strong {
color: var(--ink);
}
.fsec-media {
min-width: 0;
display: flex;
justify-content: center;
}
.fsec-media .phone {
width: min(280px, 72vw);
}
.fsec-media .duo .phone {
width: min(46%, 240px);
}
.fsec-media > .shot,
.fsec-media > figure.shot-wrap,
.fsec-media > .stage {
width: 100%;
}
.fsec-text > h2 {
font-size: clamp(1.9rem, 3.6vw, 3rem);
margin-bottom: 20px;
max-width: 900px;
}
.fsec-head {
max-width: 820px;
margin-bottom: 36px;
}
.fsec-head > p {
font-size: 1.0625rem;
}
.fsec-wide {
margin-top: 28px;
}
.fsec-grid {
align-items: start;
}
.fsec-grid > .fsec-copy {
align-self: center;
}
.mini-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 14px;
margin-top: 28px;
}
.mini-grid.is-five {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mini-grid.three,
.card-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mini {
padding: 20px 22px;
border-radius: 18px;
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
}
.mini h3,
.mini h4 {
font-size: 1.02rem;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.mini p {
font-size: 0.92rem;
}
.mini .badge {
margin-bottom: 12px;
}
.lang-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 24px 0 0;
}
.lang-cloud li {
padding: 6px 12px;
border-radius: 999px;
background: var(--card);
border: 1px solid var(--line-soft);
font-size: 0.88rem;
color: var(--ink-2);
}
.lang-groups {
columns: 3 20rem;
column-gap: 20px;
margin-top: 8px;
}
.lang-groups > .lang-group {
break-inside: avoid;
margin-bottom: 20px;
}
.lang-group .data-table caption {
caption-side: top;
padding: 16px 18px 10px;
font-size: var(--fs-small);
font-weight: 650;
color: var(--ink);
}
.lang-group .data-table th,
.lang-group .data-table td {
padding: 9px 18px;
}
.lang-group .data-table td code {
font-size: 0.82rem;
}
.script-sample {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
gap: 12px;
margin-top: 28px;
}
.script-sample > div {
padding: 18px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--line-soft);
}
.script-sample span {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: var(--ink);
line-height: 1.4;
}
.script-sample small {
font-size: 0.78rem;
color: var(--dim);
}
.flow {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
list-style: none;
padding: 0;
margin: 28px 0 0;
}
.flow + :is(p, ul, ol) {
margin-top: var(--space-5);
}
.flow li {
padding: 18px 14px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--line-soft);
text-align: center;
box-shadow: var(--shadow-sm);
}
.flow li:last-child {
background: var(--accent);
border-color: var(--accent);
}
.flow li:last-child b,
.flow li:last-child small {
color: var(--on-accent);
}
.flow b {
display: block;
font-size: 1.25rem;
letter-spacing: -0.03em;
color: var(--ink);
}
.flow small {
font-size: 0.78rem;
color: var(--dim);
}
.stack {
display: grid;
gap: 18px;
width: 100%;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.meta > div {
display: flex;
gap: 6px;
align-items: baseline;
padding: 6px 12px;
border-radius: 12px;
background: var(--sunk);
border: 1px solid var(--line-soft);
font-size: 0.85rem;
line-height: 1.4;
}
.meta dt {
font-weight: 650;
color: var(--ink);
}
.meta dt::after {
content: ":";
}
.meta dd {
color: var(--dim);
}
.chat-hero {
position: relative;
width: 100%;
max-width: 580px;
padding-bottom: 96px;
}
.chat-hero > figure:nth-child(2) {
position: absolute;
right: -4%;
bottom: 0;
width: 78%;
}
.gallery {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-areas:
"due approve"
"due save"
"quiz apps";
gap: 28px 24px;
align-items: start;
}
.g-due {
grid-area: due;
}
.g-approve {
grid-area: approve;
}
.g-save {
grid-area: save;
}
.g-quiz {
grid-area: quiz;
}
.g-apps {
grid-area: apps;
align-self: center;
}
.guides {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
.guide h3 {
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
letter-spacing: -0.03em;
margin-bottom: 22px;
}
.guide .eyebrow {
margin-bottom: 8px;
}
.guide > p:not(.eyebrow) {
margin-top: 18px;
}
.guide .numbered code {
font-size: 0.82em;
}
.mini .badge + h3 {
margin-top: 0;
}
.page-hero {
position: relative;
padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5vw, 56px);
}
.page-hero h1 {
max-width: 900px;
}
.page-hero .lead {
max-width: 690px;
margin-top: 24px;
}
.legal-layout {
display: grid;
grid-template-columns: 220px minmax(0, 740px);
gap: 72px;
padding-bottom: 96px;
}
.contents {
align-self: start;
position: sticky;
top: calc(var(--header-h) + 24px);
font-size: 0.875rem;
}
.contents strong {
display: block;
margin-bottom: 14px;
}
.contents a {
display: block;
padding: 6px 0 6px 14px;
color: var(--dim);
text-decoration: none;
border-left: 1px solid var(--line);
}
.contents a:hover {
color: var(--ink);
border-left-color: var(--accent);
}
.prose {
min-width: 0;
}
.prose h2 {
font-size: 1.75rem;
margin-top: 48px;
margin-bottom: 16px;
letter-spacing: -0.03em;
}
.prose h2:first-child {
margin-top: 0;
}
.prose h3 {
margin: 28px 0 10px;
}
.prose p {
margin: 0 0 18px;
}
.prose ul,
.prose ol {
padding-left: 22px;
color: var(--dim);
}
.prose li {
margin-bottom: 12px;
}
.prose li::marker {
color: var(--accent);
}
.prose strong {
color: var(--ink);
}
.prose a {
overflow-wrap: anywhere;
}
.pricing-content {
padding-bottom: 96px;
}
.pricing-content > .plans {
margin-bottom: 64px;
}
.billing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
}
.billing h2 {
font-size: 2rem;
}
.limits {
margin-bottom: 64px;
}
.limits h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.limits .data-table tbody th {
white-space: normal;
min-width: 14em;
}
.limits .data-table th small {
display: block;
margin-top: 4px;
font-weight: 400;
font-size: var(--fs-micro);
color: var(--dim);
}
.limits .note {
margin-top: 16px;
max-width: 72ch;
font-size: var(--fs-small);
color: var(--dim);
}
.download-layout {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 72px;
padding-bottom: 88px;
align-items: start;
}
.checksum {
font-family: var(--mono);
font-size: 0.75rem;
overflow-wrap: anywhere;
margin-top: 24px;
}
.download-layout .phone {
margin: auto;
}
.error-page {
max-width: 850px;
text-align: center;
padding-block: 100px 140px;
}
.error-page .error-number {
font-family: var(--mono);
color: var(--accent-ink);
font-size: 1rem;
margin-bottom: 28px;
}
.error-page p {
margin-top: 25px;
}
.error-page .button-row {
justify-content: center;
}
.timeline {
list-style: none;
padding: 0;
margin: 0 0 96px;
max-width: 980px;
}
.timeline > li {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 40px;
padding-block: 36px;
border-top: 1px solid var(--line);
}
.timeline time {
display: block;
position: sticky;
top: calc(var(--header-h) + 24px);
font-size: 0.92rem;
font-weight: 650;
color: var(--accent-ink);
}
.timeline h2 {
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.timeline ul {
list-style: disc;
padding-left: 20px;
margin: 0;
color: var(--dim);
}
.timeline li li {
margin-bottom: 9px;
}
.timeline li li::marker {
color: var(--accent);
}
.intro-film-player {
margin: 0;
overflow: hidden;
border: 1px solid var(--night-line);
border-radius: var(--radius-lg);
background: var(--night-paper);
color: var(--night-ink);
box-shadow: var(--shadow-lg);
}
.film-footer {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 18px 28px;
}
.film-screen {
position: relative;
}
.film-screen video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: contain;
background: var(--night-paper);
}
.film-start {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
gap: 14px;
padding: 32px;
border: 0;
color: var(--night-ink);
text-align: left;
cursor: pointer;
background: linear-gradient(transparent 60%, var(--night-paper));
font: inherit;
}
.film-start[hidden] {
display: none;
}
.film-play-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
flex-shrink: 0;
padding-left: 3px;
border-radius: 50%;
background: var(--night-ink);
color: var(--night-paper);
font-size: 22px;
box-shadow: 0 0 0 8px color-mix(in srgb, var(--night-ink) 12%, transparent);
}
.film-start strong,
.film-start small {
display: block;
}
.film-start strong {
font-size: 1.05rem;
}
.film-start small {
margin-top: 4px;
color: var(--night-dim);
font-size: 0.8rem;
}
.film-start:hover .film-play-icon {
background: var(--night-dim);
}
.film-start:focus-visible {
outline: 3px solid var(--night-ink);
outline-offset: -6px;
border-radius: 8px;
}
.film-footer {
border-top: 1px solid var(--night-line);
color: var(--night-dim);
font-size: 0.78rem;
}
.film-status {
padding: 0 28px 20px;
}
.film-transcript {
margin-top: 20px;
color: var(--dim);
max-width: 760px;
}
.film-transcript p {
margin-top: 16px;
}
[data-film][data-format="wide"] video {
aspect-ratio: 16 / 9;
}
[data-film][data-format="portrait"] video {
aspect-ratio: 9 / 16;
}
@media (prefers-reduced-motion: no-preference) {
.hero > div:first-child,
.fhero > div:first-child {
animation: arrive 0.8s var(--easing) both;
}
.button:hover,
.pill:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
a.tile:hover,
.prompt:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.film-play-icon {
transition: background 160ms ease, transform 160ms ease;
}
.film-start:hover .film-play-icon {
transform: scale(1.05);
}
@keyframes arrive {
from {
transform: translateY(16px);
}
to {
transform: none;
}
}
@supports (animation-timeline: view()) {
.reveal:not(.tile):not(:has(img)) {
animation: rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 70%;
}
@keyframes rise {
from {
opacity: 0.55;
translate: 0 36px;
scale: 0.98;
}
to {
opacity: 1;
translate: 0 0;
scale: 1;
}
}
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}
@media (max-width: 1080px) {
.split {
gap: 40px;
}
.plan {
padding: 26px;
}
.yearly-banner {
margin-inline: -26px;
padding-inline: 26px;
}
.platforms {
grid-template-columns: 1fr 1fr;
}
.legal-layout {
gap: 40px;
grid-template-columns: 190px minmax(0, 1fr);
}
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento .rows-2 {
grid-row: span 2;
}
.related-grid {
grid-template-columns: 1fr 1fr;
}
.mini-grid.is-five {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
:root {
--header-h: 60px;
}
.site-nav > a.hide-narrow {
display: none;
}
.hero,
.fhero {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.section-head {
grid-template-columns: minmax(0, 1fr);
}
.split,
.languages,
.method,
.plans,
.billing,
.download-layout,
.fsec-grid {
grid-template-columns: minmax(0, 1fr);
}
.fsec.is-flip .fsec-grid > .fsec-media {
order: 0;
}
.legal-layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.contents {
position: static;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.timeline > li {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.timeline time {
position: static;
}
.per {
min-height: 0;
}
.film-footer {
padding: 14px 18px;
}
.film-footer {
flex-direction: column;
gap: 4px;
}
.mini-grid.is-five,
.mini-grid.three,
.card-grid.three {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.gallery {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "due" "approve" "save" "quiz" "apps";
}
.guides {
grid-template-columns: minmax(0, 1fr);
}
.chat-hero {
margin-inline: auto;
}
.flow {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.flow li {
padding: 14px 6px;
}
.flow b {
font-size: 1rem;
}
.flow small {
font-size: 0.68rem;
}
}
@media (max-width: 640px) {
body {
font-size: 16px;
}
.site-nav {
gap: 2px;
}
.site-nav > a:not(.pill) {
padding: 8px 10px;
}
.site-nav .pill {
margin-left: 4px;
padding: 8px 14px;
}
.button-row .button {
flex: 1 1 auto;
}
.hero h1 {
font-size: clamp(2.9rem, 13.5vw, 4.2rem);
}
.facts {
grid-template-columns: minmax(0, 1fr);
}
.facts > div {
padding: 16px 20px;
}
.facts b {
font-size: 1.2rem;
}
.bento {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: auto;
}
.bento .span-2,
.bento .rows-2 {
grid-column: auto;
grid-row: auto;
}
.tile {
min-height: 0;
}
.tile.has-shot .tile-copy {
max-width: none;
}
.tile.has-shot .tile-shot {
position: relative;
width: calc(100% + clamp(22px, 2.6vw, 32px));
margin: 22px calc(clamp(22px, 2.6vw, 32px) * -1) calc(clamp(22px, 2.6vw, 32px) * -1) auto;
max-height: 280px;
}
.tile.has-peek {
min-height: 300px;
}
.tile.has-peek .tile-copy {
max-width: 60%;
}
.peek {
width: 150px;
right: 8px;
bottom: -120px;
}
.tile.is-tall .peek {
width: 190px;
margin-bottom: -150px;
}
.related-grid {
grid-template-columns: minmax(0, 1fr);
}
.platforms {
grid-template-columns: minmax(0, 1fr);
}
.ladder {
gap: 6px;
}
.ladder li {
padding: 12px 6px;
}
.ladder b {
font-size: 0.95rem;
}
.ladder small {
font-size: 0.68rem;
}
.glance {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.glance code {
font-size: 0.7em;
}
.chat-hero > figure:nth-child(2) {
right: 0;
width: 84%;
}
.prompt-grid,
.prompt-grid.cols-2 {
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 84%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1);
padding: 4px var(--gutter) 14px;
scrollbar-width: thin;
}
.prompt {
scroll-snap-align: start;
}
.glance > div {
padding: 16px 18px;
}
.duo .phone:nth-child(2) {
margin-top: 32px;
}
.plan {
padding: 26px;
}
.codebox {
padding: 16px 18px;
}
.data-table thead {
display: none;
}
.data-table,
.data-table tbody,
.data-table tr,
.data-table th,
.data-table td {
display: block;
}
.data-table tr {
padding: 14px 18px;
border-bottom: 1px solid var(--line-soft);
}
.data-table tbody tr:last-child {
border-bottom: 0;
}
.data-table {
display: flex;
flex-direction: column;
}
.data-table caption {
display: block;
order: 1;
}
.data-table th,
.data-table td {
padding: 3px 0;
border: 0;
}
.data-table tbody th {
font-size: 1rem;
white-space: normal;
}
.data-table td[data-label]::before {
content: attr(data-label) ": ";
font-weight: 600;
color: var(--ink-2);
}
.data-table .group-row th {
background: none;
padding: 0;
color: var(--accent-ink);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.72rem;
}
.data-table tr.group-row {
background: var(--sunk);
}
.lang-group .data-table {
display: table;
}
.lang-group .data-table thead {
display: table-header-group;
}
.lang-group .data-table tbody {
display: table-row-group;
}
.lang-group .data-table tr {
display: table-row;
padding: 0;
}
.lang-group .data-table th,
.lang-group .data-table td {
display: table-cell;
padding: 8px 12px;
border-bottom: 1px solid var(--line-soft);
}
.lang-group .data-table caption {
display: table-caption;
}
.lang-group .data-table td[data-label]::before {
content: none;
}
}
@media (max-width: 380px) {
.logo {
font-size: 1.15rem;
gap: 7px;
}
.logo img {
width: 24px;
height: 24px;
}
.site-nav > a:not(.pill) {
padding: 8px 7px;
font-size: 0.85rem;
}
.site-nav .pill {
padding: 8px 12px;
font-size: 0.85rem;
}
.glance {
grid-template-columns: minmax(0, 1fr);
}
.tile.has-peek .tile-copy {
max-width: 62%;
}
.peek {
width: 130px;
}
}
@media print {
.site-header,
.site-footer,
.button-row,
.contents,
.page-nav {
display: none;
}
.site-header {
position: static;
}
.legal-layout {
display: block;
}
.section,
.fsec {
padding: 24px 0;
}
.phone {
max-width: 150px;
}
body {
background: white;
color: black;
}
.prose p,
.prose li {
color: black;
}
}
@media (min-width: 861px) {
.fhero:has(.chat-hero) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.cine-hero {
position: relative;
isolation: isolate;
min-height: clamp(560px, calc(100svh - var(--header-h)), 940px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--hero-green);
color: var(--hero-text);
}
.cine-media,
.cine-media::after {
position: absolute;
inset: 0;
z-index: -1;
}
.cine-video,
.cine-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 50%;
display: block;
}
.cine-video:not(.is-playing) {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.cine-video {
transition: opacity 0.6s ease;
}
}
.cine-media::after {
content: "";
z-index: 0;
background:
linear-gradient(90deg, oklch(0.16 0.025 150 / 0.92) 0%, oklch(0.16 0.025 150 / 0.72) 38%, oklch(0.16 0.025 150 / 0.18) 72%, transparent 100%),
linear-gradient(0deg, oklch(0.14 0.02 150 / 0.85) 0%, transparent 42%);
}
.cine-inner {
width: 100%;
padding-block: clamp(56px, 11vh, 120px);
}
.cine-hero h1 {
font-size: var(--fs-display);
line-height: 0.96;
letter-spacing: -0.045em;
color: var(--hero-text);
text-shadow: 0 2px 30px oklch(0.1 0.02 150 / 0.5);
}
.cine-hero h1 span {
color: oklch(0.86 0.13 158);
}
.cine-lead {
max-width: 34ch;
margin-top: 26px;
color: var(--hero-muted);
}
.cine-kicker {
background: oklch(1 0 0 / 0.1);
border-color: oklch(1 0 0 / 0.18);
color: var(--hero-text);
box-shadow: none;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.cine-watch {
background: oklch(1 0 0 / 0.1);
color: var(--hero-text);
border-color: oklch(1 0 0 / 0.28);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.cine-watch:hover {
background: oklch(1 0 0 / 0.18);
}
@media (max-width: 760px) {
.cine-hero {
min-height: clamp(560px, calc(100svh - var(--header-h)), 820px);
}
.cine-video,
.cine-poster {
object-position: 58% 50%;
}
.cine-media::after {
background: linear-gradient(0deg, oklch(0.15 0.022 150 / 0.95) 0%, oklch(0.15 0.022 150 / 0.75) 48%, oklch(0.15 0.022 150 / 0.25) 100%);
}
}
@media (prefers-reduced-motion: no-preference) {
.cine-inner > * {
animation: arrive 0.9s var(--easing) both;
}
.cine-inner > *:nth-child(2) { animation-delay: 0.06s; }
.cine-inner > *:nth-child(3) { animation-delay: 0.12s; }
.cine-inner > *:nth-child(4) { animation-delay: 0.18s; }
}
.film-sound {
position: absolute;
left: 24px;
bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 10px;
border: 1px solid oklch(1 0 0 / 0.25);
border-radius: 999px;
color: var(--night-ink);
background: oklch(0.15 0.02 150 / 0.7);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
text-align: left;
cursor: pointer;
font: inherit;
}
.film-sound[hidden] {
display: none;
}
.film-sound .film-play-icon {
width: 40px;
height: 40px;
font-size: 18px;
box-shadow: none;
}
.film-sound strong,
.film-sound small {
display: block;
}
.film-sound small {
color: var(--night-dim);
font-size: 0.75rem;
}
.film-sound:focus-visible {
outline: 3px solid var(--night-ink);
outline-offset: 3px;
}
h1 .h1-kicker,
p.h1-kicker {
display: block;
margin-bottom: 18px;
font-size: 0.78rem;
line-height: 1.4;
letter-spacing: 0.14em;
}
.cine-hero h1 .h1-kicker {
color: var(--hero-muted);
margin-bottom: 22px;
}
.cine-facts {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
list-style: none;
padding: 0;
margin: 34px 0 0;
color: var(--hero-muted);
font-size: 0.92rem;
}
.cine-facts b {
color: var(--hero-text);
font-weight: 650;
}
h1, h2 {
text-wrap: balance;
}
@media (max-width: 640px) {
.flow {
grid-template-columns: 1fr;
gap: 6px;
}
.flow li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 16px;
}
}
.site-nav .pill {
white-space: nowrap;
}
@media (max-width: 440px) {
.site-nav {
gap: 0;
}
.site-nav > a:not(.pill) {
padding: 8px 9px;
}
.site-nav .pill {
margin-left: 4px;
padding: 8px 14px;
}
.site-nav .pill span {
display: none;
}
}
@media (max-width: 359px) {
.site-nav > a[href="/pricing"] {
display: none;
}
}
.is-fa {
font-family: var(--fa);
}
.is-fa h1,
.is-fa h2,
.is-fa h3 {
font-family: var(--fa);
letter-spacing: 0;
line-height: 1.25;
}
.is-fa .cine-hero h1 {
line-height: 1.2;
letter-spacing: 0;
}
.is-fa .eyebrow,
.is-fa h1 .h1-kicker {
letter-spacing: 0;
text-transform: none;
font-size: 0.95rem;
}
.is-fa .cine-media::after {
background:
linear-gradient(270deg, oklch(0.16 0.025 150 / 0.92) 0%, oklch(0.16 0.025 150 / 0.72) 38%, oklch(0.16 0.025 150 / 0.18) 72%, transparent 100%),
linear-gradient(0deg, oklch(0.14 0.02 150 / 0.85) 0%, transparent 42%);
}
.is-fa .cine-video,
.is-fa .cine-poster {
transform: scaleX(-1);
}
.fa-split {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(32px, 6vw, 88px);
align-items: center;
}
.fa-split.is-flip > :first-child {
order: 2;
}
.fa-split .lead,
.fa-narrow {
max-width: 38em;
margin-block: 18px 22px;
}
.fa-section h2 {
font-size: var(--fs-h2);
}
.is-fa .ltr {
unicode-bidi: isolate;
white-space: nowrap;
}
@media (max-width: 760px) {
.fa-split {
grid-template-columns: 1fr;
}
.fa-split.is-flip > :first-child {
order: 0;
}
.is-fa .cine-media::after {
background: linear-gradient(0deg, oklch(0.15 0.022 150 / 0.95) 0%, oklch(0.15 0.022 150 / 0.75) 48%, oklch(0.15 0.022 150 / 0.25) 100%);
}
}
.phone video.loop {
display: block;
width: 100%;
height: auto;
border: 6px solid var(--frame);
border-radius: clamp(22px, 2.6vw, 34px);
background: var(--sunk);
box-shadow: 0 0 0 1px var(--frame-ring), var(--shadow-lg);
}
.fhero-media > .phone {
width: min(300px, 72vw);
margin-inline: auto;
}
.shot video.loop {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 860px) {
.plans .plan.featured {
order: 1;
}
.plans .plan:not(.featured):not(:first-child) {
order: 2;
}
}
.shot img[src*="extension-popup"] {
width: min(100%, 340px);
height: auto;
margin-inline: auto;
display: block;
border-radius: 14px;
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.window-shot {
margin: 0;
width: min(100%, 300px);
}
.window-shot img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
}
.window-shot figcaption {
font-size: var(--fs-micro);
color: var(--dim);
text-align: center;
margin-top: 14px;
line-height: 1.45;
}
.window-duo {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(12px, 3vw, 28px);
}
.window-duo .window-shot {
width: min(48%, 280px);
}
.window-duo .window-shot:nth-child(2) {
margin-top: 40px;
}
:root {
--tint-web: oklch(0.52 0.11 155);
--tint-mac: oklch(0.42 0.02 255);
--tint-windows: oklch(0.53 0.14 250);
--tint-android: oklch(0.54 0.13 150);
--tint-ext: oklch(0.58 0.13 65);
--tint-fox: oklch(0.57 0.16 38);
--tint-store: oklch(0.5 0.015 85);
--win-bar: oklch(0.955 0.006 150);
--win-bar-ink: oklch(0.42 0.012 150);
--win-ring: oklch(0.22 0.015 85 / 0.14);
--tip-bg: oklch(0.22 0.015 85);
--tip-ink: oklch(0.97 0.006 95);
}
@media (prefers-color-scheme: dark) {
:root {
--win-bar: oklch(0.27 0.01 150);
--win-bar-ink: oklch(0.82 0.012 150);
--win-ring: oklch(1 0 0 / 0.14);
--tip-bg: oklch(0.97 0.006 95);
--tip-ink: oklch(0.2 0.015 85);
}
}
svg.g,
svg.chev {
flex: 0 0 auto;
display: block;
}
.gtile {
--t: var(--tint-web);
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
color: #fff;
background: linear-gradient(150deg, color-mix(in oklch, var(--t) 72%, white), var(--t) 70%);
box-shadow: 0 1px 0 oklch(1 0 0 / 0.28) inset, 0 1px 2px oklch(0 0 0 / 0.18);
}
.gtile .g {
width: 20px;
height: 20px;
}
.gtile.is-mac { --t: var(--tint-mac); }
.gtile.is-windows { --t: var(--tint-windows); }
.gtile.is-android { --t: var(--tint-android); }
.gtile.is-ext { --t: var(--tint-ext); }
.gtile.is-fox { --t: var(--tint-fox); }
.gtile.is-store { --t: var(--tint-store); }
:root {
--logo-tile: #fff;
--logo-ink: #000;
--logo-edge: oklch(0.22 0.015 85 / 0.12);
}
@media (prefers-color-scheme: dark) {
:root {
--logo-tile: oklch(0.25 0.012 158);
--logo-ink: #fff;
--logo-edge: oklch(1 0 0 / 0.12);
}
}
.gtile.is-logo {
color: var(--logo-ink);
background: var(--logo-tile);
box-shadow: 0 0 0 1px var(--logo-edge) inset, 0 1px 2px oklch(0 0 0 / 0.12);
}
.cine-hero .gtile.is-logo {
--logo-tile: oklch(0.2 0.01 158 / 0.92);
--logo-ink: #fff;
--logo-edge: oklch(1 0 0 / 0.16);
}
.gtile .mk-android {
transform: scale(1.2);
}
.gtile.is-trio {
grid-template-columns: repeat(2, 13px);
grid-template-rows: repeat(2, 13px);
gap: 1px 2px;
place-content: center;
}
.gtile.is-trio .g {
width: 13px;
height: 13px;
}
.gtile.is-trio .g:first-child {
grid-column: 1 / 3;
justify-self: center;
}
.gtile.is-appicon {
overflow: hidden;
background: none;
}
.gtile .mk-appicon,
.gtile.is-appicon .g.mk-appicon {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.store-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
}
.store-badge {
display: block;
border-radius: 8px;
}
.store-badge img {
display: block;
width: auto;
height: 56px;
}
.store-badge:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.store-badges.is-section {
margin: 20px 0 8px;
}
@media (max-width: 640px) {
.store-badges {
gap: 10px 12px;
}
.store-badge img {
height: 48px;
}
}
.dl-list .dl-soon {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
min-height: 52px;
border-radius: 13px;
color: var(--ink);
cursor: default;
}
.pwall.is-single {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: min(100%, 22rem);
max-width: 22rem;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.dl-foot {
align-items: center;
}
.store-badge.is-play img {
height: 82px;
margin: -13.5px;
}
@media (max-width: 640px) {
.store-badge.is-play img {
height: 70px;
margin: -11.5px;
}
}
.site-nav > a.pill {
margin-left: 0;
margin-inline-start: 8px;
}
.dl-menu {
position: relative;
}
.dl-menu > summary {
list-style: none;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 40px;
padding: 8px 12px 8px 12px;
border-radius: 999px;
color: var(--ink-2);
cursor: pointer;
user-select: none;
transition: background 0.2s, color 0.2s;
}
.dl-menu > summary::-webkit-details-marker {
display: none;
}
.dl-menu > summary .g {
width: 18px;
height: 18px;
}
.dl-menu > summary .chev {
width: 14px;
height: 14px;
opacity: 0.7;
transition: transform 0.2s var(--easing);
}
.dl-menu > summary:hover,
.dl-menu[open] > summary {
background: var(--line-soft);
color: var(--ink);
}
.dl-menu[open] > summary .chev {
transform: rotate(180deg);
}
.dl-menu > summary:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.dl-panel {
position: absolute;
top: calc(100% + 10px);
inset-inline-end: -8px;
z-index: 60;
width: 330px;
padding: 8px;
border-radius: 20px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
}
.dl-title {
padding: 8px 12px 6px;
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dim);
}
.dl-list {
list-style: none;
margin: 0;
padding: 0;
}
.dl-list a {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
min-height: 52px;
border-radius: 13px;
color: var(--ink);
text-decoration: none;
}
.dl-list a:hover,
.dl-list a:focus-visible {
background: var(--sunk);
text-decoration: none;
}
.dl-list a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.dl-list li.is-yours > a {
box-shadow: inset 3px 0 0 var(--accent);
}
[dir="rtl"] .dl-list li.is-yours > a {
box-shadow: inset -3px 0 0 var(--accent);
}
.dl-list b {
display: block;
font-size: 0.93rem;
font-weight: 650;
line-height: 1.3;
}
.dl-list small {
display: block;
font-size: 0.8rem;
line-height: 1.35;
color: var(--dim);
}
.dl-foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 12px;
margin: 6px 4px 2px;
padding: 10px 8px 4px;
border-top: 1px solid var(--line-soft);
font-size: 0.78rem;
line-height: 1.45;
color: var(--dim);
}
.dl-foot a {
color: var(--accent-ink);
font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
.dl-menu[open] .dl-panel {
animation: dl-open 0.18s var(--easing);
}
@keyframes dl-open {
from {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
}
}
@media (max-width: 440px) {
.site-nav > a[href="/pricing"] {
display: none;
}
}
@media (max-width: 640px) {
.dl-menu > summary {
padding: 8px 9px;
}
.dl-menu .dl-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.dl-menu > summary .chev {
display: none;
}
.site-nav > a.pill {
margin-inline-start: 4px;
}
.dl-panel {
position: fixed;
top: calc(var(--header-h) - 2px);
inset-inline: 12px;
width: auto;
max-height: calc(100svh - var(--header-h) - 16px);
overflow-y: auto;
}
}
.cta-arrow[hidden] {
display: none;
}
.cta-meta {
margin-top: 14px;
min-height: 1.5em;
font-size: 0.88rem;
line-height: 1.5;
color: var(--hero-muted);
}
.cta-meta a {
color: var(--hero-text);
font-weight: 600;
}
.cine-hero .cine-inner {
padding-block: clamp(40px, 7.5vh, 96px) clamp(36px, 6vh, 72px);
}
.get {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 5px 15px 5px 6px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.25s var(--easing);
}
.get:hover {
text-decoration: none;
border-color: var(--accent-line);
}
.get:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.get .gtile {
width: 32px;
height: 32px;
border-radius: 999px;
}
.get .gtile .g {
width: 18px;
height: 18px;
}
.cine-hero .get {
border-color: oklch(1 0 0 / 0.17);
background: oklch(1 0 0 / 0.08);
color: var(--hero-text);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.cine-hero .get:hover {
background: oklch(1 0 0 / 0.16);
border-color: oklch(1 0 0 / 0.3);
}
.cine-hero .get:focus-visible {
outline-color: var(--hero-text);
}
.cine-hero .is-yours .get {
border-color: oklch(0.86 0.13 158 / 0.7);
background: oklch(0.86 0.13 158 / 0.14);
}
.get.is-soon {
cursor: default;
border-style: dashed;
background: transparent;
color: var(--dim);
}
.get.is-soon .gtile {
filter: saturate(0.4);
opacity: 0.85;
}
.cine-hero .get.is-soon {
background: transparent;
color: var(--hero-muted);
border-color: oklch(1 0 0 / 0.26);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.soon-tip {
position: absolute;
bottom: calc(100% + 10px);
inset-inline-start: 0;
z-index: 20;
width: max-content;
max-width: min(250px, calc(100vw - 32px));
padding: 9px 13px;
border-radius: 12px;
background: var(--tip-bg);
color: var(--tip-ink);
font-size: 0.82rem;
font-weight: 500;
line-height: 1.4;
white-space: normal;
box-shadow: var(--shadow-lg);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translate(var(--tip-shift, 0), 4px);
transition: opacity 0.16s, transform 0.16s var(--easing), visibility 0.16s;
}
.soon-tip::after {
content: "";
position: absolute;
top: 100%;
inset-inline-start: 24px;
border: 6px solid transparent;
border-top-color: var(--tip-bg);
}
.soon:hover .soon-tip,
.soon:focus-within .soon-tip,
.soon.is-open .soon-tip {
opacity: 1;
visibility: visible;
transform: translate(var(--tip-shift, 0), 0);
}
.cine-hero .cine-facts {
margin-top: 26px;
font-size: 0.86rem;
}
@media (min-width: 1100px) {
.cine-hero h1 {
font-size: clamp(3rem, 6vw, 5.4rem);
}
}
@media (max-width: 640px) {
.cta-meta {
order: 2;
margin: 0 0 4px;
text-align: center;
}
.cine-watch {
order: 3;
}
.get.is-soon {
padding-inline-end: 8px;
}
.get {
font-size: 0.86rem;
min-height: 42px;
padding-inline-end: 13px;
}
.get .gtile {
width: 30px;
height: 30px;
}
.cine-hero .cine-facts {
gap: 4px 18px;
margin-top: 22px;
}
}
@media (prefers-reduced-motion: no-preference) {
.cine-inner > *:nth-child(5) { animation-delay: 0.24s; }
.cine-inner > *:nth-child(6) { animation-delay: 0.3s; }
.cine-inner > *:nth-child(7) { animation-delay: 0.36s; }
.get:not(.is-soon):hover {
transform: translateY(-1px);
}
}
.desk {
position: relative;
width: 100%;
aspect-ratio: 16 / 11.5;
direction: ltr;
}
.oswin-wrap {
position: absolute;
}
.oswin-wrap.is-mac {
top: 0;
left: 0;
width: 82%;
}
.oswin-wrap.is-windows {
right: 0;
bottom: 0;
width: 56%;
}
.oswin {
position: relative;
margin: 0;
overflow: hidden;
background: var(--win-bar);
box-shadow: 0 0 0 1px var(--win-ring), var(--shadow-lg);
}
.oswin img {
display: block;
width: 100%;
height: auto;
}
.oswin-bar {
position: relative;
display: flex;
align-items: center;
height: 30px;
padding: 0 12px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--win-bar-ink);
border-bottom: 1px solid var(--win-ring);
}
.oswin.is-mac {
border-radius: 12px;
}
.oswin.is-mac .oswin-bar {
justify-content: center;
}
.oswin.is-mac .oswin-bar::before {
content: "";
position: absolute;
left: 12px;
top: 50%;
width: 52px;
height: 12px;
margin-top: -6px;
background:
radial-gradient(circle at 6px 6px, oklch(0.68 0.19 28) 5.5px, transparent 6px),
radial-gradient(circle at 26px 6px, oklch(0.82 0.15 85) 5.5px, transparent 6px),
radial-gradient(circle at 46px 6px, oklch(0.74 0.17 145) 5.5px, transparent 6px);
}
.oswin.is-windows {
border-radius: 8px;
}
.oswin.is-windows .oswin-bar {
gap: 8px;
height: 32px;
padding-right: 0;
font-weight: 500;
}
.oswin.is-windows .oswin-bar img {
width: 14px;
height: 14px;
border-radius: 3px;
}
.oswin-caps {
margin-left: auto;
width: 108px;
height: 32px;
color: var(--win-bar-ink);
}
.oswin-name {
position: absolute;
top: -11px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 4px;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.01em;
box-shadow: var(--shadow);
}
.oswin-name .gtile {
width: 20px;
height: 20px;
border-radius: 999px;
}
.oswin-name .gtile .g {
width: 13px;
height: 13px;
}
.desk.has-names {
margin-block: 40px;
}
.oswin-wrap.is-mac .oswin-name {
top: -38px;
left: 0;
}
.oswin-wrap.is-windows .oswin-name {
top: auto;
bottom: -38px;
right: 0;
}
.tile-desk .oswin-name {
display: none;
}
.tile.has-desk .tile-copy {
max-width: 44%;
}
.tile-desk {
position: absolute;
right: -5%;
bottom: -9%;
width: 58%;
pointer-events: none;
}
.tile-desk .oswin-bar {
height: 22px;
font-size: 0.6rem;
}
.tile-desk .oswin.is-windows .oswin-bar {
height: 24px;
}
.tile-desk .oswin-caps {
width: 81px;
height: 24px;
}
.tile-desk .oswin.is-mac .oswin-bar::before {
transform: scale(0.75);
transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
.tile-desk .oswin-wrap {
transition: transform 0.45s var(--easing);
}
a.tile:hover .tile-desk .oswin-wrap.is-mac {
transform: translate(-6px, -4px);
}
a.tile:hover .tile-desk .oswin-wrap.is-windows {
transform: translate(4px, -6px);
}
}
@media (max-width: 860px) {
.tile.has-desk .tile-copy {
max-width: none;
}
.tile-desk {
position: relative;
right: auto;
bottom: auto;
width: 104%;
margin: 28px -10% -14% auto;
}
}
.desk-note {
margin-top: 18px;
font-size: var(--fs-micro);
color: var(--dim);
text-align: center;
}
.fhero-media .stage:has(.desk) {
display: block;
padding: clamp(36px, 4vw, 52px) clamp(18px, 3vw, 34px) clamp(20px, 3vw, 28px);
}
.tile-desk .desk.has-names {
margin-block: 0;
}
:root {
--tint-ai: oklch(0.47 0.07 195);
--tint-clay: oklch(0.55 0.11 45);
--tint-book: oklch(0.47 0.08 300);
--chip-beta-bg: oklch(0.8 0.12 80 / 0.24);
--chip-beta-ink: oklch(0.44 0.1 65);
--dlc-go-shadow: 0 6px 16px -6px oklch(0.5 0.11 150 / 0.7);
}
@media (prefers-color-scheme: dark) {
:root {
--chip-beta-bg: oklch(0.8 0.12 80 / 0.16);
--chip-beta-ink: oklch(0.86 0.11 85);
--dlc-go-shadow: 0 6px 16px -6px oklch(0 0 0 / 0.6);
}
}
.gtile.is-ai { --t: var(--tint-ai); }
.gtile.is-clay { --t: var(--tint-clay); }
.gtile.is-book { --t: var(--tint-book); }
.chip {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin-inline-start: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: 0.2em;
background: var(--accent-soft);
color: var(--accent-ink);
}
.chip.is-beta {
background: var(--chip-beta-bg);
color: var(--chip-beta-ink);
}
.chip.is-soon {
background: var(--sunk);
color: var(--dim);
box-shadow: inset 0 0 0 1px var(--line);
}
.dlc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 26px;
}
.dlc-wrap {
position: relative;
display: grid;
}
.dlc {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 100px;
padding: 18px 18px 18px 18px;
border-radius: 22px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: border-color 0.2s, box-shadow 0.25s var(--easing), transform 0.25s var(--easing);
}
.dlc:hover {
border-color: var(--accent-line);
box-shadow: var(--shadow);
text-decoration: none;
}
.dlc:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.dlc .gtile {
width: 56px;
height: 56px;
border-radius: 16px;
}
.dlc .gtile .g {
width: 28px;
height: 28px;
}
.dlc-body {
display: block;
min-width: 0;
}
.dlc-kicker {
display: block;
font-size: 0.8rem;
font-weight: 550;
line-height: 1.3;
color: var(--dim);
}
.dlc-name {
display: block;
margin-top: 1px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
.dlc-name .chip {
vertical-align: 0.3em;
}
.dlc-meta {
display: flex;
flex-wrap: wrap;
gap: 2px 0;
margin-top: 6px;
font-size: 0.8rem;
line-height: 1.4;
color: var(--dim);
}
.dlc-meta > span + span::before {
content: "·";
padding-inline: 7px;
opacity: 0.7;
}
.dlc-needs {
display: block;
font-size: 0.8rem;
line-height: 1.4;
color: var(--dim);
}
.dlc-go {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--dlc-go-shadow);
}
.dlc-go svg {
width: 22px;
height: 22px;
}
.dlc.is-store-link .dlc-go {
background: var(--sunk);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line);
}
.dlc-wrap.is-yours .dlc {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.yours {
position: absolute;
z-index: 1;
top: -10px;
inset-inline-end: 18px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
background: var(--accent);
color: var(--on-accent);
}
.yours[hidden] {
display: none;
}
.dlc-more {
margin-top: 16px;
font-size: var(--fs-micro);
color: var(--dim);
}
.dlc-more a {
color: var(--accent-ink);
font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
.dlc:hover {
transform: translateY(-2px);
}
.dlc:hover .dlc-go {
transform: translateY(1px);
transition: transform 0.25s var(--easing);
}
}
@media (max-width: 640px) {
.dlc-grid {
grid-template-columns: minmax(0, 1fr);
}
.dlc {
gap: 14px;
min-height: 88px;
padding: 14px 14px;
}
.dlc .gtile {
width: 48px;
height: 48px;
border-radius: 14px;
}
.dlc-name {
font-size: 1.25rem;
}
.dlc-go {
width: 40px;
height: 40px;
}
}
.pwall-wrap {
margin-top: clamp(36px, 5vw, 56px);
}
.pwall-wrap.is-hub {
margin-top: clamp(28px, 4vw, 40px);
padding: clamp(20px, 3vw, 32px);
border-radius: var(--radius-lg);
border: 1px solid var(--line-soft);
background:
radial-gradient(60% 80% at 100% 0%, var(--glow), transparent 70%),
var(--sunk);
}
.pwall-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 32px;
margin-bottom: 18px;
}
.pwall-head .eyebrow {
flex: 1 0 100%;
margin-bottom: 0;
}
.pwall-head h2,
.pwall-head h3 {
font-size: clamp(1.45rem, 2.3vw, 1.9rem);
letter-spacing: var(--track-head);
line-height: 1.15;
}
.pwall-head p:not(.eyebrow) {
max-width: 34rem;
font-size: var(--fs-small);
color: var(--dim);
}
.pwall {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.pwall > li {
display: grid;
}
.pw {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 12px 12px 12px 12px;
border-radius: 18px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
text-decoration: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
a.pw:hover {
border-color: var(--accent-line);
box-shadow: var(--shadow-sm);
text-decoration: none;
}
a.pw:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.pw .chip {
align-self: start;
margin-inline-start: 0;
}
.pw-text {
min-width: 0;
}
.pw-text b {
display: block;
font-size: 0.95rem;
font-weight: 650;
line-height: 1.25;
}
.pw-text small {
display: block;
margin-top: 2px;
font-size: 0.78rem;
line-height: 1.35;
color: var(--dim);
}
.pw-ok {
align-self: start;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-ink);
}
.pw-ok svg {
width: 14px;
height: 14px;
}
.pw.is-soon {
border-style: dashed;
background: transparent;
}
.pw.is-soon .gtile {
opacity: 0.7;
}
.pwall > li.is-yours .pw {
border-color: var(--accent);
}
@media (max-width: 1080px) {
.pwall {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.pwall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.pw {
grid-template-columns: auto minmax(0, 1fr);
align-content: start;
gap: 10px;
padding: 12px;
}
.pw .chip,
.pw-ok {
grid-row: 1;
grid-column: 2;
justify-self: end;
}
.pw-text {
grid-column: 1 / -1;
}
}
.dl-panel {
width: 360px;
}
.dl-list b .chip {
margin-inline-start: 6px;
vertical-align: 0.12em;
}
.dl-also {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 6px 4px 0;
padding: 10px 8px 2px;
border-top: 1px solid var(--line-soft);
font-size: 0.78rem;
color: var(--dim);
}
.dl-also span {
margin-inline-end: 4px;
}
.dl-also a {
padding: 3px 10px;
border-radius: 999px;
background: var(--sunk);
color: var(--ink);
font-weight: 600;
text-decoration: none;
}
.dl-also a:hover,
.dl-also a:focus-visible {
background: var(--accent-soft);
color: var(--accent-ink);
}
.dl-also + .dl-foot {
margin-top: 8px;
}
.fhero-media:has(.dlbox) {
align-self: center;
}
.dlbox {
padding: clamp(22px, 3vw, 32px);
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background:
radial-gradient(70% 60% at 100% 0%, var(--glow), transparent 70%),
var(--card);
box-shadow: var(--shadow-lg);
scroll-margin-top: calc(var(--header-h) + 16px);
}
.dlbox-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.dlbox-head .gtile {
width: 64px;
height: 64px;
border-radius: 18px;
}
.dlbox-head .gtile .g {
width: 30px;
height: 30px;
}
.dlbox-name {
color: var(--ink);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
.dlbox-ver {
margin-top: 3px;
font-size: var(--fs-micro);
color: var(--dim);
}
.dl-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin-bottom: 14px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--accent-line);
background: var(--accent-soft);
font-size: 0.9rem;
line-height: 1.45;
}
.dl-status[hidden] {
display: none;
}
.dl-status a {
color: var(--accent-ink);
font-weight: 650;
}
.dl-status.is-note .dl-spin {
display: none;
}
.dl-status a[hidden] {
display: none;
}
.dl-spin {
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--accent-line);
border-top-color: var(--accent);
}
.dl-status.is-started .dl-spin {
position: relative;
border-color: var(--accent);
background: var(--accent);
animation: none;
}
.dl-status.is-started .dl-spin::after {
content: "";
position: absolute;
left: 4px;
top: 2px;
width: 5px;
height: 9px;
border: solid var(--on-accent);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
.dl-spin {
animation: dl-spin 0.9s linear infinite;
}
@keyframes dl-spin {
to {
transform: rotate(360deg);
}
}
}
.dlbox-btn {
width: 100%;
min-height: 58px;
font-size: 1.05rem;
gap: 10px;
}
.dlbox-btn .g {
width: 22px;
height: 22px;
}
.dlbox-direct {
margin-top: 10px;
font-size: var(--fs-micro);
text-align: center;
color: var(--dim);
}
.dlbox-direct a {
color: var(--accent-ink);
font-weight: 600;
overflow-wrap: anywhere;
}
.dlbox-facts {
display: grid;
gap: 10px;
margin: 20px 0 0;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
}
.dlbox-facts div {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: 12px;
font-size: 0.88rem;
line-height: 1.45;
}
.dlbox-facts dt {
color: var(--dim);
}
.dlbox-facts dd {
margin: 0;
font-weight: 550;
}
.dlbox-alt {
margin-top: 12px;
font-size: var(--fs-micro);
color: var(--dim);
}
.dlbox-store {
padding: 16px;
border-radius: 16px;
border: 1px solid var(--accent-line);
background: var(--accent-soft);
}
.dlbox-route {
margin-bottom: 12px;
color: var(--ink);
font-size: 0.95rem;
font-weight: 650;
}
.dlbox-route span {
color: var(--dim);
font-weight: 500;
}
.dlbox-route.is-or {
margin: 22px 0 10px;
}
.dlbox-why {
margin-top: 12px;
font-size: var(--fs-micro);
line-height: 1.5;
color: var(--ink-2);
}
.store-badges.is-box {
padding: 4px 0;
}
.dlbox-play {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
}
.dlbox-qr {
display: none;
align-items: center;
gap: 14px;
max-width: 21rem;
}
.dlbox-qr img {
flex: none;
width: 96px;
height: 96px;
border-radius: 10px;
border: 1px solid var(--line);
}
.dlbox-qr p {
margin: 0;
font-size: var(--fs-micro);
line-height: 1.45;
color: var(--ink-2);
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.dlbox-qr {
display: flex;
}
}
.ms-store-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 28px;
margin-top: 20px;
padding: 20px 22px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--card);
}
.ms-store-row p {
flex: 1 1 280px;
margin: 0;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-2);
}
.ms-store-row strong {
color: var(--ink);
}
.fsec-text h3[id^="install-"] {
margin: 26px 0 10px;
font-size: 1.15rem;
scroll-margin-top: calc(var(--header-h) + 16px);
}
.dlbox .checksum {
margin-top: 16px;
padding: 10px 12px;
border-radius: 12px;
background: var(--sunk);
color: var(--ink-2);
line-height: 1.5;
}
.checksum > span {
display: block;
margin-bottom: 2px;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dim);
}
.dl-other {
margin-top: 20px;
font-size: var(--fs-small);
color: var(--dim);
}
.dl-other a {
color: var(--accent-ink);
font-weight: 600;
}
pre.cmd {
margin-top: 12px;
padding: 14px 16px;
border-radius: 14px;
background: var(--frame);
color: var(--night-ink);
font-family: var(--mono);
font-size: 0.85rem;
line-height: 1.5;
overflow-x: auto;
}
pre.cmd code {
font: inherit;
color: inherit;
background: none;
padding: 0;
}
code.hash {
font-family: var(--mono);
font-size: 0.8em;
overflow-wrap: anywhere;
}
.dl-section h2 {
font-size: 1.75rem;
margin-bottom: 18px;
}
.dl-section .dlbox {
margin-bottom: 18px;
}
.dl-section-note {
margin-bottom: 40px;
font-size: var(--fs-small);
color: var(--dim);
}
.dl-section-note a {
color: var(--accent-ink);
font-weight: 600;
}
@media (max-width: 640px) {
.dlbox-head .gtile {
width: 52px;
height: 52px;
}
.dlbox-facts div {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
}
.shot-steps {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: clamp(18px, 3vw, 32px);
counter-reset: shotstep;
}
.shot-steps > li {
counter-increment: shotstep;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.shot-steps .phone {
width: 100%;
max-width: 240px;
margin: 0 auto;
}
.shot-steps .phone img {
border-width: 4px;
border-radius: clamp(16px, 2vw, 26px);
box-shadow: 0 0 0 1px var(--frame-ring), var(--shadow);
}
.shot-steps p {
margin: 0;
font-size: var(--fs-small);
line-height: 1.5;
}
.shot-steps p::before {
content: counter(shotstep);
display: inline-grid;
place-items: center;
width: 1.6em;
height: 1.6em;
margin-inline-end: 8px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-weight: 700;
font-size: 0.85em;
vertical-align: 0.05em;
}
@media (max-width: 640px) {
.shot-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 14px;
}
}
.shot-steps > li.is-text {
justify-content: flex-start;
padding: 18px 20px;
border: 1px solid var(--line-soft);
border-radius: 18px;
background: var(--card);
box-shadow: var(--shadow-sm);
}
.wn-grid {
--wn-pad: clamp(22px, 2.6vw, 32px);
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"games smart smart"
"games forecast streak";
gap: 18px;
--wn-x: 1;
}
[dir="rtl"] .wn-grid {
--wn-x: -1;
}
[dir="rtl"] .wn-games .wn-media {
direction: ltr;
--wn-x: 1;
}
@media (min-width: 861px) {
.fa-section.whatsnew .section-head {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
}
.wn-games { grid-area: games; }
.wn-smart { grid-area: smart; }
.wn-forecast { grid-area: forecast; }
.wn-streak { grid-area: streak; }
.wn-grid > li {
display: flex;
min-width: 0;
}
.wn-card {
position: relative;
isolation: isolate;
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
padding: var(--wn-pad);
border-radius: var(--radius-lg);
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow);
overflow: hidden;
color: var(--ink);
text-decoration: none;
}
.wn-card:hover {
text-decoration: none;
border-color: var(--accent-line);
}
.wn-card:focus-visible {
border-radius: var(--radius-lg);
}
.wn-card::after {
content: "→";
content: "→" / "";
position: absolute;
top: calc(var(--wn-pad) - 4px);
inset-inline-end: calc(var(--wn-pad) - 4px);
z-index: 2;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-ink);
font-weight: 650;
}
[dir="rtl"] .wn-card::after {
content: "←";
content: "←" / "";
}
.wn-games .wn-card {
background:
radial-gradient(90% 60% at 100% 100%, var(--glow), transparent 70%),
var(--card);
}
.wn-streak .wn-card {
background:
radial-gradient(90% 70% at 50% 0%, var(--amber-soft), transparent 70%),
var(--card);
}
.wn-copy {
position: relative;
z-index: 1;
padding-inline-end: 44px;
}
.wn-copy h3 {
font-size: clamp(1.4rem, 2.1vw, 1.85rem);
letter-spacing: -0.035em;
line-height: 1.08;
}
.wn-copy h3 .chip {
vertical-align: 0.3em;
}
.wn-text {
margin-top: 12px;
font-size: var(--fs-small);
max-width: 36ch;
}
.wn-media {
display: flex;
justify-content: center;
align-items: flex-start;
height: 300px;
margin: 26px calc(var(--wn-pad) * -1) calc(var(--wn-pad) * -1);
padding: 0 24px;
overflow: hidden;
}
.wn-phone {
flex: 0 0 auto;
width: 240px;
}
.wn-phone img {
border-width: 5px;
box-shadow: 0 0 0 1px var(--frame-ring), var(--shadow);
}
.wn-games .wn-media {
flex: 1 1 0;
min-height: 380px;
height: auto;
padding-top: clamp(18px, 7vw, 100px);
}
.wn-games .wn-phone {
width: 220px;
}
.wn-games .wn-phone:first-child {
transform: translate(calc(50px * var(--wn-x)), 0) rotate(calc(-4deg * var(--wn-x)));
}
.wn-games .wn-phone:last-child {
z-index: 1;
transform: translate(calc(-50px * var(--wn-x)), 60px) rotate(calc(4deg * var(--wn-x)));
}
.wn-smart .wn-card {
min-height: 340px;
}
.wn-smart .wn-copy {
max-width: 52%;
padding-inline-end: 0;
}
.wn-smart .wn-media {
position: absolute;
top: 34px;
bottom: 0;
inset-inline-end: clamp(48px, 7vw, 96px);
height: auto;
margin: 0;
padding: 6px 24px 0;
}
.wn-streak .wn-media {
order: -1;
align-items: flex-end;
height: 270px;
margin: calc(var(--wn-pad) * -1) calc(var(--wn-pad) * -1) 26px;
padding-bottom: 6px;
}
.wn-streak .wn-copy {
padding-inline-end: 44px;
}
.wn-streak .wn-card::after {
top: auto;
bottom: calc(var(--wn-pad) - 4px);
}
.wn-foot .text-link {
display: inline;
}
@media (prefers-reduced-motion: no-preference) {
.wn-phone {
transition: translate 0.45s var(--easing);
}
.wn-card:hover .wn-phone {
translate: 0 -8px;
}
.wn-streak .wn-card:hover .wn-phone {
translate: 0 8px;
}
}
.wn-foot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 32px;
margin-top: 28px;
}
.wn-foot .note {
margin: 0;
}
.cta-new {
margin-top: 6px;
font-size: 0.88rem;
line-height: 1.5;
}
.cta-new a {
color: var(--hero-text);
font-weight: 600;
text-decoration: underline;
text-decoration-color: oklch(1 0 0 / 0.4);
text-underline-offset: 3px;
}
.cta-new a:hover {
text-decoration-color: currentColor;
}
@media (max-width: 1080px) {
.wn-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"games games"
"smart forecast"
"streak streak";
}
.wn-games .wn-card,
.wn-streak .wn-card {
min-height: 340px;
}
.wn-games .wn-copy,
.wn-streak .wn-copy {
max-width: 44%;
padding-inline-end: 0;
}
.wn-games .wn-media,
.wn-streak .wn-media {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: clamp(40px, 6vw, 72px);
min-height: 0;
height: auto;
margin: 0;
}
.wn-games .wn-media {
flex: none;
padding-top: 34px;
}
[dir="rtl"] .wn-games .wn-media {
inset-inline-end: auto;
inset-inline-start: clamp(40px, 6vw, 72px);
}
.wn-games .wn-phone {
width: 200px;
}
.wn-games .wn-phone:first-child {
transform: translate(calc(10px * var(--wn-x)), 0) rotate(calc(-4deg * var(--wn-x)));
}
.wn-games .wn-phone:last-child {
transform: translate(calc(-10px * var(--wn-x)), 40px) rotate(calc(4deg * var(--wn-x)));
}
.wn-streak .wn-media {
padding-bottom: 34px;
}
.wn-smart .wn-card {
min-height: 0;
}
.wn-smart .wn-copy {
max-width: none;
padding-inline-end: 44px;
}
.wn-smart .wn-media {
position: static;
height: 300px;
margin: 26px calc(var(--wn-pad) * -1) calc(var(--wn-pad) * -1);
padding: 0 24px;
}
}
@media (max-width: 640px) {
.wn-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "games" "smart" "forecast" "streak";
gap: 14px;
}
.wn-games .wn-copy,
.wn-streak .wn-copy {
max-width: none;
}
.wn-games .wn-copy,
.wn-smart .wn-copy {
padding-inline-end: 44px;
}
.wn-games .wn-card,
.wn-streak .wn-card {
min-height: 0;
}
.wn-games .wn-media,
.wn-streak .wn-media {
position: static;
height: 280px;
}
.wn-games .wn-media {
margin: 22px calc(var(--wn-pad) * -1) calc(var(--wn-pad) * -1);
padding: 12px 12px 0;
}
.wn-games .wn-phone {
width: 160px;
}
.wn-games .wn-phone:first-child {
transform: translate(calc(12px * var(--wn-x)), 0) rotate(calc(-4deg * var(--wn-x)));
}
.wn-games .wn-phone:last-child {
transform: translate(calc(-12px * var(--wn-x)), 30px) rotate(calc(4deg * var(--wn-x)));
}
.wn-streak .wn-media {
height: 240px;
margin: calc(var(--wn-pad) * -1) calc(var(--wn-pad) * -1) 22px;
padding-bottom: 6px;
}
.wn-smart .wn-media,
.wn-forecast .wn-media {
height: 260px;
}
.wn-phone {
width: 210px;
}
.wn-foot {
flex-direction: column;
align-items: flex-start;
}
.cta-new {
order: 4;
margin: 4px 0 0;
text-align: center;
}
}
.new-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-block: 28px 18px;
padding: 12px 14px;
border-radius: 18px;
background: var(--card);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
}
.new-strip-tag {
background: var(--accent);
color: var(--on-accent);
border-radius: 999px;
padding: 3px 10px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.new-strip ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.new-strip li a {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: var(--sunk);
color: var(--ink);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.new-strip li a:hover {
background: var(--accent-soft);
color: var(--accent-ink);
}
.new-strip li .chip {
vertical-align: 0;
}
.new-strip-start {
margin-inline-start: auto;
font-size: 0.9rem;
font-weight: 650;
color: var(--accent-ink);
text-decoration: none;
}
.new-strip-start:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.new-strip {
padding: 14px;
}
.new-strip-start {
margin-inline-start: 0;
flex-basis: 100%;
}
}
:root {
--h-display: clamp(2.75rem, 3.2vw + 1.9rem, 4.75rem);
--h-h2: clamp(2.125rem, 2vw + 1.5rem, 3rem);
--h-h3: clamp(1.3125rem, 0.4vw + 1.2rem, 1.5rem);
--h-lead: clamp(1.125rem, 0.3vw + 1.05rem, 1.25rem);
--h-pad: clamp(64px, 8vw, 128px);
--device-bezel: 9px;
}
.device {
--w: 280px;
width: var(--w);
max-width: 100%;
margin: 0;
flex: none;
}
.device img {
width: 100%;
height: auto;
border: var(--device-bezel) solid var(--frame);
border-radius: calc(var(--w) * 0.16);
background: var(--sunk);
box-shadow:
0 0 0 1px var(--frame-ring),
0 1px 2px hsl(var(--shadow-color) / 0.1),
0 28px 56px -20px hsl(var(--shadow-color) / 0.34);
}
.device figcaption {
font-size: 0.875rem;
color: var(--dim);
text-align: center;
margin-top: 14px;
line-height: 1.45;
}
@media (max-width: 560px) {
:root {
--gutter: 16px;
}
}
@keyframes h-fade {
from { opacity: 0; }
}
@keyframes h-rise {
from { opacity: 0; translate: 0 12px; }
}
.faq .faq-group-title {
text-transform: none;
letter-spacing: -0.01em;
font-size: 1.0625rem;
font-weight: 650;
color: var(--ink);
}
.yearly-banner > span {
letter-spacing: 0;
font-size: 0.875rem;
text-transform: none;
}
.h-trust-block {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 40px;
}
.h-trust-block p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--ink-2);
}
@media (max-width: 860px) {
.h-trust-block {
grid-template-columns: minmax(0, 1fr);
}
}
.chip {
font-size: 0.8125rem;
font-weight: 650;
letter-spacing: 0;
text-transform: none;
line-height: 1.45;
}
.dl-title,
.dl-list small,
.dlc-kicker,
.dlc-needs,
.dlc-meta,
.pwall small {
font-size: 0.8125rem;
}
.h-wall-more {
margin-top: 28px;
}
@media (max-width: 767px) {
.film-start {
padding: 16px;
background: none;
}
.film-start > span:not(.film-play-icon) {
display: none;
}
.film-play-icon {
width: 56px;
height: 56px;
}
}
@media (max-width: 480px) {
.site-nav > a[href="/features"] {
display: none;
}
.site-nav > a.nav-login {
display: inline-flex;
}
}
html[lang="ja"] {
--sans: "Schibsted Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
--track-display: 0;
--track-head: 0;
}
html[lang="ja"] body {
line-height: 1.75;
}
html[lang="ja"] :is(h1, h2, h3, h4) {
letter-spacing: 0;
line-height: 1.35;
word-break: auto-phrase;
}
html[lang="ja"] .cine-hero h1 {
font-size: clamp(2.4rem, 5.6vw, 4.6rem);
line-height: 1.25;
letter-spacing: 0;
}
html[lang="ja"] h1 .h1-kicker,
html[lang="ja"] p.h1-kicker,
html[lang="ja"] .kicker > span:first-child {
letter-spacing: 0.04em;
}
.poster {
--p-ink: oklch(0.975 0.012 150);
--p-sub: oklch(0.82 0.035 150);
--p-em: oklch(0.858 0.132 158);
--p-pill: oklch(0.858 0.132 158);
--p-pill-bg: oklch(1 0 0 / 0.07);
--p-pill-ring: oklch(0.858 0.132 158 / 0.3);
--p-link: oklch(0.88 0.1 150);
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
justify-items: center;
padding: clamp(32px, 2rem + 2vw, 56px) clamp(20px, 1rem + 2.5vw, 48px) 0;
border-radius: clamp(24px, 1.2rem + 1vw, 36px);
color: var(--p-ink);
text-align: center;
background:
radial-gradient(120% 55% at 50% 108%, oklch(0.42 0.09 160 / 0.55), transparent 62%),
radial-gradient(90% 45% at 50% -6%, oklch(0.36 0.07 160 / 0.6), transparent 70%),
oklch(0.166 0.017 158);
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 40px 90px -50px oklch(0.2 0.05 160 / 0.6);
}
.poster.is-mint {
--p-ink: oklch(0.246 0.03 157);
--p-sub: oklch(0.42 0.025 157);
--p-em: oklch(0.47 0.14 156);
--p-pill: oklch(0.44 0.13 156);
--p-pill-bg: oklch(0.947 0.027 152);
--p-pill-ring: oklch(0.492 0.138 156 / 0.2);
--p-link: oklch(0.42 0.12 156);
background:
radial-gradient(110% 55% at 50% 105%, oklch(0.9 0.06 156 / 0.85), transparent 65%),
radial-gradient(80% 40% at 50% -4%, oklch(0.995 0.004 152), transparent 70%),
oklch(0.971 0.007 152);
box-shadow: inset 0 0 0 1px oklch(0.492 0.138 156 / 0.12), 0 40px 90px -50px oklch(0.3 0.06 160 / 0.35);
}
@media (prefers-color-scheme: dark) {
.poster.is-mint {
--p-ink: oklch(0.975 0.012 150);
--p-sub: oklch(0.86 0.03 150);
--p-em: oklch(0.88 0.13 158);
--p-pill: oklch(0.9 0.11 158);
--p-pill-bg: oklch(1 0 0 / 0.09);
--p-pill-ring: oklch(0.858 0.132 158 / 0.32);
--p-link: oklch(0.9 0.1 150);
background:
radial-gradient(110% 55% at 50% 105%, oklch(0.55 0.11 158 / 0.55), transparent 65%),
radial-gradient(80% 40% at 50% -4%, oklch(0.42 0.07 158 / 0.7), transparent 70%),
oklch(0.3 0.055 160);
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), 0 40px 90px -50px #000;
}
}
.poster-copy {
display: grid;
justify-items: center;
max-width: 36rem;
}
.pill {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.55em;
margin: 0;
padding: 0.5em 1em;
border-radius: 999px;
font: 650 0.8125rem / 1.2 var(--sans);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--p-pill);
background: var(--p-pill-bg);
box-shadow: inset 0 0 0 1.5px var(--p-pill-ring);
}
.pill-dot {
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
}
.poster :is(h2, h3) {
margin: 0.45em 0 0;
color: var(--p-ink);
font: 790 clamp(2.05rem, 1.35rem + 3vw, 3.5rem) / 0.98 var(--sans);
letter-spacing: -0.042em;
text-wrap: balance;
}
.poster :is(h2, h3) em {
display: block;
font: inherit;
font-style: normal;
color: var(--p-em);
-webkit-text-fill-color: currentColor;
background: none;
}
.poster-sub {
margin: 1em 0 0;
max-width: 34ch;
color: var(--p-sub);
font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
line-height: 1.45;
text-wrap: balance;
}
.poster a {
color: var(--p-link);
}
.poster-art {
display: block;
width: min(100%, 520px);
margin-top: clamp(20px, 1rem + 1.5vw, 36px);
}
.poster-art img {
display: block;
width: 100%;
height: auto;
}
.wbody {
margin: var(--space-5, 24px) 0 clamp(40px, 5vw, 64px);
}
.wgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: dense;
align-items: start;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.wcell {
margin: 0;
padding: 12px 12px 16px;
border-radius: 24px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.wcell.is-wide {
grid-column: 1 / -1;
}
.wcell-art {
overflow: hidden;
border-radius: 16px;
}
.wcell-art img {
display: block;
width: 100%;
height: auto;
}
.wcell h3 {
margin: 14px 6px 0;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.wcell p {
margin: 4px 6px 0;
color: var(--dim);
font-size: 0.95rem;
line-height: 1.45;
}
.wnote {
margin: 18px 0 0;
color: var(--ink-2);
}
.fsec-wide .wgrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: row;
}
.fsec-wide .wcell.is-wide {
grid-column: span 2;
}
@media (max-width: 760px) {
.fsec-wide .wgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: dense;
}
.fsec-wide .wcell.is-wide {
grid-column: 1 / -1;
}
}
@media (max-width: 420px) {
.wgrid {
gap: 10px;
}
.wcell {
padding: 8px 8px 12px;
border-radius: 20px;
}
.wcell p {
font-size: 0.9rem;
}
}
.download-layout .poster {
margin-top: clamp(40px, 5vw, 64px);
scroll-margin-top: 96px;
}
.hero-new {
margin: 18px 0 0;
}
.hero-new a {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 4px 16px 4px 4px;
border-radius: 999px;
color: var(--ink);
font-weight: 600;
text-decoration: none;
background: var(--card);
border: 1px solid var(--accent-line);
}
.hero-new a:hover {
border-color: var(--accent);
}
.hero-new-tag {
padding: 6px 12px;
border-radius: 999px;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-accent);
background: var(--accent);
}
@media (forced-colors: active) {
.poster {
border: 1px solid CanvasText;
}
}
@media (max-width: 360px) {
.pill {
letter-spacing: 0.08em;
font-size: 0.75rem;
}
}
.ipad-note {
max-width: 40rem;
margin: 18px 0 0;
color: var(--ink-2);
font-size: var(--fs-small);
line-height: 1.5;
}
.ipad-posters {
display: grid;
gap: clamp(20px, 3vw, 32px);
margin-top: clamp(32px, 5vw, 56px);
}
.ipad-poster .pill .a-tag {
padding: 1px 8px;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.06em;
}
.poster-art.is-tablet {
width: min(100%, 860px);
}
.ipad-caption {
margin: 16px auto 0;
max-width: 40rem;
text-align: center;
}
.ipad-prose {
max-width: 44rem;
margin: clamp(40px, 6vw, 72px) auto 0;
}
.ios-status {
display: inline-flex;
align-items: flex-start;
gap: 10px;
max-width: 40rem;
margin: 0 0 22px;
padding: 10px 16px 10px 14px;
border-radius: 16px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink-2);
font-size: var(--fs-small, 0.95rem);
line-height: 1.45;
}
.ios-status strong {
color: var(--ink);
}
.ios-status-dot {
flex: 0 0 auto;
width: 10px;
height: 10px;
margin-top: 0.45em;
border-radius: 50%;
background: var(--chip-beta-ink);
box-shadow: 0 0 0 4px var(--chip-beta-bg);
}
.ios-status.is-live .ios-status-dot {
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.iphone-hero {
display: grid;
gap: clamp(24px, 4vw, 48px);
align-items: center;
}
.iphone-hero-copy {
min-width: 0;
}
.iphone-hero .pwall.is-single {
margin-top: 22px;
}
.iphone-hero-art {
display: block;
justify-self: center;
width: min(100%, 460px);
}
.iphone-hero-art img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 960px) {
.iphone-hero {
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
}
.iphone-hero-art {
width: 100%;
}
}
.iphone-toc {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0;
}
.iphone-toc a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
}
.iphone-toc a:hover {
border-color: var(--accent-line);
}
.iphone-toc a:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.iphone-posters {
margin-top: clamp(24px, 4vw, 40px);
}
.iphone-posters .poster {
scroll-margin-top: 96px;
}
.iphone-posters .pill .a-tag {
padding: 1px 8px;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.06em;
}
.poster-art.is-pair {
width: min(100%, 600px);
}
.poster-facts {
display: grid;
gap: 18px clamp(20px, 3vw, 36px);
width: 100%;
max-width: 960px;
margin: 8px 0 clamp(32px, 4vw, 52px);
padding: 0;
list-style: none;
text-align: left;
}
.poster-facts li {
padding-top: 14px;
border-top: 1px solid oklch(1 0 0 / 0.16);
}
.poster-facts strong {
display: block;
color: var(--p-ink);
font-size: 1.02rem;
}
.poster-facts span {
display: block;
margin-top: 4px;
color: var(--p-sub);
font-size: 0.95rem;
line-height: 1.45;
}
.siri-list {
--siri-card: oklch(1 0 0 / 0.8);
--siri-ring: oklch(0.492 0.138 156 / 0.16);
display: grid;
gap: 12px;
width: 100%;
max-width: 900px;
margin: clamp(24px, 3vw, 36px) 0 clamp(32px, 4vw, 52px);
padding: 0;
list-style: none;
text-align: left;
}
.siri-list li {
padding: 18px 20px;
border-radius: 20px;
background: var(--siri-card);
box-shadow: inset 0 0 0 1px var(--siri-ring);
}
.siri-list q {
display: block;
color: var(--p-ink);
font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
font-weight: 720;
letter-spacing: -0.015em;
line-height: 1.25;
}
.siri-list span {
display: block;
margin-top: 6px;
color: var(--p-sub);
font-size: 0.97rem;
line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
.siri-list {
--siri-card: oklch(1 0 0 / 0.07);
--siri-ring: oklch(1 0 0 / 0.12);
}
}
@media (min-width: 760px) {
.poster-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.siri-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.iphone-faq {
max-width: 44rem;
margin: clamp(40px, 6vw, 72px) auto clamp(48px, 6vw, 88px);
scroll-margin-top: 96px;
}
.iphone-faq h2 {
margin-bottom: 12px;
font-size: 1.75rem;
letter-spacing: -0.03em;
}
@media (forced-colors: active) {
.ios-status-dot {
forced-color-adjust: none;
background: CanvasText;
}
.siri-list li {
border: 1px solid CanvasText;
}
}
.poster-row {
display: grid;
gap: clamp(20px, 3vw, 32px);
}
.poster-row .poster {
grid-template-rows: auto 1fr;
}
.poster-row .poster-art {
align-self: end;
width: min(100%, 440px);
}
@media (min-width: 960px) {
.poster-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.poster-row .poster :is(h2, h3) {
font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
}
}
.pcta-note {
margin: 12px 0 0;
min-height: 1.5em;
font-size: 0.875rem;
line-height: 1.5;
color: var(--dim);
}
.pcta-note a {
color: inherit;
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--accent-line);
text-underline-offset: 3px;
}
.pcta-note a:hover {
color: var(--ink);
text-decoration-color: currentColor;
}
.pcta .pcta-badge.primary,
.pcta .pcta-badge.primary:hover {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0;
border: 0;
border-radius: 10px;
background: none;
box-shadow: none;
transform: none;
}
.pcta-badge img {
display: block;
width: auto;
height: 50px;
}
.pcta-badge.is-play img {
height: 74px;
margin: -12px;
}
.pcta-badge:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.pcta.is-site .button-row > * {
min-height: 56px;
}
@media (max-width: 640px) {
.pcta.is-site .button-row > * {
flex: 1 1 100%;
}
}
.pcta.is-guide .button-row > * {
min-height: 56px;
}
.pcta .pcta-badge.secondary,
.pcta .pcta-badge.secondary:hover {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0;
border: 0;
border-radius: 10px;
background: none;
box-shadow: none;
transform: none;
}
.pcta.is-guide .pcta-badge.is-play img {
height: 76px;
margin: -10px -12px;
}
@media (max-width: 640px) {
.pcta.is-guide .button-row > * {
flex: 1 1 100%;
justify-content: center;
}
}
.cta-band .pcta.is-guide {
margin-top: var(--space-5);
}
.cta-band .pcta.is-guide .pcta-note {
margin-inline: auto;
}
.cta-band p.band-note {
margin-top: 10px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--accent-ink);
}
.fsec-text > .h-sub,
.fsec-copy > .h-sub {
margin-top: var(--space-6);
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
color: var(--ink);
}
.fsec-text > .h-sub + p {
margin-top: 8px;
}
.lexbox {
display: grid;
gap: clamp(20px, 4vw, 44px);
margin-top: var(--space-5);
padding: clamp(20px, 3.4vw, 40px);
border-radius: var(--radius);
border: 1px solid var(--accent-line);
background:
radial-gradient(70% 90% at 100% 0%, var(--accent-soft), transparent 70%),
var(--card);
box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
.lexbox:has(.lexbox-media) {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
align-items: center;
}
}
.lexbox-copy {
min-width: 0;
}
.lexbox h3 {
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
margin-top: 6px;
}
.lexbox .ticks {
margin-top: var(--space-4);
}
.lexbox .pcta {
margin-top: var(--space-5);
}
.lexbox-media {
display: flex;
justify-content: center;
min-width: 0;
}
.lexbox-media .phone {
width: min(280px, 70vw);
}
.lexbox-media .shot-wrap {
width: 100%;
max-width: 460px;
}
.cefr-table .data-table td {
color: var(--ink-2);
}
.cefr-table .data-table td.num {
color: var(--ink);
font-weight: 600;
}
.cefr-table .data-table tbody th {
vertical-align: middle;
}
.lvl {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.6em;
padding: 4px 8px;
border-radius: 8px;
font-weight: 750;
letter-spacing: 0.02em;
background: var(--accent-soft);
color: var(--accent-ink);
}
.lvl-b {
background: var(--amber-soft);
color: var(--ink);
}
.lvl-c {
background: var(--coral-soft);
color: var(--ink);
}
.gloss-index {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: var(--space-6);
}
.gloss-index a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink-2);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
}
.gloss-index a:hover {
border-color: var(--accent-line);
color: var(--ink);
}
.gloss {
margin: 0;
display: grid;
gap: 12px;
}
.gloss-entry {
scroll-margin-top: 96px;
padding: clamp(18px, 2.4vw, 26px);
border-radius: var(--radius-sm);
border: 1px solid var(--line-soft);
background: var(--card);
}
.gloss-entry:target {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.gloss-entry dt {
display: flex;
align-items: baseline;
gap: 10px;
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
font-weight: 700;
color: var(--ink);
}
.gloss-anchor {
order: 2;
font-size: 0.8em;
color: var(--dim);
text-decoration: none;
opacity: 0.6;
}
.gloss-anchor:hover,
.gloss-anchor:focus-visible {
opacity: 1;
color: var(--accent-ink);
}
.gloss-entry dd {
margin: 8px 0 0;
}
.gloss-entry dd > p {
max-width: var(--reading);
color: var(--ink-2);
}
.gloss-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
margin-top: 10px;
font-size: var(--fs-micro);
color: var(--dim) !important;
}
html:not([lang="es"]) main [lang="es"]:not(a) { font-style: italic; }
@media (min-width: 1100px) {
.gloss {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.site-footer {
margin-top: var(--space-8);
border-top: 1px solid var(--line);
background: var(--sunk);
padding-block: 56px 32px;
font-size: 0.875rem;
}
.site-footer [lang] {
font-style: normal;
}
.site-footer [lang="fa"] {
font-family: var(--fa);
}
.site-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.fbrand {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px 40px;
padding-block-end: 40px;
border-block-end: 1px solid var(--line);
}
.fbrand-id {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 22px;
min-width: 0;
}
.fbrand-id p {
margin: 0;
max-width: 46ch;
color: var(--dim);
font-size: 0.9375rem;
line-height: 1.5;
padding-inline-start: 22px;
border-inline-start: 1px solid var(--line);
}
.fbrand-cta {
display: flex;
gap: 10px;
}
.fbrand-cta .button {
min-height: 42px;
padding: 9px 20px;
font-size: 0.875rem;
box-shadow: none;
}
.fnav {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.88fr);
gap: 40px 28px;
padding-block: 44px 48px;
}
.fgroup + .fgroup {
margin-block-start: 32px;
}
.fh {
margin: 0 0 10px;
font-size: 0.8125rem;
font-weight: 650;
line-height: 1.3;
letter-spacing: 0;
color: var(--ink);
}
.flist a {
display: inline-block;
padding-block: 5px;
line-height: 1.35;
color: var(--dim);
text-decoration: none;
transition: color 0.15s;
}
.flist a:hover {
color: var(--ink);
}
.site-footer a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.site-footer .fchip:focus-visible,
.fbrand-cta .button:focus-visible {
border-radius: 999px;
}
.fstrip {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px 32px;
padding-block: 24px;
border-block: 1px solid var(--line);
}
.flangs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 16px;
}
.flangs-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 0.8125rem;
font-weight: 650;
color: var(--ink);
}
.fglobe {
color: var(--dim);
flex: none;
}
.fchips,
.fsocial {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fchip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 6px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
color: var(--ink-2);
font-size: 0.8125rem;
line-height: 1.2;
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.fchip:hover {
border-color: var(--accent-line);
color: var(--ink);
text-decoration: none;
}
.fsoc-mark {
flex: none;
}
.copyright {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 24px;
margin-top: 0;
padding-top: 22px;
font-size: 0.8125rem;
color: var(--dim);
}
.site-footer .container > .copyright:first-child {
border-top: 1px solid var(--line);
}
.copyright a {
color: var(--dim);
}
.copyright a:hover {
color: var(--ink);
}
.flegal {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
}
.flegal a {
display: inline-block;
padding-block: 3px;
text-decoration: none;
}
.marks-note {
margin-top: 14px;
font-size: 0.75rem;
line-height: 1.55;
color: var(--dim);
max-width: 90ch;
}
.marks-note a {
color: var(--dim);
}
@media (max-width: 1023px) {
.fnav {
display: block;
columns: 2;
column-gap: 32px;
}
.fcol {
display: contents;
}
.fgroup {
break-inside: avoid;
margin-block-end: 32px;
}
.fgroup + .fgroup {
margin-block-start: 0;
}
.fnav {
padding-block-end: 16px;
}
}
@media (max-width: 640px) {
.site-footer {
padding-block-start: 44px;
}
.fbrand {
flex-direction: column;
align-items: flex-start;
padding-block-end: 32px;
}
.fbrand-id {
flex-direction: column;
align-items: flex-start;
}
.fbrand-id p {
padding-inline-start: 0;
border-inline-start: 0;
}
.fbrand-cta {
width: 100%;
}
.fbrand-cta .button {
flex: 1;
min-height: 44px;
}
.fnav {
column-gap: 20px;
padding-block-start: 36px;
}
.flist a {
padding-block: 7px;
}
.flangs {
flex-direction: column;
align-items: flex-start;
}
.copyright {
flex-direction: column;
align-items: flex-start;
}
}
.shot-steps.is-wide {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 5vw, 56px);
}
.shot-steps.is-wide .shot {
box-shadow: var(--shadow);
}
@media (max-width: 640px) {
.shot-steps.is-wide {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
}
.pcta.is-local .button-row > * {
min-height: 56px;
}
@media (max-width: 640px) {
.pcta.is-local .button-row > * {
flex: 1 1 100%;
justify-content: center;
}
.pcta.is-cine .pcta-note {
text-align: center;
}
}
.pcta.is-cine .pcta-note {
color: var(--hero-muted);
}
.pcta.is-cine .pcta-note a {
color: var(--hero-text);
text-decoration-color: oklch(1 0 0 / 0.4);
}
.pcta.is-cine .pcta-note a:hover {
text-decoration-color: currentColor;
}
.pcta.is-cine .pcta-badge:focus-visible {
outline-color: var(--hero-text);
}
.cta-band .pcta.is-local .button-row {
justify-content: center;
}
.fhero.is-stacked {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.fhero.is-stacked > div:first-child {
max-width: 760px;
}
@media (min-width: 1024px) {
.fhero.is-stacked {
padding-block-start: clamp(32px, 4vw, 56px);
}
.fhero.is-stacked > div:first-child {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
grid-template-areas: "crumb crumb" "kicker kicker" "title lead" "title actions" "title updated" "title .";
grid-template-rows: auto auto auto auto auto 1fr;
column-gap: clamp(40px, 5vw, 72px);
align-items: start;
}
.fhero.is-stacked .breadcrumb { grid-area: crumb; }
.fhero.is-stacked .h1-kicker { grid-area: kicker; }
.fhero.is-stacked h1 { grid-area: title; font-size: clamp(2.75rem, 1.2rem + 3vw, 4.25rem); }
.fhero.is-stacked .lead { grid-area: lead; margin-top: 6px; }
.fhero.is-stacked .ecta,
.fhero.is-stacked > div:first-child > .button-row { grid-area: actions; margin-top: 24px; }
.fhero.is-stacked .updated { grid-area: updated; }
.fhero.is-stacked .ecta-row .store-badge img { height: 48px; }
.fhero.is-stacked .ecta-row { min-height: 48px; }
}
.fhero.is-stacked .fhero-media {
display: block;
width: 100%;
max-width: 1120px;
margin-inline: auto;
}
.fhero.is-stacked::before {
inset: 20% -20% 0 10%;
}
.demo .shot {
position: relative;
}
.loop-toggle {
position: absolute;
inset-block-end: 12px;
inset-inline-end: 12px;
z-index: 2;
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: color-mix(in srgb, #000 55%, transparent);
cursor: pointer;
}
.loop-toggle[hidden] {
display: none;
}
.loop-toggle:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.loop-toggle .lt-play,
.loop-toggle[aria-pressed="true"] .lt-pause {
display: none;
}
.loop-toggle[aria-pressed="true"] .lt-play {
display: block;
}
.phone .loop-toggle {
inset-block-end: 18px;
inset-inline-end: 18px;
}
.phone:has(> .loop-toggle) {
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.loop-toggle {
display: none;
}
}
.demo-slot {
display: grid;
place-items: center;
min-height: 220px;
padding: 28px;
border: 1px dashed var(--line);
border-radius: var(--radius-lg);
background: var(--sunk);
color: var(--dim);
text-align: center;
font-size: var(--fs-small);
}
.demo-slot p {
max-width: 44ch;
margin: 0;
}
.ecta {
margin-top: 28px;
}
.ecta-row {
min-height: 56px;
}
.ecta-row .button {
min-height: 48px;
}
.ecta-row .store-badge.is-play img {
height: 56px;
margin-block: -9px;
}
.ecta-note {
max-width: 600px;
min-height: 3em;
}
.cta-band .ecta {
display: grid;
justify-items: center;
}
.cta-band .ecta-note {
margin-inline: auto;
}
@media (max-width: 640px) {
.ecta-row .store-badge.is-play img {
height: 48px;
margin-block: -7px;
}
.ecta-row .button {
width: 100%;
justify-content: center;
}
}
.answer {
max-width: 68ch;
margin: 28px 0 0;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
}
.answer + .glance {
margin-top: 24px;
}
.answer p {
margin: 0;
}
.answer .answer-label {
margin-bottom: 6px;
font-size: var(--fs-micro);
font-weight: 700;
color: var(--accent-ink);
}
.works-on {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
margin: 20px 0 0;
padding: 0;
}
.works-on li {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 4px 14px 4px 4px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--card);
font-size: var(--fs-small);
font-weight: 600;
}
.works-on li.is-text {
padding-inline: 16px;
}
.works-on .gtile {
width: 34px;
height: 34px;
border-radius: 50%;
}
.works-on .fsoc-mark {
width: 20px;
height: 14px;
}
.verdict {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.verdict-col {
padding: 22px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
background: var(--card);
box-shadow: var(--shadow-sm);
}
.verdict-col:last-child {
border-color: var(--accent-line);
}
.verdict-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
font-weight: 700;
}
.verdict-col ul {
margin: 0;
padding-inline-start: 1.1em;
font-size: var(--fs-small);
line-height: 1.5;
}
.verdict-col li + li {
margin-top: 6px;
}
@media (max-width: 640px) {
.verdict {
grid-template-columns: minmax(0, 1fr);
}
}