/* site/dist/site.css — GENERATED by site/build-site.mjs. Do not edit.
   colour: src/styles/tokens.css (111 :root + 54 [data-theme="dark"] custom properties, extracted)
   layout: site/site.css
   Rebuild with: node site/build-site.mjs */

:root {
  /* surfaces */
  --bg:            #f6f7f9;
  --bg-deep:       #f2f4f7;   /* sidebar: one step darker than the page */
  --surface:       #ffffff;
  --surface-2:     #f2f4f7;
  --surface-3:     #e9ecf1;

  /* glass and light — added in the craft pass. A raised surface is: its own
     fill + a 1px light along the top edge + a border + one soft shadow. */
  --glass:          rgba(255, 255, 255, 0.72);  /* chrome that blurs content */
  --glass-2:        rgba(255, 255, 255, 0.55);  /* lighter glass: rails, feet */
  --glass-blur:     18px;
  --glass-sat:      150%;
  --hairline-top:   rgba(255, 255, 255, 0.95);  /* the 1px light from above */
  --hairline-brand: rgba(255, 255, 255, 0.42);  /* same, on a brand fill */
  --edge:           #e2e6ec;                    /* border of a raised surface */
  --edge-2:         rgba(15, 19, 25, 0.14);     /* harder edge: input hover */
  --ring-line:      rgba(15, 19, 25, 0.10);     /* signature bezel ring */
  --shade-inset:    rgba(15, 19, 25, 0.05);     /* recessed wells (inputs) */
  --grid-line:      rgba(15, 19, 25, 0.045);    /* precision lattice */
  --ambient-1:      rgba(37, 99, 235, 0.07);    /* aurora tint, top of page */
  --ambient-2:      rgba(37, 99, 235, 0.04);    /* aurora tint, bottom */
  --focus:          rgba(37, 99, 235, 0.28);    /* soft halo around a focus */
  --brand-hover:    #1d4ed8;                    /* accent, one step down */
  --brand-shadow:   0 10px 22px -12px rgba(37, 99, 235, 0.55);

  /* gradient light — calibration pass (2026-09-13). The accepted reference
     (谋势AI复刻 c段 v4) is gradient-rich: 30 linear + 15 radial + 1 conic, and
     that is the version the boss approved. Gradients are therefore back in UI
     chrome — but only as LIGHT: pools behind key surfaces, a sheen across
     raised fills, an accent gradient under the primary CTA, one conic rim and
     one long drift (app.css §16). One hue family, low saturation, dark light;
     neon and a second hue are still out. */
  --glow-1:        rgba(37, 99, 235, 0.07);   /* accent pool: hero, page, stat */
  --glow-2:        rgba(37, 99, 235, 0.045);  /* the quiet second pool */

  /* The page / hero light: white, because on a near-white floor a tint can
     only darken it, and --ink-3 / accent text measured below 4.5:1 under one. */
  --page-light-1:  rgba(255, 255, 255, 0.55);
  --page-light-2:  rgba(255, 255, 255, 0.35);
  --sheen:         rgba(255, 255, 255, 0.78); /* light across a raised surface */
  --sheen-2:       rgba(255, 255, 255, 0.42); /* fainter: glass bars, frames */
  --rim-1:         rgba(37, 99, 235, 0.42);   /* conic bezel: the accent arc */
  --rim-2:         #ffffff;                   /* conic bezel: the bright arc */
  --brand-lit:     #3569e6;                   /* top stop of the accent gradient
                                                 (white on it = 4.9:1) */
  --mask-on:       #000000;                   /* the opaque stop in a mask */
  --sidebar-fill:  rgba(242, 244, 247, 0.92); /* keeps the sidebar's step while
                                                 letting the backdrop through */

  /* text */
  --ink:           #0f1319;
  --ink-2:         #4a5262;
  --ink-3:         #656e7e;

  /* lines */
  --line:          #e2e5ea;
  --line-2:        #eef0f3;

  /* brand */
  --brand:         #2563eb;
  --brand-ink:     #ffffff;
  --brand-soft:    #eaf0fe;
  --brand-soft-2:  #dbe6fd;

  /* semantic (badge / score text) */
  --ok:            #0b7a52;
  --ok-soft:       #e6f4ee;
  --warn:          #96590a;
  --warn-soft:     #fdf1de;
  --bad:           #b3372d;
  --bad-soft:      #fdecea;

  /* Chip backings — OPAQUE ON PURPOSE (2026-09-13). The band fills above are
     translucent, so a chip that paints one has no contrast of its own: its
     text reads against whatever happens to be behind it. On a selected table
     row (--brand-soft behind the chip) the --bad / --bad-soft pair measured
     3.63:1 — below the 4.5 floor — so the chip family takes a solid backing
     instead. Each value below is the band's soft tint composited over the
     card surface and written out as a solid colour, which is what makes
     .score--* read the same in every row it lands in. The soft tokens stay
     untouched: banners, badges and the meter use them on surfaces they know,
     and moving them would move contrast everywhere. */
  --chip-high-bg:  #e6f4ee;   /* --ok-soft over --surface (already opaque) */
  --chip-mid-bg:   #fdf1de;   /* --warn-soft over --surface */
  --chip-fair-bg:  #fdf1de;   /* --warn-soft over --surface */
  --chip-low-bg:   #fdecea;   /* --bad-soft over --surface */

  /* The selected table row tints with --brand-soft, and that warm tint is the
     one surface where --bad cannot carry text: 4.33:1 in dark. This is the
     lifted red the meter's low number takes there. Light already clears it
     (5.25:1), so here it is the same colour as --bad. */
  --bad-on-tint:   #b3372d;

  /* elevation — a three-step ramp. Each step is one soft shadow (a contact
     shadow plus an ambient one at most); glow never substitutes for it. */
  --shadow-1:      0 1px 2px rgba(15, 19, 25, .06);
  --shadow-2:      0 8px 24px -10px rgba(15, 19, 25, .14), 0 1px 2px rgba(15, 19, 25, .06);
  --shadow-3:      0 24px 52px -24px rgba(15, 19, 25, .22), 0 2px 6px -2px rgba(15, 19, 25, .08);
  --overlay:       rgba(15, 19, 25, .45);

  /* radii — cards 12px, controls 8px (§12.3); 16px is the device/panel frame */
  --r-sm:          8px;
  --r:             12px;
  --r-lg:          12px;
  --r-xl:          16px;
  --r-pill:        999px;

  /* spacing — 8px grid, plus the 4px half-step the old layouts already use */
  --sp-1:          4px;
  --sp-2:          8px;
  --sp-3:          12px;
  --sp-4:          16px;
  --sp-5:          24px;
  --sp-6:          32px;
  --sp-7:          48px;
  --sp-8:          72px;
  --sp-9:          96px;
  --sp-10:         128px;
  --hero-y:        clamp(72px, 9vw, 132px);   /* landing hero, fluid */
  --section-y:     clamp(64px, 8vw, 112px);   /* landing section rhythm */

  /* type */
  --f-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display:    clamp(40px, 6.5vw, 74px);  /* landing hero only */
  --fs-title:      clamp(24px, 3.4vw, 36px);  /* landing section titles */
  --fs-lead:       clamp(16px, 1.25vw, 18px); /* hero subheadline */
  --fs-h1:         28px;
  --fs-h2:         20px;
  --fs-h3:         16px;
  --fs-body:       14px;
  --fs-sm:         13px;
  --fs-xs:         12px;
  --fs-metric:     clamp(24px, 2.8vw, 34px);  /* the big number on a stat card */

  --lh-display:    1.04;
  --lh-tight:      1.25;
  --lh:            1.55;
  --lh-copy:       1.62;

  --track-display: -0.035em;
  --track-head:    -0.018em;
  --track-cap:     0.08em;   /* small caps labels: evidence, not decoration */

  --measure:       62ch;
  --measure-wide:  68ch;
  --measure-tight: 46ch;

  --fw-r:          400;
  --fw-m:          500;
  --fw-s:          600;
  --fw-b:          700;
  --fw-x:          800;      /* display headline only: opens the gap to the
                                working UI scale (cards run at 600) */

  /* motion — a material-ish curve, never `ease`. In-product transitions stay
     <= 200ms; --t-reveal is the landing entrance only and is armed by
     [data-motion="on"], so a broken observer can never blank the page. */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-amb:      cubic-bezier(0.2, 0.8, 0.2, 1);   /* the curve the accepted
                                                        v4 reference uses */
  --t-fast:        120ms;
  --t:             160ms;
  --t-slow:        200ms;
  --t-reveal:      520ms;
  --reveal-stagger: 70ms;
  --drift:         68s;      /* the one long ambient loop in app.css §16 */

  /* layout */
  --sidebar-w:     240px;
  --maxw:          1120px;
}

