/* ==========================================================================
   CLEANING TIDE: shared tokens + components
   Extracted from berryclean.com (captured 2026-07-30; Webflow, single
   306 KB kit stylesheet, Lottie toggles, Finsweet CMS filtering).
   San Francisco Bay Area and Los Angeles house and office cleaning.

   PHASE 2 CORRECTIONS. Four, and three of them would have shipped a
   different system.

   1. THE BRAND COLOUR IS DECLARED AS A NAMED KEYWORD. The token block says
      --berry-clean-red: red. Every hex-ranking sweep is therefore blind to
      it: css-extract read 56 CSS sources and #ff0000 does not appear in its
      top-30 declaration table at all. The rendered census puts pure red 4th
      by painted area (1,482,816 px), on 72 elements, 7 of 11 buttons, the
      announcement bar and the whole footer. This is the inverse of the dead
      token trap and it is worse: a colour absent from the table cannot even
      be flagged as suspicious.

   2. THE ENTIRE DECLARED BUTTON SYSTEM RENDERS ON ZERO PAGES.
      .button-primary and .button-secondary arrive complete with hover
      transforms, a .3s transition, a #cf0523 hover fill and five size
      variants. A class-usage count across all 50 crawled pages returns 0
      and 0. They are stock Webflow template CSS the site never removed.
      The real buttons are .button-4 (63 uses), .white-button (23),
      .rounded-red-button (5) and .request-quote-button. Three of those four
      have no hover state at all.

   3. THREE COLOURS READ AS DEAD ON THE HOMEPAGE AND ARE NOT.
      #108f84 renders only at 82% alpha, so an opaque-hex check misses it
      while the painted-area census scores it at 51,875 px. #ff3a3a is the
      one authored hover fill and a resting probe can never see it. #970000
      is alive on 22 selectors, every one of them a hero overlay on a page
      other than the homepage. Only #b9b9b933 is genuinely dead.

   4. THE SITEMAP LISTED 41 URLS AND THE SITE HAS 50. The link graph found
      an entire five-page /service-areas/ template plus /residential/ that
      no sitemap references. Eight of this kit's 43 patterns live only on
      those pages.

   THE IDENTITY is pure red over near-white, with a teal that arrives only
   as a gradient, a blob and a check mark. Red measures 4.00:1 on white,
   which is below the body-text threshold, and the source uses it for 50
   body-size elements anyway. So in this kit red is a GROUND and a display
   ink; --accent-deep #970000 (9.07:1) carries every red that sits at
   reading size. #970000 is the source's own --dark-red, not an invention.
   The same correction applies to the body grey: #7a7a7a measures 4.29:1
   and is darkened the minimum needed to clear 4.5 on all three grounds.
   Both corrections are recorded in brand-spec.md.

   GEOMETRY is square by default. The radius census returns 0px on 26 boxes
   and every real button except one is a rectangle. A 10px register carries
   cards, a 2em register carries the nav's bottom corners and the referral
   step cards, and one true pill exists (.rounded-red-button, 10rem, on 5
   pages). Shadows are almost absent: one 0 5px 18px card shadow at 3%
   opacity and a 0 2px 5px button shadow.

   THE SIGNATURE is a corner-anchored two-layer gradient scrim. Every hero
   on the site is a photograph under a directional linear wash plus a radial
   bloom anchored to a corner, in four toned variants. The homepage is the
   only place the teal-deep #21524e ever paints.

   ONE DELIBERATE EXECUTION CHANGE. The source's wave divider ships as a
   CDN-hosted SVG at a fixed fill; it is re-authored here as inline SVG
   using currentColor so it recolours across all four palettes. The path
   data is the source's, unchanged.

   ONE INVENTION, declared. The source has no branded focus ring anywhere:
   its inputs use unmodified Webflow defaults. An accessible ring is
   authored below. Nothing else in this file is invented.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* COLOR, ink. The source sets section headings in #262626 and body copy
     in #7a7a7a. The heading ink is kept exactly. The body grey measures
     4.29:1 on white and 4.04:1 on the site's own #f8f8f8 ground, so it is
     darkened to the nearest value that clears 4.5 on white, paper-alt and
     the mint tint alike. The original is kept as --ink-quiet for doc
     chrome, which is the only place it is allowed to appear. */
  --ink: #262626;
  --ink-soft: #3d3d3d;
  --ink-body: #707070;
  --ink-quiet: #7a7a7a;        /* doc chrome only, never body copy */

  /* COLOR, brand. Red is the identity. It is a GROUND and a display ink,
     never a reading-size text colour: see the header note. --accent-deep is
     the source's own --dark-red, promoted here to carry small text and any
     ground that has to hold small text. --accent-hover is the one hover
     fill the source authored. */
  --accent: #ff0000;
  --accent-deep: #970000;
  --accent-hover: #ff3a3a;
  --accent-soft: rgba(255, 0, 0, .06);

  /* COLOR, teal. Arrives as a gradient stop, a blob, a check mark and a
     tab fill. At 3.97:1 on white it is decorative and never body text;
     --teal-deep carries any teal that has to be read. */
  --teal: #108f84;
  --teal-alpha: rgba(16, 143, 132, .82);   /* the value that actually paints */
  --teal-deep: #21524e;
  --teal-soft: rgba(16, 143, 132, .12);

  /* COLOR, grounds */
  --paper: #ffffff;
  --paper-alt: #f8f8f8;
  --tint: #eff8f7;             /* the mint band, rendered at 59% */
  --band-dark: #1c1c1c;

  /* COLOR, on-dark text */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .86);
  --on-dark-quiet: rgba(255, 255, 255, .70);

  /* COLOR, rules */
  --border: #dfdfdf;
  --border-soft: rgba(38, 38, 38, .12);
  --rule: #e5e5e5;

  /* TYPE, Montserrat is the source's own face, served free from Google
     Fonts across the full 100 to 900 range. No substitution, therefore no
     display metrics to re-tune. */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* TYPE, fluid ramp. Desktop targets measured at 1440:
     hero 54.4 / section head 50 / red display 48 / faq 25 / label 16 /
     body 16 / small 13. The -.04em tracking on the 50px heading is the
     source's and it is what gives the system its tight heading colour. */
  --text-display: clamp(2rem, 2.6vw + 1.15rem, 3.4rem);
  --text-h2: clamp(1.75rem, 2.4vw + 1rem, 3.125rem);
  --text-h3: clamp(1.25rem, .8vw + 1rem, 1.5625rem);
  --text-h4: 1.1rem;
  --text-lede: clamp(1rem, .35vw + .92rem, 1.125rem);
  --text-small: .8125rem;
  --lead-display: 1.2;
  --track-display: -.04em;

  /* SPACE */
  --gap: 24px;
  --gutter: 2rem;
  --section: 88px;
  --section-sm: 56px;
  --section-lg: 120px;
  --maxw: 1200px;

  /* SHAPE, three registers, all extracted. */
  --radius: 10px;              /* cards, white button, quote button */
  --radius-lg: 16px;           /* price cards */
  --radius-2em: 2em;           /* nav bottom corners, referral step cards */
  --radius-cap: 20px 20px 0 0; /* card image cap */
  --radius-disc: 50%;
  --radius-pill: 10rem;        /* the one true pill */

  /* The source's only two shadows. */
  --shadow-card: 0 5px 18px 0 rgba(46, 46, 46, .08);
  --shadow-btn: 0 2px 5px rgba(0, 0, 0, .2);

  --t-fast: 200ms;
  --t-med: 350ms;
  --ease: cubic-bezier(.645, .045, .355, 1);   /* the source's own easing */
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  font-weight: 600;
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  overflow-wrap: break-word;
}

