:root {
            --ink: #141416;
            --graphite: #3A3A40;
            --mist: #9B96A0;
            --apricot: #E18B5F;
            --success: #1FA97C;
            --text-primary: #161618;
            --text-secondary: #6E6A72;
            --border: #E9E6EA;
            --card: rgba(255, 255, 255, 0.72);
            --radius: 22px;
            --maxw: 1080px;
        }

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

        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: var(--text-primary);
            /* Pearl & Ink: a soft pastel wash, warm cream into blush and mist. */
            background:
                radial-gradient(1100px 700px at 12% -8%, #FDEFE4 0%, rgba(253,239,228,0) 55%),
                radial-gradient(900px 700px at 96% 4%, #ECE9F4 0%, rgba(236,233,244,0) 55%),
                radial-gradient(1000px 800px at 50% 108%, #E9F3EE 0%, rgba(233,243,238,0) 55%),
                #FBF8F5;
            background-attachment: fixed;
            min-height: 100vh;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

        a { color: inherit; }

        /* ---------- Nav ---------- */
        header.nav {
            position: sticky; top: 0; z-index: 20;
            backdrop-filter: saturate(140%) blur(14px);
            -webkit-backdrop-filter: saturate(140%) blur(14px);
            background: rgba(251, 248, 245, 0.6);
            border-bottom: 1px solid var(--border);
        }
        .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
        .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
        .brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 3px 10px rgba(20,20,22,0.14); }

        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 600; font-size: 16px; border: none; cursor: pointer;
            border-radius: 999px; padding: 0 22px; height: 48px;
            transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
            text-decoration: none; white-space: nowrap;
        }
        .btn:active { transform: scale(0.97); }
        .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 8px 22px rgba(20,20,22,0.22); }
        .btn-primary:hover { opacity: 0.92; }
        .btn-sm { height: 40px; font-size: 15px; padding: 0 18px; }

        /* ---------- Hero ---------- */
        .hero { padding: 72px 0 40px; }
        .hero-grid {
            display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
        }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 14px; font-weight: 600; color: var(--apricot);
            background: rgba(225,139,95,0.12); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
        }
        .hero h1 {
            font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -0.02em;
            font-weight: 800; margin-bottom: 18px;
        }
        .hero h1 .accent { color: var(--apricot); }
        .hero p.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-secondary); max-width: 30ch; margin-bottom: 28px; }

        /* Notify form */
        .notify { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
        .notify input[type="email"] {
            flex: 1 1 220px; height: 52px; border-radius: 999px; border: 1px solid var(--border);
            background: #fff; padding: 0 20px; font-size: 16px; color: var(--text-primary);
            outline: none; transition: border-color .15s ease, box-shadow .15s ease;
        }
        .notify input[type="email"]:focus { border-color: var(--apricot); box-shadow: 0 0 0 4px rgba(225,139,95,0.14); }
        .notify .btn-primary { height: 52px; flex: 0 0 auto; }
        .form-note { margin-top: 12px; font-size: 13px; color: var(--text-secondary); min-height: 18px; }
        .form-note.ok { color: var(--success); font-weight: 600; }
        .form-note.err { color: #E4574F; font-weight: 600; }

        /* ---------- Phone showcase ---------- */
        .phones { display: flex; gap: 18px; justify-content: center; align-items: flex-end; }
        .phone {
            width: 240px; aspect-ratio: 9 / 19.5; border-radius: 40px;
            background: #fff; border: 1px solid var(--border);
            box-shadow: 0 30px 60px rgba(20,20,22,0.16); padding: 5px; position: relative; overflow: hidden;
        }
        .phone.small { width: 200px; margin-bottom: 26px; }
        .phone-screen {
            width: 100%; height: 100%; border-radius: 35px; overflow: hidden;
            /* Placeholder shown until a screenshot image is dropped in. */
            background:
                radial-gradient(400px 300px at 30% 0%, #FDEFE4, transparent 60%),
                radial-gradient(400px 300px at 100% 100%, #E9F3EE, transparent 60%),
                #F6F4F6;
            display: flex; align-items: center; justify-content: center; text-align: center;
        }
        .phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .phone-placeholder { color: var(--mist); font-size: 13px; font-weight: 600; padding: 0 24px; }

        /* ---------- Features ---------- */
        section.features { padding: 56px 0; }
        .section-head { text-align: center; margin-bottom: 40px; }
        .section-head h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
        .section-head p { color: var(--text-secondary); font-size: 17px; }
        /* Alternating image / text feature rows */
        .feature-row {
            display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
            margin-bottom: 72px;
        }
        .feature-row:last-child { margin-bottom: 0; }
        .feature-row.reverse .feature-media { order: 2; }
        .feature-media { display: flex; justify-content: center; }
        .feature-media .phone { width: 240px; }
        .feature-step {
            display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--apricot);
            background: rgba(225,139,95,0.12); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
        }
        .feature-text h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 10px; }
        .feature-text p { color: var(--text-secondary); font-size: 16px; max-width: 34ch; }

        /* ---------- CTA band ---------- */
        section.cta { padding: 40px 0 80px; }
        .cta-inner {
            background: var(--ink); color: #fff; border-radius: 32px; text-align: center;
            padding: 56px 28px; box-shadow: 0 30px 70px rgba(20,20,22,0.28);
        }
        .cta-inner h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
        .cta-inner p { color: rgba(255,255,255,0.72); font-size: 17px; margin-bottom: 26px; }
        .cta-inner .notify { margin: 0 auto; justify-content: center; }
        .cta-inner .notify input[type="email"] { border-color: transparent; }
        .cta-inner .btn-primary { background: var(--apricot); box-shadow: 0 8px 22px rgba(225,139,95,0.4); }
        .cta-inner .form-note { color: rgba(255,255,255,0.7); text-align: center; }
        .cta-inner .form-note.ok { color: #7BE3C0; }

        /* ---------- Footer ---------- */
        footer { border-top: 1px solid var(--border); padding: 30px 0 44px; }
        .foot-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 14px; }
        .foot-copy { grid-column: 2; text-align: center; }
        .foot-links { grid-column: 3; justify-self: end; }
        .foot-links a { text-decoration: none; }
        .foot-links a:hover { color: var(--text-primary); }
        @media (max-width: 560px) {
            .foot-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
            .foot-copy, .foot-links { grid-column: 1; justify-self: center; }
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 860px) {
            .hero { padding: 32px 0 20px; text-align: center; }
            .hero-grid { grid-template-columns: 1fr; gap: 28px; }
            /* Show the app screenshots above the copy/tagline on mobile. */
            .hero-art { order: -1; }
            .hero p.lead { margin-left: auto; margin-right: auto; }
            .notify { margin: 0 auto; justify-content: center; }
            .eyebrow { margin-inline: auto; }
            .phone { width: 220px; }
            .phone.small { display: none; }
            /* Feature rows stack, image on top, text centered. */
            .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 32px; margin-bottom: 80px; text-align: center; padding: 8px 0; }
            .feature-row .feature-media, .feature-row.reverse .feature-media { order: 0; }
            .feature-text p { margin-inline: auto; }
            .feature-step { margin-inline: auto; }
        }
        @media (max-width: 420px) {
            .notify .btn-primary { width: 100%; }
            .phone { width: 200px; }
        }

/* ---------- Landing-page additions ---------- */
.breadcrumb { font-size: 14px; color: var(--text-secondary); padding: 18px 0 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Why-speaking points */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.point { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.point .ic { font-size: 26px; }
.point h3 { font-size: 18px; margin: 10px 0 6px; }
.point p { color: var(--text-secondary); font-size: 15px; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; padding: 4px 20px; margin-bottom: 12px;
}
.faq summary {
    list-style: none; cursor: pointer; font-weight: 600; font-size: 17px;
    padding: 16px 0; display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--mist); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-secondary); padding: 0 0 16px; font-size: 15px; }

/* Language cross-links */
.lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.lang-card {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px 18px; font-weight: 600; transition: transform .15s ease, border-color .15s ease;
}
.lang-card:hover { transform: translateY(-2px); border-color: var(--apricot); }
.lang-card .flag { font-size: 26px; }

@media (max-width: 720px) {
    .points { grid-template-columns: 1fr; }
    .lang-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 0 64px; }
.legal h1 { font-size: 34px; margin: 8px 0 2px; }
.legal-updated { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }
.legal h2 { font-size: 20px; margin: 28px 0 8px; color: var(--text-primary); }
.legal p { color: var(--text-secondary); margin-bottom: 12px; line-height: 1.65; }
.legal a { color: var(--ink); text-decoration: underline; }
.legal strong { color: var(--text-primary); }

/* ============================================================
   MODERN REFRESH — cleaner canvas, bolder type, app-style
   lifted buttons & cards, real device frames. Layered on top
   of the base so the markup is unchanged.
   ============================================================ */
:root{
  --ink:#16161A;
  --apricot:#F5883C;      /* punchier orange, matches the app */
  --apricot-deep:#C75E22; /* button lip / hover */
  --green:#1FA97C;
  --slab:#E9E6EF;         /* light lip under lifted buttons/cards */
  --radius:26px;
}

/* Clean white canvas with a single warm glow up top (the app is white). */
body{
  background:
    radial-gradient(1200px 560px at 50% -12%, #FCEBDC 0%, rgba(252,235,220,0) 62%),
    #FFFFFF;
  background-attachment: fixed;
}

/* Heavier, tighter display type — the personality of the page. */
.hero h1{ font-weight:900; letter-spacing:-.035em; font-size:clamp(40px,6.2vw,68px); }
.hero p.lead{ max-width:34ch; font-size:clamp(18px,2.2vw,21px); }
.section-head h2{ font-weight:900; letter-spacing:-.03em; font-size:clamp(30px,4.4vw,46px); }
.section-head p{ font-size:18px; max-width:52ch; margin:0 auto; }
.feature-text h3{ font-weight:900; letter-spacing:-.02em; font-size:clamp(24px,3.4vw,34px); }
.feature-text p{ font-size:17px; }
.cta-inner h2{ font-weight:900; letter-spacing:-.03em; }

/* Eyebrow + step chips: bolder, tighter. */
.eyebrow,.feature-step{ font-weight:800; }

/* Chunky lifted buttons — a light lip peeks below, like the app's CTAs. */
.btn-primary{ box-shadow:0 5px 0 var(--slab); }
.btn-primary:hover{ opacity:1; transform:translateY(2px); box-shadow:0 3px 0 var(--slab); }
.btn-primary:active{ transform:translateY(5px); box-shadow:0 0 0 var(--slab); }
.cta-inner .btn-primary{ background:var(--apricot); box-shadow:0 5px 0 var(--apricot-deep); }
.cta-inner .btn-primary:hover{ box-shadow:0 3px 0 var(--apricot-deep); }

/* Email input: rounder, crisper focus. */
.notify input[type="email"]{ height:54px; border-width:1.5px; }

/* More breathing room; features get real rhythm. */
section.features{ padding:88px 0; }
.section-head{ margin-bottom:52px; }
.feature-row{ margin-bottom:90px; gap:64px; }

/* Real device frames instead of a plain white rectangle. */
.phone{
  border:7px solid #16161A; background:#16161A; padding:0; border-radius:46px;
  box-shadow:0 45px 90px -34px rgba(20,20,22,.5), 0 6px 0 rgba(0,0,0,.12);
}
.phone-screen{ border-radius:40px; }
.phone-screen img{ object-position:top; }

/* Lifted, tactile cards (why-speaking points & language links). */
.point{
  background:#fff; border:1px solid var(--border); border-radius:20px;
  box-shadow:0 5px 0 var(--slab); transition:transform .16s ease, box-shadow .16s ease;
}
.point:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--slab); }
.point .ic{
  display:inline-grid; place-items:center; width:52px; height:52px; border-radius:15px;
  background:rgba(245,136,60,.12); font-size:26px; margin-bottom:4px;
}
.point h3{ font-weight:800; font-size:19px; }
.lang-card{ box-shadow:0 4px 0 var(--slab); }
.lang-card:hover{ transform:translateY(-3px); box-shadow:0 7px 0 var(--slab); }

