/* =============================================================
   AutoOrders Hub: Landing Page Stylesheet
   Linked from index.html with:
     <link rel="stylesheet" href="styles.css">

   Written mobile-first. Base styles are for phones; wider
   layouts are added with min-width media queries.

   Contents
     1. Design tokens
     2. Reset and base
     3. Layout helpers
     4. Buttons and links
     5. Header
     6. Hero
     7. Problem (order sheets)
     8. How it works
     9. Dashboard sample and benefits
    10. ROI calculator
    11. Proof
    12. Pricing
    13. FAQ
    14. Book a demo
    15. Footer
    16. Sticky call to action
    17. Scroll animation
   ============================================================= */


/* -------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* Brand colours */
  --emerald: #15803D;
  --emerald-deep: #0F5C2C;
  --emerald-tint: #DDEBE1;
  --navy: #0F172A;
  --orange: #F59E0B;
  --orange-hover: #E08E00;

  /* Surfaces and text */
  --paper: #EDF5EF;
  --white: #FFFFFF;
  --ink: #111827;
  --ink-soft: #374151;
  --muted: #5B6472;
  --line: #CFDDD3;

  /* Status colours (soft background, dark text for contrast) */
  --delivered-bg: #DCFCE7;   --delivered-fg: #166534;
  --pending-bg: #FFEDD5;     --pending-fg: #9A3412;
  --processing-bg: #DBEAFE;  --processing-fg: #1E40AF;
  --cancelled-bg: #FEE2E2;   --cancelled-fg: #991B1B;

  /* Fonts */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid spacing */
  --gutter: clamp(16px, 5vw, 40px);
  --section-space: clamp(56px, 9vw, 112px);

  /* Shape */
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05);

  /* Height of the sticky header, used for anchor offsets */
  --header-height: 68px;
}


