/* ===========================================================================
   Hisobchi AI — site styles.

   The design comes out of the subject's own materials: a double-entry ledger
   and Uzbek glazed tilework. Two ideas run through everything:

   1. The ledger rule. Sections are split by a hairline with content posted
      either side of it, the way a book keeps debit against credit. Figures are
      monospaced and tabular because the reader is checking them against their
      own books.
   2. The glaze. Samarkand majolica — turquoise, cobalt, a little saffron on
      white gypsum. Colour appears only on instruments and account markers;
      everything else is porcelain and ink.

   Section markers use real 1C:Enterprise account numbers, and only where the
   account is genuinely the one concerned. A section with no true account gets
   no number rather than a decorative one.
   ========================================================================= */

:root {
  /* --- glaze palette --- */
  --glaze:      #F1F5F5;   /* page ground, cool porcelain */
  --paper:      #FFFFFF;
  --paper-2:    #FAFCFC;
  --ink:        #0A2530;   /* text */
  --ink-2:      #3C5A64;   /* secondary text */
  --ink-3:      #77949E;   /* captions */
  --line:       #DBE5E6;   /* hairlines */
  --line-2:     #EAF0F0;

  --turq:       #0E9A94;   /* primary — Samarkand glaze */
  --turq-d:     #0A736F;
  --turq-wash:  #E4F2F1;
  --cobalt:     #21489E;   /* the register of law and structure */
  --cobalt-wash:#E7ECF7;
  --saffron:    #C8830E;   /* what something costs */
  --saffron-wash:#FBF0DC;

  /* --- type --- */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body:    'Figtree', 'Segoe UI', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* --- metrics --- */
  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --bay-y: clamp(72px, 11vw, 160px);
  --r: 14px;      /* radius: restrained, not pill-shaped */
  --r-lg: 22px;

  --shadow-1: 0 1px 2px rgba(10,37,48,.05), 0 8px 24px -12px rgba(10,37,48,.14);
  --shadow-2: 0 2px 6px rgba(10,37,48,.06), 0 28px 60px -28px rgba(10,37,48,.28);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Khatam — the eight-point star of Uzbek girih tilework, drawn the way it is
     actually constructed: two squares, one turned forty-five degrees. Used as
     a watermark where an inline SVG cannot go. */
  --tile-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='14' y='14' width='72' height='72'/%3E%3Crect x='14' y='14' width='72' height='72' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='26'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--glaze);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* The user-agent default here is `margin: 1em 40px`. Left in, it eats 80px of
   width from every photo plate and every strip item, and indents the founder
   quote away from its own rule. */
figure, blockquote { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 700; letter-spacing: -.032em; }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.012em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Every figure on this site is monospaced and tabular. A reader checking a
   soum amount against their own books should not have to fight kerning. */
.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A light sweeping across text, for the one place it means something: the
   assistant is working and has not answered yet. The gradient is clipped to
   the glyphs, so the letters themselves carry the sweep.
   Deliberately not used decoratively — shimmer on text that is not waiting for
   anything is just a distraction. */
.shimmer {
  --shimmer-contrast: rgba(255, 255, 255, .82);
  background: currentColor linear-gradient(
    to right,
    currentColor 0%,
    var(--shimmer-contrast) 40%,
    var(--shimmer-contrast) 60%,
    currentColor 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 50% 200%;
  animation: shimmer 2.9s linear infinite;
}

/* The sweep occupies the first half and then rests, so it pulses rather than
   scrolling continuously. */
@keyframes shimmer {
  0%   { background-position-x: -100%; }
  55%  { background-position-x: 250%; }
  100% { background-position-x: 250%; }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2.5px solid var(--turq);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* =================================================== ambient background == */
/* Fixed, transform-only, pointer-none. Girih tiles from Uzbek glazework drift
   and turn behind the page; ledger rules crawl upward underneath them. It sits
   at a low enough opacity that body text never has to compete with it. */

.ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}

.ambient__rules {
  position: absolute; inset: -20% -10%;
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px 46px);
  opacity: .5;
  animation: rules-crawl 32s linear infinite;
}

/* A wash that keeps the middle of the page clean so text always sits on calm
   ground, however busy the corners get. */
.ambient__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 44% at 78% 12%, var(--turq-wash) 0%, transparent 62%),
    radial-gradient(50% 40% at 12% 82%, var(--cobalt-wash) 0%, transparent 60%);
  opacity: .75;
}

.ambient__tile {
  position: absolute;
  color: var(--turq);
  opacity: .085;
  will-change: transform;
}
.ambient__tile--1 { width: 260px; top: 8%;  left: -70px;  animation: drift-a 46s ease-in-out infinite; }
.ambient__tile--2 { width: 180px; top: 46%; right: -50px; animation: drift-b 58s ease-in-out infinite; color: var(--cobalt); }
.ambient__tile--3 { width: 320px; top: 74%; left: 12%;    animation: drift-c 68s ease-in-out infinite; opacity: .06; }
.ambient__tile--4 { width: 140px; top: 24%; right: 22%;   animation: drift-b 52s ease-in-out infinite reverse; color: var(--saffron); opacity: .07; }

/* Account numbers drifting like entries waiting to be posted. */
.ambient__glyph {
  position: absolute;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ink);
  opacity: .07;
  white-space: nowrap;
}
.ambient__glyph--1 { top: 18%; left: 6%;   animation: float-up 40s linear infinite; }
.ambient__glyph--2 { top: 62%; right: 8%;  animation: float-up 54s linear infinite 8s; }
.ambient__glyph--3 { top: 88%; left: 42%;  animation: float-up 47s linear infinite 20s; }

