/* ListWright shared interface: clear typography, blue accents and accessible controls. */
:root {
 color-scheme: light;
 --paper:#ffffff; --raise:#ffffff; --sunken:#f3f7fc;
 --ink:#102c54; --muted:#53657d; --faint:#5e6e84; --rule:#dce5f0; --rule-firm:#aabbd0;
 --accent:#0668d2; --accent-lift:#0055ad; --accent-ink:#ffffff; --accent-wash:#e8f3ff;
 --night:#092b5a; --night-tile:#153b6b; --night-ink:#ffffff; --night-muted:#cbdcf2; --night-rule:#6581a7;
 --ok:#24603f; --bad:#9b362e; --wait:#775719; --danger:#9b362e;
 --ok-wash:#e8efe3; --bad-wash:#fbebe6; --wait-wash:#f5edda;
 --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px; --r-pill:8px;
 --shadow-1:0 1px 2px #102c5408; --shadow-2:0 8px 32px #102c5410; --shadow-3:0 12px 36px #102c541a;
 --sans:Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --display:var(--sans);
 --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
 --shell:84rem; --measure:42rem; --gutter:clamp(1.25rem,4vw,3rem); --sec:5rem;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-padding-top:7rem;-webkit-text-size-adjust:100%}
body {margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
::selection {background:var(--accent-wash);color:var(--ink)}
h1,h2,h3,h4 {margin:0;line-height:1.15;text-wrap:balance}
h1,h2 {font-family:var(--display);font-weight:750;letter-spacing:-.035em}
h1 {font-size:clamp(2.5rem,4.5vw,4.3rem);margin-bottom:1.15rem}
h2 {font-size:clamp(1.9rem,3vw,3rem)}
h3 {font:600 1.15rem/1.35 var(--sans);letter-spacing:-.015em}
h4 {font:600 1rem/1.4 var(--sans)}
p {margin:0 0 1.1rem;text-wrap:pretty}
a {color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
a:where(:not(.button)):hover {color:var(--accent-lift)}
strong {font-weight:600}
:focus-visible {outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
img,svg {max-width:100%;height:auto}
button,input,select,textarea {font:inherit}
button,a,input,textarea,select,summary {-webkit-tap-highlight-color:transparent}
hr {border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
code {background:var(--sunken);padding:.15em .35em;font:.85em var(--mono);overflow-wrap:anywhere}
pre {overflow:auto;max-width:100%;padding:1.25rem;background:var(--sunken);border:1px solid var(--rule);font-size:.85rem}
.muted,.hint,.inline-help {color:var(--muted)}
.faint {color:var(--faint)}
.small,.hint,.inline-help {font-size:.9rem}
.mono {font-family:var(--mono);overflow-wrap:anywhere}
.eyebrow,.article-kicker {color:var(--accent);font:600 .72rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem}
.eyebrow.mono {text-transform:none;letter-spacing:0}
.spacer {flex:1}
.copysource {display:none}
.skip {position:absolute;top:-10rem;left:1rem;z-index:200;background:var(--raise);padding:.8rem 1rem}
.skip:focus {top:.75rem}
.preview-notice {display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;background:#e3dbc5;color:#413b29;font-size:.78rem;padding:.4rem 1rem}
header.masthead {border-bottom:1px solid var(--rule);background:var(--raise);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px #102c5405}
.mast {max-width:90rem;padding:1.15rem var(--gutter);margin:auto;display:flex;align-items:center;gap:2rem;min-height:88px}
.wordmark {display:inline-flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;font:750 1.4rem/1.2 var(--sans);letter-spacing:-.055em;white-space:nowrap}
.wordmark sup {font:400 .55rem var(--sans);margin-left:-.5rem;align-self:flex-start;margin-top:.2rem}
.brand-mark {width:36px;height:36px;flex:none;border-radius:8px}
.primary-nav {display:flex;align-items:center;justify-content:center;gap:1.6rem;flex:1}
.primary-nav a,.mast-end>a:where(:not(.button)) {font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.primary-nav a.on,.primary-nav a:hover,.mast-end>a:where(:not(.button)):hover {color:var(--accent)}
.primary-nav a.on {text-decoration:underline;text-underline-offset:8px}
.mast-end {display:flex;align-items:center;gap:1.2rem;margin-left:auto}
.mast-end .who {max-width:20rem;overflow:hidden;text-overflow:ellipsis}
.account-menu {position:relative;font-size:.85rem;font-weight:600;color:var(--ink)}
.account-menu>summary {list-style:none;cursor:pointer;padding:.6rem .25rem;text-decoration:underline;text-underline-offset:4px}
.account-menu>summary::-webkit-details-marker {display:none}
.account-menu>div {position:absolute;right:0;top:calc(100% + .65rem);min-width:12rem;padding:.65rem;background:var(--raise);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-2)}
.account-menu a,.account-menu button {display:block;padding:.65rem .75rem;font-size:.85rem;text-align:left;width:100%;text-decoration:none}
.account-menu form {margin:0}
.account-menu a:hover {background:var(--accent-wash);border-radius:8px}
@media(max-width:38rem){.mast-end>.account-menu{display:none}.mast-end>.button{font-size:.78rem;min-height:40px;padding:.6rem .75rem}}

form.inline {display:inline;margin:0}
.mobile-menu {display:none}
main {max-width:var(--shell);padding:4rem var(--gutter) 5rem;margin:auto;min-width:0}
main.page-home {padding-top:0;padding-bottom:2rem}
.prose {max-width:none}
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>form {max-width:var(--measure)}
.prose p,.prose li {color:var(--muted)}
.prose li {margin-bottom:.55rem}
.prose h2 {font-size:2rem;margin:2.6rem 0 1rem;scroll-margin-top:2rem}
.prose h3 {margin:1.8rem 0 .6rem}
.standfirst {color:var(--muted);font-size:1.15rem;line-height:1.7;max-width:40rem;margin-bottom:1.5rem}
.column {max-width:30rem;margin:auto}
.column.wide {max-width:66rem}
h2.section {font-size:1.8rem;margin:2.5rem 0 1rem}
.text-link {font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;gap:.5rem;border:0;padding-bottom:.1rem}
.text-link:hover {border-color:var(--accent)}
.site-footer {border-top:1px solid var(--rule);background:var(--raise)}
.foot {max-width:var(--shell);padding:3.5rem var(--gutter);margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem}
.foot-brand p {color:var(--muted);margin:1.25rem 0;font-size:.95rem;line-height:1.8}
.foot h2 {font:600 .78rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 1.25rem}
.foot ul {list-style:none;padding:0;margin:0}
.foot li {margin:.6rem 0}
.foot li a {color:var(--muted);font-size:.9rem;text-decoration:none}
.foot li a:hover {text-decoration:underline}
.footer-bottom {max-width:var(--shell);border-top:1px solid var(--rule);padding:1.6rem var(--gutter);margin:auto;display:flex;align-items:start;justify-content:space-between;gap:3rem}
.footer-bottom>p {font-size:.75rem;color:var(--muted);max-width:37rem;margin:0}
.footer-bottom>nav {display:flex;flex-wrap:wrap;gap:.6rem 1rem;font-size:.78rem}
.footer-bottom a:where(:not(.button)) {color:var(--muted);white-space:nowrap}
/* Shared forms, status displays and data components. */

.card {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 1.6rem;
}

a.card, .card.lift {
  color: inherit;
  display: block;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

a.card:hover, .card.lift:hover {
  border-color: var(--rule-firm);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.sec { margin-top: var(--sec); }

.sec.tint {
  background: var(--sunken);
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}

.sec.tint .card, .sec.tint .tier, .sec.tint .split > * {
  background: var(--raise);
}

.sec-head { margin: 0 0 3.25rem; max-width: 46rem; }

.sec-head.centre { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--muted); margin: 0.85rem 0 0; }
.sec-head > :last-child { margin-bottom: 0; }

button,
.button {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent-ink);
  cursor: pointer;
  display: inline-flex;
  font: 600 0.925rem/1.25 var(--sans);
  gap: 0.4rem;
  justify-content: center;
  letter-spacing: -0.008em;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease;
  white-space: nowrap;
}

:is(button, .button):where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):is(:hover, :focus-visible) {
  background: var(--accent-lift);
  border-color: var(--accent-lift);
  color: var(--accent-ink);
  text-decoration: none;
}

button.ghost, .button.ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

:is(button, .button).ghost:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):is(:hover, :focus-visible) {
  background: var(--sunken);
  border-color: var(--rule-firm);
  color: var(--ink);
}

button.plain, .button.plain {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

:is(button, .button).plain:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):is(:hover, :focus-visible) {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

button.danger, .button.danger {
  background: transparent;
  border-color: var(--rule-firm);
  color: var(--danger);
}

:is(button, .button).danger:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):is(:hover, :focus-visible) {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--paper);
}

button.big, .button.big { font-size: 1rem; padding: 0.78rem 1.6rem; }

button.small, .button.small { font-size: 0.82rem; padding: 0.32rem 0.8rem; }

.actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.75rem 0 0;
}

label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin: 1.25rem 0 0.4rem;
}

input[type="email"],
input[type="password"],
input[type="search"],
input[type="text"],
textarea,
select {
  accent-color: var(--accent);
  background: var(--raise);
  border: 1px solid var(--rule-firm);
  border-radius: var(--r-sm);
  caret-color: var(--accent);
  color: var(--ink);
  font: inherit;
  padding: 0.66rem 0.85rem;
  transition: border-color 0.14s ease;
  width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--faint); }

