/* Page styles for Stephens County Limestone. Loads after styles.css (design-system tokens). */
:root {
  --space-5: 17px;
  --space-7: 23.8px;
  --space-9: 40.8px;
  --color-accent: #FFC300;
  --color-accent-100: #fff8e0;
  --color-accent-200: #ffedb3;
  --color-accent-300: #ffe285;
  --color-accent-400: #ffd657;
  --color-accent-500: #ffcb2e;
  --color-accent-600: #e6af00;
  --color-accent-700: #b38900;
  --color-accent-800: #806300;
  --color-accent-900: #4d3c00;
  --color-accent-2: #FFC300;
  --color-accent-2-100: #fff8e0;
  --color-accent-2-200: #ffedb3;
  --color-accent-2-300: #ffe285;
  --color-accent-2-400: #ffd657;
  --color-accent-2-500: #ffcb2e;
  --color-accent-2-600: #e6af00;
  --color-accent-2-700: #b38900;
  --color-accent-2-800: #806300;
  --color-accent-2-900: #4d3c00;
}

body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }
.page { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }
.section { padding: var(--space-9) var(--space-6); max-width: 1280px; margin: 0 auto; }
.kicker { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; color: var(--color-accent-700); }
.h2 { font-family: var(--font-heading); font-size: 42px; font-weight: 600; color: var(--color-text); margin: var(--space-2) 0 var(--space-4); }
.lede { font-size: 20px; color: var(--color-neutral-800); width: 620px; max-width: 100%; margin: 0 auto; text-align: center; }
.prose { font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); }
.btn-primary { color: #1d1f20 !important; }
.btn { transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; }
.btn:hover { transform: translateY(-2px); }

/* Nav */
.nav { position: relative; z-index: 5; justify-content: center; box-shadow: 0 1px 8px rgba(29,31,32,0.08); }
.nav-inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.nav a { position: relative; color: var(--color-text); text-decoration: none; font-weight: 500; }
.nav a.btn { margin-left: var(--space-4); }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 260ms cubic-bezier(.22,.61,.36,1); }
.nav a:not(.btn):hover { color: var(--color-text); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

/* Hero */
.hero { position: relative; height: 560px; overflow: hidden; background: #1d1f20; }
.hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-shade { position: absolute; inset: 0; background: rgba(10,11,12,0.62); pointer-events: none; }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--space-6); pointer-events: none; }
.hero-title { font-family: var(--font-heading); font-size: 24px; font-weight: 600; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; margin: var(--space-4) 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: 28px; pointer-events: auto; }
.hero-actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.7); }
.hero-actions .btn-secondary:hover { color: #fff; }

/* Motion (only when the visitor has not asked for reduced motion: html.anim) */
@keyframes scl-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes scl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scl-failsafe { to { opacity: 0; visibility: hidden; } }
.reveal.in .stagger > * { animation: scl-rise 640ms cubic-bezier(.22,.61,.36,1) both; }
.anim .stagger > * { opacity: 0; }
.reveal.in .stagger > *:nth-child(1) { animation-delay: 60ms; }
.reveal.in .stagger > *:nth-child(2) { animation-delay: 150ms; }
.reveal.in .stagger > *:nth-child(3) { animation-delay: 240ms; }
.reveal.in .stagger > *:nth-child(4) { animation-delay: 330ms; }
.reveal.in .stagger > *:nth-child(5) { animation-delay: 420ms; }

/* Smooth scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Preloader: yellow curtain, mark draws, curtain lifts */
.preloader { display: none; }
.anim .preloader { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; background: #FFC300; clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(.76,0,.24,1); animation: scl-failsafe 10ms 5s forwards; }
.anim .preloader path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: scl-draw 1000ms cubic-bezier(.65,0,.35,1) 150ms forwards; }
.anim .preloader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }

/* Hero intro (starts when the curtain lifts: html.ready) */
.anim .hero-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim.ready .hero-mark path { animation: scl-draw 1600ms cubic-bezier(.65,0,.35,1) 200ms forwards; }
.anim .hero-actions, .anim .nav { opacity: 0; transform: translateY(14px); }
.anim.ready .hero-actions { opacity: 1; transform: none; transition: opacity 800ms ease 1500ms, transform 800ms cubic-bezier(.22,.61,.36,1) 1500ms; }
.anim.ready .nav { opacity: 1; transform: none; transition: opacity 800ms ease 300ms, transform 800ms cubic-bezier(.22,.61,.36,1) 300ms; }
.hero video, .hero-content { will-change: transform; }

