/* LeadArc article layout. Built from coss ui tokens (coss.com/ui): neutral palette, 1px hairlines,
   rounded-lg buttons, rounded-2xl cards, rounded-sm badges, text-sm tables, muted foreground #737373. */
.at, .at *, .at *::before, .at *::after{ box-sizing:border-box; }
.at{ --fg:#171717; --body:#404040; --muted:#737373; --line:rgba(0,0,0,.08); --muted-bg:#f5f5f5; --card:#fff;
  --disp:"CS Display","CS UI",ui-sans-serif,system-ui,sans-serif; --ui:"CS UI",ui-sans-serif,system-ui,sans-serif;
  font-family:var(--ui); color:var(--body); }
.at-sec{ border-top:1px solid var(--ds-hair,rgba(0,0,0,.06)); }
.at-shell{ max-width:1200px; margin:0 auto; padding:0 24px; }
/* header */
body{ margin:0; background:var(--ds-bg,#fcfcfc); }
.at-crumbs{ padding-top:40px !important; }
.at-grid{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,760px); grid-template-rows:auto 1fr; gap:0 56px; padding:28px 0 72px; }
.at-grid > .at-toc{ grid-column:1; grid-row:1 / span 2; }
.at-head{ grid-column:2; grid-row:1; padding:0 0 8px; }
.at-grid > .at-prose{ grid-column:2; grid-row:2; }
.at-head-in{ max-width:760px; }
.at-tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0 0; }
.at-tags .at-badge{ height:28px; padding:0 10px; font-size:13px; border-radius:8px; }
.at-chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--fg); font-size:13px; font-weight:500; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.at-chip:hover{ background:#f5f5f5; }
.at-chip svg{ width:15px; height:15px; flex:none; display:block; }
.at-prose mark.hl, mark.hl{ background:#fef3c7; color:#92400e; padding:0 4px; border-radius:4px; font-weight:500; }
.at-crumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; padding:0; list-style:none; font-size:13px; color:var(--muted); }
.at-crumbs a{ color:var(--muted); text-decoration:none; } .at-crumbs a:hover{ color:var(--fg); }
.at-crumbs li+li::before{ content:"/"; margin-right:6px; opacity:.5; }
.at-badge{ display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--fg); font-size:12px; font-weight:500; }
.at-badge--muted{ background:var(--muted-bg); border-color:transparent; color:var(--muted); }
.at-badge--ok{ background:rgba(16,185,129,.08); border-color:transparent; color:#047857; }
.at-badge--warn{ background:rgba(245,158,11,.1); border-color:transparent; color:#b45309; }
.at-h1{ margin:0; color:var(--fg); font-family:var(--disp); font-weight:600; font-size:clamp(2rem,4vw,2.75rem); line-height:1.1; letter-spacing:-.022em; text-wrap:balance; }
.at-dek{ margin:16px 0 0; font-size:18px; line-height:1.55; color:var(--muted); text-wrap:pretty; }
.at-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:20px 0 0; font-size:13px; color:var(--muted); }
.at-meta .dot{ opacity:.5; }
.at-cover{ display:block; max-width:760px; margin:28px 0 0; aspect-ratio:16/9; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#f4f4f5; }
.at-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
/* body grid: TOC left, prose right. The aside stretches the full grid height so the sticky nav stops at the bottom. */
.at-toc{ align-self:stretch; }
.at-toc-in{ position:sticky; top:calc(var(--hdr-h,116px) + 24px); padding-top:6px; }
.at-toc-label{ margin:0 0 10px; font-size:12px; font-weight:500; color:var(--muted); }
.at-toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.at-toc li a{ display:block; margin-left:-1px; padding:5px 0 5px 12px; border-left:1px solid transparent; font-size:13.5px; line-height:1.4; color:var(--muted); text-decoration:none; transition:color .15s,border-color .15s; }
.at-toc li.l3 a{ padding-left:24px; font-size:13px; }
.at-toc li a:hover{ color:var(--fg); }
.at-toc li a[aria-current="true"]{ color:var(--fg); border-left-color:var(--fg); font-weight:500; }
.at-toc-m{ display:none; }
/* prose */
.at-prose{ max-width:760px; min-width:0; font-size:16.5px; line-height:1.7; }
.at-prose h2{ margin:56px 0 0; color:var(--fg); font-family:var(--disp); font-weight:600; font-size:28px; line-height:1.2; letter-spacing:-.018em; scroll-margin-top:calc(var(--hdr-h,116px) + 24px); }
.at-prose h3{ margin:32px 0 0; color:var(--fg); font-family:var(--disp); font-weight:600; font-size:20px; line-height:1.3; letter-spacing:-.01em; scroll-margin-top:calc(var(--hdr-h,116px) + 24px); }
.at-prose > h2:first-child{ margin-top:24px; }
.at-prose p{ margin:16px 0 0; }
.at-prose ul, .at-prose ol{ margin:16px 0 0; padding-left:22px; } .at-prose li{ margin:6px 0 0; }
.at-prose a{ color:var(--fg); text-underline-offset:3px; }
.at-prose strong{ color:var(--fg); font-weight:600; }
.at-prose blockquote{ margin:28px 0 0; padding:2px 0 2px 20px; border-left:2px solid var(--fg); color:var(--fg); font-size:18px; line-height:1.55; }
.at-prose blockquote p{ margin:0; } .at-prose blockquote cite{ display:block; margin-top:8px; font-size:13px; font-style:normal; color:var(--muted); }
.at-fig{ margin:32px 0 0; }
.at-fig-frame{ aspect-ratio:16/9; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#f4f4f5; }
.at-fig-frame img, .at-fig-frame iframe{ display:block; width:100%; height:100%; border:0; object-fit:cover; }
.at-fig figcaption, .at-table-cap{ margin-top:10px; font-size:13px; line-height:1.5; color:var(--muted); }
.at-video-ph{ position:relative; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; height:100%; background:#18181b; color:#a1a1aa; font-size:13px; }
.at-video-ph .play{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.at-video-ph .play svg{ width:20px; height:20px; fill:#fafafa; margin-left:3px; }
/* coss ui Table, default variant: text-sm, muted head, row hairlines */
.at-table{ position:relative; width:100%; overflow-x:auto; margin:28px 0 0; -webkit-overflow-scrolling:touch; }
.at-table table{ width:100%; min-width:560px; border-collapse:collapse; font-size:14px; line-height:1.45; }
.at-table caption{ caption-side:bottom; text-align:left; margin-top:10px; font-size:13px; color:var(--muted); }
.at-table th{ height:40px; padding:0 8px; text-align:left; font-weight:500; color:var(--muted); white-space:nowrap; border-bottom:1px solid var(--line); }
.at-table tbody th{ padding:10px 8px; text-align:left; font-weight:500; color:var(--fg); border-bottom:1px solid var(--line); }
.at-table td{ padding:10px 8px; color:var(--fg); border-bottom:1px solid var(--line); vertical-align:middle; }
.at-table tbody tr:last-child :is(td,th){ border-bottom:0; }
.at-table tbody tr:hover td{ background:rgba(0,0,0,.02); }
.at-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
/* coss ui CardFrame + Table variant="card": muted frame, separate white card body with rounded-xl corners */
.at-frame{ margin:28px 0 0; border:1px solid var(--line); border-radius:16px; background:var(--muted-bg); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.at-frame-head{ display:grid; grid-template-columns:1fr auto; gap:2px 16px; padding:14px 20px; }
.at-frame-title{ font-size:14px; font-weight:600; color:var(--fg); } .at-frame-desc{ font-size:13px; color:var(--muted); }
.at-frame-head .at-badge{ grid-column:2; grid-row:1 / span 2; align-self:center; }
.at-frame .at-table{ margin:0; overflow-x:auto; padding:0 0 0; }
.at-frame table{ border-collapse:separate; border-spacing:0; }
.at-frame thead th{ border-bottom:0; padding:0 16px; }
.at-frame tbody :is(td,th){ background:var(--card); padding:12px 16px; border-bottom:1px solid var(--line); }
.at-frame tbody :is(td,th):first-child{ border-left:1px solid var(--line); }
.at-frame tbody :is(td,th):last-child{ border-right:1px solid var(--line); }
.at-frame tbody tr:first-child :is(td,th){ border-top:1px solid var(--line); }
.at-frame tbody tr:first-child :is(td,th):first-child{ border-top-left-radius:12px; } .at-frame tbody tr:first-child :is(td,th):last-child{ border-top-right-radius:12px; }
.at-frame tbody tr:last-child :is(td,th){ border-bottom:1px solid var(--line); }
.at-frame tbody tr:last-child :is(td,th):first-child{ border-bottom-left-radius:12px; } .at-frame tbody tr:last-child :is(td,th):last-child{ border-bottom-right-radius:12px; }
.at-frame tbody tr:hover :is(td,th){ background:#fbfbfb; }
.at-frame .at-table{ margin:0 -1px -1px; width:calc(100% + 2px); }
.at-frame caption{ padding:0 20px 12px; margin:0; caption-side:top; }
.at-frame td.us{ font-weight:600; }
.at-frame th.us{ color:var(--fg); }
/* CTA banner: coss ui Card shape on zinc #18181b (footer colour) */
.at-cta{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; min-height:0; margin:48px 0 0; padding:28px 32px; border-radius:16px; background:#18181b; border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.08); color:#fafafa; }
.at-cta-copy{ position:relative; z-index:1; max-width:62%; }
.at-cta .at-cta-title{ margin:0; font-family:var(--disp); font-weight:600; font-size:22px; line-height:1.2; letter-spacing:-.015em; color:#fafafa; }
.at-cta .at-cta-sub{ margin:8px 0 0; font-size:14.5px; line-height:1.5; color:#a1a1aa; }
.at-cta .at-cta-btn{ margin-top:18px; background:#2a2a2e; color:#fafafa; border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.3); text-decoration:none; }
.at-cta .at-cta-btn:hover{ background:#323236; } .at-cta .at-cta-btn svg{ opacity:.5; }
.at-cta-mark{ position:absolute; right:-28px; top:50%; transform:translateY(-50%); width:260px; height:auto; z-index:0; pointer-events:none; overflow:visible; }
.at-cta-mark path{ fill:none; stroke:#fff; stroke-opacity:.16; stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.at-end{ margin-top:56px; }
/* responsive */
@media (max-width:1000px){
  .at-grid{ grid-template-columns:minmax(0,1fr); } .at-head, .at-grid > .at-prose{ grid-column:1; } .at-head-in{ max-width:none; }
  .at-toc{ display:none; }
  .at-prose{ max-width:none; }
  .at-toc-m{ display:block; margin:16px 0 0; border:1px solid var(--line); border-radius:12px; background:#fff; }
  .at-toc-m summary{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:14px; font-weight:500; color:var(--fg); cursor:pointer; list-style:none; }
  .at-toc-m summary::-webkit-details-marker{ display:none; }
  .at-toc-m summary::after{ content:""; width:8px; height:8px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
  .at-toc-m[open] summary::after{ transform:rotate(-135deg); }
  .at-toc-m ol{ list-style:none; margin:0; padding:0 16px 12px; }
  .at-toc-m li a{ display:block; padding:6px 0; font-size:14px; color:var(--muted); text-decoration:none; }
  .at-toc-m li.l3 a{ padding-left:14px; }
}
@media (max-width:640px){
  .at-shell{ padding:0 18px; }
  .at-crumbs{ padding-top:28px !important; } .at-grid{ padding-top:20px; }
  .at-dek{ font-size:16.5px; }
  .at-prose h2{ font-size:24px; margin-top:44px; }
  .at-cta{ padding:24px 20px; }
  .at-cta-copy{ max-width:none; }
  .at-cta-mark{ right:-90px; width:220px; } .at-cta-mark path{ stroke-opacity:.1; }
}

.at-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.at a.at-badge{ text-decoration:none; }
.at-badge--link:hover{ background:#f5f5f5; }
@media (max-width:1000px){ .at-cover{ max-width:none; } }
.at-cover picture{ display:block; width:100%; height:100%; }
.at-prose .pb-prose{ margin-top:16px; }
/* ---- Content components (coss ui Card / Badge primitives) ---- */
/* Email script card */
.at-scripts{ display:grid; gap:12px; margin:28px 0 0; }
.at-prose > .at-script{ margin-top:24px; }
.at-prose .at-script, .at-script{ position:relative; margin:0; padding:18px 20px 18px 52px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); color:var(--fg); font-size:15.5px; line-height:1.6; }
.at-script::before{ content:""; position:absolute; left:18px; top:20px; width:18px; height:18px; opacity:.45;
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.at-prose .at-script p{ margin:0; } .at-prose .at-script p+p{ margin-top:10px; }
/* Metric cards (stats) and step cards (flow) */
.at-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:28px 0 0; padding:0; list-style:none; }
.at-prose .at-metrics li, .at-metric{ margin:0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:4px; }
.at-metric dt, .at-metric .lbl{ order:2; font-size:13px; line-height:1.4; color:var(--muted); font-weight:400; }
.at-metric dd, .at-metric .val{ order:1; margin:0; font-family:var(--disp); font-weight:600; font-size:26px; line-height:1.1; letter-spacing:-.015em; color:var(--fg); }
.at-steps{ counter-reset:step; }
.at-steps .at-metric{ position:relative; }
.at-steps .at-metric::after{ counter-increment:step; content:counter(step); position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:6px; background:var(--muted-bg); color:var(--muted); font-size:11.5px; font-weight:500; }
/* Up/down checklist (offer levers) */
.at-levers{ display:grid; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.at-prose .at-levers li{ margin:0; display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--fg); font-size:15px; }
.at-levers .at-badge{ min-width:24px; justify-content:center; font-size:13px; }
.at-skip{ position:fixed; top:8px; left:16px; z-index:100002; transform:translateY(-160%); padding:10px 16px; border-radius:10px; background:#fff; border:1px solid var(--line, rgba(0,0,0,.08)); }
.at-skip:focus{ transform:none; }
.at-prose .at-levers, .at-prose .at-metrics{ padding-left:0; }
/* Callout card (Notion callouts, FAQ answers). Same surface as .at-script, no quote icon. */
.at-prose .at-callout{ margin:20px 0 0; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); color:var(--fg); font-size:15.5px; line-height:1.6; }
.at-prose .at-callout > :first-child{ margin-top:0; }
.at-prose .at-callout p{ margin:10px 0 0; } .at-prose .at-callout ul{ margin-top:10px; }
.at-prose .at-callout + .at-callout{ margin-top:12px; }
.at-prose .at-muted{ color:var(--muted); font-size:14px; }
.at-prose hr{ margin:32px 0 0; border:0; border-top:1px solid var(--line); }

/* ds-theme forces "CS UI" on every element with !important; the CTA title is a <p>, so opt it back into the Cal Sans display face. */
.at-cta .at-cta-title{ font-family:"CS Display","CS UI",ui-sans-serif,system-ui,sans-serif !important; }
/* ---- Newsletter card under the outline (parts/ds-article-newsletter.html) ---- */
/* Wider outline column (Leon, 2026-10-24): the article keeps its 760px measure and moves right until its
   right edge meets the shell's right padding, so the space left and right of the page reads the same.
   The left column takes whatever is spare (336px at full width) and never drops below the old 220px, so
   between 1001 and 1200px wide the article is exactly as wide as before. */
.at-toc-in{ display:flex; flex-direction:column; gap:28px; }
/* The outline and the card share one sticky column, so a long outline (the playbooks have 13+ entries)
   scrolls inside its own box instead of pushing the card below the fold. 516px = header offset, label,
   gap and the card. */
.at-toc .at-toc-nav ol{ max-height:max(150px, calc(100vh - var(--hdr-h,116px) - 516px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; position:relative; border-left:0; box-shadow:inset 1px 0 0 var(--line); }
.at-toc .at-toc-nav li a{ margin-left:0; } /* the scroll box would clip the -1px offset of the active marker */
@media (max-height:760px){ .at-toc .at-toc-nav ol{ max-height:max(150px, calc(100vh - var(--hdr-h,116px) - 360px)); } }

/* Card: light, like the case study sticky box (.csd-float). */
.at-nl{ position:relative; margin:0; padding:0 20px 20px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden; color:var(--fg); }
/* LeadArc mark as a 1px outline that fades out at the bottom: the same mask as the case study calendar (.cal). */
.at-nl-art{ display:flex; justify-content:center; height:150px; margin:0 -20px 12px; padding-top:16px; overflow:hidden; pointer-events:none; user-select:none;
  /* Fade like the case-study calendar. The mask sits on the clipping box itself, so alpha reaches 0 exactly where the box ends: no hard cut. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.at-nl-art svg{ flex:none; width:264px; height:267px; }
.at-nl-art path{ fill:none; stroke:#171717; stroke-opacity:.5; stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.at-nl-title{ margin:0; color:var(--fg); font-family:var(--disp) !important; font-weight:600; font-size:18px; line-height:1.25; letter-spacing:-.012em; }
.at-nl-sub{ margin:6px 0 16px; color:var(--muted); font-size:13.5px; line-height:1.5; }
.at-nl-sr, .at-nl-hp{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.at-nl-row{ display:flex; gap:8px; align-items:flex-start; }

/* coss ui tokens, from packages/ui/src/styles/theme.css (:root, light) in github.com/cosscom/coss @ f2ec86f.
   Tailwind v4 palette: neutral-50/400/500/800, red-500. */
.at-nl{
  --coss-background:#fff; --coss-foreground:oklch(26.9% 0 0); --coss-input:rgb(0 0 0 / 10%);
  --coss-ring:oklch(70.8% 0 0); --coss-primary:oklch(26.9% 0 0); --coss-primary-foreground:oklch(98.5% 0 0);
  --coss-muted-foreground:color-mix(in srgb, oklch(55.6% 0 0) 90%, #000); --coss-destructive:oklch(63.7% .237 25.331);
  --coss-radius-lg:.625rem; --coss-ease:cubic-bezier(.4,0,.2,1);
}

/* coss Input, ported from packages/ui/src/components/input.tsx (size "default").
   <span data-slot="input-control"> carries the border, shadow, ring and the ::before inner highlight;
   the <input data-slot="input"> inside is borderless. */
.at-nl [data-slot="input-control"]{ position:relative; display:inline-flex; width:100%; min-width:0; border-radius:var(--coss-radius-lg); border:1px solid var(--coss-input); background-color:var(--coss-background); color:var(--coss-foreground); background-clip:padding-box; font-size:1rem; line-height:1.5rem; box-shadow:0 1px 2px 0 rgb(0 0 0 / 5%); transition:box-shadow 150ms var(--coss-ease); }
.at-nl [data-slot="input-control"]::before{ content:""; pointer-events:none; position:absolute; inset:0; border-radius:calc(var(--coss-radius-lg) - 1px); }
.at-nl [data-slot="input-control"]:not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid]))::before{ box-shadow:0 1px rgb(0 0 0 / 4%); }
.at-nl [data-slot="input-control"]:has([aria-invalid]){ border-color:color-mix(in oklab, var(--coss-destructive) 36%, transparent); }
.at-nl [data-slot="input-control"]:has(:focus-visible){ border-color:var(--coss-ring); }
.at-nl [data-slot="input-control"]:has(:disabled, :focus-visible, [aria-invalid]){ box-shadow:none; }
.at-nl [data-slot="input-control"]:has(:focus-visible){ box-shadow:0 0 0 3px color-mix(in oklab, var(--coss-ring) 24%, transparent); }
.at-nl [data-slot="input-control"]:has(:focus-visible):has([aria-invalid]){ border-color:color-mix(in oklab, var(--coss-destructive) 64%, transparent); box-shadow:0 0 0 3px color-mix(in oklab, var(--coss-destructive) 16%, transparent); }
.at-nl [data-slot="input-control"]:has(:autofill){ background-color:color-mix(in oklab, var(--coss-foreground) 4%, transparent); }
.at-nl [data-slot="input-control"]:has(:disabled){ opacity:.64; }
.at-nl [data-slot="input"]{ box-sizing:border-box; display:block; height:2.125rem; width:100%; min-width:0; margin:0; border:0; border-radius:inherit; padding:0 calc(.75rem - 1px); background-color:transparent; color:var(--coss-foreground); font:inherit; line-height:2.125rem; outline:none; -webkit-appearance:none; appearance:none; transition:background-color 5000000s ease-in-out 0s; }
.at-nl [data-slot="input"]::placeholder{ color:color-mix(in oklab, var(--coss-muted-foreground) 72%, transparent); opacity:1; }
.at-nl [data-slot="input"]:autofill{ -webkit-text-fill-color:var(--coss-foreground); }

/* coss Button, variant "default", size "default", ported from packages/ui/src/components/button.tsx (buttonVariants).
   box-shadow keeps Tailwind v4's layer order: inset-shadow, ring-offset, ring, shadow. */
.at-nl [data-slot="button"]{ position:relative; display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; cursor:pointer; margin:0;
  height:2.25rem; padding:0 calc(.75rem - 1px); border-radius:var(--coss-radius-lg); border:1px solid var(--coss-primary); background-color:var(--coss-primary); color:var(--coss-primary-foreground);
  font:inherit; font-size:1rem; line-height:1.5rem; font-weight:500; outline:none; -webkit-appearance:none; appearance:none;
  box-shadow:inset 0 1px rgb(255 255 255 / 16%), 0 1px 2px 0 color-mix(in oklab, var(--coss-primary) 24%, transparent);
  transition:box-shadow 150ms var(--coss-ease); }
.at-nl [data-slot="button"]::before{ content:""; pointer-events:none; position:absolute; inset:0; border-radius:calc(var(--coss-radius-lg) - 1px); }
@media (pointer:coarse){ .at-nl [data-slot="button"]::after{ content:""; position:absolute; width:100%; height:100%; min-width:2.75rem; min-height:2.75rem; } }
.at-nl [data-slot="button"]:hover{ background-color:color-mix(in oklab, var(--coss-primary) 90%, transparent); }
.at-nl [data-slot="button"]:focus-visible{ box-shadow:inset 0 1px rgb(255 255 255 / 16%), 0 0 0 1px var(--coss-background), 0 0 0 3px var(--coss-ring), 0 1px 2px 0 color-mix(in oklab, var(--coss-primary) 24%, transparent); }
.at-nl [data-slot="button"]:active{ box-shadow:inset 0 1px rgb(0 0 0 / 8%); }
.at-nl [data-slot="button"]:active:focus-visible{ box-shadow:inset 0 1px rgb(0 0 0 / 8%), 0 0 0 1px var(--coss-background), 0 0 0 3px var(--coss-ring); }
.at-nl [data-slot="button"]:disabled{ pointer-events:none; opacity:.64; box-shadow:none; }
/* Tailwind sm (40rem): the compact desktop sizes. */
@media (min-width:40rem){
  .at-nl [data-slot="input-control"]{ font-size:.875rem; line-height:1.25rem; }
  .at-nl [data-slot="input"]{ height:1.875rem; line-height:1.875rem; }
  .at-nl [data-slot="button"]{ height:2rem; font-size:.875rem; line-height:1.25rem; }
}

.at-nl-msg{ margin:10px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); }
.at-nl-msg:empty{ display:none; }
.at-nl[data-state="error"] .at-nl-msg{ color:#b91c1c; }
.at-nl[data-state="done"] .at-nl-msg{ color:#15803d; }
.at-nl--m{ display:none; }
@media (max-height:760px){ .at-toc .at-nl-art{ display:none; } .at-toc .at-nl{ padding-top:20px; } }
@media (max-width:1000px){
  .at-nl--m{ display:block; max-width:440px; margin:56px 0 0; }
  .at-nl--m .at-nl-art{ height:170px; } .at-nl--m .at-nl-art svg{ width:300px; height:304px; }
  .at-nl--m .at-nl-title{ font-size:19px; } .at-nl--m .at-nl-sub{ font-size:14px; }
}