/* Segment pages (/for/, /for/*, /1-to-1/): a conversion layout over the answer-first copy.
   Loaded after styles.css and guide.css; uses only the tokens in styles.css (no colour, font or duration literals).
   Spec and per-page section order: docs/site/landing-redesign-2026-11.md.
   Frames, panes and cards are square; controls keep --radius; the only shadow is --sheet-shadow, on an email sheet. */

/* ---------- Page frame ---------- */

.seg { overflow-x: clip; }
.seg h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; max-width: 20em; }
.seg h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.seg p a, .seg li a, .seg dd a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.seg p a:hover, .seg li a:hover, .seg dd a:hover { text-decoration-thickness: 2px; }
.seg strong { font-weight: 600; color: var(--ink); }

.seg-section { padding: var(--section-y) 0; }
.seg-section + .seg-section { border-top: 1px solid var(--rule); }
.seg-alt { background: var(--surface-alt); }

/* Section head: mono eyebrow ("01 / The rework"), the question H2, its answer in one or two sentences. */
.seg-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.seg-head .eyebrow { margin-bottom: 16px; }
.seg-lead { margin-top: 16px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 38em; }
.seg-lead + .seg-lead { margin-top: 12px; }

/* Vertical rhythm between blocks inside one section. */
.seg-block + .seg-block,
.seg-section .container > * + .seg-block { margin-top: clamp(40px, 5vw, 72px); }

/* ---------- Hero ---------- */

.seg-hero { background: var(--surface); padding-bottom: clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--rule); }
.seg-hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px;
  align-items: center; margin-top: clamp(24px, 4vw, 56px);
}
.seg-hero-text { grid-column: 1 / span 6; }
.seg-hero-visual { grid-column: 7 / span 6; }
.seg-hero h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 600; letter-spacing: var(--ls-hero); line-height: 1.02; max-width: 14em; }

/* The Short answer, kept visible and labelled (AEO §4.1): a ruled lede under the H1, not a boxed aside. */
.seg-answer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ink); max-width: 36rem; }
.seg-answer .label { display: block; margin-bottom: 8px; font-size: 11px; color: var(--text-meta); }
.seg-answer p { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink); }

.seg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.seg-actions .button-dark { width: auto; }
.seg-esps { margin-top: 24px; font-size: 11px; line-height: 1.8; letter-spacing: 0.04em; color: var(--text-muted); }
.seg-hero .byline { margin-top: 12px; }

/* ---------- Figures: product diagrams from /illus/, on the stage ground ---------- */

.seg-figure { margin: 0; }
.seg-frame { background: var(--stage); border: 1px solid var(--rule); padding: clamp(12px, 3vw, 32px); }
.seg-frame img { width: 100%; height: auto; margin: 0 auto; }
.seg-figure .caption { margin-top: 12px; }

/* ---------- On this page ---------- */

.seg-jump { background: var(--surface); border-bottom: 1px solid var(--rule); }
.seg-jump ol {
  display: flex; gap: 8px 28px; overflow-x: auto; padding: 14px 0; scrollbar-width: none;
  font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta);
}
.seg-jump ol::-webkit-scrollbar { display: none; }
.seg-jump li { flex: none; }
.seg-jump a { text-decoration: none; white-space: nowrap; }
.seg-jump a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pain strip: the rework, one tile per item ---------- */

.seg-pain {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 32px 24px;
  counter-reset: pain;
}
.seg-pain > li { counter-increment: pain; padding-top: 16px; border-top: 2px solid var(--ink); }
.seg-pain > li::before {
  content: counter(pain, decimal-leading-zero); display: block; margin-bottom: 12px;
  font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--text-meta);
}
.seg-pain b { display: block; margin-bottom: 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.seg-pain p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* One sentence set large: the consequence, after a strip or a list. */
.seg-callout {
  margin-top: clamp(32px, 4vw, 48px); padding: 24px 28px; max-width: 46rem;
  background: var(--surface); border-left: 2px solid var(--ink);
  font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink);
}
.surface .seg-callout { background: var(--paper); }

/* From practice: Alexander's signed first-hand passage (AEO §4.1 item 7), when he writes one. */
.seg-practice { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 46rem; padding-left: 28px; border-left: 2px solid var(--rule-strong); }
.seg-practice p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink); }
.seg-practice footer { margin-top: 16px; font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); }

/* ---------- Steps: the flow from brief to draft ---------- */