h1, .h1, .display { font-size: var(--text-display); font-weight: 700; }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: -.02em; }
h4, .h4 { font-size: var(--text-h4); font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.lede { font-size: var(--text-lede); line-height: 1.65; color: var(--ink-body); }
.small { font-size: var(--text-small); }
.fine { font-size: var(--text-small); color: var(--ink-body); }
.center { text-align: center; }

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

/* THE ONE INVENTION. The source ships no branded focus state: its inputs
   are unmodified Webflow, and three of its four buttons do not even have a
   hover. An accessible ring is authored here. */
:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.on-red :focus-visible,
.footer :focus-visible { outline-color: var(--on-dark); }

/* ==== layout ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; position: relative; }
.section.tight { padding: var(--section-sm) 0; }
.section.wide { padding: var(--section-lg) 0; }
.section.alt { background: var(--paper-alt); }
.section.tinted { background: var(--tint); }

/* A dark or red ground never relies on the class alone: every selector that
   paints one re-asserts its own ink. See the light-ground override block at
   the foot of this file. */
.section.on-red { background: var(--accent-deep); color: var(--on-dark-muted); }
.section.on-red h1, .section.on-red h2, .section.on-red h3, .section.on-red h4 { color: var(--on-dark); }
.section.on-dark { background: var(--band-dark); color: var(--on-dark-muted); }
.section.on-dark h1, .section.on-dark h2, .section.on-dark h3, .section.on-dark h4 { color: var(--on-dark); }

/* The bright red band. Reserved for sections whose only text is display
   type or a button label, because white on #ff0000 is 4.00:1 and clears
   the large-text threshold but not the body-text one. */
.section.on-accent { background: var(--accent); color: var(--on-dark); }
.section.on-accent h1, .section.on-accent h2, .section.on-accent h3 { color: var(--on-dark); }

/* ==== buttons ===========================================================
   Four real shapes, all extracted. Every one of them is given the hover the
   source authored on .rounded-red-button, because three of the four ship
   with no hover state at all. That is the documented fix, not a transcript.
   ======================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: .95rem 2rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

/* .button-4, 63 uses. Square, red, near-white label. */
.btn-primary { background: var(--accent); color: var(--paper-alt); }
.btn-primary:hover { background: var(--accent-hover); color: var(--paper); }

/* .white-button, 23 uses. White ground, red label, 10px, soft shadow. The
   label is set in --accent-deep because it reads at button size. */
.btn-white {
  background: var(--paper);
  color: var(--accent-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
}
.btn-white:hover { background: var(--accent-deep); color: var(--paper); }

/* .rounded-red-button, 5 uses. The one true pill, and the only shape whose
   hover the source actually authored. */
.btn-pill {
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius-pill);
  padding: .875rem 1.75rem;
  font-size: 1.05rem;
}
.btn-pill:hover { background: var(--accent-hover); color: var(--paper-alt); }

/* .request-quote-button, the hero CTA. 10px, red, fixed 240x50 on the
   source; sized here by its own padding so it survives a long label. */
.btn-quote {
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius);
  padding: .85rem 2rem;
  font-size: 1.1rem;
}
.btn-quote:hover { background: var(--accent-hover); }

