/* =============================================================================
   SOCIAM STYLESHEET
   Order matters: later rules refine earlier ones, so read it top to bottom.
     1. Tokens, base and typography ............ top of file
     2. Core components ......................... buttons, nav, menu, footer, forms, Ask Sociam, cards
     3. Page components ......................... solutions, case studies, blog, pricing, offers, Flow AI
     4. Refinement layers (v8 onward) ........... each block is labelled; some older labels describe
                                                  designs that have since been retired, only their live rules remain
     5. Final layer (end of file) ............... homepage hero (.hx), menu breakpoints, blog finishing,
                                                  section rhythm (--sec) and page-opening spacing
   Maintenance
     tools/csstool.ps1 list | prune | dedupe : find and remove dead selectors and overridden declarations.
     Before shipping a clean-up, compare page snapshots before and after; nothing should move.
   ============================================================================= */
/* Sociam design system: light, precise, with the rainbow of the logo used as light, never as noise. */
:root{--white:#ffffff;--paper:#f7f6f3;--mist:#f1efeb;--ink:#141414;--body:#45464a;--muted:#8a8b90;--line:#e8e6e1;--line-strong:#d6d3cc;/* the logo's spectrum */
  --c-yellow:#f6c514;--c-orange:#f39221;--c-red:#ec4b37;--c-plum:#a14c86;--c-violet:#6b5fae;--c-blue:#3f62b2;--c-cyan:#3cbcea;--c-green:#5cb85c;--c-lime:#bccf2c;--spectrum:linear-gradient(90deg,#f7d417,#f39221,#ea4239,#b74f6e,#6b5fae,#3f62b2,#3cbcea,#6cbe45);--ring:conic-gradient(from 310deg,#f7e017 0deg,#fbbd16 40deg,#f39221 70deg,#ef5a2f 98deg,#ea4239 116deg,#b74f6e 140deg,#6b5fae 162deg,#4f5bab 195deg,#3f62b2 222deg,#3cbcea 268deg,#58c4ac 292deg,#6cbe45 318deg,#bcd52c 342deg,#f7e017 360deg);--accent:#3f62b2;--accent-deep:#2c4a8f;--accent-tint:#eef2fb;/* legacy token names used by older templates */
  --olive:var(--accent);--olive-deep:var(--accent-deep);--olive-tint:var(--accent-tint);--saffron:var(--c-orange);--saffron-tint:#fdf1e2;--sand:var(--mist);--danger:#b3261e;--r:14px;--wrap:1240px;--gut:clamp(20px,5vw,64px);--sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:var(--sans)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.02rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);font-family:var(--sans);line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(2.9rem,7vw,6rem)}

h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2}
h1 em,h2 em,h3 em,.rainbow-text{font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:600;color:var(--ink)}
::selection{background:#fde9b8}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:400}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}
.sec{padding:var(--sec) 0}
.paper{background:var(--paper)}
.rule{border-top:1px solid var(--line)}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-left:auto;margin-right:auto;justify-content:center}

