/* IronMeshVPN homepage — Edge Seat / THE SEATED DATUM
   Production art board: Rake Edge / Low Mass / Terminus Last */

/* ---------- Homepage header scale (H1.1)
   Slightly more present; not a separate visual band. home.css is homepage-only. */
:root {
  --im-header-h: 68px;
}

/* Homepage anchor clearance under sticky .im-header.
   Scoped to section landmarks only — does not alter header chrome. */
#how,
#boundary,
#pricing,
#faq {
  scroll-margin-top: calc(var(--im-header-h) + 0.85rem);
}

.im-brand img {
  height: 30px;
  width: 128px;
}

@media (min-width: 900px) {
  .im-brand img {
    height: 34px;
    width: 146px;
  }
}

.im-nav-links a {
  font-size: 0.96875rem;
  letter-spacing: 0.005em;
}

.im-nav-actions .im-btn--primary,
.im-nav-actions .btn-primary {
  min-height: 42px;
  padding: 0.6rem 1.1rem;
}

.im-nav-actions .im-text-link {
  font-size: 0.9375rem;
}

/* ---------- Hero — H1 Iron Rake ----------
   The photograph carries the material authority. CSS only frames it. */
.home-hero {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--im-bg);
}

.home-hero-photo {
  position: relative;
  display: block;
  overflow: hidden;
}

.home-hero-photo img {
  display: block;
  width: 100%;
}

.home-hero-copy {
  position: relative;
  z-index: 1;
}

/*
  Hero page-entry (H6): image already exists; copy resolves; CTA follows.
  Photo may use an extremely subtle scale settle on the frame — never Ken Burns.
*/
.home-hero-photo {
  animation: im-hero-photo-settle var(--im-motion-slow) var(--im-motion-ease) both;
}

@keyframes im-hero-photo-settle {
  from {
    transform: scale(1.012);
  }
  to {
    transform: scale(1);
  }
}

.home-hero-copy h1 {
  animation: im-arrive var(--im-motion-standard) var(--im-motion-ease) both;
}

.home-hero-sub {
  animation: im-arrive var(--im-motion-standard) var(--im-motion-ease) calc(var(--im-motion-stagger) * 1) both;
}

.home-hero-actions {
  animation: im-arrive var(--im-motion-standard) var(--im-motion-ease) calc(var(--im-motion-stagger) * 2.25) both;
}

@keyframes im-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero h1 {
  margin: 0 0 var(--im-space-4);
  font-size: clamp(2.25rem, 5vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--im-text);
}

.home-hero-sub {
  margin: 0 0 var(--im-space-6);
  color: #b6becc;
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 22rem;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--im-space-4);
}

.home-hero-actions .im-btn--primary,
.home-hero-actions .btn-primary {
  min-height: 48px;
  padding: 0.72rem 1.28rem;
  font-size: 0.9375rem;
  box-shadow: none;
}

.home-hero-actions .im-text-link {
  font-size: 0.9375rem;
  color: #a8b0bf;
}

.home-hero-actions .im-text-link:hover {
  color: var(--im-text);
}

/* Below 960px: copy first, then the photograph full-bleed as a single field. */
@media (max-width: 959px) {
  .home-hero {
    grid-template-columns: 100%;
    row-gap: var(--im-space-6);
    padding-top: var(--im-space-6);
  }

  .home-hero-copy {
    order: 1;
  }

  .home-hero h1 {
    font-size: clamp(2.1rem, 5.4vw, 2.8rem);
  }

  .home-hero-photo {
    order: 2;
    aspect-ratio: 16 / 11;
  }

  /* crop from the seat upward: contact and datum survive, headroom is spent first */
  .home-hero-photo img {
    height: 100%;
    object-fit: cover;
    object-position: 76% 100%;
  }

  /* dissolve the top edge into the page field so the photograph is not a card */
  .home-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 30%;
    background: linear-gradient(
      180deg,
      var(--im-bg) 0%,
      rgba(8, 11, 18, 0.72) 32%,
      rgba(8, 11, 18, 0) 100%
    );
    pointer-events: none;
  }
}

@media (max-width: 599px) {
  .home-hero {
    row-gap: var(--im-space-5);
  }

  .home-hero h1 {
    font-size: clamp(1.7rem, 7.4vw, 2.05rem);
  }

  .home-hero-sub {
    font-size: 1.015rem;
  }

  .home-hero-actions .im-btn--primary,
  .home-hero-actions .btn-primary {
    min-height: 46px;
    padding: 0.68rem 1.18rem;
  }

  .home-hero-photo {
    aspect-ratio: 4 / 5;
  }

  .home-hero-photo img {
    object-position: 72% 100%;
  }
}

/* 960px and up: one frame — the copy sits in the photograph's own negative field.
   The photograph keeps its whole authored geometry; its left edge dissolves into
   the page field so the seam never reads as an image card. */
