/* Design tokens: design/idea.md §2 (ink + two light grounds + five pastel accents). */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-tight-latin-wght-normal.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: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-tight-vietnamese-wght-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-wght-normal.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-vietnamese-wght-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root {
  --ink: #221c38;
  --ink-soft: #5d5775;
  --ivory: #fdfcfa;
  --moon: #f4f3ff;
  --moon-soft: #c9c7e4;
  --peri: #a2d2ff;
  --lav: #d0d1ff;
  --peach: #ffd6a5;
  --mint: #b7e4c7;
  --rose: #ffadad;
  --btn: oklch(0.25 0.05 292);
  --night: #1b1631;
  --line: rgba(23, 18, 38, 0.09);

  --font-display: "Inter Tight", Inter, system-ui, sans-serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-flow: cubic-bezier(.22, 1, .36, 1);

  --shadow-card: 0 2px 6px -2px rgba(23, 18, 38, .08), 0 24px 60px -24px rgba(23, 18, 38, .22);
  --shadow-card-hover: 0 4px 10px -2px rgba(23, 18, 38, .1), 0 36px 80px -28px rgba(23, 18, 38, .3);
  --shadow-btn: 0 10px 28px -10px oklch(.25 .05 292 / .55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font: 400 16px/1.625 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
::selection { background: rgba(162, 210, 255, .5); }

/* Whole-page "sky": soft pastel light behind every section (static stand-in for the canvas sky). */
.sky { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #fbfaff 0%, #fdfcfa 45%, #fffaf3 100%); }
.sky i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.sky i:nth-child(1) { width: 60vw; height: 50vw; left: -15vw; top: -18vw; background: var(--peri); }
.sky i:nth-child(2) { width: 50vw; height: 40vw; right: -12vw; top: 10vh; background: var(--lav); }
.sky i:nth-child(3) { width: 45vw; height: 38vw; left: 20vw; bottom: -20vw; background: var(--peach); opacity: .4; }
.grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.skip-link { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 10px 16px; border-radius: 9999px;
  background: var(--btn); color: var(--ivory); text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--ease-flow); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Display type scale (§2.3). <em> inside display headings is heavier, not italic. */
.display-hero, .display-xl, .display-section, .display-lg, .display-md {
  font-family: var(--font-display); text-wrap: balance; margin: 0; }
.display-hero { font-size: clamp(3rem, 9.5vw, 7rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.05em; }
.display-xl { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.045em; }
.display-section { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; }
.display-lg { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.03em; }
.display-md { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.025em; }
:is(.display-hero, .display-xl, .display-section, .display-lg, .display-md) em { font-style: normal; font-weight: 800; }
@media (max-width: 360px) { .display-hero { font-size: clamp(2.4rem, 13vw, 3rem); } }

.lead { font-size: 18px; line-height: 1.625; color: var(--ink-soft); text-wrap: pretty; }
.muted { color: var(--ink-soft); }
.num { font-family: var(--font-display); font-size: 14px; color: var(--ink-soft); }

/* Navbar (§3.2): floating glass pill. */
.nav-wrap { position: fixed; inset: 24px 16px auto; z-index: 50; }
.nav-shell { max-width: 768px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 20px; border-radius: 9999px;
  background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 40px -18px rgba(23, 18, 38, .28);
  transition: background .5s var(--ease-flow), color .5s var(--ease-flow), border-color .5s; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.nav-links a { text-decoration: none; opacity: .85; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.link-live { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; padding-bottom: 2px;
  transition: background-size .45s var(--ease-flow); }
.link-live:hover, .link-live:focus-visible, .link-live[aria-current="page"] { background-size: 100% 1px; }
html[data-sky-mode="night"] .nav-shell { background: rgba(34, 28, 56, .32); border-color: rgba(244, 243, 255, .18); color: var(--moon);
  box-shadow: inset 0 1px 0 rgba(244, 243, 255, .12), 0 12px 40px -18px rgba(0, 0, 0, .5); }
html[data-sky-mode="night"] .nav-shell .pill-ink { background: var(--moon); color: var(--ink); }
@media (max-width: 640px) {
  .nav-shell { padding-left: 14px; }
  .brand span { display: none; }
  .nav-links { gap: 14px; }
  .nav-links .pill { padding: 9px 14px; }
}

/* Pills (§4). */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; padding: 14px 26px;
  font: 500 15px/1.2 var(--font-sans); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease-flow), box-shadow .4s var(--ease-flow), background .4s var(--ease-flow); }
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: none; }
.pill-sm { padding: 10px 18px; font-size: 14px; }
.pill-ink { background: var(--btn); color: var(--ivory); box-shadow: var(--shadow-btn); }
.pill-ink:hover { box-shadow: 0 16px 36px -10px oklch(.25 .05 292 / .65), 0 0 44px -4px rgba(162, 210, 255, .55); }
.pill-ghost { background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .65); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 8px 24px -12px rgba(23, 18, 38, .2); }
.pill-ghost:hover { background: rgba(255, 255, 255, .62); box-shadow: 0 0 36px -6px rgba(162, 210, 255, .5); }
.pill svg { width: 16px; height: 16px; }

/* Section tag (§7). */
.section-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .75rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .6); border-radius: 9999px;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 3px -1px rgba(23, 18, 38, .08); }
.section-tag i { width: .3125rem; height: .3125rem; border-radius: 9999px; background: var(--dot, var(--lav)); }
.night .section-tag { background: rgba(244, 243, 255, .08); border-color: rgba(244, 243, 255, .16); color: var(--moon-soft); box-shadow: none; }

