/* ─────────────────────────────────────────────────────────────────────────
   Estimate form — built on the vendored Nocturne system.

   Three parts:
     1. Shell      top bar, progress, step transitions, nav footer
     2. Controls   radio cards, feature toggles, steppers, summary
     3. Demos      the little live previews beside each feature

   The demos are the point of this page: a customer who has never
   commissioned a website does not know what "CMS" or "WCAG AA" buys them.
   Each one is a miniature website that performs the feature. They are CSS
   animations driven by a single `.is-live` class so estimate.js can run
   only the ones on screen, and they stop dead under reduced-motion.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --ground: #121422;
  --gutter: 28px;
  --bg-accent: #9184d9;
  --ok: #7ad1c4;
}

html { background: var(--ground); }

.est-body {
  background: var(--ground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent); }

/* ── ground ──────────────────────────────────────────────────────────── */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 12% 0%, #1d2036 0%, #161826 55%, #121422 100%);
}
.bg-layer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; }
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 65% at 50% 50%, rgba(22, 24, 38, 0) 0%, rgba(18, 20, 34, 0.62) 100%);
}

/* ── 1 · shell ───────────────────────────────────────────────────────── */

.est-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px var(--gutter);
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-neutral-900);
}
.est-brand {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--color-text);
  flex: none;
}
.est-brand:hover { color: var(--color-accent); }

.est-progress { flex: 1; min-width: 0; max-width: 620px; }
.est-steps {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.est-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--color-neutral-600);
  transition: color 240ms ease;
  min-width: 0;
}
.est-step-num {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10.5px;
  font-family: var(--font-heading);
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.est-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-steps li.is-current { color: var(--color-accent); }
.est-steps li.is-current .est-step-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #15131f;
}
.est-steps li.is-done { color: var(--color-neutral-400); }
.est-steps li.is-done .est-step-num {
  background: transparent;
  border-color: var(--ok);
  color: var(--ok);
}

.est-bar { height: 2px; background: var(--color-neutral-900); border-radius: 2px; overflow: hidden; }
.est-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent-600), var(--color-accent));
  transition: width 420ms cubic-bezier(0.33, 0.9, 0.2, 1);
}

.est-main {
  position: relative;
  z-index: 10;
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 44px var(--gutter) 140px;
}

.est-noscript {
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Steps cross-fade; the outgoing one is removed from flow by [hidden]. */
.step { animation: step-in 420ms cubic-bezier(0.33, 0.9, 0.2, 1) both; }
.step[hidden] { display: none; }
@keyframes step-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.step-title {
  margin: 0 0 10px;
  font-weight: 500;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.step-lede {
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-neutral-400);
  max-width: 60ch;
  text-wrap: pretty;
}

.field-block { border: 0; margin: 0 0 34px; padding: 0; }
.field-block legend {
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-text);
}
.field-hint {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-neutral-500);
  max-width: 62ch;
}

.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field label { font-size: 13px; margin-bottom: 6px; color: var(--color-neutral-400); }
.req { color: var(--color-accent); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.est-consent { font-size: 12.5px; color: var(--color-neutral-600); margin: 18px 0 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.est-error {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid #d98f84;
  background: color-mix(in srgb, #d98f84 12%, transparent);
  color: #f3d4cf;
  font-size: 14px;
}

/* ── nav footer ──────────────────────────────────────────────────────── */

.est-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-neutral-900);
}
.est-nav > * { flex: none; }
.est-nav-spacer { flex: 1 1 auto; }
.est-nav-hint { font-size: 13px; color: var(--color-neutral-500); }
.est-nav .btn { padding: 9px 18px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── 2 · controls ────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.cards-sm { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-800);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.opt:hover { border-color: var(--color-neutral-600); transform: translateY(-1px); }
.opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.opt.is-on {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 11%, transparent);
}
.opt-label { font-family: var(--font-heading); font-size: 15.5px; }
.opt-note { font-size: 13px; line-height: 1.45; color: var(--color-neutral-400); text-wrap: pretty; }
.opt-check {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--color-neutral-700);
  transition: background 180ms, border-color 180ms;
}
.opt.is-on .opt-check { background: var(--color-accent); border-color: var(--color-accent); }