@media (min-width: 960px) {
  .home-hero {
    grid-template-areas: "frame";
    align-items: stretch;
    /* Exact remaining viewport under the header — intrinsic photo must not
       expand the hero past the fold (that hid the seat / invited the next section). */
    height: calc(100vh - var(--im-header-h) - var(--im-header-lip));
    height: calc(100svh - var(--im-header-h) - var(--im-header-lip));
    min-height: 36rem;
  }

  .home-hero-photo,
  .home-hero-copy {
    grid-area: frame;
    min-height: 0;
  }

  .home-hero-photo {
    z-index: 0;
    align-self: stretch;
    width: 100%;
    height: 100%;
    margin-left: 0;
  }

  /* Same source; cover crop inside the fixed hero height gives the phone mass
     without stretching. Position keeps datum lip + seat contact in frame. */
  .home-hero-photo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 58% 72%;
    transform: scale(1.18);
    transform-origin: 60% 78%;
  }

  .home-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 44%;
    background: linear-gradient(
      90deg,
      var(--im-bg) 0%,
      rgba(8, 11, 18, 0.84) 30%,
      rgba(8, 11, 18, 0) 100%
    );
    pointer-events: none;
  }

  /* graphite deepened under the copy only — legibility, not decoration */
  .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(6, 8, 12, 0.52) 0%,
      rgba(6, 8, 12, 0.3) 26%,
      rgba(6, 8, 12, 0) 50%
    );
    pointer-events: none;
  }

  .home-hero-copy {
    z-index: 2;
    justify-self: stretch;
    align-self: center;
    /* Sit naturally in the left negative field — composed with the seated event */
    padding-top: 4.25rem;
    padding-bottom: 0.75rem;
  }

  .home-hero h1 {
    max-width: 13ch;
  }

  .home-hero-actions {
    max-width: 28rem;
  }

  /* measured so the line breaks after "iPhone." rather than orphaning a word */
  .home-hero-sub {
    max-width: 17.5rem;
  }
}

/* Laptop band: keep authority without desktop billboard values */
@media (min-width: 960px) and (max-width: 1279px) {
  .home-hero h1 {
    font-size: clamp(2.3rem, 4.1vw, 3.05rem);
  }

  .home-hero-photo img {
    transform: scale(1.1);
    transform-origin: 64% 70%;
    object-position: 62% 66%;
  }

  .home-hero-copy {
    padding-top: 3.25rem;
  }
}

/* ---------- How it works — process first (H5) ----------
   Three steps to connect. Quiet Seated Datum registration only.
   No tooling plate. No progress rail. No oversized mechanical seats. */

#how.im-section {
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

/* Continuity from Iron Rake graphite plane — luminance bridge, not a wipe. */
#how {
  background-color: var(--im-bg);
  background-image:
    linear-gradient(
      180deg,
      var(--im-bg) 0%,
      rgba(10, 14, 22, 0.92) 14%,
      transparent 36%
    ),
    radial-gradient(
      118% 80% at 72% -10%,
      rgba(214, 228, 240, 0.028),
      rgba(214, 228, 240, 0) 56%
    );
}

#how .im-section-header {
  margin-bottom: var(--im-space-4);
}

@media (min-width: 1000px) {
  #how .im-section-header {
    margin-bottom: var(--im-space-5);
  }
}

#how .im-section-title {
  letter-spacing: -0.028em;
}

#how .im-section-sub {
  max-width: 31rem;
  text-wrap: balance;
}

.home-rig {
  position: relative;
}

.home-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-step {
  position: relative;
  padding: 0 0 var(--im-space-5);
}

.home-step:last-child,
.home-step--terminal {
  padding-bottom: 0;
}

.home-step-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--im-text);
}

.home-step-line {
  margin: 0;
  max-width: 22rem;
  color: #a7b0bf;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/*
  Small local registration seat above each step title.
  One quiet machined pocket — not a progress node, not a connector.
*/
.home-step-seat {
  display: block;
  width: 1.35rem;
  height: 0.42rem;
  margin: 0 0 0.7rem;
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(226, 236, 244, 0.08), transparent 55%),
    linear-gradient(180deg, #252d3c 0%, #151b26 55%, #0c1118 100%);
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 4px 8px -6px rgba(0, 0, 0, 0.85);
}

/* Connect: slightly deeper pocket + quiet terminus lip. Same footprint. */
.home-step--terminal .home-step-seat,
.home-step:last-child .home-step-seat {
  height: 0.52rem;
  background:
    linear-gradient(180deg, rgba(226, 236, 244, 0.1), transparent 50%),
    linear-gradient(180deg, #2a3344 0%, #171d28 58%, #0b1017 100%);
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 5px 10px -6px rgba(0, 0, 0, 0.9);
}

.home-step--terminal .home-step-seat::after,
.home-step:last-child .home-step-seat::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.2rem;
  background: linear-gradient(
    90deg,
    rgba(232, 240, 245, 0),
    rgba(214, 228, 240, 0.28) 50%,
    rgba(232, 240, 245, 0)
  );
}

/* Kill any plate / rail / connector geometry on the host. */
.home-rig::before,
.home-rig::after,
.home-steps::before,
.home-steps::after,
.home-step::before,
.home-step-seat::before {
  content: none;
  display: none;
}

/* Desktop / laptop: three equal process stations. Typography leads. */
@media (min-width: 1000px) {
  .home-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
  }

  .home-step,
  .home-step--terminal,
  .home-step:last-child {
    padding: 0;
  }

  .home-step-line,
  .home-step--terminal .home-step-line,
  .home-step:last-child .home-step-line {
    max-width: 18rem;
  }
}

/* Tablet: keep three readable columns when space allows. */
@media (min-width: 700px) and (max-width: 999.98px) {
  .home-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  .home-step,
  .home-step--terminal,
  .home-step:last-child {
    padding: 0;
  }

  .home-step-line {
    max-width: none;
    font-size: 0.9rem;
  }
}