input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;

  filter: grayscale(1) opacity(0.5);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 0;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2353657d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 0.65rem;
  cursor: pointer;
  padding-right: 2.3rem;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2353657d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

textarea {
  line-height: 1.55;
  min-height: 8rem;

  resize: vertical;
}

input[type="file"] {
  background: var(--sunken);
  border: 1px dashed var(--rule-firm);
  border-radius: var(--r);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 1.5rem 1.1rem;
  transition: border-color 0.14s ease, background-color 0.14s ease;
  width: 100%;
}

input[type="file"]:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--ink);
}

form.stack button { margin-top: 1.75rem; width: 100%; }

form.stack h2 {
  border-top: 1px solid var(--rule);
  font-size: 1.2rem;
  margin: 2.5rem 0 0.4rem;
  padding-top: 1.5rem;
}

form.stack h2:first-of-type { border-top: 0; margin-top: 0.5rem; padding-top: 0; }

.stack fieldset { border: 0; margin: 0; padding: 0; }

.stack legend {
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
  padding: 0;
}

.check {
  align-items: start;
  display: grid;
  font-weight: 400;
  gap: 0.6rem;
  grid-template-columns: auto 1fr;
  margin: 0 0 0.9rem;
}

.check input { margin-top: 0.3rem; }
.check .hint { display: block; margin: 0.15rem 0 0; }

.banner {
  border-radius: var(--r);
  font-size: 0.92rem;
  margin: 0 0 1.75rem;
  padding: 0.85rem 1.1rem;
}

.banner.error { background: var(--bad-wash); color: var(--bad); }
.banner.notice { background: var(--ok-wash); color: var(--ok); }
.banner strong { color: inherit; }

.callout {
  background: var(--sunken);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  margin: 1.75rem 0;
  padding: 1.2rem 1.35rem;
}

.callout p { margin: 0 0 0.6rem; }
.callout p:last-child { margin-bottom: 0; }

