/* Andama — physio site (andama.io)
   Light only, in the workspace's style (PHYSIO-SITE.md §0 В4, #113): blue and violet accents,
   gold only on the main buttons. Colours, type, spacing and radii come from assets/tokens.css only (prefix --an-).
   See CLAUDE.md "Правило для всех агентов, рисующих UI". */

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

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

body {
  margin: 0;
  background: var(--an-bg-page);
  color: var(--an-text-primary);
  font-family: var(--an-fontFamily-display);
  font-size: var(--an-fontSize-bodyLg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--an-action-default); text-decoration: none; }
a:hover { color: var(--an-action-hover); }

:focus-visible { outline: 2px solid var(--an-focus-ring); outline-offset: 3px; border-radius: var(--an-radius-sm); }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--an-spacing-6); }
@media (min-width: 640px) { .wrap { padding-inline: var(--an-spacing-9); } }

h1, h2, h3 { margin: 0; letter-spacing: var(--an-letterSpacing-tight); font-weight: var(--an-fontWeight-semibold); }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; }
h3 { font-size: var(--an-fontSize-h3); line-height: 1.25; }
p { margin: 0; }

.eyebrow {
  font-size: var(--an-fontSize-label);
  font-weight: var(--an-fontWeight-semibold);
  letter-spacing: var(--an-letterSpacing-eyebrow);
  text-transform: uppercase;
  color: var(--an-text-muted);
  margin: 0 0 var(--an-spacing-6);
}
.rule {
  width: var(--an-sectionRuleBar-width);
  height: var(--an-sectionRuleBar-height);
  border-radius: var(--an-sectionRuleBar-radius);
  background: var(--an-gradient-signatureCool-css);
  margin: 0 0 var(--an-spacing-8);
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--an-text-secondary); max-width: 52ch; }
.grad-text { background: var(--an-gradient-emphasisTextLight-css); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--an-text-muted); }
.fine { font-size: var(--an-fontSize-caption); color: var(--an-text-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--an-spacing-2);
  font: inherit;
  font-size: var(--an-fontSize-body);
  font-weight: var(--an-fontWeight-semibold);
  border: 0;
  cursor: pointer;
  border-radius: var(--an-button-primary-radius);
  padding: var(--an-button-primary-paddingY) calc(var(--an-button-primary-paddingX) + 6px);
  color: var(--an-button-primary-fg-default);
  background: var(--an-button-adminPrimary-bg-default); /* the workspace's main button */
  white-space: nowrap;
  transition: transform var(--an-motion-duration-fast) var(--an-motion-easing-standard-web);
}
.btn:hover { color: var(--an-button-primary-fg-default); transform: translateY(-1px); }
.btn:active { opacity: 0.92; transform: none; }
.btn--sm { padding: var(--an-spacing-3) var(--an-spacing-6); font-size: var(--an-fontSize-bodySm); }
.btn--ghost {
  background: var(--an-bg-card);
  color: var(--an-text-primary);
  border: var(--an-borderWidth-hairline) solid var(--an-border-strong);
  border-radius: var(--an-button-ghost-radius);
}
.btn--ghost:hover { color: var(--an-text-primary); }
.btn--ghost:active { background: var(--an-bg-sunken); }
.btn[disabled] { background: var(--an-bg-sunken); color: var(--an-action-disabled-fg); cursor: default; transform: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--an-bg-card);
  border-bottom: var(--an-borderWidth-hairline) solid var(--an-border-subtle);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--an-spacing-8); min-height: 64px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
[data-theme="dark"] .logo-light { display: none; }

.nav { display: flex; align-items: center; gap: var(--an-spacing-8); margin-right: auto; }
.nav > a, .nav > span { font-size: var(--an-fontSize-bodySm); font-weight: var(--an-fontWeight-medium); color: var(--an-text-secondary); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--an-text-primary); }
.soon {
  font-size: var(--an-fontSize-micro);
  font-weight: var(--an-fontWeight-semibold);
  letter-spacing: var(--an-letterSpacing-wide);
  text-transform: uppercase;
  color: var(--an-text-muted);
  background: var(--an-bg-sunken);
  border-radius: var(--an-radius-pill);
  padding: 2px var(--an-spacing-2);
  vertical-align: 2px;
}
.nav .is-soon { color: var(--an-text-muted); cursor: default; }
.header-cta { display: flex; align-items: center; gap: var(--an-spacing-6); margin-left: auto; }
.header-cta .login { font-size: var(--an-fontSize-bodySm); font-weight: var(--an-fontWeight-medium); color: var(--an-text-primary); white-space: nowrap; }
/* Phones: keep Pricing in the header, drop the not-yet-ready items. */
@media (max-width: 819px) {
  .site-header .wrap { gap: var(--an-spacing-4); }
  .nav { margin-right: 0; }
  .nav .is-soon { display: none; }
  .header-cta { gap: var(--an-spacing-4); }
  .brand img { height: 26px; }
}
/* The narrowest phones can't fit Pricing too — it stays in the footer and on the home hero. */
@media (max-width: 379px) {
  .nav { display: none; }
}

