/* ========================================================================
   Marketing site — for-hotels.html
   An independent design system from styles.css: different palette (indigo /
   coral vs. wood / forest / gold), different shapes (rounded-rect vs.
   pill/squircle), different motifs (mockup windows + data bars vs. mountain
   photography). Nothing here is shared with or inherited from styles.css.

   Type is the one deliberate exception: this page used to run a geometric,
   "techy" display face (Space Grotesk) to read as software rather than a
   lodge — but the audience is hotel/restaurant/independent-business owners
   deciding whether to trust this with their livelihood, not developers.
   Fraunces (the same warm serif the guest site itself uses for headings)
   reads as human and trustworthy instead of like a dev-tool landing page,
   and it means a prospective client's first impression of the typography
   already matches what their own site will look like. ---------------- */

:root {
  --ds-ink: #14151f;
  --ds-ink-soft: #5c5e72;
  --ds-paper: #ffffff;
  --ds-paper-alt: #f4f4fa;
  --ds-line: #e3e3ee;

  --ds-indigo: #4f46e5;
  --ds-indigo-700: #3730a3;
  --ds-indigo-900: #1e1b4b;
  --ds-indigo-100: #eeedfc;

  /* #ff5a46 (the original coral) only hits ~3.1:1 against white text — fails
     WCAG AA's 4.5:1 for this size. Darkened to #d33f2d (~4.65:1) so every
     white-on-coral surface (buttons, chips, the split-bar segment) is
     compliant without a per-component override. */
  --ds-coral: #d33f2d;
  --ds-coral-700: #a93224;
  --ds-coral-100: #ffe6e1;

  --ds-lime: #c8f13f;
  --ds-lime-ink: #2c3a0a;
  --ds-star: #f5a623;

  /* Amber, text/icon-safe against white (~5:1) — the third accent for the
     consolidated benefits block below, alongside indigo and coral. */
  --ds-gold: #b45309;
  --ds-gold-100: #fef3c7;

  --ds-success: #16a34a;
  --ds-success-100: #dcfce7;
  --ds-danger: #dc2626;
  --ds-danger-100: #fee2e2;

  --ds-radius-sm: 8px;
  --ds-radius: 14px;
  --ds-radius-lg: 22px;

  --ds-shadow: 0 8px 24px rgba(20, 21, 31, 0.08);
  --ds-shadow-lg: 0 24px 64px rgba(20, 21, 31, 0.18);

  --ds-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ds-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --ds-wrap: 1180px;
}

body.fh { margin: 0; font-family: var(--ds-font-body); color: var(--ink, var(--ds-ink)); }
.fh, .fh * { box-sizing: border-box; }
.fh img { max-width: 100%; display: block; }
/* :not() exclusions matter — without them this beats .ds-btn-coral/.ds-inline-link
   on specificity (class+element > class alone) and silently blanks their color. */
.fh a { text-decoration: none; }
.fh a:not(.ds-btn):not(.ds-inline-link) { color: inherit; }
/* :not([class]) matters here too — .ds-check-list/.ds-x-list set their own
   margin, and a bare ".fh ul" would out-specificity that class alone and
   silently zero it back out, same trap as the ":not([class])" p rule below. */
.fh ul:not([class]) { list-style: none; margin: 0; padding: 0; }
.fh ul[class] { list-style: none; padding: 0; }
.fh h1, .fh h2, .fh h3, .fh h4 { font-family: var(--ds-font-display); font-weight: 600; line-height: 1.15; color: var(--ds-ink); margin: 0; }
/* :not([class]) matters — every styled paragraph in this system (hero-sub,
   splitbar-caption, source, pricing-note, ...) sets its own margin via its
   component class, and a bare ".fh p" would out-specificity that class alone
   (element+class beats class alone) and silently zero it back out. */
.fh p:not([class]) { margin: 0; }
.fh :focus-visible { outline: 2.5px solid var(--ds-indigo); outline-offset: 2px; }