@keyframes rules-crawl { to { transform: translateY(-46px); } }
@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%     { transform: translate3d(46px,-38px,0) rotate(24deg); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%     { transform: translate3d(-52px,42px,0) rotate(-30deg); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%     { transform: translate3d(34px,50px,0) rotate(18deg) scale(1.08); }
}
@keyframes float-up {
  0%   { transform: translateY(30px); opacity: 0; }
  12%  { opacity: .07; }
  88%  { opacity: .07; }
  100% { transform: translateY(-180px); opacity: 0; }
}

/* Everything the reader actually reads sits above the ambient layer. */
.masthead, main, .footer, .chatfab, .chatpanel { position: relative; z-index: 1; }

/* ============================================================= masthead == */

.masthead {
  position: sticky; top: 0; z-index: 60;
  padding: 14px 0;
  transition: padding .3s var(--ease);
}
.masthead.is-stuck { padding: 8px 0; }

.masthead__inner { display: block; }

.masthead__pill {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 12px 10px 20px;
  border-radius: 100px;
  background: rgba(255,255,255,.72);
  border: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead.is-stuck .masthead__pill {
  background: rgba(255,255,255,.86);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

.wordmark {
  display: inline-flex; align-items: baseline; gap: 7px;
  text-decoration: none; flex: none;
}
.wordmark__mark {
  width: 26px; height: 26px; align-self: center; color: var(--turq);
}
.wordmark__primary {
  font-family: var(--display); font-weight: 700; font-size: 1.16rem;
  letter-spacing: -.024em; color: var(--ink);
}
.wordmark__secondary {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--turq-d);
}

.nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.nav a {
  padding: 8px 13px; border-radius: 100px;
  font-size: .93rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(14,154,148,.09); }
.nav a[aria-current="page"] { color: var(--turq-d); font-weight: 600; }

.masthead__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.navtoggle {
  display: none;
  width: 42px; height: 42px; border: 1px solid var(--line);
  background: var(--paper); border-radius: 100px; cursor: pointer;
  padding: 0; place-items: center;
}
.navtoggle span {
  display: block; width: 17px; height: 1.8px; background: var(--ink);
  border-radius: 2px; margin: 3.4px auto;
  transition: transform .26s var(--ease), opacity .18s var(--ease);
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* ================================================================ buttons */

/* Glass, but not at the cost of contrast. The button reads as a lit, slightly
   liquid surface — a bright top edge, a darker bottom one, and a specular
   sweep that crosses on hover — while the primary keeps a solid fill
   underneath, because white-on-translucent is the standard way these buttons
   quietly fail an accessibility check. */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  min-height: 48px;              /* a comfortable thumb target on a phone */
  border: 1px solid transparent; border-radius: 100px;
  font-family: var(--body); font-size: .97rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}

/* The specular sweep. It sits above the fill and below the label. */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    transparent 32%, rgba(255,255,255,.42) 47%, rgba(255,255,255,.42) 53%, transparent 68%);
  transform: translateX(-125%);
  transition: transform .75s var(--ease);
}
.btn:hover::after { transform: translateX(125%); }

.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(180deg, hsl(176 80% 38%), hsl(176 84% 30%));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 1px 2px rgba(10,115,111,.3),
    0 10px 22px -12px rgba(10,115,111,.7);
}
.btn--primary:hover {
  background: linear-gradient(180deg, hsl(176 82% 34%), hsl(176 86% 26%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(10,115,111,.32),
    0 16px 30px -14px rgba(10,115,111,.75);
}

/* The ghost is where the glass actually belongs: it has nothing to say on its
   own, so it borrows whatever is behind it. */
.btn--ghost {
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  color: var(--ink);
  border-color: rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(10,37,48,.05),
    0 2px 10px rgba(10,37,48,.06);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.78);
  border-color: rgba(255,255,255,.95);
}

/* On the dark plate the same glass has to borrow from ink instead of paper.
   This replaces the inline style overrides the templates used to carry. */
.cta .btn--ghost,
.page-chat .console__aside .btn--ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 10px rgba(0,0,0,.18);
}
.cta .btn--ghost:hover,
.page-chat .console__aside .btn--ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.38);
}

.btn--sm { padding: 10px 18px; min-height: 40px; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn:hover { transform: none; }
}

/* ================================================================== hero  */

.hero {
  position: relative;
  padding: clamp(38px, 6vw, 74px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}

/* ------------------------------------------------- the living gradient -- */
/* Five soft masses of the brand colours, drifting and breathing behind the
   copy. Photographs were tried here first and lost: cropped to a hero band
   they read as stock, and they fought the ledger card for attention. A field
   of the product's own colours does neither.

   Only transform and opacity animate, so this stays on the compositor. The
   blur is the expensive part, so the blobs are few and large rather than many
   and small. */

.aurora {
  position: absolute; inset: -12% -8%;
  z-index: 0; pointer-events: none; overflow: hidden;
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}

.aurora__blob--1 {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: -8%; left: -6%;
  background: radial-gradient(circle at 50% 50%, hsl(176 78% 46% / .50), transparent 70%);
  animation: drift-1 27s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  top: 6%; right: -4%;
  background: radial-gradient(circle at 50% 50%, hsl(223 66% 52% / .38), transparent 70%);
  animation: drift-2 34s ease-in-out infinite alternate;
}
.aurora__blob--3 {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
  bottom: -14%; left: 18%;
  background: radial-gradient(circle at 50% 50%, hsl(38 82% 56% / .30), transparent 70%);
  animation: drift-3 31s ease-in-out infinite alternate;
}
.aurora__blob--4 {
  width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
  bottom: -10%; right: 6%;
  background: radial-gradient(circle at 50% 50%, hsl(168 72% 58% / .42), transparent 70%);
  animation: drift-4 23s ease-in-out infinite alternate;
}
.aurora__blob--5 {
  width: 30vw; height: 30vw; min-width: 220px; min-height: 220px;
  top: 34%; left: 36%;
  background: radial-gradient(circle at 50% 50%, hsl(200 70% 62% / .30), transparent 70%);
  animation: drift-5 38s ease-in-out infinite alternate;
}

/* A whisper of grain. Large blurred gradients band badly on 8-bit displays,
   and noise is the standard fix. */
.aurora__grain {
  position: absolute; inset: 0; opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

@keyframes drift-1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } }
@keyframes drift-2 { to { transform: translate3d(-8vw, 10vh, 0) scale(1.12); } }
@keyframes drift-3 { to { transform: translate3d(11vw, -8vh, 0) scale(1.22); } }
@keyframes drift-4 { to { transform: translate3d(-10vw, -6vh, 0) scale(1.15); } }
@keyframes drift-5 { to { transform: translate3d(6vw, -11vh, 0) scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none !important; }
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

/* ---------------------------------------------------------- the badge --- */

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 14px; margin-bottom: 24px;
  border-radius: 100px; text-decoration: none;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.badge:hover { border-color: var(--turq); color: var(--ink); background: rgba(255,255,255,.86); }
.badge svg { width: 13px; height: 13px; transition: transform .22s var(--ease); }
.badge:hover svg { transform: translateX(3px); }
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--turq); box-shadow: 0 0 0 3px var(--turq-wash);
}