[data-theme="dark"] {
  /* surfaces — deepest layer / panel layer / hover-selected layer */
  --bg:            #0c0c0e;   /* near-black neutral; the amber accent is the hue */
  --bg-deep:       #08080a;   /* sidebar, one step darker than the page */
  --surface:       #131317;
  --surface-2:     #1a1a1f;
  --surface-3:     #22222a;

  /* glass and light — warm off-white hairlines (243, 241, 237) */
  --glass:          rgba(19, 19, 23, 0.72);
  --glass-2:        rgba(8, 8, 10, 0.60);
  --hairline-top:   rgba(243, 241, 237, 0.09);
  --hairline-brand: rgba(243, 241, 237, 0.32);
  --edge:           rgba(243, 241, 237, 0.15);  /* one step above --line */
  --edge-2:         rgba(243, 241, 237, 0.20);
  --ring-line:      rgba(255, 255, 255, 0.05);
  --shade-inset:    rgba(0, 0, 0, 0.35);
  --grid-line:      rgba(255, 255, 255, 0.032);
  --ambient-1:      rgba(217, 160, 60, 0.13);   /* accent hue, no second hue */
  --ambient-2:      rgba(150, 110, 40, 0.10);   /* same hue, deeper, quieter */
  --focus:          rgba(217, 160, 60, 0.38);
  --brand-hover:    #e4b15c;
  --brand-shadow:   0 12px 26px -14px rgba(217, 160, 60, 0.65);

  /* gradient light — the same tokens, dark values. Dark light: the base stays
     near-black, surfaces lift a few percent, nothing glows. */
  --glow-1:        rgba(217, 160, 60, 0.12);
  --glow-2:        rgba(150, 110, 40, 0.09);

  /* The page / hero light. Dark: the amber pool itself. Light: white — on a
     near-white floor an accent tint can only darken it, and --ink-3 and the
     accent text measured under 4.5:1 the moment one was laid down. */
  --page-light-1:  rgba(217, 160, 60, 0.12);
  --page-light-2:  rgba(150, 110, 40, 0.09);
  --sheen:         rgba(255, 255, 255, 0.055);
  --sheen-2:       rgba(255, 255, 255, 0.03);
  --rim-1:         rgba(217, 160, 60, 0.60);
  --rim-2:         rgba(255, 255, 255, 0.12);
  --brand-lit:     #e9c177;   /* top stop of the amber gradient; --brand-ink
                                on it is 10.9:1 */
  --mask-on:       #000000;
  --sidebar-fill:  rgba(8, 8, 10, 0.88);

  /* text */
  --ink:           #f3f1ed;
  --ink-2:         #ada8a0;
  --ink-3:         #948f84;   /* board #7C776F = 3.9:1 on --surface-2; lightened */

  /* lines — translucent, so the same border reads correctly on every layer */
  --line:          rgba(243, 241, 237, 0.075);
  --line-2:        rgba(243, 241, 237, 0.055);  /* one step fainter: table separators */

  /* brand — the only accent */
  --brand:         #d9a03c;
  --brand-ink:     #1a1204;   /* dark label on the accent fill: 8.0:1 */
  --brand-soft:    rgba(217, 160, 60, 0.15);
  --brand-soft-2:  rgba(217, 160, 60, 0.30);

  /* semantics — high-saturation text on low-saturation dark fills */
  --ok:            #5fbf8b;
  --ok-soft:       rgba(95, 191, 139, 0.13);
  --warn:          #d9a03c;
  --warn-soft:     rgba(217, 160, 60, 0.14);
  --bad:           #db6b5f;
  --bad-soft:      rgba(219, 107, 95, 0.13);

  /* Chip backings — the opaque values the .score--* rules use (see the long
     note in :root, and why it exists: 3.63:1 on a selected row). Each one is
     the band tint above composited over --surface #131317 and written solid. */
  --chip-high-bg:  #1d2926;   /* rgba(95, 191, 139, .13) over --surface */
  --chip-mid-bg:   #2f271c;   /* rgba(217, 160, 60, .14) over --surface */
  --chip-fair-bg:  #2f271c;   /* same tint; this band's text is --ink-2 */
  --chip-low-bg:   #2d1e20;   /* rgba(219, 107, 95, .13) over --surface */

  /* The selected row's warm tint is the one surface --bad cannot carry text
     on: 4.33:1. This lifted red reads 4.94:1 there and 5.93:1 on --surface-2
     (a selected row that is also hovered). Every other band already clears. */
  --bad-on-tint:   #e07a6e;

  /* elevation — dark surfaces get a soft, DARK shadow (never a light glow):
     enough to separate a card from the page, invisible as "effect". */
  --shadow-1:      0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2:      0 6px 18px -8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-3:      0 22px 48px -24px rgba(0, 0, 0, 0.75), 0 2px 8px -4px rgba(0, 0, 0, 0.45);
  --overlay:       rgba(0, 0, 0, .60);
}

