/* ================================================================
   PICTURE THE WORDS v2.0 — Semantic Visual Vocabulary
   Tokens → Layout → Components → Utilities
   ================================================================ */

/* ── Tokens ─────────────────────────────────────────────────────*/
:root {
  --bg:        #F4FBFC;
  --surface:   #FFFFFF;
  --ink:       #0C3846;
  --ink-dim:   #2A7387;
  --ink-muted: #7a9aad;
  --border:    #c8dfe6;
  --teal:      #2A7387;
  --teal-dark: #0C3846;
  --teal-lt:   #5EB0C8;
  --teal-50:   #E4F4F8;
  --gold:      #c9a84c;

  --sidebar-w: 240px;
  --header-h:  56px;
  --card-w:    300px;
  --card-h:    580px;
  --radius:    16px;
  --radius-sm: 8px;
  --shadow:    0 4px 20px rgba(12,56,70,.12);
  --shadow-lg: 0 12px 40px rgba(12,56,70,.2);
}

/* ── Reset ──────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Pages ──────────────────────────────────────────────────────*/
.page { display: none; }
#page-home { display: none; flex-direction: column; min-height: 100vh; }
#page-app  { display: none; }
#page-home.active { display: flex; }
#page-app.active  { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── HOME — Nav ─────────────────────────────────────────────────*/
.home-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  height: var(--header-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
}
.nav-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; display: block; }
.nav-brand-name { font-size: 15px; font-weight: 700; color: var(--teal-dark); letter-spacing: -.01em; }
.nav-spacer { flex: 1; }
.nav-search-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg); cursor: pointer;
  font-size: 13px; color: var(--ink-dim);
  transition: border-color .15s;
}
.nav-search-btn:hover { border-color: var(--teal-lt); }
.nav-search-btn svg { width: 14px; height: 14px; }

/* ── HOME — Hero ────────────────────────────────────────────────*/
#page-home { background: linear-gradient(160deg, var(--bg) 0%, #F7FCFD 50%, var(--teal-50) 100%); }

.hero {
  flex: 1;
  max-width: 1100px; width: 100%; margin: 0 auto;
  padding: 72px 36px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(42,115,135,.1); border: 1px solid rgba(42,115,135,.2);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 20px;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1;
  color: var(--teal-dark); margin-bottom: 18px;
}
.hero-title em { color: var(--teal); font-style: italic; }
.hero-subhead {
  font-size: 17px; font-weight: 600; color: var(--teal);
  margin-bottom: 14px;
}
.hero-body {
  font-size: 15px; line-height: 1.75; color: var(--ink-dim);
  margin-bottom: 32px; max-width: 440px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  padding: 13px 26px; border-radius: var(--radius-sm);
  background: var(--teal-dark); color: #fff;
  border: none; cursor: pointer; font-size: 14px; font-weight: 700;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(12,56,70,.22);
}
.btn-primary:hover { background: var(--teal); transform: translateY(-1px); }
.btn-secondary {
  padding: 13px 26px; border-radius: var(--radius-sm);
  background: transparent; border: 2px solid var(--teal-lt);
  color: var(--teal); cursor: pointer; font-size: 14px; font-weight: 600;
  transition: border-color .2s, color .2s;
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal-dark); }

/* ── HOME — Category grid ───────────────────────────────────────*/
.home-cats {
  padding: 56px 36px;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
.home-cats-title {
  text-align: center; margin-bottom: 32px;
  font-family: 'Playfair Display', serif;
  font-size: 26px; color: var(--teal-dark);
}
.home-cats-title em { color: var(--teal); font-style: italic; }
#home-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.cat-tile {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 16px 20px;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid var(--border);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  box-shadow: 0 2px 8px rgba(12,56,70,.06);
}
.cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--tile-color, var(--teal-lt));
}
.cat-tile-icon { display: block; font-size: 30px; margin-bottom: 10px; }
.cat-tile-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.cat-tile-count { font-size: 11px; color: var(--ink-muted); }

/* ── HOME — Vision ──────────────────────────────────────────────*/
.home-vision {
  text-align: center; padding: 40px 36px 16px;
}
.home-vision-text {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-style: italic; color: var(--ink-muted);
  opacity: .8; letter-spacing: .03em;
}

/* ── HOME — Footer ──────────────────────────────────────────────*/
.home-footer {
  padding: 20px 36px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 11px;
  color: var(--ink-muted); max-width: 1100px; width: 100%; margin: 0 auto;
}
.ptw-footer {
  border-top: 1px solid var(--border);
  padding: 16px 36px;
}
.ptw-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.ptw-footer-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; }
.ptw-copyright { font-size: 11px; color: var(--ink-muted); }

/* ── APP — Shell ────────────────────────────────────────────────*/
.app-topbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--header-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--teal-50);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(12,56,70,.07);
}
.topbar-home {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: background .15s;
}
.topbar-home:hover { background: var(--bg); }
.topbar-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; }
.topbar-crumb-wrap { display: flex; align-items: center; gap: 6px; }
.topbar-sep { color: var(--border); font-size: 16px; }
#topbar-crumb { font-size: 14px; font-weight: 600; color: var(--teal); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-btn {
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 12px; font-weight: 600; color: var(--ink-dim);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.topbar-btn:hover, .topbar-btn.active { border-color: var(--teal-lt); color: var(--teal); }
.topbar-search-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 12px; color: var(--ink-dim); cursor: pointer;
  transition: border-color .15s;
}
.topbar-search-btn:hover { border-color: var(--teal-lt); }

/* ── APP — Layout ───────────────────────────────────────────────*/
.app-body {
  display: flex; flex: 1; overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────*/
.app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--teal-dark);
  color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.sb-domain { border-bottom: 1px solid rgba(255,255,255,.06); }
.sb-domain-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.75);
  transition: background .15s, color .15s;
}
.sb-domain-head:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-domain-head.active { color: #fff; background: rgba(255,255,255,.1); }
.sb-icon { font-size: 14px; flex-shrink: 0; }
.sb-label { flex: 1; }
.sb-count { font-size: 11px; color: rgba(255,255,255,.35); }
.sb-subcats { display: none; }
.sb-domain.open .sb-subcats { display: block; }
.sb-subcat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 16px 7px 36px;
  cursor: pointer; font-size: 12px; color: rgba(255,255,255,.5);
  transition: color .12s, background .12s;
}
.sb-subcat:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }
.sb-subcat.active { color: #fff; background: rgba(255,255,255,.08); font-weight: 600; }
.sb-subcat-count { font-size: 10px; color: rgba(255,255,255,.3); }

/* ── Main content ───────────────────────────────────────────────*/
.app-main {
  flex: 1; overflow-y: auto;
  padding: 24px 24px 80px;
  background: var(--bg);
}

/* ── Category header ─────────────────────────────────────────────*/
.cat-header {
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 16px;
  color: #fff;
}
.cat-header-icon { font-size: 32px; }
.cat-header-info { flex: 1; }
#cat-header-label { font-size: 22px; font-weight: 700; }
#cat-header-count { font-size: 13px; opacity: .75; margin-top: 2px; }

/* ── Deck ────────────────────────────────────────────────────────*/
.deck {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  padding: 4px 0;
}
.deck.horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 300px));
  gap: 24px;
  justify-content: center;
}

