:root {
  --ink: rgba(244, 238, 228, 0.92);
  --ink-soft: rgba(244, 238, 228, 0.7);
  --muted: rgba(244, 238, 228, 0.5);
  --paper: #151a23;
  --paper-deep: #10141b;
  --card: #1c222d;
  --rule: rgba(244, 238, 228, 0.11);
  --fill: rgba(244, 238, 228, 0.07);
  --fill2: rgba(244, 238, 228, 0.12);
  --coral: #e29a4b;
  --coral-soft: rgba(226, 154, 75, 0.16);
  --on-coral: #23170a;
  --moss: #1c222d;
  --sage: rgba(98, 189, 127, 0.16);
  --green: #62bd7f;
  --amber: #e0b656;
  --red: #e5695d;
  --serif: "Golos Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.home-sales {
  background: var(--paper);
  color: var(--ink);
}
.home-sales [hidden] {
  display: none !important;
}
.home-sales :focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.home-sales .home-hero,
.home-sales .home-section,
.home-sales .f-band,
.home-sales .f-dl {
  opacity: 1 !important;
  transform: none !important;
}
.home-sales h1,
.home-sales h2,
.home-sales h3,
.home-sales p {
  margin-top: 0;
}
.home-sales h1,
.home-sales h2 {
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.home-sales h1 {
  max-width: 660px;
  margin-bottom: 19px;
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 700;
}
.home-sales h2 {
  font-size: clamp(32px, 2.8vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.home-sales h1 em,
.home-sales h2 em {
  font-style: normal;
  color: var(--coral);
}
.home-sales .eyebrow,
.card-number {
  font: 700 11px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-sales .eyebrow {
  color: var(--coral);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.cat-feature .eyebrow {
  color: var(--coral);
}
.site-header {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.site-header .nav-shell {
  min-height: 60px;
}
/* On the home page the nav is hidden behind the Mac menu bar until the hero scrolls away. */
body[data-nav] .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(-100%);
  transition: transform 220ms ease;
}
body[data-nav="shown"] .site-header {
  transform: none;
}
body[data-nav] .site-header:focus-within {
  transform: none;
}
.home-lede {
  max-width: 540px;
  margin-bottom: 25px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}
.home-actions,
.download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.home-sales .button {
  border-radius: 14px;
  box-shadow: none;
}
.home-sales .button-dark {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--on-coral);
}
.home-sales .button-dark:hover {
  background: #eaa85f;
  border-color: #eaa85f;
}
.home-link {
  color: var(--ink);
  font-weight: 500;
  text-underline-offset: 4px;
}

.home-sales .home-section {
  padding: 92px 0;
}
.section-title {
  max-width: 770px;
  margin-bottom: 32px;
}
.clipboard-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 0.7fr);
  grid-template-rows: auto 1fr;
  gap: 10px 15px;
  margin-top: 20px;
}
.clipboard-search {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--fill);
}
.clipboard-search input {
  width: 100%;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
}
.clipboard-list {
  display: grid;
  gap: 5px;
  align-content: start;
}
.clipboard-list button {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.clipboard-list button[aria-pressed="true"],
.clipboard-list button:hover {
  border-color: rgba(226, 154, 75, 0.46);
  background: rgba(226, 154, 75, 0.16);
}
.clipboard-list button > span:first-child {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  background: var(--fill2);
}
.clipboard-list b,
.clipboard-list small {
  display: block;
}
.clipboard-list b {
  font-size: 12px;
}
.clipboard-list small {
  color: var(--muted);
  font-size: 10px;
}
.clipboard-preview {
  display: grid;
  align-self: stretch;
  min-height: 106px;
  padding: 12px;
  border-radius: 9px;
  background: var(--sage);
  color: var(--ink);
}
.preview-note {
  display: grid;
  align-content: center;
  gap: 5px;
}
.preview-note small {
  color: var(--green);
  font: 700 9px var(--mono);
  text-transform: uppercase;
}
.preview-note strong {
  font-size: 15px;
}
.preview-note > span {
  font-size: 12px;
}
.cat-feature {
  padding: 92px 0;
  background: var(--paper-deep);
  color: var(--ink);
}
.cat-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 85px);
  align-items: center;
}
.cat-feature h2 {
  max-width: 550px;
}
.cat-layout > div > p {
  color: var(--ink-soft);
}
.cat-window {
  padding: 13px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
}
.cat-window-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  color: var(--muted);
  font: 11px var(--mono);
}
.cat-track {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-deep);
}
.cat-runner {
  position: absolute;
  bottom: 16px;
  left: 10%;
  width: 96px;
  height: 96px;
  background-image: var(--critter-image);
  background-size: 384px 192px;
  animation: cat-sprite-large var(--cat-duration, 1.2s) steps(1) infinite;
}
.cat-window label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  font-size: 11px;
}
.cat-window label input {
  grid-column: 1/-1;
  width: 100%;
  accent-color: var(--coral);
}
.cat-window label output {
  font: 700 12px var(--mono);
}
.cat-layout .cat-window > p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.critter-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.critter-picker button {
  width: 33px;
  height: 33px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--fill);
  cursor: pointer;
}
.critter-picker button[aria-pressed="true"] {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.critter-picker i {
  display: block;
  width: 27px;
  height: 27px;
  margin: auto;
  background-size: 108px 54px;
}
.home-critter {
  width: 40px;
  height: 40px;
  background-image: var(--critter-image);
  background-size: 160px 80px;
  animation: cat-sprite-small var(--cat-duration, 1.2s) steps(1) infinite;
}
@keyframes cat-sprite-small {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: -40px 0;
  }
  25% {
    background-position: -80px 0;
  }
  37.5% {
    background-position: -120px 0;
  }
  50% {
    background-position: 0 -40px;
  }
  62.5% {
    background-position: -40px -40px;
  }
  75% {
    background-position: -80px -40px;
  }
  87.5%,
  100% {
    background-position: -120px -40px;
  }
}
@keyframes cat-sprite-large {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: -96px 0;
  }
  25% {
    background-position: -192px 0;
  }
  37.5% {
    background-position: -288px 0;
  }
  50% {
    background-position: 0 -96px;
  }
  62.5% {
    background-position: -96px -96px;
  }
  75% {
    background-position: -192px -96px;
  }
  87.5%,
  100% {
    background-position: -288px -96px;
  }
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
body[data-motion="paused"] .home-critter,
body[data-motion="paused"] .cat-runner,
body[data-motion="paused"] .native-critter-thumb,
body[data-motion="paused"] .native-critter-picker [data-native-critter-grid] i,
body[data-motion="paused"] .editor-caret {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .home-sales * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 900px) {
  .cat-layout {
    grid-template-columns: 1fr;
  }
  .cat-layout > div:last-child {
    order: -1;
  }
}
@media (max-width: 700px) {
  .home-sales .home-hero,
  .home-sales .home-section,
  .cat-feature {
    padding: 60px 0;
  }
  .home-sales h1 {
    font-size: clamp(43px, 13vw, 61px);
  }
  .desktop-nav {
    display: none;
  }
  .clipboard-workspace {
    grid-template-columns: 1fr;
  }
  .clipboard-preview {
    min-height: 80px;
  }
  .cat-track {
    height: 130px;
  }
  .home-sales .nav-actions .button {
    display: none;
  }
}
@media (max-width: 390px) {
  .home-sales h1 {
    font-size: 43px;
  }
  .home-lede {
    font-size: 16px;
  }
  .site-header .brand {
    font-size: 15px;
  }
}
.demo-note {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}
.panel-display small button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cpu-live {
  margin-top: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sr-demo-description {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
dialog[data-checkout-dialog] {
  width: min(460px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
dialog[data-checkout-dialog]::backdrop {
  background: rgba(8, 10, 14, 0.6);
  backdrop-filter: blur(3px);
}
dialog[data-checkout-dialog] > button[data-checkout-close] {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--fill2);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
dialog[data-checkout-dialog] h2 {
  margin: 8px 36px 8px 0;
  font-size: 34px;
  letter-spacing: -0.04em;
}
dialog[data-checkout-dialog] h2 strong {
  font-weight: 600;
  color: var(--coral);
}
dialog[data-checkout-dialog] p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
dialog[data-checkout-dialog] .checkout-macs {
  display: inline-block;
  margin: 5px 0 16px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--sage);
  color: var(--moss);
  font-size: 12px;
  font-weight: 650;
}
dialog[data-checkout-dialog] form {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
dialog[data-checkout-dialog] label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
}
dialog[data-checkout-dialog] input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--fill);
  padding: 0 11px;
  color: var(--ink);
  font: 16px var(--sans);
}
dialog[data-checkout-dialog] form > button {
  height: 45px;
  border: 0;
  border-radius: 8px;
  background: var(--coral);
  color: var(--on-coral);
  font-weight: 600;
  cursor: pointer;
}
dialog[data-checkout-dialog] form > button:hover {
  background: #eaa85f;
}
dialog[data-checkout-dialog] [data-checkout-error] {
  min-height: 1.2em;
  margin: 0;
  color: var(--red);
  font-size: 12px;
}

/* ==========================================================================
   Terrace hero — ported from the design canvas (terrace.css).
   Mac surface tokens (.mac-dark), shared components (.m-*), the menu-bar
   panel (.p-*), compact clipboard (.cb*), dictation capsule (.dc), stat card
   (.stat), side chips (.chip), menu bar (.mbar), popover arrow (.p-arrow),
   the hero artboards (.hero-terrace / .ht-* / .h-*) and the «Replaces» strip
   (.x-*). Values are the canvas values; only the data hooks the site scripts
   need (aria-pressed / aria-checked / data-* states) are added on top.
   ========================================================================== */
.mac-dark {
  --m-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --m-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --m-material: rgba(36, 40, 50, 0.76);
  --m-ink: rgba(244, 238, 228, 0.9);
  --m-ink2: rgba(244, 238, 228, 0.6);
  --m-ink3: rgba(244, 238, 228, 0.42);
  --m-line: rgba(244, 238, 228, 0.11);
  --m-fill: rgba(244, 238, 228, 0.07);
  --m-fill2: rgba(244, 238, 228, 0.12);
  --m-card: rgba(244, 238, 228, 0.05);
  --m-elev: rgba(66, 70, 82, 0.92);
  --m-orange: #e29a4b;
  --m-on-orange: rgba(0, 0, 0, 0.86);
  --m-green: #62bd7f;
  --m-red: #e5695d;
  --m-amber: #e0b656;
  --m-blue: #6a9fe0;
  --m-ring: 0 0 0 1px rgba(244, 238, 228, 0.1);
  --m-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  --m-knob: #ffffff;
}

/* shared Mac components */
.m-panel {
  position: relative;
  background: var(--m-material);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border-radius: var(--r4);
  box-shadow: var(--m-ring), var(--m-shadow);
  color: var(--m-ink);
  font: 400 12.5px/1.3 var(--m-font);
  -webkit-font-smoothing: antialiased;
}
.m-panel button,
.m-panel a { font-family: inherit; color: inherit; text-decoration: none; }
.m-head { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.m-title { font-size: 13.5px; font-weight: 600; }
.m-tile { width: 28px; height: 28px; border-radius: var(--r2); background: var(--m-elev); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--m-line); flex: none; color: var(--m-ink2); }
.m-tile svg { width: 14px; height: 14px; }
.m-tile.s24 { width: 24px; height: 24px; border-radius: 7px; }
.m-tile.s24 svg { width: 13px; height: 13px; }
.m-tile.orange { color: var(--m-orange); }
.m-tile.green { color: var(--m-green); }
.m-tile.blue { color: var(--m-blue); }
.m-pill { height: 22px; border-radius: 999px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-ink2); white-space: nowrap; }
.m-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.m-pill.green { color: var(--m-green); background: color-mix(in srgb, var(--m-green) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-green) 48%, transparent); }
.m-pill.orange { color: var(--m-orange); background: color-mix(in srgb, var(--m-orange) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-orange) 46%, transparent); }
.m-pill.s20 { height: 20px; padding: 0 7px; font-family: var(--m-mono); }
.m-hair { height: 1px; background: var(--m-line); }
.m-body { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.m-card { border-radius: var(--r3); background: var(--m-card); box-shadow: inset 0 0 0 1px var(--m-line); }
.m-row { height: 34px; display: flex; align-items: center; gap: 10px; }
.m-label { font-size: 12.5px; font-weight: 500; }
.m-sub { font-size: 11px; color: var(--m-ink2); }
.m-row .m-sub { white-space: nowrap; }
.m-seg { display: inline-flex; background: var(--m-fill); border-radius: 7px; padding: 2px; height: 24px; box-shadow: inset 0 0 0 1px var(--m-line); }
.m-seg > span,
.m-seg > button { padding: 0 10px; border: 0; border-radius: 5px; background: transparent; font-size: 11px; font-weight: 500; display: flex; align-items: center; color: var(--m-ink2); white-space: nowrap; cursor: pointer; }
.m-seg > .on,
.m-seg > [aria-pressed="true"] { background: var(--m-elev); color: var(--m-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); }
.m-kbd { font: 500 10.5px/1 var(--m-mono); padding: 3px 5px; border-radius: var(--r1); background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-ink2); white-space: nowrap; }
.m-switch { width: 26px; height: 15px; border-radius: 999px; background: var(--m-fill2); position: relative; flex: none; border: 0; padding: 0; cursor: pointer; }
.m-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--m-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.m-switch.on,
.m-switch[aria-checked="true"] { background: var(--m-orange); }
.m-switch.on::after,
.m-switch[aria-checked="true"]::after { left: 13px; }
.m-switch[aria-checked="false"] { background: var(--m-fill2); }
.m-switch[aria-checked="false"]::after { left: 2px; }
.m-slider { height: 4px; border-radius: 2px; background: var(--m-fill2); position: relative; flex: 1; display: block; }
.m-slider .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--m-orange); width: var(--brightness, 76%); }
.m-slider .knob { position: absolute; top: 50%; left: var(--brightness, 76%); width: 13px; height: 13px; border-radius: 50%; background: var(--m-knob); transform: translate(-50%, -50%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3); }
.m-slider .tick { position: absolute; top: -3px; width: 1px; height: 10px; background: var(--m-ink3); }
.m-btn { height: 26px; padding: 0 12px; border-radius: var(--r2); font: 500 12px/1 var(--m-font); background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-ink); display: inline-flex; align-items: center; gap: 6px; border: 0; white-space: nowrap; cursor: pointer; }
.m-btn.accent { background: var(--m-orange); color: var(--m-on-orange); box-shadow: none; }
.m-btn.ghost { background: transparent; box-shadow: none; color: var(--m-ink2); }
.m-btn.ghost:hover { background: var(--m-fill); color: var(--m-ink); }
.m-btn.s32 { height: 32px; padding: 0 12px; font-size: 12.5px; }
.m-btn.s22 { height: 20px; padding: 0 8px; font-size: 10.5px; background: var(--m-orange); color: var(--m-on-orange); box-shadow: none; }
.m-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.m-foot { height: 42px; display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.m-foot .sp,
.m-head .sp,
.sig-meta .sp { flex: 1; }
.m-foot .quit { color: var(--m-ink2); }
.m-ico { width: 14px; height: 14px; flex: none; }
.m-ico.s12 { width: 12px; height: 12px; }
.m-ico.s16 { width: 16px; height: 16px; }
.m-num { font-family: var(--m-mono); font-variant-numeric: tabular-nums; }

/* critter sprite (4 × 2 frames), driven by the site's --critter-image and --cat-duration */
.critter { --cell: 22px; display: inline-block; width: var(--cell); height: var(--cell); background-image: var(--critter-image); background-size: calc(var(--cell) * 4) calc(var(--cell) * 2); background-repeat: no-repeat; background-position: 0 0; animation: crit var(--cat-duration, 0.9s) steps(1) infinite; flex: none; }
.critter.s20 { --cell: 20px; }
.critter.s18 { --cell: 18px; }
.critter.s16 { --cell: 16px; }
.mac-dark .critter,
.inv .critter { filter: invert(1); }
@keyframes crit {
  0% { background-position: 0 0; }
  12.5% { background-position: calc(var(--cell) * -1) 0; }
  25% { background-position: calc(var(--cell) * -2) 0; }
  37.5% { background-position: calc(var(--cell) * -3) 0; }
  50% { background-position: 0 calc(var(--cell) * -1); }
  62.5% { background-position: calc(var(--cell) * -1) calc(var(--cell) * -1); }
  75% { background-position: calc(var(--cell) * -2) calc(var(--cell) * -1); }
  87.5%, 100% { background-position: calc(var(--cell) * -3) calc(var(--cell) * -1); }
}

/* --- the menu-bar panel (380 wide) --- */
.panel { width: 380px; }
.p-sig { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.sig-line { display: flex; align-items: center; gap: 10px; height: 20px; font-size: 14px; }
.sig-wrong { color: var(--m-ink3); font-family: var(--m-font); white-space: pre; }
.sig-wrong.gone { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--m-red) 70%, transparent); }
.sig-right { font-weight: 600; color: var(--m-ink); opacity: 0; transition: opacity 220ms ease; }
.sig-right.show { opacity: 1; }
.sig-arrow { width: 14px; height: 14px; color: var(--m-orange); opacity: 0; transition: opacity 220ms ease; }
.sig-arrow.show { opacity: 1; }
.sig-caret { display: inline-block; width: 1.5px; height: 15px; background: var(--m-ink); margin-left: 1px; vertical-align: -3px; animation: sig-blink 1.1s steps(1) infinite; }
@keyframes sig-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.sig-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--m-ink3); }
.p-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 2px; }
.p-stats > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-stats .num { font: 600 18px/1.1 var(--m-mono); color: var(--m-orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-stats .num.q { color: var(--m-ink); }
.p-stats .lab { font-size: 10.5px; line-height: 1.25; color: var(--m-ink2); }
.p-bar { width: 100%; max-width: 96px; height: 4px; border-radius: 2px; background: var(--m-fill2); overflow: hidden; margin-top: 3px; }
.p-bar i { display: block; height: 100%; width: 71%; background: var(--m-green); }
.p-disp { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.p-disp .top { display: flex; align-items: center; gap: 8px; }
.p-disp .top .m-ico { color: var(--m-ink2); }
.p-disp .top .val { margin-left: auto; font: 500 11.5px var(--m-mono); color: var(--m-ink2); font-variant-numeric: tabular-nums; }
.p-disp .bot { display: flex; align-items: center; gap: 12px; position: relative; height: 16px; margin: 0; cursor: pointer; }
.p-disp .bot input { position: absolute; inset: -6px 0; width: 100%; height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; }
.p-disp .modes { display: flex; align-items: center; gap: 8px; }
.p-disp .modes .m-sub { margin-right: auto; }
.m-tog { height: 22px; border-radius: 999px; padding: 0 9px 0 7px; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-ink2); white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; }
.m-tog .sw { width: 20px; height: 12px; border-radius: 999px; background: var(--m-fill2); position: relative; flex: none; }
.m-tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.m-tog.on,
.m-tog[aria-pressed="true"] { color: var(--m-ink); }
.m-tog.on .sw,
.m-tog[aria-pressed="true"] .sw { background: var(--m-orange); }
.m-tog.on .sw::after,
.m-tog[aria-pressed="true"] .sw::after { left: 10px; }
.p-load { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; }
.p-load .top { display: flex; align-items: center; gap: 8px; }
.p-load .top .lnk { margin-left: auto; font-size: 10.5px; color: var(--m-ink3); }
.p-load .meters { display: grid; grid-template-columns: 0.9fr 0.9fr 1.25fr; gap: 10px; }
.p-meter { display: flex; flex-direction: column; gap: 5px; min-width: 0; --metric-tone: var(--m-green); }
.p-meter .l { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--m-ink2); white-space: nowrap; }
.p-meter .l output { font: 600 10.5px/1.3 var(--m-mono); font-variant-numeric: tabular-nums; color: var(--metric-tone); }
.p-meter .bar { height: 4px; border-radius: 2px; background: var(--m-fill2); overflow: hidden; display: block; }
.p-meter .bar i { display: block; height: 100%; width: var(--meter, 0%); background: var(--metric-tone); }
.p-meter .d { font-size: 10px; color: var(--m-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p-tool { padding: 9px 10px; min-height: 58px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.p-tool .t { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.p-tool .t .m-ico { color: var(--m-ink2); width: 13px; height: 13px; }
.p-tool .t .m-switch { margin-left: auto; }
.p-tool .s { font-size: 10.5px; color: var(--m-ink2); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.p-tool .s .m-kbd { font-size: 9.5px; padding: 2px 4px; }
.p-tool.on .t .m-ico { color: var(--m-orange); }
.native-panel[data-dictation-phase="recording"] .p-tool [data-native-dictation-action],
.native-panel[data-dictation-phase="processing"] .p-tool [data-native-dictation-action] { background: var(--m-fill2); color: var(--m-ink); }
/* The tile has no switch (the app keeps it in the context menu; here it lives in the dictation window):
   the icon tone carries the on/off state, the button turns dictation back on. */
.native-panel[data-dictation-enabled="false"] .native-dictation .m-ico { color: var(--m-ink2); }
.native-panel[data-dictation-enabled="false"] .native-dictation [data-native-dictation-action] { background: var(--m-fill2); color: var(--m-ink); }
.native-panel[data-correction-mode="manual"] .native-status { color: var(--m-amber); background: color-mix(in srgb, var(--m-amber) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-amber) 48%, transparent); }
.native-panel[data-correction-mode="off"] .native-status { color: var(--m-ink2); background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); }

/* critter picker inside the panel header (details/summary on the icon tile) */
.native-critter-picker { position: relative; }
.native-critter-picker summary { list-style: none; cursor: pointer; }
.native-critter-picker summary::-webkit-details-marker { display: none; }
.native-critter-picker [data-native-critter-grid] { position: absolute; z-index: 5; top: 34px; left: 0; display: none; width: 340px; padding: 10px; border-radius: var(--r3); background: var(--m-elev); box-shadow: var(--m-ring), 0 14px 34px rgba(0, 0, 0, 0.45); }
.native-critter-picker[open] [data-native-critter-grid] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.native-critter-picker [data-native-critter-grid] button { display: flex; align-items: center; gap: 7px; height: 38px; border: 1px solid transparent; border-radius: var(--r2); background: transparent; color: var(--m-ink); font: 11px var(--m-font); text-align: left; cursor: pointer; }
.native-critter-picker [data-native-critter-grid] button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-critter-picker [data-native-critter-grid] button[aria-pressed="true"] { border-color: var(--m-orange); background: color-mix(in srgb, var(--m-orange) 14%, transparent); }
.native-critter-picker [data-native-critter-grid] button[aria-pressed="true"]::after { margin-left: auto; color: var(--m-orange); content: "✓"; font-weight: 700; }
.native-critter-picker [data-native-critter-grid] i { width: 24px; height: 24px; flex: 0 0 24px; background-size: 96px 48px; filter: invert(1); animation: native-picker-sprite var(--cat-duration, 1.2s) steps(1) infinite; }
.native-critter-picker [data-native-critter-grid] .critter-classic { display: grid; place-items: center; filter: none; font-style: normal; color: var(--m-ink2); animation: none; }

/* floating window + toast inside the stage */
.native-toast { position: absolute; z-index: 6; left: 50%; top: 88px; transform: translateX(-50%); padding: 9px 12px; border-radius: var(--r2); background: var(--m-elev); box-shadow: var(--m-ring), 0 10px 24px rgba(0, 0, 0, 0.4); color: var(--m-ink); font: 11px var(--m-font); white-space: nowrap; }
.native-window-panel { position: absolute; z-index: 5; left: 50%; top: 70px; width: min(350px, calc(100% - 24px)); max-height: calc(100% - 100px); overflow: auto; transform: translateX(-50%); }
.native-window-panel .m-head { height: 44px; padding: 0 10px 0 16px; }
.native-window-panel .m-head .dc-btn { margin-left: auto; cursor: pointer; border: 0; }
.native-window-content { padding: 12px 16px 16px; font-size: 12px; }
.native-window-content h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.native-window-content p { margin: 7px 0; color: var(--m-ink2); line-height: 1.4; }
.native-window-content nav { display: grid; gap: 5px; margin-top: 9px; }
.native-window-content a { color: var(--m-orange); text-underline-offset: 2px; text-decoration: underline; }
.native-window-content dl { display: grid; gap: 5px; margin: 8px 0; }
.native-window-content dl div { display: flex; justify-content: space-between; gap: 8px; }
.native-window-content dd { margin: 0; font: 11px var(--m-mono); color: var(--m-ink2); }
.native-window-content .native-window-dictation { display: grid; gap: 10px; }
.native-window-content .native-window-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r2); background: var(--m-fill); font-weight: 500; }
.native-window-content .native-window-dictation button.m-switch { justify-self: auto; width: 26px; height: 15px; padding: 0; border-radius: 999px; background: var(--m-fill2); }
.native-window-content .native-window-dictation button.m-switch[aria-checked="true"] { background: var(--m-orange); }
.native-window-content .native-window-dictation button[disabled] { opacity: 0.45; cursor: default; }
.native-window-content .native-window-dictation button { justify-self: start; height: 26px; padding: 0 12px; border: 0; border-radius: var(--r2); background: var(--m-orange); color: var(--m-on-orange); font: 500 12px var(--m-font); cursor: pointer; }
.native-window-content .clipboard-workspace { margin-top: 4px; }

/* --- compact clipboard (300 wide) --- */
.cb { display: flex; flex-direction: column; }
.cb .m-head .sp { flex: 1; }
.cb-search { margin: 12px 16px 10px; height: 30px; border-radius: var(--r2); background: var(--m-elev); box-shadow: inset 0 0 0 1px var(--m-line); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12.5px; color: var(--m-ink3); }
.cb-search .m-ico { color: var(--m-ink3); }
.cb-list { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; }
.cb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r2); background: var(--m-card); box-shadow: inset 0 0 0 1px var(--m-line); }
.cb-row.sel { background: color-mix(in srgb, var(--m-orange) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-orange) 46%, transparent); }
.cb-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-t { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-m { font-size: 11px; color: var(--m-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-foot { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 10.5px; color: var(--m-ink2); }
.cb-foot .m-kbd { font-size: 10px; padding: 2px 4px; }
.cb-foot > span { display: inline-flex; align-items: center; gap: 5px; }
.cb.compact { width: 300px; height: auto; }
.cb.compact .m-head { height: 44px; padding: 0 12px; }
.cb.compact .cb-search { margin: 8px 12px 8px; }
.cb.compact .cb-list { padding: 0 12px 10px; gap: 5px; }
.cb.compact .cb-row { padding: 7px 8px; }
.cb.compact .cb-foot { height: 38px; padding: 0 12px; gap: 10px; }

/* --- dictation capsule --- */
.dc { width: 332px; height: 52px; border-radius: 22px; padding: 10px; display: flex; align-items: center; gap: 12px; }
.orb { width: 32px; height: 32px; border-radius: 50%; background: var(--m-orange); display: grid; place-items: center; position: relative; flex: none; color: rgba(0, 0, 0, 0.85); }
.orb svg { width: 14px; height: 14px; }
.orb .halo { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--m-orange); animation: halo 1.6s ease-out infinite; }
@keyframes halo { 0% { transform: scale(0.78); opacity: 0.6; } 100% { transform: scale(1.15); opacity: 0; } }
.wave { display: flex; align-items: center; gap: 2px; height: 24px; flex: 1; }
.wave i { display: block; width: 2px; border-radius: 1px; background: var(--m-orange); height: 30%; animation: wv 0.9s ease-in-out infinite alternate; }
.wave i:nth-child(3n) { animation-duration: 0.7s; }
.wave i:nth-child(4n) { animation-duration: 1.1s; }
@keyframes wv { to { transform: scaleY(0.45); } }
.dc .clock { font: 500 12px var(--m-mono); color: var(--m-ink2); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.dc-btn { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--m-ink) 8%, transparent); display: grid; place-items: center; color: var(--m-ink2); flex: none; }
.dc-btn svg { width: 13px; height: 13px; }
.dc-btn.pri { background: var(--m-orange); color: rgba(0, 0, 0, 0.85); }
.dc-btn.s28 { width: 28px; height: 28px; }

/* --- stat card (from the Overview screen) --- */
.stat { width: 332px; padding: 13px 14px; border-radius: var(--r3); background: linear-gradient(135deg, color-mix(in srgb, var(--m-orange) 14%, var(--m-material)), var(--m-material)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-orange) 28%, transparent), var(--m-shadow); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); color: var(--m-ink); font-family: var(--m-font); }
.stat .k { font: 600 10px/1 var(--m-mono); letter-spacing: 0.07em; color: var(--m-orange); }
.stat .v { font: 600 30px/1.1 var(--m-mono); color: var(--m-orange); margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat .y { font: 600 12px/1 var(--m-mono); color: var(--m-orange); margin-top: 8px; }
.stat .n { font-size: 11px; color: var(--m-ink2); margin-top: 6px; }

/* --- hero side chips --- */
.chip { height: 40px; border-radius: 999px; padding: 0 14px 0 8px; display: inline-flex; align-items: center; gap: 9px; background: var(--m-material); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); box-shadow: var(--m-ring), 0 14px 34px rgba(0, 0, 0, 0.38); color: var(--m-ink); font: 500 12.5px/1 var(--m-font); white-space: nowrap; text-decoration: none; }
.chip .m-sub { font-size: 11.5px; }
.chip .m-tile.s24 { background: var(--m-fill2); box-shadow: none; }