/* ==========================================================================
   site/site.css — layout for the standalone content pages (/pricing, /faq).

   Colours are NOT written here. The build (site/build-site.mjs) extracts the
   :root and [data-theme="dark"] blocks from src/styles/tokens.css and
   prepends them to this file, so the palette has exactly one home; the build
   fails if a colour literal ever appears below this comment.

   Engine: Chromium 83. No inset, no gap on a flex container, no :is() /
   :where() / :has(), no :focus-visible, no accent-color, no aspect-ratio,
   no overflow: clip, no margin-inline, no color-mix(), no @container,
   no CSS nesting. (The build lints this file for exactly that list.)
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus,
button:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  top: 0;
  left: -9999px;
}

.skip:focus {
  top: var(--sp-2);
  left: var(--sp-4);
  z-index: 20;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background-color: var(--surface-3);
  color: var(--ink);
}

.wrap {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

/* -------------------------------------------------------------------- head */

.site-head {
  background-color: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  margin-right: var(--sp-2);
  color: var(--brand);
}

.brand__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-s);
  letter-spacing: var(--track-head);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

.site-nav a {
  margin-left: var(--sp-4);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.site-nav a:hover {
  color: var(--brand);
}

.site-nav a.is-here {
  color: var(--ink);
  font-weight: var(--fw-m);
}

/* --------------------------------------------------------------- structure */

.hero {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-7);
}

