/* ============================================================================
   Marginary — marketing site layer
   Sits on top of css/app.css. Every colour, radius, shadow and font here
   resolves to an app.css token, so the marketing site re-themes with the
   product from the same two brand lines in app.css.

   Nothing in this file redefines an app component. Marketing-only classes
   are prefixed .s- (site) or named for the section they build.
   ========================================================================= */

/* ── SITE-ONLY SCALE ─────────────────────────────────────────────────────── */
:root {
  --s-max: 1200px;          /* content measure — narrower than the app canvas */
  --s-pad: 28px;
  --s-gap: 28px;
  --s-sec: 104px;           /* vertical rhythm between sections */
  --s-header-h: 68px;
  /* One derived hairline that reads on both themes without a second token. */
  --s-rule: rgba(var(--txt), .10);
  --s-quiet: color-mix(in srgb, var(--md-surface) 55%, var(--md-bg));
}
:root[data-theme="dark"] {
  --s-rule: rgba(var(--txt), .13);
}

/* Marketing pages are a document, not an app shell — scroll normally. */
body.s-body { background: var(--md-bg); }

.s-wrap { max-width: var(--s-max); margin: 0 auto; padding-inline: var(--s-pad); width: 100%; }
.s-wrap--narrow { max-width: 840px; }

.s-sec { padding-block: var(--s-sec); }
.s-sec--tight { padding-block: 72px; }
.s-sec--alt { background: var(--md-surface); border-block: 1px solid var(--s-rule); }

/* ── TYPE ────────────────────────────────────────────────────────────────── */
.s-display {
  font-size: clamp(38px, 6.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
  color: var(--fg-high);
  text-wrap: balance;
}
.s-h2 {
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -.026em;
  font-weight: 700;
  color: var(--fg-high);
  text-wrap: balance;
}
.s-h3 {
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--fg-high);
}
.s-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.58;
  color: var(--fg-med);
  max-width: 60ch;
}
.s-body-text { font-size: 16px; line-height: 1.62; color: var(--fg-med); max-width: 66ch; }
.s-body-text + .s-body-text { margin-top: 14px; }
.s-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-sub);
}
.s-eyebrow--accent { color: var(--tonal-primary-fg); }
.s-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.s-note { font-size: 13px; color: var(--fg-sub); line-height: 1.55; }
/* 13px links in --md-primary sit at ~4.4:1 on surface — under the 4.5 gate for
   small text. The tonal token is the design system's darkened text variant. */
.s-note a, .s-faq-a a, .s-body-text a {
  color: var(--tonal-primary-fg); text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.s-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--s-header-h);
  background: color-mix(in srgb, var(--md-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.s-header.is-stuck { border-bottom-color: var(--s-rule); }
.s-header-in {
  height: 100%; display: flex; align-items: center; gap: 8px;
  max-width: var(--s-max); margin: 0 auto; padding-inline: var(--s-pad);
}
.s-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; margin-right: 12px; }
.s-brand:hover { text-decoration: none; }
.s-brand-mark {
  width: 30px; height: 30px; flex-shrink: 0; display: block;
}
.s-brand-mark img { width: 100%; height: 100%; display: block; }
.s-brand-name {
  font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--fg-high);
}
.s-nav { display: flex; align-items: center; gap: 2px; }
.s-nav a {
  padding: 8px 13px; border-radius: var(--r); font-size: 14.5px; font-weight: 500;
  color: var(--fg-med); transition: background-color .15s ease, color .15s ease;
}
.s-nav a:hover { background: rgba(var(--txt), var(--s-hover)); color: var(--fg-high); text-decoration: none; }
.s-nav a[aria-current="page"] { color: var(--fg-high); background: rgba(var(--txt), var(--s-hover)); }
.s-header-spacer { flex: 1; }
.s-header-cta { display: flex; align-items: center; gap: 8px; }
.s-burger { display: none; }

/* mobile disclosure sheet */
.s-mobile-nav {
  display: none;
  position: fixed; inset: var(--s-header-h) 0 auto 0; z-index: 59;
  background: var(--md-surface); border-bottom: 1px solid var(--s-rule);
  box-shadow: var(--sh-lg); padding: 12px var(--s-pad) 20px;
}
.s-mobile-nav.is-open { display: block; }
.s-mobile-nav a {
  display: block; padding: 14px 4px; font-size: 16px; font-weight: 500;
  color: var(--fg-high); border-bottom: 1px solid var(--s-rule);
}
.s-mobile-nav a:last-of-type { border-bottom: 0; }
.s-mobile-nav .btn { margin-top: 14px; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.s-hero { padding-block: clamp(52px, 8vw, 96px) 0; }
.s-hero-grid {
  display: grid; gap: clamp(36px, 5vw, 56px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: start;
}
.s-hero-copy > * + * { margin-top: 20px; }
.s-hero .s-display { margin-top: 16px; }
.s-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* capability strip — facts, not logos. There is no social proof to show. */
.s-caps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--s-rule);
}
.s-cap {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--fg-sub); font-weight: 500;
}
.s-cap svg { width: 16px; height: 16px; color: var(--tonal-primary-fg); }