/* Glass surfaces (§2.5). */
.sheet { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .6); border-radius: 32px;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: var(--shadow-card); }

/* Wave stroke (§1.4). */
.wave { width: 112px; height: 14px; overflow: visible; }
.wave path { fill: none; stroke-width: 4; stroke-linecap: round; }

/* Layout. */
.section { position: relative; padding: 80px 24px; }
.container { max-width: 1152px; margin: 0 auto; }
.narrow { max-width: 672px; margin: 0 auto; }
.center { text-align: center; }
@media (min-width: 640px) { .section { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 768px) { .section { padding-top: 112px; padding-bottom: 112px; } }

/* Hero. */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 144px; padding-bottom: 96px; overflow: hidden; }
.hero-waves { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent); }
.hero .hero-waves { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.hero-waves span { position: absolute; left: -20%; width: 140%; height: 22%; border-radius: 50%; filter: blur(34px); opacity: .7;
  animation: drift 26s ease-in-out infinite alternate; }
.hero-waves span:nth-child(1) { top: 8%; background: var(--peri); }
.hero-waves span:nth-child(2) { top: 30%; background: var(--mint); animation-duration: 31s; animation-direction: alternate-reverse; }
.hero-waves span:nth-child(3) { top: 52%; background: var(--peach); animation-duration: 28s; }
.hero-waves span:nth-child(4) { top: 74%; background: var(--lav); animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateX(-6%) rotate(-2deg); } to { transform: translateX(6%) rotate(2deg); } }
.hero-veil { position: absolute; inset: 0 -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 62%); filter: blur(26px) saturate(1.15); }
.hero-mark { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 18px var(--font-display); }
.hero-mark img { width: 36px; height: 36px; border-radius: 10px; }
.hero h1 { margin-top: 24px; }
.hero .lead { max-width: 576px; margin: 32px auto 0; }
.hero-actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.signature { margin-top: 40px; font: 400 14px var(--font-display); color: var(--ink-soft); opacity: .8; }
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.line-mask > span { display: block; }

