/* mitec — home page (/)
   ──────────────────────────────────────────────────────────────────────────
   Page composition on top of components.css. The surface plan follows
   DESIGN.md §6: light is where you read and decide, forest is where you
   recognise and commit. Forest appears as the portal hero scene (portal.css),
   the portfolio tiles and the closing CTA band, plus the footer. Everything
   else alternates bg / bg-alt so sections separate by tone rather than by
   drawn borders.

   Motion lives in portal.css and motion.css, scoped to html.motion; nothing
   here needs motion to be understood.
   ────────────────────────────────────────────────────────────────────────── */

/* ---------------------------------------------------------------- nav
   Overlays the portal instead of taking a row above it. It starts in the
   forest variant and portal.js switches it to light once the visitor is
   inside the room. The forest fill is 94%, not a see-through 70%: from about
   halfway through the scene it is the room's daylight that shows through,
   and the tonal CTA text needs 94% to stay over 4.5:1 on it (4.73:1). */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.navbar[data-surface="dark"] { background: color-mix(in srgb, var(--color-bg) 94%, transparent); border-bottom-color: transparent; }
.navbar .logo span,
.navbar__toggle { transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
/* No JS: nothing can switch it to light, so it rides on the forest band and
   scrolls away with it rather than sitting dark over light sections. */
html:not(.js) .navbar { position: absolute; }

/* ---------------------------------------------------------------- bands */
.band { padding-block: var(--section-pad); background: var(--color-bg); }
.band--alt { background: var(--color-bg-alt); }
.band--forest { background: var(--color-bg); }
.band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.band__inner--narrow { max-width: var(--container-narrow); }
section[id] { scroll-margin-top: 80px; } /* clears the fixed nav on anchor jumps */

/* ---------------------------------------------------------------- grids */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.about-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The perspective is for the cards' tilt-and-settle entrance (effects.js). */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); perspective: 1200px; }

/* ---------------------------------------------------------------- services */
.service-card { display: flex; flex-direction: column; gap: var(--space-4); }
.service-card__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-tonal); color: var(--color-tonal-text);
}
.service-card p { font-size: var(--text-body); color: var(--color-text-secondary); line-height: var(--lh-body); }
.service-card__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-body-sm); font-weight: 700; }
.service-card__link .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- work / portfolio
   Three zig-zag rows. The media is a forest tile — the Instagram echo — with
   one mint glow behind the screenshot only; the text reads on light beside
   it. The media column is the wider one in every row; rows swap sides. */
.work-list { display: grid; gap: clamp(64px, 8vw, 128px); }
.work-row { display: grid; gap: var(--space-7); align-items: center; } /* stacked: media, then text */
@media (min-width: 1024px) {
  .work-row { gap: var(--space-9); grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "text media"; }
  .work-row:nth-child(even) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "media text"; }
  .work-row__media { grid-area: media; }
  .work-row__text { grid-area: text; }
}
.work-row__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: background-color var(--dur) var(--ease-out);
}
.work-row__media:hover { background-color: var(--color-brand-hover); }
/* Lies behind the screenshot and spills out round its edges as a halo. */
.work-row__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, var(--color-glow) 70%, transparent);
  opacity: .6;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.work-row__media:hover .work-row__glow { opacity: 1; }
/* The screenshot, inset in the tile so its scroll parallax (±4%) never
   reaches the tile's edge. */
.work-row__shot {
  position: absolute;
  inset: 9% 8%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.work-row__shot .img-slot { border: 0; }
.work-row__text { --stagger: 60ms; --reveal-rise: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.work-row__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.work-row dl { margin: 0; display: grid; gap: var(--space-4); }
.work-row dt { color: var(--color-text-muted); font-size: var(--text-caption); font-weight: 700; margin-bottom: 2px; }
.work-row dd { margin: 0; color: var(--color-text-body); line-height: var(--lh-body); }
.work-row__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-body-sm); font-weight: 700; }
.work-row__link .icon { width: 16px; height: 16px; }
.work-row__note { font-size: var(--text-body-sm); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- process
   The numerals earn their place: the sequence is the information. They carry
   the brand colour, never the action colour — nothing here is clickable, and
   neither is the rail, which fills in forest as you read the steps. Five
   across with the rail above them from 1024px; below that the steps stack
   along a vertical rail on the start side (five columns would wrap and
   break a horizontal rail). effects.js measures the rail's length. */
.process-track { position: relative; }
.process-grid { margin: 0; padding: 0; padding-inline-start: 40px; list-style: none; display: grid; gap: var(--space-4); }
.process-grid > li { position: relative; }
.process-grid > li::before {
  content: '';
  position: absolute;
  top: 28px;
  inset-inline-start: -33px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.process-grid > li.is-reached::before,
html:not(.motion) .process-grid > li::before { border-color: var(--color-brand); background: var(--color-brand); }
.process-rail { position: absolute; top: calc(var(--rail-from, 0px) + 33px); inset-inline-start: 11px; width: 2px; height: var(--rail-len, 0px); background: var(--color-border); }
.process-rail__fill { position: absolute; inset: 0; background: var(--color-brand); transform-origin: 50% 0; }
@media (min-width: 1024px) {
  .process-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-inline-start: 0; padding-top: 36px; }
  .process-grid > li::before { top: -26px; inset-inline-start: 24px; }
  .process-rail { top: 14px; inset-inline-start: 29px; width: var(--rail-len, 0px); height: 2px; }
  .process-rail__fill { transform-origin: 100% 50%; } /* fills from the start edge: the right, on this RTL page */
}
.process-step__n { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h3); color: var(--color-brand); font-variant-numeric: tabular-nums; line-height: 1.1; }
.process-step__title { margin: var(--space-3) 0 var(--space-2); }
.process-step__body { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: var(--lh-body); }