/* Phone: clean vertical documentation order. No timeline rail. */
@media (max-width: 699.98px) {
  .home-step {
    padding-bottom: var(--im-space-5);
  }

  .home-step + .home-step {
    padding-top: 0.15rem;
  }
}

.home-steps-note {
  margin: var(--im-space-5) 0 0;
  max-width: 40rem;
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
  line-height: 1.5;
}

.home-steps-note::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-bottom: var(--im-space-3);
  background: rgba(226, 236, 244, 0.16);
}

/* ---------- Section photography (H4.5 local visual experiment) ----------
   Secondary visual chapters only. Must not dominate H1 Iron Rake.
   Reference masters are loaded as-is for local review — not production-optimized. */

.home-section-photo {
  margin: var(--im-space-5) 0 var(--im-space-6);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

/* picture wrapper must fill the chapter width so img geometry is unchanged */
.home-section-photo picture {
  display: block;
  width: 100%;
}

.home-section-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  /* Quiet seating into the page field — not a card frame. */
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.04),
    0 18px 40px -28px rgba(0, 0, 0, 0.85);
}

/* Desktop / laptop / tablet: substantial secondary event, still below hero mass. */
@media (min-width: 700px) {
  .home-section-photo {
    max-height: clamp(15rem, 34vh, 22rem);
  }

  .home-section-photo img {
    width: 100%;
    height: clamp(15rem, 34vh, 22rem);
    object-fit: cover;
  }

  .home-boundary-photo img {
    /* Keep central seam, seated device, and base datum. */
    object-position: 50% 78%;
  }

  .home-pricing-photo img {
    /* Keep phone + adjacent datum; retain meaningful left field. */
    object-position: 68% 48%;
  }
}

/* Phone: natural proportion — do not crush recognition. */
@media (max-width: 699.98px) {
  .home-section-photo {
    margin: var(--im-space-4) 0 var(--im-space-5);
    max-height: none;
  }

  .home-section-photo img {
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-height: 480px) and (orientation: landscape) and (max-width: 959px) {
  .home-section-photo {
    max-height: 11rem;
  }

  .home-section-photo img {
    height: 11rem;
    object-fit: cover;
  }

  .home-boundary-photo img {
    object-position: 50% 80%;
  }

  .home-pricing-photo img {
    object-position: 72% 50%;
  }
}

/* ---------- Boundary — DATUM WALL (H3.2 final) ----------
   The division is the object. The surrounding field is material.
   Seam first. Graphite fields second. Text third. */

#boundary.im-section {
  padding-block: clamp(3.5rem, 6.5vw, 5.75rem);
}

#boundary {
  background-color: var(--im-bg-recess);
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 10, 18, 0.55) 0%,
      transparent 18%
    ),
    radial-gradient(
      130% 85% at 50% 22%,
      rgba(214, 228, 240, 0.02),
      rgba(214, 228, 240, 0) 64%
    );
}

#boundary .im-section-header {
  margin-bottom: var(--im-space-4);
  max-width: 36rem;
}

@media (min-width: 1000px) {
  #boundary .im-section-header {
    margin-bottom: var(--im-space-5);
  }
}

#boundary .im-section-title {
  letter-spacing: -0.028em;
}

.home-boundary-reassure {
  margin: var(--im-space-3) 0 0;
  max-width: 34rem;
  color: var(--im-text-muted);
  text-wrap: balance;
}

.home-boundary {
  display: flex;
  flex-direction: column;
  gap: var(--im-space-5);
}

/*
  Continuous graphite wall dissolving into the section.
  Edge falloff via bg-color matching page ground — no border,
  no inset perimeter, no drop shadow, no radius.
*/
.home-boundary-instrument {
  --im-wall: rgba(13, 17, 24, 0.78);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: clamp(1.35rem, 3vw, 2rem) 0.2rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image:
    linear-gradient(
      90deg,
      var(--im-bg) 0%,
      transparent 7%,
      transparent 93%,
      var(--im-bg) 100%
    ),
    linear-gradient(
      180deg,
      var(--im-bg) 0%,
      transparent 9%,
      transparent 91%,
      var(--im-bg) 100%
    ),
    linear-gradient(
      180deg,
      rgba(226, 236, 244, 0.03) 0%,
      transparent 38%
    ),
    linear-gradient(
      112deg,
      rgba(16, 21, 30, 0.55) 0%,
      var(--im-wall) 42%,
      rgba(12, 16, 22, 0.5) 100%
    );
  box-shadow: none;
}

.home-boundary-field {
  min-width: 0;
  padding: 0.15rem 0.4rem 0.2rem;
  border: 0;
  background: none;
  box-shadow: none;
}

.home-boundary-field-title {
  margin: 0 0 1.2rem;
  font-size: clamp(0.78rem, 1.1vw, 0.84rem);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 240, 245, 0.7);
  border: 0;
  background: none;
  box-shadow: none;
}

.home-boundary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
}

/*
  NO row rules. Character dash only — never a 1px geometric rule
  that can read as a full-width separator.
*/
.home-boundary-list li {
  position: relative;
  margin: 0;
  padding: 0.58rem 0 0.58rem 1.05rem;
  border: 0;
  border-top: 0;
  border-bottom: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  outline: none;
  color: #a7b0bf;
  font-size: 0.95rem;
  line-height: 1.45;
}

