/* ==========================================================================
   Marketing site — public pages only.

   Extends the tokens in app.css rather than redefining them, so the public site
   and the product stay one visual system. If these pages are ever lifted onto a
   static host, this file plus the :root block from app.css is the whole payload.

   Front of house: this surface may breathe a little more than the back-office
   dashboard — soft clinic light, a longer motion budget — but never louder than
   the one thing that matters: the reply the product refused to post.
   ========================================================================== */

:root {
  /* marketing-only atmosphere — derived from the core tokens, never new meaning */
  --clinic-a: rgba(30, 87, 69, 0.06);   /* evergreen haze  */
  --clinic-b: rgba(138, 90, 0, 0.05);   /* hold-amber haze */
  --edge: rgba(21, 36, 32, 0.08);
  --lift-1: 0 1px 2px rgb(21 36 32 / 0.06);
  --lift-2: 0 12px 30px -18px rgb(21 36 32 / 0.35);
  --lift-3: 0 30px 60px -34px rgb(21 36 32 / 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.marketing { background: var(--porcelain); color: var(--ink); }

/* Fluid type helpers — one confident scale that scans down to mobile.        */
.marketing h1,
.marketing h2,
.marketing h3 { text-wrap: balance; }
.marketing p { text-wrap: pretty; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- progressive reveal ---------------------------------------------------
   No-JS and reduced-motion users see everything, immediately. Only when JS is
   present AND motion is welcome do elements start hidden and rise into place. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* ---- shell --------------------------------------------------------------- */

.site-head {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-head-inner,
.site-foot-inner,
.band-inner,
.hero-inner {
  max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px;
}
.site-head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 62px;
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: #fff; text-decoration: none; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 9px;
}
/* the logo mark replaces the old decorative "held" bead */
.wordmark-mark { width: 26px; height: 26px; display: block; flex: none; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: #C7D5CE; font-size: 0.85rem; text-decoration: none;
  transition: color 140ms var(--ease); }
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav .btn-primary { color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 0.8rem; }

.site-foot { background: var(--ink); color: #A9BCB4; margin-top: 0; }
.site-foot-inner {
  display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding-top: 34px; padding-bottom: 34px;
}
.site-foot .wordmark { color: #fff; }
.foot-note { font-size: 0.82rem; margin-top: 8px; max-width: 34ch; }
.foot-nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.foot-nav a { color: #A9BCB4; font-size: 0.82rem; text-decoration: none;
  transition: color 140ms var(--ease); }
.foot-nav a:hover { color: #fff; text-decoration: underline; }

/* ---- buttons: front-of-house lift ---------------------------------------- */
/* The dashboard buttons stay flat; on the marketing surface the primary CTA
   gets a little depth and a press. */
.marketing .btn-primary {
  box-shadow: var(--lift-1), 0 8px 20px -10px rgba(30, 87, 69, 0.55);
  transition: background 140ms var(--ease), transform 140ms var(--ease),
              box-shadow 140ms var(--ease);
}
.marketing .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--lift-1), 0 14px 26px -10px rgba(30, 87, 69, 0.6);
}
.marketing .btn-primary:active { transform: translateY(0); }
.marketing .btn-quiet {
  transition: border-color 140ms var(--ease), color 140ms var(--ease),
              transform 140ms var(--ease);
}
.marketing .btn-quiet:hover { transform: translateY(-1px); }

/* ---- hero ---------------------------------------------------------------- */

.hero { position: relative; padding: 84px 0 76px; overflow: hidden; }
/* clinic light: a soft evergreen wash bleeding down from the ink header, with
   a single amber bloom on the side that carries the artifact — atmosphere that
   points at the one reserved color instead of scattering it. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(60% 55% at 18% 0%, var(--clinic-a), transparent 70%),
    radial-gradient(48% 50% at 88% 14%, var(--clinic-b), transparent 68%);
  pointer-events: none; z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--evergreen); margin-bottom: 20px;
}
.eyebrow::before {   /* a short editorial rule, not a pill */
  content: ""; width: 26px; height: 1.5px; background: var(--evergreen);
  flex: none; opacity: 0.7;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.5rem);
  line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 20px;
}
.lede { font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem); line-height: 1.62;
  color: var(--muted); max-width: 48ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.hero-fine { font-size: 0.78rem; color: var(--muted); }

/* The signature element: the product's own held-reply card, unedited — but on
   load it *performs the hold*, sweeping the amber rail in and stamping the
   reasons, so the visitor watches the one thing the product does. A slider
   rotates the same proof across four businesses. */
.hero-artifact { margin: 0; position: relative; }

/* Slider: all slides share one grid cell so the frame sizes to the tallest and
   never jumps as it rotates. Only the active slide is visible + interactive. */
.artifact-slider { display: grid; }
.js .artifact-slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 480ms var(--ease), visibility 480ms var(--ease);
}
.js .artifact-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Without JS, only the first example shows and the dots are meaningless. */
.no-js .artifact-slide:not(:first-child) { display: none; }
.no-js .slider-dots { display: none; }

.slider-dots { display: flex; gap: 9px; justify-content: center; margin: 18px 0 0; }
.slider-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--sage-line); cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.slider-dot:hover { background: var(--muted); }
.slider-dot[aria-current="true"] { background: var(--evergreen); transform: scale(1.3); }
.slider-dot:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 3px; }
.artifact-cap {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  margin-bottom: 10px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
}
.artifact-cap::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hold); box-shadow: 0 0 0 4px var(--hold-fill);
}
.artifact {
  box-shadow: var(--lift-3);
  border-color: var(--edge);
  position: relative;
}
.artifact .review-text { font-size: 0.92rem; margin: 0 0 14px; color: var(--ink); }
.artifact-foot {
  font-size: 0.82rem; color: var(--muted); margin-top: 14px; max-width: 42ch;
}
.who { font-weight: 600; font-size: 0.9rem; }
.artifact .stars { margin-left: 2px; }

