/* Manrope — SIL Open Font License 1.1. Self-hosted; see fonts/LICENSE.txt. */
/* Generated by scripts/site-fonts.py — do not edit. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-greek-400.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-vietnamese-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext-500.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-greek-500.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-vietnamese-500.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext-700.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-greek-700.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-vietnamese-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext-800.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-greek-800.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-vietnamese-800.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────────────────────────────────────
   BrightLog — brightlogapp.com

   GENERATED SITE. Do not edit anything under public/ — edit this file, the
   templates in site/templates/, or the copy in site/content/<locale>.json, then
   run `npm run site:build`.

   Palette is the app's own, read from source, not eyeballed:
     brand  #0F766E / #2DD4BF (dark)   src/context/ThemeContext.tsx:40,130
     ink    #134E4A                     scripts/store-screenshots/config.py:47
     accent #D97706 / #F59E0B (dark)    config.py:49, ThemeContext.tsx:48,134
     cream  #FAF3E7                     config.py:46  (the mascot's book)
   Type is Manrope — the face the store screenshots are typeset in, self-hosted.

   Direction-agnostic: every inset uses logical properties (margin-inline,
   padding-inline, inset-inline) so the Arabic build mirrors with no extra CSS.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --brand: #0F766E;
  --brand-ink: #134E4A;
  /* The brand's sunrise gold is #D97706, and that is what the store slides use — on a DARK
     canvas, where it has plenty of contrast. As TEXT on the cream canvas it measures 2.89:1,
     which fails WCAG AA even for large text (needs 3.0; body needs 4.5). So the light theme
     uses a darker step of the same hue: 4.55:1 on cream, 5.02:1 on white. The gold you see on
     the teal hero and in dark mode is still the real #D97706 / #F59E0B. */
  --accent: #B45309;
  --canvas: #FAF3E7;
  --canvas-alt: #FFFDF8;
  --surface: #FFFFFF;
  --text: #1C1917;
  --muted: #6B625B;
  --border: #E7E0D5;
  --bezel: #1A2725;

  --hero-bg: #134E4A;
  --hero-text: #FAF3E7;
  --hero-muted: #A8C5C0;
  --hero-accent: #F5A623;

  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 2px 4px rgba(19, 78, 74, .04), 0 12px 32px rgba(19, 78, 74, .08);
  --shadow-lg: 0 8px 24px rgba(19, 78, 74, .10), 0 32px 64px rgba(19, 78, 74, .14);
  --wrap: 1120px;
  --step: clamp(1rem, .8rem + .6vw, 1.125rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2DD4BF;
    --brand-ink: #99F6E4;
    --accent: #F59E0B;
    --canvas: #0C0A09;
    --canvas-alt: #141110;
    --surface: #1C1917;
    --text: #FAFAF9;
    --muted: #A8A29E;
    --border: #332E2B;
    --bezel: #05100F;

    --hero-bg: #0B1F1D;
    --hero-text: #FAF3E7;
    --hero-muted: #93B8B2;
    --hero-accent: #F59E0B;

    --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  font-size: var(--step);
  line-height: 1.65;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text); padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip:focus { inset-inline-start: 0; }

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem;
         color: var(--text); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 24px; margin-inline-start: auto; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--brand); text-decoration: none; }
