/* ==========================================================================
   KuduDoc v6 — THE FEATURE-PAGE KIT  (pages/_feature.css)
   Loaded by <body data-kit="feature"> (build.py puts it after theme.css, before pages/<slug>.css).
   Reference page: source/timestamp-a-document.html — copy its skeleton, keep the class names, change the content.
   Prefix: fk-. Every rule is scoped under .fk (the page wrapper) so nothing leaks into the nav or footer.

   PAGE SKELETON (top to bottom; drop what a page does not need, never reorder the opening + stage pair)
   <body data-page="<slug>" data-kit="feature"> <header class="site-header"></header>
   <main id="main"><div class="fk">                       ← the wrapper is required (theme.css pads a bare first child)
     1 OPENING   <section class="hero-cu fk-hero" id="top"><div class="cu-wrap">
                   <nav class="fk-crumbs" aria-label="Breadcrumb"><ol><li><a href="index.html">Home</a></li>
                     <li><a href="product.html">Product</a></li><li aria-current="page">Name</li></ol></nav>
                   <h1><span class="hero-line">First sentence.</span> <span class="hero-line">Second, light blue.</span>
                     <span aria-hidden="true" class="kd-rule"></span></h1>     (h1 text = page-map h1; keep the space)
                   One sentence per .hero-line (each its own line, balanced within 30ch; later lines turn light blue).
                   A one-sentence H1 is a single .hero-line. Breadcrumb = the page-map BreadcrumbList names.
                   <p class="hero-sub">The lead, verbatim from the brief.</p>
                   <div class="hero-actions fk-actions"><a class="btn btn-primary" href="https://kududoc.co.za/signup.html?plan=…">…</a>
                     <a class="btn btn-secondary" href="#how">How it works</a><span class="hero-note">Plan line.</span></div>
     2 STAGE     <section class="proof-cu fk-stage" id="…" aria-labelledby="…"><div class="cu-wrap">   ← straddles the blue edge
                   <div class="fk-stage-bar"><h2 class="fk-stage-h" id="…">Small label</h2><p class="fk-stage-meta">…</p></div>
                   <figure class="fk-shot"> THE APP PANEL (below) <figcaption class="fk-under">One plain line.</figcaption></figure>
                   Tall panel? set style="--fk-edge: 360px" on the section (where the blue stops; default 300px, 200px on phones).
     3 SECTIONS  <section class="fk-sec" id="…" aria-labelledby="…"><div class="fk-wrap">          (add .fk-split to the
                   <header class="fk-head"><p class="fk-eyebrow">optional</p><h2 class="fk-h2" id="…">…</h2>   fk-wrap for heading-
                   <p class="fk-intro">…</p></header>  …body…  <p class="fk-after">line under a table</p>   left, body-right)
                 Bodies (mix as needed):
                 · .fk-gets     <ul class="fk-gets"><li class="fk-get"><div class="fk-get-spec" aria-hidden="true">a real
                                specimen: .fk-hash / .fk-file / chips / .fk-doc</div><h3>…</h3><p>…</p></li>…</ul>  (3 across)
                 · .fk-steps    <ol class="fk-steps"><li><h3>…</h3><p>…</p></li>…</ol>  numbers + the logo's slanted stroke
                                are drawn by CSS (no HowTo markup); li.is-key turns that step's stroke orange (the seal moment).
                                3 or 4 steps; .fk-steps--3 for three across.
                 · .fk-table    <div class="fk-table-wrap"><table class="fk-table"><thead>…</thead><tbody><tr><th scope="row">…</th>
                                <td data-label="Column name">…</td></tr></tbody></table></div>  — rows become cards under 760px
                                (data-label is the card's field label). .fk-table--compare: a two-product comparison; its
                                header cells th.is-this (this page, blue rule) and th.is-seal (orange rule).
                 · .fk-list     <ul class="fk-list [fk-list--rule]"><li [class="is-key"]><b>Lead phrase.</b> Rest.</li></ul>
                 · .fk-uses     who it is for: one card of rows, a real file (or .fk-avatar + name) beside each use:
                                <ul class="fk-uses"><li><span class="fk-file" aria-hidden="true">…</span><p>…</p></li></ul>
                 · .fk-plan     <aside class="fk-plan" aria-label="Plans"><div class="fk-plan-copy"><p class="fk-plan-h">On … plans,
                                with a KuduDoc account</p><p>…<a href="pricing.html">Compare plans</a></p></div>
                                <ul class="fk-plan-list"><li class="is-on"><b>Personal</b><span>Free</span></li>
                                <li class="is-off"><b>Family</b><span>R99 a month</span></li>…</ul></aside>
                                Exact prices only: Free · R99 · R199 · R299 per seat a month. .is-off dims a plan the feature is not on.
                 · .fk-code     <table class="fk-code"><thead>…</thead><tbody><tr><th scope="row">OS</th><td><code>…</code></td></tr>
                 · FAQ          <div class="fk-faq" data-faq><details><summary>Q</summary><p>A</p></details>…</div>
                                (the build writes FAQPage JSON-LD from it; one data-faq per page)
     4 RELATED   <nav class="fk-sec fk-related" aria-labelledby="related-h"><div class="fk-wrap"><h2 class="fk-related-h"
                   id="related-h">Related</h2><ul><li><a href="x.html"><b>Title</b><span>One line.</span></a></li>…</ul>
                   Product and tool pages only (a Product page has no "Related guides", Sources or Last checked).
                   Whatever section sits right above the closing band gets its bottom padding from the kit.
     5 CLOSING   <section class="cta-gradient fk-closing" id="closing"><div class="cta-gradient-inner">
                   <p class="eyebrow">…</p><h2>Plain words <span>highlighted words.</span></h2><p>…</p>
                   <div class="btn-row"><a class="btn btn-primary" …>…</a><a class="btn btn-onblue-ghost" …>…</a></div>
   </div></main>

   THE APP PANEL (the product as it looks in the app — crisp HTML/CSS, realistic South African content, no labels)
   <div class="fk-app">
     <div class="fk-app-bar" aria-hidden="true"><span class="fk-app-dots"><i></i><i></i><i></i></span>
       <span class="fk-app-url"><svg class="icon"><use href="icons.svg#i-lock"/></svg>app.kududoc.co.za/…</span></div>
     <div class="fk-app-body">                                   (.fk-app-body--no-side: rail only · --bare: main only)
       <div class="fk-app-rail" aria-hidden="true"><img class="fk-app-mark" src="assets/brand/mark-skew.svg" alt="" width="24" height="22">
         <span class="fk-rail-item [is-on]"><svg class="icon"><use href="icons-kd.svg#k-library"/></svg>Library</span>…
         <span class="fk-rail-item fk-rail-end"><svg class="icon"><use href="icons.svg#i-cog"/></svg>Settings</span></div>
       <div class="fk-app-side" aria-hidden="true"><p class="fk-side-h">Tools</p><p class="fk-side-group">Record</p>
         <span class="fk-side-item [is-on]"><svg class="icon">…</svg>Name</span>…</div>          (hidden under 1180px)
       <div class="fk-app-main">
         <div class="fk-app-top" aria-hidden="true"><span class="fk-app-crumb">Tools <i>/</i> <b>Page</b></span>
           <span class="fk-app-search"><svg class="icon">…</svg>Search documents and people</span><span class="fk-avatar">NM</span></div>
         <div class="fk-app-content" [data-tabs data-tabs-fade="140"]>        ← data-tabs: motion.js runs the tabs, no page JS
           <div class="fk-tabs" role="tablist" aria-label="…"><button class="fk-tab is-active" type="button" data-tab-trigger="a">A</button>…</div>
           <div class="fk-tabpanel is-active" data-tab-panel="a"> <div class="fk-app-cols [fk-app-cols--even]">
             <div class="fk-app-col"><h3 class="fk-app-h">…</h3><p class="fk-app-sub">…</p> cards…</div>
             <div class="fk-app-col fk-app-aside"> cards… </div></div></div>   (only the first panel carries is-active)
         All panels share one grid cell, so the frame keeps the tallest tab's height and the page never jumps.
         Rail/side/top bar are aria-hidden chrome; the panel's own text (headings, states) is real, readable content.
         Under 1000px the columns stack; under 720px the rail and search go and the panel is main-only.
   Parts, each usable anywhere inside .fk (panels, .fk-get-spec, sections):
   · .fk-card (.fk-card-h with .fk-count, .fk-card-foot with .fk-link)
   · .fk-rows > li.fk-row: badge or .fk-avatar | .fk-row-txt(b+small) | chip [| .fk-row-act]; .fk-rows--stack puts the chip
       and action under the text (narrow cards)
   · .fk-file: <span class="fk-file"><span class="fk-file-badge" data-type="pdf|ots|zip|jpg|csv|docx|xlsx">PDF</span>
       <span class="fk-file-txt"><b>name.pdf</b><small>size · where</small></span></span>   (ots = the proof/seal family: orange)
   · .fk-chip + --pending (anchor pending, waiting: warm) · --ok (confirmed, same, matches: quiet blue) · --muted (could not,
       does not match, draft) · --sealed (the Sealed chip: the one orange) · --blue (solid, e.g. a plan). Text chips only —
       the slanted stroke is the marker; never a tick, cross, shield or green.
   · .fk-btn + --primary (app blue) · --ghost · --mini · --link   (spans in a capture: a capture's buttons do nothing)
   · .fk-hash (.fk-hash-v inside; --pasted, --spec) · .fk-label · .fk-kv (dl > div > dt + dd) · .fk-progress (<i> fill, --p)
   · .fk-when: <ol class="fk-when"><li><span class="fk-chip …">State</span><small>When</small></li>…</ol> (states in order)
   · .fk-nw: no line break inside a token (SHA-256, FIPS 180-4, R1,990)
   · .fk-drop (.fk-drop-ic + .fk-drop-txt b/small/em + a button) · .fk-avatar · .fk-switch[.is-on] · .fk-field (.fk-field-l +
       .fk-field-v[.is-empty|.is-focus]) · .fk-doc: a paper page — .fk-doc-kicker, .fk-doc-title, .fk-doc-meta, .fk-doc-lines (<i> bars),
       .fk-doc-clause, .fk-doc-field (dashed signing field), .fk-doc-sign (> span with <b>01</b> Role) — the landing's lease.
   Phase play (optional, page JS): an element with data-phase="x" shows only its [data-when~="x"] children
       (see scripts/pages/timestamp-a-document.js). The markup must carry the settled phase, so no-JS shows the end state.

   RULES the kit assumes: one orange (primary action, the H1 rule, heading strokes, the seal/proof family); flat colour,
   no glows or blurs; icons only from icons-kd.svg / icons.svg and only where they name a thing; tables stack at 760px;
   code wraps inside its box; at 320px only the in-app tab bar may scroll, inside itself. Panel content is the product:
   South African names, addresses and 2026 dates, no ID numbers, no "example"/"sample" labels. An amount in a panel
   ("R 9,500 rent") shows as a pagecheck price warn: fine as content, never as a KuduDoc price.
   ========================================================================== */

