/* ============================================================
   Ordia — /docs/ catalogue section (Main)
   Loads AFTER styles.css and reads its tokens only. Nothing here
   redefines a brand token; this file adds the components a form
   page needs and that the marketing site does not have.
   ============================================================ */

/* ---- section chrome ------------------------------------- */
.dnav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.dnav-in{display:flex;align-items:center;gap:16px;min-height:var(--nav-h)}
/* The brand used to carry margin-right:auto, which shoved the whole trail over
   to sit beside the theme toggle — 550px of dead space after the logo at 1440.
   Brand and crumbs now read as one trail on the left; only the toggle is pushed
   right, and it is the sole thing that moves as the window changes width. */
/* flex:none, or the crumbs squeeze it: it measured 20px wide at 360px, well
   under the 24px minimum target. The crumb trail already handles its own
   overflow by scrolling, so it has no claim on this button's width. */
.dnav .theme-btn{margin-left:auto;flex:none}

/* .crumbs moved to styles.css: the breadcrumb is shared chrome now, and
   docs.css is only loaded by the catalogue. */


/* ---- document head -------------------------------------- */
.dhead{padding-block:48px 8px}

/* First screen, two columns: the claim and its proof on the left, the document
   itself on the right. The right column sets the height, so the verification
   panel fills the left instead of leaving a hole under the heading — which is
   what a single-column version of this layout produced. */
/* First screen, two columns: what the document is and what it costs on the
   left, the proof that it is current on the right. The panel stops being a
   block the reader scrolls past on the way to the action.

   Named areas rather than source order, so on one column the heading comes
   first, the price second and the panel last — stacking the source order put
   the panel between the sentence and the button. */
.dhead--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.8fr);
  grid-template-areas:"say panel";
  gap:clamp(30px,4vw,64px);align-items:center;padding-block:clamp(48px,7vh,84px) clamp(28px,4vh,44px)}
.dhead-say{grid-area:say}
.dhead--split .monitor{grid-area:panel;margin-bottom:0;max-width:none}
.dhead--split h1{max-width:20ch}
.dhead--split .sub{margin-bottom:24px}
.dhead--split .buy{margin-bottom:12px}
@media (max-width:900px){
  .dhead--split{grid-template-columns:1fr;grid-template-areas:"say" "panel";gap:26px}
}
.dhead h1{font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;margin:0 0 16px;max-width:20ch;text-wrap:balance}
.dhead .sub{font-size:19px;line-height:1.6;color:var(--muted);max-width:56ch;margin:0 0 26px}

/* ---- the monitoring panel -------------------------------
   The one thing a free template on a forum cannot carry: which act this
   document answers to, which edition of it is in force, when a person last
   read it back, and a link so the buyer checks all three without us.

   Deliberately an instrument, not a promo badge — a status line, the act, a
   row of three dates, one link. Every value is written by the build from the
   form file, so the panel can only ever say what the monitor already agreed.
   ---------------------------------------------------------- */
/* Inverted, the way the brand band on the agency pages is: the panel is the one
   thing on this page that is not the document, and reversing it is what the site
   already does when a block speaks in its own voice. --ink / --ink-fg flip with
   the theme, so this is dark on the cream page and cream on the dark one.
   Every colour inside is mixed FROM those two, so nothing has to be re-picked
   per theme. */
.monitor{--m-fg:var(--ink-fg);
  /* 72/70, not 66/60: measured on the built page, the lighter mixes came out
     at 4.69-4.72:1 in the dark theme — over AA, but with no headroom at 11px. */
  --m-mut:color-mix(in srgb,var(--ink-fg) 72%,var(--ink));
  --m-line:color-mix(in srgb,var(--ink-fg) 20%,var(--ink));
  /* The accent survives on the page but NOT as text on the inverted panel: the
     mix has to lighten in one theme and darken in the other, so one of the two
     always lands under 4.5:1 (measured 3.96 dark / 4.36 light). It is kept for
     the bullet and the arrow, which are marks rather than text, and the act
     code reads in the muted colour like every other small label here. */
  --m-mark:color-mix(in srgb,var(--soft-mark) 70%,var(--ink-fg));
  background:var(--ink);color:var(--m-fg);
  border:1px solid var(--ink);border-radius:var(--radius);
  padding:22px 24px 20px;margin:0 0 26px;max-width:48ch}

/* The check date is the point of the panel, so it is the largest thing in it.
   Everything that used to sit here — a second date saying the same day, the
   date we plan to re-read by, a paragraph repeating the line beside the dot —
   was answering questions nobody asked. */
.monitor-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.monitor-state{display:inline-flex;align-items:center;gap:9px;width:100%;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--m-mut)}
/* A ring rather than a plain disc: the dot reads as an instrument reading, and
   the ring keeps it visible on both grounds without needing a second colour. */
.monitor-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 22%,transparent)}
.monitor-day{font-size:32px;font-weight:650;letter-spacing:-.025em;line-height:1.08;
  font-variant-numeric:tabular-nums}
.monitor-freq{font-family:var(--mono);font-size:12px;color:var(--m-mut)}

/* Every act the document cites, not just the one that prescribes its shape.
   Five acts is a stronger claim than one, and which five differs from document
   to document — which is what stops the panel being the same furniture on
   every page. */
.monitor-lead{margin:16px 0 12px;padding:14px 0 0;border-top:1px solid var(--m-line);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--m-mut)}
/* The act is the link. Two targets (a name and a separate "open the register"
   line) is one target too many. */
.monitor-act{display:block;color:var(--m-fg);text-decoration:none}
.monitor-code{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--m-mut);margin-bottom:3px}
.monitor-name{display:block;font-size:15px;line-height:1.4}
.monitor-name::after{content:"\2197";font-size:12px;margin-left:7px;color:var(--m-mark);
  display:inline-block;transition:transform .18s var(--ease)}
.monitor-ed{display:block;margin-top:5px;font-family:var(--mono);font-size:11.5px;color:var(--m-mut)}
@media (hover:hover){
  .monitor-act:hover .monitor-name{text-decoration:underline;text-underline-offset:3px}
  .monitor-act:hover .monitor-name::after{transform:translate(2px,-2px)}
}
.monitor-act:focus-visible{outline:2px solid var(--m-fg);outline-offset:4px;border-radius:4px}
/* The supporting acts: short names, one per line, so five of them read as a
   list rather than a paragraph of commas. */
