/* Jamz Flow: forest & heartwood. Shared by every page and by the Studio preview. */

/* ---------- self-hosted fonts (no Google dependency) ---------- */
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* more self-hosted families, chosen in Studio (a font only downloads when a page actually uses it) */
@font-face { font-family: "Estedad"; src: url("fonts/estedad-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Estedad"; src: url("fonts/estedad-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Shabnam"; src: url("fonts/shabnam-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Shabnam"; src: url("fonts/shabnam-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Sahel"; src: url("fonts/sahel-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Sahel"; src: url("fonts/sahel-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Samim"; src: url("fonts/samim-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Samim"; src: url("fonts/samim-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("fonts/naskh-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("fonts/dmserif-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- palette ---------- */
:root {
  /* Logo colors; the original eight palette tokens remain available below. */
  --brand-green: #123323; --copper: #C9773A; --copper-light: #E2A16F;
  --accent: var(--bark); --accent-ink: var(--sapwood); --focus: var(--bark);
  --night: #051008; --canopy: #123323; --moss: #32553D; --heartwood: #4C2613;
  --bark: #63351B; --oak: #A1744D; --mist: #D9D9D9; --sapwood: #FFE4CD;
  --paper: #FFF6EE;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 64ch;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  /* typographic rhythm (Latin defaults) */
  --lh-body: 1.6; --lh-head: 1.12; --lh-title: 1.04; --track-head: -0.025em; --track-title: -0.035em;
}
:root:lang(fa) { --font: "Vazirmatn", Tahoma, sans-serif; --lh-body: 1.85; --lh-head: 1.5; --lh-title: 1.4; --track-head: 0; --track-title: 0; }
:root:lang(ar) { --font: "IBM Plex Sans Arabic", "Vazirmatn", Tahoma, sans-serif; --lh-body: 1.85; --lh-head: 1.5; --lh-title: 1.4; --track-head: 0; --track-title: 0; }

body.theme-forest {
  --bg: var(--brand-green); --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood);
  --soft: rgba(255, 228, 205, .74); --faint: rgba(255, 228, 205, .76);
  --line: rgba(201, 119, 58, .3); --card: rgba(5, 16, 8, .38); --card-line: rgba(255, 228, 205, .12);
  --accent: var(--copper-light); --accent-ink: var(--night); --focus: var(--copper-light); --chip: rgba(5, 16, 8, .45);
  color-scheme: dark;
}
body.theme-paper {
  --bg: var(--paper); --fg: var(--canopy); --head: var(--canopy); --sub: var(--heartwood);
  --soft: #32553D; --faint: var(--moss);
  --line: rgba(99, 53, 27, .22); --card: #fff; --card-line: rgba(99, 53, 27, .18);
  --accent: var(--bark); --accent-ink: var(--sapwood); --focus: var(--bark); --chip: rgba(201, 119, 58, .12);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: clamp(16px, .9vw + 12.5px, 18px);
  line-height: var(--lh-body); overflow-x: hidden;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
:lang(fa) body, :lang(ar) body { font-size: clamp(16.5px, .9vw + 13px, 18.5px); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .25em; }
p { margin: 0; }
p + p { margin-top: .85em; }
strong, b { font-weight: 650; }
::selection { background: var(--copper); color: var(--night); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow .wrap, .wrap.narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; transform: translateY(-200%); top: 8px; background: var(--sapwood); color: var(--night); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { transform: none; }

/* headings */
.sec h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 680; margin: 0 0 .45em; max-width: 24ch; color: var(--head); }
.sec h3 { font-size: 1.15em; line-height: 1.35; letter-spacing: calc(var(--track-head) / 2); font-weight: 640; margin: 0 0 .35em; color: var(--sub); }
:lang(fa) .sec h3, :lang(ar) .sec h3 { line-height: 1.6; }
.intro { color: var(--soft); max-width: var(--measure); margin: 0 0 clamp(28px, 4vw, 44px); }
.body { max-width: var(--measure); }
.body p { color: var(--soft); }
.body p.lead-p { color: var(--fg); }

/* section shells */
.sec { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.sec.tight { padding-block: clamp(36px, 5vw, 64px); }
.bg-canopy { background: linear-gradient(180deg, var(--bg), var(--canopy) 22%, var(--canopy) 78%, var(--bg)); }
body.theme-paper .bg-canopy { background: var(--canopy); --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.8); --line: rgba(201, 119, 58,.35); --card: rgba(5,16,8,.3); --card-line: rgba(255,228,205,.14); --chip: rgba(5,16,8,.4); color: var(--fg); }
.bg-wood {
  background: repeating-linear-gradient(92deg, rgba(255,228,205,.025) 0 2px, transparent 2px 9px),
              radial-gradient(120% 140% at 85% 0%, var(--bark), var(--heartwood) 60%, #3a1d0e);
  --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.84); --line: rgba(255,228,205,.3); color: var(--fg);
}
.bg-night { background: var(--night); --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.74); color: var(--fg); }
.bg-paper { background: var(--paper); --fg: var(--canopy); --head: var(--canopy); --sub: var(--heartwood); --soft: #32553D; --line: rgba(99,53,27,.22); --card: #fff; --card-line: rgba(99,53,27,.18); color: var(--fg); }
.divided + .divided { border-top: 1px solid var(--line); }

/* paper pages read like a document: narrower column, calmer rhythm */
body.theme-paper .wrap { max-width: 860px; }
body.theme-paper .sec { padding-block: clamp(40px, 6vw, 76px); }
body.theme-paper .sec + .sec:not(.bg-canopy):not(.bg-wood):not(.bg-night) { border-top: 1px solid var(--line); }
body.theme-paper .sec h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--bg) 60%, transparent); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 620; }
.mark svg { width: 28px; height: 28px; flex: none; }
.mark .jf { width: 36px; height: 36px; border-radius: 50%; flex: none; transition: transform .5s cubic-bezier(.22,.8,.2,1); }
.mark:hover .jf { transform: translateY(-1px) rotate(-3deg); }
.nav { display: flex; gap: 22px; margin-inline-start: auto; }
.nav a { text-decoration: none; color: var(--soft); font-size: .92em; transition: color .2s; }
.nav a:hover { color: var(--fg); }
.lang { position: relative; }
.nav + .lang { margin-inline-start: 0; }
.top .lang:only-of-type { margin-inline-start: auto; }
.lang select { appearance: none; -webkit-appearance: none; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 30px 6px 14px; font: inherit; font-size: .88em; cursor: pointer; }
:dir(rtl) .lang select { padding: 6px 14px 6px 30px; }
.lang::after { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--copper); border-bottom: 1.5px solid var(--copper); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lang select option { background: var(--canopy); color: var(--sapwood); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 620; line-height: 1.4; border: 1px solid var(--copper); color: var(--fg); transition: background .25s, color .25s, border-color .25s, transform .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { background: var(--copper); color: var(--night); border-color: var(--copper); }
.btn.primary:hover { background: var(--copper-light); border-color: var(--copper-light); }
.btn.ghost:hover { background: rgba(201, 119, 58, .16); }
.btn:active { transform: scale(.98); }
.bg-wood .btn { border-color: rgba(255,228,205,.5); }
.bg-wood .btn.primary { color: var(--night); }
.bg-wood .btn.primary:hover { background: var(--night); color: var(--sapwood); border-color: var(--night); }
body.theme-paper .sec:not(.bg-canopy):not(.bg-wood):not(.bg-night) .btn.primary { background: var(--canopy); color: var(--sapwood); border-color: var(--canopy); }

/* ---------- hero: split ---------- */
.hero { padding-block: clamp(36px, 7vh, 88px) clamp(64px, 11vh, 128px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero.no-visual .wrap { grid-template-columns: minmax(0, 1fr); }
.eyebrow { color: var(--accent); font-weight: 500; margin: 0 0 18px; max-width: 48ch; }
.hero h1, .cover h1 { font-size: clamp(2.35rem, 5.4vw, 4.5rem); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: 720; margin: 0 0 24px; max-width: 15ch; color: var(--head); }
:lang(fa) .hero h1, :lang(ar) .hero h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 17ch; }
.lead { color: var(--soft); max-width: 46ch; margin: 0 0 32px; font-size: 1.08em; }
.visual { position: relative; width: 100%; max-width: 520px; justify-self: end; margin: 0; }
.visual.rings svg { display: block; aspect-ratio: 1; height: auto; }
.visual svg { width: 100%; height: 100%; overflow: visible; }
.visual img { width: 100%; border-radius: 22px; object-fit: cover; }
.visual figcaption { margin-top: 10px; font-size: .82em; line-height: 1.6; color: var(--faint); }
.visual.rings figcaption { text-align: center; margin: clamp(16px, 2.4vw, 28px) auto 0; max-width: 36ch; text-wrap: balance; }

/* ---------- hero: cover ---------- */
.cover { background: radial-gradient(130% 120% at 0% 0%, var(--moss), var(--canopy) 55%, var(--night)); color: var(--sapwood); position: relative; overflow: hidden; --head: var(--sapwood); }
.cover .wrap { padding-block: clamp(48px, 9vw, 104px) clamp(40px, 7vw, 80px); position: relative; z-index: 1; }
.cover .deco { position: absolute; inset-inline-start: -140px; top: -120px; width: 520px; height: 520px; opacity: .5; pointer-events: none; }
.cover .eyebrow { color: rgba(255, 228, 205, .82); }
.cover h1 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); max-width: 19ch; }
.cover .lead { color: rgba(255, 228, 205, .88); max-width: 54ch; margin-bottom: 0; }
.cover .meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 30px; font-size: .9em; color: rgba(255, 228, 205, .72); }

/* ---------- features ---------- */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.feat .f { padding-block: 26px; border-top: 1px solid var(--line); }
.feat .f p { color: var(--soft); max-width: 50ch; }
.feat .ico { width: 22px; height: 22px; margin-bottom: 14px; color: var(--accent); }
.feat.layout-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.feat.layout-list .f { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 0; border: 0; align-items: start; }
.feat.layout-list .f p, .feat.layout-bullets .f p { max-width: var(--measure); }
.feat.layout-list .ico { width: 44px; height: 44px; padding: 11px; margin: 0; border-radius: 12px; background: var(--canopy); color: var(--sapwood); }
.feat.layout-bullets { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.feat.layout-bullets .f { padding: 0 0 0; padding-inline-start: 28px; border: 0; position: relative; }
.feat.layout-bullets .f::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }
.feat.layout-bullets h3 { display: inline; font-size: 1em; }
.feat.layout-bullets h3::after { content: " "; }
.feat.layout-bullets p { display: inline; }

/* ---------- projects ---------- */
.project { padding-block: 44px; border-top: 1px solid var(--card-line); }
.p-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); }
.project:last-of-type { border-bottom: 1px solid var(--card-line); }
.project h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 660; }
:lang(fa) .project h3, :lang(ar) .project h3 { letter-spacing: 0; line-height: 1.55; }
.project.size-feature h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.project.size-small { padding-block: 30px; }
.project .ctx { color: var(--accent); margin: 0 0 16px; font-size: .95em; }
.project .shot { margin-top: 20px; border-radius: 14px; border: 1px solid var(--card-line); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.tags li { font-size: .78em; line-height: 1.5; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--soft); border: 1px solid var(--card-line); }
.tags li.live { color: var(--night); background: var(--copper); border-color: var(--copper); }
.project dl { margin: 0; display: grid; gap: 18px; }
.project dt { font-size: .82em; color: var(--accent); font-weight: 620; margin-bottom: 2px; }
.project dd { margin: 0; color: var(--soft); max-width: var(--measure); }
.project .catch { padding: 14px 18px; border-inline-start: 3px solid var(--copper); background: var(--card); border-start-end-radius: 10px; border-end-end-radius: 10px; color: var(--fg); }
.project .more { display: inline-block; margin-top: 18px; color: var(--fg); font-weight: 620; }
.stack { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; color: var(--soft); }
.stack strong { color: var(--fg); margin-inline-end: 6px; }
.stack span { white-space: nowrap; }
@media (min-width: 901px) { .p-main > .p-head { position: sticky; top: 96px; align-self: start; } }

/* ---------- note ---------- */
.note { padding: 20px 24px; border-radius: 14px; border: 1px dashed var(--line); color: var(--soft); max-width: 72ch; }
.note strong { color: var(--fg); }
body.theme-paper .note { border: 0; border-inline-start: 3px solid var(--copper); background: rgba(201, 119, 58, .1); border-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; font-size: .94em; }
.after-note { margin-top: 24px; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--copper), var(--moss)); opacity: .55; }
.timeline li { position: relative; padding-inline-start: 44px; padding-bottom: 30px; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 20px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--copper); background: var(--bg); }
.timeline li.now::before { background: var(--copper); box-shadow: 0 0 0 6px rgba(201, 119, 58, .18); }
.timeline .lbl { color: var(--accent); font-weight: 620; font-variant-numeric: tabular-nums; }
.timeline li p { color: var(--soft); max-width: 58ch; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; position: relative; max-width: 72ch; }
.steps::before { content: ""; position: absolute; inset-inline-start: 17px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--copper), var(--moss)); opacity: .5; }
.steps li { counter-increment: s; position: relative; padding-inline-start: 56px; padding-bottom: 24px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: .1em; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--copper); color: var(--sub); font-weight: 700; font-size: .95em; line-height: 1; }
:lang(ar) .steps li::before { content: counter(s, arabic-indic); }
.steps li:last-child::before { background: var(--canopy); border-color: var(--canopy); color: var(--sapwood); }
.steps li p { color: var(--soft); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 20px 22px; }
.card p { color: var(--soft); font-size: .95em; }
.card.wide { grid-column: 1 / -1; background: var(--canopy); border-color: var(--canopy); --fg: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.84); color: var(--fg); }
.card .hl { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-line); color: var(--fg); }
.card.wide .hl { border-color: rgba(255,228,205,.28); }

/* ---------- duo (two complementary sides) ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 26px 0; max-width: 820px; }
.duo .side { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 18px 20px; }
.duo .side p { color: var(--soft); font-size: .95em; }
.duo .join { display: grid; place-items: center; color: var(--accent); font-size: 1.6em; }

/* ---------- image ---------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: 18px; border: 1px solid var(--card-line); }
.figure.w-normal { max-width: 820px; }
.figure figcaption { margin-top: 10px; color: var(--faint); font-size: .88em; }

/* ---------- contact ---------- */
.contact h2 { max-width: 20ch; }
.channels { display: flex; flex-wrap: wrap; gap: 12px; }
.sign { margin-top: 36px; font-size: .94em; color: var(--soft); white-space: pre-line; }

