@charset "UTF-8";
/* The section library: the blocks any page is written from (the section library in tools/build-features.py; how to use it is in
   .agents/skills/tailorstack-web). Only tokens from base.css, and the feature pages' parts where a block reuses one
   (.label, .frame, .band, .more-card, .faq-sec, .chips). A page is a hero, then sections var(--section) apart, then the footer's call. */

/* ---------- Hero ---------- */
.s-hero { padding-top: 88px; }
.s-hero .lede { margin: 20px 0 0; max-width: 620px; font: var(--type-lede); color: var(--tone); text-wrap: pretty; }
.s-hero .s-call { margin-top: 32px; }
.s-hero .email-cta { width: 100%; }
.s-hero.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-hero.center .h1 { max-width: 920px; }
.s-hero.center .lede { margin-inline: auto; }
.s-hero.center .s-call { display: flex; justify-content: center; width: 100%; }
.s-hero.left .h1 { max-width: 880px; }
.s-hero .s-band { margin-top: 64px; }
/* 'cloth': the words on the page's linen, the woven label sewn on at the top right. It starts 32px under the header, not 88. */
.s-hero.cloth { margin-top: 32px; padding: 120px 64px 72px; }
.s-hero.cloth .s-sewn { position: absolute; top: 48px; right: 56px; }
.hem::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(4, 6, 51, .2); border-radius: var(--r-1); pointer-events: none; }   /* a hem, stitched 12px in, on any cloth frame */
@media (max-width: 860px) {
  .s-hero { padding-top: 64px; }
  .s-hero .s-band { margin-top: 40px; }
  .s-hero.cloth { margin-top: 24px; padding: 104px 20px 40px; }
  .s-hero.cloth .s-sewn { top: 32px; right: auto; left: 20px; }
}

/* ---------- Bands and flat lays ---------- */
.s-band { width: 100%; }
.section.s-band { display: block; }
/* Objects lie where the builder puts them, in % of the scene. The scene keeps its shape; below 720px phones see its middle. */
.s-objects { position: relative; width: max(100%, 720px); aspect-ratio: 2.6; left: 50%; transform: translateX(-50%); }
.s-objects .obj { transform: rotate(var(--turn, 0deg)); }
.s-pic .s-objects { position: absolute; top: 0; width: max(100%, 480px); height: 100%; aspect-ratio: auto; }

/* ---------- Split: label and heading on the left, the words on the right, under a ruled line ---------- */
.s-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px; padding-top: 32px; border-top: 1px solid var(--ink); }
.s-split .h2 { max-width: 460px; }
.s-body p { margin: 0 0 20px; max-width: 680px; text-wrap: pretty; }
.s-body p:last-child { margin-bottom: 0; }
.s-body.lede p { font: var(--type-lede); }
.s-body.body p { font: var(--type-body); color: var(--tone); }
.s-split .s-head .label { margin-bottom: 16px; }
@media (max-width: 860px) { .s-split { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; } }

/* A figure at H1 size, with one short line under it */
.s-stat { display: flex; flex-direction: column; gap: 8px; margin: 40px 0 0; }
.s-stat b { font: var(--type-h1); letter-spacing: -.025em; }
.s-stat span { max-width: 260px; font: var(--type-small); color: var(--tone); }

/* ---------- Points: a W icon on a disc, a label, a title and a line or two ----------
   They lay out by the room they're given, not the screen: under 840px wide (a split's or a chapter's column, or a phone),
   columns and cards stack into rows with the disc beside the words. */
.s-points { container-type: inline-size; }
.s-pt .label { margin: 0 0 8px; }
.s-pt p { margin: 8px 0 0; color: var(--tone); text-wrap: pretty; }
.s-points > .h2 { margin-bottom: 40px; }
/* columns: side by side between hairlines */
.s-points.columns .s-pts { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.s-points.columns .s-pt { display: flex; flex-direction: column; gap: 24px; padding: 32px 32px 0 0; }
.s-points.columns .s-pt + .s-pt { padding-left: 32px; border-left: 1px solid var(--hair); }
/* cards: white cards on cloth */
.s-points.cards .s-cloth { padding: 40px; }
.s-points.cards .s-pts { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; }
.s-points.cards .s-pt { display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--hair); border-radius: var(--r); background: #fff; }
/* rows: one under another, the disc beside the words */
.s-points.rows .s-pt { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--hair); }
.s-points.rows .s-pt:first-child { padding-top: 0; border-top: 0; }
.s-points.rows .s-pt:last-child { padding-bottom: 0; }
@container (max-width: 840px) {
  .s-points.columns .s-pts, .s-points.cards .s-pts { grid-template-columns: minmax(0, 1fr); }
  .s-points.columns .s-pt, .s-points.columns .s-pt + .s-pt { padding: 28px 0; border-left: 0; }
  .s-points.columns .s-pt + .s-pt { border-top: 1px solid var(--hair); }
  .s-points.columns .s-pt, .s-points.cards .s-pt { flex-direction: row; gap: 24px; }
}
@container (max-width: 480px) { .s-points.cards .s-pt { flex-direction: column; } }   /* a phone's card has no room beside the disc */
@media (max-width: 860px) {
  .s-points.cards .s-cloth { padding: 16px; }
  .s-points.cards .s-pt { padding: 24px 20px; }
  .s-points .s-pt, .s-points.columns .s-pt, .s-points.cards .s-pt { gap: 20px; }
}

