@charset "UTF-8";
/* ============================================================
   PrimeStart Client Platform — customer portal stylesheet

   Tokens are the locked PrimeStart palette (see docs/DESIGN.md).
   Prefix: .psc-  ·  Sections:
     1. Tokens + base        7. Next action       13. Preview frames
     2. Type utilities       8. Journey           14. Payments
     3. Buttons / pills      9. Timeline          15. Forms
     4. App shell           10. Conversations     16. Flash / notes / empty
     5. Page + cards        11. Change requests   17. Auth
     6. Hero + ring         12. Documents         18. Motion  19. Responsive
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS + BASE
   ------------------------------------------------------------ */
:root{
  /* ---- Brand palette (LOCKED — see docs/DESIGN.md) --------------------- */
  --paper:#FAF7F1; --white:#FFFFFF; --ink:#12212F; --ink-2:#2B3B4B; --muted:#5C6C7B;
  --line:#E6E0D6; --line-2:#F0EBE2; --orange:#D9620E; --orange-dk:#B44E08; --amber:#F0A03C; --wash:#FBF1E4;
  --ink-deep:#0D1926;

  /* ---- Surfaces --------------------------------------------------------
     Named for the job rather than the colour, so a card and a rail can be
     restyled together instead of hunting down every literal.
     ---------------------------------------------------------------------- */
  --surface:#FFFFFF;          /* cards, sidebar, sheets */
  --surface-2:#FDFCFA;        /* a panel nested inside a card */
  --surface-sunken:#F6F2EA;   /* wells, table heads, unfilled track */
  --hairline:#E6E0D6;
  --hairline-soft:#F0EBE2;
  --faint:#93A0AC;            /* timestamps, meta, disabled glyphs */

  /* ---- Status tones ---------------------------------------------------- */
  --ok-bg:#F1F7F1; --ok-line:#CBE0CB; --ok-text:#1F4620; --ok-dot:#2E7D32;
  --warn-bg:#FBF1E4; --warn-line:#F2DFC6; --warn-text:#7A4A12; --warn-dot:#D9620E;
  --err-bg:#FEF7F6; --err-line:#F0CFCC; --err-text:#8C1D18; --err-dot:#B3261E;
  --slate-bg:#EEF2F5; --slate-line:#D9E1E8; --slate-text:#2B3B4B; --slate-dot:#5C6C7B;
  --grey-bg:#F0EBE2; --grey-line:#E6E0D6; --grey-text:#6B6257; --grey-dot:#B9B0A2;

  /* ---- Typeface (AUTHORITATIVE — do not add a second one) ---------------
     PrimeStart's own faces, self-hosted and subset in Portal\Assets::font_css():
     Manrope for structure, Inter for reading. Both are variable, both are
     served woff2 with font-display:swap and a unicode-range split, so the
     whole customer platform costs two files and shifts nothing on load.

     EVERY customer-facing rule in this file goes through --fh or --fb. There
     is no literal font-family anywhere else, and dev/tests.php asserts that,
     because these two declarations were once lost in a token rewrite and the
     entire portal silently fell through to the browser's default serif —
     Times New Roman, on every screen, with nothing in the console to say so.
     A missing custom property does not error; it just quietly stops being a
     font. Hence the test.
     ---------------------------------------------------------------------- */
  --fh:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fb:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* ---- Type scale -------------------------------------------------------
     Sized for Manrope, which sets noticeably larger and tighter than a
     system serif at the same pixel value. Big where it matters, small where
     it does not, and a wide gap between the two: that gap IS the hierarchy,
     so headings can stay at 700/800 without every one of them shouting.
     ---------------------------------------------------------------------- */
  --t-stat:36px;     /* the one number a tile exists to show */
  --t-display:32px;  /* at most one per page */
  --t-h1:25px;       /* page title */
  --t-h2:20px;       /* section */
  --t-h3:17px;       /* card */
  --t-h4:15px;       /* sub-block */
  --t-body:15.5px;
  --t-sm:14.5px;
  --t-xs:13.5px;
  --t-micro:11.5px;  /* eyebrows, small caps */

  /* Weights, named so a template never has to pick a number. */
  --w-body:400; --w-med:500; --w-semi:600; --w-bold:700; --w-black:800;

  /* Line heights. Body copy is deliberately generous: onboarding carries real
     instructions and people have to read them without effort. */
  --lh-tight:1.12; --lh-head:1.25; --lh-body:1.6; --lh-loose:1.65;

  /* Tracking. Large Manrope needs negative tracking to stop looking loose;
     small text needs none, and small caps need positive. */
  --ls-display:-0.036em; --ls-head:-0.024em; --ls-body:-0.006em; --ls-caps:.11em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* ---- Structure -------------------------------------------------------- */
  --side:244px; --top:64px; --content:1220px; --pad:40px;
  --rail:340px;               /* dashboard / workspace right rail */

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:100px;
  --r-card:var(--r-lg); --r-input:var(--r-md); --r-btn:var(--r-md);

  /* ---- Elevation ---------------------------------------------------------
     Depth is a tool, used deliberately. Cards sit on the paper with a
     hairline and the faintest lift, so the page has surfaces rather than
     outlines; the ink hero is genuinely raised, because it is the one thing
     on the screen that should feel like an object.
     -------------------------------------------------------------------------- */
  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(18,33,47,.04),0 1px 1px rgba(18,33,47,.03);
  --shadow-raise:0 1px 2px rgba(18,33,47,.05),0 10px 24px -16px rgba(18,33,47,.3);
  --shadow-ink:0 2px 4px rgba(13,25,38,.12),0 24px 48px -24px rgba(13,25,38,.55);
  --shadow-pop:0 18px 44px -18px rgba(18,33,47,.35),0 1px 2px rgba(18,33,47,.06);
  --shadow-sheet:0 -12px 40px -12px rgba(18,33,47,.3);
  --shadow-hero:var(--shadow-ink);

  /* ---- Motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:.12s; --dur-2:.18s; --dur-3:.28s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.psc{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:var(--t-body);font-weight:var(--w-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.psc-sr,.psc .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.psc-skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;font-family:var(--fh);font-weight:700;padding:14px 22px;border-radius:0 0 8px 0}
.psc-skip:focus{left:0}
.psc-i{flex:none;display:inline-block;vertical-align:-0.18em}

/* ------------------------------------------------------------
   2. TYPE UTILITIES
   ------------------------------------------------------------ */
/* THE TWELVE ROLES.
   Every piece of customer-facing text is one of these. A template picks a
   role; it does not pick a size, a weight or a tracking value. That is what
   stops a "quick fix" on one page from quietly becoming a thirteenth style.

   Role            Class / element        Face
   Display         .psc-display           Manrope 800
   Page title      h1                     Manrope 800
   Section title   .psc-h2                Manrope 800
   Card title      .psc-h3                Manrope 700
   Sub-block       .psc-h4                Manrope 700
   Body            body, .psc-prose       Inter 400
   Small body      .psc-sm                Inter 400
   Label           .psc-label             Manrope 700
   Helper          .psc-help              Inter 400 muted
   Caption / meta  .psc-xs, time          Inter 400 faint
   Button          .psc-btn               Manrope 700
   Navigation      .psc-nav a, .psc-subnav a, .psc-tabbar a
   Status / badge  .psc-pill, .psc-badge  Manrope 700
   Eyebrow / caps  .psc-eyebrow, .psc-k   Manrope 800 uppercase
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--fh);color:var(--ink)}
h1{font-size:var(--t-h1);font-weight:var(--w-black);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.psc-display{font-family:var(--fh);font-size:var(--t-display);font-weight:var(--w-black);line-height:var(--lh-tight);letter-spacing:var(--ls-display);color:var(--ink)}
.psc-h2{font-size:var(--t-h2);font-weight:var(--w-black);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
/* Card and sub-block titles sit at 700, not 800. Hierarchy comes from the gap
   in SIZE; making every heading black is how a page ends up shouting. */
.psc-h3{font-size:var(--t-h3);font-weight:var(--w-bold);line-height:1.3;letter-spacing:-0.02em}
.psc-h4{font-size:var(--t-h4);font-weight:var(--w-bold);line-height:1.32;letter-spacing:-0.016em}

/* Small caps label. The orange rule is for page eyebrows only; the plain
   variant is for the many places that want a label and not a flourish. */
.psc-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--s2);font-family:var(--fh);font-size:var(--t-micro);font-weight:var(--w-black);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--orange)}
.psc-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--orange);flex:none}
.psc-k{display:block;font-family:var(--fh);font-size:var(--t-micro);font-weight:var(--w-black);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}

.psc-muted{color:var(--muted)}
.psc-faint{color:var(--faint)}
.psc-sm{font-size:var(--t-sm);line-height:var(--lh-body)}
.psc-xs{font-size:var(--t-xs);line-height:1.5}
.psc-lede{font-size:17px;line-height:var(--lh-body);color:var(--ink-2);max-width:58ch}
.psc-prose{font-size:var(--t-body);line-height:var(--lh-loose);color:var(--ink-2);max-width:66ch}
.psc-prose + .psc-prose{margin-top:var(--s3)}
.psc-mt{margin-top:var(--s7)}
.psc-mt-sm{margin-top:var(--s4)}
.psc-pad{padding:var(--s4) var(--s6)}
.psc-dot-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#C9C1B4;margin:0 var(--s2);vertical-align:middle}
.psc-count{display:inline-block;font-family:var(--fh);font-size:12px;font-weight:var(--w-bold);color:var(--muted);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:1px 8px;margin-left:var(--s1);vertical-align:middle}
.psc-important{font-style:normal;font-family:var(--fh);font-weight:var(--w-bold);color:var(--orange-dk)}

.psc-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--fh);font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--orange-dk);letter-spacing:-0.012em;border-bottom:1px solid rgba(180,78,8,.28);padding-bottom:1px;transition:border-color var(--dur-1) ease,color var(--dur-1) ease}
.psc-link:hover{border-bottom-color:var(--orange-dk)}
.psc-link .psc-i{transition:transform var(--dur-2) var(--ease)}
.psc-link:hover .psc-i-arrow{transform:translateX(2px)}
.psc-link-btn{font-family:var(--fh);font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--orange-dk)}
.psc-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--muted);margin-bottom:var(--s5);transition:color var(--dur-1) ease}
.psc-back:hover{color:var(--ink)}

/* ------------------------------------------------------------
   3. BUTTONS / PILLS / BADGES / AVATARS
   ------------------------------------------------------------ */
.psc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-btn);font-family:var(--fh);font-weight:700;font-size:14.5px;letter-spacing:-0.016em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.25;text-decoration:none;
  transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease,color var(--dur-2) ease,box-shadow var(--dur-2) ease;
}
/* No lift on hover. A button that moves under the cursor is a toy; colour
   is enough of an answer and it never shifts the line it sits on. */
.psc-btn-primary{background:var(--orange);color:#fff}
.psc-btn-primary:hover{background:var(--orange-dk)}
.psc-btn-ink{background:var(--ink);color:#fff}
.psc-btn-ink:hover{background:#1D3145}
.psc-btn-ghost{background:var(--surface);border-color:#DCD4C7;color:var(--ink)}
.psc-btn-ghost:hover{border-color:var(--ink-2);background:var(--surface)}
.psc-btn-quiet{background:transparent;color:var(--ink-2);padding-left:10px;padding-right:10px}
.psc-btn-quiet:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-btn-lg{padding:14px 24px;font-size:15.5px;border-radius:var(--r-md)}
.psc-btn-sm{padding:8px 13px;font-size:13.5px}
.psc-btn-block{width:100%}
/* A button carrying [hidden] must be gone, not merely transparent: .psc-btn
   sets an inline-flex display, which outranks the attribute's own rule. */
.psc-btn[hidden]{display:none}
.psc-btn:disabled,.psc-btn[aria-disabled="true"]{background:#EDE7DC;border-color:#EDE7DC;color:#9C9284;box-shadow:none;cursor:not-allowed}
.psc-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.psc-btn.is-loading::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:pscSpin .7s linear infinite}
.psc-btn-ghost.is-loading::after,.psc-btn-quiet.is-loading::after{border-color:rgba(18,33,47,.2);border-top-color:var(--ink)}
.psc-btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.psc-btn-row-tight{margin-top:var(--s3)}
@keyframes pscSpin{to{transform:rotate(360deg)}}

.psc-icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);color:var(--muted);border:1px solid transparent;transition:background-color var(--dur-1) ease,color var(--dur-1) ease,border-color var(--dur-1) ease}
.psc-icon-btn:hover{background:var(--surface-sunken);color:var(--ink);border-color:var(--hairline)}
.psc-icon-btn-danger:hover{color:var(--err-text);background:var(--err-bg);border-color:var(--err-line)}

.psc-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;line-height:1;padding:6px 11px 6px 9px;border-radius:100px;border:1px solid;white-space:nowrap}
.psc-pill i{width:7px;height:7px;border-radius:50%;flex:none}
.psc-pill-sm{font-size:11.5px;padding:5px 9px 5px 8px}
.psc-pill-lg{font-size:13.5px;padding:8px 14px 8px 11px}
.psc-pill-lg i{width:8px;height:8px}
.tone-done.psc-pill,.tone-live.psc-pill{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.tone-done.psc-pill i,.tone-live.psc-pill i{background:var(--ok-dot)}
.tone-active.psc-pill{background:var(--wash);border-color:var(--warn-line);color:var(--orange-dk)}
.tone-active.psc-pill i{background:var(--orange)}
.tone-you.psc-pill{background:#FFF4E5;border-color:#F5D9B0;color:var(--warn-text)}
.tone-you.psc-pill i{background:var(--amber)}
.tone-us.psc-pill{background:var(--slate-bg);border-color:var(--slate-line);color:var(--slate-text)}
.tone-us.psc-pill i{background:var(--slate-dot)}
.tone-next.psc-pill,.tone-paused.psc-pill{background:var(--white);border-color:var(--line);color:var(--muted)}
.tone-next.psc-pill i,.tone-paused.psc-pill i{background:var(--grey-dot)}
.tone-paused.psc-pill{background:var(--grey-bg)}

.psc-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:100px;font-family:var(--fh);font-size:11.5px;font-weight:800;line-height:1;color:var(--ink);background:var(--line-2);font-style:normal}
.psc-badge.hot{background:var(--orange);color:#fff}

.psc-avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--wash);color:var(--orange-dk);font-family:var(--fh);font-weight:800;font-size:13.5px;letter-spacing:-0.02em;flex:none}
.psc-avatar-ps{background:var(--ink);color:#fff}

.psc-tick path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .55s var(--ease-out) .1s}
.psc-tick.on path,.on > .psc-tick path,.is-in .psc-tick path,html:not(.js) .psc-tick path{stroke-dashoffset:0}

/* ------------------------------------------------------------
   4. APP SHELL
   ------------------------------------------------------------ */
.psc-app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}

/* ---- Sidebar ------------------------------------------------------------
   Seven destinations, not seventeen. Everything that is a FACET of one of
   them (preview, files, changes, reports, keywords, orders, messages) moved
   into that destination's own tab strip, so the rail stays readable and the
   depth is still one click away. Routes are unchanged — a bookmark from
   last year still lands where it always did.
   -------------------------------------------------------------------------- */
.psc-side{
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-right:1px solid var(--hairline);
  padding:var(--s5) var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s5);
}
.psc-logo{display:flex;align-items:center;gap:9px;padding:var(--s1) var(--s3) 0;flex:none}
.psc-mark{width:26px;height:26px;border-radius:var(--r-sm);background:var(--orange);display:grid;place-items:center;flex:none}
.psc-mark span{display:block;width:10px;height:10px;background:#fff;border-radius:2px;transform:rotate(45deg) translateY(-1px);clip-path:polygon(0 0,100% 0,100% 100%)}
.psc-word{font-family:var(--fh);font-weight:800;font-size:18px;letter-spacing:-0.045em;color:var(--ink)}
.psc-word-sub{display:none}

/* Workspace row — the business you are looking at, and what it is on.
   Replaces the old context card AND the top bar's copy of the same two
   facts. One place, read once. */
.psc-ws{position:relative;margin:0;padding:var(--s3);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;gap:10px;min-width:0}
.psc-ws-mono{width:30px;height:30px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-family:var(--fh);font-weight:800;font-size:12.5px;letter-spacing:-0.02em;display:grid;place-items:center;flex:none}
.psc-ws-t{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.psc-ws-name{font-family:var(--fh);font-size:13.5px;font-weight:800;letter-spacing:-0.024em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-ws-plan{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-ws-plan.is-seo{color:var(--orange-dk)}
.psc-switch{margin-left:auto;flex:none}
.psc-switch summary{cursor:pointer;list-style:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-xs);color:var(--muted)}
.psc-switch summary::-webkit-details-marker{display:none}
.psc-switch summary:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-switch > ul{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:var(--s1);max-height:260px;overflow-y:auto}
.psc-switch a{display:block;padding:8px 10px;border-radius:var(--r-xs);font-size:13.5px;font-family:var(--fh);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-switch a:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-switch a[aria-current="true"]{color:var(--orange-dk)}

.psc-nav{display:flex;flex-direction:column;gap:var(--s1)}
.psc-nav ul{display:flex;flex-direction:column;gap:1px}
.psc-nav-rule{height:1px;background:var(--hairline-soft);margin:var(--s3) var(--s3)}
.psc-nav a{
  display:flex;align-items:center;gap:10px;min-height:32px;padding:6px 10px;border-radius:var(--r-sm);
  font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:-0.013em;color:var(--ink-2);
  position:relative;transition:background-color var(--dur-1) ease,color var(--dur-1) ease;
}
.psc-nav a .psc-i{color:#A2AEB9;transition:color var(--dur-1) ease}
.psc-nav a:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-nav a:hover .psc-i{color:var(--ink-2)}
/* Current section: ink text on a warm well with one orange marker. Reads as
   "you are here" without the whole row shouting in orange. */
.psc-nav a[aria-current="page"]{background:var(--wash);color:var(--ink)}
.psc-nav a[aria-current="page"] .psc-i{color:var(--orange)}
.psc-nav a[aria-current="page"]::before{content:"";position:absolute;left:-11px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
.psc-nav a.is-locked{color:var(--muted)}
.psc-nav .psc-nav-lock{margin-left:auto;color:var(--faint);display:inline-grid;place-items:center}
.psc-nav .psc-badge{margin-left:auto}

.psc-side-foot{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--hairline-soft)}
/* The account row is a LINK to Account, with sign out as its own small
   control. Sign out used to sit directly under the customer's name at the
   same weight as everything else, which is a mis-click waiting to happen. */
.psc-me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);min-width:0;transition:background-color var(--dur-1) ease}
.psc-me:hover{background:var(--surface-sunken)}
.psc-me[aria-current="page"]{background:var(--wash)}
.psc-me-t{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.psc-me-t strong{font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-me-t span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-signout{display:flex;align-items:center;gap:8px;margin-top:2px;padding:7px 11px;border-radius:var(--r-sm);font-family:var(--fh);font-size:13px;font-weight:600;color:var(--muted);transition:background-color var(--dur-1) ease,color var(--dur-1) ease}
.psc-signout:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-signout .psc-i{color:var(--faint)}
.psc-user{display:flex;align-items:center;gap:10px;min-width:0}
.psc-user-t{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.psc-user-t strong{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-user-t a,.psc-user-t span{font-size:12.5px;color:var(--muted)}
.psc-user-t a:hover{color:var(--orange-dk)}

.psc-main{display:flex;flex-direction:column;min-width:0;min-height:100vh}

/* ---- Top bar ------------------------------------------------------------
   Carries WHERE YOU ARE, not who you are — the business and plan are in the
   rail, and printing them here as well meant a customer read their own
   company name three times before reaching any content.
   -------------------------------------------------------------------------- */
.psc-top{
  position:sticky;top:0;z-index:60;height:var(--top);
  display:flex;align-items:center;gap:var(--s4);padding:0 var(--pad);
  background:rgba(250,247,241,.9);-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--dur-3) ease;
}
.psc-top.stuck{border-bottom-color:var(--hairline)}
.psc-logo-m{display:none}
.psc-top-where{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--fh);font-size:var(--t-sm);font-weight:700;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-top-where .psc-i{color:var(--faint);flex:none}
.psc-top-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s1);position:relative}
.psc-top-help{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-size:13.5px;font-weight:600;color:var(--ink-2);padding:8px 11px;border-radius:var(--r-sm);transition:background-color var(--dur-1) ease}
.psc-top-help:hover{background:var(--surface)}
.psc-bell,.psc-menu-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid transparent;color:var(--ink-2);transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease}
.psc-bell:hover,.psc-menu-btn:hover,.psc-bell[aria-expanded="true"]{background:var(--surface);border-color:var(--hairline)}
.psc-bell-n{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--orange);color:#fff;font-family:var(--fh);font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;border:2px solid var(--paper)}
.psc-menu-btn{display:none}

/* ---- Secondary navigation ------------------------------------------------
   The tab strip for whichever area you are inside. This is what makes seven
   sidebar items enough: My Website is one destination with five views, not
   five destinations that happen to be about the same website.
   -------------------------------------------------------------------------- */
.psc-subnav{position:sticky;top:var(--top);z-index:55;background:var(--paper);border-bottom:1px solid var(--hairline)}
.psc-subnav-in{display:flex;align-items:center;gap:2px;max-width:calc(var(--content) + var(--pad) * 2);margin:0 auto;width:100%;padding:0 var(--pad);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.psc-subnav-in::-webkit-scrollbar{display:none}
.psc-subnav a{
  position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:13px 12px 12px;font-family:var(--fh);font-size:13.5px;font-weight:600;letter-spacing:-0.016em;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur-1) ease,border-color var(--dur-1) ease;white-space:nowrap;
}
.psc-subnav a:hover{color:var(--ink)}
.psc-subnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
.psc-subnav a .psc-badge{height:18px;min-width:18px;font-size:10.5px}
.psc-subnav a.is-locked{color:var(--faint)}

.psc-content{flex:1;width:100%;max-width:calc(var(--content) + var(--pad) * 2);margin:0 auto;padding:var(--s7) var(--pad) var(--s10)}
.psc-content:focus{outline:none}
.psc-foot{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:var(--s5) var(--pad) var(--s6);font-size:var(--t-xs);color:var(--faint);max-width:calc(var(--content) + var(--pad) * 2);margin:0 auto;width:100%}
.psc-foot a:hover{color:var(--ink)}
.psc-foot-sep{margin:0 10px}

/* mobile tab bar + sheet (hidden on desktop) */
.psc-tabbar{display:none}
.psc-sheet{display:none}
.psc-fab{display:none}

/* ------------------------------------------------------------
   5. PAGE + CARDS + GRIDS + FACTS
   ------------------------------------------------------------ */
.psc-page{display:flex;flex-direction:column;gap:var(--s6)}
.psc-page-narrow{max-width:780px}

/* ---- Page header --------------------------------------------------------
   One shape on every screen: where you are, one line saying what it is for,
   and the actions that belong to the whole page. Nothing else earns a place
   above the first card.
   -------------------------------------------------------------------------- */
.psc-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin-bottom:calc(var(--s1) * -1)}
.psc-page-head-t{min-width:0}
.psc-page-head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.psc-page-head-side{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.psc-page-sub{margin-top:var(--s2);font-size:var(--t-body);color:var(--muted);max-width:62ch;line-height:1.55}
.psc-page-sub .psc-dot-sep{margin:0 8px}

/* Section header — for a block of content that is NOT inside a card. */
.psc-sec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.psc-sec h2,.psc-sec .psc-h3{margin:0}

/* ---- Cards ---------------------------------------------------------------
   Flat by default. A card is a boundary, not an object floating over the
   page; when every card had a drop shadow nothing on the screen could be
   raised to mean anything.
   -------------------------------------------------------------------------- */
.psc-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s6)}
.psc-card-sm{padding:var(--s5)}
.psc-card-flush{padding:0;overflow:hidden}
.psc-card-quiet{background:var(--surface-2)}
.psc-card-center{text-align:center;padding:var(--s8) var(--s7)}
.psc-card-center .psc-empty-i{margin:0 auto var(--s4)}
.psc-card-center p{margin:var(--s3) auto var(--s5);max-width:46ch}
.psc-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.psc-card-head-pad{padding:var(--s5) var(--s6) 0;margin-bottom:var(--s3)}
.psc-card-sm .psc-card-head{margin-bottom:var(--s3)}
.psc-card > .psc-h3{margin-bottom:var(--s3)}
.psc-card > .psc-h4{margin-bottom:var(--s3)}
.psc-card.psc-form > .psc-h3{margin-bottom:2px}
.psc-card-approved{background:var(--ok-bg);border-color:var(--ok-line)}
.psc-card-approved .psc-h4{display:flex;align-items:center;gap:8px;color:var(--ok-text);margin-bottom:var(--s2)}

/* ---- Grids ---------------------------------------------------------------- */
.psc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.psc-grid-main{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--s6);align-items:start}
.psc-col-main,.psc-col-side{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.psc-grid-preview{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s5);align-items:start}
.psc-grid-support{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}
.psc-support-side{display:flex;flex-direction:column;gap:var(--s5)}