.secret {
  background: var(--raise);
  border-radius: var(--r-xs);
  display: block;
  font-family: var(--mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  padding: 0.6rem 0.7rem;
  user-select: all;
  word-break: break-all;
}

.claim {
  background: var(--sunken);
  border-radius: var(--r);
  margin: 2rem 0 0;
  max-width: 46rem;
  padding: 1.3rem 1.5rem;
}

.claim p { margin: 0; }
.claim p + p { color: var(--muted); margin-top: 0.7rem; }

.fineprint {
  border-top: 1px solid var(--rule);
  margin-top: var(--sec);
  max-width: 48rem;
  padding-top: 1.75rem;
}

.fineprint p { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.8rem; }
.fineprint p:last-child { margin-bottom: 0; }

.pill {
  align-items: center;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--r-pill);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0.3rem;
  letter-spacing: 0;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.pill.queued, .pill.running, .pill.stale { color: var(--wait); }
.pill.validated, .pill.completed, .pill.generated { color: var(--ok); }
.pill.exported, .pill.listed { color: var(--accent); }
.pill.failed { color: var(--bad); }
.pill.skipped, .pill.cancelled, .pill.new { color: var(--faint); }

.tagset { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }

.tagset span,
.tag {
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.24rem 0.65rem;
}

.features {
  display: grid;
  gap: 2.25rem 2.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .features { grid-template-columns: repeat(4, 1fr); } }

.features li { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.features h3 { margin: 0 0 0.45rem; }
.features p { color: var(--muted); font-size: 0.9rem; margin: 0; }

.features .icon {
  align-items: center;
  color: var(--accent);
  display: flex;
  height: 1.5rem;
  margin-bottom: 0.85rem;
}

.features .icon svg { height: 20px; width: 20px; }

.steps {
  counter-reset: step;
  display: grid;
  gap: 2.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li { border-top: 1px solid var(--rule); padding-top: 1.2rem; }

.steps li::before {
  color: var(--accent);
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  display: block;
  font-family: var(--display);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  margin-bottom: 0.85rem;
}

.steps h2 { font-size: 1.12rem; font-weight: 650; margin-bottom: 0.45rem; }
.steps p { color: var(--muted); font-size: 0.9rem; margin: 0; }

.worked { margin-top: var(--sec); }

.worked > h2 { margin-bottom: 0.8rem; }
.worked .standfirst { margin-bottom: 0; }
.worked .split { margin-top: 1.75rem; }
.worked .eyebrow { color: var(--faint); font-size: 0.8rem; font-weight: 600; margin-top: 1.5rem; }
.worked .eyebrow:first-child { margin-top: 0; }
.worked .eyebrow .muted { color: var(--faint); font-weight: 400; }
.worked .items td:first-child { color: var(--faint); width: 7rem; }

.worked h3 {
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0 0.3rem;
  padding-top: 1.6rem;
}

.split {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2rem;
}

.split > * {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 1.5rem 1.6rem;
}

.split > * > h2 {
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  margin: -0.35rem 0 1.1rem;
  padding-bottom: 0.85rem;
}

.split > * > :last-child { margin-bottom: 0; }

form .split { gap: 0 1rem; margin-top: 0; }

form .split > * {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.tiers {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.tier {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  padding: 1.9rem;
  position: relative;
}

.tier.featured { border-color: var(--ink); }

.tier.featured::after {
  color: var(--muted);
  content: "For a growing catalogue";
  font-size: 0.78rem;
  font-weight: 600;
  position: absolute;
  right: 1.9rem;
  top: 1.9rem;
}

.price { align-items: baseline; display: flex; gap: 0.35rem; margin: 0 0 0.3rem; }
.price .figure { font-size: 2.4rem; }
.price .per { color: var(--faint); font-size: 0.92rem; }

.allowance { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.3rem; }

ul.plain {
  border-top: 1px solid var(--rule);
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0;
}

ul.plain li {
  color: var(--muted);
  font-size: 0.885rem;
  padding: 0.45rem 0 0.45rem 1.5rem;
  position: relative;
}

ul.plain li::before {
  color: var(--accent);
  content: "✓";
  font-size: 0.85rem;
  left: 0;
  position: absolute;
  top: 0.45rem;
}

.tier .actions { margin-top: auto; padding-top: 1.6rem; }
.tier .actions > *, .tier .actions form, .tier .actions .button { width: 100%; }
.tier .actions button { width: 100%; }

.notes { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.notes li {
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.8rem 0;
}

.notes li:first-child { border-top: 1px solid var(--rule); }

.notes strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 620;
  margin-right: 0.35rem;
}

.links {
  display: grid;
  gap: 0 3rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.links a {
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  display: block;
  font-size: 0.92rem;
  padding: 0.85rem 0;
  transition: color 0.16s ease;
}

.links a:hover { color: var(--accent); text-decoration: none; }

.ai-read {
  bottom: max(1rem, env(safe-area-inset-bottom));
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  z-index: 70;
}

.ai-read > summary { box-shadow: var(--shadow-3); list-style: none; }
.ai-read > summary::-webkit-details-marker { display: none; }
.ai-read > summary::after { content: "+"; margin-left: 0.35rem; }
.ai-read[open] > summary::after { content: "−"; }

.ai-read-panel {
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: var(--r-lg);
  bottom: calc(100% + 0.75rem);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  position: absolute;
  right: 0;
  width: min(19rem, calc(100vw - 2rem));
}

.ai-read-label { color: var(--ink); font-size: 0.9rem; font-weight: 650; margin: 0 0 0.2rem; }
.ai-read-panel .button { width: 100%; }
.ai-read-hint { color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin: 0.35rem 0 0; }
.ai-read-prompt { border-top: 1px solid var(--rule); font-size: 0.78rem; padding-top: 0.5rem; }
.ai-read-prompt summary { color: var(--muted); cursor: pointer; }
.ai-read-prompt p { color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }

.faq { margin: 1.5rem 0 0; max-width: 50rem; }

.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }

.faq summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1.02rem;
  font-weight: 600;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: -0.014em;
  list-style: none;
  padding: 1.15rem 0;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  color: var(--accent);
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }

.faq p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0 0 1.15rem;
  max-width: 46rem;
}

.panel {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  margin-top: 1.75rem;
  padding: 1.6rem;
}

.panel > :last-child { margin-bottom: 0; }

.status {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.bar {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-pill);
  display: flex;
  height: 6px;
  overflow: hidden;
}

.fill {
  background: var(--accent);
  border-radius: var(--r-pill);
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fill.unchecked {
  background: color-mix(in srgb, var(--ink) 34%, transparent);
}

.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.75rem 0 1rem; }

.filters a {
  background: var(--sunken);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.3rem 0.8rem;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.filters a:hover {
  background: color-mix(in srgb, var(--ink) 7%, var(--sunken));
  color: var(--ink);
  text-decoration: none;
}

.filters a.on { background: var(--accent); color: var(--accent-ink); }
.filters a.on:hover { background: var(--accent-lift); color: var(--accent-ink); }

.scroll {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--raise) 35%, transparent) 0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--raise) 35%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 11%, transparent), transparent)
      0 0 / 1.1rem 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 11%, transparent), transparent)
      100% 0 / 1.1rem 100% no-repeat scroll;
}

.items {
  border-collapse: collapse;
  font-size: 0.9rem;

  font-variant-numeric: lining-nums tabular-nums;
  width: 100%;
}

.items th {
  border-bottom: 1px solid var(--rule-firm);
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0 0.9rem 0.6rem 0;
  text-align: left;
  white-space: nowrap;
}

.items td {
  border-bottom: 1px solid var(--rule);
  padding: 0.8rem 0.9rem 0.8rem 0;
  vertical-align: top;
}

