/* MehrbanYar design system: calm sky blue, formal type, easy to read, with gentle depth. */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/static/fonts/plus-jakarta-sans/PlusJakartaSans.ttf') format('truetype'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/vazirmatn/vazirmatn-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/vazirmatn/vazirmatn-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #f4f8fb;
  --surface: #ffffff;
  --surface-2: #eaf2f8;
  --ink: #142330;
  --muted: #4d5e6b;
  --faint: #7c8c98;
  --line: #dde7ef;
  --line-strong: #c4d4e0;
  --navy: #0e2638;
  --primary: #1f6fa8;
  --primary-strong: #175a8a;
  --primary-soft: #e2f0fa;
  --accent: #8dd3f7;
  --coral-soft: #fde9e1;
  --honey: #b98019;
  --honey-soft: #faf0d8;
  --sage: #3f7d5c;
  --sage-soft: #e1efe7;
  --plum: #6e4f8a;
  --plum-soft: #eee8f5;
  --sky: #2b8fc9;
  --sky-soft: #ddf0fb;
  --cream: #f2f9fe;
  --on-dark: rgba(240, 248, 253, .8);
  --dark-line: rgba(240, 248, 253, .14);
  --shadow-sm: 0 2px 6px rgba(15, 38, 56, .04), 0 10px 24px rgba(15, 38, 56, .05);
  --shadow: 0 24px 60px -18px rgba(15, 38, 56, .28);
  --shadow-3d: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -30px rgba(15, 38, 56, .42), 0 18px 36px -18px rgba(15, 38, 56, .22);
  --radius: 22px;
  --radius-lg: 32px;
  --shell: 1200px;
  --header-h: 4.75rem;
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1620;
  --surface: #12202b;
  --surface-2: #182a37;
  --ink: #e8f1f7;
  --muted: #a9bccb;
  --faint: #7e93a3;
  --line: #213444;
  --line-strong: #2e4558;
  --primary: #6dbdeb;
  --primary-strong: #8ccdf2;
  --primary-soft: #16334a;
  --coral-soft: #173a55;
  --honey: #efb64d;
  --honey-soft: #352b16;
  --sage: #8cc7a6;
  --sage-soft: #1a3226;
  --plum: #c3a9e0;
  --plum-soft: #2a2238;
  --sky: #8fcdf0;
  --sky-soft: #15303f;
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, .3);
  --shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
  --shadow-3d: 0 40px 80px -30px rgba(0, 0, 0, .75);
}

