/* Version B base for pages converted from the old design (FAQ, legal, articles,
   hubs). It is linked only by material-shell.html, before site-shell.css.
   Rules are copied from the reviewed page files (material-about.css,
   material-method.css, material-trust.css, material-booking.css, paper-depth.css,
   reading-type.css) so those six pages stay untouched. Every selector is scoped
   with :where(.shell-page), so specificity matches the page files it copies and
   the shared shell files that load afterwards keep their precedence.
   Tokens use the shared --site-* and --type-* names only. */

:where(html:has(> body.shell-page)) {
  --design-scale:.85;
  --chapter-height:62px;
  --site-edge:7px;
  --site-white:#fff;
  --site-neutral:#e9e9e7;
  --site-muted:#727272;
  --site-rule:#c9c9c6;
  scroll-behavior:smooth;
  scroll-padding-bottom:calc(var(--chapter-height,62px) + 20px);
}
body.shell-page { margin:0; color:var(--site-ink); background:var(--site-paper); font-weight:400; word-spacing:.035em; -webkit-font-smoothing:antialiased; }

/* Reset and heading scale (material-about.css:15-40). */
:where(.shell-page) :is(h1,h2,h3,h4,p,figure,blockquote) { margin:0; }
:where(.shell-page) :is(h1,h2,h3,h4) { font-family:var(--site-font); font-weight:700; line-height:1.03; letter-spacing:-.045em; word-spacing:.07em; color:inherit; text-transform:none; }
:where(.shell-page) h1 { font-size:clamp(62px,8vw,144px); letter-spacing:-.055em; }
:where(.shell-page) h2 { font-size:clamp(44px,5.6vw,94px); }
:where(.shell-page) h3 { font-size:clamp(29px,2.7vw,44px); }
:where(.shell-page) h4 { font-size:clamp(22px,1.6vw,26px); line-height:1.15; letter-spacing:-.02em; }
:where(.shell-page) img { display:block; max-width:100%; height:auto; }
:where(.shell-page) a { color:inherit; text-decoration:none; }
:where(.shell-page) :is(button,select,input,textarea) { font:inherit; }
:where(.shell-page) button { cursor:pointer; }
:where(.shell-page) :is(button,a,select,summary) { -webkit-tap-highlight-color:transparent; }
:where(.shell-page) :is(button,a,select,summary):focus-visible { outline:3px solid var(--site-accent); outline-offset:5px; }
:where(.shell-page) :is(.dark-surface,[data-surface="dark"]) :focus-visible { outline-color:var(--site-coral); }
:where(.shell-page) section:focus { outline:none; }
:where(.shell-page) ::selection { color:#fff; background:var(--site-accent); }
:where(.shell-page) [hidden] { display:none!important; }
:where(.shell-page) :is(.sr-only,.skip-link:not(:focus)) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:where(.shell-page) .skip-link:focus { position:fixed; left:20px; top:12px; z-index:160; padding:12px 20px; background:#fff; color:var(--site-ink); }
:where(.shell-page) .fallback-nav { display:none; }

/* Layout, surfaces and labels. */
:where(.shell-page) .wrap { width:calc(100% - 8.5vw); max-width:2200px; margin-inline:auto; }
:where(.shell-page) .light-surface { background:var(--site-paper); color:var(--site-ink); }
:where(.shell-page) .neutral-surface { background:var(--site-neutral); color:var(--site-ink); }
:where(.shell-page) .dark-surface { background:var(--site-ink); color:#fff; }
:where(.shell-page) .eyebrow { font-size:16px; line-height:1.4; font-weight:600; color:var(--site-accent); margin-bottom:27px; }
:where(.shell-page) .dark-surface .eyebrow { color:var(--site-coral); }
:where(.shell-page) .muted { color:var(--site-muted); }
:where(.shell-page) .dark-surface .muted { color:#a9a9a9; }
:where(.shell-page) .accent { color:var(--site-accent); }
:where(.shell-page) .dark-surface .accent { color:var(--site-coral); }
:where(.shell-page) .shell-section { padding-block:clamp(80px,8.5vw,170px); }
:where(.shell-page) .section-heading { margin-bottom:clamp(48px,5vw,90px); }
:where(.shell-page) .section-heading h2 { max-width:20ch; }
:where(.shell-page) .section-intro { max-width:44ch; margin-top:clamp(24px,2.4vw,40px); font-size:clamp(20px,1.8vw,28px); line-height:1.4; }
:where(.shell-page) .dark-surface .section-intro { color:#d3d3d3; }

/* Buttons and links. site-shell.css owns size, edge and motion. */
:where(.shell-page) .button { color:#fff; background:var(--site-ink); border:1px solid var(--site-ink); text-decoration:none; }
:where(.shell-page) .dark-surface .button { color:var(--site-ink); background:#fff; border-color:#fff; }
:where(.shell-page) .text-link { display:inline-flex; align-items:baseline; gap:14px; padding-block:10px 6px; border-bottom:1px solid currentColor; font-size:var(--site-action-size); font-weight:600; line-height:1.3; }
:where(.shell-page) .text-link > span[aria-hidden] { font-weight:400; }

/* Chapter bar and mobile chapters, before chapter-navigation.js enhances them
   (material-about.css:60-68,236-239). */
:where(.shell-page) .mobile-chapters { display:none; }
:where(.shell-page) .chapter-bar { position:fixed; z-index:45; bottom:0; left:0; right:0; height:var(--chapter-height); color:#fff; background:rgba(25,25,25,.98); border-top:1px solid #555; }
:where(.shell-page) .chapter-links { position:relative; height:100%; display:grid; grid-template-columns:repeat(var(--chapter-count,4),minmax(0,1fr)); }
:where(.shell-page) .chapter-links a { display:flex; align-items:center; justify-content:center; text-align:center; padding:14px 12px; font-size:16px; line-height:1.2; font-weight:600; border-left:1px solid #555; transition:color .2s,background .2s; }
:where(.shell-page) .chapter-links a:first-child { border-left:0; }
:where(.shell-page) .chapter-links a:hover { background:#303030; }
:where(.shell-page) .chapter-links a[aria-current] { color:var(--site-coral); }
:where(.shell-page) .chapter-indicator { position:absolute; left:0; bottom:0; width:calc(100% / var(--chapter-count,4)); height:4px; background:var(--site-coral); pointer-events:none; transition:transform .3s ease,width .3s ease; }

/* Openings. Dark split hero (About) and compact light opening (Trust, Pricing). */
:where(.shell-page) .page-opening { padding:clamp(40px,4.8vw,95px) 0 clamp(65px,5.4vw,105px); }
:where(.shell-page) .page-opening h1 { max-width:13ch; }
:where(.shell-page) .page-opening h1 span { color:var(--site-accent); }
:where(.shell-page) .page-opening.dark-surface h1 span { color:var(--site-coral); }
:where(.shell-page) .split-opening { min-height:calc(100svh - var(--header) - var(--chapter-height)); display:grid; align-items:center; }
:where(.shell-page) .opening-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); align-items:center; gap:5vw; }
:where(.shell-page) .opening-copy { min-width:0; padding-bottom:10px; }
:where(.shell-page) .opening-intro { margin-top:32px; max-width:39ch; font-size:clamp(20px,1.7vw,28px); line-height:1.4; }
:where(.shell-page) .opening-copy .button { margin-top:35px; }
:where(.shell-page) .opening-meta { margin-top:20px; font-size:var(--type-caption); line-height:1.45; color:#555; }
:where(.shell-page) .dark-surface .opening-meta { color:#bdbdbd; }
:where(.shell-page) .opening-art { background:#eeece4; box-shadow:var(--site-edge) var(--site-edge) 0 #57534e; transform:rotate(2deg); }
:where(.shell-page) .opening-art img { width:100%; aspect-ratio:4/5; object-fit:cover; }
:where(.shell-page) .compact-opening { padding-block:clamp(36px,4.2vw,66px); }
:where(.shell-page) .compact-opening > .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:clamp(36px,5vw,88px); max-width:1500px; }
:where(.shell-page) .compact-opening > .wrap > :only-child { grid-column:1 / -1; }
:where(.shell-page) .compact-opening > .wrap > * { min-width:0; }
:where(.shell-page) .compact-opening h1 { max-width:15ch; font-size:clamp(48px,5.25vw,80px); line-height:1.03; letter-spacing:-.055em; text-wrap:balance; }
:where(.shell-page) .compact-opening .eyebrow { margin-bottom:20px; }
:where(.shell-page) .compact-opening .opening-intro { margin-top:28px; max-width:36ch; font-size:clamp(21px,1.75vw,26px); line-height:1.45; }

/* Reading column for articles and legal pages. No drop cap, no serif. */
:where(.shell-page) .prose { container:prose / inline-size; max-width:62ch; min-width:0; overflow-wrap:break-word; }
:where(.shell-page) .prose > * + * { margin-top:1em; }
:where(.shell-page) .prose h2 { margin-top:2.4em; padding-top:1em; border-top:1px solid var(--site-rule); font-size:clamp(30px,2.6vw,42px); line-height:1.08; letter-spacing:-.04em; }
:where(.shell-page) .prose > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
:where(.shell-page) .prose h3 { margin-top:1.8em; font-size:clamp(23px,1.75vw,28px); line-height:1.15; letter-spacing:-.025em; }
:where(.shell-page) .prose h4 { margin-top:1.5em; font-size:var(--type-label); line-height:1.3; letter-spacing:-.01em; }
:where(.shell-page) .prose :is(h2,h3,h4) + * { margin-top:.6em; }
:where(.shell-page) .prose :is(ul,ol) { padding-left:1.25em; }
:where(.shell-page) .prose ul { list-style:square; }
:where(.shell-page) .prose ol { list-style:decimal; }
:where(.shell-page) .prose li::marker { color:var(--site-accent); }
:where(.shell-page) .dark-surface .prose li::marker { color:var(--site-coral); }
:where(.shell-page) .prose li { padding-left:.2em; }
:where(.shell-page) .prose li + li { margin-top:.55em; }
:where(.shell-page) .prose strong { font-weight:600; }
:where(.shell-page) .prose a:not(.button,.text-link) { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:var(--site-coral); transition:color .18s,text-decoration-color .18s; }
:where(.shell-page) .prose a:not(.button,.text-link):hover { color:var(--site-accent); text-decoration-color:currentColor; }
:where(.shell-page) .dark-surface .prose a:not(.button,.text-link):hover { color:var(--site-coral); }
:where(.shell-page) .prose blockquote { border-left:5px solid var(--site-coral); padding:.3em 0 .3em 1.1em; font-size:max(var(--type-body),clamp(1.1875rem,1.55vw,1.5625rem)); line-height:1.45; }
:where(.shell-page) .prose code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; padding:.08em .3em; background:#e2e2df; }
:where(.shell-page) .dark-surface .prose code { background:#303030; }
:where(.shell-page) .prose pre { overflow-x:auto; padding:1em 1.1em; background:var(--site-ink); color:#f2f2f2; border:1px solid var(--site-ink); box-shadow:5px 5px 0 #777; font-size:var(--type-caption); line-height:1.5; }
:where(.shell-page) .prose pre code { padding:0; background:none; font-size:inherit; }
:where(.shell-page) .prose hr { margin-block:2em; border:0; border-top:1px solid var(--site-rule); }
:where(.shell-page) .prose figcaption { margin-top:.75em; font-size:var(--type-caption); line-height:1.45; color:#555; }

/* Data tables follow Pricing's fee table (role-pricing.css:80-90,
   reading-type.css:215-248): no outer border, row rules, caption-size header,
   and each row becomes a labelled stack when the column is narrow. Give every
   cell a data-label. Add .wide-table to stack in any reading column (5+ columns). */
:where(.shell-page) .data-table { width:100%; margin-block:1.25em 1.5em; border-collapse:collapse; font-size:var(--type-caption); line-height:1.45; }
:where(.shell-page) .data-table thead th { padding:0 1rem .75rem 0; text-align:left; vertical-align:bottom; font-size:var(--type-caption); font-weight:400; line-height:1.35; color:#60605b; }
:where(.shell-page) .data-table tbody tr { border-top:1px solid var(--site-rule); }
:where(.shell-page) .data-table tbody tr:last-child { border-bottom:1px solid var(--site-rule); }
:where(.shell-page) .data-table :is(tbody th,td) { padding:1rem 1rem 1rem 0; text-align:left; vertical-align:top; }
:where(.shell-page) .data-table :is(tbody th,td):first-child { font-weight:600; color:inherit; }
:where(.shell-page) .data-table :is(th,td):last-child { padding-right:0; }
:where(.shell-page) .dark-surface .data-table thead th { color:#bdbdbd; }
:where(.shell-page) .dark-surface .data-table tbody tr { border-color:#555; }
@container prose (max-width:30rem) {
  :where(.shell-page) .data-table { display:block; }
  :where(.shell-page) .data-table tbody { display:block; }
  :where(.shell-page) .data-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  :where(.shell-page) .data-table tr { display:grid; grid-template-columns:minmax(0,1fr); gap:.65em; padding-block:1em; }
  :where(.shell-page) .data-table :is(tbody th,td) { display:block; padding:0; }
  :where(.shell-page) .data-table :is(tbody th,td)[data-label]:not(:first-child)::before { content:attr(data-label); display:block; margin-bottom:.15em; color:#60605b; font-size:var(--type-caption); font-weight:400; }
}
@container prose (max-width:60rem) {
  :where(.shell-page) .data-table.wide-table { display:block; }
  :where(.shell-page) .data-table.wide-table tbody { display:block; }
  :where(.shell-page) .data-table.wide-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  :where(.shell-page) .data-table.wide-table tr { display:grid; grid-template-columns:minmax(0,1fr); gap:.65em; padding-block:1.1em; }
  :where(.shell-page) .data-table.wide-table :is(tbody th,td) { display:block; padding:0; }
  :where(.shell-page) .data-table.wide-table :is(tbody th,td):first-child { font-size:var(--type-label); font-weight:700; letter-spacing:-.01em; }
  :where(.shell-page) .data-table.wide-table :is(tbody th,td)[data-label]:not(:first-child)::before { content:attr(data-label); display:block; margin-bottom:.15em; color:#60605b; font-size:var(--type-caption); font-weight:400; }
}
@container prose (min-width:36rem) and (max-width:60rem) {
  :where(.shell-page) .data-table.wide-table tr { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; }
  :where(.shell-page) .data-table.wide-table :is(tbody th,td):first-child { grid-column:1 / -1; }
}

/* Document pages (legal, long reads): one light chapter with a compact heading,
   then a reading column with a sticky contents list beside it. */
:where(.shell-page) .document-section { padding-block:clamp(36px,4.2vw,66px) clamp(64px,6vw,110px); }
:where(.shell-page) .document-heading { max-width:1500px; margin-bottom:clamp(36px,4vw,64px); }
:where(.shell-page) .document-heading h1 { max-width:15ch; font-size:clamp(48px,5.25vw,80px); line-height:1.03; letter-spacing:-.055em; text-wrap:balance; }
:where(.shell-page) .document-heading .eyebrow { margin-bottom:20px; }
:where(.shell-page) .document-layout { display:grid; grid-template-columns:minmax(15rem,.4fr) minmax(0,1fr); gap:clamp(40px,6vw,110px); align-items:start; max-width:1500px; }
:where(.shell-page) .document-layout > * { min-width:0; }
:where(.shell-page) .document-aside { position:sticky; top:calc(var(--header) + 32px); max-height:calc(100svh - var(--header) - 56px); overflow:auto; padding:0 7px 7px 0; overscroll-behavior:contain; }
:where(.shell-page) .document-aside .eyebrow { margin-bottom:14px; }

/* Table of contents and link lists (material-trust.css:31-55). */
:where(.shell-page) .contents-card { display:grid; margin:0; padding:0; list-style:none; border:1px solid var(--site-ink); background:var(--site-paper); color:var(--site-ink); box-shadow:5px 5px 0 var(--site-ink); }
:where(.shell-page) .contents-card a { display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:22px; min-width:0; min-height:44px; padding:16px 22px; text-decoration:none; transition:background-color 180ms ease; }
:where(.shell-page) .contents-card a:has(> .contents-art) { grid-template-columns:92px minmax(0,1fr) 24px; padding:14px 22px 14px 14px; }
:where(.shell-page) .contents-card :is(a,li) + :is(a,li) { border-top:1px solid #b2b2b2; }
:where(.shell-page) .contents-card li { margin:0; padding:0; }
:where(.shell-page) .contents-art { display:block; width:92px; height:92px; background:var(--site-ink); box-shadow:2px 2px 0 #888; }
:where(.shell-page) .contents-art img { width:100%; height:100%; object-fit:contain; }
:where(.shell-page) .contents-copy { display:grid; gap:6px; min-width:0; }
:where(.shell-page) .contents-copy strong { font-size:clamp(23px,1.85vw,28px); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
:where(.shell-page) .contents-copy > span { font-size:var(--type-caption); line-height:1.4; color:#555; }
:where(.shell-page) .contents-arrow { font-size:26px; line-height:1; color:var(--site-accent); transition:translate 220ms ease; }
:where(.shell-page) .contents-card a:focus-visible { outline:2px solid var(--site-accent); outline-offset:-2px; background:#fff; }
:where(.shell-page) .contents-card a:focus-visible .contents-arrow { translate:0 4px; }
:where(.shell-page) .contents-card.compact-contents { box-shadow:4px 4px 0 var(--site-ink); }
:where(.shell-page) .contents-card.compact-contents a { gap:14px; padding:10px 14px; }
:where(.shell-page) .compact-contents .contents-copy strong { font-size:var(--type-caption); font-weight:600; line-height:1.3; letter-spacing:0; }
:where(.shell-page) .compact-contents .contents-arrow { font-size:19px; }

/* Paper cards: square, 1px ink border, hard offset edge (material-about.css:136-153). */
:where(.shell-page) .paper-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; padding-right:var(--site-edge); padding-bottom:40px; align-items:stretch; }
:where(.shell-page) .paper-grid > :nth-child(even) { position:relative; top:40px; }
:where(.shell-page) .paper-card { min-width:0; padding:clamp(28px,4vw,70px); background:#fff; color:var(--site-ink); border:1px solid var(--site-ink); box-shadow:var(--site-edge) var(--site-edge) 0 var(--site-ink); }
:where(.shell-page) .paper-card::before { content:''; display:block; width:32px; height:4px; margin-bottom:30px; background:var(--site-coral); }
:where(.shell-page) .paper-card h3 { font-size:clamp(34px,3.6vw,60px); }
:where(.shell-page) .paper-card p { max-width:34ch; margin-top:28px; }
:where(.shell-page) .paper-card.dark-panel { color:#fff; background:var(--site-ink); box-shadow:var(--site-edge) var(--site-edge) 0 #8c8c89; }
:where(.shell-page) .paper-card.accent-panel { box-shadow:var(--site-edge) var(--site-edge) 0 var(--site-coral); }
:where(.shell-page) .paper-card .step-label { display:block; margin-bottom:16px; color:var(--site-accent); font-size:16px; font-weight:600; }

/* Disclosure cards. Add data-hover-disclosure for hover preview and pinning
   (card-disclosures.js); leave it off for a click-only native <details> list. */
:where(.shell-page) .disclosure-list { display:grid; gap:clamp(16px,1.5vw,24px); max-width:1100px; padding-right:var(--site-edge); }
:where(.shell-page) .disclosure-card { position:relative; min-width:0; background:#fff; color:var(--site-ink); border:1px solid var(--site-ink); box-shadow:5px 5px 0 #777; }
:where(.shell-page) .dark-surface .disclosure-card { background:#272727; color:#fff; border-color:#777; box-shadow:5px 5px 0 #080808; }
:where(.shell-page) .disclosure-list + * { margin-top:clamp(48px,5vw,84px); }
:where(.shell-page) .disclosure-card[open] { box-shadow:5px 5px 0 var(--site-coral); }
:where(.shell-page) .disclosure-card > summary { display:grid; grid-template-columns:42px minmax(0,1fr) 24px; align-items:start; gap:18px; min-height:44px; padding:24px 28px; list-style:none; cursor:pointer; }
:where(.shell-page) .disclosure-card > summary::-webkit-details-marker { display:none; }
:where(.shell-page) .disclosure-card > summary::marker { content:''; }
:where(.shell-page) .disclosure-card > summary:focus-visible { outline-offset:4px; }
:where(.shell-page) .disclosure-index { padding-top:.3em; color:var(--site-accent); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
:where(.shell-page) .dark-surface .disclosure-index { color:var(--site-coral); }
:where(.shell-page) .disclosure-card h3 { min-width:0; font-size:clamp(23px,1.8vw,30px); line-height:1.15; letter-spacing:-.03em; }
:where(.shell-page) .disclosure-toggle { padding-top:.05em; color:var(--site-accent); text-align:center; font:400 28px/1 var(--site-font); }
:where(.shell-page) .dark-surface .disclosure-toggle { color:var(--site-coral); }
:where(.shell-page) .disclosure-toggle::after { content:'+'; }
:where(.shell-page) .disclosure-card[open] .disclosure-toggle::after { content:'−'; }
:where(.shell-page) .disclosure-card .deliverable-content { padding:0 28px 28px calc(28px + 42px + 18px); }
:where(.shell-page) .disclosure-card .deliverable-content p { max-width:62ch; }
:where(.shell-page) .disclosure-card .deliverable-content p + p { margin-top:.75em; }
:where(.shell-page) .dark-surface .disclosure-card .deliverable-content { color:#e2e2e2; }
@media(hover:hover) and (pointer:fine) {
  :where(.shell-page) .disclosure-card > summary:hover .disclosure-toggle { translate:0 -1px; }
  :where(.shell-page) .contents-card a:hover { background:#fff; }
  :where(.shell-page) .contents-card a:hover .contents-arrow { translate:0 4px; }
}

/* Comparison pair: the standard way and the SuperHired way (material-method.css:2). */
:where(.shell-page) .comparison-label { margin-bottom:24px; font-size:18px; font-weight:600; }
:where(.shell-page) .comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; align-items:stretch; }
:where(.shell-page) .comparison-option { min-width:0; padding:28px 30px; border:1px solid #999; background:#e6e6e6; color:#444; }
:where(.shell-page) .comparison-option + .comparison-option { border-left:0; }
:where(.shell-page) .comparison-option h3 { margin-bottom:20px; font-size:19px; letter-spacing:-.02em; }
:where(.shell-page) .comparison-option p { font-size:clamp(18px,1.4vw,23px); line-height:1.4; }
:where(.shell-page) .comparison-option.our-way { position:relative; background:var(--site-ink); color:#fff; border:1px solid var(--site-ink); box-shadow:var(--site-edge) var(--site-edge) 0 var(--site-coral); transform:translateY(-7px); }
:where(.shell-page) .our-way h3 { color:var(--site-coral); }
:where(.shell-page) .dark-surface .comparison-option { background:#272727; color:#d5d5d5; border-color:#666; }
:where(.shell-page) .dark-surface .comparison-option.our-way { background:var(--site-paper); color:var(--site-ink); border-color:var(--site-paper); }
:where(.shell-page) .dark-surface .our-way h3 { color:var(--site-accent); }

/* Big figure: one scoped number with its unit and caption (home-sections.css:43-46). */
:where(.shell-page) .big-figure { text-align:center; }
:where(.shell-page) .figure-number { display:block; margin:0; font:700 clamp(96px,11vw,180px)/.95 var(--site-font); letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
:where(.shell-page) .figure-unit { display:inline-block; margin-left:.08em; font-size:.46em; letter-spacing:-.04em; }
:where(.shell-page) .figure-caption { max-width:32ch; margin:22px auto 0; font-size:clamp(20px,2vw,28px); line-height:1.35; }

/* Term or promise pair: price and protection (paper-depth.css:84-91). */
:where(.shell-page) .term-list { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding-right:var(--site-edge); }
:where(.shell-page) .term-list > article { min-width:0; padding:clamp(28px,3.4vw,68px); border:2px solid var(--site-ink); background:#fff; color:var(--site-ink); box-shadow:var(--site-edge) var(--site-edge) 0 var(--site-ink); }
:where(.shell-page) .term-list > article:first-child { background:var(--site-ink); color:#fff; box-shadow:var(--site-edge) var(--site-edge) 0 var(--site-coral); }
:where(.shell-page) .term-list h3 { font-size:clamp(54px,5.1vw,109px); letter-spacing:-.055em; }
:where(.shell-page) .term-list p { margin-top:20px; max-width:36ch; }
:where(.shell-page) .term-list .text-link { margin-top:24px; }

/* Statement or quote with a coral left rule (material-method.css .stage-decision). */
:where(.shell-page) .pull-quote { max-width:1100px; }
:where(.shell-page) .pull-quote blockquote { padding:6px 0 6px clamp(20px,2vw,32px); border-left:5px solid var(--site-coral); font-size:clamp(28px,2.8vw,46px); font-weight:500; line-height:1.18; letter-spacing:-.025em; }
:where(.shell-page) .pull-quote blockquote p { max-width:30ch; }
:where(.shell-page) .pull-quote figcaption { margin-top:22px; padding-left:calc(clamp(20px,2vw,32px) + 5px); font-size:var(--type-caption); font-weight:600; line-height:1.45; color:#555; }
:where(.shell-page) .dark-surface .pull-quote figcaption { color:#bdbdbd; }

/* Closing invitation (Method .method-close, render-method-page.mjs:102). */
:where(.shell-page) .closing-invitation { padding:clamp(80px,7.6vw,110px) 0 clamp(65px,7vw,100px); }
:where(.shell-page) .closing-invitation h2 { max-width:22ch; font-size:clamp(56px,7vw,116px); letter-spacing:-.045em; }
:where(.shell-page) .closing-invitation h2 + p,
:where(.shell-page) .closing-invitation .closing-copy { max-width:40ch; margin-top:32px; font-size:clamp(21px,1.75vw,25px); line-height:1.4; }
:where(.shell-page) .closing-invitation .closing-note { max-width:52ch; margin-top:20px; font-size:var(--type-caption); line-height:1.45; color:#555; }
:where(.shell-page) .closing-invitation.dark-surface .closing-note { color:#bdbdbd; }
:where(.shell-page) .closing-note a { text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--site-coral); }
:where(.shell-page) .closing-note a:hover { color:var(--site-accent); }
:where(.shell-page) .dark-surface .closing-note a:hover { color:#fff; }
:where(.shell-page) .close-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px 45px; margin-top:40px; }

/* Forms (material-booking.css:43-52). Selects are enhanced by form-select.js. */
:where(.shell-page) .form-field { min-width:0; margin:0 0 18px; }
:where(.shell-page) .form-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
:where(.shell-page) .form-field label { display:block; margin-bottom:7px; font-size:16px; font-weight:600; line-height:1.35; }
:where(.shell-page) .form-field label > span:not(.optional) { color:var(--site-accent); }
:where(.shell-page) .optional { margin-left:5px; color:#666; font-size:14px; font-weight:400; }
:where(.shell-page) .form-field :is(input,select,textarea) { display:block; width:100%; min-width:0; min-height:49px; padding:12px 13px; background:#fff; color:var(--site-ink); border:1px solid #a5a5a5; border-radius:0; box-shadow:none; font-size:17px; line-height:1.35; }
:where(.shell-page) .form-field textarea { min-height:106px; max-height:400px; resize:vertical; }
:where(.shell-page) .form-field textarea::placeholder { color:#777; }
:where(.shell-page) .form-field :is(input,select,textarea):focus-visible { outline:2px solid var(--site-ink); outline-offset:0; border-color:var(--site-ink); box-shadow:0 4px 0 var(--site-coral); }
:where(.shell-page) .form-field [aria-invalid="true"] { border:2px solid var(--site-accent); }
:where(.shell-page) .field-error { margin-top:8px; color:#9c3027; font-size:15px; line-height:1.3; }
:where(.shell-page) .form-status:not(:empty) { margin-top:18px; padding:12px 16px; border-left:4px solid var(--site-accent); background:#fff; }

/* Dialogs (material-about.css:195-200). */
:where(.shell-page) dialog { width:min(550px,calc(100% - 40px)); max-height:calc(100svh - 40px); overflow:auto; padding:48px 40px 40px; color:var(--site-ink); background:var(--site-paper); border:2px solid var(--site-ink); box-shadow:7px 7px 0 var(--site-coral); }
:where(.shell-page) dialog::backdrop { background:rgba(0,0,0,.65); }
:where(.shell-page) .dialog-close { position:absolute; right:10px; top:8px; width:44px; height:44px; border:0; background:none; color:var(--site-ink); font-size:30px; }

@media(min-width:1800px) {
  :where(.shell-page) .opening-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr); gap:7vw; }
  :where(.shell-page) .opening-art { max-width:570px; }
}
@media(max-width:1100px) {
  :where(.shell-page) h1 { font-size:clamp(58px,8.1vw,89px); }
  :where(.shell-page) .fallback-nav { display:flex; flex-wrap:wrap; gap:8px 25px; padding:16px var(--site-gutter); background:#fff; }
  :where(.shell-page) .fallback-nav a { min-height:44px; display:flex; align-items:center; text-decoration:underline; }
  :where(.shell-page) .chapter-links a { font-size:14px; padding-inline:8px; }
  :where(.shell-page) .opening-grid { gap:4vw; grid-template-columns:1.35fr .7fr; }
  :where(.shell-page) .comparison-option { padding:25px 20px; }
}
@media(max-width:900px) {
  :where(.shell-page) .compact-opening { padding-block:36px 42px; }
  :where(.shell-page) .compact-opening > .wrap { grid-template-columns:1fr; gap:28px; }
  :where(.shell-page) .compact-opening h1 { font-size:clamp(48px,7.6vw,68px); max-width:17ch; }
  :where(.shell-page) .compact-opening .opening-intro { margin-top:20px; }
  :where(.shell-page) .document-layout { grid-template-columns:minmax(0,1fr); gap:40px; }
  :where(.shell-page) .document-heading h1 { font-size:clamp(48px,7.6vw,68px); max-width:17ch; }
  :where(.shell-page) .document-aside { position:static; max-height:none; overflow:visible; }
  :where(.shell-page) .term-list { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:800px) {
  :where(html:has(> body.shell-page)) { --chapter-height:58px; }
  :where(.shell-page) h2 { font-size:clamp(42px,6.7vw,64px); }
  :where(.shell-page) .wrap { width:calc(100% - 48px); }
  :where(.shell-page) .shell-section { padding-block:75px; }
  :where(.shell-page) .chapter-bar { display:none; }
  :where(.shell-page) .mobile-chapters { display:flex; position:fixed; z-index:45; bottom:0; left:0; right:0; min-height:var(--chapter-height); align-items:center; gap:25px; padding:7px 24px; background:var(--site-ink); color:#fff; border-top:1px solid #777; }
  :where(.shell-page) .mobile-chapters label { font-size:14px; font-weight:600; }
  :where(.shell-page) .mobile-chapters select { flex:1; min-width:0; min-height:44px; padding:8px; font-size:17px; font-weight:600; background:var(--site-ink); color:#fff; border:0; border-radius:0; }
  :where(.shell-page) .mobile-chapters::before { content:''; position:absolute; inset:0 auto auto 0; height:3px; width:calc(var(--chapter-progress, 0) * 100%); background:var(--site-coral); transition:width .24s ease; pointer-events:none; }
  :where(.shell-page) .split-opening { min-height:0; padding-block:45px 65px; }
  :where(.shell-page) .opening-grid { grid-template-columns:1fr .65fr; gap:26px; }
  :where(.shell-page) .opening-intro { font-size:20px; }
  :where(.shell-page) .comparison-option { padding:22px 17px; }
  :where(.shell-page) .comparison-option h3 { font-size:17px; line-height:1.2; }
  :where(.shell-page) .comparison-option.our-way { transform:none; box-shadow:5px 5px 0 var(--site-coral); }
  :where(.shell-page) .closing-invitation h2 { font-size:clamp(42px,9vw,63px); }
  :where(.shell-page) .close-actions { flex-direction:column; align-items:start; gap:30px; }
}
@media(max-width:600px) {
  :where(html:has(> body.shell-page)) { --site-edge:4px; }
  :where(.shell-page) h1 { font-size:clamp(43px,11.7vw,65px); line-height:1.02; }
  :where(.shell-page) h2 { font-size:clamp(36px,10vw,47px); line-height:1.04; }
  :where(.shell-page) .wrap { width:calc(100% - 40px); }
  :where(.shell-page) .eyebrow { margin-bottom:18px; }
  :where(.shell-page) .shell-section { padding-block:52px; }
  :where(.shell-page) .section-heading { margin-bottom:30px; }
  :where(.shell-page) .mobile-chapters { padding-inline:20px; }
  :where(.shell-page) .split-opening { padding-block:32px 42px; }
  :where(.shell-page) .opening-grid { display:flex; flex-direction:column; gap:30px; align-items:stretch; }
  :where(.shell-page) .opening-copy .button { margin-top:24px; }
  :where(.shell-page) .opening-art { width:min(73%,270px); margin-left:auto; margin-right:9px; }
  :where(.shell-page) .opening-art img { aspect-ratio:1.5; object-position:50% 53%; }
  :where(.shell-page) .compact-opening { padding-block:28px 36px; }
  :where(.shell-page) .compact-opening .eyebrow { margin-bottom:16px; }
  :where(.shell-page) .compact-opening h1 { font-size:clamp(39px,10.5vw,58px); line-height:1.04; }
  :where(.shell-page) .compact-opening .opening-intro { font-size:20px; max-width:30ch; margin-top:18px; }
  :where(.shell-page) .document-heading .eyebrow { margin-bottom:16px; }
  :where(.shell-page) .document-heading h1 { font-size:clamp(39px,10.5vw,58px); line-height:1.04; }
  :where(.shell-page) .contents-card a { gap:14px; padding:12px 14px; }
  :where(.shell-page) .contents-card a:has(> .contents-art) { grid-template-columns:60px minmax(0,1fr) 18px; padding:12px; }
  :where(.shell-page) .contents-art { width:60px; height:60px; }
  :where(.shell-page) .contents-copy strong { font-size:21px; }
  :where(.shell-page) .contents-arrow { font-size:23px; }
  :where(.shell-page) .paper-grid { grid-template-columns:1fr; gap:25px; padding-bottom:0; }
  :where(.shell-page) .paper-grid > :nth-child(even) { top:0; }
  :where(.shell-page) .paper-card { padding:24px; }
  :where(.shell-page) .paper-card::before { margin-bottom:18px; }
  :where(.shell-page) .paper-card h3 { font-size:31px; }
  :where(.shell-page) .paper-card p { margin-top:16px; }
  :where(.shell-page) .disclosure-card > summary { grid-template-columns:30px minmax(0,1fr) 20px; gap:12px; padding:20px 18px; }
  :where(.shell-page) .disclosure-index { font-size:15px; }
  :where(.shell-page) .disclosure-card h3 { font-size:clamp(21px,5.6vw,24px); line-height:1.18; }
  :where(.shell-page) .disclosure-toggle { font-size:25px; }
  :where(.shell-page) .disclosure-card .deliverable-content { padding:0 18px 22px 18px; }
  :where(.shell-page) .comparison-grid { grid-template-columns:1fr; }
  :where(.shell-page) .comparison-option + .comparison-option { border-left:1px solid #999; border-top:0; }
  :where(.shell-page) .comparison-option.our-way { margin-top:16px; border-top:1px solid var(--site-ink); }
  :where(.shell-page) .pull-quote blockquote { font-size:clamp(25px,7vw,31px); line-height:1.2; }
  :where(.shell-page) .closing-invitation { padding-block:60px 56px; }
  :where(.shell-page) .closing-invitation h2 { font-size:clamp(36px,10vw,47px); }
  :where(.shell-page) .closing-invitation h2 + p,
  :where(.shell-page) .closing-invitation .closing-copy { margin-top:22px; font-size:20px; }
  :where(.shell-page) .form-pair { grid-template-columns:1fr; gap:0; }
  :where(.shell-page) dialog { padding:50px 25px 30px; }
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape) {
  :where(.shell-page) .split-opening { min-height:0; padding-block:28px 38px; }
  :where(.shell-page) .shell-section { padding-block:48px; }
}
@media(prefers-reduced-motion:reduce) {
  :where(html:has(> body.shell-page)) { scroll-behavior:auto; }
  :where(.shell-page) *,
  :where(.shell-page) *::before,
  :where(.shell-page) *::after { transition:none!important; animation:none!important; }
  :where(.shell-page) .contents-card a:is(:hover,:focus-visible) .contents-arrow { translate:none; }
}