/* -------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.3rem + 3.7vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
h3 { font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }

p {
  margin: 0;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}


/* -------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------- */
.container {
  width: min(1120px, 100% - (2 * var(--gutter)));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section-line {
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.lead {
  max-width: 40rem;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.example-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.875rem;
}


/* -------------------------------------------------------------
   4. Buttons and links
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: 700 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--orange);
  color: var(--navy);
}

.btn-primary:hover {
  background: var(--orange-hover);
}

.btn-outline {
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: 1.0625rem; }
.btn-block { width: 100%; }

.text-link {
  color: var(--emerald);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.text-link:hover {
  color: var(--emerald-deep);
}


/* -------------------------------------------------------------
   5. Header
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font: 800 1rem/1 var(--font-head);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
}

.brand span,
.btn-sm {
  white-space: nowrap;
}

/* On the very smallest phones the logo mark and button are enough */
@media (max-width: 349px) {
  .header-inner .brand span {
    display: none;
  }
}

.site-nav {
  display: none;
}

.label-short { display: inline; }
.label-full  { display: none; }

@media (min-width: 420px) {
  .brand { font-size: 1.125rem; }
  .brand img { width: 40px; height: 40px; }
}

@media (min-width: 560px) {
  .label-short { display: none; }
  .label-full  { display: inline; }
}

@media (min-width: 860px) {
  .site-nav {
    display: flex;
    gap: 32px;
  }

  .site-nav a {
    color: var(--ink-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }

  .site-nav a:hover {
    color: var(--emerald);
  }
}


/* -------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------- */
.hero {
  padding-block: clamp(40px, 7vw, 88px) var(--section-space);
}

.hero h1 {
  max-width: 15ch;
}

.hero .lead {
  margin-top: 20px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: 32px;
}

.hero-actions .text-link {
  align-self: flex-start;
}

.hero-note {
  max-width: 36rem;
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (min-width: 560px) {
  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
}

/* Email on one side, tracked order on the other */
.transform {
  display: grid;
  gap: 8px;
  margin-top: clamp(40px, 6vw, 72px);
}

.panel {
  min-width: 0;
  padding: clamp(16px, 3vw, 24px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.panel-before {
  border-style: dashed;
}

.panel-after {
  border: 2px solid var(--emerald);
}

.panel-label {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-after .panel-label {
  color: var(--emerald);
}

.email-meta {
  font-size: 0.875rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.email-meta span {
  display: inline-block;
  min-width: 4.5rem;
  color: var(--muted);
}

.email-body {
  margin-top: 12px;
  padding: 14px 16px;
  background: #F3F4F6;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
}

.order-fields {
  margin: 0;
}

.order-fields div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.order-fields div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.order-fields dt {
  color: var(--muted);
}

.order-fields dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.transform-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--emerald);
  font-size: 0.8125rem;
  font-weight: 700;
}

.tag {
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: grid;
}


/* On phones the arrow points down, on wider screens it points right */
.transform-arrow svg {
  transform: rotate(90deg);
}

@media (min-width: 760px) {
  .transform {
    grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .transform-arrow {
    flex-direction: column;
    gap: 6px;
  }

  .transform-arrow svg {
    transform: none;
  }
}

/* Status badges, used in the hero and the dashboard sample */
.status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-pending    { background: var(--pending-bg);    color: var(--pending-fg); }
.status-processing { background: var(--processing-bg); color: var(--processing-fg); }
.status-delivered  { background: var(--delivered-bg);  color: var(--delivered-fg); }
.status-cancelled  { background: var(--cancelled-bg);  color: var(--cancelled-fg); }


/* -------------------------------------------------------------
   7. Problem (real order sheets)
   ------------------------------------------------------------- */
.sheets {
  display: grid;
  gap: 28px;
}

.sheet {
  margin: 0;
  min-width: 0;
}

/* The screenshot scrolls sideways inside its own box on phones */
.sheet-scroll {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.sheet-scroll img {
  width: 100%;
  min-width: 720px;
}

.sheet figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.875rem;
}

.sheet figcaption a {
  margin-left: 6px;
  color: var(--emerald);
  font-weight: 600;
}

@media (min-width: 960px) {
  .sheets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .sheet-scroll img {
    min-width: 0;
  }
}

.issues {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--line);
}

.issues li {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.issues p {
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .issues li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
  }
}

.problem-close {
  margin-top: 28px;
  color: var(--navy);
  font: 800 clamp(1.25rem, 1rem + 1vw, 1.625rem)/1.3 var(--font-head);
  letter-spacing: -0.02em;
}


/* -------------------------------------------------------------
   8. How it works
   ------------------------------------------------------------- */
.how-grid {
  display: grid;
  gap: 32px;
}

.steps {
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.steps li:last-child {
  border-bottom: 1px solid var(--line);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  grid-row: 1 / span 2;
  color: var(--emerald);
  font: 800 2.25rem/1 var(--font-head);
}

.steps p {
  margin-top: 4px;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .how-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }

  .how-intro {
    position: sticky;
    top: calc(var(--header-height) + 32px);
    align-self: start;
  }

  .steps li {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}


/* -------------------------------------------------------------
   9. Dashboard sample and benefits
   ------------------------------------------------------------- */
.board {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.board-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n + 2) { border-bottom: 0; }

.stat-value {
  color: var(--navy);
  font: 800 1.75rem/1.1 var(--font-head);
}

.stat-label {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Phones: each table row becomes a small labelled block */
.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.board-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "id status"
    "customer state"
    "amount rep";
  gap: 10px 16px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
}

.board-table td {
  display: block;
  padding: 0;
  font-size: 0.9375rem;
}

.board-table td::before {
  content: attr(data-label);
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-table .c-status::before { content: none; }

.board-table .c-id       { grid-area: id; font-weight: 700; font-family: var(--font-head); }
.board-table .c-id::before { display: none; }
.board-table .c-status   { grid-area: status; justify-self: end; }
.board-table .c-customer { grid-area: customer; }
.board-table .c-state    { grid-area: state; }
.board-table .c-amount   { grid-area: amount; }
.board-table .c-rep      { grid-area: rep; }

@media (min-width: 720px) {
  .board-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat,
  .stat:nth-child(2n),
  .stat:nth-last-child(-n + 2) {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .stat:last-child { border-right: 0; }

  .board-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    background: #F9FAFB;
  }

  .board-table tr {
    display: table-row;
    padding: 0;
    border-top: 0;
  }

  .board-table th,
  .board-table td {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    text-align: left;
  }

  .board-table th {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .board-table td {
    display: table-cell;
  }

  .board-table td::before { display: none; }
  .board-table .c-status { justify-self: auto; }
}

.benefits {
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
}

.benefit {
  padding-top: 16px;
  border-top: 3px solid var(--emerald);
}

.benefit p {
  margin-top: 8px;
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

@media (min-width: 1040px) {
  .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* -------------------------------------------------------------
   10. ROI calculator
   ------------------------------------------------------------- */
.calc {
  padding-block: var(--section-space);
  background: var(--navy);
  color: var(--white);
}

.calc h2 {
  color: var(--white);
}

.calc .lead {
  color: #CBD5E1;
}

.calc-grid {
  display: grid;
  gap: 40px;
}

.calc-form {
  margin-top: 8px;
}

.field {
  margin-top: 28px;
}

.field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.field label {
  font-weight: 600;
}

.field output {
  color: var(--orange);
  font: 800 1.375rem/1 var(--font-head);
  font-variant-numeric: tabular-nums;
}

.hint {
  margin-top: 2px;
  color: #94A3B8;
  font-size: 0.875rem;
}

/* Range sliders: the filled part is set from script.js through --fill */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--orange) var(--fill, 0%), #334155 var(--fill, 0%));
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  background: var(--white);
  border: 3px solid var(--orange);
  border-radius: 50%;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #334155;
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--orange);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 3px solid var(--orange);
  border-radius: 50%;
}

.calc :focus-visible {
  outline-color: var(--orange);
}

.calc-result {
  padding: clamp(20px, 4vw, 36px);
  background: #162036;
  border: 1px solid #334155;
  border-radius: var(--radius-lg);
}

.result-intro {
  color: #CBD5E1;
}

.result-total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}

.result-total strong {
  color: var(--orange);
  font: 800 clamp(3.5rem, 2rem + 6vw, 5.5rem)/1 var(--font-head);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.result-total span {
  color: var(--white);
  font: 700 1.5rem/1 var(--font-head);
}

.result-days {
  margin-top: 12px;
  color: #E2E8F0;
  font-size: 1.0625rem;
}

.result-days strong {
  color: var(--white);
}

.result-split {
  margin: 28px 0;
  border-top: 1px solid #334155;
}

.result-split div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #334155;
}

.result-split dt {
  color: #CBD5E1;
}

.result-split dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.result-split small {
  display: block;
  color: #94A3B8;
  font-size: 0.8125rem;
  font-weight: 400;
}

.result-note {
  margin-top: 14px;
  color: #94A3B8;
  font-size: 0.8125rem;
  text-align: center;
}

/* Compact total that stays on screen while moving sliders on a phone */
.calc-live {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 12px var(--gutter);
  background: var(--navy);
  border-top: 1px solid #334155;
  font-size: 0.9375rem;
}

.calc-live strong {
  color: var(--orange);
  font: 800 1.25rem/1 var(--font-head);
}

@media (min-width: 960px) {
  .calc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }

  .calc-result {
    position: sticky;
    top: calc(var(--header-height) + 24px);
  }

  .calc-live {
    display: none;
  }
}

/* On a phone, the live bar replaces the need to scroll to the result */
@media (max-width: 959px) {
  .calc-live {
    order: 3;
  }

  .calc-result {
    order: 2;
  }
}


/* -------------------------------------------------------------
   11. Proof
   ------------------------------------------------------------- */
.proof {
  background: var(--emerald-tint);
}

.proof-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

.proof-number strong {
  display: block;
  color: var(--emerald);
  font: 800 clamp(4rem, 2.5rem + 9vw, 8rem)/1 var(--font-head);
  letter-spacing: -0.04em;
}

.proof-number span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-weight: 600;
}

.proof-copy p {
  margin-top: 14px;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

@media (min-width: 860px) {
  .proof-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
  }
}


/* -------------------------------------------------------------
   12. Pricing
   ------------------------------------------------------------- */
.plans {
  display: grid;
  gap: 0;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 0;
  border-top: 3px solid var(--emerald);
}

.plan p {
  color: var(--ink-soft);
}

.plan ul {
  flex: 1;
  margin-block: 8px 16px;
}

.plan li {
  position: relative;
  padding: 5px 0 5px 20px;
}

.plan li::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--emerald);
  border-radius: 50%;
}

@media (min-width: 860px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
  }
}


/* -------------------------------------------------------------
   13. FAQ
   ------------------------------------------------------------- */
.faq-grid {
  display: grid;
  gap: 32px;
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 18px 40px 18px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--emerald);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "\2212";
}

.faq-list details p {
  max-width: 38rem;
  padding-bottom: 20px;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .faq-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }

  .faq-intro {
    position: sticky;
    top: calc(var(--header-height) + 32px);
    align-self: start;
  }
}