/* ---------- footer ---------- */
.foot {
  position: relative; padding-block: 30px; color: rgba(255, 228, 205, .72); font-size: .86em; line-height: 1.7;
  /* modern wood slats: thin vertical boards with soft shading and a warm light sweeping across */
  background:
    linear-gradient(90deg, rgba(255,228,205,.07), rgba(255,228,205,0) 30%, rgba(255,228,205,0) 70%, rgba(255,228,205,.05)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, rgba(255,228,205,.05) 1px 2px, rgba(0,0,0,0) 2px 15px, rgba(0,0,0,.08) 15px 22px),
    linear-gradient(180deg, #4C2613, #3a1d0e 60%, #2f170b);
  border-top: 1px solid rgba(255,228,205,.08);
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- motion: one orchestrated entrance ---------- */
.rise { opacity: 0; transform: translateY(14px); }
.ready .rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 120ms + 250ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.no-motion .rise, .preview .rise { opacity: 1; transform: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rise { opacity: 1; transform: none; } .ready .rise { animation: none; } }


/* ---------- growth motion (reduced-motion and Studio preview turn it off) ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.014) rotate(.6deg); } }
@keyframes drift { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: var(--o, .5); } 85% { opacity: var(--o, .5); } 100% { transform: translate3d(var(--x, 12px), -260px, 0); opacity: 0; } }
@keyframes sprout { from { transform: scale(0); } to { transform: scale(1); } }

/* rings breathe slowly once drawn */
.js-rings.breathe { transform-origin: 53% 48%; animation: breathe 7s ease-in-out infinite alternate; }

/* drifting seeds / pollen in the hero */
.hero { overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.seeds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.seeds i { position: absolute; bottom: -10px; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: var(--sapwood); box-shadow: 0 0 8px rgba(255, 228, 205, .45); animation: drift var(--t, 18s) linear var(--d, 0s) infinite; opacity: 0; }
.seeds i:nth-child(3n) { background: var(--copper); box-shadow: 0 0 8px rgba(201, 119, 58, .5); }

/* stems grow down the timeline and the steps */
.js-motion .timeline::before, .js-motion .steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.3, .6, .2, 1); }
.js-motion .timeline.in::before, .js-motion .steps.in::before { transform: scaleY(1); }
.js-motion .timeline li::before, .js-motion .steps li::before { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--n, 0) * 180ms + 250ms); }
.js-motion .timeline.in li::before, .js-motion .steps.in li::before { transform: scale(1); }