/* stepper */
.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stepper-inline { margin: 0; }
.stepper-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-700);
  background: transparent;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.stepper-btn:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.stepper-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.stepper-value {
  min-width: 46px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-text);
}
.stepper-note { font-size: 13px; color: var(--color-neutral-500); }
.stepper-range { width: 100%; max-width: 420px; accent-color: var(--color-accent); }

/* included-as-standard list */
.included {
  margin-bottom: 28px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-neutral-800);
  background: color-mix(in srgb, var(--ok) 5%, transparent);
}
.included-title {
  margin: 0 0 9px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 500;
}
.included-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--color-neutral-400);
}
.included-list li { padding-left: 19px; position: relative; }
.included-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-size: 12px;
}

/* feature cards */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }

.feat {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-800);
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.feat:hover { transform: translateY(-2px); border-color: var(--color-neutral-600); }
.feat.is-on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.feat.is-on .demo { opacity: 1; }

.feat-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px 0;
  cursor: pointer;
}
.feat-text { flex: 1; min-width: 0; }
.feat-label { font-family: var(--font-heading); font-size: 15.5px; display: block; }
.feat-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-neutral-400);
  text-wrap: pretty;
}

/* switch */
.sw {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  border-radius: 11px;
  border: 1px solid var(--color-neutral-700);
  background: var(--color-neutral-900);
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease;
}
.sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-neutral-500);
  transition: transform 260ms cubic-bezier(0.33, 1.4, 0.4, 1), background 220ms ease;
}
.feat.is-on .sw { background: color-mix(in srgb, var(--color-accent) 35%, transparent); border-color: var(--color-accent); }
.feat.is-on .sw::after { transform: translateX(16px); background: var(--color-accent-200); }
.sw:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* summary */
.summary { margin-top: 30px; }
.sum-box {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-800);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.sum-title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--color-neutral-900);
}
.sum-row:last-child { border-bottom: 0; }
.sum-key { color: var(--color-neutral-500); flex: none; }
.sum-val { color: var(--color-text); text-align: right; }
.sum-price {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-neutral-800);
}
.sum-price-val {
  font-family: var(--font-heading);
  font-size: 29px;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}
.sum-price-note { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 5px; }

/* done */
.step-done { text-align: center; padding-top: 40px; }
.step-done .step-lede { margin-left: auto; margin-right: auto; }
.done-mark { color: var(--ok); display: flex; justify-content: center; margin-bottom: 20px; }
.done-ring { stroke-dasharray: 132; stroke-dashoffset: 132; animation: draw 620ms ease forwards; }
.done-tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 420ms ease 420ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── 3 · the live demos ──────────────────────────────────────────────── */

.demo {
  position: relative;
  margin: 13px 15px 15px;
  height: 128px;
  border-radius: var(--radius-sm);
  background: #0c0e18;
  border: 1px solid var(--color-neutral-900);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 260ms ease;
  --d-fg: #cfd3e5;
  --d-dim: #4a4f68;
  --d-card: #171a29;
}
.feat:hover .demo { opacity: 1; }

/* a miniature page */
.mp { position: absolute; inset: 0; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.mp-bar { display: flex; align-items: center; gap: 4px; height: 11px; flex: none; }
.mp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--d-dim); }
.mp-line { height: 4px; border-radius: 2px; background: var(--d-dim); }
.mp-line.w-lg { width: 70%; }
.mp-line.w-md { width: 50%; }
.mp-line.w-sm { width: 32%; }
.mp-head { height: 7px; border-radius: 2px; background: var(--d-fg); width: 54%; opacity: 0.85; }
.mp-card { border-radius: 3px; background: var(--d-card); flex: 1; }
.mp-btn {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 7.5px;
  background: var(--color-accent);
  color: #15131f;
  font-family: var(--font-heading);
}