.fh { background: var(--ds-paper); color: var(--ds-ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.ds-wrap { width: 100%; max-width: var(--ds-wrap); margin: 0 auto; padding: 0 24px; }
.ds-section { padding: 96px 0; }
.ds-section-alt { background: var(--ds-paper-alt); }
/* These three (How it works / Pricing / Bundle & save) sit back-to-back
   with nothing to tell them apart — color does that instead of a divider
   line: How it works tints its whole section, Bundle & save gets its own
   panel below (see .ds-bundle-panel), and Pricing's own icon picks up gold
   even though its section stays white (too many price cards to tint the
   whole thing without clashing with the two green "free" cards). */
.ds-section-indigo { background: var(--ds-indigo-100); }
.ds-section-head { max-width: 640px; margin-bottom: 44px; }
/* Section kicker: same icon-left/label-right layout as the benefits block
   above, but a single neutral tile (no per-section accent colors, no card
   restyling) reusing the site's existing default icon-tile treatment. */
.ds-section-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ds-section-kicker-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ds-coral-100); color: var(--ds-coral-700); }
.ds-section-kicker-icon svg { width: 22px; height: 22px; }
.ds-section-kicker-icon.is-indigo { background: var(--ds-indigo); color: #fff; }
.ds-section-kicker-icon.is-gold { background: var(--ds-gold); color: #fff; }
.ds-section-kicker-icon.is-coral { background: var(--ds-coral); color: #fff; }
.ds-section-kicker .ds-eyebrow { margin-bottom: 0; }
.ds-section-kicker .ds-eyebrow::before { content: none; }
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ds-font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-indigo);
  margin-bottom: 14px;
}
.ds-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--ds-coral); flex: none; }
.ds-section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 12px; letter-spacing: -0.01em; }
.ds-section-head p { color: var(--ds-ink-soft); font-size: 1.05rem; max-width: 560px; }

/* ---- Buttons: rounded-rect, not pill — deliberately distinct from the
   guest site's fully-round buttons ---- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ds-font-body); font-weight: 600; font-size: 0.98rem;
  padding: 13px 22px; border-radius: var(--ds-radius-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn-lg { padding: 15px 26px; font-size: 1.02rem; }
.ds-btn-block { width: 100%; }
.ds-btn-coral { background: var(--ds-coral); color: #fff; box-shadow: var(--ds-shadow); }
.ds-btn-coral:hover { background: var(--ds-coral-700); }
.ds-btn-ink { background: var(--ds-ink); color: #fff; }
.ds-btn-ink:hover { background: #000; }
.ds-btn-outline { background: transparent; color: var(--ds-ink); border-color: var(--ds-line); }
.ds-btn-outline:hover { border-color: var(--ds-ink); }
.ds-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.ds-btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.ds-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---- Header: solid white, sticky, no scroll-triggered transparency —
   the guest site's header floats over a photo; this one never does. The
   animated color layer lives in the hero below instead. ---- */
.ds-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ds-line); }
/* padding-top/bottom only (not the shorthand) — .ds-nav shares .ds-wrap on
   the same element, and a shorthand `padding` here would silently zero out
   .ds-wrap's horizontal 24px inset since both set the same property at
   equal specificity and this rule comes later in the cascade. That bug is
   exactly why the header used to sit flush to the edge while every other
   section's content kept its 24px margin. */
.ds-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.ds-brand { display: flex; align-items: center; gap: 10px; }
.ds-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ds-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.ds-brand-mark svg { width: 18px; height: 18px; }
.ds-brand-name { font-family: var(--ds-font-display); font-weight: 700; font-size: 1.1rem; color: var(--ds-ink); }
.ds-nav-links { display: flex; align-items: center; gap: 28px; }
.ds-nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ds-ink-soft); transition: color 0.15s; }
.ds-nav-links a:hover { color: var(--ds-ink); }
.ds-nav-actions { display: flex; align-items: center; gap: 12px; }
.ds-nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; padding: 10px; }
.ds-nav-toggle span { display: block; height: 2px; background: var(--ds-ink); border-radius: 2px; margin: 5px 0; transition: 0.2s; }

/* ---- Language switch: EN/ES pill in the header — the same two-button
   pattern used across every surface (marketing, owner portal, widgets) so a
   visitor learns it once. ---- */
