/* The agency's own screens — bringing a site in, asking a reviewer to look, and where their link
   lands — are one screen in three files. The pieces live here once, in PACE's names (house.css),
   so the three cannot drift apart again the way they had. */
*{box-sizing:border-box}
/* .screen and .line are flex, and flex wins over the hidden attribute unless this says otherwise */
[hidden]{display:none!important}
html{background:var(--pace-shade)}
body{font:15px/1.5 var(--pace-font);color:var(--pace-ink);letter-spacing:-.005em;margin:0;padding:28px;
  -webkit-font-smoothing:antialiased}
/* The house's canvas, held to the window rather than the page: it reaches the bottom however long the
   page runs and however far it is scrolled, on a phone too, where a fixed background is not kept. */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--pace-canvas);pointer-events:none}
a{color:var(--pace-ink);text-decoration:underline;text-decoration-color:var(--pace-ink-3);text-underline-offset:3px;
  transition:text-decoration-color .2s var(--pace-ease)}
a:hover{text-decoration-color:var(--pace-ink)}
main{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1{font:600 22px/1.2 var(--pace-display);letter-spacing:-.02em;margin:0}
h2{font:600 20px/1.25 var(--pace-display);letter-spacing:-.02em;margin:0 0 6px}
p{margin:0}
.eyebrow{font:var(--pace-tiny)/1 var(--pace-font);font-weight:600;letter-spacing:.095em;
  text-transform:uppercase;color:var(--pace-ink-3);margin:0 0 10px}
.lede{color:var(--pace-ink-2);margin:0 0 14px}
.card{background:var(--pace-glass);-webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur);
  border:var(--pace-edge);border-radius:var(--pace-r-lg);box-shadow:var(--pace-lift);padding:24px 26px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a.pill,.pill{height:38px;padding:0 18px;border-radius:var(--pace-pill);display:inline-flex;align-items:center;
  gap:8px;background:var(--pace-ink);color:var(--pace-on-ink);font-size:14px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;transition:transform .2s var(--pace-ease),background .2s var(--pace-ease),box-shadow .2s var(--pace-ease)}
.pill:hover:not(:disabled){background:var(--pace-ink-hard);box-shadow:var(--pace-lift-sm)}
.pill.ghost{background:var(--pace-glass-2);color:var(--pace-ink);border:0;box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair)}
.pill.ghost:hover:not(:disabled){background:var(--pace-solid);box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair),var(--pace-lift-sm)}
.pill.small{height:30px;padding:0 13px;font-size:13px}
.pill:disabled{opacity:.4;cursor:default}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--pace-tiny);padding:2px 9px;border-radius:var(--pace-pill);
  background:var(--pace-sunk);color:var(--pace-ink-2);font-weight:500}
.tag svg,.pill svg{width:11px;height:11px;flex:none}
/* a copy is told by its mark, never a colour: the real site is solid ink with a filled dot; the test copy
   is white, ringed in pale grey, faintly hatched, with a flask, and says so more lightly */
.pill.live{font-weight:600}
.pill.test,.tag.test{background-color:var(--pace-solid);background-image:var(--pace-warn-hatch);color:var(--pace-ink-2);font-weight:400;
  box-shadow:inset 0 0 0 var(--pace-line) var(--pace-warn)}
.pill.test:hover:not(:disabled){background-color:var(--pace-solid);color:var(--pace-ink);box-shadow:inset 0 0 0 var(--pace-line) var(--pace-warn),var(--pace-lift-sm)}
.dot{width:11px;height:11px;border-radius:var(--pace-round);background:var(--mark,var(--pace-hair-2));flex:none}
/* a state is a shape, never a colour: in is a solid dot; waiting on you is a ring; not yet is a faint
   ring; blocked is a solid diamond */
.s-in{--mark:var(--pace-live)}
.s-hers{--mark:var(--pace-solid);box-shadow:inset 0 0 0 var(--pace-line-2) var(--pace-ink)}
.s-later{--mark:transparent;box-shadow:inset 0 0 0 var(--pace-line) var(--pace-ink-3)}
.s-bad{--mark:var(--pace-bad);border-radius:2px;transform:rotate(45deg) scale(.85)}
.line{display:flex;gap:10px;padding:10px 0;border-bottom:var(--pace-line) solid var(--pace-hair);align-items:center;
  width:100%;text-align:left}
.line:last-child{border-bottom:0}
.line b{font-size:13.5px;font-weight:600}
/* the dot is a span too, so this has to be the LAST one or both take the free space and
   the whole row drifts into the middle */
.line>span:last-child{font-size:var(--pace-tiny);color:var(--pace-ink-2);margin-left:auto}
/* the one number she is looking for down the list: how many notes wait on her here */
.line>span.waits{color:var(--pace-ink);font-weight:600}
button.line{cursor:pointer}
button.line:hover b{text-decoration:underline}
.say{display:flex;align-items:center;gap:8px;min-height:54px;padding:7px 7px 7px 20px;
  border-radius:var(--pace-pill);background:var(--pace-solid);box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair),var(--pace-lift-sm);
  transition:box-shadow .25s var(--pace-ease)}
.say:focus-within{box-shadow:inset 0 0 0 var(--pace-line) var(--pace-ink-3),var(--pace-focus),var(--pace-lift-sm)}
.say input{flex:1;align-self:stretch;border:0;background:none;outline:none;font:inherit;min-width:0;width:0}
.say input::placeholder{color:var(--pace-ink-3)}
.code{font:13px/1.5 var(--pace-mono);background:var(--pace-sunk);
  border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-sm);padding:12px 14px;overflow-x:auto;
  white-space:nowrap;user-select:all;margin:0 0 12px}
#refer-link{white-space:normal;overflow-wrap:anywhere}   /* a link read whole, even on a phone */
.letter{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px 16px;border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-sm);background:var(--pace-solid);font-size:14px;line-height:1.5}
.muted{font-size:12.5px;color:var(--pace-ink-2)}
.warn{font-size:12.5px;color:var(--pace-ink);font-weight:600;margin-top:10px}
.warn::before,.fixbox b::before{content:"!";display:inline-grid;place-items:center;width:15px;height:15px;margin-right:6px;border-radius:var(--pace-round);
  background:var(--pace-ink);color:var(--pace-on-ink);font-size:10px;vertical-align:1px}
