/* Shared styling for /languages.html and every page under /languages/.
   The tokens are copied from index.html rather than imported: this site has no
   build step, and one stylesheet fetched once by fifteen pages beats fifteen
   inline copies that drift apart. Keep the token block in sync with index.html
   and app.html by hand, the same way those two already are (see DESIGN.md). */
:root {
  --bg:#F5F0E6; --ink:#241C15; --muted:#756C5E; --soft:#8B8172;
  --accent:#9E5430; --accent-deep:#7C3F22; --accent-tint:#F1E1CB;
  --line:#E2D8C4; --card:#FBF6EB;
  --warn:#B8863A; --warn-ink:#6B4E1A; --warn-soft:#F3E6C9;
  --sage:#4F6B4A; --sage-ink:#3A5236; --sage-soft:#E7EEE1;
  --display:'Fraunces', Georgia, serif;
  --sans:'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
  --maxw:1120px;
  --fs-2xs:11px; --fs-xs:12.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
}

/* Each language page shifts the accent a little, so Japanese does not look like
   Portuguese, while staying inside the warm family the rest of the site uses.
   Every value here is a deep, low-chroma tone on purpose: a page per language is
   an invitation to make fourteen loud pages, and that would look like a theme
   demo instead of one product. */
.l-en { --accent:#7C5A3A; --accent-deep:#5F4429; --accent-tint:#EFE2CE; }
.l-es { --accent:#A8452A; --accent-deep:#82331E; --accent-tint:#F4DCCF; }
.l-fr { --accent:#4E5C86; --accent-deep:#3B4768; --accent-tint:#DFE2EF; }
.l-de { --accent:#6B6152; --accent-deep:#4F473B; --accent-tint:#E9E3D6; }
.l-it { --accent:#5C6E3F; --accent-deep:#45532E; --accent-tint:#E5EBD8; }
.l-pt { --accent:#2F6F63; --accent-deep:#20544A; --accent-tint:#D8EAE5; }
.l-ja { --accent:#9A4551; --accent-deep:#77333D; --accent-tint:#F2DBDE; }
.l-zh { --accent:#A44B2C; --accent-deep:#7D3820; --accent-tint:#F4DDD1; }
.l-ko { --accent:#3F6076; --accent-deep:#2E4759; --accent-tint:#DCE6EE; }
.l-nl { --accent:#996B2E; --accent-deep:#755021; --accent-tint:#F1E3CB; }
.l-hi { --accent:#A85A22; --accent-deep:#814318; --accent-tint:#F5E1CC; }
.l-ru { --accent:#7A4A5E; --accent-deep:#5C3646; --accent-tint:#EEDFE5; }
.l-tr { --accent:#356B6B; --accent-deep:#255050; --accent-tint:#D8EAE9; }
.l-pl { --accent:#8C4A46; --accent-deep:#6A3734; --accent-tint:#F2DCDA; }

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 40vw at 82% -6%, rgba(158,84,48,.09), transparent 60%),
    radial-gradient(46vw 40vw at -8% 8%, rgba(79,107,74,.07), transparent 60%); }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
/* Nav and footer get the full 1120px; the reading column does not. A language
   page is an essay with a few objects in it, and an essay set to 1120px leaves
   the right half of a laptop screen empty while the text runs too wide to
   track comfortably. */
.doc { max-width:53rem; margin:0 auto; }
.serif { font-family:var(--display); }

/* Nav and footer are lifted from index.html so a language page feels like the
   same site, not a microsite someone bolted on. */
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px; }
.logo { font-family:var(--display); font-size:var(--fs-xl); font-weight:600; letter-spacing:-.01em; display:inline-flex; align-items:center; }
.logo-mark { height:30px; width:auto; margin-right:10px; }
.nav-right { display:flex; align-items:center; gap:18px; }
.nav-link { color:var(--muted); font-size:var(--fs-base); font-weight:500; }
.nav-link:hover { color:var(--ink); }
.nav-link.here { color:var(--ink); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:var(--fs-md);
  padding:14px 26px; border-radius:12px; border:none; cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(40,32,24,.35); transition:transform .15s ease, background .15s ease, box-shadow .2s ease; }
.btn:hover { background:var(--accent-deep); transform:translateY(-1px); }
.btn.sm { padding:10px 20px; font-size:var(--fs-base); }
/* "Speak Portuguese" plus a logo does not fit on a 320px phone, so the nav
   button carries a short label at that size. Both labels live in the markup;
   which one shows is a media query, not JavaScript. */
.cta-narrow { display:none; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { background:#fff; border-color:var(--soft); transform:translateY(-1px); }

footer { padding:44px 0 56px; color:var(--soft); font-size:var(--fs-base); margin-top:24px; }
.foot-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-bottom:22px; border-bottom:1px solid var(--line); }
.foot-links { display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a { color:var(--muted); font-weight:500; }
.foot-links a:hover { color:var(--accent); }
.disclaimer { margin-top:20px; font-weight:600; color:var(--muted); }

/* Page head */
.crumb { font-size:var(--fs-xs); color:var(--soft); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.crumb a:hover { color:var(--accent); }
.head { padding:clamp(28px,5vw,56px) 0 clamp(24px,3vw,36px); max-width:44rem; }
h1 { font-family:var(--display); font-weight:500; font-size:clamp(40px,6.6vw,74px); line-height:1;
  letter-spacing:-.03em; margin:14px 0 6px; }
h1 .native { display:block; }
h1 .en { display:block; font-size:.42em; color:var(--muted); letter-spacing:-.01em; margin-top:14px; }
.opener { font-size:clamp(17px,1.6vw,20px); color:var(--muted); margin-top:22px; max-width:46ch; }
.head .cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:28px; }
.cta-note { margin-top:14px; font-size:var(--fs-base); color:var(--soft); }
.beta-tag { display:inline-block; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-deep); background:var(--accent-tint); border-radius:999px; padding:4px 10px; vertical-align:middle; }

/* Facts strip */
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:8px 0 clamp(40px,6vw,64px); }
.facts div { background:var(--bg); padding:18px 20px; }
.facts dt { font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:700; }
.facts dd { font-size:var(--fs-md); margin-top:4px; }

section { padding:clamp(30px,4.5vw,52px) 0; border-top:1px solid var(--line); }
section:first-of-type { border-top:none; }
h2 { font-family:var(--display); font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.1; letter-spacing:-.02em; }
h2 + p, .lead2 { color:var(--muted); font-size:clamp(16px,1.4vw,18px); margin-top:14px; max-width:56ch; }
h3 { font-family:var(--display); font-weight:500; font-size:var(--fs-lg); letter-spacing:-.01em; }
p + p { margin-top:14px; }
.prose { max-width:60ch; color:var(--muted); font-size:var(--fs-md); }
.prose strong { color:var(--ink); font-weight:600; }
.prose a, .inline-link { color:var(--accent); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover, .inline-link:hover { color:var(--accent-deep); }

/* Numbered "what trips people up" list */
.points { list-style:none; margin-top:34px; display:grid; gap:22px; max-width:64ch; }
.points li { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.points .n { font-family:var(--display); font-size:var(--fs-xl); color:var(--accent); line-height:1.2; }
.points h3 { margin-bottom:6px; }
.points p { color:var(--muted); font-size:var(--fs-base); }

/* Sample conversation, same shape as the real correction card in the app */
.chat { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; margin-top:30px; max-width:40rem; }
.turn { font-size:var(--fs-md); }
.turn + .turn { margin-top:16px; }
.who { font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:700; display:block; margin-bottom:4px; }
.gloss { color:var(--soft); font-size:var(--fs-base); font-style:italic; }
.fix { background:var(--warn-soft); border:1px solid #E8D6AE; border-radius:14px; padding:14px 16px; margin-top:14px; }
.fix .lbl { font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--warn-ink); font-weight:700; }
.fix .was { text-decoration:line-through; color:var(--warn-ink); opacity:.75; }
.fix .now { font-weight:600; }
.fix .why { color:var(--warn-ink); font-size:var(--fs-base); margin-top:6px; }

/* Phrase table */
.phrases { width:100%; border-collapse:collapse; margin-top:28px; font-size:var(--fs-md); }
.phrases th { text-align:left; font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--soft);
  font-weight:700; padding:0 14px 10px 0; border-bottom:1px solid var(--line); }
.phrases td { padding:14px 14px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.phrases td:first-child { font-weight:600; white-space:nowrap; }
.phrases .say { display:block; color:var(--soft); font-size:var(--fs-base); font-weight:400; white-space:normal; }
.phrases td:last-child { color:var(--muted); font-size:var(--fs-base); padding-right:0; }
.scroll-x { overflow-x:auto; }

/* Small cards: how Dosti handles this language */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 22px;
  transition:transform .25s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(40,32,24,.28); border-color:#dcd2bf; }
.card h3 { margin-bottom:8px; }
.card p { color:var(--muted); font-size:var(--fs-base); }

/* Pull quote, used once per page for the thing worth remembering */
.pull { font-family:var(--display); font-size:clamp(21px,2.6vw,30px); line-height:1.28; letter-spacing:-.01em;
  border-left:3px solid var(--accent); padding-left:22px; margin-top:34px; max-width:34ch; }

/* Neighbours */
.neighbours { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip { display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px; font-size:var(--fs-base); font-weight:500; transition:border-color .15s ease, transform .15s ease; }
.chip:hover { border-color:var(--accent); transform:translateY(-1px); }
.chip .flag { font-size:var(--fs-md); }

/* FAQ */
.faq { max-width:60rem; margin-top:26px; }
.faq details { border-top:1px solid var(--line); padding:18px 2px; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-weight:600; font-size:var(--fs-md); list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-size:var(--fs-xl); line-height:1; transition:transform .2s ease; }
/* Same idiom as index.html: rotate the plus rather than swapping the glyph. */
.faq details[open] summary::after { transform:rotate(45deg); }
.faq p { color:var(--muted); font-size:var(--fs-base); margin-top:12px; max-width:60ch; }

/* Closing call to action */
.close-panel { background:var(--card); border:1px solid var(--line); border-radius:26px;
  padding:clamp(32px,5vw,56px); text-align:center; margin:clamp(30px,4vw,44px) 0 0; }
.close-panel h2 { max-width:22ch; margin:0 auto; }
.close-panel p { margin:16px auto 26px; color:var(--muted); max-width:46ch; }

/* Hub grid */
.hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.hub-card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px;
  display:flex; flex-direction:column; gap:8px; transition:transform .25s ease, box-shadow .2s ease, border-color .2s ease; }
.hub-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(40,32,24,.28); border-color:#dcd2bf; }
.hub-card .top { display:flex; align-items:baseline; gap:10px; }
.hub-card .flag { font-size:var(--fs-xl); }
.hub-card .native { font-family:var(--display); font-size:var(--fs-xl); letter-spacing:-.01em; }
.hub-card .en { color:var(--soft); font-size:var(--fs-base); }
.hub-card p { color:var(--muted); font-size:var(--fs-base); }
.hub-card .go { margin-top:auto; padding-top:10px; color:var(--accent); font-weight:600; font-size:var(--fs-base); }
.hub-sub { font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:700; margin-top:44px; }

@media (max-width:900px) {
  .grid-3, .hub-grid { grid-template-columns:repeat(2,1fr); }
  .facts { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  /* Phone nav: How it works and Pricing go, Languages stays, since it is the
     tab this whole section exists for. */
  .nav-link.hideable { display:none; }
  nav { gap:10px; }
  .logo { font-size:var(--fs-lg); }
  .logo-mark { height:24px; margin-right:8px; }
  .btn.sm { padding:9px 14px; }
  .grid-3, .hub-grid { grid-template-columns:1fr; }
  .facts { grid-template-columns:1fr; }
  .points li { grid-template-columns:1fr; gap:6px; }
  .points .n { font-size:var(--fs-lg); }
  .pull { padding-left:16px; }
  /* Two columns inside 340px turns every pronunciation hint into a four-line
     ladder. Stack instead: the phrase, then what it is for, as one block per
     row. Checked against the longest ones (Tekrar eder misiniz, mou ichido
     onegai shimasu). */
  .phrases, .phrases tbody, .phrases tr, .phrases td { display:block; width:100%; }
  .phrases tr:first-child { display:none; }
  .phrases tr { border-bottom:1px solid var(--line); padding:16px 0; }
  .phrases td { border:none; padding:0; white-space:normal; }
  .phrases td:first-child { font-size:var(--fs-lg); }
  .phrases .say { margin-top:2px; }
  .phrases td:last-child { margin-top:8px; }
}

/* Under 420px a full "Speak Portuguese" no longer fits beside the logo and the
   Languages link, so the button carries a short label. Both live in the markup;
   which one shows is a media query, not JavaScript. */
@media (max-width:420px) {
  .cta-wide { display:none; }
  .cta-narrow { display:inline; }
}
/* Below 360px even the short version overflows, so the Languages link drops to
   the footer, which every page has. Measured at 320px, not guessed. */
@media (max-width:359px) {
  .nav-link { display:none; }
}