/* /what-i-do/: the plain-English page. World tokens in world.css. */
.plain h2 { margin: 0 0 20px; font: 800 var(--h2)/1.08 var(--face); font-stretch: 112%; letter-spacing: -0.02em; text-wrap: balance; max-width: 24ch; }
.plain h3 { margin: 0 0 8px; font: 780 clamp(1.2rem, 1.6vw, 1.5rem)/1.2 var(--face); font-stretch: 108%; }
.plain section { padding-block: var(--section); }
.page-plainspeak .paper { background-size: 36px 36px; }

.plain-hero { padding-block: clamp(28px, 4vw, 72px) clamp(40px, 6vw, 88px) !important; }
.plain-hero-grid { display: grid; gap: 36px clamp(32px, 5vw, 64px); align-items: center; }
.plain-hero h1 { margin: 0; color: var(--bone); font: 800 var(--h1-page)/1.04 var(--face); font-stretch: 112%; letter-spacing: -0.025em; text-wrap: balance; }
.plain-lede { margin: 20px 0 0; max-width: 40ch; color: var(--bone); font: 500 clamp(1.2rem, 1.8vw, 1.6rem)/1.4 var(--face); }
.plain-sub { margin: 16px 0 0; max-width: 52ch; color: var(--bone-soft); }

/* The motto as three pieces stacking into one column, like a well filling */
.motto { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.motto-piece { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 3px; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.22), inset 0 3px 0 rgba(255,255,255,0.18); color: var(--ink); }
.motto-piece--found { background: var(--found); margin-right: 18%; }
.motto-piece--understood { background: var(--understood); margin-left: 9%; margin-right: 9%; }
.motto-piece--chosen { background: var(--chosen); margin-left: 18%; }
.motto-word { font: 850 clamp(1.6rem, 3vw, 2.6rem)/1 var(--face); font-stretch: 122%; letter-spacing: -0.02em; }
.motto-say { font-weight: 650; font-size: 0.95rem; white-space: nowrap; }

/* The three steps */
.step-list { display: grid; gap: 28px clamp(24px, 3vw, 56px); }
.step { position: relative; padding-top: 18px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 8px; border-radius: 2px; }
.step--found::before { background: var(--found); }
.step--understood::before { background: var(--understood); }
.step--chosen::before { background: var(--chosen); }
.step p { margin: 0; color: var(--ink-soft); }

/* Follow one search */
.follow { padding-top: 0 !important; }
.follow-grid { display: grid; gap: 24px clamp(32px, 5vw, 96px); align-items: start; }
.follow-intro p { color: var(--ink-soft); max-width: 44ch; }
.follow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.follow-tabs [role="tab"] { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--sheet); color: var(--ink); font: 700 0.95rem/1 var(--face); cursor: pointer; box-shadow: inset 0 0 0 2px #c3cad3, inset 0 -4px 0 rgba(0,0,0,0.08); }
.follow-tabs [role="tab"][aria-selected="true"] { background: var(--field); color: var(--bone); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3); }
.follow-panel { background: var(--field); color: var(--bone); border-radius: var(--radius); padding: 22px; }
.follow-panel + .follow-panel { margin-top: 16px; }
.follow-who { margin: 0 0 14px; color: var(--number); }
.follow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 3px; background: var(--field-2); }
.fs-tag { font-weight: 800; font-size: 0.85rem; font-stretch: 110%; }
.fs--ask .fs-tag { color: var(--bone-soft); }
.fs--found .fs-tag { color: var(--found); }
.fs--understood .fs-tag { color: var(--understood); }
.fs--chosen .fs-tag { color: #f08a72; }
.fs-text { color: var(--bone); }
.fs--ask .fs-text { font-style: italic; color: var(--bone-soft); }
.follow-more { margin: 14px 0 0; }
.follow-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); font-weight: 650; }

/* Why a business pays */
.why-grid { display: grid; gap: 16px clamp(32px, 5vw, 96px); }
.why h2 { color: var(--bone); }
.why-body p { color: var(--bone-soft); }
.why-body p:first-child { color: var(--bone); font-size: 1.12em; }

.close-line { display: grid; gap: 8px 64px; align-items: start; }
.close-line h2 { margin-bottom: 0; }
.close-line p { color: var(--ink-soft); }
.close-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

@media (min-width: 900px) {
  .plain-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .step-list { grid-template-columns: repeat(3, 1fr); }
  .follow-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .why-grid, .close-line { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (max-width: 480px) { .fs { grid-template-columns: 1fr; gap: 4px; } }
.plain-crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; color: var(--bone-soft); font-size: .95rem; }
.plain-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* With JS, the three panels share one grid cell, so the area keeps the tallest panel's height and
   switching tabs never moves the page. Hidden panels use visibility (also out of the a11y tree). */
.js .follow-panels { display: grid; }
.js .follow-panel { grid-area: 1 / 1; }
.js .follow-panel + .follow-panel { margin-top: 0; }
.js .follow-panel[hidden] { display: block !important; visibility: hidden; }
@media (max-width: 360px) { .motto-piece { flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px; } .motto-word { font-size: 1.45rem; } .motto-say { white-space: normal; } }
/* Hayden's screenshot, 2026-10-12: "They get you" ran out of the Understood piece at a mid width (the word is long and
   the line refused to wrap). The line now wraps under the word when the piece runs out of room, at every width. */
.motto-piece { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.motto-word { min-width: 0; }
.motto-say { white-space: normal; margin-left: auto; text-align: right; }