/* ---------- Media: words beside a picture on cloth ---------- */
.s-media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.s-media + .s-media { margin-top: 72px; }   /* a run of them reads as one beat each, as the feature panels */
.s-media.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.s-media.flip .s-words { order: 2; }
.s-media .h3 .tone { display: block; }   /* the two halves on two lines, as the panel headings */
.s-media .s-words p { margin: 20px 0 0; max-width: 440px; color: var(--tone); text-wrap: pretty; }
.s-media .s-words .s-stat { margin-top: 32px; color: var(--ink); }
.s-pic { aspect-ratio: 7 / 5.4; padding: 48px 48px 0; display: flex; justify-content: center; align-items: flex-start; }
.s-pic:has(> .win) { padding-right: 0; justify-content: flex-start; }
.s-pic .win { width: 132%; flex: none; }   /* larger than the picture, so the window runs off its right and bottom as on the home page */
.s-pic .s-phone { width: 42%; flex: none; filter: drop-shadow(0 24px 28px rgba(4, 6, 51, .22)); }
@media (max-width: 860px) {
  .s-media, .s-media.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-media + .s-media { margin-top: var(--section); }
  .s-media.flip .s-words { order: 0; }
  .s-pic { aspect-ratio: 4 / 3.6; padding: 24px 20px 0; }
  .s-pic:has(> .win) { padding-right: 20px; }
  .s-pic .win { width: 100%; }   /* on phones, the app's phone layout fills it */
  .s-pic .s-phone { width: 56%; }
}

/* ---------- Statement: one thing said big, centred ---------- */
.s-statement { display: flex; flex-direction: column; align-items: center; max-width: 840px; margin-inline: auto; text-align: center; }
.s-statement .s-body { margin-top: 24px; }
.s-statement .s-body p { margin-inline: auto; color: var(--tone); }