/* --------------------------------------------------------- the rotator -- */
/* The last phrase of the headline turns over. Words are stacked in one grid
   cell, so the line is as wide as the longest of them and nothing reflows as
   they change. The box is clipped, which is what makes it read as a roller
   rather than a cross-fade — the padding/margin pair gives descenders room to
   sit below the baseline without being cut off. */

.rotator {
  display: inline-grid;
  overflow: hidden;
  padding-bottom: .22em;
  margin-bottom: -.22em;
  vertical-align: bottom;
}
.rotator__word {
  grid-area: 1 / 1;
  color: var(--turq-d);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.85em);
  transition: opacity .42s var(--ease), transform .52s var(--ease);
}
.rotator__word.is-active { opacity: 1; transform: none; }
.rotator__word.is-out { opacity: 0; transform: translateY(-.85em); }

@media (prefers-reduced-motion: reduce) {
  .rotator__word { transition: none; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--turq-d);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1.5px; background: var(--turq); flex: none;
}

.hero h1 { margin-bottom: 22px; }

.hero__lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--ink-2); max-width: 52ch; margin-bottom: 30px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero__note {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--ink-3); max-width: 46ch;
}

/* ------------------------------------------------- the regime ledger ---- */
/* The signature element. It is the product's own regime-comparison
   calculator, deterministic and running in the browser, so a visitor can see
   the answer before they ever open the chat. Every figure below is derived
   from the two inputs — nothing here is a picture of a calculation. */

.ledger {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.ledger__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  /* It is a <summary>. Drop the disclosure triangle; the chevron replaces it. */
  list-style: none;
  cursor: default;
}
.ledger__head::-webkit-details-marker { display: none; }

.ledger__chev {
  width: 18px; height: 18px; flex: none; align-self: center;
  color: var(--ink-3);
  display: none;               /* only a control where it can actually toggle */
  transition: transform .28s var(--ease);
}
.ledger[open] .ledger__chev { transform: rotate(180deg); }

/* Opening should feel like the card unfolding, not like content teleporting in.
   <details> cannot animate its own height, so the body carries the motion. */
.ledger[open] .ledger__body { animation: ledger-open .34s var(--ease); }
@keyframes ledger-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ledger[open] .ledger__body { animation: none; }
  .ledger__chev { transition: none; }
}

/* Below 1000px the hero stacks, so the ledger stops being a companion beside
   the headline and becomes 900px of card in the middle of the reading flow.
   That is where it becomes collapsible — and only there. Above it the summary
   is inert, so the card can never be closed on a screen with room for it.
   site.js uses the same 1000px; keep the two in step. */
/* Where there is room for the card there is no chevron, so a stray click on
   the head must not collapse something the reader cannot obviously reopen. */
@media (min-width: 1001px) {
  .ledger__head { pointer-events: none; }
}

@media (max-width: 1000px) {
  .ledger__head { cursor: pointer; }
  .ledger__chev { display: block; }
  .ledger__head:hover .ledger__title,
  .ledger__head:hover .ledger__chev { color: var(--turq-d); }
  .ledger__head:focus-visible { outline-offset: -3px; }

  /* Closed, the summary is the whole card, so it should not look cut off. */
  .ledger:not([open]) .ledger__head { border-bottom: 0; padding-bottom: 18px; }
  .ledger:not([open]) .ledger__sub { color: var(--ink); font-weight: 600; }
}
.ledger__title {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.ledger__sub { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }

.ledger__inputs { padding: 20px 22px 6px; display: grid; gap: 20px; }

.field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: .84rem; font-weight: 500; color: var(--ink-2); margin-bottom: 10px;
}
.field output {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .93rem; font-weight: 600; color: var(--ink);
}
.field output small { font-size: .74rem; font-weight: 500; color: var(--ink-3); margin-left: 4px; }

/* Range input, styled in both engines. Kept chunky enough for a thumb. */
.field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: grab; margin: 0;
  display: block;
}
.field input[type="range"]:active { cursor: grabbing; }
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 100px;
  background: linear-gradient(90deg, var(--turq) var(--fill,40%), var(--line-2) var(--fill,40%));
}
.field input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 100px; background: var(--line-2);
}
.field input[type="range"]::-moz-range-progress {
  height: 5px; border-radius: 100px; background: var(--turq);
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8.5px;
  border-radius: 50%; background: var(--paper);
  border: 1.5px solid var(--turq);
  box-shadow: 0 1px 3px rgba(10,37,48,.2), 0 4px 10px -4px rgba(10,115,111,.5);
  transition: transform .16s var(--ease);
}
.field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--paper);
  border: 1.5px solid var(--turq); box-shadow: 0 1px 3px rgba(10,37,48,.2);
}
.field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }

/* The threshold rail: where this business sits against the 5-billion-soum
   VAT registration line. The whole product exists around this line, so it
   gets its own instrument rather than a sentence. */
.rail {
  margin: 6px 22px 0; padding: 14px 0 18px;
  border-top: 1px dashed var(--line);
}
.rail__track {
  position: relative; height: 6px; border-radius: 100px;
  background: linear-gradient(90deg, var(--turq-wash), var(--saffron-wash));
}
.rail__mark {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  /* The rail runs 0–8 bln soum, so the 5 bln threshold sits at exactly 62.5%.
     regime.js positions the marker on the same scale — keep them in step. */
  background: var(--ink-3); left: 62.5%;
}
.rail__mark::after {
  content: 'VAT threshold'; position: absolute; top: -19px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.rail__you {
  position: absolute; top: 50%; width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  background: var(--turq); border: 2.5px solid var(--paper);
  box-shadow: 0 2px 6px rgba(10,37,48,.28);
  transition: left .35s var(--ease), background .35s var(--ease);
}
.rail.is-over .rail__you { background: var(--saffron); }
.rail__legend {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-family: var(--mono); font-size: .62rem; color: var(--ink-3);
}

/* The posted lines. One row per regime, each carrying its own rate and its
   own figure — the comparison is the point, so they share a baseline grid. */
.ledger__rows { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: baseline;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-2);
  transition: background .3s var(--ease), opacity .3s var(--ease);
}
.row__name { font-size: .93rem; font-weight: 600; color: var(--ink); }
.row__rate {
  display: block; font-family: var(--mono); font-size: .68rem;
  color: var(--ink-3); font-weight: 400; margin-top: 3px;
}
.row__fig {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 600; color: var(--ink); text-align: right;
  white-space: nowrap;
}
.row__fig small { display: block; font-size: .64rem; font-weight: 400; color: var(--ink-3); margin-top: 3px; }

.row.is-best { background: var(--turq-wash); }
.row.is-best .row__name::after {
  content: 'cheapest'; margin-left: 9px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--turq-d);
  border: 1px solid var(--turq); border-radius: 100px; padding: 2px 7px;
  vertical-align: 1.5px;
}
.row.is-out { opacity: .42; }
.row.is-out .row__fig { color: var(--ink-3); }

/* The verdict carries the number, and it is the last thing computed — the
   figure in it is produced by the rows above, never written independently. */
.ledger__verdict {
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border-top: 2px solid var(--ink);
}
.ledger__verdict p { font-size: .95rem; color: var(--ink-2); margin-bottom: 10px; }
.ledger__verdict strong {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.35;
}
.ledger__foot {
  padding: 14px 22px 18px; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--ink-3); line-height: 1.55;
}

/* ============================================================= spotlight = */
/* One light source for the whole page. site.js writes the pointer position to
   the root element and every .glow surface reads it; because the gradients are
   background-attachment: fixed they are positioned against the viewport, not
   the card, so a single spotlight sweeps across a group of cards together
   instead of each one lighting itself independently.
   The hue travels turquoise → cobalt across the screen, so the light stays
   inside the palette rather than turning into a rainbow. */

/* The wash sits on the element's own background-image rather than a pseudo:
   a pseudo-element painted over the card would tint the text under it, and one
   painted behind it would be hidden by the card's own background colour. */
.glow {
  position: relative;
  background-image: radial-gradient(
    var(--spot, 300px) var(--spot, 300px) at
    calc(var(--gx, 0) * 1px) calc(var(--gy, 0) * 1px),
    hsl(var(--ghue, 176) 68% 46% / .30), transparent 68%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}

/* The lit edge is a one-pixel ring cut out with a mask, so it can glow without
   changing the card's box. A ring covers no text, so this one may paint above. */
.glow::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: radial-gradient(
    calc(var(--spot, 300px) * .8) calc(var(--spot, 300px) * .8) at
    calc(var(--gx, 0) * 1px) calc(var(--gy, 0) * 1px),
    hsl(var(--ghue, 176) 82% 60% / .95), transparent 72%);
  background-attachment: fixed;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .8;
  transition: opacity .45s var(--ease);
}
.glow:hover::after { opacity: 1; }

/* Touch devices get a fixed gradient instead: background-attachment: fixed is
   janky to the point of unusable on iOS, and there is no pointer to follow. */
@media (hover: none) {
  .glow {
    background-image: linear-gradient(142deg, hsl(176 68% 46% / .24), transparent 62%);
    background-attachment: scroll;
  }
  .glow::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .glow::after { transition: none; }
}

/* ================================================================= bays == */

.bay { padding: var(--bay-y) 0; position: relative; }
.bay--tint { background: var(--paper); border-block: 1px solid var(--line); }

/* A wash band, for variety between the porcelain and the white. */
.bay--wash {
  background: linear-gradient(180deg, var(--turq-wash) 0%, var(--glaze) 68%);
  border-block: 1px solid var(--line);
}

/* --- background snippets ------------------------------------------------ */
/* Two flat patterns, each masked so it fades out before it reaches the text.
   They are pure CSS gradients — no images, nothing to download — and they
   exist to break up the run of plain sections, not to be noticed. */

.bay--grid, .bay--dots { position: relative; isolation: isolate; }

.bay--grid::before,
.bay--dots::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}

/* Ruled paper, the ledger device at section scale. */
.bay--grid::before {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
}