/* a small sprout opens beside "now" */
.sprout { display: inline-block; width: 26px; height: 26px; vertical-align: -6px; margin-inline-start: 6px; overflow: visible; }
.sprout path { fill: none; stroke: var(--moss); stroke-width: 2; stroke-linecap: round; }
.sprout .leaf { fill: rgba(50, 85, 61, .55); stroke: #5d8a68; transform-box: fill-box; }
.sprout .l1 { transform-origin: 0% 100%; } .sprout .l2 { transform-origin: 100% 100%; }
:dir(rtl) .sprout { transform: scaleX(-1); }
.js-motion .sprout .stem { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .sprout .leaf { transform: scale(0); }
.js-motion .timeline.in .sprout .stem { animation: draw .8s ease-out 1.7s forwards; }
.js-motion .timeline.in .sprout .l1 { animation: sprout .7s cubic-bezier(.3, 1.6, .5, 1) 2.3s forwards; }
.js-motion .timeline.in .sprout .l2 { animation: sprout .7s cubic-bezier(.3, 1.6, .5, 1) 2.55s forwards; }

/* principle icons are drawn line by line */
.js-motion .feat .ico.drawable * { transition: stroke-dashoffset 1.1s cubic-bezier(.3, .6, .2, 1) var(--dl, 0s); }
.js-motion .feat .f.in .ico.drawable * { stroke-dashoffset: 0 !important; }

/* proposal cover rings draw in */
.cover .deco circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s cubic-bezier(.3, .6, .2, 1) calc(var(--k, 0) * 140ms + 100ms) forwards; }

.preview .seeds, .preview .sprout .leaf, .no-motion .seeds { display: none; }
.preview .cover .deco circle { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .seeds { display: none; }
  .js-rings.breathe { animation: none; }
  .js-motion .timeline::before, .js-motion .steps::before, .js-motion .timeline li::before, .js-motion .steps li::before { transform: none; transition: none; }
  .js-motion .sprout .stem { stroke-dashoffset: 0; } .js-motion .sprout .leaf { transform: none; }
  .cover .deco circle { animation: none; stroke-dashoffset: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :lang(ar) .hero h1 { max-width: none; font-size: clamp(1.5rem, 6.7vw, 2rem); text-wrap: balance; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .visual { order: -1; max-width: 300px; justify-self: center; }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .p-main { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 680px) {
  .nav { display: none; }
  .top .wrap { justify-content: space-between; }
  .top .lang { margin-inline-start: auto; }
  .timeline li { grid-template-columns: minmax(0, 1fr); padding-inline-start: 36px; }
  .visual { max-width: 220px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo .join { transform: rotate(90deg); }
}
@media print {
  .top, .lang { display: none; }
  .cover, .bg-wood, .bg-canopy, .card.wide { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sec { break-inside: avoid; }
  .rise { opacity: 1; transform: none; animation: none; }
}

/* cursor light + dust (sizes, colors and motion are set from Studio via site.js) */
.glow {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; border-radius: 50%;
  opacity: 0; transition: opacity 1.2s ease; will-change: transform;
}
.glow.on { opacity: 1; }
.glow-blob { animation: blob 14s ease-in-out infinite alternate; }
@keyframes blob {
  0% { border-radius: 52% 48% 46% 54% / 50% 56% 44% 50%; }
  50% { border-radius: 40% 60% 58% 42% / 56% 42% 58% 44%; }
  100% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; }
}
.dust { position: fixed; inset: 0; z-index: 59; pointer-events: none; }
/* ---------- alive: content of every section arrives softly ---------- */
.js-motion .alive { opacity: 0; transform: translateY(18px); transition: opacity .8s ease calc(var(--ai, 0) * 90ms + 60ms), transform .9s cubic-bezier(.22,.8,.2,1) calc(var(--ai, 0) * 90ms + 60ms); }
.js-motion .seen .alive { opacity: 1; transform: none; }
.preview .alive { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .js-motion .alive { opacity: 1; transform: none; transition: none; } }
/* small living details: buttons breathe on hover, links grow an underline, cards lift */
.btn { transition: transform .35s cubic-bezier(.22,.8,.2,1), box-shadow .35s, background-color .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.sec .card, .sec .f { transition: transform .45s cubic-bezier(.22,.8,.2,1), box-shadow .45s; }
@media (hover: hover) { .sec .card:hover, .sec .f:hover { transform: translateY(-3px); } }
@media (hover: none), (prefers-reduced-motion: reduce) { .glow, .dust { display: none; } }
@media print { .glow, .dust { display: none; } }

/* ---------- videos: thumbnails ---------- */
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px 16px; margin-top: 22px; }
.vthumb, .th-item { all: unset; cursor: pointer; display: block; position: relative; -webkit-tap-highlight-color: transparent; }
.vcover { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(5,16,8,.55);
  box-shadow: 0 1px 0 rgba(255,228,205,.06) inset, 0 10px 28px -16px rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.22,.8,.2,1), box-shadow .6s; }
.vcover img, .vcover video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.8,.2,1), filter .6s; }
.vph { position: absolute; inset: 0; background: radial-gradient(120% 120% at 20% 0%, var(--moss), var(--canopy) 60%, var(--night)); }
.vplay { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--night);
  background: rgba(255,228,205,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
  transition: transform .5s cubic-bezier(.22,.8,.2,1), background .4s; }
.vplay svg { width: 22px; height: 22px; margin-inline-start: 3px; }
[dir="rtl"] .vplay svg { margin-inline-start: 0; margin-inline-end: -3px; }
.vtitle { display: block; margin-top: 10px; font-size: .9em; line-height: 1.6; color: var(--fg, inherit);
  opacity: 0; transform: translateY(-6px); filter: blur(3px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.2,1), filter .55s; }
.vthumb:hover .vcover, .vthumb:focus-visible .vcover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.75); }
.vthumb:hover .vcover img, .vthumb:hover .vcover video { transform: scale(1.04); }
.vthumb:hover .vplay, .vthumb:focus-visible .vplay { transform: scale(1.08); background: var(--sapwood); }
.vthumb:hover .vtitle, .vthumb:focus-visible .vtitle, .th-item:hover .vtitle, .th-item:focus-visible .vtitle, .th-item.on .vtitle { opacity: 1; transform: none; filter: none; }
.vthumb:focus-visible .vcover, .th-item:focus-visible .vcover { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: none) { .vtitle { opacity: 1; transform: none; filter: none; } }
.project .vids { margin-top: clamp(26px, 3vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.vcover { background: radial-gradient(120% 120% at 20% 0%, var(--moss), var(--canopy) 60%, var(--night)); }
.vcover img.broken { visibility: hidden; }
.timeline .vids { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

/* ---------- videos: theater ---------- */
.theater { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.theater.open { visibility: visible; pointer-events: auto; }
.theater-lock, .theater-lock body { overflow: hidden; }
.th-veil { position: absolute; inset: 0; background: rgba(5,16,8,.42); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0; transition: opacity .6s ease; }
.theater.open .th-veil { opacity: 1; }
.theater.closing .th-veil { opacity: 0; transition-duration: .45s; }
.th-stage { position: absolute; transform-origin: 0 0; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,228,205,.08), 0 40px 120px -30px rgba(0,0,0,.85); }
.th-screen { aspect-ratio: 16 / 9; background: #000; }
.th-screen video, .th-screen iframe { width: 100%; height: 100%; display: block; border: 0; background: #000; }
.th-stage:fullscreen { border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.th-stage:fullscreen .th-screen { aspect-ratio: auto; flex: 1; }
.th-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--sapwood);
  background: linear-gradient(180deg, rgba(18,51,35,.96), rgba(5,16,8,.98)); font-size: .92em; }
.th-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.th-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.th-tools button { all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--sapwood); transition: background .3s; }
.th-tools button:hover, .th-tools button:focus-visible { background: rgba(255,228,205,.12); }
.th-tools svg { width: 20px; height: 20px; }
.th-open { color: var(--accent); font-size: .88em; margin-inline-end: 6px; }
.th-more { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 5vw 22px; opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease .18s, transform .7s cubic-bezier(.22,.8,.2,1) .18s; }
.theater.open .th-more { opacity: 1; transform: none; }
.theater.closing .th-more { opacity: 0; transform: translateY(14px); transition-delay: 0s; transition-duration: .3s; }
.th-more p { margin: 0 0 10px; color: rgba(255,228,205,.75); font-size: .82em; letter-spacing: .02em; }
.th-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.th-item { flex: 0 0 auto; width: clamp(130px, 16vw, 190px); scroll-snap-align: center; }
.th-item .vcover { border-radius: 10px; opacity: .62; transition: opacity .4s, transform .5s cubic-bezier(.22,.8,.2,1); }
.th-item .vplay { width: 34px; height: 34px; } .th-item .vplay svg { width: 15px; height: 15px; }
.th-item:hover .vcover, .th-item.on .vcover { opacity: 1; transform: translateY(-2px); }
.th-item.on .vcover { box-shadow: 0 0 0 2px var(--copper); }
.th-item .vtitle { color: var(--sapwood); font-size: .78em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .th-stage { border-radius: 12px; } .th-more { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { .th-veil, .th-more, .vcover, .vtitle, .vplay { transition: none !important; } }
@media print { .theater { display: none; } }

/* ---------- Studio layout overrides ---------- */
.sec.pad-x { padding-top: var(--pad-top, clamp(56px, 8vw, 112px)); padding-bottom: var(--pad-bottom, clamp(56px, 8vw, 112px)); }
.sec.w-x > .wrap { max-width: var(--wrap-max); }
.sec.al-center .wrap { text-align: center; }
.sec.al-center .wrap h2, .sec.al-center .intro, .sec.al-center .body, .sec.al-center .lead, .sec.al-center .eyebrow, .sec.al-center .note { margin-inline: auto; }
.sec.al-center .actions, .sec.al-center .channels { justify-content: center; }
.sec.al-end .wrap { text-align: end; }
.sec.al-end .wrap h2, .sec.al-end .intro, .sec.al-end .body { margin-inline-start: auto; }
[data-el] { position: relative; }
@media (min-width: 901px) {
  [data-mv] { translate: var(--tx, 0) var(--ty, 0); rotate: var(--rot, 0deg); scale: var(--sc, 1); z-index: 2; }
}

/* ---------- rich text ---------- */
.rt-h { font-size: 1.25em; margin: 1.1em 0 .4em; color: var(--head); }
.rt-h4 { font-size: 1.05em; margin: 1em 0 .3em; color: var(--accent); font-weight: 640; }
.rt-q { margin: 1em 0; padding: 4px 18px; border-inline-start: 3px solid var(--copper); color: var(--fg); font-style: italic; }
:lang(fa) .rt-q, :lang(ar) .rt-q { font-style: normal; }
mark.hl { background: linear-gradient(transparent 55%, rgba(201, 119, 58,.45) 55%); color: inherit; padding: 0 .1em; }
.t-lg { font-size: 1.22em; font-weight: 620; color: var(--fg); }
.t-sm { font-size: .84em; opacity: .85; }
em { font-style: italic; }
:lang(fa) em, :lang(ar) em { font-style: normal; font-weight: 560; color: var(--fg); }

/* ---------- bullets: shape, colour and motion are chosen per section in Studio ---------- */
.bl { list-style: none; margin: .6em 0 1em; padding: 0; display: grid; gap: .55em; color: var(--soft); max-width: var(--measure); }
.bl li { position: relative; padding-inline-start: 1.9em; }
.bl li::before { content: ""; position: absolute; inset-inline-start: .15em; top: .55em; width: .9em; height: .9em; background: var(--bl-c, var(--copper));
  -webkit-mask: var(--bl-shape) center / contain no-repeat; mask: var(--bl-shape) center / contain no-repeat; transform-origin: center; }
ol.bl { counter-reset: n; }
ol.bl li { counter-increment: n; }
ol.bl li::before { content: counter(n); -webkit-mask: none; mask: none; background: none; color: var(--bl-c, var(--copper)); font-weight: 680; width: auto; height: auto; top: 0; font-size: .95em; }
.bl-dot { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.2'/%3E%3C/svg%3E"); }
.bl-ring { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bl-leaf { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20c0-9 6-15 16-16-1 10-7 16-16 16Z'/%3E%3C/svg%3E"); }
.bl-sprout { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 22V12h2v10z M12 12c0-5 4-8 9-8 0 6-4 8-9 8Z M12 15c0-4-3-6-8-6 0 5 3 6 8 6Z'/%3E%3C/svg%3E"); }
.bl-check { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9.5 18 20 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bl-arrow { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[dir="rtl"] .bl-arrow .bl li::before { scale: -1 1; }
.bl-dash { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='10.5' width='18' height='3' rx='1.5'/%3E%3C/svg%3E"); }
.bl-diamond { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l8 9-8 9-8-9z'/%3E%3C/svg%3E"); }
.bl-seed { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='5' ry='8' transform='rotate(35 12 12)'/%3E%3C/svg%3E"); }
.sec:not([class*="bl-"]) { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20c0-9 6-15 16-16-1 10-7 16-16 16Z'/%3E%3C/svg%3E"); }
/* motion, only once the list scrolls into view */
.js-motion .bla-grow .bl li::before { transform: scale(0); transition: transform .7s cubic-bezier(.3,1.5,.4,1) calc(var(--i) * 90ms + 150ms); }
.js-motion .bla-grow .bl.in li::before { transform: scale(1); }
.js-motion .bla-fade .bl li { opacity: 0; transition: opacity .8s ease calc(var(--i) * 110ms); }
.js-motion .bla-fade .bl.in li { opacity: 1; }
.js-motion .bla-slide .bl li { opacity: 0; transform: translateX(calc(var(--dirx, 1) * -14px)); transition: opacity .7s ease calc(var(--i) * 100ms), transform .8s cubic-bezier(.22,.8,.2,1) calc(var(--i) * 100ms); }
[dir="rtl"] .js-motion .bla-slide .bl li, .js-motion[dir="rtl"] .bla-slide .bl li { --dirx: -1; }
.js-motion .bla-slide .bl.in li { opacity: 1; transform: none; }
.bla-pulse .bl li::before { animation: bl-pulse 3.2s ease-in-out calc(var(--i) * 300ms) infinite; }
.bla-sway .bl li::before { animation: bl-sway 4s ease-in-out calc(var(--i) * 250ms) infinite; transform-origin: 50% 90%; }
@keyframes bl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }
@keyframes bl-sway { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
@media (prefers-reduced-motion: reduce) { .bl li, .bl li::before { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }
.preview .bl li, .preview .bl li::before { opacity: 1; }

/* layout overrides that the editor chose to keep on phones too */
@media (max-width: 900px) {
  /* offsets shrink with the screen, so a desktop arrangement keeps its proportions on a phone */
  [data-mv][data-mv-all] { translate: calc(var(--tx, 0px) * var(--vk, 1)) calc(var(--ty, 0px) * var(--vk, 1)); rotate: var(--rot, 0deg); scale: var(--sc, 1); }
}
.rt-h1 { font-size: 1.5em; margin: 1.1em 0 .45em; color: var(--head); line-height: var(--lh-head); }

/* entrance animation per element (chosen in Studio) */
.js-motion [data-anim] { transition: opacity .9s ease, transform 1s cubic-bezier(.22,.8,.2,1), filter .9s ease; }
.js-motion [data-anim]:not(.in) { opacity: 0; }
.js-motion [data-anim="fade-up"]:not(.in) { transform: translateY(28px); }
.js-motion [data-anim="zoom"]:not(.in) { transform: scale(.92); }
.js-motion [data-anim="grow"]:not(.in) { transform: scale(.6); transform-origin: 50% 100%; }
.js-motion [data-anim="blur"]:not(.in) { filter: blur(10px); }
.js-motion [data-anim="slide-start"]:not(.in) { transform: translateX(calc(var(--dirx, 1) * -40px)); }
.js-motion [data-anim="slide-end"]:not(.in) { transform: translateX(calc(var(--dirx, 1) * 40px)); }
[dir="rtl"] [data-anim^="slide"] { --dirx: -1; }
@media (prefers-reduced-motion: reduce) { .js-motion [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* heading font can differ from body font (set in Studio) */
h1, h2, h3, h4, .rt-h1, .rt-h, .rt-h4 { font-family: var(--font-head, var(--font)); }

/* ---------- password page ---------- */
.lock-body { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(120% 120% at 20% 0%, var(--moss), var(--canopy) 50%, var(--night)); }
.lock-wrap { width: 100%; padding: 24px; display: grid; place-items: center; }
.lock-card { width: min(400px, 100%); display: grid; gap: 10px; padding: 34px 30px; border-radius: 22px; background: rgba(5,16,8,.55); color: var(--sapwood);
  border: 1px solid rgba(255,228,205,.12); box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lock-card h1 { font-size: 1.5rem; margin: 6px 0 0; color: var(--sapwood); }
.lock-card p { margin: 0 0 8px; color: rgba(255,228,205,.75); }
.lock-card label { font-size: .88em; color: rgba(255,228,205,.75); }
.lock-card input[type=password] { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,228,205,.25); background: rgba(255,228,205,.06); color: var(--sapwood); }
.lock-card input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.lock-card .btn { justify-content: center; margin-top: 6px; }
.lock-mark { width: 54px; height: 44px; }
.lock-err { color: #f2b8a0 !important; font-size: .9em; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }


/* ---------- ideas: a seed that grows into branches of ideas ---------- */
.ideas { display: grid; justify-items: center; text-align: center; }
.idea-seed { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 10px; padding: 18px 28px; border-radius: 28px; -webkit-tap-highlight-color: transparent; transition: transform .6s cubic-bezier(.22,.8,.2,1); }
.idea-seed:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.seed-orb { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 60%, rgba(201,119,58,.35), rgba(18,51,35,.0) 62%), radial-gradient(circle, var(--canopy), var(--night));
  box-shadow: 0 0 0 1px rgba(201, 119, 58,.45), 0 18px 50px -12px rgba(18,51,35,.65), inset 0 0 30px rgba(201,119,58,.25);
  animation: seed-breathe 3.6s ease-in-out infinite; }
.seed-orb svg { width: 72%; height: 72%; overflow: visible; fill: none; stroke-linecap: round; }
.seed-orb .ring { stroke: #A1744D; stroke-width: 1; opacity: 0; transform-origin: 32px 32px; }
.seed-orb .core { fill: #FFE4CD; filter: drop-shadow(0 0 6px rgba(255,228,205,.9)); }
.seed-orb .sprout-s { stroke: var(--copper); stroke-width: 2.2; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .7s ease .1s; }
.seed-orb .leaf-a, .seed-orb .leaf-b { fill: var(--copper); transform-box: fill-box; transform: scale(0); transition: transform .7s cubic-bezier(.3,1.6,.4,1); }
.seed-orb .leaf-a { transform-origin: 0% 100%; transition-delay: .55s; } .seed-orb .leaf-b { transform-origin: 100% 100%; transition-delay: .7s; fill: #4f7a57; }
.idea-seed:hover .seed-orb .sprout-s, .ideas.open .seed-orb .sprout-s { stroke-dashoffset: 0; }
.idea-seed:hover .seed-orb .leaf-a, .idea-seed:hover .seed-orb .leaf-b, .ideas.open .seed-orb .leaf-a, .ideas.open .seed-orb .leaf-b { transform: scale(1); }
.ideas.burst .seed-orb .ring.r1 { animation: seed-ring 1.1s ease-out; } .ideas.burst .seed-orb .ring.r2 { animation: seed-ring 1.1s ease-out .25s; }
.seed-label { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--head); }
.seed-hint { font-size: .85em; color: var(--soft); transition: opacity .5s; }
.ideas.open .seed-hint { opacity: 0; }
.ideas.open .idea-seed { transform: scale(.82); }
@keyframes seed-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(201, 119, 58,.45), 0 18px 50px -12px rgba(18,51,35,.65), inset 0 0 30px rgba(201,119,58,.25); }
  50% { box-shadow: 0 0 0 1px rgba(201, 119, 58,.7), 0 18px 60px -8px rgba(201,119,58,.45), inset 0 0 40px rgba(201,119,58,.45); } }
@keyframes seed-ring { from { opacity: .9; transform: scale(.4); stroke-width: 3; } to { opacity: 0; transform: scale(2.6); stroke-width: .3; } }

.idea-tree { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 1.1s cubic-bezier(.22,.8,.2,1); }
.ideas.open .idea-tree { grid-template-rows: 1fr; }
.idea-inner { overflow: hidden; min-height: 0; }
.ideas .idea-inner > h2, .ideas .idea-inner > .intro { margin-inline: auto; opacity: 0; transform: translateY(14px); transition: opacity .8s ease .35s, transform .9s cubic-bezier(.22,.8,.2,1) .35s; }
.ideas.open .idea-inner > h2, .ideas.open .idea-inner > .intro { opacity: 1; transform: none; }
.idea-list { list-style: none; margin: 34px auto 10px; padding: 8px 0 20px; position: relative; display: grid; gap: 22px; max-width: 900px; text-align: start; }
/* trunk */
.idea-list::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 2px; margin-inline-start: -1px; border-radius: 2px;
  background: linear-gradient(var(--copper), var(--moss) 70%, transparent); transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.4,.2,.2,1) .3s; }
.ideas.open .idea-list::before { transform: scaleY(1); }
.idea { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.idea .idea-card { grid-column: 1; margin-inline-end: 34px; }
.idea:nth-child(even) .idea-card { grid-column: 2; margin-inline: 34px 0; }
/* branch from trunk to card */
.idea::before { content: ""; position: absolute; top: 34px; height: 2px; width: 34px; background: var(--copper); inset-inline-end: 50%; transform: scaleX(0); transform-origin: right;
  transition: transform .5s ease calc(.6s + var(--i) * .22s); }
[dir="rtl"] .idea::before { transform-origin: left; }
.idea:nth-child(even)::before { inset-inline-end: auto; inset-inline-start: 50%; transform-origin: left; }
[dir="rtl"] .idea:nth-child(even)::before { transform-origin: right; }
.ideas.open .idea::before { transform: scaleX(1); }
.idea-dot { position: absolute; top: 28px; inset-inline-start: 50%; width: 14px; height: 14px; margin-inline-start: -7px; border-radius: 50% 0 50% 0; background: var(--copper);
  box-shadow: 0 0 12px rgba(201,119,58,.8); transform: scale(0) rotate(-45deg); transition: transform .6s cubic-bezier(.3,1.7,.4,1) calc(.55s + var(--i) * .22s); }
.ideas.open .idea-dot { transform: scale(1) rotate(-45deg); }
.idea-card { position: relative; padding: 22px 22px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-line);
  box-shadow: 0 18px 40px -26px rgba(5,16,8,.6); opacity: 0; transform: translateY(18px) scale(.94); filter: blur(6px);
  transition: opacity .8s ease calc(.8s + var(--i) * .22s), transform .9s cubic-bezier(.22,.8,.2,1) calc(.8s + var(--i) * .22s), filter .8s ease calc(.8s + var(--i) * .22s), box-shadow .4s, translate .4s; }
.ideas.open .idea-card { opacity: 1; transform: none; filter: none; }
.idea-card:hover { translate: 0 -3px; box-shadow: 0 26px 50px -24px rgba(5,16,8,.7); }
.idea-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(201,119,58,.28), rgba(201, 119, 58,.22)); color: var(--accent); }
.idea-ico .ico { width: 22px; height: 22px; margin: 0; }
.idea-card h3 { margin: 0 0 6px; }
.idea-text p { color: var(--soft); margin: 0; }
.idea-tag { display: inline-block; margin-top: 12px; font-size: .78em; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--accent); border: 1px solid var(--card-line); }
.idea-close { margin-top: 18px; opacity: 0; transition: opacity .6s ease 1.6s; }
.ideas.open .idea-close { opacity: 1; }
@media (max-width: 720px) {
  .idea-list::before { inset-inline-start: 10px; }
  .idea { grid-template-columns: 1fr; }
  .idea .idea-card, .idea:nth-child(even) .idea-card { grid-column: 1; margin-inline: 34px 0; }
  .idea::before, .idea:nth-child(even)::before { inset-inline-start: 10px; inset-inline-end: auto; width: 24px; transform-origin: left; }
  [dir="rtl"] .idea::before, [dir="rtl"] .idea:nth-child(even)::before { transform-origin: right; }
  .idea-dot { inset-inline-start: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .seed-orb { animation: none; } .idea-tree, .idea-card, .idea::before, .idea-dot, .idea-list::before, .idea-close, .ideas .idea-inner > * { transition: none !important; }
}
.preview .ideas.open .idea-card, .preview .ideas.open .idea-inner > * { transition-duration: .3s; transition-delay: 0s; }

/* ---------- proposal (paper) polish: soft accents and gentle reveals ---------- */
body.theme-paper .sec > .wrap > h2::before { content: ""; display: block; width: 42px; height: 3px; border-radius: 3px; margin-bottom: 16px;
  background: linear-gradient(90deg, var(--copper), var(--copper)); transform-origin: var(--from, left); transition: transform .9s cubic-bezier(.22,.8,.2,1) .1s; }
[dir="rtl"] body.theme-paper, body.theme-paper[dir="rtl"] { --from: right; }
:root[dir="rtl"] body.theme-paper .sec > .wrap > h2::before { transform-origin: right; }
.js-motion.theme-paper .sec:not(.seen) > .wrap > h2::before { transform: scaleX(0); }
body.theme-paper .ideas h2::before { margin-inline: auto; }
body.theme-paper .cards .card { transition: transform .45s cubic-bezier(.22,.8,.2,1), box-shadow .45s; }
body.theme-paper .cards .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(18,51,35,.55); }
.js-motion.theme-paper .cards .card, .js-motion.theme-paper .duo .side { opacity: 0; transform: translateY(18px); transition: opacity .8s ease calc(var(--i, 0) * 90ms), transform .9s cubic-bezier(.22,.8,.2,1) calc(var(--i, 0) * 90ms), box-shadow .45s; }
.js-motion.theme-paper .seen .cards .card, .js-motion.theme-paper .seen .duo .side { opacity: 1; transform: none; }
body.theme-paper .duo .side { background: linear-gradient(160deg, #fff, rgba(201, 119, 58,.07)); border-radius: 18px; }
body.theme-paper .cover { background: radial-gradient(120% 140% at 0% 0%, var(--moss), var(--canopy) 52%, var(--night)); }
body.theme-paper .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,228,205,.08) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { body.theme-paper .cover::after { animation: none; } .js-motion.theme-paper .cards .card, .js-motion.theme-paper .duo .side { opacity: 1; transform: none; } }

/* ---------- private section placeholder (frosted glass) ---------- */
.sec-locked .wrap { display: grid; place-items: center; }
.glass-lock { position: relative; width: min(560px, 100%); display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 28px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,228,205,.10), rgba(201,119,58,.06)); border: 1px solid rgba(255,228,205,.16);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 70px -40px rgba(0,0,0,.7); }
.glass-lock::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(201,119,58,.18), transparent 30%, rgba(201, 119, 58,.16), transparent 60%);
  animation: gl-spin 14s linear infinite; z-index: -1; }
body.theme-paper .glass-lock { background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(201, 119, 58,.08)); border-color: rgba(99,53,27,.16); }
.glass-lock h2 { margin: 6px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); max-width: none; }
.glass-lock h2::before { display: none !important; }
.glass-lock p { margin: 0; color: var(--soft); }
.gl-rings svg { width: 56px; height: 56px; fill: none; stroke: var(--copper); stroke-width: 1.4; }
.gl-rings .c { fill: var(--copper); stroke: none; animation: gl-pulse 2.4s ease-in-out infinite; transform-origin: 34px 30px; }
.gl-row { display: flex; gap: 8px; width: 100%; max-width: 380px; margin-top: 10px; }
.gl-row input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--fg); }
.gl-row input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-err { color: #e39a7d !important; font-size: .9em; }
@keyframes gl-spin { to { transform: rotate(1turn); } }
@keyframes gl-pulse { 50% { transform: scale(1.5); opacity: .6; } }
/* a section that was just unlocked unfolds softly */
.sec.just-opened { animation: unfold 1.2s cubic-bezier(.22,.8,.2,1) both; }
@keyframes unfold { from { opacity: 0; clip-path: inset(0 0 100% 0 round 24px); filter: blur(8px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); filter: none; } }
.prev-chip { position: absolute; top: 10px; inset-inline-end: 12px; z-index: 5; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #A1744D; color: #051008; font-weight: 600; }

/* ---------- personal welcome: pollen of light gathers, rings grow, a sprout, then the name ---------- */
.welcome { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 120% at 50% 40%, rgba(18,51,35,.985), rgba(5,16,8,.995) 70%); color: var(--sapwood); transition: opacity 1s ease, visibility 1s;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.welcome.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome.gone .w-card { transform: scale(1.04); filter: blur(6px); }
.w-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 24px; transition: transform 1s ease, filter 1s ease; }
.w-rings { width: min(220px, 52vw); height: auto; overflow: visible; fill: none; }
.w-rings circle:not(.w-core) { stroke: #A1744D; stroke-width: .9; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: w-draw 1.6s cubic-bezier(.3,.6,.2,1) calc(.3s + var(--k) * .14s) forwards; }
.w-rings circle:nth-child(-n+2) { stroke: var(--copper); }
.w-stem { stroke: var(--copper); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: w-draw .8s ease 1.3s forwards; }
.w-leaf { fill: var(--copper); transform-box: fill-box; transform: scale(0); animation: w-pop .8s cubic-bezier(.3,1.6,.4,1) forwards; }
.w-leaf.a { transform-origin: 0 100%; animation-delay: 1.75s; } .w-leaf.b { transform-origin: 100% 100%; animation-delay: 1.95s; fill: #4f7a57; }
.w-core { fill: #FFE4CD; filter: drop-shadow(0 0 8px #FFE4CD); animation: w-glow 2.6s ease-in-out infinite; }
.w-hi, .w-name, .w-note, .w-go { opacity: 0; transform: translateY(12px); filter: blur(8px); animation: w-in 1.1s cubic-bezier(.22,.8,.2,1) forwards; }
.w-hi { margin: 10px 0 0; color: rgba(255,228,205,.75); letter-spacing: .02em; animation-delay: 1.9s; }
.w-name { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); color: var(--sapwood); max-width: 20ch; animation-delay: 2.15s;
  background: linear-gradient(90deg, #FFE4CD, #e8c9a3, #FFE4CD); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.w-note { margin: 2px 0 0; max-width: 46ch; color: rgba(255,228,205,.82); animation-delay: 2.5s; }
.w-go { margin-top: 18px; animation-delay: 2.9s; }
@keyframes w-draw { to { stroke-dashoffset: 0; } }
@keyframes w-pop { to { transform: scale(1); } }
@keyframes w-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes w-glow { 50% { filter: drop-shadow(0 0 16px #FFE4CD); } }
@media (prefers-reduced-motion: reduce) { .welcome *, .welcome { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; } }
.preview .welcome { display: none; }


/* ---------- personal journey: a glowing vine of steps, dreamy but quiet ---------- */
.journey { position: fixed; z-index: 90; inset-inline: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; isolation: isolate;
  background: linear-gradient(120deg, rgba(5,16,8,.78), rgba(18,51,35,.78)); color: var(--sapwood); border: 1px solid rgba(255,228,205,.14);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,228,205,.08);
  font-size: .86em; transition: transform .7s cubic-bezier(.22,.8,.2,1), opacity .7s, filter .7s; animation: j-in 1.2s cubic-bezier(.22,.8,.2,1) .5s both; }
[dir="rtl"] .journey { padding: 8px 16px 8px 8px; }
/* soft aurora breathing behind the bar */
.journey::before { content: ""; position: absolute; inset: -14px -24px; z-index: -1; border-radius: 999px; filter: blur(22px); opacity: .55;
  background: radial-gradient(40% 80% at 25% 50%, rgba(201,119,58,.45), transparent 70%), radial-gradient(40% 80% at 75% 50%, rgba(201, 119, 58,.4), transparent 70%);
  animation: j-aura 7s ease-in-out infinite alternate; }
.journey.tuck { transform: translateY(calc(100% + 30px)); opacity: 0; filter: blur(6px); }
.j-title { opacity: .6; white-space: nowrap; font-size: .92em; }
.journey ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.journey li { display: flex; align-items: center; opacity: 0; animation: j-step .8s cubic-bezier(.22,.8,.2,1) calc(.9s + var(--i) * .18s) forwards; }
/* the vine between steps; a light travels along what is already walked */
.journey li + li::before { content: ""; width: 26px; height: 2px; border-radius: 2px; margin-inline: 2px; background: rgba(255,228,205,.18); }
.journey li.done + li::before, .journey li.now::before, .journey li.done::before {
  background: linear-gradient(90deg, #4f7a57, var(--copper) 40%, #FFE4CD 50%, var(--copper) 60%, #4f7a57) 0 0 / 300% 100%; animation: j-flow 2.8s linear infinite; box-shadow: 0 0 8px rgba(201,119,58,.6); }
[dir="rtl"] .journey li::before { animation-direction: reverse; }
.journey a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 999px; transition: background .3s; }
.journey a:hover { background: rgba(255,228,205,.08); }
.j-dot { position: relative; width: 22px; height: 22px; display: grid; place-items: center; font-size: .78em; flex: none; }
/* future step: a seed */
.j-dot::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px dashed rgba(255,228,205,.4); }
.j-num { position: relative; opacity: .8; }
/* walked step: a leaf */
.journey li.done .j-dot::before { inset: 2px; border: 0; border-radius: 0 60% 0 60%; background: linear-gradient(135deg, var(--copper), #4f7a57); transform: rotate(45deg); }
.journey li.done .j-num { color: #051008; font-weight: 700; }
/* here: a glowing bud with a slow ripple */
.journey li.now .j-dot::before { inset: 0; border: 0; background: radial-gradient(circle at 40% 35%, #fff6ec, #FFE4CD 45%, #e2b98f); box-shadow: 0 0 14px rgba(255,228,205,.7); }
.journey li.now .j-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255,228,205,.55); animation: j-ripple 2.6s ease-out infinite; }
.journey li.now .j-num { color: #051008; font-weight: 700; }
.j-lbl { white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.journey li:not(.now) .j-lbl { opacity: .62; }
.journey li:not(.now) a:hover .j-lbl { opacity: 1; }
.j-next { position: relative; overflow: hidden; background: var(--sapwood); color: #051008 !important; font-weight: 650; padding: 7px 16px !important; white-space: nowrap; }
.j-next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: j-shine 4.5s ease-in-out 2.5s infinite; }
.j-next:hover { background: #fff3e6 !important; }
@keyframes j-in { from { transform: translateY(40px) scale(.96); opacity: 0; filter: blur(10px); } }
@keyframes j-step { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes j-flow { to { background-position: -300% 0; } }
@keyframes j-ripple { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes j-aura { from { transform: translateX(-6%) scale(1); opacity: .45; } to { transform: translateX(6%) scale(1.08); opacity: .7; } }
@keyframes j-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-width: 640px) { .j-title, .journey li:not(.now) .j-lbl { display: none; } .journey { gap: 8px; } .journey li + li::before { width: 16px; } }
body.has-viewer .foot { padding-bottom: 90px; }

/* the "next step" card at the end of a page */
.journey-end .je-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; display: grid; justify-items: center; gap: 10px;
  padding: clamp(34px, 6vw, 60px) clamp(22px, 5vw, 48px); border-radius: 28px; background: rgba(5,16,8,.35); border: 1px solid var(--card-line);
  box-shadow: 0 30px 80px -50px rgba(0,0,0,.8); }
body.theme-paper .journey-end .je-card { background: rgba(255,255,255,.6); }
.je-aura { position: absolute; inset: -30%; z-index: -1; filter: blur(40px); opacity: .55;
  background: conic-gradient(from 0deg at 50% 50%, rgba(201,119,58,.5), rgba(201, 119, 58,.35), rgba(255,228,205,.3), rgba(79,122,87,.45), rgba(201,119,58,.5));
  animation: je-turn 18s linear infinite; }
.je-pollen { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.je-pollen i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #FFE4CD; box-shadow: 0 0 8px rgba(255,228,205,.9); opacity: 0;
  animation: je-float 7s ease-in infinite; }
.je-pollen i:nth-child(3n) { background: var(--copper); box-shadow: 0 0 8px rgba(201,119,58,.9); }
.je-pollen i:nth-child(4n) { width: 3px; height: 3px; }
.je-pollen i:nth-child(1) { left: 0%; animation-delay: 0.0s; animation-duration: 6s; }
.je-pollen i:nth-child(2) { left: 37%; animation-delay: 0.53s; animation-duration: 7s; }
.je-pollen i:nth-child(3) { left: 74%; animation-delay: 1.06s; animation-duration: 8s; }
.je-pollen i:nth-child(4) { left: 11%; animation-delay: 1.59s; animation-duration: 9s; }
.je-pollen i:nth-child(5) { left: 48%; animation-delay: 2.12s; animation-duration: 10s; }
.je-pollen i:nth-child(6) { left: 85%; animation-delay: 2.65s; animation-duration: 6s; }
.je-pollen i:nth-child(7) { left: 22%; animation-delay: 3.18s; animation-duration: 7s; }
.je-pollen i:nth-child(8) { left: 59%; animation-delay: 3.71s; animation-duration: 8s; }
.je-pollen i:nth-child(9) { left: 96%; animation-delay: 4.24s; animation-duration: 9s; }
.je-pollen i:nth-child(10) { left: 33%; animation-delay: 4.77s; animation-duration: 10s; }
.je-pollen i:nth-child(11) { left: 70%; animation-delay: 5.3s; animation-duration: 6s; }
.je-pollen i:nth-child(12) { left: 7%; animation-delay: 5.83s; animation-duration: 7s; }
.je-pollen i:nth-child(13) { left: 44%; animation-delay: 6.36s; animation-duration: 8s; }
.je-pollen i:nth-child(14) { left: 81%; animation-delay: 6.89s; animation-duration: 9s; }
.je-path { width: min(260px, 70%); height: auto; overflow: visible; fill: none; }
.je-path path { stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.je-path .a { fill: var(--copper); } .je-path .b { fill: #FFE4CD; filter: drop-shadow(0 0 8px #FFE4CD); animation: gl-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.je-path .spark { fill: #fff6ec; filter: drop-shadow(0 0 6px #FFE4CD); }
.seen .je-path path, .preview .je-path path { animation: w-draw 1.8s cubic-bezier(.3,.6,.2,1) .2s forwards; }
.je-step { font-size: .82em; color: var(--accent); letter-spacing: .04em; }
.journey-end h2 { margin: 0; max-width: none; } .journey-end h2::before { display: none !important; }
.journey-end p { margin: 0; color: var(--soft); max-width: 50ch; }
.journey-end .btn { position: relative; overflow: hidden; margin-top: 8px; }
.journey-end .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); animation: j-shine 5s ease-in-out 1.5s infinite; }
.js-motion .journey-end .je-card > :not(.je-aura):not(.je-pollen) { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .9s ease, transform 1s cubic-bezier(.22,.8,.2,1), filter .9s; }
.js-motion .journey-end.seen .je-card > :not(.je-aura):not(.je-pollen) { opacity: 1; transform: none; filter: none; }
.js-motion .journey-end.seen .je-card > :nth-child(4) { transition-delay: .15s; } .js-motion .journey-end.seen .je-card > :nth-child(5) { transition-delay: .3s; }
.js-motion .journey-end.seen .je-card > :nth-child(6) { transition-delay: .45s; } .js-motion .journey-end.seen .je-card > :nth-child(7) { transition-delay: .6s; }
@keyframes je-turn { to { transform: rotate(1turn); } }
@keyframes je-float { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-260px) translateX(20px); opacity: 0; } }

/* moving between pages fades softly (browsers that support view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s ease both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.22,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .journey, .journey::before, .journey li, .journey li::before, .j-dot::after, .j-next::after, .je-aura, .je-pollen i, .journey-end .btn::after { animation: none !important; opacity: 1; }
  .je-path path { stroke-dashoffset: 0; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
[dir="rtl"] .je-path { transform: scaleX(-1); }

/* ---------- booking (meet.js): calendar → times → details, soft and alive ---------- */
.meet { position: relative; margin-top: clamp(18px, 3vw, 28px); padding: clamp(18px, 3vw, 30px); border-radius: 26px; background: var(--card); border: 1px solid var(--card-line);
  box-shadow: 0 30px 70px -48px rgba(0,0,0,.7); min-height: 260px; overflow: hidden; isolation: isolate; }
.meet::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201,119,58,.16), transparent); animation: mt-drift 18s ease-in-out infinite alternate; }
@keyframes mt-drift { to { transform: translate(-30%, 40%) scale(1.2); } }
.meet.mt-in > * { animation: mt-enter .55s cubic-bezier(.22,.8,.2,1) both; }
@keyframes mt-enter { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
.meet.mt-busy { cursor: progress; } .meet.mt-busy > * { opacity: .55; transition: opacity .3s; }
.mt-loading { display: flex; gap: 8px; justify-content: center; padding: 70px 0; }
.mt-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: mt-dot 1.1s ease-in-out infinite; }
.mt-loading span:nth-child(2) { animation-delay: .15s; } .mt-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes mt-dot { 50% { transform: translateY(-8px); opacity: .5; } }
.mt-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .86em; color: var(--faint); }
.mt-steps li { display: flex; align-items: center; gap: 8px; }
.mt-steps li + li::before { content: ""; width: 26px; height: 1px; background: var(--line); }
.mt-steps li.now { color: var(--fg); font-weight: 650; } .mt-steps li.done { color: var(--soft); }
.mt-durs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mt-chip { font: inherit; font-size: .9em; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); cursor: pointer; transition: background .25s, border-color .25s, transform .2s; }
.mt-chip:hover { transform: translateY(-1px); } .mt-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 34px); align-items: start; }
@media (max-width: 760px) { .mt-grid { grid-template-columns: 1fr; } }
.mt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mt-cal-head b { font-weight: 650; }
.mt-nav { font: inherit; font-size: 1.3em; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--fg); cursor: pointer; transition: background .2s; }
.mt-nav:hover:not(:disabled) { background: var(--chip); } .mt-nav:disabled { opacity: .3; cursor: default; }
.mt-wk, .mt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.mt-wk span { font-size: .78em; color: var(--faint); padding-bottom: 4px; }
.mt-day { font: inherit; aspect-ratio: 1; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--faint); opacity: .45; position: relative; }
.mt-day.open { opacity: 1; color: var(--fg); cursor: pointer; border-color: var(--line); background: var(--chip); transition: transform .25s cubic-bezier(.3,1.4,.5,1), background .25s, border-color .25s, box-shadow .3s; animation: mt-pop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * 14ms); }
.mt-day.open::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 8px var(--copper); }
.mt-day.open:hover { transform: translateY(-2px); border-color: var(--accent); }
.mt-day.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; box-shadow: 0 10px 26px -10px var(--accent); }
.mt-day.on::after { background: var(--night); box-shadow: none; }
@keyframes mt-pop { from { opacity: 0; transform: scale(.7); } }
.mt-tz { font-size: .78em; color: var(--faint); margin: 12px 0 0; }
.mt-times h3 { font-size: 1em; margin: 4px 0 12px; }
.mt-hint { color: var(--faint); padding: 40px 0; text-align: center; border: 1px dashed var(--line); border-radius: 18px; }
.mt-tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.mt-time { font: inherit; display: grid; gap: 2px; justify-items: center; padding: 10px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); cursor: pointer;
  animation: mt-enter .45s cubic-bezier(.22,.8,.2,1) both; animation-delay: calc(var(--i) * 35ms); transition: transform .2s, border-color .2s, background .2s; }
.mt-time b { font-size: 1.05em; font-weight: 650; } .mt-time small { font-size: .72em; color: var(--faint); }
.mt-time:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(201, 119, 58,.18); }
.mt-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px; border-radius: 16px; background: var(--chip); border: 1px solid var(--line); margin-bottom: 18px; }
.mt-picked b { font-weight: 650; } .mt-picked span, .mt-picked small { color: var(--soft); font-size: .9em; }
.mt-link { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px 2px; margin-inline-start: auto; text-decoration: underline; text-underline-offset: 4px; }
.mt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-form .mt-f:nth-of-type(4), .mt-form .mt-err, .mt-form .mt-send { grid-column: 1 / -1; }
@media (max-width: 640px) { .mt-form { grid-template-columns: 1fr; } }
.mt-f { display: grid; gap: 6px; font-size: .9em; color: var(--soft); }
.mt-f input, .mt-f textarea { font: inherit; font-size: 1rem; color: var(--fg); background: var(--chip); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s; resize: vertical; }
.mt-f input:focus, .mt-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 119, 58,.22); }
.mt-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mt-err { color: #e8a87c; min-height: 1.4em; margin: 0; font-size: .92em; }
.mt-send { justify-self: start; }
.mt-form.mt-busy .mt-send { animation: mt-breathe 1.2s ease-in-out infinite; }
@keyframes mt-breathe { 50% { opacity: .6; } }
.mt-done, .mt-status, .mt-note { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 10px 0; }

/* Explicit button styling avoids the browser's default gray fill on retry. */
.mt-retry { min-height: 48px; justify-content: center; margin-top: 20px; padding: 12px 24px; font: inherit; font-weight: 620;
  background: rgba(201, 119, 58, .10); color: var(--fg); border-color: var(--copper); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 228, 205, .06); }
