/* =============================================================================
   The Handwriting App - mobile-first styles
   ========================================================================== */
:root{
  --ink:#1f2a44; --muted:#64748b; --faint:#94a3b8;
  --indigo:#4f46e5; --indigo-dark:#3730a3; --indigo-soft:#eef2ff;
  --good:#16a34a; --bad:#e11d48; --warn:#f59e0b;
  --bg:#f5f7fb; --card:#ffffff; --line:#e6ebf3;
  --radius:16px; --shadow:0 2px 14px rgba(15,23,42,.07);
  --maxw:1080px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; font-size:16px;
}
a{color:var(--indigo); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
h1,h2,h3{line-height:1.2; color:var(--ink); margin:0 0 .4em;}
h1{font-size:clamp(28px,6vw,46px); letter-spacing:-.02em;}
h2{font-size:clamp(22px,4vw,32px); letter-spacing:-.01em;}
h3{font-size:18px;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 18px;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* --- Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:13px 22px; font-size:15px; font-weight:700;
  cursor:pointer; transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--indigo); color:#fff; box-shadow:0 4px 14px rgba(79,70,229,.32);}
.btn-primary:hover{background:var(--indigo-dark);}
.btn-ghost{background:#fff; color:var(--ink); box-shadow:var(--shadow);}
.btn-soft{background:var(--indigo-soft); color:var(--indigo);}
.btn-block{display:flex; width:100%;}
.btn-lg{padding:16px 26px; font-size:16px;}
.btn-oauth{background:#fff; color:#1f2a44; box-shadow:var(--shadow); border:1px solid var(--line);}
.oa-ic{display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; font-weight:800; color:#4285F4;}

/* --- Header / nav ---------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand .logo{font-size:22px;}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{color:var(--ink); font-weight:600; font-size:15px; padding:8px 12px; border-radius:9px;}
.nav-links a:hover{background:var(--indigo-soft); color:var(--indigo); text-decoration:none;}
.nav-links .btn{padding:9px 16px; font-size:14px;}
.nav-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink); padding:6px;}

@media (max-width:760px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:62px; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; background:#fff; border-bottom:1px solid var(--line); padding:10px 14px 16px;
    box-shadow:var(--shadow); display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 10px; font-size:16px;}
  .nav-links .btn{margin-top:6px;}
}

/* --- Hero ------------------------------------------------------------------ */
.hero{padding:64px 0 44px; text-align:center;}
.hero .tag{display:inline-block; background:var(--indigo-soft); color:var(--indigo);
  font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:18px;}
.hero p.lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:620px; margin:0 auto 26px;}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero-scripts{margin-top:30px; font-size:clamp(26px,5vw,38px); letter-spacing:6px; color:var(--indigo-dark); opacity:.85;}

/* --- Sections / cards ------------------------------------------------------ */
section{padding:46px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 34px;}
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; border:1px solid var(--line);}
.card .ico{font-size:30px; margin-bottom:8px;}
.card h3{margin-bottom:4px;}
.card p{margin:0; color:var(--muted); font-size:14.5px;}

/* Language tiles */
a.lang-tile{display:flex; flex-direction:column; gap:6px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  color:var(--ink); transition:transform .08s ease, box-shadow .15s ease;}
a.lang-tile:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 8px 22px rgba(15,23,42,.10);}
.lang-tile .native{font-size:30px; line-height:1; color:var(--indigo-dark);}
.lang-tile .name{font-weight:700; font-size:16px;}
.lang-tile .blurb{font-size:13px; color:var(--muted); margin:0;}
.badge{align-self:flex-start; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;}
.badge.free{background:#dcfce7; color:#15803d;}
.badge.pro{background:#fef3c7; color:#92400e;}

/* --- Pricing -------------------------------------------------------------- */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; margin:0 auto;}
@media (max-width:620px){ .price-grid{grid-template-columns:1fr;} }
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.plan.featured{border:2px solid var(--indigo); position:relative;}
.plan.featured::before{content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--indigo); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;}
.plan .amt{font-size:40px; font-weight:800; color:var(--ink);}
.plan .amt small{font-size:15px; font-weight:600; color:var(--muted);}
.plan ul{list-style:none; padding:0; margin:18px 0; }
.plan li{padding:7px 0 7px 26px; position:relative; color:var(--ink); font-size:14.5px;}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--good); font-weight:800;}
.plan li.no{color:var(--faint);}
.plan li.no::before{content:"·"; color:var(--faint);}

/* --- Auth / narrow pages --------------------------------------------------- */
.narrow{max-width:420px; margin:0 auto; padding:50px 0;}
.auth-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:32px 26px; text-align:center;}
.oauth-btns{display:flex; flex-direction:column; gap:10px; margin:22px 0 0;}

/* --- Account -------------------------------------------------------------- */
.acct-row{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);}
.acct-row:last-child{border-bottom:none;}
.pill{font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;}
.pill.pro{background:#fef3c7; color:#92400e;}
.pill.free{background:#e2e8f0; color:#475569;}

/* --- Flash messages ------------------------------------------------------- */
.flash{padding:12px 16px; border-radius:11px; margin:0 0 16px; font-size:14px; font-weight:600;}
.flash.error{background:#fee2e2; color:#b91c1c;}
.flash.success{background:#dcfce7; color:#15803d;}

/* --- Prose (legal/details) ------------------------------------------------ */
.prose{max-width:760px; margin:0 auto;}
.prose h2{margin-top:32px;}
.prose ul{padding-left:20px;}
.prose li{margin:6px 0;}

/* --- Footer --------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line); background:#fff; padding:34px 0; margin-top:30px;}
.foot-grid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;}
.foot-links{display:flex; gap:18px; flex-wrap:wrap;}
.foot-links a{color:var(--muted); font-size:14px;}
.site-footer .copy{color:var(--faint); font-size:13px;}

/* --- Learn app shell (full-bleed iframe) ---------------------------------- */
.app-shell{display:flex; flex-direction:column; height:100vh; height:100dvh; background:var(--bg);}
.app-bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:52px; padding:0 14px; background:#fff; border-bottom:1px solid var(--line); flex:0 0 auto;}
.app-bar .back{display:flex; align-items:center; gap:7px; font-weight:700; color:var(--ink); font-size:15px;}
.app-bar .title{font-weight:700; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.app-bar .right{display:flex; align-items:center; gap:8px;}
.app-bar .right a{font-size:13px; font-weight:700;}
.app-frame{flex:1 1 auto; width:100%; border:0; display:block;}