/* -------------------------------------------------------------
   14. Book a demo
   ------------------------------------------------------------- */
.demo {
  padding-block: var(--section-space);
  background: var(--emerald-deep);
  color: var(--white);
}

.demo h2 {
  color: var(--white);
}

.demo .lead {
  color: #E2F0E7;
}

.demo-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}

.demo-steps {
  margin-top: 28px;
  counter-reset: demo;
}

.demo-steps li {
  position: relative;
  padding: 10px 0 10px 40px;
  counter-increment: demo;
}

.demo-steps li::before {
  content: counter(demo);
  position: absolute;
  top: 8px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--white);
  color: var(--emerald-deep);
  border-radius: 50%;
  font: 800 0.875rem/1 var(--font-head);
}

.demo-form {
  padding: clamp(20px, 4vw, 32px);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
}

.demo-form h3 {
  margin-bottom: 20px;
  font-size: 1.375rem;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-field label span {
  color: var(--muted);
  font-weight: 400;
}

.form-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  background: var(--white);
  border: 1.5px solid #9CA3AF;
  border-radius: var(--radius);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);   /* 16px stops iOS zooming into the field */
}

.form-field input:focus {
  border-color: var(--emerald);
  outline: 3px solid rgba(21, 128, 61, 0.25);
  outline-offset: 0;
}

