/* Dubinest — public showcase (#69). GENERATED by scripts/build-apex-page.py. */
:root{
  --navy:#1B3B48;        /* the field */
  --navy-deep:#10262F;   /* base of the field */
  --navy-line:#2C5462;   /* hairline on navy */
  --paper:#F6F4F0;       /* beige, ONLY where a document sits */
  --paper-edge:#E4E0D8;
  --ink:#1A1A2E;
  --ink-soft:#55556A;
  --copper:#B8814F;      /* the letterhead rule, and almost nothing else */
  --teal:#2A9D8F;        /* one functional marker */
  --measure:62ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-deep);color:var(--paper);
  font-family:var(--font-body);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h1,h2{font-family:var(--font-display)}
h1{font-size:clamp(2.5rem,6vw,4.3rem);line-height:1.02}
h2{font-size:clamp(1.85rem,3.5vw,2.65rem);line-height:1.12}
h3{font-family:var(--font-body);font-size:1.12rem;letter-spacing:0}
p{margin:0 0 1rem;max-width:var(--measure)}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
.wrap{width:min(1120px,calc(100% - 2.5rem));margin-inline:auto}
/* Reachable by a screen reader, invisible on screen. NOT the `hidden` attribute, which
   removes the element from the accessibility tree — an input whose only label is
   `hidden` is an unlabelled input. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.band{padding-block:clamp(4rem,9vw,7.5rem)}
/* A section holding one paragraph must not be given the same air as one holding four
   stages. One constant for every band reads as a template, not as a decision. */
.band-tight{padding-block:clamp(2.8rem,5vw,4.2rem)}
.band-paper{background:var(--paper);color:var(--ink)}
.band-paper p{color:var(--ink-soft)}

.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 1.6rem;
  flex-wrap:wrap;padding-block:1.6rem}
.wordmark{font-family:var(--font-display);font-size:1.32rem;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem}
.mark{width:30px;height:30px;flex:0 0 auto;color:var(--copper)}
.mast-right{display:flex;align-items:baseline;gap:1.15rem;flex-wrap:wrap;font-size:.92rem}
.langs{display:flex;align-items:baseline;gap:1.15rem;flex-wrap:wrap}
.mast-right a{color:#A9BEC6;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.mast-right a:hover{border-bottom-color:var(--copper);color:var(--paper)}
.mast-right [aria-current]{color:var(--paper);border-bottom-color:var(--navy-line)}
.mast-right .signin{color:var(--paper);margin-inline-start:1.1rem;padding-inline-start:1.5rem;
  border-inline-start:1px solid var(--navy-line);border-bottom:0}
.mast-right .signin:hover{border-bottom:0;text-decoration:underline;text-underline-offset:4px}

.hero{display:grid;grid-template-columns:1fr;gap:clamp(3rem,6vw,4.5rem);align-items:center;
  padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,6vw,5rem)}