/* A dot matrix, with a soft turquoise bloom behind it. */
.bay--dots::before {
  background-image: radial-gradient(var(--line-2) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(100% 70% at 50% 50%, #000 30%, transparent 80%);
}
.bay--dots::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 78% 22%, var(--turq-wash), transparent 70%);
}

/* The dark plate. Same surface as the closing call to action, reused wherever
   a section should carry weight rather than continue the page. */
.bay--dark {
  background: var(--ink);
  color: #fff;
  border-block: 0;
  /* The khatam watermark below is deliberately hung off the right edge, and
     without this it widens the document by exactly its overhang. */
  overflow: hidden;
}
.bay--dark h2, .bay--dark h3 { color: #fff; }
.bay--dark .bay__head p { color: rgba(255,255,255,.68); }
.bay--dark .eyebrow { color: var(--turq); }
.bay--dark .eyebrow::before { background: var(--turq); }

/* A khatam watermark so the dark plate is not a flat rectangle. */
.bay--dark::after {
  content: ''; position: absolute; right: -90px; top: -70px;
  width: 380px; height: 380px; opacity: .05; pointer-events: none;
  background: var(--tile-url) center / contain no-repeat;
}

.bay__head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 64px); }
.bay__head p {
  font-size: clamp(1rem, 1.35vw, 1.13rem); color: var(--ink-2); margin-top: 18px;
}
.bay__head--wide { max-width: none; }

/* The ledger split: content posted either side of a centre rule. Left column
   runs up to the rule, right column runs away from it. */
.split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 clamp(26px, 4vw, 54px);
  align-items: start;
}
.split__rule { background: var(--line); align-self: stretch; }
.split__side { display: grid; gap: clamp(26px, 3.4vw, 42px); }
.split__side--l { text-align: right; }
.split__side--l .entry__head { justify-content: flex-end; }

.split__label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.split__side--l .split__label { text-align: right; }

.entry__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.entry h3 { font-size: 1.12rem; }
.entry p { font-size: .96rem; color: var(--ink-2); }
.entry__fig {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .78rem; font-weight: 600; color: var(--saffron);
  background: var(--saffron-wash); border-radius: 100px; padding: 3px 10px;
}

/* --------------------------------------------------------- account cards */
/* Section markers are real 1C:Enterprise account numbers, used only where the
   account genuinely is the one the answer would post to. */

/* Column counts are explicit rather than auto-fit. With six cards, auto-fit
   can settle on five across and leave the sixth stretched over a full row —
   1 / 2 / 3 all divide six evenly, so an orphan is impossible. */
.accounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 640px)  { .accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .accounts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.acct {
  position: relative;
  /* background-color, not the shorthand: the shorthand would wipe out the
     spotlight gradient that .glow puts on background-image. */
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px 24px;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease),
              border-color .32s var(--ease);
}
.acct:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--turq);
}
.acct__no {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; color: var(--cobalt);
  background: var(--cobalt-wash); border-radius: 6px; padding: 4px 9px;
  margin-bottom: 16px;
}
.acct__no span { color: var(--ink-3); font-weight: 400; letter-spacing: .04em; }
.acct h3 { margin-bottom: 10px; }
.acct p { font-size: .94rem; color: var(--ink-2); }
.acct__ask {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: .87rem; color: var(--ink-3); font-style: italic;
}

/* The same cards on the dark plate. */
.bay--dark .acct {
  background-color: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
}
.bay--dark .acct:hover { border-color: rgba(14,154,148,.55); box-shadow: none; }
.bay--dark .acct p { color: rgba(255,255,255,.66); }
.bay--dark .acct__no { background: rgba(14,154,148,.16); color: var(--turq); }
.bay--dark .acct__no span { color: rgba(255,255,255,.45); }
.bay--dark .acct__ask {
  border-top-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.5);
}

/* ------------------------------------------------------------- plates --- */
/* Photographs, deliberately unequal. Sizes and vertical offsets differ so the
   eye moves down the page in a zigzag instead of scanning a tidy row. */

.plates {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}
.plate { position: relative; border-radius: var(--r); overflow: hidden; background: var(--line-2); }
.plate img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.plate:hover img { transform: scale(1.045); }

.plate__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(10,37,48,.82));
  color: #fff;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  line-height: 1.5;
}

.plate--a { grid-column: span 5; aspect-ratio: 3/4;  height: auto; }
.plate--b { grid-column: span 7; aspect-ratio: 4/3;  height: auto; margin-top: clamp(28px, 5vw, 76px); }
.plate--c { grid-column: span 7; aspect-ratio: 16/10; height: auto; }
.plate--d { grid-column: span 5; aspect-ratio: 3/4;  height: auto; margin-top: clamp(-64px, -5vw, -18px); }

/* A band of tilework used as material, not decoration: it is the surface the
   product's colour is borrowed from.

   The words used to sit centred on a pale veil, directly over the busiest part
   of the pattern, and were close to unreadable. They now sit on their own dark
   plate, pushed off to one side, so the tilework stays legible as tilework and
   the sentence stays legible as a sentence. */
.band {
  position: relative; overflow: hidden;
  padding: clamp(44px, 7vw, 96px) 0;
  border-block: 1px solid var(--line);
}
.band > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(10,37,48,.52) 0%, rgba(10,37,48,.14) 58%, rgba(10,37,48,.30) 100%);
}
.band__inner { position: relative; z-index: 1; }

.band__card {
  max-width: 540px;
  background-color: rgba(10,37,48,.90);
  backdrop-filter: blur(7px) saturate(1.2);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 24px 60px -26px rgba(10,37,48,.8);
}
.band__card .eyebrow { color: var(--turq); margin-bottom: 16px; }
.band__card .eyebrow::before { background: var(--turq); }
.band__quote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.7vw, 2.05rem);
  font-weight: 600; letter-spacing: -.022em; line-height: 1.16; color: #fff;
}
.band__note {
  margin: 16px 0 0; font-size: .9rem; color: rgba(255,255,255,.62);
}

