/* staffmor.com v2: the home page (Iris, 14 October 2026). Tokens live in tokens.css. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s5)}
body{margin:0;background:var(--field);color:var(--cream);font:400 var(--t-5)/1.55 var(--body);overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,ul,ol,dl,dd,fieldset{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h2{font-size:var(--t-2)}
h3{font:700 var(--t-3)/1.15 var(--body);letter-spacing:-.005em}
p{text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
[data-resuming=true] [data-price],[data-resuming=true] [data-faq-price]{visibility:hidden}
.skip-link{position:absolute;left:var(--gutter);top:-80px;z-index:50;background:var(--cream);color:var(--field);padding:12px 18px;border-radius:var(--r-in);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
.text-link{display:inline-block;padding:10px 0;color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(243,236,220,.4)}
.text-link:hover{text-decoration-color:var(--copper)}
.label{font:600 var(--t-6)/1.4 var(--body);color:var(--cream-2);margin-bottom:var(--s3)}

/* buttons: the lobby's are ivory; copper is for the action only (selectors, not a class, so the live hooks keep their class) */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border:1.5px solid var(--cream);border-radius:var(--r-btn);background:transparent;color:var(--cream);font:600 var(--t-ui)/1.2 var(--body);text-decoration:none;text-align:center;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.button:hover{background:rgba(243,236,220,.12)}
.button:active{transform:translateY(1px)}
.button-small{min-height:44px;padding:0 18px}
.button:disabled{cursor:wait}
[data-checkout]:disabled{background:transparent;color:var(--cream-2);border-color:rgba(208,116,63,.7);box-shadow:none}
[data-copy-cta],[data-checkout],.order-review .button:not(.order-cancel){background:var(--copper);color:var(--copper-ink);border-color:var(--copper);font-family:var(--display);font-weight:700;font-size:var(--t-5);letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(93,48,28,.35),0 14px 26px -12px rgba(0,0,0,.7)}
[data-copy-cta]:hover,[data-checkout]:hover:not(:disabled),.order-review .button:not(.order-cancel):hover:not(:disabled){background:var(--copper-hi);border-color:var(--copper-hi)}
.order-review .button.order-cancel{border-color:transparent}

/* ---------- header ---------- */
.site-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:0 var(--gutter);min-height:var(--top)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 1.5rem/1 var(--display);letter-spacing:-.01em;padding:10px 0;color:var(--cream)}
.brand-dot{color:var(--cream-3)}
.bow-mark{width:30px;height:24px;flex:none}
.menu-toggle{display:none}
#navigation{display:flex;gap:var(--s5);align-items:center}
#navigation a{font:600 var(--t-ui)/1 var(--body);text-decoration:none;padding:14px 2px;color:var(--cream-2)}
#navigation a:hover{color:var(--cream)}
#navigation .nav-plans{color:var(--field);background:var(--cream);padding:12px 16px;border-radius:var(--r-in)}
#navigation .nav-plans:hover{background:#fff}

/* ---------- 1. the concierge desk ---------- */
.lobby{position:relative;display:grid;grid-template-columns:var(--cols);min-height:calc(100svh - var(--top));max-height:980px;background:var(--field);overflow:hidden}
.words{position:relative;z-index:5;grid-row:1;grid-column:1;padding:var(--s6) var(--s6) calc(var(--desk-top-h) + var(--desk-face-h) + var(--s6)) var(--gutter);align-self:end}
.words h1{font-size:var(--t-1);line-height:.98;letter-spacing:-.025em}
.words .line2{display:block;font:700 clamp(1.375rem,2vw,1.875rem)/1.15 var(--display);color:var(--cream-2);letter-spacing:-.01em;margin-top:var(--s3)}
.lead{font-size:var(--t-4);line-height:1.5;max-width:31em;margin-top:var(--s5)}
.offer-lead{margin-top:var(--s2);font-size:var(--t-4);line-height:1.5;color:var(--cream)} /* the server's line, set as the lead's last sentence */
.cta-row{display:flex;align-items:center;gap:var(--s4) var(--s5);margin-top:var(--s6);flex-wrap:wrap}
.price-line{font-size:var(--t-5);line-height:1.4;color:var(--cream);max-width:17em;text-wrap:balance}
.price-line strong{font-weight:700}

/* the scene: a wall lit from a lamp at the upper left, a counter with a top and a front, the butler behind it,
   the folder standing open on it, his plate beside it */
