/* Sefid homepage - redesigned composition on the Zowie design language.
   Every colour, radius, shadow and type step below is a Zowie token. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{overflow-x:hidden;background:var(--color-surface-primary);color:var(--color-primary);
  font-family:var(--default-font-family);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{margin-inline:auto;width:100%;max-width:var(--container-max-width);padding-inline:var(--space-container)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding-inline:16px;
  font-size:var(--text-body-md);line-height:var(--text-body-md--line-height);font-weight:var(--font-weight-medium);
  letter-spacing:-.01em;border-radius:var(--radius-md);transition:background .15s ease,opacity .15s ease,color .15s ease;white-space:nowrap}
.btn.lg{height:56px;padding-inline:24px;font-size:var(--text-body-lg)}
.btn.solid{background:var(--color-button-primary);color:var(--color-surface-primary)}
.btn.solid:hover{opacity:.9}
.btn.ghost{background:var(--color-button-secondary);color:var(--color-primary)}
.btn.ghost:hover{background:var(--color-button-hover-secondary)}
.btn.line{border:1px solid var(--color-border-primary);background:transparent;color:var(--color-primary)}
.btn.line:hover{background:var(--color-surface-secondary)}
.btn.dark{background:var(--color-black,#0d0d0d);color:#fff}
.btn.clear{border:1px solid rgba(255,255,255,.55);color:#fff}
.btn.clear:hover{background:rgba(255,255,255,.12)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;height:var(--nav-height);
  background:color-mix(in srgb,var(--color-surface-primary) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border-primary)}
.hdr-in{display:flex;align-items:center;gap:40px;height:var(--nav-height)}
.mark{font-size:26px;line-height:1;font-weight:var(--font-weight-medium);letter-spacing:-.04em}
.mark i{color:var(--color-brand-orange-1);font-style:normal}
.build{margin-left:12px;padding:4px 8px;border:1px solid var(--color-brand-orange-1);font-family:var(--default-mono-font-family);font-size:11px;letter-spacing:.08em;color:var(--color-brand-orange-1);white-space:nowrap}
@media (max-width:767px){.build{display:none}}
.hdr nav{flex:1;min-width:0}
.hdr nav ul{display:flex;gap:4px;justify-content:center;list-style:none;margin:0;padding:0}
.hdr nav a{display:inline-flex;align-items:center;height:40px;padding-inline:14px;border-radius:var(--radius-md);
  font-size:var(--text-body-md);color:var(--color-primary)}
.hdr nav a:hover{background:var(--color-surface-secondary)}
.hdr-cta{display:flex;gap:8px;align-items:center}
@media (max-width:1023px){.hdr nav{display:none}.hdr-in{gap:16px;justify-content:space-between}.hdr .btn.ghost{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:20;margin-top:calc(var(--nav-height) * -1);min-height:100vh;display:flex;
  align-items:flex-end;border-bottom:1px solid var(--color-border-primary);
  background-image:linear-gradient(to bottom,#fff 0%,var(--color-surface-secondary) 100%);overflow:hidden}
.hero-globe{position:absolute;inset:0;transform:translate(0.05%,-11%);transform-origin:center}
@media (max-width:1023px){.hero-globe{transform:translate(1.5%,-6%)}}
@media (max-width:1023px){.hero-globe{transform:none}}
.hero-globe canvas{display:block;height:100%;width:100%}
.hero-fade{position:absolute;inset-inline:0;bottom:0;height:58%;pointer-events:none;
  background-image:linear-gradient(to top,rgba(250,250,249,1) 0%,rgba(250,250,249,.96) 32%,rgba(250,250,249,0) 100%)}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;
  padding-top:calc(var(--nav-height) + 62vh);padding-bottom:56px}
.hero-in > *{width:100%;max-width:760px}
.hero-in .snippet{max-width:100%}
.pill{display:inline-flex;align-items:center;gap:8px;margin:0;height:32px;padding-inline:14px;
  border:1px solid var(--color-border-primary);border-radius:var(--radius-full);
  background:color-mix(in srgb,var(--color-surface-primary) 78%,transparent);
  font-size:var(--text-body-md);color:var(--color-secondary)}
.pill .dot{width:6px;height:6px;background:var(--color-brand-orange-1);border-radius:var(--radius-full);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-brand-orange-1) 22%,transparent)}
.hero h1{margin:0;font-size:var(--text-display-lg);line-height:var(--text-display-lg--line-height);
  letter-spacing:-.025em;font-weight:var(--font-weight-normal)}
.lede{margin:0 auto;max-width:60ch;font-size:var(--text-body-xl);line-height:var(--text-body-xl--line-height);
  color:var(--color-secondary)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.snippet{display:flex;align-items:center;gap:14px;margin-top:8px;padding:10px 14px;
  border:1px solid var(--color-border-primary);background:var(--color-surface-primary);box-shadow:var(--shadow-md);
  max-width:100%;overflow:auto}
.snippet code{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);white-space:pre;color:var(--color-primary)}
.snip-label{font-size:var(--text-body-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--color-brand-orange-1)}
.snip-note{font-size:var(--text-body-sm);color:var(--color-tertiary);white-space:nowrap}
@media (max-width:1023px){.hero h1{font-size:var(--text-display-md);line-height:var(--text-display-md--line-height)}
  .hero-in{padding-top:calc(var(--nav-height) + 40px);gap:18px}.snip-note{display:none}}

/* ---------- language ticker band ---------- */
.band{border-bottom:1px solid var(--color-border-primary);background:var(--color-surface-primary)}
.ticker{overflow:hidden;padding-block:18px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 96px,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 96px,#000 calc(100% - 96px),transparent 100%)}
.ticker-run{display:flex;align-items:center;gap:20px;width:max-content;animation:tick 58s linear infinite}
.tick{font-size:var(--text-body-md);color:var(--color-tertiary);white-space:nowrap}
.tick-dot{width:3px;height:3px;background:var(--color-brand-orange-1);border-radius:var(--radius-full);flex:none}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-run{animation:none}}

/* ---------- section shell ---------- */
.sec{padding-block:96px;border-bottom:1px solid var(--color-border-primary)}
@media (max-width:1023px){.sec{padding-block:64px}}
.sec-head{max-width:760px;margin-bottom:48px}
.eyebrow{margin:0 0 16px;font-size:var(--text-body-md);font-weight:var(--font-weight-medium);
  letter-spacing:.09em;text-transform:uppercase;color:var(--color-brand-orange-1)}
.sec h2{margin:0;font-size:var(--text-display-sm);line-height:var(--text-display-sm--line-height);
  font-weight:var(--font-weight-normal);letter-spacing:-.02em}
@media (min-width:1024px){.sec h2{font-size:var(--text-display-md);line-height:var(--text-display-md--line-height)}}
.sub{margin:16px 0 0;max-width:56ch;font-size:var(--text-body-lg-long);line-height:var(--text-body-lg-long--line-height);
  color:var(--color-secondary)}

/* ---------- stats ---------- */
.stats-sec{background:var(--color-surface-secondary)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-border-primary);
  border:1px solid var(--color-border-primary)}
.stat{background:var(--color-surface-primary);padding:40px;display:flex;flex-direction:column;gap:20px;min-height:220px}
.stat .n{margin:0;font-size:var(--text-display-sm);line-height:1;letter-spacing:-.03em}
.stat .n::after{content:"";display:block;width:36px;height:2px;margin-top:20px;background:var(--color-brand-orange-1)}
.stat .d{margin:0;font-size:var(--text-body-lg-long);line-height:var(--text-body-lg-long--line-height);color:var(--color-secondary)}
@media (max-width:1023px){.stats{grid-template-columns:1fr}.stat{padding:28px;min-height:0}}

/* ---------- bento ---------- */
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--color-border-primary);
  border:1px solid var(--color-border-primary)}
.bento{grid-column:span 2;background:var(--color-surface-primary);padding:36px;display:flex;flex-direction:column;gap:12px;
  transition:background .18s ease}
.bento.wide{grid-column:span 3}
.bento:hover{background:var(--color-surface-secondary)}
.bento .num{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-brand-orange-1)}
.bento h3{margin:8px 0 0;font-size:var(--text-headline-sm);line-height:var(--text-headline-sm--line-height);
  font-weight:var(--font-weight-normal)}
.bento p{margin:0;font-size:var(--text-body-lg-long);line-height:var(--text-body-lg-long--line-height);color:var(--color-secondary)}
@media (max-width:1023px){.bento-grid{grid-template-columns:1fr}.bento,.bento.wide{grid-column:span 1;padding:28px}}

/* ---------- dark flow ---------- */
.dark.flow-sec{background:var(--color-surface-primary);color:var(--color-primary)}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--color-border-primary);border:1px solid var(--color-border-primary)}
.flow li{background:var(--color-surface-primary);padding:32px;display:flex;flex-direction:column;gap:16px;position:relative}
.flow .t{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-brand-orange-1)}
.flow h4{margin:0 0 8px;font-size:var(--text-body-xl);line-height:var(--text-body-xl--line-height);font-weight:var(--font-weight-medium)}
.flow p{margin:0;font-size:var(--text-body-lg-long);line-height:var(--text-body-lg-long--line-height);color:var(--color-secondary)}
@media (max-width:1023px){.flow{grid-template-columns:1fr}.flow li{padding:24px}}

/* ---------- comparison ---------- */
.cmp{width:100%;border-collapse:collapse;border:1px solid var(--color-border-primary);background:var(--color-surface-primary)}
.cmp th{text-align:left;padding:20px 24px;font-size:var(--text-body-md);font-weight:var(--font-weight-medium);
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-tertiary);border-bottom:1px solid var(--color-border-primary);
  background:var(--color-surface-secondary);width:50%}
.cmp td{padding:20px 24px;font-size:var(--text-body-lg);line-height:var(--text-body-lg--line-height);
  border-bottom:1px solid var(--color-border-primary);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp td.yes{color:var(--color-primary);border-right:1px solid var(--color-border-primary)}
.cmp td.no{color:var(--color-tertiary)}
.tick-i{display:inline-block;width:14px;height:8px;margin-right:12px;border-left:2px solid var(--color-brand-orange-1);
  border-bottom:2px solid var(--color-brand-orange-1);transform:rotate(-45deg) translateY(-2px)}
@media (max-width:767px){.cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}.cmp thead{display:none}
  .cmp td{border-right:0}.cmp td.no{padding-top:0;border-bottom:1px solid var(--color-border-primary)}}

/* ---------- demos ---------- */
.demos-sec{background:var(--color-surface-secondary)}
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.demo{display:flex;flex-direction:column;gap:12px;padding:36px;border:1px solid var(--color-border-primary);
  background:var(--color-surface-primary);transition:box-shadow .18s ease,transform .18s ease}
.demo:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.demo .kicker{font-size:var(--text-body-md);letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand-orange-1)}
.demo h3{margin:0;font-size:var(--text-headline-sm);font-weight:var(--font-weight-normal)}
.demo p{margin:0;font-size:var(--text-body-lg-long);line-height:var(--text-body-lg-long--line-height);color:var(--color-secondary)}
.demo .domain{margin-top:12px;display:inline-flex;align-items:center;gap:10px;font-family:var(--default-mono-font-family);
  font-size:var(--text-mono-md);color:var(--color-primary)}
.demo .arr{width:9px;height:9px;border-top:1.5px solid var(--color-brand-orange-1);border-right:1.5px solid var(--color-brand-orange-1);transform:rotate(45deg)}
@media (max-width:1023px){.demo-grid{grid-template-columns:1fr}.demo{padding:28px}}

/* ---------- languages ---------- */
.lang-in{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:10px 16px;border:1px solid var(--color-border-primary);background:var(--color-surface-primary);
  font-size:var(--text-body-lg);color:var(--color-secondary);transition:border-color .15s ease,color .15s ease}
.chips li:hover{border-color:var(--color-brand-orange-1);color:var(--color-primary)}
@media (max-width:1023px){.lang-in{grid-template-columns:1fr;gap:32px}}

/* ---------- trust ---------- */
.trust-sec{background:var(--color-surface-secondary)}
.trust-in{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.badges{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--color-border-primary);
  border:1px solid var(--color-border-primary)}
.badges li{background:var(--color-surface-primary);padding:24px 28px;display:flex;flex-direction:column;gap:6px}
.badges .bt{font-size:var(--text-body-lg);font-weight:var(--font-weight-medium)}
.badges .bd{font-size:var(--text-body-md);color:var(--color-tertiary)}
@media (max-width:1023px){.trust-in{grid-template-columns:1fr;gap:32px}}