@media(min-width:940px){.hero{grid-template-columns:1.02fr .98fr}}
.lede{font-size:1.15rem;color:#C8D6DB;margin-block-start:1.6rem}
.actions{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-block-start:2.2rem}
.btn{display:inline-block;background:var(--paper);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:1rem;padding:.86rem 1.5rem;border-radius:3px;transition:background .15s ease}
.btn:hover{background:#fff}
.link-plain{color:#C8D6DB;text-decoration:none;border-bottom:1px solid var(--navy-line);padding-bottom:3px}
.link-plain:hover{border-bottom-color:var(--copper);color:var(--paper)}

/* the letterhead — the one bold element on the page */
.sheet{background:var(--paper);color:var(--ink);border-radius:2px;padding:2.1rem 2.1rem 1.7rem;
  box-shadow:0 1px 0 var(--paper-edge),0 26px 60px -28px rgba(0,0,0,.75);
  max-width:430px;margin-inline:auto;width:100%}
.sheet-name{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--ink);
  background:rgba(184,129,79,.09);border:0;padding:.28rem .5rem .42rem;width:100%;
  border-bottom:2px solid var(--copper);text-align:inherit;border-radius:2px 2px 0 0;
  transition:background .15s ease,border-bottom-width .15s ease}
.sheet-name:hover{background:rgba(184,129,79,.15);cursor:text}
.sheet-name:focus{outline:none;background:rgba(184,129,79,.15);
  border-bottom-width:3px;padding-bottom:calc(.42rem - 1px)}
.sheet-hint{font-size:.82rem;color:#8A867E;margin:.55rem 0 0;text-wrap:pretty}
.sheet-hint em{font-style:normal;color:var(--copper);font-weight:500;white-space:nowrap}
.sheet-body{margin-block-start:1.5rem;font-size:.9rem;color:var(--ink-soft)}
.sheet-row{display:flex;justify-content:space-between;gap:1rem;padding-block:.42rem;
  border-bottom:1px solid var(--paper-edge)}
.sheet-row:last-of-type{border-bottom:0}
.sheet-row span:last-child{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet-total{display:flex;justify-content:space-between;margin-block-start:1rem;padding-block-start:.85rem;
  border-top:2px solid var(--ink);font-weight:600;color:var(--ink);font-size:1rem}
.sheet-foot{margin-block-start:1.4rem;font-size:.76rem;color:#8A867E;line-height:1.5}

/* the file's life — a real sequence, so a rule and stages, not cards */
.stages{margin-block-start:3.2rem;border-inline-start:1px solid var(--paper-edge)}
.stage{position:relative;padding-inline-start:2.2rem;padding-block-end:2.6rem}
.stage:last-child{padding-block-end:0}
.stage::before{content:"";position:absolute;inset-inline-start:-4.5px;top:.62rem;width:8px;height:8px;
  border-radius:50%;background:var(--copper)}
.stage h3{margin-block-end:.35rem}
.stage p{margin:0;font-size:.98rem}

.split{display:grid;gap:2.6rem;margin-block-start:2.8rem}
/* A grid track cannot shrink below its item's min-content, and one <li> carries an unbreakable
   host name (votre-cabinet.firm.dubinest.com). In FR and RU that token alone made the column
   432px / 418px wide inside a 390px viewport and the whole page scrolled sideways — measured on
   the DEPLOYED page, and absent in EN, AR and ZH, whose prefixes are shorter.
   `overflow-wrap:anywhere` is the value that also LOWERS the min-content contribution;
   `break-word` would wrap the text and leave the track exactly as wide.
   ⚠️ That fix shipped on 2026-09-21 and NOBODY who had visited before saw it: this file is
   served `Cache-Control: immutable, 1y` under an UNHASHED name, so returning browsers kept the
   old copy (measured 2026-09-22: the cached sheet had no `anywhere`, the fresh one did). The
   entrypoint now stamps a content hash on the <link>/<script> URLs — see docker-entrypoint.sh. */
.split>div{min-width:0}
.split code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(26,26,46,.06);padding:.1em .35em;border-radius:3px;overflow-wrap:anywhere}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr;gap:4rem}}
.split h3{margin-block-end:1rem}
.split ul{margin:0;padding:0;list-style:none}
/* Block, NOT flex. As a flex container the <li> split its own sentence into three items — the
   text before the host name, the <code>, the text after — laid side by side and each wrapping
   inside its own box: "The space your clients log into —" | "your-firm.…" | ", their entry
   point" as three stacked columns on a phone. Inline flow lets the sentence wrap like prose and
   the <code> break anywhere it must (overflow-wrap below). The checkmark is absolutely
   positioned in the padding instead of being a flex item. */
.split li{padding-block:.55rem;padding-inline-start:1.5rem;position:relative;
  border-bottom:1px solid var(--paper-edge);font-size:1rem}
.split li:last-child{border-bottom:0}
.split li::before{content:"";position:absolute;inset-inline-start:.15rem;top:1.05rem;display:block}
.addr-note{margin-block-start:1.1rem;font-size:.95rem}
.addr-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(26,26,46,.06);padding:.1em .35em;border-radius:3px;overflow-wrap:anywhere}
/* ⚠️ PHYSICAL border-left, not border-inline-start. A checkmark is a glyph, not a
   directional affordance: under dir=rtl the logical property flips to the right edge and
   the rotated shape stops reading as a check — it becomes a chevron. Logical properties
   are right for layout, wrong for iconography. */
.yes li::before{width:13px;height:7px;border-left:2px solid var(--teal);
  border-bottom:2px solid var(--teal);transform:rotate(-45deg)}

/* Five scripts, set in their own writing systems — the claim and its evidence are the
   same line. aria-hidden: the sentence above already says it, and a screen reader does
   not need the names read twice. */
.scripts{display:flex;flex-wrap:wrap;gap:.9rem 2.2rem;margin-block-start:1rem;max-width:none;
  font-size:1.3rem;color:var(--ink-soft);padding-block-end:.4rem}
.scripts span{font-family:system-ui,'Segoe UI',sans-serif}

/* Four things the firm does AT ONCE — hairline-divided columns, deliberately not the
   stages' single ordered rule and not a card kit. The device carries the meaning:
   side by side, not one after the other. */
.parallel{display:grid;gap:2rem;margin-block-start:2.8rem}
@media(min-width:760px){.parallel{grid-template-columns:repeat(2,1fr);gap:2.4rem 3rem}}
@media(min-width:1080px){.parallel{grid-template-columns:repeat(4,1fr);gap:2.4rem}}
.parallel > div{padding-inline-start:1.4rem;border-inline-start:1px solid var(--navy-line)}
.parallel h3{margin-block-end:.45rem}
.parallel p{margin:0;font-size:.96rem;color:#C8D6DB;max-width:none}
.parallel .note{display:block;margin-block-start:.6rem;font-size:.85rem;color:var(--copper)}

.facts{margin:2.4rem 0 0;padding:0;list-style:none;max-width:70ch}
.facts li{padding-block:1rem;border-top:1px solid var(--navy-line);font-size:1rem;color:#C8D6DB}
.facts li b{display:block;color:var(--paper);font-weight:600;margin-block-end:.15rem}

.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.6rem;margin-block-start:1.8rem}
.amount{font-family:var(--font-display);font-size:clamp(2.3rem,5vw,3.3rem);font-weight:600;line-height:1}
.per{color:var(--ink-soft);font-size:1.05rem}
.price-note{color:var(--ink-soft);font-size:.96rem;margin-block-start:1.2rem}

.mailto{margin-block-start:1.6rem;font-size:clamp(1.15rem,2.2vw,1.5rem)}
.mailto a{color:var(--paper);text-decoration:none;border-bottom:2px solid var(--copper);padding-bottom:4px}
.mailto a:hover{border-bottom-color:var(--paper)}

footer{border-top:1px solid var(--navy-line);padding-block:2.6rem 3.4rem;font-size:.92rem;color:#A9BEC6}
footer nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-block-start:1rem}
footer a{color:#C8D6DB;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
footer a:hover{border-bottom-color:var(--copper)}
.disclaimer{margin-block-start:1.6rem;color:#7F98A2;max-width:var(--measure)}

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