.reply-block.held {
  border-left: 3px solid var(--hold-line); background: var(--hold-fill);
  padding: 13px 15px; border-radius: 0 10px 10px 0;
}
.reply-label {
  font-size: 0.74rem; color: var(--hold); font-weight: 600; margin-bottom: 7px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.held-tag { font-family: var(--font-mono); font-weight: 500; }
.reply-block .reply-text { font-size: 0.89rem; line-height: 1.55; margin: 0 0 11px; }
.flag-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.flag-note { font-size: 0.74rem; color: var(--hold); }
.flag-chip {
  font-size: 0.72rem; background: #fff; border: 1px solid var(--hold-line);
  color: var(--hold); padding: 3px 9px; border-radius: 999px;
  box-shadow: var(--lift-1);
}

/* --- the hold performance (JS + motion welcome only) ----------------------
   Runs on whichever slide is active, so every rotation re-enacts the catch. */
@media (prefers-reduced-motion: no-preference) {
  .js .artifact-slide.is-active .reply-block.held {
    animation: rail-sweep 640ms var(--ease) 120ms both;
  }
  .js .artifact-slide.is-active .held-tag { animation: stamp 400ms var(--ease) 320ms both; }
  .js .artifact-slide.is-active .flag-chip { animation: stamp 400ms var(--ease) both; }
  .js .artifact-slide.is-active .flag-chip:nth-of-type(1) { animation-delay: 480ms; }
  .js .artifact-slide.is-active .flag-chip:nth-of-type(2) { animation-delay: 600ms; }
}
@keyframes rail-sweep {
  from { border-left-color: transparent; background: #fff;
    clip-path: inset(0 0 0 0); box-shadow: inset 0 0 0 0 var(--hold-fill); }
  60%  { border-left-color: var(--hold-line); }
  to   { border-left-color: var(--hold-line); background: var(--hold-fill); }
}
@keyframes stamp {
  from { opacity: 0; transform: translateY(5px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ---- credibility strip: restate the mechanism, not fake logos ------------ */
.assurances {
  border-top: 1px solid var(--sage-line); border-bottom: 1px solid var(--sage-line);
  background: color-mix(in srgb, var(--sage-fill) 60%, transparent);
}
.assurances-inner {
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  justify-content: center;
}
.assure {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.84rem; color: var(--muted);
}
.assure b { color: var(--ink); font-weight: 600; }
.assure svg { flex: none; color: var(--evergreen); }

/* ---- bands --------------------------------------------------------------- */

.band { padding: 72px 0; border-top: 1px solid var(--sage-line); }
.band-ink {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(228, 199, 120, 0.10), transparent 55%),
    var(--ink);
  color: #DCE7E1; border-top: 0;
}
.band-ink .section-title { color: #fff; }
.band-lede { color: #A9BCB4; line-height: 1.66; max-width: 48ch; margin-bottom: 14px; }
.section-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  letter-spacing: -0.015em; margin: 0 0 8px;
}
.section-kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--evergreen); margin: 0 0 12px;
}
.band-ink .section-kicker { color: var(--hold-line); }
.section-head { margin-bottom: 34px; max-width: 62ch; }
.section-lede { font-size: 1rem; line-height: 1.62; color: var(--muted); margin-top: 10px; max-width: 56ch; }

/* The pipeline is a real sequence, so it is drawn as one: a connective spine
   runs through four numbered nodes — the path a review actually travels. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 28px;
  grid-template-columns: repeat(4, 1fr); position: relative; }
.flow li { position: relative; padding-top: 30px; }
/* the spine: each node's segment starts at its own centre and bridges the 28px
   column gap to reach the next node, so the four read as one continuous path. */
.flow li::before {
  content: ""; position: absolute; top: 11px; left: 12px; right: -28px; height: 2px;
  background: var(--sage-line);
}
.flow li:last-child::before { display: none; }
.flow-n {
  position: absolute; top: 0; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--evergreen);
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--evergreen);
  font-weight: 600; z-index: 1;
}
.flow h3 { font-size: 1rem; margin: 4px 0 6px; font-weight: 650;
  font-family: var(--font-display); letter-spacing: -0.01em; }
