/* =============================================================
   AI Token Calculator
   Two-ink risograph print shop: ultramarine + acid yellow
   overprinting on warm newsprint. Tokens are physical chips of
   ink laid on paper.

   EVERYTHING IS SCOPED UNDER .atc.
   The design tokens here (--paper, --ink, --blue, --acid...) share
   short, generic names with variables that could easily exist
   elsewhere on the site. Declaring them on :root would repaint every
   other tool. They live on .atc instead, which is a plain element
   selector, so cascade order does not matter and this file can be
   loaded on one page only.

   THEME: follows the site. The original standalone page keyed its
   dark mode off body[data-theme] with its own localStorage entry;
   the site sets data-theme on <html> before first paint. These rules
   read the site's attribute, so the page switches with everything
   else and the second toggle has been removed rather than left to
   disagree with the first.
   ============================================================= */

.atc {
    --paper: #FBFAF6; --paper-2: #F3F1E9; --surface: #FFFFFF;
    --ink: #15161A; --ink-60: #5C5F6B; --ink-35: #8E92A0;
    --rule: #DEDBCF; --rule-2: #EAE7DC;
    --blue: #1F3BE8; --blue-soft: #E3E7FF;
    --acid: #E9F53C; --acid-soft: #F7FBC9;
    --clay: #F04E23; --clay-soft: #FFE3DA;
    --moss: #2E7D5B; --moss-soft: #DCF0E6;
    --on-blue: #FFFFFF;
    --tok-blend: multiply;
    --panel-dark: #15161A; --panel-dark-fg: #FBFAF6; --panel-dark-rule: #2C2E36; --panel-dark-mute: #8B8F9D;
    --select-dark-bg: #22242E; --select-dark-bd: #3A3D48;

    --r-sm: 6px; --r: 10px; --r-lg: 18px;
    --shadow: 0 1px 0 var(--rule), 0 12px 28px -22px rgba(21,22,26,.55);
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --wrap: 1180px;
    --dot: var(--rule);

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(var(--dot) .8px, transparent .9px);
    background-size: 22px 22px;
    background-position: -11px -11px;
    scroll-padding-top: 78px;
}

[data-theme="dark"] .atc {
    --paper: #101116; --paper-2: #171922; --surface: #1B1D27;
    --ink: #F2F1EC; --ink-60: #A2A6B4; --ink-35: #767B8C;
    --rule: #2B2E3A; --rule-2: #232633;
    --blue: #7B8CFF; --blue-soft: #242A52;
    --acid: #E9F53C; --acid-soft: #3A3D1C;
    --clay: #FF7A55; --clay-soft: #42231A;
    --moss: #4FBF8E; --moss-soft: #17332A;
    --on-blue: #0B0C10;
    --tok-blend: screen;
    --panel-dark: #1B1D27; --panel-dark-fg: #F2F1EC; --panel-dark-rule: #2F323F; --panel-dark-mute: #8B8F9D;
    --select-dark-bg: #252836; --select-dark-bd: #3A3D48;
    --shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(0,0,0,.9);
    --dot: #20222C;
}

.atc *, .atc *::before, .atc *::after { box-sizing: border-box }
.atc h1, .atc h2, .atc h3, .atc h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0 }
.atc p { margin: 0 }
.atc a { color: var(--blue) }
.atc button, .atc input, .atc select, .atc textarea { font: inherit; color: inherit }
.atc :focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; border-radius: 3px }
.atc .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px }
.atc .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 }

.atc .eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); display: flex; align-items: center; gap: 9px }
.atc .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--blue); flex: none }
.atc .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums }
.atc .muted { color: var(--ink-60) }
.atc .small { font-size: 13.5px }
.atc .card { background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow) }
.atc .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid var(--ink); background: var(--paper); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--ink); transition: transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease }
.atc .btn:hover { background: var(--acid); color: #15161A }
.atc .btn:active { transform: translateY(1px) }
.atc .btn--primary { background: var(--blue); color: var(--on-blue); border-color: var(--blue) }
.atc .btn--primary:hover { background: var(--blue); filter: brightness(1.1); color: var(--on-blue) }
.atc .btn--ghost { border-color: var(--rule); color: var(--ink-60); background: transparent }
.atc .btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--acid-soft) }

/* ---- in-page section nav -------------------------------------
   Was a sticky site header in the standalone file. The site already
   has one of those, and two sticky bars competing for the top of the
   viewport is a bad experience on a phone - so this is a plain
   scrolling strip that keeps the jump links and the scroll-spy. */