/* ----------------------------------------------------------- the wall --- */
/* Three columns of questions rising at different speeds.
   These are questions, not testimonials. The product has not launched, so
   there are no customers to quote; inventing praise and a face to attach it to
   would be a lie told in a nice typeface. Real questions in the same format do
   the same job better — they show scope instead of asserting quality. */

.wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  height: clamp(460px, 60vh, 620px);
  overflow: hidden;
  /* fade both ends so cards enter and leave rather than being cut off */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
}

.wall__col {
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  align-content: start;
  animation: wall-up var(--dur, 50s) linear infinite;
  will-change: transform;
}
.wall:hover .wall__col,
.wall:focus-within .wall__col { animation-play-state: paused; }

/* Each column holds its list twice, so -50% lands on the second copy. */
@keyframes wall-up { to { transform: translateY(-50%); } }

.ask {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 20px 17px;
}
.ask__q {
  margin: 0 0 14px;
  font-size: .96rem; line-height: 1.5; color: var(--ink);
}
.ask__q::before {
  content: '“'; color: var(--turq); font-family: var(--display);
  font-size: 1.5em; line-height: 0; vertical-align: -.16em; margin-right: 2px;
}
.ask__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.ask__acct {
  color: var(--cobalt); background: var(--cobalt-wash);
  border-radius: 5px; padding: 3px 7px; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wall { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .wall__col { animation: none; }
  /* Without the marquee the duplicate copy is just the same card twice. */
  .wall__col > .ask[data-copy] { display: none; }
}

/* ---------------------------------------------------------- strip ------- */
/* A slow band of the sectors the product serves. It carries no argument and
   almost no words — it is here to let the page breathe between two dense
   sections, and it is the one piece of the layout that moves on its own on a
   phone, where everything else is a column of text. */

.strip { overflow: hidden; padding: clamp(28px, 4vw, 46px) 0; }

.strip__track {
  display: flex; gap: clamp(12px, 1.6vw, 20px);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.strip:hover .strip__track,
.strip:focus-within .strip__track { animation-play-state: paused; }

.strip__item { flex: none; width: clamp(190px, 24vw, 290px); }
.strip__item img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r);
}
.strip__item figcaption {
  margin-top: 10px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}

/* The track holds the list twice, so -50% lands exactly on the second copy
   and the loop has no seam. */
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip__track { animation: none; }
}

/* ---------------------------------------------------------- steps ------- */
/* Numbered, because onboarding genuinely is a sequence: the order is the
   information. */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 38px);
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__no {
  counter-increment: step;
  font-family: var(--mono); font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 300; color: var(--turq); line-height: 1;
  min-width: 2.2ch;
}
.step__no::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: .98rem; max-width: 64ch; }
.step__meta {
  margin-top: 10px; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .06em; color: var(--ink-3);
}

/* ---------------------------------------------------------- checks ------ */

/* Three cards go three across or one down. Two-and-one leaves an orphan. */
.checks { display: grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--turq);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 22px 22px 20px;
}
.check h3 { font-size: 1.02rem; margin-bottom: 8px; }
.check p { font-size: .91rem; color: var(--ink-2); }
.check__src {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; color: var(--turq-d);
}

/* ---------------------------------------------------------- personas ---- */

.personas { display: grid; gap: clamp(18px, 2.4vw, 26px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.persona {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 22px;
}
.persona__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.persona h3 { font-size: 1.08rem; margin-bottom: 8px; }
.persona p { font-size: .93rem; color: var(--ink-2); }
.persona__tier {
  display: inline-block; margin-top: 15px;
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  color: var(--turq-d); background: var(--turq-wash);
  border-radius: 100px; padding: 4px 11px;
}

/* ---------------------------------------------------------- founder ----- */
/* The portrait is the founder's own photograph — no stock face has ever been
   used here. It is stored at its native 2:3 and cropped to 4:5 by the frame,
   so re-aiming it is an object-position change, not a re-export. */

.founder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 66px); align-items: start;
}
.founder__portrait {
  /* height:auto so the width/height attributes stop overriding aspect-ratio. */
  width: 100%; max-width: 330px; height: auto; aspect-ratio: 4/5;
  object-fit: cover; object-position: 50% 12%;   /* head high in the frame */
  border-radius: var(--r); background: var(--line-2);
  margin-bottom: 30px;
}
.founder__name {
  font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.04; margin-bottom: 10px;
}
.founder__role {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--turq-d); margin-bottom: 26px;
}
.founder__quote {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink);
  border-left: 2px solid var(--turq); padding-left: 22px; margin-bottom: 22px;
}
.founder__source { font-size: .82rem; color: var(--ink-3); }

.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.creds li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--ink-2);
}
.creds li:last-child { border-bottom: 1px solid var(--line); }
.creds li::before {
  content: ''; width: 7px; height: 7px; margin-top: .55em;
  background: var(--turq); border-radius: 1px; transform: rotate(45deg);
}

/* ---------------------------------------------------------- figures ----- */
/* Market data from the plan. Set as a ledger column, not as stat cards. */

.figures { display: grid; gap: 0; }
.figure {
  display: grid; grid-template-columns: minmax(0,auto) 1fr;
  gap: 8px clamp(18px, 3vw, 40px); align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0; border-top: 1px solid var(--line);
}
.figure:last-child { border-bottom: 1px solid var(--line); }
.figure__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 600;
  letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.figure__t { font-size: .96rem; color: var(--ink-2); }
.figure__src {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .64rem; color: var(--ink-3); letter-spacing: .04em;
}

/* ---------------------------------------------------------- pricing ----- */

