/* DeskIQ v5 "Delivered Desk" shared stylesheet. Contract: DESIGN.md.
   Loaded by every v5 page. Homepage-only rules (the hero plate) stay inline in index.html. */
@font-face { font-family: 'Vend Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/vend-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Vend Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/vend-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Vend Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/vend-sans-latin-500-normal.woff2') format('woff2'); }

/* Tokens */
:root {
  --oak: #dbbea1;
  --oak-deep: #b38f70;
  --floor: #7a5a3e;
  --paper: #ece7dd;
  --ink: #292623;
  --ink-soft: #6b5848;
  --slate: #394749;
  --slate-deep: #2a3537;
  --on-slate: #eeece8;
  --brass: #b8913f;
  --brass-light: #cfaa5c;
  --font: 'Vend Sans', ui-sans-serif, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --stone: #f2eee7;
  --stone-deep: #e6dfd3;
  --rule: rgba(41, 38, 35, 0.16);
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--floor); color: var(--ink); font-family: var(--font); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: var(--slate); color: var(--on-slate); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.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; }

/* Logo lockup. Colors come from --mark, --word, --eyes. */
.brand { display: block; --mark: var(--slate); --word: var(--slate); --eyes: #f6f2ea; }
.brand svg { display: block; height: 100%; width: auto; }

/* One site header on every page. Not sticky. Sizes come from rem only, so they never depend on the hero frame. */
.site-header { position: relative; z-index: 5; background: var(--stone); border-bottom: 1px solid var(--rule); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.1rem; }
.site-header .brand { height: 2.25rem; flex: none; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { text-decoration: none; color: var(--ink); text-underline-offset: 0.25em; }
.site-nav a:hover, .site-nav a.active, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
.site-header .site-header-cta { min-height: 2.5rem; padding-inline: 1.25rem; font-size: 1rem; white-space: nowrap; }
/* Homepage: the same header, transparent, on the oak above the photo. The plate shows floor above the desk edge
   (about 1.4cqw tall), so the header starts below that edge. Only its offset depends on the plate; its size does not. */
.stage { position: relative; container-type: inline-size; }
.site-header.over-plate { position: absolute; inset: 1.9cqw 0 auto 0; background: transparent; border-bottom: 0; }
.site-header.over-plate .site-header-inner { border-bottom: 1px solid rgba(90, 66, 45, 0.45); }

/* Below the desk: warm stone page, one column of reading. Imagery below the hero is drawn screens, not photographs. */
main { background: var(--stone); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
main section { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
main section + section { border-top: 1px solid var(--rule); }
main h2 { margin: 0 0 1.25rem; font-weight: 300; font-size: clamp(2.15rem, 4.4vw, 3.9rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; }
main h3 { margin: 0; font-weight: 500; font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.005em; }
main p { margin: 0; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.price, .num { font-variant-numeric: tabular-nums lining-nums; }
.text-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(41, 38, 35, 0.4); transition: text-decoration-color 200ms var(--ease-out); }
.text-link:hover { text-decoration-color: currentColor; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.6rem; border-radius: 999px; background: var(--slate); color: var(--on-slate); font-size: 1.0625rem; text-decoration: none; transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.pill:hover { background: var(--slate-deep); }
.pill:active { transform: translateY(1px); }
.pill-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(41, 38, 35, 0.35); }
.pill-quiet:hover { background: rgba(41, 38, 35, 0.06); }

/* Interior page head: the H1 on stone, no hero. */
.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem) !important; }
.page-head h1 { margin: 0 0 1.25rem; font-weight: 300; font-size: clamp(2.15rem, 4.4vw, 3.9rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; }

/* How it works: one screen, the assistant mid-morning. Drawn in HTML so every word stays sharp. */
.work-head { display: grid; grid-template-columns: 7fr 5fr; gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work-head h2 { margin: 0; }
.display { margin: 0; }
.glass { padding: clamp(0.5rem, 1.1vw, 0.95rem); border-radius: clamp(0.75rem, 1.4vw, 1.25rem); background: #1f1c1a; box-shadow: 0 1.5rem 3rem -1.5rem rgba(60, 38, 20, 0.35); }
.app { display: grid; grid-template-columns: 5fr 7fr; min-height: clamp(20rem, 34vw, 30rem); border-radius: clamp(0.3rem, 0.6vw, 0.5rem); overflow: hidden; background: #f6f2ea; font-size: clamp(0.875rem, 1.15vw, 1.0625rem); }
.log { padding: clamp(1.25rem, 2.6vw, 2.25rem); border-right: 1px solid var(--rule); }
.app-title { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1.4em !important; font-weight: 500; font-size: 1.15em; }
.app-title svg { width: 1.5em; height: auto; }
.log ol { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.75em; padding: 0.7em 0; border-top: 1px solid var(--rule); }
.log time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.log .waiting span { display: inline-flex; align-items: center; gap: 0.5em; color: #75561c; }
.log .waiting span::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--brass); }
.draft { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.6vw, 2.25rem); background: #fbf9f5; }
.draft-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); font-size: 0.9em; }
.draft-subject { margin: 0.9em 0 1.2em !important; padding-bottom: 1em; border-bottom: 1px solid var(--rule); font-weight: 500; font-size: 1.15em; }
.draft-body { display: grid; gap: 0.9em; line-height: 1.55; max-width: 40ch; }
.draft-actions { display: flex; gap: 0.6em; margin-top: auto !important; padding-top: 1.5em; }
.act { display: inline-flex; align-items: center; min-height: 2.4em; padding: 0 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(41, 38, 35, 0.3); }
.act-go { background: var(--slate); color: var(--on-slate); box-shadow: none; }
.display figcaption { margin-top: 0.9rem; color: var(--ink-soft); font-size: 0.875rem; }
/* The log fills in line by line when the screen arrives. Visible by default; JS opts in. */
.js-motion .log li { opacity: 0; transform: translateY(0.35em); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i) * 260ms); }
.js-motion .log.is-seen li { opacity: 1; transform: none; }

/* Where data goes: the one place brass marks ownership. */
.data-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.data-list { margin: 0; display: grid; gap: 0; }
.data-list div { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.data-list div:first-child { padding-top: 0.25rem; }
.data-list dt { font-weight: 500; font-size: 1.125rem; margin-bottom: 0.4rem; }
.data-list dd { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 58ch; }

/* FAQ: native details rows between hairlines. Heading left, list right. */
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; font-size: 1.125rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex: none; width: 1rem; height: 1rem; color: var(--ink-soft); transition: transform 300ms var(--ease-out); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--slate); }
.faq-list .answer { padding: 0 0 1.5rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 60ch; }
.faq-list .answer a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(41, 38, 35, 0.4); }
.faq-list .answer a:hover { text-decoration-color: currentColor; }
/* Several FAQ groups on one page: one grid per group, ruled apart. */
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.faq-group .faq-list details:first-child { border-top: 0; }
.faq-groups { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem) !important; }
.faq-group h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; margin: 0; }

