/* ==========================================================================
   Restoration Domination System, stylesheet
   Peterson SEO

   PALETTE (from the live site)
     #63b5d6  light blue    accent, highlighted headline words, blue buttons
     #87f967  bright green  primary CTA buttons, highlight bars, footer
     #d6d6d6  light grey    alternating section background
     #ffffff  white         alternating section background
     #f64e49  red           required markers, X marks, "NOT" emphasis
     #666666  grey          muted body text
     #090914  near-black    dark sections, stats box

   RESPONSIVE NOTE
     Desktop/tablet and mobile are deliberately different, matching the live
     site, NOT just a reflow:
       - Testimonials: long rounded pill on desktop, rounded SQUARE card on
         mobile with the stars beside the avatar, so the quote stays readable.
       - CTA: curved side arrows on desktop, single down-chevron above the
         button on mobile.
       - Stats: three across on desktop, stacked and centred on mobile.
   ========================================================================== */

:root {
  --blue:      #63b5d6;
  --blue-deep: #4494b5;
  --green:     #87f967;
  --green-deep:#5fd63f;
  --grey-bg:   #d6d6d6;
  --white:     #ffffff;
  --red:       #f64e49;
  --muted:     #666666;
  --ink:       #090914;
  --pill-blue: #6ba9e8;
  --card-blue: #b9cfdd;
  --gold:      #f5c243;

  /* ONE background for the entire outcome page, chosen to match the very light
     grey Calendly paints inside its own iframe. We cannot reach inside that
     iframe with CSS, so the page matches it rather than the other way round.
     If it is still off by a shade, THIS IS THE ONLY VALUE TO CHANGE. */
  --page-bg:   #fafafa;

  --font: "Mulish", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --wrap: 1180px;
  --shadow: 0 4px 18px rgba(9, 9, 20, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0; overflow-x: hidden; width: 100%; max-width: 100vw;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); }

h1, h2, h3 { font-weight: 800; line-height: 1.14; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.65rem, 4vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p  { margin: 0 0 1.15em; }

.hl     { color: var(--blue); }
.hl-red { color: var(--red); text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 900px; }
.center { text-align: center; }

section { padding: 64px 0; width: 100%; max-width: 100vw; overflow-x: clip; }
section.tight { padding: 40px 0; }
.sec-white { background: var(--white); }
.sec-grey  { background: var(--grey-bg); }
.sec-dark  { background: var(--ink); color: #d8dde4; }
.sec-dark h1, .sec-dark h2 { color: var(--white); }
.sec-dark h2 .hl, .sec-dark h3 { color: var(--blue); }

/* ==========================================================================
   CTA BUTTONS, image-style, swinging, with curved arrows
   ========================================================================== */
.cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 3vw, 44px); margin: 34px 0;
}
.cta-arrow { flex: 0 0 auto; width: clamp(70px, 9vw, 130px); color: var(--ink); }
.cta-arrow svg { width: 100%; height: auto; display: block; }

/* Down-chevron shown on mobile in place of the side arrows */
.cta-chevron { display: none; margin: 0 auto 14px; width: 46px; color: var(--ink); }
.cta-chevron svg { width: 100%; height: auto; display: block; }

.btn-img {
  display: block; text-decoration: none; text-align: center;
  background: var(--green);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 15px 32px;
  box-shadow: 3px 4px 0 rgba(9,9,20,.55);
  color: var(--ink);
  animation: swing 2.6s ease-in-out infinite;
  transform-origin: 50% 50%;
  max-width: 560px;
}
.btn-img .line1 {
  display: block; font-weight: 900; letter-spacing: -.01em;
  font-size: clamp(1.02rem, 2.5vw, 1.55rem); line-height: 1.18;
}
.btn-img .line2 {
  display: block; font-weight: 500; margin-top: 3px;
  font-size: clamp(.85rem, 1.7vw, 1.05rem);
}
.btn-img:hover { animation-play-state: paused; transform: rotate(0deg) scale(1.03); }
.btn-img:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.btn-img.blue { background: var(--blue); }

@keyframes swing {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}

