/* ==========================================================================
   ТРИУМФ — parts
   Directions catalog, awards row, and the map plate on the contacts page.
   ========================================================================== */

/* ---------- Directions catalog ---------- */
.cat{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s6); align-items:start; }
@media (max-width: 960px){ .cat{ grid-template-columns:1fr; gap:var(--s4); } }

.cat-list{ border-top:1px solid var(--line); }
.cat-row{
  width:100%; text-align:left;
  display:grid; grid-template-columns:44px 1fr 22px; align-items:center; gap:var(--s2);
  padding-block:19px;
  border-bottom:1px solid var(--line);
  color:var(--fg-muted);
  transition:color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.cat-row .n{ font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim); }
.cat-row .t{ font-size:1.06rem; font-weight:500; letter-spacing:-0.01em; }
.cat-row .arw{ opacity:0; transform:translateX(-4px); transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.cat-row:hover{ color:var(--fg); padding-left:6px; }
.cat-row:hover .arw{ opacity:1; transform:none; }
.cat-row[aria-selected="true"]{ color:var(--fg); }
.cat-row[aria-selected="true"] .n{ color:var(--accent-hi); }
.cat-row[aria-selected="true"] .arw{ opacity:1; transform:none; }

.cat-panel{
  position:sticky; top:calc(68px + var(--s3));
  border:1px solid var(--line);
  background:var(--bg-raised);
  padding:var(--s4);
  min-height:420px;
}
@media (max-width: 960px){ .cat-panel{ position:static; min-height:0; } }
.cat-panel .h2{ margin-bottom:var(--s2); }
.cat-panel .body{ margin-bottom:var(--s3); }
.cat-serv{ border-top:1px solid var(--line); margin-bottom:var(--s3); }
.cat-serv li{
  display:grid; gap:2px;
  padding-block:14px; border-bottom:1px solid var(--line);
}
.cat-serv b{ font-weight:500; font-size:0.98rem; }
.cat-serv span{ font-size:var(--t-sm); color:var(--fg-dim); }
.cat-fade{ animation:cat-in .42s var(--ease) both; }
@keyframes cat-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cat-fade{ animation:none; } }

/* ---------- Awards ---------- */
.awards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s3); }
@media (max-width: 860px){ .awards{ grid-template-columns:1fr; } }
.award{
  border:1px solid var(--line);
  background:var(--bg-raised);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.award img{
  width:100%; aspect-ratio:1.4/1; object-fit:cover; object-position:center;
  /* Diplomas are the proof, so they are shown at full saturation. */
  filter:saturate(1.15) contrast(1.05);
  transition:transform var(--mid) var(--ease);
}
.award:hover img{ transform:scale(1.02); }
.award figcaption{ padding:var(--s3); display:grid; gap:6px; }
.award figcaption b{ font-weight:600; font-size:1rem; }
.award figcaption span{ font-size:var(--t-sm); color:var(--fg-muted); }

/* ---------- Contacts: map plate ----------
   Drawn in CSS on a tilted plane rather than embedded from a tile provider:
   it matches the site's palette exactly, needs no API key, loads instantly
   and cannot break when a provider changes terms. The real address links
   out to a maps service directly underneath. */
.mapwrap{ perspective:1200px; }
.map{
  position:relative;
  aspect-ratio:4/3;
  border:1px solid var(--line);
  background:
    radial-gradient(80% 70% at 50% 40%, #14171b 0%, #0d0f11 55%, #090a0b 100%);
  overflow:hidden;
  transform:rotateX(46deg) rotateZ(-27deg) scale(0.94);
  transform-style:preserve-3d;
  transition:transform 1.1s var(--ease);
}
.mapwrap:hover .map{ transform:rotateX(38deg) rotateZ(-22deg) scale(0.97); }
@media (prefers-reduced-motion: reduce){
  .map, .mapwrap:hover .map{ transform:none; transition:none; }
}

/* Street grid: two crossing sets of lines, one thicker "avenue" each way. */
.map-grid{
  position:absolute; inset:-30%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 68px);
}
.map-ave{
  position:absolute; inset:-30%;
  background-image:
    linear-gradient(0deg, transparent 47.6%, rgba(255,255,255,0.16) 47.6% 48.4%, transparent 48.4%),
    linear-gradient(90deg, transparent 43%, rgba(255,255,255,0.13) 43% 43.7%, transparent 43.7%);
}
/* City blocks, raised off the plane so the tilt reads as depth. */
.map-blocks{ position:absolute; inset:0; transform-style:preserve-3d; }
.map-blocks i{
  position:absolute; display:block;
  background:linear-gradient(160deg, #1b1f24, #121519);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:1px;
}
.map-pin{
  position:absolute; left:44%; top:47%;
  width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--accent-hi);
  box-shadow:0 0 0 5px rgba(195,69,76,0.20), 0 0 0 13px rgba(195,69,76,0.09);
  transform:translateZ(46px);
}
.map-pin::after{
  content:""; position:absolute; left:50%; top:50%;
  width:1px; height:46px; margin-left:-0.5px;
  background:linear-gradient(180deg, var(--accent-hi), transparent);
  transform:translateZ(-46px);
}
@media (prefers-reduced-motion: no-preference){
  .map-pin{ animation:pin-pulse 2.6s var(--ease) infinite; }
  @keyframes pin-pulse{
    0%, 100%{ box-shadow:0 0 0 5px rgba(195,69,76,0.20), 0 0 0 13px rgba(195,69,76,0.09); }
    50%{ box-shadow:0 0 0 7px rgba(195,69,76,0.26), 0 0 0 20px rgba(195,69,76,0.04); }
  }
}
.map-legend{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:var(--s3);
}
.map-legend b{ font-weight:600; }
.map-legend span{ font-size:var(--t-sm); color:var(--fg-dim); }

/* ==========================================================================
   Scroll scenes, carried over from the previous version of the site and
   restyled into the current dark system. Each scene is a full-height beat in
   one continuous story: problem, analysis, solution, document, lawyer.
   ========================================================================== */

.scene{
  position:relative;
  min-height:82vh;
  display:flex; align-items:center;
  padding-block:var(--s6);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.scene-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.scene-bg[data-tone="problem"]{ background:radial-gradient(110% 80% at 18% 8%, rgba(255,255,255,0.035), transparent 58%); }
.scene-bg[data-tone="analysis"]{ background:radial-gradient(90% 78% at 82% 22%, rgba(126,150,178,0.07), transparent 62%); }
.scene-bg[data-tone="solution"]{ background:radial-gradient(96% 78% at 26% 96%, rgba(163,47,54,0.09), transparent 62%); }
.scene-bg[data-tone="document"]{ background:radial-gradient(88% 78% at 76% 30%, rgba(255,255,255,0.04), transparent 60%); }
.scene-bg[data-tone="lawyer"]{ background:radial-gradient(90% 88% at 22% 32%, rgba(163,47,54,0.07), transparent 62%); }
.scene-in{ position:relative; z-index:1; width:100%; }
.scene-n{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.16em; color:var(--fg-dim); margin-bottom:var(--s2); }
.scene-title{ font-family:var(--font-display); font-size:var(--t-display); font-weight:700; letter-spacing:-0.03em; line-height:1; }
.scene-text{ max-width:58ch; margin-top:var(--s3); font-size:var(--t-lead); color:var(--fg-muted); line-height:1.5; }

.scene-split{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--s6); align-items:center; }
.scene-split.flip .scene-visual{ order:-1; }
@media (max-width: 900px){
  .scene-split, .scene-split.flip{ grid-template-columns:1fr; gap:var(--s4); }
  .scene-split.flip .scene-visual{ order:0; }
}

.tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--s4); }
.tag{
  font-size:var(--t-sm); color:var(--fg-muted);
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  padding:7px 16px;
}