/* The step cards take colour from the same progress as the rail (effects.js):
   a --green-100 fill grows from the start edge as the rail head approaches a
   step, and the step whose dot the head reached last becomes the one forest
   "spotlight" card (data-surface="dark", DESIGN.md §5). This resting state —
   every step filled, no spotlight — is what reduced motion and no-JS see.

   The layers live in one clipped span so the growing fill keeps the card's
   rounded corners. The card's own fill is pinned to the light surface
   (--step-base is resolved on the li, outside the card's scope), so going
   dark never repaints it: only the forest layer fades, and text colours
   ease across with --dur. */
.process-grid > li { --step-base: var(--color-surface); }
.process-step {
  position: relative;
  isolation: isolate;
  background: var(--step-base);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.process-step > :not(.process-step__bg) { transition: color var(--dur) var(--ease-out); }
.process-step__bg {
  position: absolute;
  z-index: -1;
  inset: -1px; /* over the card's own border, so the lines below can replace it */
  overflow: hidden;
  border-radius: inherit;
}
.process-step__bg > * { position: absolute; inset: 0; border-radius: inherit; }
.process-step__fill { inset: 1px; background: var(--color-step-fill); transform-origin: 50% 0; }
.process-step__line { border: 1px solid var(--color-step-line); }
.process-step__spot {
  background: var(--color-brand);
  border: 1px solid var(--color-step-spot-line);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (min-width: 1024px) {
  .process-step__fill { transform-origin: 100% 50%; } /* grows from the start edge, like the rail */
}
.process-step[data-surface="dark"] { transform: translateY(-6px); box-shadow: none; }
.process-step[data-surface="dark"] .process-step__spot { opacity: 1; }
.process-step[data-surface="dark"] .process-step__n { color: var(--color-text-primary); }

/* ---------------------------------------------------------------- about
   A two-line display heading whose lines converge from opposite sides as the
   section scrolls in (effects.js). */
.about-heading { gap: var(--space-5); }
.about-title { font-size: clamp(34px, 5vw, 64px); font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.about-title__line { display: block; }
.about-card { display: flex; gap: var(--space-5); align-items: center; }
.about-card__photo { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 1px solid var(--color-border-subtle); }
.about-card h3 { margin: 0 0 var(--space-1); }
.about-card__role { margin: 0 0 var(--space-2); font-size: var(--text-body-sm); color: var(--color-tonal-text); font-weight: 500; }
.about-card__bio { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: var(--lh-body); }

/* ---------------------------------------------------------------- testimonials */
.testimonials__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.testimonial { position: relative; transform-origin: 50% 100%; }
.testimonial blockquote { margin: 0 0 var(--space-4); font-size: var(--text-body-lg); color: var(--color-text-primary); line-height: var(--lh-body); }
/* Decorative quote mark — a typographic flourish, the one amber note past the hero. */
.testimonial blockquote::before {
  content: '”';
  display: block;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: .6;
  color: var(--amber-300);
  margin-bottom: var(--space-2);
}
.testimonial figcaption { font-size: var(--text-body-sm); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- quick scope
   A pricing calculator on light (a tool, so a form surface, DESIGN.md §6).
   Tabs pick the site type. From 1024px the start column is one summary card
   — what the base always includes, then the total, the CTA and the
   disclaimer — held in view while it fits the screen; the end column is the
   page slider and a grid of equal add-on tiles, tidy for any number of them.
   Below 1024px it all stacks and the total + CTA ride in a bar at the bottom
   of the screen while the calculator is on it. Everything shown is rendered
   from the pricing document by scope.js. The action green is only on what
   acts: the slider and the CTA. Hidden without JS — it is a tool, not
   reading. */
html:not(.js) .scope { display: none; }
.scope-head__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.scope-body { display: flex; flex-direction: column; gap: var(--space-7); }

/* Loading skeleton, in the shape of the result so nothing jumps. */
.skel { display: block; border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.skel--eyebrow { width: 88px; height: 14px; }
.skel--title { width: min(100%, 420px); height: 44px; }
.skel--sub { width: min(100%, 560px); height: 22px; }
.skel--badge { width: 180px; height: 30px; border-radius: var(--radius-pill); }
.skel--tabs { width: min(100%, 640px); height: 52px; border-radius: var(--radius-pill); }
.skel--link { width: 240px; height: 22px; }
.skel--heading { width: 40%; height: 28px; }
.skel--list { height: 300px; }
.skel--line { height: 24px; }
.skel--pages { height: 116px; }
.skel--tile { min-height: 124px; border-radius: var(--radius-md); }
.skel--total { height: 76px; }
.skel--cta { height: 60px; border-radius: var(--radius-pill); }
.skel--note { height: 40px; }
/* While loading, the columns hold roughly the height of the default view. */
.scope[aria-busy="true"] .scope-summary,
.scope[aria-busy="true"] .scope-config { display: flex; flex-direction: column; gap: var(--space-4); }
.scope[aria-busy="true"] .scope-summary .skel--heading { align-self: center; }

/* Site-type tabs: one segmented track, centred; the native radio stays for
   its semantics and keys, the pill is its face. */
.scope-types { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.scope-tabs { max-width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.scope-tabs__track {
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}
.scope-tabs__track::-webkit-scrollbar { display: none; }
.scope-tab { position: relative; flex: 0 0 auto; scroll-snap-align: center; }
.scope-tab input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.scope-tab span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.scope-tab:hover span { color: var(--color-text-primary); }
.scope-tab input:checked + span { background: var(--color-surface); color: var(--color-text-primary); font-weight: 700; box-shadow: var(--shadow-card); }
.scope-tab input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-focus-halo); }
.scope-unsure { font-size: var(--text-body-sm); text-decoration: underline; text-underline-offset: 5px; }

.scope-cols { --stagger: 80ms; display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) { .scope-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* The summary card. scope.js adds .is-sticky only while the whole card fits
   between the nav and the bottom of the screen, so a stuck card is never cut
   off; as a grid item it lets go where the columns end. */
.scope-summary { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-7) var(--space-6); }
.scope-summary.is-sticky { position: sticky; top: var(--scope-top, 92px); }
.scope-summary__base { display: flex; flex-direction: column; gap: var(--space-5); }
.scope-base__head { text-align: center; }
.scope-base__title { font-size: var(--text-h4); }
.scope-base__sub { margin-top: var(--space-1); color: var(--color-text-secondary); }
/* What is always included: a compact checklist, two columns wherever the
   card is wide enough for them. */
.scope-base__list { display: grid; gap: var(--space-4) var(--space-5); margin: 0; padding: var(--space-5) 0 0; list-style: none; border-top: 1px solid var(--color-border); }
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) {
  .scope-base__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.scope-summary.is-single .scope-base__list { grid-template-columns: minmax(0, 1fr); }
.scope-base__list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.scope-base__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-tonal);
  color: var(--color-tonal-text);
}
.scope-base__mark .icon { width: 14px; height: 14px; }
.scope-base__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: var(--lh-tight); text-wrap: pretty; }
.scope-base__item strong { font-size: var(--text-body-sm); font-weight: 700; color: var(--color-text-primary); }
.scope-base__desc { font-size: var(--text-caption); color: var(--color-text-muted); }
.scope-base__more {
  display: none;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  min-height: 44px;
  margin-top: calc(-1 * var(--space-2));
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--text-body-sm);
  font-weight: 700;
  cursor: pointer;
}
.scope-base__more .icon { width: 16px; height: 16px; }
.scope-base__pages { color: var(--color-text-secondary); text-align: center; font-weight: 500; }

/* The checkout: total, what is picked, the CTA. At the foot of the card here;
   the bottom bar below 1024px. */
.scope-checkout { display: flex; flex-direction: column; gap: var(--space-4); }
.scope-summary .scope-checkout { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.scope-checkout__figures { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; text-align: center; }
.scope-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 var(--space-3); margin: 0; }
.scope-total__label { color: var(--color-text-muted); font-size: var(--text-body); }
.scope-total__price,
.scope-total__days { display: inline-grid; }
.scope-total__price > *,
.scope-total__days > * { grid-area: 1 / 1; }
.scope-total__figure { font-size: var(--text-h3); font-weight: 800; line-height: 1.25; color: var(--color-text-primary); }
.scope-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); margin: 0; color: var(--color-text-secondary); }
.scope-meta[hidden],
.scope-meta__count[hidden] { display: none; }
/* A hairline between the duration and the count: a «·» beside Persian
   digits reads as a zero (۰). */