.form-field input:user-invalid {
  border-color: #B91C1C;
}

.form-status {
  min-height: 1.5em;
  margin-top: 12px;
  color: var(--emerald-deep);
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-fallback {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.form-fallback a {
  color: var(--emerald);
  font-weight: 600;
}

.form-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  background: var(--white);
  border: 1.5px solid #9CA3AF;
  border-radius: var(--radius);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
}

.form-field select:focus {
  border-color: var(--emerald);
  outline: 3px solid rgba(21, 128, 61, 0.25);
  outline-offset: 0;
}

.plan-price {
  color: var(--navy);
  font: 800 clamp(2rem, 1.5rem + 2vw, 2.75rem)/1 var(--font-head);
  letter-spacing: -0.03em;
}

.plan-price small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 500 0.875rem/1.4 var(--font-body);
  letter-spacing: 0;
}

@media (min-width: 900px) {
  .demo-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 72px;
  }
}


/* -------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(40px, 6vw, 72px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}

.footer-brand {
  grid-column: 1 / -1;
}

.footer-brand p {
  max-width: 22rem;
  margin-top: 14px;
  color: var(--ink-soft);
}

.site-footer h4 {
  margin-bottom: 14px;
  color: var(--navy);
}

.site-footer li {
  margin-bottom: 4px;
}

.site-footer li a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.site-footer li a:hover {
  color: var(--emerald);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 40px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

@media (min-width: 860px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1.4fr 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}


/* -------------------------------------------------------------
   16. Sticky call to action (phones only)
   ------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 250ms ease;
}

.sticky-cta.is-visible {
  transform: none;
}

@media (min-width: 760px) {
  .sticky-cta {
    display: none;
  }
}


/* -------------------------------------------------------------
   17. Scroll animation
   Blocks with .reveal rise and fade in as they enter the screen.
   Uses CSS scroll-driven animation where the browser supports it,
   and simply shows the content where it does not.
   ------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.001ms !important;
  }
}