/* Grained marketing site — shared styles.
   Colours mirror design/grained.tokens.json; display face is Fraunces, body Inter.
   The logo wordmark stays Georgia (outlined in the SVG art) — see CLAUDE.md. */

:root {
  --grove: #1e4b2c;
  --grove-deep: #16371f;
  --gold: #c29a45;
  --gold-soft: #d9b45c;
  --gold-deep: #8a6d1d;
  --leaf: #2e6b3e;
  --leaf-light: #a8cd9c;
  --leaf-bright: #3e8a50;
  --cream: #f8f5ec;
  --cream-deep: #f1ebdc;
  --ink: #22301f;
  --muted: #4a5544;
  --hairline: #e8e1cf;
  --shadow: 0 18px 44px rgba(30, 75, 44, 0.09);
  --radius: 20px;
  --max: 1140px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.14;
  color: var(--grove);
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}

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

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 245, 236, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.site-header.scrolled {
  border-bottom-color: var(--hairline);
}
.site-header .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.brand .name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.45rem;
  color: var(--grove);
  letter-spacing: 0.03em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav a {
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--grove);
  opacity: 0.82;
  transition: opacity 0.2s;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  opacity: 1;
}
/* .site-nav a is more specific than .btn-primary, so restate the button colours here
   or the CTA label renders grove-on-grove (invisible). */
.site-nav a.btn {
  opacity: 1;
}
.site-nav a.btn-primary {
  color: var(--cream);
}
.site-nav a.btn-gold {
  color: #fff;
}
/* display:contents keeps the links as direct participants in the .site-nav flex row on desktop,
   so the layout is unchanged — but gives us one element to turn into a panel on mobile. */
.nav-links {
  display: contents;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  background: none;
  border: 1.5px solid rgba(30, 75, 44, 0.22);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--grove);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ⚠️ Keep this breakpoint in step with `assets/nav.js` — it closes the drawer on resize using the
   same number, and if the two disagree the links reappear with the drawer still marked open.
   Raised 760 → 900 on 24 Sep 2026: with six links the bar wrapped to two lines at 860px and the
   header jumped 76px → 100px, which reads as broken. It already wrapped below 780 with five, so
   this fixes that too — collapse to the hamburger before the bar can wrap, not after. */
@media (max-width: 900px) {
  .site-header .inner {
    position: relative;
  }
  .nav-toggle {
    display: flex;
  }
  /* Keep the CTA on one line — wrapped, it doubles the header height and reads as broken. */
  .site-nav .btn {
    white-space: nowrap;
    padding: 10px 15px;
    font-size: 0.82rem;
  }
  .site-nav {
    gap: 10px;
  }
  /* Only collapse when JS can reopen it: without the toggle working, hidden links would be a
     dead end — the bug this replaces. Unstyled, they simply stay in the bar. */
  html.js .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 22px 14px;
    background: var(--cream);
    border-bottom: 1px solid rgba(30, 75, 44, 0.12);
    box-shadow: 0 14px 26px rgba(20, 40, 25, 0.1);
  }
  html.js .nav-links.open {
    display: flex;
  }
  html.js .nav-links a {
    padding: 13px 0;
    font-size: 1rem;
    opacity: 1;
    border-bottom: 1px solid rgba(30, 75, 44, 0.1);
  }
  html.js .nav-links a:last-child {
    border-bottom: none;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
  font-family: inherit;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary {
  background: var(--grove);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--grove-deep);
}
.btn-ghost {
  border-color: #cfc7b2;
  color: var(--grove);
}
.btn-ghost:hover {
  border-color: var(--gold);
}
.btn-gold {
  background: var(--gold);
  color: #fff;
}
.btn-gold:hover {
  background: var(--gold-deep);
}
.btn-sm {
  padding: 9px 18px;
  font-size: 0.88rem;
}

