/* Shared editorial design for Story, Product and Case Study. Mobile first. */
.editorial {
  --paper: var(--heykup-paper);
  --surface: var(--heykup-surface);
  --ink: var(--heykup-ink);
  --muted: var(--heykup-muted);
  --line: var(--heykup-line);
  --accent: var(--heykup-accent);
  --feature: var(--heykup-feature);
  color-scheme: light;
  font-family: var(--heykup-font);
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 160px;
}
.editorial * { box-sizing: border-box; }
.editorial, .editorial h1, .editorial h2, .editorial h3, .editorial p, .editorial figure { margin: 0; }
.editorial { min-width: 280px; -webkit-text-size-adjust: 100%; }
.editorial a { color: inherit; text-decoration: none; }
.editorial button, .editorial summary { font: inherit; }
.editorial a, .editorial summary { -webkit-tap-highlight-color: transparent; }
.editorial a:focus-visible, .editorial summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.editorial p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.editorial h1, .editorial h2, .editorial h3 { font-weight: 750; letter-spacing: -.05em; text-wrap: balance; }
.editorial h1 { font-size: clamp(44px, 10.5vw, 76px); line-height: 1.02; }
.editorial h2 { font-size: var(--site-heading); line-height: 1.08; }
.editorial h3 { font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.editorial .container { width: min(var(--site-width), calc(100% - 2 * var(--site-gutter))); margin-inline: auto; }
.editorial .accent { color: var(--feature); }
.editorial .eyebrow, .editorial .chapter-number, .editorial .small-number, .editorial .scene-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .15em;
  font-weight: 650;
  text-transform: uppercase;
}
.editorial .eyebrow { margin-bottom: 18px; }
.editorial .skip-link { position: fixed; z-index: 100; top: 8px; left: 16px; transform: translateY(-160%); padding: 14px; background: var(--ink); color: var(--paper); border-radius: 12px; }
.editorial .skip-link:focus { transform: translateY(0); }
.editorial .topbar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 0; }
.editorial .header-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding-block: 16px 12px; }
.editorial .brand-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; width: fit-content; }
.editorial .mark-wrap { display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--accent); }
.editorial .mark-wrap svg { width: 100%; height: 100%; }
.editorial .wordmark { color: var(--ink); font-size: 25px; line-height: 1; font-weight: 800; letter-spacing: -.065em; }
.editorial .wordmark .hey { color: var(--accent); }
.editorial .topbar-actions { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.editorial .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.editorial .chip:hover { background: var(--surface); color: var(--ink); }
.editorial .chip-active, .editorial .chip-active:hover { background: var(--feature); color: #fff; }
.editorial .button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 52px; padding: 14px 20px; border-radius: 14px; border: 1px solid transparent; font-size: 15px; line-height: 1.25; font-weight: 600; transition: background 150ms ease; }
.editorial .button-primary { background: var(--feature); color: #fff; }
.editorial .button-primary:hover { background: var(--ink); }
.editorial .button-light { background: var(--paper); color: var(--ink); }
.editorial .button-light:hover { background: #fff; }
.editorial .header-cta { grid-column: 2; grid-row: 1; min-height: 44px; padding: 10px 12px; font-size: 12px; gap: 8px; }
.editorial .actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 28px; }
.editorial .text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-weight: 600; font-size: 14px; line-height: 1.4; }
.editorial .text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.editorial .text-link span { color: var(--accent); font-size: 20px; }
.editorial .hero { display: grid; gap: 44px; padding-block: var(--site-section-space); padding-inline: 0; align-items: center; text-align: left; }
.editorial .hero-copy { min-width: 0; max-width: 560px; }
.editorial .hero .lead { margin-top: 24px; max-width: 480px; font-size: 18px; line-height: 1.6; }
.editorial .hero-copy > .text-link { margin-top: 26px; }
.editorial .supporting-note { margin-top: 16px; font-size: 12px; }
.editorial figcaption { margin-top: 14px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.5; }
.editorial .conversation-scene { background: var(--ink); border-radius: 24px; padding: 28px 20px; color: var(--paper); }
.editorial .conversation-scene .scene-label { color: #b2b8c3; margin-bottom: 32px; }
.editorial .message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.editorial .message-offset { padding-left: 20px; }
.editorial .avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e7e9ec; color: var(--ink); font-size: 11px; line-height: 1; font-style: normal; font-weight: 650; flex-shrink: 0; }
.editorial .message p { color: var(--paper); background: #30343b; border: 1px solid #41464f; border-radius: 0 14px 14px; padding: 14px; font-size: 15px; line-height: 1.4; }
.editorial .scene-answer { border-top: 1px solid #41464f; padding-top: 24px; margin-top: 32px; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.5; color: #b2b8c3; }
.editorial .signal-dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--accent); border-radius: 50%; }
.editorial .section-divider { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-block: 1px solid var(--line); padding-block: 20px; color: var(--muted); font-size: 13px; }
.editorial .chapter { display: grid; gap: 28px; padding-block: var(--site-section-space); }
.editorial .chapter-number { margin-bottom: 18px; }
.editorial .chapter-copy p + p { margin-top: 20px; }
.editorial .chapter-copy .large-copy, .editorial .large-copy { color: var(--ink); font-size: clamp(21px, 4.8vw, 28px); line-height: 1.4; letter-spacing: -.025em; }
.editorial .chapter-copy .text-link { margin-top: 20px; }
.editorial .belief-band { background: var(--ink); padding-block: 60px; color: var(--paper); }
.editorial .belief-band h2 { font-size: clamp(40px, 9vw, 74px); }
.editorial .belief-band h2 span { color: var(--accent); }
.editorial .belief-band p { color: #b2b8c3; max-width: 500px; }
.editorial .belief-band h2 + p { margin-top: 28px; font-size: 18px; }
.editorial .belief-band .eyebrow { color: #b2b8c3; }
.editorial .section-space, .editorial .principles-section, .editorial .faq-section { padding-block: var(--site-section-space); }
.editorial .section-heading { max-width: 720px; margin-bottom: 32px; }
.editorial .section-heading > p:last-child:not(.eyebrow) { margin-top: 20px; max-width: 540px; }
.editorial .principles-grid, .editorial .feature-grid, .editorial .learning-grid { display: grid; gap: 14px; }
.editorial .principles-grid article { border-top: 1px solid var(--line); padding: 24px 0; }
.editorial .principles-grid h3 { margin-block: 20px 12px; }
.editorial .closing { padding-block: 0 64px; }
.editorial .closing-panel { background: var(--ink); color: var(--paper); padding: 32px 24px; border-radius: 24px; }
.editorial .closing-panel .eyebrow, .editorial .closing-panel p { color: #b2b8c3; }
.editorial .closing-panel h2 + p { margin-top: 20px; max-width: 520px; }
.editorial .closing-panel .text-link { color: var(--paper); }
.editorial .site-footer { border-top: 1px solid var(--line); padding-block: 30px; }
.editorial .footer-inner { display: grid; gap: 24px; }
.editorial .site-footer p { font-size: 13px; margin-top: 8px; }
.editorial .site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.editorial .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--muted); }
.editorial .site-footer nav a:hover { color: var(--ink); }
.editorial .footer-note { font-size: 11px; color: var(--muted); }
/* A representative product preview, built in HTML so it stays sharp at any size. */
.editorial .product-figure { width: min(360px, 100%); justify-self: center; }
.editorial .phone-preview { padding: 22px 20px 12px; border: 1px solid var(--line); border-radius: 32px; background: var(--paper); box-shadow: 0 20px 60px #17191d0d; }
.editorial .phone-top, .editorial .demo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editorial .demo-brand { font-size: 21px; font-weight: 800; letter-spacing: -.065em; }
.editorial .demo-team { font-size: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px; }
.editorial .demo-eyebrow { margin: 28px 0 10px; font-size: 9px; letter-spacing: .12em; }
.editorial .phone-preview h2 { font-size: 32px; line-height: 1.05; }
.editorial .today-panel { margin-top: 22px; padding: 20px 16px; background: var(--ink); color: var(--paper); border-radius: 18px; }
.editorial .demo-label { font-size: 9px; letter-spacing: .15em; color: #b2b8c3; }
.editorial .today-panel h3 { font-size: 22px; margin-top: 12px; }
.editorial .status-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
.editorial .status-options span { padding: 11px 4px; border-radius: 10px; text-align: center; background: #30343b; color: #f4f5f6; font-size: 10px; }
.editorial .status-options .selected { background: var(--feature); color: #fff; }
.editorial .demo-week { border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 16px; margin-top: 12px; }
.editorial .demo-row { font-size: 11px; }
.editorial .demo-row span { color: var(--muted); font-size: 10px; }
.editorial .week-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 18px; text-align: center; font-size: 10px; color: var(--muted); }
.editorial .week-days i { display: block; height: 24px; background: #e1e4e8; border-radius: 6px; margin-top: 8px; }
.editorial .week-days .in-office { background: var(--feature); }
.editorial .demo-team-line { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.editorial .avatar-stack { display: flex; padding-left: 6px; }
.editorial .avatar-stack span { display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--paper); margin-left: -6px; width: 28px; height: 28px; font-size: 9px; background: #e1e4e8; }
.editorial .demo-team-line p { font-size: 10px; line-height: 1.6; }
.editorial .demo-team-line strong { color: var(--ink); font-weight: 600; }
.editorial .demo-dock { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 10px; text-align: center; }
.editorial .demo-dock span { padding: 10px 8px; color: var(--muted); }
.editorial .demo-dock .selected { border-radius: 18px; background: var(--feature); color: #fff; }
.editorial .value-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; border-block: 1px solid var(--line); padding-block: 22px; font-size: 12px; color: var(--muted); }
.editorial .feature-grid article, .editorial .learning-grid article { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 24px; }
.editorial .feature-grid h3, .editorial .learning-grid h3 { margin-block: 24px 12px; }
.editorial .feature-grid p, .editorial .learning-grid p { font-size: 14px; }
.editorial .mini-status, .editorial .mini-calendar, .editorial .mini-roster { margin-top: 28px; min-height: 80px; }
.editorial .mini-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.editorial .pill { display: inline-flex; justify-content: center; border: 1px solid var(--line); background: var(--paper); padding: 9px 12px; border-radius: 12px; font-size: 11px; }
.editorial .pill-office { background: var(--feature); color: #fff; border-color: var(--feature); }
.editorial .mini-calendar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; font-size: 11px; }
.editorial .mini-calendar b { display: block; font-size: 20px; margin-top: 12px; color: var(--muted); }
.editorial .mini-calendar .on { color: var(--feature); }
.editorial .mini-roster { display: grid; gap: 8px; }
.editorial .mini-roster > span { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.editorial .mini-roster b { margin-left: auto; font-size: 10px; color: var(--muted); font-weight: 500; }
.editorial .split-section { display: grid; gap: 36px; }
.editorial .band-details article + article { margin-top: 28px; padding-top: 24px; border-top: 1px solid #373c45; }
.editorial .band-details h3 { margin-bottom: 12px; }
.editorial .band-details > p + p { margin-top: 24px; }
.editorial .band-details .large-copy { color: var(--paper); }
.editorial .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.editorial .tag-list span, .editorial .learning-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 8px 12px; }
.editorial .faq-section { border-top: 1px solid var(--line); }
.editorial .faq-list details { border-top: 1px solid var(--line); }
.editorial .faq-list details:last-child { border-bottom: 1px solid var(--line); }
.editorial .faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 22px 32px 22px 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.editorial .faq-list summary::-webkit-details-marker { display: none; }
.editorial .faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 20px; font-size: 22px; color: var(--muted); }
.editorial .faq-list details[open] summary::after { content: "−"; }
.editorial .faq-list p { padding-bottom: 24px; max-width: 700px; }
.editorial .faq-list p a { color: var(--feature); text-decoration: underline; }
/* Build case study. */
.editorial .build-art { border-radius: 24px; background: var(--ink); padding: 28px 20px; color: var(--paper); }
.editorial .build-art .scene-label { color: #b2b8c3; margin-bottom: 28px; }
.editorial .build-step { display: flex; gap: 18px; align-items: center; border-top: 1px solid #373c45; padding: 24px 0; }
.editorial .build-step > span:first-child { font-size: 11px; color: #b2b8c3; }
.editorial .build-step strong { font-size: clamp(17px, 4vw, 23px); letter-spacing: -.035em; font-weight: 600; }
.editorial .build-step-accent { color: var(--accent); padding-bottom: 0; }
.editorial .build-step-accent > span:last-child { margin-left: auto; font-size: 22px; }
.editorial .project-facts { display: grid; gap: 24px; padding-block: 24px; border-block: 1px solid var(--line); }
.editorial .project-facts span { display: block; font-size: 10px; color: var(--muted); letter-spacing: .12em; margin-bottom: 8px; }
.editorial .project-facts strong { font-weight: 600; font-size: 15px; }
.editorial .case-decisions { border-top: 1px solid var(--line); }
.editorial .decision-list article { display: grid; grid-template-columns: 28px 1fr; gap: 10px 18px; border-top: 1px solid var(--line); padding-block: 24px; }
.editorial .decision-list .small-number { color: var(--feature); margin-top: 5px; }
.editorial .decision-list p { grid-column: 2; font-size: 15px; }
.editorial .learning-grid article { display: flex; flex-direction: column; align-items: flex-start; }
.editorial .learning-grid p { flex-grow: 1; }
.editorial .learning-tag { margin-top: 28px; }
.editorial .outcome-chapter { border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .editorial { scroll-padding-top: 110px; }
  .editorial .container { width: min(var(--site-width), calc(100% - 2 * var(--site-gutter))); }
  .editorial .header-inner { grid-template-columns: 1fr auto auto; padding-block: 18px; gap: 20px; }
  .editorial .topbar-actions { grid-row: 1; grid-column: 2; display: flex; gap: 8px; }
  .editorial .chip { padding-inline: 18px; }
  .editorial .header-cta { grid-column: 3; justify-self: end; font-size: 13px; padding-inline: 16px; }
  .editorial .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; padding-block: var(--site-section-space); }
  .editorial h1 { font-size: clamp(52px, 6.1vw, 84px); }
  .editorial .hero .lead { font-size: 18px; }
  .editorial .conversation-scene, .editorial .build-art { padding: 36px 28px; }
  .editorial .chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); padding-block: var(--site-section-space); }
  .editorial .chapter-label { align-self: start; }
  .editorial .belief-band { padding-block: 92px; }
  .editorial .section-space, .editorial .principles-section, .editorial .faq-section { padding-block: var(--site-section-space); }
  .editorial .principles-grid, .editorial .feature-grid, .editorial .learning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .editorial .feature-grid article, .editorial .learning-grid article { padding: 28px 22px; }
  .editorial .feature-grid h3 { font-size: 25px; }
  .editorial .closing { padding-bottom: 90px; }
  .editorial .closing-panel { padding: 52px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
  .editorial .closing-panel .actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .editorial .closing-panel h2 { font-size: 48px; }
  .editorial .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
  .editorial .footer-note { grid-column: 1 / -1; }
  .editorial .value-strip { grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 13px; }
  .editorial .split-section { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .editorial .project-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 28px; gap: 24px; }
  .editorial .decision-list article { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; padding-block: 32px; align-items: baseline; }
  .editorial .decision-list p { grid-column: 3; }
  .editorial .faq-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
}
@media (min-width: 1100px) {
  .editorial .hero { gap: clamp(32px, 5vw, 72px); padding-block: var(--site-section-space); }
  .editorial .hero h1 { font-size: 80px; }
  .editorial .product-hero h1 { font-size: 88px; }
  .editorial .conversation-scene { padding: 40px 30px; }
  .editorial .message-offset { padding-left: 34px; }
  .editorial .scene-answer { margin-top: 44px; }
  .editorial .feature-grid article, .editorial .learning-grid article { padding: 32px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .editorial { scroll-behavior: auto; }
  .editorial *, .editorial *::before, .editorial *::after { transition: none !important; animation: none !important; }
}

/* One editorial rhythm across the combined page. */
.editorial .hero { grid-template-columns: minmax(0, 1fr); }
.editorial .hero .lead { max-width: 46ch; }
.editorial .chapter-copy { max-width: 58ch; }
.editorial .chapter { padding-block: 40px; }
.editorial .principles-section { padding-top: 40px; }
.editorial .section-heading { margin-bottom: 32px; }
.editorial .feature-grid article, .editorial .learning-grid article { border-radius: 22px; }
.editorial .conversation-scene, .editorial .build-art { padding: clamp(24px, 3vw, 36px); }
.editorial .conversation-scene .scene-label, .editorial .build-art .scene-label { margin-bottom: 24px; }
.editorial .message p { padding: 12px 16px; }
.editorial .scene-answer { margin-top: 26px; padding-top: 22px; }
.editorial .case-decisions { display: grid; gap: 24px; }
.editorial .decision-list details { border-top: 1px solid var(--line); }
.editorial .decision-list details:last-child { border-bottom: 1px solid var(--line); }
.editorial .decision-list summary { display: flex; align-items: baseline; gap: 20px; padding: 24px 0; list-style: none; cursor: pointer; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.editorial .decision-list summary::-webkit-details-marker { display: none; }
.editorial .decision-list summary::after { content: "+"; margin-left: auto; color: var(--muted); }
.editorial .decision-list details[open] summary::after { content: "−"; }
.editorial .decision-list details p { padding: 0 24px 24px 44px; max-width: 60ch; font-size: 15px; }
.editorial .planner-figure { min-width: 0; }
.editorial .planner-board { padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 60px #17191d08; }
.editorial .planner-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.editorial .planner-heading .eyebrow { margin-bottom: 12px; font-size: 10px; }
.editorial .planner-heading h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.04em; }
.editorial .planner-badge { font-size: 10px; line-height: 1.3; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.editorial .planner-grid { display: grid; gap: 10px; margin-top: 28px; }
.editorial .planner-row { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); align-items: center; gap: 8px; font-size: 11px; }
.editorial .planner-row > span { text-align: center; padding: 10px 2px; border-radius: 8px; }
.editorial .planner-row:first-child { color: var(--muted); }
.editorial .planner-row strong { font-weight: 600; font-size: 12px; }
.editorial .plan-o { background: var(--feature); color: #fff; }
.editorial .plan-r { background: #e7eaee; color: #525a66; }
.editorial .planner-key { display: flex; gap: 18px; font-size: 11px; color: var(--muted); margin-top: 20px; }
.editorial .planner-key span { display: flex; align-items: center; gap: 6px; }
.editorial .planner-key i { width: 6px; height: 6px; border-radius: 50%; background: #a8aeb8; }
.editorial .planner-key .plan-dot-office { background: var(--feature); }
.editorial .planner-insight { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.editorial .planner-insight > span { color: var(--feature); font-size: 26px; }
.editorial .planner-insight p { font-size: 12px; line-height: 1.6; }
.editorial .planner-insight strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .editorial .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .editorial .case-decisions { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 72px; }
}
@media (max-width: 899px) and (min-width: 600px) {
  .editorial .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .editorial .hero h1, .mw .public-section .editorial-title { font-size: 40px; }
  .editorial .hero .lead { font-size: 16px; }
}
@media (max-width: 599px) {
  .editorial .planner-badge { display: none; }
  .editorial .planner-row { gap: 5px; }
  .editorial .chapter { padding-block: 24px; }
  .editorial .principles-section { padding-top: 32px; }
}

/* Editorial colour follows the same orange, paper and charcoal palette. */
.editorial { --paper: var(--site-warm); --surface: #fff; }
.editorial .topbar { background: color-mix(in srgb, var(--site-warm) 94%, transparent); backdrop-filter: blur(18px); }
.editorial .mark-wrap { background: var(--accent); color: #fff; border-color: transparent; }
.editorial :is(.eyebrow, .chapter-number, .small-number) { color: var(--feature); }
.editorial .hero { position: relative; isolation: isolate; }
.editorial :is(.conversation-scene, .build-art) {
  background: linear-gradient(135deg, var(--ink) 22%, color-mix(in srgb, var(--accent) 30%, var(--ink)));
  border: 1px solid #ffffff20;
  box-shadow: var(--site-shadow);
}
.editorial .message p { background: #ffffff0d; border-color: #ffffff26; }
.editorial .message-offset p { background: var(--site-peach); color: var(--ink); border-color: var(--site-peach); }
.editorial .avatar { background: var(--site-apricot); color: var(--ink); }
.editorial .scene-answer { color: #e1e4e8; border-color: #ffffff26; }
.editorial .section-divider { background: var(--site-peach); color: var(--feature); border-color: transparent; padding-inline: 20px; border-radius: 12px; }
.editorial .belief-band { background: linear-gradient(110deg, var(--feature), color-mix(in srgb, var(--accent) 40%, var(--ink))); }
.editorial .belief-band :is(p, .eyebrow) { color: #f4f5f6; }
.editorial .belief-band h2 span { color: var(--site-apricot); }
.editorial .principles-grid article { padding: 28px 24px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.editorial .principles-grid article:nth-child(2) { background: var(--site-peach); }
.editorial .principles-grid article:nth-child(3) { --muted: color-mix(in srgb, var(--ink) 78%, #fff); background: var(--site-apricot); }
.editorial :is(.feature-grid, .learning-grid) article { background: #fff; box-shadow: var(--site-shadow); border-color: var(--line); }
.editorial :is(.feature-grid, .learning-grid) article:nth-child(3n + 2) { background: var(--site-peach); }
.editorial :is(.feature-grid, .learning-grid) article:nth-child(3n + 3) { background: color-mix(in srgb, var(--ink) 4%, #fff); }
.editorial .feature-grid .feature-number { color: var(--feature); }
.editorial .planner-board { background: #fff; box-shadow: var(--site-shadow); border-top: 5px solid var(--accent); }
.editorial .planner-heading .eyebrow { color: var(--feature); }
.editorial .planner-insight { background: var(--site-peach); border: 0; border-radius: 14px; padding: 18px; }
.editorial .planner-insight p { color: var(--ink); }
.editorial .value-strip { background: var(--site-peach); border-color: transparent; color: var(--feature); }
.editorial .phone-preview { background: #fff; box-shadow: var(--site-shadow); }
.editorial .today-panel { background: linear-gradient(125deg, var(--ink), color-mix(in srgb, var(--accent) 25%, var(--ink))); }
.editorial .status-options .selected { background: var(--site-peach); color: var(--ink); }
.editorial .project-facts { background: var(--site-peach); padding-inline: 24px; border-color: transparent; border-radius: 16px; }
.editorial .project-facts span { color: var(--feature); }
.editorial .build-step { border-color: #ffffff26; }
.editorial .build-step-accent { color: var(--site-apricot); }
.editorial .decision-list details[open] { background: var(--site-peach); border-color: transparent; border-radius: 16px; padding-inline: 20px; margin-inline: -20px; }
.editorial .closing-panel { background: linear-gradient(120deg, var(--ink) 20%, color-mix(in srgb, var(--accent) 35%, var(--ink))); box-shadow: var(--site-shadow); }
.editorial .closing-panel .button-light { background: var(--site-peach); }
.editorial .site-footer { background: var(--site-peach); }
@media (max-width: 599px) {
  .editorial .decision-list details[open] { padding-inline: 12px; margin-inline: -12px; }
}

/* Four visible destinations, with enough room on smaller phones. */
.editorial .mark-wrap svg path[stroke] { stroke: var(--accent); }
@media (max-width: 759px) {
  .editorial .topbar-actions { grid-template-columns: .8fr 1fr 1.3fr .7fr; gap: 2px; }
  .editorial .chip { padding-inline: 5px; font-size: 12px; }
}
@media (min-width: 760px) and (max-width: 900px) {
  .editorial .chip { padding-inline: 10px; }
  .editorial .header-inner { gap: 12px; }
}