/* idem UNIVERSAL · css/structure.css · the structure and the scenes (4 Oct 2026). Built from site-build/structure-css/*.css — edit those. */
/* ============ the structure preview (2 Oct 2026): the new parts, in the site's own hand ============
   The site's two style files load first and are not changed. Everything here is new: the menu of four offers, the section
   menu of an offer page, the four doors, the cards with a scene, the player, the lanes, and the small scenes (next file).
   One spacing scale, on a 4 px grid. The site's own values sit on it (20, 24, 28, 56, 128). */
:root{
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp7:28px; --sp8:32px; --sp10:40px; --sp12:48px; --sp14:56px; --sp18:72px; --sp24:96px; --sp32:128px;
}
::selection{background:rgba(225,6,0,.55);color:#fff}

/* ---------- the menu: the four offers, then the three pages about us ---------- */
.nav a{padding:8px 12px;white-space:nowrap}
/* Romanian and Italian: the words and the header's key are longer. Measured 4 Oct 2026 with 12 px at the sides: the menu
   needs 564 px and has 540 (RO), needs 608 and has 587 (IT); at 1181 px it has 19 less. With 8 px it needs 56 less. */
html:lang(ro) .nav a,html:lang(it) .nav a{padding:8px}
.nav-sep{width:1px;margin:7px 4px;background:var(--line2)}
.lkey[aria-disabled="true"]{opacity:.45;cursor:default}
@media (max-width:1180px){.nav{display:none} .menu-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:transparent} .menu-btn .i{width:20px;height:20px;fill:none;stroke:var(--fg);stroke-width:1.6}}

/* ---------- the preview mark, bottom left (not part of the site) ---------- */
.pv-bar{position:fixed;left:16px;bottom:16px;z-index:55;display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(10,12,16,.82);backdrop-filter:blur(12px);font-size:12px;color:var(--mut);letter-spacing:.02em;transition:border-color .3s,color .3s}
.pv-bar i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--redg)}
.pv-bar b{font-weight:500;color:var(--fg)}
.pv-bar:hover{border-color:var(--fg);color:var(--fg)}
@media (max-width:860px){.pv-bar{left:12px;bottom:12px;height:32px;font-size:11px}}

/* ---------- the section marks of an offer page (Leonard, 3 Oct 2026: "clever, not disturbing, takes nothing from the screen") ----------
   Short lines at the left edge of the window, one per section. The line of the section in view is longer and white, and the
   section's own small heading already says its name on the page. The pointer over the lines, a tap on them, or a keyboard
   focus shows every name; a name is a link. The lines stand in the page's own margin and are out of the flow: no row of the
   screen is taken and no text is covered. On a window of 1600 px or more the margin is empty: the name in view stays, and the
   lines stand beside the text column, not far away at the edge of a very wide screen.
   It was a pill of six words stuck under the header; headings ran under it. */