/* Night section (§5). */
.night { color: var(--moon); background: linear-gradient(180deg,
  rgba(208, 209, 255, 0) 0, rgba(190, 186, 238, .75) 60px, #5a5190 120px, var(--night) 190px,
  var(--night) calc(100% - 190px), #5a5190 calc(100% - 120px), rgba(190, 186, 238, .75) calc(100% - 60px), rgba(208, 209, 255, 0) 100%); }
.night .lead, .night .muted { color: var(--moon-soft); }
.stat-grid { display: grid; gap: 28px; margin-top: 64px; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.stat-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(30, 31, 62, .62), rgba(18, 19, 44, .42)); border: 1px solid rgba(244, 243, 255, .1);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 32px 70px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(244, 243, 255, .08);
  transition: transform .6s var(--ease-flow), border-color .6s, box-shadow .6s; }
@media (hover: hover) { .stat-card:hover { transform: translateY(-.5rem); border-color: rgba(244, 243, 255, .22); box-shadow: 0 46px 90px -32px rgba(0, 0, 0, .9); } }
.stat-num { font: 700 clamp(3rem, 6vw, 3.8rem)/.9 var(--font-display); letter-spacing: -0.04em; }
.stat-title { margin: 16px 0 0; font: 600 20px/1.375 var(--font-display); }
.stat-card .wave { width: 140px; height: 18px; margin: 22px 0; }
.stat-card .wave path { stroke-width: 6; }
.stat-body { margin: 0; font-size: 14px; line-height: 1.625; color: var(--moon-soft); }

/* Features sheet: three columns in one glass panel (§8). */
.phil { display: grid; margin-top: 24px; padding: 8px 16px; border-radius: 36px; }
.phil-col { padding: 36px 20px; }
.phil-col + .phil-col { border-top: 1px solid var(--line); }
.phil-col h3 { margin-top: 16px; max-width: 16ch; }
.phil-col .wave { margin-top: 22px; }
.phil-col p { margin: 26px 0 0; color: var(--ink-soft); text-wrap: pretty; }
@media (min-width: 768px) {
  .phil { grid-template-columns: repeat(3, 1fr); padding: 24px 16px; }
  .phil-col { padding: 40px 32px; }
  .phil-col + .phil-col { border-top: 0; border-left: 1px solid var(--line); }
}

/* Demo conversation (§11 chat frame). */
.chat { max-width: 672px; margin: 56px auto 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-bottom: 1px solid rgba(34, 28, 56, .1); }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 9999px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .7); font: 600 14px var(--font-display); }
.chat-head strong { display: block; font: 600 18px/1.2 var(--font-display); }
.status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: #5fbf85; box-shadow: 0 0 0 3px rgba(183, 228, 199, .6); }
.chat-body { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.msg { display: flex; gap: 12px; align-items: flex-end; }
.msg.me { flex-direction: row-reverse; }
.bubble { max-width: 82%; margin: 0; padding: 14px 20px; border-radius: 22px 22px 22px 10px; background: var(--moon); border: 1px solid rgba(34, 28, 56, .07); }
.avatar.peach { background: var(--peach); border-color: transparent; }
.avatar.peri { background: var(--peri); border-color: transparent; }
.avatar.lav { background: var(--lav); border-color: transparent; }
.chat-section { overflow: hidden; }
.chat-section .hero-waves span { opacity: .45; }
.msg.me .bubble { border-radius: 22px 22px 10px 22px; background: var(--btn); color: var(--ivory); border-color: transparent; }
.bubble .said { display: block; font-size: 13px; color: var(--ink-soft); }
.msg.me .bubble .said { color: rgba(253, 252, 250, .7); }
.bubble .heard { display: block; margin-top: 4px; font-size: 16px; line-height: 1.6; }
.bubble .lang { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 9999px; font: 600 10px/1.6 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; background: rgba(34, 28, 56, .07); }
.msg.me .bubble .lang { background: rgba(253, 252, 250, .14); }
.chat-foot { padding: 14px 24px; border-top: 1px solid rgba(34, 28, 56, .1); font-size: 13px; color: var(--ink-soft); text-align: center; }

/* Steps (§10, simplified: alternating columns with a coloured wave). */
.steps { list-style: none; margin: 40px 0 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--peri), var(--rose), var(--mint), var(--lav)); opacity: .8; }
.steps li { position: relative; padding: 36px 0 36px 52px; }
.steps li::before { content: ""; position: absolute; left: 1px; top: 42px; width: 20px; height: 20px; border-radius: 9999px; background: #fff; border: 1.5px solid var(--ink-soft); }
.steps h3 { margin-top: 10px; }
.steps .wave { margin-top: 18px; width: 128px; }
.steps p { margin: 20px 0 0; max-width: 448px; color: var(--ink-soft); }
@media (min-width: 768px) {
  .steps::before { left: 50%; margin-left: -1.5px; }
  .steps li { width: 50%; padding: 56px 64px 56px 0; }
  .steps li::before { left: auto; right: -10px; top: 64px; }
  .steps li:nth-child(even) { margin-left: 50%; padding: 56px 0 56px 64px; }
  .steps li:nth-child(even)::before { right: auto; left: -10px; }
}

/* Closing CTA. */
.cta { overflow: hidden; }
.cta .sheet { max-width: 720px; margin: 0 auto; padding: 56px 28px; text-align: center; }
.cta .lead { max-width: 520px; margin: 20px auto 0; }
.cta .hero-actions { margin-top: 32px; }

/* Footer (§15). */
.site-footer { position: relative; padding: 72px 24px 40px; }
.footer-grid { display: grid; gap: 40px; text-align: center; }
.footer-grid h4 { margin: 0 0 12px; font: 600 18px var(--font-display); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink-soft); text-decoration: none; }
.footer-grid p { margin: 12px 0 0; color: var(--ink-soft); }
.footer-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--ink-soft); }
.footer-base .signature { margin: 0 0 6px; }
@media (min-width: 768px) {
  .site-footer { padding-left: 40px; padding-right: 40px; }
  .footer-grid { grid-template-columns: 5fr 3fr 4fr; text-align: left; }
}
.footer-grid .brand { justify-content: center; color: var(--ink); }
@media (min-width: 768px) { .footer-grid .brand { justify-content: flex-start; } }

