/* The landing page on gethalona.ro (#1415), drawn from docs/design/landing/.
   Plain CSS for two static pages: no build step, and no script it needs
   (assets/theme.js only adds the header's theme switch, and assets/faq.js
   animates the FAQ both ways where the CSS alone cannot). The tokens are
   the app's (v2's), dark following the device or the switch; the type adds the design's
   hero and section sizes. Every style is in this file, none inline, so the
   page's Content-Security-Policy can refuse inline styles (_headers). */

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 600;
  src: url('fonts/albert-sans-latin-ext-wght-normal.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: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 600;
  src: url('fonts/albert-sans-latin-wght-normal.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 dark;
  --bg: #eceae6;
  --surface: #f6f5f2;
  --surface2: #e2dfd9;
  --line: #d9d5ce;
  --control: #6f7f84;
  --ink: #232a2e;
  --ink2: #4e5a5f;
  --ok: #476651;
  --sand: #928473;
  --mark-leg: var(--sand);
  --shadow: 0 8px 24px rgba(35, 42, 46, 0.16);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: clamp(16px, 4vw, 48px);
}

/* Dark follows the device unless the header's switch chose a theme
   (assets/theme.js sets data-theme on the root). The dark values are written
   twice, once for each way in: keep the two blocks equal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #232a2e;
    --surface: #2c3438;
    --surface2: #353e42;
    --line: #3b4448;
    --control: #7a8b92;
    --ink: #eceae6;
    --ink2: #b8bec0;
    --ok: #8fb59b;
    --sand: #c7b8a6;
    /* No lockup puts dark Sand beside chalk (1.6:1): the reversed mark is
       chalk on slate, its leg the arch's own ink, as the app paints it
       (ADR-0164). */
    --mark-leg: var(--ink);
    /* The app's shadow barely shows on slate, so dark draws a deeper one
       (the product owner, 2026-10-17; ADR-0240 §7). */
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #232a2e;
  --surface: #2c3438;
  --surface2: #353e42;
  --line: #3b4448;
  --control: #7a8b92;
  --ink: #eceae6;
  --ink2: #b8bec0;
  --ok: #8fb59b;
  --sand: #c7b8a6;
  /* No lockup puts dark Sand beside chalk (1.6:1): the reversed mark is
     chalk on slate, its leg the arch's own ink, as the app paints it
     (ADR-0164). */
  --mark-leg: var(--ink);
  /* The app's shadow barely shows on slate, so dark draws a deeper one
     (the product owner, 2026-10-17; ADR-0240 §7). */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* ---- Base ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Albert Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

a,
summary,
button {
  border-radius: 4px;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* A pseudo-element is not matched by the bare star, so the FAQ's answer box
   is named apart: in its own rule, because a browser that does not know
   ::details-content drops every rule naming it. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-property: opacity !important;
  }

  *::details-content {
    transition-property: opacity, content-visibility !important;
  }
}