.home-boundary-list li:first-child {
  padding-top: 0.05rem;
}

.home-boundary-list li:last-child {
  padding-bottom: 0.05rem;
}

.home-boundary-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  right: auto;
  top: 0.55rem;
  width: auto;
  max-width: 1rem;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  color: rgba(226, 236, 244, 0.38);
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  pointer-events: none;
}

.home-boundary-list li:first-child::before {
  top: 0.05rem;
}

.home-boundary-list li::after {
  content: none;
  display: none;
}

/* ----- Seam: primary manufactured event ----- */
.home-boundary-seam {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 1.15rem 0 1.25rem;
  padding: 0;
  pointer-events: none;
  border: 0;
  background: none;
  box-shadow: none;
}

.home-boundary-seam-cut {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 12%,
      rgba(0, 0, 0, 0.96) 50%,
      rgba(0, 0, 0, 0.55) 88%,
      transparent 100%
    );
  box-shadow:
    0 1px 0 rgba(232, 240, 245, 0.32),
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 -1px 0 rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(0, 0, 0, 0.6);
}

.home-boundary-seam-foot {
  display: block;
  width: 1rem;
  height: 0.4rem;
  margin-top: 0.55rem;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(180deg, #313b4e 0%, #171d2a 48%, #060a10 100%);
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 4px 8px -3px rgba(0, 0, 0, 0.9);
}

/* Desktop / laptop: absolute structural seam through the wall. */
@media (min-width: 900px) {
  .home-boundary-instrument {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: start;
    padding: clamp(1.85rem, 2.8vw, 2.55rem) 0.35rem;
  }

  .home-boundary-field {
    padding: 0.1rem 0.15rem;
  }

  .home-boundary-field:first-child {
    padding-right: 0.25rem;
  }

  .home-boundary-field:last-child {
    padding-left: 0.25rem;
  }

  /*
    Seam spans nearly the full material field — not limited to text height.
    Built into the wall, not a column border.
  */
  .home-boundary-seam {
    position: absolute;
    left: 50%;
    top: 2.5%;
    bottom: 2%;
    width: 1.6rem;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .home-boundary-seam-cut {
    flex: 1 1 auto;
    width: 4px;
    height: auto;
    min-height: 0;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.72) 4%,
        rgba(0, 0, 0, 0.97) 50%,
        rgba(0, 0, 0, 0.72) 96%,
        transparent 100%
      );
    box-shadow:
      1px 0 0 rgba(232, 240, 245, 0.36),
      2px 0 0 rgba(0, 0, 0, 0.3),
      -1px 0 0 rgba(0, 0, 0, 0.82),
      inset 1px 0 0 rgba(0, 0, 0, 0.55),
      inset -1px 0 0 rgba(226, 236, 244, 0.05);
  }

  .home-boundary-seam-foot {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 0.45rem;
    margin-top: 0.45rem;
  }

  .home-boundary-list li {
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
  }

  .home-boundary-list li::before {
    top: 0.68rem;
  }

  .home-boundary-list li:first-child::before {
    top: 0.05rem;
  }
}

/* Mobile / tablet: full-width horizontal structural slot. */
@media (max-width: 899.98px) {
  .home-boundary-seam {
    width: 100%;
    margin: 1.25rem 0 1.35rem;
  }

  .home-boundary-seam-cut {
    width: 100%;
    height: 5px;
  }

  .home-boundary-seam-foot {
    width: 1.05rem;
    height: 0.4rem;
  }
}

/* Footnote: secondary engraved annotation below the wall. */
.home-boundary-note {
  margin: 0;
  max-width: 38rem;
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
  line-height: 1.5;
}

.home-boundary-note::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-bottom: var(--im-space-3);
  background: rgba(226, 236, 244, 0.12);
}

.home-boundary-note a {
  color: rgba(214, 228, 240, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(214, 228, 240, 0.28);
  text-underline-offset: 0.15em;
}

.home-boundary-note a:hover,
.home-boundary-note a:focus-visible {
  color: var(--im-text);
  text-decoration-color: rgba(214, 228, 240, 0.55);
}

/* ---------- Pricing — Docked Plan (canonical) ----------
   One shared deck. Stations are cut into the deck. Pro is the primary dock.
   Short top-right docking stop. No detached rail. No full-height edge bar. */

#pricing.im-section {
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
}

#pricing {
  background-color: var(--im-bg);
  background-image:
    linear-gradient(
      180deg,
      rgba(5, 7, 14, 0.65) 0%,
      transparent 16%
    ),
    radial-gradient(
      120% 70% at 70% 0%,
      rgba(214, 228, 240, 0.018),
      rgba(214, 228, 240, 0) 58%
    );
}

#pricing .im-section-title {
  letter-spacing: -0.028em;
}

.pricing-header {
  text-align: left;
  max-width: 40rem;
  margin-bottom: 0;
}

.pricing-header.im-section-header {
  margin-inline: 0;
}

.pricing-controls {
  margin: 0 0 var(--im-space-5);
}

.toggle-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 0;
  padding: 0.2rem;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(226, 236, 244, 0.04), transparent 55%),
    linear-gradient(180deg, #121821, #0c1119);
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 6px 14px -10px rgba(0, 0, 0, 0.8);
}

