/* ============================================================================
   Swiftweb v2: light, clear, one warm accent (client's choice, 2026-09-14)
   Archivo for the site, DM Serif Display only inside the café example.
   ========================================================================== */

@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-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;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
}

:root {
  --sc-canvas: #FFFFFF;
  --sc-surface: #F6F5F3;
  --sc-ink: #1A1A1A;
  --sc-ink-soft: #5E5B57;
  --sc-accent: #F26B1D;
  --sc-accent-ink: #1A1A1A;
  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-hairline: #E7E4E0;
  --sc-hairline-strong: #D6D2CD;
  --sc-maxw: 78rem;
  --sc-gutter: clamp(1.25rem, 4vw, 3.5rem);

  --bg-2: #F6F5F3;
  --line: #E7E4E0;
  --line-strong: #D6D2CD;
  --accent: #F26B1D;
  --accent-hover: #E35E10;
  --accent-strong: #C4520E;   /* accent for thin graphics and focus on white: 4.2:1 */
  --accent-tint: #FDE8DB;
  --danger: #B42318;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-2: 0 1px 2px rgb(26 26 26 / 0.06), 0 14px 34px -12px rgb(26 26 26 / 0.22);
  --shadow-3: 0 2px 4px rgb(26 26 26 / 0.06), 0 30px 60px -20px rgb(26 26 26 / 0.32);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 4.5rem;
}

[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--bar-h) + 1rem); }
html.is-locked { overflow: hidden; }
body { background: #FFFFFF; color: var(--sc-ink); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.6; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: #FBD3BC; color: #1A1A1A; }

.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 { position: fixed; left: var(--sc-gutter); top: -4rem; z-index: 100; background: var(--sc-ink); color: #fff; padding: 0.7rem 1rem; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------------ type -- */
.h-display { font-size: clamp(2.3rem, 1.3rem + 2.9vw, 4rem); font-weight: 730; font-stretch: 106%; letter-spacing: -0.035em; line-height: 1.03; text-wrap: balance; }
.h2 { font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.75rem); font-weight: 710; font-stretch: 104%; letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; }
.h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 680; letter-spacing: -0.012em; line-height: 1.25; }
.lede { font-size: clamp(1.07rem, 1rem + 0.35vw, 1.28rem); line-height: 1.55; color: var(--sc-ink-soft); max-width: 48ch; text-wrap: pretty; }
.soft { color: var(--sc-ink-soft); }
.small { font-size: 0.92rem; color: var(--sc-ink-soft); }
.note { margin-top: 1.5rem; }

/* -------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.3rem; border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; font-weight: 640; letter-spacing: 0; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: #1A1A1A; }
.btn--quiet { background: #FFFFFF; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--sm { min-height: 2.6rem; padding: 0 1rem; font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--quiet:hover { box-shadow: inset 0 0 0 1px var(--sc-ink); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.link { color: var(--sc-ink); font-weight: 560; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--accent-strong); } }

/* ---------------------------------------------------------------- header -- */
.bar {
  position: sticky; top: 0; z-index: 70;
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.is-scrolled .bar { border-bottom-color: var(--line); }
.bar__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--bar-h); }
.bar__logo { flex: none; display: flex; align-items: center; min-height: 44px; width: 8.5rem; color: var(--sc-ink); }
.bar__logo svg { width: 100%; height: auto; }
.bar__nav { margin-left: 1.25rem; }
.bar__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.15rem; }
.bar__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border-radius: var(--r-sm);
  font-size: 0.97rem; font-weight: 540; color: var(--sc-ink); text-decoration: none;
  transition: background-color 150ms var(--ease);
}
.bar__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { background: var(--bg-2); } }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.lang { display: flex; }
.lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--sc-ink-soft); text-decoration: none; }
.lang a[aria-current="true"] { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .lang a:hover { color: var(--sc-ink); } }