/* ---------- page sections ---------- */
.page-head { padding: clamp(48px, 9vw, 104px) 0 clamp(32px, 5vw, 56px); }
.page-head .lead { margin-top: var(--an-spacing-8); }
.lead--wide { max-width: 82ch; }
.section { padding: clamp(40px, 7vw, 80px) 0; }
.section + .section { border-top: var(--an-borderWidth-hairline) solid var(--an-border-subtle); }
.section-head { margin-bottom: var(--an-spacing-10); max-width: 60ch; }
.section-head p { margin-top: var(--an-spacing-4); color: var(--an-text-secondary); }

.card {
  background: var(--an-card-bg);
  border: var(--an-borderWidth-hairline) solid var(--an-card-border);
  border-radius: var(--an-radius-2xl);
  padding: var(--an-spacing-9);
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--an-spacing-4); align-items: center; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--an-spacing-6); }
@media (min-width: 820px) { .points { grid-template-columns: repeat(3, 1fr); } }
.points .n { font-size: var(--an-fontSize-label); font-weight: var(--an-fontWeight-bold); color: var(--an-depth-default); letter-spacing: var(--an-letterSpacing-wide); }
.points h3 { margin: var(--an-spacing-4) 0 var(--an-spacing-3); }
.points p { color: var(--an-text-secondary); font-size: var(--an-fontSize-body); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: var(--an-spacing-6); }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { display: flex; flex-direction: column; gap: var(--an-spacing-6); }
.plan--featured { border-color: var(--an-action-default); border-width: var(--an-borderWidth-default); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: var(--an-spacing-4); }
.plan-tag {
  font-size: var(--an-fontSize-micro);
  font-weight: var(--an-fontWeight-semibold);
  letter-spacing: var(--an-letterSpacing-wide);
  text-transform: uppercase;
  color: var(--an-action-default);
  background: var(--an-action-subtle-bg);
  border-radius: var(--an-radius-pill);
  padding: var(--an-spacing-1) var(--an-spacing-3);
}
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--an-spacing-2); }
.price .amount { font-size: var(--an-fontSize-metric); font-weight: var(--an-fontWeight-semibold); letter-spacing: var(--an-letterSpacing-tight); line-height: 1; }
.price .per { color: var(--an-text-secondary); font-size: var(--an-fontSize-body); }
.plan-patients { font-size: var(--an-fontSize-body); color: var(--an-text-primary); font-weight: var(--an-fontWeight-medium); }
.plan-for { font-size: var(--an-fontSize-body); color: var(--an-text-secondary); }
.features { list-style: none; margin: 0; padding: var(--an-spacing-6) 0 0; border-top: var(--an-borderWidth-hairline) solid var(--an-divider); display: grid; gap: var(--an-spacing-3); font-size: var(--an-fontSize-body); }
.features li { display: flex; gap: var(--an-spacing-3); }
.features li::before { content: "✓"; color: var(--an-success-fg); font-weight: var(--an-fontWeight-bold); flex-shrink: 0; }
.features .inherit { color: var(--an-text-secondary); font-weight: var(--an-fontWeight-medium); }
.features .inherit::before { content: "+"; color: var(--an-text-muted); }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: var(--an-spacing-8); text-align: center; }

