/* Inner pages. Loads after site.css and reuses its tokens, header, footer, buttons, titles, steps, questions, KEEP block and closing band.
   Same grid as the home page: 12 columns, 20px gaps, the second column line on column 5. */

/* Page opening: a short mixed-weight title, one paragraph, one action */
.opener{padding:clamp(40px,6vw,96px) var(--gutter) clamp(36px,5vw,80px)}
.crumbs{margin:0 0 clamp(20px,3vw,34px);padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.9rem;color:var(--fg);opacity:.72}
.crumbs li{display:flex;align-items:center;gap:10px;max-width:none}
.crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline 2px var(--teal-bright);text-underline-offset:4px}
.opener h1.display{margin:0;max-width:13ch;font-size:clamp(3.1rem,9vw,9.4rem);color:var(--fg)}
.opener__lede{max-width:52ch;margin:clamp(22px,3vw,36px) 0 0;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.45;letter-spacing:-.012em}
.opener__actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:clamp(26px,3vw,38px)}
.opener__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:var(--rule)}
.opener__facts div{padding:18px clamp(14px,2vw,30px) 4px 0}
.opener__facts div+div{padding-left:clamp(14px,2vw,30px);border-left:1px solid var(--line)}
.opener__facts dt{font-size:.86rem;font-weight:650;letter-spacing:.01em;opacity:.78}
.opener__facts dd{margin:6px 0 0;font-size:clamp(1.3rem,2vw,1.9rem);font-weight:750;letter-spacing:-.025em;line-height:1.1}

/* Buttons and links shared by inner pages: the navy glass button from the hero, and the marker-underline text link */
.btn{--fx-shadow:rgba(15,23,42,.5);display:inline-flex;align-items:center;gap:14px;padding:14px 22px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;border-color:rgba(255,255,255,.16)}
.btn::before{opacity:.3}
.btn::after{background:radial-gradient(closest-side,rgba(42,210,201,.55),rgba(42,210,201,0))}
.btn svg{color:#2ad2c9}
.text-link{font-weight:700;color:var(--fg);text-decoration:none;background:linear-gradient(var(--hl),var(--hl)) 0 100%/100% 2px no-repeat;transition:background-size .45s var(--ease),color .3s ease}
.text-link:hover,.text-link:focus-visible{background-size:100% 42%}
@media (prefers-color-scheme:dark){
  .btn{--fx-shadow:rgba(0,0,0,.6);background:var(--fg);color:var(--ink);border-color:rgba(255,255,255,.7)}
  .btn::before{opacity:1}
  .btn::after{background:radial-gradient(closest-side,rgba(42,210,201,.35),rgba(42,210,201,0))}
  .btn svg{color:var(--teal)}
  .text-link:hover,.text-link:focus-visible{background-size:100% 100%;color:var(--ink)}
}

/* Sections: the title on the left, the content from column 5 */
.band{padding:clamp(56px,8vw,130px) var(--gutter)}
.band--soft{background:var(--soft)}
.band--tight{padding-top:0}
.band__head{margin:0 0 clamp(28px,4vw,56px);max-width:16ch;font-size:clamp(2.5rem,5.6vw,5.8rem);color:var(--fg)}
.band__intro{max-width:56ch;margin:0 0 clamp(26px,3vw,44px);font-size:clamp(1.08rem,1.35vw,1.25rem);line-height:1.55}
@media (min-width:721px){
  .split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:start}
  .split>.band__head{grid-column:1/5;margin:0;position:sticky;top:110px;font-size:clamp(2.3rem,4.6vw,4.8rem)}
  .split>:not(.band__head){grid-column:5/-1}
}

