/* =============================================================
   TEAORY V2 — THE ASSURANCES PLATE  (.features-strip)

   Owned file. Loads after main.css, woocommerce.css and every part
   before it, so it carries its own media queries.

   THE PROBLEM WITH THE POSITION
   This band lands directly under the journey's hand-over line — the
   most composed moment on the site. Whatever sits there is read in
   the same breath as the hero. The inherited treatment was a raised
   panel holding icon roundels in a four-column grid; the pass after
   that stripped it back to three quiet columns, which was right in
   tone and wrong in geometry: the row was framed by two full-bleed
   hairlines peaking dead centre at x=720 while its own ink stopped
   at x=1222 and started at x=24. A symmetrical frame around a row
   that leaned hard left, standing 77px inside the spine the hero
   above it stands on.

   THE ANSWER: AN ENGRAVED PLATE, MEASURED ON BOTH EDGES.
   Not a card and not a feature row — a specification sheet for the
   order, bracketed at both ends and standing on the hero's spine.

     ——— WHAT COMES WITH EVERY ORDER        SHIPPING & RETURNS ———
     ─────────────────────────────────────────────────────────────
      [mark]        01 │ [mark]        02 │ [mark]        03
      Money Back       │ Customer Care    │ Secure Checkout
      two grey lines   │ two grey lines   │ two grey lines

   Three moves close the frame:
     1. The plate stands on `clamp(24px, 7vw, 108px)` — the exact
        inset `.journey-copy` uses — so at 1440 its left edge is
        x=100.8, the hero's spine, not the 24px default container.
     2. The header is a space-between row. It opens with the site's
        signature 34x1 rule and closes with the same rule mirrored
        behind one HUD item, so the line spans the full plate the
        way the hero's bottom bar runs SCROLL TO FOLLOW THE LEAF to
        01 / 06.
     3. Every column head carries a plate numeral pinned to the far
        right of its own track. The last mark in the row therefore
        lands ON the plate's right margin (x=1339 at 1440), and the
        three tracks read as occupied edge to edge instead of as
        three left-hugging blocks in a wide box.

   One continuous hairline runs under the header across the whole
   plate; the column rules hang from it and dissolve downward. That
   is the entire added structure — no fills, no shadows, no radii,
   no second accent. Hairlines and 0.7rem HUD text, which is what
   the hero uses for chrome.

   Vertical rhythm stays keyed to 05-motion.css's --rhythm-band so
   the motion workstream still owns the page's interval; this file
   only scales it, because the plate now carries a header line, a
   rule and a three-part stack instead of a single 42px roundel.
   ============================================================= */

/* --- 0. Plate metrics ----------------------------------------------------
   Declared once on the section so the header rule, the column rules and the
   gutters are all reading from the same three numbers. */

.features-strip {
  /* The hero's spine. `.journey-copy` is `left: clamp(22px, 7vw, 108px)`;
     matching the middle term puts this plate's left edge on the same
     x at every width the film is composed for. */
  --fs-spine: clamp(24px, 7vw, 108px);
  /* Gutter between tracks. Tight enough that a track is a measure rather
     than a paragraph adrift in a field, wide enough that the hanging rule
     has air on both sides. */
  --fs-gap: clamp(38px, 3.9vw, 66px);
  /* Distance from the header rule down to the first mark. The column rules
     reach back up through it to meet the rule they hang from. */
  --fs-plate-gap: clamp(26px, 2.6vw, 38px);
}

/* --- 1. The band ---------------------------------------------------------
   Transparent ground darkened by a black wash rather than a colour fill:
   whatever the section above hands over, the band steps down from it by the
   same amount, so the seam never shows a mismatched edge. */

.features-strip {
  position: relative;
  isolation: isolate;
  background:
    /* A whisper of the brand's light caught in the recess, so the band has a
       ground with depth rather than a flat wash. Three percent of green —
       invisible as colour, present as air. */
    radial-gradient(150% 150% at 50% 62%,
      rgba(var(--color-primary-rgb), 0.030) 0%,
      rgba(var(--color-primary-rgb), 0.010) 48%,
      transparent 76%),
    /* Darkest along the top edge, lifting toward the bottom: the band is a
       step DOWN out of the section above, and light falls into a step the
       same way everywhere else on this site. */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.53) 26%,
      rgba(0, 0, 0, 0.44) 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The two closing hairlines. They brighten toward the middle and fade to
   nothing before the edge, which is what stops the band reading as a boxed
   panel: the line is a horizon, not a border. Deliberately the opposite
   character to the plate rule inside — the band's edges dissolve into the
   page, the plate is measured and terminates. */
.features-strip::before,
.features-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-border) 12%,
    var(--color-border-strong) 50%,
    var(--color-border) 88%,
    transparent 100%);
}

.features-strip::before { top: 0; }
.features-strip::after  { bottom: 0; }

/* Keyed to the motion workstream's band interval, scaled for the taller
   stack this plate now carries. Matches its selector weight so the later
   file wins the tie. */