/* ---- Facts (definition pairs) ---------------------------------------------- */
.psc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s7)}
.psc-facts > div{min-width:0}
.psc-facts dt{font-family:var(--fh);font-size:var(--t-micro);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.psc-facts dd{font-size:var(--t-body);color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.psc-facts dd strong{font-family:var(--fh);font-weight:700;letter-spacing:-0.02em}
.psc-facts dd small{color:var(--muted);font-size:var(--t-xs)}
.psc-facts-card{padding:var(--s6)}
.psc-facts-inline{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.psc-facts-stack{grid-template-columns:1fr;gap:var(--s3)}
.psc-facts-stack > div{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;padding-bottom:var(--s3);border-bottom:1px solid var(--hairline-soft)}
.psc-facts-stack > div:last-child{border-bottom:0;padding-bottom:0}
.psc-facts-stack dt{margin:0;text-transform:none;letter-spacing:0;font-size:var(--t-sm);font-weight:500;color:var(--muted);font-family:var(--fb)}
.psc-facts-stack dd{font-family:var(--fh);font-weight:700;font-size:var(--t-sm);text-align:right;letter-spacing:-0.02em}

/* ---- Definition rows with their own control -------------------------------
   Label on the left, the fact in the middle, the one thing you can do about
   it on the right. Used by Billing and Account, where every row is a
   different kind of change and a single "Edit" at the top of the card would
   not say what it edits.
   ------------------------------------------------------------------------------ */
.psc-defn{display:flex;flex-direction:column}

/* ---- Hairline row list -----------------------------------------------------
   The workhorse: invoices, files, orders, requests, keywords. One rule for
   all of them so a list never looks like a different product per page.
   ------------------------------------------------------------------------------ */
.psc-rows{display:flex;flex-direction:column}

/* ---- Quick actions ---------------------------------------------------------
   Equal weight on purpose: these ARE peers. Everything with a claim to being
   more important than its neighbours lives above, in the one action card.
   ------------------------------------------------------------------------------ */
.psc-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.psc-quick a{position:relative;display:flex;flex-direction:column;gap:3px;padding:var(--s4);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);transition:border-color var(--dur-2) ease,background-color var(--dur-2) ease}
.psc-quick a:hover{border-color:#CFC7B9;background:var(--surface-2)}
.psc-quick .psc-i{color:var(--orange);margin-bottom:var(--s2)}
.psc-quick span{font-family:var(--fh);font-size:var(--t-sm);font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.psc-quick small{font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.psc-quick small .psc-dot-sep{margin:0 6px}
.psc-quick a::after{content:"";position:absolute;right:var(--s4);top:var(--s4);width:6px;height:6px;border-top:1.5px solid #C3CBD3;border-right:1.5px solid #C3CBD3;transform:rotate(45deg);transition:border-color var(--dur-2) ease}
.psc-quick a:hover::after{border-color:var(--orange)}

/* ------------------------------------------------------------
   4b. PROJECT CARDS — one account, several projects.

   A website, a Growth plan, one logo or three, in one grid. Each
   card says what it is, where it is and whose turn it is, and
   nothing else: no stage keys, no ids, no plan slugs. The one that
   needs the customer gets the warm edge, so "what needs me?" is
   answered before anything is read.
   ------------------------------------------------------------ */
.psc-proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.psc-proj{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;
  background:var(--white);position:relative;overflow:hidden;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.psc-proj:hover{border-color:#CFC7B9;transform:translateY(-1px);box-shadow:0 14px 34px -24px rgba(18,33,47,.4)}
.psc-proj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.psc-proj.is-yours::before{background:var(--orange)}
.psc-proj.is-current{background:var(--paper)}

.psc-proj-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.psc-proj-kind{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.psc-proj-name{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.024em;line-height:1.25;margin:0;
  /* A long business name wraps rather than pushing the card wide. */
  overflow-wrap:anywhere;}
.psc-proj-name a{color:var(--ink);text-decoration:none}
.psc-proj-name a::after{content:"";position:absolute;inset:0;border-radius:14px}
.psc-proj-name a:focus-visible{outline:none}
.psc-proj-name a:focus-visible::after{outline:2px solid var(--orange);outline-offset:2px}
.psc-proj-status{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}

.psc-proj-bar{height:4px;border-radius:3px;background:var(--line-2);overflow:hidden;margin-top:14px}
.psc-proj-bar span{display:block;height:100%;border-radius:3px;background:var(--orange)}
.psc-proj-step{margin:7px 0 0;font-size:12.5px;color:var(--muted)}

/* Pushes the action to the bottom, so cards of different heights line up. */
.psc-proj-cta{margin-top:auto;align-self:flex-start;position:relative;z-index:1}
.psc-proj-status + .psc-proj-bar{margin-top:14px}
.psc-proj-step{margin-bottom:14px}

@media (max-width:640px){
  .psc-proj-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .psc-proj{padding:16px}
  .psc-proj-cta{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .psc-proj{transition:none}
  .psc-proj:hover{transform:none}
}

/* A quiet row list, for switching between sibling projects. */
.psc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.psc-list-row{
  display:flex;align-items:center;gap:14px;padding:13px 0;
  border-top:1px solid var(--line-2);
}
.psc-list-row:first-child{border-top:0}
.psc-list-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-decoration:none}
.psc-list-main b{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);overflow-wrap:anywhere}
.psc-list-main small{font-size:13px;color:var(--muted)}
.psc-list-main:hover b{color:var(--orange-dk)}

/* The hero, when the next move is the customer's. */
.psc-hero.is-yours::before{background:var(--orange)}

@media (max-width:640px){
  .psc-list-row{flex-wrap:wrap;gap:8px}
}

/* ------------------------------------------------------------
   5a. PICKS — one answer from a short list, as cards.

   Used where a question has a handful of answers that each need a
   sentence of explanation, so a <select> would hide the very thing
   that makes the question answerable. The multi-answer version reuses
   .psc-choice-chip, which already exists.
   ------------------------------------------------------------ */
.psc-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:4px}
.psc-pick{position:relative;display:block;cursor:pointer}
.psc-pick input{position:absolute;opacity:0;width:0;height:0}
.psc-pick-b{
  display:flex;flex-direction:column;gap:3px;height:100%;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);transition:border-color .16s var(--ease),background .16s var(--ease);
}
.psc-pick-b b{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.psc-pick-b em{font-style:normal;font-size:13px;line-height:1.5;color:var(--muted)}
.psc-pick:hover .psc-pick-b{border-color:#CFC7B9}
.psc-pick input:checked + .psc-pick-b{border-color:var(--orange);background:var(--wash);box-shadow:inset 0 0 0 1px var(--orange)}
.psc-pick input:focus-visible + .psc-pick-b{outline:2px solid var(--orange);outline-offset:2px}
/*
 * A tick on the chosen card.
 *
 * The card also changes colour, and for a while that was the ONLY signal —
 * which meant somebody with a colour vision difference could not tell which
 * answer they had given. The mark is hidden from assistive technology
 * (aria-hidden in the markup) because the radio or checkbox inside already
 * announces the state correctly; this is purely for people reading the page.
 */
.psc-pick-b{position:relative;padding-right:38px}
.psc-pick-tick{position:absolute;top:12px;right:12px;display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff}
.psc-pick input:checked + .psc-pick-b .psc-pick-tick{display:flex}

@media (prefers-reduced-motion:reduce){
  .psc-pick-b{transition:none}
}

/* A card that carries a fact rather than an action. */
.psc-card-quiet{background:var(--paper)}

/* ------------------------------------------------------------
   5b. SETUP COMPLETE — shown once, the first time they land here
       after sending their answers.

   Finishing setup is the end of the part the customer does. It gets a
   moment rather than a flash message, and that moment answers the two
   questions this whole platform exists to answer: what is happening,
   and do I need to do anything.
   ------------------------------------------------------------ */
.psc-done{
  background:linear-gradient(180deg,var(--ok-bg) 0%,var(--white) 78%);
  border:1px solid var(--ok-line);border-radius:16px;
  padding:30px 34px 28px;position:relative;overflow:hidden;
}
.psc-done::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ok-dot)}
.psc-done-mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--ok-dot);color:#fff;margin-bottom:16px;
}
.psc-done-k{
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ok-text);margin:0 0 8px;
}
.psc-done-h{
  font-family:var(--fh);font-size:clamp(22px,2.4vw,28px);font-weight:800;
  letter-spacing:-.035em;line-height:1.12;margin:0;
}
.psc-done-p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:58ch}

@media (max-width:640px){
  .psc-done{padding:24px 20px 22px}
}
/* ------------------------------------------------------------
   5b. DASHBOARD — Jobber composition
   ------------------------------------------------------------
   Restraint is the point: hairlines and space, not floating cards. Very
   few shadows, small radii, no gradients. A plain bold heading sits
   OUTSIDE and above its bordered container rather than inside a card head
   — the single biggest thing PrimeStart previously got wrong here.
   ------------------------------------------------------------ */

.psc-date-line{font-family:var(--fh);font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;color:var(--muted);margin:0 0 4px}

.psc-section-t{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);margin:0}

/* ---- Your website status panel -------------------------------------------
   One bordered container, no gradient, no ink block. Stage, status, what
   PrimeStart is doing, the next milestone and — only when genuinely
   available — the preview.
   ------------------------------------------------------------------------------ */
.psc-status{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface);padding:var(--s5) var(--s6)}
.psc-status-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.psc-status-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:var(--t-sm);font-weight:700;color:var(--orange-dk);letter-spacing:-0.015em}
.psc-status-link:hover{color:var(--orange)}
.psc-status-h{font-family:var(--fh);font-size:clamp(21px,2.2vw,25px);font-weight:800;letter-spacing:-0.032em;line-height:1.15;color:var(--ink);margin:var(--s3) 0 0}
.psc-status-p{margin-top:var(--s2);font-size:15px;line-height:1.55;color:var(--muted);max-width:68ch}

/* ---- The stage track --------------------------------------------------------
   One segment per real stage, filled to the stage the project is at. There
   is no percentage anywhere: a percentage would have to be invented, and
   this is read straight off the journey.
   ------------------------------------------------------------------------------ */
.psc-status-track{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline-soft)}
.psc-track{display:flex;gap:5px;list-style:none;padding:0;margin:0}
.psc-track li{flex:1;min-width:0}
.psc-track i{display:block;height:6px;border-radius:var(--r-pill);background:var(--surface-sunken)}
.psc-track li.is-done i{background:#F0C68C}
.psc-track li.is-now i{background:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.14)}
.psc-track li.is-live i{background:var(--ok-dot,#4CA75E)}
.psc-track-cap{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted)}
/* A counter strip nested INSIDE a status panel, rather than sitting on the
   page as its own block. It loses the outer radius against the panel's own
   padding and gains the top margin the panel's paragraphs expect. */
.psc-strip-inset{margin-top:var(--s5)}
.psc-strip-inset .psc-strip-cell{padding:var(--s4)}
.psc-strip-inset .psc-strip-v{font-size:21px}
.psc-strip-inset .psc-strip-s{margin-top:7px}
/* The best mover reads as a caption under the strip, not a second heading. */
.psc-seo-mover{margin-top:var(--s4)}
.psc-seo-mover strong{display:flex;align-items:center;gap:8px;font-weight:var(--w-semi);color:var(--ink)}
.psc-seo-mover .psc-i{color:var(--ok-text,#1E7B3C);flex:none}
.psc-track-cap strong{font-family:var(--fh);font-weight:700;color:var(--ink);letter-spacing:-0.018em;font-size:var(--t-sm)}

/* ---- The next-milestone strip ----------------------------------------------
   Tone follows WHOSE TURN IT IS, which the Stages registry already knows —
   a soft wash, not an ink panel; the colour is a fact, not decoration.
   ------------------------------------------------------------------------------ */
.psc-status-next{
  margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface-sunken);border:1px solid var(--hairline-soft);
}
.psc-status-next.tone-you{background:var(--wash);border-color:#F0D9B4}
.psc-status-next-k{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-size:var(--t-micro);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.psc-status-next.tone-you .psc-status-next-k{color:var(--orange-dk)}
.psc-status-next strong{font-family:var(--fh);font-size:var(--t-sm);font-weight:700;letter-spacing:-0.018em;color:var(--ink)}
.psc-status-next p{font-size:var(--t-xs);line-height:1.5;color:var(--muted)}
.psc-status-next .psc-btn{margin-top:4px;align-self:flex-start}

.psc-status-preview{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline-soft);display:flex;align-items:center;gap:var(--s4)}
.psc-status-preview .psc-thumb{width:96px;aspect-ratio:16/10;flex:none}

/* ---- Counter strip ----------------------------------------------------------
   One bordered panel, hairline dividers between cells — a strip, not four
   separate floating cards. Every figure is real: the project, the billing
   record or a count of rows the customer owns.
   ------------------------------------------------------------------------------ */
.psc-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.psc-strip-cell{position:relative;padding:var(--s4) var(--s5);display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--hairline-soft);transition:background-color var(--dur-1) ease}
.psc-strip-cell:first-child{border-left:0}
.psc-strip-cell:hover{background:var(--surface-sunken)}
.psc-strip-k{font-family:var(--fh);font-size:var(--t-micro);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.psc-strip-k .psc-i{color:#B7C0C9}
.psc-strip-v{font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-0.026em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.psc-strip-v small{font-size:.55em;font-weight:700;color:var(--muted);margin-left:2px}
.psc-strip-v.is-word{font-size:18px}
.psc-strip-s{margin-top:6px;font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.psc-strip-cell.is-hot .psc-strip-v{color:var(--orange-dk)}

/* ---- Stat tiles ------------------------------------------------------------
   Four facts, each one number. Every figure here is read from the project,
   the billing record or a count of real rows — there is no tile whose number
   had to be invented to fill the row, which is why there are four and not six.
   ------------------------------------------------------------------------------ */
.psc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.psc-stat{
  position:relative;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;min-width:0;
  transition:border-color var(--dur-2) ease,box-shadow var(--dur-2) ease;
}
a.psc-stat:hover{border-color:#CFC7B9;box-shadow:var(--shadow-raise)}
.psc-stat-k{font-family:var(--fh);font-size:var(--t-micro);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3);display:flex;align-items:center;gap:7px}
.psc-stat-k .psc-i{color:#B7C0C9}
.psc-stat-v{
  font-family:var(--fh);font-size:var(--t-stat);font-weight:800;letter-spacing:-0.028em;
  line-height:.95;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  overflow-wrap:anywhere;
}
.psc-stat-v small{font-size:.5em;font-weight:700;letter-spacing:-0.02em;color:var(--muted);margin-left:2px}
.psc-stat-v.is-word{font-size:23px;letter-spacing:-0.032em;line-height:1.15}
.psc-stat-s{margin-top:var(--s2);font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.psc-stat-s b{font-family:var(--fh);font-weight:700;color:var(--ink-2)}
.psc-stat.is-hot .psc-stat-v{color:var(--orange-dk)}

/* ---- Bento -----------------------------------------------------------------
   Unequal on purpose. The activity feed is the tall one because it is the
   thing worth reading; everything beside it is something to check.
   ------------------------------------------------------------------------------ */
.psc-bento{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--s4);align-items:start}
.psc-bento-main,.psc-bento-side{display:flex;flex-direction:column;gap:var(--s4);min-width:0}

/* ---- Website thumbnail -------------------------------------------------------
   A real screenshot when one exists; a labelled placeholder when it does not.
   Never a stock picture of somebody else's website standing in for theirs.
   ------------------------------------------------------------------------------ */
.psc-thumb{display:block;border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;background:var(--surface-sunken);aspect-ratio:16/10;position:relative}
.psc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.psc-thumb-empty{display:grid;place-items:center;align-content:center;height:100%;gap:var(--s2);color:var(--muted);font-size:var(--t-xs);text-align:center;padding:var(--s4)}
.psc-thumb-empty .psc-i{color:#C3CBD3}

/* ---- To do — the action centre ----------------------------------------------
   ONE bordered container, hairline-separated rows: icon tile, title, muted
   description, right-aligned CTA. Jobber's To-do list, verbatim. The empty
   state is a designed answer, never a gap.
   ------------------------------------------------------------------------------ */
.psc-act{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface)}
.psc-act-list{list-style:none;margin:0;padding:0}
.psc-act-row{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s4) var(--s5);border-top:1px solid var(--hairline-soft)}
.psc-act-row:first-child{border-top:0}
.psc-act-tile{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-sunken);color:var(--muted);flex:none;margin-top:1px}
.psc-act-urgent .psc-act-tile{background:var(--err-bg,#FBEAEA);color:var(--err-text,#B3261E)}
.psc-act-action .psc-act-tile{background:var(--wash);color:var(--orange-dk)}
.psc-act-main{min-width:0;flex:1}
.psc-act-main strong{display:block;font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.012em;color:var(--ink)}
.psc-act-main p{margin:3px 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.5;max-width:62ch}
.psc-act-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex:none;margin-left:auto;padding-top:2px}

.psc-act-empty{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:var(--s6) var(--s5)}
.psc-act-empty-i{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok-text);margin-bottom:6px}
.psc-act-empty-h{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.psc-act-empty p{margin:2px 0 0;font-size:var(--t-sm);color:var(--muted)}

/* ---- Right-column fact cards ------------------------------------------------
   Stacked bordered cards: a title (+ optional chevron), a short line of real
   guidance. No invented statistic ever appears here.
   ------------------------------------------------------------------------------ */
.psc-fact-card{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface);padding:var(--s5)}
.psc-fact-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.psc-fact-head .psc-k{margin-bottom:0}
.psc-fact-p{margin:var(--s2) 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--ink-2)}
.psc-fact-note{display:flex;align-items:center;gap:6px;margin:var(--s3) 0 0;font-size:var(--t-xs);color:var(--muted)}
.psc-fact-card .psc-btn{margin-top:var(--s3)}/* ---- Rail cards ---------------------------------------------------------------- */

.psc-rail-card > .psc-k{margin-bottom:var(--s3)}
.psc-rail-links .psc-i{color:var(--faint)}
.psc-rail-links a:hover .psc-i{color:var(--orange)}

/* ---- "+ New request" — pinned rail button ------------------------------- */
.psc-new-request{justify-content:center;gap:8px;margin-bottom:var(--s2);font-size:13.5px;padding:9px 12px}

/* ---- New-request drawer --------------------------------------------------
   A right-hand drawer on desktop (Jobber's templates-drawer). On phones it
   becomes a bottom sheet — the labelled action sheet that is the mobile
   equivalent of the same "+ New request" router. Router only: every row
   below is a link into an existing, wired portal section.
   ------------------------------------------------------------------------------ */
.psc-drawer{display:block;position:fixed;inset:0;z-index:95}
.psc-drawer[hidden]{display:none}
.psc-drawer::before{content:"";position:absolute;inset:0;background:rgba(18,33,47,.4);animation:pscDrawerFade .18s ease both}
.psc-drawer-in{
  position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;
  background:var(--surface);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;animation:pscDrawerIn .22s var(--ease-out) both;
}
.psc-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s5);border-bottom:1px solid var(--hairline)}
.psc-drawer-head strong{font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.psc-drawer-x{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--muted)}
.psc-drawer-x:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-drawer-list{display:flex;flex-direction:column;padding:var(--s3);overflow-y:auto}
.psc-drawer-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r-md);text-align:left;min-width:0}
.psc-drawer-row:hover{background:var(--surface-sunken)}
.psc-drawer-row-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.psc-drawer-row-t strong{font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.012em;color:var(--ink)}
.psc-drawer-row-t span{font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.psc-drawer-ic{margin-left:auto;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--wash);color:var(--orange-dk)}
@keyframes pscDrawerFade{from{opacity:0}to{opacity:1}}
@keyframes pscDrawerIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}