.items tbody tr:last-child td { border-bottom: 0; }

.items tbody tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }

.violations { color: var(--bad); margin: 0; padding-left: 1.05rem; }
.violations li { font-size: 0.87rem; }
.violations li::marker { color: color-mix(in srgb, var(--bad) 55%, transparent); }

.rowactions { text-align: right; white-space: nowrap; width: 1%; }

.trackerbar {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  justify-content: space-between;
}

.find { align-items: center; display: flex; gap: 0.6rem; margin: 1.6rem 0 0.6rem; }

.find label { color: var(--faint); font-size: 0.82rem; font-weight: 500; margin: 0; }

.find input { font-size: 0.88rem; padding: 0.42rem 0.7rem; width: 17rem; }

.find[hidden],
.record[hidden] { display: none; }

.tally { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.5rem; }

.records {

  --record: minmax(8rem, 13rem) minmax(0, 1fr) minmax(0, auto);

  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  margin-top: 1.2rem;
  padding: 0 1.4rem;
}

.records-head {
  border-bottom: 1px solid var(--rule-firm);
  color: var(--faint);
  display: grid;
  font-size: 0.78rem;
  font-weight: 600;
  gap: 0 1.5rem;
  grid-template-columns: var(--record);
  margin: 0;
  padding: 1.1rem 0 0.7rem;
}

.records-head span:last-child { text-align: right; }

.record {
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.15rem 1.5rem;
  grid-template-columns: var(--record);
  margin: 0 -0.75rem;
  padding: 0.95rem 0.75rem;
}

.record:first-of-type { border-top: 0; }
.record:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: var(--r-sm); }

.record-key { margin: 0; overflow-wrap: anywhere; }
.record-key a { font-weight: 550; }

.record-says { min-width: 0; }
.record-name { margin: 0; overflow-wrap: anywhere; }

.record-blurb {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  display: -webkit-box;
  font-size: 0.87rem;
  line-clamp: 2;
  margin: 0.2rem 0 0;
  max-width: 48rem;
  overflow: hidden;
}

.none { color: var(--faint); font-style: italic; }

.record-state {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin: 0;
}

