/* ==========================================================================
   Quick Web Go — premium design system
   --------------------------------------------------------------------------
   Readable source. Do NOT hand-minify — Brotli/gzip is enabled at the server
   (see .htaccess), which makes manual minification pointless and the file
   unmaintainable. Section order matches the rendered page top-to-bottom.

   CONTENTS
     00. Self-hosted fonts       08. Comparison
     01. Tokens & reset          09. Plans
     01b. Accessibility utils    10. Growth / add-ons
     02. Layout primitives       11. Numbers
     03. Header & nav            12. FAQ
     04. Buttons                 13. Contact
     05. Hero                    14. Footer & floating WhatsApp
     06. Statement                15. Animation utilities
     07. Platform / features     16. Responsive
   ========================================================================== */


/* ==========================================================================
   00. SELF-HOSTED FONTS
   --------------------------------------------------------------------------
   Manrope + DM Mono, served from assets/fonts/ instead of Google's CDN
   (B-4.3 — this is what let .htaccess drop fonts.googleapis.com and
   fonts.gstatic.com from the CSP; see the comment above the CSP header
   there). Built by tools/build-fonts.py from the OFL-licensed source files
   vendored at tools/fonts/; re-run that script rather than hand-editing the
   .woff2 files if the subset ever needs to change.

   Manrope ships variable (wght 200-800 in the subsetted file) as a single
   @font-face, covering every weight this file uses (400/500/600/700/800)
   without shipping five static cuts. DM Mono is not variable upstream, so
   its two used weights — 400 and 500, confirmed against every `font:`
   declaration below — are two separate static files.

   Subset to Latin plus the exact non-ASCII characters the site renders
   (₹ · — → § © × … ’ › – ← plus a handful of dingbats — ✓ ✦ ◎ ↗ etc. —
   that were never actually IN Manrope/DM Mono to begin with and already
   fell back to the system sans/mono before self-hosting; subsetting
   doesn't change that). See tools/build-fonts.py CHARS for the exact list
   and how it was derived (grepped, not guessed).
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   01. TOKENS & RESET
   ========================================================================== */

:root {
  --ink: #142018;
  --muted: #667168;
  --paper: #f7f5ee;
  --white: #fff;
  --line: #deded4;
  --lime: #c7ed73;
  --lime2: #e5f8ba;
  --blue: #dbeaff;
  --sand: #f0e8d5;
  --dark: #17211a;
  --serif: Georgia, serif;
  --sans: Manrope, sans-serif;
  --mono: 'DM Mono', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3, p {
  margin-top: 0;
}


/* ==========================================================================
   01b. ACCESSIBILITY UTILITIES
   --------------------------------------------------------------------------
   Skip link, a visible keyboard-focus ring for every interactive element
   (nothing in this file drew one back on after the browser default was
   suppressed piecemeal below), and a global honouring of
   prefers-reduced-motion for the scroll reveals, counters, tilt and glow.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--dark);
  color: #fff;
  font: 700 13px var(--sans);
  border-radius: 0 0 6px 6px;
  transition: top .2s var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* The skip link's own landing target. The jump is the feedback; a ring
   around the entire page reads as a bug, not a focus indicator. */
main[tabindex='-1']:focus-visible {
  outline: none;
}

/* Same reasoning, and the same shape of bug: onboarding.js gives the current
   step's heading tabindex="-1" and focuses it on every render — including the
   first — so a screen reader announces the new step instead of leaving the
   user at the top of the document. Chrome matches :focus-visible on that
   programmatic focus, so the generic [tabindex] ring below drew a black box
   around "About you" for every visitor on page load. The step change is its
   own visual feedback; the ring only reads as a rendering fault.

   Caught by screenshotting the page, not by review. */
.ob-step h2[tabindex='-1']:focus-visible {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --ink all but disappears on the dark sections — swap to the light green
   already used for mono labels on those backgrounds. */
.growth a:focus-visible,
.growth button:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline-color: var(--lime);
}

/* The floating WhatsApp button drifts over both light and dark sections as
   the page scrolls, so no single ring colour is safe against everything
   behind it. A white ring then a dark ring is visible against either. */
.whatsapp:focus-visible {
  outline: none;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .2), 0 0 0 3px #fff, 0 0 0 6px var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Pure decoration, and the one effect a blanket transition-kill can't
     neutralise since script.js moves it with an inline transform, not CSS. */
  .cursor-glow {
    display: none;
  }
}


/* ==========================================================================
   02. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: min(1160px, calc(100% - 48px));
  margin: auto;
}

/* Scroll-progress bar pinned to the very top of the viewport. */
.progress {
  position: fixed;
  height: 3px;
  width: 0;
  top: 0;
  left: 0;
  background: var(--lime);
  z-index: 200;
}

/* Ambient cursor halo. Positioned at the viewport origin so the transform
   script.js applies (translate to pointer position, then recenter) has a
   fixed 0,0 to work from. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 237, 115, .13), transparent 68%);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
}


/* ==========================================================================
   03. HEADER & NAV
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 238, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: .3s;
}

.header.scrolled {
  border-color: var(--line);
}

.nav {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -1px;
}

.brand > span:last-child {
  color: #53912e;
}

/* Three-bar logo glyph. */
.brand-mark {
  width: 25px;
  height: 25px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: rotate(-7deg);
}

.brand-mark i {
  height: 9px;
  width: 3px;
  background: var(--ink);
  display: block;
}

.brand-mark i:nth-child(2) {
  height: 14px;
  background: #76ae38;
}

.brand-mark i:nth-child(3) {
  height: 6px;
}

nav {
  display: flex;
  gap: 25px;
  margin-left: auto;
}

nav a,
footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: .2s;
}

nav a:hover,
footer a:hover {
  color: var(--ink);
}

/* Hamburger — hidden until the 850px breakpoint. */
.menu {
  display: none;
}


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */

.button {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 19px;
  border-radius: 4px;
  font: 700 13px var(--sans);
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}

/* Bug fix: the browser's own [hidden]{display:none} lives in the low-priority
   UA stylesheet, so it loses to this file's own .button{display:inline-flex}
   at equal specificity — an author rule always beats a UA rule regardless of
   selector weight or source order. Caught via screenshot: onboarding.html's
   Back/Submit buttons (both class="button", both toggled via the `hidden`
   property in onboarding.js) were visible on every step, not just the one
   each belongs on. The compound selector outweighs the plain class. */
.button[hidden] {
  display: none;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(20, 32, 24, .12);
}

.button em {
  font-style: normal;
  font-size: 16px;
}

.button-dark {
  background: var(--dark);
  color: white;
}

.button-light {
  background: var(--lime);
  color: var(--ink);
}

.button-outline {
  background: transparent;
  border: 1px solid var(--ink);
}