.btn {
  display: inline-block; font-family: var(--font); font-weight: 800;
  font-size: 1.05rem; color: var(--ink); background: var(--green);
  border: 2px solid var(--ink); border-radius: 10px; padding: 15px 34px;
  text-decoration: none; cursor: pointer; box-shadow: 2px 3px 0 rgba(9,9,20,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(1px, 2px); box-shadow: 1px 1px 0 rgba(9,9,20,.5); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.blue { background: var(--blue); }
.btn.quiet {
  background: transparent; border-color: #c3c8cf; color: var(--muted);
  box-shadow: none; font-weight: 600;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background: #1a1a1a center/cover no-repeat;
  color: var(--white); padding: 34px 0 56px; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,9,20,.72), rgba(9,9,20,.6) 55%, rgba(9,9,20,.8));
}
.hero .logo { width: min(420px, 80%); margin: 0 auto 30px; }
.hero h1 {
  color: var(--white); text-align: center; margin-bottom: .35em;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.1;
  text-wrap: balance;
}
/* Red emphasis inside a dark hero needs to be lighter to stay readable */
.hero h1 .hl-red { color: #ff7b76; text-decoration: none; }
.hero .sub {
  text-align: center; font-style: italic; font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  color: #eef4f8; margin: 0 0 14px;
}
.hero .trustline {
  text-align: center; font-style: italic; color: #b9c3cc;
  font-size: clamp(.92rem, 1.6vw, 1.02rem); margin: 0 0 26px;
}
.hero-left { display: flex; flex-direction: column; justify-content: center; }
.hero-btn { margin: 0 auto; }
.badges { list-style: none; margin: 0 auto 26px; padding: 0; max-width: 460px; }
.badges li { font-size: clamp(.98rem, 1.8vw, 1.12rem); color: var(--white); padding: 3px 0; }
.badges li::before { content: "✅"; margin-right: 10px; }

.scarcity { text-align: center; margin-top: 40px; }
.scarcity h2 {
  color: var(--white); font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  text-transform: none; margin-bottom: .2em;
}
.scarcity p { color: var(--white); font-size: clamp(1.05rem, 2.2vw, 1.35rem); margin: 0; }

.herogrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: stretch;
}

.formcard {
  border: 2px solid var(--blue); border-radius: 16px;
  padding: 26px 26px 24px; background: rgba(9,9,20,.34);
}
.formcard h2 {
  color: var(--white); text-transform: none; text-align: center;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-bottom: .7em;
}
.formcard .fineprint { font-size: .92rem; color: #d7dde3; font-style: italic; margin: 16px 0 0; }

/* Underline-style fields, matching the live form */
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: 1.02rem; color: var(--white); margin-bottom: 2px; }
.field .req { color: var(--red); font-weight: 700; }
.field input, .field textarea {
  width: 100%; padding: 8px 2px; font-family: var(--font); font-size: 1.02rem;
  color: var(--white); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--blue); border-radius: 0;
  transition: border-color .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--green); border-bottom-width: 2px;
}
.field .err { color: var(--red); font-size: .85rem; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--red); }
.field.invalid .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.on-light .field label, .on-light .field input, .on-light .field textarea { color: var(--ink); }

/* ==========================================================================
   Content components
   ========================================================================== */
.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .95rem;
  color: var(--green-deep); font-weight: 800; margin-bottom: 8px;
}
.sec-dark .eyebrow { color: var(--green); }
.lede { text-align: center; font-size: clamp(1.05rem, 2vw, 1.3rem); margin-bottom: 34px; }