/* The membership outline button. The source sets border and label in teal
   at 3.97:1; the label is moved to --teal-deep so it reads. */
.btn-outline {
  background: transparent;
  color: var(--teal-deep);
  border: 1px solid var(--teal);
  border-radius: 50px;
  min-height: 56px;
  width: 100%;
  font-size: 1rem;
}
.btn-outline:hover { background: var(--teal-deep); color: var(--paper); border-color: var(--teal-deep); }

.btn-sm { font-size: 1rem; padding: .7rem 1.4rem; }
.btn-lg { font-size: 1.25rem; padding: 1.1rem 2.6rem; }

/* On a red or dark ground the white button inverts rather than vanishing. */
.on-red .btn-white, .on-dark .btn-white, .hero .btn-white { color: var(--accent-deep); }
.on-red .btn-primary, .footer .btn-primary { background: var(--paper); color: var(--accent-deep); }
.on-red .btn-primary:hover, .footer .btn-primary:hover { background: var(--paper-alt); color: var(--accent-deep); }

/* The inline text CTA the source repeats under nearly every section lede.
   Verbatim label: "Request a quote >". The source paints these in --primary-1
   #ed5521, a Webflow template leftover that renders at rest on 7 homepage
   elements and measures 3.55:1 on white. Set in --accent-deep here. */
.link-cta {
  display: inline-block;
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-soft);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease);
}
.link-cta:hover { border-bottom-color: var(--accent-deep); }
.on-red .link-cta, .on-dark .link-cta { color: var(--on-dark); border-bottom-color: rgba(255,255,255,.35); }
.on-red .link-cta:hover, .on-dark .link-cta:hover { border-bottom-color: var(--on-dark); }

/* ==== the section label ================================================
   .title-large-2 on the source: red, uppercase, 16px, 2px tracking, above
   the section heading on the homepage and every service-area page. It is
   genuine page grammar, so it is carried under the documented carve-out
   with a neutral class name, no dash, no stripe and no mono face.
   ======================================================================== */
.sec-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 .6em;
}
.on-red .sec-label, .on-dark .sec-label, .hero .sec-label { color: var(--on-dark); }

.title-block { max-width: 760px; margin: 0 auto var(--gap); text-align: center; }
.title-block .lede { margin-bottom: 1.1em; }
.title-block.left { margin-left: 0; text-align: left; }