.atc .section-nav { border-bottom: 1.5px solid var(--ink); margin-bottom: 4px }
.atc .section-nav__in { display: flex; align-items: center; gap: 20px; min-height: 52px; flex-wrap: wrap }
.atc .section-nav a { text-decoration: none; color: var(--ink-60); font-size: 14px; font-weight: 500; padding-bottom: 2px; border-bottom: 2px solid transparent }
.atc .section-nav a:hover { color: var(--ink); border-bottom-color: var(--acid) }
.atc .section-nav a.active { color: var(--ink); border-bottom-color: var(--blue) }
@media (max-width: 700px) { .atc .section-nav__in { gap: 13px; font-size: 13px } }

/* ---- hero ---------------------------------------------------- */
.atc .hero { padding: 22px 0 26px }
.atc .hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 38px; align-items: end }
.atc .hero h1 { font-size: clamp(38px, 5.6vw, 62px); margin: 16px 0 0 }
.atc .hero h1 .ink { background: var(--acid); color: #15161A; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .12em; border-radius: 4px }
.atc .hero__lede { margin-top: 18px; font-size: 17.5px; max-width: 54ch; color: var(--ink-60) }
.atc .hero__side { display: flex; flex-direction: column; gap: 18px }
.atc .hero__facts { display: flex; flex-wrap: wrap; gap: 10px }
.atc .chip-fact { font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; background: var(--paper) }
.atc .chip-fact b { color: var(--blue) }

/* The tool's own image, from the database.
   Deliberately unstyled: these are transparent PNGs, so a border, background
   or rounded corner would draw a box around artwork that was designed to sit
   directly on the page. No object-fit or aspect-ratio either - the image keeps
   its own proportions rather than being cropped to a shape it never had.
   The caption is dropped for the same reason; in the hero the h1 beside it
   already says what this is. */
.atc .hero__shot { margin: 0 }
.atc .hero__shot img { display: block; width: 100%; height: auto; max-width: 460px; margin-left: auto }
@media (max-width: 900px) { .atc .hero__shot img { margin-left: 0 } }

@media (max-width: 900px) { .atc .hero { padding: 14px 0 18px } .atc .hero__grid { grid-template-columns: 1fr; gap: 22px; align-items: start } }

/* ---- calculator ---------------------------------------------- */
.atc .calc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-top: 30px }
@media (max-width: 980px) { .atc .calc { grid-template-columns: 1fr } }
.atc .panel { padding: 20px }
.atc .panel__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.atc .panel__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em }
.atc .panel__tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }

.atc .editor { position: relative }
.atc .editor textarea { width: 100%; min-height: 270px; resize: vertical; border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 16px 16px 34px; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.62 }
.atc .editor textarea:hover { border-color: var(--ink-35) }
.atc .editor textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-soft) }
.atc .editor__badge { position: absolute; right: 12px; bottom: 10px; pointer-events: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-35); background: var(--surface); padding: 1px 6px; border-radius: 5px }
.atc .dropzone { border-color: var(--blue) !important; background: var(--blue-soft) !important }
.atc .samples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.atc .samples > span { font-size: 12.5px; color: var(--ink-35); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase }
.atc .tag { border: 1.5px solid var(--rule); background: var(--paper-2); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; transition: .12s ease; color: var(--ink) }
.atc .tag:hover { border-color: var(--ink); background: var(--acid); color: #15161A }

.atc .readout { position: sticky; top: 80px; align-self: start; padding: 20px; background: var(--panel-dark); color: var(--panel-dark-fg); border-color: var(--ink) }
@media (max-width: 980px) { .atc .readout { position: static } }
.atc .readout .panel__title { color: var(--panel-dark-fg) }
.atc .readout select.input { background: var(--select-dark-bg); border-color: var(--select-dark-bd); color: var(--panel-dark-fg) }
.atc .readout__big { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.atc .readout__big .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 7.6vw, 60px); line-height: 1; letter-spacing: -.035em; color: var(--acid); font-variant-numeric: tabular-nums }
.atc .readout__big .u { font-family: var(--font-mono); font-size: 13px; color: var(--panel-dark-mute); letter-spacing: .06em; text-transform: uppercase }
.atc .readout__note { font-size: 12.5px; color: var(--panel-dark-mute); margin-top: 2px }
.atc .readout__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--panel-dark-mute); margin-bottom: 6px }
.atc .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--panel-dark-rule); border-radius: var(--r); overflow: hidden; margin-top: 18px }
.atc .metric { background: var(--panel-dark); padding: 11px 13px }
.atc .metric dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--panel-dark-mute); margin: 0 }
.atc .metric dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums }
.atc .meter { margin-top: 18px }
.atc .meter__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--panel-dark-mute); font-family: var(--font-mono) }
.atc .meter__track { height: 10px; border-radius: 999px; background: var(--panel-dark-rule); margin-top: 7px; overflow: hidden }
.atc .meter__fill { height: 100%; width: 0; background: var(--acid); transition: width .28s ease }
.atc .meter__fill.warn { background: #FFB020 }
.atc .meter__fill.over { background: #F04E23 }
.atc .meter__msg { font-size: 12.5px; margin-top: 8px; color: var(--panel-dark-mute) }
.atc .meter__msg.over { color: #FFB4A0 }

.atc .viz { margin-top: 22px; padding: 20px; border: 1.5px solid var(--rule); border-radius: var(--r-lg) }
.atc .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-60) }
.atc .legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px }
.atc .toks { border: 1.5px dashed var(--rule); border-radius: var(--r); background: var(--surface); padding: 14px; max-height: 340px; overflow: auto; font-family: var(--font-mono); font-size: 14.5px; line-height: 2.15; white-space: pre-wrap; word-break: break-word }
.atc .tok { border-radius: 5px; padding: 2.5px 1px; mix-blend-mode: var(--tok-blend); box-shadow: inset 0 0 0 1px rgba(128,128,128,.16) }
.atc .tok--0 { background: var(--blue-soft) }
.atc .tok--1 { background: var(--acid-soft) }
.atc .tok--2 { background: var(--clay-soft) }
.atc .tok--3 { background: var(--moss-soft) }
.atc .tok--nl { background: var(--paper-2); color: var(--ink-35) }
.atc .tok:hover { box-shadow: inset 0 0 0 1.5px var(--ink) }
.atc .viz__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-60) }

