/* Quietly Smart - "Refined clay, cinematic calm" (Direction B), site-wide.
   Cream base, Montserrat, pill purple buttons, soft clay accents, calmer type.
   Dark purple sections used sparingly (demo, pricing/tiers). No mascot, no faces.
   Grown from redesign/b-refined/styles.css and generalised for the whole site. */

:root {
  --cream: #FFF8ED;
  --cream-2: #F4E3C9;
  --white: #FFFFFF;
  --ink: #241932;
  --ink-70: rgba(36, 25, 50, 0.70);
  --ink-55: rgba(36, 25, 50, 0.55);
  --ink-40: rgba(36, 25, 50, 0.40);
  --hairline: rgba(36, 25, 50, 0.10);
  --purple: #46438A;
  --purple-deep: #27143D;
  --teal: #5CC2B7;
  --teal-deep: #3E8C82;
  --amber: #D69A3C;
  --green: #4EA37A;
  --error: #B3402F;

  --sans: "Montserrat", system-ui, -apple-system, sans-serif;
  --shadow: 0 8px 24px rgba(36, 25, 50, 0.08);
  --shadow-sm: 0 4px 14px rgba(36, 25, 50, 0.07);

  --wrap: 1140px;
  --gutter: 32px;
  --pad-y: 39px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchor targets clear the sticky header (native smooth scroll, no JS scrollTo). */
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3 { color: var(--ink); margin: 0; }
h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 34ch;
  margin: 0 0 32px;
}
p { margin: 0 0 16px; }

.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 18px;
}

/* ---------- Sections ---------- */
.section { padding: var(--pad-y) 0; }
.section--tight { padding: 40px 0; }

/* Flash-safe pre-hide: only when JS is on AND motion is allowed (html.anim).
   No JS or reduced-motion never sees these rules, so the page is fully visible. */
html.anim [data-hero],
html.anim [data-anim],
html.anim .brief-row,
html.anim .brief-foot { opacity: 0; will-change: opacity, transform; }

/* ---------- Buttons (pill, purple) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(70, 67, 138, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { background: #3a3775; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(70, 67, 138, 0.32); }
.btn--sm { padding: 11px 20px; font-size: 0.86rem; box-shadow: 0 4px 12px rgba(70, 67, 138, 0.24); }

.tlink {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 2px solid rgba(62, 140, 130, 0.30);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.tlink:hover { border-color: var(--teal-deep); }
.tlink::after { content: " \2192"; }
.tlink--plain::after { content: ""; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 237, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a.navlink { font-size: 0.9rem; font-weight: 600; color: var(--ink-70); text-decoration: none; transition: color 0.15s ease; }
.nav a.navlink:hover { color: var(--purple); }
.nav a.navlink[aria-current="page"] { color: var(--purple); }

/* Mobile nav toggle (hidden on desktop; drives [data-nav] dropdown) */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 20px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 4px; }

/* The clay still-life sits above the software panel, both clear of each other */
.hero-panel { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-still {
  width: 74%;
  max-width: 330px;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(36, 25, 50, 0.14));
}
.hero-panel .brief { width: 100%; }
.hero-solo { max-width: 380px; margin: 0 auto; }

