/* Tutorio site — shared by /, /privacy, /terms and /app.
   Colours, radii and the font mirror the app's TColors / TSizes / TTextStyles. */

@font-face { font-family: 'Montserrat Alternates'; src: url('/fonts/MontserratAlternates-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('/fonts/MontserratAlternates-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('/fonts/MontserratAlternates-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --white: #FFFFFF; --ethereal: #EFF2F7; --ivory: #DFE1EE; --slate: #B5B7C1;
  --asphalt: #6C6F7E; --charcoal: #42444D; --black: #1C1D22;
  --lemon: #FFEFA4; --rose: #FFEFF6; --violet: #C7BEFF; --chiffon: #FFEFB7; --blush: #F0E2F8;
  --azure: #5398FF; --purple: #B090FF; --lilac: #9361BB; --periwinkle: #9996E1;
  --raspberry: #E6316D; --aqua: #75E6FF; --honey: #E8B62C;
  --bg: linear-gradient(135deg, var(--lemon) 0%, var(--rose) 50%, var(--violet) 150%);
  --btn: linear-gradient(135deg, var(--chiffon) 0%, var(--blush) 100%);
  --shadow: 0 0 12px rgba(66, 68, 77, .15);
  --r: 12px;
}

/* Only one language is visible at a time; Ukrainian is the no-JS default. */
html[data-lang="uk"] [data-l="en"],
html[data-lang="en"] [data-l="uk"] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); background-attachment: fixed; }
body {
  font-family: 'Montserrat Alternates', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500; color: var(--black);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }

/* ---------- living background ---------- */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; animation: drift 18s ease-in-out infinite alternate; }
.b1 { width: 46vw; height: 46vw; background: var(--lemon); left: -12vw; top: -18vw; }
.b2 { width: 40vw; height: 40vw; background: var(--violet); right: -10vw; bottom: -16vw; animation-delay: -6s; }
.b3 { width: 26vw; height: 26vw; background: var(--white); left: 37vw; top: 30vh; opacity: .6; animation-delay: -11s; }
.b4 { width: 16vw; height: 16vw; background: #FFC4DD; left: 12vw; bottom: -6vw; opacity: .45; animation-delay: -3s; }
@keyframes drift { to { transform: translate(4vw, 3vh) scale(1.08); } }

/* ---------- page frame ---------- */
.page {
  position: relative; z-index: 1; min-height: 100svh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  max-width: 1360px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px);
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: clamp(10px, 2vh, 22px); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 20px; }
.mark { width: 40px; height: 40px; border-radius: 11px; background: var(--black); display: grid; place-items: center; flex: none; }
.mark svg { width: 26px; }
.lang { display: flex; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.65); position: relative; box-shadow: var(--shadow); }
.lang button { position: relative; z-index: 1; width: 44px; height: 32px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--asphalt); text-align: center; transition: color .25s; }
.lang button[aria-pressed="true"] { color: var(--black); }
.lang .thumb { position: absolute; top: 4px; left: 4px; width: 44px; height: 32px; border-radius: 9px; background: var(--btn); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
html[data-lang="en"] .lang .thumb { transform: translateX(44px); }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: clamp(8px, 1.8vh, 16px); font-size: 13px; color: var(--asphalt); }
.foot nav { display: flex; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; }
.foot a { position: relative; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--black); }
.foot a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--lilac); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.foot a:hover::after, .foot a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- store buttons, cut like the app's own buttons ---------- */
.stores { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.store { position: relative; display: flex; align-items: center; gap: 12px; height: clamp(52px, 7.2vh, 64px); padding-inline: 8px 26px; border-radius: 16px; background: var(--black); color: var(--white); box-shadow: 0 10px 24px rgba(28,29,34,.18); overflow: hidden; transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
.store.light { background: var(--white); color: var(--black); box-shadow: 0 10px 24px rgba(28,29,34,.08); }
.store .bic { width: clamp(38px, 5.4vh, 48px); aspect-ratio: 1; border-radius: 12px; background: var(--btn); display: grid; place-items: center; flex: none; transition: transform .45s cubic-bezier(.3,1.7,.5,1); }
.store.light .bic { background: var(--black); }
.store .bic svg { width: 52%; height: 52%; fill: var(--black); }
.store.light .bic svg { fill: var(--white); }
.store small { display: block; font-size: clamp(10px, 1.4vh, 12px); opacity: .65; font-weight: 400; text-align: left; }
.store b { display: block; font-size: clamp(16px, 2.3vh, 19px); font-weight: 600; line-height: 1.15; white-space: nowrap; text-align: left; }
.store::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%); transform: translateX(-100%); transition: transform .7s ease; pointer-events: none; }
.store.light::after { background: linear-gradient(110deg, transparent 40%, rgba(255,239,164,.6) 50%, transparent 60%); }
.store:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(28,29,34,.22); }
.store:hover::after { transform: translateX(100%); }
.store:hover .bic { transform: rotate(-10deg) scale(1.08); }
.store:active { transform: scale(.98); }