.toggle-pill {
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border-radius: 1px;
  border: 0;
  background: transparent;
  color: var(--im-text-muted);
  font: inherit;
  font-size: var(--im-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.toggle-pill.active,
.toggle-pill[aria-selected="true"] {
  background: rgba(226, 236, 244, 0.07);
  color: var(--im-text);
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.toggle-pill:focus-visible {
  outline: 2px solid rgba(232, 240, 245, 0.35);
  outline-offset: 2px;
}

#pricing-status {
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
}

.home-pricing-deck {
  position: relative;
  z-index: 0;
  margin-top: 0;
  padding: clamp(1.15rem, 2.4vw, 1.85rem) clamp(0.9rem, 2.2vw, 1.65rem);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image:
    linear-gradient(
      90deg,
      var(--im-bg) 0%,
      transparent 5%,
      transparent 95%,
      var(--im-bg) 100%
    ),
    linear-gradient(
      180deg,
      var(--im-bg-soft) 0%,
      transparent 8%,
      transparent 92%,
      var(--im-bg-soft) 100%
    ),
    linear-gradient(
      180deg,
      rgba(226, 236, 244, 0.04) 0%,
      transparent 34%
    ),
    linear-gradient(
      108deg,
      rgba(16, 21, 30, 0.92) 0%,
      rgba(12, 16, 23, 0.96) 48%,
      rgba(10, 14, 20, 0.9) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.plans-grid {
  display: grid;
  gap: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
  padding: 0.95rem 0.95rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.plan-card + .plan-card {
  margin-top: 0;
  padding-top: 1.05rem;
}

.plan-card + .plan-card::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0.15rem;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 18%,
    rgba(226, 236, 244, 0.08) 50%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
}

.plan-card.popular {
  padding: 1.15rem 1.45rem 1.25rem 1.1rem;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 14%,
      rgba(0, 0, 0, 0.24) 100%
    ),
    linear-gradient(180deg, rgba(226, 236, 244, 0.03), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

/* Short L-shaped docking stop at Pro top-right. */
.plan-card.popular::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1.15rem;
  height: 2.85rem;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(226, 236, 244, 0.12) 0%,
      transparent 22%
    ),
    linear-gradient(#2a3342, #2a3342) top / 100% 0.18rem no-repeat,
    linear-gradient(
      180deg,
      #2a3342 0%,
      #1a212e 58%,
      transparent 100%
    ) right / 0.28rem 100% no-repeat;
}

.plan-ribbon {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(214, 228, 240, 0.62);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-name {
  margin: 0;
  color: var(--im-text);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plan-tagline {
  margin: 0;
  color: var(--im-text-muted);
  font-size: var(--im-text-sm);
  line-height: 1.4;
}

.plan-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  margin-top: 0.05rem;
}

.plan-price {
  color: var(--im-text);
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-period {
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
}

.plan-features {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #a7b0bf;
  font-size: var(--im-text-sm);
}

.plan-features li {
  position: relative;
  padding: 0.28rem 0 0.28rem 0.85rem;
  border: 0;
}

.plan-features li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0.28rem;
  color: rgba(226, 236, 244, 0.34);
  font-size: 0.9em;
  line-height: 1.4;
}

.plan-terms {
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
  line-height: 1.4;
}

.plan-terms strong {
  color: rgba(214, 228, 240, 0.72);
  font-weight: 600;
}

.plan-footer {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
}

.plan-footer .btn {
  width: 100%;
}

@media (min-width: 1000px) {
  .home-pricing-deck {
    padding: 1.55rem 1.45rem 1.55rem 1.35rem;
  }

  .plans-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.36fr) minmax(0, 0.82fr);
    align-items: stretch;
  }

  .plan-card {
    gap: 0.7rem;
    padding: 1.15rem 1.15rem 1.2rem;
  }

  .plan-card + .plan-card {
    padding-top: 1.15rem;
  }

  .plan-card + .plan-card::before {
    left: 0;
    right: auto;
    top: 12%;
    bottom: 12%;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 14%,
      rgba(226, 236, 244, 0.1) 50%,
      rgba(0, 0, 0, 0.65) 86%,
      transparent 100%
    );
  }

  .plan-card.popular + .plan-card::before {
    content: none;
  }

  .plan-card.popular {
    padding: 1.35rem 1.75rem 1.45rem 1.4rem;
  }

  .plan-card.popular::after {
    width: 1.25rem;
    height: 3.1rem;
  }

  .plan-footer {
    margin-top: auto;
    padding-top: 0.65rem;
  }
}

@media (min-width: 700px) and (max-width: 999.98px) {
  .home-pricing-deck {
    padding: 1.2rem 1.05rem 1.25rem;
  }

  .plans-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .plan-card.popular {
    grid-column: 1 / -1;
    order: -1;
    padding: 1.2rem 1.55rem 1.25rem 1.05rem;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 10%,
        rgba(0, 0, 0, 0.2) 100%
      ),
      linear-gradient(180deg, rgba(226, 236, 244, 0.028), transparent 40%);
  }

  .plan-card.popular::before {
    left: 4%;
    right: 4%;
    top: auto;
    bottom: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 12%,
      rgba(226, 236, 244, 0.09) 50%,
      rgba(0, 0, 0, 0.55) 88%,
      transparent 100%
    );
  }

  .plan-card.popular::after {
    width: 1rem;
    height: 2.6rem;
  }

  #card-basic,
  #card-ultimate {
    order: 0;
    padding-top: 1.15rem;
  }

  #card-ultimate::before {
    left: 0;
    right: auto;
    top: 14%;
    bottom: 14%;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 18%,
      rgba(226, 236, 244, 0.09) 50%,
      rgba(0, 0, 0, 0.55) 82%,
      transparent 100%
    );
  }

  .plan-footer {
    margin-top: 0.4rem;
    padding-top: 0.45rem;
  }
}