/* ==========================================================================
   05. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 56px;
}

/* Decorative background blobs. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
}

.orb-one {
  width: 570px;
  height: 570px;
  background: #e5f8ba;
  right: -170px;
  top: -110px;
}

.orb-two {
  width: 240px;
  height: 240px;
  border: 45px solid #e2eed1;
  left: -100px;
  top: 370px;
}

.hero-grid {
  min-height: 540px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 40px;
}

.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: 1.4px;
  color: #4e632e; /* darkened from #5c7536 — the original failed WCAG AA
                      (~4.07:1) against the pale-green comparison/contact
                      panels; this clears 4.5:1 on every panel it sits on. */
  margin: 0 0 19px;
}

/* On the two dark sections (.statement, .growth-top) the same olive-green
   text sits near-invisible on a near-black background (~3.4:1). Swap to the
   light green already used for mono labels elsewhere on those backgrounds. */
.statement .eyebrow,
.growth-top .eyebrow {
  color: #b0c292;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #76ae38;
  border-radius: 50%;
  margin-right: 7px;
  box-shadow: 0 0 0 4px rgba(118, 174, 56, .15);
}

.hero h1 {
  font: 800 clamp(43px, 5.3vw, 73px)/1.05 var(--sans);
  letter-spacing: -4px;
  margin-bottom: 22px;
}

.hero h1 span {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -3px;
  color: #57932f;
}

.lede {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 530px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 27px;
  margin: 31px 0;
}

.text-link {
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

.text-link span {
  padding-left: 7px;
}

/* --- Social proof row ---------------------------------------------------- */

.proof {
  display: flex;
  align-items: center;
  gap: 13px;
}

.avatars {
  display: flex;
}

.avatars b {
  width: 27px;
  height: 27px;
  border: 2px solid var(--paper);
  margin-left: -7px;
  border-radius: 50%;
  background: #ddc8a0;
  color: var(--ink);
  font: 500 8px var(--mono);
  display: grid;
  place-items: center;
}

.avatars b:first-child {
  margin: 0;
  background: #a7c5d9;
}

.avatars b:nth-child(3) {
  background: #dfb8af;
}

.avatars b:last-child {
  background: var(--dark);
  color: #fff;
}

.proof p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.proof strong {
  color: var(--ink);
}

/* --- Showcase: tilted browser window with floating cards ----------------- */

.showcase {
  position: relative;
  perspective: 1000px;
  min-height: 430px;
}

.site-window {
  overflow: hidden;
  background: white;
  border: 7px solid #263127;
  border-radius: 13px;
  box-shadow: 18px 26px 0 #dce6ca, 0 33px 70px rgba(31, 44, 32, .22);
  transform: rotateY(-7deg) rotateX(3deg);
  transition: transform .3s var(--ease);
}

.window-top {
  height: 30px;
  background: #263127;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 4px;
  color: #c4d0c4;
}

.window-top span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a2a99f;
}

.window-top small {
  font: 8px var(--mono);
  margin: auto;
}

.window-top i {
  font-style: normal;
}

.site-content {
  padding: 13px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 7px;
  margin-bottom: 12px;
}

.site-nav b {
  font-size: 11px;
  letter-spacing: 1px;
}

.site-nav b span {
  color: #67a037;
}

.site-hero {
  height: 157px;
  padding: 24px;
  /* No property photo — this is the mock browser window in the hero
     showcase, standing in for "a listing photo goes here", not a real
     listing (B-4.4). An inline SVG skyline abstraction, tinted from the
     palette above, replaces what used to be an Unsplash hotlink; the dark
     gradient in front of it is unchanged and still does the contrast work
     for the white heading/button on top. */
  background: linear-gradient(90deg, rgba(20, 32, 24, .8), rgba(20, 32, 24, .2)),
              url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgMzIwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5QSIgeDE9IjAiIHkxPSIwIiB4Mj0iMC4xNSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMGU4ZDUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTVmOGJhIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjMyMCIgZmlsbD0idXJsKCNza3lBKSIvPgogIDxjaXJjbGUgY3g9IjcwMCIgY3k9IjkwIiByPSI5MCIgZmlsbD0iI2M3ZWQ3MyIgb3BhY2l0eT0iMC41NSIvPgogIDxyZWN0IHg9IjAiIHk9IjIxMCIgd2lkdGg9IjEzMCIgaGVpZ2h0PSIxMTAiIGZpbGw9IiMxNzIxMWEiIG9wYWNpdHk9IjEiLz4KICA8cmVjdCB4PSIxMTAiIHk9IjE1MCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxNzAiIGZpbGw9IiMxNDIwMTgiIG9wYWNpdHk9IjEiLz4KICA8cmVjdCB4PSIxOTUiIHk9IjIzNSIgd2lkdGg9IjE2MCIgaGVpZ2h0PSI4NSIgZmlsbD0iIzE3MjExYSIgb3BhY2l0eT0iMC45MiIvPgogIDxyZWN0IHg9IjM0MCIgeT0iMTc1IiB3aWR0aD0iOTAiIGhlaWdodD0iMTQ1IiBmaWxsPSIjMTQyMDE4IiBvcGFjaXR5PSIwLjkyIi8+CiAgPHJlY3QgeD0iNDE1IiB5PSIyNDUiIHdpZHRoPSIxNDAiIGhlaWdodD0iNzUiIGZpbGw9IiMxNzIxMWEiIG9wYWNpdHk9IjAuODUiLz4KICA8cmVjdCB4PSI1NDAiIHk9IjE5NSIgd2lkdGg9IjgwIiBoZWlnaHQ9IjEyNSIgZmlsbD0iIzE0MjAxOCIgb3BhY2l0eT0iMC44NSIvPgogIDxyZWN0IHg9IjYwNSIgeT0iMjYwIiB3aWR0aD0iMTgwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMTcyMTFhIiBvcGFjaXR5PSIwLjc4Ii8+CiAgPHJlY3QgeD0iNzcwIiB5PSIyMTAiIHdpZHRoPSIxMzAiIGhlaWdodD0iMTEwIiBmaWxsPSIjMTQyMDE4IiBvcGFjaXR5PSIwLjc4Ii8+Cjwvc3ZnPg==') center/cover;
  color: white;
}