.scene{position:relative;grid-row:1;grid-column:1 / -1;min-height:600px;isolation:isolate}
.stage{position:absolute;top:0;bottom:0;right:0;left:calc(5 / 12 * 100%)}
.lamp{position:absolute;inset:0;z-index:0;background:conic-gradient(from 94deg at -6% -10%,rgb(var(--lamp) / 0) 0deg,rgb(var(--lamp) / .24) 18deg,rgb(var(--lamp) / .24) 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%)}
.butler-layer{position:absolute;z-index:1;right:calc(var(--gutter) - 40px);bottom:calc(var(--desk-face-h) - 70px);height:86%;animation:step-in .9s cubic-bezier(.2,.7,.2,1) both}
.butler{height:100%;width:auto;filter:brightness(1.05) drop-shadow(28px 34px 26px rgba(2,10,6,.62));transform-origin:50% 100%}
.nw{white-space:nowrap}
.desk{position:absolute;z-index:2;left:0;right:0;bottom:0;height:calc(var(--desk-top-h) + var(--desk-face-h))}
.desk-top{position:absolute;left:0;right:0;top:0;height:var(--desk-top-h);background:linear-gradient(90deg,var(--desk-top-2),#3b7d59 52%,#2a6446 80%,var(--desk-top-2));border-top:1px solid rgba(255,255,255,.28);box-shadow:inset 0 -8px 12px -8px rgba(0,0,0,.4)}
.desk-face{position:absolute;left:0;right:0;top:var(--desk-top-h);bottom:0;border-top:3px solid var(--brass);background:repeating-linear-gradient(90deg,transparent 0 238px,rgba(0,0,0,.16) 238px 240px,rgba(255,255,255,.04) 240px 241px),linear-gradient(var(--desk-face),var(--desk-face-2));box-shadow:inset 0 14px 16px -12px rgba(0,0,0,.55)}
.plate{position:absolute;z-index:4;right:var(--gutter);bottom:calc((var(--desk-face-h) - 46px) / 2);margin:0;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}
.plate strong{display:block;font:700 1rem/1.15 var(--display);letter-spacing:.02em}
.plate span{display:block;font-size:var(--t-7);color:#2d4a3c;margin-top:2px}

/* the folder: a board with a spine and thickness, the office on its right leaf, the cover swung open to the left */
.folder{position:absolute;z-index:3;left:20%;bottom:calc(var(--desk-face-h) + 6px);height:min(55%,520px);aspect-ratio:3/4;margin:0;perspective:3600px;transform-style:preserve-3d}
.folder-body{position:absolute;inset:0;background:linear-gradient(100deg,var(--folder-2),#4a9bd3);border-radius:4px var(--r-obj) var(--r-obj) 4px;box-shadow:0 28px 30px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.folder-body::after{content:"";position:absolute;left:3px;right:-5px;bottom:-6px;height:6px;background:var(--folder-3);border-radius:0 0 var(--r-obj) 4px;box-shadow:0 1px 0 rgba(0,0,0,.3)}
.folder-spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,var(--folder-3),#4a9bd3);border-radius:4px 0 0 4px;box-shadow:inset -1px 0 0 rgba(0,0,0,.18)}
.folder-tab{position:absolute;top:-7%;right:9%;width:36%;height:9%;background:var(--folder-2);border-radius:6px 6px 0 0;z-index:-1}
.cover{position:absolute;z-index:6;inset:0;transform-origin:0 50%;transform-style:preserve-3d;backface-visibility:hidden;border-radius:4px var(--r-obj) var(--r-obj) 4px;background:linear-gradient(100deg,#8fd0f6,var(--folder));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset -2px 0 0 rgba(0,0,0,.08);display:grid;place-items:center;transform:rotateY(-118deg)}
.cover.opening{animation:open 1.15s cubic-bezier(.3,.6,.2,1) .7s both} /* played once by v2.js; the resting state is open, so no-JS and every re-render show the office */
.cover svg{width:26%;height:auto;color:#4a9bd3;opacity:.55}
.cover-in{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:linear-gradient(80deg,var(--folder-in),#a6d9f8);border-radius:var(--r-obj) 4px 4px var(--r-obj);box-shadow:inset 2px 0 0 rgba(0,0,0,.08);overflow:hidden}
.cover-in::after{content:"";position:absolute;inset:0;background:linear-gradient(80deg,#8fcbf2,#9fd3f5);clip-path:polygon(0 58%,100% 100%,0 100%);box-shadow:0 -1px 0 rgba(0,0,0,.1)}
.folder-cap{position:absolute;z-index:4;left:20%;bottom:calc(var(--desk-face-h) / 2 - .7em);margin:0;font-size:var(--t-6);line-height:1.4;color:var(--cream-2);white-space:nowrap}

/* the office on the folder's leaf: the product's phone page, drawn in HTML at a 13 px floor; follows the scheme */
.office{position:absolute;inset:4.5% 5% 5% 6.5%;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink);border-radius:5px;font:400 13px/1.4 var(--body);box-shadow:0 1px 0 rgba(0,0,0,.2),0 10px 22px -10px rgba(0,0,0,.6);text-align:left}

.o-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 0}
.o-title{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif);font-size:19px;letter-spacing:-.01em;line-height:1.1}
.o-hash{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 12px var(--body)}
.o-pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;margin-left:auto}
.o-pill .chev{color:var(--muted);font-weight:400}
.o-history{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px}
.o-history svg{width:14px;height:14px}
.o-tabs{display:flex;padding:8px 12px 0;border-bottom:1px solid var(--line-soft)}
.o-tabs span{flex:1;text-align:center;padding:8px 0 9px;font-weight:600;color:var(--muted);position:relative;white-space:nowrap}
.o-tabs .is-on{color:var(--ink)}
.o-tabs .is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;margin-left:6px;vertical-align:1px;transition:opacity .3s,transform .3s}
.o-feed{flex:1;min-height:0;overflow:hidden;position:relative}
.o-feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--paper) 85%);pointer-events:none}
.post{padding:12px 12px 10px;border-bottom:1px solid var(--line-soft)}
.post header{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:7px;min-width:0}
.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--card);color:var(--ink);font:700 12px var(--body);font-style:normal;letter-spacing:.01em;border:1px solid var(--line)}
.post header b{font-weight:700;white-space:nowrap}
.post header .meta{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.post header time{color:var(--muted);font-size:12px;white-space:nowrap;grid-column:4}
.quote{margin:5px 0 0 33px;padding-left:8px;border-left:2px solid var(--line);color:var(--muted);font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.body{margin:6px 0 0 33px;font-size:14px;line-height:1.4}
.delivered{margin:4px 0 0 33px;font-size:12px;color:var(--muted)}
.post-actions{display:flex;gap:14px;margin:9px 0 0 33px;font-size:13px;font-weight:600;color:var(--muted)}
.q{margin:8px 0 0 33px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-in);padding:0 11px}
.fold{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out,transform .45s cubic-bezier(.2,.8,.2,1)}
.fold-in{overflow:hidden;min-height:0}
.q-pad{padding:10px 0 11px}
.q-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.q-question{margin:5px 0 0;font-family:var(--serif);font-size:16px;line-height:1.3;letter-spacing:-.01em}
.q-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.qb{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 13px/1 var(--body);white-space:nowrap;cursor:default}
.qb-yes{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);cursor:pointer;transition:transform .12s}
.qb-yes:active{transform:scale(.96)}
.qb-yes:focus-visible{outline-color:var(--ink)}
.q-answer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:0;font-size:13px}
.q-answer span{white-space:nowrap}
.q-answer b{font-weight:700;white-space:nowrap}
.q-answer span{color:var(--muted)}
.q-answer:focus{outline:none}
.chk{width:16px;height:16px;flex:none;color:var(--live)}
.post-ship{padding:0 12px;border-bottom:0}
.ship-pad{padding:12px 0 10px;border-bottom:1px solid var(--line-soft)}
.ship-label{margin:6px 0 0 33px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ship-title{margin:3px 0 0 33px;font-family:var(--serif);font-size:15px;line-height:1.3;letter-spacing:-.01em}
.composer{padding:8px 12px 10px;border-top:1px solid var(--line-soft);position:relative;background:var(--paper)}
.composer .to{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.composer .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:22px;padding:4px;background:var(--surface)}
.skills{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;border-radius:15px;background:#935033;color:#fff;font-weight:700;font-size:12px;white-space:nowrap}
.ph{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.plus{font-size:18px;line-height:1;color:var(--muted);padding:0 2px}
.send{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--muted);color:var(--paper);flex:none}
.send svg{width:14px;height:14px}

/* the status dot, as the product draws it: hollow = not working, ink = needs you, teal and blinking = working */
.dot{position:relative;display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;flex:none;vertical-align:-1px;transition:background .3s,border-color .3s}
.dot .pulse{position:absolute;inset:-1.5px;border-radius:50%;background:var(--live-bright);opacity:0;transform:scale(0)}
.office[data-state="waiting"] .o-pill .dot{background:var(--ink);border-color:var(--ink)}
.office:not([data-state="waiting"]) .o-pill .dot{background:var(--live);border-color:var(--live)}
.office:not([data-state="waiting"]) .o-pill .pulse{transform:scale(1);animation:blink 1.4s ease-in-out infinite}
.office:not([data-state="waiting"]) .badge{opacity:0;transform:scale(.5)}
.office:not([data-state="waiting"]) .q-wait{grid-template-rows:0fr;opacity:0}
.office[data-state="waiting"] .q-done,.office:not([data-state="shipped"]) .post-ship{grid-template-rows:0fr;opacity:0}
.office:not([data-state="shipped"]) .post-ship{transform:translateY(-8px)}
.office:not([data-state="waiting"]) .q-done{grid-template-rows:1fr;opacity:1}
.office[data-state="shipped"] .post-ship{grid-template-rows:1fr;opacity:1;transform:none}
.office:not([data-state="waiting"]) .q-wait .qb-yes{visibility:hidden}

/* ---------- the sections after the lobby: words left, the thing right ---------- */
.stop{display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);row-gap:var(--s6);padding:var(--s8) var(--gutter);background:var(--field);align-items:start}
.office-beyond{background:var(--field-2)}
.say{max-width:34em}
.say>p{margin-top:var(--s5);color:var(--cream)}
.say h3{margin-top:var(--s6)}
.say h3+p{margin-top:var(--s3)}
.show{min-width:0}
.wide{grid-template-columns:minmax(0,1fr)}
.wide>.say{max-width:none;display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);align-items:end;position:static}
.wide>.say>h2{grid-column:1}
.wide>.say>p{grid-column:2;margin-top:0;max-width:34em}
#workspace .after{max-width:46em}
#workspace.wide>.say{display:block}
#workspace.wide>.say>p{margin-top:var(--s4)}
#workspace.wide>.say>h2{max-width:24ch}
.after{margin-top:var(--s5);max-width:38em}

/* ---------- 2. where a job stands: the butler presents the Tasks rows ---------- */
.presenter{height:440px;width:auto;max-width:none;filter:drop-shadow(-22px 26px 26px rgba(2,10,6,.55))} /* max-width:none: a fixed height with the default max-width:100% squeezed him to his column, a stretched Staffmor */
.presenter-phone{display:none}
.desk-row{display:grid;grid-template-columns:minmax(0,860px) minmax(0,1fr);column-gap:var(--s6);align-items:stretch}
.proof{margin:0;min-width:0}
.aside{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-width:0}
.aside .after{margin-top:calc(var(--t-6) * 1.55 + var(--s3))} /* level with the Tasks frame's top */
.aside .text-link{margin-bottom:var(--s5)}
.frame{display:block;padding:6px;background:var(--plate);border-radius:var(--r-obj);box-shadow:0 30px 50px -24px rgba(0,0,0,.8)}
.proof .frame{padding:0;background:none;box-shadow:0 2px 0 rgba(0,0,0,.25),0 12px 16px -12px rgba(0,0,0,.7);border-radius:var(--r-in) var(--r-in) 0 0}
.proof .tasks-sheet{border-radius:var(--r-in) var(--r-in) 0 0}
/* one counter rule for the page: a lit top face, a brass edge, a lacquered front, full bleed */
.counter{justify-self:start;width:100vw;margin-left:calc(-1 * var(--gutter));height:calc(var(--desk-top-h) * .7 + 3px + 30px);background:linear-gradient(90deg,var(--desk-top-2),var(--desk-top) 45%,var(--desk-top-2)) top/100% calc(var(--desk-top-h) * .7) no-repeat,linear-gradient(var(--brass),var(--brass)) 0 calc(var(--desk-top-h) * .7)/100% 3px no-repeat,linear-gradient(var(--desk-face),var(--desk-face-2));border-top:1px solid rgba(255,255,255,.25);box-shadow:0 24px 24px -16px rgba(0,0,0,.6)}
.proof-desk{grid-column:1 / -1}
.frame img{border-radius:var(--r-in);width:100%;height:auto}
.proof .frame{grid-column:1}
.presenter-desk{margin-bottom:-14px;position:relative;z-index:1}
.proof figcaption{margin:0 0 var(--s3);font-size:var(--t-6);color:var(--cream-2)}
.tasks-sheet{box-shadow:0 0 0 1px var(--frame-edge);background:var(--paper);color:var(--ink);border-radius:var(--r-in);font:400 14px/1.45 var(--body);padding:0 0 4px}
.t-head{padding:14px 20px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.tasks{list-style:none;margin:0;padding:0}
.task{padding:18px 20px 20px;border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:0}
.task header{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:8px;font-size:13px;color:var(--muted)}
.task header b{font-weight:700;font-size:14px;color:var(--ink)}
.task header time{font-size:12px;white-space:nowrap}
.task .ship-label,.task-title,.task .track,.task-q,.task-note,.task-actions{margin-left:34px}
.task .ship-label{margin-top:8px;font-size:12px}
.task-title{margin-top:8px;font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}
.track-done{grid-template-columns:repeat(3,1fr)}
.track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:7px;height:2px;background:var(--line)}
.track::after{content:"";position:absolute;left:12.5%;width:50%;top:7px;height:2px;background:var(--ink)}
.track-done::before,.track-done::after{left:16.66%;right:16.66%;width:auto}
.stop-pt{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--muted);position:relative;text-align:center}
.stop-pt i{position:relative;display:block;width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);background:var(--paper)}
.stop-pt.is-done i{background:var(--ink);border-color:var(--ink)}
.stop-pt.is-now{color:var(--ink);font-weight:700}
.stop-pt.is-now i{background:var(--ink);border-color:var(--ink);transform:scale(1.2)}
.stop-pt.is-live i{background:var(--live);border-color:var(--live)}
.stop-pt.is-live i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--live);animation:beat 1.6s ease-out infinite}
.task-q{margin-top:16px;font-size:14px;color:var(--ink)}
.task-note{margin-top:14px;font-size:14px;color:var(--ink);max-width:68ch}
.task-actions{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:13px;font-weight:600;color:var(--muted)}
.task-actions .qb{cursor:default}