/* Policy pages: a readable glass sheet (policy-layout). */
.policy { padding: 136px 16px 40px; }
.policy-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.policy-head h1 { margin-top: 20px; }
.policy-head .meta { margin: 14px 0 0; font: 400 14px var(--font-display); color: var(--ink-soft); }
.policy-body { max-width: 760px; margin: 0 auto; padding: 28px 22px; font-size: 16px; line-height: 1.75; }
@media (min-width: 640px) { .policy-body { padding: 48px 56px; } }
.policy-body > :first-child { margin-top: 0; }
.policy-body h2 { margin: 40px 0 10px; font: 600 22px/1.25 var(--font-display); letter-spacing: -0.02em; }
.policy-body h2:first-of-type { margin-top: 32px; }
.policy-body p, .policy-body li { color: #3d3754; }
.policy-body ul { padding-left: 20px; }
.policy-body li + li { margin-top: 6px; }
.policy-body a { color: var(--ink); text-decoration-color: rgba(34, 28, 56, .35); text-underline-offset: 3px; }
.policy-body code { overflow-wrap: anywhere; font-size: .9em; padding: 1px 6px; border-radius: 6px; background: rgba(208, 209, 255, .35); }
.table-scroll { overflow-x: auto; margin: 16px -4px; }
.policy-body table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.policy-body th, .policy-body td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.policy-body th { font: 600 12px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* Reveal on scroll (§16.2). Only hidden when JS is running, so content never disappears without it. */
.js .rv { opacity: 0; transition: opacity .9s var(--ease-flow), transform .9s var(--ease-flow), filter .9s var(--ease-flow); transition-delay: var(--rv-delay, 0s); }
.js .rv-rise { transform: translateY(30px); }
.js .rv-blur { filter: blur(14px); transform: translateY(12px) scale(.995); }
.js .rv-zoom { transform: translateY(18px) scale(.94); }
.js .stat-rise { transform: translateY(3rem) scale(.97); }
.js .rv.is-in { opacity: 1; transform: none; filter: none; }
.js .line-mask > span { transform: translateY(110%); transition: transform 1.1s var(--ease-flow) var(--line-delay, .1s); }
.js .is-loaded .line-mask > span { transform: none; }
.draw-on { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .draw-on { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-flow) var(--draw-delay, .3s); }
.js .is-in .draw-on, .js .draw-on.is-in { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .line-mask > span { opacity: 1; transform: none; filter: none; }
  .js .draw-on { stroke-dashoffset: 0; }
}