/* ==========================================================================
   BloomLynk — 招商落地页
   Palette, type and spacing carried verbatim from the Claude Design source
   (Bloomlynk 招商落地页.dc.html).
   ========================================================================== */

:root {
  /* ink */
  --ink:        #2B1B23;
  --ink-2:      #4A343D;
  --ink-3:      #5C4550;
  --ink-4:      #6E5A63;
  --ink-5:      #8A737C;
  --ink-6:      #9C8A92;

  /* rose */
  --rose:       #FF5A8F;
  --rose-lt:    #FF8EBC;
  --rose-dk:    #D93B72;
  --rose-300:   #FFB9D2;
  --rose-200:   #FFC9DD;
  --rose-150:   #FFD6E6;
  --rose-100:   #FFE2ED;
  --rose-75:    #FFE9F1;
  --rose-50:    #FFF0F6;
  --rose-25:    #FFFAFC;

  --grad:       linear-gradient(45deg, #FF5A8F, #FF8EBC);
  --grad-hover: linear-gradient(45deg, #F0417C, #FF7FB2);

  --wrap:   1200px;
  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

/* A class-level `display` beats the UA's [hidden] rule, so the state-toggled
   panels (.apply-form / .apply-done / .faq-a) need this to actually hide. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  background:
    radial-gradient(1100px 620px at 88% -180px, #FFE4EF, transparent 62%),
    radial-gradient(900px 700px at -12% 108%, #FFF1F6, transparent 58%),
    #FFFFFF;
  color: var(--ink);
  /* Poppins carries the Latin (web font); the CJK comes entirely from system
     faces — PingFang SC on Apple, Microsoft YaHei on Windows, Noto Sans CJK
     on Android/Linux. No Chinese web font is downloaded, and every visitor
     gets the same face whether or not they can reach Google. */
  font-family: 'Poppins', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--rose-dk); text-decoration: none; }
a:hover { color: var(--rose); }

button, input, select { font-family: inherit; }
button:focus-visible,
input:focus-visible,
a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

::selection { background: var(--rose-150); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── shared ───────────────────────────────────────────────────────────── */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.section   { padding-block: 92px; }
.section-b { padding-bottom: 92px; }

.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 52px; }
.section-head.tight { margin-bottom: 18px; }

.kicker {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rose-dk);
}
.kicker-muted { color: var(--ink-6); }

.h2 {
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 500;
  line-height: 1.2; letter-spacing: -0.015em; margin: 0;
}
.h2-sm { font-size: clamp(28px, 2.8vw, 40px); }
.h2-lg { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.15; letter-spacing: -0.02em; max-width: 20ch; }

.h3 { font-size: 30px; font-weight: 500; line-height: 1.3; margin: 0; }

.section-intro {
  margin: 0 0 44px; font-size: 17px; line-height: 1.75;
  max-width: 62ch; color: var(--ink-3);
}
.section-intro.narrow { font-size: 16px; max-width: 58ch; margin-bottom: 40px; color: var(--ink-4); }
.section-intro b { font-weight: 400; color: var(--ink); }

.muted { color: var(--ink-4); }
.accent { color: var(--rose-dk); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr));
  gap: var(--gap, 24px);
}

.card {
  display: flex; flex-direction: column;
  border-radius: 16px; background: #FFFFFF;
  border: 1px solid var(--rose-100);
  box-shadow: 0 10px 30px rgba(43, 27, 35, 0.05);
}

.rule { height: 1px; background: var(--rose-75); }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border: 0; border-radius: 8px;
  font-size: 15px; line-height: 1.3; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; margin-top: 6px; padding: 14px 20px; }