.dropping{outline:2px dashed var(--pace-ink);outline-offset:4px;border-radius:var(--pace-r-sm)}
label.pill{cursor:pointer}
.screen{display:flex;flex-direction:column;gap:18px}
.empty{text-align:center;padding:18px 0 22px}
.empty h2{margin-bottom:6px}
/* A note in the inbox: the picture your client was looking at, beside the number on their pin
   and the words they wrote. A kept page is a whole page, so it is shrunk rather than cropped. */
.note{display:flex;gap:14px;padding:14px 0;border-bottom:var(--pace-line) solid var(--pace-hair);align-items:flex-start;cursor:pointer}
.note:last-child{border-bottom:0}
.note.is-done{opacity:.72}
.said{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.who .at{font-size:13.5px;font-weight:600;font-family:var(--pace-mono)}
.note:hover .at{text-decoration-color:var(--pace-ink)}
.who>span:last-child{font-size:var(--pace-tiny);color:var(--pace-ink-3);margin-left:auto;white-space:nowrap}
/* the same mark as the pin your client is looking at (review.css .rv-pin): black with its number while it
   is open; once done, white in a grey ring with a small tick */
.num{width:22px;height:22px;border-radius:var(--pace-round);background:var(--pace-ink);color:var(--pace-on-ink);
  font:700 12px/22px var(--pace-font);text-align:center;flex:none;box-shadow:var(--pace-lift-sm)}
.note.is-done .num{background:var(--pace-solid);color:var(--pace-ink-2);font-size:11px;
  box-shadow:inset 0 0 0 var(--pace-line-2) var(--pace-ink-3)}
.words{font-size:14.5px;letter-spacing:-.006em}
.changed{font-size:13.5px;color:var(--pace-ink);font-weight:500}
/* a line said under the pin since: the client's at the edge, yours set in a little */
.line{font-size:13.5px;padding-left:10px;box-shadow:inset var(--pace-line-2) 0 0 var(--pace-hair)}
.line.ours{margin-left:14px}
.shot{width:136px;height:96px;flex:none;border-radius:var(--pace-r-sm);overflow:hidden;position:relative;
  background:var(--pace-sunk);border:var(--pace-line) solid var(--pace-hair);display:block}
.shot iframe{position:absolute;top:0;left:0;width:1120px;height:790px;border:0;transform:scale(.1215);
  transform-origin:0 0;pointer-events:none;background:var(--pace-solid)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.say.small{min-height:38px;padding:4px 4px 4px 14px;margin-top:2px}
.say.small input{font-size:13.5px}
.note .warn{margin-top:0}

/* Last, so it has the say on everything above it. A row is a thing you press with a thumb; and a
   phone is too narrow to sit a picture beside the words, so the picture goes up beside the line
   that names the page, and the note and the box you answer it in get the whole width. */
@media (max-width:700px){body{padding:16px}.pill,a.pill,.pill.small{height:44px}
  .line{padding:14px 0}
  .note{display:grid;grid-template-columns:96px 1fr;column-gap:10px;row-gap:6px}
  .shot{grid-column:1;grid-row:1;width:96px;height:68px}
  .shot iframe{transform:scale(.0857)}
  .said{display:contents}
  .who{grid-column:2;grid-row:1;flex-wrap:wrap}
  .who>span:last-child{margin-left:0;flex-basis:100%;white-space:normal}
  .said>:not(.who){grid-column:1/-1}
  .say.small{min-height:44px}
}
/* an agency's own address: the record to add, one field to a row */
.step{margin-top:16px}.step h3{font-size:15px;margin:0 0 2px;font-weight:600}.step .muted{margin-top:6px}
/* an agency's own address: the one record, a part to a line with its own copy button, and where it stands */
.parts{margin-top:10px;border-radius:var(--pace-r-sm);background:var(--pace-sunk);padding:4px 14px}
.part{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--pace-line) solid var(--pace-hair)}
.part:last-child{border-bottom:0}
.part .found{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--pace-ink-2)}
.part span{font-size:var(--pace-tiny);color:var(--pace-ink-3);text-transform:uppercase;letter-spacing:.04em}
.part code{font-family:var(--pace-mono);font-size:14px;word-break:break-all}
.copy{min-width:74px}
.path{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:13.5px}
.path i{font-style:normal;background:var(--pace-solid);border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-xs);padding:3px 8px}
.path em{font-style:normal;color:var(--pace-ink-3)}
.steps3{display:flex;gap:12px;margin:14px 0 4px}
.steps3 div{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--pace-ink-3)}
.steps3 div.on{color:var(--pace-ink);font-weight:600}.steps3 div.done{color:var(--pace-ink-2)}
.fixbox{margin-top:14px;border-radius:var(--pace-r-sm);background:var(--pace-bad-soft);padding:12px 14px;font-size:13.5px;
  box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair)}
.fixbox b{display:block;margin-bottom:4px}
.liveurl{font-size:20px;font-weight:600;color:var(--pace-ink);text-decoration:none;word-break:break-all}
@media (max-width:480px){.part{grid-template-columns:1fr auto;gap:2px 12px}.part span{grid-column:1/-1}.steps3{flex-direction:column;gap:8px}}
/* The frame: a glass bar across the top and a glass rail down the side, the page passing blurred
   beneath both. On a phone the rail folds away behind the menu button and comes back over the page. */
body.framed{padding:92px 32px 64px 280px}
body.framed:has(.rail[hidden]){padding-left:32px}
body.framed main{max-width:820px;margin:0}
/* with no rail (the first question) the one card stands in the middle */
body.framed:has(.rail[hidden]) main{max-width:560px;margin:0 auto}
.framed .topbar .pill{height:32px}
.tag{white-space:nowrap}
.line>span:last-child{white-space:nowrap}
.framed .topbar{position:fixed;top:0;left:0;right:0;z-index:20;height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:var(--pace-glass);-webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur);
  border-bottom:var(--pace-line) solid var(--pace-hair)}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;font:600 16px/1 var(--pace-display);letter-spacing:-.02em}
.mark{width:22px;height:22px;border-radius:var(--pace-round);background:var(--pace-ink);color:var(--pace-on-ink);
  display:grid;place-items:center;font-size:11px;font-weight:600}
.framed .menu{display:none;width:36px;height:36px;margin-left:-8px;border-radius:var(--pace-round);place-items:center;color:var(--pace-ink)}
.framed .menu:hover{background:var(--pace-sunk)}
.framed .rail{position:fixed;top:76px;left:16px;bottom:16px;width:232px;z-index:10;display:flex;flex-direction:column;gap:2px;padding:14px 10px;
  border-radius:var(--pace-r-lg);background:var(--pace-glass);-webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur);
  border:var(--pace-edge);box-shadow:var(--pace-lift)}
