/* ─────────────────────────────────────────────────────────────────────────────
   services.php — Claude Design option 4b.

   Two columns: a sticky browse rail that also carries the guide links, and the
   results. The right rail is gone — it repeated Promise/How-it-works copy that
   appears on every page of the site, and the only thing on it that changed was
   the cart, which is now a bar pinned to the bottom on every width.

   Scoped to this page. The main site's type comes from global/functions.php and
   its colour from the compiled tw.css, both shared with 25 other pages and the
   admin panel, so the overrides live here rather than in the shared theme. When
   the main site moves onto the tokens, delete this file rather than maintain it.

   Values are taken from the wireframe, not approximated.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --s-ink: #111111;
  --s-text: #374151;
  --s-2: #6b7280;
  --s-3: #9ca3af;
  --s-line: #e5e7eb;
  --s-hair: #f3f4f6;
  --s-surface: #f8f9fa;
  --s-card: #f5f5f5;
  --s-panel: #111827;
  --s-ok: #059669;
}

body { background: #fff; }

/* ── Type ────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .font-heading, .font-display { font-family: 'Manrope', sans-serif; }
.s-h1   { font: 600 34px/1.08 'Manrope', sans-serif; letter-spacing: -1.2px; color: var(--s-ink); margin: 0; }
.s-h2   { font: 600 20px 'Manrope', sans-serif; letter-spacing: -.5px; color: var(--s-ink); margin: 0; }
.s-lede { font: 400 13.5px/1.55 'Inter', sans-serif; color: var(--s-2); max-width: 620px; margin: 0; }
.s-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
          font: 400 11px 'Inter', sans-serif; color: var(--s-2); margin: 0; }
.s-meta > span + span::before { content: "·"; color: var(--s-3); margin-right: 10px; }
.s-meta > span { display: inline-flex; align-items: center; gap: 10px; }
.s-meta .s-ok { color: var(--s-ok); }
.s-meta #pro-badge.hidden { display: none; }
.s-label { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em;
           text-transform: uppercase; color: var(--s-3); }
.s-crumb { padding: 14px 32px 0; font: 400 11px 'JetBrains Mono', ui-monospace, monospace; color: var(--s-3); }
.s-crumb a { color: var(--s-3); text-decoration: none; }
.s-crumb a:hover { color: var(--s-ink); }

/* ── Shell: rail + results ───────────────────────────────────────────────── */
.s-wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px;
          max-width: 1240px; margin: 0 auto; padding: 18px 32px 120px; align-items: start; }
@media (max-width: 1023px) { .s-wrap { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 120px; gap: 18px; } }

/* The rail is a panel, as it was before — the flat version left it floating on the
   page with nothing holding it together. Surface fill and a hairline, so it reads
   as one block against the white page without competing with the cards. */
.s-rail { position: sticky; top: calc(var(--xw-header-h, 57px) + 14px);
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid #E6E9EF;
  border-radius: 12px; padding: 14px 12px;
  max-height: calc(100vh - var(--xw-header-h, 57px) - 28px); overflow-y: auto; }
/* A tall trade list should scroll inside the panel rather than push its own bottom
   edge off screen. */
.s-rail::-webkit-scrollbar { width: 0; }
.s-rail { scrollbar-width: none; }
@media (max-width: 1023px) { .s-rail { display: none; } }
.s-back { display: flex; align-items: center; gap: 8px; font: 500 11.5px 'Inter', sans-serif;
          color: var(--s-text); text-decoration: none; }
.s-back:hover { color: var(--s-ink); }
.s-rail-list { display: flex; flex-direction: column; gap: 2px; }
.s-rail-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px; text-decoration: none;
  font: 500 12.5px 'Inter', sans-serif; color: var(--s-text); }