/* =====================================================================
   Landing — exactly one screen
   ===================================================================== */
body.landing { overflow-x: hidden; }
body.landing .page { height: 100svh; min-height: 620px; }
.main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding-bottom: clamp(6px, 1.4vh, 14px); }

.headline { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2vh, 12px); }
.headline .stores { margin-top: clamp(4px, 1vh, 10px); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.7); font-size: 13px; color: var(--charcoal); }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(147,97,187,.5); } 60%, 100% { box-shadow: 0 0 0 7px rgba(147,97,187,0); } }
h1 { font-size: clamp(30px, min(4.2vw, 6.6vh), 64px); line-height: 1.05; font-weight: 600; letter-spacing: -1px; }
h1 .m { display: none; }
.rot { position: relative; display: inline-block; color: var(--lilac); }
.rot::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: .08em; height: .32em; background: var(--lemon); z-index: -1; border-radius: 6px; }
.rot.swap { animation: wordIn .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes wordIn { from { opacity: 0; transform: translateY(.35em) rotate(-3deg); } }
.lead { font-size: clamp(13px, 1.9vh, 17px); color: var(--asphalt); font-weight: 400; max-width: 640px; line-height: 1.5; }

.compose { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 26vw, 380px) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); min-height: 0; align-items: center; padding-top: clamp(6px, 1.4vh, 14px); }