@media (max-width: 699.98px) {
  .home-pricing-deck {
    padding: 0.7rem 0.45rem 0.8rem;
    background-image:
      linear-gradient(
        90deg,
        var(--im-bg) 0%,
        transparent 12%,
        transparent 88%,
        var(--im-bg) 100%
      ),
      linear-gradient(
        180deg,
        var(--im-bg-soft) 0%,
        transparent 10%,
        transparent 90%,
        var(--im-bg-soft) 100%
      ),
      linear-gradient(
        180deg,
        rgba(226, 236, 244, 0.03) 0%,
        transparent 30%
      ),
      linear-gradient(
        108deg,
        rgba(16, 21, 30, 0.88) 0%,
        rgba(12, 16, 23, 0.94) 48%,
        rgba(10, 14, 20, 0.86) 100%
      );
    box-shadow:
      inset 0 1px 0 rgba(226, 236, 244, 0.045),
      inset 0 -1px 0 rgba(0, 0, 0, 0.32);
  }

  .plan-card {
    gap: 0.45rem;
    padding: 0.7rem 0.55rem 0.75rem;
  }

  .plan-card + .plan-card {
    padding-top: 0.8rem;
  }

  .plan-card + .plan-card::before {
    left: 14%;
    right: 14%;
  }

  /* Open Pro depth band: dissolves into shared deck; no closed card perimeter. */
  .plan-card.popular {
    padding: 0.85rem 0.75rem 0.9rem 0.55rem;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.05) 42%,
      transparent 100%
    );
    box-shadow: none;
  }

  .plan-card.popular::after {
    width: 0.9rem;
    height: 2.2rem;
    background:
      linear-gradient(#262f3e, #262f3e) top / 100% 0.14rem no-repeat,
      linear-gradient(
        180deg,
        #262f3e 0%,
        #161c28 55%,
        transparent 100%
      ) right / 0.22rem 100% no-repeat;
  }

  .plan-price {
    font-size: clamp(1.6rem, 7.5vw, 1.9rem);
  }

  .plan-footer {
    margin-top: 0.2rem;
    padding-top: 0.25rem;
  }
}

.pricing-guarantee {
  margin: var(--im-space-5) 0 0;
  max-width: 40rem;
  color: var(--im-text-muted);
  font-size: var(--im-text-sm);
  line-height: 1.5;
}

.pricing-guarantee::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-bottom: var(--im-space-3);
  background: rgba(226, 236, 244, 0.12);
}

.pricing-guarantee a,
.pricing-note a {
  color: rgba(214, 228, 240, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(214, 228, 240, 0.28);
  text-underline-offset: 0.15em;
}

.pricing-guarantee a:hover,
.pricing-guarantee a:focus-visible,
.pricing-note a:hover,
.pricing-note a:focus-visible {
  color: var(--im-text);
  text-decoration-color: rgba(214, 228, 240, 0.55);
}

.pricing-note {
  margin-top: var(--im-space-3);
  max-width: 42rem;
  text-align: left;
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
  line-height: 1.5;
}

/* ---------- FAQ — quiet final instrument (H11.1) ----------
   One continuous field. Horizontal registration cuts + type.
   No filled panel. No per-row boxes. Native details/summary. */

#faq.im-section {
  /* Tighter Pricing → FAQ entry; keep breath without a dead void. */
  padding-top: clamp(1.65rem, 3vw, 2.35rem);
  padding-bottom: clamp(1.5rem, 2.8vw, 2.15rem);
  background-color: var(--im-bg);
  background-image: linear-gradient(
    180deg,
    rgba(10, 14, 22, 0.28) 0%,
    transparent 12%
  );
}

#faq .im-section-header {
  margin-bottom: var(--im-space-4);
  max-width: 34rem;
}

#faq .im-section-title {
  letter-spacing: -0.028em;
}

/* Continuous field: top/bottom machined cuts only — not a card shell.
   Constrained width so rows read as one information field, not page-wide rails. */
.home-faq-instrument {
  position: relative;
  margin: 0;
  padding: 0.15rem 0;
  max-width: 40.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(226, 236, 244, 0.1),
    inset 0 -1px 0 rgba(226, 236, 244, 0.08);
}

.home-faq details {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-faq details + details {
  border-top: 1px solid rgba(226, 236, 244, 0.07);
}

.home-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 2.55rem;
  margin: 0;
  padding: 0.7rem 0.05rem 0.7rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--im-text);
  background: transparent;
  transition: color var(--im-dur-fast) var(--im-ease);
}

.home-faq summary::-webkit-details-marker {
  display: none;
}

.home-faq summary::marker {
  content: "";
}

/* Small geometric disclosure — subordinate, monochrome. */
.home-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.1rem;
  margin-right: 0.1rem;
  border-right: 1px solid rgba(226, 236, 244, 0.5);
  border-bottom: 1px solid rgba(226, 236, 244, 0.5);
  transform: rotate(45deg);
  transition: transform var(--im-motion-fast) var(--im-motion-ease);
}