.framed .rail .eyebrow{padding:10px 12px 6px;margin:0}
.framed .rail button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:var(--pace-r-sm);text-align:left;
  font-size:13.5px;color:var(--pace-ink-2);transition:background .2s var(--pace-ease),color .2s var(--pace-ease),box-shadow .2s var(--pace-ease)}
.framed .rail button svg{width:16px;height:16px;flex:none}
.framed .rail button:hover{background:var(--pace-sunk);color:var(--pace-ink)}
.framed .rail button.on{background:var(--pace-solid);color:var(--pace-ink);font-weight:500;box-shadow:var(--pace-lift-sm)}
.framed .shade{position:fixed;inset:0;z-index:25;background:var(--pace-scrim);-webkit-backdrop-filter:var(--pace-blur-2);backdrop-filter:var(--pace-blur-2)}
@media (max-width:760px){
  body.framed,body.framed:has(.rail[hidden]){padding:76px 16px 48px}
  .framed .topbar{height:56px;padding:0 14px}
  .framed .menu:not([hidden]){display:grid}
  .framed .rail{top:68px;left:10px;bottom:auto;width:min(280px,calc(100% - 20px));z-index:30;
    opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;visibility:hidden;
    transition:opacity .3s var(--pace-ease),transform .3s var(--pace-ease),visibility 0s .3s}
  body.framed.open .rail{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
  .framed .rail button{padding:12px}
  .line{flex-wrap:wrap;row-gap:4px}
}
/* Signed out, the sign-in card is all there is: narrow and in the middle of the window, as the
   review layer's own sign-in card is (review.css .rv-si-card), on a computer and on a phone. */
body:has(#signin:not([hidden])){min-height:100dvh;display:grid;place-items:center}
body:has(#signin:not([hidden])){grid-template-columns:minmax(0,410px);justify-content:center}
#signin{padding:32px 28px 24px;overflow:hidden}
/* A button held down, whether or not anything moves: the house's own pressed colours */
.pill:active:not(:disabled){background:var(--pace-ink-hard)}.pill.ghost:active:not(:disabled){background:var(--pace-sunk-2)}
/* How these screens move: the review layer's movement, in its numbers, on the house's one easing. A card
   or a row arrives the way a review panel does, a button gives under a press, and a change of state
   fades rather than flips. None of it is here for anyone whose computer asks for less motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(6px) scale(.97)}}
  @keyframes fade{from{opacity:0}}
  @keyframes mark{from{outline-color:transparent;outline-offset:12px}}
  .card,.line,.note{animation:rise .3s var(--pace-ease)}
  #signin>*,.warn,.muted[aria-live],#sites-says{animation:fade .2s var(--pace-ease)}
  .dropping{animation:rise .3s var(--pace-ease),mark .2s var(--pace-ease)}
  .pill,.line,.note{transition:background .2s,color .2s,opacity .2s,transform .15s;transition-timing-function:var(--pace-ease)}
  .pill:active:not(:disabled){transform:scale(.97)}
  button.line:active,.note:active{transform:scale(.99)}
  .pulse{animation:pulse 1.4s var(--pace-ease) infinite}
  @keyframes pulse{50%{opacity:.35}}
}

/* Waiting, in the review layer's own marks (review.css .is-busy, .rv-sk): a button that has asked dims a
   little and a small ring turns beside its words; lines still coming are grey shapes that shimmer; a file
   going up fills a bar. With less motion asked for, the ring and the shapes stay, still. */
.pill.is-busy{opacity:.85;padding-right:34px;position:relative;cursor:default}
.pill.is-busy::after{content:'';position:absolute;right:12px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-radius:var(--pace-round);border:var(--pace-line-2) solid currentColor;border-right-color:transparent;opacity:.9}
.sk{display:block;height:12px;border-radius:var(--pace-r-xs);background:linear-gradient(90deg,var(--pace-sunk-2) 30%,var(--pace-sunk) 50%,var(--pace-sunk-2) 70%) 0 0/300% 100%}
.sk.dot{width:11px;height:11px;border-radius:var(--pace-round)}.line.is-sk>.sk:last-child{margin-left:auto}
.note.is-sk .shot{height:96px;border:0}.note.is-sk .said{gap:10px;padding-top:4px}.note.is-sk .said .sk:first-child{height:14px}
h2 .sk,.lede .sk{display:inline-block;height:.9em;vertical-align:middle}
.bar{display:block;height:6px;margin:4px 0 8px;border-radius:var(--pace-pill);background:var(--pace-sunk-2);overflow:hidden}
.bar>i{display:block;height:100%;width:var(--done,0%);border-radius:inherit;background:var(--pace-accent)}
.line.is-still{animation:none}
@media (prefers-reduced-motion:no-preference){
  .pill.is-busy::after{animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .sk{animation:shimmer 1.4s linear infinite}
  @keyframes shimmer{to{background-position:-150% 0}}
  .bar>i{transition:width .3s var(--pace-ease)}
  .bar.is-going>i{width:30%;animation:going 1.2s var(--pace-ease) infinite alternate}
  @keyframes going{from{transform:translateX(-100%)}to{transform:translateX(330%)}}
  .landed{animation:landed 1.6s var(--pace-ease);border-radius:var(--pace-r-xs)}
  @keyframes landed{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:none;background:var(--pace-good-soft);box-shadow:0 0 0 var(--pace-halo) var(--pace-good-soft)}}
  .landed .dot{animation:pop .5s var(--pace-ease) .15s}
  @keyframes pop{50%{transform:scale(1.7)}}
}
@media (prefers-reduced-motion:reduce){.pill.is-busy::after{border-right-color:currentColor;opacity:.4}.bar.is-going>i{width:100%;opacity:.35}}

/* The agency's screens, the whole width of the window: an icon rail down the left and a top bar, both
   the house's glass, with the page going by blurred behind them. */
.wide{--rail:200px;--bar:60px;padding:0}
.wide .rail,.wide .top{background:var(--pace-glass);-webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur)}
.wide main{max-width:none;margin:0;gap:0}
.wide main:has(>.rail:not([hidden])){padding-left:var(--rail)}
.rail{position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--rail);display:flex;flex-direction:column;gap:4px;
  padding:12px;border-right:var(--pace-line) solid var(--pace-hair)}
.rail .brand{display:flex;align-items:center;gap:10px;margin:0 0 14px 4px}
.rail button{height:40px;padding:0 10px;border-radius:var(--pace-r-sm);display:flex;align-items:center;gap:10px;color:var(--pace-ink-2);text-align:left}
.rail button:hover{background:var(--pace-sunk);color:var(--pace-ink)}
.rail svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail button.on{background:var(--pace-solid);color:var(--pace-ink);box-shadow:var(--pace-lift-sm)}
.rail .eyebrow{padding:10px 10px 4px;margin:0}
.rail .short{display:none}
.rail .count{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--pace-pill);
  background:var(--pace-ink);color:var(--pace-on-ink);font:600 var(--pace-tiny)/18px var(--pace-font)}