/* ==== the signature scrim ==============================================
   A directional linear wash plus a radial bloom anchored to a corner, over
   a photograph. Four toned variants, all four the source's own values.
   ======================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--teal-deep);
  background-size: cover;
  background-position: 50% 50%;
  color: var(--on-dark);
  /* The bottom pad has to clear the wave, which sweeps up to 230px. Sizing
     it against the wave rather than by eye is what keeps the rating strip
     off the white. The contrast walker cannot see this: it resolves the
     hero's painted base, not the pixels the wave puts there. */
  padding: clamp(3.5rem, 7vw, 7.975rem) 0 clamp(7rem, 17vw, 15rem);
}
.hero h1, .hero h2, .hero h3 { color: var(--on-dark); }
.hero .lede { color: var(--on-dark-muted); }
.hero > .container { position: relative; z-index: 3; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Where the nav sits over the hero, the top band gets a wash of its own so
   the links stay legible against whatever the photograph is doing up there.
   On the source the mural is dark under the nav and the corner bloom does
   this job; on a stock photograph it has to be declared. Same device, made
   explicit. */
.hero.has-nav .hero-scrim::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(20, 40, 38, .72), rgba(20, 40, 38, 0));
}
/* Homepage: teal. The only place --teal-deep ever paints. */
.hero-scrim.teal {
  background-image:
    linear-gradient(90deg, var(--teal-deep) 14%, rgba(33, 82, 78, 0) 46%),
    radial-gradient(circle at 0%, rgba(33, 82, 78, .89) 29%, rgba(33, 82, 78, 0) 65%);
}
/* Service pages: red to-right wash over a dark-red radial. */
.hero-scrim.red {
  background-image:
    linear-gradient(to right, var(--accent-deep) 27%, rgba(151, 0, 0, 0) 70%),
    radial-gradient(circle farthest-corner at 0% 50%, rgba(80, 0, 0, .92) 13%, rgba(80, 0, 0, 0) 75%);
}
/* Service-area pages: the same construction rotated to 72deg. */
.hero-scrim.angle {
  background-image:
    linear-gradient(72deg, var(--accent-deep) 5%, rgba(151, 0, 0, 0) 40%),
    radial-gradient(circle farthest-corner at 0% 100%, rgba(151, 0, 0, .95), rgba(151, 0, 0, 0));
}
/* Blog articles: a flat wash, the source's #970000ba. */
.hero-scrim.flat { background-color: rgba(151, 0, 0, .85); }

/* The directional wash is sized in percentages, so on a phone it covers a
   far smaller share of the copy than it does at 1440 and the lede ends up
   over open photograph. Below the tablet breakpoint each scrim gains a flat
   floor of its own tone. */
@media (max-width: 880px) {
  .hero-scrim.teal { background-color: rgba(33, 82, 78, .78); }
  .hero-scrim.red, .hero-scrim.angle { background-color: rgba(151, 0, 0, .78); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-grid > * { min-width: 0; }
/* Measured against the source: its h1 sets to three lines at 1440 and runs
   to roughly half the viewport. A ch-based cap wrapped it to five, which is
   the collapsed-hierarchy failure no DOM gate can see. */
.hero-copy { max-width: 46rem; }
.hero-copy .lede { max-width: 42rem; }
.hero .btn-quote, .hero .btn-white { margin-top: .6rem; }

/* The rating strip. "4.8 stars on" followed by the source mark. */
.rating-strip {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.4rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--on-dark);
}
.rating-strip .stars { letter-spacing: .12em; color: #ffc700; font-size: 1.05rem; }

/* The review-count badge above the h1 on the membership and gift heroes. */
.badge-pill {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-pill);
  padding: .4rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--on-dark);
}

/* ==== the wave divider =================================================
   The source's path, re-authored as inline SVG on currentColor so it
   recolours with the palette. This is the one deliberate execution change.
   ======================================================================== */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  line-height: 0;
  color: var(--paper);
  pointer-events: none;
}
/* The source's wave is a deep sweep, not a trim: it takes roughly a third
   of the hero's height and leaves the bottom-left corner in brand colour. */
.wave svg { display: block; width: 100%; height: clamp(90px, 15vw, 230px); }
.wave.alt { color: var(--paper-alt); }
.wave.tinted { color: var(--tint); }

/* ==== the blurred bubbles ==============================================
   Real backdrop-filter, three sizes, hidden below the tablet breakpoint
   exactly as the source hides them.
   ======================================================================== */
.bubbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bubble {
  position: absolute;
  border-radius: var(--radius-disc);
  background-color: var(--teal-alpha);
  -webkit-backdrop-filter: blur(.0625rem);
  backdrop-filter: blur(.0625rem);
}
.bubble.lg {
  width: 7.5rem; height: 7.5rem;
  background-image: radial-gradient(circle, var(--teal-deep), var(--teal-alpha));
  -webkit-backdrop-filter: blur(.125rem);
  backdrop-filter: blur(.125rem);
}
.bubble.md { width: 4.25rem; height: 4.25rem; }
.bubble.sm { width: 3.125rem; height: 3.125rem; }
.bubble.b1 { right: -3%; bottom: -6%; }
.bubble.b2 { left: 13%; bottom: -4%; }
.bubble.b3 { right: -2%; top: 14%; }
.bubble.b4 { left: 4%; top: 22%; }
.bubble.b5 { right: 22%; top: 6%; }
@media (max-width: 991px) { .bubbles { display: none; } }

/* ==== the teal blob ====================================================
   .green-oval, 100px 75% 60%. One rendered instance on the source and
   unmistakably deliberate.
   ======================================================================== */
.blob {
  position: absolute;
  width: 225px;
  height: 175px;
  border-radius: 100px 75% 60%;
  background: var(--teal-alpha);
  z-index: 0;
}

