@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap");
/* Windowbox: Co-Creative Digital frame around a demo or draft. Tokens from ccd-ollie-2026 brand/tokens.json. */
@font-face { font-family: "Monigue"; src: url("Monigue.woff2") format("woff2"); font-display: swap; }
:root {
  --orange: #FC6500; --flame: #F04F23; --princeton: #F6851F;
  --blue: #0C8FC8; --yale: #0D4A92; --gray: #454545; --cream: #F3EEE9; --white: #FFFFFF;
  --bg: var(--cream); --bar: var(--white); --ink: var(--gray); --ink-soft: #666666; --line: #E2DBD3;
  --window: var(--white); --chrome: #F8F8F8; --pill-bg: #E6F3FA; --pill-ink: var(--yale);
  --shadow: 0 2px 6px rgba(69, 69, 69, .08), 0 18px 48px rgba(69, 69, 69, .14);
  --bar-h: 72px; --note-h: 56px;
  --display: "Monigue", "Arial Narrow", "Helvetica Condensed", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191c; --bar: #202327; --ink: #EEEAE6; --ink-soft: #B8B2AC; --line: #33373C;
    --window: #202327; --chrome: #2A2E33; --pill-bg: #0D2E44; --pill-ink: #8FD3F2;
    --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17191c; --bar: #202327; --ink: #EEEAE6; --ink-soft: #B8B2AC; --line: #33373C;
  --window: #202327; --chrome: #2A2E33; --pill-bg: #0D2E44; --pill-ink: #8FD3F2;
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--body); display: flex; flex-direction: column; overflow: hidden; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.wb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--yale); color: #fff; padding: 10px 14px; border-radius: 8px; }
.wb-skip:focus { top: 12px; }

/* top bar with the brand gradient strip */
.wb-bar { flex: none; background: var(--bar); border-bottom: 1px solid var(--line); position: relative; }
.wb-bar::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(110deg, var(--princeton), var(--flame), var(--princeton)); }
.wb-bar__in { display: flex; align-items: center; gap: 18px; min-height: var(--bar-h); padding: 4px 20px 0; }
.wb-brand { display: flex; align-items: center; flex: none; padding: 4px 0; }
.wb-brand__logo { display: block; height: 40px; width: auto; color: var(--ink); }  /* vector lockup: wordmark follows the theme, mark stays orange (Devyn, Oct 10: no white pill) */
.wb-brand__mark { display: none; height: 40px; width: 40px; }
.wb-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; padding-left: 18px; border-left: 1px solid var(--line); }
.wb-pill { flex: none; font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--pill-ink); background: var(--pill-bg); padding: 8px 12px 7px; border-radius: 999px; }
body[data-mode="draft"] .wb-pill { color: #fff; background: var(--yale); }
.wb-client { margin: 0; font: 700 17px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-devices { display: flex; flex: none; padding: 4px; gap: 4px; background: var(--chrome); border: 1px solid var(--line); border-radius: 12px; }
.wb-devices button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: 600 14px var(--body); cursor: pointer; }
.wb-devices button[aria-pressed="true"] { background: var(--bar); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.wb-devices svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wb-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.wb-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 10px 2px; }
.wb-link:hover { color: var(--blue); }
.wb-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s; }
.wb-cta:hover { background: var(--flame); }

/* review strip: ready notice, Before / After, notes (owner link only), Buy this site (everyone else) */
body:not(.wb-owner) [data-for="owner"], body.wb-owner [data-for="visitor"] { display: none !important; }
.wb-buy { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 18px; border-radius: 999px; background: var(--yale); color: #fff; font: 700 14px var(--body); text-decoration: none; white-space: nowrap; }
.wb-buy:hover { background: var(--blue); }
.wb-nowrap { white-space: nowrap; }
body[data-mode="draft"] .wb-buy { background: var(--orange); }
body[data-mode="draft"] .wb-buy:hover { background: var(--flame); }
.wb-review { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: var(--pill-bg); border-bottom: 1px solid var(--line); }
.wb-review__msg { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; color: var(--ink); }
.wb-review__msg strong { color: var(--pill-ink); }
body[data-mode="draft"] .wb-review { background: var(--yale); }
body[data-mode="draft"] .wb-review__msg, body[data-mode="draft"] .wb-review__msg strong { color: #fff; }
.wb-review__tools { display: flex; align-items: center; gap: 10px; flex: none; }
.wb-view { display: flex; padding: 3px; gap: 3px; background: var(--bar); border: 1px solid var(--line); border-radius: 999px; }
.wb-view button { min-height: 36px; padding: 4px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 600 14px var(--body); cursor: pointer; }
.wb-view button[aria-pressed="true"] { background: var(--ink); color: var(--bar); }
.wb-view button[data-view="after"][aria-pressed="true"] { background: var(--orange); color: #fff; }
.wb-notes-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bar); color: var(--ink); font: 700 14px var(--body); cursor: pointer; }
.wb-notes-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wb-notes-btn[aria-expanded="true"] { border-color: var(--orange); }
.wb-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12.5px; line-height: 22px; text-align: center; }
.wb-body { flex: 1; min-height: 0; display: flex; }