/* ---------- 3. the team: the org chart that runs ---------- */
.launch-h{font-size:var(--t-4)}
.team-head{grid-column:1}
.team-head p:last-child{margin-top:var(--s4)}
.team-launch{grid-column:2;max-width:34em}
.team-launch p{margin-top:var(--s3)}
.team .org{max-width:none}
#team,#workspace{padding-bottom:0}
#team{row-gap:var(--s5);overflow-x:clip}
.stop{overflow-x:clip}
.org{margin:0}
.chart{position:relative;container-type:inline-size;font-family:var(--body)}
.edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.edges path{fill:none;stroke:var(--cream-3);stroke-width:1.5}
.edges .dash{stroke-dasharray:4 5}
.edges .row{stroke:var(--cream);stroke-width:2}
.bead circle{fill:var(--cream);stroke:var(--field);stroke-width:2}
.bead{transform:translate(86px,84px)}
.nodes{list-style:none;margin:0;padding:0}
.node{position:relative;display:flex;flex-direction:column;gap:4px;padding-top:var(--s3)}
.node::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cream);transform-origin:left center}
.role{font:700 1.125rem/1.15 var(--body);letter-spacing:-.005em;color:var(--cream)}
.job{font-size:var(--t-7);line-height:1.4;color:var(--cream)}
.hand{font-size:var(--t-7);line-height:1.4;color:var(--cream-2)}
.state{position:relative;display:block;font:600 var(--t-7)/1.4 var(--body);min-height:1.4em;margin-top:2px;color:var(--cream)}
.st{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.st.live{position:absolute;left:0;top:0;opacity:0}
.st .dot{border-color:var(--cream-2)}
.st .dot.on{background:var(--cream-2);border-color:var(--cream-2)}
.st .live-dot{background:#7fd8c6;border-color:#7fd8c6}
.needs{background:var(--plate);color:var(--plate-ink);padding:1px 8px;border-radius:3px;border:1px solid transparent}
.key{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-7);color:var(--cream-2)}
.key i{width:22px;border-top:1.5px dashed var(--cream-3)}
.bead-phone{display:none}
.honest{margin-top:var(--s4);font-size:var(--t-7);line-height:1.5;color:var(--cream-2)}
@media (min-width:1200px){
  .chart{aspect-ratio:700/230}
  .node{position:absolute;left:calc(var(--x) / 700 * 100%);top:calc(var(--y) / 230 * 100%);width:calc(172 / 700 * 100%)}
  .role{font-size:clamp(1.1rem,2.1cqw,1.5rem)}
  .n-mk::before,.n-rv::before,.n-en::before,.n-pr::before{display:none}
  .n-staffmor .key{position:absolute;right:calc(100% + 0px);top:-.75em;width:calc(356 / 172 * 100%);justify-content:center;background:none}
  .n-staffmor .key i{display:none}
  .n-staffmor .key{padding:0;color:var(--cream-2)}
  .n-staffmor .key::before{content:"";position:absolute;inset:0 30%;background:var(--field);z-index:-1}
}
@media (max-width:1199px){
  .edges{display:none}
  .chart{--rh:112px;padding-left:28px}
  .chart::before{content:"";position:absolute;left:6px;top:44px;bottom:calc(var(--rh) - 44px);width:1.5px;background:var(--cream-3)}
  .nodes{position:relative}
  .node{height:var(--rh);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"role state" "job job" "hand hand";align-content:start;column-gap:var(--s3);row-gap:3px;padding-top:var(--s3)}
  .node::after{content:"";position:absolute;left:-22px;top:43px;width:16px;height:1.5px;background:var(--cream-3)}
  .n-staffmor::after{background:repeating-linear-gradient(90deg,var(--cream-3) 0 3px,transparent 3px 6px)}
  .role{grid-area:role}
  .job{grid-area:job}
  .hand{grid-area:hand}
  .state{grid-area:state;justify-self:end;margin-top:0}
  .st.live{left:auto;right:0}
  .key{grid-area:hand}
  .bead-phone{display:block;position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--field);transform:translate(0,37px)}
}

