/* Public site (home, features, use cases, pricing, about, FAQ, contact, legal, errors). Builds on the tokens in app.css.
   Direction "editorial ledger": serif display type (Fraunces), Geist for text, Geist Mono for labels, a hairline
   grid instead of boxes and shadows, and the editor's red pen (coral) for anything risky.
   Motion: .reveal fades up once in view; rules draw in; the hero demo marks up a draft. All of it is off when the
   visitor asks for reduced motion. Logical properties keep RTL correct; RTL uses Vazirmatn throughout. */

.site {
  --wrap: 1240px; --nav-h: 68px; --gutter: 20px;
  --rule: color-mix(in srgb, var(--text) 13%, transparent);
  --rule-strong: color-mix(in srgb, var(--text) 30%, transparent);
  --ink: #111b22; --on-ink: #f3efe6; --on-ink-2: rgba(243, 239, 230, .68); --on-ink-rule: rgba(243, 239, 230, .16);
  --pen: var(--gold);
  --ease: cubic-bezier(.2, .7, .15, 1);
  overflow-x: clip;
}
@media (min-width: 760px) { .site { --gutter: 32px; } }
.site main { display: block; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap.narrow { width: min(860px, 100% - var(--gutter) * 2); }
.center { text-align: center; }
.center .hero-ctas, .center.hero-ctas { justify-content: center; }
.site .center > .row, .site div.center { justify-content: center; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.flip { transition: transform .3s var(--ease); }
[dir=rtl] .flip { transform: scaleX(-1); }
.site ::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }

/* ---------- Type ---------- */
.mono, .eyebrow, .sec-label, .footer-h, .toc-h {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.site .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--text-2); }
.site .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--primary); }
.display {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 380; font-size: clamp(40px, 6.4vw, 84px);
  line-height: .98; letter-spacing: -0.035em; margin: 22px 0 0; text-wrap: balance;
}
.display em, .h-section em, .grad-text { font-style: italic; font-weight: 340; color: var(--primary); }
.h-section {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: clamp(30px, 4vw, 52px);
  line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 16px; text-wrap: balance;
}
.site h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 8px; }
.hero-lead { font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.6; color: var(--text-2); margin: 22px 0 0; max-width: 58ch; text-wrap: pretty; }
.center .hero-lead { margin-inline: auto; }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; }
.section-head .muted, .sec-intro { font-size: 17px; line-height: 1.65; max-width: 62ch; }

/* ---------- Brand mark ---------- */
.site .logo { gap: 11px; }
.wordmark { font-weight: 700; letter-spacing: .16em; font-size: 14.5px; }

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule); transition: background .25s;
}
.site-nav.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 8px; }
.nav-inner > .logo span { white-space: nowrap; }
.nav-inner .spacer { flex: 1; }
.nav-links { display: none; }
.nav-cta { display: none; }
.nav-toggle { display: grid; }
.burger { display: grid; gap: 5px; width: 20px; }
.burger span { display: block; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
[aria-expanded=true] .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
[aria-expanded=true] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded=true] .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.site-nav .icon-btn { border-color: transparent; background: transparent; }
.site-nav .icon-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }

/* Phones: the links open as a full-width sheet with large serif links. */
@media (max-width: 899px) {
  .site-nav .controls a.icon-btn { display: none; } /* log in lives in the menu sheet */
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; inset-inline: 0; top: var(--nav-h); height: calc(100dvh - var(--nav-h));
    padding: 8px var(--gutter) 28px; background: var(--bg); overflow-y: auto; animation: sheet-in .35s var(--ease);
  }
  .nav-links.open > a {
    padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none;
    font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15;
  }
  .nav-links.open > a[aria-current=page] { color: var(--primary); font-style: italic; }
  .nav-cta-mobile { display: grid; gap: 10px; margin-top: auto; padding-top: 28px; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 900px) {
  .nav-links { display: flex; align-items: center; gap: 2px; margin-inline-start: 28px; }
  .nav-links > a { position: relative; padding: 8px 12px; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 14.5px; transition: color .2s; }
  .nav-links > a:hover, .nav-links > a[aria-current=page] { color: var(--text); }
  .nav-links > a::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: var(--origin, left); transition: transform .35s var(--ease); }
  [dir=rtl] .nav-links > a::after { --origin: right; }
  .nav-links > a:hover::after, .nav-links > a[aria-current=page]::after { transform: scaleX(1); }
  .nav-links > a[aria-current=page]::after { background: var(--primary); }
  .nav-cta-mobile, .nav-toggle { display: none; }
  .nav-cta { display: inline-flex; margin-inline-start: 6px; }
}

/* ---------- Buttons ---------- */
.site .btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.005em; transition: background .2s, color .2s, border-color .2s, transform .3s var(--ease); }
.site .btn.lg { padding: 15px 24px; font-size: 16px; }
.site .btn:not(.secondary):not(.ghost):not(.ghost-light):not(.light) { background: var(--text); border-color: var(--text); color: var(--bg); }
.site .btn:not(.secondary):not(.ghost):not(.ghost-light):not(.light):hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.site .btn.secondary { background: transparent; border: 1px solid var(--rule-strong); color: var(--text); }
.site .btn.secondary:hover { border-color: var(--text); background: transparent; }
.site .btn:hover .flip { transform: translateX(4px); }
.site[dir=rtl] .btn:hover .flip, [dir=rtl] .site .btn:hover .flip { transform: scaleX(-1) translateX(4px); }
.btn.light { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.btn.light:hover { background: #fff; }
.btn.ghost-light { background: transparent; color: var(--on-ink); border: 1px solid rgba(255, 255, 255, .4); }
.btn.ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--rule-strong); transition: border-color .2s, color .2s; }
.text-link:hover { color: var(--primary); border-color: var(--primary); }
.text-link:hover .flip { transform: translateX(4px); }
[dir=rtl] .text-link:hover .flip { transform: scaleX(-1) translateX(4px); }