.flow p { font-size: 0.87rem; color: var(--muted); line-height: 1.56; margin: 0; }

.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.rules-title { font-size: 0.95rem; margin: 0 0 4px; color: #fff; font-weight: 600; }
.rules { list-style: none; margin: 12px 0 0; padding: 0; }
.rules li {
  font-size: 0.9rem; padding: 11px 0 11px 28px; position: relative; color: #E4EDE8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.rules li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 13px; height: 13px; border-radius: 3px;
  background: rgba(228, 199, 120, 0.14); border: 1px solid var(--hold-line);
}
.rules li::after {
  content: "✕"; position: absolute; left: 4px; top: 10px;
  color: var(--hold-line); font-size: 0.72rem; line-height: 1;
}
.rules-foot { font-size: 0.82rem; color: #A9BCB4; margin-top: 16px; line-height: 1.6; }

.verticals { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.vert {
  background: var(--surface); border: 1px solid var(--sage-line);
  border-radius: 12px; padding: 20px; box-shadow: var(--lift-1);
  position: relative; overflow: hidden;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease);
}
.vert::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--evergreen); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.vert:hover { transform: translateY(-3px); box-shadow: var(--lift-2);
  border-color: var(--sage-line); }
.vert:hover::before { transform: scaleX(1); }
.vert h3 { font-size: 0.98rem; margin: 0 0 6px; font-weight: 650;
  font-family: var(--font-display); letter-spacing: -0.01em; }
.vert p { font-size: 0.84rem; color: var(--muted); margin: 0; line-height: 1.52; }
.verticals-foot { font-size: 0.86rem; color: var(--muted); margin-top: 20px; max-width: 64ch; line-height: 1.6; }

.cta-band {
  position: relative; overflow: hidden; text-align: center;
  padding: 74px 0;
  background:
    radial-gradient(60% 120% at 50% -10%, rgba(30, 87, 69, 0.10), transparent 60%),
    var(--sage-fill);
  border-top: 1px solid var(--sage-line);
}
.cta-inner h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem); margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.cta-inner p { color: var(--muted); margin: 0 auto 26px; max-width: 52ch;
  font-size: 1.02rem; }

/* ---- long-form pages (pricing, privacy, terms) --------------------------- */