.btn-primary {
  background: var(--grad); color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(255, 90, 143, 0.3);
}
.btn-sm.btn-primary { box-shadow: 0 6px 18px rgba(255, 90, 143, 0.28); }
.btn-block.btn-primary { box-shadow: 0 12px 30px rgba(255, 90, 143, 0.3); }
.btn-primary:hover { background: var(--grad-hover); color: #FFFFFF; }

.btn-outline {
  background: transparent; border: 1px solid var(--rose-300);
  color: var(--rose-dk);
}
.btn-outline:hover { background: var(--rose-50); color: var(--rose-dk); }

.btn-ghost {
  align-self: flex-start; margin-top: 6px; padding: 10px 18px;
  border: 1px solid var(--rose-lt); border-radius: 10px;
  background: transparent; color: var(--rose-dk); font-size: 14px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.6); color: var(--rose-dk); }

/* ── photo frames (brand-tinted placeholder shows if the jpg is absent) ── */

.photo {
  margin: 0; position: relative; overflow: hidden;
  background:
    url("assets/bloomlynk-icon.svg") center / 22% no-repeat,
    linear-gradient(150deg, var(--rose-50), var(--rose-100) 55%, var(--rose-150));
  border: 1px solid var(--rose-100);
}
.photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,0.55), transparent 60%);
  pointer-events: none;
}
.photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  /* keeps a not-yet-supplied jpg from flashing alt text over the
     placeholder before app.js removes the broken element */
  font-size: 0; color: transparent;
}
/* <picture> is only a source selector here — it must not become a box,
   or the img's height:100% would resolve against it instead of .photo */
.photo picture { display: contents; }
.photo-hero    { height: 470px; border-radius: 20px; box-shadow: 0 30px 70px rgba(255, 90, 143, 0.22); }
.photo-hero img { object-position: 58% 68%; }
.photo-feature { height: 330px; border-radius: 16px; box-shadow: 0 20px 50px rgba(43, 27, 35, 0.08); }

