/* =======================================================================
   OLENRI /clarity/ -- shared stylesheet for the SEO content hub
   -----------------------------------------------------------------------
   Design tokens mirror /app/landing/index.html (same --bg/--text/--accent
   palette, same font stack) so this section feels native to olenri.com
   instead of a bolted-on blog. This file is the ONLY thing every new
   /clarity/*.html page needs to link -- see the comment block at the top
   of any article file for the "add a new page" recipe.
   ======================================================================= */
:root {
  --bg:            #FAFAFA;
  --bg-elev:       #FFFFFF;
  --text:          #0B0B0C;
  --text-2:        #3C3C43;
  --text-3:        #8E8E93;
  --line:          rgba(0,0,0,0.08);
  --line-strong:   rgba(0,0,0,0.12);
  --accent:        #0A84FF;
  --accent-soft:   rgba(10,132,255,0.10);
  --radius-md:     14px;
  --radius-lg:     22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #000000;
    --bg-elev:       #0E0E10;
    --text:          #FFFFFF;
    --text-2:        #EBEBF5;
    --text-3:        #8E8E93;
    --line:          rgba(255,255,255,0.10);
    --line-strong:   rgba(255,255,255,0.14);
    --accent-soft:   rgba(10,132,255,0.18);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Match olenri.com's own convention: links inherit color by default and
   only pick up the accent on hover, except where a link IS the primary
   affordance (nav, related list, hub cards, closing mention) -- those get
   the accent explicitly. This avoids the "generic blog full of blue
   underlines" look the brand doesn't use anywhere else on the site. */
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

/* Header / breadcrumb -- same 1px hairline + wordmark pattern as index.html.
   Row 1 (brand + language switch) and row 2 (breadcrumbs) are DELIBERATELY
   separate flex rows, not one wrapping row: this guarantees the language
   switch button always stays pinned top-right next to the brand, even when
   the breadcrumb text is long (German compounds, deep article titles) and
   needs to wrap onto its own line. If they shared one wrapping row, a long
   breadcrumb could push the switch button down to a line where it sits at
   the LEFT edge -- but its dropdown menu still assumes it's near the RIGHT
   edge (anchored via `right: 0`), which pushed the open menu off-screen. */
header.clarity-header { border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.clarity-header .wrap {
  max-width: 700px; margin: 0 auto; padding: 20px 20px;
}
.clarity-header-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.clarity-header .brand { font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: -0.01em; flex-shrink: 0; }
.clarity-header .crumbs {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--text-3);
}
.clarity-header .crumbs a { color: var(--text-3); }
.clarity-header .crumbs a:hover { color: var(--accent); }

/* ------------------------------------------------------------------
   HEADER RIGHT SIDE -- Home icon -> Features/How it works/Download/
   Clarity -> language switcher. Structurally/visually IDENTICAL to the
   homepage's own .header-right (same class names & measurements), so
   the two headers behave as one consistent system across all 89 pages:
   - Home icon: always visible at every width, links to "/".
   - Features/How/Download/Clarity: flat row on desktop (>=720px); a
     hamburger <details> (zero JS to open/close) on mobile/tablet.
   - Language switcher: render_lang_switch() output, always visible.
   ------------------------------------------------------------------ */
.clarity-header-right { display: flex; align-items: center; gap: 20px; }
.home-icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); flex-shrink: 0;
}
.home-icon-link:hover { color: var(--accent); }

.nav-links { display: none; }
@media (min-width: 720px) {
  .nav-links { display: inline-flex; gap: 24px; }
  .nav-links a { color: var(--text-2); font-size: 15px; font-weight: 500; }
  .nav-links a:hover { color: var(--accent); }
}

.mobile-nav { position: relative; display: inline-flex; }
@media (min-width: 720px) { .mobile-nav { display: none; } }
.mobile-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  list-style: none;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; width: 36px; height: 36px;
  color: var(--text-2); cursor: pointer;
}
.mobile-nav-btn::-webkit-details-marker { display: none; }
.mobile-nav-btn:hover { color: var(--accent); border-color: var(--accent); }
.mobile-nav-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  margin: 0; padding: 6px; min-width: 190px; z-index: 20;
  display: flex; flex-direction: column;
}
.mobile-nav-menu a {
  display: flex; align-items: center;
  padding: 12px 14px; border-radius: 10px; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--text-2);
}
.mobile-nav-menu a:hover { background: var(--accent-soft); color: var(--accent); }