.site-hero p {
  font: 6px var(--mono);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.site-hero h2 {
  font: 400 24px/1.06 var(--serif);
  margin: 0 0 13px;
}

.site-hero button {
  font: 7px var(--sans);
  padding: 7px 10px;
  border: 0;
  background: var(--lime);
  color: var(--ink);
}

.listing-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.listing-row article {
  flex: 1;
  font-size: 7px;
}

.listing-row p {
  margin: 5px 0 1px;
  color: #737d73;
}

.listing-row strong {
  font-size: 9px;
}

.property-image {
  height: 47px;
  background-position: center;
  background-size: cover;
}

.property-image span {
  background: white;
  padding: 3px;
  font: 5px var(--mono);
}

/* .image-a/b/c: the three listing thumbnails in the hero mockup's fake
   "site preview" — standing in for "a property photo would go here", not
   real listings. Replaced the three Unsplash hotlinks with inline SVG
   skyline abstractions in three different palette moods so the row still
   reads as three distinct photos rather than one repeated tile (B-4.4). */
.image-a {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5QiIgeDE9IjAiIHkxPSIwIiB4Mj0iMC4xNSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMGU4ZDUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTVmOGJhIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNza3lCKSIvPgogIDxjaXJjbGUgY3g9IjIyMCIgY3k9IjU1IiByPSI1NSIgZmlsbD0iI2M3ZWQ3MyIgb3BhY2l0eT0iMC41NSIvPgogIDxyZWN0IHg9IjAiIHk9IjE5MCIgd2lkdGg9IjkwIiBoZWlnaHQ9IjExMCIgZmlsbD0iIzE0MjAxOCIgb3BhY2l0eT0iMSIvPgogIDxyZWN0IHg9Ijg1IiB5PSIxNDAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIxNjAiIGZpbGw9IiMxNzIxMWEiIG9wYWNpdHk9IjEiLz4KICA8cmVjdCB4PSIxNTAiIHk9IjIwNSIgd2lkdGg9IjExMCIgaGVpZ2h0PSI5NSIgZmlsbD0iIzE0MjAxOCIgb3BhY2l0eT0iMC45Ii8+CiAgPHJlY3QgeD0iMjUwIiB5PSIxNjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxMzUiIGZpbGw9IiMxNzIxMWEiIG9wYWNpdHk9IjAuOSIvPgo8L3N2Zz4=');
}

.image-b {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5QyIgeDE9IjAiIHkxPSIwIiB4Mj0iMC4xNSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkYmVhZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjdmNWVlIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNza3lDKSIvPgogIDxjaXJjbGUgY3g9IjkwIiBjeT0iNjAiIHI9IjUwIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjU1Ii8+CiAgPHJlY3QgeD0iMCIgeT0iMjA1IiB3aWR0aD0iODAiIGhlaWdodD0iOTUiIGZpbGw9IiM2NjcxNjgiIG9wYWNpdHk9IjEiLz4KICA8cmVjdCB4PSI3MCIgeT0iMTUwIiB3aWR0aD0iOTAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMTQyMDE4IiBvcGFjaXR5PSIxIi8+CiAgPHJlY3QgeD0iMTU1IiB5PSIyMjAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI4MCIgZmlsbD0iIzY2NzE2OCIgb3BhY2l0eT0iMC44NSIvPgogIDxyZWN0IHg9IjI0NSIgeT0iMTc1IiB3aWR0aD0iNTUiIGhlaWdodD0iMTI1IiBmaWxsPSIjMTQyMDE4IiBvcGFjaXR5PSIwLjg1Ii8+Cjwvc3ZnPg==');
}

.image-c {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5RCIgeDE9IjAiIHkxPSIwIiB4Mj0iMC4xNSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlNWY4YmEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjBlOGQ1Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNza3lEKSIvPgogIDxjaXJjbGUgY3g9IjI0MCIgY3k9IjUwIiByPSI0OCIgZmlsbD0iI2M3ZWQ3MyIgb3BhY2l0eT0iMC41NSIvPgogIDxyZWN0IHg9IjAiIHk9IjIxNSIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI4NSIgZmlsbD0iIzE3MjExYSIgb3BhY2l0eT0iMSIvPgogIDxyZWN0IHg9IjkwIiB5PSIxNjAiIHdpZHRoPSI3NSIgaGVpZ2h0PSIxNDAiIGZpbGw9IiM2NjcxNjgiIG9wYWNpdHk9IjEiLz4KICA8cmVjdCB4PSIxNjAiIHk9IjIyNSIgd2lkdGg9Ijg1IiBoZWlnaHQ9Ijc1IiBmaWxsPSIjMTcyMTFhIiBvcGFjaXR5PSIwLjg4Ii8+CiAgPHJlY3QgeD0iMjQwIiB5PSIxODAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiMxNDIwMTgiIG9wYWNpdHk9IjAuODgiLz4KPC9zdmc+');
}

/* Floating overlay cards. */
.lead-card,
.metric-card {
  position: absolute;
  background: white;
  box-shadow: 0 14px 28px rgba(20, 32, 24, .14);
  border: 1px solid #e7e7df;
}

.lead-card {
  display: flex;
  align-items: center;
  gap: 10px;
  right: -37px;
  top: 70px;
  padding: 12px;
  border-radius: 8px;
  width: 190px;
}

.lead-card small,
.metric-card small {
  font: 8px var(--mono);
  letter-spacing: .7px;
  color: #74806e;
}

.lead-card strong {
  display: block;
  font-size: 11px;
}

.lead-card p {
  font-size: 8px;
  margin: 0;
  color: #738074;
}

.lead-card button {
  margin-left: auto;
  border: 0;
  background: var(--lime);
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.lead-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--lime);
  border-radius: 50%;
}

.metric-card {
  bottom: -20px;
  left: -25px;
  padding: 13px 16px;
  border-radius: 8px;
  width: 155px;
}

.metric-card strong {
  display: block;
  font-size: 21px;
  letter-spacing: -1px;
}

.metric-card strong span {
  font-size: 8px;
  color: #728072;
  letter-spacing: 0;
}

.bars {
  height: 19px;
  display: flex;
  align-items: end;
  gap: 3px;
}

.bars i {
  width: 7px;
  background: #d5e2c0;
}

.bars i:nth-child(2),
.bars i:nth-child(5) {
  height: 14px;
}

.bars i:nth-child(3),
.bars i:nth-child(6) {
  height: 18px;
  background: #73aa3d;
}

.bars i:nth-child(4) {
  height: 9px;
}

/* --- Marquee strip ------------------------------------------------------- */

.marquee {
  border-top: 1px solid var(--line);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 500 12px var(--mono);
  letter-spacing: 1px;
  color: #647060;
}

.marquee i {
  font-style: normal;
  color: #75ab3d;
}


/* ==========================================================================
   06. STATEMENT
   ========================================================================== */

.statement {
  padding: 130px 0 125px;
  background: #17211a;
  color: #f8f7f1;
}

.statement h2 {
  font: 600 clamp(30px, 4vw, 52px)/1.22 var(--sans);
  letter-spacing: -2px;
  margin: 0;
}

.statement h2 i {
  font: 400 1em var(--serif);
  color: var(--lime);
}

.statement h2 span {
  font: 400 1em var(--serif);
  font-style: italic;
  color: #b2d9ff;
}