/* ---------- Morning-brief panel ---------- */
.brief {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(36, 25, 50, 0.12);
  overflow: hidden;
  border: 1px solid rgba(36, 25, 50, 0.06);
}
.brief-bar { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: var(--cream); border-bottom: 1px solid var(--hairline); }
.brief-dots { display: flex; gap: 7px; }
.brief-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(36, 25, 50, 0.18); display: block; }
.brief-title { font-size: 0.82rem; font-weight: 700; color: var(--ink-70); }
.brief-rows { padding: 6px 0; }
.brief-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.brief-row:last-child { border-bottom: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--amber { background: var(--amber); }
.dot--green { background: var(--green); }
.dot--purple { background: #7B5BB0; }
.dot--grey { background: #A79FB0; }
.brief-text { font-size: 0.9rem; color: var(--ink); line-height: 1.35; }
.chip {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; background: var(--teal-deep);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.brief-foot { padding: 14px 20px; background: var(--cream); border-top: 1px solid var(--hairline); font-size: 0.76rem; color: var(--ink-40); }

/* ---------- Client logos (drifting marquee) ---------- */
.logos { padding: 10px 0 0; }
.logos-cap { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 18px; }
.logos-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-track { display: flex; align-items: center; gap: 56px; width: max-content; }
.logos-track img { height: 32px; width: auto; flex: none; filter: brightness(0) opacity(0.5); }
.logos-track img[src*="greenvan"] { height: 19.2px; } /* greenvan.png has a tight bounding box (8.2:1) vs the others (1:1-4.3:1), so equal CSS height rendered it far wider than the rest - scaled to 60% per Matt */

/* ---------- Textured backgrounds (site silk-wave art) ---------- */
.bg-light {
  background-image:
    linear-gradient(180deg, rgba(255, 248, 237, 0.58), rgba(255, 248, 237, 0.74)),
    url("/assets/img/background-light.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bg-soft {
  background-image:
    linear-gradient(180deg, rgba(255, 248, 237, 0.52), rgba(244, 227, 201, 0.70)),
    url("/assets/img/background-soft.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* ---------- Dark sections ---------- */
.section--dark {
  background-image:
    linear-gradient(180deg, rgba(39, 20, 61, 0.82), rgba(39, 20, 61, 0.90)),
    url("/assets/img/background-dark.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--cream);
}
.section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .eyebrow { color: #7FD4C8; }
.section--dark p { color: rgba(255, 248, 237, 0.82); }
.demo-head { max-width: 60ch; }
.section--dark .demo-body { color: rgba(255, 248, 237, 0.78); max-width: 56ch; }
.video-frame {
  max-width: 680px; margin: 28px auto 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 248, 237, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  background: #1c0e2c;
}
.video-frame video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background: #1c0e2c; }
.demo-chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 22px auto 0; max-width: 680px; }
.demo-chips span { font-size: 0.8rem; font-weight: 600; color: rgba(255, 248, 237, 0.82); border: 1px solid rgba(255, 248, 237, 0.22); border-radius: 999px; padding: 7px 15px; }

/* ---------- How it works ---------- */
.how-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.how-head .clay-flow { width: 220px; flex: none; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.step-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 24px; }
.step-badge {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--teal); color: var(--purple-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; margin-bottom: 16px;
}
.step-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; color: var(--ink-70); margin: 0; }

/* Ownership statement - full-width banner, visually distinct, once */
.ownership {
  background: var(--cream-2);
  border-radius: 18px;
  padding: 26px 40px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  margin-top: 6px;
}
.ownership strong { color: var(--teal-deep); }

/* ---------- Plate list (icons + copy) ---------- */
.plate-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 48px; margin: 40px 0 0; }
.plate-item { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; }
.plate-item img { width: 68px; height: 68px; object-fit: contain; }
.plate-item dt { font-weight: 800; font-size: 1.16rem; margin-bottom: 5px; }
.plate-item dd { margin: 0; color: var(--ink-70); font-size: 1.02rem; line-height: 1.45; }
.plate-foot { margin-top: 34px; font-size: 0.92rem; color: var(--ink-55); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* ---------- Proof cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 30px 28px; display: flex; flex-direction: column; }
.card-org { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px; }
.card-claim { font-size: 1.34rem; font-weight: 800; line-height: 1.24; letter-spacing: -0.01em; margin-bottom: 12px; }
.card-small { font-size: 0.78rem; color: var(--ink-40); margin-bottom: 14px; }
.card-quote { font-size: 0.94rem; color: var(--ink-70); line-height: 1.5; margin: 0; }
.card-quote cite { display: block; font-style: normal; color: var(--ink-40); margin-top: 8px; font-size: 0.84rem; font-weight: 600; }
.card-photo { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; }
.card-photo img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 2px 8px rgba(36, 25, 50, 0.12); }
.card-name { display: flex; flex-direction: column; font-weight: 700; font-size: 0.94rem; color: var(--ink); line-height: 1.3; }
.card-name em { font-style: normal; font-weight: 500; font-size: 0.8rem; color: var(--ink-40); margin-top: 2px; }
.card--solo { max-width: 560px; margin: 34px auto 0; }

/* ---------- Pricing (dark section, light cards) ---------- */
.price-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: stretch; }
.price-grid--3 { grid-template-columns: repeat(3, 1fr); }
.price-card { background: var(--white); border-radius: 20px; box-shadow: 0 18px 44px rgba(0,0,0,0.28); padding: 32px 30px; display: flex; flex-direction: column; color: var(--ink); }
.price-card--hero { position: relative; border: 2px solid var(--purple); overflow: hidden; }
.price-card--hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--purple); }
/* Corner ribbon: needs a fixed width + centred text, otherwise the shrink-to-fit box
   rotates past the card's overflow:hidden edge and the label gets sliced mid-word. */
.price-ribbon { position: absolute; top: 30px; right: -50px; width: 190px; transform: rotate(45deg); background: var(--purple); color: #fff; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 5px 0; }
.price-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.price-clay { width: 66px; height: 66px; object-fit: contain; flex: none; }
.price-name { font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--ink); }
.price-tag { font-size: 0.92rem; font-weight: 700; color: var(--teal-deep); margin-bottom: 16px; }
.price-amount { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; }
.price-unit { font-size: 0.82rem; font-weight: 700; color: var(--teal-deep); margin-bottom: 16px; }
.price-desc { font-size: 0.95rem; color: var(--ink-70); margin-bottom: 22px; }
.price-list { list-style: none; margin: 0 0 22px; padding: 0; }
.price-list li { position: relative; padding: 0 0 8px 24px; font-size: 0.9rem; color: var(--ink-70); }
.price-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--teal-deep); font-weight: 800; }
.price-card .tlink, .price-card > .btn { margin-top: auto; align-self: flex-start; }
.price-card--hero > .btn { align-self: stretch; }
.price-note { text-align: center; font-size: 0.9rem; margin: 28px 0; color: rgba(255,248,237,0.72); }
.price-cta { text-align: center; }
.price-line { text-align: center; font-size: 1.02rem; font-weight: 700; color: var(--cream); margin: 8px auto 4px; max-width: 60ch; }