/* ── header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--rose-100);
}
.header-inner {
  display: flex; align-items: center; gap: 30px;
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }

.site-nav { display: flex; align-items: center; gap: 24px; margin-left: 14px; font-size: 14px; }
.site-nav a { color: var(--ink-4); white-space: nowrap; }
.site-nav a:hover { color: var(--rose-dk); }

.header-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.header-note { font-size: 13px; color: var(--ink-6); white-space: nowrap; }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding-top: 96px; padding-bottom: 80px;
  display: grid;
  /* 480px, not the source's 420px: at 420 the two-column layout engaged as
     early as ~944px viewport, where each half is only 420-429px — narrower
     than the headline needs, so it wrapped in a band around 1024px. Raising
     the threshold keeps the hero stacked until each column can hold the
     headline (and a 1024px laptop reads better stacked anyway). */
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 64px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  white-space: nowrap; padding: 7px 14px; border-radius: 999px;
  background: var(--rose-50); border: 1px solid var(--rose-150);
  font-size: 13px; color: var(--rose-dk);
}
.hero-title {
  /* Source says clamp(42px, 5.2vw, 74px). At its own 1440 preview width that
     needs 580px for 「别再单卖一束花。」 inside a 496px column (the grid half
     of max-width:1200), so both lines wrapped and the h1 became 4 lines with
     「一束花」 split across them. The cap is lowered to 62px so each sentence
     stays on the one line the source's per-sentence <span style=display:block>
     clearly intends. 58px rather than the 62px that just fits PingFang SC:
     the CJK face is now whatever the visitor's OS supplies (微软雅黑 on
     Windows, Noto Sans CJK on Android) and 8px of headroom is not enough to
     survive those metric differences. Revert by restoring 74px. */
  /* 11vw, not the source's 5.2vw: below ~530px the gutter is a flat 20px so
     the column tracks the viewport almost 1:1, and the source's 42px floor
     overflowed a 360px phone (a 320px column needs <=40px). 11vw keeps
     「别再单卖一束花。」 on one line from 320px up, then the 58px cap takes
     over. Verified 320 / 360 / 390 / 768 / 1440. */
  font-size: clamp(28px, 10.5vw, 56px); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
.hero-title span { display: block; }

.lead    { margin: 0; font-size: 18px; line-height: 1.7; max-width: 50ch; color: var(--ink-2); }
.lead-en { margin: 0; font-size: 14px; line-height: 1.6; max-width: 56ch; color: var(--ink-6); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.ticks {
  display: flex; flex-wrap: wrap; gap: 18px; padding-top: 10px;
  font-size: 13px; color: var(--ink-5);
}
.ticks b { font-weight: 400; }

.hero-media { position: relative; min-width: 0; }
.take-card {
  position: absolute; left: -28px; bottom: 36px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 22px; border-radius: 14px;
  background: #FFFFFF; border: 1px solid var(--rose-100);
  box-shadow: 0 16px 40px rgba(43, 27, 35, 0.1);
}
.take-amount { font-size: 30px; font-weight: 500; line-height: 1; }
.take-note   { font-size: 12px; color: var(--ink-6); }

/* ── stat band ────────────────────────────────────────────────────────── */

.stat-band { background: linear-gradient(45deg, #FF5A8F 0%, #FF8EBC 58%, #FFD6E6 100%); padding: 60px 0; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 28px;
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-n {
  font-size: clamp(32px, 3.3vw, 48px); font-weight: 500;
  line-height: 1.05; color: #FFFFFF;
}
.stat-label { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.stat-en    { color: rgba(255, 255, 255, 0.72); }

/* ── why join ─────────────────────────────────────────────────────────── */

.problem { gap: 16px; padding: 30px; }
.problem-pain { font-size: 22px; line-height: 1.4; }
.problem-answer {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rose-75);
  font-size: 15px; line-height: 1.65; color: var(--ink-3);
}

/* ── bundle ───────────────────────────────────────────────────────────── */

.bundle-card { gap: 14px; padding: 32px; box-shadow: none; }
.bundle-anchor {
  background: linear-gradient(160deg, var(--rose-50), var(--rose-100));
  border-color: var(--rose-200);
}
.bundle-title { font-size: 26px; font-weight: 500; line-height: 1.25; }
.bundle-body  { font-size: 15px; line-height: 1.7; color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.chip {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--rose-100); background: var(--rose-25);
  font-size: 13px; color: var(--ink-4);
}

/* ── merchant console ─────────────────────────────────────────────────── */

.tools {
  background: linear-gradient(180deg, var(--rose-25), #FFFFFF);
  border-top: 1px solid var(--rose-75);
  border-bottom: 1px solid var(--rose-75);
}
.tools-inner { padding-block: 92px; display: flex; flex-direction: column; gap: 68px; }

.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px; align-items: center;
}
.feature-copy { display: flex; flex-direction: column; gap: 16px; }
.feature-body { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-3); max-width: 48ch; }
.feature-body b { font-weight: 400; color: var(--ink); }
.feature-kpi  { font-size: 13px; color: var(--ink-6); }
.feature-media-first { order: -1; }

/* ── calculator ───────────────────────────────────────────────────────── */

.calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 44px; align-items: start;
}
.calc-controls { display: flex; flex-direction: column; gap: 30px; }
.control { display: flex; flex-direction: column; gap: 14px; }
.control-head { display: flex; align-items: baseline; justify-content: space-between; }
.control-label { font-size: 15px; color: var(--ink-3); }
.control-value { font-size: 24px; font-weight: 500; }

.range { width: 100%; accent-color: var(--rose); }

.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.addon {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--rose-100); border-radius: 10px;
  background: #FFFFFF; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color 140ms ease;
}
.addon:hover { border-color: var(--rose-300); }
.addon.is-on::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--rose); border-radius: 10px;
  background: var(--rose-50); pointer-events: none;
}
.addon-text { position: relative; display: flex; flex-direction: column; gap: 2px; }
.addon-name { font-size: 14px; }
.addon-meta { font-size: 12px; color: var(--ink-6); }

.calc-panel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px; border-radius: 18px; background: #FFFFFF;
  border: 1px solid var(--rose-100);
  box-shadow: 0 24px 60px rgba(255, 90, 143, 0.16);
}
.panel-head { display: flex; flex-direction: column; gap: 2px; }
.panel-sub  { font-size: 12px; color: var(--ink-6); }