.menu-btn {
  display: none; appearance: none; background: none; border: 0; cursor: pointer;
  align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.25rem;
  font: inherit; font-weight: 620; color: var(--sc-ink);
}
.menu-btn__bars { position: relative; width: 20px; height: 10px; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; }
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { bottom: 0; }
.menu-btn__x { position: relative; width: 18px; height: 18px; }
.menu-btn__x::before, .menu-btn__x::after { content: ""; position: absolute; left: -1px; right: -1px; top: 8px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-btn__x::before { transform: rotate(45deg); }
.menu-btn__x::after { transform: rotate(-45deg); }

.index {
  position: fixed; inset: 0; z-index: 90; background: #FFFFFF;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  padding: 0 var(--sc-gutter) 2rem; overflow-y: auto;
  opacity: 0; transition: opacity 180ms var(--ease);
}
.index.is-open { opacity: 1; }
.index__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--bar-h); }
.index__top .menu-btn { display: inline-flex; }
.index__list { list-style: none; margin: 0; padding: 0; align-self: center; display: grid; gap: 0.2rem; }
.index__list a { display: inline-block; padding: 0.12em 0; font-size: clamp(2rem, 1.2rem + 4vw, 3.3rem); font-weight: 720; font-stretch: 106%; letter-spacing: -0.03em; line-height: 1.08; color: var(--sc-ink); text-decoration: none; }
.index__list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
.index__foot { display: grid; gap: 1.1rem; justify-items: start; }
.index__contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--sc-ink-soft); }
.index__contact a { color: var(--sc-ink); }