.mt-retry:hover { background: var(--copper); color: var(--night); border-color: var(--copper); box-shadow: 0 6px 20px rgba(5, 16, 8, .16); }
.mt-retry:disabled { cursor: progress; opacity: .65; transform: none; }
.mt-retry[aria-busy="true"] svg { animation: mt-retry-spin .9s linear infinite; }
@keyframes mt-retry-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mt-retry, .mt-retry svg { animation: none !important; transition: none; } }
.mt-done p, .mt-status > p, .mt-note p { color: var(--soft); max-width: 46ch; margin: 0 auto; }
.mt-status .mt-picked { justify-content: center; margin: 8px 0; }
.mt-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.mt-ok { color: var(--copper); align-self: center; }
.mt-cancel { margin-top: 14px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.mt-cancel .mt-link { margin: 0; color: var(--faint); }
.mt-track { list-style: none; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-size: .82em; color: var(--faint); }
.mt-track li { display: flex; align-items: center; gap: 8px; padding-inline: 4px; }
.mt-track li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); transition: background .4s, border-color .4s; transition-delay: calc(var(--k) * .18s); }
.mt-track li + li { padding-inline-start: 26px; position: relative; }
.mt-track li + li::after { content: ""; position: absolute; inset-inline-start: 4px; top: 50%; width: 18px; height: 1px; background: var(--line); }
.mt-track li.done { color: var(--soft); } .mt-track li.done::before { background: var(--copper); border-color: var(--copper); }
.mt-track li.now { color: var(--fg); font-weight: 650; } .mt-track li.now::before { border-color: var(--accent); animation: mt-pulse 1.8s ease-out infinite; }
@keyframes mt-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 119, 58,.55); } 100% { box-shadow: 0 0 0 9px rgba(201, 119, 58,0); } }
.s-cancelled h3 { color: var(--faint); }
.mt-art { width: 120px; height: 90px; overflow: visible; }
.mt-art .d { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mt-draw 1.2s cubic-bezier(.4,.2,.2,1) .15s forwards; }
.mt-art .leaf { fill: var(--copper); transform-box: fill-box; transform-origin: 0% 100%; transform: scale(0); animation: mt-grow .9s cubic-bezier(.3,1.5,.4,1) 1s forwards; }
.mt-art .leaf.b { fill: #32553D; animation-delay: 1.2s; transform-origin: 100% 100%; }
.mt-art .spark { fill: #FFE4CD; opacity: 0; animation: mt-twinkle 2.4s ease-in-out 1.4s infinite; } .mt-art .spark.b { animation-delay: 2s; }
.mt-art .ring { fill: #FFE4CD; animation: mt-pulse 2s ease-out infinite; }
@keyframes mt-draw { to { stroke-dashoffset: 0; } }
@keyframes mt-grow { to { transform: scale(1); } }
@keyframes mt-twinkle { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .meet::before, .meet.mt-in > *, .mt-day.open, .mt-time, .mt-loading span { animation: none !important; }
  .mt-art .d { stroke-dashoffset: 0; animation: none; } .mt-art .leaf { transform: none; animation: none; }
}
/* "turn on Telegram reminders" card: the guaranteed reminder path */
.mt-tg { display: flex; gap: 14px; align-items: flex-start; text-align: start; width: min(100%, 520px); margin: 14px auto 4px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(201,119,58,.16), rgba(201, 119, 58,.12)); border: 1px solid rgba(201,119,58,.35); animation: mt-enter .6s cubic-bezier(.22,.8,.2,1) .35s both; }
.mt-tg-ic { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--copper); color: var(--night); animation: mt-ring 2.8s ease-in-out 1s infinite; transform-origin: 50% 20%; }
.mt-tg.on .mt-tg-ic { animation: none; }
@keyframes mt-ring { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: 14deg; } 78% { rotate: -12deg; } 82% { rotate: 8deg; } 86% { rotate: -4deg; } }
.mt-tg-tx { display: grid; gap: 6px; justify-items: start; }
.mt-tg-tx b { font-weight: 700; } .mt-tg-tx p { margin: 0; color: var(--soft); font-size: .93em; }
.mt-tg-go { margin-top: 6px; }
.mt-tg-wait { color: var(--faint); }
.mt-tg.on { align-items: center; } .mt-tg.on b { color: var(--copper); }
@media (prefers-reduced-motion: reduce) { .mt-tg, .mt-tg-ic { animation: none; } }

