/* ============================================================
   Ringo - premium platform theme
   Clean, modern, hi-tech. RTL-first. Max width 1400px.
   Tokens mirror design-tokens.json.
   ============================================================ */
:root{
  --navy:#0416c8;
  --navy-800:#030fa0;
  --navy-900:#000444;
  --blue:#cfd6fd;
  --blue-600:#5a4fd6;
  --blue-050:#eef0fe;
  --taupe:#957cfb;
  --taupe-050:#f5f2fe;
  /* lavender accent from the brand mark */
  --neon:#957cfb;
  --neon-2:#b9a7fd;
  --neon-050:#f5f2fe;
  --neon-border:#ded5fe;
  --neon-ink:#4a35b8;
  --ink:#000444;
  --body:#454a63;
  --muted:#6b7089;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --line:#e8e9f2;
  --line-2:#dbdeee;
  --white:#ffffff;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,4,68,.05), 0 8px 24px -16px rgba(0,4,68,.26);
  --shadow:0 24px 60px -28px rgba(0,4,68,.32);
  --maxw:1400px;
  --font:"Google Sans","Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Diagonal brand gradient (45deg = bottom-left -> top-right, the same run as the
     brand mark). The light end stops at #6c5fed rather than the mark's #927afa:
     white button text needs 4.5:1 at EVERY point, and #927afa only reaches 3.3:1. */
  --grad:linear-gradient(45deg,#0416c8 0%,#6c5fed 100%);
  --grad-hover:linear-gradient(45deg,#030fa0 0%,#5a49e0 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.14;letter-spacing:-.01em}
strong,b{font-weight:700;color:var(--ink)}
::selection{background:var(--navy);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:860px}
section{position:relative}

/* icons - inline stroke SVG */
.i{display:inline-flex;width:1.25em;height:1.25em;flex:none}
.i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:600;font-size:.98rem;line-height:1;padding:14px 24px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s;white-space:nowrap}
.btn .i{width:1.1em;height:1.1em}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -12px rgba(4,22,200,.7)}
.btn-primary:hover{background:var(--grad-hover);box-shadow:0 16px 30px -14px rgba(4,22,200,.75)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-lg{padding:17px 32px;font-size:1.05rem}
.cta-short{display:none}   /* shorter CTA label, shown only on mobile hero */
/* The arrow glyph points left, which reads as "forward" in Hebrew. On the English
   page the whole document is LTR, so mirror it to keep pointing forward. */
[dir="ltr"] .i-arrow{transform:scaleX(-1)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--navy);background:var(--neon-050);border:1px solid var(--neon-border);padding:7px 14px;border-radius:var(--radius-pill)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--neon);flex:none;box-shadow:0 0 0 3px rgba(149,124,251,.18)}

/* logo */
.logo{display:inline-flex;align-items:center;direction:ltr}
/* Optical centring: the descender on the "g" makes the artwork's bounding box
   taller than its visual mass, so a box-centred logo reads as sitting too high.
   Measured offset between the letter-body band and the box centre is ~7% of the
   height - nudge down by that. Percentage keeps it correct at any logo height.
   Applied only to the bundled wordmark, not to a user's WP Custom Logo. */