/* ---------- About Matt ---------- */
.about-grid { display: grid; grid-template-columns: 204px 1fr; gap: 48px; align-items: center; }
.matt-photo { width: 204px; height: 204px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow); background: var(--purple-deep); }
.matt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.about-body { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--ink); max-width: 46ch; }

/* ---------- Simple content blocks (offer pages) ---------- */
.lede-line { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--ink-70); max-width: 62ch; margin: 0 0 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.tile { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 24px 24px; }
.tile img { width: 46px; height: 46px; object-fit: contain; display: block; margin-bottom: 14px; }
.tile h3 { font-size: 1.06rem; font-weight: 800; margin-bottom: 8px; }
.tile p { font-size: 0.92rem; color: var(--ink-70); margin: 0; }
.tile-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--teal); color: var(--purple-deep); font-weight: 800; margin-bottom: 14px; }

/* Menu of twelve (CoS canonical automation list) */
.menu12 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px; margin-top: 34px; }
.menu12-item { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; }
.menu12-item.no-icon { grid-template-columns: 1fr; }
.menu12-item img { width: 48px; height: 48px; object-fit: contain; }
.menu12-item h3 { font-size: 1rem; font-weight: 800; margin-bottom: 3px; }
.menu12-item p { font-size: 0.88rem; color: var(--ink-70); margin: 0; }
.menu12-item.no-icon h3::before { content: "\2022"; color: var(--teal-deep); font-weight: 800; margin-right: 8px; }

/* Foundation strip (5 short items) */
.foundation { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 34px; }
.foundation div { background: var(--white); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 20px 18px; }
.foundation h3 { font-size: 0.98rem; font-weight: 800; margin-bottom: 6px; }
.foundation p { font-size: 0.85rem; color: var(--ink-70); margin: 0; line-height: 1.45; }

/* Who it's for / not for (two column honest list) */
.forwho { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 34px; }
.forwho-col { background: var(--white); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 28px 30px; }
.forwho-col h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 16px; }
.forwho-col ul { list-style: none; margin: 0; padding: 0; }
.forwho-col li { position: relative; padding: 0 0 12px 28px; font-size: 0.95rem; color: var(--ink-70); line-height: 1.45; }
.forwho-col.yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-deep); font-weight: 800; }
.forwho-col.no li::before { content: "\2013"; position: absolute; left: 2px; color: var(--ink-40); font-weight: 800; }

