/* ============================================================
   SIMPLE LAYER — sits on top of site.css.
   Three moves, borrowed from the reference:
     1. a narrow text measure (~660px) instead of 1280px
     2. no card borders — content sits on bare ground
     3. translucent section tints instead of a hard colour switch
   Colours are NOT changed: the palette tokens are untouched and
   every rule here is a size, spacing, border or opacity.
   ============================================================ */

/* ---------- 1. narrow measure for anything that is words ---------- */

.eyebrow,
.h2, .h2--sm, .h2--xs,
.lede,
.hero-sub,
.section-head > div,
.pipe-cue,
.price-foot { max-width: 660px; }

.hero h1 { max-width: 780px; }

/* media still runs wide — that contrast is the point */
.compare, .pipe-view, .frame, .grid-3, .grid-2,
.tool-list, .grid-chips, .grid-chips--lg,
.tiers, .specs, .includes-strip, .waitlist-grid { max-width: none; }

/* ---------- 2. statements, not headlines ---------- */

.h2      { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.2; letter-spacing: -0.02em; }
.h2--sm  { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; }
.h2--xs  { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.2; }

.hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; }
.hero-sub, .lede { font-size: 16px; line-height: 1.65; }
.eyebrow { font-size: 11px; letter-spacing: 0.24em; margin-bottom: 14px; }

.btn { font-size: 15px; padding: 13px 24px; }
.btn--sm { font-size: 13px; padding: 9px 16px; }

/* ---------- 3. strip the boxes ---------- */

.stage, .tool-item, .chip, .spec, .step, .card,
.dummy-none {
  border-color: transparent;
  background: transparent;
}
.stage { border-top-width: 1px; padding: 20px 0 0; }
.tool-item { padding: 9px 0; gap: 12px; }
.chip  { padding: 11px 0; gap: 12px; }
.spec  { padding: 16px 0; }
.step  { padding: 14px 0; }
.card  { padding: 22px 0; }

/* hairlines instead of outlines */
.tool-item, .chip { border-bottom: 1px solid var(--line); border-radius: 0; }
.tool-list  { gap: 0 28px; }
.grid-chips, .grid-chips--lg { gap: 0 28px; }

/* images sit on the page, not in frames */
.frame { border-color: transparent; }
.compare { border-color: transparent; }
.pipe-view { border-color: transparent; }

/* accordions keep their original card design — only the type is smaller */
.acc > summary { padding: 16px 20px; font-size: 16px; }
.acc-body p { padding: 0 20px 16px; font-size: 15px; }
.acc > summary i { font-size: 17px; }


/* form keeps a container — it is an actual object on the page */
.form-card { border-radius: 10px; padding: 28px 26px; }

/* ---------- 4. quieter surfaces and motion ---------- */

/* a translucent lift rather than a different colour */
.section--alt { background: rgba(21, 25, 29, 0.40); }

.section > .wrap,
.section--tight > .wrap { padding-top: 72px; padding-bottom: 72px; }
.hero .wrap { padding-top: 72px; padding-bottom: 64px; }

.glow--hero, .glow--blue, .glow--foot { opacity: .45; }
.dot::after { display: none; }          /* stop the pulsing */
.stat:hover, .tool-item:hover, .chip:hover,
.card:hover, .who div:hover, .pass:hover { transform: none; }
.tool-item:hover span, .chip:hover .chip-name { color: var(--teal); }

/* the stat line under the hero */
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 28px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted);
}
.hero-facts b { color: var(--text); font-weight: 700; margin-right: 6px; }

@media (max-width: 900px) {
  .tool-list, .grid-chips, .grid-chips--lg, .specs { gap: 0 20px; }
}
@media (max-width: 640px) {
  .section > .wrap, .section--tight > .wrap { padding-top: 48px; padding-bottom: 48px; }
  .hero .wrap { padding-top: 40px; padding-bottom: 44px; }
  .hero-facts { gap: 6px 16px; font-size: 10px; }
}



/* ---------- two plain columns, no chips, no names ---------- */
.plain-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  max-width: 860px;
}
.plain-cols > div { border-top: 1px solid var(--line); padding-top: 22px; }
.plain-n {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.plain-cols b { display: block; font-size: 18px; margin-bottom: 10px; }
.plain-cols p { color: var(--body); font-size: 15px; line-height: 1.65; }

@media (max-width: 640px) {
  .plain-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- surfaces lifted to match the reference ----------
   Their ground is #141515. Ours was #07080A — near black, which is
   what made it feel heavy. The whole surface ramp moves up together
   so the depth between layers is preserved. Accents are untouched:
   teal, blue, amber, red and violet are exactly as before.        */
:root {
  --bg:     #141516;
  --bg-alt: #191A1C;
  --card:   #1B1D1F;
  --card-2: #1F2124;
  --tile:   #232629;
  --line:   #2A2D31;
  --border: #383C41;
}

/* the alt band is a lift on the new ground, not a darker colour */
.section--alt { background: rgba(255, 255, 255, 0.022); }

/* nav and overlay tints were keyed to the old near-black */
.nav              { background: rgba(20, 21, 22, 0.86); }
.nav.is-scrolled  { background: rgba(20, 21, 22, 0.95); }
.compare-tag, .pipe-tag { background: rgba(20, 21, 22, 0.72); }
.btn--primary, .tier-flag, .form-done .mark svg { color: #141516; }
.btn--primary:hover { color: #141516; }
.check input:checked::after { border-color: #141516; }

/* ---------- full-screen hero, content anchored bottom-left ----------
   Matches the reference: ~92vh, full-bleed image, text sitting on the
   floor of the frame rather than centred in a container.            */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,21,22,.72) 0%, rgba(20,21,22,.22) 40%, rgba(20,21,22,.90) 100%),
    linear-gradient(90deg, rgba(20,21,22,.88) 0%, rgba(20,21,22,.18) 58%, rgba(20,21,22,.34) 100%);
}
/* full-bleed, not a centred column */
.hero .wrap {
  position: relative;
  z-index: 1;
  /* a grid item with `margin: 0 auto` shrink-to-fits and centres itself —
     pin it left so the text sits against the frame edge like the reference */
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: stretch;
  padding: 0 44px 72px;
}
.hero h1 { max-width: none; white-space: nowrap; }
.hero-sub { max-width: 520px; }

@media (max-width: 640px) {
  .hero { min-height: 88vh; }
  .hero .wrap { padding-left: 20px; padding-right: 20px; padding-bottom: 44px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 44px); }
}

/* philosophy list, in the calm register */
.tick-list { margin-top: 26px; gap: 10px; }
.tick { font-size: 15px; }

/* passes and 'who it's for' keep their original card design, smaller type */
.pass { padding: 22px 20px; }
.pass-head { margin-bottom: 10px; }
.pass-head b { font-size: 18px; }
.pass p { font-size: 15px; }
.who div { padding: 20px 18px; font-size: 16px; }