.logo-img{height:28px;width:auto;transform:translateY(7%)}
/* WP Custom Logo (Customizer → Site Identity) - constrain size + whiten in footer. */
.logo .custom-logo,.logo .custom-logo-link img{height:28px;width:auto;max-width:none;display:block}
.site-footer .logo .custom-logo,.site-footer .logo .custom-logo-link img{height:34px;filter:brightness(0) invert(1)}
/* Whiten the standard (dark) logo when used on dark surfaces, e.g. the footer. */
.logo-img--light{filter:brightness(0) invert(1)}
.site-footer .logo-img{height:34px}
.logo .logo-text{font-family:var(--font);font-weight:700;font-size:28px;line-height:1;color:var(--ink);letter-spacing:-.03em;text-transform:lowercase}
.site-footer .logo .logo-text{color:#fff}

/* ---------- Language switch ---------- */
/* Reads as one of the nav links, just latin and slightly heavier. */
.lang-switch{font-size:.9rem;font-weight:700;color:var(--body);padding:8px 12px;transition:color .2s;direction:ltr}
.lang-switch:hover{color:var(--navy)}
.lang-switch--menu{display:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)}
body.menu-open .site-header{background:#fff}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;list-style:none;white-space:nowrap}
.nav-links a{position:relative;font-weight:500;font-size:.96rem;color:var(--body);padding:8px 12px;transition:color .2s}
.nav-links a:not(.lang-switch)::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--neon);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;position:relative;z-index:90}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Full-screen mobile menu overlay */
.mobile-menu{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:#fff;padding:88px 28px 40px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu-links{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:340px}
.mobile-menu-links > a{font-size:1.24rem;font-weight:700;color:var(--ink);padding:13px 8px;letter-spacing:-.01em;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
body.menu-open .mobile-menu-links > a{opacity:1;transform:none}
body.menu-open .mobile-menu-links > a:nth-child(1){transition-delay:.06s}
body.menu-open .mobile-menu-links > a:nth-child(2){transition-delay:.12s}
body.menu-open .mobile-menu-links > a:nth-child(3){transition-delay:.18s}
body.menu-open .mobile-menu-links > a:nth-child(4){transition-delay:.24s}
body.menu-open .mobile-menu-links > a:nth-child(5){transition-delay:.3s}
.mobile-menu-cta{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin-top:26px}
.mobile-menu-cta .btn{width:100%;justify-content:center}
body.menu-open .sticky-cta{display:none}

/* ---------- Hero ---------- */
.hero{min-height:calc(100vh - 72px);display:flex;align-items:center;padding:48px 0;overflow:hidden;background:
  radial-gradient(60% 50% at 88% 0%, rgba(207,214,253,.20), transparent 70%),
  radial-gradient(50% 40% at 8% 20%, rgba(149,124,251,.14), transparent 70%),
  var(--bg)}
.hero > .wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(1.6rem,2.7vw,2.35rem);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.25;margin:4px 0 18px}
.hero h1 .accent{color:var(--neon)}
.hero .lead{font-size:1.2rem;color:var(--body);max-width:540px;margin-bottom:32px;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:22px;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:10px}
.hero-note .i{width:1.05em;height:1.05em;color:var(--blue-600)}
.hero-note b{color:var(--ink);font-weight:600}

/* app window mock */
.mock{position:relative}
.mock-glow{position:absolute;inset:-14% -16%;z-index:0;pointer-events:none;background:radial-gradient(42% 42% at 22% 18%, rgba(207,214,253,.55), transparent 70%),radial-gradient(40% 40% at 82% 88%, rgba(149,124,251,.4), transparent 70%);filter:blur(26px);opacity:.85;animation:glowpulse 7s var(--ease) infinite}
@keyframes glowpulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.06);opacity:1}}
.window{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.window-bar{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.window-bar .wtitle{font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.window-body{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;padding:18px}
.invite{border-radius:14px;padding:22px 18px;color:#fff;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(155deg,var(--navy),var(--navy-900));background-size:cover;background-position:center}
.invite .names,.invite .save,.invite .date,.invite .mono{position:relative;text-shadow:0 1px 10px rgba(0,4,68,.35)}
.invite .mono{width:46px;height:46px;border:1.4px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.02em}
.invite .save{font-size:.66rem;letter-spacing:.32em;opacity:.8}
.invite .names{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin-top:6px}
.invite .date{font-size:.82rem;opacity:.85;margin-top:4px}
.kpis{display:flex;flex-direction:column;gap:12px}
.kpi{border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:#fff}
.kpi .kpi-top{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8rem}
.kpi .kpi-top .i{width:1.05em;height:1.05em;color:var(--navy)}
.kpi .kpi-val{font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-top:6px}
.kpi .kpi-val small{font-size:.8rem;font-weight:600;color:var(--muted)}
.bar{height:6px;border-radius:6px;background:var(--bg-soft);margin-top:10px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--navy),var(--blue))}
.bar.gold > i{background:linear-gradient(90deg,#7d63e8,var(--neon))}
.kpi .avatars{display:flex;align-items:center;margin-top:12px}
.kpi .av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-inline-start:-9px;flex:none}
.kpi .av:first-child{margin-inline-start:0}
.kpi .av.a1{background:linear-gradient(135deg,#0416c8,#5a4fd6)}
.kpi .av.a2{background:linear-gradient(135deg,#957cfb,#4a35b8)}
.kpi .av.a3{background:linear-gradient(135deg,#5a4fd6,#cfd6fd)}
.kpi .av.a4{background:linear-gradient(135deg,#957cfb,#b9a7fd)}
.kpi .av.more{width:auto;min-width:26px;padding:0 9px;border-radius:999px;background:var(--bg-soft);color:var(--navy);font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;border-color:var(--line)}
.mock-tag{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:var(--ink)}
.mock-tag .i{width:1.1em;height:1.1em;color:var(--navy)}
.mock-tag.t1{top:-16px;inset-inline-start:-18px}
/* Pinned beside the budget figure it describes: that line's centre measures
   80.7% down the mock, and the tag is 43px tall, hence the -22px. Centring
   with translateY is not available - these tags float on a transform. */
.mock-tag.t2{top:calc(80.7% - 22px);bottom:auto;inset-inline-end:-26px}
/* Same rule as t2: pinned to the figure it labels. The RSVP count's centre
   measures 35.9% down the mock; -22px is half the tag. */
.mock-tag.t3{top:calc(35.9% - 22px);inset-inline-end:-26px}
@media(hover:hover){.mock-tag.t1{animation:float 6s var(--ease) infinite}.mock-tag.t2{animation:float 6s var(--ease) infinite 1.4s}.mock-tag.t3{animation:float 6s var(--ease) infinite .7s}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- Logos / trust strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0}
.strip .stat{text-align:center}
.strip .stat b{display:block;font-size:1.6rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.strip .stat span{font-size:.86rem;color:var(--muted)}

/* ---------- Section frame ---------- */
.sec{padding:92px 0}
.sec.tight{padding:92px 0}
.sec-head{max-width:720px;margin:0 auto 60px;text-align:center}
.sec-head.start{margin-inline:0;text-align:start}
.kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);margin-bottom:14px}
.sec-head h2{position:relative;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.kicker{color:var(--neon-ink)}
.sec-head p{font-size:1.12rem;color:var(--body)}
/* Balance centred headings/sub-lines so the last line never orphans a single
   word (e.g. a lone "RingoAI." under a full-width sentence). */
.sec-head h2,.sec-head p,.hero h1,.hero .lead,.showcase-text h2,.ai-grid h2{text-wrap:balance}
/* balance evens out short headings; pretty is the one that refuses to leave a
   single word alone on the last line, which is what long body copy needs. The
   English footnote was ending on a lone "purchased." Ignored by browsers that
   do not support it, so nothing regresses without it. */
/* pretty refuses to leave a single word alone on a last line. balance was tried
   on the footnote and made it worse: the explicit break splits it into two
   blocks, and balance evens each one separately rather than across the pair. */
.price-note,.faq-a p,.jstep p,.lead-txt p,.feature-body p,.ai-grid p,.foot-about p{text-wrap:pretty}

/* ---------- Value pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.pillar:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.pillar .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-050);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pillar .ic .i{width:22px;height:22px}
.pillar h3{font-size:1.12rem;margin-bottom:6px}
.pillar p{font-size:.96rem;color:var(--muted)}

/* ---------- Journey (connected timeline) ---------- */
.journey{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.journey-track{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;padding-top:24px}
/* Span the trail from the FIRST node centre to the LAST, not edge-to-edge: with a
   column gap the centres sit inside 10%/90%, so a full-width path misses them.
   Half a column = (100% - 4 gaps) / 5 / 2. The path then runs x:0→1000 across the
   five nodes exactly. */
/* The wrapper simply covers the track; ringoTrail() sizes the viewBox to match it
   1:1 in pixels and writes the path from the measured node centres. Because the
   viewBox matches the box, getTotalLength() is already the on-screen length - no
   non-scaling-stroke and no aspect-ratio correction needed. */
.journey-path-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.journey-path{display:block;width:100%;height:100%;overflow:visible}
.journey-path path{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:6 8;opacity:.75}
/* Hidden until JS sets the measured dash. The oversized gap makes a pattern repeat
   (the stray second segment) impossible even before that runs. */
.journey-path .jfill{stroke:var(--neon);stroke-width:3;stroke-dasharray:4000px 40000px;stroke-dashoffset:4000px;opacity:1;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){.journey-path .jfill{stroke-dasharray:none;stroke-dashoffset:0}}
.jstep{position:relative;z-index:1;text-align:center;background:none;border:none;padding:0}
.jstep:nth-of-type(even){margin-top:76px}
.jnode{width:70px;height:70px;border-radius:50%;margin:0 auto 22px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);position:relative}
.jnode .i{width:28px;height:28px;color:var(--navy)}
.jbadge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:24px;height:24px;padding:0 7px;border-radius:var(--radius-pill);background:var(--navy);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.jstep h3{font-size:1.12rem;margin-bottom:7px}
.jstep p{font-size:.92rem;color:var(--muted);max-width:210px;margin:0 auto}

/* An inner heading for content that was folded in from its own section - lighter
   than .sec-head so the page still reads as one section, not two. */
.sub-head{text-align:center;max-width:680px;margin:56px auto 30px}
.sub-head h3{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.sub-head p{font-size:1.02rem;color:var(--body)}

/* ---------- RSVP + messages ---------- */
/* Sits inside the panel head now, so it runs inline instead of floating
   centred in its own band. */
.chan-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin:17px 0 0}
.chan-label{font-size:.88rem;color:var(--muted)}
.chans{display:flex;flex-wrap:wrap;gap:8px}
.chan{display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:600;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);padding:6px 13px;border-radius:var(--radius-pill)}
.chan .i{width:1.05em;height:1.05em;color:var(--navy)}
.rsvp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rsvp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:border-color .3s,box-shadow .3s}
.rsvp-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.rsvp-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--neon-050);border:1px solid var(--neon-border);margin-bottom:14px}
.rsvp-ic .i{width:1.2em;height:1.2em;color:var(--neon-ink)}
.rsvp-card h3{font-size:1.02rem;margin-bottom:6px}
.rsvp-card p{font-size:.93rem;color:var(--muted)}

/* ---------- Trilingual ---------- */
/* Three points across, matching the other card rows. The paired invitation
   mock-ups that used to sit beside them were dropped. */
.langs-body{max-width:1100px;margin-inline:auto}
.lang-points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lang-points li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .3s,box-shadow .3s}
.lang-points li:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.lang-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:13px;background:var(--blue-050);border:1px solid var(--line)}
.lang-ic .i{width:1.2em;height:1.2em;color:var(--navy)}
.lang-points strong{font-size:1.02rem;color:var(--ink);font-weight:700}
.lang-points li > span:not(.lang-ic){font-size:.93rem;color:var(--muted);line-height:1.6}

.price-note{margin-top:26px;text-align:center;font-size:.86rem;color:var(--muted);max-width:760px;margin-inline:auto;line-height:1.6}

/* ---------- Footer contact ---------- */
.foot-contact{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
/* The link follows the page direction, so the icon leads on the right in Hebrew
   and on the left in English. Only the address itself is pinned LTR - isolated,
   so its dots and hyphen cannot reorder inside an RTL line. */
.foot-mail{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;color:rgba(255,255,255,.86);transition:color .2s}
.foot-mail .mail-addr{direction:ltr;unicode-bidi:isolate}
.foot-mail:hover{color:#fff}
.foot-social{display:flex;gap:10px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);transition:background .2s,color .2s,border-color .2s}
.foot-social a:hover{background:#fff;color:var(--navy);border-color:#fff}
.foot-social .i{width:1.15em;height:1.15em}

/* ---------- Features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{position:relative;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column}
.feature:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
/* screenshot / preview area */
.feature-shot{aspect-ratio:16/10;position:relative;background:linear-gradient(150deg,var(--blue-050),#f8f9ff);border-bottom:1px solid var(--line);overflow:hidden}
.feature-shot img{width:100%;height:100%;object-fit:cover;display:block}
.feature-mock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px}

/* ---------- Platform card previews ----------
   Six mock-ups built from elements instead of screenshots: crisp at any size,
   on-palette, direction-aware, nothing to download. Sizes are in em so one
   font-size on .fmk scales a whole mock for the phone grid. */
.fmk{width:100%;max-width:250px;font-size:11px;color:var(--ink)}
.fmk .fmk-l{display:block;height:.62em;border-radius:.4em;background:var(--line-2)}
.fmk .fmk-l.w1{width:82%}.fmk .fmk-l.w2{width:64%}.fmk .fmk-l.w3{width:47%}
.fmk .fmk-bar{height:.55em;border-radius:.4em;background:var(--bg-soft);overflow:hidden}
.fmk .fmk-bar i{display:block;height:100%;border-radius:.4em;background:var(--grad)}
.fmk .fmk-av{width:1.7em;height:1.7em;border-radius:50%;background:var(--blue-050);border:1px solid var(--line);flex:none}
.fmk .fmk-head{display:flex;align-items:baseline;gap:.4em;margin-bottom:.7em}
.fmk .fmk-num{font-size:1.9em;font-weight:700;letter-spacing:-.02em;line-height:1}
.fmk .fmk-num small{font-size:.5em;font-weight:600;color:var(--muted);margin-inline-start:.3em}
.fmk .fmk-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55em}
.fmk .fmk-rows li{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid var(--line);border-radius:.7em;padding:.45em .6em}
.fmk .fmk-rows li .fmk-l{flex:1}

/* the invitation preview - a card, not a form */
.fmk-inv{border-radius:14px;padding:1.5em 1.2em;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:.35em;
  background:linear-gradient(155deg,rgba(4,22,200,.72),rgba(0,4,68,.92)),linear-gradient(45deg,var(--neon),var(--blue))}
.fmk-mono{width:2.4em;height:2.4em;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:.85em;font-weight:700;letter-spacing:.02em;margin-bottom:.5em}
.fmk-save{font-size:.62em;letter-spacing:.28em;opacity:.8}
.fmk-names{font-size:1.32em;font-weight:700;letter-spacing:-.01em}
.fmk-date{font-size:.72em;opacity:.85;direction:ltr;unicode-bidi:isolate}

/* RSVP - a headline number, a bar, then who has answered */
.fmk-rsvp .fmk-bar{margin-bottom:.9em}
.fmk-dot{width:.6em;height:.6em;border-radius:50%;flex:none}
.fmk-dot.ok{background:var(--navy)}
.fmk-dot.wait{background:var(--line-2)}

/* guests - the same list, tagged by side/group */
.fmk-guests .fmk-tag{width:1.6em;height:.62em;border-radius:.4em;background:var(--neon-050);border:1px solid var(--neon-border);flex:none}
.fmk-guests .fmk-tag.alt{background:var(--blue-050);border-color:var(--blue)}

/* seating - round tables with seats, one selected */
.fmk-seat{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;max-width:230px}
.fmk-table{position:relative;aspect-ratio:1;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.fmk-table b{font-size:.85em;font-weight:700;color:var(--muted)}
.fmk-table i{position:absolute;top:50%;inset-inline-start:50%;width:.42em;height:.42em;margin:-.21em 0 0 -.21em;border-radius:50%;background:var(--line-2);
  transform:rotate(var(--s)) translateY(-1.45em)}
.fmk-table.on{border-color:var(--neon);box-shadow:0 0 0 2px var(--neon-050)}
.fmk-table.on b{color:var(--neon-ink)}
.fmk-table.on i{background:var(--neon)}

/* venues - three candidates, the shortest bar is the best cost per guest */
.fmk-venues{display:flex;flex-direction:column;gap:.9em}
.fmk-vrow{display:flex;flex-direction:column;gap:.45em}
.fmk-vrow .fmk-bar i{background:var(--line-2)}
.fmk-vrow.best .fmk-bar i{background:var(--grad)}
.fmk-vrow.best .fmk-l{background:var(--navy)}

/* budget - a share used, then the rows behind it */
.fmk-budget .fmk-brow{display:flex;align-items:center;gap:.7em;margin-top:.65em}
.fmk-budget .fmk-brow .fmk-bar{flex:1}
.fmk-budget .fmk-brow:nth-child(3) .fmk-bar i{background:var(--neon)}
.fmk-budget .fmk-brow:nth-child(4) .fmk-bar i{background:var(--blue)}
.fm-card,.fmk-card{width:100%;max-width:235px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);padding:13px}
.fm-bar{display:flex;gap:5px;margin-bottom:13px}
.fm-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.fm-row{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.fm-chip{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--navy),var(--navy-900));color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.fm-chip .i{width:18px;height:18px}
.fm-t{height:9px;width:56%;border-radius:5px;background:var(--gray)}
.fm-l{display:block;height:8px;border-radius:5px;background:var(--bg-soft);margin-bottom:8px}
.fm-l.w1{width:92%}.fm-l.w2{width:76%}.fm-l.w3{width:60%;background:linear-gradient(90deg,var(--neon-050),var(--blue-050))}
.feature-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.feature-body h3{font-size:1.14rem;margin-bottom:0;display:flex;align-items:center;gap:10px}
.feature-body h3 .ic-sm{width:34px;height:34px;border-radius:9px;background:var(--blue-050);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.feature-body h3 .ic-sm .i{width:18px;height:18px}
/* "and more" cue under the features grid */
.feature-more{margin:40px 0 0;text-align:center}
.more-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:18px}
.more-chips span{font-size:.9rem;font-weight:500;color:var(--body);background:var(--bg-soft);border:1px solid var(--line);padding:8px 15px;border-radius:var(--radius-pill)}
.more-line{font-size:1.02rem;color:var(--muted)}
.more-line a{color:var(--navy);font-weight:700;display:inline-flex;align-items:center;gap:5px;margin-inline-start:6px}
.more-line a .i{width:1em;height:1em}
.more-line a:hover{color:var(--blue-600)}

/* ---------- Brand band ----------
   A deep full-bleed break between the guest section and the journey. The
   texture is the Ringo mark tiled twice at different sizes; the two layers
   drift in opposite directions as the band passes, which is what turns a flat
   repeat into depth. --mbp is 0..1, set by main.js from scroll position, and
   both layers sit still at 0 if that never runs. */
.markband{position:relative;overflow:hidden;isolation:isolate;padding:150px 0;color:#fff;
  min-height:66vh;display:flex;align-items:center;
  background:radial-gradient(80% 130% at 88% 8%, rgba(149,124,251,.20), transparent 62%),
             linear-gradient(155deg,var(--navy-900) 0%,#02096b 58%,#061590 100%)}
/* Photograph, then a scrim, then the marks. The scrim is not decoration - it is
   what buys the white headline its contrast over a bright photo, so it moves
   with the photo's opacity if either is ever retuned. */
.mb-photo{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:url("../img/band.jpg") center top/cover no-repeat;opacity:.62;
  transform:scale(calc(1 + var(--mbp,0) * .07)) translateY(calc(var(--mbp,0) * -18px));
  will-change:transform}
.markband::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(155deg,rgba(0,4,68,.74) 0%,rgba(2,9,107,.70) 55%,rgba(6,21,144,.64) 100%)}
.mb-layer{position:absolute;inset:-25% -18%;z-index:-1;pointer-events:none;
  background-image:url("../img/mark-tile.svg");background-repeat:repeat;will-change:transform}
/* Bigger tiles and lower opacity: at 300px/164px the field read as a pattern
   competing with the headline rather than as texture behind it. */
.mb-back{background-size:440px;opacity:.035;transform:translate3d(calc(var(--mbp,0) * -70px),calc(var(--mbp,0) * -30px),0)}
.mb-front{background-size:250px;opacity:.018;transform:translate3d(calc(var(--mbp,0) * 120px),calc(var(--mbp,0) * 46px),0)}
/* A spotlight crossing the band, and one big mark sitting behind the words.
   Both are centred with physical left/translate rather than logical inset: they
   are symmetric decoration, and inset-inline-start plus a -50% translate lands
   off-centre by its own width once the direction flips. */
.mb-glow{position:absolute;z-index:-1;top:50%;left:50%;width:min(78vw,880px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(149,124,251,.26),transparent 62%);
  transform:translate(-50%,-50%) translateX(calc(var(--mbp,0) * 200px - 100px))}
.mb-mark{position:absolute;z-index:-1;top:50%;left:50%;width:min(56vw,540px);aspect-ratio:183/115;
  background:url("../img/mark-white.svg") center/contain no-repeat;opacity:.03;
  transform:translate(-50%,-50%) rotate(calc(var(--mbp,0) * 10deg - 5deg)) scale(calc(1 + var(--mbp,0) * .14))}
/* The words ride against the layers - the last, smallest depth cue. */
.mb-copy{text-align:center;position:relative;width:100%;
  transform:translateY(calc(var(--mbp,0) * -26px + 13px))}
.mb-copy h2{color:#fff;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
/* The sign-off is a coda, not a third statement. It keeps the page direction:
   an LTR override here reversed the Hebrew word sitting next to the logo. The
   wordmark is the real file, whitened for the dark band. */
.mb-with{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:24px;
  font-size:1.15rem;font-weight:500;color:#fff;opacity:.88}
.mb-logo{height:1.45em;width:auto;filter:brightness(0) invert(1)}
/* Every layer here is positioned by --mbp, so pinning it at 0 stops all four at
   once. transform:none would not do - it would throw away the centring these
   layers get from the same declaration. */
@media(prefers-reduced-motion:reduce){.markband{--mbp:0 !important}}

/* ---------- AI band ---------- */
.ai{border-radius:28px;overflow:hidden;position:relative;color:#fff;background:radial-gradient(120% 140% at 90% 0%, rgba(207,214,253,.35), transparent 55%), linear-gradient(150deg,var(--navy),var(--navy-900))}
.ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:60px}
.ai .kicker{color:var(--blue)}
.ai h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.ai p{color:rgba(255,255,255,.82);font-size:1.08rem;margin-bottom:22px;max-width:460px}
.ai-points{display:flex;flex-direction:column;gap:12px}
.ai-point{display:flex;align-items:center;gap:12px;font-size:1rem;color:#fff}
.ai-point .ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none}
.ai-point .ic .i{width:18px;height:18px}
.ai-visual{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:24px;backdrop-filter:blur(8px)}
.orb{width:70px;height:70px;border-radius:50%;margin:6px auto 20px;background:radial-gradient(circle at 34% 30%, #fff, var(--neon-2) 46%, var(--neon) 74%, var(--navy) 100%);box-shadow:0 0 0 8px rgba(149,124,251,.14),0 0 44px rgba(149,124,251,.5);animation:pulse 3.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}
.ai-line{height:11px;border-radius:6px;background:rgba(255,255,255,.14);margin:10px 0}
.ai-line.w1{width:90%}.ai-line.w2{width:70%}.ai-line.w3{width:82%;background:rgba(255,255,255,.24)}.ai-line.w4{width:54%}

/* ---------- Templates (full-bleed carousel with arrows) ---------- */
.tpl-carousel{position:relative;width:100%;margin-top:6px}
.tpl-scroller{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 28px 24px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.tpl-scroller::-webkit-scrollbar{height:8px}
.tpl-scroller::-webkit-scrollbar-track{background:transparent}
.tpl-scroller::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.tpl-scroller > .tpl-card{flex:0 0 clamp(240px,22vw,320px);scroll-snap-align:center}
.tpl-nav{position:absolute;top:42%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);transition:transform .2s var(--ease),background .2s,color .2s}
.tpl-nav:hover{background:var(--navy);color:#fff;transform:translateY(-50%) scale(1.06)}
.tpl-nav .i{width:20px;height:20px}
.tpl-nav.prev{inset-inline-end:16px}
.tpl-nav.next{inset-inline-start:16px}
.tpl-nav.next .i{transform:scaleX(-1)}
.tpl-hint{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:2px;font-size:.86rem;color:var(--muted)}
.tpl-hint .i{width:1.1em;height:1.1em}
.tpl-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tpl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.tpl-preview{aspect-ratio:4/5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}
.tpl-preview.has-img{background:var(--bg-soft)}
.tpl-preview img{width:100%;height:100%;object-fit:cover;display:block}
.tpl-preview .tmono{width:52px;height:52px;border:1.4px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.tpl-preview .tname{font-size:1rem;font-weight:600;letter-spacing:.06em}
.tpl-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
.tpl-meta strong{display:block;font-size:.98rem;color:var(--ink)}
.tpl-meta small{color:var(--muted);font-size:.82rem}
.tpl-link{color:var(--navy);font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:5px}
.tpl-link .i{width:1em;height:1em}

/* ---------- Social proof ---------- */
.proof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:52px}
.proof-stat{text-align:center;padding:26px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.proof-stat b{display:block;font-size:2.1rem;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.proof-stat span{font-size:.92rem;color:var(--muted)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:#fff}
.quote-card .stars{color:var(--blue-600);letter-spacing:.15em;font-size:.9rem;margin-bottom:14px}
.quote-card blockquote{font-size:1.02rem;color:var(--ink);line-height:1.65;font-weight:500;margin-bottom:20px}
.quote-card figcaption{display:flex;align-items:center;gap:12px}
.q-avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.quote-card figcaption strong{display:block;font-size:.95rem;color:var(--ink)}
.quote-card figcaption small{color:var(--muted);font-size:.82rem}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;position:relative}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.plan.featured{border-color:var(--neon);box-shadow:0 30px 60px -30px rgba(149,124,251,.4)}
.plan .tag{position:absolute;top:-11px;inset-inline-end:24px;background:linear-gradient(90deg,var(--neon),var(--neon-2));color:#221163;font-size:.74rem;font-weight:700;padding:5px 13px;border-radius:var(--radius-pill);box-shadow:0 6px 16px -6px rgba(149,124,251,.6)}
.plan h3{font-size:1.3rem;margin-bottom:3px}
.plan .sub{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.plan-price{font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.plan-price .cur{font-size:.6em;font-weight:700;color:var(--muted);vertical-align:.08em}
.plan-inherits{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.plan .feats{list-style:none;margin-bottom:24px;flex:1;display:flex;flex-direction:column;gap:11px}
.plan .feats li{display:flex;align-items:center;gap:9px;font-size:.94rem;color:var(--body)}
.plan .feats li .i{width:1.05em;height:1.05em;color:var(--navy);flex:none}
.plan .feats li b{color:var(--ink)}
.plan .btn{justify-content:center;width:100%}
.plan.featured .btn-primary{background:linear-gradient(90deg,var(--neon),var(--neon-2));color:#221163;box-shadow:0 12px 26px -12px rgba(149,124,251,.7)}
.plan.featured .btn-primary:hover{filter:brightness(.97);background:linear-gradient(90deg,var(--neon),var(--neon-2));color:#221163}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .25s}
.faq-item.open{border-color:var(--navy)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;cursor:pointer;padding:20px 24px;font-family:var(--font);font-weight:600;font-size:1.04rem;color:var(--ink);text-align:start}
.faq-plus{position:relative;width:16px;height:16px;flex:none}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--navy);border-radius:2px;transition:transform .25s var(--ease)}
.faq-plus::before{top:7px;left:0;width:16px;height:2px}
.faq-plus::after{left:7px;top:0;width:2px;height:16px}
.faq-item.open .faq-plus::after{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-item.open .faq-a{max-height:340px}
.faq-a p{padding:0 24px 20px;color:var(--body);font-size:.99rem;opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease) .08s,transform .3s var(--ease) .08s}
.faq-item.open .faq-a p{opacity:1;transform:none}

/* ---------- Final CTA ---------- */
.final{padding:92px 0}
.final-card{background:radial-gradient(120% 160% at 85% 0%, rgba(207,214,253,.3), transparent 55%), linear-gradient(150deg,var(--navy),var(--navy-900));background-size:cover;background-position:center;border-radius:28px;padding:80px 48px;text-align:center;color:#fff;position:relative;overflow:hidden}
.final-card h2{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.final-card p{color:rgba(255,255,255,.82);font-size:1.16rem;max-width:560px;margin:0 auto 30px}
.final-card .btn-primary{background:#fff;color:var(--navy)}
.final-card .btn-primary:hover{background:#fff;box-shadow:0 16px 34px -14px rgba(0,0,0,.4)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#b7bce0;padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.site-footer .logo .logo-text{color:#fff}
.site-footer h5{color:#fff;font-size:.95rem;margin-bottom:16px;font-weight:600}
/* Footer columns - plain headings on desktop, collapsible on mobile */
.foot-col-h{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:0;margin-bottom:16px;color:#fff;font-family:var(--font);font-size:.95rem;font-weight:600;text-align:start;cursor:default}
.foot-chev{display:none}
.site-footer ul{list-style:none}
.site-footer ul li{padding:6px 0;font-size:.93rem}
.site-footer ul li a{color:#b7bce0;transition:color .2s}
.site-footer ul li a:hover{color:#fff}
.foot-about p{font-size:.93rem;color:#9aa0cc;margin:18px 0;max-width:300px;line-height:1.7}
.foot-cta{background:#fff;color:var(--navy-900);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.foot-cta:hover{background:#eef0fe}
.foot-cta:hover{background:var(--neon);color:#221163;filter:brightness(.97)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:center;text-align:center;flex-wrap:wrap;gap:12px;font-size:.86rem;color:#8d93c4}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(100%);transition:transform .3s var(--ease)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .sticky-trust{font-size:.8rem;color:var(--muted);font-weight:600;line-height:1.25}
.sticky-cta .btn{padding:12px 18px;font-size:.92rem}

/* ---------- AI chat (inside the RingoAI band, left column) ---------- */
.chat{display:flex;flex-direction:column;gap:10px}
.chat .msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:.95rem;line-height:1.5}
.chat .msg.user{align-self:flex-start;background:var(--blue);color:var(--navy-900);font-weight:600;border-bottom-right-radius:5px}
.chat .msg.bot{align-self:flex-end;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#fff;border-bottom-left-radius:5px}
.chat .msg.bot b{color:#fff;font-weight:700}
.chat .msg.typing{display:inline-flex;gap:5px;align-self:flex-end;padding:14px 16px}
.chat .msg.typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.55;animation:blink 1.2s infinite}
.chat .msg.typing i:nth-child(2){animation-delay:.2s}.chat .msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
/* live chat sequence */
.chat.live .msg{display:none}
.chat.live .msg.in{display:block;animation:msgIn .45s var(--ease) both}
.chat.live .msg.typing.in{display:inline-flex}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat.live .msg{display:block}.chat.live .msg.typing{display:none}.chat.live .msg.in{animation:none}}

/* ---------- Showcase band (warm couple photo + text) ---------- */
.showcase{padding:92px 0}
.showcase-inner{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,var(--taupe-050),#fff)}
.showcase-text{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.showcase-text h2{font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.showcase-text p{font-size:1.08rem;color:var(--body);margin-bottom:22px;max-width:440px}
.showcase-points{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.showcase-points span{display:flex;align-items:center;gap:10px;font-size:.98rem;color:var(--ink);font-weight:500}
.showcase-points .i{width:1.15em;height:1.15em;color:var(--navy);flex:none}
.showcase-photo{min-height:440px;background-size:cover;background-position:center;position:relative}
.showcase-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,4,68,.05)}

/* ---------- The three leads (under the hero) ---------- */
.leads-sec{padding-top:0}
/* The head is anchored beside the points instead of centred above them, and the
   points are hairline rows rather than three matching cards - one idea carrying
   three notes. The head holds its place while the notes scroll past it. */
.leads-body{display:grid;grid-template-columns:minmax(250px,.85fr) 1.5fr;gap:0 70px;align-items:start}
.leads-head{position:sticky;top:110px}
.leads-head .kicker{margin-bottom:12px}
.leads-head h2{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.02em}
.leads{display:block;list-style:none;margin:0;padding:0}
.leads-dots{display:none;justify-content:center;gap:8px;margin-top:18px}
.leads-dot{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:var(--line-2);cursor:pointer;transition:background .25s,width .25s}
.leads-dot.on{width:22px;border-radius:var(--radius-pill);background:var(--navy)}
.lead-card{display:flex;align-items:flex-start;gap:18px;padding:28px 0;border-top:1px solid var(--line)}
.lead-card:first-child{border-top:0;padding-top:0}
.lead-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--blue-050);color:var(--navy);flex:none}
.lead-ic .i{width:22px;height:22px}
.lead-txt h3{font-size:1.14rem;font-weight:700;letter-spacing:-.01em;margin-bottom:9px}
/* Short lines, so they carry as statements rather than paragraphs: full ink
   rather than the muted body grey, and a size close to a sub-heading. */
.lead-txt p{font-size:1.32rem;font-weight:500;color:var(--ink);line-height:1.45;letter-spacing:-.01em}

/* ---------- Guest side + the replies coming back ---------- */
/* One section, two beats, two different weights. The invitation is a flat
   hairline list with no card chrome; the automatic side is a single panel.
   It used to be eleven white boxes stacked vertically - same content, half the
   height, and the two halves no longer look like the same grid twice. */
.guest-sec{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Centred, not stretched. Stretching made both columns the same box height, but
   one column is a filled card and the other is a circle - so the card ran to the
   full height while the circle sat 74px short inside it and the two read as
   uneven. At their natural sizes the card and the circle are within a few pixels
   of each other, and centring lines them up. */
.guest-body{--r:172px;--sz:60px;
  display:grid;grid-template-columns:1fr 1fr;gap:26px 60px;align-items:center;max-width:1180px;margin-inline:auto}
.guest-col{display:flex;flex-direction:column}

/* left beat - the perks orbit the brand mark.
   --r is the radius and --sz the orb, so one pair of numbers resizes the whole
   thing per breakpoint. Each orb is placed with rotate(--a) translateY(-r) and
   then un-rotated by the same angle so its icon stays upright; the ring's own
   slow spin is cancelled on the orbs by an equal, opposite spin. */
.orbit{position:relative;width:calc(var(--r) * 2 + var(--sz));
  aspect-ratio:1;margin:0 auto;display:grid;place-items:center}   /* an asymmetric margin offsets a centred box by half of it */
.orbit-ring{position:absolute;inset:0;list-style:none;margin:0;padding:0;
  animation:orbit-spin 90s linear infinite}
/* Three layers, and they have to stay separate: an animation replaces the whole
   transform property, so placement, counter-spin and the hover pop cannot share
   an element. li places, button counter-spins, the icon pops.
   Margins are logical - inset-inline-start in RTL resolves to right, and a
   physical margin-left would push the orb off centre by its own width. */
.orbit-item{position:absolute;top:50%;inset-inline-start:50%;width:var(--sz);height:var(--sz);
  margin-block-start:calc(var(--sz) / -2);margin-inline-start:calc(var(--sz) / -2);
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.orb-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:50%;cursor:pointer;padding:0;
  color:var(--neon-ink);box-shadow:var(--shadow-sm);
  animation:orb-upright 90s linear infinite;
  transition:border-color .25s,color .25s,box-shadow .3s}
.orb-btn .i{width:24px;height:24px;transition:transform .3s var(--ease)}
.orb-btn:hover,.orb-btn:focus-visible{border-color:var(--neon);color:var(--navy);box-shadow:var(--shadow)}
.orb-btn:hover .i,.orb-btn:focus-visible .i{transform:scale(1.14)}

/* The caption under the circle is where a label actually lands: a tooltip above
   the icon covers the mark whenever the orb is at the side or the foot of the
   ring, and there is no CSS-only way to push it outward per angle. The mark
   stays put and the line below it changes.
   .orbit-cap is filled by JS, so the in-button label below is the no-JS
   fallback - imperfect placement, but the text is reachable either way. */
.orbit-cap{min-height:3.2em;margin-top:14px;text-align:center;font-size:1.02rem;font-weight:600;
  color:var(--ink);line-height:1.5;transition:opacity .2s;display:flex;align-items:flex-start;justify-content:center}
/* Two columns side by side: the caption is taken out of the flow so it cannot
   push the circle up inside its own column. In flow it added its height to the
   column, the column centred, and the circle ended up sitting ~33px above the
   panel's centre even though both boxes measured the same. Below this width the
   columns stack and it goes back into the flow. */
@media(min-width:901px){
  .guest-col{position:relative}
  .orbit-cap{position:absolute;top:calc(100% + 14px);inset-inline:0;margin-top:0}
}
.orbit-cap:empty{opacity:0}
.orbit--js .orb-label{display:none}

/* The label is a real element in the button, so it is read out even when it is
   not on screen; hover and focus simply reveal it. */
.orb-label{position:absolute;bottom:calc(100% + 10px);inset-inline-start:50%;transform:translateX(50%) translateY(4px);
  white-space:nowrap;font-size:.9rem;font-weight:600;line-height:1;color:#fff;background:var(--navy-900);
  padding:9px 14px;border-radius:var(--radius-pill);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,transform .22s var(--ease),visibility .22s}
[dir="ltr"] .orb-label{transform:translateX(-50%) translateY(4px)}
.orb-btn:hover .orb-label,.orb-btn:focus-visible .orb-label{opacity:1;visibility:visible;transform:translateX(50%) translateY(0)}
[dir="ltr"] .orb-btn:hover .orb-label,[dir="ltr"] .orb-btn:focus-visible .orb-label{transform:translateX(-50%) translateY(0)}

/* Hovering anywhere in the circle holds the ring still - a label on a moving
   target is unreadable, and the pointer would slide off its own orb. */
.orbit:hover .orbit-ring,.orbit:hover .orb-btn,
.orbit:focus-within .orbit-ring,.orbit:focus-within .orb-btn{animation-play-state:paused}

.orbit-core{position:relative;display:grid;place-items:center;width:44%;aspect-ratio:1;
  border-radius:50%;background:#fff;border:1px solid var(--line)}
.orbit-core::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px dashed var(--line-2);opacity:.9}
/* Measured, not guessed: the mark's ink centroid sits 4.9% of its own height
   above its bounding-box centre - the top loop carries most of the weight and
   the g's descender is thin - so centring the box leaves it looking high. */
.orbit-core img{width:52%;height:auto;opacity:.92;transform:translateY(4.9%)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
/* The orb sits inside .orbit-item, which is rotated by --a to place it on the
   circle - so the icon inherits that angle on top of the ring's spin. Undoing
   only the spin (the old `reverse` of orbit-spin) left every icon tilted by its
   own placement angle. These keyframes cancel both: -a at rest, and -a-360 over
   one revolution. An animation replaces the whole transform, which is why the
   correction has to live in the keyframes rather than beside them. */
@keyframes orb-upright{
  from{transform:rotate(calc(var(--a) * -1))}
  to{transform:rotate(calc(var(--a) * -1 - 360deg))}
}
@media(prefers-reduced-motion:reduce){.orbit-ring,.orb-btn{animation:none}
  .orb-btn{transform:rotate(calc(var(--a) * -1))}}

.perk-note{font-size:.96rem;color:var(--body);margin-top:22px;text-align:center}
.perk-note b{color:var(--ink);font-weight:700}

/* right beat - one object, not four cards */
/* The grid stretches both columns to the taller one, and dropping the row
   descriptions left the panel far shorter than its box. Its four rows share out
   the slack instead, so the two halves stay level with no dead space. */
/* Matched to the circle opposite from the same two variables, so resizing the
   orbit keeps the two columns level instead of drifting apart again. The four
   rows absorb the difference. */
.rsvp-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;min-height:calc(var(--r) * 2 + var(--sz))}
.rsvp-panel-head{padding:26px 26px 22px;border-bottom:1px solid var(--line)}
.rsvp-panel-head h3{font-size:clamp(1.2rem,1.7vw,1.4rem);margin-bottom:8px}
.rsvp-panel-head p{font-size:.97rem;color:var(--body)}
/* Four identical filled tiles stacked down the panel read as clutter, so the
   icons lost their chips and became plain glyphs. What separates the rows now is
   an accent rail that glides to whichever one you are looking at. */
.rsvp-list{list-style:none;margin:0;padding:0;position:relative;flex:1;display:flex;flex-direction:column}
.rsvp-list::after{content:"";position:absolute;inset-inline-start:0;top:0;width:2px;border-radius:2px;
  height:var(--mh,0px);transform:translateY(var(--my,0px));background:var(--neon);
  opacity:0;transition:transform .45s var(--ease),height .45s var(--ease),opacity .3s}
.rsvp-list.on::after{opacity:1}
.rsvp-item{display:flex;align-items:center;gap:13px;padding:17px 26px;border-bottom:1px solid var(--line);flex:1 0 auto}
.rsvp-item:last-child{border-bottom:0}
/* margin is set on all four sides on purpose: the older .rsvp-card icon rule
   above still carries margin-bottom:14px, and a margin-top alone would let that
   through - 14px of phantom height under a 21px glyph, which throws the row's
   vertical centring off by half of it. */
.rsvp-ic{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;flex:none;margin:3px 0 0;color:var(--navy);transition:color .35s var(--ease)}
.rsvp-ic .i{width:21px;height:21px;color:inherit}
/* The muting only exists while the script that un-mutes one row is running, so
   with no JS - or under reduced motion - every icon stays at full strength. */
.rsvp-list.on .rsvp-ic{color:var(--line-2)}
.rsvp-list.on .rsvp-item.is-on .rsvp-ic{color:var(--navy)}
.rsvp-txt h4{font-size:1rem;font-weight:700;margin-bottom:0;line-height:1.4}

/* ---------- Extras ---------- */
.extras-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.extra{padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.extra:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.extra-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--blue-050);color:var(--navy);margin-bottom:14px}
.extra-ic .i{width:19px;height:19px}
.extra h3{font-size:1.04rem;font-weight:700;margin-bottom:7px}
.extra p{font-size:.93rem;color:var(--body);line-height:1.6}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.show{opacity:1;transform:none}

/* ---------- Polish pass: focus, bar-fill, header shadow ---------- */
a:focus-visible,.btn:focus-visible,button:focus-visible,.faq-q:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
.bar > i{transition:width 1.1s var(--ease)}
.site-header{transition:box-shadow .25s var(--ease)}
.site-header.scrolled{box-shadow:0 6px 24px -18px rgba(0,4,68,.5)}

@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.orb,.mock-tag{animation:none!important}.bar > i{transition:none}.site-header{transition:none}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .hero{min-height:auto;display:block;padding:64px 0}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .ai-grid{grid-template-columns:1fr;gap:36px;padding:44px}
  /* Stacked, the chat leads: it shows the thing in one glance where the copy
     has to be read. Safe to put first now that main.js reserves the chat's
     full height up front - while it grew message by message, leading with it
     pushed the copy down the page as the conversation played. */
  .ai-visual{order:-1}
  .feature.span-2{grid-column:span 1;flex-direction:column;align-items:flex-start;gap:0}
}
@media(max-width:900px){
  .wrap{padding:0 28px}
  .journey{min-height:auto;display:block}   /* no 100vh / pin below desktop */
  .pillars,.journey-track,.rsvp-grid{grid-template-columns:repeat(2,1fr)}
  .guest-body{grid-template-columns:1fr;gap:30px;max-width:640px}
  .lang-points{grid-template-columns:repeat(3,1fr);gap:16px}
  .journey-path-wrap{display:none}
  .journey-track{padding-top:0}
  .jstep:nth-of-type(even){margin-top:0}
  /* odd step count leaves a lone card on the last row - let it span instead */
  .journey-track > .jstep:last-child:nth-child(odd){grid-column:1/-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .proof-stats{grid-template-columns:repeat(2,1fr)}
  .quote-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .strip-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .showcase-inner{grid-template-columns:1fr}
  .showcase-photo{min-height:300px;order:-1}
  .showcase-text{padding:40px 32px}
  /* Not enough width for a sticky head beside the notes - stack and centre it. */
  .leads-body{grid-template-columns:1fr;gap:26px}
  .leads-head{position:static;text-align:center}
  .extras-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  /* Menu and action paired at the start, logo alone at the end. The first two
     columns size to their content and the third takes the slack, so the logo is
     pinned to the far edge however wide the button's label runs. Placement is by
     grid-column, so the DOM order (burger, logo, nav, cta) is left alone. */
  .nav{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px}
  /* grid-row:1 on all three is load-bearing. Auto-placement walks forward, and
     the CTA asks for column 2 after the logo has already claimed column 3, so
     without it the cursor has moved past and the button drops to a second row. */
  /* Touch targets: the burger measured 34x28 and the header CTA 108x31.
     Padding grows the hit area without changing how either one looks. */
  .burger{display:flex;grid-column:1;grid-row:1;justify-self:start;padding:14px 10px}
  .nav-cta{grid-column:2;grid-row:1;justify-self:start;gap:8px}
  .logo{grid-column:3;grid-row:1;justify-self:end}
  .nav-links{display:none}
  .mobile-menu{display:flex}
  /* Login stays in the menu - one action in the bar keeps the logo centred. */
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{display:inline-flex;padding:11px 15px;font-size:.85rem;min-height:42px}
  /* The open menu carries its own signup and login buttons, so the one in the
     bar is a duplicate sitting on top of the overlay. Burger and logo keep their
     columns, so nothing shifts when it goes. */
  body.menu-open .nav-cta{display:none}
  /* Plan feature list: 2px down from the desktop sizes, so a long tier fits. */
  .plan-inherits{font-size:.75rem}
  .plan .feats li{font-size:.81rem}
  /* 7% of the 30px mark is the optical centring for the "g" descender; the extra
     2px is a manual nudge for the phone bar on top of it. */
  .logo-img{transform:translateY(calc(7% + 2px))}
  /* No size or margin of its own - it is the fifth item in the list, so it
     inherits the same padding and takes the same gap as the four above it. */
  .lang-switch--menu{display:inline-flex}
  .foot-contact{align-items:center}

  /* rhythm - tighter on phones so the page isn't a long scroll */
  .sec{padding:46px 0}
  .sec.tight{padding:38px 0}
  .sec-head{margin-bottom:26px}
  .sec-head h2{font-size:1.6rem}
  .sec-head p{font-size:1rem}
  .feature-more{margin:26px 0 0}
  .more-line a{padding:9px 0}

  /* hero - centred copy, bigger tap targets, tighter type */
  .hero{padding:44px 0 56px}
  .hero-copy{text-align:center}
  .hero h1{font-size:1.75rem;margin:12px 0}
  .hero .lead{font-size:1.05rem;margin-bottom:26px;margin-inline:auto}
  .hero .eyebrow,.hero .hero-note{justify-content:center}
  /* Stacked, each button full width - one clear primary action per row. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.2;padding:14px 16px;font-size:.95rem}
  /* Full-width rows have room for the full label, so keep the long one. */
  .hero-actions .cta-full{display:inline}
  .hero-actions .cta-short{display:none}
  .eyebrow{font-size:.76rem}
  /* dashboard first + compact so the hero opens with a short product peek */
  .hero-grid{gap:24px}
  /* The copy leads on a phone. The mock ran first (order:-1), so the whole
     first screen was a dashboard picture before the visitor had read what
     Ringo is - the headline and the CTA sat below the fold. */
  .mock{order:0;margin-bottom:0;margin-top:34px}
  .window-body{grid-template-columns:1fr;gap:12px;padding:12px}
  .invite{min-height:150px;padding:16px 14px;border-radius:12px}
  .invite .names{font-size:1.25rem;margin-top:4px}
  .invite .mono{width:38px;height:38px}
  .invite .save{font-size:.6rem;letter-spacing:.26em}
  .invite .date{font-size:.76rem}
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .kpi{padding:11px 12px;border-radius:11px}
  .kpi .kpi-top{font-size:.72rem;gap:6px}
  .kpi .kpi-val{font-size:1.15rem;margin-top:3px}
  .kpi .avatars{display:none}
  /* labels: float them spread around the window, like desktop */
  .mock-tag{display:inline-flex;font-size:.75rem;padding:8px 11px}
  .mock-tag.t1{top:-13px;bottom:auto;inset-inline-start:16px;inset-inline-end:auto}
  /* Three floating tags crowd the mock at this width - the budget one goes.
     It is still in the markup, so unhiding it is a one-line change. */
  .mock-tag.t2{display:none}
  .mock-tag.t3{top:45%;bottom:auto;inset-inline-end:6px;inset-inline-start:auto}

  /* stacked grids */
  .pillars,.foot-grid,.proof-stats{grid-template-columns:1fr}
  .pillar{padding:22px 20px}

  /* leads / guests / extras - compact so mobile stays short */
  /* Carousel on phones: one card in view, snap per card, dots below. The row keeps
     its DOM order so it reads right-to-left in Hebrew and left-to-right in English
     without any extra rules. */
  .leads{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:12px;margin-inline:-20px;padding:4px 20px 6px;scrollbar-width:none}
  .leads::-webkit-scrollbar{display:none}
  /* Back to real cards here - the hairline rows are a desktop layout, and a
     carousel needs each slide to have its own edge. */
  .leads > .lead-card{flex:0 0 86%;scroll-snap-align:center;flex-direction:column;gap:0;
    padding:22px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
  .leads-dots{display:flex;gap:2px}
  /* The button becomes the 24px tap target and the ::after draws the dot.
     .leads-dot.on has to be named here too: the base rule for it is more
     specific than a bare .leads-dot, so without it the active button kept its
     own 22px navy fill and rendered as a big blob behind the pill.
     Physical margins on purpose - they pair with left:50%, and a logical one
     would flip away from it in RTL. */
  .leads-dot,.leads-dot.on{width:24px;height:24px;padding:0;background:none;border-radius:0;position:relative}
  .leads-dot::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
    border-radius:50%;background:var(--line-2);transition:background .25s,width .25s,margin-left .25s}
  .leads-dot.on::after{width:22px;margin-left:-11px;border-radius:var(--radius-pill);background:var(--navy)}
  .lead-ic{width:38px;height:38px;border-radius:10px;margin-bottom:12px}
  .lead-card h3{font-size:1.06rem}
  .lead-card p{font-size:1.06rem;line-height:1.5}
  /* No hover on a phone, and no room for a 400px circle - the orbit unwinds
     back into the plain list it replaced. Placement transforms and both spins
     are dropped, and every label is simply shown. */
  .orbit{width:auto;aspect-ratio:auto;display:block;margin:0}
  .orbit-ring{position:static;display:flex;flex-direction:column;animation:none;
    border-top:1px solid var(--line-2)}
  .orbit-item{position:static;width:auto;height:auto;margin:0;transform:none;
    border-bottom:1px solid var(--line-2)}
  .orb-btn{position:static;display:flex;gap:11px;align-items:center;justify-content:flex-start;
    width:100%;text-align:start;background:none;border:0;border-radius:0;box-shadow:none;
    animation:none;padding:13px 2px}
  .orb-btn .i{width:22px;height:22px;flex:none;color:var(--neon-ink)}
  .orb-btn:hover,.orb-btn:focus-visible{box-shadow:none}
  .orb-btn:hover .i,.orb-btn:focus-visible .i{transform:none}
  .orb-label{position:static;opacity:1;visibility:visible;transform:none;white-space:normal;
    background:none;color:var(--ink);padding:0;font-size:.94rem;font-weight:500;line-height:1.45}
  [dir="ltr"] .orb-label,
  .orb-btn:hover .orb-label,.orb-btn:focus-visible .orb-label,
  [dir="ltr"] .orb-btn:hover .orb-label{transform:none}
  .orbit-core{display:none}
  /* .orbit--js hides the in-button label so the caption can own it - but the
     caption needs a pointer, and there is none here. Give the label back and
     drop the caption instead; specificity has to match the rule it undoes. */
  .orbit--js .orb-label{display:block}
  .orbit-cap{display:none}
  .perk-note{margin-top:16px}
  .rsvp-panel-head{padding:20px 18px 18px}
  /* Titles only on a phone - four headings with a paragraph each was the same
     pile-up the platform tiles had. The margin under the heading and the icon's
     top offset both existed to sit against that paragraph, so they go too. */
  .rsvp-item{padding:15px 18px;gap:12px;align-items:center}
  .rsvp-txt h4{font-size:.97rem}
  .rsvp-ic{margin:0}
  .extras-grid{grid-template-columns:1fr 1fr;gap:12px}
  .extra{padding:18px 16px}
  .extra-ic{width:34px;height:34px;margin-bottom:10px}
  .extra h3{font-size:.97rem}
  .extra p{font-size:.87rem}

  /* features -> compact 2-column so all 6 fit with little scrolling.
     The picture stays and the description goes: on a phone the image plus the
     title already say what the tool is, and six paragraphs underneath was the
     bulk of the clutter. grid-auto-rows keeps every tile the same height no
     matter how long its title runs, and the shot keeps a fixed ratio, so the
     six read as one set rather than six different sizes. */
  .feature-grid{grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:1fr}
  .feature{padding:0;height:100%}
  /* 16/10 matches the bundled screens, so cover has nothing to crop - a 4/3 box
     would slice the sides off the app window. flex:none because a three-line
     title would otherwise steal height and leave that one tile short. */
  .feature-shot{display:block;aspect-ratio:16/10;flex:none}
  .feature-mock{padding:12px}
  .fm-card,.fmk-card{max-width:150px;padding:9px;border-radius:9px}
  /* One font-size shrinks every mock - all their internals are in em. */
  .fmk{font-size:8px;max-width:150px}
  .fmk-seat{gap:.7em;max-width:132px}
  .fmk-inv{padding:1.2em .9em;border-radius:10px}
  .fm-bar{gap:4px;margin-bottom:8px}
  .fm-bar i{width:5px;height:5px}
  .fm-row{gap:7px;margin-bottom:9px}
  .fm-chip{width:26px;height:26px;border-radius:7px}
  .fm-chip .i{width:14px;height:14px}
  .fm-l{height:6px;margin-bottom:6px}
  .feature-body{padding:12px 12px 14px;align-items:flex-start;justify-content:center}
  .feature-body h3{flex-direction:row;align-items:center;gap:8px;font-size:.9rem;line-height:1.3;margin-bottom:0}
  .feature-body h3 .ic-sm{width:28px;height:28px;border-radius:8px}
  .feature-body h3 .ic-sm .i{width:15px;height:15px}

  .rsvp-grid{grid-template-columns:1fr;gap:12px}
  .rsvp-card{padding:18px 16px}
  .lang-points{grid-template-columns:1fr;gap:12px}
  /* journey -> clean vertical timeline (node on the rail, text beside it).
     The desktop trail is an SVG path measured from the node centres, and it is
     hidden at this width - so the timeline carries its own version: ::before is
     the dashed track, ::after is the fill that scrubs with scroll. Same two
     colours as the SVG, straight down instead of curved between columns. */
  .journey-track{grid-template-columns:1fr;gap:0;position:relative}
  .journey-track::before,
  .journey-track::after{content:"";position:absolute;top:40px;bottom:44px;inset-inline-start:31px;width:2px}
  .journey-track::before{background:repeating-linear-gradient(to bottom,var(--blue) 0 4px,transparent 4px 10px);opacity:.55}
  /* scaleY rather than height: no layout work per frame, and the bar does not
     need its own pixel length computed. Sits at 0 until the script scrubs it. */
  .journey-track::after{background:var(--neon);border-radius:2px;transform:scaleY(var(--jp,0));transform-origin:top}
  .jstep{display:flex;flex-direction:row;align-items:flex-start;gap:16px;text-align:start;padding:9px 0;margin:0}
  .jnode{margin:0;flex:none;width:64px;height:64px;position:relative;z-index:1}
  .jnode .i{width:24px;height:24px}
  .jbadge{inset-inline-end:auto;inset-inline-start:-6px}
  .jtext{padding-top:9px}
  .jstep h3{font-size:1.05rem;margin-bottom:4px}
  .jstep p{max-width:none;margin:0;font-size:.92rem}

  /* templates carousel */
  .tpl-scroller > .tpl-card{flex:0 0 80%}
  .tpl-scroller{padding-inline:20px}
  .tpl-nav{display:none}

  /* pricing - horizontal scroll on mobile (horizontal only, no vertical capture) */
  .price-grid{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:-20px;padding:24px 20px 32px;scrollbar-width:none}
  .price-grid::-webkit-scrollbar{display:none}
  .price-grid > .plan{flex:0 0 82%;scroll-snap-align:center}
  .plan:hover,.plan.featured,.plan.featured:hover{transform:none}

  /* showcase */
  .showcase{padding:40px 0}
  .showcase-text{padding:32px 24px}
  .showcase-photo{min-height:300px}

  /* misc */
  .ai-grid{padding:32px 22px}
  .final{padding:72px 0}
  .final-card{padding:48px 22px}

  /* footer - collapsible columns (closed by default) */
  /* The band's tiles are sized for a wide viewport; left at 300px on a phone
     each mark fills a third of the screen and reads as a blob, not a texture. */
  .markband{padding:84px 0;min-height:52vh}
  .mb-back{background-size:230px}
  .mb-front{background-size:140px}
  /* The watermark tracks the viewport, so it needs its own ceiling here or it
     grows wider than the headline it is meant to sit behind. */
  .mb-mark{width:min(78vw,300px)}
  .mb-glow{width:min(110vw,520px)}

  .foot-grid{gap:0;margin-bottom:24px}
  /* One column on a phone, so the brand block reads better centred than ragged
     against the edge. .logo is inline-flex, so text-align carries it; the note
     under it is a block with a max-width and needs the auto margins. */
  .foot-about{margin-bottom:20px;text-align:center}
  /* The 300px cap is a desktop measure - in the single mobile column it just
     makes this block narrower than the accordion under it. Let it run the full
     width of the section so the two line up. */
  .foot-about p{max-width:none}
  .foot-col{border-top:1px solid rgba(255,255,255,.12)}
  .foot-col-h{cursor:pointer;padding:16px 0;margin:0}
  .foot-chev{display:block;width:9px;height:9px;border-right:2px solid #a6abd4;border-bottom:2px solid #a6abd4;transform:rotate(45deg);transition:transform .25s var(--ease);margin-top:-4px}
  .foot-col.open .foot-chev{transform:rotate(-135deg);margin-top:2px}
  .foot-col-body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .foot-col.open .foot-col-body{max-height:240px}
  /* Contact is three lines, not a list - collapsing it hides the only way
     to reach us, so it stays open and loses its toggle affordance. */
  .foot-col--contact .foot-col-body{max-height:none;overflow:visible}
  .foot-col--contact .foot-col-h{cursor:default;pointer-events:none}
  .foot-col--contact .foot-chev{display:none}
  .foot-col-body ul{padding-bottom:10px}
  /* Footer links were 19px tall - below the thumb, and stacked close together. */
  .foot-col-body li a{display:inline-block;padding:9px 0}
  .foot-mail{padding:9px 0}
  .foot-bottom{flex-direction:column;gap:6px;text-align:center}

  /* sticky CTA clearance - keep it on the dark footer, no white gap below */
  .sticky-cta{display:flex}
  /* The bar is fixed, so the page needs room to clear it - but that room has to
     be inside the footer. Padding the body instead leaves a strip of the light
     page background below the dark footer, which reads as a gap at the bottom.
     94px clears the 66px bar and still leaves the copyright breathing room. */
  .site-footer{padding-bottom:94px}
}

/* ---------- Visual pass: color rhythm + live dot ---------- */
#why{background:var(--blue-050);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#pricing{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.mock .window{transform:none!important}}

/* ---------- Cinematic scroll (GSAP + Lenis) ---------- */
/* When GSAP drives motion, disable the CSS-transition/animations it overrides. */
.gsap-on .reveal{transition:none}
.gsap-on .mock-tag{animation:none!important}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Phase 2: heading underline wipe + scroll-jacked templates ---------- */
.tpl-carousel.jacked .tpl-nav{display:none}
.tpl-carousel.jacked .tpl-scroller{overflow:hidden;scroll-snap-type:none}