/* the lobby's figures: seven Staffmors with an interest, standing on a long counter */
.yourself{grid-column:1 / -1;margin-top:var(--s6)}
.figures{list-style:none;margin:var(--s6) calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);display:flex;gap:var(--s4);align-items:flex-end;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);position:relative;scrollbar-width:thin}
.figures li{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.figures img{width:auto;filter:drop-shadow(10px 14px 12px rgba(2,10,6,.55))}
.figures span{font:600 var(--t-6)/1.2 var(--body);color:var(--cream)}
.long-desk{margin:0 calc(-1 * var(--gutter));padding:calc(var(--desk-top-h) * .65 + 3px + var(--s4)) var(--gutter) var(--s5);background:linear-gradient(90deg,var(--desk-top-2),var(--desk-top) 40%,var(--desk-top-2)) top/100% calc(var(--desk-top-h) * .65) no-repeat,linear-gradient(var(--brass),var(--brass)) 0 calc(var(--desk-top-h) * .65)/100% 3px no-repeat,linear-gradient(var(--desk-face),var(--desk-face-2));border-top:1px solid rgba(255,255,255,.2)}
.audience-links{display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap}
.audience-links a{min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--cream);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(243,236,220,.4)}
.audience-links a:hover{text-decoration-color:var(--copper)}

/* ---------- 4. on your computer ---------- */
.steps-show{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-items:center}
.setup>.say:not(.wide-say){display:block}

.setup>.say h2{max-width:30ch}
.setup .steps-show{grid-column:1 / -1}
.setup .steps-show{grid-template-columns:minmax(0,1fr)}
@media (min-width:1001px){.setup .steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s6)}}
#setup{padding-bottom:0}
.stop.setup{grid-template-columns:minmax(0,1fr) auto}
.setup>.say:not(.wide-say),.setup .steps-show,.setup-preview{grid-column:1 / -1}
.setup>.data-say{display:block;grid-column:1;align-self:start;padding-bottom:var(--s6)}
.setup>.data-say h3{margin-top:var(--s5)}
.setup>.data-say>p{grid-column:auto;margin-top:var(--s3)}
.setup .workspace-proof.show{grid-column:2;position:relative;justify-self:start}
.workspace-proof .frame{width:390px;max-width:100%}
.workspace-proof figcaption{position:absolute;left:0;top:calc(100% + var(--desk-top-h) * .7 + 3px + 6px);margin:0;white-space:nowrap;z-index:1}
.setup-desk{grid-column:1 / -1;margin-top:calc(-1 * var(--s6));height:calc(var(--desk-top-h) * .7 + 3px + 46px)}
.setup .workspace-proof figcaption{top:calc(100% + var(--desk-top-h) * .7 + 3px + 12px)}
.thumbs{height:220px;width:auto;filter:drop-shadow(16px 20px 18px rgba(2,10,6,.55))}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.steps a{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;font:600 var(--t-4)/1.2 var(--body);color:var(--cream);text-decoration:none}
.steps a:hover{text-decoration:underline;text-underline-offset:5px}
.steps span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--plate);color:var(--plate-ink);font:700 var(--t-6)/1 var(--body)}
.setup-preview{grid-column:1 / -1}
.setup-preview>summary{font:600 var(--t-4)/1.2 var(--body);color:var(--cream);max-width:34em}
details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--s3);list-style:none;font-weight:600}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/8px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 8px no-repeat}
details[open]>summary::before{background:linear-gradient(currentColor,currentColor) center/8px 1.5px no-repeat}
.sheet{position:relative;margin:calc(var(--s6) + 14px) 14px 14px;background:var(--paper);color:var(--ink);border-radius:var(--r-obj);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);padding:var(--s6);display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);row-gap:var(--s5)}
.sheet :focus-visible{outline-color:var(--ink)}
.sheet::before{content:"";position:absolute;top:-46px;right:9%;width:22%;height:34px;background:var(--folder-2);border-radius:8px 8px 0 0} /* the folder's tab: the form is the page inside the blue folder */
.access-welcome{display:grid;gap:var(--s4);align-content:start}
.waver{height:200px;width:auto}
.access-welcome h2{font-size:var(--t-2);overflow-wrap:anywhere}
.access-welcome p{margin-top:var(--s2);font-size:var(--t-4);color:var(--muted)}
.access-form{min-width:0}
.access-form p,.access-form legend,.access-form label{font-size:var(--t-6);line-height:1.55;color:var(--muted)}
.setup-data-notice{margin-bottom:var(--s4)}
.access-form a{color:var(--ink)}
.access-form form{display:grid;gap:var(--s3)}
.access-form h3{font-size:var(--t-4);margin-top:var(--s3)}
.access-form .button{border-color:var(--ink);color:var(--ink);min-height:48px}
.access-form .button:hover{background:var(--card)}
.access-form .button:focus-visible{outline-color:var(--ink)}
.quick-choices{display:grid;gap:var(--s2);margin-top:var(--s2)}
.quick-choices label,.consent{display:flex;align-items:center;gap:var(--s3);min-height:44px}
.access-form .quick-choices label{color:var(--ink)}
.access-form .quick-choices label{display:flex;margin-top:0}.access-form .consent{display:flex} /* the form's own label rule below would stack the box over its words */
.quick-choices input,.consent input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--btn)}
.access-form details{margin-top:var(--s2)}
.access-form details>summary{color:var(--ink)}
.access-form fieldset{border:0;padding:0;margin:var(--s3) 0}
.access-form legend{margin-bottom:var(--s2);color:var(--ink)}
.access-form label{display:block;margin-top:var(--s3);color:var(--ink);font-weight:600}
.access-form label span,.access-form legend span{font-weight:400;color:var(--muted)}
.access-form select,.access-form textarea,.access-form input[type=email]{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-in);background:var(--surface);color:var(--ink);font:inherit;margin-top:var(--s2)}
.access-form textarea{min-height:72px;resize:vertical}
#setup-role-list{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:var(--s2);font-size:var(--t-6)}
#setup-role-list li{padding:10px 12px;background:var(--card);border-radius:var(--r-in);color:var(--ink)}
.form-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
#new-assistant{margin-top:var(--s3);padding:var(--s4);background:var(--card);border-radius:var(--r-in)}
#new-assistant .text-link{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration-color:var(--line)}
#setup-status,#interest-status{min-height:1.5rem;color:var(--ink)}
#saved-setup{margin-top:var(--s5);padding:var(--s5);background:var(--card);border-radius:var(--r-in);display:grid;gap:var(--s3)}
#saved-setup .button,#saved-setup a.button{border-color:var(--ink);color:var(--ink)}
.resume-link{display:block;overflow-wrap:anywhere;font-size:var(--t-6);color:var(--ink)}
.data-say .desktop-requirement{margin-top:0;font-weight:600;color:var(--cream-2)}
.wide-say{max-width:34em;position:static}
.wide-say>.desktop-requirement{font:600 var(--t-4)/1.45 var(--body);color:var(--cream)}
.data-say h3{margin-top:var(--s6)}
.workspace-proof{margin:0;align-self:start}
.workspace-proof .frame{display:block;text-decoration:none;padding:0;background:none;box-shadow:0 -1px 0 rgba(255,255,255,.08);border-radius:var(--r-in) var(--r-in) 0 0;overflow:hidden}
.workspace-proof .frame img{border-radius:0}
.workspace-proof .frame{outline:1px solid var(--frame-edge)}
.workspace-proof figcaption{margin-top:var(--s3);font-size:var(--t-6);color:var(--cream-2)}
.proof-desktop-caption{display:none} /* the capture is the phone view at every width, so its caption is the phone one */