/* left: circle tabs; the active one opens a bubble */
.tabs { justify-self: end; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); width: min(100%, 380px); }
.tabbtn { --accent: var(--lemon); display: flex; align-items: center; gap: 14px; }
.orb { position: relative; width: clamp(52px, 8vh, 74px); aspect-ratio: 1; display: grid; place-items: center; flex: none; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.tabbtn:hover .orb { transform: scale(1.08) rotate(-8deg); }
.tabbtn.on .orb::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(176,144,255,.45), transparent 68%); animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.12); opacity: .55; } }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .track { stroke: rgba(255,255,255,.8); }
.ring .prog { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 232.5; stroke-dashoffset: 232.5; }
.tabbtn.on .ring .prog { animation: ring var(--dur, 4.5s) linear forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.ic { position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.8); display: grid; place-items: center; box-shadow: var(--shadow); transition: background .3s; }
.tabbtn.on .ic { background: var(--black); animation: pop .55s cubic-bezier(.3,1.7,.5,1); }
@keyframes pop { 0% { transform: scale(.7) rotate(-20deg); } }
.ic svg { width: 42%; height: 42%; stroke: var(--black); fill: none; stroke-width: 1.8; transition: stroke .3s; }
.tabbtn.on .ic svg { stroke: var(--white); }
.bubble { position: relative; flex: 1; min-width: 0; padding: 10px 16px; border-radius: 18px; background: transparent; transition: background .35s, box-shadow .35s; }
.bubble::before { content: ''; position: absolute; left: -6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px; background: var(--white); transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.bubble b { display: flex; align-items: center; gap: 8px; font-size: clamp(14px, 2vh, 17px); font-weight: 600; color: var(--asphalt); transition: color .3s; }
.bubble b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .3s; }
.desc { display: block; font-size: clamp(12px, 1.7vh, 14px); line-height: 1.4; color: var(--charcoal); font-weight: 400; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .3s, margin .3s; }
.tabbtn.on .bubble { background: var(--white); box-shadow: 0 14px 34px rgba(28,29,34,.12); }
.tabbtn.on .bubble::before { transform: rotate(45deg) scale(1); }
.tabbtn.on .bubble b { color: var(--black); }
.tabbtn.on .bubble b::before { opacity: 1; }
.tabbtn.on .desc { max-height: 3em; opacity: 1; margin-top: 3px; }
.desc.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--lilac); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* centre: the phone */
.phone-area { position: relative; height: 100%; min-height: 0; }
.rig { position: absolute; left: 50%; top: 50%; width: 320px; height: 680px; margin: -340px 0 0 -160px; transform-origin: center; }
.phone { position: absolute; left: 10px; top: 10px; width: 300px; height: 660px; border-radius: 48px; padding: 11px; background: var(--black); box-shadow: 0 40px 80px rgba(28,29,34,.28); }
.phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 14px; background: var(--black); z-index: 5; }
.screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bg); }
.scr { position: absolute; inset: 0; padding: 54px 14px 80px; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .45s, transform .45s cubic-bezier(.2,.9,.3,1); pointer-events: none; }
.scr.on { opacity: 1; transform: none; }
.s-title { font-size: 24px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.s-sub { font-size: 11px; color: var(--asphalt); margin-top: 2px; }
.ava { width: 34px; height: 34px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; font-size: 12px; }
.card { background: var(--white); border-radius: var(--r); padding: 12px; margin-top: 10px; }
.lbl { font-size: 10px; color: var(--asphalt); }
.big { font-size: 22px; font-weight: 600; margin-top: 3px; }
.row { display: flex; justify-content: space-between; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.two .card { margin: 0; padding: 10px 12px; }
.two b { display: block; font-size: 18px; font-weight: 600; }
.week { display: flex; justify-content: space-between; align-items: end; height: 50px; margin-top: 8px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; color: var(--asphalt); }
.bar { width: 18px; border-radius: 6px; background: var(--btn); box-shadow: var(--shadow); }
.day.today { color: var(--black); font-weight: 600; }
.day.today .bar { background: var(--black); }
.h { font-size: 12px; font-weight: 600; margin: 12px 0 6px; }
.item { display: flex; align-items: center; gap: 9px; background: var(--white); border-radius: var(--r); padding: 9px 11px; margin-bottom: 6px; font-size: 12px; }
.item .t { font-size: 11px; color: var(--asphalt); width: 32px; }
.item .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: 9px; padding: 3px 7px; border-radius: 6px; background: var(--rose); color: var(--raspberry); font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ethereal); color: var(--periwinkle); }
.seg { display: flex; background: var(--white); border-radius: 10px; padding: 3px; margin-top: 10px; box-shadow: var(--shadow); }
.seg span { flex: 1; text-align: center; font-size: 11px; padding: 7px 0; border-radius: 8px; color: var(--asphalt); }
.seg span.on { background: var(--btn); color: var(--black); box-shadow: var(--shadow); }
.dates { display: flex; justify-content: space-between; margin-top: 10px; }
.dates div { width: 32px; text-align: center; font-size: 9px; color: var(--asphalt); }
.dates b { display: grid; place-items: center; width: 30px; height: 30px; margin: 3px auto 0; border-radius: 50%; font-size: 12px; color: var(--black); }
.dates .sel b { background: var(--black); color: var(--white); }
.grid { position: relative; margin-top: 10px; background: var(--white); border-radius: var(--r); padding: 4px 8px; }
.hr { height: 38px; border-top: 1px solid var(--ethereal); font-size: 9px; color: var(--slate); padding-top: 2px; }
.hr:first-child { border-top: 0; }
.ev { position: absolute; left: 44px; right: 8px; border-radius: 8px; padding: 5px 8px; font-size: 10px; border-left: 3px solid; }
.ev small { display: block; font-size: 9px; color: var(--asphalt); }
.ev-1 { top: 42px; height: 36px; border-color: var(--azure); background: color-mix(in srgb, var(--azure) 16%, white); }
.ev-2 { top: 175px; height: 56px; border-color: var(--honey); background: color-mix(in srgb, var(--honey) 18%, white); }
.ev-3 { top: 308px; height: 32px; border-color: var(--purple); background: color-mix(in srgb, var(--purple) 18%, white); }
.search { margin-top: 8px; background: var(--white); border-radius: 10px; padding: 9px 12px; font-size: 11px; color: var(--slate); }
.st .ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--black); flex: none; }
.st .sub { font-size: 9px; color: var(--asphalt); }
.amt { font-size: 11px; font-weight: 600; white-space: nowrap; }
.pos { color: var(--periwinkle); }
.neg { color: var(--raspberry); }
.chart { display: flex; align-items: end; gap: 7px; height: 110px; margin-top: 12px; }
.chart div { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--ivory); }
.chart div.hi { background: linear-gradient(180deg, var(--purple), var(--periwinkle)); }
.months { display: flex; gap: 7px; margin-top: 5px; }
.months span { flex: 1; text-align: center; font-size: 8px; color: var(--asphalt); }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; justify-content: space-around; align-items: center; background: var(--white); border-radius: 22px 22px 0 0; z-index: 3; }
.pbar div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pbar svg { width: 21px; height: 21px; stroke: var(--slate); fill: none; stroke-width: 1.8; transition: stroke .3s; }
.pbar i { width: 4px; height: 4px; border-radius: 50%; background: transparent; transition: background .3s; }
.pbar .on svg { stroke: var(--black); }
.pbar .on i { background: var(--lilac); }