.fk {
  --fk-ground: #2a64a0;
  --fk-ink: #102d49;
  --fk-ink-2: #2b4460;
  --fk-body: #3f5470;
  --fk-mute: #5d7087;
  --fk-faint: #8494a7;
  --fk-line: #e3eaf1;
  --fk-line-2: #eef2f6;
  --fk-blue: #006bcb;
  --fk-blue-deep: #004e99;
  --fk-ice: #eef5fc;
  --fk-sky: #a9dcff;
  --fk-peach: #fff1e8;
  --fk-orange-ink: #b8470e;
  --fk-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --fk-card-sh: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
  --fk-stroke: rotate(-8deg) skewX(-14deg);
  --fk-poster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--fk-ink);
}
.fk :is(h2, h3, h4, p, ul, ol, dl, dd, figure, table) { margin: 0; }
.fk :is(ul, ol) { padding: 0; list-style: none; }
.fk a:not(.btn) { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fk code { font-family: var(--fk-mono); font-size: .92em; }
.fk .fk-nw { white-space: nowrap; }

/* ================================================================ 1 · the opening */
html body .fk .fk-hero { padding-bottom: 64px; }
.fk .fk-crumbs { margin: 0 0 26px; }
.fk .fk-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.fk .fk-crumbs li { display: inline-flex; align-items: center; font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #d6eeff; }
.fk .fk-crumbs li:first-child::before {
  content: ""; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px; background: var(--orange); transform: skewX(-14deg);
}
.fk .fk-crumbs li + li::before { content: "›"; margin: 0 10px; color: rgba(214, 238, 255, .55); letter-spacing: 0; font-size: 15px; }
html body .fk .fk-crumbs a { color: #d6eeff; text-decoration: none; }
html body .fk .fk-crumbs a:hover { color: #fff; text-decoration: underline; }
.fk .fk-crumbs [aria-current] { color: #fff; }
/* one sentence per line (.hero-line is a block); a long sentence wraps, balanced, within 30ch */
html body .fk .fk-hero h1 { max-width: none; font-size: clamp(40px, 4.55vw, 66px); line-height: 1.03; letter-spacing: -.035em; }
html body .fk .fk-hero h1 .hero-line { display: block; max-width: 30ch; text-wrap: balance; }
html body .fk .fk-hero .kd-rule { display: block; margin: 26px 0 24px; }
html body .fk .fk-hero .hero-sub { max-width: 60ch; margin-top: 0; font: 400 clamp(17px, 1.42vw, 20px)/1.6 var(--font-sans); letter-spacing: -.005em; color: rgba(236, 244, 252, .88); }
html body .fk .fk-hero .hero-sub a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); }
html body .fk .fk-hero .hero-sub a:hover { text-decoration-color: #fff; }
.fk .fk-actions { margin-top: 32px; }
html body .fk .fk-hero .hero-note { color: rgba(226, 238, 250, .74); font-size: 12.5px; line-height: 1.55; }

/* ================================================================ 2 · the stage: the panel straddles the blue edge */
html body .fk .hero-cu + .proof-cu.fk-stage {
  --fk-edge: 300px;
  padding: 0 0 24px; background: linear-gradient(180deg, var(--fk-ground) 0, var(--fk-ground) var(--fk-edge), transparent var(--fk-edge));
}
.fk .fk-stage-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin: 0 2px 14px; }
html body .fk .fk-stage-h { display: flex; align-items: center; font: 650 15px/1.3 var(--font-display); letter-spacing: -.005em; color: #fff; }
.fk .fk-stage-h::before { content: ""; width: 4px; height: 15px; margin-right: 10px; border-radius: 2px; background: var(--fk-sky); transform: var(--fk-stroke); }
.fk .fk-stage-meta { font: 500 13px/1.3 var(--font-sans); color: rgba(214, 238, 255, .78); }
.fk .fk-shot { margin: 0; }
.fk .fk-under {
  display: flex; gap: 12px; max-width: 78ch; margin: 22px 2px 0; font: 400 14.5px/1.55 var(--font-sans); color: var(--fk-body);
}
.fk .fk-under::before { content: ""; flex: none; width: 3px; height: 15px; margin-top: 4px; border-radius: 2px; background: var(--fk-blue); transform: skewX(-14deg); }

/* ================================================================ 3 · sections */
.fk .fk-wrap { width: calc(100% - 80px); max-width: 1160px; margin-inline: auto; min-width: 0; }
.fk .fk-sec { padding: 96px 0 0; scroll-margin-top: 90px; }
.fk .fk-stage + .fk-sec { padding-top: 104px; }
.fk .fk-head { max-width: 760px; margin-bottom: 36px; }
.fk .fk-eyebrow { margin-bottom: 14px; font: 600 12.5px/1.35 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--fk-blue); }
.fk .fk-h2 {
  position: relative; padding-left: 26px;
  font: 650 clamp(30px, 3.1vw, 44px)/1.08 var(--font-display); letter-spacing: -.032em; color: var(--fk-ink); text-wrap: balance;
}
.fk .fk-h2::before {
  content: ""; position: absolute; left: 2px; top: .16em; width: 6px; height: .74em; border-radius: 3px; background: var(--orange); transform: var(--fk-stroke);
}
.fk .fk-intro { margin-top: 16px; max-width: 64ch; font: 400 17.5px/1.6 var(--font-sans); color: var(--fk-body); }
.fk .fk-after { max-width: 80ch; margin-top: 22px; font: 400 15.5px/1.65 var(--font-sans); color: var(--fk-body); }
.fk .fk-after a, .fk .fk-intro a, .fk .fk-list a, .fk .fk-uses a, .fk .fk-steps a, .fk .fk-faq a, .fk .fk-plan a { color: var(--fk-blue); }
.fk .fk-after a:hover, .fk .fk-intro a:hover, .fk .fk-list a:hover, .fk .fk-uses a:hover, .fk .fk-steps a:hover, .fk .fk-faq a:hover { color: var(--fk-blue-deep); }
.fk .fk-more { font-weight: 600; text-decoration: none; }

/* split: the heading holds the left column while the body scrolls past */
@media (min-width: 1000px) {
  .fk .fk-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 72px; align-items: start; }
  .fk .fk-split > .fk-head { position: sticky; top: 112px; margin-bottom: 0; }
  .fk .fk-split > .fk-head .fk-h2 { font-size: clamp(28px, 2.5vw, 36px); }
  .fk .fk-split > .fk-head .fk-intro { font-size: 16px; }
}

/* ---------------------------------------------------------------- what you get: three specimens */
.fk .fk-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fk .fk-get { display: flex; flex-direction: column; padding: 14px 14px 26px; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); }
.fk .fk-get-spec {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 150px; margin-bottom: 22px; padding: 20px;
  border-radius: 14px; background: #f5f8fb; box-shadow: inset 0 0 0 1px var(--fk-line-2);
}
/* two states in order: a hairline joins them (.fk-when > li > chip + small) */
.fk .fk-when { display: flex; flex-direction: column; gap: 22px; }
.fk .fk-when > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fk .fk-when > li + li::before { content: ""; position: absolute; left: 14px; top: -19px; width: 1.5px; height: 16px; border-radius: 1px; background: #c3d1df; }
.fk .fk-when small { order: -1; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fk-mute); }
.fk .fk-get h3 { margin: 0 12px; font: 650 21px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--fk-ink); }
.fk .fk-get > p { margin: 10px 12px 0; font: 400 15.5px/1.6 var(--font-sans); color: var(--fk-body); }
.fk .fk-get > p code { padding: 1px 6px; border-radius: 6px; background: var(--fk-ice); color: var(--fk-blue-deep); font-size: 13.5px; }

