/* NovaLab shared stylesheet, redesign 2026-11. Loaded by EVERY page, before the page's own css.
   Holds only what is site-wide: fonts, tokens, resets, type scale, buttons and links, header, menu, request modal, Nova chat, footer,
   and the shared page components (breadcrumb, page head, prose, data table). Nothing homepage-only lives here (see css/home.css).
   Type: Instrument Serif (voice, headings, numerals) + Onest (interface, reading). No uppercase anywhere.
   Hidden start states for entrances and reveals are NOT here: a page that wants them declares them itself. */

/* == 1 fonts and metric-matched fallbacks == */
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest-latin-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* metric-matched fallbacks, measured in Chromium (canvas measureText, 2026-11-13): swap moves nothing */
@font-face{font-family:"IS Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT");font-style:normal;size-adjust:83%;ascent-override:119%;descent-override:37%;line-gap-override:0%}
@font-face{font-family:"IS Fallback";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT");font-style:italic;size-adjust:87%;ascent-override:114%;descent-override:36%;line-gap-override:0%}
@font-face{font-family:"Onest Fallback";src:local("Arial"),local("ArialMT");size-adjust:105%;ascent-override:92%;descent-override:28.5%;line-gap-override:0%}

/* == 2 tokens == */
:root{
  --base:#fafafa;--hover:#ececeb;--ink:#141414;--muted:#5c5c5c;--link:#00739f;
  --ink-2:#292929;--muted-dark:#b8b8b8;--link-light:#4fb8e6;--field:#767676;
  --hair:rgba(20,20,20,.12);--hair-dark:rgba(250,250,250,.18);
  --serif:"Instrument Serif","IS Fallback",Georgia,serif;
  --sans:"Onest","Onest Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:24px;--gut:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:600px){:root{--m:32px;--gut:20px}}
@media(min-width:1024px){:root{--m:48px;--gut:24px}}

/* == 3 resets, shell, sr-only, skip link, focus == */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture,video,svg{display:block;max-width:100%}
a{color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit}
.shell{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--m)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-5rem;z-index:300;background:var(--ink);color:var(--base);padding:.75rem 1rem;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.ftr :focus-visible,.menu :focus-visible,[data-dark] :focus-visible{outline-color:var(--link-light)}
.btn:focus-visible{outline-offset:3px}

/* == 4 links (underline sweep), buttons, arrow link == */
.ul{background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;padding-bottom:2px;text-decoration:none;transition:background-size .26s var(--ease)}
.ul:hover,.ul:focus-visible{background-size:100% 1px}
button.ul{appearance:none;border:0;background-color:transparent;padding:0 0 2px;cursor:pointer}

/* buttons: fill rises on hover and focus */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.6rem;font:500 .9375rem/1.3 var(--sans);text-decoration:none;border:1px solid var(--ink);border-radius:2px;cursor:pointer;transition:color .36s var(--ease),border-color .36s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--link);transform:translateY(101%);transition:transform .36s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn-ink{background:var(--ink);color:var(--base)}
.btn-line{background:transparent;color:var(--ink)}
.btn-ink:hover,.btn-ink:focus-visible,.btn-line:hover,.btn-line:focus-visible{color:#fff;border-color:var(--link)}
.btn-light{background:var(--base);color:var(--ink);border-color:var(--base)}
.btn-light::before{background:var(--link-light)}
.btn-light:hover,.btn-light:focus-visible{border-color:var(--link-light)}
.arrow-link{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;font-weight:500;font-size:.9375rem;text-decoration:none}
.arrow-link .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
.arrow-link:hover .ico{transform:translateX(4px)}

/* == 5 lead-ins, type scale, section spacing == */
.lead{font:italic 400 1.25rem/1.3 var(--serif);color:var(--ink)}
.h2{font:400 clamp(2rem,4.2vw,4rem)/1.08 var(--serif);letter-spacing:-.01em}
.sec{padding-block:clamp(4.5rem,10vw,10rem)}
.sec-head{display:grid;gap:.5rem;margin-bottom:clamp(2rem,4vw,4rem)}
@media(min-width:1024px){
  .sec-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline}
  .sec-head .lead{grid-column:1/4;font-size:1.375rem}
  .sec-head .h2{grid-column:4/13}
}

/* == 6 header == */
.hdr{position:fixed;inset:0 0 auto 0;z-index:90;height:72px;color:var(--ink);transition:transform .4s cubic-bezier(.215,.61,.355,1),background-color .3s,color .5s,border-color .3s;border-bottom:1px solid transparent}
.hdr.glass{background:rgba(250,250,250,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
.hdr.on-dark{background:rgba(20,20,20,.78);color:var(--base);border-bottom-color:var(--hair-dark)}
.hdr.on-dark :focus-visible{outline-color:var(--link-light)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font:400 1.5rem/1 var(--serif);text-decoration:none}
.nav{display:none}
.nav ul{display:flex;gap:2rem}
.nav a,.hdr-check{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.9375rem}
.hdr-r{display:flex;align-items:center;gap:1.25rem}
.menu-btn{min-height:44px;min-width:44px;padding:0 .9rem;background:transparent;border:1px solid currentColor;border-radius:2px;font-weight:500;font-size:.9375rem;cursor:pointer}
.menu-btn:hover{background:var(--ink);color:var(--base)}
.hdr.on-dark .menu-btn:hover{background:var(--base);color:var(--ink)}
.hdr-progress{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;transform:scaleX(var(--p,0));transform-origin:0 50%;opacity:.5}
@media(min-width:1024px){
  .hdr-in{display:grid;grid-template-columns:1fr auto 1fr}
  .nav{display:block}
  .hdr-r{justify-self:end}
}

/* == 7 footer == */
.ftr{position:relative;overflow:hidden;background:var(--ink);color:var(--base)}
.ftr-body{position:relative;z-index:1;padding-top:clamp(3rem,6vw,6rem)}
.ftr-cta{display:grid;gap:1.75rem;justify-items:start;padding-bottom:clamp(3rem,6vw,5rem)}
.ftr-cta .h2{max-width:46rem}
.ftr-cta .h2 .fl{display:block}
.ftr-cta .btn{width:100%}
.ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;padding-block:2.5rem;border-top:1px solid var(--hair-dark)}
.ftr-brand{grid-column:1/-1;display:grid;gap:.9rem;justify-items:start}
.ftr-brand p{max-width:20rem;color:var(--muted-dark)}
.fc-wide{grid-column:1/-1}
.fc h3{font:500 .9375rem/1.3 var(--sans);color:var(--muted-dark);margin-bottom:.5rem}
.fc a{display:inline-flex;align-items:center;min-height:44px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1.5rem;padding-block:1rem;border-top:1px solid var(--hair-dark);font-size:.875rem;color:var(--muted-dark)}
.legal-r{display:flex;gap:1.5rem;align-items:center}
.legal a,.legal button{min-height:44px;display:inline-flex;align-items:center;color:var(--muted-dark)}
.ghost{position:relative;z-index:0;overflow:hidden;text-align:center;line-height:.8;pointer-events:none;user-select:none}
.ghost span{display:block;font:400 clamp(5rem,23vw,23rem)/.85 var(--serif);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:.5px rgba(250,250,250,.3);transform:translateY(calc(var(--g,0) * 26%));padding-bottom:.05em}
@media(min-width:1024px){
  .ftr-cta{grid-template-columns:1fr auto;align-items:end}
  .ftr-cta .btn{width:auto}
  .ftr-cols{grid-template-columns:1.5fr 1fr 1fr 1.6fr}
  .ftr-brand,.fc-wide{grid-column:auto}
  .ghost span{-webkit-text-stroke-width:1px}
}

/* == 8 menu == */
.menu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;overflow:auto;color:var(--base);background:linear-gradient(rgba(20,20,20,.8),rgba(20,20,20,.8)),url(/assets/home/texture-plaster-1200.jpg) center/cover;background-color:var(--ink);transform:translateX(100%);transition:transform .5s var(--ease)}
.menu[hidden]{display:none}
.menu.open{transform:none}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:72px;flex:none}
.btn-close{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;background:transparent;border:1px solid rgba(250,250,250,.45);border-radius:2px;color:var(--base);font-weight:500;font-size:.9375rem;cursor:pointer}
.btn-close:hover{background:var(--base);color:var(--ink)}
.ico{width:18px;height:18px}
.menu-nav{padding-block:2rem}
.menu-nav a,.menu-nav button{display:block;min-height:44px;padding:.15rem 0;background:none;border:0;text-align:left;text-decoration:none;cursor:pointer;color:var(--base);font:400 clamp(2.25rem,5.2vw,3.5rem)/1.15 var(--serif);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s}
.menu.open .menu-nav a,.menu.open .menu-nav button{opacity:1;transform:none;transition-delay:calc(150ms + var(--i,0) * 60ms),calc(150ms + var(--i,0) * 60ms),0s}
.menu-nav a:hover,.menu-nav button:hover{color:var(--link-light)}
.menu-bot{display:flex;flex-wrap:wrap;gap:.25rem 2rem;margin-top:auto;padding-block:1.5rem 2rem}
.menu-bot a{display:inline-flex;align-items:center;min-height:44px}