/* ── Card ────────────────────────────────────────────────────────*/
.card-wrap {
  width: var(--card-w);
  height: var(--card-h);
  perspective: 1600px;
  cursor: pointer;
  flex-shrink: 0;
}
.card-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-wrap.flipped .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card-front {
  background: var(--surface);
  display: flex; flex-direction: column;
}
.card-back {
  background: var(--surface);
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
}

/* Front elements */
.star-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: none; cursor: pointer;
  font-size: 14px; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.star-btn.starred { color: var(--gold); background: rgba(255,255,255,.97); }
.expand-btn {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: none; cursor: pointer;
  font-size: 13px; color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: background .15s;
}
.expand-btn:hover, .expand-btn-back:hover { background: rgba(255,255,255,.97); }
.expand-btn-back {
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.2); box-shadow: none;
}
.front-img-wrap {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.front-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.flip-tag {
  padding: 10px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-muted); text-align: center;
  background: var(--bg); border-top: 1px solid var(--border);
}

/* Back elements */
.back-head {
  padding: 18px 18px 14px;
  background: var(--accent, var(--teal));
  flex-shrink: 0;
}
.back-kanji {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px; font-weight: 700;
  color: #fff; line-height: 1.2;
  margin-bottom: 4px;
}
.back-kana { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 8px; }
.back-domain-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: 10px;
}
.back-body {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
}
.back-empty { font-size: 12px; color: var(--ink-muted); text-align: center; padding-top: 16px; }

/* Word network */
.net-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 10px;
}
.net-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; flex-shrink: 0;
  margin-top: 3px; min-width: 52px;
}
.net-label-syn { color: var(--teal); }
.net-label-ant { color: #c0392b; }
.net-label-rel { color: #7f8c8d; }
.net-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.net-chip {
  padding: 3px 10px; border-radius: 12px;
  font-size: 12px; cursor: pointer; border: none;
  transition: opacity .15s;
}
.net-syn { background: rgba(42,115,135,.1); color: var(--teal); }
.net-ant { background: rgba(192,57,43,.08); color: #c0392b; }
.net-rel { background: rgba(127,140,141,.1); color: var(--ink-dim); }
.net-chip:hover { opacity: .7; }

/* ── Focus overlay ──────────────────────────────────────────────*/
#focus-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(5,20,35,.82);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 20px;
}
#focus-overlay.open { display: flex; }
.focus-close {
  position: fixed; top: 16px; right: 20px; z-index: 510;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#focus-card-wrap {
  width: min(300px, calc(100vw - 40px));
  height: min(580px, calc(100svh - 80px));
  perspective: 1600px; cursor: pointer;
}
#focus-card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
#focus-card-inner.flipped { transform: rotateY(180deg); }
#focus-card-inner .card-face {
  border-radius: 20px; position: absolute; inset: 0;
  backface-visibility: hidden; overflow: hidden;
  display: flex; flex-direction: column;
}
#focus-card-inner .card-back { overflow-y: auto; }

/* ── Search overlay ─────────────────────────────────────────────*/
#search-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(12,56,70,.6); backdrop-filter: blur(8px);
  align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
#search-overlay.open { display: flex; }
.sov-box {
  background: var(--surface); border-radius: var(--radius);
  width: min(560px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sov-input-row {
  display: flex; align-items: center;
  padding: 14px 18px; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.sov-icon { color: var(--ink-muted); font-size: 16px; flex-shrink: 0; }
#search-input {
  flex: 1; border: none; outline: none;
  font-size: 16px; color: var(--ink); background: transparent;
}
.sov-esc {
  font-size: 11px; color: var(--ink-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
#search-results { max-height: 420px; overflow-y: auto; }
.sov-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.sov-item:hover { background: var(--bg); }
.sov-cat { font-size: 11px; font-weight: 600; min-width: 110px; white-space: nowrap; }
.sov-jp { font-family: 'Noto Serif JP',serif; font-size: 18px; flex: 1; }
.sov-reading { font-size: 12px; color: var(--ink-muted); }
.sov-empty { padding: 24px 18px; text-align: center; color: var(--ink-muted); font-size: 14px; }

/* ── Mobile ──────────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; padding: 40px 20px 32px; }
  .hero-right { display: none; }
  .nav-links-desk { display: none; }
  .app-sidebar { display: none; }
  .card-wrap { width: min(300px, calc(100vw - 32px)); }
  #home-cat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ── Hero stat card ─────────────────────────────────────────────*/
.hero-right { display: flex; align-items: center; justify-content: center; }
.hero-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px 40px;
  text-align: center;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  max-width: 340px;
}
.stat-badge {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-dark); background: var(--teal-50);
  padding: 4px 14px; border-radius: 999px; margin-bottom: 12px;
}
.stat-note {
  margin-top: 16px; font-size: 12.5px; line-height: 1.65; color: var(--ink-dim);
}
.stat-note a { color: var(--teal); font-weight: 700; }
.stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 64px; font-weight: 700; font-style: italic;
  color: var(--teal); line-height: 1;
  margin-bottom: 10px;
}
.stat-label { font-size: 14px; color: var(--ink-muted); }

/* ── Scrollbar ───────────────────────────────────────────────────*/
.app-main::-webkit-scrollbar { width: 5px; }
.app-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ================================================================
   v3.0 ADDITIONS — trilingual concept tiles, direction tabs, audio
   (Card front now shows the finished, fully-rendered card image
   directly — no 3D flip needed, since front/back are the same
   image for now. Sizing/shadow/radius from the original card
   rules above are kept; only the internals changed.)
   ================================================================ */

/* Concept grid tiles (homepage-within-category browsing) */
.card-wrap {
  perspective: none;
}
.card-wrap .front-img-wrap img {
  object-fit: contain;
  background: var(--bg);
}
.tile-label {
  padding: 10px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--ink); text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  text-transform: capitalize;
}

/* Sidebar category dot (replaces the old emoji icon) */
.sb-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.sb-domain-head { display: flex; align-items: center; gap: 10px; }

/* Concept detail view inside the focus overlay */
#focus-card-inner {
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.dir-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.dir-tab {
  flex: 1; padding: 12px 8px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-muted); background: var(--bg);
  border: none; border-right: 1px solid var(--border);
  cursor: pointer; transition: background .15s, color .15s;
}
.dir-tab:last-child { border-right: none; }
.dir-tab.active { background: var(--surface); color: var(--teal-dark); }
.dir-tab:hover { background: var(--teal-50); }