/* Timeline strip (audit 7 days, dark section) */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.timeline .step-card { background: rgba(255,248,237,0.06); border: 1px solid rgba(255,248,237,0.14); box-shadow: none; }
.timeline .step-card h3 { color: var(--cream); }
.timeline .step-card p { color: rgba(255,248,237,0.78); }
.timeline .step-badge { background: var(--teal); color: var(--purple-deep); font-size: 0.82rem; width: auto; padding: 0 12px; height: 30px; border-radius: 999px; }

/* Safety list (CoS boundaries) */
.safety-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.safety-list .tile h3 { display: flex; align-items: center; gap: 10px; }
.safety-list .tile h3::before { content: "\2713"; color: var(--teal-deep); font-weight: 800; }

/* ---------- FAQ accordion (shared) ---------- */
.faq { max-width: 780px; margin: 36px auto 0; display: grid; gap: 14px; }
.faq details { background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 1.02rem; cursor: pointer; list-style: none; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: var(--purple-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-70); font-size: 0.95rem; line-height: 1.6; }

/* ---------- Contact form (compact) ---------- */
.contact-form { background: var(--white); border-radius: 20px; box-shadow: var(--shadow); padding: 30px 30px; max-width: 480px; margin: 0 auto; text-align: left; }
.contact-form h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.form-intro { font-size: 0.9rem; color: var(--ink-70); margin-bottom: 18px; }
.form-status { font-size: 0.85rem; margin: 0 0 12px; color: var(--teal-deep); }
.form-status:empty { margin: 0; }
.form-status.is-error { color: var(--error); }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ink-70); margin-bottom: 6px; }
.form-field label span { font-weight: 500; color: var(--ink-40); }
.form-field input, .form-field textarea { width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink); background: var(--cream); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(70, 67, 138, 0.12); }
.form-field textarea { resize: vertical; min-height: 96px; }
.contact-form .btn { width: 100%; margin-top: 4px; }
.form-note { font-size: 0.78rem; color: var(--ink-40); margin: 14px 0 0; line-height: 1.5; }
.form-note a { color: var(--teal-deep); text-decoration: none; font-weight: 600; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact modal ---------- */
.contact-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(36, 25, 50, 0.55); backdrop-filter: blur(3px); }
.contact-modal[hidden] { display: none; }
.contact-modal-panel { position: relative; background: var(--white); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); padding: 40px 36px; max-width: 420px; text-align: center; }
.contact-modal-panel h2 { font-size: 1.4rem; margin-bottom: 10px; }
.contact-modal-panel p { color: var(--ink-70); margin: 0; }
.contact-modal.is-error .contact-modal-panel h2 { color: var(--error); }
.contact-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.2rem; color: var(--ink-40); cursor: pointer; line-height: 1; }

/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final .clay-inbox-reveal { width: 120px; margin: 0 auto 14px; }
.final .clay-inbox-reveal--chief { width: 240px; }
.final .clay-inbox { width: 100%; }
.final .final-audit-art { width: 240px; margin: 0 auto 14px; }
.final .final-audit-art img { width: 100%; }
.final .cta-body { max-width: 46ch; margin: 0 auto 28px; color: var(--ink-70); font-size: 1.05rem; }
.final-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.final .contact-form { margin-top: 30px; }