.wide .top{position:sticky;top:0;z-index:20;height:var(--bar);padding:0 28px;border-bottom:var(--pace-line) solid var(--pace-hair)}
.wide .screen{padding:28px}
.wide .screen{width:100%;max-width:776px;margin:0 auto}
/* finishing with a site sits at the foot of its screen, under a rule, away from the everyday buttons */
.finish{margin-top:auto;padding-top:36px;background:linear-gradient(var(--pace-hair),var(--pace-hair)) 0 18px/100% var(--pace-line) no-repeat}
/* The studio's own screens: the Dashboard (its websites for review and its brand), Notes, Billing, Team,
   Settings and each website's own, one column of cards the width of the page, in the first minute's look (.coming). */
.wide .screen:is(#screen-sites,#screen-notes,#screen-billing,#screen-team,#screen-settings,#screen-site){max-width:1100px;margin:0}
.screen:is(#screen-billing,#screen-team,#screen-settings) .lede,.screen:is(#screen-billing,#screen-team,#screen-settings)>p{margin-bottom:0}
.coming .rail .count{background:#7544c9}
.wide .screen:is(#screen-sites,#screen-notes,#screen-billing,#screen-team,#screen-settings,#screen-site)>:not(.vh,[hidden])~*{margin-top:18px}
.coming .screen>.card,.notebook{border-radius:var(--pace-r-lg);padding:24px 24px 22px}
.screen .eyebrow small{font-size:var(--pace-tiny);text-transform:none;letter-spacing:0;color:var(--pace-ink-3);margin-left:4px}
.screen .card.quiet{background:var(--pace-sunk);box-shadow:none}
.screen .card.quiet p:not(.eyebrow){margin:0 0 8px}
.link{all:unset;cursor:pointer;color:#7544c9;font-size:14px;font-weight:500}
.link:hover{text-decoration:underline}
/* finding one domain among thirty */
.find{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 14px}
.find input[type=search],#notes-site{font:inherit;font-size:14px;padding:8px 12px;border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-sm);
  background:var(--pace-solid);color:var(--pace-ink)}
.find input[type=search]{flex:1;max-width:320px}
.find label{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--pace-ink-2)}
/* a table of domains, or of a bill: a line under each row, the heading in small capitals */
table.domains,table.bill{width:100%;border-collapse:collapse;font-size:14px}
:is(table.domains,table.bill) th{font-size:var(--pace-tiny);text-transform:uppercase;letter-spacing:.06em;color:var(--pace-ink-2);font-weight:600;text-align:left;padding:0 12px 10px}
:is(table.domains,table.bill) td{padding:13px 12px;border-top:var(--pace-line) solid var(--pace-hair);vertical-align:middle}
table.domains th[data-sort]{cursor:pointer;user-select:none}
table.domains th[data-sort]:hover{color:#7544c9}
table.domains th.by{color:#5b3aa0}
table.domains th.by::after{content:" \2193"}
table.domains th.by.up::after{content:" \2191"}
table.domains td small{display:block;margin-top:2px;color:var(--pace-ink-2);font-size:12.5px}
table.domains td.n{font-variant-numeric:tabular-nums}
table.domains .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pace-ink-3);margin-right:7px;vertical-align:1px}
table.domains .dot.s-in{background:#7544c9}
.site{cursor:pointer}
.site:hover td,.site:focus-visible td{background:#f6f0fd;outline:0}
.site.is-out{display:none}
.site.dropping td{box-shadow:inset 0 0 0 2px #7544c9}
table.bill .r{text-align:right;font-variant-numeric:tabular-nums}
table.bill tr.total td{font-weight:600}
table.bill tr.muted td{color:var(--pace-ink-2)}
#bill .row{margin-top:12px}
#signin-sent .row{margin:16px 0 4px}
/* the client's bar as they see it, with the studio's logo (or its name, until there is one) and, below Studio, our mark */
.clientbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:var(--pace-pill);background:var(--pace-solid);box-shadow:0 8px 24px #7946c718;border:1px solid #ece4f7;font-size:14px}
.clientbar img{height:28px;width:auto;max-width:180px;object-fit:contain}
.clientbar .logo-none{font-weight:700;color:#5b3aa0;padding:4px 10px;border:1px dashed #c9b0ec;border-radius:var(--pace-r-sm)}
.clientbar .ours{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.clientbar .ours i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:#fff;background:linear-gradient(145deg,#a466e7,#7140c7);font:600 13px/1 Georgia,serif}
.clientbar .ours.beside{margin-left:auto;font-weight:400;color:var(--pace-ink-2)}
#logo-card .says{margin:12px 0}
#logo-card .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#logo-card .row .muted{font-size:13px}
/* the three ways to pay, the one they are on in the soft lilac; hosting, not sold yet, greyed */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.plans>.plan:nth-child(4){grid-column:1/-1}   /* the Founding pass, a band under the three */
.plan{border-radius:18px;padding:18px;border:1px solid #ece4f7;background:var(--pace-solid);display:flex;flex-direction:column;align-items:flex-start}
.plan.on{border-color:#c9b0ec;background:linear-gradient(120deg,#f6effd,#fff3f6)}
.plan h3{margin:0;font-size:16px}
.plan .price{font:600 22px/1.2 var(--pace-display);margin:6px 0 10px}
.plan .price small{font-size:13px;font-weight:400;color:var(--pace-ink-2)}
.plan ul{margin:0 0 14px;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:3px}
.plan .muted{font-size:13px;margin-top:auto}
.plan .tag{font-size:var(--pace-tiny);padding:3px 8px;border-radius:var(--pace-pill);background:#f1ebfa;color:#5b3aa0;font-weight:600;vertical-align:2px}
.card.soon{opacity:.5}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.big{font-size:34px;font-weight:500;letter-spacing:-.05em;line-height:1.1;margin:6px 0 4px}
.big small{font-size:15px;letter-spacing:0;color:var(--pace-ink-2);font-weight:400}
/* a note, with the number on the pin your client sees */
:is(#waits,#peek) .waiting{all:unset;box-sizing:border-box;display:flex;gap:10px;width:100%;padding:10px 12px;border-radius:var(--pace-r-sm);cursor:pointer;color:inherit}
:is(#waits,#peek) .waiting:hover,#waits .waiting.on{background:#f1ebfa}
:is(#waits,#peek) .waiting[hidden]{display:none}
:is(#waits,#peek) .waiting>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
:is(#waits,#peek) .n{flex:none;width:22px;height:22px;border-radius:50% 50% 50% 2px;background:#7544c9;color:#fff;font:600 11px/22px var(--pace-font);text-align:center}
:is(#waits,#peek) .words{font-size:14px;font-weight:600}
#waits .waiting.on .words{color:#5b3aa0}
:is(#waits,#peek) .where,:is(#waits,#peek) .back{font-size:12.5px;color:var(--pace-ink-2)}
#peek{display:grid}
#peek>.pill{justify-self:start;margin-top:8px}
/* Notes: the list beside the note being read, the height of the window */
.notebook{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - var(--bar) - 130px);padding:0;overflow:hidden}
.notebook .list{border-right:var(--pace-line) solid var(--pace-hair);padding:18px 10px;overflow:auto}
.notebook .list .eyebrow{padding:0 12px 8px}
#notes-site{width:100%;margin:0 0 8px}
#waits-none{padding:4px 12px;font-size:14px}
.notebook .read{padding:26px 30px;display:flex;flex-direction:column;gap:14px}
.notebook .read blockquote{margin:0;font-size:17px;line-height:1.5}
.notebook .pinned{flex:1;min-height:260px;display:flex;border-radius:var(--pace-r-sm);overflow:hidden;background:linear-gradient(120deg,#f6effd,#fff3f6);border:1px solid #e3d2f3}
.notebook .pinned .shot{flex:1;display:block;width:100%;height:auto;min-height:260px;aspect-ratio:auto}
.notebook .pinned span.shot{display:grid;place-items:center;background:none}
.notebook .pinned span.shot::after{content:"No picture of the page was taken with this note.";font-size:13px;color:var(--pace-ink-3)}
.notebook .pinned iframe,.notebook .pinned img{width:100%;height:100%;border:0;object-fit:cover;object-position:top}
.notebook .reply-words{font:inherit;font-size:14px;padding:10px 12px;border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-sm);resize:vertical}
.notebook .read .row{display:flex;flex-wrap:wrap;gap:8px}
/* a step up, offered at the wall it removes */
.offer,.nudge{margin-top:16px;padding:18px 18px 16px;border-radius:18px;background:linear-gradient(120deg,#f6effd,#fff3f6);border:1px solid #e3d2f3}
.nudge{margin:10px 0 4px}
/* not open yet (our hosting): in view, pale and dashed; the only thing in it to press is asking to be told */
.offer.soon{background:var(--pace-sunk);border:1px dashed var(--pace-ink-3)}
.soon .say-it,.soon .lede{color:var(--pace-ink-2)}
.soon .muted,.soon .lede{font-size:16px;line-height:1.5}
.soon .pill:disabled{cursor:not-allowed}
.soon-tag{float:right;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--pace-pill);background:var(--pace-sunk-2);color:var(--pace-ink-2)}
.soon .told{margin-top:12px}
#copy-pick .soon-tag{float:none;display:inline-block;margin-bottom:10px}   /* a narrow column: the tag above the words, not squeezing them */
.say-it{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.35}
.offer .muted,.nudge .muted{margin-top:6px}
.steps{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:10px;align-items:baseline;color:var(--pace-ink-2)}
.steps li:before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;background:#f6f0fd;color:#7544c9;font:600 12px/22px var(--pace-font);text-align:center}
.steps li.done{color:var(--pace-ink)}.steps li.done:before{content:"\2713";background:#7544c9;color:#fff}
.steps a{color:#7544c9}
#notes .note.is-picked{outline:var(--pace-line-2) solid var(--pace-ink);outline-offset:6px;border-radius:var(--pace-r-xs)}
/* a phone: the rail is a dock at the bottom */
@media (min-width:701px){
  .wide{--rail:232px}
  .wide main:has(>.rail:not([hidden])){padding-left:calc(var(--rail) + 16px)}
  .wide main:has(>.rail:not([hidden])) .top{margin-left:calc(-16px - var(--rail))}
  .rail{top:calc(var(--bar) + 16px);left:16px;bottom:auto;border:var(--pace-edge);border-radius:var(--pace-r-lg);box-shadow:var(--pace-lift)}
}
@media (max-width:860px){.notebook{grid-template-columns:1fr}.notebook .list{border-right:0;border-bottom:var(--pace-line) solid var(--pace-hair);max-height:40vh}}
@media (max-width:700px){
  .wide main:has(>.rail:not([hidden])){padding:0 0 calc(64px + env(safe-area-inset-bottom))}
  .rail{top:auto;right:0;height:calc(64px + env(safe-area-inset-bottom));width:auto;flex-direction:row;justify-content:space-around;
    padding:0 12px env(safe-area-inset-bottom);border-right:0;border-top:var(--pace-line) solid var(--pace-hair)}
  .rail .brand{display:none}
  .rail button{flex:1;height:auto;padding:6px 2px;flex-direction:column;gap:3px;font-size:var(--pace-tiny);text-align:center;position:relative}
  .rail .count{position:absolute;top:2px;left:calc(50% + 6px)}
  .wide .top{padding:0 16px}
  #top-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail button{min-width:0;font-size:10.5px}
  .wide .screen{padding:16px}
  .rail .eyebrow{display:none}
  /* the dock's tabs say it in one short word each, on one line */
  .rail button>span:has(+.short){display:none}
  .rail .short{display:inline}
  .rail button>span{white-space:nowrap}
  /* the bill's money column keeps its heading and its sums on one line */
  table.bill .r{white-space:nowrap}
  table.bill :is(th,td){padding-left:8px;padding-right:8px}
  table.domains :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(5)){display:none}
  table.domains td:first-child{overflow-wrap:break-word}
}
/* A switch: on is ink, off is grey. */
.switch{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--pace-ink-2);cursor:pointer}
.switch input{appearance:none;flex:none;width:36px;height:22px;margin:0;border-radius:11px;background:var(--pace-ink-3);position:relative;cursor:pointer;transition:background .2s var(--pace-ease)}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--pace-lift-sm);transition:transform .2s var(--pace-ease)}
.switch input:checked{background:var(--pace-ink)}
.switch input:checked::after{transform:translateX(14px)}
.switch input:disabled{opacity:.5}
.switch input:focus-visible{outline:2px solid var(--pace-ink);outline-offset:2px}
.switch:first-child{margin-top:0}.switch+.muted{margin:6px 0 0 46px}   /* its line sits under its words */
/* A choice from a short list, its words before it, sat under a switch. */
.choose{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:14px;color:var(--pace-ink-2)}
.choose select{font:inherit;color:var(--pace-ink);padding:5px 10px;border:0;border-radius:var(--pace-pill);background:var(--pace-glass-2);
  box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair);cursor:pointer}
.choose select:focus-visible{outline:2px solid var(--pace-ink);outline-offset:2px}
/* The bill, quiet above the sites. */
#trial .warn{margin:0}
/* The foot of the sites and sign-in screens: the terms and the privacy page, quiet. */
.legal{display:flex;justify-content:center;gap:18px;padding:24px 0 4px}
.legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:14px;color:var(--pace-ink-2);text-decoration:none}
.legal a:hover{color:var(--pace-ink)}
main:has(>.rail:not([hidden]))+.legal{padding-left:var(--rail)}

/* The first minute: signing in, the agency's name, and the sites screen before any site is on it
   (body.coming, set by the page). These wear the home page's own look, as web/assets/home.css has it:
   its mark, its lilac and pink glow on white, its violet buttons. The working screens keep the house's. */
.top .brand-symbol{display:none}
.coming{--pace-canvas:radial-gradient(at 25% 18%,#f3e9ff80,#0000 40%),radial-gradient(at 73% 10%,#ffe5ed70,#0000 36%),
  radial-gradient(at 100% 8%,#f5e7ff80,#0000 36%),radial-gradient(at 0 36%,#ffece960,#0000 36%),radial-gradient(at 92% 76%,#efebff65,#0000 38%),#fff;
  --pace-ink:#19191d;--pace-ink-2:#686870;--pace-focus:0 0 0 4px #7946c714}
/* past the first screen of a long page (a full-page picture, the bounce at the bottom) the page is its canvas's white, not grey */
html:has(>body.coming){background:#fff}
.coming .brand-symbol{display:inline-grid;place-items:center;width:26px;height:26px;padding-bottom:4px;border-radius:9px;
  color:#fff;background:linear-gradient(145deg,#a466e7,#7140c7);font:600 22px/1 Georgia,serif;letter-spacing:-1px;text-transform:lowercase;box-shadow:inset 0 1px #ffffff30}
.coming .top{display:flex;align-items:center;gap:10px}
.coming .top h1{flex:none;margin-right:auto;display:flex;align-items:center;gap:9px;font-size:21px;font-weight:600;letter-spacing:-1.1px;text-transform:lowercase}
.coming .rail button.on{background:#f1ebfa;color:#7544c9;box-shadow:none}
.coming .pill:not(.ghost,.test){background:linear-gradient(120deg,#8750d8,#7544c9);box-shadow:0 7px 20px #7946c724}
.coming .pill:not(.ghost,.test):hover:not(:disabled){background:linear-gradient(120deg,#8750d8,#7544c9);box-shadow:0 12px 28px #7946c729;transform:translateY(-2px)}
.coming .pill:not(.ghost,.test):active:not(:disabled){background:#6a3bb8}
.coming .say:focus-within{box-shadow:inset 0 0 0 var(--pace-line) #c9b2ee,var(--pace-focus)}
.coming :is(#signin,#screen-name .card,#sites-empty){border:1px solid #ece4f7;border-radius:24px;background:#ffffffe0;box-shadow:0 20px 60px #7946c714,0 2px 6px #0000000a}
.coming :is(#signin,#screen-name .card){padding:34px 34px 30px}
.coming :is(#signin,#screen-name) .eyebrow{display:inline-flex;margin:0 0 18px;padding:6px 14px;border-radius:100px;background:linear-gradient(110deg,#f2e9fc,#fff0f3);
  border:1px solid #dfc9f1;color:#51435e;font:500 13px/1.5 var(--pace-font);letter-spacing:0;text-transform:none}
.coming :is(#signin,#screen-name,#sites-empty) :is(h1,h2){font-weight:500;letter-spacing:-.045em;line-height:1.08}
.coming #signin h1{font-size:34px}
.coming :is(#screen-name,#sites-empty) h2{font-size:28px}
.coming :is(#signin,#screen-name,#sites-empty) .lede{margin:12px 0 22px;font-size:15px;line-height:1.55}
.coming .grad{background:linear-gradient(95deg,#7544c9,#c05bb4);-webkit-background-clip:text;background-clip:text;color:transparent}
#signin .small{margin:14px 0 0;text-align:center;font-size:12px;color:#94949c}
body.coming:has(#signin:not([hidden])){grid-template-columns:minmax(0,460px);padding:0 16px}
.coming main:has(>#signin:not([hidden])) .top{position:fixed;left:0;right:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.coming #screen-name:not([hidden]){min-height:calc(100dvh - var(--bar) - 120px);display:grid;place-items:center}
.coming #screen-name .card{width:min(460px,100%)}
.coming #sites-empty{padding:30px 30px 28px}
.coming #sites-empty .lede{max-width:400px;margin:12px 0 24px}
#sites-card:has(#sites-empty:not([hidden])) .phead .pill{display:none}
@media (max-width:600px){.coming #sites-empty{padding:22px 18px 20px}}
.ahead{display:none}
.coming .ahead{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;border-radius:20px;background:linear-gradient(135deg,#f2e9fc,#fff0f3);border:1px solid #e7d6f5}
.ahead svg{width:28px;height:28px;fill:none;stroke:#7544c9;stroke-width:1.6;stroke-linecap:round}
@media (max-width:480px){.coming :is(#signin,#screen-name .card){padding:28px 20px 22px}}

/* Tweakpin | ACCURO: the product is the name; a hairline, then the company in spaced capitals. Only where
   Tweakpin names itself: what a client reads carries the studio's name alone. */
.acc{padding:.3em 0 .3em .75em;border-left:1px solid color-mix(in srgb,currentColor 25%,transparent);font:600 .55em/1 var(--pace-font);letter-spacing:.16em;text-transform:uppercase}
.rail .name{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:600 15px/1 var(--pace-display);letter-spacing:-.02em;color:var(--pace-ink)}
/* 176px across will not hold it beside the chip: down the rail, ACCURO goes under the name, no hairline */
/* with the rail beside it, the rail carries ACCURO; on a phone the rail is a dock, and the top bar does */
main:has(>.rail:not([hidden]),>#boot) .top .acc{display:none}
/* Arriving: nothing of the Dashboard is drawn until we know whether this account has had its first-time steps */
/* While the account is getting ready (#boot, gone when the Dashboard or the first-time steps come): the header as it
   will be, and the rail and the first card in outline, where they will be. .sk shimmers; with reduced motion it is still. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.boot-rail{position:fixed;z-index:30;top:calc(var(--bar) + 16px);left:16px;width:var(--rail);display:flex;flex-direction:column;gap:24px;
  padding:24px 22px;background:var(--pace-glass);border:var(--pace-edge);border-radius:var(--pace-r-lg);box-shadow:var(--pace-lift)}
.boot-rail .sk:nth-child(n+2){width:72%}.boot-rail .sk:nth-child(3){width:56%}
.boot{min-height:calc(100vh - var(--bar));padding-left:calc(var(--rail) + 16px)}
.boot-page{max-width:1100px;padding:28px;display:flex;flex-direction:column;gap:45px}
.boot .card{display:flex;flex-direction:column;gap:14px;padding:24px 24px 22px;border-radius:var(--pace-r-lg)}
@media (max-width:700px){
  .boot{padding:0 0 calc(64px + env(safe-area-inset-bottom))}
  .boot-page{padding:16px}
  .boot-rail{top:auto;bottom:0;left:0;right:0;width:auto;height:calc(64px + env(safe-area-inset-bottom));flex-direction:row;align-items:center;
    justify-content:space-around;gap:12px;padding:0 12px env(safe-area-inset-bottom);border:0;border-top:var(--pace-line) solid var(--pace-hair);border-radius:0;box-shadow:none}
  .boot-rail .sk,.boot-rail .sk:nth-child(n){flex:0 1 44px;height:30px;border-radius:var(--pace-r-sm)}
}
/* The first-time steps: one card alone on the page, nothing of the Dashboard behind it (wizard.js) */
.wide #screen-wizard{max-width:600px;min-height:calc(100vh - var(--bar));display:grid;align-content:center}
#screen-wizard>*{min-width:0}
#screen-wizard .wiz-bar{display:flex;gap:6px;margin:0 0 18px}
#screen-wizard .wiz-bar i{flex:1;height:4px;border-radius:4px;background:var(--pace-hair)}
#screen-wizard .wiz-bar i.on{background:#7544c9}
#screen-wizard h2{margin:6px 0 10px}
#screen-wizard .foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
#screen-wizard .foot .link{margin-left:auto}
.how{margin:10px 0;padding-left:20px;font-size:14px;color:var(--pace-ink-2)}
.how li{margin:4px 0}
.found{margin:10px 0 0;font-size:14px}
.found.yes{color:#2f7a4b}
.found.no{color:#9a5b12}
/* The last step: the client's bar as review.css draws it (its pills, glass and mark), large over a small soft website */
.nowrap{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.lite-show{margin:6px 0 16px}
.lite-site{display:grid;gap:9px;align-content:start;height:196px;box-sizing:border-box;padding:18px 22px;border-radius:var(--pace-r-sm);background:linear-gradient(160deg,#fbf8ff,#f1ebfa);border:var(--pace-line) solid var(--pace-hair);opacity:.8}
.lite-site>*{display:block;height:8px;width:38%;border-radius:4px;background:#e4daf3}
.lite-site b{height:18px;width:62%;margin:6px 0 4px;background:#dccdf1}
.lite-site i:last-child{width:50%}
.lite-bar{display:grid;grid-auto-flow:column;justify-content:center;align-items:end;gap:10px;margin-top:-104px;padding:0 8px 18px;white-space:nowrap}
.lite-bar figure{display:grid;justify-items:center;gap:6px;margin:0;min-width:0}
.lite-bar figcaption{font-size:11.5px;color:var(--pace-ink-2)}
.lite-pill,.lite-dock{display:flex;align-items:center;border-radius:var(--pace-pill);background:var(--pace-glass-2);-webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur);border:var(--pace-line) solid var(--pace-rim);box-shadow:var(--pace-lift)}
.lite-pill{gap:8px;height:64px;max-width:100%;padding:0 20px;box-sizing:border-box;font:600 15px/1 var(--pace-font);color:var(--pace-ink)}
.lite-pill svg{flex:none;width:26px;height:26px}
.lite-pill rect{fill:currentColor}
.lite-pill path{fill:none;stroke:var(--pace-on-ink);stroke-width:2.6px;stroke-linecap:round}
.lite-pill b{max-width:200px;overflow:hidden;text-overflow:ellipsis;font:700 18px/1.2 var(--pace-font);letter-spacing:-.01em}
.lite-pill img{display:block;height:30px;width:auto;max-width:150px;object-fit:contain}
.lite-dock{gap:4px;padding:7px;font:500 14.5px/1 var(--pace-font)}
.lite-dock>span{display:flex;align-items:center;height:48px;padding:0 16px;border-radius:var(--pace-pill)}
.lite-dock .lite-go{background:var(--pace-ink);color:var(--pace-solid)}
@media (prefers-reduced-motion:no-preference){
  .lite-now,.lite-then{grid-area:1/1}
  .lite-now{animation:lite-out .6s var(--pace-ease,ease) 1s both}
  .lite-then{animation:lite-in .6s var(--pace-ease,ease) 1s both}
}
@keyframes lite-out{to{opacity:0;filter:blur(3px)}}
@keyframes lite-in{from{opacity:0;filter:blur(3px)}}
@media (prefers-reduced-motion:reduce){.lite-dock{display:none}}
.offerbox{background:#f6f0fd;border-radius:var(--pace-r-sm);padding:14px 16px;margin-top:10px}
.offerbox p{margin:0 0 10px;font-size:14px;white-space:nowrap}
.ticks{list-style:none;margin:0 0 12px;padding:0;font-size:14px;white-space:nowrap}
.ticks li{margin:5px 0;padding-left:22px;position:relative}
.ticks li::before{content:'✓';position:absolute;left:2px;font-weight:700;color:#7544c9}
.offerbox .link{display:inline-block;margin:0 0 12px}
#wiz-lite{display:flex;justify-content:center;width:100%;box-sizing:border-box;white-space:nowrap}
.offerbox p.small{margin:8px 0 0;text-align:center;font-size:12.5px}
/* The Dashboard's two places, each saying in one line what it is */
.phead{display:flex;gap:12px;align-items:start;justify-content:space-between;margin-bottom:14px}
.phead .eyebrow{margin:0}
.phead .says{margin:4px 0 0}
.brandrows{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.brandrows>*{border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-sm);padding:14px 16px;margin:0;box-shadow:none}
.brandrows h3{margin:0 0 4px;font-size:15px}
.brandrows p{font-size:13.5px}
@media (max-width:860px){.brandrows{grid-template-columns:1fr}.phead{flex-direction:column}}
@media (max-width:480px){.bars{grid-template-columns:1fr}}
/* The logo card's bar as the client sees it: one line, at its own size, never squeezed; on a phone, as on the real
   bar, the words go and the logo and our mark stay */
#logo-card .clientbar{width:max-content;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden}
#logo-card .clientbar>*{flex:none}
#logo-card .clientbar .logo-none{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){#logo-card .clientbar>.muted{display:none}}
/* Under the logo, until they are on Studio: what Studio adds, in a line, and the way to it */
#brand-up{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:12px 16px;background:#f6f0fd;border:0}
#brand-up[hidden]{display:none}
#brand-up p{margin:0;font-weight:500}
/* The plan they are on: a small pill under the studio's name in the rail, and beside their email up top; it opens Billing */
.planpill{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--pace-pill);background:#f1e8fc;color:#5b3aa0;
  font:600 11.5px/1 var(--pace-font);letter-spacing:0;white-space:nowrap;cursor:pointer}
.planpill[data-tier=free]{background:var(--pace-sunk);color:var(--pace-ink-2)}
.planpill:hover{background:#e6d6fa}
.planpill[hidden]{display:none}
.rail .planpill{height:22px;padding:0 9px;color:#5b3aa0;gap:0}
.rail .planpill[data-tier=free]{color:var(--pace-ink-2)}
#rail-studio{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.rail .name{min-width:0;max-width:100%;gap:8px}
.top .planpill{margin-left:10px}
@media (max-width:480px){.lite-pill{height:54px;padding:0 14px;font-size:13.5px}.lite-pill svg{width:22px;height:22px}.lite-pill b{max-width:120px;font-size:16px}.lite-dock>span:first-child{display:none}.lite-dock>span{height:42px}}
/* Continue with Google, under the email link on the sign-in screen: a quiet second way in */
#signin .or{display:flex;align-items:center;gap:12px;color:var(--pace-ink-3);font-size:12.5px;margin:0}
#signin .or::before,#signin .or::after{content:"";flex:1;height:1px;background:var(--pace-hair)}
#signin .google{gap:10px;justify-content:center}
#signin .google svg{width:18px;height:18px}
#signin-ask>.google{width:100%;height:44px}
#signin-ask>.or{margin:16px 0 14px}
#signin .google[hidden]{display:none}
#signin-ask>.warn{margin:0 0 14px}

/* The Feedback button, a small glass pill in the bottom-right corner, and the box that grows up out of it; on a
   phone the box is a sheet from the bottom over a light shade (web/sites/hear.js) */
.fb-open{position:fixed;right:20px;bottom:20px;z-index:40;height:34px;padding:0 14px;font-size:13px;
  -webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur);box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair),var(--pace-lift-sm)}
.fb-open svg{width:13px;height:13px}
.fb-box{position:fixed;right:20px;bottom:64px;z-index:41;width:340px;padding:20px 20px 18px;background:var(--pace-glass-2);
  box-shadow:var(--pace-lift-lg);transform-origin:bottom right;animation:fb-grow .22s var(--pace-ease)}
@keyframes fb-grow{from{opacity:0;transform:translateY(6px) scale(.97)}}
.fb-ask{display:flex;flex-direction:column;gap:10px}
.fb-box h2{font-size:17px;margin:0}
.fb-sub{color:var(--pace-ink-2);font-size:13.5px;margin-top:-6px}
.fb-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:var(--pace-round);color:var(--pace-ink-2);font-size:18px;line-height:1}
.fb-x:hover{background:var(--pace-sunk);color:var(--pace-ink)}
.fb-box textarea{font:inherit;font-size:14.5px;color:var(--pace-ink);width:100%;min-height:112px;resize:vertical;padding:11px 13px;border:0;
  border-radius:var(--pace-r-sm);background:var(--pace-solid);box-shadow:inset 0 0 0 var(--pace-line) var(--pace-hair);outline:0}
.fb-box textarea:focus{box-shadow:inset 0 0 0 var(--pace-line) var(--pace-ink-3),var(--pace-focus)}
.fb-foot{display:flex;align-items:center;gap:10px}
.fb-foot .pill{margin-left:auto}
.fb-said{font-size:13px;color:var(--pace-ink-2)}
.fb-thanks{display:flex;align-items:center;gap:10px;padding:18px 28px 8px 0}
.fb-thanks svg{width:22px;height:22px;flex:none}
.fb-scrim{display:none}
@media (max-width:560px){
  .fb-open{right:14px;bottom:14px}
  .fb-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:40;background:var(--pace-scrim)}
  .fb-box{left:10px;right:10px;bottom:10px;width:auto;border-radius:26px;padding:22px 20px calc(18px + env(safe-area-inset-bottom));animation:fb-rise .26s var(--pace-ease)}
  @keyframes fb-rise{from{opacity:0;transform:translateY(30px)}}
  .fb-box textarea{min-height:140px;font-size:16px}
  .fb-foot .pill{height:44px;padding:0 22px}
}
/* where the sites rail is a dock along the bottom (under 700 wide), the pill sits just above it */
@media (max-width:700px){body:has(.rail:not([hidden])) .fb-open{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.fb-box{animation:none}}