/* ---- ogir.css ---- */
/* OGIR website, shared stylesheet. Lane WEB-3 Part B, 18 Oct 2026.
   Look, Part B: "the conversation is the page" (DESIGN.md section 9). Tokens from DESIGN.md section 4. */
@font-face{font-family:'Clash Display';src:url(../fonts/clash-display-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Display';src:url(../fonts/clash-display-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-var.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --green-600:#16A34A; --green-700:#15803D; --green-800:#166534; --green-tint:#E8F7EE; --green-bright:#22C55E;
  --ink:#0C1210; --text:#1F2937; --text-2:#374151; --muted:#5B6470; --line:#E3E7E5; --bg:#FFFFFF; --bg-2:#F6F8F7;
  --wa-bg:#EFEAE2; --wa-out:#D9FDD3; --wa-head:#075E54; --wa-link:#027EB5;
  --blue:#1D4ED8; --amber:#B45309; --violet:#6D28D9; --pink:#BE185D; --teal:#0F766E;
  --accent:var(--green-700); --accent-tint:var(--green-tint); --accent-ink:var(--green-800);
  --r-s:8px; --r-m:14px; --r-l:24px; --r-pill:999px;
  --device-shadow:0 1px 2px rgba(12,18,16,.08),0 12px 28px rgba(12,18,16,.10),0 40px 80px -24px rgba(12,18,16,.22);
  --display:'Clash Display',ui-sans-serif,system-ui,sans-serif; --body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --wrap:1200px; --nav-h:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 64px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--body);color:var(--text);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
input[type=range]{touch-action:manipulation}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:#BBF7D0;color:var(--ink)}
h1,h2{font-family:var(--display);font-weight:600;color:var(--ink);word-spacing:.06em;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,66px);line-height:1.03;letter-spacing:-.02em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.015em}
h3{font-family:var(--body);font-weight:600;font-size:20px;line-height:1.3;color:var(--ink);letter-spacing:-.005em}
p{max-width:64ch}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--text-2)}
.muted{color:var(--muted)}
.num,.price,.bill b,.tot{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-s);font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:104px 0}
.head{max-width:740px;margin-bottom:44px}
.head p{margin-top:14px}
.head.c{margin-left:auto;margin-right:auto;text-align:center}
.head.c p{margin-left:auto;margin-right:auto}
.tint{background:var(--bg-2)}
.green{background:var(--green-tint)}
.ink{background:var(--ink);color:#C9D1CD}
.ink h2,.ink h3{color:#fff}
.ink .lead{color:#C9D1CD}
.wall{background:var(--wa-bg)}
@media (max-width:720px){section{padding:72px 0}.wrap{padding:0 16px}.head{margin-bottom:32px}}

/* draft bar */
.draft{background:#FEF3C7;color:#78350F;font-size:13px;font-weight:500;padding:8px 16px;text-align:center;line-height:1.5}
.draft ul{display:inline-flex;flex-wrap:wrap;gap:4px 14px;list-style:none;justify-content:center;margin-left:8px}
.draft a{color:#78350F}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font:600 16px/1 var(--body);border:1.5px solid transparent;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:#fff;color:var(--ink);border-color:#CDD3D0}
.btn-ghost:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--green-tint)}
.btn-bright{background:var(--green-bright);color:var(--ink)}
.btn-bright:hover{background:#4ADE80}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.tlink{font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;min-height:44px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.logo{font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:flex-start;min-height:44px;align-items:center}
.logo i{width:7px;height:7px;border-radius:50%;background:var(--green-600);margin:-12px 0 0 2px}
.nav-links{display:flex;gap:6px;list-style:none}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--text-2);font-weight:500;font-size:15px;text-decoration:none;border-radius:var(--r-s)}
.nav-links a:hover{color:var(--ink);background:var(--bg-2)}
.nav-links a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{min-height:44px;font-size:15px;padding:0 18px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.mnav{display:none;position:fixed;inset:var(--nav-h) 0 auto 0;z-index:49;background:#fff;border-bottom:1px solid var(--line);padding:8px 16px 20px}
.mnav.open{display:block}
.mnav ul{list-style:none}
.mnav li a{display:flex;align-items:center;min-height:52px;font-size:18px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .btns{margin-top:16px}
@media (max-width:980px){.nav-links,.nav-cta .btn-ghost{display:none}.menu-btn{display:flex}}
@media (max-width:520px){.nav-cta .btn-primary{display:none}}

/* hero */
.hero{padding:72px 0 88px;overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{max-width:13ch}
.hero .lead{margin:22px 0 30px;max-width:46ch}
.hero.short{padding:64px 0 56px}
.hero.short .wrap{grid-template-columns:1fr}
.hero.short h1{max-width:18ch}
.home-hero .wrap{grid-template-areas:"copy stage" "scan stage";grid-template-rows:auto 1fr;row-gap:0}
.home-hero .copy{grid-area:copy;align-self:end}.home-hero .stage{grid-area:stage}.home-hero .scan{grid-area:scan;align-self:start}
@media (max-width:960px){.home-hero .wrap{grid-template-areas:"copy" "stage" "scan";row-gap:0}.home-hero .stage{margin-top:36px}}
@media (max-width:960px){.hero{padding:44px 0 64px}.hero .wrap{grid-template-columns:1fr;gap:40px}}

/* the signature: chat stage */
.stage{position:relative;background:var(--wa-bg);border-radius:32px;padding:40px 28px 24px;min-height:660px;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;overflow:hidden}
.stage .browser{position:absolute;top:48px;left:46%;width:620px;z-index:0}
.stage .pwrap{position:relative;z-index:1}
.home-hero .stage .pwrap,.home-hero .stage .cap{margin-right:200px}
@media (max-width:960px){.home-hero .stage .pwrap,.home-hero .stage .cap{margin-right:0}}
.stage .cap{position:relative;z-index:1;margin:10px 0 0;font-size:13.5px;color:#4F493F;text-align:center;line-height:1.4;max-width:34ch}

@media (max-width:960px){.stage{min-height:0;padding:28px 12px 20px;border-radius:24px}.stage .browser{display:none}.stage .pwrap,.stage .cap{margin-right:0}}

/* browser frame for real app screens */
.browser{filter:drop-shadow(0 12px 20px rgba(12,18,16,.10)) drop-shadow(0 30px 40px rgba(12,18,16,.10))}
.browser img{border:1px solid #D3D9D6;border-top:0;border-radius:0 0 14px 14px;background:#fff}
.browser .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#F1F3F2;border:1px solid #D3D9D6;border-radius:14px 14px 0 0}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#D1D6D4}
.browser .bar span{margin-left:10px;font-size:12px;color:#4B5560;background:#fff;border-radius:6px;padding:3px 10px;flex:1;max-width:280px;white-space:nowrap;overflow:hidden}
.browser img{width:100%}
figure.app figcaption{font-size:14px;color:var(--muted);margin-top:12px}

/* phone */
.pwrap{width:min(320px,100%)}
.phone{width:100%;border-radius:44px;background:#121815;padding:10px;filter:drop-shadow(0 14px 22px rgba(12,18,16,.16)) drop-shadow(0 34px 44px rgba(12,18,16,.14));flex:none}
.phone-screen{border-radius:35px;overflow:hidden;background:var(--wa-bg);height:580px;display:flex;flex-direction:column}
.wa-top{background:var(--wa-head);color:#fff;padding:18px 14px 10px;display:flex;align-items:center;gap:10px}
.wa-av{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--wa-head);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.wa-top b{display:block;font-size:15px;line-height:1.25}
.wa-top small{font-size:12px;opacity:.9;display:block}
.wa-body{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{max-width:86%;padding:7px 9px 5px;border-radius:10px;font-size:14px;line-height:1.42;color:#111B21;white-space:pre-line;overflow-wrap:anywhere}
.msg.in{background:#fff;align-self:flex-start;border-top-left-radius:0}
.msg.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:0}
.msg.sys{align-self:center;background:#FFF8E1;color:#4B4436;font-size:12.5px;border-radius:8px;box-shadow:none;text-align:center;max-width:92%}
.msg time{display:block;text-align:right;font-size:11px;color:#56636B;margin-top:1px}
.msg .doc{display:flex;align-items:center;gap:10px;background:#F5F6F6;border-radius:8px;padding:10px;margin:-2px -4px 4px}
.msg .doc svg{width:28px;height:28px;color:#C0392B;flex:none}
.msg .doc b{font-size:13.5px;font-weight:600;display:block}
.msg .doc small{font-size:12px;color:#56636B}
.qr-btns{display:flex;flex-direction:column;gap:4px;align-self:flex-start;width:86%}
.qr-btns button{min-height:44px;border:0;background:#fff;color:var(--wa-link);font:500 14px var(--body);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color .15s}
.qr-btns button:hover{background:#F5F6F6}
.qr-btns button[disabled]{color:#56636B;cursor:default}
.qr-btns button.picked{background:#E7F3FB;color:#0B5C8A;font-weight:600}
.qr-btns button svg{width:16px;height:16px}
.typing{align-self:flex-start;background:#fff;border-radius:10px;border-top-left-radius:0;padding:10px 12px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#8696A0;animation:dot 1.1s 3}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.wa-input{background:#F0F2F5;padding:8px 10px 14px;display:flex;gap:8px;align-items:center}
.wa-input span{flex:1;background:#fff;border-radius:20px;padding:9px 14px;font-size:14px;color:#56636B}
.wa-input i{width:38px;height:38px;border-radius:50%;background:var(--wa-head);display:grid;place-items:center;color:#fff;flex:none}
.wa-input i svg{width:18px;height:18px}
.replay{display:flex;justify-content:center;margin-top:14px}
.replay[hidden]{display:none}
.replay button{min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(12,18,16,.18);background:rgba(255,255,255,.7);font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.replay button svg{width:16px;height:16px}
@keyframes dot{0%,60%,100%{opacity:.4;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.js .msg.new,.js .qr-btns.new{animation:msgIn .28s ease-out both}
/* Instagram variant */
.phone.ig .phone-screen{background:#fff}
.phone.ig .wa-top{background:#fff;color:#0C1210;border-bottom:1px solid #EFEFEF}
.phone.ig .wa-av{background:#BE185D;color:#fff}
.phone.ig .msg{box-shadow:none;border-radius:18px;padding:9px 13px}
.phone.ig .msg.in{background:#EFEFEF;border-top-left-radius:18px;border-bottom-left-radius:4px}
.phone.ig .msg.out{background:#5B3BE8;color:#fff;border-top-right-radius:18px;border-bottom-right-radius:4px}
.phone.ig .msg.out time{color:#E4DEFF}
.phone.ig .msg.sys{background:#F3F4F6;color:#374151}
.phone.ig .qr-btns button{background:#fff;border:1px solid #DBDBDB;box-shadow:none;color:#0C1210;font-weight:600;border-radius:12px}
.phone.ig .wa-input{background:#fff;border-top:1px solid #EFEFEF}
.phone.ig .wa-input span{border:1px solid #DBDBDB}
.phone.ig .wa-input i{background:#5B3BE8}
.phone.sm .phone-screen{height:520px}

/* scan to try */
.scan{display:flex;gap:16px;align-items:center;margin-top:30px;padding:14px 16px 14px 14px;border:1px dashed #B7BFBB;border-radius:var(--r-m);max-width:430px}
.scan svg{width:84px;height:84px;flex:none;background:#fff;padding:6px;border-radius:8px;border:1px solid var(--line)}
.scan b{display:block;color:var(--ink);font-size:16px}
.scan p{font-size:14px;color:var(--muted);line-height:1.45;margin-top:2px}
.scan .small,.scan .scan-link{display:none}
.scan .scan-link{margin-top:10px;min-height:44px}
@media (max-width:720px){.scan svg,.scan .big{display:none}.scan .small,.scan .scan-link{display:inline-flex}.scan .small{display:block}}
.scan .flag{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:#92400E;background:#FEF3C7;border-radius:6px;padding:2px 8px}

/* proof */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:#fff}
.proof ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center}
.proof li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--text-2)}
.proof li svg{width:20px;height:20px;color:var(--green-700);flex:none}
.proof a{color:var(--text-2)}

/* problems: three messages nobody answered */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.prob{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:14px}
.prob+.prob{padding-left:28px;border-left:1px solid var(--line)}
.prob .said{align-self:flex-start;background:#fff;border:1px solid #E4E0D8;border-radius:12px;border-top-left-radius:0;padding:9px 12px 6px;font-size:15px;color:#111B21;max-width:30ch}
.prob .said small{display:flex;justify-content:flex-end;gap:4px;align-items:center;font-size:12px;color:#56636B;margin-top:2px}
.prob .said small svg{width:15px;height:15px;color:#8696A0}
.prob h3{margin-top:6px}
.prob p{color:var(--text-2);font-size:16px}
.prob .fix{display:flex;gap:10px;font-size:16px;color:var(--ink);font-weight:500;padding-top:14px;border-top:1px dashed #CDD3D0;margin-top:auto}
.prob .fix svg{width:20px;height:20px;color:var(--green-700);flex:none;margin-top:3px}
@media (max-width:900px){.probs{grid-template-columns:1fr}.prob,.prob+.prob{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* bento: one card per job, tiny looping real screen */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bc{position:relative;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);padding:24px 24px 0;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;min-height:340px;transition:border-color .15s}
.bc:hover{border-color:#9CA8A2}
.bc .t{display:flex;gap:10px;align-items:center}
.bc .t svg{width:22px;height:22px;color:var(--c,var(--green-700));flex:none}
.bc p{font-size:15.5px;color:var(--text-2);margin-top:6px;max-width:44ch}
.bc .go{font-size:15px;font-weight:600;color:var(--c,var(--green-700));margin-top:10px;display:inline-flex;min-height:28px;align-items:center}
.bc .win{margin-top:auto;margin-left:-1px;margin-right:-25px;height:190px;border-top-left-radius:12px;overflow:hidden;border:1px solid #D9DEDB;border-right:0;border-bottom:0;background:#F6F7F6;position:relative}
.bc .win img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
.bc.w4{grid-column:span 4}.bc.w3{grid-column:span 3}.bc.w2{grid-column:span 2}
.bc.w4 .win{height:230px}
.bc.dark{background:var(--ink);border-color:var(--ink)}
.bc.dark h3{color:#fff}.bc.dark p{color:#C9D1CD}.bc.dark .go{color:#86EFAC}.bc.dark .t svg{color:#86EFAC}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.bc.w4,.bc.w3,.bc.w2{grid-column:span 2}}
@media (min-width:640px) and (max-width:980px){.bc.w2,.bc.w3{grid-column:span 1}}
/* the loops (transform only, run while on screen) */
.bc .win img{width:var(--w,100%)}
.loop img{animation:pan 9s cubic-bezier(.45,0,.25,1) infinite alternate;animation-play-state:paused;transform:translate(0,0) scale(var(--s1,1))}
.loop.on img{animation-play-state:running}
@keyframes pan{from{transform:translate(0,0) scale(var(--s1,1))}to{transform:translate(var(--x2,0),var(--y2,0)) scale(var(--s2,1))}}
.ping{position:absolute;right:16px;bottom:14px;background:#fff;border-radius:10px;border-top-right-radius:0;padding:7px 10px;font-size:13px;color:#111B21;box-shadow:0 2px 8px rgba(12,18,16,.18);max-width:70%;opacity:0;transform:translateY(8px);animation:pingIn 9s ease-out infinite;animation-play-state:paused}
.ping.wa{background:#fff;right:auto;left:16px;border-top-right-radius:10px;border-top-left-radius:0}
.loop.on .ping{animation-play-state:running}
@keyframes pingIn{0%,18%{opacity:0;transform:translateY(8px)}24%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

/* feature tabs with real app screens */
.ftabs{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
.ftabs [role=tablist]{display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--nav-h) + 24px)}
.ftabs [role=tab]{text-align:left;border:1px solid transparent;background:none;border-radius:var(--r-m);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;min-height:56px;transition:background-color .15s,border-color .15s}
.ftabs [role=tab] svg{width:22px;height:22px;color:var(--muted);flex:none;margin-top:1px}
.ftabs [role=tab] b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.ftabs [role=tab] small{display:block;font-size:14.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.ftabs [role=tab]:hover{background:var(--bg-2)}
.ftabs [role=tab][aria-selected=true]{background:#fff;border-color:var(--line)}
.ftabs [role=tab][aria-selected=true] svg{color:var(--accent)}
.tint .ftabs [role=tab][aria-selected=true],.green .ftabs [role=tab][aria-selected=true]{background:#fff}
.ftabs [role=tabpanel]:focus-visible{outline-offset:6px}
.js .ftabs [role=tabpanel][hidden]{display:none}
.no-js .ftabs [role=tablist]{display:none}
.ftabs [role=tabpanel]+[role=tabpanel]{margin-top:48px}
.js .ftabs [role=tabpanel]+[role=tabpanel]{margin-top:0}
@media (max-width:960px){.ftabs{grid-template-columns:1fr;gap:24px}.ftabs [role=tablist]{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.ftabs [role=tab]{flex:none;padding:10px 14px;min-height:44px;align-items:center;border-color:var(--line)}.ftabs [role=tab] small{display:none}.ftabs [role=tab] svg{display:none}}

/* feature panel copy (OgirChat) */
.fp{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.fp h3{font-family:var(--display);font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.01em;word-spacing:.05em}
.fp .two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start}
.fp p{color:var(--text-2)}
.ticks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.ticks li{display:flex;gap:10px;font-size:16px;color:var(--text)}
.ticks svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:3px}
.eg{background:var(--wa-bg);border-radius:var(--r-m);padding:18px 20px;font-size:15.5px;color:#2B2721}
.eg b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.plan-note{display:inline-block;font-size:14px;font-weight:600;color:var(--accent-ink);background:var(--accent-tint);border-radius:var(--r-s);padding:5px 10px;margin-top:16px}
@media (max-width:860px){.fp .two{grid-template-columns:1fr}}

/* acts on OgirChat */
.act-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:44px}
.act-head .lead{margin:0}
@media (max-width:860px){.act-head{grid-template-columns:1fr;gap:14px}}

/* jump chips (sticky) */
.jump{position:sticky;top:var(--nav-h);z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.jump ul{list-style:none;display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap;background:#fff;transition:background-color .15s,border-color .15s,color .15s}
.jump a:hover{border-color:#9CA8A2;color:var(--ink)}
.jump a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.jump a i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--green-700));flex:none}

/* integrations with real logos */
.logos{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logo-c{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 20px;display:flex;flex-direction:column;gap:12px;min-height:150px;background:#fff}
.logo-c svg{width:34px;height:34px;fill:#1F2A26;transition:fill .15s}
.logo-c:hover svg{fill:var(--brand)}
.logo-c b{font-size:16px;color:var(--ink)}
.logo-c small{font-size:14px;color:var(--muted);line-height:1.4}
.logo-c .wm{font-family:var(--body);font-weight:700;font-size:21px;letter-spacing:-.02em;color:#1F2A26;height:34px;display:flex;align-items:center}
@media (max-width:960px){.logos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:600px) and (max-width:960px){.logos{grid-template-columns:repeat(3,1fr)}}

/* bill calculator (volume slider) */
.bill{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-radius:var(--r-l);overflow:hidden;background:#fff;border:1px solid var(--line)}
.bill-in{padding:32px;display:flex;flex-direction:column;gap:26px}
.rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto}
.rates div{background:var(--bg-2);border-radius:var(--r-s);padding:12px 14px}
.rates dt{font-size:14px;color:var(--muted)}
.rates dd{font-weight:600;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.rates dd.d{font-weight:400;font-size:13.5px;color:var(--muted)}
.bill-out{padding:32px;background:var(--ink);color:#C9D1CD;display:flex;flex-direction:column}
.bill-out h3{color:#fff;font-size:17px}
.rng label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;color:var(--ink);font-size:16px}
.rng label small{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:2px}
.rng output{font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rng input{width:100%;margin-top:8px;accent-color:var(--green-700);height:44px;cursor:pointer}
.pick{border:0}
.pick legend{font-weight:600;color:var(--ink);font-size:16px;margin-bottom:10px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
.seg button,.seg label{min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:0;background:none;font:600 15px var(--body);color:var(--text-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background-color .15s,color .15s}
.seg button[aria-pressed=true],.seg input:checked+span{background:var(--ink);color:#fff}
.seg label{padding:0}
.seg label span{min-height:44px;padding:0 16px;border-radius:var(--r-pill);display:inline-flex;align-items:center}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.seg small{font-weight:600;font-size:12.5px;color:var(--green-700)}
.seg button[aria-pressed=true] small{color:#86EFAC}
.lines{list-style:none;margin-top:18px;display:flex;flex-direction:column}
.lines li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15.5px}
.lines li b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.lines li.zero span{color:#86EFAC;font-weight:600}
.lines li.zero b{color:#86EFAC}
.tot{margin-top:22px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tot span{font-size:15px}
.tot b{font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:600;color:#fff;line-height:1}
.bill-out .note{font-size:13.5px;color:#AEB8B3;margin-top:16px;line-height:1.5}
.bill-out .note a{color:#D1FAE5}
@media (max-width:900px){.bill{grid-template-columns:1fr}.bill-in,.bill-out{padding:24px 20px}}

/* plans */
.toggles{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;align-items:center}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:var(--r-l);padding:28px;background:#fff;display:flex;flex-direction:column;gap:6px}
.plan.pop{border:2px solid var(--accent);padding:27px}
.plan .badge{align-self:flex-start;font-size:13px;font-weight:600;color:#fff;background:var(--accent);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:4px}
.plan h3{font-family:var(--display);font-size:26px;letter-spacing:-.01em}
.plan .who{color:var(--muted);font-size:15.5px}
.price{font-family:var(--display);font-size:46px;font-weight:600;color:var(--ink);line-height:1;margin-top:14px;font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted)}
.was{font-size:15px;color:var(--muted);margin-top:6px}
.was s{color:var(--muted)}
.billnote{font-size:14px;color:var(--muted)}
.fest{font-size:14px;font-weight:600;color:#9A3412}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:16px 0 4px;font-size:15.5px}
.plan li{display:flex;gap:10px}
.plan li svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:3px}
.plim{list-style:none;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.plim li{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.plim b{color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.plan .btn{margin-top:auto}
.plan .sup{font-size:14.5px;color:var(--muted);margin:10px 0 18px}
.plan .sup b{color:var(--ink)}
.festive{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:#FFF7ED;border:1px solid #FED7AA;color:#7C2D12;border-radius:var(--r-m);padding:14px 18px;margin-bottom:24px;font-size:15.5px}
.festive b{color:#7C2D12}
body[data-festive=off] .festive,body[data-festive=off] .fest-only{display:none}
body[data-festive=on] .reg-only{display:none}
body[data-festive=off] .fest-only{display:none!important}
.usd-note{display:none}
body[data-festive=on][data-cur=usd] .fest-only{display:none}
body[data-festive=on][data-cur=usd] .reg-only{display:block}
body[data-festive=on][data-cur=usd] .usd-note{display:inline}
.fest[hidden]{display:none}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:520px}}

/* tables */
.tw{max-width:100%}
table.t{width:100%;border-collapse:collapse;font-size:15.5px;border:1px solid var(--line);background:#fff}
.t th,.t td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.t thead th{background:var(--bg-2);font-weight:600;color:var(--ink);font-size:15px}
.t tbody tr:last-child td{border-bottom:0}
.t td.c,.t th.c{text-align:center}
.t .grp td{background:#FAFBFA;font-weight:600;color:var(--ink);font-size:14.5px;padding-top:18px}
.y svg,.n svg{width:20px;height:20px;margin:0 auto}
.y{color:var(--green-700)}.n{color:#9AA4A0}
@media (max-width:720px){
 table.stack thead{display:none}
 table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
 table.stack tr{padding:12px 16px;border-bottom:1px solid var(--line)}
 table.stack td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:16px;text-align:right}
 table.stack td:first-child{font-weight:600;color:var(--ink);text-align:left;display:block;padding-bottom:6px}
 table.stack td[data-l]::before{content:attr(data-l);color:var(--muted);text-align:left;font-weight:500}
 table.stack td.c{text-align:right}
 table.stack .y svg,table.stack .n svg{margin:0}
}
/* plan picker for the compare table on phones */
.cmp-pick{display:none;margin-bottom:16px}
@media (max-width:720px){
 .cmp-pick{display:flex}
 table.cmp thead{display:none}
 table.cmp tr{display:flex;justify-content:space-between;gap:12px}
 table.cmp td{flex:1}
 table.cmp td:first-child{flex:1.6}
 table.cmp td.p{text-align:right;flex:1}
 table.cmp[data-show=s] td.p:not(.s),table.cmp[data-show=g] td.p:not(.g),table.cmp[data-show=p] td.p:not(.p3){display:none}
 table.cmp .grp td{flex:1}
 table.cmp .y svg,table.cmp .n svg{margin:0 0 0 auto}
}

/* FAQ */
.faq{max-width:840px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:64px;padding:16px 0;font-weight:600;font-size:18px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;color:var(--muted);flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--text-2)}

/* closing call to action */
.close{background:var(--ink);border-radius:32px;padding:72px 32px;text-align:center;color:#C9D1CD;position:relative;overflow:hidden}
.close h2{color:#fff;max-width:20ch;margin:0 auto}
.close p{margin:16px auto 30px;max-width:52ch;font-size:18px}
.close .btns{justify-content:center}
.close .chat{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:0 auto 32px;text-align:left}
.close .chat .msg{font-size:15px}
section.closing{padding-top:0}
@media (max-width:720px){.close{padding:48px 20px;border-radius:24px}}

/* footer */
footer{background:var(--ink);color:#AEB8B3;padding:72px 0 120px;font-size:15px}
main>section:last-child{padding-bottom:104px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer .logo{color:#fff}
footer .fh{color:#fff;font-weight:600;margin-bottom:10px;font-size:15px}
footer ul{list-style:none}
footer li a{color:#C9D1CD;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
footer li a:hover{color:#fff;text-decoration:underline}
footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;font-size:14px}
footer .base div{display:flex;gap:18px;flex-wrap:wrap}
footer .base a{color:#C9D1CD;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media (min-width:861px){footer{padding-bottom:72px}}

/* WhatsApp float and the sticky phone bar */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:45;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(12,18,16,.25)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.mbar{display:none}
@media (max-width:860px){
 .wa-float{display:none}
 .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
 .mbar .btn{flex:1}
 .mbar .wa{width:48px;height:48px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none}
 .mbar .wa svg{width:26px;height:26px;fill:#fff}
 body{padding-bottom:72px}
 .mbar{transition:transform .2s}
 body.bar-wait .mbar{transform:translateY(110%)}
}
@media (max-width:640px){.bc .win img{width:calc(var(--w,100%) * 1.45)}}
.post-page main{padding-bottom:104px}

/* steps (a real sequence, so numbered) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border-top:2px solid var(--ink)}
.steps li{padding:22px 24px 0 0;counter-increment:s}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:600;font-size:40px;color:var(--accent);line-height:1;display:block;margin-bottom:12px}
.steps li p{color:var(--text-2);margin-top:6px;font-size:16px}
@media (max-width:860px){.steps{grid-template-columns:1fr}.steps li{padding:20px 0;border-bottom:1px solid var(--line)}}

/* plans strip */
.pstrip{display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:32px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0}
.pstrip dl{display:flex;gap:32px}
.pstrip dt{font-size:14px;color:var(--muted)}
.pstrip dd{font-family:var(--display);font-size:30px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:860px){.pstrip{grid-template-columns:1fr;gap:18px}.pstrip dl{gap:24px;flex-wrap:wrap}}

/* ===== Solutions ===== */
.sol-hero{padding:64px 0 72px}
.sol-hero h1{max-width:20ch;font-size:clamp(36px,4.8vw,58px)}
.sol-hero .lead{margin-top:18px;max-width:58ch}
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;list-style:none}
.jobc{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:22px;border-radius:var(--r-l);background:var(--ct);color:var(--ink);text-decoration:none;position:relative;transition:transform .15s,background-color .15s;border:1px solid transparent}
.jobc:hover{border-color:var(--c)}
.jobc .t{display:flex;gap:10px;align-items:center}
.jobc .t svg{width:24px;height:24px;color:var(--c);flex:none}
.jobc b{font-size:19px;font-weight:600;line-height:1.3}
.jobc span{font-size:15.5px;color:#36403B;line-height:1.45}
.jobc em{margin-top:auto;font-style:normal;font-weight:600;font-size:15px;color:var(--c)}
@media (max-width:900px){.jobs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.jobs{grid-template-columns:1fr}.jobc{min-height:0}}
.job{--c:var(--green-700);--ct:#E8F7EE;padding:96px 0;scroll-margin-top:calc(var(--nav-h) + 60px)}
.j-fast{--c:#15803D;--ct:#E8F7EE}.j-ads{--c:#1D4ED8;--ct:#E6EEFE}.j-sell{--c:#9A4408;--ct:#FDF0E1}.j-team{--c:#6D28D9;--ct:#F0EAFD}.j-insta{--c:#BE185D;--ct:#FCE8F1}.j-back{--c:#0F766E;--ct:#E2F4F1}
.job .accent{--accent:var(--c)}
.job .grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.job.flip .grid{grid-template-columns:340px minmax(0,1fr)}
.job.flip .side{order:-1}
.job .side{position:sticky;top:calc(var(--nav-h) + 80px)}
.job .side .stagebox{background:var(--wa-bg);border-radius:28px;padding:22px 10px;display:flex;flex-direction:column;align-items:center}
.job .name{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--c);font-size:16px}
.job .name svg{width:22px;height:22px}
.job h2{margin-top:10px;max-width:20ch}
.job .prob-line{font-size:clamp(19px,1.8vw,22px);line-height:1.45;color:var(--text);margin-top:16px;max-width:48ch}
.job h3.sub{font-size:17px;margin:40px 0 4px;color:var(--ink)}
.job .three{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:0;margin-top:8px}
.job .three li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.job .three li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.job .three b{display:block;color:var(--ink);font-size:17px}
.job .three span{font-size:16px;color:var(--text-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;list-style:none}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--ct,var(--green-tint));color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;border:1px solid transparent;transition:border-color .15s}
.chips a:hover{border-color:var(--c,var(--green-700))}
.flows{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin-top:12px}
.flows li{display:flex;gap:10px;align-items:baseline;font-size:15.5px;padding:8px 0;border-bottom:1px dashed #D5DAD7}
.flows li svg{width:18px;height:18px;color:var(--c);flex:none;position:relative;top:3px}
.flows li small{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
@media (max-width:640px){.flows{grid-template-columns:1fr}}
.job .eg{margin-top:28px}
.job .cta-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.job .btn-primary{background:var(--c)}
.job .tlink{color:var(--c)}
.job .btn-primary:hover{filter:brightness(.88)}
.job.dark{background:var(--ink);color:#C9D1CD}
.job.dark h2,.job.dark .three b,.job.dark h3.sub{color:#fff}
.job.dark .name{color:#86EFAC}
.job.dark .prob-line,.job.dark .three span{color:#C9D1CD}
.job.dark .three li{border-color:rgba(255,255,255,.14)}
.job.dark .three li::before{background:var(--green-bright);color:var(--ink)}
.job.dark .chips a{background:rgba(255,255,255,.08);color:#fff}
.job.dark .chips a:hover{border-color:#86EFAC}
.job.dark .flows li{border-color:rgba(255,255,255,.18)}
.job.dark .flows li svg{color:#86EFAC}
.job.dark .flows li small{color:#AEB8B3}
.job.dark .eg{background:#1B2420;color:#D7DED9}
.job.dark .eg b{color:#fff}
.job.dark .btn-primary{background:var(--green-bright);color:var(--ink)}
.job.dark .tlink{color:#86EFAC}
.job.tinted{background:var(--ct)}
.job.tinted .chips a{background:#fff}
.job.tinted .eg{background:#fff}
.diagram{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding:18px;border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.diagram .node{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);min-width:74px}
.diagram .node span{padding:10px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;min-width:48px;min-height:48px}
.diagram .node svg{width:26px;height:26px}
.diagram .arr{flex:1;min-width:20px;height:0;border-top:2px dashed #B7BFBB}
.diagram{justify-content:space-between}
@media (max-width:560px){.diagram .arr{display:none}.diagram{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.diagram .node{min-width:0;font-size:12.5px;text-align:center}}
@media (max-width:960px){.job .grid,.job.flip .grid{grid-template-columns:1fr;gap:40px}.job.flip .side{order:0}.job .side{position:static}.job{padding:72px 0}}
.custom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:32px;border-radius:var(--r-l);background:var(--green-tint)}
.custom p{color:var(--text-2);margin-top:6px}
@media (max-width:760px){.custom{grid-template-columns:1fr;padding:24px}}
/* plan picker (3 questions) */
.picker{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:#fff}
.picker form{padding:32px;display:flex;flex-direction:column;gap:26px}
.picker fieldset{border:0}
.picker legend{font-weight:600;font-size:17px;color:var(--ink);margin-bottom:10px}
.picker .res{background:var(--green-tint);padding:32px;display:flex;flex-direction:column;gap:10px}
.picker .res h3{font-family:var(--display);font-size:30px}
.picker .res .price{font-size:40px;margin-top:4px}
.picker .res p{color:var(--text-2)}
.picker .res .btns{margin-top:auto;padding-top:16px}
@media (max-width:900px){.picker{grid-template-columns:1fr}.picker form,.picker .res{padding:24px 20px}}

/* ===== OgirDM (pink, no green leak) ===== */
.dm-page{--accent:#BE185D;--accent-ink:#9D174D;--accent-tint:#FCE8F1}
.dm-page .btn-primary{background:#BE185D}
.dm-page .btn-primary:hover{background:#9D174D}
.dm-page .ticks svg,.dm-page .plan li svg,.dm-page .proof li svg{color:#BE185D}
.dm-page .stage{background:#F7EEF3}
.dm-page .plan.pop{border-color:#BE185D}
.dm-page .plan .badge{background:#BE185D}
.dm-page .y{color:#BE185D}
.dm-page .rng input{accent-color:#BE185D}
.dm-page .seg button[aria-pressed=true] small{color:#FBCFE8}
.dm-page .seg small{color:#BE185D}
.dm-page :focus-visible{outline-color:#BE185D}
.dm-page .close .btn-bright{background:#F9A8D4}
.dm-page .close .btn-bright:hover{background:#FBCFE8}
.dm-page .eg{background:#F7EEF3}
.dm-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.dm-trio article{padding:28px 28px 0 0}
.dm-trio article+article{padding-left:28px;border-left:1px solid var(--line)}
.dm-trio .mini{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #EFEFEF;border-radius:18px;padding:14px;margin-bottom:20px}
.dm-trio .mini .msg{font-size:14px;max-width:92%}
.dm-trio .mini .msg.in{background:#EFEFEF;box-shadow:none;border-radius:18px;border-bottom-left-radius:4px}
.dm-trio .mini .msg.out{background:#5B3BE8;color:#fff;box-shadow:none;border-radius:18px;border-bottom-right-radius:4px}
.dm-trio .mini .lbtn{align-self:flex-start;border:1px solid #DBDBDB;border-radius:12px;padding:7px 12px;font-size:14px;font-weight:600;color:#0C1210}
.dm-trio .t svg{width:22px;height:22px;flex:none}
.dm-trio p{color:var(--text-2);font-size:16px;margin-top:8px}
.dm-trio .eg{margin-top:14px}
@media (max-width:960px){.dm-trio{grid-template-columns:1fr}.dm-trio article,.dm-trio article+article{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:32px}}

/* runs box (pricing) */
.runs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.runs .ex{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.runs .ex li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:16px}
.runs .ex b{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.never li svg{color:#9AA4A0!important}
@media (max-width:860px){.runs{grid-template-columns:1fr}}
.ratecite{font-size:14px;color:var(--muted);margin-top:14px;max-width:68ch}

/* ===== Blog ===== */
.cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.cats button{min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:15px;font-weight:500;color:var(--text-2)}
.cats button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.pcard{display:flex;flex-direction:column;gap:14px}
.pcard img{border-radius:var(--r-m);aspect-ratio:16/9;object-fit:cover;width:100%}
.pcard .cat{font-size:14px;font-weight:600;color:var(--green-800)}
.pcard h2,.pcard h3{font-family:var(--body);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em;word-spacing:0}
.pcard h2 a,.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard h2 a:hover,.pcard h3 a:hover{text-decoration:underline}
.pcard p{color:var(--text-2);font-size:16px}
.pcard .meta{font-size:14px;color:var(--muted)}
.pcard.lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.pcard.lead h2{font-family:var(--display);font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:-.015em;word-spacing:.05em}
.pcard[hidden]{display:none}
@media (max-width:860px){.posts{grid-template-columns:1fr}.pcard.lead{grid-template-columns:1fr;gap:16px}}
/* post */
.post-head{max-width:820px;padding:48px 0 28px}
.crumbs{display:flex;gap:6px;align-items:center;font-size:15px;margin-bottom:18px;flex-wrap:wrap}
.crumbs a{color:var(--muted);display:inline-flex;min-height:44px;align-items:center}
.crumbs svg{width:16px;height:16px;color:#9AA4A0}
.post-head h1{font-size:clamp(34px,4.4vw,52px)}
.byline{margin-top:16px;color:var(--muted);font-size:15px;display:flex;gap:6px 18px;flex-wrap:wrap}
.post-hero{max-width:1000px}
.post-hero img{border-radius:var(--r-l);width:100%}
.post-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;margin-top:48px;align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);font-size:15px}
.toc summary{font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:center;cursor:pointer}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);margin-top:6px}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 0 4px 14px;color:var(--text-2);text-decoration:none;margin-left:-2px;border-left:2px solid transparent}
.toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.prose{max-width:680px;font-size:18px;line-height:1.7}
.prose>*+*{margin-top:20px}
.prose h2{font-size:clamp(26px,2.8vw,32px);margin-top:48px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h3{font-size:20px;margin-top:32px}
.prose ol,.prose ul{padding-left:24px}
.prose li+li{margin-top:8px}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--bg-2)}
.prose .callout{background:var(--wa-bg);border-radius:var(--r-m);padding:18px 20px;font-size:17px}
.prose .inchat{background:var(--wa-bg);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:6px}
.prose .inchat .msg{font-size:15px}
.prose .inchat .qr-btns{width:min(86%,320px)}
.prose .inchat figcaption{font-size:14px;color:#5C564C;margin-top:10px;font-family:var(--body)}
.wl{width:min(86%,320px);display:flex;flex-direction:column;gap:6px}
.wl-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;background:#fff;border-radius:8px;color:var(--wa-link);font-weight:500;font-size:15px}
.wl-btn svg{width:16px;height:16px}
.prose .wl ul{list-style:none;padding:4px 14px;background:#fff;border-radius:8px}
.prose .wl li{margin:0;padding:10px 0;border-bottom:1px solid #EEF0F0;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.prose .wl li::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #8696A0}
.prose .wl li:last-child{border-bottom:0}
.post-cta{background:var(--ink);color:#C9D1CD;border-radius:var(--r-l);padding:32px;margin-top:48px!important}
.post-cta h2{color:#fff;margin:0;font-size:28px}
.post-cta p{margin:10px 0 20px}
@media (max-width:960px){.post-grid{grid-template-columns:1fr;gap:24px}.toc{position:static;border:1px solid var(--line);border-radius:var(--r-m);padding:4px 16px 10px}}
.news{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:64px;padding:32px;border-radius:var(--r-l);background:var(--wa-bg)}
.news p{color:#4B4436;margin-top:6px}
@media (max-width:760px){.news{grid-template-columns:1fr;padding:24px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .loop img,.ping{animation:none!important}
  .ping{opacity:1;transform:none}
}

/* ---- scenes.css ---- */
/* Live bento scenes, Part B v2 (18 Oct 2026). Each card replays a real OGIR moment, built from the real app's
   words and data (Skyline Homes, Kesar & Co., the Diwali broadcast, the CRM pipeline). Transform and opacity only.
   Plays only while on screen; reduced motion shows the finished scene. */
.lc{position:relative;border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:6px;overflow:hidden;text-decoration:none;color:inherit;min-height:360px;background:var(--card,#fff);border:1px solid var(--card-line,var(--line));transition:border-color .15s}
.lc:hover{border-color:var(--c)}
.lc .t{display:flex;gap:10px;align-items:center}
.lc .t svg{width:22px;height:22px;color:var(--c);flex:none}
.lc p.l{font-size:15.5px;color:var(--text-2);max-width:46ch}
.lc .go{font-size:15px;font-weight:600;color:var(--c);min-height:28px;display:inline-flex;align-items:center}
.lc .scene{margin-top:auto;padding-top:16px;position:relative;display:flex;flex-direction:column}
.lc.w4{grid-column:span 4}.lc.w3{grid-column:span 3}.lc.w2{grid-column:span 2}
@media (max-width:980px){.lc.w4,.lc.w3,.lc.w2{grid-column:span 2}}
@media (min-width:640px) and (max-width:980px){.lc.w2,.lc.w3{grid-column:span 1}}

/* timeline: 12 s loop, steps appear one after another and stay */
.scene :is(.k1,.k2,.k3,.k4,.k5,.k6,.kx){animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:ease-out;animation-fill-mode:both;animation-play-state:paused}
.loop.on :is(.k1,.k2,.k3,.k4,.k5,.k6,.kx){animation-play-state:running}
.k1{animation-name:k1}.k2{animation-name:k2}.k3{animation-name:k3}.k4{animation-name:k4}.k5{animation-name:k5}.k6{animation-name:k6}.kx{animation-name:kx}
@keyframes k1{0%,4%{opacity:0;transform:translateY(8px)}8%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes k2{0%,16%{opacity:0;transform:translateY(8px)}20%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes k3{0%,30%{opacity:0;transform:translateY(8px)}34%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes k4{0%,44%{opacity:0;transform:translateY(8px)}48%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes k5{0%,58%{opacity:0;transform:translateY(8px)}62%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes k6{0%,70%{opacity:0;transform:translateY(8px)}74%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
/* kx: visible first, then leaves (the card that moves out of a column) */
@keyframes kx{0%,4%{opacity:0}8%,40%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateX(40px)}}

.js .scene :is(.k1,.k2,.k3,.k4,.k5,.k6,.kx){opacity:0}
.no-js .scene :is(.k1,.k2,.k3,.k4,.k5,.k6){opacity:1}
.no-js .scene .kx{display:none}

/* shared chat bits inside scenes */
.sc-chat{background:var(--wa-bg);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:200px}
.sc-chat .m{max-width:82%;padding:7px 10px 5px;border-radius:10px;font-size:14px;line-height:1.4;color:#111B21;white-space:pre-line}
.sc-chat .m.in{background:#fff;align-self:flex-start;border-top-left-radius:0}
.sc-chat .m.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:0}
.sc-chat .m time{display:block;text-align:right;font-size:11px;color:#56636B}
.sc-chat .bt{align-self:flex-start;background:#fff;color:var(--wa-link);font-weight:500;font-size:14px;border-radius:8px;padding:8px 14px;min-width:180px;text-align:center}
.sc-chat .sys{align-self:center;background:#FFF8E1;color:#4B4436;font-size:12.5px;border-radius:8px;padding:4px 10px}
.badge-time{position:relative;align-self:flex-start;margin-bottom:8px;width:max-content;max-width:100%;background:var(--ink);color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:6px 12px;display:flex;gap:6px;align-items:center}
.badge-time svg{width:15px;height:15px;color:#86EFAC}

/* ads: ad card into chat */
.sc-ad{display:grid;grid-template-columns:1fr;gap:10px}
.sc-ad .ad{background:#fff;border-radius:14px;padding:12px;color:#111}
.sc-ad .ad small{font-size:12px;color:#56636B}
.sc-ad .ad b{display:block;font-size:14.5px;margin:2px 0 8px}
.sc-ad .ad .cta{display:flex;align-items:center;justify-content:center;gap:6px;background:#1565D8;color:#fff;border-radius:8px;font-size:13.5px;font-weight:600;padding:8px}
.sc-ad .ad .cta svg{width:16px;height:16px;fill:#fff}
.sc-ad .ldrow{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;color:#111;font-size:13.5px}
.sc-ad .ldrow i{font-style:normal;font-size:12px;font-weight:600;background:#DBEAFE;color:#1E40AF;border-radius:999px;padding:3px 9px;white-space:nowrap}

/* sell: order updates */
.sc-steps{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.sc-steps span{font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px;background:#fff;color:#374151}
.sc-steps span.on{background:#FEF3C7;color:#92400E;border-color:#FDE68A}

/* sales team: the CRM pipeline */
.sc-pipe{background:#F4F6F5;border-radius:16px;padding:12px;color:#111}
.sc-pipe .bar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;margin-bottom:10px;color:#374151}
.sc-pipe .bar b{color:#111;font-size:14px}
.sc-pipe .bar .alert{background:#FEE2E2;color:#991B1B;font-weight:600;border-radius:999px;padding:4px 10px;font-size:12.5px;white-space:nowrap}
.sc-pipe .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sc-pipe .col{background:#EBEFED;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:200px}
.sc-pipe .col .h{font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;color:#111;margin:2px 2px 2px}
.sc-pipe .col .h small{font-weight:500;color:#56636B}
.sc-pipe .cd{background:#fff;border-radius:10px;padding:8px 10px;font-size:12.5px}
.sc-pipe .cd b{display:block;font-size:13.5px}
.sc-pipe .cd span{color:#56636B;display:block}
.sc-pipe .tg{display:inline-flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.sc-pipe .tg i{font-style:normal;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 8px}
.tg .ld{background:#DBEAFE;color:#1E40AF}.tg .eng{background:#DCFCE7;color:#166534}.tg .never{background:#FEF3C7;color:#92400E}.tg .noreply{background:#FEE2E2;color:#991B1B}
.sc-pipe .cd.moved{outline:2px solid #6D28D9;outline-offset:-2px}
.sc-toast{align-self:center;margin-top:10px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;border-radius:10px;padding:8px 14px;white-space:nowrap;display:flex;gap:8px;align-items:center}
.sc-toast svg{width:16px;height:16px;color:#86EFAC}
@media (max-width:560px){.sc-pipe .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-pipe .col.c3{display:none}}

/* instagram: post, comment, DM */
.sc-ig{display:grid;grid-template-columns:1fr 1fr;gap:10px;color:#111}
.sc-ig .post{background:#fff;border-radius:14px;overflow:hidden;font-size:13px}
.sc-ig .post .img{height:84px;background:#BE185D;color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;text-align:center;line-height:1.1;padding:8px}
.sc-ig .post .cm{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.sc-ig .post .cm b{font-weight:600}
.sc-ig .post .cm .rep{padding-left:12px;color:#374151;border-left:2px solid #F3F4F6}
.sc-ig .dm{background:#fff;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px}
.sc-ig .dm .m{background:#EFEFEF;border-radius:16px;border-bottom-left-radius:4px;padding:8px 11px;font-size:13px;max-width:95%}
.sc-ig .dm .b{border:1px solid #DBDBDB;border-radius:10px;padding:7px 10px;font-size:13px;font-weight:600;text-align:center}
@media (max-width:420px){.sc-ig{grid-template-columns:1fr}}

/* come back: broadcast review and results */
.sc-bc{background:#fff;border-radius:16px;padding:14px;color:#111;font-size:13.5px}
.sc-bc .row{display:flex;justify-content:space-between;gap:10px;padding:5px 0}
.sc-bc .row b{font-variant-numeric:tabular-nums}
.sc-bc .rm{font-size:12.5px;color:#56636B;padding-bottom:8px;border-bottom:1px solid #EEF0F0;margin-bottom:6px}
.sc-bc .btot{display:flex;justify-content:space-between;font-weight:700;font-size:15.5px;padding-top:6px;border-top:1px solid #EEF0F0;margin-top:4px}
.sc-bc .res{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.sc-bc .res div{display:grid;grid-template-columns:72px 1fr 52px;gap:8px;align-items:center;font-size:12.5px;color:#374151}
.sc-bc .res em{height:8px;border-radius:99px;background:#EEF0F0;overflow:hidden;display:block}
.sc-bc .res em i{display:block;height:100%;background:#0F766E;transform-origin:left;width:var(--w)}
.sc-bc .res b{text-align:right;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.js .scene :is(.k1,.k2,.k3,.k4,.k5,.k6){animation:none!important;opacity:1;transform:none}.scene .kx{display:none}}

/* ---- hero-b.css ---- */
/* Version 3 (18 Oct 2026): the 1 October "Chat first" hero, restored exactly as Abhijeet liked it.
   Dark ink hero with the green glow, eyebrow, one green phrase, phone hanging into the white proof strip, four stat bubbles. */
.hero-b{background:var(--ink);color:#C7CDD0;padding:80px 0 0;position:relative;overflow-x:clip;overflow-y:visible}
.hero-b::before{content:"";position:absolute;inset:auto -20% 0 -20%;height:560px;background:radial-gradient(closest-side,rgba(34,197,94,.30),transparent);pointer-events:none}
.hero-b .wrap{position:relative;text-align:center}
.hero-b .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#86EFAC}
.hero-b h1{color:#fff;max-width:15ch;margin:16px auto 0;font-size:clamp(40px,6.2vw,76px);letter-spacing:-.01em;word-spacing:.04em}
.hero-b h1 span{color:var(--green-bright)}
.hero-b .lead{color:#C7CDD0;margin:22px auto 30px;max-width:62ch}
.hero-b .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-b .btn-onDark{background:var(--green-bright);color:var(--ink)}
.hero-b .btn-onDark:hover{background:#4ADE80}
.hero-b .btn-light{background:#fff;color:var(--ink)}
.hero-b .stage{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:end;margin-top:56px;background:none;border-radius:0;padding:0;min-height:0;overflow:visible;isolation:auto}
.hero-b .bubble{background:#fff;color:var(--ink);border-radius:18px 18px 18px 4px;padding:14px 16px;text-align:left;font-size:15px;box-shadow:0 2px 6px rgba(12,18,16,.06),0 24px 60px rgba(12,18,16,.12);max-width:280px}
.hero-b .bubble b{display:block;font-family:var(--display);font-weight:600;font-size:28px;color:var(--green-800);line-height:1.1}
.hero-b .side{display:flex;flex-direction:column;gap:18px;padding-bottom:80px}
.hero-b .side.l{align-items:flex-end}
.hero-b .side.r{align-items:flex-start}
.hero-b .side.r .bubble{border-radius:18px 18px 4px 18px;background:var(--wa-out)}
.hero-b .pwrap{margin-bottom:-120px;z-index:2;position:relative;width:340px}
.hero-b .phone{position:relative}
.hero-b .phone::before{content:"Try it: tap a button";position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;border:2px solid #fff;z-index:3}
.hero-b .replay{position:absolute;left:0;right:0;bottom:-58px}
.proof-b{background:#fff;padding:150px 0 40px;border-bottom:1px solid var(--line)}
.proof-b .proof{border:0;padding:0;background:none}
.proof-b .proof ul{justify-content:center}
@media (max-width:960px){.hero-b .stage{grid-template-columns:1fr;padding:0}.hero-b .side{display:none}.hero-b .pwrap{margin:0 auto -120px;width:min(340px,100%)}}

/* ---- v4.css ---- */
/* Version 4 (18 Oct 2026): Version 3's hero, with richer sections below.
   Dark bands alternate with light ones, each job card carries its own colour, scenes sit in real-looking phones. */

/* dark bands, same ink and glow as the hero */
.band-ink{background:var(--ink);color:#C7CDD0;position:relative;overflow:hidden}
.band-ink::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:520px;background:radial-gradient(closest-side,rgba(34,197,94,.20),transparent);pointer-events:none}
.band-ink>.wrap{position:relative}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink .lead,.band-ink p{color:#C7CDD0}
.band-ink a.tlink{color:#4ADE80}
/* problems on the dark band */
.band-ink .probs{border-top-color:rgba(255,255,255,.12)}
.band-ink .prob+.prob{border-left-color:rgba(255,255,255,.10)}
.band-ink .prob .said{border:0}
.band-ink .prob .fix{color:#fff;border-top-color:rgba(255,255,255,.2)}
.band-ink .prob .fix svg{color:#4ADE80}
.band-ink .prob h3{color:#fff}
@media (max-width:900px){.band-ink .prob,.band-ink .prob+.prob{border-bottom-color:rgba(255,255,255,.12)}}
/* app tabs on the dark band */
.band-ink .ftabs [role=tab]:hover{background:rgba(255,255,255,.06)}
.band-ink .ftabs [role=tab][aria-selected=true]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.band-ink .ftabs [role=tab] b{color:#fff}
.band-ink .ftabs [role=tab] small{color:#AEB8B3}
.band-ink .ftabs [role=tab] svg{color:#AEB8B3}
.band-ink .ftabs [role=tab][aria-selected=true] svg{color:#4ADE80}
.band-ink figure.app figcaption{color:#AEB8B3}

/* job cards: each with its own colour, tint and border */
.v4 .lc{background:var(--t);border:1.5px solid color-mix(in srgb,var(--c) 30%,transparent);box-shadow:none}
.v4 .lc:hover{border-color:var(--c)}
.v4 .lc .t svg{width:26px;height:26px;padding:0;color:var(--c)}
.v4 .lc h3{font-size:21px}
.v4 .lc[style*="--c:#15803D"]{--t:#EEF9F2}
.v4 .lc[style*="--c:#1D4ED8"]{--t:#EEF3FF}
.v4 .lc[style*="--c:#9A4408"]{--t:#FFF5EB}
.v4 .lc[style*="--c:#6D28D9"]{--t:#F4EFFF}
.v4 .lc[style*="--c:#BE185D"]{--t:#FDF0F6}
.v4 .lc[style*="--c:#0F766E"]{--t:#EBF8F6}
.v4 .lc .sc-chat{background:var(--wa-bg)}

/* a real-looking small phone for scenes */
.mph{width:min(250px,100%);margin:0 auto;background:#121815;border-radius:32px;padding:8px;filter:drop-shadow(0 10px 18px rgba(12,18,16,.16)) drop-shadow(0 24px 36px rgba(12,18,16,.12))}
.mph .scr{border-radius:25px;overflow:hidden;background:#fff;display:flex;flex-direction:column;height:360px}
.mph .notch{height:20px;display:flex;justify-content:center;align-items:center}
.mph .notch i{width:70px;height:6px;border-radius:99px;background:#E5E7EB}
.mph .top{display:flex;align-items:center;gap:8px;padding:6px 12px 8px;border-bottom:1px solid #EFEFEF;font-size:13px;color:#111}
.mph .top .av{width:26px;height:26px;border-radius:50%;background:#BE185D;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.mph .top b{display:block;font-size:13px}
.mph .top small{font-size:11px;color:#6B7280}
.mph .body{flex:1;padding:10px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.mph .m{max-width:88%;padding:7px 10px;border-radius:16px;font-size:12.5px;line-height:1.35;color:#111}
.mph .m.in{background:#EFEFEF;align-self:flex-start;border-bottom-left-radius:4px}
.mph .m.out{background:#5B3BE8;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.mph .b{align-self:flex-start;border:1px solid #DBDBDB;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:600;color:#111;background:#fff}
.mph .inp{margin:8px;border:1px solid #DBDBDB;border-radius:99px;padding:7px 12px;font-size:12px;color:#6B7280}
/* WhatsApp version of the small phone */
.mph.wa .scr{background:var(--wa-bg)}
.mph.wa .top{background:var(--wa-head);color:#fff;border:0}
.mph.wa .top .av{background:#fff;color:var(--wa-head)}
.mph.wa .top small{color:#D1FAE5}
.mph.wa .m{border-radius:10px;font-size:12.5px}
.mph.wa .m.in{background:#fff;border-top-left-radius:0;border-bottom-left-radius:10px}
.mph.wa .sys{align-self:center;background:#FFF8E1;color:#4B4436;font-size:11.5px;border-radius:8px;padding:3px 8px}
.mph.wa .inp{background:#fff;border:0}
/* Instagram scene: the post on the left, the DM phone on the right */
.ig2{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:end}
.ig2 .post{background:#fff;border-radius:16px;overflow:hidden;font-size:13px;color:#111}
.ig2 .post .ph{display:flex;align-items:center;gap:8px;padding:8px 10px;font-weight:600;font-size:12.5px}
.ig2 .post .ph i{width:24px;height:24px;border-radius:50%;background:#BE185D;color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center}
.ig2 .post .img{aspect-ratio:1/1;max-height:170px;width:100%;background:radial-gradient(circle at 30% 30%,#DB2777,#9D174D 75%);color:#fff;display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.05;padding:12px}
.ig2 .post .cm{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px}
.ig2 .post .rep{padding-left:10px;border-left:2px solid #F3F4F6;color:#374151}
.ig2 .mph{width:220px}
.ig2 .mph .scr{height:330px}
@media (max-width:560px){.ig2{grid-template-columns:1fr}.ig2 .mph{margin:0 auto}}

/* green "try it" band */
.band-green{background:#15803D;color:#E8F7EE}
.band-green .tryrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.band-green h2{color:#fff}
.band-green p{color:#E8F7EE}
.band-green .scan{background:#fff;border:0;color:#111;margin:0}
.band-green .scan p{color:#4B5563}
@media (max-width:860px){.band-green .tryrow{grid-template-columns:1fr}}

/* logos in brand colour by default */
.v4 .logo-c svg{fill:var(--brand)}
.v4 .logo-c{transition:background-color .15s}
.v4 .logo-c:hover{background:#F6F8F7}

/* three steps, big numbers on cards */
.steps4{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps4 li{counter-increment:s;background:#fff;border:1.5px solid #D5E9DC;border-radius:20px;padding:24px;position:relative}
.steps4 li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#15803D;color:#fff;font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:16px}
.steps4 li p{color:var(--text-2);margin-top:6px;font-size:16px}
@media (max-width:860px){.steps4{grid-template-columns:1fr}}

/* phones: leave room under "Play it again" before the proof lines */
@media (max-width:960px){.v4 .proof-b{padding-top:200px}}

/* ---- v5.css ---- */
/* Version 5 (18 Oct 2026): Version 4 rolled out to all seven pages.
   Normal prices only, WhatsApp features and Instagram features pages, richer chat scenes. */

/* ---------- dark heroes on the inner pages, the same ink and glow as the Home hero ---------- */
.v5 .hero,.v5 .sol-hero{background:var(--ink);color:#C7CDD0;position:relative;overflow:hidden}
.v5 .hero::before,.v5 .sol-hero::before{content:"";position:absolute;inset:-35% -15% auto 30%;height:620px;background:radial-gradient(closest-side,rgba(34,197,94,.26),transparent);pointer-events:none}
.v5 .hero>.wrap,.v5 .sol-hero>.wrap{position:relative}
.v5 .hero h1,.v5 .sol-hero h1{color:#fff}
.v5 .hero .lead,.v5 .sol-hero .lead{color:#C7CDD0}
.v5 .hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.v5 .hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.v5 .hero .btn-primary{background:var(--green-bright);color:var(--ink)}
.v5 .hero .btn-primary:hover{background:#4ADE80}
.v5 .hero .stage{background:none;padding:0;min-height:0;overflow:visible}
.v5 .hero .stage .cap{color:#AEB8B3}
.v5 .hero .replay button{background:rgba(255,255,255,.92)}
.v5 .hero.short{padding:72px 0 64px}
.v5 .eyebrow5{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#86EFAC;margin-bottom:14px}

/* Instagram features page: the same ink, with Instagram's own pink and violet glow */
.v5.dm-page .hero::before{background:radial-gradient(closest-side,rgba(219,39,119,.30),transparent)}
.v5.dm-page .hero::after{content:"";position:absolute;inset:auto 40% -40% -10%;height:520px;background:radial-gradient(closest-side,rgba(124,58,237,.22),transparent);pointer-events:none}
.v5.dm-page .hero .btn-primary{background:#F472B6;color:var(--ink)}
.v5.dm-page .hero .btn-primary:hover{background:#F9A8D4}
.v5.dm-page .eyebrow5{color:#F9A8D4}

/* Solutions: dark hero, the six job cards keep their colours */
.v5 .sol-hero .jobc{border-color:transparent}
.v5 .sol-hero .jobc:hover{border-color:#fff}

/* ---------- feature panels on a dark band (WhatsApp features page, Sell part) ---------- */
.band-ink .act-head h2{color:#fff}
.band-ink .fp h3{color:#fff}
.band-ink .fp p{color:#C7CDD0}
.band-ink .ticks li{color:#E3E8E5}
.band-ink .ticks svg{color:#4ADE80}
.band-ink .eg{background:#1B2420;color:#D7DED9}
.band-ink .eg b{color:#fff}
.band-ink .plan-note{background:#15302A;color:#86EFAC}

/* ---------- richer chat scenes ---------- */
.sc-chat .doc{display:flex;gap:10px;align-items:center;min-width:220px}
.sc-chat .doc .dic{flex:none;width:34px;height:40px;border-radius:6px;background:#C62828;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;letter-spacing:.02em}
.sc-chat .doc b{display:block;font-size:13.5px;font-weight:600}
.sc-chat .doc small{display:block;font-size:12px;color:#56636B}
.sc-chat .qr{display:flex;gap:6px;flex-wrap:wrap}
.sc-chat .qr span{background:#fff;color:var(--wa-link);font-weight:500;font-size:13px;border-radius:8px;padding:7px 12px}
.sc-chat .pin{display:flex;gap:8px;align-items:center}
.sc-chat .pin .map{width:60px;height:44px;border-radius:6px;flex:none;background:linear-gradient(135deg,#C8E6C9 0 30%,#FFF9C4 30% 34%,#C8E6C9 34% 62%,#BBDEFB 62% 66%,#C8E6C9 66%);position:relative}
.sc-chat .pin .map::after{content:"";position:absolute;left:24px;top:10px;width:12px;height:12px;border-radius:50% 50% 50% 0;background:#E53935;transform:rotate(-45deg)}

/* WhatsApp carousel inside the small phone: 2 to 10 swipeable cards, live in OGIR Flows */
.mph.tall .scr{height:470px}
.car{align-self:stretch;overflow:hidden;margin:0 -10px;padding:0 10px}
.car .trk{display:flex;gap:8px;width:max-content}
.loop.on .car .trk{animation:swipe 12s ease-in-out infinite}
@keyframes swipe{0%,30%{transform:none}38%,62%{transform:translateX(-96px)}70%,100%{transform:none}}
.car .cd{width:136px;background:#fff;border-radius:10px;overflow:hidden;font-size:12px;color:#111}
.car .cd .im{height:84px;display:grid;place-items:center;font-size:30px}
.car .cd .im.a{background:linear-gradient(135deg,#7F1D1D,#B91C1C 55%,#F59E0B)}
.car .cd .im.b{background:linear-gradient(135deg,#065F46,#10B981)}
.car .cd .im.c{background:linear-gradient(135deg,#4C1D95,#A855F7)}
.car .cd p{padding:6px 8px 0;line-height:1.3}
.car .cd p b{display:block;font-size:12.5px}
.car .cd .cb{display:block;margin:6px 8px 8px;text-align:center;border-top:1px solid #EEE;padding-top:6px;color:var(--wa-link);font-weight:600}
@media (prefers-reduced-motion:reduce){.loop.on .car .trk{animation:none}}

/* Instagram post that looks like Instagram */
.ig2 .post .ph{justify-content:flex-start}
.ig2 .post .ph i{background:#fff;color:#BE185D;box-shadow:0 0 0 2px #fff,0 0 0 4px #DB2777}
.ig2 .post .ph small{margin-left:auto;font-weight:500;color:#6B7280;font-size:12px}
.ig2 .post .img{position:relative}
.ig2 .post .img em{position:absolute;right:8px;top:8px;font-style:normal;font-size:11px;font-weight:600;background:rgba(0,0,0,.62);color:#fff;border-radius:99px;padding:2px 7px}
.ig2 .post .act{display:flex;gap:12px;padding:8px 10px 0;color:#111}
.ig2 .post .act svg{width:20px;height:20px}
.ig2 .post .act .sv{margin-left:auto}
.ig2 .post .lk{padding:4px 10px 0;font-weight:600;font-size:12.5px}
.ig2 .post .cap2{padding:2px 10px 0;font-size:12.5px;color:#111}
.ig2 .post .cm{padding-top:6px}
.ig2 .mph.tall .scr,.igc .mph.tall .scr{height:420px}
.mph .chips{display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start}
.mph .chips span{border:1px solid #DBDBDB;border-radius:99px;padding:5px 10px;font-size:12px;font-weight:600;color:#111;background:#fff}
.mph .coupon{align-self:flex-start;width:86%;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #EFEFEF;font-size:12px;color:#111}
.mph .coupon .im{height:70px;background:linear-gradient(120deg,#6D28D9,#BE185D 60%,#C2410C);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:17px;text-align:center;padding:6px}
.mph .coupon p{padding:7px 10px 8px;line-height:1.35}
.mph .story{align-self:flex-end;display:flex;gap:8px;align-items:center;font-size:11.5px;color:#6B7280}
.mph .story i{width:34px;height:54px;border-radius:8px;background:linear-gradient(160deg,#F59E0B,#DB2777 60%,#7C3AED);flex:none}

/* ---------- Instagram features page ---------- */
.igcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.igc{background:#FDF0F6;border:1.5px solid #F5C2DA;border-radius:var(--r-l);padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.igc .t{display:flex;gap:10px;align-items:center;color:#BE185D}
.igc .t svg{width:24px;height:24px;flex:none}
.igc h3{color:var(--ink)}
.igc>p{color:var(--text-2);font-size:15.5px}
.igc .mph{margin:14px auto 6px;width:min(250px,100%)}
.igc .mph .scr{height:380px}
.igc .eg{background:#fff;margin-top:auto}
@media (max-width:980px){.igcards{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* the band that says Instagram is in every plan */
.band-ig{background:linear-gradient(120deg,#5B21B6,#BE185D 55%,#C2410C);color:#fff}
.band-ig h2{color:#fff}
.band-ig p{color:#FFF1F7}
.band-ig .row5{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.band-ig ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.band-ig li{display:flex;gap:8px;align-items:center;font-weight:600;font-size:16px}
.band-ig li svg{width:20px;height:20px;color:#fff;flex:none}
.band-ig .btn{background:#fff;color:#831843}
.band-ig .btn:hover{background:#FCE7F3}
@media (max-width:860px){.band-ig .row5{grid-template-columns:1fr}}

/* WhatsApp features: the three steps as cards */
.v5 .steps4 li p{color:var(--text-2)}

/* chat bodies scroll like a real chat: the oldest messages leave at the top */
.mph .body{min-height:0;overflow:hidden}

/* calculator, Version 5: where the money goes */
.bill[data-v5] .bill-out h3{margin-bottom:6px}
.bill[data-v5] .tot{margin-top:6px}
.msplit{display:flex;gap:3px;height:14px;margin:20px 0 18px;border-radius:999px;overflow:hidden}
.msplit i{display:block;min-width:6px;transition:flex-grow .35s ease}
.msplit .o{background:#22C55E;flex-grow:1}
.msplit .m{background:#60A5FA;flex-grow:0}
@media (prefers-reduced-motion:reduce){.msplit i{transition:none}}
.who{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.who .w{border-top:3px solid;padding-top:10px}
.who .o{border-color:#22C55E}.who .m{border-color:#60A5FA}
.who .k{display:block;font-size:13px;font-weight:700;color:#fff}
.who b{display:block;font-family:var(--display);font-weight:600;font-size:24px;color:#fff;margin:2px 0 4px;font-variant-numeric:tabular-nums}
.who p{font-size:13.5px;line-height:1.45;color:#C9D1CD}
@media (max-width:420px){.who{grid-template-columns:1fr;gap:14px}}
.bill[data-v5] .lines{margin-top:14px}
.bill[data-v5] .lines li{font-size:14.5px;padding:9px 0}
.gstx{margin-top:10px;font-size:15px;font-weight:600;color:#fff}
/* the WhatsApp phone: the customer's own message in WhatsApp green */
.mph.wa .m.out{background:var(--wa-out);color:#111;border-radius:10px;border-top-right-radius:0;align-self:flex-end}
/* the broadcast as the customer gets it: an approved template with a picture header and a button */
.sc-chat .tplm{max-width:92%;padding:4px 4px 0}
.sc-chat .tplm .tim{display:grid;place-items:center;height:64px;border-radius:8px;margin-bottom:6px;background:linear-gradient(120deg,#7C2D12,#C2410C 50%,#B45309);color:#fff;font-family:var(--display);font-weight:600;font-size:18px}
.sc-chat .tplm{padding-left:4px;padding-right:4px}
.sc-chat .tplm .tbtn{display:block;margin:8px -4px 0;border-top:1px solid #E9EDEF;padding:8px;text-align:center;color:var(--wa-link);font-weight:500}
.mph .body>*{flex-shrink:0}
/* phones sized so every message of the loop fits */
.mph.wa.tall .scr{height:500px}
.car .cd .im{height:66px;font-size:26px}
.ig2 .mph.tall .scr{height:440px}
.mph .coupon .im{height:52px;font-size:16px}
.igc .mph .scr{height:410px}
.ig2 .mph.tall .scr{height:480px}
.igc .mph .scr{height:470px}
.tp5{background:none;border:0;padding:0 0 4px;border-radius:0}
/* review fixes: Meta's part is blue everywhere, the ₹0 is the loudest fact, phones see the total while sliding */
.bill[data-v5] .rng input{accent-color:#2563EB}
.keep0{display:inline-block;margin-top:8px;background:#60A5FA;color:#0B1220;font-weight:700;font-size:13px;border-radius:10px;padding:5px 10px}
.lh5{margin-top:20px;font-size:13px;font-weight:600;color:#AEB8B3}
.bill[data-v5] .lines{margin-top:4px}
.mini5{display:none}
@media (max-width:760px){.mini5{display:block;position:sticky;bottom:76px;z-index:5;margin:8px -4px 0;background:var(--ink);color:#E3E8E5;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.4;box-shadow:0 6px 18px rgba(12,18,16,.25)}.mini5 b{color:#fff;font-family:var(--display);font-size:17px}}
/* bill lines end with the total; GST is a small footnote */
.bill[data-v5] .lines li.tl5{border-bottom:0;padding-top:12px}
.bill[data-v5] .lines li.tl5 span{color:#fff;font-weight:600}
.bill[data-v5] .lines li.tl5 b{font-size:17px}
.bill[data-v5] sup{font-size:.45em;vertical-align:super;margin-left:2px;font-family:var(--body);font-weight:600}
.bill[data-v5] .lines sup{font-size:.7em}
.gstx{margin-top:6px;font-size:12.5px;font-weight:500;color:#AEB8B3}
.bill[data-v5] .tot b span{font-size:inherit;color:inherit}
.bill[data-v5] .tot sup{font-size:.4em;vertical-align:top;position:relative;top:.15em}

/* ---- v6.css ---- */
/* Version 6 (18 Oct 2026): AiSensy-clean. White surfaces, one soft panel colour behind every animation,
   colour kept for meaning (OGIR green, Meta blue), one feature at a time on Home. Official logo. */

:root{--panel6:#EEF3F0;--panel6-line:#DCE6E0;--navy:#0F172A;--mint:#62F197;--meta:#2563EB;--meta-l:#60A5FA}

/* ---------- logo ---------- */
.v6 .logo{gap:0}
.v6 .logo img{display:block;height:30px;width:auto}
.v6 footer .logo img{height:30px}
@media (max-width:520px){.v6 .logo img{height:26px}}

/* ---------- 100% transparent band ---------- */
.tp6-wrap{padding:56px 0 8px}
.tp6-wrap.tp6-price{padding:56px 0 40px}
.tp6{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:28px 36px;align-items:center;background:var(--ink);color:#C9D1CD;border-radius:var(--r-l);padding:32px 36px}
.tp6-big{font-family:var(--display);font-weight:600;font-size:clamp(52px,6vw,76px);line-height:1;color:var(--mint)}
.tp6-txt h2{color:#fff;font-size:clamp(22px,2.2vw,28px);line-height:1.2}
.tp6-txt p{margin-top:10px;font-size:16px;line-height:1.55;color:#C9D1CD;max-width:56ch}
.tp6-split{display:flex;flex-direction:column;gap:14px}
.tp6-split .r{position:relative;border-top:3px solid;padding-top:8px}
.tp6-split .o{border-color:#22C55E}.tp6-split .m{border-color:var(--meta-l)}
.tp6-split .k{display:block;font-size:13px;font-weight:700;color:#fff}
.tp6-split b{display:block;font-size:15px;font-weight:600;color:#E3E8E5;margin-top:2px}
.tp6-split em{display:inline-block;margin-top:8px;font-style:normal;background:var(--meta-l);color:#0B1220;font-weight:700;font-size:13px;border-radius:10px;padding:4px 10px}
.tp6-split i{display:none}
@media (max-width:980px){.tp6{grid-template-columns:auto minmax(0,1fr)}.tp6-split{grid-column:1 / -1;flex-direction:row}.tp6-split .r{flex:1}}
@media (max-width:560px){.tp6{grid-template-columns:1fr;padding:26px 20px}.tp6-big{font-size:48px}.tp6-split{flex-direction:column}}

/* ---------- Home: four rows, one feature at a time ---------- */
.work6{padding-top:96px}
.work6 .head{position:relative}
.pause6{margin-top:16px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #CDD3D0;background:#fff;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.pause6:hover{border-color:var(--ink)}
.anim-paused .scene *{animation-play-state:paused!important}
.row6{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.row6:first-of-type{border-top:0;padding-top:8px}
.row6.flip .rt{order:2}
.row6 .rt h3{font-family:var(--display);font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.01em;word-spacing:.04em}
.row6 .rt p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--text-2)}
.row6 .rt .ticks{margin-top:18px}
.row6 .rt .tlink{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-weight:600;color:var(--accent-ink)}
.row6 .rp{background:var(--panel6);border-radius:24px;padding:32px;min-width:0}
@media (max-width:960px){.row6,.row6.flip{grid-template-columns:1fr;gap:28px;padding:44px 0}.row6.flip .rt{order:0}.row6 .rp{padding:18px;border-radius:20px}}

/* the app window every animation sits in */
.aw{background:#fff;border:1px solid var(--panel6-line);border-radius:14px;box-shadow:0 1px 2px rgba(12,18,16,.05),0 14px 34px rgba(12,18,16,.08);overflow:hidden;min-width:0}
.aw-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-bottom:1px solid #EEF1EF;background:#FBFCFB}
.aw-bar i{width:9px;height:9px;border-radius:50%;background:#E3E7E5}
.aw-bar span{margin-left:8px;font-size:12.5px;font-weight:600;color:#56636B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-body{padding:16px;font-size:13px;color:#111}

/* shared pieces */
.sc6{position:relative}
.sc6 .m{max-width:88%;padding:7px 10px;border-radius:10px;font-size:12.5px;line-height:1.38;color:#111}
.sc6 .m.out{align-self:flex-end}
.sc6 .m em{display:block;font-style:normal;font-size:11px;font-weight:700;color:#15803D;margin-bottom:1px}

/* Flows and Instagram: builder on the left, phone on the right; the step glows as the phone plays it */
.flows6{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:center}
.flows6 .aw-body{background-image:radial-gradient(#E3E7E5 1px,transparent 1px);background-size:14px 14px}
.fb{display:flex;flex-direction:column;align-items:stretch}
.nd{background:#fff;border:1px solid #DCE3DF;border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.4}
.nd .nh{display:block;font-size:11.5px;font-weight:700;color:#15803D;margin-bottom:4px}
.nd p{color:#1F2937}
.ln{width:2px;height:14px;background:#C8D3CD;margin:0 auto}
.chips6,.btns6{display:flex;flex-wrap:wrap;gap:5px}
.chips6 i{font-style:normal;font-weight:600;font-size:12px;background:#DCFCE7;color:#166534;border-radius:999px;padding:2px 9px}
.btns6{margin-top:6px}
.btns6 i{font-style:normal;font-size:12px;color:var(--wa-link);border:1px solid #DCE3DF;border-radius:8px;padding:3px 8px;background:#fff}
.file6{display:flex;align-items:center;gap:8px}
.file6 span{flex:none;background:#C62828;color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:3px 5px}
.loop.on .nd{animation:12s ease-in-out infinite both}
.loop.on .nd.g1{animation-name:g1}.loop.on .nd.g2{animation-name:g2}.loop.on .nd.g3{animation-name:g3}
@keyframes g1{0%,3%{box-shadow:none;border-color:#DCE3DF}7%,22%{box-shadow:0 0 0 3px rgba(34,197,94,.28);border-color:#22C55E}28%,100%{box-shadow:none;border-color:#DCE3DF}}
@keyframes g2{0%,16%{box-shadow:none;border-color:#DCE3DF}20%,38%{box-shadow:0 0 0 3px rgba(34,197,94,.28);border-color:#22C55E}44%,100%{box-shadow:none;border-color:#DCE3DF}}
@keyframes g3{0%,40%{box-shadow:none;border-color:#DCE3DF}46%,88%{box-shadow:0 0 0 3px rgba(34,197,94,.28);border-color:#22C55E}94%,100%{box-shadow:none;border-color:#DCE3DF}}

/* the phone beside the builder */
.ph6.mph,.ig6 .mph{width:230px;margin:0}
.ph6 .scr,.ig6 .mph .scr{height:420px}
.ph6 .body{gap:6px}
.sc6 .mph.wa .m.out{background:var(--wa-out)}
.qr6{display:flex;flex-direction:column;gap:4px;align-self:flex-start;width:80%}
.qr6 span{background:#fff;color:var(--wa-link);font-size:12px;font-weight:500;border-radius:8px;padding:6px;text-align:center}
.doc6{display:flex;gap:8px;align-items:center}
.doc6>span{flex:none;background:#C62828;color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:6px 5px}
.doc6 b{font-size:12px;font-weight:600}
.doc6 small{display:block;font-weight:400;color:#56636B;font-size:11px}

/* Inbox: list, chat, contact panel */
.aw-in .aw-body{display:grid;grid-template-columns:150px minmax(0,1fr) 170px;gap:0;padding:0;min-height:330px}
.il{border-right:1px solid #EEF1EF;padding:8px}
.ir{padding:8px;border-radius:8px;font-size:12px;line-height:1.3}
.ir b{display:block;font-size:12.5px}
.ir small{color:#56636B;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ir.on{background:#E8F7EE}
.ic{background:var(--wa-bg);padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.ic .m.in{background:#fff}.ic .m.out{background:var(--wa-out)}
.ic .bot{background:#fff}
.sys6{align-self:center;text-align:center;background:#FFF8E1;color:#4B4436;font-size:11.5px;font-weight:600;border-radius:8px;padding:4px 10px}
.ip{border-left:1px solid #EEF1EF;padding:12px}
.ipn{font-weight:700;font-size:13.5px;margin-bottom:8px}
.ip dl{display:flex;flex-direction:column;gap:9px}
.ip dt{font-size:11px;color:#56636B;font-weight:600}
.ip dd{position:relative;font-size:12.5px;font-weight:600;min-height:18px}
.ip dd .sw{position:absolute;left:0;top:0}
.ip .hot{color:#B91C1C}
.tg6{font-style:normal;display:inline-block;background:#EEF3F0;border-radius:999px;padding:1px 8px;margin:2px 4px 0 0;font-size:11.5px}
.scene .kx5{animation-name:kx5}
@keyframes kx5{0%,4%{opacity:0}8%,56%{opacity:1}60%,100%{opacity:0}}
.ip .kx{animation-name:kxs}
@keyframes kxs{0%,4%{opacity:0}8%,44%{opacity:1}48%,100%{opacity:0}}

/* Broadcasts: the message, the review, the cost, Send, the results */
.aw-bc .aw-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;background:#FBFCFB}
.bt6{align-self:start;background:#fff;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.08);padding:4px 4px 0;font-size:12.5px;line-height:1.4}
.bt6 .tim{display:grid;place-items:center;height:62px;border-radius:8px;background:linear-gradient(120deg,#7C2D12,#C2410C 50%,#B45309);color:#fff;font-family:var(--display);font-weight:600;font-size:16px}
.bt6 p{padding:6px 6px 0}
.bt6>span{display:block;margin:8px -4px 0;border-top:1px solid #E9EDEF;padding:7px;text-align:center;color:var(--wa-link);font-weight:500}
.br6{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.st6{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.st6 i{font-style:normal;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;background:#EEF1EF;color:#374151}
.st6 i.ok{background:#DCFCE7;color:#166534}.st6 i.on{background:var(--ink);color:#fff}
.bl6{display:flex;justify-content:space-between;gap:10px}
.bl6 b{font-variant-numeric:tabular-nums}
.rm6{font-size:11.5px;color:#92400E;background:#FEF3C7;border-radius:6px;padding:4px 8px}
.tot6{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #E3E7E5;padding-top:6px;font-weight:700}
.tot6 b{font-family:var(--display);font-size:17px}
.send6{position:relative;display:flex;justify-content:flex-end;margin-top:2px}
.btn6{display:inline-block;background:#15803D;color:#fff;font-weight:700;border-radius:8px;padding:7px 16px}
.cur{position:absolute;width:20px;height:20px;right:6px;top:18px;opacity:0}
.loop.on .cur{animation:cur6 12s ease-in-out infinite both}
@keyframes cur6{0%,32%{opacity:0;transform:translate(40px,30px)}38%{opacity:1;transform:translate(40px,30px)}44%{opacity:1;transform:translate(-26px,-6px)}46%{transform:translate(-26px,-6px) scale(.85)}48%,88%{opacity:1;transform:translate(-26px,-6px)}94%,100%{opacity:0}}
.res6{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.res6>div{display:grid;grid-template-columns:62px minmax(0,1fr) 46px;gap:8px;align-items:center;font-size:12px}
.res6 em{height:7px;border-radius:99px;background:#EEF1EF;overflow:hidden}
.res6 i{display:block;height:100%;width:var(--w);background:#0F766E;border-radius:99px;transform-origin:left}
.res6 b{text-align:right;font-variant-numeric:tabular-nums}

/* Instagram row */
.ig6 .mph .m.out{background:#5B3BE8}

/* reduced motion: the finished scene, nothing moves */
@media (prefers-reduced-motion:reduce){.loop.on .nd,.loop.on .cur{animation:none}.cur{display:none}}

/* phones: builder above the phone, panels stack, the inbox drops its list */
@media (max-width:760px){
 .flows6{grid-template-columns:1fr;justify-items:center}
 .flows6 .aw{width:100%}
 .flows6 .fb{flex-direction:row;align-items:stretch;gap:6px}
 .flows6 .ln{width:10px;height:2px;align-self:center;flex:none}
 .flows6 .nd{flex:1;padding:8px;font-size:11.5px}
 .flows6 .nd p,.flows6 .btns6,.flows6 .chips6 i:nth-child(n+2){display:none}
 .flows6 .nd .nh{margin:0;font-size:11px}
 .aw-in .aw-body{grid-template-columns:minmax(0,1fr)}
 .il{display:none}
 .ip{border-left:0;border-top:1px solid #EEF1EF}
 .ip dl{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
 .aw-bc .aw-body{grid-template-columns:1fr}
 .bt6{display:none}
}

/* ---------- WhatsApp features: AiSensy-clean job cards (white, hairline border, colour only in the icon) ---------- */
.v6 .lc{background:#fff;border:1px solid var(--line);box-shadow:none}
.v6 .lc:hover{border-color:#9CA8A2}
.v6 .lc .go{color:var(--accent-ink)}
.v6 .lc .scene{background:var(--panel6);border-radius:16px;padding:16px;margin-top:auto}
.v6 .lc .sc-chat{background:var(--wa-bg)}

/* ---------- WhatsApp features: entry links mock ---------- */
.el6{background:var(--panel6);border-radius:20px;padding:24px}
.el6 .h{font-weight:700;font-size:14px;margin-bottom:10px;color:var(--ink)}
.el6 ul{list-style:none;background:#fff;border:1px solid var(--panel6-line);border-radius:12px;overflow:hidden}
.el6 li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;padding:11px 14px;border-top:1px solid #EEF1EF;font-size:14px;align-items:center}
.el6 li:first-child{border-top:0}
.el6 li span{color:#374151}
.el6 li i{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.el6 .n{margin-top:8px;font-size:12.5px;color:var(--muted)}
.band-ink .el6{background:#1B2420}
.band-ink .el6 .h{color:#fff}
.band-ink .el6 .n{color:#AEB8B3}
@media (max-width:560px){.el6 li{grid-template-columns:1fr auto}.el6 li span{display:none}}
.row6.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:960px){.row6.flip{grid-template-columns:1fr}}
@keyframes kx5{0%,4%{opacity:0}8%,53%{opacity:1}57%,100%{opacity:0}}
.scene .kx5{animation:kx5 12s ease-out infinite both;animation-play-state:paused}
.loop.on .kx5{animation-play-state:running}
.js .scene .kx5{opacity:0}
@media (prefers-reduced-motion:reduce){.js .scene .kx5{animation:none;opacity:0}}
/* flatter: the app window is a white sheet on the panel, not a card with a frame and shadow; steps are outlined, not boxed */
.aw{border:0;box-shadow:0 0 0 1px rgba(12,18,16,.04)}
.nd{border:0;border-left:3px solid #DCE3DF;border-radius:0 10px 10px 0;background:#F7F9F8}
@keyframes g1{0%,3%{border-left-color:#DCE3DF;background:#F7F9F8}7%,22%{border-left-color:#22C55E;background:#E8F7EE}28%,100%{border-left-color:#DCE3DF;background:#F7F9F8}}
@keyframes g2{0%,16%{border-left-color:#DCE3DF;background:#F7F9F8}20%,38%{border-left-color:#22C55E;background:#E8F7EE}44%,100%{border-left-color:#DCE3DF;background:#F7F9F8}}
@keyframes g3{0%,40%{border-left-color:#DCE3DF;background:#F7F9F8}46%,88%{border-left-color:#22C55E;background:#E8F7EE}94%,100%{border-left-color:#DCE3DF;background:#F7F9F8}}
.bt6{box-shadow:none;border:0;background:#fff;outline:1px solid #EEF1EF}
.mini5{box-shadow:none}
.nd{border-radius:0}
/* review fixes (fresh-eyes critique, 18 Oct) */
.ic .m.in{background:#fff;align-self:flex-start}
.ic .m.out{background:var(--wa-out);align-self:flex-end}
.ic .m.out em{color:#166534}
.cm6{display:flex;gap:8px;align-items:flex-start;background:#F7F7F7;border-radius:12px;padding:8px;font-size:12px;line-height:1.35;color:#111}
.cm6>i{flex:none;width:34px;height:44px;border-radius:6px;background:linear-gradient(160deg,#9D174D,#DB2777);display:grid;place-items:center;font-style:normal;font-size:16px}
.cm6 small{display:block;margin-top:4px;padding-left:8px;border-left:2px solid #E5E7EB;color:#374151;font-size:11.5px}
.ig6 .mph .scr{height:440px}
.tp6-big{display:flex;flex-direction:column;align-items:flex-start;max-width:150px}
.tp6-big b{font-family:var(--display);font-weight:600;font-size:clamp(52px,6vw,72px);line-height:1;color:var(--mint)}
.tp6-big span{margin-top:6px;font-size:13px;font-weight:600;color:#C9D1CD;line-height:1.3}
.tp6-split .g{border-color:#F472B6}
@media (max-width:980px){.tp6-split{flex-wrap:wrap}}
/* phones: the animation follows the heading, the text comes after it */
@media (max-width:960px){
 .row6 .rt{display:contents}
 .row6 .rt h3{order:0}.row6 .rp{order:1}.row6 .rt p{order:2;margin-top:0}.row6 .rt .ticks{order:3;margin-top:0}.row6 .rt .tlink{order:4;margin-top:0}
 .row6,.row6.flip{gap:16px}
}
@media (max-width:760px){.flows6 .fb{align-items:center}.flows6 .nd{min-height:0}}
.ig6 .mph .scr{height:520px}

/* ---------- the 100% seal (option C, yellow) ---------- */
.seal{position:absolute;width:156px;height:156px;transform:rotate(-10deg);z-index:4;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
.seal span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1;color:#0F172A}
.seal b{font-family:var(--display);font-weight:700;font-size:36px;letter-spacing:-.02em}
.seal i{font-style:normal;font-weight:700;font-size:12.5px}
.seal em{font-style:normal;font-weight:600;font-size:10.5px;margin-top:4px}
.hero-b .pwrap{position:relative}
.seal.pos{right:-170px;top:-34px}
.hero.short .wrap{position:relative}
.seal.pr{right:16px;top:50%;transform:translateY(-50%) rotate(-10deg);width:176px;height:176px}
.seal.pr b{font-size:40px}.seal.pr i{font-size:14px}.seal.pr em{font-size:11.5px}
@media (max-width:960px){.seal.pos{right:-8px;top:-112px;width:104px;height:104px}.seal.pos b{font-size:25px}.seal.pos i{font-size:9.5px}.seal.pos em{font-size:8.5px;margin-top:2px}}
@media (max-width:760px){.seal.pr{position:relative;right:auto;top:auto;transform:rotate(-8deg);margin:0 0 18px;width:120px;height:120px}.seal.pr b{font-size:28px}.seal.pr i{font-size:10.5px}.seal.pr em{font-size:9px}}
.seal span{inset:15%;border-radius:50%;background:#FACC15}
.v6 .proof-b{padding-top:200px}

/* ---------- Home review, points 1 to 3 (18 Oct): channel switch on the hero phone ---------- */
.pswitch{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.ptabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.ptabs [role=tab]{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:#E3E8E5;font-size:14.5px;font-weight:600;cursor:pointer}
.ptabs [role=tab][aria-selected=true]{background:#fff;color:var(--ink)}
.ptabs [role=tab]:focus-visible{outline:2px solid #86EFAC;outline-offset:2px}
.pswitch [role=tabpanel][hidden]{display:none}
.pswitch .seal.pos{top:30px}
@media (max-width:960px){.pswitch .seal.pos{top:-64px;right:-6px}.ptabs [role=tab]{min-height:44px}}

/* ---------- preview of points 4 to 7 (body.pv only) ---------- */
.ind7{padding:56px 0 8px}
.ind7 h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:20px}
.ind7 ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ind7 a{display:flex;gap:12px;align-items:center;min-height:72px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s}
.ind7 a:hover{border-color:#9CA8A2}
.ind7 svg{width:24px;height:24px;color:var(--green-700);flex:none}
.ind7 b{display:block;font-size:16px}
.ind7 small{display:block;font-size:14px;color:var(--muted)}
@media (max-width:860px){.ind7 ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ind7 ul{grid-template-columns:1fr}}
.more7{margin-top:24px;padding-top:48px;border-top:1px solid var(--line)}
.more7 h3{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);margin-bottom:20px}
.more7 ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.more7 a{display:flex;flex-direction:column;gap:4px;padding:22px 20px;min-height:140px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);background:#fff}
.more7 a:hover{background:#F6F8F7}
.more7 svg{width:24px;height:24px;color:var(--green-700);margin-bottom:6px}
.more7 b{font-size:16.5px}
.more7 small{font-size:14.5px;color:var(--muted)}
.more7 em{margin-top:auto;font-style:normal;font-size:12.5px;font-weight:600;color:#166534}
@media (max-width:860px){.more7 ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.more7 ul{grid-template-columns:1fr}.more7 a{min-height:0}}
.start7{margin-top:40px;display:flex;gap:24px;align-items:center;justify-content:space-between;padding:24px 28px;border-radius:18px;background:var(--panel6)}
.start7 p{font-size:17px;line-height:1.55;color:var(--text-2);max-width:68ch}
.start7 p b{color:var(--ink)}
.start7 .btn{flex:none}
@media (max-width:760px){.start7{flex-direction:column;align-items:flex-start;padding:20px}}
/* point 7: wide logos (WooCommerce) get their real width */
.pv .logo-c svg[aria-label="WooCommerce logo"]{width:120px;height:24px;margin:5px 0}

@media (max-width:960px){.pswitch .seal.pos{top:58px;right:-12px;width:92px;height:92px}.pswitch .seal.pos b{font-size:22px}.pswitch .seal.pos i{font-size:8.5px}.pswitch .seal.pos em{font-size:7.5px}}

/* ---------- Zero markup glass badge (18 Oct 20:40), replaces the star seal ----------
   UI UX Pro Max glassmorphism rules: blur 10 to 20px, white 15 to 30%, 1px light border, a coloured backdrop, text 4.5:1, reduced motion.
   21st.dev patterns rebuilt by hand: inset highlight, soft glow, a one-time border beam. */
@property --zma{syntax:'<angle>';inherits:false;initial-value:0deg}
.zm{position:absolute;z-index:4;display:flex;align-items:center;gap:14px;margin:0;width:max-content;max-width:310px;padding:16px 22px 16px 16px;border-radius:22px;text-align:left;color:#fff;
 background:linear-gradient(140deg,rgba(255,255,255,.17),rgba(255,255,255,.05) 62%);
 -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
 border:1px solid rgba(255,255,255,.22);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06),0 22px 46px -14px rgba(0,0,0,.6),0 0 64px rgba(74,222,128,.22)}
.zm::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
 background:conic-gradient(from var(--zma),transparent 0 68%,#86EFAC 84%,#FACC15 92%,transparent 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 opacity:0;animation:zmbeam 2.4s .7s ease-in-out 1}
@keyframes zmbeam{0%{--zma:0deg;opacity:0}15%{opacity:1}85%{opacity:1}100%{--zma:360deg;opacity:0}}
@media (prefers-reduced-motion:reduce){.zm::after{animation:none}}
.zm-ic{flex:none;width:44px;height:44px;border-radius:50%;background:#4ADE80;display:flex;align-items:center;justify-content:center;
 box-shadow:0 0 0 6px rgba(74,222,128,.16),0 6px 16px rgba(74,222,128,.35)}
.zm-ic svg{display:block;width:24px;height:24px}
.zm-t{display:block;min-width:0}
.zm strong{display:block;font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:0;word-spacing:.12em;white-space:nowrap;color:#fff}
.zm-t>span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:#D1FAE5;font-weight:500}
.pswitch .zm.pos{right:-330px;top:30px}
.zm.pr{right:16px;top:50%;transform:translateY(-50%);max-width:370px;padding:22px 28px 22px 22px;gap:16px}
.zm.pr strong{font-size:38px}.zm.pr .zm-t>span{font-size:16px;margin-top:8px}.zm.pr .zm-ic{width:52px;height:52px}.zm.pr .zm-ic svg{width:28px;height:28px}
@media (max-width:1280px){.pswitch .zm.pos{right:-310px;max-width:296px}}
@media (max-width:960px){.pswitch .zm.pos{position:relative;right:auto;top:auto;width:auto;max-width:340px;margin-bottom:8px;padding:12px 16px 12px 12px;gap:12px;border-radius:18px}
 .pswitch .zm.pos .zm-ic{width:38px;height:38px}.pswitch .zm.pos strong{font-size:23px}.pswitch .zm.pos .zm-t>span{font-size:13.5px;margin-top:4px}}
@media (max-width:1100px){.zm.pr{max-width:300px;padding:16px 20px 16px 16px}.zm.pr strong{font-size:28px}.zm.pr .zm-t>span{font-size:14.5px}.zm.pr .zm-ic{width:44px;height:44px}}
@media (max-width:760px){.zm.pr{position:relative;order:2;right:auto;top:auto;transform:none;margin:-12px 0 0;max-width:340px;padding:14px 18px 14px 14px}.zm.pr strong{font-size:25px}.zm.pr .zm-t>span{font-size:14px}}

/* ---- theme-dark.css ---- */
/* Dark theme for the Chat first direction (Part B v2, 18 Oct 2026). Loaded after ogir.css on body.dark pages.
   Ground is OGIR ink #0C1210 (DESIGN.md token), raised surfaces a step lighter, one bright green for actions.
   Chats and app screens stay light, as they really look on a phone and in the app. */
body.dark{
  --bg:#0C1210; --bg-2:#111916; --card:#141D19; --card-line:rgba(255,255,255,.09); --line:rgba(255,255,255,.10);
  --text:#E6ECE9; --text-2:#C3CCC7; --muted:#9AA7A1; --accent:#22C55E; --accent-ink:#16A34A; --accent-tint:rgba(34,197,94,.12);
  background:#0C1210; color:var(--text)
}
body.dark h1,body.dark h2,body.dark h3{color:#fff}
body.dark main a:not(.btn):not(.lc){color:#4ADE80}
body.dark :focus-visible{outline-color:#4ADE80}
body.dark ::selection{background:#166534;color:#fff}
body.dark .lead{color:var(--text-2)}
body.dark .muted{color:var(--muted)}
/* buttons */
body.dark .btn-primary{background:#22C55E;color:#0C1210}
body.dark .btn-primary:hover{background:#4ADE80}
body.dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
body.dark .btn-ghost:hover{border-color:#fff}
body.dark .tlink{color:#4ADE80}
/* nav */
body.dark .nav{background:rgba(12,18,16,.88);border-bottom-color:rgba(255,255,255,.08)}
body.dark .logo{color:#fff}
body.dark .nav-links a{color:#C3CCC7}
body.dark .nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
body.dark .menu-btn{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
body.dark .mnav{background:#0C1210;border-bottom-color:rgba(255,255,255,.1)}
body.dark .mnav li a{color:#fff;border-bottom-color:rgba(255,255,255,.1)}
/* hero, as in the 1 Oct Chat first direction: centred, one green phrase, phone on the chat wallpaper */
.hero-d{padding:72px 0 0;text-align:center;position:relative;overflow-x:clip}
.hero-d h1{max-width:16ch;margin:0 auto;font-size:clamp(40px,5vw,62px)}
.hero-d h1 span{color:#22C55E}
.hero-d .lead{margin:22px auto 30px;max-width:54ch}
.hero-d .btns{justify-content:center}
.hero-d .stage-d{position:relative;margin:56px auto 0;max-width:1080px;background:var(--wa-bg);border-radius:32px 32px 0 0;padding:44px 24px 0;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;min-height:560px}
.hero-d .side{display:flex;flex-direction:column;gap:16px}
.hero-d .side.l{align-items:flex-end}.hero-d .side.r{align-items:flex-start}
.hero-d .bubble{background:#fff;color:#0C1210;border-radius:18px 18px 18px 4px;padding:12px 16px;text-align:left;font-size:15px;width:max-content;max-width:240px}
.hero-d .side.r .bubble{border-radius:18px 18px 4px 18px;background:var(--wa-out)}
.hero-d .bubble b{display:block;font-family:var(--display);font-weight:600;font-size:26px;color:#166534;line-height:1.1;letter-spacing:-.01em}
.hero-d .pwrap{margin-bottom:-2px;width:320px}
@media (max-width:960px){.hero-d .pwrap{width:min(320px,100%);margin:0 auto}}
.hero-d .phone .phone-screen{height:540px}
.hero-d .cap-d{font-size:14px;color:var(--muted);margin-top:14px}
@media (max-width:960px){.hero-d .stage-d{grid-template-columns:1fr;padding:28px 12px 0;min-height:0}.hero-d .side{display:none}}
/* proof */
body.dark .proof{background:#111916;border-color:rgba(255,255,255,.08)}
body.dark .proof li{color:#C3CCC7}
body.dark .proof li svg{color:#4ADE80}
body.dark .proof a{color:#C3CCC7}
/* bands */
body.dark .tint{background:#111916}
body.dark .green{background:#0F2018}
/* problems */
body.dark .probs{border-top-color:rgba(255,255,255,.12)}
body.dark .prob+.prob{border-left-color:rgba(255,255,255,.10)}
body.dark .prob .said{border-color:transparent}
body.dark .prob p{color:var(--text-2)}
body.dark .prob .fix{color:#fff;border-top-color:rgba(255,255,255,.18)}
body.dark .prob .fix svg{color:#4ADE80}
@media (max-width:900px){body.dark .prob,body.dark .prob+.prob{border-bottom-color:rgba(255,255,255,.10)}}
/* scenes on dark cards */
body.dark .lc{--card:#141D19}
body.dark .lc p.l{color:var(--text-2)}
body.dark .lc .t svg,body.dark .lc .go{color:var(--cd)}
/* tabs */
body.dark .ftabs [role=tab]:hover{background:rgba(255,255,255,.05)}
body.dark .ftabs [role=tab][aria-selected=true]{background:#141D19;border-color:rgba(255,255,255,.12)}
body.dark .ftabs [role=tab] b{color:#fff}
body.dark .ftabs [role=tab][aria-selected=true] svg{color:#4ADE80}
body.dark figure.app figcaption{color:var(--muted)}
body.dark .browser img,body.dark .browser .bar{border-color:rgba(255,255,255,.14)}
/* logos */
body.dark .logos{border-color:rgba(255,255,255,.10)}
body.dark .logo-c{background:#141D19;border-color:rgba(255,255,255,.10)}
body.dark .logo-c svg{fill:#E6ECE9}
body.dark .logo-c .wm{color:#E6ECE9}
body.dark .logo-c b{color:#fff}
/* calculator: inputs on a dark card, the bill on paper */
body.dark .bill{background:#141D19;border-color:rgba(255,255,255,.10)}
body.dark .rng label,body.dark .rng output,body.dark .pick legend{color:#fff}
body.dark .rng input{accent-color:#22C55E}
body.dark .seg{background:#0C1210;border-color:rgba(255,255,255,.14)}
body.dark .seg button,body.dark .seg label{color:#C3CCC7}
body.dark .seg button[aria-pressed=true],body.dark .seg input:checked+span{background:#22C55E;color:#0C1210}
body.dark .rates div{background:#0C1210}
body.dark .rates dd{color:#fff}
body.dark .bill-out{background:#E8F7EE;color:#1F2937}
body.dark .bill-out h3{color:#0C1210}
body.dark .lines li{border-bottom-color:rgba(12,18,16,.12)}
body.dark .lines li b{color:#0C1210}
body.dark .lines li.zero span,body.dark .lines li.zero b{color:#166534}
body.dark .tot b{color:#0C1210}
body.dark .bill-out .note{color:#374151}
body.dark main .bill-out .note a{color:#166534}
/* plans strip, faq */
body.dark .pstrip{border-color:rgba(255,255,255,.12)}
body.dark .pstrip dd{color:#fff}
body.dark .fest{color:#FDBA74}
body.dark .faq details{border-color:rgba(255,255,255,.12)!important}
body.dark .faq summary{color:#fff}
body.dark .faq summary svg{color:var(--muted)}
/* closing band: the brand green, so it stands apart from the dark page */
body.dark .close{background:#15803D;color:#E8F7EE}
body.dark .close p{color:#E8F7EE}
body.dark .close .btn-bright{background:#0C1210;color:#fff}
body.dark .close .btn-bright:hover{background:#1F2937}
/* footer and phone bar */
body.dark footer{background:#070B09;border-top:1px solid rgba(255,255,255,.06)}
body.dark .mbar{background:rgba(12,18,16,.95);border-top-color:rgba(255,255,255,.1)}
body.dark .scan{border-color:rgba(255,255,255,.25)}
body.dark .scan b{color:#fff}

/* ---- v7.css ---- */
/* ---------- Version 7 Home: the hero you can talk to (UX research prototype 1, chosen by Abhijeet 18 Oct 2026) ----------
   Ported from ogir-redesign/ux-research/src/p1-hero-talk.src.html. Class names that clash with Version 6 carry a t7 prefix.
   Theme: the old OGIR dark theme, black fading into dark green (#0D1210 > #121E16 > #17281B, glow #1C3320 bottom right). */
.hero7{--wa-bg:#EFEAE2;--wa-out:#D9FDD3;--wa-head:#075E54;--wa-link:#027EB5;--pill:999px;
 background:radial-gradient(70% 55% at 85% 100%,#1C3320 0%,rgba(28,51,32,0) 70%),linear-gradient(180deg,#0D1210 0%,#0D1210 38%,#121E16 62%,#17281B 100%);
 color:#E7ECEA;position:relative;overflow:hidden;padding:48px 0 64px}
.hero7>.wrap{position:relative;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:44px;align-items:start}
.hero7 h1{color:#fff;font-size:clamp(40px,3.4vw,48px);line-height:1.03;letter-spacing:-.02em;word-spacing:.06em;margin:0;max-width:none}
.hero7 h1 span{color:var(--green-bright,#22C55E)}
.hero7 .lead{margin:20px 0 0;font-size:18.5px;line-height:1.55;color:#C9D2CE;max-width:40ch}
.hero7 .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero7 .zm{position:relative;right:auto;top:auto;margin-top:28px;width:max-content;max-width:100%}

/* stage */
.t7stage{scroll-margin-top:84px;display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-areas:"biz biz" "phone trace";gap:16px 24px}
.hero7 .biz{grid-area:biz;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero7 .biz .lbl{font-size:14.5px;color:#C9D2CE;margin-right:4px}
.hero7 .biz button{min-height:44px;padding:0 16px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-weight:500;font-size:15px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.hero7 .biz button:hover{border-color:#fff}
.hero7 .biz button[aria-pressed=true]{background:#fff;color:#0C1210;border-color:#fff}

.t7phone{grid-area:phone;width:340px;height:612px;border-radius:44px;background:#0B0F0E;padding:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14) inset}
.hero7 .screen{height:100%;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;background:var(--wa-bg)}
.hero7 .ph-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;background:var(--wa-head);color:#fff}
.hero7 .t7av{width:34px;height:34px;border-radius:50%;background:#E8F7EE;color:#166534;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.hero7 .ph-head b{display:block;font-size:15px;line-height:1.2}
.hero7 .ph-head small{font-size:12px;color:#D1E7E2}
.hero7 .log{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.hero7 .sugs{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 2px;scrollbar-width:none}
.hero7 .sugs::-webkit-scrollbar{display:none}
.hero7 .sugs button{flex:none;min-height:44px;padding:0 14px;border-radius:var(--pill);border:1px solid #D1D7DB;background:#fff;color:#111B21;font-size:14px;cursor:pointer;white-space:nowrap}
.hero7 .sugs button:hover{border-color:#15803D;color:#166534}
.hero7 .compose{display:flex;gap:8px;align-items:center;padding:8px 10px 12px;margin:0}
.hero7 .compose input{flex:1;min-width:0;height:44px;border-radius:22px;border:0;padding:0 16px;background:#fff;font-size:15px;color:#111B21;font-family:inherit}
.hero7 .compose input::placeholder{color:#5E6A70}
.hero7 .compose button{width:44px;height:44px;border-radius:50%;border:0;background:#00A884;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.hero7 .compose button svg{width:20px;height:20px}
.hero7 .events{display:none;flex-direction:column;gap:6px;padding:8px 10px 12px}
.hero7 .events p{font-size:12.5px;color:#54656F;text-align:center;margin:0}
.hero7 .events button{min-height:44px;border-radius:12px;border:1px solid #D1D7DB;background:#fff;color:#111B21;font-size:14.5px;font-weight:500;cursor:pointer}
.hero7 .events button:hover{border-color:#15803D}
.hero7 .events button[disabled]{color:#667781;cursor:default;border-color:#E9EDEF}
.hero7 .screen.store .compose,.hero7 .screen.store .sugs{display:none}
.hero7 .screen.store .events{display:flex}

/* WhatsApp bits (from the prototype base) */
.hero7 .bub{max-width:84%;padding:7px 10px 5px;border-radius:10px;font-size:14.5px;line-height:1.42;color:#111B21;white-space:pre-line;box-shadow:0 1px .5px rgba(11,20,26,.13);word-wrap:break-word}
.hero7 .bub.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.hero7 .bub.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:2px}
.hero7 .bub .tm{display:block;text-align:right;font-size:11px;color:#5E6A70;margin-top:1px;line-height:1.2}
.hero7 .bub .tm svg{display:inline-block;width:16px;height:11px;vertical-align:-1px;margin-left:2px}
.hero7 .t7doc{display:flex;gap:10px;align-items:center;background:#F5F6F6;border-radius:8px;padding:8px 10px;margin:2px 0;font-size:14px;color:#111B21;white-space:normal}
.hero7 .t7doc .t7ic{width:30px;height:36px;border-radius:4px;background:#E5484D;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.hero7 .qr-row{display:flex;flex-direction:column;gap:4px;align-self:flex-start;max-width:84%;width:84%}
.hero7 .qr-row button{min-height:44px;background:#fff;border:0;border-radius:10px;color:var(--wa-link);font-weight:500;font-size:14.5px;cursor:pointer;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.hero7 .qr-row button:hover{background:#F5F6F6}
.hero7 .qr-row button[disabled]{color:#667781;cursor:default}
.hero7 .t7sys{align-self:center;background:#FFF5C4;color:#54656F;font-size:12.5px;line-height:1.4;padding:5px 10px;border-radius:8px;text-align:center;max-width:92%}
.hero7 .t7typing{align-self:flex-start;background:#fff;border-radius:10px;border-top-left-radius:2px;padding:10px 12px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.hero7 .t7typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:t7dot 1.1s 2 ease-in-out}
.hero7 .t7typing i:nth-child(2){animation-delay:.15s}.hero7 .t7typing i:nth-child(3){animation-delay:.3s}
@keyframes t7dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.hero7 .t7typing i{animation:none}.hero7 .log{scroll-behavior:auto}}

/* Instagram skin */
.hero7 .screen.ig{background:#fff}
.hero7 .screen.ig .ph-head{background:#fff;color:#0F1419;border-bottom:1px solid #EFEFEF}
.hero7 .screen.ig .ph-head small{color:#5B6470}
.hero7 .screen.ig .t7av{background:conic-gradient(from 210deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75);color:#fff;padding:2px}
.hero7 .screen.ig .t7av span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;color:#0F1419;font-size:12px}
.hero7 .screen.ig .compose input{background:#EFEFEF}
.hero7 .screen.ig .compose button{background:#3B5BDB}
.hero7 .ig-tabs{display:none;border-bottom:1px solid #EFEFEF;background:#fff;padding:4px 12px 0}
.hero7 .screen.ig .ig-tabs{display:flex}
.hero7 .ig-tabs button{flex:1;min-height:44px;border:0;background:none;font-size:14px;font-weight:600;color:#5B6470;cursor:pointer;border-bottom:2px solid transparent}
.hero7 .ig-tabs button[aria-selected=true]{color:#0F1419;border-bottom-color:#0F1419}
.hero7 .reel{display:none}
.hero7 .screen.ig.view-reel .reel{display:block}
.hero7 .screen.ig.view-reel .log{display:none}
.hero7 .reel .pic{height:150px;background:linear-gradient(135deg,#7C2D12,#9A3412 55%,#B93D0B);display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:24px;font-weight:600;text-align:center;line-height:1.1}
.hero7 .reel .t7cap{padding:8px 12px;font-size:13.5px;color:#0F1419;border-bottom:1px solid #EFEFEF;margin:0}
.hero7 .reel ul{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:#0F1419;max-height:210px;overflow-y:auto}
.hero7 .reel li b{font-weight:600;margin-right:6px}
.hero7 .reel li.reply{padding-left:18px;color:#262626}
.hero7 .screen.ig .bub.in{background:#EFEFEF;box-shadow:none;border-radius:18px}
.hero7 .screen.ig .bub.out{background:#3B5BDB;color:#fff;box-shadow:none;border-radius:18px}
.hero7 .screen.ig .bub.out .tm{color:#F1F4FF}
.hero7 .screen.ig .qr-row button{border:1px solid #DBDBDB;box-shadow:none;color:#0F1419;font-weight:600}

/* "What OGIR did": frosted glass on the dark band (blur 16px, white 6%, 1px light border, solid fallback) */
.hero7 .trace{grid-area:trace;align-self:start;border-radius:20px;padding:20px 20px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
@supports (backdrop-filter:blur(16px)){.hero7 .trace{backdrop-filter:blur(16px) saturate(1.3)}}
.hero7 .trace h2{font-family:var(--body,inherit);font-size:16px;font-weight:600;color:#fff;letter-spacing:0;word-spacing:0;line-height:1.35;margin:0}
.hero7 .trace>p{font-size:14px;color:#D1E7DA;margin:4px 0 0;line-height:1.5}
.hero7 .trace ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:0;max-height:420px;overflow-y:auto}
.hero7 .trace li{position:relative;padding:8px 0 8px 22px;font-size:14px;line-height:1.45;color:#E7ECEA;border-top:1px solid rgba(255,255,255,.08)}
.hero7 .trace li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:8px;border-radius:50%;background:#86EFAC}
.hero7 .trace li.miss::before{background:#FBBF24}
.hero7 .trace li.t7note::before{background:#93C5FD}
.hero7 .trace li time{display:block;font-size:12.5px;color:#BCD9C8;font-variant-numeric:tabular-nums}
.hero7 .trace li q{quotes:"‘" "’";color:#fff;font-weight:600}
.hero7 .trace .reset,.hero7 .trace .more{margin-top:12px;min-height:44px;padding:0 14px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:14px;cursor:pointer}
.hero7 .trace .reset:hover,.hero7 .trace .more:hover{border-color:#fff}
.hero7 .trace .empty{color:#D1E7DA}
.hero7 .trace .more{display:none;margin-right:8px;align-items:center}

/* "Try it on your own phone" */
.hero7 .own{margin-top:32px;display:flex;gap:16px;align-items:center;max-width:420px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.hero7 .t7qr{width:96px;height:96px;flex:none;background:#fff;border-radius:10px;padding:4px}
.hero7 .t7qr svg{display:block;width:100%;height:100%}
.hero7 .own p{font-size:15px;line-height:1.5;color:#C9D2CE;margin:0}
.hero7 .own strong{color:#fff;font-weight:600}
.hero7 .own a{color:#86EFAC;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.hero7 .t7open{display:none}
.t7sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1100px){
 .hero7>.wrap{grid-template-columns:minmax(0,1fr);gap:40px}
 .hero7 .t7copy{max-width:640px}
}
@media (max-width:720px){
 .hero7{padding:32px 0 40px}
 .hero7 h1{font-size:clamp(32px,9.4vw,40px);overflow-wrap:anywhere}
 .hero7 .lead{font-size:17.5px}
 .hero7>.wrap{gap:24px}
 .t7stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"biz" "phone" "trace";justify-items:center;min-width:0;width:100%}
 .hero7 .biz{justify-content:center}
 .hero7 .biz .lbl{width:100%;text-align:center;margin:0}
 .t7phone{width:100%;max-width:358px;height:580px}
 .hero7 .trace{width:100%;max-width:358px;padding:16px}
 .hero7 .trace ol{max-height:none}
 .hero7 .trace li:not(:last-child){display:none}
 .hero7 .trace.all li{display:block}
 .hero7 .trace .more{display:inline-flex}
 .hero7 .t7qr,.hero7 .t7scan{display:none}
 .hero7 .t7open{display:inline}
 .hero7 .own{margin-top:24px;padding-top:20px}
 .hero7 .zm{margin-top:24px}
}

/* dark nav on Version 7 Home only, to match the approved prototype */
.v7d .nav{background:rgba(13,18,16,.94);border-bottom-color:rgba(255,255,255,.08)}
@supports (backdrop-filter:blur(8px)){.v7d .nav{background:rgba(13,18,16,.96);backdrop-filter:saturate(1.4) blur(12px)}}
.v7d .nav .nav-links a{color:#E7ECEA}
.v7d .nav .nav-links a:hover{color:#86EFAC;background:rgba(34,197,94,.12)}
.v7d .nav .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.v7d .nav .btn-ghost:hover{border-color:#fff}
.v7d .nav .btn-primary{background:#22C55E;color:#0C1210}
.v7d .nav .btn-primary:hover{background:#4ADE80}
.v7d .nav .menu-btn{color:#fff}
.v7d .proof-b{padding-top:28px}
.hero7 .btn-onDark{background:#22C55E;color:#0C1210}
.hero7 .btn-onDark:hover{background:#4ADE80}
.hero7 .btn-light{background:#fff;color:#0C1210}
.hero7 .btn-light:hover{background:#E8F7EE}
.v7d .nav .menu-btn{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.v7d .nav .menu-btn svg{stroke:#fff}
/* detector: no coloured glow on the dark hero; the background already carries the green */
.hero7 .zm{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06),0 22px 46px -14px rgba(0,0,0,.6)}
.hero7 .zm-ic{box-shadow:0 0 0 6px rgba(74,222,128,.16)}
/* fresh review fixes (18 Oct, 23:40) */
.hero7 .log>:first-child{margin-top:auto}
.hero7 .zm{padding:12px 18px 12px 12px;gap:12px}
.hero7 .zm strong{font-size:22px}
.hero7 .zm-t>span{font-size:13.5px;margin-top:4px}
.hero7 .zm-ic{width:36px;height:36px}
.hero7 .zm-ic svg{width:20px;height:20px}
.hero7 .sugs{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.v7d .mbar .btn-primary{background:#22C55E;color:#0C1210}

/* ---------- Version 7 Pricing: the bill as one sum (UX research prototype 2, ideas 4 and 5) ---------- */
.sum7{padding:72px 0 8px}
.sum7 .head{max-width:720px;margin-bottom:0}
.sum7 h2{font-size:clamp(32px,3.8vw,48px);line-height:1.06}
.sum7 .head p{margin-top:14px;font-size:19px;line-height:1.55;color:var(--text-2)}
.pick7{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;align-items:center}
.pick7 .lbl{font-size:15px;color:var(--muted);margin-right:4px}
.pick7 button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.pick7 button:hover{border-color:var(--ink)}
.pick7 button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.sum7 .eq{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.1fr) auto minmax(0,.9fr) auto minmax(0,1.25fr);align-items:stretch}
.sum7 .op{font-family:var(--display);font-weight:600;font-size:52px;line-height:1;color:var(--ink);display:grid;place-items:center;padding:0 14px}
.sum7 .tile{border-radius:24px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px;min-height:208px}
.sum7 .tile .k7{font-size:15px;font-weight:600}
.sum7 .tile .v7{font-family:var(--display);font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:auto}
.sum7 .tile .s7{font-size:14.5px;line-height:1.45}
.sum7 .t-plan{background:#E8F7EE;color:#166534}
.sum7 .t-plan .v7{color:var(--ink)}
.sum7 .t-meta{background:#EAF0FE;color:#1E3A8A}
.sum7 .t-meta .v7{color:#1D4ED8;font-size:34px}
.sum7 .t-zero{background:#fff;color:#166534;border:2px solid #15803D}
.sum7 .t-zero .v7{color:#15803D;font-size:56px}
.sum7 .t-bill{background:#0D1210;color:#C9D2CE}
.sum7 .t-bill .k7{color:#fff}
.sum7 .t-bill .v7{color:#fff;font-size:30px;line-height:1.15}
.sum7 .t-bill .v7 small{display:block;font-family:var(--body);font-size:15px;font-weight:500;color:#C9D2CE;letter-spacing:0;margin-top:4px}
.sum7 .example{margin-top:18px;font-size:16px;color:var(--text-2)}
.sum7 .example b{color:var(--ink);font-variant-numeric:tabular-nums}
.sum7 .example a{font-weight:600;display:inline-flex;align-items:center;min-height:44px;margin-left:8px}
.sum7 .foot{font-size:14px;color:var(--muted);margin-top:4px}
@media (max-width:1060px){
 .sum7 .eq{grid-template-columns:1fr;max-width:520px}
 .sum7 .op{padding:6px 0 6px 22px;font-size:40px;justify-content:start}
 .sum7 .tile{min-height:0}
 .sum7 .tile .v7{margin-top:6px}
}
@media (max-width:640px){.sum7{padding:48px 0 0}.sum7 .tile .v7{font-size:38px}.sum7 .t-zero .v7{font-size:48px}}

/* Meta's charges as chats, in place of the rate table */
.chats7 .cgrid7{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chats7 .ch{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.chats7 .wall{background:#EFEAE2;padding:16px 14px;display:flex;flex-direction:column;gap:6px;min-height:128px;justify-content:flex-end}
.chats7 .bub{max-width:92%;padding:7px 10px 5px;border-radius:10px;font-size:14px;line-height:1.42;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13);word-wrap:break-word}
.chats7 .bub.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.chats7 .bub.out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:2px}
.chats7 .bub .tm{display:block;text-align:right;font-size:11px;color:#5E6A70;margin-top:1px;line-height:1.2}
.chats7 .bub.igo{background:#3B5BDB;color:#fff;border-radius:16px}.chats7 .bub.igo .tm{color:#F1F4FF}
.chats7 .bub.igi{border-radius:16px}
.chats7 .wall .tag7{align-self:center;font-size:12px;color:#54656F;background:#FFF5C4;border-radius:6px;padding:3px 8px}
.chats7 .info{padding:16px 18px 18px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.chats7 h3{font-size:18px}
.chats7 .rate{font-family:var(--display);font-weight:600;font-size:26px;color:#1D4ED8;font-variant-numeric:tabular-nums;text-align:right;line-height:1.1}
.chats7 .rate.free{color:#15803D}
.chats7 .what{grid-column:1/-1;font-size:14.5px;color:var(--text-2);line-height:1.5;margin:0}
.chats7 .ogir7{grid-column:1/-1;margin:8px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:14px;color:#166534;font-weight:600;display:flex;gap:8px;align-items:center}
.chats7 .ogir7 svg{width:18px;height:18px;flex:none}
.chats7 .ratecite{margin-top:20px}
@media (max-width:980px){.chats7 .cgrid7{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.chats7 .cgrid7{grid-template-columns:1fr}}
.sum7 .example,.sum7 .foot{max-width:none}
.sum7 .example b{white-space:nowrap}
/* same no-glow rule for the Pricing badge on Version 7 */
.zm.pr{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06),0 22px 46px -14px rgba(0,0,0,.6)}
.zm.pr .zm-ic{box-shadow:0 0 0 6px rgba(74,222,128,.16)}
/* fresh review fixes for Pricing (18 Oct, 23:55) */
.sum7 .t-bill .v7{font-size:40px}
.sum7 .t-bill .v7 small.plus{display:inline;font-family:var(--display);font-size:22px;font-weight:600;color:#fff;margin:0}
.sum7 .t-meta .v7{font-size:24px}
.sum7 .example .how{color:var(--muted);font-size:14.5px}
.chats7 .rate small{display:block;font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted)}
.chats7 .head .ogir7{margin:14px 0 0;padding:0;border:0;font-size:15.5px;display:flex;gap:8px;align-items:center;color:#166534;font-weight:600}
.chats7 .head .ogir7 svg{width:20px;height:20px;flex:none}
@media (max-width:640px){
 .chats7 .wall{min-height:0;padding:10px 12px}.chats7 .cgrid7{gap:10px}
 .sum7 .tile{padding:16px 18px}.sum7 .op{font-size:28px;padding:0 0 0 18px}.sum7 .t-zero .v7{font-size:40px}.sum7 .t-bill .v7{font-size:34px}
}
.sum7 .t-bill .v7 small.plus{display:block;font-size:20px;margin-top:4px}

/* ---------- Questions as a chat (UX research prototype 3), Home and Pricing ---------- */
.faqc7{padding:80px 0 88px}
.faqc7>.wrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start}
.faqc7>.wrap>*{min-width:0}
.fside7{position:sticky;top:100px}
.fside7 h2{font-size:clamp(32px,3.8vw,48px);line-height:1.06}
.fside7 p{margin-top:14px;font-size:18px;line-height:1.55;color:var(--text-2)}
.facts7{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
.facts7 .btn svg{width:20px;height:20px}
.ftoggle7{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;color:#15803D;font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:inherit}
.fpanel7{background:#EFEAE2;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;min-height:620px}
.fbar7{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#075E54;color:#fff}
.fav7{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.fav7 img{width:26px;height:auto}
.fbar7 b{display:block;font-size:15px;line-height:1.2}
.fbar7 small{font-size:12px;color:#D1E7E2}
.fthread7{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.fthread7>:first-child{margin-top:auto}
.faqc7 .bub{max-width:min(78%,560px);padding:7px 10px 5px;border-radius:10px;font-size:15px;line-height:1.45;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13);word-wrap:break-word}
.faqc7 .bub.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.faqc7 .bub.out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:2px}
.faqc7 .bub .tm{display:block;text-align:right;font-size:11px;color:#5E6A70;margin-top:1px;line-height:1.2}
.faqc7 .answer-link{display:inline-flex;align-items:center;min-height:44px;color:#027EB5!important;font-weight:500}
.faqc7 .t7typing{align-self:flex-start;background:#fff;border-radius:10px;border-top-left-radius:2px;padding:10px 12px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.faqc7 .t7typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:t7dot 1.1s 2 ease-in-out}
.faqc7 .t7typing i:nth-child(2){animation-delay:.15s}.faqc7 .t7typing i:nth-child(3){animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.faqc7 .t7typing i{animation:none}}
.fask7{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 18px}
.fask7 button{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #D1D7DB;background:#fff;color:#111B21;font-size:14.5px;line-height:1.3;text-align:left;cursor:pointer;font-family:inherit}
.fask7 button:hover{border-color:#15803D;color:#166534}
.fask7 .lbl{width:100%;font-size:13px;color:#54656F}
/* list view, also what shows without JavaScript */
.flist7{display:none}
.faqc7.nojs .fpanel7,.faqc7.nojs .ftoggle7{display:none}.faqc7.nojs .flist7{display:block}
.faqc7.list-on .fpanel7{display:none}.faqc7.list-on .flist7{display:block}
.flist7 details{border-top:1px solid var(--line)}
.flist7 details:last-child{border-bottom:1px solid var(--line)}
.flist7 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:12px 4px;font-weight:600;font-size:17px;color:var(--ink)}
.flist7 summary::-webkit-details-marker{display:none}
.flist7 summary::after{content:"+";font-size:24px;font-weight:400;color:var(--muted)}
.flist7 details[open] summary::after{content:"−"}
.flist7 details p{padding:0 4px 18px;color:var(--text-2);max-width:68ch}
@media (max-width:900px){
 .faqc7{padding:48px 0 56px}
 .faqc7>.wrap{grid-template-columns:1fr;gap:24px}
 .fside7{position:static}
 .facts7{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:20px}
 .fpanel7{min-height:520px;border-radius:20px}
 .faqc7 .bub{max-width:88%}
 .fask7{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:16px}
 .fask7::-webkit-scrollbar{display:none}
 .fask7 button{flex:none;max-width:78vw;white-space:normal}
 .fask7 .lbl{display:none}
}

/* ---------- Version 7 final (light middle): phone chapters on Home, moved here from v7-dark.css and set in light colours ---------- */
.see7{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;order:5;justify-self:start}
.see7::before{content:"";width:0;height:0;border-left:9px solid #15803D;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-right:10px}
.see7:hover{border-color:var(--ink)}
.sheet7{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:90vh;border:0;border-radius:20px 20px 0 0;padding:16px 16px 24px;background:#fff;color:var(--ink);overflow-y:auto}
.sheet7::backdrop{background:rgba(5,8,7,.6)}
.sheet7[open]{animation:sheet7in .25s ease-out}
@keyframes sheet7in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet7[open]{animation:none}}
.shead7{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shead7 h2{font-size:20px;line-height:1.25;margin:0}
.sclose7{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.snote7{margin:4px 0 12px;font-size:14px;color:var(--muted)}
.sheet7 .rp{display:block!important;padding:12px;border-radius:16px;background:#EEF8F1}
@media (max-width:640px){
 .home7.mix7 .row6 .rp{display:none}
 .home7.mix7 .row6 .rt .ticks{display:none}
 .home7.mix7 .row6,.home7.mix7 .row6.flip{padding:28px 0;gap:10px}
 .home7.mix7 .see7{display:inline-flex}
 .home7.mix7 .work6 .pause6{display:none}
}
/* WooCommerce mark at its real width on every page (it was only fixed on Home) */
.mix7 .logo-c svg[aria-label="WooCommerce logo"]{width:120px;height:24px;margin:5px 0}
/* 19 Oct: the longer "1 Instagram run (no limit)" may wrap on phones so the row label keeps its width */
@media (max-width:520px){.runs .ex b{white-space:normal;text-align:right;max-width:9.5em}}

/* ---- mix7-all.css ---- */
/* Version 7 Home, "dark top, light middle, dark bottom" (UX research try, 19 Oct 2026).
   Abhijeet: the full dark page is too dark; bring in white and light green.
   Top: the old OGIR dark theme (black fading into dark green). Middle: white and light green bands, taking turns.
   Bottom: the dark green closing band and the dark footer. Text, order and animations are unchanged. */
:root{--mint:#EEF8F1;--mint-2:#E3F4E9;--mint-line:#CFE9D8}

/* nav: dark, as on Version 7 */
.mix7 .nav{background:rgba(13,18,16,.96);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:saturate(1.4) blur(12px)}
.mix7 .nav .nav-links a{color:#E7ECEA}
.mix7 .nav .nav-links a:hover{color:#86EFAC;background:rgba(34,197,94,.12)}
.mix7 .nav .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.mix7 .nav .btn-ghost:hover{border-color:#fff}
.mix7 .nav .btn-primary{background:#22C55E;color:#0C1210}
.mix7 .nav .btn-primary:hover{background:#4ADE80}
.mix7 .nav .menu-btn{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.mix7 .nav .menu-btn svg{stroke:#fff}

/* top: the old dark theme */
.mix7 main>.w7hero{background:radial-gradient(70% 55% at 85% 100%,#1C3320 0%,rgba(28,51,32,0) 70%),linear-gradient(180deg,#0D1210 0%,#0D1210 38%,#121E16 62%,#17281B 100%)}

/* first light band: the proof line on light green, right under the dark hero */
.mix7 .proof-b{background:var(--mint);padding:26px 0!important}
.mix7 .proof-b .proof{background:transparent;border:0}
.mix7 .proof-b li{color:#14532D;font-weight:500}
.mix7 .proof-b svg{color:#15803D}

/* middle bands take turns: white, light green, white, light green */
.home7.mix7 main>.ind7{background:#fff}
.home7.mix7 main>.work6{background:#fff;padding-bottom:72px}
.home7.mix7 main>#tools{background:var(--mint)}
.home7.mix7 main>#bill{background:#fff}
.home7.mix7 main>#faq{background:var(--mint)}

/* inside the light bands: light green instead of grey */
.mix7 .row6 .rp{background:var(--mint)}
.mix7 .ind7 a{background:#fff;border-color:var(--mint-line)}
.mix7 .ind7 a:hover{border-color:#15803D}
.mix7 .ind7 svg{color:#15803D;background:var(--mint);border-radius:10px;padding:7px;width:34px;height:34px;flex:none}
.mix7 .more7 a:hover{background:var(--mint)}
.mix7 .start7{background:var(--mint);border:1px solid var(--mint-line)}
.mix7 #tools .logos{border-color:var(--mint-line)}
.mix7 #tools .logo-c{background:#fff;border-color:var(--mint-line)}
.mix7 .ticks svg{color:#15803D}

/* the bill result keeps its dark panel, now in the same dark green as the top and bottom */
.mix7 .bill-out{background:linear-gradient(160deg,#17281B 0%,#0D1210 100%)}

/* bottom: the closing turns into a full dark green band, then the dark footer */
.mix7 main>.closing{background:radial-gradient(60% 60% at 50% 0%,#1C3320 0%,rgba(28,51,32,0) 70%),linear-gradient(180deg,#17281B 0%,#0D1210 100%);padding:96px 0 88px}
.mix7 .closing .close{background:transparent;border:0;padding:0 16px}
.mix7 footer{background:#0D1210;border-top:1px solid rgba(255,255,255,.06)}

@media (max-width:720px){
  .mix7 .proof-b{padding:20px 0!important}
  .mix7 main>.closing{padding:64px 0 56px}
  .home7.mix7 main>.work6{padding-bottom:48px}
}

/* ---------- the same balance on every other Version 7 page (19 Oct 2026) ----------
   Dark top (hero in the old theme), light middle (white and light green taking turns), dark bottom (closing band, footer).
   m7w / m7g are set on each light band by the build, in page order, so two neighbours never share a colour. */
.mix7 main>section.w7hero{background:radial-gradient(70% 55% at 85% 100%,#1C3320 0%,rgba(28,51,32,0) 70%),linear-gradient(180deg,#0D1210 0%,#0D1210 38%,#121E16 62%,#17281B 100%)}
.mix7 main>.proof{background:var(--mint);border:0}
.mix7 main>.proof li{color:#14532D;font-weight:500}
.mix7 main>.proof svg{color:#15803D}
.mix7 main>.m7w{background:#fff}
.mix7 main>.m7g{background:var(--mint)}
.mix7 main>.m7g .eg,.mix7 main>.m7g .fp,.mix7 main>.m7g .card{border-color:var(--mint-line)}
.mix7 .tint .logo-c{background:#fff}
.mix7 .bill-out,.mix7 .t-bill{background:linear-gradient(160deg,#17281B 0%,#0D1210 100%)}
.mix7 main>.closing{background:radial-gradient(60% 60% at 50% 0%,#1C3320 0%,rgba(28,51,32,0) 70%),linear-gradient(180deg,#17281B 0%,#0D1210 100%);padding:96px 0 88px}
.mix7 main>.closing .close{background:transparent;border:0;padding:0 16px}
@media (max-width:720px){.mix7 main>.closing{padding:64px 0 56px}}

/* blog post: the article sits on white; only the nav is dark */
.mix7 main>div.w7hero{background:none}

/* ---- wp7.css (WordPress pages: blog, archive, 404, demo form, admin bar) ---- */
/* WordPress admin bar: keep the sticky nav below it when Abhijeet is signed in */
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}
@media (max-width:600px){body.admin-bar .nav{top:0}}

/* Blog categories are links on WordPress (a page per category) */
.cats a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none}
.cats a:hover{border-color:var(--ink);color:var(--ink)}
.cats a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
.pcard .pimg{display:block;border-radius:var(--r-m);overflow:hidden}
.pcard .pimg img{display:block;height:auto}
.empty7{color:var(--text-2);font-size:18px;padding:24px 0}
.blog-pager{display:flex;justify-content:space-between;gap:16px;margin-top:40px;font-weight:600}
.blog-pager a{display:inline-flex;align-items:center;min-height:44px;color:var(--green-800)}
.blog-pager .next{margin-left:auto}

/* Post pages: WordPress block markup inside the V7 article */
.post-grid.no-toc{grid-template-columns:minmax(0,1fr)}
.post-grid.no-toc .prose{margin:0 auto}
.post-hero img{height:auto;aspect-ratio:16/9;object-fit:cover}
.prose .lead{font-size:20px;line-height:1.6;color:var(--ink)}
.prose a:not(.btn){color:var(--green-800);text-decoration:underline;text-underline-offset:3px}
.prose .post-cta a{text-decoration:none}
.prose figure{margin-left:0;margin-right:0}
.prose img{max-width:100%;height:auto;border-radius:var(--r-m)}
.prose figcaption,.prose .wp-element-caption{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5}
.prose .has-small-font-size{font-size:15px!important;color:var(--muted)}
.prose .wp-block-table,.prose .article-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose .wp-block-table table{min-width:520px}
.prose code{font-size:.9em;background:var(--bg-2);padding:2px 6px;border-radius:6px}
.prose blockquote{border-left:3px solid var(--green-800);padding:4px 0 4px 18px;color:var(--text-2)}
.rel7{padding:88px 0 0}

/* 404 */
.nf7-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.nf7-links a{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;color:var(--ink);text-decoration:none;min-height:44px}
.nf7-links a:hover{border-color:var(--ink)}
.nf7-links span{color:var(--text-2);font-size:15px}
@media (max-width:900px){.nf7-links{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.nf7-links{grid-template-columns:1fr}}

/* Book a free demo: the WEB-1 form in V7 colours */
.demo7 .wrap{max-width:640px}
.demo-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:32px;box-shadow:0 30px 70px -40px rgba(12,18,16,.35)}
.demo-field{margin-bottom:18px}
.demo-field label{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:7px}
.demo-field input,.demo-field select{width:100%;box-sizing:border-box;background:#fff;border:1px solid #C9D1CD;border-radius:12px;padding:13px 14px;font:inherit;font-size:16px;color:var(--ink);min-height:50px}
.demo-field select{appearance:auto}
.demo-field input:focus,.demo-field select:focus{outline:2px solid rgba(22,163,74,.35);border-color:var(--green-800)}
.demo-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.demo-submit{width:100%;justify-content:center;min-height:50px;font-size:16px;margin-top:6px}
.demo-submit[disabled]{opacity:.7;cursor:wait}
.demo-err{color:#B91C1C;font-size:15px;margin-top:12px}
.demo-err:empty{display:none}
.demo-note{color:var(--muted);font-size:14px;margin-top:12px;text-align:center}
.demo-done{text-align:center;padding:10px 0}
.demo-done .tick{width:56px;height:56px;border-radius:50%;background:#DCFCE7;color:#166534;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;margin:0 auto 16px}
.demo-done p{font-size:17px;color:var(--ink);margin-bottom:18px}
.demo-done a{color:var(--green-800);font-weight:600;display:inline-flex;min-height:44px;align-items:center}
@media (max-width:520px){.demo-card{padding:22px 18px;border-radius:20px}}
.post-grid>*{min-width:0}
@media (max-width:960px){.post-grid{grid-template-columns:minmax(0,1fr)}}
.legal7 .prose{margin:0 auto;max-width:760px;font-size:17px}
.legal7 .prose h2{font-size:clamp(22px,2.4vw,26px);margin-top:40px}
.legal7.own7{padding-top:24px}
/* Legal pages: the text keeps its own styles; the duplicate OGIR row goes, links get stronger green and bigger taps */
.own7 .ogir-legal{margin-top:0;max-width:760px}
.own7 .ogir-legal .ogir-lc{display:none}
.own7 .ogir-legal a{color:#15803D}
.own7 .ogir-legal .eff{color:#56655F}
.own7 .ogir-legal .box a,.own7 .ogir-legal .ogir-lf a{display:inline-block;padding:12px 0}