/* == 9 request modal == */
.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:1rem;background:rgba(20,20,20,.55);opacity:0;transition:opacity .3s}
.modal[hidden]{display:none}
.modal.open{opacity:1}
.sheet{position:relative;width:min(40rem,100%);max-height:calc(100svh - 2rem);overflow:auto;padding:2.5rem;background:var(--base);transform:translateY(12px);transition:transform .3s var(--ease)}
.modal.open .sheet{transform:none}
.x{position:absolute;top:.75rem;right:.75rem;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.ask .lead{margin-bottom:.35rem}
.ask h2{font:400 clamp(2rem,4vw,2.75rem)/1.1 var(--serif)}
.form{display:grid;gap:1.1rem;margin-top:1.5rem}
.form label{display:block;font-weight:500;font-size:.9375rem}
.form input,.form select,.form textarea{display:block;width:100%;min-height:48px;margin-top:.4rem;padding:0 .85rem;font:400 1rem/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:2px}
.form textarea{padding:.75rem .85rem;resize:vertical}
.opt{font-weight:400;color:var(--muted)}
.frow{display:grid;gap:1.1rem}
.form-foot p{color:var(--muted);font-size:.9375rem}
.send-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.done{display:none;text-align:left;padding-top:1.5rem}
.modal.sent .ask{display:none}
.modal.sent .done{display:block}
.done h2{font:400 clamp(2rem,4vw,2.75rem)/1.1 var(--serif);margin-top:1.25rem}
.done p{margin-top:.6rem;max-width:30rem}
.done .copy{display:block;margin:1.25rem 0 1.5rem;color:var(--link)}
.mark{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%}
.mark svg{width:26px;height:26px}
.mark path{stroke-dasharray:1;stroke-dashoffset:1}
.modal.sent .mark path{animation:draw .6s .1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(min-width:600px){.frow{grid-template-columns:1fr 1fr}}
@media(max-width:599px){
  .modal{padding:0;place-items:stretch}
  .sheet{width:100%;max-height:none;height:100%;padding:4.5rem var(--m) 2rem}
  .send-row .btn{width:100%}
}

/* == 10 Nova chat == */
.nova-toggle{position:fixed;right:16px;bottom:calc(16px + var(--cookie-h,0px));z-index:80;width:56px;height:56px;display:grid;place-items:center;background:var(--ink);color:var(--base);border:0;border-radius:50%;cursor:pointer;transition:bottom .25s}
.nova-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nova-toggle .ic-close{display:none}
.nova-toggle.open .ic-chat{display:none}
.nova-toggle.open .ic-close{display:block}
.nova-win{position:fixed;right:16px;bottom:calc(84px + var(--cookie-h,0px));z-index:80;display:flex;flex-direction:column;width:min(23rem,calc(100vw - 32px));height:min(32rem,calc(100svh - 130px));background:#fff;border:1px solid #cfcfcd;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.nova-win.open{opacity:1;visibility:visible;transform:none}
.nova-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:var(--ink);color:var(--base)}
.nova-av{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(250,250,250,.5);border-radius:50%;font:400 1.25rem/1 var(--serif)}
.nova-meta{flex:1;min-width:0}
.nova-meta b{display:block;font-weight:500;font-size:.9375rem}
.nova-meta span{display:block;font-size:.875rem;color:var(--muted-dark)}
.nova-close{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--base);cursor:pointer}
.nova-win :focus-visible{outline-color:var(--link)}
.nova-head :focus-visible{outline-color:var(--link-light)}
.nova-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:.5rem;padding:1rem}
.nova-msg{max-width:86%;padding:.6rem .85rem;font-size:.9375rem;line-height:1.45;border-radius:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.nova-msg.bot{align-self:flex-start;background:var(--hover)}
.nova-msg.user{align-self:flex-end;background:var(--ink);color:var(--base)}
.nova-typing{display:none;gap:4px;align-self:flex-start;padding:.6rem .85rem;background:var(--hover)}
.nova-typing.show{display:flex}
.nova-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}
.nova-typing span:nth-child(2){animation-delay:.15s}.nova-typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.nova-input{display:flex;border-top:1px solid #cfcfcd}
.nova-input input{flex:1;min-width:0;min-height:48px;padding:0 1rem;font:400 1rem/1.4 var(--sans);border:0;background:#fff;color:var(--ink)}
.nova-send{flex:none;width:52px;display:grid;place-items:center;background:var(--ink);color:var(--base);border:0;cursor:pointer}
.nova-send:disabled{opacity:.5;cursor:default}
.nova-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:599px){
  .nova-win{left:0;right:0;bottom:0;width:auto;height:75svh;border-left:0;border-right:0;border-bottom:0}
  .nova-toggle.open{display:none}
}

/* == 11 reduced motion (site-wide parts) == */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;transition-delay:0s!important;animation-duration:.001ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
  .hdr.hide{transform:none}
  .nova-win,.sheet{transform:none}
  .menu-nav a,.menu-nav button{opacity:1;transform:none}
}