/* ==== cards ============================================================= */
.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-cap); }
.card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-body h3, .card-body .h3 { color: var(--accent-deep); margin: 0; font-size: 1.15rem; }
.card-body p { color: var(--ink-body); margin: 0; font-size: .95rem; }
.card-body .link-cta { margin-top: auto; padding-top: .6rem; font-size: .9rem; }

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid > * { min-width: 0; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid.five { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

/* The image-ground service card: photo behind, copy over a dark base. */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--ink);         /* solid floor under the image */
  background-size: cover;
  background-position: 50% 50%;
  color: var(--on-dark);
  text-decoration: none;
  min-width: 0;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 28, 28, .88) 12%, rgba(28, 28, 28, .18) 62%, rgba(28, 28, 28, .05));
}
.tile > * { position: relative; z-index: 1; }
.tile h3 { color: var(--on-dark); margin: 0 0 .35rem; }
.tile p { color: var(--on-dark-muted); font-size: .95rem; margin: 0 0 .6rem; }
.tile .link-cta { color: var(--on-dark); border-bottom-color: rgba(255,255,255,.4); align-self: flex-start; }
.tile:hover .link-cta { border-bottom-color: var(--on-dark); }

/* ==== reviews =========================================================== */
.review {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.5rem;
  break-inside: avoid;
  margin-bottom: var(--gap);
  min-width: 0;
}
/* The source ships its star row as a gold raster. Rebuilt as type, the same
   gold measures 1.56:1 on a white card, so the review row uses a deepened
   amber that clears AA. The hero strip keeps the bright gold because it
   only ever sits on a dark scrim. */
.review .stars { color: #8f6900; letter-spacing: .1em; font-size: 1.05rem; }
.review .source { float: right; font-size: .8rem; font-weight: 700; color: var(--ink-body); }
.review blockquote { margin: .7rem 0 1rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.65; }
.review .who { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); font-size: .9rem; }
/* The initial in the review avatar is kit-authored decoration, so it is
   marked kit-note and the verbatim gate strips it before matching the name.
   The .dot rule outranks .kit-note on specificity; font-style is the one
   property that has to be reasserted. */
.review .who .dot {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-disc);
  background: var(--teal-soft);
  display: grid; place-items: center;
  color: var(--teal-deep); font-size: .8rem;
  font-style: normal; font-weight: 700;
}
.review-masonry { columns: 3; column-gap: var(--gap); }
@media (max-width: 980px) { .review-masonry { columns: 2; } }
@media (max-width: 640px) { .review-masonry { columns: 1; } }

/* ==== FAQ =============================================================== */
.faq-row {
  border: 1px solid var(--accent);
  border-radius: var(--radius-2em);
  padding: .9rem 1.4rem;
  margin-bottom: .75rem;
  background: var(--paper);
}
.faq-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--accent-deep);
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-deep);
  transition: transform var(--t-fast) var(--ease);
  flex: none;
}
.faq-row[open] summary::after { transform: rotate(45deg); }
.faq-row .answer { padding-top: .75rem; color: var(--ink-body); font-size: .95rem; }

/* ==== service-area columns ============================================== */
/* The source sets the whole region name red, not a red word inside a black
   heading. Colouring the h3 itself rather than its child link keeps the
   source's look and leaves zero accent words inside a heading. */
.area-col h3 { font-size: 1.1rem; margin-bottom: .5rem; color: var(--accent-deep); }
.area-col h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--accent-soft); }
.area-col h3 a:hover { border-bottom-color: var(--accent-deep); }
.area-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.area-col li a { color: var(--ink-body); text-decoration: none; font-size: .95rem; }
.area-col li a:hover { color: var(--accent-deep); }
.city-wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.city-wrap a { color: var(--accent-deep); text-decoration: none; font-size: .95rem; font-weight: 600; }

/* ==== press strip ======================================================= */
.press {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.4rem;
}
.press .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--ink-body);
  opacity: .75;
  padding: .5rem 0;
}

/* ==== checklist ========================================================= */
.checklist { columns: 2; column-gap: 2.5rem; }
.checklist h4 { break-after: avoid; color: var(--ink); margin-bottom: .4rem; }
.checklist ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.checklist li { position: relative; padding-left: 1.6rem; margin-bottom: .35rem; font-size: .95rem; break-inside: avoid; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: var(--radius-disc);
  background: var(--teal);
}
@media (max-width: 720px) { .checklist { columns: 1; } }

