/* =========================================================
   DOGOPACH – design system (Pacho palette)
   lime · brown · light sand · dark · black & white
   All sizes in rem → the whole UI scales on 2K/4K screens.
   ========================================================= */

/* Self-hosted variable fonts (SIL Open Font License) */
@font-face { font-family: 'Heebo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/heebo-hebrew-wght-normal.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/heebo-latin-wght-normal.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; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 300 900; src: url(/fonts/rubik-hebrew-wght-normal.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 300 900; src: url(/fonts/rubik-latin-wght-normal.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; }


@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/assistant-hebrew-wght-normal.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/assistant-latin-wght-normal.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; }
:root {
  --lime: #c6e34b;
  --lime-strong: #a8c91c;
  --lime-soft: #eef6cf;
  --brown: #5a3a22;
  --brown-2: #8c6545;
  --brown-soft: #ecdfcd;
  --sand: #f5efe5;
  --sand-2: #ebe2d3;
  --ink: #14120f;
  --ink-2: #2a2520;
  --white: #ffffff;

  --bg: var(--sand);
  --surface: #ffffff;
  --surface-2: #f9f5ee;
  --text: var(--ink);
  --text-2: #3f372f;
  --muted: #675b4f;
  --line: rgba(20, 18, 15, .09);
  --line-2: rgba(20, 18, 15, .16);
  --accent: var(--lime);
  --on-accent: var(--ink);
  --ok: #2f7d4f; --ok-soft: #e1f2e6;
  --warn: #a8661c; --warn-soft: #fbefdc;
  --err: #b4372f; --err-soft: #fbe5e2;

  --r-sm: 1rem; --r: 1.5rem; --r-lg: 2rem; --r-xl: 2.75rem;
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, .05);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 .35rem 1rem -.35rem rgba(90, 58, 34, .16), 0 1.4rem 2.8rem -1.6rem rgba(90, 58, 34, .28);
  --shadow-lg: 0 2rem 4rem -1.5rem rgba(40, 25, 10, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --max: 76rem;
  --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display: 'Rubik', 'Heebo', system-ui, sans-serif;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f0e0c;
  --surface: #1a1815;
  --surface-2: #211e1a;
  --text: #f4eee4;
  --text-2: #d5ccbf;
  --muted: #a3978a;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --brown-soft: #2f2419;
  --lime-soft: #2a3310;
  --sand-2: #24201b;
  --ok-soft: #173525; --warn-soft: #3a2a14; --err-soft: #3d1a17;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem -.75rem rgba(0, 0, 0, .6);
  --shadow-lg: 0 2rem 4rem -1.5rem rgba(0, 0, 0, .7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0e0c; --surface: #1a1815; --surface-2: #211e1a; --text: #f4eee4; --text-2: #d5ccbf; --muted: #a3978a;
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .16); --brown-soft: #2f2419; --lime-soft: #2a3310; --sand-2: #24201b;
    --ok-soft: #173525; --warn-soft: #3a2a14; --err-soft: #3d1a17;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .75rem 2rem -.75rem rgba(0, 0, 0, .6);
    --shadow-lg: 0 2rem 4rem -1.5rem rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* Fluid root size: 15px on phones → ~26px on 4K monitors */
html { font-size: clamp(15px, .35vw + 12.5px, 26px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
::selection { background: var(--lime); color: var(--ink); }
a { color: inherit; text-decoration-color: var(--lime-strong); text-decoration-thickness: .12em; text-underline-offset: .2em; }
a:hover { color: var(--brown-2); }
:root[data-theme="dark"] a:hover { color: var(--lime); }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 2.4vw, 2.15rem); font-weight: 800; }
h3 { font-size: 1.18rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: .18rem solid var(--lime-strong); outline-offset: .15rem; border-radius: .4rem; }

/* View transitions between pages */
/* no cross-page fade: pages appear the moment they arrive */


.app-side { view-transition-name: sidebar; }
.tabbar { view-transition-name: tabbar; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-.4rem); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(.6rem); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Utilities */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 46rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.center { text-align: center; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.mt { margin-top: 1.5rem; } .mt-sm { margin-top: .75rem; } .mt-lg { margin-top: 3rem; } .mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; }
.hide { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--ink); --f: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--b); color: var(--f); font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s;
}
.btn:hover { color: var(--f); transform: translateY(-1px); box-shadow: 0 .6rem 1.4rem -.6rem rgba(20, 18, 15, .45); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.btn-lime, .btn-gold { --b: var(--lime); --f: var(--ink); }
.btn-lime:hover, .btn-gold:hover { --b: #d4ee62; color: var(--ink); }
.btn-ink { --b: var(--ink); --f: var(--white); }
:root[data-theme="dark"] .btn-ink { --b: var(--text); --f: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-ink { --b: var(--text); --f: var(--ink); } }
.btn-brown { --b: var(--brown); --f: var(--white); }
.btn-ghost { --b: transparent; --f: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { --f: var(--text); border-color: var(--text); box-shadow: none; }
.btn-soft { --b: var(--surface-2); --f: var(--text); border-color: var(--line); }
.btn-soft:hover { --f: var(--text); }
.btn-danger { --b: transparent; --f: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.btn-danger:hover { --b: var(--err-soft); --f: var(--err); box-shadow: none; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .6rem; width: 2.6rem; height: 2.6rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.card-flat { box-shadow: none; }
.card-soft { background: var(--surface-2); box-shadow: none; }
.card-ink { background: var(--ink); color: var(--white); border-color: transparent; }
.card-ink .muted { color: #b9ad9f; }
.card-lime { background: var(--lime); color: var(--ink); border-color: transparent; }
.card-lime .muted { color: #46521a; }
.card-brown { background: var(--brown); color: #fff; border-color: transparent; }
.card-brown .muted { color: #e2cdb8; }
.card-link { display: block; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card-link:hover { transform: translateY(-.2rem); box-shadow: var(--shadow-lg); border-color: var(--line-2); color: inherit; }
.card h3 { margin-bottom: .35rem; }
.tile { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.5rem; background: var(--lime-soft); flex-shrink: 0; }
.tile.brown { background: var(--brown-soft); }
.tile.ink { background: var(--ink); color: var(--lime); }
.tile svg { width: 1.4rem; height: 1.4rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--lime-soft); color: #3f4c0c; }
:root[data-theme="dark"] .badge { color: var(--lime); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-err { background: var(--err-soft); color: var(--err); }
.badge-muted { background: var(--sand-2); color: var(--text-2); }
.badge-brown { background: var(--brown-soft); color: var(--brown); }
:root[data-theme="dark"] .badge-brown { color: #e2c4a5; }
.icon-xl { font-size: 2rem; line-height: 1; }
.kpi { font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.kpi-label { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.divider { height: 1px; background: var(--line); margin: 1.25rem 0; }

/* ---------- Flash & toasts ---------- */
.flash { padding: .85rem 1.1rem; border-radius: var(--r); margin: 1rem 0; font-weight: 500; }
.flash-success { background: var(--ok-soft); color: var(--ok); }
.flash-error { background: var(--err-soft); color: var(--err); }
.flash-info { background: var(--lime-soft); color: #3f4c0c; }
:root[data-theme="dark"] .flash-info { color: var(--lime); }
.flash-badge { background: var(--ink); color: var(--lime); }
.toasts { position: fixed; z-index: 90; inset-block-end: 1.25rem; inset-inline-start: 50%; transform: translateX(50%); display: grid; gap: .5rem; width: min(28rem, calc(100% - 2rem)); pointer-events: none; }
[dir="ltr"] .toasts { transform: translateX(-50%); }
.toast { pointer-events: auto; padding: .9rem 1.1rem; border-radius: 1rem; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); display: flex; gap: .6rem; align-items: center; font-weight: 500; animation: toast-in .2s var(--ease) both; }
.toast.out { animation: toast-out .3s var(--ease) both; }
.toast .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--lime); flex-shrink: 0; }
.toast.error .dot { background: #ff7b6e; }
.toast.badge-toast { background: var(--lime); color: var(--ink); }
.toast.badge-toast .dot { background: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(1rem) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(.5rem) scale(.97); } }
@media (max-width: 860px) { .app-body .toasts { inset-block-end: 6rem; } }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .92rem; }
.field { margin-bottom: 1rem; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: inherit; background: var(--surface); color: var(--text); transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lime-strong); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--lime) 35%, transparent); }
input[disabled] { opacity: .6; }
textarea { min-height: 7rem; resize: vertical; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; min-height: 24rem; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.check input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--lime-strong); flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-weight: 500; font-size: .92rem; transition: background .12s, color .12s, border-color .12s, transform .12s; }
.chip input:checked + span { background: var(--ink); color: var(--lime); border-color: var(--ink); transform: scale(1.03); }
:root[data-theme="dark"] .chip input:checked + span { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.chip input:focus-visible + span { outline: .15rem solid var(--lime-strong); }
.errors { background: var(--err-soft); color: var(--err); padding: .85rem 1.1rem; border-radius: var(--r); margin-bottom: 1rem; }
.errors ul { margin: 0; padding-inline-start: 1.1rem; }
.inline-form { display: inline; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem; gap: .2rem; }
.seg label { margin: 0; }
.seg input { display: none; }
.seg span { display: block; padding: .4rem .9rem; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.seg input:checked + span { background: var(--ink); color: var(--lime); }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-weight: 800; letter-spacing: .08em; font-size: 1.1rem; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark { width: 2.3rem; height: 2.3rem; border-radius: .8rem; background: var(--lime); color: var(--ink); display: grid; place-items: center; box-shadow: inset 0 -.2rem 0 rgba(0, 0, 0, .08); }
.brand-mark svg { width: 1.35rem; height: 1.35rem; }

/* =========================================================
   Marketing site
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.2rem; }
.site-nav { display: flex; align-items: center; gap: .3rem; }
.site-nav a { text-decoration: none; padding: .5rem .9rem; border-radius: 999px; font-weight: 500; font-size: .95rem; color: var(--text-2); }
.site-nav a:hover { background: var(--surface); color: var(--text); }
.site-nav a.active { color: var(--text); background: var(--surface); }
.site-nav .btn { margin-inline-start: .4rem; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .site-nav { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; padding: .75rem 1.25rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
}
.demo-banner { background: var(--brown); color: #f3e3cf; text-align: center; font-size: .8rem; padding: .35rem 1rem; letter-spacing: .02em; }

.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 7vw, 6rem); }
.hero::before { content: ''; position: absolute; inset: 0; background: var(--noise); pointer-events: none; opacity: .9; }
.blob { position: absolute; border-radius: 50%; filter: blur(.5rem); pointer-events: none; }
.blob-lime { width: 34rem; height: 34rem; background: radial-gradient(circle at 40% 40%, var(--lime), transparent 65%); inset-inline-start: -10rem; top: -12rem; opacity: .55; }
.blob-brown { width: 28rem; height: 28rem; background: radial-gradient(circle, color-mix(in srgb, var(--brown-2) 45%, transparent), transparent 65%); inset-inline-end: -8rem; bottom: -14rem; opacity: .5; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-2); }
:root[data-theme="dark"] .eyebrow { color: var(--lime); }
.eyebrow::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--lime-strong); }
.display { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.045em; margin: .9rem 0 1.2rem; }
.display .hl { position: relative; white-space: nowrap; z-index: 0; }
.display .hl::after { content: ''; position: absolute; inset-inline: -.08em; bottom: .06em; height: .32em; background: var(--lime); z-index: -1; border-radius: .2em; transform: skewX(-8deg); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--text-2); max-width: 34rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.hero-meta { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-meta .kpi { font-size: 1.8rem; }

/* Phone mockup */
.phone { position: relative; width: min(100%, 22rem); margin-inline: auto; aspect-ratio: 9 / 18.5; border-radius: 3rem; background: var(--ink); padding: .7rem; box-shadow: var(--shadow-lg), inset 0 0 0 .12rem #3a332c; transform: rotate(-3deg); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: rotate(-2deg) translateY(-.6rem); } }
.phone-screen { height: 100%; border-radius: 2.4rem; overflow: hidden; background: var(--sand); color: var(--ink); display: flex; flex-direction: column; font-size: .78rem; }
.phone-top { padding: 1.4rem 1rem .8rem; background: var(--ink); color: #fff; display: flex; align-items: center; gap: .55rem; }
.phone-top .av { width: 2rem; height: 2rem; border-radius: 50%; background: var(--lime); display: grid; place-items: center; color: var(--ink); }
.phone-top .av svg { width: 1.1rem; height: 1.1rem; }
.phone-chat { flex: 1; padding: .9rem; display: flex; flex-direction: column; gap: .55rem; }
.pb { padding: .6rem .8rem; border-radius: 1rem; max-width: 86%; line-height: 1.5; box-shadow: var(--shadow-sm); }
.pb.me { background: var(--ink); color: #fff; align-self: flex-start; border-end-start-radius: .3rem; }
.pb.bot { background: #fff; align-self: flex-end; border-end-end-radius: .3rem; }
.pb.bot b { color: var(--brown); }
.pchips { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.pchips span { background: var(--lime); border-radius: 999px; padding: .25rem .6rem; font-weight: 600; font-size: .7rem; }
.phone-input { margin: .7rem; padding: .6rem .9rem; border-radius: 999px; background: #fff; color: #9a8f83; display: flex; justify-content: space-between; align-items: center; }
.phone-input i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lime); display: block; }
.float-card { position: absolute; background: var(--surface); color: var(--text); border-radius: 1.2rem; padding: .8rem 1rem; box-shadow: var(--shadow-lg); display: flex; gap: .7rem; align-items: center; font-size: .85rem; border: 1px solid var(--line); }
.float-card.a { inset-inline-end: -1rem; top: 14%; animation: float 6s ease-in-out infinite reverse; }
.float-card.b { inset-inline-start: -1.5rem; bottom: 16%; animation: float 8s ease-in-out infinite; }
@media (max-width: 960px) { .float-card.a { inset-inline-end: 0; } .float-card.b { inset-inline-start: 0; } }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--ink); color: var(--sand); padding: 1rem 0; }
.marquee-track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 38s linear infinite; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.marquee-track span { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap; }
.marquee-track span::after { content: '✦'; color: var(--lime); }
@keyframes marquee { to { transform: translateX(50%); } }
[dir="ltr"] .marquee-track { animation-name: marquee-ltr; }
@keyframes marquee-ltr { to { transform: translateX(-50%); } }

section.block { padding: clamp(3.5rem, 7vw, 6.5rem) 0; position: relative; }
section.block.alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head { max-width: 42rem; margin-bottom: 2.25rem; }
.section-head p { color: var(--text-2); font-size: 1.08rem; }

/* Bento */
.bento { display: grid; gap: 1.1rem; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(11rem, auto); }
.bento > * { grid-column: span 2; position: relative; overflow: hidden; }
.bento .w3 { grid-column: span 3; }
.bento .w4 { grid-column: span 4; }
.bento .h2 { grid-row: span 2; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .bento > *, .bento .w3, .bento .w4 { grid-column: span 2; } .bento .h2 { grid-row: auto; } }
.bento .card { display: flex; flex-direction: column; gap: .6rem; }
.bento .card h3 { font-size: 1.3rem; }
.bento-art { margin-top: auto; }
.mini-bars { display: flex; align-items: flex-end; gap: .35rem; height: 5rem; }
.mini-bars i { flex: 1; background: var(--lime); border-radius: .4rem .4rem .15rem .15rem; }
.ring { --p: 64; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 10%, transparent) 0); display: grid; place-items: center; }
.ring > div { width: 76%; height: 76%; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.card-ink .ring > div { background: var(--ink); }
.steps { counter-reset: s; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.step { counter-increment: s; }
.step::before { content: '0' counter(s); display: block; font-family: var(--display); font-weight: 900; font-size: 2.6rem; color: var(--lime-strong); line-height: 1; margin-bottom: .8rem; }
.compare { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.compare > div { padding: 2rem; }
.compare .them { background: var(--surface); }
.compare .us { background: var(--ink); color: #fff; }
.compare .price { font-family: var(--display); font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.4rem; transition: box-shadow .2s; }
details.faq[open] { box-shadow: var(--shadow); }
details.faq + details.faq { margin-top: .7rem; }
details.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--brown-2); transition: transform .25s var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin: .8rem 0 0; color: var(--text-2); }
.cta-band { background: var(--lime); color: var(--ink); border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 4rem); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-band h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
.cta-band::after { content: ''; position: absolute; width: 18rem; height: 18rem; border-radius: 50%; border: 2.5rem solid rgba(20, 18, 15, .06); inset-inline-start: -5rem; bottom: -9rem; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(.5rem); transition: opacity .3s ease-out, transform .3s ease-out; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; position: relative; padding: 1.75rem; }
.plan.highlight { background: var(--ink); color: #fff; border-color: transparent; transform: translateY(-.4rem); box-shadow: var(--shadow-lg); }
.plan.highlight .muted { color: #b9ad9f; }
.plan .ribbon { position: absolute; top: -.8rem; inset-inline-start: 1.5rem; background: var(--lime); color: var(--ink); font-weight: 800; font-size: .78rem; padding: .25rem .8rem; border-radius: 999px; }
.plan .amount { font-family: var(--display); font-size: 2.7rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: 1.1rem 0 .3rem; }
.plan .amount small { font-family: var(--font); font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan.highlight .amount small { color: #b9ad9f; }
.plan .was { text-decoration: line-through; color: var(--muted); font-weight: 600; margin-inline-start: .5rem; font-size: 1.1rem; font-family: var(--font); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; flex: 1; }
.plan li { padding: .35rem 0; padding-inline-start: 1.7rem; position: relative; }
.plan li::before { content: ''; position: absolute; inset-inline-start: 0; top: .72rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2314120f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/80% no-repeat; }
.plan-wide { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.1rem; }
.plan-wide .amount { font-family: var(--display); font-size: 1.9rem; font-weight: 900; }

/* Footer */
footer.site { background: var(--ink); color: #b3a798; padding: 3rem 0 2.5rem; font-size: .9rem; margin-top: 0; }
footer.site a { color: #efe5d6; }
footer.site .brand { color: #fff; }

/* =========================================================
   App shell (logged in)
   ========================================================= */
.app-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.app-side { position: sticky; top: 0; height: 100vh; padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: 1.4rem; border-inline-end: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.side-nav { display: flex; flex-direction: column; gap: .2rem; }
.side-nav a, .side-nav button { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 1rem; text-decoration: none; color: var(--text-2); font-weight: 500; font: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: start; transition: background .18s, color .18s; }
.side-nav a:hover, .side-nav button:hover { background: var(--surface); color: var(--text); }
.side-nav a.active { background: var(--ink); color: #fff; }
.side-nav a.active svg { color: var(--lime); }
:root[data-theme="dark"] .side-nav a.active { background: var(--lime); color: var(--ink); }
:root[data-theme="dark"] .side-nav a.active svg { color: var(--ink); }
.side-nav svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.side-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 .9rem; margin-top: .4rem; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.side-promo { background: var(--lime); color: var(--ink); border-radius: 1.2rem; padding: 1rem; font-size: .85rem; }
.side-promo strong { display: block; font-family: var(--display); font-size: 1rem; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; padding: .8rem 2rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.search-box { position: relative; flex: 1; max-width: 28rem; }
.search-box svg { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: var(--muted); }
.search-box input { padding-inline-start: 2.6rem; border-radius: 999px; background: var(--surface); border-color: var(--line); }
.search-box kbd { position: absolute; inset-inline-end: .7rem; top: 50%; transform: translateY(-50%); font: inherit; font-size: .72rem; color: var(--muted); border: 1px solid var(--line-2); border-radius: .4rem; padding: 0 .4rem; }
.search-pop { position: absolute; top: calc(100% + .4rem); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow-lg); padding: .4rem; display: none; max-height: 60vh; overflow: auto; z-index: 50; }
.search-pop.open { display: block; }
.search-pop a { display: flex; gap: .7rem; padding: .6rem .7rem; border-radius: .8rem; text-decoration: none; align-items: center; }
.search-pop a:hover, .search-pop a.sel { background: var(--surface-2); color: inherit; }
.search-pop .t { font-weight: 600; font-size: .92rem; }
.search-pop .s { font-size: .8rem; color: var(--muted); }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--brown); color: #fff; display: grid; place-items: center; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.avatar:hover { color: #fff; }
.app-content { padding: 2rem 2rem 4rem; width: 100%; max-width: 82rem; }
.page-head { padding: .5rem 0 1rem; }
.page-head h1 { margin-bottom: .25rem; }
.page-head p { color: var(--muted); margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--muted); text-decoration: none; margin-bottom: .6rem; }
.back-link:hover { color: var(--text); }

/* Mobile app shell */
.tabbar { display: none; }
.mobile-top { display: none; }
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app-top { padding: .6rem 1rem; }
  .app-top .brand { display: inline-flex; }
  .app-content { padding: 1.2rem 1rem 7rem; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; z-index: 60;
    inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); padding: .45rem .4rem;
    background: color-mix(in srgb, var(--ink) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 1.6rem; box-shadow: var(--shadow-lg);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem 0; color: #a99d90; text-decoration: none; font-size: .68rem; font-weight: 600; border-radius: 1rem; }
  .tabbar a svg { width: 1.35rem; height: 1.35rem; }
  .tabbar a.active { color: var(--lime); }
  .tabbar a.fab { margin-top: -1.6rem; }
  .tabbar a.fab span.f { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; box-shadow: 0 .6rem 1.4rem -.4rem rgba(198, 227, 75, .7); border: .3rem solid var(--bg); }
  .tabbar a.fab span.f svg { width: 1.5rem; height: 1.5rem; }
}
@media (min-width: 861px) { .app-top .brand { display: none; } }

/* ---------- App components ---------- */
.statusbar { padding: .9rem 1.2rem; border-radius: var(--r); display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.statusbar.ok { background: var(--ok-soft); }
.statusbar.warn { background: var(--warn-soft); }
.statusbar.info { background: var(--lime-soft); }
.progress { height: .5rem; background: color-mix(in srgb, var(--text) 9%, transparent); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--lime-strong); border-radius: 999px; transition: width 1s var(--ease); }
.card-ink .progress, .card-brown .progress { background: rgba(255, 255, 255, .14); }
.card-ink .progress > i { background: var(--lime); }
.hello { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
@media (max-width: 1100px) { .hello { grid-template-columns: 1fr; } }
.hero-card { position: relative; overflow: hidden; padding: 2rem; min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; }
.hero-card::after { content: ''; position: absolute; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lime) 50%, transparent), transparent 70%); inset-inline-start: -5rem; top: -6rem; opacity: .6; }
.hero-card > * { position: relative; z-index: 1; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; }
.stat .kpi { font-size: 1.7rem; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .45rem; align-items: end; height: 7rem; }
.week .col { display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; justify-content: flex-end; }
.week .bar { width: 100%; max-width: 2.2rem; border-radius: .6rem; background: color-mix(in srgb, var(--text) 8%, transparent); min-height: .4rem; transition: height .9s var(--ease); }
.week .bar.on { background: var(--lime-strong); }
.week .bar.today { background: var(--brown); }
.week .lbl { font-size: .72rem; color: var(--muted); }
.flame { display: inline-flex; align-items: center; gap: .4rem; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .75rem; }
.badge-item { text-align: center; padding: .9rem .5rem; border-radius: 1.1rem; background: var(--surface-2); border: 1px solid var(--line); }
.badge-item .ic { font-size: 1.8rem; line-height: 1; filter: grayscale(1); opacity: .35; }
.badge-item.on { background: var(--lime-soft); border-color: transparent; }
.badge-item.on .ic { filter: none; opacity: 1; }
.badge-item .n { font-weight: 700; font-size: .8rem; margin-top: .4rem; line-height: 1.3; }
.prog-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
.prog-card h3 { margin: .9rem 0 .35rem; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list li + li { border-top: 1px solid var(--line); }
.lesson-list a { display: flex; gap: 1rem; align-items: center; padding: 1rem .4rem; text-decoration: none; border-radius: 1rem; transition: background .15s; }
.lesson-list a:hover { background: var(--surface-2); color: inherit; }
.lesson-list .n { width: 2.3rem; height: 2.3rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: .88rem; }
.lesson-list .n.done { background: var(--lime); border-color: transparent; color: var(--ink); }
.prose { font-size: 1.06rem; line-height: 1.8; }
.prose h3 { margin-top: 1.8em; font-size: 1.25rem; }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--brown-2); font-weight: 700; }
.prose .note { background: var(--lime-soft); border-inline-start: .3rem solid var(--lime-strong); padding: .9rem 1.1rem; border-radius: .9rem; margin: 1.2rem 0; }
.locked { opacity: .55; }
.lesson-hero { border-radius: var(--r-xl); padding: 2rem; background: var(--ink); color: #fff; position: relative; overflow: hidden; margin-bottom: 1.25rem; }
.lesson-hero::after { content: ''; position: absolute; width: 22rem; height: 22rem; inset-inline-start: -8rem; bottom: -12rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lime) 55%, transparent), transparent 70%); }
.lesson-hero > * { position: relative; z-index: 1; }
.lesson-hero .muted { color: #b9ad9f; }
.lesson-hero a { color: #e8dccb; }
.sticky-actions { position: sticky; bottom: 1rem; z-index: 5; }
@media (max-width: 860px) { .sticky-actions { bottom: 6.2rem; } }

/* ---------- Coach chat ---------- */
.coach { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; height: calc(100vh - 9.5rem); min-height: 32rem; }
@media (max-width: 1100px) { .coach { grid-template-columns: 1fr; } .conv-list { display: none; } .conv-list.open { display: flex; } }
@media (max-width: 860px) { .coach { height: calc(100dvh - 12.5rem); } }
.conv-list { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .8rem; overflow: auto; }
.conv-list a { display: block; padding: .65rem .8rem; border-radius: .9rem; text-decoration: none; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.conv-list a:hover { background: var(--surface-2); }
.conv-list a.active { background: var(--lime-soft); color: var(--text); font-weight: 600; }
.chat { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.chat-head .av { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--lime); display: grid; place-items: center; color: var(--ink); position: relative; }
.chat-head .av svg { width: 1.4rem; height: 1.4rem; }
.chat-head .av::after { content: ''; position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: #3fbf6a; border: .15rem solid var(--surface); bottom: 0; inset-inline-end: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }
.msg { max-width: min(46rem, 88%); padding: .9rem 1.15rem; border-radius: 1.3rem; animation: msg-in .16s ease-out both; line-height: 1.7; }
@keyframes msg-in { from { opacity: 0; transform: translateY(.5rem); } }
.msg p:last-child, .msg ul:last-child, .msg ol:last-child { margin-bottom: 0; }
.msg ul, .msg ol { padding-inline-start: 1.25rem; margin: .4rem 0; }
.msg h3, .msg h4 { font-size: 1rem; margin: .8rem 0 .3rem; }
.msg.user { background: var(--ink); color: #fff; align-self: flex-start; border-end-start-radius: .35rem; white-space: pre-wrap; }
:root[data-theme="dark"] .msg.user { background: var(--brown); }
.msg.user img { display: block; max-width: 16rem; border-radius: .9rem; margin-bottom: .5rem; }
.msg.assistant { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-end; border-end-end-radius: .35rem; }
.msg.assistant .stream { white-space: pre-wrap; }
.msg-tools { display: flex; gap: .3rem; margin-top: .6rem; opacity: .7; }
.msg-tools button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .55rem; font: inherit; font-size: .78rem; cursor: pointer; color: var(--muted); }
.msg-tools button:hover { color: var(--text); border-color: var(--line-2); }
.msg-tools button.on { background: var(--lime); color: var(--ink); border-color: transparent; }
.typing { display: inline-flex; gap: .3rem; padding: .3rem 0; }
.typing i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brown-2); animation: dot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.suggestions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; align-self: flex-end; max-width: 88%; }
.suggestions button, .starter button { background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: .45rem .95rem; font: inherit; font-size: .86rem; cursor: pointer; color: var(--text); transition: all .18s var(--ease); }
.suggestions button:hover, .starter button:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); transform: translateY(-1px); }
.starter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; margin-top: .5rem; }
.starter button { border-radius: 1rem; text-align: start; padding: .85rem 1rem; }
.chat-compose { border-top: 1px solid var(--line); padding: .8rem; display: flex; gap: .5rem; align-items: flex-end; background: var(--surface); }
.chat-compose textarea { min-height: 3rem; height: 3rem; max-height: 10rem; resize: none; border-radius: 1.4rem; padding: .75rem 1.1rem; background: var(--surface-2); }
.compose-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: all .18s; }
.compose-btn:hover { border-color: var(--line-2); }
.compose-btn svg { width: 1.25rem; height: 1.25rem; }
.compose-btn.send { background: var(--lime); border-color: transparent; color: var(--ink); }
.compose-btn.rec { background: var(--err); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--err) 25%, transparent); } }
.attach-preview { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem 0; }
.attach-preview img { height: 3.5rem; border-radius: .7rem; }
.disclaimer { font-size: .78rem; color: var(--muted); text-align: center; padding: .4rem 1rem .7rem; }

/* ---------- Tools ---------- */
.clicker { width: min(70vw, 16rem); aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--lime); color: var(--ink); font-family: var(--display); font-size: 1.8rem; font-weight: 900; cursor: pointer; box-shadow: 0 1.2rem 0 -.2rem var(--lime-strong), var(--shadow-lg); transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent; user-select: none; }
.clicker:active, .clicker.hit { transform: translateY(.9rem); box-shadow: 0 .3rem 0 -.2rem var(--lime-strong), var(--shadow); }
.timer-face { font-family: var(--display); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: start; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font-weight: 700; color: var(--muted); font-size: .8rem; white-space: nowrap; letter-spacing: .02em; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

/* ---------- Admin ---------- */
.admin-shell .app-content { max-width: none; }
.bars { display: flex; align-items: flex-end; gap: .2rem; height: 9rem; }
.bars > div { flex: 1; background: var(--lime-strong); border-radius: .3rem .3rem 0 0; min-height: 2px; }
.bars > div:hover { background: var(--brown); }
.editor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 4.2rem); display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: var(--ink); color: #fff; padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-art::before { content: ''; position: absolute; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lime) 60%, transparent), transparent 65%); inset-inline-end: -10rem; top: -10rem; }
.auth-art > * { position: relative; }
.auth-art .display { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.auth-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth-form .card { width: min(100%, 28rem); }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--sand-2) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: .6rem; }
@keyframes sk { to { background-position: -200% 0; } }

/* Confetti canvas */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

/* Mobile side drawer */
.side-btn { display: none; }
.scrim { display: none; }
@media (max-width: 860px) {
  .admin-mode .side-btn { display: inline-flex; }
  .app-side.open { display: flex; position: fixed; inset-block: 0; inset-inline-start: 0; width: min(19rem, 86vw); height: 100dvh; z-index: 85; background: var(--bg); box-shadow: var(--shadow-lg); overflow-y: auto; animation: drawer .18s var(--ease) both; }
  .app-side.open + .app-main .scrim, .scrim.on { display: block; position: fixed; inset: 0; background: rgba(10, 8, 6, .45); z-index: 84; }
}
@keyframes drawer { from { transform: translateX(100%); } }
[dir="ltr"] .app-side.open { animation-name: drawer-ltr; }
@keyframes drawer-ltr { from { transform: translateX(-100%); } }
.lesson-hero .ring { background: conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); }
.lesson-hero .ring > div { background: var(--ink); color: #fff; }
.card-brown.lesson-hero .ring > div, .lesson-hero[style*="brown"] .ring > div { background: var(--brown); }
.card-ink .ring { background: conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); }
.card-ink .ring > div { color: #fff; }
svg.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }
.msg-tools svg { width: .95rem; height: .95rem; display: block; }
.card-link.row { display: flex; }
.phone { width: min(100%, 19rem); }
.float-card.a { top: 4%; }
@media (max-width: 1100px) {
  .conv-list:not(.open) { display: none; }
  .conv-list.open { max-height: 40vh; }
}
.m-search { display: none; }
@media (max-width: 860px) {
  .app-top .search-box, .app-top .badge-brown { display: none; }
  .m-search { display: inline-flex; }
}
.plan .badge { align-self: flex-start; }

/* =========================================================
   v3 – bubbly layer
   ========================================================= */
.btn { box-shadow: inset 0 -.2rem 0 rgba(0, 0, 0, .14); transition: transform .35s var(--spring), box-shadow .25s var(--ease), background .2s, color .2s; }
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 -.2rem 0 rgba(0, 0, 0, .14), 0 .8rem 1.6rem -.7rem rgba(20, 18, 15, .45); }
.btn:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 .1rem 0 rgba(0, 0, 0, .12); }
.btn-ghost, .btn-soft, .btn-danger { box-shadow: none; }
.card { border-radius: var(--r-lg); }
.card-link:hover { transform: translateY(-.35rem) scale(1.01); transition: transform .45s var(--spring), box-shadow .3s; }
.tile { border-radius: 1.2rem; box-shadow: inset 0 -.15rem 0 rgba(0, 0, 0, .06); }
.badge { padding: .28rem .8rem; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], select, textarea { border-radius: 1.1rem; padding: .9rem 1.1rem; background: var(--surface-2); border-color: transparent; box-shadow: inset 0 .1rem .3rem rgba(90, 58, 34, .08); }
input:focus, select:focus, textarea:focus { background: var(--surface); }

/* Floating background bubbles (app + site) */
body::before, body::after { content: ''; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(2.5rem); opacity: .5; }
body::before { width: 28rem; height: 28rem; background: color-mix(in srgb, var(--lime) 55%, transparent); inset-inline-end: -8rem; top: -8rem; animation: drift 18s ease-in-out infinite; }
body::after { width: 24rem; height: 24rem; background: color-mix(in srgb, var(--brown-2) 30%, transparent); inset-inline-start: -8rem; bottom: -8rem; animation: drift 22s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translate(3rem, 2rem) scale(1.08); } }
:root[data-theme="dark"] body::before { opacity: .18; } :root[data-theme="dark"] body::after { opacity: .25; }

/* Illustrations */
svg.art { display: block; width: 100%; height: auto; overflow: visible; }
.float-y { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-.6rem); } }