/* ---------- Breadcrumbs (answers) ---------- */
.breadcrumbs { font-size: 0.8rem; color: var(--ink-40); margin-bottom: 20px; }
.breadcrumbs a { color: var(--teal-deep); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { margin: 0 8px; color: var(--ink-40); }

/* ---------- Article shell (answers) ---------- */
.article { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
/* These two classes sit on the SAME element as .article, so a `padding`
   shorthand here wipes the horizontal gutter above and puts the breadcrumb,
   the h1 and the body copy hard against the viewport edge on mobile. Keep the
   gutter explicit in both. */
.article-hero { padding: 34px var(--gutter) 6px; }
.article h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 24px; }
.answer-first { background: var(--cream-2); border-radius: 16px; padding: 24px 28px; margin: 0 0 12px; font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.answer-first strong { color: var(--teal-deep); }
.article-body { padding: 24px var(--gutter) 0; }
.article-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 42px 0 14px; padding-left: 18px; position: relative; }
.article-body h2::before { content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.12em; width: 5px; border-radius: 3px; background: var(--teal); }
.article-body h3 { font-size: 1.12rem; font-weight: 800; margin: 26px 0 10px; }
.article-body p, .article-body li { color: var(--ink-70); font-size: 1.02rem; line-height: 1.65; }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 18px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--teal-deep); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(62,140,130,0.3); }
.small-print { font-size: 0.82rem; color: var(--ink-40); line-height: 1.5; }

/* Article comparison tables */
.answer-table-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
.article-body table, .answer-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article-body th, .article-body td, .answer-table th, .answer-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.article-body th, .answer-table th { font-weight: 800; color: var(--ink); background: var(--cream-2); }
.article-body td, .answer-table td { color: var(--ink-70); }

/* Related questions card list */
.related { max-width: 720px; margin: 46px auto 0; padding: 0 var(--gutter); }
.related h2 { font-size: 1.3rem; margin-bottom: 16px; }
.related-list { display: grid; gap: 12px; }
.related-list a { display: block; background: var(--white); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 20px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.96rem; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease; }
.related-list a:hover { border-color: var(--purple); }
.related-list a::after { content: " \2192"; color: var(--teal-deep); }

/* Soft CTA band (articles + answers hub) */
.cta-band { background: var(--cream-2); border-radius: 20px; padding: 36px 40px; text-align: center; }
.cta-band h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.cta-band p { color: var(--ink-70); max-width: 52ch; margin: 0 auto 22px; }