.focus-card-img {
  flex: 1; min-height: 0;
  width: 100%; object-fit: contain;
  background: var(--bg);
  display: block;
}
.focus-audio-row {
  display: flex; gap: 8px; flex-shrink: 0;
  padding: 12px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.audio-btn {
  flex: 1; padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg); color: var(--teal-dark);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.audio-btn:hover { background: var(--teal-50); border-color: var(--teal-lt); }

/* Self-contained text logo (no external image file needed) */
.text-logo {
  font-size: 22px; line-height: 1; display: inline-block;
}

/* ================================================================
   v3.1 ADDITIONS — bugfix + homepage sidebar, settings, script bg
   ================================================================ */

/* BUGFIX: star button was positioning off-screen because .card-wrap
   never got position:relative in the v3.0 rebuild (only the old,
   now-unused .card-inner had it). */
.card-wrap { position: relative; }

/* Homepage left sidebar (About / Contact Us) */
.home-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 64px;
  background: var(--teal-dark); z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 10px;
}
.home-sidebar-logo { width: 34px; height: 34px; cursor: pointer; margin-bottom: 12px; }
.home-sidebar-logo img { width: 100%; height: 100%; object-fit: contain; }
.home-sidebar-link {
  writing-mode: vertical-rl; text-orientation: mixed;
  background: none; border: none; color: rgba(255,255,255,.75);
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; padding: 10px 0; transition: color .15s;
}
.home-sidebar-link:hover { color: #fff; }

/* Shift homepage content right to make room for the sidebar */
.home-nav, .hero, .home-cats, .home-vision, .ptw-footer { margin-left: 64px; }

/* My Notes overlay - same pattern as auth-overlay */
#notes-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(12,56,70,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
#notes-overlay.open { display: flex; }
.notes-list-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.notes-list-item:last-child { border-bottom: none; }
.notes-list-item img {
  width: 44px; height: 44px; object-fit: contain; border-radius: 6px;
  background: var(--bg); flex-shrink: 0;
}
.notes-list-item-body { flex: 1; min-width: 0; }
.notes-list-item-title { font-weight: 700; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.notes-list-item-text { font-size: 12.5px; color: var(--ink-dim); white-space: pre-wrap; }
.notes-empty { text-align: center; color: var(--ink-muted); padding: 24px 0; font-size: 13px; }

/* Auth (Sign Up / Log In) overlay - same pattern as info-overlay */
#auth-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(12,56,70,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
#auth-overlay.open { display: flex; }
#auth-overlay input {
  padding: 10px 12px; border: 1px solid var(--border, #ccc); border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
#auth-overlay #auth-submit-btn {
  padding: 10px 12px; border: none; border-radius: 8px;
  background: var(--teal-dark, #0c3846); color: #fff;
  font-weight: 600; cursor: pointer;
}
.auth-tabs button.active-tab { text-decoration: underline; font-weight: 700; }
.info-box {
  position: relative; background: var(--surface);
  border-radius: var(--radius); max-width: 480px; width: 90%;
  padding: 36px 32px; box-shadow: var(--shadow);
}
.info-box h3 { font-family: 'Playfair Display', serif; color: var(--teal-dark); margin-bottom: 12px; }
.info-box p { color: var(--ink-muted); line-height: 1.6; font-size: 14px; }

/* Subtle multi-script decorative background on the hero */
.hero { position: relative; overflow: hidden; }
.hero-script-bg {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-wrap: wrap; gap: 40px;
  padding: 20px; pointer-events: none;
  font-family: 'Noto Serif JP', serif;
}
.hero-script-bg span {
  font-size: 64px; color: var(--teal); opacity: .06;
  font-weight: 700;
}
.hero-left, .hero-right { position: relative; z-index: 1; }

/* Homepage study-direction / label-language settings */
.home-settings {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 22px;
}
.home-settings label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--ink-muted);
}
.home-settings select {
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: 600;
  cursor: pointer;
}

@media (max-width: 720px) {
  .home-sidebar {
    position: static; width: 100%; flex-direction: row;
    justify-content: center; padding: 10px 0;
  }
  .home-nav, .hero, .home-cats, .home-vision, .ptw-footer { margin-left: 0; }
  .home-sidebar-link { writing-mode: horizontal-tb; }
}

/* ================================================================
   v3.2 ADDITIONS — nav restructure, bigger logo/heading, deco cards
   ================================================================ */

/* Sidebar removed — undo the v3.1 content shift */
.home-nav, .hero, .home-cats, .home-vision, .ptw-footer { margin-left: 0; }
.home-sidebar, .home-sidebar-logo, .home-sidebar-link { display: none; }

/* Bigger logo + nicer heading font in the nav */
.nav-logo { width: 44px; height: 44px; object-fit: contain; }
.nav-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 21px; font-weight: 700;
  color: var(--teal-dark); letter-spacing: -.01em;
}
.nav-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* About / Contact Us links, now inline in the top nav */
.nav-info-link {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-muted);
  padding: 8px 14px; margin-left: 6px; border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  text-decoration: none; display: inline-block;
}
.nav-info-link:hover { background: var(--teal-50); color: var(--teal-dark); }

/* Eyebrow pill — SVG icon instead of an emoji (renders identically on
   every OS/browser, unlike emoji which can show as a blank box on
   older systems) */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.hero-eyebrow svg { flex-shrink: 0; }

/* Decorative "to study" cards (JA/HI/EN) fanned out AROUND the stat
   card — fully visible, not a low-opacity texture hidden behind it.
   Positioned with non-negative offsets so .hero's overflow:hidden
   never clips them. */
.hero-right {
  position: relative;
  min-height: 460px;
  padding: 40px 30px;
}
.deco-cards {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
}
.deco-card {
  position: absolute; width: 140px; border-radius: 14px;
  box-shadow: 0 10px 28px rgba(12,56,70,.16);
  opacity: .96;
}
.deco-card-1 { top: 6px;    left: 0;   transform: rotate(-9deg); }
.deco-card-2 { top: 6px;    right: 0;  transform: rotate(8deg); }
.deco-card-3 { bottom: 6px; left: 50%; transform: translateX(-50%) rotate(3deg); }
#hero-stats-panel { position: relative; }
.hero-stat-card { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .hero-right { min-height: 0; padding: 0; }
  .deco-cards {
    position: static; display: flex; gap: 12px; justify-content: center;
    margin-bottom: 16px; pointer-events: auto;
  }
  .deco-card { position: static !important; transform: none !important; width: 88px; opacity: .85; }
}

