/* staffmor.com v2: every page other than the home page (Iris, 14 October 2026, order 074). The one shared file.
   Loaded after tokens.css and v2.css, which already give each page the lobby, the type, the header, the footer, the
   buttons and the setup form. This file lays out the older pages' own markup in that look and adds no new colours.
   Two grounds, as on the home page:
   1. the lobby (green, the same in both schemes) for titles, selling and the steps of a guide;
   2. the sheet (--paper and --ink, following the visitor's scheme) for what is read closely or filled in: the
      policies, the articles, the plans, the account pages and the setup. */

:root{--white:var(--surface);--forest:var(--btn);--sans:var(--body);--teal:var(--live)} /* names the kept page sheets (order-dialog, onboarding-start, tutorial) still use */

/* ---------- the page ---------- */
.wrap{width:auto;max-width:none;margin-inline:0;padding-inline:var(--gutter)}
main{display:block}
main h1{font-size:clamp(2.5rem,4.6vw,4.25rem);line-height:1;letter-spacing:-.025em}
h1 em,h2 em{font-style:normal;color:var(--cream-2)}
.eyebrow{font:600 var(--t-6)/1.4 var(--body);color:var(--cream-2);margin:0 0 var(--s3)}
main p{max-width:68ch}
main a:not(.button):not(.text-link){color:inherit;text-underline-offset:3px}
.section{padding-block:var(--s8)}
button:disabled{cursor:not-allowed}