/* ── DECISION SPECIMEN — the signature element ───────────────────────────── */
.s-log { display: flex; flex-direction: column; gap: 12px; }
.s-log-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin-bottom: 2px;
}
.dec {
  background: var(--md-surface); border-radius: var(--r);
  box-shadow: var(--sh-md); padding: 18px 20px 16px;
  position: relative;
}
.dec-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.dec-time { font-size: 12px; color: var(--fg-sub); margin-left: auto; font-family: var(--font-mono); }
.dec-sentence {
  font-size: 15.5px; line-height: 1.58; color: var(--fg-high); text-wrap: pretty;
}
.dec-sentence b {
  font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .95em; letter-spacing: -.01em;
}
.dec-sentence .why-clause {
  /* the clause that explains the move — tinted, not bolded, so the sentence
     still reads as one sentence rather than a list of highlighted keywords */
  background: rgba(var(--md-info-rgb), .12);
  border-radius: var(--r-xs); padding: 1px 4px; margin: 0 -1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.dec-facts {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px;
  padding-top: 13px; border-top: 1px solid var(--s-rule);
}

/* ── FEATURE ROWS ────────────────────────────────────────────────────────── */
.s-feat {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--s-rule);
}
.s-feat:first-of-type { border-top: 0; padding-top: 8px; }
.s-feat--flip .s-feat-media { order: -1; }
.s-feat-n {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--tonal-primary-fg); letter-spacing: .06em;
}
.s-feat-copy .s-h3 { margin: 10px 0 12px; }
.s-feat-media { min-width: 0; }

/* small in-page product fragments used as feature media */
.frag {
  background: var(--md-surface); border-radius: var(--r); box-shadow: var(--sh-md);
  padding: 18px; overflow: hidden;
}
.frag-title {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-sub); margin-bottom: 14px;
}
.frag-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--s-rule); font-size: 14px;
}
.frag-row:last-child { border-bottom: 0; }
.frag-row .n { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-high); font-weight: 600; }

/* floor diagram — the price line and the line it cannot cross */
.floor-chart { width: 100%; height: 190px; display: block; overflow: visible; }
.floor-chart .grid-line { stroke: var(--s-rule); stroke-width: 1; }
.floor-chart .price-line { stroke: var(--md-primary); stroke-width: 2.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.floor-chart .price-fill { fill: rgba(var(--md-primary-rgb), .10); }
.floor-chart .floor-line { stroke: var(--md-error); stroke-width: 2; stroke-dasharray: 5 4; }
.floor-chart .ceil-line { stroke: var(--fg-dis); stroke-width: 1.5; stroke-dasharray: 3 4; }
.floor-chart .lbl { font-size: 11px; font-family: var(--font-mono); fill: var(--fg-sub); }
.floor-chart .lbl-floor { fill: var(--tonal-error-fg); font-weight: 600; }

/* profit curve — undercutting vs the peak */
.curve-chart { width: 100%; height: 200px; display: block; overflow: visible; }
.curve-chart .curve { stroke: var(--md-primary); stroke-width: 2.4; fill: none; }
.curve-chart .curve-fill { fill: rgba(var(--md-primary-rgb), .10); }
.curve-chart .marker { stroke-width: 1.5; stroke-dasharray: 4 3; }
.curve-chart .m-peak { stroke: var(--md-success); }
.curve-chart .m-under { stroke: var(--fg-dis); }
.curve-chart .lbl { font-size: 11px; font-family: var(--font-mono); fill: var(--fg-sub); }
.curve-chart .lbl-peak { fill: var(--tonal-success-fg); font-weight: 600; }

/* ── LIMIT / GUARDRAIL GRID ──────────────────────────────────────────────── */
.s-limits { display: grid; gap: 1px; background: var(--s-rule); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-limit { background: var(--md-surface); padding: 22px; }
.s-limit h4 { font-size: 15.5px; font-weight: 600; color: var(--fg-high); margin-bottom: 6px; }
.s-limit p { font-size: 14.5px; color: var(--fg-med); line-height: 1.55; }
.s-limit--locked { background: var(--s-quiet); }
.s-locked-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tonal-error-fg); background: rgba(var(--md-error-rgb), var(--s-active));
  padding: 3px 8px; border-radius: var(--r-xs); margin-bottom: 10px;
}
.s-locked-tag svg { width: 12px; height: 12px; }

