/* The public page of TraduLive Meeting (/meeting/): the design of
   docs/meeting/design/06-landing.html, whose one style block this file is.
   The page's content policy allows no inline style, so everything is here
   and nothing is in the markup.

   It is kept in the order it was drawn in: the first part, then the
   finishing passes, each of which restates some rules of the part before.
   The later rule is the one that counts, so a rule is changed where it is
   LAST written (search for the selector from the bottom up).

   The site's own fonts, from the site's own folder. The ?v= on each address
   is that file's fingerprint, written by scripts/stamp-assets.py and never
   by hand. */
@font-face { font-family: "Montserrat"; font-weight: 500 700; font-display: swap; src: url(/fonts/montserrat-latin.woff2?v=6438d7b8ea) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-weight: 500 700; font-display: swap; src: url(/fonts/montserrat-latin-ext.woff2?v=920711de9a) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Montserrat"; font-weight: 500 700; font-display: swap; src: url(/fonts/montserrat-cyrillic.woff2?v=0b00fbd6ed) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600-latin.woff2?v=488b580981) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-700-latin.woff2?v=98aa8b5c25) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400 800; font-display: swap; src: url(/fonts/geist-latin.woff2?v=15819f6757) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500 600; font-display: swap; src: url(/fonts/geist-mono-latin.woff2?v=d446907209) format("woff2"); }

/* ── the site's own tokens and parts (from the home page) ── */
:root {
  --bg: #ffffff; --sunk: #f5f5f5;
  --ink: #000000; --ink-2: #5a5a5a; --ink-3: #8a8a8a;
  --line: #e4e4e4; --hair: #ededed;
  --teal: #00f19f; --accent: #000000; --accent-ink: #ffffff;
  --dark-a: #283339; --dark-b: #101518; --on-dark: #ffffff; --on-dark-2: #aab3b8; --on-dark-line: rgba(255,255,255,0.14);
  --words: "Montserrat", "Proxima Nova", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --numbers: "Barlow", "DIN Pro", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.65 var(--words); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 28px; }
h1, h2 { font-family: var(--words); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.18; margin: 0; text-wrap: balance; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-family: var(--words); font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; }
.lede { font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--ink); max-width: 40rem; text-wrap: pretty; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--numbers); font-weight: 700; font-variant-numeric: tabular-nums; }