/* Analysis readout: a compact status panel, not a fake product screenshot. */
.readout{
  border:1px solid var(--line); background:var(--bg-raised);
  border-radius:var(--r); overflow:hidden; position:relative;
}
.readout div{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding:15px var(--s3);
  border-bottom:1px solid var(--line);
  font-size:0.9rem;
}
.readout div:last-child{ border-bottom:0; }
.readout span:first-child{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.12em; color:var(--fg-dim); }
.readout .hot{ color:var(--accent-hi); }
.readout::after{
  content:""; position:absolute; left:0; right:0; top:0; height:38%;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .readout::after{ animation:readout-scan 4.2s linear infinite; }
  @keyframes readout-scan{ from{ transform:translateY(-100%); } to{ transform:translateY(300%); } }
}

.steps{ margin-top:var(--s4); border-top:1px solid var(--line); }
.steps li{
  display:flex; align-items:center; gap:var(--s3);
  padding-block:16px; border-bottom:1px solid var(--line);
  color:var(--fg-muted);
}
.steps li b{ font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim); font-weight:400; }

/* Document preview: a real sheet of paper, deliberately plain. */
.sheet-doc{
  background:linear-gradient(180deg, #f7f6f3, #e8e6e0);
  color:#15161a;
  border-radius:var(--r);
  padding:30px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.75);
  transform:rotate(-1.1deg);
}
.sheet-doc-top{ display:flex; justify-content:space-between; align-items:center; gap:var(--s2); margin-bottom:22px; }
.sheet-doc-top b{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; color:#5c5e64; font-weight:400; }
.sheet-doc-top span{ font-size:0.68rem; border:1px solid rgba(0,0,0,0.18); border-radius:var(--r-pill); padding:5px 12px; color:#15161a; }
.sheet-doc i{ display:block; height:9px; background:rgba(0,0,0,0.13); border-radius:2px; margin-bottom:12px; }

/* Teaser grid of directions */
.tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tiles a{
  background:var(--bg); padding:var(--s4) var(--s3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  font-family:var(--font-display); font-size:0.98rem; font-weight:600; letter-spacing:-0.01em;
  transition:background var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.tiles a i{ font-style:normal; color:var(--fg-dim); transition:transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.tiles a:hover{ background:var(--bg-raised); padding-left:calc(var(--s3) + 6px); }
.tiles a:hover i{ transform:translateX(4px); color:var(--fg); }
@media (max-width: 900px){ .tiles{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 480px){ .tiles{ grid-template-columns:1fr; } }

/* ==========================================================================
   Soft page transition (js/transition.js). One veil, one settle. No grid.
   ========================================================================== */
.veil{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:0;
  background:
    radial-gradient(120% 120% at var(--vx, 50%) var(--vy, 50%),
      rgba(10,11,12,0.55) 0%, rgba(8,9,10,0.88) 45%, #08090a 100%);
  transition:opacity 480ms cubic-bezier(.4,0,.2,1);
}
.veil.on{ opacity:1; pointer-events:auto; }

/* The page settles back and dissolves under the veil rather than sliding. */
html.is-leaving body > header,
html.is-leaving body > main,
html.is-leaving body > footer{
  transition:opacity 400ms cubic-bezier(.4,0,.2,1), transform 540ms cubic-bezier(.22,1,.36,1), filter 420ms linear;
  opacity:0; transform:scale(.988) translateY(-6px); filter:blur(2px);
}

/* Arriving: content rises into place while the veil is already gone. */
html.is-entering body > header,
html.is-entering body > main,
html.is-entering body > footer{
  opacity:0; transform:translateY(16px); filter:blur(3px);
}
html:not(.is-entering):not(.is-leaving) body > header,
html:not(.is-entering):not(.is-leaving) body > main,
html:not(.is-entering):not(.is-leaving) body > footer{
  transition:opacity 700ms cubic-bezier(.22,1,.36,1), transform 820ms cubic-bezier(.22,1,.36,1), filter 620ms linear;
  opacity:1; transform:none; filter:none;
}
/* Once the entry has played, drop the transition so sticky elements and
   scroll-driven work are not fighting a stale filter/transform context. */
html.settled body > header,
html.settled body > main,
html.settled body > footer{ transition:none; filter:none; transform:none; }

/* Scroll reveals pick up a slight rotation so section entries share the
   language of the page transition instead of just sliding. */
.js [data-reveal]{ transform:translateY(20px) rotateX(4deg); transform-origin:50% 0; }
.js [data-reveal].seen{ transform:none; }

/* ==========================================================================
   Directions catalog, layout restored from the previous version of the site:
   a column of large names, a sticky detail panel that swaps with a sweep.
   ========================================================================== */
.cat-wrap{ position:relative; }
.cat-glow{
  position:absolute; inset:-40px -40px auto -40px; height:620px; z-index:0;
  background:radial-gradient(60% 60% at 20% 20%, rgba(163,47,54,0.12), transparent 70%);
  filter:blur(10px); opacity:0.55; pointer-events:none;
}
.cat-layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s6); align-items:start;
}
@media (max-width: 980px){ .cat-layout{ grid-template-columns:1fr; gap:var(--s4); } }

.cat-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.cat-row{
  display:flex; align-items:center; gap:var(--s3);
  padding:22px 6px; border-bottom:1px solid var(--line);
  text-align:left;
  transition:padding-left var(--fast) var(--ease), background var(--fast) var(--ease);
}
.cat-n{ font-family:var(--mono); font-size:0.76rem; color:var(--fg-dim); }
.cat-name{
  flex:1;
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  font-weight:700; letter-spacing:-0.02em; text-transform:uppercase;
  color:var(--fg-muted);
  transition:color var(--fast) var(--ease);
}
.cat-arw{ font-style:normal; color:var(--fg-dim); opacity:0; transform:translateX(-6px); transition:all var(--fast) var(--ease); }
.cat-row:hover{ padding-left:16px; }
.cat-row:hover .cat-name, .cat-row.active .cat-name{ color:var(--fg); }
.cat-row:hover .cat-arw, .cat-row.active .cat-arw{ opacity:1; transform:none; color:var(--accent-hi); }
.cat-row.active{ padding-left:16px; background:linear-gradient(90deg, rgba(255,255,255,0.03), transparent); }

.cat-detail{
  position:sticky; top:calc(68px + var(--s3));
  background:linear-gradient(180deg, var(--bg-raised), #0c0d0f);
  border:1px solid var(--line);
  padding:var(--s5);
  min-height:460px; overflow:hidden;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.cat-detail.swapping{ opacity:0; transform:translateY(8px); }
@media (max-width: 980px){ .cat-detail{ position:static; min-height:0; } }

.cat-sweep{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.10) 50%, rgba(180,40,50,0.14) 52%, transparent 62%);
  transform:translateX(-120%);
}
@media (prefers-reduced-motion: no-preference){
  .cat-sweep{ animation:cat-sweep .75s var(--ease) forwards; }
  @keyframes cat-sweep{ to{ transform:translateX(120%); } }
}
.cat-eyebrow{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:14px; }
.cat-title{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:700; letter-spacing:-0.025em; text-transform:uppercase; margin-bottom:16px; }
.cat-desc{ color:var(--fg-muted); font-size:1.02rem; max-width:56ch; margin-bottom:var(--s4); }
.cat-serv{ border:1px solid var(--line); margin-bottom:var(--s4); }
.cat-serv li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--bg);
}
.cat-serv li:last-child{ border-bottom:0; }
.cat-serv b{ font-weight:500; font-size:0.94rem; }
.cat-serv span{ color:var(--fg-dim); font-family:var(--mono); font-size:0.72rem; text-align:right; }
.cat-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ==========================================================================
   The paid-result mechanic: the draft is real and visible, but only the top
   of it is readable until the work is paid for. Shown honestly rather than
   as a teaser trick, with the price and what is included stated up front.
   ========================================================================== */
.paywall{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--s5); align-items:start; }
@media (max-width: 940px){ .paywall{ grid-template-columns:1fr; gap:var(--s4); } }

.preview{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #f7f6f3, #eceae4);
  color:#15161a; border-radius:var(--r);
  padding:34px 34px 0;
  min-height:420px;
  box-shadow:0 44px 90px -46px rgba(0,0,0,0.8);
}
.preview h4{ font-size:1.05rem; margin-bottom:6px; letter-spacing:-0.01em; }
.preview .meta{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; color:#5c5e64; margin-bottom:22px; }
.preview p{ font-size:0.93rem; line-height:1.62; color:#26282e; margin-bottom:13px; }
.preview .locked{ filter:blur(5px); user-select:none; }
.preview::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:56%;
  background:linear-gradient(180deg, rgba(247,246,243,0) 0%, rgba(243,242,238,0.88) 42%, #eceae4 78%);
}
.preview-lock{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--s4) 34px 30px;
  display:grid; gap:12px; justify-items:start;
}
.preview-lock b{ font-size:1.02rem; color:#15161a; }
.preview-lock span{ font-size:var(--t-sm); color:#4a4d54; }

.pay{
  border:1px solid var(--line); background:var(--bg-raised);
  padding:var(--s4); display:grid; gap:var(--s3);
}
.pay-price{ display:flex; align-items:baseline; gap:12px; }
.pay-price b{ font-family:var(--font-display); font-size:2.4rem; font-weight:700; letter-spacing:-0.03em; }
.pay-price span{ font-size:var(--t-sm); color:var(--fg-dim); }
.pay-list{ border-top:1px solid var(--line); }
.pay-list li{
  display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  padding-block:12px; border-bottom:1px solid var(--line);
  font-size:0.95rem; color:var(--fg-muted);
}
.pay-list li::before{ content:""; width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--accent-hi); }
.pay-note{ font-size:var(--t-xs); color:var(--fg-dim); }

/* Upload affordance: the single action the whole site pushes toward. */
.drop{
  border:1px dashed var(--line-strong); border-radius:var(--r);
  background:var(--bg-raised);
  padding:var(--s5) var(--s4);
  display:grid; gap:14px; justify-items:center; text-align:center;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.drop:hover{ border-color:var(--fg); background:#14161a; }
.drop b{ font-family:var(--font-display); font-size:1.24rem; font-weight:700; letter-spacing:-0.02em; }
.drop span{ font-size:var(--t-sm); color:var(--fg-muted); max-width:44ch; }
.drop .formats{ font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim); letter-spacing:0.1em; }

/* ---------- Lawyer contact dialog ---------- */
dialog.sheetbox{
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--bg-raised); color:var(--fg);
  padding:0; max-width:520px; width:calc(100% - 32px);
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  overflow-y:auto;
}
dialog.sheetbox::backdrop{ background:rgba(6,7,8,0.78); backdrop-filter:blur(6px); }
.sheetbox-in{ padding:var(--s4); display:grid; gap:var(--s3); }
.sheetbox h3{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:-0.02em; }
.sheetbox .rowline{
  display:grid; gap:4px; padding-block:14px; border-bottom:1px solid var(--line);
}
.sheetbox .rowline small{ font-size:var(--t-xs); color:var(--fg-dim); }
.sheetbox .rowline a{ font-size:1.12rem; font-weight:600; letter-spacing:-0.01em; display:inline-block; padding-block:2px; }
.sheetbox .rowline a:hover{ color:var(--accent-hi); }
.sheetbox-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border:1px solid var(--line-strong); border-radius:50%;
  display:grid; place-items:center; font-size:1rem; line-height:1;
}
@media (hover: none) and (pointer: coarse){
  .sheetbox-close{ width:44px; height:44px; top:8px; right:8px; }
}
@media (prefers-reduced-motion: no-preference){
  dialog.sheetbox[open]{ animation:box-in .34s var(--ease); }
  @keyframes box-in{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
}

/* ---------- Bridge into the scroll story ---------- */
.bridge{ border-left:2px solid var(--accent); padding-left:var(--s3); max-width:64ch; }
.bridge-lead{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  letter-spacing:-0.025em; line-height:1.15; margin-bottom:12px;
}
.bridge-sub{ color:var(--fg-muted); font-size:var(--t-lead); line-height:1.5; }

/* ---------- Price tiers: the machine and the human, side by side ---------- */
.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width: 860px){ .tiers{ grid-template-columns:1fr; } }
.tier{ background:var(--bg); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.tier--human{ background:var(--bg-raised); }
.tier-name{ font-size:var(--t-sm); color:var(--fg-dim); }
.tier-price{ display:flex; align-items:baseline; gap:10px; }
.tier-price b{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem, 1.8rem + 2.4vw, 4rem);
  letter-spacing:-0.04em; line-height:1;
}
.tier-price span{ font-size:var(--t-sm); color:var(--fg-dim); }
.tier-list{ border-top:1px solid var(--line); margin-bottom:auto; }
.tier-list li{
  display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:start;
  padding-block:12px; border-bottom:1px solid var(--line);
  font-size:0.95rem; color:var(--fg-muted);
}
.tier-list li::before{ content:""; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--fg-dim); }
.tier--human .tier-list li::before{ background:var(--accent-hi); }
.tiers-note{ margin-top:var(--s3); color:var(--fg-muted); font-size:var(--t-sm); max-width:70ch; }

/* ---------- Contacts: real Yandex map, desaturated to the site palette ----
   An interactive map is more useful than a drawing, so the widget is embedded
   and then filtered to greyscale and inverted into a dark plate so it sits in
   the page instead of punching a white rectangle through it. */
.ymap{
  position:relative; border:1px solid var(--line); overflow:hidden;
  aspect-ratio:4/3; background:var(--bg-raised);
}
.ymap iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) invert(0.92) contrast(0.86) brightness(1.04);
}
.ymap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px 20px rgba(10,11,12,0.55);
}
/* Name plate over the map. Pointer events are off so panning and zooming
   still work underneath it. */