/* ==== pricing =========================================================== */
.plan-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--paper-alt);
  border-radius: 30px;
  padding: .35rem;
  margin-bottom: 1.5rem;
}
.plan-switch button {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  border: 0;
  border-radius: 30px;
  padding: .7rem 1.2rem;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.plan-switch button[aria-pressed="true"] { background: var(--teal-deep); color: var(--paper); }

.tabs-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2rem; }
.tabs-row button {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .7rem 1.3rem;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.tabs-row button:hover { border-color: var(--teal); color: var(--teal-deep); }
.tabs-row button[aria-pressed="true"] { background: var(--teal-deep); color: var(--paper); border-color: var(--teal-deep); }

.price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--paper);
  min-width: 0;
}
.price-card .plan-type { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.price-card .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.price-card .was { font-size: 1.1rem; color: var(--ink-body); text-decoration: line-through; margin-right: .45rem; font-weight: 500; }
.price-card .per { font-size: .9rem; color: var(--ink-body); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.price-card li { display: flex; gap: .6rem; font-size: .92rem; color: var(--ink-soft); }
.price-card li .tick { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--teal-deep); font-weight: 700; }

/* ==== steps ============================================================= */
.step-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-2em);
  padding: 1.6rem 1.5rem;
  text-align: center;
  background: var(--paper);
  min-width: 0;
}
.step-card .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: .5rem;
}
.step-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ==== team ============================================================== */
.team-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.team-grid > * { min-width: 0; }
.team-card { text-align: center; }
.team-card .avatar {
  width: 120px; height: 120px; margin: 0 auto .8rem;
  border-radius: var(--radius-disc);
  background: var(--teal-soft);
  display: grid; place-items: center;
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 1.6rem;
}
.team-card .role { color: var(--teal-deep); font-size: .875rem; font-weight: 600; line-height: 1.5; }

/* ==== positions ========================================================= */
.position {
  border-bottom: 1px solid var(--border);
  padding: 1.6rem 0;
}
.position h3 { color: var(--ink); margin-bottom: .5rem; }
.position ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-body); font-size: .95rem; }
.position li { margin-bottom: .25rem; }

/* ==== forms ============================================================= */
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 880px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  width: 100%;
  min-width: 0;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-deep);
  outline: 3px solid var(--teal-soft);
  outline-offset: 0;
}

/* ==== embed panel ======================================================= */
.embed-panel {
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.embed-slot {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  color: var(--ink-body);
}

/* ==== split ============================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split .media img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.split h2 { color: var(--accent-deep); font-weight: 700; letter-spacing: normal; }

.media-frame { position: relative; }
.media-frame .blob { left: -23px; bottom: -40px; }
.media-frame img { position: relative; z-index: 1; }
/* Once the split stacks, a blob hanging 40px below the image reaches into the
   heading underneath it and puts red type on teal at 2.28:1. It is decorative,
   so it tucks back inside the frame rather than the heading moving. */
@media (max-width: 880px) {
  .media-frame .blob { bottom: 24px; left: -12px; width: 150px; height: 118px; }
}

.video-slot {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-dark-muted);
  display: grid;
  place-items: center;
  font-size: .9rem;
}

/* ==== info block ======================================================== */
.info-block { border-left: 3px solid var(--accent); padding-left: 1.2rem; }
.info-block .label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-body); }
.info-block .addr { font-weight: 700; color: var(--ink); }

/* ==== partner =========================================================== */
.partner { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.partner > * { min-width: 0; }
@media (max-width: 880px) { .partner { grid-template-columns: 1fr; } }
.partner .plate {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: var(--ink-body);
}

/* ==== article =========================================================== */
.article-body { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); }
.article-body h2 { font-size: 1.6rem; margin-top: 1.8em; }
.article-body h3 { font-size: 1.25rem; margin-top: 1.6em; }
.stamp { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .875rem; color: var(--ink-body); }

.legal { font-size: .975rem; line-height: 1.8; color: var(--ink-soft); }
.legal h2 { font-size: 1.4rem; margin-top: 1.8em; }

/* ==== call strip ======================================================== */
.call-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; justify-content: center; text-align: center; }
.call-strip p { margin: 0; color: var(--ink-body); font-size: .95rem; }

/* ==== nav ===============================================================
   .navigation-full, on 44 pages: white bar with 2em bottom corners. The
   most-repeated shape in the system.
   ======================================================================== */