/* Wrapped inline, not one per line: four supporting acts stacked turned a
   compact panel back into a column of link rows. The arrow lives on the
   primary act only — repeating it five times labels the obvious. */
.monitor-more{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px 14px}
.monitor-more a{display:inline-flex;align-items:baseline;gap:6px;
  font-size:12.5px;color:var(--m-mut);text-decoration:none;
  border-bottom:1px solid transparent}
.monitor-more a::before{content:"";flex:none;width:3px;height:3px;border-radius:50%;
  background:var(--m-mark);transform:translateY(-3px)}
@media (hover:hover){.monitor-more a:hover{color:var(--m-fg);border-bottom-color:var(--m-line)}}
.monitor-more a:focus-visible{outline:2px solid var(--m-fg);outline-offset:3px;border-radius:3px}
.monitor-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--m-line);
  font-size:12.5px;line-height:1.5;color:var(--m-mut)}
@media (prefers-reduced-motion:reduce){
  .monitor-name::after{transition:none}
}
@media (max-width:560px){
  .monitor{padding:15px 16px;max-width:none}
  .monitor-day{font-size:24px}
}

/* ---- buy strip ------------------------------------------ */
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 12px}
.buy .price{font-size:30px;font-weight:650;letter-spacing:-.02em}
.buy .price small{font-size:14px;font-weight:400;color:var(--muted);margin-left:6px}
.buy .btn{white-space:nowrap}
.buy-note{font-size:14px;color:var(--muted);max-width:56ch;margin:0}

/* ---- generic doc blocks --------------------------------- */
.dsec{padding:44px 0;border-top:1px solid var(--line)}
.dsec > h2{font-size:24px;letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}
.dsec > .lede{color:var(--muted);max-width:62ch;margin:0 0 22px}
.dsec p{max-width:66ch}

/* the parsed standard, clause by clause — this is both the product and the page */
.clauses{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.clauses li{background:var(--surface);padding:16px 18px;display:grid;grid-template-columns:96px 1fr;gap:16px}
.clauses .cl{font-family:var(--mono);font-size:12px;color:var(--soft-mark);padding-top:3px}
.clauses h3{font-size:16px;margin:0 0 5px}
.clauses p{margin:0;font-size:15px;color:var(--muted);max-width:60ch}
@media (max-width:620px){.clauses li{grid-template-columns:1fr;gap:4px}}

/* The sample document. Generated by build-pages from the same form the buyer
   fills, so it cannot drift from what the engine actually produces.

   It does NOT follow the site theme, and that is the whole point: what is being
   shown is a Word file, and a Word file is black on white on the buyer's screen
   whatever the page around it is doing. So the paper is fixed white, the text
   fixed near-black, and the type is the serif a Ukrainian instruction is
   actually set in. Nothing here is a design choice about the site; it is a
   picture of the artifact.

   No accent colour either. The coral belongs to the site, and a document with
   an orange line in it is not a document anyone would recognise: the clause
   references are OUR annotation, so they are grey, quieter than the text they
   annotate, and visibly not part of it. */
.sample-doc{
  --pg:#fff; --pg-fg:#1c1a17; --pg-mut:#6b6b6b; --pg-line:#dfdcd4;
  background:var(--pg);color:var(--pg-fg);
  border:1px solid var(--pg-line);border-radius:2px;
  box-shadow:0 18px 44px -30px rgba(0,0,0,.45);
  margin:22px 0 0;max-width:80ch;
  padding:clamp(30px,5vw,58px) clamp(22px,5vw,64px);
  font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.7}
.sd-head{border-bottom:1px solid var(--pg-line);padding-bottom:22px;margin-bottom:28px}
.sample-doc .sd-approve{margin:0 0 24px auto;max-width:26ch;text-align:left;
  font-size:13px;line-height:1.7;color:var(--pg-mut)}
.sd-title{font-size:16px;letter-spacing:.02em;text-transform:uppercase;text-align:center;margin:0;
  font-weight:700}
.sd-title span{display:block;margin-top:7px;font-size:15px;font-weight:400;
  letter-spacing:normal;text-transform:none}
.sd-sec{margin:0 0 28px}
.sd-sec:last-child{margin-bottom:0}
.sd-sec h3{font-size:15.5px;margin:0 0 3px;font-weight:700}
.sd-n{color:var(--pg-fg);margin-right:2px}
/* Our annotation, not the document's text: system mono, grey, small. */
.sd-cl{font-family:var(--mono);font-size:11px;color:var(--pg-mut);margin:0 0 12px;letter-spacing:.01em}
.sample-doc ol{margin:0;padding-left:26px}
.sample-doc li{margin-bottom:9px;color:var(--pg-fg)}
.sample-doc li:last-child{margin-bottom:0}
.sample-doc p{max-width:none}
/* The price sits UNDER the document, never above it: the visitor came for the
   file, and asking for money before showing it is answering a question almost
   nobody typed. */
.dsec--sample .buy{margin-top:30px}

/* comparison against the free template */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:22px 0 0}
.vs > div{background:var(--surface);padding:18px 20px}
.vs h3{font-size:14px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:400}
.vs ul{margin:0;padding-left:20px;font-size:15px}
.vs li{margin-bottom:8px;color:var(--muted)}
.vs .ours li{color:var(--fg)}
@media (max-width:620px){.vs{grid-template-columns:1fr}}

/* ---- order form -----------------------------------------
   Shared by two forms: ordering a document, and asking for one that is not in
   the catalogue yet. Only the fields differ. */
.order{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.order .row{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.order .row-1{grid-template-columns:1fr}
@media (max-width:620px){.order .row{grid-template-columns:1fr}}
.order label{display:block;font-size:14px;margin-bottom:6px}
.order input,.order textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;
  padding:11px 13px;color:var(--fg);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.order textarea{resize:vertical;min-height:96px;line-height:1.5}
/* No opacity on the placeholder: --muted is the AA-checked muted token, and
   knocking it back to 70% is how a form ends up with unreadable hints. */
.order input::placeholder,.order textarea::placeholder{color:var(--muted)}
/* Ring rather than outline, same as the agency intake form, so the two forms
   answer a focus the same way.
   :focus, NOT :focus-visible. The visible/not distinction exists to keep rings
   off mouse-clicked buttons; on a text field you want the indicator however
   focus arrived, and :focus-visible risks leaving a mouse user with none. */
.order input:focus,.order textarea:focus{outline:none;
  border-color:var(--soft-mark);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--soft-mark) 20%,transparent)}