/* ---------- 5. the plans: comparison rows ---------- */
.plan-rows{border-top:2px solid rgba(243,236,220,.5)}
.plan{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr) 7.5rem 12.5rem;align-items:center;column-gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid rgba(243,236,220,.2)}
.plan h3{font:800 1.625rem/1 var(--display);letter-spacing:-.02em}
.plan .seats{font-size:var(--t-6);color:var(--cream-2);line-height:1.45}
.plan .cost{text-align:right}
.plan .cost strong{display:block;font:800 1.75rem/1 var(--display);letter-spacing:-.02em;color:var(--cream)}
.plan .cost span{display:block;font-size:var(--t-7);color:var(--cream-2);margin-top:3px;white-space:nowrap}
.plan .button{min-height:46px;white-space:nowrap;font-size:var(--t-ui);justify-self:stretch}
.plan-after{display:grid;grid-template-columns:var(--cols);column-gap:var(--s6);margin-top:var(--s6);align-items:start}
.plan-terms .shared{margin-top:.3em}
.plan-terms{min-width:0}
.shared{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:var(--t-6);color:var(--cream-2)}
.shared li{display:inline-flex;align-items:center;gap:8px}
.shared li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cream-3);flex:none}
.seat-explanation{margin-top:var(--s4);font-size:var(--t-6);color:var(--cream-2)}
.launch-status{margin-top:var(--s4);min-height:1.5rem;font-size:var(--t-6);color:var(--cream)}
.launch-status:empty{display:none}
#join-previous{margin-top:var(--s4);padding:var(--s4);border:1px solid rgba(243,236,220,.25);border-radius:var(--r-in);display:grid;gap:var(--s3);justify-items:start}
.paid-terms{margin-top:var(--s4);font-size:var(--t-6);color:var(--cream-2);max-width:68ch}
.provider-accounts{max-width:68ch;overflow-wrap:anywhere}
.provider-accounts h3{margin-top:-.15em}
.provider-accounts p{margin-top:var(--s3);font-size:var(--t-6);color:var(--cream-2)}
.provider-accounts h3+p{color:var(--cream);font-size:var(--t-5)}
.provider-accounts ul{margin:var(--s3) 0 0;padding-left:1.2em;font-size:var(--t-6);color:var(--cream)}
.provider-accounts li+li{margin-top:var(--s2)}
.provider-accounts a{color:var(--cream);padding-block:3px}
#paid-license{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(243,236,220,.2);display:grid;gap:var(--s3);justify-items:start}
.interest-details{margin-top:var(--s5);max-width:34em}
.interest-details form{display:grid;gap:var(--s2);margin-top:var(--s3)}
.interest-details label{font-weight:600;margin-top:var(--s2)}
.interest-details input[type=email],.interest-details select{width:100%;min-height:48px;padding:10px 12px;border:1px solid rgba(243,236,220,.4);border-radius:var(--r-in);background:rgba(255,255,255,.06);color:var(--cream);font:inherit;color-scheme:dark}
.interest-details .consent{font-weight:400;color:var(--cream)}
.interest-details .consent input{accent-color:var(--copper)}
.interest-details .button{justify-self:start;margin-top:var(--s2)}
.interest-details form>p{font-size:var(--t-6);color:var(--cream-2)}
.honeypot{position:absolute;left:-10000px}
.honeypot input{width:24px;height:24px}

/* ---------- 6. good questions ---------- */
.faq-list{display:grid;border-top:1px solid rgba(243,236,220,.2);max-width:none}
.faq-list p{max-width:46em}
.faq-list details{border-bottom:1px solid rgba(243,236,220,.2);padding:var(--s2) 0}
.faq-list summary{font:600 var(--t-4)/1.35 var(--body);color:var(--cream);padding:var(--s3) 0}
.faq-list p{padding:0 0 var(--s4) 30px;max-width:38em;color:var(--cream)}

/* ---------- 7. the foot ---------- */
.site-footer{background:var(--field);border-top:1px solid rgba(243,236,220,.15);padding:var(--s7) var(--gutter) var(--s6);color:var(--cream-2);font-size:var(--t-6)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--s6);align-items:start}
.footer-brand-block{display:grid;gap:var(--s1);justify-items:start}
.site-credit a{color:var(--cream);display:inline-flex;align-items:center;min-height:44px}
.membership{color:var(--cream-2)}
.footer-navigation{display:grid;gap:var(--s2)}
.legal-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.legal-links a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px;color:var(--cream)}
.social-links{display:flex;gap:var(--s2)}
.social-links a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,236,220,.3);color:var(--cream)}
.social-links svg{width:20px;height:20px;fill:currentColor}
.social-links a:hover{background:rgba(243,236,220,.1)}
.theme-picker{display:grid;gap:var(--s2);justify-items:start}
.theme-label{font-weight:600;color:var(--cream)}
.theme-options{display:inline-flex;border:1px solid rgba(243,236,220,.3);border-radius:var(--r-btn);padding:3px;gap:2px}
.theme-options button{min-height:36px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--cream);font:600 var(--t-6)/1 var(--body);cursor:pointer}
.theme-options button[aria-pressed=true]{background:var(--cream);color:var(--field-deep)}
.footer-disclaimers{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(243,236,220,.15);display:grid;gap:var(--s2);font-size:var(--t-7)}