/* ---------------------------------------------------------------- steps: numbers on the logo's slanted stroke */
.fk .fk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; counter-reset: fk-step; position: relative; }
.fk .fk-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fk .fk-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: #d3dfeb; }
.fk .fk-steps > li { position: relative; counter-increment: fk-step; padding-top: 74px; }
.fk .fk-steps > li::before {
  content: ""; position: absolute; left: 8px; top: 0; width: 8px; height: 52px; border-radius: 4px; background: var(--fk-blue); transform: var(--fk-stroke);
}
.fk .fk-steps > li.is-key::before { background: var(--orange); }
.fk .fk-steps > li::after {
  content: counter(fk-step, decimal-leading-zero); position: absolute; left: 30px; top: 30px;
  font: 650 13px/1 var(--font-display); letter-spacing: .08em; color: var(--fk-blue);
}
.fk .fk-steps > li.is-key::after { color: var(--fk-orange-ink); }
.fk .fk-steps h3 { font: 650 19px/1.3 var(--font-display); letter-spacing: -.018em; color: var(--fk-ink); }
.fk .fk-steps p { margin-top: 10px; font: 400 15.5px/1.62 var(--font-sans); color: var(--fk-body); }

/* ---------------------------------------------------------------- tables: rows, then cards on phones */
.fk .fk-table-wrap { border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); overflow: hidden; }
.fk .fk-table { width: 100%; border-collapse: collapse; font: 400 15px/1.55 var(--font-sans); color: var(--fk-body); }
.fk .fk-table thead :is(th, td) {
  padding: 18px 24px 14px; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--fk-line);
  font: 600 12px/1.35 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-mute); background: #fafcfd;
}
.fk .fk-table tbody :is(th, td) { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--fk-line-2); }
.fk .fk-table tbody tr:first-child :is(th, td) { border-top: 0; }
.fk .fk-table tbody th { width: 27%; font: 600 15px/1.45 var(--font-sans); color: var(--fk-ink); }
.fk .fk-table a { color: var(--fk-blue); }
.fk .fk-table--compare thead th { position: relative; font: 650 17px/1.3 var(--font-display); letter-spacing: -.015em; text-transform: none; color: var(--fk-ink); padding-top: 26px; }
.fk .fk-table--compare thead th::before { content: ""; position: absolute; left: 24px; top: 0; width: 40px; height: 4px; border-radius: 0 0 3px 3px; background: var(--fk-blue); }
.fk .fk-table--compare thead th.is-seal::before { background: var(--orange); }
.fk .fk-table--compare tbody th { width: 24%; font-weight: 600; color: var(--fk-mute); }
.fk .fk-table--compare tbody td { width: 38%; color: var(--fk-ink-2); }

