/* Quitok / product presentation. Shared rhythm, two distinct palettes. */
:root { --section-space: 96px; --panel-radius: 24px; }
:root[data-site-style="focus"] {
  --paper: #090b10; --surface: #11151e; --line: #ffffff16;
  --muted: #aeb4c2; --purple: #cad7fa;
}
:root[data-site-style="pet"] { --paper: #fcfaff; --surface: #fff; --line: #31284119; }
body { line-height: 1.65; }
h1,h2,h3 { letter-spacing: -.045em; }
h2 { font-size: clamp(2.15rem, 4vw, 3.5rem); font-weight: 560; line-height: 1.1; }
h3 { font-weight: 570; }
.section { padding-block: var(--section-space); }
.eyebrow { font-size: 12px; letter-spacing: .13em; font-weight: 600; }
.button { border-radius: 14px; min-height: 52px; padding: 14px 24px; font-size: 15px; transition: background .2s, box-shadow .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.text-link { font-size: 14px; padding-bottom: 3px; }
html[data-site-style="focus"] .site-header { background: #090b10e8; }
.site-header .button { border-radius: 10px; }
.style-switch-options { border-radius: 12px; }
.style-switch-options button { border-radius: 9px; }
html[data-site-style="focus"] .site-cosmos::before { opacity: .25; animation: none; }
html[data-site-style="focus"] .site-cosmos::after { background: linear-gradient(#090b1033, #090b1099), radial-gradient(ellipse at center, #090b10bb, transparent 95%); }
html[data-site-style="focus"] :is(.phase-overview,.soft-section,.story-strip,.values-section,.library-detail,.companion-section) { background: #10141de8; }
html[data-site-style="focus"] :is(.film-section,.compact-showcase) { background: transparent; }
html[data-site-style="focus"] .site-footer { background: #090b10eb; }

/* The first screen is built around the real app, with room around the message. */
.showcase-hero { position: relative; isolation: isolate; overflow: clip; padding-top: 40px; }
.showcase-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 70%, #aba1f333, transparent 60%); }
html[data-site-style="focus"] .showcase-hero::before { background: radial-gradient(ellipse at 50% 75%, #455d9b30, transparent 65%), linear-gradient(#090b1099, transparent 60%); }
.hero-intro { text-align: center; max-width: 1000px; }
.hero-intro .eyebrow { margin-bottom: 21px; }
.hero-intro h1 { font-size: clamp(3.6rem, 5.7vw, 5.5rem); line-height: .98; font-weight: 560; letter-spacing: -.065em; }
.hero-intro h1 em { font-family: inherit; font-weight: inherit; font-style: normal; letter-spacing: inherit; }
.hero-intro .lead { font-size: 18px; line-height: 1.6; max-width: 48ch; margin: 25px auto 0; color: var(--muted); }
.hero-intro .actions { justify-content: center; gap: 26px; margin-top: 26px; }
.hero-showcase { max-width: 1060px; margin-top: 34px; }
.product-scene { position: relative; height: 460px; isolation: isolate; }
.product-scene::before { content: ""; position: absolute; inset: 8% 3% 0; border-radius: 50%; z-index: -1; background: radial-gradient(ellipse, #b9a8e429, transparent 70%); pointer-events: none; }
html[data-site-style="focus"] .product-scene::before { background: radial-gradient(ellipse, #8baaff20, transparent 70%); }
.scene-side { position: absolute; width: 150px; top: 38px; padding: 4px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); box-shadow: 0 20px 50px #0002; }
.scene-side img { width: 100%; height: auto; border-radius: 20px; }
.scene-left { left: calc(50% - 288px); transform: rotate(-9deg); }
.scene-right { right: calc(50% - 288px); transform: rotate(9deg); }
.scene-player { position: relative; margin-inline: auto; width: 184px; padding: 5px; border-radius: 29px; background: #141821; border: 1px solid #c5d1e85c; box-shadow: 0 26px 75px #0004, 0 0 0 4px #02040818; z-index: 2; }
.scene-player .film-video-wrap { position: relative; margin: 0; padding: 0; }
.scene-player video { width: 100%; height: auto; display: block; aspect-ratio: 480/1044; border-radius: 23px; background: #111722; box-shadow: none; }
.scene-player .film-status { font-size: 12px; }
.scene-caption { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px 28px; margin-top: 25px; position: relative; z-index: 3; }
.scene-caption>p { font-size: 14px; color: var(--muted); }
.scene-caption .film-toggle { margin: 0; min-height: 42px; padding: 9px 16px; font-size: 13px; border-radius: 100px; }
.scene-caption .film-toggle svg { width: 14px; height: 14px; }
.scene-caption .film-duration { font-size: 12px; opacity: .65; border-left: 1px solid currentColor; padding-left: 12px; }
.product-scene>.film-error { position: relative; z-index: 4; text-align: center; background: var(--paper); padding: 12px; font-size: 14px; }
.hero-context { display: flex; justify-content: center; gap: 8px 30px; flex-wrap: wrap; text-align: center; padding-block: 12px 24px; color: var(--muted); }
.hero-context p { font-size: 12px; margin: 0; }
.proof-strip { background: transparent; }
.proof-strip .shell { justify-content: center; gap: 44px; }
.proof-strip span { font-size: 13px; }

/* Fewer nested boxes: a clear device, copy and a compact choice of films. */
.compact-showcase { padding-block: var(--section-space) 30px; }
.compact-showcase .section-head { align-items: end; margin-bottom: 44px; }
.compact-showcase .section-head>p { max-width: 35ch; font-size: 16px; }
html .compact-showcase .film-feature { border: 1px solid var(--line); border-radius: 30px; overflow: hidden; box-shadow: none; background: var(--surface); grid-template-columns: 1fr 1fr; }
.compact-showcase .film-copy { padding: 54px; align-self: center; }
.compact-showcase .film-copy h3 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 530; line-height: 1.1; }
.compact-showcase .film-copy .lead { font-size: 16px; line-height: 1.75; max-width: 36ch; }
.compact-showcase .film-copy .eyebrow { font-size: 12px; margin-bottom: 22px; }
html .compact-showcase .film-screen { background: radial-gradient(ellipse at 50% 45%, #abc0e81b, transparent 70%); border: 0; padding: 28px 28px 34px; }
.compact-showcase .film-screen-caption { font-size: 12px; margin-bottom: 18px; }
.compact-showcase .film-video-wrap video { height: 480px; width: auto; max-width: 100%; border-radius: 24px; border: 1px solid #ffffff33; box-shadow: 0 20px 50px #0004; }
.compact-showcase .film-note,.compact-showcase .media-language-note { font-size: 12px; line-height: 1.65; max-width: 39ch; }
.compact-showcase .more-films { margin-top: 12px; border: 0; }
.compact-showcase .more-films>summary { font-size: 14px; padding-block: 18px; }
.compact-showcase .film-library { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; }
html .compact-showcase .film-choice { display: flex; gap: 0; align-items: center; min-height: 95px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
html .compact-showcase .film-choice[aria-current] { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.compact-showcase .film-choice-art { display: flex; align-items: center; justify-content: center; width: 64px; height: 95px; flex: 0 0 64px; border: 0; padding: 7px; background: transparent; border-radius: 0; }
.compact-showcase .film-choice-art img { position: static; inset: auto; height: 100%; width: auto; border-radius: 7px; transform: none; }
.compact-showcase .film-choice-play { display: none; }
.compact-showcase .film-choice-time { font-size: 11px; top: auto; left: 4px; right: 4px; bottom: 5px; text-align: center; padding: 2px; }
.compact-showcase .film-choice-copy { padding: 16px 12px; }
.compact-showcase .film-choice-copy strong { font-size: 15px; line-height: 1.3; font-weight: 570; }
.compact-showcase .film-choice-copy>span { font-size: 12px; line-height: 1.5; margin-top: 7px; }
.page-index .screens-section { padding-block: 42px 78px; }
.page-index .app-shots>li { flex-basis: 210px; }
.page-index .app-shot-image { border-radius: 22px; padding: 9px; }
.page-index .app-shots figcaption { padding-top: 15px; }
.page-index .shots-note { font-size: 12px; }
.page-index .shots-controls button { font-size: 13px; }

/* The protection remains interactive; the surrounding hierarchy is quieter. */
.protection-section { padding-bottom: 0; }
.protection-section .section-head>p { font-size: 16px; }
.protection-step { border-radius: 18px; }
.protection-stage { border-radius: var(--panel-radius); }
.protection-step small,.protection-panel>p { font-size: 14px; }
.demo-stage-top,.demo-state,.demo-stage-bottom p { font-size: 12px; }
.demo-stage-top { letter-spacing: .025em; }
.demo-stage-bottom p { max-width: 23ch; }
.demo-next { font-size: 14px; }
.phase-overview { padding-block: 72px; }
.phase-route { background: var(--surface); }
.phase-route>a { padding: 28px 20px; }
.phase-route>a>span,.phase-route p,.phase-overview-note { font-size: 12px; }
.phase-overview-note { line-height: 1.7; }
.launch-groups { gap: 70px; }
.launch-groups article:last-child { padding-left: 50px; border-left: 1px solid var(--line); }
.launch-groups p { font-size: 16px; }
.launch-faq { padding-top: 0; }
.faq-list summary { font-weight: 500; font-size: 18px; }
.closing-cta { padding-block: 90px; }
.closing-cta h2 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.closing-cta>img { opacity: .45; }
.site-footer { padding-top: 60px; }
.footer-grid { gap: 35px; }
.footer-note .mini-star { font-size: 26px; }

/* Motion is short and anchored to the content. No perpetual bobbing. */
@media(prefers-reduced-motion:no-preference) {
 html.intro-pending .hero-intro,html.intro-pending .hero-showcase { animation: none!important; }
 html.presentation-enter:not(.motion-paused) .hero-intro { animation: product-copy-in .7s cubic-bezier(.2,.7,.3,1) both; }
 html.presentation-enter:not(.motion-paused) .hero-showcase { animation: product-copy-in 1s .15s cubic-bezier(.2,.7,.3,1) both; }
 html:not(.motion-paused) .product-scene.is-swapping { animation: product-copy-in .5s ease both; }
 .will-reveal { transition-duration: .65s; }
 @keyframes product-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}
html.motion-paused .hero-intro,html.motion-paused .hero-showcase,html.motion-paused .product-scene { animation: none; }
@media(prefers-reduced-motion:reduce) { .hero-intro,.hero-showcase,.product-scene { animation: none!important; } }

@media(max-width:1000px) {
 .compact-showcase .film-copy { padding: 32px; }
 .launch-groups { gap: 40px; }
 .launch-groups article:last-child { padding-left: 30px; }
}
@media(max-width:700px) {
 :root { --section-space: 62px; }
 .shell { width: calc(100% - 40px); }
 .button { min-height: 48px; font-size: 14px; padding: 12px 20px; }
 .showcase-hero { padding-top: 38px; }
 .hero-intro .eyebrow { margin-bottom: 18px; font-size: 11px; }
 .hero-intro h1 { font-size: clamp(2.8rem, 12.4vw, 4.8rem); line-height: 1.02; letter-spacing: -.06em; }
 .hero-intro .lead { font-size: 16px; max-width: 34ch; margin-top: 22px; }
 .hero-intro .actions { margin-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 20px; }
 .hero-intro .text-link { font-size: 13px; }
 .hero-showcase { margin-top: 34px; width: 100%; }
 .product-scene { height: 417px; }
 .scene-player { width: 146px; padding: 3px; border-radius: 21px; }
 .scene-player video { border-radius: 17px; }
 .scene-side { width: 108px; top: 43px; padding: 3px; border-radius: 18px; }
 .scene-side img { border-radius: 14px; }
 .scene-left { left: calc(50% - 172px); transform: rotate(-8deg); }
 .scene-right { right: calc(50% - 172px); transform: rotate(8deg); }
 .scene-caption { gap: 12px; margin: 25px 20px 0; flex-direction: column; }
 .scene-caption>p { font-size: 12px; text-align: center; }
 .scene-caption .film-toggle { font-size: 12px; min-height: 40px; }
 .hero-context { padding-block: 20px 28px; gap: 7px; }
 .hero-context p { font-size: 12px; }
 .hero-context p:last-child { max-width: 34ch; }
 .proof-strip .shell { gap: 14px; justify-content: space-between; }
 .proof-strip span { font-size: 11px; }
 .proof-strip span::before { display: none; }
 .section-head h2,.compact-showcase h2 { font-size: 36px; }
 .protection-section .section-head>p { font-size: 14px; }
 .protection-step { padding: 12px 9px; gap: 7px; min-height: 106px; }
 .protection-step>strong { font-size: 12px; }
 .protection-step>span { font-size: 11px; }
 .demo-stage-top { font-size: 10px; flex-wrap: wrap; }
 .demo-state { font-size: 11px; padding-inline: 10px; }
 .demo-stage-bottom p { font-size: 11px; }
 .demo-next { font-size: 12px; white-space: normal; text-align: right; }
 .compact-showcase .section-head { display: block; margin-bottom: 28px; }
 .compact-showcase .section-head>p { font-size: 15px; margin-top: 18px; }
 html .compact-showcase .film-feature { grid-template-columns: 1fr; border-radius: 24px; }
 .compact-showcase .film-copy { padding: 28px 26px 8px; }
 .compact-showcase .film-copy h3 { font-size: 31px; }
 .compact-showcase .film-copy .eyebrow { font-size: 11px; margin-bottom: 16px; }
 .compact-showcase .film-copy .lead { font-size: 15px; max-width: none; }
 .compact-showcase .film-toggle { margin-top: 20px; }
 .compact-showcase .film-note,.compact-showcase .media-language-note { font-size: 12px; }
 html .compact-showcase .film-screen { padding: 20px 20px 30px; }
 .compact-showcase .film-screen-caption { font-size: 11px; }
 .compact-showcase .film-video-wrap video { width: 215px; height: auto; }
 .compact-showcase .film-library { gap: 8px; }
 html .compact-showcase .film-choice { display: block; min-height: 0; text-align: left; border-radius: 13px; }
 .compact-showcase .film-choice-art { display: none; }
 .compact-showcase .film-choice-copy { display: block; padding: 15px 10px; }
 .compact-showcase .film-choice-copy strong { font-size: 12px; }
 .compact-showcase .film-choice-copy>span { display: none; }
 .page-index .screens-section { padding-block: 30px 54px; }
 .page-index .app-shots>li { flex-basis: 186px; }
 .page-index .screens-section .section-head { gap: 18px; }
 .page-index .screens-section h2 { font-size: 27px; }
 .phase-overview { padding-block: 52px; }
 .phase-route>a { padding: 20px 12px; }
 .phase-route p { font-size: 11px; }
 .phase-route>a>span { font-size: 11px; }
 .phase-overview-note { font-size: 12px; }
 .launch-groups { gap: 32px; }
 .launch-groups article:last-child { padding-left: 0; padding-top: 30px; border-left: 0; border-top: 1px solid var(--line); }
 .faq-list summary { font-size: 16px; line-height: 1.5; }
 .closing-cta { padding-block: 64px; }
 .closing-cta h2 { font-size: 37px; }
 .site-footer { padding-top: 44px; }
}
@media(max-width:360px) {
 .shell { width: calc(100% - 32px); }
 .hero-intro h1 { font-size: 43px; }
 .scene-left { left: calc(50% - 151px); }
 .scene-right { right: calc(50% - 151px); }
 .scene-side { width: 94px; top: 55px; }
 .proof-strip .shell { gap: 8px; }
 .proof-strip span { font-size: 10px; }
}

.hero-preview-link{display:inline-flex;align-items:center;gap:10px;min-height:44px}.hero-preview-link>span{font-size:12px;color:var(--muted);font-weight:400}.intro-choice{border-radius:22px}.intro-choice-action{border-radius:12px}.intro-dialog .intro-welcome h2{font-weight:550;letter-spacing:-.05em}

/* Keep headings consistent across both presentations. */
h2 em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
html[lang="es"] .media-language-note { display: none; }
@media(min-width:701px) and (prefers-reduced-motion:no-preference) {
 .scene-left { --scene-angle:-9deg; }
 .scene-right { --scene-angle:9deg; }
 html.presentation-enter:not(.motion-paused):not(.intro-pending) .scene-side { animation: product-fan-in .85s .2s cubic-bezier(.2,.7,.3,1) backwards; }
 @keyframes product-fan-in { from { opacity: 0; transform: translateY(24px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(var(--scene-angle)); } }
}

/* Protection as a readable sequence, not a simulated app screen. */
.protection-section .flow-context { font-size: 14px; color: var(--muted); max-width: none; }
.protection-flow { --flow-accent: var(--purple); }
.flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-step { appearance: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 36px 36px; background: transparent; color: var(--ink); border: 0; border-radius: 0; border-bottom: 1px solid var(--line); transition: background .25s; min-width: 0; }
.flow-step:first-child { padding-left: 0; }
.flow-step+.flow-step { border-left: 1px solid var(--line); }
.flow-index { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.flow-value { display: flex; align-items: baseline; gap: 9px; font-size: clamp(3.8rem, 6vw, 5.8rem); font-weight: 500; line-height: 1.05; letter-spacing: -.06em; margin-block: 32px 22px; color: var(--ink); }
.flow-value small { font-size: 22px; letter-spacing: -.02em; font-weight: 400; color: var(--muted); }
.flow-value.flow-words { font-size: clamp(2.5rem, 4.3vw, 4rem); min-height: 1.45em; align-items: center; letter-spacing: -.05em; }
.flow-caption { display: block; font-size: 16px; line-height: 1.55; min-height: 1.55em; color: var(--muted); }
.flow-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--flow-accent); transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.flow-step[aria-selected="true"]::after { transform: scaleX(1); }
.flow-step[aria-selected="true"] .flow-index { color: var(--flow-accent); }
.flow-step:hover { background: #877cba06; }
.flow-step:focus-visible { outline-offset: -5px; border-radius: 4px; }
.flow-detail { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; padding-top: 28px; min-height: 104px; }
.flow-panel { max-width: 58ch; font-size: 16px; color: var(--muted); line-height: 1.65; }
.flow-detail>.text-link { margin-top: 3px; flex-shrink: 0; font-size: 14px; }
html.motion-paused .flow-panel { animation: none!important; }
@media(prefers-reduced-motion:reduce) { .flow-step,.flow-step::after { transition: none; }.flow-panel { animation: none!important; } }
@media(max-width:1000px) {
 .flow-step { padding-inline: 24px; }
 .flow-caption { font-size: 15px; }
 .flow-detail { gap: 24px; }
 .flow-detail>.text-link { max-width: 24ch; }
}
@media(max-width:700px) {
 .protection-section .section-head { margin-bottom: 20px; }
 .protection-section .flow-context { font-size: 13px; margin-top: 16px; }
 .flow-steps { grid-template-columns: 1fr; }
 .flow-step+.flow-step { border-left: 0; }
 .flow-step,.flow-step:first-child { display: grid; grid-template-columns: 76px 1fr; column-gap: 20px; padding: 23px 0 24px; border-left: 0; }
 .flow-index { grid-column: 1; grid-row: 1 / span 2; font-size: 10px; letter-spacing: .05em; align-self: center; line-height: 1.6; }
 .flow-value,.flow-value.flow-words { grid-column: 2; grid-row: 1; font-size: 48px; min-height: 0; margin: 0 0 8px; line-height: 1.05; }
 .flow-value.flow-words { font-size: 35px; min-height: 50px; }
 .flow-value small { font-size: 18px; }
 .flow-caption { grid-column: 2; grid-row: 2; min-height: 0; font-size: 14px; }
 .flow-detail { display: block; padding-top: 23px; min-height: 156px; }
 .flow-panel { font-size: 15px; }
 .flow-detail>.text-link { display: inline-block; margin-top: 20px; max-width: none; font-size: 13px; }
}
@media(max-width:360px) {
 .flow-step,.flow-step:first-child { grid-template-columns: 65px 1fr; column-gap: 16px; }
 .flow-value.flow-words { font-size: 30px; }
 .flow-value { font-size: 44px; }
 .flow-caption { font-size: 13px; }
}

/* Reuse the app logo in the Apple protection note. */
.permission-logo { width: 104px; height: 104px; object-fit: contain; flex: 0 0 auto; border-radius: 25%; }
html[data-site-style="focus"] .permission-logo { filter: grayscale(1) brightness(.68) contrast(5); box-shadow: 0 0 0 1px #ffffff20; }
@media(max-width:700px) { .permission-logo { width: 64px; height: 64px; } }

/* A small set of real figures; the download total remains unset until launch. */
.numbers-section { padding-bottom: 0; }
.numbers-section .section-head { margin-bottom: 42px; }
.numbers-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.number-stat { padding: 40px 34px; min-width: 0; }
.number-stat:first-child { padding-left: 0; }
.number-stat+.number-stat { border-left: 1px solid var(--line); }
.number-value { display: block; font-size: clamp(3.5rem, 6.5vw, 6rem); font-weight: 530; letter-spacing: -.06em; line-height: 1.12; font-variant-numeric: tabular-nums; color: var(--purple); min-height: 1.12em; overflow-wrap: anywhere; }
.number-stat h3 { font-size: 18px; letter-spacing: -.025em; margin-top: 24px; }
.number-stat p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 10px; max-width: 29ch; }
.download-stat:not(.has-downloads) .number-value { opacity: .45; }
[data-count] { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip-path: inset(50%)!important; white-space: nowrap!important; border: 0!important; }

/* Scroll reveals, gentle depth and a line that follows the five phases. */
@media(prefers-reduced-motion:no-preference) {
 html:not(.motion-paused) [data-reveal].will-reveal { transition: opacity .75s var(--reveal-delay,0ms) ease, transform .75s var(--reveal-delay,0ms) cubic-bezier(.2,.7,.3,1); }
 html:not(.motion-paused) [data-reveal].will-reveal:not(.revealed) { opacity: 0; transform: translateY(30px); }
 html:not(.motion-paused) [data-reveal].revealed { opacity: 1; transform: none; }
 html:not(.motion-paused) [data-reveal]:focus-within { opacity: 1; transform: none; transition-delay: 0ms; }
 html.motion-ready:not(.motion-paused) .page-hero { animation: product-copy-in .7s cubic-bezier(.2,.7,.3,1) both; }
 html[data-site-style="focus"]:not(.motion-paused) .site-cosmos::before { animation: none; transform: translateY(var(--sky-shift,0px)) scale(1.03); }
 html.motion-ready:not(.motion-paused) .scene-left { translate: calc(var(--scene-scroll,.35) * -32px) calc(var(--scene-scroll,.35) * -22px); }
 html.motion-ready:not(.motion-paused) .scene-right { translate: calc(var(--scene-scroll,.35) * 32px) calc(var(--scene-scroll,.35) * -22px); }
 .phase-route { position: relative; }
 html.motion-ready:not(.motion-paused) .phase-route::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--purple) 20%, var(--purple)); transform: scaleX(var(--route-progress,0)); transform-origin: left; pointer-events: none; }
 .phase-tabs button { transition: background .25s,color .25s,transform .3s; }
 .phase-meter span { transition: width .6s cubic-bezier(.2,.7,.3,1); }
 .app-shot-image img { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
 @media(hover:hover) { .app-shots li:hover .app-shot-image img { transform: scale(1.025); }.film-choice:hover { translate: 0 -3px; } }
}
html.motion-paused .page-hero { animation: none!important; }
html.motion-paused .scene-side { translate: none; }
@view-transition { navigation: none; }
::view-transition-old(root) { animation: page-leave .2s ease both; }
::view-transition-new(root) { animation: page-arrive .38s cubic-bezier(.2,.7,.3,1) both; }
.site-header { view-transition-name: quitok-header; }
::view-transition-group(quitok-header) { animation-duration: .25s; }
@keyframes page-leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { @view-transition { navigation: none; } }
html.motion-paused::view-transition-old(root),html.motion-paused::view-transition-new(root),html.motion-paused::view-transition-group(quitok-header) { animation: none!important; }
@media(max-width:700px) {
 .numbers-section .section-head { margin-bottom: 28px; }
 .numbers-grid { grid-template-columns: 1fr 1fr; }
 .number-stat { padding: 28px 18px; }
 .download-stat { grid-column: 1 / -1; display: grid; grid-template-columns: 90px 1fr; column-gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
 .download-stat .number-value { grid-row: 1 / 3; align-self: center; }
 .number-stat:nth-child(2) { border-left: 0; padding-left: 0; }
 .number-value { font-size: 54px; }
 .number-stat h3 { font-size: 16px; margin-top: 15px; line-height: 1.25; }
 .number-stat p { font-size: 14px; }
 .download-stat h3 { margin-top: 0; }
 .download-stat p { grid-column: 2; }
 .download-stat.has-downloads { display: block; }
 .download-stat.has-downloads h3 { margin-top: 15px; }
 html.motion-ready:not(.motion-paused) .scene-left { translate: calc(var(--scene-scroll,.35) * -10px) calc(var(--scene-scroll,.35) * -12px); }
 html.motion-ready:not(.motion-paused) .scene-right { translate: calc(var(--scene-scroll,.35) * 10px) calc(var(--scene-scroll,.35) * -12px); }
}

/* The header stays in place while the next page enters. */
@media(prefers-reduced-motion:no-preference) {
 html.route-leaving:not(.motion-paused) #principal { animation: quitok-route-out .24s ease both; pointer-events: none; }
 html.route-entering:not(.motion-paused) #principal { animation: quitok-route-in .55s cubic-bezier(.2,.7,.3,1) both; }
 html.route-leaving:not(.motion-paused) .reading-progress { animation: quitok-route-line .24s ease both; transform-origin: left; }
 @keyframes quitok-route-out { to { opacity: .08; translate: 0 -18px; } }
 @keyframes quitok-route-in { from { opacity: .08; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
 @keyframes quitok-route-line { to { transform: scaleX(1); opacity: 1; } }
}
html.motion-paused.route-leaving #principal,html.motion-paused.route-entering #principal { animation: none!important; pointer-events: auto; }

/* Readable text on the companion mode's light surfaces. */
html[data-site-style="pet"] .example-note .eyebrow{color:#5d4a5b}
html[data-site-style="pet"] .example-note p,html[data-site-style="pet"] .example-note .small-text{color:#514553}
html[data-site-style="pet"] .creator-line div>span{color:#62556c}
html[data-site-style="pet"] .library-detail .small-text{color:#62526c}