.ymap-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--s4) var(--s3) var(--s3);
  pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,12,0) 0%, rgba(10,11,12,0.86) 62%, rgba(10,11,12,0.95) 100%);
  display:grid; gap:6px; justify-items:center; text-align:center;
}
.ymap-name b{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  line-height:1;
}
.ymap-name span{ font-size:var(--t-sm); color:var(--fg-muted); }

/* ==========================================================================
   Directions as a card grid, copied from the previous version: four across,
   number, large name, one line of scope, arrow. Cards lift on hover.
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s3); }
@media (max-width: 1080px){ .cards{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 620px){ .cards{ grid-template-columns:1fr; } }

.card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--bg-raised), #0c0d0f);
  border:1px solid var(--line);
  padding:var(--s4);
  min-height:340px;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); background:linear-gradient(180deg, #14161a, #0e0f12); }
.card-n{ font-family:var(--mono); font-size:0.72rem; color:var(--fg-dim); }
.card h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem);
  font-weight:700; letter-spacing:-0.03em; line-height:1.04;
  margin:var(--s3) 0 12px;
}
.card p{ color:var(--fg-muted); font-size:0.92rem; line-height:1.5; }
.card .arw{ margin-top:auto; padding-top:var(--s3); color:var(--fg-dim); transition:transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.card:hover .arw{ transform:translateX(4px); color:var(--fg); }

/* ---------- Photography that is not squeezed into a text column ----------
   The image gets the wider share and keeps its full frame; the caption sits
   beside it in a narrow column so nothing is cropped to fit the copy. */
