/* ============================================================
   JPMate — shared design tokens & app components
   ============================================================ */
/* ============================================================
   JPMate — shared design tokens & components
   Light + Dark, phone frame, app components
   ============================================================ */

:root{
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* brand */
  --jp:    #176d8a;   /* JP / teal */
  --mate:  #e3624a;   /* Mate / coral */
  --primary:#6366f1;  /* indigo primary */
  --teal-sel:#15596f; /* selected chip */
  --green: #1f9e6e;

  /* disaster accents */
  --d-quake:#ef4747;
  --d-tsu:  #3b82f6;
  --d-flood:#38bdf8;
  --d-winter:#7c8aa5;
  --d-fire: #f97316;
  --d-power:#f59e0b;
  --d-typhoon:#8b5cf6;
  --d-general:#10b981;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* ---------- light theme (default, applied on .screen) ---------- */
.screen{
  --bg:        #f3f1ec;
  --bg-cool:   #eef0f5;
  --card:      #ffffff;
  --card-2:    #f4f5f7;
  --ink:       #1c2433;
  --ink-2:     #586072;
  --muted:     #9ba2ab;
  --line:      #ecedf0;
  --line-soft: #f1f1f3;
  --chip-bd:   #e3e5ea;
  --primary-fg:#ffffff;
  --shadow:    0 1px 2px rgba(20,28,48,.05), 0 6px 18px rgba(20,28,48,.05);
  --shadow-sm: 0 1px 2px rgba(20,28,48,.05);
  --island:    #000;
}

/* ---------- dark theme ---------- */
.screen.dark{
  --bg:        #14161b;   /* warm near-black */
  --bg-cool:   #16181e;
  --card:      #1d2026;
  --card-2:    #262a31;
  --ink:       #f1f0ec;   /* warm white */
  --ink-2:     #b8bdc6;
  --muted:     #7a818c;
  --line:      #2a2e36;
  --line-soft: #23262d;
  --chip-bd:   #343943;
  --jp:        #3ba6c6;
  --mate:      #f0805f;
  --primary:   #7c7af6;
  --green:     #36b985;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --island:    #000;
}

/* ============================================================
   Phone frame
   ============================================================ */
.phone{
  width:393px; height:852px;
  background:#0a0b0d;
  border-radius:54px;
  padding:11px;
  box-shadow:0 2px 4px rgba(0,0,0,.4), 0 30px 60px rgba(20,28,48,.16);
  position:relative;
  flex:none;
}
.screen{
  width:100%; height:100%;
  background:var(--bg);
  border-radius:43px;
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* status bar */
.statusbar{
  height:54px; flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px 0 34px;
  font-size:15px; font-weight:600; color:var(--ink);
  position:relative; z-index:5;
}
.statusbar .island{
  position:absolute; left:50%; top:11px; transform:translateX(-50%);
  width:108px; height:31px; background:var(--island); border-radius:18px;
}
.statusbar .right{ display:flex; align-items:center; gap:7px; }
.statusbar svg{ display:block; }

/* app bar */
.appbar{
  height:52px; flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
}
.appbar .ic{ color:var(--ink); display:flex; }
.logo{ font-size:19px; font-weight:800; letter-spacing:-.2px; }
.logo .jp{ color:var(--jp); }
.logo .mate{ color:var(--mate); }
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--jp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}

/* scroll area */
.scroll{ flex:1; overflow:hidden; padding:4px 18px 18px; }
.scroll.cool{ background:var(--bg-cool); }

/* ============================================================
   Generic components
   ============================================================ */
.card{
  background:var(--card); border-radius:18px;
  box-shadow:var(--shadow); padding:18px;
}
.h1{ font-size:30px; font-weight:800; letter-spacing:-.6px; color:var(--ink); }
.h2{ font-size:21px; font-weight:800; letter-spacing:-.3px; color:var(--ink); }
.sub{ font-size:14px; color:var(--muted); line-height:1.45; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.8px; color:var(--muted); text-transform:uppercase; }

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border-radius:13px; font-size:15px; font-weight:700;
  border:none; cursor:pointer; font-family:var(--sans);
}
.btn-primary{ background:var(--primary); color:var(--primary-fg); }
.btn-ghost{ background:var(--card-2); color:var(--ink); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:11px; font-size:14px; font-weight:600;
  border:1.5px solid var(--chip-bd); color:var(--ink); background:var(--card);
}
.chip.sel{ background:var(--teal-sel); color:#fff; border-color:var(--teal-sel); }

/* progress ring via conic-gradient */
.ring{
  --p:0; --rc:var(--primary);
  width:44px; height:44px; border-radius:50%; flex:none;
  background:
    conic-gradient(var(--rc) calc(var(--p)*1%), transparent 0),
    var(--card-2);
  -webkit-mask: radial-gradient(circle 22px at center, transparent 14px, #000 15px);
          mask: radial-gradient(circle 22px at center, transparent 14px, #000 15px);
}
.ring-wrap{ position:relative; width:44px; height:44px; flex:none; }
.ring-wrap .num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--ink);
}

/* ============================================================
   Map placeholder (stylised, clean)
   ============================================================ */
.map{
  position:relative; border-radius:13px; overflow:hidden;
  background:#e9e7e0;
  background-image:
    linear-gradient(115deg, #dfe6d8 0 8%, transparent 8%),
    linear-gradient(25deg, #e7ece4 0 6%, transparent 6%),
    repeating-linear-gradient(25deg,  #f4f2ec 0 12px, #e6e3da 12px 13px),
    repeating-linear-gradient(115deg, #f4f2ec 0 14px, #e6e3da 14px 15px);
}
.screen.dark .map{
  background:#222730;
  background-image:
    linear-gradient(115deg, #2a3b33 0 8%, transparent 8%),
    linear-gradient(25deg, #2b323a 0 6%, transparent 6%),
    repeating-linear-gradient(25deg,  #2b3038 0 12px, #232831 12px 13px),
    repeating-linear-gradient(115deg, #2b3038 0 14px, #232831 14px 15px);
}
.map .road{ position:absolute; background:#fff; opacity:.85; }
.screen.dark .map .road{ background:#3a414c; opacity:1; }
.pin{
  position:absolute; width:22px; height:22px; transform:translate(-50%,-100%);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.pin svg{ width:100%; height:100%; }

/* ============================================================
   Canvas page (host layout)
   ============================================================ */
body{
  font-family:var(--sans);
  background:#e8e9ec;
  color:#1c2433;
  padding:64px 56px 120px;
}
.page-head{ max-width:1200px; margin:0 auto 8px; }
.page-head h1{ font-size:30px; font-weight:800; letter-spacing:-.5px; }
.page-head p{ color:#6b7280; font-size:15px; margin-top:8px; max-width:760px; line-height:1.5; }

.section{ max-width:1320px; margin:56px auto 0; }
.section > .sec-head{ margin-bottom:24px; }
.sec-head .tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:#6366f1; background:#ececfb;
  padding:5px 11px; border-radius:7px; margin-bottom:12px;
}
.sec-head h2{ font-size:23px; font-weight:800; letter-spacing:-.3px; }
.sec-head p{ color:#6b7280; font-size:14.5px; margin-top:7px; max-width:820px; line-height:1.5; }

.row{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; }

.frame{ display:flex; flex-direction:column; gap:14px; }
.frame .label{ display:flex; align-items:baseline; gap:10px; }
.frame .label .n{ font-size:15px; font-weight:700; color:#1c2433; }
.frame .label .d{ font-size:13px; color:#7b8290; }
.frame .label .rec{
  font-size:11px; font-weight:700; color:#1f9e6e; background:#e3f5ed;
  padding:3px 9px; border-radius:6px; letter-spacing:.3px;
}
.note{ font-size:13px; color:#6b7280; line-height:1.5; max-width:393px; }
.note b{ color:#374151; font-weight:700; }

/* ============================================================
   JPMate — landing page
   ============================================================ */
/* ===== landing scope ===== */
html{ scroll-behavior:smooth; }
.lp{
  --bg:#f3f1ec; --cream2:#ece6db; --ink:#19202c; --ink2:#525a66; --muted:#8b919b;
  --jp:#176d8a; --mate:#e3624a; --primary:#6366f1; --green:#1f9e6e; --dark:#14161b;
  --line:#e6e2d8;
}
body{ margin:0; padding:0; background:var(--bg,#f3f1ec); }
.lp{ font-family:var(--sans); color:var(--ink); background:var(--bg); overflow-x:hidden; }
.lp ::selection{ background:#d7e6ec; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline:32px; }
.lp h1,.lp h2,.lp h3{ letter-spacing:-.4px; }
.serif{ font-family:var(--serif); font-style:italic; font-weight:600; }

/* nav */
.nav{ position:sticky; top:0; z-index:50; transition:background .25s, box-shadow .25s, border-color .25s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(243,241,236,.86); backdrop-filter:blur(12px); border-color:var(--line); }
.nav .bar{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .logo{ font-size:22px; font-weight:800; }
.nav .logo .jp{ color:var(--jp); } .nav .logo .mate{ color:var(--mate); }
.nav .links{ display:flex; gap:30px; }
.nav .links a{ font-size:14.5px; font-weight:500; color:var(--ink2); text-decoration:none; transition:color .15s; }
.nav .links a:hover{ color:var(--ink); }
.btn-cta{ background:var(--primary); color:#fff; font-size:14px; font-weight:700; padding:11px 20px; border-radius:11px; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .2s; }
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(99,102,241,.32); }
@media(max-width:860px){ .nav .links{ display:none; } }

/* hero */
.hero{ display:grid; grid-template-columns:1.04fr .96fr; gap:36px; align-items:center; padding-block:54px 64px; }
.pill{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px 7px 11px; font-size:13px; font-weight:600; color:var(--ink2); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero h1{ font-size:62px; line-height:1.02; font-weight:800; margin:22px 0 0; color:var(--ink); letter-spacing:-1.8px; }
.hero h1 .serif{ color:var(--jp); }
.hero .lead{ font-size:18.5px; line-height:1.55; color:var(--ink2); margin:24px 0 0; max-width:500px; }
.try{ display:flex; align-items:center; gap:10px; margin-top:24px; font-size:14.5px; color:var(--muted); height:24px; }
.try .q{ color:var(--ink); font-weight:600; }
.try .cursor{ display:inline-block; width:2px; height:17px; background:var(--jp); margin-left:1px; animation:blink 1s steps(2) infinite; vertical-align:-3px; }
@keyframes blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.stores{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; }
.store{ display:flex; align-items:center; gap:11px; background:#16202c; color:#fff; padding:12px 20px; border-radius:14px; text-decoration:none; transition:transform .15s; }
.store:hover{ transform:translateY(-2px); }
.store .s1{ font-size:10px; opacity:.8; } .store .s2{ font-size:16px; font-weight:700; margin-top:1px; }
.trustline{ margin-top:22px; font-size:13.5px; color:var(--muted); display:flex; gap:18px; flex-wrap:wrap; }
.trustline span{ display:inline-flex; align-items:center; gap:6px; }
.heroart{ display:flex; justify-content:center; position:relative; }
.heroart .glow{ position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(99,102,241,.16), transparent 68%); top:48%; left:50%; transform:translate(-50%,-50%); z-index:0; }
.heroart .glow.two{ background:radial-gradient(circle, rgba(23,109,138,.14), transparent 68%); width:300px; height:300px; top:30%; left:34%; }
@media(max-width:900px){ .hero{ grid-template-columns:1fr; } .hero h1{ font-size:46px; } .heroart{ margin-top:10px; } }

/* phone float */
.float{ animation:float 6s ease-in-out infinite; position:relative; z-index:1; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* section heads */
.shead{ text-align:center; max-width:660px; margin:0 auto; }
.eyebrow-c{ font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mate); }
.shead h2{ font-size:40px; font-weight:800; margin:14px 0 0; color:var(--ink); letter-spacing:-1px; }
.shead p{ font-size:17px; line-height:1.55; color:var(--ink2); margin:16px 0 0; }

/* balance multi-line headings so a single word/char is never orphaned on the
   last line (matters most for CJK like JA/ZH/KO) */
.hero h1, .shead h2, .eband h2, .cta-card h2, .tour-copy h3, .fcard h3, .step h3{ text-wrap:balance; }
/* …and avoid a lone short last line in the supporting paragraphs */
.hero .lead, .shead p, .tour-copy p, .eband p, .fcard p, .step p, .cta-card p{ text-wrap:pretty; }

/* product tour */
.tour{ padding-block:90px; }
.tabs{ display:flex; gap:8px; justify-content:center; margin:40px auto 0; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px; width:fit-content; }
.tab{ display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:11px; font-size:14.5px; font-weight:600; color:var(--ink2); border:none; background:transparent; cursor:pointer; transition:all .2s; }
.tab svg{ width:18px; height:18px; }
.tab:hover{ color:var(--ink); }
.tab.active{ background:var(--ink); color:#fff; }
.tour-body{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:48px; min-height:560px; }
.tour-copy{ max-width:440px; }
.tour-copy .tc{ display:none; }
.tour-copy .tc.show{ display:block; animation:fadeUp .5s ease; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.tour-copy .tagico{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.tour-copy .tagico svg{ width:26px; height:26px; }
.tour-copy h3{ font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.6px; }
.tour-copy p{ font-size:17px; line-height:1.6; color:var(--ink2); margin-top:14px; }
.flist{ margin-top:22px; display:flex; flex-direction:column; gap:13px; }
.flist .fl{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink); }
.flist .ck{ width:22px; height:22px; border-radius:7px; background:#e6f5ee; color:var(--green); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.flist .ck svg{ width:13px; height:13px; }
.tour-art{ display:flex; justify-content:center; position:relative; }
.demo-screen{ display:none; }
.demo-screen.show{ display:flex; animation:fadeScreen .45s ease; }
@keyframes fadeScreen{ from{opacity:0; transform:scale(.97)} to{opacity:1; transform:scale(1)} }
@media(max-width:900px){ .tour-body{ grid-template-columns:1fr; gap:30px; } .tour-copy{ margin:0 auto; text-align:center; } .flist .fl{ text-align:left; } }

/* feature grid */
.fgrid-sec{ padding-block:80px; }
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.fcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; transition:transform .2s, box-shadow .2s; }
.fcard:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,28,48,.08); }
.fcard .fi{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
.fcard .fi svg{ width:23px; height:23px; }
.fcard h3{ font-size:17.5px; font-weight:800; color:var(--ink); margin-top:18px; }
.fcard p{ font-size:14.5px; line-height:1.5; color:var(--ink2); margin-top:7px; }
@media(max-width:860px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .fgrid{ grid-template-columns:1fr; } }

/* emergency dark band */
.eband{ background:var(--dark); color:#f1f0ec; border-radius:36px; margin:40px 0; padding:72px 0; position:relative; overflow:hidden; }
.eband .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.eband .eyebrow-c{ color:#f0805f; }
.eband h2{ font-size:38px; font-weight:800; letter-spacing:-.8px; color:#fff; }
.eband p{ font-size:17px; line-height:1.6; color:#b8bdc6; margin-top:16px; max-width:430px; }
.estat{ display:flex; gap:34px; margin-top:30px; }
.estat .e h4{ font-size:32px; font-weight:800; color:#fff; }
.estat .e p{ font-size:13.5px; color:#8a909b; margin-top:4px; }
.eband .art{ display:flex; justify-content:center; }
@media(max-width:900px){ .eband .wrap{ grid-template-columns:1fr; } .eband{ border-radius:24px; } }

/* languages strip (de-emphasized) */
.lang{ padding-block:50px; text-align:center; }
.lang .ll{ font-size:14px; font-weight:600; color:var(--muted); }
.lang .chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.lang .lc{ font-size:14px; font-weight:600; color:var(--ink2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; }

/* how it works */
.how{ padding-block:80px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.step{ text-align:center; padding:0 10px; }
.step .n{ width:48px; height:48px; border-radius:14px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto; font-size:18px; font-weight:800; color:var(--jp); }
.step h3{ font-size:19px; font-weight:800; margin-top:18px; color:var(--ink); }
.step p{ font-size:15px; line-height:1.55; color:var(--ink2); margin-top:9px; }
.step-line{ position:relative; }
@media(max-width:760px){ .steps{ grid-template-columns:1fr; gap:34px; } }

/* final cta */
.cta{ padding-block:30px 100px; }
.cta-card{ background:linear-gradient(135deg,#1b2740,#16202c); border-radius:32px; padding:72px 40px; text-align:center; position:relative; overflow:hidden; }
.cta-card::after{ content:""; position:absolute; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,.3),transparent 65%); top:-180px; right:-120px; }
.cta-card h2{ font-size:44px; font-weight:800; color:#fff; letter-spacing:-1px; position:relative; }
.cta-card h2 .serif{ color:#7fc7dd; }
.cta-card p{ font-size:18px; color:#b8bdc6; margin-top:16px; position:relative; }
.cta-card .stores{ justify-content:center; position:relative; margin-top:30px; }
.cta-card .store{ background:#fff; color:#16202c; }

/* footer */
.foot{ border-top:1px solid var(--line); padding-block:40px; }
.foot .bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.foot .logo{ font-size:18px; font-weight:800; } .foot .logo .jp{color:var(--jp)} .foot .logo .mate{color:var(--mate)}
.foot .fl{ display:flex; gap:24px; flex-wrap:wrap; } .foot .fl a{ font-size:14px; color:var(--ink2); text-decoration:none; }
.foot .cp{ font-size:13px; color:var(--muted); }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} .float{animation:none} }

/* prevent the fixed-width (393px) phone mockups from blowing out grid tracks
   and clipping the text columns on narrow screens */
.hero > *, .tour-body > *, .eband .wrap > *{ min-width:0; }

/* scale the phone mockups down so they fit small viewports
   (zoom shrinks the layout box too, so nothing overflows or clips) */
@media(max-width:430px){
  .heroart .float, .tour-art .demo-screen .phone, .eband .art .phone{ zoom:.88; }
}
@media(max-width:380px){
  .heroart .float, .tour-art .demo-screen .phone, .eband .art .phone{ zoom:.8; }
}
@media(max-width:340px){
  .heroart .float, .tour-art .demo-screen .phone, .eband .art .phone{ zoom:.72; }
}

/* ---- small-screen polish (nav switcher fit + tighter gutters) ---- */
@media(max-width:560px){
  .wrap{ padding-inline:20px; }
  .nav .bar{ height:64px; }
  /* "Join the waitlist" is wider than the old CTA; the hero/footer carry it on mobile */
  .nav .btn-cta{ display:none; }
  .btn-cta{ padding:10px 15px; font-size:13.5px; }
  .hero{ padding-block:36px 48px; }
  .hero h1{ font-size:38px; }
  .fgrid-sec{ padding-block:56px; }
  .eband{ padding:48px 0; border-radius:20px; }
  .cta-card{ padding:52px 22px; }
  .cta-card h2{ font-size:32px; }
}
@media(max-width:360px){
  .nav .links{ display:none; }
  .btn-cta{ padding:9px 12px; }
  .hero h1{ font-size:33px; }
}

/* ---- vertical rhythm for the stacked mobile layout ---- */
@media(max-width:760px){
  .lang{ padding-block:42px 40px; }          /* clearer gap below languages… */
  .how{ padding-block:64px 0; }              /* …so "Up and running" sits with How it works */
  .steps{ margin-top:30px; gap:32px; }   /* step 1 closer to the heading; even rhythm */
  .step:last-child{ margin-bottom:10px; }/* breathing room under "Ask away" */
  .cta{ padding-block:56px 72px; }           /* space above the card and before the footer */
}

/* shared app compositions (chat + emergency) */
.inputbar{ flex:none; padding:10px 14px 16px; }
.inputbox{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 16px 10px; box-shadow:var(--shadow-sm); }
.inputbox .ph{ font-size:15px; color:var(--muted); display:block; }
.inputfoot{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.inputfoot .gear{ color:var(--muted); font-size:14px; }
.inputfoot .cnt{ font-size:12px; color:var(--muted); }
.inputfoot .send{ margin-left:auto; background:var(--card-2); color:var(--muted); border:none; padding:8px 18px; border-radius:11px; font-size:13px; font-weight:700; }
.msg-u{ display:flex; gap:9px; justify-content:flex-end; align-items:flex-start; margin:10px 0; }
.bubble-u{ max-width:82%; background:var(--card-2); color:var(--ink); padding:13px 15px; border-radius:16px 16px 4px 16px; font-size:15px; line-height:1.4; }
.msg-a{ display:flex; gap:11px; align-items:flex-start; margin:6px 0; }
.av-sm{ width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; margin-top:2px; }
.av-sm.jp{ background:var(--jp); border-radius:8px; }
.answer{ font-family:var(--serif); font-size:15.5px; line-height:1.5; color:var(--ink); }
.answer a{ color:var(--jp); text-decoration:underline; text-underline-offset:2px; }
.eg-head{ padding:8px 2px 16px; }
.eg-head .row1{ display:flex; align-items:flex-start; justify-content:space-between; }
.readiness{ background:var(--bg-cool); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.screen.dark .readiness{ background:#1b2030; border-color:#272f44; }
.readiness .txt h3{ font-size:16px; font-weight:800; color:var(--ink); }
.readiness .txt p{ font-size:13px; color:var(--muted); margin-top:3px; }
.dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dcard{ background:var(--card); border-radius:15px; padding:15px 14px 14px; box-shadow:var(--shadow-sm); border-top:3px solid var(--ac); position:relative; }
.dcard .tt{ font-size:15px; font-weight:800; color:var(--ink); }
.dcard .ss{ font-size:12px; color:var(--muted); margin-top:3px; }
.dcard .rr{ position:absolute; top:13px; right:13px; }
.sh-head{ display:flex; align-items:center; gap:11px; }
.sh-pin{ width:34px; height:34px; border-radius:10px; background:#e3f5ed; color:var(--green); display:flex; align-items:center; justify-content:center; flex:none; }
.screen.dark .sh-pin{ background:#143628; }
.sh-head h3{ font-size:15.5px; font-weight:800; color:var(--ink); }
.sh-head p{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.sh-item{ display:flex; align-items:center; gap:12px; padding:13px 2px; border-top:1px solid var(--line); }
.sh-rank{ width:30px; height:24px; border-radius:7px; background:#e3f5ed; color:var(--green); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.screen.dark .sh-rank{ background:#143628; }
.sh-item .si h4{ font-size:14.5px; font-weight:700; color:var(--ink); }
.sh-item .si p{ font-size:12px; color:var(--muted); margin-top:2px; }
.sh-item .chev{ margin-left:auto; color:var(--muted); }
.sh-nav{ margin-left:auto; display:flex; align-items:center; gap:6px; background:var(--primary); color:#fff; border-radius:10px; padding:8px 13px; font-size:13px; font-weight:700; }
.offline{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--green); background:#e9f6f0; padding:3px 8px; border-radius:6px; }
.screen.dark .offline{ background:#143628; }

/* mini app-screen helpers used inside demo phones */
.md-center{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 24px 0; }
.md-ico{ width:74px; height:74px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center; color:var(--jp); margin-bottom:18px; }
.md-ico svg{ width:30px; height:30px; }
.md-title{ font-size:24px; font-weight:800; color:var(--ink); }
.md-sub{ font-size:14px; color:var(--muted); line-height:1.5; margin-top:10px; }
.md-btns{ display:flex; gap:12px; margin-top:26px; width:100%; }
.md-btn{ flex:1; background:var(--card-2); border-radius:14px; padding:20px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink); }
.md-btn svg{ width:24px; height:24px; color:var(--jp); }
.md-btn span{ font-size:14px; font-weight:700; }
.saved-card{ background:var(--card); border-radius:15px; box-shadow:var(--shadow-sm); padding:15px; margin-bottom:12px; }
.saved-card .sh{ display:flex; align-items:center; gap:8px; }
.saved-card .sh .bm{ color:var(--jp); } .saved-card .sh .bm svg{ width:15px; height:15px; }
.saved-card .sh .dt{ font-size:12.5px; font-weight:700; color:var(--ink-2); } .saved-card .sh .tr{ margin-left:auto; color:var(--muted); }
.saved-card .bd{ font-size:13.5px; line-height:1.45; color:var(--ink-2); margin-top:9px; }

/* footer-A bits (for demo Ask screen) */
.fbar2{ display:flex; align-items:center; gap:7px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.fbar2 .spacer{ flex:1; }
.fbar2 .helpful-lbl{ font-size:12px; color:var(--muted); }
.ibtn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; color:var(--ink-2); }
.ibtn svg{ width:15px; height:15px; }
.ibtn.up{ background:#e6f5ee; border-color:#bfe6d3; color:var(--green); }
.srcpill2{ display:inline-flex; align-items:center; gap:8px; margin-top:13px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--card-2); padding:8px 12px; border-radius:9px; white-space:nowrap; }
.srcpill2 svg{ width:14px; height:14px; color:var(--jp); }

/* ===========================================================================
   Waitlist signup (pre-launch) — replaces the App Store / Play buttons until
   the app ships. Light variant lives in the hero; dark variant on the CTA card.
   =========================================================================== */
.waitlist{ margin-top:30px; max-width:440px; }
.wl-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wl-row{ display:flex; gap:10px; }
.wl-input{ flex:1; min-width:0; font:inherit; font-size:15px; padding:13px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
.wl-input::placeholder{ color:var(--muted); }
.wl-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.wl-btn{ font:inherit; font-size:15px; font-weight:700; color:#fff; background:var(--primary); border:none; border-radius:13px; padding:13px 22px; cursor:pointer; white-space:nowrap; transition:transform .15s, box-shadow .2s; }
.wl-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(99,102,241,.32); }
.waitlist.sending .wl-btn{ opacity:.7; pointer-events:none; }
.wl-status{ margin:0; font-size:13.5px; line-height:1.45; min-height:1px; }
.wl-status.show{ margin-top:12px; }
.wl-status.ok{ color:var(--green); font-weight:600; }
.wl-status.err{ color:#d6455d; font-weight:600; }
.wl-status.info{ color:var(--muted); }

/* dark variant on the final CTA card */
.cta-card .waitlist{ margin:30px auto 0; position:relative; }
.cta-card .wl-input{ background:rgba(255,255,255,.97); border-color:transparent; }
.cta-card .wl-btn{ background:#fff; color:#16202c; }
.cta-card .wl-btn:hover{ box-shadow:0 8px 22px rgba(0,0,0,.28); }
.cta-card .wl-status.info{ color:#cdd3dd; }
.cta-card .wl-status.ok{ color:#7fddb6; }
.cta-card .wl-status.err{ color:#ff9aa9; }

@media(max-width:560px){
  .wl-row{ flex-direction:column; }
  .wl-btn{ width:100%; }
}