/* ---- sections ------------------------------------------------ */
.atc .section { padding: 56px 0 0 }
.atc .section__head { max-width: 68ch; margin-bottom: 24px }
.atc .section__head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 12px 0 10px }

.atc .tabs { display: flex; gap: 6px; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px; width: fit-content; background: var(--paper); margin-bottom: 20px }
.atc .tab { border: none; background: transparent; padding: 8px 17px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-60) }
.atc .tab:hover { color: var(--ink) }
.atc .tab[aria-selected="true"] { background: var(--ink); color: var(--paper) }

.atc .cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px }
@media (max-width: 980px) { .atc .cost { grid-template-columns: 1fr } }
.atc .field { margin-bottom: 16px }
.atc .field > label, .atc .field .lbl { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 6px }
.atc .field .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.atc .input, .atc select.input { width: 100%; border: 1.5px solid var(--rule); border-radius: var(--r-sm); padding: 9px 11px; background: var(--surface); font-family: var(--font-mono); font-size: 14.5px }
.atc .input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-soft) }
.atc select.input { cursor: pointer }
.atc input[type=range] { width: 100%; min-width: 110px; accent-color: var(--blue) }
.atc .field .hint { font-size: 12.5px; color: var(--ink-35); margin-top: 6px }
.atc .switch { display: flex !important; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; color: var(--ink-60); text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-body) !important }
.atc .switch input { width: 16px; height: 16px; accent-color: var(--blue) }

.atc .bill { padding: 20px; background: var(--paper-2) }
.atc .bill__rows { margin: 10px 0 0; border-top: 1.5px solid var(--rule) }
.atc .bill__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 14px }
.atc .bill__row span:first-child { color: var(--ink-60) }
.atc .bill__row--total { border-bottom: none; padding-top: 15px; font-size: 16px; font-weight: 500 }
.atc .bill__row--total span:first-child { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 17px }
.atc .bill__total { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.03em; color: var(--blue) }
.atc .bill__scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; margin-top: 16px }
.atc .bill__scale > div { background: var(--paper); padding: 10px 12px }
.atc .bill__scale dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-35) }
.atc .bill__scale dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: 15px }
.atc .chart { width: 100%; height: auto; display: block; margin-top: 6px; overflow: visible }