/* Inline icons inside the demos — sized by context, stroked in the
   inherited colour so they pick up each demo's accent state. */
.demo svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.d-plug .node svg { width: 17px; height: 17px; stroke-width: 1.7; }
.d-shop .cart svg { width: 14px; height: 14px; }
.d-search .box svg { width: 10px; height: 10px; }
.d-a11y .read svg { width: 9px; height: 9px; }
.d-cms .pencil svg { width: 11px; height: 11px; }

/* — theme — */
.d-theme .mp { transition: background 520ms ease; background: #0c0e18; }
.d-theme.is-flip .mp { background: #f3f5fe; }
.d-theme.is-flip { --d-fg: #292b31; --d-dim: #b2b6ca; --d-card: #e4e7f5; }
.d-theme .mp-head, .d-theme .mp-line, .d-theme .mp-card { transition: background 520ms ease; }
.d-theme .sun {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: inset -5px 2px 0 0 #0c0e18;
  transition: transform 520ms cubic-bezier(0.33, 1.3, 0.4, 1), box-shadow 520ms ease, background 520ms ease;
}
.d-theme.is-flip .sun {
  transform: rotate(180deg) scale(0.92);
  box-shadow: inset 0 0 0 0 #f3f5fe, 0 0 9px 2px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* — multilang — */
.d-lang .pills { display: flex; gap: 4px; margin-left: auto; }
.d-lang .pill {
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 7px;
  color: var(--d-dim);
  border: 1px solid var(--d-dim);
  transition: color 300ms, border-color 300ms, background 300ms;
}
.d-lang .pill.is-on { color: #15131f; background: var(--color-accent); border-color: var(--color-accent); }
.d-lang .words { position: relative; height: 13px; flex: none; }
.d-lang .word {
  position: absolute;
  inset: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--d-fg);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 340ms ease, transform 340ms ease;
}
.d-lang .word.is-on { opacity: 1; transform: none; }

/* — motion — */
.d-motion .stack { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.d-motion .riser {
  height: 15px;
  border-radius: 3px;
  background: var(--d-card);
  opacity: 0;
  transform: translateY(12px);
}
.d-motion.is-live .riser { animation: rise 2600ms ease-in-out infinite; }
.d-motion.is-live .riser:nth-child(2) { animation-delay: 160ms; }
.d-motion.is-live .riser:nth-child(3) { animation-delay: 320ms; }
.d-motion.is-live .riser:nth-child(4) { animation-delay: 480ms; }
@keyframes rise {
  0%        { opacity: 0; transform: translateY(12px); }
  18%, 72%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* — cms — */
.d-cms .edit {
  position: relative;
  padding: 4px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-heading);
  color: var(--d-fg);
  border: 1px dashed transparent;
  transition: border-color 300ms, background 300ms;
}
.d-cms.is-live .edit { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.d-cms .caret {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin-left: 1px;
  vertical-align: -1px;
  background: var(--color-accent);
  opacity: 0;
}
.d-cms.is-live .caret { animation: blink 1000ms steps(2) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.d-cms .pencil {
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 10px;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 300ms, transform 300ms;
}
.d-cms.is-live .pencil { opacity: 1; transform: none; }

/* — shop — */
.d-shop .row { display: flex; gap: 7px; flex: 1; }
.d-shop .thumb { width: 42px; border-radius: 3px; background: var(--d-card); flex: none; }
.d-shop .col { display: flex; flex-direction: column; gap: 5px; flex: 1; padding-top: 3px; }
.d-shop .cart {
  position: absolute;
  top: 7px;
  right: 9px;
  font-size: 10px;
  color: var(--d-fg);
}
.d-shop .badge {
  position: absolute;
  top: 2px;
  right: 7px;
  min-width: 11px;
  height: 11px;
  padding: 0 2px;
  border-radius: 6px;
  background: var(--color-accent);
  color: #15131f;
  font-size: 7.5px;
  line-height: 11px;
  text-align: center;
  transform: scale(0);
  transition: transform 260ms cubic-bezier(0.33, 1.5, 0.4, 1);
}
.d-shop .badge.is-on { transform: scale(1); }
.d-shop .fly {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
}
.d-shop.is-live .fly { animation: fly 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes fly {
  0%        { opacity: 0; left: 18px; top: 74px; transform: scale(0.5); }
  12%       { opacity: 1; transform: scale(1); }
  55%       { opacity: 1; left: calc(100% - 20px); top: 12px; transform: scale(0.7); }
  66%, 100% { opacity: 0; left: calc(100% - 20px); top: 12px; transform: scale(0.4); }
}

/* — booking — */
.d-book .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; flex: 1; align-content: start; }
.d-book .slot { height: 12px; border-radius: 2px; background: var(--d-card); transition: background 240ms, transform 240ms; }
.d-book .slot.is-pick { background: var(--color-accent); transform: scale(1.12); }
.d-book .conf {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: var(--ok);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms, transform 300ms;
}
.d-book .conf.is-on { opacity: 1; transform: none; }

/* — search — */
.d-search .box {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--d-card);
  border: 1px solid transparent;
  font-size: 9px;
  color: var(--d-fg);
  transition: border-color 240ms;
  flex: none;
}
.d-search.is-live .box { border-color: var(--color-accent); }
.d-search .results { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.d-search .hit {
  height: 11px;
  border-radius: 2px;
  background: var(--d-card);
  transition: opacity 300ms ease, height 300ms ease, margin 300ms ease;
}
.d-search .hit.is-hidden { opacity: 0; height: 0; margin-top: -4px; }
.d-search .hit.is-match { background: color-mix(in srgb, var(--color-accent) 42%, var(--d-card)); }

/* — accounts — */
.d-acct .panel { display: flex; align-items: center; gap: 7px; flex: 1; }
.d-acct .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--d-card);
  display: grid;
  place-items: center;
  font-size: 9px;
  color: var(--d-dim);
  transition: background 360ms ease, color 360ms ease;
}
.d-acct.is-live .avatar { background: var(--color-accent); color: #15131f; }
.d-acct .who { position: relative; height: 11px; flex: 1; }
.d-acct .state {
  position: absolute;
  inset: 0;
  font-size: 9.5px;
  color: var(--d-fg);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.d-acct .state.is-on { opacity: 1; transform: none; }
.d-acct .lock {
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 9px;
  color: var(--d-dim);
  transition: color 360ms;
}
.d-acct.is-live .lock { color: var(--ok); }

/* ── fields ──────────────────────────────────────────────────────────── */
/* Nocturne's `.input` is tuned for dense interface rows. This form is airy
   and card-driven, so the inputs are re-proportioned to match the option
   cards beside them. Scoped to .est-body rather than edited in the vendored
   design system. */

.est-body .field label,
.est-body .lang-other label {
  font-size: 13px;
  margin-bottom: 7px;
  color: var(--color-neutral-400);
}
.est-body .input {
  min-height: 46px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.est-body .input::placeholder { color: var(--color-neutral-600); }
.est-body .input:hover { border-color: var(--color-neutral-600); }
.est-body .input:focus,
.est-body .input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
/* Needs .est-body too: the `.est-body .input` rule above is (0,2,0), which
   would otherwise outrank a bare `textarea.est-textarea` (0,1,1) and quietly
   drop all three declarations. */
.est-body textarea.est-textarea {
  min-height: 176px;
  padding: 15px 16px;
  line-height: 1.62;
  resize: vertical;
}

/* ── language chips (inside the multilanguage card) ──────────────────── */

.feat-extra {
  padding: 0 15px 15px;
  animation: step-in 280ms ease both;
}
.feat-extra-label {
  display: block;
  font-size: 12.5px;
  color: var(--color-neutral-400);
  margin-bottom: 9px;
}
.langs { display: flex; flex-wrap: wrap; gap: 7px; }
.lang-chip {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-700);
  background: transparent;
  color: var(--color-neutral-300);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms, background 160ms, color 160ms;
}
.lang-chip:hover { border-color: var(--color-accent); }
.lang-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lang-chip.is-on {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent-200);
}
.lang-other { margin-top: 11px; }
.lang-count {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--color-neutral-500);
}

/* ── language switcher (page chrome) ─────────────────────────────────── */

.est-lang {
  display: flex;
  gap: 3px;
  flex: none;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-800);
}
.est-lang button {
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral-500);
  font: inherit;
  font-size: 12px;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: background 180ms, color 180ms;
}
.est-lang button:hover { color: var(--color-text); }
.est-lang button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent-200);
}
.est-lang button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── demos, part two ─────────────────────────────────────────────────── */

/* — blog — */
.d-blog .posts { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.d-blog .post {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 20px;
  padding: 3px;
  border-radius: 3px;
  background: var(--d-card);
}
.d-blog .post i { width: 16px; height: 14px; border-radius: 2px; background: var(--d-dim); flex: none; opacity: 0.5; }
.d-blog .post b { height: 4px; border-radius: 2px; background: var(--d-dim); flex: 1; display: block; }
.d-blog .post em {
  font-size: 6.5px;
  font-style: normal;
  color: var(--color-accent);
  flex: none;
  padding-right: 2px;
}
.d-blog .post.is-new { animation: post-drop 520ms cubic-bezier(0.33, 1.2, 0.4, 1) both; }
@keyframes post-drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* — forms (email only) — */
.d-form .side { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.d-form .inp {
  height: 12px;
  border-radius: 2px;
  background: var(--d-card);
  position: relative;
  overflow: hidden;
}
.d-form .inp::after {
  content: "";
  position: absolute;
  left: 3px; top: 3.5px;
  height: 5px;
  width: 0;
  border-radius: 1px;
  background: var(--d-dim);
  transition: width 400ms ease;
}
.d-form .inp.is-filled::after { width: 72%; }
.d-form .env {
  position: absolute;
  left: 44%;
  bottom: 16px;
  color: var(--color-accent);
  opacity: 0;
}
.d-form .env.is-fly { animation: env-fly 1400ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes env-fly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 1; transform: translate(0, -6px) scale(1); }
  75%  { opacity: 1; transform: translate(60px, -56px) scale(0.9); }
  100% { opacity: 0; transform: translate(78px, -70px) scale(0.7); }
}

/* — enquiries (stored, searchable, exportable) — */
.d-enq .ebar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 3px;
  background: var(--d-card);
  border: 1px solid transparent;
  font-size: 9px;
  color: var(--d-fg);
  flex: none;
  transition: border-color 240ms;
}
.d-enq.is-live .ebar { border-color: var(--color-accent); }
.d-enq .csv {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 6.5px;
  letter-spacing: .06em;
  color: var(--d-dim);
  border: 1px solid var(--d-dim);
  transition: color 260ms, border-color 260ms, background 260ms;
}
.d-enq .csv.is-on {
  color: #15131f;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.d-enq .erows { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.d-enq .erow {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 12px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--d-card);
  transition: opacity 280ms ease, height 280ms ease, margin 280ms ease;
}
.d-enq .erow b { height: 4px; border-radius: 2px; background: var(--d-dim); flex: 1; display: block; }
.d-enq .erow s {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-accent) 50%, var(--d-card));
  flex: none;
  display: block;
}
.d-enq .erow.is-out { opacity: 0; height: 0; margin-top: -4px; }