/* Plan badges: weight grows with the plan — blue tint → cool gradient → solid ink. */
.tier {
  display: inline-block;
  padding: var(--an-spacing-1) var(--an-spacing-4);
  border-radius: var(--an-radius-pill);
  font-weight: var(--an-fontWeight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}
/* Arriving on /pricing#plan-… marks that card. */
.plan.is-picked { border-color: var(--an-action-default); border-width: var(--an-borderWidth-default); }
.tier--essentials { background: var(--an-info-subtle-bg); color: var(--an-info-fg); }
.tier--complete { background: var(--an-gradient-signatureCool-css); color: var(--an-button-primary-fg-default); }
.tier--clinic { background: var(--an-text-primary); color: var(--an-text-inverse); }

.link-btn {
  font: inherit; color: var(--an-action-default); background: none; border: 0; padding: 0;
  cursor: pointer; font-weight: var(--an-fontWeight-medium); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link-btn:hover { color: var(--an-action-hover); }
.link-btn:focus-visible { outline: 2px solid var(--an-focus-ring); outline-offset: 2px; border-radius: var(--an-radius-sm); }

/* "How the €2 works" dialog */
.sheet {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--an-spacing-9);
  border: var(--an-borderWidth-hairline) solid var(--an-divider);
  border-radius: var(--an-radius-xl);
  background: var(--an-bg-page);
  color: var(--an-text-primary);
}
.sheet::backdrop { background: var(--an-scrim); }
@media (max-width: 560px) { .sheet { padding: var(--an-spacing-6); } .sheet-close { top: var(--an-spacing-4); right: var(--an-spacing-4); } }
.sheet h2:focus { outline: none; }
.sheet h2 { padding-right: var(--an-spacing-9); }
.sheet-close {
  position: absolute; top: var(--an-spacing-6); right: var(--an-spacing-6);
  width: 36px; height: 36px; border-radius: var(--an-radius-pill);
  border: 0; background: var(--an-bg-sunken); color: var(--an-text-secondary);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.sheet-close:hover { color: var(--an-text-primary); }
.formula { margin: var(--an-spacing-4) 0 var(--an-spacing-6); font-size: var(--an-fontSize-h3); font-weight: var(--an-fontWeight-semibold); line-height: 1.35; }
.tier-list { list-style: none; margin: 0 0 var(--an-spacing-9); padding: 0; display: flex; flex-wrap: wrap; gap: var(--an-spacing-3) var(--an-spacing-6); color: var(--an-text-secondary); font-size: var(--an-fontSize-body); }
.tier-list li { display: flex; align-items: center; gap: var(--an-spacing-2); }
.tier-list .tier { font-size: var(--an-fontSize-label); }
.sheet .how-rules { margin-bottom: var(--an-spacing-9); }
.examples { display: grid; gap: var(--an-spacing-6); margin-bottom: var(--an-spacing-4); }
@media (min-width: 640px) { .examples { grid-template-columns: 1fr 1fr; align-items: start; } }
.example { background: var(--an-bg-card); border: var(--an-borderWidth-hairline) solid var(--an-divider); border-radius: var(--an-radius-lg); padding: var(--an-spacing-6); }
.example h3 { display: flex; align-items: center; gap: var(--an-spacing-3); font-size: var(--an-fontSize-body); font-weight: var(--an-fontWeight-medium); color: var(--an-text-secondary); }
.example .tier { font-size: var(--an-fontSize-label); }
.how-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--an-spacing-6); }
.how-rules strong { display: block; margin-bottom: var(--an-spacing-1); }
.how-rules p { color: var(--an-text-secondary); font-size: var(--an-fontSize-body); }
.example h3 { margin-bottom: var(--an-spacing-4); }
.calc { width: 100%; border-collapse: collapse; font-size: var(--an-fontSize-body); font-variant-numeric: tabular-nums; }
.calc td { padding: var(--an-spacing-2) 0; }
.calc td:last-child { text-align: right; white-space: nowrap; }
.calc tr.total td { border-top: var(--an-borderWidth-hairline) solid var(--an-divider); padding-top: var(--an-spacing-4); font-weight: var(--an-fontWeight-semibold); }
.calc .sub { color: var(--an-text-secondary); }