/* ---------------------------------------------------------------- lists with the slanted stroke */
.fk .fk-list > li { position: relative; padding-left: 30px; font: 400 16.5px/1.62 var(--font-sans); color: var(--fk-body); }
.fk .fk-list > li + li { margin-top: 14px; }
.fk .fk-list > li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 4px; height: 16px; border-radius: 2px; background: var(--fk-blue); transform: var(--fk-stroke); }
.fk .fk-list > li.is-key::before { background: var(--orange); }
.fk .fk-list b { font-weight: 600; color: var(--fk-ink); }
.fk .fk-list--rule { border-top: 1px solid var(--fk-line); }
.fk .fk-list--rule > li { padding: 22px 0 22px 34px; border-bottom: 1px solid var(--fk-line); }
.fk .fk-list--rule > li + li { margin-top: 0; }
.fk .fk-list--rule > li::before { top: 29px; left: 6px; }
.fk .fk-list--rule b { display: block; margin-bottom: 4px; font: 650 18px/1.35 var(--font-display); letter-spacing: -.015em; }

/* ---------------------------------------------------------------- who it is for: one file each */
.fk .fk-uses { border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); padding: 6px 28px; }
.fk .fk-uses > li { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: 10px 32px; padding: 18px 0; border-top: 1px solid var(--fk-line-2); }
.fk .fk-uses > li:first-child { border-top: 0; }
.fk .fk-uses p { font: 400 16px/1.55 var(--font-sans); color: var(--fk-ink-2); }