/* ==========================================================================
   07. PLATFORM / FEATURES
   ========================================================================== */

.platform,
.plans,
.growth,
.faq {
  padding: 115px 0;
}

.section-title {
  max-width: 630px;
  margin-bottom: 53px;
}

.section-title h2,
.growth-top h2,
.faq-layout h2,
.contact h2 {
  font: 700 clamp(31px, 3.6vw, 47px)/1.12 var(--sans);
  letter-spacing: -2.5px;
  margin-bottom: 16px;
}

.section-title > p:last-child {
  color: var(--muted);
  font-size: 15px;
}

.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 12-column bento grid. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.feature {
  border-radius: 9px;
  padding: 30px;
  min-height: 280px;
  background: white;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  text-align: left;
}

.feature-large {
  grid-column: span 7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.feature:nth-child(2) {
  grid-column: span 5;
}

.feature:nth-child(3),
.feature:nth-child(4),
.feature:nth-child(5) {
  grid-column: span 4;
}

.feature-kicker,
.plan-label {
  font: 500 10px var(--mono);
  letter-spacing: 1px;
  color: #71805f;
}

.feature h3 {
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -1px;
  margin: 11px 0;
}

.feature p {
  font-size: 13px;
  color: var(--muted);
}

.feature a {
  font-size: 12px;
  font-weight: 800;
  position: absolute;
  bottom: 28px;
}

.feature a span {
  padding-left: 5px;
}

/* Feature 01 — listing visual. */
.listing-visual {
  background: #ecf3df;
  padding: 18px;
  display: grid;
  place-items: center;
}

.mini-card {
  width: 175px;
  background: white;
  padding: 8px;
  box-shadow: 8px 9px 0 #ccdcba;
  transform: rotate(3deg);
}

.mini-image {
  height: 94px;
  /* Feature 01's tilted listing card — same "photo would go here" mockup
     treatment as .image-a/b/c above, last of the five Unsplash hotlinks
     replaced (B-4.4). */
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTAgMTkwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5RSIgeDE9IjAiIHkxPSIwIiB4Mj0iMC4xNSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmN2Y1ZWUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZGJlYWZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMzUwIiBoZWlnaHQ9IjE5MCIgZmlsbD0idXJsKCNza3lFKSIvPgogIDxjaXJjbGUgY3g9IjI3NSIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI2M3ZWQ3MyIgb3BhY2l0eT0iMC41NSIvPgogIDxyZWN0IHg9IjAiIHk9IjEyMCIgd2lkdGg9IjkwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjMTQyMDE4IiBvcGFjaXR5PSIxIi8+CiAgPHJlY3QgeD0iODAiIHk9IjkwIiB3aWR0aD0iNjUiIGhlaWdodD0iMTAwIiBmaWxsPSIjMTcyMTFhIiBvcGFjaXR5PSIxIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxMzAiIHdpZHRoPSIxMDAiIGhlaWdodD0iNjAiIGZpbGw9IiM2NjcxNjgiIG9wYWNpdHk9IjAuOSIvPgogIDxyZWN0IHg9IjIzNSIgeT0iMTAwIiB3aWR0aD0iNTUiIGhlaWdodD0iOTAiIGZpbGw9IiMxNDIwMTgiIG9wYWNpdHk9IjAuOSIvPgogIDxyZWN0IHg9IjI4NSIgeT0iMTM1IiB3aWR0aD0iNjUiIGhlaWdodD0iNTUiIGZpbGw9IiMxNzIxMWEiIG9wYWNpdHk9IjAuOCIvPgo8L3N2Zz4=') center/cover;
}

.mini-card small {
  font: 7px var(--mono);
  color: #74806c;
}

.mini-card strong {
  display: block;
  font-size: 10px;
  line-height: 1.2;
}

.mini-card p {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--ink);
}

.mini-card b {
  float: right;
}

.mini-controls {
  display: flex;
  gap: 4px;
  margin-top: 13px;
}

.mini-controls i {
  width: 24px;
  height: 3px;
  background: #b5c6a0;
}

.mini-controls i:first-child {
  background: #6ca137;
}

/* Feature 02 — dark lead-flow card. */
.feature.dark {
  background: var(--dark);
  color: white;
}

.dark .feature-kicker {
  color: #b0c292;
}

.dark p {
  color: #bdc8bf;
}

.feature-symbol {
  font: 50px var(--serif);
  color: var(--lime);
  position: absolute;
  right: 30px;
  top: 17px;
}

.chat-line {
  position: absolute;
  bottom: 27px;
  left: 30px;
  right: 30px;
  background: #29372b;
  padding: 8px;
  font-size: 9px;
}

.chat-line b {
  color: var(--lime);
  padding-right: 4px;
}

/* Feature 03 — sand domain card. */
.feature.sand {
  background: var(--sand);
}

.domain-art {
  font: 26px var(--serif);
  margin: 35px 0 38px;
  position: relative;
}

.domain-art b {
  color: #6b9d34;
}

.domain-art i {
  display: block;
  height: 1px;
  width: 70%;
  background: #8b9b72;
  margin-top: 7px;
}

/* Feature 04 — blue mobile card. */
.feature.blue {
  background: var(--blue);
}

.phone-art {
  width: 60px;
  height: 105px;
  border: 5px solid var(--ink);
  border-radius: 10px;
  margin: 16px auto;
  background: #fff;
  padding: 8px;
}

.phone-art div {
  height: 50px;
  background: linear-gradient(140deg, #86b5ed, #f1e8d0);
}

/* Feature 05 — discoverability card. */
.search-art {
  height: 100px;
  padding-top: 24px;
}

.search-art span {
  font-size: 30px;
}

.search-art p {
  display: inline-block;
  background: white;
  padding: 8px;
  font-size: 9px;
  color: var(--ink);
}

.search-art i {
  font-style: normal;
  color: #60a430;
}


/* ==========================================================================
   07b. CAPABILITIES — "what you actually get"
   --------------------------------------------------------------------------
   Deliberately plainer than §07's feature cards. That section sells the
   outcome with illustration; this one is an inventory a buyer scans to
   answer "is this a real system?", so it is set as readable lists rather
   than art. Group 01 spans both columns because the admin panel is the
   claim the whole section exists to make.
   ========================================================================== */

.capabilities {
  background: var(--paper);
  padding: 110px 0;
  border-top: 1px solid var(--line);
}

.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 54px;
}

.cap-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 32px 32px;
}

/* The panel is the differentiator, so it gets the full width and the
   inverted treatment the rest of the page reserves for emphasis. */
.cap-lead {
  grid-column: span 2;
  background: var(--dark);
  border-color: var(--dark);
  color: #eef3ea;
}

/* Full width, but light — the dark treatment stays reserved for .cap-lead.
   This one spans because the claim is about the whole site rather than one
   screen of it, and because it keeps the grid from ending on an orphan. */