.scope-total__days + .scope-meta__count::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: .9em;
  margin-inline-end: var(--space-2);
  vertical-align: -.1em;
  background: var(--color-border-strong);
}
.scope-summary .scope-cta { width: 100%; }
.scope-disclaimer { margin-top: calc(-1 * var(--space-2)); font-size: var(--text-caption); color: var(--color-text-muted); text-align: center; }
.scope-error { color: var(--color-text-secondary); text-align: center; }
.scope-body > .scope-cta { align-self: center; }

/* The end column: pages, then the add-on tiles. */
.scope-config { display: flex; flex-direction: column; gap: var(--space-4); }
.scope-pages { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); line-height: var(--lh-tight); }
.scope-pages__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.scope-pages__title { font-weight: 700; color: var(--color-text-primary); }
.scope-pages__value { font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.scope-pages__desc { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* Native range, token-styled. 44px tall for the hit area; the fill runs from
   the start edge (the right, on this RTL page) to the value. */
.scope-range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.scope-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to left, var(--color-cta) var(--fill), var(--color-border) var(--fill));
}
.scope-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-cta);
  box-shadow: 0 0 0 1px var(--color-cta);
}
.scope-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--color-border); }
.scope-range::-moz-range-progress { height: 4px; border-radius: var(--radius-pill); background: var(--color-cta); }
.scope-range::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-cta); box-shadow: 0 0 0 1px var(--color-cta); }
.scope-range:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }

.scope-addons__title { margin-top: var(--space-2); font-size: var(--text-body-lg); }
.scope-addons__group { margin-top: var(--space-2); font-size: var(--text-body-sm); font-weight: 700; color: var(--color-text-secondary); }
/* The tiles: two equal columns, every row as tall as the tallest tile, so the
   grid stays even for any count. An odd count leaves one tile alone on the
   last row; it spans both columns. (That needs no :has(): the last child in
   an odd position is exactly that tile.) One column on phones. */
.scope-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-3); }
.scope-addons > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Each tile is the toggle. Dashed while off, as in the reference; solid and
   tonal when on. The state also shows in the +/− and aria-pressed. The border
   width never changes, so toggling never shifts anything. */
.scope-addon {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 124px;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-body);
  font: inherit;
  line-height: var(--lh-tight);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.scope-addon:hover { border-color: var(--color-border-hover); }
.scope-addon[aria-pressed="true"] { border-style: solid; border-color: var(--color-border-hover); background: var(--color-tonal); }
.scope-addon__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.scope-addon__title { padding-top: 4px; font-weight: 700; color: var(--color-text-primary); }
.scope-addon__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}
/* Pushed to the bottom, and one line tall even when empty (a free add-on),
   so every tile's last line sits on the same baseline. */
.scope-addon__price {
  margin-top: auto;
  min-height: calc(var(--text-body-sm) * var(--lh-tight));
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.scope-addon__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-tonal-text);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.scope-addon__toggle .icon { width: 16px; height: 16px; }
.scope-addon[aria-pressed="true"] .scope-addon__toggle { border-color: var(--color-tonal-text); background: var(--color-tonal-text); color: var(--color-surface); }

/* Below 1024px: one column — summary, pages, tiles — and the checkout is a
   bar after them. Sticky to the bottom of the screen inside the calculator's
   box, it shows only while the calculator is on screen and comes to rest in
   place at its end, so it never covers the footer or the next section. */
@media (max-width: 1023px) {
  .scope-body > .scope-checkout {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
  }
  .scope-body > .scope-checkout .scope-checkout__figures { align-items: flex-start; text-align: start; }
  .scope-body > .scope-checkout .scope-total { justify-content: flex-start; }
  .scope-body > .scope-checkout .scope-meta { justify-content: flex-start; font-size: var(--text-body-sm); }
  .scope-body > .scope-checkout .scope-total__figure { font-size: var(--text-h4); }
  .scope-body > .scope-checkout .scope-cta { flex: 0 0 auto; }
  /* Keyboard focus scrolled into view clears the nav and the bar. */
  .scope-body :is(.scope-unsure, .scope-range, .scope-addon, .scope-base__more) { scroll-margin: 96px 0 120px; }
}