/* ── STEPS ───────────────────────────────────────────────────────────────── */
.s-steps { display: grid; gap: 0; counter-reset: step; }
.s-step {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--s-rule);
}
.s-step:first-child { border-top: 0; }
.s-step-n {
  width: 44px; height: 44px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  background: rgba(var(--md-primary-rgb), var(--s-active)); color: var(--tonal-primary-fg);
}
.s-step h3 { font-size: 18px; font-weight: 600; color: var(--fg-high); margin-bottom: 6px; }
.s-step p { font-size: 15px; color: var(--fg-med); line-height: 1.6; max-width: 62ch; }
.s-step--last .s-step-n { background: rgba(var(--md-success-rgb), var(--s-active)); color: var(--tonal-success-fg); }

/* ── PRICING ─────────────────────────────────────────────────────────────── */
.s-plans { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plan {
  background: var(--md-surface); border-radius: var(--r); box-shadow: var(--sh-md);
  padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.plan--featured { box-shadow: var(--sh-xl); outline: 2px solid var(--md-primary); outline-offset: -2px; }
.plan-tag {
  position: absolute; top: -11px; left: 22px;
  background: var(--fill-primary); color: var(--on-accent);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-xs);
}
.plan-name { font-size: 16px; font-weight: 600; color: var(--fg-high); }
.plan-price {
  font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--fg-high);
  letter-spacing: -.03em; line-height: 1.1; margin-top: 10px;
}
.plan-price small { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--fg-sub); letter-spacing: 0; }
.plan-items {
  font-family: var(--font-mono); font-size: 15px; color: var(--fg-high); font-weight: 600;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--s-rule);
}
.plan-items span { display: block; font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--fg-sub); margin-top: 3px; }
.plan-live { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; margin-top: 14px; color: var(--fg-med); }
.plan-live svg { width: 17px; height: 17px; }
.plan-live--yes svg { color: var(--tonal-success-fg); }
.plan-live--no svg { color: var(--fg-dis); }
.plan .btn { margin-top: auto; }
.plan-foot { margin-top: 18px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.s-faq { border-top: 1px solid var(--s-rule); }
.s-faq details { border-bottom: 1px solid var(--s-rule); }
.s-faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 17px; font-weight: 500; color: var(--fg-high); letter-spacing: -.01em;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border-right: 2px solid var(--fg-sub); border-bottom: 2px solid var(--fg-sub);
  transform: rotate(45deg); transition: transform .2s ease;
}
.s-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.s-faq summary:hover { color: var(--tonal-primary-fg); }
.s-faq .s-faq-a { padding: 0 60px 24px 0; font-size: 15.5px; line-height: 1.62; color: var(--fg-med); max-width: 72ch; }

/* ── CLOSING CTA ─────────────────────────────────────────────────────────── */
.s-close { text-align: center; }
.s-close .s-h2 { margin: 0 auto 16px; max-width: 20ch; }
.s-close .s-lead { margin: 0 auto 28px; text-align: center; }
.s-close .s-cta-row { justify-content: center; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.s-foot { border-top: 1px solid var(--s-rule); padding-block: 52px 40px; background: var(--md-surface); }
.s-foot-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.s-foot h5 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-sub); margin-bottom: 14px; }
.s-foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.s-foot li a { font-size: 14.5px; color: var(--fg-med); }
.s-foot li a:hover { color: var(--fg-high); }
.s-foot-bar {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--s-rule);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 13px; color: var(--fg-sub);
}
.s-foot-bar .spacer { flex: 1; }

/* ── AUTH / SIGNUP ───────────────────────────────────────────────────────── */
.s-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 56px; align-items: start; padding-block: clamp(44px, 6vw, 72px); }
.s-auth-card { background: var(--md-surface); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 30px; }
.s-auth-card .field + .field { margin-top: 18px; }
.s-auth-card .btn { margin-top: 24px; }
.s-field-err { font-size: 13px; color: var(--tonal-error-fg); font-weight: 500; display: none; }
.field.is-bad .input { border-color: var(--md-error); box-shadow: 0 0 0 1px var(--md-error); }
.field.is-bad .s-field-err { display: block; }
.s-auth-aside > * + * { margin-top: 22px; }
.s-tick { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--fg-med); line-height: 1.55; }
.s-tick svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--tonal-success-fg); margin-top: 1px; }
.s-tick b { color: var(--fg-high); font-weight: 600; }

