@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;
}
@font-face{
font-family: "Vazirmatn Label";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/vazirmatn-400-farsi-label-v1.woff2") format("woff2");
unicode-range: U+0627, U+0631, U+0633, U+0641, U+06CC;
}
: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;}
.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);}
.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 .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);}
: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;}
.note{font-size: var(--fs-micro);
line-height: 1.6;
margin-top: 16px;}
.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);}
.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);}
.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);}
.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;}
.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;}
.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;}
.faq details{border-bottom: 1px solid var(--line);}
.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 summary::-webkit-details-marker{display: none;}
.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 details[open] summary::after{transform: rotate(45deg);}
.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;}
.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);}
.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;}
.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;}
.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;}
}
.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);
}
}
ul,ol){margin-top: var(--space-5);}
.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);}
.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,.film-sound{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],.film-sound[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,.film-sound strong,.film-sound small{display: block;}
.film-start strong,.film-sound strong{font-size: 1.05rem;}
.film-start small,.film-sound small{margin-top: 4px;
color: var(--night-dim);
font-size: 0.8rem;}
.film-start:hover .film-play-icon,.film-sound:hover .film-play-icon{background: var(--night-dim);}
.film-start:focus-visible,.film-sound: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-sound):not([hidden]))::after{content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 56%, color-mix(in srgb, var(--night-paper) 94%, transparent) 75%, var(--night-paper) 84%);}
.ms-nudge{width: min(440px, calc(100vw - 32px));
max-width: none;
max-height: calc(100dvh - 32px);
margin: auto;
padding: 0;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
color: var(--ink);
box-shadow: var(--shadow-lg);
overflow: auto;
overscroll-behavior: contain;}
.ms-nudge::backdrop{background: oklch(0.18 0.015 158 / 0.55);}
.ms-nudge-box{position: relative;
display: grid;
justify-items: start;
gap: 14px;
padding: 28px;}
.ms-nudge .gtile{width: 48px;
height: 48px;
border-radius: 14px;}
.ms-nudge .gtile .g{width: 26px;
height: 26px;}
.ms-nudge-title{font-size: 1.5rem;
line-height: 1.15;
letter-spacing: -0.025em;
padding-inline-end: 36px;}
.ms-nudge-close{position: absolute;
inset-block-start: 12px;
inset-inline-end: 12px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink-2);
cursor: pointer;}
.ms-nudge-close:hover{background: var(--sunk);
color: var(--ink);}
.ms-nudge-close:focus-visible{outline-offset: 0;
border-radius: 999px;}
@media (max-width: 420px){
.ms-nudge-box{padding: 24px 20px 20px;}
.ms-nudge-title{font-size: 1.3rem;}
}
@media (prefers-reduced-motion: no-preference){
.ms-nudge[open]{animation: ms-nudge-in 0.18s var(--easing);}
.ms-nudge[open]::backdrop{animation: ms-nudge-fade 0.18s ease-out;}
}
@keyframes ms-nudge-in{
from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes ms-nudge-fade{
from { opacity: 0; }
}
.play-qr{width: min(600px, calc(100vw - 32px));}
.play-qr-title:focus{outline: none;}
.play-qr-body{display: grid;
grid-template-columns: 246px 1fr;
align-items: center;
gap: 16px 22px;
width: 100%;}
.play-qr-code{width: 246px;
height: 246px;
padding: 6px;
border-radius: 16px;
border: 1px solid var(--line);
background: #fff;}
.play-qr-code img{display: block;
width: 100%;
height: 100%;}
.play-qr-text{display: grid;
gap: 10px;}
.play-qr-scan{margin: 0;
color: var(--ink);
font-size: 1rem;
line-height: 1.5;
font-weight: 600;}
.play-qr-after{margin: 0;
color: var(--ink-2);
font-size: var(--fs-small);
line-height: 1.55;}
.play-qr-here{width: 100%;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: var(--fs-small);
color: var(--ink-2);}
.play-qr-here a{color: var(--accent-ink);}
@media (max-width: 660px){
.play-qr-body{grid-template-columns: 1fr;
justify-items: start;}
}
@media (prefers-reduced-motion: no-preference){
.hero > div:first-child{animation: arrive 0.8s var(--easing) both;}
.button:hover,.pill:hover{transform: translateY(-2px);
box-shadow: var(--shadow);}
.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()){
@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;}
}
@media (max-width: 860px){
:root{--header-h: 60px;}
.site-nav > a.hide-narrow{display: none;}
.hero{grid-template-columns: minmax(0, 1fr);
min-height: 0;}
.section-head{grid-template-columns: minmax(0, 1fr);}
.split,.plans{grid-template-columns: minmax(0, 1fr);}
.per{min-height: 0;}
.film-footer{padding: 14px 18px;}
.film-footer{flex-direction: column;
gap: 4px;}
}
@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;}
.hero h1{font-size: clamp(2.9rem, 13.5vw, 4.2rem);}
.plan{padding: 26px;}
}
@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;}
}
@media print{
.site-header,.site-footer{display: none;}
.site-header{position: static;}
.section{padding: 24px 0;}
.phone{max-width: 150px;}
body{background: white;
color: black;}
}
.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;}
h1,h2{text-wrap: balance;}
.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;}
}
.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);}
.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);}
: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);}
.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;}
.dl-foot{align-items: center;}
.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;}
}
.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;}
.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);}
@media (max-width: 640px){
.get{font-size: 0.86rem;
min-height: 42px;
padding-inline-end: 13px;}
.get .gtile{width: 30px;
height: 30px;}
}
@media (prefers-reduced-motion: no-preference){
.get:not(.is-soon):hover{transform: translateY(-1px);}
}
: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);}
.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;}
.pwall-wrap{margin-top: clamp(36px, 5vw, 56px);}
.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-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;}
.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-ok{grid-row: 1;
grid-column: 2;
justify-self: end;}
.pw-text{grid-column: 1 / -1;}
}
.dl-panel{width: 360px;}
.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;}
.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);}
@media (prefers-reduced-motion: no-preference){
@keyframes dl-spin{
to {
transform: rotate(360deg);
}
}
}
: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);}
}
.dl-title,.dl-list small,.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;}
@media (forced-colors: active){
.poster{border: 1px solid CanvasText;}
}
@media (max-width: 360px){
.pill{letter-spacing: 0.08em;
font-size: 0.75rem;}
}
@media (min-width: 960px){
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 .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;}
html:not([lang="es"]) main [lang="es"]:not(a){font-style: italic;}
.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 a[lang="fa"][href="/fa"]{font-family: "Vazirmatn Label", 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;}
}
.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;}
}
.answer{max-width: 68ch;
margin: 28px 0 0;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);}
.answer p{margin: 0;}
.gtile.is-player{--t: var(--tint-web);}
.pp{display: grid;
gap: 12px;
margin: 20px 0 0;
padding: 0;
list-style: none;}
.pp li{display: grid;
grid-template-columns: var(--pp-col, 124px) minmax(0, 1fr);
align-items: center;
gap: 14px;
font-size: 1.0625rem;
line-height: 1.4;
color: var(--ink-2);}
.pp strong{color: var(--ink);
font-weight: 750;}
.pp a{color: inherit;
text-decoration: none;}
.pp a:hover strong{text-decoration: underline;}
.pp-key{display: flex;
justify-content: flex-end;
gap: 4px;}
.pp-key kbd{display: inline-grid;
place-items: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid var(--line);
border-bottom-width: 3px;
border-radius: 9px;
background: var(--card);
color: var(--ink);
font: 700 0.95rem / 1 var(--mono);
box-shadow: var(--shadow-sm);}
.pp-click{display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent-soft);
border: 1px solid var(--accent-line);
color: var(--ink);}
.pp-pointer{display: block;}
.pp-key kbd{white-space: nowrap;}
@media (max-width: 760px){
.pp{--pp-col: 92px;}
.pp li{gap: 12px;
font-size: 1rem;}
.pp-key{gap: 3px;}
.pp-key kbd{min-width: 28px;
height: 30px;
padding: 0 6px;
font-size: 0.85rem;}
.pp-click{width: 30px;
height: 30px;}
}
.so{position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--shadow-sm);
transition: border-color 0.2s, transform 0.2s var(--easing);}
.so:hover{border-color: var(--accent-line);}
.so h3{margin: 0;
font-size: 1.25rem;
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.25;}
.so h3 a{color: var(--ink);
text-decoration: none;}
.so h3 a::after{content: "";
position: absolute;
inset: 0;
border-radius: inherit;}
.so h3 a:focus-visible{outline: none;}
.so:has(h3 a:focus-visible){outline: 3px solid var(--accent);
outline-offset: 3px;}
.so:hover h3 a{text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;}
@media (prefers-reduced-motion: reduce){
.so{transition: none;}
}
.site-header{flex-wrap: wrap;}
.site-header > .logo{flex-shrink: 0;}
.site-nav{flex-wrap: wrap;
justify-content: flex-end;
min-width: 0;}
.dl-menu:not([open]) > .dl-panel{display: none;}
@media (max-width: 360px){
.site-header{gap: 6px;}
.site-nav > a.pill{margin-inline-start: 2px;
padding-inline: 8px;
letter-spacing: 0.04em;}
.site-header .logo{gap: 6px;}
.container.site-header{padding-inline: 10px;}
.site-nav{gap: 2px;}
.site-nav > a:not(.pill),.dl-menu > summary{padding-inline: 7px;}
}
.dl-panel{max-width: calc(100vw - 24px);
overflow-wrap: anywhere;}
.flist,.flist a,.a-spot-links,.a-spot-links a{overflow-wrap: anywhere;}
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/instrument-serif-italic-latin-v1.woff2") format("woff2");
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--paper: oklch(0.145 0.018 158);
--card: oklch(0.205 0.018 158);
--sunk: oklch(0.125 0.015 158);
--ink: oklch(0.97 0.008 120);
--ink-2: oklch(0.86 0.018 140);
--dim: oklch(0.76 0.022 150);
--accent: oklch(0.78 0.11 150);
--accent-ink: #d5ebb1;
--on-accent: #10200f;
--accent-soft: oklch(0.78 0.11 150 / 0.13);
--accent-line: oklch(0.85 0.1 130 / 0.35);
--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(1 0 0 / 0.11);
--line-soft: oklch(1 0 0 / 0.07);
--rule: oklch(1 0 0 / 0.09);
--frame: #050504;
--frame-ring: oklch(1 0 0 / 0.14);
--glass: oklch(0.17 0.02 158 / 0.62);
--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);
--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);
--logo-tile: oklch(0.25 0.012 158);
--logo-ink: #fff;
--logo-edge: oklch(1 0 0 / 0.12);
--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);
}
}
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--pad-item: 16px 20px;
--pad-card: clamp(24px, 1.2rem + 1.2vw, 32px);
--pad-panel: clamp(24px, 0.8rem + 3.6vw, 56px);
--gap-grid: clamp(12px, 0.5rem + 0.85vw, 20px);
--gap-list: 12px;
--sec-y: clamp(56px, 6.5vw, 96px);
--head-gap: clamp(32px, 4vw, 56px);
--spot-gap: clamp(56px, 6.5vw, 96px);
--a-media: 1000px;
--r-sm: 12px;
--r-btn: 16px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 36px;
--r-pill: 999px;
--a-card-top: oklch(0.24 0.028 156);
--a-card-bot: oklch(0.18 0.02 158);
--a-veil: oklch(1 0 0 / 0.035);
--a-veil-2: oklch(1 0 0 / 0.07);
--a-depth: #000;
--a-on-lime: #10200f;
--a-primary: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime) 60%, #c3e09a);
--a-em: linear-gradient(100deg, var(--a-lime-hi), oklch(0.8 0.16 145));
--a-h1: linear-gradient(180deg, #fff 20%, oklch(0.86 0.04 140) 100%);
--a-chip-bg: oklch(0.24 0.03 158 / 0.9);
--a-tile: oklch(0.28 0.04 155);
--a-ground: oklch(0.145 0.018 158);
--a-lime: #d5ebb1;
--a-lime-hi: #e8f6cf;
--a-coral: oklch(0.78 0.12 38);
--a-ink-3: oklch(0.76 0.022 150);
--a-line-2: oklch(1 0 0 / 0.16);
--a-glow: oklch(0.8 0.17 140);
--a-r: 28px;
--a-wrap: 1200px;
--a-gut: clamp(16px, 4vw, 40px);
--a-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
--a-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
--header-h: 78px;
}
body {
background: var(--a-ground);
color: var(--ink);
}
html {
scroll-padding-top: 96px;
}
.aurora {
overflow-x: clip;
}
.aurora p {
color: var(--ink-2);
}
.aurora :where(a:not(.button):not(.pw)) {
color: var(--a-lime);
}
.aurora :where(a:not(.button):not(.pw)):hover {
color: var(--a-lime-hi);
}
:focus-visible {
outline: 3px solid var(--a-lime);
outline-offset: 3px;
border-radius: 8px;
}
.aurora h1,
.aurora h2,
.aurora h3 {
color: var(--ink);
}
.aurora h1 em,
.aurora h2 em,
.aurora h3 em,
.aurora h4 em {
font-family: var(--a-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
padding-right: 0.06em;
color: var(--a-lime);
background: var(--a-em);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.a-wrap {
width: min(100% - 2 * var(--a-gut), var(--a-wrap));
margin-inline: auto;
}
.skip-link {
background: var(--a-lime);
color: #10200f;
font-weight: 700;
}
.site-header {
padding-top: 10px;
min-height: var(--header-h);
}
.site-header::before {
inset: 10px max(0px, calc(var(--gutter) - 14px)) 0;
border-radius: 20px;
background: var(--glass);
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 12px 40px -18px #000;
}
@media (prefers-reduced-transparency: reduce) {
.site-header::before {
background: oklch(0.17 0.02 158);
}
}
.site-nav > a:not(.pill) {
color: var(--ink-2);
}
.site-nav > a:not(.pill):hover {
background: oklch(1 0 0 / 0.06);
color: var(--ink);
}
.dl-panel {
background: oklch(0.19 0.022 158);
border-color: var(--a-line-2);
box-shadow: 0 30px 80px -20px #000;
}
.aurora .button,
.site-nav .pill {
font-weight: 650;
transition: transform 0.25s var(--a-ease), box-shadow 0.25s var(--a-ease), background 0.25s;
}
.aurora .button {
min-height: 56px;
padding: 0 26px;
border-radius: 16px;
font-size: 1.0625rem;
}
.aurora .primary,
.site-nav .pill {
color: #0f200e;
border-color: transparent;
background: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime) 60%, #c3e09a);
box-shadow: inset 0 1px 0 #fff8, 0 0 0 1px oklch(0.9 0.1 130 / 0.5), 0 10px 40px -8px oklch(0.8 0.17 140 / 0.6);
}
.site-nav .pill {
box-shadow: 0 0 24px -6px oklch(0.85 0.12 130 / 0.6);
}
.aurora .primary:hover,
.site-nav .pill:hover {
color: #0f200e;
background: linear-gradient(180deg, #f2fbe2, var(--a-lime-hi) 60%, var(--a-lime));
}
.aurora .primary:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 #fff8, 0 0 0 1px oklch(0.9 0.1 130 / 0.6), 0 16px 50px -8px oklch(0.8 0.17 140 / 0.8);
}
.aurora .secondary {
color: var(--ink);
background: oklch(1 0 0 / 0.06);
border: 1px solid var(--a-line-2);
box-shadow: none;
}
.aurora .secondary:hover {
background: oklch(1 0 0 / 0.11);
transform: translateY(-2px);
}
.a-ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.a-hero {
position: relative;
isolation: isolate;
overflow: clip;
margin-top: calc(-1 * var(--header-h));
padding-top: var(--header-h);
background: radial-gradient(120% 70% at 50% 0%, oklch(0.22 0.04 155), var(--a-ground) 70%);
}
.a-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.05;
background: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 128px 128px;
}
.a-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 160px;
z-index: 4;
pointer-events: none;
background: linear-gradient(180deg, transparent, var(--a-ground));
}
.a-sky {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.a-blob {
position: absolute;
border-radius: 50%;
}
.a-b1 { width: 70vmax; height: 50vmax; left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, oklch(0.5 0.13 150 / 0.7), oklch(0.38 0.09 155 / 0.22) 55%, transparent); }
.a-b2 { width: 60vmax; height: 46vmax; right: -16vmax; top: -16vmax; background: radial-gradient(closest-side, oklch(0.68 0.14 128 / 0.42), oklch(0.45 0.11 140 / 0.16) 55%, transparent); }
.a-b3 { width: 46vmax; height: 34vmax; left: 30%; top: 8vmax; background: radial-gradient(closest-side, oklch(0.55 0.11 190 / 0.3), transparent 70%); }
.a-b4 { width: 40vmax; height: 30vmax; right: 8%; top: 14vmax; background: radial-gradient(closest-side, oklch(0.62 0.12 40 / 0.2), transparent 70%); }
.a-beam {
position: absolute;
left: 50%;
top: -10%;
width: 140%;
height: 120%;
transform: translateX(-50%);
background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, oklch(0.92 0.08 130 / 0.12) 176deg, oklch(0.98 0.05 120 / 0.22) 180deg, oklch(0.92 0.08 130 / 0.12) 184deg, transparent 198deg);
-webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 75%);
mask-image: linear-gradient(180deg, #000 10%, transparent 75%);
}
.a-beam.is-up {
top: auto;
bottom: -10%;
transform: translateX(-50%) rotate(180deg);
}
.a-stars {
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 12% 22%, #fff9, transparent), radial-gradient(1px 1px at 28% 64%, #fff6, transparent),
radial-gradient(1.5px 1.5px at 44% 14%, #fffa, transparent), radial-gradient(1px 1px at 63% 38%, #fff7, transparent),
radial-gradient(1px 1px at 79% 18%, #fff8, transparent), radial-gradient(1.5px 1.5px at 88% 52%, #fff6, transparent),
radial-gradient(1px 1px at 7% 78%, #fff5, transparent), radial-gradient(1px 1px at 54% 82%, #fff4, transparent);
-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.a-hero-copy {
position: relative;
z-index: 3;
max-width: 1000px;
margin: 0 auto;
padding: clamp(24px, 4vh, 56px) var(--a-gut) 0;
text-align: center;
}
.a-news {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 4px 14px 4px 5px;
border-radius: 99px;
font-size: 0.875rem;
font-weight: 550;
text-decoration: none;
background: oklch(0.24 0.03 156 / 0.85);
border: 1px solid var(--a-line-2);
box-shadow: 0 0 30px -10px oklch(0.8 0.15 140 / 0.6);
}
.aurora .a-news {
color: var(--ink);
}
.aurora .a-news:hover {
color: #fff;
border-color: var(--accent-line);
text-decoration: none;
}
.a-news b {
padding: 3px 10px;
border-radius: 99px;
background: var(--a-lime);
color: #11220f;
font-size: 0.75rem;
font-weight: 700;
}
.a-hero h1 {
margin-top: 24px;
font-size: clamp(48px, 7vw, 104px);
font-weight: 800;
line-height: 0.93;
letter-spacing: -0.055em;
}
.a-h1-a {
display: block;
background: var(--a-h1);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.aurora .a-h1-b {
display: block;
padding: 0 0.06em 0.08em;
font-size: 1.08em;
line-height: 0.95;
letter-spacing: -0.03em;
background: linear-gradient(100deg, var(--a-lime-hi) 0%, var(--a-lime) 35%, oklch(0.82 0.16 145) 70%, var(--a-lime-hi) 100%);
-webkit-background-clip: text;
background-clip: text;
}
.aurora .a-lede {
max-width: 700px;
margin: 20px auto 0;
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.5;
color: var(--ink-2);
}
.a-hero .a-ctas {
margin-top: 24px;
}
.aurora .a-trust {
margin-top: 12px;
font-size: 0.875rem;
color: var(--a-ink-3);
}
.a-stage {
position: relative;
z-index: 2;
height: clamp(400px, 40vw, 580px);
margin-top: clamp(20px, 3vh, 32px);
}
.a-horizon {
position: absolute;
left: 50%;
bottom: 6%;
width: min(1600px, 150vw);
height: 60%;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(closest-side, oklch(0.78 0.16 140 / 0.42), oklch(0.6 0.14 150 / 0.16) 45%, oklch(0.5 0.1 150 / 0.05) 70%, transparent);
}
.a-horizon::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: 46%;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, oklch(0.95 0.08 130 / 0.8), transparent);
box-shadow: 0 0 30px 6px oklch(0.85 0.15 135 / 0.4);
}
.a-phones {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: flex-start;
transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0);
transition: transform 0.6s var(--a-ease);
}
.a-phone {
position: relative;
margin: 0;
padding: 6px;
border-radius: 44px;
background: linear-gradient(155deg, oklch(0.4 0.035 150), oklch(0.15 0.015 158) 40%, oklch(0.24 0.025 155));
box-shadow:
inset 0 0 0 1px oklch(1 0 0 / 0.16),
0 0 0 1px oklch(0 0 0 / 0.6),
0 0 60px -8px oklch(0.75 0.16 145 / 0.4),
0 50px 90px -30px #000;
}
.a-phone img {
width: 100%;
height: auto;
border-radius: 38px;
}
.a-p-main {
z-index: 3;
flex: none;
width: clamp(236px, 21.5vw, 310px);
}
.a-p-side {
z-index: 2;
flex: none;
width: clamp(188px, 17vw, 250px);
margin-top: 64px;
scale: 0.94;
}
.a-p-left {
margin-right: -40px;
transform-origin: right top;
}
.a-p-right {
margin-left: -40px;
transform-origin: left top;
}
.a-chips {
position: absolute;
inset: 0;
max-width: 1600px;
margin-inline: auto;
z-index: 4;
pointer-events: none;
transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 14px), 0);
transition: transform 0.6s var(--a-ease);
}
.a-chip {
position: absolute;
padding: 10px 18px;
border-radius: 16px;
white-space: nowrap;
font: 600 clamp(15px, 1.3vw, 19px) / 1.2 var(--sans);
letter-spacing: -0.01em;
color: var(--ink);
background: oklch(0.24 0.03 158 / 0.9);
border: 1px solid oklch(0.9 0.1 130 / 0.26);
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), 0 0 30px -8px oklch(0.8 0.17 140 / 0.5), 0 18px 40px -16px #000;
}
.a-chip[lang="fa"] {
font-family: var(--fa);
}
.a-c1 { left: 7%; top: 8%; }
.a-c2 { right: 8%; top: 3%; color: var(--a-lime); }
.a-c3 { left: 3%; top: 42%; }
.a-c4 { right: 4%; top: 36%; color: #ffd9c7; border-color: oklch(0.8 0.12 40 / 0.4); }
.a-c5 { left: 12%; top: 70%; }
.a-c6 { right: 11%; top: 66%; }
.a-updated {
white-space: nowrap;
text-decoration: underline;
text-decoration-color: oklch(0.85 0.1 130 / 0.4);
}
.aurora .a-note {
position: absolute;
z-index: 5;
top: 6px;
left: calc(50% + clamp(236px, 21.5vw, 310px) / 2 + 46px);
width: 23ch;
font: italic 400 clamp(17px, 1.35vw, 20px) / 1.2 var(--a-serif);
color: var(--a-lime);
}
.a-note-arrow {
position: absolute;
top: 8px;
left: -44px;
color: var(--a-lime);
}
.a-river {
position: relative;
padding: 22px 0 32px;
background: linear-gradient(180deg, oklch(0.16 0.02 158 / 0), oklch(0.17 0.02 158) 40%, var(--a-ground));
}
.a-river-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 24px;
margin: 0 auto 16px;
padding-inline: var(--a-gut);
}
.aurora .a-river-head p {
color: var(--ink-2);
font-size: 1.0625rem;
}
.a-river-head b {
color: var(--ink);
font-weight: 650;
}
.a-river-track {
display: flex;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.a-river-row {
flex: none;
display: flex;
gap: 14px;
padding-right: 14px;
}
.a-river-row span {
flex: none;
padding: 8px 18px;
border-radius: 99px;
font-size: 17px;
font-weight: 550;
color: var(--ink-2);
border: 1px solid var(--line);
background: oklch(1 0 0 / 0.03);
white-space: nowrap;
}
.a-river-row span:nth-child(3n) {
color: var(--a-lime);
border-color: oklch(0.85 0.1 130 / 0.25);
}
.a-river-row span:nth-child(4n) {
font-family: var(--a-serif);
font-style: italic;
font-size: 20px;
font-weight: 400;
}
.a-river-row span[lang="fa"],
.a-river-row span[lang="ar"] {
font-family: var(--fa);
font-style: normal;
font-size: 17px;
}
.motion-off,
.motion-toggle {
display: none;
}
.motion-toggle {
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--a-line-2);
color: var(--ink);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
background: oklch(1 0 0 / 0.04);
}
.motion-toggle:hover {
background: oklch(1 0 0 / 0.08);
}
.knob {
position: relative;
width: 34px;
height: 20px;
border-radius: 999px;
background: oklch(1 0 0 / 0.22);
transition: background 0.2s;
}
.knob::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--ink);
transition: transform 0.2s var(--a-ease);
}
.motion-off:checked + .motion-toggle .knob {
background: var(--a-lime);
}
.motion-off:checked + .motion-toggle .knob::after {
transform: translateX(14px);
background: #10200f;
}
.motion-off:focus-visible + .motion-toggle {
outline: 3px solid var(--a-lime);
outline-offset: 3px;
}
.a-after {
position: relative;
}
.a-sec {
position: relative;
padding-block: var(--sec-y);
}
.a-head {
max-width: 780px;
margin-bottom: var(--head-gap);
}
.a-head.is-center {
margin-inline: auto;
text-align: center;
}
.a-head h2,
.aurora .faq h2,
.a-pricing h2,
.a-close h2 {
font-size: clamp(38px, 4.8vw, 66px);
font-weight: 750;
letter-spacing: -0.045em;
line-height: 0.98;
}
.aurora .a-head > p:not(.a-kicker) {
margin-top: 20px;
font-size: clamp(17px, 1.6vw, 20px);
color: var(--ink-2);
}
.a-head.is-center > p:not(.a-kicker) {
max-width: 46ch;
margin-inline: auto;
}
.aurora .a-kicker {
display: inline-block;
margin-bottom: 18px;
padding: 6px 14px;
border-radius: 99px;
font-size: 0.875rem;
font-weight: 600;
color: var(--a-lime);
background: oklch(0.5 0.11 150 / 0.18);
border: 1px solid oklch(0.85 0.1 130 / 0.22);
}
.a-link {
font-weight: 600;
text-decoration: none;
}
.a-link:hover {
text-decoration: underline;
}
.a-center-cta {
display: flex;
justify-content: center;
margin-top: var(--sp-7);
}
.a-card,
.a-step {
position: relative;
border-radius: var(--r-lg);
background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 var(--a-veil-2), 0 30px 60px -40px var(--a-depth);
}
.a-card::before,
.a-step::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), oklch(0.8 0.15 140 / 0.1), transparent 60%);
}
.a-card:hover::before,
.a-step:hover::before {
opacity: 1;
}
.a-dots {
display: inline-flex;
gap: 7px;
}
.a-dots i {
width: 11px;
height: 11px;
border-radius: 50%;
background: oklch(1 0 0 / 0.16);
}
.a-screen {
position: relative;
max-width: var(--a-media);
margin: 0 auto;
padding: 10px;
border-radius: var(--r-xl);
background: linear-gradient(170deg, oklch(0.28 0.035 152), oklch(0.17 0.02 158));
border: 1px solid var(--a-line-2);
box-shadow: 0 0 0 1px #000, 0 0 120px -30px oklch(0.75 0.16 145 / 0.55), 0 60px 120px -50px #000;
}
.a-screen-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 10px 12px;
font-size: 0.8125rem;
color: var(--a-ink-3);
}
.a-screen .film-screen {
position: relative;
overflow: hidden;
border-radius: 26px;
background: #000;
}
.a-screen video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: #000;
}
.a-screen .film-start,
.a-screen .film-sound {
position: absolute;
inset: auto auto 20px 20px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 20px 8px 8px;
border: 1px solid var(--a-line-2);
border-radius: 999px;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
background: oklch(0.16 0.02 158 / 0.88);
box-shadow: 0 20px 50px -20px #000;
transform: none;
}
.a-screen .film-start[hidden],
.a-screen .film-sound[hidden] {
display: none;
}
.a-screen .film-play-icon {
display: grid;
place-items: center;
flex: none;
width: 60px;
height: 60px;
margin: 0;
border-radius: 50%;
color: #10200f;
background: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime));
box-shadow: 0 0 0 8px oklch(0.85 0.12 135 / 0.16), 0 0 50px oklch(0.8 0.17 140 / 0.6);
font-size: 0;
transition: transform 0.3s var(--a-ease);
}
.a-screen .film-play-icon svg {
fill: currentColor;
}
.a-screen .film-start .film-play-icon svg {
margin-left: 3px;
}
.a-screen .film-start:hover .film-play-icon,
.a-screen .film-sound:hover .film-play-icon {
transform: scale(1.06);
}
.a-screen .film-start strong,
.a-screen .film-sound strong {
display: block;
font-size: 1.0625rem;
color: var(--ink);
}
.a-screen .film-start small,
.a-screen .film-sound small {
display: block;
font-size: 0.8125rem;
color: var(--ink-2);
}
.a-screen .film-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 16px;
padding: 12px 10px 4px;
font-size: 0.875rem;
color: var(--a-ink-3);
}
.a-screen .film-status {
padding: 10px;
color: var(--ink-2);
}
.aurora .film-more {
max-width: var(--a-media);
margin: 18px auto 0;
font-size: 0.9375rem;
color: var(--a-ink-3);
}
.aurora .film-more a {
color: var(--ink-2);
font-weight: 550;
}
.aurora .film-more + .film-transcript {
margin-top: 4px;
}
.aurora .film-transcript {
max-width: var(--a-media);
margin: 18px auto 0;
font-size: 0.9375rem;
}
.aurora .film-transcript summary,
.aurora .film-transcript summary * {
color: var(--ink-2);
}
.aurora .film-transcript summary {
width: fit-content;
min-height: 44px;
display: flex;
align-items: center;
color: var(--ink-2);
font-weight: 550;
}
.aurora .film-transcript p {
margin-top: 8px;
max-width: 70ch;
color: var(--a-ink-3);
}
.a-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-grid);
}
.a-step {
display: flex;
flex-direction: column;
padding: var(--pad-card);
}
.a-num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: var(--r-btn);
font: italic 400 30px / 1 var(--a-serif);
color: var(--a-on-lime);
background: linear-gradient(160deg, var(--a-lime-hi), var(--a-lime));
box-shadow: 0 0 30px -4px oklch(0.85 0.15 135 / 0.6);
}
.a-step h3 {
margin-top: var(--sp-5);
font-size: 1.625rem;
letter-spacing: -0.03em;
}
.aurora .a-step p {
margin-top: var(--sp-3);
font-size: 1rem;
}
.a-browser {
margin: 0;
overflow: hidden;
border-radius: var(--r-md);
border: 1px solid var(--a-line-2);
background: oklch(0.2 0.02 158);
box-shadow: 0 0 0 1px #000, 0 0 140px -40px oklch(0.75 0.16 145 / 0.5), 0 60px 120px -50px #000;
}
.a-browser-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
}
.a-url {
flex: 1;
max-width: 420px;
margin-inline: auto;
padding: 5px 14px;
border-radius: 10px;
text-align: center;
font-size: 0.8125rem;
color: var(--a-ink-3);
background: oklch(1 0 0 / 0.05);
}
.a-browser img {
width: 100%;
}
@media (max-width: 760px) {
#ways .a-spot-note {
display: none;
}
}
.a-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-list);
}
.aurora .a-store {
min-height: 48px;
padding: 0 20px 0 16px;
gap: 10px;
font-size: 1rem;
border-radius: var(--r-btn);
}
.a-store img {
flex: none;
width: 22px;
height: 22px;
}
.a-boxes {
grid-column: 1 / -1;
margin-top: var(--sp-8);
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: var(--sp-7);
align-items: start;
padding: var(--pad-panel);
border-radius: var(--r-xl);
border: 1px solid var(--line);
background:
radial-gradient(80% 120% at 100% 100%, oklch(0.45 0.12 145 / 0.28), transparent 60%),
linear-gradient(170deg, oklch(0.23 0.03 156), oklch(0.16 0.02 158));
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07), 0 40px 100px -50px #000;
}
.a-boxes :is(h3, h4) {
margin-top: -0.08em;
}
.a-boxes :is(h3, h4) {
font-size: clamp(30px, 3.6vw, 48px);
letter-spacing: -0.04em;
line-height: 1.02;
}
.aurora .a-boxes :is(h3, h4) + p {
margin-top: 18px;
}
.a-ladder-wrap {
position: relative;
padding-top: clamp(90px, 9vw, 124px);
}
.a-curve {
position: absolute;
inset: 0 0 auto;
width: 100%;
height: clamp(80px, 9vw, 120px);
overflow: visible;
}
.a-ladder {
list-style: none;
margin: 0;
padding: 0;
height: clamp(250px, 22vw, 300px);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(8px, 1.2vw, 16px);
align-items: end;
}
.a-ladder li {
position: relative;
height: var(--h);
min-height: 92px;
display: flex;
flex-direction: column;
padding: 16px 12px;
border-radius: 16px 16px 6px 6px;
background: linear-gradient(180deg, oklch(0.5 0.12 148 / 0.8), oklch(0.32 0.07 152 / 0.55) 60%, oklch(0.22 0.03 156 / 0.35));
border: 1px solid oklch(0.85 0.12 135 / 0.35);
border-bottom: 0;
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 -10px 40px -14px oklch(0.8 0.17 140 / 0.5);
}
.a-ladder li.is-top {
background: linear-gradient(180deg, var(--a-lime-hi), oklch(0.75 0.15 140 / 0.9) 40%, oklch(0.35 0.08 150 / 0.45));
box-shadow: inset 0 1px 0 #fff, 0 -10px 60px -10px oklch(0.85 0.17 135 / 0.7);
}
.a-ladder small {
font-size: 0.8125rem;
font-weight: 550;
color: var(--ink-2);
}
.a-ladder b {
margin-top: 2px;
white-space: nowrap;
font-size: clamp(14px, 3.8vw, 22px);
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.a-ladder li.is-top small,
.a-ladder li.is-top b {
color: #10200f;
}
.a-ladder-notes {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 16px;
margin-top: 14px;
}
.a-ladder-notes .n-up {
order: 2;
font-size: 0.875rem;
color: var(--a-ink-3);
}
.a-ladder-notes .n-back {
display: inline-flex;
align-items: center;
gap: 8px;
font: italic 400 18px / 1.2 var(--a-serif);
color: var(--a-coral);
}
.aurora .a-after-ladder {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 0.875rem;
color: var(--a-ink-3);
}
.a-after-ladder span {
padding: 3px 10px;
border-radius: 99px;
border: 1px solid oklch(0.85 0.1 130 / 0.3);
color: var(--a-lime);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.a-tag {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 99px;
font: 600 0.75rem / 1.45 var(--sans);
letter-spacing: 0;
}
.a-tag.is-pro {
color: var(--a-lime);
background: oklch(0.45 0.1 140 / 0.3);
border: 1px solid oklch(0.85 0.1 130 / 0.35);
}
.a-tag.is-free {
color: #bfe6ff;
background: oklch(0.45 0.08 230 / 0.3);
border: 1px solid oklch(0.8 0.08 230 / 0.35);
}
.a-prompts {
list-style: none;
margin: 0 0 var(--sp-4);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.a-prompts li {
padding: 12px 18px;
border-radius: 999px;
font-size: clamp(16px, 1.4vw, 18px);
font-weight: 600;
color: var(--ink);
background: oklch(0.3 0.045 230 / 0.55);
border: 1px solid oklch(0.8 0.08 230 / 0.25);
}
.a-chat-shot {
margin: 0 auto;
width: 100%;
max-width: 845px;
aspect-ratio: 845 / 252;
overflow: hidden;
border-radius: var(--r-md);
border: 1px solid var(--a-line-2);
background: #000;
box-shadow: 0 0 60px -14px oklch(0.6 0.1 230 / 0.45), 0 30px 60px -30px var(--a-depth);
}
.a-chat-shot img {
width: 100%;
max-width: 845px;
}
.a-spot-list {
display: grid;
gap: var(--spot-gap);
}
.a-spot {
--spot-phone: clamp(220px, 21vw, 300px);
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--sp-7) clamp(32px, 5vw, 72px);
align-items: center;
}
.a-spot.is-flip {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.a-spot.is-flip > .a-spot-copy {
order: 2;
}
.aurora .a-spot-label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font: 650 15px / 1.3 var(--sans);
color: var(--a-lime);
}
.aurora .a-spot h3 {
margin-top: var(--sp-4);
font-size: clamp(34px, 4.2vw, 60px);
font-weight: 750;
letter-spacing: -0.045em;
line-height: 1;
}
.aurora .a-spot-promise {
margin-top: var(--sp-5);
max-width: 34ch;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.45;
color: var(--ink-2);
}
.aurora .a-spot-proof {
display: flex;
align-items: flex-start;
gap: 10px;
max-width: 44ch;
margin-top: var(--sp-4);
font-size: 15px;
color: var(--a-ink-3);
}
.a-spot-proof svg {
flex: none;
margin-top: 3px;
color: var(--a-lime);
}
.aurora .a-spot-links {
margin-top: var(--sp-3);
font-size: 1rem;
}
.a-spot-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 600;
}
.a-spot-stage {
--spot-glow: oklch(0.6 0.15 140 / 0.45);
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-4);
min-width: 0;
padding: var(--pad-panel) var(--pad-panel) 0;
overflow: hidden;
border-radius: var(--r-xl);
border: 1px solid var(--line);
background:
radial-gradient(70% 80% at 50% 100%, var(--spot-glow), transparent 70%),
linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
box-shadow: inset 0 1px 0 var(--a-veil-2), 0 40px 100px -50px var(--a-depth);
}
.is-lime > .a-spot-stage { --spot-glow: oklch(0.6 0.15 140 / 0.45); }
.is-teal > .a-spot-stage { --spot-glow: oklch(0.55 0.1 190 / 0.45); }
.is-green > .a-spot-stage { --spot-glow: oklch(0.5 0.13 150 / 0.5); }
.a-spot-stage > .a-phone {
flex: none;
}
.a-spot-stage .a-phone {
width: var(--spot-phone);
}
.a-spot-row {
display: flex;
justify-content: center;
align-items: flex-start;
height: calc(var(--spot-phone) * 1.36);
overflow: hidden;
}
.a-phone.is-back {
margin-top: var(--sp-8);
margin-inline-end: -48px;
scale: 0.94;
transform-origin: top;
}
.a-phone.is-lex {
overflow: hidden;
}
.a-phone.is-lex img {
margin-top: -70%;
}
.aurora .a-spot-note {
font: italic 400 clamp(17px, 1.35vw, 20px) / 1.2 var(--a-serif);
color: var(--a-lime);
text-align: center;
}
.a-spot.is-wide {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: end;
}
.a-spot.is-wide > .a-spot-stage {
grid-column: 1 / -1;
padding-bottom: var(--pad-panel);
}
.a-spot.is-wide .a-browser,
.a-spot.is-wide .a-desk {
width: 100%;
max-width: 960px;
margin-inline: auto;
}
.a-spot-side {
justify-self: end;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--sp-2);
}
.a-spot-side .a-prompts {
justify-content: flex-end;
margin: 0;
}
.aurora .a-spot-note.is-top {
text-align: end;
padding-inline-end: 18%;
}
.a-desk {
display: grid;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: var(--sp-6);
align-items: center;
margin-top: var(--sp-5);
}
.a-desk-card {
width: 100%;
max-width: 240px;
height: auto;
border-radius: 14px;
box-shadow: var(--shadow-lg);
}
.aurora .a-desk-copy > p:last-child {
margin-top: var(--sp-4);
max-width: 40ch;
font-size: 1.0625rem;
}
.a-keys {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4) var(--sp-6);
margin: 0;
}
.a-keyset {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.aurora .a-keys kbd {
display: inline-grid;
place-items: center;
min-width: 56px;
min-height: 56px;
padding: 0 16px;
border-radius: var(--r-sm);
border: 1px solid var(--a-line-2);
background: var(--a-veil);
box-shadow: inset 0 -3px 0 var(--a-line-2);
font: 650 22px / 1 var(--sans);
color: var(--ink);
}
.a-keyset small {
margin-inline-start: var(--sp-1);
font-size: 0.875rem;
color: var(--a-ink-3);
}
.a-spot.is-practice > .a-boxes,
.a-spot.is-practice > .a-also-line {
grid-column: 1 / -1;
}
.a-spot.is-practice > .a-boxes {
margin-top: 0;
order: 3;
}
.a-spot.is-practice > .a-also-line {
order: 4;
}
.aurora .a-also-line,
.aurora .a-also {
max-width: 70ch;
font-size: 1.0625rem;
color: var(--ink-2);
}
.aurora .a-also {
margin-top: var(--sp-8);
}
.a-spot.is-chat {
container-type: inline-size;
}
@container (max-width: 760px) {
.is-chat > .a-spot-stage {
display: none;
}
}
.a-devices {
position: relative;
display: grid;
grid-template-columns: minmax(0, 600px) clamp(130px, 19vw, 220px);
justify-content: center;
align-items: end;
margin-bottom: var(--sp-7);
}
.a-devices::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 90%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(closest-side, oklch(0.6 0.15 148 / 0.32), oklch(0.5 0.12 150 / 0.08) 60%, transparent);
}
.a-window {
position: relative;
margin: 0;
width: 100%;
overflow: hidden;
border-radius: var(--r-md);
background: oklch(0.96 0.012 95);
border: 1px solid var(--a-line-2);
box-shadow: 0 0 0 1px var(--a-depth), 0 0 100px -30px oklch(0.75 0.16 145 / 0.55), 0 50px 100px -40px var(--a-depth);
}
.a-window-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: oklch(0.9 0.012 120);
color: #3a4a3e;
font-size: 0.8125rem;
font-weight: 600;
}
.a-window-bar .a-dots i:nth-child(1) { background: #ff5f57; }
.a-window-bar .a-dots i:nth-child(2) { background: #febc2e; }
.a-window-bar .a-dots i:nth-child(3) { background: #28c840; }
.a-window img {
width: 100%;
}
.a-d-phone {
z-index: 2;
width: clamp(130px, 19vw, 220px);
margin-left: calc(clamp(130px, 19vw, 220px) * -0.45);
margin-bottom: 0;
}
.aurora .pwall-wrap {
margin-top: 0;
padding: var(--pad-panel);
border-radius: var(--r-xl);
border: 1px solid var(--line);
background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
}
.aurora .pwall {
gap: var(--gap-list);
grid-auto-rows: 1fr;
}
.aurora .pwall .gtile:not(.is-logo) {
color: var(--a-lime);
background: var(--a-tile);
}
.aurora .pwall-head h3 {
font-size: clamp(24px, 2.6vw, 32px);
}
.aurora .pw {
padding: var(--pad-item);
border-radius: var(--r-md);
border-color: var(--line);
background: var(--a-veil);
transition: background 0.2s, border-color 0.2s, transform 0.25s var(--a-ease);
}
.aurora a.pw:hover {
background: var(--a-veil-2);
border-color: var(--accent-line);
transform: translateY(-2px);
}
.aurora .pw.is-soon {
background: transparent;
}
.aurora .pw-ok {
color: #10200f;
background: var(--a-lime);
}
.aurora .h-wall-more {
display: flex;
justify-content: center;
margin-top: var(--sp-6);
}
.a-pricing {
background: radial-gradient(60% 40% at 50% 30%, oklch(0.32 0.07 150 / 0.35), transparent 70%);
}
.aurora .a-pricing .section-head {
align-items: end;
margin-bottom: var(--head-gap);
}
.aurora .plans {
gap: var(--gap-grid);
grid-template-rows: repeat(6, auto);
row-gap: 0;
}
.aurora .plan {
position: relative;
display: grid;
grid-row: span 6;
grid-template-rows: subgrid;
padding: var(--pad-card);
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
box-shadow: inset 0 1px 0 var(--a-veil-2), 0 30px 60px -40px var(--a-depth);
}
.aurora .plan > .plan-name { grid-row: 1; }
.aurora .plan > .price { grid-row: 2; }
.aurora .plan > .per { grid-row: 3; }
.aurora .plan > .yearly-comparison { grid-row: 4; }
.aurora .plan > .plan-list { grid-row: 5; }
.aurora .plan > .plan-cta { grid-row: 6; align-self: end; }
.aurora .plan-name {
font-size: 1.125rem;
color: var(--ink-2);
}
.aurora .price {
font-size: clamp(52px, 5vw, 68px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
}
.aurora .price small {
font-size: 1.125rem;
font-weight: 600;
color: var(--a-ink-3);
}
.aurora .per {
margin-top: 8px;
color: var(--a-ink-3);
}
.aurora .plan-list {
list-style: none;
padding: 0;
margin-block: 26px 28px;
display: grid;
gap: 12px;
align-content: start;
}
.aurora .plan-list li {
position: relative;
margin: 0;
padding-left: 30px;
font-size: 0.97rem;
color: var(--ink-2);
}
.aurora .plan-list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: oklch(0.5 0.11 150 / 0.35) url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23d5ebb1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.aurora .plan-cta {
width: 100%;
}
.aurora .plan.featured {
padding-top: var(--pad-card);
overflow: visible;
border: 1px solid var(--a-lime);
background: linear-gradient(170deg, oklch(0.26 0.04 152), oklch(0.18 0.022 158));
box-shadow: 0 0 0 1px var(--a-lime), 0 30px 80px -40px oklch(0.8 0.15 140 / 0.5);
}
.aurora .yearly-banner {
position: absolute;
top: -14px;
inset-inline-start: var(--pad-card);
display: inline-flex;
margin: 0;
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--a-lime);
}
.aurora .yearly-banner > span {
margin: 0;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0;
color: var(--a-on-lime);
}
.aurora .yearly-comparison {
margin-top: var(--sp-3);
padding: 0;
border: 0;
}
.aurora .yearly-comparison > span {
margin: 0;
font-size: 0.9375rem;
color: var(--ink-2);
}
.aurora .yearly-comparison > strong {
display: block;
font-size: 1rem;
color: var(--a-lime);
}
.aurora .plan-offer {
gap: var(--gap-grid);
margin-top: var(--gap-grid);
grid-row: 7;
}
.aurora .plan-offer p {
padding: var(--pad-card);
border-radius: var(--r-lg);
font-size: 0.97rem;
}
.aurora .plan-early {
border: 1px solid oklch(0.85 0.1 135 / 0.35);
background: linear-gradient(170deg, oklch(0.26 0.04 152), oklch(0.19 0.024 158));
color: var(--ink-2);
}
.aurora .plan-early strong {
color: var(--a-lime);
}
.aurora .plan-tag {
background: var(--a-lime);
color: var(--a-on-lime);
}
.aurora .plan-promise {
border: 1px solid var(--line);
background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
color: var(--ink-2);
}
.aurora .plan-promise .g {
color: var(--a-lime);
}
.aurora .a-pricing .note {
margin-block: var(--sp-5) 0;
text-align: center;
font-size: 0.875rem;
color: var(--a-ink-3);
}
.aurora .h-trust-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gap-list) var(--sp-6);
margin-top: var(--sp-5);
padding-top: 0;
border-top: 0;
}
.aurora .h-trust-block p {
max-width: 36ch;
padding: 0;
border: 0;
background: none;
font-size: 0.9375rem;
color: var(--a-ink-3);
}
.aurora .faq-group-title {
font-size: 0.875rem;
font-weight: 650;
letter-spacing: 0;
text-transform: none;
color: var(--a-lime);
}
.aurora .faq details,
.aurora .faq-group details:first-of-type {
border-color: var(--line);
}
.aurora .faq summary {
padding-block: 16px;
font-size: clamp(17px, 1.5vw, 19px);
letter-spacing: -0.01em;
}
.aurora .faq summary::after {
border: 1px solid var(--a-line-2);
background:
linear-gradient(var(--a-lime), var(--a-lime)) center / 10px 2px no-repeat,
linear-gradient(var(--a-lime), var(--a-lime)) center / 2px 10px no-repeat;
}
.aurora .faq-group summary:hover {
color: var(--a-lime-hi);
}
.aurora .faq-group summary:hover::after,
.aurora .faq-group details[open] summary::after {
background:
linear-gradient(#10200f, #10200f) center / 10px 2px no-repeat,
linear-gradient(#10200f, #10200f) center / 2px 10px no-repeat,
var(--a-lime);
}
.aurora .faq-group summary:focus-visible {
outline: 3px solid var(--a-lime);
outline-offset: 3px;
}
.a-sticky {
display: none;
}
@media (max-width: 767px) {
.a-sticky {
display: flex;
align-items: flex-end;
position: sticky;
bottom: 0;
z-index: 40;
height: calc(68px + env(safe-area-inset-bottom));
padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
pointer-events: none;
}
.aurora .a-sticky a {
pointer-events: auto;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
border-radius: 16px;
font-size: 17px;
font-weight: 700;
text-decoration: none;
color: #10200f;
background: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime));
box-shadow: 0 0 0 1px oklch(0.9 0.1 130 / 0.5), 0 10px 40px -6px oklch(0.8 0.17 140 / 0.6), 0 0 0 6px oklch(0.145 0.018 158 / 0.6);
}
.aurora .faq {
padding-bottom: 24px;
}
@supports (timeline-scope: --a) {
body {
timeline-scope: --a-hero-cta;
}
.a-hero .primary {
view-timeline: --a-hero-cta block;
}
.a-sticky a {
animation: a-bar-in linear both;
animation-timeline: --a-hero-cta;
animation-range: exit 0% exit 100%;
}
}
.js-sticky .a-sticky a {
visibility: hidden;
opacity: 0;
translate: 0 24px;
transition: opacity 0.3s, translate 0.35s var(--a-ease), visibility 0s 0.35s;
}
.js-sticky .a-sticky.is-shown a {
visibility: visible;
opacity: 1;
translate: 0 0;
transition: opacity 0.3s, translate 0.35s var(--a-ease);
}
}
@keyframes a-bar-in {
from { visibility: hidden; opacity: 0; translate: 0 24px; }
to { visibility: visible; opacity: 1; translate: 0 0; }
}
@keyframes a-bar-in-still {
from { visibility: hidden; opacity: 0; }
to { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.a-sticky a {
animation-name: a-bar-in-still !important;
}
.js-sticky .a-sticky a {
translate: none !important;
}
}
.a-close {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(88px, 11vw, 160px) 0;
text-align: center;
background: radial-gradient(70% 60% at 50% 45%, oklch(0.3 0.07 150), var(--a-ground) 72%);
}
.a-close .a-b1 { top: auto; bottom: -26vmax; }
.a-close .a-b2 { top: auto; bottom: -20vmax; }
.a-close .a-b4 { top: auto; bottom: -10vmax; }
.a-close-in {
position: relative;
z-index: 2;
}
.aurora .a-close h2 {
max-width: 13ch;
margin-inline: auto;
font-size: clamp(44px, 7.4vw, 108px);
letter-spacing: -0.055em;
}
.aurora .a-close p {
margin: 24px auto 34px;
font-size: clamp(17px, 1.8vw, 21px);
}
.site-footer {
margin-top: 0;
background: oklch(0.12 0.015 158);
border-top-color: var(--line);
}
.fh,
.flangs-label {
color: var(--ink);
}
.flist a,
.copyright,
.copyright a,
.fbrand-id p,
.marks-note {
color: var(--dim);
}
.flist a:hover,
.copyright a:hover {
color: var(--ink);
}
.marks-note a {
color: var(--ink-2);
}
@media (prefers-reduced-motion: no-preference) {
.motion-off {
display: block;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.motion-toggle {
display: inline-flex;
}
html {
scroll-behavior: smooth;
}
.a-b1 { animation: a-drift1 26s ease-in-out infinite alternate; }
.a-b2 { animation: a-drift2 32s ease-in-out infinite alternate; }
.a-b3 { animation: a-drift3 22s ease-in-out infinite alternate; }
.a-b4 { animation: a-drift2 38s ease-in-out infinite alternate-reverse; }
.a-beam { animation: a-beam 9s ease-in-out infinite alternate; }
.a-chip { animation: a-float 7s ease-in-out infinite alternate; }
.a-c2 { animation-duration: 8.5s; animation-delay: -2s; }
.a-c3 { animation-duration: 9s; animation-delay: -4s; }
.a-c4 { animation-duration: 7.5s; animation-delay: -1s; }
.a-c5 { animation-duration: 10s; animation-delay: -3s; }
.a-c6 { animation-duration: 8s; animation-delay: -5s; }
.a-river-row { animation: a-river 46s linear infinite; }
.is-off .a-blob,
.is-off .a-beam,
.is-off .a-chip,
.is-off .a-river-row,
html.is-still .a-blob,
html.is-still .a-beam,
html.is-still .a-chip,
html.is-still .a-river-row,
body:has(.motion-off:checked) .a-blob,
body:has(.motion-off:checked) .a-beam,
body:has(.motion-off:checked) .a-chip,
body:has(.motion-off:checked) .a-river-row {
animation-play-state: paused;
}
.a-hero-copy > * { animation: a-rise 0.8s var(--a-ease) both; }
.a-hero-copy > h1 { animation-name: a-rise-solid; }
.a-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.a-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.a-hero-copy > :nth-child(4) { animation-delay: 0.18s; }
.a-hero-copy > :nth-child(5) { animation-delay: 0.24s; }
.a-p-main { animation: a-up-solid 1s var(--a-ease) both; }
.a-p-side { animation: a-up 1.1s 0.3s var(--a-ease) both; }
.js-reveal [data-reveal] {
transition: opacity 0.8s var(--a-ease), translate 0.8s var(--a-ease);
}
.js-reveal [data-reveal]:not(.is-in) {
opacity: 0;
translate: 0 28px;
}
.js-reveal .a-steps [data-reveal]:nth-child(2),
.js-reveal .a-spot > .a-spot-stage {
transition-delay: 0.08s;
}
.js-reveal .a-steps [data-reveal]:nth-child(3) {
transition-delay: 0.16s;
}
.js-reveal .a-curve-line {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
transition: stroke-dashoffset 2.2s 0.3s var(--a-ease);
}
.js-reveal .a-boxes.is-in .a-curve-line {
stroke-dashoffset: 0;
}
.js-reveal .a-ladder li {
transform-origin: bottom;
transition: scale 0.9s var(--a-ease), opacity 0.9s;
}
.js-reveal .a-boxes:not(.is-in) .a-ladder li {
scale: 1 0.25;
opacity: 0.3;
}
.js-reveal .a-ladder li:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .a-ladder li:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .a-ladder li:nth-child(4) { transition-delay: 0.24s; }
.js-reveal .a-ladder li:nth-child(5) { transition-delay: 0.32s; }
}
@keyframes a-drift1 { to { transform: translate(14vmax, 6vmax) scale(1.1); } }
@keyframes a-drift2 { to { transform: translate(-12vmax, 8vmax) scale(1.15); } }
@keyframes a-drift3 { to { transform: translate(-10vmax, -4vmax) scale(1.25); } }
@keyframes a-beam { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes a-float { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes a-river { to { transform: translateX(-100%); } }
@keyframes a-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes a-up { from { opacity: 0; translate: 0 80px; } }
@keyframes a-rise-solid { from { translate: 0 14px; } }
@keyframes a-up-solid { from { translate: 0 48px; } }
.a-player-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--sp-7) clamp(32px, 5vw, 72px);
align-items: center;
}
.a-player h2 {
margin-top: var(--sp-4);
font-size: clamp(38px, 4.6vw, 62px);
font-weight: 750;
letter-spacing: -0.045em;
line-height: 0.98;
}
.aurora .a-player-lede {
max-width: 40ch;
margin-top: var(--sp-5);
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.45;
color: var(--ink-2);
}
.pp.is-aurora {
gap: 14px;
margin-top: var(--sp-6);
}
.pp.is-aurora {
--pp-col: 132px;
}
.pp.is-aurora li {
font-size: clamp(16px, 1.35vw, 18px);
}
.pp.is-aurora kbd {
min-width: 40px;
height: 40px;
font-family: var(--sans);
border-color: var(--a-line-2, var(--line));
background: var(--a-card-top, var(--card));
color: var(--ink);
}
.a-player-ctas {
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
gap: 12px;
margin-top: var(--sp-6);
}
.a-player .a-spot-links {
margin-top: var(--sp-3);
}
.a-player-stage {
margin: 0;
min-width: 0;
}
.a-player-frame {
position: relative;
overflow: hidden;
aspect-ratio: 1168 / 860;
border-radius: var(--r-lg, 20px);
border: 1px solid var(--a-line-2, var(--line));
background: #000;
box-shadow: 0 0 80px -20px oklch(0.6 0.15 140 / 0.45), 0 30px 60px -30px var(--a-depth, oklch(0 0 0 / 0.5));
}
.a-player-frame img,
.a-player-frame video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.a-player-stage figcaption {
margin-top: 12px;
font-size: 14px;
line-height: 1.45;
color: var(--a-ink-3, var(--dim));
}
@media (min-width: 961px) {
.a-player-ctas .button {
padding-inline: 20px;
}
}
@media (max-width: 960px) {
.a-player-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.pp.is-aurora {
--pp-col: 92px;
}
.pp.is-aurora kbd {
min-width: 28px;
height: 30px;
}
.a-player-ctas {
grid-template-columns: minmax(0, 1fr);
}
.a-player-ctas .button {
justify-content: center;
}
}
@media (max-width: 960px) {
.a-boxes {
grid-template-columns: minmax(0, 1fr);
}
.a-steps {
grid-template-columns: minmax(0, 1fr);
}
.aurora .plan-offer {
grid-row: auto;
margin-top: 0;
}
.aurora .plans {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
row-gap: var(--gap-grid);
max-width: 560px;
margin-inline: auto;
}
.aurora .plan {
display: flex;
flex-direction: column;
grid-row: auto;
}
.aurora .plan > .plan-cta {
margin-top: auto;
}
.aurora .plan.featured {
margin-top: 14px;
}
.a-spot,
.a-spot.is-wide {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-6);
}
.a-spot.is-flip > .a-spot-copy {
order: 0;
}
.a-spot.is-flip {
grid-template-columns: minmax(0, 1fr);
}
.a-spot-side {
justify-self: start;
align-items: flex-start;
}
.a-spot-side .a-prompts {
justify-content: flex-start;
}
.a-spot {
--spot-phone: min(56vw, 300px);
}
.aurora .a-spot-note.is-top {
padding-inline-end: 0;
text-align: center;
}
.a-desk {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
}
.a-keys {
justify-content: center;
}
.aurora .a-desk-copy > p:last-child {
margin-inline: auto;
}
}
@media (max-width: 700px) {
:root {
--header-h: 70px;
}
.site-header {
padding-top: 8px;
}
.site-header::before {
inset: 8px max(0px, calc(var(--gutter) - 12px)) 0;
border-radius: 18px;
}
.a-hero-copy {
padding-top: 28px;
}
.a-news {
font-size: 0.8125rem;
}
.a-hero h1 {
margin-top: 20px;
font-size: clamp(44px, 13.6vw, 72px);
}
.aurora .a-lede {
max-width: 36ch;
font-size: 17px;
}
.a-hero .a-ctas {
gap: 6px;
}
.a-hero .a-ctas .button {
width: 100%;
}
.a-hero .a-ctas .secondary {
min-height: 48px;
border-color: transparent;
background: none;
color: var(--ink-2);
font-size: 1rem;
}
.aurora .a-trust {
margin-top: 6px;
font-size: 0.8125rem;
}
.a-stage {
height: min(124vw + 52px, 592px);
margin-top: 28px;
}
.a-p-main {
width: 58vw;
}
.a-p-side {
width: 42vw;
margin-top: 52px;
}
.a-p-left {
margin-right: -22vw;
}
.a-p-right {
margin-left: -22vw;
}
.a-chip {
padding: 7px 12px;
font-size: 14px;
border-radius: 12px;
}
.a-phones {
top: 52px;
}
.a-c1 { left: 3%; top: 6px; }
.aurora .a-note {
top: 2px;
left: auto;
right: 4%;
width: 24ch;
font-size: 15px;
text-align: right;
}
.a-note-arrow {
display: none;
}
.a-c2,
.a-c3,
.a-c4,
.a-c5,
.a-c6 {
display: none;
}
.a-spot {
--spot-phone: min(60vw, 280px);
}
.a-phone.is-back {
margin-inline-end: -30%;
margin-top: var(--sp-6);
}
.aurora .pwall {
grid-auto-rows: auto;
}
.aurora .a-keys kbd {
min-width: 44px;
min-height: 44px;
padding: 0 10px;
font-size: 18px;
}
.a-ladder {
height: 280px;
gap: 4px;
}
.a-ladder li {
min-height: 74px;
padding: 12px 4px;
border-radius: 12px 12px 4px 4px;
}
.a-ladder small {
font-size: 0.72rem;
}
.a-ladder b {
font-size: clamp(11px, 3.4vw, 22px);
}
.a-devices {
grid-template-columns: minmax(0, 1fr) 34vw;
}
.a-d-phone {
width: 34vw;
margin-left: -14vw;
margin-bottom: 0;
}
.a-screen {
padding: 6px;
border-radius: var(--r-lg);
}
.a-screen .film-screen {
border-radius: 22px;
}
.a-screen-bar {
padding: 4px 8px 8px;
}
.a-screen .film-start,
.a-screen .film-sound {
inset: auto auto 12px 12px;
padding: 6px;
}
.a-screen .film-start > span:not(.film-play-icon),
.a-screen .film-sound > span:not(.film-play-icon) {
display: block;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.a-screen .film-play-icon {
width: 52px;
height: 52px;
}
}
.site-nav > a.nav-login {
white-space: nowrap;
}
@media (max-width: 640px) {
.site-nav .pill {
display: none;
}
}
@media (max-width: 359px) {
.site-header .logo {
font-size: 0;
gap: 0;
}
}
@media (max-width: 360px) {
.a-boxes {
padding: 22px 14px;
}
.aurora .button {
padding: 0 16px;
font-size: 1rem;
}
}
@media (min-width: 1100px) and (max-height: 960px) {
.a-hero h1 {
font-size: clamp(48px, 6.4vw, 96px);
}
}
@media (min-width: 1100px) and (max-height: 760px) {
.a-hero-copy {
padding-top: 12px;
}
.a-hero h1 {
margin-top: 16px;
font-size: clamp(48px, 5.2vw, 80px);
}
.aurora .a-lede {
margin-top: 14px;
}
}
@media (min-width: 1800px) {
:root {
--a-wrap: 1320px;
}
.a-hero h1 {
font-size: clamp(104px, 5.6vw, 150px);
}
.a-p-main {
width: 350px;
}
.a-p-side {
width: 280px;
}
.a-stage {
height: 680px;
}
}
@media (forced-colors: active) {
.a-h1-a,
.aurora .a-h1-b,
.aurora h1 em,
.aurora h2 em,
.aurora h3 em,
.aurora h4 em {
-webkit-text-fill-color: CanvasText;
background: none;
}
}
@media print {
.a-sky,
.a-chips,
.a-river-track,
.a-sticky,
.motion-toggle {
display: none;
}
}
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--a-ground: oklch(0.975 0.012 125);
--ink: oklch(0.24 0.03 155);
--ink-2: oklch(0.38 0.025 155);
--dim: oklch(0.49 0.022 155);
--a-ink-3: oklch(0.49 0.022 155);
--a-lime: oklch(0.46 0.12 150);
--a-lime-hi: oklch(0.4 0.11 152);
--a-coral: oklch(0.53 0.15 35);
--accent: oklch(0.46 0.12 150);
--accent-ink: oklch(0.46 0.12 150);
--accent-line: oklch(0.46 0.12 150 / 0.35);
--line: oklch(0.24 0.03 155 / 0.11);
--line-soft: oklch(0.24 0.03 155 / 0.07);
--a-line-2: oklch(0.24 0.03 155 / 0.16);
--glass: oklch(0.99 0.006 125 / 0.72);
--a-card-top: oklch(0.995 0.006 125);
--a-card-bot: oklch(0.975 0.012 130);
--a-veil: oklch(0.24 0.03 155 / 0.035);
--a-veil-2: oklch(0.24 0.03 155 / 0.06);
--a-depth: oklch(0.35 0.05 155 / 0.22);
--a-on-lime: #fff;
--a-primary: linear-gradient(180deg, oklch(0.52 0.13 148), oklch(0.45 0.115 152));
--a-em: linear-gradient(100deg, oklch(0.4 0.11 152), oklch(0.5 0.14 140));
--a-h1: linear-gradient(180deg, oklch(0.2 0.03 155) 20%, oklch(0.32 0.04 150));
--a-chip-bg: oklch(1 0 0 / 0.85);
--a-tile: oklch(0.93 0.04 135);
--chip-beta-bg: oklch(0.93 0.06 85);
--chip-beta-ink: oklch(0.42 0.09 70);
}
:focus-visible,
.motion-off:focus-visible + .motion-toggle,
.aurora .faq-group summary:focus-visible {
outline-color: oklch(0.46 0.12 150);
}
.skip-link {
background: oklch(0.46 0.12 150);
color: #fff;
}
.site-header::before {
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), 0 12px 40px -18px var(--a-depth);
}
.site-nav > a:not(.pill):hover {
background: var(--a-veil-2);
}
.dl-panel {
background: oklch(0.995 0.006 125);
box-shadow: 0 30px 80px -20px var(--a-depth);
}
.aurora .primary,
.site-nav .pill,
.site-nav .pill:hover,
.aurora .a-sticky a {
color: #fff;
background: var(--a-primary);
box-shadow: 0 1px 0 oklch(1 0 0 / 0.25) inset, 0 10px 30px -10px oklch(0.45 0.12 150 / 0.55);
}
.aurora .primary:hover,
.site-nav .pill:hover {
color: #fff;
background: oklch(0.4 0.11 152);
box-shadow: 0 16px 40px -12px oklch(0.45 0.12 150 / 0.6);
}
.aurora .secondary {
background: oklch(1 0 0 / 0.7);
}
.aurora .secondary:hover {
background: #fff;
}
.a-hero {
background: radial-gradient(120% 70% at 50% 0%, oklch(0.93 0.05 140), var(--a-ground) 70%);
}
.a-hero::before {
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.a-b1 { background: radial-gradient(closest-side, oklch(0.85 0.1 150 / 0.55), transparent 70%); }
.a-b2 { background: radial-gradient(closest-side, oklch(0.9 0.11 125 / 0.5), transparent 70%); }
.a-b3 { background: radial-gradient(closest-side, oklch(0.88 0.06 190 / 0.35), transparent 70%); }
.a-b4 { background: radial-gradient(closest-side, oklch(0.9 0.07 40 / 0.25), transparent 70%); }
.a-beam {
background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, oklch(1 0 0 / 0.35) 176deg, oklch(1 0 0 / 0.75) 180deg, oklch(1 0 0 / 0.35) 184deg, transparent 198deg);
}
.a-stars {
display: none;
}
.a-horizon {
background: radial-gradient(closest-side, oklch(0.8 0.12 145 / 0.45), oklch(0.85 0.08 140 / 0.15) 45%, transparent);
}
.a-horizon::before {
background: linear-gradient(90deg, transparent, oklch(0.55 0.12 150 / 0.6), transparent);
box-shadow: 0 0 30px 6px oklch(0.8 0.12 145 / 0.4);
}
.a-news {
background: oklch(1 0 0 / 0.8);
box-shadow: 0 0 30px -12px oklch(0.6 0.12 145 / 0.5);
}
.aurora .a-news:hover {
color: var(--ink);
}
.a-news b {
color: #fff;
background: var(--a-primary);
}
.aurora .a-h1-b {
background: var(--a-em);
-webkit-background-clip: text;
background-clip: text;
}
.a-phone {
box-shadow:
inset 0 0 0 1px oklch(1 0 0 / 0.16),
0 0 0 1px oklch(0 0 0 / 0.5),
0 0 60px -8px oklch(0.7 0.12 145 / 0.35),
0 50px 90px -30px var(--a-depth);
}
.a-chip {
color: var(--ink);
background: var(--a-chip-bg);
border-color: oklch(0.46 0.12 150 / 0.25);
box-shadow: 0 18px 40px -16px var(--a-depth);
}
.a-c2 {
color: var(--a-lime);
}
.a-c4 {
color: var(--a-coral);
border-color: oklch(0.53 0.15 35 / 0.3);
}
.a-updated {
text-decoration-color: oklch(0.46 0.12 150 / 0.4);
}
.a-river {
background: linear-gradient(180deg, transparent, oklch(0.955 0.02 135) 40%, var(--a-ground));
}
.a-river-row span {
background: oklch(1 0 0 / 0.7);
border-color: var(--line);
}
.a-river-row span:nth-child(3n) {
border-color: oklch(0.46 0.12 150 / 0.3);
}
.a-river-row span:nth-child(4n) {
color: var(--ink);
}
.motion-toggle {
background: oklch(1 0 0 / 0.7);
}
.motion-toggle:hover {
background: #fff;
}
.knob {
background: oklch(0.24 0.03 155 / 0.2);
}
.knob::after {
background: #fff;
box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
}
.motion-off:checked + .motion-toggle .knob {
background: oklch(0.46 0.12 150);
}
.motion-off:checked + .motion-toggle .knob::after {
background: #fff;
}
.aurora .a-kicker {
background: oklch(0.93 0.04 135);
border-color: oklch(0.46 0.12 150 / 0.22);
}
.a-card,
.a-step,
.aurora .plan {
box-shadow: 0 1px 2px oklch(0.3 0.04 155 / 0.06), 0 24px 48px -32px var(--a-depth);
}
.a-card::before,
.a-step::before {
background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), oklch(0.6 0.12 145 / 0.08), transparent 60%);
}
.a-num,
.aurora .a-screen .film-play-icon {
color: #fff;
background: var(--a-primary);
box-shadow: 0 10px 24px -10px oklch(0.45 0.12 150 / 0.6);
}
.a-dots i {
background: oklch(0.24 0.03 155 / 0.18);
}
.is-lime > .a-spot-stage { --spot-glow: oklch(0.88 0.1 140 / 0.7); }
.is-teal > .a-spot-stage { --spot-glow: oklch(0.88 0.06 190 / 0.7); }
.is-green > .a-spot-stage { --spot-glow: oklch(0.85 0.09 150 / 0.7); }
.a-spot-stage {
box-shadow: 0 1px 2px oklch(0.3 0.04 155 / 0.06), 0 40px 100px -50px var(--a-depth);
}
.a-screen {
background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
box-shadow: 0 0 0 1px var(--line), 0 0 120px -40px oklch(0.7 0.12 145 / 0.5), 0 60px 120px -60px var(--a-depth);
}
.a-screen .film-start,
.a-screen .film-sound {
background: oklch(1 0 0 / 0.9);
}
.a-screen .film-start strong,
.a-screen .film-sound strong {
color: var(--ink);
}
.a-screen .film-start small,
.a-screen .film-sound small {
color: var(--ink-2);
}
.a-browser {
background: oklch(0.93 0.012 130);
box-shadow: 0 0 0 1px var(--line), 0 0 140px -50px oklch(0.7 0.12 145 / 0.45), 0 60px 120px -60px var(--a-depth);
}
.a-url {
background: oklch(1 0 0 / 0.8);
}
.a-tag.is-pro {
color: #0d4a22;
background: #ddeed4;
border-color: oklch(0.46 0.12 150 / 0.3);
}
.a-tag.is-free {
color: #00537e;
background: #d5ecf8;
border-color: oklch(0.5 0.1 235 / 0.3);
}
.a-prompts li {
color: var(--ink);
background: oklch(0.95 0.025 220);
border-color: oklch(0.5 0.08 230 / 0.25);
}
.a-chat-shot {
box-shadow: 0 0 60px -20px oklch(0.6 0.1 230 / 0.35), 0 30px 60px -30px var(--a-depth);
}
.a-boxes {
background:
radial-gradient(80% 120% at 100% 100%, oklch(0.88 0.08 145 / 0.6), transparent 60%),
linear-gradient(170deg, var(--a-card-top), oklch(0.96 0.02 135));
box-shadow: 0 1px 2px oklch(0.3 0.04 155 / 0.06), 0 40px 100px -50px var(--a-depth);
}
.a-ladder li {
background: linear-gradient(180deg, oklch(0.86 0.09 145), oklch(0.92 0.05 140) 60%, oklch(0.96 0.02 130 / 0.6));
border-color: oklch(0.5 0.1 150 / 0.3);
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 -10px 40px -18px oklch(0.6 0.15 145 / 0.4);
}
.a-ladder li.is-top {
background: linear-gradient(180deg, oklch(0.52 0.13 148), oklch(0.45 0.115 152));
box-shadow: 0 -10px 50px -12px oklch(0.6 0.15 145 / 0.5);
}
.a-ladder li.is-top small,
.a-ladder li.is-top b {
color: #fff;
}
.a-curve stop:nth-child(1) { stop-color: oklch(0.6 0.15 35); }
.a-curve stop:nth-child(2) { stop-color: oklch(0.55 0.13 145); }
.a-curve stop:nth-child(3) { stop-color: oklch(0.42 0.11 152); }
.a-after-ladder span {
border-color: oklch(0.46 0.12 150 / 0.3);
}
.a-devices::before {
background: radial-gradient(closest-side, oklch(0.85 0.1 148 / 0.5), oklch(0.9 0.06 150 / 0.15) 60%, transparent);
}
.a-window {
box-shadow: 0 0 0 1px var(--line), 0 0 100px -40px oklch(0.7 0.12 145 / 0.45), 0 50px 100px -50px var(--a-depth);
}
.aurora .pw-ok {
color: #fff;
background: oklch(0.46 0.12 150);
}
.a-pricing {
background: radial-gradient(60% 40% at 50% 30%, oklch(0.92 0.05 145 / 0.6), transparent 70%);
}
.aurora .plan.featured {
border: 2px solid oklch(0.45 0.115 152);
background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
box-shadow: 0 30px 80px -40px oklch(0.45 0.12 150 / 0.45);
}
.aurora .yearly-banner {
background: var(--a-primary);
}
.aurora .yearly-banner > span {
color: #fff;
}
.aurora .yearly-comparison > strong,
.aurora .plan-early strong,
.aurora .plan-promise .g {
color: #0f6a31;
}
.aurora .plan-early {
border-color: oklch(0.45 0.115 152 / 0.35);
background: oklch(0.95 0.035 140);
}
.aurora .plan-tag {
background: #0f6a31;
color: #fff;
}
.aurora .plan-list li::before {
background: oklch(0.93 0.04 135) url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230f6a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.aurora .faq-group summary:hover::after,
.aurora .faq-group details[open] summary::after {
background:
linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
oklch(0.46 0.12 150);
}
.aurora .a-sticky a {
box-shadow: 0 10px 30px -10px oklch(0.45 0.12 150 / 0.55), 0 0 0 6px oklch(0.975 0.012 125 / 0.7);
}
.a-close {
background: radial-gradient(70% 60% at 50% 45%, oklch(0.9 0.07 145), var(--a-ground) 72%);
}
.site-footer {
background: oklch(0.955 0.014 130);
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-transparency: reduce) {
.site-header::before {
background: oklch(0.99 0.006 125);
}
}
.a-hero h1 .a-brandline {
display: block;
margin: 0 0 20px;
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
font-weight: 650;
line-height: 1.4;
letter-spacing: 0;
color: var(--a-lime-hi);
}
.a-spot.has-poster {
display: block;
}
.aurora .a-poster :is(h2, h3) {
margin-top: 0.45em;
color: var(--p-ink);
font-size: clamp(2.05rem, 1.2rem + 3.2vw, 3.6rem);
font-weight: 790;
line-height: 0.98;
letter-spacing: -0.042em;
}
.aurora .a-poster :is(h2, h3) em {
display: block;
padding: 0;
font-family: var(--sans);
font-style: normal;
font-weight: inherit;
letter-spacing: inherit;
color: var(--p-em);
background: none;
-webkit-text-fill-color: currentColor;
}
.aurora .a-poster .poster-sub {
color: var(--p-sub);
}
.aurora .a-poster .a-spot-proof {
justify-content: center;
margin-top: var(--sp-4);
color: var(--p-sub);
text-align: start;
}
.a-poster .a-spot-proof svg {
color: var(--p-em);
}
.aurora .a-poster .a-spot-links {
margin-top: var(--sp-2);
}
.aurora .a-poster .a-link {
color: var(--p-link);
}
.a-poster .pill .a-tag {
padding: 1px 8px;
border: 1px solid currentColor;
background: none;
color: inherit;
font-size: 0.72rem;
letter-spacing: 0.06em;
}
.a-poster .poster-art {
width: min(100%, 460px);
}
.a-spot.is-practice > .a-boxes {
margin-top: var(--spot-gap);
}
@media (min-width: 961px) {
.a-poster {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: end;
justify-items: stretch;
column-gap: clamp(24px, 4vw, 64px);
padding: 0 clamp(32px, 4vw, 72px);
text-align: start;
}
.a-poster .poster-copy {
align-self: center;
justify-items: start;
padding-block: 64px;
}
.aurora .a-poster .a-spot-proof {
justify-content: flex-start;
}
.a-poster .poster-art {
justify-self: center;
width: min(100%, 520px);
margin-top: 56px;
}
.a-poster.is-flip .poster-copy {
order: 2;
}
}
@media (prefers-reduced-motion: no-preference) {
.js-reveal .a-poster > .poster-art {
transition-delay: 0.08s;
}
}
.aurora .poster .pill {
color: var(--p-pill);
}
.aurora .a-poster .a-spot-links {
color: var(--p-sub);
}
.a-devices.is-family {
display: block;
max-width: 1120px;
margin-inline: auto;
}
.a-family,
.a-family img {
position: relative;
display: block;
width: 100%;
height: auto;
}
@media (max-width: 700px) {
.a-family img {
aspect-ratio: 1200 / 1400;
}
}
.aurora .pcta-note {
margin-top: 12px;
color: var(--a-ink-3);
}
.aurora .pcta-note a:hover {
color: var(--ink);
}
.aurora .pcta .pcta-badge.primary {
min-height: 56px;
}
.aurora .pcta-badge img {
height: 56px;
}
.aurora .pcta-badge.is-play img {
height: 82px;
margin: -13px;
}
.aurora .a-close .pcta-note {
margin: 14px auto 0;
font-size: 0.875rem;
text-align: center;
}
@media (max-width: 700px) {
.aurora .pcta .a-ctas > * {
flex: 1 1 100%;
}
.aurora .pcta-note,
.aurora .a-close .pcta-note {
margin-top: 6px;
font-size: 0.8125rem;
}
}
.a-spot-phone {
display: none;
margin: 0 0 10px;
font-weight: 600;
}
@media (max-width: 760px) and (pointer: coarse) {
.a-badges {
display: none;
}
.a-spot-phone {
display: block;
}
}