/* right: live notification stickers */
.notes { justify-self: start; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); width: min(100%, 290px); }
.stk { background: var(--white); border-radius: 18px; padding: clamp(10px, 1.5vh, 14px) 16px; box-shadow: 0 14px 40px rgba(28,29,34,.12); display: flex; gap: 12px; align-items: center; animation: bob 5s ease-in-out infinite; }
.stk .ico { width: clamp(32px, 4.8vh, 40px); aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 17px; flex: none; }
.stk b { display: block; font-size: clamp(13px, 1.8vh, 15px); font-weight: 600; }
.stk small { display: block; font-size: clamp(11px, 1.5vh, 12px); color: var(--asphalt); font-weight: 400; margin-top: 2px; }
.stk:nth-child(1) { rotate: -3deg; }
.stk:nth-child(2) { rotate: 2deg; margin-left: 34px; animation-delay: -1.7s; }
.stk:nth-child(3) { rotate: -1deg; margin-left: 10px; animation-delay: -3.2s; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* colour chips used inside the phone and stickers */
.c-azure { background: var(--azure); } .c-honey { background: var(--honey); } .c-purple { background: var(--purple); }
.c-raspberry { background: var(--raspberry); } .c-aqua { background: var(--aqua); } .c-lemon { background: var(--lemon); }
.c-violet { background: var(--violet); } .c-pink { background: #FFC4DD; } .c-ivory { background: var(--ivory); }
.c-ethereal { background: var(--ethereal); } .c-rose { background: var(--rose); } .c-chiffon { background: var(--chiffon); }

@media (max-height: 760px) and (min-width: 901px) { body.landing .eyebrow, body.landing .lead { display: none; } }

/* ---------- landing, narrow: stacked, still one screen ---------- */
@media (max-width: 900px) {
  h1 { font-size: clamp(26px, 7.8vw, 40px); }
  h1 .m { display: inline; }
  body.landing .eyebrow, body.landing .lead, .notes { display: none; }
  .compose { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .tabs { justify-self: stretch; width: 100%; flex-direction: row; justify-content: space-between; gap: 4px; }
  .tabbtn { flex-direction: column; gap: 6px; flex: 1; }
  .orb { width: 56px; }
  .bubble { padding: 0; text-align: center; background: none !important; box-shadow: none !important; }
  .bubble::before, .bubble b::before, .desc { display: none; }
  .bubble b { justify-content: center; font-size: 11px; }
  .phone-area { overflow: hidden; margin-inline: -16px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .rig { top: 6px; margin-top: 0; transform-origin: top center; }
  .headline .stores { width: 100%; gap: 8px; flex-wrap: nowrap; }
  .headline .store { flex: 1 1 0; min-width: 0; height: 54px; padding-inline: 6px 10px; gap: 8px; }
  .headline .store .bic { width: 40px; }
  .headline .store small { font-size: 9px; white-space: nowrap; }
  .headline .store b { font-size: 14px; }
  .foot { justify-content: center; font-size: 11px; padding-block: 6px; }
  .foot .copyright { display: none; }
  .foot nav { justify-content: center; gap: 4px 14px; }
}

/* =====================================================================
   Documents — /privacy and /terms
   ===================================================================== */
.doc-main { padding-block: clamp(12px, 3vh, 32px) clamp(24px, 5vh, 56px); }
.doc { max-width: 820px; margin: 0 auto; background: var(--white); border-radius: 28px; box-shadow: 0 24px 60px rgba(28,29,34,.08); padding: clamp(24px, 5vw, 64px); }
.doc-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ethereal); font-size: 13px; color: var(--charcoal); }
.doc-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); }
.doc h1 { font-size: clamp(30px, 5vw, 48px); margin-top: 16px; }
.doc .updated { margin-top: 10px; font-size: 14px; color: var(--asphalt); font-weight: 400; }
.doc .summary { margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: var(--btn); font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--charcoal); }
.doc .summary b { color: var(--black); font-weight: 600; }
.doc .toc { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.doc .toc li { padding-left: 0; margin-top: 0; }
.doc .toc li::before { display: none; }
.doc .toc a { display: inline-block; padding: 7px 12px; border-radius: 10px; background: var(--ethereal); font-size: 13px; color: var(--charcoal); transition: background .2s; }
.doc .toc a:hover { background: var(--ivory); }
.doc section { margin-top: 40px; scroll-margin-top: 24px; }
.doc h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(19px, 2.4vw, 23px); font-weight: 600; line-height: 1.3; }
.doc h2 span.n { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--black); color: var(--white); display: inline-grid; place-items: center; font-size: 14px; transform: translateY(-2px); }
.doc h3 { font-size: 16px; font-weight: 600; margin-top: 20px; }
.doc p, .doc li { font-size: 15px; line-height: 1.7; color: var(--charcoal); font-weight: 400; }
.doc p { margin-top: 12px; }
.doc ul { margin-top: 10px; padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: 20px; margin-top: 6px; }
.doc li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.doc strong { font-weight: 600; color: var(--black); }
.doc a.inline { color: var(--lilac); border-bottom: 1px solid color-mix(in srgb, var(--lilac) 35%, transparent); }
.doc .contact { margin-top: 16px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--black); color: var(--white); font-size: 15px; }
.doc .contact span { width: 32px; height: 32px; border-radius: 10px; background: var(--btn); color: var(--black); display: grid; place-items: center; }

/* =====================================================================
   /app — store picker
   ===================================================================== */
.app-main { display: grid; place-items: center; padding-block: 24px; }
.picker { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 560px; }
.picker .app-icon { width: 96px; height: 96px; border-radius: 26px; background: var(--black); display: grid; place-items: center; box-shadow: 0 24px 50px rgba(28,29,34,.25); }
.picker .app-icon svg { width: 60px; }
.picker h1 { font-size: clamp(30px, 6vw, 48px); }
.picker p { color: var(--asphalt); font-size: 16px; line-height: 1.6; font-weight: 400; }
.picker .soon { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.8); font-size: 14px; color: var(--charcoal); }
.picker .back { font-size: 14px; color: var(--asphalt); border-bottom: 1px solid var(--ivory); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}