.order .hint{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:56ch}
.order-msg{font-size:14px;margin:14px 0 0;color:var(--soft-mark)}
/* The result is a state change, and a line of text snapping into existence
   reads as a glitch. @starting-style animates it without touching docs.js;
   browsers without it simply show the message at once. */
.order-msg{transition:opacity .22s var(--ease),transform .22s var(--ease)}
@starting-style{.order-msg{opacity:0;transform:translateY(-4px)}}
/* Press feedback: the only motion on this button, and the only one it needs. */
.order button[type="submit"]{transition:transform .16s var(--ease)}
.order button[type="submit"]:active{transform:scale(.97)}

/* ---- own form: describe, quote, build --------------------
   Asymmetric split. The sequence reads down the left, the form sits beside it,
   so the last thing on the page is the thing you do. */
.of-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4.5vw,64px);align-items:start}
.of-say .lead{margin-bottom:24px}
.of-note{margin:20px 0 0;padding-top:17px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (max-width:900px){
  .of-in{grid-template-columns:1fr;gap:34px}
}

/* Reveal: the steps arrive in the order they happen, and the form arrives
   last, after you have read what it commits you to. Gated on .js so a visitor
   without JavaScript gets the whole section immediately. */
.js .of-rise{opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .of-rise.in{opacity:1;transform:none}
.js .of-note{transition-delay:70ms}
@media (prefers-reduced-motion:reduce){
  .js .of-rise{opacity:1;transform:none;transition:none;transition-delay:0s}
  .order input,.order textarea,.order-msg,.order button[type="submit"]{transition:none}
  .order button[type="submit"]:active{transform:none}
}

/* ---- faq -------------------------------------------------
   Nothing here. The catalogue uses the AGENCY faq component from styles.css
   (.faq-split / .faq-aside / .faq with the plus-to-minus .ic and the
   ::details-content open transition) so the two products share one accordion
   rather than each growing its own. This file used to override it with a
   simpler +/- list, which is why the section looked plainer than the rest of
   the site. Do not re-add overrides here: change styles.css and both surfaces
   move together. */

/* ---- catalogue index ------------------------------------
   Two treatments, because there are two kinds of thing here. A document you
   can buy gets a card. A document that does not exist yet gets a line in a
   list. The old grid gave both the same box, which read as a catalogue of
   three when only one of them could be opened.

   auto-fit, not auto-fill: with one live document the track fills the row, and
   the grid becomes two-up then three-up by itself as more go live. */
/* The bottom margin lives here, not on the queue heading: .cat-h sets the
   `margin` shorthand and is defined further down the file, so a margin-top on
   the heading would be overwritten. */
.doc-live{display:grid;gap:14px;margin:22px 0 36px;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.doc{display:flex;flex-direction:column;gap:10px;height:100%;box-sizing:border-box;
  padding:24px 26px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:inherit}
.doc h4{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.32}
.doc p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:62ch}
/* margin-top:auto pins the foot to the bottom, so several cards of different
   text lengths still line their prices up. */
.doc-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.doc-meta{font-family:var(--mono);font-size:12px;color:var(--soft-mark)}
.doc-go{font-family:var(--mono);font-size:12px;color:var(--fg);
  display:inline-flex;align-items:center;gap:7px;min-height:24px}
.doc:focus-visible{outline:2px solid var(--soft-mark);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .doc{transition:border-color .18s var(--ease),transform .18s var(--ease)}
  .doc:hover{border-color:var(--soft-mark);transform:translateY(-2px)}
  /* The arrow nudge is the same gesture the buttons and service tiles make. */
  .doc-go > span{transition:transform .2s var(--ease)}
  .doc:hover .doc-go > span{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  .doc{transition:none}
  .doc:hover{transform:none}
}

/* The queue: no boxes, no opacity trick. A hairline BETWEEN rows only, never
   one under each, so the list stays quiet as it grows.

   Status FIRST, in a fixed column. Pushing it to the far right of a 1040px row
   left half a screen of gap between a name and its state and read as a spec
   table; as a left column the two stay related and 20 rows still scan. */
.doc-queue{margin:12px 0 0;padding:0;list-style:none}
.doc-queue li{display:grid;grid-template-columns:130px minmax(0,1fr);
  gap:4px 18px;align-items:baseline;padding:13px 0}
.doc-queue li + li{border-top:1px solid var(--line)}
.q-state{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.q-name{font-size:15px;line-height:1.45;color:var(--fg)}
@media (max-width:560px){
  .doc-queue li{grid-template-columns:1fr}
}
.queue-note{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.queue-note a{color:var(--fg);text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:24px}
.queue-note a::after{content:"\2192";margin-left:7px;color:var(--soft-mark)}

/* ============================================================
   builder — the slots screen and the watermarked preview
   ============================================================ */
.b-wrap{padding:40px 0 0}
.b-head h1{font-size:clamp(24px,3.6vw,32px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;max-width:24ch;text-wrap:balance}
.b-sub{color:var(--muted);max-width:58ch;margin:0 0 30px}
.b-error{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;max-width:60ch}

.b-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;align-items:start}
@media (max-width:860px){.b-cols{grid-template-columns:1fr;gap:24px}}

/* --- slots --- */
.b-group{margin:0 0 34px}
.b-group h2{font-size:15px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 6px}
.b-group-hint{font-size:14.5px;color:var(--muted);margin:0 0 20px;max-width:56ch}

.b-slot{margin:0 0 20px}
.b-slot[hidden]{display:none}
.b-slot label{display:flex;align-items:baseline;gap:10px;font-size:15px;margin-bottom:7px}
.b-req{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b-slot input[type=text],.b-slot input[type=date],.b-slot select{
  width:100%;max-width:520px;font:inherit;font-size:15px;padding:11px 13px;color:var(--fg);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:8px}
.b-slot input:focus-visible,.b-slot select:focus-visible{outline:2px solid var(--soft-mark);outline-offset:1px}
.b-hint{font-size:13px;color:var(--muted);margin:7px 0 0;max-width:52ch}
/* Says the form arrived pre-filled and from what. A form that quietly fills
   itself is a form somebody signs without reading it. */
.b-reused{margin:0 0 24px;padding:14px 16px;max-width:60ch;font-size:14px;line-height:1.6;
  color:var(--fg);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}

.b-choice{display:flex;gap:8px;flex-wrap:wrap}
.b-opt{font:inherit;font-size:15px;padding:9px 18px;border-radius:8px;cursor:pointer;
  background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);
  transition:transform .16s var(--ease),border-color .18s var(--ease)}
/* The yes/no answers are the most-pressed control in the builder and had no
   press feedback at all. 0.97 matches .btn:active on the marketing site. */
.b-opt:active{transform:scale(.97)}
.b-opt:hover{border-color:var(--fg)}
.b-opt[aria-checked="true"]{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.b-opt:focus-visible{outline:2px solid var(--soft-mark);outline-offset:2px}

/* --- side card --- */
.b-side{position:sticky;top:calc(var(--nav-h) + 20px)}
@media (max-width:860px){.b-side{position:static}}
.b-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.b-progress{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 12px;position:relative;padding-bottom:12px}
.b-progress::before,.b-progress::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px}
.b-progress::before{background:var(--line)}
/* scaleX rather than width: the bar grows without touching layout */
.b-progress::after{background:var(--ok);transform:scaleX(var(--done,0));transform-origin:left;transition:transform .3s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .b-progress::after{transition:none}
  .b-opt{transition:none}
}
.b-build{width:100%;justify-content:center}
.b-build[disabled]{opacity:.5;cursor:not-allowed}
.b-note{font-size:13px;color:var(--muted);margin:12px 0 0}

/* --- assembled document --- */
.b-stage{margin:46px 0 0;padding:34px 0 60px;border-top:1px solid var(--line)}
.b-stage-head h2{font-size:22px;margin:0 0 6px}
.b-stage-head p{color:var(--muted);margin:0 0 24px}

/* the preview is paginated into real pages; every page is stamped */
.b-paper{display:grid;gap:22px;user-select:none;-webkit-user-select:none}
.b-doc{display:grid;gap:22px}

.b-page{position:relative;aspect-ratio:1 / 1.414;overflow:hidden;
  background-color:var(--surface);background-repeat:repeat;background-size:118px 74px;
  color:var(--fg);                   /* currentColor feeds the SVG stamp */
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,4.4vw,46px);display:flex;flex-direction:column}
.b-page-in{flex:1;min-height:0;overflow:hidden;font-size:clamp(11px,1.35vw,14px);line-height:1.6;color:var(--fg)}
.b-page-foot{flex:none;margin:12px 0 0;padding-top:8px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-align:center}

.b-page .d-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 24px}
.b-page .d-org{margin:0;font-weight:600}
.b-page .d-appr{margin:0;text-align:right;color:var(--muted);line-height:1.45}
.b-page .d-title{font-size:1.15em;text-align:center;margin:0 0 22px;line-height:1.45}
.b-page .d-h{font-size:1em;margin:16px 0 6px}
.b-page .d-h:first-child{margin-top:0}
.b-page .d-list{margin:0;padding-left:2.2em}
.b-page .d-list li{margin-bottom:5px;color:var(--term-body)}
/* .d-foot removed with the supplier stamp it styled (2026-08-08). */

/* watermark layer 2: rotated tiles across the whole page.
   Layer 1 is the SVG background set in JS; layer 3 is the footer stamp. */
.b-mark{position:absolute;inset:-16%;pointer-events:none;display:grid;
  grid-template-columns:repeat(var(--tiles,5),1fr);align-content:space-around;
  justify-items:center;transform:rotate(-24deg);opacity:var(--wm-opacity,.055)}
.b-mark span{font-family:var(--mono);font-size:clamp(6px,.85vw,9px);letter-spacing:.1em;
  color:var(--fg);white-space:nowrap;padding:5px 0}

/* pages past the free limit stay unreadable in an unpaid browser */
.b-page-locked .b-page-in{filter:blur(6px);opacity:.5}
.b-page-locked::after{content:"Відкриється після оплати";position:absolute;inset:auto 0 46% 0;
  text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.b-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:26px 0 0}
.b-price{font-size:26px;font-weight:650;letter-spacing:-.02em}
.b-buy .b-note{width:100%;margin:0;max-width:62ch}
.b-paymsg{width:100%;margin:0;font-size:14px;color:var(--soft-mark);max-width:62ch}

/* ---- section footer -------------------------------------
   The .dfoot rules moved to styles.css. Nothing in /docs/ uses that class any
   more — its only remaining users are pricing.html and welcome.html, which sit
   at the site root and never load THIS file, so the rules living here left
   both of those footers completely unstyled. */

/* Package tiers, listed inside a plan card: size on the left, price on the
   right. Overrides the arrow bullet .plan li carries, because these rows are a
   price table rather than a list of benefits. */
.tier-list li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding-left:0}
.tier-list li::before{content:none}
.tier-list b{color:var(--fg);font-weight:650;font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* margin-top:auto keeps the card's foot aligned with the buttons in its
   neighbours, since this card has a note where they have a control. */
.plan-note{margin:auto 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---- catalogue landing (reuses .sec/.plans from styles.css) ----
   The five steps are a LIST, not the card row the agency page uses for its
   four phases. Five of those cards across the same width come out 198px each:
   every heading wraps, every sentence breaks after three words, and the
   section turns into five columns of fragments. A full-width row per step
   gives the sentence its natural line length, and reading top to bottom is
   what a sequence wants anyway.
   The condition on the tail is what keeps the rows from turning into a table:
   the note is a footnote to its step, so it sits at the end of the line and
   drops under the text as soon as the row is too narrow to hold both. */
.dsteps{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.dstep{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 22px;
  align-items:baseline;padding:20px 2px;border-bottom:1px solid var(--line)}
.dstep-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--soft-mark)}
.dstep h3{margin:0 0 6px;font-size:18px;letter-spacing:-.012em}
.dstep p{margin:0;color:var(--muted);font-size:15px;line-height:1.62;max-width:68ch}
.dstep-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--muted);justify-self:end;text-align:right;max-width:26ch}
@media (max-width:860px){
  .dstep{grid-template-columns:auto minmax(0,1fr);gap:4px 14px}
  .dstep-t{grid-column:2;justify-self:start;text-align:left;max-width:none;margin-top:8px}
}
.cat-h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 4px}
.price-note{font-size:14px;color:var(--muted);margin:22px 0 0;max-width:60ch}
.docs .nav .links a[href^="#"]{scroll-margin-top:var(--nav-h)}