.seg-steps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 16px; counter-reset: step; }
.seg-steps > li {
  counter-increment: step; position: relative;
  display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 24px;
  background: var(--surface); border: 1px solid var(--rule);
}
.surface .seg-steps > li { background: var(--paper); }
.seg-steps > li::before {
  content: counter(step, decimal-leading-zero) " /"; order: -2;
  font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--text-meta);
}
/* The connector: a 1 px ink rule bridging the gap to the next step. */
.seg-steps > li:not(:last-child)::after {
  content: ""; position: absolute; top: 42px; right: -17px; width: 16px; border-top: 1px solid var(--ink);
}
.seg-steps img { order: -1; width: 32px; height: 32px; }
.seg-steps h3 { font-size: 18px; line-height: 1.3; }
.seg-steps p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Split: text beside a figure (5/7 or 7/5) ---------- */

.seg-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: center; }
.seg-split-text { grid-column: 1 / span 5; }
.seg-split-figure { grid-column: 7 / span 6; }
.seg-split.is-flipped .seg-split-text { grid-column: 8 / span 5; grid-row: 1; }
.seg-split.is-flipped .seg-split-figure { grid-column: 1 / span 6; grid-row: 1; }
.seg-split-text h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 16px; }
.seg-split-text p { color: var(--ink-2); }
.seg-split-text p + p { margin-top: 16px; }

/* ---------- Cards: what stays yours, what Caliber's own, and similar sets ---------- */

.seg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 16px; }
.seg-card { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; background: var(--surface); border: 1px solid var(--rule); }
.surface .seg-card { background: var(--paper); }
.seg-card.is-key { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg-card img { width: 32px; height: 32px; }
.seg-card p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.seg-card .label { color: var(--text-meta); font-size: 11px; }

/* A card that is a link (the /for/ hub's page list). */
a.seg-card { color: inherit; text-decoration: none; transition: border-color var(--duration-feedback) var(--ease-out); }
a.seg-card:hover { border-color: var(--ink); }
a.seg-card strong { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
a.seg-card::after { content: "→"; margin-top: auto; font-family: var(--font-mono); color: var(--text-meta); }

/* Rows inside a card: a market edition, a 1:1 test, a tier. Label in mono, value in sans. */
.seg-card dl { margin: 0; }
.seg-card dl > div { padding: 10px 0; border-top: 1px solid var(--rule); }
.seg-card dl:first-child > div:first-child { padding-top: 0; border-top: 0; }
.seg-card dt { font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); }
.seg-card dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.seg-card .chip { align-self: flex-start; }

/* ---------- Versus: two named panels side by side (Composer / Caliber, Agentic Standards / Caliber, Bonnie / Caliber) ---------- */

.seg-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.seg-versus > section { padding: 28px 32px; background: var(--surface); border: 1px solid var(--rule); }
.surface .seg-versus > section { background: var(--paper); }
.seg-versus > section:last-child { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg-versus .label { display: block; margin-bottom: 12px; color: var(--text-meta); font-size: 11px; }
.seg-versus p { color: var(--ink-2); }
.seg-versus p + p { margin-top: 12px; }

/* ---------- Never: what Caliber will not do in an ESP, as a ruled list of refusals ---------- */

.seg-never { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 24px; border-top: 2px solid var(--ink); }
.seg-never > li { display: flex; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.seg-never > li::before { content: "—"; flex: none; font-family: var(--font-mono); color: var(--text-meta); }

/* Sources: guide.css's .sources, in a quiet closing block. */
.seg-sources h2 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 16px; }
.seg-sources ol { list-style: decimal; padding-left: 1.25em; display: grid; gap: 8px; max-width: 64rem; }

/* ---------- Rules: pricing rules as a ruled grid of tiles, not a table ---------- */

.seg-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-top: 2px solid var(--ink);
}
.seg-rules > li { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; background: var(--surface); }
.seg-rules h3 { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -0.02em; }
.seg-rules p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.seg-rules dl { margin: 0; display: grid; gap: 8px; }
.seg-rules dt { font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); }
.seg-rules dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }

/* A figure that should not stretch to the full container: wide-and-short diagrams. */
.seg-figure.is-narrow { max-width: 760px; margin-inline: auto; }

.seg-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 24px; padding: 20px 24px; background: var(--surface-alt);
}
.seg-note p { max-width: 40em; color: var(--ink-2); }
.seg-note .button { width: auto; min-height: 44px; flex: none; }

/* ---------- Fit: who it is worth it for, and who not ---------- */

