@charset "utf-8";
/* assets/css/site.css — StructurePrime public website (every page rendered through pages/layouts/landing.php).
 *
 * Layout and components: handoff v5 "StructurePrime Website EN" (white cards r16-20 on a cool grey ground, navy
 * #0A1E3F and royal #0F3FBF from the app, eyebrow + H2 section heads, two navy bands), kept with the real site
 * photography and the app's own screens in a phone frame instead of mock-ups. Type: Onest; technical values (times,
 * hashes, coordinates) in a monospace. Text colours stay at the AA contrast of the previous pass (--text-2/3).
 * Rules: one H1 per page; radius: buttons 10, cards 16-20, photos 24, phone = device, chips round.
 * RTL: logical properties only (margin-inline, inset-inline, border-inline, text-align:start); directional icons
 * flip under [dir=rtl]. Non-Latin scripts: per-language font stack, no negative tracking, taller headings.
 * No inline styles anywhere (CSP style-src 'self' + Google Fonts). */

:root {
  --ink: #0A1E3F;
  --ink-2: #071533;
  --ink-3: #142A4E;
  --blue: #0F3FBF;
  --blue-d: #0A2E8F;
  --blue-l: #2F7BFF;
  --blue-on-ink: #8DB6FF;
  --text: #0B1220;
  --text-2: #3A4557;
  --text-3: #586375;
  --bg: #F6F7F9;
  --paper: #FFFFFF;
  --wash: #EDF1F7;
  --line: #E1E6EE;
  --line-2: #C6CED9;
  --ok: #157A3A;
  --ok-bg: #E4F3E8;
  --ok-on-ink: #6EE7A0;
  --warn: #A84F07;
  --danger: #B42318;
  --on-ink: #E3EAF4;
  --on-ink-2: rgba(227, 234, 244, .78);
  --font: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --track-tight: -0.03em;
  --track-head: -0.02em;
  --lh-head: 1.06;
  --wrap: 1240px;
  --gut: clamp(18px, 4.4vw, 44px);
  --sec: clamp(60px, 7.5vw, 92px);
  --header-h: 68px;
  --shadow-phone: 0 46px 90px -34px rgba(7, 21, 51, .55), 0 18px 36px -20px rgba(7, 21, 51, .35);
}