.quote--wide{ grid-template-columns:1fr auto; align-items:center; }
.quote--wide img{ aspect-ratio:auto; max-height:70vh; width:auto; object-fit:contain; }

.figwide{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s5);
  align-items:center; margin:0;
}
.figwide img{
  /* Capped to the viewport so the whole figure is taken in at a glance
     instead of forcing a scroll through a tall portrait. */
  max-height:72vh; width:auto; max-width:100%; height:auto;
  justify-self:start;
  border:1px solid var(--line);
  filter:saturate(1.05) contrast(1.02);
}
.figwide figcaption{ display:grid; gap:12px; }
@media (max-width: 900px){
  .figwide{ grid-template-columns:1fr; gap:var(--s3); }
}

/* Anchor targets must clear the fixed 68px header when linked to directly. */
[id]{ scroll-margin-top:calc(68px + var(--s3)); }


/* ---------- Founder portrait: shown whole ----------
   The studio frame is vertical, so it is never cropped to the width of the
   text beside it. Height is capped to the viewport and the width follows,
   which keeps the figure complete and still lets the copy breathe. */
.quote{ grid-template-columns:1fr auto; align-items:center; }
.quote img{
  aspect-ratio:auto;
  max-height:64vh; width:auto; max-width:100%;
  object-fit:contain;
  justify-self:end;
}
@media (max-width: 860px){
  .quote, .quote--wide{ grid-template-columns:1fr; }
  .quote img, .quote--wide img{ max-height:56vh; justify-self:start; }
}

