/* Clearview BI website
   Layout: one calm column with wide breathing room. The signature is the two overlapping glass panes
   from the logo, used once in the hero as the report preview and once as the "your data stays yours" panel. */
:root {
  --bg: #FBFCFC;          /* window white */
  --tint: #EDF8F5;        /* seafoam wash */
  --surface: #FFFFFF;
  --ink: #1E2B2A;         /* charcoal */
  --ink-soft: #4A5B59;
  --line: #D6E6E2;
  --seafoam: #6CC5B0;
  --sky: #8FD0F2;
  --teal: #1F7A68;        /* deep teal, the only strong colour */
  --teal-ink: #FFFFFF;
  --warn: #A06B00;
  --glass-a: rgba(143, 208, 242, 0.32);
  --glass-b: rgba(108, 197, 176, 0.30);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --shadow: 0 18px 40px -24px rgba(31, 122, 104, 0.45);
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --radius: 18px;
  --wrap: 68rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1716; --tint: #142321; --surface: #17211F; --ink: #E4EFEC; --ink-soft: #A9BCB8;
    --line: #2A3B38; --teal: #6CC5B0; --teal-ink: #0F1716; --warn: #E39A66;
    --glass-a: rgba(143, 208, 242, 0.14); --glass-b: rgba(108, 197, 176, 0.16); --glass-edge: rgba(255, 255, 255, 0.18);
    --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1716; --tint: #142321; --surface: #17211F; --ink: #E4EFEC; --ink-soft: #A9BCB8;
  --line: #2A3B38; --teal: #6CC5B0; --teal-ink: #0F1716; --warn: #E39A66;
  --glass-a: rgba(143, 208, 242, 0.14); --glass-b: rgba(108, 197, 176, 0.16); --glass-edge: rgba(255, 255, 255, 0.18);
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8); color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: max(16px, 4vw); }
a { color: var(--teal); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sky); outline-offset: 2px;
}
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); font-weight: 700; }
h2 { font-size: var(--step-2); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0; max-width: 62ch; }
.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }
.muted { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

/* header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand b { font-size: 1.25rem; letter-spacing: -0.02em; }
.brand small { display: block; font-size: 0.78rem; color: var(--ink-soft); font-weight: 500; margin-top: -2px; }
.nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; font-size: var(--step--1); }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--teal); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--teal); color: var(--teal-ink); border: 0; border-radius: 999px;
  padding: 0.8rem 1.4rem; font: 600 var(--step--1)/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.ghost { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.nav .btn { padding: 0.55rem 1rem; color: var(--teal-ink); }

/* sections */
main > section { padding-block: clamp(3.5rem, 7vw, 6rem); }
main > section.tint { background: var(--tint); }
.stack { display: grid; gap: 1rem; align-content: start; }
.section-head { display: grid; gap: 0.75rem; margin-bottom: 2.25rem; }

/* hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.hero .proof { font-size: var(--step--1); color: var(--ink-soft); }

/* the glass report preview */
.panes { position: relative; padding: 1.75rem 1.25rem 1.25rem 2.25rem; min-width: 0; }
.panes::before {
  content: ""; position: absolute; inset: 0 22% 30% 0; border-radius: 26px;
  background: linear-gradient(135deg, var(--glass-a), transparent 85%);
  border: 1.5px solid var(--glass-edge);
}
.report {
  position: relative; background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1.5px solid var(--glass-edge); border-radius: 22px; padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow); backdrop-filter: blur(6px); display: grid; gap: 1rem;
  background-image: linear-gradient(160deg, var(--glass-b), transparent 60%);
}
.report header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.report header b { font-size: 0.95rem; }
.tag { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.55rem; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.fig small { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.fig strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fig em { display: block; font-style: normal; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.fig em.down { color: var(--warn); }
.spark { width: 100%; height: 56px; display: block; }
.spark .area { fill: var(--glass-b); }
.spark .lineplot { fill: none; stroke: var(--teal); stroke-width: 2; }
.spark .dot { fill: var(--teal); }
.spark text { fill: var(--ink-soft); font: 500 9px var(--font); }
.note { font-size: 0.86rem; line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 0.85rem; }
.note b { color: var(--teal); }

/* problem / parts */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; }
.part { display: grid; gap: 0.4rem; align-content: start; border-top: 2px solid var(--seafoam); padding-top: 1rem; min-width: 0; }
.part p { color: var(--ink-soft); }

/* steps: a real sequence, so numbered */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 0.5rem; min-width: 0; }
.steps li::before { content: counter(s); width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--teal); background: var(--surface); border: 1.5px solid var(--seafoam); }
.steps p { color: var(--ink-soft); }