body .features-strip {
  padding-top: calc(var(--rhythm-band, 48px) * 1.9);
  padding-bottom: calc(var(--rhythm-band, 48px) * 1.9);
}

/* --- 2. The spine --------------------------------------------------------
   The one structural correction. `.container` is a 24px inset; the film
   directly above stands at 100.8px. A plate read in the same breath as the
   hero cannot open 77px inside it. */

.features-strip > .container {
  max-width: var(--container-width, 1440px);
  padding-inline: var(--fs-spine);
}

/* --- 3. The header line --------------------------------------------------
   Bracketed at both ends. Left: the site's signature micro-label — 34x1px
   rule, 14px of air, 0.7rem at 0.17em. Right: one quiet HUD item with the
   same rule mirrored behind it, so the line is closed rather than trailing
   off into 200px of nothing. This is the hero's bottom bar, which runs
   SCROLL TO FOLLOW THE LEAF at one end and 01 / 06 at the other. */

.features-strip .features-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: 15px;
  margin: 0 0 clamp(22px, 2.2vw, 32px);
}

.features-strip .features-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  min-width: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.features-strip .features-kicker-rule {
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: var(--color-border-strong);
}

.features-strip .features-kicker-text {
  min-width: 0;
}

/* The closing item. Same voice, mirrored: label then rule. A link, because
   the first column is making a returns promise and the page that documents
   it exists; a band that reassures and points nowhere is decoration. */
.features-strip .features-head-link,
.features-strip .features-head-count {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.5s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.features-strip .features-head-rule {
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: var(--color-border-strong);
  transition: background-color 0.5s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.features-strip .features-head-link:hover,
.features-strip .features-head-link:focus-visible {
  color: var(--color-accent);
}

.features-strip .features-head-link:hover .features-head-rule,
.features-strip .features-head-link:focus-visible .features-head-rule {
  background: var(--color-accent);
}

.features-strip .features-head-link:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 6px;
}

/* Fallback when no policy page is published: a plate counter in the hero's
   own 01 / 06 voice, so the line is bracketed either way. */
.features-strip .features-head-count-sep {
  margin: 0 0.5em;
  color: var(--color-text-muted);
}

/* --- 4. The plate rule ---------------------------------------------------
   One hairline, even from end to end, terminating exactly under the kicker
   rule on the left and the closing rule on the right. The band's own edges
   fade out; this one does not. That difference is the whole point: the band
   dissolves into the page, the plate is a measured object on it. */

.features-strip .features-plate-rule {
  height: 1px;
  margin: 0 0 var(--fs-plate-gap);
  background: var(--color-border);
}

/* --- 5. The three tracks -------------------------------------------------
   Three, stated once. The inherited grid asked for four and the template
   only ever prints three, which left a quarter of the plate empty. */

.features-strip .features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--fs-gap);
  row-gap: 0;
}

.features-strip .features-grid .feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  /* stretch, not flex-start: a track's contents occupy the track. This is
     what stops the row reading as three left-hugging blocks. */
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  /* main.css draws the divider as a border on the item itself, including
     inside its 1024/768/480 queries. Cleared here at a weight that beats
     every one of them. */
  border: 0;
}

/* The column rule. It hangs from the plate rule — reaching back up through
   the gap to meet it — and dissolves on the way down, so the structure is
   engraved rather than tabulated. */
.features-strip .features-grid .feature-item + .feature-item::before {
  content: "";
  position: absolute;
  top: calc(var(--fs-plate-gap) * -1);
  bottom: 2px;
  left: calc(var(--fs-gap) / -2);
  width: 1px;
  background: linear-gradient(180deg,
    var(--color-border-strong) 0%,
    var(--color-border) 44%,
    transparent 100%);
}

/* --- 6. Inside a track ---------------------------------------------------
   Head, label, copy. The head is the measured span: the mark on the left
   edge of the track, the plate numeral on the right edge of it. Nothing in
   the column floats — both ends are pinned. */

.features-strip .feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
}

.features-strip .feature-icon {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  /* Optical, not mechanical: every mark in the icon set is drawn inside a
     24-unit box with about three units of air on the left, so a box-aligned
     icon reads as indented against the label under it. The negative margin
     puts the drawn edge on the plate's left edge instead. */
  margin: 0 0 0 -3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-accent);
  opacity: 0.82;
}

.features-strip .feature-icon svg {
  display: block;
  width: 23px;
  height: 23px;
  stroke-width: 1.15;
  overflow: visible;
}

/* The plate numeral. Furniture in the hero's HUD voice, pinned to the right
   edge of its track — the reason the row is framed on both sides. The
   negative right margin cancels the trailing letter-spacing so the numeral's
   ink, not its box, lands on the margin. */