.secnav{position:fixed;left:0;top:50%;z-index:45;transform:translateY(-50%);transition:opacity .4s var(--ease),visibility 0s}
.secnav.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s .4s}
.secnav ol{list-style:none;margin:0;padding:0}
.secnav a{position:relative;display:flex;align-items:center;width:24px;height:32px;color:var(--mut)}
.secnav a i{display:block;width:8px;height:2px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.26);transition:width .35s var(--ease),background .35s}
.secnav a:hover i{background:rgba(255,255,255,.62)}
.secnav a.on i{width:16px;background:var(--fg)}
.secnav a span{position:absolute;left:100%;top:50%;transform:translate(-6px,-50%);padding:6px 13px;border-radius:999px;border:1px solid var(--line2);background:rgba(10,12,16,.88);backdrop-filter:blur(12px) saturate(1.2);font-size:13px;line-height:1.2;white-space:nowrap;color:#d5d8dd;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),color .25s,border-color .25s}
.secnav a.on span{color:var(--fg)}
.secnav:hover a span,.secnav.open a span,.secnav:focus-within a span{opacity:1;transform:translate(0,-50%)}
.secnav:hover a span,.secnav.open a span,.secnav:focus-within a span{pointer-events:auto}
.secnav a:hover span{color:var(--fg);border-color:rgba(255,255,255,.4)}
@media (min-width:1280px){
  .secnav a{width:36px;height:28px} .secnav a i{width:14px} .secnav a:hover i{width:20px} .secnav a.on i{width:28px}
}
@media (min-width:1600px){
  .secnav{left:max(0px,calc(50vw - 824px))} .secnav a i{border-radius:2px}
  .secnav a{width:44px} .secnav a i{width:18px} .secnav a:hover i{width:26px} .secnav a.on i{width:36px}
  .secnav a.on span{opacity:1;transform:translate(0,-50%);pointer-events:auto}
  .secnav:not(:hover):not(.open):not(:focus-within) a.on:not(:hover) span{border-color:transparent;background:none;backdrop-filter:none;padding-left:0}
}
main>section[id]{scroll-margin-top:72px}
/* found while measuring (older than today, on the live site too): at 1024 px the ring and the book reach past the window */
@media (max-width:1180px){#work,.book-s{overflow-x:clip}}

/* ---------- the hero of an offer page: the words, then the stage ---------- */
.ohero .wrap{max-width:1200px}
.ohero h1,.ohero .sub,.ohero .disc{margin-left:auto;margin-right:auto}
.ohero h1{max-width:900px}
.ohero-stage{max-width:960px;margin:56px auto 0}
.ohero-stage .mini.l.hero{height:440px}
.mini.l.hero .mn-win{width:min(100%,680px)}
.mini.l.hero .mn-in:has(.mn-pipe){zoom:1.25}
@media (max-width:700px){.mini.l.hero .mn-in:has(.mn-pipe){zoom:1}}
@media (max-width:860px){.ohero-stage{margin-top:40px} .ohero-stage .mini.l.hero{height:400px}}
@media (max-width:700px){.ohero-stage .mini.l.hero{height:380px}}

/* ---------- the four doors on the home page ---------- */
.o-doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card.o-door{display:flex;flex-direction:column;padding:22px;min-width:0}
.o-door .mini{margin:0 0 22px}
.o-door .tag{align-self:flex-start;margin:0 0 14px}
.o-door h3{display:block;margin:0 0 8px;font-size:26px;line-height:1.2;letter-spacing:-.015em}
.o-door p{margin:0}
.o-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto;padding-top:18px}
.o-foot .o-from{display:block;margin-top:18px;font-weight:500;color:var(--fg)}
.o-foot a.more::after{content:"\00a0→"}
@media (max-width:860px){.o-doors{grid-template-columns:1fr} .o-door h3{font-size:23px}}

/* ---------- a card with its scene: the scene first, then the card's own words.
   The cards of a row share one row grid (the card rule, 1 Oct 2026): scene · number or tag · name · text · small line ---------- */
.card.mc{padding:22px 22px 24px;min-width:0}
.card.mc>.mini{margin:0 0 18px}
.card.mc .mc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
.card.mc .mc-top:not(:empty){margin-bottom:12px;min-height:26px}
.card.mc .mc-top .n{display:inline-grid;place-items:center;min-width:36px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--fg);margin:0;font-variant-numeric:tabular-nums}
.card.mc p:empty{display:none}
.card.mc h3{display:block;margin:0 0 8px;font-size:20px;line-height:1.25}
.card.mc p{margin:0}
.card.mc p.fine{margin-top:12px;font-size:13px;color:var(--mut)}
.grid.g4.parts{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid.g4.parts>.card.mc{padding:20px 20px 22px}
.grid>.card.mc{min-width:0}
@media (min-width:600px){
  .grid:has(>.card.mc){row-gap:0;margin-bottom:-24px}
  .grid>.card.mc{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;margin-bottom:24px;align-content:start}
  .grid>.card.mc>*{min-height:0}
  .grid>.card.mc>.mini{grid-row:1} .grid>.card.mc>.mc-top{grid-row:2;align-self:start}
  .grid>.card.mc>h3{grid-row:3} .grid>.card.mc>p{grid-row:4} .grid>.card.mc>p.fine{grid-row:5;display:block}
  .grid>.card.mc>p.fine:empty{display:block;margin:0}
}
@media (max-width:1180px){.grid.g4.parts{grid-template-columns:1fr 1fr}}
@media (max-width:1024px){.grid.g3:has(>.card.mc){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.grid.g4.parts,.grid.g3:has(>.card.mc),.grid.g2:has(>.card.mc){grid-template-columns:1fr}}
/* a label and a line between the groups of a section (the "We offer" rule of the upgrade section) */
.g-rule{display:flex;align-items:center;gap:16px;margin:64px 0 24px}
.g-rule:first-of-type{margin-top:0}
.g-rule .kicker{margin:0;white-space:nowrap}
.g-line{flex:1 1 0;min-width:24px;height:1px;background:var(--line)}
.sec-head + .g-rule{margin-top:0}
.own-ex{margin-top:28px}
/* the questions keep the site's own two-column cards */
.faqs .card h3{font-size:20px}
/* the heading block of a section (the site centres it on sub-pages; the rule lines need the full width) */
.try-box{max-width:760px;margin:40px auto 0;text-align:left}
.trial-wrap{margin-top:40px}
.trial-wrap .form{max-width:640px}

/* ---------- the player: a list of steps, one stage. It runs once by itself, with a pause key ---------- */
.player{position:relative}
.player-steps{list-style:none;margin:0;padding:0}
.pstep-t{border-top:1px solid var(--line)}
.pstep:first-child .pstep-t{border-top:0}
.pstep-h{position:relative;display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:18px 0;background:none;border:0;text-align:left;color:var(--mut);font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.01em;cursor:pointer;transition:color .3s}
.pstep-h .n{display:inline-grid;place-items:center;min-width:36px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--fg);font-variant-numeric:tabular-nums;flex:none}
.pstep-h .side{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);flex:none}
.pstep-h .t{flex:1;min-width:0}
.pstep-h:hover,.pstep.is-on .pstep-h{color:var(--fg)}
.pstep-h:focus-visible{outline:2px solid var(--fg);outline-offset:-2px;border-radius:8px}
.pstep-h .pb{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:linear-gradient(90deg,var(--red),var(--green));transform:scaleX(0);transform-origin:left;transition:none}
.pstep.is-on .pb{transform:scaleX(1);transition:transform var(--pdur,320ms) linear}
.pstep.was .pb{transform:scaleX(1);background:var(--green);opacity:.45}
.pstep-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.pstep-b>p{min-height:0;overflow:hidden;margin:0;padding:0 0 0 50px;color:var(--txt-2);font-size:16px;line-height:1.6;opacity:0;transition:opacity .35s}
.pstep.is-on .pstep-b{grid-template-rows:1fr}
.pstep.is-on .pstep-b>p{padding-bottom:20px;opacity:1;transition-delay:.1s}
.pstep-m{margin:0}
.player-ctl-wrap{display:flex;align-items:center;gap:14px;padding-top:22px}
.player-ctl{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--fg);font-size:13px;font-weight:500;cursor:pointer;transition:background .25s,border-color .25s}
.player-ctl:hover{background:var(--sur2);border-color:rgba(255,255,255,.24)}
.player-ctl .i{width:14px;height:14px}
.player-ctl .ipa,.player-ctl .ir{display:none}
.player-ctl[data-state="auto"] .ip{display:none} .player-ctl[data-state="auto"] .ipa{display:block}
.player-ctl[data-state="end"] .ip{display:none} .player-ctl[data-state="end"] .ir{display:block}
.player-hint{font-size:12px;color:var(--dim)}
/* wide screens with scripts: the list on the left, one stage on the right, the active step open */
@media (min-width:961px){
  html.mj .player{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;row-gap:0;align-items:start}
  html.mj .player-steps,html.mj .pstep{display:contents}
  html.mj .pstep-t{grid-column:1}
  html.mj .pstep-m{grid-column:2;grid-row:1/span 40;position:sticky;top:148px;align-self:start;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
  html.mj .pstep.is-on .pstep-m{opacity:1;visibility:visible;transition-delay:0s}
  html.mj .player-ctl-wrap{grid-column:1}
}
/* narrow screens, or no script: every step with its own stage, all open */
@media (max-width:960px){
  .pstep-h{cursor:default} .pstep-h .pb{display:none}
  .pstep-b{grid-template-rows:1fr} .pstep-b>p{opacity:1;padding-bottom:16px}
  .pstep-m{margin:0 0 28px} .pstep-m .mini.l{height:344px} .pstep-m .mini.l .mn-in{zoom:1}
  .player-ctl-wrap{display:none}
}
html:not(.mj) .pstep-b{grid-template-rows:1fr} html:not(.mj) .pstep-b>p{opacity:1;padding-bottom:16px} html:not(.mj) .pstep-m{margin:0 0 28px} html:not(.mj) .player-ctl-wrap{display:none}

/* ---------- the lanes: three keys, one stage (the AI systems hero) ---------- */
.lanes{max-width:960px;margin:56px auto 0}
.lane-keys{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.lane-key{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.02);color:var(--txt-2);font-size:14px;font-weight:500;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.lane-key i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,box-shadow .3s}
.lane-key:hover{background:var(--sur2);color:var(--fg)}
.lane-key.on{background:var(--sur2);border-color:rgba(255,255,255,.28);color:var(--fg)}
.lane-key.on i{background:var(--fg);box-shadow:0 0 8px rgba(255,255,255,.5)}
.lane-key:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.lane-pane .mini{height:400px}
.lane-cap{max-width:640px;margin:18px auto 0;text-align:center;font-size:15px;color:var(--mut)}
@media (max-width:860px){.lanes{margin-top:40px} .lane-pane .mini{height:400px} .lane-key{height:36px;font-size:13px;padding:0 13px 0 10px}}
@media (max-width:700px){.lane-pane .mini{height:380px}}
/* ---------- the reveal of the new blocks (the site's .rv is for its own sections) ---------- */
/* 15 Oct 2026 (plan S1-07): transform only, never opacity 0 (a one-shot picture or a crawler must see every block) */
html.mj .rise{transform:translate3d(0,28px,0);transition:transform .7s var(--ease)}
html.mj .rise.in{opacity:1;transform:none}
html.mj .grid>.rise:nth-child(2){transition-delay:.08s} html.mj .grid>.rise:nth-child(3){transition-delay:.16s} html.mj .grid>.rise:nth-child(4){transition-delay:.24s}
html.mj .o-doors>.rise:nth-child(2){transition-delay:.1s} html.mj .o-doors>.rise:nth-child(3){transition-delay:.2s} html.mj .o-doors>.rise:nth-child(4){transition-delay:.3s}
html.m-reduce .rise{opacity:1!important;transform:none!important}

/* ============ the small scene (a "mini"): the job pictures of the home page, made live ============
   The look is the eight job pictures of 21 Sep 2026 (site-build/job-shots.mjs): the assistant's own bubbles, chips, tap
   keys and the tag with its dot. Green dot = finished. Red dot = it waits for you. Here they are HTML, so they can play.
   Default (no script) = the finished picture. js/minis.js arms a scene (.arm), then wakes its parts step by step:
   [data-s="n"] gets .s-on at step n (it appears); [data-at="n"] gets .a-on at step n (it changes state).
   A scene that ends on a red key waits for the visitor's own tap (.tapd): nothing goes without your tap, here too.
   Text inside a scene is never under 11 px. Only opacity and transform move. */
.mini{position:relative;display:block;height:184px;border-radius:var(--rs);border:1px solid var(--line);background:#07080b;overflow:hidden;isolation:isolate;container-type:inline-size;
  font-size:12px;line-height:1.4;color:var(--txt-2);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .5s}
.mini.m{height:300px;font-size:13px}
.mini.l{height:340px;font-size:13px}
.mini.l.hero{height:460px}
.mini:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.mini b{font-weight:600;color:var(--fg)}
.mn-in{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:12px 14px 10px;min-width:0}
.mn-in.has-foot{bottom:34px}
.mini.m .mn-in{padding:16px 18px 12px;gap:10px;justify-content:center} .mini.l .mn-in{padding:20px 20px 14px;gap:10px;justify-content:center;zoom:1.2}
.mini.l.hero .mn-in{zoom:1.1}
.mini.m .mn-in.has-foot,.mini.l .mn-in.has-foot{bottom:40px}
/* the foot: what the picture shows, and its state */
.mn-foot{position:absolute;left:0;right:0;bottom:0;height:34px;padding:0 10px 4px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini.m .mn-foot,.mini.l .mn-foot{height:40px;padding:0 14px 6px 18px}
.mn-ft{flex:1;min-width:0;font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.45);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);white-space:nowrap;flex:none}
.mn-st i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--greeng);transition:background .4s,box-shadow .4s,opacity .4s;flex:none}
.mn-st b{font-weight:500;color:var(--mut);transition:opacity .35s}
.mn-st .d{display:none}
.mn-st.wait i,.mn-st.bad i{background:var(--red);box-shadow:0 0 6px var(--redg)}
.mini.arm .mn-st[data-at]:not(.a-on) i{background:var(--red);box-shadow:none;opacity:.5}
.mini.arm .mn-st[data-at]:not(.a-on) b{opacity:.4}
.mini.tapd .mn-st.wait i{background:var(--green);box-shadow:0 0 6px var(--greeng)}
.mini.tapd .mn-st .w{display:none} .mini.tapd .mn-st .d{display:inline}
/* "play it again", top right, when the scene has finished and the mouse is on it */
.mn-re{position:absolute;right:8px;top:8px;z-index:3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:rgba(10,12,16,.8);color:var(--txt-2);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.mn-re .i{width:13px;height:13px}
.mini.done:hover .mn-re,.mini.done:focus-visible .mn-re{opacity:1;transform:none}

/* ---- the parts (the job pictures' own shapes) ---- */
.mn-u{align-self:flex-end;max-width:86%;padding:7px 11px;border-radius:14px 14px 4px 14px;background:rgba(255,255,255,.1);color:var(--fg)}          /* what the person writes */
.mn-a{max-width:96%;color:var(--fg)}                                                                                                        /* what idem answers: plain text, as in the door */
.mn-b{align-self:flex-start;max-width:90%;padding:7px 11px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.08);color:var(--fg)}  /* a message that arrives on a phone */
.mn-q{align-self:flex-start;max-width:90%;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.09);color:var(--txt-2)}              /* a visitor asks (the receptionist) */
.mn-r{align-self:flex-end;max-width:90%;padding:6px 10px;border-radius:12px;background:var(--fg);color:#0a0c10;font-weight:500}               /* the receptionist answers */
.mn-meta{font-size:11px;color:var(--mut)}
.mn-sig{font-size:11px;color:var(--mut);letter-spacing:.02em}
.mn-ai{align-self:flex-start;max-width:96%;padding:6px 10px;border-radius:10px;border:1px dashed var(--line2);font-size:11px;line-height:1.4;color:var(--txt-2)}   /* the fixed first sentence */
.mn-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border:1px solid var(--line2);border-radius:999px;font-size:11px;color:var(--fg);background:rgba(255,255,255,.04);white-space:nowrap}
.mn-chip .i{width:12px;height:12px}
.mn-taps{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mn-key{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:28px;padding:0 13px;margin:0;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font:500 12px/1 Outfit,system-ui,sans-serif;color:var(--fg);white-space:nowrap}
/* the key that waits for you: red dot. Press it: green, and the word changes. */
button.mn-key.tap{position:relative;cursor:pointer;background:linear-gradient(170deg,#1d2027 0%,#13161c 60%,#0f1217 100%);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.8);transition:transform .2s,box-shadow .3s}
button.mn-key.tap i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--redg);transition:background .35s,box-shadow .35s}
button.mn-key.tap .d{display:none}
.mini.done button.mn-key.tap:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.5),0 10px 18px -8px rgba(0,0,0,.9),0 0 18px rgba(225,6,0,.25)}
button.mn-key.tap:active{transform:translateY(1px)}
button.mn-key.tap:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.mini.done:not(.tapd) button.mn-key.tap i{animation:breathe 1.6s ease-in-out 3}
.mini.tapd button.mn-key.tap i{background:var(--green);box-shadow:0 0 8px var(--greeng);animation:none}
.mini.tapd button.mn-key.tap .w{display:none} .mini.tapd button.mn-key.tap .d{display:inline}
.mini.tapd .mn-key.gone{opacity:.35}
/* a table */
.mn-t{width:100%;border-collapse:collapse;font-size:12px;line-height:1.3}
.mn-t th{font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-align:left;padding:0 6px 4px;white-space:nowrap}
.mn-t td{padding:4px 6px;border-top:1px solid var(--line);color:var(--fg);white-space:nowrap}
.mn-t .num{text-align:right;font-variant-numeric:tabular-nums}
.mn-t tr.tot td{font-weight:600;border-top:1px solid var(--line2)}
.mn-t td.mut{color:var(--mut)}
/* a photo of a receipt, and the box it arrives in */
.mn-two{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:start}
.mn-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px 4px 6px;border-radius:12px;background:rgba(255,255,255,.06)}
.mn-fn{max-width:68px;font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-rc{position:relative;width:52px;height:66px;margin:2px 0 0 4px;border-radius:2px;transform:rotate(-7deg);background:linear-gradient(168deg,#efebe0 0%,#e2ddcf 38%,#cfc9b9 55%,#e6e1d3 72%,#d6d1c2 100%);box-shadow:0 10px 18px -8px rgba(0,0,0,.9),inset 0 0 12px rgba(0,0,0,.08);clip-path:polygon(0 0,100% 0,100% 95%,92% 100%,84% 95%,76% 100%,68% 95%,60% 100%,52% 95%,44% 100%,36% 95%,28% 100%,20% 95%,12% 100%,4% 95%,0 100%)}
.mn-rc::before{content:"";position:absolute;inset:11px 7px 12px;background:repeating-linear-gradient(rgba(30,25,20,0) 0 4px,rgba(30,25,20,.35) 4px 5.2px);opacity:.75}
.mn-rc::after{content:"";position:absolute;left:6px;right:6px;top:5px;height:3px;border-radius:2px;background:rgba(30,25,20,.45)}
.mn-rc.sm{width:34px;height:44px;margin:0}
/* a voice note */
.mn-wave{display:inline-flex;align-items:center;gap:2px;height:18px;vertical-align:middle} .mn-wave i{display:block;width:2px;border-radius:2px;background:var(--fg);opacity:.85}
/* a list of names with a dot each */
.mn-list{display:flex;flex-direction:column;min-width:0}
.mn-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);min-width:0}
.mn-row:first-child{border-top:0;padding-top:0}
.mn-row>i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--redg);flex:none;transition:background .4s,box-shadow .4s}
.mn-row>i.ok{background:var(--green);box-shadow:0 0 6px var(--greeng)}
.mini.arm .mn-row>i.ok[data-at]:not(.a-on){background:var(--red);box-shadow:0 0 6px var(--redg)}
.mn-row>span{flex:1;min-width:0;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-row>small{font-size:11px;color:var(--mut);white-space:nowrap}
.mn-row .i{width:14px;height:14px;color:var(--mut);flex:none}
/* a tick that draws itself */
.mn-row>.tk{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.14);color:var(--green);box-shadow:none}
.mn-row>.tk .i{width:11px;height:11px;color:var(--green);stroke-width:2.2}
.mini.arm .mn-row>.tk[data-at]:not(.a-on){border-color:var(--line2);background:transparent} .mini.arm .mn-row>.tk[data-at]:not(.a-on) .i{opacity:0}
.mn-row>.tk .i{transition:opacity .3s}
/* one big number */
.mn-big{font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.mini.m .mn-big,.mini.l .mn-big{font-size:32px}
/* one booking on a calendar */
.mn-cal1{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);min-width:0}
.mn-d{display:flex;flex-direction:column;align-items:center;min-width:30px;line-height:1;gap:3px} .mn-d small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .mn-d b{font-size:17px;font-weight:500;color:var(--fg)}
.mn-tt{flex:1;min-width:0;color:var(--fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mn-tt small{display:block;color:var(--mut);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.mn-ok{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--greeng);flex:none;transition:background .4s,box-shadow .4s}
.mini.arm .mn-ok[data-at]:not(.a-on){background:rgba(255,255,255,.2);box-shadow:none}
/* the top bar of a phone chat */
.mn-pbar{display:flex;align-items:center;gap:7px;padding-bottom:7px;border-bottom:1px solid var(--line);font-size:12px;color:var(--fg);flex:none}
.mn-pbar .iu{width:15px;height:15px;color:var(--fg)}
.mn-pbar b{font-weight:500;letter-spacing:.02em}
.mn-pbar em{font-style:normal;margin-left:auto;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;border:1px solid var(--line2);font-size:11px;letter-spacing:.08em;color:var(--mut)}
/* a product in a shop */
.mn-prod{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start}
.mn-img{position:relative;width:64px;height:64px;border-radius:10px;background:linear-gradient(150deg,#2a2d35 0%,#171a20 55%,#0f1217 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.mn-img::after{content:"";position:absolute;left:14px;top:12px;width:36px;height:44px;border-radius:5px 5px 9px 9px;background:linear-gradient(160deg,#d9cdb6,#b7a98f);box-shadow:0 6px 10px -5px rgba(0,0,0,.9)}
.mn-price{font-size:17px;font-weight:500;color:var(--fg);margin-top:2px}
.mn-sizes{display:flex;gap:4px;margin-top:5px} .mn-sizes span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border:1px solid var(--line2);border-radius:999px;font-size:11px;color:var(--txt-2)} .mn-sizes span.on{background:var(--fg);color:#0a0c10;border-color:var(--fg)}

/* ---- new parts, in the same hand ---- */
/* a browser window */
.mn-win{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;border:1px solid var(--line2);border-radius:10px;background:#0d1015;overflow:hidden}
.mn-bar{display:flex;align-items:center;gap:8px;height:26px;padding:0 9px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03);flex:none}
.mn-bar .d{display:flex;gap:4px;flex:none} .mn-bar .d i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.mn-url{display:flex;align-items:center;gap:5px;flex:1;min-width:0;height:17px;padding:0 8px;border-radius:9px;background:rgba(255,255,255,.06);font-size:11px;line-height:17px;color:var(--mut);white-space:nowrap;overflow:hidden}
.mn-url .i{width:10px;height:10px;flex:none;color:var(--mut);transition:color .4s}
.mn-url .lk.a-on,.mini:not(.arm) .mn-url .lk{color:var(--green)}
.mn-body{position:relative;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;padding:12px}
/* lines that stand for text on a page */
.mn-ln{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.16);flex:none} .mn-ln.h{height:10px;background:rgba(255,255,255,.34)}
.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}
.mn-go{display:block;width:70px;height:22px;border-radius:999px;background:var(--fg);flex:none}
.mn-go.red{background:var(--red)}
/* a sheet of paper (a price in writing, a guide, a report) */
.mn-doc{position:relative;display:flex;flex-direction:column;gap:6px;padding:11px 12px;border-radius:7px;background:#eceee9;color:#14171d;box-shadow:0 14px 26px -14px rgba(0,0,0,.95);min-width:0}
.mn-doc .mn-ln{background:#c9ccc5} .mn-doc .mn-ln.h{background:#7b7f78}
.mn-doc b{color:#0a0c10} .mn-doc small{font-size:11px;color:#5d615b}
.mn-doc .sum{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid #c9ccc5;font-variant-numeric:tabular-nums}
.mn-doc .sum b{font-size:15px}
.mn-sign{align-self:flex-end;font:italic 400 15px/1 var(--serif);color:#14171d}
/* a week of slots */
.mn-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.mn-week span{display:block;text-align:center;font-size:11px;color:var(--mut)}
.mn-week i{display:grid;place-items:center;height:24px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-style:normal;font-size:11px;font-weight:600;color:transparent;transition:background .4s,border-color .4s,color .3s,transform .45s var(--ease)}
.mn-week i.mn-bz{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.45)}
.mn-week i.mn-pk{background:var(--fg);border-color:var(--fg);color:#0a0c10;transform:scale(1.06)}
.mini.arm .mn-week i[data-at]:not(.a-on){background:rgba(255,255,255,.04);border-color:var(--line);color:transparent;transform:none}
/* the AI notice on a client's site */
.mn-note{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:#14171d;min-width:0}
.mn-note .i{width:24px;height:24px;padding:4px;border-radius:7px;background:rgba(34,197,94,.14);color:var(--green);flex:none}
.mn-note b{display:block;font-size:12px;line-height:1.3;text-wrap:balance} .mn-note small{display:block;font-size:11px;line-height:1.3;color:var(--mut)}
/* bars of a report */
.mn-bars{display:flex;align-items:flex-end;gap:5px;height:44px;flex:none} .mn-bars i{flex:1;min-width:0;border-radius:3px 3px 0 0;background:rgba(255,255,255,.2)} .mn-bars i.hi{background:var(--green)}
/* three boxes on a line: in, work, out */
.mn-pipe{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);align-items:stretch;gap:6px;flex:none;min-height:0}
.mn-node{display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .5s,background .5s}
.mn-node>small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.mn-node.a-on,.mini:not(.arm) .mn-node.fin{border-color:rgba(34,197,94,.4)}
.mn-arr{align-self:center;position:relative;height:1px;background:var(--line2)}
.mn-arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:rotate(45deg)}
.mn-arr i{position:absolute;left:0;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--greeng);opacity:0}
.mn-arr.a-on i{animation:mnrun .6s var(--ease) both}
@keyframes mnrun{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(14px)}}
/* the mark at work */
/* the work key (Leonard, 3 Oct, third pass): the site's own key in small — the cap, its side and the socket it sits in, as
   on "Put idem to work" (.hold / .hbase / .key3, site.css 138–153), with the mark drawn crisp. Pass 1 was a green outline box.
   Pass 2 was a flat tile with the engraved mark: at 24 px the engraving smudged the mark and the tile had no depth.
   It waits: red dot, the cap is up. It runs: green dot, the cap is down, its edge is lit green. Sizes follow --mk (the name --k is a registered number in site.css). */
.mn-eng{--mk:44px;--lift:calc(var(--mk) * .12);--dot:var(--red);--dg:var(--redg);position:relative;display:grid;place-items:center;flex:none;width:calc(var(--mk) * 1.18);height:calc(var(--mk) * 1.18);margin:0 auto}
.mini.m .mn-eng,.mini.l .mn-eng{--mk:48px}
.mn-eng::before{content:"";position:absolute;inset:0;border-radius:calc(var(--mk) * .29);background:linear-gradient(180deg,#07080b,#10131a);box-shadow:inset 0 3px 7px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.05)}
.mn-kc{position:relative;display:block;width:var(--mk);height:var(--mk);transform:translateY(calc(var(--lift) * -1));transition:transform .28s var(--ease)}
.mn-kc>span{position:absolute;inset:0;border-radius:calc(var(--mk) * .215)}
.mn-kc>.mk-sd{transform:translateY(var(--lift));background:linear-gradient(180deg,#171a20,#08090c);box-shadow:0 6px 10px rgba(0,0,0,.75),0 0 0 1px #06070a;transition:transform .28s var(--ease)}
.mn-kc>.mk-fc{display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 10%,#363a41 0%,#212429 45%,#16191e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);transition:box-shadow .3s}
.mn-kc>.mk-fc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 40%)}
.mn-kc svg{display:block}
.mn-kc .mk-eg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mn-kc .mk-et{fill:none;stroke:#0b0d12;stroke-width:5}
.mn-kc .mk-ep{fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--greeng));stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset .7s var(--ease),opacity .2s}
.mn-kc .mk-gy{position:relative;width:calc(var(--mk) * .43);height:calc(var(--mk) * .43);overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.mn-kc .mk-gl{fill:none;stroke:#dfe2df;stroke-width:12} .mn-kc .mk-gb{fill:#dfe2df}
.mn-kc .mk-d{fill:var(--dot);filter:drop-shadow(0 0 2px var(--dot)) drop-shadow(0 0 5px var(--dg));transition:fill .3s}
.mn-eng.a-on,.mini:not(.arm) .mn-eng{--dot:var(--green);--dg:var(--greeng);--lift:calc(var(--mk) * .02)}
.mn-eng.a-on .mk-ep,.mini:not(.arm) .mn-eng .mk-ep{stroke-dashoffset:0;opacity:1}
.mn-eng.a-on .mk-fc,.mini:not(.arm) .mn-eng .mk-fc{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 3px rgba(0,0,0,.55),0 0 16px rgba(34,197,94,.22)}
html.m-reduce .mn-kc,html.m-reduce .mn-kc>.mk-sd,html.m-reduce .mn-kc .mk-ep{transition:none}
/* a person, by two letters */
.mn-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:#161a21;font-size:11px;font-weight:600;color:var(--txt-2);flex:none}
/* a name and its value on one line ("Owner · You") */
.mn-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line);min-width:0}
.mn-kv:first-child{border-top:0;padding-top:0}
.mn-kv>span{color:var(--mut);white-space:nowrap} .mn-kv>b{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-kv .i{width:12px;height:12px;color:var(--green);stroke-width:2.2;flex:none}
/* two devices */
.mn-dev{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex:1;min-height:0}
.mn-ph{display:flex;flex-direction:column;gap:5px;width:54px;height:96px;padding:9px 7px;border-radius:11px;border:1px solid var(--line2);background:#0d1015}
.mn-dt{display:flex;flex-direction:column;gap:6px;width:132px;height:84px;padding:10px;border-radius:8px;border:1px solid var(--line2);background:#0d1015}
.mn-ph.a-on,.mn-dt.a-on,.mini:not(.arm) .mn-ph,.mini:not(.arm) .mn-dt{border-color:rgba(34,197,94,.45)}
.mn-ph,.mn-dt{transition:border-color .5s}
/* a small gauge line */
.mn-gauge{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;flex:none}
.mn-gauge i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--green));transform-origin:left;transition:transform .9s var(--ease)}
.mini.arm .mn-gauge i[data-at]:not(.a-on){transform:scaleX(.06)}
/* helpers */
.mn-x{display:flex;align-items:center;gap:8px;min-width:0}
.mn-sp{flex:1;min-width:0}
.mn-end{margin-top:auto}
.mn-c{align-self:center;text-align:center}
.mn-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;flex:1;min-height:0}
.mn-col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.mn-cap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.mn-strike{position:relative;color:var(--mut)} .mn-strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1px;background:var(--red)}

/* ---- how the parts arrive ---- */
.mini [data-s]{transition:opacity .4s ease,transform .5s var(--ease)}
.mini.arm [data-s]:not(.s-on){opacity:0;transform:translateY(8px)}
.mini.arm [data-s].k-pop:not(.s-on){transform:scale(.72)}
.mini.arm [data-s].k-l:not(.s-on){transform:translateX(-14px)}
.mini.arm [data-s].k-r:not(.s-on){transform:translateX(14px)}
.mini.arm [data-s].k-grow:not(.s-on){transform:scaleX(.12);transform-origin:left center}
.mini.arm [data-s].k-up:not(.s-on){transform:scaleY(.06);transform-origin:center bottom}
.mini.arm [data-s].k-fade:not(.s-on),.mini.arm tr[data-s]:not(.s-on){transform:none}
.mini.arm [data-s].k-drop:not(.s-on){transform:translateY(-10px) rotate(-7deg)}
.mini.rst,.mini.rst *,.mini.rst *::before,.mini.rst *::after{transition:none!important;animation:none!important}
/* the card around a finished scene */
.card.lit,.o-door.lit{border-color:rgba(34,197,94,.26)}
.card.lit-w,.o-door.lit-w{border-color:rgba(225,6,0,.2)}
.card:hover>.mini,.o-door:hover .mini{border-color:var(--line2)}
/* narrow scenes drop what is optional */
@container (max-width:290px){.mn-opt{display:none!important}}
@container (max-width:250px){.mn-two{grid-template-columns:64px minmax(0,1fr)} .mn-box{padding:6px 2px 5px} .mn-ft.ft-l{display:none} .mn-foot{justify-content:flex-end}}
@container (max-width:290px){.mn-foot.fw .mn-ft{display:none} .mn-foot.fw{justify-content:flex-end}}
@container (max-width:300px){.mn-opt2{display:none!important}}
/* motion off: the parts fade, nothing travels */
html.m-reduce .mini.arm [data-s]:not(.s-on){transform:none!important}
html.m-reduce .mini [data-s]{transition:opacity .3s ease}
html.m-reduce .mn-arr.a-on i{animation:none}
@media (max-width:860px){.mini.l.hero .mn-in{zoom:1}}
@media (max-width:700px){.mini.l{height:300px} .mini.l.hero{height:400px} .mini.l .mn-in,.mini.l.hero .mn-in{zoom:1;padding:16px 16px 12px} .mini.m{height:292px}}

/* ============ scenes: the bits only some scenes use ============ */
.mini.mid .mn-in{justify-content:center}
.mn-l-only{display:none} .mini.l .mn-l-only{display:block}
.mn-key>i.rd{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--redg);flex:none}
.mn-grid2.web{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start}
.mn-grid2.even{gap:12px;align-items:stretch}
.mn-col.mid{justify-content:center}
.mn-doc.narrow{align-self:center;width:min(100%,320px)}
.mn-doc .mn-x .mn-ln{flex:1}
.rdot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.mn-week.short span{display:none}
/* a phone's worth of chat, for the tall scenes */
.mn-phone{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;width:min(100%,380px);margin:0 auto;padding:12px 14px;border:1px solid var(--line2);border-radius:18px;background:#0b0d11}
.mini.l .mn-phone{gap:10px;padding:14px 16px}
.mn-x.wrap{flex-wrap:wrap;gap:6px}
.mn-u.full{align-self:stretch;max-width:none}
.mn-x.team{justify-content:center;gap:6px}
.mn-x.five{display:grid;grid-template-columns:repeat(5,28px);gap:6px;justify-content:center}
.mn-row>.mn-av{flex:none}
.mn-grid2.ctr{align-items:center}
.mn-av .iu{width:13px;height:13px;color:var(--fg)} .mn-av .i{width:13px;height:13px}
.mn-row>i.no{background:transparent;box-shadow:none;border:1px solid var(--line2)}
.mn-row>small.mn-x{gap:5px} .mn-row>small.mn-x .i{width:12px;height:12px}
/* days that fill one after the other */
.mn-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mn-days.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.mn-days i{display:grid;place-items:center;height:24px;border-radius:6px;border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.2);font-style:normal;font-size:11px;font-weight:500;color:var(--fg);transition:background .3s,border-color .3s,color .3s}
.mn-days i:nth-child(2){transition-delay:.11s}.mn-days i:nth-child(3){transition-delay:.22s}.mn-days i:nth-child(4){transition-delay:.33s}.mn-days i:nth-child(5){transition-delay:.44s}.mn-days i:nth-child(6){transition-delay:.55s}.mn-days i:nth-child(7){transition-delay:.66s}
.mini.arm .mn-days[data-at]:not(.a-on) i{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--mut);transition-delay:0s}
/* channels as small squares; a file that is gone; a cell to check */
.mn-chip.ic{padding:0;width:28px;height:28px;justify-content:center;border-radius:9px}
.mn-chip.ic .i{width:14px;height:14px}
.mn-chip.dim{transition:opacity .5s} .mini:not(.arm) .mn-chip.dim,.mn-chip.dim.a-on{opacity:.3}
.mn-chip.del{transition:opacity .5s} .mini:not(.arm) .mn-chip.del,.mn-chip.del.a-on{opacity:.4;text-decoration:line-through}
.mn-chk{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:999px;border:1px solid rgba(225,6,0,.5);font-size:11px;color:var(--fg)}
.mn-chk::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
/* in, work, out */
.mn-pipe{grid-template-columns:minmax(0,4fr) 18px 78px 18px minmax(0,6fr)}
.mn-pipe.acc{grid-template-columns:minmax(0,5fr) 18px 78px 18px minmax(0,6fr)}
.mini.m .mn-win,.mini.l .mn-win,.mini.l .mn-phone,.mini.m .mn-grid2,.mini.l .mn-grid2{flex:none}
.mini.l .mn-win{width:min(100%,560px);margin:0 auto}
.mn-node.mid2{align-items:center;justify-content:center;text-align:center;padding-left:4px;padding-right:4px}
.mn-node.mid2>small{letter-spacing:.06em}
.mn-node>small.lc{text-transform:none;letter-spacing:.02em;font-weight:600;color:var(--fg)}
.mn-node.fin.s-on,.mini:not(.arm) .mn-node.fin{border-color:rgba(34,197,94,.4)}
.mn-node.fin.wt.s-on,.mini:not(.arm) .mn-node.fin.wt{border-color:rgba(225,6,0,.36)}
.mini.tapd .mn-node.fin.wt{border-color:rgba(34,197,94,.4)}
.mn-node .mn-list{min-width:0}
@container (max-width:460px){
  .mn-pipe,.mn-pipe.acc{grid-template-columns:minmax(0,1fr);align-content:start}
  .mn-pipe .mn-arr,.mn-pipe .mid2{display:none}
  .mn-pipe .mn-node>small{display:none}
  .mn-opt3{display:none!important}
  .mn-grid2.web{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:340px){.mn-phone{padding:10px 10px;border-radius:14px} .mn-grid2.even{gap:8px}}

/* ---------- the method inside an offer page (AI systems, 3 Oct 2026) ----------
   The block is the method page's own (site.css, "the method page"). Only what the place changes is here:
   the section takes the rhythm of the other sections (128 / 88), and the head gives the 56 px above the business keys. */
.msec{padding:var(--sp32) 0}
.msec .pick{margin-top:0}
.msec .bench{margin-top:var(--sp12)}
@media (max-width:860px){.msec{padding:88px 0}}
/* found while measuring (older than today, on /method/ of the live site too): at 1024 px the third column was 4 px wider
   than the window, because a column's row could not get narrower than its longest line. Now it can; the line ends in "…". */
.col .row{grid-template-columns:minmax(0,1fr)}

/* idem UNIVERSAL · preview/cards-real-2026-10-03/attempts/final/real.css
   The cards as real screens: real app windows, layered, joined by a thin line. Every class starts with rl-.
   Spacing scale 4 · 8 · 12 · 16 · 24 · 32. Radius scale 4 · 8 · 12 · round. Type scale 11 · 12 · 13 · 14 · 16 · 20 · 40.
   Red = it waits for a person's tap (the key, and one thin line round the window that waits). Green = it ran.
   Order of this file: the frame → the parts of a window → each kind of window → the narrow layout (the base) →
   the door layout (a card 440 px wide or more) → the stage layout (900 px or more) → the small cards. */

/* ---------- the frame: the stage fills the card, no zoom ---------- */
.mini.rl-c .mn-in,.mini.m.rl-c .mn-in,.mini.l.rl-c .mn-in,.mini.l.hero.rl-c .mn-in{zoom:1;padding:0;gap:0;display:block}
.rl-st{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:12px max(12px,calc((100% - 496px) / 2));font-size:13px;line-height:1.4;color:var(--txt-2)}
.rl-st *{box-sizing:border-box}
.rl-st::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 72% 0%,rgba(255,255,255,.06),transparent 62%)}
.rl-st .i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rl-sp{flex:1 1 0;min-width:0}

/* ---------- a window ---------- */
.rl-w{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#14171d;color:var(--fg);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -16px rgba(0,0,0,.95),0 8px 16px -8px rgba(0,0,0,.75)}
.rl-w.rl-pp{background:#f4f3ee;color:#15181e;border-color:rgba(255,255,255,.6)}
.mini .rl-pp b{color:inherit}
/* the window that waits for a tap: one thin red line round it; green once the tap is made */
.rl-w.rl-wt{border-color:transparent;box-shadow:0 0 0 1.5px var(--red),0 24px 48px -16px rgba(0,0,0,.95),0 8px 16px -8px rgba(0,0,0,.75);transition:box-shadow .5s}
.mini.tapd .rl-w.rl-wt{box-shadow:0 0 0 1.5px var(--green),0 24px 48px -16px rgba(0,0,0,.95),0 8px 16px -8px rgba(0,0,0,.75)}
.rl-tb{display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;flex:none;border-bottom:1px solid var(--line);background:rgba(255,255,255,.045);font-size:12px;line-height:1;color:var(--txt-2);white-space:nowrap}
.rl-pp .rl-tb{background:#e5e3dc;border-bottom-color:rgba(20,23,29,.1);color:#4a4f58}
.rl-dots{display:flex;gap:4px;flex:none;margin-right:4px}
.rl-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.rl-pp .rl-dots i{background:rgba(20,23,29,.22)}
.rl-tt{font-weight:500;color:var(--fg)}
.rl-pp .rl-tt{color:#15181e}
.rl-tb .iu{width:15px;height:15px;color:var(--fg);flex:none}
.rl-pp .rl-tb .iu{color:#15181e}
.rl-arr{display:inline-flex;gap:8px}
.rl-bd{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.rl-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.09);color:var(--txt-2);flex:none}
.rl-av.rl-sm{width:20px;height:20px}
.rl-st .rl-av.rl-sm .i{width:12px;height:12px}
.rl-av.rl-in{font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em}
.rl-tag{font-style:normal;display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;border:1px solid var(--line2);font-size:11px;letter-spacing:.08em;color:var(--mut)}
.rl-pp .rl-tag{border-color:rgba(20,23,29,.25);color:#5c616a}
/* a green tick: it ran */
.rl-tk{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.14);color:var(--green);font-style:normal;flex:none;transition:border-color .3s,background .3s}
.rl-st .rl-tk .i{width:11px;height:11px;stroke-width:2.2;transition:opacity .3s}
.mini.arm .rl-tk[data-at]:not(.a-on){border-color:var(--line2);background:transparent}
.mini.arm .rl-tk[data-at]:not(.a-on) .i{opacity:0}
.rl-pp .rl-tk{border-color:rgba(21,128,61,.5);background:rgba(21,128,61,.12);color:#15803d}
.mini.arm .rl-pp .rl-tk[data-at]:not(.a-on){border-color:rgba(20,23,29,.22);background:transparent}

/* ---------- the line between two windows, its node, the idem key on it, the pointer ---------- */
.rl-ln{display:none;position:absolute;z-index:2;border:0 solid rgba(255,255,255,.34);border-top-width:1px;border-right-width:1px;border-top-right-radius:12px;pointer-events:none}
.rl-ln::before,.rl-ln::after{content:"";display:none;position:absolute;width:5px;height:5px;border-radius:50%;background:var(--fg)}
.rl-ln::before{left:-3px;top:-3px}
.rl-ln::after{right:-3px;bottom:-3px}
.rl-nd{position:absolute;top:-12px;left:calc(50% - 20px);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#07080b;border:1px solid rgba(34,197,94,.55);color:var(--green);font-style:normal}
.rl-st .rl-nd .i{width:12px;height:12px;stroke-width:2}
.rl-key{position:absolute;top:0;left:80px;transform:translateY(-50%);display:block;pointer-events:auto}
.rl-cur{position:absolute;right:-6px;bottom:-10px;z-index:3;width:18px;height:18px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.rl-cur svg{display:block;width:18px;height:18px;fill:#fff;stroke:#0a0c10;stroke-width:1.5;stroke-linejoin:round}
/* after the visitor's own tap the line between the two windows goes green: it ran */
.rl-enq .rl-ln{transition:border-color .5s}
.mini.tapd .rl-enq .rl-ln{border-color:rgba(34,197,94,.6)}
.mini.tapd .rl-enq .rl-ln::before,.mini.tapd .rl-enq .rl-ln::after{background:var(--green)}

/* ---------- the inbox, and the list of clients ---------- */
.rl-mail{display:flex;min-width:0}
.rl-rail{display:none}
.rl-list{display:flex;flex-direction:column;flex:1;min-width:0}
.rl-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.rl-row:last-child{border-bottom:0}
.rl-row.rl-on{background:rgba(255,255,255,.07);box-shadow:inset 2px 0 0 var(--fg)}
.rl-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rl-rh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px;line-height:16px}
.rl-rh b{font-size:12px;font-weight:600;white-space:nowrap}
.rl-rh time{font-size:11px;color:var(--mut)}
.rl-msg{font-size:13px;line-height:1.35;color:var(--fg)}
.rl-dim{opacity:.55}
.mini .rl-dim .rl-rh b{font-weight:500;color:var(--txt-2)}
.rl-file{display:flex;align-items:center;gap:4px;font-size:11px;line-height:16px;color:var(--mut);white-space:nowrap}

/* ---------- the draft (a sheet of paper), and the list the accountant gets ---------- */
.rl-draft{display:flex;flex-direction:column;gap:4px;padding:12px 12px 8px}
.rl-st .rl-txt{margin:0;font-size:13px;line-height:1.4;color:#15181e}
.rl-pp .mn-sig{color:#6a6f78}
.rl-act{display:flex;align-items:center;gap:12px;padding:4px 12px 12px;margin-top:auto}
.rl-tools{display:flex;gap:12px;color:#8a8f98}
.mini .rl-pp .mn-key{background:#15181e;border-color:#15181e;color:#f5f6f3}
.rl-cks{display:flex;flex-direction:column;padding:4px 0}
.rl-ck{display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;font-size:13px;line-height:1;color:#15181e;white-space:nowrap}
.rl-ck b{font-weight:600}
.rl-ck span{margin-left:auto;font-size:12px;color:#5c616a}
.rl-o{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(20,23,29,.3);flex:none}

/* ---------- the browser and its page ---------- */
.rl-url{display:flex;align-items:center;gap:4px;flex:1;min-width:0;height:20px;padding:0 8px;border-radius:999px;background:rgba(20,23,29,.08);font-size:12px;color:#3a3f48;white-space:nowrap}
.rl-lk{display:inline-flex;color:#15803d;transition:color .4s}
.rl-st .rl-lk .i{width:12px;height:12px}
.mini.arm .rl-lk[data-at]:not(.a-on){color:#8a8f98}
.rl-page{display:flex;flex-direction:column;flex:1;min-height:0;background:#faf9f5}
.rl-hero{display:flex;gap:16px;padding:12px;flex:none}
.rl-hc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.rl-st .rl-h{margin:0;padding:0;font:500 20px/1.15 var(--serif);letter-spacing:-.01em;color:#15181e;text-transform:none}
.rl-bk{position:relative;display:inline-flex;margin-top:12px}

/* ---------- the calendar ---------- */
.rl-wk{display:grid;grid-template-columns:40px repeat(5,minmax(0,1fr));padding:4px 12px 12px}
.rl-dh{display:grid;place-items:center;height:22px;font-size:11px;line-height:1;color:var(--mut)}
.rl-dh.rl-td{color:var(--fg);font-weight:600}
.rl-hr{height:26px;padding:4px 0 0;font-size:11px;line-height:1;color:var(--mut);font-variant-numeric:tabular-nums}
.rl-hr.rl-h0{height:22px}
.rl-cell{position:relative;height:26px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rl-cell:nth-child(6n){border-right:1px solid var(--line)}
.rl-cell.rl-tc{background:rgba(255,255,255,.04)}
.rl-bz,.rl-pk{position:absolute;inset:2px;border-radius:4px;font-style:normal;transition:opacity .4s,transform .45s var(--ease)}
.rl-bz{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.45)}
.rl-pk{z-index:1;display:grid;place-items:center;background:var(--fg);color:#0a0c10;font-size:11px;font-weight:600;line-height:1;box-shadow:0 6px 12px -4px rgba(0,0,0,.85)}
.rl-pk.rl-half{top:50%;bottom:auto;height:calc(100% - 3px)}
.mini.arm .rl-bz[data-at]:not(.a-on){opacity:0}
.mini.arm .rl-pk[data-at]:not(.a-on){opacity:0;transform:scale(.7)}
.rl-ev{display:none;align-items:center;gap:12px;margin:0 12px 12px;padding:4px 12px;border:1px solid var(--line2);border-radius:8px;background:rgba(255,255,255,.04)}
.rl-ed{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:32px;line-height:1}
.rl-ed small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.rl-ed b{font-size:16px;font-weight:500}
.rl-et{flex:1;min-width:0;line-height:1.35}
.rl-et b{display:block;font-size:13px}
.rl-et small{display:block;font-size:11px;color:var(--mut);white-space:nowrap}

/* ---------- a chat window ---------- */
.rl-chat{display:flex;flex-direction:column;gap:8px;padding:12px;flex:1;min-width:0}
.rl-day{align-self:center;font-size:11px;line-height:16px;color:var(--mut)}
.rl-bub{max-width:92%;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.1);color:var(--fg);font-size:13px;line-height:1.4}
.rl-bub.rl-out{align-self:flex-end;border-bottom-right-radius:4px}
.rl-inp{display:none;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);color:var(--mut);flex:none;margin-top:auto}
.rl-inp i{flex:1;height:24px;border-radius:999px;background:rgba(255,255,255,.07)}
.rl-chw .mn-ai{font-size:12px;max-width:100%;align-self:stretch}
/* the photo of the receipts: three paper slips that carry the same numbers as the table */
.rl-ph{display:flex;flex-direction:column;gap:8px;padding:8px}
.rl-photo{display:none;position:relative;border-radius:8px;overflow:hidden;background:#2b2a27}
.rl-slip{position:absolute;display:flex;flex-direction:column;background:linear-gradient(168deg,#f1ede2,#e4dfd1 45%,#d6d0c1);color:#2a2620;font-size:11px;line-height:1.2;box-shadow:0 8px 14px -6px rgba(0,0,0,.85);
  clip-path:polygon(0 0,100% 0,100% 95%,90% 100%,80% 95%,70% 100%,60% 95%,50% 100%,40% 95%,30% 100%,20% 95%,10% 100%,0 95%)}
.mini .rl-slip b{color:#2a2620;font-weight:600}
.rl-slip i{display:block;height:1px;background:repeating-linear-gradient(90deg,rgba(40,34,28,.55) 0 3px,transparent 3px 6px)}
.rl-slip em{font-style:normal;font-weight:700;margin-top:auto;white-space:nowrap}
.rl-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4px;font-size:12px;line-height:16px;color:var(--fg);white-space:nowrap}
.rl-cap span{display:inline-flex;align-items:center;gap:8px}
.rl-cap time{font-size:11px;color:var(--mut)}
.rl-re{display:flex;align-items:center;gap:12px}

/* ---------- the table as a sheet ---------- */
.rl-grid{flex:1;background:#fcfbf7}
.rl-sheet .mn-t{font-size:12px;line-height:1.2}
.rl-sheet .mn-t th{padding:4px 12px;background:#eceae3;color:#5c616a;border-right:1px solid rgba(20,23,29,.09)}
.rl-sheet .mn-t td{padding:4px 12px;color:#15181e;border-top:1px solid rgba(20,23,29,.1);border-right:1px solid rgba(20,23,29,.07)}
.rl-sheet .mn-t tr>:last-child{border-right:0}
.rl-sheet .mn-t tr:first-child td{border-top:0}
.rl-sheet .mn-t tr.tot td{border-top:1px solid rgba(20,23,29,.3);background:#f1efe8;font-weight:600}
.rl-sb{display:flex;align-items:center;gap:12px;min-height:20px;padding:0 12px;border-top:1px solid rgba(20,23,29,.1);background:#e9e7e0;font-size:11px;line-height:1;color:#5c616a;white-space:nowrap;flex:none}
.rl-sb .rl-fm{margin-left:auto}

/* =====================================================================
   THE NARROW LAYOUT (the base): the windows stack and overlap downwards.
   A door 286 or 312 px wide, the stage of an offer page on a phone (358 px).
   ===================================================================== */
/* AI systems, and Accountants (the same two windows and the key) */
.rl-enq{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:8px;align-content:center;align-items:center}
.rl-enq .rl-a{grid-column:1;grid-row:1}
.rl-enq .rl-b{grid-column:1 / -1;grid-row:2}
.rl-enq .rl-ln{display:block;position:relative;grid-column:2;grid-row:1;border-width:0;width:60px;height:60px}
.rl-enq .rl-key{position:static;transform:none}
.rl-enq .rl-d1,.rl-enq .rl-d2{display:none}
.mini.m .rl-enq .rl-a .rl-tb{display:none}
.mini.m .rl-enq .rl-tools{display:none}
.mini.l .rl-enq .rl-d1{display:flex}
.mini.l .rl-enq .rl-ln{align-self:start;margin-top:32px}
.mini.l .rl-st .rl-txt{font-size:14px}
.rl-acc .rl-cl2{display:none}
.mini.m .rl-acc .rl-cl1{display:none}
.mini.m .rl-acc .rl-cks{padding:0}
.mini.m .rl-acc .rl-act{padding:4px 12px 8px}
/* Websites */
.rl-web .rl-a{margin-right:32px}
.rl-web .rl-cal{margin:-4px 0 0 16px}
.rl-web .rl-sms{margin:-8px 0 0 32px}
.rl-web .rl-hero{padding:8px 12px 12px}
.rl-web .rl-hc{flex-direction:row;align-items:center;justify-content:space-between}
.rl-web .rl-bk{margin:0}
.rl-web .rl-wr2{display:none}
.rl-web .rl-hr,.rl-web .rl-cell{height:24px}
.rl-web .rl-wk{padding-bottom:8px}
.rl-web .rl-cal .rl-tb{display:none}
.rl-web .rl-sms .rl-tb{height:24px}
.rl-web .rl-chat{padding:4px 8px}
.rl-web .rl-bub{padding:4px 12px}
.mini.m .rl-web .rl-day{display:none}
.mini.l .rl-web .rl-ev{display:flex}
/* Assistant */
.rl-ast .rl-a{margin-right:24px}
.rl-ast .rl-b{margin:-12px 0 0 24px}
.rl-ast .rl-chat{padding-bottom:16px}
.rl-ast .rl-re{display:none}
.rl-ast .rl-bub{max-width:100%}
.rl-ast .rl-b .rl-tb{height:24px}
.mini.m .rl-ast .rl-a{margin-right:0}
.mini.m .rl-ast .rl-chat{padding:8px 8px 16px}
.mini.l .rl-ast{padding-top:8px;padding-bottom:8px}
.mini.l .rl-ast .rl-chat{padding-top:8px}
.mini.l .rl-ast .rl-ph{align-self:stretch;padding:4px;gap:4px}
.mini.l .rl-ast .rl-photo{display:block;width:100%;height:52px}
.mini.l .rl-ast .rl-slip{top:6px;width:29%;height:40px;padding:4px 4px 8px;justify-content:space-between}
.mini.l .rl-ast .rl-slip i{display:none}
.mini.l .rl-ast .rl-slip em{margin-top:0}
.mini.l .rl-ast .rl-s0{left:3%;transform:rotate(-2deg)}
.mini.l .rl-ast .rl-s1{left:35.5%;top:8px;transform:rotate(1.5deg)}
.mini.l .rl-ast .rl-s2{left:68%;transform:rotate(-1deg)}
.mini.l .rl-ast .rl-sheet .mn-t tr:has(th){display:none}
.mini.l .rl-ast .rl-sheet .mn-t td{padding:4px 12px}

/* =====================================================================
   THE DOOR LAYOUT: a card 440 px wide or more (508 × 300 on the home page)
   ===================================================================== */
@container (min-width:440px){
  /* the stage of real screens has a faint dot grid, as a desk under the windows */
  .rl-st::before{background:radial-gradient(90% 70% at 72% 0%,rgba(255,255,255,.07),transparent 62%),radial-gradient(circle,rgba(255,255,255,.085) 1px,transparent 1.4px) 0 0/16px 16px;
    -webkit-mask-image:linear-gradient(#fff 10%,transparent 92%);mask-image:linear-gradient(#fff 10%,transparent 92%)}
  .mini.m .rl-st{display:block;padding:0}
  /* a door is 508 to 518 px wide: the window in front is tied to the right edge, so the picture always fills the card */
  .mini.m .rl-w{position:absolute;margin:0}
  .mini.m .rl-ln{display:block;position:absolute;border-top-width:1px;border-right-width:1px;width:auto;height:auto}
  .mini.m .rl-ln::before,.mini.m .rl-ln::after{display:block}
  /* AI systems */
  .mini.m .rl-enq .rl-a{display:flex;left:16px;top:16px;width:272px}
  .mini.m .rl-enq .rl-a .rl-tb{display:flex}
  .mini.m .rl-enq .rl-d1,.mini.m .rl-enq .rl-d2{display:flex}
  .mini.m .rl-enq .rl-b{left:184px;right:16px;top:100px}
  .mini.m .rl-draft{padding:12px 16px 8px}
  .mini.m .rl-act{padding:4px 16px 12px}
  .mini.m .rl-st .rl-txt{font-size:14px}
  .mini.m .rl-enq .rl-ln{left:288px;top:60px;width:152px;height:40px}
  .mini.m .rl-enq .rl-key{position:absolute;left:32px;top:0;transform:translateY(-50%)}
  .mini.m .rl-enq .rl-tools{display:flex}
  /* Accountants */
  .mini.m .rl-acc .rl-a{left:16px;top:16px;width:228px}
  .mini.m .rl-acc .rl-cl1,.mini.m .rl-acc .rl-cl2{display:flex}
  .mini.m .rl-acc .rl-cks{padding:4px 0}
  .mini.m .rl-acc .rl-b{left:196px;right:16px;top:84px}
  .mini.m .rl-acc .rl-ln{display:block;left:244px;top:30px;width:108px;height:54px}
  .mini.m .rl-acc .rl-key{left:20px}
  .mini.m .rl-acc .rl-act{padding:4px 12px 12px}
  /* Websites: the page behind, the calendar in front of it, the message in front of the calendar */
  .mini.m .rl-web .rl-ln{display:none}
  .mini.m .rl-web .rl-a{left:16px;top:16px;width:228px}
  .mini.m .rl-web .rl-hero{padding:12px}
  .mini.m .rl-web .rl-hc{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .mini.m .rl-web .rl-bk{margin-top:12px}
  .mini.m .rl-web .rl-cal{left:188px;right:16px;top:28px}
  .mini.m .rl-web .rl-cal .rl-tb{display:flex}
  .mini.m .rl-web .rl-arr{display:none}
  .mini.m .rl-web .rl-dh,.mini.m .rl-web .rl-hr.rl-h0{height:20px}
  .mini.m .rl-web .rl-ev{display:flex}
  .mini.m .rl-web .rl-sms{left:32px;top:185px;width:272px}
  .mini.m .rl-web .rl-bub{max-width:100%;white-space:nowrap}
  /* Assistant: the chat behind, the file in front and bigger */
  .mini.m .rl-ast .rl-a{left:16px;top:16px;width:232px}
  .mini.m .rl-ast .rl-chat{padding:12px 48px 12px 12px}
  .mini.m .rl-ast .rl-bub{font-size:14px}
  .mini.m .rl-ast .rl-inp{display:flex}
  .mini.m .rl-ast .rl-b{left:216px;right:16px;top:64px}
  .mini.m .rl-ast .rl-b .rl-tb{height:28px}
  .mini.m .rl-ast .rl-sheet .mn-t{font-size:14px;line-height:1.3}
  .mini.m .rl-ast .rl-sheet .mn-t td{padding:8px 12px}
  .mini.m .rl-ast .rl-sb{min-height:24px}
  .mini.m .rl-ast .rl-l1{left:248px;top:30px;width:106px;height:34px}
}

/* =====================================================================
   THE STAGE LAYOUT: the stage of an offer page, 960 × 440 (900 px or more)
   ===================================================================== */
@container (min-width:900px){
  .mini.l .rl-st{display:block;padding:0;font-size:14px}
  .mini.l .rl-w{position:absolute;margin:0;border-radius:12px}
  .mini.l .rl-tb{height:36px;padding:0 16px;gap:12px;font-size:13px}
  .mini.l .rl-dots{gap:8px;margin-right:0}
  .mini.l .rl-dots i{width:10px;height:10px}
  .mini.l .rl-st .rl-tb .i{width:16px;height:16px}
  .mini.l .rl-tb .iu{width:18px;height:18px}
  .mini.l .rl-ln{display:block;position:absolute;border-top-width:1px;border-right-width:1px;width:auto;height:auto}
  .mini.l .rl-ln::before,.mini.l .rl-ln::after{display:block}
  .mini.l .rl-nd{top:-14px;width:26px;height:26px}
  .mini.l .rl-row{gap:12px;padding:12px 16px}
  .mini.l .rl-av{width:36px;height:36px}
  .mini.l .rl-st .rl-av .i{width:18px;height:18px}
  .mini.l .rl-av.rl-sm{width:24px;height:24px}
  .mini.l .rl-st .rl-av.rl-sm .i{width:14px;height:14px}
  .mini.l .rl-av.rl-in{font-size:13px}
  .mini.l .rl-rh{min-height:20px;line-height:20px}
  .mini.l .rl-rh b{font-size:14px}
  .mini.l .rl-rh time{font-size:12px}
  .mini.l .rl-msg{font-size:16px}
  .mini.l .rl-file{font-size:13px;line-height:20px;gap:8px}
  /* AI systems */
  .mini.l .rl-enq .rl-a{left:32px;top:32px;width:456px}
  .mini.l .rl-rail{display:flex;flex-direction:column;align-items:center;gap:16px;width:52px;padding:12px 0;border-right:1px solid var(--line);color:var(--mut);flex:none}
  .mini.l .rl-st .rl-rail .i{width:18px;height:18px}
  .mini.l .rl-ron{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.09);color:var(--fg)}
  .mini.l .rl-enq .rl-d1,.mini.l .rl-enq .rl-d2{display:flex}
  .mini.l .rl-enq .rl-b{left:400px;top:140px;width:528px}
  .mini.l .rl-draft{padding:24px 24px 12px}
  .mini.l .rl-st .rl-txt{font-size:20px;line-height:1.45}
  .mini.l .rl-pp .mn-sig{font-size:12px}
  .mini.l .rl-act{padding:12px 24px 16px;border-top:1px solid rgba(20,23,29,.1)}
  .mini.l .rl-act .mn-key{height:36px;padding:0 16px;font-size:14px}
  .mini.l .rl-act button.mn-key.tap i{width:8px;height:8px}
  .mini.l .rl-st .rl-tools .i{width:18px;height:18px}
  .mini.l .rl-enq .rl-ln{left:488px;top:96px;width:240px;height:44px;margin-top:0}
  .mini.l .rl-enq .rl-key{position:absolute;left:64px;top:0;transform:translateY(-50%);zoom:1.25}
  /* Accountants */
  .mini.l .rl-acc .rl-a{left:32px;top:32px;width:400px}
  .mini.l .rl-acc .rl-cl2{display:flex}
  .mini.l .rl-acc .rl-b{left:392px;top:112px;width:536px}
  .mini.l .rl-cks{padding:8px 0}
  .mini.l .rl-ck{height:44px;padding:0 24px;gap:12px;font-size:16px}
  .mini.l .rl-ck span{font-size:14px}
  .mini.l .rl-ck .rl-tk,.mini.l .rl-ck .rl-o{width:20px;height:20px}
  .mini.l .rl-st .rl-ck .rl-tk .i{width:13px;height:13px}
  .mini.l .rl-acc .rl-ln{left:432px;top:50px;width:232px;height:62px}
  /* Websites */
  .mini.l .rl-web .rl-a{left:32px;top:24px;width:392px}
  .mini.l .rl-url{height:24px;padding:0 12px;font-size:13px}
  .mini.l .rl-web .rl-hero{padding:24px}
  .mini.l .rl-web .rl-hc{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .mini.l .rl-st.rl-web .rl-h{font-size:40px}
  .mini.l .rl-web .rl-bk{margin-top:24px}
  .mini.l .rl-web .rl-bk .mn-key{height:36px;padding:0 16px;font-size:14px}
  .mini.l .rl-web .rl-cal{left:248px;top:96px;width:400px}
  .mini.l .rl-web .rl-cal .rl-tb{display:flex}
  .mini.l .rl-web .rl-wr2{display:block}
  .mini.l .rl-wk{grid-template-columns:52px repeat(5,minmax(0,1fr));padding:8px 16px 16px}
  .mini.l .rl-dh{height:28px;font-size:12px}
  .mini.l .rl-hr.rl-h0{height:28px}
  .mini.l .rl-web .rl-hr,.mini.l .rl-web .rl-cell{height:38px}
  .mini.l .rl-hr{font-size:12px;padding-top:4px}
  .mini.l .rl-pk{font-size:13px}
  .mini.l .rl-ev{margin:0 32px 16px 16px;padding:8px 16px}
  .mini.l .rl-ed b{font-size:20px}
  .mini.l .rl-et b{font-size:14px}
  .mini.l .rl-et small{font-size:12px}
  .mini.l .rl-web .rl-sms{left:616px;top:184px;width:312px}
  .mini.l .rl-web .rl-sms .rl-tb{height:36px}
  .mini.l .rl-web .rl-chat{padding:12px}
  .mini.l .rl-bub{font-size:16px;padding:8px 12px}
  .mini.l .rl-web .rl-l1{left:424px;top:42px;width:96px;height:54px}
  .mini.l .rl-web .rl-l2{left:648px;top:114px;width:110px;height:70px}
  /* Assistant */
  .mini.l .rl-ast{padding:0}
  .mini.l .rl-ast .rl-a{left:32px;top:24px;width:408px}
  .mini.l .rl-ast .rl-chat{padding:16px 32px 16px 16px;gap:12px}
  .mini.l .rl-chw .mn-ai{font-size:13px;padding:8px 12px}
  .mini.l .rl-ast .rl-bub{max-width:92%}
  .mini.l .rl-ast .rl-ph{align-self:flex-end;padding:8px;gap:8px}
  .mini.l .rl-ast .rl-photo{width:280px;height:116px}
  .mini.l .rl-ast .rl-slip{top:12px;width:80px;height:92px;padding:8px 8px 12px;gap:8px;justify-content:flex-start}
  .mini.l .rl-ast .rl-slip i{display:block}
  .mini.l .rl-ast .rl-slip em{margin-top:auto}
  .mini.l .rl-ast .rl-s0{left:14px;transform:rotate(-3deg)}
  .mini.l .rl-ast .rl-s1{left:100px;top:16px;transform:rotate(2deg)}
  .mini.l .rl-ast .rl-s2{left:186px;transform:rotate(-1.5deg)}
  .mini.l .rl-cap{font-size:13px}
  .mini.l .rl-ast .rl-re{display:flex}
  .mini.l .rl-ast .rl-b{left:424px;top:96px;width:504px}
  .mini.l .rl-ast .rl-b .rl-tb{height:36px}
  .mini.l .rl-ast .rl-sheet .mn-t tr:has(th){display:table-row}
  .mini.l .rl-sheet .mn-t{font-size:16px;line-height:1.3}
  .mini.l .rl-sheet .mn-t th{padding:8px 16px;font-size:12px}
  .mini.l .rl-ast .rl-sheet .mn-t td{padding:8px 16px}
  .mini.l .rl-sb{min-height:36px;padding:0 16px;font-size:13px;color:#3a3f48}
  .mini.l .rl-sb .rl-fm{margin-left:0}
  .mini.l .rl-sb .rl-mk{display:none}
  .mini.l .rl-ast .rl-l1{left:440px;top:42px;width:200px;height:54px}
}

/* the foot line of a card that waits: a long line gives way to the tag before it is cut (a door on a phone is 312 px) */
@container (max-width:330px){.mini.rl-c .mn-foot.fw .mn-ft.ft-l{display:none} .mini.rl-c .mn-foot.fw{justify-content:flex-end}}

/* =====================================================================
   THE SMALL CARDS: one or two windows, as big as the card (312, 229 and 358 px wide; 184 px tall)
   ===================================================================== */
/* the calendar */
.rl-pc{padding:12px;justify-content:flex-start}
.rl-pc .rl-tb{height:24px}
.rl-pc .rl-wk{padding:4px 12px 8px}
.rl-pc .rl-dh,.rl-pc .rl-hr.rl-h0{height:20px}
.rl-pc .rl-hr,.rl-pc .rl-cell{height:34px}
.rl-pc .rl-cur{right:4px;bottom:-28px}
/* the receipts and their table */
.rl-rcp{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px}
.rl-stk{position:relative;width:80px;height:104px;flex:none;border-radius:8px;background:#2b2a27}
.rl-stk .rl-slip{left:8px;top:10px;width:64px;height:84px;padding:8px 4px 12px 8px;gap:8px}
.rl-stk .rl-s2{transform:rotate(7deg) translate(4px,2px)}
.rl-stk .rl-s1{transform:rotate(-6deg) translate(-1px,1px)}
.rl-stk .rl-s0{transform:rotate(-1.5deg)}
.rl-stk .rl-s1 *,.rl-stk .rl-s2 *{visibility:hidden}
.rl-rcp .rl-w{flex:1;align-self:stretch}
.rl-rcp .rl-tb{height:24px}
.rl-rcp .rl-sheet .mn-t td{padding:4px 8px}
/* the domain in your name */
.rl-od{padding:12px;justify-content:flex-start}
.rl-od .rl-tb{height:24px}
.rl-od .rl-f{height:50px;font-size:13px}
.rl-f{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 12px;border-top:1px solid var(--line);font-size:12px;line-height:1;white-space:nowrap}
.rl-f:first-child{border-top:0}
.rl-f>span{color:var(--mut)}
.rl-f>b{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--fg)}
/* your sheet, and the dashboard that reads it */
.rl-st.rl-dash{display:block;padding:0}
.rl-dash .rl-w{position:absolute}
.rl-dash .rl-tb{height:24px}
.rl-dash .rl-a{left:12px;top:14px;width:176px}
.rl-dash .rl-sheet .mn-t td{padding:4px 8px}
.rl-dash .rl-sheet .mn-t td:last-child{width:36%}
.rl-dash .rl-b{left:148px;top:52px;right:12px}
.rl-hb{display:flex;flex-direction:column;gap:8px;padding:12px}
.rl-hb i{display:block;height:12px;border-radius:4px;background:rgba(255,255,255,.22)}
.rl-hb .rl-hb0{background:var(--green)}
@container (max-width:260px){
  .rl-pc .rl-hr{display:none}
  .rl-pc .rl-wk{grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 8px 8px}
  .rl-rcp{gap:8px}
  .rl-stk{width:56px;height:72px}
  .rl-stk .rl-slip{left:6px;top:8px;width:44px;height:56px;padding:8px 4px}
  .rl-stk .rl-s0 em,.rl-stk .rl-s0 i+i{display:none}
  .rl-rcp .rl-sheet .mn-t td{padding:4px}
  .rl-f{padding:0 8px}
  .rl-od .rl-f{font-size:12px}
  .rl-dash .rl-a{left:12px;top:12px;width:152px}
  .rl-dash .rl-r1{display:none}
  .rl-dash .rl-b{left:64px;top:64px;right:12px}
  .rl-hb{padding:8px 12px}
}

/* ============ 51 · the cards as real screens: the kit of the other scenes (3 Oct 2026) ============
   css/50-real.css holds the first eight cards. Every scene drawn after them has the class rl-k on its stage and is
   built from the parts below. Spacing scale 4 · 8 · 12 · 16 · 24 · 32. Radius scale 4 · 8 · 12 · round. No text under 11 px.
   The widths a scene really gets (tools/widths.mjs): a small card 231 to 678 px, a step of the player 342 to 720 px.
   --box is the width the windows of a scene stand in: the card less its edge, never wider than a set width, in the middle. */
.rl-k{--box:min(100% - 24px,344px);--bx:calc((100% - var(--box)) / 2)}
.mini:not(.m):not(.l) .rl-k .rl-tb{height:24px}
@container (max-width:290px){.rl-opt{display:none!important}}
@container (max-width:310px){.mini.rl-c[data-end="bad"] .mn-ft.ft-l{display:none} .mini.rl-c[data-end="bad"] .mn-foot{justify-content:flex-end}}
.rl-st.rl-k.rl-rcp{padding-left:max(12px,calc((100% - 420px) / 2));padding-right:max(12px,calc((100% - 420px) / 2))}

/* ---------- small parts ---------- */
.rl-gl{display:block;height:6px;border-radius:3px;background:rgba(20,23,29,.15);flex:none}            /* a far-away line of text */
.rl-w:not(.rl-pp) .rl-gl{background:rgba(255,255,255,.16)}
.rl-gl.rl-gd{height:8px;border-radius:4px;background:rgba(20,23,29,.55)}
.rl-rd{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}                          /* an open point */
.rl-ck.rl-no>.rl-rd{margin:0 5px}
.rl-w:not(.rl-pp) .rl-ck{color:var(--fg)}
.rl-w:not(.rl-pp) .rl-ck span{color:var(--mut)}
.rl-k .rl-cks .rl-ck b{font-weight:500}
.rl-k .rl-cks .rl-no b{font-weight:600}
.rl-pp .rl-f{border-top-color:rgba(20,23,29,.1)}
.rl-pp .rl-f>span{color:#5c616a}
.rl-pp .rl-f>b{color:#15181e}
/* a small label that floats over a window */
.rl-pin{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--line2);background:#14171d;color:var(--fg);font-size:12px;line-height:1;white-space:nowrap;box-shadow:0 12px 16px -8px rgba(0,0,0,.9)}
.rl-pin b{font-weight:500}
.rl-st .rl-pin>.i{width:14px;height:14px;color:var(--txt-2)}

/* ---------- two windows that overlap: the first top left, the second bottom right ---------- */
.mini:not(.m):not(.l) .rl-st.rl-2{display:block;padding:0}
.mini:not(.m):not(.l) .rl-2>.rl-a,.mini:not(.m):not(.l) .rl-2>.rl-b{position:absolute;margin:0}
.mini:not(.m):not(.l) .rl-2>.rl-a{left:var(--bx);top:12px}
.mini:not(.m):not(.l) .rl-2>.rl-b{right:var(--bx);bottom:12px}

/* ---------- "your site": a browser window and its page ---------- */
.rl-k .rl-page{justify-content:flex-start}
.rl-k .rl-hero{flex-direction:column;align-items:flex-start;gap:12px;padding:12px}
.rl-k .rl-bk{margin:0}
.rl-k .rl-url>span:last-child{min-width:0}
/* the parts added to a site that exists */
.rl-adds{display:flex;gap:8px;padding:0 12px 12px}
.rl-add{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 12px 0 8px;border-radius:999px;background:#15181e;color:#f5f6f3;font-size:12px;line-height:1;white-space:nowrap;box-shadow:0 8px 12px -8px rgba(20,23,29,.8)}
.rl-st .rl-add .i{width:12px;height:12px}
/* the AI notice at the foot of a page */
.rl-note{display:flex;align-items:center;gap:8px;margin:0 8px 8px;padding:8px;border-radius:8px;background:#15181e;color:#f5f6f3;box-shadow:0 8px 16px -8px rgba(20,23,29,.7)}
.rl-st .rl-note>.i{width:24px;height:24px;padding:4px;border-radius:4px;background:rgba(34,197,94,.16);color:var(--green);flex:none}
.rl-note b{display:block;font-size:12px;line-height:1.3;font-weight:600}
.rl-note small{display:block;font-size:11px;line-height:1.3;color:#9096a0}
/* a phone with the same page */
.rl-phn{display:flex;flex-direction:column;z-index:2;padding:4px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:#0d1015;box-shadow:0 16px 24px -12px rgba(0,0,0,.95)}
.rl-nch{display:block;width:20px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 4px;flex:none}
.rl-scr{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;min-height:0;padding:8px;border-radius:8px;background:#faf9f5;color:#15181e}
.rl-st .rl-scr .rl-h{font-size:14px}
.mini .rl-scr .mn-key{height:24px;padding:0 8px;gap:4px;font-size:11px;background:#15181e;border-color:#15181e;color:#f5f6f3}

/* ---------- the receptionist on a site: the notice, the question, the answer ---------- */
.rl-bub.rl-lt{align-self:flex-start;background:var(--fg);color:#0a0c10;font-weight:500;border-bottom-left-radius:4px}
.rl-st.rl-pd{padding-top:8px;padding-bottom:8px}
.rl-pd .rl-chat{gap:4px;padding:8px}
.rl-pd .rl-day{line-height:14px}
.rl-pd .rl-bub{padding:4px 8px;font-size:12px}

/* ---------- an appointment, and the message after it ---------- */
.rl-ev.rl-evc{display:flex;margin:0;background:#14171d;box-shadow:0 16px 24px -12px rgba(0,0,0,.9)}
.rl-ar>.rl-a{width:var(--box)}
.rl-ar>.rl-b{width:calc(var(--box) - 40px)}
.rl-ar .rl-chat{padding:8px}
.rl-bub.rl-lnk{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 8px}
.rl-st .rl-lnk .i{width:16px;height:16px;color:var(--fg)}

/* ---------- a list that waits for your tap ---------- */
.rl-st.rl-ur{padding-top:8px;padding-bottom:8px}
.rl-ur .rl-cks{padding:0}
.rl-ur .rl-ck{height:22px;font-size:12px}
.rl-ur .rl-act{padding:4px 12px 8px}

/* ---------- a report on paper: two small charts ---------- */
.rl-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:8px 12px 12px;flex:1;background:#fcfbf7}
.rl-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.rl-cpt{font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#5c616a;white-space:nowrap}
.rl-bars{display:flex;align-items:flex-end;gap:4px;height:56px}
.rl-bars i{flex:1;min-width:0;border-radius:2px 2px 0 0;background:rgba(20,23,29,.2)}
.rl-bars i.rl-hi{background:#15803d}

/* ---------- the phone first, then the desktop ---------- */
.rl-pf>.rl-a{width:calc(var(--box) - 44px)}
.rl-pf>.rl-b{width:88px;height:130px;bottom:8px}
@container (max-width:290px){.rl-pf .rl-lk{display:none}}

/* ---------- three ticks in a window ---------- */
.rl-tl .rl-cks{padding:8px 0}
.rl-tl .rl-ck{height:28px}

/* ---------- a page of a document ---------- */
.rl-doc{display:flex;flex-direction:column;gap:8px;flex:1;padding:12px;background:#fcfbf7;color:#15181e}
.rl-ol{display:flex;align-items:center;gap:8px;min-height:12px}
.rl-ol>b{width:8px;font-size:11px;line-height:1;font-weight:600;flex:none}
.mini .rl-pp .rl-ol>b{color:#5c616a}
.rl-dn{margin:4px 0 0;font-size:13px;line-height:1.3;font-weight:500;color:#15181e}
.rl-wo .rl-doc{padding:8px 12px}

/* =====================================================================
   A STEP OF THE PLAYER (the class rl-p): 342 px on a phone, 506 · 602 · 720 px on wider screens; the stage is 300 px tall.
   The base (narrow) layout: the windows stand one under the other and overlap downwards.
   ===================================================================== */
.rl-p{gap:0}
.mini.l .rl-p.rl-2>.rl-a{margin-right:32px}
.mini.l .rl-p.rl-2>.rl-b{margin:-12px 0 0 32px}
.mini.l .rl-p .rl-pin{position:relative;align-self:flex-start;margin:8px 0 0}
.mini.l .rl-p .rl-pin.rl-p0{align-self:flex-end;margin-top:-12px}
.rl-lh{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1}
.rl-lh .iu{width:16px;height:16px;color:#15181e;flex:none}
.rl-qr{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:8px}
.rl-sum{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;padding-top:12px;border-top:1px solid rgba(20,23,29,.2);font-size:13px;line-height:1;font-weight:600;color:#15181e}
.rl-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:0 12px 12px}
.rl-strip span{display:flex;flex-direction:column;gap:4px;min-width:0}
.rl-strip small{font-size:11px;line-height:1;color:#5c616a;text-align:center}
.rl-strip i{display:block;height:16px;border-radius:4px;border:1px solid rgba(20,23,29,.14);background:rgba(20,23,29,.04)}
.rl-strip i.rl-on2{border-color:rgba(21,128,61,.5);background:rgba(21,128,61,.18)}
.rl-fl{display:flex;flex-direction:column;padding:4px 0;background:#fcfbf7;flex:1}
.rl-fr{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;font-size:13px;line-height:1;color:#15181e;white-space:nowrap}
.rl-fr+.rl-fr{border-top:1px solid rgba(20,23,29,.1)}
.rl-st .rl-fr .i{color:#5c616a}
.mini.l .rl-p.rl-la>.rl-a{margin:0 56px 0 0}
.mini.l .rl-p.rl-la>.rl-b{position:absolute;right:16px;bottom:12px;width:96px;height:148px;margin:0}
.mini.l .rl-la .rl-page{min-height:104px}
.mini.l .rl-la .rl-pin{margin:8px 0 0}
.mini.l .rl-cr>.rl-b{margin-top:-8px}

@container (min-width:440px){
  .mini.l .rl-p{--box:min(100% - 48px,528px);display:block;padding:0;font-size:14px}
  .mini.l .rl-p .rl-w{position:absolute;margin:0;border-radius:12px}
  .mini.l .rl-p .rl-tb{height:32px;gap:8px;font-size:13px}
  .mini.l .rl-p .rl-dots{gap:6px}
  .mini.l .rl-p .rl-dots i{width:8px;height:8px}
  .mini.l .rl-p .rl-url{height:22px;font-size:13px}
  .mini.l .rl-st.rl-p .rl-h{font-size:28px}
  .mini.l .rl-p .rl-hero{gap:16px;padding:16px}
  .mini.l .rl-p .rl-bk .mn-key{height:32px;padding:0 16px;font-size:13px}
  .mini.l .rl-p .rl-ck{height:36px;padding:0 16px;font-size:14px}
  .mini.l .rl-p .rl-f{height:40px;padding:0 16px;font-size:13px}
  .mini.l .rl-p .rl-doc{gap:12px;padding:16px}
  .mini.l .rl-p .rl-gl{height:8px;border-radius:4px}
  .mini.l .rl-p .rl-pin{position:absolute;margin:0;height:36px;padding:0 16px 0 12px;font-size:14px}
  .mini.l .rl-p .rl-tk{width:18px;height:18px}
  /* two windows: the first top left, the second lower right, the thin line between them */
  .mini.l .rl-p.rl-2>.rl-a{left:var(--bx);top:24px;width:calc(var(--box) * var(--aw,.6));margin:0}
  .mini.l .rl-p.rl-2>.rl-b{right:var(--bx);top:var(--bt,128px);width:calc(var(--box) * var(--bw,.52));margin:0}
  .mini.l .rl-p .rl-ln{display:block;position:absolute;left:calc(var(--bx) + var(--box) * var(--aw,.6));top:40px;width:calc(var(--box) * (1 - var(--aw,.6) - var(--bw,.52) / 2));height:calc(var(--bt,128px) - 40px)}
  .mini.l .rl-p .rl-ln::before,.mini.l .rl-p .rl-ln::after{display:block}
  /* 01 the free look: your site, and the page of what we found */
  .rl-ck1{--aw:.6;--bw:.52;--bt:132px}
  /* 02 a first version: one window, the label on its corner */
  .mini.l .rl-cc>.rl-w{left:calc(var(--bx) + var(--box) * .04);top:28px;width:calc(var(--box) * .92)}
  .mini.l .rl-cc .rl-page{min-height:152px}
  .mini.l .rl-cc .rl-tag{height:22px;padding:0 12px;font-size:12px;letter-spacing:.04em}
  .mini.l .rl-cc .rl-pin{right:var(--bx);top:192px}
  /* 03 one price, in writing */
  .mini.l .rl-qt>.rl-w{left:calc(var(--bx) + var(--box) * .14);top:24px;width:calc(var(--box) * .72)}
  .mini.l .rl-qt .rl-doc{gap:16px;padding:16px 24px 24px}
  .mini.l .rl-qt .rl-lh{font-size:14px;margin-bottom:4px}
  .mini.l .rl-qt .rl-lh .iu{width:20px;height:20px}
  .mini.l .rl-qt .rl-sum{font-size:14px}
  .mini.l .rl-qt .rl-pin{right:calc(var(--bx) + var(--box) * .04);top:208px}
  /* 04 the build: the site grows, the accounts are in your name */
  .rl-bd1{--aw:.6;--bw:.5;--bt:156px}
  .mini.l .rl-p .rl-strip{gap:8px;padding:0 16px 16px}
  .mini.l .rl-p .rl-strip i{height:20px}
  /* 05 the launch: a phone, a desktop, a tick for each */
  .mini.l .rl-p.rl-la>.rl-a{left:var(--bx);top:24px;width:calc(var(--box) * .78);margin:0}
  .mini.l .rl-la .rl-page{min-height:136px}
  .mini.l .rl-p.rl-la>.rl-b{left:auto;right:calc(var(--bx) + 40px);top:56px;bottom:auto;width:120px;height:212px;border-radius:16px;padding:6px}
  .mini.l .rl-la .rl-scr{gap:12px;padding:12px 8px;border-radius:12px}
  .mini.l .rl-st.rl-la .rl-scr .rl-h{font-size:20px}
  .mini.l .rl-la .rl-p1{right:var(--bx);top:240px}
  .mini.l .rl-la .rl-p2{left:calc(var(--bx) + 24px);top:176px}
  /* 06 care, or the files */
  .rl-cr{--aw:.5;--bw:.56;--bt:104px}
  .mini.l .rl-cr>.rl-a{top:32px}
  .mini.l .rl-p .rl-fr{height:40px;padding:0 16px;font-size:14px}
  .mini.l .rl-st.rl-p .rl-fr .i{width:16px;height:16px}
}

/* ---------- the first eight: two fixes for widths the test did not have ---------- */
/* the sheet and the dashboard stand in the middle of a wide card, and the dashboard keeps its name at 263 px */
@container (min-width:261px){
  .rl-dash{--dx:max(12px,calc(50% - 160px))}
  .rl-dash .rl-a{left:var(--dx)}
  .rl-dash .rl-b{left:calc(var(--dx) + 136px);right:var(--dx)}
}
@container (min-width:261px) and (max-width:299px){.rl-dash .rl-b{left:calc(var(--dx) + 88px)}}

/* ============ 52 · the cards as real screens: AI systems (and the parts the assistant and the accountants reuse) ============ */

/* ---------- a chat: a message that came in ---------- */
.rl-bub.rl-in{align-self:flex-start;border-bottom-left-radius:4px}

/* ---------- 01 the input arrives: a message window, and the places it can arrive in ---------- */
.rl-st.rl-wi{gap:8px}
.rl-wi .rl-chat{padding:8px}
.rl-wi .rl-bub{padding:4px 8px;font-size:12px}
.rl-places{display:flex;gap:8px;flex:none}
.rl-place{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;border:1px solid var(--line2);font-size:11px;line-height:1;color:var(--txt-2);white-space:nowrap}
.rl-place.rl-pon{background:rgba(255,255,255,.09);color:var(--fg)}
.rl-st .rl-place .i{width:12px;height:12px}
@container (max-width:270px){.rl-opt3{display:none!important}}

/* ---------- 02 the work is done: the idem key on the corner of the window ---------- */
.rl-wwb{position:relative}
.rl-ww .rl-cks{padding:8px 0}
.rl-key2{position:absolute;right:8px;top:-20px;z-index:2}

/* ---------- 03 the output lands: a folder with the file in it ---------- */
.rl-wo2 .rl-fr{height:40px}
.rl-wo2 .rl-sb{min-height:28px;gap:8px;font-size:12px;color:#15181e}

/* ---------- a reply drafted in your words (a small card) ---------- */
.rl-st.rl-rpl{display:block;padding:0}
.rl-rpl>.rl-a,.rl-rpl>.rl-b{position:absolute}
.rl-inq{display:none;align-items:center;gap:8px;left:var(--bx);top:8px;height:28px;max-width:var(--box);padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--line2);background:#14171d;color:var(--fg);font-size:12px;line-height:1;white-space:nowrap;box-shadow:0 8px 16px -8px rgba(0,0,0,.9)}
.rl-rpl>.rl-b{left:var(--bx);right:var(--bx);bottom:8px}
.rl-rpl .rl-draft{padding:8px 12px 4px}
.rl-st.rl-rpl .rl-txt{font-size:12px;line-height:1.35}
.rl-rpl .rl-act{flex-wrap:wrap;gap:4px 8px;padding:0 12px 8px}
.rl-rpl .rl-act .mn-sig{order:-1;width:100%;line-height:16px}
.mini .rl-pp .mn-key.gone{background:transparent;border-color:rgba(20,23,29,.28);color:#15181e}
@container (max-width:250px){.rl-rpl .rl-tb{height:20px} .rl-rpl .rl-draft{padding:4px 12px 0}}
@container (min-width:290px){
  .rl-rpl .rl-inq{display:flex}
  .rl-st.rl-rpl .rl-txt{font-size:13px}
  .rl-rpl .rl-act .mn-sig{order:0;width:auto;margin-left:auto}
}

/* ---------- the Monday message, and the contact five people write to ---------- */
.rl-mo .rl-chat,.rl-tm .rl-chat{gap:4px;padding:8px}
.rl-mo .rl-bub{max-width:100%;padding:4px 8px;font-size:12px}
.rl-ct{display:flex;flex-direction:column;gap:8px;padding:12px}
.rl-pile{display:flex;align-items:center}
.rl-pile .rl-av{width:28px;height:28px;margin-right:-4px;border:2px solid #14171d}
.rl-pile .mn-ok{margin-left:auto}
.rl-cs{font-size:11px;line-height:1.3;color:var(--mut);white-space:nowrap}

/* ---------- a tracker, and the top of a report ---------- */
.rl-tr .rl-sheet .mn-t td,.rl-tr .rl-sheet .mn-t th{padding:4px 12px}
.rl-st.rl-rt{padding-top:8px;padding-bottom:8px}
.rl-rep .rl-doc{gap:0;padding:4px 12px 0}
.rl-big{font-size:24px;line-height:1;font-weight:600;letter-spacing:-.02em;color:#15181e;font-variant-numeric:tabular-nums}
.rl-bl{font-size:12px;line-height:1.3;color:#5c616a}
.rl-sheet.rl-in{margin:4px -12px 0;border-top:1px solid rgba(20,23,29,.1)}
.rl-rep .rl-sheet .mn-t td{padding:4px 12px}

/* ---------- the accounts: three rows ---------- */
.rl-od3 .rl-f,.rl-od.rl-od3 .rl-f{height:34px}

/* ---------- the steps of the player ---------- */
.rl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px 8px}
.rl-tiles span{display:grid;place-items:center;height:48px;border-radius:8px;background:rgba(255,255,255,.06)}
.rl-st .rl-tiles .i{width:20px;height:20px;color:var(--mut)}
.rl-cinfo{padding:0 12px 12px;font-size:12px;line-height:1.3;color:var(--txt-2)}
.rl-strike{position:relative}
.mini .rl-pp .rl-strike{color:#5c616a}
.rl-strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1px;background:var(--red)}
.rl-none{display:grid;place-items:center;height:56px;font-size:13px;color:var(--mut)}
.rl-days5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:12px 12px 4px}
.rl-days5 i{display:grid;place-items:center;height:24px;border-radius:4px;border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.2);font-style:normal;font-size:11px;font-weight:500;line-height:1;color:var(--fg);transition:background .3s,border-color .3s,color .3s}
.rl-days5 i:nth-child(2){transition-delay:.11s}.rl-days5 i:nth-child(3){transition-delay:.22s}.rl-days5 i:nth-child(4){transition-delay:.33s}.rl-days5 i:nth-child(5){transition-delay:.44s}
.mini.arm .rl-days5[data-at]:not(.a-on) i{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--mut);transition-delay:0s}
.mini.l .rl-bi>.rl-b{margin-top:-8px}
@container (min-width:440px){
  .rl-cl{--aw:.56;--bw:.52;--bt:156px}
  .mini.l .rl-p .rl-tiles{gap:12px;padding:16px 16px 12px}
  .mini.l .rl-p .rl-tiles span{height:64px}
  .mini.l .rl-st.rl-p .rl-tiles .i{width:24px;height:24px}
  .mini.l .rl-p .rl-cinfo{padding:0 16px 16px;font-size:13px}
  .rl-bi{--aw:.56;--bw:.48;--bt:116px}
  .mini.l .rl-bi>.rl-a{top:40px}
  .mini.l .rl-p .rl-none{height:80px;font-size:14px}
  .mini.l .rl-p .rl-days5{gap:8px;padding:16px 16px 4px}
  .mini.l .rl-p .rl-days5 i{height:32px;font-size:12px}
}

/* =====================================================================
   The two other lines of the stage: "Monday comes" and "The month ends" (the layout of "An enquiry arrives": rl-enq)
   ===================================================================== */
/* the clock of a phone: on a narrow card a tile, on the stage a phone */
.rl-lock{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(160deg,#1b1f27,#0d1015);color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -16px rgba(0,0,0,.95),0 8px 16px -8px rgba(0,0,0,.75)}
.rl-lock .rl-nch{display:none}
.rl-lt2{font-size:32px;line-height:1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rl-ld{font-size:14px;line-height:1;color:var(--txt-2)}
.rl-mon .rl-ck{height:28px}
.mini.l .rl-mon .rl-ln{margin-top:0;align-self:center}
/* the sheet whose numbers are far away, and the report */
.rl-far td{height:24px;vertical-align:middle}
.rl-sheet .mn-t.rl-far td{padding:0 12px}
.rl-mth .rl-fr3{display:none}
.rl-mth .rl-rep .rl-doc{padding:12px 12px 0}
.rl-mth .rl-big{font-size:28px}
.mini.l .rl-mth .rl-ln{margin-top:0;align-self:center}
@container (min-width:900px){
  .mini.l .rl-mon .rl-lock{position:absolute;left:104px;top:40px;width:184px;height:320px;flex-direction:column;align-items:center;gap:12px;padding:16px 16px 0;border-radius:32px;border-width:2px}
  .mini.l .rl-mon .rl-lock .rl-nch{display:block;width:56px;height:6px;border-radius:3px;margin:0 auto 40px}
  .mini.l .rl-mon .rl-lt2{font-size:48px}
  .mini.l .rl-mon .rl-ld{font-size:16px}
  .mini.l .rl-mon .rl-b{left:392px;top:108px;width:536px}
  .mini.l .rl-mon .rl-ln{left:288px;top:76px;width:372px;height:32px}
  .mini.l .rl-mon .rl-ck{height:44px}
  .mini.l .rl-mth .rl-a{left:32px;top:32px;width:440px}
  .mini.l .rl-mth .rl-fr3{display:table-row}
  .mini.l .rl-far td{height:44px}
  .mini.l .rl-sheet .mn-t.rl-far td{padding:0 16px}
  .mini.l .rl-far .rl-gl{height:8px;border-radius:4px}
  .mini.l .rl-mth .rl-b{left:416px;top:96px;width:512px}
  .mini.l .rl-mth .rl-rep .rl-doc{gap:8px;padding:24px 0 0}
  .mini.l .rl-mth .rl-big{padding:0 24px;font-size:48px}
  .mini.l .rl-mth .rl-bl{padding:0 24px;font-size:16px}
  .mini.l .rl-mth .rl-sheet.rl-in{margin:16px 0 0}
  .mini.l .rl-mth .rl-rep .rl-sheet .mn-t td{padding:8px 24px}
  .mini.l .rl-mth .rl-ln{left:472px;top:52px;width:200px;height:44px}
}

/* ============ 53 · the cards as real screens: the assistant, the accountants, and two job pictures ============ */

/* ---------- the chat with idem (a small card) ---------- */
.rl-st.rl-ro,.rl-st.rl-sa{padding-top:8px;padding-bottom:8px}
.rl-ro .rl-chat,.rl-sa .rl-chat{gap:4px;padding:8px}
.rl-ro .rl-bub{max-width:100%;padding:4px 8px;font-size:12px;line-height:1.35}
@container (max-width:340px){.rl-ro .rl-tb{display:none}}
@container (max-width:290px){.rl-sa .rl-tb{display:none}}   /* a narrow card crops to the conversation: it never shrinks the text */
/* a file in a chat, and the mark it carries */
.rl-fc{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rl-st .rl-fc .i{width:14px;height:14px}
.rl-fa{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rl-fa .rl-fc{height:24px;padding:0 8px;border-radius:4px;background:rgba(255,255,255,.09);color:var(--fg);font-size:12px;line-height:1}
.rl-fmk{font-size:11px;line-height:1.3;color:var(--mut);white-space:nowrap}
@container (min-width:320px){.rl-fa{flex-direction:row;align-items:center;gap:8px}}
/* a draft that waits (the same sheet as the reply) */
@container (min-width:250px){.rl-yt .rl-act .mn-sig{order:0;width:auto;margin-left:auto}}
.rl-late{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1;color:#5c616a;white-space:nowrap}
/* a file that carries the engine's tag */
.rl-tf .rl-sheet .mn-t td{padding:4px 12px}
.rl-tf .rl-sb{min-height:24px}
/* a voice note in, a written quote out */
.rl-st.rl-vo{display:block;padding:0}
.rl-vo>.rl-a,.rl-vo>.rl-b{position:absolute}
.rl-vm{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--line2);background:#14171d;color:var(--fg);box-shadow:0 8px 16px -8px rgba(0,0,0,.9)}
.rl-vm time,.rl-vb time{font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
.rl-st .rl-vm>.i,.rl-st .rl-vb>.i{width:14px;height:14px;fill:currentColor;stroke:none}
.rl-vo>.rl-a{left:var(--bx);top:8px}
.rl-vo>.rl-b{left:var(--bx);right:var(--bx);bottom:8px}
.rl-vo .rl-sheet .mn-t td{padding:4px 12px}

/* ---------- five apps, one client · five channels become one contact ---------- */
.rl-st.rl-f5,.rl-st.rl-oc{gap:8px}
.rl-apps{display:flex;justify-content:center;align-items:flex-start;flex:none}
.rl-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:48px;height:44px;margin:0 -2px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#14171d;color:var(--fg);box-shadow:0 12px 16px -8px rgba(0,0,0,.95);transition:opacity .5s}
.rl-app>i{display:block;align-self:stretch;height:8px;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;background:rgba(255,255,255,.06)}
.rl-st .rl-app .i{width:16px;height:16px;margin-top:4px}
.rl-ap1,.rl-ap3{margin-top:12px}
.rl-who{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border-radius:8px;border:1px solid var(--line2);background:#14171d;font-size:12px;line-height:1;white-space:nowrap}
.rl-who>span:last-child{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--txt-2)}
.rl-app[data-at].a-on,.mini:not(.arm) .rl-app[data-at]{opacity:.35}
.rl-oc .rl-ap1,.rl-oc .rl-ap3{margin-top:0}
.rl-oc .rl-app{height:36px}
.rl-ct2{display:flex;align-items:center;justify-content:space-between;gap:8px;height:32px;padding:0 12px;font-size:12px;line-height:1;color:var(--fg);white-space:nowrap}

/* ---------- the chase: one message window per client, one behind the other ---------- */
.rl-st.rl-chs{display:block;padding:0}
.rl-chs>.rl-w{position:absolute;width:calc(var(--box) - 48px)}
.rl-chs>.rl-c0{left:var(--bx);top:10px}
.rl-chs>.rl-c1{left:calc(var(--bx) + 24px);top:36px}
.rl-chs>.rl-c2{left:calc(var(--bx) + 48px);top:62px}
.rl-chs .rl-chat{padding:8px}
.rl-chs .rl-bub{width:96px;padding:8px}
.rl-chs .rl-bub .rl-gl{background:rgba(255,255,255,.3)}

/* ---------- a figure that is missing stays empty ---------- */
.rl-miss{display:block;height:12px;margin-top:auto;border-radius:2px;background:repeating-linear-gradient(135deg,rgba(40,34,28,.28) 0 2px,transparent 2px 5px)}
.rl-chk{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 8px;border-radius:999px;border:1px solid rgba(225,6,0,.55);font-size:11px;line-height:1;color:#15181e}
.rl-chk::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red)}
/* RO "de verificat" and IT "da controllare" are the engine's own words and longer than "to check" (sweep of 4 Oct 2026,
   LEG-F8): at a 1024 px window the table ran 5 and 12 px out of its scene. In this one scene, in these two languages,
   the mark gives up its dot and 2 px a side, and the cells 2 px a side: 20 px back. English is not touched. */
html:lang(ro) .rl-ng .rl-chk,html:lang(it) .rl-ng .rl-chk{gap:0;padding:0 6px}
html:lang(ro) .rl-ng .rl-chk::before,html:lang(it) .rl-ng .rl-chk::before{display:none}
html:lang(ro) .rl-ng .rl-sheet .mn-t td,html:lang(it) .rl-ng .rl-sheet .mn-t td{padding:4px 6px}

/* ---------- seven days, then the file is gone ---------- */
.rl-days7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:12px 12px 8px;background:#fcfbf7}
.rl-days7 i{display:grid;place-items:center;height:24px;border-radius:4px;border:1px solid rgba(21,128,61,.5);background:rgba(21,128,61,.16);font-style:normal;font-size:11px;font-weight:500;line-height:1;color:#15181e;transition:background .3s,border-color .3s,color .3s}
.rl-days7 i:nth-child(2){transition-delay:.11s}.rl-days7 i:nth-child(3){transition-delay:.22s}.rl-days7 i:nth-child(4){transition-delay:.33s}.rl-days7 i:nth-child(5){transition-delay:.44s}.rl-days7 i:nth-child(6){transition-delay:.55s}.rl-days7 i:nth-child(7){transition-delay:.66s}
.mini.arm .rl-days7[data-at]:not(.a-on) i{background:transparent;border-color:rgba(20,23,29,.16);color:#5c616a;transition-delay:0s}
.rl-7d .rl-fl{border-top:1px solid rgba(20,23,29,.1)}
.rl-fr em{margin-left:auto;font-style:normal;font-size:11px;color:#5c616a}
.rl-del>span{transition:opacity .5s}
.rl-del.a-on>span,.mini:not(.arm) .rl-del>span{opacity:.45;text-decoration:line-through}
.rl-del.a-on>.i,.mini:not(.arm) .rl-del>.i{opacity:.45}

/* ---------- a booking and its reminder · a product and its Pay key (on no page of the preview) ---------- */
.rl-bk2>.rl-b{width:var(--box)}
.rl-bk2 .rl-chat{gap:4px}
.rl-bk2 .rl-bub{max-width:100%;padding:4px 8px;font-size:12px}
.rl-prod{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px}
.rl-prod .mn-img{width:56px;height:56px}
.rl-pi{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;line-height:1.2;color:#15181e;white-space:nowrap}
.rl-pi small{font-size:11px;color:#5c616a}
.rl-price{font-size:16px;font-weight:600}
.rl-pay{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.rl-szs{display:flex;gap:4px}
.rl-szs i{display:grid;place-items:center;min-width:24px;height:20px;border-radius:999px;border:1px solid rgba(20,23,29,.25);font-style:normal;font-size:11px;line-height:1;color:#15181e}
.rl-szs i.rl-son{background:#15181e;border-color:#15181e;color:#f5f6f3}

/* =====================================================================
   The steps of the player
   ===================================================================== */
/* the contact card */
.rl-cth{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line)}
.rl-av.rl-xl{width:40px;height:40px;background:rgba(255,255,255,.09)}
.rl-xl .iu{width:20px;height:20px;color:var(--fg)}
.rl-cth>div{flex:1;min-width:0;line-height:1.3}
.rl-cth b{display:block;font-size:14px}
.rl-cth small{display:block;font-size:11px;color:var(--mut)}
/* a tall chat: hello, the files a client sends */
.rl-he .rl-chat{gap:8px;padding:12px}
.rl-he .rl-bub{font-size:13px}
.rl-bub.rl-vb{display:inline-flex;align-items:center;gap:8px}
/* your clients, each with their own contact */
.rl-own{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1;color:var(--mut);white-space:nowrap}
.rl-own .iu{width:12px;height:12px;color:var(--fg)}
/* the photo of the receipts, as a file on the stage */
.rl-pht{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#14171d;box-shadow:0 24px 48px -16px rgba(0,0,0,.95),0 8px 16px -8px rgba(0,0,0,.75)}
.mini.l .rl-pht .rl-photo,.mini.l .rl-jb .rl-photo{display:block;width:100%;height:52px}
.mini.l .rl-pht .rl-slip,.mini.l .rl-jb .rl-slip{top:6px;width:29%;height:40px;padding:4px 4px 8px;justify-content:space-between}
.mini.l .rl-pht .rl-slip i,.mini.l .rl-jb .rl-slip i{display:none}
.mini.l .rl-pht .rl-slip em,.mini.l .rl-jb .rl-slip em{margin-top:0}
.mini.l .rl-pht .rl-s0,.mini.l .rl-jb .rl-s0{left:3%;transform:rotate(-2deg)}
.mini.l .rl-pht .rl-s1,.mini.l .rl-jb .rl-s1{left:35.5%;top:8px;transform:rotate(1.5deg)}
.mini.l .rl-pht .rl-s2,.mini.l .rl-jb .rl-s2{left:68%;transform:rotate(-1deg)}
.mini.l .rl-rl .rl-sheet .mn-t tr:has(th),.mini.l .rl-jb .rl-sheet .mn-t tr:has(th){display:none}
/* the four ways to hand in a job */
.rl-hand{display:flex;flex-wrap:wrap;gap:4px 8px;padding:8px 12px 0}
.rl-jb .rl-chat{padding:8px 12px 12px}
.rl-jb .rl-ph{align-self:stretch;max-width:100%;padding:4px;gap:4px}
@container (max-width:439px){.rl-opt4{display:none!important}}
/* the reminder that waits (the tall size) */
.rl-am .rl-draft{padding:12px 12px 4px}
.rl-am .rl-act{padding:4px 12px 12px}
.rl-am .rl-act .mn-sig{margin-left:auto}

@container (min-width:440px){
  /* one window in the middle of the stage */
  .mini.l .rl-p.rl-1>.rl-w{left:calc(var(--bx) + var(--box) * .14);top:24px;width:calc(var(--box) * .72)}
  .mini.l .rl-p .rl-cth{gap:16px;padding:16px}
  .mini.l .rl-p .rl-av.rl-xl{width:48px;height:48px}
  .mini.l .rl-p .rl-xl .iu{width:24px;height:24px}
  .mini.l .rl-p .rl-cth b{font-size:16px}
  .mini.l .rl-p .rl-cth small{font-size:13px}
  .mini.l .rl-p.rl-he>.rl-w{top:16px}
  .mini.l .rl-he .rl-chat{gap:8px;padding:16px}
  .mini.l .rl-he .rl-bub{font-size:14px;padding:8px 12px}
  .mini.l .rl-he .mn-ai{font-size:13px;padding:8px 12px}
  .mini.l .rl-he .mn-sig{font-size:12px}
  .mini.l .rl-p .rl-fc .i{width:16px;height:16px}
  .mini.l .rl-p.rl-as>.rl-w{top:40px}
  .mini.l .rl-as .rl-row{gap:12px;padding:12px 16px}
  .mini.l .rl-as .rl-av{width:32px;height:32px;font-size:12px}
  .mini.l .rl-as .rl-rh b{font-size:14px}
  .mini.l .rl-as .rl-own{font-size:12px}
  /* the photo and its table */
  .rl-rl{--aw:.44;--bw:.58;--bt:64px}
  .mini.l .rl-p.rl-rl>.rl-a{top:32px;padding:12px;border-radius:12px;position:absolute}
  .mini.l .rl-rl .rl-photo{height:120px}
  .mini.l .rl-rl .rl-slip{top:14px;width:30%;height:92px;padding:8px 4px 12px 8px;gap:8px;justify-content:flex-start;font-size:11px}
  .mini.l .rl-rl .rl-slip i{display:block}
  .mini.l .rl-rl .rl-slip em{margin-top:auto}
  .mini.l .rl-rl .rl-s0{left:3%}
  .mini.l .rl-rl .rl-s1{left:35%;top:18px}
  .mini.l .rl-rl .rl-s2{left:67%}
  .mini.l .rl-rl .rl-cap{font-size:13px}
  .mini.l .rl-rl .rl-sheet .mn-t tr:has(th),.mini.l .rl-jb .rl-sheet .mn-t tr:has(th){display:table-row}
  .mini.l .rl-p .rl-sheet .mn-t{font-size:13px;line-height:1.3}
  .mini.l .rl-p .rl-sheet .mn-t td{padding:8px 12px}
  .mini.l .rl-p .rl-sheet .mn-t th{padding:4px 12px}
  .mini.l .rl-rl .rl-ln{top:48px;height:calc(var(--bt) - 48px)}
  /* hand it a job */
  .rl-jb{--aw:.52;--bw:.54;--bt:96px}
  .mini.l .rl-jb .rl-hand{padding:12px 16px 0}
  .mini.l .rl-jb .rl-place{height:28px;padding:0 12px;font-size:12px}
  .mini.l .rl-jb .rl-chat{padding:12px 16px 16px}
  .mini.l .rl-jb .rl-photo{height:64px}
  .mini.l .rl-jb .rl-slip{height:52px;font-size:11px}
  .mini.l .rl-jb .rl-cap{font-size:12px}
  /* the reminder that waits */
  .mini.l .rl-p.rl-am>.rl-w{top:56px}
  .mini.l .rl-am .rl-late{font-size:12px}
  .mini.l .rl-am .rl-draft{padding:24px 24px 12px}
  .mini.l .rl-st.rl-am .rl-txt{font-size:18px;line-height:1.4}
  .mini.l .rl-am .rl-act{padding:12px 24px 16px;border-top:1px solid rgba(20,23,29,.1)}
  .mini.l .rl-am .rl-act .mn-key{height:36px;padding:0 16px;font-size:14px}
  .mini.l .rl-am .mn-sig{font-size:12px}
}

/* ---- the "What we do" stack on the home page (7 Oct 2026; site-build/stack.mjs, js/stack.js) ----
   The same pane as the work carousel (radius 18, hairline, soft shadow, caption fade), four of them, one in front.
   Each pane shows one drawn animation in a frame (site/anim/). The frame's own styles are in site-build/stack/. */
.stack{--W:min(760px,86vw);--H:calc(var(--W)*.64)}
.sk-stage{position:relative;width:var(--W);height:calc(var(--H) + 84px);margin:28px auto 0;padding-top:84px;perspective:1800px}
.sk{position:absolute;left:0;top:84px;width:var(--W);height:var(--H);margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#0b0d12;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);transform-origin:50% 0;cursor:pointer;outline:none;
  transition:transform 1s cubic-bezier(.19,1,.22,1),filter .8s ease,opacity .5s ease;will-change:transform}
.sk::after{content:"";position:absolute;inset:0;border-radius:18px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 60%);pointer-events:none}
.sk[data-depth="0"]{z-index:4;transform:translateY(0) scale(1);filter:none;cursor:default}
.sk[data-depth="1"]{z-index:3;transform:translateY(-28px) scale(.955);filter:brightness(.5)}
.sk[data-depth="2"]{z-index:2;transform:translateY(-56px) scale(.91);filter:brightness(.34)}
.sk[data-depth="3"]{z-index:1;transform:translateY(-84px) scale(.865);filter:brightness(.22)}
.sk[data-depth]:not([data-depth="0"]):hover{filter:brightness(.7)}
.sk.leaving{z-index:5;transform:translateY(26px) scale(.985);opacity:0;transition-duration:.45s}
.sk:focus-visible{box-shadow:0 0 0 2px var(--red,#e10600),0 40px 80px -30px rgba(0,0,0,.9)}
.sk-pic{position:absolute;inset:0 0 86px 0;overflow:hidden;background:#0b0d12}
.sk-pic.anim iframe{display:block;width:100%;height:100%;border:0;background:#0b0d12;pointer-events:none}
.sk .cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px 16px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;background:linear-gradient(0deg,rgba(0,0,0,.92) 60%,transparent);font-size:14px;font-weight:500}
.sk-l{display:flex;flex-direction:column;gap:6px;min-width:0}
/* the sentence keeps the place of two lines, so the label over it never jumps; no short word is left alone */
.sk-story{display:block;min-height:2.8em;font-size:16px;line-height:1.4;font-weight:400;color:#fff;max-width:40ch;text-wrap:balance}
.sk-k{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--txt-2,#b3b3b3)}
.sk-p{white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;padding:6px 11px;border:1px solid var(--line2);border-radius:999px;background:rgba(10,12,16,.6)}

.sk-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px}
.sk-a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--txt-2,#b3b3b3);font:300 22px/1 Outfit,sans-serif;cursor:pointer;transition:border-color .3s,color .3s}
.sk-a:hover{border-color:var(--txt-2,#b3b3b3);color:#fff}
/* 18 Oct 2026 (Leonard: "make it good for every phone"; every-device found 8 px dots): each dot is a 24 x 24 px tap area
   (WCAG 2.5.8) with the same 8 px dot drawn in its middle; centres move from 16 px to 24 px apart so two areas never overlap. */
.sk-dots{display:flex;gap:0}
.sk-d{position:relative;width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer}
.sk-d::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .3s,transform .3s}
.sk-d.on::before{background:var(--red,#e10600);transform:scale(1.25)}
.sk-d:focus-visible{outline:2px solid var(--fg,#f5f6f3);outline-offset:-2px;border-radius:50%}
.sk-hint{position:static;transform:none;text-align:center;margin-top:12px}
/* the words of the four offers share one place; only the one of the pane in front is shown and can be reached */
.sk-texts{display:grid;max-width:620px;margin:28px auto 0;text-align:center}
.sk-t{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .5s ease,transform .6s ease,visibility 0s linear .5s;pointer-events:none}
.sk-t.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .6s ease;pointer-events:auto}
.sk-t h3{margin:0 0 10px;font-size:28px;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}   /* as .card h3: no short word alone on the last line (RO "…formatul / tău.") */
.sk-t p{margin:0 0 16px;font-size:17px;line-height:1.55;color:var(--txt-2,#b3b3b3)}
.sk-t .more{display:inline-block}
@media (max-width:1024px){.stack{--W:min(640px,88vw)}}
@media (max-width:560px){.stack{--W:88vw;--H:calc(var(--W)*1.22)}.sk-stage{padding-top:60px;height:calc(var(--H) + 60px)}.sk{top:60px}.sk[data-depth="1"]{transform:translateY(-20px) scale(.955)}.sk[data-depth="2"]{transform:translateY(-40px) scale(.91)}.sk[data-depth="3"]{transform:translateY(-60px) scale(.865)}
  .sk-pic{inset:0 0 150px 0}.sk .cap{padding:12px 14px;font-size:13px;flex-direction:column;align-items:flex-start;gap:10px}.sk-story{font-size:15px}.sk-t h3{font-size:23px}.sk-t p{font-size:16px}}
@media (prefers-reduced-motion:reduce){.sk,.sk-t{transition:none}}

/* ---------- wings: the three trust cards of the home page stand as the three doors did (Leonard, 8 Oct 2026) ----------
   His picture: the fan of the first home page (css/site.css, .fan): the middle card flat, the two outer cards turned
   toward the middle and set a little back. His words: "they remain like this is just that I want the position to be as
   in the screenshot 2". So this part gives the POSITION only. The cards keep their colours, their scenes, the light on
   the contour and the move under the pointer.
   The turn is written with `rotate` and `translate`, NOT with `transform`, on purpose:
     · js/cards-light.js leans a card with its own `transform`, and only a card whose `transform` is `none` (still());
       `rotate` and `translate` are added to it by the browser, so the card is turned AND leans;
     · the reveal (.rise) also writes `transform`.
   13 degrees: the first fan ran from 24 to 10 degrees with the scroll and his picture shows it near its end; these cards
   are narrower than the doors were, so 13 gives the same slope of the top and bottom edges (looked at beside 10 and 16).
   It does not move with the scroll. Only where the row has three columns: at 860 px and under the cards stand one under
   the other, flat (css/structure.css, .grid.g3:has(>.card.mc)).
   The cards measure (tests/cards.mjs) reads the row flat, as it does the first fan: a turned card has no straight box. */
@media (min-width:861px){
  .grid.wings{perspective:1600px}
  .grid.wings>.card:nth-child(1){rotate:y 13deg;translate:0 0 -60px}
  .grid.wings>.card:nth-child(3){rotate:y -13deg;translate:0 0 -60px}
}

/* ---------- the light on the contour of every card, and the card that moves under the pointer (Leonard, 7 Oct 2026) ----------
   His two pictures: "Card UI Design Prompts & Examples _ Superdesign (1).mp4" (a light on the contour that follows the
   pointer) and "… (2).mp4" (the card under the pointer moves). His words: "this is great -- this is what I was talking
   about"; then "just little bit less lighting".
   8 Oct 2026: the light is GREEN ONLY (it was red to green). His words: "the line moving contur' to be just green
   lighting -- the green as idem it's running". That green is --green, the one the page turns to when the scroll arrives
   at the button. The copy of the red-to-green files: backups/cards-light-2026-10-08-green/before/.
   It adds no element and changes no size. One ::after ring (the .card ::before is taken), one shadow, one transform.
   js/cards-light.js sets the numbers. First built and measured as preview/cards-light-2026-10-07.
   This part is the last of css/structure.css on purpose: it must come after every card rule. */

@property --cl-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --cl-o { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ONE number for how strong the light is, on every card. 1 = the first preview. .7 = his "little bit less" (he said
   "is oke", 7 Oct 2026): the glow is 30 % weaker, the line 18 % weaker. The move is not changed by this number.
   8 Oct 2026: .3. With the light green only he said "less lighting please -- it lights to heavy" (green is much
   brighter to the eye than the red half it took the place of). Against .7: the glow is 57 % weaker, the line 29 %.
   8 Oct 2026, after his look at .3: .2. His words: "a bit less and is oke". Against .7: the glow is 71 % weaker, the
   line 37 %. This number is decided: do not ask him again. */
:root { --cl-s: .2; }

.cl {
  --cl-a: 0deg;            /* where on the contour the light stands: 0 = top, clockwise */
  --cl-o: 0;               /* how bright: 0 to 1 */
  --cl-rdx: 0; --cl-rdy: 0;   /* the side the first end of the light leans to (a unit vector; it was the red end) */
  --cl-gdx: 0; --cl-gdy: 0;   /* the side the second end leans to */
}
.cl.cl-rel { position: relative; }   /* a card that was not positioned (a tile, a door): the ring needs it; nothing inside moves */

/* 1. the line on the contour */
.cl::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: calc(var(--cl-r, 22px) - 1px); padding: 1px;
  background: conic-gradient(from calc(var(--cl-a) - 58deg) at 50% 50%, transparent 0deg, var(--green) 20deg, var(--green) 96deg, transparent 116deg 360deg);
  background: conic-gradient(from calc(var(--cl-a) - 58deg) at 50% 50% in oklab, transparent 0deg, var(--green) 20deg, var(--green) 96deg, transparent 116deg 360deg);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  opacity: calc(var(--cl-o) * (.4 + .6 * var(--cl-s, 1)));
}
/* a card that does not cut its own edge: the line stands on the border itself */
.cl.cl-out::after { inset: -1px; border-radius: inherit; }

/* 2. the soft light around the line: outside the card and just inside it, on the pointer's side only */
.cl {
  --cl-glow:
    calc(var(--cl-rdx) * 22px) calc(var(--cl-rdy) * 22px) 38px -22px color-mix(in srgb, var(--green) calc(var(--cl-o) * var(--cl-s, 1) * 52%), transparent),
    calc(var(--cl-gdx) * 22px) calc(var(--cl-gdy) * 22px) 38px -22px color-mix(in srgb, var(--green) calc(var(--cl-o) * var(--cl-s, 1) * 52%), transparent),
    inset calc(var(--cl-rdx) * -20px) calc(var(--cl-rdy) * -20px) 34px -20px color-mix(in srgb, var(--green) calc(var(--cl-o) * var(--cl-s, 1) * 24%), transparent),
    inset calc(var(--cl-gdx) * -20px) calc(var(--cl-gdy) * -20px) 34px -20px color-mix(in srgb, var(--green) calc(var(--cl-o) * var(--cl-s, 1) * 24%), transparent);   /* both ends at the green's own strength (the red end was 64% and 30%) */
}
.cl.cl-near { box-shadow: var(--cl-bs, 0 0 transparent), var(--cl-glow); }   /* --cl-bs is the card's own shadow, read by the script */
.tile.cl.cl-near:hover { box-shadow: var(--sh-hover, var(--cl-bs, 0 0 transparent)), var(--cl-glow); }   /* the tile keeps its own hover shadow */
.tile.cl.cl-near { transition-property: transform, border-color; }   /* the shadow follows the pointer at once */

/* 3. the move: the script writes the transform each frame, so the card's own slow transform transition must not run */
.cl.cl-tilt { transition-property: border-color, background-color, opacity !important; will-change: transform; }

/* 4. a phone has no pointer: the light walks round the cards that stand in the middle of the screen */
@keyframes cl-turn { to { --cl-a: 360deg; } }
html.cl-touch .cl::after { transition: opacity .7s ease; }
html.cl-touch .cl.cl-auto { --cl-o: .9; }
html.cl-touch .cl.cl-auto::after { animation: cl-turn 7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  html.cl-touch .cl.cl-auto { --cl-a: 315deg; }
  html.cl-touch .cl.cl-auto::after { animation: none; }
}
html.m-reduce.cl-touch .cl.cl-auto { --cl-a: 315deg; }
html.m-reduce.cl-touch .cl.cl-auto::after { animation: none; }

/* 5. a finger on a phone (21 Oct 2026, Leonard: nothing happened "if I press one with the finger"): while the script
   lights a card under or near the finger (.cl-near), the walking light stops on that card and the contour stands on the
   finger's side, quickly; lifted, the card walks again. js/cards-light.js part 3. */
html.cl-touch .cl.cl-near::after { animation: none; transition: opacity .15s ease; }