/* Pricing banner: a light card with the cool gradient glowing behind. */
.banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--an-spacing-8);
  align-items: center;
  padding: clamp(32px, 6vw, 64px);
  border-radius: var(--an-radius-2xl);
  border: var(--an-borderWidth-hairline) solid var(--an-divider);
  background: var(--an-bg-card);
  color: var(--an-text-primary);
}
.banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -10% -60% 30%;
  height: 120%;
  background: var(--an-gradient-signatureCool-css);
  filter: blur(90px);
  opacity: .35;
}
@media (min-width: 760px) { .banner { grid-template-columns: auto 1fr; gap: var(--an-spacing-10); } }
.banner-figure { display: flex; flex-direction: column; }
.banner-num {
  font-size: calc(var(--an-fontSize-display) * 2);
  font-weight: var(--an-fontWeight-semibold);
  letter-spacing: var(--an-letterSpacing-tight);
  line-height: 1;
  background: var(--an-gradient-emphasisTextLight-css);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.banner-cap { margin-top: var(--an-spacing-3); font-size: var(--an-fontSize-label); font-weight: var(--an-fontWeight-semibold); letter-spacing: var(--an-letterSpacing-wide); text-transform: uppercase; color: var(--an-text-secondary); }
.banner h2 { margin-bottom: var(--an-spacing-4); }
.banner p { color: var(--an-text-secondary); font-size: var(--an-fontSize-bodyLg); max-width: 52ch; }

.callout {
  background: var(--an-action-subtle-bg);
  border-radius: var(--an-radius-xl);
  padding: var(--an-spacing-9);
  font-size: var(--an-fontSize-bodyLg);
}
.callout strong { display: block; font-size: var(--an-fontSize-h3); margin-bottom: var(--an-spacing-2); letter-spacing: var(--an-letterSpacing-tight); }
.callout p { color: var(--an-text-secondary); }

.faq { max-width: 760px; }
.faq details { border-bottom: var(--an-borderWidth-hairline) solid var(--an-divider); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--an-spacing-7) var(--an-spacing-9) var(--an-spacing-7) 0;
  font-weight: var(--an-fontWeight-semibold);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: var(--an-spacing-7); color: var(--an-text-muted); font-weight: var(--an-fontWeight-regular); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 var(--an-spacing-7); color: var(--an-text-secondary); font-size: var(--an-fontSize-body); }

.closing { text-align: center; }
.closing h2 { margin-bottom: var(--an-spacing-6); text-wrap: balance; }
.closing p { color: var(--an-text-secondary); margin: 0 auto var(--an-spacing-9); max-width: 50ch; }
.closing .cta-row { justify-content: center; }
/* Closing band: the cool gradient, no gold (#113). White headline; white button so it reads on the band. */
.closing--bold { background: var(--an-gradient-signatureCool-css); border-top: 0; }
.section + .closing--bold { border-top: 0; }
.closing--bold h2 { color: var(--an-sectionBlock-bold-fg-emphasis); }
.closing--bold p { color: var(--an-sectionBlock-bold-fg-emphasis); text-wrap: balance; }
.closing--bold :focus-visible { outline-color: var(--an-sectionBlock-bold-fg-emphasis); }
/* Home closing (Ksenia, 2026-11-04): headline and buttons left, what's free right, right on the band. */
.closing--split { text-align: left; }
.closing--split > .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.closing--split .cta-row { justify-content: flex-start; }
.closing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--an-spacing-4);
  color: var(--an-sectionBlock-bold-fg-emphasis); font-weight: var(--an-fontWeight-medium); }
.closing-list li { display: flex; gap: var(--an-spacing-3); align-items: flex-start; }
.closing-list li::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: var(--an-spacing-9); height: var(--an-spacing-9);
  border-radius: var(--an-radius-sm);
  border: var(--an-borderWidth-hairline) solid var(--an-sectionBlock-bold-fg-soft);
  background: var(--an-sectionBlock-bold-numeratorChip-tag-bg);
  color: var(--an-sectionBlock-bold-fg-emphasis);
  font-size: var(--an-fontSize-caption); line-height: 1;
}
@media (max-width: 760px) { .closing--split > .wrap { grid-template-columns: 1fr; } }
/* When the gradient closes the page, it meets the footer with no white strip between. */
main:has(> .closing--bold:last-child) ~ .site-footer { margin-top: 0; border-top: 0; }
/* A solid light button, so it doesn't melt into the gradient (Ksenia, 2026-11-04). */
.closing--bold .btn { background: var(--an-sectionBlock-bold-fg-emphasis); color: var(--an-sectionBlock-bold-fg); }
.closing--bold .btn:hover { color: var(--an-sectionBlock-bold-fg); opacity: 0.92; }
.closing--bold .btn--ghost { background: transparent; color: var(--an-sectionBlock-bold-fg-emphasis); border-color: var(--an-sectionBlock-bold-fg-soft); }
.closing--bold .btn--ghost:hover { color: var(--an-sectionBlock-bold-fg-emphasis); }