.cap-wide {
  grid-column: span 2;
}

.cap-kicker {
  font: 500 9px var(--mono);
  letter-spacing: 1.1px;
  color: #6d7a68;
  margin-bottom: 12px;
}

.cap-lead .cap-kicker {
  color: var(--lime);
}

.cap-group h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 18px;
}

.cap-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.cap-lead ul {
  grid-template-columns: 1fr 1fr;
  gap: 11px 34px;
}

.cap-group li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a544a;
}

.cap-lead li {
  color: #cdd8c8;
}

/* Tick drawn in CSS — decorative, so it must not reach a screen reader as
   a bullet character. ::before content is not announced by AT. */
.cap-group li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #60a430;
  border-bottom: 1.5px solid #60a430;
  transform: rotate(-45deg);
}

.cap-lead li::before {
  border-color: var(--lime);
}

.cap-group li b {
  color: var(--ink);
  font-weight: 700;
}

.cap-lead li b {
  color: #fff;
}

/* Set apart from the bullets above it, and quieter than them: this paragraph
   exists to withdraw a promise the reader may have started making on our
   behalf, so it should read as candour rather than as another selling point. */
.cap-caveat {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: #5c6858;
}

.cap-proof {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 22px 26px;
  background: var(--lime2);
  border-radius: 14px;
}

.cap-proof span {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 12px;
}

.cap-proof p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #3c4a38;
}


/* ==========================================================================
   08. COMPARISON
   ========================================================================== */

.comparison {
  background: #dbe9c7;
  padding: 110px 0;
}

.comparison-wrap {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
  align-items: center;
}

.comparison h2 {
  font: 700 clamp(35px, 4vw, 51px)/1.05 var(--sans);
  letter-spacing: -3px;
}

.comparison p:not(.eyebrow) {
  color: #52614d;
  margin-bottom: 25px;
}

.compare-list {
  border-top: 1px solid #afc89a;
}

.compare-list > div {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #afc89a;
  font-size: 13px;
}

.compare-head {
  font: 500 9px var(--mono) !important;
  letter-spacing: 1px;
  color: #52614d; /* was #61725c — 4.05:1 on this panel, below AA's 4.5:1
                      for small text. Reuses the body-text green already
                      used elsewhere on this same background. */
}

.compare-list b {
  color: #487e26;
}

.compare-list i {
  font-style: normal;
  color: #5a6458; /* was #788575 — 3.05:1 on this panel, a clear AA fail. */
}


/* ==========================================================================
   08c. VALUE — "what it would otherwise cost"
   --------------------------------------------------------------------------
   Sits on the sand tone so it reads as a distinct beat between the themes
   teaser and the price table. Deliberately NOT a cost table: see the HTML
   comment above the section for why an itemised breakdown is not shippable
   without sourced hosting/domain/developer figures.
   ========================================================================== */

.value {
  background: var(--sand);
  padding: 110px 0;
}

.value-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.value-copy h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 0 0 16px;
}

.value-copy h2 span {
  color: #487e26;
}

.value-copy > p {
  font-size: 15px;
  color: #5b5341;
  max-width: 46ch;
  margin: 0 0 30px;
}

.value-anchors {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.value-anchors > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid #ded2b6;
}

.value-anchors strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.8px;
  white-space: nowrap;
}

.value-anchors span {
  font-size: 13px;
  line-height: 1.55;
  color: #6b6350;
}

.value-list {
  background: var(--white);
  border-radius: 16px;
  padding: 32px 34px;
}

.value-list-head {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.value-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.value-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
}

/* Same CSS tick as §07b, sized for this list. Decorative: ::before content
   is not announced by assistive technology. */
.value-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid #60a430;
  border-bottom: 1.6px solid #60a430;
  transform: rotate(-45deg);
}

.value-list li b {
  font-weight: 700;
}

.value-foot {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 500 11px var(--mono);
  letter-spacing: .3px;
  color: #52614d;
}


/* ==========================================================================
   08b. THEMES (teaser)
   --------------------------------------------------------------------------
   Previews are pure-CSS mockups of the three themes. They are placeholders
   for real screenshots — see plan P5.4. Each .theme-frame is a miniature
   site: nav strip, hero band, listing row.
   ========================================================================== */

.themes {
  padding: 115px 0;
  background: var(--paper);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

.theme-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 32, 24, .1);
}

.theme-frame {
  height: 190px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 7px var(--sans);
  letter-spacing: .6px;
}

