/* ==========================================================================
DocFlow design system — tokens + components (the "Quiet" direction).
PROVENANCE: verbatim copy of the design-system block inlined in index.html,
itself generated from Claude Design project
429c3874-d4b1-45d9-8e29-31069fadc777 (see DL-560).
index.html deliberately KEEPS its own inlined copy: that page is regenerated
from the copy JSON + design project, and repointing it at this file would be
undone by the next regeneration. This file exists so pricing.html does not
hand-maintain a second set of Quiet tokens.
THEREFORE: when the design system changes, RE-EXTRACT this file from
index.html rather than hand-editing it.
Fonts load via in each page's , never @import here.
========================================================================== */
/* ---------- tokens/colors.css ---------- */
:root{
--df-paper:#EFEDE8; --df-card:#F8F7F4; --df-card-2:#F1EFEA; --df-white:#FFFFFF;
--df-ink:#2A2A26; --df-muted:#7A776F; --df-slate:#5C7A92;
--df-line:rgba(42,42,38,.16); --df-line-soft:rgba(42,42,38,.09); --df-placeholder:#9A7B2E;
--df-dark:#23231F; --df-dark-ink:#EDEBE4; --df-dark-muted:#9A968C;
--df-dark-line:rgba(237,235,228,.18); --df-accent-on-dark:#A9BCCB;
--surface-page:var(--df-paper); --surface-card:var(--df-card);
--surface-raised:var(--df-white); --surface-inset:var(--df-card-2);
--surface-dark:var(--df-dark);
--text-body:var(--df-ink); --text-secondary:var(--df-muted); --text-accent:var(--df-slate);
--text-on-accent:#FFFFFF; --text-on-dark:var(--df-dark-ink);
--text-on-dark-secondary:var(--df-dark-muted); --text-accent-on-dark:var(--df-accent-on-dark);
--text-placeholder-copy:var(--df-placeholder);
--accent:var(--df-slate); --accent-on-dark:var(--df-accent-on-dark);
--border-hairline:var(--df-line); --border-divider:var(--df-line-soft);
--border-on-dark:var(--df-dark-line);
}
/* ---------- tokens/typography.css ---------- */
:root{
--font-display:'Miriam Libre', system-ui, sans-serif;
--font-body:'Assistant', system-ui, sans-serif;
--font-mono:ui-monospace,'SF Mono',Menlo,monospace;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
--size-h1:clamp(28px,5.1vw,52px);
--size-h2:clamp(23px,3.4vw,34px);
--size-h3:clamp(21px,3vw,30px);
--size-statement:clamp(18px,2.4vw,25px);
--size-h4:18px;
--size-card-title:17px;
--size-body:16.5px; --size-lede:17px; --size-hero-lede:clamp(16px,1.55vw,18.5px);
--size-ui:15px; --size-ui-sm:14px; --size-meta:13.5px; --size-micro:11px;
--lh-display:1.16; --lh-heading:1.24; --lh-body:1.7;
--ls-display:-.01em; --ls-heading:-.006em; --ls-eyebrow:.16em;
--ls-mono-label:.1em; --ls-wordmark:.28em;
}
/* ---------- tokens/spacing.css ---------- */
:root{
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:22px;
--space-6:26px; --space-7:34px; --space-8:44px; --space-9:64px;
--section-y:clamp(54px,7.5vw,92px);
--section-y-dark:clamp(58px,8vw,98px);
--section-y-close:clamp(66px,9vw,112px);
--gutter:clamp(20px,4vw,48px);
--content-max:1000px; --frame-max:1180px; --nav-max:1080px; --shot-max:940px;
--measure:64ch;
}
/* ---------- tokens/borders.css ---------- */
:root{
/* Border radius is 0 everywhere, including buttons. This is not negotiable. */
--radius:0;
--hairline:1px solid var(--border-hairline);
--divider:1px solid var(--border-divider);
--rule-accent:2px solid var(--accent);
--shadow-float:0 10px 26px rgba(42,42,38,.11);
--shadow-nav:0 6px 22px rgba(42,42,38,.10);
--shadow-panel-on-dark:0 22px 54px rgba(0,0,0,.34);
}
/* ---------- tokens/motion.css ---------- */
:root{
--ease-reveal:cubic-bezier(.22,.8,.28,1); --ease-progress:cubic-bezier(.3,.8,.3,1);
--dur-fast:.15s; --dur-hover:.18s; --dur-panel:.3s; --dur-reveal:.65s;
--stagger:75ms; --stagger-max:.34s;
/* lets `block-size: 0 -> auto` interpolate for the ::details-content transition
(Chrome 129+). Ignored elsewhere; the FAQ falls back to an instant open. */
interpolate-size:allow-keywords;
}
@media (prefers-reduced-motion: reduce){
:root{--dur-fast:0s;--dur-hover:0s;--dur-panel:0s;--dur-reveal:0s;--stagger:0ms;}
}
/* ---------- components/base.css ---------- */
.df-brand{unicode-bidi:isolate;direction:ltr;color:var(--accent);font-weight:var(--fw-bold);letter-spacing:-.005em}
.df-on-dark .df-brand{color:var(--accent-on-dark)}
.df-wordmark{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:14px;letter-spacing:var(--ls-wordmark);white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.df-wordmark--sm{font-size:11.5px}
.df-wordmark--lg{font-size:22px}
.df-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--text-on-accent);border:1px solid var(--accent);font:var(--fw-semibold) 15px var(--font-body);padding:13px 22px;border-radius:0;text-decoration:none;cursor:pointer;transition:filter var(--dur-hover)}
.df-btn:hover,.df-btn:focus-visible{filter:brightness(.92)}
.df-btn:active{filter:brightness(.86)}
.df-btn:disabled,.df-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.df-btn--sm{padding:9px 16px;font-size:13.5px}
.df-btn--on-dark{background:var(--accent-on-dark);border-color:var(--accent-on-dark);color:var(--surface-dark)}
.df-btn--outline{background:transparent;color:var(--text-body);border-color:var(--border-hairline)}
.df-btn--outline:hover{background:var(--surface-card);filter:none}
.df-on-dark .df-btn--outline{color:var(--text-on-dark-secondary);border-color:var(--border-on-dark)}
.df-on-dark .df-btn--outline:hover{color:var(--text-on-dark);border-color:var(--text-on-dark);background:transparent}
.df-linkbtn{display:inline-flex;align-items:center;gap:7px;font:var(--fw-medium) 15px var(--font-body);color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;background:none;cursor:pointer}
.df-linkbtn:hover{color:var(--accent)}
.df-tag{font:var(--fw-medium) 13px var(--font-body);color:var(--text-secondary);border:var(--hairline);padding:6px 13px;background:transparent;display:inline-block}
.df-badge{display:inline-block;font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.15em;color:var(--text-secondary);border:var(--hairline);padding:7px 14px}
.df-chip{border:var(--hairline);padding:6px 12px;font-size:13.5px;color:var(--text-secondary);display:inline-block}
.df-on-dark .df-chip{border-color:var(--border-on-dark);color:var(--text-on-dark-secondary)}
.df-eyebrow{display:flex;align-items:center;gap:12px;font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:var(--ls-eyebrow);color:var(--accent);margin-bottom:18px}
.df-eyebrow::before,.df-eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
.df-eyebrow--center{justify-content:center}
.df-eyebrow--start{justify-content:flex-start}
.df-eyebrow--start::before{display:none}
.df-on-dark .df-eyebrow{color:var(--accent-on-dark)}
.df-heading{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);margin-bottom:14px}
.df-heading--h1{font-size:var(--size-h1);letter-spacing:var(--ls-display);line-height:var(--lh-display)}
.df-heading--h2{font-size:var(--size-h2)}
.df-heading--h3{font-size:var(--size-h3);line-height:1.26}
.df-heading--h4{font-size:var(--size-h4);margin-bottom:7px}
.df-heading .df-accent{color:var(--accent)}
.df-lede{color:var(--text-secondary);font-size:var(--size-lede);max-width:var(--measure)}
.df-on-dark .df-heading{color:var(--text-on-dark)}
.df-on-dark .df-lede{color:var(--text-on-dark-secondary)}
.df-statement{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--size-statement);line-height:1.4}
.df-caption{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(18px,2.3vw,25px)}
.df-callout{color:var(--text-secondary);font-size:15.5px;border-inline-start:var(--rule-accent);padding-inline-start:16px;text-align:start;max-width:66ch}
.df-callout--boxed{border:var(--hairline);border-inline-start:var(--rule-accent);padding:16px 18px;font-size:15px;max-width:none}
.df-on-dark .df-callout{color:var(--text-on-dark-secondary);border-color:var(--border-on-dark);border-inline-start-color:var(--accent-on-dark)}
.df-stat{text-align:center}
.df-stat .df-stat-v{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(20px,2.9vw,30px);letter-spacing:-.01em;line-height:1.2}
.df-stat .df-stat-u{width:26px;height:2px;background:var(--accent);margin:12px auto}
.df-stat .df-stat-k{font:var(--fw-medium) 13.5px var(--font-body);color:var(--text-secondary)}
.df-numlist{list-style:none;margin:0;padding:0}
.df-numlist li{display:flex;gap:16px;padding:12px 0;border-bottom:var(--divider);color:var(--text-secondary);font-size:16px}
.df-numlist li .df-n{font:var(--fw-medium) 12px var(--font-mono);color:var(--accent);padding-top:5px;flex:none;opacity:.85}
.df-on-dark .df-numlist li{border-color:var(--border-on-dark);color:var(--text-on-dark);font-size:15.5px;padding:9px 0;gap:14px}
.df-on-dark .df-numlist li .df-n{color:var(--accent-on-dark);font-size:11.5px}
.df-step .df-step-n{font:var(--fw-medium) 11px var(--font-mono);color:var(--accent);letter-spacing:var(--ls-mono-label);padding-bottom:10px;border-bottom:var(--hairline);margin-bottom:13px}
.df-step h4{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--size-h4);margin-bottom:7px}
.df-step p{color:var(--text-secondary);font-size:var(--size-ui)}
.df-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1px;background:var(--border-hairline);border:var(--hairline)}
.df-fcell{background:var(--surface-page);padding:24px 22px;transition:background .2s}
.df-fcell h4{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--size-card-title);margin-bottom:8px}
.df-fcell p{color:var(--text-secondary);font-size:var(--size-ui)}
.df-bullets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px 30px}
.df-bullets li{display:flex;gap:10px;color:var(--text-secondary);font-size:var(--size-ui)}
.df-bullets li::before{content:"";width:5px;height:5px;background:var(--accent);flex:none;margin-top:11px}
.df-faq{border-bottom:var(--divider)}
.df-faq summary{cursor:pointer;list-style:none;padding:17px 0;display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:16px}
.df-faq summary::-webkit-details-marker{display:none}
.df-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.df-faq summary .df-pm{margin-inline-start:auto;color:var(--accent);font:var(--fw-regular) 20px/1 var(--font-body);flex:none;transition:transform .25s var(--ease-reveal)}
.df-faq[open] summary .df-pm{transform:rotate(45deg)}
.df-faq .df-answer{padding:0 0 18px;color:var(--text-secondary);font-size:15.5px;max-width:70ch}
/* Progressive enhancement only. Where ::details-content is unsupported the
panel simply appears — keeps working, keyboard and all. */
@supports selector(::details-content){
.df-faq::details-content{transition:block-size var(--dur-panel) var(--ease-reveal),opacity var(--dur-panel) ease,content-visibility var(--dur-panel) allow-discrete;block-size:0;opacity:0;overflow:hidden}
.df-faq[open]::details-content{block-size:auto;opacity:1}
}
@media (prefers-reduced-motion: reduce){
@supports selector(::details-content){
.df-faq::details-content{transition:none}
}
}
.df-nav{max-width:var(--nav-max);margin:0 auto;background:rgba(248,247,244,.94);backdrop-filter:blur(10px);border:var(--hairline);display:flex;align-items:center;gap:18px;padding:11px;padding-inline-start:20px;transition:box-shadow var(--dur-panel) ease,border-color var(--dur-panel) ease,background var(--dur-panel) ease}
.df-nav--scrolled{box-shadow:var(--shadow-nav);border-color:rgba(42,42,38,.22);background:rgba(248,247,244,.98)}
.df-navlinks{display:flex;gap:22px;margin-inline-start:auto}
.df-navlinks a{position:relative;font:var(--fw-medium) var(--size-ui-sm) var(--font-body);color:var(--text-secondary);text-decoration:none;padding-bottom:3px;transition:color var(--dur-fast)}
.df-navlinks a:hover{color:var(--text-body)}
.df-navlinks a::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--dur-panel) var(--ease-reveal)}
.df-navlinks a.is-active{color:var(--text-body)}
.df-navlinks a.is-active::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.df-navlinks a::after{transition:none}}
.df-foot{border-top:var(--hairline);padding:22px 0;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;font:var(--fw-medium) 13px var(--font-body);color:var(--text-secondary)}
.df-fragment{background:var(--surface-card);border:var(--hairline);padding:12px 14px;box-shadow:var(--shadow-float)}
.df-fragment .df-frag-t{font:var(--fw-semibold) 10.5px/1 var(--font-body);letter-spacing:.12em;color:var(--text-secondary);margin-bottom:8px}
.df-fragment .df-frag-v{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:17px}
.df-progress{display:flex;align-items:center;gap:12px}
.df-progress .df-pl{font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:var(--ls-mono-label);color:var(--text-secondary);white-space:nowrap}
.df-progress .df-track{flex:1;height:5px;background:var(--border-divider)}
.df-progress .df-track i{display:block;height:100%;background:var(--accent);transition:width 1.1s var(--ease-progress)}
.df-progress .df-pv{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:14.5px;min-width:66px;text-align:end}
.df-bar{height:4px;background:var(--border-divider);margin-top:9px}
.df-bar i{display:block;height:100%;background:var(--accent)}
.df-check{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:var(--divider);font-size:14px}
.df-check .df-box{width:15px;height:15px;border:var(--hairline);flex:none;display:grid;place-items:center;font-size:10px;color:transparent;transition:background .4s ease,border-color .4s ease,color .4s ease}
.df-check .df-nm{flex:1}
.df-check .df-st{font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.08em;color:var(--text-secondary);transition:color .4s}
.df-check.is-done .df-box{border-color:var(--accent);background:var(--accent);color:#fff}
.df-check.is-done .df-st{color:var(--accent)}
.df-idpill{border:1px solid var(--accent);color:var(--accent);padding:6px 11px;font:var(--fw-semibold) 13px var(--font-body);display:inline-block}
.df-spin{display:inline-block;width:11px;height:11px;border:1.5px solid var(--border-hairline);border-top-color:var(--accent);border-radius:50%;animation:df-sp .8s linear infinite}
@keyframes df-sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.df-spin{animation:none}}
.df-mail{display:flex;gap:11px;border:var(--divider);padding:11px 12px;background:var(--surface-raised)}
.df-mail .df-av{width:28px;height:28px;background:var(--border-divider);flex:none}
.df-mail .df-who{font:var(--fw-semibold) 14px var(--font-body);display:block}
.df-mail .df-addr{font:var(--fw-regular) 11.5px var(--font-mono);color:var(--text-secondary);display:block;unicode-bidi:isolate;direction:ltr;text-align:start}
.df-mail .df-subj{font-size:13px;color:var(--text-secondary);display:block}
.df-attach{display:inline-flex;align-items:center;gap:8px;border:var(--hairline);padding:7px 11px;background:var(--surface-raised);font:var(--fw-medium) 13px var(--font-body)}
.df-attach .df-pg{width:11px;height:14px;border:1px solid var(--text-secondary);flex:none}
.df-on-dark{background:var(--surface-dark);color:var(--text-on-dark)}
/* ---------- components/layout.css ---------- */
.df-page{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body)}
.df-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}
.df-section{padding:var(--section-y) 0;border-top:var(--divider)}
.df-section--card{background:var(--surface-card)}
.df-section--dark{background:var(--surface-dark);color:var(--text-on-dark);padding:var(--section-y-dark) 0;border-top:none}
.df-section--close{text-align:center;padding:var(--section-y-close) 0;border-top:var(--divider)}
.df-center{text-align:center}
.df-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:26px}
.df-grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:26px}
.df-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:36px;align-items:start}
.df-shotwrap{position:relative;max-width:var(--shot-max);margin:40px auto 0;padding:0 var(--gutter)}
.df-ctarow{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.df-descriptor{font:var(--fw-medium) 14px var(--font-body);letter-spacing:.02em;color:var(--accent);padding-bottom:22px;margin-bottom:22px;position:relative}
.df-descriptor::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:44px;height:1px;background:var(--border-hairline)}
.df-nofric{list-style:none;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;font-size:14.5px;color:var(--text-secondary);margin:0;padding:0}
.df-nofric li{display:flex;align-items:center;gap:8px}
.df-nofric li::before{content:"";width:5px;height:5px;background:var(--accent);flex:none}
@media (max-width:760px){.df-nofric{flex-direction:column;align-items:center;gap:8px}.df-navlinks{display:none}}