/* Option G: the parts of each page (site.css holds the system). */

/* ---------- Home: the hero and the demo on the stage ---------- */
.split--home .read--top { grid-row: 1; min-height: calc(100svh - var(--bar) - var(--edge)); display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--pad); border-radius: var(--r) var(--r) 0 0; }
.split--home .read--mid { grid-row: 2; padding-top: clamp(48px, 7vw, 112px); padding-bottom: 0; view-transition-name: none; }
.split--home .read--end { grid-row: 3; }
.split--home .stage { grid-row: 1 / span 3; }
.hero__title span { display: inline-block; }
.hero__lead { margin-top: 32px; max-width: 30ch; }
.hero__actions { margin-top: 40px; }
.hero__price { margin-top: 20px; color: var(--muted); }
.how__lede { margin-top: 20px; max-width: 40ch; }
.demo__pics { display: grid; place-items: center; }
.demo .stage__pic { padding: 48px clamp(28px, 3.4vw, 56px) 112px; }
.demo .stage__pic > .ui, .demo .demo__week > .ui { max-width: 600px; }
.demo .demo__week { width: 100%; display: grid; justify-items: center; }
.demo__noscript { padding: 48px; font-size: 18px; }
.demo__ctl { position: absolute; left: clamp(28px, 3.4vw, 56px); right: clamp(28px, 3.4vw, 56px); bottom: 28px; display: flex; align-items: center; gap: 16px; }
.demo__play { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--white); color: var(--charcoal); font-size: 14px; font-weight: 600; flex: none; }
.demo__play:hover { background: var(--sage-100); }
.demo__play-icon { position: relative; width: 12px; height: 12px; }
.demo__play-icon::before, .demo__play-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: currentColor; }
.demo__play-icon::before { left: 1px; } .demo__play-icon::after { right: 1px; }
.demo__play[aria-pressed="false"] .demo__play-icon::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.demo__play[aria-pressed="false"] .demo__play-icon::after { display: none; }
.demo__stops { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.demo__stops button { position: relative; width: 100%; padding: 16px 0 0; border: 0; background: transparent; color: var(--on-sage); font-size: 14px; font-weight: 500; text-align: left; opacity: .78; }
.demo__stops button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 999px; background: rgba(255,255,255,.28); }
.demo__stops button[aria-current="step"] { opacity: 1; font-weight: 700; }
.demo__stops button[aria-current="step"]::before { background: #fff; }
.demo__stops button:hover { opacity: 1; }
.steps { display: grid; gap: 6px; margin-top: 40px; }
.steps li { border-radius: 20px; transition: background .4s var(--ease); }
.steps li.is-on { background: var(--sage-100); }
.steps__btn { display: grid; gap: 6px; width: 100%; padding: 18px 22px; border: 0; background: transparent; text-align: left; border-radius: 20px; }
.steps li.is-on .h3 { color: var(--sage-ink); }

.how__note { margin-top: 28px; max-width: 46ch; }
.pair { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.pair .em__body p:first-child, .pair .em__body p:last-child, .pair > .ui:first-child .ui__foot { display: none; }
.pair .em__subject { margin-top: 10px; }
.pair__arrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--on-sage); font-size: 14px; font-weight: 600; }
.pair__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* the 58% chapter: the figure, its credit, and three aligned pieces */
.stat__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; }
.stat__num { font-size: clamp(120px, 15vw, 228px); line-height: .82; font-weight: 900; letter-spacing: -0.05em; color: var(--sage); }
.stat__say { display: grid; gap: 14px; max-width: 46ch; padding-bottom: 8px; }
.stat__say .lead { font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.stat__src { color: var(--muted); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(56px, 7vw, 104px); align-items: stretch; }
.trio__item { display: grid; grid-template-rows: auto 1fr; gap: 20px; min-width: 0; }
.trio__item figcaption { display: grid; gap: 8px; align-content: start; min-height: 6.2em; }
.trio__item .body { color: var(--muted); }
.trio__ui { height: 100%; overflow: hidden; border-radius: var(--r-ui); }
.trio__ui .ui { max-width: none; height: 100%; }
.ui--flat { background: var(--tone); box-shadow: none; }
.ui--flat .ui-row, .ui--flat .kv__note { background: var(--white); }
.trio__ui .kv__art { max-height: 190px; }
.trio__ui .kv__art svg { margin-top: -10%; }

/* ---------- Our story ---------- */
.story__head { padding: clamp(24px, 4vw, 64px) 0 clamp(56px, 7vw, 104px); }
.story__title span { display: inline-block; }
.story__intro { margin-top: 32px; max-width: 34ch; }
.split--story { margin-top: 0; }
.story__body { padding-bottom: clamp(56px, 7vw, 104px); }
.story__part { min-height: 0; justify-content: flex-start; padding: 0; display: grid; gap: 22px; }
.story__part + .story__part { margin-top: clamp(72px, 9vw, 140px); }
.story__part .body { max-width: 60ch; }
.story__sign { margin-top: 8px; font-size: 18px; }
.story__sign b { font-weight: 700; }
.story__listh { margin-top: 16px; }
.story__list { display: grid; gap: 6px; }
.story__list div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 20px; border-radius: 16px; background: var(--tone); }
.story__list dt { color: var(--muted); font-size: 16px; }
.story__list dd { font-size: 18px; font-weight: 600; }
.story__note { color: var(--muted); padding: 14px 18px; border-radius: 16px; background: var(--tone); }
.story__stage .stage__pic { place-items: center start; padding: 40px; }
.story__quote { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; }
.story__fields { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; color: var(--sage-deep); }