/* stage and the window */
.wb-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 22px 0; }
.wb-window { flex: 1; min-height: 0; width: 100%; max-width: 1440px; display: flex; flex-direction: column; background: var(--window); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transition: max-width .35s cubic-bezier(.2, .7, .2, 1); }
.wb-chrome { flex: none; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: var(--chrome); border-bottom: 1px solid var(--line); }
.wb-dots { display: flex; gap: 6px; flex: none; }
.wb-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: block; }
.wb-address { flex: 1; min-width: 0; max-width: 560px; margin: 0 auto; text-align: center; font-size: 13px; color: var(--ink-soft); background: var(--bar); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #fff; }
.wb-stage[data-device="tablet"] .wb-window { max-width: 834px; }
.wb-stage[data-device="phone"] .wb-window { max-width: 410px; border: 10px solid #1d1f22; border-radius: 40px; }
.wb-stage[data-device="phone"] .wb-chrome { height: 30px; justify-content: center; background: #1d1f22; border-bottom: 0; }
.wb-stage[data-device="phone"] .wb-dots { display: none; }
.wb-stage[data-device="phone"] .wb-address { background: transparent; border: 0; color: #c9c4bf; padding: 0; }
.wb-note { flex: none; max-width: 980px; margin: 0; padding: 12px 8px 14px; min-height: var(--note-h); text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.wb-note a { font-weight: 600; }

/* Before: screenshots of the old site, or the no-website card */
.wb-before { flex: 1; min-height: 0; overflow-y: auto; background: #fff; position: relative; }
.wb-before[hidden], .wb-frame[hidden] { display: none; }
.wb-before img { display: block; width: 100%; height: auto; }
.wb-before__tag { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 14px; background: rgba(29, 31, 34, .88); color: #fff; font-size: 13px; text-align: center; }
.wb-before--none { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--chrome); }
.wb-before--none[hidden] { display: none; }
.wb-none { max-width: 460px; text-align: center; }
.wb-none__tag { display: inline-block; font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border: 1px dashed var(--ink-soft); padding: 8px 12px 7px; border-radius: 999px; }
.wb-none h2 { margin: 18px 0 10px; font: 700 26px/1.2 var(--body); }
.wb-none p { margin: 0 0 12px; color: var(--ink-soft); }
.wb-stage[data-view="before"] .wb-address { color: var(--ink); }

/* notes drawer */
.wb-drawer { flex: none; width: 380px; display: flex; flex-direction: column; background: var(--bar); border-left: 1px solid var(--line); }
.wb-drawer[hidden] { display: none; }
.wb-drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wb-drawer__head h2 { margin: 0; font: 700 17px var(--body); }
.wb-drawer__close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.wb-drawer__close:hover { background: var(--chrome); }
.wb-drawer__close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wb-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }
.wb-drawer__intro { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; }
.wb-add label { display: block; margin-bottom: 6px; font-weight: 600; }
.wb-add strong { color: var(--orange); }
.wb-add textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--window); color: var(--ink); font: 400 15px/1.45 var(--body); resize: vertical; }
.wb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 10px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--chrome); color: var(--ink); font: 700 14px var(--body); cursor: pointer; }
.wb-btn--primary { width: 100%; border: 0; background: var(--orange); color: #fff; }
.wb-btn--primary:hover { background: var(--flame); }
.wb-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.wb-list li { position: relative; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--chrome); font-size: 14px; }
.wb-list strong { display: block; padding-right: 64px; font-size: 13px; color: var(--pill-ink); }
.wb-list p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-del { position: absolute; top: 6px; right: 6px; padding: 4px 8px; border: 0; background: transparent; color: var(--ink-soft); font: 600 12.5px var(--body); text-decoration: underline; cursor: pointer; }
.wb-send { margin-top: 6px; }
.wb-send__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.wb-clear { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.wb-form { margin-top: 16px; }
.wb-form__frame { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.wb-drawer__call { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.wb-drawer__call a { font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .wb-window { transition: none; } }

/* small screens: the demo fills the width, size toggles and window chrome step aside */
@media (max-width: 980px) { .wb-devices span { display: none; } .wb-link { display: none; } }
@media (max-width: 760px) {
  :root { --bar-h: 60px; }
  .wb-bar__in { gap: 10px; padding: 4px 12px 0; }
  .wb-brand__logo { display: none; } .wb-brand__mark { display: block; }
  .wb-title { padding-left: 10px; gap: 8px; }
  .wb-pill { font-size: 13px; padding: 7px 10px 6px; }
  .wb-client { font-size: 15px; }
  .wb-devices { display: none; }
  .wb-cta { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .wb-stage { padding: 0; }
  .wb-window, .wb-stage[data-device] .wb-window { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .wb-chrome { display: none; }
  .wb-note { padding: 8px 12px; font-size: 12.5px; min-height: 0; }
  .wb-review { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .wb-review__msg { flex-basis: 100%; font-size: 13.5px; }
  .wb-review__tools { flex: 1; justify-content: space-between; }
  .wb-view button { min-height: 36px; padding: 4px 14px; }
  .wb-notes-btn { min-height: 40px; }
  .wb-drawer { position: fixed; inset: 0; z-index: 20; width: auto; border-left: 0; }
  .wb-stage[data-view="before"] .wb-chrome { display: flex; height: 34px; }
  .wb-stage[data-view="before"] .wb-dots { display: none; }
}
@media (min-width: 761px) and (max-width: 1180px) { .wb-drawer { width: 330px; } .wb-drawer-open .wb-link { display: none; } }
.wb-cta__short { display: none; }
@media (max-width: 420px) { .wb-cta__long { display: none; } .wb-cta__short { display: inline; } }

/* Unlisted badge: every review hub not in our public examples (Oct 10) */
.wb-unlisted { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bar); color: var(--ink); font: 700 12px/1.6 var(--body); letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.wb-unlisted svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Launch style (Devyn, Oct 12: "make this our style now"): cream and charcoal, Newsreader names, JetBrains Mono labels,
   orange fill buttons with dark text, fine hairlines, soft grain. Overrides the tokens and pieces above. */
:root {
  --bg: #F3EEE9; --bar: #FBF8F5; --ink: #181B20; --ink-soft: #5E636B; --line: #E2DBD3;
  --window: #FFFFFF; --chrome: #F6F2EE; --pill-bg: #FFF1E6; --pill-ink: #C93D17;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --shadow: 0 1px 2px rgba(24, 27, 32, .06), 0 30px 70px -30px rgba(24, 27, 32, .35);
  --fill: #FC6500; --fill-ink: #1A0E08;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #14161A; --bar: #181B20; --ink: #EEF1F5; --ink-soft: #A3A9B2; --line: #2C3036;
    --window: #181B20; --chrome: #1F2227; --pill-bg: #2A1A10; --pill-ink: #FF9A52; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.7); }
}
:root[data-theme="dark"] { --bg: #14161A; --bar: #181B20; --ink: #EEF1F5; --ink-soft: #A3A9B2; --line: #2C3036;
  --window: #181B20; --chrome: #1F2227; --pill-bg: #2A1A10; --pill-ink: #FF9A52; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.7); }
:focus-visible { outline-color: var(--fill); }
.wb-skip { background: var(--ink); color: var(--bar); }
body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wb-bar { background: color-mix(in srgb, var(--bar) 92%, transparent); backdrop-filter: blur(10px); }
.wb-bar::before { height: 3px; background: linear-gradient(52deg, #C93D17, #FC6500 45%, #FFB37A); }
.wb-title { border-left-color: var(--line); }
.wb-pill, body[data-mode="draft"] .wb-pill { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pill-ink); background: transparent; border: 1px solid currentColor; padding: 7px 11px 6px; }
.wb-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--fill); vertical-align: middle; }
.wb-client { font: 400 20px/1.15 var(--serif); letter-spacing: -.005em; }
.wb-devices { background: var(--chrome); border-radius: 999px; }
.wb-devices button { border-radius: 999px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wb-devices button[aria-pressed="true"] { background: var(--ink); color: var(--bar); box-shadow: none; }
.wb-link { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--line); padding: 6px 0; }
.wb-link:hover { color: var(--pill-ink); border-color: currentColor; }
.wb-cta, body[data-mode="draft"] .wb-buy, .wb-btn--primary { background: var(--fill); color: var(--fill-ink); font-weight: 600; }
.wb-cta:hover, body[data-mode="draft"] .wb-buy:hover, .wb-btn--primary:hover { background: #FF7A1F; }
.wb-cta::after { content: " →"; white-space: pre; }
.wb-buy { background: var(--ink); color: var(--bar); font-weight: 600; }
.wb-buy:hover { background: #2B2F36; }
.wb-review, body[data-mode="draft"] .wb-review { background: var(--bar); }
.wb-review__msg, body[data-mode="draft"] .wb-review__msg { font: 400 13px/1.55 var(--mono); color: var(--ink-soft); }
.wb-review__msg strong, body[data-mode="draft"] .wb-review__msg strong { color: var(--ink); font-weight: 500; }
.wb-view { background: var(--chrome); }
.wb-view button { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wb-view button[data-view="after"][aria-pressed="true"] { background: var(--fill); color: var(--fill-ink); }
.wb-notes-btn { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: transparent; }
.wb-notes-btn[aria-expanded="true"] { border-color: var(--fill); color: var(--pill-ink); }
.wb-count { background: var(--fill); color: var(--fill-ink); }
.wb-stage { padding-top: 26px; }
.wb-window { border-radius: 18px; }
.wb-chrome { height: 42px; background: var(--chrome); }
.wb-dots i { width: 9px; height: 9px; }
.wb-address { font: 400 12px var(--mono); letter-spacing: .02em; background: var(--window); }
.wb-stage[data-device="phone"] .wb-window { border-color: #181B20; }
.wb-stage[data-device="phone"] .wb-chrome { background: #181B20; }
.wb-note { font: 400 12px/1.6 var(--mono); letter-spacing: .02em; }
.wb-note a { color: var(--pill-ink); font-weight: 500; }
.wb-before__tag { background: rgba(24, 27, 32, .9); font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.wb-none__tag { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; }
.wb-none h2 { font: 400 30px/1.15 var(--serif); }
.wb-drawer__head h2 { font: 400 22px var(--serif); }
.wb-add label { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wb-add strong { color: var(--pill-ink); font-weight: 500; }
.wb-btn { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wb-btn--primary { font: 600 14px var(--body); letter-spacing: 0; text-transform: none; }
.wb-list strong { color: var(--pill-ink); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.wb-unlisted { font: 500 11px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .wb-client { font-size: 18px; } .wb-pill { font-size: 10.5px; padding: 6px 9px 5px; } .wb-pill::before { display: none; } }
/* Mid widths: the title block clips instead of running under the size switcher; device labels go icon-only sooner */
.wb-title { overflow: hidden; }
@media (max-width: 1320px) { .wb-devices span { display: none; } .wb-devices button { padding: 6px 10px; } }
@media (max-width: 1100px) { .wb-pill::before { display: none; } .wb-link { display: none; } }
/* Phones: a smaller frame so the client's site gets the room (Devyn, Oct 13: "On mobile it can get tight") */
@media (max-width: 760px) {
  :root { --bar-h: 50px; }
  .wb-bar::before { height: 2px; }
  .wb-bar__in { gap: 8px; padding: 2px 10px 0; }
  .wb-brand__mark { width: 30px; height: 30px; }
  .wb-title { padding-left: 8px; gap: 6px; }
  .wb-pill, body[data-mode="draft"] .wb-pill { font-size: 9.5px; letter-spacing: .1em; padding: 5px 7px 4px; }
  .wb-client { font-size: 15px; }
  .wb-cta { min-height: 34px; padding: 6px 12px; font-size: 13px; }
  .wb-stage { padding: 0; }
  .wb-review, body[data-mode="draft"] .wb-review { flex-wrap: nowrap; gap: 10px; padding: 6px 10px; }
  .wb-review__msg, body[data-mode="draft"] .wb-review__msg { flex: 1 1 auto; flex-basis: auto; }
  .wb-review__tools { flex: none; gap: 6px; }
  .wb-review__msg, body[data-mode="draft"] .wb-review__msg { font-size: 11.5px; line-height: 1.45; }
  .wb-view { padding: 2px; gap: 2px; }
  .wb-view button { min-height: 30px; padding: 2px 12px; font-size: 10.5px; }
  .wb-notes-btn { min-height: 32px; padding: 4px 12px; font-size: 10.5px; }
  .wb-unlisted { font-size: 0; gap: 0; padding: 3px 5px; margin-right: 4px; vertical-align: -1px; }
  .wb-unlisted svg { width: 11px; height: 11px; }
  .wb-note { padding: 5px 10px 6px; font-size: 10px; line-height: 1.45; letter-spacing: 0; }
}
@media (max-width: 400px) { .wb-client { display: none; } }