.ds-lang-switch { display: flex; background: var(--ds-paper-alt); border-radius: 999px; padding: 3px; gap: 2px; }
.ds-lang-btn {
  font-family: var(--ds-font-body); font-size: 0.8rem; font-weight: 600; color: var(--ds-ink-soft);
  background: transparent; border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: 0.15s;
}
.ds-lang-btn:hover { color: var(--ds-ink); }
.ds-lang-btn.on { background: var(--ds-paper); color: var(--ds-ink); box-shadow: var(--ds-shadow); }

/* ---- Hero: light, split layout with a mockup graphic — the opposite of
   the guest site's full-bleed dark mountain photo ---- */
.ds-hero { position: relative; padding: 72px 0 100px; }
/* Bold, blurred color behind the hero copy/mockup — cool-leaning (indigo/
   lime/gold, no coral — that stays the one CTA color, and there's a coral
   button right here in the hero). Two independent layers of motion: an
   always-on CSS keyframe float on each blob (gated behind
   prefers-reduced-motion, see .ds-hero-blob below) plus a JS scroll-driven
   offset on top (app.js, not gated — see the comment there for why). The
   two use different CSS properties (`translate` vs `transform`) so they
   never fight each other. */
/* Deliberately taller than .ds-hero itself (bottom: -110px) and .ds-hero has
   no overflow:hidden of its own, so this layer actually extends past the
   hero's own bottom edge into the section below. That's safe because
   .ds-hero-bg sits at z-index:-1 — behind all normal in-flow content
   site-wide, including .ds-hero's own (background-less, transparent) box —
   and #problem (the section right after the hero) has no background-color
   of its own either, so it doesn't opaquely cover the overflow. The mask
   fade (55% -> 100%) is what keeps this from reading as a hard-edged
   rectangle: instead of clipping straight across the old section boundary,
   the color itself dissolves out gradually, finishing a little ways into
   the next section rather than stopping exactly at the seam. */
.ds-hero-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: -110px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.ds-hero-blob {
  position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform, translate;
  /* Ambient float — animates the standalone `translate` property, not the
     `transform` shorthand, specifically so it can run at the same time as
     app.js's scroll-driven parallax (which sets .style.transform) without
     the two fighting over the same CSS property. This layer alone
     guarantees visible, continuous motion even if the scroll-linked JS
     never runs at all for some reason — belt and suspenders. */
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.ds-hero-blob-1 { width: 560px; height: 560px; top: -170px; right: -90px; background: var(--ds-indigo); opacity: 0.6; animation-name: ds-float-a; animation-duration: 15s; }
.ds-hero-blob-2 { width: 480px; height: 480px; bottom: -170px; left: -80px; background: var(--ds-lime); opacity: 0.55; animation-name: ds-float-b; animation-duration: 19s; }
.ds-hero-blob-3 { width: 400px; height: 400px; top: 38%; right: 14%; background: var(--ds-indigo-700); opacity: 0.5; animation-name: ds-float-c; animation-duration: 13s; }
.ds-hero-blob-4 { width: 440px; height: 440px; top: 2%; left: 12%; background: var(--ds-indigo-100); opacity: 0.9; animation-name: ds-float-a; animation-duration: 21s; animation-delay: -6s; }
.ds-hero-blob-5 { width: 360px; height: 360px; bottom: 4%; right: 28%; background: var(--ds-gold); opacity: 0.4; animation-name: ds-float-b; animation-duration: 17s; animation-delay: -9s; }
@keyframes ds-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 34px -46px; } }
@keyframes ds-float-b { 0%, 100% { translate: 0 0; } 50% { translate: -30px 36px; } }
@keyframes ds-float-c { 0%, 100% { translate: 0 0; } 50% { translate: 26px 40px; } }
@media (prefers-reduced-motion: reduce) { .ds-hero-blob { animation: none; } }
.ds-hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.ds-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ds-indigo-100); color: var(--ds-indigo-700);
  font-size: 0.85rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.ds-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -0.02em; }
.ds-hero h1 .ds-hl { background: linear-gradient(180deg, transparent 62%, var(--ds-lime) 62%); }
.ds-hero-sub { font-size: 1.15rem; color: var(--ds-ink-soft); margin: 28px 0 38px; max-width: 480px; }
.ds-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ds-hero-note { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 0.92rem; color: var(--ds-ink-soft); }
.ds-hero-note strong { color: var(--ds-ink); }
.ds-hero-note svg { color: var(--ds-success); }