/* ---- table --------------------------------------------------- */
.atc .table-wrap { border: 1.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: var(--paper) }
.atc .table-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-bottom: 1.5px solid var(--rule); background: var(--paper-2) }
.atc .table-bar .search { border: 1.5px solid var(--rule); border-radius: 999px; padding: 7px 14px; background: var(--surface); font-size: 13.5px; min-width: 170px; max-width: 260px }
.atc .table-bar .search:focus { outline: none; border-color: var(--blue) }
.atc .filters { display: flex; gap: 6px; flex-wrap: wrap }
.atc .filters .tag[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue) }
.atc .table-scroll { overflow-x: auto }
.atc table { border-collapse: collapse; width: 100%; min-width: 920px }
.atc thead th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-60); background: var(--paper-2); padding: 12px 14px; border-bottom: 1.5px solid var(--ink); white-space: nowrap }
.atc thead th.num, .atc tbody td.num { text-align: right }
.atc thead th.sortable { cursor: pointer; user-select: none }
.atc thead th.sortable:hover { color: var(--ink) }
.atc thead th .arrow { opacity: .35; margin-left: 4px }
.atc thead th[aria-sort] .arrow { opacity: 1; color: var(--blue) }
.atc tbody td { padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 14px; vertical-align: middle }
.atc tbody tr:last-child td { border-bottom: none }
.atc tbody tr:hover { background: var(--acid-soft) }
.atc tbody tr.is-active, .atc tbody tr.is-active:hover { background: var(--blue-soft) }
.atc .model-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.atc .dot { width: 8px; height: 8px; border-radius: 50%; flex: none }
.atc .provider { font-size: 12px; color: var(--ink-35); font-family: var(--font-mono) }
.atc .badge { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 999px; padding: 1.5px 7px; color: var(--ink-60) }
.atc .badge--best { background: var(--moss); border-color: var(--moss); color: #fff }
.atc .price-input { width: 86px; text-align: right; border: 1.5px solid transparent; border-radius: var(--r-sm); background: transparent; padding: 5px 7px; font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink) }
.atc .price-input:hover { border-color: var(--rule); background: var(--surface) }
.atc .price-input:focus { outline: none; border-color: var(--blue); background: var(--surface) }
.atc .cost-cell { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap }
.atc .pick { border: 1.5px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; white-space: nowrap; color: var(--ink) }
.atc .pick:hover { border-color: var(--ink); background: var(--acid); color: #15161A }
.atc .pick[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue) }
.atc .table-foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 12px 14px; background: var(--paper-2); border-top: 1.5px solid var(--rule); font-size: 12.5px; color: var(--ink-60) }
.atc .empty-row td { padding: 26px 14px; text-align: center; color: var(--ink-35) }

/* ---- mini calculators ---------------------------------------- */
.atc .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start }
@media (max-width: 900px) { .atc .duo { grid-template-columns: 1fr } }
.atc .mini { padding: 20px }
.atc .mini__out { display: flex; align-items: baseline; gap: 10px; margin-top: 4px }
.atc .mini__out b { font-family: var(--font-display); font-size: 34px; letter-spacing: -.03em; color: var(--blue); font-variant-numeric: tabular-nums }
.atc .mini__out span { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-35) }
.atc .ref-wrap { border: 1.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden }
.atc .ref-wrap table { min-width: 660px }

.atc .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
@media (max-width: 900px) { .atc .grid-3 { grid-template-columns: 1fr } }
.atc .note { padding: 20px }
.atc .note h3 { font-size: 17px; margin-bottom: 8px }
.atc .note p { font-size: 14.5px; color: var(--ink-60) }
.atc .note__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px }
.atc .rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
@media (max-width: 900px) { .atc .rules { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.atc .rule { border: 1.5px solid var(--ink); border-radius: var(--r); padding: 14px; background: var(--paper) }
.atc .rule b { display: block; font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em }
.atc .rule span { font-size: 13px; color: var(--ink-60); display: block; margin-top: 3px }

.atc .faq details { border-bottom: 1.5px solid var(--rule); padding: 4px 0 }
.atc .faq details:first-of-type { border-top: 1.5px solid var(--rule) }
.atc .faq summary { cursor: pointer; list-style: none; padding: 15px 34px 15px 0; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em }
.atc .faq summary::-webkit-details-marker { display: none }
.atc .faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 19px; color: var(--blue) }
.atc .faq details[open] summary::after { content: "–" }
.atc .faq details p { padding: 0 0 16px; max-width: 78ch; color: var(--ink-60); font-size: 14.8px }
.atc .callout { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; border: 1.5px solid var(--ink); border-left-width: 6px; border-radius: var(--r); background: var(--acid-soft); padding: 14px 16px; font-size: 14px }
.atc .callout b { font-family: var(--font-display) }

.atc .tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
@media (max-width: 900px) { .atc .tools { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .atc .tools { grid-template-columns: 1fr } }
.atc .tool { display: block; text-decoration: none; color: var(--ink); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 15px; background: var(--paper); transition: .15s ease }
.atc .tool:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow) }
.atc .tool b { display: block; font-family: var(--font-display); font-size: 15.5px; margin-bottom: 4px }
.atc .tool span { font-size: 13px; color: var(--ink-60) }