.nav-cta {
  background: var(--brand); color: #fff !important; padding: 9px 20px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.nav-cta:hover { filter: brightness(1.08); text-decoration: none; }
@media (prefers-color-scheme: dark) { .nav-cta { color: #06201C !important; } }
@media (max-width: 860px) { .nav-links .hide-sm { display: none; } }

/* language switcher — a <details>, so it works with JavaScript off */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 600; font-size: .95rem; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  white-space: nowrap;   /* 日本語 / ダウンロード were breaking mid-word in the nav at 390px */
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--brand); }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; width: 460px; max-width: 78vw;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; z-index: 60;
}
.lang-menu a {
  padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: .9rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang-menu a:hover { background: var(--canvas); color: var(--brand); text-decoration: none; }
.lang-menu a[aria-current='true'] { color: var(--brand); font-weight: 700; }

/* On a phone the menu was running off the START edge of the screen. It is anchored to the globe
   button's end edge — but the globe sits INSIDE the nav, to the start-side of the Download button —
   so a 78vw-wide menu growing backwards from there lands at about -34px on a 390px viewport, and the
   first column is cut off. Below 700px, pin it to the VIEWPORT instead of to the button.
   (.nav sets backdrop-filter, which makes it the containing block for fixed descendants. That is
   harmless here: .nav is full-bleed and sticky at top:0, so `top` and `inset-inline` resolve to the
   same pixels whether the containing block turns out to be .nav or the viewport.) */
@media (max-width: 700px) {
  .lang-menu {
    position: fixed;
    top: 76px;                /* .nav-in is 68px tall, + 8px of air */
    inset-inline: 12px;       /* logical, so it gutters correctly in Arabic too */
    width: auto; max-width: none;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }
}
@media (max-width: 560px) { .lang-menu { grid-template-columns: repeat(2, 1fr); } }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--hero-bg); color: var(--hero-text);
  padding-block: clamp(48px, 7vw, 88px) 0; overflow: hidden;
}
.hero-in {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: end;
}
.hero-copy { padding-bottom: clamp(48px, 7vw, 96px); }
.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); line-height: 1.06; font-weight: 800;
  letter-spacing: -.035em; margin-bottom: 20px;
}
/* Colour only — NOT display:block. The line break comes from the <br> the builder emits between
   headline lines. It used to come from this block, which silently required the accent to be a whole
   line; where it wasn't (Italian: "diario privato" inside "Il diario privato") no span was emitted
   at all and the hero rendered as "Il diario privatodel tuo umore". */
.hero h1 .accent { color: var(--hero-accent); }
.hero-sub {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); color: var(--hero-muted);
  line-height: 1.45; max-width: 30ch; margin-bottom: 14px; font-weight: 500;
}
.hero-lede { color: var(--hero-muted); max-width: 46ch; margin-bottom: 32px; opacity: .92; }

/* store badges — official artwork, unmodified.
   Apple: min 40px high, clear space >= 1/4 badge height, and the App Store badge goes FIRST.
   Google: the Play badge must be "the same size or larger" than other badges. Its PNG bakes in
   its own clear space (total height = 1.488x the artwork), so rendering it at 74px next to a
   48px App Store badge makes the two ARTWORKS equal-height. Both rules hold. Do not "fix" the
   mismatched numbers below — they are what makes the badges look identical in size. */
.badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-apple img { height: 48px; width: auto; margin: 12px; }     /* 12px = 1/4 of 48 */
.badge-google img { height: 74px; width: auto; }                  /* clear space is in the PNG */
.badges a:hover { text-decoration: none; opacity: .85; }

.hero-media { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.hero-media .device { transform: translateY(8px); }

/* the phone */
.device {
  background: var(--bezel); border-radius: 44px; padding: 9px;
  box-shadow: var(--shadow-lg); width: min(300px, 78vw); flex-shrink: 0;
}
.device img { border-radius: 36px; display: block; }
.hero .device { width: min(340px, 80vw); }

/* ── trust bar — only claims that are TRUE. No ratings, no user counts. ────── */
.trust { background: var(--surface); border-bottom: 1px solid var(--border); }
.trust ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
  list-style: none; padding-block: 20px;
}
.trust li {
  display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem;
  color: var(--muted);
}
.trust svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }

/* ── sections ─────────────────────────────────────────────────────────────── */
section { padding-block: clamp(56px, 8vw, 104px); }
.section-head { text-align: center; max-width: 44ch; margin-inline: auto; margin-bottom: 56px; }
h2 {
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.7rem); line-height: 1.14; font-weight: 800;
  letter-spacing: -.03em;
}
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.1rem; }

/* alternating feature rows */
.rows { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 88px); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.row .device { width: min(264px, 72vw); }
.row:nth-child(even) .row-media { order: -1; }
.row-copy h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem); line-height: 1.18; font-weight: 800;
  letter-spacing: -.028em; margin-bottom: 14px;
}
.row-copy h3 .accent { color: var(--accent); }
.row-copy p { color: var(--muted); font-size: 1.1rem; max-width: 40ch; }
.row-media { display: flex; justify-content: center; }