/* Answers hub cards */
.answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.answers-grid a { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; padding: 24px 26px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, transform 0.15s ease; }
.answers-grid a:hover { border-color: var(--purple); transform: translateY(-2px); }
.answers-grid .q { font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.answers-grid a p { margin: 0; font-size: 0.9rem; color: var(--ink-70); line-height: 1.45; }
.answers-grid .rt { font-size: 0.78rem; color: var(--ink-40); font-weight: 600; margin-top: auto; }
.answers-hero-art { width: 150px; margin: 0 0 10px; }

/* Privacy / legal content */
.legal { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.legal h2 { font-size: 1.4rem; margin: 34px 0 12px; }
.legal h3 { font-size: 1.1rem; font-weight: 800; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--ink-70); font-size: 0.98rem; line-height: 1.6; }
.legal a { color: var(--teal-deep); font-weight: 600; }

/* Newsletter shell */
.nl-wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.nl-card { background: var(--white); border-radius: 20px; box-shadow: var(--shadow); padding: 34px 34px; margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 44px 0; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-tag { font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.footer-links a { font-size: 0.86rem; color: var(--ink-55); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--purple); }
.footer-brand img { height: 26px; }
.footer-legal { width: 100%; margin: 18px 0 0; font-size: 0.78rem; color: var(--ink-40); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --pad-y: 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero { padding: 40px 0 20px; }
  .how-head { flex-direction: column; align-items: flex-start; }
  .how-head .clay-flow { width: 200px; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .cards-3 { grid-template-columns: 1fr; }
  .plate-list { grid-template-columns: 1fr; }
  .price-grid, .price-grid--3 { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 26px; justify-items: start; }
  .grid-2, .grid-4, .menu12, .forwho, .safety-list { grid-template-columns: 1fr; }
  .foundation { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .answers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 248, 237, 0.98); backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 0; display: flex;
  }
  /* Only collapse the nav once JS has confirmed it can reopen it. Without the
     html.js gate a blocked or failed script left the site with no navigation
     at all below 720px, since nothing else can add .is-open. */
  html.js .nav { display: none; }
  html.js .nav.is-open, .nav.is-open { display: flex; }
  /* The toggle is useless without JS, so it only appears alongside the collapse. */
  .nav-toggle { display: none; }
  html.js .nav-toggle { display: flex; }
  .nav a.navlink { padding: 14px var(--gutter); }
  .nav .btn--sm { margin: 10px var(--gutter); }
}
@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .brand img { height: 24px; }
  .site-header .wrap { height: 60px; }
  .btn--sm { padding: 10px 15px; font-size: 0.82rem; }
  .hero .btn { width: 100%; }
  .grid-4, .foundation, .timeline { grid-template-columns: 1fr; }
  .ownership { padding: 22px 24px; }
  .cta-band, .contact-form { padding: 26px 22px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   READABILITY PASS - 2026-07-21
   Body copy across the site sat between 0.85 and 0.95rem, which is too small
   to read comfortably. This block lifts the minimum text size site-wide and
   enlarges the components that were cramped. Kept as one appended block so it
   is easy to review, tune, or revert in a single place.
   ========================================================================== */

/* Body copy minimums */
.article-body p, .article-body li { font-size: 1.09rem; }
.lede-line { font-size: clamp(1.1rem, 1.4vw, 1.2rem); }
.faq summary { font-size: 1.1rem; }
.faq details p { font-size: 1.04rem; }
.plate-item dd { font-size: 1.09rem; }
.nav a.navlink { font-size: 0.95rem; }

/* Cards and tiles */
.tile h3 { font-size: 1.15rem; }
.tile p { font-size: 1.0rem; line-height: 1.55; }
.step-card h3 { font-size: 1.18rem; }
.step-card p { font-size: 1.02rem; line-height: 1.55; }
.forwho-col h3 { font-size: 1.22rem; }
.forwho-col li { font-size: 1.06rem; line-height: 1.5; padding-bottom: 14px; }
.menu12-item h3 { font-size: 1.1rem; }
.menu12-item p { font-size: 0.98rem; line-height: 1.5; }
.foundation h3 { font-size: 1.08rem; }
.foundation p { font-size: 0.96rem; }
.answers-grid .q { font-size: 1.15rem; }
.answers-grid a p { font-size: 0.98rem; line-height: 1.5; }
.card-quote { font-size: 1.04rem; }
.card-name { font-size: 1.0rem; }
.price-list li { font-size: 1.0rem; }
.price-desc { font-size: 1.03rem; }
.price-note { font-size: 0.96rem; }
.brief-text { font-size: 0.96rem; }
.demo-chips span { font-size: 0.88rem; }

/* "What you get" tiles: bigger icon, sitting to the LEFT of the text.
   :has() lets the icon-bearing tiles restyle without touching the icon-less
   safety tiles on the Chief of Staff page. */
.tile:has(img) { display: grid; grid-template-columns: 76px 1fr; column-gap: 20px; align-items: start; }
.tile:has(img) > img { grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 72px; margin: 0; }
.tile:has(img) > h3 { grid-column: 2; grid-row: 1; }
.tile:has(img) > p  { grid-column: 2; grid-row: 2; }

/* "How the week works": 4 narrow columns were too cramped to read. Two wider
   panels with more padding. */
.timeline { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.timeline .step-card { padding: 26px 28px; }

/* Menu of 12: slightly larger icons */
.menu12-item { grid-template-columns: 62px 1fr; }
.menu12-item img { width: 54px; height: 54px; }

/* Demo video: larger stage */
.video-frame { max-width: 960px; }

/* Responsive re-assertions (this block sits after the media queries above, so
   the mobile collapses have to be restated or they lose the cascade). */
@media (max-width: 980px) {
  .timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .timeline, .menu12, .forwho, .grid-2 { grid-template-columns: 1fr; }
  .tile:has(img) { grid-template-columns: 62px 1fr; column-gap: 16px; }
  .tile:has(img) > img { width: 58px; height: 58px; }
  .menu12-item { grid-template-columns: 54px 1fr; }
}

/* ==========================================================================
   DESIGN PASS - 2026-07-21 (session 3, Matt's review)
   Appended after the readability block so these win the cascade. Each change
   answers a specific note from the review.
   ========================================================================== */

/* --- Testimonial portraits: 1.5x. 62px read as thumbnails beside the quote. --- */
.card-photo img { width: 93px; height: 93px; }
.card-photo { gap: 18px; padding-top: 22px; }
.card-name { font-size: 1.04rem; }
.card-name em { font-size: 0.86rem; margin-top: 4px; }

/* --- "What you get" tiles: icon 30% larger, and centred on the card's
   vertical axis instead of pinned to the top of the text column. --- */
.tile:has(img) { grid-template-columns: 94px 1fr; column-gap: 24px; align-items: center; }
.tile:has(img) > img { width: 94px; height: 94px; align-self: center; }
.tile:has(img) > h3 { align-self: end; }
.tile:has(img) > p { align-self: start; }

/* --- "How the week works": four cards in a row so Day 1 to Day 7 reads left
   to right. Narrower columns, so the cards run taller and the strip gets a
   little more width than the standard wrap. --- */
.timeline {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.timeline .step-card { padding: 24px 22px; }
.timeline .step-card p { font-size: 0.98rem; line-height: 1.52; }
/* The badge is a flex box, so it stretched to the full card width and read as
   a banner rather than a label. Shrink it to its text. */
.timeline .step-badge { margin-bottom: 14px; width: fit-content; }

/* --- Hero clay stills, sized per page. The homepage still keeps the base
   74%/330px; these two were called out as too small. --- */
/* The audit map bleeds past its grid column to reach 1.5x. Taking the width
   out of the headline column instead pushed the h1 from six lines to seven,
   so the column split stays as it was and the art overhangs. There is ~150px
   of page margin either side at desktop, so this cannot cause a scrollbar. */
.hero-still--xl { width: 111%; max-width: 660px; }   /* audit map, 1.5x */
.hero-still--lg { width: 100%; max-width: 468px; }   /* answers hub, 1.3x */

.hero-grid--art { grid-template-columns: 0.85fr 1.15fr; }

/* --- Pricing: the homepage block read as empty and undersized. The price is
   now the anchor, each card says what you actually get, and the type steps up
   to match the rest of the section. --- */
.price-amount { font-size: clamp(2rem, 2.6vw, 2.5rem); line-height: 1.05; margin-bottom: 4px; }
.price-unit { font-size: 0.92rem; margin-bottom: 22px; }
.price-list li { font-size: 1.05rem; line-height: 1.5; padding: 0 0 12px 30px; }
.price-list li::before { font-size: 1.05rem; top: 1px; }
.price-list li:last-child { padding-bottom: 0; }
.price-list { margin-bottom: 28px; }
.price-name { font-size: 1.5rem; }
.price-kicker { font-size: 0.95rem; color: var(--ink-70); font-weight: 600; margin-top: 5px; line-height: 1.35; }
.price-head { align-items: center; gap: 18px; margin-bottom: 24px; }
.price-clay { width: 76px; height: 76px; }

/* Two-card layout: equal columns compare better than the old 1fr/1.2fr, and
   the extra padding stops the cards floating in the dark section. */
.price-grid--duo { grid-template-columns: 1fr 1fr; gap: 28px; }
.price-grid--duo .price-card { padding: 40px 38px 36px; border-radius: 24px; }
.price-grid--duo .price-card--hero { box-shadow: 0 22px 56px rgba(0,0,0,0.34); }
.price-grid--duo .tlink { font-size: 1rem; }

/* Section rhythm: the lede fills the gap between the headline and the cards. */
.section--dark .lede-line { max-width: 56ch; }
.price-note { margin: 34px 0 26px; }

/* --- Responsive re-assertions (this block sits after every media query above,
   so each mobile collapse has to be restated or it loses the cascade). --- */
@media (max-width: 1040px) {
  .timeline { grid-template-columns: 1fr 1fr; max-width: none; }
}
@media (max-width: 900px) {
  .hero-grid--art { grid-template-columns: 1fr; gap: 38px; }
  /* width must be reset too: once the hero stacks there is no side margin left
     to absorb the desktop bleed, so 111% pushed the page 18px wide at 390. */
  .hero-still--xl, .hero-still--lg { width: 100%; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .price-grid--duo { grid-template-columns: 1fr; gap: 22px; }
  .price-grid--duo .price-card { padding: 32px 28px 30px; }
}
@media (max-width: 720px) {
  .timeline { grid-template-columns: 1fr; }
  .tile:has(img) { grid-template-columns: 74px 1fr; column-gap: 18px; }
  .tile:has(img) > img { width: 74px; height: 74px; }
  .card-photo img { width: 80px; height: 80px; }
  .price-clay { width: 64px; height: 64px; }
  .final .clay-inbox-reveal--chief { width: 150px; }
  .final .final-audit-art { width: 150px; }
  .price-name { font-size: 1.3rem; }
}

/* ==========================================================================
   REVIEW PASS 2 - 2026-07-21
   ========================================================================== */

/* The flagship card's top bar was --purple (#46438A) sitting on the dark
   purple section: near-invisible. Teal is the accent that reads there. */
.price-card--hero { border-color: var(--teal); }
.price-card--hero::before { background: var(--teal); }

/* A little more room under the CTA link now the cards carry a full list. */
.price-grid--duo .price-card { padding-bottom: 42px; }

/* Morning brief: the status chip now carries its row's own colour instead of
   every row being teal. Dot and chip share one value per row, at a shade that
   keeps white chip text readable (all >= 4.3:1, better than the 3.98:1 the
   single teal chip had). */
.dot--amber,  .chip--amber  { background: #A06A18; }
.dot--green,  .chip--green  { background: #3D8763; }
.dot--purple, .chip--purple { background: #63478F; }
.dot--grey,   .chip--grey   { background: #7A7186; }

/* "You stay in control": one large clay shield holding the left, with the four
   boundary tiles stacked beside it and reading as a single guarded block. */
/* The shield is square, so the column width is what caps its height. Sized so
   the drawn shield lands level with the top and bottom of the tile block. */
.safety-grid { display: grid; grid-template-columns: 358px 1fr; gap: 40px; align-items: stretch; margin-top: 32px; }
/* The art cell stretches to the tile block, and object-fit lets the shield fill
   that height without ever overflowing the column. */
.safety-art { display: flex; align-items: center; justify-content: center; min-height: 0; }
.safety-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(36, 25, 50, 0.16));
}
.safety-grid .safety-list { grid-template-columns: 1fr 1fr; margin-top: 0; }

/* Below 980 the tiles collapse to one column and the stack gets tall, so a
   side-by-side shield ends up a fraction of its height and reads as an
   afterthought. Put it above the tiles instead, centred. */
@media (max-width: 980px) {
  .safety-grid { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  .safety-art img { width: auto; max-width: 260px; max-height: 260px; }
  .safety-grid .safety-list { grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (max-width: 760px) {
  .safety-art img { max-width: 210px; max-height: 210px; }
  .safety-grid .safety-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REVIEW PASS 3 - 2026-07-21
   ========================================================================== */

/* Newsletter split. Was an inline grid-template-columns on .grid-2, which beat
   the mobile breakpoint and left the page 521px wide in a 390px viewport with
   the signup form's right edge off-screen at 488px. */
.nl-split { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 40px; }
@media (max-width: 900px) {
  .nl-split { grid-template-columns: 1fr; gap: 28px; }
}

/* "How it works": the step title now sits on the same line as its number
   instead of below it, and steps up in size to carry the row. */
/* align-content:start matters here. The cards stretch to equal height, and
   without it the spare space is shared between the rows, so the card with the
   shortest paragraph pushes its number and title down out of line with the
   other two. */
.steps .step-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; align-content: start; }
.steps .step-badge { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.steps .step-card h3 { grid-column: 2; grid-row: 1; font-size: 1.68rem; line-height: 1.1; margin: 0; }
.steps .step-card p { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; }

/* Foundation cards carry an icon above the title, centred. */
.foundation div { text-align: center; padding: 26px 18px 22px; }
.foundation img { width: 74px; height: 74px; object-fit: contain; margin: 0 auto 14px; }
.foundation p { text-align: center; }

/* The pricing choose-your-automations line sits between the tier strapline and
   the small print, so it reads as a term rather than a footnote. */
.price-line--soft { font-weight: 500; color: rgba(255, 248, 237, 0.86); font-size: 0.98rem; max-width: 62ch; margin-top: 14px; }

@media (max-width: 720px) {
  .steps .step-card h3 { font-size: 1.42rem; }
  .foundation img { width: 58px; height: 58px; }
}