.highlight-bar {
  display: inline-block; background: var(--green); color: var(--ink);
  padding: 8px 24px; text-transform: none;
  font-size: clamp(1.6rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.2;
}

/* ---- Award marquee: always moving, no arrows, no start condition ----
   The previous version only advanced when the badges overflowed their
   container, which at desktop width they did not, so it sat still. This
   version animates unconditionally. The track is duplicated and shifted by
   exactly half its width, so the loop is seamless. Eight unique badges keep
   the two copies far enough apart that repeats are not visible together. */
.awards-marquee { overflow: hidden; width: 100%; padding: 4px 0 10px; }
.awards-track {
  display: flex; align-items: center; gap: 44px; width: max-content;
  animation: award-scroll 38s linear infinite;
}
.awards-marquee:hover .awards-track { animation-play-state: paused; }
.awards-track img { max-height: 100px; width: auto; flex: 0 0 auto; }

@keyframes award-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .awards-track { gap: 30px; animation-duration: 26s; }
  .awards-track img { max-height: 68px; }
}
@media (prefers-reduced-motion: reduce) { .awards-track { animation: none; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.card {
  background: var(--card-blue); border: 1.5px solid var(--blue);
  border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow);
}
.card h3 { color: var(--ink); font-size: 1.35rem; margin-bottom: .8em; }
.card p { font-size: .97rem; }
.card p:last-child { margin-bottom: 0; }
.card .label { font-weight: 800; }

/* ---- Testimonial: the review graphic IS the whole pill ----
   These PNGs already contain the avatar, stars, quote and name. Show them
   whole. Desktop uses the wide pill version, mobile the rounded square, so
   the quote stays readable instead of shrinking.
   The graphic straddles the boundary between two sections, sitting half in
   the section above and half in the one below. */
.pill-wrap {
  position: relative; z-index: 3;
  max-width: 940px; margin: 0 auto;
  padding: 0 22px;
  transform: translateY(50%);          /* half in this section, half in the next */
}
.pill-wrap img { width: 100%; height: auto; display: block; }

/* The section that receives the overhang needs room so the graphic never
   sits on top of a button. */
.after-pill { padding-top: 110px !important; }

@media (max-width: 640px) {
  .pill-wrap { max-width: 520px; padding: 0 16px; }
  .after-pill { padding-top: 74px !important; }
}

.fitlist { list-style: none; padding: 0; margin: 0 0 10px; }
.fitlist li { padding: 10px 0 10px 36px; position: relative; font-size: 1.05rem; }
.fitlist.yes li::before { content: "✅"; position: absolute; left: 0; top: 10px; }
.fitlist.no  li::before { content: "❌"; position: absolute; left: 0; top: 10px; }

.divider { height: 2px; background: var(--blue); max-width: 420px; margin: 44px auto; opacity: .6; }

.stats-box {
  background: var(--ink); border: 2px solid var(--green); border-radius: 12px;
  padding: 34px 26px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: center;
}
.stats-box .ico { color: var(--green); margin: 0 auto 12px; width: 54px; }
.stats-box .n { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--green); line-height: 1; }
.stats-box .l { color: var(--white); font-size: 1.05rem; margin-top: 8px; }

.map { width: 100%; max-width: 700px; height: auto; margin: 0 auto 12px; }
.map-caption { text-align: center; font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.4rem); margin-bottom: 30px; }

/* ==========================================================================
   Qualifier
   ========================================================================== */
.q-shell { background: var(--grey-bg); min-height: 100vh; padding: 30px 0 70px; }
.q-head { text-align: center; margin-bottom: 24px; }
.q-head .logo { width: min(360px, 78%); margin: 0 auto 20px; }
.q-head h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
.q-card {
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow);
  padding: 34px 32px; max-width: 740px; margin: 0 auto;
}

.progress { margin-bottom: 26px; }
.progress-bar { height: 8px; background: #e4e7ea; border-radius: 99px; overflow: hidden; }
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--blue), var(--green));
  width: 0%; border-radius: 99px; transition: width .35s cubic-bezier(.4,0,.2,1);
}
.progress-label {
  font-size: .85rem; color: var(--muted); margin-top: 9px;
  display: flex; justify-content: space-between; font-weight: 700;
}

