/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-italic-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-italic-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-italic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-normal-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-normal-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/CormorantGaramond-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Inter-normal-400_700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Inter-normal-400_700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Inter-normal-400_700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* AbriStitch site.
   Brand: Abris Art Brand Book v3.6 (brand.abrisart.ua, repo dreamcarua/abrisart-dashboards/brand):
   colors.html (Plum family on Paper, Ink text, system Moss; gold retired), typography.html
   (Cormorant Garamond headlines, Inter body), logo.html (wordmark, plum on light, white on dark).
   Dark mode surfaces and light plum tints are mixes of brand colours, not new hues.
   Shape rule: buttons and chips are pills; store badges 12px like the official artwork;
   cards and tiles 22px; device frames follow the device. */


:root {
  --plum: #6d1e43;
  --plum-deep: #4a1428;
  --plum-soft: #8b5c75;
  --paper: #fbf8f1;
  --linen: #f4eff1;
  --ink: #00171f;
  --ink-soft: #3a4a52;
  --moss: #6e8e3f;

  --bg: var(--paper);
  --surface: var(--linen);
  --surface-2: #fff;
  --text: var(--ink);
  --text-2: var(--ink-soft);
  --heading: var(--plum-deep);
  --accent: var(--plum);
  --accent-ink: var(--paper);
  --rule: color-mix(in oklab, var(--plum-soft) 28%, var(--paper));
  --hole: color-mix(in oklab, var(--plum-soft) 34%, var(--paper));
  --band: var(--plum-deep);
  --band-text: var(--paper);
  --band-text-2: color-mix(in oklab, var(--linen) 82%, var(--plum-soft));
  --badge: var(--ink);
  --badge-text: var(--paper);
  --frame: var(--ink);
  --shadow: 0 30px 60px -28px color-mix(in oklab, var(--plum-deep) 45%, transparent);

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --gutter: 16px;
  --max: 1200px;
  --radius: 22px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: color-mix(in oklab, var(--plum-deep) 40%, #120a10);
    --surface: color-mix(in oklab, var(--plum-deep) 58%, #120a10);
    --surface-2: color-mix(in oklab, var(--plum-deep) 70%, #120a10);
    --text: var(--paper);
    --text-2: color-mix(in oklab, var(--linen) 80%, var(--plum-soft));
    --heading: var(--linen);
    --accent: color-mix(in oklab, var(--plum-soft) 40%, var(--paper));
    --accent-ink: var(--ink);
    --rule: color-mix(in oklab, var(--plum-soft) 38%, var(--bg));
    --hole: color-mix(in oklab, var(--plum-soft) 45%, var(--bg));
    --band: var(--plum);
    --badge: var(--paper);
    --badge-text: var(--ink);
    --frame: #000;
    --shadow: 0 30px 60px -24px rgb(0 0 0 / .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
::selection { background: color-mix(in oklab, var(--plum-soft) 35%, var(--bg)); color: var(--text); }
html { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: color-mix(in oklab, var(--plum-soft) 55%, var(--bg)) transparent; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
p, ul, ol, h1, h2, h3, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

.skip {
  position: absolute; left: var(--gutter); top: -200px; z-index: 50;
  background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 10px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--heading); letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 3.6rem); line-height: 1.04; }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.06; }
h3 { font: 600 1.18rem/1.3 var(--sans); color: var(--text); letter-spacing: -.005em; }
.lead { font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.45 var(--serif); color: var(--text-2); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--text-2); }
p { text-wrap: pretty; }

/* Running stitch rule: the structural device instead of hairlines */
.stitch {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--plum-soft) 0 10px, transparent 10px 16px) 0 0 / 16px 2px repeat-x;
}

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease-out);
}
.site-head.is-stuck { border-bottom-color: var(--rule); }
.site-head .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); text-decoration: none; margin-right: auto; }
.brand svg { width: 114px; height: auto; }
.brand-app { font: 600 .95rem/1 var(--sans); color: var(--text); padding-left: 12px; border-left: 1px solid var(--rule); white-space: nowrap; }
.nav { display: none; gap: 4px; }
.nav a { color: var(--text); text-decoration: none; font-size: .95rem; padding: 10px 12px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .lang summary:hover, .lang a:hover { background: var(--surface); } a.store:hover { opacity: .9; } .faq summary:hover { color: var(--accent); } .btn:hover { background: color-mix(in oklab, var(--accent) 86%, var(--text)); } }
@media (min-width: 960px) { .nav { display: flex; } }