/* ================================================================
   v3.3 ADDITIONS — personal notes panel (Supabase-backed, in the
   focus-overlay card detail view)
   ================================================================ */
.note-panel {
  flex-shrink: 0; border-top: 1px solid var(--border);
  background: var(--surface); padding: 12px 14px 14px;
}
.note-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.note-panel-title { font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.note-save-status { font-size: 11px; color: var(--ink-muted); }
.note-textarea {
  width: 100%; min-height: 64px; resize: vertical;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink);
}
.note-textarea:focus { outline: none; border-color: var(--teal-lt); }
.note-hint { font-size: 10.5px; color: var(--ink-muted); margin-top: 6px; }

/* ================================================================
   v3.4 ADDITIONS — static content pages (About/Contact/How To Use/
   Pricing/Terms/Privacy/404), themed to match the real site tokens
   ================================================================ */

.ptw-footer-inner { flex-wrap: wrap; row-gap: 8px; }
.ptw-footer-links { font-size: 11px; color: var(--ink-muted); margin-left: auto; }
.ptw-footer-links a { color: var(--ink-dim); text-decoration: none; font-weight: 600; }
.ptw-footer-links a:hover { color: var(--teal); text-decoration: underline; }
.ptw-footer-dot { margin: 0 6px; }
.ptw-footer-credits {
  flex-basis: 100%; font-size: 10.5px; line-height: 1.7; color: var(--ink-muted);
  padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--border);
}
.ptw-footer-credits a { color: var(--teal); }

.ptw-page-content { max-width: 760px; margin: 0 auto; padding: 56px 28px 80px; }
.ptw-page-content h1 {
  font-family: 'Playfair Display', serif; color: var(--teal-dark);
  font-size: 34px; margin-bottom: 10px;
}
.ptw-page-content .page-lede { color: var(--ink-dim); font-size: 15px; margin-bottom: 32px; line-height: 1.7; }
.ptw-page-content h2 {
  font-family: 'Playfair Display', serif; color: var(--teal-dark);
  font-size: 21px; margin: 32px 0 12px;
}
.ptw-page-content p, .ptw-page-content li { color: var(--ink-dim); font-size: 14.5px; line-height: 1.75; }
.ptw-page-content ol, .ptw-page-content ul { padding-left: 20px; margin-bottom: 12px; }
.ptw-page-content li { margin-bottom: 6px; }
.ptw-content-card {
  background: var(--teal-50); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin: 20px 0;
}
.ptw-content-card p { color: var(--ink); }
.ptw-step-list { counter-reset: step; list-style: none; padding-left: 0; }
.ptw-step-list li { counter-increment: step; position: relative; padding-left: 40px; margin-bottom: 16px; }
.ptw-step-list li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-dark); color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ptw-section-divider {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  margin: 32px 0;
}

.ptw-contact-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ptw-contact-form label { font-size: 12.5px; font-weight: 700; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; }
.ptw-contact-form input, .ptw-contact-form textarea {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--ink); resize: vertical;
}
.ptw-contact-form input:focus, .ptw-contact-form textarea:focus { outline: none; border-color: var(--teal-lt); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 8px; }
.pricing-card {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.pricing-card h2 { font-size: 16px; margin: 0; }
.pricing-desc { font-size: 12.5px; color: var(--ink-muted); flex: 1; }
.pricing-buy { display: inline-block; text-decoration: none; margin-top: 6px; font-size: 13px; padding: 11px 16px; }
@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } }

.ptw-404 { max-width: 480px; margin: 0 auto; padding: 72px 28px 96px; text-align: center; }
.ptw-404-eyebrow {
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; color: var(--gold); margin-bottom: 6px;
}
.ptw-404 h1 { font-family: 'Playfair Display', serif; font-size: 27px; color: var(--teal-dark); margin-bottom: 10px; }
.ptw-404-body { font-size: 14px; color: var(--ink-dim); line-height: 1.7; margin-bottom: 28px; }
.ptw-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.ptw-404-actions a { text-decoration: none; }
.ptw-404-links { font-size: 12.5px; }
.ptw-404-links a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
.ptw-404-links a:hover { color: var(--teal); text-decoration: underline; }

@media (max-width: 760px) {
  .home-nav { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 6px; }
  .nav-info-link { padding: 6px 10px; font-size: 12px; }
}

/* ================================================================
   v3.5 ADDITIONS — My Account overlay (Profile/Categories/History),
   public reviews section
   ================================================================ */

/* My Account overlay — same pattern as auth/notes overlays */
#account-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(12,56,70,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
#account-overlay.open { display: flex; }
.account-tab.active-tab { text-decoration: underline; font-weight: 700; color: var(--teal-dark); }
.pair-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.pair-row:last-child { border-bottom: none; }
.yes-badge {
  font-size: 11px; font-weight: 700; color: #1a7a4c;
  background: #e4f4ea; padding: 2px 10px; border-radius: 20px;
}
#account-tab-body .settings-label { margin-top: 12px; }
#account-tab-body input { margin-bottom: 4px; }

/* Public reviews section on the homepage */
.home-reviews {
  max-width: 720px; margin: 0 auto; padding: 40px 36px 56px; text-align: center;
}
.reviews-summary { margin: 14px 0 24px; font-size: 15px; color: var(--ink-dim); }
.reviews-stars { color: var(--gold); font-size: 18px; margin-right: 8px; letter-spacing: 1px; }
.reviews-average { font-weight: 700; color: var(--teal-dark); }
.reviews-count { color: var(--ink-muted); font-size: 13px; }
.reviews-list { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-bottom: 20px; }
.review-item {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; background: var(--surface);
}
.review-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review-item-stars { color: var(--gold); letter-spacing: 1px; }
.review-item-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.review-item-text { font-size: 13.5px; color: var(--ink-dim); line-height: 1.6; }
.review-form-box {
  max-width: 380px; margin: 16px auto 0; text-align: left;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; background: var(--teal-50);
}
.review-form-box select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); font-size: 13px;
}

/* ================================================================
   v3.6 ADDITIONS — bigger/bolder homepage text, page headers for
   static content pages, collapsible note panel, card zoom feature
   ================================================================ */

