/* ─────────────────────────────────────────────────────────────
   Sadakio public site — launch stylesheet (Wave 1)
   Built on the approved v3 tokens. Warm cream · deep cobalt · terracotta.
   Font: Hanken Grotesk. Light theme (matches v3).
   ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand:#2a45c2; --brand-strong:#20349b; --brand-rgb:42,69,194;
  --accent:#dc5b2c; --accent-strong:#c24a20; --accent-rgb:220,91,44;
  --ink:#1b2440; --text:#5b5a66; --muted:#9a948c;
  --line:rgba(60,45,30,.10); --line-2:rgba(60,45,30,.06);
  --bg:#faf6ef; --bg-soft:#f2ebdf; --brand-soft:#eef0fb; --card:#fff;
  --shadow:0 34px 80px rgba(60,45,30,.10);
  --shadow-sm:0 14px 36px rgba(60,45,30,.07);
  --shadow-xs:0 4px 16px rgba(60,45,30,.05);
}
html { scroll-behavior:smooth; }
body {
  font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.55;
  overflow-x:hidden; font-weight:400;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 82% -8%, rgba(var(--brand-rgb),.06), transparent 62%),
    radial-gradient(46vw 40vh at 8% 4%, rgba(var(--accent-rgb),.045), transparent 60%);
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.display { font-weight:500; }
.container { width:min(1200px, calc(100% - 48px)); margin:0 auto; }
.hl { color:var(--brand); }
.accent-word { color:var(--accent); }

/* ── buttons ── */
.pill {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 24px; border-radius:999px; font-weight:600; font-size:15px;
  white-space:nowrap; transition:transform .18s, box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.pill-accent { background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(var(--accent-rgb),.24); }
.pill-accent:hover { transform:translateY(-2px); background:var(--accent-strong); }
.pill-brand { background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(var(--brand-rgb),.22); }
.pill-brand:hover { transform:translateY(-2px); background:var(--brand-strong); }
.pill-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.pill-ghost:hover { border-color:var(--brand); color:var(--brand); }
.pill-lg { height:58px; padding:0 30px; font-size:16.5px; }

/* ── nav + mega menu ── */
.nav {
  position:sticky; top:0; z-index:40;
  background:rgba(250,246,239,.82); backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand { display:inline-flex; align-items:flex-end; font-weight:600; font-size:23px; letter-spacing:-.035em; color:var(--ink); line-height:1; }
.brand .dotmark { width:13px; height:13px; margin-left:4px; margin-bottom:1px; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M%208.00%201.60%20A%201.52%201.52%200%200%201%2011.20%202.46%20A%201.52%201.52%200%200%201%2013.54%204.80%20A%201.52%201.52%200%200%201%2014.40%208.00%20A%201.52%201.52%200%200%201%2013.54%2011.20%20A%201.52%201.52%200%200%201%2011.20%2013.54%20A%201.52%201.52%200%200%201%208.00%2014.40%20A%201.52%201.52%200%200%201%204.80%2013.54%20A%201.52%201.52%200%200%201%202.46%2011.20%20A%201.52%201.52%200%200%201%201.60%208.00%20A%201.52%201.52%200%200%201%202.46%204.80%20A%201.52%201.52%200%200%201%204.80%202.46%20A%201.52%201.52%200%200%201%208.00%201.60%20Z'%20fill='%23dc5b2c'/%3E%3Ctext%20x='8'%20y='10.9'%20text-anchor='middle'%20font-family='Arial,%20sans-serif'%20font-weight='900'%20font-size='8.6'%20fill='%23fff'%3ES%3C/text%3E%3C/svg%3E") center/contain no-repeat; }
.nav-links { display:flex; align-items:center; gap:24px; font-size:15px; font-weight:500; color:var(--text); }
.nav-links > a:hover { color:var(--ink); }
.has-mega { position:relative; }
.has-mega > .top { display:inline-flex; align-items:center; gap:6px; cursor:default; color:var(--text); }
.has-mega > .top:hover { color:var(--ink); }
.has-mega > .top .chev { width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.6; }
.mega {
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(6px); width:560px; max-width:calc(100vw - 40px);
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:14px;
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s;
}
.mega.mega-sm { width:340px; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* invisible hover bridge so the panel doesn't close in the gap */
.mega::before { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
/* pointer */
.mega::after { content:""; position:absolute; top:-8px; left:calc(50% - 8px); width:16px; height:16px;
  background:var(--card); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg); border-radius:3px; }
.mega-eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:6px 12px 8px; }
.mega-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.mega-grid.one { grid-template-columns:1fr; }
.mega-grid a { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:14px;
  color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:background .15s; }
.mega-grid a:hover { background:var(--bg-soft); }
.mega-grid a .mi { width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--brand-soft); color:var(--brand); transition:background .18s, color .18s; }
.mega-grid a:hover .mi { background:var(--brand); color:#fff; }
.mega-grid a .mi svg { width:19px; height:19px; }
.mega-grid a .mtx { display:flex; flex-direction:column; min-width:0; padding-top:1px; line-height:1.25; }
.mega-grid a .mtx small { font-size:12.5px; color:var(--muted); font-weight:400; margin-top:3px; line-height:1.35; }
.mega-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:8px; padding:13px 12px 4px; border-top:1px solid var(--line-2); }
.mega-foot .fx { font-size:13px; color:var(--text); }
.mega-foot .fx b { color:var(--ink); font-weight:600; }
.mega-foot .fcta { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;
  color:var(--accent); text-decoration:none; white-space:nowrap; }
.mega-foot .fcta svg { width:15px; height:15px; transition:transform .18s; }
.mega-foot .fcta:hover svg { transform:translateX(3px); }
.nav .login { font-weight:600; color:var(--ink); }
.nav .login:hover { color:var(--brand); }

/* ── mobile menu (CSS-only checkbox drawer) ── */
.mnav-toggle { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.burger { display:none; flex-direction:column; gap:5px; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.burger span { width:18px; height:2px; background:var(--ink); border-radius:2px; }
.m-backdrop { display:none; position:fixed; inset:0; background:rgba(20,17,13,.42); z-index:45; }
.mobile-menu { position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw); background:var(--card); z-index:46; transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1); overflow-y:auto; padding:22px 22px 34px; box-shadow:var(--shadow); }
#mnav:checked ~ .m-backdrop { display:block; }
#mnav:checked ~ .mobile-menu { transform:translateX(0); }
.m-close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 0 8px auto; border:1px solid var(--line); border-radius:12px; font-size:18px; color:var(--ink); cursor:pointer; }
.m-group { padding:16px 0; border-top:1px solid var(--line-2); }
.m-group:first-of-type { border-top:0; }
.m-group > b { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.m-group a, .m-top { display:block; padding:10px 2px; font-size:16px; font-weight:500; color:var(--ink); }
.m-group a span { display:block; font-size:12px; color:var(--muted); font-weight:400; }
.m-top { padding:14px 2px; border-top:1px solid var(--line-2); }
.mobile-menu .pill { height:50px; font-size:16px; width:100%; }
@media(min-width:901px){ .burger, .m-backdrop, .mobile-menu { display:none !important; } }

/* ── hero ── */
.hero { padding:22px 0 64px; position:relative; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--brand-strong); letter-spacing:.02em; }
.eyebrow .dot { width:13px; height:13px; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M%208.00%201.60%20A%201.52%201.52%200%200%201%2011.20%202.46%20A%201.52%201.52%200%200%201%2013.54%204.80%20A%201.52%201.52%200%200%201%2014.40%208.00%20A%201.52%201.52%200%200%201%2013.54%2011.20%20A%201.52%201.52%200%200%201%2011.20%2013.54%20A%201.52%201.52%200%200%201%208.00%2014.40%20A%201.52%201.52%200%200%201%204.80%2013.54%20A%201.52%201.52%200%200%201%202.46%2011.20%20A%201.52%201.52%200%200%201%201.60%208.00%20A%201.52%201.52%200%200%201%202.46%204.80%20A%201.52%201.52%200%200%201%204.80%202.46%20A%201.52%201.52%200%200%201%208.00%201.60%20Z'%20fill='%23dc5b2c'/%3E%3Ctext%20x='8'%20y='10.9'%20text-anchor='middle'%20font-family='Arial,%20sans-serif'%20font-weight='900'%20font-size='8.6'%20fill='%23fff'%3ES%3C/text%3E%3C/svg%3E") center/contain no-repeat; }
.crumb { font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.hero h1 { margin-top:20px; font-size:clamp(40px,5.6vw,72px); line-height:1.02; letter-spacing:-.03em; font-weight:500; color:var(--ink); }
.page-hero h1 { font-size:clamp(38px,5.2vw,62px); max-width:900px; }
.lead { margin-top:24px; max-width:520px; font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--text); }
.page-hero .lead { max-width:640px; }
.cta { display:flex; gap:13px; flex-wrap:wrap; margin-top:34px; }
.trust { margin-top:28px; display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:13.5px; font-weight:500; }
.trust span::before { content:"—"; margin-right:8px; color:rgba(60,45,30,.22); }
.trust span:first-child::before { display:none; }

/* ── hero loyalty-card visual (static, CSS only) ── */
.hero-visual { position:relative; }
.loyalty-card {
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:28px; padding:26px; box-shadow:var(--shadow);
}
.lc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.lc-biz { display:flex; align-items:center; gap:12px; }
.lc-logo { width:44px; height:44px; border-radius:13px; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:600; font-size:19px; }
.lc-biz b { font-size:16px; font-weight:600; display:block; }
.lc-biz span { font-size:12.5px; color:var(--muted); }
.lc-badge { font-size:12px; font-weight:600; color:var(--brand); background:rgba(var(--brand-rgb),.08); padding:6px 12px; border-radius:999px; }
.lc-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.lc-sub { font-size:13px; color:var(--muted); margin-bottom:16px; }
.lc-stamps { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.lc-stamp { aspect-ratio:1; border-radius:50%; border:2px dashed rgba(var(--brand-rgb),.3); display:grid; place-items:center; }
.lc-stamp svg { width:18px; height:18px; color:rgba(var(--brand-rgb),.35); }
.lc-stamp.on { background:var(--brand); border-style:solid; border-color:var(--brand); }
.lc-stamp.on svg { color:#fff; }
.lc-foot { margin-top:18px; border-top:1px dashed var(--line); padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
.lc-foot .r { font-size:13px; color:var(--text); font-weight:500; }
.lc-foot .r b { color:var(--ink); }
.lc-pop {
  position:absolute; top:-16px; right:-10px; display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:9px 14px;
  border-radius:999px; box-shadow:0 12px 26px rgba(var(--accent-rgb),.32);
}
.lc-pop svg { width:15px; height:15px; }

/* ── sections ── */
.sec { padding:clamp(56px,7.5vw,104px) 0; position:relative; }
.sec.tint-warm { background:var(--bg-soft); }
.sec.tint-cool { background:var(--brand-soft); }
.sec-head { max-width:740px; margin:0 0 44px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.tag { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tag::before { content:""; width:11px; height:11px; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M%208.00%201.60%20A%201.52%201.52%200%200%201%2011.20%202.46%20A%201.52%201.52%200%200%201%2013.54%204.80%20A%201.52%201.52%200%200%201%2014.40%208.00%20A%201.52%201.52%200%200%201%2013.54%2011.20%20A%201.52%201.52%200%200%201%2011.20%2013.54%20A%201.52%201.52%200%200%201%208.00%2014.40%20A%201.52%201.52%200%200%201%204.80%2013.54%20A%201.52%201.52%200%200%201%202.46%2011.20%20A%201.52%201.52%200%200%201%201.60%208.00%20A%201.52%201.52%200%200%201%202.46%204.80%20A%201.52%201.52%200%200%201%204.80%202.46%20A%201.52%201.52%200%200%201%208.00%201.60%20Z'%20fill='%23dc5b2c'/%3E%3Ctext%20x='8'%20y='10.9'%20text-anchor='middle'%20font-family='Arial,%20sans-serif'%20font-weight='900'%20font-size='8.6'%20fill='%23fff'%3ES%3C/text%3E%3C/svg%3E") center/contain no-repeat; flex:0 0 auto; }
.sec h2 { margin-top:18px; font-size:clamp(30px,4.2vw,52px); line-height:1.05; letter-spacing:-.03em; font-weight:500; color:var(--ink); }
.sec .sub { margin-top:18px; font-size:clamp(16px,1.4vw,19px); color:var(--text); line-height:1.6; max-width:620px; }
.sec-head.center .sub { margin-left:auto; margin-right:auto; }

/* ── value pillars ── */
.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pillar { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px 24px; transition:transform .3s, box-shadow .3s; }
.pillar:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.pillar .ic { width:46px; height:46px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin-bottom:18px; }
.pillar .ic svg { width:22px; height:22px; }
.pillar h3 { font-size:17px; font-weight:600; }
.pillar p { margin-top:9px; color:var(--muted); font-size:14px; line-height:1.6; }
/* 3-up pillar grid (responsive helper, mirrors the .pillars breakpoints) */
.pillars.three { grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .pillars.three { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .pillars.three { grid-template-columns:1fr; } }

/* ── steps / flow ── */
.flow { display:grid; gap:14px; }
.flow.cols { grid-template-columns:repeat(3,1fr); }
.step { display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--card); transition:border-color .25s, transform .25s; }
.step:hover { border-color:rgba(var(--brand-rgb),.3); transform:translateY(-3px); }
.step .n { width:46px; height:46px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-weight:600; font-size:18px; }
.step b { font-size:17px; font-weight:600; }
.step span { display:block; margin-top:7px; color:var(--muted); font-size:14.5px; line-height:1.6; }
.step.cols-item { grid-template-columns:1fr; }
.step.cols-item .n { margin-bottom:16px; }

/* ── split (text + visual) ── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.mgmt-points { display:grid; gap:14px; margin-top:28px; }
.mgmt-point { display:flex; align-items:flex-start; gap:14px; font-size:16px; color:var(--text); font-weight:500; line-height:1.5; }
.mgmt-point .ck { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); color:var(--brand); display:grid; place-items:center; flex:0 0 auto; margin-top:1px; }
.mgmt-point .ck svg { width:16px; height:16px; }

/* generic panel card for visuals */
.panel-card { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:var(--shadow); }
.panel-card h4 { font-size:15px; font-weight:600; }
.panel-card .p-sub { font-size:13px; color:var(--muted); margin-top:3px; }
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.stat { border:1px solid var(--line-2); border-radius:16px; padding:16px; }
.stat .n { font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.stat .n .u { color:var(--accent); }
.stat .l { font-size:12.5px; color:var(--muted); margin-top:6px; }

/* ── dark numbers band ── */
.band { background:var(--ink); color:#fff; border-radius:34px; padding:clamp(40px,6vw,72px) clamp(26px,5vw,64px); position:relative; overflow:hidden; }
.band::before { content:""; position:absolute; inset:0; background:radial-gradient(40vw 40vw at 92% -10%, rgba(var(--accent-rgb),.26), transparent 60%); pointer-events:none; }
.band .sec-head { margin:0 0 44px; position:relative; }
.band h2 { color:#fff; }
.band .sub { color:rgba(255,255,255,.72); }
.band .tag { color:rgba(255,255,255,.66); }
.metrics { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.metric .n { font-size:clamp(38px,5vw,54px); font-weight:500; line-height:1; letter-spacing:-.03em; }
.metric .n .u { color:var(--accent); }
.metric .l { margin-top:14px; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; }

/* ── pricing ── */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.price { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:34px; position:relative; display:flex; flex-direction:column; }
.price.pro { border:1.5px solid var(--brand); box-shadow:var(--shadow-sm); }
.price .pop2 { position:absolute; top:-13px; right:26px; background:var(--brand); color:#fff; font-size:11px; font-weight:600; padding:6px 14px; border-radius:999px; }
.price h3 { font-size:22px; font-weight:600; }
.price .who { font-size:14px; color:var(--muted); margin:6px 0 18px; min-height:40px; }
.price .amount { font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.price .amount small { font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0; }
.price .note { font-size:12.5px; color:var(--muted); margin-top:8px; }
.price ul { list-style:none; display:grid; gap:12px; margin:24px 0 26px; }
.price li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text); line-height:1.45; }
.price li svg { width:18px; height:18px; color:var(--brand); flex:0 0 auto; margin-top:1px; }
.price .pill { width:100%; margin-top:auto; }

/* add-on modules */
.addons { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.addon { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; }
.addon .ic { width:42px; height:42px; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin-bottom:14px; }
.addon .ic svg { width:20px; height:20px; }
.addon h4 { font-size:16px; font-weight:600; }
.addon p { margin-top:7px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.addon .tagline { display:inline-block; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--accent); }

/* comparison table */
.cmp-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.cmp { width:100%; border-collapse:collapse; min-width:560px; }
.cmp th, .cmp td { padding:15px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line-2); }
.cmp thead th { font-weight:600; color:var(--ink); font-size:14px; background:var(--bg-soft); }
.cmp tbody td:not(:first-child) { text-align:center; }
.cmp td:first-child { color:var(--text); }
.cmp .yes { color:var(--brand); font-weight:600; }
.cmp .no { color:var(--muted); }
.cmp tr:last-child td { border-bottom:0; }

/* ── FAQ accordion (native details) ── */
.faq-list { max-width:820px; margin:0 auto; display:grid; gap:12px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16.5px; font-weight:600; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .icn { position:relative; width:20px; height:20px; flex:0 0 auto; }
.faq-item .icn::before, .faq-item .icn::after { content:""; position:absolute; background:var(--brand); border-radius:2px; transition:transform .22s, opacity .22s; }
.faq-item .icn::before { left:0; right:0; top:9px; height:2px; }
.faq-item .icn::after { top:0; bottom:0; left:9px; width:2px; }
.faq-item[open] .icn::after { transform:scaleY(0); opacity:0; }
.faq-item .answer { padding:0 22px 22px; color:var(--text); font-size:15px; line-height:1.65; max-width:680px; }
.faq-item .answer a { color:var(--brand); font-weight:600; }
.faq-item .answer p + p { margin-top:12px; }

/* ── FAQ category label ── */
.faq-cat { max-width:820px; margin:38px auto 14px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.faq-cat:first-of-type { margin-top:0; }

/* ── info / honest callout ── */
.callout { background:var(--brand-soft); border-radius:26px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.callout h3 { font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-.02em; line-height:1.15; }
.callout p { margin-top:12px; color:var(--text); font-size:16px; line-height:1.6; max-width:560px; }
.callout .cta { margin-top:0; }

/* ── mega CTA ── (note: nav dropdowns use .mega; the headline uses .mega-title) */
.mega-wrap { text-align:center; }
.mega-wrap .mega-title { font-size:clamp(46px,10vw,124px); font-weight:500; line-height:.94; letter-spacing:-.045em; color:var(--ink); }
.mega-sub { margin:24px auto 0; max-width:540px; color:var(--text); font-size:18px; line-height:1.55; }
.mega-wrap .cta { justify-content:center; margin-top:36px; }
.fine { margin-top:20px; color:var(--muted); font-size:13px; }

/* ── footer ── */
footer { padding:56px 0 44px; border-top:1px solid var(--line); margin-top:10px; }
.foot { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; }
.foot .col { display:grid; gap:9px; font-size:14px; color:var(--text); align-content:start; }
.foot .col b { color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.foot .col a:hover { color:var(--brand); }
.foot-bottom { margin-top:34px; padding-top:20px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:13px; }

/* ── real imagery: framed photo + phone mock ──
   Images are plain <img> (never gated on the reveal), so they stay visible
   with JS off. Only the wrapping .reveal card animates in. */
.photo-frame {
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.photo-frame img { width:100%; height:100%; object-fit:cover; aspect-ratio:59/39; }
.photo-frame::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(120deg, rgba(var(--brand-rgb),.05), transparent 45%);
}
.photo-frame:hover { transform:translateY(-4px); }
.photo-col { display:flex; }

/* phone mock framing a real product screenshot.
   The screenshots are 390×844 (ratio ≈ .462). We size the screen area by that
   aspect-ratio and let object-fit:cover fill it — never trust the intrinsic
   844px height (the HTML height attr would otherwise squish the image). */
.phone {
  width:100%; max-width:200px; margin:0 auto 24px;
  background:#12182b; border-radius:26px; padding:8px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.phone img {
  width:100%; height:auto; aspect-ratio:390 / 844; object-fit:cover;
  display:block; border-radius:19px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.step.cols-item .phone { margin-bottom:20px; }

/* gentle idle float on the hero loyalty card (transform/opacity only) */
@keyframes floatY { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.hero-visual { animation:floatY 6.5s ease-in-out infinite; will-change:transform; }
.loyalty-card { transition:box-shadow .35s, transform .35s; }

/* ── reveal on scroll (progressive enhancement) ──
   Content is fully VISIBLE by default. The hidden initial state is gated
   behind html.js, so no-JS clients, crawlers, and any case where the
   IntersectionObserver never fires always see the content. The JS flag is
   set in <head> before paint (no flash). */
.reveal { opacity:1; transform:none; }
html.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.07s } .reveal.d2 { transition-delay:.14s }
.reveal.d3 { transition-delay:.21s } .reveal.d4 { transition-delay:.28s }
.reveal.d5 { transition-delay:.35s }

/* ── responsive ── */
@media(max-width:900px){
  .nav-links { display:none; }
  .hero { padding:34px 0 48px; }
  .burger { display:flex; }
  .hero-grid, .split { grid-template-columns:1fr; gap:40px; }
  .hero-visual { max-width:440px; }
  .pillars { grid-template-columns:repeat(2,1fr); }
  .flow.cols, .price-grid, .addons { grid-template-columns:1fr 1fr; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .callout { grid-template-columns:1fr; }
  .mgmt-visual { order:-1; }
}
@media(max-width:600px){
  .container { width:calc(100% - 40px); }
  .hero { padding:24px 0 40px; }
  .cta .pill { flex:1 1 auto; }
  .pillars, .flow.cols, .price-grid, .addons, .metrics { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:1fr 1fr; }
}
@media(prefers-reduced-motion: reduce){
  /* Reduced motion: content shows immediately, regardless of the JS flag. */
  .reveal, html.js .reveal, html.js .reveal.in { opacity:1 !important; transform:none !important; transition:none !important; }
  * { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ── Hero: realistic U/WE wallet pass with the stamp-press loop ── */
.wpass { position:relative; width:min(400px,92%); margin:0 auto; border-radius:24px;
  background:#0d0c0a; color:#f3ead9; padding:0; overflow:visible;
  box-shadow:0 30px 70px rgba(20,15,10,.35), 0 4px 14px rgba(20,15,10,.18);
  animation:wp-float 7s ease-in-out infinite; transform-style:preserve-3d; }
@keyframes wp-float { 0%,100% { transform:translateY(0) rotate(-1.2deg); }
  50% { transform:translateY(-10px) rotate(.6deg); } }
.wp-head { display:flex; justify-content:space-between; align-items:center;
  padding:20px 22px; background:#151310; border-bottom:1px solid rgba(255,255,255,.06);
  border-radius:24px 24px 0 0; }
.wp-logo { font-family:Georgia,'Times New Roman',serif; font-size:24px; letter-spacing:4px; line-height:1; }
.wp-logo small { display:block; font-family:inherit; font-size:8.5px; letter-spacing:3px;
  color:rgba(243,234,217,.55); margin-top:4px; font-family:'Hanken Grotesk',sans-serif; }
.wp-type { font-size:13px; font-weight:700; color:#e0b083; }
.wp-mid { position:relative; padding:24px 22px 18px;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 3px);
  background-size:38px 38px; background-position:8px 6px; }
.wp-cnt { font-size:56px; font-weight:800; line-height:1; display:flex; align-items:baseline; }
.wp-c { position:relative; display:inline-block; width:.62em; height:1em; }
.wp-c .c5, .wp-c .c6 { position:absolute; left:0; top:0; }
.wp-c .c5 { animation:wp-c5 9s infinite; }
.wp-c .c6 { animation:wp-c6 9s infinite; opacity:0; }
@keyframes wp-c5 { 0%,24% { opacity:1; } 27%,93% { opacity:0; } 96%,100% { opacity:1; } }
@keyframes wp-c6 { 0%,24% { opacity:0; } 27%,93% { opacity:1; } 96%,100% { opacity:0; } }
.wp-cnt small { font-size:13px; letter-spacing:5px; color:#cbb59a; font-weight:700; margin-left:12px; }
.wp-stamps { display:flex; gap:10px; margin-top:16px; }
.wp-st { width:34px; height:34px; border-radius:50%; border:2px dashed rgba(243,234,217,.28);
  position:relative; }
.wp-st.on, .wp-st.press { border-style:solid; border-color:#e0b083; background:#e0b083; }
.wp-st.on::after, .wp-st.press::after { content:''; position:absolute; inset:8px;
  border-radius:50%; background:#0d0c0a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h13v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Zm13 1h2.5a2.5 2.5 0 0 1 0 5H17V9Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h13v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Zm13 1h2.5a2.5 2.5 0 0 1 0 5H17V9Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; }
.wp-st.press { animation:wp-press 9s cubic-bezier(.2,1.4,.4,1) infinite; }
@keyframes wp-press {
  0%,18% { background:transparent; border-style:dashed; border-color:rgba(243,234,217,.28); transform:scale(1); }
  20% { background:#e0b083; border-style:solid; border-color:#e0b083; transform:scale(2.1); }
  26% { transform:scale(.94); }
  30%,92% { background:#e0b083; border-style:solid; border-color:#e0b083; transform:scale(1); }
  96%,100% { background:transparent; border-style:dashed; border-color:rgba(243,234,217,.28); transform:scale(1); }
}
.wp-st.press::after { animation:wp-press-ink 9s infinite; }
@keyframes wp-press-ink { 0%,19% { opacity:0; } 26%,92% { opacity:1; } 96%,100% { opacity:0; } }
.wp-st.press::before { content:''; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(224,176,131,.8); opacity:0; animation:wp-ring 9s ease-out infinite; }
@keyframes wp-ring { 0%,19% { opacity:0; transform:scale(.6); }
  24% { opacity:.9; transform:scale(.8); } 38% { opacity:0; transform:scale(1.5); }
  100% { opacity:0; } }
.wp-fields { display:flex; gap:34px; padding:4px 22px 16px; }
.wp-fields label { display:block; font-size:9.5px; letter-spacing:1.5px; font-weight:800; color:#e0b083; }
.wp-fields b { font-size:14px; font-weight:600; }
.wp-badges { display:flex; gap:8px; padding:0 22px 20px; flex-wrap:wrap; }
.wp-badges span { font-size:11px; font-weight:700; color:rgba(243,234,217,.75);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:4px 10px; }
.wp-pop { position:absolute; top:-16px; right:-12px; z-index:2; display:inline-flex;
  align-items:center; gap:6px; background:var(--accent); color:#fff; font-weight:800;
  font-size:14px; border-radius:999px; padding:9px 16px;
  box-shadow:0 10px 26px rgba(var(--accent-rgb),.4);
  opacity:0; animation:wp-pop 9s cubic-bezier(.2,1.4,.4,1) infinite; }
.wp-pop svg { width:15px; height:15px; }
@keyframes wp-pop { 0%,21% { opacity:0; transform:translateY(14px) scale(.8); }
  26% { opacity:1; transform:translateY(0) scale(1.04); }
  29% { transform:scale(1); } 62% { opacity:1; }
  70%,100% { opacity:0; transform:translateY(-6px) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
  .wpass, .wp-st.press, .wp-st.press::after, .wp-st.press::before,
  .wp-pop, .wp-c .c5, .wp-c .c6 { animation:none !important; }
  .wp-st.press { background:#e0b083; border-style:solid; border-color:#e0b083; }
  .wp-pop { opacity:1; }
  .wp-c .c6 { opacity:1; } .wp-c .c5 { opacity:0; }
}

/* Hero differentiator (26.07): the visitor must instantly get why not-a-card-app */
.diff { margin-top:26px; max-width:560px; border-left:3px solid var(--accent);
  background:#fff; border-radius:0 14px 14px 0; padding:14px 18px;
  box-shadow:0 10px 26px rgba(60,45,30,.06); }
.diff-head { font-weight:700; font-size:14px; color:var(--muted); }
.diff-body { font-size:15px; line-height:1.55; color:var(--ink); margin-top:4px; font-weight:600; }

/* ── Hero mechanics selector + 4-phase card loop (msg 3335) ── */
.wp-mechs { width:min(400px,92%); margin:0 auto 14px; text-align:center; }
.wm-cap { display:block; font-size:12.5px; font-weight:700; color:var(--muted);
  letter-spacing:.02em; margin-bottom:9px; }
.wm-chips { display:flex; gap:8px; justify-content:center; }
.wm { font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--text); }
.wm.m1 { animation:wm-on 14s infinite; }
.wm.m2 { animation:wm-on 14s infinite; animation-delay:3.5s; }
.wm.m3 { animation:wm-on 14s infinite; animation-delay:7s; }
.wm.m4 { animation:wm-on 14s infinite; animation-delay:10.5s; }
@keyframes wm-on {
  0%,1% { background:#fff; color:var(--text); border-color:var(--line); }
  3%,24% { background:var(--brand); color:#fff; border-color:var(--brand); }
  27%,100% { background:#fff; color:var(--text); border-color:var(--line); }
}
.wp-mid { min-height:158px; }
.wp-view { position:absolute; inset:24px 22px 12px; opacity:0; }
.wp-view.v1 { animation:wpv 14s infinite; }
.wp-view.v2 { animation:wpv 14s infinite; animation-delay:3.5s; }
.wp-view.v3 { animation:wpv 14s infinite; animation-delay:7s; }
.wp-view.v4 { animation:wpv 14s infinite; animation-delay:10.5s; }
@keyframes wpv {
  0%,1% { opacity:0; transform:translateY(6px); }
  3%,24% { opacity:1; transform:translateY(0); }
  27%,100% { opacity:0; transform:translateY(-4px); }
}
.wp-line { margin-top:12px; font-size:13.5px; line-height:1.5; color:rgba(243,234,217,.75); }
.wp-cnt.gold { color:#e0b083; }
/* retime the press + counter + pop to phase 1 of the 22s loop */
.wp-st.press { animation-duration:14s; }
.wp-st.press::after { animation-duration:14s; }
.wp-st.press::before { animation-duration:14s; }
.wp-c .c5, .wp-c .c6 { animation-duration:14s; }
.wp-pop { animation-duration:14s; }
@keyframes wp-press {
  0%,6% { background:transparent; border-style:dashed; border-color:rgba(243,234,217,.28); transform:scale(1); }
  8% { background:#e0b083; border-style:solid; border-color:#e0b083; transform:scale(2.1); }
  10.5% { transform:scale(.94); }
  12%,24% { background:#e0b083; border-style:solid; border-color:#e0b083; transform:scale(1); }
  27%,100% { background:transparent; border-style:dashed; border-color:rgba(243,234,217,.28); transform:scale(1); }
}
@keyframes wp-press-ink { 0%,7% { opacity:0; } 10%,24% { opacity:1; } 27%,100% { opacity:0; } }
@keyframes wp-ring { 0%,7% { opacity:0; transform:scale(.6); }
  9% { opacity:.9; transform:scale(.8); } 14% { opacity:0; transform:scale(1.5); } 100% { opacity:0; } }
@keyframes wp-c5 { 0%,8% { opacity:1; } 10%,96% { opacity:0; } 99%,100% { opacity:1; } }
@keyframes wp-c6 { 0%,8% { opacity:0; } 10%,96% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes wp-pop { 0%,8% { opacity:0; transform:translateY(14px) scale(.8); }
  11% { opacity:1; transform:translateY(0) scale(1.04); }
  13% { transform:scale(1); } 22% { opacity:1; }
  26%,100% { opacity:0; transform:translateY(-6px) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
  .wm, .wp-view { animation:none !important; }
  .wm.m1 { background:var(--brand); color:#fff; border-color:var(--brand); }
  .wp-view.v1 { opacity:1; }
}