/* --- menu bar --- */
.mbar { position: absolute; left: 0; top: 0; width: 100%; height: 25px; display: flex; align-items: center; padding: 0 12px 0 16px; font: 400 13px/1 var(--m-font); color: rgba(255, 255, 255, 0.96); background: rgba(20, 24, 32, 0.42); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); text-shadow: 0 0 8px rgba(0, 0, 0, 0.35); z-index: 3; }
.mbar .apple { width: 15px; height: 15px; fill: #fff; margin-right: 18px; }
.mbar .app { font-weight: 700; margin-right: 18px; }
.mbar .menu { margin-right: 17px; }
.mbar .right { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.mbar .right svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mbar .clock { font-weight: 500; letter-spacing: 0.01em; }
.mbar .status { position: absolute; left: 50%; top: 2px; height: 21px; width: 30px; margin-left: -15px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); border-radius: 5px; border: 0; padding: 0; cursor: pointer; }
.mbar .status .critter { filter: invert(1); }
.mbar .pause { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; padding: 0 2px; cursor: pointer; opacity: 0.85; }
/* Input-source menu item: the site language switch, drawn like the macOS layout badge. */
.mbar .input-menu { display: inline-flex; align-items: center; gap: 3px; }
.mbar .input-menu button { height: 19px; min-width: 27px; padding: 0 5px; border: 0; border-radius: 4px; background: transparent; color: rgba(255, 255, 255, 0.55); font: 700 11px/1 var(--m-font); letter-spacing: 0.04em; cursor: pointer; text-shadow: none; transition: color 140ms ease, box-shadow 140ms ease; }
.mbar .input-menu button:hover { color: #fff; }
.mbar .input-menu button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.p-arrow { position: absolute; left: 50%; top: 27px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: rgba(46, 50, 61, 0.98); border-radius: 3px; box-shadow: -1px -1px 0 rgba(244, 238, 228, 0.09); z-index: 2; }

/* --- the hero (desktop artboard 1440 × 640 scene, copy in flow; the scene scales with the viewport
   between 640 and 1916 px — see home-demo.js — so the painting always reaches both edges) --- */
.hero-terrace {
  --ht-scale: 1;
  --ht-scene: 640px;
  position: relative;
  overflow: hidden;
  padding: 0 0 56px;
  background: var(--ground);
  color: var(--s-ink, rgba(244, 238, 228, 0.92));
}
/* The painting is 1916 × 821. It scales with the scene (--ht-scale) and, past 1916 × scale, `cover`
   stretches it to the viewport edge instead of leaving dusk bands at the sides of wide screens. */
.ht-wall { position: absolute; left: 0; top: 0; width: 100%; height: calc(821px * var(--ht-scale)); background: url(/hero-terrace.webp) center top / cover no-repeat; pointer-events: none; }
.ht-wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 26, 35, 0.26) 0%, rgba(21, 26, 35, 0) 14%, rgba(21, 26, 35, 0) 52%, rgba(21, 26, 35, 0.62) 80%, #151a23 100%); }
.ht-glow { position: absolute; left: 50%; top: calc(400px * var(--ht-scale)); width: 900px; height: 520px; margin-left: -450px; background: radial-gradient(50% 50% at 50% 50%, rgba(226, 154, 75, 0.15) 0%, rgba(226, 154, 75, 0) 70%); pointer-events: none; }
.ht-scene { position: relative; height: calc(var(--ht-scene) * var(--ht-scale)); }
.ht-stage { --brightness: 100%; position: absolute; left: 50%; top: 0; width: 1440px; height: var(--ht-scene); margin-left: -720px; transform: translateX(calc(720px * (1 - var(--ht-scale)))) scale(var(--ht-scale)); transform-origin: 0 0; }
.hero-stage::after { position: absolute; inset: 0; background: transparent; pointer-events: none; content: ""; }
.h-panel { position: absolute; left: 530px; top: 34px; z-index: 2; }
.h-panel::after { content: ""; position: absolute; inset: 0; border-radius: var(--r4); background: rgb(0 0 0 / calc((100% - var(--brightness)) * 0.55)); pointer-events: none; z-index: 3; }
.hero-stage.is-warm .h-panel::after { background: rgb(226 154 75 / calc(0.14 + (100% - var(--brightness)) * 0.4)); }
.hero-stage.is-grayscale .h-panel { filter: grayscale(1); }
.h-left { position: absolute; left: 96px; top: 118px; width: 300px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.h-right { position: absolute; left: 1044px; top: 150px; width: 332px; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }

.h-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: -18px; }
.h-logo { width: 56px; height: 56px; }
/* `.home-sales h1` caps width at 660px; the hero title needs the full line. */
.home-sales .h-h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 26px 0 0; text-wrap: balance; font-size: clamp(40px, 4.45vw, 64px); max-width: 1000px; color: inherit; }
.h-note [data-dmg-size] { white-space: nowrap; }
.h-sub { font-weight: 400; line-height: 1.55; color: rgba(244, 238, 228, 0.7); margin: 22px 0 0; text-wrap: pretty; font-size: 18.5px; max-width: 660px; }
.h-sub b { font-weight: 600; color: rgba(244, 238, 228, 0.92); }
.h-copy .ctas { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.h-cta { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 14px; background: #e29a4b; color: #23170a; font-weight: 600; font-size: 15.5px; box-shadow: 0 12px 34px rgba(226, 154, 75, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3); text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.h-cta:hover { background: #eaa85f; transform: translateY(-2px); }
.h-cta svg { width: 18px; height: 18px; }
.h-link { font-size: 15px; font-weight: 500; color: rgba(244, 238, 228, 0.7); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.h-link:hover { color: rgba(244, 238, 228, 0.92); }
.h-note { font-size: 13px; color: rgba(244, 238, 228, 0.5); margin: 18px 0 0; }
.x-strip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.x-strip .x-lab { font-size: 13px; color: rgba(244, 238, 228, 0.5); margin-right: 4px; }
.x-chip { height: 34px; padding: 0 12px 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: rgba(244, 238, 228, 0.06); box-shadow: inset 0 0 0 1px rgba(244, 238, 228, 0.11); font: 500 13px/1 var(--sans); color: rgba(244, 238, 228, 0.7); white-space: nowrap; }
.x-mark { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, #e29a4b 20%, transparent); color: #e29a4b; display: grid; place-items: center; flex: none; }
.x-mark svg { width: 9px; height: 9px; }

.ht-mobile-grid,
.ht-mobile-capsule { display: none; }

/* mobile hero (≤ 640): no menu bar, panel attached to the top edge at 94 %,
   copy, «Replaces» chips in two rows, the toolkit as a 2-column chip grid,
   the dictation capsule at its true size. */
@media (max-width: 640px) {
  /* No Mac menu bar on phones, so the site nav (brand, EN/RU, menu) stays in flow above the hero. */
  body[data-nav] .site-header { position: sticky; transform: none; transition: none; }
  .hero-terrace { --ht-scale: 1; padding-bottom: 44px; }
  .ht-wall { height: 680px; background: url(/hero-terrace.webp) 52% top / auto 760px no-repeat; }
  .ht-wall::after { background: linear-gradient(180deg, rgba(21, 26, 35, 0.1) 0%, rgba(21, 26, 35, 0) 30%, rgba(21, 26, 35, 0.6) 72%, #151a23 100%); }
  .ht-glow { display: none; }
  .ht-scene { height: auto; padding: 12px 16px 0; }
  .ht-stage { position: relative; left: auto; top: auto; width: 100%; height: auto; margin: 0; transform: none; }
  .mbar, .p-arrow, .h-left, .h-right { display: none; }
  .h-panel { position: relative; left: 0; top: 0; width: 100%; }
  .native-window-panel { top: 40px; }
  .h-copy { margin-top: 0; padding: 0 20px; width: auto; }
  .h-logo { width: 52px; height: 52px; }
  .home-sales .h-h1 { font-size: 40px; margin-top: 18px; max-width: 350px; }
  .h-sub { font-size: 16.5px; margin-top: 16px; max-width: 350px; }
  .h-copy .ctas { width: 100%; flex-direction: column; gap: 14px; margin-top: 26px; }
  .h-cta { width: 100%; justify-content: center; height: 52px; }
  .h-copy .h-link { display: none; }
  .h-note { margin-top: 14px; }
  .x-strip { margin-top: 22px; gap: 6px; }
  .x-strip .x-lab { width: 100%; text-align: center; margin: 0 0 2px; }
  .x-chip { height: 30px; font-size: 12px; padding: 0 10px 0 7px; }
  .ht-mobile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 28px 16px 0; position: relative; z-index: 2; }
  .ht-mobile-grid .chip { height: 46px; padding: 0 12px 0 8px; justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; }
  .ht-mobile-grid .chip .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ht-mobile-grid .chip .tx b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
  .ht-mobile-grid .chip .tx span { font-size: 10.5px; color: var(--m-ink2); overflow: hidden; text-overflow: ellipsis; }
  .ht-mobile-capsule { display: flex; justify-content: center; margin-top: 18px; position: relative; z-index: 2; }
  .ht-mobile-capsule .dc { max-width: 100%; }
  .m-seg > span,
  .m-seg > button { padding: 0 7px; font-size: 10.5px; }
  .m-row { gap: 6px; }
  .p-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-tools > .p-tool:last-child { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .critter, .sig-caret, .orb .halo, .wave i { animation: none; }
  .critter { background-position: 0 0; }
  .orb .halo { opacity: 0; }
  .sig-right, .sig-arrow { transition: none; }
}
body[data-motion="paused"] .critter,
body[data-motion="paused"] .orb .halo,
body[data-motion="paused"] .wave i { animation-play-state: paused; }

/* --- «Klavadabra replaces» (3 × 2 tiles, from the canvas page flow) --- */
.f-replaces .f-head,
.f-demo .f-head,
.f-tools .f-head,
.f-time .f-head,
.f-compare .f-head,
.f-pricing .f-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.f-replaces .f-head h2,
.f-demo .f-head h2,
.f-tools .f-head h2,
.f-time .f-head h2,
.f-compare .f-head h2,
.f-pricing .f-head h2 { max-width: 760px; }
.f-replaces .f-head .eyebrow,
.f-demo .f-head .eyebrow,
.f-tools .f-head .eyebrow,
.f-time .f-head .eyebrow,
.f-compare .f-head .eyebrow,
.f-pricing .f-head .eyebrow { margin-bottom: 14px; }
.f-replaces .f-body,
.f-demo .f-body,
.f-tools .f-body { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; }
.f-rep-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.f-rep { padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.f-rep-top { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.f-rep-top .f-rep-x { margin-left: auto; }
.f-rep-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 24px; color: var(--ink); }
.f-rep-x { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--coral) 18%, transparent); display: grid; place-items: center; flex: none; }
.f-rep-x svg { display: block; width: 10px; height: 10px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; }
.f-rep-cat { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--muted); }
.f-rep-now { margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--ink-soft); text-wrap: pretty; }
.f-rep-note { display: block; margin: 16px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
@media (max-width: 900px) { .f-rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .f-rep-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- page flow below the hero, ported from the canvas (flow.css, unprefixed) --- */
/* 1. promises: three arch cards */
.f-promises { padding-top: 24px; }
.f-arch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.f-arch { min-height: 352px; padding: 68px 40px 44px; border-radius: 180px 180px 16px 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule), inset 0 80px 90px -70px rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.f-tile40 { width: 40px; height: 40px; border-radius: 8px; }
.f-tile40 svg { width: 18px; height: 18px; }
.f-arch h3 { margin: 26px 0 0; max-width: 270px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.f-arch p { margin: 12px 0 0; max-width: 290px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
@media (max-width: 1024px) { .f-arch { padding: 56px 24px 36px; min-height: 0; } }
@media (max-width: 900px) { .f-arch-grid { gap: 14px; } .f-arch { padding: 48px 18px 30px; border-radius: 140px 140px 16px 16px; } .f-arch h3 { font-size: 18px; } .f-arch p { font-size: 14.5px; } }
@media (max-width: 640px) { .f-arch-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .f-arch { padding: 56px 28px 36px; border-radius: 160px 160px 16px 16px; } .f-arch h3 { font-size: 20px; } .f-arch p { font-size: 15.5px; } }

/* 2. the TextEdit window with the live typing demo (home-demo.js drives the data-demo-* hooks) */
.f-demo-stage { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.f-win { position: relative; width: min(760px, 100%); border-radius: 16px; background: #161921; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 30px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 180px 40px rgba(226, 154, 75, 0.09); font-family: var(--m-font); color: var(--m-ink); overflow: hidden; }
.f-win-bar { position: relative; height: 44px; display: flex; align-items: center; padding: 0 16px; background: rgba(255, 255, 255, 0.035); border-bottom: 1px solid var(--m-line); }
.f-lights { position: relative; z-index: 1; display: flex; gap: 8px; }
.f-lights i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.f-lights i:nth-child(1) { background: #ff5f57; }
.f-lights i:nth-child(2) { background: #febc2e; }
.f-lights i:nth-child(3) { background: #28c840; }
.f-win-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--m-ink2); pointer-events: none; }
.f-win-body { min-height: 220px; padding: 24px 44px; display: flex; align-items: center; gap: 16px; font-size: 24px; line-height: 32px; }
.f-win-body .f-wrong { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-ink2); font: inherit; font-family: var(--m-font); }
.f-win-body .f-wrong:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--m-orange); color: var(--m-ink); }
.f-win-body .f-arrow { width: 22px; height: 22px; color: var(--m-orange); flex: none; }
.f-right { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; font-weight: 600; color: var(--m-ink); white-space: nowrap; overflow: hidden; }
.f-right code { font: inherit; }
.f-caret { display: inline-block; width: 2px; height: 26px; margin-left: 3px; background: var(--m-ink); animation: sig-blink 1.1s steps(1) infinite; flex: none; }
.f-demo-stage[data-demo-state="typing"] .f-caret { animation: none; opacity: 1; }
.f-win-status { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 20px; border-top: 1px solid var(--m-line); font: 500 12.5px/1.3 var(--m-mono); color: var(--m-ink3); font-variant-numeric: tabular-nums; }
.f-win-status .f-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--m-ink3); flex: none; }
.f-demo-stage[data-demo-state="done"] .f-win-status .f-dot { background: var(--m-green); }
.f-win-status .f-lay { padding: 2px 6px; border-radius: 4px; background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-ink2); font-size: 11px; line-height: 1.2; }
.f-win-status b { font-weight: 500; }
.f-demo-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; cursor: pointer; transition: background 140ms ease; }
.f-btn:hover { background: #242b38; }
.f-btn:disabled { opacity: 0.5; cursor: default; }
.f-btn .m-kbd { font-size: 11px; color: var(--muted); }
.f-demo-stage .h-note { margin-top: 14px; text-align: center; }
@media (max-width: 640px) {
  .f-win-body { flex-direction: column; align-items: stretch; min-height: 0; padding: 18px 16px; gap: 10px; font-size: 18px; line-height: 24px; }
  .f-win-body .f-wrong { height: 48px; flex: none; }
  .f-win-body .f-arrow { align-self: center; transform: rotate(90deg); width: 18px; height: 18px; }
  .f-right { flex: none; justify-content: center; min-height: 48px; }
  .f-caret { height: 20px; }
  .f-win-status { padding: 8px 16px; font-size: 11.5px; }
  .f-demo-actions { gap: 8px; }
}

/* 3. «Replaces»: icon strip (six stand-in tiles → Klavadabra) and the tile inside each card */
.f-rep-strip { margin-top: 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 28px; }
.f-rep-apps { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 18px 20px; }
.f-rep-app { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; text-align: center; }
/* 48-px tile plus a 6-px margin for the ✕ badge, so the badge never overflows the box. */
.f-rep-ico { position: relative; width: 54px; height: 54px; padding: 6px 6px 0 0; }
.f-rep-ico > svg, .f-rep-ico > img { display: block; width: 48px; height: 48px; border-radius: 11px; }
.f-rep-ico .f-rep-x { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: var(--coral); box-shadow: 0 0 0 2px var(--paper); }
.f-rep-ico .f-rep-x svg { width: 8px; height: 8px; stroke: var(--on-coral); stroke-width: 2.2; }
.f-rep-app-name { font-size: 12px; line-height: 16px; color: var(--muted); }
.f-rep-arrow { width: 26px; height: 26px; color: var(--coral); flex: none; }
.f-rep-klava .f-rep-ico { width: 56px; height: 56px; padding: 0; }
.f-rep-klava .f-rep-ico > svg { width: 56px; height: 56px; }
.f-rep-klava .f-rep-app-name { color: var(--ink); font-weight: 600; }
.f-rep-tile { width: 28px; height: 28px; flex: none; }
.f-rep-tile svg, .f-rep-tile img { display: block; width: 100%; height: 100%; border-radius: 6px; }
@media (max-width: 640px) {
  .f-rep-strip { flex-direction: column; gap: 16px; }
  .f-rep-apps { display: grid; grid-template-columns: repeat(3, 100px); gap: 16px 6px; }
  .f-rep-arrow { transform: rotate(90deg); }
}

/* 4. tools: 3 + 2 grid with product thumbnails */
.f-tools-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.f-tool { grid-column: span 2; min-width: 0; padding: 22px 24px 24px; display: flex; flex-direction: column; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.f-tool-top { min-height: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; }
.f-lab { font-size: 13px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-idx { font-weight: 600; letter-spacing: 0.06em; }
.f-tag { height: 24px; padding: 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; font-family: var(--sans); }
.f-thumb { min-height: 132px; margin-top: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.f-tool h3 { margin: 18px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.f-tool p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.f-tool .h-link { margin-top: auto; padding: 16px 0 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; align-self: flex-start; text-align: left; }
/* Wide cards (04, 05): text column (index row, h3, p, link) on the left, a 200-px thumbnail on the right —
   the index row lives inside the column so both headings sit at the same height. */
.f-tool.f-wide { grid-column: span 3; flex-direction: row; align-items: stretch; gap: 20px; }
.f-tool-tx { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.f-tool.f-wide .f-thumb { width: 200px; min-height: 0; margin: 0; flex: none; align-self: center; }
/* thumbnails (Mac surface tokens) */
.f-cbrow { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-family: var(--m-font); color: var(--m-ink); }
.f-cbrow .m-tile { color: var(--m-ink2); }
.f-cbtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.f-cbtx b { font-size: 12.5px; font-weight: 500; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-cbtx > span { font-size: 11px; line-height: 13px; color: var(--m-ink2); }
.f-thumb .dc { width: min(316px, 100%); }
.f-thumb .dc .wave { min-width: 0; overflow: hidden; justify-content: center; }
.f-mini { width: 100%; padding: 4px 12px; font-family: var(--m-font); color: var(--m-ink); }
.f-mini .m-row { min-width: 0; }
.f-mini .m-row .m-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-mini .m-row .m-ico { color: var(--m-ink2); }
.f-sp { flex: 1; }
.f-val { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--m-ink2); white-space: nowrap; }
.f-mini .m-slider { margin: 2px 2px 0; }
.f-load { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; font-family: var(--m-font); }
.f-meters { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.f-meter { --metric-tone: var(--m-ink2); height: 14px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--m-ink2); }
.f-meter > span:first-child { width: 66px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-meter i { flex: 1; display: block; height: 4px; border-radius: 2px; background: var(--m-fill2); overflow: hidden; }
.f-meter i b { display: block; height: 100%; width: var(--meter, 0%); border-radius: 2px; background: var(--metric-tone); transition: width 600ms ease; }
.f-meter .m-num { width: 34px; flex: none; text-align: right; font-size: 11px; color: var(--metric-tone); }
/* ≤ 900: two columns; the wide cards stack like the others (index, thumbnail, text, link) — the text
   column dissolves (display: contents) so `order` can slot the thumbnail under the index row. */
@media (max-width: 900px) {
  .f-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .f-tool, .f-tool.f-wide { grid-column: span 1; }
  .f-tool.f-wide { flex-direction: column; gap: 0; }
  .f-tool.f-wide .f-tool-tx { display: contents; }
  .f-tool.f-wide .f-tool-top { order: 0; }
  .f-tool.f-wide .f-thumb { order: 1; width: 100%; min-height: 132px; margin-top: 16px; }
  .f-tool.f-wide h3, .f-tool.f-wide p, .f-tool.f-wide .h-link { order: 2; }
}
/* 561–900: five cards in two columns leave the fifth as a half-width orphan — it spans the row in its desktop layout. */
@media (max-width: 900px) and (min-width: 561px) {
  .f-tool.f-wide:last-child { grid-column: span 2; flex-direction: row; gap: 20px; }
  .f-tool.f-wide:last-child .f-tool-tx { display: flex; }
  .f-tool.f-wide:last-child .f-thumb { order: 0; width: 200px; min-height: 0; margin-top: 0; }
}
/* ≤ 1100 (three narrow columns and below): the layout thumbnail tightens so its RU labels keep one line. */
@media (max-width: 1100px) { .f-mini { padding: 4px 8px; } .f-mini .m-row { gap: 6px; } .f-mini .m-label { font-size: 11.5px; } .f-mini .m-seg > span { padding: 0 7px; font-size: 10.5px; } .f-mini .m-kbd { font-size: 10px; } }
@media (max-width: 760px) { .f-tool { padding: 20px; } }
@media (max-width: 560px) { .f-tools-grid { grid-template-columns: minmax(0, 1fr); } }

/* 5. time back: one estimate card (home-tools.js savings() drives the outputs and --range-start/--range-end on .f-track) */
.f-time-card { margin-top: 40px; padding: 36px 40px; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.f-ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.f-range { min-width: 0; }
.f-range-head { min-height: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.f-range-head > span { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.f-range-head b { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-range-head output { font: inherit; }
.f-track { position: relative; height: 24px; margin-top: 12px; --range-start: 0%; --range-end: 100%; }
.f-rail { position: absolute; left: 10px; right: 10px; top: 10px; height: 4px; border-radius: 2px; background: var(--fill2); }
.f-fill { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--coral); left: var(--range-start); width: calc(var(--range-end) - var(--range-start)); }
.f-track input { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.f-track input::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.f-track input::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: 2px; border: 0; border-radius: 50%; background: #fff; appearance: none; -webkit-appearance: none; pointer-events: auto; cursor: grab; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.45); }
.f-track input::-moz-range-track { height: 24px; background: transparent; }
.f-track input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; pointer-events: auto; cursor: grab; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.45); }
.f-track input:focus-visible { outline: none; }
.f-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--coral), 0 2px 6px rgba(0, 0, 0, 0.45); }
.f-scale { margin-top: 6px; display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-result { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.f-result > div { min-width: 0; }
.f-big { margin-top: 8px; font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-big output { font: inherit; }
.f-assume { margin: 0; max-width: 430px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 900px) {
  .f-time-card { padding: 28px; }
  .f-ranges { gap: 32px; }
  .f-result { flex-direction: column; align-items: flex-start; gap: 20px; }
  .f-assume { max-width: none; }
}
@media (max-width: 640px) {
  .f-time-card { padding: 22px 18px; }
  .f-ranges { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .f-big { font-size: clamp(30px, 9vw, 40px); }
}

/* 6. compare: compact table, Klavadabra column raised on a card */
/* position: relative keeps the cells' visually hidden (absolutely positioned) labels inside the scroll box. */
.f-compare .compare-scroll { position: relative; margin-top: 40px; overflow-x: auto; border-radius: 0; background: transparent; box-shadow: none; }
.f-compare .table-scroll-hint { margin: 32px 0 -24px; }
.f-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; color: var(--ink); }
.f-table th, .f-table td { height: 52px; padding: 0 10px; text-align: center; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.f-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.f-table th:first-child, .f-table td:first-child { width: 250px; text-align: left; padding-left: 0; font-weight: 500; }
.f-table tbody th { font-weight: 500; color: var(--ink); }
.f-table tr:last-child td { border-bottom: 0; }
.f-table .f-k { background: var(--card); color: var(--ink); }
.f-table th.f-k { border-radius: 16px 16px 0 0; }
.f-table tr:last-child td.f-k { border-radius: 0 0 16px 16px; }
.f-table .f-ck { display: inline-block; width: 16px; height: 16px; color: var(--coral); vertical-align: -2px; }
.f-table .f-dash { color: var(--muted); }
.f-table .f-txt { font-size: 13px; color: var(--ink-soft); }
.f-table .f-txt.f-dim { color: var(--muted); }
.f-table-note { display: block; margin: 16px 0 0; max-width: 900px; text-wrap: pretty; }
@media (max-width: 1024px) {
  .f-table { min-width: 860px; }
  .f-table th:first-child, .f-table td:first-child { width: 200px; }
}
@media (max-width: 640px) {
  .f-compare .compare-scroll { margin-top: 24px; }
  .f-compare .table-scroll-hint { margin: 32px 0 0; }
  /* Phones: every cell stays on one line and the table takes its natural width inside the scroll box. */
  .f-table { min-width: 0; font-size: 14px; }
  .f-table th, .f-table td { height: 48px; padding: 0 12px; white-space: nowrap; }
  .f-table th:first-child, .f-table td:first-child { width: auto; padding-right: 20px; }
}

/* 7. pricing: 1fr / 1.4fr, plan rows are the checkout buttons (site.js toggles disabled + aria-pressed) */
.f-plans { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: stretch; }
.f-plan { padding: 32px; display: flex; flex-direction: column; min-width: 0; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.f-plan-top { min-height: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.f-plan-name { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.f-plan .f-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; color: var(--ink-soft); background: var(--fill); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.f-price { margin-top: 14px; display: flex; align-items: baseline; gap: 10px; }
.f-price b { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.f-price span { font-size: 15px; color: var(--muted); }
.f-plan p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.f-checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: var(--ink); }
.f-ck { width: 16px; height: 16px; color: var(--coral); flex: none; }
.f-options { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.f-opt { min-height: 60px; width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 18px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; transition: background 140ms ease, box-shadow 140ms ease; min-width: 0; }
.f-opt:hover:not(:disabled) { background: var(--fill); }
.f-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--coral) 6%, transparent); box-shadow: inset 0 0 0 1.5px var(--coral); }
.f-opt:disabled { cursor: not-allowed; }
body[data-sales-state="closed"] .f-opt:disabled:not(.f-soon) { opacity: 0.6; }
body[data-sales-state="closed"] .f-opt[aria-pressed="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.f-opt.f-soon { color: var(--muted); }
.f-radio { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
.f-opt[aria-pressed="true"] .f-radio { background: var(--on-coral); box-shadow: inset 0 0 0 5.5px var(--coral); }
.f-opt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-opt-tx b { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--ink); }
.f-soon .f-opt-tx b { color: var(--ink-soft); }
.f-opt-tx > span { font-size: 13px; line-height: 16px; color: var(--muted); }
.f-opt-price { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-plan-cta { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.f-plan-cta .h-cta, .f-plan-cta .f-ghost50 { width: 100%; justify-content: center; }
.f-proceed { border: 0; font-family: inherit; cursor: pointer; }
.f-proceed:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.f-proceed:disabled:hover { background: var(--coral); transform: none; }
.f-plan-cta .sales-availability { margin: 0; }
.f-ghost50 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 14px; font-size: 15.5px; font-weight: 600; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 238, 228, 0.2); white-space: nowrap; text-decoration: none; transition: background 140ms ease; }
.f-ghost50:hover { background: var(--fill); }
@media (max-width: 900px) {
  .f-plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .f-plan { padding: 24px; }
}
@media (max-width: 640px) {
  .f-plan { padding: 22px 18px; }
  .f-price b { font-size: 40px; }
  .f-opt { padding: 10px 14px; gap: 12px; }
}

/* 8. privacy band */
.f-band { margin-top: 28px; min-height: 120px; background: var(--card); box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); }
.f-band .wrap { min-height: 120px; display: flex; align-items: center; gap: 20px; padding: 20px 0; }
.f-band-tile { display: grid; place-items: center; flex: none; background: var(--fill2); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-soft); }
.f-band-tx { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.f-band-tx b { font-size: 20px; font-weight: 600; line-height: 26px; color: var(--ink); }
.f-band-tx > span { max-width: 780px; font-size: 15px; line-height: 22px; color: var(--ink-soft); text-wrap: pretty; }
.f-band .h-link { flex: none; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) {
  .f-band .wrap { flex-wrap: wrap; gap: 14px 16px; padding: 24px 0; }
  .f-band-tx { flex-basis: calc(100% - 56px); }
  .f-band .h-link { margin-left: 56px; }
}

/* 9. faq: 400-px title column + the question rows */
.f-faq-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: start; }
.f-faq-grid h2 { margin: 0; max-width: 400px; }
.f-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); max-width: none; gap: 0; }
.f-faq-list .f-q { border-bottom: 1px solid var(--rule); }
.f-faq-list .f-q summary { position: relative; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 36px 14px 0; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink); list-style: none; cursor: pointer; }
.f-faq-list .f-q summary::-webkit-details-marker { display: none; }
.f-faq-list .f-q summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform 160ms ease; }
.f-faq-list .f-q[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.f-faq-list .f-q .faq-answer { padding: 0 36px 18px 0; max-width: 62ch; }
@media (max-width: 900px) {
  .f-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .f-faq-grid h2 { max-width: 560px; }
}
@media (max-width: 640px) {
  .f-faq-list .f-q summary { font-size: 16px; }
}

/* 10. download band with the blurred terrace wallpaper and the release ticket */
.f-dl { position: relative; padding: 96px 0; overflow: hidden; background: var(--paper-deep); color: var(--ink); }
.f-wall { position: absolute; inset: -60px; background: url(/hero-terrace.webp) center 32% / 1916px auto no-repeat; filter: blur(30px) brightness(0.5) saturate(0.9); opacity: 0.5; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); pointer-events: none; }
.f-dl .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.f-dl .f-head { align-items: flex-start; text-align: left; min-width: 0; }
.f-dl .f-head .eyebrow { margin-bottom: 14px; }
.f-dl .f-head h2 { max-width: 640px; }
.f-dl .f-body { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.f-dl-ctas { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.f-ticket { width: 380px; max-width: 100%; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: none; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.f-tk-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; line-height: 22px; color: var(--ink); }
.f-tk-name b { font-weight: 600; overflow-wrap: anywhere; }
.f-tk-name > span { color: var(--muted); white-space: nowrap; }
.f-tk-name svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.f-tk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
.f-tk-row svg { width: 14px; height: 14px; flex: none; color: var(--green); }
.f-tk-hash { display: block; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); font: 500 12px/16px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .f-dl .wrap { flex-direction: column; align-items: flex-start; gap: 36px; }
  .f-ticket { width: 100%; max-width: 560px; }
}
@media (max-width: 640px) {
  .f-dl { padding: 64px 0; }
  .f-dl-ctas { flex-direction: column; align-items: stretch; }
  .f-dl-ctas .h-cta, .f-dl-ctas .f-ghost50 { width: 100%; justify-content: center; }
}