/* ---------- a physio's own voice (Antonis, #61) ----------
   Andama speaks as "I" across the site, so a physio's words always sit in this frame —
   photo, name, quote marks — and never read as Andama's. */
.voice {
  margin: 0;
  display: grid;
  gap: var(--an-spacing-8);
  align-items: start;
  background: var(--an-card-bg);
  border: var(--an-borderWidth-hairline) solid var(--an-card-border);
  border-radius: var(--an-radius-2xl);
  padding: clamp(24px, 5vw, 48px);
}
/* figcaption has to stay the figure's last child, so the photo spans the rows on wide screens. */
@media (min-width: 760px) {
  .voice { grid-template-columns: auto 1fr; column-gap: var(--an-spacing-10); row-gap: 0; }
  .voice > .voice-photo { grid-row: 1 / span 2; }
}
.voice-photo {
  width: 112px; height: 112px;
  border-radius: var(--an-radius-pill);
  object-fit: cover; object-position: 50% 22%;
}
.voice blockquote { margin: 0; position: relative; }
.voice blockquote::before {
  content: "\201C";
  display: block;
  font-size: calc(var(--an-fontSize-display) * 1.6);
  line-height: .7;
  height: .45em;
  font-weight: var(--an-fontWeight-semibold);
  background: var(--an-gradient-emphasisTextLight-css);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.voice blockquote p {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: var(--an-letterSpacing-tight);
  max-width: 58ch;
}
.voice figcaption { margin-top: var(--an-spacing-6); font-size: var(--an-fontSize-body); }
.voice figcaption strong { display: block; font-weight: var(--an-fontWeight-semibold); }
.voice figcaption > span:not(.cta-row) { color: var(--an-text-secondary); }
.voice .cta-row { display: flex; margin-top: var(--an-spacing-8); }


/* ---------- /why — Antonis's letter ---------- */
/* One centred column, like a letter: photo, title and signature line centred; the text itself
   left-aligned for reading, in the same 680px column so every edge lines up. */
.letter-head { max-width: 680px; margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.letter-head .voice-photo { width: 120px; height: 120px; margin-bottom: var(--an-spacing-8); }
.letter-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); text-wrap: balance; }
.letter-head .lead { margin-top: var(--an-spacing-6); text-wrap: balance; }
.letter-note { margin: var(--an-spacing-6) auto 0; max-width: 56ch; text-align: center; }
.letter { max-width: 680px; margin-inline: auto; display: grid; gap: clamp(40px, 6vw, 64px); }
.letter-part .n { font-size: var(--an-fontSize-label); font-weight: var(--an-fontWeight-bold); color: var(--an-depth-default); letter-spacing: var(--an-letterSpacing-wide); }
.letter-part h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: var(--an-spacing-3) 0 var(--an-spacing-6); }
.letter-part p { color: var(--an-text-secondary); }
.letter-part p + p { margin-top: var(--an-spacing-6); }
.letter-part .said { color: var(--an-text-primary); font-style: italic; }
.letter-sign { border-top: var(--an-borderWidth-hairline) solid var(--an-divider); padding-top: var(--an-spacing-9); display: flex; align-items: center; gap: var(--an-spacing-6); }
.letter-sign .voice-photo { width: 56px; height: 56px; }
.letter-sign p { color: var(--an-text-secondary); font-size: var(--an-fontSize-body); }
.letter-sign strong { display: block; color: var(--an-text-primary); font-size: var(--an-fontSize-bodyLg); }

/* ---------- laptop frame around real admin screenshots (#63) ----------
   Dark bezel on a light page (ink), a slightly lifted one inside dark sections. */
.laptop { margin: 0; width: 100%; padding-inline: 5%; }
.laptop-screen {
  position: relative;
  padding: clamp(6px, 1.1vw, 14px);
  border-radius: var(--an-radius-xl) var(--an-radius-xl) var(--an-radius-sm) var(--an-radius-sm);
  background: var(--an-text-primary);
  border: var(--an-borderWidth-hairline) solid var(--an-border-strong);
}
[data-theme="dark"] .laptop-screen { background: var(--an-bg-sunken); }
.laptop-screen img {
  width: 100%; height: auto;
  border-radius: var(--an-radius-sm);
  background: var(--an-bg-card);
}
.laptop-base {
  height: clamp(8px, 1.2vw, 16px);
  margin: 0 -4%;
  border-radius: 0 0 var(--an-radius-lg) var(--an-radius-lg);
  background: var(--an-border-strong);
  position: relative;
}
.laptop-base::after {
  content: "";
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 16%; height: 40%;
  border-radius: 0 0 var(--an-radius-md) var(--an-radius-md);
  background: var(--an-bg-sunken);
}