/* The page never scrolls sideways from 360px up. */
.page {
  min-height: 100vh;
  overflow-x: clip;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-18 {
  width: 18px;
  height: 18px;
}

.icon-16 {
  width: 16px;
  height: 16px;
}

.icon-14 {
  width: 14px;
  height: 14px;
}

/* Halona's mark (docs/design/v2/assets/logo/mark-full.svg), drawn inline so
   its arch follows the theme. */
.mark {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.mark-arch {
  stroke: var(--ink);
}

.mark-leg {
  stroke: var(--mark-leg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wordmark {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
}

.muted {
  color: var(--ink2);
  text-wrap: pretty;
}

/* A Romanian word with a hyphen („i-ar", „După-amiaza") kept on one line: the
   hyphen is otherwise a break. The app does it with a word joiner after the
   hyphen (keepHyphenatedWordsWhole); here the text a search engine reads and a
   reader copies stays as written. */
.nowrap {
  white-space: nowrap;
}

.small {
  font-size: 13px;
  color: var(--ink2);
}

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 160ms var(--ease);
}

.button:hover {
  background: var(--ink2);
  color: var(--bg);
}

/* ---- Header ---- */

.site-header {
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home {
  min-height: 48px;
  padding-right: 4px;
  text-decoration: none;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink2);
  text-decoration: none;
}

.lang-link:hover {
  color: var(--ink);
}

.sign-in {
  display: flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}

.sign-in > span {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--control);
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- Sections ---- */

.section {
  padding: clamp(56px, 8vw, 96px) var(--gutter);
}

.band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}

.heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.heading-free {
  max-width: none;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kicker::before {
  content: '';
  width: 24px;
  border-top: 2px solid var(--sand);
}

.section-title {
  font-size: clamp(26px, 20px + 1.2vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.intro {
  font-size: 16px;
  color: var(--ink2);
  text-wrap: pretty;
}

/* ---- Hero ---- */

.hero {
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 8vw, 96px);
}

.hero-text {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-title {
  font-size: clamp(34px, 22px + 2.6vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lead {
  max-width: 540px;
  font-size: clamp(16px, 14.5px + 0.3vw, 18px);
  color: var(--ink2);
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}

.launch {
  max-width: 520px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.launch .dot {
  margin-top: 7px;
}

.launch strong {
  font-weight: 600;
}

.hero-mock {
  flex: 1 1 360px;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}

/* ---- Mockups: decoration, every one aria-hidden ---- */

.m-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}

.m-label-gap {
  padding-top: 2px;
}

.m-label-gap-4 {
  padding-top: 4px;
}

.m-title {
  font-size: 12px;
  font-weight: 600;
}

.m-strong {
  font-weight: 600;
}

.m-muted {
  color: var(--ink2);
}

.m-ok {
  color: var(--ok);
  font-weight: 600;
}

.m-ellipsis {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.m-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.m-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface2);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 600;
}

.m-avatar-28 {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.m-ring {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--control);
}

.m-dot-6 {
  width: 6px;
  height: 6px;
}

.m-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.m-chip {
  padding: 2px 6px;
  background: var(--surface2);
  border-radius: 4px;
}

.m-option {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--control);
  border-radius: 4px;
}

.m-on {
  border: 1.5px solid var(--ink);
  font-weight: 600;
}

.m-button {
  display: grid;
  place-items: center;
  height: 30px;
  margin-top: 2px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  font-weight: 600;
}

.m-none {
  text-align: center;
  font-size: 10px;
  color: var(--ink2);
}

/* The client's phone in the hero. */
.phone {
  width: min(296px, 100%);
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 36px;
  box-shadow: var(--shadow);
}

.phone-screen {
  background: var(--bg);
  border-radius: 27px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.35;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 6px;
  background: var(--surface);
  font-size: 10px;
  font-weight: 600;
}

.phone-battery {
  width: 20px;
  height: 9px;
  border: 1px solid var(--ink);
  border-radius: 2px;
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.phone-header .m-muted {
  font-size: 10px;
}

.phone-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.phone-day {
  align-self: center;
}

.bubble-mine {
  align-self: flex-end;
  width: 86%;
}

.bubble-theirs {
  align-self: flex-start;
  width: 92%;
}

.phone-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.phone-field {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--control);
  border-radius: 4px;
  color: var(--ink2);
}

/* The salon's calendar beside the phone, from 600px. */
.hero-calendar {
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 224px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 599.98px) {
  .hero-calendar {
    display: none;
  }
}

.calendar-grid {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 6px 8px;
  align-items: start;
}

.calendar-time {
  color: var(--ink2);
  padding-top: 6px;
}

.calendar-time-new {
  padding-top: 7px;
}

.calendar-busy {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  background: var(--surface2);
  border-radius: 4px;
}

.calendar-new {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
}

.m-named {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* ---- How it works ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(200px, calc((100% - 48px) / 3))), 1fr)
  );
  gap: 40px 24px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.step-stage {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.step-fit {
  width: 100%;
  max-width: 236px;
}

.step-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 10px;
  line-height: 1.3;
}

.m-panel-title {
  padding-bottom: 2px;
}

.m-panel .m-option {
  height: 28px;
}

.m-panel .m-button {
  height: 28px;
}

.m-panel .m-none {
  font-size: inherit;
}

.m-send {
  margin-top: 6px;
}

.m-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--control);
  border-radius: 4px;
}

.m-field > :last-child {
  flex: none;
  color: var(--ink2);
}

.m-pair {
  display: flex;
  gap: 4px;
}

.m-pair > * {
  flex: 1;
  display: grid;
  place-items: center;
  height: 26px;
  border: 1px solid var(--control);
  border-radius: 4px;
}

.m-pair > :last-child {
  flex: 1.5;
}

.m-pair > .m-on {
  border: 1.5px solid var(--ink);
}

.m-days,
.m-parts {
  display: grid;
  gap: 3px;
  text-align: center;
}

.m-days {
  grid-template-columns: repeat(7, 1fr);
}

.m-parts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  white-space: nowrap;
}

.m-days > *,
.m-parts > * {
  padding: 4px 0;
  border: 1px solid var(--control);
  border-radius: 4px;
}

.m-parts > * {
  padding-inline: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-days > .m-on,
.m-parts > .m-on {
  padding-block: 3.5px;
  border: 1.5px solid var(--ink);
}

.slot-grid {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 8px;
  align-items: center;
}

.slot-busy {
  padding: 5px 8px;
  background: var(--surface2);
  border-radius: 4px;
  color: var(--ink2);
}

.slot-new {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4.5px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-weight: 600;
}

.m-confirmed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.3;
}

.m-confirmed .icon {
  stroke: var(--ok);
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.step-title > span {
  color: var(--ink2);
}

/* ---- For your salon ---- */

.features {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(260px, calc((100% - 64px) / 3))), 1fr)
  );
  gap: 40px 32px;
}

.feature,
.start-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.feature .feature-title {
  margin-top: 8px;
}

/* ---- Your team ---- */

