/*
 * Dusk Automation public website (index.html, privacy.html).
 * The dashboard, portal and preview pages use dusk.css, which carries the same
 * tokens, fonts and logo. Motion lives at the bottom and is switched off for
 * visitors who ask for reduced motion.
 */
:root {
  --paper: #faf8f3;
  --card: #fffdf9;
  --ink: #29232a;
  --muted: #645d65;
  --dark: #21191f;
  --plum: #34212e;
  --coral: #ff9974;
  --coral-soft: #ffb48f;
  --rust: #a54225;
  --line: #dfdcd5;
  --sand: #f4eae2;
  --sage: #eef0e8;
  --font: 'Manrope', Arial, sans-serif;
  --serif: 'Lora', Georgia, serif;
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.045em; line-height: 1.08; text-wrap: balance; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
p { color: var(--muted); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #b64729; outline-offset: 3px; border-radius: 4px; }
::selection { background: #ffc9af; color: var(--dark); }

.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 10px; z-index: 40; background: var(--paper); padding: 12px 16px; border-radius: 8px; }
.skip-link:focus { top: 10px; }
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.eyebrow { font-size: 13px; font-weight: 650; letter-spacing: 0.14em; color: var(--rust); text-transform: uppercase; }

/* ------------------------------------------------------------- buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 9px; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; transition: background 0.25s, box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.25s; }
.button .icon { transition: transform 0.35s var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:hover .icon { transform: translateX(4px); }
.button:active { transform: translateY(0) scale(0.98); }
.button:disabled { opacity: 0.6; cursor: default; transform: none; }
.button-large { min-height: 56px; padding: 15px 28px; font-size: 16px; }
.button-dark { background: var(--dark); color: #fff; }
.button-dark:hover { background: #3d2a35; box-shadow: 0 14px 28px -14px #21191f90; }
.button-coral { background: var(--coral); color: #291b20; }
.button-coral:hover { background: var(--coral-soft); box-shadow: 0 16px 32px -14px #ff997488; }
.button-outline { border-color: #c6c0b9; }
.button-outline:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: #fff4ec; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat; transition: background-size 0.4s var(--ease); }
.text-link:hover { background-size: 0 1px; background-position: 100% calc(100% - 9px); }
.text-link .icon { transition: transform 0.35s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }
.text-link.dark { color: var(--ink); }
/* A sentence that ends in a link to the real AI assistant. Hidden until the assistant is switched on. */
.live-chat-note { margin-top: 26px; font-size: 16px; }
.live-chat-note[hidden] { display: none; }
.live-chat-note .text-link { padding: 0; font-size: inherit; text-align: left; }

/* -------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 30; background: #faf8f3e8; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; }
.site-header.is-stuck { border-color: #dfdcd5b0; box-shadow: 0 10px 30px -22px #21191f66; }
.header-inner { display: flex; align-items: center; gap: 34px; height: 84px; transition: height 0.35s var(--ease); }
.site-header.is-stuck .header-inner { height: 68px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { display: block; width: 150px; height: 52px; object-fit: contain; }
.site-header nav { display: flex; gap: 30px; margin-left: auto; }
.site-header nav a { position: relative; font-size: 15px; font-weight: 500; line-height: 44px; white-space: nowrap; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1.5px; background: var(--rust); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin-left: auto; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease); }
.menu-toggle.is-open span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle.is-open span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; color: #fff8f0; background: radial-gradient(ellipse at 88% 108%, #6a3438 0, transparent 56%), radial-gradient(ellipse at 6% -14%, #48293a 0, transparent 50%), var(--dark); padding: 92px 0 104px; }
.hero-sun { position: absolute; right: 4%; bottom: -330px; width: 620px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ff9974 0, #d2603f 58%, #a8472f 100%); opacity: 0.42; pointer-events: none; translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 10px); transition: translate 0.6s var(--ease); }
.hero-waves { position: absolute; left: -4%; bottom: 10px; width: 108%; height: clamp(70px, 10vw, 150px); overflow: visible; opacity: 0.5; pointer-events: none; translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -8px); transition: translate 0.6s var(--ease); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.5vw, 92px); line-height: 1; letter-spacing: -0.055em; }
.hero h1 .line { display: block; }
/* Three lines, three voices: a quiet set-up, the point, then the turn. */
.hero h1 .line:nth-child(1) { font-size: 0.8em; font-weight: 400; letter-spacing: -0.045em; color: #cbbdc6; }
.hero h1 .line:nth-child(2) { margin-top: 0.04em; font-weight: 600; }
.hero h1 .line--accent { position: relative; width: fit-content; }
.hero-underline { position: absolute; left: 0.04em; bottom: -0.04em; width: 96%; height: 0.17em; overflow: visible; pointer-events: none; }
.hero-underline .wave { stroke-width: 3; }
.hero h1 em { padding: 0 0.08em 0.12em 0; letter-spacing: -0.03em; background: linear-gradient(100deg, #ffd9c2 4%, #ff9974 58%, #e98561 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description { max-width: 480px; margin-top: 28px; font-size: 18px; line-height: 1.7; color: #d5c8cf; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
.hero-note { margin-top: 18px; font-size: 15px; color: #bfb2bb; }

.hero-visual { position: relative; justify-self: end; width: min(430px, 100%); }
.product-card { background: var(--card); color: var(--ink); border-radius: 22px; padding: 14px; box-shadow: 0 40px 80px -30px #0d070b; }
.product-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #ebe7e0; border-radius: 13px; padding: 5px; }
.product-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; border-radius: 9px; font-size: 15px; font-weight: 600; color: #5d565c; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.product-tabs button:hover { color: var(--ink); }
.product-tabs button[aria-selected='true'] { background: var(--dark); color: #fff; box-shadow: 0 6px 14px -8px #21191f; }
.product-header { display: flex; align-items: center; gap: 12px; padding: 16px 8px 14px; border-bottom: 1px solid #ebe5dc; }
.product-header strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.product-header div > span { font-size: 14px; color: var(--muted); }
.product-time { margin-left: auto; font-size: 14px; color: var(--muted); }
.assistant-avatar { display: grid; place-items: center; width: 40px; height: 40px; background: var(--sand); border-radius: 12px; flex-shrink: 0; }
.hero-messages { display: flex; flex-direction: column; gap: 10px; min-height: 292px; padding: 16px 8px 8px; }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 15px; font-size: 15px; line-height: 1.5; }
.bubble.incoming { align-self: flex-start; background: #eeebe5; border-bottom-left-radius: 5px; }
.bubble.outgoing { align-self: flex-end; background: var(--plum); color: #fff8f0; border-bottom-right-radius: 5px; }
.bubble.typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9a8f95; animation: typing 1s infinite ease-in-out; }
.bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
.call-event { align-self: center; font-size: 14px; color: #8f493d; background: #fbeee8; border-radius: 20px; padding: 6px 14px; }
.lead-notification { display: flex; align-items: center; gap: 12px; margin: 6px 4px 4px; padding: 12px 14px; background: var(--sage); border: 1px solid #d9decb; border-radius: 14px; }
.lead-notification strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.lead-notification span span, .lead-notification div > span { font-size: 14px; color: #56604b; }
.lead-tick { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dfe6d2; color: #587449; flex-shrink: 0; }
.example-note { margin-top: 14px; text-align: center; font-size: 14px; color: #a99ca5; }

/* ------------------------------------------------------------ audience */
.audience { border-bottom: 1px solid var(--line); }
.audience .container { display: grid; grid-template-columns: repeat(5, 1fr); padding-block: 26px; }
.audience ul { display: contents; }
.audience p, .audience li { display: flex; align-items: center; justify-content: center; padding: 6px 16px; font-size: 15px; line-height: 1.4; text-align: center; }
.audience p { font-weight: 650; color: var(--ink); }
.audience li { color: var(--muted); border-left: 1px solid #d3cfc5; }

/* --------------------------------------------- the free preview moment */
/* "Try it / free / for seven days", set on a slight tilt in the same type and
   dusk gradients as the rest of the page. Its motion is its own and is set up
   in the motion section at the bottom of this file. */
.free { position: relative; overflow: hidden; color: #fff8f0; padding: clamp(52px, 5.6vw, 80px) 0 clamp(48px, 5.2vw, 72px); view-timeline: --free block;
  background: radial-gradient(ellipse at 50% 130%, #7a3c3d 0, transparent 62%), radial-gradient(ellipse at 8% -30%, #48293a 0, transparent 52%), var(--dark); }
.free-inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 430px); justify-content: center; align-items: center; gap: clamp(40px, 7vw, 112px); }
.free-lockup { width: fit-content; max-width: 100%; margin: 0; rotate: -5deg; font-weight: 500; line-height: 1; text-align: left; }
.free-try, .free-sub { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); white-space: nowrap; }
.free-try { padding-left: 0.1em; font-size: clamp(24px, 2.9vw, 42px); letter-spacing: -0.05em; }
.free-word { display: flex; margin: -0.02em 0 0.02em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(104px, 12.6vw, 178px); letter-spacing: -0.03em; }
/* Each letter carries the gradient itself, with room for the italic overhang. */
.free-word span { display: block; line-height: 1; padding: 0.02em 0.14em 0.14em; margin: -0.02em -0.14em -0.14em; background: linear-gradient(170deg, #ffd9c2 8%, #ff9974 52%, #dd6f4d 96%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform 0.5s var(--ease), filter 0.3s; }
.free-word:hover span { transform: translateY(-0.05em); filter: brightness(1.08); }
.free-word span:nth-child(2) { transition-delay: 60ms; }
.free-word span:nth-child(3) { transition-delay: 120ms; }
.free-word span:nth-child(4) { transition-delay: 180ms; }
.free-sub { justify-content: flex-end; font-size: clamp(11px, 0.95vw, 14px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #e7dbe1; }
.free-side p { font-size: 18px; line-height: 1.55; color: #e7dbe1; }
.free-side .button { margin-top: 20px; }
.free-side .free-fine { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #b9a9b2; }
.free-waves { position: absolute; left: -4%; width: 108%; height: clamp(44px, 6vw, 88px); overflow: visible; pointer-events: none; opacity: 0.7; translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -8px); transition: translate 0.6s var(--ease); }
.free-waves--top { top: -6px; }
.free-waves--bottom { bottom: -6px; }
.wave { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
/* Soft light in place of hard shapes: it slides in from each side. */
.free-glow { position: absolute; width: clamp(240px, 34vw, 480px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 12px)); transition: transform 0.6s var(--ease); }
.free-glow--right { right: -10%; top: -46%; background: radial-gradient(circle, #ff997440 0, #ff997414 42%, transparent 68%); }
.free-glow--left { left: -12%; bottom: -60%; background: radial-gradient(circle, #c9583c55 0, #a5422518 44%, transparent 68%); }

/* ------------------------------------------------------------ sections */
.section { padding: clamp(72px, 9vw, 124px) 0; }
.section-tinted { background: #f1eee7; border-block: 1px solid #e4e1d8; }
.section-dark { background: radial-gradient(ellipse at 0 115%, #5b303c 0, transparent 62%), var(--dark); color: #fff8f0; }
.section-dark p { color: #cfc2ca; }
.section-title { font-size: clamp(34px, 4.5vw, 58px); max-width: 19ch; }
.section-title--center { margin-inline: auto; text-align: center; }
.section-dark .section-title em { color: var(--coral-soft); }

/* What we do */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.service-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 44px 44px 40px; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.service-card:hover { transform: translateY(-6px); border-color: #cdbfb2; box-shadow: 0 30px 60px -34px #21191f70; }
.service-card--dark { background: var(--plum); border-color: var(--plum); color: #fff8f0; }
.service-card--dark:hover { border-color: #5a3c4d; }
.service-card--dark p, .service-card--dark .tick-list li { color: #d8cbd3; }
.service-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--sand); color: var(--rust); transition: transform 0.5s var(--ease); }
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.06); }
.service-card--dark .service-icon { background: #4a3142; color: var(--coral-soft); }
.service-card .service-label { margin-top: 30px; font-size: 14px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust); }
.service-card--dark .service-label { color: var(--coral-soft); }
.service-card h3 { margin: 12px 0 14px; font-size: clamp(26px, 2.6vw, 34px); max-width: 15ch; }
.service-card > p:not(.service-label) { max-width: 44ch; }
.tick-list { display: grid; gap: 11px; margin-top: 26px; }
.tick-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: #4f4851; }
.tick-list li::before { content: ''; position: absolute; left: 2px; top: 0.42em; width: 14px; height: 7px; border-left: 2px solid var(--rust); border-bottom: 2px solid var(--rust); transform: rotate(-45deg); }
.service-card--dark .tick-list li::before, .price-card--featured .tick-list li::before { border-color: var(--coral); }

/* Pointer-follow highlight on cards (fine pointers only, see site.js). */
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), #ff997426, transparent 62%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* Demo */
.demo-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.demo-copy > p { max-width: 38ch; margin-top: 22px; font-size: 18px; }
.industry-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.industry-options button { min-height: 46px; padding: 10px 20px; border: 1px solid #c9c5ba; border-radius: 30px; background: var(--card); font-size: 15px; font-weight: 600; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease); }
.industry-options button:hover { transform: translateY(-2px); border-color: var(--ink); }
.industry-options button[aria-pressed='true'] { background: var(--dark); border-color: var(--dark); color: #fff; }
.interactive-demo { background: var(--card); border: 1px solid #d9d5cb; border-radius: 22px; padding: 22px; box-shadow: 0 34px 70px -44px #21191f80; }
.interactive-header { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #ebe5dc; }
.interactive-header strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.interactive-header div > span { font-size: 14px; color: var(--muted); }
.example-pill { margin-left: auto; border: 1px solid #ded5c9; border-radius: 6px; padding: 3px 10px; font-size: 13px; color: #75655b; }
.demo-messages { display: flex; flex-direction: column; gap: 10px; min-height: 280px; max-height: 360px; overflow-y: auto; padding: 18px 2px; }
.demo-welcome { margin: auto; text-align: center; padding: 20px; }
.demo-welcome h3 { font-size: 24px; max-width: 16ch; margin-inline: auto; }
.demo-message { max-width: 86%; padding: 11px 14px; border-radius: 15px; background: #eeebe5; align-self: flex-start; border-bottom-left-radius: 5px; animation: bubble-in 0.45s var(--ease) both; }
.demo-message p { font-size: 15px; line-height: 1.5; color: var(--ink); }
.demo-message.is-user { align-self: flex-end; background: var(--plum); border-radius: 15px 15px 5px 15px; }
.demo-message.is-user p { color: #fff8f0; }
.demo-message.is-system { align-self: stretch; max-width: 100%; background: var(--sage); border: 1px solid #d9decb; border-radius: 12px; }
.demo-message-label { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: #7b6d74; }
.demo-message.is-user .demo-message-label { color: #cbb9c4; }
.demo-options { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-options:not(:empty) { margin-bottom: 14px; }
.demo-option { min-height: 44px; padding: 9px 16px; border: 1px solid #a28c7b; border-radius: 30px; background: #fffaf4; font-size: 15px; font-weight: 500; transition: background 0.25s, transform 0.3s var(--ease); animation: bubble-in 0.4s var(--ease) both; }
.demo-option:hover { background: var(--sand); transform: translateY(-2px); }
.demo-controls { display: flex; align-items: center; gap: 12px; }
.demo-controls .button { flex: 1; }
.reset-button { min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--muted); border-radius: 9px; }
.reset-button:hover { color: var(--ink); background: #eeeae2; }
.demo-status { margin-top: 12px; font-size: 14px; text-align: center; }

/* How it works: the copy stays put while the steps scroll past. */
.how-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 88px; align-items: start; }
.how-copy { position: sticky; top: 132px; }
.how-copy > p { max-width: 34ch; margin: 22px 0 22px; font-size: 18px; }
.timeline { position: relative; --progress: 0; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 13px; top: 14px; bottom: 60px; width: 2px; border-radius: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--rust); transform: scaleY(var(--progress)); transform-origin: top; transition: transform 0.7s var(--ease); }
.timeline li { position: relative; padding: 0 0 72px 62px; opacity: 0.42; transition: opacity 0.5s; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li.is-active, .timeline li.is-done { opacity: 1; }
.timeline li::before { content: ''; position: absolute; z-index: 1; left: 0; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 2px solid #cfc9bf; transition: border-color 0.4s, background 0.4s, box-shadow 0.4s; }
.timeline li.is-done::before { background: var(--rust); border-color: var(--rust); }
.timeline li.is-active::before { background: var(--coral); border-color: var(--rust); box-shadow: 0 0 0 7px #ff997430; }
.timeline h3 { font-size: clamp(24px, 2.5vw, 32px); }
.timeline p { max-width: 40ch; margin-top: 10px; }

/* Calculator */
.calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.calculator-copy > p { margin-top: 20px; font-size: 18px; }
.calc-total { display: flex; flex-direction: column; margin-top: 40px; }
.calc-label { font-size: 15px; color: #cfc2ca; }
#calc-result { font-size: clamp(60px, 8vw, 104px); font-weight: 500; letter-spacing: -0.055em; line-height: 1.02; color: var(--coral-soft); font-variant-numeric: tabular-nums; }
.calc-detail { margin-top: 8px; font-size: 17px; color: #e7dbe1; }
.calc-detail span { font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
.calculator-copy .calc-disclaimer { margin-top: 18px; font-size: 14px; color: #a99ca5; }
.calculator { background: #2c2129; border: 1px solid #45343f; border-radius: 22px; padding: 36px; display: grid; gap: 32px; }
.range-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 16px; font-weight: 500; color: #e7dbe1; }
.range-field output { font-size: 22px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.range-control { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.range-step { width: 44px; height: 44px; border: 1px solid #5a4652; border-radius: 50%; font-size: 20px; line-height: 1; color: #fff; flex-shrink: 0; transition: background 0.25s, border-color 0.25s; }
.range-step:hover:not(:disabled) { background: var(--coral); border-color: var(--coral); color: #291b20; }
.range-step:disabled { opacity: 0.35; cursor: default; }
input[type='range'] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--coral) var(--range-progress, 0%), #4d3b46 var(--range-progress, 0%)); }
input[type='range']::-moz-range-track { height: 6px; border-radius: 6px; background: #4d3b46; }
input[type='range']::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--coral); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--coral); box-shadow: 0 4px 10px #0006; transition: transform 0.25s var(--ease); }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--coral); }
input[type='range']:hover::-webkit-slider-thumb, input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 22px; align-items: stretch; margin-top: 60px; }
.price-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 38px 34px 34px; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.price-card:hover { transform: translateY(-8px); border-color: #cdbfb2; box-shadow: 0 34px 60px -36px #21191f80; }
.price-card--featured { background: var(--plum); border-color: var(--plum); color: #fff8f0; padding-top: 30px; }
.price-card--featured:hover { border-color: #5a3c4d; }
.price-card--featured .tick-list li, .price-card--featured .setup { color: #d8cbd3; }
.price-tag { align-self: flex-start; margin-bottom: 18px; padding: 5px 12px; border-radius: 30px; background: var(--coral); color: #291b20; font-size: 14px; font-weight: 650; }
.price-card h3 { font-size: 24px; letter-spacing: -0.03em; }
.price { margin-top: 20px; font-size: clamp(50px, 5vw, 66px); font-weight: 500; letter-spacing: -0.055em; line-height: 1; color: var(--ink); }
.price-card--featured .price { color: #fff; }
.price span { margin-left: 8px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.price-card--featured .price span { color: #cbb9c4; }
.setup { margin-top: 10px; font-size: 15px; }
.price-card .tick-list { margin: 28px 0 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.price-card--featured .tick-list { border-color: #54394a; }
.price-card .button { margin-top: auto; width: 100%; }
.pricing-note { max-width: 66ch; margin: 34px auto 0; text-align: center; font-size: 15px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: start; }
.faq-copy { position: sticky; top: 132px; }
.faq-copy > p { margin: 22px 0 10px; font-size: 18px; }
.faq-list { border-top: 1px solid #d5d1c6; interpolate-size: allow-keywords; }
.faq-list details { border-bottom: 1px solid #d5d1c6; }
.faq-list summary { position: relative; display: block; padding: 24px 56px 24px 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; cursor: pointer; list-style: none; transition: color 0.25s, padding-left 0.4s var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--rust); padding-left: 8px; }
.faq-list summary::before, .faq-list summary::after { content: ''; position: absolute; right: 10px; top: 50%; width: 18px; height: 2px; background: currentColor; transition: transform 0.45s var(--ease); }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0); }
.faq-list details p { max-width: 62ch; padding: 0 56px 26px 0; }
.faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: center; }
.contact-section .section-title { font-size: clamp(42px, 5.6vw, 76px); }
.contact-copy > p { max-width: 36ch; margin-top: 24px; font-size: 18px; }
.contact-copy .contact-human { margin-top: 34px; font-size: 17px; color: #e7dbe1; }
.contact-human a { font-weight: 650; color: #fff; border-bottom: 1px solid #ffffff70; transition: border-color 0.25s, color 0.25s; }
.contact-human a:hover { color: var(--coral-soft); border-color: var(--coral-soft); }
.enquiry-form { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 36px; box-shadow: 0 40px 80px -40px #0d070b; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enquiry-form label { display: block; margin: 18px 0 7px; font-size: 15px; font-weight: 600; }
.enquiry-form .form-row:first-child label { margin-top: 0; }
.enquiry-form label > span { margin-left: 2px; color: #aa583c; }
.enquiry-form label > .optional { margin-left: 6px; font-size: 14px; font-weight: 400; color: #71656d; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { display: block; width: 100%; min-height: 50px; border: 1px solid #b6a99e; border-radius: 9px; background: #fffcf8; padding: 11px 14px; font-size: 16px; line-height: 1.5; transition: border-color 0.25s, box-shadow 0.25s; }
.enquiry-form textarea { min-height: 96px; resize: vertical; }
.enquiry-form input::placeholder { color: #80737c; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { outline: 0; border-color: var(--rust); box-shadow: 0 0 0 4px #a5422522; }
.enquiry-form [aria-invalid='true'] { border-color: #a3301a; background: #fff6f3; }
.enquiry-form .field-hint { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #6e6069; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { width: 100%; margin-top: 26px; }
.enquiry-form .form-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 14px; line-height: 1.55; color: #6e6069; }
.form-note .icon { width: 16px; height: 16px; margin-top: 3px; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
#form-status:empty { display: none; }
#form-status { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #e9edde; border: 1px solid #cdd6bf; color: #3f4c33; font-size: 15px; animation: bubble-in 0.5s var(--ease) both; }
#form-status.is-error { background: #fbe9e3; border-color: #efc4b6; color: #7c2412; }

/* Footer */
.footer { padding: 48px 0 34px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer-top p { font-family: var(--serif); font-style: italic; font-size: 22px; color: #74676c; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 30px; flex-wrap: wrap; padding-top: 20px; font-size: 14px; color: var(--muted); }
.footer-bottom > div { display: flex; gap: 6px 26px; flex-wrap: wrap; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Plain text pages (privacy) */
.legal { padding: 70px 0 90px; }
.legal-inner { max-width: 760px; }
.legal h1 { font-size: clamp(34px, 5vw, 50px); margin: 12px 0 10px; }
.legal h2 { font-size: 24px; letter-spacing: -0.03em; margin: 42px 0 12px; }
.legal p { margin: 0 0 14px; line-height: 1.8; color: #4b434b; }
.legal p.eyebrow { margin: 0; color: var(--rust); }
.legal p.legal-updated { font-size: 15px; color: #6f626b; margin-bottom: 30px; }
.legal a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- motion */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes sun-drift { from { transform: translateY(90px); } to { transform: translateY(-70px); } }
@keyframes free-tilt { from { rotate: 0deg; scale: 0.86; } }
@keyframes free-from-left { from { translate: -24% 0; opacity: 0; } }
@keyframes free-from-right { from { translate: 24% 0; opacity: 0; } }
@keyframes free-letter { from { translate: 0 62%; rotate: 9deg; opacity: 0; } }
@keyframes free-fade-up { from { translate: 0 30px; opacity: 0; } }
@keyframes wave-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wave-drift { to { transform: translateX(-2.5%); } }
@keyframes glow-from-right { from { translate: 60% 0; opacity: 0; } }
@keyframes glow-from-left { from { translate: -60% 0; opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: one staged entrance, then the conversation plays (site.js). */
  .hero h1 .line, .hero-description, .hero-actions, .hero-note, .hero-visual { animation: rise 0.95s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
  .hero-messages .bubble, .hero-messages .call-event { animation: bubble-in 0.45s var(--ease) both; }
  .js .lead-notification { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .js .lead-notification.is-in { opacity: 1; transform: none; }

  /* Sections arrive as they are scrolled into view (class set by site.js). */
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* Tied to scroll position where the browser supports it. */
  @supports (animation-timeline: view()) {
    .hero-sun { animation: sun-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    /* The free poster assembles as it is scrolled into view: the lines draw,
       the lockup tilts into place and FREE lands one letter at a time. */
    .free-lockup { animation: free-tilt linear both; animation-timeline: --free; animation-range: cover 6% cover 42%; }
    .free-try { animation: free-from-left linear both; animation-timeline: --free; animation-range: cover 10% cover 32%; }
    .free-word span { animation: free-letter linear both; animation-timeline: --free; animation-range: cover 14% cover 34%; }
    .free-word span:nth-child(2) { animation-range: cover 17% cover 37%; }
    .free-word span:nth-child(3) { animation-range: cover 20% cover 40%; }
    .free-word span:nth-child(4) { animation-range: cover 23% cover 43%; }
    .free-sub { animation: free-from-right linear both; animation-timeline: --free; animation-range: cover 26% cover 44%; }
    .free-side { animation: free-fade-up linear both; animation-timeline: --free; animation-range: cover 30% cover 46%; }
    .free .wave { animation: wave-draw linear both; animation-timeline: --free; animation-range: cover 4% cover 44%; }
    .free-glow--right { animation: glow-from-right linear both; animation-timeline: --free; animation-range: cover 8% cover 40%; }
    .free-glow--left { animation: glow-from-left linear both; animation-timeline: --free; animation-range: cover 12% cover 44%; }
  }

  /* Browsers without scroll-linked animation play the same entrance once
     (site.js adds the classes). */
  .no-view-timeline .free-lockup, .no-view-timeline .free-try, .no-view-timeline .free-word span, .no-view-timeline .free-sub, .no-view-timeline .free-side, .no-view-timeline .free-glow { transition: translate 0.9s var(--ease), rotate 0.9s var(--ease), scale 0.9s var(--ease), opacity 0.9s var(--ease), transform 0.5s var(--ease); }
  .no-view-timeline .free .wave { transition: stroke-dashoffset 1.6s var(--ease); }
  .no-view-timeline .free:not(.is-in) .free-lockup { rotate: 0deg; scale: 0.86; }
  .no-view-timeline .free:not(.is-in) .free-try { translate: -24% 0; opacity: 0; }
  .no-view-timeline .free:not(.is-in) .free-word span { translate: 0 62%; rotate: 9deg; opacity: 0; }
  .no-view-timeline .free:not(.is-in) .free-sub { translate: 24% 0; opacity: 0; }
  .no-view-timeline .free:not(.is-in) .free-side { translate: 0 30px; opacity: 0; }
  .no-view-timeline .free:not(.is-in) .wave { stroke-dashoffset: 1; }
  .no-view-timeline .free:not(.is-in) .free-glow--right { translate: 60% 0; opacity: 0; }
  .no-view-timeline .free:not(.is-in) .free-glow--left { translate: -60% 0; opacity: 0; }

  /* The hero's lines draw once on arrival. */
  .hero-waves .wave { animation: wave-draw 2.8s var(--ease) 0.5s both; }
  .hero-underline .wave { animation: wave-draw 1.1s var(--ease) 1.2s both; }
  .hero-waves { animation: wave-drift 12s ease-in-out infinite alternate; }

  /* Always-on, slow: the lines sway. */
  .free-waves--top { animation: wave-drift 11s ease-in-out infinite alternate; }
  .free-waves--bottom { animation: wave-drift 13s ease-in-out infinite alternate-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { justify-self: start; }
  .how-grid, .faq-grid { gap: 56px; }
  .demo-grid, .calculator-grid, .contact-grid { gap: 48px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 820px) {
  .site-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 24px 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 30px -24px #21191f40; }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { font-size: 18px; line-height: 54px; border-bottom: 1px solid var(--line); }
  .site-header nav a::after { display: none; }
  .menu-toggle { display: flex; order: 3; margin-left: 0; }
  .header-cta { margin-left: auto; }
  .header-inner { gap: 12px; height: 72px; }
  .site-header.is-stuck .header-inner { height: 64px; }
  .brand-logo { width: 122px; height: 42px; }
  .free-inner, .service-grid, .demo-grid, .how-grid, .calculator-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .how-copy, .faq-copy { position: static; }
  .free-inner { justify-items: center; gap: 30px; text-align: center; }
  .free-side { max-width: 460px; }
  .audience .container { grid-template-columns: 1fr 1fr; padding-block: 20px 8px; }
  .audience p { grid-column: 1 / -1; padding-bottom: 14px; }
  .audience li { padding-block: 14px; border-left: 0; border-top: 1px solid #d3cfc5; }
  .audience li:nth-child(even) { border-left: 1px solid #d3cfc5; }
  .timeline li { padding-bottom: 48px; }
  .service-card { padding: 34px 28px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { width: calc(100% - 40px); }
  .hero { padding: 56px 0 72px; }
  .hero-actions .button { width: 100%; }
  .free-side .button, .how-copy .text-link { width: 100%; }
  .how-copy .text-link { width: auto; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .enquiry-form .form-row:first-child div + div label { margin-top: 18px; }
  .enquiry-form, .calculator { padding: 24px 20px; }
  .interactive-demo { padding: 18px 16px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .faq-list summary { font-size: 18px; padding-right: 44px; }
  .faq-list details p { padding-right: 0; }
  .audience p { padding-inline: 0; }
}