/* Loopstead · site.css · v7 (26 October 2026), the landing-page-design look. See site/BRIEF.md.
   Spacing: 0 2 4 8 12 16 24 32 40 48 64 80 96 only. Type: Tailwind steps with their line heights, in rem, so text
   follows the reader's default size; media queries in em (40em 640, 48em 768, 56.25em 900, 64em 1024, 80em 1280).
   Radii: Tailwind values, nested radius = outer − gap. Every transition uses --ease. One typeface: Manrope.
   No inline styles anywhere (the CSP has style-src 'self').
   html.js is set by the inline head script (JavaScript runs); html.ready is set by site.js once it has run. Only
   .ready hides anything for a reveal, so a page whose site.js fails to load shows everything. */

@font-face{font-family:Manrope;src:url("/assets/fonts/manrope-latin-400-normal.woff2?v=5.3.0") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url("/assets/fonts/manrope-latin-600-normal.woff2?v=5.3.0") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#fbfaf5;--surface:#ffffff;--head:#0f2418;--ink:#1b2b24;--muted:#52655e;--line:#e2ddd1;--field:#7a8c80;
  --teal:#146e62;--teal-hover:#0f5a50;--teal-press:#0c4a42;--tint:#eef4f1;--err:#8a2c1d;--skel:#efebe1;--skel-2:#e6e0d3;
  --foot:#131209;--cream:#f6f3ec;--cream-muted:rgba(246,243,236,.72);
  --ease:cubic-bezier(0.32,0.72,0,1);
  --font:Manrope,ui-sans-serif,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.75rem var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3,dt,summary{font-weight:600;color:var(--head);text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:4px;transition:color 700ms var(--ease)}
a:hover{color:var(--teal-hover)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
::selection{background:#f3e7c9;color:var(--head)}
main{flex:1 0 auto}
main:focus{outline:none}
figcaption,.facts,.foot-fine{font-variant-numeric:tabular-nums lining-nums}

.wrap{width:100%;max-width:1232px;margin-inline:auto;padding-inline:16px}
@media (min-width:40em){.wrap{max-width:1264px;padding-inline:32px}}
@media (min-width:64em){.wrap{max-width:1296px;padding-inline:48px}}

/* The skip link appears below the island, so it never covers the logo. */
.skip{position:absolute;left:16px;top:-64px;z-index:60;padding:8px 12px;border-radius:8px;background:var(--teal);color:#fff;font:600 1rem/1.5rem var(--font);text-decoration:none;transition:top 700ms var(--ease)}
.skip:focus{top:96px;color:#fff}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:0;border-radius:8px;background:var(--teal);color:#fff;font:600 1rem/1.5rem var(--font);text-decoration:none;cursor:pointer;transition:background-color 700ms var(--ease),transform 700ms var(--ease),box-shadow 700ms var(--ease)}
.btn:hover{background:var(--teal-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px -8px rgba(15,36,24,.4)}
.btn:active{background:var(--teal-press);transform:scale(.98);box-shadow:none}
.btn[aria-disabled="true"]{opacity:.6;cursor:progress;transform:none}
.btn-sm{padding:8px 12px;border-radius:9999px;font-size:.875rem;line-height:1.25rem}
.btn-wide{width:100%}

/* ---- Fluid island nav (54 px tall at every width: 36 px button or burger, 8 px padding, 1 px border) ---- */
.mark{display:inline-block;flex:none;width:24px;height:24px;background:currentColor;-webkit-mask:url("/brand/loopstead-mark.png") center/contain no-repeat;mask:url("/brand/loopstead-mark.png") center/contain no-repeat}
.logo{display:inline-flex;align-items:center;gap:8px;border-radius:8px;color:var(--head);font:600 1rem/1.5rem var(--font);text-decoration:none}
.logo:hover{color:var(--head)}

.island{position:fixed;top:24px;left:50%;z-index:50;display:flex;align-items:center;gap:24px;width:max-content;min-height:54px;max-width:calc(100% - 32px);padding:8px 8px 8px 16px;border:1px solid rgba(15,36,24,.08);border-radius:9999px;background:rgba(251,250,245,.72);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 8px 32px -8px rgba(15,36,24,.16);transform:translateX(-50%);transition:background-color 700ms var(--ease),box-shadow 700ms var(--ease)}
.island.is-open{background:rgba(255,255,255,.6);box-shadow:none}
.island-nav{display:none;gap:24px}
.island-nav a{color:var(--muted);font-size:.875rem;line-height:1.25rem;text-decoration:none}
.island-nav a:hover,.island-nav a.is-current,.island-nav a[aria-current="page"]{color:var(--head)}
.island-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.island .btn-sm{display:none}
/* On a short screen (a phone on its side, 400% zoom) the island scrolls away with the page instead of covering it. */
@media (max-height:30em){.island{position:absolute}}

.burger{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:9999px;background:transparent;color:var(--head);cursor:pointer;transition:background-color 700ms var(--ease),transform 700ms var(--ease)}
.burger:hover{background:rgba(15,36,24,.06)}
.burger:active{transform:scale(.98)}
.burger-line{position:absolute;left:10px;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform 700ms var(--ease)}
.burger-line:first-child{top:13px}
.burger-line:last-child{top:21px}
.island.is-open .burger-line:first-child{transform:translateY(4px) rotate(45deg)}
.island.is-open .burger-line:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (min-width:56.25em){
  .island-nav{display:flex}
  .island .btn-sm{display:inline-flex}
  .burger{display:none}
}
/* Without JavaScript the burger can't open the sheet, so under 900 px the island shows its links instead, in the
   page's flow (two or three rows), and the burger stays hidden. */
html:not(.js) .burger{display:none}
@media (max-width:56.1875em){
  html:not(.js) .island{position:relative;top:auto;left:auto;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:24px auto 0;padding:12px 16px;border-radius:24px;transform:none}
  html:not(.js) .island .btn-sm{display:inline-flex;order:1}
  html:not(.js) .island-nav{display:flex;flex-wrap:wrap;justify-content:center;flex-basis:100%;order:2;gap:8px 24px}
  html:not(.js) main{padding-top:0}
}

.sheet{position:fixed;inset:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;padding:96px 16px 48px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);opacity:0;transition:opacity 700ms var(--ease)}
.sheet.is-open{opacity:1}
.sheet ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sheet li{opacity:0;transform:translateY(48px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.sheet.is-open li{opacity:1;transform:none}
.sheet.is-open li:nth-child(1){transition-delay:100ms}
.sheet.is-open li:nth-child(2){transition-delay:150ms}
.sheet.is-open li:nth-child(3){transition-delay:200ms}
.sheet.is-open li:nth-child(4){transition-delay:250ms}
.sheet.is-open li:nth-child(5){transition-delay:300ms}
.sheet a:not(.btn){display:block;padding:12px 0;color:var(--head);font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-0.02em;text-decoration:none}
.sheet a:not(.btn):hover{color:var(--teal)}
.sheet a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.sheet .btn{margin-top:24px}
html.is-locked,html.is-locked body{overflow:hidden}

/* ---- Headings ---- */
h2{font-size:1.875rem;line-height:2.25rem;letter-spacing:-0.02em}
@media (min-width:48em){h2{font-size:2.25rem;line-height:2.5rem}}

/* ---- Hero (home) and intro (other pages) ---- */
main{padding-top:96px}
.hero,.intro,.nf{display:flex;flex-direction:column;align-items:center;padding-top:32px;text-align:center}
@media (min-width:48em){.hero,.intro,.nf{padding-top:64px}}
.hero h1,.intro h1,.nf h1{max-width:680px;padding-bottom:4px;font-size:2.25rem;line-height:2.5rem;letter-spacing:-0.02em}
@media (min-width:40em){.hero h1,.intro h1,.nf h1{font-size:3rem;line-height:1}}
.grad{background:linear-gradient(90deg,#000000,#666666);-webkit-background-clip:text;background-clip:text;color:transparent}
/* The hero heading and the tagline keep their line breaks at every width; on a phone a line that is too long wraps on
   its own (balanced), so no break ever falls mid-phrase across two of the written lines. */
.ln{display:inline}
.hero h1 .ln,.tag .ln{display:block}
.sub,.lead{max-width:680px;margin-top:24px;color:var(--muted);font-size:1.125rem;line-height:1.75rem;text-wrap:balance}
@media (min-width:40em){.sub,.lead{font-size:1.25rem;line-height:1.75rem}}
.cta{margin-top:32px}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:24px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.875rem;line-height:1.25rem}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts li::before{content:"";flex:none;width:4px;height:4px;border-radius:9999px;background:var(--teal)}
/* On phones each fact is its own centred line, its dot at the start of the first line. */
@media (max-width:39.9375em){
  .facts{flex-direction:column;align-items:center}
  .facts li{display:block}
  .facts li::before{display:inline-block;margin-right:8px;vertical-align:middle}
}
.nf p{margin-top:24px}
.nf .btn{margin-top:32px}

/* ---- Product frames (outer 24, gap 8, inner 16) ---- */
.frame-in{padding:8px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 24px 64px -24px rgba(15,36,24,.2)}
.frame-in img{width:100%;border-radius:16px;background:var(--skel)}
.frame-in.is-loading img{animation:skel 1600ms var(--ease) infinite alternate}
@keyframes skel{to{background-color:var(--skel-2)}}
figcaption{margin-top:12px;color:var(--muted);font-size:.875rem;line-height:1.25rem}
.frame-hero{width:100%;max-width:928px;margin-top:48px}
@media (min-width:48em){.frame-hero{margin-top:64px}}

/* ---- Problem to solution ---- */
.problem{display:grid;gap:32px;margin-top:96px}
.problem p{max-width:62ch;font-size:1.125rem;line-height:1.75rem}
@media (min-width:48em){.problem p{font-size:1.25rem;line-height:1.75rem}}
@media (min-width:64em){.problem{grid-template-columns:5fr 7fr;gap:48px;align-items:start}}

/* ---- Benefits ---- */
.benefits{margin-top:96px}
.cards{display:grid;gap:16px;margin:32px 0 0;padding:0;list-style:none}
@media (min-width:48em){.cards{grid-template-columns:1fr 1fr;gap:24px}}
.card{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
@media (min-width:48em){.card{padding:32px}}
.card h3{font-size:1.25rem;line-height:1.75rem}
.card p{margin-top:8px;color:var(--muted);font-size:1rem;line-height:1.5rem}

/* ---- Tagline reveal ---- */
.tagline{display:flex;justify-content:center;margin-top:96px;padding-block:64px}
@media (min-width:48em){.tagline{padding-block:96px}}
.tag{max-width:680px;color:var(--head);font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-0.02em;text-align:center;text-wrap:balance}
@media (max-width:24.3125em){.tag{font-size:1.875rem;line-height:2.25rem}} /* under 390 px, so no line leaves a word alone */
@media (min-width:40em){.tag{font-size:3rem;line-height:1}}
.tag .w{color:rgba(15,36,24,.3);transition:color 700ms var(--ease)}
.tag .w.on{color:var(--head)}

/* ---- How it works: copy above each picture until 1280 px, so no capture shows its text below about 10 px ---- */
.how{margin-top:96px}
.steps{display:grid;gap:64px;margin:32px 0 0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.step>*{min-width:0}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--head);font-size:.875rem;line-height:1.25rem;font-weight:600}
.step h3{margin-top:16px;font-size:1.5rem;line-height:2rem}
.step-copy p{max-width:46ch;margin-top:8px;color:var(--muted)}
.step-plan .frame{max-width:930px}
.step-home .frame{max-width:378px}
.step-brief .frame{max-width:1076px}
@media (min-width:80em){
  .step-plan,.step-home{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
  .step-copy{padding-top:24px}
}
/* Under 900 px every figure with a phone file shows it (the <source> media queries say the same). Each frame is its
   capture's display width plus 18 px (8 px padding and 1 px border each side), so no capture is scaled up. */
@media (max-width:56.1875em){
  .frame-hero{max-width:370px}
  .step-plan .frame{max-width:366px}
  .step-home .frame{max-width:368px}
}
/* The visit brief is the widest capture, so its phone file serves up to 1023 px. */
@media (max-width:63.9375em){.step-brief .frame{max-width:368px}}

/* ---- FAQ (home) ---- */
.faq{display:grid;gap:32px;margin-top:96px}
@media (min-width:64em){.faq{grid-template-columns:4fr 8fr;gap:48px;align-items:start}}
.qa{display:grid;gap:12px}
.qa details{border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color 700ms var(--ease)}
.qa details[open]{border-color:#cfc8b8}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-radius:16px;font-size:1.125rem;line-height:1.75rem;list-style:none;cursor:pointer;transition:background-color 700ms var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:#f7f5ef}
.qa summary:active{background:#f1eee5}
.qa summary::after{content:"";flex:none;width:24px;height:24px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform 700ms var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 24px 24px;color:var(--muted);font-size:1rem;line-height:1.5rem}
.qa details[open] p{animation:answer 700ms var(--ease)}
@keyframes answer{from{opacity:0;transform:translateY(8px)}}

/* ---- Final CTA and form ---- */
.access{margin-top:96px}
.access-box{display:grid;gap:32px;padding:32px 24px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
@media (min-width:48em){.access-box{padding:48px}}
@media (min-width:64em){.access-box{grid-template-columns:5fr 6fr;gap:64px;padding:64px}}
.access-copy p{max-width:46ch;margin-top:16px;color:var(--muted)}
.access-copy .foot-mail{margin-top:12px;font-size:1rem;line-height:1.5rem}
.form{display:grid;gap:24px}
.field{display:grid;gap:8px}
.field label{color:var(--head);font-size:.875rem;line-height:1.25rem;font-weight:600}
.field input,.field select{width:100%;height:48px;padding:12px 16px;border:1px solid var(--field);border-radius:8px;background:#fff;color:var(--ink);font:400 1rem/1.5rem var(--font);transition:border-color 700ms var(--ease)}
.field select{-webkit-appearance:none;appearance:none;padding-right:48px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2352655e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/16px 16px}
.field input:hover,.field select:hover{border-color:var(--muted)}
.field input:focus-visible,.field select:focus-visible{border-color:var(--teal);outline:2px solid var(--teal);outline-offset:2px}
.field.is-invalid input,.field.is-invalid select{border-color:var(--err)}
.err{color:var(--err);font-size:.875rem;line-height:1.25rem}
.form-status{min-height:20px;color:var(--muted);font-size:.875rem;line-height:1.25rem}
.form-status:empty{display:none}
/* With no address and no endpoint (staging), the build disables the button and marks the form .is-soon. Until site.js
   has run, the button stays hidden and this line says so; site.js then validates and shows the same words. */
.form-soon{display:none;color:var(--muted);font-size:.875rem;line-height:1.25rem}
html:not(.ready) .form.is-soon .form-soon{display:block}
html:not(.ready) .form.is-soon [type="submit"]{display:none}
.form-done{display:grid;gap:8px;align-content:start}
.form-done .done-h{color:var(--head);font-size:1.5rem;line-height:2rem;font-weight:600}
.form-done:focus{outline:none}

/* ---- Other pages: parts (32 px from every section heading to its content, as on the home page) ---- */
.part{margin-top:64px}
@media (min-width:48em){.part{margin-top:96px}}
.part>h2+p,.part>h2+.qa-cards,.pair-copy h2+p{margin-top:32px}
.part>p+p,.pair-copy p+p{margin-top:16px}
.part>p,.pair-copy p{max-width:62ch}
.qa-cards{display:grid;gap:16px}
@media (min-width:48em){.qa-cards{grid-template-columns:1fr 1fr;gap:24px}}
.qa-cards>div{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.qa-cards dt{font-size:1.125rem;line-height:1.75rem}
.qa-cards dd{margin-top:8px;color:var(--muted);font-size:1rem;line-height:1.5rem}
.callout{padding:32px 24px;border:1px solid #c9ddd6;border-radius:24px;background:var(--tint)}
@media (min-width:48em){.callout{padding:48px}}
.callout p{margin-top:16px;max-width:62ch;font-size:1.25rem;line-height:1.75rem;color:var(--head)}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.pair>*{min-width:0}
.pair .frame{max-width:369px}
@media (min-width:64em){.pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}.pair .frame{justify-self:end}}

/* ---- Footer ---- */
.foot{margin-top:96px;padding:64px 0 48px;background:var(--foot);color:var(--cream)}
.foot-in{display:grid;gap:24px}
@media (min-width:48em){.foot-in{grid-template-columns:1fr auto;align-items:start}}
.foot .logo{color:var(--cream)}
.foot p{font-size:.875rem;line-height:1.25rem}
.foot-id{display:grid;gap:12px}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;margin:0;padding:0;list-style:none;font-size:.875rem;line-height:1.25rem}
.foot a{color:var(--cream)}
.foot a:hover{color:#ffffff}
.foot a[aria-current="page"]{text-decoration-thickness:2px}
.foot :focus-visible{outline-color:var(--cream)}
.foot-in>.foot-mail{grid-column:1/-1}
.foot-in>.foot-fine{grid-column:1/-1;color:var(--cream-muted);font-size:.75rem;line-height:1rem}

/* ---- Scroll interpolation: only once site.js has run (html.ready) ---- */
.ready [data-reveal]{opacity:0;filter:blur(12px);transform:translateY(64px);transition:opacity 900ms var(--ease),filter 900ms var(--ease),transform 900ms var(--ease)}
.ready [data-reveal].is-in{opacity:1;filter:none;transform:none}
.ready [data-reveal="1"]{transition-delay:100ms}
.ready [data-reveal="2"]{transition-delay:200ms}
.ready [data-reveal="3"]{transition-delay:300ms}
.ready [data-reveal="4"]{transition-delay:400ms}
.ready [data-reveal].is-now{transition:none}

@media (prefers-reduced-motion:reduce){
  .ready [data-reveal]{opacity:1;filter:none;transform:none;transition:none}
  .tag .w{color:var(--head);transition:none}
  .sheet,.sheet li,.burger-line,.btn,.qa summary::after,a,.skip{transition:none}
  .frame-in.is-loading img,.qa details[open] p{animation:none}
}
@media (forced-colors:active){
  .mark,.qa summary::after{forced-color-adjust:none;background:CanvasText}
  .grad{color:CanvasText;background:none}
  .btn{border:1px solid ButtonText}
}

/* ---- Print: one Letter page per page, everything visible, nothing that needs a screen ---- */
@media print{
  @page{size:letter;margin:.5in}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html,body{background:#fff}
  body{display:block;min-height:0;font-size:8.5pt;line-height:1.3}
  main{padding-top:0}
  .hero{display:grid!important;grid-template-columns:1fr 3in;column-gap:18pt;align-items:start}
  .hero>*{grid-column:1}
  .hero .frame-hero{grid-column:2;grid-row:1 / span 4;margin-top:0!important;max-width:3in}
  .steps{grid-template-columns:repeat(3,1fr);column-gap:18pt}
  .qa{grid-template-columns:repeat(3,1fr)!important}
  [data-reveal],.qa details p{opacity:1!important;filter:none!important;transform:none!important}
  .skip,.island,.sheet,.btn,.cta,.tagline,.form,.form-done,.how figure,.pair figure,.foot-links,.foot .logo{display:none!important}
  .wrap{max-width:none;padding:0}
  .hero,.intro,.nf{display:block;padding:0;text-align:left}
  .hero h1,.intro h1,.nf h1{max-width:none;font-size:18pt;line-height:1.15;color:#000;background:none}
  .ln,.hero h1 .ln{display:inline}
  .sub,.lead{max-width:none;margin-top:6pt;font-size:10pt;line-height:1.3}
  .facts{display:flex;flex-direction:row;justify-content:flex-start;margin-top:6pt;font-size:8.5pt;line-height:1.3}
  .facts li{display:inline-flex}
  .frame-in{padding:0;border:0;box-shadow:none}
  .frame-in img{border-radius:0}
  figcaption{margin-top:2pt;font-size:7.5pt;line-height:1.3}
  h2{font-size:12pt;line-height:1.2}
  .problem,.benefits,.how,.faq,.access,.part{margin:8pt 0 0;display:block}
  .problem p{margin-top:3pt;font-size:8.5pt;line-height:1.3}
  .cards,.qa-cards{display:grid;grid-template-columns:1fr 1fr;gap:4pt 18pt;margin-top:4pt}
  .card,.qa-cards>div{padding:0;border:0;background:none}
  .callout{padding:6pt 8pt;border:1pt solid #000;border-radius:0;background:none}
  .card h3,.step h3,.qa-cards dt{font-size:9.5pt;line-height:1.3}
  .card p,.qa-cards dd{margin-top:1pt;font-size:8.5pt;line-height:1.3}
  .steps{gap:4pt;margin-top:4pt}
  .step{display:block}
  .step-n{display:none}
  .step h3{margin-top:0}
  .step-copy{padding:0}
  .step-copy p{max-width:none;margin-top:1pt;line-height:1.3}
  .qa{display:grid;grid-template-columns:1fr 1fr;gap:4pt 18pt;margin-top:4pt}
  .qa details{border:0;background:none;break-inside:avoid}
  .qa summary{padding:0;font-size:9.5pt;line-height:1.3}
  .qa summary::after{display:none}
  .qa details p{padding:1pt 0 0;font-size:8.5pt;line-height:1.3}
  .access-box{display:block;padding:0;border:0}
  .access-copy p{max-width:none;margin-top:3pt;font-size:8.5pt;line-height:1.3}
  .callout p,.part>p,.pair-copy p{max-width:none;margin-top:3pt;font-size:8.5pt;line-height:1.3;color:inherit}
  .part>h2+p,.part>h2+.qa-cards,.part>p+p,.pair-copy h2+p,.pair-copy p+p{margin-top:4pt}
  .callout h2+p{margin-top:2pt}
  .foot{margin-top:10pt;padding:0;background:none;color:#000}
  .foot a{color:#000}
  .foot-in{display:block}
  .foot p{font-size:8pt;line-height:1.3;margin-top:2pt}
  .foot-in>.foot-fine{color:#000;font-size:8pt}
}