/* The name plate over the map is gone: the caption under it carries the
   firm name at display size instead. */
.ymap-name{ display:none; }
.map-legend{ align-items:baseline; }
.map-legend b{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight:700; letter-spacing:0.01em; text-transform:uppercase;
}
.map-legend span{ max-width:52ch; }


/* Firm name under the map: name, then what it is, then the address. */
.map-legend{ display:grid; gap:2px; justify-items:start; }
.map-legend .sub{
  font-family:var(--font-display);
  font-size:clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem);
  font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--fg-muted);
}

/* ==========================================================================
   Fixes: full-bleed cell backgrounds, tighter home rhythm, price prefix.
   ========================================================================== */

/* A cell that carries a WebGL field must be filled edge to edge. Previously
   the canvas sat on the cell's own background and left a grey patch showing
   through around it. */
.cell--field{ background:var(--bg-sunken); }
.cell--field canvas{
  /* Overscanned past the cell edges so the field always covers the whole
     panel: a canvas sized exactly to the box left a dead margin. */
  position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px);
  z-index:0; opacity:0;
  transition:opacity 1.2s var(--ease);
}
.cell--field canvas.is-live{ opacity:1; }
.cell--field::after{
  /* Solid floor under the canvas so no partial fill is ever visible. */
  content:""; position:absolute; inset:0; z-index:-1; background:var(--bg-sunken);
}
.cell--field > *{ position:relative; z-index:1; }

/* Home page rhythm: a touch tighter, not compressed. */
.home .section{ padding-block:var(--s6); }
.home .scene{ min-height:74vh; padding-block:var(--s5); }
.home .shead{ margin-bottom:var(--s4); }
.home .close-cta{ padding-block:var(--s6); }

/* "от" reads as a prefix, not as part of the number. */
.tier-price b i{
  font-style:normal;
  font-size:0.42em;
  font-weight:600;
  letter-spacing:0;
  margin-right:0.28em;
  vertical-align:0.42em;
  color:var(--fg-muted);
}

/* Company documents list */
.docs{ border-top:1px solid var(--line); }
.doc-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding-block:17px; border-bottom:1px solid var(--line);
}
.doc-item b{ font-weight:500; font-size:1rem; }
.doc-item span{
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-dim);
  white-space:nowrap;
}

/* ==========================================================================
   Upload dialog (js/upload.js): intent, files, questions, run, result, pay.
   ========================================================================== */
dialog.upbox{
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--bg-raised); color:var(--fg);
  padding:0; width:min(680px, calc(100% - 32px));
  max-height:88vh; max-height:88dvh;
}
dialog.upbox::backdrop{ background:rgba(6,7,8,0.82); backdrop-filter:blur(8px); }
.upbox-in{
  padding:var(--s5) var(--s4) var(--s4); display:grid; gap:var(--s3); overflow-y:auto;
  max-height:86vh; max-height:86dvh;
  -webkit-overflow-scrolling:touch;
}
.upbox-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; z-index:2;
  border:1px solid var(--line-strong); border-radius:50%;
  display:grid; place-items:center; font-size:1.1rem; line-height:1;
}
@media (hover: none) and (pointer: coarse){
  .upbox-close{ width:44px; height:44px; top:8px; right:8px; }
  .up-files .rm{ width:32px; height:32px; }
  .up-opts button{ padding:12px 16px; }
  .up-methods button{ min-height:44px; }
}
.upbox h3{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:-0.025em; }
.up-step{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-dim); }
.up-lead{ color:var(--fg-muted); font-size:0.98rem; line-height:1.5; }
@media (prefers-reduced-motion: no-preference){
  dialog.upbox[open]{ animation:box-in .34s var(--ease); }
}