/* ============================================================
   Documents surface: the ink hero.
   Added 2026-08-06. Tokens only — no new colours are invented here;
   the ink ground is --band-bg, the same shell the agency site's Problem
   module sits in, so this page follows the theme without a second palette.
   ============================================================ */

/* ---- ink hero ----
   Cream page, dark opener. The agency hero is the reverse, which is the point:
   same family, clearly not the same page.
   The ground, the palette and the sheet come from .ink and .dsheet in
   styles.css, shared with the documents bridge on the agency page. Only what
   is specific to a page OPENER lives here. */
/* Sized to the agency hero, not below it (owner's call, 2026-08-08). Both
   openers now hold the same share of the first screen, so the catalogue reads
   as the same company's second product rather than a subpage of the first.
   The ground still inverts — cream there, ink here — which is what keeps them
   distinguishable without one of them being smaller. */
.dhero{display:flex;align-items:center;min-height:clamp(560px,84vh,860px)}
/* The copy column takes the extra room a display-size headline needs, and the
   three proof pills fit on one line at this width — wrapped, the last one sits
   alone under the other two and reads as a mistake rather than a third item. */
.dhero-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(36px,4vw,56px);align-items:center;
  padding-block:clamp(56px,7vw,88px);width:100%}
.dhero-eyebrow{display:inline-block;font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-muted);margin-bottom:20px}
/* Same scale as the agency headline. This one is a full sentence rather than
   two rolling words, so text-wrap:balance carries the extra weight: it evens
   the lines and stops the wrap orphaning a word at display size. */