/* Page hero: slogan + illustration bubble */
.page-hero { position: relative; display: grid; grid-template-columns: 1fr minmax(9rem, 15rem); align-items: center; gap: 1.5rem; border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.8rem); margin-bottom: 1.5rem; overflow: hidden; isolation: isolate; }
.page-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 900; letter-spacing: -.035em; margin: .5rem 0 .6rem; line-height: 1.08; }
.page-hero p { margin: 0; font-size: 1.05rem; max-width: 36rem; }
.page-hero .ph-extra { margin-top: 1.1rem; }
.page-hero .ph-art { position: relative; align-self: end; margin-bottom: -1.4rem; }
.page-hero .ph-art svg.art { position: relative; z-index: 1; filter: drop-shadow(0 .8rem 1rem rgba(60, 40, 20, .18)); animation: floaty 6s ease-in-out infinite; }
.page-hero .bub { position: absolute; border-radius: 50%; z-index: 0; }
.page-hero .b1 { width: 80%; aspect-ratio: 1; inset-inline-start: 10%; bottom: 0; background: rgba(255, 255, 255, .55); }
.page-hero .b2 { width: 1.6rem; aspect-ratio: 1; inset-inline-end: 4%; top: 8%; background: rgba(255, 255, 255, .7); animation: floaty 4s ease-in-out infinite; }
.page-hero .b3 { width: .9rem; aspect-ratio: 1; inset-inline-start: 2%; top: 30%; background: var(--brown-2); opacity: .35; animation: floaty 5s ease-in-out infinite reverse; }
.page-hero::before { content: ''; position: absolute; width: 18rem; height: 18rem; border-radius: 50%; inset-inline-start: -6rem; top: -9rem; background: rgba(255, 255, 255, .25); z-index: -1; }
.tone-lime { background: var(--lime); color: var(--ink); }
.tone-lime .eyebrow { color: #3c4a0a; } .tone-lime .eyebrow::before { background: var(--ink); }
.tone-lime p { color: #2f3a08; }
.tone-lime .hl { background: var(--ink); color: var(--lime); padding: 0 .35em; border-radius: .5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tone-sand { background: var(--brown-soft); color: var(--text); }
:root[data-theme="dark"] .tone-sand { background: #2a2119; }
.tone-sand .b1 { background: rgba(255, 255, 255, .45); }
:root[data-theme="dark"] .tone-sand .b1 { background: rgba(255, 255, 255, .06); }
.tone-sand p { color: var(--text-2); }
.tone-sand .hl, .tone-ink .hl { background: var(--lime); color: var(--ink); padding: 0 .35em; border-radius: .5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tone-ink { background: var(--ink); color: #fff; }
.tone-ink .eyebrow { color: var(--lime); }
.tone-ink p { color: #cfc3b4; }
.tone-ink .b1 { background: rgba(198, 227, 75, .14); }
.tone-ink::before { background: rgba(198, 227, 75, .08); }
@media (max-width: 640px) {
  .page-hero { grid-template-columns: 1fr 6.5rem; gap: .8rem; padding: 1.25rem 1.25rem 1.4rem; }
  .page-hero p { font-size: .95rem; }
  .page-hero .ph-art { margin-bottom: -1.6rem; }
}

/* Speech-bubble cards */
.bubble-card { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
.bubble-card::after { content: ''; position: absolute; bottom: -.7rem; inset-inline-start: 2.2rem; width: 1.5rem; height: 1.5rem; background: inherit; border-radius: 0 0 .4rem 0; transform: rotate(45deg); }
.tip-card { background: var(--ink); color: #fff; }
.tip-card .muted { color: #b9ad9f; }
.tip-card strong { color: var(--lime); }

/* Program cards with illustration */
.prog-card { position: relative; overflow: hidden; padding-bottom: 1.25rem; }
.prog-art { height: 8.5rem; margin: -.5rem -.5rem .4rem; border-radius: 1.6rem; display: grid; place-items: end center; overflow: hidden; background: var(--surface-2); position: relative; }
.prog-art::before { content: ''; position: absolute; width: 9rem; height: 9rem; border-radius: 50%; background: color-mix(in srgb, var(--lime) 55%, transparent); bottom: -3rem; }
.prog-art svg.art { position: relative; width: auto; height: 92%; transition: transform .5s var(--spring); }
.card-link:hover .prog-art svg.art { transform: translateY(-.3rem) rotate(-3deg) scale(1.05); }
.prog-art.alt { background: var(--brown-soft); }
.prog-art.alt::before { background: rgba(255, 255, 255, .6); }

/* Onboarding wizard */
.wizard { max-width: 42rem; margin-inline: auto; }
.wiz-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.wiz-dots { display: flex; gap: .4rem; flex: 1; }
.wiz-dots i { flex: 1; height: .45rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); transition: background .4s; }
.wiz-dots i.on { background: var(--lime-strong); }
.js .wiz-step { display: none; }
.js .wiz-step.active { display: block; animation: step-in .5s var(--spring) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(-2rem) scale(.98); } }
.wiz-step h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.wiz-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.no-js .wiz-nav .wiz-next, .no-js .wiz-nav .wiz-back { display: none; }
.big-input { font-size: 1.4rem !important; padding: 1.1rem 1.3rem !important; font-weight: 600; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .7rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem .8rem; border-radius: 1.4rem; background: var(--surface-2); border: 2px solid transparent; font-weight: 600; text-align: center; transition: all .3s var(--spring); }
.choice span b { font-size: 1.8rem; line-height: 1; }
.choice input:checked + span { border-color: var(--ink); background: var(--lime); color: var(--ink); transform: scale(1.04); }
:root[data-theme="dark"] .choice input:checked + span { border-color: var(--lime); }
.choice input:focus-visible + span { outline: .2rem solid var(--lime-strong); outline-offset: .15rem; }

/* Dashboard greeting */
.greet { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.dog-avatar { width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .3rem var(--surface), var(--shadow); flex-shrink: 0; }
.dog-avatar svg { width: 100%; height: 100%; display: block; }

/* Landing v3 */
.hero-art-wrap { position: relative; }
.hero-blob { position: absolute; inset: 6% 4% 0; background: var(--lime); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; animation: morph 12s ease-in-out infinite; }
@keyframes morph { 50% { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; } }
.hero-art-wrap svg.art { position: relative; filter: drop-shadow(0 1.2rem 1.4rem rgba(60, 40, 20, .25)); }
.chip-bubble { position: absolute; background: var(--surface); color: var(--text); border-radius: 1.4rem; padding: .65rem 1rem; font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .5rem; white-space: nowrap; animation: floaty 6s ease-in-out infinite; z-index: 2; }
.chip-bubble::after { content: ''; position: absolute; width: .9rem; height: .9rem; background: inherit; bottom: -.35rem; inset-inline-start: 1.3rem; transform: rotate(45deg); border-radius: 0 0 .25rem 0; }
.chip-bubble.c1 { top: 4%; inset-inline-end: 0; }
.chip-bubble.c2 { top: 42%; inset-inline-start: -4%; animation-delay: -2s; background: var(--ink); color: #fff; }
.chip-bubble.c3 { bottom: 8%; inset-inline-end: 4%; animation-delay: -4s; }
@media (max-width: 640px) { .chip-bubble { font-size: .78rem; padding: .5rem .8rem; } .chip-bubble.c2 { inset-inline-start: 0; } }
.feature-art { height: 9rem; display: grid; place-items: end center; margin-top: auto; }
.feature-art svg.art { width: auto; height: 100%; }
.slogan-band { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 1.25rem; }
.slogan-band .display { font-size: clamp(2rem, 5.5vw, 4.4rem); margin: 0 auto; max-width: 18ch; }
.slogan-band .hl::after { bottom: .02em; }
.testimonial-free { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }

/* =========================================================
   Accessibility
   ========================================================= */
.skip-link { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 200; background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 999px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 1rem; color: #fff; }
.a11y-btn { position: fixed; z-index: 70; inset-inline-end: 1rem; bottom: 1rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; background: var(--brown); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .35s var(--spring); }
.a11y-btn:hover { transform: scale(1.08); }
.a11y-btn svg { width: 1.6rem; height: 1.6rem; }
@media (max-width: 860px) { .app-body .a11y-btn { bottom: 6.6rem; width: 2.8rem; height: 2.8rem; } }
.a11y-panel { position: fixed; z-index: 95; inset-inline-end: 1rem; bottom: 5rem; width: min(22rem, calc(100vw - 2rem)); background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.2rem; border: 1px solid var(--line); display: none; }
.a11y-panel.open { display: block; animation: step-in .4s var(--spring) both; }
@media (max-width: 860px) { .app-body .a11y-panel { bottom: 10rem; } }
.a11y-panel h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-grid button { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem .4rem; border-radius: 1.1rem; border: 2px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.a11y-grid button[aria-pressed="true"] { border-color: var(--ink); background: var(--lime); color: var(--ink); }
.a11y-grid button span.i { font-size: 1.3rem; line-height: 1; }
.a11y-size { display: flex; gap: .4rem; margin-bottom: .6rem; }
.a11y-size button { flex: 1; padding: .55rem; border-radius: 1rem; border: 2px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.a11y-size button[aria-pressed="true"] { border-color: var(--ink); background: var(--lime); color: var(--ink); }
html.a11y-text-1 { font-size: calc(clamp(15px, .35vw + 12.5px, 26px) * 1.15); }
html.a11y-text-2 { font-size: calc(clamp(15px, .35vw + 12.5px, 26px) * 1.3); }
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: .15em !important; }
html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font .display, html.a11y-font .kpi, html.a11y-font .btn { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; }
html.a11y-contrast { --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --text: #000000; --text-2: #000000; --muted: #222222; --line: #000000; --line-2: #000000; --brown-soft: #ffffff; }
html.a11y-contrast .card, html.a11y-contrast .page-hero, html.a11y-contrast .btn-ghost, html.a11y-contrast input, html.a11y-contrast textarea, html.a11y-contrast select { border: 2px solid #000 !important; }
html.a11y-contrast body::before, html.a11y-contrast body::after { display: none; }
html.a11y-contrast .tone-sand { background: #fff; }
html.a11y-contrast .muted { color: #222 !important; }
html.a11y-contrast[data-theme="dark"] { --bg: #000; --surface: #000; --surface-2: #111; --text: #fff; --text-2: #fff; --muted: #eee; --line: #fff; --line-2: #fff; }
html.a11y-contrast[data-theme="dark"] .card, html.a11y-contrast[data-theme="dark"] .page-hero { border-color: #fff !important; }
.hl-text { background: var(--lime); color: var(--ink); padding: 0 .3em; border-radius: .45em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.site-page { padding-block: 2rem 5rem; }
@media (max-width: 640px) { .hide-sm { display: none; } }
.greet h1 { letter-spacing: -.03em; }
.choice span small { font-weight: 500; }
.no-js .wiz-submit { display: inline-flex; }
[hidden] { display: none !important; }
fieldset.wiz-step h2 { margin-bottom: 1rem; }
.chat-head .av svg.art { width: 100%; height: 100%; }
.prog-art { display: block; padding-top: .6rem; }
.prog-art svg.art { width: 100%; height: 100%; display: block; }
.search-box input { padding-inline-start: 2.8rem !important; }
/* Pacho emblem as the brand mark */
.brand-mark { background: none; box-shadow: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; overflow: visible; }
.brand-mark svg.brand-svg { width: 100%; height: 100%; filter: drop-shadow(0 .2rem .35rem rgba(60, 40, 20, .25)); transition: transform .4s var(--spring); }
.brand:hover .brand-mark svg.brand-svg { transform: rotate(-8deg) scale(1.08); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text small { font-family: var(--font); font-weight: 600; letter-spacing: 0; font-size: .68rem; color: var(--muted); }
.phone-top .av svg, .chat-head .av svg { width: 100%; height: 100%; }
.pacho-strip { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.pacho-strip .emblem { width: clamp(9rem, 18vw, 14rem); }
@media (max-width: 640px) { .pacho-strip { grid-template-columns: 1fr; text-align: center; } .pacho-strip .emblem { margin-inline: auto; } }

/* ---------- Client portal ---------- */
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 960px) { .portal-grid { grid-template-columns: 1fr; } }
.meet-card { display: grid; gap: .6rem; }
.meet-when { font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; }
.task { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task form { margin: 0; }
.task .tick { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; place-items: center; font-weight: 800; flex: none; }
.task.done .tick { background: var(--lime); border-color: var(--lime-strong); color: var(--ink); }
.task.done .t-title { text-decoration: line-through; color: var(--muted); }
.thread { display: flex; flex-direction: column; gap: .55rem; max-height: 26rem; overflow: auto; padding: .4rem .2rem; }
.thread .pb { max-width: 88%; }
.thread .pb .xs { opacity: .7; margin-top: .2rem; }
.post { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.post:last-child { border-bottom: 0; }
.post video { width: 100%; max-height: 22rem; border-radius: 1rem; background: #000; }
.reply { background: var(--lime-soft, #eef6cf); border-radius: 1rem; padding: .7rem .9rem; }
.moods { display: flex; flex-wrap: wrap; gap: .4rem; }
.moods label { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border: 2px solid var(--line-2); border-radius: 99px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.moods input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.moods input:checked + span { font-weight: 800; }
.moods label:has(input:checked) { background: var(--lime); border-color: var(--lime-strong); color: var(--ink); }
.moods input:focus-visible + span { outline: 3px solid var(--lime-strong); outline-offset: 3px; border-radius: .4rem; }
.week-list { display: grid; gap: .6rem; }
.week-item { display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; border-radius: 1rem; background: var(--surface-2, #f9f5ee); border: 1px solid var(--line); }
.week-item .when { font-weight: 800; min-width: 9rem; font-variant-numeric: tabular-nums; }
.dot-new { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 99px; background: var(--brown, #5a3a22); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
input[type=file] { font: inherit; padding: .6rem; border: 2px dashed var(--line-2); border-radius: 1rem; width: 100%; background: var(--surface-2); }

/* ---------- Required written answers: shake + message ---------- */
@keyframes dpShake { 0%,100% { transform: translateX(0); } 15%,55% { transform: translateX(-9px); } 35%,75% { transform: translateX(9px); } 90% { transform: translateX(-3px); } }
.shake { animation: dpShake .5s cubic-bezier(.36,.07,.19,.97); }
.is-invalid, .is-invalid:focus { border-color: var(--err, #b4372f) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--err, #b4372f) 22%, transparent) !important; }
.field-error { display: flex; align-items: center; gap: .4rem; color: var(--err, #b4372f); font-weight: 700; font-size: .9rem; margin-top: .4rem; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--err, #b4372f); color: #fff; font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
html.a11y-motion .shake { animation: none; }

/* ---------- Certificate ---------- */
.cert-wrap { max-width: 46rem; margin-inline: auto; }
.cert { position: relative; text-align: center; background: var(--surface); border-radius: 2rem; padding: clamp(1.6rem, 5vw, 3.4rem); border: 3px solid var(--lime-strong, #a8c91c); box-shadow: inset 0 0 0 10px var(--surface), inset 0 0 0 12px var(--line-2), var(--shadow-lg); overflow: hidden; }
.cert::before { content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(198,227,75,.28), transparent 70%); inset-inline-end: -8rem; top: -9rem; pointer-events: none; }
.cert-mark { width: 6.5rem; margin: 0 auto .6rem; }
.cert-eyebrow { font-size: .8rem; letter-spacing: .14em; font-weight: 800; color: var(--brown-2, #8c6545); }
.cert h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: .4rem 0 1rem; }
.cert-line { color: var(--muted); margin: .3rem 0; }
.cert-name { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; margin: .2rem 0; }
.cert-program { display: inline-block; background: var(--lime); color: var(--ink); font-weight: 800; font-size: 1.2rem; padding: .5rem 1.2rem; border-radius: 99px; margin: .6rem 0; }
.cert-foot { display: flex; justify-content: space-around; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-2); }
.cert-sign { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
@media print { .app-side, .topbar, .tabbar, .a11y-btn, .cert-wrap > .row, .cert-wrap > p, footer { display: none !important; } .cert { box-shadow: none; } body { background: #fff; } }

/* ---------- Deep intake ---------- */
.intake-qs { display: grid; gap: 1.4rem; margin-top: .6rem; }
.intake-q .field > label, .intake-q .qlabel { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .55rem; line-height: 1.45; }
.qn { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: .8rem; font-weight: 800; margin-inline-end: .3rem; vertical-align: 1px; }
.field[data-required-group].is-invalid { outline: 2px solid var(--err, #b4372f); outline-offset: .45rem; border-radius: .8rem; }
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 3.2rem)); gap: .45rem; }
.scale label { position: relative; margin: 0; }
.scale input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scale span { display: grid; place-items: center; height: 3rem; border-radius: .9rem; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; transition: all .2s var(--ease); }
.scale input:checked + span { background: var(--ink); color: var(--lime); border-color: var(--ink); transform: scale(1.06); }
.scale input:focus-visible + span { outline: .15rem solid var(--lime-strong); }
/* ---------- Work plan ---------- */
.plan-flags { display: grid; gap: .7rem; }
.plan-flag { border-radius: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); background: var(--surface); display: grid; gap: .2rem; }
.plan-flag strong { font-size: 1rem; }
.plan-flag.danger { border-color: var(--err, #b4372f); background: color-mix(in srgb, var(--err, #b4372f) 9%, var(--surface)); }
.plan-flag.vet, .plan-flag.warn { border-color: #d39b2a; background: color-mix(in srgb, #d39b2a 10%, var(--surface)); }
.plan-flag.info { border-color: var(--lime-strong); background: color-mix(in srgb, var(--lime) 14%, var(--surface)); }
.phase-list { display: grid; gap: 1rem; counter-reset: ph; }
.phase { border: 1px solid var(--line); border-radius: 1.3rem; padding: 1.1rem 1.2rem; background: var(--surface); display: grid; gap: .7rem; }
.phase-head { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.phase-weeks { background: var(--ink); color: var(--lime); font-weight: 800; font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }
.phase.now { border: 2px solid var(--lime-strong); box-shadow: 0 6px 24px color-mix(in srgb, var(--lime) 30%, transparent); }
.proto { border-top: 1px dashed var(--line); padding-top: .7rem; }
.proto summary { cursor: pointer; font-weight: 700; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; list-style: none; }
.proto summary::-webkit-details-marker { display: none; }
.proto summary::after { content: "+"; margin-inline-start: auto; font-weight: 800; color: var(--muted); }
.proto[open] summary::after { content: "–"; }
.proto ol { margin: .5rem 0 .3rem; padding-inline-start: 1.3rem; display: grid; gap: .3rem; }
.lvl { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.proto .src { font-size: .78rem; color: var(--muted); }
.kpi-line { font-size: .85rem; background: var(--surface-2); border-radius: .7rem; padding: .45rem .7rem; }
.plan-cols { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.plan-cols ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .35rem; }
.wp-pick { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.wp-pick label { display: flex; gap: .45rem; align-items: flex-start; font-size: .88rem; padding: .35rem .5rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--surface); }
.wp-pick label:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--lime) 18%, var(--surface)); }

/* ---------- Plan tracking ---------- */
.practice-list { display: grid; gap: .5rem; }
.practice-row { display: flex; gap: .8rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-2); }
.ring { --p: 0; width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(var(--lime-strong) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring b { font-size: 1.15rem; line-height: 1; }
.trend-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-bottom: .4rem; }
.bars { display: flex; align-items: flex-end; gap: .35rem; height: 5.5rem; margin-top: .45rem; padding-bottom: .2rem; border-bottom: 1px solid var(--line); }
.tbar { flex: 1; max-width: 2.2rem; height: var(--h); background: var(--lime); border-radius: .45rem .45rem .15rem .15rem; position: relative; min-height: .6rem; }
.tbar.base { background: var(--surface-2); border: 1px dashed var(--line-2); }
.tbar i { position: absolute; top: -1.15rem; inset-inline: 0; text-align: center; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }


/* =========================================================
   v4 – editorial layer
   Less "template", more print: a clean professional sans for headlines (Assistant),
   a highlighter stroke instead of pill boxes, flat paper surfaces,
   one shadow scale and calm motion. Overrides the layers above.
   ========================================================= */
:root {
  --display: 'Assistant', 'Heebo', system-ui, sans-serif;
  --r-sm: .75rem; --r: 1rem; --r-lg: 1.25rem; --r-xl: 1.5rem;
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .06);
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 4px 12px -6px rgba(60, 40, 20, .12);
  --shadow-lg: 0 2px 4px rgba(60, 40, 20, .06), 0 18px 36px -18px rgba(60, 40, 20, .28);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --marker: color-mix(in srgb, var(--lime) 85%, #f7f2a0);
}
body::before, body::after, .blob, .hero-card::after, .lesson-hero::after, .page-hero::before, .page-hero .bub { display: none !important; }

/* Type: Assistant for headings, Heebo for everything functional */
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; line-height: 1.08; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
h3, h4 { font-family: var(--font); font-weight: 700; letter-spacing: -.005em; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.kpi { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.kpi-label, .xs, .small { font-variant-numeric: tabular-nums; }
::selection { background: var(--marker); color: var(--ink); }

/* Highlighter stroke, like someone marked the word with a pen */
.hl, .display .hl, .tone-lime .hl, .tone-sand .hl, .tone-ink .hl {
  background: none !important; color: inherit !important; padding: 0 .08em !important; border-radius: 0 !important;
  background-image: linear-gradient(176deg, transparent 0 58%, var(--marker) 58% 88%, transparent 88%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.display .hl::after { display: none; }
.tone-ink .hl { background-image: linear-gradient(176deg, transparent 0 62%, color-mix(in srgb, var(--lime) 55%, transparent) 62% 90%, transparent 90%) !important; }

/* Eyebrow: a short pen line instead of a glowing dot */
.eyebrow { letter-spacing: .04em; font-size: .82rem; text-transform: none; gap: .6rem; }
.eyebrow::before { width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }

/* Page header: paper, not a candy block */
.page-hero { border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: 1fr minmax(7rem, 11rem); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.06; }
.page-hero .ph-art { margin-bottom: -1.2rem; }
.page-hero .ph-art svg.art { animation: none; filter: none; }
.tone-sand { background: transparent; border-bottom: 1px solid var(--line-2); border-radius: 0; padding-inline: 0; }
:root[data-theme="dark"] .tone-sand { background: transparent; }
.tone-lime { background: var(--lime-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--lime-strong) 35%, transparent); }
.tone-lime p { color: var(--text-2); }
.tone-lime .eyebrow { color: color-mix(in srgb, var(--lime-strong) 55%, var(--ink)); }
:root[data-theme="dark"] .tone-lime .eyebrow { color: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tone-lime .eyebrow { color: var(--lime); } }

/* Surfaces: flat paper with a hairline, depth only where it means something */
.card { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tile { border-radius: .9rem; box-shadow: none; }

/* Buttons: confident, not bouncy */
.btn { border-radius: .85rem; box-shadow: none; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(20, 18, 15, .55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-ghost:hover, .btn-soft:hover, .btn-danger:hover { box-shadow: none; }
.btn-lime { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1); }

/* Inputs */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  border-radius: .8rem; background: var(--surface); border: 1px solid var(--line-2); box-shadow: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 55%, transparent); outline: none; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--lime); }

/* Chips and badges: smaller radius reads more "made" and less "generated" */
.chip span { border-radius: .7rem; }
.badge { border-radius: .45rem; font-weight: 600; letter-spacing: .01em; }
.choice span { border-radius: 1rem; }
.scale span { border-radius: .7rem; }

/* Motion: calm */
.float-y { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition-timing-function: var(--ease); }
}

/* v4 home */
.hero-blob { animation: none; }
.hero-art-wrap { position: relative; }
.hero-note { position: absolute; inset-inline-start: -.5rem; bottom: 6%; margin: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: .9rem; padding: .8rem 1rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; transform: rotate(-2.5deg); box-shadow: var(--shadow); z-index: 2; }
.hero-proof { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .45rem; color: var(--text-2); }
.hero-proof li { display: flex; gap: .6rem; align-items: baseline; }
.hero-proof li::before { content: ''; flex: none; width: .9rem; height: .5rem; border-inline-start: 2px solid var(--lime-strong); border-bottom: 2px solid var(--lime-strong); transform: translateY(-.15rem) rotate(-45deg); }
.issues-band { background: var(--ink); color: var(--sand); padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.issues-band h2 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 1rem; }
.issues-band ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.issues-band li { border: 1px solid rgba(255, 255, 255, .18); border-radius: .7rem; padding: .45rem .9rem; font-weight: 500; }
.step h3 { font-size: 1.15rem; }
.step::before { font-size: 2.2rem; }
.cta-band::after { display: none; }
.brand-text { font-family: var(--font); font-weight: 900; letter-spacing: .06em; }
.feature-art svg.art { height: 9rem; max-height: 100%; width: auto; max-width: 100%; }
.step .feature-art { margin: 0 0 1rem; }
.cta-band .hl { background-image: linear-gradient(176deg, transparent 0 58%, rgba(255, 255, 255, .65) 58% 88%, transparent 88%) !important; }
.card-lime .hl { background-image: linear-gradient(176deg, transparent 0 58%, rgba(255, 255, 255, .65) 58% 88%, transparent 88%) !important; }
.flag-kind { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.plan-flag.danger .flag-kind { color: var(--err); }
.plan-flag.vet .flag-kind, .plan-flag.warn .flag-kind { color: var(--warn); }
.card-ink svg.art, .card-brown svg.art, .tone-ink svg.art { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .55)); }
:root[data-theme="dark"] svg.art { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .35)); }

/* ---------- Single courses + lock screen ---------- */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:.8rem}
.course-card{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem}
.course-card .tile{width:2.4rem;height:2.4rem;font-size:1.2rem;flex:none}
.lock-hero{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center}
.lock-hero .lock-ic{width:3.6rem;height:3.6rem;border-radius:1rem;background:var(--lime);color:var(--ink);display:grid;place-items:center}
.lock-hero .lock-ic svg{width:1.8rem;height:1.8rem}
.side-lock{margin:.2rem .4rem .8rem;padding:.8rem .9rem;border-radius:.9rem;background:var(--lime);color:var(--ink);display:grid;gap:.4rem;text-decoration:none;font-size:.88rem;line-height:1.4}
.side-lock strong{display:flex;align-items:center;gap:.4rem}
.side-lock svg{width:1rem;height:1rem}
@media (max-width:560px){.lock-hero{grid-template-columns:1fr}}

#courses{scroll-margin-top:6rem}

/* ---------- Vet chat: emergency box ---------- */
.vet-sos{background:#3a1d14;color:#fff;border-radius:var(--r-lg);padding:1rem 1.2rem;margin-bottom:1rem}
.vet-sos-top{display:flex;gap:.9rem;align-items:flex-start}
.vet-sos h2{color:#fff;font-size:1.25rem;margin:0 0 .25rem}
.vet-sos p{margin:0;color:#f3d9cc;font-size:.92rem}
.vet-sos .sos-ic{font-size:1.6rem;line-height:1}
.sos-list{margin-top:.8rem;background:rgba(255,255,255,.07);border-radius:.8rem;padding:.6rem .9rem}
.sos-list summary{cursor:pointer;font-weight:700;color:var(--lime);padding:.2rem 0}
.sos-list h3{color:#f3d9cc;margin:.7rem 0 .3rem;letter-spacing:.04em}
.sos-list ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sos-list li{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.06);border-radius:.6rem;padding:.55rem .7rem}
.sos-list .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.vet-sos .chip span{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.vet-sos .chip:hover span{background:rgba(255,255,255,.2)}
.msg .body a[href^="http"]{word-break:break-word}

/* Speed: instant tap response */
a, button, .btn, .chip, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn:active, .chip:active { transform: scale(.97); transition-duration: .05s; }
.sos-filter{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 .2rem}
.sos-filter button{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:999px;padding:.3rem .75rem;font:inherit;font-size:.82rem;cursor:pointer}
.sos-filter button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.sos-kind{display:inline-block;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:rgba(255,255,255,.14);margin-inline-end:.4rem;vertical-align:middle}
.sos-kind.k24{background:#e5484d;color:#fff}

/* ---------- Vet chat: hero with Pacho in a white coat + legal note ---------- */
.vet-hero{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:linear-gradient(135deg,#eef6fb,#f7fbef);border:1px solid #d9e6ee;border-radius:var(--r-lg);padding:1.1rem 1.4rem;margin-bottom:1rem;color:#1c1716}
.vet-hero h1{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:.35rem 0 .4rem;color:#1c1716}
.vet-hero p{margin:0;color:#4b4f57}
.vet-hero .vh-art{width:clamp(7rem,18vw,10.5rem)}
.vh-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.vh-tags span{background:#fff;border:1px solid #d9e6ee;border-radius:999px;padding:.25rem .7rem;font-size:.8rem;font-weight:600;color:#2c3440}
.vet-legal{margin-top:1rem;border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:.9rem 1.1rem;background:var(--surface);font-size:.88rem}
.vet-legal strong{display:block;margin-bottom:.2rem}
.vet-legal p{margin:0;color:var(--muted)}
@media (max-width:560px){.vet-hero{grid-template-columns:1fr auto;padding:1rem}.vet-hero .vh-art{width:6.5rem}.vh-tags{display:none}}
[data-theme="dark"] .vet-hero{background:linear-gradient(135deg,#1d2a31,#222a1c);border-color:#2f3b43;color:#f3efe8}
[data-theme="dark"] .vet-hero h1{color:#f3efe8}[data-theme="dark"] .vet-hero p{color:#c9cdd3}
[data-theme="dark"] .vh-tags span{background:#26313a;border-color:#34414b;color:#e8ecef}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vet-hero{background:linear-gradient(135deg,#1d2a31,#222a1c);border-color:#2f3b43;color:#f3efe8}
  :root:not([data-theme="light"]) .vet-hero h1{color:#f3efe8} :root:not([data-theme="light"]) .vet-hero p{color:#c9cdd3}
  :root:not([data-theme="light"]) .vh-tags span{background:#26313a;border-color:#34414b;color:#e8ecef}
}

/* ---------- Admin: ready to launch ---------- */
.launch-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.launch-list li{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .8rem;border-radius:.8rem;border:1px solid var(--line)}
.launch-list .lk-ic{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff}
.launch-list li.ok .lk-ic{background:#2f9e5a}
.launch-list li.warn .lk-ic{background:#d08a1e}
.launch-list li.bad .lk-ic{background:#d64545}
.launch-list li.bad{border-color:color-mix(in srgb,#d64545 35%,var(--line))}

/* ===== Inside the store apps (Google Play / App Store): no purchases, no links to buy (store rules) ===== */
.in-app a[href^="/pricing"], .in-app a[href^="/pay/"], .in-app form[action^="/pay/"], .in-app a[href^="/signup"], .in-app .buy-only { display: none !important; }
.app-install { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.app-install[hidden] { display: none !important; }
.install-steps { margin: .4rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .25rem; }

/* ===== Start questionnaire ===== */
.welcome-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.welcome-grid .choice span { min-height: 7.5rem; justify-content: center; }
.welcome-grid .choice span small { font-size: .8rem; line-height: 1.35; }
.goal-card { display: flex; gap: 1rem; align-items: center; }
.goal-card .goal-ic { font-size: 2rem; line-height: 1; }
.goal-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.goal-chips span { font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; background: var(--surface-2); }

/* ===== Admin: my day, risk, WhatsApp ===== */
.today-kpis { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.today-list { list-style: none; margin: 0; padding: 0; display: grid; }
.today-list li { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.today-list li:first-child { border-top: 0; }
.today-main { flex: 1; min-width: 12rem; }
.today-when { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 7.5rem; }
.risk-pill { display: inline-block; min-width: 2.2rem; text-align: center; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.risk-high { background: var(--err-soft); color: var(--err); }
.risk-medium { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.risk-low { background: var(--surface-2); color: var(--muted); }
.btn-wa { --b: #1f9d55; --f: #fff; border-color: transparent; }
.btn-wa:hover { --b: #198a4a; }
.h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.brief-box { border: 2px solid var(--lime-strong); }
.brief-box ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: .25rem; }

/* ===== Landing pages ===== */
.issues-band li a { color: inherit; text-decoration: none; }
.issues-band li:has(a):hover { border-color: var(--lime); }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.lp-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.lp-n { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-weight: 800; }
.statusbar.success { background: var(--lime-soft); border: 1px solid var(--lime-strong); }
.coupon-box summary { cursor: pointer; font-weight: 700; }
.invite-code { font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: .08em; margin: .2rem 0 .4rem; font-variant-numeric: tabular-nums; }
.cancel-reasons { display: grid; gap: .45rem; margin-top: .4rem; }
.cancel-tip { margin-top: .8rem; padding: .8rem 1rem; border-radius: 1rem; background: var(--surface-2); font-size: .92rem; }
.feedback-scale { display: flex; gap: .4rem; flex-wrap: wrap; }
.feedback-scale button { min-width: 3rem; font-size: 1.3rem; }
.code-sample { background: var(--surface-2); padding: .8rem; border-radius: .8rem; overflow-x: auto; font-size: .8rem; }
.funnel { display: grid; gap: .5rem; }
.funnel-row, .drop-row { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr auto; gap: .7rem; align-items: center; }
.funnel-label { font-size: .9rem; }
.funnel-bar { display: block; height: .8rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--lime-strong); border-radius: 999px; }
.funnel-n, .drop-n { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3rem; text-align: end; }
.drop { display: grid; gap: .25rem; }
.drop-row { grid-template-columns: 1.6rem 1fr 3rem; }
.drop-i { font-size: .75rem; color: var(--muted); text-align: center; }
.drop-row.bad .funnel-bar i { background: var(--warn); }
@media (max-width: 560px) { .funnel-row { grid-template-columns: 1fr auto; } .funnel-row .funnel-bar { grid-column: 1 / -1; grid-row: 2; } }
.voice-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: .2rem; display: grid; place-items: center; border-radius: 50%; }
.voice-btn .ic { width: 1.15rem; height: 1.15rem; }
.voice-btn.on { color: var(--err); animation: pulse-mic 1s infinite; }
@keyframes pulse-mic { 50% { transform: scale(1.18); } }
.tts-bar { gap: .6rem; margin-bottom: .8rem; align-items: center; }
.today-more { justify-content: center !important; font-weight: 700; }
/* ===== About the child / dog-assisted therapy ===== */
.therapy-box { display: flex; gap: .9rem; align-items: center; background: var(--lime-soft); border-radius: 1.2rem; padding: .9rem 1rem; }
.therapy-ic { flex: none; width: 3.4rem; height: 3.4rem; }
.therapy-ic svg { width: 100%; height: 100%; }
.therapy-contact { border-top: 1px solid var(--line); padding-top: 1rem; }
/* ===== Quick start + first mission ===== */
.start-issues .choice span { min-height: 6rem; }
.first-mission { border: 2px solid var(--lime-strong); background: var(--lime-soft); box-shadow: none; }
.first-mission .lp-steps li { background: var(--surface); border-radius: 1rem; padding: .7rem .9rem; }
/* ===== Admin security ===== */
.twofa-setup { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.twofa-qr { width: 11rem; height: 11rem; background: #fff; padding: .4rem; border-radius: .8rem; flex: none; }
.twofa-qr svg { width: 100%; height: 100%; display: block; }
.twofa-secret { display: inline-block; font-size: 1rem; letter-spacing: .08em; background: var(--surface-2); padding: .3rem .6rem; border-radius: .5rem; margin-top: .3rem; word-break: break-all; }
.twofa-steps { display: grid; gap: .2rem; margin: .4rem 0; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .4rem; margin-top: .6rem; }
.recovery-codes code { background: var(--surface); padding: .35rem .5rem; border-radius: .5rem; text-align: center; font-size: .95rem; }

/* ---------- Seats, symbolic first week, waitlist ---------- */
.seat-left { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; margin-top: .55rem; }
.seat-left.low { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.trial-note { color: var(--ok); font-weight: 600; margin-top: .25rem; }
.seat-box select { width: 100%; }
.wait-hero { display: flex; gap: 1rem; align-items: flex-start; }
.wait-hero .wait-ic { font-size: 2rem; line-height: 1; }
.wait-pos { font-family: var(--display); font-size: 2.4rem; font-weight: 900; line-height: 1; }

/* ---------- Thank-you page after payment ---------- */
.thanks { text-align: center; display: grid; justify-items: center; gap: .3rem; }
.thanks h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0; }
.thanks .lead { font-size: 1.1rem; max-width: 34rem; margin: 0; }
.thanks-grid { display: grid; gap: 1rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.receipt dl { display: grid; gap: .55rem; margin: .4rem 0 1rem; }
.receipt dl > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line-2); padding-bottom: .45rem; }
.receipt dt { color: var(--muted); } .receipt dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.steps-list { list-style: none; counter-reset: s; padding: 0; margin: .4rem 0 1.1rem; display: grid; gap: .75rem; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; column-gap: .7rem; }
.steps-list li::before { content: counter(s); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; font-weight: 800; }
.steps-list li span { color: var(--muted); font-size: .9rem; }
.gift-code { font: 800 clamp(1.6rem, 5vw, 2.2rem) var(--display); letter-spacing: .08em; background: var(--lime-soft); color: var(--ink); border: 2px dashed var(--lime-strong); border-radius: 1rem; padding: .7rem 1rem; text-align: center; margin: .3rem 0 .6rem; }
.invite-strip { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.exam-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---------- Trick library ---------- */
.trick-score { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.tricks-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.trick.on { border-color: var(--lime-strong); box-shadow: inset 0 0 0 1px var(--lime-strong); }
.trick-steps { margin: .5rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .3rem; }
.exam-box > summary { list-style: none; cursor: pointer; } .exam-box > summary::-webkit-details-marker { display: none; }

/* ---------- Dashboard boosters: goal, challenge, Zoom, milestones, review ---------- */
.goal-chart { display: block; width: 100%; max-width: min(100%, 30rem); height: auto; margin-top: .6rem; direction: ltr; }
.gc-axis { stroke: var(--line-2); stroke-width: 1; }
.gc-line { fill: none; stroke: var(--lime-strong); stroke-width: 3; stroke-linecap: round; }
.gc-now { fill: var(--surface); stroke: var(--text); stroke-width: 2.5; }
.gc-goal { fill: var(--lime); stroke: var(--text); stroke-width: 2; }
.gc-lbl { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.ch-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.ch-days span { aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; border-radius: .6rem; font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ch-days span.done { background: var(--lime); color: var(--ink); border-color: transparent; }
.ch-days span.today { outline: 2px solid var(--text); outline-offset: 1px; }
.ch-days span.future { opacity: .55; }
.ch-marks { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .55rem; } .ch-marks .got { color: var(--text); font-weight: 700; }
.zoom-card { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.ms-todo { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .35rem; }
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1rem; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 1.5rem; line-height: 1; color: var(--line-2); cursor: pointer; padding: .1rem; }
html[dir="rtl"] .stars, .stars { direction: ltr; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #e0a526; }
.stars input:focus-visible + label { outline: 2px solid var(--text); border-radius: .3rem; }
.review-ask textarea { width: 100%; }
.push-card { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }

/* ---------- Quiz result: building screen, locked weeks, reviews ---------- */
.building { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding: 16px; transition: opacity .35s var(--ease); }
.building.out { opacity: 0; }
.building-box { width: min(100%, 26rem); text-align: center; }
.building-box h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: .8rem 0 1rem; }
.building-bar { height: .55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.building-bar i { display: block; height: 100%; width: 0; background: var(--lime-strong); animation: buildbar 3.6s var(--ease) forwards; }
@keyframes buildbar { to { width: 100%; } }
.building-steps { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; text-align: start; }
.building-steps li { color: var(--muted); padding-inline-start: 1.8rem; position: relative; transition: color .3s; }
.building-steps li::before { content: ''; position: absolute; inset-inline-start: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--line-2); }
.building-steps li.done { color: var(--text); font-weight: 600; }
.building-steps li.done::before { content: '✓'; background: var(--lime); border-color: var(--lime); color: var(--ink); font-size: .7rem; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .building-bar i { animation-duration: .6s; } }
.week-card { position: relative; overflow: hidden; }
.week-locked ul { filter: blur(4px); user-select: none; }
.week-lock { display: inline-flex; gap: .35rem; align-items: center; font-weight: 700; font-size: .85rem; color: var(--text); text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; justify-self: start; }
.week-lock svg { width: 1rem; height: 1rem; }
.reviews-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: .8rem; }
.review { margin: 0; display: grid; gap: .5rem; align-content: start; }
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.review-stars { color: #e0a526; letter-spacing: .1em; } .review-stars .dim { color: var(--line-2); }
.exit-offer { border: 0; border-radius: var(--r-lg); padding: 0; width: min(92vw, 26rem); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.exit-offer::backdrop { background: rgba(20, 18, 15, .55); }
.exit-box { padding: 1.6rem 1.4rem 1.3rem; text-align: center; display: grid; gap: .3rem; }
.exit-box h2 { margin: .3rem 0 0; }

/* ---------- Gift cards ---------- */
.gift-card-mini { display: grid; gap: .4rem; background: var(--ink); color: #f4eee4; border-radius: var(--r); padding: 1.3rem 1.2rem; aspect-ratio: 1.7; align-content: space-between; max-width: 100%; }
.gift-card-mini strong { font: 800 1.35rem var(--display); color: #fff; }
.gift-code-mini { justify-self: start; background: var(--lime); color: var(--ink); border-radius: .6rem; padding: .2rem .6rem; font-weight: 800; letter-spacing: .06em; }
.gift-big { background: var(--surface); border: 2px dashed var(--lime-strong); border-radius: var(--r-xl); padding: clamp(1.4rem, 5vw, 2.6rem); text-align: center; display: grid; gap: .5rem; justify-items: center; }
.gift-big h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); margin: 0; }
.gift-big blockquote { margin: 0; font-size: 1.15rem; font-style: italic; }
.free-band { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem, 4vw, 2.2rem); }
.free-band > div:first-child { min-width: 0; flex: 1 1 22rem; }
.review-admin.pending { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.review-admin textarea { width: 100%; }
.ms-week { background: var(--surface); border-radius: var(--r-sm); padding: .8rem .9rem; margin-bottom: .8rem; border: 1px solid var(--line); }

/* =====================================================================
   v6 · "alive": bolder type, a marker that draws itself, buttons that shine,
   floating stickers and banners. All motion stops under prefers-reduced-motion.
   ===================================================================== */
:root { --glow: color-mix(in srgb, var(--lime) 60%, transparent); --sticker-bg: var(--surface); }

/* Headings: heavier and tighter */
h1 { font-weight: 900; letter-spacing: -.028em; }
h2 { font-weight: 850; letter-spacing: -.022em; }
.display { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.02; }
.page-hero h1 { font-weight: 900; letter-spacing: -.03em; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }

/* Marker: thicker, slightly tilted; it draws from right to left when the line comes into view */
.hl, .display .hl, .tone-lime .hl, .tone-sand .hl, .tone-ink .hl {
  background-image: linear-gradient(174deg, transparent 0 52%, var(--marker) 52% 92%, transparent 92%) !important;
  background-position: 100% 0 !important;
}
.hl-anim h1 .hl, .hl-anim h2 .hl { background-size: 0% 100% !important; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .15s; }
.hl-anim h1 .hl.hl-on, .hl-anim h2 .hl.hl-on { background-size: 100% 100% !important; }

/* Hero: a hand-drawn squiggle under the highlighted words */
.display .hl { position: relative; display: inline-block; }
.display .hl::after {
  display: block !important; content: ''; position: absolute; inset-inline: -.1em; bottom: -.32em; height: .28em;
  background: var(--brown-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M2 14 C 30 2, 50 2, 70 12 S 110 22, 130 10 S 170 2, 198 12' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M2 14 C 30 2, 50 2, 70 12 S 110 22, 130 10 S 170 2, 198 12' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
  transform-origin: right; transform: scaleX(1);
}
:root[data-theme="dark"] .display .hl::after { background: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .display .hl::after { background: var(--lime); } }
.hl-anim .display .hl::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.65, 0, .35, 1) .9s; }
.hl-anim .display .hl.hl-on::after { transform: scaleX(1); }

/* Eyebrow: a small pill with a live dot */
.eyebrow { padding: .32rem .8rem .32rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--lime) 26%, transparent); color: var(--text) !important; font-weight: 700; border: 1px solid color-mix(in srgb, var(--lime-strong) 35%, transparent); }
.eyebrow::before { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lime-strong); opacity: 1; }
.tone-ink .eyebrow, .card-ink .eyebrow, .issues-band .eyebrow { color: var(--lime) !important; background: rgba(198, 227, 75, .1); }

/* Numbers: ink to brown, so they read like part of the brand */
.hero-meta .kpi, .today-kpis .kpi, .trick-score .kpi { background: linear-gradient(160deg, var(--text) 30%, var(--brown-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hero-meta .kpi { background-image: linear-gradient(160deg, #fff 30%, var(--lime)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-meta .kpi { background-image: linear-gradient(160deg, #fff 30%, var(--lime)); } }

/* Buttons: the lime button has depth, a glow on hover and a shine that sweeps across */
.btn-lime { background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 85%, #fff) 0%, var(--lime) 55%, var(--lime-strong) 130%); color: var(--ink); position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .6) inset; }
.btn-lime:hover { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 10px 26px -10px var(--glow); }
.btn-lime::after { content: ''; position: absolute; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); z-index: -1; pointer-events: none; opacity: 0; }
.btn-lime:hover::after { animation: shine .8s ease-out; }

/* Cards that are links lift and get a lime edge */
.card-link:hover { border-color: color-mix(in srgb, var(--lime-strong) 55%, transparent); }

/* Most popular plan: a soft lime glow that breathes */
.plan.highlight { box-shadow: 0 0 0 1px rgba(198, 227, 75, .35), 0 24px 50px -24px rgba(168, 201, 28, .55); }
.plan .ribbon { box-shadow: 0 6px 16px -6px rgba(168, 201, 28, .8); }

/* Floating stickers around the hero illustration */
.hero-stickers { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sticker { position: absolute; display: inline-flex; align-items: center; gap: .45rem; background: var(--sticker-bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: .5rem .9rem; font-weight: 800; font-family: var(--display); font-size: .95rem; box-shadow: var(--shadow); white-space: nowrap; }
.sticker .s-ic { font-size: 1.15rem; line-height: 1; }
.sticker.s1 { top: 6%; inset-inline-end: -4%; transform: rotate(4deg); }
.sticker.s2 { top: 40%; inset-inline-start: -8%; transform: rotate(-5deg); background: var(--ink); color: #fff; border-color: transparent; }
.sticker.s2 b { color: var(--lime); }
.sticker.s3 { bottom: 26%; inset-inline-end: -6%; transform: rotate(-3deg); background: var(--lime); color: var(--ink); border-color: transparent; }
@media (max-width: 700px) { .sticker { font-size: .8rem; padding: .4rem .7rem; } .sticker.s1 { inset-inline-end: 0; } .sticker.s2 { inset-inline-start: 0; } .sticker.s3 { inset-inline-end: 2%; } }

/* =================== Floating banners =================== */
.fl-x { all: unset; cursor: pointer; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; opacity: .7; flex: none; }
.fl-x:hover, .fl-x:focus-visible { opacity: 1; background: rgba(127, 127, 127, .18); }
.fl-x:focus-visible { outline: 2px solid currentColor; }
[data-float] { opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--spring); }
[data-float].fl-in { opacity: 1; }
[data-float].fl-out { opacity: 0; }

/* "Start for 29 ₪" pill, bottom center */
.fl-offer { position: fixed; z-index: 65; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translate(-50%, 140%); display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem .45rem .9rem; background: var(--ink); color: #f4eee4; border-radius: 999px; text-decoration: none; box-shadow: 0 18px 40px -16px rgba(20, 18, 15, .7), 0 0 0 1px rgba(255, 255, 255, .06); max-width: calc(100% - 2rem); overflow: hidden; isolation: isolate; }
.fl-offer.fl-in { transform: translate(-50%, 0); }
.fl-offer.fl-out { transform: translate(-50%, 140%); }
.fl-offer-tag { background: var(--lime); color: var(--ink); font-weight: 900; font-size: .8rem; padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; }
.fl-offer-txt { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fl-offer-txt b { color: var(--lime); font-weight: 900; }
.fl-offer-go { font-weight: 900; color: var(--lime); }
.fl-offer::after { content: ''; position: absolute; inset: 0 auto 0 -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); z-index: -1; pointer-events: none; }
.fl-offer:hover { color: #fff; }

/* Real activity note, bottom right */
.fl-proof { position: fixed; z-index: 64; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); inset-inline-start: 1rem; display: flex; align-items: center; gap: .6rem; padding: .6rem .6rem .6rem .9rem; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 1.1rem; box-shadow: var(--shadow-lg); max-width: min(21rem, calc(100% - 2rem)); transform: translateY(120%); }
.fl-proof.fl-in { transform: none; }
.fl-proof.fl-stack { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
.fl-proof-ic { width: 2.3rem; height: 2.3rem; border-radius: .8rem; background: var(--lime-soft); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.fl-proof-txt { font-weight: 700; font-size: .92rem; transition: opacity .2s; }
.fl-proof.fl-swap .fl-proof-txt, .fl-proof.fl-swap .fl-proof-ic { opacity: 0; }
.fl-live { width: .55rem; height: .55rem; border-radius: 50%; background: #2fbf5b; flex: none; box-shadow: 0 0 0 0 rgba(47, 191, 91, .5); }

/* Free course card that slides in, bottom left (above the accessibility button) */
.fl-free { position: fixed; z-index: 63; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); inset-inline-end: 1rem; width: min(19rem, calc(100% - 2rem)); display: grid; gap: .35rem; padding: 1.1rem 1.1rem 1rem; background: var(--surface); color: var(--text); border: 2px solid var(--lime-strong); border-radius: 1.3rem; box-shadow: var(--shadow-lg); transform: translateX(-120%) rotate(-2deg); }
.fl-free.fl-in { transform: rotate(-1.5deg); }
.fl-free .fl-x { position: absolute; top: .4rem; inset-inline-end: .4rem; }
.fl-free strong { font-family: var(--display); font-size: 1.2rem; }
.fl-free span { font-size: .9rem; color: var(--text-2); }
.fl-free .btn { margin-top: .4rem; }
.fl-free-badge { position: absolute; top: -.75rem; inset-inline-start: 1rem; background: var(--brown); color: #fff !important; font-weight: 900; font-size: .78rem !important; padding: .2rem .65rem; border-radius: 999px; transform: rotate(-4deg); }
html[dir="ltr"] .fl-free { transform: translateX(120%); }

/* Gift tag on the left edge */
.fl-gift { position: fixed; z-index: 62; top: 42%; inset-inline-end: 0; display: flex; align-items: center; gap: .4rem; padding: .6rem .5rem .6rem .9rem; background: var(--brown); color: #fff; font-weight: 800; text-decoration: none; border-radius: 0; border-start-start-radius: 1rem; border-end-start-radius: 1rem; box-shadow: var(--shadow-lg); transform: translateX(-110%); }
.fl-gift.fl-in { transform: none; }
.fl-gift:hover { color: #fff; padding-inline-end: .9rem; }
.fl-gift .fl-x { width: 1.3rem; height: 1.3rem; font-size: .9rem; }

/* In the app: days left of the first days, and the invite pill */
.fl-trial, .fl-invite { position: fixed; z-index: 58; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 50%; display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem .5rem .8rem; border-radius: 1.2rem; box-shadow: var(--shadow-lg); max-width: calc(100% - 2rem); transform: translate(-50%, 140%); }
.fl-trial.fl-in, .fl-invite.fl-in { transform: translate(-50%, 0); }
.fl-trial { background: var(--ink); color: #f4eee4; }
.fl-trial-ring { --p: 100; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); }
.fl-trial-ring b { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 1.05rem; color: var(--lime); }
.fl-trial-txt { font-size: .9rem; } .fl-trial-txt b { color: #fff; }
.fl-trial-go { background: var(--lime); color: var(--ink); font-weight: 800; border-radius: 999px; padding: .35rem .8rem; text-decoration: none; white-space: nowrap; }
.fl-invite { background: var(--lime); color: var(--ink); text-decoration: none; border: 1px solid color-mix(in srgb, var(--lime-strong) 60%, transparent); }
.fl-invite:hover { color: var(--ink); }
.fl-invite-ic { font-size: 1.5rem; }
.fl-invite b { display: block; font-size: .95rem; } .fl-sub { font-size: .8rem; opacity: .75; }
@media (max-width: 860px) {
  .fl-trial, .fl-invite { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
  .fl-offer-txt { font-size: .85rem; }
  .fl-gift { top: auto; bottom: 30%; }
}
@media (min-width: 861px) { .app-shell ~ .fl-trial, .app-shell ~ .fl-invite { left: calc(50% + 8rem); } }

/* =================== Motion (only for those who want it) =================== */
@keyframes shine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
@keyframes shineLoop { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.45rem; } }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 var(--glow); } 70% { box-shadow: 0 0 0 .55rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 91, .55); } 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes wiggle { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -6deg; } 94% { rotate: 5deg; } 97% { rotate: -3deg; } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(198, 227, 75, .35), 0 24px 50px -24px rgba(168, 201, 28, .45); } 50% { box-shadow: 0 0 0 1px rgba(198, 227, 75, .6), 0 28px 60px -20px rgba(168, 201, 28, .75); } }
@keyframes riseIn { from { opacity: 0; translate: 0 .8rem; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }
@media (prefers-reduced-motion: no-preference) {
  .display { animation: riseIn .8s var(--ease) both; }
  .hero .lead { animation: riseIn .8s var(--ease) .12s both; }
  .hero-actions { animation: riseIn .8s var(--ease) .22s both; }
  .eyebrow::before { animation: pulseDot 2.4s ease-out infinite; }
  .hero-art-wrap > svg.art, .page-hero .ph-art svg.art { animation: bob 5.5s ease-in-out infinite !important; }
  .sticker { animation: bob 4.6s ease-in-out infinite; }
  .sticker.s2 { animation-duration: 5.4s; animation-delay: -1.8s; }
  .sticker.s3 { animation-duration: 4.1s; animation-delay: -3s; }
  .hero-note { animation: wiggle 7s ease-in-out 2s infinite; }
  .btn-lime.btn-lg::after { opacity: 1; animation: shineLoop 4.5s ease-in-out 1.5s infinite; }
  .plan.highlight { animation: breathe 3.6s ease-in-out infinite; }
  .fl-offer::after { animation: shineLoop 5s ease-in-out 1s infinite; }
  .fl-offer.fl-in .fl-offer-tag { animation: wiggle 6s ease-in-out 1.5s infinite; }
  .fl-live { animation: liveDot 1.8s ease-out infinite; }
  .fl-gift.fl-in { animation: wiggle 6s ease-in-out 3s infinite; }
  .fl-invite.fl-in .fl-invite-ic, .fl-free.fl-in .fl-free-badge { animation: wiggle 5s ease-in-out 1s infinite; display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { [data-float] { transition: opacity .2s; } }

/* Fixes for v6: dark mode marker and button text, calmer phones */
.btn-lime, .btn-lime:hover, a.btn-lime, a.btn-lime:visited { color: var(--ink) !important; }
:root[data-theme="dark"] .hl { background-image: linear-gradient(174deg, transparent 0 56%, color-mix(in srgb, var(--lime) 42%, transparent) 56% 92%, transparent 92%) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { background-image: linear-gradient(174deg, transparent 0 56%, color-mix(in srgb, var(--lime) 42%, transparent) 56% 92%, transparent 92%) !important; } }
:root[data-theme="dark"] .sticker { --sticker-bg: #24201b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticker { --sticker-bg: #24201b; } }
@media (max-width: 700px) {
  /* One thing at a time on a phone: the start pill (leaving room for the accessibility button) and the activity note */
  .fl-free, .fl-gift { display: none !important; }
  .fl-offer { left: auto; inset-inline-start: .75rem; inset-inline-end: 4.6rem; transform: translateY(140%); justify-content: space-between; padding-inline: .5rem; gap: .45rem; }
  .fl-offer.fl-in { transform: none; } .fl-offer.fl-out { transform: translateY(140%); }
  .fl-offer-go { display: none; }
  .fl-proof { inset-inline-start: .75rem; inset-inline-end: .75rem; max-width: none; }
  .fl-proof.fl-stack { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }
  .sticker.s3 { display: none; }
}
@media (max-width: 860px) {
  .fl-trial, .fl-invite { left: auto; inset-inline: .75rem; transform: translateY(160%); }
  .fl-trial.fl-in, .fl-invite.fl-in { transform: none; }
  .fl-trial-txt { flex: 1; min-width: 0; }
  .fl-invite > span:nth-child(2) { flex: 1; min-width: 0; }
}
.fl-offer, .fl-trial, .fl-invite { width: max-content; }
@media (max-width: 860px) { .fl-trial, .fl-invite { width: auto; } }
@media (max-width: 700px) { .fl-offer { width: auto; } }
@media (max-width: 860px) { .fl-trial, .fl-invite { inset-inline-end: 4.6rem; } }
@media (max-width: 600px) { .goal-card { flex-wrap: wrap; } .goal-card > div { flex-basis: calc(100% - 3.2rem); } .goal-card > .row { margin-inline-start: auto; } }

/* =====================================================================
   Floating emblems: the Pacho badge as small medallions that drift slowly
   at different depths (near = sharp and solid, far = small, soft, faded).
   The mouse adds a light parallax (see app.js). Decorative only.
   ===================================================================== */
.marks { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; contain: layout paint; }
.hero > .container, .cta-band > :not(.marks), footer.site > .container, .auth-art > :not(.marks), .thanks > :not(.marks), .page-hero > :not(.marks) { position: relative; z-index: 1; }
footer.site { position: relative; overflow: hidden; }
.thanks { position: relative; isolation: isolate; }
.thanks .marks { inset: -2rem -8vw; overflow: visible; }
.mk {
  --s: 3rem; --o: .9; --b: 0px; --d: 16s; --r: 6deg; --depth: 1;
  position: absolute; width: var(--s); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; opacity: var(--o); filter: blur(var(--b));
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 70%);
  box-shadow: 0 0 0 1px rgba(90, 58, 34, .08), 0 .35rem 1rem -.3rem rgba(90, 58, 34, .28), inset 0 1px 0 #fff;
  transform: translate(calc(var(--px, 0) * var(--depth) * 1px), calc(var(--py, 0) * var(--depth) * 1px));
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.mk svg { width: 86%; height: 86%; display: block; }
.mk::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--lime-strong) 60%, transparent); opacity: .7; }

/* Hero: seven around the edges, never behind the headline */
.marks-hero .mk1 { --s: 3.4rem; --depth: 1.6; top: 9%; left: 4%; --d: 17s; }
.marks-hero .mk2 { --s: 2rem; --o: .45; --b: 1px; --depth: .5; top: 6%; left: 38%; --d: 21s; --r: -8deg; }
.marks-hero .mk3 { --s: 2.4rem; --o: .55; --b: .5px; --depth: .7; top: 4%; right: 3%; --d: 19s; }
.marks-hero .mk4 { --s: 4.6rem; --o: .22; --b: 3px; --depth: .3; bottom: 6%; right: 30%; --d: 24s; --r: 10deg; }
.marks-hero .mk5 { --s: 2.8rem; --depth: 1.3; bottom: 10%; left: 44%; --d: 15s; --r: -5deg; }
.marks-hero .mk6 { --s: 1.6rem; --o: .5; --b: .5px; --depth: .6; top: 52%; left: 1.5%; --d: 18s; }
.marks-hero .mk7 { --s: 2.2rem; --o: .75; --depth: 1.1; bottom: 4%; right: 6%; --d: 20s; --r: 8deg; }

/* Inner page headers: three quiet ones */
.marks-soft .mk { --o: .5; }
.marks-soft .mk1 { --s: 2.2rem; top: 12%; left: 34%; --d: 18s; --depth: .8; }
.marks-soft .mk2 { --s: 1.4rem; --o: .35; --b: .5px; bottom: 14%; left: 44%; --d: 22s; --depth: .5; }
.marks-soft .mk3 { --s: 3.4rem; --o: .16; --b: 2px; bottom: -10%; right: 40%; --d: 26s; --depth: .3; }

/* On dark backgrounds: lime ring, softer glow */
.marks-dark .mk { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 70%); box-shadow: 0 0 0 1px rgba(198, 227, 75, .35), 0 0 1.4rem -.4rem rgba(198, 227, 75, .45); }
.marks-dark .mk::after { border-color: rgba(198, 227, 75, .35); }
.marks-dark .mk1 { --s: 3rem; --o: .55; top: 8%; left: 6%; --d: 19s; --depth: 1.2; }
.marks-dark .mk2 { --s: 1.8rem; --o: .35; --b: .5px; top: 60%; left: 14%; --d: 23s; --depth: .6; }
.marks-dark .mk3 { --s: 4.2rem; --o: .14; --b: 2.5px; bottom: -6%; left: 34%; --d: 27s; --depth: .3; }
.marks-dark .mk4 { --s: 2.2rem; --o: .45; top: 14%; right: 38%; --d: 17s; --depth: .9; --r: -7deg; }
.marks-dark .mk5 { --s: 1.4rem; --o: .3; bottom: 18%; right: 8%; --d: 21s; --depth: .5; }

/* On the lime band */
.marks-band .mk { background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .7) 70%); }
.marks-band .mk::after { border-color: rgba(20, 18, 15, .25); }
.marks-band .mk1 { --s: 3rem; --o: .9; top: 12%; left: 5%; --d: 16s; --depth: 1.3; }
.marks-band .mk2 { --s: 1.8rem; --o: .55; bottom: 14%; left: 22%; --d: 20s; --depth: .7; }
.marks-band .mk3 { --s: 4rem; --o: .25; --b: 2px; top: -12%; left: 40%; --d: 25s; --depth: .3; }
.marks-band .mk4 { --s: 2.2rem; --o: .7; bottom: 10%; right: 46%; --d: 18s; --depth: 1; --r: -6deg; }

/* Dark theme: medallions turn into dark glass */
:root[data-theme="dark"] .marks-hero .mk, :root[data-theme="dark"] .marks-soft .mk, :root[data-theme="dark"] .thanks .mk { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 70%); box-shadow: 0 0 0 1px rgba(198, 227, 75, .3), 0 0 1.2rem -.5rem rgba(198, 227, 75, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marks-hero .mk, :root:not([data-theme="light"]) .marks-soft .mk, :root:not([data-theme="light"]) .thanks .mk { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 70%); box-shadow: 0 0 0 1px rgba(198, 227, 75, .3), 0 0 1.2rem -.5rem rgba(198, 227, 75, .5); } }

/* Phones: fewer and smaller, away from the text */
@media (max-width: 700px) {
  .marks-hero .mk2, .marks-hero .mk5, .marks-hero .mk6, .marks-soft .mk1, .marks-dark .mk4, .marks-band .mk4 { display: none; }
  .mk { --s: 2.2rem !important; }
  .marks-hero .mk4, .marks-soft .mk3, .marks-dark .mk3, .marks-band .mk3 { --s: 3rem !important; }
}

@keyframes markDrift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: .5rem -.9rem; rotate: calc(var(--r) * .5); }
  50% { translate: -.3rem -1.4rem; rotate: var(--r); }
  75% { translate: -.6rem -.5rem; rotate: calc(var(--r) * -.4); }
}
@keyframes markIn { from { opacity: 0; scale: .6; } to { opacity: var(--o); scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .mk { animation: markIn 1.2s cubic-bezier(.16, 1, .3, 1) both, markDrift var(--d) ease-in-out infinite; }
  .mk2 { animation-delay: .15s, -4s; } .mk3 { animation-delay: .3s, -9s; } .mk4 { animation-delay: .45s, -2s; }
  .mk5 { animation-delay: .6s, -12s; } .mk6 { animation-delay: .75s, -6s; } .mk7 { animation-delay: .9s, -15s; }
  .mk::after { animation: spinSlow 40s linear infinite; }
}
@keyframes spinSlow { to { rotate: 360deg; } }
/* Emblems: keep clear of the hero numbers and the footer links */
.marks-hero .mk4 { right: auto; left: 30%; bottom: -3%; }
.marks-hero .mk7 { right: 1.5%; bottom: 1.5%; --s: 1.9rem; }
footer.site .marks .mk { --o: .22 !important; }
footer.site .marks .mk1 { top: auto; bottom: 10%; }
.a11y-grid [data-sound-toggle] { grid-column: 1 / -1; flex-direction: row; justify-content: center; }

/* ---------- Course categories ---------- */
.cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; position: sticky; top: calc(env(safe-area-inset-top, 0px) + .5rem); z-index: 5; padding: .4rem 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
.cat-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cat-chip b { font-size: .75rem; background: var(--surface-2); border-radius: 999px; padding: .05rem .45rem; color: var(--muted); }
.cat-chip:hover, .cat-chip:focus-visible { border-color: var(--lime-strong); background: var(--lime-soft); color: var(--ink); }
.cat-section { scroll-margin-top: 5rem; }
.cat-section + .cat-section { margin-top: 2.4rem; }
.cat-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.cat-head h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.cat-ic { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--lime); display: grid; place-items: center; font-size: 1.5rem; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.cat-mini { font-size: 1rem; margin: 1.2rem 0 .5rem; display: flex; gap: .4rem; align-items: center; }
.cat-tag { display: inline-flex; gap: .3rem; align-items: center; font-size: .72rem; font-weight: 700; color: var(--muted); }
.cat-two { max-width: 52rem; }
@media (max-width: 700px) { .cat-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; } .cat-nav::-webkit-scrollbar { display: none; } .cat-chip { font-size: .88rem; padding: .4rem .75rem; } }

/* ---------- Icons instead of emoji, and an even gap after label colons ---------- */
.gl { display: inline-block; line-height: 0; vertical-align: -.18em; flex: none; color: inherit; width: auto !important; height: auto !important; align-self: center; }
.gl > svg.ic { width: 1.1em !important; height: 1.1em !important; display: block; vertical-align: 0; }
.gl + .gl { margin-inline-start: .15em; }
.tile .gl > svg.ic, .cat-ic .gl > svg.ic, .fl-proof-ic .gl > svg.ic, .goal-ic .gl > svg.ic, .s-ic .gl > svg.ic, .fl-invite-ic .gl > svg.ic, .cat-chip .gl > svg.ic { width: 1.2em !important; height: 1.2em !important; }
.choice b .gl > svg.ic { width: 1.4em !important; height: 1.4em !important; stroke-width: 1.6; }
.choice b .gl { color: var(--brown-2); margin-inline: auto; }
.choice input:checked + span b .gl { color: var(--ink); }
.badge-item .ic .gl > svg.ic { width: 1em !important; height: 1em !important; }
.cg { display: inline-block; width: .38em; }
[data-sound-toggle].muted .i { opacity: .4; }

/* Lesson videos: the trainer's video and the animated demo, one at a time */
.lesson-media{padding:.8rem;margin-bottom:1rem}
.lesson-media video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#0f1113}
.media-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.media-tabs button{flex:1;min-width:12rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .9rem;border-radius:999px;border:1px solid var(--line, rgba(0,0,0,.12));background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.media-tabs button.on{background:var(--lime,#c6e34b);color:#0f1113;border-color:transparent}
.media-tabs svg{width:1.1em;height:1.1em}

.media-tabs button.tab-classic.on{background:#8a5a35;color:#fff}
.classic-note{display:flex;gap:.5rem;align-items:flex-start;margin-top:.6rem;padding:.65rem .8rem;border-radius:12px;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.45)}
.classic-note svg{width:1.15em;height:1.15em;flex:none;margin-top:.15em;color:#a57d10}

/* Prep video: played before every viewing, can be skipped */
.prep-bar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;padding:.6rem .7rem;margin-bottom:.7rem;border-radius:14px;background:rgba(198,227,75,.14);border:1px solid rgba(198,227,75,.5)}
.prep-pane{margin-bottom:.7rem}
.prep-pane video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#0f1113;outline:3px solid var(--lime,#c6e34b)}
.prep-actions{display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:.5rem}
.lesson-media.prepping [data-media-pane],.lesson-media.prepping .media-tabs{opacity:.35;pointer-events:none}

/* Articles library */
.art-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0}
.art-tabs a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--card,#fff);font-weight:700;text-decoration:none;color:inherit}
.art-tabs svg{width:1.1em;height:1.1em}
.art-section{margin:1.6rem 0 2.2rem;scroll-margin-top:5rem}
.art-section-head h2{margin:0 0 .2rem}
.art-section-head p{margin:0 0 1rem}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
.art-card{display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:inherit;min-width:0;transition:transform .15s}
.art-card:hover{transform:translateY(-2px)}
.art-card h3{margin:.2rem 0 0;font-size:1.08rem;line-height:1.35}
.art-card p{margin:0}
.art-meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.art-meta svg{width:1em;height:1em;vertical-align:-.12em}
.art-cat{font-size:.75rem;font-weight:800;padding:.18rem .6rem;border-radius:999px}
.art-training{background:rgba(198,227,75,.25);color:#4c5a0d}
.art-kids{background:rgba(138,90,53,.16);color:#7a4c2b}
[data-theme="dark"] .art-training{color:#d9ef7c}[data-theme="dark"] .art-kids{color:#e3b48e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .art-training{color:#d9ef7c}:root:not([data-theme="light"]) .art-kids{color:#e3b48e}}
.art-more{margin-top:auto;font-weight:800;display:inline-flex;align-items:center;gap:.3rem}
.art-more svg{width:1em;height:1em}
.art-cta{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:1.2rem}
.art-cta > div{flex:1;min-width:14rem}
.art-hero-kids{background:linear-gradient(135deg,#3b2a1e,#5a3e29)}

/* Pet stores */
.store-filters{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.store-chips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.4rem}
.store-chips .chip{cursor:pointer;font:inherit}
.store-chips .chip[aria-pressed="true"]{background:var(--ink,#14120f);color:#fff;border-color:transparent}
.store-count{margin:.8rem 0}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.store-card{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.store-card.featured{border:2px solid var(--lime)}
.store-card h3{margin:.1rem 0 0;font-size:1.15rem}
.store-card svg{width:1em;height:1em;vertical-align:-.12em}
.store-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.store-kind{font-size:.75rem;font-weight:800;color:var(--muted,#6b6a63)}
.store-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.store-tags span{font-size:.75rem;padding:.15rem .55rem;border-radius:999px;background:rgba(198,227,75,.22)}
.store-deal{display:flex;gap:.4rem;align-items:flex-start;font-size:.85rem;padding:.5rem .65rem;border-radius:10px;background:rgba(138,90,53,.12)}
.store-actions{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.4rem}
.store-empty{text-align:center;margin-top:1rem}
.store-regions{display:flex;flex-wrap:wrap;gap:.4rem}
.store-regions a{padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:inherit;font-weight:700;font-size:.9rem}
.store-regions a.on{background:var(--ink,#14120f);color:#fff;border-color:transparent}
.store-regions b{font-variant-numeric:tabular-nums;opacity:.7;margin-inline-start:.2rem}
.store-form fieldset{border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin:0 0 .8rem}
.store-form legend{font-weight:800;padding:0 .4rem}
.store-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.4rem}

/* Admin: the Pacho logo in the corner instead of an initial */
.avatar-logo{background:transparent;padding:0;overflow:visible}
.avatar-logo svg,.avatar-logo img{width:100%;height:100%;display:block;border-radius:50%}

/* Documents */
.doc-list{display:flex;flex-direction:column;gap:.5rem}
.doc-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.6rem;border:1px solid var(--line);border-radius:14px}
.doc-row form{margin:0}
.doc-name{overflow-wrap:anywhere}

.price-existing{border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;margin:0}
.price-existing legend{padding:0 .3rem}
.retire{margin-top:-.4rem}

.news-item{margin-bottom:.8rem}

/* Locked courses: a lock in the corner and a button to open just this course */
.prog-card{position:relative}
.prog-lock{position:absolute;top:.8rem;inset-inline-start:.8rem;z-index:2;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--ink,#14120f);color:var(--lime,#c6e34b);box-shadow:0 .3rem .8rem rgba(0,0,0,.18)}
.prog-lock svg{width:1.15rem;height:1.15rem}
.prog-lock.open{background:var(--lime,#c6e34b);color:var(--ink,#14120f)}
.prog-card.is-locked .prog-art{filter:grayscale(.35) saturate(.8)}
.prog-buy{margin-top:.6rem;align-self:flex-start;display:inline-flex;gap:.35rem;align-items:center}
.prog-buy svg{width:1em;height:1em}

/* =========================================================
   הלהקה: the dog owners' community. Holographic layer.
   Iridescent palette on top of the Pacho tokens; every loop
   stops under prefers-reduced-motion.
   ========================================================= */
@property --holo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pack {
  --h-cyan: #5ee7df; --h-violet: #a98bff; --h-pink: #ff9ad5; --h-lime: var(--lime);
  --holo: conic-gradient(from var(--holo-a), var(--h-lime), var(--h-cyan), var(--h-violet), var(--h-pink), var(--h-lime));
  --night: #0b100e;
  display: grid; gap: 1rem; padding-bottom: 2rem;
}
.pack .h2 { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; margin: 0 0 .4rem; text-wrap: balance; }
.pack .h3 { font-family: var(--display); }
.pack .tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.pack .tags > span { font-size: .74rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.pack .tags > .t-breed { background: var(--lime-soft); border-color: transparent; }
.side-h { display: flex; align-items: center; gap: .45rem; font-family: var(--display); font-size: 1rem; margin: 0 0 .7rem; }
.side-h svg { width: 1.15rem; height: 1.15rem; color: var(--lime-strong); }
.opt-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .9rem; }
.opt-row .qlabel { min-width: 4.2rem; font-weight: 700; }
.opt-row .chip span { padding: .4rem .85rem; font-size: .85rem; }
.pill-wait, .pill-ok { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-wait svg, .pill-ok svg { width: 1rem; height: 1rem; }

/* ---------- Hero: a night field with floating dog holograms ---------- */
.pack-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
  min-height: 15.5rem; padding: 2.2rem clamp(1.2rem, 4vw, 2.6rem); display: flex; align-items: center;
  background: radial-gradient(120% 90% at 85% 0%, #1b2a1f 0%, transparent 55%), radial-gradient(80% 80% at 10% 100%, #1d1736 0%, transparent 60%), var(--night);
  color: #f2f7ea; box-shadow: var(--shadow-lg);
}
.pack-hero-text { position: relative; z-index: 3; max-width: 30rem; }
.pack-hero h1 { font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; margin: .6rem 0 .5rem; text-wrap: balance; color: #fff;
  text-shadow: 0 0 1.4rem rgba(94, 231, 223, .25); }
.pack-hero p { margin: 0; color: #cdd8c6; max-width: 34rem; }
.holo-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .8rem; border-radius: 999px;
  color: #eaffb0; background: rgba(198, 227, 75, .1); border: 1px solid rgba(198, 227, 75, .35); backdrop-filter: blur(6px); }
.holo-chip svg { width: .95rem; height: .95rem; }
.pack-hero-extra { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.holo-stat { font-size: .82rem; padding: .35rem .8rem; border-radius: .8rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #dfe8d6; }
.holo-stat b { color: var(--lime); font-size: 1rem; font-variant-numeric: tabular-nums; }
.holo-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.holo-field .orb { position: absolute; border-radius: 50%; filter: blur(2.6rem); opacity: .55; }
.holo-field .o1 { width: 16rem; height: 16rem; background: #3f7d3a; inset-inline-end: 8%; top: -6rem; }
.holo-field .o2 { width: 13rem; height: 13rem; background: #4a3b9a; inset-inline-end: 38%; bottom: -7rem; }
.holo-field .o3 { width: 9rem; height: 9rem; background: #1f7f7a; inset-inline-end: -2rem; bottom: 10%; }
.grid-floor { position: absolute; inset-inline: -20%; bottom: -1rem; height: 58%; transform-origin: bottom; transform: perspective(22rem) rotateX(62deg);
  background-image: linear-gradient(rgba(94, 231, 223, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 231, 223, .22) 1px, transparent 1px);
  background-size: 2.6rem 2.6rem; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
.holo-field .scan { position: absolute; inset-inline: 0; height: 30%; top: -30%; background: linear-gradient(to bottom, transparent, rgba(94, 231, 223, .08) 70%, rgba(198, 227, 75, .35) 99%, transparent); }
.holo-float { --s: 4.4rem; position: absolute; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.holo-float::before { content: ''; position: absolute; inset: -.22rem; border-radius: 50%; background: var(--holo); filter: drop-shadow(0 0 .5rem rgba(94, 231, 223, .55));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .2rem), #000 calc(100% - .19rem)); mask: radial-gradient(farthest-side, transparent calc(100% - .2rem), #000 calc(100% - .19rem)); }
.holo-float img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(1.15) contrast(1.05); opacity: .93; }
.holo-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .09) 0 1px, transparent 1px 3px), linear-gradient(135deg, rgba(94, 231, 223, .35), transparent 45%, rgba(169, 139, 255, .35)); }
.holo-float > svg { width: 45%; height: 45%; color: var(--h-cyan); }
.holo-float i { position: absolute; top: 100%; left: 50%; width: 70%; height: 2.4rem; translate: -50% .2rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(94, 231, 223, .35), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); opacity: .5; filter: blur(2px); }
.holo-float.hf0 { inset-inline-end: 7%; top: 18%; --s: 5.4rem; }
.holo-float.hf1 { inset-inline-end: 24%; top: 9%; --s: 4rem; }
.holo-float.hf2 { inset-inline-end: 19%; bottom: 14%; --s: 4.6rem; }
.holo-float.hf3 { inset-inline-end: 37%; top: 30%; --s: 3.4rem; }
.holo-float.hf4 { inset-inline-end: 2%; bottom: 8%; --s: 3.6rem; }
.holo-float.hf5 { inset-inline-end: 33%; bottom: 6%; --s: 3rem; }
.holo-float.hf6 { inset-inline-end: 47%; top: 8%; --s: 2.8rem; opacity: .75; }
.holo-float.ghost img { display: none; }
.holo-float.solo { position: relative; --s: 4rem; margin: 0 auto .8rem; background: var(--night); }
@media (max-width: 760px) {
  .pack-hero { align-items: flex-end; padding-top: 9.5rem; min-height: 0; }
  .holo-float { --s: 3.4rem !important; }
  .holo-float.hf0 { inset-inline-end: 6%; top: 1.4rem; } .holo-float.hf1 { inset-inline-end: 27%; top: 3.2rem; } .holo-float.hf2 { inset-inline-end: 48%; top: 1rem; }
  .holo-float.hf3 { inset-inline-end: 68%; top: 3.6rem; } .holo-float.hf4 { inset-inline-end: 86%; top: 1.2rem; } .holo-float.hf5, .holo-float.hf6 { display: none; }
  .holo-float i { height: 1.4rem; }
}

/* ---------- Tabs ---------- */
.pack-nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + .5rem); z-index: 20; display: flex; gap: .3rem; padding: .35rem; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pack-nav::-webkit-scrollbar { display: none; }
.pack-nav a { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--text-2); transition: background .2s, color .2s; }
.pack-nav a svg { width: 1.1rem; height: 1.1rem; }
.pack-nav a:hover { background: var(--surface-2); color: var(--text); }
.pack-nav a.on { background: var(--night); color: #eaffb0; box-shadow: 0 0 0 1px rgba(198, 227, 75, .35), 0 .4rem 1.2rem -.4rem rgba(94, 231, 223, .6); }
.pack-badge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: #ff5d73; color: #fff; font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pack-nav .pack-badge { position: absolute; top: .05rem; inset-inline-end: .2rem; }
@media (max-width: 560px) { .pack-nav a { padding: .5rem .7rem; } .pack-nav a span:not(.pack-badge) { font-size: .8rem; } }

/* ---------- Cards with an iridescent edge ---------- */
.holo-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem; box-shadow: var(--shadow); min-width: 0; }
.holo-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: var(--holo); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.holo-card:hover::before, .holo-card:focus-within::before, .me-card::before, .profile-hero::before { opacity: .75; }
.pack-grid { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr) 16.5rem; grid-template-areas: 'a m b'; gap: 1rem; align-items: start; }
.pack-grid > .pack-side:first-child { grid-area: a; } .pack-grid > .pack-main { grid-area: m; } .pack-grid > .pack-side:last-child { grid-area: b; }
.pack-side { display: grid; gap: 1rem; align-content: start; }
.pack-main, .pack-col { display: grid; gap: 1rem; min-width: 0; }
.pack-col { max-width: 42rem; width: 100%; margin-inline: auto; }
.pack { container-type: inline-size; container-name: pack; }
@container pack (max-width: 1180px) { .pack-grid { grid-template-columns: minmax(0, 1fr) 17rem; grid-template-rows: auto 1fr; grid-template-areas: 'm a' 'm b'; } }
@container pack (max-width: 760px) { .pack-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'm' 'b' 'a'; } .pack-grid .me-card { display: none; } }

/* ---------- Avatars: the dog in front, the owner tucked in ---------- */
.duo { --d: 3rem; position: relative; display: inline-block; width: calc(var(--d) * 1.18); height: var(--d); flex-shrink: 0; }
.duo-s { --d: 2.4rem; } .duo-l { --d: 5.2rem; }
.duo .av { position: absolute; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.duo .av img { width: 100%; height: 100%; object-fit: cover; }
.duo .av-dog { inset-inline-start: 0; top: 0; width: var(--d); height: var(--d); }
.duo .av-owner { width: calc(var(--d) * .48); height: calc(var(--d) * .48); inset-inline-end: 0; bottom: -2%; border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.av-empty { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; font-family: var(--display); color: var(--brown); background: linear-gradient(135deg, var(--lime-soft), var(--brown-soft)); }
.av-empty svg { width: 50%; height: 50%; }
.holo-ring { position: relative; overflow: visible !important; }
.holo-ring > img, .holo-ring > .av-empty { border-radius: 50%; }
.holo-ring::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--holo); z-index: -1; }
.duo .holo-ring { z-index: 0; isolation: isolate; }
.duo .av-dog.holo-ring { padding: 0; }
.duo .av-dog.holo-ring > * { position: relative; z-index: 1; }

/* ---------- Side column ---------- */
.me-card { display: grid; justify-items: center; text-align: center; gap: .35rem; text-decoration: none; color: inherit; padding-top: 1.4rem;
  background: radial-gradient(90% 60% at 50% 0%, var(--lime-soft), transparent 70%), var(--surface); }
.me-card:hover { color: inherit; }
.near-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .25rem; }
.near-list a { display: flex; align-items: center; gap: .6rem; padding: .35rem; border-radius: .9rem; text-decoration: none; color: inherit; }
.near-list a:hover { background: var(--surface-2); color: inherit; }
.near-list a > span:last-child, .post-who > span, .fr-who > span, .fr-row > span { display: grid; line-height: 1.3; min-width: 0; }
.mini-meet { display: flex; gap: .7rem; align-items: center; padding: .5rem; border-radius: 1rem; text-decoration: none; color: inherit; }
.mini-meet:hover { background: var(--surface-2); color: inherit; }
.mini-meet > span:last-child { display: grid; line-height: 1.3; min-width: 0; }
.mm-date { display: grid; place-items: center; width: 2.9rem; height: 3.1rem; border-radius: .8rem; background: var(--night); color: #cfe0c4; font-size: .7rem; line-height: 1.1; flex-shrink: 0; }
.mm-date b { font-size: 1.15rem; color: var(--lime); font-family: var(--display); }
.map-teaser { overflow: hidden; display: grid; justify-items: center; gap: .2rem; padding: 1.6rem 1rem; text-decoration: none; color: #eef6e4; background: var(--night); border-color: transparent; }
.map-teaser:hover { color: #fff; }
.map-teaser > svg { width: 2rem; height: 2rem; color: var(--lime); position: relative; z-index: 1; filter: drop-shadow(0 0 .6rem rgba(198, 227, 75, .8)); }
.map-teaser strong, .map-teaser span { position: relative; z-index: 1; }
.mt-glow { position: absolute; inset: 0; background-image: linear-gradient(rgba(94, 231, 223, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 231, 223, .16) 1px, transparent 1px); background-size: 1.4rem 1.4rem;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%); }
.mt-glow::after { content: ''; position: absolute; left: 50%; top: 42%; width: 1rem; height: 1rem; margin: -.5rem; border-radius: 50%; box-shadow: 0 0 0 0 rgba(198, 227, 75, .6); }

/* ---------- Composer ---------- */
.composer { display: grid; gap: .7rem; }
.composer-top { display: flex; gap: .7rem; align-items: flex-start; }
.composer textarea { flex: 1; min-width: 0; border: 0; background: var(--surface-2); border-radius: 1.1rem; padding: .75rem 1rem; resize: vertical; font: inherit; color: inherit; min-height: 3.2rem; }
.composer textarea:focus { outline: 2px solid var(--lime-strong); outline-offset: 1px; }
.composer-bar { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.composer-bar .btn { margin-inline-start: auto; }
.chip-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; user-select: none; }
.chip-btn svg { width: 1.05rem; height: 1.05rem; }
.chip-btn:hover { background: var(--surface-2); }
.chip-btn.on, .chip-btn:has(input:checked) { background: var(--night); color: #eaffb0; border-color: var(--night); }
.chip-btn:focus-within { outline: 2px solid var(--lime-strong); outline-offset: 2px; }
.composer-preview { position: relative; border-radius: 1rem; overflow: hidden; max-height: 18rem; }
.composer-preview img { width: 100%; max-height: 18rem; object-fit: cover; display: block; }
.composer-preview button { position: absolute; top: .5rem; inset-inline-end: .5rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.2rem; cursor: pointer; }
.composer-meet { display: flex; gap: .6rem; flex-wrap: wrap; padding: .8rem; border-radius: 1rem; background: var(--lime-soft); }

/* ---------- Posts ---------- */
.post { display: grid; gap: .75rem; padding: 1rem 1.1rem; scroll-margin-top: 5rem; }
.post:target { animation: targetGlow 1.6s var(--ease); }
@keyframes targetGlow { 0%, 40% { box-shadow: 0 0 0 3px var(--lime), var(--shadow); } }
.post-head { display: flex; align-items: center; gap: .6rem; }
.post-who { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.post-who:hover { color: inherit; }
.post-menu { position: relative; }
.post-menu summary { list-style: none; cursor: pointer; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu summary:hover { background: var(--surface-2); }
.post-menu summary svg { width: 1.1rem; height: 1.1rem; }
.post-menu-box { position: absolute; inset-inline-end: 0; top: 2.4rem; z-index: 30; width: 15rem; display: grid; gap: .5rem; padding: .7rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.post-menu-box form { display: grid; gap: .4rem; margin: 0; }
.post-menu-box input { font: inherit; font-size: .85rem; padding: .45rem .7rem; border-radius: .7rem; border: 1px solid var(--line-2); background: var(--surface-2); color: inherit; }
.post-menu-box button { font: inherit; font-size: .88rem; font-weight: 600; padding: .5rem .7rem; border-radius: .7rem; border: 0; background: var(--surface-2); color: inherit; cursor: pointer; text-align: start; }
.post-menu-box button:hover { background: var(--brown-soft); }
.post-menu-box button.danger { color: var(--err); }
.post-body { margin: 0; white-space: pre-line; font-size: 1.02rem; overflow-wrap: anywhere; }
.post-img { margin: 0 -1.1rem; overflow: hidden; background: var(--surface-2); }
.post-img img { width: 100%; max-height: 34rem; object-fit: cover; display: block; }
.post-actions { display: flex; align-items: center; gap: 1rem; }
.post-actions form { margin: 0; }
.post-actions .small { display: inline-flex; align-items: center; gap: .3rem; }
.post-actions .small svg { width: 1rem; height: 1rem; }
.like { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, transform .2s var(--spring); }
.like svg { width: 1.15rem; height: 1.15rem; transition: transform .35s var(--spring); }
.like:hover { background: var(--surface-2); }
.like.on { background: var(--night); color: var(--lime); border-color: var(--night); }
.like.on svg { transform: rotate(-12deg) scale(1.12); filter: drop-shadow(0 0 .35rem rgba(198, 227, 75, .7)); }
.like.pop { animation: likePop .45s var(--spring); }
@keyframes likePop { 40% { transform: scale(1.18); } }
.comments { list-style: none; margin: 0; padding: .7rem .9rem; display: grid; gap: .4rem; background: var(--surface-2); border-radius: 1rem; font-size: .92rem; }
.comments li { overflow-wrap: anywhere; }
.comments a { text-decoration: none; }
.comment-form { display: flex; gap: .4rem; }
.comment-form input { flex: 1; min-width: 0; font: inherit; font-size: .92rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: inherit; }
.comment-form input:focus { outline: 2px solid var(--lime-strong); outline-offset: 1px; }

/* Meetup ticket */
.meet-ticket { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .85rem 1rem; border-radius: 1.1rem; position: relative;
  background: linear-gradient(120deg, var(--lime-soft), color-mix(in srgb, var(--h-cyan) 18%, var(--surface))); border: 1.5px dashed color-mix(in srgb, var(--lime-strong) 60%, transparent); }
.meet-ticket form { margin: 0; }
.meet-ic { width: 2.8rem; height: 2.8rem; border-radius: .9rem; display: grid; place-items: center; background: var(--night); color: var(--lime); flex-shrink: 0; }
.meet-ic svg { width: 1.35rem; height: 1.35rem; }
.meet-tag { font-weight: 800; letter-spacing: .06em; color: var(--brown-2); }
.meet-going { font-size: .82rem; color: var(--text-2); } .meet-going b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ---------- People ---------- */
.filter-bar { display: grid; gap: .8rem; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.person { display: grid; gap: .6rem; justify-items: center; text-align: center; align-content: start; }
.person-top { display: grid; justify-items: center; gap: .2rem; text-decoration: none; color: inherit; padding-top: .3rem; }
.person-top:hover { color: inherit; }
.person-top .duo { margin-bottom: .35rem; transition: transform .35s var(--spring); }
.person:hover .person-top .duo { transform: translateY(-.25rem) rotate(-3deg); }
.person-act { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: auto; }
.person-act form { margin: 0; }

/* ---------- Profile ---------- */
.profile-hero { display: flex; gap: clamp(1rem, 4vw, 2.4rem); align-items: center; flex-wrap: wrap; padding: clamp(1.2rem, 4vw, 2rem); overflow: visible; }
.ph-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ph-glow::before { content: ''; position: absolute; width: 22rem; height: 22rem; inset-inline-start: -6rem; top: -8rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--h-cyan) 30%, transparent), transparent 65%); }
.ph-photos { position: relative; width: 11rem; height: 10rem; flex-shrink: 0; margin-inline: auto; }
.ph-dog, .ph-owner { position: absolute; border-radius: 50%; display: grid; place-items: center; }
.ph-dog { width: 9.5rem; height: 9.5rem; inset-inline-start: 0; top: 0; isolation: isolate; }
.ph-dog::after { inset: -5px; }
.ph-dog > img, .ph-dog > .av-empty { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.ph-owner { width: 4.6rem; height: 4.6rem; inset-inline-end: 0; bottom: 0; overflow: hidden; border: 3px solid var(--surface); box-shadow: var(--shadow); z-index: 2; }
.ph-owner img { width: 100%; height: 100%; object-fit: cover; }
.ph-text { flex: 1 1 18rem; min-width: 0; display: grid; gap: .5rem; position: relative; }
.ph-text .tags { justify-content: flex-start; }
.ph-text .small svg { width: 1rem; height: 1rem; vertical-align: -.15rem; }
.ph-bio { margin: 0; font-size: 1.05rem; color: var(--text-2); }
.ph-act { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.ph-act form { margin: 0; }
.hello-form { display: flex; gap: .5rem; flex-wrap: wrap; width: 100%; }
.hello-form input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: .92rem; padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: inherit; }
.ph-menu { position: absolute; top: .8rem; inset-inline-end: .8rem; }

/* ---------- Friends and chat ---------- */
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fr-req { display: flex; gap: .7rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .6rem; border-radius: 1rem; background: var(--lime-soft); }
.fr-req form { margin: 0; }
.fr-who, .fr-row { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.fr-who:hover, .fr-row:hover { color: inherit; }
.fr-row { padding: .55rem; border-radius: 1rem; }
.fr-row:hover { background: var(--surface-2); }
.fr-msg { font-size: .88rem; color: var(--text-2); font-style: italic; }
.fr-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-pack { text-align: center; padding: 1rem 0 .4rem; }
.chat { display: grid; gap: .7rem; max-width: 44rem; width: 100%; margin-inline: auto; }
.chat-head { display: flex; align-items: center; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.chat-head .btn svg { transform: scaleX(-1); }
[dir="ltr"] .chat-head .btn svg { transform: none; }
.chat-log { display: flex; flex-direction: column; gap: .35rem; height: min(58vh, 34rem); overflow-y: auto; padding: .4rem .2rem; overscroll-behavior: contain; }
.chat-empty { margin: auto; text-align: center; max-width: 20rem; }
.bubble { max-width: 78%; align-self: flex-end; display: grid; gap: .1rem; padding: .55rem .9rem; border-radius: 1.2rem 1.2rem 1.2rem .35rem; background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; white-space: pre-line; animation: msg-in .3s var(--ease); }
.bubble.mine { align-self: flex-start; border-radius: 1.2rem 1.2rem .35rem 1.2rem; background: var(--night); color: #eef6e4; border-color: transparent; }
.bubble time { opacity: .6; }
.chat-form { display: flex; gap: .5rem; }
.chat-form input { flex: 1; min-width: 0; font: inherit; padding: .75rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: inherit; }
.chat-form input:focus { outline: 2px solid var(--lime-strong); outline-offset: 1px; }
.chat-form .btn { padding-inline: 1rem; }
.chat-form .btn svg { width: 1.2rem; height: 1.2rem; transform: scaleX(-1); }

/* ---------- Me / join form ---------- */
.pack-form { display: grid; gap: 1rem; max-width: 44rem; width: 100%; margin-inline: auto; }
.pick-row { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.pick { display: grid; justify-items: center; gap: .2rem; cursor: pointer; }
.pick-img { position: relative; width: 7rem; height: 7rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); isolation: isolate; transition: transform .3s var(--spring); }
.pick:not(:has(.holo-ring)) .pick-img { overflow: hidden; border: 2px dashed var(--line-2); }
.pick-img > img, .pick-img > .av-empty { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; }
.pick-img::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 2; background: rgba(11, 16, 14, .45) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h3l2-3h8l2 3h3v11H3z'/><circle cx='12' cy='13' r='3.5'/></svg>") center / 2rem no-repeat; opacity: 0; transition: opacity .2s; }
.pick:hover .pick-img, .pick:focus-within .pick-img { transform: scale(1.04); }
.pick:hover .pick-img::before, .pick:focus-within .pick-img::before { opacity: 1; }
.pick:focus-within { outline: 2px solid var(--lime-strong); outline-offset: 4px; border-radius: 1rem; }
.pick.picked .xs { color: var(--ok); font-weight: 700; }
.holo-btn { position: relative; overflow: hidden; justify-self: center; min-width: 14rem; box-shadow: 0 0 0 1px rgba(198, 227, 75, .5), 0 .8rem 2rem -.8rem rgba(94, 231, 223, .9); }
.holo-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%); translate: -120% 0; }
[data-geo].is-on { background: var(--night); color: var(--lime); }

/* ---------- Rules and teaser ---------- */
.rules { gap: .8rem; }
.rule { display: flex; gap: 1rem; align-items: flex-start; }
.rule-n { position: absolute; inset-inline-end: 1rem; top: .5rem; font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--line-2); }
.rule-ic { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; flex-shrink: 0; background: var(--night); color: var(--lime); box-shadow: 0 0 1.2rem -.3rem rgba(94, 231, 223, .7); }
.rule-ic svg { width: 1.4rem; height: 1.4rem; }
.rule > div { padding-inline-end: 2.4rem; }
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.teaser-item { display: grid; gap: .4rem; justify-items: start; }

/* ---------- Map ---------- */
.map-wrap { display: grid; gap: .8rem; padding: 1rem; }
.map-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.map-head .btn svg { width: 1rem; height: 1rem; }
.pack-map { height: min(68vh, 40rem); min-height: 22rem; border-radius: 1.2rem; overflow: hidden; background: #dfe7dc; z-index: 0; }
.pin-wrap { background: none !important; border: 0 !important; }
.pin { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; }
.pin img { width: 82%; height: 82%; border-radius: 50%; object-fit: cover; position: relative; z-index: 2; border: 2px solid #fff; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .35); }
.pin-paw { position: relative; z-index: 2; width: 82%; height: 82%; display: grid; place-items: center; border-radius: 50%; background: #0b100e; font-size: 1.1rem; border: 2px solid #fff; }
.pin-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--holo-a), #c6e34b, #5ee7df, #a98bff, #ff9ad5, #c6e34b); z-index: 1; }
.pin-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(94, 231, 223, .4); z-index: 0; }
.pin-me .pin-ring { background: #c6e34b; } .pin-me .pin-pulse { background: rgba(198, 227, 75, .55); }
.pin-meet { background: #0b100e; color: #fff; font-size: 1.2rem; border: 2px solid #a98bff; box-shadow: 0 0 1rem rgba(169, 139, 255, .8); }
.pin-meet .pin-pulse { background: rgba(169, 139, 255, .45); }
.pin-pop { display: grid; gap: .15rem; font-family: var(--font); direction: rtl; text-align: right; min-width: 9rem; }
.pin-pop strong { font-size: 1rem; } .pin-pop span { color: #555; font-size: .82rem; }
.pin-pop a { margin-top: .3rem; font-weight: 700; color: #3f5a00; }
.pin-pop em { margin-top: .3rem; font-style: normal; font-weight: 700; color: #3f5a00; }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content-wrapper { border-radius: 1rem; }

/* ---------- Motion (only for people who are fine with it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .holo-float { animation: holoBob 6s ease-in-out infinite; }
  .holo-float::before, .holo-ring::after, .pin-ring { animation: holoSpin 5s linear infinite; }
  .holo-float img { animation: holoFlicker 7s steps(1) infinite; }
  .holo-float.hf1 { animation-delay: -1.2s; animation-duration: 7s; } .holo-float.hf2 { animation-delay: -2.5s; animation-duration: 6.5s; }
  .holo-float.hf3 { animation-delay: -3.7s; animation-duration: 8s; } .holo-float.hf4 { animation-delay: -.6s; animation-duration: 5.5s; }
  .holo-float.hf5 { animation-delay: -4.4s; } .holo-float.hf6 { animation-delay: -2s; animation-duration: 9s; }
  .holo-float.hf1 img { animation-delay: -3s; } .holo-float.hf3 img { animation-delay: -5s; }
  .holo-field .orb { animation: drift 16s ease-in-out infinite; } .holo-field .o2 { animation-delay: -6s; } .holo-field .o3 { animation-delay: -11s; }
  .grid-floor { animation: floorRun 3.2s linear infinite; }
  .holo-field .scan { animation: scanDown 5.5s cubic-bezier(.5, 0, .5, 1) infinite; }
  .holo-card::before { animation: holoSpin 6s linear infinite; }
  .pin-pulse { animation: pinPulse 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
  .pin { animation: pinDrop .6s var(--spring) both; animation-delay: var(--d, 0s); }
  .mt-glow::after { animation: pulseDot 2s infinite; --glow: rgba(198, 227, 75, .7); }
  .holo-btn::before { animation: holoSweep 3.8s ease-in-out 1s infinite; }
  .person, .rule, .teaser-item { animation: riseIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
  .pack-badge { animation: wiggle 4s ease-in-out infinite; }
}
@keyframes holoSpin { to { --holo-a: 360deg; } }
@keyframes holoBob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -.7rem; rotate: 3deg; } }
@keyframes holoFlicker { 0%, 100% { opacity: .93; } 61% { opacity: .55; } 62% { opacity: .95; } 64% { opacity: .7; } 65% { opacity: .93; } }
@keyframes floorRun { to { background-position: 0 2.6rem, 0 0; } }
@keyframes scanDown { 0% { top: -30%; } 60%, 100% { top: 110%; } }
@keyframes pinPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes pinDrop { from { transform: translateY(-1.2rem) scale(.6); opacity: 0; } }
@keyframes holoSweep { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }
.pack-promo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: var(--r); text-decoration: none; color: #eef6e4; box-shadow: var(--shadow);
  background: radial-gradient(80% 140% at 100% 0%, #1b2a1f, transparent 60%), radial-gradient(60% 120% at 0% 100%, #231a40, transparent 60%), #0b100e; }
.pack-promo:hover { color: #fff; }
.pack-promo > * { position: relative; z-index: 1; }
.pp-ic { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; background: rgba(198, 227, 75, .12); color: #c6e34b; box-shadow: 0 0 1.2rem -.2rem rgba(94, 231, 223, .6); flex-shrink: 0; }
.pp-ic svg { width: 1.5rem; height: 1.5rem; }
.pp-t { display: grid; flex: 1; min-width: 0; } .pp-t .small { color: #c4d0bc; }
.pp-go svg { width: 1.3rem; height: 1.3rem; transform: scaleX(-1); color: #c6e34b; }
.pack-promo .mt-glow { position: absolute; z-index: 0; }
.pack-map.tiles-off, .pack-map { background: radial-gradient(70% 60% at 60% 40%, #16261d, #0b100e 75%); }
.pack-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(rgba(94, 231, 223, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 231, 223, .07) 1px, transparent 1px); background-size: 3rem 3rem; }
.pack-map .leaflet-tile-pane { z-index: 200; }
.pack-map .leaflet-pane.leaflet-marker-pane, .pack-map .leaflet-popup-pane { z-index: 600; }
.city-lbl span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 600 .7rem var(--font); color: rgba(220, 240, 225, .55); letter-spacing: .02em; text-shadow: 0 0 .4rem #0b100e; }
.city-lbl.big span { font-size: .85rem; color: rgba(234, 255, 176, .85); font-weight: 700; }
.leaflet-container .leaflet-control-attribution { font-size: .62rem; }
.leaflet-container .leaflet-marker-pane .pin img { width: 82% !important; height: 82% !important; }
.pack-map .leaflet-pane svg { max-width: none !important; max-height: none !important; }
.pin-meet svg { width: 50%; height: 50%; color: #c9b8ff; position: relative; z-index: 2; }
.pin-paw svg { width: 55%; height: 55%; color: #c6e34b; }
@media (max-width: 420px) { .pack-nav a { padding: .5rem .55rem; gap: .25rem; } }
@media (max-width: 520px) {
  .pack-nav { border-radius: 1.4rem; gap: .15rem; overflow: visible; }
  .pack-nav a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: .1rem; padding: .45rem .2rem; border-radius: 1.1rem; }
  .pack-nav a span:not(.pack-badge) { font-size: .72rem; line-height: 1.1; }
  .pack-nav .pack-badge { top: .1rem; inset-inline-end: calc(50% - 1.5rem); }
}
.comm-stats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1100px) { .comm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .comm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quick-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.pack-promo .mt-glow::after { display: none; }
.pack-promo .pp-go svg { transform: none; }
[dir="ltr"] .pack-promo .pp-go svg { transform: scaleX(-1); }
/* Unread badge on the menu, and the "confirm your email" bar */
.side-nav a { position: relative; }
.nav-badge { margin-inline-start: auto; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #ff5d73; color: #fff; font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.tabbar a { position: relative; }
.nav-dot { position: absolute; top: .35rem; inset-inline-end: calc(50% - 1rem); width: .6rem; height: .6rem; border-radius: 50%; background: #ff5d73; box-shadow: 0 0 0 2px var(--ink); }
.verify-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--r); background: var(--lime-soft); border: 1px solid color-mix(in srgb, var(--lime-strong) 45%, transparent); }
.vb-ic { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; background: var(--ink); color: var(--lime); flex-shrink: 0; }
.vb-ic svg { width: 1.2rem; height: 1.2rem; }
.vb-t { display: grid; flex: 1; min-width: 12rem; line-height: 1.35; }
.pending-card { max-width: 34rem; width: 100%; margin-inline: auto; display: grid; gap: 1rem; justify-items: center; text-align: center; }
.pc-who { display: flex; align-items: center; gap: .9rem; text-align: start; }
.pc-who > div { display: grid; line-height: 1.35; }
.pc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; text-align: start; width: 100%; max-width: 22rem; }
.pc-steps li { display: flex; align-items: center; gap: .65rem; color: var(--muted); }
.pc-steps li span { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; }
.pc-steps li span svg { width: 1rem; height: 1rem; }
.pc-steps li.done { color: var(--text); } .pc-steps li.done span { background: var(--ok-soft); color: var(--ok); }
.pc-steps li.now { color: var(--text); font-weight: 700; } .pc-steps li.now span { background: var(--night, #0b100e); color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 35%, transparent); }
.pc-note { width: 100%; padding: .8rem 1rem; border-radius: 1rem; background: var(--warn-soft); text-align: start; }
.adult-row { display: grid; gap: .6rem; padding: .9rem 1rem; border-radius: 1rem; background: var(--surface-2); margin-top: .9rem; }
@media (prefers-reduced-motion: no-preference) { .pc-steps li.now span { animation: pulseDot 2s infinite; --glow: rgba(198, 227, 75, .55); } }
.pend-grid { display: grid; gap: .9rem; }
.pend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: .9rem; border-radius: 1.1rem; background: var(--surface-2); border: 1px solid var(--line); }
.pend-photos { display: flex; gap: .5rem; }
.pend-photos span { display: grid; gap: .2rem; justify-items: center; }
.pend-photos img, .pend-photos i { width: 6.5rem; height: 6.5rem; border-radius: 1rem; object-fit: cover; display: grid; place-items: center; background: var(--surface); font-size: .75rem; color: var(--muted); font-style: normal; border: 1px dashed var(--line-2); }
.pend-photos small { font-size: .72rem; color: var(--muted); }
.pend-info { display: grid; gap: .35rem; min-width: 0; }
.pend-info strong { font-size: 1.05rem; }
.pend-age { justify-self: start; font-size: .8rem; font-weight: 800; padding: .15rem .6rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.pend-age.bad { background: var(--err-soft); color: var(--err); }
.pend-info dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; margin: 0; font-size: .85rem; }
.pend-info dt { color: var(--muted); } .pend-info dd { margin: 0; overflow-wrap: anywhere; }
.pend-act { display: grid; gap: .5rem; justify-items: stretch; }
.pend-act form { margin: 0; }
@media (max-width: 900px) { .pend { grid-template-columns: 1fr; } .pend-act { grid-auto-flow: column; justify-content: start; } }
.media-stat { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; border-color: var(--warn); }
.media-stat.ok { border-color: var(--lime-strong); }
.ms-num { display: grid; justify-items: center; min-width: 6rem; } .ms-num b { font: 800 2.4rem/1 var(--display); font-variant-numeric: tabular-nums; } .ms-num span { color: var(--muted); font-size: .85rem; }
.ms-bar { height: .7rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: .5rem 0; } .ms-bar i { display: block; height: 100%; background: var(--lime-strong); border-radius: inherit; }
.ms-missing { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 16rem; overflow: auto; } .ms-missing code { font-size: .78rem; background: var(--surface-2); padding: .15rem .45rem; border-radius: .4rem; }

/* ---------- "אני לא רובוט": drag the bone to the dog ---------- */
.humancheck { margin: .2rem 0 1rem; }
.hc-track { position: relative; height: 3.4rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.hc-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 55%, transparent), var(--lime)); }
[dir=rtl] .hc-fill { background: linear-gradient(270deg, color-mix(in srgb, var(--lime) 55%, transparent), var(--lime)); }
.hc-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: .95rem; color: var(--muted); pointer-events: none; padding-inline: 3.6rem; text-align: center; transition: opacity .2s; }
.hc-goal { position: absolute; inset-block: 0; inset-inline-end: .55rem; width: 2.5rem; display: grid; place-items: center; color: var(--brown-2); }
.hc-goal svg { width: 1.6rem; height: 1.6rem; fill: currentColor; animation: hc-wag 2.4s var(--ease) infinite; }
.hc-knob { position: absolute; top: 4px; inset-inline-start: 4px; width: 3.4rem; height: calc(3.4rem - 10px); border-radius: 999px; border: 0; background: var(--ink); color: var(--lime); display: grid; place-items: center; cursor: grab; box-shadow: 0 .4rem 1rem -.4rem rgba(20, 18, 15, .55); z-index: 1; }
.hc-knob:active { cursor: grabbing; }
.hc-knob:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.hc-status { min-height: 1.3rem; margin-top: .35rem; color: var(--muted); }
.humancheck.is-working .hc-knob svg { animation: hc-spin .8s linear infinite; }
.humancheck.is-ok .hc-track { border-color: var(--lime-strong); }
.humancheck.is-ok .hc-knob { background: var(--lime); color: var(--ink); cursor: default; }
.humancheck.is-ok .hc-goal { color: var(--ink); }
.humancheck.is-ok .hc-goal svg { animation: hc-pop .5s var(--spring); }
.humancheck.is-ok .hc-status { color: var(--ok); font-weight: 600; }
.humancheck.shake .hc-track { animation: hc-shake .4s; border-color: var(--err); }
.hc-trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes hc-wag { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@keyframes hc-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes hc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .hc-goal svg, .humancheck.is-ok .hc-goal svg, .humancheck.shake .hc-track { animation: none; } }

/* ---------- Protected lesson player + the practice report that opens the next lesson ---------- */
.vid-guard { position: relative; border-radius: inherit; overflow: hidden; background: #000; }
.vid-guard video { display: block; width: 100%; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.vid-guard:fullscreen, .vid-guard:-webkit-full-screen { display: grid; place-items: center; width: 100%; height: 100%; }
.vid-guard:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
.vid-mark { position: absolute; top: 12%; inset-inline-start: 10%; padding: .15rem .5rem; border-radius: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .42); background: rgba(20, 18, 15, .18); pointer-events: none; user-select: none; transition: top 2.5s var(--ease), inset-inline-start 2.5s var(--ease); direction: ltr; z-index: 2; }
.practice { border: 2px solid var(--lime-strong); }
.practice.is-waiting { border-color: var(--line-2); }
.practice.is-waiting .practice-form { opacity: .55; }
.practice.is-open { animation: hc-pop .5s var(--spring); }
.practice fieldset { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.practice fieldset legend { padding: 0; margin-bottom: .45rem; }
.practice .btn { margin-top: .9rem; }
.lesson-list .lesson-wait { display: flex; align-items: center; gap: .9rem; padding: .8rem .6rem; opacity: .62; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .vid-mark { transition: none; } .practice.is-open { animation: none; } }

/* ---------- Course subscriptions: pick courses + the course track ---------- */
.choose-card { display: flex; flex-direction: column; gap: .4rem; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.choose-card.is-picked { border-color: var(--lime-strong); }
.choose-card .prog-art { height: 7rem; }
.choose-num { width: auto; min-width: 6.2rem; padding: .45rem .6rem; border-radius: .8rem; font-weight: 700; }
.course-track { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; }
.course-step { display: flex; align-items: center; gap: 1rem; }
.course-step .n { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); border: 1px solid var(--line-2); }
.course-step.is-open .n { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.course-step.is-done .n { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.course-step.is-waiting { opacity: .7; }
/* Five monthly plans: one row on wide screens, three plus two in the middle, then one column */
@media (min-width: 1180px) { .plans.plans-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; } .plans.plans-n5 .plan { padding-inline: 1.1rem; } }
@media (min-width: 760px) and (max-width: 1179px) { .plans.plans-n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .plans.plans-n5 > * { grid-column: span 2; } .plans.plans-n5 > :nth-child(4) { grid-column: 2 / span 2; } }