/* MentVerse site: shared base (redesign stage 1, 30.10.2026).
   One design language for every public page: fonts, tokens, skip link, focus, the dark nav and the dark footer.
   Load order on every page: base.css -> the page's own CSS -> a11y.css.
   Older page files (site.css, legal.css, en.css, mentors.css, guide.css) still define their own :root and reuse
   --ink, --text, --line, --teal, --gutter etc.; the nav and footer below therefore use only the --d-* tokens and literal
   values, and two-class selectors, so the older files cannot reach them. */

@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/google-sans-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/google-sans-latin.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;
}

:root {
  color-scheme: light;
  /* surfaces */ --ink: #0B0B0F; --paper: #F7F7F9; --paper-2: #EFEFF3; --card: #FFFFFF;
  /* text (body text is black, not grey) */ --text: #111114; --muted: #4A4A55; --faint: #6E6E78;
  /* lines */ --line: rgba(17,17,20,.10); --line-2: rgba(17,17,20,.16);
  /* light surfaces: one accent for what you can act on, teal-ink for section labels (HQ decision 1, 30.10) */
  --accent: #2F66D0; --accent-hover: #2A5BC4; --accent-tint: #EEF3FD; --label: #08736B;
  /* brand, dark surfaces only */ --teal: #13E5D5; --blue: #3C7CF3; --berry: #B0537F; --berry-ink: #94406A;
  --grad: linear-gradient(90deg, var(--teal), var(--blue) 55%, var(--berry));
  /* dark */ --d-bg: #030303; --d-raised: #0B0B0F; --d-surface: #16161C; --d-surface-2: #22222B;
  --d-text: #F4F4F6; --d-body: #C9C9D1; --d-muted: #B9B9C2; --d-faint: #7E7E88; --d-line: rgba(255,255,255,.10); --d-line-2: rgba(255,255,255,.16);
  /* type: weights 400 / 500 / 700 only */
  --sans: "Google Sans", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-display: clamp(38px, 8.4vw, 64px); --fs-h1: clamp(34px, 6.4vw, 56px); --fs-h2: clamp(30px, 5.4vw, 46px);
  --fs-h3-lg: clamp(24px, 3vw, 30px); --fs-h3: 20px; --fs-h4: 18px; --fs-lead: clamp(18px, 2.2vw, 20px);
  --fs-prose: 18px; --fs-body: 17px; --fs-small: 15px; --fs-caption: 13.5px; --fs-label: 12.5px;
  --lh-tight: 1.08; --lh-head: 1.15; --lh-body: 1.65; --lh-prose: 1.75;
  /* space, 8px grid */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --sec: clamp(72px, 10vw, 120px); --sec-tight: clamp(48px, 7vw, 80px); --head-mb: clamp(36px, 5vw, 56px);
  /* layout */ --wrap: 1120px; --gutter: clamp(20px, 4vw, 40px); --measure: 680px; --col: 820px; --col-wide: 1040px; --nav-h: 64px;
  /* shape */ --r-ctl: 12px; --r-mod: 16px; --r-device: 40px; --r-pill: 999px;
  /* motion (HQ research playbook, 30.10): no bounce, no overshoot; text reveals fire once on a trigger, never scrubbed */
  --ease-out: cubic-bezier(.23,1,.32,1); --ease-move: cubic-bezier(.77,0,.175,1); --ease: var(--ease-out);
  --dur-hover: .18s; --dur-press: .12s; --dur-reveal: .4s; --reveal-y: 8px; --stagger: 50ms;
  --dur-open: .22s; --dur-close: .18s;
  --t-fast: var(--dur-hover); --t-mid: var(--dur-reveal); --t-slow: .5s;
  /* names the home page already uses (same values) */
  --teal-ink: var(--label); --blue-btn: var(--accent); --ember: var(--berry); --ember-ink: var(--berry-ink);
  --grad-ink: linear-gradient(90deg, #0A8F85, #2F66D0 55%, #9A4470);
  --h1: var(--fs-display); --h2: var(--fs-h2); --lead: var(--fs-lead);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .site { flex: 1 0 auto; }
:focus-visible { outline: 2px solid #2F66D0; outline-offset: 2px; border-radius: 6px; }
[id] { scroll-margin-top: 24px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link: hidden until it receives keyboard focus */
.skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 40; padding: 12px 18px; border-radius: 12px; background: #FFFFFF; color: #0B0B0F; font-weight: 500; font-family: "Google Sans", system-ui, "Segoe UI", Arial, sans-serif; text-decoration: none; }
.skip-link:focus { top: 12px; color: #0B0B0F; }

/* Nav: dark, the same on every page, and part of the top of the page: it scrolls away with it and has no line under it
   (Ariel, 1.11.2026, option C of the nav mockups). Each page keeps its own links.
   On the home page (.nav-wide, four links) the links show from 900px; elsewhere (one or two links) they always show. */
header.nav { position: relative; z-index: 30; background: #030303; font-family: "Google Sans", system-ui, "Segoe UI", Arial, sans-serif; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; max-width: 1120px; margin: 0 auto; padding-block: 0; padding-inline: clamp(20px, 4vw, 40px); }
.nav .brand { display: inline-flex; align-items: center; gap: 9px; padding: 0; font-weight: 700; font-size: 18px; letter-spacing: .01em; line-height: 1; color: #FFFFFF; text-decoration: none; }
.nav .brand img { display: block; width: 25px; height: 28px; }
.nav .brand .bt { color: #FFFFFF; }
.nav .brand .bt span { color: #13E5D5; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; font-size: 14.5px; color: #B9B9C2; }
.nav ul a { display: inline-block; padding-block: 10px; color: inherit; text-decoration: none; transition: color var(--dur-hover) var(--ease-out); }
.nav ul a[aria-current="page"] { color: #FFFFFF; }
@media (min-width: 900px) { .nav ul { gap: 28px; } }
@media (max-width: 899px) { .nav.nav-wide ul { display: none; } }
/* pages whose head is light (guides, legal, support, 404): the nav takes the page's colours, so there is no band at
   the top (same option C, HQ 1.11). Dark logo file, existing text tokens, teal-ink for "Verse" (5.6:1). */
.nav.nav-light { background: #F7F7F9; }
.nav.nav-light .brand .bt { color: #111114; }
.nav.nav-light .brand .bt span { color: #08736B; }
.nav.nav-light ul { color: #4A4A55; }
.nav.nav-light ul a[aria-current="page"] { color: #111114; }
/* home on phones: no links there, so the logo sits centred at the top of the hero */
@media (max-width: 899px) { .nav.nav-wide .wrap { justify-content: center; height: 56px; } }
@media (max-width: 520px) { .nav .nav-optional { display: none; } .nav ul { gap: 16px; font-size: 14px; } }

/* Footer: dark, company facts + social + documents nav. Same markup on every Hebrew page; /en has its own words in the same parts. */
.foot { border-top: 1px solid rgba(255,255,255,.10); background: #030303; color: #7E7E88; font-family: "Google Sans", system-ui, "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.6; }
.foot .wrap { display: grid; gap: 20px; max-width: 1120px; margin: 0 auto; padding-block: 24px; padding-inline: clamp(20px, 4vw, 40px); }
.foot a { color: #B9B9C2; text-decoration: none; }

.foot a[aria-current="page"] { color: #FFFFFF; text-decoration: none; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; }
.foot .facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; }
.foot .facts div { display: flex; gap: 6px; }
.foot .facts dt { color: #7E7E88; font-size: inherit; }
.foot .facts dd { margin: 0; color: #B9B9C2; font-size: inherit; font-weight: 400; }
.foot .facts dd * { font-size: inherit; color: inherit; }
.foot .foot-facts { margin: 0; color: #B9B9C2; }
.foot .social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.foot .social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; color: #B9B9C2; background: none; }
.foot .social svg { width: 18px; height: 18px; fill: currentColor; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; border-top: 1px solid rgba(255,255,255,.10); padding-top: 18px; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 899px) { .foot-top, .foot-bottom, .foot .facts, .foot-bottom nav { justify-content: center; text-align: center; } }

/* Hover only where there is a real pointer; touch gets no sticky hover states */
@media (hover: hover) and (pointer: fine) {
  .nav ul a:hover { color: #FFFFFF; }
  .nav.nav-light ul a:hover { color: #111114; }
  .foot a:hover { color: #FFFFFF; }
  .foot-bottom nav a:hover, .foot .facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .foot .social a:hover { border-color: rgba(255,255,255,.28); }
}
.foot .social a { transition: border-color var(--dur-hover) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .nav ul a, .foot .social a { transition: none; } }

/* ---------- shared components (stage 3: every page uses the home page's parts) ---------- */
a { color: var(--accent); }
body { background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.dark { --text: var(--d-text); --muted: var(--d-muted); --faint: var(--d-faint); --line: var(--d-line); --line-2: rgba(255,255,255,.16); --card: var(--d-surface); --paper: var(--d-bg); --paper-2: var(--d-raised); --teal-ink: var(--teal); --grad-ink: var(--grad); background: var(--d-bg); color: var(--text); color-scheme: dark; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(72px, 10vw, 120px); }
.sec + .sec:not(.dark):not(.alt) { border-top: 1px solid var(--line); }
.alt { background: var(--paper-2); }
.head { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--teal-ink); display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; }
.label::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.label .he { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 14px; }
h2.t { font-size: var(--h2); line-height: 1.12; letter-spacing: -.015em; margin: 0; font-weight: 700; text-wrap: balance; max-width: 22ch; }
h2.t .ln { display: block; }
.gi { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); font-size: var(--lead); margin: 0; max-width: 60ch; }
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.note-s { color: var(--faint); font-size: 14px; margin: 0; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; font-weight: 500; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform var(--dur-open) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 4px 20px; color: var(--text); font-size: 16px; }
.sec:not(.dark) .gi { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
h2.t.wide { max-width: none; }
.alt:not(.dark) { --faint: #5E5E68; } /* #6E6E78 on #EFEFF3 is 4.39:1 */
.faq summary h3 { font: inherit; margin: 0; display: inline; }
.faq p a { color: var(--blue-btn); }
.store-badge { display: inline-block; line-height: 0; border-radius: 12px; }
.store-badge img { display: block; height: 46px; width: auto; }
@media (min-width: 900px) { .store-badge img { height: 50px; } }
.stores { align-items: center; }
.sec:not(.dark) .sub { color: var(--text); }
.dark .faq summary::after { color: var(--teal); }
.dark .faq p a, .dark a { color: inherit; }

/* Page head (light): every page that is not home, mentors or /en. Label, h1, the "updated" line, a hairline below. */
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: var(--sec-tight) clamp(32px, 4vw, 48px); display: grid; gap: 12px; justify-items: center; text-align: center; }
.page-head h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.02em; font-weight: 700; color: var(--text); text-wrap: balance; }
.page-head .updated { margin: 0; color: var(--faint); font-size: 15px; }
@media (min-width: 900px) { .page-head .wrap { justify-items: start; text-align: start; max-width: calc(var(--measure) + 2 * var(--gutter)); } }
@media (min-width: 1100px) { .page-head.has-toc .wrap { max-width: none; grid-template-columns: 220px minmax(0, var(--measure)); column-gap: 64px; justify-content: center; } .page-head.has-toc .wrap > * { grid-column: 2; } }

/* Long documents (privacy, terms, accessibility, support, 404): one centred reading column, black text,
   hairline above each h2, dot bullets, underlined links. Desktop: a table of contents beside it (built by doc.js). */
.doc { padding-block: clamp(40px, 6vw, 64px) var(--sec); }
.doc > .legal { max-width: var(--measure); margin: 0 auto; }
@media (min-width: 1100px) {
  .doc.has-toc { display: grid; grid-template-columns: 220px minmax(0, var(--measure)); justify-content: center; column-gap: 64px; align-items: start; }
  .doc.has-toc > .legal { margin: 0; }
}
.toc { display: none; }
@media (min-width: 1100px) {
  .doc.has-toc .toc { display: block; position: sticky; top: 32px; max-height: calc(100vh - 120px); overflow: auto; border-inline-start: 1px solid var(--line); }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; }
  .toc a { display: block; padding: 6px 16px; margin-inline-start: -1px; border-inline-start: 1px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.45; text-decoration: none; transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }
  .toc a[aria-current="true"] { color: var(--text); border-inline-start-color: var(--accent); }
}
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--text); } }
/* under 1100px the side list is hidden; doc.js puts the same list under a visible label at the top of the text */
.toc-m { margin: 0 0 32px; border-block: 1px solid var(--line); }
.toc-m summary { cursor: pointer; min-height: 44px; padding: 10px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 500; list-style: none; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform var(--dur-open) var(--ease-out); }
.toc-m details[open] summary::after { transform: rotate(45deg); }
.toc-m ol { list-style: none; margin: 0; padding: 0 0 12px; display: grid; }
.legal .toc-m a { display: block; padding: 8px 4px; color: var(--muted); font-size: 15px; line-height: 1.45; text-decoration: none; }
.toc-m summary:focus-visible { outline-offset: -2px; }
@media (min-width: 1100px) { .toc-m { display: none; } }
@media (prefers-reduced-motion: reduce) { .toc-m summary::after { transition: none; } }

.legal { color: var(--text); font-size: 17px; line-height: var(--lh-prose); }
.legal > :first-child { margin-top: 0; }
.legal h2 { margin: var(--s7) 0 12px; padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.legal h2.summary { margin-top: 0; padding-top: 0; border-top: 0; font-size: 18px; font-weight: 500; }
.legal h3 { margin: var(--s5) 0 6px; font-size: 18px; font-weight: 500; line-height: 1.4; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.legal ul li { position: relative; padding-inline-start: 18px; }
.legal ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.legal strong { font-weight: 700; color: var(--text); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal .todo { background: #FFF1C2; color: #7A4B00; padding: 0 3px; }
.draft { margin: 8px 0 0; padding: 12px 16px; border: 1px solid #B42318; border-radius: var(--r-ctl); color: #B42318; font-size: 15px; }
/* tables: home's matrix look (radius 16, hairlines, white head in faint 13.5/500); phones: each row a card */
.legal .table { overflow-x: auto; margin: 12px 0 20px; border: 1px solid var(--line-2); border-radius: var(--r-mod); background: var(--card); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal th, .legal td { padding: 12px 14px; text-align: start; vertical-align: top; color: var(--text); border-top: 1px solid var(--line); }
.legal th { color: var(--faint); font-size: 13.5px; font-weight: 500; background: var(--card); border-top: 0; }
.legal td:first-child { font-weight: 500; min-width: 120px; }
.legal td { min-width: 110px; }
@media (max-width: 600px) {
  .legal .table { border: 1px solid var(--line-2); border-radius: var(--r-mod); overflow: hidden; background: var(--card); }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; min-width: 0; }
  .legal tr { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 14px 16px; margin: 0; }
  .legal tbody tr:first-child { border-top: 0; }
  .legal td { border: 0; padding: 0; }
  .legal td + td { margin-top: 8px; }
  .legal td:first-child { font-weight: 500; font-size: 16px; }
  .legal td + td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--faint); }
}
/* /support on phones and tablets: the headings stay centred, the answers read from the right like any long text
   (HQ decision, 1.11.2026; was all centred from 3.10) */
@media (max-width: 899px) {
  .centered .legal :is(h2, h3) { text-align: center; }
}

/* Tables (guides): home's matrix look. Highlighted last column = MentVerse, in the accent tint with a 3px cap.
   Phones: each row becomes a block, the column name over each value; the highlighted cell leads at full width. */
.nums { font-variant-numeric: tabular-nums; }
.tbl { border: 1px solid var(--line-2); border-radius: var(--r-mod); overflow: hidden; background: var(--card); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: var(--text); }
.tbl caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tbl th, .tbl td { padding: 16px; border-top: 1px solid var(--line); text-align: start; vertical-align: top; }
.tbl thead th { border-top: 0; font-size: 13.5px; font-weight: 500; color: var(--faint); background: var(--card); }
.tbl th[scope="row"] { font-weight: 500; width: 22%; }
.tbl td + td, .tbl th + th { border-inline-start: 1px solid var(--line); }
.tbl .hl-last th:last-child, .tbl .hl-last td:last-child { background: var(--accent-tint); }
.tbl .hl-last thead th:last-child { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.tbl .nums { white-space: nowrap; }
.guide-centered .tbl th, .guide-centered .tbl td { text-align: center; }
@media (max-width: 899px) {
  .tbl table, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; border-top: 1px solid var(--line); }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl th[scope="row"] { order: -2; grid-column: 1 / -1; width: auto; padding: 0 0 4px; border: 0; font-size: 16px; }
  .tbl td, .tbl td + td { padding: 10px 12px; border: 0; border-radius: var(--r-ctl); background: var(--paper); }
  .tbl td::before { content: attr(data-col); content: attr(data-col) / ""; display: block; margin-bottom: 2px; font-size: 13px; color: var(--faint); }
  .tbl .hl-last td:last-child { order: -1; grid-column: 1 / -1; background: var(--accent-tint); }
  .tbl .hl-last td:last-child::before { color: var(--accent); }
  .tbl .stack-mobile tbody tr { grid-template-columns: minmax(0, 1fr); }
  .tbl .nums { white-space: normal; }
}

/* Numbered lists (guides, mentors): hairline rows, a mono number, h3 20/500, black text; teal numbers on dark */
.numlist { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; text-align: start; border-top: 1px solid var(--line); }
.numlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.numlist .num { font-family: var(--mono); font-size: 13px; color: var(--faint); padding-top: 4px; font-variant-numeric: tabular-nums; }
.dark .numlist .num { color: var(--teal); }
.numlist h3 { margin: 0 0 4px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; color: var(--text); }
.numlist p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text); }
.dark .numlist p { color: var(--d-body); }

/* Buttons: one primary (48px, radius 12); press = scale .97 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--r-ctl); border: 1px solid transparent; background: var(--accent); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.dark .btn, .btn { color: #FFFFFF; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent-hover); } }

/* Rows with a bold lead, hairlines, no icons */
.list-rows { list-style: none; margin: 0 auto; padding: 0; max-width: var(--col); border-top: 1px solid var(--line); text-align: start; }
.list-rows li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.65; color: var(--text); }
.list-rows b { font-weight: 500; }
/* Short facts on home's dashed grid: 2 columns on phones, 4 on desktop */
.cells { list-style: none; margin: 0 auto; padding: 0; max-width: var(--col-wide); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px dashed var(--line-2); border-inline-start: 1px dashed var(--line-2); }
.cells li { display: grid; gap: 4px; align-content: start; padding: 20px 16px; border-bottom: 1px dashed var(--line-2); border-inline-end: 1px dashed var(--line-2); text-align: center; }
.cells b { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--text); }
.cells span { font-size: 15px; color: var(--text); }
@media (min-width: 900px) { .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Numbered list where the numbers come from the list itself (a bold line and a note per item) */
.numlist.auto { counter-reset: n; }
.numlist.auto li { counter-increment: n; }
.numlist.auto li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-size: 13px; color: var(--faint); padding-top: 4px; }
.dark .numlist.auto li::before { color: var(--teal); }
.numlist.auto li > b { font-size: 18px; font-weight: 500; line-height: 1.4; }
.numlist.auto li > span { font-size: 15px; color: var(--text); }
/* Closing call to action on black: heading, line, button or badges, a quiet note */
.cta { text-align: center; }
.cta .wrap { display: grid; gap: 16px; justify-items: center; }
.cta h2.t { margin: 0 auto; }
.cta .sub { margin: 0 auto; }
.cta .btn { margin-top: 16px; }
.cta-note { font-size: 14px; color: var(--faint); }

/* ---------- stage 4: motion and micro-interactions (HQ research playbook) ---------- */
/* FAQ opens and closes smoothly where the browser can animate <details> (::details-content); elsewhere it snaps */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-close) var(--ease-out), content-visibility var(--dur-close) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; transition-duration: var(--dur-open); }
}
.faq summary { transition: color var(--dur-hover) var(--ease-out); }
/* press: everything you tap gives back the same small scale */
.store-badge { transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-hover) var(--ease-out); }
.store-badge:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--accent); }
  .dark .faq summary:hover { color: var(--teal); }
  .store-badge:hover { opacity: .88; }
  .legal a:hover, .guide-body a:hover, .src-note a:hover, .text-link:hover { text-decoration-thickness: 2px; }
}
/* lower sections render when they come near (no layout jump: the reserved size is remembered once shown) */
body.home #faq { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none !important; }
  .faq summary, .store-badge, .btn, .toc a { transition: none; }
}
html.a11y-still .faq details::details-content { transition: none !important; }

/* ---------- round 3b (HQ critique-pages-r2) ---------- */
/* one rule between sections: a list that ends a section already draws the line */
.sec:has(> .wrap > .list-rows:last-child, > .wrap > .numlist:last-child, > .wrap > .faq:last-child) + .sec:not(.alt):not(.dark) { border-top: 0; }
.alt + .sec, .sec + .alt { border-top: 0; }
/* lists of three short rows read across on desktop */
@media (min-width: 900px) {
  .list-rows.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; max-width: var(--col-wide); border-top: 0; }
  .list-rows.cols3 li { border-bottom: 0; border-top: 1px solid var(--line); }
}
/* the numbered list with the number from the list also takes a bold <strong> lead */
.numlist.auto li > strong { display: block; font-size: 18px; font-weight: 500; line-height: 1.4; }
/* a numbered rail of five on wide screens */
@media (min-width: 1100px) {
  .numlist.rail5 { max-width: var(--col-wide); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; border-top: 0; }
  .numlist.rail5 li { grid-template-columns: minmax(0, 1fr); align-content: start; border-bottom: 0; border-top: 1px solid var(--line); gap: 6px; }
  .numlist.rail5 li::before { grid-row: auto; }
}
/* tables of two or three columns stay at the reading width */
.tbl.narrow { max-width: var(--col); margin-inline: auto; }
/* the meta line sits under the title on every kind of page */
.guide-head .updated { order: 2; }
/* /support: each question stands apart from the previous answer */
.centered .legal h3 { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.centered .legal h2 + h3 { margin-top: 0; padding-top: 0; border-top: 0; }
/* 404: centred at every width */
.p404 .page-head .wrap, .p404 .legal { text-align: center; justify-items: center; }

/* ---------- round 4 (HQ critique-r3) ---------- */
/* guide tables on phones: the home compare's thin rows, the MentVerse cell first in its tint */
@media (max-width: 899px) {
  .tbl tbody tr { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tbl td, .tbl td + td { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: none; border-radius: 0; border-top: 1px solid var(--line); padding: 10px 2px; text-align: end; }
  .tbl td::before { margin: 0; text-align: start; flex: none; max-width: 45%; }
  .tbl .hl-last td:last-child { order: -1; display: block; text-align: start; background: var(--accent-tint); border: 0; border-radius: var(--r-ctl); padding: 10px 12px; margin-bottom: 6px; }
  .guide-centered .tbl td, .guide-centered .tbl th { text-align: start; }
  .guide-centered .tbl td { text-align: end; }
  .guide-centered .tbl .hl-last td:last-child { text-align: start; }
}
/* six short rows in two columns on desktop */
@media (min-width: 900px) {
  .list-rows.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; max-width: var(--col-wide); border-top: 0; }
  .list-rows.cols2 li { border-bottom: 0; border-top: 1px solid var(--line); }
}
/* FAQ: the answer fades as it closes, so no line is cut mid-height */
@supports selector(::details-content) {
  .faq details > p { transition: opacity var(--dur-close) var(--ease-out); }
  .faq details[open] > p { transition-duration: var(--dur-open); }
  .faq details:not([open]) > p { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq details > p { transition: none; } }
html.a11y-still .faq details > p { transition: none; }

/* ---------- round 5 (HQ critique-r4) ---------- */
/* FAQ: the answer also fades in as it opens */
@supports selector(::details-content) {
  @starting-style { .faq details[open] > p { opacity: 0; } }
}
/* 404: a short page that looks meant: a taller head, the display size, a larger line */
.p404 .page-head .wrap { padding-block: clamp(80px, 14vw, 160px) clamp(24px, 4vw, 40px); }
.p404 .page-head h1 { font-size: var(--fs-display); }
.p404 .page-head { border-bottom: 0; }
.p404 .doc { padding-top: 0; }
.p404 .legal { font-size: 18px; max-width: 34em; }
/* terms: a page that opens straight on a numbered h2 (no summary) gets no rule above it, like privacy's summary */
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* FAQ: while an answer closes, it stays inside its item (the focus ring moves inside the question so the clip never cuts it) */
@supports selector(::details-content) {
  .faq details { overflow: clip; }
  .faq summary:focus-visible { outline-offset: -2px; }
}