/* BharatApps.store — site styles.
   Colours, radii, shadows and type come from MBM's design spec:
   mbm design/mbm-prototype.html :root and lib/ui2/theme/tokens.dart (release/1.1.572).
   Dark palette follows MBM Web PC lib/design/tokens.dart DsDark (MBM itself is light-only).
   Product accents are MBM shopTints (cool identity colours) plus Web PC chart teal for Cityo.
   Money colours (credit in / debit out) are never themed and never reused for anything else. */

@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/BricolageGrotesque-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/BricolageGrotesque-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/InstrumentSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/InstrumentSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/MartianMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
/* Metric-matched fallbacks: text keeps its box while the web fonts load (no font CLS). */
@font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Arial");font-weight:700 800;size-adjust:101%;ascent-override:92%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:"Instrument Fallback";src:local("Arial"),local("ArialMT"),local("Roboto");size-adjust:101.3%;ascent-override:95.7%;descent-override:24.7%;line-gap-override:0%}
@font-face{font-family:"Martian Fallback";src:local("Courier New"),local("CourierNewPSMT");size-adjust:116.6%;ascent-override:85.7%;descent-override:17.1%;line-gap-override:0%}

:root{
  --paper:#F4F5F3; --card:#FFFFFF; --sunk:#ECEEE9;
  --ink:#161A18; --ink2:#636B66; --ink3:#838B85;
  --line:#E5E7E2; --hair:#EFF1ED;
  --indigo:#3A4C9E; --indigo-deep:#232E66; --indigo-soft:#EAECF7; --indigo-line:#DDE1F2; --indigo-ink:#3A4C9E;
  --credit:#0E6B55; --credit-soft:#E6F0EC; --credit-line:#D6E6DF;
  --debit:#93401C; --debit-soft:#F6ECE5;
  --signal:#B4491F; --signal-soft:#FBE9E1;
  /* product identity (shopTints + chart teal) */
  --p-mbm:#3A4C9E; --p-cityo:#147A65; --p-shiftly:#6A3D80; --p-web:#27536E; --p-sites:#2C5A79; --p-partners:#7A4A22;
  --pi-mbm:#3A4C9E; --pi-cityo:#147A65; --pi-shiftly:#6A3D80; --pi-web:#27536E; --pi-sites:#2C5A79; --pi-partners:#7A4A22;
  --sh1:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.05);
  --sh2:0 2px 6px rgba(22,26,24,.06),0 14px 34px rgba(22,26,24,.10);
  --shh:0 3px 10px rgba(22,26,24,.14),0 16px 36px rgba(22,26,24,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --disp:"Bricolage Grotesque","Bricolage Fallback","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Instrument Fallback","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono","Martian Fallback","Bricolage Grotesque",ui-monospace,Menlo,monospace;
  --r11:11px; --r16:16px; --r22:22px; --pill:100px;
  --gut:clamp(16px,4vw,32px); --max:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15181A; --card:#1D2123; --sunk:#101214;
    --ink:#F4F5F3; --ink2:#9AA39E; --ink3:#838B85;
    --line:#2C3134; --hair:#23282B;
    --indigo:#5C6EC5; --indigo-soft:#232E66; --indigo-line:#2F3C80; --indigo-ink:#8FA0FF;
    --pi-mbm:#8FA0FF; --pi-cityo:#5CC9AE; --pi-shiftly:#C9A2DE; --pi-web:#7DB3D6; --pi-sites:#86BCE0; --pi-partners:#DDA77A;
    --sh1:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.2);
    --sh2:0 2px 6px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.4);
    --shh:0 3px 10px rgba(0,0,0,.4),0 16px 36px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15181A; --card:#1D2123; --sunk:#101214;
  --ink:#F4F5F3; --ink2:#9AA39E; --ink3:#838B85;
  --line:#2C3134; --hair:#23282B;
  --indigo:#5C6EC5; --indigo-soft:#232E66; --indigo-line:#2F3C80; --indigo-ink:#8FA0FF;
  --pi-mbm:#8FA0FF; --pi-cityo:#5CC9AE; --pi-shiftly:#C9A2DE; --pi-web:#7DB3D6; --pi-sites:#86BCE0; --pi-partners:#DDA77A;
  --sh1:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.2);
  --sh2:0 2px 6px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.4);
  --shh:0 3px 10px rgba(0,0,0,.4),0 16px 36px rgba(0,0,0,.5);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;overflow-wrap:break-word;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--indigo-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.4rem + 4.4vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(1.8rem,1.25rem + 2.4vw,3rem);letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--indigo-ink);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r11);font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:500 .72rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:.6em;margin:0 0 1rem}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--acc,var(--indigo))}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--ink2);max-width:40em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink2)}