.s-rail-list a:hover { background: #F7F8FA; color: var(--s-ink); }
.s-rail-list a.on { background: var(--s-ink); color: #fff; }
.s-rail-list a em { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--s-3); }
.s-rail-list a.on em { color: rgba(255,255,255,.6); }
.s-rule { height: 1px; background: var(--s-hair); margin: 4px 0; }

/* "Read first" — the route into the guide layer, which this page never had. It
   sits beside the prices deliberately: this is where someone is deciding whether
   a number is fair. */
.s-read { display: flex; flex-direction: column; gap: 9px; }
.s-read a { font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--s-ink); text-decoration: none; }
.s-read a:hover { text-decoration: underline; }

/* ── Results ─────────────────────────────────────────────────────────────── */
.s-main { display: flex; flex-direction: column; gap: 20px; }
.s-head { display: block; }
.s-head .s-h1 { margin-bottom: 10px; }
.s-head .s-lede { margin-bottom: 10px; }
.s-head .s-lede.hidden { display: none; margin: 0; }
.s-head .s-meta { margin: 0; }
.s-main > .s-sort { margin-top: 4px; }
.s-sort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-sort .s-label { margin-right: 2px; }
.s-pill { border-radius: 999px; border: 1px solid var(--s-line); background: #fff;
  color: var(--s-text); font: 500 11.5px 'Inter', sans-serif; padding: 8px 14px;
  cursor: pointer; white-space: nowrap; }
.s-pill:hover { border-color: var(--s-3); }
.s-pill.on { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.s-card { display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden;
  text-decoration: none; }
.s-card:hover { border-color: var(--s-ink); }
.s-shot { position: relative; aspect-ratio: 15/8; background: var(--s-card); overflow: hidden; }
.s-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-shot .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--s-3); }
/* The placeholder icon is used by three different tile builders, not all of which
   sit inside .s-shot — size it on .ph itself or it inherits the container. */
.ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--s-3); }
.ph svg { width: 30px; height: 30px; }
.s-shot .ph svg { width: 28px; height: 28px; }
.s-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.s-name { font: 600 15px/1.32 'Manrope', sans-serif; letter-spacing: -.018em; color: var(--s-ink); margin: 0; }
.s-bullet { font: 400 12.5px/1.5 'Inter', sans-serif; color: var(--s-2); margin: 0; }

/* Price. A researched range where one exists, otherwise the catalogue's starting
   figure — never a range derived from it. The qualifier is not optional: this is
   a marketplace and the professional sets the final number. */
.s-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s-price b { font: 600 15px 'JetBrains Mono', ui-monospace, monospace; color: var(--s-ink); letter-spacing: 0; }
.s-price span { font: 400 10.5px 'Inter', sans-serif; color: var(--s-2); }
.s-dur { display: flex; align-items: center; gap: 5px; font: 400 11px 'Inter', sans-serif; color: var(--s-2); }
.s-dur svg { width: 12px; height: 12px; }

.s-act { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 8px; }
.s-add { flex: 1; border: 0; border-radius: 8px; background: var(--s-ink); color: #fff;
  font: 500 12.5px 'Inter', sans-serif; padding: 10px 14px; cursor: pointer; }
.s-add:hover { background: #000; }
.s-add.added { background: var(--s-hair); color: var(--s-ink); }
.s-icon { flex: none; display: inline-flex; padding: 8px; border-radius: 8px;
  border: 1px solid var(--s-line); background: #fff; color: var(--s-2); cursor: pointer; }
.s-icon:hover { border-color: var(--s-ink); color: var(--s-ink); }
.s-icon svg { width: 15px; height: 15px; }

/* ── Category / subcategory tiles (states 1 and 2) ───────────────────────── */
.s-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 16px; }
.s-tile { display: flex; flex-direction: column; border: 1px solid var(--s-line);
  border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; }
.s-tile:hover { border-color: var(--s-ink); }
.s-tile .s-shot { aspect-ratio: 4/3; }
.s-tile-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.s-tile-b strong { font: 600 14px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--s-ink); }
.s-tile-b span { font: 400 11px 'Inter', sans-serif; color: var(--s-2); }