.step { display: none; }
.step.active { display: block; animation: fade .28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step h2 { font-size: clamp(1.3rem, 2.9vw, 1.8rem); text-transform: none; margin-bottom: .35em; }
.step .hint { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }

.options { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid #ccd2d8; border-radius: 10px; padding: 15px 17px;
  cursor: pointer; background: var(--white);
  transition: border-color .13s ease, background .13s ease;
}
.opt:hover { border-color: var(--blue); background: #f3f9fc; }
.opt input { margin: 3px 0 0; accent-color: var(--blue-deep); width: 18px; height: 18px; flex: 0 0 auto; }
.opt span { font-size: 1rem; line-height: 1.45; }
.opt.checked { border-color: var(--blue); background: #eaf5fa; box-shadow: 0 0 0 1px var(--blue) inset; }

.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 28px; }
.back {
  background: none; border: 0; color: var(--muted); font-family: var(--font);
  font-size: .95rem; cursor: pointer; font-weight: 700; padding: 10px 4px;
}
.back:hover { color: var(--ink); text-decoration: underline; }
.back[hidden] { visibility: hidden; }

.known-contact {
  background: #eef2f5; border: 1px solid #d3d9de; border-radius: 10px;
  padding: 13px 16px; font-size: .92rem; color: var(--muted); margin-bottom: 20px;
}
.known-contact strong { color: var(--ink); }
.known-contact button {
  background: none; border: 0; color: var(--blue-deep); cursor: pointer;
  font-size: .88rem; text-decoration: underline; margin-left: 6px; font-family: var(--font);
}

/* ==========================================================================
   Outcome pages
   ========================================================================== */
.outcome { background: var(--page-bg); min-height: 100vh; padding: 40px 0 60px; }
.outcome .logo { width: min(420px, 82%); margin: 0 auto 30px; }
.outcome h1 { text-align: center; font-size: clamp(1.85rem, 4.4vw, 3.1rem); margin-bottom: .8em; }
.outcome-body { max-width: 940px; margin: 0 auto; }
.outcome-body p { font-size: 1.06rem; }
/* Calendly needs real width to render its two column layout. Boxed inside the
   940px text column it collapsed to the stacked mobile view with an internal
   scrollbar, which is what looked broken. */
/* Calendly renders a white card on a white page inside its iframe. Rather than
   fight that with colour parameters, sit the whole thing on a white band so the
   surround has nothing to contrast against. */
.calendly-band { background: transparent; padding: 10px 0 4px; }
.calendly-wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 16px; }


.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 30px 0; }
.offer {
  background: var(--white); border: 1.5px solid var(--blue); border-left: 5px solid var(--blue);
  border-radius: 10px; padding: 20px 22px;
}
.offer h3 { font-size: 1.12rem; margin-bottom: .45em; }
.offer p { font-size: .96rem; margin: 0; color: #3b4149; }

.note-box {
  background: var(--white); border-left: 5px solid var(--green-deep);
  border-radius: 8px; padding: 16px 20px; font-size: .98rem;
}

footer.site { background: var(--green); color: var(--ink); padding: 34px 0 30px; font-size: .87rem; }
footer.site .wrap { max-width: 1000px; }
footer.site p { margin-bottom: .9em; line-height: 1.55; }
footer.site a { color: var(--ink); }

.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(9,9,20,.94); padding: 10px 14px; text-align: center; display: none;
}
.sticky-cta .btn { width: 100%; max-width: 440px; }

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width: 900px) {
  .herogrid { grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
  .hero-btn { width: 100%; }
  .stats-box { grid-template-columns: 1fr; gap: 34px; }
}

/* ==========================================================================
   MOBILE, deliberately different, not just narrower
   ========================================================================== */
@media (max-width: 640px) {
  body { font-size: 16.5px; }

  /* Anchor the hero photo nearer the top so the crew stays in frame instead
     of cropping to a slice of equipment, and tighten the vertical padding so
     the image has less height to fill. */
  .hero { background-position: 50% 22%; padding: 26px 0 40px; }
  .hero .logo { width: min(320px, 74%); margin-bottom: 20px; }
  section { padding: 44px 0; }
  .wrap { padding: 0 18px; }

  /* Side arrows off, single chevron above the button instead */
  .cta-arrow { display: none; }
  .cta-chevron { display: block; }
  .cta-row { flex-direction: column; gap: 0; margin: 26px 0; }
  .btn-img { width: 100%; max-width: 100%; padding: 14px 18px; }
  .btn-img .line1 { font-size: 1.12rem; }
  .btn-img .line2 { font-size: .92rem; }

  /* Testimonial becomes a rounded SQUARE card so the quote stays readable.
     Stars sit beside the avatar; quote runs full width underneath. */
  .pill {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "avatar stars" "quote quote" "cite cite";
    align-items: center;
    column-gap: 16px; row-gap: 10px;
    border-radius: 22px;
    padding: 18px 20px 20px;
    max-width: 100%;
  }
  .pill img { grid-area: avatar; width: 64px; height: 64px; }
  .pill-body { display: contents; }
  .pill .stars { grid-area: stars; font-size: 1.7rem; letter-spacing: 3px; margin: 0; align-self: center; }
  .pill blockquote { grid-area: quote; font-size: 1rem; line-height: 1.5; margin: 0; }
  .pill cite { grid-area: cite; font-size: .85rem; }

  .q-card { padding: 26px 20px; }
  .outcome { padding: 28px 0 50px; }
  .calendly-band { padding: 6px 0 2px; }
  .calendly-wrap { padding: 0 8px; }
  .awards img { max-height: 78px; }
  .cards { gap: 20px; }
  .highlight-bar { display: block; padding: 12px 16px; }
  .sticky-cta { display: block; }
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-img { animation: none; transform: none; }
  .step.active { animation: none; }
  .progress-fill { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   HERO MICRO-COMMITMENT TILES
   Question 1 lives in the hero as one-click tiles. Clicking one carries the
   answer into the qualifier, so the hero has exactly ONE call to action
   instead of a form competing with a button.
   ========================================================================== */
.tilecard {
  border: 2px solid var(--blue); border-radius: 18px;
  background: rgba(9,9,20,.42); padding: 26px 24px 22px;
  backdrop-filter: blur(2px);
}
.tilecard .q {
  color: var(--white); font-weight: 800; text-align: center;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem); line-height: 1.25; margin: 0 0 6px;
}
.tilecard .qsub {
  color: #c3ced8; text-align: center; font-size: .95rem;
  font-style: italic; margin: 0 0 20px;
}
.tiles { display: grid; gap: 11px; }
.tile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--white); border: 2px solid transparent; border-radius: 12px;
  padding: 15px 18px; font-family: var(--font); font-size: 1.03rem;
  font-weight: 700; color: var(--ink); line-height: 1.3;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.tile .chev { color: var(--blue-deep); font-weight: 900; flex: 0 0 auto; }
.tile:hover { background: var(--green); border-color: var(--ink); transform: translateX(4px); }
.tile:hover .chev { color: var(--ink); }
.tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.tilecard .reassure {
  color: #c3ced8; text-align: center; font-size: .88rem; margin: 16px 0 0;
}
.tilecard .reassure strong { color: var(--green); }

/* Trust strip directly under the hero CTA */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  margin-top: 26px; padding: 0; list-style: none;
}
.trust-strip li { color: #dbe3ea; font-size: .95rem; font-weight: 600; }
.trust-strip li::before { content: "✅"; margin-right: 7px; }

@media (max-width: 640px) {
  .tilecard { padding: 20px 16px 18px; border-radius: 14px; }
  .tile { font-size: .99rem; padding: 14px 15px; }
  .trust-strip { flex-direction: column; align-items: center; gap: 5px; }
}

/* ==========================================================================
   INLINE FIELD ERRORS
   Attached directly under the offending input with a caret pointing up at it,
   so the message sits where the mistake is - not floating at the edge of the
   screen where it gets missed.
   ========================================================================== */
.field-error {
  position: relative;
  margin-top: 14px;
  background: #fdecec;
  border: 2px solid var(--red);
  border-radius: 10px;
  padding: 15px 17px;
  color: #7d1a17;
  font-size: .97rem;
  line-height: 1.5;
  animation: errpop .22s ease;
}
.field-error::before,
.field-error::after {
  content: ""; position: absolute; left: 26px; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
}
.field-error::before { top: -13px; border-bottom: 13px solid var(--red); }
.field-error::after  { top: -10px; border-bottom: 11px solid #fdecec; }

.field-error strong { color: #5e1310; display: block; margin-bottom: 4px; font-size: 1.02rem; }
.field-error code {
  background: #fff; border: 1px solid #f0b9b7; border-radius: 4px;
  padding: 1px 6px; font-size: .93em; color: #5e1310; white-space: nowrap;
}
.field-error .escape {
  display: inline-block; margin-top: 12px; background: var(--white);
  border: 2px solid var(--red); border-radius: 8px; padding: 9px 16px;
  font-family: var(--font); font-weight: 700; font-size: .93rem;
  color: #7d1a17; cursor: pointer;
}
.field-error .escape:hover { background: var(--red); color: var(--white); }

@keyframes errpop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .field-error { animation: none; } }

.field.invalid input, .field.invalid textarea {
  border-bottom-color: var(--red) !important; border-bottom-width: 2px;
}


/* ==========================================================================
   PRIVACY POLICY
   ========================================================================== */
.policy { background: var(--page-bg); padding: 40px 0 70px; }
.policy .logo { width: min(320px, 70%); margin: 0 auto 26px; }
.policy h1 { text-align: center; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1em; }
.policy-body { max-width: 820px; margin: 0 auto; }
.policy-body h3 {
  text-transform: none; font-size: 1.25rem; margin: 2em 0 .5em;
  padding-top: .6em; border-top: 1px solid var(--line, #dce3e9);
}
.policy-body h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 1em; }
.policy-body p { font-size: 1.02rem; }
.policy-body ul { margin: 0 0 1.2em; }
.policy-body li { padding: 5px 0 5px 0; font-size: 1.02rem; }