.eyebrow {
  margin: 0 0 var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-s);
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: var(--fw-x);
}

h2 {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  font-weight: var(--fw-b);
}

h3 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: var(--track-head);
  font-weight: var(--fw-s);
}

.lead {
  max-width: var(--measure);
  margin: var(--sp-4) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-copy);
}

.section {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-top: 1px solid var(--line);
}

.section__intro {
  max-width: var(--measure-wide);
  margin: var(--sp-3) 0 0;
  color: var(--ink-2);
}

.section__foot {
  max-width: var(--measure-wide);
  margin: var(--sp-5) 0 0;
  color: var(--ink-2);
}

.muted {
  color: var(--ink-2);
}

.note {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------- callout */

.callout {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
  background-color: var(--surface);
}

.callout p {
  margin: var(--sp-3) 0 0;
  color: var(--ink-2);
}

.callout p:first-child {
  margin-top: 0;
}

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

/* ----------------------------------------------------------------- pricing */

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.card {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface);
  box-shadow: var(--shadow-1);
}

.card--popular {
  border-color: var(--brand);
}

.badge {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background-color: var(--brand);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-s);
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
}

.tier__price {
  margin: var(--sp-3) 0 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--fw-b);
  letter-spacing: var(--track-head);
}

.tier__per {
  margin: var(--sp-1) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.tier__time {
  margin: var(--sp-4) 0 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-m);
}