/* ---------- Features and What you care about ---------- */
.step--intro { min-height: calc(100svh - var(--bar) - var(--edge) - 2 * var(--pad)); justify-content: center; padding-top: 0; }
.step--intro .lead { margin-top: 28px; max-width: 32ch; }
.pic { width: 100%; display: grid; justify-items: center; }
.pic > .ui, .pic > .pair { max-width: 620px; }
.care__claim { margin: -6px 0 14px; font-weight: 700; letter-spacing: -0.02em; }
.care__out { display: grid; gap: 14px; margin-top: 28px; max-width: 40ch; }
.care__out dt { font-weight: 700; font-size: 18px; }
.care__out dd { font-size: 16px; }
.care__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.care__jump a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--tone); font-size: 16px; font-weight: 600; text-decoration: none; transition: background .15s; }
.care__jump a:hover { background: var(--sage-100); color: var(--sage-ink); }

/* ---------- Pricing ---------- */
.pr__intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: end; }
.pr__intro .lead { max-width: none; }
.pr__controls { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 56px; padding: 24px 28px; border-radius: 24px; background: var(--tone); align-items: center; }
.pr__label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.pr__sizerow { display: flex; align-items: center; gap: 16px; }
.pr__range { --p: .018; position: relative; flex: 1; height: 40px; display: flex; align-items: center; }
.pr__range::before { content: ""; position: absolute; left: 0; right: 0; height: 8px; border-radius: 999px; background: var(--tone-2); }
.pr__fill { position: absolute; left: 0; height: 8px; width: calc(var(--p) * 100%); border-radius: 999px; background: var(--sage); }
.pr__range input { position: relative; width: 100%; margin: 0; appearance: none; background: transparent; height: 40px; }
.pr__range input::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; border-radius: 9px; background: var(--charcoal); border: 4px solid #fff; cursor: grab; }
.pr__range input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 7px; background: var(--charcoal); border: 4px solid #fff; }
.pr__num { width: 96px; height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.pr__band { margin-top: 8px; color: var(--muted); min-height: 1.45em; }
.pr__billing { border: 0; margin: 0; padding: 0; justify-self: end; }
.pr__seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--white); }
.pr__seg label { position: relative; }
.pr__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pr__seg span { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--muted); }
.pr__seg small { font-size: 14px; font-weight: 500; }
.pr__seg input:checked + span { background: var(--charcoal); color: #fff; }
.pr__seg input:focus-visible + span { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.pr__boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--edge); margin-top: 24px; align-items: stretch; }
.box { display: flex; flex-direction: column; gap: 6px; padding: 32px; border-radius: 24px; background: var(--tone); min-width: 0; }
.box--plus { background: var(--sage); color: #fff; }
.box--enterprise.is-pick { box-shadow: inset 0 0 0 2px var(--sage); }
.box__desc { font-size: 16px; color: var(--muted); min-height: 3em; }
.box--plus .box__desc, .box--plus .box__unit, .box--plus .box__total { color: var(--on-sage); }
.box__price { min-height: 150px; margin-top: 20px; }
.box__amount { font-size: clamp(32px, 3.05vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.box__unit { margin-top: 8px; font-size: 16px; color: var(--muted); }
.box__total { margin-top: 4px; font-size: 16px; color: var(--muted); }
.box__ent { font-size: clamp(20px, 1.67vw, 24px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; max-width: 16ch; }
.box__ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.box--plus .textlink { color: #fff; }
.box__list { display: grid; gap: 12px; margin-top: 28px; font-size: 16px; }
.box__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.box--plus .tick { color: #fff; }
.pr__small { margin-top: 20px; }
.cmp__head { display: grid; gap: 10px; margin-bottom: 32px; }
.cmp__switch { display: none; }
.cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.cmp__table col[data-plan="plus"] { background: var(--sage-100); }
.cmp__feat { width: 46%; }
.cmp__table th, .cmp__table td { padding: 13px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--tone-2); }
.cmp__table thead th { font-size: 16px; font-weight: 700; border-bottom: 0; padding-top: 18px; }
.cmp__table thead th[data-plan="plus"] { border-radius: 16px 16px 0 0; }
.cmp__table td { text-align: center; font-weight: 500; }
.cmp__table tbody th { font-weight: 400; }
.cmp__group th { padding-top: 32px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; border-bottom: 0; }
.cmp__yes { width: 20px; height: 20px; margin: 0 auto; fill: none; stroke: var(--sage-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cmp__no { color: #a39f97; }
.soon { display: inline-flex; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--tone-2); color: var(--muted); font-size: 14px; font-weight: 600; }
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.faq__list { display: grid; gap: 8px; }
.faq__item { border-radius: 20px; background: var(--tone); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; border-radius: 20px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sign { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--white); font-size: 20px; font-weight: 500; line-height: 1; }
.faq__c, .faq__item[open] .faq__o { display: none; }
.faq__item[open] .faq__c { display: inline; }
.faq__item .h3 { font-size: 18px; }
.faq__item p { padding: 0 24px 22px; max-width: 64ch; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .trio { grid-template-columns: 1fr; max-width: 640px; }
  .trio__item figcaption { min-height: 0; }
  .trio__ui { height: auto; max-height: 520px; }
  .pr__boxes { grid-template-columns: 1fr; }
  .box__price { min-height: 0; }
  .faq, .pr__intro, .stat__top { grid-template-columns: 1fr; gap: 24px; }
  .split--home .read--top, .split--home .read--mid, .split--home .read--end { border-radius: 24px; }
  .split--home .read--top { grid-row: auto; min-height: 0; padding-top: 64px; padding-bottom: 56px; }
  .split--home .read--mid { grid-row: auto; padding-bottom: 32px; }
  .split--home .read--end { grid-row: auto; }
  .split--home .stage { grid-row: auto; }
  .split--home .read--top { order: -3; } .split--home .read--mid { order: -2; } .split--home .stage { order: -1; }
  .demo .stage__pics { display: grid; }
  .demo .stage__pic { grid-area: 1 / 1; padding: 24px 20px 16px; }
  .demo__ctl { position: relative; left: auto; right: auto; bottom: auto; padding: 4px 24px 24px; }
}
/* ---------- phones ---------- */
@media (max-width: 860px) {
  .hero__lead { margin-top: 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; margin-top: 32px; }
  .split--home .read--top { padding: 40px 24px 36px; }
  .split--home .read--mid { padding: 36px 24px 28px; }
  .demo .stage__pic { padding: 16px 12px 12px; }
  .demo__ctl { flex-direction: column; align-items: stretch; padding: 4px 16px 20px; }
  .demo__play { align-self: flex-start; }
  .steps { margin-top: 0; }
  .steps__btn { padding: 16px 18px; }
  .stat__num { font-size: 120px; }
  .story__list div { grid-template-columns: 1fr; gap: 2px; }
  .story__part + .story__part { margin-top: 64px; }
  .step--intro { min-height: 0; padding: 12px 0 8px; }
  .pr__controls { grid-template-columns: 1fr; padding: 20px; }
  .pr__billing { justify-self: start; }
  .box { padding: 24px; }
  .cmp__switch { display: inline-flex; gap: 2px; padding: 4px; margin: 0 0 16px; border: 0; border-radius: 999px; background: var(--tone); }
  .cmp__switch label { position: relative; }
  .cmp__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; }
  .cmp__switch span { display: inline-flex; height: 36px; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); }
  .cmp__switch input:checked + span { background: var(--charcoal); color: #fff; }
  .cmp__switch input:focus-visible + span { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
  .cmp__table { font-size: 15px; }
  .cmp__feat { width: 64%; }
  .cmp__table th, .cmp__table td { padding: 12px 8px; }
  .cmp__table td, .cmp__table thead th[data-plan] { text-align: right; }
  .cmp__yes { margin: 0 0 0 auto; }
  .cmp__frame[data-show="essentials"] [data-plan]:not([data-plan="essentials"]),
  .cmp__frame[data-show="plus"] [data-plan]:not([data-plan="plus"]),
  .cmp__frame[data-show="enterprise"] [data-plan]:not([data-plan="enterprise"]) { display: none; }
  .faq__item summary { padding: 16px 18px; }
  .faq__item .h3 { font-size: 18px; }
  .faq__item p { padding: 0 18px 18px; }
}

/* Our story: a wider reading column (its stage holds only words) */
.split--story { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
@media (max-width: 1100px) {
  .split--story { grid-template-columns: 1fr; }
  .band .lead, .pr__intro .lead, .faq__item p, .story__part .body, .story__intro, .step__p, .how__lede, .hero__lead, .cmp__head .body { max-width: none; }
}
@media (max-width: 860px) {
  .story__title { font-size: 40px; }
}

/* stacked: each step's picture sits on its own small sage stage, right after its words */
@media (max-width: 1100px) {
  .split[data-swap] .step__pic { padding: 16px; border-radius: 20px; background: var(--sage); }
}
@media (max-width: 860px) {
  .split[data-swap] .step__pic { padding: 10px; margin-left: -12px; margin-right: -12px; }
}


/* ---------- preview: the live site's labels and the flow between sections ---------- */
.kick { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .08em; color: var(--sage-deep); margin-bottom: 18px; }
.kick--on-sage { grid-column: 1 / -1; color: var(--on-sage); }
.story__kick { display: block; margin-bottom: 16px; font-size: 13px; letter-spacing: .08em; }
.story__links { gap: 12px 28px; }
.split--home { align-items: stretch; }
.split--home .read--top { grid-row: 1; border-radius: var(--r); padding: var(--pad); display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--bar) - var(--edge)); }
.split--home .stage { grid-row: 1; position: relative; top: 0; height: auto; min-height: calc(100svh - var(--bar) - var(--edge)); }
.demo__label { position: absolute; z-index: 2; left: clamp(28px, 3.4vw, 56px); right: clamp(28px, 3.4vw, 56px); top: 28px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--on-sage); }
.demo__label span:last-child { letter-spacing: 0; font-weight: 500; }
.hero__lead { max-width: 34ch; }

.split--maths { align-items: stretch; margin-top: var(--edge); }
.split--maths .read { grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
.maths__accent { display: block; color: var(--sage); }
.maths__intro { margin-top: 24px; max-width: 44ch; }
.stage--calc { position: relative; top: 0; grid-row: 1; height: auto; min-height: 0; display: grid; place-items: center; padding: clamp(24px, 3vw, 48px); }
.calc { width: 100%; max-width: 620px; padding: 28px; border-radius: var(--r-ui); background: var(--white); color: var(--text); box-shadow: 0 24px 48px -28px rgba(30, 40, 28, .5); display: grid; gap: 16px; }
.calc__title { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.calc__row { display: grid; gap: 6px; }
.calc__label { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.calc__label strong { font-weight: 700; }
.calc__track { display: block; }
.calc input[type="range"] { --fill: var(--sage); appearance: none; -webkit-appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--sage) calc(var(--p, 0) * 100%), var(--tone-2) calc(var(--p, 0) * 100%)); }
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--tone-2); }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--sage); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 3px solid #fff; border-radius: 50%; background: var(--sage); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.calc input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--sage); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.calc__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.calc__compare > div, .calc__gain { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-card); background: var(--tone); }
.calc__compare .is-simplr { background: var(--sage-100); }
.calc__compare span, .calc__gain span { font-size: 13px; color: var(--muted); }
.calc__compare strong { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.calc__compare small, .calc__gain small { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.calc__compare em, .calc__gain em { font-size: 13px; font-style: normal; color: var(--muted); }
.calc__gain { background: var(--charcoal); color: #fff; }
.calc__gain span, .calc__gain em { color: var(--bone); }
.calc__gain strong { font-size: 28px; line-height: 1.15; font-weight: 900; letter-spacing: -0.03em; }
.calc__foot { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }

.step .kick { margin-bottom: 12px; }
.step__list { max-width: none; }
.step .step__plan { margin-top: 18px; }
.explore { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: baseline; }
.explore__list { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.box__all { display: inline-block; margin-top: 18px; font-size: 16px; }
.box--plus .box__all { color: #fff; }
.box--plus .box__all:hover { color: var(--sage-100); }
.faq__head { align-self: start; }
.pr__small .textlink { font-weight: 500; }

@media (max-width: 1100px) {
  .split--home .read--top, .split--home .stage { min-height: 0; }
  .split--home .read--top { justify-content: flex-start; }
  .split--home .stage { padding-top: 56px; }
  .split--maths { row-gap: var(--edge); }
  .split--maths .read, .stage--calc { grid-row: auto; grid-column: 1; }
  .explore { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .calc { padding: 20px; }
  .calc__compare strong { font-size: 18px; }
  .demo__label { top: 18px; left: 20px; right: 20px; }
}

/* Pricing opens on one line of two parts, so the boxes reach the first screen */
.pr__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: end; }
.pr__intro .kick { grid-column: 1 / -1; margin-bottom: 14px; }
.pr__intro h1 { font-size: clamp(40px, 4.2vw, 60px); line-height: 1; }
.pr__intro h1 span { display: block; }
.pr__intro h1 span + span { color: var(--sage); }
.pr__intro .lead { font-size: 18px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.band.pr { padding-top: clamp(32px, 3.4vw, 52px); }
.pr__controls { margin-top: 28px; }
.trio__ui .kv__art { max-height: none; aspect-ratio: auto; display: grid; justify-items: center; }
.trio__ui .kv__art svg { margin-top: 0; width: 56%; height: auto; }
@media (max-width: 860px) { .pr__intro { grid-template-columns: 1fr; } .pr__intro .lead { margin-top: 16px; } }

.pr__intro h1 { font-size: clamp(36px, 3.7vw, 54px); }
.story__title { font-size: clamp(38px, 4.4vw, 64px); }
.story__title span { display: block; }
@media (max-width: 1100px) {
  .pr__intro { grid-template-columns: 1fr; }
  .pr__intro .lead { margin-top: 16px; max-width: 60ch; }
}
@media (max-width: 1100px) {
  .split--home .read--top, .split--home .stage, .split--maths .read, .stage--calc { grid-row: auto; }
  .split--home .stage { min-height: 620px; }
}
@media (max-width: 860px) {
  .split--home .stage { min-height: 0; padding: 52px 0 0; }
  .calc__compare small { display: block; }
}

/* labels are sentence case at a readable size; headlines hold to two lines on the page they lead */
.kick, .demo__label, .story__kick { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.demo__label span:last-child { font-weight: 500; }
.split--maths { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
.maths__copy .h2 { font-size: clamp(30px, 2.8vw, 40px); }
.split--features .step--intro .display { font-size: clamp(36px, 3.15vw, 46px); line-height: 1.04; }
.split--features .step--intro .display span { display: block; }
.story__title { font-size: clamp(32px, 4.5vw, 65px); }
.pr__intro { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.pr__intro h1 { font-size: clamp(32px, 4.5vw, 66px); }
.pr__intro .lead { font-size: 17px; }
@media (max-width: 1100px) {
  .split--maths { grid-template-columns: 1fr; }
  .pr__intro { grid-template-columns: 1fr; }
}