@media (max-width: 1100px) { .bar__nav { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 640px) { .bar__cta { display: none; } .bar__logo { width: 7.25rem; } }

/* -------------------------------------------------------------- sections -- */
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section--tint { background: var(--bg-2); }
.section__head { display: grid; gap: 0.9rem; max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------------ hero -- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
/* two to three lines, not four: the hero column is only half the page */
.hero__copy .h-display { font-size: clamp(2.3rem, 1.2rem + 2.3vw, 3.4rem); }
.hero__copy .lede { margin-top: 1.25rem; }
.hero__copy .actions { margin-top: 2rem; }
.points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.points li, .checks li { position: relative; padding-left: 1.75rem; }
.points li { font-weight: 540; }
.points li::before, .checks li::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.3em;
  width: 0.42rem; height: 0.78rem;
  border-right: 2.5px solid var(--accent-strong); border-bottom: 2.5px solid var(--accent-strong);
  transform: rotate(45deg);
}

/* -------------------------------------------------- the industry example -- */
.switch { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1.25rem; }
.switch__label { font-size: 0.93rem; font-weight: 560; color: var(--sc-ink-soft); }
.switch__tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  appearance: none; border: 0; cursor: pointer;
  min-height: 2.6rem; padding: 0 1rem; border-radius: var(--r-sm);
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--sc-ink);
  background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.chip[aria-selected="true"] { background: var(--sc-ink); color: #FFFFFF; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-selected="true"]):hover { box-shadow: inset 0 0 0 1px var(--sc-ink); } }
.switch--compact { margin: 0; gap: 0.4rem 0.6rem; }
.switch--compact .chip { min-height: 2.3rem; padding: 0 0.75rem; font-size: 0.88rem; }

.demo { position: relative; padding: 0 2.25rem 2.75rem 0; }
.demo__note { margin-top: 0.4rem; font-size: 0.88rem; color: var(--sc-ink-soft); }

.device { margin: 0; background: #FFFFFF; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
.device__bar { display: flex; align-items: center; gap: 0.75rem; height: 2.4rem; padding: 0 0.85rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.device__dots { flex: none; width: 8px; height: 8px; margin-right: 26px; border-radius: 50%; background: #D9D5D0; box-shadow: 13px 0 #D9D5D0, 26px 0 #D9D5D0; }
.device__url { flex: 1 1 auto; min-width: 0; max-width: 18rem; margin-inline: auto; padding: 0.15rem 0.6rem; border-radius: 6px; background: #FFFFFF; font-size: 0.78rem; text-align: center; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device__status { flex: none; padding: 0.15rem 0.55rem; border-radius: 6px; background: #ECE9E5; font-size: 0.72rem; font-weight: 650; color: var(--sc-ink-soft); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
/* the frame is the size container, so the example's own padding in cqi scales with the frame, not the viewport */
.device__screen { position: relative; container-type: inline-size; }
.device--phone {
  position: absolute; right: 0; bottom: 0; width: 30%; max-width: 12rem;
  border-radius: 1.5rem; border: 7px solid #1A1A1A; box-shadow: var(--shadow-3);
  transform: translate3d(0, var(--phone-y, 0px), 0); will-change: transform;
  container-type: inline-size;
}

.ex {
  --ex-bg: #F4EDE4; --ex-ink: #3A2A1F; --ex-soft: #7A6656; --ex-panel: #2F4A3E; --ex-panel-ink: #F1E6D6;
  --ex-accent: #C8873A; --ex-accent-ink: #2A1D14;
  --ex-font: "DM Serif Display", Georgia, serif; --ex-h-weight: 400; --ex-h-stretch: 100%; --ex-h-case: none; --ex-h-track: -0.01em; --ex-h-size: 1;
  --ex-r: 1.3cqi;
  overflow: hidden;   /* keeps the frame at its aspect ratio: long headlines must never grow the mock-up */
  background: var(--ex-bg); color: var(--ex-ink);
  font-family: "Archivo", Arial, sans-serif; font-stretch: 100%; font-weight: 450; line-height: 1.35;
  transition: background-color 260ms var(--ease), color 260ms var(--ease), opacity 170ms var(--ease);
}
.demo.is-swapping .ex { opacity: 0; }
.ex__brand, .ex__h { font-family: var(--ex-font); font-weight: var(--ex-h-weight); font-stretch: var(--ex-h-stretch); text-transform: var(--ex-h-case); letter-spacing: var(--ex-h-track); }
.ex__cta, .ex__btn { display: inline-block; background: var(--ex-accent); color: var(--ex-accent-ink); border-radius: var(--ex-r); font-weight: 650; transition: background-color 260ms var(--ease), color 260ms var(--ease); }
.ex__art { display: grid; place-items: center; border-radius: var(--ex-r); background: var(--ex-panel); color: var(--ex-panel-ink); transition: background-color 260ms var(--ease), color 260ms var(--ease); }
.ex__art .art { display: none; width: 46%; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ex[data-branch="cafe"] .art--cafe, .ex[data-branch="coiffeur"] .art--coiffeur, .ex[data-branch="handwerk"] .art--handwerk, .ex[data-branch="praxis"] .art--praxis { display: block; }
.ex__v1 { display: none; }
.ex__stars { display: flex; gap: 0.4cqi; color: var(--ex-accent); }
.ex__stars svg { width: 2cqi; height: 2cqi; fill: currentColor; }

/* desktop frame */
.ex--desk { aspect-ratio: 16 / 10.4; display: grid; grid-template-rows: auto 1fr auto; gap: 3cqi; padding: 2.8cqi 4cqi 3.6cqi; }
.ex--desk .ex__nav { display: flex; align-items: center; gap: 3cqi; font-size: 1.65cqi; }
.ex--desk .ex__brand { font-size: 2.5cqi; }
.ex--desk .ex__links { display: flex; gap: 2.4cqi; margin-left: auto; color: var(--ex-soft); }
.ex--desk .ex__links i { font-style: normal; }
.ex--desk .ex__cta { padding: 0.9cqi 1.8cqi; font-size: 1.55cqi; }
.ex--desk .ex__hero { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqi; }
.ex--desk .ex__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.7cqi; }
.ex--desk .ex__kicker { font-size: 1.6cqi; font-weight: 600; color: var(--ex-soft); }
.ex--desk .ex__h { position: relative; font-size: calc(5.1cqi * var(--ex-h-size)); line-height: 1.04; }
.ex--desk .ex__sub { font-size: 1.75cqi; line-height: 1.45; color: var(--ex-soft); max-width: 40ch; }
.ex--desk .ex__btn { padding: 1.2cqi 2.4cqi; font-size: 1.75cqi; }
.ex--desk .ex__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; font-size: 1.55cqi; }
.ex--desk .ex__tiles > div { display: grid; gap: 0.4cqi; padding: 1.5cqi 2cqi; border-radius: var(--ex-r); background: color-mix(in oklab, var(--ex-ink) 6%, transparent); transition: background-color 260ms var(--ease); }
.ex--desk .ex__tiles b { font-weight: 700; }
.ex--desk .ex__tiles span { color: var(--ex-soft); }

/* phone frame */
.ex--phone { aspect-ratio: 9 / 17.5; display: flex; flex-direction: column; gap: 5cqi; padding: 8cqi 7cqi; }
.ex--phone .ex__nav { display: flex; align-items: center; }
.ex--phone .ex__brand { font-size: 7.5cqi; }
.ex--phone .ex__burger { margin-left: auto; width: 8cqi; height: 5cqi; border-top: 1.1cqi solid currentColor; border-bottom: 1.1cqi solid currentColor; }
.ex--phone .ex__art { aspect-ratio: 4 / 3; border-radius: calc(var(--ex-r) * 3); }
.ex--phone .ex__h { font-size: calc(10.5cqi * min(var(--ex-h-size), 1)); line-height: 1.05; }
.ex--phone .ex__btn { align-self: flex-start; padding: 3cqi 5cqi; font-size: 5.5cqi; border-radius: calc(var(--ex-r) * 3); }
.ex--phone .ex__tile { display: grid; gap: 1cqi; margin-top: auto; padding: 4cqi 5cqi; border-radius: calc(var(--ex-r) * 3); background: color-mix(in oklab, var(--ex-ink) 6%, transparent); font-size: 5cqi; }
.ex--phone .ex__tile span { color: var(--ex-soft); }

/* industries: palette, type and one layout move each */
.ex[data-branch="coiffeur"] {
  --ex-bg: #FBF8F6; --ex-ink: #231F1E; --ex-soft: #776C67; --ex-panel: #EADCD5; --ex-panel-ink: #6B4A3F;
  --ex-accent: #231F1E; --ex-accent-ink: #FBF8F6;
  --ex-font: "Archivo", Arial, sans-serif; --ex-h-weight: 300; --ex-h-stretch: 125%; --ex-h-case: uppercase; --ex-h-track: 0.03em; --ex-h-size: 0.78;
  --ex-r: 0px;
}
.ex--desk[data-branch="coiffeur"] .ex__hero { grid-template-columns: 1fr 1.15fr; }
.ex--desk[data-branch="coiffeur"] .ex__art { order: -1; }

.ex[data-branch="handwerk"] {
  --ex-bg: #EDECE6; --ex-ink: #1D211B; --ex-soft: #596054; --ex-panel: #1D211B; --ex-panel-ink: #E4B93E;
  --ex-accent: #E4B93E; --ex-accent-ink: #1D211B;
  --ex-font: "Archivo", Arial, sans-serif; --ex-h-weight: 800; --ex-h-stretch: 68%; --ex-h-case: uppercase; --ex-h-track: 0; --ex-h-size: 1.18;
  --ex-r: 0.3cqi;
}
.ex--desk[data-branch="handwerk"] .ex__hero { grid-template-columns: minmax(0, 1fr); padding: 3.4cqi 4cqi; border-radius: var(--ex-r); background: var(--ex-panel); overflow: hidden; }
.ex--desk[data-branch="handwerk"] .ex__copy { position: relative; z-index: 1; color: #F2F0EA; }
.ex--desk[data-branch="handwerk"] .ex__kicker, .ex--desk[data-branch="handwerk"] .ex__sub { color: #C8CBC1; }
.ex--desk[data-branch="handwerk"] .ex__art { position: absolute; top: 0; right: 3cqi; bottom: 0; width: 34%; background: transparent; }

.ex[data-branch="praxis"] {
  --ex-bg: #F1F7F8; --ex-ink: #0F2F38; --ex-soft: #4A6870; --ex-panel: #D3EBEE; --ex-panel-ink: #1C7C89;
  --ex-accent: #1C7C89; --ex-accent-ink: #FFFFFF;
  --ex-font: "Archivo", Arial, sans-serif; --ex-h-weight: 620; --ex-h-stretch: 100%; --ex-h-case: none; --ex-h-track: -0.02em; --ex-h-size: 0.95;
  --ex-r: 2cqi;
}
.ex--desk[data-branch="praxis"] .ex__art { border-radius: 50% 50% var(--ex-r) var(--ex-r) / 38% 38% var(--ex-r) var(--ex-r); }

/* generated example designs (made-up businesses, labelled under the demo) */
.shots { position: relative; overflow: hidden; background: #ECE9E5; }
.shots--desktop { aspect-ratio: 3 / 2; }
.shots--mobile { aspect-ratio: 9 / 17.5; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity 300ms var(--ease); }
.shots[data-branch="cafe"] [data-shot="cafe"], .shots[data-branch="coiffeur"] [data-shot="coiffeur"],
.shots[data-branch="handwerk"] [data-shot="handwerk"], .shots[data-branch="praxis"] [data-shot="praxis"] { opacity: 1; }

/* ---------------------------------------------------------------- offers -- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.offer {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-md);
  background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); color: var(--sc-ink); text-decoration: none;
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.offer p { color: var(--sc-ink-soft); max-width: 46ch; }
.offer__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent-strong); }
.offer__icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.offer__more { justify-self: start; font-weight: 620; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .offer:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2); transform: translateY(-2px); } }

/* ---------------------------------------------- the 14-day build (pinned) -- */
.build { background: #FFFFFF; }
.build__stage {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 2rem;
}
.build__side .h2 { max-width: 14ch; }
.build__for { margin-top: 1.1rem; }
.build__count { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.75rem; }
.build__label, .build__of { font-weight: 580; color: var(--sc-ink-soft); }
.build__num { min-width: 1.25ch; font-size: clamp(4.2rem, 2.4rem + 4.6vw, 7rem); font-weight: 760; font-stretch: 106%; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; transition: color 200ms var(--ease); }
[data-done] .build__num { color: var(--accent); }
.build__steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.05rem; }
.build__steps li { position: relative; padding: 0.28rem 0 0.28rem 1.4rem; font-weight: 600; color: #6E6A65; transition: opacity 200ms var(--ease), color 200ms var(--ease); }
.build__steps li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 0.8rem; height: 2px; background: currentColor; transform: scaleX(0.5); transform-origin: 0 50%; transition: transform 200ms var(--ease), background-color 200ms var(--ease); }
.build__steps li[aria-current] { opacity: 1; color: var(--sc-ink); }
.build__steps li[aria-current]::before { background: var(--accent); transform: none; }
.build__steps span { display: none; }
.build__desc { margin-top: 0.5rem; min-height: 3.2em; max-width: 34ch; color: var(--sc-ink-soft); }

.build__device { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.build__device[data-phase="5"] { transform: translateY(-6px); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); }
.build__device[data-phase="5"] .device__status { background: var(--accent); color: #1A1A1A; }
/* online: the address gets its lock */
.build__device[data-phase="5"] .device__url::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.7rem; margin-right: 0.35rem; vertical-align: -0.06rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h3V4a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h3V4a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.build__screen { aspect-ratio: 16 / 10; overflow: hidden; background: #FFFFFF; }
.build__notes {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0 14%; list-style: none;
  display: grid; align-content: center; gap: 0.55rem; background: #FFFFFF;
  font-size: clamp(0.9rem, 0.7rem + 0.5vw, 1.15rem); opacity: 0;
}
.build__notes li:first-child { margin-bottom: 0.25rem; font-size: 0.85em; color: var(--sc-ink-soft); }
.build__notes li + li { position: relative; padding-left: 1.4rem; font-weight: 560; }
.build__notes li + li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.7rem; height: 2px; background: var(--accent); }

/* ------------------------------------------------ services and the price -- */
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); border-radius: var(--r-md); overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); }
.svc__col, .svc__price { padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.svc__col + .svc__col, .svc__price { border-left: 1px solid var(--line); }
.svc__h { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.svc__price { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; background: var(--bg-2); }
.svc__from { font-weight: 620; color: var(--sc-ink-soft); }
.svc__text { max-width: 36ch; color: var(--sc-ink-soft); }
.svc__price .btn { margin-top: 0.3rem; }
.plan__price { font-size: clamp(2.3rem, 1.6rem + 1.5vw, 3.1rem); font-weight: 760; font-stretch: 106%; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price span { margin-right: 0.35rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--sc-ink-soft); }
.checks, .plus { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.checks li, .plus li { line-height: 1.45; }
.plus li { position: relative; padding-left: 1.75rem; }
.plus li::before, .plus li::after { content: ""; position: absolute; left: 0.2rem; top: 0.66em; width: 0.8rem; height: 2px; background: var(--accent-strong); }
.plus li::after { transform: rotate(90deg); }

/* ----------------------------------------------------------------- plate -- */
.plate { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.plate__fig { display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); }
.plate-img { width: 100%; max-width: 26rem; height: auto; filter: drop-shadow(0 24px 30px rgb(26 26 26 / 0.18)) drop-shadow(0 4px 8px rgb(26 26 26 / 0.1)); }
.plate__copy .lede { margin-top: 1rem; }
.plate__copy .actions { margin-top: 1.75rem; }
.mini-steps { list-style: none; counter-reset: step; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.mini-steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.8rem; align-items: center; }
.mini-steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-tint); color: #8A3A0A; font-weight: 700; font-size: 0.9rem; }
.mini-steps b { font-weight: 660; }
.prices { margin-top: 1.75rem; max-width: 30rem; border-top: 1px solid var(--line); }
.prices div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.65rem; border-bottom: 1px solid var(--line); }
.prices dt { color: var(--sc-ink-soft); }
.prices dd { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- faq -- */
.faq-home { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.faq-home .section__head { margin: 0; }
.faq-list details, .faq details { border-top: 1px solid var(--line-strong); }
.faq-list details:last-child, .faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-list summary, .faq summary {
  list-style: none; cursor: pointer; position: relative; min-height: 44px;
  padding: 1.15rem 3rem 1.15rem 0; font-size: 1.08rem; font-weight: 620; line-height: 1.4;
}
.faq-list summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after, .faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  background: var(--sc-ink); transition: transform 200ms var(--ease);
}
.faq-list summary::after, .faq summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after, .faq details[open] summary::after { transform: rotate(0deg); }
.faq__a { padding: 0 3rem 1.4rem 0; max-width: 64ch; color: var(--sc-ink-soft); }
.faq__a a { color: var(--sc-ink); }
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.faq-group h2 { margin-bottom: 1rem; }

/* --------------------------------------------------------------- contact -- */
.photo-sm { display: block; width: clamp(5.5rem, 9vw, 7.5rem); height: auto; aspect-ratio: 1; border-radius: var(--r-md); object-fit: cover; }
.cc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding: clamp(1.75rem, 5vw, 3.5rem); border-radius: var(--r-lg); background: var(--bg-2); }
.cc .lede { margin-top: 0.9rem; max-width: 54ch; }
.cc .actions { margin-top: 1.6rem; }

/* who is behind Swiftweb: race photo, portrait over it, a few facts */
.me { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.me__media { position: relative; }
.me__media--race { padding: 0 0 10% 0; max-width: 34rem; }
.me__race { display: block; width: 88%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.me__portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.me__media:not(.me__media--race) .me__portrait { max-width: 26rem; }
.me__media--race .me__portrait { position: absolute; right: 0; bottom: 0; width: 36%; box-shadow: 0 0 0 6px #FFFFFF, var(--shadow-2); }
.me__text .lede { margin-top: 1rem; max-width: 52ch; }
.me__facts { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.me__facts div { display: grid; align-content: start; gap: 0.15rem; padding-top: 0.75rem; border-top: 1px solid var(--line-strong); }
.me__facts dt { font-size: 0.88rem; color: var(--sc-ink-soft); }
.me__facts dd { font-weight: 600; line-height: 1.4; }
.me__facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.me__cta { margin-top: 2rem; }
.me__cta > p { margin-bottom: 0.85rem; font-weight: 640; }
@media (max-width: 1000px) { .me { grid-template-columns: minmax(0, 1fr); } .me__media { max-width: 40rem; } }
@media (max-width: 560px) { .me__facts { grid-template-columns: minmax(0, 1fr); } .me__media:not(.me__media--race) .me__portrait { max-width: 15rem; } .me__media--race .me__portrait { right: 4%; width: 36%; box-shadow: 0 0 0 4px #FFFFFF, var(--shadow-2); } }

/* ---------------------------------------------------------------- footer -- */
.site-foot { padding-block: 3rem 1.75rem; }
.foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 3rem; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--sc-ink-soft); }
.foot__logo { display: flex; align-items: center; min-height: 40px; width: 7rem; color: var(--sc-ink); }
.foot__logo svg { width: 100%; height: auto; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 1.35rem; }
.foot ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--sc-ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot ul a:hover { color: var(--sc-ink); text-decoration: underline; } }
.foot__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; }
.foot__meta a { display: inline-flex; align-items: center; min-height: 36px; color: var(--sc-ink-soft); text-decoration: none; }

/* -------------------------------------------------------------- subpages -- */
.page { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.page-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 1.25rem; }
.page-hero .actions { margin-top: 2rem; }
.page-hero--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem 4rem; align-items: center; }
.page-hero--split .plate-img { max-width: 24rem; justify-self: center; }
.about-head { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); }
.about-head .lede { margin-top: 0.5rem; }

.block { padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); }
.block__head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 2rem 4rem; align-items: start; }
.split .block__head { margin-bottom: 0; }

.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-block: 1.35rem; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-tint); color: #8A3A0A; font-weight: 700; }
.step h3 { font-size: 1.2rem; font-weight: 680; line-height: 1.3; margin-top: 0.3rem; }
.step p { margin-top: 0.35rem; max-width: 60ch; color: var(--sc-ink-soft); }

.cta-band { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.cta-band .actions { margin-top: 1.5rem; }

.prose { max-width: 68ch; }
.prose h2 { margin: 2.5rem 0 0.6rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { color: var(--sc-ink-soft); }
.prose p + p { margin-top: 0.9rem; }
.prose a { color: var(--sc-ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.address { font-style: normal; line-height: 1.6; color: var(--sc-ink); }

.about__text { max-width: 44rem; }
.about__text > * + * { margin-top: 1.1rem; }
.person__text { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); font-weight: 560; letter-spacing: -0.018em; line-height: 1.3; text-wrap: pretty; }
.facts { display: grid; gap: 0.9rem; }
.about__text .facts { margin-top: 2rem; max-width: 30rem; }
.facts div { display: grid; gap: 0.1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.facts dt { font-size: 0.9rem; color: var(--sc-ink-soft); }
.facts dd { font-weight: 620; }

/* forms */
.form { position: relative; display: grid; gap: 1.25rem; max-width: 44rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-size: 0.93rem; font-weight: 620; }
.field .opt { font-weight: 400; color: var(--sc-ink-soft); }
.field__help { font-size: 0.9rem; color: var(--sc-ink-soft); }
.input {
  width: 100%; min-height: 3.1rem; padding: 0.7rem 0.9rem;
  background: #FFFFFF; color: var(--sc-ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color 150ms var(--ease);
}
textarea.input { min-height: 8rem; resize: vertical; }
select.input {
  appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E5B57' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.input::placeholder { color: #8F8B86; }
@media (hover: hover) and (pointer: fine) { .input:hover { border-color: #A9A49E; } }
.input:focus-visible { border-color: var(--accent-strong); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: 0.9rem; font-weight: 560; color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.total { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.5rem; padding-block: 1rem; border-block: 1px solid var(--line); align-self: end; }
.total dt { color: var(--sc-ink-soft); }
.total dd { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.total .total__sum { font-size: 1.6rem; font-weight: 760; letter-spacing: -0.02em; }
.form__status { padding: 1.1rem 1.25rem; border-radius: var(--r-sm); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.form__status:focus { outline: none; }
.form__status[data-kind="ok"] { box-shadow: inset 0 0 0 2px var(--accent); }
.form__status > * + * { margin-top: 0.75rem; }
.form__status strong { display: block; font-size: 1.1rem; }

.contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.direct { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg); background: var(--bg-2); }
.direct h2 { font-size: 1.2rem; font-weight: 700; }
.direct__person { display: flex; align-items: center; gap: 1rem; }
.direct__person .photo-sm { width: 4.5rem; }
.direct__big { display: inline-block; margin-top: 0.3rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 740; letter-spacing: -0.02em; line-height: 1.1; color: var(--sc-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .direct__big:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.15em; } }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1000px) {
  .hero__grid, .plate, .faq-home, .split, .contact, .page-hero--split { grid-template-columns: minmax(0, 1fr); }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc__price { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .build__stage { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0.9rem; padding: calc(var(--bar-h) + 0.5rem) var(--sc-gutter) 1rem; }
  .build__side { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: end; }
  .build__side .h2 { grid-column: 1 / -1; max-width: none; font-size: 1.55rem; }
  .build__for { grid-column: 1 / -1; margin-top: 0.6rem; }
  .build__count { grid-column: 1; grid-row: 3 / span 2; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0.7rem; }
  .build__label, .build__of { font-size: 0.85rem; }
  .build__num { font-size: clamp(3.2rem, 16vw, 4.4rem); }
  .build__steps { grid-column: 2; grid-row: 3; align-self: end; margin: 0; }
  .build__steps li { padding-left: 1.2rem; }
  .build__steps li:not([aria-current]) { display: none; }
  .build__desc { grid-column: 2; grid-row: 4; align-self: start; margin-top: 0; min-height: 2.9em; font-size: 0.9rem; }
  .build__device .device__bar { height: 2rem; }
  /* the frame takes all the height the stage has left, so the example has room to scroll */
  .build__stage { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .build__panel { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .build__device { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .build__screen { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .build__notes { padding: 0 10%; }
}
@media (max-width: 760px) {
  .offers { grid-template-columns: minmax(0, 1fr); }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc__col + .svc__col { border-left: 0; border-top: 1px solid var(--line); }
  .demo { padding: 0 1rem 2.25rem 0; }
  .device--phone { width: 33%; border-width: 5px; border-radius: 1.1rem; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot ul { justify-content: flex-start; }
  .cc { grid-template-columns: minmax(0, 1fr); }
  .about-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .switch--compact .chip { padding: 0 0.6rem; font-size: 0.84rem; }
  .actions .btn { white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .device--phone { transform: none; }
  .demo.is-swapping .ex { opacity: 1; }
  .build__device, .build__device[data-phase="5"] { transform: none; }
  .offer:hover { transform: none; }
}


/* ============================================================ MOTION + PRICE CALCULATOR (2026-09-14) == */
/* press feedback on everything you click */
.chip, .calc__quick button, .stepper__btn, .offer { transition: background-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease), transform 120ms var(--ease); }
.chip:active, .calc__quick button:active { transform: scale(0.95); }
.offer:active { transform: scale(0.99); }

/* FAQ answers slide open, menu links arrive one after another */
.faq-list details[open] .faq__a, .faq details[open] .faq__a { animation: sw-open 280ms var(--ease) both; }
@keyframes sw-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.index.is-open .index__list li { animation: sw-rise 420ms var(--ease) both; }
.index.is-open .index__list li:nth-child(2) { animation-delay: 40ms; }
.index.is-open .index__list li:nth-child(3) { animation-delay: 80ms; }
.index.is-open .index__list li:nth-child(4) { animation-delay: 120ms; }
.index.is-open .index__list li:nth-child(5) { animation-delay: 160ms; }

/* hero: one orchestrated entrance on load */
.hero__copy > *, .hero .demo-wrap { animation: sw-rise 700ms var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 70ms; }
.hero__copy > :nth-child(3) { animation-delay: 140ms; }
.hero__copy > :nth-child(4) { animation-delay: 210ms; }
.hero .demo-wrap { animation-delay: 160ms; }
@keyframes sw-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* photos drift at slightly different speeds while scrolling (site.js) */
[data-drift] { will-change: transform; }

/* contact page photo: square, head and shoulders */
.direct__person .photo-sm { object-position: 50% 14%; }

/* price calculator */
.calc { margin-top: 1.75rem; max-width: 30rem; }
.calc__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.calc__label { font-weight: 620; }
.stepper { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: var(--r-sm); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-strong); }
.stepper__btn { appearance: none; border: 0; background: transparent; width: 2.75rem; min-height: 2.75rem; font: inherit; font-size: 1.3rem; font-weight: 600; line-height: 1; color: var(--sc-ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .stepper__btn:hover { background: var(--bg-2); } }
.stepper__btn:active { transform: scale(0.88); }
.stepper__btn:disabled { color: #BDB8B2; cursor: default; transform: none; background: transparent; }
.stepper__input { width: 3.25rem; border: 0; border-inline: 1px solid var(--line); background: transparent; text-align: center; font: inherit; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--sc-ink); -moz-appearance: textfield; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus-visible { outline-offset: -3px; }
.calc__quick { display: flex; gap: 0.4rem; }
.calc__quick button { appearance: none; border: 0; cursor: pointer; min-width: 2.6rem; min-height: 2.5rem; padding: 0 0.7rem; border-radius: var(--r-sm); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-strong); font: inherit; font-weight: 620; color: var(--sc-ink); }
.calc__quick button[aria-pressed="true"] { background: var(--sc-ink); color: #FFFFFF; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .calc__quick button:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--sc-ink); } }
.calc .prices { margin-top: 0; }
.calc .prices div { padding-inline: 0.75rem; transition: background-color 220ms var(--ease); }
.calc .prices div.is-active { background: var(--accent-tint); }
.calc .prices div.is-active dt { color: var(--sc-ink); font-weight: 620; }
.calc__sum { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.3rem 1rem; margin-top: 1.1rem; padding-inline: 0.75rem; }
.calc__sum > span { color: var(--sc-ink-soft); }
.calc__sum b { display: inline-block; justify-self: end; font-weight: 680; font-variant-numeric: tabular-nums; transform-origin: 100% 50%; }
.calc__total { font-size: 1.75rem; font-weight: 760 !important; letter-spacing: -0.02em; }
.calc__save { grid-column: 1 / -1; justify-self: end; font-weight: 620; color: #8A3A0A; }
.calc__save b { transform-origin: 0 50%; }
.is-bump { animation: sw-bump 340ms var(--ease); }
@keyframes sw-bump { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .hero .demo-wrap, .index.is-open .index__list li, .faq details[open] .faq__a, .faq-list details[open] .faq__a, .is-bump { animation: none !important; }
  .btn:active, .chip:active, .calc__quick button:active, .stepper__btn:active, .offer:active { transform: none; }
  [data-drift] { transform: none !important; }
}

/* ===================================================== PRE-LAUNCH DETAILS == */
/* the note above a submit button, and standalone links big enough for a thumb */
.form__note { margin-bottom: -0.35rem; max-width: 52ch; }
.section__head .link, .faq-home .link, .block__head .link { display: inline-flex; align-items: center; min-height: 36px; }
/* the small portrait beside the contact details is a square file */
.photo-sm { object-fit: cover; }