/* ---------- the sheet ---------- */
.sheet-ground,.legal-page,.download-main,main:has(>#activation-request),.blog-prose,.blog-cards article,.price-card,.access-inner,.setup-check,.app-route,.after-setup,.onboarding-steps,.tutorial-step blockquote,.route-choices a,.capture-gap,.editor-gap{background:var(--paper);color:var(--ink);border-radius:var(--r-obj);box-shadow:0 0 0 1px var(--frame-edge),var(--sheet-shadow)}
:is(.legal-page,.download-main,main:has(>#activation-request),.blog-prose,.blog-cards article,.price-card,.access-inner,.setup-check,.app-route,.after-setup,.onboarding-steps) :is(p,li,label,legend,dd,dt,td,th,summary,h1,h2,h3){color:inherit}
:is(.legal-page,.download-main,main:has(>#activation-request),.blog-prose,.blog-cards article,.price-card,.setup-check,.app-route,.after-setup,.onboarding-steps) :focus-visible{outline-color:var(--ink)}
:is(.legal-page,.download-main,main:has(>#activation-request),.blog-prose,.blog-cards article,.setup-check,.app-route,.after-setup,.onboarding-steps) .text-link{color:var(--ink);text-decoration-color:var(--muted)}
:is(.legal-page,.download-main,main:has(>#activation-request),.blog-prose,.setup-check,.app-route,.after-setup,.onboarding-steps) .button:not([data-checkout]){border-color:var(--ink);color:var(--ink)}
:is(.legal-page,.download-main,main:has(>#activation-request),.blog-prose,.setup-check,.app-route,.after-setup,.onboarding-steps) .button:not([data-checkout]):hover{background:var(--card)}
#approve,#download-approve{background:var(--btn)!important;color:var(--btn-ink)!important;border-color:var(--btn)!important} /* the page's one filled button, as the office draws its Yes */

/* ---------- the policies, the account pages: one sheet down the middle ---------- */
.legal-page,.download-main,main:has(>#activation-request){width:min(840px,calc(100% - 2 * var(--gutter)));margin:var(--s7) auto var(--s8);padding:var(--s7);overflow-wrap:anywhere}
.download-main,main:has(>#activation-request),.legal-page:has(#account-status){width:min(700px,calc(100% - 2 * var(--gutter)))}
.legal-page h1,.download-main h1,main:has(>#activation-request) h1{font-size:clamp(2.25rem,4vw,3.25rem);line-height:1.02;margin-bottom:var(--s4)}
.legal-page h2,.download-main h2,main:has(>#activation-request) h2{font:800 1.5rem/1.15 var(--display);letter-spacing:-.015em;margin:var(--s6) 0 var(--s3)}
.legal-page p,.download-main p,main:has(>#activation-request) p{font-size:var(--t-5);line-height:1.7;margin-top:var(--s3)}
.legal-page h1+p{color:var(--muted)}
.legal-availability{margin:0 0 var(--s5)!important;padding:var(--s3) var(--s4);background:var(--card);border-radius:var(--r-in);font-size:var(--t-6)!important;color:var(--ink)}
.legal-page .button,.download-main .button,main:has(>#activation-request) .button{min-height:48px;margin-top:var(--s2)}
.legal-page .order-actions{margin-top:var(--s4);max-width:360px;gap:var(--s2)}
.download-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
#owner-sign-in,#activation-request,#download-request{margin-top:var(--s4)}
#move-choice{display:flex;align-items:center;gap:var(--s3);min-height:44px;margin-top:var(--s3)}
#move-choice input{width:22px;height:22px;accent-color:var(--btn)}

/* ---------- the audience pages: the desk, then the plans ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);padding:0 var(--gutter);min-height:min(820px,calc(100svh - var(--top)))}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:conic-gradient(from 94deg at -6% -10%,rgb(var(--lamp) / 0) 0deg,rgb(var(--lamp) / .2) 18deg,rgb(var(--lamp) / .2) 42deg,rgb(var(--lamp) / 0) 62deg,rgb(var(--lamp) / 0) 360deg);-webkit-mask-image:radial-gradient(circle at -6% -10%,#000 0,#000 45%,transparent 100%);mask-image:radial-gradient(circle at -6% -10%,#000 0,#000 45%,transparent 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:calc(var(--desk-top-h) + var(--desk-face-h));border-top:1px solid rgba(255,255,255,.28);background:linear-gradient(90deg,var(--desk-top-2),#3b7d59 52%,#2a6446 80%,var(--desk-top-2)) top/100% var(--desk-top-h) no-repeat,linear-gradient(var(--brass),var(--brass)) 0 var(--desk-top-h)/100% 3px no-repeat,linear-gradient(var(--desk-face),var(--desk-face-2))} /* the counter, as on the home page */
.hero-copy{grid-column:1;grid-row:1;position:relative;z-index:3;align-self:center;padding:var(--s6) 0 calc(var(--desk-top-h) + var(--desk-face-h) + var(--s6))}
.hero-copy h1{font-size:clamp(2.75rem,5vw,4.5rem);line-height:.98}
.hero-description{font-size:var(--t-4);line-height:1.5;margin-top:var(--s5)}
.ethos{font:700 var(--t-4)/1.4 var(--display);color:var(--cream);margin-top:var(--s4)}
.one-office,.curated-value{font-size:var(--t-6);color:var(--cream-2);margin-top:var(--s3)}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.hero-note{margin-top:var(--s4);font-size:var(--t-6);color:var(--cream)}
.hero-note [data-starting-price]{font-weight:700}
.hero-visual{grid-column:2;grid-row:1;position:relative;min-height:600px}
.character-stage{display:none} /* the old site's backdrop; the lamp and the counter take its place */
.staffmor-character{position:absolute;z-index:0;right:4%;bottom:calc(var(--desk-top-h) + var(--desk-face-h) - 290px);height:min(880px,112%);width:auto;max-width:none;filter:brightness(1.05) drop-shadow(28px 34px 26px rgba(2,10,6,.62))}
.hero-team{position:absolute;z-index:2;left:0;bottom:calc(var(--desk-face-h) + var(--desk-top-h) * .55);width:280px;padding:var(--s4) var(--s4) var(--s3);background:var(--paper);color:var(--ink);border-radius:var(--r-obj);box-shadow:0 0 0 1px var(--frame-edge),var(--sheet-shadow)}
.mini-card-heading{display:flex;gap:var(--s2);align-items:baseline;font:800 1.125rem/1.2 var(--display);letter-spacing:-.01em}
.mini-bow{color:var(--copper);font-size:.75rem}
.mini-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.mini-roles span{padding:4px 10px;border-radius:999px;background:var(--card);font:600 var(--t-7)/1.4 var(--body);color:var(--ink)}
.hero-team p{margin-top:var(--s3);font-size:var(--t-7);color:var(--muted)}
.character-caption{position:absolute;z-index:2;right:0;bottom:calc((var(--desk-face-h) - 46px) / 2);padding:9px 16px 10px;background:linear-gradient(var(--plate),var(--plate-2));color:var(--plate-ink);border-radius:var(--r-plate);box-shadow:0 14px 16px -8px rgba(0,0,0,.75),inset 0 1px 0 #fff;line-height:1.2;white-space:nowrap} /* the name plate on the counter */
.character-caption>span{display:block;font:700 1rem/1.15 var(--display);letter-spacing:.02em}
.character-caption p{font-size:var(--t-7);color:#2d4a3c;margin-top:2px}

.audience-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);padding-block:var(--s8) var(--s7)}
.audience-story-grid h2{font-size:clamp(1.625rem,2.2vw,2rem);line-height:1.08}
.audience-story-grid p{margin-top:var(--s4);color:var(--cream)}

.workspace-proof-section{padding-block:0 var(--s8)}
.workspace-proof{margin:0}
.workspace-proof-image{display:block;border-radius:var(--r-in);overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--frame-edge),var(--sheet-shadow)}
.workspace-proof picture,.workspace-proof img{display:block;width:100%;height:auto}
.workspace-proof figcaption{position:static;white-space:normal;margin-top:var(--s3);font-size:var(--t-6);color:var(--cream-2);max-width:68ch} /* v2.css hangs the home page's caption under its counter; here it follows the picture */
.workspace-proof-section .workspace-proof{max-width:1080px}
.workspace-proof .proof-desktop-caption{display:inline}
.workspace-proof .proof-phone-caption{display:none}

.plans-section{background:var(--field-2)}
.section-heading{display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);row-gap:var(--s4);align-items:end;margin-bottom:var(--s6)}
.section-heading h2{font-size:var(--t-2)}
.section-heading>p{grid-column:2;color:var(--cream);max-width:34em}
.plans-section .provider-accounts{margin-bottom:var(--s6)}
.provider-accounts>.text-link{margin-top:var(--s2)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:stretch}
.price-card{display:flex;flex-direction:column;min-width:0;padding:var(--s5) var(--s5) var(--s5)}
.price-card.team-plan{box-shadow:0 0 0 3px var(--folder-2),var(--sheet-shadow)} /* the middle plan, held in the folder's blue */
.plan-kind{font:600 var(--t-7)/1.4 var(--body);color:var(--muted)!important}
.price-card h3{margin-top:var(--s2);font:800 1.75rem/1 var(--display);letter-spacing:-.02em}
.price-card .price{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s4)}
.price-card .price strong{font:800 2.5rem/1 var(--display);letter-spacing:-.025em}
.price-card .price span{font-size:var(--t-6);color:var(--muted)!important}
.seat-count{margin-top:var(--s3);font-weight:600;font-size:var(--t-6);line-height:1.45}
.price-card ul{list-style:none;margin:var(--s4) 0 var(--s5);padding:var(--s4) 0 0;border-top:1px solid var(--line);display:grid;gap:var(--s2);flex:1;font-size:var(--t-6);color:var(--muted)}
.price-card li{display:flex;gap:var(--s2);color:var(--muted)!important}
.price-card li::before{content:"";flex:none;width:6px;height:6px;margin-top:.6em;border-radius:50%;background:var(--live)}
.price-card .button{width:100%;min-height:52px}
.price-card [data-checkout]:disabled{color:var(--muted);border-color:var(--line);background:var(--card)}
.purchase-desktop-note{margin-top:var(--s5);padding-left:var(--s4);border-left:3px solid var(--brass);font-size:var(--t-6);color:var(--cream)}
.purchase-desktop-note a{color:var(--cream)}
.paid-terms p{margin-top:var(--s2);font-size:var(--t-6);color:var(--cream-2)}
.paid-terms p:first-child{margin-top:0}

.faq-section{display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);row-gap:var(--s5);padding-block:var(--s8)}
.faq-section h2{font-size:var(--t-2)}
.faq-list details>p{color:var(--cream)}
.faq-list a{color:var(--cream)}

.access-section{background:var(--field-2);padding:calc(var(--s8) + 14px) 0 var(--s8)}
.access-inner{position:relative;display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);row-gap:var(--s5);margin-inline:calc(var(--gutter) + 14px);padding:var(--s6);box-shadow:0 0 0 14px var(--folder-2),0 0 0 16px var(--folder-3),0 34px 50px -18px rgba(0,0,0,.75)} /* the form is the page inside the blue folder, as on the home page */
.access-inner::before{content:"";position:absolute;top:-46px;right:9%;width:22%;height:34px;background:var(--folder-2);border-radius:8px 8px 0 0}
.setup-welcome{display:grid;gap:var(--s3);align-content:start;min-width:0}
.setup-welcome-mascot{width:150px;height:auto}
.setup-welcome .eyebrow{color:var(--muted);margin:0}
.setup-welcome h2{font-size:var(--t-2);overflow-wrap:anywhere}
.setup-welcome p:not(.eyebrow){font-size:var(--t-4);color:var(--muted)}
.access-inner .interest-details>summary,.access-inner .interest-details label,.access-inner .interest-details .consent{color:var(--ink)}
.access-inner .interest-details input[type=email],.access-inner .interest-details select{border-color:var(--line);background:var(--surface);color:var(--ink);color-scheme:inherit}
.access-inner .interest-details .consent input{accent-color:var(--btn)}
.access-inner .interest-details form>p{color:var(--muted)}
.access-inner .interest-details .button{border-color:var(--ink);color:var(--ink)}
.vs-setup-preview>summary{font:600 var(--t-4)/1.2 var(--body);color:var(--cream);padding-block:var(--s4)}
.vs-setup-preview[open]>summary{padding-bottom:var(--s5)}
.vs-setup-preview{background:var(--field-2);padding-top:var(--s4)}
.audience-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding-block:var(--s5);border-bottom:1px solid rgba(243,236,220,.2)}
.audience-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--cream)}
main>p.wrap{padding-block:var(--s5) var(--s6)}
main>#paid-license.wrap{padding-block:var(--s5);display:grid;gap:var(--s3);justify-items:start;border-top:0;margin-top:0}

/* the footer's theme picker as on every page: onboarding-start.css's 44px controls are for the setup steps */
.onboarding-page .site-footer .theme-options button{min-height:36px}

/* /join/: the plans first */
.join-hero{padding-block:var(--s7) var(--s6)}
.join-hero h1{max-width:16ch}
.join-hero>p:not(.eyebrow){font-size:var(--t-4);margin-top:var(--s4)}
.join-hero>[data-copy-cta]{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;margin-top:var(--s5);border:1.5px solid var(--copper);border-radius:var(--r-btn);text-decoration:none}
.join-hero~.plans-section{padding-top:var(--s7)}
.plans-section:has(+.vs-setup-preview){padding-bottom:var(--s5)}
main>.vs-setup-preview:last-child{padding-bottom:var(--s7)} /* the preview closes the plans section, clear of the footer */

/* ---------- the articles ---------- */
.blog-layout{padding-block:var(--s6) var(--s8)}
.blog-layout>nav[aria-label="Breadcrumb"]{font-size:var(--t-6);color:var(--cream-2);margin-bottom:var(--s5)}
.blog-layout>nav a{color:var(--cream)}
.blog-layout>article,.blog-layout>nav[aria-label="Breadcrumb"]{width:min(880px,100%);margin-inline:auto}
.blog-heading{margin-bottom:var(--s6)}
.blog-heading h1{font-size:clamp(2.5rem,4.4vw,4rem);line-height:1.02;margin:0 0 var(--s4)}
.blog-byline{font-weight:600;color:var(--cream)}
.blog-author-description{font-size:var(--t-6);color:var(--cream-2)}
.blog-prose{padding:var(--s7);font-size:1.125rem;line-height:1.72;overflow-wrap:break-word}
.blog-prose>*+*{margin-top:var(--s4)}
.blog-prose h2{font:800 clamp(1.5rem,2.4vw,1.875rem)/1.15 var(--display);letter-spacing:-.015em;margin-top:var(--s6)}
.blog-prose h2 em{color:var(--live)}
.blog-prose h3{font:700 1.25rem/1.3 var(--body);margin-top:var(--s5)}
.blog-prose>:first-child{margin-top:0}
.blog-prose ul,.blog-prose ol{padding-left:1.4em}
.blog-prose li+li{margin-top:var(--s2)}
.blog-prose a{color:var(--ink);text-decoration-color:var(--copper);text-decoration-thickness:1.5px}
.blog-prose table{display:table;width:100%;border-collapse:collapse;font-size:var(--t-6);line-height:1.5}
.blog-prose th,.blog-prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word;hyphens:auto} /* the tables fit the sheet at every width: nothing to scroll sideways */
.blog-prose th{background:var(--card)}
.blog-prose :is(ul,ol){max-width:68ch}
.blog-prose blockquote{max-width:68ch;margin:var(--s5) 0;padding:var(--s3) var(--s5);border-left:3px solid var(--live);border-radius:0 var(--r-in) var(--r-in) 0;background:var(--card)}
.blog-prose blockquote p{margin:0}
.blog-prose blockquote p+p{margin-top:var(--s3)} /* a quoted email keeps its subject, greeting and paragraphs apart */
.blog-prose code{font-size:.9em;overflow-wrap:anywhere}
.blog-prose img{border-radius:var(--r-in);height:auto}
.blog-prose img[src$="staffmor-blue-folder.webp"]{max-height:360px;width:auto;margin-inline:auto}
.blog-prose .workspace-proof{margin-block:var(--s5)}
.blog-prose .workspace-proof figcaption{color:var(--muted)}
.blog-cta{margin-top:var(--s7)}
.blog-cta h2{font-size:clamp(1.75rem,2.6vw,2.25rem)}
.blog-cta p{margin-top:var(--s3)}
.blog-cta .button{margin:var(--s5) 0 0;background:var(--copper);color:var(--copper-ink);border-color:var(--copper);font-family:var(--display);font-weight:700;font-size:var(--t-5)}
.blog-cta .button:hover{background:var(--copper-hi);border-color:var(--copper-hi)}
.blog-cta .text-link{margin:var(--s5) 0 0 var(--s5)}
.blog-availability{font-size:var(--t-6);color:var(--cream-2)}
.blog-layout>h1{max-width:18ch}
.blog-intro{margin-top:var(--s4);font-size:var(--t-4);color:var(--cream)}
.blog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
.blog-cards article{display:flex;flex-direction:column;padding:var(--s5)}
.blog-cards h2{font:800 1.375rem/1.15 var(--display);letter-spacing:-.01em}
.blog-cards h2 a{text-decoration:none}
.blog-cards h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.blog-cards p{margin-top:var(--s3);font-size:var(--t-6);color:var(--muted)!important;flex:1}
.blog-cards .text-link{align-self:start;margin-top:var(--s2)}

/* ---------- /404 ---------- */
.missing-page{min-height:100dvh;display:flex;flex-direction:column}
.missing-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s6);padding-block:var(--s6)}
.missing-portrait{margin:0;display:flex;justify-content:center}
.missing-portrait img{width:min(100%,460px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(20px 26px 22px rgba(2,10,6,.55))}
.missing-copy h1{font-size:clamp(2.75rem,5vw,4.5rem)}
.missing-message{margin-top:var(--s4);font-size:var(--t-4);color:var(--cream)}
.missing-home{margin-top:var(--s6);gap:var(--s3);background:var(--copper);color:var(--copper-ink);border-color:var(--copper);font-family:var(--display);font-weight:700;font-size:var(--t-5)}
.missing-home:hover{background:var(--copper-hi);border-color:var(--copper-hi)}
.missing-home svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- /start/: the setup, step by step ---------- */
.onboarding{max-width:none;padding-block:0 var(--s8)}
.onboarding>*{max-width:1040px}
.onboarding-intro{padding-block:var(--s7) var(--s6);gap:var(--s6)}
.onboarding-intro h1{font-size:clamp(2.5rem,4.6vw,4.25rem)}
.onboarding-intro p{color:var(--cream)}
.onboarding-intro .onboarding-reassurance{color:var(--cream-2)}
.onboarding-intro img{filter:drop-shadow(20px 26px 22px rgba(2,10,6,.55))}
.setup-check{padding:var(--s5);border:0}
.setup-check h2,.after-setup h2{font:800 1.5rem/1.15 var(--display)}
.onboarding-steps{margin-top:var(--s6);padding:0 var(--s6)}
.onboarding-steps>li{border-bottom-color:var(--line)}
.onboarding-steps>li:last-child{border-bottom:0}
.onboarding-steps .step-number{color:var(--muted);font-weight:700}
.onboarding-steps h2{color:var(--ink)}
.onboarding-steps p,.setup-check p,.after-setup p{color:var(--muted)}
.onboarding-steps :is(strong,b),.setup-check :is(strong,b){color:var(--ink)}
.onboarding-steps textarea,.onboarding pre{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.onboarding-steps details,.setup-check details{border-top-color:var(--line)}
.onboarding-steps summary{color:var(--ink)}
.onboarding .app-choice label{background:var(--surface);color:var(--ink);border-color:var(--line)}
.app-route{box-shadow:0 0 0 1px var(--line)}
.after-setup{border:0}
.onboarding-steps a:not(.button),.setup-check a:not(.button),.after-setup a:not(.button),.app-route a{color:var(--ink)}
.onboarding>details,.onboarding>.setup-options{color:var(--cream)}
.onboarding>details>summary,.onboarding .setup-options>summary{color:var(--cream)}

/* ---------- /tutorial/: the guide on the lobby, what to type on paper ---------- */
.review-state{padding:10px var(--gutter);background:var(--field-deep);color:var(--cream-2);font-size:var(--t-7);text-align:center;border:0}
#tutorial>*{max-width:900px}
#tutorial>.tutorial-intro{max-width:1040px;padding-block:var(--s7) var(--s6)}
.tutorial-intro h1{font-size:clamp(2.5rem,4.6vw,4.25rem)}
.tutorial-intro p{color:var(--cream)}
.tutorial-lead{font-size:var(--t-4)}
.tutorial-guide{filter:drop-shadow(20px 26px 22px rgba(2,10,6,.55))}
.before-start,.tutorial-step,.tutorial-help details{border-color:rgba(243,236,220,.2)}
.before-start h2{font:700 var(--t-4)/1.4 var(--body)}
.step-heading h2,.tutorial-step>h2{font-size:clamp(1.75rem,3vw,2.375rem)}
.step-number{color:var(--cream-2)}
.tutorial-step>p,.provider-route>p,.connection-steps{color:var(--cream)}
.tutorial-step a:not(.route-choices a),.tutorial-help a,.connection-steps a{color:var(--cream)}
.step-result{color:var(--cream)}
.tutorial-step blockquote{border:0;padding:var(--s4) var(--s5);color:var(--ink);font:400 1.125rem/1.55 var(--serif)}
.editor-gap{border:0;color:var(--muted)}
.capture-gap{border:0;color:var(--muted)}
.capture-slot img{border:0;border-radius:var(--r-in);box-shadow:0 0 0 1px var(--frame-edge),var(--sheet-shadow)}
.capture-slot figcaption{color:var(--cream-2)}
.route-choices a{border:0;color:var(--ink);text-decoration:none}
.route-choices a:hover{box-shadow:0 0 0 2px var(--folder-2),var(--sheet-shadow)}
.route-choices span{color:var(--muted)}
.tutorial-help h2{font-size:var(--t-3)}
.tutorial-help summary{display:flex;color:var(--cream)} /* tutorial.css makes it a list item, which squashes the plus mark */
.tutorial-help details p{color:var(--cream)}

/* ---------- laptop and tablet ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:var(--s6) 0 var(--s5)}
  .hero-visual{grid-column:1;grid-row:2;min-height:540px}
  .staffmor-character{right:auto;left:50%;transform:translateX(-30%);height:640px}
  .audience-story-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .section-heading,.faq-section,.access-inner{grid-template-columns:minmax(0,1fr)}
  .section-heading>p{grid-column:1}
  .pricing-grid{grid-template-columns:minmax(0,1fr);max-width:560px}
  .workspace-proof picture,.workspace-proof-image,.workspace-proof figcaption{width:min(100%,390px)}
  .workspace-proof .proof-desktop-caption{display:none}
  .workspace-proof .proof-phone-caption{display:inline}
  .blog-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- the phone ---------- */
@media (max-width:640px){
  main h1{font-size:clamp(2.25rem,10vw,2.75rem)}
  .legal-page,.download-main,main:has(>#activation-request){margin-block:var(--s5) var(--s7);padding:var(--s5)!important}
  .legal-page h1,.download-main h1,main:has(>#activation-request) h1{font-size:2.125rem!important}
  .hero-copy h1{font-size:clamp(2.25rem,10.5vw,2.75rem)}
  .hero-visual{min-height:548px;display:flex;flex-direction:column} /* room for the butler's antenna under the card */
  .hero-team{position:relative;left:auto;bottom:auto;width:min(100%,290px);z-index:2}
  .join-hero>[data-copy-cta]{display:flex;width:100%} /* full width, as the home page's action on a phone */
  .staffmor-character{height:440px;left:auto;right:-24px;transform:none;bottom:calc(var(--desk-top-h) + var(--desk-face-h) - 120px)}
  .character-caption{right:0}
  .section{padding-block:var(--s7)}
  .audience-story-grid{padding-block:var(--s7) var(--s6)}
  .workspace-proof-section{padding-bottom:var(--s7)}
  .faq-section{padding-block:var(--s7)}
  .access-section{padding:calc(var(--s7) + 10px) 0 var(--s7)}
  .access-inner{margin-inline:calc(var(--gutter) + 8px);padding:var(--s5) var(--s4);box-shadow:0 0 0 8px var(--folder-2),0 0 0 10px var(--folder-3),0 24px 40px -18px rgba(0,0,0,.75)}
  .access-inner::before{top:-36px;height:26px}
  .setup-welcome-mascot{width:96px}
  .blog-cards{grid-template-columns:minmax(0,1fr)}
  .blog-prose{padding:var(--s5) var(--s4);font-size:var(--t-5)}
  .blog-prose table{font-size:var(--t-7)}
  .blog-cta .text-link{margin-left:0} /* under the full-width button, in line with it */
  .blog-prose blockquote{padding:var(--s3) var(--s4)}
  .blog-prose th,.blog-prose td{padding:8px 6px}
  .blog-heading h1{font-size:clamp(2.125rem,9.5vw,2.625rem)}
  .missing-main{grid-template-columns:minmax(0,1fr);gap:var(--s4);text-align:center;padding-block:var(--s5) var(--s6)}
  .missing-portrait img{width:clamp(184px,59vw,240px)}
  .missing-message{margin-inline:auto}
  .onboarding-steps{padding:0 var(--s4)}
  .setup-check{padding:var(--s4)}
}