.team-text {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.team-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.team-points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.team-points .promise {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.promise > span {
  font-size: 16px;
  font-weight: 500;
  text-wrap: pretty;
}

.team-mock {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.team-sheet {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 10px;
  line-height: 1.3;
}

.team-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.team-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.team-busy {
  padding: 6px;
  background: var(--surface2);
  border-radius: 4px;
}

.team-new {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-weight: 600;
}

.team-threads {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-thread {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.team-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px dashed var(--control);
  border-radius: 8px;
  color: var(--ink2);
}

/* ---- Launch offer ---- */

.timeline {
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeline > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-now {
  padding: 24px 24px 0 0;
  border-top: 2px solid var(--ink);
}

.timeline-after {
  padding: 24px 0 0 16px;
  border-top: 2px solid var(--sand);
}

.timeline-mark {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.timeline-now .timeline-mark {
  left: 0;
  background: var(--ink);
}

.timeline-after .timeline-mark {
  left: -4px;
  background: var(--sand);
}

.timeline-after .timeline-end {
  left: auto;
  right: 0;
  background: var(--bg);
  border: 2px solid var(--sand);
}

.timeline-value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

/* ---- Getting started ---- */

.start-steps {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(220px, calc((100% - 64px) / 3))), 1fr)
  );
  gap: 32px;
}

.start-number {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink2);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-top: 8px;
}

.ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  color: var(--ink2);
}

/* ---- Questions ---- */

.faq {
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(32px, 5vw, 64px);
}

.faq .heading {
  flex: 1 1 280px;
}

.faq-list {
  flex: 2 1 520px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary .icon {
  transition: transform 240ms var(--ease);
}

.faq-list details[open] > summary .icon {
  transform: rotate(180deg);
}

/* An answer opens and closes by its height and fades, at the sheet's 240ms.
   Where ::details-content is missing it simply appears; under reduced motion
   only the fade is left (the base layer's rule). The answer's space is
   padding, not margin, so the height it animates to is the whole of it. */
.faq-list {
  interpolate-size: allow-keywords;
}

.faq-list details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 240ms var(--ease),
    opacity 240ms var(--ease),
    content-visibility 240ms allow-discrete;
}

.faq-list details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.faq-list details p {
  margin: 0;
  padding-bottom: 20px;
  max-width: 640px;
  color: var(--ink2);
  text-wrap: pretty;
}

/* Safari and Firefox have ::details-content but no interpolate-size, so a
   height going to auto would jump there. They animate a grid row going from
   0fr to 1fr instead; Safari only when an answer opens, since closing, it
   hides the answer at once. A row at 0fr still holds its item's padding, so the 20px under
   the answer is a block inside it instead, which the row clips with the
   text. */
@supports not (interpolate-size: allow-keywords) {
  .faq-list details::details-content {
    display: grid;
    grid-template-rows: 0fr;
    block-size: auto;
    transition:
      grid-template-rows 240ms var(--ease),
      opacity 240ms var(--ease),
      content-visibility 240ms allow-discrete;
  }

  .faq-list details[open]::details-content {
    grid-template-rows: 1fr;
  }

  .faq-list details p {
    min-height: 0;
    padding-bottom: 0;
  }

  .faq-list details p::after {
    content: '';
    display: block;
    height: 20px;
  }
}

/* With the FAQ's script (assets/faq.js) the height moves on the answer's
   details element, so the answer box takes its size at once. The details
   clips while it moves, and one folding turns its chevron back at the start
   rather than when the fold ends. */
.faq-list.faq-scripted details::details-content {
  transition: none;
}

.faq-list details.faq-moving {
  overflow: clip;
}

.faq-list details.faq-closing > summary .icon {
  transform: none;
}

/* ---- Client line and footer ---- */

.client-line {
  padding: 0 var(--gutter);
}

.client-line p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  min-height: 64px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink2);
}

.site-footer {
  padding: clamp(32px, 4vw, 48px) var(--gutter) 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.site-footer > .wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}

.footer-brand {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand p {
  max-width: 320px;
  color: var(--ink2);
}

.footer-nav {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
}

.footer-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink2);
}

/* The header's theme switch (assets/theme.js): hidden until the script shows
   it, so a page without the script has no dead button. Its icon is the theme a
   tap moves to: the moon in light, the sun in dark. */
.theme-switch {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink2);
  font: inherit;
  cursor: pointer;
}

.theme-switch[hidden] {
  display: none;
}

.theme-switch:hover {
  color: var(--ink);
}

.theme-sun {
  display: none;
}

:root[data-theme='dark'] .theme-sun {
  display: block;
}

:root[data-theme='dark'] .theme-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-sun {
    display: block;
  }

  :root:not([data-theme='light']) .theme-moon {
    display: none;
  }
}

/* ---- Not found (404.html, en/404.html): the design draws none; built from
   the hero's type and the getting-started contact line. ---- */

.page-missing {
  display: flex;
  flex-direction: column;
}

.missing {
  flex: 1;
  padding: clamp(56px, 10vw, 128px) var(--gutter);
}

.missing .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.missing .hero-title {
  max-width: 720px;
}