.tf-hero {
  flex: 1;
  border-radius: 3px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tf-hero small {
  font: 5px var(--mono);
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 5px;
  opacity: .75;
}

.tf-hero b {
  display: block;
  font-size: 14px;
  line-height: 1.12;
  letter-spacing: -.5px;
}

.tf-row {
  display: flex;
  gap: 5px;
}

.tf-row i {
  flex: 1;
  height: 24px;
  border-radius: 2px;
  display: block;
}

/* Theme 1 — Heritage: warm, traditional, serif. */
.theme-heritage            { background: #f4ede0; }
.theme-heritage .tf-nav    { color: #6a5b45; }
.theme-heritage .tf-hero   { background: #e2d3ba; color: #3d3324; font-family: var(--serif); }
.theme-heritage .tf-row i  { background: #ded0b4; }

/* Theme 2 — Metro: bold, urban, dark. */
.theme-metro               { background: #1b1f24; }
.theme-metro .tf-nav       { color: #dfe5ea; }
.theme-metro .tf-hero      { background: #2b3238; color: #fff; }
.theme-metro .tf-row i     { background: #333c43; }

/* Theme 3 — Clarity: light, airy, photography-led. */
.theme-clarity             { background: #fff; border-bottom: 1px solid var(--line); }
.theme-clarity .tf-nav     { color: #1d2b22; }
.theme-clarity .tf-hero    { background: #eef4e6; color: #1d2b22; }
.theme-clarity .tf-row i   { background: #e6ede0; }

.theme-meta {
  padding: 17px 19px 21px;
  border-top: 1px solid var(--line);
}

.theme-meta h3 {
  font-size: 18px;
  letter-spacing: -.6px;
  margin: 0 0 5px;
}

.theme-meta p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Reinforces D-10: selection happens after signup, not here. */
.theme-after {
  max-width: 830px;
  margin: 0 auto;
  background: #edf3e2;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-after span {
  font-size: 24px;
}

.theme-after p {
  margin: 0;
  color: #52614d;
  font-size: 12px;
}

.theme-after b {
  color: var(--ink);
}


/* ==========================================================================
   09. PLANS
   ========================================================================== */

.plans {
  background: #fff;
}

.plan-grid {
  max-width: 830px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.plan {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px;
  position: relative;
}

.plan.featured {
  border: 2px solid var(--ink);
  box-shadow: 9px 9px 0 var(--lime);
}

.most-loved {
  position: absolute;
  right: 19px;
  top: 18px;
  background: var(--lime);
  padding: 5px 8px;
  font: 500 9px var(--mono);
  letter-spacing: .7px;
}

.plan h3 {
  font-size: 28px;
  letter-spacing: -1.5px;
  margin: 8px 0;
}

.plan-intro {
  font-size: 13px;
  color: var(--muted);
  height: 36px;
}

.price {
  font: 800 47px/1 var(--sans);
  letter-spacing: -3px;
  margin: 26px 0;
}

.price sup {
  font-size: 22px;
  vertical-align: 17px;
  letter-spacing: 0;
}

.price small {
  font: 400 12px var(--sans);
  letter-spacing: 0;
  color: var(--muted);
}

.plan ul {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  height: 239px;
}

.plan li {
  font-size: 12px;
  margin: 10px 0;
  padding-left: 17px;
  position: relative;
}

.plan li:before {
  content: '✓';
  color: #5d982c;
  position: absolute;
  left: 0;
}

/* "More than 100 listings?" line — keeps the above-cap price off the page. */
.plan-more {
  max-width: 830px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.plan-more a {
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.domain-note {
  max-width: 830px;
  margin: 26px auto 0;
  background: #edf3e2;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.domain-note span {
  font-size: 24px;
}

.domain-note p {
  margin: 0;
  color: #52614d;
  font-size: 12px;
}

.domain-note b {
  color: var(--ink);
}


/* ==========================================================================
   10. GROWTH / ADD-ONS
   ========================================================================== */

.growth {
  background: #17211a;
  color: white;
}

.growth-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 50px;
}

.growth-top h2 span {
  font: 400 1em var(--serif);
  font-style: italic;
  color: var(--lime);
}

.growth-top > p {
  width: 330px;
  color: #b9c7bb;
  margin: 0;
  font-size: 13px;
}

/* 1px gap + dark bg fakes hairline dividers between cards. */
.growth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #3f4c40;
}

.growth-card {
  background: #17211a;
  color: white;
  border: 0;
  text-align: left;
  padding: 25px;
  min-height: 240px;
  cursor: pointer;
  transition: .3s;
}

.growth-card:hover,
.growth-card.active {
  background: #243124;
}

.growth-card > span {
  font: 10px var(--mono);
  color: #a4ba87;
}

.growth-card > i {
  display: block;
  font: 36px var(--serif);
  font-style: normal;
  color: var(--lime);
  margin: 25px 0;
}

.growth-card h3 {
  margin: 0;
  font-size: 19px;
}

.growth-card p {
  font-size: 12px;
  color: #bdc9be;
}

.growth-card b {
  font-size: 11px;
}

.growth-card em {
  font-style: normal;
  padding-left: 5px;
}

.growth-detail {
  margin-top: 1px;
  background: #243124;
  padding: 46px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 52px;
  align-items: center;
}

.growth-orbit {
  width: 140px;
  height: 140px;
  border: 1px solid #61725c;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--lime);
  font: 45px var(--serif);
}

.growth-orbit i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--lime);
  border-radius: 50%;
  top: -5px;
  left: 50%;
}

.growth-orbit i:nth-child(2) {
  top: 80%;
  left: 0;
  background: #adc9f5;
}

.growth-orbit i:nth-child(3) {
  top: 45%;
  left: auto;
  right: -5px;
  background: #f5d486;
}

.growth-detail h3 {
  font-size: 26px;
  letter-spacing: -1px;
  margin: 8px 0;
}

.growth-detail > div:last-child > p {
  color: #bdc9be;
  max-width: 550px;
  font-size: 13px;
}

.growth-detail ul {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.growth-detail li {
  font-size: 11px;
  color: #cfd8cf;
}

.growth-detail li:before {
  content: '✓ ';
  color: var(--lime);
}

.upgrade-note {
  display: inline-block;
  margin-top: 20px;
  font: 9px var(--mono);
  letter-spacing: .5px;
  padding: 5px 8px;
  background: #354637;
  color: #cde5af;
}


/* ==========================================================================
   11. NUMBERS
   ========================================================================== */

.numbers {
  background: var(--lime);
  padding: 55px 0;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.number-grid div {
  border-right: 1px solid #a5c96a;
  padding-left: 18px;
}

.number-grid div:first-child {
  padding-left: 0;
}

.number-grid div:last-child {
  border: 0;
}

.number-grid strong {
  display: block;
  font-size: 34px;
  letter-spacing: -2px;
}

.number-grid span {
  font: 10px var(--mono);
  letter-spacing: .5px;
}


/* ==========================================================================
   12. FAQ
   ========================================================================== */

.faq-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
}

.faq-layout > div > p:not(.eyebrow) {
  color: var(--muted);
  max-width: 370px;
}

.accordions article {
  border-top: 1px solid var(--line);
}

.accordions article:last-child {
  border-bottom: 1px solid var(--line);
}

.accordions button {
  border: 0;
  background: none;
  width: 100%;
  padding: 19px 0;
  display: flex;
  justify-content: space-between;
  font: 700 14px var(--sans);
  text-align: left;
  cursor: pointer;
}

.accordions button i {
  font-style: normal;
  font-size: 21px;
  font-weight: 400;
  transition: .3s;
}

/* Zero margin on the heading wrapper added for accordion semantics — it
   must not add visual space the design never had. */
.accordions article h3 {
  margin: 0;
}

.accordions article div {
  max-height: 0;
  overflow: hidden;
  transition: .35s var(--ease);
}

/* B-4.7: this was 130px, which clipped any answer longer than a couple of
   short lines. 600px comfortably clears every answer this FAQ has ever held
   (the longest today is ~90px) with headroom for future ones — a CSS-only
   auto-height animation (grid-template-rows: 0fr/1fr) was tried first, but
   the padding-bottom below survives that technique's overflow:hidden clip
   in real Chrome (padding is never removed by overflow), leaving a sliver
   of the answer visible even when "closed". A generous fixed cap has no
   such edge case. */
.accordions article.open div {
  max-height: 600px;
}

.accordions article.open button i {
  transform: rotate(45deg);
  color: #6da634;
}

.accordions article p {
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 20px;
  margin: 0;
}


/* ==========================================================================
   13. CONTACT
   ========================================================================== */

.contact {
  padding: 0 0 100px;
}

.contact-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  background: #e6f4c7;
  padding: 61px 70px;
}

.contact h2 {
  font-size: 43px;
}

.contact > div > p:not(.eyebrow) {
  color: #53634d;
  max-width: 430px;
}

.contact-mini {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
}

.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  align-content: start;
}

.contact label {
  font: 500 9px var(--mono);
  letter-spacing: .8px;
  color: #5b6a56;
}

.contact input,
.contact select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #9bb683;
  background: transparent;
  padding: 10px 0;
  font: 13px var(--sans);
  outline: 0;
  border-radius: 0;
}

/* The blanket outline:0 above (needed to kill the default box on an
   underline-style input) also ate the keyboard focus ring. Higher
   specificity than the generic rule in §01b so it wins regardless of
   source order. */
.contact input:focus-visible,
.contact select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.contact form button,
.form-message {
  grid-column: span 2;
}

.contact form button {
  margin-top: 13px;
}

.form-message {
  display: none !important;
  color: #468022;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
}

.form-message.show {
  display: block !important;
}

/* A failure has to read as a failure. The success green on an error message is
   the kind of thing nobody notices until an enquiry is silently lost. */
.form-message.error {
  color: #a3341f;
}

.contact label.span-2 {
  grid-column: span 2;
}

.contact label .opt {
  text-transform: none;
  letter-spacing: 0;
  opacity: .65;
}

/* Honeypot: off-screen rather than display:none, because the simpler bots skip
   anything that is not rendered — and the point is that they fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Server-side field errors, injected by script.js §09. */
.contact .field-error {
  display: block;
  margin-top: 4px;
  font: 500 10px var(--mono);
  letter-spacing: .3px;
  color: #a3341f;
  text-transform: none;
}

.contact input[aria-invalid='true'],
.contact select[aria-invalid='true'] {
  border-bottom-color: #a3341f;
}

.contact form button[disabled] {
  opacity: .55;
  cursor: progress;
}


/* ==========================================================================
   14. FOOTER & FLOATING WHATSAPP
   ========================================================================== */

footer {
  background: #17211a;
  color: #c4d1c5;
  padding: 42px 0 20px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr;
  gap: 25px;
  align-items: start;
  padding-bottom: 36px;
}

.footer-top .brand {
  color: white;
}

.footer-top p {
  font-size: 12px;
  color: #aebbad;
  margin: 0;
}

.footer-top > div:last-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.footer-bottom {
  border-top: 1px solid #354338;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font: 9px var(--mono);
  color: #849485;
}

.footer-bottom a {
  font: 9px var(--mono);
}

.whatsapp {
  position: fixed;
  bottom: 21px;
  right: 21px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1dbd5b;
  color: white;
  z-index: 20;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .2);
  transition: .25s;
}

.whatsapp:hover {
  transform: scale(1.1);
}

.whatsapp svg {
  width: 27px;
}


/* ==========================================================================
   15. ANIMATION UTILITIES
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}

.reveal.show {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 850px) {

  /* Capabilities: single column, and the lead group loses its two-up list.
     At this width a two-column tick list wraps into unreadable fragments. */
  .capabilities {
    padding: 74px 0;
  }

  .cap-grid {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .cap-lead,
  .cap-wide {
    grid-column: auto;
  }

  .cap-lead ul {
    grid-template-columns: 1fr;
  }

  .cap-group {
    padding: 26px 22px 28px;
  }

  .cap-group h3 {
    font-size: 19px;
  }

  .value {
    padding: 74px 0;
  }

  .value-wrap {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .value-list {
    padding: 26px 22px;
  }


  /* Desktop nav out, hamburger in. */
  nav,
  .nav-button {
    display: none;
  }

  .menu {
    display: grid;
    gap: 5px;
    border: 0;
    background: none;
    padding: 7px;
  }

  .menu b {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
  }

  nav.open {
    display: flex;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 20px 24px;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }

  /* Two-column layouts collapse to one. */
  .hero-grid,
  .comparison-wrap,
  .faq-layout,
  .contact-box {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero {
    padding-top: 25px;
  }

  .showcase {
    max-width: 520px;
    margin: auto;
    width: 88%;
    min-height: 350px;
  }

  .feature-large,
  .feature:nth-child(2),
  .feature:nth-child(3),
  .feature:nth-child(4),
  .feature:nth-child(5) {
    grid-column: span 6;
  }

  .growth-grid {
    grid-template-columns: 1fr 1fr;
  }

  .growth-top {
    display: block;
  }

  .growth-top > p {
    margin-top: 15px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .contact-box {
    padding: 45px;
  }

  .plan ul {
    height: auto;
  }

  .number-grid {
    grid-template-columns: 1fr 1fr;
  }

  .number-grid div:nth-child(2) {
    border: 0;
  }

  .comparison-wrap {
    gap: 40px;
  }
}

@media (max-width: 560px) {

  .shell {
    width: min(100% - 32px, 1160px);
  }

  .hero h1 {
    letter-spacing: -2.7px;
  }

  .hero-actions {
    align-items: start;
    flex-direction: column;
  }

  .marquee {
    overflow: hidden;
    gap: 25px;
    white-space: nowrap;
  }

  /* Bento grid becomes a simple stack. */
  .feature-grid {
    display: block;
  }

  .feature {
    margin-bottom: 14px;
  }

  .feature-large {
    display: block;
  }

  .listing-visual {
    margin-top: 18px;
  }

  .feature:nth-child(n) {
    min-height: 230px;
  }

  .plan-grid,
  .growth-grid,
  .theme-grid {
    grid-template-columns: 1fr;
  }

  .plans,
  .platform,
  .growth,
  .faq,
  .themes {
    padding: 75px 0;
  }

  .statement {
    padding: 80px 0;
  }

  .comparison {
    padding: 75px 0;
  }

  .compare-list > div {
    grid-template-columns: 1.45fr 1fr 1fr;
    font-size: 10px;
  }

  .compare-list > div span,
  .compare-list > div b,
  .compare-list > div i {
    overflow-wrap: anywhere;
  }

  .growth-detail {
    padding: 30px;
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .growth-detail ul {
    grid-template-columns: 1fr;
  }

  .number-grid strong {
    font-size: 27px;
  }

  .contact {
    padding-bottom: 60px;
  }

  .contact-box {
    padding: 34px 22px;
  }

  .contact h2 {
    font-size: 34px;
  }

  .contact form {
    grid-template-columns: 1fr;
  }

  .contact form button,
  .form-message {
    grid-column: span 1;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .site-window {
    transform: none;
  }

  .lead-card {
    right: -25px;
  }

  .metric-card {
    left: -12px;
  }

  .cursor-glow {
    display: none;
  }
}

/* ==========================================================================
   20. LEGAL & POLICY PAGES  (terms / privacy / refund / disclaimer /
       about / security)
   --------------------------------------------------------------------------
   A single narrow reading column. These pages are read, not scanned, so the
   measure is capped near 68ch and the type is a step larger than the
   marketing pages — a policy nobody can comfortably read is a policy nobody
   reads, which defeats the point of publishing one.
   ========================================================================== */

.legal-hero {
  padding: 128px 0 40px;
  border-bottom: 1px solid var(--line);
}

.legal-hero h1 {
  margin: 12px 0 10px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.legal-hero p {
  max-width: 62ch;
  color: var(--muted);
  font-size: 17px;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.legal-body {
  max-width: 68ch;
  margin: 0 auto;
  padding: 56px 0 96px;
  font-size: 16px;
  line-height: 1.75;
}

.legal-body h2 {
  margin: 56px 0 14px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  scroll-margin-top: 96px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  margin: 32px 0 10px;
  font-size: 17px;
  font-weight: 700;
}

.legal-body p,
.legal-body li {
  color: #2c3a31;
}

.legal-body ul {
  padding-left: 20px;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body strong {
  color: var(--ink);
}

.legal-body table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.legal-body th,
.legal-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-body th {
  font-weight: 700;
}

/* Wide tables must scroll inside themselves rather than pushing the page
   sideways on a phone. */
.legal-table-scroll {
  overflow-x: auto;
}

/* Pulled-out statement for the one line per page that carries the promise. */
.legal-key {
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  font-size: 17px;
}

.legal-key strong {
  display: block;
  margin-bottom: 6px;
  font-size: 19px;
}

/* Unfilled owner value. Deliberately loud: a placeholder that blends in is a
   placeholder that ships. */
.pending {
  padding: 1px 7px;
  border-radius: 5px;
  background: #ffe9a8;
  color: #6b4f00;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

/* Draft banner. Removed — with the .draft-note block — at publication. */
.draft-note {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px dashed #c9a227;
  border-radius: 14px;
  background: #fffbeb;
  color: #6b4f00;
  font-size: 14px;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.legal-nav a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: all .2s var(--ease);
}

.legal-nav a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.legal-nav a[aria-current='page'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* ==========================================================================
   21. UPI PAYMENT PANEL  (pay.html)
   ========================================================================== */

.pay-grid {
  display: grid;
  gap: 24px;
  margin: 36px 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pay-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}

.pay-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
}

.pay-amount {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.pay-amount span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.pay-vpa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 15px;
  word-break: break-all;
}

.pay-copy {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  font: 600 12px var(--sans);
  white-space: nowrap;
}

.pay-copy:hover {
  border-color: var(--ink);
}

.pay-qr {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

/* Same bug as .button[hidden] above (§04): .pay-qr's own display:block beat
   the UA [hidden] rule, so the broken-image icon showed up overlapping the
   "QR code not yet added" fallback below it whenever no QR was configured —
   confirmed by screenshot before this fix. */
.pay-qr[hidden] {
  display: none;
}

/* Shown until a real QR image is supplied. */
.pay-qr-missing {
  display: grid;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 1;
  place-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* Same [hidden] cascade issue as .button and .pay-qr above — this one
   hasn't shown up yet only because a real QR image has never been
   configured; it fires the moment script.js sets qrMissing.hidden = true. */
.pay-qr-missing[hidden] {
  display: none;
}

.pay-steps {
  counter-reset: step;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.pay-steps li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 44px;
}

.pay-steps li::before {
  position: absolute;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--lime);
  content: counter(step);
  counter-increment: step;
  font: 700 13px var(--sans);
  place-content: center;
}

@media (max-width: 720px) {
  .legal-hero {
    padding: 104px 0 32px;
  }

  .legal-body {
    padding: 40px 0 72px;
    font-size: 15px;
  }
}

/* ==========================================================================
   22. BROKER ONBOARDING  (onboarding.html)
   --------------------------------------------------------------------------
   A five-step form. Split into steps because the single-page version is ~25
   fields, and a broker who opens that on a phone closes it again. Progress is
   saved to localStorage on every change so a half-finished form survives a
   closed tab — onboarding happens between viewings, not at a desk.
   ========================================================================== */

.ob-progress {
  display: flex;
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.ob-progress li {
  flex: 1;
  padding-top: 10px;
  border-top: 3px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: all .3s var(--ease);
}

.ob-progress li[data-state='done'] {
  border-color: var(--ink);
  color: var(--ink);
}

.ob-progress li[data-state='current'] {
  border-color: var(--lime);
  color: var(--ink);
}

.ob-step {
  display: none;
}

.ob-step[data-active] {
  display: block;
  animation: ob-in .35s var(--ease) both;
}

@keyframes ob-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ob-step h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.ob-step > p {
  max-width: 60ch;
  margin: 0 0 28px;
  color: var(--muted);
}

.ob-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ob-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-field.ob-wide {
  grid-column: 1 / -1;
}

.ob-field label {
  font-size: 13px;
  font-weight: 700;
}

.ob-field label span {
  color: var(--muted);
  font-weight: 500;
}

.ob-field input,
.ob-field select,
.ob-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: 15px var(--sans);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.ob-field textarea {
  min-height: 110px;
  resize: vertical;
}

.ob-field input:focus,
.ob-field select:focus,
.ob-field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(199, 237, 115, .55);
  outline: none;
}

.ob-field input[aria-invalid='true'],
.ob-field select[aria-invalid='true'],
.ob-field textarea[aria-invalid='true'] {
  border-color: #b3261e;
}

.ob-hint {
  color: var(--muted);
  font-size: 12px;
}

.ob-error {
  display: none;
  color: #b3261e;
  font-size: 12px;
  font-weight: 600;
}

.ob-error.show {
  display: block;
}

/* Card-style radio group — plans and themes. */
.ob-choices {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ob-choice {
  position: relative;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  transition: all .2s var(--ease);
}

.ob-choice:hover {
  border-color: var(--ink);
}

.ob-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ob-choice strong {
  display: block;
  font-size: 16px;
}

.ob-choice em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.ob-choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--lime2);
  box-shadow: 0 0 0 1px var(--ink);
}

/* Keyboard users get a ring even where :has() styles the checked state. */
.ob-choice:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(199, 237, 115, .8);
}

.ob-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
  font-size: 14px;
}

.ob-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #53912e;
  flex-shrink: 0;
}

.ob-file {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--white);
  text-align: center;
}

.ob-file input {
  width: 100%;
  font-size: 13px;
}

.ob-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.ob-nav .ob-spacer {
  flex: 1;
}

.ob-saved {
  color: var(--muted);
  font-size: 12px;
}

.ob-done {
  display: none;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  text-align: center;
}

.ob-done.show {
  display: block;
}

.ob-ref {
  display: inline-block;
  margin: 14px 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lime2);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
}

.ob-alert {
  display: none;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid #f0c2be;
  border-radius: 12px;
  background: #fdecea;
  color: #7d1810;
  font-size: 14px;
}

.ob-alert.show {
  display: block;
}

@media (max-width: 720px) {
  .ob-progress li {
    font-size: 0;
    padding-top: 6px;
  }
}