.page-narrow { max-width: 760px; margin: 0 auto; padding: 64px 24px 76px; }
.page-narrow h1 {
  font-family: var(--font-display); font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem);
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.page-narrow .updated { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.page-narrow h2 { font-size: 1.12rem; margin: 36px 0 10px; font-weight: 650;
  font-family: var(--font-display); letter-spacing: -0.01em; }
.page-narrow .faq-q { font-size: 0.98rem; margin: 26px 0 8px; font-weight: 650; }
.page-narrow p, .page-narrow li { font-size: 0.92rem; line-height: 1.68; color: #2C3D37; }
.page-narrow ul { padding-left: 20px; }
.page-narrow li { margin-bottom: 6px; }
.legal-note {
  background: var(--hold-fill); border: 1px solid var(--hold-line);
  border-radius: 8px; padding: 14px 16px; font-size: 0.85rem; color: var(--hold);
  margin-bottom: 28px;
}

/* ---- contact ------------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 10px;
}
.contact-card {
  background: var(--surface); border: 1px solid var(--sage-line);
  border-radius: 14px; padding: 24px; box-shadow: var(--lift-1);
}
.contact-card h2 {
  font-family: var(--font-display); font-size: 1.15rem; margin: 4px 0 8px;
  letter-spacing: -0.01em; font-weight: 650;
}
.contact-card p { margin-bottom: 16px; }
.contact-card .section-kicker { margin-bottom: 6px; }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }

.plan-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: start; margin: 26px 0;
}
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } }

.plan {
  background: var(--surface); border: 1px solid var(--sage-line);
  border-radius: 14px; padding: 30px; margin: 26px 0; box-shadow: var(--lift-2);
}
.plan-grid .plan { margin: 0; height: 100%; }
.plan.is-featured { border-color: var(--evergreen); box-shadow: var(--lift-3, var(--lift-2)); }
.plan-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0 0 2px; }
.plan-tag { color: var(--muted); font-size: 0.85rem; margin: 0 0 16px; }
.plan-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  font-weight: 500; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px;
  background: var(--evergreen); color: #fff; margin: 0 0 10px;
}
.plan .price { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: -0.025em; }
.plan .per { color: var(--muted); font-size: 0.9rem; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; }
.plan li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--sage-line); }
.plan li:last-child { border-bottom: 0; }
.plan li::before {
  content: "✓"; position: absolute; left: 0; color: var(--evergreen); font-weight: 700;
}

/* ---- pricing: pure-CSS monthly / annual toggle --------------------------- */

/* The radios drive everything via :checked sibling selectors; keep them
   reachable by keyboard but out of the visual flow. */
.cycle-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cycle-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px;
  background: var(--sage-fill); border: 1px solid var(--sage-line);
  border-radius: 999px;
}
.cycle-opt {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  color: var(--muted); transition: background 120ms ease, color 120ms ease;
}
.cycle-badge {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px;
  background: var(--evergreen); color: #fff;
}

/* Active segment */
#cycle-monthly:checked ~ .cycle-toggle .cycle-opt[for="cycle-monthly"],
#cycle-annual:checked ~ .cycle-toggle .cycle-opt[for="cycle-annual"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgb(21 36 32 / 0.10);
}
/* Keyboard focus ring on the visually-hidden radio, drawn on its segment */
#cycle-monthly:focus-visible ~ .cycle-toggle .cycle-opt[for="cycle-monthly"],
#cycle-annual:focus-visible ~ .cycle-toggle .cycle-opt[for="cycle-annual"] {
  outline: 2px solid var(--evergreen); outline-offset: 2px;
}

/* Show only the selected cycle's price block + CTA. Monthly is the default. */
.plan-price.is-annual, .plan-cta.is-annual { display: none; }
#cycle-annual:checked ~ .plan-price.is-monthly,
#cycle-annual:checked ~ .plan-cta.is-monthly { display: none; }
#cycle-annual:checked ~ .plan-price.is-annual { display: block; }
#cycle-annual:checked ~ .plan-cta.is-annual { display: inline-block; }

.plan-subnote { font-size: 0.82rem; color: var(--muted); margin: 8px 0 0; max-width: 44ch; }
.plan-legal { margin: -14px 0 26px; max-width: 68ch; line-height: 1.55; }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { padding: 60px 0 56px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
  .flow li::before { display: none; }   /* spine only reads as a row */
  .flow li { padding-top: 0; padding-left: 34px; }
  .flow-n { top: 1px; }
  .verticals { grid-template-columns: repeat(2, 1fr); }
  .rules-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .hero { padding: 40px 0 40px; }
  .flow, .verticals { grid-template-columns: 1fr; }
  .assurances-inner { justify-content: flex-start; }
  .site-head-inner { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  .site-nav { gap: 14px; }
}

/* ---- motion floor -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .artifact-slide { transition: none; }   /* switch instantly, no cross-fade */
  .marketing .btn-primary:hover,
  .marketing .btn-quiet:hover,
  .vert:hover { transform: none; }
  .vert:hover::before { transform: scaleX(1); }
}

/* --- /contact/ form --- */
.contact-form { margin: 22px 0 10px; max-width: 520px; }
.contact-form .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-weight: 600; font-size: 0.9rem; }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cdd6d0;
  border-radius: 8px; font: inherit; background: #fff; color: inherit;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
/* honeypot: off-screen, not display:none (bots skip hidden fields) */
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-sent { margin: 20px 0 8px; }