/* — seo — */
.d-seo .serp { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.d-seo .res {
  height: 15px;
  border-radius: 3px;
  background: var(--d-card);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  transition: transform 620ms cubic-bezier(0.33, 1, 0.4, 1), background 400ms ease;
}
.d-seo .res b { height: 4px; border-radius: 2px; background: var(--d-dim); flex: 1; display: block; }
.d-seo .res.is-you { background: color-mix(in srgb, var(--color-accent) 30%, var(--d-card)); }
.d-seo .res.is-you b { background: var(--color-accent-200); }
.d-seo .rank {
  position: absolute;
  top: 8px; right: 9px;
  font-size: 9px;
  font-family: var(--font-heading);
  color: var(--color-accent);
}

/* — analytics — */
.d-chart .bars { display: flex; align-items: flex-end; gap: 5px; flex: 1; padding-top: 4px; }
.d-chart .bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--color-accent) 42%, var(--d-card));
  height: 10%;
  transition: height 680ms cubic-bezier(0.33, 1, 0.4, 1);
}
.d-chart .bar:last-child { background: var(--color-accent); }
.d-chart .big {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--d-fg);
  line-height: 1;
}
.d-chart .cap { font-size: 7px; color: var(--d-dim); letter-spacing: .08em; text-transform: uppercase; }