.hero-title { font-size: clamp(40px, 5vw, 64px); }
.hero-subhead { font-size: 19px; font-weight: 700; }
.hero-body { font-size: 16.5px; font-weight: 500; line-height: 1.7; }
.home-cats-title { font-size: 30px; }
.cat-tile-name { font-size: 15.5px; font-weight: 800; }
.cat-tile-count { font-size: 12px; font-weight: 600; }
.hero-eyebrow { font-weight: 800; }

/* ── Centered-logo header for static content pages ──────────────
   About/Contact/How To Use/Pricing/Terms/Privacy — logo centered,
   large enough that the wordmark inside it is clearly legible,
   with study-motif icons either side, matching the brand's teal
   circular badge. Sits above the existing .home-nav on those pages. */
.ptw-page-header {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  padding: 32px 24px 22px;
  background: linear-gradient(160deg, var(--teal-50) 0%, #ffffff 75%);
  border-bottom: 1px solid var(--border);
}
.ptw-header-logo {
  width: 116px; height: 116px; object-fit: contain; border-radius: 50%;
  box-shadow: 0 10px 30px rgba(12,56,70,.18);
}
.ptw-header-icons { display: flex; gap: 20px; color: var(--teal-lt); opacity: .55; }
.ptw-header-icons svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .ptw-header-icons { display: none; }
  .ptw-header-logo { width: 88px; height: 88px; }
}

/* ── Collapsible note panel (card detail view) ───────────────────
   Collapsed by default so it never shrinks the flashcard image;
   expands only when the learner actually wants to write a note. */
.note-panel-toggle {
  width: 100%; text-align: left; background: none; border: none;
  border-top: 1px solid var(--border); cursor: pointer;
  padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--ink-dim);
  display: flex; align-items: center; justify-content: space-between;
}
.note-panel-toggle .chevron { transition: transform .2s; }
.note-panel-toggle.expanded .chevron { transform: rotate(180deg); }
.note-panel-body { padding: 0 14px 14px; display: none; }
.note-panel-body.open { display: block; }

/* ── Card zoom (enlarge without shrinking the default view) ──────
   A small expand button on the image itself toggles a larger modal
   size, rather than permanently reserving space for a zoom control. */
.focus-zoom-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 1px solid var(--border);
  color: var(--teal-dark); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.focus-zoom-btn:hover { background: #fff; }
#focus-card-wrap { position: relative; transition: width .25s, height .25s, max-width .25s, max-height .25s; }
#focus-card-wrap.zoomed { width: min(90vw, 640px); height: min(90vh, 820px); }

.focus-card-img-wrap { flex: 1; min-height: 0; position: relative; display: flex; }
.focus-card-img-wrap .focus-card-img { flex: 1; min-height: 0; width: 100%; height: 100%; }

/* ================================================================
   v4.0 — TYPE SYSTEM
   ----------------------------------------------------------------
   Display: Fraunces (variable serif, warm, real weight range)
   UI/body: Inter (variable, built for small sizes — where the nav lives)
   Scripts: Noto Sans Devanagari + Noto Sans JP, declared explicitly
            so Hindi and Japanese stop falling back to whatever the
            operating system happens to supply. This is the fix for
            the trilingual inconsistency across the site.
   ================================================================ */

:root {
  --font-display: 'Fraunces', 'Playfair Display', Georgia, 'Noto Serif JP', serif;
  --font-ui: 'Inter', 'Noto Sans Devanagari', 'Noto Sans JP',
             system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — replaces the ad-hoc 34/27/21/14.5/12.5/10.5 sizes */
  --fs-display: clamp(40px, 5.2vw, 60px);
  --fs-h1:      clamp(30px, 3.4vw, 40px);
  --fs-h2:      28px;
  --fs-h3:      20px;
  --fs-lede:    17px;
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-label:   11.5px;

  /* Vertical rhythm — one scale, used everywhere */
  --space-section: 88px;
  --space-block:   32px;
}

body { font-family: var(--font-ui); letter-spacing: -0.006em; }

h1, h2, h3,
.hero-title, .home-cats-title, .nav-brand-name,
.ptw-page-content h1, .ptw-page-content h2,
.info-box h3, .ptw-404 h1, .ptw-404-eyebrow {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 24, 'WONK' 1;
  letter-spacing: -0.012em;
}

.hero-title { font-size: var(--fs-display); line-height: 1.03; font-weight: 600; }
.home-cats-title { font-size: var(--fs-h2); font-weight: 600; }
.ptw-page-content h1 { font-size: var(--fs-h1); line-height: 1.14; font-weight: 600; margin-bottom: 12px; }
.ptw-page-content h2 { font-size: 24px; line-height: 1.22; font-weight: 600; margin: 44px 0 14px; }
.ptw-page-content h3 { font-size: var(--fs-h3); font-weight: 600; margin: 28px 0 10px; color: var(--teal-dark); }
.ptw-page-content .page-lede { font-size: var(--fs-lede); line-height: 1.62; margin-bottom: 36px; }
.ptw-page-content p,
.ptw-page-content li { font-size: var(--fs-body); line-height: 1.68; }
.nav-brand-name { font-size: 19px; font-weight: 600; }

/* Nav links — the single biggest "amateur" tell on the old site was
   these being 500-weight muted grey. Heavier, darker, tighter. */
.nav-info-link {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.nav-info-link:hover { background: var(--teal-50); color: var(--teal-dark); }
.nav-info-link.is-current { color: var(--teal); background: var(--teal-50); }

/* Latin numerals in tables should line up in columns. */
.ptw-table, .price-amount, .price-was { font-variant-numeric: tabular-nums; }

/* Devanagari and Japanese sit slightly small next to Inter at the
   same px value; nudge them so mixed-script lines share a baseline
   weight rather than one script looking shrunken. */
:lang(hi), .script-hi { font-family: 'Noto Sans Devanagari', var(--font-ui); font-size: 1.04em; }
:lang(ja), .script-ja { font-family: 'Noto Sans JP', var(--font-ui); }


/* ================================================================
   v4.0 — PRICING PAGE
   ================================================================ */

/* Wider container than the prose pages: tables need the room. */
.pricing-page { max-width: 1000px; }

.price-hero { text-align: center; padding-bottom: 8px; }
.price-hero h1 { margin-bottom: 14px; }
.price-hero .page-lede { max-width: 620px; margin-left: auto; margin-right: auto; }

.price-badge-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 28px;
}
.price-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-dark); background: var(--teal-50);
  border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 20px;
}
.price-badge svg { width: 13px; height: 13px; }

/* ── Currency notice ─────────────────────────────────────────────
   The signature moment of this page: a product about crossing
   languages should meet you in your own currency without being
   asked. Quiet, but it says the whole thesis. */