.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border-radius: 999px; font: 600 .9rem/1 var(--sans); color: var(--text);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 18px; height: 18px; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow);
  transform-origin: top right;
}
.lang[open] ul { animation: pop .18s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.lang a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.lang a[aria-current='page'] { font-weight: 600; color: var(--accent); }
.lang a span { color: var(--text-2); font-size: .8rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink); font: 600 .95rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform .16s var(--ease-out), background-color .2s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.head-cta { min-height: 40px; padding: 0 14px; font-size: .875rem; }
@media (max-width: 419px) { .brand-app { display: none; } }
@media (min-width: 560px) { .head-cta { min-height: 44px; padding: 0 20px; font-size: .95rem; } }

/* Language suggestion */
.suggest[hidden] { display: none; }
/* Floating, so it never shifts the page (CLS); enters like a toast, once */
.suggest {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; font-size: .95rem;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(12px); }
}
.suggest .wrap { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 6px 6px 18px; }
@media (prefers-reduced-motion: reduce) { .suggest { transition: opacity .2s ease; @starting-style { opacity: 0; transform: none; } } }
.suggest p { margin-right: auto; line-height: 1.35; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.suggest .x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; }
.suggest .x:hover { background: var(--bg); color: var(--text); }
.suggest .x svg { width: 20px; height: 20px; }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-grid; grid-template-columns: auto; align-content: center; min-width: 172px; min-height: 58px;
  padding: 8px 18px; border-radius: 12px; background: var(--badge); color: var(--badge-text); text-decoration: none;
  transition: transform .16s var(--ease-out), opacity .2s;
}
a.store:active { transform: scale(.97); }
.store small { font: 500 .78rem/1.2 var(--sans); letter-spacing: .01em; }
.store b { font: 600 1.25rem/1.1 var(--sans); letter-spacing: -.01em; }
.store em { font: 500 .78rem/1.2 var(--sans); font-style: normal; color: var(--text-2); margin-top: 3px; }
.store.is-soon { background: transparent; color: var(--text); box-shadow: none; border: 1.5px dashed color-mix(in oklab, var(--plum-soft) 70%, var(--bg)); cursor: default; }
.store.is-soon em { color: var(--accent); font-weight: 600; }

/* Hero */
.hero { position: relative; padding: 28px 0 56px; overflow-x: clip; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero-text { display: grid; gap: 20px; justify-items: start; max-width: 44rem; }
.hero-text .lead { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); max-width: 100%; }
.hero-text .stores { margin-top: 8px; }
@media (min-width: 1100px) {
  .hero { padding: 56px 0 40px; }
  .hero .wrap { grid-template-columns: 1.2fr .8fr; gap: 24px; }
}

.hero-art { position: relative; display: grid; justify-items: center; padding: 24px 0 8px; isolation: isolate; }
.canvas { position: absolute; z-index: -1; inset: -6% -12% 2% -12%; width: 124%; height: auto; pointer-events: none; color: var(--hole); }
.canvas .aida { fill: currentColor; }
.devices { position: relative; width: min(100%, 340px); }
.devices::before {
  content: ''; position: absolute; inset: -14% -30%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--hole) 1.3px, transparent 1.8px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent);
}
@media (min-width: 1100px) { .devices { width: 102%; max-width: 600px; aspect-ratio: 1; margin-left: 5%; } }

.phone {
  position: relative; z-index: 2; width: min(66vw, 250px); margin: 0 auto;
  padding: 9px; border-radius: 44px; background: var(--frame); box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in oklab, var(--plum-soft) 40%, transparent);
}
.phone img, .phone picture { border-radius: 35px; overflow: hidden; width: 100%; aspect-ratio: 780 / 1688; object-fit: cover; background: var(--surface); }
.tablet { display: none; }
@media (min-width: 1100px) {
  .devices .phone { position: absolute; right: 2%; bottom: 0; width: 46%; }
  .devices .tablet {
    display: block; position: absolute; left: 0; top: 10%; width: 86%;
    padding: 10px; border-radius: 30px; background: var(--frame); box-shadow: var(--shadow);
  }
  .devices .tablet img, .devices .tablet picture { border-radius: 21px; overflow: hidden; width: 100%; aspect-ratio: 2388 / 1668; object-fit: cover; }
}
.hero-art figcaption { margin-top: 18px; font-size: .8rem; color: var(--text-2); }

/* The stitched motif: each cross is two legs, worked row by row like a real stitcher:
   all "/" legs left to right, then the "\" legs back. Plays once; reduced motion shows it finished. */