/* ---------- quote ---------- */
.quote-sec blockquote{margin:0;padding-left:28px;border-left:2px solid var(--color-brand-orange-1);
  font-size:var(--text-quote-md);line-height:var(--text-quote-md--line-height);font-style:italic;max-width:62ch}
@media (min-width:1024px){.quote-sec blockquote{font-size:var(--text-quote-lg);line-height:var(--text-quote-lg--line-height)}}
.quote-sec .who{margin:24px 0 0;padding-left:30px;display:flex;flex-direction:column;gap:4px;font-size:var(--text-body-lg)}
.quote-sec .who span{color:var(--color-tertiary)}

/* ---------- cta ---------- */
.cta{background:var(--color-brand-orange-1);padding-block:104px;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;background:url(..//home/images/backgrounds/orange-1.webp) center/cover;opacity:.55;pointer-events:none}
.cta-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;color:#fff}
.hero .snippet{margin-top:4px}
@media (max-width:1023px){.hero-in{align-items:stretch}.hero-in > *{max-width:100%}}
.cta h2{margin:0;font-size:var(--text-display-sm);line-height:var(--text-display-sm--line-height);font-weight:var(--font-weight-normal);letter-spacing:-.02em}
@media (min-width:1024px){.cta h2{font-size:var(--text-display-md);line-height:var(--text-display-md--line-height)}}
.cta p{margin:0;max-width:52ch;font-size:var(--text-body-xl);line-height:var(--text-body-xl--line-height);color:rgba(255,255,255,.88)}
.cta .serif-accent{color:#fff}

/* ---------- footer ---------- */
.ftr{background:var(--color-surface-primary)}
.ftr-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-block:64px}
.ftr-brand p{margin:16px 0 0;max-width:34ch;font-size:var(--text-body-md);color:var(--color-tertiary)}
.ftr-col h5{margin:0 0 16px;font-size:var(--text-body-md);font-weight:var(--font-weight-medium);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-tertiary)}
.ftr-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr-col a{font-size:var(--text-body-lg);color:var(--color-secondary)}
.ftr-col a:hover{color:var(--color-primary)}
.ftr-fine{display:flex;justify-content:space-between;gap:16px;padding-block:24px;
  border-top:1px solid var(--color-border-primary);font-size:var(--text-body-md);color:var(--color-tertiary)}
@media (max-width:1023px){.ftr-in{grid-template-columns:1fr 1fr;gap:32px;padding-block:48px}}


/* ================= header dropdowns (Zowie behaviour) ================= */
html{scroll-behavior:smooth}
::selection{background:var(--color-brand-orange-1);color:#fff}
.hdr{border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.hdr.scrolled{border-bottom-color:var(--color-border-primary);box-shadow:var(--shadow-sm)}
.hdr.menu-open{border-bottom-color:var(--color-border-primary)}
.navbtn{display:inline-flex;align-items:center;gap:7px;height:40px;padding-inline:14px;border:0;background:transparent;
  font-family:inherit;font-size:var(--text-body-md);color:var(--color-primary);cursor:pointer;border-radius:var(--radius-md);
  transition:background .15s ease,color .15s ease}
.navbtn:hover,.has-menu.open > .navbtn{background:var(--color-surface-secondary)}
.chev{width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s ease;opacity:.6}
.has-menu.open .chev{transform:rotate(-135deg) translateY(-2px);opacity:1}
.has-menu{position:static}
.menu{position:absolute;left:0;right:0;top:var(--nav-height);background:var(--color-surface-primary);
  border-bottom:1px solid var(--color-border-primary);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .22s var(--ease-out,ease),visibility .18s;pointer-events:none;z-index:70}
.has-menu.open .menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.menu-in{align-items:start;align-content:start;grid-auto-rows:min-content;margin-inline:auto;max-width:var(--container-max-width);padding:24px var(--space-container) 32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border-primary);
  border-inline:1px solid var(--color-border-primary)}
.mcard{background:var(--color-surface-primary);display:flex;flex-direction:column;gap:6px;padding:22px;min-height:116px;
  transition:background .15s ease}
.mcard:hover{background:var(--color-surface-secondary)}
.mcard-t{font-size:var(--text-body-lg);font-weight:var(--font-weight-medium)}
.mcard-t::after{content:"\2192";margin-left:8px;color:var(--color-brand-orange-1);opacity:0;transition:opacity .15s ease,margin-left .15s ease}
.mcard:hover .mcard-t::after{opacity:1;margin-left:12px}
.mcard-d{font-size:var(--text-body-md);color:var(--color-tertiary)}
.menu-scrim{position:fixed;inset:var(--nav-height) 0 0;background:rgba(17,17,17,.28);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;z-index:50}
.menu-scrim.on{opacity:1;visibility:visible}
@media (max-width:1023px){.menu{display:none}}

/* ================= polish / micro-interactions ================= */
.rv{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv{animation:softIn .7s var(--ease-out,ease) both}
@keyframes softIn{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.btn.solid:hover,.btn.dark:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn{will-change:transform}
.stat{position:relative;transition:background .2s ease}
.stat:hover{background:var(--color-surface-secondary)}
.bento{position:relative}
.bento::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--color-brand-orange-1);
  transition:width .28s var(--ease-out,ease)}
.bento:hover::before{width:100%}
.flow li::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(to right,var(--color-brand-orange-1),transparent)}
.chips li{cursor:default}
.chips li:hover{transform:translateY(-1px)}
.chips li{transition:border-color .15s ease,color .15s ease,transform .15s ease}
.demo:hover .arr{transform:rotate(45deg) translate(2px,-2px)}
.demo .arr{transition:transform .18s ease}
.ftr-col a{position:relative}
.ftr-col a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--color-brand-orange-1);
  transition:width .2s ease}
.ftr-col a:hover::after{width:100%}
.hero .pill{animation:floatIn .8s var(--ease-out,ease) both}
.hero h1{animation:floatIn .9s .05s var(--ease-out,ease) both}
.hero .lede{animation:floatIn .9s .12s var(--ease-out,ease) both}
.hero .hero-actions{animation:floatIn .9s .2s var(--ease-out,ease) both}
.hero .snippet{animation:floatIn .9s .28s var(--ease-out,ease) both}
@keyframes floatIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .pill,.hero h1,.hero .lede,.hero .hero-actions,.hero .snippet{animation:none}}


/* ================= v10 refinement layer =================
   Same family as the Zowie system (orange accent, hairlines, serif italics)
   but softened: warm paper background, pill buttons, floating cards on a
   faint grid, chapter numbering, ink-dark feature band. */

