/**
 * /features/ — what the platform actually does, phase by phase.
 *
 * Same world as the 2.0 homepage (css/index-new.css): stone drafting grid,
 * Fraunces display with italic red emphasis, Inter body, ink hairlines. The
 * homepage is the narrative walk; this page is the specimen sheet, so it
 * trades the time rail for a two-column ledger — the claim on the left, what
 * you actually get on the right — and states access on every line.
 *
 * Prefix .ft-. The header and footer are the platform composites and bring
 * their own styles.
 */

.ft-page {
  color: var(--color-ink);
  background-color: var(--bg-page);
  background-image: var(--paper-grid-image);
  background-size: var(--paper-grid-size);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
.ft-page ::selection { background: var(--phase-learn-dark); color: var(--text-inverse); }
.ft-page main a:focus-visible,
.ft-page main button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.ft-page main h1, .ft-page main h2, .ft-page main h3 {
  font-family: var(--font-heading); font-weight: var(--font-semibold);
  letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
/* :where() so the reset weighs nothing and every .ft-* rule below sets its
   own margins without fighting a bare `.ft-page main p`. */
:where(.ft-page main) p { margin: 0; }
.ft-page main img { max-width: 100%; display: block; }

.ft-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.ft-em { font-style: italic; color: var(--phase-learn-dark); box-shadow: inset 0 -8px 0 var(--phase-learn-light); }

/* Page-load reveal, matching the homepage regime (motion.md). One authored
   entrance for the first viewport; everything below is visible on arrival. */
@keyframes ft-reveal { from { opacity: 0; transform: translateY(20px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ft-rv { animation: ft-reveal var(--duration-reveal) var(--ease-reveal) both; }
.ft-rv-2 { animation-delay: var(--stagger-reveal); }
.ft-rv-3 { animation-delay: calc(var(--stagger-reveal) * 2); }

/* ── hero ───────────────────────────────────────────────────────────── */
.ft-hero { padding: var(--space-16) 0 var(--space-12); }
.ft-hero h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.04; max-width: 17ch; padding-bottom: var(--space-3); }
.ft-hero__lede { margin-top: var(--space-6); font-size: 19px; line-height: 1.55; color: var(--color-ink-secondary); max-width: 56ch; }
.ft-hero__cta { margin-top: var(--space-8); display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.ft-hero__note { margin-top: var(--space-5); font-size: var(--text-small); color: var(--color-ink-secondary); }
.ft-hero__note b { color: var(--color-ink); font-weight: var(--font-semibold); }

/* ── the phases ledger ──────────────────────────────────────────────────
   Not a card grid. Each phase is a row with a hairline over it: the name and
   its one-line claim on the left, the capabilities on the right. A ledger
   reads as a list of facts, which is what this page is, and it lets the
   right column carry different numbers of lines without four cards fighting
   to be the same height. */
.ft-phases { padding-bottom: var(--space-12); }
.ft-phase {
  display: grid; grid-template-columns: 300px 1fr; column-gap: var(--space-12);
  padding: var(--space-10) 0; border-top: 1px solid var(--color-border);
}
.ft-phase__id { position: sticky; top: calc(64px + var(--space-6)); align-self: start; }
.ft-phase__name { font-size: 34px; line-height: 1.1; }
.ft-phase__claim { margin-top: var(--space-3); font-size: var(--text-ui); line-height: 1.55; color: var(--color-ink-secondary); }
.ft-phase__where { margin-top: var(--space-4); font-size: var(--text-meta); color: var(--color-ink-muted); }
.ft-phase__where a { color: var(--phase-learn-dark); font-weight: var(--font-semibold); text-decoration: none; }
.ft-phase__where a:hover { text-decoration: underline; }

.ft-caps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); }
.ft-cap { display: grid; grid-template-columns: 34px 1fr; column-gap: var(--space-4); align-items: start; }
.ft-cap__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--phase-learn-very-light); color: var(--phase-learn-dark);
}
.ft-cap__icon .icon, .ft-cap__icon svg { width: 19px; height: 19px; }
.ft-cap__t { display: block; font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--font-semibold); line-height: 1.3; }
/* The right column is 800px wide at full width, which set this line at 135
   characters. Capped to a measure rather than letting the grid decide: the
   column exists to hold the list, not to set the line length.
   54ch, not 68: `ch` is the width of "0", and Inter's zero is a good deal
   wider than its average lowercase glyph, so a 68ch box actually seats ~88
   characters. Measured against the real copy, not the unit. */
.ft-cap__d { display: block; margin-top: var(--space-1); max-width: 54ch; font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-secondary); }
/* Access is stated on the capability, not implied by the section it sits in:
   this page's whole job is telling someone what they get before they sign up,
   and Plan is the phase where "free" and "Pro" sit side by side. */
.ft-cap__gate {
  display: inline-block; margin-left: var(--space-2); padding: 1px var(--space-2);
  border-radius: var(--radius-full); font-family: var(--font-body);
  font-size: var(--text-micro); font-weight: var(--font-bold);
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px;
}
.ft-cap__gate--free { background: var(--color-success-very-light); color: var(--color-success-ink); }
/* --color-error-ink, not --phase-learn-dark: #C73E3E on this tint measures
   ~4.4:1, which is under the floor for text this small. The ink token is the
   sanctioned partner for the tint, and mirrors what Free does with
   --color-success-ink. */
.ft-cap__gate--pro { background: var(--phase-learn-light); color: var(--color-error-ink); }