/* Rule lists: each item hangs from a hairline, the first from a 3px rule */
.rules{position:relative;margin:0;padding:3px 0 0;list-style:none;border-top:var(--rule)}
.rules>li{max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px 28px;padding:22px 0;border-bottom:1px solid var(--line)}
.rules>li>h3,.rules>li>strong{margin:0;font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:650;letter-spacing:-.02em;line-height:1.2}
.rules>li>p,.rules>li>div{margin:0;font-size:var(--t-body);line-height:1.6}
.rules>li>div>p{margin:0}
.rules>li>div>p+p{margin-top:.75em}
.rules--plain>li{grid-template-columns:1fr}
@media (max-width:720px){.rules>li{grid-template-columns:1fr}}

/* Checklist: short lines that tick, like the estimate facts */
.ticks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ticks li{position:relative;max-width:62ch;padding-left:1.6em;font-size:var(--t-body);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:.7em;height:.32em;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.ticks--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px}
@media (max-width:720px){.ticks--two{grid-template-columns:1fr}}

/* Example: a labeled scenario, never a client result */
.example{position:relative;padding:clamp(24px,3vw,40px);border-radius:20px;background:var(--soft)}
.example__label{display:inline-block;margin:0 0 14px;padding:4px 10px;border-radius:8px;background:var(--chip);font-size:.8rem;font-weight:700;letter-spacing:.02em}
.example h3{margin:0 0 10px;font-size:clamp(1.3rem,1.8vw,1.7rem);letter-spacing:-.025em}
.example p{margin:0;font-size:var(--t-body);line-height:1.6}
.example p+p,.example ol,.example ul{margin-top:.8em}
.examples{display:grid;gap:20px}
@media (min-width:1101px){.examples{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Prices: one line per price, the figure first, marked like the steps */
.price-rows{margin:0;padding:3px 0 0;border-top:var(--rule)}
.price-rows div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 28px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.price-rows dt{margin:0;font-size:clamp(1.25rem,1.8vw,1.7rem);font-weight:750;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.price-rows dd{margin:0;max-width:60ch;font-size:var(--t-body);line-height:1.55}
.price-rows dd strong{display:block;margin-bottom:4px;font-weight:650}
@media (max-width:720px){.price-rows div{grid-template-columns:1fr}}

/* Long reading: guides, policies and terms */
.prose{max-width:60ch;font-size:clamp(1.06rem,.98rem + .3vw,1.18rem);line-height:1.7}
.prose>*{margin-top:0;margin-bottom:0}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:2.2em;font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.prose h3{margin-top:1.8em;font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:650;letter-spacing:-.02em;line-height:1.2}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{max-width:none}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--brand);font-weight:700}
.prose a{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--teal-bright);text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:hover{text-decoration-color:var(--fg)}
.prose strong{font-weight:700}
.prose blockquote{margin-left:0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);font-size:1.08em}
.prose table{width:100%;border-collapse:collapse;font-size:.92em}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:700;border-bottom:var(--rule)}
.prose .table-wrap{overflow-x:auto}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose .note{padding:18px 22px;border-radius:16px;background:var(--soft);font-size:.95em}
.prose .note>*{margin:0}
.prose .note>*+*{margin-top:.6em}
.prose .lead{font-size:1.18em;line-height:1.55;letter-spacing:-.01em}

/* Guide pages: a readable title, the byline, then the text on the column-5 line */
.article-hero{padding:clamp(40px,6vw,90px) var(--gutter) clamp(28px,4vw,56px)}
.article-hero h1{margin:0;max-width:22ch;font-size:clamp(2.4rem,5.4vw,5rem);font-weight:750;letter-spacing:-.035em;line-height:1.02;color:var(--fg)}
.article-hero__lede{max-width:56ch;margin:clamp(18px,2.4vw,28px) 0 0;font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.5}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:clamp(22px,3vw,32px) 0 0;font-size:.92rem}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--chip)}
.byline span{opacity:.8}
.reading{padding:0 var(--gutter) clamp(56px,7vw,110px)}
@media (min-width:1101px){
  .reading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px}
  .reading>.prose{grid-column:5/-1}
  .reading>.toc{grid-column:1/4;grid-row:1;align-self:start;position:sticky;top:110px}
}
.toc{margin:0 0 32px;font-size:.92rem}
.toc p{margin:0 0 10px;font-weight:700}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;border-left:2px solid var(--line)}
.toc a{display:block;padding-left:14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;opacity:.8}
.toc a:hover{opacity:1;border-left-color:var(--teal-bright)}
.author-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;margin-top:2.6em;padding-top:24px;border-top:var(--rule)}
.author-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--chip)}
.author-card p{margin:0;font-size:.98rem;line-height:1.55}
.author-card p+p{margin-top:6px}
.related{margin-top:2.4em}
.related h2{margin:0 0 6px;font-size:1.05rem;letter-spacing:0}