.home-faq summary:hover,
.home-faq summary:focus-visible {
  color: #f7f9fc;
}

.home-faq summary:focus-visible {
  outline: 2px solid rgba(232, 240, 245, 0.35);
  outline-offset: 3px;
}

.home-faq details[open] summary::after {
  margin-top: 0.1rem;
  transform: rotate(225deg);
}

/* Open answer: local recessed luminance only — never a card. */
.home-faq details[open] {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.07) 55%,
    transparent 100%
  );
  box-shadow: none;
}

.home-faq .answer {
  margin: 0;
  padding: 0 1.25rem 0.8rem 0;
  max-width: 38rem;
  color: #a7b0bf;
  font-size: var(--im-text-sm);
  line-height: 1.55;
}

.home-faq .answer a {
  color: rgba(214, 228, 240, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(214, 228, 240, 0.28);
  text-underline-offset: 0.15em;
}

.home-faq .answer a:hover,
.home-faq .answer a:focus-visible {
  color: var(--im-text);
  text-decoration-color: rgba(214, 228, 240, 0.55);
}

/* Annotation continuation — not a CTA band. */
.home-faq-more {
  margin: var(--im-space-3) 0 0;
  max-width: 40rem;
  color: var(--im-text-dim);
  font-size: var(--im-text-sm);
  line-height: 1.5;
}

.home-faq-more::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  margin-bottom: 0.7rem;
  background: rgba(226, 236, 244, 0.14);
}

.home-faq-more a {
  color: rgba(214, 228, 240, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(214, 228, 240, 0.28);
  text-underline-offset: 0.15em;
}

.home-faq-more a:hover,
.home-faq-more a:focus-visible {
  color: var(--im-text);
  text-decoration-color: rgba(214, 228, 240, 0.55);
}

@media (max-width: 699.98px) {
  .home-faq summary {
    min-height: 2.75rem;
    padding: 0.8rem 0.05rem 0.8rem 0;
    font-size: 0.98rem;
  }

  .home-faq .answer {
    padding: 0 0.25rem 0.9rem 0;
  }
}

/* ---------- Footer — homepage closure (H11.1) ----------
   Desktop: brand ~40% left, Product/Support/Legal as three
   side-by-side utility columns on the right (~55%).
   Lower machined legal datum. Homepage-scoped. */

.home-footer.im-footer {
  position: relative;
  margin: 0;
  /* Sit close under FAQ — resolve into terminus, not a void. */
  padding: clamp(1.35rem, 2.5vw, 1.85rem) 0 clamp(1.25rem, 2.2vw, 1.65rem);
  border-top: 0;
  background: #05070c;
}

/* Machined top cut — page terminus edge. */
.home-footer.im-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.65) 8%,
    rgba(226, 236, 244, 0.14) 50%,
    rgba(0, 0, 0, 0.65) 92%,
    transparent 100%
  );
  pointer-events: none;
}

.home-footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--im-space-5);
  align-items: stretch;
}

.home-footer .im-footer-brand {
  min-width: 0;
}

.home-footer .im-footer-brand h3 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--im-text);
}

.home-footer .im-footer-brand p {
  margin: 0;
  max-width: 28rem;
  color: var(--im-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.home-footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.home-footer-col {
  min-width: 0;
}

.home-footer-col h4 {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 228, 240, 0.55);
}

.home-footer .im-footer-links li {
  margin: 0;
}

.home-footer .im-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.1rem 0;
  color: var(--im-text-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--im-dur-fast) var(--im-ease);
}

.home-footer .im-footer-links a:hover,
.home-footer .im-footer-links a:focus-visible {
  color: var(--im-text);
}

.home-footer .im-footer-links a:focus-visible {
  outline: 2px solid rgba(232, 240, 245, 0.35);
  outline-offset: 2px;
}

.home-footer-bottom.im-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  margin-top: clamp(1.5rem, 3vw, 2.15rem);
  padding-top: 0.95rem;
  border-top: 0;
  box-shadow: inset 0 1px 0 rgba(226, 236, 244, 0.08);
  color: var(--im-text-dim);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Desktop + laptop: wide authored closing field.
   Brand ~40–42%. Utility trio uses the remaining right span — no max-width cap. */
@media (min-width: 900px) {
  .home-footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .home-footer .im-footer-brand {
    flex: 0 1 40%;
    max-width: 40%;
  }

  .home-footer-nav {
    flex: 1 1 56%;
    max-width: 56%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
  }
}

/* Tablet: brand full width, three compact utility columns below. */
@media (min-width: 700px) and (max-width: 899.98px) {
  .home-footer-top {
    flex-direction: column;
    gap: var(--im-space-5);
  }

  .home-footer .im-footer-brand {
    max-width: none;
  }

  .home-footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 699.98px) {
  .home-footer.im-footer {
    padding-top: 1.65rem;
    padding-bottom: 1.35rem;
  }

  .home-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
    column-gap: 1rem;
  }

  /* Legal as a compact utility row — shortens sitemap feel. */
  .home-footer-col:last-child {
    grid-column: 1 / -1;
  }

  .home-footer-col:last-child .im-footer-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.1rem;
    row-gap: 0.1rem;
  }

  .home-footer .im-footer-links a {
    min-height: 2.5rem;
  }

  .home-footer-bottom.im-footer-bottom {
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1.35rem;
  }
}