/* ---------- guide leaf: shows the way inside a personal path ---------- */
.guide { position: fixed; z-index: 70; width: min(280px, calc(100vw - 24px)); display: flex; gap: 10px; align-items: flex-start; pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s ease, transform .5s cubic-bezier(.22,.8,.2,1), left .6s cubic-bezier(.22,.8,.2,1), top .6s cubic-bezier(.22,.8,.2,1); }
.guide.on { opacity: 1; transform: none; }
.guide .g-leaf { flex: none; width: 40px; height: 40px; overflow: visible; filter: drop-shadow(0 6px 14px rgba(201,119,58,.45)); animation: g-float 3.2s ease-in-out infinite; transform-origin: 20% 80%; }
.guide .g-body { fill: var(--copper); } .guide .g-vein { fill: none; stroke: #2f6b45; stroke-width: 1.4; stroke-linecap: round; }
.guide .g-bub { pointer-events: auto; position: relative; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(18,51,35,.96); color: #FFE4CD; font-size: .92rem; line-height: 1.7;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.7); border: 1px solid rgba(201,119,58,.35); }
[dir="rtl"] .guide .g-bub { border-radius: 16px 16px 4px 16px; }
.guide .g-bub p { margin: 0; }
.guide .g-go { display: none; font: inherit; font-size: .85em; margin-top: 6px; background: none; border: 0; color: var(--copper); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.guide.dock { left: 16px !important; top: auto !important; bottom: 76px; } [dir="rtl"] .guide.dock { left: auto !important; right: 16px; }
.guide.dock .g-go { display: inline-block; }
.guide.cheer .g-leaf { animation: g-cheer 1.1s cubic-bezier(.3,1.4,.4,1) forwards; }
@keyframes g-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
@keyframes g-cheer { 40% { transform: scale(1.35) rotate(-20deg); } 100% { transform: translateY(-40px) scale(.6) rotate(140deg); opacity: 0; } }
.journey li[data-need]:not(.done) .j-dot { box-shadow: 0 0 0 0 rgba(201,119,58,.6); }
.journey li.now[data-need] .j-dot { animation: mt-pulse 1.8s ease-out infinite; }

/* ---------- closing words: a popup that grows a small branch ---------- */
.outro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.outro .o-back { position: absolute; inset: 0; background: rgba(5,16,8,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s ease; }
.outro .o-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center; padding: 26px clamp(20px, 4vw, 34px) 28px; border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 0%, #1d4a33, #0b2216 60%, #051008); color: #FFE4CD; border: 1px solid rgba(255,228,205,.14); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .5s ease .05s, transform .7s cubic-bezier(.22,.8,.2,1) .05s; }
body.theme-paper .outro .o-card { background: radial-gradient(120% 90% at 50% 0%, #fffaf3, #FFF6EE 60%, #f3e6d6); color: #123323; border-color: rgba(99,53,27,.18); }
.outro.on .o-back { opacity: 1; } .outro.on .o-card { opacity: 1; transform: none; }
.outro .o-x { position: absolute; top: 10px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,228,205,.08); color: inherit; font-size: 22px; cursor: pointer; }
.outro .o-tree { width: 150px; height: 90px; overflow: visible; margin: 0 auto 6px; display: block; }
.outro .o-stem, .outro .o-br { fill: none; stroke: #A1744D; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.outro.on .o-stem { animation: mt-draw 1s cubic-bezier(.4,.2,.2,1) .35s forwards; }
.outro.on .o-br.a { animation: mt-draw .8s ease .95s forwards; } .outro.on .o-br.b { animation: mt-draw .8s ease 1.1s forwards; }
.outro .o-lf { fill: var(--copper); transform-box: fill-box; transform: scale(0); }
.outro .o-lf.l1 { transform-origin: 0% 100%; } .outro .o-lf.l2 { transform-origin: 100% 100%; fill: #4f9a6a; } .outro .o-lf.l3 { transform-origin: 50% 100%; }
.outro.on .o-lf { animation: mt-grow .8s cubic-bezier(.3,1.5,.4,1) forwards; }
.outro.on .o-lf.l1 { animation-delay: 1.5s; } .outro.on .o-lf.l2 { animation-delay: 1.65s; } .outro.on .o-lf.l3 { animation-delay: 1.3s; }
.outro .o-bloom { fill: #FFE4CD; opacity: 0; } .outro.on .o-bloom { animation: o-bloom 2.6s ease-in-out 1.9s infinite; }
@keyframes o-bloom { 0%, 100% { opacity: .4; r: 4; } 50% { opacity: 1; r: 6; } }
.outro .o-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.outro .o-petals i { position: absolute; top: -10px; left: calc(var(--x, 50) * 1%); width: 8px; height: 8px; border-radius: 60% 0; background: rgba(255,228,205,.55); opacity: 0; }
.outro.on .o-petals i { animation: o-fall 6s linear infinite; }
.outro .o-petals i:nth-child(1) { --x: 8; animation-delay: 1s; } .outro .o-petals i:nth-child(2) { --x: 22; animation-delay: 2.6s; } .outro .o-petals i:nth-child(3) { --x: 35; animation-delay: 1.8s; }
.outro .o-petals i:nth-child(4) { --x: 48; animation-delay: 3.4s; } .outro .o-petals i:nth-child(5) { --x: 62; animation-delay: 1.3s; } .outro .o-petals i:nth-child(6) { --x: 75; animation-delay: 2.2s; }
.outro .o-petals i:nth-child(7) { --x: 88; animation-delay: 4s; } .outro .o-petals i:nth-child(8) { --x: 15; animation-delay: 4.6s; } .outro .o-petals i:nth-child(9) { --x: 55; animation-delay: 5.2s; }
.outro .o-petals i:nth-child(10) { --x: 92; animation-delay: 1.6s; } .outro .o-petals i:nth-child(n+11) { display: none; }
@keyframes o-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(30px, 420px) rotate(320deg); } }
.outro h2 { margin: 6px 0 8px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease 1.2s, transform .7s cubic-bezier(.22,.8,.2,1) 1.2s; }
.outro .o-text { opacity: 0; transition: opacity .7s ease 1.45s; } .outro .o-text p { margin: 0 0 .6em; }
.outro.on h2, .outro.on .o-text { opacity: 1; transform: none; }
.outro .o-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.outro .o-btns .btn { opacity: 0; transform: translateY(10px); transition: opacity .5s ease calc(1.7s + var(--i) * .12s), transform .6s cubic-bezier(.22,.8,.2,1) calc(1.7s + var(--i) * .12s); }
.outro.on .o-btns .btn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .outro *, .guide, .guide * { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; } .outro .o-lf { transform: none; } .outro .o-stem, .outro .o-br { stroke-dashoffset: 0; } }

/* ---------- automation advisor: a calm card, one question at a time, results that grow ---------- */
.adv { --g: var(--copper); position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(18px, 3vw, 30px); padding: clamp(20px, 3.4vw, 36px);
  border-radius: 28px; background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--card); border: 1px solid var(--card-line);
  box-shadow: 0 40px 80px -60px rgba(0,0,0,.8); min-height: 300px; }
.adv::before { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto auto; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,119,58,.14), transparent); animation: mt-drift 20s ease-in-out infinite alternate; pointer-events: none; }
.adv button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; }
.adv svg { max-width: 100%; }
.adv-stage > * { animation: adv-in .5s cubic-bezier(.22,.8,.2,1) both; }
.adv-stage > .adv-in-back { animation-name: adv-back; }
@keyframes adv-in { from { opacity: 0; transform: translateX(calc(var(--dirx, 1) * 24px)); } }
@keyframes adv-back { from { opacity: 0; transform: translateX(calc(var(--dirx, 1) * -24px)); } }
[dir="rtl"] .adv { --dirx: -1; }

/* progress vine */
.adv-vine { display: block; width: min(100%, 320px); height: 34px; overflow: visible; }
.adv-vine .v-base { stroke: var(--line); stroke-width: 1.6; }
.adv-vine .v-stem { stroke: var(--g); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset .8s cubic-bezier(.4,.2,.2,1); }
.adv-vine .v-leaf path { stroke: var(--line); stroke-width: 1.4; transition: fill .5s, stroke .5s; }
.adv-vine .v-leaf.on path { fill: var(--g); stroke: var(--g); }
.adv-vine .v-leaf.on { animation: adv-leaf .6s cubic-bezier(.3,1.5,.4,1) both; transform-box: fill-box; }
.adv-vine .v-leaf.now path { stroke: var(--accent); stroke-width: 2; }
@keyframes adv-leaf { from { opacity: 0; } }

/* start */
.adv-start { display: grid; justify-items: center; text-align: center; gap: 20px; padding: clamp(14px, 3vw, 30px) 0; }
.adv-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.adv-meta span { padding: 6px 14px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); font-size: .86em; color: var(--soft); animation: mt-enter .5s ease both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.adv-go { min-width: 200px; justify-content: center; font-size: 1.02rem; padding: 14px 28px; box-shadow: 0 12px 30px -14px rgba(255,228,205,.45); }
.adv .btn { cursor: pointer; }

/* question */
.adv-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.adv-top .adv-vine { flex: 1 1 auto; min-width: 0; }
.adv-count { flex: none; padding: 5px 13px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); font-size: .8em; color: var(--soft); white-space: nowrap; }
.adv-q h3, .adv-res h3 { font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.45; margin: 0 0 6px; }
.adv-hint { color: var(--faint); margin: 0; font-size: .9em; }
.adv-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 20px; }
.adv-opt { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 14px 18px; text-align: start; line-height: 1.5; font-size: .98rem;
  border-radius: 16px; border: 1px solid var(--line); background: var(--chip); cursor: pointer;
  animation: mt-enter .45s cubic-bezier(.22,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms + 80ms);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.adv-opt:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 24px -18px rgba(0,0,0,.6); }