/* ── Cart bar ────────────────────────────────────────────────────────────── */
.s-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--s-panel); color: #fff;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; }
.s-bar .n { font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.75); }
.s-bar .n b { color: #fff; font-weight: 600; }
.s-bar .grow { flex: 1; }
.s-bar button { border: 0; border-radius: 8px; background: #fff; color: var(--s-ink);
  font: 500 12.5px 'Inter', sans-serif; padding: 10px 20px; cursor: pointer; }
.s-bar button:hover { background: var(--s-hair); }
/* The cart JS toggles Tailwind's .hidden class. tw.css loads first, so at equal
   specificity .s-bar would win and the bar would never hide — hence !important. */
.s-bar.hidden { display: none !important; }
.s-bar #rp-cart-total span:first-child { display: none; }

/* ── Unserved area (design 4f) ───────────────────────────────────────────
   The most common state in any area the marketplace has not reached, and a lead
   capture rather than an error. It is the page, not a banner above a grid of
   things nobody can book. */
.s-empty { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .s-empty { grid-template-columns: minmax(0, 1fr); } }
.s-empty h1 { font: 600 34px/1.1 'Manrope', sans-serif; letter-spacing: -1.2px;
  color: var(--s-ink); margin: 0 0 12px; text-wrap: pretty; }
.s-empty .lede { font: 400 13.5px/1.6 'Inter', sans-serif; color: var(--s-2); max-width: 560px; margin: 0 0 20px; }
.s-form { border: 1px solid var(--s-line); border-radius: 12px; padding: 20px; background: #fff; }
.s-form h2 { font: 600 16px 'Manrope', sans-serif; letter-spacing: -.4px; color: var(--s-ink); margin: 0 0 14px; }
.s-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .s-form .row { grid-template-columns: minmax(0, 1fr); } }
.s-form input, .s-form select { width: 100%; border: 1px solid var(--s-line); border-radius: 8px;
  padding: 10px 12px; font: 400 13px 'Inter', sans-serif; color: var(--s-ink); background: #fff; }
.s-form input::placeholder { color: var(--s-3); }
.s-form input:focus, .s-form select:focus { outline: none; border-color: var(--s-ink); }
.s-form .go { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.s-form .go button { border: 0; border-radius: 8px; background: var(--s-ink); color: #fff;
  font: 500 12.5px 'Inter', sans-serif; padding: 11px 18px; cursor: pointer; }
.s-form .go button:hover { background: #000; }
.s-form .go small { font: 400 10.5px/1.5 'Inter', sans-serif; color: var(--s-3); }

/* The ranges panel keeps an unserved page genuinely useful — and worth indexing. */
.s-ranges { border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; }
.s-ranges .hd { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px;
  padding: 10px 14px; background: var(--s-surface); border-bottom: 1px solid var(--s-line); }
.s-ranges .hd span { font: 500 9.5px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em; text-transform: uppercase; color: var(--s-3); }
.s-ranges .rw { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--s-hair); }
.s-ranges .rw:last-child { border-bottom: 0; }
.s-ranges .rw b { font: 400 12.5px 'Inter', sans-serif; color: var(--s-text); font-weight: 400; }
.s-ranges .rw i { font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal; color: var(--s-ink); }
.s-fine { font: 400 10.5px/1.5 'Inter', sans-serif; color: var(--s-3); margin: 10px 0 0; }

/* ── Mobile browse sheet trigger ─────────────────────────────────────────── */
.s-browse { display: none; }
@media (max-width: 1023px) {
  .s-browse { display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--s-line); border-radius: 999px; background: #fff;
    color: var(--s-text); font: 500 11.5px 'Inter', sans-serif; padding: 8px 14px; cursor: pointer; }
  .s-h1 { font-size: 26px; letter-spacing: -.9px; }
  .s-empty h1 { font-size: 26px; letter-spacing: -.9px; }
}

/* ── /notify.php ─────────────────────────────────────────────────────────────
   The waitlist page. What we already know is shown back read-only; the only
   input is the number. */
.s-known { display: flex; flex-direction: column; gap: 1px; background: var(--s-line);
  border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; }
.s-known-row { position: relative; background: #fff; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; }
.s-known-row strong { font: 600 14px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--s-ink); }
.s-known-row strong.none { color: var(--s-3); font-weight: 500; }
.s-known-row small { font: 400 11px 'Inter', sans-serif; color: var(--s-2); }
.s-chg { position: absolute; top: 12px; right: 12px; border: 1px solid var(--s-line);
  background: #fff; border-radius: 999px; padding: 5px 11px;
  font: 500 11px 'Inter', sans-serif; color: var(--s-text); cursor: pointer; }
.s-chg:hover { border-color: var(--s-ink); color: var(--s-ink); }
.s-msg { font: 400 12px 'Inter', sans-serif; margin: 10px 0 0; }
.s-msg.ok  { color: var(--s-ok); }
.s-msg.bad { color: #b42318; }

/* The unserved notice on services.php — a short prompt now, because the form it
   used to hold lives on /notify.php. */
.s-notice { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--s-line); border-radius: 12px; padding: 18px 20px; background: #fff; }
.s-notice > div { flex: 1; min-width: 240px; }
.s-notice b { display: block; font: 600 15px 'Manrope', sans-serif;
  letter-spacing: -.02em; color: var(--s-ink); margin-bottom: 4px; }
.s-notice p { font: 400 12.5px/1.55 'Inter', sans-serif; color: var(--s-2); margin: 0; }
.s-notice .s-add { flex: none; text-decoration: none; text-align: center; padding: 11px 20px; }

/* The notice sat flush against the first row of cards — it is a separate thought
   and needs the same air the rest of the column has. */
.s-notice { margin-bottom: 20px; }

/* Joined-the-waitlist state. Reads as done rather than as a disabled control. */
.s-add.done { background: var(--s-hair); color: var(--s-ok); cursor: default; }
.s-add:disabled { opacity: .75; cursor: default; }

/* The page container. The breadcrumb used to live in the old max-w-7xl wrapper
   while the columns below it moved to this grid, so it started further left than
   everything under it. One container now, one left edge. */
.s-page { max-width: 1240px; margin: 0 auto; padding: 16px 32px 0; }
.s-page > nav:first-child {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.s-page .s-wrap { padding-left: 0; padding-right: 0; }
@media (max-width: 1023px) { .s-page { padding: 12px 16px 0; } }

/* Rail rows carry a 48px thumb again, as on the live site. */
.s-rail-list a > span:first-child { width: 48px; height: 48px; border-radius: 12px; }

/* Chosen slot, under the card. Quiet by design — 4b keeps it to one small line
   rather than growing the button. */
.s-slot { display: flex; align-items: center; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--s-hair);
  font: 400 11px 'Inter', sans-serif; color: var(--s-2); }
.s-slot svg { width: 12px; height: 12px; flex: none; color: var(--s-3); }
.s-slot span { flex: 1; min-width: 0; }
.s-slot button { flex: none; border: 0; background: none; padding: 0;
  font: 500 11px 'Inter', sans-serif; color: var(--s-ink);
  cursor: pointer; text-decoration: underline; }

/* ── Guides under the FAQ ────────────────────────────────────────────────────
   Small cards, three across, below the answers rather than beside the prices —
   someone reads these after the page has made its case, not instead of it. */
.s-more { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--s-line); }
.s-more .s-h2 { margin-bottom: 4px; }
.s-more-sub { font: 400 12.5px/1.55 'Inter', sans-serif; color: var(--s-2); margin: 0 0 16px; }
.s-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.s-gcard { display: flex; flex-direction: column; gap: 7px; padding: 16px;
  border: 1px solid var(--s-line); border-radius: 12px; background: #fff; text-decoration: none; }
.s-gcard:hover { border-color: var(--s-ink); }
.s-gcard .k { font: 500 9.5px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em; text-transform: uppercase; color: var(--s-3); }
.s-gcard .t { font: 600 14px/1.35 'Manrope', sans-serif; letter-spacing: -.018em; color: var(--s-ink); }
.s-gcard .go { margin-top: auto; padding-top: 4px;
  font: 500 11px 'Inter', sans-serif; color: var(--s-ink); }
@media (max-width: 560px) { .s-more-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ── /notify.php layout + mobile (design 4f, mobile from 4g) ─────────────────
   Desktop: form leads, ranges sit beside it. Mobile: one column, form first —
   someone on a phone came to leave a number, not to read a price table, so the
   table follows rather than pushing the form below the fold. */
.s-empty { gap: 40px; }
.s-empty > div:first-child { max-width: 620px; }

/* Trust row — the three promises the rest of the site makes, restated where
   someone is deciding whether to hand over a number. */
.s-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.s-trust div { border: 1px solid var(--s-line); border-radius: 12px; padding: 14px; background: #fff; }
.s-trust b { display: block; font: 600 12.5px 'Manrope', sans-serif; letter-spacing: -.02em;
  color: var(--s-ink); margin-bottom: 3px; }
.s-trust span { font: 400 11px/1.5 'Inter', sans-serif; color: var(--s-2); }

/* What happens next — answers the question the button raises. */
.s-steps { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.s-steps li { list-style: none; display: flex; gap: 11px; align-items: flex-start; }
.s-steps ol { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.s-steps i { flex: none; width: 21px; height: 21px; border-radius: 999px; background: var(--s-ink);
  color: #fff; font: 600 10.5px/21px 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal; text-align: center; }
.s-steps b { display: block; font: 600 12.5px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--s-ink); }
.s-steps span { font: 400 11.5px/1.5 'Inter', sans-serif; color: var(--s-2); }

@media (max-width: 900px) {
  .s-empty { gap: 26px; }
  .s-empty h1 { font-size: 25px; letter-spacing: -.8px; }
  .s-empty .lede { font-size: 13px; }
  .s-form { padding: 16px; border-radius: 12px; }
  .s-form .go { flex-direction: column; align-items: stretch; gap: 10px; }
  .s-form .go button { width: 100%; padding: 13px 18px; font-size: 13.5px; }
  .s-form .go small { text-align: center; }
  .s-trust { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .s-trust div { padding: 12px 14px; }
  /* The ranges table is reference material on a phone — keep it, shrink it. */
  .s-ranges .hd, .s-ranges .rw { padding: 10px 12px; }
  .s-ranges .rw b { font-size: 12px; }
  .s-ranges .rw i { font-size: 11.5px; }
  .s-chg { position: static; align-self: flex-start; margin-top: 6px; }
  .s-known-row { padding: 12px; }
}

/* notify.php right column: ranges, guides, and the pro pitch stacked. */
.s-side { display: flex; flex-direction: column; gap: 22px; }
.s-side-links { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.s-side-links a { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--s-line); border-radius: 12px; background: #fff; text-decoration: none; }
.s-side-links a:hover { border-color: var(--s-ink); }
.s-side-links .k { flex: none; font: 500 9px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em; text-transform: uppercase; color: var(--s-3); }
.s-side-links .t { flex: 1; min-width: 0; font: 500 12px/1.4 'Inter', sans-serif; color: var(--s-ink); }
.s-side-links .a { flex: none; color: var(--s-3); }

.s-pro { border: 1px solid var(--s-line); border-radius: 12px; padding: 16px; background: var(--s-surface); }
.s-pro b { display: block; font: 600 13px 'Manrope', sans-serif; letter-spacing: -.02em;
  color: var(--s-ink); margin-bottom: 5px; }
.s-pro span { display: block; font: 400 11.5px/1.55 'Inter', sans-serif; color: var(--s-2); margin-bottom: 10px; }
.s-pro a { font: 500 11.5px 'Inter', sans-serif; color: var(--s-ink); text-decoration: none; }
.s-pro a:hover { text-decoration: underline; }

/* On a phone the whole right column follows the form, in this order: what it
   costs, then what to read, then the pro pitch. */
@media (max-width: 900px) { .s-side { gap: 18px; } }

/* ── notify.php: give the form the weight ────────────────────────────────────
   Everything on this page exists to get one number typed. The form was the same
   flat card as the trust tiles and the pro pitch, so nothing told the eye where
   to start. It now sits on white with an ink border and a little lift, and the
   supporting blocks step back onto the page surface. */
.s-empty .s-form {
  border: 1.5px solid var(--s-ink); border-radius: 12px; padding: 22px;
  background: #fff; box-shadow: 0 6px 22px -14px rgba(17,17,17,.45);
}
.s-empty .s-form h2 { font-size: 17px; letter-spacing: -.4px; margin-bottom: 16px; }
.s-trust div, .s-pro { background: var(--s-surface); }
.s-steps, .s-trust { opacity: .92; }

/* A rule between the two columns, so the supporting material reads as beside the
   form rather than as more of it. */
/* A rule between the columns. Done as a border on the side column rather than a
   grid pseudo-element — the pseudo-element competed with the explicit children for
   grid placement and silently collapsed. */
@media (min-width: 901px) {
  /* Wider side column, pulled left. At 340px with 64px of offset it sat hard
     against the right edge with a gulf beside the form. */
  .s-empty { grid-template-columns: minmax(0, 1fr) 392px; gap: 0; }
  .s-side { border-left: 1px solid var(--s-line); padding-left: 26px; margin-left: 26px; }
}

/* Side links: title and arrow only. */
.s-side-links a { padding: 11px 13px; }
.s-side-links .t { font-size: 12.5px; }

/* ── Mobile: fewer, shorter, straighter ──────────────────────────────────── */
@media (max-width: 900px) {
  .s-empty { gap: 20px; }
  .s-empty h1 { font-size: 23px; line-height: 1.15; letter-spacing: -.7px; }
  .s-empty .lede { font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; }
  .s-empty .s-form { padding: 16px; box-shadow: none; }
  .s-empty .s-form h2 { font-size: 15px; margin-bottom: 12px; }
  .s-known-row { padding: 10px 12px; }
  .s-known-row strong { font-size: 13px; }

  /* Steps lose the numbered circles and become one tight list. */
  .s-steps { margin-top: 16px; gap: 8px; }
  .s-steps ol { gap: 8px; }
  .s-steps i { width: 18px; height: 18px; line-height: 18px; font-size: 9.5px; }
  .s-steps b { font-size: 12px; }
  .s-steps span { font-size: 11px; line-height: 1.45; }

  /* Trust collapses to one line each — three cards of prose is a lot of scroll
     for something nobody reads twice. */
  .s-trust { margin-top: 16px; gap: 0; border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; }
  .s-trust div { border: 0; border-bottom: 1px solid var(--s-hair); border-radius: 0; padding: 10px 13px; background: #fff; }
  .s-trust div:last-child { border-bottom: 0; }
  .s-trust b { display: inline; font-size: 12px; }
  .s-trust span { display: inline; font-size: 11px; }
  .s-trust b::after { content: " — "; color: var(--s-3); font-weight: 400; }

  .s-side { gap: 16px; }
  .s-side-links a { padding: 10px 12px; }
  .s-pro { padding: 14px; }
}

/* ── notify.php: 5a accordions + 5c states ──────────────────────────────── */
.s-acc summary { list-style: none; cursor: default; display: flex; align-items: center; gap: 8px; }
.s-acc summary::-webkit-details-marker { display: none; }
.s-acc summary i { display: none; }

/* Submitted (5c). Replaces the form rather than sitting under it. */
.s-done { border: 1px solid var(--s-line); border-radius: 12px; padding: 22px; background: #fff; }
.s-tick { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: var(--s-ok); color: #fff; font-size: 16px; margin-bottom: 12px; }
.s-done h2 { font: 600 23px/1.15 'Manrope', sans-serif; letter-spacing: -.8px; color: var(--s-ink); margin: 0 0 8px; }
.s-done p { font: 400 13px/1.55 'Inter', sans-serif; color: var(--s-text); margin: 0 0 16px; }
.s-recap { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--s-hair); }
.s-recap div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.s-recap span { font: 400 11.5px 'Inter', sans-serif; color: var(--s-2); }
.s-recap b { font: 500 12.5px 'Inter', sans-serif; color: var(--s-ink); text-align: right; }

@media (max-width: 900px) {
  /* 5a: reference material collapses; the form is the only thing open. */
  .s-acc { border: 1px solid var(--s-line); border-radius: 12px; background: #fff; }
  .s-acc summary { padding: 14px 15px; cursor: pointer;
    font: 500 12.5px 'Inter', sans-serif; color: var(--s-ink); justify-content: space-between; }
  .s-acc summary i { display: block; width: 12px; height: 12px; position: relative; flex: none; }
  .s-acc summary i::before, .s-acc summary i::after { content: ""; position: absolute;
    background: var(--s-3); left: 0; top: 5px; width: 12px; height: 2px; }
  .s-acc summary i::after { transform: rotate(90deg); transition: transform .18s; }
  .s-acc[open] summary i::after { transform: rotate(0deg); }
  .s-acc > *:not(summary) { padding: 0 15px 15px; margin-top: 0 !important; }
  .s-acc .s-fine { padding: 0; }
  .s-acc .s-label { text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif;
    font-size: 12.5px; color: var(--s-ink); font-weight: 500; }

  /* 5a cuts the pro panel on a phone — it is in the footer already. */
  .s-pro { display: none; }

  /* One line instead of three cards. */
  .s-trust { display: block; border: 0; padding: 0; margin-top: 14px; }
  .s-trust div { display: inline; border: 0; padding: 0; background: none; }
  .s-trust b { display: inline; font: 400 11px 'Inter', sans-serif; color: var(--s-2); }
  .s-trust b::after { content: ""; }
  .s-trust span { display: none; }
  .s-trust div + div b::before { content: " · "; color: var(--s-3); }

  .s-done { padding: 18px; }
  .s-done h2 { font-size: 21px; }
  .s-tick { width: 30px; height: 30px; }
}

/* ── Rail: back to the live panel, wider ─────────────────────────────────── */
.s-wrap { grid-template-columns: 276px minmax(0, 1fr); }
.s-rail { padding: 0; overflow: hidden; }
.s-rail-hd { padding: 13px 15px; border-bottom: 1px solid #E6E9EF; background: #F7F8FA; }
.s-rail-hd .s-label { display: block; margin-bottom: 3px; }
.s-rail-hd p { margin: 0; font: 600 13.5px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--s-ink); }
.s-rail .s-rail-list { padding: 7px; gap: 1px; }
.s-rail .s-back { padding: 11px 15px; border-top: 1px solid var(--s-hair); }
@media (max-width: 1023px) { .s-wrap { grid-template-columns: minmax(0, 1fr); } }

/* Desktop keeps the reference blocks open; only a phone collapses them (5a). */
@media (min-width: 901px) {
  .s-acc > *:not(summary) { display: block; }
}

/* ── notify.php mobile bar (5a) ──────────────────────────────────────────── */
.s-mbar { display: none; }
@media (max-width: 900px) {
  .s-mbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--s-line); background: #fff;
    position: sticky; top: 0; z-index: 30; }
  .s-mbar a { font: 500 11.5px 'Inter', sans-serif; color: var(--s-text); text-decoration: none;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .s-mbar span { flex: none; font: 600 13px 'Manrope', sans-serif; letter-spacing: -.3px; color: var(--s-ink); }
}