@media (max-width:1023px){
  .psc-drawer-in{
    top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;
    border-radius:18px 18px 0 0;animation:pscDrawerSheetIn .24s var(--ease-out) both;
    padding-bottom:env(safe-area-inset-bottom,0px);max-height:calc(100vh - 60px);
  }
  .psc-drawer-row{padding:14px 8px}
  .psc-drawer-ic{width:42px;height:42px;border-radius:50%}
  @keyframes pscDrawerSheetIn{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
}

/* ------------------------------------------------------------
   6. HERO + RING
   ------------------------------------------------------------ */
.psc-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px 36px;
  box-shadow:var(--shadow-hero);position:relative;overflow:hidden;
}
.psc-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.psc-hero.is-live::before{background:var(--ok-dot)}
.psc-hero-main{min-width:0}
.psc-hero-stage{display:block;font-family:var(--fh);font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-0.01em;margin-top:6px}
.psc-hero-t{font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1.1;letter-spacing:-0.04em;margin-top:4px;max-width:18ch}
.psc-hero-p{margin-top:12px;font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:58ch}
.psc-hero-meta{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.psc-hero-n{font-family:var(--fh);font-size:14px;font-weight:600;color:var(--muted)}
.psc-hero-link{display:inline-flex;align-items:center;gap:5px;color:var(--orange-dk)}
.psc-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.psc-hero-ring{position:relative;width:150px;height:150px;flex:none}
.psc-ring{width:150px;height:150px;transform:rotate(-90deg)}
.psc-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.psc-ring-bg{stroke:var(--line-2)}
.psc-ring-fg{stroke:var(--orange);stroke-dasharray:326.7;stroke-dashoffset:calc(326.7 - 326.7 * var(--psc-ring) / 100);transition:stroke-dashoffset 1.1s var(--ease-out) .25s}
.js .psc-ring:not(.is-in) .psc-ring-fg{stroke-dashoffset:326.7}
.is-live .psc-ring-fg{stroke:var(--ok-dot)}
.psc-ring-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--fh)}
.psc-ring-t strong{font-size:34px;font-weight:800;letter-spacing:-0.05em;line-height:1;color:var(--ink)}
.psc-ring-t strong span{font-size:17px;color:var(--muted);font-weight:700;letter-spacing:-0.02em}
.psc-ring-t small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.psc-ring-tick{color:var(--ok-dot)}

/* ------------------------------------------------------------
   7. NEXT ACTION
   ------------------------------------------------------------ */