.topbar { background: #000000; color: #ffffff; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #ffffff; }
.links { display: flex; gap: 26px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #aab3b8; }
.links a { text-decoration: none; white-space: nowrap; }
.links a[aria-current] { color: #ffffff; box-shadow: 0 2px 0 var(--teal); padding-bottom: 3px; }
/* One language for now, so "English" is a word in a ring and not a list: no arrow. */
.lang { border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 6px 10px; font: 700 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.06em; color: #aab3b8; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 999px; font: 700 12px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.haslink { font-size: 14px; color: var(--ink-2); }
.haslink b { color: var(--ink); font-weight: 700; }

section { padding: 88px 0; border-top: 1px solid var(--line); }
.head { display: flex; flex-direction: column; gap: 14px; max-width: 42rem; margin-bottom: 44px; }
.head p:not(.eyebrow) { color: var(--ink-2); font-size: 16px; }
.head .lede { color: var(--ink); }

.cards { display: grid; gap: 16px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.card .kick { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.card .big { font-family: var(--numbers); font-weight: 700; font-size: 44px; line-height: 1; color: var(--on-dark); margin-top: 4px; }
.card .big small { font-size: 16px; font-weight: 600; color: var(--on-dark-2); margin-left: 6px; font-family: var(--words); }
.card h3 { color: var(--on-dark); font-size: 20px; line-height: 1.3; }
.card p { color: var(--on-dark-2); font-size: 14px; line-height: 1.55; }
.card ul { display: flex; flex-direction: column; gap: 0; margin-top: 8px; border-top: 1px solid var(--on-dark-line); }
.card li { font-size: 14px; line-height: 1.5; color: var(--on-dark); padding: 11px 0; border-bottom: 1px solid var(--on-dark-line); }
.card li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ── hero: the sentence, the buttons, the meeting itself ── */
.hero { padding: 40px 0 72px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hero h1 { max-width: none; font-size: 32px; }
@media (max-width: 760px) { .hero h1 { font-size: 23px; } }
.hero .cta { justify-content: center; margin-top: 4px; }
.hero .shot { margin-top: 14px; width: 100%; }
.hero .cap { max-width: 44rem; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.hero .cap b { color: var(--ink); font-weight: 700; }

/* ── the product, drawn as the product is (its own tokens and type) ── */
.app { --a-bg:#0B0D11; --a-panel:#13161C; --a-panel2:#1E232C; --a-line:#242A34; --a-outline:#343B47; --a-ink:#F3F5F8; --a-ink2:#A7AFBB; --a-ink3:#6F7885; --a-accent:#5EC8A0; --a-danger:#E5484D;
  --s1:#5EC8A0; --s2:#7FB3F5; --s3:#E8B573; --s4:#C79BF0; --s5:#F08FA8; --s6:#6FD3E0;
  font-family: "Geist", -apple-system, "Segoe UI", sans-serif; font-weight: 400; line-height: 1.3; text-align: left;
  background: var(--a-bg); color: var(--a-ink); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45), 0 0 0 1px #000; }
.app svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app .mono { font-family: "Geist Mono", ui-monospace, Menlo, monospace; }
.a-top { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--a-line); }
.a-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.a-brand svg { width: 24px; height: 24px; }
.a-vr { width: 1px; height: 20px; background: var(--a-line); flex: none; }
.a-title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.a-timer { font-size: 12px; font-weight: 500; color: var(--a-ink2); }
.a-live { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 8px; border-radius: 999px; background: rgba(94,200,160,.10); border: 1px solid rgba(94,200,160,.34); color: var(--a-accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1; }
.a-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-accent); box-shadow: 0 0 0 3px rgba(94,200,160,.2); }
.a-end { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 500; color: var(--a-ink2); white-space: nowrap; }
.a-end svg { width: 17px; height: 17px; }
.a-end .cnt { display: flex; align-items: center; gap: 7px; }
.a-invite { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px 0 12px; border-radius: 999px; border: 1.5px solid var(--a-outline); font-size: 14px; font-weight: 600; color: var(--a-ink); }
.a-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; }
.a-tile { position: relative; height: 152px; border-radius: 16px; border: 1px solid var(--a-line); background: radial-gradient(70% 80% at 50% 42%, rgba(255,255,255,.055), rgba(255,255,255,0) 70%), var(--a-panel); display: flex; align-items: center; justify-content: center; }
.a-tile.speaking { outline: 2px solid var(--c); outline-offset: -1px; border-color: transparent; }
.a-av { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 13%, #141820); display: grid; place-items: center; font-size: 24px; font-weight: 600; letter-spacing: .02em; margin-bottom: 14px; }
.a-name { position: absolute; left: 10px; bottom: 10px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(11,13,17,.8); border: 1px solid var(--a-line); display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.a-name .mono { font-size: 10.5px; font-weight: 500; color: var(--a-ink3); letter-spacing: .06em; }
.a-tag { position: absolute; left: 10px; top: 10px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(11,13,17,.8); border: 1px solid var(--a-line); display: flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--a-ink2); }
.a-mic { position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(11,13,17,.8); border: 1px solid var(--a-line); display: grid; place-items: center; color: var(--a-ink2); }
.a-mic svg { width: 14px; height: 14px; }
.a-mic.talk { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, #0B0D11); }
.a-eq { display: flex; align-items: center; gap: 2.5px; height: 14px; }
.a-eq b { display: block; width: 2.5px; border-radius: 2px; background: var(--c); }
.a-eq b:nth-child(1) { height: 6px; } .a-eq b:nth-child(2) { height: 13px; } .a-eq b:nth-child(3) { height: 9px; }
.a-strip { background: var(--a-panel); border-top: 1px solid var(--a-line); }
.a-strip-h { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--a-line); }
.a-reading { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--a-outline); font-size: 13px; color: var(--a-ink2); white-space: nowrap; }
.a-reading b { font-weight: 600; color: var(--a-ink); }
.a-reading svg { width: 14px; height: 14px; color: var(--a-ink3); }
.a-tog { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--a-ink2); white-space: nowrap; }
.a-sw { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--a-accent); }
.a-sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.a-lines { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; }
.a-ln { display: grid; grid-template-columns: 196px 1fr; column-gap: 16px; }
.a-who { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.a-who i { width: 8px; height: 8px; border-radius: 2.5px; background: var(--c); flex: none; }
.a-who .mono { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--a-ink3); }
.a-tr { font-size: 21px; line-height: 28px; font-weight: 500; letter-spacing: -.15px; }
.a-tr .dim { color: rgba(243,245,248,.42); }
.a-or { font-size: 14px; line-height: 20px; color: var(--a-ink3); margin-top: 1px; }
.a-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-left: 10px; vertical-align: middle; position: relative; top: -2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent); }
.a-ctl { height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 20px; border-top: 1px solid var(--a-line); }
.a-ctl .l { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--a-ink3); white-space: nowrap; }
.a-ctl .l svg { width: 15px; height: 15px; }
.a-ctl .c { display: flex; align-items: center; gap: 10px; }
.a-cb { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--a-panel); border: 1px solid var(--a-line); display: grid; place-items: center; flex: none; }
.a-cb svg { width: 20px; height: 20px; }
.a-cb.on { background: rgba(94,200,160,.13); border-color: #3F8F70; color: var(--a-accent); }
.a-leave { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px 0 16px; border-radius: 999px; background: var(--a-danger); color: #fff; font-size: 14px; font-weight: 600; margin-left: 6px; }
.a-leave svg { width: 20px; height: 20px; }
.a-ctl .r { justify-self: end; text-align: right; font-size: 13px; font-weight: 500; white-space: nowrap; }
.a-ctl .r small { display: block; font-size: 12px; color: var(--a-ink3); font-weight: 400; }

/* ── why it matters ── */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 3px solid var(--ink); }
.why p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.same { margin-top: 56px; background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 32px; }
.same-h { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.same-h .kick { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.same-h p { font-size: 16px; color: var(--on-dark-2); }
.same-h p b { color: var(--on-dark); font-weight: 600; }
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.screen { --c: #7FB3F5; background: #0B0D11; border: 1px solid #242A34; border-radius: 14px; padding: 18px 18px 20px; font-family: "Geist", -apple-system, sans-serif; display: flex; flex-direction: column; gap: 12px; }
.screen .rd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #A7AFBB; padding-bottom: 12px; border-bottom: 1px solid #242A34; }
.screen .rd b { color: #F3F5F8; font-weight: 600; }
.screen .rd span:last-child { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border: 1px solid #343B47; border-radius: 999px; white-space: nowrap; }
.screen .w { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.screen .w i { width: 8px; height: 8px; border-radius: 2.5px; background: var(--c); }
.screen .t { font-size: 19px; line-height: 26px; font-weight: 500; color: #F3F5F8; }
.screen .o { font-size: 13.5px; color: #6F7885; }

/* ── steps ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.step .n { font-family: var(--numbers); font-weight: 700; font-size: 44px; line-height: 1; color: var(--teal); }
.step h3 { color: var(--on-dark); font-size: 20px; line-height: 1.3; margin-top: 6px; }
.step p { color: var(--on-dark-2); font-size: 14px; line-height: 1.55; }
.demo { margin-top: auto; padding-top: 18px; }
.demo > div { background: rgba(255,255,255,0.06); border: 1px solid var(--on-dark-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--on-dark); min-height: 124px; justify-content: center; }
.demo .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); }
.demo .field { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--on-dark-line); border-radius: 8px; padding: 7px 11px; font-size: 13px; }
.demo .field span { color: var(--on-dark-2); }
.demo .url { font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--teal); overflow-wrap: anywhere; }
.demo .mail-s { font-weight: 700; font-size: 13.5px; line-height: 1.4; }
.demo .mail-b { font-size: 13px; color: var(--on-dark-2); line-height: 1.5; }

/* ── what you get ── */
.gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-bottom: 1px solid var(--line); }
.get { display: flex; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.get svg { flex: none; width: 26px; height: 26px; fill: none; stroke: #000; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.get div { display: flex; flex-direction: column; gap: 4px; }
.get p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.rooms { margin-top: 56px; }
.rooms .sub { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.limit { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; font-size: 15px; color: var(--ink-2); }
.limit b { color: var(--ink); font-weight: 700; }

/* ── the others ── */
.cmp { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cmp + .cmp-t { margin-top: 44px; }
.cmp-t { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.cmp-t span { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.row { display: grid; grid-template-columns: 150px 1fr 1fr 1fr; gap: 28px; padding: 22px 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.row:first-child { border-top: 0; }
.row.hd { background: var(--sunk); padding-top: 13px; padding-bottom: 13px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.row .nm { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.row .nm small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.row .k { display: none; }
.row p + p { margin-top: 8px; }
.ours { border: 2px solid var(--ink); border-radius: 14px; margin-bottom: 44px; position: relative; }
.ours .row { color: var(--ink); }
.ours .row .nm { font-size: 17px; }
.ours .row.hd { border-radius: 12px 12px 0 0; background: #000; color: #fff; }
.checked { margin-top: 28px; font-size: 14px; color: var(--ink-2); max-width: 46rem; }
.checked b { color: var(--ink); }
.srcs { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 18px; }
.srcs .t { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.srcs ul { columns: 2; column-gap: 40px; }
.srcs li { font-size: 12px; line-height: 1.6; color: var(--ink-3); break-inside: avoid; padding-bottom: 6px; overflow-wrap: anywhere; }
.srcs li b { color: var(--ink-2); font-weight: 700; }

/* ── prices ── */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 236px; border: 1.5px solid transparent; }
.plan .dur { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.plan .price { font-family: var(--numbers); font-weight: 700; font-size: 44px; line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 20px; color: var(--on-dark-2); margin-left: 4px; }
.plan .rate { font-size: 16px; font-weight: 700; color: var(--on-dark); }
.plan .rate b { font-family: var(--numbers); font-size: 20px; }
.plan .where { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--on-dark-line); font-size: 14px; color: var(--on-dark-2); line-height: 1.5; }
.pnote { margin-top: 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.pnote .say { font-size: 20px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.pnote ul { display: flex; flex-direction: column; }
.pnote li { font-size: 14px; color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--hair); }
.pnote li:first-child { border-top: 0; }
.pcta { margin-top: 36px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pcta p { font-size: 14px; color: var(--ink-2); max-width: 30rem; }


/* ── plans ── */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.tier { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 28px 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.tname { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.tsize { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tsize b { display: block; font-family: var(--numbers); font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.tsize span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--on-dark-2); }
.trows { border-top: 1px solid var(--on-dark-line); }
.trows li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 13px 0 12px; border-bottom: 1px solid var(--on-dark-line); }
.trows span { font-size: 14px; font-weight: 700; color: var(--on-dark); }
.trows b { font-weight: 700; font-size: 18px; line-height: 1.4; text-align: start; }
.trows i { font-style: normal; font-size: 14px; color: var(--on-dark-2); }
.tfrom { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); }
.tier.ent h3 { color: var(--on-dark); font-size: 24px; line-height: 1.25; }
.tier.ent .tp { font-size: 14px; line-height: 1.55; color: var(--on-dark-2); }
.tier .perk { padding: 14px 16px 15px; border: 1.5px solid var(--teal); border-radius: 12px; background: rgba(0, 241, 159, 0.08); display: flex; flex-direction: column; gap: 10px; }
.tier .perk .tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #04130d; background: var(--teal); border-radius: 999px; padding: 4px 10px; line-height: 1.3; }
.tier .perk p { color: var(--on-dark); font-weight: 600; font-size: 14px; line-height: 1.5; }
.tier .btn { background: var(--teal); color: #04130d; align-self: flex-start; }
.tier.ent .tfrom { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; margin-top: 0; }
.tier.ent .btn { margin-top: auto; }
.card.room h3 { font-size: 20px; }
.sizes { margin-top: 10px !important; }
.sizes li { display: grid; grid-template-columns: 110px auto 1fr; align-items: baseline; column-gap: 12px; padding: 12px 0 !important; }
.sizes li:last-child { padding-bottom: 12px !important; border-bottom: 1px solid var(--on-dark-line) !important; }
.sizes span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); }
.sizes b { font-family: var(--numbers); font-weight: 700; font-size: 24px; line-height: 1; min-width: 30px; }
.sizes i { font-style: normal; font-size: 14px; color: var(--on-dark-2); }
.sizes em { font-style: normal; font-size: 14px; color: var(--on-dark); grid-column: 2 / 4; }
.card.room .rl { color: var(--on-dark); margin-top: 6px; }
@media (max-width: 1000px) { .tiers { grid-template-columns: 1fr; } .tier.ent .btn { margin-top: 4px; } }
@media (max-width: 760px) { .tier { padding: 24px 20px 20px; } .tier.ent .btn { width: 100%; } .sizes li { grid-template-columns: 96px auto 1fr; } }

/* ── questions ── */
/* The questions stand closed, one line each, and open at a press: the page
   stays short and a visitor reads only the answer they came for. */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.qa { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 17px; line-height: 1; font-weight: 500; }
.qa[open] summary::after { content: "–"; }
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.qa h3 { font-size: 16px; }
.qa p { color: var(--ink-2); margin: 0 0 22px; padding-right: 46px; font-size: 15px; max-width: 44rem; }

/* ── closing band ── */
.close { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: #fff; border-radius: 14px; padding: 56px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.close h2 { max-width: 44rem; }
.close p { color: var(--on-dark-2); max-width: 44rem; }
.close .btn.primary { background: var(--teal); color: #04130d; }
.close .btn.quiet { color: #fff; border-color: rgba(255,255,255,0.6); }
.close .haslink { color: var(--on-dark-2); }
.close .haslink b { color: #fff; }

/* ── footer (the site's) ── */
footer { background: #000000; color: #aab3b8; }
footer .wrap { padding-top: 64px; padding-bottom: 48px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 0.8fr 1.5fr 0.9fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.foot-mark { font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; margin-bottom: 14px; }
.foot-seo { font-size: 13px; line-height: 1.65; color: #7f888d; max-width: 30rem; }
.foot-h { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin-bottom: 16px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.foot-col a { font-size: 13px; color: #aab3b8; }
.foot-col a.here { color: #fff; font-weight: 700; }
.foot-lede { font-size: 13px; line-height: 1.6; color: #ffffff; margin-bottom: 4px; }
.foot-priv { display: flex; flex-direction: column; gap: 9px; }
.foot-priv li { font-size: 12.5px; line-height: 1.55; color: #7f888d; padding-left: 14px; position: relative; }
.foot-priv li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.gdpr-mark { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 4px; padding: 6px 13px 6px 10px; border: 1px solid var(--teal); border-radius: 999px; color: var(--teal) !important; font-size: 12px !important; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; }
.foot-bottom { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6f787d; }

/* ── narrower screens ── */
@media (max-width: 1000px) {
  .links a { display: none; }
  .links a[aria-current] { display: inline; }
  .cards.four, .plans { grid-template-columns: repeat(2, 1fr); }
  .gets { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  h1 { font-size: 23px; letter-spacing: 0.08em; line-height: 1.25; }
  h2 { font-size: 20px; }
  .lede, .pnote .say { font-size: 18px; }
  section { padding: 60px 0; }
  .head { margin-bottom: 32px; }
  .hero { padding: 32px 0 52px; gap: 18px; }
  .hero .cta, .close .cta { width: 100%; flex-direction: column; }
  .hero .cta .btn, .close .cta .btn, .pcta .btn { width: 100%; }
  .hero .cap { font-size: 15px; }
  .cards.four, .cards.three, .cards.two, .plans, .steps, .why, .screens, .gets, .pnote, .faq { grid-template-columns: 1fr; }
  .why { gap: 28px; }
  .pnote { gap: 20px; }
  .same { padding: 24px 18px; margin-top: 44px; }
  .plan { min-height: 0; }
  .get { padding: 20px 0; }
  .close { padding: 40px 22px; }
  .foot-top { grid-template-columns: 1fr; }
  .srcs ul { columns: 1; }

  /* the product on a phone: two tiles a row, the names above the words */
  .app { border-radius: 14px; }
  .a-top { height: 46px; padding: 0 14px; gap: 10px; }
  .a-brand span, .a-top .a-vr, .a-timer, .a-invite { display: none; }
  .a-title { font-size: 13px; }
  .a-top .a-live { display: none; }
  .a-tiles { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
  .a-tile { height: 112px; border-radius: 14px; }
  .a-av { width: 50px; height: 50px; font-size: 17px; margin-bottom: 22px; }
  .a-name { left: 7px; bottom: 7px; height: 23px; padding: 0 8px; font-size: 11.5px; }
  .a-tag { display: none; }
  .a-mic { right: 7px; bottom: 7px; width: 23px; height: 23px; }
  .a-strip-h { padding: 0 14px; }
  .a-tog { display: none; }
  .a-lines { padding: 16px 14px 18px; gap: 14px; }
  .a-ln { grid-template-columns: 1fr; }
  .a-who { height: 22px; font-size: 11px; }
  .a-tr { font-size: 17px; line-height: 23px; }
  .a-or { font-size: 13px; line-height: 18px; }
  .a-ctl { height: 60px; grid-template-columns: 1fr; justify-items: center; padding: 0 10px; }
  .a-ctl .l, .a-ctl .r, .a-cb.x { display: none; }
  .a-ctl .c { gap: 8px; }
  .a-cb { width: 40px; height: 40px; }
  .a-leave { height: 40px; padding: 0 16px 0 12px; }

  /* the comparison on a phone: each product a card, each answer under its question */
  .row.hd { display: none; }
  .ours .row.hd { display: block; }
  .ours .row.hd div + div { display: none; }
  .ours .row.hd { padding: 12px 18px; }
  .row { grid-template-columns: 1fr; gap: 14px; padding: 22px 18px; }
  .row .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
  .row .nm { font-size: 18px; }
  .cmp { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  .cmp .row { border: 1px solid var(--line); border-radius: 14px; }
  .ours { margin-bottom: 36px; }
  .ours .row { border: 0; }
}

/* ══ finishing pass, 3 October 2026 ══ */
html { scroll-behavior: smooth; }
.links a.app-l { color: #ffffff; }

/* ── opening: his point first, on the page's left axis; the meeting itself under it ── */
.hero { padding: 34px 0 64px; display: block; text-align: left; }
.hero-top { display: grid; grid-template-columns: 1.22fr 1fr; gap: 56px; align-items: end; margin-bottom: 30px; }
.hero-top .l { display: flex; flex-direction: column; gap: 16px; }
.hero-top .r { display: flex; flex-direction: column; gap: 18px; padding-bottom: 4px; }
.hero h1 { font-size: 36px; line-height: 1.14; letter-spacing: 0.08em; text-wrap: initial; }
.hero h1 span { display: block; white-space: nowrap; }
.hero .lede { font-size: 19px; line-height: 1.5; max-width: none; }
.hero .situ { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.hero .situ b { color: var(--ink); font-weight: 700; }
.hero .cta { justify-content: flex-start; margin-top: 0; }
.hero .quiet { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.hero .quiet b { color: var(--ink); font-weight: 700; }
.hero .shot { margin-top: 0; }
.hero .under { margin-top: 22px; display: grid; grid-template-columns: 1.22fr 1fr; gap: 56px; align-items: start; }
.hero .cap { max-width: none; font-size: 15px; }
.hero .haslink { padding-left: 18px; border-left: 3px solid var(--teal); }

/* ── people in the tiles: a photograph per person, swapped by changing the file ── */
.a-tile { overflow: hidden; }
.a-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.a-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,17,0) 55%, rgba(11,13,17,.55)); pointer-events: none; }
.a-tile > div { z-index: 1; }
.a-tile.speaking { outline-width: 3px; }
.a-tile { height: 138px; }
.a-tiles { padding: 14px 20px; }
.a-lines { gap: 11px; padding: 16px 20px 18px; }
section { padding: 76px 0; }
.a-face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; display: block; flex: none; border: 1.5px solid var(--c, #343B47); }
.app use, .get use { pointer-events: none; }

/* ── the call you already know ── */
.known { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.known .card h3 { font-size: 20px; }
.want { margin-top: 16px; border: 2px solid var(--ink); border-radius: 14px; padding: 26px 28px; display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: center; }
.want .t { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.want p { font-size: 20px; line-height: 1.45; font-weight: 600; text-wrap: pretty; }

/* ── the training, pictured ── */
.train { display: grid; grid-template-columns: 0.72fr 1fr; gap: 48px; align-items: center; }
.train .head { margin-bottom: 24px; }
.tlist { display: flex; flex-direction: column; }
.tlist li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.tlist li b { display: block; color: var(--ink); font-weight: 700; font-size: 16px; }
.t-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; padding: 14px 16px; }
.t-tiles { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.t-tiles .a-tile { height: 132px; }
.t-tiles .a-tag { color: var(--a-ink2); }
.t-tiles .a-tile.floor { outline: 2px solid var(--s3); outline-offset: -1px; border-color: transparent; }
.t-tiles .a-tile.floor .a-tag { color: var(--s3); border-color: rgba(232,181,115,.45); }
.t-hands { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 16px; padding: 14px 14px 6px; display: flex; flex-direction: column; }
.t-hands .hh { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-accent); padding-bottom: 8px; }
.t-hands .hh span { color: var(--a-ink3); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 12px; }
.t-hand { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--a-line); }
.t-hand b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.t-hand small { display: block; font-size: 11.5px; color: var(--a-ink3); line-height: 1.3; white-space: nowrap; }
.t-give { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; border: 1.5px solid #3F8F70; color: var(--a-accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.t-give.first { background: var(--a-accent); border-color: var(--a-accent); color: #0B1712; }
.t-more { border-top: 1px solid var(--a-line); padding: 10px 0 8px; font-size: 12px; color: var(--a-ink3); display: flex; align-items: center; gap: 8px; }
.t-more .stack { display: flex; }
.t-more .stack img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--a-panel); margin-left: -6px; }
.t-more .stack img:first-child { margin-left: 0; }
.app.small .a-lines { padding: 14px 16px 16px; gap: 10px; }
.app.small .a-ln { grid-template-columns: 150px 1fr; column-gap: 12px; }
.app.small .a-tr { font-size: 17px; line-height: 24px; }
.app.small .a-or { font-size: 12.5px; line-height: 18px; }
.app.small .a-who { font-size: 11px; height: 24px; }
.app.small .a-top { padding: 0 16px; gap: 11px; }
.app.small .a-title { font-size: 13px; }
.a-kind { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--a-outline); color: var(--a-ink2); font-size: 12px; font-weight: 500; }
.train .cap { margin-top: 14px; font-size: 14px; color: var(--ink-2); }

/* ── steps: small pictures that look like the product ── */
.demo > div { min-height: 156px; }
.demo .segm { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--on-dark-line); border-radius: 999px; }
.demo .segm span { height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--on-dark-2); }
.demo .segm .on { background: #fff; color: #000; }
.demo .copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo .copy b { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--teal); color: var(--teal); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.demo .go { height: 32px; border-radius: 999px; background: var(--teal); color: #04130d; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.demo .rdl { display: flex; flex-direction: column; gap: 2px; }
.demo .rdl i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.demo .rdl span { font-size: 13.5px; line-height: 1.4; }
.demo .after { border-top: 1px solid var(--on-dark-line); padding-top: 8px; font-size: 12.5px; color: var(--on-dark-2); }

/* ── what you get ── */
.get.no svg { stroke: #b3261e; }
.get.no h3 { color: #000; }

/* ── the others: three conclusions, then one table ── */
.concl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }
.concl li { padding-top: 18px; border-top: 3px solid var(--ink); display: flex; flex-direction: column; gap: 8px; }
.concl h3 { font-size: 17px; line-height: 1.35; }
.concl p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.concl p b { color: var(--ink); font-weight: 700; }
.row { grid-template-columns: 148px 1.15fr 1fr 1fr; gap: 26px; padding: 18px 22px; font-size: 13.5px; line-height: 1.55; }
.row.hd { padding-top: 12px; padding-bottom: 12px; }
.row.us { background: #000; color: #d8dee2; }
.row.us .nm { color: #fff; }
.row.us .nm small { color: var(--teal); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.row.us b { color: #fff; font-weight: 700; }
.row.grp { display: block; background: var(--sunk); padding: 9px 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
details.more { border-top: 1px solid var(--line); }
details.more summary { list-style: none; cursor: pointer; padding: 15px 22px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 16px; line-height: 1; font-weight: 500; flex: none; }
details.more[open] summary::before { content: "–"; }
details.more summary span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
details.more .row:first-of-type { border-top: 1px solid var(--line); }
.also { margin-top: 22px; border-left: 3px solid var(--teal); padding: 2px 0 2px 18px; font-size: 15px; color: var(--ink-2); max-width: 50rem; }
.also b { color: var(--ink); }
.checked { margin-top: 22px; font-size: 13px; }
.srcs { margin-top: 12px; padding-top: 12px; }
.tap { display: none; font-size: 13px; color: var(--ink-3); margin: 0 2px 4px; }
.srcs p { font-size: 11.5px; line-height: 1.7; color: var(--ink-3); overflow-wrap: anywhere; }
.srcs p b { color: var(--ink-2); font-weight: 700; }

/* ── prices: the price leads, the room size follows, each card has its own button ── */
.tier { gap: 16px; padding: 26px 26px 26px; }
.tprice { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tprice i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--on-dark-2); }
.tprice b { font-family: var(--numbers); font-weight: 700; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.tsize { border-top: 1px solid var(--on-dark-line); padding-top: 16px; gap: 12px; }
.tsize b { font-size: 34px; }
.tsize span { margin-top: 4px; font-size: 13.5px; }
.tlang { font-size: 13.5px; line-height: 1.5; color: var(--on-dark-2); margin-top: -4px; }
.tlang b { color: var(--on-dark); font-weight: 700; }
.trows li { padding: 11px 0 10px; }
.trows i.least { color: var(--teal); font-weight: 700; }
.tier .btn { align-self: stretch; margin-top: auto; }
.tier.ent .btn { align-self: stretch; }
.tier.ent .tfrom { text-align: center; }
.whole { margin-top: 16px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.whole .say { padding: 24px 28px; font-size: 19px; line-height: 1.45; font-weight: 600; text-wrap: pretty; }
.whole ul { background: var(--sunk); padding: 12px 28px; display: flex; flex-direction: column; justify-content: center; }
.whole li { font-size: 14px; line-height: 1.5; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--line); }
.whole li:first-child { border-top: 0; }
.whole li b { color: var(--ink); }
.path { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.path ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.path li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.path li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-family: var(--numbers); font-weight: 700; font-size: 15px; }
.path li b { display: block; color: var(--ink); font-weight: 700; }
.vat { margin-top: 20px; font-size: 13px; color: var(--ink-3); }

.whole .say { align-self: center; }
.demo .url { font-size: 12px; white-space: nowrap; }
.elist { border-top: 1px solid var(--on-dark-line); }
.elist li { padding: 13px 0 12px 26px; border-bottom: 1px solid var(--on-dark-line); font-size: 14px; font-weight: 700; color: var(--on-dark); position: relative; }
.elist li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.tg { position: absolute; opacity: 0; pointer-events: none; }
label.nm { display: block; }

/* ── narrower screens ── */
@media (max-width: 1100px) {
  .a-ctl .l { display: none; }
  .a-ctl { grid-template-columns: auto 1fr; }
  .a-ctl .c { justify-self: start; }
  .train { grid-template-columns: 1fr; gap: 28px; }
  .path { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 1000px) {
  .links a { display: none; }
  .links a[aria-current], .links a.keep { display: inline; }
  .hero-top, .hero .under { grid-template-columns: 1fr; gap: 22px; }
  .known, .concl { grid-template-columns: 1fr; }
  .whole { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  nav { padding: 14px 0; }
  .brand { font-size: 15px; }
  .links { gap: 16px; font-size: 11px; }
  .hero { padding: 28px 0 52px; }
  .hero h1 { font-size: 22px; letter-spacing: 0.07em; line-height: 1.22; }
  .hero .lede { font-size: 17px; }
  .hero .situ { font-size: 15px; }
  .hero-top { margin-bottom: 24px; }
  .hero .under { margin-top: 18px; }
  .a-tile { height: 118px; }
  .a-name .mono { display: none; }
  .a-tile.me .a-name .mono, .a-tile .a-name .mono { display: inline; }
  .want { grid-template-columns: 1fr; padding: 22px 20px; }
  .want p { font-size: 18px; }
  .gets { padding: 0; }
  .get { padding: 20px 2px; }
  .t-body { grid-template-columns: 1fr; padding: 12px 14px; }
  .t-hands { order: -1; }
  .t-tiles { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .t-tiles .a-tile { height: 112px; }
  .app.small .a-ln { grid-template-columns: 1fr; }
  .app.small .a-kind, .app.small .a-live { display: none; }
  .concl { gap: 22px; margin-bottom: 30px; }
  .row { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; font-size: 14px; }
  .row.us { border-radius: 14px; border: 0; }
  .cmp .row:has(.tg) > div { display: none; }
  .cmp .row:has(.tg:checked) > div { display: block; }
  .cmp .row:has(.tg) { gap: 0; padding: 16px 18px; }
  .cmp .row:has(.tg:checked) { gap: 14px; padding: 20px 18px; }
  label.nm { position: relative; padding-right: 40px; cursor: pointer; }
  label.nm::after { content: "+"; position: absolute; right: 0; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 17px; font-weight: 500; line-height: 1; }
  .row:has(.tg:checked) label.nm::after { content: "–"; }
  .tap { display: block !important; }
  .row.grp { background: none; padding: 10px 2px 0; border: 0 !important; }
  details.more { border-top: 0; }
  details.more summary { border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; flex-wrap: wrap; }
  details.more[open] summary { margin-bottom: 12px; }
  details.more .row { margin-bottom: 12px; }
  .cmp details.rowd { border: 1px solid var(--line); border-radius: 14px; }
  .whole .say { padding: 20px; font-size: 17px; }
  .whole ul { padding: 8px 20px; }
  .path ol { grid-template-columns: 1fr; gap: 14px; }
  .path .btn { width: 100%; }
  .tprice b { font-size: 46px; }
}

/* ── the opening, second version: one calm column with air around it. The
   owner found the two-column opening crowded; a company's page says one
   thing, then offers two buttons, then shows the product. ── */
.hero.v2 { padding: 104px 0 88px; display: block; text-align: center; }
.hero.v2 .hero-top { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 auto 72px; max-width: 66rem; }
.hero.v2 .eyebrow { margin: 0 0 28px; letter-spacing: 0.14em; }
.hero.v2 h1 { font-size: 54px; line-height: 1.12; letter-spacing: 0.035em; max-width: none; text-wrap: balance; }
.hero.v2 h1 span { display: block; }
.hero.v2 .lede { margin: 30px auto 0; max-width: 43rem; font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.hero.v2 .cta { margin-top: 44px; justify-content: center; gap: 16px; width: auto; flex-direction: row; }
.hero.v2 .cta .btn { width: auto; height: 58px; padding: 0 38px; font-size: 13px; }
.hero.v2 .facts { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.hero.v2 .facts li { padding: 0 20px; border-left: 1px solid rgba(0,0,0,0.16); }
.hero.v2 .facts li:first-child { border-left: 0; }
.hero.v2 .facts b { color: var(--ink); font-weight: 700; }
.hero.v2 .shot { margin-top: 0; }
@media (max-width: 1000px) {
  .hero.v2 { padding: 72px 0 64px; }
  .hero.v2 h1 { font-size: 42px; }
  .hero.v2 .hero-top { margin-bottom: 56px; }
}
@media (max-width: 760px) {
  .hero.v2 { padding: 48px 0 52px; }
  .hero.v2 .eyebrow { margin-bottom: 20px; }
  .hero.v2 h1 { font-size: min(30px, calc((100vw - 48px) / 13.6)); line-height: 1.2; letter-spacing: 0.03em; white-space: nowrap; }
  .hero.v2 .lede { margin-top: 22px; font-size: 17px; }
  .hero.v2 .cta { margin-top: 32px; flex-direction: column; width: 100%; gap: 12px; }
  .hero.v2 .cta .btn { width: 100%; height: 54px; }
  .hero.v2 .facts { margin-top: 30px; flex-direction: column; gap: 8px; font-size: 14px; }
  .hero.v2 .facts li { border-left: 0; padding: 0; }
  .hero.v2 .hero-top { margin-bottom: 40px; }
}

/* a phone's top bar: the name, this page, its prices and the language must all fit */
@media (max-width: 480px) {
  nav { gap: 10px; }
  .brand { font-size: 14px; letter-spacing: 0.1em; }
  .links { gap: 12px; font-size: 10.5px; letter-spacing: 0.08em; }
  .lang { font-size: 10.5px; padding: 6px 9px; letter-spacing: 0.04em; }
}

/* ── the four people in the opening picture: tall windows, so that each
   person is seen as a camera sees them — head, shoulders and chest ── */
.hero .a-tiles .a-tile { height: 300px; }
.hero .a-tiles .a-ph { object-position: 50% 8%; }
@media (max-width: 1000px) { .hero .a-tiles .a-tile { height: 250px; } }
@media (max-width: 760px) { .hero .a-tiles .a-tile { height: 215px; } }

/* the opening picture: four people, each at a desk in an office, in tall
   windows that show them down to the desk */
.hero .a-tiles { grid-template-columns: repeat(4, 1fr); }
.hero .a-tiles .a-tile { height: 400px; }
.hero .a-tiles .a-ph { object-position: 50% 0%; }
@media (max-width: 1000px) { .hero .a-tiles .a-tile { height: 330px; } }
@media (max-width: 760px) { .hero .a-tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .hero .a-tiles .a-tile { height: 260px; } }

/* the opening headline says what the product does; it is longer, so the type is smaller */
.hero.v2 h1 { font-size: 44px; line-height: 1.16; letter-spacing: 0.03em; }
.hero.v2 .lede { max-width: 46rem; }
@media (max-width: 1100px) { .hero.v2 h1 { font-size: 36px; } }
@media (max-width: 760px) {
  .hero.v2 h1 { font-size: 25px; line-height: 1.22; letter-spacing: 0.02em; white-space: normal; text-wrap: balance; }
  .hero.v2 h1 span { display: inline; }
}

/* one price in every plan: the number is the same on the three cards, the line under it says what buying that many hours gives */
.tier .tprice b { margin-right: 2px; }
.tier .trows .least { color: var(--teal-ink, #0b7a55); font-style: normal; }

/* ── what the design wrote as style attributes. The content policy refuses
   them, so each is a class. They come last: .cg must win over .screen's own
   colour, which has the same weight. ── */
/* a speaker's colour, one of the product's six */
.c1 { --c: var(--s1); }
.c2 { --c: var(--s2); }
.c3 { --c: var(--s3); }
.c4 { --c: var(--s4); }
.c5 { --c: var(--s5); }
.c6 { --c: var(--s6); }
/* the green of the three screens that show one sentence */
.cg { --c: #5EC8A0; }
/* the icons' drawer: it holds shapes to be used by name and takes no room */
.abs { position: absolute; }
/* the closing band follows the questions without a line or a gap above it.
   Written for sections only: "first" is also the first "Give the floor"
   button of the training picture, which must keep its border. */
section.first { border-top: 0; padding-top: 0; }

/* ── the meeting's link as it really is. The design drew a shorter one
   (tradulive.com/meeting/dlv-41-kx7); the real link is eleven characters
   longer, and in two places it no longer fitted on its line. ── */
/* Step 1: on one line it pushed its card wider than the other two, and on a
   phone wider than the screen. It may break, and the markup says where: after
   "room/", so the code stays whole. No card may grow past its column. */
.step { min-width: 0; }
.demo .url { white-space: normal; }
/* The bar under the opening picture: smaller and a little tighter, so that
   the link fits its third of the bar and neither touches the buttons nor
   pushes them off the middle. */
.a-ctl .l { font-size: 10.5px; letter-spacing: -0.2px; }

/* ── a phone's headline. The first opening kept each half of the headline on
   one line (.hero h1 span, nowrap); the present headline is longer, and on a
   phone its first half ran off both edges of the screen. Under 760 px the
   words break where they need to. (The design's phone picture was made
   before the headline changed, so it never showed this.) ── */
@media (max-width: 760px) { .hero.v2 h1 span { white-space: normal; } }

/* ── the training picture on a phone. Its top row (the title and "24
   people") does not shrink, and a grid column is never narrower than what is
   in it: at 390 px the whole section stood 3 px wider than the page's
   column. The column may now be narrower than its content, the row gives up
   some of its air, and on a narrower phone still the title is cut with dots
   rather than the count pushed out of the picture. ── */
.train > div { min-width: 0; }
.app.small .a-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .app.small .a-top { padding: 0 12px; gap: 9px; } }

/* ── the four usual problems, as cards: a title, what happens elsewhere, what
   you get here. "Here" sits at the foot of every card whatever the length of
   the line above it, so the four answers read as one row. ── */
.probs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prob { border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); min-width: 0; }
.prob h3 { font-size: 19px; line-height: 1.3; }
.prob p { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.prob p span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; }
.prob .else { color: var(--ink-3); }
.prob .else span { color: var(--ink-3); }
.prob .here { color: var(--ink); font-weight: 600; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.prob .here span { color: #00a56d; }
#why .same { margin-top: 28px; }
@media (max-width: 1000px) { .probs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .probs { grid-template-columns: 1fr; } }

/* ── the others, in points (4 October 2026). Ours first: one dark panel that
   answers the three questions with green ticks. Then three points about the
   others, then each product as a light card that answers the same three
   questions in short points, so any of them can be read against ours. The
   others' points carry a plain grey dot and nothing that judges them. On a
   phone a product still opens by a tap on its name (a checkbox, no script). ── */
.ourp { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 36px 40px 40px; margin-bottom: 64px; }
.ourp-h { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.ourp-h .kick { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.ourp-h h3 { font-size: 26px; line-height: 1.25; color: var(--on-dark); }
.ourp-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.ourp-g > div { border-top: 1px solid var(--on-dark-line); padding-top: 20px; min-width: 0; }
.ourp .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 16px; }
.ourp .need { font-size: 15px; line-height: 1.5; color: var(--on-dark-2); margin-bottom: 14px; }
.ourp .price { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--on-dark); margin-bottom: 18px; text-wrap: balance; }
.ourp .price b { display: block; font-family: var(--numbers); font-weight: 700; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.yes { display: flex; flex-direction: column; gap: 14px; }
.yes li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--on-dark); text-wrap: pretty; }
.yes li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 7px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }

.grp { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.pts { display: flex; flex-direction: column; gap: 9px; }
.pts li { position: relative; padding-left: 15px; text-wrap: pretty; }
.pts li::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.concl { margin-bottom: 64px; }
.concl li { gap: 12px; }
.concl .pts li { padding-top: 0; border-top: 0; display: block; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.concl .pts b { color: var(--ink); font-weight: 700; }
.concl .pts .we { padding-left: 20px; margin-left: -5px; }
.concl .pts .we::before { left: 1px; top: 0.4em; width: 10px; height: 5px; border-radius: 0; background: none; border-left: 2px solid #00a56d; border-bottom: 2px solid #00a56d; transform: rotate(-45deg); }

.cmp { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
.cmp .row { grid-template-columns: 172px 1.15fr 1fr 1fr; gap: 32px; padding: 26px 28px 28px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.cmp .row > div { min-width: 0; }
.cmp .row .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; line-height: 1.4; }
.cmp .row .src { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 0 0 9px; }
.cmp .row .nm { font-size: 18px; }
.cmp .row .nm small { margin-top: 5px; }
details.more { border-top: 0; }
details.more summary { border: 1px solid var(--line); border-radius: 14px; padding: 18px 28px; }
details.more[open] summary { margin-bottom: 0; }
details.more .row { margin-top: 12px; margin-bottom: 0; }
.also { margin-top: 32px; }

@media (max-width: 1000px) {
  .ourp { padding: 30px 28px 32px; }
  .ourp-g { grid-template-columns: 1fr; gap: 28px; }
  .cmp .row { grid-template-columns: 1fr; gap: 20px; }
  .concl { margin-bottom: 48px; }
}
@media (max-width: 760px) {
  .ourp { padding: 26px 20px 28px; margin-bottom: 44px; }
  .ourp-h { margin-bottom: 22px; }
  .ourp-h h3 { font-size: 22px; }
  .ourp .price b { font-size: 46px; }
  .concl { gap: 26px; margin-bottom: 44px; }
  .grp { margin-bottom: 14px; line-height: 1.5; }
  .tap { text-transform: none; letter-spacing: 0; font-weight: 500; margin: 4px 0 0; }
  .cmp .row { gap: 0; padding: 16px 18px; font-size: 14.5px; }
  .cmp .row:has(.tg:checked) { gap: 18px; padding: 18px 18px 22px; }
  details.more summary { padding: 16px 18px; }
}

/* ── Enterprise is set up by e-mail and carries no figure (4 October 2026):
   its name, one line, the five things that are agreed, one button. The list
   is ruled like the other cards' rows, so the three stand as one set. ── */
.tier.ent h3 { font-size: 22px; line-height: 1.3; text-wrap: balance; margin-top: 4px; }
.tset { border-top: 1px solid var(--on-dark-line); }
.tset li { padding: 12px 0 11px; border-bottom: 1px solid var(--on-dark-line); font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--on-dark); }

/* ── the summary by e-mail (4 October 2026): one dark panel, what the mail
   holds on the left, the mail itself drawn on the right as the host of the
   opening's call receives it, and under it the top of Marta's, in Italian. ── */
.hero.v2 .facts .sumfact { flex-basis: 100%; border-left: 0; text-align: center; margin-top: 8px; }
.hero.v2 .facts .sumfact a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sum { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 52px 52px 56px; display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
.sum-t { min-width: 0; }
.sum .kick { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.sum h2 { font-size: 30px; line-height: 1.25; color: var(--on-dark); text-wrap: balance; margin-bottom: 30px; }
.sum .nb { white-space: nowrap; }
.sum-m { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mail { background: #ffffff; color: #111111; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,0.34); }
.mail-h { display: flex; flex-direction: column; gap: 5px; padding: 18px 24px 16px; border-bottom: 1px solid #e4e4e4; background: #f5f5f5; }
.mail-from { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #00a56d; }
.mail-h b { font-size: 16px; line-height: 1.35; font-weight: 700; text-wrap: balance; }
.mail-to { font-size: 12.5px; color: #6a6a6a; }
.mail-b { padding: 6px 24px 22px; }
.mail-b p { font-size: 14.5px; line-height: 1.55; color: #2a2a2a; }
.mail-b .mail-k { font-size: 17px; line-height: 1.3; font-weight: 700; color: #000000; margin: 16px 0 7px; }
.mail-b ul { display: flex; flex-direction: column; gap: 7px; }
.mail-b li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: #2a2a2a; }
.mail-b li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #00a56d; }
.mail-b .mail-f { margin-top: 18px; padding-top: 12px; border-top: 1px solid #e4e4e4; font-size: 12px; line-height: 1.5; color: #6a6a6a; }
/* The mail's two boxes and its follow-up, in the mail's own colours
   (api/_lib/meeting-letter.ts): what was agreed on green with a tick before
   each line, the problems raised on amber, and a follow-up as one row — who,
   what, and the day as a pill. */
.mail-box { margin-top: 16px; padding: 13px 16px 14px; border-left: 4px solid; border-radius: 9px; }
.mail-b .mail-box .mail-k { margin: 0 0 7px; font-size: 15.5px; }
.mail-box li { color: #17191c; }
.mail-box.ok { background: #e8f7f0; border-color: #00a56d; }
.mail-box.ok .mail-k { color: #0a5a3f; }
.mail-box.ok li { padding-left: 22px; }
.mail-box.ok li::before { left: 2px; top: 0.42em; width: 10px; height: 5px; border-radius: 0; background: none; border-left: 2px solid #00a56d; border-bottom: 2px solid #00a56d; transform: rotate(-45deg); }
.mail-box.open { background: #fffaf0; border-color: #e8a317; }
.mail-box.open .mail-k { color: #7a4b00; }
.mail-box.open li::before { background: #e8a317; }
.mail-b .mail-fu { border: 1px solid #e2e4e8; border-radius: 9px; }
.mail-b .mail-fu li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 10px 14px; }
.mail-b .mail-fu li::before { content: none; }
.mail-fu b { font-weight: 700; color: #17191c; }
.mail-fu i { justify-self: start; padding: 2px 10px; border-radius: 99px; background: #eceff2; font-style: normal; font-size: 12.5px; line-height: 19px; font-weight: 600; color: #17191c; white-space: nowrap; }
.mail.two { margin-left: 44px; box-shadow: none; }
.mail.two .mail-h { padding: 12px 20px 11px; }
.mail.two .mail-b { padding: 0 20px 16px; }
.mail.two .mail-b .mail-k { font-size: 15px; margin-top: 13px; }
.mail.two .mail-b p { font-size: 13.5px; }
.sum .cap { font-size: 13.5px; line-height: 1.5; color: var(--on-dark-2); margin-top: 4px; }
@media (max-width: 1000px) {
  .sum { grid-template-columns: 1fr; gap: 36px; padding: 40px 32px 40px; }
}
@media (max-width: 760px) {
  .sum { padding: 30px 20px 28px; gap: 28px; }
  .sum h2 { font-size: 23px; margin-bottom: 24px; }
  .mail-h { padding: 15px 18px 13px; }
  .mail-h b { font-size: 15px; }
  .mail-b { padding: 4px 18px 18px; }
  .mail.two { margin-left: 20px; }
  .hero.v2 .facts .sumfact { margin-top: 0; text-align: inherit; }
  .mail.two .mail-h { padding: 11px 16px 10px; }
  .mail.two .mail-b { padding: 0 16px 14px; }
  .mail-box { padding: 12px 14px 13px; }
  .mail-b .mail-fu li { grid-template-columns: minmax(0, 1fr); }
}

/* ── the others: our card first, dark, with green checks; then each of the
   others as a short card of plain bullets. Nothing is opened by a tap except
   the translation services and the sources. On a wide screen the cards stand
   three in a row. ── */
.vs-us { background: linear-gradient(180deg, var(--dark-a), var(--dark-b)); color: var(--on-dark); border-radius: 14px; padding: 32px 40px 34px; display: grid; grid-template-columns: 290px 1fr; gap: 32px; align-items: start; }
.vs-us h3 { font-size: 22px; line-height: 1.25; }
.vs-us ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 13px 40px; }
.vs-us li { position: relative; padding-left: 30px; font-size: 16px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.vs-us li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 7px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.vs-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vs-card { border: 1px solid var(--line); border-radius: 14px; padding: 24px 20px 24px; }
.vs-card h3 { font-size: 17px; }
.vs-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.vs-card ul { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.vs-card li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.vs-card li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.vs-more { margin-top: 16px; }
.vs-more summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 14px; padding: 15px 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.vs-more summary::-webkit-details-marker, .vs-src summary::-webkit-details-marker { display: none; }
.vs-more summary::before { content: "+"; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 16px; line-height: 1; font-weight: 500; flex: none; }
.vs-more[open] summary::before { content: "–"; }
.vs-more summary span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
.vs-note { margin-top: 10px; max-width: 52rem; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.vs-more + .vs-note { margin-top: 30px; }
.vs-src { margin-top: 16px; }
.vs-src summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.vs-src summary::before { content: "+"; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.vs-src[open] summary::before { content: "–"; }
.vs-src p { margin-top: 10px; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); overflow-wrap: anywhere; }
.vs-src p b { color: var(--ink-2); font-weight: 700; }
@media (max-width: 1000px) {
  .vs-us { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 860px) {
  .vs-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .vs-us { padding: 26px 22px 28px; }
  .vs-us h3 { font-size: 20px; }
  .vs-us ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 12px; }
  .vs-us li { font-size: 15px; }
  .vs-grid { grid-template-columns: 1fr; gap: 12px; }
  .vs-card { padding: 22px 20px 24px; }
  .vs-card li { font-size: 14px; }
  .vs-more summary { padding: 15px 18px; }
  .vs-more summary span { flex-basis: 100%; padding-left: 36px; }
}

/* ── The Enterprise form (SPEC-COMMERCE 0.0, R11): a dialog over the page,
   opened by "Write to us" on the Enterprise card and by /meeting/#enterprise
   (contact.js). White, the page's own type, the price cards' green pill for
   Send. The <dialog> element is the dark ground; .ask-in is the card, so a
   click on the ground is a click outside. On a phone it fills the screen. ── */
html.asking { overflow: hidden; }
.ask { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 24px 16px; border: 0; background: transparent; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.ask[open] { display: grid; place-items: center; }
.ask::backdrop { background: rgba(16, 21, 24, 0.66); }
.ask-in { position: relative; width: 100%; max-width: 520px; background: var(--bg); border-radius: 14px; padding: 42px 44px 34px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); }
.ask h2 { font-size: 19px; line-height: 1.3; letter-spacing: 0.08em; padding-right: 36px; }
.ask-lede { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ask form { display: flex; flex-direction: column; }
.ask-f { display: flex; flex-direction: column; margin-top: 20px; }
.ask-lede + .ask-f { margin-top: 26px; }
.ask-f label { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
.ask-h { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin: -3px 0 9px; }
.ask-f input, .ask-f textarea { width: 100%; margin: 0; padding: 0 15px; height: 50px; border: 1px solid #c8c8c8; border-radius: 10px; background: var(--bg); color: var(--ink); font: 500 16px/1.5 var(--words); appearance: none; -webkit-appearance: none; outline: 0; }
.ask-f textarea { height: auto; min-height: 106px; padding: 12px 15px; resize: vertical; display: block; }
.ask-f input:hover, .ask-f textarea:hover { border-color: var(--ink-3); }
.ask-f input:focus-visible, .ask-f textarea:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ask-f input[aria-invalid="true"], .ask-f textarea[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.ask-f input[aria-invalid="true"]:focus-visible, .ask-f textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 2px #b3261e; }
.ask-e { margin-top: 7px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #b3261e; }
.ask-say { margin-top: 22px; padding: 12px 15px; border-radius: 10px; background: #fbeeed; font-size: 14px; font-weight: 600; line-height: 1.5; color: #8c1d18; }
.ask [hidden] { display: none; }
/* Off the screen, not display:none: a robot fills what it finds in the form. */
.ask-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ask .btn { width: 100%; margin-top: 28px; background: var(--teal); color: #04130d; cursor: pointer; appearance: none; -webkit-appearance: none; }
.ask .btn:hover { filter: brightness(0.96); }
.ask .btn:disabled { cursor: default; opacity: 0.6; filter: none; }
.ask .btn:focus-visible, .ask-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ask-say:not([hidden]) ~ .btn { margin-top: 16px; }
.ask-mail { margin-top: 18px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ask-mail span { color: var(--ink-2); font-weight: 600; user-select: all; -webkit-user-select: all; }
.ask-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.ask-x:hover { background: var(--sunk); color: var(--ink); }
.ask-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ask-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0 4px; }
.ask-ok { width: 56px; height: 56px; padding: 15px; border-radius: 999px; background: var(--teal); fill: none; stroke: #04130d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ask-sent { margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; outline: 0; }
.ask-sent b { display: block; margin-bottom: 6px; font-size: 19px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
/* The address wraps where the line ends (a long one, on a phone), and the
   full stop stays with it. */
.ask-sent span { color: var(--ink); font-weight: 600; }
.ask-done .btn { width: auto; min-width: 180px; margin-top: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .ask[open] .ask-in { animation: ask-in 0.18s ease-out; }
  .ask[open]::backdrop { animation: ask-ground 0.18s ease-out; }
}
@keyframes ask-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ask-ground { from { opacity: 0; } }
/* A laptop's window is shorter than the form at its full, airy size: there
   it is drawn closer, so that Send and the address under it are in sight
   without scrolling the dialog, also when a field is refused. */
@media (min-width: 601px) and (max-height: 940px) {
  .ask { padding: 16px; }
  .ask-in { padding: 28px 40px 24px; }
  .ask-lede { margin-top: 8px; font-size: 14px; line-height: 1.5; }
  .ask-f { margin-top: 14px; }
  .ask-lede + .ask-f { margin-top: 18px; }
  .ask-f label { margin-bottom: 6px; }
  .ask-f input { height: 44px; }
  .ask-f textarea { height: 88px; min-height: 0; padding: 10px 15px; }
  .ask .btn { margin-top: 20px; }
  .ask-mail { margin-top: 14px; }
  .ask-x { top: 12px; right: 12px; }
  .ask-done .btn { margin-top: 28px; }
}
@media (min-width: 601px) and (max-height: 700px) {
  .ask { padding: 10px 16px; }
  .ask-in { padding: 22px 40px 18px; }
  .ask-f { margin-top: 11px; }
  .ask-lede + .ask-f { margin-top: 14px; }
  .ask-f input { height: 40px; }
  .ask-f textarea { height: 68px; padding: 8px 15px; }
  .ask .btn { margin-top: 16px; }
  .ask-mail { margin-top: 12px; }
}
@media (max-width: 600px) {
  .ask { padding: 0; }
  .ask[open] { display: block; }
  .ask-in { max-width: none; min-height: 100%; border-radius: 0; box-shadow: none; padding: 56px 20px 32px; }
  .ask h2 { font-size: 18px; }
  .ask-x { top: 10px; right: 10px; }
  .ask-done { min-height: calc(100vh - 88px); min-height: calc(100dvh - 88px); justify-content: center; padding: 0 0 72px; }
  .ask-done .btn { width: 100%; }
}