.nav {
  background: var(--paper);
  border-radius: 0 0 var(--radius-2em) var(--radius-2em);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 20;
}
.nav > .container { display: flex; align-items: center; gap: 1.5rem; padding-top: .9rem; padding-bottom: .9rem; }
.nav .brand-mark { flex: none; display: block; }
.nav .brand-mark img { height: 48px; width: auto; }
.nav .links { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav .links a {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  transition: color var(--t-med) var(--ease);
}
/* .nav-link is defined in the source stylesheet and used on no crawled page,
   so its #ed5521 hover is dead CSS. The nav hover is authored here. */
.nav .links a:hover { color: var(--accent-deep); }
.nav .actions { display: flex; align-items: center; gap: 1rem; flex: none; }
@media (max-width: 768px) { .nav .actions { display: none; } }

/* The source runs its nav transparent over the hero, with white links and
   the light logo, and reserves the white bar with the 2em bottom corners
   for pages that open on a light ground. Both are the source's; this is the
   one it uses on the homepage and every landing. */
.nav .mark-light { display: none; }
.nav.transparent {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  z-index: 30;
}
.nav.transparent .mark-light { display: block; }
.nav.transparent .mark-ink { display: none; }
.nav.transparent .links a { color: var(--on-dark); }
.nav.transparent .links a:hover { color: var(--on-dark-muted); }
.hero.has-nav { padding-top: clamp(7rem, 11vw, 11rem); }

/* At burger width the shared layer turns .links into a fixed drawer on a
   white ground, so the transparent nav's white links land white on white.
   mobile-responsive.css is linked after this file, so the override needs
   +1 specificity: the body prefix is doing that work, not decoration. */
@media (max-width: 768px) {
  body .nav.transparent .links a { color: var(--ink); }
  body .nav.transparent .links a:hover { color: var(--accent-deep); }
}

/* The promo announcement bar. The source's copy is a dated, emoji-set
   geopolitical promotion and is not transcribable into a template, so the
   bar ships with a labelled slot instead. */
.promo-bar {
  background: var(--accent-deep);
  color: var(--on-dark);
  text-align: center;
  padding: .5rem var(--gutter);
  font-size: .875rem;
  font-weight: 600;
}

/* ==== footer ============================================================
   The source's footer is #ff0000 carrying white body-size links, which is
   4.00:1. The ground moves to --accent-deep so the same layout reads.
   ======================================================================== */
.footer { background: var(--accent-deep); color: var(--on-dark-muted); padding: var(--section) 0 2rem; }
.footer h3, .footer h4 { color: var(--on-dark); }
.footer .top { display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.footer .top > * { min-width: 0; }
@media (max-width: 880px) { .footer .top { grid-template-columns: 1fr; } }
.footer img.logo { height: 96px; width: auto; margin-bottom: 1rem; }
.footer .tagline { font-family: var(--font-display); font-weight: 700; color: var(--on-dark); line-height: 1.5; margin-bottom: 1rem; }
.footer .contact { color: var(--on-dark-muted); font-size: .95rem; line-height: 1.9; }
.footer .contact a { color: var(--on-dark); text-decoration: none; }
.footer .social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer .social span {
  width: 36px; height: 36px;
  border-radius: var(--radius-disc);
  border: 1px solid rgba(255,255,255,.45);
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
  color: var(--on-dark);
}
.footer nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1.5rem; }
.footer nav > * { min-width: 0; }
.footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer nav a { color: var(--on-dark-muted); text-decoration: none; font-size: .95rem; }
.footer nav a:hover { color: var(--on-dark); }
.footer .bottom { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.28); font-size: .85rem; color: var(--on-dark-quiet); }

/* ==== light-ground components inside dark sections ======================
   .section.on-red p (0,2,1) outranks .review blockquote (0,2,0), so a dark
   section's ink rule reaches into any descendant that paints its own light
   ground. Every light-ground component gets its ink re-asserted here at
   higher specificity. REGISTER NEW ONES IN THIS BLOCK AS YOU WRITE THEM.
   ======================================================================== */
.on-red .card, .on-dark .card, .on-accent .card,
.on-red .review, .on-dark .review, .on-accent .review,
.on-red .price-card, .on-dark .price-card,
.on-red .step-card, .on-dark .step-card,
.on-red .faq-row, .on-dark .faq-row { color: var(--ink-body); }

.on-red .card h3, .on-dark .card h3, .on-accent .card h3,
.on-red .card .h3, .on-dark .card .h3 { color: var(--accent-deep); }
.on-red .review blockquote, .on-dark .review blockquote, .on-accent .review blockquote { color: var(--ink-soft); }
.on-red .review .who, .on-dark .review .who, .on-accent .review .who { color: var(--ink); }
.on-red .price-card .plan-type, .on-dark .price-card .plan-type,
.on-red .price-card .price, .on-dark .price-card .price { color: var(--ink); }
.on-red .price-card li, .on-dark .price-card li,
.on-red .step-card p, .on-dark .step-card p { color: var(--ink-soft); }
.on-red .step-card .n, .on-dark .step-card .n { color: var(--accent-deep); }
.on-red .faq-row summary, .on-dark .faq-row summary { color: var(--accent-deep); }
.on-red .card p, .on-dark .card p, .on-accent .card p { color: var(--ink-body); }
.on-red .card .link-cta, .on-dark .card .link-cta, .on-accent .card .link-cta {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-soft);
}