.motif-hero { position: absolute; z-index: 1; width: 30%; left: -6%; bottom: 6%; }
@media (min-width: 1100px) { .motif-hero { width: 30%; left: 2%; top: auto; bottom: -2%; } }
.motif path { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.motif .c1 { stroke: var(--plum); }
.motif .c2 { stroke: var(--plum-soft); }
.motif .c3 { stroke: var(--plum-deep); }
.motif .c4 { stroke: var(--moss); }
@media (prefers-color-scheme: dark) {
  .motif .c3 { stroke: color-mix(in oklab, var(--plum-soft) 55%, var(--paper)); }
}
.motif path { transform-box: fill-box; }
.motif .l1 { transform-origin: 0 100%; }
.motif .l2 { transform-origin: 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js .motif-hero path { opacity: 0; transform: scale(.3); animation: leg .18s var(--ease-out) forwards; animation-delay: calc(var(--d) * 1ms + 300ms); }
}
@keyframes leg { to { opacity: 1; transform: none; } }

/* Sections */
.section { padding: 72px 0; }
@media (min-width: 960px) { .section { padding: 120px 0; } }
.section-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: 44px; }
@media (min-width: 960px) { .section-head { margin-bottom: 64px; } }

/* Two ways in */
.ways { display: grid; gap: 16px; }
@media (min-width: 860px) { .ways { grid-template-columns: 1fr 1fr; gap: 24px; } }
.way { background: var(--surface); border-radius: var(--radius); padding: 28px 24px 30px; display: grid; gap: 18px; align-content: start; }
@media (min-width: 960px) { .way { padding: 44px 44px 46px; } }
.way h3 { font: 500 clamp(1.7rem, 1.4rem + 1vw, 2.2rem)/1.1 var(--serif); color: var(--heading); letter-spacing: -.01em; }
.way > p { color: var(--text-2); max-width: 30em; }
.steps { counter-reset: s; display: grid; gap: 14px; margin-top: 6px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 1.9rem 1fr; gap: 14px; align-items: start; }
.steps li span { padding-top: .2rem; }
.steps li::before { content: counter(s); font: 600 1.05rem/1.6 var(--sans); color: var(--accent); width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); line-height: 1; }
.way .note { font-size: .95rem; color: var(--text-2); padding-top: 14px; border-top: 1px solid var(--rule); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--bg); font-size: .92rem; line-height: 1.35; }
.chips li b { font-weight: 700; margin-right: 4px; }
.formats-label { font: 600 .8rem/1 var(--sans); color: var(--text-2); }