.psc-next{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 20px;align-items:center;
  border:1px solid;border-radius:14px;padding:22px 26px;
}
.psc-next.tone-you{background:#FFF7EA;border-color:#F3D8AE}
.psc-next.tone-us{background:var(--slate-bg);border-color:var(--slate-line)}
.psc-next.tone-calm{background:var(--ok-bg);border-color:var(--ok-line)}
.psc-next-i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--white);box-shadow:var(--shadow-card)}
.tone-you .psc-next-i{color:var(--orange)}
.tone-us .psc-next-i{color:var(--ink-2)}
.tone-calm .psc-next-i{color:var(--ok-dot)}
.psc-next-k{display:flex;align-items:center;gap:8px;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.psc-next-k em{font-style:normal;letter-spacing:0;text-transform:none;font-size:11.5px;padding:2px 8px;border-radius:100px;background:var(--white);border:1px solid rgba(18,33,47,.08)}
.tone-you .psc-next-k em{color:var(--orange-dk)}
.tone-calm .psc-next-k em{color:var(--ok-text)}
.psc-next-t{font-size:20px;font-weight:800;letter-spacing:-0.03em;line-height:1.2}
.psc-next-body p{margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.55;max-width:66ch}
.psc-next-cta{flex:none}
.psc-next-compact{padding:18px 22px}
.psc-next-compact .psc-next-t{font-size:17.5px}
.psc-next-compact .psc-next-i{width:40px;height:40px}/* ------------------------------------------------------------
   8. JOURNEY — rail (overview) and list (project page)
   ------------------------------------------------------------ */

.psc-journey{display:grid;grid-template-columns:repeat(var(--psc-jn,6),minmax(0,1fr));gap:0 6px;position:relative;padding-top:6px}
.psc-journey::before,.psc-journey::after{content:"";position:absolute;left:calc(100% / (var(--psc-jn,6) * 2));right:calc(100% / (var(--psc-jn,6) * 2));top:22px;height:2px;border-radius:2px}
.psc-journey::before{background:var(--line)}
.psc-journey::after{background:var(--orange);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease-io) .2s}
.psc-journey.is-in::after{transform:scaleX(var(--psc-fill))}
html:not(.js) .psc-journey::after{transform:scaleX(var(--psc-fill))}
.psc-j-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.psc-j-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--line);color:var(--muted);position:relative;transition:border-color .3s ease,background-color .3s ease,color .3s ease}
.psc-j-n{font-style:normal;font-family:var(--fh);font-size:12.5px;font-weight:800;color:#A39B8E}
.psc-j-core{display:block;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.psc-j-label{margin-top:10px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.015em;color:var(--ink-2);line-height:1.25}
.psc-j-state{margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.3}
.state-complete .psc-j-dot{background:var(--orange);border-color:var(--orange);color:#fff}
.state-complete .psc-j-state{color:#93A0AC}
.state-live .psc-j-dot{background:var(--ok-dot);border-color:var(--ok-dot);color:#fff}
.state-live .psc-j-label{color:var(--ok-text)}
.state-live .psc-j-state{color:var(--ok-text);font-weight:600}
.state-active .psc-j-dot,.state-waiting_customer .psc-j-dot,.state-waiting_primestart .psc-j-dot,.state-paused .psc-j-dot{border-color:var(--orange)}
.state-active .psc-j-label,.state-waiting_customer .psc-j-label,.state-waiting_primestart .psc-j-label{color:var(--orange-dk)}
.state-active .psc-j-state{color:var(--orange-dk);font-family:var(--fh);font-weight:700}
.state-waiting_customer .psc-j-core{background:var(--amber)}
.state-waiting_customer .psc-j-dot{border-color:var(--amber)}
.state-waiting_customer .psc-j-state{color:var(--warn-text);font-family:var(--fh);font-weight:700}
.state-waiting_primestart .psc-j-core{background:var(--ink-2)}
.state-waiting_primestart .psc-j-dot{border-color:var(--ink-2)}
.state-waiting_primestart .psc-j-label{color:var(--ink)}
.state-waiting_primestart .psc-j-state{color:var(--ink-2);font-family:var(--fh);font-weight:700}
.state-paused .psc-j-core{background:var(--grey-dot)}
.state-paused .psc-j-dot{border-color:var(--grey-dot)}
.state-up_next .psc-j-label{color:var(--muted);font-weight:600}
.state-up_next .psc-j-state{font-style:italic;color:#A39B8E}
/* one-shot activation ring on the current stage */
.is-in .state-active .psc-j-dot::after,.is-in .state-waiting_customer .psc-j-dot::after,.is-in .state-waiting_primestart .psc-j-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;animation:pscRing .9s var(--ease) .9s 1;pointer-events:none}
@keyframes pscRing{0%{box-shadow:0 0 0 0 rgba(217,98,14,.38)}100%{box-shadow:0 0 0 14px rgba(217,98,14,0)}}
/* staggered entrance of the dots */
.js .psc-journey:not(.is-in) .psc-j-step{opacity:0;transform:translateY(6px)}
.psc-journey.is-in .psc-j-step{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .5s var(--ease);transition-delay:calc(.08s * var(--i))}

.psc-journey-list{position:relative;padding-left:0}
.psc-jl-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;padding:0 0 22px}
.psc-jl-step::before{content:"";position:absolute;left:16px;top:36px;bottom:-2px;width:2px;background:var(--line)}
.psc-jl-step:last-child::before{display:none}
.psc-jl-step.state-complete::before{background:var(--orange)}
.psc-jl-step.state-live::before{display:none}
.psc-jl-step .psc-j-dot{width:34px;height:34px}
.psc-jl-body{padding-top:5px;min-width:0}
.psc-jl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.psc-jl-head strong{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.022em}
.psc-jl-date{font-size:13px;color:#93A0AC;margin-left:auto}
.psc-jl-body p{margin-top:8px;font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:62ch}
.psc-jl-step.state-up_next .psc-jl-head strong{color:var(--muted);font-weight:600}
.psc-jl-step.state-complete .psc-jl-head strong{color:var(--ink-2)}
.js .psc-journey-list:not(.is-in) .psc-jl-step{opacity:0;transform:translateY(6px)}
.psc-journey-list.is-in .psc-jl-step{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .5s var(--ease);transition-delay:calc(.06s * var(--i))}

/* ------------------------------------------------------------
   9. TIMELINE / UPDATES
   ------------------------------------------------------------ */
.psc-timeline li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);position:relative}
.psc-timeline li:last-child{border-bottom:0}
.psc-timeline time{font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:-0.01em;padding-top:3px;white-space:nowrap}
.psc-timeline strong{display:block;font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);line-height:1.35}
.psc-timeline p{margin-top:3px;font-size:13.5px;color:var(--muted);line-height:1.5}
.psc-timeline-full li{grid-template-columns:96px minmax(0,1fr)}
.psc-timeline li.type-update strong::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:2px}
.psc-updates li{padding:12px 0;border-bottom:1px solid var(--line-2)}
.psc-updates li:last-child{border-bottom:0;padding-bottom:0}
.psc-updates strong{display:block;font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em}
.psc-updates p{margin-top:4px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.psc-updates time{display:block;margin-top:5px;font-size:12px;color:#93A0AC}

/* ------------------------------------------------------------
   10. CONVERSATIONS — thread lists, messages
   ------------------------------------------------------------ */
.psc-threads li{border-bottom:1px solid var(--line-2)}
.psc-threads li:last-child{border-bottom:0}
.psc-threads a{display:flex;align-items:center;gap:16px;padding:16px 24px;transition:background-color .15s ease}
.psc-threads a:hover{background:#FCFBF8}
.psc-thread-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.psc-thread-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.psc-thread-from{font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.psc-thread-subj{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);display:flex;align-items:center;gap:8px}
.psc-thread-prev{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-threads time{font-size:12.5px;color:#93A0AC;white-space:nowrap}
.psc-thread-chev{color:#C9C1B4}
.psc-threads li.unread .psc-thread-subj{color:var(--ink)}
.psc-threads li.unread .psc-thread-prev{color:var(--ink-2);font-weight:500}
.psc-threads li.unread a{box-shadow:inset 3px 0 0 var(--orange)}
.psc-threads-compact a{padding:10px 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"from subj time" "from prev time";gap:1px 12px;align-items:center}
.psc-threads-compact .psc-thread-from{grid-area:from;font-size:11px;width:56px}
.psc-threads-compact .psc-thread-subj{grid-area:subj;font-size:14.5px}
.psc-threads-compact .psc-thread-prev{grid-area:prev;font-size:13px}
.psc-threads-compact time{grid-area:time}
.psc-threads-compact li.unread a{box-shadow:none}
.psc-threads-compact li.unread .psc-thread-from{color:var(--orange-dk)}
.psc-threads-compact a:hover{background:transparent}
.psc-threads-mini a{padding:9px 0;display:flex;justify-content:space-between;gap:12px}
.psc-threads-mini .psc-thread-subj{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.psc-threads-mini a:hover{background:transparent}
.psc-threads-mini li.unread a{box-shadow:none}
.psc-threads-mini li.unread .psc-thread-subj::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:2px}

.psc-convo{display:flex;flex-direction:column;gap:20px}
.psc-convo li{display:flex;flex-direction:column;gap:8px;max-width:88%}
.psc-convo li.from-client{align-self:flex-end;align-items:flex-end}
.psc-convo-who{display:flex;align-items:center;gap:10px}
.psc-convo-who .psc-avatar{width:30px;height:30px;font-size:11.5px}
.psc-convo-who strong{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.02em}
.psc-convo-who time{font-size:12.5px;color:#93A0AC}
.from-client .psc-convo-who{flex-direction:row-reverse}
.psc-convo-body{background:var(--paper);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:14px 18px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.psc-convo-body p + p{margin-top:10px}
.psc-convo-body ul,.psc-convo-body ol{padding-left:20px;margin:8px 0;list-style:disc}
.psc-convo-body ol{list-style:decimal}
.psc-convo-body a{color:var(--orange-dk);border-bottom:1px solid rgba(180,78,8,.35)}
.from-client .psc-convo-body{background:var(--ink);border-color:var(--ink);color:#E7EDF3;border-radius:14px 14px 4px 14px}
.from-client .psc-convo-body a{color:var(--amber)}
.psc-convo-status{font-size:13px}
.psc-cr-waiting{display:flex;align-items:center;gap:8px;padding:12px 0 6px}

.psc-reply{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.psc-reply-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.psc-attach{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.psc-attach input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.psc-attach-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px dashed #CFC7B9;border-radius:9px;font-family:var(--fh);font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;background:var(--white);transition:border-color .15s ease,background-color .15s ease;align-self:flex-start}
.psc-attach-btn:hover,.psc-attach.is-over .psc-attach-btn{border-color:var(--orange);background:var(--wash)}
.psc-attach input:focus-visible + .psc-attach-btn{outline:2px solid var(--orange);outline-offset:2px}

.psc-attachments{display:flex;flex-wrap:wrap;gap:8px}
.psc-attachments a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--white);font-size:13.5px;color:var(--ink);transition:border-color .15s ease,background-color .15s ease;max-width:100%}
.psc-attachments a:hover{border-color:#CFC7B9;background:var(--paper)}
.psc-attachments a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.psc-attachments a small{color:var(--muted);font-size:12px}
.psc-attachments .psc-i:first-child{color:var(--orange)}
.psc-att-dl{color:#93A0AC}
.psc-attachments-compact a{padding:6px 10px;font-size:13px}

/* ------------------------------------------------------------
   11. CHANGE REQUESTS
   ------------------------------------------------------------ */
.psc-cr-list li{border-bottom:1px solid var(--line-2)}
.psc-cr-list li:last-child{border-bottom:0}
.psc-cr-list a{display:flex;align-items:center;gap:18px;padding:15px 4px;transition:background-color .15s ease;border-radius:8px}
.psc-cr-list a:hover{background:#FCFBF8}
.psc-cr-ref{font-family:var(--fh);font-size:13.5px;font-weight:800;color:var(--muted);letter-spacing:-0.01em;width:46px;flex:none}
.psc-cr-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.psc-cr-main strong{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-cr-main small{font-size:13px;color:var(--muted)}
.psc-cr-chev{color:#C9C1B4}
.psc-cr-mini li a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.psc-cr-mini li:last-child a{border-bottom:0}
.psc-cr-mini .psc-cr-ref{width:auto;font-size:12.5px}
.psc-cr-mini .psc-cr-t{font-family:var(--fh);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-cr-detail{display:flex;flex-direction:column;gap:22px}
.psc-cr-block .psc-k{margin-bottom:6px}
.psc-cr-block p{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.psc-cr-block p + p{margin-top:10px}

/* ------------------------------------------------------------
   12. DOCUMENTS
   ------------------------------------------------------------ */
.psc-upload-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.9fr);gap:24px;align-items:start}
.psc-upload-side{display:flex;flex-direction:column;gap:16px}
.psc-upload-side .psc-btn{align-self:flex-start}
.psc-drop{position:relative;border:1.5px dashed #CFC7B9;border-radius:12px;background:#FCFBF8;transition:border-color .15s ease,background-color .15s ease}
.psc-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.psc-drop-in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:26px 20px;cursor:pointer;color:var(--ink-2)}
.psc-drop-in .psc-i{color:var(--orange)}
.psc-drop-in span{font-size:15px}
.psc-drop-in strong{font-family:var(--fh);color:var(--orange-dk);font-weight:700}
.psc-drop-in small{font-size:13px;color:var(--muted);line-height:1.45}
.psc-drop-lg .psc-drop-in{padding:40px 24px;min-height:220px}
.psc-drop:hover,.psc-drop.is-over{border-color:var(--orange);background:var(--wash)}
.psc-drop input:focus-visible ~ .psc-drop-in{outline:2px solid var(--orange);outline-offset:-4px;border-radius:10px}
.psc-drop-list{display:flex;flex-direction:column;gap:6px;padding:0 16px 14px}
.psc-drop-list:empty{display:none}
.psc-attach .psc-drop-list{padding:0}
.psc-drop-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:8px 12px;background:var(--white);border:1px solid var(--line);border-radius:8px}
.psc-drop-list li .psc-i{color:var(--orange)}
.psc-drop-list li span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-drop-list li small{color:var(--muted)}
.psc-drop-list li.is-bad{border-color:var(--err-line);background:var(--err-bg);color:var(--err-text)}
.psc-drop-list li.is-bad .psc-i{color:var(--err-dot)}

.psc-docs li{display:flex;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--line-2)}
.psc-doc-i{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--paper);color:var(--ink-2)}
.psc-doc-i.kind-image{background:#EEF4F9;color:#2D5A87}
.psc-doc-i.kind-pdf{background:#FDF0EE;color:#B3261E}
.psc-doc-i.kind-doc{background:#EEF2F5;color:#2B3B4B}
.psc-doc-i.kind-sheet{background:#EEF6EE;color:#1F5A2A}
.psc-doc-i.kind-zip,.psc-doc-i.kind-file{background:var(--wash);color:var(--orange-dk)}
.psc-doc-i.kind-video{background:#F3EEF9;color:#5A3A8A}
.psc-doc-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.psc-doc-name{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-doc-name:hover{color:var(--orange-dk)}
.psc-doc-main small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-doc-note{color:var(--ink-2)!important;font-style:italic}
.psc-doc-actions{display:flex;align-items:center;gap:2px;flex:none}
.psc-docs-mini li a{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.psc-docs-mini li:last-child a{border-bottom:0}
.psc-docs-mini .psc-i{color:var(--orange)}
.psc-docs-mini span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fh);font-weight:600;letter-spacing:-0.015em}
.psc-docs-mini small{color:var(--muted);font-size:12px}

/* ------------------------------------------------------------
   13. PREVIEW — browser frame, phone, ghost empty state
   ------------------------------------------------------------ */
.psc-frame{border-radius:10px;overflow:hidden;border:1px solid rgba(18,33,47,.1);background:#fff;box-shadow:0 26px 54px -30px rgba(18,33,47,.45)}
.psc-chrome{height:36px;background:#E8E3DA;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #D8D2C7}
.psc-chrome i{width:9px;height:9px;border-radius:50%;background:#C5BEB2;flex:none}
.psc-url{margin-left:10px;background:#F8F6F2;border:1px solid #DCD6CB;border-radius:4px;font-size:11px;color:#7A736C;padding:3px 11px;flex:1;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-shot{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden;display:block}
.psc-shot-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.psc-shot-open{display:grid;place-items:center;background:linear-gradient(180deg,#FBF9F5,#F0EBE2)}
.psc-shot-open-in{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:24px;color:var(--ink)}
.psc-shot-open-in .psc-i{color:var(--orange);margin-bottom:6px;transition:transform .2s var(--ease)}
.psc-shot-open:hover .psc-shot-open-in .psc-i{transform:translateY(-2px)}
.psc-shot-open-in strong{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em}
.psc-shot-open-in small{font-size:13px;color:var(--muted)}
.psc-preview-card .psc-card-head{margin-bottom:16px}
.psc-preview-meta{display:flex;align-items:center;font-size:13.5px;color:var(--muted)}
.psc-preview-meta strong{color:var(--ink);font-family:var(--fh)}

.psc-phone-wrap{display:flex;justify-content:center;padding:6px 0 2px}
.psc-phone{position:relative;width:250px;aspect-ratio:9/18.5;border-radius:34px;background:#12212F;padding:10px;box-shadow:0 30px 60px -30px rgba(18,33,47,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.psc-phone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:76px;height:20px;border-radius:12px;background:#12212F;z-index:2}
.psc-phone-screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#fff;display:block}
.psc-phone-screen iframe{width:390px;height:calc(100% * 390 / 230);border:0;transform:scale(calc(230 / 390));transform-origin:0 0}
.psc-phone .psc-shot-open{aspect-ratio:auto;display:grid;place-items:center}
.psc-phone .psc-shot-open-in strong{font-size:15px}

.psc-preview-side{display:flex;flex-direction:column;gap:18px}
.psc-preview-notes{padding:14px 16px;border-radius:10px;background:var(--wash);border:1px solid var(--warn-line);font-size:14.5px;color:var(--ink-2);line-height:1.55}
.psc-preview-notes .psc-k{margin-bottom:4px;color:var(--orange-dk)}
.psc-preview-notes p + p{margin-top:8px}
.psc-choice-stack{display:flex;flex-direction:column;gap:10px}
.psc-choice{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.psc-choice:hover{border-color:#CFC7B9;transform:translateY(-1px);box-shadow:0 14px 30px -22px rgba(18,33,47,.4)}
.psc-choice-i{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--paper);color:var(--ink-2);flex:none}
.psc-choice-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.psc-choice-t strong{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.022em}
.psc-choice-t small{font-size:13px;color:var(--muted)}
.psc-choice-chev{color:#C9C1B4}
.psc-choice-primary{border-color:#F2DFC6;background:#FFF9F1}
.psc-choice-primary .psc-choice-i{background:var(--orange);color:#fff}
.psc-choice-primary:hover{border-color:var(--orange)}
.psc-choice-done{border-color:var(--ok-line);background:var(--ok-bg)}
.psc-choice-done .psc-choice-i{background:var(--ok-dot);color:#fff}
.psc-preview-reassure{line-height:1.55}

.psc-preview-empty{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;padding:34px 36px}
.psc-frame-ghost{position:relative;box-shadow:0 20px 44px -30px rgba(18,33,47,.35)}
.psc-ghost{aspect-ratio:16/10;background:#fff;padding:0;display:flex;flex-direction:column}
.psc-ghost-nav{height:34px;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid #EEEBE5}
.psc-ghost-nav b{width:44px;height:8px;border-radius:3px;background:#D9D4CB;margin-right:auto}
.psc-ghost-nav i{width:26px;height:5px;border-radius:3px;background:#EDE9E2}
.psc-ghost-nav em{width:40px;height:12px;border-radius:3px;background:#F2DFC6}
.psc-ghost-hero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 22px;background:linear-gradient(115deg,#F5F1EA,#FBF9F5)}
.psc-ghost-hero b{display:block;width:58%;height:12px;border-radius:4px;background:#D9D4CB}
.psc-ghost-hero b.w2{width:42%}
.psc-ghost-hero i{display:block;width:48%;height:5px;border-radius:3px;background:#E6E0D6;margin-top:2px}
.psc-ghost-hero em{display:block;width:64px;height:16px;border-radius:3px;background:#F2DFC6;margin-top:6px}
.psc-ghost-cards{flex:none;height:26%;display:flex;gap:10px;padding:10px 22px;background:#FBFAF8;border-top:1px solid #EEEBE5}
.psc-ghost-cards span{flex:1;border:1px solid #EDE9E2;border-radius:4px;background:#fff}
.psc-ghost-badge{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-pop);font-family:var(--fh);font-size:13px;font-weight:700;color:var(--orange-dk);letter-spacing:-0.01em}
.psc-preview-empty-t p{margin-top:10px;font-size:16px;color:var(--muted);line-height:1.6;max-width:44ch}
.psc-preview-target{display:flex;align-items:center;gap:8px;margin-top:14px!important;font-family:var(--fh);font-weight:600;color:var(--ink-2)!important;font-size:14.5px!important}
.psc-preview-target .psc-i{color:var(--orange)}
.psc-preview-steps{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.psc-preview-steps div{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-2)}
.psc-preview-steps b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--fh);font-size:12.5px;font-weight:800;color:var(--orange-dk);background:var(--wash);border:1px solid var(--warn-line);flex:none}

/* ------------------------------------------------------------
   14. PAYMENTS
   ------------------------------------------------------------ */
.psc-plan-card{display:flex;flex-direction:column;gap:24px}
.psc-plan-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}
.psc-plan-name{font-size:24px;font-weight:800;letter-spacing:-0.035em;margin-bottom:6px}
.psc-plan-top .psc-muted{font-size:15px;max-width:52ch;line-height:1.55}
.psc-plan-price{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.psc-amount{display:flex;align-items:baseline;gap:2px;font-family:var(--fh);letter-spacing:-0.055em}
.psc-cur{font-size:22px;font-weight:700;transform:translateY(-12px)}
.psc-num{font-size:46px;font-weight:800;line-height:.9}
.psc-per{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-0.022em;margin-left:7px}
.psc-plan-price small{font-size:13px;color:var(--muted)}
.psc-facts-plan{padding:22px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.psc-plan-includes .psc-k{margin-bottom:10px}
.psc-ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:10px var(--s6);max-width:84ch}
.psc-ticks li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--ink-2);line-height:1.5}
.psc-ticks .psc-i{color:var(--orange);margin-top:4px}
.psc-plan-after{font-size:14px;color:var(--muted);line-height:1.6;max-width:78ch}
.psc-soon{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:12px;background:#FCFBF8;border:1px dashed #D9D2C6}
.psc-soon-i{width:40px;height:40px;border-radius:10px;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);margin-bottom:6px}
.psc-soon strong{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em}
.psc-soon p{font-size:14px;color:var(--muted);line-height:1.55}
.psc-pm{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.psc-pm-i{width:42px;height:42px;border-radius:10px;background:var(--paper);display:grid;place-items:center;color:var(--ink-2)}
.psc-pm strong{display:block;font-family:var(--fh);font-size:15px}
.psc-pm small{color:var(--muted);font-size:13px}
.psc-invoices li a{display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.psc-invoices li:last-child a{border-bottom:0}
.psc-extras li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.psc-extras li:last-child{border-bottom:0}
.psc-extras strong{font-family:var(--fh);font-size:15px;display:block}
.psc-extras small{color:var(--muted);font-size:13px}
.psc-extras em{font-style:normal;font-family:var(--fh);font-weight:700;color:var(--orange-dk)}
.psc-extras time{font-size:13px;color:var(--muted)}
.psc-plan-foot{margin-top:-4px}

/* ------------------------------------------------------------
   15. FORMS
   ------------------------------------------------------------ */
.psc-form{display:flex;flex-direction:column;gap:20px}
.psc-form .psc-h3{margin-bottom:2px}
.psc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.psc-field{display:flex;flex-direction:column;border:0;padding:0;margin:0;min-width:0}
.psc-field-wide{grid-column:1/-1}
.psc-label{font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.012em;color:var(--ink-2);margin-bottom:8px;display:block}
.psc-label em{font-style:normal;font-weight:500;color:var(--muted)}
.psc-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.psc-label-row .psc-label{margin-bottom:8px}
.psc-input{font-family:var(--fb);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--r-input);padding:13px 16px;width:100%;outline:0;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
textarea.psc-input{resize:vertical;min-height:120px;line-height:1.6}
.psc-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.12)}
.psc-input::placeholder{color:#A6AFB7}
.psc-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%235C6C7B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.psc-static{font-size:15.5px;padding:12px 0 0;color:var(--ink);font-family:var(--fh);font-weight:600;letter-spacing:-0.02em}
.psc-help{display:block;margin-top:7px;font-size:13px;color:var(--muted);line-height:1.5}
.psc-err{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:13.5px;color:var(--err-text);font-weight:500}
.has-error .psc-input{border-color:#B3261E;background:var(--err-bg)}
.has-error .psc-input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.psc-choices{display:flex;flex-wrap:wrap;gap:9px}
.psc-choice-chip{position:relative}
.psc-choice-chip input{position:absolute;opacity:0;width:0;height:0}
.psc-choice-chip span{display:inline-block;font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.018em;color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:100px;padding:10px 18px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;min-height:44px;line-height:22px}
.psc-choice-chip span:hover{border-color:#CFC7B9}
.psc-choice-chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.psc-choice-chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
/* Same reasoning as the cards: the fill inverts, and that is a colour change.
   The tick is what makes the chosen chip readable without relying on it. */
.psc-choice-chip input:checked + span::before{content:"✓";margin-right:7px;font-weight:800}
.psc-check{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.55;color:var(--ink-2);cursor:pointer;position:relative}
.psc-check input{position:absolute;opacity:0;width:0;height:0}
.psc-box{width:22px;height:22px;border-radius:6px;border:1.5px solid #CFC7B9;background:#fff;display:grid;place-items:center;flex:none;margin-top:2px;color:#fff;transition:background-color .15s ease,border-color .15s ease}
.psc-box .psc-i{opacity:0;transition:opacity .15s ease}
.psc-check input:checked + .psc-box{background:var(--orange);border-color:var(--orange)}
.psc-check input:checked + .psc-box .psc-i{opacity:1}
.psc-check input:focus-visible + .psc-box{outline:2px solid var(--orange);outline-offset:2px}
.psc-check-lg{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);align-items:center}
.psc-check-lg .psc-box{width:26px;height:26px;margin-top:0}
.psc-check-lg.has-error{border-color:var(--err-line);background:var(--err-bg)}
.psc-toggles{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.psc-toggle{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2);cursor:pointer;position:relative}
.psc-toggle:last-child{border-bottom:0}
.psc-toggle input{position:absolute;opacity:0;width:0;height:0}
.psc-toggle-sw{width:44px;height:26px;border-radius:100px;background:#D9D2C6;position:relative;flex:none;transition:background-color .2s ease}
.psc-toggle-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,33,47,.3);transition:transform .2s var(--ease)}
.psc-toggle input:checked + .psc-toggle-sw{background:var(--orange)}
.psc-toggle input:checked + .psc-toggle-sw::after{transform:translateX(18px)}
.psc-toggle input:focus-visible + .psc-toggle-sw{outline:2px solid var(--orange);outline-offset:2px}
.psc-toggle-t{display:flex;flex-direction:column;gap:1px}
.psc-toggle-t strong{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em}
.psc-toggle-t small{font-size:13px;color:var(--muted)}
.psc-form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:6px}
.psc-password{position:relative}
.psc-password .psc-input{padding-right:50px}
.psc-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.psc-password-toggle:hover{color:var(--ink);background:var(--paper)}

.psc-approve-card{display:flex;flex-direction:column;gap:24px}
.psc-approve-summary{display:flex;flex-direction:column;gap:3px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.psc-approve-summary strong{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-0.035em}
.psc-approve-summary .psc-link{align-self:flex-start;margin-top:6px}
.psc-approve-statement{font-family:var(--fh);font-size:19px;font-weight:700;letter-spacing:-0.028em;line-height:1.35;color:var(--ink);padding-left:18px;border-left:3px solid var(--orange)}
.psc-approve-actions{display:flex;gap:12px;flex-wrap:wrap}
.psc-approved{text-align:center;padding:44px 36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.psc-approved-mark{width:72px;height:72px;border-radius:50%;background:var(--ok-bg);border:2px solid var(--ok-line);color:var(--ok-dot);display:grid;place-items:center;margin-bottom:4px;animation:pscPopIn .5s var(--ease-out) both}
@keyframes pscPopIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.psc-approved-tick{display:none}
.psc-approved .psc-lede{margin:0 auto;text-align:center}
.psc-approved .psc-facts-inline{width:100%;max-width:560px;margin:8px auto 0;padding:18px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);text-align:center}
.psc-approved .psc-btn-row{justify-content:center;margin-top:8px}

/* ------------------------------------------------------------
   16. FLASH / NOTES / EMPTY STATES
   ------------------------------------------------------------ */
.psc-flash{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid;margin-bottom:22px;animation:pscRise .5s var(--ease) both}
.psc-flash.tone-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.psc-flash.tone-error{background:var(--err-bg);border-color:var(--err-line);color:var(--err-text)}
.psc-flash.tone-info{background:var(--slate-bg);border-color:var(--slate-line);color:var(--slate-text)}
.psc-flash-i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.7);flex:none;margin-top:-1px}
.psc-flash strong{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;display:block}
.psc-flash p{margin-top:2px;font-size:14px;line-height:1.5;opacity:.9}
.psc-flash-x{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;opacity:.6;flex:none}
.psc-flash-x:hover{opacity:1;background:rgba(255,255,255,.6)}
.psc-flash.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
.psc-auth-card .psc-flash{margin:18px 0 0}

.psc-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid;font-size:14.5px;line-height:1.55}
.psc-note .psc-i{flex:none;margin-top:2px}
.psc-note a{font-weight:600;border-bottom:1px solid currentColor}
.psc-note.tone-you{background:#FFF7EA;border-color:#F3D8AE;color:var(--warn-text)}
.psc-note.tone-us{background:var(--slate-bg);border-color:var(--slate-line);color:var(--slate-text)}
.psc-note.tone-live{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.psc-note.tone-paused{background:var(--grey-bg);border-color:var(--grey-line);color:var(--grey-text)}

.psc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 24px}
.psc-empty-i{width:52px;height:52px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--orange);margin-bottom:6px}
.psc-empty strong{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.psc-empty p{font-size:14.5px;color:var(--muted);max-width:40ch;line-height:1.55}
.psc-empty .psc-btn{margin-top:10px}
.psc-empty-sm{padding:22px 12px 12px}
.psc-empty-sm .psc-empty-i{width:42px;height:42px}
.psc-empty-sm strong{font-size:15px}
.psc-empty-sm p{font-size:13.5px}

.psc-support-list li{border-top:1px solid var(--line-2)}
.psc-support-list a{display:flex;align-items:center;gap:12px;padding:13px 22px;transition:background-color .15s ease}
.psc-support-list a:hover{background:#FCFBF8}
.psc-support-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.psc-support-main strong{font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psc-support-main small{font-size:12.5px;color:var(--muted)}
.psc-support-list li.unread strong::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:2px}
.psc-contact-line{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.025em;padding:10px 0;border-bottom:1px solid var(--line-2)}
.psc-contact-line .psc-i{color:var(--orange)}
.psc-contact-line:hover{color:var(--orange-dk)}
.psc-contact-line + .psc-muted{margin-top:12px}

/* ------------------------------------------------------------
   17. THE SPLIT SHELL — sign in, password, onboarding
   ------------------------------------------------------------
   One composition for every screen a customer meets before they are
   inside the product: form on the left, a full-height photograph on
   the right with a torn edge between them.

   Taken from the Jobber onboarding flow (see docs/JOBBER-PRIMESTART-UX-MAP.md)
   and translated into PrimeStart's palette: ink where Jobber is navy,
   orange where Jobber is green, Manrope and Inter throughout.

   The photograph is licensed trade stock — see assets/img/auth/README.txt.
   Nobody in it is a PrimeStart customer and nothing on these screens says
   otherwise.
   ------------------------------------------------------------ */
.psc-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--surface)}
.psc-split-single{grid-template-columns:1fr}

/* ---- The form half -------------------------------------------------------- */
.psc-split-form{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s8) var(--s9);min-width:0;position:relative;
}
.psc-split-in{width:100%;max-width:430px;margin:0 auto;display:flex;flex-direction:column}
.psc-split-form .psc-logo{padding:0;margin-bottom:var(--s7);align-self:flex-start}
/* Bigger on the sign-in screen, and carrying nothing underneath it: the
   strapline moved onto the photograph, where it is a statement about the
   reader rather than a subtitle to the company name. */
.psc-logo-lg .psc-mark{width:38px;height:38px;border-radius:var(--r-md)}
.psc-logo-lg .psc-mark span{width:14px;height:14px}
.psc-logo-lg .psc-word{font-size:26px;letter-spacing:-0.03em}
.psc-split-h{font-family:var(--fh);font-size:clamp(27px,2.8vw,34px);font-weight:var(--w-black);letter-spacing:-0.038em;line-height:1.12;color:var(--ink);margin:0}
.psc-split-p{margin-top:var(--s3);font-size:var(--t-sm);line-height:var(--lh-body);color:var(--muted);max-width:46ch}
.psc-split-form .psc-form,.psc-split-form form{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
/* Jobber's fields are noticeably larger than a default input. It is most of
   why the screens feel unhurried. */
.psc-split-form .psc-input{font-size:16px;padding:14px 15px}
.psc-split-alt{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline-soft);font-size:var(--t-sm);color:var(--muted)}
.psc-split-alt a{color:var(--orange-dk);font-weight:var(--w-semi)}

/* A thin progress bar directly under the mark, onboarding only. */
.psc-split-bar{height:5px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden;margin-bottom:var(--s6)}
.psc-split-bar span{display:block;height:100%;border-radius:var(--r-pill);background:var(--orange);transition:width .45s var(--ease-out)}
.psc-split-step{font-family:var(--fh);font-size:var(--t-micro);font-weight:var(--w-black);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}

/* The split shell's own top row — mark left, "Save and finish later" right —
   used where the shell replaces the focus wrapper's header bar entirely
   (onboarding, the brand brief) so the 50/50 grid runs full height instead
   of sitting under a separate bar. */
.psc-split-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s7)}
.psc-split-topline .psc-logo{margin-bottom:0}

/* The review screen widens the single form column rather than trying to fit
   a table of every answer into a 430px width meant for a few large fields. */
@media (min-width:1024px){
  .psc-split-in-wide{max-width:760px}
  /* The 46ch measure was set for a column half this wide. Beside a 760px
     field, a 420px line of intro text reads as a mistake rather than as
     care about line length. */
  .psc-split-in-wide .psc-split-p{max-width:58ch}
}

/* ---- The picture half ------------------------------------------------------ */
.psc-split-art{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow:hidden;background:var(--ink)}
.psc-split-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.62)}
/* Duotone in two flat layers, deliberately WITHOUT mix-blend-mode.
   The img carries a filter, and a filtered element forms an isolated group —
   so a blended sibling composites against this panel's own background rather
   than against the photograph, and the tint silently does nothing. Caught in
   the browser, not in the stylesheet. Plain opacity is duller to write and
   works everywhere.

   The z-index values matter and are not decoration: a positioned ::before is
   painted in TREE ORDER, which puts it underneath the img that follows it.
   Without them the tint sits behind the photograph and does nothing, while
   ::after (painted last) works — which is exactly how this hid through three
   attempts at "darker values". */
.psc-split-art::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.44;
}
.psc-split-art::after{
  content:"";position:absolute;inset:0;z-index:2;
  /* The warm cast sits LOW, behind the tagline, rather than across the face
     it used to land on. The ink ramp is only as dark as the text needs: the
     bottom was .92, which turned the shop into a silhouette. */
  background:radial-gradient(80% 45% at 22% 88%,rgba(217,98,14,.22),rgba(217,98,14,0) 70%),
             linear-gradient(180deg,rgba(13,25,38,.22) 0%,rgba(13,25,38,.38) 48%,rgba(13,25,38,.78) 100%);
}
/* A STRAIGHT EDGE, on the owner's call (9 September 2026). The torn clip-path
   that used to run down this seam read as damage rather than as craft, and it
   cost the photograph three per cent of its width to say so. */

/* THE TAGLINE, over the photograph. What used to sit here was a card headed
   "Your account" listing three product features — sold to people who already
   own the product and are trying to sign into it. One line instead, set big
   enough to be read as the promise it is. */
.psc-split-say{position:absolute;z-index:3;left:var(--s7);right:var(--s7);bottom:var(--s7);max-width:520px}
.psc-split-tag{margin:0;font-family:var(--fh);font-size:clamp(26px,2.6vw,38px);font-weight:var(--w-black);
  letter-spacing:-0.035em;line-height:1.12;color:#fff;text-wrap:balance;
  text-shadow:0 2px 24px rgba(8,16,26,.45)}
/* The second line in the brand's on-dark orange. --amber is #D9620E lifted
   for a dark ground — the mid orange reads as brown over a darkened
   photograph — and it is what every other accent on this panel uses. */
.psc-split-tag span{color:var(--amber)}
/* The overlaid card. The SIGN-IN screen no longer uses one — it carries the
   tagline instead — but Forgot password and Onboarding still do, and the
   box that positions it went with the sign-in card by accident. */
.psc-split-card{
  position:absolute;z-index:3;left:var(--s7);right:var(--s7);bottom:var(--s7);
  background:rgba(11,21,33,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:var(--s6);
  color:#E8EEF3;max-width:400px;
}
.psc-split-card-k{display:flex;align-items:center;gap:8px;font-family:var(--fh);font-size:var(--t-micro);font-weight:var(--w-black);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber);margin-bottom:var(--s3)}
.psc-split-card h2,.psc-split-card-h{font-family:var(--fh);font-size:20px;font-weight:var(--w-black);letter-spacing:-0.028em;line-height:1.2;color:#fff;margin:0}
.psc-split-card p{margin-top:var(--s2);font-size:var(--t-sm);line-height:1.55;color:#BCCAD6}
.psc-split-list{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s3);list-style:none;padding:0}
.psc-split-list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-sm);line-height:1.5;color:#D3DEE7}
.psc-split-list .psc-i{color:var(--amber);flex:none;margin-top:2px}
.psc-split-list b{display:block;font-family:var(--fh);font-weight:var(--w-bold);color:#fff;letter-spacing:-0.015em}

/* ---- Below 1024 the photograph is not shrunk, it is replaced ---------------
   A half-height stock photo on a phone is a scroll obstacle, not art
   direction. What survives is a slim ink band carrying the mark, so the
   screen still opens as PrimeStart rather than as a bare form.
   ------------------------------------------------------------------------------ */
@media (max-width:1023px){
  .psc-split{grid-template-columns:1fr;min-height:100dvh}
  .psc-split-art{display:none}
  .psc-split-form{padding:var(--s7) var(--s6) var(--s8);justify-content:flex-start}
  .psc-split-in{max-width:520px}
  .psc-split-form .psc-logo{margin-bottom:var(--s6)}
}
@media (max-width:640px){
  .psc-split-form{padding:var(--s6) var(--s5) var(--s8)}
  .psc-split-h{font-size:26px}
  .psc-split-p{font-size:15px}
  .psc-split-in{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .psc-split-bar span{transition:none}
}

/* ------------------------------------------------------------
   18. MOTION
   ------------------------------------------------------------ */
@keyframes pscRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.psc-rise{animation:pscRise .6s var(--ease) both}
.psc-rise-group > *{animation:pscRise .55s var(--ease) both}
.psc-rise-group > *:nth-child(1){animation-delay:.02s}
.psc-rise-group > *:nth-child(2){animation-delay:.08s}
.psc-rise-group > *:nth-child(3){animation-delay:.14s}
.psc-rise-group > *:nth-child(4){animation-delay:.2s}
.psc-rise-group > *:nth-child(5){animation-delay:.26s}
.psc-rise-group > *:nth-child(6){animation-delay:.32s}
.psc-rise-group > *:nth-child(n+7){animation-delay:.38s}

@media (prefers-reduced-motion:reduce){
  .psc *,.psc *::before,.psc *::after{animation:none!important;transition:none!important}
  .js .psc-journey:not(.is-in) .psc-j-step,.js .psc-journey-list:not(.is-in) .psc-jl-step{opacity:1;transform:none}
  .psc-journey::after{transform:scaleX(var(--psc-fill))!important}
  .js .psc-ring:not(.is-in) .psc-ring-fg{stroke-dashoffset:calc(326.7 - 326.7 * var(--psc-ring) / 100)}
  .psc-tick path{stroke-dashoffset:0!important}
}

/* ------------------------------------------------------------
   19. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1280px){
  :root{--pad:32px}
  .psc-quick{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
  .psc-grid-main{grid-template-columns:minmax(0,1fr) 300px}
  .psc-grid-preview{grid-template-columns:minmax(0,1fr) 320px}
  .psc-top-help span{display:none}
  .psc-top-help{padding:9px}

}
@media (max-width:1023px){
  :root{--top:64px;--pad:22px}
  .psc-app{grid-template-columns:1fr}
  .psc-side{display:none}
  .psc-logo-m{display:flex}
  .psc-top-ctx,.psc-top-where{display:none}
  .psc-menu-btn{display:grid}
  .psc-top{gap:12px;background:rgba(250,247,241,.96)}
  .psc-top-help{display:none}
  .psc-content{padding:24px var(--pad) 110px}
  .psc-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .psc-grid-main,.psc-grid-preview,.psc-grid-support{grid-template-columns:minmax(0,1fr)}
  .psc-facts{grid-template-columns:repeat(2,1fr)}

  /* mobile tab bar */
  /* One row whatever the tab count: a Website customer gets Home · Website ·
     Services · Messages · Help · More, a Growth customer swaps Growth in.
     A fixed repeat(5) wrapped the sixth item onto a second row. */
  .psc-tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(18,33,47,.35);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .psc-tabbar a,.psc-tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:10px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:-0.01em;color:var(--muted);transition:color .15s ease,background-color .15s ease}
  .psc-tabbar a[aria-current="page"]{color:var(--ink)}
  .psc-tabbar a[aria-current="page"] .psc-i{color:var(--orange)}
  .psc-tabbar a[aria-current="page"]::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--orange)}
  .psc-tabbar .psc-badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:10.5px}

  /* "+ New request" FAB — the mobile equivalent of the rail's pinned button.
     Opens the same drawer, rendered as a labelled action sheet on phones. */
  .psc-fab{
    display:flex;position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:70;
    width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff;
    align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(217,98,14,.55);
  }
  .psc-fab:active{background:var(--orange-dk)}

  /* menu sheet */
  .psc-sheet{display:block;position:fixed;inset:0;z-index:90}
  .psc-sheet[hidden]{display:none}
  .psc-sheet::before{content:"";position:absolute;inset:0;background:rgba(13,25,38,.45);animation:pscFade .2s ease both}
  .psc-sheet-in{position:absolute;left:0;right:0;bottom:0;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--white);border-radius:18px 18px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 50px -20px rgba(18,33,47,.5);animation:pscSheet .28s var(--ease-out) both}
  .psc-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 14px;border-bottom:1px solid var(--line-2)}
  .psc-sheet-x{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line)}
  .psc-sheet-nav{display:flex;flex-direction:column;padding:8px 0}
  .psc-sheet-nav a{display:flex;align-items:center;gap:14px;min-height:50px;padding:10px 6px;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);border-bottom:1px solid var(--line-2)}
  .psc-sheet-nav li:last-child a{border-bottom:0}
  .psc-sheet-nav a .psc-i:first-child{color:var(--orange)}
  .psc-sheet-nav a[aria-current="page"]{color:var(--orange-dk)}
  .psc-sheet-nav .psc-badge{margin-left:auto}
  .psc-sheet-chev{color:#C9C1B4;margin-left:auto}
  .psc-sheet-nav .psc-badge + .psc-sheet-chev{margin-left:8px}
  .psc-sheet-foot{padding-top:10px}
  .psc-sheet-foot .psc-btn{width:100%}
  @keyframes pscFade{from{opacity:0}to{opacity:1}}
  @keyframes pscSheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  body.psc.sheet-open{overflow:hidden}

  .psc-notif{position:fixed;top:calc(var(--top) + 8px);right:12px;left:12px;width:auto;max-width:none}

  /* journey rail → two rows of dots stays readable to 640; below that we switch to vertical */
  .psc-journey{gap:0 4px}
  .psc-j-label{font-size:11.5px}
  .psc-j-state{font-size:10.5px}
  .psc-hero{padding:26px 24px;grid-template-columns:1fr;gap:20px}
  .psc-hero-ring{width:120px;height:120px;justify-self:start}
  .psc-ring{width:120px;height:120px}
  .psc-ring-t strong{font-size:28px}
  .psc-preview-empty{grid-template-columns:1fr;padding:24px}
  .psc-upload-grid{grid-template-columns:1fr}
  /* redesign — status panel, strip, bento */
  .psc-bento{grid-template-columns:1fr}
  .psc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .psc-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .psc-strip-cell:nth-child(2){border-left:0}
  .psc-strip-cell:nth-child(odd){border-left:0}
  .psc-strip-cell:nth-child(3),.psc-strip-cell:nth-child(4){border-top:1px solid var(--hairline-soft)}
  .psc-status{padding:var(--s5)}
  .psc-status-preview{flex-direction:column;align-items:flex-start}
  .psc-status-preview .psc-thumb{width:100%}
}
@media (max-width:820px){
  .psc-grid-2{grid-template-columns:1fr}
  .psc-quick{grid-template-columns:repeat(2,1fr)}
  .psc-form-grid{grid-template-columns:1fr}
  .psc-ticks{grid-template-columns:1fr}
  .psc-timeline-full li{grid-template-columns:80px minmax(0,1fr)}
  .psc-next{grid-template-columns:auto minmax(0,1fr)}
  .psc-next-cta{grid-column:2}
  .psc-next-cta .psc-btn{width:100%}
  .psc-card{padding:22px 20px}
  .psc-card-sm{padding:18px 18px}
  .psc-plan-price{align-items:flex-start;text-align:left}
  .psc-plan-top{flex-direction:column}/* redesign components */

}
@media (max-width:640px){
  body.psc{font-size:15.5px}
  h1{font-size:26px}
  .psc-page{gap:16px}
  .psc-page-head-split{flex-direction:column;align-items:stretch;gap:14px}
  .psc-page-head-side .psc-btn{width:100%}
  .psc-hero{padding:22px 18px}
  .psc-hero::before{width:0;height:4px;right:0;top:0;bottom:auto}
  .psc-hero-t{font-size:24px}
  /* Buttons share a row while they genuinely fit, and a long label takes a
     row of its own rather than being squeezed until it clips. min-width:0
     let "Start your brand brief" shrink until its text touched both edges. */
  .psc-hero-actions .psc-btn{flex:1 1 auto;min-width:max-content}
  .psc-hero-ring{display:none}
  /* journey becomes vertical on phones */
  .psc-journey{grid-template-columns:1fr;gap:0;padding:0}
  .psc-journey::before,.psc-journey::after{left:16px;right:auto;top:8px;bottom:8px;width:2px;height:auto;transform-origin:50% 0}
  .psc-journey::after{transform:scaleY(0)}
  .psc-journey.is-in::after,html:not(.js) .psc-journey::after{transform:scaleY(var(--psc-fill))}
  .psc-j-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:2px 14px;align-items:center;text-align:left;padding:7px 0}
  .psc-j-dot{grid-row:1/3}
  .psc-j-label{margin:0;font-size:14px;grid-column:2}
  .psc-j-state{margin:0;font-size:12.5px;grid-column:3;text-align:right}
  .psc-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
  .psc-facts-inline{grid-template-columns:1fr 1fr}
  .psc-next{padding:18px 16px;gap:12px 14px}
  .psc-next-t{font-size:17.5px}
  .psc-quick{grid-template-columns:1fr 1fr;gap:10px}
  .psc-quick a{padding:14px 14px 12px}
  .psc-quick small{display:none}
  .psc-threads a{padding:14px 16px}
  .psc-thread-prev{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .psc-threads .psc-avatar{display:none}
  .psc-threads-compact a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"from time" "subj subj" "prev prev";gap:2px 10px}
  .psc-threads-compact .psc-thread-from{width:auto}
  .psc-threads-compact .psc-thread-prev{-webkit-line-clamp:1}
  .psc-convo li{max-width:96%}
  .psc-reply-row{flex-direction:column;align-items:stretch}
  .psc-reply-row .psc-btn{width:100%}
  .psc-cr-list a{flex-wrap:wrap;gap:8px 12px;padding:14px 2px}
  .psc-cr-main{flex-basis:calc(100% - 60px)}
  .psc-cr-main strong{white-space:normal}
  .psc-cr-list .psc-pill{margin-left:58px}
  .psc-cr-chev{display:none}
  .psc-docs li{padding:12px 16px;gap:12px}
  .psc-doc-i{width:38px;height:38px}
  .psc-doc-main small{white-space:normal}
  .psc-phone{width:220px}
  .psc-phone-screen iframe{transform:scale(calc(200 / 390));height:calc(100% * 390 / 200)}
  .psc-drop-lg .psc-drop-in{padding:28px 16px;min-height:0}
  .psc-form-actions .psc-btn{width:100%}
  .psc-approve-actions{flex-direction:column}
  .psc-approve-actions .psc-btn{width:100%}
  .psc-approve-statement{font-size:17px}
  .psc-check-lg{font-size:15.5px;padding:14px}
  .psc-approved{padding:32px 20px}
  .psc-approved .psc-facts-inline{grid-template-columns:1fr}
  .psc-btn-row .psc-btn{width:100%}
  .psc-auth-panel{padding:32px 18px}
  .psc-auth-card{padding:26px 22px 24px}
  .psc-choices{gap:8px}
  .psc-choice-chip span{padding:9px 14px;font-size:14px}
  .psc-preview-meta{font-size:12.5px}
  .psc-flash{padding:12px 12px}
  .psc-flash-x{display:none}
  .psc-empty{padding:30px 14px}
  .psc-invoices li a{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .psc-extras li{grid-template-columns:minmax(0,1fr) auto}
  .psc-extras time{grid-column:1/-1;margin-top:-6px}
  .psc-timeline-full li{grid-template-columns:70px minmax(0,1fr)}
  .psc-num{font-size:40px}
  /* redesign — status panel, stats, bento */
  .psc-display{font-size:26px}
  .psc-status-h{font-size:20px}
  .psc-status-p{font-size:14.5px}
  .psc-stat{padding:var(--s4)}
  .psc-stat-v{font-size:30px}
  .psc-stat-v.is-word{font-size:20px}
  .psc-track{gap:4px}
  .psc-track i{height:5px}
  /* redesign components */
  .psc-display{font-size:24px}

  .psc-page-head{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .psc-page-head-side{width:100%}
  .psc-page-head-side .psc-btn{flex:1 1 auto}
  .psc-subnav a{padding:12px 10px 11px;font-size:13px}
  .psc-track{gap:3px}
  .psc-track-cap{font-size:12.5px}
}
@media (max-width:1023px) and (min-width:641px){
  .psc-auth{grid-template-columns:1fr}
}
@media (max-width:640px){
  .psc-auth{grid-template-columns:1fr}
  /* The action row and the cluster inside it wrap at the SAME width. They
     did not, once, and everything between 431px and 640px overflowed. */
  .psc-act-row{flex-wrap:wrap}
}
@media (max-width:430px){
  :root{--pad:16px}
  .psc-content{padding-top:18px}
  .psc-word-sub{display:none}
  .psc-bell,.psc-menu-btn{width:40px;height:40px}
  .psc-hero-meta{gap:10px}
  .psc-j-label{font-size:13.5px}
  .psc-quick{grid-template-columns:1fr 1fr}
  .psc-tabbar a,.psc-tabbar button{font-size:10.5px}
  .psc-timeline li{grid-template-columns:48px minmax(0,1fr);gap:10px}
  .psc-timeline-full li{grid-template-columns:62px minmax(0,1fr)}
  .psc-facts-inline{grid-template-columns:1fr}
  .psc-thread-row time{display:none}
  .psc-attachments a span{max-width:150px}
  .psc-eyebrow{font-size:11px;letter-spacing:.12em}
  .psc-choice-stack .psc-choice{padding:12px}

  /* ---- Home, mobile: date line + greeting, list rows with a chevron,
     no cards for the to-do list, stacked one-column counter strip. ---- */
  .psc-date-line{font-size:12.5px}
  .psc-section-t{font-size:16px}
  .psc-status{padding:var(--s4)}
  .psc-status-h{font-size:19px}
  .psc-strip{grid-template-columns:1fr}
  .psc-strip-cell{border-left:0!important;border-top:1px solid var(--hairline-soft)}
  .psc-strip-cell:first-child{border-top:0}
  .psc-act-row{padding:var(--s3) var(--s4)}
  .psc-act-actions{flex:0 0 100%;width:auto;justify-content:flex-start;margin-left:0;padding:0 0 0 46px}
}
@media (max-width:360px){
  body.psc{font-size:15px}
  h1{font-size:23px}
  .psc-hero-t{font-size:21px}
  .psc-next-t{font-size:16.5px}
  .psc-next{grid-template-columns:1fr}
  .psc-next-i{display:none}
  .psc-next-cta{grid-column:1}
  .psc-card{padding:18px 16px;border-radius:12px}
  .psc-hero{padding:18px 14px}
  .psc-quick{grid-template-columns:1fr}
  .psc-word{font-size:19px}
  .psc-tabbar a span,.psc-tabbar button span{font-size:10px}
  .psc-j-state{display:none}
  .psc-phone{width:200px}
  .psc-phone-screen iframe{transform:scale(calc(180 / 390));height:calc(100% * 390 / 180)}
  .psc-choice-chip span{padding:9px 12px;font-size:13.5px}
  .psc-pill-lg{font-size:12.5px}
  .psc-approve-summary strong{font-size:19px}
}
@media (max-width:320px){
  .psc-tabbar{padding-left:2px;padding-right:2px}
  .psc-tabbar a span,.psc-tabbar button span{font-size:9.5px}
  .psc-hero-actions .psc-btn{width:100%;flex:none}
  .psc-hero-meta{flex-direction:column;align-items:flex-start;gap:6px}
}

/* print: keep it useful */

/* ==========================================================================
   PHASE 2 — Growth, services, orders, nudges
   Same tokens, same rhythm. Nothing here introduces a new colour.
   ========================================================================== */

/* ---- Navigation groups -------------------------------------------------- */
.psc-nav-group{margin-bottom:14px}
.psc-nav a.is-locked{color:var(--muted)}
.psc-nav a.is-locked .psc-i{opacity:.75}
.psc-nav-lock{margin-left:auto;display:inline-grid;place-items:center;color:var(--grey-dot)}
.psc-nav a[aria-current="page"].is-locked{color:var(--orange-dk)}
.psc-nav a[aria-current="page"] .psc-nav-lock{color:var(--orange)}

/* ---- Plan chips ---------------------------------------------------------- */
.psc-plan-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:100px;border:1px solid var(--line);background:var(--white);font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink-2);white-space:nowrap}
.psc-plan-chip.is-growth .psc-i{color:var(--amber)}
.psc-context-plan.is-growth,.psc-top-plan.is-growth{background:var(--ink);border-color:var(--ink);color:#fff}
.psc-context-plan.is-growth .psc-i{color:var(--amber)}
.psc-top-plan.is-growth{padding:3px 9px;border-radius:100px;font-weight:700;font-size:12.5px}
.psc-lock-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;background:var(--line-2);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:none;font-weight:700;vertical-align:middle;margin-left:6px}

/* ---- Sections on the home screen ---------------------------------------- */
.psc-section{margin-top:8px}
.psc-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.psc-section-head .psc-eyebrow{margin-bottom:6px}
.psc-section-head .psc-h2{font-size:clamp(20px,2vw,24px)}
.psc-grid-2-wide{grid-template-columns:1.25fr 1fr}/* ---- Locked feature cards (home) ----------------------------------------- */

.psc-locked{display:flex;flex-direction:column;gap:8px;padding:22px 22px 18px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.psc-locked::after{content:"";position:absolute;inset:auto -30% -55% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(240,160,60,.14),transparent 62%);pointer-events:none}
.psc-locked:hover{transform:translateY(-2px);border-color:#D9CFC0;box-shadow:var(--shadow-pop)}
.psc-locked-top{display:flex;align-items:center;justify-content:space-between}
.psc-locked-i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--wash);color:var(--orange)}
.psc-locked-lock{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line-2);color:var(--muted)}
.psc-locked strong{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.psc-locked small{font-size:14px;line-height:1.5;color:var(--muted)}
.psc-locked-k{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--orange-dk)}

/* ---- Locked feature page (example visual) -------------------------------- */
.psc-locked-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:stretch}
.psc-locked-example{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-hero);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.35))}
.psc-example-tag{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:100px;background:var(--ink);color:#fff;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;z-index:1}
.psc-ex-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.psc-ex-stat{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper)}
.psc-ex-stat span{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.psc-ex-stat strong{font-family:var(--fh);font-size:26px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);line-height:1}
.psc-ex-stat strong small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:2px}
.psc-ex-stat em{font-style:normal;font-family:var(--fh);font-size:12px;font-weight:700;color:var(--muted)}
.psc-ex-stat em.up{color:var(--ok-text)}
.psc-ex-bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:24px;padding:0 6px}
.psc-ex-bars i{flex:1;display:block;height:var(--psc-bar,20%);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#E9DFD0,#DDD1BF)}
.psc-ex-bars i.hot{background:linear-gradient(180deg,var(--amber),var(--orange))}
.psc-ex-rows{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.psc-ex-rows div{display:flex;align-items:center;gap:12px}
.psc-ex-rows b{width:22px;height:22px;border-radius:6px;background:var(--wash)}
.psc-ex-rows span{display:block;height:10px;border-radius:5px;background:var(--line-2)}
.psc-ex-rows span.w1{width:38%}.psc-ex-rows span.w2{width:56%}.psc-ex-rows span.w3{width:47%}
.psc-ex-rows em{margin-left:auto;font-style:normal;font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--muted)}
.psc-ex-rows em.up{color:var(--ok-text)}.psc-ex-rows em.new{color:var(--orange-dk)}
.psc-locked-side{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:6px 4px}
.psc-locked-side .psc-ticks{grid-template-columns:1fr}
.psc-locked-cta{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.psc-locked-cta small{font-size:13px;color:var(--muted)}
.psc-steps-3{flex-direction:row;gap:20px}
.psc-steps-3 > div{flex:1}

/* ---- Stat tiles ---------------------------------------------------------- */
.psc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.psc-stats-4{grid-template-columns:repeat(4,1fr)}
.psc-card-stats .psc-stats{margin-top:4px}
.psc-stat{display:flex;flex-direction:column;gap:8px;padding:18px 20px 16px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);min-width:0}
.psc-card .psc-stat{background:var(--paper);box-shadow:none;border-color:var(--line-2)}
.psc-stat-lg{padding:24px 24px 20px}
.psc-stat-k{font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.psc-stat-v{font-family:var(--fh);font-size:30px;font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.psc-stat-lg .psc-stat-v{font-size:38px}
.psc-stat-v small{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:2px}
.psc-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;padding:4px 9px 4px 7px;border-radius:100px;border:1px solid;align-self:flex-start;white-space:nowrap;font-style:normal}
.psc-delta em{font-style:normal;font-weight:600;color:inherit;opacity:.75}
.psc-delta.tone-live{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.psc-delta.tone-you{background:var(--err-bg);border-color:var(--err-line);color:var(--err-text)}
.psc-delta.tone-next{background:var(--white);border-color:var(--line);color:var(--muted)}
.psc-stat-note{display:flex;align-items:center;gap:8px;margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-text);font-size:14px;font-weight:500}

/* ---- Trend chart --------------------------------------------------------- */
.psc-trend{margin:6px 0 0}
.psc-trend-bars{display:flex;align-items:flex-end;gap:14px;height:190px;padding:0 4px}
.psc-trend-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;min-width:0}
.psc-trend-v{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.psc-trend-bar{display:block;width:100%;max-width:64px;height:var(--psc-bar,10%);border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#EADFCD,#DCCFBB);position:relative;overflow:hidden;transform-origin:bottom;animation:pscBar .8s var(--ease-out) both}
.psc-trend-bar i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent)}
.psc-trend-col.is-active .psc-trend-bar{background:linear-gradient(180deg,var(--amber),var(--orange))}
.psc-trend-col.is-active .psc-trend-v{color:var(--orange-dk)}
.psc-trend-col.is-empty .psc-trend-bar{background:repeating-linear-gradient(135deg,var(--line-2) 0 6px,transparent 6px 12px)}
.psc-trend-l{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.psc-trend-col:nth-child(2) .psc-trend-bar{animation-delay:.06s}.psc-trend-col:nth-child(3) .psc-trend-bar{animation-delay:.12s}.psc-trend-col:nth-child(4) .psc-trend-bar{animation-delay:.18s}.psc-trend-col:nth-child(5) .psc-trend-bar{animation-delay:.24s}.psc-trend-col:nth-child(6) .psc-trend-bar{animation-delay:.3s}
@keyframes pscBar{from{transform:scaleY(.08);opacity:.5}to{transform:scaleY(1);opacity:1}}

/* ---- Work list ----------------------------------------------------------- */
.psc-work{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.psc-work li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;align-items:start;padding:12px 0;border-top:1px solid var(--line-2)}
.psc-work li:first-child{border-top:0;padding-top:2px}
.psc-work-i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-top:1px}
.psc-work-completed .psc-work-i{background:var(--ok-bg);color:var(--ok-dot);border:1px solid var(--ok-line)}
.psc-work-upcoming .psc-work-i{background:var(--wash);color:var(--orange);border:1px solid var(--warn-line)}
.psc-work-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.psc-work-t strong{font-size:15px;font-weight:600;letter-spacing:-0.015em;color:var(--ink)}
.psc-work-t small{font-size:13.5px;line-height:1.5;color:var(--muted)}
.psc-work-kw{display:inline-flex;align-items:center;gap:5px;margin-top:3px}
.psc-work-kw a{color:inherit;border-bottom:1px solid var(--line);text-decoration:none}
.psc-work-kw a:hover{color:var(--ink)}
.psc-work-m{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.psc-work-m em{font-style:normal;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.psc-work-m time{font-size:12.5px;color:var(--muted)}

/* ---- Keyword table ------------------------------------------------------- */
.psc-kw-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;min-width:0;max-width:calc(100% + 8px)}
.psc-page > *,.psc-card{min-width:0}
.psc-kw{width:100%;border-collapse:collapse;min-width:520px}
.psc-kw-compact{min-width:420px}
.psc-kw th{text-align:left;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px 12px;border-bottom:1px solid var(--line)}
.psc-kw td{padding:13px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.psc-kw tbody tr:last-child td{border-bottom:0}
.psc-kw-term strong{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;letter-spacing:-0.015em;color:var(--ink);text-transform:capitalize}
.psc-kw-term small{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.psc-kw-star{display:inline-grid;place-items:center;color:var(--amber)}
.psc-kw-pos,.psc-kw-move,.psc-kw-trend{white-space:nowrap}
.psc-kw-n{display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 10px;border-radius:9px;font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--paper);border:1px solid var(--line)}
.psc-kw-n.band-top3{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.psc-kw-n.band-page1{background:var(--wash);border-color:var(--warn-line);color:var(--orange-dk)}
.psc-kw-pos small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.psc-kw-none{font-size:13px;color:var(--muted)}
.psc-move{display:inline-flex;align-items:center;gap:5px;font-family:var(--fh);font-size:13px;font-weight:700;padding:5px 9px 5px 7px;border-radius:100px;border:1px solid}
.psc-move.up{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.psc-move.down{background:var(--err-bg);border-color:var(--err-line);color:var(--err-text)}
.psc-move.new{background:var(--wash);border-color:var(--warn-line);color:var(--orange-dk)}
.psc-move.flat{border-color:transparent;color:var(--grey-dot)}
.psc-spark{display:block;color:var(--grey-dot)}
.psc-spark.is-up{color:var(--ok-dot)}
.psc-spark-empty{width:96px;height:28px}
.psc-period-form .psc-select-sm{padding:9px 36px 9px 12px;font-size:14px;min-width:190px}

/* ---- Opportunity card ---------------------------------------------------- */
.psc-card-opp{border-color:#EAD9C2;background:linear-gradient(180deg,#FFFDF9,var(--white))}
.psc-opp-why{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.psc-opp-rec{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 18px;padding:14px 16px;border-radius:10px;background:var(--wash);border:1px solid var(--warn-line)}
.psc-opp-rec strong{display:block;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-dk);margin-bottom:4px}/* ---- Report cards & list ------------------------------------------------- */

.psc-report-i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--amber)}
.psc-report-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.psc-report-t strong{font-family:var(--fh);font-size:19px;font-weight:700;letter-spacing:-0.028em;color:var(--ink)}
.psc-report-t small{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psc-report-go{grid-column:2;display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:13.5px;font-weight:700;color:var(--orange-dk)}
.psc-card-site .psc-btn-row{margin-top:14px;align-items:center;gap:16px}
.psc-reports{display:flex;flex-direction:column;gap:12px}
.psc-report{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:20px 22px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.psc-report:hover{transform:translateY(-2px);border-color:#D9CFC0;box-shadow:var(--shadow-pop)}
.psc-report.is-latest{border-color:#EAD9C2;background:linear-gradient(180deg,#FFFDF9,var(--white))}
.psc-report-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:14px;background:var(--ink);color:#fff}
.psc-report-date strong{font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1;text-transform:uppercase}
.psc-report-date small{font-size:11.5px;font-weight:700;color:var(--amber);margin-top:3px}
.psc-report-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.psc-report-h{font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.psc-latest-tag{display:inline-block;padding:3px 8px;border-radius:100px;background:var(--wash);border:1px solid var(--warn-line);color:var(--orange-dk);font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-style:normal}
.psc-report-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.psc-report-hl li{font-size:14px;color:var(--muted);padding-left:14px;position:relative}
.psc-report-hl li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--orange)}
.psc-report-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.psc-report-vis{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.psc-report-vis small{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.psc-report-vis strong{font-family:var(--fh);font-size:26px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--ink)}
.psc-report-work{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ok-text)}
.psc-report-chev{color:var(--grey-dot)}
.psc-report-nav{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Report page --------------------------------------------------------- */
.psc-glance{background:var(--ink);color:#fff;border-radius:16px;padding:28px 32px;box-shadow:var(--shadow-hero);position:relative;overflow:hidden}
.psc-glance::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(240,160,60,.22),transparent 60%);pointer-events:none}
.psc-glance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px;position:relative}
.psc-glance .psc-k{color:rgba(255,255,255,.62);margin-bottom:0;padding-top:6px}
.psc-glance-vis{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.psc-glance-vis small{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.psc-glance-vis strong{font-family:var(--fh);font-size:44px;font-weight:800;letter-spacing:-0.05em;line-height:1;color:#fff}
.psc-glance-vis strong span{font-size:18px;color:rgba(255,255,255,.55);letter-spacing:0}
.psc-glance-vis .psc-delta.tone-live{background:rgba(76,195,138,.16);border-color:rgba(76,195,138,.4);color:#BFF0D6}
.psc-glance-vis .psc-delta.tone-you{background:rgba(255,120,110,.14);border-color:rgba(255,120,110,.4);color:#FFC9C4}
.psc-glance-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;position:relative}
.psc-glance-list li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.45;font-weight:500}
.psc-glance-list .psc-i{flex:none;margin-top:3px;color:var(--amber)}
.psc-card-narrative{border-left:4px solid var(--orange)}
.psc-narrative p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 12px}
.psc-narrative p:last-child{margin-bottom:0}
.psc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:0}
.psc-metrics > div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.psc-metrics dt{font-size:15px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.psc-metrics dt small{font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.4}
.psc-metrics dd{margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap}
.psc-metrics dd strong{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-0.035em;font-variant-numeric:tabular-nums}

/* ---- Recommendations ----------------------------------------------------- */
.psc-recs{display:flex;flex-direction:column;gap:16px}
.psc-rec{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:var(--shadow-card)}
.psc-rec.is-featured{border-color:#EAD9C2;background:linear-gradient(180deg,#FFFDF9,var(--white));box-shadow:var(--shadow-hero)}
.psc-rec-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:start;margin-bottom:14px}
.psc-rec-i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--wash);color:var(--orange)}
.psc-rec-meta .psc-k{margin-bottom:4px}
.psc-rec-pills{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap}
.psc-page-head .psc-rec-pills{margin-top:14px}
.psc-rec-kw{display:inline-flex;align-items:center;gap:7px;margin:0 0 16px;padding:8px 12px;border-radius:9px;background:var(--paper);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.psc-rec-kw strong{text-transform:capitalize}
.psc-rec-body{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.psc-rec-body p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}
.psc-rec-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.psc-rec-price{margin-left:auto}
.psc-rec-history{list-style:none;margin:0;padding:0}
.psc-rec-history li a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line-2);color:inherit;text-decoration:none}
.psc-rec-history li:first-child a{border-top:0}
.psc-rec-hi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--paper);color:var(--muted)}
.psc-rec-ht{display:flex;flex-direction:column;gap:2px;min-width:0}
.psc-rec-ht strong{font-size:15px;font-weight:600}
.psc-rec-ht small{font-size:12.5px;color:var(--muted)}
.psc-rec-block + .psc-rec-block{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}
.psc-rec-block .psc-h3{margin-bottom:8px}
.psc-rec-block p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 10px}
.psc-rec-target p{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;color:var(--ink)}
.psc-rec-target strong{text-transform:capitalize}

/* ---- Nudge --------------------------------------------------------------- */
.psc-nudge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 18px;align-items:center;padding:18px 22px;border-radius:14px;border:1px solid var(--line);background:var(--white)}
.psc-nudge.tone-advice{background:linear-gradient(90deg,#FFFDF9,var(--white));border-color:#EAD9C2}
.psc-nudge.tone-growth{background:var(--ink);border-color:var(--ink);color:#fff}
.psc-nudge-i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--wash);color:var(--orange)}
.tone-growth .psc-nudge-i{background:rgba(255,255,255,.08);color:var(--amber)}
.psc-nudge-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.psc-nudge-k{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk)}
.tone-growth .psc-nudge-k{color:var(--amber)}
.psc-nudge-t{font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.tone-growth .psc-nudge-t{color:#fff}
.psc-nudge-body p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.tone-growth .psc-nudge-body p{color:rgba(255,255,255,.72)}
.psc-nudge-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.tone-growth .psc-btn-ink{background:var(--orange);box-shadow:none}
.psc-nudge-quiet .psc-link-btn{font-size:12.5px;color:var(--muted)}
.tone-growth .psc-nudge-quiet .psc-link-btn{color:rgba(255,255,255,.6)}

/* ---- Services ------------------------------------------------------------ */
/* The Services upgrade panel. A bordered panel like every other panel,
   not a dark gradient card: the restraint is the point of the reference. */
.psc-upgrade-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline-soft)}
.psc-upgrade-price{display:flex;flex-direction:column;gap:2px}
.psc-upgrade-price strong{font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.psc-upgrade-price small{font-size:var(--t-xs);color:var(--muted)}
.psc-upgrade .psc-ticks{margin-top:var(--s4)}
/* The worked example on a page-service row, where the explainer trio used
   to say the same thing a second time above the same three rows. */
.psc-svc-eg{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--muted);font-style:italic}
.psc-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.psc-svc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr auto;grid-template-areas:"icon text chev" "price price price";gap:var(--s4) var(--s4);align-items:start;padding:18px 20px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.psc-svc:hover{transform:translateY(-2px);border-color:#D9CFC0;box-shadow:var(--shadow-pop)}
.psc-svc.is-later{opacity:.72}
.psc-svc-growth{border-color:#EAD9C2;background:linear-gradient(180deg,#FFFDF9,var(--white))}
.psc-svc-i{grid-area:icon;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--wash);color:var(--orange);flex:none}
/* The compact variant was REMOVED on 9 September 2026 with the $small flag it
   depended on: nothing had passed it since the dashboard stopped rendering
   service cards, so it was a layout kept alive for no caller. Anyone adding a
   compact card should design it against the card as it is now, rather than
   inherit a guess made when the card looked different. */
.psc-svc-t{grid-area:text;display:flex;flex-direction:column;gap:3px;min-width:0}
.psc-svc-t strong{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink)}
.psc-svc-t small{font-size:13.5px;line-height:1.45;color:var(--muted)}
.psc-svc-p{grid-area:price;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding-top:var(--s4);border-top:1px solid var(--hairline-soft)}
.psc-svc-p em{font-style:normal;font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.psc-svc-p small{font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.psc-svc-chev{grid-area:chev;align-self:center;color:var(--grey-dot);flex:none}
.psc-price-chip{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:12px 16px;border-radius:12px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.psc-price-chip strong{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-0.035em;color:var(--ink);line-height:1}
.psc-price-chip small{font-size:12px;color:var(--muted);text-align:right;max-width:220px;line-height:1.35}
.psc-svc-desc p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 12px}
.psc-svc-desc p:last-child{margin-bottom:0}
.psc-card .psc-ticks{margin-top:10px}
.psc-svc-inline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin-bottom:18px}
.psc-svc-inline strong{display:block;font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:-0.025em;margin-bottom:4px}
.psc-svc-inline .psc-muted{margin:0 0 6px}
.psc-svc-price{margin:0;font-size:14px}
.psc-svc-price em{font-style:normal;font-family:var(--fh);font-weight:800;font-size:16px;color:var(--ink)}
.psc-card-svc-inline .psc-btn-row{align-items:center}
.psc-card-svc-inline form{display:inline}

/* ---- Orders -------------------------------------------------------------- */
.psc-order-review .psc-facts-stack{margin-bottom:20px}
.psc-order-honest{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:16px 18px;border-radius:12px;background:var(--slate-bg);border:1px solid var(--slate-line);margin-bottom:22px}
.psc-order-honest .psc-i{color:var(--slate-text);margin-top:2px}
.psc-order-honest strong{display:block;font-family:var(--fh);font-size:14px;font-weight:700;margin-bottom:4px;color:var(--ink)}
.psc-order-honest p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.psc-order-form .psc-card-head{margin-bottom:12px}
.psc-orders{list-style:none;margin:0;padding:0}
.psc-orders li a{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line-2);color:inherit;text-decoration:none}
.psc-orders li:first-child a{border-top:0}
.psc-card-flush .psc-orders li a{padding:14px 28px}
.psc-orders li.is-closed a{opacity:.8}
.psc-order-i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--wash);color:var(--orange)}
.psc-orders li.is-closed .psc-order-i{background:var(--ok-bg);color:var(--ok-dot)}
.psc-order-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.psc-order-main strong{font-size:15.5px;font-weight:600;letter-spacing:-0.015em;color:var(--ink)}
.psc-order-main small{font-size:12.5px;color:var(--muted)}
.psc-order-chev{color:var(--grey-dot)}
.psc-card-steps{padding-bottom:22px}
.psc-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:step}
.psc-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);min-width:0}
.psc-steps li.is-complete{background:var(--ok-bg);border-color:var(--ok-line)}
.psc-steps li.is-active{background:var(--wash);border-color:var(--warn-line)}
.psc-step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--white);border:1px solid var(--line);font-family:var(--fh);font-size:12.5px;font-weight:800;color:var(--muted);flex:none}
.is-complete .psc-step-n{background:var(--ok-dot);border-color:var(--ok-dot);color:#fff}
.is-active .psc-step-n{background:var(--orange);border-color:var(--orange);color:#fff}
.psc-step-l{font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.015em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-complete .psc-step-l{color:var(--ok-text)}
.is-active .psc-step-l{color:var(--orange-dk)}
.psc-card-steps .psc-next{margin-top:4px}

/* ---- Billing page -------------------------------------------------------- */
.psc-plan-card.is-growth{border-color:#EAD9C2}
.psc-growth-active{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 11px;border-radius:100px;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-text);font-family:var(--fh);font-size:12.5px;font-weight:700}
.psc-plan-after{margin-top:22px;padding:18px 20px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2)}
.psc-plan-after p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.psc-plan-upgrade{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);padding:var(--s5);border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--surface-sunken)}
.psc-plan-upgrade strong{display:block;font-family:var(--fh);font-size:16px;font-weight:var(--w-bold);letter-spacing:-0.02em;color:var(--ink);margin-bottom:4px}
.psc-plan-upgrade .psc-muted{margin:0;max-width:52ch}
.psc-plan-help{margin-top:var(--s5)}

/* ==========================================================================
   Phase 4 — add-on commerce: marketplace categories, page types, Growth
   member pricing, order price breakdown, six-step timeline, approval
   ========================================================================== */
.psc-member-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:100px;background:var(--wash);border:1px solid var(--warn-line);color:var(--orange-dk);font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.psc-member-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;border-radius:12px;background:var(--white);border:1px solid var(--warn-line);box-shadow:var(--shadow-card)}
.psc-member-strip p{margin:0;font-size:14px;color:var(--ink-2)}
.psc-cat-head{align-items:flex-start}
.psc-cat-intro{margin:4px 0 0;font-size:14.5px;max-width:60ch}
.psc-svc-delivery{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:var(--muted)}
.psc-svc-was{font-size:12px;color:var(--muted);text-decoration:line-through}
.psc-svc-member{color:var(--orange-dk)!important;font-weight:600}
.psc-svc.has-member{border-color:var(--warn-line)}
.psc-svc.has-member .psc-svc-p em{color:var(--orange-dk)}
.psc-price-chip-member{border-color:var(--warn-line);align-items:flex-end;gap:6px}
.psc-price-chip-member s{color:var(--muted)}
.psc-svc-for{margin:0 0 16px;padding:12px 16px;border-radius:10px;background:var(--paper);border:1px solid var(--line-2);font-size:14px;line-height:1.55;color:var(--ink-2)}
.psc-svc-for .psc-k{display:block;margin-bottom:4px}
.psc-svc-for em{display:block;font-style:normal;font-size:13px;margin-top:2px}
.psc-nudge-member{margin-top:16px}
.psc-order-total{margin:0 0 18px;padding:14px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2)}
.psc-order-total-side{margin:0}
.psc-order-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;font-size:14px}
.psc-order-line + .psc-order-line{border-top:1px solid var(--line-2)}
.psc-order-line-discount{color:var(--ok-text);font-weight:600}
.psc-order-line-total{font-size:15px}
.psc-order-line-total strong{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.psc-order-line-total small{font-weight:400;font-size:12.5px;margin-left:6px}
.psc-order-saving{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--orange-dk);font-weight:600}
.psc-order-preview{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;counter-reset:pv}
.psc-order-preview li{padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--white);min-width:0;counter-increment:pv}
.psc-order-preview li strong{display:block;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:-0.01em;color:var(--ink);margin-bottom:3px}
.psc-order-preview li strong::before{content:counter(pv) ". ";color:var(--orange-dk)}
.psc-order-preview li span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
.psc-steps-6{grid-template-columns:repeat(6,1fr)}
.psc-steps-6 li{padding:10px 10px}
.psc-step-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.psc-steps-6 .psc-step-l{white-space:normal;font-size:12.5px;line-height:1.25}
.psc-step-t{font-family:var(--fb);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
.psc-next-action{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;grid-column:1 / -1;width:100%;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-2)}
.psc-next-action .psc-help{margin:0}
.psc-next-compact{flex-wrap:wrap}

/* ==========================================================================
   Staff read-only preview bar + branded error page
   ========================================================================== */
.psc-staff-bar{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 22px;background:var(--ink);color:#fff;font-size:13px}
.psc-staff-bar-tag{display:inline-block;padding:3px 9px;border-radius:100px;background:var(--amber);color:var(--ink);font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;flex:none}
.psc-staff-bar-text{color:rgba(255,255,255,.82);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psc-staff-bar-link{margin-left:auto;color:#fff;font-family:var(--fh);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.psc-staff-view{--staff:44px}
.psc-staff-view .psc-side{top:var(--staff);height:calc(100vh - var(--staff))}
.psc-staff-view .psc-top{top:var(--staff)}
/* In the read-only preview every submit control is visibly disabled. */
.psc-staff-view .psc-form button[type="submit"],.psc-staff-view form .psc-btn-primary{opacity:.55;pointer-events:none}

.psc-error-page{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--paper)}
.psc-error-in{width:100%;max-width:560px}
.psc-error-in .psc-logo{margin-bottom:26px;padding:0}
.psc-error-card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:34px;text-align:left}
.psc-error-i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--wash);border:1px solid var(--warn-line);color:var(--orange-dk);margin-bottom:18px}
.psc-error-card h1{font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);margin:0 0 10px}
.psc-error-card p{margin:0 0 8px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.psc-error-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.psc-error-help{margin-top:16px!important;padding-top:14px;border-top:1px solid var(--line-2)}

/* ---- Overview: single Growth discovery card + billing alert -------------- */
.psc-billing-alert{border-color:var(--err-line);background:var(--err-bg)}
.psc-billing-alert .psc-next-i{color:var(--err-text)}
/* ---- Touch targets -------------------------------------------------------
   Standalone links and small buttons are comfortable to click with a mouse
   but are only 20–25px tall — too small for a thumb. On touch pointers they
   grow to a 44px tap area using padding and a compensating negative margin,
   so the visual rhythm of the page is unchanged. Prose links are left alone:
   they sit inside a line of text and enlarging them would break it. */
@media (pointer:coarse){
  .psc-card-head .psc-link,
  .psc-btn-row .psc-link,
  .psc-card > .psc-link,
  dd > .psc-link,
  .psc-doc-name,
  .psc-nudge-quiet .psc-link-btn,
  .psc-foot a{
    display:inline-flex;align-items:center;min-height:44px;
    padding-block:10px;margin-block:-10px;
  }
  .psc-card-head{row-gap:0}
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1180px){
  .psc-stats,.psc-stats-4{grid-template-columns:repeat(2,1fr)}
  .psc-grid-2-wide{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .psc-locked-grid{grid-template-columns:1fr 1fr}
  .psc-locked-hero{grid-template-columns:1fr}
  .psc-svc-grid{grid-template-columns:1fr}
  .psc-metrics{grid-template-columns:1fr}
  .psc-glance-list{grid-template-columns:1fr}
  .psc-rec-body{grid-template-columns:1fr}
  .psc-steps{grid-template-columns:repeat(2,1fr)}
  .psc-steps-6{grid-template-columns:repeat(3,1fr)}
  .psc-order-preview{grid-template-columns:repeat(2,1fr)}
  .psc-staff-view{--staff:64px}
  .psc-staff-bar{flex-wrap:wrap;padding:6px 16px}
  .psc-staff-bar-text{white-space:normal;flex:1 1 100%}
}
@media (max-width:820px){
  .psc-nudge{grid-template-columns:auto minmax(0,1fr)}
  .psc-nudge-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 14px;white-space:normal}
  .psc-nudge-actions .psc-btn{white-space:normal;text-align:left}
  .psc-report{grid-template-columns:auto minmax(0,1fr) auto}
  .psc-report-side{display:none}
  .psc-ex-stats{grid-template-columns:repeat(2,1fr)}
  .psc-steps-3{flex-direction:column;gap:8px}
  .psc-page-head-side .psc-price-chip{align-items:flex-start}
  .psc-price-chip small{text-align:left}
}
@media (max-width:640px){
  .psc-stats,.psc-stats-4{grid-template-columns:1fr 1fr;gap:10px}
  .psc-stat{padding:14px 14px 12px}
  .psc-stat-v{font-size:26px}
  .psc-stat-lg .psc-stat-v{font-size:30px}
  .psc-delta em{display:none}
  .psc-trend-bars{height:150px;gap:8px}
  .psc-trend-v{font-size:11.5px}
  .psc-glance{padding:22px}
  .psc-glance-vis{align-items:flex-start;text-align:left}
  .psc-glance-head{flex-direction:column-reverse}
  .psc-glance-vis strong{font-size:38px}
  .psc-report{padding:16px}
  .psc-report-date{width:54px;height:54px}
  .psc-rec{padding:20px}
  .psc-rec-actions .psc-rec-price{margin-left:0;width:100%}
  .psc-svc{grid-template-columns:auto minmax(0,1fr) auto}
  .psc-svc-p small{display:none}
  .psc-svc-chev{display:none}
  .psc-svc-delivery{display:none}
  .psc-order-preview{grid-template-columns:1fr}
  .psc-error-card{padding:24px}
  .psc-steps{grid-template-columns:1fr 1fr;gap:6px}
  .psc-steps-6{grid-template-columns:1fr 1fr}
  .psc-step-l{font-size:12.5px}
  .psc-work li{grid-template-columns:auto minmax(0,1fr)}
  .psc-work-m{grid-column:2;flex-direction:row;align-items:center;gap:10px}
  .psc-orders li a{grid-template-columns:auto minmax(0,1fr) auto}
  .psc-order-chev{display:none}
  .psc-card-flush .psc-orders li a{padding:14px 18px}
  .psc-plan-upgrade .psc-btn{width:100%}
  .psc-period-form .psc-select-sm{min-width:0;width:100%}
}
@media (max-width:430px){
  .psc-stats,.psc-stats-4{grid-template-columns:1fr 1fr}
  .psc-stat-v{font-size:24px}
  .psc-ex-stats{grid-template-columns:1fr 1fr;gap:8px}
  .psc-ex-stat strong{font-size:20px}
  .psc-kw{min-width:460px}
  .psc-steps{grid-template-columns:1fr}
  .psc-rec-head{grid-template-columns:1fr}
  .psc-rec-i{display:none}
}
@media (max-width:360px){
  .psc-stats,.psc-stats-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .psc-trend-bar{animation:none}
}

@media print{
  .psc-side,.psc-top,.psc-tabbar,.psc-sheet,.psc-foot,.psc-btn,.psc-reply{display:none!important}
  .psc-app{display:block}
  .psc-content{max-width:none;padding:0}
  .psc-card{box-shadow:none;break-inside:avoid}
}

/* ==========================================================================
   Phase 3 — action centre, onboarding, website health, connections
   ========================================================================== */

/* ---- Action centre ------------------------------------------------------- */
.psc-tasks{padding:0}
.psc-tasks .psc-card-head{padding:18px 22px 0}

/* ------------------------------------------------------------
   ONBOARDING AND THE BRAND BRIEF
   ------------------------------------------------------------
   The longest thing PrimeStart asks of a customer, so it gets a
   screen of its own: no rail, no bell, nothing to click except
   the question in front of them and the way back out.

   Four screens — intro, step, review, done — sharing one layout.
   ------------------------------------------------------------ */

/* ---- The focus shell ------------------------------------------------------ */
body.psc-focus{background:var(--paper)}
.psc-focus-top{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  height:var(--top);padding:0 var(--pad);
  background:rgba(250,247,241,.92);-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--hairline);
}
.psc-focus-exit{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-size:var(--t-xs);font-weight:600;color:var(--muted);padding:8px 11px;border-radius:var(--r-sm);transition:background-color var(--dur-1) ease,color var(--dur-1) ease}
.psc-focus-exit:hover{background:var(--surface);color:var(--ink)}
.psc-focus-main{width:100%;max-width:1120px;margin:0 auto;padding:var(--s8) var(--pad) var(--s10)}
.psc-focus-main:focus{outline:none}
.psc-focus-flashwrap{margin-bottom:var(--s6)}

/* ---- Shared bits reused across the split-shell screens (intro, step,
   review, done — see templates/portal/onboarding.php) -----------------------
   ------------------------------------------------------------------------------ */
.psc-onb-promises{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6);list-style:none;padding:0}
.psc-onb-promises li{display:flex;align-items:flex-start;gap:11px;font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}
.psc-onb-promises .psc-i{color:var(--orange);flex:none;margin-top:2px}
.psc-onb-intro-note{margin-top:var(--s5);padding:var(--s4);border-radius:var(--r-md);background:var(--wash);border:1px solid var(--warn-line);font-size:var(--t-sm);line-height:1.55;color:var(--warn-text);max-width:52ch}