/* ==== doc chrome (index / design-system / sections / pages) ============== */
.ds-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  padding: 1rem var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.ds-nav .lockup-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--ink);
  display: flex; flex-direction: column;
}
.ds-nav .lockup-text small { font-weight: 500; font-size: .8rem; color: var(--ink-body); letter-spacing: 0; }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.ds-nav .tab {
  font-size: .875rem; font-weight: 600; text-decoration: none;
  color: var(--ink-soft);
  padding: .5rem .9rem; border-radius: var(--radius);
}
.ds-nav .tab:hover { background: var(--paper-alt); }
.ds-nav .tab.active { background: var(--accent-deep); color: var(--paper); }

.doc-hero { padding: var(--section-sm) 0; border-bottom: 1px solid var(--border); }
.doc-hero h1 { max-width: 20ch; }
.meta-strip { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 1.5rem; }
.meta-strip div { min-width: 0; }
.meta-strip .k { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-body); }
.meta-strip .v { font-weight: 700; color: var(--ink); }

.door {
  display: block; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; min-width: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.door:hover { border-color: var(--accent-deep); }
.door h3 { color: var(--ink); margin-bottom: .35rem; }
.door p { color: var(--ink-body); font-size: .95rem; margin: 0; }

.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); min-width: 0; }
.swatch .chip { height: 96px; }
.swatch .meta { padding: .7rem .8rem; font-size: .8rem; }
.swatch .meta b { display: block; color: var(--ink); font-size: .875rem; }
.swatch .meta span { color: var(--ink-body); }

.sx-header { padding: var(--section-sm) 0; border-bottom: 1px solid var(--border); }
.sx-index { padding: 2rem 0; border-bottom: 1px solid var(--border); background: var(--paper-alt); }
.sx-index .grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .5rem; }
.sx-index a { font-size: .875rem; color: var(--ink-soft); text-decoration: none; padding: .3rem 0; display: block; }
.sx-index a:hover { color: var(--accent-deep); }

.sx-pattern { padding: 2.5rem var(--gutter); border-bottom: 1px solid var(--border); }
.pattern-meta {
  display: grid; grid-template-columns: 260px 1fr; gap: 1rem 2rem;
  max-width: var(--maxw); margin: 0 auto 1.5rem;
}
.pattern-meta > * { min-width: 0; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; } }
.pattern-meta .id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-body); }
.pattern-meta .num { font-weight: 700; color: var(--ink); }
.pattern-meta .signature {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  background: var(--accent-deep); color: var(--paper);
  padding: .2rem .5rem; border-radius: 3px;
}
.pattern-meta .name { margin: 0; font-weight: 700; color: var(--ink); }
.pattern-meta .purpose { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-body); }
.sx-demo { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sx-demo .demo-label {
  position: absolute; top: 0; left: 0; z-index: 40;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: .25rem .6rem; border-radius: 0 0 var(--radius) 0;
}

.kit-note { color: var(--ink-body); font-size: .9rem; font-style: italic; }
/* A kit-note sets its own ink, so on a dark ground it has to be re-asserted
   the same way every other light-on-dark component is. Same trap as the
   light-ground block above, running the other direction. */
.promo-bar .kit-note,
.hero .kit-note,
.footer .kit-note,
.on-red .kit-note,
.on-dark .kit-note { color: var(--on-dark-muted); }
.tile .kit-note, .video-slot .kit-note { color: var(--on-dark-muted); }

.page-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.page-card .frame { height: 420px; overflow: hidden; background: var(--paper-alt); }
.page-card iframe { width: 1400px; height: 1400px; border: 0; transform: scale(.33); transform-origin: 0 0; }
.page-card .meta { padding: 1rem 1.2rem; }
.page-card .meta h3 { margin-bottom: .2rem; }
.page-card .meta p { margin: 0; font-size: .9rem; color: var(--ink-body); }

/* ==== catalog nesting ===================================================
   sections.html wraps every demo in .sx-pattern > .sx-demo > .container, a
   third padding layer that exists nowhere a section is really rendered.
   Zero it on phones and give the padding back to the meta block alone.
   ======================================================================== */
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { border-radius: 0; border-left: 0; border-right: 0; }
  body .pattern-meta { padding-left: 1rem; padding-right: 1rem; }
  body .sx-header .container, body .sx-index .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ==== responsive ======================================================== */
@media (max-width: 880px) {
  :root { --section: 64px; --section-lg: 80px; --gutter: 1.25rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .partner .plate { padding: 1.4rem 1rem; }
}
@media (max-width: 640px) {
  .review-masonry { columns: 1; }
  .press { gap: .8rem 1.4rem; }
  .press .mark { font-size: .9rem; }
  .footer img.logo { height: 72px; }
}