.currency-note {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-dim);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 30px; padding: 9px 18px;
  width: fit-content; margin: 0 auto var(--space-block);
}
.currency-note select {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  color: var(--teal-dark); background: var(--teal-50);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 10px; cursor: pointer;
}
.currency-note select:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 2px; }

/* ── Two tier cards ──────────────────────────────────────────────*/
.tier-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px;
  margin-bottom: var(--space-section);
  align-items: start;
}
.tier {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.tier-featured {
  border-color: var(--teal); border-width: 2px;
  box-shadow: var(--shadow);
  position: relative;
}
.tier-flag {
  position: absolute; top: -12px; left: 28px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; background: var(--teal-dark);
  padding: 5px 13px; border-radius: 20px;
}
.tier-name {
  font-family: var(--font-display); font-size: 23px; font-weight: 600;
  color: var(--teal-dark); font-variation-settings: 'SOFT' 24, 'WONK' 1;
}
.tier-tagline { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: -8px; }

.tier-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-amount {
  font-family: var(--font-display); font-size: 42px; font-weight: 700;
  color: var(--teal-dark); line-height: 1;
  font-variation-settings: 'SOFT' 24, 'WONK' 0;
}
.price-was {
  font-size: 17px; color: var(--ink-muted); text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.price-unit { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 600; }
.price-sub { font-size: 12.5px; color: var(--ink-muted); }

.tier-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 9px; }
.tier-list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 9px;
  align-items: start; font-size: 14px; color: var(--ink-dim); line-height: 1.5;
}
.tier-list li::before {
  content: ''; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%;
  background: var(--teal-50); border: 1.5px solid var(--teal-lt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230C3846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
}
.tier-list li.is-limited::before {
  background-image: none; background: #fdf6e3; border-color: var(--gold);
}
.tier-cta { margin-top: auto; padding-top: 8px; }
.tier-cta .btn-primary, .tier-cta .btn-secondary {
  width: 100%; display: block; text-align: center; text-decoration: none;
  font-family: var(--font-ui);
}

/* ── Pair selector inside the featured tier ──────────────────────*/
.pair-picker { display: grid; gap: 8px; margin-top: 4px; }
.pair-option {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: center;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; cursor: pointer; background: var(--bg);
  transition: border-color .15s, background .15s;
}
.pair-option:hover { border-color: var(--teal-lt); }
.pair-option.selected { border-color: var(--teal); background: var(--teal-50); }
.pair-option input { accent-color: var(--teal-dark); width: 16px; height: 16px; cursor: pointer; }
.pair-option-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pair-option-scripts { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.pair-option-price { font-size: 13.5px; font-weight: 700; color: var(--teal-dark); }
.pair-option.is-bundle { border-style: dashed; }

/* ── Comparison table ────────────────────────────────────────────*/
.ptw-table-wrap { overflow-x: auto; margin: 20px 0 var(--space-section); }
.ptw-table {
  width: 100%; border-collapse: collapse; min-width: 560px;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  border: 1.5px solid var(--border);
}
.ptw-table thead th {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim);
  padding: 15px 16px; text-align: center; background: var(--teal-50);
  border-bottom: 1.5px solid var(--border);
}
.ptw-table thead th:first-child { text-align: left; }
.ptw-table th[scope="row"] {
  font-size: 14px; font-weight: 500; color: var(--ink-dim);
  padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border);
}
.ptw-table td {
  font-size: 13.5px; color: var(--ink); text-align: center;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.ptw-table tbody tr:last-child th,
.ptw-table tbody tr:last-child td { border-bottom: none; }
.ptw-table tbody tr:hover th[scope="row"],
.ptw-table tbody tr:hover td { background: rgba(228,244,248,.4); }
.ptw-table .col-premium { background: rgba(228,244,248,.35); font-weight: 600; }
.ptw-table caption {
  caption-side: bottom; font-size: 12.5px; color: var(--ink-muted);
  padding-top: 12px; text-align: left;
}
.tick { color: #1a7a4c; font-weight: 700; }
.dash { color: var(--ink-muted); }
.qty { font-weight: 600; }
.qty-limited { color: #8a6d1f; }

/* Section headings that introduce a table or grid */
.price-section-head { text-align: center; max-width: 620px; margin: 0 auto 8px; }
.price-section-head h2 { margin-top: 0; }
.price-section-head p { color: var(--ink-muted); font-size: 14.5px; }

/* ── Regional price table ────────────────────────────────────────*/
.region-table td:last-child { font-weight: 700; color: var(--teal-dark); }
.region-table tbody tr.is-you th[scope="row"],
.region-table tbody tr.is-you td { background: var(--teal-50); }
.region-you-flag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal); margin-left: 8px;
}

/* ── FAQ accordion ───────────────────────────────────────────────*/
.faq-list { display: grid; gap: 10px; margin-bottom: var(--space-block); }
.faq-item {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 15px 18px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: -2px; }
.faq-item[open] summary { background: var(--teal-50); }
.faq-answer { padding: 4px 18px 17px; }
.faq-answer p { font-size: 14px; color: var(--ink-dim); line-height: 1.68; }
.faq-answer p + p { margin-top: 10px; }

/* ── Honesty strip: what does not work yet ───────────────────────*/
.honesty-box {
  border: 1.5px dashed var(--gold); background: #fdfaf0;
  border-radius: var(--radius); padding: 22px 24px; margin: 0 0 var(--space-section);
}
.honesty-box h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: #6b5518; margin-bottom: 8px;
}
.honesty-box p, .honesty-box li { font-size: 14px; color: #5c5230; line-height: 1.65; }
.honesty-box ul { padding-left: 20px; margin-top: 8px; }
.honesty-box li { margin-bottom: 5px; }

/* ── Closing note ────────────────────────────────────────────────*/
.price-closing {
  text-align: center; max-width: 560px; margin: 0 auto;
  padding-top: var(--space-block); border-top: 1px solid var(--border);
}
.price-closing p { font-size: 14px; color: var(--ink-muted); line-height: 1.7; }

@media (max-width: 860px) {
  .tier-grid { grid-template-columns: 1fr; }
  :root { --space-section: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ================================================================
   v4.1 — STRUCTURE
   Nav restructure + avatar menu, hero CTA, stat bar, category
   tiles, loading skeletons, four-column footer, status table.
   ================================================================ */

/* ── NAV ─────────────────────────────────────────────────────────
   Was nine items in one row. Now: brand, four content links, then
   a right-hand cluster of search + auth. Everything account-related
   collapses into one avatar menu once you're logged in. */

.home-nav {
  gap: 4px;
  height: 62px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-info-link { margin-left: 0; padding: 8px 12px; }

/* Search trigger, with a keyboard hint the way every mature app does it */
.nav-search-btn {
  gap: 8px; padding: 7px 12px 7px 13px; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 500; color: var(--ink-muted);
  background: var(--surface);
}
.nav-search-btn:hover { border-color: var(--teal-lt); color: var(--ink-dim); }
.nav-kbd {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 5px; margin-left: 4px;
}
@media (max-width: 900px) { .nav-kbd { display: none; } }

/* Auth cluster — a quiet text link beside one filled button. */
.nav-login {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--ink); padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none;
}
.nav-login:hover { color: var(--teal); }
.nav-cta {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: #fff; background: var(--teal-dark);
  padding: 9px 16px; border-radius: 10px;
  transition: background .15s, transform .12s;
}
.nav-cta:hover { background: var(--teal); transform: translateY(-1px); }
.nav-cta:focus-visible, .nav-login:focus-visible, .nav-search-btn:focus-visible,
.nav-info-link:focus-visible, .avatar-btn:focus-visible {
  outline: 2px solid var(--teal-lt); outline-offset: 2px;
}

/* ── Avatar menu ─────────────────────────────────────────────────*/
.avatar-wrap { position: relative; }
.avatar-btn {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1.5px solid var(--border); cursor: pointer;
  border-radius: 30px; padding: 4px 10px 4px 4px;
  transition: border-color .15s;
}
.avatar-btn:hover { border-color: var(--teal-lt); }
.avatar-circle {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
}
.avatar-chevron {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.avatar-btn[aria-expanded="true"] .avatar-chevron { transform: rotate(-135deg) translate(-2px, -2px); }

.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 150;
  min-width: 216px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  display: none;
}
.avatar-menu.open { display: block; }
.avatar-menu-head {
  padding: 9px 11px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
}
.avatar-menu-email {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar-menu-sub { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.avatar-menu button, .avatar-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  text-decoration: none;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 9px 11px; border-radius: 8px;
}
.avatar-menu button:hover, .avatar-menu a:hover { background: var(--teal-50); color: var(--teal-dark); }
.avatar-menu svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-muted); }
.avatar-menu button:hover svg, .avatar-menu a:hover svg { color: var(--teal); }
.avatar-menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
.avatar-menu .is-signout { color: #a33; }
.avatar-menu .is-signout svg { color: #a33; }
.avatar-menu .is-signout:hover { background: #fdf0ef; color: #8a2e20; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .home-nav { height: 58px; padding: 0 14px; }
}

/* ── HERO ────────────────────────────────────────────────────────
   The old hero opened with two dropdowns and no call to action.
   Those preferences now live in the app topbar, where they're
   actually used; the hero opens with a way in. */

.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-cta-row .btn-primary, .hero-cta-row .btn-secondary {
  font-family: var(--font-ui); text-decoration: none; display: inline-block;
}
.hero-mvp-line {
  font-size: 13px; color: var(--ink-muted); margin-top: 16px; line-height: 1.6;
}
.hero-mvp-line a { color: var(--teal); font-weight: 600; }

/* The decorative cards no longer compete with a large stat box. */
.hero-right { min-height: 420px; }

/* ── STAT BAR ────────────────────────────────────────────────────
   Content scale, not user counts. Every number here is verifiable
   today, which is the point — it earns trust instead of claiming it. */
.stat-bar {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.55);
}
.stat-bar-inner {
  max-width: 1080px; margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.stat-cell { text-align: center; }
.stat-cell-num {
  font-family: var(--font-display); font-size: 27px; font-weight: 700;
  color: var(--teal-dark); line-height: 1.1; display: block;
  font-variation-settings: 'SOFT' 24, 'WONK' 0;
  font-variant-numeric: tabular-nums;
}
.stat-cell-label {
  font-size: 11.5px; font-weight: 600; color: var(--ink-muted);
  letter-spacing: .04em; margin-top: 5px; display: block; line-height: 1.35;
}
@media (max-width: 860px) {
  .stat-bar-inner { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; }
}

/* ── CATEGORY TILES ──────────────────────────────────────────────*/
.home-cats { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.home-cats-title { margin-bottom: 6px; }
.home-cats-sub {
  text-align: center; font-size: 14.5px; color: var(--ink-muted);
  margin: 0 auto 30px; max-width: 460px;
}
.cat-tile {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 20px 16px 18px; cursor: pointer; text-align: center;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cat-tile:hover, .cat-tile:focus-visible {
  border-color: var(--tile-color, var(--teal-lt));
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  outline: none;
}
.cat-tile::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tile-color, var(--teal-lt));
  opacity: 0; transition: opacity .18s;
}
.cat-tile:hover::after, .cat-tile:focus-visible::after { opacity: 1; }
.cat-tile-icon {
  width: 34px; height: 34px; margin: 0 auto 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--teal-50);
  color: var(--tile-color, var(--teal));
}
.cat-tile-icon svg { width: 19px; height: 19px; }
.cat-tile-name { line-height: 1.32; }
.cat-tile-count { margin-top: 5px; color: var(--ink-muted); }

/* ── LOADING SKELETONS ───────────────────────────────────────────
   A blank flash reads as broken; a skeleton reads as loading. */
@keyframes ptw-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.skeleton {
  background: linear-gradient(90deg, #e8f2f5 25%, #f4fafb 50%, #e8f2f5 75%);
  background-size: 420px 100%;
  animation: ptw-shimmer 1.25s linear infinite;
  border-radius: var(--radius-sm);
}
.skel-tile { height: 118px; border-radius: var(--radius); border: 1.5px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ── STUDY PREFERENCES, relocated into the app topbar ────────────*/
.topbar-prefs { display: flex; align-items: center; gap: 8px; margin-left: 14px; }
.topbar-prefs select {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: var(--ink-dim); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 8px; cursor: pointer;
}
.topbar-prefs select:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 1px; }
.topbar-prefs-label { font-size: 11px; font-weight: 600; color: var(--ink-muted); }
@media (max-width: 760px) { .topbar-prefs-label { display: none; } }

/* ── FOUR-COLUMN FOOTER ──────────────────────────────────────────*/
.ptw-footer { border-top: 1px solid var(--border); background: #EAF4F5; margin-top: auto; }
.ptw-footer-grid {
  max-width: 1080px; margin: 0 auto; padding: 46px 24px 30px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
}
.ptw-footer-brand { display: flex; flex-direction: column; gap: 11px; }
.ptw-footer-brand img { width: 42px; height: 42px; border-radius: 50%; }
.ptw-footer-tagline { font-size: 13px; color: #4A5B60; line-height: 1.65; max-width: 260px; }
.ptw-footer-col h4 {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #40565c; margin-bottom: 12px;
}
.ptw-footer-col ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.ptw-footer-col a { font-size: 13px; color: #4A5B60; text-decoration: none; }
.ptw-footer-col a:hover { color: var(--teal); text-decoration: underline; }
.ptw-footer-base {
  max-width: 1080px; margin: 0 auto; padding: 18px 24px 30px;
  border-top: 1px solid #d6e6e8;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
}
.ptw-footer-base p { font-size: 11.5px; color: #5c6f74; line-height: 1.7; }
.ptw-footer-base a { color: var(--teal); }
@media (max-width: 800px) {
  .ptw-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ── STATUS TABLE (What's included page) ─────────────────────────*/
.status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 26px 0 var(--space-block);
}
.status-col {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 20px 18px;
}
.status-col-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-live   .status-dot { background: #1a7a4c; }
.status-progress .status-dot { background: var(--gold); }
.status-planned  .status-dot { background: var(--ink-muted); }
.status-live   .status-col-head { color: #1a7a4c; }
.status-progress .status-col-head { color: #8a6d1f; }
.status-planned  .status-col-head { color: var(--ink-muted); }
.status-col ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.status-col li { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.status-planned li { color: var(--ink-muted); }
@media (max-width: 780px) { .status-grid { grid-template-columns: 1fr; } }

/* ================================================================
   v4.2 — the missing utility class reviews.js has always relied on.
   Without it, #review-form-box rendered as a permanently visible
   empty bordered box beneath "Leave a review" on the homepage.
   ================================================================ */
.hidden { display: none !important; }

/* ================================================================
   v4.3 — usage bar, What's new strip, card actions, toast, and the
   mobile fixes the app view needed.
   ================================================================ */

/* ── Usage figures (hidden until they clear their thresholds) ─────*/
.usage-bar { border-bottom: 1px solid var(--border); background: var(--teal-50); }
.usage-bar-inner {
  max-width: 720px; margin: 0 auto; padding: 20px 24px;
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
}
.usage-cell { text-align: center; }
.usage-num {
  display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: var(--teal-dark); font-variant-numeric: tabular-nums;
}
.usage-label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--ink-muted); letter-spacing: .04em; margin-top: 3px;
}

/* ── What's new ──────────────────────────────────────────────────*/
.whatsnew { padding: 0 24px var(--space-section); }
.whatsnew-inner {
  max-width: 680px; margin: 0 auto;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 26px 28px;
}
.whatsnew-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--teal-dark); margin-bottom: 16px;
  font-variation-settings: 'SOFT' 24, 'WONK' 1;
}
.whatsnew-list { list-style: none; padding: 0; display: grid; gap: 13px; }
.whatsnew-list li {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline;
  padding-bottom: 13px; border-bottom: 1px dashed var(--border);
}
.whatsnew-list li:last-child { border-bottom: none; padding-bottom: 0; }
.whatsnew-date {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted);
}
.whatsnew-text { font-size: 14px; color: var(--ink-dim); line-height: 1.6; }
.whatsnew-text a { color: var(--teal); font-weight: 600; }
@media (max-width: 560px) {
  .whatsnew-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Card action row ─────────────────────────────────────────────
   Quiet by default; "Report an issue" quieter still, so it's there
   when something is wrong without competing with the study actions. */
.card-actions {
  margin-top: 8px; padding: 0 14px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.card-action {
  cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: var(--teal-dark); text-decoration: underline;
  text-underline-offset: 2px;
}
.card-action:hover { color: var(--teal); }
.card-action-quiet { margin-left: auto; color: var(--ink-muted); font-size: 11.5px; }
.card-action-quiet:hover { color: #a33; }

/* ── Toast ───────────────────────────────────────────────────────*/
.ptw-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  z-index: 400; pointer-events: none;
  background: var(--teal-dark); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 22px; box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.ptw-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Mobile: the app view ────────────────────────────────────────
   The card grid used fixed 300x580 tiles, which overflowed on a phone.
   Below 640px the deck becomes a fluid two-column grid and the cards
   size to their content instead of a desktop constant. */
@media (max-width: 640px) {
  .deck {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; padding: 12px;
  }
  .deck .card-wrap { width: 100%; height: auto; }
  .deck .front-img-wrap { aspect-ratio: 1 / 1; height: auto; }
  .deck .front-img-wrap img { width: 100%; height: 100%; object-fit: contain; }

  .app-topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; row-gap: 8px; }
  .topbar-prefs { margin-left: 0; width: 100%; }
  .topbar-prefs select { flex: 1; min-width: 0; }
  .topbar-actions { margin-left: auto; }

  #focus-card-wrap { width: 94vw; max-width: 94vw; }
  #focus-card-wrap.zoomed { width: 96vw; height: 88vh; }
  .card-actions { gap: 10px; }
  .card-action-quiet { margin-left: 0; }

  .hero-cta-row .btn-primary, .hero-cta-row .btn-secondary { flex: 1; text-align: center; }
}

@media (max-width: 400px) {
  .deck { grid-template-columns: 1fr; }
}

/* Touch targets: anything tappable gets a comfortable minimum. */
@media (pointer: coarse) {
  .nav-info-link, .card-action, .avatar-menu button, .avatar-menu a { min-height: 40px; }
  .card-action { display: inline-flex; align-items: center; }
}


/* ── Related words and inflected forms on the card ───────────────*/
.card-extra {
  margin: 10px 14px 0; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.card-extra-head {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px;
  cursor: default;
}
.card-extra-fold summary { cursor: pointer; list-style: none; }
.card-extra-fold summary::-webkit-details-marker { display: none; }
.card-extra-fold summary::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.card-extra-fold[open] summary::after { transform: rotate(-135deg) translateY(-1px); }

.rel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: var(--teal-50); border: 1px solid var(--border);
  transition: border-color .15s, transform .12s;
}
.rel-chip:hover { border-color: var(--teal-lt); transform: translateY(-1px); }
.rel-chip-ja { font-size: 14px; font-weight: 600; color: var(--teal-dark); line-height: 1.2; }
.rel-chip-en { font-size: 10.5px; color: var(--ink-muted); margin-top: 1px; }

.infl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin-top: 4px; }
.infl-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.infl-label { color: var(--ink-muted); }
.infl-form { font-weight: 600; color: var(--ink); }
.infl-class {
  font-size: 10px; font-weight: 600; color: var(--teal);
  background: var(--teal-50); border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
@media (max-width: 520px) { .infl-grid { grid-template-columns: 1fr; } }