/* ---------- Section rhythm ----------
   Soft luminance bands instead of hard flat stacks (Termius depth lesson,
   IronMesh palette only — no blue atmosphere). */
.im-band--soft {
  background:
    linear-gradient(
      180deg,
      rgba(7, 10, 18, 0) 0%,
      rgba(12, 16, 28, 0.42) 12%,
      rgba(12, 16, 28, 0.55) 50%,
      rgba(12, 16, 28, 0.42) 88%,
      rgba(7, 10, 18, 0) 100%
    );
  border-top: 1px solid rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}

/* Landscape phones: a shallow band so the seat stays near the fold */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 959px) {
  .home-hero {
    padding-top: var(--im-space-4);
    row-gap: var(--im-space-4);
  }

  .home-hero-photo {
    aspect-ratio: 3 / 1;
  }
}

/* ---------- Motion reveal system (H6) ----------
   Philosophy: ARRIVE → SEAT → HOLD.
   One reusable system. Opacity + transform only.
   IntersectionObserver toggles .im-reveal--visible once. */

.im-reveal {
  opacity: 0;
  transform: translateY(var(--im-reveal-y));
  transition:
    opacity var(--im-motion-standard) var(--im-motion-ease),
    transform var(--im-motion-standard) var(--im-motion-ease);
}

.im-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.im-reveal-delay-1 {
  transition-delay: calc(var(--im-motion-stagger) * 1);
}

.im-reveal-delay-2 {
  transition-delay: calc(var(--im-motion-stagger) * 2);
}

.im-reveal-delay-3 {
  transition-delay: calc(var(--im-motion-stagger) * 3);
}

.im-reveal-delay-4 {
  transition-delay: calc(var(--im-motion-stagger) * 4);
}

/* Chapter photographs: slow vertical seat (12–24px). One transform family. */
.im-reveal--photo {
  --im-reveal-y: var(--im-reveal-y-photo);
  transition-duration: var(--im-motion-slow), var(--im-motion-slow);
}

/* How stations: smaller settle */
.home-step.im-reveal {
  --im-reveal-y: var(--im-reveal-y-sm);
}

/* Connect terminus: one-time luminance resolve, then hold forever. No pulse. */
.home-step--terminal .home-step-seat::after,
.home-step:last-child .home-step-seat::after {
  opacity: 0;
  transition: opacity var(--im-motion-standard) var(--im-motion-ease);
  transition-delay: calc(var(--im-motion-stagger) * 1.5);
}

.home-step--terminal.im-reveal--visible .home-step-seat::after,
.home-step:last-child.im-reveal--visible .home-step-seat::after {
  opacity: 1;
}

/* Datum Wall seam: luminance only — never draw height like a progress bar. */
.home-boundary-seam {
  opacity: 0.42;
  transition: opacity var(--im-motion-slow) var(--im-motion-ease);
  transition-delay: calc(var(--im-motion-stagger) * 2);
}

.home-boundary.im-reveal--visible .home-boundary-seam {
  opacity: 1;
}

/* Pricing deck: small seat. Pro sits 2–4px deeper once. */
.home-pricing-deck.im-reveal {
  --im-reveal-y: 10px;
}

.plan-card.im-reveal {
  --im-reveal-y: 8px;
}

.plan-card.popular.im-reveal {
  --im-reveal-y: 11px;
}

/* Pro docking stop resolves slightly after plan content. */
.plan-card.popular::after {
  opacity: 0;
  transition: opacity var(--im-motion-standard) var(--im-motion-ease);
}

.plan-card.popular.im-reveal--visible::after,
.home-pricing-deck.im-reveal--visible .plan-card.popular::after {
  opacity: 1;
  transition-delay: calc(var(--im-motion-stagger) * 3);
}

/* Tablet: slightly shorter distances */
@media (min-width: 700px) and (max-width: 999.98px) {
  :root {
    --im-reveal-y: 12px;
    --im-reveal-y-sm: 7px;
    --im-reveal-y-photo: 14px;
  }
}

/* Phone: reduce motion distances — never animation-heavy */
@media (max-width: 699.98px) {
  :root {
    --im-reveal-y: 8px;
    --im-reveal-y-sm: 6px;
    --im-reveal-y-photo: 10px;
    --im-motion-standard: 480ms;
    --im-motion-slow: 900ms;
  }

  @keyframes im-arrive {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .home-hero-photo {
    animation-duration: var(--im-motion-standard);
  }
}

/* Reduced motion — NON-NEGOTIABLE: content always visible, no opacity:0 trap */
@media (prefers-reduced-motion: reduce) {
  .home-hero-photo,
  .home-hero-copy h1,
  .home-hero-sub,
  .home-hero-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .im-reveal,
  .im-reveal--photo,
  .home-step.im-reveal,
  .home-pricing-deck.im-reveal,
  .plan-card.im-reveal,
  .plan-card.popular.im-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-step--terminal .home-step-seat::after,
  .home-step:last-child .home-step-seat::after,
  .home-boundary-seam,
  .plan-card.popular::after {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* No-JS / scripting disabled: never trap content at opacity 0 */
@media (scripting: none) {
  .im-reveal,
  .home-step--terminal .home-step-seat::after,
  .home-step:last-child .home-step-seat::after,
  .home-boundary-seam,
  .plan-card.popular::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}