/* ------------------------------------------------------------------
   LANGUAGE SWITCHER -- visually identical to the olenri.com homepage
   switcher (same classes/measurements/colors) at every viewport size:
   a globe icon + current language code button that opens a dropdown.
   Implemented as a native <details>/<summary> (zero JS required to
   open/close) whose menu items are real <a href> links -- unlike the
   homepage (single URL, JS text-swap), each item here is a genuine
   navigation to that article's translated URL.
   ------------------------------------------------------------------ */
.clarity-lang-switch { position: relative; flex-shrink: 0; }

.clarity-lang-switch .lang-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 12px;
  color: var(--text-2); font-size: 13px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  min-height: 32px; user-select: none;
}
.clarity-lang-switch .lang-switch-btn::-webkit-details-marker { display: none; }
.clarity-lang-switch .lang-switch-btn:hover { color: var(--accent); border-color: var(--accent); }

.clarity-lang-switch .lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  margin: 0; padding: 6px; min-width: 150px; z-index: 20;
  display: flex; flex-direction: column;
}
.clarity-lang-switch .lang-switch-item {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; color: var(--text-2);
}
.clarity-lang-switch .lang-switch-item:hover { background: var(--accent-soft); color: var(--accent); }
.clarity-lang-switch .lang-switch-item.is-current { color: var(--accent); font-weight: 600; }

main.clarity-main { max-width: 700px; margin: 0 auto; padding: 48px 20px 32px; }

.clarity-eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; margin: 0 0 20px;
}
h1.clarity-h1 {
  font-size: clamp(28px, 4.2vw, 38px); line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 700; margin: 0 0 18px; color: var(--text);
}
.clarity-dek { font-size: 18px; color: var(--text-2); line-height: 1.5; margin: 0 0 28px; }

/* The GEO/scan-friendly "direct answer" block: a calm bordered card (same
   treatment as index.html's .card), not a loud colour fill. Sits right
   under the dek and gives a self-contained 2-4 sentence answer. */
.clarity-answer {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-elev); padding: 22px 24px; margin: 0 0 40px;
}
.clarity-answer p {
  font-size: 17px; color: var(--text); line-height: 1.6; margin: 0;
}

.clarity-article h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); margin: 40px 0 14px;
}
.clarity-article p { font-size: 17px; color: var(--text-2); line-height: 1.7; margin: 0 0 18px; }
.clarity-article ul, .clarity-article ol { padding-left: 22px; margin: 0 0 18px; }
.clarity-article li { font-size: 17px; color: var(--text-2); line-height: 1.6; margin-bottom: 10px; }
.clarity-article strong { color: var(--text); font-weight: 600; }

.clarity-cta {
  margin: 48px 0 8px; padding: 28px 28px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev);
}
.clarity-cta p { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0; }
.clarity-cta a.clarity-inline-link {
  color: var(--accent); font-weight: 600; white-space: nowrap;
}
.clarity-cta a.clarity-inline-link:hover { text-decoration: underline; }

.clarity-related { margin: 40px 0 8px; }
.clarity-related h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); margin: 0 0 14px;
}
.clarity-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.clarity-related a { font-size: 16px; font-weight: 600; color: var(--accent); }
.clarity-related a:hover { text-decoration: underline; }

/* Hub */
.clarity-hub-section { margin: 0 0 40px; }
.clarity-hub-section-title {
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #22C55E; margin: 0 0 16px;
}
.clarity-hub-list { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 0; }
.clarity-hub-card {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 28px; background: var(--bg-elev);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.clarity-hub-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.clarity-hub-card h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.clarity-hub-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }

footer.clarity-footer { border-top: 1px solid var(--line); margin-top: 56px; }
.clarity-footer .wrap {
  max-width: 700px; margin: 0 auto; padding: 24px 20px 60px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: var(--text-3);
}
.clarity-footer a { color: var(--text-3); }
.clarity-footer a:hover { color: var(--accent); }
.clarity-footer .legal-row { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 480px) {
  h1.clarity-h1 { font-size: 26px; }
  .clarity-dek { font-size: 16px; }
  .clarity-answer, .clarity-cta { padding: 20px; }
}