/* ── DECISION LOG PAGE ───────────────────────────────────────────────────── */
.s-log-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.s-log-list { display: flex; flex-direction: column; gap: 14px; }
.s-log-empty { display: none; padding: 40px 0; text-align: center; color: var(--fg-sub); font-size: 15px; }
.s-log-empty.is-on { display: block; }

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
.s-hr { border: 0; border-top: 1px solid var(--s-rule); margin-block: 0; }
.s-center { text-align: center; }
.s-mt-0 { margin-top: 0; }
.s-sec-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 48px); }
.s-sec-head .s-h2 { margin: 12px 0 14px; }
.s-sec-head--center { margin-inline: auto; text-align: center; }
.s-sec-head--center .s-lead { margin-inline: auto; }
.s-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--fill-primary); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--r); z-index: 100; font-weight: 500;
}
.s-skip:focus { left: 12px; top: 12px; text-decoration: none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .s-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --s-sec: 76px; }
  .s-nav { display: none; }
  .s-burger { display: grid; }
  /* every header link lives in the sheet below 900px — leaving the CTA in the
     bar pushed the burger off-canvas at 360px */
  .s-header-cta .btn { display: none; }
  .s-hero-grid { grid-template-columns: 1fr; }
  .s-feat, .s-feat--flip { grid-template-columns: 1fr; gap: 26px; }
  .s-feat--flip .s-feat-media { order: 0; }
  .s-auth { grid-template-columns: 1fr; gap: 34px; }
  .s-auth-aside { order: -1; }
}
@media (max-width: 640px) {
  :root { --s-pad: 18px; --s-sec: 62px; }
  .s-limits { grid-template-columns: 1fr; }
  .s-plans { grid-template-columns: 1fr; }
  .s-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .s-step { grid-template-columns: 1fr; gap: 12px; }
  .s-faq summary { font-size: 16px; padding-right: 36px; }
  .s-faq .s-faq-a { padding-right: 0; }
  .s-cta-row .btn { width: 100%; justify-content: center; }
  .s-close .s-cta-row .btn { width: 100%; }
  .dec { padding: 16px 16px 14px; }
}
@media (max-width: 380px) {
  .plan-price { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-header, .s-faq summary::after { transition: none; }
}

/* ── COMPARISON TABLE ────────────────────────────────────────────────────────
   The headline claims only two rows ever change, so the table has to show it:
   the two capacity rows carry weight and colour, the nine constant rows drop
   to a muted tick. Repeating "Yes" 36 times says the opposite. */
/* the marketing pages have no app shell, so nothing gives <main> the min-width:0
   that stops a wide .table-wrap from scrolling the whole page sideways.
   `clip` rather than `hidden`: it doesn't create a scroll container, so the
   sticky header and the table's own horizontal scroll both still work. */
.s-body main { min-width: 0; overflow-x: clip; }

/* Not position:absolute — an absolutely positioned sr-only span inside a
   horizontally scrolled table escapes the clip and drags the whole page
   sideways, because its containing block is the viewport, not the cell. */
.s-sr {
  display: inline-block; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
table.s-cmp th[scope="row"] {
  text-align: left; padding: 14px 16px; font-size: 14px; font-weight: 400;
  color: var(--fg-med); border-bottom: 1px solid var(--border);
  background: var(--md-surface);
}
table.s-cmp tbody tr:last-child th[scope="row"] { border-bottom: 0; }
table.s-cmp .s-cmp-tick { color: var(--fg-sub); }
table.s-cmp .s-cmp-tick svg { width: 18px; height: 18px; }

/* the two rows that actually differ between plans */
table.s-cmp tr.s-cmp-var th[scope="row"],
table.s-cmp tr.s-cmp-var td { background: var(--s-quiet); font-weight: 600; color: var(--fg-high); }
table.s-cmp tr.s-cmp-num td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.s-cmp .s-cmp-no  { color: var(--fg-sub); font-weight: 500; }
table.s-cmp .s-cmp-yes { color: var(--tonal-success-fg); font-weight: 600; }
.s-cmp-hint { display: none; }

@media (max-width: 760px) {
  /* the row label has to stay put or the ticks lose their question */
  table.s-cmp th[scope="row"] {
    position: sticky; left: 0; z-index: 1;
    box-shadow: 1px 0 0 var(--border);
    min-width: 200px; white-space: normal;
  }
  table.s-cmp tr.s-cmp-var th[scope="row"] { background: var(--s-quiet); }
  .s-cmp-hint { display: block; }
}

/* ── PLAN PICKER ─────────────────────────────────────────────────────────── */
.plan { transition: box-shadow .18s ease, outline-color .18s ease; outline: 2px solid transparent; outline-offset: -2px; }
.plan--featured { outline-color: var(--md-primary); }
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } }

/* ── Signed-in header ───────────────────────────────────────────────────────
   Set by the inline script in <head> from the cookie the dashboard leaves on the
   shared parent domain. No class means signed out, which is what a visitor with
   no cookie, no JavaScript or a stale cache gets -- the safe way round. */
html:not(.session-in) .s-when-in,
html.session-in .s-when-out { display: none !important; }