/* ---------- Badges & status ---------- */
.chip, .meta-status { display: inline-flex; align-items: center; gap: 9px; }
.chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--rule); color: var(--text-2); font-size: 13px; font-weight: 500; }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }

/* ---------- Sections ---------- */
.band { padding: 72px 0; position: relative; }
.band.alt { background: var(--surface-2); }
.band.tight-top { padding-top: 8px; border-top: 0 !important; }
@media (min-width: 960px) { .band { padding: 120px 0; } .band.tight-top { padding-top: 16px; } }

/* Section header: a numbered label in the margin, the headline in the body column. */
.site main { counter-reset: sec; }
.sec-head { display: grid; gap: 4px; margin-bottom: 48px; }
.sec-label { display: flex; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--text); counter-increment: sec; }
.sec-label::before { content: counter(sec, decimal-leading-zero); color: var(--primary); }
[dir=rtl] .sec-label::before { content: counter(sec, persian); }
.sec-head .h-section { margin-top: 18px; max-width: 18ch; }
.sec-head .sec-intro { color: var(--text-2); margin: 0; }
@media (min-width: 960px) {
  .sec-head { grid-template-columns: 3fr 9fr; column-gap: 32px; margin-bottom: 72px; border-top: 1px solid var(--rule); }
  .sec-head .sec-label { grid-row: span 2; align-self: start; margin-top: -1px; }
  .sec-head .h-section { margin-top: 0; padding-top: 22px; }
  .on-ink .sec-head { border-color: var(--on-ink-rule); }
  .sec-head .sec-intro { grid-column: 2; }
  .sec-head.wide-title .h-section { max-width: 22ch; }
}
.on-ink .sec-label { border-color: var(--on-ink); color: var(--on-ink-2); }
.on-ink .sec-label::before { color: #8fd8e0; }

/* Hairline columns replace icon cards. Used by the home page and inner pages. */
.pain-grid, .cards-3, .trust-grid, .cols-3 { display: grid; border-top: 1px solid var(--rule); }
.pain-grid > *, .cards-3 > *, .trust-grid > *, .cols-3 > * { padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) {
  .pain-grid, .cards-3, .trust-grid, .cols-3 { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
  .pain-grid > *, .cards-3 > *, .trust-grid > *, .cols-3 > * { padding: 32px 28px 40px; border-bottom: 0; }
  .pain-grid > * + *, .cards-3 > * + *, .trust-grid > * + *, .cols-3 > * + * { border-inline-start: 1px solid var(--rule); }
  .pain-grid > :first-child, .cards-3 > :first-child, .trust-grid > :first-child, .cols-3 > :first-child { padding-inline-start: 0; }
  .pain-grid > :last-child, .cards-3 > :last-child, .trust-grid > :last-child, .cols-3 > :last-child { padding-inline-end: 0; }
}
.pain p, .tile p, .trust p, .steps p, .col p { color: var(--text-2); margin: 0; font-size: 15.5px; line-height: 1.65; }
.col-n { display: block; margin-bottom: 36px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--primary); }
.cols-3 { counter-reset: col; }
.col-n::before { counter-increment: col; content: counter(col, lower-roman) "."; }
[dir=rtl] .col-n::before { content: counter(col, persian); }
.tile { position: relative; background: none; }
a.tile { color: inherit; text-decoration: none; }
.ico-lg { display: inline-grid; place-items: center; width: auto; height: auto; margin: 0 0 30px; color: var(--primary); background: none; }
.ico-lg.gold { color: var(--pen); }
.ico-lg.ok { color: var(--ok); }
.ico-lg .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.trust { display: grid; gap: 0; }
.trust > .icon { width: 26px; height: 26px; stroke-width: 1.4; color: var(--primary); margin-bottom: 30px; }

/* ---------- Home hero ---------- */
.hero-ed { padding: 28px 0 72px; position: relative; }
.meta-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.meta-status { color: var(--text) !important; }
.display-xl {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 360; margin: 30px 0 0;
  font-size: clamp(48px, 13.6vw, 120px); line-height: .92; letter-spacing: -0.045em;
}
.display-xl .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.display-xl .ln > * { display: block; }
.display-xl em { font-style: italic; font-weight: 300; color: var(--primary); }
@media (min-width: 960px) { .display-xl { font-size: min(10.4vw, 156px); } .display-xl .ln:nth-child(2) { padding-inline-start: 1.1em; } }
.hero-cols { display: grid; gap: 56px; margin-top: 44px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.hero-facts { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.hero-facts li { padding: 14px 12px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
[dir=rtl] .hero-facts li { padding: 14px 0 0 12px; }
.hero-facts li + li { padding-inline-start: 14px; border-inline-start: 1px solid var(--rule); }
.hero-facts .icon { display: block; width: 18px; height: 18px; margin-bottom: 10px; color: var(--primary); stroke-width: 1.5; }
@media (min-width: 960px) {
  .hero-ed { padding: 40px 0 120px; }
  .hero-cols { grid-template-columns: 5fr 7fr; gap: 72px; margin-top: 64px; align-items: start; }
  .hero-left { padding-top: 6px; }
}

/* The hero demo: a sheet of lined paper that an editor marks up. States come from site.js. */
.hero-demo { position: relative; width: 100%; max-width: 680px; justify-self: end; }
.sheet {
  --lh: 32px; position: relative; margin: 0; background: var(--surface); border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 40px 80px -48px rgba(17, 27, 34, .35);
}
.sheet::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; z-index: -1; border: 1px solid var(--rule); background: var(--surface-2); }
[dir=rtl] .sheet::after { inset: 10px 10px -10px -10px; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.sheet-head .mono { color: var(--text-2); }
.sheet-angle { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--primary); }
.sheet-body { display: grid; padding: 18px 20px 22px; }
@media (min-width: 640px) { .sheet-body { grid-template-columns: 1fr 190px; gap: 26px; padding: 22px 26px 26px; } }
.demo-text {
  margin: 0; min-height: calc(var(--lh) * 5); font-family: var(--font-display); font-size: 20px; line-height: var(--lh); letter-spacing: -0.01em;
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
}
.demo-risk {
  display: none; color: inherit; padding: 0; border-radius: 0; font-weight: inherit;
  background: linear-gradient(var(--pen), var(--pen)) no-repeat 0 55% / 0% 2px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--pen) 55%, transparent);
}
[dir=rtl] .demo-risk { background-position: 100% 55%; }
.demo-safe { display: none; font-style: italic; color: var(--primary); }
.demo-safe::before { content: "\2038"; display: inline-block; margin-inline-end: 3px; color: var(--primary); font-style: normal; }
.caret { display: inline-block; width: 1.5px; height: 1em; margin-inline-start: 2px; vertical-align: -3px; background: var(--text); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-flag {
  position: relative; align-self: start; margin-top: 18px; padding: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--pen);
  border-top: 1.5px solid var(--pen); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
@media (min-width: 640px) { .demo-flag { margin-top: 6px; } }
.demo-flag .icon { width: 16px; height: 16px; margin-bottom: 6px; display: block; }
.demo-flag strong { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.25; margin-bottom: 4px; }
.demo-flag .tiny { color: var(--text-2); }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--rule); }
.demo-clean { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); opacity: 0; transition: opacity .4s; }
.demo-actions { display: flex; gap: 4px; color: var(--text-3); }
.demo-actions span { width: 32px; height: 32px; display: grid; place-items: center; }
.hero-demo[data-state=risk] .demo-risk, .hero-demo[data-state=flag] .demo-risk, .hero-demo[data-state=safe] .demo-risk { display: inline; }
.hero-demo[data-state=flag] .demo-risk, .hero-demo[data-state=safe] .demo-risk { background-size: 100% 2px; transition: background-size .6s var(--ease); box-shadow: none; color: var(--text-3); }
.hero-demo[data-state=flag] .demo-flag, .hero-demo[data-state=safe] .demo-flag { opacity: 1; transform: none; }
.hero-demo[data-state=safe] .demo-safe { display: inline; animation: write-in .6s var(--ease); }
.hero-demo[data-state=safe] .demo-flag { color: var(--ok); border-color: var(--ok); }
.hero-demo[data-state=safe] .demo-clean { opacity: 1; }
.hero-demo[data-state=safe] .caret, .hero-demo[data-state=flag] .caret { display: none; }
@keyframes write-in { from { opacity: 0; filter: blur(3px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Use cases: an index list ---------- */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.index-list li { border-bottom: 1px solid var(--rule); }
.index-list a {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px 18px; padding: 26px 0; color: inherit; text-decoration: none; isolation: isolate;
}
.index-list a::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--text); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.ix-n { font-family: var(--font-mono); font-size: 12px; color: var(--primary); }
.ix-title { font-family: var(--font-display); font-weight: 380; font-size: clamp(30px, 5vw, 64px); line-height: 1; letter-spacing: -0.035em; transition: transform .45s var(--ease); }
.ix-desc { grid-column: 2; color: var(--text-2); font-size: 15.5px; max-width: 52ch; }
.ix-go { grid-row: 1; grid-column: 3; align-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-strong); transition: background .3s, border-color .3s, color .3s; }
@media (min-width: 900px) {
  .index-list a { grid-template-columns: 70px 1.1fr 1fr auto; padding: 34px 0; gap: 28px; align-items: center; }
  .ix-desc { grid-column: 3; }
  .ix-go { grid-column: 4; }
}
.index-list a:hover::before, .index-list a:focus-visible::before { transform: scaleY(1); }
.index-list a:hover, .index-list a:focus-visible { color: var(--bg); }
.index-list a:hover .ix-desc { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.index-list a:hover .ix-n { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.index-list a:hover .ix-title { transform: translateX(10px); font-style: italic; }
[dir=rtl] .index-list a:hover .ix-title { transform: translateX(-10px); }
.index-list a:hover .ix-go { background: var(--primary); border-color: var(--primary); color: #fff; }
.index-list a:focus-visible { box-shadow: none; outline: 2px solid var(--primary); outline-offset: 4px; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: s; border-top: 1px solid var(--rule); }
.steps li { position: relative; padding: 28px 0 32px; border-bottom: 1px solid var(--rule); counter-increment: s; }
.steps li::before {
  content: counter(s); display: block; margin-bottom: 18px; font-family: var(--font-display); font-weight: 300; font-size: 96px; line-height: .85;
  letter-spacing: -0.05em; color: var(--primary);
}
[dir=rtl] .steps li::before { content: counter(s, persian); }
.step-n { display: none; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
  .steps li { padding: 36px 32px 44px; border-bottom: 0; }
  .steps li + li { border-inline-start: 1px solid var(--rule); }
  .steps li:first-child { padding-inline-start: 0; }
  .steps li::before { font-size: 136px; margin-bottom: 30px; }
}
.steps h3 { max-width: 18ch; }

/* ---------- Feature ledger (home) ---------- */
.ledger-wrap { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .ledger-wrap { grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
  .ledger-wrap .sec-head { display: block; position: sticky; top: calc(var(--nav-h) + 32px); margin: 0; border: 0; }
  .ledger-wrap .sec-head .h-section { border: 0; padding: 0; margin-top: 22px; }
}
.ledger { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--text); }
.ledger li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.ledger .ix-n { padding-top: 8px; }
.ledger h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 8px; }
.ledger p { grid-column: 2; margin: 0; color: var(--text-2); max-width: 56ch; }
.ledger li > div { min-width: 0; }
@media (min-width: 700px) { .ledger li { grid-template-columns: 64px 1fr 1fr; gap: 24px; align-items: baseline; } .ledger p { grid-column: 3; } .ledger h3 { margin: 0; } }
.ledger-more { margin-top: 32px; }

/* ---------- Ink band: the second look ---------- */
.ink-band { background: var(--ink); color: var(--on-ink); }
.ink-band .h-section { color: var(--on-ink); }
.ink-band .h-section em { color: #8fd8e0; }
.on-dark-muted { color: var(--on-ink-2); }
.eyebrow.on-dark { color: var(--on-ink-2); }
.split { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 5fr 7fr; gap: 80px; } }
.flag-kinds { list-style: none; padding: 0; margin: 28px 0; border-top: 1px solid var(--on-ink-rule); counter-reset: fk; }
.flag-kinds li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--on-ink-rule); font-size: 16px; }
.flag-kinds li::before { counter-increment: fk; content: counter(fk, decimal-leading-zero); font-family: var(--font-mono); font-size: 11.5px; color: #f0a48f; min-width: 22px; }
[dir=rtl] .flag-kinds li::before { content: counter(fk, persian); }
.flag-kinds .icon { display: none; }
.compare { display: grid; gap: 0; }
.compare-card { position: relative; padding: 26px 26px 30px; background: var(--paper, #f7f5ef); color: #17212b; }
.compare-card + .compare-card { border-top: 1px dashed #c9c3b5; }
.compare-card p { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; }
.compare-card mark.risk {
  background: linear-gradient(#c65a3f, #c65a3f) no-repeat 0 58% / 100% 2px; color: #7d6f66; padding: 0; border: 0;
}
.compare-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #b4321f; }
.after .compare-label { color: #17845a; }
.after p { color: #025a66; font-style: italic; }
.compare-arrow { display: none; }
.ink-note { margin-top: 26px; font-size: 13px; line-height: 1.6; color: var(--on-ink-2); max-width: 60ch; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: 4fr 8fr; gap: 64px; } .faq-wrap .sec-head { display: block; margin: 0; border: 0; } .faq-wrap .sec-head .h-section { border: 0; padding: 0; margin-top: 22px; } }
.faq { display: grid; border-top: 1px solid var(--text); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 450; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.01em; line-height: 1.3; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.faq .faq-i { flex: none; width: 20px; height: 20px; stroke-width: 1.4; color: var(--text); transition: transform .35s var(--ease); }
.faq details[open] .faq-i { transform: rotate(45deg); color: var(--primary); }
.faq details p { margin: 0; padding: 0 0 24px; color: var(--text-2); max-width: 64ch; line-height: 1.7; }
.faq details[open] p { animation: fade-down .35s var(--ease); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } }
.faq-group { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 56px 0 16px; }
.faq-group:first-child { margin-top: 0; }

/* ---------- Closing call to action: a blank, ruled page ---------- */
.cta-ed { position: relative; overflow: hidden; background: var(--primary); color: #fff; padding: 84px 0 76px; }
:root[data-theme=dark] .cta-ed { background: #025a66; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .cta-ed { background: #025a66; } }
.cta-ed::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, transparent 47px, rgba(255, 255, 255, .13) 47px); background-size: 100% 48px;
}
.cta-ed::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: max(var(--gutter), calc((100% - var(--wrap)) / 2 - 28px)); width: 1px; background: rgba(240, 147, 122, .7); }
.cta-ed .wrap { position: relative; }
.cta-ed .mono { color: rgba(255, 255, 255, .7); }
.cta-ed h2 { font-family: var(--font-display); font-weight: 340; font-size: clamp(42px, 7.4vw, 110px); line-height: .95; letter-spacing: -0.045em; margin: 22px 0 0; max-width: 13ch; color: #fff; }
.cta-ed h2 em { font-style: italic; }
.cta-ed p { color: rgba(255, 255, 255, .82); margin: 26px 0 0; max-width: 46ch; font-size: 17px; }
.cta-ed .hero-ctas { margin-top: 34px; }
.site .cta-ed .btn.light { background: #fff; border-color: #fff; color: #01434d; }
.site .cta-ed .btn.light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 960px) { .cta-ed { padding: 140px 0 120px; } .cta-ed .cta-row { display: grid; grid-template-columns: 8fr 4fr; gap: 48px; align-items: end; } .cta-ed .cta-row .hero-ctas { justify-content: flex-end; } }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; padding: 40px 0 56px; }
.page-hero .wrap > .eyebrow { display: flex; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.page-hero .display { max-width: 17ch; margin-top: 36px; }
.page-hero .hero-lead { margin-top: 28px; }
.page-hero.compact { padding-bottom: 36px; }
.page-hero .hero-ctas { margin-top: 32px; }
@media (min-width: 960px) {
  .page-hero { padding: 56px 0 96px; }
  .page-hero.compact { padding-bottom: 56px; }
  .page-hero .hero-lead { margin-inline-start: calc(100% / 12 * 5); }
  .page-hero .hero-ctas { margin-inline-start: calc(100% / 12 * 5); }
  .page-hero .jump { margin-inline-start: calc(100% / 12 * 5); }
}
.hero-bg { display: none; }
.jump { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 34px; }
.jump a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.jump a:hover { color: var(--text); border-color: var(--text); }

/* Feature rows with a figure */
.feature-row { display: grid; gap: 40px; align-items: center; scroll-margin-top: 90px; }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: 88px; }
  .feature-row.reverse > :first-child { order: 2; }
}
.ticks { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid var(--rule); }
.ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.ticks .icon { flex: none; margin-top: 3px; width: 16px; height: 16px; padding: 0; border-radius: 0; background: none; color: var(--primary); stroke-width: 2; }
.limits .icon { color: var(--pen); }
.visual {
  position: relative; display: grid; place-items: center; min-height: 360px; padding: 40px 28px; border-radius: 0; background: var(--surface-2);
  border: 1px solid var(--rule);
}
.band.alt .visual { background: var(--bg); }
.visual::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--rule); pointer-events: none; }
.stack-cards { display: grid; gap: 12px; width: min(360px, 100%); }
.sc { padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); display: grid; gap: 9px; transition: transform .5s var(--ease); }
.sc:nth-child(2) { margin-inline-start: 26px; }
.sc:nth-child(3) { margin-inline-start: 52px; }
.visual:hover .sc:nth-child(1) { transform: translateX(-8px); }
.visual:hover .sc:nth-child(3) { transform: translateX(8px); }
.sc .badge { justify-self: start; border-radius: 0; background: none; padding: 0; font-family: var(--font-display); font-style: italic; font-size: 15px; font-weight: 500; color: var(--primary); }
.sc i { display: block; height: 1px; background: var(--rule-strong); margin-top: 8px; }
.sc i.short { width: 60%; }
.flag-demo { width: min(420px, 100%); padding: 24px; background: var(--surface); border: 1px solid var(--rule); }
.flag-demo p { font-family: var(--font-display); font-size: 21px; line-height: 1.55; }
.flag-demo mark.risk { background: none; padding: 0; border-bottom: 2px solid var(--pen); color: inherit; }
.flag-demo .flag { animation: none; border-radius: 0; background: none; border: 0; border-top: 1px solid var(--pen); color: var(--pen); padding: 10px 0 0; margin-top: 12px; font-size: 14px; }
[dir=rtl] .flag-demo .flag { border: 0; border-top: 1px solid var(--pen); border-radius: 0; }
.poster { width: min(270px, 80%); aspect-ratio: 4 / 5; overflow: hidden; display: grid; grid-template-rows: 1fr auto; box-shadow: 0 40px 70px -40px rgba(2, 67, 77, .7); background: #0d2a2f; color: #fff; transform: rotate(-3deg); transition: transform .6s var(--ease); }
.visual:hover .poster { transform: rotate(0) scale(1.02); }
.poster-art { position: relative; display: grid; place-items: end center; background: radial-gradient(70% 60% at 50% 30%, #f5d9a8, #c98a1c 60%, #3b2a10); }
.bottle { width: 64px; height: 120px; margin-bottom: 18px; border-radius: 16px 16px 12px 12px; background: linear-gradient(90deg, #f8fafa, #d6e3e5 60%, #b7c9cc); box-shadow: 0 16px 24px -10px rgba(0, 0, 0, .5); position: relative; }
.bottle::before { content: ""; position: absolute; width: 30px; height: 22px; top: -18px; inset-inline-start: 17px; border-radius: 6px; background: #026f7d; }
.poster-text { display: grid; gap: 4px; padding: 16px; background: #0d2a2f; }
.poster-text strong { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.15; }
.poster-text .tiny { opacity: .7; }

/* About */
.quote-card { position: relative; padding: 8px 0 0 0; border-top: 1px solid var(--text); }
.quote-card .icon { display: none; }
.quote-card::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 120px; line-height: .8; color: var(--primary); margin-top: 18px; }
.quote-card p { font-family: var(--font-display); font-style: italic; font-weight: 380; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.site .card { border-radius: 0; box-shadow: none; border: 1px solid var(--rule); background: var(--surface); }

/* Contact */
.contact-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.6fr 1fr; gap: 56px; } }
.contact-form { padding: 28px; }
@media (min-width: 640px) { .contact-form { padding: 36px; } }
.contact-form .choices label { font-size: 14px; }
.contact-side { display: grid; border-top: 1px solid var(--text); }
.info-card { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.info-card .ico-lg { margin: 0 0 10px; justify-self: start; }
.info-card .ico-lg .icon { width: 20px; height: 20px; }
.info-card h3 { font-size: 19px; margin: 0 0 4px; }
.info-card p { margin: 0; }
.info-card a { font-weight: 600; overflow-wrap: anywhere; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 600px) { .stack-sm { grid-template-columns: 1fr; gap: 0; } }

/* Legal pages: sticky table of contents built by site.js */
.legal-grid { display: grid; gap: 20px; align-items: start; }
.toc { display: none; }
@media (min-width: 960px) {
  .legal-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; }
  .toc { display: grid; position: sticky; top: calc(var(--nav-h) + 28px); border-top: 1px solid var(--text); }
  .toc-h { display: block; padding: 14px 0 10px; }
  .toc a { padding: 8px 0 8px 14px; color: var(--text-2); text-decoration: none; font-size: 14px; border-inline-start: 1px solid var(--rule); transition: color .2s, border-color .2s; }
  [dir=rtl] .toc a { padding: 8px 14px 8px 0; }
  .toc a:hover { color: var(--text); }
  .toc a.on { color: var(--primary); border-inline-start-color: var(--primary); }
}
.site .legal-doc { padding: 0; border: 0; background: none; font-size: 17px; line-height: 1.75; max-width: 70ch; }
.legal-doc h2 { font-family: var(--font-display); font-weight: 450; font-size: 28px; letter-spacing: -0.02em; margin: 48px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 20px); }
.legal-doc ul { padding-inline-start: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc li::marker { color: var(--primary); }

/* Use cases and notes */
.hero-eyebrow { display: block; margin-top: 18px; }
.case-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.case-card .case-more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 15px; }
.notice-card { display: grid; gap: 16px; padding: 32px 0 0; border-top: 2px solid var(--pen); color: var(--text); }
@media (min-width: 700px) { .notice-card { grid-template-columns: 40px 1fr; gap: 20px; } }
.notice-card > .icon { color: var(--pen); width: 26px; height: 26px; stroke-width: 1.5; }
.notice-card .muted { color: var(--text-2); }
.notice-card a { color: var(--primary); font-weight: 600; }
.notice-h { font-family: var(--font-display); font-weight: 450; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 12px; }
.notice-card p { font-size: 17px; line-height: 1.7; }
.notice-card p:last-child { margin: 0; }
.other-cases { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); }
.other-cases a { font-family: var(--font-display); font-size: 22px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.other-cases a:hover { color: var(--primary); border-color: var(--primary); }
.other-cases .small { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }

/* Pricing: the beta is the only live plan; planned plans look informational, not purchasable. */
.price-grid { display: grid; border-top: 1px solid var(--text); }
.price-grid > * { border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .price-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; border-bottom: 1px solid var(--rule); }
  .price-grid > * { border-bottom: 0; }
  .price-grid > * + * { border-inline-start: 1px solid var(--rule); }
}
.price-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 32px 28px 36px; }
.price-card.current { background: var(--surface); box-shadow: inset 0 3px 0 var(--primary); }
.price-card.planned { color: var(--text-2); }
.price-card .badge { border-radius: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--text-2); gap: 8px; }
.price-card.current .badge { color: var(--ok); }
.price-card .ticks { margin: 14px 0 24px; align-self: stretch; }
.price-card .btn { margin-top: auto; }
.price-name { font-family: var(--font-display); font-weight: 450; font-size: 26px; letter-spacing: -0.02em; margin: 26px 0 0; }
.price { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 340; letter-spacing: -0.04em; margin: 8px 0 6px; color: var(--text); }
.price.tba { font-size: 22px; font-style: italic; color: var(--text-2); letter-spacing: -0.01em; margin-top: 14px; }
.price-note { margin-top: 24px; }

/* Footer */
.site-footer { padding: 72px 0 0; background: var(--ink); color: var(--on-ink); overflow: hidden; }
.footer-grid { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, 1fr); }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: start; max-width: 380px; }
.footer-brand p { margin: 0; color: var(--on-ink-2); font-family: var(--font-display); font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.site-footer .logo { color: var(--on-ink); }
.site-footer .badge { background: none; padding: 0; color: var(--on-ink-2); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; gap: 8px; }
.footer-grid > div:not(.footer-brand) { display: grid; gap: 10px; align-content: start; }
.site-footer .footer-h { color: var(--on-ink-2); margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--on-ink-rule); }
.site-footer a:not(.logo) { color: var(--on-ink); text-decoration: none; font-size: 15px; width: fit-content; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease), color .2s; }
[dir=rtl] .site-footer a:not(.logo) { background-position: 100% 100%; }
.site-footer a:not(.logo):hover { color: #8fd8e0; background-size: 100% 1px; }
.footer-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--on-ink-rule); color: var(--on-ink-2); font-size: 13px; line-height: 1.6; display: grid; gap: 8px; }
.footer-base p { margin: 0; max-width: 110ch; }
.footer-base a { font-size: 13px !important; text-decoration: underline !important; text-underline-offset: 3px; }
.footer-giant {
  display: block; margin: 40px 0 0; font-weight: 800; font-size: clamp(56px, 15.6vw, 236px); line-height: .78; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--on-ink-rule); white-space: nowrap; user-select: none; transform: translateY(14%); text-align: center;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 4fr 2fr 2fr 2fr 2fr; }
  .footer-brand { grid-column: auto; }
}