.psc-onb-saved{display:flex;align-items:center;gap:7px;font-size:var(--t-xs);color:var(--ok-text);padding-top:var(--s4);border-top:1px solid var(--hairline-soft)}
.psc-onb-saved .psc-i{color:var(--ok-dot)}
.psc-onb-saved.is-dirty{color:var(--warn-text)}
.psc-onb-saved.is-dirty .psc-i{color:var(--amber)}

/* ---- A step ----------------------------------------------------------------- */
.psc-onb-head{margin-bottom:var(--s7)}

.psc-onb-fields{display:flex;flex-direction:column;gap:var(--s7)}
.psc-onb-form .psc-field{max-width:none}
.psc-onb-form .psc-label{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);margin-bottom:0;line-height:1.35}
.psc-onb-form .psc-label em{font-style:normal;font-weight:500;font-size:14px;color:var(--muted);margin-left:6px}
/* The helper sits under the question and above the box, where it is read in
   the order it is needed rather than after the answer has been typed. */
.psc-onb-form .psc-help-top{margin:var(--s2) 0 var(--s3);font-size:var(--t-sm);line-height:1.5;color:var(--muted);max-width:56ch}
.psc-onb-form .psc-help{margin-top:var(--s2)}
.psc-onb-form .psc-input{font-size:16px;padding:14px 16px}
.psc-onb-form textarea.psc-input{min-height:120px}