/* == 12 Nova chat on phones: a slim tab docked to the right edge inside the page gutter (the gutter is --m wide, so the tab never covers text) == */
@media(max-width:599px){
  .nova-toggle{right:0;bottom:var(--cookie-h,0px);width:var(--m);height:48px;border-radius:10px 0 0 10px}
  .nova-toggle svg{width:16px;height:16px}
}
/* on wide screens the bubble sits inside the page gutter (48px wide from 1024 up), so it never touches a table or text in the shell (fix-log row 39).
   44px round, 2px from the edge: 46px of the 48px gutter. Between 600 and 1023 the 56px bubble is unchanged. */
@media(min-width:1024px){
  .nova-toggle{right:2px;width:44px;height:44px}
}

/* == 13 motion control: html.motion-paused (set by the [data-motion-toggle] button in js/base.js) pauses every CSS animation on the page.
   Hidden for visitors who asked for reduced motion, since nothing loops for them. == */
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}
[data-motion-toggle]{min-height:44px;display:inline-flex;align-items:center}
/* .mo-bar: the caption row a page with scenes or looping video puts above or below them, so every page places the button the same way:
   <p class="mo-bar"><span>caption text</span> <button class="ul" type="button" data-motion-toggle aria-pressed="false">Pause motion</button></p> */