@media (max-width: 767px) {
  .scope-addons { grid-template-columns: minmax(0, 1fr); }
  /* The base list folds after four items behind «show all». */
  .scope-base__list:not(.is-open) > .is-more { display: none; }
  .scope-base__more { display: inline-flex; }
  /* A phone bar holds the price, the duration and the CTA; the count of
     picked add-ons is on the tiles themselves. */
  .scope-body > .scope-checkout { gap: var(--space-3); }
  .scope-body > .scope-checkout .scope-total__label,
  .scope-body > .scope-checkout .scope-meta__count { display: none; }
  .scope-body > .scope-checkout .scope-checkout__figures { flex: 1 1 auto; }
  .scope-body > .scope-checkout .scope-total__figure { font-size: var(--text-body-lg); white-space: nowrap; }
  .scope-body > .scope-checkout .scope-cta { padding: 12px 16px; font-size: var(--text-body-sm); }
  .scope-body > .scope-checkout .scope-cta .icon { display: none; }
}
@media (max-width: 759px) {
  .scope-types { align-items: stretch; }
  .scope-tabs__track { border-radius: var(--radius-lg); }
}

/* ---------------------------------------------------------------- FAQ
   One narrow column of rows split by hairlines — no card per item. */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item h3 { margin: 0; }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: transparent; border: 0; margin: 0; color: var(--color-text-primary);
  font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: 700; text-align: start;
  padding: var(--space-5) 0; cursor: pointer; min-height: 44px;
}
.faq-item__chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--color-tonal-text); }
.faq-item__a { padding-bottom: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-body); line-height: var(--lh-body); }
.faq-item__a[hidden] { display: none; }
.faq-item__body { max-width: 68ch; }
/* With JS the panels collapse by grid rows (0fr <-> 1fr) so opening animates;
   home.js makes closed ones inert. The padding travels with the row so a
   closed panel is truly zero-height. */
html.js .faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  transition: grid-template-rows var(--dur-slow) var(--ease-in-out), padding-bottom var(--dur-slow) var(--ease-in-out);
}
html.js .faq-item.is-open .faq-item__a { grid-template-rows: 1fr; padding-bottom: var(--space-5); }
html.js .faq-item__body { min-height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- closing CTA band
   Centred. The heading, line and buttons sit on a "screen": an outline echo
   of the portal laptop sized to its content, which grows gently as the band
   scrolls through (effects.js). Its padding leaves room for that growth. */
.cta-band { overflow: hidden; }
.cta-band__inner { align-items: center; text-align: center; }
.cta-band__screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: min(100%, 760px);
  padding: var(--space-9) var(--space-7);
}
.cta-band__echo {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.cta-band__echo::after {
  content: '';
  position: absolute;
  inset-inline: -6%;
  top: calc(100% + var(--space-2));
  height: 12px;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
@media (max-width: 620px) { .cta-band__screen { padding: var(--space-7) var(--space-4); } }
.cta-band h2 { font-size: var(--text-display-3); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.cta-band h2 > span { display: inline-block; } /* whole words, so they can rise in one by one */
.cta-band p { font-size: var(--text-body-lg); line-height: var(--lh-body); color: var(--color-text-body); max-width: 52ch; }
.cta-band__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.cta-band__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-7); align-items: center; border-top: 1px solid var(--color-border); padding-top: var(--space-6); width: 100%; }
.cta-band__links-label { color: var(--color-text-muted); font-size: var(--text-body-sm); }
.cta-band__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-body); font-weight: 500; }
.cta-band__insta { direction: ltr; }

/* ---------------------------------------------------------------- responsive nav */
@media (max-width: 860px) {
  .navbar__toggle { display: inline-flex; }
  .navbar__menu {
    position: fixed;
    inset: 68px var(--gutter) auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-elevated);
    display: none;
  }
  .navbar__menu.is-open { display: flex; }
  .navbar__link { padding-inline: var(--space-2); }
  .navbar__link::after { display: none; }
  .navbar__link.is-active { background: var(--color-surface-sunken); border-radius: var(--radius-sm); }
  .navbar__cta { margin-top: var(--space-2); justify-content: center; }
  /* DESIGN.md §8: no shadows on forest. */
  .navbar[data-surface="dark"] .navbar__menu { box-shadow: none; border-color: var(--color-border); }
}

@media (max-width: 620px) {
  .cta-band__ctas { width: 100%; }
  .cta-band__ctas .btn { flex: 1 1 auto; }
}