/* ── story: the locale's own store description, as real localized text ─────── */
.story { background: var(--canvas-alt); border-block: 1px solid var(--border); }
.story-grid {
  columns: 2; column-gap: 56px; max-width: 920px; margin-inline: auto;
}
.story-item { break-inside: avoid; margin-bottom: 32px; }
.story-item h3 {
  font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px;
  color: var(--brand-ink);
}
.story-item p { color: var(--muted); font-size: 1rem; }
@media (prefers-color-scheme: dark) { .story-item h3 { color: var(--brand); } }
@media (max-width: 800px) { .story-grid { columns: 1; } }

/* ── privacy ──────────────────────────────────────────────────────────────── */
.privacy { background: var(--hero-bg); color: var(--hero-text); }
.privacy h2 { max-width: 20ch; }
.privacy-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.privacy-lede { color: var(--hero-muted); font-size: 1.15rem; margin-top: 18px; }
.privacy ul { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.privacy li { display: flex; gap: 14px; align-items: flex-start; }
.privacy li svg { width: 22px; height: 22px; color: var(--hero-accent); flex-shrink: 0; margin-top: 3px; }
.privacy li b { display: block; font-weight: 700; margin-bottom: 2px; }
.privacy li span { color: var(--hero-muted); }

/* ── FAQ — <details>, so it opens with JavaScript off ─────────────────────── */
.faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 22px;
}
.faq-item summary {
  cursor: pointer; list-style: none; font-weight: 700; padding-block: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; width: 10px; height: 10px; flex-shrink: 0;
  border-inline-end: 2.5px solid var(--muted); border-block-end: 2.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease; margin-block-start: -4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-block-start: 4px; }
.faq-item p { color: var(--muted); padding-bottom: 20px; }

/* ── final CTA ────────────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta-card {
  background: linear-gradient(135deg, var(--brand-ink), var(--brand));
  border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px) 24px;
  color: #FAF3E7; box-shadow: var(--shadow-lg);
}
.cta-card h2 { color: #FAF3E7; }
.cta-card p { color: rgba(250, 243, 231, .82); margin: 14px auto 30px; max-width: 44ch; font-size: 1.1rem; }
.cta-card .badges { justify-content: center; }
.cta-mascot { width: 104px; height: auto; margin: 0 auto 18px; }

/* ── footer ───────────────────────────────────────────────────────────────── */
footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: 48px 32px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; }
.foot-links a { color: var(--muted); font-weight: 600; font-size: .95rem; }
.foot-langs { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.foot-langs h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
                 font-weight: 700; margin-bottom: 12px; }
.foot-langs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-langs a { color: var(--muted); font-size: .88rem; }
/* The one-line definition of "private" — on EVERY page, because users told the owner the bare
   word is too vague: it must always resolve to "device only, or your own iCloud / Google Drive
   backup if you turn it on". Content key: footer.privacyNote. */
.foot-note { margin-top: 26px; color: var(--muted); font-size: .88rem; line-height: 1.55; max-width: 75ch; }
.foot-bottom {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: .85rem;
}
/* Facebook + Instagram. These were 20px glyphs in --muted grey and all but disappeared into the
   footer. They are the only two places a visitor can follow the app, so give them a real target:
   a 44px brand-tinted chip (also the minimum comfortable tap size) with a 24px mark inside. */