.adv-opt:active { transform: scale(.985); }
.adv-opt:focus-visible, .adv-link:focus-visible, .adv .btn:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
.adv-tick { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--line); transition: background .25s, border-color .25s; }
.adv-opts.multi .adv-tick { border-radius: 7px; }
.adv-opt.on { border-color: var(--g); background: rgba(201,119,58,.13); }
.adv-opt.on .adv-tick { background: var(--g); border-color: var(--g); }
.adv-opt.on .adv-tick::after { content: ""; position: absolute; left: 5px; top: 5px; width: 9px; height: 5px; border: solid #051008; border-width: 0 0 2.2px 2.2px; rotate: -45deg; animation: adv-tick .3s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes adv-tick { from { scale: 0; } }
.adv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.adv-nav .btn { min-width: 150px; justify-content: center; }
.adv-nav .btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.adv-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--soft); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.adv-link:hover { background: var(--chip); color: var(--fg); border-color: var(--accent); }

/* results */
.adv-res > .adv-vine { margin-bottom: 14px; }
.adv-ideas { display: grid; gap: 12px; margin-top: 18px; }
.adv-idea { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: var(--chip); border: 1px solid var(--line);
  animation: adv-rise .7s cubic-bezier(.22,.8,.2,1) both; animation-delay: calc(var(--i) * 170ms + 120ms); transition: transform .3s, border-color .3s; }
.adv-idea:hover { transform: translateY(-2px); border-color: var(--accent); }
.adv-idea.best { border-color: rgba(201,119,58,.55); background: linear-gradient(135deg, rgba(201,119,58,.16), rgba(201,119,58,.04)); }
@keyframes adv-rise { from { opacity: 0; transform: translateY(16px); } }
.adv-ic { flex: none; position: relative; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(201, 119, 58,.16); color: var(--accent); }
.adv-idea.best .adv-ic { background: rgba(201,119,58,.2); color: var(--g); }
.adv-ic svg { width: 24px !important; height: 24px !important; }
.adv-rank { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.adv-idea.best .adv-rank { background: var(--g); }
.adv-body { min-width: 0; }
.adv-best { display: inline-block; margin-bottom: 4px; font-size: .74rem; font-weight: 650; letter-spacing: .02em; color: var(--g); }
.adv-idea h4 { margin: 0 0 4px; font-size: 1.06rem; line-height: 1.45; }
.adv-idea p { margin: 0; color: var(--soft); font-size: .93em; line-height: 1.75; }
.adv-why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.adv-why-l { font-size: .76rem; color: var(--faint); }
.adv-chip { font-size: .74rem; padding: 3px 10px; border-radius: 999px; background: rgba(255,228,205,.06); border: 1px solid var(--line); color: var(--soft); }
.adv-nav.end { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 640px) {
  .adv { border-radius: 22px; } .adv-nav .btn { min-width: 0; flex: 1; } .adv-opt { min-height: 54px; padding: 12px 14px; }
  .adv-idea { padding: 16px; gap: 12px; } .adv-ic { width: 42px; height: 42px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) { .adv *, .adv::before { animation: none !important; transition: none !important; } }
.adv-nav.end .btn { white-space: nowrap; }

/* ---------- button look chosen in Studio (site-wide on <body>, or per section) ---------- */
.bx-bg .btn.primary { background: var(--bt-bg) !important; border-color: var(--bt-bg) !important; }
.bx-bg .btn.primary:hover { filter: brightness(1.1) saturate(1.05); }
.bx-fg .btn.primary { color: var(--bt-fg) !important; }
.bx-gh .btn.ghost { border-color: var(--bt-gh) !important; color: var(--bt-gh) !important; }
.bx-size .btn { padding: var(--bt-py) var(--bt-px) !important; font-size: var(--bt-fs) !important; }
.bx-shape .btn { border-radius: var(--bt-r) !important; }
/* ideas seed: its own colour and size */
.ideas .seed-orb { width: calc(108px * var(--seed-k, 1)); height: calc(108px * var(--seed-k, 1)); }
.ideas.seed-c .seed-orb { background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.22), transparent 62%), radial-gradient(circle, var(--seed-c), color-mix(in srgb, var(--seed-c) 55%, #000)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--seed-c) 70%, #fff), 0 18px 50px -12px color-mix(in srgb, var(--seed-c) 60%, transparent); }
.ideas.seed-t .seed-label, .ideas.seed-t .seed-hint { color: var(--seed-t); }
.ideas .seed-label { font-size: calc(clamp(1.4rem, 2.6vw, 1.9rem) * (.8 + .2 * var(--seed-k, 1))); }
.j-next { flex: none; }
@media (max-width: 640px) { .j-next .j-nl { display: none; } .j-next { padding: 7px 14px !important; } }
/* the steps shrink (and scroll) before the "next" button ever does */
.journey ol { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain; }
.journey ol::-webkit-scrollbar { display: none; }
.journey li { flex: none; }
@media (max-width: 640px) { .journey { gap: 6px; } .journey li + li::before { width: 10px; } .journey .j-lbl { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* guide leaf v2: near (circles the target, then talks), quiet (waits in a corner), nudge (one cheeky reminder) */
.guide .g-leaf { pointer-events: auto; cursor: pointer; }
.guide.near:not(.landed) .g-leaf { opacity: 0; }
.guide.near .g-leaf { transition: opacity .4s ease; }
.guide.quiet, .guide.nudge { left: 16px !important; top: auto !important; bottom: 84px; }
[dir="rtl"] .guide.quiet, [dir="rtl"] .guide.nudge { left: auto !important; right: 16px; }
.guide.quiet { width: auto; }
.guide.quiet .g-bub { display: none; }
.guide.quiet .g-leaf { width: 34px; height: 34px; opacity: .72; animation: g-peek 9s ease-in-out infinite; }
.guide.quiet .g-leaf:hover { opacity: 1; }
.guide.nudge .g-go, .guide.near .g-go { display: none; }
.guide.nudge .g-go { display: inline-block; }
.guide .g-leaf.hop { animation: g-hop 1.2s cubic-bezier(.3,1.4,.4,1), g-float 3.2s ease-in-out 1.2s infinite; }
@keyframes g-peek { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-16deg) translateY(-3px); } 92% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@keyframes g-hop { 0% { transform: translateY(40px) rotate(-40deg) scale(.6); opacity: 0; } 45% { transform: translateY(-16px) rotate(20deg) scale(1.15); opacity: 1; } 70% { transform: translateY(4px) rotate(-8deg); } 100% { transform: none; } }
.g-orbit { position: fixed; z-index: 69; pointer-events: none; border-radius: 50%; }
.g-orbit .g-spin { position: absolute; inset: 0; }
.g-orbit .g-leaf { position: absolute; left: 50%; top: -14px; width: 30px; height: 30px; margin-left: -15px; overflow: visible; filter: drop-shadow(0 4px 10px rgba(201,119,58,.55)); }
.g-orbit .g-body { fill: var(--copper); } .g-orbit .g-vein { fill: none; stroke: #2f6b45; stroke-width: 1.4; stroke-linecap: round; }
.g-orbit.go .g-spin { animation: g-orbit 2.6s cubic-bezier(.45,.05,.4,1) both; }
.g-orbit.go { animation: g-orbit-fade 2.6s ease both; }
@keyframes g-orbit { from { transform: rotate(-120deg); } to { transform: rotate(600deg); } }
@keyframes g-orbit-fade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .g-orbit { display: none; } .guide .g-leaf { animation: none !important; } }
/* journey bar: one rhythm. Same 6px frame on every side, 8px between parts, 40px controls */
.journey, [dir="rtl"] .journey { padding: 6px !important; gap: 8px; }
.journey .j-title { padding-inline: 12px 4px; line-height: 40px; }
.journey ol { padding: 8px 6px; margin-block: -8px; gap: 0; }
.journey a { height: 40px; padding: 0 8px; gap: 8px; }
.journey li + li::before { width: 18px; margin-inline: 2px; }
.j-dot { width: 24px; height: 24px; }
.journey li.now .j-dot::after { animation-name: j-ripple-s; }
@keyframes j-ripple-s { from { transform: scale(.95); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.j-next { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px !important; border-radius: 999px; line-height: 1; }
@media (max-width: 640px) {
  .journey, [dir="rtl"] .journey { gap: 6px; }
  .journey a { padding: 0 6px; }
  .journey li + li::before { width: 12px; margin-inline: 1px; }
  .j-next { padding: 0 16px !important; }
}
.journey ol { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); }
.j-next .j-nt::after { content: ":"; margin-inline-end: .35em; }
@media (max-width: 640px) { .j-next .j-nt::after { display: none; } }
/* no lonely last words: browsers that support it rebalance lines themselves */
p, li, .lead, .intro, .idea-text, figcaption { text-wrap: pretty; }
h1, h2, h3, h4, .eyebrow { text-wrap: balance; }

/* elements hidden from Studio */
[hidden] { display: none !important; }
.preview [data-el-off] { opacity: .32; outline: 1.5px dashed rgba(201, 119, 58,.7); outline-offset: 4px; }
.duo.one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

/* paragraph size and line spacing set in Studio (per section, or per element); inline big/small words keep the line even */
.t-lg, .t-sm { line-height: 1; }
.sec.fs-x :is(p, li, blockquote) { font-size: calc(var(--sec-fs) * 1em); }
.sec.fs-x :is(p, li, blockquote) :is(p, li, blockquote) { font-size: 1em; }
.sec.lh-x :is(p, li, blockquote) { line-height: var(--sec-lh); }
[data-fs]:is(p, li, blockquote), [data-fs] :is(p, li, blockquote) { font-size: calc(var(--el-fs) * 1em); }
[data-fs] :is(p, li, blockquote) :is(p, li, blockquote) { font-size: 1em; }
[data-lh], [data-lh] :is(p, li, blockquote) { line-height: var(--el-lh); }

/* ---------- proposal pages, second pass: warmer, more alive ---------- */
/* reading progress: a thin vine along the top edge */
.read-vine { position: fixed; z-index: 95; top: 0; inset-inline: 0; height: 3px; pointer-events: none; }
.read-vine i { display: block; height: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--copper), var(--copper)); border-start-end-radius: 3px; border-end-end-radius: 3px; box-shadow: 0 0 12px rgba(201,119,58,.55); }
:root[dir="rtl"] .read-vine i { transform-origin: right; background: linear-gradient(270deg, var(--copper), var(--copper)); }
/* cover: words arrive one by one, leaves drift down, rings turn slowly, a cue invites scrolling */
.cover h1.words .cw { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(6px); animation: cw-in .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--w) * 90ms + 380ms); }
@keyframes cw-in { to { opacity: 1; transform: none; filter: none; } }
.cv-leaves { display: none; }
.cv-leaves svg { position: absolute; top: -40px; left: calc(6% + var(--k) * 14%); width: calc(13px + var(--k) * 2.5px); fill: rgba(201,119,58,.2); stroke: rgba(255,228,205,.28); stroke-width: 1; stroke-linecap: round;
  animation: leaf-fall calc(16s + var(--k) * 2.3s) linear infinite; animation-delay: calc(var(--k) * -3.1s); }
@keyframes leaf-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(46px, 420px) rotate(170deg); } 88% { opacity: .8; } 100% { transform: translate(-24px, 900px) rotate(330deg); opacity: 0; } }
body.theme-paper .cover .deco { animation: deco-turn 90s linear infinite; }
@keyframes deco-turn { to { rotate: 360deg; } }
body.theme-paper .cover .meta span { padding: 6px 14px; border-radius: 999px; background: rgba(255,228,205,.07); border: 1px solid rgba(255,228,205,.16); }
body.theme-paper .cover .meta { gap: 10px; }
.cv-cue { position: absolute; z-index: 2; bottom: 22px; left: 50%; width: 28px; height: 46px; margin-left: -14px; border: 1.5px solid rgba(255,228,205,.45); border-radius: 18px; display: flex; justify-content: center; padding-top: 8px; opacity: 0; transform: translateY(8px); animation: rise .9s 2s forwards; }
.cv-cue span { width: 4px; height: 9px; border-radius: 2px; background: var(--sapwood); animation: cue 1.9s ease-in-out infinite; }
.cv-cue:hover { border-color: var(--copper); }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(15px); opacity: 0; } 100% { opacity: 0; } }
@media (max-height: 640px) { .cv-cue { display: none; } }
/* sections breathe: soft colour clouds drift behind the text */
body.theme-paper .sec { position: relative; }
body.theme-paper .sec > .wrap { position: relative; z-index: 1; }
body.theme-paper .sec-features, body.theme-paper .sec-cards, body.theme-paper .sec-steps, body.theme-paper .sec-duo { overflow: hidden; }
body.theme-paper .sec-features::before, body.theme-paper .sec-cards::before, body.theme-paper .sec-steps::before, body.theme-paper .sec-duo::before {
  content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; top: 6%; inset-inline-end: -220px;
  background: radial-gradient(circle, rgba(201,119,58,.13), transparent 66%); animation: cloud 26s ease-in-out infinite alternate; }