/* Four tiers: 4 / 2 / 1, never 3 + a stretched orphan. */
.tiers {
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 620px)  { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The currency switch. Uzbek owners pay in soum; the dollar figure is only a
   planning reference, so it is a toggle rather than a second line under every
   price. There is no monthly/annual switch because the business plan defines
   no annual price, and inventing one would be inventing a discount. */
.switch {
  display: inline-flex; gap: 3px; padding: 4px;
  border-radius: 100px; background: var(--line-2);
  border: 1px solid var(--line);
}
.switch__opt {
  border: 0; cursor: pointer; padding: 9px 20px; min-height: 40px;
  border-radius: 100px; background: transparent;
  font-family: var(--body); font-size: .88rem; font-weight: 600;
  color: var(--ink-3);
  transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.switch__opt:hover { color: var(--ink); }
.switch__opt.is-active {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(10,37,48,.1), 0 4px 10px -6px rgba(10,37,48,.3);
}
.switch__note {
  margin: 12px 0 0; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .05em; color: var(--ink-3);
}

/* Only one currency shows at a time. The toggle sets the attribute; the rest
   is CSS, so nothing has to walk the DOM per price. */
.tiers[data-cur="uzs"] [data-usd],
.tiers[data-cur="usd"] [data-uzs] { display: none; }

.tier {
  position: relative;
  background-color: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px 28px;
  display: flex; flex-direction: column; height: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.tier--lead { border-color: var(--turq); box-shadow: var(--shadow-2); }
.tier__flag {
  position: absolute; top: -11px; left: 26px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, hsl(176 80% 38%), hsl(176 84% 30%));
  border-radius: 100px; padding: 4px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

.tier__name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.tier__who { font-size: .87rem; color: var(--ink-3); margin: 6px 0 20px; min-height: 2.6em; }

.tier__price {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.7vw, 2rem); font-weight: 600;
  color: var(--ink); letter-spacing: -.03em; line-height: 1.15;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
}
.tier__price small { font-size: .72rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

.tier .btn { margin-top: 22px; width: 100%; }

.tier__feats { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; flex: 1; }
.tier__feats li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  font-size: .91rem; color: var(--ink-2); line-height: 1.5;
}
.tier__feats svg { width: 16px; height: 16px; margin-top: .18em; flex: none; color: var(--turq); }
.tier__feats li.is-off { color: var(--ink-3); }
.tier__feats li.is-off svg { color: var(--line); }

.tier__note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .63rem; letter-spacing: .05em;
  color: var(--ink-3); text-align: center;
}

/* --------------------------------------------------------------- faq ---- */

.faq { display: grid; max-width: 860px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: clamp(1.02rem, 1.5vw, 1.14rem); font-weight: 600;
  letter-spacing: -.012em; color: var(--ink); text-align: left; line-height: 1.35;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--turq-d); }
.faq__q i {
  flex: none; width: 22px; height: 22px; margin-top: 2px; position: relative;
}
.faq__q i::before, .faq__q i::after {
  content: ''; position: absolute; inset: 50% 2px auto; height: 1.6px;
  background: var(--turq); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.faq__q i::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] i::after { transform: rotate(0deg); }

.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height .42s var(--ease);
}
.faq__a > div { padding: 0 44px 24px 0; color: var(--ink-2); font-size: .97rem; }

/* ------------------------------------------------------------- contact -- */

.cta {
  background-color: var(--ink); color: #fff;
  border-radius: var(--r-lg); padding: clamp(36px, 5vw, 62px);
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(28px, 4vw, 54px); align-items: center;
  position: relative; overflow: hidden;
}
.cta::after {
  /* the same girih motif, this time as a watermark on the dark plate */
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 300px; height: 300px; opacity: .07;
  background: var(--tile-url) center/contain no-repeat;
}
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { color: rgba(255,255,255,.72); font-size: 1rem; }
.cta .btn--primary { background: var(--turq); }
.cta__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cta__list a {
  display: flex; align-items: baseline; gap: 12px;
  color: #fff; text-decoration: none; font-size: .96rem;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.16);
  transition: color .2s var(--ease);
}
.cta__list a:hover { color: var(--turq); }
.cta__list b {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5); min-width: 8ch;
}

/* -------------------------------------------------------------- footer -- */

.footer {
  padding: clamp(48px, 6vw, 80px) 0 34px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr);
  gap: clamp(30px, 5vw, 60px); padding-bottom: 38px;
}
.footer__pitch { color: var(--ink-2); font-size: .95rem; margin: 16px 0 10px; max-width: 34ch; }
.footer__meta { font-size: .72rem; color: var(--ink-3); letter-spacing: .04em; }

.footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
.footer__col { display: grid; align-content: start; gap: 11px; }
.footer__head {
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin: 0 0 4px;
}
.footer__col a {
  font-size: .92rem; color: var(--ink-2); text-decoration: none;
  transition: color .18s var(--ease);
}
.footer__col a:hover { color: var(--turq-d); }

.footer__disclaimer {
  padding: 24px 0; margin: 0;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-3); line-height: 1.62; max-width: 92ch;
}
.footer__base {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
}

/* ---------------------------------------------------------------- prose - */
/* Privacy and terms. One column, generous measure, ledger rules between
   clauses so a long document still reads as a set of postings. */