/* Mockup windows — browser chrome framing real product screenshots */
.ds-hero-art { position: relative; height: 500px; }
.ds-mock-window { background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-lg); overflow: hidden; }
.ds-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--ds-paper-alt); border-bottom: 1px solid var(--ds-line); }
.ds-mock-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-line); }
.ds-mock-bar span:nth-child(1) { background: #ff8a75; }
.ds-mock-bar span:nth-child(2) { background: #ffd166; }
.ds-mock-bar span:nth-child(3) { background: #8fd694; }
.ds-mock-url { margin-left: 10px; font-size: 0.72rem; color: var(--ds-ink-soft); background: var(--ds-paper); border-radius: 999px; padding: 3px 10px; }
.ds-mock-shot { width: 100%; height: auto; }

.ds-hero-art .ds-mock-window.ds-mock-1 { position: absolute; top: 0; right: 0; width: 92%; z-index: 2; }
.ds-hero-art .ds-mock-window.ds-mock-2 { position: absolute; bottom: 0; left: 0; width: 72%; z-index: 1; }

.ds-mock-chip { background: var(--ds-coral); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.ds-mock-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--ds-lime); color: var(--ds-lime-ink); font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; }

/* ---- Problem: a literal split bar instead of the guest site's dark card
   row — makes the "where the money goes" point as data, not prose ---- */
.ds-splitbar { margin-bottom: 40px; }
.ds-splitbar-track { display: flex; height: 84px; border-radius: var(--ds-radius); overflow: hidden; }
.ds-splitbar-seg { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; }
.ds-splitbar-seg span { font-family: var(--ds-font-body); font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.35; }
.ds-seg-platform { background: var(--ds-coral); }
.ds-seg-you { background: var(--ds-indigo); }
.ds-splitbar-caption { margin-top: 12px; font-size: 0.9rem; color: var(--ds-ink-soft); }

.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ds-fact-card { background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 22px; }
/* Add-ons sits on a tinted section background, so its white cards already
   read as distinct without an outline too — the other two fact-card grids
   (Problem, For your business) are on plain white and still need the
   border to separate card from page. */
#addons .ds-fact-card { border: none; }
.ds-fact-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--ds-coral-100); color: var(--ds-coral-700); }
.ds-fact-icon svg { width: 20px; height: 20px; }
/* Add-ons grid only: one accent per card so four otherwise-identical icon
   tiles read as different things at a glance — reusing tokens already
   meaningful elsewhere (indigo = booking/trust, gold = inbox/reviews,
   coral = showcase/listing, success = the "included free" green already on
   the Stats card's own badge). */
.ds-fact-icon.is-indigo { background: var(--ds-indigo-100); color: var(--ds-indigo-700); }
.ds-fact-icon.is-gold { background: var(--ds-gold-100); color: var(--ds-gold); }
.ds-fact-icon.is-success { background: var(--ds-success-100); color: var(--ds-success); }
.ds-fact-card strong { display: block; font-family: var(--ds-font-display); font-size: 1.1rem; margin-bottom: 6px; }
.ds-fact-card p { color: var(--ds-ink-soft); font-size: 0.92rem; }
.ds-fact-badge {
  display: inline-flex; align-items: center; font-family: var(--ds-font-body);
  background: var(--ds-success-100); color: var(--ds-success); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.ds-source { margin-top: 22px; font-size: 0.78rem; color: var(--ds-ink-soft); }

/* ---- Solution: two mockup-window panels beside checklists ---- */
.ds-product-grid { display: grid; gap: 28px; }
.ds-product-row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center; }
.ds-product-row:nth-child(even) { direction: rtl; }
.ds-product-row:nth-child(even) > * { direction: ltr; }
.ds-product-copy h3 { font-size: 1.4rem; margin-bottom: 14px; }
.ds-check-list, .ds-x-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.ds-check-list li, .ds-x-list li { position: relative; padding-left: 26px; font-size: 0.95rem; }
.ds-check-list li::before, .ds-x-list li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 17px; height: 17px;
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}
/* The one deliberate round shape on this page — everything else in this
   design system is rounded-rect, but a circular badge reads more like a
   check/status "chip" here than a square would. Scoped to the checkmark
   only; the x-list badges beside it stay square. */