.record-when {
  color: var(--faint);
  font-size: 0.78rem;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.record-row { grid-column: 2 / -1; margin-top: 0.45rem; }

.record-row > summary,
.columnlist > summary {
  color: var(--faint);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.45rem;
  list-style: none;
  width: fit-content;
}

.record-row > summary::-webkit-details-marker,
.columnlist > summary::-webkit-details-marker { display: none; }

.record-row > summary::before,
.columnlist > summary::before {
  color: var(--accent);
  content: "+";
  font-variant-numeric: tabular-nums;
}

.record-row[open] > summary::before,
.columnlist[open] > summary::before { content: "\2212"; }

.record-row > summary:hover,
.columnlist > summary:hover { color: var(--ink); }

.cells { column-gap: 1.5rem; columns: 15rem; margin: 0.75rem 0 0.35rem; }

.cells > div {
  border-top: 1px solid var(--rule);

  break-inside: avoid;
  margin-bottom: 0.65rem;
  padding-top: 0.35rem;
}

.cells dt { color: var(--faint); font-size: 0.76rem; }

.cells dd {
  font-size: 0.87rem;
  margin: 0.12rem 0 0;

  overflow-wrap: anywhere;
}

.columnlist { margin: 0 0 0.4rem; }
.columnlist .tagset { margin-top: 0.7rem; }
.columnlist .tagset span { font-family: var(--mono); font-size: 0.74rem; }
.columnlist .hint { margin-top: 0.6rem; max-width: 40rem; }

.find-empty { color: var(--muted); font-size: 0.9rem; margin: 1.2rem 0 0; }

@media (max-width: 46rem) {

  .records-head { display: none; }
  .records { padding-top: 0.5rem; }

  .record { gap: 0.3rem; grid-template-columns: 1fr; }

  .record-key { order: 1; }
  .record-state { justify-content: flex-start; order: 2; }
  .record-says { order: 3; }
  .record-row { grid-column: 1 / -1; order: 4; }

  .find { width: 100%; }
  .find input { flex: 1; width: auto; }
}

.versus {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1.75rem 0 1.25rem;
}

.scorecard {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 1.4rem 1.6rem;
}

.scorecard.ours { border-color: var(--accent); }

.score {
  font-family: var(--display);
  font-size: 3rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0.4rem 0 0.15rem;
}

.scorecard.ours .score { color: var(--accent); }

.outof { color: var(--faint); font-size: 1.05rem; letter-spacing: 0; }

.compare td { vertical-align: top; }

.compare td .points {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 650;
  line-height: 1.15;
}

.compare td .muted { display: block; margin-top: 0.15rem; }

.items td.good .points { color: var(--ok); }
.items td.bad .points { color: var(--bad); }

.dots { display: none; margin-left: 0.1rem; vertical-align: baseline; }

.dots i {
  animation: dot 1.05s ease-in-out infinite;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 0.32em;
  margin-left: 0.18em;
  width: 0.32em;
}

.dots i:nth-child(2) { animation-delay: 0.16s; }
.dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes dot {
  0%   { opacity: 0.25; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

button[aria-busy="true"] .dots,
.htmx-request .dots { display: inline-block; }

:is(button, .button):is(:disabled, [aria-disabled="true"], [aria-busy="true"]) { cursor: not-allowed; filter: saturate(0.6); }

#panel.htmx-request .dots { display: none; }

.prose > form.grid-form { max-width: none; }

.prose > form.grid-form > p,
.prose > form.grid-form > ul,
.prose > form.grid-form > label,
.prose > form.grid-form > select { max-width: var(--measure); }

.items.grid th,
.items.grid td {
  padding: 0.3rem 0.35rem 0.3rem 0;
  vertical-align: middle;
}

.items.grid input[type="text"] {
  font-size: 0.87rem;
  min-width: 8.5rem;
  padding: 0.42rem 0.55rem;
}

.items.grid thead input[type="text"] {
  background: transparent;
  border-color: var(--rule);
  font-size: 0.8rem;
}

.items.grid thead input[type="text"]:focus-visible { background: var(--raise); }

.items.grid .rownum {
  padding-right: 0.6rem;
  text-align: right;
  width: 1.5rem;
}

.items.grid tbody tr:hover td { background: none; }

.eyebrow .plain.small {
  margin-left: 0.5rem;
  opacity: 0.65;
}

.eyebrow .plain.small:hover { opacity: 1; }

.catalogue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.75rem 0;
  border-block: 1px solid var(--rule);
}
.catalogue-summary strong { display: block; font-size: 2.5rem; line-height: 1.2; }
.catalogue-summary span { color: var(--muted); }
.catalogue-example .source-value { white-space: pre; }
.catalogue-decisions { min-width: 46rem; }
.catalogue-decisions th:first-child { width: 8rem; }
.catalogue-checklist { max-width: 60rem; }
.worksheet-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-bottom: 1.5rem; }
.worksheet-fields > div { min-width: 0; }
.checklist-phase h2 { margin-top: 2.75rem; }
.checklist-phase textarea { min-height: 5rem; }
.checklist-phase > input, .checklist-phase > textarea { margin-bottom: 1rem; }
.checklist-sources { margin-top: 2.5rem; }
@media (max-width: 40rem) {
  .worksheet-fields { grid-template-columns: 1fr; }
  .catalogue-summary { gap: 1rem; }
  .catalogue-summary strong { font-size: 2rem; }
  .catalogue-summary span { font-size: 0.8rem; }
}

/* Shared page headings and feature labels. */
.section-heading {display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:2.5rem}
.section-heading>p {max-width:25rem;color:var(--muted);font-size:.97rem;margin-bottom:.25rem}
.section-heading .eyebrow {margin-bottom:.85rem}
.faq summary {font-size:1rem;line-height:1.5;padding:1.2rem 0;letter-spacing:0}
.faq p {line-height:1.8}
.telematics-new {display:inline-block;border:1px solid var(--rule-firm);padding:.15rem .4rem;font:600 .6rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.eyebrow .telematics-new {margin-right:.4rem}
.telematics-fine {font-size:.76rem;color:var(--muted);margin:.85rem 0 0}
.dashboard-telematics {display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem 2rem;background:var(--accent-wash);border:1px solid var(--rule);border-radius:16px;padding:1.7rem;margin:1.5rem 0}
.dashboard-telematics>div {flex:1 1 24rem;min-width:0}
.dashboard-telematics .eyebrow {margin-bottom:.7rem}
.dashboard-telematics h2+p {color:var(--muted);font-size:.9rem;max-width:44rem;margin:.8rem 0 0}
.dashboard-telematics>.button {white-space:normal}

@media(max-width:38rem) {

 .dashboard-telematics {padding:1.25rem}
}
.page-intro {padding-bottom:2.25rem;margin-bottom:2rem;border-bottom:1px solid var(--rule-firm);max-width:none}
.page-intro>p:not(.eyebrow):not(.article-kicker),.page-intro .standfirst {max-width:43rem}
.page-intro h1 {max-width:23ch}
.hero.plain {display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;text-align:left;padding:0;margin:0;max-width:none}
.hero.plain aside {border-left:1px solid var(--rule-firm);padding-left:2rem}
.hero.plain .standfirst {margin:0}
.guide-layout {display:grid;grid-template-columns:14rem minmax(0,45rem);gap:clamp(2rem,5vw,5rem);align-items:start}
.guide-toc {position:sticky;top:2rem;border-top:2px solid var(--accent);padding-top:1rem;font-size:.86rem}
.guide-toc nav,.guide-toc ul {display:block;list-style:none;padding:0;margin:0}
.guide-toc a {display:block;padding:.5rem 0;text-decoration:none;color:var(--muted);border-bottom:1px solid var(--rule)}
.guide-toc a:hover {color:var(--accent)}
.guide-body {min-width:0;max-width:45rem}
.guide-body p,.guide-body li {line-height:1.8}
.guide-body h2 {font-size:2rem;margin:2.8rem 0 1rem}
.guide-body h2:first-child {margin-top:0}
.guide-body h3 {margin:1.8rem 0 .7rem}
.content-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.link-list {list-style:none;padding:0;margin:1.5rem 0}
.link-list li {padding:.8rem 0;border-bottom:1px solid var(--rule)}
.link-list a {font-weight:500;text-decoration:none}
.link-list p {margin:.4rem 0 0;font-size:.9rem;color:var(--muted)}
.sec {margin-top:4rem}
.sec.tint {background:var(--accent-wash);border-radius:0;padding:2.5rem}
.sec-head {max-width:45rem;margin-bottom:2rem}
.sec-head p {font-size:1rem;line-height:1.75}
.cta {margin-top:4rem;border-top:1px solid var(--rule-firm);padding-top:2.5rem}
.cta h2 {margin-bottom:1rem}
.cta p {max-width:38rem;color:var(--muted)}
.strip {display:flex;gap:1.5rem;flex-wrap:wrap;border-block:1px solid var(--rule);padding:1.2rem 0;margin:2.5rem 0;color:var(--muted)}
.strip .label {font-size:.8rem}
.figures {display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-block:2rem;border-block:1px solid var(--rule);margin-top:3rem}
.figure {font:500 2.8rem/1.1 var(--sans);letter-spacing:-.06em}
.figures p:last-child {font-size:.9rem;color:var(--muted);margin-top:.8rem}
.tier {padding:2rem;border-radius:0;background:var(--raise)}
.tier h2 {font:500 1.25rem var(--sans);margin-bottom:1.5rem}
.tier.featured {background:var(--accent-wash);border:1px solid var(--rule-firm)}
.tier.featured::after {top:.7rem;left:2rem;right:auto;font-size:.65rem;font-weight:500}
.price .figure {font:400 3.5rem var(--display);letter-spacing:-.05em}
.tier .plain li {font-size:.9rem;line-height:1.7}
/* Workspace layout and forms. */
.workspace {background:var(--sunken)}
.workspace .mast {max-width:100rem;padding:.85rem 1.6rem;min-height:76px}
.app-shell {display:grid;grid-template-columns:216px minmax(0,1fr);max-width:100rem;margin:auto;min-height:75vh}
.workspace-sidebar {border-right:1px solid var(--rule);background:var(--raise);padding:1.8rem .85rem;display:flex;flex-direction:column;position:sticky;top:76px;align-self:start;min-height:calc(100vh - 76px);max-height:calc(100vh - 76px);overflow-y:auto}
.sidebar-label {font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 .9rem .8rem}
.workspace-sidebar nav {display:flex;flex-direction:column;gap:.35rem}
.workspace-sidebar nav>a {display:flex;align-items:center;gap:.7rem;color:var(--muted);padding:.7rem .85rem;text-decoration:none;font-size:.86rem;font-weight:500;border-radius:8px}
.workspace-sidebar nav>a>span {font:1.15rem/1 var(--sans);width:1.2rem;flex:none;text-align:center;color:inherit}
.workspace-sidebar nav>a.on {background:var(--accent-wash);color:var(--accent-lift);font-weight:700;box-shadow:inset 3px 0 var(--accent)}
.workspace-sidebar nav>a:hover {background:var(--sunken);color:var(--accent)}
.workspace-sidebar nav>.sidebar-label {margin-top:1.8rem}
.sidebar-help {border:1px solid var(--rule);background:var(--sunken);border-radius:12px;margin:2rem .35rem 0;padding:1rem;font-size:.78rem;color:var(--muted)}
.sidebar-help a {font-size:.78rem}
.workspace main {width:100%;max-width:88rem;padding:2rem clamp(1.25rem,2.5vw,3rem) 4rem}
.workspace h1 {font:750 clamp(1.9rem,2.7vw,2.65rem)/1.15 var(--sans);letter-spacing:-.035em}
.workspace h2 {font:700 1.35rem/1.3 var(--sans);letter-spacing:-.025em}
.workspace .page-intro {padding-bottom:1.6rem;margin-bottom:1.8rem}
.workspace-header {display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-bottom:0;padding-bottom:0;margin-bottom:1.5rem}
.workspace-header>.page-intro {border:0;padding:0;margin:0}
.workspace-header>.page-intro>p:last-child {margin-bottom:0}
.workspace-header>.button {flex:none}
.workspace-header h1 {margin-bottom:.7rem}
.workspace-header .actions {margin:0 0 .2rem}
.workspace-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start}
.workspace-section {background:var(--raise);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow-1);padding:1.7rem;min-width:0}
.workspace-section h2 {margin-bottom:1rem}
.workspace-section>p {max-width:45rem}
.workspace-section .panel {margin-top:1rem}
.workspace .panel {background:var(--raise);border-radius:12px;padding:1.7rem}
.form-section {border-top:1px solid var(--rule);padding:1.8rem 0;margin:1.8rem 0 0;min-width:0}
.form-section:first-child {border-top:0;margin-top:0;padding-top:0}
.form-section>h2,.form-section>legend {font:600 1.1rem var(--sans);margin-bottom:.75rem}
.step-list {padding-left:1.3rem;color:var(--muted)}
.step-list li {padding-left:.4rem;margin-bottom:1rem}
.stat-list {display:flex;gap:2.5rem;flex-wrap:wrap;margin:1.6rem 0}
.stat-list>div {padding-right:2.5rem;border-right:1px solid var(--rule)}
.stat-list dt {font-size:.8rem;color:var(--muted)}
.stat-list dd {margin:.25rem 0 0;font-size:1.7rem;font-weight:500}
.workflow-options {display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
.workflow-options>a,.workflow-options>article,.workflow-options>div {display:block;text-decoration:none;background:var(--raise);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-1);padding:1.5rem;color:var(--ink)}
.workflow-options h2,.workflow-options h3 {font:600 1.1rem var(--sans);margin-bottom:.7rem}
.workflow-options p {font-size:.9rem;color:var(--muted)}
.workflow-options>a:hover {border-color:var(--accent)}
.empty-state {padding:3rem 2rem;text-align:center;background:var(--raise);border:1px dashed var(--rule-firm);border-radius:16px;margin:1.5rem 0}
.empty-state h2 {margin-bottom:1rem}
.empty-state p {max-width:34rem;margin:0 auto 1.2rem;color:var(--muted)}
.empty-state .actions {justify-content:center}
.auth-shell {display:grid;grid-template-columns:1fr 1fr;max-width:65rem;margin:0 auto;gap:5rem;align-items:start}
.auth-aside {padding:2rem 0;max-width:27rem}
.auth-aside h2 {font-size:2.6rem;margin-bottom:1.5rem}
.auth-aside p {color:var(--muted)}
.auth-card {background:var(--raise);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow-2);padding:2.5rem;min-width:0}
.auth-card h1 {font-size:2.7rem}
.auth-card .page-intro {padding-bottom:1rem;margin-bottom:1rem}
.auth-shell .column {max-width:none}
.auth-card>p:last-child {margin-bottom:0}
.auth-card .stack {width:100%}
button,.button {border-radius:8px;min-height:44px;font-size:.9rem;font-weight:650;letter-spacing:0;box-shadow:none;padding:.7rem 1.2rem;text-decoration:none}
button.small,.button.small {min-height:40px;font-size:.85rem;padding:.55rem 1rem}
button.big,.button.big {padding:.95rem 1.5rem;min-height:50px;font-size:1rem}
button.plain,.button.plain {min-height:32px;padding:.2rem .4rem}
.actions {gap:.8rem;align-items:center}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select {border-radius:8px;min-height:44px;background-color:var(--raise);border:1px solid var(--rule-firm);font-size:.95rem;padding:.65rem .8rem}
input::placeholder,textarea::placeholder {color:var(--faint)}
label {font-size:.88rem;font-weight:600;margin-top:1.4rem}
textarea {line-height:1.7}
input[type=file] {padding:1.6rem;background:var(--sunken);border-style:dashed;width:100%;white-space:normal}
.items {font-size:.88rem}
.items th {background:var(--sunken);color:var(--muted);padding:.9rem .8rem;border-bottom:1px solid var(--rule-firm);font-size:.7rem;letter-spacing:.035em}
.items td {padding:1rem .8rem;line-height:1.6;background:var(--raise)}
.items tbody tr:hover td {background:var(--paper)}
.items td:first-child,.items th:first-child {padding-left:1rem}
.items td:last-child,.items th:last-child {padding-right:1rem}
.records {background:var(--raise);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.record {padding:1.1rem 1.25rem}
.records-head {padding:.8rem 1.25rem;background:var(--sunken)}
.record:hover {background:var(--paper)}
.pill {font-size:.7rem;border-radius:3px;background:var(--sunken);padding:.25rem .5rem}
.filters {gap:.5rem;margin:1.5rem 0}
.filters a {border-radius:3px;padding:.4rem .75rem;font-size:.8rem;border:1px solid var(--rule)}
.tagset span,.tag {font-size:.76rem;border-radius:3px;background:var(--sunken)}
.score {font-family:var(--sans);font-weight:500}
.scorecard {box-shadow:none;padding:1.5rem}
.scorecard.ours {background:var(--accent-wash);border-color:var(--rule-firm)}
.banner {border-radius:10px;border:1px solid var(--rule);font-size:.95rem}
.demo-email-note {font-size:.95rem;color:var(--muted);line-height:1.7;margin:1rem 0}
.ai-read {position:relative;inset:auto;z-index:40}
.ai-read>summary.button {min-height:0;padding:0;background:none;color:var(--muted);font-size:.78rem;border:0;box-shadow:none;text-decoration:underline;font-weight:400}
.ai-read-panel {background:var(--raise);border-radius:4px;bottom:calc(100% + 1rem);max-height:80vh;overflow:auto}
.ai-read-panel .button {min-height:38px;white-space:normal}
.ai-read-panel .ai-read-hint {white-space:normal}
.ai-read-prompt p {white-space:normal}
@media(max-width:68rem) {
 .primary-nav {display:none}.mobile-menu {display:block}
 .mobile-menu summary {cursor:pointer;list-style:none;font-size:.8rem;display:flex;gap:.5rem;padding:.5rem 0;min-height:38px;align-items:center}
 .mobile-menu summary::-webkit-details-marker {display:none}.mobile-menu[open] summary span {transform:rotate(45deg)}
 .mobile-menu nav {position:absolute;top:100%;left:0;right:0;background:var(--raise);border-bottom:1px solid var(--rule-firm);padding:1rem var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:.3rem;box-shadow:var(--shadow-2)}
 .mobile-menu nav a {font-size:.9rem;padding:.55rem;text-decoration:none}
 .mobile-menu nav form {margin:0}.mobile-menu nav button {font-size:.9rem;padding:.55rem;min-height:44px}
 .mast {gap:1.4rem}.primary-nav {gap:.7rem}

 .app-shell {grid-template-columns:196px minmax(0,1fr)}.workspace-sidebar {padding:1.6rem .7rem}.workspace main {padding:1.5rem}
 .workspace-grid {grid-template-columns:1fr}.workspace-header {align-items:start;flex-direction:column;gap:1rem}
 .guide-layout {grid-template-columns:11rem minmax(0,1fr);gap:2.5rem}
}
@media(max-width:52rem) {
 .primary-nav {display:none}.mast {padding-block:1rem;min-height:76px}.mast-end {gap:1rem}.mobile-menu {display:block}

 .section-heading {gap:2rem}.section-heading>p {max-width:19rem;font-size:.9rem}

 .foot {grid-template-columns:1.3fr 1fr 1fr;gap:2rem}.footer-bottom {flex-direction:column;gap:1.5rem}
 .app-shell {display:block}.workspace-sidebar {display:none}.workspace main {padding:2rem var(--gutter)}.workspace .mast {padding:1rem var(--gutter)}
 .auth-shell {gap:2.5rem}.auth-card {padding:1.75rem}.auth-aside h2 {font-size:2rem}
 .hero.plain {grid-template-columns:1fr}.hero.plain aside {border-left:0;border-top:1px solid var(--rule);padding:1.5rem 0 0}
 .guide-layout {grid-template-columns:1fr;gap:2rem}.guide-toc {position:static}.guide-toc ul {display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
}
@media(max-width:38rem) {
 main {padding-top:2.5rem;padding-bottom:3rem}.mast {gap:1rem}.wordmark {font-size:1.2rem}.brand-mark {width:28px;height:28px}.mast-end .login-link {display:none}.mast-end .who {display:none}.mast-end form {display:none}

 .section-heading {display:block;margin-bottom:1.7rem}.section-heading>p {max-width:32rem;margin-top:1.1rem;font-size:.96rem}.section-heading>.text-link {margin-top:1rem}

 .foot {grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;padding-top:2.5rem}.foot-brand {grid-column:1/-1}.foot-brand p br {display:none}.foot-brand p {max-width:19rem}.foot h2 {font-size:.7rem}.foot li a {font-size:.85rem}
 .footer-bottom {padding-block:1.5rem}.footer-bottom>nav {gap:.7rem}
 .auth-shell {display:flex;flex-direction:column;gap:1.5rem}.auth-aside {padding:0;max-width:none}.auth-aside h2 {font-size:1.6rem}.auth-card {width:100%;padding:1.5rem}.auth-card h1 {font-size:2.3rem}
 .content-grid,.worksheet-fields {grid-template-columns:1fr}.guide-toc ul {grid-template-columns:1fr}.guide-body h2 {font-size:1.8rem}.guide-body p {font-size:1rem}
 .workspace-header .actions {width:100%}.workspace-section,.workspace .panel {padding:1.25rem}.workspace .split {grid-template-columns:1fr}.workspace-grid {gap:1rem}.stat-list {gap:1rem}.stat-list>div {padding-right:1rem}
 .page-intro {padding-bottom:1.5rem;margin-bottom:1.5rem}.page-intro h1 {font-size:2.4rem}.standfirst {font-size:1.05rem}
 .sec.tint {padding:1.5rem}.figures {grid-template-columns:1fr 1fr}.features {grid-template-columns:1fr}.tiers {grid-template-columns:1fr}.tier.featured::after {top:.75rem}.split {grid-template-columns:1fr}
 .preview-notice {gap:0 .7rem;font-size:.67rem}.ai-read-panel {left:auto;right:0}
 .items.grid input[type=text] {min-width:8rem}.catalogue-summary {gap:.75rem}.catalogue-summary span {font-size:.75rem}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print {
 :root {--paper:#fff;--raise:#fff;--sunken:#fff;--ink:#000;--muted:#333;--faint:#444;--rule:#bbb;--rule-firm:#999;--accent:#000}
 body {font-size:11pt;background:#fff}.masthead,footer,.workspace-sidebar,.preview-notice,.actions,.filters,.skip,.cta,.ai-read,.guide-toc {display:none!important}
 main,.workspace main {max-width:none;padding:0}.app-shell,.guide-layout {display:block}.panel,.tier,.scorecard {box-shadow:none;break-inside:avoid}h1,h2 {break-after:avoid}.scroll {overflow:visible;background:none}.items tr,.record {break-inside:avoid}
 .catalogue-checklist textarea {min-height:3rem}.catalogue-checklist h2 {margin-top:1.5rem}.worksheet-fields {grid-template-columns:1fr 1fr}
}
/* Product review and account details. */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.guide-toc {max-height:calc(100vh - 4rem);overflow:auto}
.usage-summary {display:flex;align-items:center;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--rule);padding-bottom:1.3rem;margin-bottom:1.3rem}
.product-comparison {display:grid;grid-template-columns:.8fr 1.2fr;gap:1.5rem;align-items:start;margin:1.75rem 0}
.product-comparison>section,.product-comparison>article,.product-comparison>div {min-width:0}
.listing-draft {background:var(--raise);border:1px solid var(--rule);padding:1.8rem}
.listing-draft>h2 {margin-bottom:1.5rem}
.listing-description {font-size:1rem;line-height:1.8;color:var(--ink);white-space:pre-wrap;max-width:44rem}
.marketplace-picker {display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0}
.marketplace-picker label {margin:0}.marketplace-picker select {width:auto;min-width:11rem}
.tier-price {font:400 2rem/1.3 var(--display);margin:1rem 0}
.settings-page {max-width:58rem}
.danger-section {border-top:2px solid #d7a59a;margin-top:3rem;padding-top:2rem}
.danger-section h2 {color:var(--danger)}
.shop-card {background:var(--raise);border:1px solid var(--rule);border-left:3px solid var(--accent);padding:1.7rem;margin:1.5rem 0}
.shop-card h2 {margin-bottom:1rem}
@media(max-width:52rem) {.product-comparison {grid-template-columns:1fr}.guide-toc {max-height:none;overflow:visible}}
@media(max-width:38rem) {.usage-summary {align-items:start;flex-direction:column;gap:1rem}.listing-draft,.shop-card {padding:1.25rem}}
.workspace .section-heading {display:block;margin-bottom:1.4rem}
.workspace .section-heading .eyebrow {margin-bottom:.6rem}
.workspace-section.usage-summary {display:block;border-bottom:1px solid var(--rule);margin-bottom:0}
.workspace-section.usage-summary .bar {margin-bottom:1.2rem}
.page-dashboard>.workspace-grid {margin-top:1.5rem}
.page-dashboard>.workspace-grid:first-of-type {grid-template-columns:minmax(0,1fr) 17rem}
.page-dashboard .workflow-options {display:block}
.page-dashboard .workflow-options>a {padding:1.2rem 0;background:transparent;border:0;border-top:1px solid var(--rule);position:relative}
.page-dashboard .workflow-options>a:first-child {border-top:0;padding-top:0}
.page-dashboard .workflow-options>a:last-child {padding-bottom:0}
.page-dashboard .workflow-options .eyebrow {font-size:.65rem;margin-bottom:.35rem}
.page-dashboard .workflow-options h3 {margin-bottom:.35rem}
.page-dashboard .workflow-options p {margin-bottom:.5rem}
.page-dashboard .workflow-options .text-link {font-size:.78rem;border:0}
.page-dashboard .workflow-options>a:hover h3 {color:var(--accent);text-decoration:underline;text-underline-offset:4px}
@media(max-width:68rem) {.page-dashboard>.workspace-grid:first-of-type {grid-template-columns:minmax(0,1fr) 15rem}}
@media(max-width:52rem) {.page-dashboard>.workspace-grid:first-of-type {grid-template-columns:minmax(0,1fr) 15rem}}
@media(max-width:38rem) {.page-dashboard>.workspace-grid:first-of-type {grid-template-columns:1fr}}

/* Put the account task first on small screens. */
@media(max-width:38rem) {.auth-shell>.auth-card {order:-1}}

/* Public reading and catalogue layouts. */
.page-guides .section-heading {display:block}
.page-guides .section-heading>p {max-width:42rem}
.page-guides .section-heading>.eyebrow {margin-bottom:.85rem}
.page-guides .section-heading>h2 {max-width:24ch}
.guide-toc ol {list-style:none;padding:0;margin:0}
.guide-toc ol>li {margin:0}
.public-site .actions .button {white-space:normal;text-align:center;max-width:100%}
.catalogue-intro {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,5vw,4rem)}
.catalogue-intro>div {min-width:0}
.catalogue-intro h1 {max-width:17ch}
.catalogue-intro .proof {background:var(--accent-wash);border:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.3rem);margin-top:.5rem}
.catalogue-intro .proof-head {font:400 1.8rem/1.25 var(--display);letter-spacing:-.025em;margin-bottom:1.5rem}
.catalogue-intro .proof dl {display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem .9rem;margin:0;font-size:.9rem;line-height:1.65}
.catalogue-intro .proof dt {font-weight:600;color:var(--ink)}
.catalogue-intro .proof dd {margin:0;color:var(--muted)}
.catalogue-intro .proof-arrow {border-top:1px solid var(--rule-firm);padding-top:1.3rem;margin:1.5rem 0 .7rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.catalogue-intro .proof-out {font:400 1.4rem/1.4 var(--display);margin-bottom:.9rem}
.catalogue-intro .proof-note {font-size:.78rem;color:var(--muted);margin:0}
.page-catalogue-cleanup .request-panel {border-top:1px solid var(--rule-firm);padding-top:2.5rem;margin-top:3rem}
@media(max-width:52rem) {
 .guide-toc ol {display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
 .catalogue-intro {grid-template-columns:1fr;gap:1.5rem}
 .catalogue-intro h1 {max-width:23ch}
 .catalogue-intro .proof {max-width:42rem;margin-top:0}
}
@media(max-width:38rem) {
 .guide-toc ol {grid-template-columns:1fr}
 .catalogue-intro .proof dl {grid-template-columns:1fr;gap:.3rem}
 .catalogue-intro .proof dd {margin-bottom:.9rem}
 .catalogue-intro .proof dd:last-child {margin-bottom:0}
 .catalogue-intro h1 {font-size:2.4rem}
}
@media print {
 header.page-intro,header.workspace-header {display:block!important}
 .page-intro {padding-bottom:1rem;margin-bottom:1rem}
 .catalogue-intro {display:block}
 .catalogue-intro .proof {break-inside:avoid;margin-top:1.5rem}
}

/* Product keys can contain long unbroken supplier identifiers. */
.page-products h1 {overflow-wrap:anywhere}

/* Keep authentication task order consistent for keyboard and small screens. */
.auth-shell>.auth-card {grid-column:2;grid-row:1}
.auth-shell>.auth-aside {grid-column:1;grid-row:1}
.auth-card p {overflow-wrap:anywhere}