/* Split text: words are inline-blocks, characters/lines slide up out of a mask */
.anim [data-split]:not(.split-done) { visibility: hidden; }
.sw { display: inline-block; white-space: nowrap; }
.cm { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.ch { display: inline-block; transform: translateY(115%); transition: transform 900ms cubic-bezier(.22,.61,.36,1); }
.in > .sw .ch { transform: none; }
.lm { display: block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ln { display: block; transform: translateY(110%); opacity: 0; transition: transform 1000ms cubic-bezier(.22,.61,.36,1), opacity 700ms ease; }
.in > .lm .ln { transform: none; opacity: 1; }
[data-split] { text-wrap: balance; }
p[data-split] { text-wrap: pretty; }

/* Image curtain: yellow panel wipes away while the photo settles */
.anim .rv-img::after { display: block !important; content: "" !important; position: absolute; inset: 0; z-index: 2; background: #FFC300; transform-origin: top; transition: transform 1100ms cubic-bezier(.76,0,.24,1) var(--d, 0ms); pointer-events: none; }
.anim .rv-img img { transform: scale(1.2); transition: transform 1600ms cubic-bezier(.22,.61,.36,1) var(--d, 0ms); }
.anim .rv-img.in::after { transform: scaleY(0); }
.anim .rv-img.in img { transform: scale(1); }
.anim .rv-img.in:hover img { transform: scale(1.06); transition-duration: 420ms; }

/* Section curtains: clip-path expands as you scroll (set from script.js) */
.clip-scrub { will-change: clip-path; }

/* Materials */
.grid-materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); align-items: stretch; }
.grid-materials > .card { display: flex; box-shadow: 0 2px 10px rgba(29,31,32,0.10), 0 8px 24px rgba(29,31,32,0.06); }
.card.blueprint { transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms ease; }
.grid-materials .card.blueprint:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(29,31,32,0.16), 0 20px 48px rgba(29,31,32,0.10); }
.blueprint > .corner { transition: transform 320ms cubic-bezier(.22,.61,.36,1); }
.grid-materials .card.blueprint:hover > .corner.tl { transform: translate(-3px,-3px); }
.grid-materials .card.blueprint:hover > .corner.tr { transform: translate(3px,-3px); }
.grid-materials .card.blueprint:hover > .corner.bl { transform: translate(-3px,3px); }
.grid-materials .card.blueprint:hover > .corner.br { transform: translate(3px,3px); }
.mat-inner { display: flex; flex-direction: column; flex: 1; padding: var(--space-4); }
.mat-icon { margin-bottom: var(--space-3); color: var(--color-accent-700); }
.mat-inner .card-body { flex: 1; }
.mat-inner .tag { align-self: flex-start; margin-top: var(--space-3); color: var(--color-accent-800); border-color: var(--color-accent-700); }