/* ---------- Chapters: a long read with a rail that follows the scroll ---------- */
.s-chapters { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; }
.s-rail { position: sticky; top: 120px; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.s-rail a { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font: var(--type-control); color: var(--tone); text-decoration: none; transition: color var(--dur) var(--ease); }
.s-rail a:hover, .s-rail a[aria-current="true"] { color: var(--ink); }
.s-rail .n, .s-chap .label .n { min-width: 24px; font-variant-numeric: tabular-nums; }
.s-chap { scroll-margin-top: 120px; }
.s-chap + .s-chap { margin-top: var(--section); padding-top: 32px; border-top: 1px solid var(--hair); }
.s-chap .label { margin-bottom: 16px; }
.s-chap .h2 { max-width: 760px; }
.s-chap .s-body { margin-top: 24px; }
.s-chap .s-points { margin-top: 40px; }
@media (max-width: 960px) {
  .s-chapters { grid-template-columns: minmax(0, 1fr); }
  .s-rail { display: none; }
}

/* ---------- Unfold, after lfe.org: the H1 and lede alone, and words in them that type in the rest ----------
   The text is the H3 size with room between lines for the buttons. A button is the words it stands for on a pale ground, with a
   W icon on a disc ('disc') or a white tag with an object ('tag'). Opened, it steps back to 40%. New words type in one at a time,
   each marked in lime that fades as the next ones land. */
.s-unfold { padding-top: 88px; }
.u-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 28px; font: var(--type-label); letter-spacing: .12em; text-transform: uppercase; color: var(--tone); }
.u-meta .label { margin: 0; }
.u-all { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.u-all:disabled { color: var(--tone); text-decoration: none; cursor: default; }
.u-text { max-width: 1000px; }
.u-h1, .u-p { margin: 0; font: var(--type-unfold); letter-spacing: -.018em; text-wrap: pretty; }
.u-p + .u-p, .u-h1 + .u-p { margin-top: 20px; }
.u-p[hidden] { display: none; }
.u-chip { margin: 0 2px; padding: 4px 6px 4px 10px; border-radius: var(--r-2); background: rgba(4, 6, 51, .06); color: var(--ink); cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.u-chip:hover { background: rgba(4, 6, 51, .11); }
.u-end { white-space: nowrap; }
.u-chip[aria-expanded="true"] { opacity: .4; cursor: default; background: rgba(4, 6, 51, .06); }
.u-chip .disc { display: inline-grid; width: 36px; height: 36px; margin-left: 8px; vertical-align: -6px; }
.u-chip .disc .bi { transition: transform var(--dur) var(--ease); }
.u-chip:hover .disc .bi { transform: rotate(-12deg); }   /* a nudge, as lfe.org's stamps */
.u-chip.u-tag { background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 2px 6px -3px rgba(4, 6, 51, .3); }
.u-chip.u-tag:hover { box-shadow: 0 0 0 1px rgba(4, 6, 51, .2), 0 4px 10px -4px rgba(4, 6, 51, .35); }
.u-chip.u-tag[aria-expanded="true"] { background: #fff; }
.u-chip.u-tag img { display: inline-block; height: 34px; width: auto; margin: -8px 0 -6px 10px; vertical-align: -4px; transform: rotate(-6deg); filter: drop-shadow(0 3px 4px rgba(20, 18, 10, .22));
  transition: transform var(--dur) var(--ease); }
.u-chip.u-tag:hover img { transform: rotate(0deg) translateY(-2px); }
/* Typing: each word lands at its turn, with a lime mark that fades */
.u-s.typing .u-w { animation: u-type 1ms calc(var(--i) * 34ms) both, u-mark 2.4s var(--ease) calc(var(--i) * 34ms) both; border-radius: 3px; }
@keyframes u-type { from { visibility: hidden; } }
@keyframes u-mark { 0%, 45% { background: rgba(162, 231, 119, .5); box-shadow: 0 0 0 6px rgba(162, 231, 119, .5); } 100% { background: rgba(162, 231, 119, 0); box-shadow: 0 0 0 6px rgba(162, 231, 119, 0); } }
.u-s.typing .u-chip.u-w { animation-name: u-type; }
/* cloth: the text on linen with a stitched hem */
.s-unfold.cloth { padding-top: 32px; }
.s-unfold.cloth .u-main { padding: 72px 72px 80px; }
@keyframes u-mark-cloth { 0%, 45% { background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); } 100% { background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }
.s-unfold.cloth .u-s.typing .u-w { animation-name: u-type, u-mark-cloth; }
.s-unfold.cloth .u-s.typing .u-chip.u-w { animation-name: u-type; }
/* pictures: the text beside a picture that rolls on to what was just opened */
.s-unfold.pictures { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.u-pane { position: sticky; top: 100px; height: min(640px, calc(100vh - 140px)); }
.u-layer { position: absolute; inset: 0; padding: 40px 40px 0; display: flex; justify-content: center; align-items: flex-start; transform: translateY(100%);
  transition: transform .7s var(--ease); }
.u-layer.on { transform: none; }
.u-layer.off { transform: translateY(-100%); }   /* the last picture rolls up and away as the next one comes up under it */
.u-layer:has(> .win) { padding-right: 0; justify-content: flex-start; }
.u-layer .win { width: 170%; flex: none; }
.u-layer .s-phone { width: 52%; flex: none; filter: drop-shadow(0 24px 28px rgba(4, 6, 51, .22)); }
.u-layer .s-objects { position: absolute; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
@media (prefers-reduced-motion: reduce) { .u-layer { transition: none; } }
@media (max-width: 860px) {
  .s-unfold { padding-top: 56px; }
  .s-unfold.cloth .u-main { padding: 48px 24px 40px; }
  .u-chip .disc { width: 32px; height: 32px; margin-left: 6px; vertical-align: -5px; }
  .u-chip.u-tag img { height: 28px; }
  .s-unfold.pictures { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .u-pane { order: -1; top: 84px; z-index: 2; height: 240px; }   /* on phones the picture sits over the text as you read */
  .u-layer { padding: 20px 20px 0; }
  .u-layer .win { width: 100%; }
  .u-layer .s-phone { width: 46%; }
}

/* ---------- Feature cards: all four in a row, or three ---------- */
.s-features .more-grid { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
@media (max-width: 1020px) { .s-features .more-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Directions bar, for comparing directions before one is picked ---------- */
.dirbar { position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill);
  background: rgba(4, 6, 51, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 32px -12px rgba(4, 6, 51, .5); }
.dirbar a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); font: var(--type-control); font-weight: 500; color: rgba(255, 255, 255, .72);
  text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.dirbar a:hover { color: #fff; }
.dirbar a[aria-current="page"] { background: var(--lime); color: var(--navy); }
.dirbar a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dirbar a:not([aria-current="page"]) span { display: none; }   /* letters, and the name of the one you're on; hover for the others' names */
@media (max-width: 720px) {
  .dirbar { width: calc(100% - 32px); }
  .dirbar a { flex: 1; justify-content: center; padding: 0 10px; }
}