/* Stick On Me shared page styles. Single light theme on purpose.
   Every page except the home hero links this file. Font: Plus Jakarta Sans only (linked in each page head).
   The identity, its rules and its contrast table live in site/design/brand.md. Board: site/design/brand-board.html.
   Idea: a die-cut sticker on skin. Cyan is the sticker, deep teal is the link, coral is taken or urgent, ink does the talking. */
:root{
  /* ink and neutrals, slight blue bias. ink-2 and ink-3 are solid so contrast holds on every ground */
  --ink:#0b1220; --ink-2:#3a4557; --ink-3:#5a6679;
  --paper:#ffffff; --wash:#f2f7fb; --mist:#e4eef6; --slate:#e8edf3; --card:#ffffff;
  --line:rgba(10,120,158,.17); --line-2:rgba(11,18,32,.10); --line-3:rgba(11,18,32,.22);
  /* the sticker: cyan is a surface, never text on white */
  --cyan:#6fe3ff; --cyan-hi:#b0f0ff; --cyan-tint:#dcf7ff; --cyan-ink:#04222e;
  /* links and quiet brand */
  --deep:#0a789e; --deeper:#065f7e;
  /* taken and urgent only. Text on coral is --coral-ink. Never coral text on white */
  --coral:#ff6b57; --coral-hi:#ff8a7a; --coral-tint:#ffe5e0; --coral-ink:#3b0d06; --coral-deep:#b8321f;
  /* status */
  --ok:#0f7a52; --ok-tint:#e2f5ec; --ok-deep:#0b5a3b;
  --warn:#8a5a00; --warn-tint:#fff2d1; --warn-deep:#6b4600;
  --err:#b3261e; --err-tint:#fdecea; --err-deep:#8a1c14;
  /* shape */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* elevation */
  --e1:0 1px 2px rgba(11,18,32,.05);
  --e2:0 1px 2px rgba(11,18,32,.05),0 10px 26px -10px rgba(10,70,100,.22);
  --e3:0 18px 44px rgba(11,18,32,.16),0 2px 8px rgba(11,18,32,.06);
  --e-sticker:drop-shadow(0 0 .5px rgba(11,18,32,.45)) drop-shadow(0 1px 1px rgba(11,18,32,.16)) drop-shadow(0 3px 4px rgba(11,18,32,.14));
  --e-sticker-up:drop-shadow(0 0 .5px rgba(11,18,32,.45)) drop-shadow(0 3px 2px rgba(11,18,32,.14)) drop-shadow(0 8px 10px rgba(11,18,32,.16));
  --fold:linear-gradient(135deg,#ffffff 15%,#e3edf3 55%,#b7cedb 100%);
  --fold-shade:linear-gradient(135deg,transparent 38%,rgba(4,34,46,.3) 50%,transparent 50.5%);
  /* motion: one lift, one slap */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.15s; --t-lift:.18s;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--deep);text-decoration:none}