/* ---------- typography helpers ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.lead {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 56ch;
}
section {
  padding: 92px 0;
}
section h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  margin-bottom: 14px;
  max-width: 20ch;
}
.section-head {
  margin-bottom: 52px;
}
.tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--gold);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 40px 0 60px;
}
.hero .grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 940px) {
  .hero .grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 10px;
}
.hero h1 em {
  font-style: italic;
  color: var(--leaf);
}
.hero .tagline {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  margin-bottom: 20px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
@media (max-width: 940px) {
  .hero-actions {
    justify-content: center;
  }
}

/* ---------- 3D tree ---------- */
.tree-stage {
  position: relative;
  border-radius: 26px;
  background: linear-gradient(170deg, #ffffff 0%, var(--cream-deep) 100%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  overflow: hidden;
}
#tree-canvas {
  display: block;
  width: 100%;
  height: 460px;
  touch-action: pan-y;
  cursor: grab;
}
#tree-canvas:active {
  cursor: grabbing;
}
@media (max-width: 940px) {
  #tree-canvas {
    height: 380px;
  }
}
.tree-fallback {
  display: none;
  padding: 40px 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.94rem;
}
.tree-stage.no-webgl #tree-canvas {
  display: none;
}
.tree-stage.no-webgl .tree-fallback {
  display: block;
}
.tree-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px 16px;
  background: linear-gradient(to top, rgba(248, 245, 236, 0.96), rgba(248, 245, 236, 0));
}
.tree-stage-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tree-stage-name strong {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--grove);
}
.tree-stage-name span {
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.8;
}
.tree-steps {
  display: flex;
  gap: 6px;
}
.tree-steps button {
  flex: 1;
  height: 6px;
  border: none;
  border-radius: 100px;
  background: #ddd5c1;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}
.tree-steps button[aria-pressed='true'] {
  background: var(--gold);
}
.tree-steps button:hover {
  background: var(--gold-soft);
}
.tree-hint {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.65;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: 100px;
}

/* ---------- feature rows with screenshots ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 96px;
}
.feature-row:nth-child(even) .feature-copy {
  order: 2;
}
@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 64px;
  }
  .feature-row:nth-child(even) .feature-copy {
    order: 0;
  }
}
.feature-copy h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.feature-copy p {
  color: var(--muted);
  font-size: 0.99rem;
}
.feature-copy ul {
  margin-top: 16px;
  list-style: none;
}
.feature-copy li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 0.94rem;
  color: var(--muted);
}
.feature-copy li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf-light);
  border: 1.5px solid var(--leaf);
}

/* browser chrome around screenshots */
.shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  background: #fff;
}
.shot .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--hairline);
}
.shot .bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8cfb8;
  display: block;
}
.shot .bar .url {
  margin-left: 10px;
  font-size: 0.72rem;
  color: #8d8a7c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.shot .frame {
  /* crops tall captures from the top so panels stay legible */
  max-height: 460px;
  overflow: hidden;
}
.shot .frame img {
  width: 100%;
}
.shot.tall .frame {
  max-height: none;
}

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.card .ico {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 12px;
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.card p {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- dark band ---------- */
.band {
  background: var(--grove);
  color: var(--cream);
  border-radius: 28px;
  padding: 68px 48px;
}
.band h2,
.band h3 {
  color: var(--cream);
}
.band .eyebrow {
  color: var(--gold-soft);
}
.band .lead {
  color: #cfdac6;
}
/* Buttons sitting on the grove band need their colours restated, exactly like .site-nav a.btn-primary
   above: .btn-primary is grove on grove (an invisible button with floating text) and .btn-ghost draws
   grove text on grove (a pill with no label in it). Both shipped that way on the Plans page for a
   few minutes and looked, in a screenshot, like a broken stylesheet. */
.band .btn-primary {
  background: var(--gold);
  color: #fff;
}
.band .btn-primary:hover {
  background: var(--gold-deep);
}
.band .btn-ghost {
  border-color: rgba(255, 255, 255, 0.38);
  color: var(--cream);
}
.band .btn-ghost:hover {
  border-color: var(--gold-soft);
}
@media (max-width: 640px) {
  .band {
    padding: 46px 24px;
    border-radius: 22px;
  }
}
.verse {
  margin-top: 40px;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: #cfdac6;
}

/* ---------- pricing ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: start;
}
.tier {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.tier.featured {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  position: relative;
}
.tier.featured::after {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--gold);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
}
.tier h3 {
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.tier .price {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  color: var(--grove);
  margin: 14px 0 2px;
}
.tier .price small {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
}
.tier ul {
  list-style: none;
  margin: 22px 0;
}
.tier li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 9px;
  font-size: 0.93rem;
  color: var(--muted);
}
.tier li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--leaf-bright);
  font-weight: 700;
}

.notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 0.9rem;
  color: #78590c;
  margin-bottom: 40px;
}
.notice strong {
  color: #713f12;
}

/* ---------- signup ---------- */
.signup {
  display: flex;
  gap: 10px;
  max-width: 470px;
}
@media (max-width: 520px) {
  .signup {
    flex-direction: column;
  }
}
.signup input {
  flex: 1;
  padding: 15px 20px;
  border: 1.5px solid #cfc7b2;
  border-radius: 100px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.signup input:focus {
  border-color: var(--gold);
}
.band .signup input {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
  color: var(--cream);
}
.band .signup input::placeholder {
  color: #a9bda3;
}
.signup-note {
  font-size: 0.8rem;
  color: #7c8474;
  margin-top: 12px;
}
.band .signup-note {
  color: #a9bda3;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 44px 0 56px;
  margin-top: 40px;
}
.site-footer .inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer p {
  font-size: 0.85rem;
  color: #8d8a7c;
}
.site-footer nav {
  display: flex;
  gap: 20px;
}
.site-footer nav a {
  font-size: 0.85rem;
  color: var(--grove);
  text-decoration: none;
  opacity: 0.8;
}
.site-footer nav a:hover {
  opacity: 1;
}

/* ---------- scroll reveal ----------
   Only hide content when JS is actually running (the <html class="js"> flag is set by an
   inline script in <head>). Without this, a JS failure or a blocked script leaves the whole
   page blank instead of merely un-animated. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---- analytics consent bar (assets/analytics.js builds the markup) ---- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 200;
  width: min(44rem, calc(100vw - 2rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1.1rem;
  background: #fffdf7;
  border: 1px solid #e3ddcb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(30, 75, 44, 0.18);
}
.consent-text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #3d3a33;
}
.consent-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.consent .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
@media (max-width: 520px) {
  .consent-actions {
    width: 100%;
    margin-left: 0;
  }
  .consent .btn {
    flex: 1;
    text-align: center;
  }
}

/* ---------- long-form pages (privacy, children's privacy, security) ----------
   These are read, not skimmed: a narrower measure than the marketing sections, and headings
   that a safeguarding lead can navigate by. */
.prose {
  max-width: 44rem;
  margin: 0 auto;
}
.prose h2 {
  font-family: var(--display, Georgia, serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.25;
  margin: 46px 0 12px;
  color: var(--grove-deep);
  /* `section h2` caps headings at 20ch for the marketing sections, which wraps a plain
     sentence heading in the middle ("The connection and the / browser"). */
  max-width: none;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-size: 1.05rem;
  margin: 26px 0 8px;
  color: var(--grove-deep);
  max-width: none;
}
.prose p,
.prose li {
  color: var(--muted);
  line-height: 1.7;
}
.prose p {
  margin: 0 0 14px;
}
.prose ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}
.prose li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leaf-light);
}
.prose strong {
  color: var(--ink);
}
.prose a {
  color: var(--leaf);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* A plain, quiet note — the "this is what we don't do yet" boxes. */
.prose .callout {
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.prose .callout p:last-child {
  margin-bottom: 0;
}
.prose .updated {
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.8;
}
/* Sibling trust pages, linked from the foot of each. */
.trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

/* ---------- a screenshot placed on a dark band (the growth path on the home page) ---------- */
.band-shot {
  margin: 40px 0 0;
}
.band-shot img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.5);
}
/* ⚠️ The growth path is a wide horizontal rail. Scaled to fit a 390px phone its stage labels and
   avatars are illegible — the picture is there to be read, not to be a texture. So below 640px it
   keeps a legible width and the figure scrolls, which is exactly what the rail does inside the app
   on the same screen. The scroll is contained in the figure, so the PAGE must still not scroll
   sideways — `verify:site` asserts that. */
@media (max-width: 640px) {
  .band-shot {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .band-shot img {
    width: 560px;
    max-width: none;
  }
  .band-shot figcaption {
    position: sticky;
    left: 0;
    width: 100vw;
    max-width: 100%;
  }
}
.band-shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: #cfdac6;
}

/* ---------- enquiry dialog (the signup pop-up) ----------
   Opened by any [data-enquiry] button. Built by assets/enquiry.js, so with JS off nothing here
   applies and the inline form on the page stays the way in. */
.enq-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 55, 31, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.enq-backdrop.in {
  opacity: 1;
}
.enq-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(22, 55, 31, 0.55);
  padding: 30px 28px 26px;
  text-align: center;
  transform: translateY(8px) scale(0.985);
  transition: transform 0.18s ease;
}
.enq-backdrop.in .enq-dialog {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .enq-backdrop,
  .enq-dialog {
    transition: none;
  }
}
.enq-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: block;
  border-radius: 14px;
}
.enq-dialog h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 8px;
  max-width: none;
}
.enq-dialog p.enq-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.enq-field {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.enq-field:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
}
textarea.enq-field {
  min-height: 84px;
  resize: vertical;
}
.enq-dialog .btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.enq-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0.85;
}
.enq-error {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #fdecec;
  border: 1px solid #f3c9c9;
  color: #8d2b2b;
  font-size: 0.88rem;
  text-align: left;
}
.enq-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.enq-close:hover {
  background: var(--cream-deep);
}
/* ⚠️ The honeypot. Hidden from people and taken out of the tab order, so only an automated
   form-filler reaches it — but NOT `display:none`, which some bots skip. */
.enq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}