.dhero h1{margin:0;font-size:clamp(34px,5.2vw,60px);line-height:1.06;
  letter-spacing:-.028em;font-weight:730;text-wrap:balance}
/* Three conveniences, not a count of questions. A number here can only be the
   question count of one form, which stops being true as soon as the catalogue
   holds two — and a visitor does not want to know how many questions there are,
   they want to know it is quick and gives them a file.
   It sits on the dark ground, so it takes the --ink-* tokens: the cream-page
   greys measure 2.1:1 here and are unreadable. */
.dhero-proof{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;
  list-style:none}
.dhero-proof li{padding:6px 12px;border:1px solid var(--ink-line);border-radius:999px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--ink-muted)}
/* First one carries the accent, so the eye has somewhere to land instead of
   reading three identical pills. */
.dhero-proof li:first-child{color:var(--ink-accent);border-color:var(--ink-accent)}
/* Grows with the headline. A 60px h1 over 16px body reads as a headline with a
   caption; the two have to stay in proportion or the hero looks top-heavy. */
.dhero-sub{margin:22px 0 0;max-width:50ch;color:var(--ink-muted);
  font-size:clamp(16px,1.6vw,18.5px);line-height:1.6}
.dhero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.dhero-badge{display:flex;gap:10px;align-items:flex-start;margin:30px 0 0;
  padding-top:20px;border-top:1px solid var(--ink-line);
  max-width:56ch;font-size:13px;line-height:1.55;color:var(--ink-muted)}
.dhero-badge svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--ink-accent)}
.dhero-badge b{color:#f0ead9;font-weight:600}

@media(max-width:960px){
  /* Stacked, the hero is two full blocks tall on its own — a viewport floor on
     top of that would only add empty ground above the fold. */
  .dhero{min-height:0;display:block}
  .dhero-in{grid-template-columns:1fr;gap:36px;padding-block:52px 56px}
  .dsheet{transform:none;order:2}
}
@media(max-width:560px){
  .dhero-in{padding-block:40px 44px}
  .dhero-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   Account (packs only). Rebuilt 2026-08-08 against the sign-in pages
   of Dropbox Sign, PandaDoc, Notion, Linear, Vercel and Docusign
   rather than invented: narrow centred card, providers as full-width
   rows, hairline divider, one primary button, legal line outside.
   ============================================================ */

/* ---- sign in ---- */
.auth{display:flex;flex-direction:column;align-items:center;
  padding:clamp(40px,7vh,84px) 20px 72px}
.auth-card{width:100%;max-width:400px;text-align:center}
.auth-mark{display:inline-block;font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:22px}
.auth-mark i{font-style:normal;color:var(--soft-mark)}
.auth h1{font-size:25px;letter-spacing:-.02em;margin:0 0 8px}
.auth-sub{margin:0 0 26px;font-size:14.5px;line-height:1.55;color:var(--muted)}

.auth-providers{display:grid;gap:10px}
/* Full-width rows with the mark on the left, the label optically centred.
   The mark is absolutely placed so labels of different lengths still line up
   with each other rather than each centring around its own icon. */
.auth-provider{position:relative;display:flex;align-items:center;justify-content:center;
  gap:10px;width:100%;min-height:46px;padding:12px 44px;font:inherit;font-size:15px;
  font-weight:550;color:var(--fg);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.auth-provider:hover{border-color:var(--fg)}
.auth-provider:active{transform:scale(.985)}
.auth-provider:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.auth-ic{position:absolute;left:14px;width:18px;height:18px}

.auth-or{display:flex;align-items:center;gap:14px;margin:20px 0;
  font-size:12.5px;color:var(--muted)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line-strong)}

.auth-form{display:grid;gap:8px;text-align:left}
.auth-form label{font-size:13.5px;color:var(--muted)}
.auth-form input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
  padding:12px 14px;color:var(--fg);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:10px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.auth-form input::placeholder{color:var(--muted)}
.auth-form input:focus{outline:none;border-color:var(--soft-mark);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--soft-mark) 20%,transparent)}
/* Full width, like every benchmarked page: the primary action is the whole
   width of the field it follows, not a button floating beside it. */
.auth-submit{width:100%;justify-content:center;margin-top:6px;min-height:46px;
  transition:transform .16s var(--ease)}
.auth-submit:active{transform:scale(.985)}
/* The code is read back off a phone screen: monospace and tracked out, so a 6
   is never mistaken for an 8 while typing. */


.auth-msg{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.auth-msg[data-state="error"]{color:var(--soft-mark)}
.auth-alt{margin:22px 0 0;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--fg)}
.auth-legal{margin:26px 0 0;max-width:400px;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--muted)}
/* padding-block, not a bigger font: "Забули пароль?" sits beside a label as a
   control in its own right, so it owes the 24px target size, and at 14px it
   was 21px tall. The padding grows the hit area without changing how the link
   reads or where the text sits. */
.linkish{background:none;border:0;padding:3px 0;margin:-3px 0;font:inherit;font-size:14px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--fg)}

/* ---- the account ----
   Full-width sections stacked in the order the questions arrive, not a narrow
   work column beside a sidebar: the old layout put the settings forms in the
   left third and left half the screen empty next to them. */
