,
visible focus, skip link, visually-hidden). Nothing here
reinvents a DS component.
============================================================ */
:root{
/* Navy surfaces / gradient — unchanged from the shared DS, on purpose. */
--bg:#0f1a2e; --grad1:#0f1a2e; --grad2:#1B365D;
--panel:#14213a; --panel2:#0b1424;
/* Accent (MyCRM violet) family.
--accent is 4.96:1 on --bg and --accent-soft is 10.6:1, so checkmarks and
soft body text clear WCAG AA at body size. Eyebrows are the exception:
the DS paints them in --accent, which fails low down the body gradient,
so they are restated in --accent-2 below. */
--accent:#8f76f2;
--accent-2:#a992f7;
--accent-bg:#1a1636;
--accent-bg-h:#241d4a;
--accent-bd:#4a3d8f;
--accent-soft:#cfc4fb;
--accent-ink:#0e0a24; /* text on a solid violet fill */
/* Brand-adjacent: link colour, warnings. */
--blue:#a5b4fc; --amber:#fbbf24;
/* AA fix. The DS default --dim (#6b7280) is 3.5:1 on the navy, which fails
AA for the small print it is used for (footer note, captions, form hints).
Careful: --bg is only the TOP of the DS body gradient. It runs to about
#193155 at the foot of the page, which is where the footer note sits —
measured there, the previous #808a9b was 3.74:1 and still failed. This
value is 4.55:1 at the foot of the gradient, 5.6:1 on --panel and 6.1:1
on --bg, so it clears AA wherever the DS puts it. */
--dim:#9199a8;
}
/* ------------------------------------------------------------
DS values hardcoded to the brand green — restated for violet.
------------------------------------------------------------ */
.btn.primary{color:var(--accent-soft)}
.btn.primary:hover{color:#efeafd}
.band{background:linear-gradient(180deg, rgba(143,118,242,.09), rgba(143,118,242,0))}
/* The DS paints .eyebrow in var(--accent) at 12.5px — which is 3.76:1 low down
the body gradient (#193155) and fails AA. --accent-2 is 5.06:1 there. */
.eyebrow{color:var(--accent-2)}
/* ------------------------------------------------------------
Visible focus. The DS ships no :focus-visible rule, and its
.form inputs explicitly set outline:none — so keyboard users
currently get nothing. Restore it everywhere.
------------------------------------------------------------ */
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:4px}
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible{outline:2px solid var(--accent-2); outline-offset:1px}
/* Skip link — hidden until focused. */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
background:var(--panel); color:var(--ink); border:1px solid var(--accent-bd);
border-radius:0 0 var(--radius-sm) 0; padding:10px 16px; font-size:14px}
.skip:focus{left:0}
/* Visually hidden but still read by assistive tech and still submitted.
Used for the honeypot input and for labels that would be redundant on
screen. Not display:none — a bot that reads the DOM must still see it. */
.vh{position:absolute !important; 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}
/* ------------------------------------------------------------
Elements the DS does not style.
------------------------------------------------------------ */
.form textarea{background:var(--panel2); border:var(--hairline); color:var(--ink);
border-radius:10px; padding:12px 14px; font:15px/1.55 var(--font); width:100%;
min-height:130px; resize:vertical}
.form textarea::placeholder{color:var(--dim)}
.form textarea:focus{border-color:var(--accent-bd)}
.form .req{color:var(--accent-soft)}
pre{background:var(--panel2); border:var(--hairline); border-radius:var(--radius-sm);
padding:14px 16px; overflow-x:auto; margin:14px 0;
font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--text-3)}
pre code{background:none; border:0; padding:0; font-size:inherit; color:inherit}
code{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
border-radius:5px; padding:1px 6px; overflow-wrap:anywhere;
font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink)}
/* …but never break a command inside a ; that block scrolls instead. */
pre code{overflow-wrap:normal}
/* ------------------------------------------------------------
Page-level helpers used across the six pages.
------------------------------------------------------------ */
.prose{max-width:760px}
.prose p, .prose li{color:var(--text-2)}
.prose h3{margin-top:var(--s4)}
/* The DS gives h4 no spacing of its own; a sub-heading needs air above it. */
.prose h4{margin-top:var(--s3)}
.prose ul{padding-left:20px}
/* Ordered lists: match the unordered ones, with room for two-digit markers. */
.prose ol{padding-left:24px}
.prose li{margin:7px 0}
/* DS hides the webkit marker only; hide the Firefox one too. */
.fgroup-h{list-style:none; cursor:pointer}
/* DS .pillar leaves inline; give the title its own line. */
.pillar strong{display:block; margin-bottom:3px}
/* Plain bullet list inside a panel/card. */
.tick{list-style:none; padding:0; margin:14px 0 0}
.tick li{position:relative; padding:6px 0 6px 24px; color:var(--text-3); font-size:14.5px}
.tick li::before{content:"\2713"; position:absolute; left:0; color:var(--accent); font-weight:700}
.tick.no li::before{content:"\2013"; color:var(--dim)}
/* Price node before (or without) a registry answer. The number never lives in
the HTML — the node renders this until /config/pricing fills it in. */
.plan .price.pending{font-size:20px; font-weight:600; color:var(--accent-soft); line-height:1.3}
/* Callout — an inset note. .warn for the one that costs you data. */
.callout{background:var(--accent-bg); border:1px solid var(--accent-bd);
border-radius:var(--radius); padding:16px 20px; margin-top:var(--s3); color:var(--text-3); font-size:14.5px}
.callout b{color:var(--ink)}
.callout.warn{background:#2a1d10; border-color:#7a5518; color:#f2dfc2}
.callout.warn b{color:#ffe4b5}
/* A panel that is just a box of prose. */
.panel{background:var(--panel); border:var(--hairline); border-radius:var(--radius-lg);
padding:26px 28px; box-shadow:var(--shadow-card)}
.panel h3{margin-top:0}
/* Two-up layout that collapses cleanly on narrow screens. */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s3); margin-top:var(--s4)}
/* Contact page: form beside the "what happens next" column. */
.contactgrid{display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s4);
margin-top:var(--s4); align-items:start}
@media (max-width:860px){ .contactgrid{grid-template-columns:1fr; gap:var(--s3)} }
/* Definition rows (env vars, field reference). */
.deflist{margin:16px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:14px}
.deflist dt{color:var(--ink); font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.deflist dd{margin:0; color:var(--muted)}
@media (max-width:620px){ .deflist{grid-template-columns:1fr; gap:2px 0} .deflist dd{margin:0 0 12px} }
/* ============================================================
HELP PAGE (help.html)
Four additions, all for things the DS does not ship. Every rule
is scoped to a class only help.html uses, so the other six
pages render exactly as before.
============================================================ */
/* 1) Long-form band.
DS component #5 centres every inside a .band and caps it at 760px —
right for a short marketing band, wrong for a page of instructions.
`.band.help` keeps the band's tint and hairlines and restores normal
left-aligned prose flow. */
.band.help p{max-width:none; margin:0 0 1em; text-align:left}
.band.help .fcard p, .band.help .step p{margin:0}
.band.help p:last-child{margin-bottom:0}
/* 2) In-page table of contents. The DS ships .chip but no layout to wrap a
row of them, and no hover affordance for a chip that is a link. */
.toc{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; padding:0; list-style:none}
.toc a.chip{color:var(--text-3)}
.toc a.chip:hover{color:#fff; background:var(--accent-bg); border-color:var(--accent-bd)}
/* 3) Troubleshooting entries: a verbatim error string, then what it means and
what to do about it. .deflist cannot carry these — it is a two-column grid
and an error message is far too long for its dt column. */
.errlist{margin:14px 0 0}
.errlist dt{margin:var(--s3) 0 8px}
.errlist dt code{display:block; padding:10px 13px; color:var(--ink);
background:var(--panel2); border-color:var(--accent-bd); border-radius:var(--radius-sm);
font-size:13px; line-height:1.55; overflow-wrap:anywhere}
.errlist dd{margin:0 0 4px; color:var(--text-2); font-size:14.5px}
.errlist dd b{color:var(--ink)}
/* 4) Self-link on every sub-heading, so support can send someone to an exact
subsection. Always visible (not hover-only), focusable in the tab order,
and named for the heading it belongs to rather than "#". */
.plink{margin-left:.4em; font-size:.75em; font-weight:400; text-decoration:none;
color:var(--dim); vertical-align:.08em}
.plink:hover, .plink:focus-visible{color:var(--accent-2)}