/* section label: "01 / The idea" */
.eyebrow{font:500 .8rem/1.4 var(--sans);margin:0 0 28px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:""}
.eyebrow .n{color:var(--ink);font-variant-numeric:tabular-nums}
.lead{font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.6;max-width:34em}
.aside{color:var(--muted);font-size:.95rem}
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* brand mark: the ring from the logo */
.mark{display:inline-block;width:32px;height:32px;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 64%,#000 66%);mask:radial-gradient(farthest-side,transparent 64%,#000 66%);flex:none}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--ink);font:500 .95rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .35s cubic-bezier(.2,.7,.1,1);background:none;color:var(--ink)}
.btn::after{content:"↗";font-size:.95em;transition:transform .25s}
.btn:hover::after{transform:translate(2px,-2px)}
.btn-ink{background:var(--ink);color:#fff}

.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{min-height:42px;padding:0 20px;font-size:.88rem}
.btn-sm::after,.btn.plain::after{content:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.link{font-weight:500;color:var(--ink);text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .3s}
.link::after{content:" ↗"}
.link:hover{background-image:var(--spectrum);background-size:100% 2px}
.row{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,border-color .4s,transform .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;transition:height .4s}
.nav.scrolled .nav-in{height:70px}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);font:600 1.5rem var(--sans);letter-spacing:-.04em}
.nav-links{display:flex;align-items:center}
.nav-links a{text-decoration:none;font-size:.92rem;color:var(--ink);position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--spectrum);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.menu-btn{width:48px;height:40px;border:0;background:none;cursor:pointer;position:relative;margin-left:8px}
.menu-btn i,.menu-btn i::before,.menu-btn i::after{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);content:"";transition:transform .35s,top .35s,opacity .2s}
.menu-btn i{top:19px}.menu-btn i::before{left:0;right:0;top:-6px}.menu-btn i::after{left:0;right:0;top:6px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{top:0;transform:rotate(45deg)}
.menu-open .menu-btn i::after{top:0;transform:rotate(-45deg)}
@media(max-width:900px){.nav-links a:not(.keep){display:none}}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:55;background:var(--white);display:grid;grid-template-rows:1fr auto;padding:120px var(--gut) 40px;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.menu-open .menu{opacity:1;visibility:visible}
.menu-open{overflow:hidden}
.menu-grid{max-width:var(--wrap);width:100%;margin:0 auto;display:grid}

.menu-foot{max-width:var(--wrap);width:100%;margin:40px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:20px}
@media(max-width:800px){.menu{padding-top:110px;overflow:auto}}

/* socials */
.socials{display:flex;gap:10px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);transition:border-color .3s,background .3s}
.socials a:hover{border-color:transparent;background:var(--ring)}
.socials a:hover svg{color:#fff}
.socials svg{width:17px;height:17px}

/* hero */

/* the halo: an iridescent ring standing in light */

@keyframes halo{to{transform:rotate(360deg)}}

/* idea */
.statement{font:500 clamp(1.9rem,4.4vw,3.6rem)/1.15 var(--sans);letter-spacing:-.035em;color:var(--ink);max-width:20ch}
.statement span{color:var(--muted)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(64px,8vw,112px)}

@media(max-width:800px){.trio{grid-template-columns:1fr}}

.head-split{display:grid}

/* plan cards */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:64px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,20,20,.18)}
.plan.featured{border:1.5px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--spectrum) border-box}
.plan .badge{position:absolute;top:-13px;left:clamp(28px,3vw,40px);font:600 .72rem var(--sans);letter-spacing:.04em;padding:5px 12px;border-radius:999px;color:#fff;background:var(--spectrum)}
.plan .name{font:600 1rem var(--sans);color:var(--ink)}
.plan .for{font-size:.9rem;color:var(--muted);margin-top:6px;min-height:3em}
.plan .amount{font:500 clamp(2.8rem,4.6vw,3.8rem)/1 var(--sans);letter-spacing:-.05em;color:var(--ink);margin:30px 0 6px;display:flex;align-items:baseline;gap:8px}
.plan .amount small{font:500 .9rem var(--sans);letter-spacing:0;color:var(--muted)}
.plan .terms{font-size:.82rem;color:var(--muted);min-height:1.4em}
.plan ul{margin:28px 0 32px;display:grid;gap:12px;font-size:.94rem;border-top:1px solid var(--line);padding-top:24px}
.plan li{padding-left:28px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233f62b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.plan .btn{margin-top:auto;width:100%}
.plan .more{margin-top:14px;font-size:.85rem;text-align:center;color:var(--muted)}
.plan .more a{color:var(--ink)}
@media(max-width:960px){.plans{grid-template-columns:1fr;max-width:560px}}

/* offer strip */
.strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:40px;padding:20px 26px;border-radius:var(--r);background:var(--paper);font-size:.95rem}
.strip b{font-weight:600}
.strip .tag{font:600 .72rem var(--sans);padding:4px 10px;border-radius:999px;color:#fff;background:var(--spectrum);margin-right:12px;vertical-align:.1em}

/* compare table */
.compare{margin-top:48px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.compare table{width:100%;min-width:720px;border-collapse:collapse;font-size:.92rem}
.compare th,.compare td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font:600 .95rem var(--sans);color:var(--ink);background:var(--paper)}
.compare thead th:nth-child(4){background:linear-gradient(var(--paper),var(--paper)) padding-box;position:relative}
.compare tbody th{font-weight:500;color:var(--ink);width:28%}
.compare tbody tr:last-child > *{border-bottom:0}
.compare .y{color:var(--accent-deep);font-weight:600}
.compare .n{color:var(--line-strong)}

/* FAQ */
.faq{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:500 1.12rem var(--sans);color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:1.5rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 26px;max-width:46em}

/* scroll-pinned system story */

.story-live{height:520vh}

/* flywheel */

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* audience */
.who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.tiles{display:grid;gap:0;border-top:1px solid var(--line)}
.tiles a{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s}
.tiles a:hover{padding-left:12px}

.tiles h3{font-size:1.3rem}
.tiles p{font-size:.92rem;color:var(--muted);margin-top:2px}
.tiles .go{font-size:1.2rem}
@media(max-width:800px){.who{grid-template-columns:1fr}}

/* founder band */

.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 22px;font:500 1.05rem var(--sans);color:var(--ink);text-align:center;letter-spacing:-.01em;display:grid;place-items:center;min-height:110px}
@media(max-width:800px){.logos{grid-template-columns:repeat(2,1fr)}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.stats li{border-top:1px solid var(--line-strong);padding-top:22px}
.stats b{display:block;font:500 clamp(2rem,3.4vw,2.8rem)/1 var(--sans);letter-spacing:-.04em;margin-bottom:10px}
@media(max-width:700px){.stats{grid-template-columns:1fr}}

/* posts */

.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters button{border:1px solid var(--line-strong);background:var(--white);border-radius:999px;padding:9px 18px;font:500 .88rem var(--sans);color:var(--body);cursor:pointer}
.filters button[aria-pressed=true]{color:#fff}

/* article */
.article-head{padding:clamp(150px,16vw,200px) 0 clamp(40px,6vw,72px);text-align:center}
.article-head h1{font-size:clamp(2.3rem,5.2vw,4.2rem);max-width:17ch;margin:0 auto}
.article-head .eyebrow{justify-content:center}
.article-head .meta{margin-top:28px;font-size:.88rem;color:var(--muted);display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px}
.article-head .dek{margin:24px auto 0;max-width:34em;font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--body)}
.prose{max-width:700px;margin:0 auto;padding:0 var(--gut) var(--sec);font-size:1.1rem;line-height:1.85}
.prose > * + *{margin-top:1.4em}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:2.4em}
.prose h3{font-size:1.3rem;margin-top:2em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{padding-left:26px;position:relative}
.prose ul li::before{content:"";position:absolute;left:2px;top:.75em;width:8px;height:8px;border-radius:50%;background:var(--spectrum)}
.prose ol{list-style:decimal;padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose blockquote{margin:2em 0;padding:0 0 0 26px;border-left:2px solid;border-image:var(--spectrum) 1;font-size:1.4rem;line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.015em}
.prose a{color:var(--accent-deep)}
.prose .note{background:var(--paper);border-radius:var(--r);padding:22px 26px;font-size:1rem}
.prose hr{border:0;height:2px;width:64px;margin:3em auto;background:var(--spectrum);border-radius:2px}
.article-end{border-top:1px solid var(--line);padding-top:40px;margin-top:3em}

/* final choices */
.final h2{max-width:15ch}

/* inner pages */

.page-hero h1{font-size:clamp(2.6rem,6vw,5rem);max-width:15ch}
.page-hero .lead{margin:28px 0 36px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}

@media(max-width:800px){.cols{grid-template-columns:1fr}}
.ticks{margin:24px 0 32px;display:grid;gap:11px;font-size:.95rem}
.ticks li{padding-left:24px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ticks.no li::before{background:var(--line-strong)}
.ticks.no li{color:var(--muted)}
.spec{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.spec-head{padding:clamp(24px,4vw,44px);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.spec-head .price{font:500 clamp(2.8rem,6vw,4.2rem)/1 var(--sans);letter-spacing:-.05em;color:var(--ink);margin:0}
.price-note{font-size:.82rem;color:var(--muted);margin-top:8px}
.spec-body{display:grid;grid-template-columns:1fr 1fr}
.spec-body > div{padding:clamp(24px,4vw,44px)}
.spec-body > div + div{border-left:1px solid var(--line);background:var(--paper)}
.spec h3{font:600 1rem var(--sans);letter-spacing:0;margin-bottom:4px}
.spec-foot{padding:20px clamp(24px,4vw,44px);border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 32px}
@media(max-width:800px){.spec-body{grid-template-columns:1fr}.spec-body > div + div{border-left:0;border-top:1px solid var(--line)}}
.num-list{counter-reset:n;border-top:1px solid var(--line)}
.num-list li{counter-increment:n;display:grid;grid-template-columns:64px 1fr 1.4fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.num-list li::before{content:"0" counter(n);font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.num-list h3{font-size:1.3rem}
.num-list p{font-size:.95rem}
@media(max-width:700px){.num-list li{grid-template-columns:40px 1fr}.num-list p{grid-column:2}}

.svc .amt{grid-row:1/3;grid-column:2;text-align:right;font:500 1.15rem var(--sans);color:var(--ink);white-space:nowrap}
.svc .amt small{display:block;font:400 .78rem var(--sans);color:var(--muted)}
@media(max-width:560px){.svc .amt{grid-row:auto;grid-column:1;text-align:left}}

.band{background:var(--ink);color:#c9cacd}
.band h2{color:#fff}
.band .btn{border-color:#fff;color:#fff}
.band .btn-ink{background:#fff;color:var(--ink)}
.band .btn-ink:hover{background:#f1f1f1}
.offer-band{display:grid;grid-template-columns:auto 1fr auto;gap:24px 48px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--r);background:var(--paper)}
.offer-band .date{font:500 clamp(2.4rem,5vw,3.4rem)/1 var(--sans);letter-spacing:-.04em}
.offer-band .date small{display:block;font:500 .78rem var(--sans);letter-spacing:0;color:var(--muted);margin-top:8px}
@media(max-width:800px){.offer-band{grid-template-columns:1fr}}

.offer-over{padding:20px 24px;border-radius:var(--r);background:var(--paper);color:var(--ink)}

/* forms */
.form{display:grid;gap:20px;max-width:640px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
label,legend{font-size:.86rem;font-weight:600;color:var(--ink);display:block;margin-bottom:8px;padding:0}
fieldset{border:0;padding:0;margin:0}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=number],select,textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:10px;background:var(--white);font:400 1rem var(--sans);color:var(--ink)}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
[aria-invalid=true]{border-color:var(--danger)!important}
.err{color:var(--danger);font-size:.8rem;margin-top:6px}
.hp{position:absolute;left:-9999px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;font-weight:400;color:var(--body);cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{margin:0;cursor:pointer;font-weight:400}
.chips input{position:absolute;opacity:0}
.chips span{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border:1px solid var(--line-strong);border-radius:999px;font-size:.93rem;color:var(--body);transition:all .2s;background:var(--white)}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chips input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.status{padding:16px 18px;border-radius:10px;font-size:.93rem;border:1px solid var(--line-strong)}
.status.ok{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-deep)}
.status.bad{background:#fbefee;border-color:var(--danger);color:var(--danger)}

/* pricing page */
.cur-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:8px;font-size:.88rem;color:var(--muted)}
.cur-bar select{width:auto;min-height:42px;padding:6px 14px;font-size:.9rem;border-radius:999px}
.builder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:56px}
.grp-h{font:600 .82rem var(--sans);color:var(--muted);margin:40px 0 4px}
.grp-h:first-child{margin-top:0}
.opt{display:grid;grid-template-columns:24px 1fr auto;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--line);cursor:pointer;margin:0;font-weight:400}
.opt input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--ink)}
.opt .t{font:500 1.05rem var(--sans);color:var(--ink)}
.opt .t .tag{font-size:.7rem;font-weight:600;background:var(--accent-tint);color:var(--accent-deep);padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.opt .d{grid-column:2;font-size:.9rem;color:var(--body)}
.opt .a{grid-row:1;grid-column:3;text-align:right;font:500 1.05rem var(--sans);color:var(--ink);white-space:nowrap}
.opt .a small{display:block;font:400 .76rem var(--sans);color:var(--muted)}
.opt.base{cursor:default}
@media(max-width:560px){.opt{grid-template-columns:24px 1fr}.opt .a{grid-row:auto;grid-column:2;text-align:left}}
.sum{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:30px;box-shadow:0 30px 60px -40px rgba(20,20,20,.25)}
.sum::before{content:"";display:block;height:3px;margin:-30px -30px 26px;border-radius:var(--r) var(--r) 0 0;background:var(--spectrum)}
.sum h2{font-size:1.35rem;margin-bottom:4px}
.sum .grp{font:600 .76rem var(--sans);color:var(--muted);margin:22px 0 6px}
.sum .ln{display:flex;justify-content:space-between;gap:16px;font-size:.9rem;padding:5px 0}
.sum .ln dd{margin:0;text-align:right;color:var(--ink);white-space:nowrap}
.sum .tot{border-top:1px solid var(--ink);margin-top:18px;padding-top:6px}
.sum .tot .ln{font-size:1rem;font-weight:500;color:var(--ink);padding:10px 0 2px}
.sum .tot dd{font:500 1.4rem var(--sans);letter-spacing:-.03em}
.sum .tp li{font-size:.8rem;color:var(--muted);padding:3px 0}
.sum .btn{width:100%;margin-top:22px}
.sum .fine{font-size:.76rem;color:var(--muted);margin-top:14px}
@media(max-width:960px){.builder{grid-template-columns:1fr}.sum{position:static}}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.addon{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--white)}
.addon h3{font-size:1.1rem}
.addon p{font-size:.9rem;margin-top:8px;min-height:3.2em}
.addon .amt{font:500 1.6rem var(--sans);letter-spacing:-.04em;color:var(--ink);margin-top:18px}
.addon .amt small{font:400 .8rem var(--sans);letter-spacing:0;color:var(--muted);margin-left:4px}
@media(max-width:960px){.addons{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.addons{grid-template-columns:1fr}}

/* ask panel */
.ask-fab{position:fixed;right:22px;bottom:22px;z-index:70;height:50px;padding:0 20px 0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);color:var(--ink);font:500 .88rem var(--sans);cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:0 12px 32px rgba(20,20,20,.1)}
.ask-fab::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 62%);mask:radial-gradient(farthest-side,transparent 58%,#000 62%);animation:halo 6s linear infinite}
.ask-fab:hover{border-color:var(--ink)}
.ask{position:fixed;right:22px;bottom:84px;z-index:70;width:min(400px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 110px));background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(20,20,20,.16);display:flex;flex-direction:column;overflow:hidden}
.ask::before{content:"";height:3px;background:var(--spectrum);flex:none}
.ask header{display:flex;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ask header strong{display:block;font:600 1.05rem var(--sans)}
.ask header span{font-size:.76rem;color:var(--muted)}
.ask header button{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted);width:36px;height:36px}
.ask-log{flex:1;overflow:auto;padding:16px 18px;display:grid;gap:12px;align-content:start;min-height:120px;font-size:.9rem}
.ask-log .u{justify-self:end;background:var(--ink);color:#fff;padding:10px 14px;border-radius:14px 14px 3px 14px;max-width:85%}
.ask-log .b{justify-self:start;background:var(--paper);padding:10px 14px;border-radius:14px 14px 14px 3px;max-width:92%}
.ask-log .s{font-size:.82rem;color:var(--muted)}
.ask-log .s.bad{color:var(--danger)}
.ask-prompts{display:grid;gap:8px;padding:0 18px 12px}
.ask-prompts button{text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:10px 12px;font:400 .85rem var(--sans);color:var(--body);cursor:pointer}
.ask-prompts button:hover{border-color:var(--ink)}
.ask form{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.ask form input{min-height:42px;font-size:.9rem}
.ask-note{font-size:.76rem;color:var(--muted);padding:0 18px 14px}

/* footer */
.foot{font-size:.92rem;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--spectrum)}

.foot-grid{display:grid;padding-top:56px}
.foot-grid a:not(.brand){display:block;text-decoration:none;padding:5px 0;color:var(--body)}
.foot-grid a:not(.brand):hover{color:var(--ink)}
.foot-grid p{color:var(--muted);padding-top:5px}
.foot-grid h2{font:600 .82rem var(--sans);color:var(--ink);letter-spacing:0;margin-bottom:12px}

.foot-base{padding-top:22px;flex-wrap:wrap;justify-content:space-between;padding-bottom:40px}
.foot-base a{color:var(--muted)}

/* admin */
.adm table{width:100%;border-collapse:collapse;font-size:.85rem}
.adm th,.adm td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.adm th{font-weight:600;color:var(--muted);font-size:.74rem}
.adm td input,.adm td select{min-height:36px;padding:4px 8px;font-size:.85rem}
.adm .scroll{overflow-x:auto}
.kpis{display:flex;flex-wrap:wrap;gap:12px 40px;margin:24px 0}
.kpis div{font-size:.8rem;color:var(--muted)}
.kpis b{display:block;font:500 1.9rem var(--sans);letter-spacing:-.03em;color:var(--ink)}

/* splash: the logo arrives, rainbow ripples out, then an iris opens onto the page */
.splash{display:none}
.intro-on body{overflow:hidden}
.intro-on .splash{display:grid;place-items:center;position:fixed;inset:0;z-index:500;background:radial-gradient(circle at 50% 45%,#fff 0%,#fbfaf7 55%,#f1efea 100%);clip-path:circle(150% at 50% 50%);animation:introSafety .01s 5s forwards}
.splash-burst{position:absolute;width:150vmax;height:150vmax;border-radius:50%;background:var(--ring);filter:blur(120px);opacity:.16;animation:halo 14s linear infinite}
.splash-ripples{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.splash-ripples i{grid-area:1/1;width:180px;height:180px;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 94%,#000 96%);mask:radial-gradient(farthest-side,transparent 94%,#000 96%);opacity:0;animation:ripple 2.6s cubic-bezier(.2,.7,.1,1) infinite}
.splash-ripples i:nth-child(2){animation-delay:.85s}.splash-ripples i:nth-child(3){animation-delay:1.7s}
.splash-core{position:relative;display:grid;justify-items:center;gap:26px}
.splash-core img{width:168px;height:168px;filter:drop-shadow(0 30px 50px rgba(30,30,60,.18));animation:logoIn 1.3s cubic-bezier(.2,.8,.1,1) both}
.splash-line{font:500 1.1rem var(--sans);letter-spacing:-.02em;color:var(--ink);opacity:0;transform:translateY(10px);animation:fadeUp .9s .55s cubic-bezier(.2,.7,.1,1) forwards}
.splash-bar{width:200px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0;animation:fadeUp .6s .8s forwards}
.splash-bar i{display:block;height:100%;background:var(--spectrum);transform-origin:left;transform:scaleX(.05);transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.splash.out{animation:irisOut 1.05s .25s cubic-bezier(.75,0,.2,1) forwards!important}
.splash.out .splash-core{transition:transform .7s cubic-bezier(.6,0,.2,1),opacity .5s .2s;transform:scale(1.18);opacity:0}
.splash.out .splash-ripples i{animation:rippleOut 1.1s cubic-bezier(.2,.7,.1,1) forwards}
.splash.out .splash-ripples i:nth-child(2){animation-delay:.08s}.splash.out .splash-ripples i:nth-child(3){animation-delay:.16s}
@keyframes logoIn{0%{opacity:0;transform:scale(.55) rotate(-120deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes rippleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(16)}}
@keyframes irisOut{to{clip-path:circle(0% at 50% 50%)}}
@keyframes introSafety{to{visibility:hidden;pointer-events:none}}
/* kinetic headline */
.kinetic-on .kw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.kinetic-on .kw-i{display:inline-block;transform:translateY(105%);animation:kwIn 1.1s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes kwIn{to{transform:none}}
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp 1s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* cursor companion */
.cursor{position:fixed;left:0;top:0;z-index:600;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;pointer-events:none;opacity:0;transition:width .3s,height .3s,margin .3s,opacity .3s;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 80%,#000 84%);mask:radial-gradient(farthest-side,transparent 80%,#000 84%)}
.cursor.live{opacity:1}
.cursor.big{width:58px;height:58px;margin:-29px 0 0 -29px}

/* reveals */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.2,.7,.1,1),transform 1.1s cubic-bezier(.2,.7,.1,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.fade-up{opacity:1;transform:none}
  .intro{display:none!important}
}

/* ================= v3 components: richer, finished, alive ================= */
.ic{width:22px;height:22px;flex:none}
.icon{width:52px;height:52px;display:grid;place-items:center;color:var(--ink);background:linear-gradient(var(--white),var(--white)) padding-box,var(--spectrum) border-box;border:1.5px solid transparent;box-shadow:0 10px 24px -14px rgba(20,20,20,.25)}
.icon .ic{width:24px;height:24px}
.icon.solid{background:var(--c,var(--ink));border:0;color:#fff}

/* soft colour light behind sections */
.glow-bg{position:relative;isolation:isolate;overflow:hidden}
.glow-bg::before,.glow-bg::after{content:"";position:absolute;z-index:-1;width:46vw;height:46vw;max-width:680px;max-height:680px;border-radius:50%;filter:blur(90px);opacity:.22;pointer-events:none}
.glow-bg::before{background:var(--c-orange);top:-18%;left:-12%}
.glow-bg::after{background:var(--c-cyan);bottom:-22%;right:-10%}
.glow-bg.violet::after{background:var(--c-violet)}

/* hero chips that float around the halo */

.chip-float.a{top:8%;left:-6%;--c:var(--c-orange)}
.chip-float.b{top:44%;right:-8%;--c:var(--c-violet);animation-delay:-2.3s}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* scrolling names */

@keyframes tick{to{transform:translateX(-50%)}}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(48px,6vw,80px)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{position:relative;border:1px solid var(--line);border-radius:22px;background:var(--white);padding:clamp(26px,2.8vw,36px);display:flex;flex-direction:column;gap:14px;transition:transform .6s cubic-bezier(.2,.7,.1,1),box-shadow .6s,border-color .4s;overflow:hidden}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--spectrum);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -36px rgba(20,20,20,.28);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card h3{font-size:1.35rem;margin-top:10px}
.card p{font-size:.96rem}

.card .price-tag{font:500 1.5rem var(--sans);letter-spacing:-.03em;color:var(--ink);margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.card .price-tag small{font:400 .82rem var(--sans);letter-spacing:0;color:var(--muted);margin-left:4px}
@media(max-width:1000px){.cards.four{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
@media(max-width:560px){.cards.four{grid-template-columns:1fr}}

/* product showcase */

.browser{border-radius:18px;background:var(--white);border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(20,20,20,.45);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#e2ded6}
.browser-bar i:nth-child(1){background:#f0645a}.browser-bar i:nth-child(2){background:#f6c514}.browser-bar i:nth-child(3){background:#5cb85c}
.browser-bar .url{margin-left:14px;flex:1;max-width:340px;height:26px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:.75rem;color:var(--muted);display:flex;align-items:center;padding:0 12px}
.site-mock{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding:28px;min-height:300px;background:linear-gradient(135deg,#fdfaf3,#f3f6fd)}
.site-mock .k{font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--c-orange)}
.site-mock h4{font:600 clamp(1.3rem,2.2vw,1.8rem)/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink);margin:10px 0}
.site-mock p{font-size:.82rem;color:var(--body)}
.site-mock .btns{display:flex;gap:8px;margin-top:16px}
.site-mock .btns b{font:600 .72rem var(--sans);padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff}
.site-mock .btns b + b{background:#25d366}
.site-mock .art{border-radius:14px;background:conic-gradient(from 200deg at 60% 40%,#ffd36b,#f39221,#ec4b37,#a14c86,#6b5fae,#3f62b2,#3cbcea,#5cb85c,#ffd36b);position:relative;overflow:hidden;min-height:180px}
.site-mock .art::after{content:"";position:absolute;inset:22% 18%;border-radius:12px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px)}
.site-mock .stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.site-mock .stats span{background:#fff;border-radius:12px;padding:12px 14px;font-size:.72rem;color:var(--muted);border:1px solid var(--line)}
.site-mock .stats b{display:block;font:600 1rem var(--sans);color:var(--ink)}

@keyframes bubbleIn{to{opacity:1;transform:none}}
.lead-card{position:absolute;left:clamp(-10px,4%,40px);bottom:-30px;z-index:2;width:min(330px,80%);border-radius:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid var(--line);padding:18px 20px;box-shadow:0 30px 60px -30px rgba(20,20,20,.4);font-size:.84rem;animation:bob 8s ease-in-out infinite}
.lead-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lead-card .pill{font:600 .68rem var(--sans);padding:4px 10px;border-radius:999px;color:#fff;background:var(--spectrum)}
.lead-card b{display:block;font-size:.96rem;color:var(--ink)}
.lead-card .row2{display:flex;gap:14px;margin-top:10px;color:var(--muted);font-size:.76rem}
.lead-card .ok{color:#2f8a3e;font-weight:600}
.illus{font-size:.76rem;color:var(--muted);margin-top:14px}
@media(max-width:900px){.lead-card{position:relative;left:0;bottom:0;margin-top:-10px}}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(48px,6vw,80px);position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:27px;left:28px;right:28px;height:2px;background:var(--spectrum);opacity:.35}
.steps li{position:relative;counter-increment:s}
.steps .num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1.5px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--spectrum) border-box;font:600 1rem var(--sans);color:var(--ink);position:relative;z-index:1}
.steps h3{font-size:1.2rem;margin:22px 0 8px}
.steps p{font-size:.93rem}
.steps .when{display:inline-block;margin-top:12px;font-size:.78rem;color:var(--muted);padding:4px 10px;border-radius:999px;background:var(--paper)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:40px}.steps::before{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* testimonial carousel */

/* blog cards */
.post-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.post-card{display:flex;flex-direction:column;text-decoration:none;border-radius:22px;overflow:hidden;background:var(--white);border:1px solid var(--line);transition:transform .6s cubic-bezier(.2,.7,.1,1),box-shadow .6s}
.post-card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -36px rgba(20,20,20,.28)}
.cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.cover::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from var(--a,200deg) at 50% 50%,var(--c1),var(--c2),var(--c3),var(--c1));filter:blur(30px);opacity:.75;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.post-card:hover .cover::before{transform:rotate(30deg) scale(1.1)}
.cover::after{content:"";position:absolute;width:46%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 84%,#000 86%);mask:radial-gradient(farthest-side,transparent 84%,#000 86%);opacity:.9}
.cover .cat{position:absolute;left:16px;top:16px;font:600 .74rem var(--sans);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);color:var(--ink)}
.post-card .body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h3{font-size:1.3rem}
.post-card p{font-size:.93rem;color:var(--body)}
.post-card .meta{margin-top:auto;padding-top:12px;font-size:.8rem;color:var(--muted)}
.cat-websites{--c1:#ffd36b;--c2:#f39221;--c3:#ec4b37}

@media(max-width:960px){.post-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.post-cards{grid-template-columns:1fr}}
.post-hero-cover{max-width:980px;margin:0 auto;border-radius:28px;aspect-ratio:21/8}
.read-progress{position:fixed;left:0;top:0;height:3px;z-index:80;background:var(--spectrum);transform-origin:left;transform:scaleX(0)}

/* big call-to-action panel */
.cta-panel{position:relative;border-radius:32px;overflow:hidden;padding:clamp(48px,7vw,96px) clamp(28px,6vw,88px);isolation:isolate}
.cta-panel::before{content:"";position:absolute;z-index:-1;width:min(70vw,900px);aspect-ratio:1;right:-18%;top:-40%;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 82%,#000 84%);mask:radial-gradient(farthest-side,transparent 82%,#000 84%);animation:halo 60s linear infinite}
.cta-panel::after{content:"";position:absolute;z-index:-2;width:min(70vw,900px);aspect-ratio:1;right:-18%;top:-40%;border-radius:50%;background:var(--ring);filter:blur(80px)}
.cta-panel h2{max-width:14ch}
.cta-panel .lead{margin:24px 0 36px}

.cta-panel .btn-ink:hover{background:#f2f2f2}

/* split hero for inner pages */
.split-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.split-hero{grid-template-columns:1fr}}
.kpi-row{display:flex;flex-wrap:wrap;gap:28px 48px;margin-top:40px}
.kpi-row div{font-size:.86rem;color:var(--muted)}
.kpi-row b{display:block;font:500 1.9rem/1.1 var(--sans);letter-spacing:-.04em;color:var(--ink)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-card{border-radius:24px;background:var(--paper);padding:clamp(28px,3vw,40px);display:grid;gap:26px;position:sticky;top:100px}
.contact-card .item{display:flex;gap:14px;align-items:flex-start}
.contact-card .item b{display:block;color:var(--ink);font-weight:600}
.timeline{display:grid;gap:0;border-left:2px solid;border-image:var(--spectrum) 1;padding-left:22px}
.timeline li{position:relative;padding-bottom:18px;font-size:.93rem}
.timeline li::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--ink)}
.timeline b{display:block;color:var(--ink)}
.form-card{border-radius:24px;border:1px solid var(--line);background:var(--white);padding:clamp(26px,3.4vw,48px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.contact-card{position:static}}

/* legal + sitemap */
.legal{max-width:780px}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:2.2em 0 .6em}
.legal h3{font-size:1.1rem;margin:1.6em 0 .4em}
.legal p,.legal li{font-size:1rem}
.legal p + p{margin-top:1em}
.legal ul{list-style:none;display:grid;gap:8px;margin:1em 0}
.legal ul li{padding-left:22px;position:relative}
.legal ul li::before{content:"";position:absolute;left:2px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--spectrum)}
.legal table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.92rem}
.legal th,.legal td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.legal th{font-weight:600;color:var(--ink);background:var(--paper)}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.86rem;color:var(--muted);margin-top:18px}
.toc{position:sticky;top:110px;display:grid;gap:8px;font-size:.9rem}
.toc a{text-decoration:none;color:var(--body)}
.toc a:hover{color:var(--ink)}
.legal-grid{display:grid;grid-template-columns:220px 1fr;gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:860px){.legal-grid{grid-template-columns:1fr}.toc{position:static}}
.sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:48px}
.sitemap section{border:1px solid var(--line);border-radius:20px;padding:26px}
.sitemap h2{font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sitemap a{display:block;text-decoration:none;padding:6px 0;color:var(--body);border-bottom:1px solid var(--line)}
.sitemap a:last-child{border-bottom:0}
.sitemap a:hover{color:var(--ink)}

/* cookie notice */
.notice{position:fixed;left:22px;bottom:22px;z-index:75;max-width:min(420px,calc(100vw - 44px));border-radius:18px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(20,20,20,.35);padding:18px 20px;font-size:.86rem;display:grid;gap:12px}
.notice .row{gap:10px}
@media(max-width:600px){.notice{bottom:84px}}

/* counters */
[data-count]{font-variant-numeric:tabular-nums}
.legal th,.legal td{overflow-wrap:anywhere}
@media(max-width:600px){.site-mock{grid-template-columns:1fr;padding:20px}.site-mock .art{min-height:110px}.site-mock .btns b{white-space:nowrap}.site-mock[style]{grid-template-columns:1fr 1fr!important}}

/* ================= v4: logo-led finish ================= */

.brand-logo{transition:width .4s,height .4s,transform .6s cubic-bezier(.2,.7,.1,1)}

.brand:hover .brand-logo{transform:rotate(-12deg) scale(1.04)}
.foot .brand img{width:96px;height:96px}
@media(prefers-reduced-motion:reduce){.splash{display:none!important}}

/* hero ring styled after the logo: a thick spectrum band inside a soft grey bezel */

/* rainbow ring around primary buttons on hover, like the logo */
.btn-ink{position:relative;isolation:isolate}
.btn-ink::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:var(--ring);z-index:-1;opacity:0;transition:opacity .35s}
.btn-ink:hover::before{opacity:1}
.btn-ink:hover{background:var(--ink)}

/* manifesto: words light up as you scroll */

.manifesto .w{color:#d4d3d0;transition:color .4s}
.manifesto .w.lit{color:var(--ink)}
.manifesto .w.hl.lit{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}

/* proof band: big numbers */

.numbers b .u{font-size:.45em;letter-spacing:-.02em;margin-left:6px;color:var(--muted)}

/* section labels with a tiny logo ring */
.eyebrow::before{width:14px;height:14px;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 55%,#000 60%);mask:radial-gradient(farthest-side,transparent 55%,#000 60%)}

/* cards: softer, logo-like depth */
.card,.plan,.post-card,.form-card{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -32px rgba(30,30,60,.25)}
.icon{border-radius:50%}

/* ================= v5: conversion-first homepage ================= */
/* hero with an upfront form floating in front of the ring */

/* bento grid */

/* LinkedIn recommendations */
.li-badge{display:inline-flex;align-items:center;gap:8px;font:600 .8rem var(--sans);color:#0a66c2}
.li-badge svg{width:22px;height:22px;flex:none}
.recs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.rec{border-radius:26px;border:1px solid var(--line);background:var(--white);padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;gap:22px;box-shadow:0 18px 40px -32px rgba(30,30,60,.25)}
.rec .head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.rec .person{display:flex;gap:14px;align-items:center}
.rec .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:600 1rem var(--sans);color:#fff;background:var(--c);flex:none}
.rec .person b{display:block;color:var(--ink);font-size:1.02rem}
.rec .person span{font-size:.8rem;color:var(--muted);display:block;line-height:1.45}
.rec blockquote{margin:0;font-size:1.02rem;line-height:1.75;color:var(--body)}
.rec blockquote::before{content:"“";display:block;font:500 3rem/0.6 var(--sans);margin-bottom:12px;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.rec time{font-size:.8rem;color:var(--muted);margin-top:auto}
.li-cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:clamp(40px,5vw,64px);text-align:center}
.btn-li{background:#0a66c2;border-color:#0a66c2;color:#fff;min-height:58px;padding:0 30px;font-size:1rem}
.btn-li:hover{background:#004182;border-color:#004182}
.btn-li::after{content:none}
.btn-li svg{width:20px;height:20px}
@media(max-width:860px){.recs{grid-template-columns:1fr}}

/* booking popup */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(15,15,20,.55);backdrop-filter:blur(6px);padding:20px}
.modal-box{position:relative;width:min(1000px,100%);height:min(760px,92vh);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 100px rgba(0,0,0,.4)}
.modal-box iframe{width:100%;height:100%;border:0}
.modal-close{position:absolute;right:14px;top:14px;z-index:1;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2);font-size:1.4rem;cursor:pointer}
.nav-links .nav-cta{color:#fff;margin-left:4px}.nav-links .nav-cta::after{display:none}.nav-links .nav-cta[aria-current]{color:#fff}

/* ================= v6: the Sociam phoenix ================= */

@keyframes photoIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}

/* nav over the dark hero */

.menu-open [data-page=index] .nav .menu-btn i::before,.menu-open [data-page=index] .nav .menu-btn i::after{background:var(--ink)}

/* conversation bar: the upfront form, right under the hero */

.startbar .status{grid-column:1/-1}

/* phoenix images inside tiles and sections */

/* v6b: hopeful, light phoenix hero (overrides the dark version) */

[data-page=index] .nav:not(.scrolled) .nav-links a:not(.nav-cta){color:var(--ink)}
[data-page=index] .nav:not(.scrolled) .nav-cta{background:var(--ink);color:#fff!important;border-color:var(--ink)}
[data-page=index] .nav:not(.scrolled) .menu-btn i::before,[data-page=index] .nav:not(.scrolled) .menu-btn i::after{background:var(--ink)}

/* conversation bar in warm light */

.startbar .err{color:var(--danger)}

/* ================= v7: Zensciences-style hero, bright and hopeful ================= */

@keyframes scrollCue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* without the photo: soft rainbow light beams so the hero still glows */

/* v7b: keep the phoenix's face clear of the headline at every width */

/* ================= v8: imagine. build. compound. ================= */
:root{--talk:linear-gradient(95deg,#2cc46f 0%,#14a3a0 100%);--navy:#16163a;--soft:#f6f6f9}
body{background:#fff}

/* brand: ring mark + rainbow wordmark */
.brand{gap:10px}
.brand-logo{width:44px;height:44px}
.nav.scrolled .brand-logo{width:38px;height:38px}
.wordmark{font:800 clamp(1.45rem,2vw,1.9rem)/1.1 var(--sans);letter-spacing:-.045em;padding-bottom:.06em}

/* nav and dropdowns */
.nav-in{height:86px}
.nav-links{gap:clamp(18px,2.6vw,42px)}
.dd-btn{font:600 .95rem var(--sans);color:var(--navy)!important}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:9px;border:0;background:none;cursor:pointer;padding:10px 0;position:relative}
.dd-btn::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.dd:hover .dd-btn::after,.dd.open .dd-btn::after{transform:translateY(1px) rotate(-135deg)}
.dd-btn::before{content:"";position:absolute;left:0;right:15px;bottom:2px;height:1.5px;background:var(--spectrum);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.dd-btn[aria-current]::before,.dd:hover .dd-btn::before{transform:scaleX(1)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;min-width:340px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -36px rgba(22,22,58,.35);padding:10px;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.1,1),visibility .25s;z-index:5}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd:hover .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-links .dd-panel a{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:14px;text-decoration:none;color:var(--navy)}
.nav-links .dd-panel a::after{display:none}
.nav-links .dd-panel a:hover{background:var(--soft)}
.dd-panel a b{font-weight:700;font-size:.95rem;color:var(--navy)}
.dd-panel a span{font-size:.82rem;color:var(--muted);font-weight:400}
.dd-wide{min-width:580px}
.dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-foot{display:flex;gap:6px;border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.nav-links .dd-foot a{flex-direction:row;font-weight:600;font-size:.86rem;padding:8px 14px}
.menu-btn{display:none}
@media(max-width:1020px){.nav-links .dd,.nav-links > a[data-nav=about]{display:none}.menu-btn{display:block}}

/* the green "let's talk" button */
.btn-talk{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;border:0;background:var(--talk);color:#fff!important;font:700 .9rem var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 16px 32px -16px rgba(20,163,160,.75);transition:transform .35s cubic-bezier(.2,.7,.1,1),box-shadow .35s,filter .3s;white-space:nowrap}
.btn-talk::after,.nav-links a.btn-talk::after{content:"↗";position:static;height:auto;background:none;transform:none;font-size:1.15em;letter-spacing:0;transition:transform .25s}
.btn-talk:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(20,163,160,.85);filter:saturate(1.15)}
.btn-talk:hover::after{transform:translate(2px,-2px)}
.btn-talk[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.nav-links a.btn-talk{padding:0 28px;min-height:50px}
@media(max-width:560px){.nav-links a.btn-talk{min-height:42px;padding:0 16px;font-size:.74rem}.wordmark{font-size:1.3rem}.brand-logo{width:36px;height:36px}}

/* hero: imagine. build. compound. */

.trio{font-weight:800;font-size:clamp(3.4rem,9vw,9.4rem);line-height:.92;letter-spacing:-.055em;margin:0;max-width:none}
.trio > span{display:block;width:max-content;-webkit-background-clip:text;background-clip:text;color:transparent}

.trio .kw-i{-webkit-background-clip:text;background-clip:text;color:transparent}
.trio .kw{padding:0 .02em .16em 0;margin-bottom:-.16em}

.intro-on .hero-chart{--d:3.1s}

@keyframes barUp{to{transform:none}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
.hero-pill{position:absolute;left:50%;bottom:24px;z-index:3;width:34px;height:52px;margin-left:-17px;border:1.5px solid var(--navy);border-radius:20px;display:grid;place-items:center;color:var(--navy);background:rgba(255,255,255,.6)}
.hero-pill svg{width:20px;height:20px;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media(max-width:900px){
  
  
  
  .trio{font-size:clamp(3.2rem,16vw,6.4rem)}
  
  
}
@media(prefers-reduced-motion:reduce){.hero-pill svg{animation:none}}

/* conversation bar: minimal floating-label form */

.fld{position:relative}
.form-pop .fld input,.form-pop .fld textarea,.form-pop .fld select{min-height:60px;padding:26px 18px 8px;border:1.5px solid transparent;background:var(--soft);border-radius:16px;color:var(--navy);font:500 1rem var(--sans);transition:background .25s,border-color .25s,box-shadow .25s}
.form-pop .fld textarea{min-height:140px;padding-top:30px}
.form-pop .fld label{position:absolute;left:19px;top:19px;margin:0;font:500 .98rem var(--sans);color:#8a8b98;pointer-events:none;transform-origin:left top;transition:transform .2s,color .2s}
.form-pop .fld label span{color:#b0b1bb;font-weight:400}
.form-pop .fld input:focus ~ label,.form-pop .fld input:not(:placeholder-shown) ~ label,.form-pop .fld textarea:focus ~ label,.form-pop .fld textarea:not(:placeholder-shown) ~ label{transform:translateY(-11px) scale(.76);color:var(--navy)}
.form-pop .fld input:focus,.form-pop .fld textarea:focus,.form-pop .fld select:focus{outline:none;background:#fff;border-color:#14a3a0;box-shadow:0 0 0 4px rgba(20,163,160,.12)}
.form-pop .fld input::placeholder,.form-pop .fld textarea::placeholder{color:transparent}
.form-pop .err{color:var(--danger);font-size:.78rem;margin:6px 0 0 6px}
.chips-pop span{min-height:44px;padding:0 18px;gap:8px;border:1.5px solid var(--line-strong)!important;background:#fff!important;color:var(--navy)!important;font-weight:600}
.chips-pop span::before{content:"+";font-weight:700;color:#14a3a0}
.chips-pop input:checked + span{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.chips-pop input:checked + span::before{content:"✓";color:#5ee0c0}
.form-pop .fine{font-size:.76rem;color:var(--muted)}
.form-pop .fine a{color:var(--navy)}

/* co-founder, blended into the logo ring */
.cf-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center}
.cf-photo{position:relative;margin:0;aspect-ratio:1;width:100%;max-width:520px;justify-self:center}
.cf-photo::before{content:"";position:absolute;inset:10%;border-radius:50%;background:var(--ring);filter:blur(56px);opacity:.3}
.cf-ring{position:absolute;inset:3%;z-index:2;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 85%,#000 86%,#000 99%,transparent 100%);mask:radial-gradient(farthest-side,transparent 85%,#000 86%,#000 99%,transparent 100%);animation:halo 80s linear infinite;pointer-events:none}
.cf-photo img{position:absolute;inset:10%;width:80%;height:80%;z-index:1;border-radius:50%;object-fit:cover;object-position:50% 30%;-webkit-mask:radial-gradient(farthest-side,#000 88%,transparent 100%);mask:radial-gradient(farthest-side,#000 88%,transparent 100%)}
.cf-photo figcaption{position:absolute;left:2%;bottom:6%;z-index:3;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:10px 16px;font-size:.78rem;color:var(--muted);box-shadow:0 20px 40px -24px rgba(22,22,58,.35)}
.cf-photo figcaption b{display:block;color:var(--navy);font-size:.95rem}
.cf-quote{margin:28px 0 32px;padding-left:22px;border-left:3px solid;border-image:var(--spectrum) 1;font:500 clamp(1.1rem,1.6vw,1.3rem)/1.5 var(--sans);color:var(--ink)}
.cf-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.84rem;color:var(--muted);font-weight:400}
@media(max-width:900px){.cf-grid{grid-template-columns:1fr}.cf-photo{max-width:380px}}

/* audience tiles: four now */
.who .tiles{display:grid;gap:12px}

/* solution pages */
.sol-hero{padding:clamp(130px,14vw,180px) 0 clamp(48px,6vw,88px);position:relative;overflow:hidden;background:radial-gradient(60vw 40vw at 85% 10%,rgba(255,214,170,.28),transparent 70%),radial-gradient(50vw 40vw at 10% 100%,rgba(170,220,255,.22),transparent 70%)}
.sol-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.sol-hero .eyebrow a{text-decoration:none}
.sol-hero h1{font-size:clamp(2.6rem,5.4vw,4.9rem);font-weight:700;letter-spacing:-.045em;max-width:13ch}
.sol-hero .lead{margin:26px 0 34px}
.sol-hero .row{gap:16px 28px}
.sol-art{position:relative;margin:0;aspect-ratio:4/3;border-radius:32px;overflow:hidden;background:linear-gradient(160deg,#ffffff,#f4f2ee);box-shadow:0 50px 90px -60px rgba(22,22,58,.45)}
.sol-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.art-fb{position:absolute;inset:0;display:grid;place-items:center}
.art-fb .fb-ring{width:62%;aspect-ratio:1;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 78%,#000 79%,#000 97%,transparent 98%);mask:radial-gradient(farthest-side,transparent 78%,#000 79%,#000 97%,transparent 98%);animation:halo 50s linear infinite;filter:drop-shadow(0 20px 30px rgba(22,22,58,.15))}
.art-fb .fb-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--line);font:600 .85rem var(--sans);color:var(--navy);box-shadow:0 18px 36px -20px rgba(22,22,58,.4);animation:floaty 6s ease-in-out infinite}
.art-fb .fb-chip i{width:9px;height:9px;border-radius:50%;background:var(--c,#14a3a0)}
.art-fb .c1{left:8%;top:16%}.art-fb .c2{right:7%;top:42%;animation-delay:-2s}.art-fb .c3{left:16%;bottom:14%;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:900px){.sol-hero-grid{grid-template-columns:1fr}}
.sol-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.sol-intro .statement{max-width:none;font-size:clamp(1.7rem,3.4vw,2.8rem)}
.sol-intro .body{display:grid;gap:18px;font-size:1.06rem}
@media(max-width:900px){.sol-intro{grid-template-columns:1fr}}
.qlist{counter-reset:q;border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.qlist li{counter-increment:q;display:grid;padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.qlist li::before{content:counter(q,decimal-leading-zero);font:700 .9rem var(--sans);background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.qlist h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600}
.qlist p{font-size:.98rem}

.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(40px,5vw,64px)}
.shelf article{border:1px solid var(--line);border-radius:22px;padding:24px 22px;background:#fff;display:flex;flex-direction:column;gap:10px;transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s}
.shelf article:hover{transform:translateY(-5px);box-shadow:0 30px 60px -36px rgba(22,22,58,.35)}
.shelf .sw{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--g,var(--talk));margin-bottom:6px}
.shelf .sw .ic{width:22px;height:22px}
.shelf h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.shelf p{font-size:.88rem;color:var(--body)}
.shelf article:nth-child(8n+1){--g:linear-gradient(135deg,#f7a600,#f15a24)}
.shelf article:nth-child(8n+2){--g:linear-gradient(135deg,#f15a24,#e8336f)}
.shelf article:nth-child(8n+3){--g:linear-gradient(135deg,#e8336f,#8a3fd1)}
.shelf article:nth-child(8n+4){--g:linear-gradient(135deg,#8a3fd1,#2f6fe0)}
.shelf article:nth-child(8n+5){--g:linear-gradient(135deg,#2f6fe0,#11a5ff)}
.shelf article:nth-child(8n+6){--g:linear-gradient(135deg,#11a5ff,#14a3a0)}
.shelf article:nth-child(8n+7){--g:linear-gradient(135deg,#14a3a0,#2cc46f)}
.shelf article:nth-child(8n+8){--g:linear-gradient(135deg,#2cc46f,#bcd52c)}
@media(max-width:1000px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.shelf{grid-template-columns:1fr}}
.uc-rows{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.uc-row{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.1fr) auto;gap:16px 36px;align-items:center;padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding .4s}
.uc-row:hover{padding-left:12px}
.uc-row .n{font:800 2.4rem var(--sans);letter-spacing:-.05em;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.uc-row .tag{display:block;font:700 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.uc-row h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700}
.uc-row .go{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:1.1rem;color:var(--navy);transition:background .3s,color .3s}
.uc-row:hover .go{background:var(--navy);color:#fff}
@media(max-width:800px){.uc-row{grid-template-columns:56px 1fr}.uc-row p,.uc-row .go{grid-column:2}}
.pull{margin:0;max-width:30ch;font:500 clamp(1.5rem,3vw,2.35rem)/1.32 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.pull::before{content:"“";display:block;font:800 4.5rem/0.6 var(--sans);background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px}
.pull-cite{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:.9rem;color:var(--muted)}
.pull-cite b{color:var(--navy)}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.related a{border:1px solid var(--line);border-radius:22px;padding:24px;text-decoration:none;display:grid;gap:6px;background:#fff;transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s}
.related a:hover{transform:translateY(-5px);box-shadow:0 30px 60px -36px rgba(22,22,58,.35)}
.related b{color:var(--navy);font-size:1.1rem}
.related span{font-size:.9rem;color:var(--muted)}
@media(max-width:800px){.related{grid-template-columns:1fr}}
.sol-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,64px)}
.sol-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;overflow:hidden;text-decoration:none;background:#fff;transition:transform .6s cubic-bezier(.2,.7,.1,1),box-shadow .6s}
.sol-card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -36px rgba(22,22,58,.35)}
.sol-card .sol-art{border-radius:0;box-shadow:none;aspect-ratio:16/10}
.sol-card .body{padding:24px 26px 28px;display:grid;gap:8px}
.sol-card h3{font-size:1.35rem;font-weight:700}
.sol-card p{font-size:.94rem}
@media(max-width:1000px){.sol-index{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.sol-index{grid-template-columns:1fr}}

/* case study and use case pages */
.cs-hero{padding:clamp(130px,14vw,180px) 0 clamp(36px,4vw,56px)}
.cs-tag{display:inline-flex;align-items:center;gap:10px;font:700 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);padding:8px 14px;border-radius:999px;background:var(--soft)}
.cs-hero h1{font-size:clamp(2.8rem,6.4vw,5.8rem);font-weight:800;letter-spacing:-.05em;margin-top:22px;max-width:14ch}
.cs-scope{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:.92rem;color:var(--muted)}
.cs-scope b{color:var(--navy);margin-right:6px}
.cs-scope span{padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;color:var(--navy)}
.cs-banner{margin:0 auto;max-width:var(--wrap);padding:0 var(--gut)}
.cs-banner .sol-art{aspect-ratio:21/9;border-radius:32px}
.cs-sec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--line)}
.cs-sec:first-child{border-top:0}
.cs-sec > h2{font:700 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cs-sec .body{display:grid;gap:18px;font-size:1.08rem;max-width:44em}
.cs-sec .body h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700}
@media(max-width:800px){.cs-sec{grid-template-columns:1fr}}
.illus-note{display:inline-flex;gap:10px;align-items:center;font-size:.85rem;color:var(--muted);padding:10px 16px;border-radius:14px;background:var(--soft);margin-top:24px}
.uc-detail{border:1px solid var(--line);border-radius:28px;padding:clamp(26px,3.4vw,48px);background:#fff;margin-top:22px;scroll-margin-top:110px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px)}
.uc-detail h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;margin:12px 0 14px}
.uc-detail dl{display:grid;gap:18px;margin:0}
.uc-detail dt{font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.uc-detail dd{margin:4px 0 0;font-size:.98rem}
@media(max-width:860px){.uc-detail{grid-template-columns:1fr}}
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.prod-grid article{border:1px solid var(--line);border-radius:22px;padding:22px;background:#fff;display:grid;gap:8px;align-content:start}
.prod-grid .tag{font:700 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prod-grid h3{font-size:1.15rem;font-weight:700}
.prod-grid p{font-size:.88rem}
@media(max-width:1000px){.prod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.prod-grid{grid-template-columns:1fr}}

/* blog catalogue */
.blog-hero h1{font-weight:800;letter-spacing:-.05em}
.blog-tools{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:36px}
.blog-search{position:relative;max-width:420px}
.blog-search input{min-height:52px;padding:12px 18px 12px 46px;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff}
.blog-search input:focus{outline:none;border-color:#14a3a0;box-shadow:0 0 0 4px rgba(20,163,160,.12)}
.blog-search .ic{position:absolute;left:17px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted)}
.blog-count{font-size:.88rem;color:var(--muted)}
.filters{margin-top:22px}
.filters button,.subfilters button{transition:background .25s,color .25s,border-color .25s}
.filters button[aria-pressed=true]{background:var(--navy);border-color:var(--navy)}
.subfilters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px;border-radius:20px;background:var(--soft)}
.subfilters button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font:600 .82rem var(--sans);color:var(--body);cursor:pointer}
.subfilters button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 6px 16px -10px rgba(22,22,58,.4)}
.feature-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border:1px solid var(--line);border-radius:30px;overflow:hidden;text-decoration:none;background:#fff;margin-bottom:clamp(24px,3vw,36px);transition:transform .6s cubic-bezier(.2,.7,.1,1),box-shadow .6s}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 40px 80px -40px rgba(22,22,58,.35)}
.feature-card .cover{aspect-ratio:auto;min-height:320px}
.feature-card .body{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.feature-card .kicker{font:700 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#14a3a0}
.feature-card h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700}
.feature-card p{color:var(--body)}
.feature-card .meta{font-size:.82rem;color:var(--muted)}
@media(max-width:860px){.feature-card{grid-template-columns:1fr}.feature-card .cover{min-height:220px}}
.blog-empty{padding:40px 0;color:var(--muted)}
.cat-real-estate{--c1:#a14c86;--c2:#6b5fae;--c3:#3f62b2}
.cat-ecommerce{--c1:#3cbcea;--c2:#5cb85c;--c3:#bccf2c}
.cat-education{--c1:#ffd36b;--c2:#5cb85c;--c3:#3cbcea}
.cat-health{--c1:#7be0c3;--c2:#3cbcea;--c3:#a6dcff}
.cat-technology{--c1:#2f6fe0;--c2:#8a3fd1;--c3:#11a5ff}
.cat-governance{--c1:#f39221;--c2:#6b5fae;--c3:#3f62b2}
.cat-marketing{--c1:#e8336f;--c2:#f7a600;--c3:#ff7d12}
.cat-hospitality{--c1:#ffb3c1;--c2:#f39221;--c3:#ffd36b}
.cat-manufacturing{--c1:#6b7a8f;--c2:#3f62b2;--c3:#3cbcea}
.cat-news{--c1:#2cc46f;--c2:#14a3a0;--c3:#11a5ff}
.cat-solutions{--c1:#ffd36b;--c2:#f39221;--c3:#ec4b37}
.cat-ideas{--c1:#ffd36b;--c2:#e8336f;--c3:#8a3fd1}
.cat-stories{--c1:#ff7d12;--c2:#ff3d57;--c3:#ffd36b}
.post-card .cover .cat{font-weight:700}

/* menu overlay: grouped */
.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:28px 40px}
.menu-group{display:grid;gap:2px;align-content:start}
.menu-group h2{font:700 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.menu-group h2:first-child{margin-top:0}
.menu-group a{font:600 clamp(1.1rem,2.2vw,1.45rem) var(--sans);letter-spacing:-.02em;color:var(--navy);text-decoration:none;padding:5px 0}
.menu-group a:hover{color:#14a3a0}
.menu-group .socials{margin-top:12px}
.menu-group .socials a{padding:0}
@media(max-width:760px){.menu-grid{grid-template-columns:1fr}}

/* footer: clean and segmented */

.foot .foot-brand .brand img{width:44px;height:44px}
.foot-line{margin-top:16px;color:var(--navy)!important;font-size:1rem;line-height:1.5;max-width:22em}
.foot address{font-style:normal;display:grid;gap:12px;font-size:.9rem;color:var(--body)}
.foot address b{display:block;font:700 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.foot address a{display:inline!important;padding:0!important;color:var(--navy)!important}
.foot-grid nav h2{font:700 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot-base{margin-top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.foot-legal a{text-decoration:none}
.foot-legal a:hover{color:var(--navy)}
.foot-sign{text-align:right;letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;font-weight:600}

@media(max-width:640px){.foot-base{grid-template-columns:1fr}.foot-legal{justify-content:flex-start}.foot-sign{text-align:left}}

/* contact: minimal, modern */
.contact-grid .form-card{border-radius:30px}
.need-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.need-grid label{margin:0;cursor:pointer}
.need-grid input{position:absolute;opacity:0}
.need-grid span{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 16px 14px;border-radius:18px;border:1.5px solid var(--line);background:#fff;font:700 .95rem var(--sans);color:var(--navy);transition:border-color .2s,background .2s,box-shadow .2s}
.need-grid span small{font:400 .78rem var(--sans);color:var(--muted)}
.need-grid label:hover span{border-color:var(--line-strong)}
.need-grid input:checked + span{border-color:#14a3a0;background:#f2fbfa;box-shadow:0 0 0 4px rgba(20,163,160,.1)}
.need-grid input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:620px){.need-grid{grid-template-columns:1fr 1fr}}
.form-pop legend{font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* cookie page */
.jar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:1.4em 0}
.jar div{border:1px solid var(--line);border-radius:20px;padding:20px;background:#fff}
.jar b{display:block;font-size:1rem;margin-bottom:6px}
.jar code{font-size:.78rem;color:var(--muted)}
.jar p{font-size:.92rem}
@media(max-width:760px){.jar{grid-template-columns:1fr}}

/* article images from the CMS */
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cover.has-img::before,.cover.has-img::after{display:none}
.cover .cat{z-index:1}
.post-hero-img{margin:0;border-radius:28px;overflow:hidden;background:var(--paper)}
.post-hero-img img{width:100%;height:100%;object-fit:cover}
.prose img{border-radius:18px;margin:2em auto}
.prose code{font-size:.9em;background:var(--soft);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--soft);padding:18px;border-radius:14px;overflow:auto;font-size:.9rem}

/* v8b: specificity fixes for the reference hero and the green CTA */

.nav-links a.btn-talk.nav-cta,[data-page] .nav .nav-links a.btn-talk.nav-cta{background:var(--talk)!important;color:#fff!important;border:0!important}

.hero-home h1.trio .kw{padding-bottom:.2em;margin-bottom:-.2em}

.hero-home h1.trio .kw-i{padding-bottom:.2em;margin-bottom:-.2em}

/* ================= v9: refinement pass ================= */
/* typography: stronger hierarchy */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08}
h3{letter-spacing:-.02em}
.lead{color:#3f4150}
body{color:#4a4c58}
h1 em,h2 em,h3 em{font-weight:700}
.eyebrow{font-weight:600;letter-spacing:.02em;color:#6f7180}

/* hero image: never enlarged beyond its own pixels on standard screens */

/* 01 what we believe */
.believe-grid{display:grid;align-items:end}
.believe-h{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1.04;max-width:14ch}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.pillars li{padding-top:28px;position:relative}
.pillars li::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:3px;border-radius:3px;background:var(--spectrum)}
.pill-n{font:700 .8rem var(--sans);color:var(--muted);letter-spacing:.08em}
.pillars h3{font-size:clamp(1.4rem,2vw,1.75rem);margin:10px 0 10px}
.pillars p{font-size:1rem;max-width:26em}
@media(max-width:800px){.believe-grid,.pillars{grid-template-columns:1fr}}

/* 02 solutions around the ring */
.ring-sol{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.rs-col{display:grid;gap:14px}
.rs-col a{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.1,1),box-shadow .45s,border-color .3s}
.rs-col a:hover,.rs-col a.on{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(22,22,58,.35);border-color:var(--c)}
.rs-dot{flex:none;width:14px;height:14px;margin-top:5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent)}
.rs-col b{display:block;font-size:1.08rem;color:var(--navy);letter-spacing:-.01em}
.rs-col b + span{display:block;font-size:.92rem;color:var(--body);margin-top:4px;line-height:1.5}
.rs-ring svg{width:100%;height:auto;display:block}
.rs-ring .seg{transition:opacity .4s,stroke-width .4s}
.rs-ring svg.hl .seg{opacity:.22}
.rs-ring svg.hl .seg.on{opacity:1;stroke-width:34}

.rs-big{font:800 34px var(--sans);fill:#16163a;letter-spacing:-1.2px}
.rs-small{font:600 15px var(--sans);fill:#6f7180;letter-spacing:.4px}
@keyframes ringSpin{to{transform:rotate(270deg)}}
@media(max-width:1000px){.ring-sol{grid-template-columns:1fr}.rs-ring{max-width:360px;margin:0 auto;order:-1}}

/* 03 Sociam Connect AI */
.connect-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:center}
.connect-feats{display:grid;gap:18px;margin-top:32px}
.connect-feats li{display:flex;gap:16px;align-items:flex-start;font-size:.98rem;line-height:1.55}
.connect-feats b{display:block;color:var(--navy);font-size:1.05rem;margin-bottom:2px}
.cf-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--c)}
.cf-ic .ic{width:20px;height:20px}
.connect-note{margin-top:22px;font-size:.84rem;color:var(--muted)}
.chat-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 50px 90px -50px rgba(22,22,58,.45);overflow:hidden;position:relative}
.chat-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--spectrum)}
.chat-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.chat-av{width:40px;height:40px;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 62%);mask:radial-gradient(farthest-side,transparent 58%,#000 62%)}
.chat-head b{display:block;color:var(--navy)}
.chat-head small{color:var(--muted);font-size:.8rem}
.chat-live{margin-left:auto;font:600 .74rem var(--sans);color:#14a3a0;background:#eafaf6;padding:5px 10px;border-radius:999px}
.chat-body{display:grid;gap:12px;padding:24px 22px;background:linear-gradient(180deg,#fbfaff,#fff)}
.msg{max-width:84%;padding:12px 16px;border-radius:18px 18px 18px 6px;background:#f2f1f7;color:var(--navy);font-size:.94rem;line-height:1.5}
.msg.me{justify-self:end;border-radius:18px 18px 6px 18px;background:var(--talk);color:#fff}
.js .chat-card .msg{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.js .chat-card.in .msg{opacity:1;transform:none}
.js .chat-card.in .msg:nth-child(2){transition-delay:.5s}.js .chat-card.in .msg:nth-child(3){transition-delay:1s}.js .chat-card.in .msg:nth-child(4){transition-delay:1.5s}
.chat-lead{display:flex;gap:12px;align-items:center;margin:0 22px 22px;padding:14px 16px;border-radius:16px;background:#f2fbf8;border:1px solid #cdeee5;font-size:.84rem;color:var(--body)}
.chat-lead b{display:block;color:var(--navy);font-size:.92rem}
.ok-dot{width:12px;height:12px;border-radius:50%;background:#2cc46f;box-shadow:0 0 0 5px rgba(44,196,111,.18)}
@media(max-width:900px){.connect-grid{grid-template-columns:1fr}}

/* 04 the funnel */
.funnel-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);margin-top:clamp(40px,5vw,72px);align-items:start}
.funnel-visual{position:sticky;top:120px}
.funnel-visual svg{width:100%;max-width:440px;height:auto;display:block;margin:0 auto;overflow:visible}
.f-layer{transform-box:fill-box;transform-origin:center;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.1,1)}
.f-layer.on{transform:scale(1.04)}
.f-labels text{font:700 17px var(--sans);fill:#fff;letter-spacing:.2px;pointer-events:none}
.f-dots circle{opacity:.85}
.funnel-stages{display:grid;gap:12px}
.funnel-stages li{display:flex;gap:20px;padding:24px 26px;border-radius:22px;border:1px solid transparent;transition:background .4s,border-color .4s,box-shadow .4s;cursor:default}
.funnel-stages li.on{background:#fff;border-color:var(--line);box-shadow:0 30px 60px -40px rgba(22,22,58,.35)}
.fs-n{flex:none;font:800 1rem var(--sans);color:var(--c);padding-top:4px}
.funnel-stages h3{font-size:clamp(1.25rem,1.8vw,1.5rem);color:var(--navy)}
.funnel-stages p{margin-top:8px;font-size:.98rem;opacity:.75;transition:opacity .4s}
.funnel-stages li.on p{opacity:1}
@media(max-width:900px){.funnel-grid{grid-template-columns:1fr}.funnel-visual{position:static}.funnel-visual svg{max-width:320px}}

/* 09 begin + every call-to-action panel: light, in tune with the site */
.cta-panel{background:linear-gradient(135deg,#fff8f0 0%,#fbf3ff 55%,#eefaf7 100%);color:var(--body);border:1px solid var(--line)}
.cta-panel::before{opacity:.55}
.cta-panel::after{opacity:.18}
.cta-panel h2{color:var(--navy)}
.cta-panel .lead{color:#4a4c58}
.cta-panel .eyebrow,.cta-panel .eyebrow .n{color:var(--muted)!important}
.cta-panel .btn{border-color:var(--navy);color:var(--navy)}
.cta-panel .btn-ink{background:var(--navy);color:#fff;border-color:var(--navy)}
.cta-panel .btn:hover{background:var(--navy);color:#fff}

/* offers */
.offer-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.offer-card{display:flex;flex-direction:column;border-radius:30px;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:0 40px 80px -56px rgba(22,22,58,.4)}
.offer-top{padding:clamp(28px,3.4vw,44px);background:linear-gradient(135deg,#fff4e6,#ffe9ef);position:relative}
.offer-card.alt .offer-top{background:linear-gradient(135deg,#eef5ff,#f1ecff)}
.offer-tag{display:inline-flex;align-items:center;gap:8px;font:700 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:rgba(255,255,255,.75);padding:7px 12px;border-radius:999px}
.offer-tag .ic{width:15px;height:15px}
.offer-name{font-size:clamp(2.6rem,5vw,4rem);font-weight:800;letter-spacing:-.05em;margin:18px 0 10px;background:linear-gradient(90deg,#f15a24,#e8336f 55%,#8a3fd1);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%;padding-bottom:.08em}
.offer-card.alt .offer-name{background-image:linear-gradient(90deg,#2f6fe0,#8a3fd1 55%,#e8336f)}
.offer-line{font-size:1.08rem;color:#3f4150;max-width:30em}
.offer-body{padding:clamp(24px,3vw,40px);display:grid;gap:22px;flex:1}
.offer-label{display:flex;align-items:center;gap:8px;font:700 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.offer-label .ic{width:16px;height:16px;color:#e8336f}
.offer-list{display:grid;gap:10px}
.offer-list li{display:flex;gap:12px;font-size:.98rem;color:var(--navy)}
.offer-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--talk);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17L5.6 12.3l1.6-1.6 3.2 3.1 6.4-6.4 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17L5.6 12.3l1.6-1.6 3.2 3.1 6.4-6.4 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.offer-gift{padding:18px 20px;border-radius:18px;background:#fff8f2;border:1px dashed #f5c7a6}
.offer-card.alt .offer-gift{background:#f6f4ff;border-color:#cfc4ff}
.offer-gift ul{display:grid;gap:6px;margin-top:10px;font-size:.94rem;color:var(--navy)}
.offer-gift li::before{content:"+ ";color:#e8336f;font-weight:700}
.offer-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;padding:0 clamp(24px,3vw,40px) clamp(28px,3vw,40px)}
@media(max-width:900px){.offer-pair{grid-template-columns:1fr}}

/* art illustrations in place of photos */
.sol-art img[src$=".svg"]{object-fit:cover;background:#fff}
.cover.has-img .cat{display:none}
.post-hero-img{aspect-ratio:1200/630}

.rs-ring g[transform]{transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);animation:ringSpin2 90s linear infinite}
@keyframes ringSpin2{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@media(prefers-reduced-motion:reduce){.rs-ring g[transform]{animation:none}}
.f-layer{opacity:.5}
.f-layer.on{opacity:1}
/* funnel motion */
.funnel-visual .f-layer,.funnel-visual .f-labels text{animation:none}
.js .funnel-visual:not(.in-view) .f-layer,.js .funnel-visual:not(.in-view) .f-labels text{opacity:0}
.funnel-visual.in-view .f-layer{animation:fDrop .8s cubic-bezier(.2,.7,.1,1) backwards}
.funnel-visual.in-view .f-labels text{animation:fFade .6s ease backwards}
.funnel-visual.in-view .f-layer[data-stage="1"],.funnel-visual.in-view .f-labels text:nth-child(2){animation-delay:.12s}
.funnel-visual.in-view .f-layer[data-stage="2"],.funnel-visual.in-view .f-labels text:nth-child(3){animation-delay:.24s}
.funnel-visual.in-view .f-layer[data-stage="3"],.funnel-visual.in-view .f-labels text:nth-child(4){animation-delay:.36s}
.funnel-visual.in-view .f-layer[data-stage="4"],.funnel-visual.in-view .f-labels text:nth-child(5){animation-delay:.48s}
@keyframes fDrop{from{opacity:0;transform:translateY(-26px) scale(.94)}}
@keyframes fFade{from{opacity:0}}
.f-layer.on{animation:fGlow 2.4s ease-in-out infinite!important;filter:drop-shadow(0 12px 20px rgba(22,22,58,.22))}
@keyframes fGlow{0%,100%{filter:drop-shadow(0 10px 16px rgba(22,22,58,.18)) brightness(1)}50%{filter:drop-shadow(0 16px 26px rgba(22,22,58,.3)) brightness(1.08)}}
.f-shine{mix-blend-mode:soft-light}
.funnel-stages li{position:relative;overflow:hidden}
.funnel-stages li::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--c);opacity:.8}
.funnel-stages.auto li.on::after{animation:fBar 3.2s linear forwards}
@keyframes fBar{to{width:100%}}
@media(prefers-reduced-motion:reduce){.funnel-visual .f-layer,.funnel-visual .f-labels text{opacity:1!important;animation:none!important}.f-dots,.f-shine,.f-out{display:none}}

/* v10: footer in sync with the section above it */

.foot{background:#fff;padding:clamp(56px,6vw,80px) 0 0;border-top:1px solid var(--line)}
.foot::before{opacity:.7}
.foot-grid{padding:0 0 clamp(40px,5vw,56px)}
.foot .foot-line{margin-top:18px;color:var(--navy)!important;max-width:16em}
.foot .foot-line span{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot address{margin:20px 0 20px}
.foot-base{padding:20px 0 28px}

/* v11: hero uses the original artwork (1104x872), never displayed above its own resolution */

.statement em{display:block;margin-top:.35em;font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}

.ask-log .b{white-space:pre-line}

/* ================= Sociam Flow AI product page: editorial, restrained ================= */
.flowai{--fa:#14a3a0;--fa-soft:#eaf7f5;--ink2:#16163a;--rad:14px}

.flow-hero{padding:clamp(130px,13vw,170px) 0 clamp(56px,7vw,96px);border-bottom:1px solid var(--line)}
.flow-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.flow-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 .82rem var(--sans);letter-spacing:.04em;color:var(--ink2);margin-bottom:26px}
.flow-kicker .sep{color:var(--muted)}
.flow-hero h1{font-weight:800;letter-spacing:-.05em;line-height:1.02}
.flow-hero h1 em{background:linear-gradient(90deg,#14a3a0,#2f6fe0);-webkit-background-clip:text;background-clip:text;color:transparent}
.flow-hero .lead{margin:26px 0 34px;max-width:32em}
.flow-note{margin-top:22px;font-size:.86rem;color:var(--muted)}
.ui-win{border:1px solid var(--line);border-radius:var(--rad);background:#fff;box-shadow:0 40px 80px -50px rgba(22,22,58,.35);overflow:hidden}
.ui-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fbfbfc;font-size:.78rem}
.ui-bar span{width:9px;height:9px;border-radius:50%;background:#e3e2ea}
.ui-bar b{margin-left:10px;color:var(--ink2);font-weight:700}
.ui-bar em{margin-left:auto;font-style:normal;color:var(--muted)}
.ui-body{display:grid;grid-template-columns:1.3fr 1fr}
.ui-thread{display:grid;gap:10px;padding:20px;align-content:start}
.m{max-width:92%;padding:10px 14px;border-radius:12px;font-size:.88rem;line-height:1.5;color:var(--ink2);background:#f3f3f6}
.m.u{justify-self:end;background:var(--ink2);color:#fff}
.ui-profile{border-left:1px solid var(--line);padding:20px;background:#fcfcfd}
.ui-label{font:700 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ui-profile dl,.mini-dl,.fd-fields{display:grid;gap:10px;margin:0}
.ui-profile dt,.mini-dl dt,.fd-fields dt{font-size:.72rem;color:var(--muted)}
.ui-profile dd,.mini-dl dd,.fd-fields dd{margin:2px 0 0;font-weight:600;color:var(--ink2);font-size:.9rem}
.flowai .ok{color:var(--fa)!important;font-weight:700}
.js .flow-hero-ui .m{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.js .flow-hero-ui.in .m{opacity:1;transform:none}
.js .flow-hero-ui.in .m:nth-child(2){transition-delay:.5s}.js .flow-hero-ui.in .m:nth-child(3){transition-delay:1s}
.flow-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.flow-problem-list ol{counter-reset:p;margin-top:28px;border-top:1px solid var(--line)}
.flow-problem-list li{counter-increment:p;display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);font-size:1rem}
.flow-problem-list li::before{content:counter(p,decimal-leading-zero);font:700 .82rem var(--sans);color:var(--fa);padding-top:3px}
.flow-problem-list b{color:var(--ink2)}
.flow-journey{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);position:relative}
.flow-journey::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--line)}
.flow-journey::after{content:"";position:absolute;left:0;top:15px;height:2px;width:0;background:linear-gradient(90deg,var(--fa),#2f6fe0);transition:width 2.4s cubic-bezier(.4,0,.2,1)}
.flow-journey.in-view::after{width:100%}
.flow-journey li{position:relative;padding:44px 18px 0 0}
.flow-journey li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--fa);transition:background .4s}
.flow-journey.in-view li::before{background:var(--fa)}
.flow-journey.in-view li:nth-child(2)::before{transition-delay:.4s}.flow-journey.in-view li:nth-child(3)::before{transition-delay:.8s}.flow-journey.in-view li:nth-child(4)::before{transition-delay:1.2s}.flow-journey.in-view li:nth-child(5)::before{transition-delay:1.6s}.flow-journey.in-view li:nth-child(6)::before{transition-delay:2s}
.fj-n{font:700 .74rem var(--sans);color:var(--muted);letter-spacing:.08em}
.flow-journey h3{font-size:1.15rem;margin:6px 0 8px;color:var(--ink2)}
.flow-journey p{font-size:.9rem;line-height:1.55}
@media(max-width:960px){.flow-journey{grid-template-columns:1fr 1fr;gap:28px 20px}.flow-journey::before,.flow-journey::after{display:none}.flow-journey li{padding-top:30px}}
@media(max-width:520px){.flow-journey{grid-template-columns:1fr}}
.flow-cap-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.flow-cap-grid section{padding:32px 32px 32px 0;border-bottom:1px solid var(--line)}
.flow-cap-grid section:nth-child(even){padding-left:32px;border-left:1px solid var(--line)}
.cap-n{font:700 .78rem var(--sans);color:var(--fa)}
.flow-cap-grid h3{font-size:1.35rem;margin:8px 0 14px;color:var(--ink2)}
.flow-cap-grid ul{display:grid;gap:8px}
.flow-cap-grid li{position:relative;padding-left:18px;font-size:.96rem}
.flow-cap-grid li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--fa)}
@media(max-width:800px){.flow-cap-grid{grid-template-columns:1fr}.flow-cap-grid section,.flow-cap-grid section:nth-child(even){padding:26px 0;border-left:0}}
.flow-demo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);margin-top:clamp(40px,5vw,64px);border:1px solid var(--line);border-radius:var(--rad);background:#fff;overflow:hidden;box-shadow:0 40px 80px -56px rgba(22,22,58,.4)}
.fd-head,.fd-ph{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.fd-head b,.fd-ph b{display:block;color:var(--ink2);font-size:.95rem}
.fd-head small,.fd-ph small{color:var(--muted);font-size:.76rem}
.fd-thread{display:grid;gap:10px;padding:22px 20px;max-height:460px;overflow:auto}
.fd-profile{border-left:1px solid var(--line);background:#fcfcfd;display:flex;flex-direction:column}
.fd-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--fa-soft);color:var(--fa);font-weight:800}
.fd-tag{margin-left:auto;font:700 .7rem var(--sans);color:var(--fa);background:var(--fa-soft);padding:5px 9px;border-radius:999px;white-space:nowrap}
.fd-fields{padding:20px;grid-template-columns:1fr 1fr;gap:16px}
.fd-next{margin:0 20px;padding:14px 16px;border:1px solid #cdeee5;background:#f4fbf9;border-radius:10px;font-size:.88rem}
.fd-disc{margin:auto 20px 18px;padding-top:16px;font-size:.74rem;color:var(--muted)}
@media(max-width:900px){.flow-demo{grid-template-columns:1fr}.fd-profile{border-left:0;border-top:1px solid var(--line)}}
.flow-use-rows{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.flow-use-rows article{display:grid;grid-template-columns:72px minmax(0,.6fr) minmax(0,1.4fr);gap:16px 32px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.use-n{font:700 .82rem var(--sans);color:var(--fa)}
.flow-use-rows h3{font-size:1.35rem;color:var(--ink2)}
@media(max-width:800px){.flow-use-rows article{grid-template-columns:48px 1fr}.flow-use-rows p{grid-column:2}}
.fw{margin-top:clamp(36px,4vw,56px);border:1px solid var(--line);border-radius:var(--rad);background:#fff;overflow:hidden}
.fw-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--line)}
.fw-tabs button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:16px 18px;border:0;background:none;cursor:pointer;font:600 .92rem var(--sans);color:var(--muted);text-align:left;border-right:1px solid var(--line);transition:color .25s,background .25s}
.fw-tabs button:last-child{border-right:0}
.fw-tabs button span{font-size:.7rem;letter-spacing:.08em}
.fw-tabs button[aria-selected=true]{color:var(--ink2);background:var(--fa-soft)}
.fw-tabs button:hover{color:var(--ink2)}
.fw-tabs button:focus-visible{outline:2px solid var(--fa);outline-offset:-2px}
.fw-progress{height:2px;background:var(--line)}
.fw-progress i{display:block;height:100%;width:16.66%;background:var(--fa);transition:width .5s cubic-bezier(.2,.7,.1,1)}
.fw-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);padding:clamp(24px,3.4vw,44px);align-items:center;animation:fwIn .45s ease}
@keyframes fwIn{from{opacity:0;transform:translateY(8px)}}
.fw-copy h3{font-size:clamp(1.4rem,2.2vw,1.8rem);color:var(--ink2);margin-bottom:12px}
.card-ui{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fcfcfd}
.card-ui.thread{display:grid;gap:10px}
.card-ui .big{font:700 1.2rem var(--sans);color:var(--ink2);margin-bottom:12px}
.mini-dl{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.slots span{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:.84rem;color:var(--ink2);background:#fff}
.slots .on{border-color:var(--fa);background:var(--fa-soft);font-weight:700}
.fw-nav{display:flex;justify-content:flex-end;gap:10px;padding:0 clamp(24px,3.4vw,44px) clamp(24px,3vw,36px)}
@media(max-width:900px){.fw-tabs{grid-template-columns:repeat(3,1fr)}.fw-tabs button:nth-child(3){border-right:0}.fw-tabs button:nth-child(-n+3){border-bottom:1px solid var(--line)}.fw-panel{grid-template-columns:1fr}.opts{grid-template-columns:1fr}}
.scope-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.scope-cols h3{font-size:1.1rem;color:var(--ink2);margin-bottom:12px}
.scope-cols ul{display:grid;gap:8px}
.scope-cols li{position:relative;padding-left:18px;font-size:.96rem}
.scope-cols li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--fa)}
.scope-note{grid-column:1/-1;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
@media(max-width:900px){.flow-hero-grid,.flow-split{grid-template-columns:1fr}.ui-body{grid-template-columns:1fr}.ui-profile{border-left:0;border-top:1px solid var(--line)}.scope-cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fw-panel{animation:none}.flow-journey::after{transition:none}}
.nav-links .dd-panel a.dd-feature{flex-direction:row;align-items:center;gap:12px;margin-top:6px;border:1px solid var(--line);background:linear-gradient(90deg,#f2fbf9,#fff)}
.dd-feature > span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.dd-feature em{margin-left:auto;font:700 .66rem var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#14a3a0}
.flow-mark{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--ring);-webkit-mask:radial-gradient(farthest-side,transparent 55%,#000 60%);mask:radial-gradient(farthest-side,transparent 55%,#000 60%);flex:none}

/* v12: subtle life on the homepage */

@keyframes phoenixFloat{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-8px) rotate(-.6deg) scale(1.008)}}
.sparkles{position:absolute;inset:0;z-index:1;pointer-events:none}
.sparkles i{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;opacity:0;animation:twinkle 5.2s ease-in-out var(--d) infinite}
.sparkles i::before,.sparkles i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--c);border-radius:2px}
.sparkles i::before{width:2px;height:10px}.sparkles i::after{width:10px;height:2px}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}12%{opacity:.9;transform:scale(1) rotate(45deg)}30%{opacity:0;transform:scale(.4) rotate(90deg)}}
.trio .kw-i,.trio > span{background-size:200% 100%!important;animation-name:kwIn,shimmer;animation-duration:1.1s,9s;animation-timing-function:cubic-bezier(.2,.7,.1,1),ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none}
.trio > span{animation:shimmer 9s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.trio .w2,.trio .w2 .kw-i{background-image:linear-gradient(90deg,#1f9d55 0%,#13a38a 33%,#0b8ea8 66%,#1f9d55 100%)}
.trio .w3,.trio .w3 .kw-i{background-image:linear-gradient(90deg,#11a5ff 0%,#1d5cff 30%,#5b2cff 60%,#9b2cf0 80%,#11a5ff 100%)}
.trio.kinetic-on > span{background-image:none;animation:none}
.js .pillars li,.js .rs-col li,.js .steps li{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.1,1),transform .7s cubic-bezier(.2,.7,.1,1)}
.js .in .pillars li,.js .pillars.in li,.js .ring-sol.in .rs-col li,.js .steps.in li{opacity:1;transform:none}
.js .pillars.in li:nth-child(2),.js .steps.in li:nth-child(2),.js .ring-sol.in .rs-col li:nth-child(2){transition-delay:.12s}
.js .pillars.in li:nth-child(3),.js .steps.in li:nth-child(3),.js .ring-sol.in .rs-col li:nth-child(3){transition-delay:.24s}
.js .steps.in li:nth-child(4){transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.sparkles{display:none}.trio .kw-i,.trio > span{animation:none!important}.js .pillars li,.js .rs-col li,.js .steps li{opacity:1;transform:none}}
.flow-hero h1{font-size:clamp(2.6rem,4.6vw,4.3rem);max-width:15ch}

/* v13: friendlier wordmark and a calmer footer */
.wordmark{background:linear-gradient(90deg,#f2a900 0%,#e6b800 28%,#8cc63f 58%,#2cb55f 82%,#14a3a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.foot .foot-line{display:flex;flex-direction:column;gap:2px;font:700 1.08rem/1.35 var(--sans);letter-spacing:-.015em}
.foot .foot-line .fl-1{color:var(--navy);background:none;-webkit-text-fill-color:currentColor}
.foot .foot-line .fl-2{background:linear-gradient(90deg,#f2a900,#2cb55f 60%,#14a3a0);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-company a:not(.brand){font-weight:700;color:var(--navy)!important}
.foot-company h2{color:var(--navy)!important}
@media(max-width:1000px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:900px){.flow-kicker .sep{display:none}}

/* v14: hero as one composed grid. Copy and phoenix share a row, so they stay in step at every width. */

/* v15: phoenix on a clean white cutout, so it sits on the page instead of in a box; "imagine." in logo yellow */

.trio .w1,.trio .w1 .kw-i{background-image:linear-gradient(90deg,#f6c514 0%,#f2b000 30%,#ffcf2e 55%,#f2b000 80%,#f6c514 100%)}

@media(min-width:901px){.flow-split > :first-child{position:sticky;top:110px}}

/* v16: section intros read as one unit. Heading first, its lead directly beneath, never stranded in a far column. */
.head-split{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;align-items:start!important;max-width:880px}
.head-split > :not(:first-child){max-width:60ch;justify-self:start;text-align:left}
.head-split > .lead,.head-split > p{margin-top:0;font-size:clamp(1.02rem,1.25vw,1.18rem)}
/* question lists: each answer sits under its question */
.qlist li{grid-template-columns:72px minmax(0,1fr);gap:10px 32px}
.qlist li p{grid-column:2;max-width:68ch}
@media(max-width:800px){.qlist li{grid-template-columns:48px 1fr}}
.believe-grid{grid-template-columns:minmax(0,1fr)!important;gap:20px!important;max-width:900px}
.believe-grid .lead{max-width:60ch}
/* intros that pair copy with an image stay side by side */
@media(min-width:801px){
  .head-split:has(> figure, > img, > picture, > * img){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:clamp(32px,5vw,80px)!important;align-items:center!important;max-width:none}
  .head-split:has(> figure, > img, > picture, > * img) > :not(:first-child){max-width:none;justify-self:stretch}
}

/* v17: hero stays side by side down to small tablets; on phones the message comes first, the phoenix follows */

/* v18: one calm vertical rhythm. ~100px between sections on laptops, never the old 180px chasms. */
:root{--sec:clamp(64px,7.2vw,116px)}

/* page openings start just below the menu bar; the final call to action leads straight into the footer */
.page-hero{padding:clamp(108px,10vw,152px) 0 clamp(40px,5vw,72px)}
.sec.final{padding-bottom:clamp(44px,5vw,72px)}
.foot{padding-top:clamp(44px,5vw,64px)}
.sol-hero,.cs-hero,.flow-hero{padding-top:clamp(108px,10vw,152px)}
.sol-hero,.flow-hero{padding-bottom:clamp(44px,5vw,80px)}

/* ==========================================================================
   HOMEPAGE HERO (.hx). Built fresh; no legacy hero rules apply.
   Composition from the reference: the phoenix scene bleeds off the right edge,
   its left side dissolves into the page beneath the headline, the growth chart
   rises between them, and the headline overlaps the wing.
   ========================================================================== */
.hx{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(620px,100svh,940px);padding:clamp(112px,11vh,140px) 0 clamp(80px,10vh,110px);background:radial-gradient(60% 70% at 0% 0%,#fff8f0 0,rgba(255,248,240,0) 70%),linear-gradient(180deg,#fbfcff 0%,#fefbf6 55%,#f8f0ec 80%,#fff 100%)}
.hx-scene{position:absolute;z-index:0;right:0;bottom:0;width:min(47%,920px);aspect-ratio:808/760;-webkit-mask:linear-gradient(90deg,transparent 0,#000 21%),linear-gradient(180deg,transparent 0,#000 9%,#000 93%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent 0,#000 21%),linear-gradient(180deg,transparent 0,#000 9%,#000 93%,transparent);mask-composite:intersect}
.hx-phoenix{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 100%;translate:var(--px,0) var(--py,0);transition:translate .9s cubic-bezier(.2,.7,.1,1);transform-origin:60% 100%;animation:hxIn 1.4s cubic-bezier(.2,.7,.1,1) both,phoenixFloat 7s ease-in-out 1.4s infinite}
@keyframes hxIn{from{opacity:0;transform:translateX(28px) scale(1.02)}}
.hx-scene .sparkles{z-index:2}
.hx-chart{position:absolute;z-index:1;pointer-events:none;height:auto;--d:1.1s}
.intro-on .hx-chart{--d:3.1s}
.hx-chart .bars rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:barUp .9s cubic-bezier(.2,.7,.1,1) forwards}
.hx-chart .bars rect:nth-child(1){animation-delay:var(--d)}
.hx-chart .bars rect:nth-child(2){animation-delay:calc(var(--d) + .09s)}
.hx-chart .bars rect:nth-child(3){animation-delay:calc(var(--d) + .18s)}
.hx-chart .bars rect:nth-child(4){animation-delay:calc(var(--d) + .27s)}
.hx-chart .bars rect:nth-child(5){animation-delay:calc(var(--d) + .36s)}
.hx-chart .bars rect:nth-child(6){animation-delay:calc(var(--d) + .45s)}
.hx-chart .arrow{stroke-dasharray:340;stroke-dashoffset:340;animation:drawLine 1.3s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--d) + .5s)}
.hx-chart .arrow-head{opacity:0;animation:fadeIn .4s forwards;animation-delay:calc(var(--d) + 1.6s)}
.hx-wrap{position:relative;z-index:2;width:100%}
.hx-copy{max-width:min(62%,880px)}
.hx h1.trio{display:block!important;margin:0;max-width:none;line-height:.9;letter-spacing:-.055em}
.hx h1.trio > span{display:block;width:max-content}
.hx h1.trio .kw,.hx h1.trio .kw-i,.hx h1.trio > span{padding-bottom:.2em;margin-bottom:-.2em}
/* the last line keeps its descender room, so the copy below is measured from the true bottom of "compound." */
.hx h1.trio > span:last-child{margin-bottom:0}
/* optical line spacing: "build." has tall ascenders under the "g" of "imagine.", "compound." is mostly short letters,
   so equal leading looks uneven. Give "build." a little more room and draw "compound." up. */
.hx h1.trio > .w2{margin-top:.06em}
.hx h1.trio > .w3{margin-top:-.12em}
.hx-sub{margin-top:clamp(10px,1.2vw,18px);font:700 clamp(1.12rem,1.55vw,1.65rem)/1.3 var(--sans);letter-spacing:-.012em;color:var(--navy)}
.hx-for{margin-top:clamp(6px,.7vw,10px);max-width:40ch;font-size:clamp(1rem,1.25vw,1.28rem);line-height:1.5;color:var(--muted)}
.hx-rule{display:block;width:96px;height:3px;border-radius:3px;background:var(--spectrum);margin:clamp(20px,2.2vw,30px) 0 clamp(12px,1.2vw,16px)}
.hx-sign{font:600 .74rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.hx-pill{position:absolute;z-index:3;left:50%;bottom:22px;translate:-50% 0}

@media(prefers-reduced-motion:reduce){.hx-phoenix{animation:none;translate:none}.hx-chart .bars rect{transform:none;animation:none}.hx-chart .arrow{stroke-dashoffset:0;animation:none}.hx-chart .arrow-head{opacity:1;animation:none}}

/* MENU: the full menu stays visible on laptops and landscape tablets; the menu button is for phones and portrait tablets */
@media(min-width:861px){.nav-links .dd{display:block}.menu-btn{display:none}}
@media(min-width:861px) and (max-width:1100px){.nav-links{gap:22px}.nav-links .dd-btn{font-size:.92rem}}

.hx-chart{display:none}

.hx h1.trio{font-size:clamp(3.4rem,9vw,10.4rem)}
@media(max-width:1279px){.hx-pill{display:none}}
/* HERO RESPONSIVE: the reference composition (headline left, phoenix right) holds on every screen wider than a phone */
@media(max-width:1099px){
  .hx{min-height:clamp(540px,80svh,760px)}
  .hx-scene{width:52%}
  .hx-copy{max-width:60%}
  .hx h1.trio{font-size:clamp(2.6rem,8.2vw,6rem)}
  .hx-for{max-width:32ch}
  .hx-chart{display:none}
}
@media(max-width:899px){
  .hx{min-height:clamp(480px,74svh,680px);padding:104px 0 56px}
  .hx-scene{width:50%}
  .hx-copy{max-width:54%}
  .hx h1.trio{font-size:clamp(2.4rem,7.8vw,4.8rem)}
  .hx-sub{font-size:1rem}
  .hx-for{font-size:.9rem}
  .hx-sign{font-size:.64rem;letter-spacing:.2em}
}
/* phones only: the message first, then the phoenix in its scene */
@media(max-width:599px){
  .hx{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:96px 0 32px}
  .hx-wrap{order:1}
  .hx-copy{max-width:none}
  .hx h1.trio{font-size:clamp(2.8rem,14.5vw,4.6rem)}
  .hx-sub{font-size:1.08rem}
  .hx-for{font-size:.98rem;max-width:none}
  .hx-sign{white-space:normal;font-size:.68rem;letter-spacing:.22em}
  .hx-scene{order:2;position:relative;right:auto;bottom:auto;width:100%;margin-top:16px;
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 88%,transparent);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 88%,transparent)}
}

/* BLOG: search and count read as one control; cards keep an even rhythm */
.blog-search{flex:0 1 420px}
.blog-count{padding-left:4px}
.post-card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.post-card .body > p:not(.meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-search{display:block}
.blog-search input{width:100%;box-sizing:border-box}
/* homepage pillars echo the hero: imagine (yellow), build (green), compound (blue) */
.pillars h3.pv{-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}
.pillars .pv-1{background-image:linear-gradient(90deg,#e6a700,#f2b000 60%,#f6c514)}
.pillars .pv-2{background-image:linear-gradient(90deg,#1f9d55,#13a38a 60%,#0b8ea8)}
.pillars .pv-3{background-image:linear-gradient(90deg,#11a5ff,#1d5cff 50%,#5b2cff)}

/* WORDMARK: the logo's full spectrum, in the ring's order. Red and pink only on the dot. */
.wordmark{background:none;color:inherit;-webkit-text-fill-color:currentColor}
.wordmark > span{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wordmark .wm-a{background-image:linear-gradient(90deg,#f2b000 0%,#a8c520 20%,#4cb848 40%,#22a8e0 62%,#3f62b2 82%,#6b5fae 100%)}
.wordmark .wm-dot{background-image:linear-gradient(90deg,#c2477a,#ea4239)}
.wordmark .wm-b{background-image:linear-gradient(90deg,#f39221 0%,#f7b51a 100%)}

/* MASCOT: the cow, its gold shine and the lens glint move as one. Swagger, not slapstick. */
.hx-bird{position:absolute;inset:0;translate:var(--px,0) var(--py,0);transition:translate .9s cubic-bezier(.2,.7,.1,1);transform-origin:40% 100%;
  animation:hxIn 1.4s cubic-bezier(.2,.7,.1,1) both,hxProud 6.5s ease-in-out 1.4s infinite}
/* a slow, proud breath: chest out, chin up, from the hooves */
@keyframes hxProud{0%,100%{transform:none}50%{transform:scale(1.012)}}
.hx-bird .hx-phoenix{position:absolute;inset:0;animation:none;translate:none;transition:none}
.hx-glint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* gold: a shine travels along the horns, the sunglass frames and the bell */
.hx-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:url(/assets/cow-gold-mask.png) 0 0/100% 100% no-repeat;mask:url(/assets/cow-gold-mask.png) 0 0/100% 100% no-repeat;
  background:linear-gradient(115deg,transparent 42%,rgba(255,246,214,.95) 50%,transparent 58%) 0 0/320% 100% no-repeat;
  background-position:120% 0;animation:hxGold 7s ease-in-out 3.2s infinite}
@keyframes hxGold{0%,58%{background-position:120% 0}80%,100%{background-position:-20% 0}}
/* sunglasses: a light glint sweeps across the mirrored lenses, with a twinkle on the frame */
.hx-glint{mix-blend-mode:screen}
.hx-glint .band{opacity:0;animation:hxGlint 7s ease-in-out 2.2s infinite}
.hx-glint .band.thin{animation-delay:2.28s}
@keyframes hxGlint{0%,60%{translate:20px 0;opacity:0}63%{opacity:.85}78%{translate:330px 0;opacity:.85}81%,100%{translate:330px 0;opacity:0}}
.hx-glint .star{transform-box:fill-box;transform-origin:center;opacity:0;animation:hxStar 7s ease-in-out 2.2s infinite}
@keyframes hxStar{0%,58%,80%,100%{opacity:0;transform:scale(.3)}64%{opacity:1;transform:scale(1.15) rotate(45deg)}72%{opacity:.5;transform:scale(.8) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.hx-bird,.hx-shine,.hx-glint .band,.hx-glint .star{animation:none!important;translate:none}}