/* — integrations — */
.d-plug .wire { display: flex; align-items: center; gap: 6px; flex: 1; }
.d-plug .node {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--d-card);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
  transition: box-shadow 300ms ease;
}
.d-plug .node.is-lit { box-shadow: 0 0 0 1.5px var(--color-accent); }
.d-plug .track {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--d-dim) 0 3px, transparent 3px 7px);
  position: relative;
}
.d-plug .pkt {
  position: absolute;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
}
.d-plug.is-live .pkt { animation: pkt 2000ms ease-in-out infinite; }
@keyframes pkt {
  0%        { left: 0; opacity: 0; }
  12%       { opacity: 1; }
  50%       { left: calc(100% - 6px); opacity: 1; }
  54%, 100% { left: calc(100% - 6px); opacity: 0; }
}

/* — accessibility — */
.d-a11y .stack { display: flex; flex-direction: column; gap: 6px; flex: 1; position: relative; }
.d-a11y .target {
  height: 15px;
  border-radius: 3px;
  background: var(--d-card);
  position: relative;
}
.d-a11y .target.is-focus { box-shadow: 0 0 0 2px var(--color-accent); }
.d-a11y .read {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  font-size: 7px;
  color: var(--ok);
  flex: none;
  min-height: 14px;
}
.d-a11y .kbd {
  position: absolute;
  top: 7px; right: 9px;
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid var(--d-dim);
  color: var(--d-dim);
}

/* — photos — */
.d-photo .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; }
.d-photo .tile {
  border-radius: 3px;
  background: linear-gradient(135deg, #2c3150, #1a1e33);
  opacity: 0;
  transform: scale(0.94);
  filter: blur(3px);
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
}
.d-photo .tile.is-on { opacity: 1; transform: none; filter: none; }
.d-photo .tile:nth-child(2) { background: linear-gradient(135deg, #3a3156, #221c33); }
.d-photo .tile:nth-child(3) { background: linear-gradient(135deg, #243f50, #16262f); }
.d-photo .tile:nth-child(4) { background: linear-gradient(135deg, #503a44, #2f1f26); }

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .est-top { gap: 16px; }
  .est-step-label { display: none; }
  .est-steps { justify-content: flex-start; gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; }
  .est-main { padding-top: 32px; padding-bottom: 120px; }
  .est-nav-hint { display: none; }
  .features, .cards, .cards-sm { grid-template-columns: 1fr; }
}

/* ── motion preferences ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The demos still need to show their "on" state, just without motion. */
  .demo { opacity: 1; }
}