.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: 46px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 32px; }
.prose p, .prose li { color: var(--ink-2); font-size: .98rem; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.05em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--turq-d); }
.prose__stamp {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--ink-3); margin-top: 8px;
}
.prose__flag {
  background: var(--saffron-wash); border-radius: var(--r);
  padding: 18px 20px; margin: 26px 0 0;
  font-size: .9rem; color: #6B4A08; line-height: 1.6;
}
.prose__flag b { color: #4A3305; }

/* ================================================== reveal choreography == */
/* Content arrives along the ledger axis: it slides in from the side it sits
   on and settles, with a short blur so it reads as coming into focus rather
   than sliding on rails. Nothing is hidden until JS confirms it can reveal
   it again — a failed observer must never leave the page blank. */

.reveal-ready .reveal {
  opacity: 0;
  transform: translate3d(var(--dx, 0), var(--dy, 26px), 0);
  filter: blur(var(--blur, 0px));
  transition:
    opacity .82s var(--ease),
    transform .82s var(--ease),
    filter .82s var(--ease);
  will-change: opacity, transform;
}
.reveal-ready .reveal.is-visible {
  opacity: 1; transform: none; filter: blur(0);
}

/* Headings write themselves on, word by word. */
.reveal-ready .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .5s var(--ease), transform .55s var(--ease);
  transition-delay: var(--wd, 0ms);
}
.reveal-ready .reveal.is-visible .w { opacity: 1; transform: none; }


/* A ruled line that draws itself across before the entries under it appear. */
.reveal-ready .ruled { position: relative; }
.reveal-ready .ruled::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--turq); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}
.reveal-ready .ruled.is-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal,
  .reveal-ready .reveal.is-visible,
  .reveal-ready .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .ambient__tile, .ambient__glyph, .ambient__rules { animation: none !important; }
  .plate img { transition: none; }
  .btn:hover, .acct:hover { transform: none; }
}

/* ================================================================ mobile= */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .founder { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }

  .nav {
    position: absolute; top: calc(100% + 10px); left: var(--gut); right: var(--gut);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-2);
    padding: 10px; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 12px 14px; }
  .navtoggle { display: grid; }
  .masthead__pill { background: rgba(255,255,255,.86); border-color: var(--line); }

  /* The ledger split collapses to a single column: the centre rule cannot
     survive a narrow screen, so the left column stops trying to right-align
     against a rule that is no longer there. */
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split__rule { display: none; }
  .split__side--l { text-align: left; }
  .split__side--l .entry__head { justify-content: flex-start; }
  .split__side--l .split__label { text-align: left; }

  .plate--a, .plate--b, .plate--c, .plate--d { grid-column: span 12; margin-top: 0; }
  .plate--a, .plate--d { aspect-ratio: 4/3; }

  /* Card rows become swipeable on a phone. Six stacked cards is a very long
     column of text; six cards you can thumb through is a row you can skim. The
     next card peeks past the edge, which is the only affordance needed. */
  .accounts, .personas {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* break the gutter so the row runs to both screen edges */
    margin-inline: calc(var(--gut) * -1);
    padding: 4px var(--gut) 16px;
  }
  .accounts::-webkit-scrollbar, .personas::-webkit-scrollbar { display: none; }
  .accounts > *, .personas > * { scroll-snap-align: start; }

  .hero__grid { gap: 26px; }

  /* Fewer, softer masses on a phone: five blurred layers is real GPU work on a
     mid-range device, and at this width they overlap into mush anyway. */
  .aurora__blob--3, .aurora__blob--5 { display: none; }
  .aurora__blob { filter: blur(56px); }

  /* The primary action carries the width; the secondary becomes a quiet link
     beside it rather than a second full-width slab. */
  .hero__cta { gap: 10px 18px; align-items: baseline; }
  .hero__cta .btn--ghost {
    border: 0; padding: 8px 0; text-decoration: underline;
    text-underline-offset: 4px; color: var(--ink-2);
  }

  .step { grid-template-columns: 1fr; gap: 6px; }
  .figure { grid-template-columns: 1fr; }
  .cta { padding: 30px 22px; }
  .faq__a > div { padding-right: 0; }

  /* Two columns of questions, not three: at this width a third column leaves
     each card about twenty characters wide. */
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 440px; }
  .wall__col:nth-child(3) { display: none; }

  /* The patterns are decoration and they tile at a desktop scale. Tightening
     them keeps them from reading as a texture over the text. */
  .bay--grid::before { background-size: 34px 34px; }
  .bay--dots::before { background-size: 16px 16px; }
}

@media (max-width: 620px) {
  /* One column on a phone. Two 45%-wide cards of body copy is unreadable. */
  .wall { grid-template-columns: 1fr; height: 400px; }
  .wall__col:nth-child(2) { display: none; }

  /* Full-width, thumb-sized actions. */
  .hero__cta .btn--primary { width: 100%; }
  .switch { display: flex; width: 100%; }
  .switch__opt { flex: 1; }
  .tier { padding: 26px 20px 24px; }
  .tier__who { min-height: 0; }
}

/* The ledger is the tallest thing on the page. Left alone it runs past 1000px
   on a phone — more than a full screen for one card — so every part of it
   tightens up here. It stays a working instrument, just a denser one. */
@media (max-width: 620px) {
  .ledger__inputs, .ledger__head, .row, .ledger__verdict, .ledger__foot { padding-inline: 16px; }
  .rail { margin-inline: 16px; }

  .ledger__inputs { gap: 13px; padding-top: 15px; padding-bottom: 2px; }
  .field label { margin-bottom: 6px; font-size: .8rem; }
  .field input[type="range"] { height: 20px; }
  .rail { padding: 11px 0 13px; }

  /* Two columns, not one. Stacking the figure under the name added a line to
     every row and cost more height than the narrow screen saved. */
  .row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px; }
  .row__name { font-size: .88rem; }
  .row__rate { font-size: .62rem; }
  .row__fig { font-size: .9rem; }
  .row__fig small { font-size: .58rem; white-space: normal; }
  .row.is-best .row__name::after { display: none; }

  .ledger__verdict { padding: 14px 16px 16px; }
  .ledger__verdict p { font-size: .87rem; margin-bottom: 7px; }
  .ledger__foot { padding: 11px 16px 14px; font-size: .71rem; }
}