.ds-check-list li::before { border-radius: 50%; background-color: var(--ds-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }
.ds-x-list li::before { border-radius: 5px; background-color: var(--ds-danger-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc2626' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); }
.ds-inline-link { font-weight: 600; color: var(--ds-indigo); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 4px; }
.ds-inline-link:hover { color: var(--ds-indigo-700); }
.ds-product-visual .ds-mock-window { max-width: 100%; }

/* ---- Math: a receipt-style comparison instead of two big cards ---- */
.ds-receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--ds-radius-lg); overflow: hidden; margin-bottom: 40px; }
.ds-receipt { padding: 32px 28px; }
.ds-receipt-lose { background: var(--ds-paper); }
.ds-receipt-win { background: var(--ds-benefit-dark, var(--ds-ink)); color: #fff; }
.ds-receipt-label { display: block; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-ink-soft); }
.ds-receipt-win .ds-receipt-label { color: rgba(255, 255, 255, 0.6); }
.ds-receipt-amount { display: block; font-family: var(--ds-font-display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 8px 0 2px; }
.ds-receipt-win .ds-receipt-amount { color: #fff; }
.ds-receipt-sub { font-size: 0.85rem; color: var(--ds-ink-soft); margin-bottom: 20px; display: block; }
.ds-receipt-win .ds-receipt-sub { color: rgba(255, 255, 255, 0.65); }
.ds-receipt-win .ds-check-list li { color: #fff; }
/* Green reads oddly on top of these already-colored dark panels — an
   outlined badge (no fill) works better than another solid color here. */
.ds-receipt-win .ds-check-list li::before { background-color: transparent; border: 1.5px solid #fff; }

.ds-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.ds-stat-row div { border-top: 2px solid var(--ds-ink); padding-top: 12px; }
.ds-stat-row strong { display: block; font-family: var(--ds-font-display); font-size: 1.5rem; }
.ds-stat-row span { font-size: 0.85rem; color: var(--ds-ink-soft); }

/* ---- Benefits: the ROI / Reviews / Showcase deep-dives, consolidated into
   one section and told apart by their own tinted background per item —
   color is the separator here, not a divider line, so there's nothing
   between them but breathing room. The icon sits in a small kicker row
   above the headline/copy rather than beside it. ---- */
.ds-benefit { border-radius: var(--ds-radius-lg); padding: 40px; margin-bottom: 40px; background: var(--ds-benefit-bg); }
.ds-benefit:last-child { margin-bottom: 0; }
.ds-benefit-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ds-benefit-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ds-benefit-accent); color: #fff; }
.ds-benefit-icon svg { width: 22px; height: 22px; }
.ds-benefit-label { font-family: var(--ds-font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-benefit-accent); }
.ds-benefit-copy { max-width: 640px; }
.ds-benefit-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.ds-benefit-copy p { color: var(--ds-ink-soft); font-size: 1rem; }
.ds-benefit-indigo { --ds-benefit-accent: var(--ds-indigo); --ds-benefit-bg: var(--ds-indigo-100); --ds-benefit-dark: var(--ds-indigo-700); }
.ds-benefit-gold { --ds-benefit-accent: var(--ds-gold); --ds-benefit-bg: var(--ds-gold-100); --ds-benefit-dark: var(--ds-gold); }
.ds-benefit-coral { --ds-benefit-accent: var(--ds-coral); --ds-benefit-bg: var(--ds-coral-100); --ds-benefit-dark: var(--ds-coral-700); }

.ds-receipt-grid-compact { margin-top: 24px; margin-bottom: 0; }
.ds-receipt-grid-compact .ds-receipt { padding: 26px 28px; }
.ds-receipt-grid-compact .ds-receipt-amount { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 8px 0 4px; }
.ds-receipt-grid-compact .ds-receipt-sub { margin-bottom: 16px; }
.ds-receipt-grid-compact .ds-check-list, .ds-receipt-grid-compact .ds-x-list { margin: 10px 0 0; gap: 9px; }
.ds-receipt-grid-compact .ds-check-list li, .ds-receipt-grid-compact .ds-x-list li { font-size: 0.88rem; }

.ds-benefit .ds-stat-row { margin-top: 24px; }
.ds-benefit .ds-source { margin-top: 16px; }

/* ---- How it works: three distinct cards, no shared line or overlap ---- */
.ds-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ds-timeline-step { background: var(--ds-paper); border-radius: var(--ds-radius); padding: 24px; }
.ds-timeline-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  font-family: var(--ds-font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 16px;
}
/* Each step's own accent instead of all three sharing plain black — same
   light-tint-background/darker-foreground pairing as the Add-ons icons. */
.ds-timeline-step:nth-child(1) .ds-timeline-num { background: var(--ds-indigo-100); color: var(--ds-indigo-700); }
.ds-timeline-step:nth-child(2) .ds-timeline-num { background: var(--ds-gold-100); color: var(--ds-gold); }
.ds-timeline-step:nth-child(3) .ds-timeline-num { background: var(--ds-coral-100); color: var(--ds-coral-700); }
.ds-timeline-step strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.ds-timeline-step p { color: var(--ds-ink-soft); font-size: 0.92rem; }

/* A separate callout, not a fourth step — kept visually distinct (its own
   bordered box + icon) so it never reads as trailing off of step 1. */
.ds-timeline-note {
  margin-top: 24px; display: flex; align-items: flex-start; gap: 12px;
  background: var(--ds-paper-alt); border-radius: var(--ds-radius); padding: 18px 22px;
}
.ds-timeline-note .ds-icon { flex: none; margin-top: 2px; color: var(--ds-success); }
.ds-timeline-note p { color: var(--ds-ink-soft); font-size: 0.92rem; }

/* ---- Pricing ---- */
.ds-price-card { background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ds-price-card h3 { font-size: 1.05rem; }
/* Indigo, not plain ink — makes the number the thing your eye lands on
   first, and it's already this site's accent color (nav links, eyebrow
   tags, bundle pills) so it doesn't introduce a new hue. indigo-700 on
   white is ~9.9:1 contrast, well past AA/AAA even before accounting for
   how large this text already is. */
.ds-price { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(2.6rem, 3.2vw, 3.2rem); line-height: 1; color: var(--ds-indigo-700); }
.ds-price small { font-family: var(--ds-font-body); font-size: 1rem; font-weight: 500; color: var(--ds-ink-soft); }
.ds-price-card p { color: var(--ds-ink-soft); font-size: 0.92rem; }
/* The "included free" add-on — a soft success tint marks it as a bonus that
   comes with every site rather than another line on the bill, and its "Free"
   price shows in the success color instead of the indigo the paid prices use. */
.ds-price-card-free { background: var(--ds-success-100); border: none; }
.ds-price-card-free .ds-price { color: var(--ds-success); }
.ds-pricing-note { margin-top: 22px; font-size: 0.9rem; color: var(--ds-ink-soft); }

/* ---- Bundles: bundled add-ons at a discount off the sum of their
   individual prices — a strikethrough original total next to the bundle
   rate, same "receipt" honesty as the direct-vs-platform math section. ---- */
.ds-bundle-panel { background: var(--ds-coral-100); border-radius: var(--ds-radius-lg); padding: 48px 40px; margin-top: 56px; }
.ds-bundles-head { max-width: 640px; margin: 0 0 24px; }
.ds-bundles-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 10px; letter-spacing: -0.01em; }
.ds-bundles-head p { color: var(--ds-ink-soft); font-size: 0.98rem; }
/* align-items:start — without it, grid stretches every card to match the
   tallest one in its row, and since these are a flex column with no child
   set to grow, that extra height just sits as dead space below the
   description paragraph instead of anywhere useful. */
.ds-bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.ds-bundle-card {
  background: var(--ds-paper); border-radius: var(--ds-radius-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 4px; position: relative;
}
.ds-bundle-card h4 { font-family: var(--ds-font-display); font-size: 1.15rem; margin-bottom: 12px; }
/* What's included — pills, not a run-on "+"-joined line, so each add-on in
   the bundle reads as its own scannable piece rather than one dense sentence. */
/* min-height reserves room for the tallest card's pill set (≈3 rows) so the
   price row — and everything below it — lands on the same horizontal line
   across all three bundles, regardless of how many add-ons each one lists.
   align-content keeps the pills packed at the top, with the slack below. */
.ds-bundle-includes { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin: 0 0 18px; min-height: 104px; }
.ds-bundle-pill {
  display: inline-flex; align-items: center;
  background: var(--ds-indigo-100); color: var(--ds-indigo-700);
  font-size: 0.78rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}
.ds-bundle-price-row { display: flex; align-items: baseline; gap: 10px; }
.ds-bundle-strike { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.5rem; color: var(--ds-ink-soft); text-decoration: line-through; text-decoration-color: var(--ds-coral); text-decoration-thickness: 1.5px; }
.ds-bundle-strike small { font-family: var(--ds-font-body); font-size: 0.9rem; }
.ds-bundle-price { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(2.6rem, 3.2vw, 3.2rem); line-height: 1; color: var(--ds-indigo-700); }
.ds-bundle-price small { font-family: var(--ds-font-body); font-size: 1rem; font-weight: 500; color: var(--ds-ink-soft); }
.ds-bundle-save {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  background: var(--ds-lime); color: var(--ds-lime-ink); font-size: 0.8rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; margin: 12px 0 16px;
}
.ds-bundle-desc { color: var(--ds-ink-soft); font-size: 0.9rem; }
/* The featured tier gets the same dark-card treatment as the "direct
   booking" receipt above, tying the two "this is the one you want" moments
   on the page together visually. */
.ds-bundle-featured { background: var(--ds-ink); color: #fff; border-color: var(--ds-ink); }
.ds-bundle-featured h4 { color: #fff; }
.ds-bundle-featured .ds-bundle-desc { color: rgba(255, 255, 255, 0.65); }
.ds-bundle-featured .ds-bundle-pill { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ds-bundle-featured .ds-bundle-strike { color: rgba(255, 255, 255, 0.55); }
.ds-bundle-featured .ds-bundle-price { color: var(--ds-lime); }
.ds-bundle-featured .ds-bundle-price small { color: rgba(255, 255, 255, 0.65); }
.ds-bundle-tag {
  position: absolute; top: -12px; right: 24px; background: var(--ds-coral); color: #fff;
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; box-shadow: var(--ds-shadow);
}

/* ---- FAQ: bordered rows, not pill cards ---- */
.ds-faq-wrap { max-width: 760px; }
.ds-faq-list { border-top: 1px solid var(--ds-line); }
.ds-faq-item { border-bottom: 1px solid var(--ds-line); }
.ds-faq-item summary {
  cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ds-faq-item summary::-webkit-details-marker { display: none; }
.ds-faq-item summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--ds-indigo); flex: none; }
.ds-faq-item[open] summary::after { content: "\2212"; }
.ds-faq-item p { color: var(--ds-ink-soft); font-size: 0.95rem; padding-bottom: 20px; max-width: 620px; }

/* ---- Designed by (founder/designer credibility) ---- */
.ds-designer-grid { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center; }
.ds-designer-photo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ds-designer-photo-img {
  width: 180px; height: 180px; border-radius: 50%; flex: none;
  object-fit: cover; box-shadow: var(--ds-shadow-lg);
}
.ds-designer-copy h2 { margin-bottom: 16px; }
.ds-designer-copy p { color: var(--ds-ink-soft); font-size: 1.02rem; max-width: 620px; margin-bottom: 14px; }
.ds-designer-copy p:last-child { margin-bottom: 0; }

/* ---- Contact ---- */
.ds-contact { background: var(--ds-indigo-900); }
.ds-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.ds-contact-copy .ds-eyebrow { color: var(--ds-lime); }
.ds-contact-copy .ds-eyebrow::before { background: var(--ds-lime); }
/* This section alone has a dark background, so the shared coral icon tile
   would clash — reuses the lime already established for this section's own
   eyebrow instead of introducing another color. */
.ds-contact-copy .ds-section-kicker-icon { background: rgba(255, 255, 255, 0.14); color: var(--ds-lime); }
.ds-contact-copy h2 { color: #fff; }
.ds-contact-copy p { color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; max-width: 420px; }
.ds-contact-form { background: var(--ds-paper); border-radius: var(--ds-radius-lg); padding: 32px; box-shadow: var(--ds-shadow-lg); }
.ds-field { margin-bottom: 16px; }
.ds-field label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-ink-soft); margin-bottom: 7px; }
.ds-field-optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ds-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds-field input, .ds-field textarea {
  width: 100%; font-family: var(--ds-font-body); font-size: 0.98rem; color: var(--ds-ink);
  background: var(--ds-paper-alt); border: 1.5px solid transparent; border-radius: var(--ds-radius-sm);
  padding: 12px 14px;
}
.ds-field textarea { resize: vertical; min-height: 88px; }
.ds-field input:focus, .ds-field textarea:focus { outline: none; background: #fff; border-color: var(--ds-indigo); }
.ds-contact-msg { padding: 11px 14px; border-radius: var(--ds-radius-sm); font-size: 0.9rem; margin-bottom: 16px; display: none; }
.ds-contact-msg.ok { display: block; background: var(--ds-success-100); color: #166534; }
.ds-contact-msg.err { display: block; background: var(--ds-danger-100); color: #991b1b; }

/* ---- Footer ---- */
.ds-footer { padding: 32px 0; text-align: center; font-size: 0.85rem; color: var(--ds-ink-soft); }
/* Owner login reuses .ds-inline-link (bold indigo) elsewhere for genuine
   CTAs — muted here on purpose so it reads as a quiet footer utility link,
   not a third call-to-action competing with the copyright line around it. */
.ds-footer .ds-inline-link { font-weight: 400; color: inherit; }
.ds-footer .ds-inline-link:hover { color: var(--ds-ink); }

/* ---- Mobile nav ---- */
@media (max-width: 900px) {
  /* height, not bottom:0 — .ds-header's backdrop-filter makes it the
     containing block for this fixed element (filter/backdrop-filter do
     that, same as transform), so top+bottom can't resolve against the
     viewport; it silently collapsed to content height instead of filling
     the screen. An explicit height sidesteps that regardless of which
     element ends up as the containing block. */
  .ds-nav-links { position: fixed; top: 68px; left: 0; right: 0; height: calc(100vh - 68px); background: var(--ds-paper); flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 0.15s; }
  .ds-nav-links a { padding: 12px 0; width: 100%; font-size: 1.05rem; border-bottom: 1px solid var(--ds-line); }
  .ds-header.menu-open .ds-nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .ds-nav-toggle { display: block; }
  /* The header CTA is redundant with the hero's own big button right below
     it — dropped here so the lang switch + hamburger fit without crowding
     or wrapping on a phone-width screen. */
  .ds-nav-actions > .ds-btn { display: none; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ds-hero-grid { grid-template-columns: 1fr; }
  .ds-hero-art { height: 340px; margin-top: 20px; }
  .ds-grid-3 { grid-template-columns: 1fr; }
  .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ds-product-row, .ds-product-row:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
  .ds-product-visual { order: -1; }
  .ds-receipt-grid { grid-template-columns: 1fr; }
  .ds-stat-row { grid-template-columns: 1fr; gap: 16px; }
  .ds-benefit { padding: 28px; }
  .ds-timeline { grid-template-columns: 1fr; gap: 16px; }
  .ds-bundle-panel { padding: 32px 24px; }
  .ds-bundle-grid { grid-template-columns: 1fr; }
  /* Stacked single-column, there's nothing to align the price rows against,
     so drop the reserved pill-row height — otherwise it reads as dead space
     between a card's pills and its price. */
  .ds-bundle-includes { min-height: 0; }
  .ds-bundle-tag { top: -12px; right: auto; left: 24px; }
  .ds-designer-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ds-designer-copy p { margin-left: auto; margin-right: auto; }
  .ds-contact-grid { grid-template-columns: 1fr; }
  .ds-field-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ds-grid-4 { grid-template-columns: 1fr; }
}