/* FAQ: a touch bolder. */
.faq summary{ font-weight:800; }

/* Brand mark a little stronger. */
.brand{ font-weight:900; letter-spacing:-.01em; }

@media (max-width:860px){
  .feature-row{ margin-bottom:64px; gap:32px; }
  section.features{ padding:60px 0; }
}
@media (prefers-reduced-motion:reduce){
  body{ background-attachment:scroll; }
  .btn-primary:hover,.point:hover,.lang-card:hover{ transform:none; }
}

/* Feature screenshots: show the FULL image (no phone frame, no cropping).
   Only the hero phones (.phones .phone) keep the device frame. */
.feature-media .phone{
  width:auto; max-width:340px; aspect-ratio:auto; overflow:visible;
  border:none; background:transparent; padding:0; border-radius:0; box-shadow:none;
}
.feature-media .phone-screen{
  height:auto; aspect-ratio:auto; background:transparent; display:block;
  border:1px solid var(--border); border-radius:24px; overflow:hidden;
  box-shadow:0 26px 60px -28px rgba(20,20,22,.4);
}
.feature-media .phone-screen img{
  position:static; width:100%; height:auto; object-fit:contain; display:block; border-radius:24px;
}

/* ── Language selector (custom brand-styled dropdown on <details>) ────── */
.lang-dd{ position:relative; flex:0 0 auto; }
.lang-dd summary{ list-style:none; cursor:pointer; }
.lang-dd summary::-webkit-details-marker{ display:none; }
.lang-btn{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-weight:800; font-size:14px; line-height:1; color:var(--ink);
  background:var(--slab, #ECE9F1); border:1px solid transparent;
  border-radius:999px; padding:9px 12px 9px 14px;
  transition:background .15s ease;
}
.lang-btn:hover{ background:#e3dfea; }
.lang-btn .flag{ font-size:15px; }
.lang-dd summary:focus-visible{ outline:2px solid var(--apricot); outline-offset:2px; border-radius:999px; }
.lang-caret{ opacity:.65; transition:transform .18s ease; }
.lang-dd[open] .lang-caret{ transform:rotate(180deg); }

.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  min-width:196px; padding:6px;
  background:#fff; border:1px solid var(--border); border-radius:18px;
  box-shadow:0 22px 50px -18px rgba(20,20,22,.34);
  display:flex; flex-direction:column; gap:2px;
  animation:langpop .14s ease;
}
@keyframes langpop{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.lang-item{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  padding:10px 12px; border-radius:12px; text-decoration:none;
  font-weight:700; font-size:15px; color:var(--ink);
}
.lang-item .flag{ font-size:17px; line-height:1; }
.lang-item:hover{ background:rgba(245,136,60,.10); }
.lang-item.is-current{ color:var(--apricot-deep, #C75E22); background:rgba(245,136,60,.12); }
.lang-item.is-current::after{ content:"✓"; margin-left:auto; font-weight:900; }
@media (prefers-reduced-motion:reduce){ .lang-menu{ animation:none; } }

/* ── Mobile safety: no horizontal overflow, media stays in the viewport ─ */
html, body{ overflow-x:hidden; }
img{ max-width:100%; }
.hero h1{ overflow-wrap:break-word; }
.feature-row, .feature-row > *{ min-width:0; }          /* stop grid/flex blow-out */
.feature-media{ width:100%; min-width:0; }
.feature-media .phone{ width:100%; max-width:340px; }
.feature-media .phone-screen, .feature-media .phone-screen img{ max-width:100%; }
@media (max-width:480px){
  .hero h1{ font-size:clamp(30px, 8.5vw, 68px); }        /* keep the big display from overflowing */
  .nav-inner{ gap:10px; }
}

/* ============================================================
   APP FONT (Nunito Sans, self-hosted — matches the iOS app) +
   line-height that gives Thai/CJK marks room (fixes clipped ฯลฯ).
   ============================================================ */
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/NunitoSans-Regular.ttf") format("truetype"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/NunitoSans-SemiBold.ttf") format("truetype"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/NunitoSans-Bold.ttf") format("truetype"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:800; font-display:swap; src:url("/assets/fonts/NunitoSans-ExtraBold.ttf") format("truetype"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:900; font-display:swap; src:url("/assets/fonts/NunitoSans-Black.ttf") format("truetype"); }

:root{
  /* Nunito Sans for Latin (as in the app); robust per-glyph fallbacks for
     Thai / Chinese / Korean so non-Latin scripts render cleanly. */
  --font:"Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
         "Noto Sans Thai", "Leelawadee UI", "Sarabun",
         "PingFang SC", "Microsoft YaHei", "Hiragino Sans",
         "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}
body{ font-family:var(--font); }

/* A touch more leading than the tight display default (Latin). */
.hero h1{ line-height:1.12; }
.section-head h2{ line-height:1.14; }
.feature-text h3{ line-height:1.18; }
.cta-inner h2{ line-height:1.16; }

/* Thai / Chinese / Korean: negative tracking + 1.05 leading clip stacked
   vowels and tone marks — give them real room and normal letter-spacing. */
html[lang="th"] .hero h1, html[lang="zh-Hans"] .hero h1, html[lang="ko"] .hero h1{ line-height:1.4; letter-spacing:0; }
html[lang="th"] .section-head h2, html[lang="zh-Hans"] .section-head h2, html[lang="ko"] .section-head h2{ line-height:1.34; letter-spacing:0; }
html[lang="th"] .feature-text h3, html[lang="zh-Hans"] .feature-text h3, html[lang="ko"] .feature-text h3{ line-height:1.34; letter-spacing:0; }
html[lang="th"] .cta-inner h2, html[lang="zh-Hans"] .cta-inner h2, html[lang="ko"] .cta-inner h2{ line-height:1.34; letter-spacing:0; }
html[lang="th"] .point h3, html[lang="zh-Hans"] .point h3, html[lang="ko"] .point h3{ line-height:1.35; }
html[lang="th"] .eyebrow, html[lang="zh-Hans"] .eyebrow, html[lang="ko"] .eyebrow{ line-height:1.4; }