/* data stays yours */
.yours { position: relative; border-radius: 26px; padding: clamp(1.5rem, 4vw, 2.75rem); background: linear-gradient(135deg, var(--glass-a), var(--glass-b)); border: 1.5px solid var(--glass-edge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.checks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.6rem; }
.checks li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; border-radius: 6px; background: var(--teal); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='black' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='black' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.packages { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.packages span { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: var(--step--1); }

/* pricing */
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { text-align: left; padding: 1rem 0.75rem 1rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { font-weight: 600; width: 55%; }
.price-table th small { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }
.price-table td { font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
/* phones: each fee under its description, so nothing is squeezed */
@media (max-width: 560px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: auto; }
  .price-table th { border-bottom: 0; padding-bottom: 0.25rem; }
  .price-table td { white-space: normal; padding-top: 0; }
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--teal); color: var(--teal-ink); font-weight: 700; }
.skip:focus { top: 12px; }

/* faq */
.faq { display: grid; gap: 0.25rem; max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 0.6rem; color: var(--ink-soft); }

/* forms */
.form { display: grid; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; min-width: 0; }
.form legend { font-weight: 700; font-size: var(--step-1); margin-bottom: 0.25rem; padding: 0; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label, .field .label { font-size: var(--step--1); font-weight: 600; }
.field .hint { font-size: 0.8rem; color: var(--ink-soft); }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 0.7rem 0.85rem; width: 100%; min-width: 0;
}
textarea { min-height: 7rem; resize: vertical; }
/* only after the visitor has touched a field, never on an empty form */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--warn); }
.choice { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--step--1); }
.choice input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--teal); padding: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 12px; padding: 0.85rem 1rem; font-size: var(--step--1); background: var(--tint); border: 1px solid var(--line); }
.form-status.error { border-color: var(--warn); }
.banks { display: grid; gap: 0.75rem; }
.bank-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 0.75rem; }
/* order form: one card per choice, the whole card is the click target */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.plan { position: relative; display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 1.1rem 1.1rem 3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.plan:hover { border-color: var(--seafoam); }
.plan input { position: absolute; left: 1.1rem; top: 1.25rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--teal); }
.plan:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--shadow); }
.plan:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.plan-name { font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.plan-text { color: var(--ink-soft); font-size: var(--step--1); }
.plan-price { font-weight: 600; font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--teal); margin-top: 0.25rem; }
.summary { margin-top: 0.85rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--tint); font-weight: 600; font-variant-numeric: tabular-nums; }
.plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .plans.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* legal pages */
.doc { max-width: 46rem; display: grid; gap: 1rem; }
.doc h2 { margin-top: 1.5rem; font-size: var(--step-1); }
.doc ol { padding-left: 1.25rem; display: grid; gap: 0.6rem; margin: 0; }
.doc li { max-width: 62ch; }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 2.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.site-foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-foot a { color: var(--ink-soft); }

@media (max-width: 860px) {
  .hero .wrap, .grid-2, .yours { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .panes { padding: 1.25rem 0.5rem 0.5rem 1.25rem; }
}
@media (max-width: 560px) {
  .form .row, .bank-row { grid-template-columns: minmax(0, 1fr); }
  .nav a:not(.btn) { display: none; }
}
[hidden] { display: none !important; }   /* a field style must never show what the script hid */
.form p.hint { font-size: var(--step--1); color: var(--ink-soft); }
/* pricing: one card per way of running Clearview, then what each service holds */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.offer { display: grid; gap: 0.75rem; align-content: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.offer .btn { justify-self: start; }
.fees { display: grid; grid-template-columns: minmax(7.5rem, 1fr) minmax(0, auto); gap: 0.5rem 1rem; margin: 0.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.fees dt { color: var(--ink-soft); }
.fees dt small { display: block; font-size: 0.8rem; }
.fees dd { margin: 0; font-weight: 700; text-align: right; }
.small { font-size: var(--step--1); }
.tiers { display: grid; gap: 2rem; margin-top: 2.5rem; }
.part.soon { border-top-color: var(--line); }
.part.soon p { color: var(--ink-soft); }
.part h3 .tag { vertical-align: middle; margin-left: 0.35rem; }
@media (max-width: 760px) { .offers { grid-template-columns: minmax(0, 1fr); } }
.offers.one { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
.onsite-note { margin: 1rem 0 0; color: var(--ink-soft); }
.onsite-note a { font-weight: 600; white-space: nowrap; }
.plan[hidden], [data-onsite-link][hidden] { display: none; }
.offer-note { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--step--1); color: var(--ink-soft); }
.compare { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-weight: 700; font-size: var(--step-0); }
.compare thead th small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); }
.compare tbody th { font-weight: 400; }
.compare td { width: 8.5rem; text-align: center; }
.compare thead th:not(:first-child) { text-align: center; }
.compare td.yes { color: var(--teal); font-weight: 700; }
.compare td.no { color: var(--ink-soft); }
.compare tr.soon th { color: var(--ink-soft); }
.compare tfoot td, .compare tfoot th { border-bottom: 0; font-size: var(--step--1); }
@media (max-width: 560px) { .compare th, .compare td { padding: 0.6rem 0.5rem; font-size: var(--step--1); } .compare td { width: 4.6rem; } }

/* The founding offer: the full price with a red line through it, read out as "Normally R600" */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.was { position: relative; display: inline-block; text-decoration: none; color: var(--ink-soft); font-weight: 500; margin-right: 0.5em; }
.was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; border-top: 1.5px solid rgba(208, 52, 58, 0.85); transform: rotate(-20deg); pointer-events: none; }
.founding { color: var(--teal); font-weight: 600; }