/* choices */
.up-choice{ display:grid; gap:10px; }
.up-choice button{
  text-align:left; display:grid; gap:5px;
  padding:var(--s3); border:1px solid var(--line); background:var(--bg);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.up-choice button:hover{ border-color:var(--fg); background:#14161a; }
.up-choice b{ font-size:1.05rem; font-weight:600; }
.up-choice span{ font-size:var(--t-sm); color:var(--fg-muted); }

/* drop zone */
.up-drop{
  display:grid; gap:10px; justify-items:center; text-align:center;
  padding:var(--s5) var(--s3); cursor:pointer;
  border:1px dashed var(--line-strong); background:var(--bg);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.up-drop:hover, .up-drop.over{ border-color:var(--fg); background:#14161a; }
.up-drop b{ font-size:1rem; font-weight:600; }
.up-formats{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.08em; color:var(--fg-dim); }

.up-files{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.up-files:empty{ display:none; }
.up-files li{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--bg); font-size:0.92rem; }
.up-files .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-files .sz{ font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim); }
.up-files .rm{ width:24px; height:24px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; line-height:1; }
.up-files .rm:hover{ border-color:var(--accent-hi); color:var(--accent-hi); }

/* Состояние каждого документа: файл уходит на сервер сразу после выбора,
   и человек должен видеть, прочитан он или нет, ещё до запуска разбора. */
.up-files .st{
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em;
  text-transform:uppercase; white-space:nowrap; flex:none;
}
.up-files .st--wait{ color:var(--fg-dim); }
.up-files .st--ok{ color:#6f9d72; }
.up-files .st--bad{ color:var(--accent-hi); }
.up-files .note{ flex-basis:100%; font-size:var(--t-xs); color:var(--fg-dim); }
.up-files li{ flex-wrap:wrap; }

/* Рассказ клиента своими словами. Поле намеренно крупное: это главный
   ввод на всём шаге, и по размеру должно быть видно, что от человека тут
   ждут текста, а не пары слов. */
.up-story{ display:grid; gap:10px; }
.up-story textarea{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  color:var(--fg);
  padding:14px 16px;
  font:inherit; font-size:0.95rem; line-height:1.55;
  resize:vertical; min-height:150px;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.up-story textarea::placeholder{ color:var(--fg-dim); }
.up-story textarea:focus{ outline:none; border-color:var(--fg); background:#14161a; }

.up-hints{ display:grid; gap:5px; margin:0; padding-left:18px; }
.up-hints li{ font-size:var(--t-sm); color:var(--fg-dim); line-height:1.5; }
.up-count{ font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim); }

/* Поля ввода в окне: почта для чека. */
.up-fields{ display:grid; gap:12px; }
.up-fields label{ display:grid; gap:6px; }
.up-fields span{ font-size:var(--t-sm); color:var(--fg-muted); }
.up-fields input{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  color:var(--fg);
  padding:12px 14px;
  font:inherit; font-size:0.95rem;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.up-fields input::placeholder{ color:var(--fg-dim); }
.up-fields input:focus{ outline:none; border-color:var(--fg); background:#14161a; }

/* Кнопки скачивания после оплаты стоят выше текста: за файлом человек
   и пришёл, а перечитывать документ в окне будет не каждый. */
.up-actions--files{ margin-block:var(--s3); }
.up-result--open{ max-height:none; }
.up-result--open::after{ display:none; }

/* Значок фонового разбора. Висит в правом нижнем углу поверх страницы,
   не уезжает при прокрутке и живёт на всех страницах сайта: работа идёт
   на сервере и от перехода по разделам не прекращается. По нажатию окно
   раскрывается обратно. */
.upbadge{
  position:fixed; z-index:70;
  right:max(var(--gutter), env(safe-area-inset-right));
  bottom:max(var(--gutter), env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  background:rgba(18,20,23,0.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  color:var(--fg);
  font-size:0.9rem;
  animation:upbadge-in .35s var(--ease) both;
}
.upbadge:hover{ border-color:var(--fg-dim); }
.upbadge[hidden]{ display:none; }

.upbadge-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent-hi); flex:none;
}
@media (prefers-reduced-motion: no-preference){
  .upbadge-dot{ animation:upbadge-pulse 1.6s var(--ease) infinite; }
  @keyframes upbadge-pulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.45; transform:scale(0.8); }
  }
}
.upbadge-txt{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.upbadge-txt b{ font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim); font-weight:400; }

@keyframes upbadge-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .upbadge{ animation:none; } }

/* На узком экране значок сжимается до времени: на телефоне полоса
   «Идёт разбор, 1 мин 20 с» заняла бы половину ширины. */
@media (max-width: 520px){
  .upbadge{ padding:10px 14px; font-size:0.84rem; }
  .upbadge-txt span{ display:none; }
}

/* Шкала ожидания под шагами разбора. Одна на весь разбор: настоящего
   процента у нас нет, движок не сообщает, сколько ему осталось. Поэтому
   шкала показывает не долю работы, а то, что работа идёт, - и намеренно
   не доходит до конца, пока результата нет. */
.up-bar{
  height:3px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
  margin-top:var(--s3);
}
.up-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-hi));
  transition:width .5s linear;
}
.up-elapsed{
  font-family:var(--mono); font-size:var(--t-xs);
  color:var(--fg-dim); margin-top:8px;
}

.up-qh{
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--fg-dim);
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--line);
}

/* Сроки и вопросы к юристу: открыты до оплаты, потому что именно они
   определяют, надо ли человеку торопиться и звать живого юриста. */
.up-deadlines, .up-checks{
  border:1px solid var(--line); border-left:2px solid var(--accent-hi);
  background:var(--bg-raised); padding:14px 16px; border-radius:var(--r);
}
.up-deadlines b, .up-checks b{ display:block; font-size:var(--t-sm); margin-bottom:8px; }
.up-deadlines ul, .up-checks ul{ margin:0; padding-left:18px; display:grid; gap:6px; }
.up-deadlines li, .up-checks li{ font-size:0.88rem; color:var(--fg-muted); line-height:1.5; }