/* ---- "What else can you check?" -------------------------------
   The shared _ExploreMore partial, restyled into this page's ink-on-paper
   language. Overriding here rather than editing qdt-explore.css keeps the other
   62 tools exactly as they are - only descendants of .atc are affected.

   The partial's own stylesheet still loads and still wins on anything not
   listed below, so this is a skin over it rather than a replacement. */
.atc .qdt-explore {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
.atc .qdt-explore-head {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
    align-items: start; margin-bottom: 22px; padding: 0; background: none; border: none;
}
.atc .qdt-explore-mark {
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1.5px solid var(--ink); border-radius: 50%;
    background: var(--acid); color: #15161A;
    font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.atc .qdt-explore-head h2 { font-size: clamp(24px, 3.2vw, 32px); margin: 4px 0 8px; color: var(--ink) }
.atc .qdt-explore-head p { color: var(--ink-60); font-size: 15px; max-width: 68ch; margin: 0 }

/* auto-fill rather than a fixed count: this list grows every time a tool is
   added, and a hardcoded column count would eventually leave a ragged last row. */
.atc .qdt-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
    gap: 12px;
    margin: 0;
}
.atc .qdt-explore-card {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 12px; align-items: start;
    padding: 15px 16px;
    border: 1.5px solid var(--rule); border-radius: var(--r);
    background: var(--paper); color: var(--ink); text-decoration: none;
    box-shadow: none;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.atc .qdt-explore-card:hover {
    border-color: var(--ink);
    background: var(--acid-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.atc .qdt-explore-icon {
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 9px; background: var(--blue-soft); font-size: 15px;
}
.atc .qdt-explore-body { display: block; min-width: 0 }
.atc .qdt-explore-card strong {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 14.5px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
    margin-bottom: 4px;
}
.atc .qdt-explore-card small {
    display: block; font-size: 12.5px; line-height: 1.55; color: var(--ink-60);
}
.atc .qdt-explore-arrow {
    align-self: center; color: var(--blue); font-size: 15px;
    transition: transform .15s ease;
}
.atc .qdt-explore-card:hover .qdt-explore-arrow { transform: translateX(3px) }

/* Was the standalone page's own <footer>. Kept as an in-page note
   because the disclaimer is genuinely load-bearing - the site footer
   has nothing to say about pricing accuracy. */
.atc .page-note { margin-top: 48px; border-top: 1.5px solid var(--ink); background: var(--paper-2); padding: 22px 0 26px }
.atc .page-note__in { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-60) }

.atc .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: .22s ease; z-index: 80 }
.atc .toast.show { opacity: 1; transform: translate(-50%, 0) }
.atc .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel-dark); color: var(--panel-dark-fg); border-top: 1.5px solid var(--ink); padding: 9px 18px; display: none; align-items: center; gap: 16px; transform: translateY(110%); transition: transform .25s ease }
.atc .sticky-bar.show { transform: translateY(0) }
.atc .sticky-bar b { font-family: var(--font-mono); color: var(--acid); font-size: 16px }
.atc .sticky-bar .sb-cost { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 16px }
.atc .sticky-bar small { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-dark-mute) }
@media (max-width: 980px) { .atc .sticky-bar { display: flex } }

/* The standalone file put padding-bottom on <body> to clear the sticky
   bar. That would push every page on the site, so it is applied to the
   page wrapper instead. */
@media (max-width: 980px) { .atc { padding-bottom: 62px } }

.atc .to-top { position: fixed; right: 20px; bottom: 84px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: .2s; z-index: 55 }
.atc .to-top.show { opacity: 1; pointer-events: auto }
.atc .to-top:hover { background: var(--acid); color: #15161A }
/* Clear of the site's floating tool finder, which owns the bottom-right. */
@media (min-width: 981px) { .atc .to-top { bottom: 96px; right: 88px } }

@media print {
    .atc .sticky-bar, .atc .to-top, .atc .toast, .atc .samples,
    .atc .panel__tools, .atc .table-bar, .atc .table-foot,
    .atc .tabs, .atc .section-nav { display: none !important }
    .atc { background: #fff; color: #000; padding-bottom: 0 }
    .atc .card, .atc .table-wrap, .atc .ref-wrap { box-shadow: none; break-inside: avoid }
    .atc .readout { background: #fff !important; color: #000 !important }
}
@media (prefers-reduced-motion: reduce) {
    .atc * { animation-duration: .01ms !important; transition-duration: .01ms !important }
}