/* Guide index: each guide is one row, title on the column-5 line */
.guide-list{margin:0;padding:3px 0 0;list-style:none;border-top:var(--rule)}
.guide-list li{max-width:none;border-bottom:1px solid var(--line)}
.guide-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;padding:24px 0;text-decoration:none;color:var(--fg)}
.guide-list h2,.guide-list h3{margin:0;font-size:clamp(1.25rem,2vw,1.85rem);font-weight:650;letter-spacing:-.025em;line-height:1.15}
.guide-list p{grid-column:1;margin:0;max-width:62ch;font-size:var(--t-body);line-height:1.5;opacity:.82}
.guide-list svg{grid-column:2;grid-row:1/3;align-self:center;width:22px;height:22px;transition:transform .4s var(--ease)}
.guide-list a:hover h2,.guide-list a:hover h3,.guide-list a:focus-visible h2,.guide-list a:focus-visible h3{text-decoration:underline 2px var(--teal-bright);text-underline-offset:5px}
.guide-list a:hover svg,.guide-list a:focus-visible svg{transform:translateX(6px)}

/* Project records: the figure first, what it was after */
.records{margin:0;padding:3px 0 0;list-style:none;border-top:var(--rule)}
.records>li{max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:14px 28px;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.records b{display:block;font-size:clamp(2.4rem,5vw,4.6rem);font-weight:300;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums}
.records small{display:block;margin-top:8px;font-size:.88rem;font-weight:650;opacity:.78}
.records h3{margin:0 0 8px;font-size:clamp(1.25rem,1.8vw,1.65rem);letter-spacing:-.025em}
.records p{margin:0;font-size:var(--t-body);line-height:1.6}
.records p+p{margin-top:.7em}
@media (max-width:720px){.records>li{grid-template-columns:1fr}}

/* Contact: the estimate card stands alone, the general form sits under it */
.contact-grid{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:1101px){.contact-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px}.contact-grid>.cover__form{grid-column:1/8;grid-row:1}.contact-grid>.contact-aside{grid-column:9/-1}}
.contact-grid .cover__form{grid-column:auto}
.contact-aside{display:grid;gap:28px;align-content:start}
.contact-aside h2{margin:0 0 8px;font-size:clamp(1.25rem,1.6vw,1.5rem);letter-spacing:-.02em}
.contact-aside p{margin:0;font-size:var(--t-body);line-height:1.55}
.contact-aside p+p,.contact-aside p+a{margin-top:12px;display:inline-block}
.msg-form{display:grid;gap:18px;max-width:none;padding:clamp(22px,2.6vw,34px);border-radius:20px;background:var(--soft)}
.msg-form .row{display:grid;gap:18px}
@media (min-width:721px){.msg-form .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.msg-form label{display:block;font-size:.86rem;font-weight:700;letter-spacing:.01em}
.msg-form label span{font-weight:400;opacity:.8}
.msg-form input,.msg-form select,.msg-form textarea{display:block;width:100%;margin-top:6px;padding:10px 0 8px;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;color:inherit;font-size:1.05rem;transition:border-color .25s ease,box-shadow .25s ease}
.msg-form textarea{min-height:140px;resize:vertical;line-height:1.5}
.msg-form select{appearance:none;background:linear-gradient(45deg,transparent 50%,currentColor 50%) calc(100% - 12px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,currentColor 50%) calc(100% - 6px) 55%/6px 6px no-repeat}
.msg-form input:focus,.msg-form select:focus,.msg-form textarea:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 2px 0 var(--fg)}
.msg-form button{justify-self:start}
.msg-form .form-status{margin:0}
.msg-form .form-status:empty{min-height:0}
.msg-form .form-note{margin:0;font-size:.86rem;opacity:.8}
@media (prefers-color-scheme:dark){
  .msg-form .form-status.is-success{color:var(--mint)}
  .msg-form .form-status.is-error{color:#fca5a5}
  .msg-form select option{color:var(--ink)}
}

/* A small notice band, used on the thank-you page and the 404 */
.notice{padding:clamp(40px,7vw,120px) var(--gutter)}
.notice .opener__actions{margin-top:28px}

@media (prefers-reduced-motion:no-preference){
  html.mo :is(.rules,.price-rows,.guide-list,.records)>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
  html.mo :is(.rules,.price-rows,.guide-list,.records).in>*{opacity:1;transform:none}
  html.mo :is(.rules,.price-rows,.guide-list,.records)>:nth-child(2){transition-delay:.07s}
  html.mo :is(.rules,.price-rows,.guide-list,.records)>:nth-child(3){transition-delay:.14s}
  html.mo :is(.rules,.price-rows,.guide-list,.records)>:nth-child(4){transition-delay:.21s}
  html.mo :is(.rules,.price-rows,.guide-list,.records)>:nth-child(n+5){transition-delay:.28s}
  html.mo .opener__lede,html.mo .opener__actions,html.mo .opener__facts,html.mo .article-hero__lede,html.mo .byline{animation:fade-up .9s var(--ease) .45s backwards}
  /* The lede is the largest paint on inner pages: it starts visible at 30% so the browser counts it at first paint, not when the fade ends */
  html.mo .opener__lede,html.mo .article-hero__lede{animation-name:lede-in}
  html.mo .opener__actions{animation-delay:.6s}
  html.mo .opener__facts{animation-delay:.75s}
}

/* ai-operations-audit: the scorecard's 0, 1, 2 choices and the running total */
.score{display:flex;flex-wrap:wrap;gap:10px 24px;margin:14px 0 0;padding:0;border:0;min-width:0}
.score label{display:inline-flex;align-items:center;gap:9px;font-size:.98rem;cursor:pointer}
.score input{flex:none;width:1.15em;height:1.15em;margin:0;accent-color:var(--brand);cursor:pointer}
.score-total{font-weight:650}

/* contact/index.html: the estimate card keeps its place in the contact grid. The shared reset above (grid-column:auto) left it one column wide on desktop, and site.css's grid-row:2 and order:1 put it under the aside on tablet and phone */
.contact-grid>.cover__form{grid-row:auto;order:0;margin-top:0}
@media (min-width:1101px){.contact-grid>.cover__form{grid-column:1/8;grid-row:1}}

/* AI Guides (blog/ai-for-admin-work, ai-can-make-good-workers-faster-and-wrong-answers-faster, ai-productivity-is-not-a-prompt-problem, ai-skills-for-nontechnical-workers, before-you-hire-admin-help, client-onboarding-automation): the related list sits inside .prose, whose list indent and item spacing would push the rows off the rule line */
.prose .guide-list{padding-left:0}
.prose .guide-list li+li{margin-top:0}
/* contact/index.html: the message form's privacy note follows the text color (system.css sets it navy, unreadable in dark mode) */
.msg-form .form-note{color:inherit}

/* AI Guides (how-ai-actually-saves-time-at-work, plain-english-guide-ai-workflow-automation, small-business-ai-audit, team-already-using-ai-no-strategy, the-10-hour-test-ai-automation, what-to-automate-first-service-business): the first heading sits level with "On this page", and the related rows inside .prose keep the guide index weight (the indent fix is in the block above) */
.reading>.prose>:first-child{margin-top:0}
.prose .guide-list a{font-weight:inherit}

/* Launch QA, 2026-11-02 */
@keyframes lede-in{from{opacity:.3;transform:translateY(18px)}}
/* FAQ titles sit in 4 of 12 columns, so the longer inner-page words (QUESTIONS) use the split-band size; split titles keep a gap before their content */
.questions h2{font-size:clamp(2.3rem,4.6vw,4.8rem)}
@media (min-width:721px){.split>.band__head{padding-right:clamp(8px,1.5vw,24px)}}
/* Opener facts: one row per fact on phones, so prices stay on one line with their units */
@media (max-width:560px){
  .opener__facts{grid-template-columns:1fr}
  .opener__facts div,.opener__facts div+div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-left:0;border-bottom:1px solid var(--line)}
  .opener__facts dd{margin:0;text-align:right}
}
/* Phones narrower than 360px: the longest heavy words fit inside the gutters */
@media (max-width:359px){
  .opener h1.display{font-size:2.6rem}
  .profile__copy h2,.feature__head,.questions h2,.band__head{font-size:2.4rem}
}
/* Form fields read as fields: lines at 3:1 or more, and the message box drawn as a box */
.msg-form input,.msg-form select{border-bottom-color:rgba(15,23,42,.5)}
.msg-form textarea{margin-top:8px;padding:10px 12px;border:2px solid rgba(15,23,42,.5);border-radius:12px}
.msg-form textarea:focus{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
@media (prefers-color-scheme:dark){.msg-form input,.msg-form select,.msg-form textarea{border-color:rgba(241,245,249,.45)}}
/* Scorecard choices: drawn radios that read as live in both themes; at tablet width the choices get the full row */
.score input{appearance:none;display:grid;place-content:center;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;opacity:.75}
.score input::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .2s var(--ease)}
.score input:checked{opacity:1;border-color:var(--brand)}
.score input:checked::before{transform:scale(1)}
.score input:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
@media (min-width:721px) and (max-width:1100px){.rules>li:has(.score){grid-template-columns:1fr}}
/* About at tablet width: the portrait stands on the panel instead of sinking into a stretched column */
@media (min-width:721px) and (max-width:1100px){
  .sage--about .profile__photo{align-self:end;min-height:0}
  .sage--about .profile__photo img{position:relative;left:auto;transform:none;display:block;width:100%;max-height:none;margin-inline:auto}
}
/* Space between the opener and a first section that has no top padding of its own */
.opener+.band--tight{padding-top:clamp(56px,8vw,130px)}
.feature+.band--tight{padding-top:clamp(56px,7vw,110px)}
/* Example label: a visible chip on the mint box in light mode */
@media (prefers-color-scheme:light){.note .example__label,.example .example__label{background:rgba(15,23,42,.07)}}
.example ol{padding-left:1.3em}
.example li::marker{color:var(--brand);font-weight:700}
/* Guide tables scroll sideways on phones instead of squeezing, with a shadow on the side that has more */
@media (max-width:560px){
  .prose .table-wrap table{min-width:34rem}
  .prose .table-wrap{background:linear-gradient(90deg,var(--bg) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--bg) 30%,transparent) right/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.2),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.2),transparent) right/12px 100% no-repeat scroll}
}
@media (max-width:560px) and (prefers-color-scheme:dark){.prose .table-wrap{background:linear-gradient(90deg,var(--bg) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--bg) 30%,transparent) right/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.6),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.6),transparent) right/12px 100% no-repeat scroll}}
/* Guide rhythm: a section title sits clear of the first step under it; no one-word last lines in titles and ledes */
.prose h2+h3{margin-top:1em}
.prose h2,.prose h3,.article-hero h1,.opener__lede{text-wrap:balance}
/* Byline on phones: the photo beside the name and date, not above a wrapped line */
@media (max-width:560px){
  .byline:has(img){display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px}
  .byline:has(img) img{grid-row:span 3}
  .author-card{align-items:start}
}
/* Newsletter signup (Buttondown) on the AI Guides index and one guide; the form posts to Buttondown, which confirms by email */
.signup__form{max-width:34rem;margin-top:18px}
.signup__form label{display:block;font-size:.86rem;font-weight:700;letter-spacing:.01em}
.signup__row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:end;margin-top:6px}
.signup__row input{flex:1 1 14rem;min-width:0;padding:10px 0 8px;border:0;border-bottom:2px solid rgba(15,23,42,.55);border-radius:0;background:transparent;color:inherit;font-size:1.05rem;transition:border-color .25s ease,box-shadow .25s ease}
.signup__row input:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 2px 0 var(--fg)}
@media (prefers-color-scheme:dark){.signup__row input{border-bottom-color:rgba(241,245,249,.45)}.signup__row input:focus{border-bottom-color:var(--lime);box-shadow:0 2px 0 var(--lime)}}
.signup--inline{margin-top:2.4em;padding-top:24px;border-top:var(--rule)}
.signup--inline h2{margin:0;font-size:1.05rem;letter-spacing:0}
.signup--inline p{margin:6px 0 0}
/* Inner-page motion to match home: list rules draw across, checklists tick, guide titles rise; nothing moves under reduced motion */
:is(.price-rows,.guide-list,.records){position:relative}
:is(.rules,.price-rows,.guide-list,.records){border-top:0}
:is(.rules,.price-rows,.guide-list,.records)::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--fg);transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  html.mo :is(.rules,.price-rows,.guide-list,.records)::before{transform:scaleX(0);transition:transform 1.3s var(--ease)}
  html.mo :is(.rules,.price-rows,.guide-list,.records).in::before{transform:none}
  html.mo .ticks li{opacity:0;transform:translateX(-16px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
  html.mo .ticks li::before{clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.65,0,.35,1) .3s}
  html.mo .ticks.in li{opacity:1;transform:none}
  html.mo .ticks.in li::before{clip-path:inset(0)}
  html.mo .ticks li:nth-child(2){transition-delay:.08s}html.mo .ticks li:nth-child(3){transition-delay:.16s}html.mo .ticks li:nth-child(n+4){transition-delay:.24s}
}
/* Buttons keep one size inside guide text; Subscribe sits on its field line */
.btn{font-size:1rem}
.signup__row button{margin-bottom:-2px}
/* One chevron style: the select draws the same 2px stroke as the FAQ and the menu */
.msg-form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230f172a' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") right 4px center/12px no-repeat}
@media (prefers-color-scheme:dark){.msg-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23f1f5f9' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E")}}
/* Breadcrumbs on phones: the current page starts its own line instead of a line starting with a chevron */
@media (max-width:560px){.crumbs li[aria-current]{flex-basis:100%}.crumbs li[aria-current]::before{display:none}}
/* Guides end below their own title size */
.reading~.closer h2{font-size:clamp(2.8rem,6.2vw,6.6rem)}
/* The booking button inside the Assessment guarantee card */
.own .btn{margin-top:26px;background:#f1f5f9;color:var(--ink)}
.questions .faq-more{margin:22px 0 0}
/* Guide byline: the name links to About and reads at full strength */
.byline .byline__name{opacity:1}
.byline a{color:inherit;font-weight:650;text-decoration:none}
.byline a:hover,.byline a:focus-visible{text-decoration:underline 2px var(--hl);text-underline-offset:4px}
.signup__note{margin:12px 0 0;font-size:.86rem;opacity:.8}
.signup__note a{color:inherit}
.prose tbody th{font-weight:650;border-bottom:1px solid var(--line)}
.plan-sample{margin-top:24px}