/* Features: sticky phone on wide screens, inline figures on narrow ones */
.feat { display: grid; gap: 56px; }
.feat-list { display: grid; gap: 64px; }
.feat-item { display: grid; gap: 14px; }
.feat-item h3 { font: 500 clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem)/1.1 var(--serif); color: var(--heading); letter-spacing: -.01em; }
.feat-item p { color: var(--text-2); max-width: 30em; font-size: 1.08rem; }
.feat-item figure { margin-top: 12px; }
.feat-item figure .phone { width: min(70vw, 260px); margin: 0; }
.feat-stage { display: none; }
.stitch-types { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--text-2); max-width: 46rem; }
@media (min-width: 960px) {
  .feat { grid-template-columns: 1fr minmax(300px, 380px); gap: 80px; align-items: start; }
  .feat-list { gap: 0; }
  .feat-item { min-height: 62vh; align-content: center; padding-left: 28px; position: relative; }
  .feat-item::before {
    content: ''; position: absolute; left: 0; top: calc(50% - 44px); height: 88px; width: 2px;
    background: linear-gradient(180deg, var(--plum-soft) 0 10px, transparent 10px 16px) 0 0 / 2px 16px repeat-y;
    opacity: .35; transition: opacity .3s var(--ease-out);
  }
  .feat-item.is-active::before { opacity: 1; background-image: linear-gradient(180deg, var(--accent) 0 10px, transparent 10px 16px); }
  .feat-item figure { display: none; }
  .feat-stage { display: block; position: sticky; top: calc(50vh - 300px); }
  .feat-stage .phone { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
  .feat-stage .screens { position: relative; border-radius: 35px; overflow: hidden; aspect-ratio: 780 / 1688; background: var(--surface); }
  .feat-stage .screens img { position: absolute; inset: 0; border-radius: 0; opacity: 0; transition: opacity .25s ease; }
  .feat-stage .screens img.is-active { opacity: 1; }
  .feat-stage .screens img:first-child { opacity: 1; }
  .feat-stage.has-active .screens img:first-child:not(.is-active) { opacity: 0; }
}

/* Free band */
.band { background: var(--band); color: var(--band-text); }
.band h2 { color: var(--band-text); }
.triptych { display: grid; gap: 36px; }
.triptych li { display: grid; gap: 10px; padding-top: 22px; position: relative; }
.triptych li::before { content: ''; position: absolute; top: 0; left: 0; width: 64px; height: 2px; background: linear-gradient(90deg, var(--band-text-2) 0 10px, transparent 10px 16px) 0 0 / 16px 2px repeat-x; }
.triptych b { font: 500 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/1.05 var(--serif); letter-spacing: -.01em; }
.triptych p { color: var(--band-text-2); max-width: 22em; }
@media (min-width: 860px) { .triptych { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* Sync bento */
.bento { display: grid; gap: 16px; }
.tile { border-radius: var(--radius); padding: 28px 24px; display: grid; gap: 12px; align-content: start; overflow: hidden; position: relative; }
.tile h3 { font: 500 clamp(1.6rem, 1.35rem + 1vw, 2.1rem)/1.1 var(--serif); color: var(--heading); letter-spacing: -.01em; }
.tile p { color: var(--text-2); max-width: 32em; }
.tile-devices { background: var(--surface); }
.tile-devices .tablet-shot { margin-top: 12px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 6px solid var(--frame); }
.tile-devices .tablet-shot img { width: 100%; aspect-ratio: 2388 / 1668; object-fit: cover; }
.tile-offline { background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); min-height: 220px; }
.tile-offline::after {
  content: ''; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--hole) 1.3px, transparent 1.8px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.tile-offline > * { position: relative; z-index: 1; }
.tile-safe { background: color-mix(in oklab, var(--plum-soft) 18%, var(--bg)); }
.tile .big { font: 500 clamp(3.2rem, 2.4rem + 3vw, 5rem)/1 var(--serif); color: var(--accent); letter-spacing: -.02em; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 20px; }
  .tile { padding: 40px; }
  .tile-devices { grid-row: span 2; }
}

/* Import check */
.check { display: grid; gap: 48px; align-items: center; }
.check-text { display: grid; gap: 22px; }
.check ol { counter-reset: s; display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--rule); }
.check ol li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.check ol li::before { content: counter(s, decimal-leading-zero); font: 600 .85rem/1.9 var(--sans); letter-spacing: .08em; color: var(--accent); }
.check figure { display: grid; justify-items: center; gap: 14px; }
.check figure .phone { width: min(70vw, 270px); }
.check figcaption { max-width: 22rem; text-align: center; color: var(--text-2); font-size: .95rem; }
@media (min-width: 960px) { .check { grid-template-columns: 1.15fr .85fr; gap: 96px; } }

/* Abris proof */
.proof { text-align: left; }
.proof-body { display: grid; gap: 18px; max-width: 44rem; }
.proof-body p:first-child { font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.4 var(--serif); color: var(--text); }
.proof-body p { color: var(--text-2); }
.proof .link { font-weight: 600; }

/* FAQ */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .faq-wrap { grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
  .faq-wrap .section-head { position: sticky; top: 112px; }
}
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 48px 20px 0;
  font: 600 1.06rem/1.4 var(--sans); color: var(--text); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background:
    linear-gradient(45deg, transparent 43%, var(--accent) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--accent) 43% 57%, transparent 57%);
  transform: rotate(45deg); transition: transform .22s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(0deg); }
.faq .a { padding: 0 0 22px; color: var(--text-2); max-width: 40em; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .2s var(--ease-out), content-visibility .2s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Download */
.download { text-align: center; position: relative; isolation: isolate; overflow: hidden; }
.download .wrap { display: grid; justify-items: center; gap: 20px; }
.download h2 { max-width: 18em; }
.download .stores { justify-content: center; margin-top: 8px; }
.download .motif-small { width: 120px; margin-bottom: 8px; }

/* Footer */
.site-foot { padding: 48px 0 56px; font-size: .95rem; border-top: 1px solid var(--rule); }
.site-foot .wrap { display: grid; gap: 24px; }
.foot-brand { display: grid; gap: 8px; color: var(--accent); }
.foot-brand svg { width: 132px; }
.foot-brand .tagline { font: italic 500 1.25rem/1.3 var(--serif); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; }
.foot-langs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.foot-langs a[aria-current='page'] { color: var(--text); font-weight: 600; text-decoration: none; }
.foot-legal { color: var(--text-2); font-size: .85rem; }
@media (min-width: 900px) {
  .site-foot .wrap { grid-template-columns: 1fr auto; align-items: end; }
  .foot-langs, .foot-legal { grid-column: 1 / -1; }
}

/* Long-form pages */
.doc { padding: 40px 0 88px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); margin-bottom: 14px; }
.doc h2 { font-size: clamp(1.6rem, 1.4rem + .8vw, 2rem); margin: 44px 0 14px; }
.doc p + p { margin-top: 12px; }
.doc ul { display: grid; gap: 10px; margin-top: 12px; }
.doc ul li { padding-left: 22px; position: relative; }
.doc ul li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 9px; height: 9px;
  background: linear-gradient(45deg, transparent 40%, var(--accent) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--accent) 40% 60%, transparent 60%); }