.seg-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.seg-fit-panel { padding: 28px 32px 24px; background: var(--surface); border: 1px solid var(--rule); }
.seg-fit-panel.is-yes { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg-fit-panel.is-no { background: transparent; }
.seg-fit-panel h3 { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.seg-fit-panel h3::before {
  content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 1px;
}
.seg-fit-panel.is-yes h3::before { background: var(--ink); }
.seg-fit-panel li { padding: 14px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.seg-fit-panel.is-no li { color: var(--text-muted); }

/* ---------- Where Caliber stands: the line, then the facts as a ruled list ---------- */

.seg-stand { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
.seg-stand > div:first-child { grid-column: 1 / span 5; }
.seg-facts { grid-column: 7 / span 6; margin: 0; border-bottom: 1px solid var(--rule-strong); }
.seg-stand-line { margin-top: 20px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.seg-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--rule-strong); }
.seg-facts dt { padding-top: 4px; font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); }
.seg-facts dd { margin: 0; color: var(--ink-2); }
.seg-esp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-esp-chips li { padding: 3px 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 14px; line-height: 1.4; color: var(--ink); }

/* ---------- FAQ: the home page's native <details> accordion (.faq-grid, .faq), with the question as an H3 ---------- */

.seg .faq summary h3 { font: inherit; letter-spacing: inherit; line-height: 1.35; }
.seg .faq summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.seg-faq-intro { margin-top: 16px; color: var(--text-muted); max-width: 22em; }

/* ---------- Calls to action ---------- */

/* Mid-page: a ruled strip on the section's own ground; the button repeats the hero's. */
.seg-cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 24px 28px; background: var(--surface); border: 1px solid var(--ink);
}
.surface .seg-cta-inline { background: var(--paper); }
.seg-cta-inline p { color: var(--text-muted); }
.seg-cta-inline p strong { display: block; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.03em; line-height: 1.2; }
.seg-cta-inline .button { width: auto; flex: none; }

/* End of page: the ink band, the one dark section above the footer. */
.seg-cta { padding: clamp(64px, 8vw, 120px) 0; }
.seg-cta-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.seg-cta-inner > div { grid-column: 1 / span 7; }
.seg-cta-inner > .button { grid-column: 9 / span 4; justify-self: end; width: auto; }
.seg-cta h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); line-height: 1.04; color: var(--on-dark); }
.seg-cta p { margin-top: 16px; max-width: 32em; color: var(--on-dark-muted); }

/* Related links: guide.css's .related, full width inside the section. */
.seg .related { margin-top: 0; max-width: none; }
.seg .related a { display: flex; flex-direction: column; gap: 4px; transition: border-color var(--duration-feedback) var(--ease-out); }
.seg .related a::after { content: "→"; margin-top: 12px; font-family: var(--font-mono); color: var(--text-meta); }
.seg .related .label { margin-bottom: 4px; }
.seg-related { padding: clamp(48px, 6vw, 80px) 0; }

/* ---------- Motion: scroll-driven, CSS only, opacity and ≤8 px, once per entry; nothing for headlines or chrome ---------- */

@keyframes seg-rise { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .seg-reveal > *,
    .seg-figure.seg-reveal {
      animation: seg-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .seg-figure.seg-reveal > * { animation: none; }
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .seg-hero-text, .seg-hero-visual { grid-column: 1 / -1; }
  .seg-hero-visual { max-width: 640px; }

  .seg-split-text, .seg-split-figure,
  .seg-split.is-flipped .seg-split-text, .seg-split.is-flipped .seg-split-figure { grid-column: 1 / -1; grid-row: auto; }
  .seg-split-figure { max-width: 640px; }

  /* Steps stack into a ruled column; the connector turns vertical. */
  .seg-steps { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 12px; }
  .seg-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 18px 20px; }
  .seg-steps > li::before { grid-column: 2; grid-row: 1; }
  .seg-steps img { grid-column: 1; grid-row: 1 / span 3; }
  .seg-steps > li:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
  .seg-steps > li:not(:has(img))::before, .seg-steps > li:not(:has(img)) h3, .seg-steps > li:not(:has(img)) p { grid-column: 1; }
  .seg-steps h3, .seg-steps p { grid-column: 2; }
  .seg-steps > li:not(:last-child)::after { top: auto; right: auto; bottom: -13px; left: 35px; width: 0; height: 12px; border-top: 0; border-left: 1px solid var(--ink); }

  .seg-stand > div:first-child, .seg-facts { grid-column: 1 / -1; }
  .seg-cta-inner > div, .seg-cta-inner > .button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 767px) {
  .seg-fit, .seg-versus { grid-template-columns: minmax(0, 1fr); }
  .seg-versus > section { padding: 22px 20px; }
  .seg-fit-panel { padding: 22px 20px 16px; }
  .seg-callout { padding: 20px; }
  .seg-cta-inline { padding: 20px; }
  .seg-cta-inline .button { width: 100%; }
  .seg-note { padding: 20px; }
  .seg-note .button { width: 100%; }
  .seg-actions .button-dark { width: 100%; }
  .seg-facts > div { grid-template-columns: minmax(0, 1fr); }
  .seg-facts dt { padding-top: 0; }
  .seg-rules > li, .seg-card { padding: 20px; }
  .seg-practice { padding-left: 20px; }
}

@media print {
  .seg-jump, .seg-cta, .seg-cta-inline, .seg-related { display: none; }
  .seg .faq details { display: block; }
  .seg-section { padding: 24px 0; }
}