.acc{padding-block:36px 76px}
.acc-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}
.acc-bar h1{font-size:clamp(23px,2.6vw,29px);letter-spacing:-.02em;margin:0 0 4px}
.acc-who{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.acc-out{background:none;border:1px solid var(--line-strong);border-radius:999px;
  font:inherit;font-size:13.5px;padding:9px 16px;cursor:pointer;color:var(--fg);
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.acc-out:hover{border-color:var(--fg)}
.acc-out:active{transform:scale(.97)}
.acc-out:disabled{opacity:.6;cursor:default;transform:none}

/* ---- waiting ----
   The shape of what is coming, so the page does not jump when it arrives.
   Pulse in opacity only: a skeleton that animates a size is a skeleton that
   re-lays-out the page sixty times a second while the network is the slow part. */
.acc-load{padding-top:8px}
.sk{border-radius:8px;background:var(--line);opacity:.9;
  animation:sk-pulse 1.4s var(--ease) infinite}
.sk-h1{width:min(240px,60%);height:30px;margin-bottom:12px}
.sk-line{width:min(300px,70%);height:13px;margin-bottom:34px}
.sk-strip{height:96px;margin-bottom:34px;border-radius:var(--radius)}
.sk-row{height:44px;margin-bottom:14px}
@keyframes sk-pulse{0%,100%{opacity:.9}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---- it did not load ----
   Deliberately not the sign-in form. The session may be perfectly good and the
   network the thing that failed, and offering a password box in that case
   spends somebody's password on a problem it cannot fix. */
.acc-fail{padding:40px 0 24px;max-width:52ch}
.acc-fail h1{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.02em;margin:0 0 12px}
.acc-fail-why{margin:0 0 8px;font-family:var(--mono);font-size:12.5px;color:var(--soft-mark)}
.acc-fail-calm{margin:0 0 22px;color:var(--muted);font-size:15px;line-height:1.6}
.acc-fail-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---- the balance ----
   The first number anybody comes here for, so it gets the full width rather
   than a card in a column. */
.acc-bal{display:flex;align-items:center;gap:clamp(20px,4vw,44px);flex-wrap:wrap;
  margin-top:28px;padding:22px clamp(18px,2.4vw,26px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.acc-bal-n{display:flex;align-items:baseline;gap:10px;flex:none}
.acc-bal-n b{font-size:clamp(34px,4.4vw,44px);font-weight:650;letter-spacing:-.03em;line-height:1}
.acc-bal-n span{font-size:14px;color:var(--muted)}
/* Capped, and the auto margin pushes the action to the far edge. A meter let
   loose on a 1440px row draws a 700px bar to say "4 of 10", which reads as a
   progress bar for something still happening. */
.acc-bal-m{flex:0 1 380px;min-width:160px;margin-right:auto}
.acc-bal-s{margin:10px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.acc-bal-cta{flex:none;font-size:13.5px;text-decoration:none;color:var(--fg);
  padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.acc-bal-cta:hover{border-color:var(--fg)}
.acc-bal-cta:active{transform:scale(.97)}
/* Nothing bought yet is a different sentence, not a zero. A card reading
   "0 of 0 used" announced nothing and read as a fault. */
.acc-bal--none{align-items:flex-start;justify-content:space-between}
.acc-bal-h{margin:0 0 6px;font-size:17px;font-weight:650;letter-spacing:-.01em}
.acc-bal-p{margin:0;max-width:56ch;color:var(--muted);font-size:14.5px;line-height:1.6}
.acc-meter{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
/* The fill is a full-width bar scaled down, not a narrow bar widened: width is
   a layout property and animating it makes the browser re-lay-out the card on
   every frame. The parent clips and rounds, so scaling needs no radius of its
   own. */
.acc-meter span{display:block;height:100%;width:100%;background:var(--soft-mark);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease)}
@media(prefers-reduced-motion:reduce){.acc-meter span{transition:none}}

/* ---- sections ---- */
.acc-sec{margin-top:52px}
.acc-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.acc-sec-h h2{margin:0;font-size:18px;letter-spacing:-.01em}
.acc-count{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted)}
.acc-find input{font:inherit;font-size:14px;padding:8px 14px;min-width:min(240px,54vw);
  color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:999px;transition:border-color .16s var(--ease)}
.acc-find input:focus{outline:none;border-color:var(--soft-mark)}

.acc-note{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.acc-note--fine{margin-top:16px;font-size:13px}
.acc-table{width:100%;border-collapse:collapse;font-size:15px}
.acc-table th{text-align:left;font-family:var(--mono);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  padding:0 0 10px;border-bottom:1px solid var(--line)}
.acc-table td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.acc-table tr:last-child td{border-bottom:0}
.acc-doc-name{padding-right:18px}
.acc-doc-when{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.acc-doc-acts{text-align:right;white-space:nowrap}
.acc-doc-get,.acc-doc-del{background:none;border:1px solid var(--line-strong);border-radius:999px;
  font:inherit;font-size:13px;padding:7px 14px;margin-left:8px;cursor:pointer;color:var(--fg);
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.acc-doc-get:hover{border-color:var(--fg)}
/* Same pill, quieter: it is the useful action but not the one the row is
   named after, so it sits between "delete" and "download" without competing
   with either. */
.acc-doc-again{display:inline-block;margin-left:8px;padding:7px 14px;font-size:13px;
  color:var(--fg);text-decoration:none;border:1px solid transparent;border-radius:999px;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.acc-doc-again:hover{border-color:var(--line-strong)}
.acc-doc-again:active{transform:scale(.97)}
.acc-doc-del{color:var(--muted);border-color:transparent}
.acc-doc-del:hover{color:var(--soft-mark);border-color:var(--soft-mark)}
.acc-doc-get:active,.acc-doc-del:active{transform:scale(.97)}
.acc-doc-get:disabled,.acc-doc-del:disabled{opacity:.6;cursor:default;transform:none}
/* A row that failed says so in place, and the button goes back to being a
   button. It used to keep the word "Не вдалося" as its label for good, so a
   row that had failed once looked broken for the rest of the session. */
.acc-doc-err{display:block;margin-top:4px;font-size:12.5px;color:var(--soft-mark)}
.acc-row--gone{opacity:0;transition:opacity .2s var(--ease)}
@media(prefers-reduced-motion:reduce){.acc-row--gone{transition:none}}

/* Deleting asks inside the row instead of in a browser dialog: the question
   stays next to the thing it is about, and it is dismissed by looking away
   rather than by hunting for the right button in a grey box. */
.acc-ask{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.acc-ask-q{font-size:13.5px;color:var(--muted)}
.acc-ask-yes{background:none;border:1px solid var(--soft-mark);color:var(--soft-mark);
  border-radius:999px;font:inherit;font-size:13px;padding:7px 14px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.acc-ask-yes:hover{background:var(--soft-mark);color:var(--on-mark)}
.acc-ask-yes:active{transform:scale(.97)}
@media(max-width:620px){
  .acc-table thead{display:none}
  .acc-table tr{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}
  .acc-table td{border:0;padding:0}
  .acc-doc-acts{text-align:left;margin-top:6px}
  .acc-doc-get{margin-left:0}
  .acc-ask{justify-content:flex-start}
}

/* ---- what was bought ----
   The Worker has always sent this list and the page threw it away, so the one
   question support answered most often was already on the customer's screen. */
.acc-buys{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.acc-buy{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.acc-buy:last-child{border-bottom:0}
.acc-buy-k{font-size:15px}
.acc-buy-when{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.acc-buy-use{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* ---- settings ----
   Two independent switches side by side, not a stack: they are unrelated, and
   stacking them implied an order that does not exist. */
/* Wide enough that four cards land 2×2 rather than 3 + a lone one on its own
   row. align-items:start so each card is its own height: a half-empty card
   stretched to match its neighbour looks unfinished. */
.acc-cards{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media(min-width:760px){.acc-cards{grid-template-columns:1fr 1fr}}
.acc-card{padding:22px 22px 24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}
.acc-card h3{margin:0 0 14px;font-size:16px;letter-spacing:-.01em}

/* ---- your data ---- */
.acc-data{display:grid;gap:2px;margin-top:20px}
.acc-data-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}
.acc-data-row:last-of-type{border-bottom:0}
.acc-data-k{margin:0 0 4px;font-size:15px;font-weight:650;letter-spacing:-.01em}
.acc-data-p{margin:0;max-width:56ch;color:var(--muted);font-size:13.5px;line-height:1.6}
.acc-danger{background:none;border:1px solid var(--soft-mark);color:var(--soft-mark);
  border-radius:999px;font:inherit;font-size:13.5px;padding:9px 16px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.acc-danger:hover{background:var(--soft-mark);color:var(--on-mark)}
.acc-danger:active{transform:scale(.97)}
.acc-danger:disabled{opacity:.45;cursor:default;transform:none;background:none;color:var(--soft-mark)}

.acc-del{display:grid;gap:8px;justify-items:start;margin-top:6px;padding:20px;
  border:1px solid var(--soft-mark);border-radius:var(--radius)}
.acc-del-say{margin:0 0 4px;max-width:56ch;font-size:14px;line-height:1.6;color:var(--fg)}
.acc-del label{font-size:13.5px;color:var(--muted)}
.acc-del input{font:inherit;font-size:16px;padding:10px 12px;min-width:min(220px,70vw);
  color:var(--fg);background:var(--bg);border:1px solid var(--line-strong);border-radius:8px}
.acc-del input:focus{outline:none;border-color:var(--soft-mark)}
.acc-del-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* `.vh` and the whole header account control (.nav-signin, .nav-acc*) used to
   be redefined here. They live in styles.css now — which every page loads,
   including the agency pages that carry the same header partial. Two copies of
   one component's styles is how the agency side ended up with none. */

/* The builder\'s pack strip: shown instead of the price when a credit is
   available, so nobody is asked for a card they have already paid with. */
.b-pack{display:grid;gap:10px;padding:18px 20px;margin:0 0 18px;
  background:var(--surface);border:1px solid var(--soft-mark);border-radius:var(--radius)}
.b-pack-line{font-size:15px}
.b-pack-line b{font-weight:650}
.b-pack .btn{justify-self:start}
.b-pack-note{margin:0;font-size:13px;color:var(--muted)}

/* A consent tick. The whole label is the target, so the words are clickable
   as well as the box — a 16px square alone is under the 24px minimum and is a
   miserable thing to hit on a phone. accent-color rather than a drawn
   replacement: the native control already carries focus, keyboard and
   assistive-technology behaviour that a div cannot. */
.auth-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;
  font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer}
.auth-check input{flex:none;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--soft-mark);cursor:pointer}
.auth-check input:focus-visible{outline:2px solid var(--soft-mark);outline-offset:2px}
.auth-check span{min-width:0}

/* auth: a label and its "forgot?" on one line */
.auth-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}
.auth-row label{margin:0}
.auth-hint{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
/* The code is read back off a phone screen: monospace and tracked out, so a 6
   is never mistaken for an 8 while typing. */
.auth-code{font-family:var(--mono);font-size:22px;letter-spacing:.34em;text-align:center}

/* settings, under the documents table */
.acc-set{margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.acc-set h2{margin:0 0 14px;font-size:18px;letter-spacing:-.01em}
.acc-set-form{display:grid;gap:8px;max-width:340px}
.acc-set-form label{font-size:13.5px;color:var(--muted)}
.acc-set-form input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
  padding:11px 13px;color:var(--fg);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:10px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.acc-set-form input:focus{outline:none;border-color:var(--soft-mark);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--soft-mark) 20%,transparent)}
.acc-set-form button{justify-self:start;margin-top:6px;transition:transform .16s var(--ease)}
.acc-set-form button:active{transform:scale(.97)}

/* ============================================================
   Статті (/ua/articles/). Added 2026-08-08.

   Читальна поверхня, не торгова. Тому тут навмисно НЕМАЄ нічого з
   каталогових прийомів: ні темного відкривача, ні карток у сітці, ні кнопок
   у заголовку. Сторінка, яку відкривають з пошуку заради відповіді, а не
   заради покупки, має виглядати як текст, інакше перше враження — «мене
   зараз продаватимуть» — і людина закриває вкладку до першого абзацу.

   Токени тільки спільні. Жодного нового кольору: заголовок — --fg, підпис —
   --muted, тема — --soft-mark, лінії — --line. Тема перемикається сама.
   ============================================================ */

/* ---- masthead ----
   Без верхньої лінії й без темного тла: він одразу під крихтами, і ще одна
   горизонталь там читалась би як порожній блок між ними. */
.art-head{padding:clamp(38px,5vw,64px) 0 clamp(26px,3vw,36px)}
.art-eyebrow{display:inline-block;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--soft-mark);margin-bottom:14px}
.art-head h1{margin:0;font-size:clamp(28px,4vw,46px);line-height:1.08;
  letter-spacing:-.028em;font-weight:730;text-wrap:balance;max-width:20ch}
.art-head .lead{margin:18px 0 0;max-width:62ch;font-size:clamp(15.5px,1.5vw,17px);
  line-height:1.62;color:var(--muted)}

/* ---- список статей ----
   Рядки, а не картки. Заголовки статей різної довжини, і сітка однакових
   плиток або ріже довгий, або лишає під коротким порожнечу; рядок росте за
   своїм текстом. Дата ліворуч окремою колонкою — за нею ковзають оком, коли
   шукають «а що нового». */
.arts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.art{border-bottom:1px solid var(--line)}
.art > a{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:10px 24px;
  align-items:baseline;padding:22px 6px;text-decoration:none;color:inherit;border-radius:10px}
.art-when{font-family:var(--mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.art-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.art-t{font-size:19px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.art-d{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.art-k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--soft-mark);white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .art > a{transition:background 170ms var(--ease)}
  .art > a:hover{background:var(--surface)}
  .art > a:hover .art-t{color:var(--soft-mark)}
}
.art > a:focus-visible{outline:2px solid var(--soft-mark);outline-offset:2px}

/* ---- порожній стан ----
   Не заглушка й не «скоро тут щось буде». Він несе те саме, що несла б перша
   стаття: чому їх поки нема, про що вони будуть і куди піти зараз. Дешевий
   «coming soon» витрачає перший — і часто єдиний — візит із пошуку. */
/* Без власної верхньої лінії: секція вже має свою, і дві горизонталі за
   сімдесят пікселів одна від одної читаються як порожній блок між ними. */
.art-empty{max-width:66ch}
.art-empty h2{margin:0 0 12px;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.02em}
.art-empty p{margin:0 0 18px;font-size:15.5px;line-height:1.68;color:var(--muted)}
.art-empty .art-soon-h{margin:26px 0 10px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--fg)}
.art-soon{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.art-soon li{padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.55}
.art-empty .art-exits{margin:24px 0 0;font-size:14.5px}

/* ---- сама стаття ----
   Одна колонка й довжина рядка в межах 68ch: усе інше на цій сторінці
   підпорядковане тому, щоб текст можна було читати довго. */
.art-page{max-width:760px}
.art-top{padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.art-top h1{margin:0;font-size:clamp(27px,3.6vw,40px);line-height:1.12;
  letter-spacing:-.026em;font-weight:730;text-wrap:balance}
.art-top .art-when{display:block;margin-top:16px}
.art-dek{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:60ch}

.art-text{font-size:16.5px;line-height:1.75}
.art-text h2{margin:38px 0 12px;font-size:clamp(20px,2.4vw,25px);letter-spacing:-.02em;
  font-weight:700;text-wrap:balance}
.art-text h3{margin:28px 0 8px;font-size:17.5px;font-weight:650;letter-spacing:-.012em}
.art-text p{margin:0 0 18px;max-width:68ch}
.art-text ul,.art-text ol{margin:0 0 20px;padding-left:22px;max-width:66ch}
.art-text li{margin-bottom:9px}
.art-text a{color:var(--soft-mark)}
/* Цитата з норми — не оздоблення, а першоджерело, тож вона має виглядати як
   вставка з іншого документа, а не як виділена думка автора. */
.art-text blockquote{margin:22px 0;padding:16px 20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);font-size:15.5px;
  line-height:1.65;color:var(--muted)}
.art-text blockquote p:last-child{margin-bottom:0}
.art-text table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.art-text th,.art-text td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.art-text th{font-weight:650;background:var(--surface)}

.art-foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.art-foot-k{margin:0 0 6px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.art-foot a{color:var(--soft-mark);font-size:16px}

@media (max-width:640px){
  /* Дата над заголовком, а не поруч: у своїй колонці на телефоні їй лишається
     менше місця, ніж займає сам рядок дати. */
  .art > a{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 4px}
  .art-k{justify-self:start}
}

/* Balance footnote and the security card's lead-in. Both are quiet lines that
   answer a question before it becomes an email. */
.acc-bal-note{margin:12px 2px 0;font-size:13px;line-height:1.6;color:var(--muted)}
.acc-card-p{margin:0 0 14px;max-width:46ch}
/* A quiet link under a card's own control, so it does not read as a second
   action of the same weight. */
.acc-card-after{margin:14px 0 0}

/* ---- the full catalogue (/ua/docs/katalog) ---------------
   A register, not a card wall. Fifty-three documents in identical boxes would
   be fifty-three units of the same visual noise; a grouped list with hairlines
   lets someone scan for their own document and stop.

   Three columns per row: state, the document with the act under it, and who
   owes it. The act line is the reason this page exists — a list of document
   names is free everywhere, a list with the act and its edition date is not.
   ---------------------------------------------------------- */
.cat{padding-block:8px 8px}
.cat-lede{color:var(--muted);max-width:70ch;margin:0 0 34px;font-size:16px;line-height:1.6}
.cat-group{margin:0 0 40px}
.cat-group h2{font-size:19px;letter-spacing:-.01em;margin:0 0 2px;display:flex;align-items:baseline;gap:10px}
.cat-count{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted)}
.cat-list{list-style:none;margin:0;padding:0}
.cat-row{display:grid;grid-template-columns:minmax(0,1fr) 20ch;gap:6px 20px;
  align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.cat-row:last-child{border-bottom:1px solid var(--line)}
.cat-body{min-width:0}
.cat-name{display:block;font-size:16px;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty}
/* inline, so the underline hugs the title instead of drawing a rule across the
   whole column and reading as a divider */
a.cat-name{display:inline;text-decoration:none;border-bottom:1px solid var(--line-strong);
  transition:color .18s var(--ease),border-color .18s var(--ease)}
@media (hover:hover){a.cat-name:hover{color:var(--soft-mark);border-color:var(--soft-mark)}}
a.cat-name:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.cat-src{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-top:4px;max-width:62ch}
.cat-red{font-family:var(--mono);font-size:11.5px;white-space:nowrap;color:var(--soft-mark)}
.cat-who{font-size:13px;color:var(--muted);text-align:right}
.cat-ask{border-top:1px solid var(--line);margin-top:12px}
.cat-ask p{max-width:62ch;color:var(--muted)}
@media (max-width:640px){
  .cat-row{grid-template-columns:1fr;gap:3px}
  .cat-who{text-align:left;margin-top:2px}
}