.deliverables {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.deliverables li {
  position: relative;
  margin-top: var(--sp-2);
  padding-left: 24px;
  color: var(--ink-2);
}

.deliverables svg {
  position: absolute;
  top: 3px;
  left: 0;
  color: var(--ok);
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.plan {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface);
}

.plan__price {
  margin: 0;
  font-size: 26px;
  font-weight: var(--fw-b);
  letter-spacing: var(--track-head);
}

.plan p {
  margin: var(--sp-3) 0 0;
  color: var(--ink-2);
}

.rows {
  max-width: var(--measure-wide);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.rows li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-2);
}

.rows li:first-child {
  border-top: 1px solid var(--line-2);
}

.rows__label {
  color: var(--ink-2);
}

.rows__amt {
  margin-left: var(--sp-4);
  color: var(--ink);
  font-weight: var(--fw-s);
}

.label {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.bullets {
  max-width: var(--measure-wide);
  margin: var(--sp-4) 0 0;
  padding-left: 20px;
  color: var(--ink-2);
}

.bullets li {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------- faq */

.faq {
  margin-top: var(--sp-6);
}

.faq__item {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-2);
}

.faq__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.faq__q {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  font-weight: var(--fw-s);
}

.faq__n {
  margin-right: var(--sp-2);
  color: var(--brand);
}

.faq__a {
  max-width: var(--measure-wide);
  margin-top: var(--sp-3);
  color: var(--ink-2);
}

.faq__a p {
  margin: 0 0 var(--sp-3);
}

.faq__a p:last-child {
  margin-bottom: 0;
}

.faq__a ul {
  margin: var(--sp-2) 0 var(--sp-3);
  padding-left: 20px;
}

.faq__a li {
  margin-top: var(--sp-1);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-s);
  line-height: 1.4;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background-color: var(--brand);
  color: var(--brand-ink);
}

.btn--primary:hover {
  background-color: var(--brand-hover);
}

.btn--ghost {
  border-color: var(--edge);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink-3);
}

.btn-row {
  margin-top: var(--sp-5);
}

.btn-row .btn {
  margin: 0 var(--sp-3) var(--sp-3) 0;
}

/* ------------------------------------------------------------------ footer */

.site-foot {
  border-top: 1px solid var(--line);
  background-color: var(--bg-deep);
}

.site-foot .wrap {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.site-foot__brand {
  color: var(--ink);
  font-weight: var(--fw-s);
}

.site-foot__links {
  margin-top: var(--sp-3);
}

.site-foot__links a {
  margin-right: var(--sp-4);
  color: var(--ink-2);
}

.site-foot__links a:hover {
  color: var(--brand);
}

.site-foot__fine {
  margin-top: var(--sp-5);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------- responsive */

@media (min-width: 760px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 920px) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .site-nav {
    width: 100%;
    margin-top: var(--sp-3);
    margin-left: 0;
  }

  .site-nav a:first-child {
    margin-left: 0;
  }

  .hero {
    padding-top: var(--sp-7);
  }

  .section {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .tier__price {
    font-size: 28px;
  }
}