body{background:#fbfaf9}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(90deg,rgba(17,17,17,.035) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;max-width:none;opacity:.55}
main,header,footer{position:relative;z-index:1}

/* softer geometry */
.btn{border-radius:999px;letter-spacing:-.005em}
.btn.line{border-color:rgba(17,17,17,.16)}
.btn.solid,.btn.dark{background:#101010}
.btn.solid:hover,.btn.dark:hover{box-shadow:0 8px 24px -8px rgba(16,16,16,.45)}
.navbtn{border-radius:999px}
.build{border-radius:999px}

/* section rhythm + chapter numbers */
.sec{border-bottom:0;padding-block:120px}
@media (max-width:1023px){.sec{padding-block:72px}}
body{counter-reset:chapter}
.sec-head{position:relative;max-width:820px}
.sec .eyebrow{display:inline-flex;align-items:center;gap:12px;counter-increment:chapter;letter-spacing:.14em}
.sec .eyebrow::before{content:counter(chapter,decimal-leading-zero);
  font-family:var(--default-mono-font-family);font-size:12px;color:var(--color-brand-orange-1);
  padding:3px 8px;border:1px solid rgba(17,17,17,.4);border-radius:999px}
.sec h2{letter-spacing:-.03em}
.serif-accent{color:#8a8a86}

/* cards float instead of sharing one grid frame */
.stats,.bento-grid,.badges{background:transparent;border:0;gap:20px}
.stat,.bento,.demo,.badges li,.mcard{border:1px solid rgba(17,17,17,.08);border-radius:14px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(16,16,16,.03),0 12px 32px -24px rgba(16,16,16,.35);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.stat:hover,.bento:hover,.demo:hover{transform:translateY(-3px);border-color:rgba(17,17,17,.35);
  box-shadow:0 2px 4px rgba(16,16,16,.04),0 24px 48px -28px rgba(16,16,16,.45);background:#fff}
.bento::before{display:none}
.stat .n{font-size:64px;letter-spacing:-.04em}
.stat .n::after{width:28px;background:linear-gradient(to right,var(--color-brand-orange-1),rgba(17,17,17,0))}
.bento .num{opacity:.9}
.chips li{border-radius:999px;border-color:rgba(17,17,17,.1);background:rgba(255,255,255,.7)}
.chips li:hover{border-color:var(--color-brand-orange-1);background:#fff}

/* comparison table as one rounded card */
.cmp{border:1px solid rgba(17,17,17,.08);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.86);
  box-shadow:0 12px 32px -26px rgba(16,16,16,.4)}
.cmp th{background:rgba(250,250,249,.9);letter-spacing:.12em}
.cmp td,.cmp th{border-color:rgba(17,17,17,.07)}
.cmp tbody tr{transition:background .18s ease}
.cmp tbody tr:hover{background:rgba(17,17,17,.035)}

/* hero: quieter, taller, text lower */
.hero{background-image:radial-gradient(1100px 620px at 50% 8%,#ffffff 0%,#fbfaf9 62%,#f6f5f3 100%)}
.hero-in{gap:28px}
.hero h1{letter-spacing:-.035em}
.snippet{border-radius:999px;border-color:rgba(17,17,17,.1);background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);box-shadow:0 12px 30px -22px rgba(16,16,16,.5);padding:12px 20px}
.snip-label{letter-spacing:.16em}

/* ink band */
.flow-sec{background:radial-gradient(900px 420px at 12% -10%,rgba(17,17,17,.18),transparent 62%),#0e0e0f;
  border-radius:28px;margin-inline:var(--space-container);padding-inline:0}
.flow-sec .wrap{max-width:calc(var(--container-max-width) - 48px)}
.flow-sec h2,.flow-sec .sec-head{color:#f7f7f5}
.flow-sec .serif-accent{color:rgba(247,247,245,.55)}
.flow{background:transparent;border:0;gap:16px;grid-template-columns:repeat(4,1fr)}
.flow li{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:26px;backdrop-filter:blur(8px);transition:background .2s ease,border-color .2s ease}
.flow li:hover{background:rgba(255,255,255,.08);border-color:rgba(17,17,17,.4)}
.flow li::before{display:none}
.flow h4{color:#f7f7f5}
.flow p{color:rgba(247,247,245,.62)}
@media (max-width:1023px){.flow-sec{border-radius:20px;margin-inline:12px}.flow{grid-template-columns:1fr}}

/* quote */
.quote-sec blockquote{border-left:0;padding-left:0;position:relative;padding-top:44px;letter-spacing:-.01em}
.quote-sec blockquote::before{content:"\201C";position:absolute;top:-16px;left:-6px;font-family:"Messina Serif",Georgia,serif;
  font-size:120px;line-height:1;color:rgba(17,17,17,.22)}
.quote-sec .who{padding-left:0}

/* closing band: ink with an orange aurora, not flat orange */
.cta{background:#0e0e0f;border-radius:28px;margin:0 var(--space-container) 64px;padding-block:112px;overflow:hidden}
.cta::after{background:radial-gradient(700px 380px at 50% 120%,rgba(17,17,17,.55),transparent 70%);opacity:1}
.cta h2{letter-spacing:-.03em}
.cta p{color:rgba(247,247,245,.66)}
.cta .serif-accent{color:rgba(255,255,255,.62)}
.cta .btn.dark{background:#fff;color:#101010}
.cta .btn.dark:hover{background:#f2f2f0}
@media (max-width:1023px){.cta{border-radius:20px;margin-inline:12px;padding-block:72px}}

/* ticker + trust surfaces */
.band{background:transparent;border-bottom:1px solid rgba(17,17,17,.07);border-top:1px solid rgba(17,17,17,.07)}
.stats-sec,.demos-sec,.trust-sec{background:transparent}
.demos-sec,.trust-sec,.langs-sec,.stats-sec{border-bottom:0}

/* header + menu polish */
.hdr{background:rgba(251,250,249,.72);backdrop-filter:saturate(140%) blur(14px)}
.menu{border-bottom:0}
.menu-in{background:transparent;border:0;padding-top:16px;padding-bottom:28px;gap:16px}
.mcard{background:rgba(255,255,255,.9)}
.mcard:hover{background:#fff}

/* footer */
.ftr{background:transparent;border-top:1px solid rgba(17,17,17,.07)}


/* ---- v11 globe framing ---- */
:root{--globe-accent:#111111}
.hero{min-height:122vh}
.hero-globe::after{content:"";position:absolute;left:50%;top:26%;width:min(70vw,760px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(17,17,17,.10) 0%,rgba(17,17,17,.04) 42%,transparent 68%)}
.hero-fade{height:46%}
@media (max-width:1023px){.hero{min-height:112vh}.hero-globe::after{top:22%;width:86vw}}


/* ================= v12 ================= */

/* real logo lockup */
.mark{display:inline-flex;align-items:center;gap:9px}
.mark-i{width:26px;height:26px;color:var(--color-brand-orange-1);flex:none}
.ftr-brand .mark-i{width:24px;height:24px}

/* hero without the install strip */
.hero-in{gap:26px}
.hero-actions{margin-top:6px}

/* globe: fade the lower half out into the page */
.hero-globe{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.12) 80%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.12) 80%,transparent 92%)}
.hero-fade{display:none}

/* dropdown menus, nicer */
.menu{top:calc(var(--nav-height) - 6px);background:transparent;pointer-events:none}
.has-menu.open .menu{pointer-events:auto}
.menu-in{max-width:min(1080px,calc(100vw - 48px));margin-inline:auto;padding:14px;gap:8px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(18px);
  border:1px solid rgba(17,17,17,.08);border-radius:20px;
  box-shadow:0 24px 60px -28px rgba(16,16,16,.45),0 2px 6px rgba(16,16,16,.04)}
.mcard{border:1px solid transparent;border-radius:14px;background:transparent;backdrop-filter:none;box-shadow:none;
  padding:18px;min-height:104px;gap:4px;transform:translateY(6px);opacity:0;
  animation:menuItem .34s var(--ease-out,ease) forwards}
.has-menu.open .mcard:nth-child(1){animation-delay:.02s}
.has-menu.open .mcard:nth-child(2){animation-delay:.06s}
.has-menu.open .mcard:nth-child(3){animation-delay:.1s}
.has-menu.open .mcard:nth-child(4){animation-delay:.14s}
@keyframes menuItem{to{opacity:1;transform:none}}
.mcard:hover{background:rgba(17,17,17,.06);border-color:rgba(17,17,17,.22);box-shadow:none}
.mcard-t{letter-spacing:-.01em}
.mcard-d{line-height:1.45}
.menu-scrim{background:rgba(17,17,17,.16);backdrop-filter:blur(3px)}
.hdr.menu-open{border-bottom-color:transparent}
.hdr.scrolled{border-bottom-color:var(--color-border-primary)}
.navbtn:hover,.has-menu.open > .navbtn{background:rgba(17,17,17,.05)}
@media (prefers-reduced-motion:reduce){.mcard{animation:none;opacity:1;transform:none}}


/* ================= v13: back to the Zowie placement, better globe ================= */
/* hero framing exactly like the reference: one screen tall, globe filling the top, copy resting on the baseline */
.hero{min-height:100vh;align-items:flex-end}
.hero-in{padding-top:calc(var(--nav-height) + 28px);padding-bottom:64px;gap:24px}
@media (max-width:1023px){.hero{min-height:100vh}.hero-in{padding-top:calc(var(--nav-height) + 24px);padding-bottom:48px}}
/* soft dissolve instead of a hard cut, plus the original bottom veil */
.hero-globe{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.18) 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.18) 88%,transparent 100%)}
.hero-fade{display:block;height:46%;
  background-image:linear-gradient(to top,rgba(251,250,249,1) 0%,rgba(251,250,249,.82) 38%,rgba(251,250,249,0) 100%)}
/* the halo becomes a slow breathing light behind the sphere */
.hero-globe::after{top:30%;width:min(64vw,700px);
  background:radial-gradient(circle,rgba(17,17,17,.13) 0%,rgba(17,17,17,.05) 44%,transparent 70%);
  animation:globeBreath 9s ease-in-out infinite}
@keyframes globeBreath{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.hero-globe::after{animation:none}}
/* the page itself must scroll, not the body box (overflow:hidden on body killed window.scrollY) */
html{overflow-x:clip}
body{overflow-x:clip;overflow-y:visible}
/* centre the sphere horizontally: the inherited offset pushed it left and up */
.hero-globe{transform:none}
@media (max-width:1023px){.hero-globe{transform:none}}
/* header underline must come back on scroll */
.hdr.scrolled{border-bottom:1px solid #e6e6e4 !important}
.hdr.menu-open:not(.scrolled){border-bottom-color:transparent !important}
.hdr.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#e6e6e4;pointer-events:none}
.hdr.menu-open::after{display:none}


/* ================= v14: black brand, away from the Zowie look ================= */
/* one ink scale instead of a borrowed orange accent */
:root{--color-brand-orange-1:#111111;--globe-accent:#111111;
  --ink:#111111;--ink-2:#3d3d3d;--ink-3:#6b6b68;--paper:#fbfaf9;--rule:rgba(17,17,17,.10)}
.mark-i{color:var(--ink)}
/* accents that sat on a dark surface must invert, not disappear */
.flow-sec{background:radial-gradient(900px 420px at 12% -10%,rgba(255,255,255,.10),transparent 62%),#0e0e0f}
.flow li:hover{border-color:rgba(255,255,255,.28)}
.cta::after{background:radial-gradient(700px 380px at 50% 120%,rgba(255,255,255,.16),transparent 70%)}
/* hero halo: neutral light, no colour cast */
.hero-globe::after{background:radial-gradient(circle,rgba(17,17,17,.07) 0%,rgba(17,17,17,.025) 44%,transparent 70%)}
/* chapter numbers, chips and hovers in ink */
.sec .eyebrow::before{color:var(--ink);border-color:var(--rule)}
.stat .n::after{background:linear-gradient(to right,var(--ink),rgba(17,17,17,0))}
.chips li:hover{border-color:var(--ink)}
.mcard:hover{background:rgba(17,17,17,.045);border-color:rgba(17,17,17,.12)}
.quote-sec blockquote::before{color:rgba(17,17,17,.14)}

/* globe cards in the brand ink, not a borrowed amber */
.earth-card-bubble{border-color:rgba(17,17,17,.16) !important;background:rgba(255,255,255,.94) !important;
  color:#111 !important;border-radius:10px !important;
  box-shadow:0 10px 30px -18px rgba(16,16,16,.45) !important}


/* ================= v15: zero radius, swiss/editorial, not Zowie ================= */
/* 1. every corner is square -- one blanket rule so nothing is missed */
*,*::before,*::after{border-radius:0 !important}
/* 2. no soft floating shadows: structure comes from hairlines, like a printed grid */
.stat,.bento,.demo,.badges li,.mcard,.cmp,.snippet,.menu-in,.earth-card-bubble{
  box-shadow:none !important;backdrop-filter:none;background:#fff}
.stat,.bento,.demo,.badges li{border:1px solid rgba(17,17,17,.14)}
.stat:hover,.bento:hover,.demo:hover{transform:none;background:#111;border-color:#111;box-shadow:none !important}
.stat:hover *,.bento:hover *,.demo:hover *{color:#fbfaf9 !important}
/* 3. buttons become type-led blocks, not pills */
.btn{padding:14px 22px;font-weight:500;letter-spacing:-.005em;box-shadow:none !important}
.btn.solid,.btn.dark{background:#111;border:1px solid #111}
.btn.solid:hover,.btn.dark:hover{background:#fbfaf9;color:#111}
.btn.line,.btn.ghost{border:1px solid rgba(17,17,17,.24);background:transparent}
.btn.line:hover,.btn.ghost:hover{background:#111;color:#fbfaf9;border-color:#111}
.navbtn:hover,.has-menu.open > .navbtn{background:transparent;text-decoration:underline;text-underline-offset:6px}
/* 4. asymmetric editorial grid: headings anchor left, body sits in the right column */
.sec .wrap > .sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;
  max-width:none;align-items:end;padding-bottom:28px;border-bottom:1px solid rgba(17,17,17,.14);margin-bottom:40px}
.sec .sec-head h2{grid-column:1;margin:0}
.sec .sec-head .sub{grid-column:2;margin:0;max-width:44ch}
.sec .eyebrow{grid-column:1/-1;font-family:var(--default-mono-font-family);font-size:11px}
.sec .eyebrow::before{border:0;padding:0;margin-right:2px;color:rgba(17,17,17,.45)}
@media (max-width:1023px){.sec .wrap > .sec-head{grid-template-columns:1fr;gap:14px}
  .sec .sec-head h2,.sec .sec-head .sub{grid-column:1}}
/* 5. hero copy leaves the centre: left-anchored, the sphere breathes on the right */
.hero-in{align-items:flex-start;text-align:left}
.hero h1,.hero .lede{margin-inline:0}
.hero .lede{max-width:52ch}
.hero-actions{justify-content:flex-start}
@media (max-width:1023px){.hero-in{align-items:flex-start;text-align:left}}
/* 6. a printed rule under the eyebrow of every card grid, Zowie has none of this */
.bento-grid,.stats,.badges,.demo-grid{gap:0;border-top:1px solid rgba(17,17,17,.14);border-left:1px solid rgba(17,17,17,.14)}
.stat,.bento,.demo,.badges li{border-top:0;border-left:0;border-right:1px solid rgba(17,17,17,.14);
  border-bottom:1px solid rgba(17,17,17,.14);margin:0}
/* 7. chips read like an index, not tags */
.chips{gap:0}
.chips li{border:0;border-bottom:1px solid rgba(17,17,17,.12);background:transparent;padding:10px 18px 10px 0;margin-right:22px}
.chips li:hover{background:transparent;color:#111;border-bottom-color:#111}
/* 8. dark bands become full-bleed slabs with square edges */
.flow-sec,.cta{margin-inline:0;border-radius:0 !important}
.flow li{background:transparent;border:0;border-left:1px solid rgba(255,255,255,.16);padding:26px 22px}
.flow li:hover{background:rgba(255,255,255,.05)}
/* 9. menu panel: a flat sheet aligned to the header, no floating card */
.menu{top:var(--nav-height)}
.menu-in{max-width:none;margin:0;padding:26px var(--space-container) 34px;border:0;
  border-bottom:1px solid rgba(17,17,17,.14);background:#fbfaf9;gap:0}
.mcard{border:0;border-left:1px solid rgba(17,17,17,.12);padding:16px 22px}
.mcard:hover{background:transparent;text-decoration:underline;text-underline-offset:5px}
/* 10. footer + header hairlines match the grid weight */
.hdr.scrolled{border-bottom:1px solid rgba(17,17,17,.14) !important}
.hdr.scrolled::after{background:rgba(17,17,17,.14)}
.ftr{border-top:1px solid rgba(17,17,17,.14)}


/* ================= v16: square conversation cards ================= */
.earth-card-bubble,.earth-card-pos,.earth-card-bubble *{border-radius:0 !important}
.earth-card-bubble{border:1px solid rgba(17,17,17,.18) !important;background:#fff !important;
  padding:9px 12px !important;box-shadow:none !important;font-size:13px}
.earth-anchor__dot{border-radius:0 !important;background:#111}
.earth-anchor__pulse{border-radius:0 !important;border-color:rgba(17,17,17,.35)}


/* ================= v17: Sefid Atlas hero ================= */
/* the atlas lives in the upper half; the headline keeps the baseline to itself */
.hero-globe{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.5) 76%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.5) 76%,transparent 96%)}
.hero-globe::after{display:none}
.hero-fade{height:34%}
.hero-in{padding-top:calc(var(--nav-height) + 34vh)}
@media (max-width:1023px){.hero-in{padding-top:calc(var(--nav-height) + 26vh)}}


/* ================= v18: flat static map ================= */
.hero-globe{-webkit-mask-image:none;mask-image:none}
.hero-fade{height:26%}
.hero-in{padding-top:calc(var(--nav-height) + 40vh)}
@media (max-width:1023px){.hero-in{padding-top:calc(var(--nav-height) + 30vh)}}


/* ================= v20: map fade + calm messaging ================= */
.hero-globe{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 20%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.24) 56%,rgba(0,0,0,.06) 68%,transparent 78%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 20%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.24) 56%,rgba(0,0,0,.06) 68%,transparent 78%)}


/* ================= v21: sphere pitch, softer map ================= */
.hero-globe{top:calc(var(--nav-height) + 2px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.3) 68%,rgba(0,0,0,.08) 78%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.3) 68%,rgba(0,0,0,.08) 78%,transparent 88%)}


/* ================= v23: header fix + corner agent ================= */
/* 1. the scrolled hairline is a whisper now */
.hdr.scrolled{border-bottom:1px solid rgba(17,17,17,.045) !important}
.hdr.scrolled::after{background:rgba(17,17,17,.045)}
/* 2. body must not be a clip container, or position:sticky detaches mid page */
html{overflow-x:clip}
body{overflow-x:visible;overflow-y:visible}
html,body{height:auto !important;min-height:100% !important;max-height:none !important}
.hdr{position:sticky;top:0;z-index:60}
/* 3. corner agent */
.sf-chat{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:inherit}
.sf-launch{order:2;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;cursor:pointer;
  background:#111;color:#fbfaf9;border:1px solid #111;font-size:14px;font-weight:500;letter-spacing:-.005em;
  transition:background .18s ease,color .18s ease}
.sf-launch:hover{background:#fbfaf9;color:#111}
.sf-launch-mark{width:9px;height:9px;background:currentColor;display:inline-block}
.sf-chat.sf-nudge .sf-launch-mark{animation:sfBlink 2.4s ease-in-out infinite}
@keyframes sfBlink{0%,100%{opacity:1}50%{opacity:.25}}
.sf-panel{order:1;width:360px;max-width:calc(100vw - 32px);background:#fff;border:1px solid rgba(17,17,17,.14);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .18s ease,transform .22s ease,visibility .18s}
.sf-chat.is-open .sf-panel{opacity:1;visibility:visible;transform:none}
.sf-panel-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid rgba(17,17,17,.14)}
.sf-id{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500}
.sf-live{width:7px;height:7px;background:#111;display:inline-block}
.sf-x{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:rgba(17,17,17,.5);padding:0 2px}
.sf-x:hover{color:#111}
.sf-log{padding:16px;display:flex;flex-direction:column;gap:10px;height:320px;overflow-y:auto}
.sf-row{display:flex}
.sf-row--user{justify-content:flex-end}
.sf-bub{max-width:82%;padding:10px 12px;font-size:13px;line-height:1.5;border:1px solid rgba(17,17,17,.14);
  background:#fbfaf9;color:#111}
.sf-row--user .sf-bub{background:#111;color:#fbfaf9;border-color:#111}
.sf-typing .sf-bub{display:inline-flex;gap:4px;align-items:center;padding:12px}
.sf-typing i{width:5px;height:5px;background:rgba(17,17,17,.45);display:inline-block;animation:sfDot 1s infinite}
.sf-typing i:nth-child(2){animation-delay:.15s}
.sf-typing i:nth-child(3){animation-delay:.3s}
@keyframes sfDot{0%,100%{opacity:.25}50%{opacity:1}}
.sf-field{display:flex;border-top:1px solid rgba(17,17,17,.14)}
.sf-input{flex:1;min-width:0;border:0;padding:13px 14px;font:inherit;font-size:13px;background:transparent;outline:none}
.sf-send{border:0;border-left:1px solid rgba(17,17,17,.14);background:transparent;padding:0 18px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:#111}
.sf-send:hover{background:#111;color:#fbfaf9}
.sf-foot{padding:9px 16px;border-top:1px solid rgba(17,17,17,.14);font-size:11px;letter-spacing:.04em;
  color:rgba(17,17,17,.45)}
@media (max-width:1023px){.sf-chat{right:12px;bottom:12px}.sf-log{height:260px}}
@media (prefers-reduced-motion:reduce){.sf-chat.sf-nudge .sf-launch-mark,.sf-typing i{animation:none}}


/* ================= v24: teaser, lead capture, pricing ================= */
.sf-teaser{order:0;position:relative;width:294px;max-width:calc(100vw - 32px);background:#111;color:#fbfaf9;
  border:1px solid #111;padding:14px 34px 14px 16px;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .2s ease,transform .24s ease,visibility .2s}
.sf-chat.sf-teased .sf-teaser{opacity:1;visibility:visible;transform:none}
.sf-chat.is-open .sf-teaser{opacity:0;visibility:hidden}
.sf-teaser-t{margin:0 0 4px;font-size:13px;font-weight:500;letter-spacing:-.005em}
.sf-teaser-d{margin:0;font-size:12px;line-height:1.5;color:rgba(251,250,249,.62)}
.sf-teaser-x{position:absolute;top:6px;right:8px;border:0;background:transparent;color:rgba(251,250,249,.55);
  font-size:16px;line-height:1;cursor:pointer;padding:2px}
.sf-teaser-x:hover{color:#fbfaf9}
.sf-foot strong{font-weight:500;color:#111}
/* lead capture */
.leads-in{display:grid;grid-template-columns:7fr 5fr;border:1px solid rgba(17,17,17,.14);border-bottom:0}
.lead-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.lead-steps li{padding:28px;border-right:1px solid rgba(17,17,17,.14);border-bottom:1px solid rgba(17,17,17,.14)}
.lead-n{display:block;font-size:12px;letter-spacing:.08em;color:rgba(17,17,17,.4);margin-bottom:14px}
.lead-steps h3{margin:0 0 8px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.lead-steps p{margin:0;font-size:14px;line-height:1.6;color:rgba(17,17,17,.62)}
.lead-card{padding:28px;border-bottom:1px solid rgba(17,17,17,.14);background:#111;color:#fbfaf9}
.lead-card-t{margin:0 0 18px;font-size:12px;letter-spacing:.08em;color:rgba(251,250,249,.55)}
.lead-card dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.lead-card dt{padding:9px 18px 9px 0;font-size:12px;letter-spacing:.04em;color:rgba(251,250,249,.5);
  border-top:1px solid rgba(251,250,249,.14)}
.lead-card dd{margin:0;padding:9px 0;font-size:13px;border-top:1px solid rgba(251,250,249,.14);text-align:right}
.lead-card-f{margin:18px 0 0;font-size:12px;color:rgba(251,250,249,.5)}
@media (max-width:1023px){.leads-in{grid-template-columns:1fr}.lead-steps{grid-template-columns:1fr}}
/* pricing page */
.page-head{padding:88px 0 52px;border-bottom:1px solid rgba(17,17,17,.14)}
.page-head h1{margin:12px 0 16px;font-size:56px;line-height:1.02;letter-spacing:-.02em;font-weight:500}
.page-head .sub{max-width:620px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(17,17,17,.14);border-bottom:0}
.plan{padding:32px;border-right:1px solid rgba(17,17,17,.14);border-bottom:1px solid rgba(17,17,17,.14);
  display:flex;flex-direction:column}
.plan:last-child{border-right:0}
.plan--mid{background:#111;color:#fbfaf9}
.plan-name{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.plan-for{margin:0 0 26px;font-size:13px;color:rgba(17,17,17,.55)}
.plan--mid .plan-for,.plan--mid .plan-note{color:rgba(251,250,249,.55)}
.plan-price{margin:0;font-size:44px;letter-spacing:-.02em;font-weight:500;line-height:1}
.plan-price span{font-size:14px;letter-spacing:0;color:rgba(17,17,17,.5)}
.plan--mid .plan-price span{color:rgba(251,250,249,.55)}
.plan-note{margin:8px 0 26px;font-size:12px;color:rgba(17,17,17,.5)}
.plan ul{list-style:none;margin:0 0 28px;padding:0;flex:1}
.plan li{padding:9px 0;font-size:14px;border-top:1px solid rgba(17,17,17,.12);display:flex;gap:10px}
.plan--mid li{border-top-color:rgba(251,250,249,.16)}
.plan li::before{content:"";width:7px;height:7px;background:currentColor;margin-top:7px;flex:0 0 7px}
.plan .btn{width:100%;justify-content:center}
.plan--mid .btn{background:#fbfaf9;color:#111;border-color:#fbfaf9}
.ptable{width:100%;border-collapse:collapse;border:1px solid rgba(17,17,17,.14);font-size:14px}
.ptable th,.ptable td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(17,17,17,.12);
  border-right:1px solid rgba(17,17,17,.12)}
.ptable th{font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ptable td:not(:first-child),.ptable th:not(:first-child){text-align:center}
.faq{border-top:1px solid rgba(17,17,17,.14)}
.faq div{padding:24px 0;border-bottom:1px solid rgba(17,17,17,.14);display:grid;
  grid-template-columns:5fr 7fr;gap:32px}
.faq h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em}
.faq p{margin:0;font-size:14px;line-height:1.65;color:rgba(17,17,17,.62)}
@media (max-width:1023px){.price-grid{grid-template-columns:1fr}.plan{border-right:0}
  .page-head h1{font-size:38px}.faq div{grid-template-columns:1fr;gap:10px}}


/* ================= v25: real pricing data ================= */
.price-grid{grid-template-columns:repeat(4,1fr)}
.plan{padding:28px 24px}
.plan-price{font-size:38px}
.plan-was{margin:8px 0 0;font-size:12px;color:rgba(17,17,17,.45);text-decoration:line-through;
  text-decoration-color:rgba(17,17,17,.3);min-height:16px}
.plan--mid .plan-was{color:rgba(251,250,249,.5);text-decoration-color:rgba(251,250,249,.35)}
.plan-note{margin:14px 0 22px}
.plan-badge{margin:0 0 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(251,250,249,.4);padding:4px 8px;display:inline-block;align-self:flex-start}
.cycle{display:inline-flex;border:1px solid rgba(17,17,17,.14);margin-top:8px}
.cyc{border:0;background:transparent;font:inherit;font-size:13px;padding:10px 18px;cursor:pointer;
  color:rgba(17,17,17,.6)}
.cyc + .cyc{border-left:1px solid rgba(17,17,17,.14)}
.cyc.on{background:#111;color:#fbfaf9}
.price-fine{margin:22px 0 0;font-size:12px;line-height:1.7;color:rgba(17,17,17,.5);max-width:760px}
@media (max-width:1279px){.price-grid{grid-template-columns:repeat(2,1fr)}
  .plan:nth-child(2n){border-right:0}}
@media (max-width:1023px){.price-grid{grid-template-columns:1fr}.plan{border-right:0}}


/* ================= v26: teaser anchoring + full widget ================= */
/* the panel is taken out of flow, so the teaser really sits on the launcher */
.sf-panel{position:absolute;right:0;bottom:60px;order:0;margin:0}
.sf-chat{gap:10px}
/* compact single line teaser */
.sf-teaser{order:1;width:auto;max-width:calc(100vw - 32px);display:inline-flex;align-items:center;gap:10px;
  padding:9px 10px 9px 14px;position:relative}
.sf-teaser-t{margin:0;font-size:12.5px;font-weight:500;white-space:nowrap}
.sf-teaser-x{position:static;font-size:14px;padding:0 2px;line-height:1}
.sf-launch{order:2}
/* panel chrome */
.sf-top-r{display:flex;align-items:center;gap:10px}
.sf-lang{font-size:11px;letter-spacing:.06em;border:1px solid rgba(17,17,17,.16);padding:2px 6px;
  color:rgba(17,17,17,.55)}
.sf-log{height:360px}
.sf-div{font-size:11px;letter-spacing:.05em;color:rgba(17,17,17,.4);text-align:center;padding:2px 0 4px}
/* quick replies */
.sf-qr{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}
.sf-chip{border:1px solid rgba(17,17,17,.2);background:#fff;font:inherit;font-size:12px;padding:6px 10px;
  cursor:pointer;color:#111}
.sf-chip:hover{background:#111;color:#fbfaf9;border-color:#111}
/* order tracking card */
.sf-card{border:1px solid rgba(17,17,17,.14);padding:14px}
.sf-card-t{font-size:12px;letter-spacing:.05em;color:rgba(17,17,17,.5);margin-bottom:12px}
.sf-steps{list-style:none;margin:0;padding:0;font-size:12.5px}
.sf-steps li{padding:6px 0 6px 18px;position:relative;color:rgba(17,17,17,.45)}
.sf-steps li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;
  border:1px solid rgba(17,17,17,.3)}
.sf-steps li.done{color:rgba(17,17,17,.6)}
.sf-steps li.done::before{background:rgba(17,17,17,.35);border-color:rgba(17,17,17,.35)}
.sf-steps li.now{color:#111;font-weight:500}
.sf-steps li.now::before{background:#111;border-color:#111}
.sf-card-f{margin-top:12px;padding-top:10px;border-top:1px solid rgba(17,17,17,.12);font-size:12px;
  color:rgba(17,17,17,.55)}
/* product cards */
.sf-prods{display:flex;flex-direction:column;gap:8px}
.sf-prod{display:flex;gap:12px;border:1px solid rgba(17,17,17,.14);padding:10px}
.sf-prod-x{width:46px;height:46px;flex:0 0 46px;background:repeating-linear-gradient(135deg,
  rgba(17,17,17,.07) 0 4px,transparent 4px 8px);border:1px solid rgba(17,17,17,.1)}
.sf-prod-b{flex:1;min-width:0}
.sf-prod-t{margin:0;font-size:13px;font-weight:500}
.sf-prod-m{margin:2px 0 0;font-size:11.5px;color:rgba(17,17,17,.5)}
.sf-prod-p{margin:6px 0 8px;font-size:13px}
.sf-buy{border:1px solid #111;background:#111;color:#fbfaf9;font:inherit;font-size:12px;padding:5px 12px;
  cursor:pointer}
.sf-buy:disabled{background:#fff;color:rgba(17,17,17,.45);border-color:rgba(17,17,17,.2);cursor:default}
.sf-link{display:block;text-align:center;border:1px solid #111;background:#111;color:#fbfaf9;
  font-size:12.5px;padding:10px;text-decoration:none}
.sf-link:hover{background:#fbfaf9;color:#111}
/* lead capture form */
.sf-form{border:1px solid rgba(17,17,17,.14);padding:14px;display:flex;flex-direction:column;gap:8px}
.sf-form-t{margin:0 0 2px;font-size:12px;letter-spacing:.05em;color:rgba(17,17,17,.5)}
.sf-in{border:1px solid rgba(17,17,17,.16);padding:9px 10px;font:inherit;font-size:12.5px;outline:none;
  background:#fff;resize:none;width:100%;box-sizing:border-box}
.sf-in:focus{border-color:#111}
.sf-gdpr{margin:0;font-size:10.5px;line-height:1.5;color:rgba(17,17,17,.45)}
.sf-err{margin:0;font-size:11px;color:#b00020}
.sf-btn{border:1px solid #111;background:#111;color:#fbfaf9;font:inherit;font-size:12.5px;padding:9px;
  cursor:pointer}
.sf-btn:hover{background:#fbfaf9;color:#111}
/* attachment button */
.sf-clip{border:0;border-right:1px solid rgba(17,17,17,.14);background:transparent;font:inherit;
  font-size:16px;line-height:1;padding:0 14px;cursor:pointer;color:rgba(17,17,17,.5)}
.sf-clip:hover{color:#111}
@media (max-width:1023px){.sf-log{height:300px}.sf-teaser-t{white-space:normal}}


/* ================= v27: hero always fits the screen ================= */
/* one screen tall, and never taller than the screen */
.hero{min-height:100svh;height:100svh;max-height:100svh;align-items:flex-end;overflow:hidden}
/* the copy is bottom anchored, so the top padding only needs to clear the header */
.hero-in{padding-top:calc(var(--nav-height) + 16px);
  padding-bottom:clamp(26px,5.6vh,64px);gap:clamp(10px,2vh,24px)}
/* type scales with the shorter of width and height, so 720p and 4K both fit */
.hero-in h1,.hero h1{font-size:clamp(34px,min(5vw,8.6vh),74px);line-height:1.04}
.hero .lede{font-size:clamp(14px,min(1.25vw,2.1vh),18px);line-height:1.55}
.hero .hero-actions{margin-top:0;gap:clamp(8px,1.2vh,12px)}
.hero .hero-actions .btn{height:clamp(40px,5.4vh,52px);padding-inline:clamp(16px,2vw,26px);
  font-size:clamp(13px,1.7vh,15px)}
/* the map is painted into the hero box, so it rescales with it automatically */
.hero-globe{inset:0}
.hero-globe canvas{width:100% !important;height:100% !important;display:block}
/* very short landscape windows: let the copy breathe instead of clipping */
@media (max-height:560px){.hero{height:auto;max-height:none;min-height:100svh}
  .hero-in{padding-bottom:22px}}
/* phones and tablets keep the same rule, just a taller copy block */
@media (max-width:1023px){.hero{min-height:100svh;height:100svh;max-height:100svh}
  .hero-in{padding-top:calc(var(--nav-height) + 12px);padding-bottom:clamp(24px,5vh,48px)}}

/* v27b: keep the hero CTAs clear of the chat launcher on phones */
@media (max-width:1023px){.hero-in{padding-bottom:clamp(84px,13vh,120px)}}
@media (max-width:640px){.sf-teaser{max-width:calc(100vw - 96px)}}

/* v27c: the map starts below the header, never underneath it */
.hero-globe{top:calc(var(--nav-height) + 14px);right:0;bottom:0;left:0;
  transform:none;transform-origin:center top}
.hero-globe canvas{width:100% !important;height:100% !important;display:block}
@media (max-width:1023px){.hero-globe{top:calc(var(--nav-height) + 10px)}}


/* ================= v28: mobile header and hero ================= */
.burger{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;color:#111;cursor:pointer;position:relative;flex:0 0 auto}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;display:block;transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:25px}
body.nav-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.drawer{display:none;position:fixed;left:0;right:0;top:var(--nav-height);bottom:0;z-index:80;background:#fbfaf9;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.drawer.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.drawer-in{padding:8px 20px calc(28px + env(safe-area-inset-bottom))}
.drow{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:14px 0;border:0;border-bottom:1px solid rgba(17,17,17,.08);background:transparent;color:#111;font-family:inherit;font-size:19px;font-weight:500;letter-spacing:-.01em;text-align:start;text-decoration:none;cursor:pointer}
.dchev{width:10px;height:10px;border-right:1.5px solid rgba(17,17,17,.45);border-bottom:1.5px solid rgba(17,17,17,.45);transform:rotate(45deg);transition:transform .24s ease;margin-inline-end:4px}
.dgrp.open .dchev{transform:rotate(-135deg)}
.dsub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s cubic-bezier(.4,0,.2,1)}
.dgrp.open .dsub{grid-template-rows:1fr}
.dsub-in{overflow:hidden}
.dlink{display:block;padding:13px 0 13px 2px;text-decoration:none;color:#111;border-bottom:1px solid rgba(17,17,17,.05)}
.dlink:last-child{border-bottom:0}
.dlink-t{display:block;font-size:16px;font-weight:500}
.dlink-d{display:block;font-size:13.5px;line-height:1.4;color:#7c7c7c;margin-top:2px}
.dcta{display:grid;gap:10px;margin-top:22px}
.dcta .btn{height:52px;width:100%;justify-content:center;font-size:16px}
.dnote{margin-top:18px;font-size:13px;line-height:1.5;color:#7c7c7c}
body.nav-open{overflow:hidden}
body.nav-open .sf-chat{visibility:hidden}
@media (max-width:1023px){
.burger{display:block}
.drawer{display:block}
.hdr-in{gap:12px}
.hdr-cta{display:flex;gap:10px;align-items:center}
.hdr .btn.solid{height:38px;padding:0 16px;font-size:14.5px}
}
@media (max-width:640px){
:root{--nav-height:60px}
.hdr .btn.solid{height:36px;padding:0 14px;font-size:14px}
.mark{font-size:22px}
.hero-in{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.hero-in h1{font-size:clamp(30px,9vw,42px);line-height:1.06}
.hero-in .lede{font-size:15px;max-width:34ch}
.hero-cta{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
.hero-cta .btn{width:100%;height:52px;justify-content:center;font-size:16px}
.hero-fade{height:44%}
.sf-chat{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (max-width:900px) and (max-height:520px){
.hero-in{padding-top:calc(var(--nav-height) + 12px)}
.hero-in h1{font-size:clamp(24px,5.2vh,32px)}
.hero-in .lede{display:none}
.hero-cta{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
.drawer,.dsub,.dchev,.burger i{transition:none}
}


/* v28b: phones - zoom the map so it fills the head of the hero */
@media (max-width:640px){
.hero-globe{transform:scale(1.55);transform-origin:56% 46%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 21%,#000 42%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.12) 70%,transparent 80%);mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 21%,#000 42%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.12) 70%,transparent 80%)}
}
@media (min-width:641px) and (max-width:1023px){
.hero-globe{transform:scale(1.18);transform-origin:center 46%}
}


/* v28c: phone hero CTAs are full width and thumb sized */
@media (max-width:640px){
.hero-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:340px}
.hero-actions .btn{width:100%;height:52px;justify-content:center;font-size:16px;padding:0 18px}
}
@media (max-width:900px) and (max-height:520px){
.hero-actions{display:flex;gap:10px;max-width:none}
.hero-actions .btn{height:44px;width:auto}
}


/* v28d: phone hero CTA sizing wins over the v27 hero-fit clamp */
@media (max-width:640px){
.hero .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:340px}
.hero .hero-actions .btn{width:100%;height:52px;padding-inline:18px;font-size:16px;justify-content:center}
}
@media (max-width:900px) and (max-height:520px){
.hero .hero-actions{display:flex;gap:10px;max-width:none}
.hero .hero-actions .btn{height:44px;width:auto;font-size:14.5px}
}


/* v28e: phone hero - map higher, CTAs clear of the chat launcher */
@media (max-width:640px){
.hero-globe{transform:scale(1.5);transform-origin:56% 30%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 4%,#000 11%,#000 44%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.12) 72%,transparent 82%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 4%,#000 11%,#000 44%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.12) 72%,transparent 82%)}
.hero .hero-in{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.hero-fade{height:40%}
}


/* v28f: phones - the map fills the band right under the header */
@media (max-width:640px){
.hero-globe{top:calc(var(--nav-height) + 4px);transform:scale(1.78);transform-origin:56% 21%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 3%,#000 9%,#000 46%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.12) 74%,transparent 84%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 3%,#000 9%,#000 46%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.12) 74%,transparent 84%)}
}


/* v28g: phones - final map framing under the header */
@media (max-width:640px){
.hero-globe{top:calc(var(--nav-height) + 2px);transform:translateY(-46px) scale(1.5);transform-origin:56% 30%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 3%,#000 10%,#000 46%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.12) 74%,transparent 84%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 3%,#000 10%,#000 46%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.12) 74%,transparent 84%)}
}


/* v28h: nothing floats over the mobile drawer */
body.nav-open .sf-teaser,body.nav-open .sf-launch,body.nav-open .sf-panel{visibility:hidden;pointer-events:none}


/* ================= v29: phone-native live thread ================= */
.mthread{display:none}
@media (max-width:767px){
body.mob-thread .earth-overlay__cards,body.mob-thread .earth-overlay__dots{display:none !important}
.hero-globe{transform:translateY(-34px) scale(1.22);transform-origin:56% 34%;opacity:.9}
.hero .hero-in{padding-top:calc(var(--nav-height) + 26px);padding-bottom:calc(118px + env(safe-area-inset-bottom))}
.mthread{display:block;width:100%;max-width:340px;margin:0 0 22px;background:#fff;border:1px solid rgba(17,17,17,.14);box-shadow:0 18px 40px -28px rgba(17,17,17,.5);overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease}
.mthread.on{opacity:1;transform:none}
.mth-top{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(17,17,17,.09);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#7c7c7c}
.mth-live{width:6px;height:6px;background:#111;flex:0 0 auto;animation:mthPulse 1.8s ease-in-out infinite}
.mth-lang{color:#111;letter-spacing:.04em}
.mth-step{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.mth-body{padding:12px;min-height:104px}
.mth-row{opacity:0;transform:translateY(4px);transition:opacity .26s ease,transform .26s ease}
.mth-row.on{opacity:1;transform:none}
.mth-msg{margin:0;display:inline-block;max-width:100%;padding:8px 10px;background:#f4f3f1;border:1px solid rgba(17,17,17,.08);font-size:14.5px;line-height:1.35;color:#111;overflow-wrap:anywhere}
.mth-caret{display:inline-block;width:1px;height:1em;margin-inline-start:2px;background:#111;vertical-align:-2px;animation:mthBlink 1s steps(1) infinite}
.mth-work{margin:8px 0 0;font-size:13px;color:#7c7c7c;background:linear-gradient(90deg,#c9c9c5 0%,#111 42%,#c9c9c5 84%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mthShimmer 1.5s linear infinite}
.mth-ok{margin:8px 0 0;display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:1.35;color:#111;font-weight:500}
.mth-ok i{font-style:normal}
.mth-bar{height:2px;background:rgba(17,17,17,.08)}
.mth-bar i{display:block;height:2px;width:0;background:#111;transition:width .3s linear}
@keyframes mthPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes mthBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mthShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
.mth-live,.mth-caret,.mth-work{animation:none}
.mth-work{-webkit-text-fill-color:#7c7c7c}
}
@media (max-width:900px) and (max-height:520px){
.mthread{display:none !important}
}


/* v29b: slimmer thread card, calmer map band */
@media (max-width:767px){
.hero-globe{transform:translateY(-30px) scale(1.34);transform-origin:56% 32%;opacity:.95}
.hero .hero-in{padding-bottom:calc(148px + env(safe-area-inset-bottom))}
.mthread{max-width:326px;margin-bottom:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mth-top{padding:8px 11px;font-size:11px}
.mth-body{padding:10px 11px 12px;min-height:86px}
.mth-msg{font-size:14px;padding:7px 9px}
.mth-work{margin-top:7px;font-size:12.5px}
.mth-ok{margin-top:7px;font-size:13.5px}
}


/* ============================================================ round 144 ===
   Two asks, both about weight rather than colour.

   The headline lost its long second line, so the old display size now reads as
   shouting: the type scale drops about a quarter at every breakpoint and the
   two lines still sit above the fold beside the map.

   The sticky header used to grow a shadow once the page scrolled. A shadow
   under a translucent bar reads as a seam, so it is gone: on scroll the header
   keeps a single hairline, five hundredths of black, and nothing else. */
.hero-in h1,.hero h1{font-size:clamp(28px,min(3.7vw,6.4vh),54px);line-height:1.08;letter-spacing:-.03em}
@media (max-width:1023px){.hero-in h1,.hero h1{font-size:clamp(26px,6.6vw,36px);line-height:1.1}}
@media (max-width:520px){.hero-in h1,.hero h1{font-size:clamp(22px,4.6vh,29px)}}
.hdr,.hdr.scrolled,.hdr.menu-open{box-shadow:none !important}
.hdr.scrolled{border-bottom:1px solid rgba(17,17,17,.05) !important}
.hdr.scrolled::after{background:rgba(17,17,17,.05)}

/* ============================================================ round 147 === */
/* Pricing: the plan cards share one set of rows, so name, price, note, the
   feature list and the button sit on the same line across all four cards. */
@supports (grid-template-rows: subgrid){
  .price-grid{grid-template-rows:auto auto auto auto auto auto 1fr auto}
  .plan{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0}
  .plan ul{margin-bottom:0;align-self:start}
  .plan .btn{align-self:end;margin-top:28px}
}
@media (max-width:1023px){
  @supports (grid-template-rows: subgrid){
    .price-grid{grid-template-rows:none}
    .plan{grid-row:auto;grid-template-rows:auto auto auto auto auto auto 1fr auto}
  }
}
/* The trust seal of the iranian footer, back where it was before the
   redesign: real markup in the page source, on a white plate so the mark
   stays readable on the warm footer. */
.ftr-seal{margin-top:20px}
.ftr-seal img{display:block;width:88px;height:auto;background:#fff;padding:6px;border-radius:12px}

/* ================= round 151-154: seamless header + hero layout + biz bar ================= */
/* The header melts into the hero: fully transparent at the top of the
   page, frosted only after scrolling, so no seam is visible. */
.hdr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.scrolled,.hdr.menu-open{background:rgba(251,250,249,.78);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}
/* Round 154: the globe still starts under the header, but the copy
   block (h1 + lede + actions) went back to its old home UNDER the
   map, with room left for the biz bar at the very bottom. */
.hero{min-height:108vh;align-items:flex-end}
.hero-in{padding-top:calc(var(--nav-height) + 24px);padding-bottom:132px}
.hero-globe{transform:translate(0.05%,6%)}
.hero-globe::after{top:38%}
@media (max-width:1023px){
  .hero{min-height:100vh}
  .hero-in{padding-top:calc(var(--nav-height) + 20px);padding-bottom:112px}
  .hero-globe{transform:translateY(4%)}
  .hero-globe::after{top:34%}
}
/* Round 153: bottom bar - a soft marquee of the business types Sefid
   works for. Duplicated chip list + translateX(50%) = seamless loop. */
.hero-biz{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:14px 0 18px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.hero-biz__label{text-align:center;font-size:12.5px;letter-spacing:.12em;color:#8a877f;margin:0 0 10px}
.hero-biz__track{display:flex;gap:10px;width:max-content;animation:bizScroll 38s linear infinite}
.hero-biz:hover .hero-biz__track{animation-play-state:paused}
.hero-biz__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(28,25,23,.10);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:14px;color:#43413e;box-shadow:0 1px 2px rgba(28,25,23,.04)}
.hero-biz__item .dot{width:6px;height:6px;border-radius:999px;background:#ff5c1f;display:inline-block;flex:none}
@keyframes bizScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .hero-biz__track{animation-name:bizScrollRtl}
@keyframes bizScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (max-width:1023px){.hero-biz{padding:10px 0 14px}.hero-biz__item{font-size:13px;padding:7px 13px}}
@media (prefers-reduced-motion:reduce){.hero-biz__track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}}

/* ============================================================ round 155 ===
   Soroush: the map in the hero must climb higher, right up to the header
   edge. Two things were holding it down:
     1. v27c parked the globe box 14px below the header (10px on tablets)
     2. round 154 nudged the whole box a further 6% down (4% on tablets)
   Both are removed here, so the globe box now starts exactly at the
   header's bottom edge with no gap and no downward nudge. Everything else
   in the hero stays put: the copy block still sits under the map and the
   business bar stays pinned to the bottom. */
.hero-globe{top:var(--nav-height);transform:translate(0.05%,0)}
@media (max-width:1023px){
  .hero-globe{top:var(--nav-height);transform:translateY(0)}
}

/* ============================================================ round 156 ===
   Soroush: the business bar ("for every business that has customers") must
   be the LAST band of the hero, not a strip floating under it.
   The markup was already correct - the bar lives inside <section class="hero">
   and is pinned with position:absolute;bottom:0. The real cause was the box
   height: round 154 set min-height:108vh on the hero, and in CSS min-height
   always beats max-height, so the hero grew taller than the screen and its
   own bottom edge (with the bar on it) fell below the fold.
   Bringing the hero back to exactly one screen puts the bar back on the
   bottom edge of what the visitor actually sees. svh is used on purpose so
   mobile browser toolbars cannot push it off screen again. */
.hero{min-height:100svh}
@media (max-width:1023px){
  .hero{min-height:100svh}
}

/* ---------------------------------------------------------------------------
   round 157 - inner pages, chapter one: the about page.
   The about page is the only page that has to carry a long story and a
   timeline, so it gets its own three pieces: a figure column beside the
   prose, and a dated timeline. Everything else on the page reuses the
   home page primitives (sec, page-head, bento, badges, quote-sec, cta).
   --------------------------------------------------------------------------- */
.ab-story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.ab-fig{border-top:2px solid var(--color-brand-orange-1);padding-top:20px;position:sticky;top:calc(var(--nav-height) + 32px)}
.ab-fig .n{margin:0;font-size:76px;line-height:.94;letter-spacing:-.045em;font-weight:500;color:#111}
.ab-fig .d{margin:14px 0 0;max-width:24ch;font-size:15px;line-height:1.75;color:#6b6b66}
.ab-prose{display:flex;flex-direction:column;gap:26px}
.ab-prose p{margin:0;font-size:19px;line-height:1.9;color:#3a3a36}
.ab-prose p.first{font-size:23px;line-height:1.68;letter-spacing:-.012em;color:#111}
.ab-road{border-top:1px solid rgba(17,17,17,.12)}
.ab-step{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;padding:30px 0;
  border-bottom:1px solid rgba(17,17,17,.12)}
.ab-step .when{margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--default-mono-font-family);font-size:11.5px;letter-spacing:.1em;color:#8a877f}
.ab-step .when::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:999px;
  border:1.5px solid rgba(17,17,17,.26)}
.ab-step.done .when{color:#111}
.ab-step.done .when::before{background:var(--color-brand-orange-1);border-color:var(--color-brand-orange-1)}
.ab-step h3{margin:0;font-size:21px;line-height:1.35;font-weight:500;letter-spacing:-.015em}
.ab-step p{margin:9px 0 0;max-width:64ch;font-size:16px;line-height:1.8;color:#6b6b66}
.ab-mis blockquote{max-width:52ch}
@media (max-width:1023px){
.ab-story{grid-template-columns:1fr;gap:30px}
.ab-fig{position:static}
.ab-fig .n{font-size:56px}
.ab-prose p{font-size:17px;line-height:1.85}
.ab-prose p.first{font-size:19px}
.ab-step{grid-template-columns:1fr;gap:10px;padding:24px 0}
}

/* ================= round 158: solutions hub + sales page ================= */
/* Bespoke to these two routes only. Logical properties throughout so the
   persian right-to-left edition and the english edition share one block. */

/* --- the hub: five solutions as a numbered editorial index --- */
.sl-index{border-top:1px solid rgba(17,17,17,.14)}
.sl-row{display:grid;grid-template-columns:88px minmax(0,1fr) 40px;gap:28px;align-items:start;
padding:34px 0;border-bottom:1px solid rgba(17,17,17,.14);color:inherit;text-decoration:none;
transition:background .28s ease,padding-inline .28s ease}
.sl-row:hover{background:rgba(17,17,17,.025)}
.sl-row .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.08em;
color:rgba(17,17,17,.42);padding-top:8px}
.sl-row:hover .n{color:var(--color-brand-orange-1)}
.sl-main{display:block;min-width:0}
.sl-main .lead{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
color:rgba(17,17,17,.45);margin-bottom:10px}
.sl-row h3{margin:0;font-size:26px;line-height:1.25;font-weight:500;letter-spacing:-.02em;
display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sl-row h3 .tag{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
padding:3px 8px;border:1px solid rgba(17,17,17,.22);color:rgba(17,17,17,.55)}
.sl-row p{margin:10px 0 0;max-width:62ch;font-size:15px;line-height:1.7;color:rgba(17,17,17,.62)}
.sl-row .go{position:relative;inline-size:40px;block-size:40px;border:1px solid rgba(17,17,17,.16);
margin-top:6px;transition:border-color .28s ease,background .28s ease}
.sl-row .go::before,.sl-row .go::after{content:"";position:absolute;background:rgba(17,17,17,.5);
transition:background .28s ease}
.sl-row .go::before{inset-inline-start:12px;inset-block-start:19px;inline-size:16px;block-size:1px}
.sl-row .go::after{inset-inline-end:12px;inset-block-start:14px;inline-size:1px;block-size:11px;
transform:rotate(-45deg);transform-origin:top}
.sl-row:hover .go{border-color:var(--color-brand-orange-1);background:var(--color-brand-orange-1)}
.sl-row:hover .go::before,.sl-row:hover .go::after{background:#fff}

/* --- a two column split used twice on the sales page --- */
.sl-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.sl-aside .eyebrow{margin-bottom:14px}
.sl-aside h2{margin:0;font-size:34px;line-height:1.2;font-weight:500;letter-spacing:-.025em}
.sl-aside-p{margin:18px 0 0;font-size:15.5px;line-height:1.75;color:rgba(17,17,17,.62)}

/* --- the conversation with a real order card --- */
.sl-conv{border:1px solid rgba(17,17,17,.14);background:#fff;padding:0 0 20px}
.sl-conv-head{display:flex;align-items:center;gap:10px;padding:14px 18px;
border-bottom:1px solid rgba(17,17,17,.1)}
.sl-conv-head .who{font-size:13.5px;font-weight:500}
.sl-conv-head .live{margin-inline-start:auto;font-size:11.5px;letter-spacing:.06em;
text-transform:uppercase;color:rgba(17,17,17,.45);display:inline-flex;align-items:center;gap:6px}
.sl-conv-head .live::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;
background:#2f9e63}
.sl-msg{margin:16px 18px 0;max-width:78%;padding:10px 13px;font-size:14.5px;line-height:1.55;
border:1px solid rgba(17,17,17,.1)}
.sl-msg.user{margin-inline-start:auto;background:#111;border-color:#111;color:#fff}
.sl-msg.bot{background:#f4f3f1;color:#111}
.sl-card{margin:18px 18px 0;border:1px solid rgba(17,17,17,.16);padding:16px}
.sl-card-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sl-card-row .item{font-size:14px;font-weight:500}
.sl-card-row .amount{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;
font-weight:500;letter-spacing:-.01em}
.sl-pay{display:block;margin-top:14px;padding:11px 0;text-align:center;font-size:13px;
font-weight:500;background:var(--color-brand-orange-1);color:#fff}
.sl-fine{display:block;margin-top:9px;text-align:center;font-size:11.5px;color:rgba(17,17,17,.5)}

/* round 173: the small "4 messages, no form, no page change" line under the
   sample conversation - it used to render as a bare unstyled paragraph. */
.sl-conv-foot{margin:18px 18px 0;padding-top:14px;border-top:1px dashed rgba(17,17,17,.18);
font-size:12px;letter-spacing:.05em;color:rgba(17,17,17,.52);text-align:center}

/* --- what the merchant loses today --- */
.sl-drop{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(17,17,17,.12)}
.sl-drop li{position:relative;padding:16px 0 16px 30px;border-bottom:1px solid rgba(17,17,17,.12);
font-size:14.5px;line-height:1.6;color:rgba(17,17,17,.66)}
.sl-drop li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:23px;
inline-size:14px;block-size:1px;background:var(--color-brand-orange-1)}

/* --- the four step sales path --- */
.sl-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
border-top:1px solid rgba(17,17,17,.14)}
.sl-step{padding:28px 24px 30px;border-inline-end:1px solid rgba(17,17,17,.12);
border-bottom:1px solid rgba(17,17,17,.14);transition:background .28s ease}
.sl-step:last-child{border-inline-end:0}
.sl-step:hover{background:rgba(17,17,17,.025)}
.sl-step .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
letter-spacing:.08em;color:var(--color-brand-orange-1)}
.sl-step h3{margin:14px 0 0;font-size:18px;font-weight:500;letter-spacing:-.015em}
.sl-step p{margin:9px 0 0;font-size:14px;line-height:1.65;color:rgba(17,17,17,.62)}

/* --- the order taking switch, shown in both states --- */
.sl-switch{border:1px solid rgba(17,17,17,.14);background:#fff}
.sl-sw-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 20px;border-bottom:1px solid rgba(17,17,17,.1)}
.sl-sw-head .lbl{font-size:15px;font-weight:500}
.sl-sw-head .on{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
padding:4px 10px;background:var(--color-brand-orange-1);color:#fff}
.sl-state{padding:18px 20px;border-bottom:1px solid rgba(17,17,17,.1)}
.sl-state:last-child{border-bottom:0}
.sl-state .k{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
color:rgba(17,17,17,.45)}
.sl-state.is-on .k{color:var(--color-brand-orange-1)}
.sl-state p{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:rgba(17,17,17,.66)}

/* --- small shared pieces --- */
.sl-ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.sl-ticks li{position:relative;padding-inline-start:24px;font-size:14.5px;line-height:1.6}
.sl-ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
inline-size:11px;block-size:1px;background:var(--color-brand-orange-1)}
.sl-note{margin:22px 0 0;font-size:13px;line-height:1.7;color:rgba(17,17,17,.5);
padding-inline-start:14px;border-inline-start:2px solid var(--color-brand-orange-1)}

@media (max-width:1023px){
.sl-row{grid-template-columns:56px minmax(0,1fr);gap:18px;padding:26px 0}
.sl-row .go{display:none}
.sl-row h3{font-size:22px}
.sl-split{grid-template-columns:1fr;gap:36px}
.sl-aside h2{font-size:28px}
.sl-flow{grid-template-columns:1fr}
.sl-step{border-inline-end:0}
.sl-msg{max-width:88%}
}

/* ================ round 159: support + product search pages ==============
   Two inner pages, one small block. Almost everything they need already
   exists: .sl-split, .sl-aside, .sl-conv, .sl-msg, .sl-flow, .sl-step,
   .sl-ticks, .sl-drop and .sl-fine came with round 158, and .cmp, .bento,
   .badges, .faq, .page-head came with the approved preview build. Only what
   is genuinely new lives here: the three column comparison, the search demo
   with its two product photos, the recommended product row inside a
   conversation, and the three marks under the support title.
   Everything below uses logical properties, so the persian right to left
   edition and the english left to right edition share this one block. ==== */

/* the three marks under the support page title */
.sp-marks{display:flex;flex-wrap:wrap;gap:10px 28px;margin:28px 0 0;padding:0;list-style:none}
.sp-marks li{position:relative;padding-inline-start:20px;font-family:var(--default-mono-font-family);
  font-size:var(--text-mono-sm);color:var(--color-secondary)}
.sp-marks li::before{content:"";position:absolute;inset-inline-start:0;top:calc(50% - 3px);width:6px;height:6px;
  border-radius:50%;background:var(--color-brand-orange-1)}

/* the comparison table, three columns instead of two */
.cmp-3 th,.cmp-3 td{width:auto}
.cmp-3 th:first-child,.cmp-3 td.ask{width:34%}
.cmp-3 td.ask{font-weight:var(--font-weight-medium);color:var(--color-primary)}
.cmp-3 td.no{color:var(--color-tertiary);border-inline-end:1px solid var(--color-border-primary)}
.cmp-3 td.yes{border-inline-end:0}

/* the search demo: one sentence in, two products out */
.ps-demo{border:1px solid var(--color-border-primary);background:var(--color-surface-primary);padding:28px}
.ps-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 24px;
  padding-bottom:20px;border-bottom:1px solid var(--color-border-primary)}
.ps-bar .ps-q{position:relative;padding-inline-start:26px;font-size:var(--text-body-xl);
  line-height:var(--text-body-xl--line-height);color:var(--color-primary)}
.ps-bar .ps-q::before{content:"";position:absolute;inset-inline-start:0;top:calc(50% - 6px);width:11px;height:11px;
  border:2px solid var(--color-brand-orange-1);border-radius:50%}
.ps-bar .ps-said{font-family:var(--default-mono-font-family);font-size:var(--text-mono-sm);
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-tertiary)}
.ps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ps-card{margin:0;border:1px solid var(--color-border-primary);background:var(--color-surface-secondary)}
.ps-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.ps-card figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px 18px}
.ps-card .nm{font-size:var(--text-body-lg);line-height:var(--text-body-lg--line-height);
  font-weight:var(--font-weight-medium);color:var(--color-primary)}
.ps-card .pr{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-brand-orange-1)}
.ps-card .tg,.ps-pick .tg{font-style:normal;padding:3px 10px;border:1px solid var(--color-border-primary);
  font-family:var(--default-mono-font-family);font-size:var(--text-mono-sm);color:var(--color-tertiary)}
.ps-out{margin:24px 0 0;font-size:var(--text-body-lg-long);line-height:var(--text-body-lg-long--line-height);
  color:var(--color-secondary)}

/* the recommended product, sitting inside a conversation */
.ps-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-block-start:14px;
  padding:16px 18px;border:1px solid var(--color-border-primary);background:var(--color-surface-secondary)}
.ps-pick .nm{flex:1 1 auto;font-size:var(--text-body-lg);line-height:var(--text-body-lg--line-height);
  font-weight:var(--font-weight-medium);color:var(--color-primary)}
.ps-pick .amount{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);
  color:var(--color-brand-orange-1)}

/* three sources instead of the four step flow of the support page */
.ps-src{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1023px){
  .ps-demo{padding:20px}
  .ps-grid{grid-template-columns:1fr}
  .ps-src{grid-template-columns:1fr}
  .sp-marks{gap:8px 20px}
}
@media (max-width:767px){
  .cmp-3 th:first-child,.cmp-3 td.ask{width:100%}
  .cmp-3 td.no{border-inline-end:0}
}

/* ================ round 160: lead capture + order tracking pages ==========
   Two more solution pages move off the old chrome. Everything here is scoped
   to classes only those two pages use, so nothing that came with rounds 155
   to 159 can shift. The request card and the order rail are the two new
   objects; the rest reuses sl-split, sl-conv, sp-marks, faq and cta. */

/* --- lead capture: the request card as it lands in the panel --- */
.lc-card{border:1px solid var(--color-border-primary);background:var(--color-surface-primary);padding:28px;max-width:760px}
.lc-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--color-border-primary)}
.lc-card-head .code{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-brand-orange-1)}
.lc-card-head .kind{font-size:var(--text-mono-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-secondary);border:1px solid var(--color-border-primary);padding:3px 10px}
.lc-card-head .state{margin-inline-start:auto;font-size:var(--text-mono-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--color-brand-orange-1)}
.lc-card h3{margin:20px 0 0;font-size:var(--text-body-xl);font-weight:var(--font-weight-medium);color:var(--color-primary)}
.lc-need{margin:10px 0 0;font-size:var(--text-body-lg);line-height:var(--text-body-lg--line-height);color:var(--color-secondary)}
.lc-chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lc-chips li{font-family:var(--default-mono-font-family);font-size:var(--text-mono-sm);color:var(--color-secondary);border:1px solid var(--color-border-primary);padding:6px 12px}
.lc-track{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--color-border-primary);display:flex;flex-wrap:wrap;gap:22px;counter-reset:none}
.lc-track li{position:relative;font-size:var(--text-mono-sm);letter-spacing:.04em;color:var(--color-tertiary);padding-inline-start:16px}
.lc-track li::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:7px;height:7px;margin-top:-3px;background:var(--color-border-primary)}
.lc-track li.on{color:var(--color-primary)}
.lc-track li.on::before{background:var(--color-brand-orange-1)}

/* --- lead capture: what the card carries, and the four step lane --- */
.lc-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--color-border-primary);border:1px solid var(--color-border-primary)}
.lc-grid article{background:var(--color-surface-primary);padding:24px}
.lc-grid h3{margin:0;font-size:var(--text-body-lg);font-weight:var(--font-weight-medium);color:var(--color-primary)}
.lc-grid p{margin:8px 0 0;font-size:var(--text-body-lg);line-height:var(--text-body-lg-long);color:var(--color-secondary)}
.lc-lane{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:1px;background:var(--color-border-primary);border:1px solid var(--color-border-primary)}
.lc-lane li{background:var(--color-surface-primary);display:flex;gap:20px;padding:24px 26px;align-items:flex-start}
.lc-lane .n{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-brand-orange-1);min-width:34px}
.lc-lane h3{margin:0;font-size:var(--text-body-xl);font-weight:var(--font-weight-medium);color:var(--color-primary)}
.lc-lane p{margin:8px 0 0;font-size:var(--text-body-lg);line-height:var(--text-body-lg-long);color:var(--color-secondary);max-width:70ch}
.lc-kinds{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lc-kinds article{border:1px solid var(--color-border-primary);padding:24px;background:var(--color-surface-primary)}
.lc-kinds h3{margin:0;font-size:var(--text-body-lg);font-weight:var(--font-weight-medium);color:var(--color-primary)}
.lc-kinds p{margin:8px 0 0;font-size:var(--text-body-lg);line-height:var(--text-body-lg-long);color:var(--color-secondary)}

/* --- order tracking: the order panel and its four state rail --- */
.ot-note{margin:22px 0 0;font-size:var(--text-mono-sm);letter-spacing:.04em;color:var(--color-tertiary);border-inline-start:2px solid var(--color-brand-orange-1);padding-inline-start:12px}
.ot-panel{border:1px solid var(--color-border-primary);background:var(--color-surface-primary);padding:28px;max-width:760px;margin-inline:auto}
.ot-panel-head{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--color-border-primary)}
.ot-panel-head .code{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-primary)}
.ot-panel-head .state{margin-inline-start:auto;font-size:var(--text-mono-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-brand-orange-1)}
.ot-rail{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.ot-rail li{position:relative;text-align:center;padding-top:22px}
.ot-rail li::after{content:"";position:absolute;top:6px;inset-inline-start:50%;width:100%;height:1px;background:var(--color-border-primary)}
.ot-rail li:last-child::after{display:none}
.ot-rail .dot{position:absolute;top:0;inset-inline-start:50%;margin-inline-start:-6px;width:13px;height:13px;border:1px solid var(--color-border-primary);background:var(--color-surface-primary)}
.ot-rail .lb{font-size:var(--text-mono-sm);letter-spacing:.04em;color:var(--color-tertiary)}
.ot-rail li.done .dot{background:var(--color-brand-orange-1);border-color:var(--color-brand-orange-1)}
.ot-rail li.done .lb{color:var(--color-secondary)}
.ot-rail li.now .dot{background:var(--color-brand-orange-1);border-color:var(--color-brand-orange-1);box-shadow:0 0 0 4px color-mix(in srgb, var(--color-brand-orange-1) 22%, transparent)}
.ot-rail li.now .lb{color:var(--color-primary)}
.ot-code{display:flex;align-items:center;gap:12px;margin:30px 0 0;padding-top:18px;border-top:1px solid var(--color-border-primary)}
.ot-code .k{font-size:var(--text-mono-sm);letter-spacing:.04em;color:var(--color-tertiary)}
.ot-code .v{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-primary);margin-inline-start:auto}

/* --- order tracking: before and after, the four install steps, the footnote --- */
.ot-ba{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ot-col{border:1px solid var(--color-border-primary);padding:26px;background:var(--color-surface-primary)}
.ot-col .h{margin:0;font-size:var(--text-mono-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-tertiary)}
.ot-col ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.ot-col li{position:relative;padding-inline-start:18px;font-size:var(--text-body-lg);line-height:var(--text-body-lg-long);color:var(--color-secondary)}
.ot-col li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:1px;background:var(--color-tertiary)}
.ot-col.good li::before{width:7px;height:7px;top:.5em;background:var(--color-brand-orange-1)}
.ot-col.good .h{color:var(--color-brand-orange-1)}
.ot-steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--color-border-primary);border:1px solid var(--color-border-primary)}
.ot-steps li{background:var(--color-surface-primary);padding:26px 22px}
.ot-steps .n{font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);color:var(--color-brand-orange-1)}
.ot-steps h3{margin:14px 0 0;font-size:var(--text-body-lg);font-weight:var(--font-weight-medium);color:var(--color-primary)}
.ot-steps p{margin:8px 0 0;font-size:var(--text-body-lg);line-height:var(--text-body-lg-long);color:var(--color-secondary)}
.ot-chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ot-chips li{font-size:var(--text-mono-sm);letter-spacing:.04em;color:var(--color-secondary);border:1px solid var(--color-border-primary);padding:7px 14px}
.ot-foot{margin:26px 0 0;font-size:var(--text-mono-sm);letter-spacing:.04em;color:var(--color-tertiary)}

/* --- phones: the grids and the rail all fall to one column --- */
@media (max-width:767px){
  .lc-card,.ot-panel{padding:22px}
  .lc-grid,.lc-kinds,.ot-ba,.ot-steps{grid-template-columns:1fr}
  .lc-lane li{flex-direction:column;gap:10px}
  .ot-rail{grid-template-columns:1fr;gap:14px}
  .ot-rail li{text-align:start;padding-top:0;padding-inline-start:26px}
  .ot-rail li::after{display:none}
  .ot-rail .dot{inset-inline-start:0;top:.2em;margin-inline-start:0}
  .ot-code{flex-direction:column;align-items:flex-start;gap:6px}
  .ot-code .v{margin-inline-start:0}
}

/* ================ round 161: the model page + the blog index ==============
   Two more public pages leave the old chrome. Everything here is scoped to
   classes only those two pages use, so rounds 155 to 160 cannot shift. The
   behaviour switcher and the eight step stack are the model page's own
   objects; the card grid and the category chips belong to the blog. */

.mono-eyebrow{font-family:var(--default-mono-font-family);letter-spacing:.04em}

/* --- model: the base model facts --- */
.md-base{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--color-border-primary)}
.md-base li{display:flex;gap:24px;padding:14px 0;border-bottom:1px solid var(--color-border-primary)}
.md-base .lb{flex:0 0 34%;color:var(--color-secondary);font-size:var(--text-mono-sm);font-family:var(--default-mono-font-family)}
.md-base .vl{flex:1;color:var(--color-primary)}

/* --- model: the three research steps --- */
.md-lane{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.md-lane li{display:flex;gap:18px;align-items:flex-start;padding:20px;border:1px solid var(--color-border-primary);border-radius:14px;background:var(--color-surface-primary)}
.md-lane .n{flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-primary);color:var(--color-brand-orange-1);font-weight:var(--font-weight-medium)}
.md-lane h3{margin:0 0 6px;font-size:var(--text-body-lg)}
.md-lane p{margin:0;color:var(--color-secondary);line-height:var(--text-body-lg--line-height)}
.md-stats{margin-top:34px}

/* --- model: the behaviour switcher --- */
.md-beh{margin-top:30px;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:26px;align-items:start}
.md-tabs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.md-tabs button{width:100%;text-align:start;padding:12px 16px;border-radius:12px;border:1px solid var(--color-border-primary);background:transparent;color:var(--color-secondary);cursor:pointer;font:inherit;transition:background .18s ease,color .18s ease}
.md-tabs button:hover{color:var(--color-primary)}
.md-tabs button.on{background:var(--color-surface-secondary);color:var(--color-primary);border-color:var(--color-primary)}
.md-panel{border:1px solid var(--color-border-primary);border-radius:18px;padding:26px;background:var(--color-surface-primary)}
.md-panel .tag{margin:0;font-family:var(--default-mono-font-family);font-size:var(--text-mono-sm);color:var(--color-brand-orange-1)}
.md-panel h3{margin:8px 0 10px;font-size:var(--text-body-xl)}
.md-panel .why{margin:0 0 18px;color:var(--color-secondary);line-height:var(--text-body-lg--line-height)}

/* --- model: the eight step layer --- */
.md-edge{margin:26px 0 0;padding:12px 18px;border-radius:999px;display:inline-block;background:var(--color-surface-secondary);color:var(--color-primary);font-size:var(--text-mono-md)}
.md-edge.out{margin-top:10px}
.md-stack{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.md-stack li{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;border:1px solid var(--color-border-primary);border-radius:14px}
.md-stack .n{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-surface-secondary);font-family:var(--default-mono-font-family);font-size:var(--text-mono-sm)}
.md-stack h3{margin:0 0 6px;font-family:var(--default-mono-font-family);font-size:var(--text-mono-md);font-weight:var(--font-weight-medium)}
.md-stack p{margin:0;color:var(--color-secondary);line-height:var(--text-body-lg--line-height)}

/* --- blog: the category chips --- */
.bl-cats{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bl-cats button{padding:9px 18px;border-radius:999px;border:1px solid var(--color-border-primary);background:transparent;color:var(--color-secondary);cursor:pointer;font:inherit;transition:background .18s ease,color .18s ease}
.bl-cats button:hover{color:var(--color-primary)}
.bl-cats button.on{background:var(--color-primary);color:var(--color-surface-primary);border-color:var(--color-primary)}

/* --- blog: the card grid --- */
.bl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bl-card a{display:flex;flex-direction:column;height:100%;border:1px solid var(--color-border-primary);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;background:var(--color-surface-primary);transition:border-color .18s ease}
.bl-card a:hover{border-color:var(--color-primary)}
.bl-cover{display:block;height:150px;background-color:var(--color-surface-secondary);background-size:cover;background-position:center}
.bl-cat{display:block;margin:18px 20px 0;font-family:var(--default-mono-font-family);font-size:var(--text-mono-sm);color:var(--color-brand-orange-1)}
.bl-title{display:block;margin:8px 20px 0;font-size:var(--text-body-lg);font-weight:var(--font-weight-medium)}
.bl-ex{display:block;margin:8px 20px 0;color:var(--color-secondary);line-height:var(--text-body-lg--line-height)}
.bl-meta{display:flex;justify-content:space-between;gap:12px;margin:auto 20px 18px;padding-top:16px;color:var(--color-tertiary);font-size:var(--text-mono-sm)}

/* --- blog: nothing published yet --- */
.bl-empty{border:1px dashed var(--color-border-primary);border-radius:18px;padding:44px 26px;text-align:center}
.bl-empty .h{margin:0 0 10px;font-size:var(--text-body-xl)}
.bl-empty p{margin:0 0 18px;color:var(--color-secondary)}

@media (max-width:1023px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .md-base li{flex-direction:column;gap:6px}
  .md-base .lb{flex:none}
  .md-beh{grid-template-columns:minmax(0,1fr)}
  .md-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:8px;padding-bottom:6px}
  .md-panel{padding:20px}
  .md-stack li{padding:16px}
  .bl-grid{grid-template-columns:minmax(0,1fr)}
  .bl-cover{height:170px}
}

/* ================ round 162: the trust and security page =================
   Six numbered commitments, the sub-processor cards and the contact block.
   Same rhythm as the solution pages: a wide number column on the left, the
   text on the right, and everything collapses to one column on a phone. */

.sq-list{display:grid;gap:0;border-top:1px solid var(--color-border-primary)}
.sq-list article{display:grid;grid-template-columns:72px 1fr;gap:22px;align-items:start;padding:26px 0;border-bottom:1px solid var(--color-border-primary)}
.sq-list .n{color:var(--color-tertiary);font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:.06em;padding-top:4px}
.sq-list h3{margin:0 0 8px;font-size:var(--text-body-xl);font-weight:500}
.sq-list p{margin:0;color:var(--color-secondary);line-height:1.85}

.sq-proc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sq-proc article{border:1px solid var(--color-border-primary);border-radius:18px;padding:24px}
.sq-proc h3{margin:0 0 10px;font-size:var(--text-body-xl);font-weight:500}
.sq-proc p{margin:0;color:var(--color-secondary);line-height:1.8}
.sq-proc p.d{margin-top:12px;color:var(--color-tertiary);font-size:var(--text-mono-sm)}

.sq-ask{border:1px dashed var(--color-border-primary);border-radius:18px;padding:26px}
.sq-ask p{margin:0;color:var(--color-secondary);line-height:1.9}
.sq-ask a{color:var(--color-primary);text-decoration:underline;text-underline-offset:4px}

@media (max-width:1023px){
  .sq-proc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .sq-list article{grid-template-columns:minmax(0,1fr);gap:8px}
  .sq-list .n{padding-top:0}
  .sq-ask{padding:20px}
}

/* ================ round 163: sharp corners everywhere =================
   The design principle of the new site is a square corner. It was kept in
   some places and quietly lost in others: pill buttons, 14px cards, 28px
   sections. This block is the single place that enforces it, so a corner
   can never come back by accident. Real circles stay round on purpose:
   status dots, ticks and avatar photos are dots, not corners. */
.btn,.navbtn,.build,.hdr nav a,.pill,.chips li,.snippet,
.stat,.bento,.demo,.badges li,.mcard,.cmp,.flow li,.flow-sec,.cta,
.md-lane li,.md-tabs button,.md-panel,.md-edge,.md-stack li,
.bl-cats button,.bl-card a,.bl-empty,.sq-proc article,.sq-ask,
.sq-list article,.hero-biz__item,.ftr-seal img,
.wrap input,.wrap textarea,.wrap select,.wrap button{border-radius:0}
.md-lane .n,.md-stack .n{border-radius:0}
@media (max-width:1023px){.flow-sec,.cta{border-radius:0}}


/* ================ round 164: the article and legal pages ================ */
.art-head .wrap{max-width:760px}
.art-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(17,17,17,.55);margin-bottom:28px}
.art-crumbs a{color:inherit;text-decoration:none}
.art-crumbs a:hover{color:#111}
.art-crumbs .here{color:rgba(17,17,17,.8);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-head h1{margin:14px 0 0;font-size:clamp(28px,4.2vw,44px);line-height:1.5}
.art-cover{display:block;width:100%;aspect-ratio:16/8;margin-top:32px;border:1px solid rgba(17,17,17,.12);border-radius:0;object-fit:cover;background:linear-gradient(135deg,#f3f1ec,#fff)}
.art-body{margin-top:36px;font-size:16px;line-height:2}
.art-body p{margin:16px 0}
.art-body h2{margin:40px 0 12px;font-size:22px}
.art-body h3{margin:32px 0 10px;font-size:18px}
.art-body ul,.art-body ol{margin:16px 0;padding-inline-start:24px}
.art-body li{margin:6px 0}
.art-body blockquote{margin:24px 0;padding-inline-start:16px;border-inline-start:2px solid #111;font-weight:500}
.art-body img{width:100%;margin:24px 0;border:1px solid rgba(17,17,17,.12);border-radius:0}
.art-body a{color:#111;text-decoration:underline}
.art-more .wrap{max-width:760px}
.art-more h2{font-size:20px;margin:0 0 8px}
.art-more ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(17,17,17,.12)}
.art-more li a{display:block;padding:18px 0;border-bottom:1px solid rgba(17,17,17,.12);text-decoration:none;color:inherit}
.art-more .m{display:block;font-size:12px;color:rgba(17,17,17,.55);margin-bottom:4px}
.art-more .t{font-weight:600}
.art-more li a:hover .t{text-decoration:underline}
.lg-updated{margin-top:18px;font-size:13px;color:rgba(17,17,17,.55)}
.lg-secs{list-style:none;margin:0;padding:0;max-width:760px}
.lg-secs>li{border-top:1px solid rgba(17,17,17,.12);padding:44px 0}
.lg-secs h2{margin:10px 0 0;font-size:clamp(20px,2.6vw,28px);font-weight:600}
.lg-secs .b{margin:18px 0 0;font-size:16px;line-height:2;color:rgba(17,17,17,.82)}
.lg-secs .b a{color:#111;text-decoration:underline}