/* 404 */
.error-page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.error-card { display: grid; justify-items: start; gap: 8px; width: min(720px, 100%); border-top: 1px solid var(--text); padding-top: 18px; }
.error-card .logo { margin-bottom: 32px; }
.error-code { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(120px, 24vw, 240px); line-height: .85; letter-spacing: -0.06em; margin: 0; color: var(--primary); }
.error-card h1 { font-family: var(--font-display); font-weight: 450; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin-top: 18px; }
.error-card .hero-ctas { justify-content: flex-start !important; }

/* ---------- RTL: Vazirmatn, no italics or letter-spacing (Arabic script has neither), no uppercase. ---------- */
html[dir=rtl] .display, html[dir=rtl] .display-xl, html[dir=rtl] .h-section, html[dir=rtl] .cta-ed h2, html[dir=rtl] .ix-title { font-weight: 800; line-height: 1.3; }
html[dir=rtl] .display-xl { font-size: clamp(44px, 12.4vw, 112px); line-height: 1.22; }
@media (min-width: 960px) { html[dir=rtl] .display-xl { font-size: min(8.4vw, 124px); } }
html[dir=rtl] .display-xl .ln { padding-bottom: .12em; }
html[dir=rtl] .display em, html[dir=rtl] .display-xl em, html[dir=rtl] .h-section em, html[dir=rtl] .grad-text, html[dir=rtl] .cta-ed h2 em { font-style: normal; font-weight: 300; }
html[dir=rtl] .site h3, html[dir=rtl] .faq summary, html[dir=rtl] .legal-doc h2, html[dir=rtl] .notice-h, html[dir=rtl] .price-name, html[dir=rtl] .ledger h3 { font-weight: 700; }
html[dir=rtl] .site *:not(.icon) { font-style: normal; }
html[dir=rtl] .mono, html[dir=rtl] .eyebrow, html[dir=rtl] .sec-label, html[dir=rtl] .footer-h, html[dir=rtl] .toc-h, html[dir=rtl] .faq-group,
html[dir=rtl] .jump a, html[dir=rtl] .demo-clean, html[dir=rtl] .compare-label, html[dir=rtl] .price-card .badge, html[dir=rtl] .site-footer .badge, html[dir=rtl] .other-cases .small { text-transform: none; font-size: 13px; font-weight: 600; }
html[dir=rtl] .demo-text, html[dir=rtl] .compare-card p, html[dir=rtl] .flag-demo p { line-height: var(--lh, 1.9); }
html[dir=rtl] .sheet { --lh: 38px; }
html[dir=rtl] .demo-text { font-size: 18px; }
html[dir=rtl] .footer-giant { direction: ltr; }
html[dir=rtl] .steps li::before { font-weight: 200; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  /* Headline lines rise out of their own mask. */
  .js .display-xl .ln > * { transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
  @keyframes rise { to { transform: none; } }
  /* Rules draw across when their section comes into view. */
  .js .reveal.sec-label, .js .reveal .sec-label { transition: none; }
  .js .sec-label { background: linear-gradient(var(--text), var(--text)) no-repeat 0 0 / 0 1px; border-top-color: transparent; transition: background-size 1.1s var(--ease); }
  [dir=rtl].js .sec-label, .js [dir=rtl] .sec-label { background-position: 100% 0; }
  .js .on-ink .sec-label { background-image: linear-gradient(var(--on-ink), var(--on-ink)); }
  .js .sec-label.drawn, .js .drawn .sec-label { background-size: 100% 1px; }
}
@media (prefers-reduced-motion: reduce) { .demo-risk { transition: none; } }

/* ---------- Motion layer (html.motion is set by site.js only when motion is welcome) ---------- */
/* Language ticker: an endless, slow line of the interface languages. Shown with or without motion. */
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--rule); padding: 18px 0; direction: ltr; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.ticker-track { display: flex; width: max-content; }
.ticker-set { display: flex; align-items: center; gap: 28px; padding-inline-end: 28px; white-space: nowrap; }
.ticker-label { color: var(--primary); }
.ticker-item { font-family: var(--font-display), "Vazirmatn", sans-serif; font-size: clamp(22px, 2.6vw, 34px); font-weight: 380; letter-spacing: -0.02em; color: var(--text); }
.ticker-item[dir=rtl] { font-family: "Vazirmatn", sans-serif; font-weight: 500; letter-spacing: 0; }
.ticker-item:nth-of-type(even) { font-style: italic; color: var(--text-2); }
.ticker-dot { color: var(--pen); font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ticker-track { animation: ticker 60s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-50%); } }

  /* Cross-page transitions where the browser supports them: the page lifts away and the next one settles in. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .28s var(--ease, ease) both; }
  ::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .7, .15, 1) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
  .site-nav { view-transition-name: site-nav; }

  /* Words rise out of their own line. */
  .motion .wsplit .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  .motion .wsplit .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform .95s cubic-bezier(.2, .75, .1, 1); transition-delay: calc(var(--wi, 0) * 55ms); }
  [dir=rtl] .motion .wsplit .w > span, .motion[dir=rtl] .wsplit .w > span { transform-origin: 100% 100%; transform: translateY(110%) rotate(-4deg); }
  .motion .wsplit.words-in .w > span { transform: none; }

  /* Rows: the hairline under each row draws across. */
  .motion :is(.index-list li, .ledger li, .steps li, .faq details, .ticks li, .flag-kinds li) { position: relative; border-bottom-color: transparent; }
  .motion :is(.index-list li, .ledger li, .steps li, .faq details, .ticks li, .flag-kinds li)::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: var(--rule);
    transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .7, .15, 1);
  }
  [dir=rtl].motion :is(.index-list li, .ledger li, .steps li, .faq details, .ticks li, .flag-kinds li)::after { transform-origin: right; }
  .motion .flag-kinds li::after { background: var(--on-ink-rule); }
  .motion .lined::after { transform: scaleX(1) !important; }
  .motion .lined:nth-child(2)::after { transition-delay: .08s; }
  .motion .lined:nth-child(3)::after { transition-delay: .16s; }
  .motion .lined:nth-child(4)::after { transition-delay: .24s; }
  .motion .lined:nth-child(5)::after { transition-delay: .32s; }
  @media (min-width: 860px) { .motion .steps li::after { display: none; } .motion .steps li { border-bottom-color: transparent; } }

  /* Step numerals count in: they rise and sharpen. */
  .motion .steps li::before { opacity: 0; transform: translateY(30%); filter: blur(6px); transition: opacity .9s, transform 1s cubic-bezier(.2, .7, .15, 1), filter .9s; }
  .motion .steps li.lined::before { opacity: 1; transform: none; filter: none; }
  .motion .steps li:nth-child(2)::before { transition-delay: .12s; }
  .motion .steps li:nth-child(3)::before { transition-delay: .24s; }

  /* Red pen: risky phrases are struck through in sequence once the proof is in view. */
  .motion .compare mark.risk, .motion .flag-demo mark.risk { background-size: 0% 2px; color: inherit; transition: background-size .7s cubic-bezier(.6, 0, .2, 1), color .5s .4s; }
  [dir=rtl] .motion .compare mark.risk { background-position: 100% 58%; }
  .motion .struck mark.risk { background-size: 100% 2px; color: #7d6f66; }
  .motion .struck mark.risk + mark.risk, .motion .struck p mark.risk:last-of-type { transition-delay: .5s, .9s; }
  .motion .compare .after { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.2, .7, .15, 1) 1.1s; }
  .motion .compare.struck .after { clip-path: inset(0 0 0 0); }
  .motion .flag-demo .flag { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
  .motion .flag-demo.struck .flag { opacity: 1; transform: none; }
  .motion .flag-demo.struck .flag + .flag { transition-delay: .25s; }

  /* Index rows: the number and the arrow slide on hover; the arrow spins a quarter-turn into place. */
  .index-list .ix-go .icon { transition: transform .45s cubic-bezier(.2, .7, .15, 1); }
  .index-list a:not(:hover) .ix-go .icon { transform: rotate(-45deg); }
  [dir=rtl] .index-list a:not(:hover) .ix-go .icon { transform: scaleX(-1) rotate(-45deg); }
  .ix-n { transition: transform .45s cubic-bezier(.2, .7, .15, 1); }
  .index-list a:hover .ix-n { transform: translateY(-4px); }

  /* Ledger rows lean in on hover. */
  .ledger li { transition: background .3s; }
  .ledger h3 { transition: transform .45s cubic-bezier(.2, .7, .15, 1), color .3s; }
  .ledger li:hover h3 { transform: translateX(8px); color: var(--primary); }
  [dir=rtl] .ledger li:hover h3 { transform: translateX(-8px); }

  /* Columns: the numeral swings into italic and the column lifts. */
  .cols-3 > *, .cards-3 > *, .trust-grid > * { transition: transform .5s cubic-bezier(.2, .7, .15, 1); }
  .cols-3 > *:hover, .cards-3 > *:hover, .trust-grid > *:hover { transform: translateY(-4px); }
  .cards-3 .ico-lg .icon, .trust > .icon { transition: transform .5s cubic-bezier(.2, .7, .15, 1); }
  .cards-3 > *:hover .ico-lg .icon, .trust-grid > *:hover .trust > .icon, .trust:hover > .icon { transform: rotate(-8deg) scale(1.1); }

  /* Text links: the underline sweeps out and back in. */
  .text-link { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size .45s cubic-bezier(.2, .7, .15, 1), color .2s, border-color .2s; }
  .text-link:hover { background-size: 100% 1px; background-position: 0 100%; border-color: transparent; }

  /* Buttons: magnetic movement (site.js) eases back; the arrow travels. */
  .site .btn.lg, .ix-go { transition: transform .5s cubic-bezier(.2, .7, .15, 1), background .25s, color .25s, border-color .25s; }

  /* Hero proof sheet: tilt (site.js) eases; the back page shifts a little. */
  .sheet { transition: transform .6s cubic-bezier(.2, .7, .15, 1); transform-style: preserve-3d; will-change: transform; }
  .hero-demo:hover .sheet::after { transform: translate(4px, 4px); }
  .sheet::after { transition: transform .6s cubic-bezier(.2, .7, .15, 1); }

  /* CTA: the caret blinks at the end of "blank page", and the ruled lines drift slowly. */
  .cta-caret { width: 3px; height: .8em; margin-inline-start: 10px; vertical-align: -.04em; background: #f0937a; }
  .cta-ed::before { animation: ruled 18s linear infinite; }
  @keyframes ruled { to { background-position: 0 48px; } }

  /* Footer wordmark letters rise in sequence. */
  .motion .footer-giant span { display: inline-block; transform: translateY(60%); opacity: 0; transition: transform 1.1s cubic-bezier(.2, .7, .15, 1), opacity .8s; transition-delay: calc(var(--li, 0) * 60ms); }
  .motion .footer-giant.letters-in span { transform: none; opacity: 1; }
  .footer-giant span { transition: -webkit-text-stroke-color .3s; }
  .footer-giant:hover span { -webkit-text-stroke-color: rgba(143, 216, 224, .5); }

  /* Reading progress along the nav. */
  .site-nav .progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; pointer-events: none; }
  [dir=rtl] .site-nav .progress { transform-origin: right; }

  /* Mobile menu links slide in one after another. */
  .nav-links.open > a { animation: menu-in .5s cubic-bezier(.2, .7, .15, 1) both; }
  .nav-links.open > a:nth-child(2) { animation-delay: .04s; }
  .nav-links.open > a:nth-child(3) { animation-delay: .08s; }
  .nav-links.open > a:nth-child(4) { animation-delay: .12s; }
  .nav-links.open > a:nth-child(5) { animation-delay: .16s; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(14px); } }
}
.cta-caret { display: inline-block; }