.social { display: flex; gap: 12px; }
.social a {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.social a:hover { background: var(--brand); color: #fff; transform: translateY(-1px); text-decoration: none; }
.social svg { width: 24px; height: 24px; }
/* --brand is a bright teal in dark mode; white-on-teal would be the low-contrast pair, so the
   filled hover state flips to the dark ink instead — same trick as .nav-cta. */
@media (prefers-color-scheme: dark) { .social a:hover { color: #06201C; } }

/* ── document pages: support / privacy / delete-account ───────────────────── */
.doc { padding-block: clamp(40px, 5vw, 64px); }
.doc-in { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
/* grid items default to min-width:auto — an intrinsically wide child (long TOC labels,
   tables) blows the column past the viewport; min-width:0 lets content wrap/scroll inside */
.doc-in > * { min-width: 0; }
.doc-title { max-width: 800px; margin-inline: auto; text-align: center; margin-bottom: 48px; }
.doc-title h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.12;
}
.doc-title p { color: var(--muted); margin-top: 12px; font-size: 1.1rem; }
.doc-updated {
  display: inline-block; margin-top: 16px; padding: 5px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  font-size: .85rem; font-weight: 600;
}

/* sticky table of contents — the old pages were an unnavigable wall of text */
.toc { position: sticky; top: 92px; }
.toc h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
          font-weight: 700; margin-bottom: 14px; }
.toc ol { list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.toc a {
  display: block; padding: 7px 12px; border-radius: 9px; color: var(--muted);
  font-size: .92rem; font-weight: 600; border-inline-start: 2px solid transparent;
}
.toc a:hover { background: var(--surface); color: var(--brand); text-decoration: none; }

.prose { max-width: 760px; }
.prose > section { padding-block: 0; margin-bottom: 40px; scroll-margin-top: 96px; }
.prose h2 {
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.prose h3 { font-size: 1.1rem; font-weight: 700; margin: 22px 0 8px; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 24px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .95rem; }
.prose th, .prose td { text-align: start; padding: 10px 14px; border: 1px solid var(--border); }
.prose th { background: var(--surface); font-weight: 700; color: var(--text); }
.prose td { color: var(--muted); }
.prose-scroll { overflow-x: auto; }

/* callout — used for the "we never see what you write" style statements */
.note {
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand);
  border-radius: 12px; padding: 18px 22px; margin: 20px 0;
}
.note p:last-child { margin-bottom: 0; }
.note.warn { border-inline-start-color: #DC2626; }

/* the support page's contact card */
.contact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; text-align: center; box-shadow: var(--shadow); margin-bottom: 40px;
}
.contact-card a.button, .button {
  display: inline-block; background: var(--brand); color: #fff !important; font-weight: 700;
  padding: 12px 26px; border-radius: 999px; margin-top: 12px;
}
.button:hover { filter: brightness(1.08); text-decoration: none; }
@media (prefers-color-scheme: dark) { .button { color: #06201C !important; } }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero-copy { padding-bottom: 32px; }
  .hero-sub, .hero-lede { margin-inline: auto; }
  .badges { justify-content: center; }
  .row { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .row:nth-child(even) .row-media { order: 0; }
  .row-copy p { margin-inline: auto; }
  .privacy-in { grid-template-columns: 1fr; }
  .doc-in { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; }
  .toc ol { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .badges { gap: 0; }
  .trust ul { gap: 10px 22px; }
  .trust li { font-size: .88rem; }
  .nav-in { gap: 10px; }
  .nav-links { gap: 10px; }
  /* Below this width the language NAME costs more than it earns — the globe still says
     "language", and the full list is one tap away. Keeps the nav on one line in every locale,
     including the long ones (日本語 + ダウンロード, Español (Latinoamérica), हिन्दी).
     :not(.guides): the Guides dropdown shares the .lang chrome but its label IS its meaning —
     hiding it left a blank circle in the nav (found on real mobile Chrome, 2026-07-19). */
  .lang:not(.guides) summary span { display: none; }
  .lang:not(.guides) summary { padding: 8px; }
  .nav-cta { padding: 8px 14px; font-size: .9rem; }
}

@media print {
  .nav, .cta, .trust, footer .foot-langs, .toc { display: none; }
  body { background: #fff; color: #000; }
}

/* ── /feelings-wheel — the interactive wheel + per-emotion reference ───────── */
.wheel { padding-block: clamp(40px, 5vw, 64px) 0; }
.wheel-fig { margin: 0 auto 56px; max-width: 720px; }
.wheel-svg { display: block; width: 100%; height: auto; }
.wheel-svg a path { transition: filter .15s ease, opacity .15s ease; }
.wheel-svg a:hover path, .wheel-svg a:focus-visible path { filter: brightness(.92) saturate(1.15); }
.wheel-svg text { font-family: inherit; font-weight: 600; pointer-events: none; }
.wheel-fig figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 14px; }
@media (prefers-color-scheme: dark) {
  /* the wheel's wedges are light pastels — give them a light plate so labels keep contrast */
  .wheel-svg { background: #FAF3E7; border-radius: 50%; }
}

.wheel-how { max-width: 760px; margin: 0 auto 56px; }
.wheel-how h2, .wheel-ref > h2, .wheel-faq h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 16px;
}
.wheel-how ol { list-style: none; counter-reset: hw; display: flex; flex-direction: column; gap: 14px; padding: 0; }
.wheel-how li {
  counter-increment: hw; position: relative; padding: 16px 20px 16px 64px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted);
}
.wheel-how li::before {
  content: counter(hw); position: absolute; inset-inline-start: 18px; top: 50%;
  transform: translateY(-50%); width: 30px; height: 30px; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center;
  font-size: .95rem;
}
[dir="rtl"] .wheel-how li { padding: 16px 64px 16px 20px; }

.wheel-ref { max-width: 980px; margin: 0 auto 56px; }
.wheel-ref > p { color: var(--muted); max-width: 760px; margin-bottom: 32px; }
.wcore {
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 6px solid var(--core);
  border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 22px;
  scroll-margin-top: 96px; box-shadow: var(--shadow);
}
.wcore h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px;
}
.wdot { width: 16px; height: 16px; border-radius: 999px; background: var(--core); flex: none; }
.wcore-intro { color: var(--muted); margin-bottom: 20px; max-width: 760px; }
.wsubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.wsub {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  scroll-margin-top: 96px; background: var(--canvas-alt);
}
.wsub h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.wsub p { color: var(--muted); font-size: .95rem; margin-bottom: 10px; }
.wsub .wspecs { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wspecs span {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .85rem;
  font-weight: 600; color: var(--text); scroll-margin-top: 96px;
  background: color-mix(in srgb, var(--core) 26%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--core) 45%, var(--border));
}
.wspecs span:target { outline: 3px solid var(--accent); outline-offset: 2px; }
.wsub:target, .wcore:target { outline: 3px solid var(--accent); outline-offset: 3px; }

.wheel-faq { max-width: 760px; margin: 0 auto 72px; }

/* screenshots embedded in article prose — the raw app UI in the shared device frame */
.prose .device { max-width: 250px; margin: 26px auto; }
.prose figure { margin: 26px auto; }
.prose figcaption { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 10px; }

/* /feelings-wheel — "the wheel inside the app" band */
.wheel-app {
  max-width: 980px; margin: 0 auto 64px; display: grid;
  grid-template-columns: 1fr 260px; gap: 48px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 44px; box-shadow: var(--shadow);
}
.wheel-app h2 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.8rem); font-weight: 800;
                letter-spacing: -.02em; margin-bottom: 12px; }
.wheel-app p { color: var(--muted); }
.wheel-app .device { max-width: 240px; margin: 0 auto; }
@media (max-width: 900px) {
  .wheel-app { grid-template-columns: 1fr; text-align: center; padding: 28px; }
}

/* Mobile: the wheel's outer-ring labels are unreadable squeezed into a phone width. Keep the
   PAGE from scrolling sideways but let the WHEEL pan inside its own container at a size where
   labels are legible and segments are real tap targets. Inline JS centres the initial scroll. */
.wheel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
@media (max-width: 720px) {
  .wheel-fig { margin-inline: -24px; }
  .wheel-fig figcaption { padding-inline: 24px; }
  .wheel-scroll { padding-inline: 12px; }
  .wheel-svg { min-width: 660px; }
}

/* the Guides dropdown reuses the language-menu chrome; unlike the hide-sm links it stays
   visible on mobile, so phones get the content index too */
.guides summary { font-weight: 600; color: var(--muted); }
.guides-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; z-index: 60;
}
.guides-menu a { padding: 8px 12px; border-radius: 8px; color: var(--text); font-size: .92rem; font-weight: 600; }
.guides-menu a:hover { background: var(--canvas); color: var(--brand); text-decoration: none; }

/* Mobile nav: three pills (Guides · language · Download) plus the brand exceeded a 390px
   viewport once the Guides menu was added — the row overflowed and a right-anchored menu
   could open past the screen edge. Below 640px: tighter gaps, the language button collapses
   to its globe icon (its menu still lists full language names), and both dropdowns become
   fixed sheets pinned inside the viewport so they can never open off-screen. */
@media (max-width: 640px) {
  .nav-in { gap: 10px; }
  .nav-links { gap: 10px; }
  /* the wordmark is the one thing the hero repeats two lines lower — the logo keeps linking
     home, and dropping the text is what lets brand + Guides + globe + Download share 390px */
  .brand span { display: none; }
  .lang:not(.guides) summary span { display: none; }
  .nav-cta { padding: 8px 14px; font-size: .9rem; }
  .lang-menu, .guides-menu {
    position: fixed; inset-inline: 14px; top: 78px; width: auto; min-width: 0; max-width: none;
  }
}