/* Text size control scales every rem-based measure. */
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
html.text-lg { font-size: 112.5%; }
html.text-xl { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.125rem/1.7 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { font-family: 'Vazirmatn', Tahoma, sans-serif; }
body.nav-open { overflow: hidden; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2 { font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 1rem; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; letter-spacing: -.015em; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; }
p { color: var(--muted); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: -80px; inset-inline-start: 16px; padding: 12px 16px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; }
.skip-link:focus { top: 12px; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
[hidden] { display: none !important; }

.ui-icon { display: block; flex: none; width: 1.2em; height: 1.2em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-check { --icon: url('/static/svg/icon-check.svg'); } .icon-heart { --icon: url('/static/svg/icon-heart.svg'); } .icon-stethoscope { --icon: url('/static/svg/icon-stethoscope.svg'); }
.icon-home { --icon: url('/static/svg/icon-home.svg'); } .icon-clipboard { --icon: url('/static/svg/icon-clipboard.svg'); } .icon-document { --icon: url('/static/svg/icon-document.svg'); }
.icon-hand { --icon: url('/static/svg/icon-hand.svg'); } .icon-tool { --icon: url('/static/svg/icon-tool.svg'); } .icon-bag { --icon: url('/static/svg/icon-bag.svg'); }
.icon-pill { --icon: url('/static/svg/icon-pill.svg'); } .icon-book { --icon: url('/static/svg/icon-book.svg'); } .icon-play { --icon: url('/static/svg/icon-play.svg'); }
.icon-headphones { --icon: url('/static/svg/icon-headphones.svg'); } .icon-calendar { --icon: url('/static/svg/icon-calendar.svg'); } .icon-users { --icon: url('/static/svg/icon-users.svg'); }
.icon-map { --icon: url('/static/svg/icon-map.svg'); } .icon-chat { --icon: url('/static/svg/icon-chat.svg'); } .icon-phone { --icon: url('/static/svg/icon-phone.svg'); }
.icon-shield { --icon: url('/static/svg/icon-shield.svg'); } .icon-star { --icon: url('/static/svg/icon-star.svg'); } .icon-layers { --icon: url('/static/svg/icon-layers.svg'); }
.icon-spark { --icon: url('/static/svg/icon-spark.svg'); } .icon-basket { --icon: url('/static/svg/icon-basket.svg'); } .icon-globe { --icon: url('/static/svg/icon-globe.svg'); }
.icon-building { --icon: url('/static/svg/icon-building.svg'); } .icon-gift { --icon: url('/static/svg/icon-gift.svg'); } .icon-clock { --icon: url('/static/svg/icon-clock.svg'); }
.icon-bell { --icon: url('/static/svg/icon-bell.svg'); } .icon-walker { --icon: url('/static/svg/icon-walker.svg'); } .icon-monitor { --icon: url('/static/svg/icon-monitor.svg'); }
.icon-sun { --icon: url('/static/svg/icon-sun.svg'); } .icon-leaf { --icon: url('/static/svg/icon-leaf.svg'); } .icon-lock { --icon: url('/static/svg/icon-lock.svg'); }
.icon-plus { --icon: url('/static/svg/icon-plus.svg'); } .icon-arrow { --icon: url('/static/svg/icon-arrow.svg'); } .icon-text { --icon: url('/static/svg/icon-text.svg'); }
.icon-send { --icon: url('/static/svg/icon-send.svg'); } .icon-close { --icon: url('/static/svg/icon-close.svg'); } .icon-eye { --icon: url('/static/svg/icon-eye.svg'); }
.icon-music { --icon: url('/static/svg/icon-music.svg'); } .icon-bed { --icon: url('/static/svg/icon-bed.svg'); }
html[dir="rtl"] .icon-arrow, html[dir="rtl"] .icon-send { transform: scaleX(-1); }
.chev { display: inline-block; width: .5em; height: .5em; margin-inline-start: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .25s; }

/* Tones: set on a card or directly on a cube. */
.tone-blue { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.tone-sage { --tone: var(--sage); --tone-soft: var(--sage-soft); }
.tone-honey { --tone: var(--honey); --tone-soft: var(--honey-soft); }
.tone-plum { --tone: var(--plum); --tone-soft: var(--plum-soft); }
.tone-coral { --tone: #d0643f; --tone-soft: var(--coral-soft); }
html[data-theme="dark"] .tone-coral { --tone: #f0a184; }
.tone-sky { --tone: var(--sky); --tone-soft: var(--sky-soft); }

/* 3D cube: an extruded, softly lit icon block. */
.cube { position: relative; display: grid; flex: none; width: 3.6rem; height: 3.6rem; place-items: center; border-radius: 18px; color: var(--tone, var(--primary)); background: linear-gradient(150deg, #fff 0%, var(--tone-soft, var(--primary-soft)) 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 color-mix(in srgb, var(--tone, var(--primary)) 14%, transparent), 0 8px 0 -3px color-mix(in srgb, var(--tone, var(--primary)) 22%, var(--tone-soft, var(--primary-soft))), 0 20px 30px -12px color-mix(in srgb, var(--tone, var(--primary)) 55%, transparent); transform: perspective(500px) rotateX(12deg); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
html[data-theme="dark"] .cube { background: linear-gradient(150deg, color-mix(in srgb, var(--tone, var(--primary)) 35%, #182a37), var(--tone-soft, var(--primary-soft))); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 0 -3px color-mix(in srgb, var(--tone, var(--primary)) 30%, #000), 0 20px 30px -12px rgba(0,0,0,.6); }
.cube .ui-icon { width: 1.65rem; height: 1.65rem; }
.cube-sm { width: 2.6rem; height: 2.6rem; border-radius: 13px; }
.cube-sm .ui-icon { width: 1.25rem; height: 1.25rem; }

/* ── Buttons, labels ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.5rem; border: 1.5px solid transparent; border-radius: 999px; font-size: 1.02rem; font-weight: 650; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn .ui-icon { width: 1.1em; height: 1.1em; }
.btn-sm { min-height: 2.75rem; padding: 0 1.2rem; font-size: .98rem; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 24px -10px rgba(31, 111, 168, .6); }
.btn-primary:hover { background: var(--primary-strong); }
html[data-theme="dark"] .btn-primary { color: var(--navy); }
.btn-outline { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-glass { border-color: rgba(240,248,253,.45); background: rgba(240,248,253,.1); color: #fff; backdrop-filter: blur(10px); }
.btn-glass:hover { border-color: #fff; background: rgba(240,248,253,.18); }
.btn-cream { background: var(--cream); color: var(--navy); }
.btn-block { width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--primary); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .95rem; }
.lead { max-width: 36rem; font-size: clamp(1.12rem, 1.5vw, 1.28rem); line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.text-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--primary); font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link .ui-icon { width: 1.05em; height: 1.05em; }
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .82rem; font-weight: 650; white-space: nowrap; }
.tag-good { background: var(--sage-soft); color: var(--sage); }
.tag-warm { background: var(--primary-soft); color: var(--primary); }
.tag-honey { background: var(--honey-soft); color: var(--honey); }
.note { max-width: 50rem; margin-top: 1.5rem; color: var(--faint); font-size: .95rem; }
.checks { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.checks li { position: relative; padding-inline-start: 1.9rem; color: var(--muted); }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .32em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--sage-soft) url('/static/svg/icon-check.svg') center / 70% no-repeat; }
html[data-theme="dark"] .checks li::before { background-color: #d3eadc; }

/* ── Header and category menus ───────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px); }
.topbar-inner { position: relative; height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand img { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 6px 10px rgba(31,111,168,.25)); }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 1.45rem; font-weight: 750; letter-spacing: -.03em; }
.brand strong em { color: var(--primary); font-style: normal; }
.brand small { margin-top: .3rem; color: var(--faint); font-size: .66rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
html[dir="rtl"] .brand strong { letter-spacing: 0; }
html[dir="rtl"] .brand small { letter-spacing: 0; text-transform: none; font-size: .78rem; }
.nav { margin-inline-start: auto; }
.menu { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.menu-trigger, .menu-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.menu-trigger:hover, .menu-link:hover, .menu-item.open > .menu-trigger { color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.menu-trigger.active, .menu-link.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.menu-item.open > .menu-trigger .chev { transform: translateY(.1em) rotate(-135deg); }
.mega { position: absolute; z-index: 5; top: calc(100% - .25rem); left: 50%; display: grid; grid-template-columns: 1fr 1fr 17rem; gap: 1.5rem; width: min(58rem, calc(100vw - 2rem)); padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow-3d); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateX(-50%) perspective(1200px) rotateX(-14deg) translateY(-10px); transform-origin: 50% 0; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
.mega-narrow { grid-template-columns: 1fr 15rem; width: min(38rem, calc(100vw - 2rem)); }
.mega-single { grid-template-columns: 1fr; width: min(22rem, calc(100vw - 2rem)); }
.menu-item.open > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) perspective(1200px) rotateX(0) translateY(0); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (min-width: 1101px) {
  .menu-item:hover > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) perspective(1200px) rotateX(0) translateY(0); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
  .menu-item:hover > .menu-trigger .chev { transform: translateY(.1em) rotate(-135deg); }
  .menu-item:hover > .menu-trigger { color: var(--ink); }
}
.mega-col { display: grid; align-content: start; gap: .1rem; }
.mega-col a { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 12px; color: var(--ink); font-size: 1rem; font-weight: 550; text-decoration: none; transition: background .2s, transform .2s; }
.mega-col a .ui-icon { color: var(--primary); width: 1.15rem; height: 1.15rem; }
.mega-col a:hover { background: var(--surface-2); transform: translateX(3px); }
html[dir="rtl"] .mega-col a:hover { transform: translateX(-3px); }
.mega-col a.mega-head { margin-bottom: .35rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--faint); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html[dir="rtl"] .mega-col a.mega-head { letter-spacing: 0; font-size: .9rem; }
.mega-col a.mega-head:hover { background: none; color: var(--primary); transform: none; }
.mega-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem; border-radius: 20px; background: linear-gradient(160deg, var(--primary-soft), var(--surface-2)); color: var(--ink); text-decoration: none; overflow: hidden; }
.mega-card strong { font-size: 1.08rem; }
.mega-card > span:not(.cube) { color: var(--muted); font-size: .95rem; }
.mega-card b { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--primary); font-weight: 650; }
.photo-card-mini { position: relative; justify-content: flex-end; min-height: 13rem; padding: 0; color: #fff; }
.photo-card-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,38,56,.85), transparent 60%); }
.photo-card-mini strong { position: relative; z-index: 1; padding: 1.1rem; }
.top-actions { display: flex; align-items: center; gap: .6rem; }
.icon-btn { position: relative; display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; }
.icon-btn:hover { border-color: var(--ink); }
.text-btn span { font-weight: 750; font-size: 1.1rem; letter-spacing: -.04em; }
.text-btn small { font-size: .72em; }
html.text-lg .text-btn, html.text-xl .text-btn { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.basket-link b { position: absolute; top: -4px; inset-inline-end: -4px; display: grid; min-width: 1.3rem; height: 1.3rem; place-items: center; padding: 0 .3rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: .72rem; }
.link-quiet { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .4rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.link-quiet .ui-icon { color: var(--primary); }
.nav-toggle { display: none; width: 2.9rem; height: 2.9rem; padding: .8rem; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: var(--ink); }

/* ── Home: full-screen sections that snap into place ────────────── */
@media (min-width: 900px) and (min-height: 620px) {
  html.snap-page:not(.text-xl) { scroll-snap-type: y mandatory; scroll-padding-top: var(--header-h); }
  html.snap-page .snap { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
}
.snap { position: relative; display: grid; align-items: center; padding: clamp(3rem, 6vh, 5rem) 0; scroll-snap-align: start; overflow: hidden; isolation: isolate; }
html.snap-page .footer { scroll-snap-align: end; }
.snap-light { background: var(--surface); }
.snap-warm { background: var(--bg); }
.snap-light::before, .snap-warm::before { content: ""; position: absolute; z-index: -1; width: 46rem; height: 46rem; inset-inline-end: -16rem; top: -18rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.snap-warm::before { inset-inline-end: auto; inset-inline-start: -18rem; top: auto; bottom: -22rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--sage) 16%, transparent), transparent 70%); }
.section-head { max-width: 46rem; margin-bottom: 2.8rem; }
.section-head > p:not(.eyebrow) { font-size: 1.15rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }

/* Entrance in depth: each section rises out of the page as it arrives. */
.js .rise { opacity: 0; transform: perspective(1200px) translate3d(0, 34px, -60px) rotateX(10deg); transition: opacity .7s ease, transform .9s cubic-bezier(.16,.84,.24,1); }
.js .is-active .rise, .js .rise.is-visible { opacity: 1; transform: none; }
.js .rise.d1 { transition-delay: .08s; } .js .rise.d2 { transition-delay: .18s; } .js .rise.d3 { transition-delay: .28s; }

/* Hero */
.hero { min-height: calc(100vh - var(--header-h)); padding: 0; color: #fff; background: var(--navy); }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transform: scale(1.06) translate3d(0, var(--parallax, 0px), 0); }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,38,56,.9) 0%, rgba(14,38,56,.66) 40%, rgba(14,38,56,.12) 75%), linear-gradient(0deg, rgba(14,38,56,.55), transparent 40%); }
html[dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(14,38,56,.9) 0%, rgba(14,38,56,.66) 40%, rgba(14,38,56,.12) 75%), linear-gradient(0deg, rgba(14,38,56,.55), transparent 40%); }
html[dir="rtl"] .hero-bg { transform: scale(1.06) scaleX(-1) translate3d(0, var(--parallax, 0px), 0); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding-block: 4rem 6rem; }
.hero h1 { margin-bottom: 1.3rem; color: #fff; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero .eyebrow { color: #bfe6fb; }
.hero .lead { color: rgba(240,248,253,.84); }
.deck { position: relative; height: 24rem; perspective: 1400px; transform-style: preserve-3d; }
.deck-card { position: absolute; width: 19rem; transform-style: preserve-3d; transform: rotateX(var(--tx, 8deg)) rotateY(var(--ty, -16deg)) translateZ(var(--z, 0)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
html[dir="rtl"] .deck-card { transform: rotateX(var(--tx, 8deg)) rotateY(calc(var(--ty, -16deg) * -1)) translateZ(var(--z, 0)); }
.deck-card .glass { padding: 1.05rem 1.2rem; animation: bob 8s ease-in-out infinite; }
/* The entrance transform flattens the 3D context, so stacking is set explicitly. */
.deck-1 { top: 0; inset-inline-end: 4%; --z: 70px; z-index: 3; }
.deck-2 { top: 38%; inset-inline-start: 4%; --z: 10px; z-index: 1; }
.deck-2 .glass { animation-delay: -3s; }
.deck-3 { bottom: 0; inset-inline-end: 0; --z: 120px; z-index: 2; }
.deck-3 .glass { animation-delay: -5s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.glass { border: 1px solid rgba(255,255,255,.6); border-radius: 22px; background: rgba(250,253,255,.84); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(8,20,30,.5), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
html[data-theme="dark"] .glass { background: rgba(18,32,43,.86); border-color: rgba(255,255,255,.12); }
.fc-head { display: flex; align-items: center; gap: .8rem; }
.fc-head small { display: block; color: var(--faint); font-size: .78rem; font-weight: 600; }
.fc-head strong { display: block; font-size: 1rem; line-height: 1.3; }
.fc-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.avatars { display: flex; margin-top: .6rem; }
.avatars i { width: 1.8rem; height: 1.8rem; margin-inline-end: -.5rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); }
.avatars i:nth-child(2) { background: var(--sage); } .avatars i:nth-child(3) { background: var(--plum); } .avatars i:nth-child(4) { background: var(--sky); }
.avatars span { margin-inline-start: 1rem; color: var(--muted); font-size: .9rem; font-weight: 600; align-self: center; }
.scroll-cue { position: absolute; bottom: 1.4rem; left: 50%; display: grid; justify-items: center; gap: .2rem; padding: .4rem 1rem; border: 0; background: none; color: rgba(240,248,253,.8); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transform: translateX(-50%); }
html[dir="rtl"] .scroll-cue { letter-spacing: 0; }
.scroll-cue .chev { width: .7rem; height: .7rem; margin: 0; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-.1em) rotate(45deg); opacity: .5; } 50% { transform: translateY(.35em) rotate(45deg); opacity: 1; } }

/* Six ways we help */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; perspective: 1400px; }
.tile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center; padding: 1.5rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); text-decoration: none; transition: box-shadow .35s, border-color .35s, transform .3s; }
.tile .cube { grid-row: 1 / 3; }
.tile h3 { margin: 0; font-size: 1.15rem; }
.tile p { margin: .15rem 0 0; font-size: .98rem; }
.tile .go { position: absolute; top: 1.3rem; inset-inline-end: 1.3rem; width: 1.1rem; height: 1.1rem; color: var(--faint); opacity: 0; transition: opacity .3s; }
.tile:hover { border-color: transparent; box-shadow: var(--shadow-3d); }
.tile:hover .cube { transform: perspective(500px) rotateX(0) translateY(-4px) scale(1.05); }
.tile:hover .go { opacity: 1; color: var(--primary); }

/* Photos in depth */
.photo-3d { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.photo-3d img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: var(--shadow-3d); }
.photo-3d.tall { aspect-ratio: 4 / 5; max-height: 70vh; justify-self: center; width: min(100%, 30rem); }
.photo-3d::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, var(--sky-soft), var(--primary-soft)); }
html[dir="rtl"] .photo-3d::before, .photo-3d.flip::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; }
html[dir="rtl"] .photo-3d.flip::before { inset: 1.4rem -1.4rem -1.4rem 1.4rem; }
[data-tilt] { transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.float-badge { position: absolute; bottom: -1.4rem; inset-inline-end: -1.2rem; display: flex; align-items: center; gap: .8rem; max-width: 19rem; padding: .9rem 1.1rem; }
.float-badge strong { display: block; font-size: 1rem; }
.float-badge span:not(.cube) { color: var(--muted); font-size: .9rem; }

/* Timeline */
.timeline { display: grid; gap: 0; margin: 1.6rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.timeline li { position: relative; display: grid; gap: .1rem; padding: 0 0 1.5rem; padding-inline-start: 3.6rem; counter-increment: step; }
.timeline li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: -.15rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--surface); color: var(--primary); font-weight: 750; box-shadow: 0 0 0 1px var(--line-strong), 0 8px 18px -8px rgba(31,111,168,.5); }
html[lang="fa"] .timeline li::before, html[lang="fa"] .process li::before { content: counter(step, persian); }
.timeline li::after { content: ""; position: absolute; inset-inline-start: 1.22rem; top: 2.6rem; bottom: .2rem; width: 1px; background: var(--line-strong); }
.timeline li:last-child::after { display: none; }
.timeline strong { font-size: 1.15rem; }
.timeline span { color: var(--muted); }

/* Care plans in a coverflow */
.coverflow, .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; perspective: 1600px; }
.plan { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 2rem 1.8rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, opacity .7s; }
.coverflow .plan:first-child { transform: rotateY(16deg) translateZ(-50px); transform-origin: 100% 50%; }
.coverflow .plan:last-child { transform: rotateY(-16deg) translateZ(-50px); transform-origin: 0 50%; }
html[dir="rtl"] .coverflow .plan:first-child { transform: rotateY(-16deg) translateZ(-50px); transform-origin: 0 50%; }
html[dir="rtl"] .coverflow .plan:last-child { transform: rotateY(16deg) translateZ(-50px); transform-origin: 100% 50%; }
.coverflow .plan.featured { transform: translateZ(40px); }
.coverflow .plan:hover, html[dir="rtl"] .coverflow .plan:hover { transform: translateZ(60px); box-shadow: var(--shadow-3d); }
.plan.featured { border: 1.5px solid var(--primary); box-shadow: var(--shadow-3d); }
.plan.premium { background: linear-gradient(165deg, #173a55, var(--navy)); border-color: transparent; color: var(--cream); box-shadow: var(--shadow-3d); }
.plan.premium p, .plan.premium .checks li { color: var(--on-dark); }
.plan.premium h3 { color: #fff; }
.plan-badge { position: absolute; top: -.85rem; inset-inline-start: 1.8rem; padding: .22rem .9rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: .82rem; font-weight: 700; }
html[data-theme="dark"] .plan-badge { color: var(--navy); }
.plan-tier { color: var(--primary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.plan.premium .plan-tier { color: var(--accent); }
html[dir="rtl"] .plan-tier { letter-spacing: 0; font-size: .95rem; }
.plan h3 { margin: 0; font-size: 1.6rem; }
.plan > p { margin: 0; }
.price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.price b { font-size: 2.9rem; font-weight: 750; line-height: 1; letter-spacing: -.04em; }
html[dir="rtl"] .price b { font-size: 2.4rem; letter-spacing: 0; }
.price span { color: var(--faint); font-weight: 600; }
.plan.premium .price span { color: rgba(240,248,253,.6); }
.price-note { min-height: 1.5em; margin: -.3rem 0 0 !important; color: var(--sage) !important; font-size: .92rem; font-weight: 650; }
.plan.premium .price-note { color: #a8d8b5 !important; }
.plan .checks { margin: .2rem 0 1rem; }
.plan .btn { margin-top: auto; }
.plan.premium .checks li::before { background-color: #d3eadc; }
.plan-includes { margin: .3rem 0 0; color: var(--ink); font-weight: 650; font-size: 1rem; }
.plan.premium .plan-includes { color: #fff; }
.center-link { margin: 2.2rem 0 0; text-align: center; }
.billing { display: inline-flex; gap: .25rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.billing button { min-height: 2.6rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 650; cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
html[data-theme="dark"] .billing button[aria-pressed="true"] { background: var(--accent); color: var(--navy); }
.billing small { color: var(--sage); font-weight: 700; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.compare th, .compare td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); text-align: start; font-size: 1rem; }
.compare thead th { background: var(--surface-2); font-size: 1.05rem; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare .yes { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sage-soft) url('/static/svg/icon-check.svg') center / 70% no-repeat; vertical-align: middle; }
html[data-theme="dark"] .compare .yes { background-color: #d3eadc; }
.compare .no { color: var(--faint); }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.addon { display: grid; gap: .3rem; padding: 1.4rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.addon strong { font-size: 1.05rem; }
.addon span { color: var(--muted); font-size: .95rem; }
.addon b { color: var(--primary); font-size: 1.1rem; }

/* Chat */
.device { position: relative; transform: perspective(1500px) rotateY(-9deg) rotateX(3deg); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .7s; }
html[dir="rtl"] .device { transform: perspective(1500px) rotateY(9deg) rotateX(3deg); }
.device::before { content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; z-index: -1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary-soft), var(--sky-soft)); }
html[dir="rtl"] .device::before { inset: 1.2rem 1.2rem -1.2rem -1.2rem; }
.device:hover, .device:focus-within, html[dir="rtl"] .device:hover, html[dir="rtl"] .device:focus-within { transform: none; }
.chat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-3d); overflow: hidden; }
.chat-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.chat-top span { display: flex; align-items: center; gap: .6rem; }
.chat-top i { display: inline-flex; align-items: center; gap: .4rem; color: var(--sage); font-size: .85rem; font-style: normal; }
.chat-top i::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px var(--sage-soft); }
.chat-log { display: flex; flex-direction: column; gap: .7rem; min-height: 11rem; max-height: 22rem; padding: 1.2rem; overflow-y: auto; background: var(--bg); }
.msg { max-width: 88%; padding: .8rem 1rem; border-radius: 18px; font-size: 1rem; line-height: 1.55; }
.msg p { margin: 0; color: inherit; }
.msg-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-end-start-radius: 6px; }
.msg-user { align-self: flex-end; background: var(--navy); color: var(--cream); border-end-end-radius: 6px; }
html[data-theme="dark"] .msg-user { background: var(--primary-soft); color: var(--ink); }
.msg-urgent { border: 2px solid var(--primary); background: var(--primary-soft); }
.msg .text-link { display: inline-flex; margin-top: .5rem; }
.msg-typing { color: var(--faint); font-style: italic; }
.chat-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem 1.2rem 0; }
.chat-chips button { min-height: 2.4rem; padding: .3rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .92rem; font-weight: 550; text-align: start; cursor: pointer; }
.chat-chips button:hover { border-color: var(--primary); color: var(--primary); }
.chat-form { display: flex; gap: .6rem; padding: .9rem 1.2rem; }
.chat-form input { flex: 1; min-width: 0; min-height: 3.1rem; padding: 0 1.1rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.chat-form input:focus { border-color: var(--primary); outline: none; }
.chat-form .btn { width: 3.1rem; min-height: 3.1rem; padding: 0; flex: none; }
.chat-note { margin: 0; padding: 0 1.2rem 1rem; color: var(--faint); font-size: .85rem; }

/* Floating helper */
.helper { position: fixed; z-index: 70; inset-inline-end: 1.25rem; bottom: 1.25rem; }
.helper-button { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.5rem; padding: .35rem 1.25rem .35rem .4rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 650; box-shadow: 0 18px 36px -12px rgba(14,38,56,.6); cursor: pointer; transition: transform .25s; }
.helper-button:hover { transform: translateY(-3px); }
html[dir="rtl"] .helper-button { padding: .35rem .4rem .35rem 1.25rem; }
.helper-button img { width: 2.7rem; height: 2.7rem; }
.helper-panel { position: absolute; inset-inline-end: 0; bottom: 0; width: min(25rem, calc(100vw - 2.5rem)); animation: pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: perspective(900px) rotateX(10deg) translateY(16px) scale(.96); } }
.helper-panel .chat-log { max-height: min(20rem, 42vh); }
.helper-close { position: absolute; z-index: 1; top: .7rem; inset-inline-end: .7rem; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
.helper-panel .chat-top i { margin-inline-end: 2.8rem; }
.helper.open .helper-button { display: none; }

/* Section dots */
.snap-dots { position: fixed; z-index: 50; top: 50%; inset-inline-end: 1.4rem; display: grid; gap: .55rem; transform: translateY(-50%); }
.snap-dots button { position: relative; width: .7rem; height: .7rem; padding: 0; border: 1.5px solid var(--faint); border-radius: 999px; background: transparent; cursor: pointer; transition: height .3s, background .3s, border-color .3s; }
.snap-dots button[aria-current="true"] { height: 1.8rem; border-color: var(--primary); background: var(--primary); }
.snap-dots button span { position: absolute; top: 50%; inset-inline-end: 1.6rem; padding: .25rem .65rem; border-radius: 8px; background: var(--navy); color: var(--cream); font-size: .82rem; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .2s; }
.snap-dots button:hover span, .snap-dots button:focus-visible span { opacity: 1; }
.snap-dots.on-dark button { border-color: rgba(240,248,253,.6); }
.snap-dots.on-dark button[aria-current="true"] { border-color: var(--accent); background: var(--accent); }

/* Join */
.join-band { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; perspective: 1400px; }
.join-card { display: flex; flex-direction: column; gap: .8rem; min-height: 17rem; padding: 2.2rem; border-radius: var(--radius-lg); background: linear-gradient(160deg, #173a55, var(--navy)); color: var(--cream); text-decoration: none; box-shadow: var(--shadow-3d); }
.join-card.light { background: linear-gradient(160deg, var(--surface), var(--primary-soft)); color: var(--ink); border: 1px solid var(--line); }
.join-card h3 { margin: .6rem 0 0; font-size: 1.55rem; color: inherit; }
.join-card p { margin: 0; color: var(--on-dark); }
.join-card.light p { color: var(--muted); }
.join-card b { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; color: var(--accent); font-weight: 650; }
.join-card.light b { color: var(--primary); }

/* Photo CTA */
.cta-photo { color: #fff; text-align: center; }
.cta-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/static/img/care-at-home.jpg') 50% 35% / cover no-repeat; transform: scale(1.05); }
.cta-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(14,38,56,.94), rgba(14,38,56,.8) 55%, rgba(31,111,168,.6)); }
.cta-photo h2 { color: #fff; max-width: 40rem; margin-inline: auto; }
.cta-photo p { max-width: 38rem; margin: 0 auto; color: rgba(240,248,253,.85); font-size: 1.2rem; }
.cta-photo .eyebrow { color: #bfe6fb; justify-content: center; }
.cta-photo .actions { justify-content: center; }

/* ── Inner pages ────────────────────────────────────────────────── */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section-alt { background: var(--surface); }
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.page-hero::before { content: ""; position: absolute; z-index: -1; width: 44rem; height: 44rem; inset-inline-end: -12rem; top: -20rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.page-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; }
.page-hero h1 { margin-bottom: 1.2rem; font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.page-hero h1 em { color: var(--primary); font-style: normal; }
.page-photo { aspect-ratio: 5 / 4; }
/* A single object in depth instead of a wall of facts. */
.hero-art { position: relative; display: grid; height: 21rem; place-items: center; perspective: 1000px; }
.hero-art .cube { width: 9rem; height: 9rem; border-radius: 40px; transform: rotateX(18deg) rotateY(-22deg); animation: float 7s ease-in-out infinite; }
html[dir="rtl"] .hero-art .cube { transform: rotateX(18deg) rotateY(22deg); }
.hero-art .cube .ui-icon { width: 3.8rem; height: 3.8rem; }
.hero-art .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--tone-soft, var(--primary-soft)) 60%, color-mix(in srgb, var(--tone, var(--primary)) 35%, var(--tone-soft, var(--primary-soft)))); box-shadow: 0 20px 30px -14px color-mix(in srgb, var(--tone, var(--primary)) 50%, transparent); animation: float 9s ease-in-out infinite; }
.hero-art .orb-1 { width: 4.2rem; height: 4.2rem; top: 14%; inset-inline-start: 18%; animation-delay: -2s; }
.hero-art .orb-2 { width: 2.4rem; height: 2.4rem; bottom: 18%; inset-inline-end: 16%; animation-delay: -5s; }
.hero-art .ring { position: absolute; width: 17rem; height: 17rem; border: 1.5px dashed color-mix(in srgb, var(--tone, var(--primary)) 35%, transparent); border-radius: 50%; transform: rotateX(68deg); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 1rem; }
.hero-points li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-points .ui-icon { color: var(--sage); width: 1.1rem; height: 1.1rem; }

/* Category tabs */
.tabs { position: sticky; top: var(--header-h); z-index: 20; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.tabs .shell { display: flex; gap: .4rem; padding-block: .7rem; overflow-x: auto; scrollbar-width: none; }
.tabs a, .filters button { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.05rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.tabs a:hover, .filters button:hover { color: var(--ink); background: var(--surface); }
.tabs a[aria-current="true"], .filters button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), 0 8px 16px -10px rgba(15,38,56,.35); }
.tabs .ui-icon { color: var(--primary); width: 1.1rem; height: 1.1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.tab-panel { scroll-margin-top: calc(var(--header-h) + 5rem); }
.tab-panel + .tab-panel { margin-top: 4.5rem; }
.js .tabbed .tab-panel:not(.current) { display: none; }
.js .tabbed .tab-panel + .tab-panel { margin-top: 0; }
.js .tabbed .tab-panel.current { animation: stepin .45s cubic-bezier(.2,.8,.2,1); }
.panel-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; }
.panel-head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.panel-head p { margin: .2rem 0 0; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; margin: 0; padding: 0; list-style: none; }
.svc { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.svc h3 { margin: 0; font-size: 1.12rem; }
.svc p { grid-column: 1; margin: 0; font-size: 1rem; }
.svc .price-tag { grid-column: 2; grid-row: 1; justify-self: end; font-weight: 700; white-space: nowrap; }
.svc .price-tag small { color: var(--faint); font-weight: 500; }
.svc a { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; color: var(--primary); font-weight: 650; text-decoration: none; }
.svc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.trust-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-lg); background: linear-gradient(160deg, #173a55, var(--navy)); color: var(--cream); box-shadow: var(--shadow-3d); }
.trust-panel h2 { color: #fff; }
.trust-panel p { color: var(--on-dark); }
.trust-panel .eyebrow { color: var(--accent); }
.trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.trust-list li { display: flex; gap: .8rem; color: var(--on-dark); font-size: 1rem; }
.trust-list .ui-icon { color: var(--accent); margin-top: .2rem; }
.trust-list strong { display: block; color: #fff; }

/* Shop */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
.product { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: box-shadow .35s, border-color .35s; }
.product:hover { border-color: transparent; box-shadow: var(--shadow-3d); }
.product-art { display: grid; aspect-ratio: 16 / 10; place-items: center; margin-bottom: .4rem; border-radius: 16px; background: radial-gradient(circle at 50% 120%, var(--tone-soft), var(--surface-2) 70%); }
.product-art .cube { width: 4.4rem; height: 4.4rem; border-radius: 22px; }
.product-art .cube .ui-icon { width: 2rem; height: 2rem; }
.product:hover .product-art .cube { transform: perspective(500px) rotateX(0) translateY(-6px) rotate(-4deg); }
.product h3 { margin: 0; font-size: 1.05rem; }
.product p { margin: 0; font-size: .95rem; }
.product-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.product-foot b { font-size: 1.2rem; }
.add-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.6rem; padding: 0 1rem; border: 1.5px solid var(--primary); border-radius: 999px; background: transparent; color: var(--primary); font-weight: 650; cursor: pointer; }
.add-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
html[data-theme="dark"] .add-btn[aria-pressed="true"] { color: var(--navy); }
.add-btn .ui-icon { width: 1rem; height: 1rem; }
.shop-layout { display: grid; grid-template-columns: 1fr 19rem; gap: 2rem; align-items: start; }
.basket { position: sticky; top: calc(var(--header-h) + 5.5rem); display: grid; gap: .8rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 6rem); }
.basket h2 { margin: 0; font-size: 1.4rem; }
.basket ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.basket li { display: flex; justify-content: space-between; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: .98rem; }
.basket-total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 750; }
.basket-empty { margin: 0; color: var(--faint); }
.hint { color: var(--faint); font-size: .9rem; }

/* Library */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
.media { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: box-shadow .35s, border-color .35s; }
.media:hover { border-color: transparent; box-shadow: var(--shadow-3d); }
.cover { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 6px 12px 12px 6px; background: linear-gradient(160deg, var(--tone-soft), color-mix(in srgb, var(--tone) 30%, var(--tone-soft))); color: var(--tone); box-shadow: -4px 0 0 color-mix(in srgb, var(--tone) 40%, var(--tone-soft)) inset, 0 14px 20px -10px color-mix(in srgb, var(--tone) 60%, transparent); transform: perspective(500px) rotateY(-14deg); transition: transform .4s; }
html[dir="rtl"] .cover { transform: perspective(500px) rotateY(14deg); border-radius: 12px 6px 6px 12px; }
.media:hover .cover { transform: perspective(500px) rotateY(0); }
.cover .ui-icon { width: 2rem; height: 2rem; }
.media h3 { margin: .35rem 0 .25rem; font-size: 1.08rem; }
.media p { margin: 0; font-size: .95rem; }
.media-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .7rem; }
.media-foot b { font-size: 1.1rem; }
.media-foot b.free { color: var(--sage); }

/* Community */
.event-list { display: grid; gap: .7rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.event { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.1rem; align-items: center; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.event time { display: grid; place-items: center; padding: .5rem; border-radius: 14px; background: var(--primary-soft); color: var(--primary); line-height: 1.1; text-align: center; }
.event time b { font-size: 1.5rem; }
.event time small { font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.event h3 { margin: 0 0 .15rem; font-size: 1.08rem; }
.event p { margin: 0; font-size: .95rem; }
.event-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.way { display: flex; flex-direction: column; gap: .6rem; }
.way h3 { margin: .7rem 0 0; font-size: 1.15rem; }
.way p { margin: 0; font-size: 1rem; }
.friends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.friend { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.friend strong { display: block; }
.friend span { color: var(--muted); font-size: .95rem; }
.friend .event-meta { grid-column: 1 / -1; margin: 0; }
.friends + .trust-panel { margin-top: 3rem; }

/* Forms and onboarding */
.form-layout { display: grid; grid-template-columns: 1fr 21rem; gap: 2rem; align-items: start; }
.form-card { padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.form-card > h2 { font-size: 1.8rem; }
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.progress li { display: grid; gap: .45rem; color: var(--faint); font-size: .85rem; font-weight: 650; }
.progress li::before { content: ""; height: 5px; border-radius: 6px; background: var(--line); }
.progress li[data-state="done"]::before { background: var(--sage); }
.progress li[data-state="current"]::before { background: var(--primary); }
.progress li[data-state="current"] { color: var(--ink); }
.step-panel { border: 0; margin: 0; padding: 0; min-width: 0; }
.js .step-panel:not(.current) { display: none; }
.js .step-panel.current { animation: stepin .45s cubic-bezier(.2,.8,.2,1); }
@keyframes stepin { from { opacity: 0; transform: perspective(1000px) rotateY(-6deg) translateY(12px); } }
.step-panel > legend { padding: 0; margin-bottom: .5rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.step-intro { margin-bottom: 1.5rem; }
.no-js-step { display: block; margin-bottom: .5rem; color: var(--primary); font-weight: 700; }
.js .no-js-step { display: none; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: grid; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field > label, .group-label { font-weight: 650; font-size: 1.02rem; }
.field small { color: var(--faint); font-size: .9rem; }
.req { color: var(--primary); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea { width: 100%; min-height: 3.25rem; padding: .6rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--primary-soft); }
.invalid input, .invalid select, .invalid textarea, input.invalid, select.invalid { border-color: var(--primary); background: var(--primary-soft); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.choice-grid.three { grid-template-columns: repeat(3, 1fr); }
.choice-grid.four { grid-template-columns: repeat(4, 1fr); }
.choice { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .ui-icon { margin-top: .15rem; color: var(--primary); width: 1.4rem; height: 1.4rem; }
.choice strong { display: block; line-height: 1.3; }
.choice span { color: var(--muted); font-size: .92rem; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(31,111,168,.6); }
.choice:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.choice:hover { border-color: var(--line-strong); }
.tick-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.tick { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.7rem; padding: .3rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 550; cursor: pointer; }
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tick::before { content: ""; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--line-strong); border-radius: 6px; }
.tick:has(input:checked) { border-color: var(--sage); background: var(--sage-soft); }
.tick:has(input:checked)::before { border-color: var(--sage); background: var(--sage) url('/static/svg/icon-check.svg') center / 80% no-repeat; }
.tick:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.group { display: grid; gap: .6rem; margin-top: 1.4rem; }
.group:first-child { margin-top: 0; }
.consent { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.consent input { width: 1.35rem; height: 1.35rem; margin-top: .2rem; accent-color: var(--primary); flex: none; }
.consent span { color: var(--ink); font-size: 1rem; }
.form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form-nav .btn[data-step-next], .form-nav .btn[type="submit"] { margin-inline-start: auto; }
.form-error { display: none; margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.form-error.show { display: block; }
.review { display: grid; gap: .5rem; margin: 0; padding: 1.2rem; border-radius: 16px; background: var(--surface-2); }
.review div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
.review div:last-child { border-bottom: 0; padding-bottom: 0; }
.review dt { color: var(--muted); font-weight: 600; }
.review dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.side-card { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1rem; padding: 1.7rem; border-radius: var(--radius-lg); background: linear-gradient(160deg, #173a55, var(--navy)); color: var(--cream); box-shadow: var(--shadow-3d); }
.side-card h2 { margin: 0; color: #fff; font-size: 1.4rem; }
.side-card p { margin: 0; color: var(--on-dark); font-size: 1rem; }
.side-card .checks li { color: var(--on-dark); font-size: 1rem; }
.side-card .checks li::before { background-color: #d3eadc; }
.side-card img { width: 3rem; }
.only-family { display: contents; }

/* Partners */
.partner-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem 1.6rem; }
.ptype { display: flex; flex-direction: column; gap: .5rem; }
.ptype h3 { margin: .7rem 0 0; font-size: 1.1rem; }
.ptype p { margin: 0; font-size: .97rem; }
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.process li { position: relative; padding-top: 3.4rem; counter-increment: step; }
.process li::before { content: counter(step); position: absolute; top: 0; inset-inline-start: 0; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--surface); color: var(--primary); font-weight: 750; box-shadow: 0 0 0 1px var(--line-strong), 0 8px 18px -8px rgba(31,111,168,.5); }
.process li::after { content: ""; position: absolute; top: 1.25rem; inset-inline-start: 3rem; inset-inline-end: -.5rem; height: 1px; background: var(--line-strong); }
.process li:last-child::after { display: none; }
.process h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.process p { margin: 0; font-size: .97rem; }

/* Thanks, legal, regions, 404 */
.thanks { padding: 6rem 0; text-align: center; }
.thanks .cube { width: 5.5rem; height: 5.5rem; margin: 0 auto 1.8rem; border-radius: 28px; }
.thanks .cube .ui-icon { width: 2.4rem; height: 2.4rem; }
.thanks h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.thanks .lead { margin: 0 auto; }
.thanks .actions { justify-content: center; }
.reference { display: inline-grid; gap: .3rem; margin: 2rem 0 0; padding: 1.2rem 2rem; border: 1.5px dashed var(--line-strong); border-radius: 18px; background: var(--surface); }
.reference span { color: var(--muted); font-size: .95rem; }
.reference b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.8rem; letter-spacing: .08em; direction: ltr; }
.next-steps { max-width: 42rem; margin: 2.5rem auto 0; text-align: start; }
.legal { max-width: 46rem; }
.legal h2 { margin: 2.4rem 0 .6rem; font-size: 1.4rem; letter-spacing: -.02em; }
.legal a { color: var(--primary); font-weight: 650; }
.updated { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .95rem; }
.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.2rem; }
.lang-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.2rem; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); text-decoration: none; transition: transform .2s, border-color .2s; }
.lang-card:hover, .lang-card.active { transform: translateY(-2px); border-color: var(--primary); }
.lang-card > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 14px; background: var(--navy); color: var(--accent); font-weight: 800; }
.lang-card div { display: grid; }
.lang-card small { color: var(--muted); }
.lang-card b { color: var(--primary); }
.not-found { padding: 7rem 0; text-align: center; }
.not-found .code { font-size: clamp(5rem, 14vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--primary); }
.not-found .actions { justify-content: center; }
.faq { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; cursor: pointer; font-size: 1.12rem; font-weight: 650; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 1.6rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1.3rem; margin: 0; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer { padding: 4rem 0 1.5rem; background: var(--navy); color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; padding-bottom: 2.6rem; }
.footer .brand { color: var(--cream); }
.footer .brand small { color: rgba(240,248,253,.55); }
.footer-brand p { max-width: 22rem; margin: 1.1rem 0 0; color: var(--on-dark); font-size: 1rem; }
.footer h2 { margin: 0 0 .9rem; color: var(--accent); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
html[dir="rtl"] .footer h2 { letter-spacing: 0; font-size: .95rem; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: .55rem; }
.footer-grid a:not(.brand):not(.btn) { color: var(--on-dark); font-size: 1rem; text-decoration: none; }
.footer-grid a:not(.brand):not(.btn):hover { color: #fff; text-decoration: underline; }
.footer-prefs { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding: 1.5rem 0; border-top: 1px solid var(--dark-line); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills button, .pills a { min-height: 2.6rem; display: inline-flex; align-items: center; gap: .5rem; padding: 0 1rem; border: 1px solid var(--dark-line); border-radius: 999px; background: transparent; color: var(--on-dark); font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.pills [aria-pressed="true"], .pills [aria-current="page"] { border-color: var(--accent); color: #fff; background: rgba(141,211,247,.16); }
.pills b { color: var(--accent); font-size: .75rem; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--dark-line); color: rgba(240,248,253,.55); font-size: .9rem; }
.footer-bottom a { color: inherit; }

/* ── Reveal on inner pages ──────────────────────────────────────── */
.js .reveal { opacity: 0; transform: perspective(1200px) translate3d(0, 24px, -40px) rotateX(6deg); transition: opacity .6s ease, transform .8s cubic-bezier(.16,.84,.24,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.reveal-instant { transition: none; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-toggle { display: block; margin-inline-start: auto; }
  .nav { position: absolute; inset: 100% 0 auto 0; display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto; margin: 0; padding: .6rem 1.25rem 1.4rem; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav.open { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-item { border-bottom: 1px solid var(--line); }
  .menu-trigger, .menu-link { width: 100%; justify-content: space-between; min-height: 3.5rem; padding: 0 .3rem; border-radius: 0; font-size: 1.15rem; color: var(--ink); }
  .menu-trigger.active, .menu-link.active { box-shadow: none; color: var(--primary); }
  .mega, .mega-narrow, .mega-single { position: static; display: none; width: auto; grid-template-columns: 1fr; gap: .4rem; padding: 0 0 1rem; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; backdrop-filter: none; }
  .menu-item.open > .mega { display: grid; transform: none; }
  .mega-card { display: none; }
  .top-actions .link-quiet { display: none; }
  .hero-grid, .page-hero-grid, .split, .trust-panel, .form-layout, .shop-layout { grid-template-columns: 1fr; }
  .deck { height: 20rem; max-width: 34rem; }
  .tiles, .coverflow, .plan-grid, .media-grid, .friends, .product-grid { grid-template-columns: 1fr 1fr; }
  .coverflow .plan, html[dir="rtl"] .coverflow .plan { transform: none !important; }
  .coverflow .plan.premium, .plan-grid .plan.premium { grid-column: 1 / -1; }
  .addons, .ways, .partner-types { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .process li::after { display: none; }
  .side-card, .basket { position: static; }
  .hero-art { height: 15rem; }
  .photo-3d.tall { max-height: none; }
  .snap-dots { display: none; }
}
@media (max-width: 760px) {
  .shell { width: min(calc(100% - 32px), var(--shell)); }
  .brand small { display: none; }
  .brand strong { font-size: 1.3rem; }
  .top-actions .btn { display: none; }
  .hero { min-height: 0; }
  .hero-grid { padding-block: 3rem 5rem; }
  .deck { height: 17rem; }
  .deck-card { width: 15.5rem; }
  .deck-2 { display: none; }
  .deck-1 { inset-inline-end: auto; inset-inline-start: 0; }
  .tiles, .coverflow, .plan-grid, .media-grid, .friends, .product-grid, .svc-list, .addons, .ways, .partner-types, .process, .lang-grid, .trust-list, .join-band, .fields, .choice-grid, .choice-grid.three, .choice-grid.four { grid-template-columns: 1fr; }
  .actions { display: grid; }
  .actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .progress li span { display: none; }
  .review div { grid-template-columns: 1fr; gap: .1rem; }
  .event { grid-template-columns: 4rem 1fr; }
  .event > .tag { grid-column: 2; justify-self: start; }
  .media { grid-template-columns: 4.5rem 1fr; }
  .helper { inset-inline-end: .75rem; bottom: .75rem; }
  .helper-button span { display: none; }
  .helper-button, html[dir="rtl"] .helper-button { padding: .35rem; }
  .form-nav { flex-wrap: wrap; }
  .form-nav .btn { flex: 1; }
  .float-badge { inset-inline-end: .5rem; }
  .photo-3d::before, .device::before { display: none; }
  .device, html[dir="rtl"] .device { transform: none; }
  .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deck-card .glass, .hero-art .cube, .hero-art .orb, .scroll-cue .chev, .helper-panel, .js .step-panel.current, .js .tabbed .tab-panel.current { animation: none; }
  .js .rise, .js .reveal { opacity: 1; transform: none; transition: none; }
  [data-tilt], .plan, .device, .cover, .cube { transition: none; }
}
.way .tag { align-self: flex-start; }
[data-tabs] { scroll-margin-top: calc(var(--header-h) + 5rem); }