/* The brand wizard (Stage 4), built from the approved mocks in
   design/stage-4/wizard: wizard.css first, verbatim but for the lines
   marked "added", then each mock page's own styles, scoped to its
   screen. Colours and the mark come from
   public/tokens.css; this file only adds the wizard's own parts, drawn from
   the same pieces as the Gallery sheet Approve screen and forgot.html:
   white page, cool grey hairlines and wash, near-black ink, the wing as the
   one accent, 44px or taller controls, quiet text buttons, chips.
   One extra colour: amber, for "check this", used only as a mark and as
   words, never as a fill (a pale amber fill reads as cream). The mark and
   the bar are the same deep amber as the words, so white on it is 5.4:1
   and the bar is 5.4:1 on white. --edge is the border of anything you
   type in or tick (3.2:1 on white; the hairline --line is 1.3:1, too
   faint for a control). */
:root{--amber:#9a5b00;--amber-mark:#9a5b00;--edge:#8c9195;--ease:cubic-bezier(.19,1,.22,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45;font-size:16px;overflow-x:clip}
img{display:block;max-width:100%}
button,input,textarea{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--wing);outline-offset:3px}
a{color:inherit}
svg.i{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- the frame: one column on a phone, the screen and the live
   post side by side on a laptop ---------- */
.frame{min-height:100vh;min-height:100dvh}
.pane{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 4px;min-height:60px}
.top .wordmark{font-size:23px;margin-top:3px}
.body{flex:1;display:flex;flex-direction:column;width:100%;max-width:520px;padding:6px 20px 0}
.stage{display:none}

/* quiet text buttons, as on the app (Put back, Back to sign in) */
.quiet{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;border:0;background:none;color:var(--wing);font:400 15px 'Hanken Grotesk',system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.quiet:hover{color:var(--wing-deep)}
.quiet.grey{color:var(--ink-3)}
.quiet svg.i{width:17px;height:17px}
.back{align-self:flex-start;margin:0 0 6px -2px}

/* words */
h1{font-weight:300;font-size:31px;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.lede{margin-top:10px;color:var(--ink-2);font-size:16.5px;line-height:1.5;text-wrap:pretty}
.lede b{font-weight:500;color:var(--ink)}
h2{font-size:17px;font-weight:500;letter-spacing:-.005em}
.small{font-size:14px;color:var(--ink-2);line-height:1.5}
.meta{font-size:13.5px;color:var(--ink-3)}
.section{margin-top:30px}
.section+.section{padding-top:26px;border-top:1px solid var(--line)}
.section h2+.small{margin-top:4px}

/* buttons: the pill pair of the Approve screen */
.btn{display:flex;width:100%;min-height:54px;padding:0 22px;border-radius:27px;align-items:center;justify-content:center;gap:9px;font:500 16.5px 'Hanken Grotesk',system-ui,sans-serif;border:0;cursor:pointer;text-decoration:none;transition:transform .5s var(--ease),background-color .2s}
.btn:active{transform:scale(.98)}
.btn.go{background:var(--wing);color:#fff;box-shadow:0 6px 18px -8px rgba(11,107,120,.7)}
.btn.go:hover{background:var(--wing-deep)}
.btn.line{background:var(--sheet);color:var(--ink);border:1px solid var(--ink)}
.btn.line:hover{background:var(--wash)}
.btn.slim{min-height:44px;width:auto;padding:0 18px;border-radius:22px;font-size:15px}
.btn.ink{background:var(--ink);color:#fff}

/* the action at the foot: rides the bottom of a phone, sits under the
   words on a laptop */
.act{position:sticky;bottom:0;z-index:4;margin:auto -20px 0;padding:22px 20px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),#fff 26px)}
.act .quiet{display:flex;margin:6px auto 0;justify-content:center}
.act .hint{margin-top:10px;text-align:center;font-size:14px;color:var(--ink-3)}
.gap{height:24px;flex:none}

/* fields, as forgot.html */
label.f{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
.field{margin-top:18px}
.field .meta{margin-top:6px}
input.t,textarea.t{width:100%;min-height:50px;padding:12.5px 15px;border-radius:12px;border:1.5px solid var(--edge);font-size:16px;background:var(--sheet);color:var(--ink);outline:none}
input.t:focus,textarea.t:focus{border-color:var(--wing)}
input.t::placeholder,textarea.t::placeholder{color:var(--ink-3);opacity:1}
textarea.t{min-height:118px;resize:vertical;line-height:1.5}
.inline{display:flex;gap:8px}
.inline input.t{flex:1;min-width:0}
.inline .btn{flex:none;min-height:50px;border-radius:25px}

/* status lines: a tick for found, amber for check this */
.ok,.unsure{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.ok .mk,.unsure .mk{flex:none;width:18px;height:18px;margin-top:1.5px;border-radius:50%;display:grid;place-items:center}
.ok .mk{background:var(--wing)}
.ok .mk svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.unsure .mk{background:var(--amber-mark);color:#fff;font:600 12px/1 'Hanken Grotesk',system-ui,sans-serif}
.unsure b{color:var(--amber);font-weight:500}
.ok b{color:var(--ink);font-weight:500}
/* a phone has no room beside the screen, so the post waits as a small
   promise above the button */
.teaser{display:flex;gap:14px;align-items:center;margin-top:auto;padding-top:28px}
.teaser img{width:64px;height:64px;border-radius:8px;flex:none}
.teaser p{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.teaser b{font-weight:500;color:var(--ink)}
@media (max-width:899px){.teaser+.act{margin-top:0}}
@media (min-width:900px){.teaser{display:none}}
.eanpost{width:100%;max-width:400px;border-radius:14px;overflow:hidden;box-shadow:0 22px 48px -28px rgba(20,24,27,.45)}
.promise{width:100%;max-width:400px;margin-top:18px;font-size:15px;color:var(--ink-2);line-height:1.5}
.promise b{color:var(--ink);font-weight:500}

/* the summary card and its rows */
.card{margin-top:22px;border:1px solid var(--line);border-radius:20px;background:var(--sheet);box-shadow:0 8px 30px rgba(16,20,24,.05)}
.row{padding:18px 18px 18px;border-top:1px solid var(--line);position:relative}
.row:first-child{border-top:0}
.row.amber::before{content:'';position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--amber-mark)}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-10px 0 10px}
.rowhead h2{font-size:15.5px}
.fix{display:inline-flex;align-items:center;min-height:44px;margin-right:-6px;padding:0 10px;border:0;background:none;color:var(--wing);font:500 15px 'Hanken Grotesk',system-ui,sans-serif;cursor:pointer;border-radius:8px;text-decoration:none}
.fix:hover{background:var(--wing-soft)}
.row .ok,.row .unsure{margin-top:12px}

/* logo tiles */
.logos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lg{height:74px;border-radius:12px;display:grid;place-items:center;padding:0 18px;border:1px solid var(--line);background:#fff;position:relative;overflow:hidden}
.lg.dark{background:#14181b;border-color:#14181b}
.lg img{max-height:30px;width:auto}
.lg.photo{background-size:cover;background-position:center 40%}
.lg.photo::after{content:'';position:absolute;inset:0;background:rgba(10,14,16,.45)}
.lg.photo img{position:relative;z-index:1}
.lgcap{font-size:13px;color:var(--ink-3);margin-top:6px}

/* colours */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{min-width:0}
.sw .chip{height:52px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(20,24,27,.08)}
.sw .nm{font-size:14px;font-weight:500;margin-top:7px}
.sw .hx{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sw.amber .chip{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--amber-mark)}
.sw.amber .nm{color:var(--amber)}
.mini{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px;box-shadow:inset 0 0 0 1px rgba(20,24,27,.1)}

/* the headline font strip */
.fontstrip{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.fontstrip img{width:100%}
.fontname{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.fontname b{font-weight:500;font-size:15.5px}

/* photos */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--wash)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .tk{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:50%;background:var(--wing);display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.ph .tk svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* a ticked row: the whole line is the control and carries the words */
.ticks{margin-top:14px;border-top:1px solid var(--line)}
.tickrow{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.tickrow input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin-top:0;border-radius:7px;border:1.5px solid var(--edge);background:#fff;display:grid;place-items:center;cursor:pointer}
.tickrow input:checked{background:var(--wing);border-color:var(--wing)}
.tickrow input:checked::after{content:'';width:12px;height:7px;border:2.4px solid #fff;border-top:0;border-right:0;transform:translate(0,-1.5px) rotate(-45deg)}
.tickrow .tx{flex:1;min-width:0;font-size:16px;line-height:1.4;padding-top:1px}
.tickrow .tx .meta{display:block;margin-top:4px}
.tickrow .tx .unsure{margin-top:8px;font-size:14px}
.tickrow.amber input{border-color:var(--amber-mark)}
.tickrow.slim{padding:11px 0}

/* chips, as the platform chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-b{position:relative;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:19px;background:#fff;font:400 14.5px 'Hanken Grotesk',system-ui,sans-serif;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.chip-b::after{content:'';position:absolute;inset:-4px -3px}
.chip-b[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:500}

/* the result line: progress is what you get, never a bar */
.result{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:13px 15px;border-radius:14px;background:var(--wing-soft);color:var(--wing-deep);font-size:14.5px;line-height:1.45}
.result svg.i{width:18px;height:18px;margin-top:1px}
.result b{font-weight:500}

/* the phone's small live preview, under the top bar. The whole strip is
   one control: tapping it opens the post full size in a sheet over the
   screen you are on (#post, below), so you never lose your place. When a
   choice has just changed the post, the picture pulses twice. */
.dock{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:9px 20px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-bottom:12px;text-decoration:none;color:var(--ink)}
.dock img{width:64px;height:64px;border-radius:7px;object-fit:cover;box-shadow:0 0 0 1px rgba(20,24,27,.07)}
.dock .dt{min-width:0;flex:1}
.dock b{display:block;font-weight:500;font-size:14.5px;line-height:1.3}
.dock .dt span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .open{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--wing);font-size:15px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(11,107,120,.6)}100%{box-shadow:0 0 0 12px rgba(11,107,120,0)}}
.dock.changed img{animation:pulse 1.4s ease-out .4s 2}
.dock.changed .dt span{color:var(--wing-deep)}
.feedcard.changed{animation:pulse 1.6s ease-out .4s 2}
/* the post, full size, over the screen: opened from the strip above */
.postsheet{display:none;position:fixed;inset:0;z-index:30}
.postsheet:target{display:block}
.postsheet .scrim{position:absolute;inset:0;background:rgba(16,20,24,.5)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.ps-in{position:absolute;left:0;right:0;bottom:0;max-height:94vh;overflow:auto;background:var(--sheet);border-radius:22px 22px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));animation:up .45s var(--ease) both}
.ps-grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 6px}
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ps-head b{font-weight:500;font-size:17px}
.ps-in img{width:100%;border-radius:12px}
.ps-in .small{margin-top:12px}
.ps-in .btn{margin-top:16px}
@media (min-width:900px){.postsheet{display:none!important}}

/* the five headline fonts, drawn as words on plain white so only the
   font differs. Each pairing as the renderer draws it: headline over
   strapline. */
.fs{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px 17px}
.fs .h{display:block;font-size:22px;line-height:1.12;letter-spacing:-.005em;color:#0d1315;text-wrap:balance}
.fs .s{display:block;font-size:13.5px;line-height:1.35;margin-top:7px;color:#4a4f51}
.f-clean .h{font-family:'Raleway',sans-serif;font-weight:500}.f-clean .s{font-family:'Raleway',sans-serif;font-weight:300}
.f-classic .h{font-family:'Spectral',serif;font-weight:500}.f-classic .s{font-family:'Lato',sans-serif;font-weight:300}
.f-prestige .h{font-family:'Gloock',serif;font-weight:400}.f-prestige .s{font-family:'Raleway',sans-serif;font-weight:300}
.f-modern .h{font-family:'Be Vietnam Pro',sans-serif;font-weight:600}.f-modern .s{font-family:'Be Vietnam Pro',sans-serif;font-weight:300}
.f-bold .h{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1.02}.f-bold .s{font-family:'Barlow',sans-serif;font-weight:300}

/* a version of the logo: the wide one is the one on your posts */
@media (min-width:900px){.fs .h{font-size:25px}.fs .s{font-size:14.5px}.f-bold .h{font-size:29px}}
.lgv{margin-top:4px}
.lg.wide{height:112px}
.lg.wide img{max-height:40px}
.lgline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.lgline .meta b{font-weight:500;color:var(--ink)}
.later{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.later>.meta{display:block;margin-bottom:8px}
.later .lg{height:62px}
.later .lg img{max-height:22px}
.typed{font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:26px;color:#0d1315;letter-spacing:-.005em}

/* the post as it will look in a feed: a neutral sketch, never a copy of a
   platform's own look */
.feedcard{width:100%;max-width:420px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,27,.05),0 22px 48px -28px rgba(20,24,27,.45)}
.fc-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.fc-ava{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#fff;flex:none;overflow:hidden}
.fc-ava img{width:27px}
.fc-name{font-weight:500;font-size:14px;line-height:1.25}
.fc-sub{font-size:12.5px;color:var(--ink-3)}
.fc-img{width:100%;aspect-ratio:1;object-fit:cover}
.fc-cap{padding:12px 14px 0;margin-bottom:15px;font-size:14px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.stagecap{display:flex;justify-content:space-between;align-items:baseline;width:100%;max-width:420px;margin-bottom:12px;font-size:14px;color:var(--ink-2)}
.stagecap b{font-weight:500;color:var(--ink)}
.stagenote{width:100%;max-width:420px;margin-top:16px}
.stagenote .ok{font-size:14px}

/* a choice of one (fonts): the whole card is the control */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.opt{display:block;position:relative;padding:12px 14px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .ol{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.opt .ol b{font-weight:500;font-size:16px}
.opt .dotr{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--edge);display:grid;place-items:center}
.opt .tag{margin-left:auto;font-size:13px;color:var(--ink-2);background:var(--wash);border-radius:99px;padding:3px 10px}
.opt img{width:100%;border-radius:10px}
.opt:has(input:checked){border-color:var(--wing);box-shadow:0 0 0 1px var(--wing)}
.opt:has(input:checked) .dotr{border-color:var(--wing)}
.opt:has(input:checked) .dotr::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--wing)}

/* a ticked picture (designs): the name under it carries the words */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:22px}
.tile{display:block;position:relative;cursor:pointer}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile .pic{display:block;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.tile .pic img{width:100%;aspect-ratio:1;object-fit:cover;transition:opacity .2s}
.tile .box{flex:none;width:22px;height:22px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--edge);display:grid;place-items:center}
.tile .nm{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:15px}
.tile .nm .meta{margin-left:auto}
.tile:has(input:checked) .pic{box-shadow:0 0 0 2.5px var(--wing)}
.tile:has(input:checked) .box{background:var(--wing);box-shadow:none}
.tile:has(input:checked) .box::after{content:'';width:11px;height:6px;border:2.4px solid #fff;border-top:0;border-right:0;transform:translate(0,-1.5px) rotate(-45deg)}
/* an unticked design stays at full strength: it is the one being judged.
   The empty box says it is unticked. */

/* a platform: what it is, how it is, and the one thing to do */
.conn{margin-top:12px;border:1px solid var(--line);border-radius:18px;padding:16px 16px 16px;position:relative;background:#fff}
.conn.amber::before{content:'';position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--amber-mark)}
.ch{display:flex;align-items:center;gap:12px}
.ch .pl{width:40px;height:40px;border-radius:12px;background:var(--ink);display:grid;place-items:center;flex:none}
.ch .pl svg{width:21px;height:21px;fill:#fff}
.ch .nm{flex:1;min-width:0}
.ch .nm b{display:block;font-weight:500;font-size:16px;line-height:1.3}
.ch .nm span{font-size:14px;color:var(--ink-2)}
.conn .ok,.conn .unsure,.conn>.off{margin-top:12px}
.steps{margin:12px 0 0 27px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 8px 30px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--wash);color:var(--ink);font:500 12.5px/21px 'Hanken Grotesk',system-ui,sans-serif;text-align:center}
.steps li b{color:var(--ink);font-weight:500}
.conn .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* not connected, or skipped: an empty ring, in grey words */
.off{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-3);line-height:1.45}
.off .mk{flex:none;width:18px;height:18px;margin-top:1.5px;border-radius:50%;border:1.5px solid var(--edge)}
.stagenote>*+*{margin-top:8px}
.stagenote .unsure{font-size:14px}

/* one colour, as a card (Fix colours, and Company settings) */
.col{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:18px;position:relative;background:#fff}
.col.amber::before{content:'';position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--amber-mark)}
.col+.col{margin-top:12px}
.colhead{display:flex;align-items:center;gap:14px}
.big{width:56px;height:56px;border-radius:14px;flex:none;box-shadow:inset 0 0 0 1px rgba(20,24,27,.08)}
.colhead .nm{flex:1;min-width:0}
.colhead .nm b{display:block;font-weight:500;font-size:16px}
.colhead .nm span{font-size:14px;color:var(--ink-2)}
.col .ok,.col .unsure{margin-top:12px}
.col .tickrow{border:0;padding:14px 0 0}
.col .tickrow .tx{font-size:15.5px}
.col .answer{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0 27px}
.pair{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:14px;color:var(--ink-2);line-height:1.45}
.pair i{display:inline-block;width:28px;height:28px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(20,24,27,.08);flex:none}
.forlater{margin-top:30px}
.forlater h2{font-size:15.5px}
.forlater>.small{margin-top:4px}
.chip-b i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,24,27,.15);flex:none}
/* a pressed chip in an answer pair: ink outline and weight, as the
   platform chips */
.chip-b[aria-pressed="true"]::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink)}

/* the agent's set-up: whose team, shown small beside the mark */
.team{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.team img{height:15px;width:auto}
.face{width:128px;height:128px;border-radius:50%;background:var(--wash);display:grid;place-items:center;margin:22px auto 0;box-shadow:inset 0 0 0 1px var(--line)}
.face svg{width:64px;height:64px;stroke:#b8bec3;fill:none;stroke-width:1.4;stroke-linecap:round}
.fc-ava.me{background:var(--wash)}
.fc-ava.me svg{width:20px;height:20px;stroke:#a9b0b5;fill:none;stroke-width:1.6;stroke-linecap:round}

/* ---------- Company settings: the same screens, each one a click away.
   A phone shows the list (body.s-list) or one part (body.s-part); a laptop
   shows the side menu, the part and the live post together. ---------- */
.setgrid{display:block}
.menu{padding:4px 20px 40px}
.menu .setttl{margin:6px 0 4px}
.grp{margin:24px 0 2px;font-size:13.5px;font-weight:500;color:var(--ink-3)}
.mi{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mi .mt{flex:1;min-width:0}
.mi .t{display:block;font-size:16.5px;line-height:1.3}
.mi .s{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);margin-top:2px}
.mi .s.amber{color:var(--amber)}
.mi .s.amber::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--amber-mark)}
.mi svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.setpart{padding:6px 20px 48px;max-width:560px}
.saved{display:flex;align-items:center;gap:7px;margin-top:22px;font-size:14px;color:var(--ink-3)}
.saved svg{width:16px;height:16px;stroke:var(--wing);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.s-list .setpart,body.s-list .setgrid>.stage{display:none}
body.s-part .menu{display:none}
@media (min-width:900px){
  .setgrid{display:grid;grid-template-columns:272px minmax(0,1fr) 400px;align-items:start;min-height:calc(100vh - 60px)}
  body.s-list .setpart,body.s-part .menu{display:block}
  .setpart .back{display:none}
  body.s-list .top,body.s-part .top{padding-bottom:14px;border-bottom:1px solid var(--line)}
  .setgrid{min-height:calc(100vh - 75px)}
  .menu{position:sticky;top:0;padding:18px 16px 40px 28px;border-right:1px solid var(--line);min-height:calc(100vh - 60px)}
  .menu .setttl{font-size:24px;margin:0 0 4px 12px}
  .grp{margin:20px 0 4px 12px;font-size:12.5px}
  .mi{min-height:0;padding:9px 12px;border:0;border-radius:10px;margin:1px 0}
  .mi .t{font-size:15px}
  .mi .s{font-size:13px}
  .mi svg{display:none}
  .mi:hover{background:var(--wash)}
  .mi[aria-current="page"]{background:var(--wing-soft)}
  .mi[aria-current="page"] .t{font-weight:500;color:var(--wing-deep)}
  .setpart{padding:26px 48px 60px;max-width:620px}
  body.s-list .setgrid>.stage,body.s-part .setgrid>.stage{display:block;align-self:stretch}
  .setgrid>.stage .stage-in{height:calc(100vh - 60px);padding:40px 36px}
}

/* ---------- a laptop: the screen on the left, the live post on the
   right on the grey wash ---------- */
@media (min-width:900px){
  .frame.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* the mark lines up with the column under it, not the pane's edge */
  .top{padding:26px 40px 0}
  .pane>.top{width:100%;max-width:540px;margin:0 auto}
  .frame:not(.split) .pane>.top{max-width:600px}
  .body{max-width:none;padding:0 40px}
  .body>*{width:100%;max-width:460px;margin-left:auto;margin-right:auto}
  .frame:not(.split) .body>*{max-width:520px}
  .body.mid{justify-content:center;padding-bottom:60px}
  .body.mid>:first-child{margin-top:0}
  .body.lead{padding-top:28px}
  h1{font-size:38px;line-height:1.1}
  .lede{font-size:17px}
  .act{position:static;margin:28px auto 56px;padding:0;background:none}
  .act .btn{max-width:460px}
  .dock{display:none}
  .stage{display:block;background:var(--wash);min-width:0}
  .stage-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 56px}
  .stage-in .feedcard{max-width:400px}
  .stagecap,.stagenote{max-width:400px}
}

/* ---------- added for the real pages ----------
   One screen shows at a time; the others carry the hidden attribute,
   which has to beat the display each frame sets on a laptop. The post
   sheet opens with a class instead of :target, because the address's
   #part names the screen. A message from the server sits above the
   button as an amber line, the wizard's own "check this". A file box
   is never seen: a button with words opens it. */
[hidden]{display:none!important}
.postsheet.open{display:block}
.act .unsure.err{margin:0 0 14px}
.body>.unsure.err{margin-top:16px}
/* every tap at least 44px each way, with the look unchanged: a short
   word button is widened, a small link reaches further than it is drawn */
.quiet,.fix{min-width:44px;justify-content:center}
/* one that spans the column (Back, Add a fact) keeps its words at the left */
.body>.quiet{justify-content:flex-start}
/* a choice drawn over an unseen box shows its keyboard focus on what is
   seen: the card (fonts), the tick box (designs) */
.opt:has(input:focus-visible){outline:2px solid var(--wing);outline-offset:3px}
.tile:has(input:focus-visible) .box{outline:2px solid var(--wing);outline-offset:2px}
/* a design tile is two controls: the picture (shows it at the side on a
   laptop, ticks on a phone) and the name with its box (the tick); the
   name's tap reaches up to the picture and down to the next row */
.tile button.pic{width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.tile label.nm{position:relative;cursor:pointer}
.tile label.nm::after{content:'';position:absolute;left:0;right:0;top:-11px;bottom:-11px}

/* ---------- 1 Create your account ---------- */
.pw{position:relative}
.pw input.t{padding-right:74px}
.pw .quiet{position:absolute;right:12px;top:3px}
/* the sign-up code arrives with the link in EAN's welcome email, so it is
   a line that says so, not a box to fill in */
.s-account .code{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.s-account .code .quiet{margin-top:-12px}
.s-account .signin{margin-top:14px;text-align:center;font-size:15px;color:var(--ink-3)}
/* without the blog beside it (its picture could not load) the screen is
   one column, and its button is as wide as the fields */
.s-account:not(.split) .act .btn,.s-address:not(.split) .act .btn{max-width:none}
.s-account .signin a{color:var(--wing);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

/* ---------- 2 Your web address ---------- */
.s-address .addr{margin-top:28px}
.s-address .addr input.t{font-size:19px;min-height:60px;padding:14px 18px;border-color:var(--ink-3)}
.s-address .addr .meta{margin-top:8px}
.s-address .addr .from{display:block;font-size:14px;color:var(--ink-2);margin-top:8px}

/* ---------- 3 The scan, shown live with no spinner ----------
   Each part lands the moment the scan reports it (GET /api/onboard/scan),
   and the logo, the colour and the font land on the post as they come.
   The mock timed this with CSS; here each part has a state, and its
   animation plays when it appears. With reduced motion everything is
   simply there. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes drop{0%{opacity:0;transform:translateY(-22px) scale(.9)}70%{opacity:1;transform:translateY(2px) scale(1)}100%{transform:none}}
@keyframes soft{from{opacity:0;transform:scale(1.04)}}
@keyframes come{from{opacity:0}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.s-scan .c{animation:come .5s ease both}
.s-scan .cell2{display:grid}
.s-scan .cell2>*{grid-area:1/1}
.s-scan .swap{display:grid}
.s-scan .swap>*{grid-area:1/1}
.s-scan .swap h1{font-size:29px;white-space:nowrap}
.s-scan .site{margin-top:4px;color:var(--ink-2);font-size:16px}
/* the post, landing in layers: each new drawing fades in over the last */
.s-scan .layers{position:relative;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--wash);box-shadow:0 22px 48px -28px rgba(20,24,27,.45)}
.s-scan .layers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-scan .layers img+img{animation:come .7s ease both}
.s-scan .capw{display:grid;margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.s-scan .capw>*{grid-area:1/1}
.s-scan .capw b{font-weight:500;color:var(--ink)}
.s-scan .livepost{margin-top:18px}
@media (min-width:900px){.s-scan .livepost{display:none}}
.s-scan .scan{margin-top:24px;display:flex;flex-direction:column;gap:22px}
.s-scan .lab{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);margin-bottom:8px}
.s-scan .lab b{font-weight:500;color:var(--ink)}
.s-scan .st{font-size:13.5px}
.s-scan .lab .st>*,.s-scan .stagecap .cell2>*{justify-self:end}
.s-scan .cell .lab .st>*{justify-self:start}
.s-scan .st .got{color:var(--wing);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.s-scan .st .look{color:var(--ink-3)}
.s-scan .st .got svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s-scan .st .miss{color:var(--amber);font-weight:500}
/* logo, colour and font: the three that change the post, in one row */
.s-scan .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.s-scan .cell{min-width:0}
.s-scan .cell .lab{display:block;margin-bottom:7px}
.s-scan .cell .lab b{display:block}
.s-scan .cell .well{height:66px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:0 10px;position:relative;overflow:hidden}
.s-scan .well::before{content:'';position:absolute;inset:0;background:var(--wash);opacity:0;visibility:hidden}
.s-scan [data-state="looking"] .well::before{opacity:1;visibility:visible}
.s-scan .logo-in{max-height:24px;width:auto;animation:rise .8s var(--ease) both}
.s-scan .dots{display:flex;gap:6px;align-items:center}
.s-scan .dot{display:block;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,24,27,.1);animation:drop .9s var(--ease) var(--at) both}
.s-scan .dot.ask{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--amber-mark)}
.s-scan .fontword{font-size:23px;color:#0d1315;animation:rise .8s var(--ease) both}
.s-scan .cell .meta{display:block;font-size:12.5px;margin-top:6px;line-height:1.35}
.s-scan .cell .meta.amber{color:var(--amber)}
.s-scan .pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-scan .pic{aspect-ratio:1;border-radius:10px;background:var(--wash);overflow:hidden;display:grid;place-items:center}
.s-scan .pic img{width:100%;height:100%;object-fit:cover;animation:soft 1.2s var(--ease) var(--at) both}
.s-scan .pic .more{font-size:14px;color:var(--ink-2);text-align:center;line-height:1.3;animation:come .6s ease both}
.s-scan .pic .more b{display:block;font-weight:500;font-size:20px;color:var(--ink)}
.s-scan .vbars{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.s-scan .vbars i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--wash) 0%,#e6eaec 50%,var(--wash) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.s-scan .vline{font-size:18px;font-weight:300;line-height:1.4;letter-spacing:-.005em;animation:rise .8s var(--ease) both}
.s-scan .done{animation:rise .8s var(--ease) both}
@media (min-width:900px){
  .s-scan .swap h1{font-size:38px}
  .s-scan .cell .well{height:78px}
  .s-scan .logo-in{max-height:30px}
  .s-scan .dot{width:30px;height:30px}
  .s-scan .fontword{font-size:27px}
  .s-scan .stage .capw{width:100%;max-width:400px;font-size:15px;margin-top:14px}
  .s-scan .stage .layers{max-width:400px}
}

/* ---------- 4 Your first post ---------- */
.s-first .hero{margin:22px -20px 0;position:relative}
.s-first .hero img{width:100%;aspect-ratio:1;object-fit:cover}
.s-first .words{margin-top:22px}
.s-first .words h2{font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.s-first .words p{font-size:16px;line-height:1.55;color:var(--ink)}
.s-first .plat{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-size:14px;color:var(--ink-2)}
.s-first .plat span{display:inline-flex;align-items:center;gap:6px}
.s-first .plat svg{width:16px;height:16px;fill:var(--ink-2)}
@media (min-width:900px){
  .s-first .hero{display:none}
  .s-first .words{margin-top:28px;padding:18px 20px;border:1px solid var(--line);border-radius:16px}
}

/* ---------- 5 Here's what we found, and 5t, a typical agency ---------- */
.one{display:flex;align-items:center;gap:14px}
.one .big{width:52px;height:52px}
.one b{display:block;font-weight:500;font-size:16px}
.one span{font-size:14px;color:var(--ink-2)}
.photos .more{display:grid;place-items:center;text-align:center;font-size:14px;color:var(--ink-2);line-height:1.3;text-decoration:none;border:1px solid var(--line);background:#fff}
.photos .more b{display:block;font-weight:500;font-size:19px;color:var(--ink)}
.row .small.after{margin-top:12px}
.row .answer{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0 27px}
.photos .slot{display:grid;place-items:center;text-align:center;font-size:14px;color:var(--ink-2);border:1px dashed var(--edge);background:#fff;text-decoration:none;line-height:1.3;padding:6px}
.pale{width:150px;height:auto}

/* ---------- 5a Fix: logo ---------- */
.s-fixlogo .ver{margin-top:22px}
.s-fixlogo .ver h2{font-size:15.5px;margin-bottom:9px}
.s-fixlogo .ver .lg{height:112px}
.s-fixlogo .ver .lg img{max-height:40px}
.s-fixlogo .ver .lgline{margin-top:4px}
.s-fixlogo .ver .ok{margin-top:6px}
.s-fixlogo .ver.later{margin-top:30px;padding-top:24px}
.s-fixlogo .ver.later .lg{height:84px}
.s-fixlogo .ver.later .lg img{max-height:28px}
.s-fixlogo .ver.later h2+.small{margin:-4px 0 10px}
.s-fixlogo .upload{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.s-fixlogo .upload .btn{margin-top:12px}

/* ---------- 5c Fix: headline font ----------
   Each of the five on plain white with room around it, so only the font
   differs. The line under each name is the description in
   src/font-pairings.js, in plain words (no "serif" or "sans"). */
.s-font .opt{padding:14px 14px 14px}
.s-font .opt .ol{margin-bottom:4px}
.s-font .opt .says{display:block;font-size:14px;color:var(--ink-2);margin:0 0 12px 32px;line-height:1.4}
.s-font .opt .fs{border-color:var(--line)}

/* ---------- 5d Fix: photos ----------
   What the photos are for is Nick's call (they are saved, but nothing
   draws them yet). Until then they are simply kept: no ticks, and no
   redraw of this week's blog. */
.s-photos .picks{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
.s-photos .pk .ph{aspect-ratio:3/2;border-radius:14px}
.s-photos .pk .bar{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.s-photos .pk .bar span{font-size:14.5px;color:var(--ink-2)}
.s-photos .note{margin-top:4px}
.s-photos .add{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.s-photos .add .btn{margin-top:12px}
@media (min-width:900px){
  /* the three photos the company keeps, side by side */
  .s-photos .picks{grid-template-columns:repeat(3,1fr);gap:12px}
  .s-photos .pk .ph{aspect-ratio:4/5}
}

/* ---------- 6 Your voice ----------
   Leads with what the scan read (voice_profile: 60 to 120 words, written
   for a copywriter). Pasting past posts is the fix, not the start. The
   never-say list adds to Magpie's own; Magpie's own can't be unticked, so
   it is a line of words, not boxes. */
.s-voice .voice{font-size:16.5px;line-height:1.55;color:var(--ink)}
.s-voice .row .ok{margin-top:14px}
.s-voice .never .fixed{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.s-voice .never .fixed b{font-weight:500;color:var(--ink)}
.s-voice .never .field{margin-top:18px}
.fc-cap.full{-webkit-line-clamp:6}

/* ---------- 7 Facts about you ----------
   One fact: the tick and the words are the label; the page it came from
   is a link of its own underneath, outside the label, so tapping the link
   never ticks the box. */
.s-facts .facts{margin-top:6px;border-top:1px solid var(--line)}
.s-facts .fact{border-bottom:1px solid var(--line);padding-bottom:12px;position:relative}
.s-facts .fact .tickrow{border:0;padding:14px 0 4px;min-height:44px}
.s-facts .fact.amber::before{content:'';position:absolute;left:-12px;top:16px;bottom:14px;width:3px;border-radius:3px;background:var(--amber-mark)}
.s-facts .fact.amber .tickrow input{border-color:var(--amber-mark)}
.s-facts .src{display:inline-flex;align-items:center;gap:5px;min-height:32px;margin-left:38px;font-size:13.5px;color:var(--ink-2);text-decoration:none;position:relative}
.s-facts .src::after{content:'';position:absolute;inset:-6px 0}
.s-facts .src u{text-decoration:none;border-bottom:1px solid var(--edge)}
.s-facts .src svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s-facts .fact .unsure{margin:6px 0 2px 38px;font-size:14px}
.s-facts .group{margin-top:26px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.s-facts .addfact{margin-top:10px}

/* ---------- 8b Connect your accounts, and 9d Connect LinkedIn ---------- */
.conns{margin-top:22px}
.conn .meta.found{margin-top:10px}

/* ---------- 8c Here's your week ----------
   This week's real posts, on their real times. Three phones: a row that
   slides on a phone, side by side on a laptop. The feed inside is a
   neutral sketch, never a copy of a platform's look. */
.s-week .count{display:none;margin-top:18px;font-size:14.5px;color:var(--ink-2)}
.s-week .count b{font-weight:500;color:var(--ink)}
.s-week .phones{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin:14px -20px 0;padding:6px 20px 30px;scrollbar-width:none}
.s-week .day{flex:none;width:252px;scroll-snap-align:center}
.s-week .when{margin:0 6px 10px}
.s-week .when b{display:block;font-weight:500;font-size:15px}
.s-week .when span{font-size:13.5px;color:var(--ink-3)}
.s-week .phone{border-radius:40px;padding:8px;background:#14181b;box-shadow:0 30px 50px -30px rgba(20,24,27,.6)}
.s-week .screen{position:relative;height:486px;border-radius:32px;overflow:hidden;background:#fff}
.s-week .island{position:absolute;top:9px;left:50%;width:74px;height:21px;margin-left:-37px;border-radius:12px;background:#14181b;z-index:2}
.s-week .sbar{height:38px;display:flex;align-items:center;padding:4px 22px 0;font-size:12.5px;font-weight:500}
.s-week .screen .fc-head{padding:8px 12px}
.s-week .screen .fc-ava{width:32px;height:32px}
.s-week .screen .fc-ava img{width:24px}
.s-week .screen .fc-name{font-size:13px}
.s-week .screen .fc-sub{font-size:11.5px}
.s-week .screen .fc-cap{font-size:12.5px;padding:10px 12px 0;margin-bottom:6px;-webkit-line-clamp:3;color:var(--ink)}
.s-week .acts{display:flex;justify-content:space-around;padding:8px 12px;border-top:1px solid var(--line);margin:6px 12px 0;font-size:12px;color:var(--ink-3)}
/* the top of the next post in the feed, as grey blocks */
.s-week .nextp{margin:14px 12px 0;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}
.s-week .nextp i{width:30px;height:30px;border-radius:50%;background:var(--wash);flex:none}
.s-week .nextp span{display:block;height:8px;border-radius:4px;background:var(--wash)}
.s-week .nextimg{margin:10px 0 0;height:120px;background:var(--wash)}
.s-week .under{margin:12px 6px 0;font-size:14px;color:var(--ink-2);line-height:1.4}
.s-week .under b{display:block;color:var(--ink);font-weight:500}
.s-week .under .moved{display:block;margin-top:4px;color:var(--ink-2)}
.s-week .fin{display:flex;flex-direction:column;gap:10px}
@media (max-width:899px){.s-week .count{display:block}}
@media (min-width:900px){
  .s-week .body.wide>.phones{max-width:none;justify-content:center;gap:36px;overflow:visible;margin:34px auto 0;padding:6px 0 10px}
  .s-week .body.wide>h1,.s-week .body.wide>.lede{text-align:center}
  .s-week .body.wide>.lede{max-width:640px}
  .s-week .body.wide{padding-top:40px}
  .s-week .body.wide>.act{max-width:460px}
  .s-week .fin{flex-direction:row}
  .s-week .fin .btn{flex:1}
  .s-week.frame:not(.split) .pane>.top{max-width:906px}
}

/* ---------- 9a Join your team ----------
   The email comes filled in from the invite when the link carries it. */
.s-ajoin input.t[readonly]{background:var(--wash);border-color:var(--line);color:var(--ink-2)}

/* ---------- 9b Your photo and job title ----------
   The headshot is kept on their Magpie profile; nothing draws it on a
   post yet, and Facebook and LinkedIn show their own profile photos, so
   the screen makes no promise about where it appears. */
.s-ayou .photo-btns{display:flex;gap:8px;justify-content:center;margin-top:16px}
.s-ayou .photo-btns .btn{flex:1;max-width:170px}
.s-ayou .tip{text-align:center;margin-top:10px;text-wrap:balance}
.s-ayou .jobs .chips{margin-top:10px}
.s-ayou .face img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* ---------- 9c Your voice ---------- */
.s-avoice .pasted{margin-top:22px}
.s-avoice .pasted textarea.t{min-height:150px}
.s-avoice .pasted .count{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.s-avoice .pasted .field:first-child{margin-top:0}
.s-avoice .why{margin-top:22px}

/* ---------- 9d Connect LinkedIn ----------
   LinkedIn is the one thing: Magpie posts to the member's own profile.
   Facebook can only be a Page; most agents have no Page of their own, and
   choosing the company's Page would post everything twice. */
.s-aconnect .conn.main{border-color:var(--ink-3)}
.s-aconnect .conn .why{margin-top:12px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.s-aconnect .conn .btns{margin-top:14px}

/* ---------- 9e Approve your first post ----------
   The app's own Approve screen, so the last step of set-up is the screen
   they will use every week. */
.s-afirst .col{width:100%;max-width:480px;margin:0 auto;flex:1;display:flex;flex-direction:column}
.s-afirst .intro{padding:6px 20px 0}
.s-afirst .intro h1{font-size:28px}
.s-afirst .gstage{position:relative;margin-top:16px}
.s-afirst .gstage img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--wash)}
.s-afirst .gsheet{position:relative;margin-top:-18px;background:var(--sheet);border-radius:22px 22px 0 0;box-shadow:0 -14px 30px -20px rgba(20,24,27,.45);padding:10px 20px 6px}
.s-afirst .ggrab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.s-afirst .gsheet h3{font-size:21px;font-weight:400;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.s-afirst .gmeta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:14px;color:var(--ink-2);align-items:center}
.s-afirst .gmeta b{font-weight:500;color:var(--ink)}
.s-afirst .gplat{display:inline-flex;align-items:center;gap:6px}
.s-afirst .gplat svg{width:16px;height:16px;fill:var(--ink-2)}
.s-afirst .gpair{display:grid;grid-template-columns:1fr 1.7fr;gap:10px;margin-top:16px}
.s-afirst .gpair button{min-height:54px;border-radius:27px;font:500 16.5px 'Hanken Grotesk',system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer}
.s-afirst .gpair svg,.s-afirst .gopener svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s-afirst .gbin{border:1px solid var(--ink);background:var(--sheet);color:var(--ink)}
.s-afirst .gyes{border:0;background:var(--wing);color:#fff;box-shadow:0 6px 18px -8px rgba(11,107,120,.7)}
.s-afirst .gopener{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;margin-top:10px;border:0;border-top:1px solid var(--line);background:none;font:400 15px 'Hanken Grotesk',system-ui,sans-serif;color:var(--ink-2);cursor:pointer}
.s-afirst .gwords{padding:4px 0 12px;font-size:15px;line-height:1.5;color:var(--ink-2);white-space:pre-line}
.s-afirst .ghint{text-align:center;color:var(--ink-3);font-size:14px;padding:14px 20px 28px}
@media (min-width:900px){
  .s-afirst .col{padding-top:10px}
  .s-afirst .gstage img{border-radius:16px 16px 0 0}
  .s-afirst .gsheet{border:1px solid var(--line);border-top:0;border-radius:22px;margin-top:-18px;box-shadow:0 22px 48px -28px rgba(20,24,27,.4)}
  .s-afirst .intro{padding:0 0 4px}
  .s-afirst .intro h1{font-size:34px}
  .s-afirst.frame:not(.split) .pane>.top{max-width:560px}
}

/* ---------- 10 Company settings (Stage 4g) ----------
   The mocks' own styles (10-settings.html, 10b, 10c), scoped to the page;
   the side menu, the list and the "Changes save as you go" line are the
   wizard.css rules above. Then the few controls no wizard screen has: a
   field with its Save, a choice of one drawn as rows or chips, invites and
   the team, the quiet weeks' pictures and topics, the button that deletes
   (the one use of the red, --bad, 6.4 to 1 on white). */
.s-settings .setpart h1{font-size:31px}
.s-settings .setpart .lede{margin-bottom:4px}
.s-settings .ver{margin-top:22px}
.s-settings .ver h2{font-size:15.5px;margin-bottom:9px}
.s-settings .ver .lg{height:104px}
.s-settings .ver .lg img{max-height:38px}
.s-settings .ver .ok{margin-top:6px}
.s-settings .ver.later{margin-top:28px;padding-top:22px}
.s-settings .ver.later .lg{height:80px}
.s-settings .ver.later .lg img{max-height:27px}
.s-settings .ver.later h2+.small{margin:-4px 0 10px}
.s-settings .typedname{font-weight:500;color:var(--ink)}
@media (min-width:900px){.s-settings .setpart h1{font-size:34px}}
.s-settings .menu .unsure.err{margin:10px 0 4px}
/* the policy, where accounts are connected, as on every other page */
.s-settings .menu .foot{margin-top:18px}
.s-settings .menu .foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-3);font-size:13.5px;text-decoration:none}
@media (min-width:900px){.s-settings .menu .foot{margin:14px 0 0 12px}}
.s-settings [data-set]>.unsure.err{margin-top:20px}
.s-settings p.f{font-size:13.5px;font-weight:500;margin-bottom:6px}
.s-settings .savebtn,.s-settings .section>.btn{margin-top:14px}
.s-settings .section h2+.small{margin-top:4px}
.s-settings h3.sub{font-size:15.5px;font-weight:500;margin-top:26px}
.s-settings h3.sub+.small{margin-top:4px}
.s-settings .scanbox{margin-top:18px}
.s-settings .scanbox .site{margin:0;font-size:14.5px}
.s-settings .scanbox .scan{margin-top:12px}
.s-settings #scanResult{margin-top:16px}
.s-settings .s-voice .count{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.s-settings #setPasteBox>.btn{margin-top:8px}
.s-settings #setTags{margin-top:18px}
.s-settings #setTagsNone,.s-settings #setTagsFull{margin-top:14px}
.s-settings #setTimes .small+.small{margin-top:8px}
.s-settings #setTimes .meta{margin-top:10px}
.s-settings #setPauseState,.s-settings #setApState{margin-top:12px}
/* a choice of one, as rows: the tick box drawn round, with a dot */
.tickrow input[type=radio]{border-radius:50%}
.tickrow input[type=radio]:checked{background:#fff;border-color:var(--wing)}
.tickrow input[type=radio]:checked::after{width:12px;height:12px;border:0;border-radius:50%;background:var(--wing);transform:none}
/* a choice of one, as chips: the pressed chip's ink and dot */
.chip-b[aria-checked="true"]{border-color:var(--ink);color:var(--ink);font-weight:500}
.chip-b[aria-checked="true"]::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink)}
/* invites and the team */
.s-settings .inv{margin-top:12px}
.s-settings .inv input.t{min-height:46px;padding:10px 13px;background:var(--wash);border-color:var(--line);color:var(--ink-2)}
.s-settings .invline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.s-settings #setMembers{margin-top:8px;border-top:1px solid var(--line)}
.s-settings .member{padding:14px 0 10px;border-bottom:1px solid var(--line)}
.s-settings .mhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.s-settings .mhead b{font-weight:500;font-size:16px;overflow-wrap:anywhere}
.s-settings .member .small{margin-top:2px}
.s-settings .mconns{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-size:13.5px;color:var(--ink-3)}
.s-settings .mconns .amber{color:var(--amber)}
.quiet.bad{color:var(--bad)}
.quiet.bad:hover{color:#8a2018}
.s-settings .member .quiet{margin:2px 0 0 -2px;white-space:normal;text-align:left}
/* the quiet weeks' pictures and topics */
.s-settings .bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;margin-top:12px}
.s-settings .bank>.meta{grid-column:1/-1}
.s-settings .bk img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--wash)}
.s-settings #setBankShared{margin-top:8px}
.s-settings #setBankUpload{margin-top:12px}
.s-settings .topics{margin-top:10px;border-top:1px solid var(--line)}
.s-settings .topic{padding:12px 0 4px;border-bottom:1px solid var(--line)}
.s-settings .topic .tt b{display:block;font-weight:500;font-size:15px}
.s-settings .topic .tt span{display:block;font-size:14px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.s-settings .topic.off .tt b,.s-settings .topic.off .tt span{color:var(--ink-3)}
.s-settings .tacts{display:flex;flex-wrap:wrap;gap:0 16px}
.s-settings #topicForm{margin-top:4px}
/* the button that deletes */
.btn.bad{background:var(--bad);color:#fff;margin-top:16px}
.btn.bad:hover{background:#8a2018}
/* A laptop's side menu is taller than many screens (16 parts), so it
   scrolls on its own while it stays put: every part one click away from
   anywhere on a long part. */
@media (min-width:900px){.s-settings .menu{max-height:100vh;overflow-y:auto;overscroll-behavior:contain}}
/* A chip holds a word with no spaces in it (a long hashtag, a word never
   to say): it wraps inside the chip rather than push the page sideways,
   and so does the line under a part's name in the menu. */
.chips .chip-b{max-width:100%;height:auto;padding-top:8px;padding-bottom:8px;overflow-wrap:anywhere;text-align:left}
.chips .chip-b>.meta{flex:none;white-space:nowrap;overflow-wrap:normal}
.mi .s{overflow-wrap:anywhere}
.mi .s.amber::before{flex:none}
/* a kept photo: Swap and Remove side by side */
.s-settings .s-photos .pk .bar{flex-wrap:wrap;gap:0 12px}
.s-settings .s-photos .pk .bar>span:first-child{white-space:nowrap}
.s-settings .s-photos .pk .bar .acts{display:flex;gap:12px}
/* the logo's other ways: the website's, or the name typed */
.s-settings .logoways{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px}
/* Where your logo works: each version, and each background it may sit on */
.s-settings .gv{margin-top:6px}
.s-settings .gv .tickrow{border-bottom:0;padding-bottom:6px}
.s-settings .gtiles{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px 38px}
.s-settings .gtile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:96px;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;font:400 14px 'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);text-align:left;cursor:pointer}
.s-settings .gtile[aria-pressed="false"]{border-style:dashed}
.s-settings .gtile[aria-pressed="false"] .gsw{opacity:.35}
.s-settings .gsw{display:grid;place-items:center;width:80px;height:46px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(20,24,27,.1)}
.s-settings .gsw img{max-width:64px;max-height:26px}
.s-settings .gsw img.ink{filter:brightness(0)}
.s-settings .gsw img.wm{filter:brightness(0) invert(1)}
.s-settings .gl{overflow-wrap:anywhere}
.s-settings .gl .meta{display:block;font-size:12.5px}
.s-settings .gtile[aria-pressed="false"] .gl .meta{color:var(--amber)}
.s-settings #setGuideSaid{margin-top:4px}
/* a design with a colour of its own, and the older designs in use */
.s-settings #setDesignOwn{margin-top:14px}
.s-settings .owncol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.s-settings .owncol i{width:22px;height:22px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(20,24,27,.12)}
.s-settings .owncol p{flex:1;min-width:0}
.s-settings .odes{padding:16px 0 10px;border-bottom:1px solid var(--line)}
.s-settings .odes:first-child{margin-top:8px;border-top:1px solid var(--line)}
.s-settings .odes h3{font-size:16px;font-weight:500}
.s-settings .odes h3+.small{margin-top:2px}
.s-settings .odes p.f{margin:12px 0 0}
.s-settings .odes .chips{margin-top:6px}
.s-settings .odes .chip-b[disabled]{color:var(--ink-3);border-style:dashed;cursor:default}
.s-settings .odes .unsure,.s-settings .odes>.meta{margin-top:8px}
.s-settings .odes .owncol{border-bottom:0;padding-bottom:0}
.s-settings .odstop{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px}
.s-settings #setVoiceEdit{margin-top:14px}

/* The wizard.css rule for reduced motion comes last of all, so no rule
   above can start an animation it stops. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}