.panel-figures { display: flex; align-items: flex-end; gap: 18px; }
.figure-col   { display: flex; flex-direction: column; gap: 4px; }
.figure-label { font-size: 12px; color: var(--ink-6); }
.figure-label.accent { color: var(--rose-dk); }
.figure-solo  { font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--ink-6); }
.figure-take  { font-size: 38px; font-weight: 500; line-height: 1.02; }
.figure-arrow { font-size: 18px; color: var(--rose-300); padding-bottom: 5px; }
.uplift-badge {
  margin-left: auto; padding: 6px 12px; border-radius: 999px;
  background: var(--grad); color: #FFFFFF; font-size: 13px; white-space: nowrap;
}

.breakdown { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.breakdown > div { display: flex; justify-content: space-between; gap: 16px; }
.breakdown > div > span:first-child { color: var(--ink-4); }
.breakdown > div.dim, .breakdown > div.dim > span:first-child { color: var(--ink-6); }
.panel-foot { font-size: 12px; line-height: 1.6; color: var(--ink-6); }

/* ── who we onboard ───────────────────────────────────────────────────── */

.onboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 56px; min-width: 0;
}
.onboard .section-head { margin-bottom: 0; min-width: 0; }
.onboard-intro { margin: 8px 0 0; font-size: 16px; line-height: 1.75; color: var(--ink-4); max-width: 38ch; }

.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.type-card { gap: 10px; padding: 26px; }
.type-zh    { font-size: 26px; font-weight: 500; }
.type-kinds { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.type-note  { font-size: 13px; line-height: 1.6; color: var(--ink-6); margin-top: auto; }

/* ── steps ────────────────────────────────────────────────────────────── */

.step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 30px; border-radius: 16px;
  background: var(--rose-25); border: 1px solid var(--rose-75);
}
.step-title { font-size: 22px; line-height: 1.35; }
.step-body  { font-size: 15px; line-height: 1.7; color: var(--ink-4); }

/* ── faq ──────────────────────────────────────────────────────────────── */