/* ---------- motion ---------- */
@keyframes bow{0%,100%{transform:none}30%{transform:translateY(12px) rotate(-1deg)}55%{transform:translateY(12px) rotate(-1deg)}}
@media (prefers-reduced-motion:no-preference){.lobby:has(.office[data-state="answered"]) .butler{animation:bow 1.2s cubic-bezier(.4,0,.2,1) .15s both}}
@keyframes step-in{from{transform:translateY(34px);opacity:0}to{transform:none;opacity:1}}
@keyframes open{from{transform:rotateY(0)}to{transform:rotateY(-118deg)}}
@keyframes blink{0%,100%{opacity:0}50%{opacity:1}}
@keyframes beat{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* the bead, in the chart's own units: parked on You's joint with the bus (86,84) · Marketing (86,112) · Revenue (262,112) */
@keyframes bead{0%,3%{transform:translate(86px,84px)}9%{transform:translate(86px,112px)}35%{transform:translate(86px,112px)}37%{transform:translate(86px,84px);animation-timing-function:linear}43%{transform:translate(262px,84px)}45%{transform:translate(262px,112px)}70%{transform:translate(262px,112px)}72%{transform:translate(262px,84px);animation-timing-function:linear}78%,100%{transform:translate(86px,84px)}}
/* the same journey down the board's gutter: rows of --rh, the bead 37px under each rule */
@keyframes bead-phone{0%,3%{transform:translate(0,37px)}9%{transform:translate(0,calc(2 * var(--rh) + 37px))}35%{transform:translate(0,calc(2 * var(--rh) + 37px))}45%{transform:translate(0,calc(3 * var(--rh) + 37px))}70%{transform:translate(0,calc(3 * var(--rh) + 37px))}81%,100%{transform:translate(0,37px)}}
@keyframes you-rest{0%{opacity:1}3%{opacity:0}81%{opacity:1}100%{opacity:1}}
@keyframes you-live{0%{opacity:0}3%{opacity:1}81%{opacity:0}100%{opacity:0}}
@keyframes mk-rest{0%{opacity:1}9%{opacity:0}35%{opacity:1}100%{opacity:1}}
@keyframes mk-live{0%{opacity:0}9%{opacity:1}35%{opacity:0}100%{opacity:0}}
@keyframes rv-rest{0%{opacity:1}45%{opacity:0}70%{opacity:1}100%{opacity:1}}
@keyframes rv-live{0%{opacity:0}45%{opacity:1}70%{opacity:0}100%{opacity:0}}
@keyframes en-rest{0%{opacity:1}45%{opacity:0}81%{opacity:1}100%{opacity:1}}
@keyframes en-live{0%{opacity:0}45%{opacity:1}81%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .st .live-dot{animation:pulse 2.4s ease-in-out infinite}
  .bead{animation:bead 14s cubic-bezier(.45,0,.2,1) 2.2s infinite}
  .bead-phone{animation:bead-phone 14s cubic-bezier(.45,0,.2,1) 2.2s infinite}
  .n-you .rest{animation:you-rest 14s steps(1,end) 2.2s infinite}
  .n-you .live{animation:you-live 14s steps(1,end) 2.2s infinite}
  .n-mk .rest{animation:mk-rest 14s steps(1,end) 2.2s infinite}
  .n-mk .live{animation:mk-live 14s steps(1,end) 2.2s infinite}
  .n-rv .rest{animation:rv-rest 14s steps(1,end) 2.2s infinite}
  .n-rv .live{animation:rv-live 14s steps(1,end) 2.2s infinite}
  .n-en .rest,.n-pr .rest{animation:en-rest 14s steps(1,end) 2.2s infinite}
  .n-en .live,.n-pr .live{animation:en-live 14s steps(1,end) 2.2s infinite}
  .chart.paused .bead,.chart.paused .bead-phone,.chart.paused .st,.chart.paused .live-dot{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .butler-layer{animation:none}
  .button,.fold,.badge,.dot{transition:none}
  .office .pulse,.stop-pt.is-live i::after{animation:none;display:none}
  .st.live{display:none}
}

/* ---------- forced colours (Windows High Contrast) ---------- */
@media (forced-colors:active){
  .button,.qb,.theme-options button,.plate,.frame,.sheet,.q{border:1px solid CanvasText}
  .node::before,.chart::before,.node::after,.bead-phone,.track::before,.track::after,.long-desk{background:CanvasText}
  .dot.on,.stop-pt.is-done i{background:CanvasText}
}

.figures img{height:clamp(140px,11.4vw,200px)}
@media (max-width:1199px){
  .figures{display:grid;gap:var(--s5) 0;overflow:visible;margin-inline:0;padding:0}
  .figures li{position:relative;padding:0 6px 14px}
  .figures li::after{content:"";position:absolute;left:-50vw;right:-50vw;bottom:0;height:10px;background:var(--desk-top-2);border-top:1px solid rgba(255,255,255,.2);z-index:-1}
  .figures{isolation:isolate}
  .figures img{height:auto;width:100%;max-width:150px}
  .figures .is-square img{width:128%;max-width:none;margin-inline:-14%}
  .figures{grid-template-columns:repeat(8,minmax(0,1fr))} /* seven figures: four, then three centred under them */
  .figures li{grid-column:span 2}
  .figures li:nth-child(5){grid-column:2 / span 2}
}
@media (min-width:641px) and (max-width:1000px){
  .setup .workspace-proof .frame{width:300px}
  .setup .workspace-proof figcaption{left:auto;right:0}
  .plan{grid-template-columns:max-content minmax(13rem,1fr) 6.5rem 10.5rem;column-gap:var(--s4)}
}
@media (max-width:640px){
  .stop.setup{grid-template-columns:minmax(0,1fr)}
  .setup .workspace-proof.show{grid-column:1;justify-self:stretch}
  .setup .workspace-proof .frame{width:auto;max-width:390px}
  .workspace-proof figcaption{white-space:normal;right:0}
  .setup-desk{height:calc(var(--desk-top-h) * .7 + 3px + 64px)}
}
@media (min-width:1001px){
  .say{position:sticky;top:var(--s6)}
  .yourself>.say{position:static} /* the figures follow it in the same column: no room to stick */
}
@media (min-width:1200px){
  .figures{overflow:visible;justify-content:space-between;gap:var(--s3)}
  .figures .is-square img{height:clamp(119px,9.7vw,170px)} /* the reclining figure at the others' scale */
}

/* ---------- laptop and tablet ---------- */
@media (max-width:1280px){
  .butler-layer{height:84%}
}
@media (min-width:1001px) and (max-width:1320px){
  .words{padding-right:calc(var(--s6) + 72px)} /* the copy ends well before the open cover */
}
@media (max-width:1000px){
  .lobby{grid-template-columns:minmax(0,1fr);max-height:none}
  .words{grid-row:1;padding:var(--s5) var(--gutter) var(--s5);max-width:none;align-self:start}
  .scene{grid-row:2;grid-column:1;min-height:790px;margin-top:-190px} /* the lamp's light reaches up behind the words: one wall */
  .stage{left:0}
  .lamp{inset:-420px 0 0 0}
  .butler-layer{height:80%;right:-10px}
  .folder{height:430px;left:var(--gutter)}
  .folder-cap{left:var(--gutter)}
  .stop{grid-template-columns:minmax(0,1fr);row-gap:var(--s5);padding:var(--s7) var(--gutter)}
  .say{max-width:40em}
  .wide>.say,.wide-say,.plan-after{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
  .wide>.say>p,.wide-say>*,.wide-say>.desktop-requirement{grid-column:1;grid-row:auto}
  .provider-accounts{margin-top:var(--s6)}
  .words{padding-right:var(--gutter)}
  .desk-row{grid-template-columns:minmax(0,1fr)}
  .aside{grid-row:1}
  .aside .text-link{margin-bottom:var(--s3)}
  .aside .after{margin-top:0}
  .proof{grid-row:2;margin-top:var(--s4)}
  .proof-desk{grid-row:3}
  .presenter-desk{display:none}
  #workspace.wide>.say{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);align-items:start}
  #workspace.wide>.say>h2{grid-column:1}
  #workspace.wide>.say>p{grid-column:1;grid-row:2}
  #workspace .presenter-phone{display:block;grid-column:2;grid-row:1 / span 2;height:230px;align-self:end;filter:drop-shadow(-10px 14px 14px rgba(2,10,6,.55))}
  .setup .data-say{padding-bottom:var(--s5)}
  .setup-desk{margin-top:calc(-1 * var(--s5))}
  .team-head,.team-launch{grid-column:1}
  .presenter{height:330px}
  .sheet{grid-template-columns:minmax(0,1fr)}
  .footer-top{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s5)}
}

@media (max-width:900px){
  #navigation{gap:10px}
  #navigation a{font-size:.875rem;padding:12px 0;white-space:nowrap}
  #navigation .nav-plans{padding:10px 12px}
  .brand{font-size:1.375rem}
}

/* ---------- the header's phone layout ends at 720 px, where script.js closes the menu ---------- */
@media (max-width:720px){
  .menu-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid rgba(243,236,220,.35);border-radius:var(--r-in);background:transparent;color:var(--cream);font:600 var(--t-ui)/1 var(--body);cursor:pointer}
  #navigation{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--top) - 4px);flex-direction:column;align-items:stretch;gap:0;background:var(--field-deep);border-radius:var(--r-obj);padding:var(--s2);box-shadow:0 24px 40px -20px rgba(0,0,0,.8)}
  #navigation[data-open]{display:flex}
  #navigation a{padding:14px 12px;font-size:var(--t-5);border-radius:var(--r-in)}
  #navigation .nav-plans{margin-top:var(--s2);text-align:center}
  .brand{font-size:1.375rem}
  .bow-mark{width:26px;height:21px}
}

/* ---------- the phone: designed, not stacked. Words, the action, the price line, then the scene from the counter up ---------- */
@media (max-width:640px){
  .words{padding:var(--s4) var(--gutter) var(--s5)}
  .words h1{font-size:2.75rem}
  .words .line2{font-size:1.25rem;margin-top:var(--s2)}
  .lead{font-size:var(--t-5);margin-top:var(--s4)}
  .offer-lead{font-size:var(--t-5)}
  .cta-row{margin-top:var(--s5);gap:var(--s3)}
  .act{width:100%}
  .button{width:100%}
  .price-line{font-size:var(--t-5);max-width:none}
  .scene{min-height:590px;margin-top:-160px}
  .lamp{background:conic-gradient(from 100deg at -4% -6%,rgba(var(--lamp),0) 0deg,rgba(var(--lamp),.15) 8deg,rgba(var(--lamp),.15) 44deg,rgba(var(--lamp),0) 56deg,rgba(var(--lamp),0) 360deg)}
  .butler-layer{height:270px;right:-22px;bottom:calc(var(--desk-face-h) - 24px)}
  .butler{filter:brightness(1.05) drop-shadow(16px 18px 18px rgba(2,10,6,.6))}
  .desk-face{border-top-width:4px}
  .folder{height:316px;left:40px;bottom:calc(var(--desk-face-h) + 4px);perspective:2400px}
  .cover{transform:rotateY(-104deg)}
  .cover.opening{animation-name:open-phone}
  .folder-cap{left:var(--gutter);max-width:11.5em;white-space:normal;font-size:var(--t-7);bottom:auto;top:calc(100% - var(--desk-face-h) + 12px)}
  .plate{right:12px;bottom:calc((var(--desk-face-h) - 42px) / 2);padding:7px 12px 8px;box-shadow:0 10px 14px -8px rgba(0,0,0,.75),inset 0 1px 0 #fff}
  .plate strong{font-size:var(--t-6)}
  .plate span{font-size:12px}
  .office{font-size:13px}
  .o-top{padding:10px 10px 0}
  .o-tabs{padding:6px 10px 0}
  .post{padding:10px 10px 9px}
  .q-question{font-size:15px}
  .qb{min-height:32px;padding:0 12px}
  .composer{display:none}
  .o-history{display:none}
  .o-tabs span{font-size:13px;flex:auto}
  .post .quote{display:none} /* the phone folder keeps the question and its buttons; the task line is in the card's question */
  .post header .meta{display:none}
  .o-tabs{gap:6px}
  .office{inset:4% 4% 4% 6.5%}

  .stop{padding:var(--s7) var(--gutter) var(--s7)}
  .say{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);align-items:end}
  .say>*{grid-column:1 / -1}
  .say h2{font-size:2rem}
  #workspace.wide>.say{column-gap:var(--s3)}
  #workspace .presenter-phone{height:170px;grid-row:2}
  #workspace.wide>.say>h2{grid-column:1 / -1}
  .frame{padding:5px;border-radius:12px}
  .frame img{border-radius:7px}
  .tasks-sheet{font-size:13px}
  .t-head{padding:12px 14px}
  .task{padding:14px 14px 16px}
  .task .ship-label,.task-title,.task .track,.task-q,.task-note,.task-actions{margin-left:0}
  .task-title{font-size:16px}
  .stop-pt{font-size:12px}
  .task-note{font-size:13px}
  .chart{--rh:124px}
  .audience-links{flex-direction:column;gap:0}
  .steps-show{grid-template-columns:minmax(0,1fr)}
  .thumbs{height:160px}
  .sheet{padding:var(--s5) var(--s4);margin:calc(var(--s6) + 8px) 8px 8px;box-shadow:0 0 0 8px var(--folder-2),0 0 0 10px var(--folder-3),0 24px 36px -16px rgba(0,0,0,.7)}
  .sheet::before{top:-36px;height:28px}
  .waver{height:140px}
  .proof-desktop-caption{display:none}
  .proof-phone-caption{display:inline}
  .plan{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name cost" "seats seats" "get get";row-gap:var(--s2)}
  .plan h3{grid-area:name}
  .plan .cost{grid-area:cost}
  .plan .seats{grid-area:seats}
  .plan .button{grid-area:get;justify-self:stretch;margin-top:var(--s1)}
  .faq-list summary{font-size:var(--t-5)}
  .faq-list p{padding-left:0}
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .footer-disclaimers{font-size:var(--t-7)}
}
@keyframes open-phone{from{transform:rotateY(0)}to{transform:rotateY(-104deg)}}
@media (max-width:360px){
  :root{--desk-face-h:100px}
  .folder-cap{max-width:none;top:calc(100% - var(--desk-face-h) + 10px)}
  .plate{right:auto;left:var(--gutter);bottom:10px}
  .words h1{font-size:2.5rem}
  .words .line2{font-size:1.125rem} /* "Built around your creativity." keeps room for Gabarito, which sets wider than Source Sans */
  .folder{height:306px;left:30px}
  .butler-layer{height:236px}
  .chart{--rh:136px}
}

/* ---------- 1b. the seven focuses: one example team at a time, in step with the hero's word ----------
   The picker is the blue folder's index tabs (wide) or a grid of chips (narrow); the sheet inside the folder is the
   product, so it follows the visitor's scheme. All seven panels share one grid cell, so the section keeps the height
   of the tallest and nothing below it moves when the hero's word turns. */
.words .line2{white-space:nowrap}
.focus-word{display:inline-block;color:var(--cream)}
.focus-word.turn{animation:word-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes word-in{from{opacity:0;transform:translateY(.2em)}to{opacity:1;transform:none}}

#focus{padding-top:var(--s7);padding-bottom:var(--s8);row-gap:0}
.focus-say{align-items:end;margin-bottom:var(--s6)}
.focus-say .label{margin-bottom:var(--s3)}
.focus-say h2{max-width:16ch}

.focus-pick{display:flex;gap:6px;align-items:flex-end;padding:0 14px}
.focus-pick button{flex:1 1 0;min-width:0;min-height:46px;padding:0 6px;border:0;border-radius:10px 10px 0 0;background:var(--folder);color:var(--copper-ink);font:700 var(--t-ui)/1.1 var(--body);letter-spacing:.005em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:background .15s,min-height .15s}
.focus-pick button:hover{background:var(--folder-in)}
.focus-pick button[aria-checked="true"]{background:var(--folder-2);min-height:56px;cursor:default}
.focus-board{background:var(--folder-2);border-radius:var(--r-obj);padding:14px;box-shadow:0 30px 40px -20px rgba(0,0,0,.75),inset 0 -2px 0 var(--folder-3)}
.focus-sheet{display:grid;background:var(--paper);color:var(--ink);border-radius:10px;box-shadow:0 0 0 1px var(--frame-edge),0 2px 0 rgba(0,0,0,.18)}
.focus-sheet :focus-visible{outline-color:var(--ink)}

.fp{grid-area:1 / 1;visibility:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s6);padding:var(--s6);min-width:0}
.fp[data-on]{visibility:visible}
.fp:not([data-on]) .fp-fig{display:none} /* an unseen panel never asks for its figure */
.fp-a,.fp-b{min-width:0}
.fp-head{display:flex;align-items:flex-end;gap:var(--s4);min-height:148px} /* the figure's height, kept when an unseen panel drops its figure */
.fp-fig{height:148px;width:auto;max-width:none;flex:none;margin:-6px 0 -2px -4px;filter:drop-shadow(8px 10px 8px rgba(2,10,6,.28))}
.fp-fig.is-square{height:118px;margin-right:-10px}
.fp-head h3{font:800 var(--t-2)/1 var(--display);letter-spacing:-.02em}
.fp-sample{margin-top:var(--s2);font-size:var(--t-6);line-height:1.45;color:var(--muted)}
.fp-k{margin:var(--s5) 0 var(--s3);font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.fp-job{padding:var(--s4);background:var(--card);border-radius:var(--r-in)}
.fp-job .fp-k{margin-top:0}
.fp-you,.fp-back{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:start}
.fp-back{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-soft)}
.fp-you b,.fp-back b{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px}
.fp-you .avatar{font-size:10px;background:var(--surface)}
.fp-you q{display:block;font:400 1.0625rem/1.4 var(--serif);letter-spacing:-.005em;quotes:"“" "”"}
.fp-back .chk{width:22px;height:22px;margin:1px 2px 0;color:var(--live)}
.fp-back span{font-size:15px;line-height:1.45}

.fp-team{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.fp-team li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start}
.fp-team .avatar,.fp-rows .avatar{width:32px;height:32px}
.fp-team .is-lead .avatar{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.av-staffmor svg{width:17px;height:13px}
.fp-name{font-weight:700;font-size:1rem;line-height:1.3}
.fp-team li>span{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px} /* a tag that wraps starts under the name, not 8 px in */
.fp-tag{display:inline-block;padding:1px 7px;border-radius:3px;background:var(--plate);color:var(--plate-ink);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
.fp-line{display:block;flex:0 0 100%;margin-top:1px;font-size:14px;line-height:1.4;color:var(--muted)}

.fp-b{display:grid;gap:var(--s4);align-content:start}
.fp-foryou{background:var(--card);border-radius:var(--r-in);padding:var(--s4) var(--s4) var(--s2)}
.fp-foryou .fp-k{margin:0 0 var(--s1)}
.fp-rows{list-style:none;margin:0;padding:0}
.fp-rows li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line-soft)}
.fp-rows li:first-child{border-top:0}
.fp-what b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.fp-what span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--muted)}
.fp-rows .qb{min-height:44px;padding:0 18px;border-radius:22px;font-size:14px}
.fp-rows li[data-done] .qb{background:transparent;color:var(--ink);border-color:var(--line)}
.fp-rows li[data-done] .fp-what b::before{content:"✓ ";color:var(--live)}
.fp-said{font-size:13px;color:var(--muted);padding:2px 0 8px}
.fp-said:empty{display:none}
.fp-watch ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.45}
.fp-watch li{position:relative;padding-left:18px}
.fp-watch li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted)}
.fp-rule{padding:0 var(--s1)}
.fp-rule .fp-k{margin-top:var(--s2)}
.fp-rule p:not(.fp-k){font-size:15px;line-height:1.45}
.fp-rule p+p{margin-top:var(--s2)}

