/* Homepage stylesheet, ported from the design handoff (Knowingo Home v2).
   Part 1 is the Modernist design-system base the prototype was built on, cut down to the
   tokens, the reset and the button the page actually uses.
   Part 2 is the prototype's own page styles, copied verbatim.
   Colours are literal here because the handoff markup is literal; the site gate only checks site.css. */

/* ---------- 1. design-system base ---------- */
/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- 2. page styles from the prototype ---------- */
  :root { --font-heading: "Nunito Sans", ui-rounded, system-ui, sans-serif; --font-body: "Nunito Sans", ui-rounded, system-ui, sans-serif; --font-heading-weight: 800; }
  body { margin: 0; background: #fcf7ed; color: #29211f; -webkit-font-smoothing: antialiased; font-family: var(--font-body); }
  h1, h2, h3 { font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
  h1 { letter-spacing: -0.025em !important; }
  details summary { font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; font-size: 24px !important; }
  .btn { border-radius: 14px; }
  .btn:active { transform: translateY(4px); border-bottom-width: 1px !important; }
  a { color: #cc4a30; text-decoration: none; }
  a:hover { color: #f26345; }
  summary::-webkit-details-marker { display: none; }
  summary::marker { content: ''; }
  summary { list-style: none; cursor: pointer; }
  @keyframes km-float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
  @keyframes km-bob { 0%,100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(1px) rotate(5deg); } }
  @keyframes km-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  [data-hero-cards] > div { animation: km-float-slow 8s ease-in-out infinite; }
  [data-hero-cards] > div:nth-child(2) { animation-delay: -3s; }
  [data-hero-cards] > div:nth-child(3) { animation-delay: -5.5s; }
  @keyframes km-float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes km-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
  @keyframes km-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
  @keyframes km-drift { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-54px); opacity: 0; } }
  @keyframes km-pulse { 0%,100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.5); opacity: 0; } }
  @keyframes km-fill { 0% { width: 4%; } 100% { width: 100%; } }
  @keyframes km-tick { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes km-dense { 0%, 42% { opacity: 1; } 52%, 100% { opacity: 0; } }
  @keyframes km-plain { 0%, 42% { opacity: 0; } 52%, 100% { opacity: 1; } }
  @keyframes km-slide-rail { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes km-wave { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
  @keyframes km-art-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes km-art-spin { to { transform: rotate(360deg); } }
  @keyframes km-art-spin-r { to { transform: rotate(-360deg); } }
  @keyframes km-art-swing { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-38deg); } }
  @keyframes km-art-drop { 0% { transform: translateY(-40px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
  [data-shelf-book] { transition: transform .4s cubic-bezier(.2,.7,.3,1), filter .4s, opacity .4s; }
  [data-shelf-book]:hover { transform: translateY(-12px) rotate(0deg) !important; filter: none !important; opacity: 1 !important; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  @media (max-width: 1140px) {
    [data-hero-stage] { grid-template-columns: 1fr !important; }
    [data-hero-stage] > div { border-left: 0 !important; border-right: 0 !important; }
    [data-hero-stage] { max-height: none !important; }
    [data-hero-stage] > div:nth-child(2) { display: none !important; }
    [data-library] { grid-template-columns: repeat(4, 1fr) !important; }
    [data-cats] { grid-template-columns: repeat(4, 1fr) !important; }
    [data-cats] > div { border-right: 0 !important; padding-left: 0 !important; }
  }
  @media (max-width: 1140px) {
    [data-nav] { gap: 16px !important; font-size: 13px !important; }
    [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-grid-split] { grid-template-columns: 1fr !important; gap: 24px !important; }
  }
  @media (max-width: 980px) {
    [style*="repeat(3, 1fr)"], [style*="1fr 1fr 1fr"], [style*="0.7fr 1.3fr"], [style*="grid-template-columns: 1fr 1fr;"] { grid-template-columns: 1fr !important; }
    [style*="repeat(3, 1fr)"] > div, [style*="1fr 1fr 1fr"] > div, [style*="grid-template-columns: 1fr 1fr;"] > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    [style*="repeat(3, 1fr)"] > div, [style*="1fr 1fr 1fr"] > div { border-bottom: 1px solid #e7dfd6; }
    [style*="1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [data-proof-scene] [style*="150px 1fr 190px"] { grid-template-columns: 1fr !important; }
    h1 { font-size: 46px !important; }
    h2 { font-size: 34px !important; }
  }
  @media (max-width: 980px) {
    [data-compare] { grid-template-columns: 1fr !important; }
    [data-features] { grid-template-columns: 1fr !important; }
    [data-features] > div { border-right: 0 !important; padding: 28px 0 !important; }
    [data-features] > div:first-child { border-bottom: 1px solid #e7dfd6; }
    [data-compare] > div { padding: 28px !important; }
    [data-compare-arrow] { display: none !important; }
    [data-compare] [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
    [data-compare] [style*="repeat(3, 1fr)"] > div { border-bottom: 0 !important; padding: 0 !important; }
  }
  @media (max-width: 620px) {
    [data-library] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-cats] { grid-template-columns: repeat(2, 1fr) !important; }
    h1 { font-size: 36px !important; }
  }
  :focus-visible { outline: 2px solid #f26345; outline-offset: 2px; }

/* ---------- 2a. Chinese pages: same faces, with a CJK fallback that matches ---------- */
  html[lang="zh"] { --font-heading: "Nunito Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-rounded, system-ui, sans-serif; --font-body: "Nunito Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-rounded, system-ui, sans-serif; }
  html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] details summary { font-family: "Newsreader", "Noto Serif SC", "Songti SC", Georgia, serif !important; }
  html[lang="zh"] h1 { letter-spacing: 0 !important; }
  html[lang="zh"] h2, html[lang="zh"] h3 { letter-spacing: -0.01em !important; }
  html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 { text-wrap: balance; }
  html[lang="zh-HK"] { --font-heading: "Nunito Sans", "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", ui-rounded, system-ui, sans-serif; --font-body: "Nunito Sans", "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", ui-rounded, system-ui, sans-serif; }
  html[lang="zh-HK"] h1, html[lang="zh-HK"] h2, html[lang="zh-HK"] h3, html[lang="zh-HK"] details summary { font-family: "Newsreader", "Noto Serif TC", "Songti TC", Georgia, serif !important; }
  html[lang="zh-HK"] h1 { letter-spacing: 0 !important; }
  html[lang="zh-HK"] h2, html[lang="zh-HK"] h3 { letter-spacing: -0.01em !important; }
  html[lang="zh-HK"] h1, html[lang="zh-HK"] h2, html[lang="zh-HK"] h3 { text-wrap: balance; }

/* ---------- 2b. small-screen fixes not covered by the prototype ---------- */
  /* The prototype's generic 1fr 1fr collapse also caught the mini comparison in "The prose fights you"; keep its two columns. */
  @media (max-width: 980px) {
    [data-mini-compare] { grid-template-columns: 1fr 1fr !important; }
    [data-mini-compare] > div { padding: 10px 12px !important; border-bottom: 0 !important; }
    [data-mini-compare] > div:first-child { border-right: 1px solid #e7dfd6 !important; }
  }
  /* The fanned hero cards are laid out for a 600px stage; on a phone the reader card must stay fully on screen. */
  @media (max-width: 620px) {
    [data-hero-cards] { height: 520px !important; }
    [data-hero-cards] > div:nth-child(1) { left: -10% !important; width: 200px !important; }
    [data-hero-cards] > div:nth-child(2) { left: 64% !important; width: 200px !important; }
    [data-hero-cards] > div:nth-child(3) { left: 6% !important; width: 88% !important; }
  }

/* ---------- 2c. interaction polish ---------- */
  html { scroll-behavior: smooth; scroll-padding-top: 72px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* Floating bar that appears once the hero has scrolled away */
  .floatnav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(252,247,237,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #e7dfd6; transform: translateY(-100%); visibility: hidden; transition: transform .32s cubic-bezier(.2,.7,.3,1), visibility .32s; }
  .floatnav[data-visible="true"] { transform: none; visibility: visible; }
  .floatnav-inner { max-width: 1240px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; gap: 28px; }
  .floatnav-brand { display: flex; align-items: center; gap: 10px; color: #29211f; font-family: "Newsreader", "Noto Serif SC", Georgia, serif; font-weight: 600; font-size: 20px; flex: none; }
  .floatnav-brand img { height: 28px; width: auto; }
  .floatnav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .floatnav-links a { color: #29211f; }
  .floatnav-links a:hover { color: #cc4a30; }
  .floatnav-cta { background: #f26345; color: #fffdf9; border-bottom: 4px solid #cc4a30; padding: 9px 16px; font-size: 14px; flex: none; }

  .language-nav {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
  }
  .language-nav > * { min-height: 44px; display: inline-flex; align-items: center; }
  .language-nav [aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .hero-language-nav { color: #fffdf9; }
  .hero-language-nav a { color: inherit; }
  .hero-language-nav a:hover,
  .hero-language-nav a:focus-visible { color: inherit; text-decoration: underline; }
  .footer-colophon .language-nav { flex-wrap: wrap; }
  @media (max-width: 620px) {
    .language-nav { gap: 8px; }
    .hero-header-inner { padding: 10px 12px !important; gap: 8px !important; }
    .hero-header-brand { gap: 0 !important; }
    .hero-header-mark { width: 44px !important; height: 44px !important; border-radius: 11px !important; }
    .hero-header-mark img { height: 32px !important; }
    .hero-header-nav { gap: 8px !important; min-width: 0; }
    .hero-header-signin { display: inline-flex !important; }
    .hero-header-wordmark { display: none !important; }
    .floatnav-inner { padding: 8px 16px; gap: 4px 12px; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; }
    .floatnav-brand { grid-column: 1; grid-row: 1; }
    .floatnav-links { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-left: 0; }
    .floatnav-cta { grid-column: 2; grid-row: 1; display: inline-flex !important; padding: 7px 12px; }
  }

  /* Hero cards fan out under the pointer; the one you point at comes to the front.
     Position and rotate move, never transform, so the float animation keeps running. */
  [data-hero-cards] > div { transition: left .55s cubic-bezier(.2,.7,.3,1), top .55s cubic-bezier(.2,.7,.3,1), rotate .55s cubic-bezier(.2,.7,.3,1), box-shadow .4s; cursor: pointer; }
  [data-hero-cards]:hover > div:nth-child(1) { left: -8% !important; top: 44px !important; rotate: -14deg !important; }
  [data-hero-cards]:hover > div:nth-child(2) { left: 66% !important; top: 64px !important; rotate: 13deg !important; }
  [data-hero-cards]:hover > div:nth-child(3) { top: 30px !important; }
  [data-hero-cards] > div:nth-child(1):hover, [data-hero-cards] > div:nth-child(1)[data-front] { left: 2% !important; top: 12px !important; rotate: -2deg !important; z-index: 5 !important; }
  [data-hero-cards] > div:nth-child(2):hover, [data-hero-cards] > div:nth-child(2)[data-front] { left: calc(100% - 250px) !important; top: 12px !important; rotate: 2deg !important; z-index: 5 !important; }
  [data-hero-cards] > div:nth-child(1):hover, [data-hero-cards] > div:nth-child(2):hover, [data-hero-cards] > div[data-front] { box-shadow: 0 40px 90px rgba(60,20,10,0.45), 0 2px 0 rgba(255,255,255,0.6) inset !important; }
  @media (max-width: 620px) {
    [data-hero-cards] > div:nth-child(1)[data-front] { left: 4% !important; }
    [data-hero-cards] > div:nth-child(2)[data-front] { left: calc(96% - 200px) !important; }
  }

  /* The one word the headline leans on */
  h1 em { font-style: italic; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; text-decoration-color: rgba(255,229,221,0.9); }
  html[lang="zh"] h1 em { font-style: normal; text-underline-offset: 0.16em; }
  html[lang="zh-HK"] h1 em { font-style: normal; text-underline-offset: 0.16em; }

  /* FAQ: the plus turns into a cross, the answer eases in */
  [data-faq-marker] { display: inline-block; line-height: 1; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
  details[open] [data-faq-marker] { transform: rotate(45deg); }
  details[open] > p { animation: faq-in .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* Buttons answer the pointer before the press */
  .btn { transition: background-color .2s, border-color .2s, transform .12s; }
  .btn[style*="background: #f26345"]:hover { background-color: #cc4a30 !important; }
  .btn[style*="background: #fffdf9"]:hover { background-color: #f3e9d8 !important; }
  .btn[style*="border: 1.5px solid rgba(255,253,249"]:hover { background-color: rgba(255,253,249,0.14) !important; border-color: #fffdf9 !important; }

  /* Covers: one lift, one soft shadow */
  [data-book] [data-cover] { transition: box-shadow .35s cubic-bezier(.2,.7,.3,1); }
  [data-book]:hover [data-cover], [data-book]:focus-visible [data-cover] { box-shadow: 0 26px 50px rgba(0,0,0,0.42) !important; }

/* ---------- 2d. editorial social footer ---------- */
  .site-footer { background: #fcf7ed; }
  .footer-directory {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .social-stage { background: #29211f; color: #fffdf9; }
  .social-stage-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 32px 54px;
    display: block;
  }
  .social-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .social-heading h2 {
    margin: 0;
    color: #fffdf9;
    font-size: clamp(64px, 7.1vw, 108px);
    line-height: .9;
    letter-spacing: -.055em !important;
  }
  .social-heading h2 br { display: none; }
  html[lang="zh"] .social-heading h2 { letter-spacing: -.02em !important; }
  html[lang="zh-HK"] .social-heading h2 { letter-spacing: -.02em !important; }
  .social-heading p {
    max-width: 28ch;
    margin: 0 0 7px;
    color: #cfc4bb;
    font-size: 15px;
    line-height: 1.65;
  }
  .social-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(42px, 5vw, 72px);
    border-top: 1px solid rgba(255, 253, 249, .28);
  }
  .social-link {
    position: relative;
    min-width: 0;
    min-height: 118px;
    padding: 28px 20px 26px 0;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fffdf9;
    border-bottom: 1px solid rgba(255, 253, 249, .28);
    transition: color .2s ease, padding-left .25s ease, background .25s ease;
  }
  .social-link:not(:nth-child(4n)) { border-right: 1px solid rgba(255, 253, 249, .28); }
  .social-link:not(:nth-child(4n + 1)) { padding-left: 20px; }
  .social-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 20px;
    bottom: -1px;
    height: 3px;
    background: #f26345;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  a.social-link:hover,
  a.social-link:focus-visible { color: #f5836a; padding-left: 10px; }
  a.social-link:not(:nth-child(4n + 1)):hover,
  a.social-link:not(:nth-child(4n + 1)):focus-visible { padding-left: 30px; }
  a.social-link:hover::after,
  a.social-link:focus-visible::after { transform: scaleX(1); }
  .social-link img {
    width: 38px;
    height: 38px;
    flex: none;
  }
  .social-link > span:last-child { min-width: 0; display: grid; gap: 4px; }
  .social-link strong { font-size: 20px; line-height: 1.12; }
  .social-link small { color: #cfc4bb; font-size: 13px; overflow-wrap: anywhere; }
  .social-link-static { cursor: default; }
  .footer-colophon {
    max-width: 1176px;
    margin: 0 auto;
    padding: 20px 0 24px;
    display: flex;
    justify-content: space-between;
    gap: 12px 28px;
    flex-wrap: wrap;
    color: #a99e96;
    border-top: 1px solid rgba(255, 253, 249, .28);
    font-size: 13px;
  }
  .footer-colophon a { color: #fffdf9 !important; }
  .footer-colophon a:hover { color: #f5836a !important; }

  @media (max-width: 980px) {
    .footer-directory { grid-template-columns: 1fr 1fr; }
    .social-heading { grid-template-columns: 1fr; gap: 22px; }
    .social-heading h2 { max-width: 9ch; }
    .social-heading h2 br { display: initial; }
    .social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .social-link:not(:nth-child(4n)) { border-right: 0; }
    .social-link:nth-child(odd) { padding-right: 20px; padding-left: 0; border-right: 1px solid rgba(255, 253, 249, .28); }
    .social-link:nth-child(even) { padding-left: 20px; }
    .footer-colophon { margin: 0 32px; }
  }
  @media (max-width: 620px) {
    .footer-directory { padding: 44px 22px; gap: 34px 24px; }
    .footer-directory > div:first-child { grid-column: 1 / -1; }
    .social-stage-inner { padding: 48px 22px 36px; gap: 34px; }
    .social-heading h2 { font-size: 48px !important; }
    .social-links { grid-template-columns: 1fr; }
    .social-link,
    .social-link:nth-child(odd),
    .social-link:nth-child(even),
    .social-link:not(:nth-child(4n + 1)) { min-height: 88px; padding: 20px 0; border-right: 0; }
    a.social-link:hover,
    a.social-link:focus-visible,
    a.social-link:nth-child(even):hover,
    a.social-link:nth-child(even):focus-visible { padding-left: 8px; }
    .social-link img { width: 34px; height: 34px; }
    .social-link strong { font-size: 18px; }
    .footer-colophon { margin: 0 22px; padding-bottom: 28px; flex-direction: column; }
    footer a { display: inline-flex; }
  }

/* ---------- 3. language hint (shared with the rest of the site) ---------- */
.langhint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 32px);
  padding: 14px 16px 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-modal);
  font-size: 15px;
}

.langhint[data-open="true"] { display: flex; }

.langhint a {
  font-weight: 600;
  color: var(--coral);
  text-decoration: none;
  white-space: nowrap;
}

.langhint button {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.langhint span, .langhint a { white-space: nowrap; }