/* Calculator */
.calc-card { position: relative; box-shadow: 0 6px 28px rgba(29,31,32,0.14); }
.calc-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-7); padding: var(--space-6); }
.calc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-content: start; }
.calc-fields .wide { grid-column: 1 / -1; }
.calc-result { background: #FFC300; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); text-align: center; }
.calc-result .kicker { color: #5c4700; }
.calc-num { font-family: var(--font-heading); font-size: 60px; line-height: 1; font-weight: 600; color: #1d1f20; margin: var(--space-3) 0 var(--space-1); }
.calc-unit { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; color: #4a3b00; }
.calc-cy { margin-top: var(--space-4); font-size: 14px; color: #4a3b00; }
.calc-note { border-top: 1px solid var(--color-neutral-300); padding: var(--space-3) var(--space-6); font-size: 13px; color: var(--color-neutral-700); }

/* Photos */
.duotone { overflow: hidden; position: relative; border: 1px solid var(--color-neutral-300); box-shadow: 0 4px 16px rgba(29,31,32,0.12); }
.duotone::after { display: none !important; content: none !important; }
.duotone img { width: 100%; height: 220px; object-fit: cover; transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
.duotone:hover img { transform: scale(1.06); }
.about-photo { box-shadow: 0 6px 24px rgba(29,31,32,0.14); }
.about-photo img { height: 420px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.grid-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* Location */
.location { background: #FFC300; color: #1d1f20; max-width: none; margin: var(--space-9) 0 0; }
.location-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.location-box { background: #fff; padding: var(--space-7); box-shadow: 0 10px 34px rgba(29,31,32,0.20); }
.location-box .kicker { color: #5c4700; }
.location-box .h2 { color: #1d1f20; }
.loc-list { display: flex; flex-direction: column; gap: var(--space-4); font-size: 17px; }
.loc-list b { display: block; font-weight: 600; margin-bottom: 4px; }
.loc-list span { color: #4a3b00; }
.loc-list a { color: #1d1f20; font-size: 20px; font-weight: 600; }
.loc-tag { color: #1d1f20 !important; border-color: #1d1f20 !important; margin-top: var(--space-2); }
.map-frame { position: relative; border: 1px solid rgba(0,0,0,0.35); min-height: 320px; display: flex; }
.map-frame .corner { border-color: #1d1f20; }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(0.35) contrast(0.95); }

/* Quote form */
.quote-card { position: relative; box-shadow: 0 6px 28px rgba(29,31,32,0.14); }
.quote-form { padding: var(--space-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.quote-form .span2 { grid-column: span 2; }
.quote-form .full { grid-column: 1 / -1; }
.quote-form .submit-row { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.quote-form .submit-row .btn { min-width: 260px; }
.form-error { color: #9b1c1c; font-size: 14px; text-align: center; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-done { padding: var(--space-6); text-align: center; }
.quote-done svg { color: var(--color-accent-700); margin: 0 auto var(--space-3); }
[hidden] { display: none !important; }

/* Footer */
.footer { background: var(--color-neutral-900); color: #fff; padding: var(--space-6); text-align: center; }
.footer .name { font-family: var(--font-heading); font-size: 20px; margin-bottom: var(--space-2); }
.footer .info { color: var(--color-neutral-300); margin-bottom: var(--space-2); }
.footer .info a { color: inherit; text-decoration: none; }
.footer .info > * + *::before { content: "·"; margin: 0 0.7em; }
.footer .legal { color: var(--color-neutral-400); font-size: 14px; }

/* Responsive */
@media (max-width: 1100px) { .grid-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .about-grid, .location-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .h2 { font-size: 34px; }
  .nav-inner { gap: var(--space-5); }
  .quote-form { grid-template-columns: 1fr; }
  .quote-form .span2 { grid-column: auto; }
  .calc-fields { grid-template-columns: 1fr; }
  .about-photo img { height: 300px; }
}
@media (max-width: 600px) { .grid-gallery { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .duotone:hover img, .card.blueprint:hover, .btn:hover, .blueprint > .corner { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Desktop: hide mobile-only pieces ===== */
.m-head, .m-menu, .footer-links, .to-top, .hero-sub { display: none; }
.loc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.loc-actions .btn { padding: 10px 20px; font-size: 15px; }
.loc-actions .btn-secondary { color: #1d1f20; border-color: #1d1f20; }
.loc-actions .btn-secondary:hover { color: #1d1f20; }

/* ===== Phone layout: one column, big condensed headings, sticky header + full-screen menu ===== */
@media (max-width: 700px) {
  .nav { display: none; }
  html { scroll-padding-top: 64px; }

  /* Sticky header: logo, pill CTA, hamburger */
  .m-head { display: flex; position: sticky; top: 0; z-index: 60; height: 64px; align-items: center; gap: 10px; padding: 0 16px; background: #1d1f20; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .m-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
  .m-brand:hover { color: #fff; }
  .m-brand svg { flex: none; }
  .m-brand span { display: block; }
  .m-cta { flex: none; background: #FFC300; color: #1d1f20; text-decoration: none; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 999px; white-space: nowrap; }
  .m-cta:hover { color: #1d1f20; background: var(--color-accent-500); }
  .m-burger { flex: none; width: 40px; height: 40px; position: relative; background: none; border: 0; cursor: pointer; padding: 0; }
  .m-burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: #fff; transition: transform 300ms cubic-bezier(.22,.61,.36,1), top 300ms; }
  .m-burger span:nth-child(1) { top: 15px; }
  .m-burger span:nth-child(2) { top: 23px; }
  .menu-open .m-burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .menu-open .m-burger span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

  .m-menu { display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0; z-index: 55; padding: 88px 20px 28px; background: #1d1f20; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 600ms cubic-bezier(.76,0,.24,1), visibility 0s 600ms; }
  html.menu-open { overflow: hidden; }
  .menu-open .m-menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
  .m-menu nav a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.12); color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 52px; line-height: 1; text-transform: uppercase; }
  .m-menu nav a::after { content: "→"; font-family: var(--font-body); font-size: 28px; color: #FFC300; }
  .m-menu nav a:last-child { color: #FFC300; }
  .m-menu-foot { margin-top: 28px; color: rgba(255,255,255,0.7); font-size: 15px; }
  .m-menu-foot p { margin: 10px 0 0; }
  .m-phone { color: #fff; font-size: 26px; font-weight: 600; text-decoration: none; }
  .m-phone:hover { color: #FFC300; }

  /* Hero: video fills the screen behind the headline, text anchored at the bottom */
  .hero { height: calc(100svh - 64px); min-height: 560px; max-height: 760px; display: block; background: #101010; clip-path: none !important; }
  .hero video { position: absolute; inset: 0; width: 100%; height: 100%; transform: none !important; }
  .hero-shade { display: block; background: linear-gradient(to top, rgba(10,11,12,0.88) 0%, rgba(10,11,12,0.55) 55%, rgba(10,11,12,0.45) 100%); }
  .hero-content { position: absolute; inset: 0; justify-content: flex-end; align-items: flex-start; text-align: left; padding: 0 20px 32px; pointer-events: auto; transform: none !important; opacity: 1 !important; }
  .hero-mark { width: 56px; height: 56px; }
  .hero-title { font-size: 64px; line-height: 0.92; letter-spacing: 0; margin: 18px 0 0; }
  .hero-sub { display: block; margin: 14px 0 0; color: rgba(255,255,255,0.85); font-size: 17px; line-height: 1.4; max-width: 28ch; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; margin-top: 22px; gap: 10px; }
  .hero-actions .btn { padding: 15px 20px; font-size: 17px; border-radius: 999px; }

  /* Rhythm + headings */
  .section { padding: 56px 20px; }
  .section.intro-sec { text-align: left !important; padding-top: 44px; padding-bottom: 8px; }
  .kicker { font-size: 13px; letter-spacing: 0.14em; color: var(--color-neutral-700); }
  .h2 { font-size: 46px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 18px; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .lede { width: auto; margin: 0; text-align: left; font-size: 18px; }
  .sec-head { text-align: left !important; }
  .sec-head p { margin: 0 0 24px !important; width: auto !important; }
  .prose { font-size: 17px; }
  .btn { border-radius: 999px; }

  /* Materials: stacked rows with the icon at left */
  .grid-materials { grid-template-columns: 1fr; gap: 12px; }
  .mat-inner { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px 16px; }
  .mat-icon { grid-row: 1 / span 3; margin: 2px 0 0; }
  .mat-inner .tag { margin-top: 12px; }
  .card-title { font-size: 20px; }
  .card-body { font-size: 15px; }

  /* Calculator */
  .calc-grid { padding: 16px; gap: 16px; }
  .calc-fields { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .input { font-size: 16px; min-height: 46px; }
  .field > label { font-size: 13px; }
  .calc-num { font-size: 72px; }
  .calc-note { padding: 12px 16px; }

  /* About + gallery: swipeable rail */
  .about-photo img { height: 300px; }
  .grid-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: -8px -20px 0; padding: 8px 20px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .grid-gallery::-webkit-scrollbar { display: none; }
  .grid-gallery > * { flex: 0 0 82%; scroll-snap-align: center; }
  .grid-gallery .duotone img { height: 300px; }

  /* Location + map */
  .location.section { padding: 40px 16px; }
  .location-box { padding: 22px 20px; }
  .loc-actions { flex-direction: column; }
  .loc-actions .btn { width: 100%; padding: 15px 20px; font-size: 17px; }
  .map-frame, .map-frame iframe { min-height: 300px; }

  /* Quote form */
  .quote-form { gap: 14px; padding: 18px 16px; }
  .quote-form .submit-row .btn { width: 100%; min-width: 0; padding: 16px 20px; font-size: 18px; }

  /* Footer: left aligned with link list */
  .footer { text-align: left; padding: 40px 20px 96px; }
  .footer .name { font-size: 28px; text-transform: uppercase; margin-bottom: 20px; }
  .footer-links { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
  .footer-links a { color: #fff; text-decoration: none; font-size: 20px; padding: 6px 0; }
  .footer .info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
  .footer .info > * + *::before { display: none; }
  .footer .info a { color: #FFC300; font-size: 20px; font-weight: 600; }

  /* Back to top */
  .to-top { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #1d1f20; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.3); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 250ms, transform 250ms; }
  .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
}

/* ===== Pay My Bill ===== */
.pay-lede { margin: 0 0 var(--space-6); text-align: left; width: 640px; }
.pay-card { position: relative; max-width: 640px; box-shadow: 0 6px 28px rgba(29,31,32,0.14); }
.pay-body { padding: var(--space-6); }
.pay-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pay-form .form-error, .pay-form .btn { grid-column: 1 / -1; }
.pay-form .btn { justify-self: start; min-width: 220px; }
.pay-note, .pay-result { margin: 0; font-size: 17px; color: var(--color-neutral-800); }
.pay-result b { color: var(--color-text); }
.pay-result.ok { border-left: 4px solid #2f7d32; padding-left: var(--space-4); }
.pay-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--color-neutral-300); font-size: 16px; }
.pay-row span { color: var(--color-neutral-700); }
.pay-total { border-bottom: 0; font-size: 22px; padding: 14px 0 18px; }
.pay-total b { font-family: var(--font-heading); font-size: 36px; line-height: 1; }
.pay-small { margin: var(--space-3) 0 0; font-size: 13px; color: var(--color-neutral-700); }
.pay-link { background: none; border: 0; padding: 0; margin-top: var(--space-3); font: inherit; font-size: 14px; color: var(--color-accent-700); text-decoration: underline; cursor: pointer; }
@media (max-width: 700px) {
  .pay-lede { width: auto; }
  .pay-form { grid-template-columns: 1fr; }
  .pay-form .btn, .pay-found .btn { width: 100%; min-width: 0; padding: 16px 20px; font-size: 18px; }
  .pay-body { padding: 18px 16px; }
  .pay-row { font-size: 15px; }
}

/* ===== Site notice, FAQ, legal pages ===== */
.site-notice { background: #1d1f20; color: #FFC300; text-align: center; padding: 10px 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; position: relative; z-index: 70; }
.site-notice::before { content: ""; }
.faq-list { max-width: 820px; border-top: 1px solid var(--color-neutral-300); }
.faq-list details { border-bottom: 1px solid var(--color-neutral-300); }
.faq-list summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-family: var(--font-heading); font-size: 22px; font-weight: 600; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 28px; color: var(--color-accent-700); transition: transform 240ms; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); max-width: 70ch; }
.legal-page { min-height: 100vh; display: flex; flex-direction: column; }
.legal-head { padding: 16px 20px; background: #1d1f20; }
.legal-back { color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.legal-back:hover { color: #FFC300; }
.legal-body { flex: 1; width: 100%; max-width: 820px; }
.legal-body h2 { font-family: var(--font-heading); font-size: 26px; margin: 32px 0 8px; }
.legal-body p, .legal-body li { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); }
.legal-body li { margin-bottom: 8px; }
.legal-date { color: var(--color-neutral-700); font-size: 14px; margin-bottom: 20px; }
.footer .legal a { color: inherit; }
@media (max-width: 700px) {
  .site-notice { font-size: 14px; padding: 10px 14px; }
  .faq-list summary { font-size: 20px; }
}