/* Offer cards: the labels on top and the monthly price as the biggest thing on the card */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.tag { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--tint); color: var(--teal); font-size: 0.8rem; font-weight: 700; }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.price { display: grid; gap: 0.2rem; min-width: 0; align-content: start; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.price-name { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.price-now { font-size: var(--step-2); font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-now small { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); }
.price-was { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .prices { grid-template-columns: minmax(0, 1fr); } }
.price-was .save { display: block; }

/* the Clio showcase under the hero (2026-10-29): a dark band, the chat window built from the real answers */
main > section.show { background: #16211F; color: #E6EFEC; }
.show-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.show h2 { color: #FFFFFF; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); }
.show-lede { font-size: var(--step-1); line-height: 1.5; color: #C9D8D4; }
.hooks { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.hooks li { border-left: 3px solid var(--seafoam); padding-left: 1rem; color: #C9D8D4; max-width: 56ch; }
.hooks b { display: block; color: #FFFFFF; font-size: var(--step-0); margin-bottom: 0.15rem; }
.clio-demo { margin: 0; display: grid; gap: 0.75rem; min-width: 0; }
.clio-demo figcaption { font-size: var(--step--1); color: #9FB3AE; }
.clio-win { background: #FFFFFF; color: #1E2B2A; border-radius: 22px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; height: 460px; }
.clio-top { display: flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid #E3EAE8; font-size: 0.95rem; }
.clio-top span:last-child { margin-left: auto; color: #56635F; font-size: 0.8rem; }
.clio-dot { width: 10px; height: 10px; border-radius: 50%; background: #1F7A68; }
.clio-log { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; overflow: hidden; justify-content: flex-end; }
.cm { max-width: 86%; padding: 0.6rem 0.85rem; border-radius: 16px; font-size: 0.92rem; line-height: 1.45; }
.cm.me { align-self: flex-end; background: #1F7A68; color: #FFFFFF; border-bottom-right-radius: 4px; }
.cm.bot { align-self: flex-start; background: #EEF5F3; border-bottom-left-radius: 4px; }
.cm.bot p { margin: 0; }
.cm dl { margin: 0.45rem 0 0; display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; font-size: 0.84rem; }
.cm dt { color: #4A5B59; } .cm dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cm.wait { color: #56635F; } .cm.wait i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #8A9693; animation: clio-dot 1s infinite ease-in-out; }
.cm.wait i:nth-child(2) { animation-delay: 0.15s; } .cm.wait i:nth-child(3) { animation-delay: 0.3s; }
@keyframes clio-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.cm.in { animation: clio-in 0.35s ease-out both; }
@keyframes clio-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.clio-input { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.9rem 0.9rem; padding: 0.55rem 0.6rem 0.55rem 0.95rem; border: 1.5px solid #D6E6E2; border-radius: 999px; min-height: 46px; font-size: 0.92rem; }
.clio-typed:empty + .clio-caret::before { content: "Ask about your figures"; color: #8A9693; }
.clio-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; background: #1F7A68; vertical-align: -0.15em; margin-left: 1px; animation: clio-blink 1s steps(1) infinite; }
@keyframes clio-blink { 50% { opacity: 0; } }
.clio-send { margin-left: auto; background: #1F7A68; color: #FFFFFF; border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 600; }
@media (max-width: 860px) { .show-grid { grid-template-columns: minmax(0, 1fr); } .clio-win { height: 430px; } }

/* Try the demo: the public login, so a visitor can copy it */
.demo-login { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; display: grid; gap: 1rem; align-self: start; }
.demo-login dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.25rem; margin: 0; }
.demo-login dt { color: var(--ink-soft); }
.demo-login dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; }

/* a part of a form that still needs an answer: ringed in red when the person presses send */
.cv-missing { outline: 2px solid #c62828; outline-offset: 4px; border-radius: 12px; }
.form-status.error { border-color: #c62828; }

/* Order buttons while ordering is not open yet (build.py COMING_SOON) */
.btn.soon{opacity:.65;cursor:default;pointer-events:none}