/* ── header ───────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;view-transition-name:hdr}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:12px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 1.18rem/1 var(--disp);letter-spacing:-.03em;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand img{width:34px;height:34px;flex:none;border-radius:10px}
.brand small{font:500 .62rem/1 var(--mono);letter-spacing:.08em;color:var(--ink2);margin-left:1px}
.nav{display:flex;align-items:center;gap:2px}
.nav>a,.nav-btn{font:600 .95rem/1 var(--body);color:var(--ink);text-decoration:none;padding:12px 12px;border-radius:var(--r11);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.nav>a:hover,.nav-btn:hover,.nav>a[aria-current="page"]{background:var(--sunk)}
.nav-btn svg{transition:transform .3s var(--ease)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.has-menu{position:relative}
.menu{position:absolute;left:50%;top:calc(100% + 10px);width:min(640px,92vw);translate:-50% 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r22);box-shadow:var(--sh2);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mi{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none;color:var(--ink)}
.mi:hover,.mi:focus-visible{background:var(--sunk)}
.pi-mini{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--acc);color:#fff;font-size:.62rem}
.pi-mini img{width:40px;height:40px}
.mi b{display:block;font:700 1rem/1.2 var(--disp);letter-spacing:-.01em}
.mi span{display:block;font-size:.86rem;color:var(--ink2);line-height:1.35;margin-top:3px}
.hdr-cta{margin-left:6px}
.theme-btn,.menu-toggle{width:44px;height:44px;border-radius:var(--r11);border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;flex:none}
.theme-btn:hover,.menu-toggle:hover{border-color:var(--ink3)}
.menu-toggle{display:none}
@media (max-width:959px){
  .menu-toggle{display:inline-grid}
  .hdr .hdr-cta{display:none}
  .nav{position:fixed;inset:68px 0 auto 0;max-height:calc(100dvh - 68px);overflow:auto;flex-direction:column;align-items:stretch;gap:2px;background:var(--paper);border-bottom:1px solid var(--line);padding:10px var(--gut) 22px;box-shadow:var(--sh2);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .nav>a,.nav-btn{justify-content:space-between;font-size:1.05rem;padding:14px 12px}
  .menu{position:static;translate:none;width:auto;grid-template-columns:1fr;box-shadow:none;border:0;background:transparent;padding:0 0 6px;display:none;opacity:1;visibility:visible;transform:none}
  .menu.open{display:grid}
  .nav .mobile-cta{display:flex;margin-top:10px;justify-content:center;background:var(--b);color:var(--bt);font-family:var(--disp)}
  .nav .mobile-cta:hover{background:var(--indigo-deep)}
}
@media (min-width:960px){.nav .mobile-cta{display:none}}
html.no-js .menu-toggle{display:none}
html.no-js .nav{position:static;opacity:1;visibility:visible;transform:none;flex-wrap:wrap;box-shadow:none;border:0;padding:0;background:none;flex-direction:row}

/* ── buttons ──────────────────────────────────────────── */
.btn{--b:var(--indigo);--bt:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--pill);background:var(--b);color:var(--bt);font:600 1rem/1 var(--disp);letter-spacing:-.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh2);text-decoration:none}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.92rem}
.btn-ghost{--b:transparent;--bt:var(--ink);border-color:var(--line);background:var(--card)}
.btn-ghost:hover{border-color:var(--ink3)}
.btn-dark{--b:var(--ink);--bt:var(--paper)}
:root .btn-indigo{--b:#3A4C9E}
.play{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 20px 8px 16px;border-radius:14px;background:#161A18;color:#fff;text-decoration:none;border:1px solid #2C3134;transition:transform .25s var(--ease),box-shadow .25s}
.play:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.play svg{width:26px;height:26px}
.play small{display:block;font:500 .64rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.play b{display:block;font:700 1.05rem/1.15 var(--disp)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── sections ─────────────────────────────────────────── */
section{position:relative}
.sec{padding:clamp(64px,9vw,128px) 0}
.sec-tight{padding:clamp(40px,6vw,72px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.band{background:var(--card);border-block:1px solid var(--line)}
.ink-band{background:#161A18;color:#F4F5F3;--ink2:#9AA39E;--line:#2C3134;--card:#1D2123;--sunk:#23282B;--indigo-ink:#8FA0FF}
.ink-band .eyebrow{color:#9AA39E}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px);isolation:isolate}
/* decoration is clipped on its own layer so dropdowns (search suggestions) can overflow the hero */
.decor{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.hero-grid{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}}
.hero h1 .hl{color:var(--indigo-ink);display:inline-block}
.hero .lead{margin-bottom:28px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--ink2);font:500 .78rem/1.4 var(--mono);letter-spacing:.04em}
.hero-meta span{display:inline-flex;gap:8px;align-items:center}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--credit)}
.hero-bg{position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;background:radial-gradient(40% 40% at 78% 30%,color-mix(in srgb,var(--indigo) 16%,transparent),transparent 70%),radial-gradient(30% 30% at 10% 10%,color-mix(in srgb,var(--p-cityo) 10%,transparent),transparent 70%)}
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 60% at 70% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000 20%,transparent 75%)}
.sub-hero{padding:clamp(36px,6vw,80px) 0 clamp(40px,6vw,72px);isolation:isolate}
.sub-hero h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4rem)}
.app-id{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.app-id img{width:64px;height:64px;border-radius:16px;box-shadow:var(--sh1);view-transition-name:var(--vt,none)}
.app-id .tag{font:500 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.app-id .nm{font:700 1.15rem/1.2 var(--disp)}

/* ── ecosystem animation (hero) — light "app screens" in both themes ─ */
.eco{margin:0;position:relative}
.eco-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px}
.eco-wire{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.eco-wire path{fill:none;stroke:var(--indigo-line);stroke-width:2;stroke-dasharray:1 1.6;vector-effect:non-scaling-stroke}
.eco-wire .flow{stroke:var(--indigo);stroke-dasharray:7 93;stroke-width:3;stroke-linecap:round;opacity:0}
.js-motion .eco-wire .flow{opacity:.9;animation:flow 12.8s linear infinite}
.eco.paused .eco-wire .flow{animation-play-state:paused}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ec{--a:#3A4C9E;position:relative;z-index:1;background:#fff;color:#161A18;border:1px solid #E5E7E2;border-radius:18px;padding:14px;box-shadow:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.05);font-size:.82rem;line-height:1.35;transition:transform .6s var(--ease),box-shadow .6s var(--ease),opacity .6s var(--ease),filter .6s;min-width:0}
.ec-1,.ec-2{transform:translateY(28px)}
.ec-2{grid-area:2/2}.ec-3{grid-area:2/1}
.ec-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ec-h i{width:26px;height:26px;border-radius:8px;background:var(--a);display:grid;place-items:center;color:#fff;flex:none;font-style:normal}
.ec-h b{font:700 .9rem/1.1 var(--disp);letter-spacing:-.01em}
.ec-h small{display:block;font:500 .58rem/1.2 var(--mono);letter-spacing:.1em;color:#636B66;text-transform:uppercase;margin-top:2px}
.ec-step{position:absolute;top:-10px;right:12px;font:500 .62rem/1 var(--mono);background:var(--a);color:#fff;border-radius:var(--pill);padding:5px 8px;letter-spacing:.06em}
.ln{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #EFF1ED;white-space:nowrap}
.ln span{overflow:hidden;text-overflow:ellipsis}
.ln .mono{font-size:.74rem}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.tot .mono{font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 .62rem/1 var(--mono);letter-spacing:.04em;padding:6px 8px;border-radius:var(--pill);background:#EAECF7;color:#232E66;margin-top:9px}
.chip.in{background:#E6F0EC;color:#0E6B55}
.money-in{color:#0E6B55}
.money-out{color:#93401C}
.url{display:flex;align-items:center;gap:6px;background:#ECEEE9;border-radius:var(--pill);padding:6px 10px;font:500 .6rem/1 var(--mono);color:#636B66;margin-bottom:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.url::before{content:"";width:7px;height:7px;border-radius:50%;background:#147A65;flex:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tiles div{background:#ECEEE9;border-radius:9px;padding:8px 8px 7px;font-size:.68rem;line-height:1.2;min-width:0}
.tiles div::before{content:"";display:block;height:20px;border-radius:5px;background:#DDE1F2;margin-bottom:6px}
.tiles div:nth-child(2)::before{background:#E6F0EC}.tiles div:nth-child(3)::before{background:#F6ECE5}
.tiles b{display:block;font-family:var(--mono);font-weight:500;font-size:.66rem;margin-top:2px}
.sbox{display:flex;align-items:center;gap:8px;border:1.5px solid #147A65;border-radius:var(--pill);padding:8px 12px;margin-bottom:10px;font-size:.8rem}
.sbox svg{width:14px;height:14px;color:#147A65;flex:none}
.caret{display:inline-block;width:1.5px;height:1em;background:#147A65;vertical-align:-2px;margin-left:1px}
.res{display:flex;gap:9px;align-items:center;border:1px solid #E5E7E2;border-radius:12px;padding:8px}
.res+.res{margin-top:8px}
.res .av.sh{background:#147A65}
.res .av{width:30px;height:30px;border-radius:9px;background:#3A4C9E;color:#fff;display:grid;place-items:center;font:700 .7rem/1 var(--disp);flex:none}
.res b{display:block;font:700 .8rem/1.15 var(--disp)}
.res small{display:block;color:#636B66;font-size:.68rem}
.res .mono{margin-left:auto;font-size:.76rem}
.open{color:#0E6B55}
.eco-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:40px;counter-reset:s}
.eco-steps li{counter-increment:s}
.eco-steps button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:10px 4px 0;border-top:3px solid var(--line);font:600 .8rem/1.3 var(--body);color:var(--ink2);transition:color .3s,border-color .3s}
.eco-steps button::before{content:"0" counter(s);display:block;font:500 .64rem/1 var(--mono);letter-spacing:.1em;margin-bottom:5px}
.eco-steps button:focus-visible{outline:3px solid var(--indigo-ink);outline-offset:3px}
.eco-steps button[aria-current="step"]{color:var(--ink);border-color:var(--indigo)}
.eco-ctl{display:none;margin-top:12px;text-align:right}
.js-motion .eco-ctl{display:block}
.eco-ctl button{font:500 .7rem/1 var(--mono);letter-spacing:.06em;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:8px 12px;cursor:pointer;min-height:32px}
/* stepping: one card is lit, the rest rest */
.ec>*{transition:opacity .6s var(--ease)}
.eco[data-step] .ec{filter:saturate(.35)}
.eco[data-step] .ec>*{opacity:.55}
.eco[data-step="all"] .ec,.eco[data-step="0"] .ec-0,.eco[data-step="1"] .ec-1,.eco[data-step="2"] .ec-2,.eco[data-step="3"] .ec-3{filter:none;box-shadow:0 3px 10px rgba(22,26,24,.14),0 16px 36px rgba(22,26,24,.16)}
.eco[data-step="all"] .ec>*,.eco[data-step="0"] .ec-0>*,.eco[data-step="1"] .ec-1>*,.eco[data-step="2"] .ec-2>*,.eco[data-step="3"] .ec-3>*{opacity:1}
.eco[data-step="0"] .ec-0,.eco[data-step="3"] .ec-3{transform:translateY(-6px) scale(1.02)}
.eco[data-step="1"] .ec-1,.eco[data-step="2"] .ec-2{transform:translateY(22px) scale(1.02)}
.eco[data-step="0"] .ec-0 .ln,.eco[data-step="1"] .ec-1 .ln{animation:lnIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*.22s)}
.eco[data-step="0"] .ec-0 .chip,.eco[data-step="1"] .ec-1 .chip{animation:pop .5s var(--ease) both;animation-delay:1.1s}
.eco[data-step="2"] .ec-2 .tiles div{animation:tileIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*.15s + .2s)}
.eco[data-step="3"] .ec-3 .typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:type 1s steps(11) both .2s}
.eco[data-step="3"] .ec-3 .res{animation:pop .5s var(--ease) both 1.3s}
.eco[data-step="3"] .ec-3 .res+.res{animation-delay:1.6s}
.eco[data-step="3"] .ec-3 .caret{animation:blink 1s steps(1) infinite}
@keyframes lnIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes tileIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes type{from{width:0}to{width:11ch}}
@keyframes blink{50%{opacity:0}}
@media (max-width:639px){
  .eco-stage{grid-template-columns:1fr;padding:0}
  .eco-wire{display:none}
  .ec{transform:none!important;grid-area:auto!important}
  .js-motion .eco-stage{display:grid}
  .js-motion .eco-stage>.ec{grid-area:1/1!important;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98)}
  .js-motion .eco[data-step="0"] .ec-0,.js-motion .eco[data-step="1"] .ec-1,.js-motion .eco[data-step="2"] .ec-2,.js-motion .eco[data-step="3"] .ec-3{opacity:1;visibility:visible;transform:none}
  .eco-steps{margin-top:16px}
  .eco-steps button{font-size:.72rem}
}

/* ── stats ────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r22);overflow:hidden}
.stat{background:var(--card);padding:clamp(20px,3vw,32px)}
.stat .n{font:500 clamp(1.9rem,1.4rem + 2vw,2.8rem)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block;margin-bottom:10px}
.stat p{margin:0;color:var(--ink2);font-size:.95rem}
.stat .src{display:block;margin-top:8px;font:500 .64rem/1.3 var(--mono);color:var(--ink2);letter-spacing:.04em}

/* ── product cards ────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.pcard{--acc:var(--p-mbm);--acci:var(--pi-mbm);position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:24px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;transform-style:preserve-3d}
.pcard::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--acc);transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--acc) 40%,var(--line));text-decoration:none}
.pcard:hover::before{transform:scaleX(1)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.pcard:hover::after{opacity:1}
.pcard .pi{width:52px;height:52px;border-radius:14px;margin-bottom:18px;display:grid;place-items:center;background:var(--acc);color:#fff;overflow:hidden;flex:none}
.pcard .pi img{width:52px;height:52px}
.pcard h3{margin-bottom:6px}
.pcard .who{font:500 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acci);margin-bottom:10px}
.pcard p{color:var(--ink2);margin-bottom:20px;flex:1}
.pcard .go{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1 var(--disp);color:var(--acci)}
.pcard .go svg{transition:transform .3s var(--ease)}
.pcard:hover .go svg{transform:translateX(5px)}
.acc-mbm{--acc:var(--p-mbm);--acci:var(--pi-mbm)}
.acc-cityo{--acc:var(--p-cityo);--acci:var(--pi-cityo)}
.acc-shiftly{--acc:var(--p-shiftly);--acci:var(--pi-shiftly)}
.acc-web{--acc:var(--p-web);--acci:var(--pi-web)}
.acc-sites{--acc:var(--p-sites);--acci:var(--pi-sites)}
.acc-partners{--acc:var(--p-partners);--acci:var(--pi-partners)}

/* ── flow (how it connects) ───────────────────────────── */
.flow-list{list-style:none;display:grid;gap:16px;counter-reset:f;position:relative}
@media (min-width:900px){.flow-list{grid-template-columns:repeat(4,1fr)}}
.flow-list li{counter-increment:f;background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:22px;position:relative}
.flow-list li::before{content:"0" counter(f);font:500 .7rem/1 var(--mono);letter-spacing:.1em;color:var(--acci,var(--indigo-ink));display:block;margin-bottom:14px}
.flow-list h3{font-size:1.15rem}
.flow-list p{color:var(--ink2);margin:0;font-size:.95rem}
.flow-list .tagp{display:inline-block;margin-top:14px;font:500 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:var(--pill);background:var(--sunk);color:var(--ink2)}
.flow-rail{height:3px;background:var(--line);border-radius:3px;margin:0 0 24px;overflow:hidden}
.flow-rail i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--p-mbm),var(--p-sites),var(--p-cityo));transform-origin:left;transform:scaleX(var(--p,1))}

/* ── features ─────────────────────────────────────────── */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r16);padding:20px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh1)}
.feat .fi{width:40px;height:40px;border-radius:12px;background:var(--indigo-soft);color:var(--acci,var(--indigo-ink));display:grid;place-items:center;margin-bottom:14px}
.feat h3{font-size:1.05rem;margin-bottom:6px}
.feat p{margin:0;color:var(--ink2);font-size:.94rem}
.feat .gate{display:inline-block;margin-top:10px;font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink2)}
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev>:first-child{order:2}}
.checks{list-style:none;display:grid;gap:12px;margin:0 0 24px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;background:var(--indigo-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233A4C9E' fill-rule='evenodd' d='M19.7 6.3a1 1 0 0 1 0 1.4l-9.5 9.5a1 1 0 0 1-1.4 0l-4.5-4.5a1 1 0 1 1 1.4-1.4l3.8 3.8 8.8-8.8a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center/16px no-repeat}

/* ── gallery ──────────────────────────────────────────── */
.gal{position:relative}
.gal-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px var(--gut) 18px;margin:0 calc(-1*var(--gut));scrollbar-width:thin;overscroll-behavior-x:contain}
.gal-track:focus-visible{outline-offset:-3px}
.gal-track figure{margin:0;flex:none;scroll-snap-align:center;width:min(86vw,760px)}
.gal-track.phones figure{width:min(62vw,280px)}
.gal-track img{border-radius:var(--r16);box-shadow:var(--sh1);border:1px solid var(--line);width:100%;background:var(--sunk)}
.gal-track figcaption{font-size:.9rem;color:var(--ink2);margin-top:10px}
.gal-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.gal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--ease)}
.gal-nav button:hover{transform:scale(1.06)}
.gal-nav button:active{transform:scale(.94)}
html.no-js .gal-nav{display:none}

/* ── search ───────────────────────────────────────────── */
.search-panel{background:linear-gradient(160deg,#0F6553,#0A4337);color:#fff;border-radius:28px;padding:clamp(24px,5vw,56px);position:relative;isolation:isolate}
.search-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(180deg,#000,transparent);-webkit-mask-image:linear-gradient(180deg,#000,transparent)}
.search-panel h2{color:#fff}
.search-panel .eyebrow{color:#DDF3EC}
.search-panel .eyebrow::before{background:#7FE0C4}
.search-panel p{color:#E8F7F2}
.sform{display:flex;gap:8px;background:#fff;border-radius:var(--pill);padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.25);max-width:720px;transition:box-shadow .3s,transform .3s var(--ease)}
.sform:focus-within{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(127,224,196,.55),0 18px 46px rgba(0,0,0,.3)}
.sform label{flex:1;display:flex;align-items:center;gap:10px;padding-left:14px;min-width:0}
.sform svg{width:20px;height:20px;color:#147A65;flex:none}
.sform input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 1.05rem/1 var(--body);color:#161A18;height:48px}
.sform input::placeholder{color:#636B66}
.sform button{flex:none;border:0;border-radius:var(--pill);background:#147A65;color:#fff;font:600 1rem/1 var(--disp);padding:0 22px;cursor:pointer;min-height:48px;transition:background .2s,transform .2s var(--ease)}
.sform button:hover{background:#0B4A3D}
.sform button:active{transform:scale(.96)}
.sform input:focus-visible{outline:none}
.sform button:focus-visible{outline:3px solid #161A18;outline-offset:2px}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none}
.qchips a{display:inline-block;color:#fff;text-decoration:none;font-size:.9rem;padding:9px 14px;border-radius:var(--pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);transition:background .2s,transform .2s var(--ease)}
.qchips a:hover{background:rgba(255,255,255,.17);transform:translateY(-2px)}
.qchips a:focus-visible{outline-color:#fff}
.search-plain .sform{box-shadow:var(--sh2);border:1px solid var(--line)}
.search-results{min-height:120px}
@media (max-width:479px){.sform{flex-direction:column;border-radius:20px}.sform label{padding:4px 8px}.sform button{width:100%}}

/* ── plans / note boxes ───────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r16);padding:22px}
.plan h3{margin-bottom:4px}
.plan .pk{font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:14px;display:block}
.plan ul{list-style:none;display:grid;gap:8px;font-size:.94rem;color:var(--ink2)}
.plan.top{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo) inset}
.note{border-left:3px solid var(--indigo);background:var(--card);border-radius:0 var(--r16) var(--r16) 0;padding:16px 20px;color:var(--ink2);font-size:.95rem;margin-top:22px}

/* ── browser mock (websites page) ─────────────────────── */
.bmock{background:#fff;color:#161A18;border:1px solid #E5E7E2;border-radius:18px;box-shadow:var(--sh2);overflow:hidden}
.bmock-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#ECEEE9;border-bottom:1px solid #E5E7E2}
.bmock-bar i{width:10px;height:10px;border-radius:50%;background:#D7DAD5}
.bmock-bar .url{margin:0 0 0 8px;flex:1;background:#fff}
.bmock-body{padding:20px}
.bmock-hero{border-radius:12px;background:linear-gradient(135deg,#2C5A79,#163242);color:#fff;padding:20px;margin-bottom:14px}
.bmock-hero b{display:block;font:800 1.4rem/1.1 var(--disp);letter-spacing:-.02em}
.bmock-hero span{font-size:.85rem;opacity:.85}
.bmock .tiles{grid-template-columns:repeat(3,1fr)}
.js-motion .bmock.in .tiles div{animation:tileIn .6s var(--ease) both;animation-delay:calc(var(--i,0)*.12s)}
.js-motion .bmock.in .bmock-hero{animation:pop .7s var(--ease) both}

/* ── faq ──────────────────────────────────────────────── */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r16);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;font:700 1.05rem/1.3 var(--disp);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq .ans{padding:0 22px 20px;color:var(--ink2)}
.faq .ans p:last-child{margin:0}
.js-motion .faq details[open] .ans{animation:lnIn .4s var(--ease)}

/* ── download band ────────────────────────────────────── */
.dl{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.dl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:22px;display:flex;flex-direction:column;gap:14px}
.dl-card .top{display:flex;align-items:center;gap:12px}
.dl-card img{width:48px;height:48px;border-radius:12px}
.dl-card b{font:700 1.1rem/1.2 var(--disp);display:block}
.dl-card small{color:var(--ink2);font-size:.88rem}
.dl-card .play,.dl-card .btn{margin-top:auto;align-self:flex-start}

/* ── contact / about ──────────────────────────────────── */
.cards2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r16);padding:22px}
.box h2,.box h3{font-size:1.2rem}
.box p:last-child{margin:0}
.who-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r16);overflow:hidden;font-size:.95rem}
.who-table th,.who-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair);vertical-align:top}
.who-table th{font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);background:var(--sunk)}
.table-scroll{overflow-x:auto;border-radius:var(--r16)}
.breadcrumb{font:500 .72rem/1.4 var(--mono);letter-spacing:.06em;color:var(--ink2);margin-bottom:18px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li::before{content:"/";margin-right:6px;opacity:.6}
.breadcrumb a{color:var(--ink2)}

/* ── footer ───────────────────────────────────────────── */
.ftr{background:#101214;color:#C9CEC9;padding:clamp(48px,7vw,80px) 0 28px;margin-top:0;--indigo-ink:#8FA0FF}
.ftr a{color:#E6E9E5;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.ftr .brand{color:#F4F5F3}
.ftr .brand small{color:#9AA39E}
.ftr h2{font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9AA39E;margin:0 0 14px}
.ftr ul{list-style:none;display:grid;gap:10px;font-size:.95rem;overflow-wrap:anywhere}
.ftr p{font-size:.92rem;color:#9AA39E}
.ftr-base{border-top:1px solid #2C3134;margin-top:40px;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem;color:#9AA39E}
.ftr :focus-visible{outline-color:#8FA0FF}

/* ── Follow MBM: MBM's official accounts (core/social_accounts.py) ──
   Footer icons (.so) and the /mbm/ buttons (.so-btn). Monochrome on purpose:
   the platforms' brand colours are not site colours. 44 px targets. */
.ftr-follow{margin-top:24px}
.ftr .ftr-social{display:flex;flex-wrap:wrap;gap:8px}
.so{width:44px;height:44px;display:grid;place-items:center;border:1px solid #2C3134;border-radius:var(--r11);transition:border-color .2s,background .2s}
.ftr .so:hover{border-color:#838B85;background:#1D2123;text-decoration:none}
.so svg,.so-btn svg{width:20px;height:20px;flex:none}
.follow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.follow .sec-head{margin-bottom:0}
.follow-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.so-btn{min-height:48px;padding:0 18px;font-size:.95rem}

/* ── reveal on scroll (only when JS + motion are on) ──── */
.js-motion .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js-motion .rv.in{opacity:1;transform:none}
.js-motion .rv-scale{transform:scale(.96) translateY(14px)}
/* hero load-in: CSS only, starts painted (opacity .01) so it never delays LCP */
.js-motion .hi{animation:hiIn .9s var(--ease) both;animation-delay:calc(var(--d,0)*90ms)}
.js-motion .hi-scale{animation-name:hiScale}
@keyframes hiIn{from{opacity:.01;transform:translateY(18px)}}
@keyframes hiScale{from{opacity:.01;transform:scale(.95) translateY(16px)}}

/* ── page transitions (cross-document View Transitions) ─ */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .22s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .38s var(--ease) both}
  @keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .gal-track{scroll-behavior:auto}
}
@media print{.hdr,.ftr,.eco,.gal-nav,#guide-root{display:none}body{background:#fff;color:#000}}
@media (max-width:359px){.brand small{display:none}.hdr-in{gap:8px}}

/* ── creators: /creators/ and its cards on / and /mbm/ ─────────────────
   Facts and labels: mbm design/CREATORS_DESIGN.md (branch ui2/creators).
   The mock screens are light "app screens" in both themes, like .ec above.
   Tints are MBM shopTints (identity colours, always cool), each as its
   (tint, deep) pair from lib/ui2/theme/tokens.dart; the product accent is the
   one shopTint no other product uses, Graphite. PRO is indigoDeep, as the
   app's ProBadge. No money colour is used anywhere in this block.
   Proposed (in neither the prototype nor tokens): --pi-creators dark #B4BAC6. */
:root{--p-creators:#414651;--pi-creators:#414651}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pi-creators:#B4BAC6}}
:root[data-theme="dark"]{--pi-creators:#B4BAC6}
.acc-creators{--acc:var(--p-creators);--acci:var(--pi-creators)}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pi-mini .ic,.pcard .pi .ic{color:#fff}
.t-indigo{--t:#3A4C9E;--t2:#1E2856}.t-steel{--t:#27536E;--t2:#122B3B}.t-plum{--t:#6A3D80;--t2:#3E2050}
.t-graphite{--t:#414651;--t2:#23262D}.t-clay{--t:#7A4A22;--t2:#4A2A0E}.t-sea{--t:#2C5A79;--t2:#163242}

/* the mock app screen */
.cr-stage{margin:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}
.cr-screen{position:relative;z-index:1;width:min(100%,360px);background:#fff;color:#161A18;border:1px solid #E5E7E2;border-radius:26px;padding:12px;box-shadow:0 3px 10px rgba(22,26,24,.14),0 16px 36px rgba(22,26,24,.16);font-size:.8rem;line-height:1.35;text-align:left}
.cr-bar{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}
.cr-bar b{display:block;font:700 .92rem/1.15 var(--disp);letter-spacing:-.01em}
.cr-bar small,.cr-kind,.cr-label{font:500 .56rem/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cr-bar small{display:block;color:#636B66;margin-top:2px}
.cr-bar .ic{width:18px;height:18px;color:#636B66;margin-left:auto}
.cr-head{background:linear-gradient(150deg,var(--t),var(--t2));color:#fff;border-radius:18px;padding:14px}
.cr-id{display:flex;gap:12px;align-items:center}
.cr-av{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;flex:none}
.cr-av .ic{width:22px;height:22px;color:#fff}
.cr-id>div{min-width:0;flex:1}
.cr-name{display:block;font:700 1.02rem/1.15 var(--disp);letter-spacing:-.01em}
.cr-kind{display:block;opacity:.82;margin-top:3px}
.cr-pro{display:inline-flex;align-items:center;gap:4px;font:600 .56rem/1 var(--mono);letter-spacing:.1em;padding:5px 7px;border-radius:var(--pill);background:#232E66;color:#fff;flex:none;white-space:nowrap}
.cr-pro .ic{width:10px;height:10px;stroke-width:2.2}
.cr-head .cr-pro{background:rgba(255,255,255,.22)}
.cr-about{margin:10px 0 0;font-size:.72rem;opacity:.86}
.cr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;list-style:none}
.cr-chips li{font:500 .6rem/1 var(--mono);padding:6px 9px;border-radius:var(--pill);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24)}
.cr-label{display:flex;justify-content:space-between;gap:8px;color:#636B66;margin:14px 4px 8px}
.cr-label span:last-child{color:#3A4C9E}
.cr-svc{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 4px;border-bottom:1px solid #EFF1ED}
.cr-svc span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-svc .mono{font-size:.64rem;color:#636B66;white-space:nowrap}
.cr-work{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none}
.cr-work li{aspect-ratio:1;border-radius:10px;position:relative;overflow:hidden;background:radial-gradient(circle at 72% 28%,rgba(255,255,255,.55) 0 9%,transparent 10%),radial-gradient(120% 62% at 26% 112%,rgba(255,255,255,.26) 0 50%,transparent 51%),radial-gradient(90% 50% at 86% 118%,rgba(255,255,255,.16) 0 50%,transparent 51%),linear-gradient(150deg,var(--t),var(--t2))}
.cr-work li.vid::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23161A18' fill-rule='evenodd' d='M9 7.2v9.6a.8.8 0 0 0 1.2.7l7.6-4.8a.8.8 0 0 0 0-1.4l-7.6-4.8a.8.8 0 0 0-1.2.7Z'/%3E%3C/svg%3E") center/14px no-repeat}
/* floating cards around the screen */
.cr-float{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:min(100%,300px);background:#fff;color:#161A18;border:1px solid #E5E7E2;border-radius:16px;padding:10px 12px;box-shadow:0 2px 6px rgba(22,26,24,.08),0 14px 34px rgba(22,26,24,.14);font-size:.76rem;line-height:1.3;text-align:left}
.cr-float b{display:block;font:700 .82rem/1.2 var(--disp)}
.cr-float small{display:block;color:#636B66;font-size:.66rem;overflow-wrap:anywhere}
.cr-float>div{min-width:0;flex:1}
.cr-fi{width:32px;height:32px;border-radius:10px;background:#EAECF7;color:#3A4C9E;display:grid;place-items:center;flex:none}
.cr-fi .ic{width:18px;height:18px}
.cr-new{font:600 .54rem/1 var(--mono);letter-spacing:.1em;padding:5px 7px;border-radius:var(--pill);background:#EAECF7;color:#232E66;flex:none}
.cr-sw{width:36px;height:22px;border-radius:var(--pill);background:#3A4C9E;position:relative;flex:none}
.cr-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translateX(14px)}
@media (min-width:640px){
  .cr-stage{display:block;padding:34px 0 40px;max-width:520px;margin-inline:auto}
  .cr-screen{margin-inline:auto}
  .cr-stage>.cr-float{position:absolute;width:250px}
  .cr-stage>.cr-f1{top:0;left:0}
  .cr-stage>.cr-f2{bottom:0;right:0}
  .cr-stage.cr-biz{padding-bottom:58px}
}
.js-motion .cr-stage .cr-sw{animation:crSwBg 3.2s var(--ease) both .6s}
.js-motion .cr-stage .cr-sw::after{animation:crSwKnob 3.2s var(--ease) both .6s}
.js-motion .cr-stage .cr-f2{animation:pop .6s var(--ease) both 1.9s}
.js-motion .cr-stage .cr-work li{animation:tileIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*.1s + .5s)}
@keyframes crSwBg{0%,25%{background:#D7DAD5}45%,100%{background:#3A4C9E}}
@keyframes crSwKnob{0%,25%{transform:none}45%,100%{transform:translateX(14px)}}

/* Find creators (the business side) */
.cr-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#ECEEE9;border-radius:12px;padding:3px;margin:0 2px 10px;font:600 .72rem/1 var(--body)}
.cr-seg span{text-align:center;padding:8px 4px;border-radius:9px;color:#636B66}
.cr-seg .on{background:#fff;color:#161A18;box-shadow:0 1px 2px rgba(22,26,24,.08)}
.cr-fchips{display:flex;gap:6px;overflow:hidden;contain:inline-size;margin:0 2px 8px;list-style:none}
.cr-fchips li{flex:none;font:500 .62rem/1 var(--mono);padding:7px 10px;border-radius:var(--pill);border:1px solid #E5E7E2;color:#636B66;white-space:nowrap}
.cr-fchips .on{background:#161A18;border-color:#161A18;color:#fff}
.cr-rows{list-style:none}
.cr-rows li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #EFF1ED}
.cr-rows li:last-child{border-bottom:0}
.cr-rows .cr-av{width:36px;height:36px;border-radius:11px;background:linear-gradient(150deg,var(--t),var(--t2));border:0}
.cr-rows .cr-av .ic{width:18px;height:18px}
.cr-rows li>div{flex:1;min-width:0}
.cr-sk{display:block;height:8px;border-radius:4px;background:#E5E7E2;width:var(--w,70%)}
.cr-sk+.cr-sk{margin-top:7px;background:#EFF1ED}
.cr-rows .ic.chev{width:16px;height:16px;color:#9BA29D}
.cr-cap{font:500 .56rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#636B66;text-align:center;margin:8px 0 2px}

/* how it works, per kind */
.cr-kinds{display:grid;gap:16px}
@media (min-width:900px){.cr-kinds{grid-template-columns:1fr 1fr}}
.cr-kind-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:clamp(20px,3vw,32px);position:relative;overflow:hidden}
.cr-kind-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--t),var(--t2))}
.cr-kind-h{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.cr-kind-h .cr-av{width:52px;height:52px;border-radius:15px;background:linear-gradient(150deg,var(--t),var(--t2));border:0}
.cr-kind-h .cr-av .ic{width:26px;height:26px}
.cr-kind-h h3{margin:0}
.cr-kind-h p{margin:2px 0 0;font:500 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.cr-list{list-style:none;counter-reset:c}
.cr-list li{counter-increment:c;position:relative;padding:0 0 22px 48px}
.cr-list li:last-child{padding-bottom:0}
.cr-list li::before{content:counter(c);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--indigo-line);background:var(--card);display:grid;place-items:center;font:500 .72rem/1 var(--mono);color:var(--indigo-ink)}
.cr-list li::after{content:"";position:absolute;left:15.25px;top:38px;bottom:6px;width:1.5px;background:var(--line)}
.cr-list li:last-child::after{display:none}
.cr-list h4{font-size:1.04rem;margin:5px 0 4px;letter-spacing:-.01em}
.cr-list p{margin:0;color:var(--ink2);font-size:.95rem}
.feat .fi .ic{width:22px;height:22px}

/* Free and Pro */
.cr-cmp-wrap{max-width:920px}
.cr-cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r22);overflow:hidden;font-size:.95rem}
.cr-cmp th,.cr-cmp td{padding:15px 18px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:middle}
.cr-cmp tr:last-child>*{border-bottom:0}
.cr-cmp thead th{vertical-align:bottom;padding-top:22px}
.cr-cmp thead th b{display:block;font:700 1.2rem/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.cr-cmp thead th small{display:block;font:500 .64rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.cr-cmp thead .cr-k{font:500 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.cr-cmp .c{text-align:center;width:22%;font:500 .8rem/1.3 var(--mono);color:var(--ink)}
.cr-cmp .p{background:color-mix(in srgb,var(--indigo-soft) 55%,var(--card))}
.cr-cmp thead .p b{display:inline-flex;align-items:center;gap:6px}
.cr-cmp tbody th{font:600 .98rem/1.35 var(--body)}
.cr-cmp tbody th span{display:block;font:400 .86rem/1.4 var(--body);color:var(--ink2);margin-top:3px}
.cr-cmp .yes .ic{width:20px;height:20px;margin:0 auto;color:var(--indigo-ink);stroke-width:2.2}
.cr-cmp .no{color:var(--ink3)}
@media (max-width:559px){
  .cr-cmp th,.cr-cmp td{padding:12px 10px}
  .cr-cmp .c{width:25%;font-size:.7rem}
  .cr-cmp thead th b{font-size:1rem}
  .cr-cmp tbody th{font-size:.9rem}
  .cr-cmp tbody th span{font-size:.8rem}
}
.cr-free{display:flex;gap:14px;align-items:flex-start;margin-top:16px;max-width:920px;background:var(--card);border:1px solid var(--line);border-radius:var(--r16);padding:18px 20px}
.cr-free .cr-fi{width:40px;height:40px;border-radius:12px;background:var(--indigo-soft);color:var(--indigo-ink)}
.cr-free p{margin:0;color:var(--ink2)}
.cr-free b{color:var(--ink)}

/* how to start */
.cr-start{list-style:none;display:grid;gap:16px;counter-reset:s}
@media (min-width:900px){.cr-start{grid-template-columns:repeat(3,1fr)}}
.cr-start>li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:24px;display:flex;flex-direction:column;gap:6px}
.cr-start>li::before{content:"0" counter(s);font:500 clamp(1.8rem,1.4rem + 1.4vw,2.4rem)/1 var(--mono);letter-spacing:-.04em;color:var(--indigo-ink);margin-bottom:10px}
.cr-start h3{font-size:1.15rem;margin:0}
.cr-start p{margin:0;color:var(--ink2);font-size:.95rem}
.cr-start .cr-demo{margin-top:auto;padding-top:16px}
.cr-tiers{display:grid;gap:6px;list-style:none;font-size:.82rem}
.cr-tiers li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;color:var(--ink2)}
.cr-tiers li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink3);flex:none}
.cr-tiers li.on{border-color:var(--indigo);color:var(--ink);background:color-mix(in srgb,var(--indigo-soft) 60%,var(--card))}
.cr-tiers li.on::before{border:4px solid var(--indigo)}
.cr-start .cr-float{width:100%}
.cr-url{overflow-wrap:anywhere}
.cr-cmp tbody th span.cr-url{display:inline;font:inherit;color:inherit;margin:0}
.split>*{min-width:0}

/* the wide card on the home page, and the /mbm/ section's visual */
.pcard.cr-wide{grid-column:1/-1;display:grid;gap:22px;align-items:center}
@media (min-width:760px){.pcard.cr-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding:28px 32px}}
.cr-wide>div{display:flex;flex-direction:column}
.cr-mini{display:grid;gap:10px;justify-items:stretch;max-width:420px;width:100%;justify-self:center}
.cr-mini .cr-screen{width:100%;padding:10px;border-radius:20px;box-shadow:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.06)}
.cr-mini .cr-float{width:100%;box-shadow:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.06)}
.cr-mini .cr-work{grid-template-columns:repeat(4,1fr)}

/* ── AI Websites: /websites/ (branch site/websites-showcase) ─────────────
   The accent is acc-sites (shopTint steel-sea #2C5A79), as before. Mock
   screens are light "app screens" in both themes, like .ec and .cr-screen.
   Tints are the shopTints pairs above (.t-*). No money colour here: the
   mock site's buttons are ink and indigo, never credit green. */
.ws-hl{color:var(--acci)}
.ws-appicon{width:64px;height:64px;border-radius:16px;font-size:.8rem}
/* phones: the product name on one compact line, so the H1 and the mock start
   higher; the CTAs stack full width (nothing fixed at the screen's corners
   lands on a narrow button edge) */
@media (max-width:599px){
  .ws-hero{padding-top:18px}
  .ws-hero .breadcrumb{margin-bottom:12px}
  .ws-hero .app-id{gap:10px;margin-bottom:14px}
  .ws-hero .ws-appicon{width:36px;height:36px;border-radius:10px;font-size:.5rem}
  .ws-hero .app-id .tag{display:none}
  .ws-hero .app-id .nm{font-size:1rem}
  .ws-hero h1{margin-bottom:.4em}
  .ws-hero .lead{margin-bottom:22px}
  .ws-hero .cta-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .ws-hero .cta-row .btn{width:100%}
  .ws-hero .hero-meta{margin-top:16px;gap:6px 14px}
  .ws-hero .split{gap:24px}
  .ws-scene>.ws-f1{order:2}     /* the phone first: the visual starts right under the text */
  .ws-scene>.ws-phone{order:1}
  .ws-scene>.ws-f2{order:3}
}
.ws-addr-inline{font-size:.85em;overflow-wrap:anywhere}
.ws-sk{display:block;height:7px;border-radius:4px;background:#E5E7E2;width:var(--w,60%);flex:none}

/* browser bar + address (hero, cards) */
.ws-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#ECEEE9;border-bottom:1px solid #E5E7E2}
.ws-bar>i{width:8px;height:8px;border-radius:50%;background:#D2D6D0;flex:none}
.ws-addr{display:flex;align-items:center;gap:5px;flex:1;min-width:0;margin-left:4px;background:#fff;border-radius:var(--pill);padding:5px 9px;font:500 .58rem/1.1 var(--mono);color:#4F5752;white-space:nowrap;overflow:hidden}
.ws-addr>span{overflow:hidden;text-overflow:ellipsis}
.ws-addr .ic{width:11px;height:11px;stroke-width:2.2;color:#147A65}

/* hero stage: phone (+ desktop window when there is room) */
.ws-stage{margin:0;container-type:inline-size;min-width:0}
.ws-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}
.ws-desk{display:none}
.ws-phone{position:relative;z-index:2;width:min(100%,300px);background:#161A18;border-radius:38px;padding:9px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 3px 10px rgba(22,26,24,.18),0 22px 48px rgba(22,26,24,.22);color:#161A18}
.ws-scr{background:#F4F5F3;border-radius:30px;overflow:hidden;padding-bottom:12px;font-size:.78rem;line-height:1.3}
.ws-bar-m{padding:12px 12px 8px;border:0;background:#F4F5F3}
.ws-bar-m .ws-addr{margin:0;justify-content:center;padding:7px 10px}
.ws-head{display:flex;align-items:center;gap:10px;margin:2px 10px 0;padding:14px 12px;border-radius:18px;background:linear-gradient(150deg,var(--t),var(--t2));color:#fff}
.ws-head>div{flex:1;min-width:0}
.ws-head b{display:block;font:800 1.02rem/1.1 var(--disp);letter-spacing:-.02em}
.ws-head small{display:block;font-size:.66rem;opacity:.84;margin-top:2px}
.ws-lg{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;font:800 1rem/1 var(--disp);color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)}
.ws-lg.t-sea,.ws-lg.t-plum{background:linear-gradient(150deg,var(--t),var(--t2));border:0}
.ws-open{font:600 .56rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:var(--pill);background:rgba(255,255,255,.2);flex:none}
.ws-search{display:flex;align-items:center;gap:7px;margin:10px 10px 0;padding:8px 11px;background:#fff;border:1px solid #E5E7E2;border-radius:var(--pill);color:#636B66;font-size:.7rem}
.ws-search .ic{width:13px;height:13px}
.ws-cats{display:flex;gap:5px;list-style:none;margin:9px 10px 2px;overflow:hidden}
.ws-cats li{flex:none;font:500 .58rem/1 var(--mono);padding:6px 8px;border-radius:var(--pill);border:1px solid #E5E7E2;color:#636B66;background:#fff}
.ws-cats .on{background:#161A18;border-color:#161A18;color:#fff}
.ws-items{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 10px 0}
.ws-items li{background:#fff;border:1px solid #E5E7E2;border-radius:14px;padding:7px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 4px;align-items:end;min-width:0}
.ws-art{grid-column:1/-1;aspect-ratio:16/10;border-radius:10px;background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.5) 0 10%,transparent 11%),radial-gradient(120% 70% at 30% 115%,rgba(255,255,255,.24) 0 50%,transparent 51%),linear-gradient(150deg,var(--t),var(--t2))}
.ws-nm{font:600 .66rem/1.2 var(--body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-nm small{display:block;font:500 .5rem/1.3 var(--mono);color:#636B66;letter-spacing:.04em;margin-top:2px}
.ws-add{font:600 .56rem/1 var(--mono);padding:6px 7px;border-radius:8px;border:1px solid #DDE1F2;color:#232E66;background:#EAECF7}
.ws-qty{background:#3A4C9E;border-color:#3A4C9E;color:#fff;min-width:22px;text-align:center}
.ws-cart{display:flex;align-items:center;gap:8px;margin:10px 10px 0;padding:8px 8px 8px 10px;border-radius:16px;background:#161A18;color:#fff;font-size:.66rem}
.ws-cart>span:nth-child(2){flex:1;min-width:0;opacity:.8}
.ws-cnt{width:20px;height:20px;border-radius:50%;background:#fff;color:#161A18;display:grid;place-items:center;font:600 .62rem/1 var(--mono);flex:none}
.ws-cart b{font:700 .7rem/1 var(--disp);background:#3A4C9E;padding:8px 10px;border-radius:11px;white-space:nowrap}
.ws-wa{display:flex;justify-content:center;align-items:center;gap:5px;margin:8px 0 0;font:500 .56rem/1 var(--mono);letter-spacing:.04em;color:#636B66}
.ws-wa .ic{width:12px;height:12px}
.ws-float{position:relative;z-index:3;display:flex;align-items:center;gap:10px;width:min(100%,300px);background:#fff;color:#161A18;border:1px solid #E5E7E2;border-radius:16px;padding:10px 12px;box-shadow:0 2px 6px rgba(22,26,24,.08),0 14px 34px rgba(22,26,24,.14);font-size:.74rem;line-height:1.3;text-align:left}
.ws-float>div{flex:1;min-width:0}
.ws-float b{display:block;font:700 .8rem/1.2 var(--disp)}
.ws-float small{display:block;color:#636B66;font-size:.64rem}
.ws-float .ws-crumb{font:500 .56rem/1.3 var(--mono);color:#147A65;overflow-wrap:anywhere}
.ws-fi{width:32px;height:32px;border-radius:10px;background:#EAECF7;color:#3A4C9E;display:grid;place-items:center;flex:none}
.ws-fi .ic{width:17px;height:17px}
.ws-new{font:600 .54rem/1 var(--mono);letter-spacing:.1em;padding:5px 7px;border-radius:var(--pill);background:#EAECF7;color:#232E66;flex:none}
@container (min-width:540px){
  .ws-scene{display:block;height:580px;max-width:600px;margin-inline:auto}
  .ws-desk{display:block;position:absolute;left:0;top:0;width:calc(100% - 140px);background:#fff;color:#161A18;border:1px solid #E5E7E2;border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(22,26,24,.08),0 18px 40px rgba(22,26,24,.14);font-size:.74rem;line-height:1.3}
  .ws-phone{position:absolute;right:0;top:48px;width:248px}
  .ws-scene>.ws-float{position:absolute;width:276px}
  .ws-scene>.ws-f1{left:0;bottom:84px}
  .ws-scene>.ws-f2{left:36px;bottom:6px}
}
.ws-desk-body{padding:12px 14px 16px}
.ws-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ws-nav b{font:800 .86rem/1 var(--disp);letter-spacing:-.02em;margin-right:auto}
.ws-nav .ws-lg{width:26px;height:26px;border-radius:8px;font-size:.78rem}
.ws-pill{display:inline-flex;align-items:center;gap:5px;font:600 .58rem/1 var(--mono);padding:6px 9px;border-radius:var(--pill);background:#161A18;color:#fff}
.ws-pill .ic{width:12px;height:12px}
.ws-band{border-radius:12px;padding:22px 18px;background:radial-gradient(60% 120% at 90% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(135deg,var(--t),var(--t2));color:#fff}
.ws-band b{display:block;font:800 1.5rem/1.05 var(--disp);letter-spacing:-.03em}
.ws-band>span{font-size:.74rem;opacity:.86}
.ws-btns{display:flex;gap:8px;margin-top:14px}
.ws-btns span{display:inline-flex;align-items:center;gap:5px;font:700 .66rem/1 var(--disp);padding:8px 12px;border-radius:var(--pill)}
.ws-b1{background:#fff;color:#161A18}
.ws-b2{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.ws-b2 .ic{width:12px;height:12px}
.ws-lbl{font:500 .54rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#636B66;margin:14px 0 8px}
.ws-tiles{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font:600 .62rem/1.2 var(--body)}
.ws-tiles li{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-tiles span{display:block;aspect-ratio:1;border-radius:9px;margin-bottom:5px;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.5) 0 11%,transparent 12%),linear-gradient(150deg,var(--t),var(--t2))}
.js-motion .ws-scene .ws-items li,.js-motion .ws-scene .ws-tiles li{animation:tileIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*.12s + .5s)}
.js-motion .ws-scene .ws-f1{animation:pop .6s var(--ease) both 1.1s}
.js-motion .ws-scene .ws-cart{animation:wsUp .6s var(--ease) both 1.5s}
.js-motion .ws-scene .ws-cnt{animation:pop .5s var(--ease) both 1.9s}
.js-motion .ws-scene .ws-f2{animation:pop .6s var(--ease) both 2.4s}
@keyframes wsUp{from{opacity:0;transform:translateY(12px)}}

/* Built with MBM: the showcase */
.ws-built-head{display:grid;gap:4px 32px;align-items:end;margin-bottom:clamp(20px,3vw,32px)}
.ws-built-head .sec-head{margin-bottom:0}
@media (min-width:1000px){.ws-built-head{grid-template-columns:minmax(0,1fr) 320px}}
.ws-note{margin:0;font:500 .7rem/1.5 var(--mono);letter-spacing:.03em;color:var(--ink2)}
.ws-track{list-style:none;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
@media (max-width:699px){
  .ws-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,300px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:4px var(--gut) 14px;margin-inline:calc(-1*var(--gut));scrollbar-width:none}
  .ws-track::-webkit-scrollbar{display:none}
}
.ws-item{min-width:0;scroll-snap-align:start;display:flex}
.ws-card{position:relative;display:flex;flex-direction:column;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:10px 10px 16px;color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
a.ws-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--p-sites) 40%,var(--line));text-decoration:none}
a.ws-card:focus-visible{outline-offset:2px;border-radius:var(--r22)}
.ws-frame{border-radius:14px;overflow:hidden;border:1px solid #E5E7E2;background:#fff}
.ws-shot{position:relative;aspect-ratio:2/1;overflow:hidden;background:linear-gradient(150deg,var(--t,#2C5A79),var(--t2,#163242))}
.ws-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.ws-card:hover .ws-shot img{transform:scale(1.04)}
.ws-mini{position:absolute;inset:0;padding:14px 14px 12px 76px;color:#fff;display:flex;flex-direction:column;gap:7px;background:radial-gradient(70% 120% at 100% 0%,rgba(255,255,255,.16),transparent 60%)}
.ws-mini b{font:800 1.05rem/1.1 var(--disp);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-mini .ws-sk{background:rgba(255,255,255,.4)}
.ws-mini ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:auto}
.ws-mini li{aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.2)}
.ws-shot.has-img .ws-mini{display:none}
.ws-badge{position:absolute;z-index:2;top:9px;right:9px;font:600 .56rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:var(--pill);background:rgba(255,255,255,.92);color:#161A18}
.ws-meta{display:flex;gap:12px;align-items:flex-start;padding:0 6px;margin-top:-26px;position:relative;z-index:2}
.ws-meta>div{min-width:0;flex:1;padding-top:32px}
.ws-logo{width:54px;height:54px;border-radius:16px;flex:none;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,var(--t,#2C5A79),var(--t2,#163242));color:#fff;font:800 1.3rem/1 var(--disp);border:3px solid var(--card);box-shadow:0 2px 8px rgba(22,26,24,.18)}
.ws-logo img{width:100%;height:100%;object-fit:cover;background:#fff}
.ws-logo .ic{width:24px;height:24px}
.ws-name{font-size:1.08rem;margin:0 0 3px;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-line{margin:0;color:var(--ink2);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-visit{display:inline-flex;align-items:center;gap:7px;margin:14px 6px 0;font:600 .92rem/1 var(--disp);color:var(--acci,var(--pi-sites))}
.ws-visit .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
a.ws-card:hover .ws-visit .ic{transform:translate(2px,-2px)}
.ws-built{--acci:var(--pi-sites)}
.ws-example .ws-card{border-style:dashed}
.ws-example .ws-meta>div{opacity:.92}
.js-motion .ws-live{animation:tileIn .55s var(--ease) both;animation-delay:calc(var(--i,0)*.06s)}
.ws-built-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(22px,3vw,32px);padding:18px 20px;border:1px solid var(--line);border-radius:var(--r22);background:color-mix(in srgb,var(--card) 70%,transparent)}
.ws-built-cta p{margin:0;font:700 clamp(1.1rem,1rem + .5vw,1.35rem)/1.2 var(--disp);letter-spacing:-.02em}

/* Why a website: three moments */
.ws-why{display:grid;gap:16px}
@media (min-width:900px){.ws-why{grid-template-columns:repeat(3,1fr)}}
.ws-moment{background:var(--paper);border:1px solid var(--line);border-radius:var(--r22);padding:12px 12px 22px;display:flex;flex-direction:column}
.ws-moment h3{margin:20px 10px 6px;font-size:1.2rem}
.ws-moment p{margin:0 10px;color:var(--ink2);font-size:.95rem}
.ws-demo{min-height:184px;border-radius:16px;padding:16px;display:grid;align-content:center;background:radial-gradient(80% 90% at 20% 0%,color-mix(in srgb,var(--p-sites) 22%,transparent),transparent 70%),var(--sunk);font-size:.74rem;line-height:1.3;color:#161A18}
.ws-serp{background:#fff;border:1px solid #E5E7E2;border-radius:14px;padding:10px;box-shadow:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.06)}
.ws-q{display:flex;align-items:center;gap:7px;border:1.5px solid #2C5A79;border-radius:var(--pill);padding:7px 10px;font-size:.72rem;margin-bottom:8px}
.ws-q .ic{width:13px;height:13px;color:#2C5A79}
.ws-res{display:grid;gap:5px;padding:8px 6px;border-radius:10px}
.ws-res+.ws-res{border-top:1px solid #EFF1ED;border-radius:0}
.ws-res.on{background:#EAECF7}
.ws-res small{font:500 .56rem/1.2 var(--mono);color:#147A65}
.ws-res b{font:700 .8rem/1.2 var(--disp);color:#232E66}
.ws-chat{display:grid;gap:7px;justify-items:end}
.ws-msg{margin:0;max-width:88%;background:#fff;border:1px solid #E5E7E2;border-radius:14px 14px 4px 14px;padding:8px 10px;font-size:.72rem;box-shadow:0 1px 2px rgba(22,26,24,.05)}
.ws-link{display:flex;align-items:center;gap:9px;width:88%}
.ws-link>div{min-width:0}
.ws-link b{display:block;font:700 .78rem/1.2 var(--disp)}
.ws-link small{display:block;font:500 .56rem/1.3 var(--mono);color:#147A65;overflow-wrap:anywhere}
.ws-link .ws-lg{width:32px;height:32px;font-size:.85rem;border-radius:10px}
.ws-in{justify-self:start;border-radius:14px 14px 14px 4px;background:#EAECF7;border-color:#DDE1F2;color:#232E66}
.ws-notes{list-style:none;display:grid;gap:8px}
.ws-notes li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E5E7E2;border-radius:14px;padding:10px 12px;box-shadow:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.06)}
.ws-notes li>div{min-width:0}
.ws-notes b{display:block;font:700 .82rem/1.2 var(--disp)}
.ws-notes small{display:block;color:#636B66;font-size:.66rem}

/* How it works: step icons on the shared flow-list */
.ws-flow li{padding-top:20px}
.ws-flow li::before{position:absolute;top:22px;right:22px;margin:0}
.ws-step{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:color-mix(in srgb,var(--p-sites) 14%,var(--card));color:var(--acci)}
.ws-step .ic{width:22px;height:22px}

/* What you get: the offer card */
.ws-offer{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r22);padding:clamp(20px,3vw,30px);box-shadow:var(--sh1)}
.ws-offer::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#2C5A79,#163242)}
.ws-offer-top{display:flex;align-items:center;gap:14px}
.ws-offer-top h3{margin:0;font-size:1.35rem}
.ws-offer-i{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(150deg,#2C5A79,#163242);color:#fff;flex:none}
.ws-offer-i .ic{width:28px;height:28px}
.ws-k{margin:0 0 4px;font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acci,var(--pi-sites))}
#get{--acci:var(--pi-sites)}
.ws-addr-big{margin:20px 0 18px;padding:12px 14px;border-radius:var(--r11);background:var(--card);border:1px solid var(--line);font-size:clamp(.82rem,.7rem + .6vw,1rem);overflow-wrap:anywhere}
.ws-addr-big span{color:var(--ink2)}
.ws-offer-list{list-style:none;display:grid;gap:10px;margin-bottom:18px}
.ws-offer-list li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.ws-offer-list .ic{width:20px;height:20px;color:var(--acci,var(--pi-sites));margin-top:1px}
.ws-price{margin:0 0 16px;font:500 .74rem/1.5 var(--mono);color:var(--ink2)}
.ws-have{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--ink2);font-size:.92rem}
.ws-have b{color:var(--ink)}

/* closing call to action */
.ws-end{isolation:isolate;text-align:center}
.ws-end-glow{position:absolute;inset:-40% -20% auto;height:140%;background:radial-gradient(40% 50% at 50% 30%,rgba(134,188,224,.22),transparent 70%)}
.ws-end-in{display:grid;justify-items:center}
.ws-end-in .eyebrow{justify-content:center;--acc:#86BCE0}
.ws-end h2{max-width:16em}
.ws-end .lead{margin-inline:auto;margin-bottom:26px}
.ws-end .play{background:#F4F5F3;color:#161A18;border-color:#F4F5F3}
.ws-end-note{margin:16px 0 0;font-size:.7rem;color:#9AA39E}