.doc .updated { color: var(--text-2); }
.doc .summary { margin-top: 28px; padding: 22px 24px; background: var(--surface); border-radius: 18px; }
/* Legal documents rendered from docs/legal/*.md */
.legal h3 { font: 600 1.05rem/1.4 var(--sans); color: var(--text); margin: 26px 0 8px; }
.legal h2, .legal h3 { scroll-margin-top: 88px; }
.legal ol { display: grid; gap: 10px; margin-top: 12px; padding-left: 1.6em; list-style: decimal; }
.legal ol > li::marker { color: var(--accent); font-weight: 600; }
.legal li ul { margin-top: 8px; }
.legal a { overflow-wrap: anywhere; }
.legal .lead { font-size: 1.15rem; color: var(--text-2); margin-top: 6px; }
.legal .toc { margin-top: 28px; padding: 20px 22px; background: var(--surface); border-radius: 18px; }
.legal .toc p { font-weight: 600; }
.legal .toc ol { gap: 6px; margin-top: 10px; }
.legal .table { margin-top: 16px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; }
.legal table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.legal thead th { background: var(--surface); font-weight: 600; }
.legal tbody th { font-weight: 600; color: var(--text); min-width: 9em; }
.legal tbody tr:last-child > * { border-bottom: 0; }
/* phones: each row becomes a small card, the column name above every value */
@media (max-width: 640px) {
  .legal .table { border: 0; border-radius: 0; overflow: visible; }
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal tbody tr { border: 1px solid var(--rule); border-radius: 14px; margin-top: 12px; overflow: hidden; }
  .legal tbody th { background: var(--surface); border-bottom: 1px solid var(--rule); }
  .legal td { border-bottom: 0; padding-top: 4px; }
  .legal td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); }
  .legal tbody tr:last-child > * { border-bottom: 0; }
  .legal tbody th { border-bottom: 1px solid var(--rule) !important; }
}

/* Kit page */
.kit { padding: 40px 0 72px; }
.kit .wrap { max-width: 620px; display: grid; gap: 22px; justify-items: start; }
.kit .motif-small { width: 96px; }
.kit h1 { font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); }
.kit .open-row { display: grid; gap: 6px; }
.kit .file { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--surface); width: 100%; }
.kit .file a { font-weight: 600; }
.kit .file small { color: var(--text-2); font-size: .9rem; }
.kit .note { color: var(--text-2); font-size: .95rem; }
/* Interim kit QR page /get/ */
.get .card { display: grid; gap: 14px; justify-items: start; width: 100%; padding: 22px 20px; border-radius: var(--radius); background: var(--surface); }
.get .card h2 { font: 600 1.15rem/1.3 var(--sans); color: var(--text); }
.get .card p { color: var(--text-2); }
.get .card small { color: var(--text-2); font-size: .9rem; }
.get .card .btn { white-space: normal; text-align: center; min-height: 48px; }
.get .card .store.is-soon { background: var(--bg); }
.btn-line { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: var(--bg); } }
.warn { padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--text); border-left: 3px solid var(--accent); }
.get .card .warn { background: var(--bg); }
/* Privacy draft notice (lawyer review before release) */
.doc .draft { margin-top: 18px; padding: 12px 16px; border: 2px dashed var(--accent); border-radius: 14px; }
#kit-lang { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; min-height: 44px; padding: 0 14px; }
[hidden] { display: none !important; }

/* Reduced motion: fewer and gentler, not zero. Movement and scaling go; colour and opacity changes stay. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, a.store:active { transform: none; }
  .lang[open] ul { animation: none; }
  .faq summary::after { transition: none; }
  .faq details::details-content { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-head { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --text-2: var(--text); --rule: var(--plum-soft); }
  .store.is-soon { box-shadow: inset 0 0 0 2px var(--text); }
}

@media print {
  .site-head, .suggest, .lang, .stores, .canvas { display: none !important; }
  body { background: #fff; color: #000; }
}

/* the floating language offer must not cover a focused link (WCAG 2.4.11) */
html:has(.suggest:not([hidden])) { scroll-padding-bottom: 104px; }
html:has(.suggest:not([hidden])) .site-foot { padding-bottom: 120px; }