body.theme-paper .sec-cards::before, body.theme-paper .sec-duo::before { inset-inline-end: auto; inset-inline-start: -240px; background: radial-gradient(circle, rgba(201, 119, 58,.12), transparent 66%); }
@keyframes cloud { to { transform: translate(-60px, 120px) scale(1.15); } }
/* list items become soft cards with a numbered or icon badge; labels like "Problem:" read as small pills */
body.theme-paper .feat.layout-list { gap: 18px; }
body.theme-paper .feat.layout-list .f { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 24px 26px; border-radius: 22px;
  background: linear-gradient(165deg, #fff, rgba(255,248,240,.92)); border: 1px solid rgba(99,53,27,.10); box-shadow: 0 22px 46px -38px rgba(18,51,35,.5); }
body.theme-paper .feat.layout-list .ico { width: 52px; height: 52px; padding: 13px; border-radius: 16px; background: linear-gradient(150deg, var(--moss), var(--canopy)); box-shadow: 0 12px 24px -14px rgba(18,51,35,.75); }
.f-num { display: grid; place-items: center; padding: 0 !important; font-weight: 700; font-size: 1.15rem; color: var(--sapwood); }
body.theme-paper .feat.layout-list h3 { font-size: 1.18em; margin-bottom: .55em; }
.f-text .lbl { font-weight: 700; color: var(--head); }
body.theme-paper .f-text .lbl { display: inline-block; padding: 0 10px; margin-inline-end: 4px; border-radius: 999px; background: rgba(201,119,58,.17); color: var(--canopy); font-size: .86em; line-height: 1.9; }
.js-motion.theme-paper .feat .f { opacity: 0; transform: translateX(var(--fx, -26px)); transition: opacity .8s ease calc(var(--i, 0) * 70ms), transform .9s cubic-bezier(.22,.8,.2,1) calc(var(--i, 0) * 70ms), box-shadow .45s; }
:root[dir="rtl"] .js-motion.theme-paper .feat .f { --fx: 26px; }
.js-motion.theme-paper .feat .f.in { opacity: 1; transform: none; }
@media (hover: hover) { body.theme-paper .feat.layout-list .f:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -36px rgba(18,51,35,.6); } }
/* bullets layout: small cards with a leaf marker */
body.theme-paper .feat.layout-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.theme-paper .feat.layout-bullets .f { padding: 18px 20px; padding-inline-start: 50px; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(99,53,27,.09); }
body.theme-paper .feat.layout-bullets .f::before { inset-inline-start: 20px; top: 25px; width: 15px; height: 15px; border: 0; border-radius: 0 70% 0 70%; background: linear-gradient(135deg, var(--copper), var(--moss)); }
:root[dir="rtl"] body.theme-paper .feat.layout-bullets .f::before { border-radius: 70% 0 70% 0; }
body.theme-paper .feat.layout-bullets h3 { display: block; margin-bottom: 4px; }
body.theme-paper .feat.layout-bullets p { display: block; }
@media (max-width: 720px) { body.theme-paper .feat.layout-bullets { grid-template-columns: minmax(0, 1fr); } body.theme-paper .feat.layout-list .f { grid-template-columns: minmax(0, 1fr); padding: 20px; } }
/* cards: a glint passes on hover, a thin accent grows on top */
.card { position: relative; overflow: hidden; }
.card-glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1.1s ease; }
.card:hover .card-glint { transform: translateX(120%); }
.card.wide .card-glint { background: linear-gradient(110deg, transparent 35%, rgba(255,228,205,.13) 50%, transparent 65%); }
body.theme-paper .card.wide { background: radial-gradient(130% 150% at 100% 0%, var(--moss), var(--canopy) 58%, var(--night)); }
body.theme-paper .cards .card:not(.wide)::after { content: ""; position: absolute; top: 0; inset-inline: 22px; height: 3px; border-end-start-radius: 3px; border-end-end-radius: 3px;
  background: linear-gradient(90deg, var(--copper), var(--copper)); transform: scaleX(0); transition: transform .55s cubic-bezier(.22,.8,.2,1); }
body.theme-paper .cards .card:not(.wide):hover::after { transform: scaleX(1); }
/* steps: each step lifts, the last one keeps a soft pulse */
body.theme-paper .steps li { transition: transform .4s cubic-bezier(.22,.8,.2,1); }
@media (hover: hover) { body.theme-paper .steps li:hover { transform: translateX(var(--sx, 4px)); } :root[dir="rtl"] body.theme-paper .steps li:hover { --sx: -4px; } }
.js-motion.theme-paper .steps.in li:last-child::before { animation: step-pulse 2.6s ease-in-out 1.6s infinite; }
@keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,119,58,0); } 50% { box-shadow: 0 0 0 9px rgba(201,119,58,.22); } }
/* closing words read like a letter */
body.theme-paper .sec-text .body { position: relative; padding: 34px 36px 28px; border-radius: 24px; max-width: 72ch;
  background: linear-gradient(170deg, #fff, #fff7ee); border: 1px solid rgba(99,53,27,.10); box-shadow: 0 34px 64px -48px rgba(18,51,35,.55); }
body.theme-paper .sec-text .body::before { content: "❝"; position: absolute; top: -30px; inset-inline-start: 24px; font-size: 3.6rem; line-height: 1; color: var(--accent); opacity: .4; }
@media (max-width: 640px) { body.theme-paper .sec-text .body { padding: 26px 20px 20px; } }
/* Studio: an empty box of a two-sided section stays as a faint placeholder (hidden on the site) */
.preview .side-empty { opacity: .45; border-style: dashed; min-height: 72px; }
/* welcome: a line pointing to the path at the bottom */
.w-road { display: block; text-align: center; margin: 12px auto 0; max-width: 36ch; font-size: .92rem; color: rgba(255,228,205,.8);
  opacity: 0; transform: translateY(12px); filter: blur(8px); animation: w-in 1.1s cubic-bezier(.22,.8,.2,1) 2.7s forwards; }
.w-road svg { display: inline-block; vertical-align: -4px; margin-inline-end: 6px; width: 18px; height: 18px; fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
/* the path introduces itself once: a bubble above the bar, and the bar glows */
.road-coach { position: fixed; z-index: 96; inset-inline: 0; margin-inline: auto; width: min(420px, calc(100vw - 28px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 18px; background: rgba(18,51,35,.97); color: #FFE4CD; border: 1px solid rgba(201,119,58,.35); box-shadow: 0 24px 50px -20px rgba(0,0,0,.55), 0 0 26px -8px rgba(201,119,58,.5);
  opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.2,1); }
.road-coach.on { opacity: 1; transform: none; }
.road-coach p { margin: 0; font-size: .88rem; line-height: 1.75; }
.road-coach b { display: block; font-size: 1rem; margin-bottom: 2px; }
.road-coach button { border: 0; border-radius: 999px; padding: 8px 14px; background: #FFE4CD; color: #123323; font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.road-coach .rc-arrow { position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: rgba(18,51,35,.97); transform: rotate(45deg); border-end-end-radius: 3px;
  border-right: 1px solid rgba(201,119,58,.35); border-bottom: 1px solid rgba(201,119,58,.35); }
.journey.j-intro { animation: j-in 1.2s cubic-bezier(.22,.8,.2,1) .5s both, j-glow 1.8s ease-in-out 4; }   /* keeps the entrance animation, so removing the glow never replays it */
@keyframes j-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,119,58,0); } 50% { box-shadow: 0 0 0 7px rgba(201,119,58,.28), 0 0 30px rgba(201,119,58,.45); } }
.journey.j-intro li { animation: j-step .8s cubic-bezier(.22,.8,.2,1) calc(.9s + var(--i) * .18s) forwards, j-pop .55s cubic-bezier(.3,1.5,.5,1) calc(var(--i, 0) * 200ms + 300ms) both; }
@keyframes j-pop { 0% { transform: scale(.7); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* ---------- what to read next: a slow, soft neon breath; and arrows towards the button to press ---------- */
.sec.neon-next > .wrap::after { content: ""; position: absolute; inset: -16px clamp(-18px, -1.5vw, -8px); border-radius: 26px; pointer-events: none; z-index: -1;
  border: 1.5px solid rgba(201,119,58,.8); box-shadow: 0 0 22px rgba(201,119,58,.42), inset 0 0 22px rgba(201,119,58,.16); animation: neon-breath 3.4s ease-in-out infinite; }
.sec.neon-next > .wrap { position: relative; }
@media (max-width: 720px) { .sec.neon-next > .wrap::after { inset: -12px 6px; border-radius: 20px; } }
.sec.neon-next.cover > .wrap::after, .sec.neon-next.contact > .wrap::after { border-color: rgba(255,228,205,.6); box-shadow: 0 0 22px rgba(255,228,205,.3), inset 0 0 22px rgba(255,228,205,.1); }
@keyframes neon-breath { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.neon-arrows { display: inline-flex; align-items: center; gap: 0; margin-inline-end: 10px; vertical-align: middle; pointer-events: none; }
.neon-arrows i { width: 11px; height: 11px; margin-inline-start: -3px; border-top: 2.5px solid var(--copper); border-right: 2.5px solid var(--copper); border-radius: 2px; transform: rotate(45deg);
  filter: drop-shadow(0 0 4px rgba(201,119,58,.9)); opacity: .15; animation: arrow-run 1.8s ease-in-out infinite; }
:root[dir="rtl"] .neon-arrows i { transform: rotate(-135deg); }
.neon-arrows i:nth-child(2) { animation-delay: .22s; } .neon-arrows i:nth-child(3) { animation-delay: .44s; }
.neon-arrows.down { flex-direction: column; margin: 0 0 8px; }
.neon-arrows.down i, :root[dir="rtl"] .neon-arrows.down i { transform: rotate(135deg); margin: -4px 0 0; }
@keyframes arrow-run { 0%, 100% { opacity: .12; } 45% { opacity: 1; } }
.neon-cta { box-shadow: 0 0 0 0 rgba(201,119,58,.5); animation: cta-breath 2.8s ease-in-out infinite; }
@keyframes cta-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,119,58,0); } 50% { box-shadow: 0 0 0 6px rgba(201,119,58,.22), 0 0 22px rgba(201,119,58,.55); } }
.je-card .neon-row, .neon-row { display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .cover h1.words .cw { opacity: 1; transform: none; filter: none; animation: none; }
  .cv-leaves, .cv-cue span { display: none; }
  body.theme-paper .cover .deco, body.theme-paper .sec::before, .js-motion.theme-paper .feat .f { animation: none; transition: none; opacity: 1; transform: none; }
  .sec.neon-next > .wrap::after, .neon-arrows i, .neon-cta, .journey.j-intro, .journey.j-intro li { animation: none; opacity: 1; }
}
@media print { .read-vine, .cv-leaves, .cv-cue, .road-coach { display: none; } .sec.neon-next > .wrap::after { display: none; } }

/* welcome: the visitor can switch language before entering */
.w-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; opacity: 0; animation: w-in 1.1s cubic-bezier(.22,.8,.2,1) 3.1s forwards; }
.w-langs a { padding: 4px 12px; border-radius: 999px; font-size: .82rem; color: rgba(255,228,205,.75); text-decoration: none; border: 1px solid rgba(255,228,205,.18); transition: background .25s, color .25s, border-color .25s; }
.w-langs a:hover { color: #FFE4CD; border-color: rgba(201,119,58,.6); }
.w-langs a[aria-current] { background: rgba(201,119,58,.18); border-color: rgba(201,119,58,.55); color: #FFE4CD; }
@media (prefers-reduced-motion: reduce) { .w-langs { opacity: 1; animation: none; } }

/* ---------- cover, third pass: living light instead of falling leaves ----------
   a slow aurora of brand colours, growth rings rippling out from the tree-ring mark, a few drifting motes of light, and fine grain */
body.theme-paper .cover { isolation: isolate; }
body.theme-paper .cover::after { opacity: .55; }
.cv-aurora { position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(60px) saturate(1.15); opacity: .9;
  transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 16px), 0); transition: transform 1.6s cubic-bezier(.22,.8,.2,1); }
.cv-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.cv-aurora i:nth-child(1) { width: 52%; height: 60%; left: 4%; top: 6%; background: radial-gradient(circle at 40% 40%, rgba(201,119,58,.55), transparent 62%); animation: au-a 22s ease-in-out infinite alternate; }
.cv-aurora i:nth-child(2) { width: 46%; height: 52%; right: 6%; bottom: 0; background: radial-gradient(circle at 60% 50%, rgba(201, 119, 58,.45), transparent 62%); animation: au-b 26s ease-in-out infinite alternate; }
.cv-aurora i:nth-child(3) { width: 34%; height: 40%; left: 40%; top: 30%; background: radial-gradient(circle, rgba(255,228,205,.18), transparent 64%); animation: au-c 18s ease-in-out infinite alternate; }
@keyframes au-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14%, 10%) scale(1.15); } 100% { transform: translate(26%, -6%) scale(.95); } }
@keyframes au-b { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-18%, -12%) scale(.9); } 100% { transform: translate(-30%, 6%) scale(1.12); } }
@keyframes au-c { 0% { transform: translate(0, 0) scale(.9); opacity: .6; } 100% { transform: translate(-22%, 18%) scale(1.25); opacity: 1; } }
/* growth rings: soft circles that keep widening from the ring mark, like rings of a tree */
.cv-ripples { position: absolute; z-index: 0; pointer-events: none; inset-inline-start: 110px; top: 130px; width: 0; height: 0; }
.cv-ripples i { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; border: 1px solid rgba(255,228,205,.35);
  transform: scale(.06); opacity: 0; animation: ripple 12s cubic-bezier(.2,.6,.3,1) infinite; }
