/* ═══════════════════════════════════════════════════════════════════════════════
   pages.css — the site's other pages (10 Nov 2026): the guide, the chatbot
   comparison, schools, real estate, customers, pricing and questions.

   They sit on site.css and borrow its frame: the glass header, the section
   marker, Mona Sans at 500 for Ringlio's own words, hairlines, pill buttons, the
   ink footer. Nothing here moves on scroll and nothing waits on a script: each page
   is a document a person can read in a minute and a machine can read in one request.

   Each page opens the way a Brief does: with the question, in the reader's own
   voice (Newsreader italic), and the headline that answers it.
   ═══════════════════════════════════════════════════════════════════════════════ */
.pg { background: var(--paper); }
.pg main { position: relative; isolation: isolate; background: var(--paper); color: var(--ink); --mute: #8F8A82; --acc: var(--blue); }
.pg main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .5; }

/* the header: the same bar, with page links; on a narrow screen the logo and the one button */
.pg .hd__burger { display: none; }
.pg .hd__nav a.is-on { opacity: 1; }
@media (max-width: 1099px) { .pg .hd__end { display: flex; } }

/* ─── the opening ─── */
.ph { padding: calc(var(--hd-h) + clamp(26px, 3.6vw, 52px)) 0 clamp(60px, 7.5vw, 112px); }
.ph .mk { margin-bottom: clamp(40px, 5.4vw, 84px); }
.ph .mk a { text-decoration: none; }
.ph .mk a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ph__q { margin: 0 0 clamp(16px, 1.6vw, 24px); font: italic 400 clamp(19px, 1.75vw, 25px)/1.3 var(--voice); letter-spacing: -.005em; color: var(--ink-3); }
.ph__h { max-width: 15em; margin: 0; font: 500 clamp(44px, 6.5vw, 108px)/.97 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.ph__h em { font-style: normal; color: var(--mute); }
.ph__lede { max-width: 35em; margin-top: clamp(26px, 3vw, 44px); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.48; letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.ph__lede a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ph__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 3vw, 40px); }
.ph__stamp { font: 500 13px/1.3 var(--sans); color: var(--ink-4); }