.up-err{ font-size:var(--t-sm); color:var(--accent-hi); min-height:1em; }
.up-err:empty{ display:none; }
.up-note label{ display:flex; gap:10px; align-items:flex-start; font-size:var(--t-sm); color:var(--fg-muted); cursor:pointer; }
.up-note input{ margin-top:3px; accent-color:var(--accent-hi); }

/* ==========================================================================
   cookie notice: a corner strip, not a wall. It must be dismissible in one
   click for the majority who accept, and expandable for the minority who care.
   ========================================================================== */
.ck{
  position:fixed; z-index:120;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  width:min(660px, calc(100vw - 32px));
  background:var(--bg-raised);
  border:1px solid var(--line-strong);
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  opacity:0; transform:translateY(12px);
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
}
.ck.on{ opacity:1; transform:none; }

/* Одна строка: текст слева, кнопки справа. Полоса, а не карточка. */
.ck-in{
  padding:11px 14px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.ck-t{ display:none; }
.ck-p{
  flex:1 1 300px; min-width:0;
  font-size:var(--t-xs); line-height:1.45; color:var(--fg-muted); margin:0;
}
.ck a{ color:var(--fg-muted); border-bottom:1px solid var(--line-strong); }
.ck a:hover{ color:var(--fg); border-bottom-color:var(--fg); }

.ck-opts{
  order:3; flex:1 0 100%;
  display:grid; gap:6px;
  border-top:1px solid var(--line); margin-top:1px; padding-top:8px;
}
.ck-opts label{ display:flex; gap:9px; align-items:flex-start; cursor:pointer; }
.ck-opts input{ margin-top:2px; flex:0 0 auto; accent-color:var(--accent-hi); }
.ck-opts span{ font-size:var(--t-xs); line-height:1.45; color:var(--fg-dim); }
.ck-opts b{ color:var(--fg); font-weight:600; margin-right:6px; }
.ck-lock{ cursor:default; }
.ck-lock input{ opacity:.55; }

.ck-act{ display:flex; gap:8px; flex:0 0 auto; }
.ck-act .btn{ white-space:nowrap; padding:7px 14px; font-size:var(--t-xs); }

@media (max-width:640px){
  .ck{
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    bottom:max(10px, env(safe-area-inset-bottom));
    width:auto;
  }
  .ck-in{ padding:12px; gap:10px; }
  .ck-act{ flex:1 1 100%; }
  .ck-act .btn{ flex:1 1 auto; justify-content:center; }
}
@media (hover: none) and (pointer: coarse){
  .ck-act .btn{ min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .ck{ transition:none; }
}

/* consents: each one separate, so the person reads what they are agreeing to
   and so the record on our side is per item rather than one blanket tick */
.up-consents{
  display:grid; gap:12px;
  border:1px solid var(--line-strong);
  padding:16px 18px;
}
.up-ct{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim); margin:0;
}
.up-consents label{
  display:flex; gap:11px; align-items:flex-start;
  font-size:var(--t-sm); line-height:1.55; color:var(--fg-muted); cursor:pointer;
}
.up-consents input{ margin-top:4px; flex:0 0 auto; accent-color:var(--accent-hi); }
.up-consents label:hover{ color:var(--fg); }
.up-consents a{ color:var(--fg-muted); border-bottom:1px solid var(--line-strong); }
.up-consents a:hover{ color:var(--fg); border-bottom-color:var(--fg); }

.up-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

/* the stop screen: calm, not alarming, and honest about what happens next */
.up-fail{ display:grid; gap:16px; }
.up-fail .up-step{ color:var(--accent-hi); }
.up-facts{ display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.up-facts li{
  position:relative; padding-left:20px;
  font-size:var(--t-sm); line-height:1.6; color:var(--fg-muted);
}
.up-facts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--accent-hi);
}

/* questions */
.up-q{ display:grid; gap:10px; }
.up-qt{ font-size:1rem; font-weight:500; }
.up-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.up-opts button{
  padding:9px 15px; border:1px solid var(--line-strong); border-radius:var(--r-pill);
  font-size:var(--t-sm); color:var(--fg-muted);
  transition:all var(--fast) var(--ease);
}
.up-opts button:hover{ color:var(--fg); border-color:var(--fg); }
.up-opts button.on{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

/* progress */
.up-progress{ display:grid; gap:2px; }
.up-progress li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--fg-dim); font-size:0.95rem; }
.up-progress i{ width:9px; height:9px; border-radius:50%; border:1px solid var(--line-strong); flex:none; }
.up-progress li.doing{ color:var(--fg); }
.up-progress li.doing i{ background:var(--accent-hi); border-color:var(--accent-hi); }
.up-progress li.done{ color:var(--fg-muted); }
.up-progress li.done i{ background:var(--fg-muted); border-color:var(--fg-muted); }
@media (prefers-reduced-motion: no-preference){
  .up-progress li.doing i{ animation:pin-pulse 1.4s var(--ease) infinite; }
}