/* A question that only matters given an earlier answer. Hidden by script, so
   with JavaScript off every question is simply visible — nobody is ever locked
   out of a question by a file that did not load. */
.psc-field-when[hidden],.psc-field-upload[hidden]{display:none}
.psc-field-when{animation:pscReveal .28s var(--ease-out) both}
@keyframes pscReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.psc-onb-actions{
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--hairline);
}
.psc-onb-actions .psc-btn-primary{margin-left:auto}

/* ---- Review ------------------------------------------------------------------- */
.psc-review-block + .psc-review-block{margin-top:var(--s4)}
.psc-review-list{display:flex;flex-direction:column}
.psc-review-list > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--hairline-soft)}
.psc-review-list > div:first-child{padding-top:0}
.psc-review-list > div:last-child{border-bottom:0;padding-bottom:0}
.psc-review-list dt{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.psc-review-list dd{font-size:var(--t-sm);color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
.psc-review-list > div.is-missing dt{color:var(--warn-text);font-weight:600}

.psc-onb-send{margin-top:var(--s6);border-color:var(--hairline);background:var(--surface)}
.psc-onb-send h2{margin-bottom:var(--s2)}
.psc-onb-send-form{margin-top:var(--s5)}
.psc-onb-send-note{margin-top:var(--s3);text-align:center}
.psc-onb-gaps{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.psc-onb-gaps li{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;font-size:var(--t-sm)}

/* ---- The finish ---------------------------------------------------------------
   NO TURNAROUND TIMES anywhere on this screen. The only delivery commitments
   PrimeStart has made live in the service definitions; a date promised on a
   success screen is a date somebody will hold us to.
   ---------------------------------------------------------------------------------- */
.psc-onb-done{text-align:center;max-width:620px;margin:0 auto;padding-top:var(--s6)}
.psc-onb-done-i{
  width:66px;height:66px;margin:0 auto var(--s5);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--amber);box-shadow:var(--shadow-ink);
  animation:pscPopIn .5s var(--ease-out) both;
}
.psc-onb-done-h{font-family:var(--fh);font-size:clamp(27px,3vw,36px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;color:var(--ink);margin:var(--s2) 0 0}
.psc-onb-done-p{margin-top:var(--s3);font-size:17px;line-height:1.6;color:var(--ink-2)}
.psc-onb-done .psc-btn-row{justify-content:center;margin-top:var(--s6)}
.psc-onb-done-next{margin:var(--s8) auto 0;max-width:460px;text-align:left;padding:var(--s6);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card)}
.psc-onb-done-next ol{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.psc-onb-done-next li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm);line-height:1.55;color:var(--ink-2)}
.psc-onb-done-next li span{
  flex:0 0 23px;width:23px;height:23px;border-radius:50%;background:var(--wash);border:1px solid var(--warn-line);
  color:var(--orange-dk);font-family:var(--fh);font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
}
/* Optional is visibly a lesser thing, and ruled off from the finished message. */
.psc-onb-optional{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--hairline);text-align:left}
.psc-onb-done-foot{margin-top:var(--s6)}