.faq { background: linear-gradient(180deg, #FFFFFF, var(--rose-25)); border-top: 1px solid var(--rose-75); }
.faq-inner {
  padding-block: 92px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 56px; align-items: start;
}
.faq-inner .section-head { margin-bottom: 0; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--rose-75); }
.faq-q {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 22px 0; border: 0; background: transparent; color: var(--ink);
  text-align: left; cursor: pointer; font-size: 18px; line-height: 1.45;
  transition: color 140ms ease;
}
.faq-q:hover { color: var(--rose-dk); }
.faq-sign { margin-left: auto; font-size: 20px; color: var(--rose); flex-shrink: 0; }
.faq-a p {
  margin: 0; padding: 0 48px 24px 0;
  font-size: 16px; line-height: 1.8; color: var(--ink-3); max-width: 68ch;
}

/* ── apply ────────────────────────────────────────────────────────────── */

.apply {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px; align-items: start;
}
.apply-copy { display: flex; flex-direction: column; gap: 20px; }
.apply-lead { margin: 0; font-size: 17px; line-height: 1.75; color: var(--ink-3); max-width: 44ch; }
.apply-notes {
  display: flex; flex-direction: column; gap: 10px; padding-top: 8px;
  font-size: 14px; line-height: 1.6; color: var(--ink-5);
}

.apply-form {
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px; border-radius: 18px; background: #FFFFFF;
  border: 1px solid var(--rose-100);
  box-shadow: 0 24px 60px rgba(255, 90, 143, 0.16);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field-label { font-size: 13px; color: var(--ink-4); }
.field input {
  padding: 12px 14px; border: 1px solid var(--rose-100); border-radius: 10px;
  background: var(--rose-25); font-size: 15px; color: var(--ink); width: 100%;
}
.field input::placeholder { color: var(--ink-6); }
.field input:hover { border-color: var(--rose-300); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row .field { min-width: 0; }

.type-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* Native radios so the category survives with JS off — the label is the
   control, the visual state comes from :checked, no script involved. */
.choice { display: inline-flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  padding: 9px 15px; border: 1px solid var(--rose-100); border-radius: 999px;
  background: #FFFFFF; color: var(--ink); font-size: 13px;
  transition: border-color 140ms ease, background 140ms ease;
}
.choice:hover span { border-color: var(--rose-300); }
.choice input:checked + span {
  border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose);
  background: var(--rose-50);
}
.choice input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Free-text category. Always in the DOM so it works with JS off; app.js
   collapses it until 其他 is picked. */
.cat-other {
  margin-top: 10px; padding: 12px 14px; width: 100%;
  border: 1px solid var(--rose-100); border-radius: 10px;
  background: var(--rose-25); font-size: 15px; color: var(--ink);
}
.cat-other::placeholder { color: var(--ink-6); }
.cat-other:hover { border-color: var(--rose-300); }
.cat-other[hidden] { display: none !important; }

/* Honeypot — off-screen for humans, present in the DOM for bots. Not
   display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.form-foot { font-size: 12px; line-height: 1.6; color: var(--ink-6); }
.field input[aria-invalid="true"] { border-color: var(--rose); background: var(--rose-50); }
.form-error {
  padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: #FFF0F2; border: 1px solid #FFC9D2; color: #B3261E;
}
.apply-form button[disabled] { opacity: .6; cursor: progress; }

.apply-done {
  display: flex; flex-direction: column; gap: 14px;
  padding: 40px 32px; border-radius: 18px;
  background: linear-gradient(160deg, var(--rose-50), var(--rose-100));
  border: 1px solid var(--rose-200);
}
.done-title { font-size: 28px; font-weight: 500; line-height: 1.3; }
.done-body  { font-size: 15px; line-height: 1.75; color: var(--ink-3); }

/* ── footer ───────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--rose-75); background: var(--rose-25); }
.footer-inner {
  padding-block: 36px; display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.footer-inner img { width: 26px; height: 26px; border-radius: 7px; }
.footer-name  { font-size: 14px; color: var(--ink-4); }
.footer-links { margin-left: auto; display: flex; gap: 20px; font-size: 13px; color: var(--ink-6); }
.footer-links a { color: var(--ink-6); }
.footer-links a:hover { color: var(--rose-dk); }

/* ── responsive ───────────────────────────────────────────────────────
   The source is a fixed 1440px canvas; these rules keep it upright on the
   phones most merchants will actually open it on.
   ------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .header-note { display: none; }
  .site-nav { gap: 18px; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .header-inner { gap: 16px; }
}

@media (max-width: 860px) {
  .hero { padding-top: 64px; padding-bottom: 56px; gap: 44px; }
  .section, .tools-inner, .faq-inner { padding-block: 64px; }
  .section-b { padding-bottom: 64px; }
  .section-head { margin-bottom: 36px; }
  .onboard, .faq-inner, .apply, .feature, .calc { gap: 36px; }
  .photo-hero { height: 380px; }
  .take-card { left: 0; bottom: -18px; }
  .hero-media { margin-bottom: 34px; }
  .feature-media-first { order: 0; }
  .h3 { font-size: 25px; }
}

@media (max-width: 560px) {
  .addon-grid, .type-grid, .field-row { grid-template-columns: 1fr; }
  .apply-form, .apply-done { padding: 24px 20px; }
  .calc-panel { padding: 22px 20px; }
  .problem, .bundle-card, .type-card, .step { padding: 24px 22px; }
  .panel-figures { flex-wrap: wrap; gap: 14px; }
  .uplift-badge { margin-left: 0; }
  .faq-a p { padding-right: 0; }
  .footer-links { margin-left: 0; flex-wrap: wrap; }
  .photo-hero { height: 300px; }
  .photo-feature { height: 260px; }
}