/* ---------------------------------------------------------------- the plan line */
.fk .fk-plan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; margin-top: 40px;
  padding: 26px 28px; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh);
}
.fk .fk-plan-h { font: 650 19px/1.3 var(--font-display); letter-spacing: -.015em; color: var(--fk-ink); }
.fk .fk-plan-copy > p + p { margin-top: 6px; font: 400 15px/1.55 var(--font-sans); color: var(--fk-body); }
.fk .fk-plan-copy a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.fk .fk-plan-copy a::after { content: " →"; }
.fk .fk-plan-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fk .fk-plan-list li {
  display: flex; flex-direction: column; gap: 3px; min-width: 116px; padding: 12px 16px 12px 30px; position: relative;
  border-radius: 14px; background: var(--fk-ice); color: var(--fk-blue-deep);
}
.fk .fk-plan-list li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 4px; height: 14px; border-radius: 2px; background: var(--fk-blue); transform: var(--fk-stroke); }
.fk .fk-plan-list b { font: 650 15px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--fk-ink); }
.fk .fk-plan-list span { font: 500 12.5px/1.2 var(--font-sans); color: var(--fk-mute); }
.fk .fk-plan-list li.is-off { background: #f4f6f8; }
.fk .fk-plan-list li.is-off::before { background: #c5d0db; }
.fk .fk-plan-list li.is-off b { color: var(--fk-faint); }

/* ---------------------------------------------------------------- commands */
.fk .fk-code { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); overflow: hidden; }
.fk .fk-code thead th { padding: 16px 22px 12px; text-align: left; font: 600 12px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-mute); background: #fafcfd; border-bottom: 1px solid var(--fk-line); }
.fk .fk-code tbody :is(th, td) { padding: 14px 22px; text-align: left; vertical-align: middle; border-top: 1px solid var(--fk-line-2); }
.fk .fk-code tbody tr:first-child :is(th, td) { border-top: 0; }
.fk .fk-code tbody th { width: 34%; font: 600 14.5px/1.4 var(--font-sans); color: var(--fk-ink); }
.fk .fk-code code {
  display: block; padding: 10px 14px; border-radius: 10px; background: #f3f6f9; box-shadow: inset 0 0 0 1px var(--fk-line-2);
  font: 500 13.5px/1.5 var(--fk-mono); color: var(--fk-ink-2); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- FAQ (details cards; theme.css draws the card) */
.fk .fk-faq details > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; list-style: none; }
.fk .fk-faq details > summary::-webkit-details-marker { display: none; }
.fk .fk-faq details > summary::after {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: linear-gradient(var(--fk-blue), var(--fk-blue)) center / 10px 1.75px no-repeat,
              linear-gradient(var(--fk-blue), var(--fk-blue)) center / 1.75px 10px no-repeat;
  box-shadow: inset 0 0 0 1.25px rgba(0, 107, 203, .35); transition: transform 160ms var(--v6-ease);
}
.fk .fk-faq details[open] > summary::after { transform: rotate(45deg); }
.fk .fk-faq details > summary:hover { color: var(--fk-blue); }
.fk .fk-faq details > p { font: 400 15.5px/1.65 var(--font-sans); color: var(--fk-body); }

/* ---------------------------------------------------------------- related */
.fk .fk-related-h { margin-bottom: 18px; font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--fk-mute); }
.fk .fk-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fk .fk-related a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border-radius: 18px; text-decoration: none;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); transition: box-shadow 140ms var(--v6-ease);
}
.fk .fk-related a:hover { box-shadow: inset 0 0 0 1.5px var(--fk-blue), 0 12px 28px -22px rgba(16, 45, 73, .5); }
.fk .fk-related b { font: 650 16.5px/1.3 var(--font-display); letter-spacing: -.012em; color: var(--fk-ink); }
.fk .fk-related b::after { content: " →"; color: var(--fk-blue); }
.fk .fk-related span { font: 400 14.5px/1.5 var(--font-sans); color: var(--fk-body); }
/* the last section before the closing band keeps its breathing room */
.fk > .fk-sec:has(+ .fk-closing), .fk .fk-related { padding-bottom: 104px; }