/* ---- Inline upload ------------------------------------------------------------
   The upload lives where the question is. Sending somebody to Documents to
   answer "have you got a logo?" is how an answer of "yes" ends up meaning
   nothing ever arrived.
   ---------------------------------------------------------------------------------- */
.psc-upl{margin-top:var(--s4);padding:var(--s5);border:1px dashed var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.psc-upl-h{display:flex;align-items:center;gap:9px;font-family:var(--fh);font-size:var(--t-sm);font-weight:700;letter-spacing:-0.018em;color:var(--ink)}
.psc-upl-h .psc-i{color:var(--orange)}
.psc-upl-help{margin-top:var(--s2);font-size:var(--t-xs);line-height:1.5;color:var(--muted);max-width:56ch}
.psc-upl-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.psc-upl-file{position:relative;overflow:hidden;display:inline-flex}
.psc-upl-file input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.psc-upl-note{font-size:var(--t-xs);color:var(--muted)}
.psc-upl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s3);margin-top:var(--s4)}
.psc-upl-item{position:relative;border:1px solid var(--hairline);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);aspect-ratio:1}
.psc-upl-item img{width:100%;height:100%;object-fit:cover}
.psc-upl-item-doc{display:grid;place-items:center;align-content:center;gap:6px;height:100%;padding:var(--s2);text-align:center;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.psc-upl-item-doc .psc-i{color:#B7C0C9}
.psc-upl-done{display:flex;align-items:center;gap:7px;margin-top:var(--s3);font-size:var(--t-xs);color:var(--ok-text)}
.psc-upl-done .psc-i{color:var(--ok-dot)}

/* ---- Website health ------------------------------------------------------ */
.psc-site-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.psc-site-hero-main h2{margin:2px 0 4px}
.psc-speed{display:flex;gap:28px;flex-wrap:wrap}
.psc-speed-item{display:flex;flex-direction:column;gap:2px}
.psc-speed-n{font-family:var(--fh);font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}

/* ---- Connections --------------------------------------------------------- */
.psc-connect-points{list-style:none;margin:12px 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.psc-connect-points li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.psc-connect-points .psc-i{color:var(--muted);flex:none;margin-top:2px}
.psc-connect-list{list-style:none;margin:14px 0 0;padding:0}
.psc-connect-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line-2)}
.psc-connect-item:first-child{border-top:0}
.psc-connect-main strong{font-family:var(--fh);font-size:14.5px;color:var(--ink)}
.psc-connect-main p{margin:2px 0 0;max-width:56ch}
.psc-connect-choose{padding:0 0 14px}
.psc-form-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.psc-form-inline .psc-input{max-width:340px}
.psc-form-inline .psc-k{display:block;margin-bottom:4px}
.psc-connect-off{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}

@media (max-width:640px){
  .psc-site-hero{flex-direction:column;align-items:flex-start}
  .psc-form-inline .psc-input{max-width:none;width:100%}
}
/* ---- Logo concept presentation ------------------------------------------- */
/*
 * This screen is the customer's first sight of their logo, so it is built to
 * be looked at: one direction per band, a large preview on a quiet ground and
 * plenty of air around it. Every image carries width/height in the markup, so
 * the browser holds the exact box before the file arrives and the page does
 * not jump while it loads.
 */
.psc-concepts{gap:28px}
.psc-concept{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:20px}
/*
 * The chosen one is marked by a badge with a tick AND a heavier edge. Never by
 * colour alone: which design you picked is not something to convey in a hue.
 */
.psc-concept.is-chosen{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.psc-concept-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.psc-concept-t{font-size:22px;letter-spacing:-.02em;margin:2px 0 0}
.psc-chosen-badge{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--ink);border-radius:100px;padding:5px 12px}
.psc-chosen-badge .psc-i{flex:none}

/*
 * The stage. A neutral ground rather than pure white, so a logo with a white
 * background does not appear to float in nothing, and object-fit:contain so a
 * wide wordmark and a square mark both sit correctly without either being
 * cropped. A cropped logo is a different logo.
 */
.psc-concept-stage{margin:0;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:220px}
.psc-concept-stage img{display:block;max-width:100%;height:auto;max-height:340px;object-fit:contain}
.psc-concept-stage-sm{min-height:160px;padding:22px}
.psc-concept-stage-sm img{max-height:200px}

.psc-concept-why{max-width:62ch}
.psc-concept-why p{margin:0 0 10px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.psc-concept-why p:last-child{margin-bottom:0}
.psc-concept-why .psc-k{display:block;margin-bottom:8px}

/*
 * Mockups. auto-fill with a minimum means one mockup sits at a comfortable
 * size on its own rather than stretching across the row, and several tile
 * without ever squashing below something legible.
 */
.psc-concept-mockups .psc-k{display:block;margin-bottom:10px}
.psc-mockups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.psc-mockups figure{margin:0;display:flex;flex-direction:column;gap:8px}
.psc-mockups img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line-2);background:var(--paper)}
.psc-mockups figcaption{font-size:13px;color:var(--muted);line-height:1.45}

.psc-concept-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:18px}
.psc-concept-act .psc-help{margin:0}