/* Per-language fonts (I18n::fontHref loads the family). Onest stays first for Latin digits and the brand name. */
html:lang(zh) { --font: 'Onest', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }
html:lang(ja) { --font: 'Onest', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif; }
html:lang(ko) { --font: 'Onest', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; }
html:lang(hi) { --font: 'Onest', 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif; }
html:lang(th) { --font: 'Onest', 'Noto Sans Thai', 'Leelawadee UI', system-ui, sans-serif; }
html:lang(ar) { --font: 'Onest', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
html:lang(fa) { --font: 'Onest', 'Vazirmatn', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif; }
html:lang(he) { --font: 'Onest', 'Noto Sans Hebrew', 'Segoe UI', Arial, system-ui, sans-serif; }
html:lang(vi) { --font: 'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, system-ui, sans-serif; }
html:lang(ar), html:lang(fa), html:lang(he), html:lang(hi), html:lang(th),
html:lang(zh), html:lang(ja), html:lang(ko) { --track-tight: 0; --track-head: 0; }
html:lang(ar), html:lang(fa), html:lang(hi), html:lang(th) { --lh-head: 1.34; }
html:lang(zh), html:lang(ja), html:lang(ko), html:lang(he) { --lh-head: 1.24; }

/* ── base ─────────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-decoration-thickness: .07em; text-underline-offset: .18em; }
a:hover { color: var(--blue-d); }
:focus-visible { outline: 3px solid var(--blue-l); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; line-height: var(--lh-head); letter-spacing: var(--track-head); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 700; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 300; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--play, .ico--apple { fill: currentColor; stroke: none; }
[dir="rtl"] .ico--arrow { transform: scaleX(-1); }
.wm { white-space: nowrap; }
.wm span { color: var(--blue); }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: .7em 1.25em;
  border: 1.5px solid transparent; border-radius: 10px; font-size: 1rem; font-weight: 700; line-height: 1.15;
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn .ico { width: 1.25em; height: 1.25em; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--blue); color: #fff; }
.btn--line { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--wash); color: var(--ink); }
.btn--ghost { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }
.btn--sm { min-height: 42px; padding: .5em 1em; font-size: .9375rem; border-radius: 9px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn--store { background: var(--ink); color: #fff; padding-block: .45em; padding-inline: 1.05em 1.3em; }
.btn--store:hover { background: var(--blue); color: #fff; }
.btn--store .ico { width: 1.15em; height: 1.15em; }
.btn--store.btn--light { background: #fff; color: var(--ink); }
.btn--store.btn--light:hover { background: var(--wash); color: var(--ink); }
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; font-size: 1.0625rem; line-height: 1.12; }
.btn__stack small { font-size: .7rem; font-weight: 500; letter-spacing: .01em; opacity: .82; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--blue); text-decoration: none; }
.link-arrow .ico { transition: transform .15s; }
.link-arrow:hover { color: var(--blue-d); text-decoration: underline; }
.link-arrow:hover .ico { transform: translateX(3px); }
[dir="rtl"] .link-arrow:hover .ico { transform: scaleX(-1) translateX(3px); }
.link-arrow--light { color: var(--blue-on-ink); }
.link-arrow--light:hover { color: #fff; }
.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--blue-on-ink); color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; line-height: 1.5; }
.tag--soft { background: var(--wash); color: var(--blue); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }

/* ── header (v5: translucent bar, 68 px, navy "Get the app") ─────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 247, 249, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__in { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.brand:hover { color: var(--ink); }
.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 2px; list-style: none; }
.site-nav a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); background: var(--wash); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.site-header__tools { display: flex; align-items: center; gap: 8px; }
.site-header__cta { white-space: nowrap; }
@media (max-width: 1199px) {
  .site-nav, .site-header__cta { display: none; }
  .site-header__tools { margin-inline-start: auto; }
}
@media (min-width: 1200px) { .menu { display: none; } }
@media (max-width: 440px) { .lang__cur { display: none; } }
@media (max-width: 380px) {
  .brand { font-size: 1.05rem; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
}

/* language dropdown (I18n::switcher) */
.lang { position: relative; }
.lang > summary { list-style: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 10px 6px 9px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .9rem; font-weight: 600; cursor: pointer; user-select: none; }
.lang__btn:hover { border-color: var(--line-2); }
.lang__btn .ico { width: 18px; height: 18px; stroke-width: 1.7; }
.lang__btn .ico--chev { width: 16px; height: 16px; transition: transform .15s; }
.lang[open] .ico--chev { transform: rotate(180deg); }
.lang__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 70; width: max-content; min-width: 220px; max-width: min(92vw, 420px); padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 24px 48px -20px rgba(7, 21, 51, .38); }
.lang__title { padding: 6px 10px 8px; color: var(--text-3); font-size: .8rem; font-weight: 600; }
.lang__list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px; }
.lang__list:has(li:nth-child(9)) { grid-template-columns: 1fr 1fr; }
.lang__list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); font-weight: 500; text-decoration: none; }
.lang__list a:hover { background: var(--wash); color: var(--ink); }
.lang__list a[aria-current] { background: var(--ink); color: #fff; font-weight: 700; }

/* mobile menu */
.menu > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .ico { width: 22px; height: 22px; }
.menu .ico--close, .menu[open] .ico--menu { display: none; }
.menu[open] .ico--close { display: block; }
.menu__panel { position: fixed; inset-inline: 0; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 8px var(--gut) 28px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 40px 60px -30px rgba(7, 21, 51, .45); }
.menu__panel ul { list-style: none; }
.menu__panel a:not(.btn) { display: block; padding: 15px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.menu__panel .btn { width: 100%; margin-top: 20px; }

/* ── shared section bits (v5: eyebrow 12.5/700 uppercase, H2 ~38/800, lead 16-17) ───────────────────────── */
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(56px, 7vw, 96px); }
.kicker { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: .95rem; font-weight: 600; }
.kicker::before { content: ""; width: 30px; height: 2px; flex: none; background: var(--blue); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--blue); text-decoration: underline; }
.eyebrow { color: var(--blue); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.eyebrow--light { color: var(--blue-on-ink); }
html:lang(ar) .eyebrow, html:lang(fa) .eyebrow, html:lang(he) .eyebrow, html:lang(zh) .eyebrow, html:lang(ja) .eyebrow, html:lang(ko) .eyebrow { letter-spacing: 0; }
.sec-head { max-width: 680px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .sec-title, .sec-head--center .sec-lead { margin-inline: auto; }
.sec-title { margin-top: 10px; max-width: 18em; font-size: clamp(1.85rem, 3.3vw, 2.4rem); line-height: 1.1; letter-spacing: var(--track-tight); }
.sec-title--md { font-size: clamp(1.75rem, 3.2vw, 2.3rem); }
.sec-lead { margin-top: 14px; max-width: 40em; color: var(--text-2); font-size: clamp(1rem, 1.25vw, 1.0625rem); line-height: 1.6; }
.sec-lead strong { color: var(--ink); }
.ticks { list-style: none; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ticks .ico { width: 20px; height: 20px; margin-top: .18em; color: var(--ok); stroke-width: 2.4; }
.ticks li.is-off { color: var(--text-3); }
.ticks li.is-off .ico { color: var(--line-2); }
.ticks--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px 32px; margin-top: 22px; }
.ticks--light .ico { color: var(--ok-on-ink); }
/* icon box (module groups, evidence points) */
.ibox { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(15, 63, 191, .08); color: var(--blue); }
.ibox .ico { width: 22px; height: 22px; stroke-width: 1.9; }
.ibox--sm { width: 34px; height: 34px; border-radius: 10px; }
.ibox--sm .ico { width: 18px; height: 18px; }
/* a link that makes its whole card clickable */
.stretched { color: inherit; text-decoration: none; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.stretched:focus-visible { outline: none; }
.stretched:focus-visible::after { outline: 3px solid var(--blue-l); outline-offset: 2px; }
.card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }

/* phone frame around an app render (SiteView::phone) */
.phone { position: relative; padding: 2.7%; border-radius: 15% / 6.9%; background: #0B1220; box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.phone img { width: 100%; border-radius: 12.4% / 5.75%; background: #F6F7F9; }

/* ── home: hero (v5 copy + badge + stats; Pexels photo and the real app screen instead of a mock-up) ──────── */
.hero { padding-block: clamp(24px, 4.5vw, 64px) clamp(40px, 5vw, 64px); overflow: clip; }
.hero__grid { display: grid; gap: 44px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--blue); font-size: .8rem; font-weight: 700; line-height: 1.35; }
.pill .ico { width: 16px; height: 16px; stroke-width: 2.1; }
.hero__title { margin-top: 20px; max-width: 13em; font-size: clamp(2.35rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.033em; }
html:lang(ar) .hero__title, html:lang(fa) .hero__title, html:lang(hi) .hero__title, html:lang(th) .hero__title { line-height: 1.3; letter-spacing: 0; }
html:lang(zh) .hero__title, html:lang(ja) .hero__title, html:lang(ko) .hero__title, html:lang(he) .hero__title { line-height: 1.18; letter-spacing: 0; }
.hero__title em { font-style: normal; color: var(--blue); }
.hero__lead { margin-top: 18px; max-width: 32em; color: var(--text-2); font-size: clamp(1.0625rem, 1.4vw, 1.125rem); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.stats { list-style: none; display: flex; flex-wrap: wrap; gap: 18px 30px; margin-top: 34px; }
.stats li { display: grid; gap: 2px; }
.stats strong { color: var(--ink); font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span { color: var(--text-3); font-size: .8rem; font-weight: 600; }
.hero__visual { position: relative; padding-bottom: 40px; }
.hero__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; background: #B9AE9F; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__phone { position: absolute; inset-inline-start: 5%; bottom: 0; width: min(44%, 250px); }
.stamp { position: absolute; inset-inline-end: 5%; top: 6%; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 12px; background: #fff; color: var(--ink); font-size: .84rem; font-weight: 700; line-height: 1.3; box-shadow: 0 16px 34px -16px rgba(7, 21, 51, .5); }
.stamp small { display: block; color: var(--text-3); font-family: var(--mono); font-size: .72rem; font-weight: 500; }
.stamp__ok { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.stamp__ok .ico { width: 16px; height: 16px; stroke-width: 2.6; }
@media (min-width: 600px) and (max-width: 899px) {
  .hero__photo { aspect-ratio: 16 / 11; }
  .hero__photo img { object-position: 50% 58%; }
  .hero__phone { width: min(32%, 230px); }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
  .hero__visual { padding-bottom: 48px; }
  .hero__photo { aspect-ratio: auto; height: min(74vh, 640px); min-height: 500px; }
  .hero__phone { inset-inline-start: -8%; width: min(46%, 250px); }
  .stamp { top: 8%; inset-inline-end: 7%; }
}

/* built for */
.roles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.roles__label { color: var(--text-3); font-size: .85rem; font-weight: 700; }
.roles__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.roles__list li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .85rem; font-weight: 600; }
.roles__list .ico { width: 16px; height: 16px; color: var(--blue); stroke-width: 1.9; }

/* ── home: module groups (8 cards → /modules#group) ───────────────────────────────────────────────────────── */
.groups { padding-top: clamp(56px, 7vw, 88px); }
.gcards { list-style: none; display: grid; gap: 14px; margin-top: 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.gcard { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.gcard:hover { border-color: var(--blue); box-shadow: 0 14px 30px -24px rgba(10, 30, 63, .45); }
.gcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gcard__n { color: var(--text-3); font-size: .78rem; font-weight: 700; }
.gcard__t { margin-top: 16px; font-size: 1.07rem; letter-spacing: -.01em; line-height: 1.3; }
.gcard__t a:hover { color: var(--blue); }
.gcard__d { margin-top: 6px; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.groups__more { margin-top: 28px; }

/* ── home: offline-first (navy) ───────────────────────────────────────────────────────────────────────────── */
.offline { background: var(--ink); color: var(--on-ink); }
.offline .sec-title { color: #fff; }
.offline .sec-lead { color: var(--on-ink-2); }
.offline__grid { display: grid; gap: 48px; align-items: center; }
.points { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
.points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.points > li > .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--ok); stroke-width: 2.2; }
.points h3 { font-size: .97rem; letter-spacing: 0; line-height: 1.35; }
.points p { margin-top: 3px; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.points--light h3 { color: #fff; }
.points--light p { color: var(--on-ink-2); }
.points--light > li > .ico { color: var(--ok-on-ink); }
.modecards { display: grid; gap: 14px; align-content: center; }
.modecard { padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.modecard > .ico { width: 30px; height: 30px; color: #fff; stroke-width: 1.7; }
.modecard h3 { margin-top: 14px; color: #fff; font-size: 1.15rem; letter-spacing: 0; }
.modecard p { margin-top: 6px; color: var(--on-ink-2); font-size: .9rem; line-height: 1.5; }
.modecard__tag { display: inline-flex; margin-top: 14px; padding: 4px 11px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .75rem; font-weight: 700; }
.modecard--online { border-color: var(--blue); background: var(--blue); }
.modecard--online p { color: rgba(255, 255, 255, .9); }
.modecard--online .modecard__tag { background: rgba(255, 255, 255, .2); }
.modecards__note { grid-column: 1 / -1; color: var(--on-ink-2); font-size: .85rem; }
@media (min-width: 600px) { .modecards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .offline__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }

/* ── home: digital evidence (white sample card + points) ──────────────────────────────────────────────────── */
.evidence__grid { display: grid; gap: 48px; align-items: center; }
.evcard { display: grid; gap: 0; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 30px 60px -40px rgba(10, 30, 63, .45); }
.evcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.3; }
.badge .ico { width: 14px; height: 14px; stroke-width: 2.3; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--info { background: #E6F1F8; color: #075A8A; }
.evcard__title { margin-top: 14px; color: var(--ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.evcard__meta { margin-top: 4px; color: var(--text-3); font-size: .8rem; }
.evcard__photo { margin-top: 16px; overflow: hidden; border-radius: 12px; background: #C8C2B8; }
.evcard__photo img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 50% 60%; }
.evcard__hash { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.evcard__hash span { display: block; color: var(--text-3); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.evcard__hash code { display: block; margin-top: 4px; color: var(--text-2); font-family: var(--mono); font-size: .74rem; line-height: 1.5; word-break: break-all; }
.evcard__rows { margin-top: 6px; }
.evcard__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.evcard__rows div:last-child { border-bottom: 0; }
.evcard__rows dt { color: var(--text-3); }
.evcard__rows dd { color: var(--ink); font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.evcard__note { margin-top: 8px; color: var(--text-3); font-size: .75rem; }
.evidence__note { margin-top: 22px; padding-inline-start: 14px; border-inline-start: 3px solid var(--blue); color: var(--text-2); font-size: .9rem; }
.evidence .link-arrow { margin-top: 18px; }
@media (min-width: 960px) { .evidence__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; } }

/* ── home: web panel (coming soon) — HTML preview of the planned panel, example data ─────────────────────── */
.web { border-block: 1px solid var(--line); background: var(--paper); }
.pmock { margin-top: 36px; }
.pmock__frame { display: flex; min-height: 380px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: 0 30px 60px -40px rgba(10, 30, 63, .45); }
.pmock__side { display: flex; flex-direction: column; gap: 4px; width: 220px; flex: none; padding: 16px 12px; background: var(--ink); color: #fff; font-size: .8rem; }
.pmock__brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-weight: 800; }
.pmock__brand img { width: 26px; height: 26px; border-radius: 7px; }
.pmock__brand .wm span { color: var(--blue-on-ink); }
.pmock__nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: rgba(255, 255, 255, .78); }
.pmock__nav .ico { width: 17px; height: 17px; stroke-width: 1.8; }
.pmock__nav span { flex: 1; }
.pmock__nav small { color: rgba(255, 255, 255, .6); font-size: .7rem; }
.pmock__nav.is-on { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }
.pmock__main { flex: 1; min-width: 0; padding: 22px 24px; }
.pmock__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pmock__crumb { color: var(--text-3); font-size: .75rem; }
.pmock__title { margin-top: 2px; color: var(--ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.pmock__btns { display: flex; gap: 8px; }
.pmock__btns span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: .78rem; font-weight: 600; }
.pmock__btns .is-ink { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 700; }
.pmock__table { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.pmock__row { display: grid; grid-template-columns: 1.25fr 1fr 1.45fr .6fr .6fr 1fr .9fr; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); font-size: .78rem; }
.pmock__row:last-child { border-bottom: 0; }
.pmock__row--head { background: var(--bg); color: var(--text-3); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pmock__row span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pmock__row .mono { font-family: var(--mono); font-weight: 700; font-size: .74rem; }
.pmock__row .muted { color: var(--text-2); }
.pmock__row .num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.pmock__row--head span:nth-child(n+4) { text-align: end; }
.pmock__row .sig { color: var(--ok); font-size: .7rem; font-weight: 700; }
.pmock__row .st-pass { color: var(--ok); }
.pmock__row .st-fail { color: var(--danger); }
.st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.st.st-pending, .st.st-wait28 { background: #FDF0E1; color: var(--warn); }
.st.st-pass { background: var(--ok-bg); color: var(--ok); }
.st.st-fail { background: #FDE8E7; color: var(--danger); }
.pmock__cap { margin-top: 14px; color: var(--text-3); font-size: .85rem; }
@media (max-width: 959px) { .pmock__side { width: 180px; } .pmock__row { grid-template-columns: 1.3fr 1fr .6fr .6fr 1fr; } .pmock__row > :nth-child(3), .pmock__row > :nth-child(7) { display: none; } }
@media (max-width: 640px) {
  .pmock__frame { flex-direction: column; min-height: 0; }
  .pmock__side { width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px 6px; padding: 12px; }
  .pmock__brand { width: 100%; padding-bottom: 6px; }
  .pmock__nav { padding: 6px 8px; }
  .pmock__nav:not(.is-on) span { display: none; }
  .pmock__nav small { display: none; }
  .pmock__main { padding: 16px 14px; }
  .pmock__row { grid-template-columns: 1.5fr .6fr 1.2fr; padding: 9px 10px; }
  .pmock__row > :nth-child(2), .pmock__row > :nth-child(4) { display: none; }
}

/* ── home: how it works (3 cards with the real app screens) ───────────────────────────────────────────────── */
.steps3 { list-style: none; display: grid; gap: 14px; margin-top: 36px; }
.step3 { display: flex; flex-direction: column; overflow: hidden; padding: 24px 24px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.step3__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 800; }
.step3 h3 { margin-top: 16px; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.3; }
.step3 p { margin-top: 6px; color: var(--text-2); font-size: .9rem; line-height: 1.55; }
.step3__shot { display: flex; justify-content: center; margin-top: auto; padding-top: 22px; height: 300px; overflow: hidden; }
.step3__shot .phone { width: 210px; flex: none; align-self: flex-start; box-shadow: 0 24px 40px -26px rgba(7, 21, 51, .55); }
@media (min-width: 600px) and (max-width: 899px) {
  .step3 { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: auto auto 1fr; column-gap: 28px; padding: 24px 28px 0; }
  .step3 > :not(.step3__shot) { grid-column: 1; }
  .step3__shot { grid-column: 2; grid-row: 1 / span 3; height: 250px; margin-top: 0; padding-top: 0; }
}
@media (min-width: 900px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── home: use cases ──────────────────────────────────────────────────────────────────────────────────────── */
.cases { border-block: 1px solid var(--line); background: var(--paper); }
.ccards { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 900px) { .ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ccard { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.ccard__who { display: flex; align-items: center; gap: 12px; }
.ccard__n { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.ccard__who h3 { font-size: .97rem; letter-spacing: 0; line-height: 1.3; }
.ccard__who p { color: var(--text-3); font-size: .8rem; }
.ccard__story { color: var(--text); font-size: .97rem; line-height: 1.6; }
.ccard__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ccard__tags a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--blue); font-size: .78rem; font-weight: 700; text-decoration: none; }
.ccard__tags a:hover { border-color: var(--blue); }

/* ── home: photo band ─────────────────────────────────────────────────────────────────────────────────────── */
.band { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(360px, 46vw, 560px); color: #fff; background: #1C2C48; }
.band__img { position: absolute; inset: 0; z-index: -2; }
.band__img picture, .band__img img { width: 100%; height: 100%; }
.band__img img { object-fit: cover; object-position: 50% 45%; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 21, 51, .86) 0%, rgba(7, 21, 51, .35) 45%, rgba(7, 21, 51, 0) 72%); }
.band__in { padding-block: clamp(44px, 5.5vw, 72px); }
.band__quote { max-width: 980px; }
.band__quote p { max-width: 19em; color: #fff; font-size: clamp(1.45rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-head); }
.band__quote footer { margin-top: 16px; color: rgba(255, 255, 255, .82); font-size: .95rem; }

/* ── home: security & data + who sees what ────────────────────────────────────────────────────────────────── */
.security__grid { display: grid; gap: 40px; align-items: start; }
.scards { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.scard { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.scard > .ico { width: 22px; height: 22px; color: var(--blue); stroke-width: 1.9; }
.scard h3 { margin-top: 12px; font-size: .97rem; letter-spacing: 0; line-height: 1.35; }
.scard p { margin-top: 4px; color: var(--text-2); font-size: .85rem; line-height: 1.5; }
@media (min-width: 960px) { .security__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; } }
.team { display: grid; gap: 28px; margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.team__title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); max-width: 16em; }
.team__text > p { margin-top: 12px; max-width: 34em; color: var(--text-2); }
.team__matrix { overflow-x: auto; }
.team__matrix:focus-visible { outline-offset: 4px; }
.rbac { border-collapse: collapse; font-size: .875rem; }
.rbac caption { padding-bottom: 14px; color: var(--text-3); font-size: .85rem; text-align: start; caption-side: top; }
.rbac thead th { height: 156px; padding: 0 0 10px; vertical-align: bottom; color: var(--text-2); font-weight: 600; font-size: .8rem; }
.rbac thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; line-height: 1.2; }
.rbac tbody th { padding: 9px 14px 9px 0; padding-inline: 0 14px; color: var(--ink); font-weight: 700; text-align: start; white-space: nowrap; }
.rbac td { width: 30px; padding: 0; border-top: 1px solid var(--line); text-align: center; }
.rbac tbody th { border-top: 1px solid var(--line); }
.rbac thead td { border-top: 0; }
.dot { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--line-2); border-radius: 50%; vertical-align: middle; }
.dot--on { border-color: var(--blue); background: var(--blue); }
html:lang(zh) .rbac thead th span, html:lang(ja) .rbac thead th span, html:lang(ko) .rbac thead th span { writing-mode: vertical-rl; transform: none; }
@media (min-width: 1000px) { .team { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } }
@media (max-width: 420px) { .rbac td { width: 24px; } .rbac tbody th { font-size: .8rem; } }

/* ── home: comparison (table; stacked cards on phones) ────────────────────────────────────────────────────── */
.compare { padding-top: 0; }
.ctable { width: 100%; margin-top: 36px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); font-size: .9rem; }
.ctable thead th, .ctable thead td { padding: 14px 20px; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--text-3); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: start; }
.ctable thead th.is-us { color: var(--blue); }
.ctable tbody th, .ctable tbody td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.ctable tbody th { width: 28%; color: var(--ink); font-weight: 700; }
.ctable tbody td { color: var(--text-2); }
.ctable tbody td.is-us { color: var(--ink); font-weight: 700; }
.ctable td.is-us .ico { display: inline-block; width: 17px; height: 17px; margin-inline-end: 6px; vertical-align: -3px; color: var(--ok); stroke-width: 2.2; }
@media (max-width: 720px) {
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: auto; }
  .ctable { border: 0; background: none; overflow: visible; }
  .ctable thead { display: none; }
  .ctable tbody { display: grid; gap: 12px; }
  .ctable tbody tr { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
  .ctable tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: 1rem; }
  .ctable tbody td { padding: 6px 0; border: 0; border-top: 1px dashed var(--line); }
  .ctable tbody td::before { content: attr(data-label); display: block; color: var(--text-3); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .ctable tbody td.is-us::before { color: var(--blue); }
  .ctable tbody tr:last-child th { border: 0; }
  .ctable tbody tr:last-child td { border-top: 1px dashed var(--line); }
}

/* ── home: what's new (navy) ──────────────────────────────────────────────────────────────────────────────── */
.whatsnew { background: var(--ink); color: var(--on-ink); }
.whatsnew .sec-title { color: #fff; }
.whatsnew .sec-lead { color: var(--on-ink-2); }
.whatsnew__grid { display: grid; gap: 36px; align-items: start; }
.changes { list-style: none; display: grid; gap: 10px; }
.changes li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .06); }
.changes__tag { flex: none; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: var(--blue-on-ink); color: var(--ink); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.changes p { color: #fff; font-size: .9rem; line-height: 1.5; }
@media (min-width: 960px) { .whatsnew__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }

/* ── home: pricing (two plans, no amounts) ────────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; max-width: 920px; margin: 40px auto 0; align-items: start; }
.plan { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 30px); border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan__name { color: var(--text-3); font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.plan__badge { padding: 4px 10px; border-radius: 999px; background: var(--blue-on-ink); color: var(--ink); font-size: .72rem; font-weight: 800; }
.plan__price { margin-top: 10px; color: var(--ink); font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.plan__period { margin-top: 6px; color: var(--text-2); font-size: .9rem; }
.plan__plans { list-style: none; display: grid; gap: 8px; margin-top: 20px; }
.plan__plans li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; }
.plan__plans li > span:last-child { grid-column: 1 / -1; color: var(--on-ink-2); font-size: .85rem; }
.plan__plans strong { color: #fff; }
.plan__plans .tag { justify-self: start; }
.plan__plans .is-rec { border-color: var(--blue-on-ink); background: rgba(141, 182, 255, .08); }
.plan__fine { margin-block: -6px 22px; color: var(--on-ink-2); font-size: .82rem; }
.plan .ticks { margin-block: 22px 26px; font-size: .95rem; }
.plan .btn { margin-top: auto; }
.plan--paid { position: relative; overflow: hidden; border-color: var(--ink-2); background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--on-ink); }
.plan--paid::before { content: ""; position: absolute; inset-inline-end: -60px; top: -70px; width: 220px; height: 220px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none; }
.plan--paid > * { position: relative; }
.plan--paid .plan__name { color: rgba(255, 255, 255, .72); }
.plan--paid .plan__price { color: #fff; }
.plan--paid .plan__period { color: var(--on-ink-2); }
.plan--paid .ticks .ico { color: var(--ok-on-ink); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }

/* ── FAQ: home (centred cards, v5) and download/support (list) ────────────────────────────────────────────── */
.faq__wrap { max-width: 860px; }
.faq__wrap .faq__list { display: grid; gap: 10px; margin-top: 30px; border: 0; }
.faq__wrap .qa { padding-inline: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.faq__wrap .qa > summary { padding-block: 18px; font-size: 1rem; }
.faq__wrap .qa__a { padding-bottom: 20px; font-size: .95rem; }
.faq__more { margin-top: 22px; color: var(--text-2); text-align: center; }
.faq__more .link-arrow { margin-inline-start: 6px; }
.faq__grid { display: grid; gap: 36px; }
.faq__head .link-arrow { margin-top: 22px; }
.faq__list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line); }
.qa > summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-block: 20px; color: var(--ink); font-size: 1.0625rem; font-weight: 700; cursor: pointer; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--blue); }
.qa__ico { margin-top: .15em; color: var(--text-3); transform: rotate(90deg); transition: transform .15s; }
.qa[open] .qa__ico { transform: rotate(-90deg); }
[dir="rtl"] .qa__ico { transform: rotate(90deg); }
[dir="rtl"] .qa[open] .qa__ico { transform: rotate(-90deg); }
.qa__a { max-width: 44em; padding-bottom: 22px; color: var(--text-2); }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 72px; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}

/* ── home: download block ─────────────────────────────────────────────────────────────────────────────────── */
.cta { padding-top: 0; }
.cta__panel { position: relative; display: grid; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--on-ink); }
.cta__text { position: relative; padding: clamp(30px, 5vw, 56px); }
.cta__text::before { content: ""; position: absolute; inset-inline-start: -80px; bottom: -120px; width: 320px; height: 320px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none; }
.cta__text h2 { position: relative; max-width: 13em; color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: var(--track-tight); }
.cta__lead { position: relative; margin-top: 14px; max-width: 32em; color: var(--on-ink-2); font-size: 1.0625rem; }
.cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta__meta { position: relative; margin-top: 20px; color: var(--on-ink-2); font-size: .9rem; }
.cta__photo { min-height: 240px; }
.cta__photo picture, .cta__photo img { width: 100%; height: 100%; }
.cta__photo img { object-fit: cover; }
@media (min-width: 900px) { .cta__panel { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }

/* ── footer (v5: white, quiet) ────────────────────────────────────────────────────────────────────────────── */
.site-footer { padding-block: 56px 28px; border-top: 1px solid var(--line); background: var(--paper); color: var(--text-2); font-size: .92rem; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; }
.site-footer__brand .brand { color: var(--ink); }
.site-footer__brand .brand:hover { text-decoration: none; }
.site-footer__tag { max-width: 26em; color: var(--text-3); }
.site-footer__h { margin-bottom: 12px; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.site-footer__langs { display: flex !important; flex-wrap: wrap; gap: 8px 16px !important; }
.site-footer__langs a[aria-current] { color: var(--blue); font-weight: 700; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .82rem; }
@media (min-width: 1040px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}

/* ── subpages: head, breadcrumb ───────────────────────────────────────────────────────────────────────────── */
.page-head { padding-block: clamp(24px, 4vw, 48px) clamp(28px, 4vw, 44px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--text-3); font-size: .875rem; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--line-2); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.page-title { margin-top: 18px; max-width: 15em; font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: var(--track-tight); }
.page-title--doc { font-size: clamp(2rem, 4.4vw, 3rem); }
.page-lead { margin-top: 18px; max-width: 38em; color: var(--text-2); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }
.page-head__grid { display: grid; gap: 32px; align-items: center; }
.page-head__photo { overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 2; background: #C8C2B8; }
.page-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-head__photo--wide { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .page-head__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips a { padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; }
.chips a:hover { border-color: var(--ink); }

/* module cards (modules index, related modules) */
.mcards { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mcard { position: relative; display: flex; flex-direction: column; padding: 18px 20px 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.mcard:hover { border-color: var(--blue); box-shadow: 0 14px 30px -24px rgba(10, 30, 63, .45); }
.mcard h3 { font-size: 1rem; letter-spacing: 0; line-height: 1.3; }
.mcard h3 a:hover { color: var(--blue); }
.mcard p { margin-top: 6px; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.mcard .mcard__group { margin: 0 0 6px; color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mcard__ico { position: absolute; inset-inline-end: 18px; bottom: 14px; width: 18px; height: 18px; color: var(--text-3); transition: transform .15s, color .15s; }
.mcard:hover .mcard__ico { color: var(--blue); transform: translateX(3px); }
[dir="rtl"] .mcard__ico { transform: scaleX(-1); }
[dir="rtl"] .mcard:hover .mcard__ico { transform: scaleX(-1) translateX(3px); }
.mcards--compact .mcard p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* modules index (/modules) */
.page-modules .chips a small { margin-inline-start: 4px; color: var(--text-3); font-weight: 700; }
.mindex { padding-bottom: clamp(56px, 7vw, 96px); }
.mgroup { display: grid; gap: 20px; padding-block: 36px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 12px); }
.mgroup__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.mgroup__head h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }
.mgroup__n { color: var(--text-3); font-size: .8rem; font-weight: 700; }
.mgroup__intro { grid-column: 1 / -1; max-width: 46em; margin-top: 8px; color: var(--text-2); }
.mindex__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-2); }

/* module page */
.module__grid { display: grid; gap: 40px; padding-bottom: clamp(64px, 8vw, 112px); }
.module__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.module__shot .phone { width: min(290px, 72vw); margin-inline: auto; }
.module__shot-note { margin-top: 18px; color: var(--text-3); font-size: .82rem; text-align: center; }
.howcard { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 30px 60px -44px rgba(10, 30, 63, .45); }
.howcard__title { margin-top: 8px; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.3; }
.howcard__steps { list-style: none; counter-reset: how; display: grid; gap: 14px; margin-top: 18px; }
.howcard__steps li { counter-increment: how; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; color: var(--text-2); font-size: .93rem; line-height: 1.5; }
.howcard__steps li::before { content: counter(how); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 800; }
.howcard__note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); color: var(--text-3); font-size: .82rem; }
.module__body { display: grid; gap: 56px; }
.module__h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.notes { display: grid; gap: 14px; margin-top: 22px; }
.note { padding: 20px 22px; border: 1px solid var(--line); border-inline-start: 4px solid var(--blue); border-radius: 14px; background: var(--paper); }
.note--saving { border-inline-start-color: var(--ok); }
.note h3 { font-size: 1rem; letter-spacing: 0; }
.note p { margin-top: 8px; color: var(--text-2); }
@media (min-width: 720px) { .notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .module__grid { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head shot" "body shot"; column-gap: 72px; row-gap: 56px; }
  .module__head { grid-area: head; }
  .module__shot { grid-area: shot; }
  .module__shot > * { position: relative; }
  .module__shot .phone { position: sticky; top: calc(var(--header-h) + 28px); width: 100%; }
  .module__shot--how .howcard { position: sticky; top: calc(var(--header-h) + 28px); }
  .module__body { grid-area: body; }
}
.related { border-top: 1px solid var(--line); background: var(--paper); }
.related .mcard { background: var(--bg); }
.related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.related__title { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.related__title--sm { margin-block: 48px 18px; font-size: 1.2rem; letter-spacing: 0; }
.related .chips { margin-top: 0; }
.link-list { list-style: none; display: grid; gap: 0 36px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 13px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.link-list a:hover { color: var(--blue); }
.cta-strip { padding-block: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); }
.cta-strip__in { display: grid; gap: 24px; align-items: center; }
.cta-strip h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-strip p { margin-top: 10px; color: var(--text-2); }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .cta-strip__in { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* screens gallery */
.shots-wrap { padding-bottom: clamp(48px, 6vw, 80px); }
.shots { padding-block: 44px 20px; border-top: 1px solid var(--line); }
.shots__title { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.shots__grid { list-style: none; display: grid; gap: 44px 26px; margin-top: 30px; grid-template-columns: repeat(auto-fill, minmax(min(44%, 200px), 1fr)); }
.shot .phone { width: 100%; max-width: 236px; }
.shot h3 { margin-top: 20px; font-size: 1.0625rem; letter-spacing: 0; line-height: 1.3; }
.shot p { margin-top: 6px; color: var(--text-2); font-size: .93rem; }
.shot .link-arrow { margin-top: 10px; font-size: .92rem; }
.shot:target h3 { color: var(--blue); }
.shot:target .phone { box-shadow: var(--shadow-phone), 0 0 0 4px var(--blue-l); }

/* download page */
.dl { padding-bottom: clamp(40px, 5vw, 64px); }
.dl__grid { display: grid; gap: 20px; align-items: start; }
.dl-card { padding: clamp(24px, 3vw, 34px); border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); }
.dl-card h2 { font-size: 1.6rem; }
.dl-card > p { margin-top: 10px; color: var(--text-2); }
.dl-card--play { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.dl-card--play h2 { color: #fff; }
.dl-card--play > p { color: var(--on-ink-2); }
.dl-card__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.dl-card--play .ticks { margin-top: 26px; }
.dl-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dl-card__foot { margin-top: 18px; }
.dl-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 10px; margin-block: 20px 22px; }
.dl-meta div { padding: 10px 14px; border-radius: 10px; background: var(--bg); }
.dl-meta dt { color: var(--text-3); font-size: .75rem; font-weight: 600; }
.dl-meta dd { margin-top: 2px; color: var(--ink); font-weight: 700; }
.gate { display: grid; gap: 14px; }
.gate-ok { padding: 18px; border-radius: 12px; background: var(--ok-bg); }
.gate-ok__title { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 800; }
.gate-ok p + p { margin-top: 4px; color: var(--text-2); }
.gate-ok .btn { margin-top: 14px; }
@media (min-width: 900px) { .dl__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; } }
.facts3 { display: grid; gap: 28px; margin-top: 40px; }
.facts3 > div { padding-top: 16px; border-top: 2px solid var(--line); }
.facts3 h3 { font-size: 1.0625rem; letter-spacing: 0; line-height: 1.35; }
.facts3 p { margin-top: 8px; color: var(--text-2); font-size: .97rem; }
@media (min-width: 820px) { .facts3 { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.hash { display: grid; gap: 12px; margin-top: 40px; padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.hash__row { display: grid; gap: 6px; }
.hash__k { color: var(--text-3); font-size: .8rem; font-weight: 700; }
.hash__v { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: .82rem; text-align: start; cursor: copy; }
.hash__v span { overflow-wrap: anywhere; }
.hash__v small { flex: none; color: var(--text-3); font-family: var(--font); font-size: .75rem; font-weight: 600; }
.hash__v:hover, .hash__v.is-copied { border-color: var(--blue); }
.hash__v.is-copied small { color: var(--ok); }
@media (min-width: 680px) { .hash__row { grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 16px; } }
.install-sec { background: var(--paper); }
.install { list-style: none; counter-reset: inst; display: grid; gap: 30px; max-width: 780px; margin-top: 40px; }
.install li { counter-increment: inst; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
.install li::before { content: counter(inst); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 800; }
.install h3 { font-size: 1.125rem; letter-spacing: 0; line-height: 1.35; }
.install p { margin-top: 6px; color: var(--text-2); }
.tip { display: inline-block; margin-top: 10px !important; padding: 6px 12px; border-radius: 8px; background: var(--wash); color: var(--ink) !important; font-size: .875rem; font-weight: 600; }
.changelog { max-width: 780px; margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.changelog__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-3); }
.changelog__head strong { color: var(--blue); font-size: 1.05rem; }
.changelog ul { margin-top: 12px; padding-inline-start: 1.2em; color: var(--text-2); display: grid; gap: 4px; }

/* forms (download gate, support) */
.form-row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { color: var(--text-2); font-size: .875rem; font-weight: 600; }
.input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--text); font-size: 1rem; }
textarea.input { min-height: 150px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-inline-end: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select.input { background-position: 20px 52%, 15px 52%; }
.input::placeholder { color: #6B7585; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15, 63, 191, .2); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.form-error { color: var(--danger); font-size: .92rem; font-weight: 600; }
.form-note { color: var(--text-3); font-size: .82rem; }

/* support page */
.support-mail { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--text-2); }
.support-mail .ico { color: var(--blue); }
.support { padding-bottom: var(--sec); }
.tabs { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 4px; padding: 4px; border-radius: 12px; background: var(--wash); }
.tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 9px; color: var(--text-2); font-weight: 700; white-space: nowrap; text-decoration: none; text-align: center; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(7, 21, 51, .14); }
@media (max-width: 520px) {
  .tabs { display: flex; width: 100%; }
  .tabs a { flex: 1 1 0; padding: 8px 6px; font-size: .9rem; white-space: normal; line-height: 1.2; }
}
.panel { max-width: 820px; margin-top: 36px; }
.support:not(.has-tabs) .panel + .panel { padding-top: 40px; border-top: 1px solid var(--line); }
.panel__title { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.panel__lead { margin-top: 10px; color: var(--text-2); }
.panel .faq__list { margin-top: 20px; }
.support-form { display: grid; gap: 16px; margin-top: 24px; }
.ticket-ok { margin-top: 24px; padding: 24px; border-radius: 14px; background: var(--ok-bg); }
.ticket-ok__title { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 1.125rem; font-weight: 800; }
.ticket-ok__id { margin-block: 12px; color: var(--ink); font-family: var(--mono); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
.ticket-ok .btn { margin-top: 16px; }
.track { display: grid; gap: 12px; margin-top: 22px; align-items: end; }
@media (min-width: 560px) { .track { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .track .btn { justify-self: start; } }
@media (min-width: 900px) { .track { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; } }
.ticket { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ticket__rows { display: grid; gap: 0; }
.ticket__rows div { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; border-bottom: 1px solid var(--line); }
.ticket__rows div:last-child { border-bottom: 0; }
.ticket__rows dt { color: var(--text-3); font-size: .9rem; }
.ticket__rows dd { color: var(--ink); font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--wash); color: var(--ink); font-size: .82rem; font-weight: 700; }
.status--open { background: #FDE8E7; color: var(--danger); }
.status--in_progress { background: #FDF0E1; color: var(--warn); }
.status--resolved { background: var(--ok-bg); color: var(--ok); }
.ticket__reply { margin-top: 16px; padding: 14px 16px; border-inline-start: 3px solid var(--blue); background: var(--wash); border-start-end-radius: 10px; border-end-end-radius: 10px; }
.ticket__reply-k { color: var(--blue); font-size: .82rem; font-weight: 700; }
.ticket__reply p + p { margin-top: 6px; }
.ticket__reply-date { color: var(--text-3); font-size: .8rem; }

/* legal documents */
.doc-meta { margin-top: 16px; color: var(--text-3); font-size: .9rem; font-weight: 600; }
.doc-note { margin-top: 12px; max-width: 46em; padding: 12px 16px; border-radius: 10px; background: var(--wash); color: var(--text-2); font-size: .92rem; }
.doc-wrap { display: grid; gap: 40px; padding-bottom: var(--sec); }
.toc { align-self: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.toc__title { color: var(--text-3); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.toc ol { margin-top: 10px; padding-inline-start: 1.3em; display: grid; gap: 6px; color: var(--text-3); font-size: .95rem; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; }
.doc { max-width: 760px; }
.doc section + section { margin-top: 44px; }
.doc h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.doc p, .doc li { color: var(--text-2); line-height: 1.75; }
.doc h2 + p, .doc p + p, .doc p + ul { margin-top: 12px; }
.doc ul { margin-top: 12px; padding-inline-start: 1.25em; display: grid; gap: 8px; }
.doc li strong { color: var(--ink); }
.doc .highlight { margin-top: 16px; padding: 14px 18px; border-inline-start: 3px solid var(--blue); background: var(--paper); color: var(--ink); border-start-end-radius: 10px; border-end-end-radius: 10px; }
.doc-links { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); }
@media (min-width: 980px) {
  .doc-wrap { grid-template-columns: 250px minmax(0, 1fr); gap: 64px; }
  .doc-wrap--single { grid-template-columns: minmax(0, 1fr); }
  .toc { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* why page */
.why-head { padding-bottom: clamp(36px, 5vw, 56px); }
.why-photo { position: relative; }
.why-photo img { width: 100%; height: clamp(260px, 42vw, 560px); object-fit: cover; }
.why-photo figcaption { padding-block: 12px 0; color: var(--text-3); font-size: .85rem; }
.why-list { padding-block: clamp(40px, 6vw, 72px); }
.scenario { display: grid; gap: 22px; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.scenario:first-child { border-top: 2px solid var(--ink); }
.scenario__role { display: flex; align-items: baseline; gap: 12px; color: var(--blue); font-weight: 700; }
.scenario__role span { color: var(--text-3); font-family: var(--mono); font-size: .82rem; font-weight: 500; }
.scenario__hook { margin-top: 12px; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.scenario__problem { color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; }
.scenario__problem strong { color: var(--ink); }
.scenario__solution { margin-top: 26px; padding: 22px 24px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.scenario__solution h3 { color: var(--blue); font-size: .95rem; letter-spacing: 0; }
.scenario__solution p { margin-top: 8px; color: var(--text); }
.results { list-style: none; display: grid; gap: 14px 24px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.results li { padding-top: 10px; border-top: 2px solid var(--line); }
.results strong { display: block; color: var(--ink); }
.results span { color: var(--text-3); font-size: .92rem; }
.scenario .link-arrow { margin-top: 24px; }
@media (min-width: 960px) {
  .scenario { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .scenario__head { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
.why-quote { background: var(--paper); }
.why-quote__grid { display: grid; gap: 40px; align-items: center; }
.why-quote__photo { overflow: hidden; width: min(100%, 380px); border-radius: 6px; transform: rotate(1.2deg); box-shadow: 0 30px 60px -36px rgba(7, 21, 51, .5); }
[dir="rtl"] .why-quote__photo { transform: rotate(-1.2deg); }
.why-quote__q p { color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-head); }
.why-quote__q footer { margin-top: 18px; color: var(--text-3); }
@media (min-width: 900px) { .why-quote__grid { grid-template-columns: 380px minmax(0, 1fr); gap: 80px; } }

/* error page */
.notfound { padding-block: clamp(32px, 6vw, 72px) var(--sec); }
.notfound__grid { display: grid; gap: 40px; align-items: center; }
.notfound__code { color: var(--blue); font-family: var(--mono); font-size: 1.1rem; font-weight: 600; }
.notfound .page-title { margin-top: 10px; }
.notfound__links { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.notfound__photo { overflow: hidden; width: min(100%, 420px); border-radius: 24px; justify-self: center; }
@media (min-width: 900px) { .notfound__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } }

/* print: content only */
@media print {
  .site-header, .site-footer, .menu, .lang, .cta, .cta-strip, .hero__visual { display: none !important; }
  body { background: #fff; }
}

/* ── WP-W0: team invite (/join/<token>) and account deletion (/account/delete) ──────────────────────────────────
 * Reuses the page head, .install steps, .facts3, .ticket__rows, .support-form, .ticket-ok and .sr-only; only what
 * those do not cover is here. */

/* invite: the invitation itself is the one card (navy monogram, as on the app's invite screen); how-to beside it */
.join { padding-block: clamp(24px, 4vw, 52px) var(--sec); }
.join__grid { display: grid; gap: 44px; align-items: start; }
.join__main { min-width: 0; }
.invite { margin-top: 16px; padding: clamp(22px, 3.2vw, 34px); border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 30px 60px -44px rgba(10, 30, 63, .45); }
.invite__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.invite__mono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: var(--ink); color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.invite__title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: var(--track-tight); overflow-wrap: anywhere; }
.invite__by { margin-top: 8px; color: var(--text-2); font-size: 1.0625rem; }
.invite__by strong { color: var(--ink); }
.invite__rows { margin-top: 24px; border-top: 1px solid var(--line); }
.invite__time { font-family: var(--mono); font-size: .92rem; }
.invite__sees { margin-top: 16px; color: var(--text-2); font-size: .95rem; }
.invite__note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--wash); color: var(--text-2); font-size: .92rem; }
.invite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; }
.invite__hint { color: var(--text-3); font-size: .85rem; }
.join__title { margin-top: 14px; max-width: 16em; }
.join__text { max-width: 34em; }
.join__h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.join__how .install { margin-top: 22px; gap: 26px; }
.join__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.join__new { margin-top: 16px; padding-inline-start: 1.3em; display: grid; gap: 10px; color: var(--text-2); }
.join__new strong { color: var(--ink); }
.join__noapp { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
@media (min-width: 960px) {
  .join__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; }
  .join__how { padding-top: 38px; }
}

/* account deletion: steps (.install), three notes (.facts3), what happens (table; stacked on phones), request form */
.acct { display: grid; gap: clamp(52px, 7vw, 84px); padding-bottom: var(--sec); }
.acct__sec { max-width: 820px; }
.acct__sec--wide { max-width: 980px; }
.acct__h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.acct__lead { margin-top: 10px; max-width: 42em; color: var(--text-2); }
.acct__listing { margin-top: 12px; max-width: 46em; color: var(--text-3); font-size: .92rem; }
.acct__steps { margin-top: 26px; gap: 24px; }
.acct__notes { margin-top: 36px; }
.fate { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.fate th, .fate td { padding-block: 14px; padding-inline: 0 18px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.fate thead th { padding-block: 0 10px; border-bottom: 2px solid var(--ink); color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fate tbody th { width: 46%; color: var(--ink); font-weight: 600; }
.fate td { color: var(--text-2); }
.fate__how { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.fate__how--gone { background: var(--ok-bg); color: var(--ok); }
.fate__how--kept { background: var(--wash); color: var(--ink); }
@media (max-width: 719px) {
  .fate thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fate, .fate tbody { display: block; }
  .fate tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); }
  .fate th, .fate td { padding: 0; border: 0; }
  .fate tbody th { grid-column: 1 / -1; width: auto; }
}
.acct__form { max-width: 640px; }
.acct__msg { min-height: 110px; }
.acct__request .ticket-ok { max-width: 640px; }
.acct__mail { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: var(--text-2); font-size: .95rem; }
.acct__mail .ico { margin-top: .2em; color: var(--blue); }
.acct__more { max-width: 820px; margin-top: 0; }