/* ── the record ─────────────────────────────────────────────────────────
   The one full-field moment on the page, because it is the one claim that is
   about all five phases at once rather than any of them. */
.ft-record { margin: var(--space-8) 0 var(--space-16); }
.ft-record__body {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-10); align-items: center;
  background: var(--phase-learn); color: var(--text-inverse);
  padding: var(--space-10); border-radius: var(--radius-2xl); box-shadow: var(--mainsite-shadow);
}
/* Content left, action right, the action centred against the card's full
   height rather than riding the heading's baseline at the top. */
.ft-record__aside { display: flex; align-items: center; }
.ft-record__cta.ws-btn { flex: none; white-space: nowrap; }
.ft-record__body h2 { font-size: 34px; line-height: 1.1; max-width: 20ch; color: var(--text-inverse); }
.ft-record__txt { margin-top: var(--space-4); font-size: 17px; line-height: 1.6; max-width: 57ch; color: color-mix(in srgb, var(--text-inverse) 88%, var(--phase-learn)); }
.ft-record__txt b { color: var(--text-inverse); font-weight: var(--font-semibold); }
.ft-chain { margin: var(--space-8) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.ft-chain li {
  padding: var(--space-1-5) var(--space-4); border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 35%, transparent);
  font-size: var(--text-meta); font-weight: var(--font-semibold);
}

/* ── the shelf ──────────────────────────────────────────────────────────
   One column per phase, same as the homepage, and read from the same
   inventory (includes/components/app-shelf.php). */
.ft-shelf { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.ft-shelf h2 { font-size: 34px; line-height: 1.1; }
.ft-shelf__lede { margin-top: var(--space-2); color: var(--color-ink-secondary); max-width: 60ch; }
.ft-shelf__groups { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
.ft-shelf__group {
  padding: var(--space-4); background: var(--card-bg); border: 1px solid var(--gray-200);
  border-radius: var(--card-radius); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.ft-shelf__group:hover { box-shadow: var(--shadow-md); }
.ft-shelf__phase { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: 11px; font-weight: var(--font-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--phase-learn-dark); }
.ft-shelf__app { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-2); margin: 0 calc(-1 * var(--space-1)); border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: background-color var(--duration-base) var(--ease-out); }
.ft-shelf__app + .ft-shelf__app { margin-top: var(--space-1); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.ft-shelf__app:hover { background: var(--phase-learn-very-light); }
.ft-shelf__app:hover .ft-shelf__name { color: var(--phase-learn-dark); }
/* The consolidated app, above the phase columns rather than inside one — see
   the matching rule in css/index-new.css. */
.ft-shelf__app--featured { margin-bottom: var(--space-5); padding: var(--space-3); background: var(--phase-learn-very-light); border: 1px solid var(--color-border); align-items: center; }
.ft-shelf__app--featured .ft-shelf__name { font-size: var(--text-lg); }
.ft-shelf__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--phase-learn-light); color: var(--phase-learn-dark); }
.ft-shelf__icon .material-symbols-outlined { font-size: 19px; }
.ft-shelf__meta { min-width: 0; }
.ft-shelf__name { display: block; font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--font-semibold); line-height: 1.3; }
.ft-shelf__d { display: block; margin-top: var(--space-0-5); font-size: var(--text-meta); color: var(--color-ink-secondary); line-height: 1.4; }

/* ── plans strip ────────────────────────────────────────────────────────
   Two lines, not a second pricing page. /pricing/ owns the comparison. */
.ft-plans { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.ft-plans h2 { font-size: 34px; line-height: 1.1; }
.ft-plans__pair { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.ft-plan { padding: var(--space-6); background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
.ft-plan__head { display: flex; align-items: baseline; gap: var(--space-3); }
.ft-plan__name { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--font-semibold); }
.ft-plan__cost { font-size: var(--text-meta); color: var(--color-ink-secondary); }
.ft-plan__txt { margin-top: var(--space-3); font-size: var(--text-ui); line-height: 1.55; color: var(--color-ink-secondary); }
.ft-plans__more { margin-top: var(--space-6); font-size: var(--text-ui); }
.ft-plans__more a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--phase-learn-dark); font-weight: var(--font-semibold); text-decoration: none; }
.ft-plans__more a:hover { text-decoration: underline; }
.ft-plans__more .material-symbols-outlined { font-size: 18px; transition: transform var(--duration-base) var(--ease-out); }
.ft-plans__more a:hover .material-symbols-outlined { transform: translateX(3px); }

/* ── close ──────────────────────────────────────────────────────────── */
.ft-close { padding: var(--space-16) 0; border-top: 1px solid var(--color-border); }
.ft-close h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; }
.ft-close__cta { margin-top: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 1080px) {
  .ft-shelf__groups { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 900px) {
  .ft-phase { grid-template-columns: 1fr; row-gap: var(--space-6); padding: var(--space-8) 0; }
  /* Sticky is a rail behaviour; with the name stacked above its own list it
     would pin a heading over the content it introduces. */
  .ft-phase__id { position: static; }
  .ft-phase__name, .ft-shelf h2, .ft-plans h2, .ft-record__body h2 { font-size: 28px; }
  .ft-record__body { grid-template-columns: 1fr; row-gap: var(--space-8); padding: var(--space-6); }
  .ft-record__aside { justify-content: flex-start; }
  .ft-plans__pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ft-shelf__groups { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-rv { animation: none; }
  .ft-shelf__app, .ft-shelf__group, .ft-plans__more .material-symbols-outlined { transition: none; }
  .ft-plans__more a:hover .material-symbols-outlined { transform: none; }
}