/* result */
.up-result{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #f7f6f3, #ecebe6); color:#15161a;
  padding:26px 26px 0; border-radius:var(--r); min-height:250px;
}
.up-result p{ font-size:0.92rem; line-height:1.6; margin-bottom:11px; }
.up-meta{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:#5c5e64; }
.up-result .lock{ filter:blur(4.5px); user-select:none; }
.up-fade{ position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(180deg, rgba(247,246,243,0), rgba(240,239,234,0.9) 46%, #ecebe6 78%); }

.up-pay{ display:grid; gap:12px; justify-items:start; border:1px solid var(--line); padding:var(--s3); background:var(--bg); }
.up-price{ display:flex; align-items:baseline; gap:9px; }
.up-price b{ font-family:var(--font-display); font-size:2rem; font-weight:700; letter-spacing:-0.03em; }
.up-price span{ font-size:var(--t-sm); color:var(--fg-dim); }
.up-why{ font-size:var(--t-sm); color:var(--fg-muted); }

.up-lawyer{ display:grid; gap:8px; justify-items:start; border-left:2px solid var(--accent); padding-left:var(--s3); }
.up-lawyer b{ font-size:1rem; font-weight:600; }
.up-lawyer span{ font-size:var(--t-sm); color:var(--fg-muted); }

/* payment */
.up-sum{ display:flex; align-items:baseline; justify-content:space-between; border-block:1px solid var(--line); padding-block:16px; }
.up-sum b{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; letter-spacing:-0.03em; }
.up-methods{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 520px){ .up-methods{ grid-template-columns:1fr; } }
.up-methods button{ display:grid; gap:4px; text-align:left; padding:var(--s3); border:1px solid var(--line); background:var(--bg); transition:all var(--fast) var(--ease); }
.up-methods button:hover{ border-color:var(--fg); }
.up-methods button.on{ border-color:var(--accent-hi); background:#14161a; }
.up-methods b{ font-size:1rem; }
.up-methods span{ font-size:var(--t-xs); color:var(--fg-muted); }
.up-qr{ display:grid; gap:10px; justify-items:center; padding:var(--s3); border:1px solid var(--line); background:var(--bg); }
.up-qr .qr{
  width:150px; height:150px; background:
    repeating-conic-gradient(var(--fg) 0 25%, transparent 0 50%) 0 0 / 17px 17px,
    var(--bg-raised);
  border:9px solid var(--fg-muted); opacity:0.32;
}
.up-qr p{ font-size:var(--t-sm); color:var(--fg-muted); }
.up-legal{ font-size:var(--t-xs); color:var(--fg-dim); }
.up-stub{ font-size:var(--t-sm); color:var(--accent-hi); border:1px solid var(--line-strong); padding:12px 14px; }


/* A grid cell that spans the full six columns. Without it a four-column cell
   left two columns empty, and the grid's own line colour showed through as a
   grey patch. Full width also squares the block off against the two half
   cells below it. */
.cell--full{ grid-column:1 / -1; }
/* Same 230px floor as every other cell in the grid, so the row keeps the
   site's rhythm instead of towering over the two cells beneath it. */
.grid-x .cell--full.cell--field{ min-height:230px; justify-content:center; }
.grid-x .cell--full .kpi{ font-size:clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.grid-x .cell--full .body{ max-width:56ch; }
@media (max-width: 900px){ .cell--full{ grid-column:span 1; } }

/* ==========================================================================
   Legal documents: one narrow column, generous line height. Nothing here
   should feel like marketing; it has to be readable and printable.
   ========================================================================== */
.phead--doc{ padding-block:calc(68px + var(--s5)) var(--s4); }
.legal{ max-width:74ch; }
.legal h2{
  font-family:var(--font-display);
  font-size:clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight:700; letter-spacing:-0.02em;
  margin:var(--s5) 0 var(--s2);
  padding-top:var(--s3); border-top:1px solid var(--line);
}
.legal h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.legal p{ color:var(--fg-muted); line-height:1.72; margin-bottom:14px; }
.legal .lead-doc{ color:var(--fg); font-size:var(--t-lead); line-height:1.6; margin-bottom:var(--s3); }
.legal ul, .legal ol{ margin:0 0 18px; padding-left:0; }
.legal li{
  position:relative; padding-left:24px; margin-bottom:10px;
  color:var(--fg-muted); line-height:1.65;
}
.legal ul li::before{
  content:""; position:absolute; left:6px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--fg-dim);
}
.legal ol{ counter-reset:n; }
.legal ol li{ counter-increment:n; }
.legal ol li::before{
  content:counter(n) "."; position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-dim);
}
.legal b{ color:var(--fg); font-weight:600; }
.legal a{ color:var(--fg); border-bottom:1px solid var(--line-strong); }
.legal a:hover{ border-bottom-color:var(--fg); }
.legal-date{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-dim);
}
/* callout at the head of a document: the part we need read, not skimmed */
.legal .warn{
  border-left:2px solid var(--accent-hi);
  background:rgba(163,47,54,.07);
  padding:18px 20px;
  margin-bottom:var(--s3);
  font-size:var(--t-sm); line-height:1.7; color:var(--fg-muted);
}
.legal .warn b{ color:var(--fg); display:block; margin-bottom:6px; }

.legal .req{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.legal .req th, .legal .req td{
  text-align:left; vertical-align:top; padding:13px 0;
  border-bottom:1px solid var(--line); font-weight:400;
}
.legal .req th{ width:38%; color:var(--fg-dim); font-size:var(--t-sm); padding-right:var(--s3); }
.legal .req td{ color:var(--fg); }
@media (max-width: 620px){
  .legal .req th, .legal .req td{ display:block; width:auto; border-bottom:0; padding:4px 0; }
  .legal .req td{ padding-bottom:14px; border-bottom:1px solid var(--line); }
}
a.doc-item{ transition:padding-left var(--fast) var(--ease), color var(--fast) var(--ease); }
a.doc-item:hover{ padding-left:6px; color:var(--fg); }
a.doc-item span{ color:var(--fg-dim); }

.foot-legal{
  display:flex; flex-wrap:wrap; gap:10px var(--s3);
  padding-top:var(--s3); margin-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--fg-dim);
}
.foot-legal a:hover{ color:var(--fg); }

/* Ссылки на правовые документы внутри диалогов и подписей форм */
.up-note a, .up-legal a, .form-note a{
  color:var(--fg-muted); border-bottom:1px solid var(--line-strong);
}
.up-note a:hover, .up-legal a:hover, .form-note a:hover{ color:var(--fg); border-bottom-color:var(--fg); }