/* Home hero, like the workspace page: copy left, laptop right (under the copy on a phone), glow behind. */
.hero-show {
  position: relative; overflow: hidden;
  background: var(--an-bg-canvas);
  padding: clamp(48px, 7vw, 96px) 0;
  border-bottom: var(--an-borderWidth-hairline) solid var(--an-border-subtle);
}
.hero-show .wrap { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) { .hero-show .wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.hero-show .hero-copy { max-width: 560px; }
.hero-show .eyebrow { color: var(--an-depth-default); }
.hero-show h1 { max-width: none; }
/* "works" in the headline — a cool-gradient stroke under the word. */
.mark-under {
  background: var(--an-gradient-signatureCool-css) no-repeat left bottom / 100% 0.09em;
  padding-bottom: 0.06em;
}
/* Under the headline: one text style for both lines — the promise in full ink, how it works muted. */
.hero-show .lead { margin: var(--an-spacing-8) 0 var(--an-spacing-10); max-width: 50ch; text-wrap: balance; }
.hero-show .lead strong { display: block; color: var(--an-text-primary); font-weight: var(--an-fontWeight-regular); margin-bottom: var(--an-spacing-2); }
.hero-show .cta-row { gap: var(--an-spacing-8); }
.hero-link {
  color: var(--an-text-primary);
  font-weight: var(--an-fontWeight-semibold);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.hero-link:hover { color: var(--an-text-primary); text-decoration-thickness: 2px; }
.laptop--hero { position: relative; isolation: isolate; padding-inline: 0; }
.laptop--hero::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 10% 10% -6% 10%;
  background: var(--an-gradient-signatureCool-css);
  filter: blur(80px);
  opacity: .32;
}

/* "Your day in Andama": the workspace's own page colour. */
.day { background: var(--an-bg-canvas); }

/* "Your day in Andama": tabs on top, then copy + laptop side by side. */
.day-tabs {
  display: flex; gap: var(--an-spacing-2);
  overflow-x: auto; scrollbar-width: none;
  margin: 0 0 var(--an-spacing-10);
  padding: var(--an-spacing-2); /* room for the focus ring: overflow clips it otherwise */
  width: max-content; max-width: 100%;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tabs [role="tab"] {
  font: inherit; font-size: var(--an-fontSize-body); font-weight: var(--an-fontWeight-semibold);
  color: var(--an-text-primary);
  background: none; border: var(--an-borderWidth-hairline) solid var(--an-border-strong); cursor: pointer; white-space: nowrap;
  padding: var(--an-spacing-3) var(--an-spacing-6);
  border-radius: var(--an-radius-pill);
}
.day-tabs [role="tab"]:hover { border-color: var(--an-border-focus); }
@media (max-width: 479px) { .day-tabs [role="tab"] { padding: var(--an-spacing-3) var(--an-spacing-4); font-size: var(--an-fontSize-bodySm); } }
.day-tabs [role="tab"][aria-selected="true"] { background: var(--an-gradient-signatureCool-css); border-color: transparent; color: var(--an-sectionBlock-bold-fg-emphasis); }
/* The tabs must read as something to click (Ksenia, 2026-11-04): a hint above, "Next" below. */
.day-hint { text-align: center; margin: 0; font-size: var(--an-fontSize-bodySm); color: var(--an-text-secondary); }
.day-next { display: block; margin: var(--an-spacing-9) auto 0; font: inherit; font-weight: var(--an-fontWeight-semibold);
  color: var(--an-text-primary); background: none; cursor: pointer;
  border: var(--an-borderWidth-hairline) solid var(--an-border-strong); border-radius: var(--an-radius-pill);
  padding: var(--an-spacing-3) var(--an-spacing-6); }
.day-next:hover { border-color: var(--an-border-focus); }
.scene[role="tabpanel"]:focus-visible { outline-offset: 8px; }
.scene { display: grid; gap: var(--an-spacing-9); align-items: center; }
.scene + .scene { margin-top: clamp(48px, 7vw, 88px); }
.day-js .scene + .scene { margin-top: 0; }
/* Copy above, centred; laptop full width under it — the screens stay big enough to read. */
.scene .laptop { max-width: 1040px; justify-self: center; }
.scene-copy { text-align: center; max-width: 620px; margin-inline: auto; }
.scene-copy .n { font-size: var(--an-fontSize-label); font-weight: var(--an-fontWeight-bold); color: var(--an-depth-default); letter-spacing: var(--an-letterSpacing-wide); }
.scene-copy h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: var(--an-spacing-3) 0 var(--an-spacing-4); }
.scene-copy p { color: var(--an-text-secondary); }


/* Home page: every section head and the text under it is centred (Ksenia, 2026-10-26). */
.home .section-head { margin-inline: auto; text-align: center; }
.home .section > .wrap > .eyebrow { text-align: center; }
.home .day-tabs { margin-inline: auto; }
.home .points { text-align: center; }

/* Above the page's eyebrow, on the content's left edge. */
.back-link {
  display: inline-block;
  margin-bottom: var(--an-spacing-8);
  font-size: var(--an-fontSize-bodySm); font-weight: var(--an-fontWeight-semibold);
  color: var(--an-text-secondary);
}
.back-link:hover { color: var(--an-text-primary); }

/* ---------- forms ---------- */
.form-shell { max-width: 560px; }
.form { display: grid; gap: var(--an-spacing-8); margin-top: var(--an-spacing-10); }
.field { display: grid; gap: var(--an-spacing-2); }
.field label { font-size: var(--an-fontSize-bodySm); font-weight: var(--an-fontWeight-semibold); }
.field .hint { font-size: var(--an-fontSize-caption); color: var(--an-text-muted); }
.field input, .field select {
  font: inherit;
  font-size: var(--an-fontSize-bodyLg);
  color: var(--an-text-primary);
  background: var(--an-input-bg-default);
  border: var(--an-borderWidth-hairline) solid var(--an-input-border-default);
  border-radius: var(--an-input-radius);
  padding: var(--an-spacing-4) var(--an-spacing-5);
  width: 100%;
  min-width: 0;
}
.field input::placeholder { color: var(--an-input-placeholder-fg); }
.field input:focus, .field select:focus { outline: none; border-color: var(--an-border-focus); }
.field input[aria-invalid="true"] { border-color: var(--an-danger-fg); }
.field .err { font-size: var(--an-fontSize-caption); color: var(--an-danger-fg); }
.row-2 { display: grid; gap: var(--an-spacing-8); align-items: start; }
@media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.form .btn { justify-self: start; }
.form-note { font-size: var(--an-fontSize-caption); color: var(--an-text-muted); }
.thanks { margin-top: var(--an-spacing-10); }
.thanks h2 { margin-bottom: var(--an-spacing-4); }
.thanks p { color: var(--an-text-secondary); }
.thanks p + p { margin-top: var(--an-spacing-4); }
.flush-top { padding-top: 0; }
.gap-top { margin-top: var(--an-spacing-4); }
.gap-top-lg { margin-top: var(--an-spacing-10); }
.request-text {
  font-family: var(--an-fontFamily-mono);
  font-size: var(--an-fontSize-caption);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--an-bg-sunken);
  border-radius: var(--an-radius-md);
  padding: var(--an-spacing-6);
  margin: var(--an-spacing-6) 0;
}
[hidden] { display: none !important; }

/* ---------- footer ---------- */
.site-footer {
  border-top: var(--an-borderWidth-hairline) solid var(--an-border-subtle);
  padding: var(--an-spacing-10) 0 var(--an-spacing-9);
  margin-top: clamp(40px, 7vw, 80px);
  font-size: var(--an-fontSize-bodySm);
}
.site-footer .wrap { display: grid; gap: var(--an-spacing-8); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--an-spacing-4) var(--an-spacing-8); }
.footer-links a { color: var(--an-text-secondary); }
.footer-links a:hover { color: var(--an-text-primary); }
.footer-links .is-soon { color: var(--an-text-muted); }
.site-footer .wrap { justify-items: center; text-align: center; }
.footer-links { justify-content: center; }
.site-footer .fine { max-width: 70ch; text-wrap: balance; }