a:hover{color:var(--deeper);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
a:not([class]):focus-visible{border-radius:3px}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
::selection{background:var(--cyan-hi);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  a.som-sticker:hover,a.app-card:hover,.som-btn:hover,.som-btn:active,.som-sticker.lift:hover{transform:none!important}}

/* the wordmark: STICK ON in tracked ink caps, ME on a die-cut sticker.
   Markup stays <a class="som-logo">STICK ON <b>ME</b></a>. The sticker body, keyline and peel are drawn here.
   b::before is the sticker (cyan fill, white keyline, corner cut), b::after is the folded-back corner,
   the filter on b is the contact shadow and follows the real shape. Add .rev on dark grounds, .mono for one colour. */
.som-logo{--peel:.46em;display:inline-flex;align-items:center;gap:.5em;font-weight:800;font-size:16px;line-height:1;letter-spacing:.05em;color:var(--ink);white-space:nowrap;padding:.3em .25em .3em 0}
.som-logo:hover{text-decoration:none;color:var(--ink)}
.som-logo b{position:relative;isolation:isolate;display:inline-block;color:var(--cyan-ink);font-weight:800;letter-spacing:.03em;padding:.34em .74em .34em .56em;transform:rotate(-4deg);filter:var(--e-sticker);transition:transform var(--t-lift) var(--ease),filter var(--t-lift) var(--ease)}
.som-logo b::before{content:"";position:absolute;inset:0;z-index:-1;box-sizing:border-box;background:var(--fold-shade) right bottom/calc(var(--peel)*2) calc(var(--peel)*2) no-repeat border-box,var(--cyan);border:.13em solid #fff;border-radius:.42em;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--peel)),calc(100% - var(--peel)) 100%,0 100%);transition:clip-path var(--t-lift) var(--ease)}
.som-logo b::after{content:"";position:absolute;right:0;bottom:0;z-index:0;width:var(--peel);height:var(--peel);background:var(--fold);clip-path:polygon(0 0,100% 0,0 100%);transition:width var(--t-lift) var(--ease),height var(--t-lift) var(--ease)}
.som-logo:hover b,.som-logo:focus-visible b{transform:rotate(-2deg) translateY(-1px);filter:var(--e-sticker-up)}
.som-logo:hover,.som-logo:focus-visible{--peel:.62em}
.som-logo.rev,.som-logo.rev:hover{color:#fff}
.som-logo.rev b{filter:none}
.som-logo.mono b{color:#fff}
.som-logo.mono b::before{background:var(--fold-shade) right bottom/calc(var(--peel)*2) calc(var(--peel)*2) no-repeat border-box,var(--ink)}

/* header */
.som-top{background:radial-gradient(130% 70% at 50% 0%,#e4eef7 0%,#f4f8fb 55%,#fff 100%)}
.som-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px clamp(16px,4vw,52px);max-width:1280px;margin:0 auto}
.som-nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);font-size:14px;font-weight:600}
.som-nav a{color:var(--ink-2);padding-block:8px}
.som-nav a:hover{color:var(--ink);text-decoration:none}
.som-nav a[aria-current="page"]{color:var(--ink);box-shadow:0 3px 0 var(--cyan)}
.som-nav .som-join{background:var(--cyan);color:var(--cyan-ink);font-weight:800;padding:10px 18px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(4,34,46,.08),0 1px 1px rgba(11,18,32,.12),0 4px 10px -4px rgba(10,120,158,.45);transition:background-color var(--t-fast),transform var(--t-lift) var(--ease),box-shadow var(--t-lift) var(--ease)}
.som-nav .som-join:hover{background:var(--cyan-hi);color:var(--cyan-ink);transform:translateY(-1px)}
@media (max-width:760px){
  .som-nav{order:3;width:100%;flex-wrap:wrap;gap:4px 18px}
  .som-nav a{padding-block:10px}
  .som-nav .som-join{margin-left:auto}
}

/* layout */
.som-wrap{max-width:1100px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.som-narrow{max-width:740px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.som-section{padding-block:clamp(40px,6vw,76px)}
.som-section.alt{background:var(--wash);border-block:1px solid var(--line)}
.som-crumbs{font-size:13px;color:var(--ink-3);padding-top:clamp(20px,4vw,40px)}
.som-crumbs a{color:var(--ink-3)}
.som-crumbs a:hover{color:var(--deep)}
.som-hero{padding-block:clamp(28px,5vw,56px) clamp(32px,5vw,60px);display:flex;flex-direction:column;gap:18px}
/* eyebrow: sentence case, bold, deep teal, a small cyan tab in front. No tracked caps anywhere */
.som-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--deeper);line-height:1.3}
.som-eyebrow::before{content:"";flex:none;width:14px;height:9px;border-radius:3px;background:var(--cyan);box-shadow:0 0 0 1.5px #fff,0 1px 2px rgba(11,18,32,.25);transform:rotate(-8deg)}
.som-hero h1{font-size:clamp(34px,5.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.04;max-width:18ch}
.som-lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;color:var(--ink-2);max-width:60ch}
.som-h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.som-sub{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.som-stack{display:flex;flex-direction:column;gap:14px}
.som-stack-lg{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}

/* numbers: prices, counts and countdowns never jump */
.som-num{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.som-price{font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.som-price small{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-left:4px}

/* cards, grids */
.som-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.som-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;box-shadow:var(--e1)}
a.som-card{color:inherit;transition:border-color var(--t-fast),box-shadow var(--t-lift) var(--ease),transform var(--t-lift) var(--ease)}
a.som-card:hover{text-decoration:none;color:inherit;border-color:rgba(10,120,158,.42);box-shadow:var(--e2);transform:translateY(-2px)}
.som-card h3{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.som-card p{font-size:15px;line-height:1.6;color:var(--ink-2)}
/* badge: sentence case label. Default quiet teal, .warn for not yet, .ok for open */
.som-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.4;padding:3px 10px;border-radius:var(--r-pill);background:var(--cyan-tint);color:var(--deeper)}
.som-badge.warn{background:var(--warn-tint);color:var(--warn-deep)}
.som-badge.ok{background:var(--ok-tint);color:var(--ok-deep)}
.som-note{font-size:14px;line-height:1.55;color:var(--ink-2);background:var(--wash);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px}

/* the sticker motif. One bold sticker per screen (the logo does not count).
   .som-sticker = cyan die-cut with white keyline, peel corner and contact shadow.
   .coral = taken or urgent, .ink = reversed, .open = an empty outline waiting for a logo, .flat = no tilt. */
.som-sticker{--peel:.5em;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;color:var(--cyan-ink);font-weight:800;letter-spacing:-.01em;line-height:1.15;padding:.5em .95em .52em .85em;transform:rotate(-3deg);filter:var(--e-sticker);transition:transform var(--t-lift) var(--ease),filter var(--t-lift) var(--ease);font-variant-numeric:tabular-nums lining-nums}
.som-sticker::before{content:"";position:absolute;inset:0;z-index:-1;box-sizing:border-box;background:var(--fold-shade) right bottom/calc(var(--peel)*2) calc(var(--peel)*2) no-repeat border-box,var(--cyan);border:3px solid #fff;border-radius:.6em;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--peel)),calc(100% - var(--peel)) 100%,0 100%);transition:clip-path var(--t-lift) var(--ease)}
.som-sticker::after{content:"";position:absolute;right:0;bottom:0;width:var(--peel);height:var(--peel);background:var(--fold);clip-path:polygon(0 0,100% 0,0 100%);transition:width var(--t-lift) var(--ease),height var(--t-lift) var(--ease)}
a.som-sticker:hover,button.som-sticker:hover,.som-sticker.lift:hover{--peel:.7em;transform:rotate(-1.5deg) translateY(-2px);filter:var(--e-sticker-up);text-decoration:none;color:var(--cyan-ink)}
.som-sticker.coral{color:var(--coral-ink)}
.som-sticker.coral::before{background:var(--fold-shade) right bottom/calc(var(--peel)*2) calc(var(--peel)*2) no-repeat border-box,var(--coral)}
.som-sticker.ink{color:#fff}
.som-sticker.ink::before{background:var(--fold-shade) right bottom/calc(var(--peel)*2) calc(var(--peel)*2) no-repeat border-box,var(--ink)}
.som-sticker.open{color:var(--deeper);filter:none}
.som-sticker.open::before{background:rgba(255,255,255,.7);border:2px dashed rgba(10,120,158,.55);clip-path:none}
.som-sticker.open::after{display:none}
.som-sticker.flat{transform:none}
.som-sticker small{font-size:.72em;font-weight:700;opacity:.85}
.som-slap{animation:som-slap .18s var(--ease)}
@keyframes som-slap{from{transform:scale(1.08) rotate(-5deg)}to{transform:scale(1) rotate(-3deg)}}

/* state pills, public side. Same colours as .app-pill in app.css. Coral means taken, nothing else */
.som-state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;line-height:1.5;border-radius:var(--r-pill);padding:2px 10px 2px 8px;background:var(--slate);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.som-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.som-state.open{background:#fff;color:var(--deeper);box-shadow:inset 0 0 0 1.5px rgba(10,120,158,.5)}
.som-state.open::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.som-state.taken{background:var(--coral);color:var(--coral-ink)}
.som-state.booked{background:var(--ok-tint);color:var(--ok-deep)}
.som-state.waiting{background:var(--warn-tint);color:var(--warn-deep)}
.som-state.refunded{background:var(--slate);color:var(--ink-2)}
.som-state.live{background:var(--cyan-tint);color:var(--deeper)}
.som-state.live::before{background:var(--cyan);box-shadow:0 0 0 2px var(--deeper)}
/* close countdown: ink chip, coral once it is under 24 hours */
.som-count{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;line-height:1.4;padding:4px 11px;border-radius:var(--r-pill);background:var(--ink);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.som-count.urgent{background:var(--coral);color:var(--coral-ink)}

/* sequence: use only when order matters */
.som-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:step}
.som-steps li{counter-increment:step;display:grid;grid-template-columns:40px 1fr;gap:4px 14px;align-items:start}
.som-steps li::before{content:counter(step);grid-row:1/3;width:34px;height:34px;border-radius:var(--r-sm);background:var(--cyan-tint);color:var(--deeper);box-shadow:inset 0 0 0 1.5px rgba(10,120,158,.28);font-weight:800;display:grid;place-items:center;font-size:15px;font-variant-numeric:tabular-nums}
.som-steps h3{font-size:17px;font-weight:800;letter-spacing:-.015em;align-self:center}
.som-steps p{font-size:15px;color:var(--ink-2);grid-column:2}

/* buttons. Primary is ink: confident and never competes with the sticker. Ghost is the quiet second action */
.som-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font:700 15px/1.2 var(--font);background:var(--ink);color:#fff;border:1.5px solid transparent;border-radius:var(--r-pill);padding:12px 24px;cursor:pointer;box-shadow:0 1px 1px rgba(11,18,32,.2),0 6px 14px -8px rgba(11,18,32,.5);text-align:center;transition:background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-lift) var(--ease),transform var(--t-lift) var(--ease)}
.som-btn:hover{background:#1c2a40;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 2px 2px rgba(11,18,32,.18),0 10px 20px -10px rgba(11,18,32,.55)}
.som-btn:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(11,18,32,.2)}
.som-btn:focus-visible{outline:2px solid var(--deep);outline-offset:3px;box-shadow:0 0 0 6px rgba(111,227,255,.45)}
.som-btn[disabled]{opacity:.6;cursor:progress;transform:none}
.som-btn.ghost{background:#fff;color:var(--deeper);border:1.5px solid rgba(10,120,158,.35);box-shadow:none}
.som-btn.ghost:hover{background:var(--wash);border-color:rgba(10,120,158,.6);color:var(--deeper);box-shadow:none}
/* .cyan: the sticker-coloured action, one per screen at most (the header join button already is one) */
.som-btn.cyan{background:var(--cyan);color:var(--cyan-ink);box-shadow:inset 0 0 0 1px rgba(4,34,46,.08),0 1px 1px rgba(11,18,32,.12),0 6px 14px -8px rgba(10,120,158,.6)}
.som-btn.cyan:hover{background:var(--cyan-hi);color:var(--cyan-ink)}

/* forms */
.som-form{display:grid;gap:16px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3vw,30px);max-width:560px;box-shadow:var(--e2)}
.som-field{display:grid;gap:7px;font-size:14px;font-weight:700;letter-spacing:0;color:var(--ink);line-height:1.35}
.som-field input,.som-field select,.som-field textarea{font:500 16px/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;border:1.5px solid var(--line-3);border-radius:var(--r-md);padding:11px 14px;min-height:46px;width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.som-field textarea{min-height:96px}
.som-field input:hover,.som-field select:hover,.som-field textarea:hover{border-color:rgba(11,18,32,.38)}
.som-field input::placeholder,.som-field textarea::placeholder{color:#7a8596}
.som-field input:focus,.som-field select:focus,.som-field textarea:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px rgba(111,227,255,.5);background:#fff}
.som-field input[aria-invalid="true"],.som-field select[aria-invalid="true"],.som-field textarea[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.som-field small{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);line-height:1.45}
.som-checks{display:flex;flex-wrap:wrap;gap:8px}
.som-checks label{display:inline-flex;align-items:center;gap:8px;min-height:40px;font:700 13.5px var(--font);letter-spacing:0;text-transform:none;color:var(--ink-2);background:#fff;border:1.5px solid var(--line-3);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.som-checks input[type="radio"],.som-checks input[type="checkbox"]{width:auto;min-height:0;padding:0;border:0;box-shadow:none;background:none;border-radius:0;flex:none}
.som-checks label:has(input[type="radio"]){white-space:nowrap}
.som-checks label:hover{border-color:rgba(10,120,158,.55)}
.som-checks label:has(input:focus-visible){outline:2px solid var(--deep);outline-offset:2px}
.som-checks input{accent-color:var(--deep);margin:0}
.som-checks label:has(input:checked){border-color:var(--deep);background:var(--cyan-tint);color:var(--deeper)}
.som-status{min-height:1.4em;font-size:14px;color:var(--ink-2)}
.som-status.err{color:var(--err)}
.som-status.ok{color:var(--ok);font-weight:700}
.som-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* prose, for legal and long text */
.som-prose{font-size:16px;line-height:1.7;color:var(--ink-2)}
.som-prose h2{font-size:22px;font-weight:800;color:var(--ink);margin:2em 0 .5em;letter-spacing:-.02em}
.som-prose h3{font-size:17px;font-weight:800;color:var(--ink);margin:1.5em 0 .4em}
.som-prose p,.som-prose ul,.som-prose ol{margin:0 0 1em}
.som-prose ul,.som-prose ol{padding-left:1.3em}
.som-prose li{margin:.3em 0}
.som-prose li::marker{color:var(--deep)}
.som-prose strong{color:var(--ink)}
.som-prose a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,120,158,.4)}
.som-prose .updated{font-size:13.5px;color:var(--ink-3)}
.som-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.som-table{width:100%;border-collapse:collapse;font-size:15px}
.som-table th{text-align:left;font-size:13px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink-2);background:var(--wash);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.som-table td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
.som-table tr:last-child td{border-bottom:0}
.som-table .num,.som-table td.som-num{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* faq */
.som-faq details{border-bottom:1px solid var(--line-2);padding:18px 0}
.som-faq summary{cursor:pointer;font-weight:700;font-size:17px;line-height:1.4;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-radius:6px}
.som-faq summary:hover{color:var(--deeper)}
.som-faq summary::-webkit-details-marker{display:none}
.som-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--cyan-tint);color:var(--deeper);font-size:18px;font-weight:700;line-height:1;transform:translateY(3px)}
.som-faq details[open] summary::after{content:"\2212";background:var(--ink);color:#fff}
.som-faq details p{margin-top:10px;color:var(--ink-2);line-height:1.65;max-width:64ch}

/* footer */
.som-footer{border-top:1px solid var(--line);margin-top:clamp(24px,5vw,64px);background:linear-gradient(#fff,var(--wash))}
.som-footer-in{max-width:1280px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px);display:grid;gap:28px;grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(120px,1fr))}
.som-footer h4{margin:0 0 10px;font-size:13.5px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink)}
.som-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.som-footer ul a{display:inline-block;color:var(--ink-2);padding-block:4px}
.som-footer ul a:hover{color:var(--deep)}
.som-footer p{font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:34ch;margin-top:12px}
@media (max-width:760px){.som-footer-in{grid-template-columns:1fr 1fr}.som-footer-in>div:first-child{grid-column:1/-1}}

/* white variant of the callout note, for use on a pale-blue section where the default would blend in */
.som-note.white{background:#fff}

.nav-demo{color:var(--deeper);font-weight:800}
@media (max-width:640px){.nav-demo{display:none}}