/* ─── a section: its heading holds the left column while the answer reads on the right ─── */
.ps { padding-bottom: clamp(60px, 7.5vw, 112px); scroll-margin-top: calc(var(--hd-h) + 12px); }
.ps__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px clamp(32px, 6vw, 110px); align-items: start; padding-top: clamp(26px, 2.8vw, 40px); border-top: 1px solid var(--rule); }
.ps--wide .ps__in { grid-template-columns: 1fr; }
.ps__in > * { min-width: 0; }   /* a wide table scrolls inside its column; it never widens the page */
.ps__h { position: sticky; top: calc(var(--hd-h) + 28px); margin: 0; font: 500 clamp(30px, 3.2vw, 50px)/1.03 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.ps--wide .ps__h { position: static; max-width: 16em; margin-bottom: clamp(8px, 1vw, 16px); }
.ps__h small { display: block; margin-bottom: 16px; font: 500 13px/1 var(--sans); letter-spacing: -.003em; color: var(--ink-4); font-variant-numeric: lining-nums proportional-nums; }
.ps__h em { font-style: normal; color: var(--mute); }

/* running text */
.prose { max-width: 39em; font-size: 17.5px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin: 2em 0 0; font: 600 20px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.prose h3 + * { margin-top: .5em; }
.prose strong, .prose b { font-weight: 600; color: var(--ink); }
.prose a, .note a, .rows a, .tb a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.prose a:hover, .note a:hover, .rows a:hover, .tb a:hover { color: var(--blue); }
.prose ul { margin-left: 0; padding: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li + li { margin-top: .5em; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 1.5px; border-radius: 2px; background: var(--ink-4); }
.prose .lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); }
.note { max-width: 44em; margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* a numbered list of things: routes, steps, what's included */
.rows { margin: 0; padding: 0; list-style: none; counter-reset: r; border-top: 1px solid var(--rule); }
.prose + .rows, .rows + .prose { margin-top: 30px; }
.rows > li { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 21px 0 23px; border-bottom: 1px solid var(--rule); counter-increment: r; }
.rows > li::before { content: counter(r, decimal-leading-zero); font: 500 12.5px/27px var(--sans); color: var(--ink-4); font-variant-numeric: lining-nums proportional-nums; }
.rows b { display: block; font: 600 19px/1.3 var(--sans); letter-spacing: -.02em; }
.rows p { max-width: 36em; margin-top: 5px; font-size: 16px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.rows p + p { margin-top: 8px; }
.rows--plain > li { grid-template-columns: minmax(0, 1fr); }
.rows--plain > li::before { display: none; }
.rows .is-us b::after, .tb .is-us th::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 9px; border-radius: 50%; background: var(--blue); vertical-align: middle; }

/* a table that compares: ruled, never tinted; Ringlio's row carries the blue stop */
.tb-x { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: thin; }
.tb { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.tb caption { caption-side: bottom; padding-top: 16px; text-align: left; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.tb th, .tb td { padding: 17px 24px 19px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tb th:last-child, .tb td:last-child { padding-right: 0; }
.tb thead th { padding: 0 24px 13px 0; border-bottom-color: color-mix(in srgb, var(--ink) 55%, transparent); font: 500 13px/1.3 var(--sans); color: var(--ink-4); white-space: nowrap; }
.tb tbody th { width: 17%; font: 600 16.5px/1.3 var(--sans); letter-spacing: -.016em; color: var(--ink); }
.tb td { color: var(--ink-3); }
.tb .is-us td { color: var(--ink); }
.tb--2 tbody th { width: 22%; font-weight: 500; font-size: 15px; color: var(--ink-3); }
.tb--2 td { width: 39%; font-size: 16.5px; }
.tb--2 thead th { font: 600 19px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); white-space: normal; }
.tb--2 td:last-child { color: var(--ink); }
.tb--2 thead th:last-child::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 9px; border-radius: 50%; background: var(--blue); vertical-align: middle; }
.tb--num td { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* ─── customers ─── */
.cu { scroll-margin-top: calc(var(--hd-h) + 12px); }
.cu__tile { display: grid; place-items: center; height: clamp(180px, 17vw, 250px); padding: 0 12%; border-radius: 20px; background: #FBFAF7;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 15, 18, .05), 0 24px 44px -34px rgba(40, 28, 14, .4); }
.cu__tile img { width: auto; max-width: 100%; height: 44px; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .82; }
.cu__tile img[src$="scotch.png"] { height: 78px; } .cu__tile img[src$="caporn-young.png"] { height: 28px; } .cu__tile img[src$="soilux.webp"] { height: 46px; } .cu__tile img[src$="penrhos.svg"] { height: 112px; } .cu__tile img[src$="locus.svg"] { height: 22px; }
.cu__tile .lk { height: 34px; }
.cu__n { margin: 0; font: 500 clamp(30px, 3.2vw, 50px)/1.03 var(--sans); letter-spacing: -.04em; }
.cu__m { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 22px; padding: 0; list-style: none; font: 500 13px/1.3 var(--sans); color: var(--ink-4); }
.cu__m li + li { position: relative; }
.cu__m li + li::before { content: ""; position: absolute; left: -12px; top: .45em; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.cu .tl { margin-top: 24px; }

/* ─── pricing ─── */
.pp__fig { display: flex; align-items: flex-end; gap: clamp(8px, 1vw, 16px); margin: 0; font: 500 clamp(104px, 13.5vw, 216px)/.8 var(--sans); letter-spacing: -.065em; font-feature-settings: 'lnum' 1; }
.pp__cur { align-self: flex-start; margin-top: .1em; font-size: .3em; letter-spacing: -.03em; }
.pp__per { margin-bottom: .04em; font-size: .15em; font-weight: 500; letter-spacing: -.02em; color: var(--ink-3); white-space: nowrap; }
.dl { margin: clamp(28px, 3vw, 44px) 0 0; border-top: 1px solid var(--rule); }
.dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.dl dt { color: var(--ink-3); } .dl dd { margin: 0; font-weight: 600; text-align: right; }

/* ─── where to go next ─── */
.more { border-top: 1px solid var(--rule); }
.more a { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) auto; gap: 8px clamp(32px, 6vw, 110px); align-items: baseline; padding: 24px 0 26px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.more small { font: 500 13px/1.3 var(--sans); color: var(--ink-4); }
.more b { font: 500 clamp(22px, 2.2vw, 32px)/1.1 var(--sans); letter-spacing: -.035em; }
.more svg { align-self: center; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.more a:hover svg { transform: translateX(6px); }
.more a:hover b { color: var(--blue); }

/* ─── the close: the same offer as the home page ─── */
.pcta { padding: clamp(84px, 10vw, 150px) 0 clamp(90px, 11vw, 170px); }
.pcta .h2 { max-width: 11em; }
.pcta__in { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 36px clamp(32px, 6vw, 110px); align-items: end; }
.pcta__dek { max-width: 30em; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.55; opacity: .78; text-wrap: pretty; }
.pcta__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }

/* ─── questions and answers: a ruled list that opens in place. Native <details>, so every answer is in the
   page for anything that reads it without running a script ─── */
.fq__r { interpolate-size: allow-keywords; }
.fq__i { border-bottom: 1px solid var(--rule); }
.fq__i summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 23px 0; cursor: pointer; list-style: none;
  font: 500 clamp(19px, 1.55vw, 23px)/1.2 var(--sans); letter-spacing: -.022em; text-wrap: balance; }
.fq__i summary::-webkit-details-marker { display: none; }
.fq__i summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); transition: background-color .3s var(--ease-out), color .3s, transform .5s var(--ease-out); }
.fq__i summary i::before, .fq__i summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; border-radius: 2px; background: currentColor; }
.fq__i summary i::after { transform: rotate(90deg); }
.fq__i summary:hover i { background: color-mix(in srgb, currentColor 7%, transparent); }
.fq__i[open] summary i { background: var(--ink); color: var(--on-ink); box-shadow: none; transform: rotate(45deg); }
.fq__i::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
.fq__i[open]::details-content { block-size: auto; }
.fq__a { max-width: 39em; padding: 0 58px 28px 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.fq__a p + p { margin-top: 12px; }
.fq__a a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 759px) { .fq__a { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .fq__i::details-content, .fq__i summary i { transition: none; } }
.fq__i:first-child summary { padding-top: 4px; }

@media (max-width: 899px) {
  .ps__in, .pcta__in { grid-template-columns: 1fr; }
  .ps__h { position: static; }
  .more a { grid-template-columns: minmax(0, 1fr) auto; }
  .more small { grid-column: 1 / -1; }
  .prose { font-size: 16.5px; }
}
@media (max-width: 759px) {
  .ph__h { letter-spacing: -.045em; }
  .rows:not(.rows--plain) > li { grid-template-columns: 36px minmax(0, 1fr); }
  .pp__per { font-size: .17em; }
}
@media (prefers-reduced-motion: reduce) { .more svg { transition: none; } }

/* ─── 10 Nov, second pass: bylines, pictures of the product, published figures ─── */
.by { margin-top: 26px; font: 500 13.5px/1.3 var(--sans); color: var(--ink-3); }
.by a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose code { padding: 1px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule); font: 500 .86em/1 var(--mono); }

/* a picture of the product: it sits on the page as it does on the home page, with a plain caption */
.fig { margin: 30px 0; }
.prose + .fig, .fig + .prose, .fig + .rows { margin-top: 30px; }
.fig img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(15, 15, 18, .06), 0 30px 60px -36px rgba(40, 28, 14, .5); }
.fig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-4); }
.fig--card { max-width: 440px; }
.ps--wide .fig { margin-top: 8px; }
/* two answers to one question, side by side */
.duo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 30px 0; }
.duo .fig { margin: 0; }

/* a published figure: the number, what it measured, who measured it */
.facts { margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.facts b { font: 500 clamp(40px, 4.4vw, 64px)/.95 var(--sans); letter-spacing: -.05em; font-feature-settings: 'lnum' 1; }
.facts p { max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.facts a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.facts a:hover { color: var(--blue); }
.facts li b { white-space: nowrap; }

@media (max-width: 759px) {
  .duo { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; }
  .fig img { border-radius: 14px; }
}