.mo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem;min-height:44px;margin:0;color:var(--muted);font-size:.9375rem}
.mo-bar [data-motion-toggle]{color:var(--ink);font:inherit}
@media(prefers-reduced-motion:reduce){[data-motion-toggle],.mo-bar{display:none}}

/* == 14 shared page components for inner pages: breadcrumb, page head, prose and inline links, data table == */
.crumbs{width:100%;max-width:1440px;margin-inline:auto;padding:calc(72px + 1.25rem) var(--m) 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .6rem;margin:0;padding:0;list-style:none;font-size:.9375rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--hair)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.pg-hero{padding-block:clamp(1rem,3vw,2.5rem) clamp(2.5rem,5vw,4.5rem)}
.pg-hero .lead{display:block;margin-bottom:.75rem}
.pg-title{font:400 clamp(2.75rem,7vw,7rem)/1.02 var(--serif);letter-spacing:-.01em;max-width:14ch}
.pg-title .accent{font-style:italic}
.lede{font:500 clamp(1.125rem,1.6vw,1.375rem)/1.45 var(--sans);max-width:46rem}
.prose p{max-width:44rem}
.prose p+p{margin-top:1em}
.prose a.inline{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.prose a.inline:hover{text-decoration-thickness:2px}
.prose ul{margin-top:1rem}
.prose ul>li{padding:.9rem 0;border-top:1px solid var(--hair);max-width:44rem}
.prose ul>li:last-child{border-bottom:1px solid var(--hair)}
.updated{color:var(--muted);font-size:.9375rem}

.table-wrap{margin-top:1.5rem;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;text-align:left}
.table-wrap caption{caption-side:top;text-align:left;padding-bottom:.75rem;color:var(--muted);font-size:.9375rem}
.table-wrap thead th{padding:.6rem 1.5rem .6rem 0;font:500 .9375rem/1.3 var(--sans);color:var(--muted);border-bottom:1px solid var(--ink)}
.table-wrap tbody tr{border-top:1px solid var(--hair)}
.table-wrap tbody th{width:22%;padding:1.25rem 1.5rem 1.25rem 0;vertical-align:top;text-align:left;font:400 1.375rem/1.2 var(--serif)}
.table-wrap td{padding:1.25rem 1.5rem 1.25rem 0;vertical-align:top;color:var(--muted)}
.table-wrap td.price{width:27%;padding-right:0;color:var(--ink);font:400 1.375rem/1.25 var(--serif);font-variant-numeric:lining-nums}
.table-wrap .inline{color:var(--ink)}
/* narrow screens: each row becomes a block, name then price then description (visual order only; the DOM order stays name, description, price). js/base.js adds the table roles at runtime so assistive tech still reads a table (keeping them out of the served HTML keeps the W3C validator at zero errors). */
@media(max-width:759px){
  .table-wrap table,.table-wrap tbody{display:block}
  .table-wrap thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap caption{display:block;width:100%}
  .table-wrap tr{display:flex;flex-direction:column;padding:1.25rem 0}
  .table-wrap tbody th,.table-wrap td{display:block;width:auto;padding:0}
  .table-wrap td.price{order:2;margin-top:.35rem}
  .table-wrap td:not(.price){order:3;margin-top:.6rem}
}

/* == 15 shared section grid, promoted from the pricing page (was .pr-sec, .pr-cta, .pr-lede). Used by pricing, services, studio and insights pages ==
   .pg-intro: the opening paragraph block under the page head. .pg-sec: one titled section with a hairline above; from 1024 the h2 sticks in
   columns 1 to 3 (a sticky heading only, nothing pinned) and the content sits in columns 4 to 12. .pg-cta: the closing block. */
.pg-intro{padding-bottom:clamp(2.5rem,5vw,4rem)}
.pg-sec{padding-block:clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--hair)}
.pg-sec>h2{margin-bottom:1.25rem;font:400 clamp(1.75rem,2.6vw,2.5rem)/1.1 var(--serif);letter-spacing:-.01em}
.pg-sec>h2+*{margin-top:0}
.pg-sec .table-wrap+p,.pg-sec p+.table-wrap+p{margin-top:1.25rem}
.pg-sec h3{max-width:44rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--hair);font:400 clamp(1.375rem,2vw,1.75rem)/1.2 var(--serif)}
.pg-sec h2+h3{margin-top:0;padding-top:0;border-top:0}
.pg-sec h3+p{margin-top:.6rem;color:var(--muted)}
.pg-sec li b{font-weight:500}
.pg-cta{padding-block:clamp(3.5rem,7vw,7rem);border-top:1px solid var(--hair)}
.pg-cta>h2{max-width:20ch;font:400 clamp(2rem,4.2vw,4rem)/1.08 var(--serif);letter-spacing:-.01em}
.pg-cta p{max-width:40rem;margin-top:1rem}
.pg-cta .btn{margin-top:1.75rem}
.pg-cta .updated{margin-top:2.5rem}
@media(min-width:1024px){
  .pg-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
  .pg-sec>h2{grid-column:1/4;grid-row:1/span 8;align-self:start;position:sticky;top:96px;margin:0;padding-right:1rem}
  .pg-sec>:not(h2){grid-column:4/13}
}

/* == 16 shared FAQ accordion: <div class="faq"><details><summary>Question</summary><p>Answer</p></details>...</div>
   Hairline rows, serif question, a CSS chevron that turns when open. Answers stay in the served HTML, so without JS or CSS every answer still reads.
   Put .faq inside a .pg-sec (it sits in the content columns). Each summary is at least 44px tall. == */
.faq{max-width:44rem;margin-top:1.5rem;border-bottom:1px solid var(--hair)}
.pg-sec>.faq{margin-top:0}
.faq details{border-top:1px solid var(--hair)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;min-height:44px;padding:1.1rem 0;cursor:pointer;list-style:none;font:400 clamp(1.25rem,1.8vw,1.5rem)/1.25 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.6rem;height:.6rem;margin-right:.3rem;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-.15rem) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open]>summary::after{transform:translateY(.1rem) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.faq details>:not(summary){max-width:40rem;margin:0;padding:0 0 1.25rem;color:var(--muted)}
.faq details>:not(summary)+:not(summary){margin-top:-.5rem}