.psc-choose-card{display:flex;flex-direction:column;gap:18px}
.psc-choose-name{margin:0;font-size:16px}
.psc-choose-what{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.psc-choose-what li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.psc-choose-what .psc-i{flex:none;margin-top:2px;color:var(--muted)}

@media (max-width:640px){
  /*
   * At phone width the padding comes down so the logo itself keeps the space,
   * and both confirmation controls go full width — a real target each, rather
   * than a large "yes" beside a small "no".
   */
  .psc-concept{padding:18px 16px 16px;border-radius:14px;gap:16px}
  .psc-concept-stage{padding:18px;min-height:170px;border-radius:12px}
  .psc-concept-stage img{max-height:220px}
  .psc-concept-t{font-size:19px}
  .psc-mockups{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .psc-concept-act{flex-direction:column;align-items:stretch;gap:10px}
  .psc-concept-act .psc-btn{width:100%;justify-content:center}
  .psc-choose-card .psc-btn-row{flex-direction:column;align-items:stretch}
  .psc-choose-card .psc-btn-row .psc-btn{width:100%;justify-content:center}
}
/* ---- Logo revisions ------------------------------------------------------ */
/*
 * The revision screens reuse the concept presentation's stage and mockup grid,
 * so a logo looks the same wherever the customer meets it. What is new here is
 * the pairing of "what you asked for" with "what we changed", the earlier
 * versions, and the story of the project.
 */
.psc-rounds-chip{display:inline-flex;align-items:center;flex:none;font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:5px 12px}

.psc-answered{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:18px;background:var(--paper);border:1px solid var(--line-2);border-radius:12px}
.psc-answered-col .psc-k{display:block;margin-bottom:8px}
.psc-answered-col p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.psc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.psc-tags li{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:100px;padding:3px 10px}

/*
 * Earlier versions. Small, quiet and clearly labelled with what they are and
 * when they were shown — kept so the history is honest, sized so nobody
 * mistakes one for the logo they are being asked about.
 */
.psc-versions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.psc-versions figure{margin:0;display:flex;flex-direction:column;gap:8px}
.psc-versions img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:10px;background:var(--paper)}
.psc-versions figcaption{display:flex;flex-direction:column;gap:1px}
.psc-versions figcaption b{font-family:var(--fh);font-size:13.5px;color:var(--ink)}
.psc-versions figcaption small{font-size:12px;color:var(--muted)}

/* The project's story. An ordered list, because it is one. */
.psc-story{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.psc-story li{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line)}
.psc-story li:last-child{border-left-color:transparent;padding-bottom:0}
.psc-story li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--line)}
.psc-story li.kind-selected::before,.psc-story li.kind-revised::before{border-color:var(--orange);background:var(--orange)}
.psc-story-when{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.psc-story b{font-family:var(--fh);font-size:14.5px;color:var(--ink)}
.psc-story p{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:60ch}

/*
 * The tick on a chosen card lives with the .psc-pick rules now, because every
 * selectable card in the portal needs it — the brand brief's cards had the same
 * colour-only problem and were fixed with the same lines rather than a second
 * copy of them here.
 */

.psc-changes-form .psc-fieldset{border:0;margin:0 0 20px;padding:0}
.psc-changes-form .psc-fieldset legend{padding:0;margin-bottom:2px}
.psc-changes-form .psc-revision-text{min-height:150px}
.psc-changes-actions{align-items:center}
.psc-btn-quiet{background:transparent;border-color:transparent;color:var(--muted)}
.psc-btn-quiet:hover{color:var(--ink);text-decoration:underline}

@media (max-width:640px){
  /*
   * At phone width every control goes full width and the prompts stack, so a
   * long revision note is comfortable to write with a thumb and nothing is a
   * small target next to a large one.
   */
  .psc-answered{padding:14px;gap:14px}
  .psc-versions{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .psc-changes-actions{flex-direction:column;align-items:stretch}
  .psc-changes-actions .psc-btn{width:100%;justify-content:center}
  .psc-story li{padding-left:20px}
}
/* ---- Logo approval ------------------------------------------------------- */
/*
 * The approved state carries a tick and the word "Approved" beside the date, so
 * it reads the same to somebody who cannot tell the badge from its surroundings
 * by colour.
 */
.psc-approved-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.psc-approved-line .psc-muted{font-size:14.5px}
.psc-concept-act .psc-chosen-badge{flex:none}

@media (max-width:640px){
  .psc-approved-line{gap:8px}
  .psc-concept-act .psc-btn{width:100%;justify-content:center}
}
/* ---- Brand pack handover ------------------------------------------------- */
/*
 * The last page of the logo journey. It has to feel like a delivery rather
 * than a file listing, so the approved logo and the one big action sit
 * together at the top and everything below is a calm, scannable list.
 *
 * Nothing here renders a deliverable: the image in the hero is the safe
 * display copy the review screens already used.
 */
.psc-pack-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.psc-pack-hero .psc-concept-stage{margin:0}
.psc-pack-hero-body{display:flex;flex-direction:column;gap:14px}
.psc-btn-lg{padding:13px 22px;font-size:15.5px}

/*
 * One row per file. The what is on the left and the get is on the right, and
 * the row never becomes a card: fifteen bordered boxes in a column read as
 * fifteen separate things to decide about rather than one pack.
 */
.psc-pack-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.psc-pack-file{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:16px 0;border-top:1px solid var(--line-2)}
.psc-pack-file:first-child{border-top:0;padding-top:4px}
.psc-pack-file-what{min-width:0}
.psc-pack-file-name{margin:0 0 4px;font-family:var(--fh);font-size:15.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.psc-pack-file-what p{margin:0 0 6px;font-size:14px;line-height:1.55}
.psc-pack-variant{font-family:var(--fb);font-size:12.5px;font-weight:600;color:var(--muted)}
.psc-pack-format{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0;font-size:13.5px}
.psc-pack-chip{flex:none;display:inline-block;padding:2px 8px;border-radius:5px;
  background:var(--slate-bg);border:1px solid var(--slate-line);color:var(--slate-text);
  font-family:var(--fb);font-size:11.5px;font-weight:700;letter-spacing:.04em}
.psc-pack-file-get{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.psc-pack-size{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/*
 * Colours. The block is decoration and is hidden from assistive technology;
 * the codes beside it are the actual deliverable.
 */
.psc-swatches{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.psc-swatch{display:flex;gap:14px;align-items:flex-start}
.psc-swatch-chip{flex:none;width:52px;height:52px;border-radius:10px;border:1px solid rgba(18,33,47,.12)}
.psc-swatch-body{min-width:0}
.psc-swatch-body b{font-family:var(--fh);font-size:15px}
.psc-swatch-body p{margin:2px 0 6px;font-size:13.5px}
.psc-swatch-codes{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}
.psc-swatch-codes div{display:flex;gap:6px}
.psc-swatch-codes dt{color:var(--muted);font-weight:600}
.psc-swatch-codes dd{margin:0;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.psc-typefaces{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.psc-typefaces b{font-family:var(--fh);font-size:15px}
.psc-typefaces p{margin:2px 0 0;font-size:13.5px}

.psc-pack-keep{background:var(--wash);border-color:var(--warn-line)}
.psc-pack-keep h2{margin:0 0 8px}
.psc-pack-keep p{margin:0 0 6px}

@media (max-width:860px){
  .psc-pack-hero{grid-template-columns:1fr;gap:20px}
}
@media (max-width:640px){
  /*
   * At phone width the download control goes under the description and full
   * width, rather than staying a small target squeezed against the edge.
   */
  .psc-pack-file{flex-direction:column;gap:12px;align-items:stretch}
  .psc-pack-file-get{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .psc-pack-file-get .psc-btn{flex:1;justify-content:center}
  .psc-btn-lg{width:100%;justify-content:center}
  .psc-swatches{grid-template-columns:1fr}
}

/* The acknowledgement shown the moment somebody comes back from paying.
   Four states, and the colour is the honest one rather than the hopeful one:
   'pending' is not green, because at that moment PrimeStart has not been told
   the payment succeeded and a green panel would say otherwise. */
.psc-checkout-return{
  border:1px solid var(--line);border-radius:16px;
  padding:20px 24px;margin:0 0 20px;background:var(--white);
}
.psc-checkout-return h2{margin:0 0 6px}
.psc-checkout-return p{margin:0;color:var(--ink-2)}
.psc-checkout-return .psc-mt{margin-top:10px}
.psc-checkout-return.is-confirmed{background:var(--ok-bg);border-color:var(--ok-line)}
.psc-checkout-return.is-confirmed h2{color:var(--ok-text)}
.psc-checkout-return.is-pending{background:var(--wash);border-color:var(--warn-line)}
.psc-checkout-return.is-pending h2{color:var(--warn-text)}
.psc-checkout-return.is-cancelled{background:var(--slate-bg);border-color:var(--slate-line)}
.psc-checkout-return.is-cancelled h2{color:var(--slate-text)}
.psc-checkout-return.is-failed{background:var(--err-bg);border-color:var(--err-line)}
.psc-checkout-return.is-failed h2{color:var(--err-text)}
@media (max-width:640px){
  .psc-checkout-return{padding:16px 18px;border-radius:12px}
}

/* What an invitation is offering, before somebody commits to it. */
.psc-invite-terms{display:grid;gap:10px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}

/* The main landmark on a signed-out page. Structural only — the pages inside
   it own their own layout, and a landmark that changed the design would have
   been noticed years before a crawler found the missing one. */
.psc-standalone-main{display:contents}

/* Terms and policies, on their own row. Read deliberately rather than glanced
   at, so they are not mixed in with contact details — a page that technically
   links to something nobody finds is the same as one that does not. */
.psc-foot-legal{padding-top:0;flex-wrap:wrap;font-size:12.5px}
.psc-foot-legal a{color:var(--muted)}
.psc-foot-legal a:hover{color:var(--ink)}

/* ------------------------------------------------------------------
   Post-checkout welcome (8 September 2026)

   Reuses .psc-auth-card, so this page inherits the sign-in surface a
   customer has already seen rather than introducing a third visual
   language for one screen. Only what is genuinely new is defined here.
   ------------------------------------------------------------------ */
.psc-welcome .psc-auth-card{text-align:center;max-width:460px}
.psc-welcome .psc-auth-card .psc-btn-block{margin-top:18px}

/* The tick. Sized so it reads as a result, not a decoration. */
.psc-welcome-tick{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ok-bg,#e8f6ee);color:var(--ok,#1a7f45)}
.psc-welcome-tick svg{display:block}

/* Waiting. A quiet ring, because a customer who has just paid does not
   need urgency signalled at them. */
.psc-welcome-spin{width:34px;height:34px;margin:2px auto 16px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--ink,#111);
  animation:psc-welcome-turn 900ms linear infinite}
@keyframes psc-welcome-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .psc-welcome-spin{animation-duration:2600ms}
}

/* What they bought, stated once and clearly. */
.psc-welcome-plan{margin:20px 0 18px;padding:16px;border:1px solid var(--line);
  border-radius:12px;background:var(--tint,#fafafa);
  display:flex;flex-direction:column;gap:3px}
.psc-welcome-plan strong{font-size:1.05rem}
.psc-welcome-plan span{color:var(--muted);font-size:.9rem}
.psc-welcome-plan b{margin-top:6px;font-size:1.35rem}
.psc-welcome-plan b small{font-size:.85rem;font-weight:400;color:var(--muted)}

/* Each line in this card is a separate thought and has to look like one.
   The shared auth surface expects a single block of copy under a heading,
   so consecutive paragraphs otherwise close up into a wall of grey. */
.psc-welcome .psc-auth-card p + p{margin-top:10px}
/* The same, for the note under the primary action — it follows a link,
   not a paragraph, so the adjacency above does not reach it. */
.psc-welcome .psc-auth-card .psc-btn-block + p{margin-top:12px}

/* The way back to the account is a footnote, not the next sentence of the
   message above it. Ruled off so the primary action keeps the eye. */
.psc-welcome .psc-auth-card .psc-welcome-back{margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line)}
/* 24px of link is a legal tap target and an unkind one. Padded so a thumb
   on a 320px phone can reach the way out without aiming. */
.psc-welcome .psc-welcome-back a{display:inline-block;padding:6px 8px}

/* 390 and 320: the card goes edge-to-edge rather than shrinking its
   padding to nothing, and the primary action stays a full-width target. */
@media (max-width:430px){
  .psc-welcome .psc-auth-card{padding:26px 20px 22px;border-radius:14px}
  .psc-welcome-plan{padding:14px}
  .psc-welcome-plan b{font-size:1.25rem}
  .psc-welcome .psc-auth-card .psc-welcome-back{margin-top:18px;padding-top:14px}
}

/* ------------------------------------------------------------------
   Password change (8 September 2026)

   The Account card used to be a sentence and a link that went nowhere
   for a signed-in customer. It is a real form now, so it needs the
   rules to be legible before anybody types, and the met/unmet state
   has to read without relying on colour.
   ------------------------------------------------------------------ */
.psc-pw-form .psc-field{margin-bottom:14px}
.psc-pw-checks{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.psc-pw-checks li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
/* The mark is a character, not a colour: "○" unmet, "✓" met. */
.psc-pw-checks li i{width:14px;height:14px;flex:0 0 14px;display:inline-flex;align-items:center;
  justify-content:center;font-style:normal;font-size:12px;line-height:1}
.psc-pw-checks li i::before{content:"○"}
.psc-pw-checks li.is-met{color:var(--ok,#1a7f45)}
.psc-pw-checks li.is-met i::before{content:"✓"}
.psc-pw-card .psc-err{color:var(--bad,#b3261e);font-size:13px;margin:6px 0 0}
.psc-pw-card .psc-input.has-error{border-color:var(--bad,#b3261e)}

/* ---- Onboarding, responsive ------------------------------------------------
   The rail becomes a scrollable strip of step pills rather than a squeezed
   column, and the actions stack with the primary one on top — on a phone the
   thumb is at the bottom of the screen, so the button it reaches first should
   be the one that moves you forward.
   -------------------------------------------------------------------------------- */
@media (max-width:1023px){
  .psc-focus-main{padding:var(--s6) var(--pad) var(--s9)}
}
@media (max-width:640px){
  .psc-review-list > div{grid-template-columns:1fr;gap:var(--s1);padding:var(--s3) 0}
  .psc-onb-actions{flex-direction:column-reverse;align-items:stretch}
  .psc-onb-actions .psc-btn{width:100%;margin-left:0}
  .psc-onb-fields{gap:var(--s6)}
  .psc-onb-done-next{padding:var(--s5)}
  .psc-upl-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
}

@media (max-width:640px){
  .psc-picks{grid-template-columns:1fr}
}

/* The Support -> website-change hand-off. It is the only route to a change
   request from this screen now that the category pill is gone, so it reads as
   an action rather than as a sentence with a link in it. */
.psc-support-handoff{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.psc-support-handoff p{margin:0;flex:1;min-width:min(100%,240px)}
.psc-support-handoff strong{display:block}
.psc-support-handoff .psc-btn{flex:none}

/* ---- Requests: one list over two stores ------------------------------------
   The row is the action-centre row, so it inherits its tile, its hairline and
   its spacing. What is added here is the line that says WHICH kind of request
   this is, and the status/date/chevron cluster that closes it. */
.psc-req-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:3px 0 0;font-size:var(--t-xs);color:var(--muted)}
.psc-req-kind{font-family:var(--fh);font-weight:var(--w-semi);letter-spacing:-0.01em;color:var(--ink-2,var(--ink))}
.psc-req-list .psc-act-main p + p{margin-top:5px}
.psc-req-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:nowrap}
.psc-req-date{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.psc-req-go{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);color:var(--muted);flex:none;transition:background-color var(--dur-1) ease,color var(--dur-1) ease}
.psc-req-go:hover{background:var(--surface-sunken);color:var(--ink)}
.psc-act-row:has(.psc-req-go):hover{background:var(--surface-sunken)}

/* On a phone the cluster drops under the text rather than squeezing the title
   into a column two words wide. */
@media (max-width:640px){
  .psc-req-actions{flex:0 0 100%;width:auto;justify-content:flex-start;margin-left:0;padding-left:46px;flex-wrap:wrap}
  .psc-req-go{margin-left:auto}
}

/* The request panel's footer: a way back to what has already been asked. */
.psc-drawer-foot{padding:var(--s4) var(--s6) var(--s6);border-top:1px solid var(--hairline-soft);margin-top:auto}
.psc-drawer-foot .psc-link{display:inline-flex;align-items:center;gap:6px}
/* The Help control is a button now, not a link. It must still look identical. */
button.psc-top-help{background:none;border:0;cursor:pointer;font:inherit}

/* ---- The create-record form shell ------------------------------------------
   The reference's New Client form: each section explains itself on the left and
   collects on the right, hairlines between sections, and one action bar that
   stays put. Used by every "ask PrimeStart for something" route so the five
   feel like one product rather than five forms written on five days. */
.psc-formshell{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.psc-formsec{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s6) var(--s7);padding:var(--s6)}
.psc-formsec + .psc-formsec{border-top:1px solid var(--hairline-soft)}
.psc-formsec-t h2{font-family:var(--fh);font-size:16px;font-weight:var(--w-bold);letter-spacing:-0.02em;color:var(--ink);margin:0}
.psc-formsec-t p{margin:6px 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--muted);max-width:34ch}
.psc-formsec-f{min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.psc-formsec-f > .psc-field{margin:0}

/* The action bar. Sticky so a long form never hides its own primary action. */
.psc-formbar{
  position:sticky;bottom:0;z-index:2;
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s6);
  border-top:1px solid var(--hairline);
  background:var(--surface);
}
.psc-formbar-end{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.psc-formbar-note{margin:0;font-size:var(--t-xs);color:var(--muted);flex-basis:100%;order:3}

@media (max-width:860px){
  .psc-formsec{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5)}
  .psc-formsec-t p{max-width:none}
  .psc-formbar{padding:var(--s4) var(--s5)}
  .psc-formbar .psc-btn{flex:1 1 auto;justify-content:center}
  .psc-formbar-end{margin-left:0;width:100%}
}

/* ---- What happens after it is sent ---------------------------------------- */
.psc-sent{max-width:560px;margin:0 auto;text-align:center;padding:var(--s8) var(--s6)}
.psc-sent-i{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--s5);border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok-text)}
.psc-sent h1{font-family:var(--fh);font-size:clamp(24px,3vw,30px);font-weight:var(--w-black);letter-spacing:-0.03em;color:var(--ink);margin:0}
.psc-sent p{margin:var(--s3) 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--muted)}
.psc-sent .psc-btn-row{margin-top:var(--s6);justify-content:center}
/* Form pages are wider than a reading column but narrower than a dashboard. */
.psc-page-form{max-width:980px}

/* The re-authentication field is revealed only when the sign-in address is
   actually being edited. .psc-field carries a display value, so [hidden] needs
   saying explicitly or the field shows through its own guard. */
.psc-field-reauth[hidden]{display:none}
.psc-field-reauth{border-left:2px solid var(--warn-line,var(--hairline));padding-left:var(--s4)}
/* .psc-field lays itself out, which beats the browser's own [hidden] rule.
   Any field that can be revealed conditionally needs this said explicitly. */
.psc-field[hidden]{display:none}
.psc-sent-i-warn{background:var(--wash);color:var(--orange-dk)}

/* Email verification: the state beside the address, and the one action. */
.psc-verify-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:8px}
.psc-verify-send{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:var(--s5);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface)}
.psc-verify-send-t{flex:1;min-width:min(100%,260px)}
.psc-verify-send-t strong{display:block;font-family:var(--fh);font-weight:var(--w-bold);color:var(--ink)}
.psc-verify-send-t p{margin:4px 0 0;font-size:var(--t-sm);color:var(--muted)}

/* ---- The notifications panel -----------------------------------------------
   The markup carried seven classes and the stylesheet carried one — a mobile
   override — so the bell opened a column of unstyled text over the page. This
   is the panel it was always meant to be: a dropdown under the bell, hairline
   rows, an unread marker that is a dot AND a weight rather than colour alone. */
.psc-notif{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:min(384px,calc(100vw - 24px));
  max-height:min(70vh,560px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(13,25,38,.14);overflow:hidden;
}
.psc-notif[hidden]{display:none}
.psc-notif-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--hairline-soft);flex:none;
}
.psc-notif-head strong{font-family:var(--fh);font-size:14.5px;font-weight:var(--w-bold);color:var(--ink)}
.psc-notif-head form{margin:0}

.psc-notif-empty{margin:0;padding:var(--s7) var(--s5);text-align:center;font-size:var(--t-sm);color:var(--muted);line-height:1.55}

.psc-notif-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.psc-notif-list li{border-top:1px solid var(--hairline-soft)}
.psc-notif-list li:first-child{border-top:0}
.psc-notif-list a{
  display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);
  padding:var(--s4) var(--s5);text-decoration:none;color:inherit;
  transition:background-color var(--dur-1) ease;
}
.psc-notif-list a:hover{background:var(--surface-sunken)}
/* The unread marker is a dot in the gutter AND a heavier title: never colour
   on its own, which somebody who cannot see the orange would miss entirely. */
.psc-notif-list li.unread a::before{
  content:"";grid-row:1/2;grid-column:1;align-self:center;
  width:7px;height:7px;border-radius:50%;background:var(--orange);
}
.psc-notif-list li:not(.unread) a::before{content:"";grid-column:1;width:7px}
.psc-notif-t{grid-column:2;font-size:var(--t-sm);line-height:1.4;color:var(--ink)}
.psc-notif-list li.unread .psc-notif-t{font-weight:var(--w-semi)}
.psc-notif-b{grid-column:2;font-size:var(--t-xs);line-height:1.45;color:var(--muted)}
.psc-notif-list time{grid-column:2;margin-top:3px;font-size:var(--t-micro);color:var(--muted-2,var(--muted))}

.psc-notif-all{
  display:block;flex:none;padding:var(--s4) var(--s5);text-align:center;
  border-top:1px solid var(--hairline-soft);background:var(--surface);
  font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--orange-dk);text-decoration:none;
}
.psc-notif-all:hover{background:var(--surface-sunken)}

/* The bell is the positioning context for the panel. */
.psc-top-actions{position:relative}

/* On a phone the panel is a full-width sheet under the bar, not a dropdown.
   This has to come AFTER the base rule above, and it cannot use 100vw: that
   includes the scrollbar, which is how it ended up three pixels wide of the
   viewport and scrolled the whole document sideways. */
@media (max-width:640px){
  .psc-notif{
    position:fixed;top:calc(var(--top) + 8px);left:12px;right:12px;
    width:auto;max-width:none;max-height:70vh;
  }
}

/* ---- Website health: four facts, each from a check that ran ----------------
   A definition list in spirit, a grid in fact: the label column is fixed so
   the values line up, which is what makes four short lines readable as a
   status rather than as prose. */
.psc-health-list{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.psc-health-list li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:var(--s3);font-size:var(--t-sm)}
.psc-health-i{display:grid;place-items:center;color:var(--muted)}
.psc-health-t{color:var(--ink-2)}
.psc-health-v{color:var(--ink);font-weight:var(--w-semi);text-align:right}
.psc-health .psc-btn{margin-top:var(--s4)}

/* Below 380px the value drops under its label rather than wrapping to two
   words wide beside it. */
@media (max-width:380px){
  .psc-health-list li{grid-template-columns:20px 1fr}
  .psc-health-v{grid-column:2;text-align:left;font-size:var(--t-xs)}
}

/* ---- The install card -----------------------------------------------------
   THREE NUMBERED STEPS, all of them visible. A QR code cannot install
   anything — it carries an address and a camera opens it — so the card walks
   through opening it, signing in, and adding it. Only the code itself is
   desktop-only, because a phone cannot photograph its own screen. */
.psc-app-steps{list-style:none;counter-reset:psc-app;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s4)}
.psc-app-steps > li{counter-increment:psc-app;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:var(--s3);row-gap:0;align-items:start}
/* Every child sits in the second column. Without this each <p> after the
   title auto-places at the START of the next row — which is the 22px number
   column — and the sentence comes out one word per line. */
.psc-app-steps > li > *{grid-column:2}
.psc-app-steps > li::before{content:counter(psc-app);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wash);color:var(--orange-dk);font-family:var(--fh);font-size:11px;font-weight:var(--w-black)}
.psc-app-step-t{display:block;font-family:var(--fh);font-size:var(--t-sm);font-weight:var(--w-semi);letter-spacing:-0.01em;color:var(--ink)}
.psc-app-step-p{margin:3px 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--muted)}
.psc-app-step-p b{font-family:var(--fh);font-weight:var(--w-semi);color:var(--ink-2)}
.psc-app-url{margin:5px 0 0;font-size:var(--t-xs);color:var(--muted);word-break:break-all}
.psc-app-qr{display:flex;align-items:flex-start;gap:var(--s4);margin-top:var(--s3)}
.psc-app-qr-img{width:96px;height:96px;flex:none;padding:6px;border:1px solid var(--hairline);border-radius:var(--r-sm);background:#fff}
.psc-app-qr-img svg{display:block;width:100%;height:100%}
.psc-app-install{margin-top:var(--s4)}

/* On a phone the code is useless and the step it belongs to is already done —
   they are holding the page. The numbering closes up behind it. */
@media (max-width:640px){
  .psc-app-step-qr{display:none}
  .psc-app-steps{counter-reset:psc-app 1}
}

/* Already installed: the card has nothing left to say. Both spellings, because
   iOS answered display-mode late and standalone was the flag before it. */
@media (display-mode:standalone),(display-mode:minimal-ui){
  .psc-app-card{display:none}
}
.psc-standalone-app .psc-app-card{display:none}

/* ---- The offline page -----------------------------------------------------
   Cached on the device, so it is styled by the same stylesheet and holds no
   fact about anybody. */
.psc-offline{max-width:420px;margin:0 auto;padding:14vh var(--s5) var(--s7);text-align:center;display:grid;justify-items:center;gap:var(--s4)}
.psc-offline .psc-mark{width:40px;height:40px;border-radius:var(--r-md)}
.psc-offline .psc-mark span{width:15px;height:15px}
.psc-offline h1{margin:0}
.psc-offline p{margin:0}
.psc-offline-note{margin-top:var(--s3)}

/* ---- Signing in with Google -----------------------------------------------
   A neutral button. Google's guidelines allow a white or light button carrying
   the official mark, which is what this is — the mark keeps its own colours
   and the label keeps PrimeStart's type, so it reads as one more way in rather
   than as somebody else's product bolted on. */
.psc-btn-google{gap:10px}
.psc-i-google{flex:none}

/* The "or" between the password form and the button. A rule with a word in it,
   because a bare second button reads as an alternative to the field above it
   rather than to the whole form. */
.psc-or{display:flex;align-items:center;gap:var(--s4);margin:var(--s5) 0;color:var(--muted);font-size:var(--t-xs)}
.psc-or::before,.psc-or::after{content:"";flex:1;height:1px;background:var(--hairline)}
/* The divider already spaces itself, 20px each side. The generic
   `.psc-split-form form{margin-top:var(--s6)}` was landing on the Google form
   as well and adding 24px to the lower side only, so the rule sat 20px under
   Sign in and 44px above Continue with Google - the button read as detached
   from the divider that introduces it. Symmetry restored (owner,
   10 September 2026). */
.psc-split-form .psc-or + form{margin-top:0}

/* The connection, in Account beside the password. */
.psc-google-card form{margin-top:var(--s4)}
.psc-google-card .psc-muted{margin-top:var(--s3)}
.psc-google-row{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.psc-google-row > div{min-width:0;flex:1}
.psc-google-state{margin:0;font-family:var(--fh);font-weight:var(--w-semi);color:var(--ink)}
.psc-google-mail{margin:2px 0 0;font-size:var(--t-xs);color:var(--muted);overflow-wrap:anywhere}

/* ---- Tap targets on a phone -----------------------------------------------
   The way back out of a form was 23 pixels tall: fine for a mouse, mean with
   a thumb. Given height rather than padding, so nothing around it moves.
   (The password reveal was the second one here; it became an eye inside each
   box, which is 38px square and needs no help.) */
@media (max-width:640px){
  .psc-back{min-height:36px}
}

/* ---- A flag above a page heading -----------------------------------------
   A pill that says what a page belongs to. It was inline at the head of the
   description, so the sentence flowed around it and wrapped back underneath;
   above the heading it is a label, which is what it always was. */
.psc-page-flag{margin:0 0 var(--s3);line-height:1}
.psc-page-flag .psc-lock-chip{margin-left:0}

/* ---- A status heading that is also the action -----------------------------
   When the next step belongs to the customer, the heading IS the link — the
   action block underneath is suppressed in that case so the To-do list at the
   top of the page owns the button, and a heading reading "Complete your
   onboarding" with nothing to press is the result nobody wants. */
.psc-status-h-link{display:inline-flex;align-items:baseline;gap:8px;color:inherit;text-decoration:none;transition:color var(--dur-1) ease}
.psc-status-h-link .psc-i{color:var(--orange);flex:none;transition:transform var(--dur-1) ease}
.psc-status-h-link:hover{color:var(--orange-dk)}
.psc-status-h-link:hover .psc-i{transform:translateX(3px)}

/* ---- Search rankings on the dashboard -------------------------------------
   Stacked records, not a squeezed table: the keyword can be long, the position
   is short, and on a phone a two-column table of those is unreadable. */
.psc-rank-list{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.psc-rank-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding-bottom:var(--s3);border-bottom:1px solid var(--hairline-soft)}
.psc-rank-list li:last-child{border-bottom:0;padding-bottom:0}
.psc-rank-term{min-width:0;font-size:var(--t-sm);color:var(--ink-2);overflow-wrap:anywhere}
.psc-rank-term small{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--muted)}
.psc-rank-pos{text-align:right;white-space:nowrap}
.psc-rank-pos em{font-style:normal;font-family:var(--fh);font-size:var(--t-body);font-weight:var(--w-black);letter-spacing:-0.02em;color:var(--ink)}
.psc-rank-pos .psc-rank-none{font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--muted)}
.psc-rank-pos small{display:block;margin-top:2px;font-size:var(--t-xs)}
.psc-rank-pos small.up{color:var(--ok-ink,#2F7A55)}
.psc-rank-pos small.down{color:var(--warn-ink,#A2521B)}
.psc-rank-card .psc-btn{margin-top:var(--s4)}
.psc-rank-term a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-1) ease,color var(--dur-1) ease}
.psc-rank-term a:hover{color:var(--ink);border-bottom-color:var(--line)}

/* ---- One search in full -------------------------------------------------- */
/* The term is the way into its own history, so it has to look like a way in. */
.psc-kw-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-1) ease}
.psc-kw-link:hover{border-bottom-color:var(--line)}
.psc-stats-3{grid-template-columns:repeat(3,1fr)}

.psc-kws-now{display:grid;gap:var(--s3)}
.psc-kws-figure{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.psc-kws-n{font-family:var(--fh);font-size:44px;font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.psc-kws-n.band-top3{color:var(--ok-text)}
.psc-kws-n.band-page1{color:var(--orange-dk)}
/* "Not in the top 100" is a sentence, not a number: it must not shout like one. */
.psc-kws-n.is-none{font-size:var(--t-body);font-weight:var(--w-semi);letter-spacing:0;color:var(--muted)}
.psc-kws-band{font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.psc-kws-ask{margin-top:var(--s4)}
.psc-kw-work{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
.psc-kw-work li{display:grid;gap:3px;padding-bottom:var(--s3);border-bottom:1px solid var(--hairline-soft)}
.psc-kw-work li:last-child{border-bottom:0;padding-bottom:0}
.psc-kw-work strong{font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink)}
.psc-kw-work span{font-size:var(--t-sm);color:var(--ink-2)}
.psc-kw-work small{font-size:var(--t-xs);color:var(--muted)}

/* The history chart. Scales with the card; the viewBox does the maths. */
.psc-chart{margin:var(--s4) 0 0}
.psc-chart-svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.psc-chart-grid{stroke:var(--line-2);stroke-width:1}
.psc-chart-base{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.psc-chart-ylab,.psc-chart-xlab{font-family:var(--fh);font-size:10.5px;font-weight:700;fill:var(--muted)}
.psc-chart-ylab.is-none{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.psc-chart-line{stroke:var(--ok-dot);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.psc-chart-dot{fill:var(--ok-dot)}
/* Looked for and not found: drawn, but hollow, so it never reads as a position. */
.psc-chart-dot.is-none{fill:var(--white);stroke:var(--muted);stroke-width:1.5}

/*
 * These sit after the responsive block above, so they have to carry their own
 * breakpoints — a later rule wins inside a media query just as it does outside.
 */
@media (max-width:640px){
  .psc-stats-3{grid-template-columns:1fr 1fr;gap:10px}
  .psc-kws-n{font-size:36px}
  /*
   * The chart is one drawing scaled to fit, so on a narrow screen everything
   * in it shrinks together — including the type, which stops being readable
   * long before the line does. These sizes are in the SVG's own units, picked
   * so the labels land back at roughly 10px once the drawing is scaled down.
   */
  .psc-chart-ylab,.psc-chart-xlab{font-size:13px}
  .psc-chart-ylab.is-none{font-size:12px}
  .psc-chart-line{stroke-width:2.8}
}
@media (max-width:480px){
  .psc-chart-ylab,.psc-chart-xlab{font-size:18px}
  .psc-chart-ylab.is-none{font-size:16px}
  .psc-chart-line{stroke-width:3.6}
}
@media (max-width:430px){
  .psc-stats-3{grid-template-columns:1fr 1fr}
}
@media (max-width:360px){
  .psc-stats-3{grid-template-columns:1fr}
  .psc-chart-ylab,.psc-chart-xlab{font-size:24px}
  .psc-chart-ylab.is-none{font-size:21px}
  .psc-chart-line{stroke-width:4.4}
}

/* A word where a number normally goes, on the internal account's plan tile. */
.psc-strip-v-word{font-size:var(--t-h4);letter-spacing:-0.02em}

/* The staff billing preview: unmissable to staff, never rendered for a customer. */
.psc-preview-note{margin-top:var(--s4);padding:var(--s4);border:1px dashed var(--warn-line);border-radius:14px;background:var(--wash);font-size:var(--t-sm);color:var(--ink-2)}
.psc-preview-note p{margin:0}
.psc-preview-states{margin-top:var(--s3)!important;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--t-xs)}
.psc-preview-states a{color:var(--orange-dk);text-decoration:underline}
.psc-preview-states strong{color:var(--ink)}