/* Close */
.closing { text-align: center; }
.closing h2 { margin-inline: auto; max-width: 18ch; }
.closing .lede { margin: 0 auto 2.25rem; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* Footer sits on the floor, under the desk. */
.site-footer { background: var(--floor); color: #f1e9df; padding-block: clamp(3.5rem, 7vw, 5rem) 2.5rem; font-size: 0.9375rem; }
.site-footer a { color: #f1e9df; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand { display: inline-block; --mark: var(--on-slate); --word: var(--on-slate); --eyes: var(--floor); }
.footer-brand svg { display: block; height: 2rem; width: auto; }
.footer-note { margin-top: 1rem; max-width: 34ch; color: #f1e9df; line-height: 1.55; }
.footer-col h2 { margin: 0 0 0.85rem; font-size: 0.875rem; font-weight: 400; color: #eee3d6; letter-spacing: 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(3rem, 6vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgba(241, 233, 223, 0.25); color: #eee3d6; font-size: 0.875rem; }
.site-footer :focus-visible { outline-color: #f1e9df; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .log li, .faq-list summary svg { transition: none; transform: none; opacity: 1; }
}

@media (max-width: 860px) {
  .work-head, .app, .data-grid, .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .log { border-right: 0; border-bottom: 1px solid var(--rule); }
  .site-header-inner { flex-wrap: wrap; gap: 0.75rem 1rem; }
  /* overflow-x clips the focus outline; padding gives it room, negative margin keeps the layout. */
  .site-nav { order: 3; flex-basis: calc(100% + 0.75rem); margin: -0.375rem -0.375rem; padding: 0.375rem; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { flex-wrap: nowrap; gap: 0 1.5rem; white-space: nowrap; }
  .site-header-cta { margin-left: auto; padding-inline: 1.1rem; font-size: 0.9375rem; }
}

/* Phone: logo and the pill on row one, the links on one row. */
@media (max-width: 520px) {
  .site-header .brand { height: 2rem; }
}

/* Interior page head helpers: action row, wider lede, stacked ledes. */
.page-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.page-head .lede-wide { max-width: 56ch; }
.page-head .lede + .lede { margin-top: 1rem; }

/* Reading blocks: body copy, ruled list, link row, audience rows. */
.copy { display: grid; gap: 1rem; }
.copy p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 58ch; }
.copy a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(41, 38, 35, 0.4); }
.copy a:hover { text-decoration-color: currentColor; }
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.55; }
.ruled li:first-child { border-top: 1px solid var(--rule); }
.link-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: 2rem; }
.audience-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.audience { display: grid; grid-template-columns: 5fr 7fr; gap: 1rem clamp(2rem, 6vw, 6rem); padding-block: 2rem; border-top: 1px solid var(--rule); }
.audience:last-child { border-bottom: 1px solid var(--rule); }
.audience p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 40ch; }
.audience ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; font-size: 1.0625rem; line-height: 1.5; }
.audience li { padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.audience li:last-child { border-bottom: 0; padding-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* Steps: numbered vertical list. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.25rem 0.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.steps li:first-child { padding-top: 0.25rem; }
.steps li::before { content: counter(step); color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 1.125rem; line-height: 1.35; }
.steps h3 { margin-bottom: 0.4rem; }
.steps p { grid-column: 2; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 58ch; }

/* Steps in a row of three, and the audience rows, collapse at 860px. */
.steps-row { list-style: none; margin: 2.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
.steps-row li { counter-increment: step; }
.steps-row li::before { content: counter(step); display: block; margin-bottom: 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.steps-row p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 40ch; }

/* Hardware tier pages (Desk, Private). */
.tier-price { margin: 0; font-weight: 300; font-size: clamp(2.75rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -0.025em; }
.tier-price span { margin-left: 0.6rem; font-size: 1.0625rem; letter-spacing: 0; color: var(--ink-soft); }
.tier-care { margin: 0.9rem 0 2rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }
.spec-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.spec-list li { padding: 0.85rem 0; border-top: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.5; }
.spec-list li:last-child { border-bottom: 1px solid var(--rule); }
.price-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.fine-print { margin-top: 2rem; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; max-width: 58ch; }
.closing .page-actions { justify-content: center; margin-top: 0; }

/* Forms: ruled ledger look. Square fields, hairline borders, slate focus. */
.form-stack { display: grid; gap: 1.5rem; }
.field label, .field .label { display: block; margin-bottom: 0.45rem; font-weight: 500; font-size: 1rem; line-height: 1.4; }
.field .hint { font-weight: 400; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea { display: block; width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(41, 38, 35, 0.35); border-radius: 0; background: #fbf9f5; color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.4; transition: border-color 200ms var(--ease-out); }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%236b5848' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(41, 38, 35, 0.6); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; border-radius: 0; border-color: var(--slate); }
.field ::placeholder { color: rgba(107, 88, 72, 0.75); }
.checks { display: grid; gap: 0.2rem; margin: 0.25rem 0 0; padding: 0; border: 0; }
.checks label { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 0.45rem 0; font-weight: 400; cursor: pointer; }
.checks input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.2rem 0 0; accent-color: var(--slate); }
.form-submit { border: 0; cursor: pointer; font: inherit; font-size: 1.0625rem; width: 100%; }
.form-note { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; }
.hp { position: absolute; left: -9999px; }

/* Blog article layout. One reading column, about 68ch. */
.post-wrap { width: min(100% - 2 * var(--gutter), calc(68ch + 2px)); margin-inline: auto; }
.post-head h1 { max-width: 20ch; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 0.9375rem; }
main section.post-body { border-top: 0; padding-top: 0; padding-bottom: clamp(3rem, 6vw, 5rem); }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose > :first-child { margin-top: 0 !important; }
.prose p { margin: 1.25em 0 0; max-width: none; }
.prose h2 { max-width: none; margin: 2.75em 0 0; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.prose h3 { margin: 2em 0 0; font-size: 1.25rem; line-height: 1.3; }
.prose h2 + p, .prose h3 + p { margin-top: 0.75em; }
.prose strong { font-weight: 500; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(41, 38, 35, 0.4); transition: text-decoration-color 200ms var(--ease-out); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 1.25em 0 0; padding-left: 1.4em; }
.prose li { margin-top: 0.6em; padding-left: 0.2em; }
.prose li::marker { color: var(--ink-soft); }
.prose .table-wrap { margin-top: 1.75em; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.prose th, .prose td { padding: 0.85rem 1.25rem 0.85rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 500; border-bottom-color: var(--ink); }
.prose td:first-child { font-weight: 500; }
.prose .definition { margin: 0; padding: 1.5rem 0; border-block: 1px solid var(--rule); font-size: 1.25rem; line-height: 1.55; }
.prose .definition p { margin: 0; }
.post-cta { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--ink); }
.post-cta h2 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.15; max-width: 28ch; }
.post-cta p { margin: 0 0 1.5rem; color: var(--ink-soft); }
.prose .post-cta .pill { color: var(--on-slate); text-decoration: none; }
.post-cta .cta-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 1.25rem 0 0; font-size: 1rem; }
.post-cta .cta-links span { display: none; }

@media (max-width: 860px) {
  .steps-row, .audience { grid-template-columns: 1fr; }
  .steps-row { gap: 1.75rem; }
}

/* Pricing (homepage and /pricing). Moved from index.html when the second page started using it. */
.offers{width:100%;border-collapse:collapse;font-size:1rem}
.offers caption{text-align:left}
.offers th,.offers td{text-align:left;vertical-align:top}
.offers .amount{font-weight:300;letter-spacing:-.015em;line-height:1.1;white-space:nowrap}
.offers .amount + span{display:block}
.offers tbody th a{display:block;font-weight:500;font-size:1.125rem;text-decoration:none}
.offers tbody th a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.offers tbody th span{display:block;margin-top:.25rem;font-weight:400;font-size:.9375rem}
.key-mark{display:inline-block;width:.9em;height:.9em;margin-right:.35em;vertical-align:-.08em;color:var(--brass)}
.pricing-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.pricing-more h3{margin-bottom:1rem}
.rate-list{margin:0;display:grid}
.rate-list div{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.rate-list dt{margin:0}
.rate-list dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rate-list dd a{margin-left:.85rem}
.fine{margin-top:1.25rem!important;font-size:.9375rem;max-width:60ch}
.pricing-band .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:2rem!important}
@media (max-width:860px){
 .pricing-more{grid-template-columns:1fr}
 .offers thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .offers,.offers tbody,.offers tr,.offers th,.offers td{display:block;width:auto}
 .offers td{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem}
 .offers td::before{content:attr(data-label);font-size:.875rem;padding-top:.2rem}
 .offers .amount + span{grid-column:2}
}

/* Slate band; one paper sheet carries the table; DeskIQ Private is the one dark row. */
.pricing-band{--soft:#bfc6c5;--sheet-pad:clamp(1.25rem,3.5vw,3rem);--rule-l:rgba(238,236,232,.16);background:var(--slate);padding-block:clamp(4.5rem,9vw,7.5rem)!important;color:var(--on-slate)}
.pricing-band .top .wrap>.head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.pricing-band h2{font-size:clamp(2.4rem,5.2vw,4.5rem);max-width:16ch;color:var(--on-slate)}
.pricing-band .lede{color:var(--soft)}
.pricing-band .sheet{background:var(--paper);color:var(--ink);border-top:3px solid var(--slate-deep);padding:clamp(1.25rem,3vw,2.5rem) var(--sheet-pad)}
.pricing-band .offers th,.pricing-band .offers td{padding:1.5rem 1.5rem 1.5rem 0;border-bottom:1px solid var(--rule)}
.pricing-band .offers thead th{padding-block:0 .85rem;font-size:.875rem;font-weight:400;color:var(--ink-soft);border-bottom:1px solid var(--ink)}
.pricing-band .offers tbody th{width:27%}
.pricing-band .offers tbody th a{font-size:1.25rem;color:var(--ink)}
.pricing-band .offers tbody th span,.pricing-band .offers .amount + span{color:var(--ink-soft);font-size:.9375rem}
.pricing-band .offers .amount{font-size:clamp(2.25rem,4vw,3.25rem);display:block;margin-bottom:.35rem}
.pricing-band .offers tbody tr:last-child th,.pricing-band .offers tbody tr:last-child td{border-bottom:0}
.pricing-band .offers tr.is-private th,.pricing-band .offers tr.is-private td{background:var(--slate-deep);color:var(--on-slate)}
.pricing-band .offers tr.is-private th a{color:var(--on-slate)}
.pricing-band .offers tr.is-private th span,.pricing-band .offers tr.is-private .amount + span{color:var(--soft)}
.pricing-band .offers tr.is-private th{padding-left:1.25rem}
.pricing-band .offers tr.is-private td:last-child{padding-right:1.25rem}
.pricing-band .offers tr.is-private .key,.pricing-band .key-mark{color:var(--brass-light)}
.pricing-band .sheet :focus-visible{outline-color:var(--slate)}
.pricing-band .more{margin-top:clamp(2.5rem,5vw,4rem)}
.pricing-band .pricing-more h3{font-size:1.375rem;color:var(--on-slate)}
.pricing-band .rate-list div{border-bottom-color:var(--rule-l);padding-block:1rem}
.pricing-band .rate-list .price{font-size:1.875rem;font-weight:300;letter-spacing:-.02em}
.pricing-band .fine{color:var(--soft)}
.pricing-band .more .text-link{color:var(--on-slate);text-decoration-color:rgba(238,236,232,.55)}
.pricing-band .more .text-link:hover{text-decoration-color:var(--on-slate)}
.pricing-band .pill{background:var(--on-slate);color:var(--slate-deep)}
.pricing-band .pill:hover{background:#fff}
.pricing-band .more :focus-visible{outline-color:var(--on-slate)}
@media (max-width:860px){
 .pricing-band .sheet{padding-bottom:0}
 .pricing-band .offers th,.pricing-band .offers td{border-bottom:0;padding:.7rem 0}
 .pricing-band .offers tbody th{width:auto;padding:1.5rem 0 .6rem}
 .pricing-band .offers tr{border-bottom:1px solid var(--ink)}
 .pricing-band .offers tbody tr:last-child{border-bottom:0}
 .pricing-band .offers td{border-top:1px solid var(--rule)}
 .pricing-band .offers td::before{color:var(--ink-soft)}
 .pricing-band .offers tr.is-private{background:var(--slate-deep);margin-inline:calc(-1 * var(--sheet-pad));padding-inline:var(--sheet-pad)}
 .pricing-band .offers tr.is-private th,.pricing-band .offers tr.is-private td{background:none;padding-left:0;padding-right:0}
 .pricing-band .offers tr.is-private td{border-top-color:var(--rule-l)}
 .pricing-band .offers tr.is-private td::before{color:var(--soft)}
 .pricing-band .offers .amount{font-size:2.5rem}
 .pricing-band .offers td[data-label="Price"]{grid-template-columns:1fr}
 .pricing-band .offers td[data-label="Price"]::before{display:none}
 .pricing-band .offers td[data-label="Price"] .amount + span{grid-column:1;margin-top:0}
 .pricing-band .offers td:last-child{padding-bottom:1.5rem}
}

/* Pricing page: the homepage band with an H1. */
/* Under the page H1 the two rate headings are h2s, drawn like the homepage h3s. */
.pricing-band .pricing-more h2 { margin: 0 0 1rem; max-width: none; font-weight: 500; font-size: 1.375rem; line-height: 1.35; letter-spacing: -0.005em; color: var(--on-slate); }
.pricing-band h1 { margin: 0 0 1.25rem; font-weight: 300; font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; color: var(--on-slate); }
.pricing-band .head .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
.pricing-band .head .cta-row .text-link { color: var(--on-slate); text-decoration-color: rgba(238,236,232,.55); }
.ledger { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.ledger th, .ledger td { padding: 1.1rem 1rem 1.1rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--rule); }
.ledger thead th { padding-block: 0 0.75rem; font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); border-bottom-color: var(--ink); }
.ledger tbody th { font-weight: 500; }
.ledger td { color: var(--ink-soft); }
.ledger td.total { color: var(--ink); font-weight: 500; text-align: right; padding-right: 0; white-space: nowrap; }
.ledger thead th:last-child { text-align: right; padding-right: 0; }

/* How it works page. */
.install-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.install-grid .lede { margin-bottom: 2.5rem; }
.install-screen { position: sticky; top: 2rem; margin: 0; }
.install-steps li:first-child { padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.install-steps li::before { color: var(--ink); }
.app.single { grid-template-columns: 1fr; min-height: 0; }
.pane { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.6vw, 2.25rem); background: #fbf9f5; min-height: clamp(18rem, 28vw, 24rem); }
.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.75em 0; border-top: 1px solid var(--rule); }
.status-list li > :first-child { color: var(--ink-soft); flex: none; }
.status-list li > :last-child { text-align: right; }
.status-list .ok { display: inline-flex; align-items: center; gap: 0.5em; }
.tick { width: 1.05em; height: 1.05em; color: var(--slate); }
.status-list.stacked li { display: grid; grid-template-columns: 8.5em 1fr; }
.status-list.stacked li > :last-child { text-align: left; }
.pane .draft-actions { margin-top: auto; }
.app-title svg { flex: none; }
.queue { background: #fbf9f5; }
.waiting-label { display: inline-flex; align-items: center; gap: 0.5em; color: #75561c; }
.waiting-label::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--brass); }
.queue-list { list-style: none; margin: 1.1em 0 0; padding: 0; }
.queue-list li { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.95em 0; border-top: 1px solid var(--rule); }
.queue-list strong { display: block; font-weight: 500; }
.queue-list em { font-style: normal; color: var(--ink-soft); font-size: 0.9em; }
.queue-actions { display: flex; gap: 0.5em; flex: none; }
.daily { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 6vw, 6rem); }
.daily li:first-child { border-top: 1px solid var(--rule); }
.daily li:nth-child(2) { border-top: 1px solid var(--rule); }
.daily p { margin-top: 0.3rem; color: var(--ink-soft); font-size: 1.0625rem; max-width: 40ch; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.pair .display { margin: 0; }
.pair .pane { min-height: 13rem; }
.pair figcaption { max-width: 46ch; }
.pair .private .key { display: inline-flex; align-items: center; color: #75561c; }
.pair .private .key-mark { width: 0.95em; height: 0.95em; margin-right: 0.4em; color: var(--brass); }
@media (max-width: 860px) {
  .install-grid, .pair, .daily { grid-template-columns: 1fr; }
  .install-screen { position: static; }
  .ledger th, .ledger td { padding-right: 0.5rem; font-size: 1rem; }
}
@media (max-width: 520px) {
  .queue-list li { flex-direction: column; align-items: flex-start; }
  .status-list.stacked li { grid-template-columns: 1fr; gap: 0.2em; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tr { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .ledger th, .ledger td { border: 0; padding: 0; }
  .ledger tbody th { grid-column: 1 / -1; }
}