.features-strip .feature-index {
  flex: 0 0 auto;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  margin-right: -0.17em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.features-strip .feature-text {
  min-width: 0;
  /* Fills its track rather than shrinking to its longest line, so the
     measure the copy is set to is the track's, not the sentence's. */
  align-self: stretch;
}

.features-strip .feature-text .feature-title {
  margin: 0 0 clamp(8px, 0.9vw, 13px);
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(1.18rem, 0.74rem + 0.95vw, 1.52rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--color-dark);
  text-wrap: balance;
}

.features-strip .feature-text .feature-note {
  margin: 0;
  /* Not binding on the shipped copy — the track is narrower than this at
     every width. It is here so a long Customizer string still breaks to a
     readable measure instead of running the full track. */
  max-width: 42ch;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.002em;
  color: var(--color-text-light);
  text-wrap: pretty;
  /* Two lines held open in em, not rem: the reserve has to track the font
     size through every breakpoint or the columns lose their shared floor. */
  min-height: calc(2 * 1.72em);
}

/* The promise, then the qualifier. Set as two blocks so every column breaks
   at the full stop, and stepped one tone apart so the pair reads as a
   statement with a footnote rather than as two equal sentences. */
.features-strip .feature-text .feature-note-line {
  display: block;
  color: var(--color-text);
}

.features-strip .feature-text .feature-note-line + .feature-note-line {
  color: var(--color-text-light);
}

/* --- 7. Tablet -----------------------------------------------------------
   Still three tracks down to 900 — three assurances reading as one line is
   the point — but the gutter and the copy come down a step so each track
   keeps a measure the two sentences fit on without breaking mid-clause. */

@media (max-width: 1080px) {
  .features-strip {
    --fs-gap: clamp(28px, 3.4vw, 44px);
    --fs-plate-gap: clamp(22px, 2.4vw, 30px);
  }

  .features-strip .feature-head {
    margin-bottom: 16px;
  }

  .features-strip .feature-icon svg {
    width: 21px;
    height: 21px;
  }

  .features-strip .feature-text .feature-note {
    font-size: 0.82rem;
    line-height: 1.68;
    min-height: calc(2 * 1.68em);
  }
}

/* --- 8. The ledger -------------------------------------------------------
   Below 900 a track is narrower than the sentence it has to hold, and the
   copy starts breaking mid-clause in one column and not the next. So the
   plate turns: one column, and the vertical rules lie down and become the
   row rules. The head keeps both of its pinned ends, so every row is still
   a measured span — mark on one margin, numeral on the other — and the
   plate reads as a ledger rather than as a stack of blocks. */

@media (max-width: 900px) {
  body .features-strip {
    padding-top: calc(var(--rhythm-band, 34px) * 1.5);
    padding-bottom: calc(var(--rhythm-band, 34px) * 1.5);
  }

  .features-strip {
    /* Back onto the page's own container inset. The spine belongs to the
       film, and at these widths there is no film alongside it to hold. */
    --fs-spine: clamp(15px, 4vw, 32px);
    --fs-gap: 0px;
    --fs-plate-gap: clamp(20px, 3vw, 28px);
  }

  .features-strip .features-head {
    margin-bottom: clamp(18px, 2.6vw, 26px);
    row-gap: 13px;
  }

  .features-strip .features-kicker {
    gap: 12px;
    letter-spacing: 0.15em;
  }

  .features-strip .features-kicker-rule,
  .features-strip .features-head-rule {
    width: 26px;
  }

  .features-strip .features-head-link,
  .features-strip .features-head-count {
    gap: 12px;
    letter-spacing: 0.15em;
  }

  .features-strip .features-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .features-strip .features-grid .feature-item {
    padding: clamp(21px, 3.4vw, 32px) 0;
    border: 0;
  }

  .features-strip .features-grid .feature-item:first-child { padding-top: 0; }
  .features-strip .features-grid .feature-item:last-child  { padding-bottom: 0; }

  /* The same hairline, laid flat: it separates rows now instead of tracks,
     and fades out toward the right the way the column rules faded down. */
  .features-strip .features-grid .feature-item + .feature-item::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      var(--color-border-strong) 0%,
      var(--color-border) 58%,
      transparent 100%);
  }

  .features-strip .feature-head {
    margin-bottom: clamp(13px, 1.8vw, 17px);
  }

  .features-strip .feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .features-strip .feature-text .feature-title {
    margin-bottom: clamp(6px, 0.9vw, 9px);
    /* Grows with the row it now has to itself, rather than staying at the
       size a 375px track called for. */
    font-size: clamp(1.1rem, 0.66rem + 1.15vw, 1.36rem);
    letter-spacing: -0.02em;
  }

  .features-strip .feature-text .feature-note {
    max-width: 48ch;
    font-size: 0.85rem;
    line-height: 1.66;
    min-height: 0;
  }
}

/* Below ~430 the two ends of the header cannot share a line; the closing
   item drops under the kicker and keeps its rule, so it reads as the plate's
   footnote rather than as a broken bracket. */
@media (max-width: 430px) {
  .features-strip .features-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- 9. Reduced motion ---------------------------------------------------
   Nothing here animates on arrival; the only transitions are the closing
   link's colour and its rule. Stood down for anyone who has asked for it. */

@media (prefers-reduced-motion: reduce) {
  .features-strip .features-head-link,
  .features-strip .features-head-rule {
    transition: none;
  }
}