.cv-ripples i:nth-child(2) { animation-delay: 3s; border-color: rgba(201,119,58,.4); }
.cv-ripples i:nth-child(3) { animation-delay: 6s; }
.cv-ripples i:nth-child(4) { animation-delay: 9s; border-color: rgba(201, 119, 58,.45); }
@keyframes ripple { 0% { transform: scale(.06); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
/* motes: tiny points of light rising slowly, like pollen in a sunbeam */
.cv-motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cv-motes i { position: absolute; bottom: -10px; left: calc(4% + var(--k) * 6.8%); width: 3px; height: 3px; border-radius: 50%;
  background: #FFE4CD; box-shadow: 0 0 10px 2px rgba(255,228,205,.55); opacity: 0; animation: mote 14s linear infinite; animation-delay: calc(var(--k) * -1.37s); }
.cv-motes i:nth-child(4n) { width: 4px; height: 4px; animation-duration: 17s; } .cv-motes i:nth-child(4n+1) { width: 2px; height: 2px; animation-duration: 12s; } .cv-motes i:nth-child(5n) { animation-duration: 19s; }
.cv-motes i:nth-child(3n) { background: #b9e3c4; box-shadow: 0 0 10px 2px rgba(201,119,58,.6); }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 50% { transform: translate(18px, -45vh); } 85% { opacity: .5; } 100% { transform: translate(-12px, -95vh); opacity: 0; } }
.cv-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.theme-paper .cover .deco { animation: deco-breathe 9s ease-in-out infinite; }
@keyframes deco-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.04) rotate(6deg); } }
/* the title: each word rises out of a soft glow */
.cover h1.words .cw { animation-name: cw-glow; animation-duration: 1.1s; }
@keyframes cw-glow { 0% { opacity: 0; transform: translateY(.5em); filter: blur(8px); text-shadow: 0 0 24px rgba(201,119,58,.9); } 60% { opacity: 1; filter: blur(0); text-shadow: 0 0 18px rgba(201,119,58,.45); } 100% { opacity: 1; transform: none; filter: none; text-shadow: none; } }
.cover .eyebrow { position: relative; }
@media (max-width: 720px) { .cv-ripples { inset-inline-start: 40px; top: 70px; } .cv-ripples i { width: 360px; height: 360px; margin: -180px 0 0 -180px; } .cv-aurora { filter: blur(44px); } }
@media (prefers-reduced-motion: reduce) { .cv-aurora i, .cv-ripples i, .cv-motes i, body.theme-paper .cover .deco { animation: none; } .cv-ripples, .cv-motes { display: none; } }
@media print { .cv-aurora, .cv-ripples, .cv-motes, .cv-grain { display: none; } }

/* RTL justified text (1.8.5): body paragraphs and list text only, never centered blocks, headings or short labels */
:root[lang="fa"] .sec:not(.al-center):not(.al-end) .wrap :is(p, li, .f-t, .txt):not(.eyebrow, .sign, .stack, .ctx, .lbl):not(:is(.ideas, .je-card, .glass-lock, .welcome, .outro, .adv-start, .mt-done, .mt-status, .mt-note, .mt-hint, .journey, figcaption, .w-langs, nav, button, .btn) *) {
  text-align: justify;
  text-align-last: start;
  text-justify: inter-word;
  hyphens: none;
  word-spacing: .02em;
  text-wrap: pretty;
}
:root[lang="fa"] .sec .wrap :is(h1, h2, h3, h4) { text-align-last: auto; }

/* ---------- voice receptionist demo (section type: voicedemo) ---------- */
.vd { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); align-items: stretch; }
.vd-phone, .vd-panel { background: var(--card); border: 1px solid var(--card-line); border-radius: 24px; padding: clamp(18px, 2.4vw, 28px); }
.vd-phone { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.vd-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.vd-agent { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vd-seg button:disabled { opacity: .4; cursor: not-allowed; }
.vd-call .vd-chat-ico { display: none; }
.vd[data-mode="chat"] .vd-call svg { display: none; }
.vd[data-mode="chat"] .vd-call .vd-chat-ico { display: block; width: 32px; height: 32px; }
.vd.vd-on[data-mode="chat"] .vd-call .vd-chat-ico { display: none; }
.vd.vd-on[data-mode="chat"] .vd-call::after { content: "×"; font-size: 40px; line-height: 1; }
.vd-sys { align-self: center; font-size: .82em; color: var(--faint); border: 1px dashed var(--card-line); border-radius: 12px; padding: 6px 12px; text-align: center; }
.vd-agent-l { font-size: .8em; color: var(--faint); }
.vd-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--chip); border: 1px solid var(--card-line); }
.vd-seg button { font: inherit; font-size: .9em; border: 0; border-radius: 999px; padding: 6px 16px; background: transparent; color: var(--soft); cursor: pointer; transition: background .25s, color .25s; }
.vd-seg button[lang="fa"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
.vd-seg button[lang="en"] { font-family: "Bricolage Grotesque", system-ui, sans-serif; }
.vd-seg button[aria-pressed="true"] { background: var(--sapwood); color: var(--night); font-weight: 620; }
.vd.vd-on .vd-seg { opacity: .55; pointer-events: none; }

.vd-stage { --lv: 0; position: relative; width: min(240px, 70vw); aspect-ratio: 1; display: grid; place-items: center; margin: 6px 0; }
.vd-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vd-r { fill: none; stroke-width: 1.4; transform-origin: 100px 100px; transform-box: view-box;
  transform: scale(calc(1 + var(--lv) * (.04 + var(--k) * .025))); transition: transform .12s linear, opacity .4s, stroke .4s; }
.vd-r:nth-child(3n+1) { stroke: var(--copper); } .vd-r:nth-child(3n+2) { stroke: rgba(255, 228, 205, .55); } .vd-r:nth-child(3n) { stroke: var(--copper); }
.vd-r { opacity: calc(.85 - var(--k) * .08); }
.vd-core { fill: var(--sapwood); opacity: .12; }
.vd[data-state="idle"] .vd-rings { animation: vd-breathe 6s ease-in-out infinite; }
.vd[data-state="connecting"] .vd-r, .vd[data-state="think"] .vd-r { stroke-dasharray: 6 10; animation: vd-turn 9s linear infinite; animation-delay: calc(var(--k) * -1.3s); }
.vd[data-state="speak"] .vd-core { opacity: .3; }
.vd[data-state="hear"] .vd-r:nth-child(3n) { stroke: var(--sapwood); }
@keyframes vd-breathe { 50% { transform: scale(1.035); } }
@keyframes vd-turn { to { transform: rotate(360deg); } }

.vd-call { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--sapwood); color: var(--night); box-shadow: 0 10px 30px rgba(5, 16, 8, .45); transition: background .25s, color .25s, transform .2s; }
.vd-call:hover { background: var(--copper); }
.vd-call:active { transform: scale(.95); }
.vd-call svg { width: 34px; height: 34px; fill: currentColor; transition: transform .3s cubic-bezier(.22, .8, .2, 1); }
.vd.vd-on .vd-call { background: var(--bark); color: var(--sapwood); }
.vd.vd-on .vd-call:hover { background: var(--heartwood); }
.vd.vd-on .vd-call svg { transform: rotate(135deg); }

.vd-status { font-weight: 620; min-height: 1.6em; color: var(--fg); }
.vd-timer { min-height: 1.2em; font-size: .82em; color: var(--faint); font-variant-numeric: tabular-nums; direction: ltr; }
.vd-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.vd-steps li { font-size: .78em; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--card-line); color: var(--faint); transition: background .3s, color .3s, border-color .3s; }
.vd-steps li.now { border-color: var(--copper); color: var(--fg); }
.vd-steps li.done { background: rgba(120, 190, 140, .18); border-color: transparent; color: var(--fg); }

.vd-panel { display: flex; flex-direction: column; gap: 14px; min-height: 360px; }
.vd-log-h { font-size: .8em; color: var(--faint); letter-spacing: .02em; }
.vd-log { flex: 1; display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
.vd-log:empty::before { content: attr(data-empty); color: var(--faint); font-size: .92em; margin: auto; text-align: center; }
.vd-msg { text-align: start; max-width: 86%; padding: 9px 14px; border-radius: 18px; font-size: .95em; line-height: 1.75; animation: vd-in .25s ease-out; }
.vd-msg[lang="fa"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
.vd-bot { align-self: flex-start; background: var(--chip); border: 1px solid var(--card-line); border-end-start-radius: 6px; }
.vd-user { align-self: flex-end; background: rgba(201, 119, 58, .3); border-end-end-radius: 6px; }
.vd-cut::after { content: " …"; opacity: .6; }
@keyframes vd-in { from { opacity: 0; transform: translateY(6px); } }

.vd-done { display: grid; justify-items: center; gap: 2px; padding: 16px; border-radius: 18px; border: 1px solid var(--copper); background: rgba(201, 119, 58, .12); text-align: center; animation: vd-in .35s ease-out; }
.vd-done[hidden] { display: none; }
.vd-done-h { font-weight: 680; }
.vd-done-l { font-size: .8em; color: var(--faint); margin-top: 6px; }
.vd-done b { font-size: 1.9em; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--sapwood); }
.vd-done small { color: var(--faint); font-size: .78em; }

.vd-type { display: flex; gap: 8px; }
.vd-type[hidden] { display: none; }
.vd-type input { flex: 1; min-width: 0; font: inherit; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--card-line); background: var(--chip); color: var(--fg); }
.vd-type input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.vd-type .btn { padding: 10px 20px; }
.vd-try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85em; }
.vd-try-l { color: var(--faint); margin-inline-end: 4px; }
.vd-chip { font: inherit; font-size: inherit; padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--card-line); background: transparent; color: var(--soft); }
.vd-chip[lang="fa"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
button.vd-chip { cursor: pointer; border-style: solid; }
button.vd-chip:hover { border-color: var(--copper); color: var(--fg); }
.vd-offline .vd-try { display: none; }
.vd-note { margin-top: clamp(16px, 2vw, 24px); font-size: .9em; }

@media (max-width: 760px) {
  .vd { grid-template-columns: minmax(0, 1fr); }
  .vd-panel { min-height: 0; }
  .vd-log { max-height: 46vh; min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-r, .vd-rings, .vd-msg, .vd-done { animation: none !important; transition: none !important; transform: none !important; }
}

/* ---------- pricing plans (section type: pricing) ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 1.6vw, 18px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--card-line); border-radius: 24px; padding: clamp(20px, 2.4vw, 28px); }
.plan.featured { border-color: var(--copper); background: linear-gradient(180deg, rgba(201, 119, 58, .16), var(--card) 46%); box-shadow: 0 18px 50px rgba(5, 16, 8, .28); }
.plan h3 { margin: 0; font-size: 1.25em; }
.plan-tag { color: var(--soft); font-size: .92em; margin-top: -8px !important; }
.plan-badge { position: absolute; top: -12px; inset-inline-start: 22px; background: var(--copper); color: var(--night); font-size: .78em; font-weight: 650; padding: 3px 12px; border-radius: 999px; }
.plan-prices { display: grid; gap: 10px; padding-block: 14px; border-block: 1px solid var(--card-line); }
.plan-price b { display: block; font-size: 1.55em; font-weight: 750; line-height: 1.25; color: var(--head); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: .84em; color: var(--faint); }
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; font-size: .94em; }
.plan-feats li { position: relative; padding-inline-start: 26px; color: var(--soft); }
.plan-feats li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .5em; width: 13px; height: 7px; border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg); }
.plan .btn { justify-content: center; }
body.theme-paper .sec:not(.bg-canopy):not(.bg-wood):not(.bg-night) .plan.featured { box-shadow: 0 18px 40px rgba(18, 51, 35, .12); }

/* ---------- questions and answers (section type: faq) ---------- */
.qas { display: grid; gap: 10px; }
.qa { background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; padding: 0 20px; transition: border-color .25s; }
.qa[open] { border-color: var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 620; display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--head); }
.qa summary::-webkit-details-marker { display: none; }
.qa-x { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.qa-x::before, .qa-x::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 1.6px; background: var(--accent); transition: transform .25s; }
.qa-x::after { transform: rotate(90deg); }
.qa[open] .qa-x::after { transform: rotate(0); }
.qa-a { padding: 0 0 18px; color: var(--soft); }
.qa-a p + p { margin-top: .6em; }
@media (prefers-reduced-motion: reduce) { .qa-x::before, .qa-x::after { transition: none; } }

/* ---------- order / contact form (section type: leadform) ---------- */
.lf { background: rgba(5, 16, 8, .3); border: 1px solid rgba(255, 228, 205, .16); border-radius: 26px; padding: clamp(18px, 3vw, 34px); max-width: 920px; }
.lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.lf-f { display: grid; gap: 6px; font-size: .9em; }
.lf-f.wide { grid-column: 1 / -1; }
.lf-f span { color: var(--soft); }
.lf-f b { color: var(--accent); font-weight: 600; }
.lf input, .lf select, .lf textarea { font: inherit; font-size: 1em; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(255, 228, 205, .22); background: rgba(5, 16, 8, .45); color: var(--fg); }
.lf select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--copper) 50%), linear-gradient(135deg, var(--copper) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 34px; }
:root[dir="rtl"] .lf select { background-position: 18px 55%, 13px 55%; }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.lf textarea { resize: vertical; min-height: 84px; }
.lf-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 6px; font-size: .9em; color: var(--soft); }
.lf-consent input { width: 18px; height: 18px; margin-top: .3em; flex: none; accent-color: var(--copper); }
.lf-err { min-height: 1.4em; color: #ffb4a8; font-size: .9em; margin: 4px 0 10px; }
.lf .btn[type=submit] { min-width: 200px; justify-content: center; }
.lf-done { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 10px 0; }
.lf-done[hidden] { display: none; }
.lf-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 190, 140, .18); color: var(--copper); }
.lf-ok svg { width: 30px; height: 30px; }
.lf-done h3 { margin: 4px 0 0; font-size: 1.35em; }
.lf-done p { color: var(--soft); max-width: 52ch; }
.lf-code b { font-size: 1.3em; letter-spacing: .08em; color: var(--sapwood); }
.lf-done .channels { justify-content: center; margin-top: 6px; }
@media (max-width: 640px) { .lf-grid { grid-template-columns: minmax(0, 1fr); } .lf .btn[type=submit] { width: 100%; } }

/* ---------- nicer drop-downs (nice-select.js): forest glass list, soft open, staggered options ---------- */
.ns { position: relative; width: 100%; }
.ns-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; }
.ns-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; cursor: pointer;
  border-radius: 14px; border: 1px solid rgba(255,228,205,.22); background: rgba(5,16,8,.45); color: var(--sapwood, #FFE4CD); font: inherit; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ns-btn:hover { border-color: var(--copper, #C9773A); }
.ns-btn:focus-visible, .ns-open .ns-btn { outline: none; border-color: var(--copper, #C9773A); box-shadow: 0 0 0 4px rgba(201, 119, 58,.25); }
.ns-btn:disabled { opacity: .5; cursor: not-allowed; }
.ns-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ns-empty .ns-val { opacity: .62; }
.ns-chev { flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--copper, #C9773A); border-bottom: 2px solid var(--copper, #C9773A); transform: translateY(-2px) rotate(45deg); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.ns-open .ns-chev { transform: translateY(2px) rotate(225deg); }
.ns-bad .ns-btn { border-color: #e07a62; box-shadow: 0 0 0 4px rgba(224,122,98,.18); }
.ns-pop { position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: min(320px, 55vh); overflow: auto; overscroll-behavior: contain;
  border-radius: 16px; background: rgba(9,26,17,.97); color: var(--sapwood, #FFE4CD); border: 1px solid rgba(201, 119, 58,.45);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,228,205,.04) inset; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-origin: 50% 0; opacity: 0; transform: translateY(-6px) scale(.97); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1); scrollbar-width: thin; scrollbar-color: rgba(201, 119, 58,.6) transparent; }
.ns-up .ns-pop { top: auto; bottom: calc(100% + 8px); transform-origin: 50% 100%; transform: translateY(6px) scale(.97); }
.ns-pop.ns-show { opacity: 1; transform: none; }
.ns-pop li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; cursor: pointer; line-height: 1.5;
  opacity: 0; transform: translateY(4px); transition: background .15s, color .15s; }
.ns-pop.ns-show li { animation: ns-in .32s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--n, 0) * 22ms); }
@keyframes ns-in { to { opacity: 1; transform: none; } }
.ns-pop li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,228,205,.28); transition: .2s; }
.ns-pop li.ns-on { background: rgba(201, 119, 58,.22); }
.ns-pop li[aria-selected="true"] { color: #fff; font-weight: 600; }
.ns-pop li[aria-selected="true"]::before { border-color: var(--sapwood, #FFE4CD); background: radial-gradient(circle, var(--copper, #C9773A) 0 4px, var(--sapwood, #FFE4CD) 4.5px); }
.ns-pop li.ns-ph { opacity: .55; font-size: .92em; }
.ns-pop.ns-show li.ns-ph { animation-name: ns-in-ph; }
@keyframes ns-in-ph { to { opacity: .55; transform: none; } }
.ns-pop li.ns-ph::before { border-style: dashed; }
.ns-pop li[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
/* language switcher in the header: a small pill */
.ns-lang { width: auto; }
.ns-lang .ns-btn { min-height: 0; padding: 6px 14px; border-radius: 999px; background: transparent; border-color: var(--line, rgba(255,228,205,.22)); font-size: .88em; gap: 8px; }
.ns-lang .ns-pop { inset-inline: auto 0; min-width: 150px; }
@media (prefers-reduced-motion: reduce) { .ns-pop, .ns-pop li, .ns-chev { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } }
.lang:has(.ns)::after { display: none; }

/* Section surfaces also set accessible accent pairs, independent of page theme. */
.bg-canopy, .bg-wood, .bg-night { --accent: var(--copper-light); --accent-ink: var(--night); --focus: var(--copper-light); }
.bg-paper { --accent: var(--bark); --accent-ink: var(--sapwood); --focus: var(--bark); --faint: var(--moss); }
.lock-mark { object-fit: contain; height: 54px; border-radius: 50%; }

img[src="/assets/logo.svg"] { object-fit: contain; border-radius: 50%; }

/* The language control sits on either page surface; its menu stays dark. */
.ns-lang .ns-btn { color: var(--fg); }
.ns-btn:focus-visible, .ns-open .ns-btn { border-color: var(--focus); }