.focus-go{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.focus-go .act{margin:0}
.focus-go .button{background:var(--cream);color:var(--field);border-color:var(--cream);font-family:var(--display);font-weight:700;font-size:var(--t-5);box-shadow:0 14px 26px -12px rgba(0,0,0,.7)}
.focus-go .button:hover{background:#fff}
.focus-go .price-line{max-width:none}
.focus-go-note{flex-basis:100%;font-size:var(--t-6);color:var(--cream-2)}

@media (prefers-reduced-motion:no-preference){.fp[data-on]{animation:fp-in .28s ease-out}}
@keyframes fp-in{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.focus-word.turn{animation:none}.focus-pick button{transition:none}}
@media (forced-colors:active){.focus-pick button,.fp-tag,.focus-board{border:1px solid CanvasText}.focus-pick button[aria-checked="true"]{outline:3px solid Highlight}}

@media (min-width:1001px) and (max-width:1199px){
  .fp{column-gap:var(--s5);padding:var(--s5)}
}
@media (max-width:1000px){
  .focus-pick{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:0;margin-bottom:var(--s4)} /* seven chips in two full rows */
  .focus-pick button{grid-column:span 3}
  .focus-pick button:nth-child(n+5){grid-column:span 4}
  .focus-pick button{min-height:48px;border-radius:var(--r-btn);background:transparent;color:var(--cream);border:1.5px solid rgba(243,236,220,.35);box-shadow:none}
  .focus-pick button:hover{background:rgba(243,236,220,.12)}
  .focus-pick button[aria-checked="true"]{min-height:48px;background:var(--folder-2);border-color:var(--folder-2);color:var(--copper-ink)}
  .fp{grid-template-columns:minmax(0,1fr);padding:var(--s5)}
  /* one column, in reading order: who it is for, the first job, the team, For you, what it watches, the rules */
  .fp-a,.fp-b{display:contents}
  .fp-head{order:1}.fp-job{order:2;margin-top:var(--s5)}.fp-teamblock{order:3}.fp-foryou{order:4;margin-top:var(--s5)}.fp-watch{order:5}.fp-rule{order:6;padding:0}
  .fp-rule .fp-k{margin-top:var(--s5)}
}
@media (max-width:640px){
  #focus{padding-bottom:var(--s7)}
  .focus-say{margin-bottom:var(--s5)}
  .focus-pick button{grid-column:span 4}
  .focus-pick button:nth-child(n+4){grid-column:span 3}
  .focus-board{padding:8px;border-radius:12px}
  .fp{padding:var(--s4) var(--s4) var(--s5)}
  .fp-head{min-height:112px}
  .fp-fig{height:112px}
  .fp-fig.is-square{height:92px}
  .fp-head h3{font-size:2rem}
  .fp-b{grid-template-columns:minmax(0,1fr)}
  .fp-foryou{padding:var(--s3) var(--s3) var(--s1)}
  .fp-rows li{grid-template-columns:32px minmax(0,1fr);grid-template-areas:"av what" "av act";row-gap:8px;align-items:start}
  .fp-rows .avatar{grid-area:av}
  .fp-rows .fp-what{grid-area:what}
  .fp-rows .qb{grid-area:act;justify-self:start}
  .focus-go{gap:var(--s3)}
  .focus-go .act{width:100%}
}

/* ---------- 1c. a focus with a page of its own (order 071): the same example sheet, whole, under its own heading.
   Those pages are not linked from this one; they borrow its type, colours, header and footer. ---------- */
.own{padding-top:var(--s7)}
.own .focus-say h1{font-size:var(--t-1);line-height:.98;letter-spacing:-.025em}
.own .focus-say h1 .line2{display:block;font:700 clamp(1.375rem,2vw,1.875rem)/1.15 var(--display);color:var(--cream-2);letter-spacing:-.01em;margin-top:var(--s3)}
.own .fp-head h2{font:800 var(--t-2)/1 var(--display);letter-spacing:-.02em}
.own .fp-does{display:block;flex:0 0 100%;margin-top:4px;font-size:14px;line-height:1.4}
.own .fp-rule .fp-promise{font-size:14px;line-height:1.45;color:var(--muted)}
.own .fp-rows .fp-act{cursor:default;background:transparent;color:var(--ink);border:1px dashed var(--line);box-shadow:none} /* the press it would be, drawn as a label: nothing is pressed here */
.own .fp-rows li[data-done] .fp-act{border-style:solid}
.own .fp-lims{display:flex;flex-wrap:wrap;gap:8px}
.own .fp-lims span{padding:5px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;line-height:1.3}
.own .fp-lims-note{font-size:14px;color:var(--muted)}
.own .fp-end{margin-top:var(--s4);font:400 1.0625rem/1.45 var(--serif)}
.own .fp-what b{text-wrap:balance} /* a row's title never leaves one word alone */
.own .fp-does,.own .fp-line,.own .fp-what span,.own .fp-watch li,.own .fp-rule p,.own .fp-sample{text-wrap:pretty}
@media (max-width:640px){
  .own .fp-lims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} /* four limits, two by two */
  .own .focus-say h1{font-size:2.5rem}
  .own .fp-head h2{font-size:2rem}
}