/* ================================================================ 5 · the closing band (landing style) */
html body .fk > .fk-closing#closing {
  display: block; background: var(--fk-poster) right -6vw top -170px / auto 720px no-repeat, var(--fk-ground);
}
html body .fk > #closing.fk-closing > .cta-gradient-inner { display: block; width: 100%; max-width: 1160px; margin: 0 auto; }
.fk .fk-closing .eyebrow { display: flex; align-items: center; margin: 0 0 22px; color: #d6eeff; font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; }
.fk .fk-closing .eyebrow::before { content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px; background: var(--orange); transform: var(--fk-stroke); }
html body .fk .fk-closing h2 { max-width: 16ch; font: 650 clamp(36px, 4.4vw, 62px)/1.03 var(--font-display); letter-spacing: -.035em; color: #fff; }
html body .fk .fk-closing h2 span { display: block; }
.fk .fk-closing h2 + p { max-width: 52ch; margin-top: 20px; font: 400 18px/1.55 var(--font-sans); color: rgba(236, 244, 252, .86); }
.fk .fk-closing .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ================================================================ THE APP PANEL */
.fk .fk-app {
  --fk-app-min: 560px;
  position: relative; border-radius: 16px; background: #fff; overflow: clip; text-align: left;
  box-shadow: 0 0 0 1px rgba(6, 22, 42, .06), 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
  font: 400 13.5px/1.45 var(--font-sans); color: var(--fk-ink);
}
.fk .fk-app .icon { width: 18px; height: 18px; }
/* window chrome */
.fk .fk-app-bar { display: flex; align-items: center; gap: 18px; height: 42px; padding: 0 16px; background: #f4f7fa; border-bottom: 1px solid var(--fk-line); }
.fk .fk-app-dots { display: inline-flex; gap: 7px; }
.fk .fk-app-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d6dee7; }
.fk .fk-app-url {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 420px; flex: 0 1 420px; height: 26px; padding: 0 12px;
  border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--fk-line); font: 500 12px/1 var(--font-sans); color: var(--fk-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fk .fk-app-url .icon { width: 12px; height: 12px; color: var(--fk-faint); }
/* body grid: rail · side · main */
.fk .fk-app-body { display: grid; grid-template-columns: 76px 212px minmax(0, 1fr); min-height: var(--fk-app-min); }
.fk .fk-app-body--no-side { grid-template-columns: 76px minmax(0, 1fr); }
.fk .fk-app-body--bare { grid-template-columns: minmax(0, 1fr); }
.fk .fk-app-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; background: #f7f9fb; border-right: 1px solid #e8edf2; }
.fk .fk-app-mark { width: 24px; height: auto; margin: 2px 0 14px; }
.fk .fk-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; padding: 8px 0 7px; border-radius: 10px;
  font: 500 10.5px/1.1 var(--font-sans); color: var(--fk-mute);
}
.fk .fk-rail-item .icon { width: 20px; height: 20px; }
.fk .fk-rail-item.is-on { background: #e7f1fb; color: var(--fk-blue-deep); font-weight: 600; }
.fk :is(.fk-rail-me, .fk-rail-end) { margin-top: auto; }
.fk .fk-app-side { display: flex; flex-direction: column; gap: 2px; padding: 20px 14px; background: #fbfcfd; border-right: 1px solid #edf1f5; }
.fk .fk-side-h { margin: 0 8px 12px; font: 650 16px/1.2 var(--font-display); letter-spacing: -.015em; color: var(--fk-ink); }
.fk .fk-side-group { margin: 12px 8px 6px; font: 600 10.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-faint); }
.fk .fk-side-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font: 500 13px/1.25 var(--font-sans); color: var(--fk-ink-2); }
.fk .fk-side-item .icon { width: 16px; height: 16px; color: var(--fk-mute); }
.fk .fk-side-item.is-on { background: #e7f1fb; color: var(--fk-blue-deep); font-weight: 600; }
.fk .fk-side-item.is-on .icon { color: var(--fk-blue); }
.fk .fk-app-main { display: flex; flex-direction: column; min-width: 0; }
.fk .fk-app-top { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 22px 0 26px; border-bottom: 1px solid var(--fk-line-2); }
.fk .fk-app-crumb { font: 500 13px/1 var(--font-sans); color: var(--fk-mute); white-space: nowrap; }
.fk .fk-app-crumb i { margin: 0 6px; font-style: normal; color: #b5c1ce; }
.fk .fk-app-crumb b { font-weight: 600; color: var(--fk-ink); }
.fk .fk-app-search {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; width: 250px; height: 32px; padding: 0 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--fk-line); font: 400 12.5px/1 var(--font-sans); color: var(--fk-faint); white-space: nowrap; overflow: hidden;
}
.fk .fk-app-search .icon { width: 14px; height: 14px; }
.fk .fk-avatar {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #e3eefa; color: var(--fk-blue-deep); font: 650 10.5px/1 var(--font-sans); letter-spacing: .04em;
}
.fk .fk-app-content { flex: 1; padding: 22px 26px 28px; }
/* tabs: a segmented control */
.fk .fk-tabs { display: inline-flex; gap: 2px; margin-bottom: 22px; padding: 3px; border-radius: 11px; background: #eff3f7; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fk .fk-tabs::-webkit-scrollbar { display: none; }
.fk .fk-tab {
  flex: none; padding: 7px 16px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 13px/1.2 var(--font-sans); color: var(--fk-mute); transition: background-color 140ms, color 140ms, box-shadow 140ms;
}
.fk .fk-tab:hover { color: var(--fk-ink); }
.fk .fk-tab.is-active { background: #fff; color: var(--fk-ink); box-shadow: 0 1px 2px rgba(16, 45, 73, .1), 0 0 0 1px rgba(16, 45, 73, .05); }
.fk .fk-tab:focus-visible { outline: 2px solid var(--fk-blue); outline-offset: 1px; }
/* every panel shares one grid cell, so the frame keeps the tallest tab's height and nothing below jumps */
.fk .fk-app-content[data-tabs] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
.fk .fk-app-content[data-tabs] > .fk-tabs { grid-row: 1; justify-self: start; }
.fk .fk-app-content[data-tabs] > .fk-tabpanel { grid-row: 2; grid-column: 1; min-width: 0; }
.fk .fk-tabpanel:not(.is-active) { visibility: hidden; }
.fk .fk-tabpanel { transition: opacity 140ms var(--v6-ease); }
.fk .fk-tabpanel.is-entering { opacity: 0; }
/* columns inside a panel */
.fk .fk-app-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fk .fk-app-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk .fk-app-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fk .fk-app-h { font: 650 18px/1.25 var(--font-sans); letter-spacing: -.012em; color: var(--fk-ink); }
.fk .fk-app-sub { margin-top: -6px; font: 400 13px/1.5 var(--font-sans); color: var(--fk-mute); }
.fk .fk-app-aside { padding-top: 36px; }

/* ---------------------------------------------------------------- parts */
.fk .fk-card { padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--fk-line), 0 1px 2px rgba(16, 45, 73, .04); }
.fk .fk-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 13.5px/1.3 var(--font-sans); color: var(--fk-ink); }
.fk .fk-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #eef2f6; font: 600 11px/1 var(--font-sans); color: var(--fk-mute); }
.fk .fk-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fk-line-2); font: 400 12px/1.45 var(--font-sans); color: var(--fk-mute); }
.fk .fk-link { flex: none; font: 600 12.5px/1.2 var(--font-sans); color: var(--fk-blue); }
.fk .fk-label { font: 600 10.5px/1.2 var(--font-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--fk-mute); }

/* file chip */
.fk .fk-file { display: inline-flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; }
.fk .fk-file-badge {
  position: relative; display: inline-grid; place-items: end center; flex: none; width: 28px; height: 34px; padding-bottom: 5px; border-radius: 4px 9px 4px 4px;
  background: #eaf2fb; box-shadow: inset 0 0 0 1px #cfe0f1; font: 700 7.5px/1 var(--font-sans); letter-spacing: .06em; color: var(--fk-blue-deep);
}
.fk .fk-file-badge::before { content: ""; position: absolute; top: 7px; left: 6px; right: 8px; height: 2px; border-radius: 1px; background: currentColor; opacity: .28; box-shadow: 0 4px 0 currentColor; }
.fk .fk-file-badge[data-type="ots"] { background: var(--fk-peach); box-shadow: inset 0 0 0 1px #ffcfb0; color: var(--fk-orange-ink); }
.fk .fk-file-badge:is([data-type="zip"], [data-type="csv"], [data-type="xlsx"]) { background: #eef1f5; box-shadow: inset 0 0 0 1px #d8dfe7; color: #465a70; }
.fk .fk-file-badge:is([data-type="jpg"], [data-type="png"]) { background: #eef4f8; box-shadow: inset 0 0 0 1px #d3e0ea; color: #36607f; }
.fk .fk-file-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk .fk-file-txt b { font: 600 13.5px/1.3 var(--font-sans); color: var(--fk-ink); overflow-wrap: anywhere; }
.fk .fk-file-txt small { font: 400 12px/1.3 var(--font-sans); color: var(--fk-mute); }

/* status chips — text with the slanted stroke; never a tick or a shield */
.fk .fk-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 100%; padding: 5px 11px 5px 10px; border-radius: 999px;
  background: #f1f4f7; color: var(--fk-mute); font: 600 12px/1.25 var(--font-sans); letter-spacing: .01em; white-space: nowrap;
}
.fk .fk-chip::before { content: ""; flex: none; width: 3px; height: 11px; border-radius: 2px; background: currentColor; transform: skewX(-14deg); }
.fk .fk-chip--pending { background: #fff3ea; color: var(--fk-orange-ink); box-shadow: inset 0 0 0 1px #ffdcc4; }
.fk .fk-chip--pending::before { background: var(--orange); }
.fk .fk-chip--ok { background: #eaf3fc; color: var(--fk-blue-deep); box-shadow: inset 0 0 0 1px #cfe2f5; }
.fk .fk-chip--muted { background: #f1f4f7; color: #4d6076; box-shadow: inset 0 0 0 1px #e1e7ee; }
.fk .fk-chip--sealed { background: #fff0e6; color: #c24a12; box-shadow: inset 0 0 0 1px rgba(255, 118, 43, .45); font-weight: 700; }
.fk .fk-chip--sealed::before { background: var(--orange); }
.fk .fk-chip--blue { background: var(--fk-blue); color: #fff; }

/* buttons in a capture */
.fk .fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 32px; padding: 0 14px; border-radius: 8px;
  font: 600 12.5px/1 var(--font-sans); white-space: nowrap; background: #fff; color: var(--fk-ink); box-shadow: inset 0 0 0 1px #d9e2eb;
}
.fk .fk-btn--primary { background: var(--fk-blue); color: #fff; box-shadow: inset 0 -1px 0 rgba(0, 40, 90, .25); }
.fk .fk-btn--mini { height: 24px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; }
.fk .fk-btn--link { height: auto; padding: 0; background: none; box-shadow: none; color: var(--fk-blue); }

/* the fingerprint */
.fk .fk-hash {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 9px; background: #f5f8fb; box-shadow: inset 0 0 0 1px var(--fk-line-2);
}
.fk .fk-hash-v { flex: 1; min-width: 0; font: 500 12.5px/1.6 var(--fk-mono); letter-spacing: .03em; color: var(--fk-ink-2); overflow-wrap: anywhere; word-break: break-all; }
.fk .fk-hash--pasted { background: #fff; box-shadow: inset 0 0 0 1px #cfe0f1; }
.fk .fk-hash--spec { padding: 0; background: none; box-shadow: none; }
.fk .fk-hash--spec .fk-hash-v { font-size: 15px; line-height: 1.7; letter-spacing: .06em; color: var(--fk-ink); }

/* key–value lines */
.fk .fk-kv > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--fk-line-2); }
.fk .fk-kv > div:first-child { border-top: 0; padding-top: 2px; }
.fk .fk-kv dt { font: 500 12.5px/1.5 var(--font-sans); color: var(--fk-mute); }
.fk .fk-kv dd { font: 400 13px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .fk-kv dd .fk-chip { display: flex; width: fit-content; margin: 0 0 6px; }

/* progress */
.fk .fk-progress { display: block; height: 6px; border-radius: 3px; background: #e6edf4; overflow: hidden; }
.fk .fk-progress i { display: block; width: calc(var(--p, 1) * 100%); height: 100%; border-radius: inherit; background: var(--fk-blue); }

/* drop zone */
.fk .fk-drop {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #f6faff;
  border: 1.5px dashed #b8d1ea;
}
.fk .fk-drop-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--fk-blue); box-shadow: inset 0 0 0 1px #d4e4f3; }
.fk .fk-drop-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fk .fk-drop-txt b { font: 600 13.5px/1.3 var(--font-sans); color: var(--fk-ink); }
.fk .fk-drop-txt small { font: 400 12px/1.45 var(--font-sans); color: var(--fk-mute); }
.fk .fk-drop-txt em { font: 600 12px/1.3 var(--font-sans); font-style: normal; color: var(--fk-blue); }

/* list rows */
.fk .fk-rows > li.fk-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--fk-line-2);
}
.fk .fk-rows > li.fk-row:first-child { border-top: 0; }
.fk .fk-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk .fk-row-txt b { font: 600 13px/1.3 var(--font-sans); color: var(--fk-ink); overflow-wrap: anywhere; }
.fk .fk-row-txt small { font: 400 11.5px/1.35 var(--font-sans); color: var(--fk-mute); }
.fk .fk-row-act { grid-column: 2 / -1; font: 600 12px/1.3 var(--font-sans); color: var(--fk-blue); }
.fk .fk-rows--stack > li.fk-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.fk .fk-rows--stack > li.fk-row > .fk-chip { grid-column: 2; justify-self: start; margin-top: 4px; }
.fk .fk-rows--stack > li.fk-row > .fk-row-act { grid-column: 2; }

/* a switch, a form field */
.fk .fk-switch { display: inline-block; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #d3dce6; position: relative; }
.fk .fk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 45, 73, .25); }
.fk .fk-switch.is-on { background: var(--fk-blue); }
.fk .fk-switch.is-on::after { left: 14px; }
.fk .fk-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fk .fk-field-l { font: 600 11.5px/1.2 var(--font-sans); color: var(--fk-mute); }
.fk .fk-field-v { display: flex; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d9e2eb; font: 400 13px/1.35 var(--font-sans); color: var(--fk-ink); }
.fk .fk-field-v.is-empty { color: var(--fk-faint); }
.fk .fk-field-v.is-focus { box-shadow: inset 0 0 0 1.5px var(--fk-blue), 0 0 0 3px rgba(0, 107, 203, .12); }

/* a paper page — the landing's lease, as a part */
.fk .fk-doc {
  position: relative; padding: 26px 26px 24px; border-radius: 6px; background: #fffdf9; color: var(--fk-ink);
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .06), 0 1px 2px rgba(6, 22, 42, .08), 0 14px 32px -16px rgba(6, 22, 42, .3);
}
.fk .fk-doc-kicker { display: flex; align-items: center; gap: 8px; font: 700 10px/1.35 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fk-blue); }
.fk .fk-doc-kicker::before { content: ""; width: 3px; height: 11px; border-radius: 2px; background: var(--orange); transform: skewX(-14deg); }
.fk .fk-doc-title { margin-top: 12px; font: 650 21px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--fk-ink); }
.fk .fk-doc-meta { margin-top: 6px; font: 400 11.5px/1.45 var(--font-sans); color: var(--fk-mute); }
.fk .fk-doc-lines { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.fk .fk-doc-lines i { display: block; height: 5px; border-radius: 3px; background: #ebe5da; }
.fk .fk-doc-lines i:nth-child(3n+2) { width: 88%; } .fk .fk-doc-lines i:nth-child(3n) { width: 64%; }
.fk .fk-doc-clause { font: 400 11.5px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .fk-doc-clause b { font-weight: 650; color: var(--fk-ink); }
.fk .fk-doc-field { display: inline-flex; align-items: flex-end; min-width: 120px; height: 34px; padding: 0 10px 6px; border-radius: 6px; background: #f0f7ff; border: 1px dashed var(--fk-blue); font: 600 10.5px/1 var(--font-sans); color: var(--fk-blue); }
.fk .fk-doc-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.fk .fk-doc-sign > span { padding-top: 8px; border-top: 1px solid #d8d1c4; font: 500 11px/1.2 var(--font-sans); color: var(--fk-mute); }
.fk .fk-doc-sign b { margin-right: 6px; font-weight: 650; color: var(--fk-blue); }

/* phase play: an element with data-phase shows only the children whose data-when lists that phase */
.fk [data-phase] [data-when] { transition: opacity 260ms var(--v6-ease); }
.fk [data-phase="drop"] [data-when]:not([data-when~="drop"]),
.fk [data-phase="work"] [data-when]:not([data-when~="work"]),
.fk [data-phase="ready"] [data-when]:not([data-when~="ready"]),
.fk [data-phase="send"] [data-when]:not([data-when~="send"]),
.fk [data-phase="done"] [data-when]:not([data-when~="done"]) { display: none; }

/* ================================================================ responsive */
@media (max-width: 1180px) {
  .fk .fk-app-body { grid-template-columns: 76px minmax(0, 1fr); }
  .fk .fk-app-body--bare { grid-template-columns: minmax(0, 1fr); }
  .fk .fk-app-side { display: none; }
}
@media (max-width: 1000px) {
  .fk .fk-steps, .fk .fk-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .fk .fk-steps::before { display: none; }
  .fk .fk-gets { grid-template-columns: 1fr; max-width: 620px; }
  .fk .fk-app-cols, .fk .fk-app-cols--even { grid-template-columns: 1fr; }
  .fk .fk-app-aside { padding-top: 0; }
  .fk .fk-plan { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fk .fk-table-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .fk .fk-table, .fk .fk-table :is(tbody, tr, th, td) { display: block; width: auto; }
  .fk .fk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fk .fk-table tbody tr { margin-bottom: 12px; padding: 18px 20px 6px; border-radius: 18px; background: #fff; box-shadow: var(--fk-card-sh); }
  .fk .fk-table tbody :is(th, td) { padding: 0 0 14px; border: 0; }
  .fk .fk-table tbody th { width: auto; padding-bottom: 12px; }
  .fk .fk-table tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 3px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fk-mute);
  }
  .fk .fk-table--compare tbody th { font: 650 16px/1.3 var(--font-display); color: var(--fk-ink); }
  .fk .fk-table--compare tbody td { width: auto; }
  .fk .fk-table--compare tbody td:nth-of-type(2)::before { color: var(--fk-orange-ink); }
  .fk .fk-code, .fk .fk-code :is(tbody, tr, th, td) { display: block; width: auto; }
  .fk .fk-code thead { display: none; }
  .fk .fk-code tbody tr { padding: 14px 16px; border-top: 1px solid var(--fk-line-2); }
  .fk .fk-code tbody tr:first-child { border-top: 0; }
  .fk .fk-code tbody :is(th, td) { padding: 0; border: 0; }
  .fk .fk-code tbody th { width: auto; margin-bottom: 8px; }
  .fk .fk-chip { white-space: normal; }
}
@media (max-width: 720px) {
  .fk .fk-app-body, .fk .fk-app-body--no-side { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fk .fk-app-rail { display: none; }
  .fk .fk-app-top { height: 48px; padding: 0 16px; }
  .fk .fk-app-search { display: none; }
  .fk .fk-app-top .fk-avatar { margin-left: auto; }
  .fk .fk-app-content { padding: 16px 14px 18px; }
  .fk .fk-tabs, .fk .fk-app-content[data-tabs] > .fk-tabs { display: flex; width: 100%; justify-self: stretch; margin-bottom: 16px; }
  .fk .fk-tab { flex: 1 0 auto; padding: 7px 10px; }
  .fk .fk-app-url { flex-basis: auto; }
}
@media (max-width: 1000px) {
  .fk .fk-app-content[data-tabs] > .fk-tabpanel:not(.is-active) { display: none; }   /* phones: a panel's height is its own tab's */
}
@media (max-width: 420px) {
  .fk .fk-tabs .fk-tab { padding: 7px 7px; font-size: 12px; }
}
@media (max-width: 360px) {
  .fk .fk-tab { padding: 7px 9px; font-size: 12px; }
  .fk .fk-drop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 12px; }
  .fk .fk-drop > .fk-btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .fk .fk-wrap { width: calc(100% - 40px); }
  html body .fk .hero-cu + .proof-cu.fk-stage { --fk-edge: 200px; }
  html body .fk .fk-hero { padding-bottom: 48px; }
  html body .fk .fk-hero h1 { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.04; }
  html body .fk .fk-hero .kd-rule { margin: 20px 0 18px; }
  .fk .fk-crumbs { margin-bottom: 20px; }
  .fk .fk-crumbs li { font-size: 11.5px; letter-spacing: .1em; }
  .fk .fk-sec { padding-top: 72px; }
  .fk .fk-stage + .fk-sec { padding-top: 72px; }
  .fk .fk-head { margin-bottom: 26px; }
  .fk .fk-h2 { padding-left: 22px; font-size: clamp(26px, 7.4vw, 32px); }
  .fk .fk-intro { font-size: 16px; }
  .fk .fk-steps, .fk .fk-steps--3 { grid-template-columns: 1fr; gap: 30px; }
  .fk .fk-steps > li { padding: 0 0 0 64px; min-height: 56px; }
  .fk .fk-steps > li::before { height: 46px; }
  .fk .fk-steps > li::after { top: 28px; }
  .fk .fk-get-spec { min-height: 120px; }
  .fk .fk-list--rule > li { padding-left: 28px; }
  .fk .fk-list--rule b { font-size: 17px; }
  .fk .fk-uses { padding: 4px 20px; }
  .fk .fk-uses > li { grid-template-columns: 1fr; gap: 10px; }
  .fk .fk-plan { padding: 22px 20px; }
  .fk .fk-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk .fk-plan-list li { min-width: 0; }
  .fk > .fk-sec:has(+ .fk-closing), .fk .fk-related { padding-bottom: 80px; }
  .fk .fk-related ul { grid-template-columns: 1fr; }
  html body .fk > .fk-closing#closing { padding: 88px 20px 72px !important; background-size: auto 480px; background-position: right -130px top -60px; }
  .fk .fk-closing h2 + p { font-size: 16.5px; }
  .fk .fk-kv > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .fk *, .fk *::before, .fk *::after { transition: none !important; }
}