/* self-hosted (no request to Google): Wix Madefor Display + Text, Brygada 1918, Caveat. latin + latin-ext covers ș ț ő ű */
@font-face{font-family:"Wix Madefor Display";font-style:normal;font-display:swap;font-weight:400 800;src:url(../fonts/wix-madefor-display-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Wix Madefor Display";font-style:normal;font-display:swap;font-weight:400 800;src:url(../fonts/wix-madefor-display-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Wix Madefor Text";font-style:normal;font-display:swap;font-weight:400 800;src:url(../fonts/wix-madefor-text-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Wix Madefor Text";font-style:normal;font-display:swap;font-weight:400 800;src:url(../fonts/wix-madefor-text-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada 1918";font-style:normal;font-display:swap;font-weight:400 700;src:url(../fonts/brygada-1918-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Brygada 1918";font-style:normal;font-display:swap;font-weight:400 700;src:url(../fonts/brygada-1918-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada 1918";font-style:italic;font-display:swap;font-weight:400 700;src:url(../fonts/brygada-1918-latin-ext-wght-italic.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Brygada 1918";font-style:italic;font-display:swap;font-weight:400 700;src:url(../fonts/brygada-1918-latin-wght-italic.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/caveat-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/caveat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --indigo:#19135C; --indigo-deep:#120D45; --purple:#3C2AA8; --magenta:#F41472;
  --bg:#F3F2F7; --paper:#FFFFFF; --ink:#15142A; --ink-2:#4D4B63; --ink-3:#7E7C95; --line:#DCDAE5; --line-2:#C7C4D4;
  --display:"Wix Madefor Display",Arial,sans-serif; --sans:"Wix Madefor Text",Arial,sans-serif; --serif:"Brygada 1918",Georgia,serif; --hand:"Caveat",cursive;
  --pad:clamp(20px,5vw,84px); --ease:cubic-bezier(.65,0,.25,1); --out:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
#page{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad);position:relative;z-index:2}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--indigo);letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(40px,4.5vw,68px)}
/* the one place the voice changes: the serif italic, matched to the grotesk's weight and x-height */
h1 em,.no p em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;letter-spacing:-.01em;color:var(--magenta)}
h2{font-size:clamp(34px,3.9vw,60px);text-wrap:balance}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:44ch}
.scrib{font-family:var(--hand);font-weight:500;color:var(--indigo);font-size:26px;line-height:1.05;position:absolute;z-index:4;pointer-events:none}
.scrib svg{margin-top:4px}
.scrib.m{color:var(--magenta)}
/* a station on the route: the dot sits in the margin beside the heading's first line and the line runs through it */
.ex-head,.ap-copy,.no,.cl-copy{position:relative}
.lbl{position:absolute;left:-30px;top:.5em;width:0;height:0;font-size:clamp(34px,3.9vw,60px)}
.lbl .node{position:absolute;left:-6.5px;top:-6.5px;margin:0}
.ap-copy .lbl{top:calc(40px + .5em)}
.wk-head .lbl{font-size:clamp(32px,3.4vw,54px)}
.no .lbl{font-size:clamp(34px,4.3vw,68px)}
.cl-copy .lbl{font-size:clamp(40px,4.8vw,76px)}

/* buttons */
.btn{display:inline-flex;align-items:center;font:500 15px/1 var(--sans);padding:17px 24px;border-radius:2px;transition:background .3s,color .3s}
.btn.pri{background:var(--magenta);color:#fff}
.btn.pri:hover{background:var(--indigo)}
.tl{font:500 15px/1 var(--sans);color:var(--indigo);padding-bottom:7px;background:linear-gradient(var(--magenta),var(--magenta)) left bottom/0 1.5px no-repeat,linear-gradient(var(--line-2),var(--line-2)) left bottom/100% 1px no-repeat;transition:background-size .45s var(--ease)}
.tl:hover{background-size:100% 1.5px,100% 1px}

/* official logo: the hi-res mark placed at its measured position on the official wordmark */
.brand{position:relative;display:block;width:168px;aspect-ratio:250/71;flex:none}
.brand img{position:absolute;display:block}
.brand .wm{inset:0;width:100%;height:100%}
.brand .mk{left:3.2%;top:8.803%;width:20.068%;height:83.451%}

/* header */
.site-head{position:absolute;top:0;left:0;right:0;z-index:20}
.site-head>.wrap{display:flex;align-items:center;height:92px;gap:40px}
.mainnav{margin-left:auto;display:flex;gap:34px;font-size:14px;color:var(--ink-2)}
.mainnav>a,.mainnav .dd-t{position:relative}
.mainnav>a::after,.mainnav .dd-t::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.mainnav>a:hover,.mainnav .dd-t:hover,.mainnav [aria-current]{color:var(--indigo)} .mainnav>a:hover::after,.mainnav .dd-t:hover::after,.mainnav [aria-current]::after{transform:scaleX(1)}
.site-head .btn{padding:13px 18px;font-size:14px;border:1px solid var(--indigo);color:var(--indigo)}
.site-head .btn:hover{background:var(--indigo);color:#fff}

/* the route */
.route{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1;overflow:visible;opacity:0;transition:opacity .8s}
.route.on{opacity:1}
.route .base{stroke:var(--line-2);stroke-width:1;fill:none;stroke-dasharray:2 6}
.route .ink{stroke:var(--magenta);stroke-width:2;fill:none;stroke-linecap:round}
.route .tip{fill:var(--magenta)}
.route .tipglow{fill:rgba(244,20,114,.18)}
.node{position:relative;display:block;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-2);z-index:3;transition:background .4s,border-color .4s,box-shadow .4s}
.node.on{border-color:var(--magenta);background:var(--magenta);box-shadow:0 0 0 6px rgba(244,20,114,.14)}
.dark .node{background:var(--indigo-deep);border-color:rgba(255,255,255,.3)}
.dark .node.on{background:var(--magenta);border-color:var(--magenta)}

/* organic masks */
.mask{position:relative;overflow:hidden}
.mask .ph{position:absolute;inset:-6%;background-size:cover;background-position:center;transform:translate3d(0,var(--py,0),0) scale(1.06);transition:clip-path 1.5s var(--ease)}
.js .mask .ph{clip-path:inset(0 0 100% 0)}
.js .mask.in .ph{clip-path:inset(0)}
.mask .ph::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-toggle{position:absolute;z-index:5;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.86);color:var(--indigo);display:grid;place-items:center;transition:background .3s}
.vid-toggle:hover{background:#fff}
.vid-toggle svg{width:12px;height:12px}
.vid-toggle .i-play{display:none}
.vid-toggle.paused .i-play{display:block}.vid-toggle.paused .i-pause{display:none}

/* reveal: headings rise line by line, the hero copy follows them in once */
.js [data-r]{opacity:0;translate:0 18px;transition:opacity .9s var(--out),translate .9s var(--out)}
.js [data-r].in{opacity:1;translate:none}
[data-r="2"]{transition-delay:.1s}[data-r="3"]{transition-delay:.2s}[data-r="4"]{transition-delay:.3s}
.ln{display:block;overflow:hidden;padding:0 .06em .1em;margin:0 -.06em -.1em}
h1 .ln{padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:block;translate:0 108%;transition:translate 1.1s var(--ease)}
.in .ln>span{translate:none}
.ln:nth-child(2)>span{transition-delay:.08s}.ln:nth-child(3)>span{transition-delay:.16s}.ln:nth-child(4)>span{transition-delay:.24s}
.js h1[data-r],.js h2[data-r]{opacity:1;translate:none}
.draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .5s}
.in .draw path,.draw.in path{stroke-dashoffset:0}
.js .scrib[data-r]{translate:0 8px}

/* ---------- HERO ---------- */
#hero{position:relative;padding-top:160px;min-height:100vh}
.hero-copy{grid-column:1/7;position:relative;z-index:3}
.hero-copy>:not(h1){max-width:520px}
.eyebrow{font-size:15px;color:var(--ink-2);margin-bottom:26px}
.hero-copy h1{margin-bottom:38px}
.hero-copy .lead{margin-bottom:36px}
.ctas{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.hq{margin-top:58px;padding-top:24px;border-top:1px solid var(--line)}
.hq blockquote{font:400 21px/1.32 var(--serif);color:var(--indigo);text-indent:-.32em}
.hq figcaption{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;font-size:14px;color:var(--ink-2)}
.hq .tl{font-size:14px}
.hero-copy>.partners{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;max-width:none}
.partners .node{margin:0 0 0 4px}
.partners img{display:block;width:auto}
.partners .ps{height:54px;margin:0 -2px}
.partners .gg{height:52px}
.partners .mc{height:30px}
.partners span{font-size:13px;line-height:1.4;color:var(--ink-2);max-width:17em}
/* the photo starts below the header so the menu stays on plain background */
#hero{--hp-top:100px;--hp-h:min(calc(92vh - 74px),800px)}
.hero-photo{position:absolute;right:0;top:var(--hp-top);width:56vw;max-width:980px;height:var(--hp-h);clip-path:url(#mHero);z-index:2}
.hero-photo .ph{background-image:url(../media/hero-office.jpg);background-position:57% 40%}
/* under the photo: who we work for, grouped by country */
.roll{position:absolute;z-index:3;top:calc(var(--hp-top) + var(--hp-h) + 44px);right:max(var(--pad),calc((100vw - 1440px)/2 + var(--pad)));width:min(31vw,460px)}
.roll-h{font-size:13px;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line)}
.roll dl>div{display:grid;grid-template-columns:8.6em 1fr;column-gap:16px;align-items:baseline;padding:10px 0 11px;border-bottom:1px solid var(--line)}
.roll dt{font-size:13px;color:var(--ink-2)}
.roll dd{font:500 18px/1.25 var(--display);letter-spacing:-.01em;color:var(--indigo)}
.roll dd span{white-space:nowrap}
/* notes sit on clear background only, never over a photo or video */
.scrib.inl{position:relative;display:inline-block;margin-top:58px;transform:rotate(-4deg);transform-origin:left center}
.why-note{grid-column:2/6;grid-row:1}
.scrib.ws{position:relative;display:inline-block;margin-top:44px;transform:rotate(-4deg)}
/* shown as the key turns in the lock, about 2.5 s into the clip, just before the door opens */
.js .scrib.wake{opacity:0;translate:0 8px;transition:opacity .8s var(--out),translate .8s var(--out)}
.js .scrib.wake.in{opacity:1;translate:none}
.scrib.ws svg{margin:0 0 8px 70px}

/* ---------- EXPERTISE ---------- */
#expertise{padding:170px 0 120px;position:relative}
.ex-head{grid-column:2/7}
.ex-side{grid-column:8/12;align-self:start;padding-top:.6em}
.ex-quote{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.ex-quote blockquote{font:400 22px/1.34 var(--serif);color:var(--indigo);text-indent:-.32em}
.ex-quote figcaption{margin-top:16px;font-size:14px;color:var(--ink-2)}
.ex-side p{color:var(--ink-2);font-size:17px;max-width:38ch}
/* the offer: a bento of service cards. Cards rise in with the scroll, lift when pointed at with a soft light
   following the pointer, and the small pieces inside (code, version path, gauge, bars) play once the card is in view */
.svc{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;grid-column:2/12;margin-top:80px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:18px}
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;padding:30px 28px 28px;display:flex;flex-direction:column;gap:12px;background:var(--paper);color:var(--ink);transition:transform .3s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(25,19,92,.34)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(244,20,114,.1),transparent 50%);opacity:0;transition:opacity .3s}
.card:hover::after{opacity:1}
.card h3{font-size:24px;line-height:1.1;letter-spacing:-.02em}
.card p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.card .tag{margin-top:auto;font-size:13px;font-weight:600;line-height:1.3;color:var(--magenta)}
.c-ico{width:44px;height:44px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--magenta);color:#fff;margin-bottom:6px}
.c-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* the coloured cards */
.card.deep,.card.mag,.card.ind,.card.berry{color:#fff}
.card.deep h3,.card.mag h3,.card.ind h3,.card.berry h3{color:#fff}
.card.deep p,.card.ind p{color:#C9C5EE}
.card.mag p,.card.berry p{color:rgba(255,255,255,.9)}
.card.mag .tag,.card.berry .tag{color:rgba(255,255,255,.85)}
.card.deep::after,.card.mag::after,.card.ind::after,.card.berry::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 50%)}
.card.deep .c-ico,.card.mag .c-ico,.card.berry .c-ico{background:rgba(255,255,255,.14)}
.card.deep{background:var(--indigo-deep);grid-column:span 2;grid-row:span 2}
.card.deep .big-t{font-size:clamp(26px,2.2vw,34px);line-height:1.08;letter-spacing:-.03em}
.card.mag{background:var(--magenta);grid-column:span 2}
.card.ind{background:var(--indigo)}
.card.berry{background:color-mix(in srgb,var(--magenta) 78%,var(--indigo-deep))}
/* custom modules: a module types itself out */
.code{margin-top:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden}
.code-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.code-bar i{width:9px;height:9px;border-radius:50%;background:var(--magenta)}
.code-bar i:nth-child(2){background:#FF8CBB}
.code-bar i:nth-child(3){background:rgba(255,255,255,.3)}
.code-bar span{margin-left:auto;font:500 12px/1 var(--mono);color:#8F8BC0}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;scrollbar-width:none;font:500 clamp(12px,.9vw,13px)/1.8 var(--mono);color:#ECEAFB}
.code pre::-webkit-scrollbar{display:none}
.code .cl{display:block;white-space:pre}
.code .k{color:#FF6FA8}.code .f{color:#fff}.code .v{color:#C9C5EE}.code .c{color:#8F8BC0}.code .s{color:#FFB8D4}
.caret{display:inline-block;width:8px;height:1.05em;background:var(--magenta);vertical-align:-3px;animation:svcBlink 1s steps(1) infinite}
.play .code .cl{animation:svcType .55s steps(28,end) backwards;animation-delay:calc(var(--d) * .32s)}
@keyframes svcBlink{50%{opacity:0}}
@keyframes svcType{from{clip-path:inset(0 100% 0 0)}}
/* upgrades: a dot keeps running the route from 1.6 to 9 */
.path{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.path::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:1.5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 4px,transparent 4px 9px)}
.path span{position:relative;z-index:1;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--magenta) 70%,var(--indigo-deep));border:1px solid rgba(255,255,255,.3);color:#fff}
.path span.on{background:#fff;color:var(--magenta);border-color:#fff}
.runner{position:absolute;z-index:0;top:50%;left:24px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.25),0 0 22px 4px rgba(255,255,255,.7);animation:svcRun 3.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes svcRun{0%{left:24px;opacity:0}10%{opacity:1}85%{opacity:1}100%{left:calc(100% - 36px);opacity:0}}
/* page speed: the gauge fills */
.gauge{width:100%;max-width:190px;height:auto;margin-top:auto;align-self:center;overflow:visible}
.gauge .t{fill:none;stroke:#ECEAF3;stroke-width:11;stroke-linecap:round}
.gauge .v{fill:none;stroke:var(--magenta);stroke-width:11;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:22}
.play .gauge .v{animation:svcGauge 1.6s cubic-bezier(.3,.9,.3,1) backwards}
@keyframes svcGauge{from{stroke-dashoffset:100}}
.gauge text{font:600 22px var(--display);letter-spacing:-.02em;fill:var(--indigo)}
.gauge .lb{font:600 8.5px var(--sans);letter-spacing:.02em;fill:var(--ink-3)}
/* security */
.checks{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:14px;font-weight:600;color:#fff}
.checks li{display:flex;align-items:center;gap:7px}
.checks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--magenta) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/100% no-repeat}
/* SEO: the bars grow */
.bars{display:flex;align-items:flex-end;gap:8px;height:84px;margin-top:auto}
.bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--magenta);transform-origin:bottom}
.play .bars i{animation:svcGrow 1s cubic-bezier(.3,1.2,.5,1) backwards;animation-delay:calc(var(--n) * 80ms)}
@keyframes svcGrow{from{transform:scaleY(0)}}
.card p.big-n{margin-top:auto;font:600 56px/1 var(--display);letter-spacing:-.045em;color:#fff}
/* until a card plays, its pieces wait at their start, so the finished state never flashes first */
@media (prefers-reduced-motion:no-preference){
  .js .svc [data-play]:not(.play) .code .cl{clip-path:inset(0 100% 0 0)}
  .js .svc [data-play]:not(.play) .gauge .v{stroke-dashoffset:100}
  .js .svc [data-play]:not(.play) .bars i{transform:scaleY(0)}
}
/* cards rise in as they scroll into view; where the browser can't tie this to the scroll they are simply there */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .svc .card{animation:svcIn linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
    @keyframes svcIn{from{opacity:0;translate:0 42px;scale:.98}}
  }
}

/* ---------- APPROACH ---------- */
#approach{padding:130px 0 150px;position:relative}
.ap-photo{grid-column:1/7;position:relative;height:720px;margin-left:calc(-1*var(--pad))}
.ap-photo .mask{position:absolute;inset:0;clip-path:url(#mSide)}
.ap-photo .ph{background-image:url(../media/approach-planning.jpg);background-position:60% 50%}
.ap-photo video{object-position:60% 50%}
.ap-photo .vid-toggle{left:calc(var(--pad) + 22px);bottom:22px}
.ap-copy{grid-column:8/13;padding-top:40px}
.ap-copy h2{margin-bottom:28px}
.steps{grid-column:2/13;margin-top:110px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative}
.steps li{list-style:none;position:relative;padding-top:38px}
.steps .node{position:absolute;left:6px;top:0;margin:0}
.steps .n{font:600 13px/1 var(--sans);color:var(--magenta);font-variant-numeric:tabular-nums}
.steps h4{font:600 24px/1.1 var(--display);color:var(--indigo);margin:10px 0 10px;letter-spacing:-.02em}
.steps p{font-size:15px;color:var(--ink-2);max-width:26ch}

/* ---------- CLIENTS: one small card per shop ---------- */
#work{padding:140px 0 130px;position:relative}
.wk-head{grid-column:1/9;position:relative;z-index:3}
.wk-head h2{font-size:clamp(32px,3.4vw,54px)}
.wk-head p{margin-top:18px;font-size:17px;color:var(--ink-2);max-width:54ch}
.wk-all{grid-column:9/13;justify-self:end;align-self:end}
.cc-grid{grid-column:1/13;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cc{display:flex;flex-direction:column;background:var(--paper);border-radius:12px;overflow:hidden}
/* the top of the store's homepage, on a strip tinted with the shop's own colour */
.cc-shot{display:block;padding:16px 16px 0;background:color-mix(in srgb,var(--tint) 20%,#fff)}
.cc-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% var(--oy,0%);border-radius:6px 6px 0 0;box-shadow:0 0 0 1px rgba(25,19,92,.08)}
.cc-body{flex:1;display:flex;flex-direction:column;padding:22px 24px 26px}
.cc h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
.cc .who,.cc .us{font-size:14px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cc .who b{font-weight:600;color:var(--ink)}
.cc .us{margin:16px 0 20px;padding-top:14px;border-top:1px solid var(--line)}
.cc .us b{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--magenta)}
.cc .tl{align-self:flex-start;margin-top:auto;font-size:14px}
/* the eighth tile is for the reader */
.cc.you{justify-content:flex-end;padding:28px 26px;background:var(--indigo);color:#C9C5EE}
.cc.you h3{font-size:28px;line-height:1.05;color:#fff}
.cc.you p{font-size:14px;line-height:1.55;margin-bottom:22px}
.cc.you .tl{margin-top:0;color:#fff;background-image:linear-gradient(var(--magenta),var(--magenta)),linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35))}

/* ---------- WHY ---------- */
#why{padding:60px 0 170px;position:relative}
.why-photo{position:relative;z-index:2;height:clamp(640px,42vw,760px);clip-path:url(#mBand)}
.why-photo .mask{position:absolute;inset:0}
.why-photo .ph{background-image:url(../media/why-home.jpg);background-position:25% 0%}
/* the clip is cut around the dog: the band keeps its top edge so his ears stay in, and the person at the door is mostly seen from the shoulders down.
   Where the band is narrower than the clip (tablets, phones) the crop leans left, towards the dog */
.why-photo video{object-position:25% 0%;transition:opacity 1.2s var(--out)}
/* when the clip ends it dissolves back to its first frame (the poster behind it): the dog waiting at the door */
.why-photo video.rest{opacity:0}
.why-photo .vid-toggle{right:22px;top:22px}
/* the copy sits on the empty side of the hallway, clear of the dog and the person at the door */
.why-copy{grid-column:8/13;grid-row:1;margin-top:-170px;background:var(--bg);padding:52px 0 0 52px;position:relative;z-index:3}
.why-copy h2{margin-bottom:26px;font-size:clamp(32px,3.2vw,50px)}
.why-copy .lead{max-width:48ch}

/* ---------- REVIEWS (dark) ---------- */
#proof{background:var(--indigo-deep);color:#D9D6F2;padding:160px 0 150px;position:relative;overflow:hidden}
.no{grid-column:1/13}
.no p{font:600 clamp(34px,4.3vw,68px)/1.04 var(--display);color:#fff;letter-spacing:-.03em}
.no p em{color:#fff}
.no p+p{margin-top:6px}
.rv-feat{grid-column:2/11;margin-top:120px}
.rv-feat blockquote{font:400 clamp(25px,2.6vw,38px)/1.25 var(--serif);color:#fff;letter-spacing:-.012em;text-indent:-.36em}
.rv-feat figcaption{margin-top:26px;font:500 15px var(--sans);color:#B9B5E4}
.rv-list{grid-column:1/13;margin-top:100px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14);list-style:none;columns:3;column-gap:56px}
.rv-list li{break-inside:avoid;margin-bottom:44px}
.rv-list blockquote{font:400 19px/1.4 var(--serif);color:#ECEAFB;text-indent:-.32em}
.rv-list span{display:block;margin-top:12px;font:500 14px var(--sans);color:#A9A5D6}

/* ---------- CLOSE ---------- */
#close{padding:180px 0 150px;position:relative}
.cl-copy{grid-column:2/8}
.cl-copy h2{font-size:clamp(40px,4.8vw,76px);margin-bottom:34px}
.cl-copy .lead{margin-bottom:40px}
.cl-small{font-size:14px;color:var(--ink-3);margin-top:20px}
/* the languages you can talk to us in, each with its flag */
.langs{margin-top:34px}
.langs>p{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.langs ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.langs li{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:2px;font:500 15px/1 var(--sans);color:var(--indigo)}
.langs svg{width:24px;height:16px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(25,19,92,.1)}
.cl-photo{grid-column:8/13;position:relative;height:470px;align-self:end}
.cl-photo .mask{position:absolute;inset:0;clip-path:url(#mSmall)}
.cl-photo .ph{background-image:url(../media/close-talk.jpg);background-position:52% 45%}


/* responsive */
@media (max-width:1100px){
  .hero-copy,.ex-head,.ex-side,.svc,.ap-photo,.ap-copy,.steps,.wk-head,.why-copy,.rv-feat,.cl-copy,.cl-photo{grid-column:1/13}
  #hero{min-height:0;display:flex;flex-direction:column}
  #hero>.wrap{width:100%}
  .hero-photo{position:relative;order:2;top:auto;width:auto;max-width:none;height:480px;margin:56px 0 0}
  .lbl,.steps .node,.partners .node{display:none}
  .steps li{padding-top:0}
  .roll{position:relative;order:3;top:auto;right:auto;width:auto;margin:44px var(--pad) 0}
  .why-note{display:none}
  .ex-side{margin-top:30px}
  .ap-photo{height:480px;margin-right:calc(-1*var(--pad))}
  .ap-copy{padding-top:50px}
  .wk-all{grid-column:1/13;justify-self:start;margin-top:24px}
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.deep{grid-row:auto}
  .why-copy{margin-top:-80px;padding:40px 0 0}
  .rv-list{columns:2}
  .cl-photo{margin-top:60px;height:440px}
  .route{display:none}
}
@media (max-width:720px){
  
  .brand{width:140px}
  .svc{grid-template-columns:minmax(0,1fr)}
  .card.deep,.card.mag{grid-column:auto}
  .path span{padding:8px;font-size:13px}
  .steps{grid-template-columns:1fr 1fr}
  .why-photo{height:380px}
  .rv-list{columns:1}
  .hero-photo{height:400px}
  .roll dl>div{grid-template-columns:7.2em 1fr}
  .cc-grid{grid-template-columns:1fr;gap:18px;margin-top:40px}
  .cc.you{min-height:220px}
  .scrib:not(.inl){display:none}
}
/* opening reveal (after v1): twelve indigo columns lift away left to right while a magenta line draws.
   Pure CSS, so the cover can never get stuck if a script fails. */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;grid-template-columns:repeat(12,1fr);animation:introGone 0s linear 1.8s both}
.intro i{background:var(--indigo-deep);border-right:1px solid rgba(255,255,255,.06);transform-origin:bottom;animation:introLift .62s var(--ease) calc(.6s + var(--i)*.045s) both}
.intro b{position:absolute;left:50%;top:50%;width:200px;height:2px;margin:-1px 0 0 -100px;background:rgba(255,255,255,.15);overflow:hidden;animation:introFade .25s linear .52s both}
.intro b::after{content:"";position:absolute;inset:0;background:var(--magenta);transform:scaleX(0);transform-origin:left;animation:introDraw .45s var(--ease) .05s both}
@keyframes introLift{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes introDraw{to{transform:scaleX(1)}}
@keyframes introFade{to{opacity:0}}
@keyframes introGone{to{visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  html{scroll-behavior:auto}
  .js [data-r]{opacity:1;translate:none;transition:none}.ln>span{translate:none;transition:none}
  .js .mask .ph{clip-path:none;transition:none}.draw path{stroke-dashoffset:0;transition:none}
  .runner{display:none}.caret{animation:none}
}


/* =====================================================================
   SITE: everything below extends the homepage mockup to the other pages
   ===================================================================== */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--indigo);color:#fff;padding:10px 14px;font-size:14px}
.skip:focus{left:8px}
img{max-width:100%}
.mute{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header: dropdown panels, language, mobile menu ---------- */
.dd{position:relative;display:flex;align-items:center;height:92px}
.dd-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.dd-t svg{width:9px;height:9px;transition:transform .3s var(--ease)}
.dd:hover .dd-t svg,.dd:focus-within .dd-t svg{transform:rotate(180deg)}
/* the panel hangs below the header bar, spans the page container, and opens on hover or keyboard focus (no JS needed) */
.mega{position:fixed;left:0;right:0;top:78px;padding-inline:var(--pad);visibility:hidden;opacity:0;translate:0 -6px;transition:opacity .25s var(--out),translate .25s var(--out),visibility 0s .25s;pointer-events:none;z-index:40}
.dd:hover .mega,.dd:focus-within .mega,.dd.open .mega{visibility:visible;opacity:1;translate:none;transition-delay:.06s,.06s,0s;pointer-events:auto}
.dd.shut .mega{visibility:hidden;opacity:0;pointer-events:none}
.mega-in{max-width:calc(1440px - 2*var(--pad));margin:0 auto;background:var(--paper);border-radius:14px;box-shadow:0 40px 80px -40px rgba(25,19,92,.4),0 0 0 1px rgba(25,19,92,.06);padding:34px 38px 30px;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px 34px}
.mega-col h3{font:600 13px/1.3 var(--sans);letter-spacing:0;color:var(--ink-3);display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mega-col h3 .node{margin:0;width:9px;height:9px;border-width:1.5px;background:var(--paper)}
.mega-col h3 a:hover{color:var(--magenta)}
.mega-col ul{list-style:none}
.mega-col li a{display:block;padding:6px 0;font-size:15px;line-height:1.35;color:var(--ink);transition:color .2s}
.mega-col li a:hover{color:var(--magenta)}
.mega-col li a small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.mega-col li.all a{color:var(--indigo);font-weight:600;margin-top:6px}
.lang{position:relative;font-size:14px}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);padding:6px 0}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:9px;height:9px}
.lang summary:hover{color:var(--indigo)}
.lang ul{position:absolute;right:-12px;top:calc(100% + 10px);list-style:none;background:var(--paper);border-radius:10px;box-shadow:0 30px 60px -30px rgba(25,19,92,.4),0 0 0 1px rgba(25,19,92,.06);padding:8px;min-width:180px;z-index:30}
.lang li a{display:flex;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:6px;color:var(--ink)}
.lang li a:hover{background:var(--bg);color:var(--magenta)}
.lang li a span{color:var(--ink-3);font-size:13px}
.lang li a[aria-current]{color:var(--magenta)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:12px;font:500 14px/1 var(--sans);color:var(--indigo);background:none;border:0;cursor:pointer;padding:10px 0}
.menu-btn i{display:block;width:20px;height:1.5px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.mnav{position:fixed;inset:0;z-index:90;background:var(--indigo-deep);color:#fff;overflow-y:auto;padding:24px var(--pad) 60px;visibility:hidden;opacity:0;transition:opacity .3s var(--out),visibility 0s .3s}
.mnav.open{visibility:visible;opacity:1;transition-delay:0s}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:28px}
.mnav-top .brand{width:140px}
.mnav-top button{background:none;border:0;color:#fff;font:500 14px var(--sans);cursor:pointer;display:flex;align-items:center;gap:10px}
.mnav-top button i{position:relative;width:18px;height:18px}
.mnav-top button i::before,.mnav-top button i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:#fff;rotate:45deg}
.mnav-top button i::after{rotate:-45deg}
.mnav nav>a,.mnav summary{display:flex;justify-content:space-between;align-items:center;font:600 28px/1.1 var(--display);letter-spacing:-.025em;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);list-style:none;cursor:pointer;color:#fff}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font:400 26px/1 var(--sans);color:var(--magenta)}
.mnav details[open] summary::after{content:"\2212"}
.mnav details ul{list-style:none;padding:4px 0 18px}
.mnav details li a{display:block;padding:7px 0;font-size:16px;color:#C9C5EE}
.mnav details li a:hover{color:#fff}
.mnav details h3{font:600 13px var(--sans);color:#8F8BC0;letter-spacing:0;margin:16px 0 4px}
.mnav .btn.pri{margin-top:34px}
.mnav .mlangs{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px;font-size:14px;color:#A9A5D6}
.mnav .mlangs a[aria-current]{color:#fff}
body.locked{overflow:hidden}

/* ---------- subpage hero ---------- */
.ph-hero{position:relative;padding:164px 0 90px}
.ph-hero .grid{align-items:start}
.ph-copy{grid-column:1/8;position:relative;z-index:3}
.ph-copy h1{font-size:clamp(38px,4.2vw,64px);margin:24px 0 28px;text-wrap:balance}
.ph-copy h1 em,.sec-head h2 em,.split h2 em,.form-aside h2 em,.cta-band h2 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;letter-spacing:-.01em;color:var(--magenta)}
.ph-copy .lead{max-width:52ch}
.ph-copy .ctas{margin-top:36px}
.ph-aside{grid-column:9/13;position:relative;z-index:3;padding-top:58px}
.ph-hero.wide .ph-copy{grid-column:1/11}
.ph-hero.has-photo{padding-bottom:110px}
.ph-photo{grid-column:8/13;position:relative;height:clamp(360px,34vw,520px);margin-right:calc(-1*var(--pad));margin-top:20px}
.ph-photo .mask{position:absolute;inset:0;clip-path:url(#mHero)}
.ph-hero .scrib.inl{margin-top:44px}
/* station breadcrumb: the route's dots; the page you're on is lit */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;font-size:13px;color:var(--ink-3);list-style:none}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"";flex:none;width:26px;height:1px;margin:0 10px;background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 6px)}
.crumbs a,.crumbs [aria-current]{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.crumbs a:hover{color:var(--magenta)}
.crumbs .node{flex:none;width:9px;height:9px;margin:0;border-width:1.5px}
.crumbs [aria-current]{color:var(--indigo)}
.crumbs [aria-current] .node{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 0 4px rgba(244,20,114,.14)}

/* ---------- section shell ---------- */
.sec{position:relative;padding:90px 0}
.sec+.sec{padding-top:30px}
.sec.alt{background:var(--paper)}
.sec.alt+.sec,.sec+.sec.alt{padding-top:90px}
.sec-head{grid-column:1/9;position:relative;margin-bottom:46px}
.sec-head h2{font-size:clamp(30px,3vw,46px)}
.sec-head p{margin-top:18px;font-size:17px;color:var(--ink-2);max-width:60ch}
.sec-head .lbl{font-size:clamp(30px,3vw,46px)}
.sec-body{grid-column:1/13;min-width:0}
.sec-head.side{grid-column:1/5}
.sec-head.side+.sec-body{grid-column:6/13}

/* ---------- prose (service copy, legal, job ads, blog posts) ---------- */
.prose{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:70ch}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.4vw,34px);line-height:1.12;margin-top:1.9em;color:var(--indigo)}
.prose h3{font:600 22px/1.25 var(--display);letter-spacing:-.02em;color:var(--indigo);margin-top:1.7em}
.prose h4,.prose h5{font:600 18px/1.3 var(--display);letter-spacing:-.01em;color:var(--indigo);margin-top:1.5em}
.prose>:first-child{margin-top:0}
.prose h2+*,.prose h3+*,.prose h4+*,.prose h5+*{margin-top:.6em}
.prose a{color:var(--indigo);text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--magenta)}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose ul li::marker{color:var(--magenta)}
.prose ol li::marker{color:var(--magenta);font-weight:600}
.prose blockquote{font:400 22px/1.4 var(--serif);color:var(--indigo);border-left:2px solid var(--magenta);padding:4px 0 4px 24px}
.prose img{display:block;border-radius:8px;height:auto;box-shadow:0 0 0 1px rgba(25,19,92,.08)}
.prose figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;color:var(--indigo)}
.prose .tbl{overflow-x:auto}
.prose code{font-size:.9em;background:var(--paper);padding:2px 6px;border-radius:4px}
.prose pre{background:var(--indigo-deep);color:#ECEAFB;padding:18px 20px;border-radius:10px;overflow-x:auto;font-size:14px}
.prose pre code{background:none;padding:0}
.prose iframe,.prose video{max-width:100%;border-radius:8px;border:0}
.prose.lg{font-size:18px}
.prose-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 64px}
.prose-cols .prose{max-width:none}

/* ---------- service rows: name · what it covers · for example ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:16px 40px;padding:36px 54px 36px 0;border-bottom:1px solid var(--line);position:relative;transition:background .3s}
.row.two{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.row:has(>a.cover):hover{background:linear-gradient(90deg,rgba(244,20,114,.045),transparent 80%)}
.row h3{font-size:clamp(23px,2.1vw,31px);line-height:1.12;letter-spacing:-.025em;transition:color .25s}
.row:has(>a.cover):hover h3{color:var(--magenta)}
.row p{font-size:17px;color:var(--ink-2);line-height:1.6}
.row .ex{font-size:15px;color:var(--ink-2)}
.row .ex b{display:block;font-size:13px;font-weight:600;color:var(--magenta);margin-bottom:4px}
.row>a.cover{position:absolute;inset:0;z-index:1}
.row .go{position:absolute;right:14px;top:42px;width:20px;height:20px;color:var(--line-2);transition:color .25s,translate .3s var(--ease)}
.row:has(>a.cover):hover .go{color:var(--magenta);translate:4px 0}
.row .subs{grid-column:2/4;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;position:relative;z-index:2}
.row .subs a{color:var(--indigo);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.row .subs a:hover{color:var(--magenta);border-color:var(--magenta)}

/* ---------- link list (hairline list of pages) ---------- */
.linklist{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0 34px;border-top:1px solid var(--line)}
.linklist li{border-bottom:1px solid var(--line)}
.linklist a{display:flex;flex-direction:column;gap:4px;padding:18px 28px 18px 0;position:relative;height:100%}
.linklist a b{font:600 18px/1.25 var(--display);letter-spacing:-.015em;color:var(--indigo);transition:color .2s}
.linklist a span{font-size:14px;color:var(--ink-2);line-height:1.5}
.linklist a::after{content:"";position:absolute;right:6px;top:25px;width:7px;height:7px;border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);rotate:45deg;transition:border-color .2s,translate .3s var(--ease)}
.linklist a:hover b{color:var(--magenta)}
.linklist a:hover::after{border-color:var(--magenta);translate:3px 0}

/* ---------- spec strip ---------- */
.spec{border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec dt{font-size:13px;color:var(--ink-3)}
.spec dd{font:500 17px/1.35 var(--display);letter-spacing:-.01em;color:var(--indigo)}
.spec dd small{font:400 13px var(--sans);color:var(--ink-3);letter-spacing:0}
.spec-cta{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.spec-cta .btn{width:100%;justify-content:center}

/* ---------- version path (upgrade pages) ---------- */
.vpath{position:relative;display:flex;justify-content:space-between;align-items:center;max-width:440px}
.vpath::before{content:"";position:absolute;left:20px;right:20px;top:50%;height:1.5px;background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px)}
.vpath span{position:relative;z-index:1;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;padding:11px 13px;border-radius:8px;background:var(--paper);border:1px solid var(--line);color:var(--ink-3)}
.vpath span.from{border-color:var(--line-2);color:var(--indigo)}
.vpath span.on{background:var(--magenta);border-color:var(--magenta);color:#fff;box-shadow:0 0 0 6px rgba(244,20,114,.12)}
.vpath-cap{margin-top:16px;font-size:14px;color:var(--ink-3)}
.ph-aside .spec{margin-top:34px}

/* ---------- steps (static, for subpages) ---------- */
.steps.static{grid-column:auto;margin-top:0}
.steps.static li{padding-top:36px}
.steps.static .node{left:0;background:var(--bg)}
.steps.static::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 6px)}
.steps.static li:first-child .node{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 0 6px rgba(244,20,114,.14)}
.steps.static p{max-width:30ch}
.steps.c3{grid-template-columns:repeat(3,1fr)}
.steps.c5{grid-template-columns:repeat(5,1fr)}
.steps.vert{grid-template-columns:1fr;gap:0}
.steps.vert::before{left:6px;right:auto;top:6px;bottom:24px;width:1px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 2px,transparent 2px 6px)}
.steps.vert li{padding:0 0 28px 40px}
.steps.vert .node{top:3px}
.steps.vert h4{margin-top:0;font-size:19px}
.steps.vert p{max-width:none}
.sec.alt .steps.static .node{background:var(--paper)}

/* ---------- checks: included / not included ---------- */
.checks2{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:30px 56px}
.checks2 h3{font-size:20px;letter-spacing:-.015em;margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.checks2 ul{list-style:none}
.checks2 li{position:relative;padding:7px 0 7px 30px;font-size:16px;color:var(--ink-2);line-height:1.5}
.checks2 li::before{content:"";position:absolute;left:0;top:10px;width:17px;height:17px;border-radius:50%;background:var(--magenta) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/100% no-repeat}
.checks2 .out li::before{background:none;border:1.5px solid var(--line-2);width:15px;height:15px;top:11px}
.checks2 .out li::after{content:"";position:absolute;left:4.5px;top:18px;width:7px;height:1.5px;background:var(--ink-3)}
.checks2 .out li{color:var(--ink-3)}
.checks2 .plain li{padding-left:22px}
.checks2 .plain li::before{width:7px;height:7px;top:16px;background:var(--magenta)}

/* ---------- packages (maintenance hours) ---------- */
.pk{border-top:1px solid var(--line)}
.pk-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,2fr) auto;gap:16px 36px;align-items:center;padding:28px 12px 28px 0;border-bottom:1px solid var(--line);transition:background .3s}
.pk-row:hover{background:linear-gradient(90deg,rgba(244,20,114,.045),transparent 80%)}
.pk-h{font:600 clamp(40px,4vw,60px)/.9 var(--display);letter-spacing:-.045em;color:var(--indigo);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-h small{font:500 16px var(--sans);letter-spacing:0;color:var(--ink-3);margin-left:6px}
.pk-row p{font-size:16px;color:var(--ink-2)}
.pk-row p b{display:block;color:var(--ink);font-weight:600;font-size:17px;margin-bottom:2px}
.pk-price{font:600 22px/1.2 var(--display);color:var(--indigo);letter-spacing:-.015em}
.pk-price small{display:block;font:400 13px var(--sans);color:var(--ink-3);letter-spacing:0}
.pk-row .flag{display:inline-block;font:600 12px var(--sans);color:var(--magenta);margin-bottom:6px}
.pk-note{margin-top:20px;font-size:14px;color:var(--ink-3)}

/* ---------- module cards ---------- */
.mods{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:20px}
.mod{position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:12px;padding:26px 26px 20px;transition:transform .3s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.sec.alt .mod{background:var(--bg)}
.mod:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(25,19,92,.34)}
.mod h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin-bottom:10px;transition:color .2s}
.mod:hover h3{color:var(--magenta)}
.mod p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.mod .meta{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line)}
.mod p+.meta{margin-top:20px}
.mod>p:last-of-type{margin-bottom:20px}
.mod .meta b{color:var(--indigo);font-weight:600;font-size:14px}
.mod a.cover{position:absolute;inset:0;border-radius:inherit}
.mod .new{position:absolute;top:22px;right:22px;font:600 12px var(--sans);color:var(--magenta)}
.mod-group+.mod-group{margin-top:70px}
.mod-group-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px 30px;margin-bottom:24px;flex-wrap:wrap}
.mod-group-h h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.025em;display:flex;align-items:center;gap:14px}
.mod-group-h h3 .node{margin:0}
.mod-group-h p{font-size:15px;color:var(--ink-2);max-width:60ch}

/* ---------- screenshot frame (tinted strip, as on the client cards) ---------- */
.shot{display:block;background:color-mix(in srgb,var(--tint,#3C2AA8) 13%,#fff);border-radius:12px;padding:22px 22px 0;overflow:hidden}
.shot img,.shot video{display:block;width:100%;height:auto;border-radius:6px 6px 0 0;box-shadow:0 0 0 1px rgba(25,19,92,.08)}
.shot.pad{padding-bottom:22px}
.shot.pad img{border-radius:6px}
.gallery{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:20px;align-items:start}
.gallery figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.video-frame{position:relative;border-radius:12px;overflow:hidden;background:var(--indigo-deep);aspect-ratio:16/9}
.video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.media-cap{font-size:14px;color:var(--ink-3);margin-top:12px}

/* ---------- FAQ ---------- */
.faq{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:24px;align-items:baseline;padding:24px 0;font:600 clamp(18px,1.6vw,22px)/1.3 var(--display);letter-spacing:-.015em;color:var(--indigo);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta)}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--magenta),var(--magenta)) center/100% 1.5px no-repeat,linear-gradient(var(--magenta),var(--magenta)) center/1.5px 100% no-repeat;transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq .a{padding:0 0 26px;max-width:72ch;font-size:17px;color:var(--ink-2);line-height:1.65}
.faq .a>*+*{margin-top:.8em}
.faq .a ul{padding-left:1.2em}

/* ---------- dark quote band ---------- */
.qband{background:var(--indigo-deep);color:#D9D6F2;padding:110px 0;position:relative;overflow:hidden;margin:40px 0}
.qband figure{grid-column:2/11}
.qband blockquote{font:400 clamp(24px,2.4vw,34px)/1.3 var(--serif);color:#fff;letter-spacing:-.012em;text-indent:-.36em}
.qband figcaption{margin-top:22px;font:500 15px var(--sans);color:#B9B5E4}
.qband .tl{color:#fff;background-image:linear-gradient(var(--magenta),var(--magenta)),linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35));margin-left:22px}

/* ---------- inline CTA band ---------- */
.cta-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:30px 56px;align-items:center;background:var(--paper);border-radius:14px;padding:46px 48px}
.sec.alt .cta-band{background:var(--bg)}
.cta-band h2{font-size:clamp(26px,2.4vw,36px)}
.cta-band p{margin-top:14px;color:var(--ink-2);font-size:17px;max-width:52ch}
.cta-band .acts{display:flex;flex-direction:column;align-items:flex-start;gap:18px;justify-self:end}
.cta-band .price{font:600 30px/1 var(--display);letter-spacing:-.03em;color:var(--indigo)}
.cta-band .price small{display:block;font:400 13px var(--sans);letter-spacing:0;color:var(--ink-3);margin-top:6px}

/* ---------- split: photo in a mask beside copy ---------- */
.split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center}
.split .sp-photo{grid-column:1/6;position:relative;height:clamp(340px,32vw,500px);margin-left:calc(-1*var(--pad))}
.split .sp-photo .mask{position:absolute;inset:0;clip-path:url(#mSide)}
.split .sp-copy{grid-column:7/13}
.split.rev .sp-photo{grid-column:8/13;order:2;margin-left:0;margin-right:calc(-1*var(--pad))}
.split.rev .sp-photo .mask{clip-path:url(#mSmall)}
.split.rev .sp-copy{grid-column:1/7}
.split h2{font-size:clamp(30px,3vw,46px);margin-bottom:24px}
.split .prose{margin-top:6px}

/* ---------- timeline (about) ---------- */
.tline{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:30px;position:relative}
.tline::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 6px)}
.tline li{position:relative;padding-top:36px}
.tline .node{position:absolute;left:0;top:0;margin:0}
.tline li:last-child .node{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 0 6px rgba(244,20,114,.14)}
.tline .y{font:600 30px/1 var(--display);letter-spacing:-.03em;color:var(--indigo);font-variant-numeric:tabular-nums}
.tline p{margin-top:10px;font-size:15px;color:var(--ink-2);max-width:30ch}

/* ---------- facts: a few plain statements in a hairline row ---------- */
.facts{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0 34px;border-top:1px solid var(--line)}
.facts>div{padding:24px 0;border-bottom:1px solid var(--line)}
.facts b{display:block;font:600 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--indigo)}
.facts span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.5}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:34px 24px}
.tm .pic{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--purple) 10%,#fff);display:grid;place-items:center}
.tm .pic img{width:100%;height:100%;object-fit:cover}
.tm .pic span{font:600 44px var(--display);letter-spacing:-.04em;color:var(--purple);opacity:.5}
.tm h3{font-size:19px;letter-spacing:-.015em;margin-top:16px}
.tm p{font-size:14px;color:var(--ink-2);margin-top:4px}

/* ---------- jobs ---------- */
.jobs{border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;gap:12px 36px;align-items:center;padding:30px 12px 30px 0;border-bottom:1px solid var(--line);transition:background .3s;position:relative}
.job:hover{background:linear-gradient(90deg,rgba(244,20,114,.045),transparent 80%)}
.job h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;transition:color .2s}
.job:hover h3{color:var(--magenta)}
.job p{font-size:15px;color:var(--ink-2)}
.job .tl{white-space:nowrap}
.job a.cover{position:absolute;inset:0}

/* ---------- blog list ---------- */
.post-feat{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:30px 56px;align-items:center;margin-bottom:70px;position:relative}
.post-feat .pic{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--purple) 10%,#fff)}
.post-feat .pic img{width:100%;height:100%;object-fit:cover;display:block}
.post-feat h2{font-size:clamp(28px,2.8vw,42px);margin:14px 0 18px}
.post-feat p{color:var(--ink-2);font-size:17px}
.post-feat .tl{margin-top:24px;display:inline-block}
.post-feat:hover h2{color:var(--magenta)}
.post-feat a.cover{position:absolute;inset:0}
.date{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.posts{border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:10px 40px;padding:28px 12px 28px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .3s;position:relative}
.post:hover{background:linear-gradient(90deg,rgba(244,20,114,.04),transparent 80%)}
.post h3{font-size:clamp(19px,1.6vw,23px);line-height:1.25;letter-spacing:-.015em;transition:color .2s}
.post:hover h3{color:var(--magenta)}
.post p{font-size:15px;color:var(--ink-2);line-height:1.55}
.post a.cover{position:absolute;inset:0}

/* ---------- article (blog post) ---------- */
.art-hero{padding:164px 0 40px}
.art-hero .ph-copy{grid-column:2/11}
.art-hero h1{font-size:clamp(34px,3.6vw,56px)}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--ink-3)}
.art-cover{grid-column:2/12;margin-top:10px}
.art-cover img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:14px}
.art-body{grid-column:3/11;padding-top:50px}
.art-end{grid-column:3/11;margin-top:80px}
.art-end h2{font-size:26px;letter-spacing:-.02em;margin-bottom:22px}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.related a{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:12px;padding:24px;transition:transform .3s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.related a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(25,19,92,.34)}
.related b{font:600 18px/1.25 var(--display);letter-spacing:-.015em;color:var(--indigo)}
.related a:hover b{color:var(--magenta)}

/* ---------- forms ---------- */
.form-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 80px;align-items:start}
.form-card{background:var(--paper);border-radius:14px;padding:40px 40px 36px;box-shadow:0 40px 80px -60px rgba(25,19,92,.4)}
.form-card h2{font-size:26px;letter-spacing:-.02em;margin-bottom:8px}
.form-card>p{font-size:15px;color:var(--ink-2);margin-bottom:26px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0;border:0}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:14px;font-weight:500;color:var(--ink)}
.field legend{margin-bottom:9px}
.field .opt{color:var(--ink-3);font-weight:400}
.field input,.field textarea,.field select{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--line-2)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;background:#fff;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(244,20,114,.12)}
.field input[type=file]{padding:10px;background:#fff}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative;cursor:pointer;font-weight:400}
.opts input{position:absolute;opacity:0;pointer-events:none;width:1px}
.opts span{display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:2px;font-size:14px;color:var(--ink-2);background:var(--bg);transition:background .2s,color .2s,border-color .2s}
.opts label:hover span{border-color:var(--line-2);color:var(--indigo)}
.opts input:checked+span{background:var(--indigo);border-color:var(--indigo);color:#fff}
.opts input:focus-visible+span{outline:2px solid var(--magenta);outline-offset:2px}
.form-foot{margin-top:24px;display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center}
.form-foot .btn{border:0;cursor:pointer}
.form-foot .btn[disabled]{opacity:.6;cursor:progress}
.form-small{font-size:13px;color:var(--ink-3);margin-top:16px}
.form-msg{margin-top:18px;font-size:15px;padding:14px 16px;border-radius:2px;display:none}
.form-msg.ok{display:block;background:#E8F6EC;color:#1D6B35}
.form-msg.err{display:block;background:#FDE8EF;color:#A30E4E}
.form-aside h2{font-size:clamp(28px,2.6vw,40px);margin-bottom:22px}
.form-aside .lead{margin-bottom:40px}
.contact-list{list-style:none;border-top:1px solid var(--line);margin-top:36px}
.contact-list li{display:grid;grid-template-columns:8em 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact-list span{font-size:13px;color:var(--ink-3)}
.contact-list a,.contact-list b{font:500 17px var(--display);color:var(--indigo);letter-spacing:-.01em}
.contact-list a:hover{color:var(--magenta)}

/* ---------- logos ---------- */
.logos{display:flex;flex-wrap:wrap;gap:30px 46px;align-items:center}
.logos img{height:46px;width:auto}

/* ---------- the shared close block on subpages ---------- */
.close-sec{padding:120px 0 130px;position:relative}
.close-sec .cl-copy h2{font-size:clamp(36px,4vw,62px);margin-bottom:28px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:70px 0 34px;font-size:14px;color:var(--ink-2);position:relative;z-index:2;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr));gap:34px 40px}
.foot-brand .brand{width:156px}
.foot-brand p{margin-top:22px;max-width:32ch;line-height:1.55}
.foot-brand ul{list-style:none;margin-top:18px}
.foot-brand li{padding:3px 0}
.foot-brand a{color:var(--indigo);font-weight:500}
.foot-brand a:hover,.foot-col a:hover{color:var(--magenta)}
.foot-col h2{font:600 13px var(--sans);letter-spacing:0;color:var(--ink-3);margin-bottom:14px}
.foot-col ul{list-style:none}
.foot-col li{padding:4px 0}
.foot-bottom{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;font-size:13px;color:var(--ink-3)}
.foot-bottom .prods{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-bottom .legal{display:flex;gap:12px;align-items:center;margin-left:auto}
.foot-bottom .legal img{height:40px;width:auto}
.foot-bottom a:hover{color:var(--magenta)}

/* ---------- responsive (subpages) ---------- */
@media (max-width:1100px){
  .mainnav{gap:22px}
  .ph-copy,.ph-aside,.ph-photo,.ph-hero.wide .ph-copy,.sec-head,.sec-head.side,.sec-head.side+.sec-body,.art-hero .ph-copy,.art-cover,.art-body,.art-end,.qband figure{grid-column:1/13}
  .ph-aside{padding-top:40px;max-width:560px}
  .ph-photo{margin:50px calc(-1*var(--pad)) 0 0}
  .row,.row.two{grid-template-columns:1fr 1fr}
  .row .ex{grid-column:2}
  .row .subs{grid-column:1/-1}
  .mods{--cols:2}
  .form-wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .team{--cols:3}
  .cta-band{grid-template-columns:1fr}
  .cta-band .acts{justify-self:start}
  .split .sp-photo,.split.rev .sp-photo{grid-column:1/13;order:0;margin:0 calc(-1*var(--pad)) 40px}
  .split .sp-copy,.split.rev .sp-copy{grid-column:1/13}
  .steps.c5{grid-template-columns:repeat(3,1fr)}
  .prose-cols{grid-template-columns:1fr}
  .facts{--cols:2}
}
@media (max-width:980px){
  .mainnav,.site-head .lang,.site-head>.wrap>.btn{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:720px){
  .ph-hero{padding:124px 0 56px}
  .art-hero{padding:124px 0 24px}
  .sec{padding:60px 0}
  .sec.alt+.sec,.sec+.sec.alt{padding-top:60px}
  .row,.row.two{grid-template-columns:1fr;padding:28px 36px 28px 0;gap:10px}
  .row .ex,.row .subs{grid-column:1}
  .row .go{top:32px;right:4px}
  .linklist{--cols:1}
  .mods{--cols:1}
  .checks2{--cols:1}
  .pk-row{grid-template-columns:auto 1fr;gap:10px 22px;padding-right:0}
  .pk-row>p{grid-column:1/-1}
  .pk-row .tl{grid-column:1/-1;justify-self:start}
  .gallery{--cols:1}
  .tline{--cols:1;gap:0}
  .tline::before{left:6px;right:auto;top:6px;bottom:10px;width:1px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 2px,transparent 2px 6px)}
  .tline li{padding:0 0 26px 36px}
  .team{--cols:2;gap:26px 16px}
  .job{grid-template-columns:1fr;padding-right:0}
  .post-feat{grid-template-columns:1fr}
  .post{grid-template-columns:1fr;gap:6px;padding-right:0}
  .related{grid-template-columns:1fr}
  .form-card{padding:28px 22px 26px}
  .fgrid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom .legal{margin-left:0}
  .cta-band{padding:32px 26px}
  .spec>div{grid-template-columns:8em 1fr}
  .steps.static::before{display:none}
  .steps.c3,.steps.c5{grid-template-columns:1fr 1fr}
  .contact-list li{grid-template-columns:1fr;gap:2px}
  .vpath span{padding:9px;font-size:14px}
  .facts{--cols:1}
  .qband{padding:80px 0}
  .qband .tl{margin:14px 0 0;display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  .mega,.mnav{transition:none}
}

/* ---------- chat launcher (tawk.to loads only when clicked, as before) ---------- */
.chat-launch{position:fixed;left:20px;bottom:20px;z-index:1000}
.chat-btn{display:none;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--magenta);color:#fff;place-items:center;box-shadow:0 14px 30px -12px rgba(244,20,114,.6);transition:background .3s,transform .3s}
.chat-btn:hover{background:var(--indigo);transform:translateY(-2px)}
.chat-ready .chat-btn{display:grid}

.card a.cover{position:absolute;inset:0;z-index:2;border-radius:inherit}
.mainnav{align-items:center;align-self:stretch}
.mainnav>a{display:flex;align-items:center;height:92px}
.mainnav>a::after,.mainnav .dd-t::after{bottom:30px}
.mainnav .dd-t::after{right:15px}
.gallery[style*="--cols:1"]{max-width:860px}
.art-body .prose h2:first-child{margin-top:0}
.t-form .ph-hero{padding-bottom:10px}
.t-form .ph-hero+.sec{padding-top:30px}


/* =====================================================================
   RICH: the homepage's moving parts, reused and extended for subpages
   ===================================================================== */

/* ---------- hero visual: a homepage-style card with a small animation ---------- */
.ph-visual{grid-column:8/13;position:relative;z-index:3;padding-top:30px}
.ph-visual .card{min-height:300px;box-shadow:0 40px 80px -40px rgba(25,19,92,.45)}
.ph-visual .card .cap{font:600 13px/1.3 var(--sans);letter-spacing:.02em;opacity:.75}
.ph-visual .card h3{font-size:clamp(22px,1.9vw,28px)}
.ph-visual .spec{margin-top:26px}
.ph-visual .spec-cta{margin-top:22px}

/* typing code (homepage) works anywhere a [data-play] wrapper turns .play */
[data-play]:not(.play) .code .cl{clip-path:inset(0 100% 0 0)}
.play .code .cl{animation:svcType .55s steps(28,end) backwards;animation-delay:calc(var(--d) * .32s)}
[data-play]:not(.play) .gauge .v{stroke-dashoffset:100}
.play .gauge .v{animation:svcGauge 1.6s cubic-bezier(.3,.9,.3,1) backwards}
[data-play]:not(.play) .bars i{transform:scaleY(0)}
.play .bars i{animation:svcGrow 1s cubic-bezier(.3,1.2,.5,1) backwards;animation-delay:calc(var(--n) * 80ms)}

/* security scan: files listed, a scan line passes, one file is caught, then cleaned */
.scan{margin-top:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 0;position:relative;overflow:hidden;font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.scan li{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:7px 16px;color:#C9C5EE}
.scan li b{font-weight:600;color:#8F8BC0}
.scan li.hit{color:#fff}
.scan li.hit b{color:var(--magenta)}
.scan::after{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:linear-gradient(180deg,transparent,rgba(244,20,114,.28),transparent);transform:translateY(-40px)}
.play .scan::after{animation:scanLine 2.6s cubic-bezier(.5,0,.5,1) .3s 2}
.scan li.hit b::after{content:attr(data-a)}
.play .scan li.hit b::after{animation:scanFix 0s 3.4s forwards}
.play .scan li.hit{animation:scanHit .4s 1.1s backwards}
@keyframes scanLine{to{transform:translateY(230px)}}
@keyframes scanHit{from{color:#C9C5EE}}
@keyframes scanFix{to{content:attr(data-b)}}

/* email sequence: three emails arrive one after the other */
.seq{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.seq li{list-style:none;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:11px 14px}
.seq li b{font:600 13px var(--sans);color:#fff;font-variant-numeric:tabular-nums}
.seq li span{font-size:14px;color:rgba(255,255,255,.92)}
.seq li:last-child{background:#fff}
.seq li:last-child b,.seq li:last-child span{color:var(--magenta)}
[data-play]:not(.play) .seq li{opacity:0;translate:0 12px}
.play .seq li{animation:seqIn .6s var(--out) backwards;animation-delay:calc(var(--n) * .55s + .2s)}
@keyframes seqIn{from{opacity:0;translate:0 12px}}

/* a padlock that closes, with an address typing in */
.lockbar{margin-top:auto;display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:12px 16px;color:var(--ink);font:500 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.lockbar svg{width:16px;height:16px;flex:none;color:#1D8A47}
.lockbar span{overflow:hidden;white-space:nowrap}
.play .lockbar span{animation:typeIn 1.4s steps(24,end) .3s backwards}
@keyframes typeIn{from{width:0}}

/* two servers and a parcel travelling between them */
.move{margin-top:auto;position:relative;display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.move .srv{width:76px;padding:10px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:grid;gap:6px}
.move .srv i{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.35)}
.move .srv i:first-child{background:var(--magenta)}
.move .srv.new i{background:#fff}
.move::before{content:"";position:absolute;left:90px;right:90px;top:50%;height:1.5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 4px,transparent 4px 9px)}
.move .pkt{position:absolute;top:50%;left:90px;width:14px;height:14px;margin-top:-7px;border-radius:4px;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.2)}
.play .move .pkt{animation:pkt 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes pkt{0%{left:90px;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:calc(100% - 104px);opacity:0}}

/* rows of a spreadsheet filling a catalogue */
.rowsfill{margin-top:auto;display:grid;gap:6px}
.rowsfill i{display:grid;grid-template-columns:28px 1fr 46px;gap:8px;height:22px}
.rowsfill i::before,.rowsfill i::after{content:"";border-radius:4px;background:rgba(255,255,255,.18)}
.rowsfill i b{border-radius:4px;background:rgba(255,255,255,.32)}
[data-play]:not(.play) .rowsfill i{opacity:0;translate:-14px 0}
.play .rowsfill i{animation:rowIn .45s var(--out) backwards;animation-delay:calc(var(--n) * .16s + .2s)}
@keyframes rowIn{from{opacity:0;translate:-14px 0}}

/* a wireframe that draws itself */
.wire{margin-top:auto;width:100%;height:auto}
.wire *{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.wire .m{stroke:var(--magenta);stroke-width:2}
.play .wire *{animation:wireDraw 1.1s var(--ease) forwards;animation-delay:calc(var(--n,0) * .12s)}
@keyframes wireDraw{to{stroke-dashoffset:0}}

/* ---------- stats: real numbers, counted up once ---------- */
.stats{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:18px}
.stat{background:var(--paper);border-radius:14px;padding:28px 26px 24px;position:relative;overflow:hidden}
.stat b{display:block;font:600 clamp(40px,4vw,62px)/.95 var(--display);letter-spacing:-.045em;color:var(--indigo);font-variant-numeric:tabular-nums}
.stat b em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta);letter-spacing:-.02em}
.stat p{margin-top:12px;font-size:15px;color:var(--ink-2);line-height:1.45}
.stat:first-child{background:var(--indigo-deep)}
.stat:first-child b{color:#fff}
.stat:first-child p{color:#C9C5EE}
.sec.alt .stat:not(:first-child){background:var(--bg)}

/* ---------- feature bento ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:18px}
.bento .card{gap:10px}
.bento .card p{font-size:15px}
.bento .card h3{font-size:21px}
.bento.n4 .card:first-child,.bento.n5 .card:first-child,.bento.n7 .card:first-child,.bento.n8 .card:first-child{grid-column:span 2}
.bento.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento .card .num{margin-top:auto;font:600 13px var(--sans);color:var(--magenta)}
.bento .card.deep .num,.bento .card.berry .num{color:rgba(255,255,255,.75)}
.sec.alt .bento .card:not(.deep):not(.berry):not(.mag):not(.ind){background:var(--bg)}

/* ---------- story: a case told in four stations ---------- */
.story{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:18px;position:relative;padding-top:34px}
.story::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 6px)}
.story::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:2px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.story.in::after{transform:scaleX(1)}
.story>li{position:relative;background:var(--paper);border-radius:14px;padding:26px 24px}
.story>li>.node{position:absolute;left:0;top:-34px;margin:0}
.story.in>li>.node{animation:nodeOn .4s forwards;animation-delay:calc(var(--i) * .4s + .2s)}
.story h3{font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.story .k{display:block;font:600 13px var(--sans);color:var(--magenta);margin-bottom:8px}
.story p,.story li li{font-size:15px;line-height:1.6;color:var(--ink-2)}
.story>li:last-child{background:var(--indigo-deep);color:#C9C5EE}
.story>li:last-child h3{color:#fff}
.story>li:last-child p,.story>li:last-child li li{color:#C9C5EE}
.story>li:last-child .k{color:#FF8CBB}
.story>li:last-child a{color:#fff}
.story .prose{font-size:15px;color:inherit;max-width:none}
.story>li:last-child .prose b{color:#fff}
@keyframes nodeOn{to{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 0 6px rgba(244,20,114,.14)}}

/* ---------- steps light up one after the other ---------- */
.steps.static::after{content:"";position:absolute;left:6px;right:0;top:6px;height:2px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.steps.static.in::after{transform:scaleX(1)}
.steps.static li .node{transition:none}
.steps.static.in li .node{animation:nodeOn .4s forwards;animation-delay:calc(var(--i) * .3s + .2s)}
.steps.static li:first-child .node{background:var(--bg);border-color:var(--line-2);box-shadow:none}
.steps.vert::after{left:6px;right:auto;top:6px;bottom:24px;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
.steps.vert.in::after{transform:scaleY(1)}
.js .steps.static[data-r]{opacity:1;translate:none}

/* ---------- highlights: bold words get a marker that sweeps in once ---------- */
.prose b,.prose strong,.hl{background:linear-gradient(transparent 60%,rgba(244,20,114,.2) 60%,rgba(244,20,114,.2) 92%,transparent 92%) left/0% 100% no-repeat;transition:background-size 1.1s var(--ease)}
.prose.in b,.prose.in strong,.hl.in{background-size:100% 100%}
.dark .prose b,.story>li:last-child .prose b{background-image:linear-gradient(transparent 60%,rgba(244,20,114,.45) 60%,rgba(244,20,114,.45) 92%,transparent 92%)}

/* ---------- price tag ---------- */
.tag-price{display:inline-flex;flex-direction:column;gap:6px;background:var(--magenta);color:#fff;border-radius:14px;padding:22px 26px;min-width:220px;transform:rotate(-1.5deg);box-shadow:0 30px 60px -30px rgba(244,20,114,.7)}
.tag-price b{font:600 40px/1 var(--display);letter-spacing:-.04em}
.tag-price span{font-size:14px;opacity:.9}
.tag-price small{font-size:13px;opacity:.8}

/* ---------- dark section variant ---------- */
.sec.dark{background:var(--indigo-deep);color:#D9D6F2;padding:110px 0}
.sec.dark+.sec{padding-top:110px}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}
.sec.dark .sec-head p,.sec.dark .prose,.sec.dark .row p,.sec.dark .steps p,.sec.dark .faq .a{color:#C9C5EE}
.sec.dark .rows,.sec.dark .row,.sec.dark .faq,.sec.dark .faq details{border-color:rgba(255,255,255,.14)}
.sec.dark .faq summary{color:#fff}
.sec.dark .steps.static .node{background:var(--indigo-deep);border-color:rgba(255,255,255,.3)}
.sec.dark .steps.static::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 2px,transparent 2px 6px)}
.sec.dark .steps .n{color:#FF8CBB}
.sec.dark .lbl .node{background:var(--indigo-deep);border-color:rgba(255,255,255,.3)}
.sec.dark .bento .card:not(.deep):not(.berry):not(.mag):not(.ind){background:rgba(255,255,255,.06);color:#fff}
.sec.dark .bento .card:not(.deep):not(.berry):not(.mag):not(.ind) h3{color:#fff}
.sec.dark .bento .card:not(.deep):not(.berry):not(.mag):not(.ind) p{color:#C9C5EE}
.sec.dark .bento .card.deep{background:var(--magenta)}

/* ---------- blog index: filters, search, cards ---------- */
.blog-tools{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-bottom:34px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:500 14px/1 var(--sans);padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chips button:hover{border-color:var(--indigo);color:var(--indigo)}
.chips button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chips button span{opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums}
.search{position:relative;min-width:min(320px,100%)}
.search input{width:100%;font:400 15px var(--sans);padding:12px 16px 12px 42px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(244,20,114,.12)}
.search svg{position:absolute;left:15px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ink-3)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:14px;overflow:hidden;transition:transform .3s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.pcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(25,19,92,.34)}
.pcard .pic{aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--tint,#3C2AA8) 14%,#fff);display:grid;place-items:center}
.pcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--out)}
.pcard:hover .pic img{transform:scale(1.04)}
.pcard .pic .ph-ico{width:46px;height:46px;color:var(--tint,#3C2AA8);opacity:.6}
.pcard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-3)}
.pcard .meta .cat{font-weight:600;color:var(--tint,var(--magenta))}
.pcard h3{font-size:19px;line-height:1.25;letter-spacing:-.015em;transition:color .2s}
.pcard:hover h3{color:var(--magenta)}
.pcard p{font-size:15px;color:var(--ink-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard a.cover{position:absolute;inset:0;z-index:2}
.pcard.feat{grid-column:span 2;flex-direction:row}
.pcard.feat .pic{aspect-ratio:auto;flex:1.25}
.pcard.feat .body{flex:1;padding:34px 34px 30px;justify-content:center}
.pcard.feat h3{font-size:clamp(24px,2.2vw,32px);line-height:1.12}
.pcard.feat p{-webkit-line-clamp:4;font-size:16px}
.pcard[hidden]{display:none}
.pempty{display:none;padding:40px 0;color:var(--ink-3)}
.pempty.on{display:block}

/* ---------- article ---------- */
.art-hero2{position:relative;padding:150px 0 40px}
.art-hero2 .grid{align-items:center}
.art-hero2 .ph-copy{grid-column:1/7}
.art-hero2 h1{font-size:clamp(34px,3.5vw,54px);margin:24px 0 24px}
.art-hero2 .art-cover{grid-column:8/13;margin:0;position:relative;height:clamp(300px,28vw,430px)}
.art-hero2 .art-cover .mask{position:absolute;inset:0;clip-path:url(#mSmall);background:color-mix(in srgb,var(--tint,#3C2AA8) 14%,#fff)}
.art-hero2 .art-cover .ph{background-size:cover;background-position:center}
.art-hero2 .art-cover.contain .ph{background-size:contain;background-repeat:no-repeat;inset:6%}
.art-chip{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--tint,var(--magenta));margin-bottom:-6px}
.art-chip i{width:8px;height:8px;border-radius:50%;background:currentColor}
.art-author{display:flex;align-items:center;gap:14px;margin-top:26px}
.art-author .av{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--indigo);color:#fff;display:grid;place-items:center;font:600 16px var(--display);flex:none}
.art-author .av img{width:100%;height:100%;object-fit:cover}
.art-author b{display:block;font:600 15px var(--sans);color:var(--ink)}
.art-author span{font-size:14px;color:var(--ink-3)}
.art-wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding-top:40px}
.toc{grid-column:1/4;align-self:start;background:var(--paper);border-radius:14px;padding:24px 24px 18px}
.toc h2{font:600 13px var(--sans);letter-spacing:0;color:var(--ink-3);margin-bottom:12px}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:10px 0;font-size:14px;line-height:1.4;color:var(--ink-2);transition:color .2s}
.toc a::before{content:counter(t,decimal-leading-zero);font:600 12px/1.6 var(--sans);color:var(--magenta);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--magenta)}
.art-wrap .art-body{grid-column:5/12;padding-top:0}
.art-wrap.no-toc .art-body{grid-column:3/11}
.art-body .prose h2{scroll-margin-top:30px;display:flex;gap:14px;align-items:baseline}
.art-body .prose h2::before{content:counter(h2,decimal-leading-zero);counter-increment:h2;font:600 14px var(--sans);color:var(--magenta);font-variant-numeric:tabular-nums;flex:none;translate:0 -4px}
.art-body .prose{counter-reset:h2}
.art-body .prose figure{margin:2em 0}
.art-body .prose figure img{width:100%}
.art-body .prose>p:first-child{font-size:20px;line-height:1.6;color:var(--ink)}
.author-box{display:grid;grid-template-columns:96px 1fr;gap:22px;background:var(--paper);border-radius:14px;padding:26px;margin-top:3em}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:none !important}
.author-box p{font-size:15px;line-height:1.6;margin:0 !important}
.author-box p+p{margin-top:.6em !important}
.rel2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* ---------- module visual: a browser frame around a real screenshot ---------- */
.browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(25,19,92,.5),0 0 0 1px rgba(25,19,92,.06);transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);transition:transform .6s var(--out)}
.browser:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.browser .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.browser .bar i:first-child{background:var(--magenta)}
.browser .bar span{margin-left:10px;font:500 12px var(--sans);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{display:block;width:100%;height:auto;max-height:380px;object-fit:cover;object-position:top}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ph-visual{grid-column:1/13;max-width:560px;padding-top:44px}
  .stats{--cols:2}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento.n3 .card:first-child{grid-column:span 2}
  .story{--n:2 !important}
  .story::before,.story::after{display:none}
  .story>li>.node{display:none}
  .story{padding-top:0}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-hero2 .ph-copy,.art-hero2 .art-cover{grid-column:1/13}
  .art-hero2 .art-cover{margin-top:34px}
  .toc{grid-column:1/13;margin-bottom:34px}
  .art-wrap .art-body,.art-wrap.no-toc .art-body{grid-column:1/13}
  .rel2{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .stats{--cols:1}
  .bento{grid-template-columns:1fr}
  .bento .card{grid-column:auto !important}
  .story{--n:1 !important}
  .pgrid{grid-template-columns:1fr}
  .pcard.feat{grid-column:auto;flex-direction:column}
  .pcard.feat .pic{aspect-ratio:16/9}
  .pcard.feat .body{padding:22px}
  .art-hero2{padding:124px 0 24px}
  .art-hero2 .art-cover{height:240px}
  .rel2{grid-template-columns:1fr}
  .author-box{grid-template-columns:1fr}
  .tag-price{transform:none}
  .browser{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .prose b,.prose strong,.hl{background-size:100% 100% !important;transition:none}
  .story::after,.steps.static::after{transform:none !important;transition:none}
  .steps.static li .node,.story>li>.node{animation:none !important}
  [data-play] .seq li,[data-play] .rowsfill i{opacity:1 !important;translate:none !important;animation:none !important}
  .play .move .pkt,.play .scan::after{animation:none}
  .wire *{stroke-dashoffset:0 !important;animation:none !important}
  .browser{transform:none}
}

/* ---------- scroll: cards and frames rise in as they enter the screen ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bento .card,.pcard,.mod,.stat,.story>li,.media .frame,.strip figure,.row,.pk-row,.job,.tm,.cc,.linklist li,.faq details{animation:riseIn linear both;animation-timeline:view();animation-range:entry 0% entry 28%}
    @keyframes riseIn{from{opacity:0;translate:0 40px}}
    .media .frame img{animation:frameZoom linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes frameZoom{from{scale:1.12}}
    .readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;background:var(--magenta);transform-origin:left;animation:readGrow linear both;animation-timeline:scroll(root)}
    @keyframes readGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
.readbar{display:none}
@supports (animation-timeline:scroll()){ .readbar{display:block} }

/* ---------- media split: copy beside a picture in a tinted frame ---------- */
.media{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 72px;align-items:center}
.media.left{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.media.left .frame{order:-1}
.media h2{font-size:clamp(28px,2.8vw,42px);margin-bottom:22px}
.media h2 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;color:var(--magenta)}
.media .frame{position:relative;border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--tint,#3C2AA8) 12%,#fff);padding:28px;aspect-ratio:var(--ar,4/3);display:grid;place-items:center}
.media .frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 30px 60px -30px rgba(25,19,92,.35)}
.media .frame.photo{padding:0}
.media .frame.photo img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.media .frame::after{content:"";position:absolute;inset:auto -30px -30px auto;width:120px;height:120px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--tint,#3C2AA8) 40%,transparent);pointer-events:none}
.media .scrib{position:relative;display:inline-block;margin-top:30px;transform:rotate(-3deg)}
.sec.alt .media .frame{background:color-mix(in srgb,var(--tint,#3C2AA8) 9%,var(--bg))}

/* ---------- strip: screenshots you can swipe through ---------- */
.strip-wrap{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,560px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 24px;scrollbar-width:thin;scrollbar-color:var(--magenta) transparent;overscroll-behavior-x:contain}
.strip figure{scroll-snap-align:start;margin:0}
.strip .shot{padding:20px;border-radius:14px}
.strip .shot img{border-radius:8px;max-height:420px;object-fit:contain;background:#fff}
.strip figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.strip-nav{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px}
.strip-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--indigo);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.strip-nav button:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.strip-nav svg{width:16px;height:16px}

/* ---------- marquee: names drift by, pause when pointed at ---------- */
.marquee{overflow:hidden;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:marq 48s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:48px;font:600 clamp(26px,2.6vw,40px)/1 var(--display);letter-spacing:-.03em;color:var(--indigo);white-space:nowrap}
.marquee span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--magenta)}
.marquee span:nth-child(3n+2){font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- module tiles: a picture for every module, even the ones without a screenshot ---------- */
.mod{padding:0;overflow:hidden}
.mod .mpic{aspect-ratio:16/9;background:color-mix(in srgb,var(--tint,#3C2AA8) 13%,#fff);display:grid;place-items:center;overflow:hidden;position:relative}
.mod .mpic img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--out)}
.mod:hover .mpic img{transform:scale(1.05)}
.mod .mpic .mt{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--tint,#3C2AA8)}
.mod .mpic .mt svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--out)}
.mod:hover .mpic .mt svg{transform:scale(1.12) rotate(-6deg)}
.mod .mpic .mt b{font:600 13px var(--sans);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.mod .mpic::after{content:"";position:absolute;right:-26px;bottom:-26px;width:96px;height:96px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--tint,#3C2AA8) 45%,transparent)}
.mod .mbody{padding:22px 24px 18px;display:flex;flex-direction:column;flex:1}
.mod .new{top:14px;right:14px;background:var(--magenta);color:#fff;padding:5px 9px;border-radius:999px;z-index:2}

/* ---------- article: sticky contents, wider figures ---------- */
@media (min-width:1101px){ .toc{position:sticky;top:28px} }
.art-body .prose figure{background:color-mix(in srgb,var(--tint,#3C2AA8) 8%,#fff);border-radius:14px;padding:18px}
.art-body .prose figure img{border-radius:8px;box-shadow:none}
.art-body .prose blockquote{font-size:26px;line-height:1.35;border:0;padding:0 0 0 0;color:var(--magenta);font-style:italic}

/* ---------- hero: pictures and notes ---------- */
.ph-hero{overflow:clip}
.ph-hero .scrib.inl{transform:rotate(-4deg);transform-origin:left center}
.ph-visual .browser{margin-top:6px}

/* ---------- section rhythm: a soft grid paper texture on alternate sections ---------- */
.sec.alt{background:var(--paper)}
.sec.tex{background-image:radial-gradient(circle,rgba(25,19,92,.08) 1px,transparent 1.2px);background-size:22px 22px}

@media (max-width:1100px){
  .media,.media.left{grid-template-columns:1fr}
  .media.left .frame{order:0}
}
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none;flex-wrap:wrap;width:auto}
  .play .code .cl,.play .gauge .v,.play .bars i,.play .scan li.hit,.play .scan li.hit b::after,.play .lockbar span{animation:none}
}
.story>li.long{grid-column:1/-1}
.story>li.long .prose{columns:2;column-gap:48px}
.story .prose,.story .prose a{overflow-wrap:anywhere}
@media (max-width:1100px){ .story>li.long .prose{columns:1} }
/* the homepage's big cards span two rows; inside a bento they size to their content */
.bento .card.deep,.bento .card.mag,.bento .card.berry,.bento .card.ind{grid-row:auto;grid-column:auto}
.bento.n4 .card:first-child,.bento.n5 .card:first-child,.bento.n7 .card:first-child,.bento.n8 .card:first-child{grid-column:span 2}
.bento .card:first-child h3{font-size:clamp(22px,2vw,28px)}
@media (max-width:1100px){ .bento.n3 .card:first-child{grid-column:span 2} }
@media (max-width:720px){ .bento .card{grid-column:auto !important} }
/* pull quote beside a long text block */
.pull{margin-top:34px;padding-top:22px;border-top:2px solid var(--magenta);font:400 clamp(20px,1.7vw,25px)/1.35 var(--serif);font-style:italic;color:var(--indigo);text-indent:-.35em;max-width:22ch}
.sec.dark .pull{color:#fff}
@media (max-width:1100px){ .pull{max-width:none} }
@media (prefers-reduced-motion:reduce){ .marquee span.dup{display:none} .marquee .track{gap:14px 48px;justify-content:center;padding:0 var(--pad)} }
.media.solo{grid-template-columns:1fr;max-width:860px;margin:0 auto}
.media.solo>div:first-child{display:none}
.media.solo .frame{order:0}
.prose.lg{font-size:19px;line-height:1.65;color:var(--ink)}

/* ===== fixes from the critique pass ===== */
.card.deep .gauge text,.card.ind .gauge text,.card.berry .gauge text,.card.mag .gauge text{fill:#fff}
.card.deep .gauge .lb,.card.ind .gauge .lb{fill:#C9C5EE}
.card.deep .gauge .t,.card.ind .gauge .t{stroke:rgba(255,255,255,.15)}
.ph-visual .card{min-height:0}
.ph-visual{min-width:0}
.story>li:last-child .prose,.story>li:last-child .prose p,.story>li:last-child .prose li{color:#D9D6F2}
.story>li:last-child .prose b,.story>li:last-child .prose strong{color:#fff}
.story>li:last-child .prose a{color:#FF8CBB;text-decoration-color:#FF8CBB}
.story code,.prose code.path{font:500 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(255,255,255,.1);color:#fff;padding:2px 7px;border-radius:5px;white-space:nowrap}
.story>li:not(:last-child) code{background:var(--bg);color:var(--indigo)}
.media .frame{aspect-ratio:auto;min-height:260px}
.media .frame img{max-height:560px}
.strip .shot{padding:14px;background:color-mix(in srgb,var(--tint,#3C2AA8) 10%,#fff)}
.strip .shot img{background:none;border-radius:8px;box-shadow:0 18px 40px -24px rgba(25,19,92,.35)}
.prose table b,.prose table strong,.prose th b{background:none}
.bento.n4 .card:last-child,.bento.n7 .card:last-child{grid-column:span 2}
.steps.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 56px}
.steps.c2::before,.steps.c2::after{display:none}
.steps.c2 li{padding:0 0 0 52px}
.steps.c2 .node{left:0;top:2px}
.steps.c2 .n{position:absolute;left:0;top:22px;font-size:12px}
.steps.c2 h4{margin-top:0}
.steps.c2 p{max-width:none;font-size:15px}
/* hub index: big numbers before each entry */
.t-hub .rows{counter-reset:hub}
.t-hub .row h3{display:flex;gap:18px;align-items:baseline}
.t-hub .row h3::before{counter-increment:hub;content:counter(hub,decimal-leading-zero);font:italic 500 .62em/1 var(--serif);color:var(--magenta);letter-spacing:0;flex:none;translate:0 -2px}
@media (max-width:720px){
  .crumbs li:not(:nth-last-child(-n+2)){display:none}
  .stats{--cols:2;gap:12px}
  .stat{padding:20px 18px}
  .stat b{font-size:38px}
  .code pre{font-size:12px}
  .steps.c2{grid-template-columns:1fr}
  .bento.n4 .card:last-child,.bento.n7 .card:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .marquee .track{flex-wrap:nowrap;justify-content:flex-start}
  .marquee span.dup{display:flex}
}


/* =====================================================================
   RICH 2: the critique pass (route, key figures, covers, new hero cards)
   ===================================================================== */

/* ---------- key figure in the margin of a text block ---------- */
.kfig{margin-top:34px;padding-top:20px;border-top:2px solid var(--magenta);max-width:24ch}
.kfig b{display:block;font:italic 500 clamp(54px,5vw,84px)/.9 var(--serif);color:var(--magenta);letter-spacing:-.03em}
.kfig span{display:block;margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sec.dark .kfig span{color:#C9C5EE}

/* ---------- the upgrade route: stations on a rail, a runner rides it as you scroll ---------- */
.sec-body{position:relative}
.route2{list-style:none;display:grid;grid-template-columns:repeat(calc(var(--n) + 1),minmax(0,1fr));gap:22px;position:relative;padding-top:46px}
.route2::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 10px)}
.sec.dark .route2::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 4px,transparent 4px 10px)}
.route2 li{position:relative}
.route2 .st{position:absolute;left:0;top:-41px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2)}
.sec.dark .route2 .st{background:var(--indigo-deep);border-color:rgba(255,255,255,.4)}
.route2 li.goal .st{width:26px;height:26px;top:-46px;background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 0 8px rgba(244,20,114,.18)}
.route2 h3{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;margin-bottom:10px}
.route2 li.goal h3{color:var(--magenta);font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,2vw,28px)}
.route2 .prose{font-size:15px;line-height:1.6}
.route2-run{position:absolute;left:0;top:calc(var(--rt,0px) + 0px);width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 6px rgba(244,20,114,.2),0 0 24px 4px rgba(244,20,114,.5);display:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-body:has(.route2) .route2-run{display:block;top:auto;bottom:auto;animation:routeRun linear both;animation-timeline:view();animation-range:entry 30% exit 30%}
    @keyframes routeRun{from{left:0}to{left:100%}}
  }
}
.sec-body:has(.route2) .route2-run{position:absolute;top:6px}

/* ---------- hero cards: retarget, stars in search, module label ---------- */
/* retargeting: one product, three moments. Frames light up in turn while a line fills along the top */
.rt{--loop:7.5s;margin-top:auto;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:22px}
.rt::before,.rt::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px}
.rt::before{right:0;background:rgba(255,255,255,.14)}
.rt::after{width:100%;background:linear-gradient(90deg,#FF8CBB,var(--magenta));transform-origin:left;transform:scaleX(1)}
.play .rt::after{animation:rtFill var(--loop) linear infinite}
@keyframes rtFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rt-f{display:flex;flex-direction:column;gap:10px;min-width:0}
.rt-ui{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;background:#fff;border-radius:12px;color:var(--ink);box-shadow:0 18px 36px -20px rgba(0,0,0,.55);min-height:178px}
.rt-img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px}
.rt-bar{display:flex;gap:3px;padding:1px 2px 3px}
.rt-bar i{width:5px;height:5px;border-radius:50%;background:#DCDAE5}
.rt-n{font:600 12px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.rt-p{font:600 12px/1 var(--sans);color:var(--ink-2)}
.rt-left{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-6deg);white-space:nowrap;padding:5px 8px;border-radius:6px;background:var(--indigo);color:#fff;font:600 12px/1 var(--sans);box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.rt-who{display:flex;align-items:center;gap:6px}
.rt-who i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--purple));flex:none}
.rt-who span{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.rt-who b{font:600 12px var(--sans);color:var(--indigo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-who small{font-size:12px;color:var(--ink-3)}
.rt-btn{margin-top:auto;display:block;text-align:center;padding:6px 4px;border-radius:6px;background:var(--magenta);color:#fff;font:600 12px/1 var(--sans)}
.rt-ok{width:40px;height:40px;border-radius:50%;margin:10px 0 4px;box-shadow:0 0 0 6px rgba(29,138,71,.14);background:#1D8A47 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/20px no-repeat}
.rt-line{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.rt-line .rt-img{width:38px;flex:none}
.rt-line span{font:600 12px var(--sans);color:var(--ink-2)}
.rt-f p{display:flex;align-items:flex-start;gap:7px;font:600 12px/1.3 var(--sans);color:#fff}
.rt-f p em{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--magenta);font:700 11px/1 var(--sans);font-style:normal;color:#fff}
/* the story plays once the card is in view: each frame takes its turn */
@media (prefers-reduced-motion:no-preference){
  .play .rt-ui,.play .rt-f p{animation:rtTurn var(--loop) var(--out) infinite;animation-delay:calc(var(--i) * var(--loop) / 3 - var(--loop))}
  .play .rt-left{animation:rtStamp var(--loop) cubic-bezier(.3,1.6,.5,1) infinite}
  .play .rt-btn{animation:rtPress var(--loop) ease-in-out infinite}
  .play .rt-ok{animation:rtPop var(--loop) cubic-bezier(.3,1.6,.5,1) infinite}
}
@keyframes rtTurn{0%{opacity:1;transform:none}30%{opacity:1;transform:none}36%,94%{opacity:.55;transform:translateY(5px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes rtStamp{0%,10%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.6)}16%,30%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}36%,100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
@keyframes rtPress{0%,48%{transform:none;box-shadow:none}54%{transform:scale(.94);box-shadow:0 0 0 5px rgba(244,20,114,.3)}60%,100%{transform:none;box-shadow:none}}
@keyframes rtPop{0%,60%{transform:scale(1)}64%,68%{transform:scale(0)}76%,100%{transform:scale(1)}}
@media (max-width:480px){ .rt{gap:8px} .rt-ui{padding:6px 6px 8px;min-height:150px} .rt-shop .rt-n,.rt-shop .rt-p{display:none} .rt-left{white-space:normal;width:88%;text-align:center;line-height:1.2;padding:5px 4px} .rt-ok{width:32px;height:32px;margin-top:6px} }
.serp{margin-top:auto;background:#fff;border-radius:10px;padding:16px 18px;display:grid;gap:8px;box-shadow:0 0 0 1px rgba(25,19,92,.08)}
.serp i{display:block;height:9px;border-radius:4px;background:#E6E4EF}
.serp i.u{width:40%;background:#C6E7D1}
.serp i.t{width:85%;height:13px;background:#C9C5EE}
.serp i.d{width:95%}.serp i.s{width:70%}
.serp .st{display:flex;align-items:center;gap:3px}
.serp .st svg{width:16px;height:16px}
.serp .st path{fill:#F2A900;stroke:#F2A900;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.play .serp .st path{animation:starDraw .5s var(--out) forwards}
.play .serp .st svg:nth-child(2) path{animation-delay:.15s}.play .serp .st svg:nth-child(3) path{animation-delay:.3s}.play .serp .st svg:nth-child(4) path{animation-delay:.45s}.play .serp .st svg:nth-child(5) path{animation-delay:.6s}
@keyframes starDraw{to{stroke-dashoffset:0;fill-opacity:1}}
.serp .st span{margin-left:8px;font:600 13px var(--sans);color:var(--ink-2)}
.mlabel{margin-top:auto;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.mlabel b{display:block;font:600 clamp(30px,3vw,44px)/1.02 var(--display);letter-spacing:-.035em;color:#fff}
.mlabel b em{font-family:var(--serif);font-style:italic;font-weight:500;color:#FF8CBB}
.mlabel span{display:block;margin-top:12px;font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#8F8BC0}
.ph-visual .card h3+.code,.ph-visual .card h3+.path{margin-top:14px}

/* ---------- module covers: one product line ---------- */
.mod .mpic .mcover{position:absolute;inset:0;padding:20px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:linear-gradient(150deg,var(--tint) 0%,color-mix(in srgb,var(--tint) 70%,#000) 100%);color:#fff;text-align:left}
.mod .mpic .mcover b{font:600 clamp(19px,1.6vw,24px)/1.05 var(--display);letter-spacing:-.03em;max-width:90%}
.mod .mpic .mcover b em{font-family:var(--serif);font-style:italic;font-weight:500;color:#FFC2DA}
.mod .mpic .mcover small{font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.mod .mpic .mc-ico{position:absolute;top:18px;right:18px;width:42px;height:42px;opacity:.85}
.mod .mpic .mc-ico svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--out)}
.mod:hover .mpic .mc-ico svg{transform:rotate(-8deg) scale(1.1)}
.mod .mpic:has(.mcover)::after{border-color:rgba(255,255,255,.3)}

/* ---------- tiles (hubs with pictures) ---------- */
.tiles .pcard .pic img{object-fit:cover}

/* ---------- reading bar element ---------- */
.readbar{pointer-events:none}

/* ---------- article devices ---------- */
.art-body .prose>p:first-child::first-letter{float:left;font:500 4.6em/.82 var(--serif);font-style:italic;color:var(--magenta);margin:.06em .12em 0 0}
.art-body .prose figure{background:none;padding:0}
.art-body .prose figure img{border-radius:12px;box-shadow:0 30px 60px -36px rgba(25,19,92,.45);max-height:620px;width:auto;max-width:100%;margin:0 auto}
@media (min-width:1101px){ .art-body .prose figure{margin-left:-6%;margin-right:-6%} }
.art-body .prose .apull{margin:2em 0;padding:26px 0;border-top:2px solid var(--magenta);border-bottom:1px solid var(--line);font:italic 400 clamp(24px,2.2vw,30px)/1.3 var(--serif);color:var(--indigo)}
.inshort{background:var(--indigo-deep);color:#D9D6F2;border-radius:14px;padding:26px 28px;margin:0 0 2.4em}
.inshort h2{font:600 13px var(--sans) !important;letter-spacing:.04em !important;text-transform:uppercase;color:#FF8CBB !important;margin:0 0 12px !important;display:block !important}
.inshort h2::before{display:none !important}
.inshort ul{padding-left:1.1em;margin:0}
.inshort li{color:#fff;font-size:16px}
.inshort li::marker{color:var(--magenta)}

/* ---------- blog index: lead, seconds, year archive ---------- */
.blog-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;margin-bottom:46px}
.blog-lead .pcard.feat{grid-column:auto;flex-direction:column}
.blog-lead .pcard.feat .pic{aspect-ratio:16/9;flex:none}
.blog-lead .pcard.feat .body{padding:26px 28px}
.blog-lead .seconds{display:grid;gap:22px}
.blog-lead .seconds .pcard{flex-direction:row}
.blog-lead .seconds .pcard .pic{aspect-ratio:auto;width:42%;flex:none}
.pgrid .pcard .pic .tcover,.blog-lead .pcard .pic .tcover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(150deg,var(--tint) 0%,color-mix(in srgb,var(--tint) 65%,#000) 100%);color:#fff}
.pcard .pic{position:relative}
.tcover b{font:italic 500 clamp(22px,2vw,30px)/1.05 var(--serif);max-width:85%}
.tcover small{font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.tcover svg{position:absolute;top:18px;right:18px;width:38px;height:38px;fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.archive{margin-top:70px}
.archive h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:22px}
.arch-year{display:grid;grid-template-columns:120px 1fr;gap:20px;border-top:1px solid var(--line);padding:22px 0}
.arch-year>b{font:italic 500 40px/1 var(--serif);color:var(--magenta)}
.arch-year ul{list-style:none;columns:2;column-gap:40px}
.arch-year li{break-inside:avoid;padding:6px 0}
.arch-year a{font-size:16px;color:var(--ink);transition:color .2s}
.arch-year a:hover{color:var(--magenta)}
.arch-year li[hidden]{display:none}

@media (max-width:1100px){
  .route2{grid-template-columns:1fr 1fr;padding-top:0}
  .route2::before,.route2 .st,.route2-run{display:none !important}
  .route2 li{background:var(--paper);border-radius:12px;padding:20px}
  .sec.dark .route2 li{background:rgba(255,255,255,.06)}
  .kfig{max-width:none}
  .blog-lead{grid-template-columns:1fr}
}
@media (max-width:720px){
  .route2{grid-template-columns:1fr}
  .blog-lead .seconds .pcard{flex-direction:column}
  .blog-lead .seconds .pcard .pic{width:auto;aspect-ratio:16/9}
  .arch-year{grid-template-columns:1fr}
  .arch-year ul{columns:1}
}
.arch-year[hidden],.blog-lead[hidden],.pgrid[hidden],.archive[hidden]{display:none}
/* inline column counts must give way on smaller screens */
@media (max-width:1100px){ .mods,.team{--cols:2 !important} .linklist,.facts{--cols:2 !important} .stats{--cols:2 !important} }
@media (max-width:720px){ .mods,.linklist,.facts,.gallery,.checks2{--cols:1 !important} .team{--cols:2 !important} .stats{--cols:2 !important} }
/* package hours as blocks that fill in */
.pk-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.hblocks{display:flex;flex-wrap:wrap;gap:3px;width:100%;margin-top:12px;max-width:150px}
.hblocks i{width:9px;height:9px;border-radius:2px;background:var(--magenta)}
@supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .hblocks i{animation:hbIn linear both;animation-timeline:view();animation-range:entry calc(20% + var(--i) * 2%) entry calc(40% + var(--i) * 2%)} @keyframes hbIn{from{opacity:.15;transform:scale(.4)}} } }

/* ---------- module hero: buying info under the title, a real visual on the right ---------- */
.t-module .ph-hero{padding-bottom:50px}
.t-module .ph-hero .grid{align-items:center}
.ph-below .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-top:30px;max-width:580px;border-top:0}
.ph-below .spec>div{grid-template-columns:1fr;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.ph-below .spec dt{font-size:12px}
.ph-below .spec-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.ph-below .spec-cta .btn{width:auto}
.t-module .ph-visual .card{min-height:340px;justify-content:space-between}
.t-module .ph-visual .browser img{max-height:440px}
.ml-ico{display:block;width:62px;height:62px;color:#FF8CBB}
.ml-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ml-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ml-chips span{font:600 13px var(--sans);color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px}
.t-module .ph-hero+.sec{padding-top:60px}
@media (max-width:720px){ .ph-below .spec{grid-template-columns:1fr} .t-module .ph-visual .card{min-height:0} }

/* margin note under the hero card: the arrow curls up into the card */
.ph-visual .scrib.pointing{position:relative;display:flex;align-items:flex-start;gap:8px;margin:10px 0 0 26px;transform:rotate(-3deg);transform-origin:left top;font-size:25px;line-height:1.05;color:var(--indigo)}
.ph-visual .scrib.pointing svg{flex:none;margin-top:-8px}
.ph-visual .scrib.pointing span{padding-top:22px}
.ph-visual .scrib.pointing+.spec,.ph-visual .scrib.pointing+.spec-cta{margin-top:18px}

/* hero copy sits level with its picture */
.ph-hero:has(.ph-visual) .grid{align-items:center}
.ph-hero:has(.ph-visual) .ph-visual{padding-top:0}

/* =====================================================================
   QUIETER CARDS: colour as an accent, not a fill. The one dark card per grid stays as the anchor.
   ===================================================================== */
.card.mag{background:color-mix(in srgb,var(--magenta) 8%,#fff);color:var(--ink)}
.card.berry{background:color-mix(in srgb,var(--magenta) 5%,color-mix(in srgb,var(--purple) 6%,#fff));color:var(--ink)}
.card.ind{background:color-mix(in srgb,var(--purple) 8%,#fff);color:var(--ink)}
.card.mag h3,.card.berry h3,.card.ind h3{color:var(--indigo)}
.card.mag p,.card.berry p,.card.ind p{color:var(--ink-2)}
.card.mag .tag,.card.berry .tag{color:var(--magenta)}
.card.mag .c-ico,.card.berry .c-ico,.card.ind .c-ico{background:var(--magenta);color:#fff}
.card.mag::after,.card.berry::after,.card.ind::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(244,20,114,.08),transparent 50%)}
.card.mag .cap,.card.berry .cap,.card.ind .cap{color:var(--ink-3);opacity:1}
.card p.big-n{color:var(--magenta)}
.card.deep p.big-n{color:#fff}
/* the version path on a light card */
.card.mag .path::before{background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px)}
.card.mag .path span{background:#fff;border-color:var(--line);color:var(--ink-2)}
.card.mag .path span.on{background:var(--magenta);border-color:var(--magenta);color:#fff}
.card.mag .runner{background:var(--magenta);box-shadow:0 0 0 5px rgba(244,20,114,.18),0 0 18px 3px rgba(244,20,114,.35)}
/* checks, email sequences, rows and the padlock on light cards */
.card.ind .checks li,.card.mag .checks li,.card.berry .checks li{color:var(--indigo)}
.card.mag .seq li,.card.berry .seq li,.card.ind .seq li{background:#fff;border-color:var(--line)}
.card.mag .seq li b,.card.berry .seq li b,.card.ind .seq li b{color:var(--indigo)}
.card.mag .seq li span,.card.berry .seq li span,.card.ind .seq li span{color:var(--ink-2)}
.card.mag .seq li:last-child,.card.berry .seq li:last-child{background:var(--magenta);border-color:var(--magenta)}
.card.mag .seq li:last-child b,.card.mag .seq li:last-child span,.card.berry .seq li:last-child b,.card.berry .seq li:last-child span{color:#fff}
.card.berry .rowsfill i::before,.card.berry .rowsfill i::after,.card.mag .rowsfill i::before,.card.mag .rowsfill i::after{background:color-mix(in srgb,var(--purple) 14%,#fff)}
.card.berry .rowsfill i b,.card.mag .rowsfill i b{background:color-mix(in srgb,var(--magenta) 30%,#fff)}
.card.ind .scan{background:var(--indigo-deep);border-color:transparent}
.card.ind .lockbar{box-shadow:0 0 0 1px var(--line)}
.card.ind .move .srv,.card.mag .move .srv{background:#fff;border-color:var(--line)}
/* inside a dark band: translucent panels, a thin magenta line on the first */
.sec.dark .bento .card,.sec.dark .bento .card.deep,.sec.dark .bento .card.mag,.sec.dark .bento .card.berry,.sec.dark .bento .card.ind{background:rgba(255,255,255,.055);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sec.dark .bento .card:first-child{background:rgba(255,255,255,.09);box-shadow:inset 0 3px 0 var(--magenta),inset 0 0 0 1px rgba(255,255,255,.1)}
.sec.dark .bento .card h3{color:#fff}
.sec.dark .bento .card p,.sec.dark .bento .card .prose,.sec.dark .bento .card li{color:#C9C5EE}
.sec.dark .bento .card .c-ico{background:var(--magenta)}
.sec.dark .bento .card::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 50%)}
.sec.dark .bento .card .prose a,.sec.dark .bento .card a.tl{color:#FF8CBB}
/* the stats row: the first stat keeps the dark anchor, the rest stay white */

/* ===== COMMITMENT LADDER: module buy block, catalogue shelves, filter, ratings ===== */
/* stars: one gradient clipped to five star shapes, filled to the rating */
.stars{--r:5;display:inline-block;width:70px;height:13px;flex:none;background:linear-gradient(90deg,#F2A900 calc(var(--r) / 5 * 100%),var(--line-2) 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M7 .5l1.9 4 4.4.5-3.3 3 .9 4.4L7 10.2l-3.9 2.2.9-4.4-3.3-3 4.4-.5z'/%3E%3C/svg%3E") 0 0/14px 13px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M7 .5l1.9 4 4.4.5-3.3 3 .9 4.4L7 10.2l-3.9 2.2.9-4.4-3.3-3 4.4-.5z'/%3E%3C/svg%3E") 0 0/14px 13px repeat-x}
.spec dd small{display:block;margin-top:4px}
.mproof{margin-top:16px;font-size:14px}
.mproof a{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .2s,color .2s}
.mproof a:hover{color:var(--indigo);border-color:var(--magenta)}
.mproof b{color:var(--indigo);font-weight:600}
.mod .meta{align-items:center}
.mod .meta .mr{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--ink-2)}
.mod .meta .stars{width:55px;height:10px;-webkit-mask-size:11px 10px;mask-size:11px 10px}
/* catalogue hero: the shelves are the first screen's visual */
.t-module-hub .ph-copy{grid-column:1/7}
.t-module-hub .ph-aside{grid-column:8/13;padding-top:0;align-self:center}
.shelves{display:grid;gap:10px}
.shelves-cap{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-bottom:4px}
.shelf{display:grid;grid-template-columns:3.2ch 1fr auto;gap:16px;align-items:center;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .2s,transform .3s var(--out),box-shadow .3s}
.shelf:hover{border-color:var(--magenta);transform:translateX(4px);box-shadow:0 14px 30px -18px rgba(25,19,92,.35)}
.shelf .n{font:600 clamp(28px,2.6vw,38px)/1 var(--display);color:var(--magenta);letter-spacing:-.03em}
.shelf b{display:block;font:600 17px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.shelf small{display:block;font-size:13px;line-height:1.45;color:var(--ink-3);margin-top:3px}
.shelf .go{color:var(--indigo);font-size:20px;transition:transform .3s var(--out)}
.shelf:hover .go{transform:translateX(3px);color:var(--magenta)}
/* filter: sticks to the top while the catalogue scrolls */
.mod-filter{position:sticky;top:0;z-index:6;display:flex;gap:8px;padding:14px 0;margin:-14px 0 22px;background:var(--bg)}
.sec.alt .mod-filter{background:var(--paper)}
.mod-filter button{font:500 14px/1 var(--sans);padding:10px 15px;border:1px solid var(--line-2);border-radius:2px;background:transparent;color:var(--indigo);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.mod-filter button:hover{border-color:var(--indigo)}
.mod-filter button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.mod-filter small{font-size:12px;opacity:.6;margin-left:3px}
.mod-group[hidden]{display:none}
/* the last card: where browsing ends, the custom route begins */
.mods-end{margin-top:26px}
.mod.mod-none{background:transparent !important;border:1.5px dashed var(--line-2);box-shadow:none}
.mod.mod-none .mbody{padding:28px 26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;height:100%;justify-content:center}
.mod.mod-none h3{font-size:22px;margin:0}
.mod.mod-none:hover{transform:none}
@media (max-width:900px){ .t-module-hub .ph-copy,.t-module-hub .ph-aside{grid-column:1/13} .t-module-hub .ph-aside{padding-top:34px;max-width:620px} }
@media (max-width:720px){ .mod-filter{overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad)} .shelf{padding:14px 16px;gap:12px} }

/* "Term — explanation" paragraphs beside a picture: a short definition list */
.media .prose p.term{position:relative;padding:14px 0 14px 22px;margin:0;border-top:1px solid var(--line)}
.media .prose p.term:last-child{border-bottom:1px solid var(--line)}
.media .prose p.term::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.media .prose p.term b{display:block;background:none;margin-bottom:3px;font:600 18px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.media .prose p.term+p:not(.term){margin-top:18px}

/* phones: a group of six or more cards becomes one swipeable row (the next card peeks in), not a tower of cards */
@media (max-width:720px){
  .bento.n6,.bento.n7,.bento.n8,.bento.n9{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 18px;scroll-padding-inline:var(--pad)}
  .bento.n6::-webkit-scrollbar,.bento.n7::-webkit-scrollbar,.bento.n8::-webkit-scrollbar,.bento.n9::-webkit-scrollbar{display:none}
  .bento.n6>.card,.bento.n7>.card,.bento.n8>.card,.bento.n9>.card{flex:0 0 84%;scroll-snap-align:start;grid-column:auto!important;grid-row:auto!important}
}

/* ===== variety: forms other than cards ===== */
/* tabs: choose one option, read about it on the right */
.tabs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:stretch}
.tabs-list{display:flex;flex-direction:column;gap:4px}
.tabs-list button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font:600 17px/1.25 var(--display);letter-spacing:-.01em;cursor:pointer;transition:background .25s,color .25s}
.tabs-list button:hover{background:color-mix(in srgb,var(--paper) 60%,transparent);color:var(--indigo)}
.tabs-list button[aria-selected="true"]{background:var(--paper);color:var(--indigo);box-shadow:0 14px 30px -22px rgba(25,19,92,.45)}
.tabs-list button:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.tb-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--magenta) 12%,transparent);color:var(--magenta);transition:background .25s,color .25s}
.tabs-list button[aria-selected="true"] .tb-ico{background:var(--magenta);color:#fff}
.tb-ico svg,.tp-ico svg,.in-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs-panels{position:relative;display:grid}
.tabs-panel{grid-area:1/1;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;min-height:360px;padding:clamp(28px,3.4vw,48px);border-radius:22px;background:linear-gradient(140deg,#1E1650 0%,#3C2AA8 62%,#8E1468 100%);color:#D9D6F2}
.tabs-panel[hidden]{display:none}
.tabs-panel:not([hidden]){animation:tabIn .55s var(--out)}
@keyframes tabIn{from{opacity:0;transform:translateY(10px)}}
.tabs-panel::before{content:"";position:absolute;z-index:-1;width:65%;aspect-ratio:1;border-radius:50%;right:-15%;top:-35%;background:radial-gradient(circle,rgba(255,140,187,.35),rgba(255,140,187,0) 66%);animation:subGlow 16s ease-in-out infinite alternate}
.tp-ico{position:absolute;top:clamp(28px,3.4vw,48px);left:clamp(28px,3.4vw,48px);width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.tp-ico svg{width:26px;height:26px}
.tp-n{position:absolute;top:clamp(32px,3.6vw,52px);right:clamp(28px,3.4vw,48px);font:600 13px/1 var(--sans);letter-spacing:.08em;color:rgba(255,255,255,.6)}
.tabs-panel h3{font:600 clamp(26px,2.6vw,38px)/1.08 var(--display);color:#fff;letter-spacing:-.025em}
.tabs-panel p{font-size:17px;line-height:1.6;max-width:56ch}
@keyframes subGlow{to{transform:translate(18%,14%) scale(1.12)}}
@media (max-width:900px){
  .tabs{grid-template-columns:minmax(0,1fr)}
  .tabs-list{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:2px var(--pad)}
  .tabs-list::-webkit-scrollbar{display:none}
  .tabs-list button{flex:none;width:auto;white-space:nowrap;padding:10px 14px;font-size:15px}
  .tb-ico{width:28px;height:28px}
  .tabs-panel{min-height:0;justify-content:flex-start;padding:24px}
  .tp-ico{position:static;width:46px;height:46px;margin-bottom:4px}
  .tp-n{top:30px;right:24px}
}
/* included: a spec sheet of what you get */
.incl{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}
.incl li{display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.incl .in-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--magenta) 12%,transparent);color:var(--magenta)}
.incl h3{font:600 19px/1.25 var(--display);color:var(--indigo);letter-spacing:-.015em;margin-bottom:5px}
.incl p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.sec.dark .incl li{border-top-color:rgba(255,255,255,.14)}
.sec.dark .incl .in-ico{background:var(--magenta);color:#fff}
.sec.dark .incl h3{color:#fff}
.sec.dark .incl p{color:#C9C5EE}
@media (max-width:720px){ .incl{grid-template-columns:minmax(0,1fr)} .incl li{padding:18px 0} }
/* trio: three open columns with large numbers */
.trio{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trio li{padding:6px clamp(20px,2.6vw,40px) 6px;border-left:1px solid var(--line-2)}
.trio li:first-child{padding-left:0;border-left:0}
.tr-n{display:block;font:500 clamp(52px,5vw,76px)/1 var(--serif);font-style:italic;color:var(--magenta);margin-bottom:18px}
.trio h3{font:600 22px/1.2 var(--display);color:var(--indigo);letter-spacing:-.02em;margin-bottom:10px}
.trio p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:32ch}
@media (max-width:720px){ .trio{grid-template-columns:minmax(0,1fr);gap:28px} .trio li{padding:0 0 0 20px;border-left:2px solid var(--magenta)} .trio li:first-child{padding-left:20px;border-left:2px solid var(--magenta)} .tr-n{font-size:44px;margin-bottom:8px} }

/* ===== tab panels with a living picture ===== */
.tabs-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(20px,3vw,44px);background:none;min-height:420px}
.tabs-panel::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(140deg,#1E1650 0%,#3C2AA8 62%,#8E1468 100%);filter:hue-rotate(var(--h,0deg))}
.tp-copy{display:flex;flex-direction:column;gap:14px;align-self:end}
.tabs-panel .tp-n{position:static;font:600 13px/1 var(--sans);letter-spacing:.08em;color:rgba(255,255,255,.55)}
.tp-n b{font:500 30px/1 var(--serif);font-style:italic;letter-spacing:0;color:#FFC6DD;margin-right:2px}
.tp-vis{position:relative;justify-self:center;width:100%;max-width:280px;height:320px;display:grid;place-items:center}
/* the mini ad: a crisp little phone-feed post */
.ap{position:relative;z-index:2;width:214px;display:flex;flex-direction:column;gap:9px;padding:11px;background:#fff;border-radius:16px;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 36px 70px -28px rgba(8,4,40,.7),0 0 0 1px rgba(25,19,92,.06);animation:apIn .7s var(--out) both,apFloat 6s ease-in-out .7s infinite}
.ap-sm{width:178px}
@keyframes apIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes apFloat{50%{transform:translateY(-7px)}}
.ap-head{display:flex;align-items:center;gap:8px}
.ap-head i{width:24px;height:24px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--magenta),var(--purple));box-shadow:0 0 0 2px #fff,0 0 0 3px #F1EEFB}
.ap-head span{display:flex;flex-direction:column;line-height:1.15}
.ap-head b{font:600 12px var(--sans);color:var(--indigo)}
.ap-head small{font-size:12px;color:var(--ink-3)}
.ap-img{display:block;width:100%;aspect-ratio:1.04;object-fit:cover;object-position:50% 40%;border-radius:10px}
.ap-btn{display:block;text-align:center;padding:9px 6px;border-radius:8px;background:var(--magenta);color:#fff;font:600 12px/1 var(--sans);animation:apPress 3.2s ease-in-out 1.4s infinite}
.ap-btn.sm{padding:8px 11px;flex:none}
.ap-btn.ghost{background:#F1EEFB;color:var(--indigo)}
@keyframes apPress{0%,70%,100%{transform:none;box-shadow:none}78%{transform:scale(.95);box-shadow:0 0 0 5px rgba(244,20,114,.25)}}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ap-row span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ap-row b{font:600 12px var(--display);color:var(--indigo)}
.ap-row small{font-size:12px;color:var(--ink-2)}
/* floating chips with numbers */
.ap-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:#fff;color:var(--indigo);font:600 12px/1 var(--sans);white-space:nowrap;box-shadow:0 18px 34px -14px rgba(8,4,40,.55),0 0 0 1px rgba(25,19,92,.06);animation:apChip .6s cubic-bezier(.3,1.5,.5,1) .9s both}
.ap-chip em{font-style:normal;color:var(--magenta);font-variant-numeric:tabular-nums}
.ap-stage{position:relative;display:inline-block}
.ap-c1{left:-26px;bottom:-16px}
.ap-c2{right:-26px;top:-16px}
@keyframes apChip{from{opacity:0;transform:scale(.6) translateY(8px)}}
.ap-dot{width:8px;height:8px;border-radius:50%;background:#1D8A47;animation:apDot 1.8s ease-out infinite}
@keyframes apDot{0%{box-shadow:0 0 0 0 rgba(29,138,71,.5)}70%,100%{box-shadow:0 0 0 7px rgba(29,138,71,0)}}
/* engagement */
.ap-post{font-size:13px;line-height:1.45;color:var(--ink-2)}
.ap-post b{color:var(--indigo)}
.ap-react{display:flex;justify-content:space-between;align-items:center;padding-top:9px;border-top:1px solid var(--line);font:500 12px var(--sans);color:var(--ink-3)}
.ap-react em{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ap-likes{display:inline-flex;align-items:center;gap:6px}
.ap-likes i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--magenta);color:#fff;font-size:11px;font-style:normal;animation:apHeart 1.6s ease-in-out infinite}
@keyframes apHeart{15%{transform:scale(1.25)}30%{transform:none}}
.ap-float-h{position:absolute;z-index:3;right:-6px;bottom:40px;color:#FF8CBB;font-size:22px;text-shadow:0 4px 12px rgba(244,20,114,.5);opacity:0;animation:apUp 2.4s ease-out infinite}
.ap-float-h:nth-of-type(2){right:-22px;animation-delay:.8s;font-size:16px}
.ap-float-h:nth-of-type(3){right:12px;animation-delay:1.6s;font-size:14px}
@keyframes apUp{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.1)}}
/* awareness: reach spreading out */
.ap-rings{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.ap-rings i{position:absolute;width:160px;height:160px;border-radius:50%;border:1.5px solid rgba(255,198,221,.55);animation:apRing 3.6s ease-out infinite}
.ap-rings i:nth-child(2){animation-delay:1.2s}.ap-rings i:nth-child(3){animation-delay:2.4s}
@keyframes apRing{from{transform:scale(.6);opacity:.9}to{transform:scale(2.1);opacity:0}}
/* leads: a form filling itself in */
.ap-form{gap:10px;padding:14px}
.ap-ft{font:600 14px/1.2 var(--display);color:var(--indigo)}
.ap-form label{display:flex;flex-direction:column;gap:4px}
.ap-form small{font-size:12px;color:var(--ink-3)}
.ap-field{position:relative;display:block;height:32px;padding:8px 10px;border:1px solid var(--line-2);border-radius:7px;font:500 13px/1 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden}
.ap-type{display:inline-block;overflow:hidden;vertical-align:top;max-width:0;border-right:1.5px solid var(--magenta);padding-right:1px;animation:apType 1.1s steps(14,end) var(--d) forwards,apCaret .8s step-end infinite}
@keyframes apType{to{max-width:var(--w)}}
@keyframes apCaret{50%{border-color:transparent}}
/* clicks: a cursor heads for the link */
.ap-link{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:8px;background:#F3F2F7}
.ap-link small{font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.ap-link b{font:600 13px var(--display);color:var(--indigo)}
.ap-cursor{position:absolute;z-index:4;width:24px;height:24px;left:58%;top:72%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3l15 7-6.5 2L10 19z' fill='white' stroke='%2319135C' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:apCursor 3.2s ease-in-out infinite}
@keyframes apCursor{0%{transform:translate(70px,70px);opacity:0}25%{opacity:1}55%{transform:translate(0,0)}62%{transform:translate(0,0) scale(.82)}70%{transform:translate(0,0)}100%{transform:translate(0,0);opacity:0}}
/* events */
.ap-event{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;width:230px;padding:13px}
.ap-ev-t{display:flex;flex-direction:column;gap:3px}
.ap-event b{font:600 13px/1.25 var(--display);color:var(--indigo)}
.ap-event small{font-size:12px;color:var(--ink-3)}
.ap-event .ap-btn{grid-column:1/-1}
.ap-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:50px;border-radius:10px;background:#FDE8EF}
.ap-date small{font:700 11px/1 var(--sans);letter-spacing:.06em;color:var(--magenta)}
.ap-date b{font:600 21px/1.1 var(--display);color:var(--indigo)}
/* offers */
.ap-coupon{position:relative;display:flex;align-items:center;gap:10px;padding:15px 14px 15px 16px;border:1.5px dashed var(--magenta);border-radius:11px;background:#FFF5F9}
.ap-coupon::before,.ap-coupon::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;border:1.5px dashed var(--magenta)}
.ap-coupon::before{left:-8px;clip-path:inset(0 0 0 50%)}
.ap-coupon::after{right:-8px;clip-path:inset(0 50% 0 0)}
.ap-coupon b{flex:none;font:600 26px/1 var(--display);color:var(--magenta);letter-spacing:-.03em;animation:apHeart 2.4s ease-in-out infinite}
.ap-coupon span{display:flex;flex-direction:column;font:600 12px/1.3 var(--sans);color:var(--indigo)}
.ap-coupon small{font-weight:500;color:var(--ink-3)}
/* any other tab: its icon, drawn large in thin lines with a soft glow */
.tp-line{place-items:center}
.tp-line::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 70%)}
.tp-line svg{position:relative;width:170px;height:170px;fill:none;stroke:rgba(255,255,255,.85);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 16px rgba(255,140,187,.4))}
.tp-line svg *{stroke-dasharray:120;stroke-dashoffset:120;animation:apDraw 1.8s var(--out) .2s forwards}
@keyframes apDraw{to{stroke-dashoffset:0}}
@media (max-width:900px){
  .tabs-panel{grid-template-columns:minmax(0,1fr);min-height:0}
  .tp-vis{height:auto;min-height:0;max-width:none;order:-1;padding:22px 0 18px}
  .tp-line{height:170px;padding:0}
  .tp-line svg{width:120px;height:120px}
  .ap{width:184px}
  .ap-c2{right:-14px}.ap-c1{left:-14px}
}
@media (prefers-reduced-motion:reduce){ .ap,.ap-btn,.ap-chip,.ap-dot,.ap-likes i,.ap-float-h,.ap-rings i,.ap-type,.ap-cursor,.ap-coupon b,.tp-line svg *{animation:none!important} .ap-type{max-width:var(--w)} .tp-line svg *{stroke-dashoffset:0} .ap-cursor,.ap-float-h{display:none} }

/* Design D: magenta-to-indigo heroes and footer, floating circles, motion, the D homepage sections and the inner-page treatment.
   Lifted from the approved mockups (mashup.js) on 2026-10-17. */
/* ---- B_CSS ---- */

/* ---- B: his hero, team, form and footer in our design system ---- */
/* the header floats on the magenta hero, in white */
.site-head .mainnav>a,.site-head .dd-t{color:rgba(255,255,255,.86)}
.site-head .mega{color:var(--ink)}
.site-head .mainnav>a:hover,.site-head .dd-t:hover{color:#fff}
.site-head .mainnav>a::after,.site-head .dd-t::after{background:#fff}
.site-head .lang>summary,.site-head .lang summary{color:#fff}
.site-head .btn{border-color:rgba(255,255,255,.8);color:#fff}
.site-head .btn:hover{background:#fff;color:var(--indigo)}
.site-head .menu-btn{color:#fff}
/* the logo mark turns white on the magenta, as the wordmark does */
.site-head .brand .mk{filter:brightness(0) invert(1)}
.site-head .menu-btn i,.site-head .menu-btn i::before,.site-head .menu-btn i::after{background:#fff}
/* hero: copy and photo side by side, nothing floats over the copy */
#hero.hm{background:linear-gradient(118deg,#E8136D 0%,#A2167A 34%,#3C2AA8 72%,#19135C 100%);color:#fff;padding:128px 0 0;min-height:0;display:block;overflow:hidden}
/* background circles: they drift slowly and ease out of the way of the mouse */
.hm-orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.hm-orbs i{position:absolute;display:block;border-radius:50%;will-change:transform}
.hm-orbs .o1{width:560px;height:560px;left:36%;top:-300px;background:rgba(255,255,255,.055)}
.hm-orbs .o2{width:240px;height:240px;left:-90px;bottom:-100px;background:rgba(255,255,255,.05)}
.hm-orbs .o3{width:104px;height:104px;left:45%;top:92px;background:rgba(255,120,170,.28)}
.hm-orbs .o4{width:340px;height:340px;left:28%;bottom:-190px;background:rgba(255,255,255,.04)}
.hm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);align-items:center}
.hm-copy{position:relative;z-index:3;max-width:620px}
.hm-partner{display:flex;align-items:center;gap:14px;margin-bottom:28px;font-size:15px;color:rgba(255,255,255,.9)}
.hm-partner img{height:58px;width:auto;margin:-8px 0}
.hm h1{color:#fff;font-size:clamp(38px,3.9vw,62px);margin-bottom:26px}
.hm h1 em{color:#FFC6DD}
.hm .lead{color:rgba(255,255,255,.88);margin-bottom:32px;max-width:52ch}
.btn.inv{background:#fff;color:var(--indigo)}
.btn.inv:hover{background:var(--indigo-deep);color:#fff}
.tl.inv{color:#fff;background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4))}
.hm-note{margin-top:20px;font-size:14px;color:rgba(255,255,255,.78)}
/* the photo bleeds off the right edge of the window, the card is pinned inside the photo's column */
.hm-visual{position:relative;height:clamp(440px,42vw,640px);margin-right:calc(-1 * var(--pad) - max(0px,(100vw - 1440px) / 2))}
.hm-photo{position:absolute;inset:0;clip-path:url(#mHero)}
.hm-photo .ph{background-image:url(/assets/media/hero-office.jpg);background-position:57% 40%}
/* faces and numbers: one strip across the bottom of the hero */
.hm-proof{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px 64px;margin-top:clamp(36px,4vw,56px);padding:28px 0 clamp(40px,4.5vw,60px);border-top:1px solid rgba(255,255,255,.22)}
.hm-proof>.node{position:absolute;left:-30px;top:50%;margin:-6.5px 0 0}
.hm-people{display:flex;align-items:center;gap:18px}
.hm-people p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.9);max-width:46ch}
.hm-people .tl{font-size:15px}
.hm-faces{display:flex;flex:none}
.hm-faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#fff}
.hm-faces img+img{margin-left:-11px}
.hm-stats{display:flex;gap:48px}
.hm-stats dt{font:600 34px/1 var(--display);letter-spacing:-.03em;color:#fff;white-space:nowrap}
.hm-stats dd{margin-top:6px;font-size:13px;color:rgba(255,255,255,.8);white-space:nowrap}
/* the upgrade card rests on the photo's lower-left curve, never over the copy */
.hm-steps{position:absolute;z-index:4;left:0;bottom:28px;width:290px;background:var(--paper);color:var(--indigo);border-radius:14px;padding:20px 22px;box-shadow:0 30px 60px -24px rgba(18,13,69,.5)}
.hm-steps p{font-size:13px;font-weight:600;color:var(--magenta);margin-bottom:12px}
.hm-steps ol{list-style:none;display:grid;gap:12px}
.hm-steps li{display:flex;align-items:center;gap:12px;font:500 15px/1.3 var(--sans)}
.hm-steps li span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#FDE8EF;color:var(--magenta);font:600 13px/1 var(--sans)}
.hm-steps li span.ok{background:var(--magenta) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat}
/* team: our heading layout, team cards, a serif statement and a quiet grid of faces */
#team.tm-b{background:var(--paper);padding:140px 0 130px;position:relative}
.tm-head{grid-column:2/7}
.tm-side{grid-column:8/12;align-self:end}
.tm-side p{font-size:17px;color:var(--ink-2);max-width:40ch}
.tm-leads{grid-column:2/12;margin-top:70px}
.tm-leads .tm .pic{background:var(--bg)}
.tm-leads .tm .pic img{object-position:50% 20%}
.tm-belief{grid-column:2/11;margin-top:100px}
.tm-belief blockquote{font:400 clamp(25px,2.6vw,38px)/1.25 var(--serif);color:var(--indigo);letter-spacing:-.012em;text-indent:-.36em}
.tm-belief figcaption{margin-top:22px;font-size:14px;color:var(--ink-3)}
.tm-crew{grid-column:2/12;margin-top:90px;padding-top:34px;border-top:1px solid var(--line)}
.tm-sum{font-size:14px;color:var(--ink-3);margin-bottom:30px}
.mem{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 24px}
.mem li{display:flex;flex-direction:column;align-items:flex-start}
.mem img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--bg);margin-bottom:14px}
.mem b{font:600 16px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.mem span{margin-top:3px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.tm-crew .ctas{margin-top:44px}
/* consultation: our closing layout, the form as a card with our fields and chips */
#consultation.cb{padding:170px 0 150px;position:relative}
.cb .cl-copy{grid-column:2/7}
.cb .cl-copy h2{font-size:clamp(40px,4.8vw,76px);margin-bottom:30px}
.cb .cl-copy .lead{margin-bottom:34px}
.cb-people{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;font-size:14px;color:var(--ink-2)}
.cb-people .hm-faces img{border-color:var(--bg)}
.cb-contact{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.cb-contact li{display:grid;grid-template-columns:5em 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.cb-contact span{font-size:13px;color:var(--ink-3)}
.cb-contact a{font:500 18px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.cb-contact a:hover{color:var(--magenta)}
.cb-partner{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:13px;color:var(--ink-2)}
.cb-partner img{height:52px;width:auto}
.cb-form{grid-column:8/13;align-self:start;background:var(--paper);border-radius:14px;padding:36px;display:flex;flex-direction:column;gap:20px;box-shadow:0 40px 80px -40px rgba(25,19,92,.28)}
.cb-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cb-f{display:flex;flex-direction:column;gap:7px}
.cb-f>span,.cb-form legend{font-size:13px;font-weight:500;color:var(--ink-2)}
.cb-f i{font-style:normal;color:var(--ink-3);font-weight:400}
.cb-f input,.cb-f textarea{width:100%;height:50px;padding:0 14px;border:1px solid var(--line-2);border-radius:2px;background:var(--paper);font:400 15px/1.4 var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.cb-f textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.cb-f input:focus,.cb-f textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(244,20,114,.12)}
.cb-form fieldset{border:0;padding:0;margin:0;min-width:0}
.cb-form legend{margin-bottom:10px;padding:0}
.cb-opts{display:flex;flex-wrap:wrap;gap:8px}
.cb-opt{position:relative;cursor:pointer}
.cb-opt input{position:absolute;opacity:0;width:1px;height:1px}
.cb-opt span{display:inline-flex;align-items:center;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:2px;font:500 14px/1 var(--sans);color:var(--indigo);transition:border-color .2s,background .2s}
.cb-opt:hover span{border-color:var(--line-2)}
.cb-opt input:checked+span{border-color:var(--magenta);background:#FDE8EF}
.cb-opt input:focus-visible+span{outline:2px solid var(--magenta);outline-offset:2px}
.cb-form .btn{justify-content:center;width:100%;border:0;cursor:pointer;padding:19px 24px}
.form-msg{min-height:0;text-align:center;font-weight:500}
.form-msg.ok{color:#1E7B45}.form-msg.err{color:#B3261E}
.cb-note{font-size:13px;color:var(--ink-3);text-align:center}
.cb-note a{color:var(--indigo);font-weight:500}
/* footer: his content in our footer layout */
.foot-off{margin-top:10px;font-size:13px;color:var(--ink-3)}
.foot-col a.tl{font-size:14px}
.foot-sister{margin-top:44px;font-size:13px;color:var(--ink-3);max-width:90ch}
@media (max-width:1100px){
  .hm-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .hm-copy{max-width:680px}
  .hm-visual{height:clamp(360px,56vw,520px);margin-left:0}
  .hm-steps{left:16px;bottom:16px}
  .hm-proof{grid-template-columns:minmax(0,1fr)}
  .hm-proof>.node{display:none}
  .tm-head,.tm-side,.tm-leads,.tm-belief,.tm-crew,.cb .cl-copy,.cb-form{grid-column:1/13}
  .tm-side{margin-top:24px}
  .mem{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cb-form{margin-top:56px}
}
@media (max-width:720px){
  .mem{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-row{grid-template-columns:1fr}
  .cb-form{padding:24px 20px}
  #hero.hm{padding-top:112px}
  .hm-visual{height:auto}
  .hm-photo{position:relative;height:300px}
  .hm-steps{position:relative;left:auto;bottom:auto;margin:-56px 0 0 12px;width:min(290px,calc(100% - 24px))}
  .hm-people{align-items:flex-start;flex-direction:column;gap:12px}
  .hm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .hm-stats dt{font-size:26px}
  .hm-stats dd{white-space:normal}
}

/* ---- SCALE_CSS ---- */

/* no z-index: the route line starts at this heading's dot and must draw over the section's white background */
#scale{position:relative;background:var(--paper);padding:120px 0 110px}
.sc-head{position:relative}
.sc-head{max-width:860px}
.sc-head h2{text-wrap:balance}
.sc-b .sc-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;letter-spacing:-.01em;color:var(--magenta)}
.sc-lead{margin-top:22px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.sc-dial{margin-top:56px}
.sc-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:22px}
.sc-num{font:600 clamp(48px,6.4vw,104px)/1 var(--display);letter-spacing:-.04em;color:var(--indigo);font-variant-numeric:tabular-nums}
.sc-unit{font-size:18px;color:var(--ink-2)}
.sc-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0;display:block}
.sc-range::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--magenta) var(--p,85%),var(--line-2) var(--p,85%))}
.sc-range::-moz-range-track{height:3px;border-radius:3px;background:var(--line-2)}
.sc-range::-moz-range-progress{height:3px;border-radius:3px;background:var(--magenta)}
.sc-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10.5px;border-radius:50%;background:var(--magenta);border:4px solid var(--paper);box-shadow:0 0 0 7px rgba(244,20,114,.16)}
.sc-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--magenta);border:4px solid var(--paper);box-shadow:0 0 0 7px rgba(244,20,114,.16)}
.sc-range:focus-visible{outline:none}
.sc-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(244,20,114,.35)}
.sc-ticks{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sc-panel{margin-top:54px;transition:opacity .18s,translate .18s}
.sc-panel.swap{opacity:0;translate:0 6px}
.sc-tier{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.sc-band{font-size:14px;font-weight:600;color:var(--magenta)}
.sc-t{font:600 clamp(26px,2.4vw,36px)/1.1 var(--display);letter-spacing:-.025em;color:var(--indigo)}
.sc-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--line);padding-top:26px}
.sc-cols h3{font:600 13px/1.3 var(--sans);letter-spacing:0;color:var(--ink-3);margin-bottom:10px}
.sc-cols p{font-size:17px;line-height:1.55;color:var(--ink)}
.sc-foot{margin-top:52px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.sc-foot p{font-size:15px;color:var(--ink-2);max-width:52ch}
@media (max-width:900px){ .sc-cols{grid-template-columns:1fr;gap:22px} #scale{padding:90px 0 80px} }
@media (prefers-reduced-motion:reduce){ .sc-panel{transition:none} }

/* ---- WORK_CSS ---- */

/* clients: warm cards with logos, a map of where they are */
#work.wk2{padding:130px 0 120px;position:relative;--map-land:#E2DFEC;--map-edge:#F3F2F7;--map-hi:#F9CFE0}
.wk2-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:start}
.wk2-head{position:relative}
.wk2-head .lbl{font-size:clamp(32px,3.4vw,54px)}
.wk2 h2{font-size:clamp(32px,3.4vw,54px)}
.wk2-b h2 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;letter-spacing:-.01em;color:var(--magenta)}
.wk2-lead{margin-top:20px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:42ch}
.wk2-legend{list-style:none;margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.wk2-legend li{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;background:var(--paper);border-radius:999px}
.wk2-legend svg{width:24px;height:16px;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(25,19,92,.1)}
.wk2-legend b{font:600 14px/1 var(--display);color:var(--indigo);letter-spacing:-.01em;white-space:nowrap}
.wk2-far{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.wk2-sg{margin:0;display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px;background:var(--paper);border-radius:12px}
.wk2-sg svg{width:100%;height:auto;aspect-ratio:1.45;object-fit:cover;border-radius:8px;background:var(--bg)}
.wk2-sg figcaption{padding:0 4px}
.wk2-sg figcaption{display:flex;flex-direction:column;gap:3px}
.wk2-sg b{font:600 15px/1.2 var(--display);color:var(--indigo)}
.wk2-sg span{font-size:13px;color:var(--ink-3)}
.wk2-map{position:relative;margin:0}
.wk2-map svg{display:block;width:100%;height:auto}
.wk2 .land path{fill:var(--map-land);stroke:var(--map-edge);stroke-width:.7;stroke-linejoin:round}
.wk2 .land path.hi{fill:var(--map-hi)}
.wk2 .pin{cursor:pointer;outline:none}
.wk2 .pin .dot{fill:var(--magenta);stroke:#fff;stroke-width:2.5;transition:r .2s}
.wk2 .pin .pulse{fill:var(--magenta);opacity:0;transform-box:fill-box;transform-origin:center}
.wk2.in .pin .pulse{animation:wkPulse 2.6s ease-out infinite}
.wk2 .pin.on .dot,.wk2 .pin:focus-visible .dot{r:9}
.wk2 .office .o-ring{fill:#fff;stroke:var(--indigo);stroke-width:2}
.wk2 .office .o-dot{fill:var(--indigo)}
.wk2 .office text{font:600 13px var(--sans);fill:var(--indigo);paint-order:stroke;stroke:var(--map-land);stroke-width:4px;stroke-linejoin:round}
@keyframes wkPulse{0%{opacity:.35;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.6)}}
@media (prefers-reduced-motion:no-preference){
  .wk2 .pin .dot{transform-box:fill-box;transform-origin:center}
  .js .wk2:not(.in) .pin .dot{transform:scale(0)}
  .wk2.in .pin .dot,.wk2.in .pin .cnt{animation:wkDrop .5s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:var(--d,0s)}
  .wk2 .pin .cnt{transform-box:fill-box;transform-origin:center}
}
.wk2 .pin .cnt{font:700 10.5px/1 var(--sans);fill:#fff;text-anchor:middle;pointer-events:none}
.wk2 .pin.many.on .dot{r:14}
.wk2 .office .o-ring{r:12}
@keyframes wkDrop{from{transform:scale(0)}}
.wk2-tip{position:absolute;z-index:5;left:0;top:0;transform:translate(-50%,calc(-100% - 12px));padding:8px 12px;border-radius:8px;background:var(--indigo);color:#fff;font:500 13px/1.2 var(--sans);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.wk2-tip.on{opacity:1}
.wk2-tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg)}
/* the cards */
.wk2-grid{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.wkc{display:flex;flex-direction:column;background:var(--paper);border-radius:16px;overflow:hidden;transition:transform .3s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.wkc:hover,.wkc.hl{transform:translateY(-5px);box-shadow:0 28px 56px -32px rgba(25,19,92,.42)}
.wkc-logo{height:112px;display:grid;place-items:center;padding:18px 26px;border-bottom:3px solid var(--tint)}
.wkc-logo img{display:block;max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain}
.wkc-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px}
.wkc-where{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.wkc-where svg{width:21px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(25,19,92,.1)}
.wkc h3{font:600 18px/1.3 var(--display);color:var(--indigo);letter-spacing:-.01em}
.wkc-us{font-size:14px;line-height:1.5;color:var(--ink-2)}
.wkc-us b{display:block;margin-bottom:3px;font-size:12px;font-weight:600;color:var(--magenta)}
.wkc .tl{margin-top:auto;align-self:flex-start;font-size:14px}
/* the eighth card: everyone else, and the reader */
.wkc-more{justify-content:flex-end;gap:12px;padding:26px 24px;background:var(--indigo);color:#C9C5EE}
.wkc-n{font:600 clamp(52px,4.4vw,68px)/1 var(--display);letter-spacing:-.045em;color:#fff}
.wkc-more-t{font-size:14px;line-height:1.5}
.wkc-more h3{font-size:26px;line-height:1.1;color:#fff;margin-top:6px}
.wkc-more .btn{align-self:flex-start;margin-top:8px;white-space:nowrap}
@media (max-width:1100px){ .wk2-top{grid-template-columns:minmax(0,1fr)} .wk2-map{max-width:640px} .wk2-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .wk2-head .lbl{display:none} }
@media (max-width:600px){ #work.wk2{padding:90px 0 80px} .wk2-grid{grid-template-columns:minmax(0,1fr)} .wkc-logo{height:100px} }

/* ---- D_CSS ---- */

/* ---- D: more motion ---- */
/* scroll progress */
.d-prog{position:fixed;left:0;top:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,#F41472,#FF8CBB);transform-origin:left;transform:scaleX(0);pointer-events:none}
/* the hero gradient drifts */
#hero.hm{background-size:180% 180%;animation:dGrad 22s ease-in-out infinite alternate}
@keyframes dGrad{0%{background-position:0% 30%}100%{background-position:100% 70%}}
/* headings rise in word by word */
.dw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em;margin:0 -.08em -.16em}
.dw>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.d-words-in .dw>span{transform:none}
/* the upgrade card ticks its steps off, then floats */
.hm-steps{animation:dFloat 7s ease-in-out 3s infinite}
@keyframes dFloat{50%{transform:translateY(-8px)}}
.hm-steps li{opacity:.35;transition:opacity .5s}
.hm-steps li span{transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.hm-steps li.go{opacity:1}
.hm-steps li.go span{transform:scale(1.12)}
.hm-steps li.go span:not(.ok){background:var(--magenta);color:#fff}
.hm-steps li span.ok{transform:scale(0)}
.hm-steps li.go span.ok{transform:scale(1)}
/* faces pop in */
.hm-faces img{transform:scale(0);transition:transform .55s cubic-bezier(.3,1.6,.5,1)}
.hm-faces.go img{transform:none}
/* reveal on scroll */
.d-rv{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s var(--out),transform 1s var(--out);transition-delay:var(--rd,0s)}
.d-rv.d-in{opacity:1;transform:none}
.d-tilting{transition:transform .12s linear!important}
.svc .card{animation:none}
/* the logo strip */
.d-marq{position:relative;z-index:2;background:var(--paper);padding:34px 0 38px;border-bottom:1px solid var(--line);overflow:hidden}
.d-marq-h{text-align:center;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.d-marq-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.d-marq-row{display:flex;width:max-content;animation:dMarq 75s linear infinite}
.d-marq:hover .d-marq-row{animation-play-state:paused}
.d-set{display:flex;align-items:center;gap:72px;padding-right:72px;height:48px}
.d-set img{display:block;width:auto;max-width:180px;flex:none;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.d-set img:hover{filter:none;opacity:1}
@keyframes dMarq{to{transform:translateX(-50%)}}
/* the map: lines from our office to every town */
.wk2 .arc{fill:none;stroke:var(--magenta);stroke-width:1.3;stroke-linecap:round;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1}
.wk2.in .arc{animation:dArc 1s cubic-bezier(.6,0,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes dArc{to{stroke-dashoffset:0}}
/* nothing moves for visitors who ask for less motion */
@media (prefers-reduced-motion:reduce){
  #hero.hm,.hm-steps,.d-marq-row{animation:none}
  .dw>span,.hm-faces img,.hm-steps li,.hm-steps li span.ok{transform:none;opacity:1;transition:none}
  .d-rv{opacity:1;transform:none;transition:none}
  .wk2 .arc{stroke-dashoffset:0;animation:none}
}

/* ---- D2_CSS ---- */

/* form section: what happens next, and who reads it */
.cb-h{font:600 13px/1.3 var(--sans);color:var(--ink-3);margin-bottom:16px}
.cb-next{margin-top:6px}
.cb-next ol{list-style:none;position:relative;display:grid;gap:18px}
.cb-next ol::before{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:1.5px;background:var(--line)}
.cb-next li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start}
.cb-next .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--magenta);color:#fff;font:600 14px/1 var(--sans);box-shadow:0 0 0 5px var(--bg)}
.cb-next b{display:block;font:600 18px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.cb-next p{margin-top:3px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cb-who{grid-column:2/13;margin-top:72px;padding-top:36px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;align-items:center}
.cb-who-head p:not(.cb-h){font-size:16px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.cb-who ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cb-who li{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cb-who img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 25%;background:var(--paper);margin-bottom:10px;box-shadow:0 14px 30px -18px rgba(25,19,92,.45)}
.cb-who b{font:600 16px/1.25 var(--display);color:var(--indigo);letter-spacing:-.01em}
.cb-who span{font-size:13px;color:var(--ink-3)}
/* footer: the hero's drifting gradient and circles */
.d-foot{background:linear-gradient(118deg,#E8136D 0%,#A2167A 34%,#3C2AA8 72%,#19135C 100%);background-size:180% 180%;animation:dGrad 22s ease-in-out infinite alternate;border-top:0;color:rgba(255,255,255,.78);overflow:hidden}
.d-foot .hm-orbs .o1{left:58%;top:-320px}
.d-foot .hm-orbs .o3{left:72%;top:60px}
.d-foot .foot-brand p,.d-foot .foot-off,.d-foot .foot-sister{color:rgba(255,255,255,.78)}
.d-foot .foot-col h2{color:rgba(255,255,255,.6)}
.d-foot a,.d-foot .foot-brand a,.d-foot .foot-col a{color:#fff}
.d-foot a:hover,.d-foot .foot-col a:hover{color:#FFC6DD}
.d-foot .foot-col a.tl{background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4))}
.d-foot .foot-bottom{border-top-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.d-foot .brand .mk{filter:brightness(0) invert(1)}
@media (max-width:1100px){ .cb-who{grid-column:1/13;grid-template-columns:minmax(0,1fr)} }
@media (max-width:720px){ .cb-who ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .d-foot{animation:none} }

/* ---- SUB_CSS ---- */

/* inner-page hero: D's drifting gradient, floating circles, white type */
.ph-hero{position:relative;overflow:hidden;background:linear-gradient(118deg,#E8136D 0%,#A2167A 34%,#3C2AA8 72%,#19135C 100%);background-size:180% 180%;animation:dGrad 22s ease-in-out infinite alternate;color:#fff;padding-bottom:clamp(56px,6vw,96px)}
.ph-hero h1{color:#fff}
.ph-hero h1 em{color:#FFC6DD}
.ph-hero .lead{color:rgba(255,255,255,.88)}
.ph-hero .crumbs,.ph-hero .crumbs a{color:rgba(255,255,255,.72)}
.ph-hero .crumbs a:hover,.ph-hero .crumbs [aria-current]{color:#fff}
.ph-hero .crumbs li+li::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 2px,transparent 2px 6px)}
.ph-hero .crumbs .node{background:transparent;border-color:rgba(255,255,255,.55)}
.ph-hero .crumbs [aria-current] .node{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}
.ph-hero .btn.pri{background:#fff;color:var(--indigo)}
.ph-hero .btn.pri:hover{background:var(--indigo-deep);color:#fff}
.ph-hero .tl{color:#fff;background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4))}
.ph-hero .spec,.ph-hero .spec>div{border-color:rgba(255,255,255,.22)}
.ph-hero .spec dt,.ph-hero .spec dd small{color:rgba(255,255,255,.7)}
.ph-hero .spec dd{color:#fff}
.ph-hero .mproof a{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)}
.ph-hero .mproof b{color:#fff}
.ph-hero .scrib,.ph-hero .scrib span{color:#fff}
.ph-hero .scrib path{stroke:#fff}
.ph-hero .browser{box-shadow:0 40px 80px -30px rgba(18,13,69,.55)}
/* the generic scroll-tied rise-ins give way to D's own reveal */
.bento .card,.pcard,.mod,.stat,.story>li,.media .frame,.strip figure,.row,.pk-row,.job,.tm,.cc,.linklist li,.faq details{animation:none}
/* picture blocks beside text: every picture on the same soft plate, uncropped, with a drifting light behind it */
.media{align-items:center}
.media .frame:not(.photo){position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:auto;height:clamp(300px,30vw,440px);padding:clamp(22px,3.2vw,48px);border-radius:22px;background:linear-gradient(140deg,#FDE8EF 0%,#F1EEFB 55%,#E7E3F7 100%);box-shadow:none;border:0}
.media .frame:not(.photo)::before{content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;left:-18%;top:-24%;background:radial-gradient(circle,rgba(244,20,114,.22),rgba(244,20,114,0) 68%);animation:subGlow 14s ease-in-out infinite alternate}
.media .frame:not(.photo)::after{content:"";position:absolute;z-index:-1;width:55%;aspect-ratio:1;border-radius:50%;right:-14%;bottom:-20%;background:radial-gradient(circle,rgba(60,42,168,.2),rgba(60,42,168,0) 68%);animation:subGlow 18s ease-in-out infinite alternate-reverse}
@keyframes subGlow{to{transform:translate(18%,14%) scale(1.12)}}
.media .frame:not(.photo) img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 30px 60px -30px rgba(25,19,92,.45);transform:translateY(var(--par,0px));transition:transform .6s var(--out)}
.media .frame:not(.photo):hover img{transform:translateY(calc(var(--par,0px) - 6px)) scale(1.02)}
.media .frame.photo{border-radius:22px;overflow:hidden;aspect-ratio:auto;height:clamp(300px,30vw,440px)}
.media .frame.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.06) translateY(var(--par,0px))}
/* "What it looks like": one screen at a time, large, with thumbnails */
.shw{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:22px;align-items:start}
.shw-stage{position:relative;display:grid}
.shw-slide{grid-area:1/1;margin:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .7s var(--out),transform .9s var(--out);pointer-events:none}
.shw-slide.on{opacity:1;transform:none;pointer-events:auto}
.shw-plate{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;height:clamp(320px,38vw,540px);padding:clamp(18px,2.6vw,40px);border-radius:22px;background:linear-gradient(140deg,#1E1650 0%,#3C2AA8 60%,#8E1468 100%)}
.shw-plate::before{content:"";position:absolute;z-index:-1;width:60%;aspect-ratio:1;border-radius:50%;right:-12%;top:-30%;background:radial-gradient(circle,rgba(255,140,187,.35),rgba(255,140,187,0) 66%);animation:subGlow 16s ease-in-out infinite alternate}
.shw-plate img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 34px 70px -28px rgba(0,0,0,.55)}
.shw-slide:not(.on) figcaption{visibility:hidden}
.shw-slide figcaption{margin-top:18px;max-width:62ch;font:500 17px/1.5 var(--sans);color:var(--ink-2)}
.shw-thumbs{display:flex;flex-direction:column;gap:12px}
.shw-thumbs button{position:relative;display:block;padding:6px;border:0;border-radius:12px;background:var(--paper);cursor:pointer;opacity:.55;transition:opacity .3s,box-shadow .3s;overflow:hidden}
.shw-thumbs button:hover,.shw-thumbs button.on{opacity:1}
.shw-thumbs button.on{box-shadow:0 0 0 2px var(--magenta)}
.shw-thumbs img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.shw-thumbs i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--magenta)}
.shw-thumbs button.on i{animation:shwProg var(--shw-t,5s) linear forwards}
.shw.paused .shw-thumbs button.on i{animation-play-state:paused}
@keyframes shwProg{to{width:100%}}
/* the module page's question form */
#ask.ask{padding:150px 0 140px;position:relative}
.ask .cl-copy{grid-column:2/7}
.ask .cl-copy h2{font-size:clamp(40px,4.4vw,70px);margin-bottom:26px}
.ask .cl-copy h2 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;color:var(--magenta)}
.ask .cl-copy .lead{margin-bottom:34px}
.ask-team{display:flex;align-items:center;margin-top:34px;gap:0}
.ask-team img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:3px solid var(--bg);margin-left:-10px;background:var(--paper)}
.ask-team img:first-child{margin-left:0}
.ask-team span{margin-left:16px;font-size:14px;color:var(--ink-2)}
.ask .cb-form{grid-column:8/13}
.ask-tag{font-size:13px;color:var(--ink-3)}
.ask-tag b{color:var(--indigo);font-weight:600}
@media (max-width:1100px){ .ask .cl-copy,.ask .cb-form{grid-column:1/13} .ask .cb-form{margin-top:48px} .shw{grid-template-columns:minmax(0,1fr)} .shw-thumbs{flex-direction:row;overflow-x:auto} .shw-thumbs button{flex:0 0 84px} }
@media (prefers-reduced-motion:reduce){ .ph-hero{animation:none} .media .frame::before,.media .frame::after,.shw-plate::before{animation:none} .shw-slide{transition:none} }

/* ---- articles: the same magenta hero as every page ---- */
.art-hero2{overflow:hidden;background:linear-gradient(118deg,#E8136D 0%,#A2167A 34%,#3C2AA8 72%,#19135C 100%);background-size:180% 180%;animation:dGrad 22s ease-in-out infinite alternate;color:#fff;padding-bottom:clamp(56px,6vw,90px)}
.art-hero2 h1{color:#fff}
.art-hero2 h1 em{color:#FFC6DD}
.art-hero2 .art-chip{color:#FFC6DD}
.art-hero2 .art-meta,.art-hero2 .art-author span{color:rgba(255,255,255,.72)}
.art-hero2 .art-author b{color:#fff}
.art-hero2 .art-author .av{background:rgba(255,255,255,.16)}
.art-hero2 .crumbs,.art-hero2 .crumbs a{color:rgba(255,255,255,.72)}
.art-hero2 .crumbs a:hover,.art-hero2 .crumbs [aria-current]{color:#fff}
.art-hero2 .crumbs li+li::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 2px,transparent 2px 6px)}
.art-hero2 .crumbs .node{background:transparent;border-color:rgba(255,255,255,.55)}
.art-hero2 .crumbs [aria-current] .node{background:#fff;border-color:#fff}
.art-hero2 .art-cover .mask{background:rgba(255,255,255,.92);box-shadow:0 40px 80px -30px rgba(18,13,69,.55)}
@media (prefers-reduced-motion:reduce){ .art-hero2{animation:none} }

/* showcase: a long set of screenshots scrolls in its thumbnail column */
.shw-thumbs{max-height:calc(clamp(320px,38vw,540px) + 40px);overflow-y:auto;scrollbar-width:thin;padding:2px}
@media (max-width:1100px){ .shw-thumbs{max-height:none;overflow-y:visible} }
/* team: a member without a photo shows initials in the same circle */
.mem .mem-i{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;background:var(--bg);color:var(--purple);font:600 22px var(--display);opacity:.7}

/* a row of client logos under a paragraph */
.logo-row{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.logo-row li{display:grid;place-items:center;overflow:hidden;width:160px;height:76px;padding:0;background:var(--paper);border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.logo-row img{width:100%;height:100%;object-fit:cover}

/* ---- site-wide audit fixes (2026-10-17) ---- */
/* the hero's buttons keep clear of the card below them; long labels wrap inside the button */
.ph-hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.ph-hero .ctas .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
@media (max-width:900px){ .ph-hero .ph-visual,.ph-hero .ph-aside{margin-top:44px} .ph-hero .ctas{gap:16px 22px} }
/* long addresses and file paths wrap instead of pushing the page sideways */
.prose,.rows p,.story .prose,.faq .a,.card p,.steps p,.tabs-panel p,.incl p,.trio p{overflow-wrap:break-word}
.prose a,.prose code{overflow-wrap:anywhere}
.prose code{white-space:normal}
.prose ul,.prose ol{padding-left:1.25em}
/* closing headings carry the serif italic like every other heading */
.cl-copy h2 em,.close-sec h2 em,.tm-b h2 em,.cb h2 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06em;letter-spacing:-.01em;color:var(--magenta)}
/* "talk to us in": an even grid on phones, never one language alone on a row */
@media (max-width:600px){ .langs ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .langs li{padding:10px 12px;font-size:14px} }
/* the map and the gauge may draw their labels outside their box */
.map-eu,.map-eu svg{overflow:visible}
.gauge .lb{font-size:7.6px}
/* reviews: one even grid instead of newspaper columns */
.rv-list{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 56px}
.rv-list li{margin-bottom:0}
@media (max-width:1100px){ .rv-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* on a phone, long runs of cards become a row you swipe instead of a tower */
@media (max-width:600px){
  .rv-list,.wk2-grid,.cc-grid.page{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;margin-inline:calc(var(--pad,16px) * -1);padding:4px var(--pad,16px) 18px;grid-template-columns:none}
  .rv-list::-webkit-scrollbar,.wk2-grid::-webkit-scrollbar,.cc-grid.page::-webkit-scrollbar{display:none}
  .rv-list>li{flex:0 0 84%;scroll-snap-align:start}
  .wk2-grid>*,.cc-grid.page>*{flex:0 0 82%;scroll-snap-align:start}
}
/* breadcrumbs on a phone: home and the page itself */
@media (max-width:600px){ .crumbs li:not(:nth-last-child(-n+2)){display:flex} .crumbs li:not(:first-child):not(:last-child){display:none} }
/* hour blocks: one tidy row of up to 20 */
.hblocks{max-width:none;flex-wrap:nowrap;gap:2px}
.hblocks i{width:7px;height:7px}
.nw{white-space:nowrap}
/* two cards side by side become one column on phones */
@media (max-width:720px){ .bento.n2{grid-template-columns:minmax(0,1fr)} }
/* links inside the coloured cards are white, not ink on dark */
.card.deep .tl,.card.ind .tl,.card.berry .tl,.card.mag .tl,.sec.dark .card .tl{color:#fff;background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4))}
/* showcase: a pale plate, so white screenshots and banners don't sit as a white card on purple */
.shw-plate{background:linear-gradient(140deg,#F4F0FC 0%,#EEE8FA 55%,#FBE6F0 100%);box-shadow:inset 0 0 0 1px rgba(60,42,168,.08)}
.shw-plate::before{background:radial-gradient(circle,rgba(232,19,109,.16),rgba(232,19,109,0) 66%)}
.shw-plate img{box-shadow:0 30px 60px -30px rgba(25,19,92,.45)}
.shw-thumbs button img{opacity:1}
@media (max-width:600px){ .shw-plate{height:auto;min-height:220px;padding:16px} .shw-plate img{max-height:62vh} .shw-slide figcaption{margin-top:12px;font-size:15px} }
.shw-thumbs button{opacity:.78;background:#F4F0FC}
/* the hub hero's shelf label sits on the gradient */
.ph-hero .shelves-cap{color:rgba(255,255,255,.78)}
/* module cards on a phone: a compact row, picture left, text right, so a shelf of 14 isn't a tower */
@media (max-width:600px){
  .mods .mod{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
  .mods .mod .mpic{aspect-ratio:auto;min-height:100%}
  .mods .mod .mpic img{object-position:center}
  .mods .mod .mpic .mcover{padding:10px;justify-content:center}
  .mods .mod .mpic .mcover b{font-size:14px;max-width:100%}
  .mods .mod .mpic .mcover small,.mods .mod .mpic .mc-ico,.mods .mod .mpic::after{display:none}
  .mods .mod .mbody{padding:14px 16px 12px}
  .mods .mod h3{font-size:16.5px;margin-bottom:4px}
  .mods .mod p{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mods .mod .meta{padding-top:10px;margin-top:10px}
  .mods .mod .new{top:8px;right:8px;font-size:11px;padding:3px 7px}
  .mods .mod-none{display:block}
}
/* client logos come as squares with the mark in the middle band: show the whole width, crop only the empty top and bottom */
.logo-row li{width:184px;height:92px;background:#fff}
.logo-row img{width:184px;height:184px;max-width:none;flex:none;object-fit:contain}
@media (max-width:600px){ .logo-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .logo-row li{width:auto;height:80px} .logo-row img{width:160px;height:160px} }
/* blog index: nine recent posts, then a button for the rest */
.pgrid.clip>.pcard:nth-child(n+10){display:none}
.pmore{display:flex;align-items:center;justify-content:center;gap:10px;margin:34px auto 0;padding:15px 26px;border:1.5px solid var(--indigo);border-radius:999px;background:transparent;color:var(--indigo);font:600 15px var(--sans);cursor:pointer;transition:background .2s,color .2s}
.pmore:hover{background:var(--indigo);color:#fff}
/* file upload in the same voice as the other fields */
.field input[type=file]{padding:10px;background:var(--bg);border:1.5px dashed color-mix(in srgb,var(--indigo) 22%,transparent);border-radius:10px;font:500 14px var(--sans);color:var(--ink-2);cursor:pointer;width:100%}
.field input[type=file]::file-selector-button{margin-right:14px;padding:10px 16px;border:0;border-radius:999px;background:var(--indigo);color:#fff;font:600 14px var(--sans);cursor:pointer;transition:background .2s}
.field input[type=file]:hover::file-selector-button{background:var(--magenta)}
/* quote band: the name and the link are two things, side by side or stacked */
.qband figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
/* category hero: rating column wide enough for "4.9" */
.shelves.picks .shelf{grid-template-columns:3.4em minmax(0,1fr) auto}
.shelves.picks .shelf .n{font-size:clamp(22px,2vw,28px)}
.shelves.picks .shelf .n::after{content:"\2605";font-size:.5em;margin-left:2px;vertical-align:.5em;color:#F2A900}
/* any link written inside a coloured card's text is white */
.card.deep .prose a,.card.ind .prose a,.card.berry .prose a,.card.mag .prose a,.card.deep p a,.card.ind p a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
/* picker tabs on a phone: a long name wraps inside its tab instead of running off the screen */
@media (max-width:720px){ .tabs-list button{white-space:normal;max-width:min(76vw,300px);text-align:left} }
/* horizontal step rails: each step draws its own stretch of the line, so a second row has one too */
@media (min-width:901px){
  .steps.static:not(.vert):not(.c2)::before{display:none}
  .steps.static:not(.vert):not(.c2)>li{position:relative}
  .steps.static:not(.vert):not(.c2)>li::before{content:"";position:absolute;left:6px;right:-30px;top:6px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 6px)}
  .sec.dark .steps.static:not(.vert):not(.c2)>li::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 2px,transparent 2px 6px)}
  .steps.static:not(.vert):not(.c2)>li:last-child::before{right:0}
  .steps.static:not(.vert):not(.c2) .node{z-index:1}
}
@media (min-width:901px){
  .steps.static.c3>li:nth-child(3n)::before,.steps.static.c5>li:nth-child(5n)::before,.steps.static:not(.c3):not(.c5):not(.c2):not(.vert)>li:nth-child(4n)::before{right:0}
}
/* the code card on a phone: long lines wrap instead of being cut off */
@media (max-width:600px){ .code pre{white-space:pre-wrap;word-break:break-word;font-size:11.5px} }

/* ---- final sweep fixes (2026-10-17) ---- */
/* text beside a price tag: side by side on desktop, stacked on a phone */
.split-price{display:grid;grid-template-columns:minmax(0,7fr) auto;gap:30px 60px;align-items:center}
@media (max-width:720px){ .split-price{grid-template-columns:minmax(0,1fr);gap:24px} .split-price .tag-price{justify-self:start} }
/* module rows on a phone: the "new" badge sits on the picture, not over the title; the shelf filter wraps */
@media (max-width:600px){
  .mods .mod .new{right:auto;left:6px;top:6px}
  .mod-filter{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
}
/* swipe rows start at the page gutter */
@media (max-width:600px){ .rv-list,.wk2-grid,.cc-grid.page{scroll-padding-inline:var(--pad,20px)} .rv-list blockquote{text-indent:0} }
/* numbered steps on a phone: one column with the rail down the left, not two cramped columns */
@media (max-width:600px){
  .steps.static:not(.vert),.steps.c3,.steps.c5,.steps.c2{grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
  .steps.static:not(.vert)>li{position:relative;padding:0 0 26px 40px !important}
  .steps.static:not(.vert)>li::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:1px;height:auto;right:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 2px,transparent 2px 6px)}
  .sec.dark .steps.static:not(.vert)>li::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 2px,transparent 2px 6px)}
  .steps.static:not(.vert)>li:last-child::before{display:none}
  .steps.static:not(.vert) .node{position:absolute;left:0;top:3px}
  .steps.static:not(.vert) p{max-width:none}
}
/* four reviews: four columns, not three and one alone */
.rv-list:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 36px}
@media (max-width:1100px){ .rv-list:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} }
/* a picture with a heading but no text: heading above, picture wide below */
.media.notext{grid-template-columns:minmax(0,1fr) !important;gap:34px}
.media.notext>div:first-child{max-width:none}
.media.notext .frame{max-width:980px;width:100%;justify-self:center}
/* showcase: small mockups scale up to the plate */
.shw-plate img{width:100%;height:100%;object-fit:contain;box-shadow:none;filter:drop-shadow(0 26px 40px rgba(25,19,92,.28))}
@media (max-width:600px){ .steps.static:not(.vert) .node{display:block} .steps:not(.static){grid-template-columns:minmax(0,1fr);gap:26px} }
/* an article that opens with a short or bold line: no drop cap, the line reads as a lead */
.art-body .prose>p.lead-in:first-child::first-letter{float:none;font:inherit;color:inherit;margin:0}
.art-body .prose>p.lead-in:first-child{font-size:1.12em;color:var(--ink)}
@media (max-width:600px){ .mods .mod .meta>span:first-child:not(.mr){display:none} }
/* logo tiles: the square logo image is centred, so only its empty top and bottom are cropped */
.logo-row li{position:relative;display:block}
.logo-row img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media (max-width:600px){ .logo-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .logo-row li{height:58px} .logo-row img{width:100%;height:auto;aspect-ratio:1} }
@media (max-width:600px){ .steps.static:not(.vert)::before,.steps.static:not(.vert)::after{display:none} }
/* articles: sub-headings written as h4 read as headings, not bold body text */
.art-body .prose h4{font:600 clamp(19px,1.5vw,22px)/1.3 var(--display);color:var(--indigo);letter-spacing:-.015em;margin:1.6em 0 .5em}
/* a pair of cards: both titles the same size */
.bento.n2 .card:first-child h3{font-size:21px}
/* two dark sections in a row: no light strip between them */
.sec.dark+.qband,.qband+.sec.dark,.qband+.qband{margin-top:0}
.sec.dark:has(+.qband){margin-bottom:0}
/* footer and contact labels readable on the gradient */
.d-foot .mute{color:rgba(255,255,255,.72)}
/* no single word alone on the last line of a heading or a lead */
h1,h2,h3,.lead,.cl-copy p,.card h3{text-wrap:balance}
.prose p,.card p,.sec-head p{text-wrap:pretty}
/* the hanging quote mark keeps clear of the screen edge on a phone */
@media (max-width:600px){ .qband blockquote,.tm-belief blockquote{text-indent:0} }
@media (min-width:1101px){ .team:not(.tm-leads):has(>.tm:nth-child(10):last-child){--cols:5 !important} }

/* team photos without a background (October 2026): each person stands on a soft brand tint */
.tm .pic,.tm-leads .tm .pic{background:linear-gradient(165deg,#F4F0FC 0%,#ECE5FA 52%,#FBE4EF 100%)}
.tm .pic img,.tm-leads .tm .pic img{object-fit:cover;object-position:50% 100%}
.hm-faces img,.mem img,.cb-who img,.ask-team img,.contact-team img{background:linear-gradient(165deg,#F1ECFB 0%,#E6DEF8 55%,#FADDEA 100%);object-fit:cover;object-position:50% 0}
.cb-people .hm-faces img{background:linear-gradient(165deg,#F1ECFB 0%,#E6DEF8 55%,#FADDEA 100%)}

/* ---- PFD pass (2026-10-17): fewer cards, one shape per meaning ---- */
/* closing block: the real team, standing together on the brand tint */
.cl-team{grid-column:8/13;align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:0;padding:28px 18px 0;border-radius:26px;background:linear-gradient(165deg,#F4F0FC 0%,#ECE5FA 52%,#FBE4EF 100%);overflow:hidden;min-height:330px}
.cl-team figure{position:relative;margin:0 -14% 0 0;z-index:calc(4 - var(--i))}
.cl-team figure:nth-child(even){transform:translateY(10px)}
.cl-team img{display:block;width:118%;max-width:none;height:auto;filter:drop-shadow(0 14px 18px rgba(25,19,92,.18))}
.cl-team figcaption{position:absolute;left:8%;bottom:14px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font:600 12.5px var(--sans);color:var(--indigo);box-shadow:0 6px 14px -8px rgba(25,19,92,.4)}
@media (max-width:1100px){ .cl-team{grid-column:1/13;margin-top:56px;max-width:560px} }
@media (max-width:600px){ .cl-team{min-height:0;padding:20px 10px 0} .cl-team figcaption{font-size:11px;bottom:8px;left:4%} }
/* ruled rows: point left, explanation right, hairlines between, no boxes */
.rules{border-top:1px solid var(--line)}
.rl{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:10px 48px;padding:26px 0;border-bottom:1px solid var(--line)}
.rl h3{font:600 clamp(19px,1.5vw,22px)/1.3 var(--display);color:var(--indigo);letter-spacing:-.015em}
.rl p,.rl .prose{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.sec.dark .rules,.sec.dark .rl{border-color:rgba(255,255,255,.14)} .sec.dark .rl h3{color:#fff} .sec.dark .rl p{color:#C9C5EE}
@media (max-width:720px){ .rl{grid-template-columns:minmax(0,1fr);padding:20px 0} }
/* in → out: what you send us, what you get, with an arrow between */
.inout{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.io{padding:34px 32px;border-radius:20px;border:1.5px dashed color-mix(in srgb,var(--indigo) 26%,transparent)}
.io.out{border:0;background:linear-gradient(150deg,#3C2AA8 0%,#5B2CA0 55%,#A2167A 100%);color:#fff;box-shadow:0 30px 60px -36px rgba(60,42,168,.7)}
.io h3{font:600 clamp(20px,1.6vw,24px)/1.25 var(--display);color:var(--indigo);margin:14px 0 12px;letter-spacing:-.015em}
.io.out h3{color:#fff}
.io p,.io .prose{font-size:15.5px;line-height:1.6;color:var(--ink-2)} .io.out p,.io.out .prose,.io.out li{color:rgba(255,255,255,.88)}
.io .prose ul{padding-left:1.1em} .io.out .prose li::marker{color:#FFC6DD}
.io-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#F1ECFB;color:var(--indigo)} .io.out .io-ico{background:rgba(255,255,255,.14);color:#fff}
.io-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.io-arrow{display:grid;place-items:center;color:var(--magenta)} .io-arrow svg{width:44px;height:22px}
@media (max-width:720px){ .inout{grid-template-columns:minmax(0,1fr)} .io-arrow{height:52px} .io-arrow svg{transform:rotate(90deg)} }
/* icon rail: four or more points side by side on hairlines, no card backgrounds */
.rail{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:1px solid var(--line)}
.ri{padding:28px 26px 30px;border-left:1px solid var(--line)}
.ri:nth-child(4n+1){border-left:0;padding-left:0}
.ri h3{font:600 18px/1.3 var(--display);color:var(--indigo);margin:16px 0 8px;letter-spacing:-.01em}
.ri p,.ri .prose{font-size:15px;line-height:1.6;color:var(--ink-2)}
.ri-ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(150deg,#F1ECFB,#FBE4EF);color:var(--magenta)}
.ri-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sec.dark .rail,.sec.dark .ri{border-color:rgba(255,255,255,.14)} .sec.dark .ri h3{color:#fff} .sec.dark .ri p{color:#C9C5EE} .sec.dark .ri-ico{background:rgba(255,255,255,.1);color:#FFC6DD}
@media (max-width:1100px){ .rail{grid-template-columns:repeat(2,minmax(0,1fr))} .ri:nth-child(4n+1){border-left:1px solid var(--line);padding-left:26px} .ri:nth-child(odd){border-left:0;padding-left:0} .ri{border-bottom:1px solid var(--line)} }
@media (max-width:600px){ .rail{grid-template-columns:minmax(0,1fr)} .ri,.ri:nth-child(odd),.ri:nth-child(4n+1){border-left:0;padding:22px 0} .ri{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:16px} .ri h3{margin:8px 0 6px} .ri p,.ri .prose{grid-column:2} }
/* the mid-page call to action: one line on a hairline, not a white card */
.cta-band,.sec.alt .cta-band{background:transparent;border-radius:0;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto}
.cta-band h2{font-size:clamp(22px,2vw,30px)}
@media (max-width:720px){ .cta-band,.sec.alt .cta-band{padding:24px 0;grid-template-columns:minmax(0,1fr)} }
/* a long last station in a case study reads as plain text, not a dark box */
.story>li.long{background:transparent !important;color:inherit !important;box-shadow:none !important;border-top:2px solid var(--magenta);border-radius:0;padding-left:0;padding-right:0}
.story>li.long h3{color:var(--indigo) !important} .story>li.long .prose,.story>li.long p{color:var(--ink-2) !important}
/* closing team panel, take two: less overlap, names on one line under the panel */
.cl-side{grid-column:8/13;align-self:end}
.cl-side .cl-team{grid-column:auto;padding:30px 22px 0;min-height:0}
.cl-team figure{margin:0 -7% 0 0}
.cl-team figure:nth-child(even){transform:translateY(14px)}
.cl-team img{width:108%}
.cl-team-names{margin-top:14px;font-size:14px;color:var(--ink-3);text-align:center}
@media (max-width:1100px){ .cl-side{grid-column:1/13;margin-top:56px;max-width:560px} .cl-side .cl-team{margin-top:0} }

/* ---- clients page (2026-10-17) ---- */
.cp-head{max-width:760px;margin-bottom:46px}
.cp-head h2{font-size:clamp(32px,3.4vw,52px);line-height:1.05;letter-spacing:-.03em}
.cp-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
.cp-head p{margin-top:16px;font-size:17px;line-height:1.55;color:var(--ink-2)}
/* logo wall */
.cp-logos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.cp-logos li{position:relative;aspect-ratio:16/9;border-radius:14px;background:var(--plate,#fff);box-shadow:inset 0 0 0 1px rgba(25,19,92,.07);overflow:hidden;transition:transform .35s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.cp-logos li:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(25,19,92,.07),0 18px 34px -22px rgba(25,19,92,.45)}
.cp-logos a{position:absolute;inset:0;display:grid;place-items:center;padding:18px 22px}
.cp-logos img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.78;transition:filter .35s,opacity .35s}
.cp-logos li.dark img{filter:grayscale(1) brightness(1.6);opacity:.85}
.cp-logos li:hover img{filter:none;opacity:1}
.cp-logos .cp-more{display:flex;flex-direction:column;justify-content:center;padding:16px 20px;background:linear-gradient(150deg,#3C2AA8,#A2167A);color:#fff;box-shadow:none}
.cp-more b{font:600 clamp(28px,2.4vw,36px)/1 var(--display);letter-spacing:-.03em}
.cp-more span{margin-top:6px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.85)}
/* stories: one store per row, at length */
.cp-stories .cs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 72px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.cp-stories .cs.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.cp-stories .cs.flip .cs-shot{order:2}
.cs-shot{position:relative;display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(25,19,92,.45),0 0 0 1px rgba(25,19,92,.06)}
.cs-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--tint)}
.cs-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#F3F1F8;border-bottom:1px solid rgba(25,19,92,.06)}
.cs-bar i{width:9px;height:9px;border-radius:50%;background:#D9D5E6}
.cs-bar em{margin-left:10px;font:500 12px var(--sans);font-style:normal;color:var(--ink-3)}
.cs-scroll{display:block;height:clamp(320px,34vw,500px);overflow:hidden}
.cs-scroll img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 6s cubic-bezier(.45,.05,.35,1)}
.cs-shot:hover .cs-scroll img{transform:translateY(calc(-100% + clamp(320px,34vw,500px)))}
.cs-id{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-bottom:22px}
.cs-logo{display:grid;place-items:center;height:54px;padding:8px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(25,19,92,.08)}
.cs-logo img{max-height:38px;max-width:150px;width:auto;object-fit:contain}
.cs-where{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.cs-where svg{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(25,19,92,.1)}
.cs h3{font:500 clamp(26px,2.4vw,36px)/1.15 var(--serif);font-style:italic;color:var(--indigo);letter-spacing:-.01em;text-wrap:balance}
.cs-who{margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.cs-who b{color:var(--ink)}
.cs-fig{display:flex;align-items:baseline;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.cs-fig b{font:600 clamp(36px,3.2vw,52px)/1 var(--display);letter-spacing:-.04em;color:var(--tint);filter:saturate(1.1) brightness(.9)}
.cs-fig span{font-size:15px;color:var(--ink-2);max-width:22ch}
.cs-us{margin-top:24px;padding:22px 24px;border-radius:14px;background:color-mix(in srgb,var(--tint) 7%,#fff);border-left:3px solid var(--tint)}
.cs-us h4{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--magenta);margin-bottom:8px}
.cs-us p{font-size:16px;line-height:1.6;color:var(--ink)}
.cs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cs-tags li{padding:6px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(25,19,92,.1);font:500 13px var(--sans);color:var(--indigo)}
.cs-copy>.tl{display:inline-block;margin-top:24px}
@media (max-width:900px){
  .cp-stories .cs,.cp-stories .cs.flip{grid-template-columns:minmax(0,1fr);padding:44px 0;gap:28px}
  .cp-stories .cs.flip .cs-shot{order:0}
  .cs-scroll{height:300px}
  .cs-shot:hover .cs-scroll img{transform:translateY(calc(-100% + 300px))}
}
/* map section on the clients page sits on paper */
.cp-map{background:var(--paper)}
/* more stores: a ruled list with small logos, then the invitation */
.cp-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--line)}
.cp-list a{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.cp-l{grid-row:1/3;display:grid;place-items:center;width:72px;height:44px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(25,19,92,.07);overflow:hidden}
.cp-l img{max-width:60px;max-height:30px;object-fit:contain}
.cp-list b{font:600 17px var(--display);color:var(--indigo);align-self:end}
.cp-list a>span:last-child{font-size:14px;color:var(--ink-2);align-self:start}
.cp-list a:hover b{color:var(--magenta)}
.cp-next{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;margin-top:48px;padding:34px 38px;border-radius:20px;background:linear-gradient(118deg,#E8136D 0%,#A2167A 34%,#3C2AA8 72%,#19135C 100%);color:#fff}
.cp-next h3{font:600 clamp(24px,2.2vw,32px)/1.1 var(--display);color:#fff;letter-spacing:-.02em}
.cp-next p{margin-top:8px;color:rgba(255,255,255,.85)}
.cp-next .btn.pri{background:#fff;color:var(--indigo)}
@media (max-width:720px){ .cp-list{grid-template-columns:minmax(0,1fr)} .cp-next{padding:26px 22px} .cp-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
/* clients hero facts */
.cp-facts{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.22)}
.cp-facts>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.cp-facts dt{font:600 clamp(36px,3.4vw,54px)/1 var(--display);letter-spacing:-.04em;color:#fff}
.cp-facts dd{font-size:16px;line-height:1.4;color:rgba(255,255,255,.82)}
/* logo wall, take two: logos in their own colours, an even grid, "+370" as a strip under it */
.cp-logos{grid-template-columns:repeat(7,minmax(0,1fr))}
.cp-logos img,.cp-logos li.dark img{filter:none;opacity:1;max-height:58px;max-width:82%}
.cp-logos li:hover img{transform:scale(1.04)} .cp-logos img{transition:transform .35s}
.cp-logos .cp-more{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:14px;padding:18px 24px}
.cp-more span{margin-top:0;font-size:15px}
@media (max-width:1100px){ .cp-logos{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:720px){ .cp-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .cp-logos a{padding:10px} .cp-logos img,.cp-logos li.dark img{max-height:34px;max-width:86%} .cp-logos li{border-radius:10px} }
/* the logo: the mark at nearly full height on the left, at its true proportions, the same gap to the "P" as the
   official logo (the white wordmark is now the colour one recoloured, so both share one geometry) */
.brand .mk{left:0;top:2%;height:96%;width:auto;aspect-ratio:768/907}
/* client logo ticker: logos in their own colours on white tiles, moving slowly */
.lmarq-sec{padding:44px 0}
.lmarq-h{font-size:13px;color:var(--ink-3);margin-bottom:18px}
.marquee.lmarq{padding:8px 0;border:0}
.lmarq .track{gap:14px;animation-duration:70s}
.lmarq .lt{display:grid;place-items:center;flex:none;width:168px;height:84px;padding:14px 20px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(25,19,92,.07)}
.lmarq .lt::after{content:none}
.lmarq .lt img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain}
.sec.alt .lmarq .lt:not([style]){background:#fff}
@media (max-width:600px){ .lmarq .lt{width:128px;height:66px;padding:10px 14px} .lmarq .lt img{max-height:38px} }
@media (prefers-reduced-motion:reduce){ .lmarq .lt.dup{display:none} }

/* ---- blog index rehaul (2026-10-18) ---- */
/* hero: the newest post as the picture */
.bl-feat{position:relative;display:block;border-radius:22px;overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 40px 80px -36px rgba(18,13,69,.6);transform:rotate(.6deg);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.bl-feat:hover{transform:rotate(0) translateY(-4px)}
.bl-feat-pic{display:block;aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--tint) 14%,#fff)}
.bl-feat-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.bl-feat:hover .bl-feat-pic img{transform:scale(1.04)}
.bl-feat-pic .tcover{position:relative;inset:auto;height:100%}
.bl-feat-body{display:flex;flex-direction:column;gap:10px;padding:22px 26px 24px}
.bl-feat-k{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--magenta)}
.bl-feat-k i{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 4px rgba(232,19,109,.15);animation:blPulse 2.4s ease-in-out infinite}
@keyframes blPulse{50%{box-shadow:0 0 0 8px rgba(232,19,109,0)}}
.bl-feat-body b{font:600 clamp(21px,1.8vw,27px)/1.2 var(--display);letter-spacing:-.02em;color:var(--indigo);text-wrap:balance}
.bl-feat-go{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);color:var(--indigo)}
.bl-feat-go svg{width:16px;height:16px;transition:transform .3s}
.bl-feat:hover .bl-feat-go svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){ .bl-feat-k i{animation:none} }
/* topics and search stay in reach while scrolling */
.blog-tools{position:sticky;top:74px;z-index:20;margin:0 calc(var(--pad) * -1) 40px;padding:14px var(--pad);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
@media (max-width:720px){ .blog-tools{top:60px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .blog-tools::-webkit-scrollbar{display:none} .blog-tools .chips{flex-wrap:nowrap} .blog-tools .chips button{white-space:nowrap} .blog-tools .search{min-width:200px} }
/* the next three: open columns, no boxes */
.bl-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;margin-bottom:72px}
.bl-col,.bl-row{background:transparent !important;box-shadow:none !important;border-radius:0;padding:0}
.bl-pic,.bl-thumb{display:block;overflow:hidden;border-radius:16px;background:color-mix(in srgb,var(--tint) 12%,#fff)}
.bl-pic{aspect-ratio:16/10;margin-bottom:18px}
.bl-pic img,.bl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out)}
.bl-col:hover .bl-pic img,.bl-row:hover .bl-thumb img{transform:scale(1.05)}
.bl-pic .tcover,.bl-thumb .tcover{position:relative;inset:auto;height:100%}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--ink-3);margin-bottom:10px}
.bl-meta .cat{font-weight:600;color:var(--tint);filter:brightness(.8) saturate(1.2)}
.bl-col h3{font:600 clamp(19px,1.5vw,22px)/1.28 var(--display);letter-spacing:-.015em;text-wrap:balance}
.bl-col h3 a,.bl-row h3 a{color:var(--indigo);text-decoration:none;background-image:linear-gradient(var(--magenta),var(--magenta));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--out)}
.bl-col:hover h3 a,.bl-row:hover h3 a{background-size:100% 2px}
.bl-col p:not(.bl-meta){margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* the rest: a magazine list */
.bl-h{font-size:clamp(24px,2.2vw,32px);margin-bottom:8px}
.pgrid.bl-list{display:block;border-top:1px solid var(--line)}
.bl-row{display:grid !important;grid-template-columns:minmax(0,1fr) 220px;gap:20px 40px;align-items:center;padding:28px 0 !important;border-bottom:1px solid var(--line) !important}
.bl-row h3{font:600 clamp(20px,1.7vw,25px)/1.25 var(--display);letter-spacing:-.018em;max-width:34ch;text-wrap:balance}
.bl-row p:not(.bl-meta){margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:68ch}
.bl-thumb{aspect-ratio:4/3}
.pgrid.clip>.pcard:nth-child(n+10){display:none !important}
.pmore{margin-top:30px}
@media (max-width:900px){ .bl-cols{grid-template-columns:minmax(0,1fr);gap:34px} .bl-col{display:grid !important;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-items:start} .bl-col .bl-pic{grid-row:1/4;margin:0;aspect-ratio:1} .bl-col p:not(.bl-meta){grid-column:2} }
@media (max-width:600px){ .bl-row{grid-template-columns:minmax(0,1fr) 96px;gap:14px;padding:20px 0 !important} .bl-row p:not(.bl-meta){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bl-thumb{aspect-ratio:1;border-radius:12px} .bl-col{grid-template-columns:96px minmax(0,1fr)} .bl-col p:not(.bl-meta){display:none} }
/* archive: years as a compact index */
.archive{margin-top:84px;padding:40px 44px;border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.arch-year:first-of-type{border-top:0}
.arch-year a{font-size:15px}
.arch-year a:hover{color:var(--magenta)}
@media (max-width:600px){ .archive{padding:26px 20px} .arch-year{grid-template-columns:minmax(0,1fr);gap:8px} .arch-year ul{columns:1} .arch-year>b{font-size:30px} }
/* blog fixes: meta line as a row with a dot between topic and date; branded cover for posts without a picture */
.pcard .bl-meta{display:flex !important;-webkit-line-clamp:unset;overflow:visible;margin-bottom:10px}
.pcard .bl-meta .cat::after{content:"";display:inline-block;width:4px;height:4px;margin-left:12px;vertical-align:middle;border-radius:50%;background:var(--ink-3);opacity:.6}
.bl-pic .tcover,.bl-thumb .tcover,.bl-feat-pic .tcover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:18px 20px;color:#fff;background:linear-gradient(150deg,var(--tint,#3C2AA8) 0%,color-mix(in srgb,var(--tint,#3C2AA8) 45%,#19135C) 100%)}
.bl-pic .tcover b,.bl-feat-pic .tcover b{font-size:clamp(20px,1.7vw,26px);max-width:90%}
.bl-thumb .tcover{padding:12px}
.bl-thumb .tcover b{font-size:15px;max-width:100%}
.bl-thumb .tcover small,.bl-thumb .tcover svg{display:none}
@media (max-width:900px){ .bl-col .bl-pic .tcover,.bl-thumb .tcover{align-items:center;justify-content:center;padding:10px} .bl-col .bl-pic .tcover b,.bl-col .bl-pic .tcover small,.bl-thumb .tcover b{display:none} .bl-col .bl-pic .tcover svg,.bl-thumb .tcover svg{display:block;position:static;width:34px;height:34px} }
/* word reveal: room for the serif italic descenders and lean (g, p, y were clipped) */
.dw{padding:0 .14em .28em;margin:0 -.14em -.28em}
.ln,h1 .ln{padding:0 .14em .3em;margin:0 -.14em -.3em}
/* the header scrolls away, so the blog's topic bar sticks to the very top (it hung 74px down, with posts showing
   through the gap) and is solid enough that text doesn't show through it */
.blog-tools,.blog-tools{top:0}
@media (max-width:720px){ .blog-tools{top:0} }
.blog-tools{background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:0 10px 24px -20px rgba(25,19,92,.35)}

/* ---- live chat launcher (2026-10-18): real faces, a label, the brand gradient; hidden while the chat is open ---- */
.chat-launch{left:22px;bottom:22px}
.chat-btn{width:auto;height:auto;display:none;align-items:center;gap:12px;padding:7px 18px 7px 7px;border-radius:999px;background:linear-gradient(118deg,#E8136D 0%,#A2167A 45%,#3C2AA8 100%);background-size:160% 100%;color:#fff;text-align:left;box-shadow:0 18px 36px -16px rgba(60,42,168,.65),0 0 0 1px rgba(255,255,255,.15) inset;transition:transform .35s cubic-bezier(.3,1.4,.5,1),background-position .6s,box-shadow .3s,opacity .3s}
.chat-ready .chat-btn{display:inline-flex}
.chat-btn:hover{background:linear-gradient(118deg,#E8136D 0%,#A2167A 45%,#3C2AA8 100%);background-size:160% 100%;background-position:100% 0;transform:translateY(-3px)}
.chat-btn:focus-visible{outline:3px solid #FFC6DD;outline-offset:3px}
.cb-faces{position:relative;display:flex;flex:none}
.cb-faces img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 0;background:linear-gradient(165deg,#F1ECFB,#FADDEA);border:2px solid #fff}
.cb-faces img+img{margin-left:-12px}
.cb-dot{position:absolute;right:-1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#2BD67B;border:2px solid #fff}
.cb-txt{display:flex;flex-direction:column;line-height:1.2}
.cb-txt b{font:600 15px var(--sans)}
.cb-txt small{font:500 12px var(--sans);opacity:.82}
.cb-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:cbSpin .8s linear infinite}
.chat-btn.loading .cb-spin{display:block}
@keyframes cbSpin{to{transform:rotate(360deg)}}
.chat-open .chat-launch{opacity:0;pointer-events:none;transform:translateY(10px)}
.chat-launch{transition:opacity .3s,transform .3s}
@media (max-width:600px){ .chat-launch{left:12px;bottom:12px} .chat-btn{padding:5px 14px 5px 5px;gap:10px} .cb-faces img{width:32px;height:32px} .cb-faces img:nth-child(n+3){display:none} .cb-txt small{display:none} }
@media (prefers-reduced-motion:reduce){ .chat-btn,.chat-launch{transition:none} .cb-spin{animation:none} }

/* ---- Hungarian sweep fixes (2026-10-18; apply to every language) ---- */
/* side-by-side fields: inputs line up even when one label wraps to two lines */
.fgrid{align-items:end}
.fgrid>.field.full,.fgrid>fieldset{align-self:stretch}
/* the search icon is an outline, not a filled dot */
.search svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* steps: titles share a height, so the descriptions start level */
@media (min-width:901px){ .steps.static:not(.vert) h4{min-height:2.6em} }
/* charts and diagrams in a frame are shown whole */
.media .frame img[src*="chart" i],.media .frame img[src*="graph" i],.media .frame img[src*="diagram" i]{object-fit:contain}
/* phone breadcrumbs: the current page is shown on its own, with no connector left dangling when it wraps */
@media (max-width:600px){ .crumbs li:last-child:not(:first-child)::before{width:14px;margin:0 8px} .crumbs li:last-child [aria-current]{white-space:normal} .crumbs{row-gap:4px} }

/* ---- homepage hero on a phone (2026-10-19): one screen for the promise, then the photo as a card ---- */
@media (max-width:600px){
  #hero.hm{padding-top:96px}
  .hm-partner{gap:10px;margin-bottom:18px;font-size:13px}
  .hm-partner img{height:40px;margin:-4px 0}
  .hm h1{font-size:clamp(31px,8.6vw,36px);line-height:1.06;letter-spacing:-.025em;margin-bottom:16px}
  .hm .lead{font-size:16px;line-height:1.5;margin-bottom:22px}
  .hm .ctas{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .hm .ctas .btn{width:100%;justify-content:center;text-align:center;padding:16px 20px}
  .hm .ctas .tl{align-self:center;font-size:15px}
  .hm-note{margin-top:12px;font-size:13px;text-align:center}
  .hm-grid{gap:30px}
  /* the photo: a rounded card inside the page margins, the upgrade steps overlapping its lower edge */
  .hm-visual{margin:0;height:auto}
  .hm-photo{position:relative;height:auto;aspect-ratio:16/11;clip-path:none;border-radius:22px;overflow:hidden;box-shadow:0 26px 50px -30px rgba(18,13,69,.7)}
  .hm-photo .ph{background-position:55% 40%}
  .hm-steps{position:relative;left:auto;bottom:auto;width:auto;margin:-44px 14px 0;padding:14px 16px;border-radius:14px;animation:none}
  .hm-steps p{font-size:12px;margin-bottom:8px}
  .hm-steps ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hm-steps li{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.25}
  .hm-steps li span{width:24px;height:24px;font-size:12px}
  /* the proof row: smaller faces and numbers, labels on two lines at most */
  .hm-proof{margin-top:30px;padding:22px 0 34px;gap:18px}
  .hm-people{flex-direction:row;align-items:center;gap:12px}
  .hm-faces img{width:34px;height:34px}
  .hm-faces img+img{margin-left:-10px}
  .hm-faces img:nth-child(n+5){display:none}
  .hm-people p,.hm-people .tl{font-size:13.5px;line-height:1.45}
  .hm-stats{gap:10px}
  .hm-stats dt{font-size:24px}
  .hm-stats dd{font-size:12px;line-height:1.3;margin-top:4px}
}

/* ---- Black Friday page (2026-10-20, v2: sells the campaign; live countdown, ticker, flow, plan track) ---- */
/* hero: the dark campaign gradient, a slow magenta spotlight drifting across it */
.ph-hero.bf{background:linear-gradient(118deg,#0B0826 0%,#1C1250 40%,#4A1360 76%,#C3105F 130%);background-size:180% 180%}
.ph-hero.bf::after{content:"";position:absolute;width:62vw;height:62vw;max-width:900px;max-height:900px;left:38%;top:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,40,130,.34),rgba(255,40,130,0));pointer-events:none;animation:bfSpot 14s ease-in-out infinite alternate}
.ph-hero.bf .wrap{position:relative;z-index:1}
@keyframes bfSpot{0%{transform:translate(-18%,0) scale(.9)}100%{transform:translate(14%,18%) scale(1.1)}}
.ph-hero.bf h1 em{color:#FF5C9E}
.ph-hero.bf .lead .l2{display:block;margin-top:14px;font-size:.9em;color:rgba(255,255,255,.7)}
/* the countdown card and its floating chips */
.bfc-stage{position:relative;padding:18px 0}
.bfc{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);border-radius:26px;padding:28px 28px 22px;backdrop-filter:blur(8px);box-shadow:0 50px 90px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.bfc-k{display:flex;align-items:center;gap:10px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#FF8DBA}
.bfc-live{width:8px;height:8px;border-radius:50%;background:#FF3D8B;box-shadow:0 0 0 0 rgba(255,61,139,.7);animation:bfLive 1.8s ease-out infinite}
@keyframes bfLive{70%{box-shadow:0 0 0 9px rgba(255,61,139,0)}100%{box-shadow:0 0 0 0 rgba(255,61,139,0)}}
.bfc-t{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:8px;margin:16px 0 18px}
.bfc-u{display:flex;flex-direction:column;align-items:flex-start;padding:14px 12px 10px;border-radius:16px;background:rgba(8,6,30,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);overflow:hidden}
.bfc-u b{display:block;font:600 clamp(30px,3vw,44px)/1 var(--display);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.bfc-u.d b{font-size:clamp(44px,4.6vw,66px);background:linear-gradient(120deg,#fff 30%,#FF8DBA);-webkit-background-clip:text;background-clip:text;color:transparent}
.bfc-u span{margin-top:6px;font:500 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bfc-u b.flip{animation:bfFlip .45s var(--out)}
@keyframes bfFlip{0%{transform:translateY(-40%);opacity:0;filter:blur(3px)}100%{transform:none;opacity:1;filter:none}}
.bfc-d{list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.bfc-d li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;color:rgba(255,255,255,.82)}
.bfc-d li:last-child{border-bottom:0}
.bfc-d li b{color:#fff;font-weight:600;white-space:nowrap}
.bfc-d li.bfc-on b,.bfc-d li.bfc-on span{color:#FF8DBA}
.bfc-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:999px;background:#fff;color:var(--indigo);font:600 13.5px var(--display);white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,0,.55);animation:dFloat 5s ease-in-out infinite}
.bfc-chip svg{width:16px;height:16px;fill:none;stroke:var(--magenta);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bfc-chip.c1{top:-4px;right:-18px;rotate:5deg;background:var(--magenta);color:#fff;font-size:16px}
.bfc-chip.c1 svg{stroke:#fff}
.bfc-chip.c2{left:-34px;bottom:2px;animation-delay:-1.6s}
.bfc-chip.c3{top:-2px;left:34px;animation-delay:-3.1s}
/* ticker under the hero */
.bft{overflow:hidden;background:#0B0826;padding:22px 0 24px;border-top:1px solid rgba(255,255,255,.07)}
.bft-run{display:flex;align-items:center;width:max-content;animation:dMarq 42s linear infinite}
.bft span{padding:0 26px;font:600 clamp(26px,3.2vw,48px)/1 var(--display);letter-spacing:-.03em;color:#fff;white-space:nowrap}
.bft span.o{color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.5)}
.bft i{font-style:normal;font-size:clamp(14px,1.4vw,20px);color:#FF5C9E}
/* the opportunity: heading, flow, figures, closing line */
.bfs-sec{padding:100px 0 96px;background:var(--paper);overflow:hidden}
.bfs-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:56px}
.bfs-h{font-size:clamp(32px,3.4vw,52px);line-height:1.04;letter-spacing:-.03em;max-width:none}
.bfs-h em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
.bfs-in{font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.bff{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:64px}
.bff::before{content:"";position:absolute;left:28px;right:calc(33.333% - 28px);top:28px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.bff::after{content:"";position:absolute;top:24px;left:28px;width:10px;height:10px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 6px rgba(244,20,114,.15),0 0 22px 4px rgba(244,20,114,.45);animation:bfRun 4.6s var(--ease) infinite}
@keyframes bfRun{0%{left:28px;opacity:0}8%{opacity:1}46%{left:calc(33.333% + 20px)}54%{left:calc(33.333% + 20px)}92%{left:calc(66.666% + 12px);opacity:1}100%{left:calc(66.666% + 12px);opacity:0}}
.bff li{position:relative;display:grid;grid-template-columns:auto;gap:4px}
.bff-ico{display:grid;place-items:center;width:58px;height:58px;margin-bottom:14px;border-radius:18px;background:linear-gradient(140deg,#1C1250,#B3136A);color:#fff;box-shadow:0 18px 30px -16px rgba(179,19,106,.7);position:relative;z-index:1}
.bff-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bff b{font:600 21px/1.2 var(--display);color:var(--indigo);letter-spacing:-.015em}
.bff li>span:last-child{font-size:16px;color:var(--ink-2)}
.bfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.bfs-i{margin:0;padding:30px 28px 6px 0;border-right:1px solid var(--line)}
.bfs-i+.bfs-i{padding-left:28px}
.bfs-i:last-child{border-right:0}
.bfs-i b{display:block;font:600 clamp(48px,5vw,76px)/1 var(--display);letter-spacing:-.045em;background:linear-gradient(120deg,var(--indigo) 20%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.bfs-i figcaption span{display:block;margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink)}
.bfs-i small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.bfs-out{text-wrap:balance;margin:64px auto 0;max-width:30ch;text-align:center;font:600 clamp(26px,2.8vw,40px)/1.18 var(--display);letter-spacing:-.025em;color:var(--indigo)}
.bfs-out em{display:block;font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
@media (max-width:900px){ .bfs-top{grid-template-columns:minmax(0,1fr);align-items:start;margin-bottom:40px} }
@media (max-width:720px){
  .bfs-sec{padding:64px 0}
  .bff{grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:44px}
  .bff::before{left:28px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)}
  .bff::after{display:none}
  .bff li{grid-template-columns:58px minmax(0,1fr);column-gap:16px;align-items:center}
  .bff-ico{grid-row:span 2;margin:0}
  .bfs{grid-template-columns:minmax(0,1fr)}
  .bfs-i,.bfs-i+.bfs-i{border-right:0;border-bottom:1px solid var(--line);padding:22px 0}
  .bfs-out{margin-top:44px}
}
/* the list: four numbered groups, module chips, a quiet row for the EU rules */
.bfm-sec{padding:100px 0}
.bfm-head{max-width:820px;margin-bottom:44px}
.bfm-head h2{font-size:clamp(32px,3.4vw,52px);line-height:1.04;letter-spacing:-.03em}
.bfm-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
.bfm-head p{margin-top:16px;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.bfm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.bfm-g{position:relative;background:var(--paper);border-radius:24px;padding:28px 28px 16px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .35s,transform .35s var(--out)}
.js .bfm-g[data-r]{transition:opacity .9s var(--out),translate .9s var(--out),box-shadow .35s,transform .35s var(--out);transition-delay:calc(var(--gi)*.09s),calc(var(--gi)*.09s),0s,0s}
.bfm-g:hover{box-shadow:inset 0 0 0 1px var(--line),0 40px 70px -46px rgba(25,19,92,.45);transform:translateY(-3px)}
.bfm-g:has(input:checked){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--magenta) 45%,transparent),0 40px 70px -46px rgba(244,20,114,.4)}
.bfm-gh{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
.bfm-n{font:600 46px/.9 var(--display);letter-spacing:-.05em;background:linear-gradient(140deg,var(--indigo),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;flex:none;min-width:1.25em}
.bfm-k{display:flex;align-items:center;gap:8px;font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--magenta);margin-bottom:6px}
.bfm-ico{display:grid;place-items:center;width:22px;height:22px}
.bfm-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bfm-gh h3{font:600 clamp(20px,1.7vw,23px)/1.2 var(--display);color:var(--indigo);letter-spacing:-.02em}
.bfm ul,.bfm-x ul{list-style:none}
.bfm li,.bfm-x li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 14px;margin:0 -12px;padding:14px 12px;border-top:1px solid var(--line);border-radius:0;transition:background .25s}
.bfm li:has(input:checked),.bfm-x li:has(input:checked){background:linear-gradient(90deg,#FCEAF2,rgba(252,234,242,0) 85%);border-radius:14px;border-top-color:transparent}
.bfm li:has(input:checked)+li{border-top-color:transparent}
.bfm-it{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;cursor:pointer}
.bfm-it input{position:absolute;opacity:0;width:1px;height:1px}
.bfm-box{width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid color-mix(in srgb,var(--indigo) 35%,transparent);background:#fff;transition:background .2s,border-color .2s}
.bfm-it:hover .bfm-box{border-color:var(--magenta)}
.bfm-it input:checked+.bfm-box{background:var(--magenta) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.5 2.5L12 5.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;border-color:var(--magenta);animation:bfPop .35s var(--out)}
@keyframes bfPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
.bfm-it input:focus-visible+.bfm-box{outline:2px solid var(--magenta);outline-offset:2px}
.bfm-t b{display:block;font:600 16px/1.3 var(--display);color:var(--indigo)}
.bfm-t span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.bfm-more{font:600 13px var(--sans);color:var(--magenta);white-space:nowrap;padding-top:2px;text-decoration:none}
.bfm-more:hover{text-decoration:underline}
.bfm-mods{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding-left:36px;margin-top:6px}
.bfm-mod{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;background:#F3F0FB;color:var(--indigo);font:500 12.5px/1.2 var(--sans);text-decoration:none;transition:background .2s,color .2s,transform .2s var(--out)}
.bfm-mod>svg{width:13px;height:13px;fill:var(--magenta);flex:none;transition:fill .2s}
.bfm-mod em{display:inline-flex;align-items:center;gap:3px;margin-left:2px;font-style:normal;font-weight:600;color:var(--indigo)}
.bfm-mod em svg{width:11px;height:11px;fill:#F2A93B}
.bfm-mod em small{font-weight:400;color:var(--ink-3);font-size:11.5px}
.bfm-mod:hover{background:var(--indigo);color:#fff;transform:translateY(-1px)}
.bfm-mod:hover>svg{fill:#FF8DBA}
.bfm-mod:hover em,.bfm-mod:hover em small{color:#fff}
.bfm-x{margin-top:26px;padding:22px 28px 10px;border-radius:22px;border:1.5px dashed color-mix(in srgb,var(--indigo) 20%,transparent)}
.bfm-xh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bfm-xi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#EFEAFB;color:var(--indigo);flex:none}
.bfm-xi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bfm-xh p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.bfm-xh b{font:600 16px var(--display);color:var(--indigo);margin-right:4px}
.bfm-x ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
.bfm-x li{margin:0;padding:14px 0;grid-template-columns:minmax(0,1fr)}
.bfm-x li .bfm-more{display:none}
.bfm-x .bfm-t b{font-size:14.5px}
.bfm-x .bfm-t span{font-size:13.5px}
.bfm-x .bfm-mods{padding-left:36px}
.bfm-bar{position:sticky;bottom:18px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px auto 0;max-width:560px;padding:10px 10px 10px 24px;border-radius:999px;background:linear-gradient(110deg,#120D45,#3B1460);color:#fff;box-shadow:0 24px 50px -20px rgba(18,13,69,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.bfm-bar[hidden]{display:none}
.bfm-bar p{font-size:15px}
.bfm-bar b{font:600 22px var(--display);margin-right:4px;color:#FF8DBA}
.bfm-bar.bump{animation:bfBump .4s var(--out)}
@keyframes bfBump{40%{transform:scale(1.04)}}
@media (max-width:1100px){ .bfm-x ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .bfm{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){
  .bfm-sec{padding:64px 0}
  .bfm-g{padding:22px 18px 8px;border-radius:20px}
  .bfm-n{font-size:36px}
  .bfm-k .bfm-ico{display:none}
  .sec.bf-req{padding:64px 0}
  .bfm li{grid-template-columns:minmax(0,1fr);margin:0 -8px;padding:14px 8px}
  .bfm-more{padding-left:36px}
  .bfm-x{padding:18px 18px 6px}
  .bfm-x ul{grid-template-columns:minmax(0,1fr)}
  .bfm-bar{left:12px;right:12px;bottom:12px;padding-left:18px}
  .bfm-bar .btn{padding-left:16px;padding-right:16px;font-size:14px}
}
/* the plan: working backwards, five steps on a track, "you are here" on the first */
.bfp-sec{padding:100px 0}
.bfp-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:70px}
.bfp-head h2{font-size:clamp(32px,3.4vw,52px);line-height:1.04;letter-spacing:-.03em}
.bfp-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
.bfp-head p{font-size:17px;line-height:1.6;color:var(--ink-2)}
.bfp-note{margin-top:12px;padding-left:14px;border-left:2px solid var(--magenta);font-size:15px !important;color:var(--ink) !important}
.bfp{position:relative;list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:28px}
.bfp::before,.bfp::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:2px}
.bfp::before{background:var(--line)}
.bfp::after{background:linear-gradient(90deg,var(--magenta),#7A2BD6 70%,var(--indigo));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .2s}
.bfp.in::after{transform:none}
.bfp li{position:relative;padding-top:38px}
.js .bfp li{opacity:0;translate:0 16px;transition:opacity .8s var(--out),translate .8s var(--out);transition-delay:calc(var(--i)*.14s + .3s)}
.bfp.in li{opacity:1;translate:none}
.bfp-dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--indigo)}
.bfp li.now .bfp-dot{background:var(--magenta);border-color:var(--magenta)}
.bfp li.now .bfp-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--magenta);animation:wkPulse 2s ease-out infinite}
.bfp li.bfp-hl .bfp-dot{background:var(--indigo);box-shadow:0 0 0 5px rgba(25,19,92,.12)}
.bfp-here{position:absolute;left:-6px;top:-38px;padding:4px 10px;border-radius:999px;background:var(--magenta);color:#fff;font:600 11.5px var(--sans);letter-spacing:.04em;white-space:nowrap}
.bfp-w{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.bfp-w b{font:600 clamp(17px,1.4vw,20px)/1.15 var(--display);color:var(--indigo);letter-spacing:-.015em}
.bfp-w span{padding:3px 9px;border-radius:999px;background:#F3F0FB;color:var(--magenta);font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.bfp li.bfp-hl .bfp-w span{background:var(--magenta);color:#fff}
.bfp h3{font:600 17px/1.3 var(--display);color:var(--indigo);margin-bottom:8px;letter-spacing:-.01em}
.bfp li>p:last-child{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:1100px){ .bfp{gap:20px} }
@media (max-width:900px){
  .bfp-head{grid-template-columns:minmax(0,1fr);align-items:start;margin-bottom:44px}
  .bfp{grid-template-columns:minmax(0,1fr);gap:30px}
  .bfp::before,.bfp::after{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .bfp::after{transform:scaleY(0);transform-origin:top}
  .bfp.in::after{transform:none}
  .bfp li{padding:0 0 0 38px}
  .bfp-dot{top:3px}
  .bfp-here{position:static;display:inline-block;margin-bottom:8px}
}
@media (max-width:600px){ .bfp-sec{padding:64px 0} }
/* the request: dark, like the hero; the form card stays light */
.sec.bf-req{padding:110px 0;background:linear-gradient(140deg,#0B0826 0%,#1C1250 50%,#4A1360 100%);color:#fff;position:relative;overflow:hidden}
.sec.bf-req::before{content:"";position:absolute;width:700px;height:700px;left:-220px;bottom:-320px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,40,130,.28),rgba(255,40,130,0));pointer-events:none;animation:subGlow 16s ease-in-out infinite alternate}
.sec.bf-req .wrap{position:relative;z-index:1}
.bf-req .form-aside h2{color:#fff;font-size:clamp(30px,3vw,46px);line-height:1.06}
.bf-req .form-aside h2 em{color:#FF8DBA}
.bf-req .form-aside .lead{color:rgba(255,255,255,.86);margin-bottom:18px}
.bf-req .bf-note{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.66)}
.bf-req .prose{max-width:none}
.bf-req .contact-list{border-top-color:rgba(255,255,255,.16)}
.bf-req .contact-list li{border-bottom-color:rgba(255,255,255,.12)}
.bf-req .contact-list span{color:rgba(255,255,255,.55)}
.bf-req .contact-list a,.bf-req .contact-list b{color:#fff}
.bf-req .contact-list a:hover{color:#FF8DBA}
.bf-req .form-card{box-shadow:0 60px 100px -50px rgba(0,0,0,.7)}
.bf-req .form-card>p{margin:-6px 0 22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.bf-picked{margin-top:26px;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bf-picked p{font:600 13px var(--sans);color:#FF8DBA;margin-bottom:10px}
.bf-picked ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.bf-picked li{margin:0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font:500 13.5px var(--sans);color:#fff;animation:bfPop .35s var(--out)}
.bf-picked li::before{display:none}
.bf-picked[hidden]{display:none}
.bfs-h,.bfm-head h2,.bfp-head h2,.bfm-gh h3,.bf-req .form-aside h2,.bfp h3{text-wrap:balance}
/* phones */
@media (max-width:600px){
  .ph-hero.bf h1{font-size:clamp(31px,8.6vw,36px);line-height:1.06}
  .ph-hero.bf .lead{font-size:16px;line-height:1.5}
  .ph-hero.bf .ph-visual,.ph-hero.bf .ph-aside{margin-top:28px}
  .bfc{padding:22px 18px 16px;border-radius:22px}
  .bfc-t{gap:6px}
  .bfc-u{padding:12px 9px 9px;border-radius:13px}
  .bfc-u b{font-size:26px}
  .bfc-u.d b{font-size:38px}
  .bfc-u span{font-size:10.5px}
  .bfc-d li{font-size:14px;padding:10px 0}
  .bfc-chip.c1{right:6px;top:0}
  .bfc-chip.c2{display:none}
  .bfc-chip.c3{top:auto;left:auto;right:18px;bottom:-10px}
  .bft{padding:16px 0 18px}
}
@media (prefers-reduced-motion:reduce){
  .ph-hero.bf::after,.sec.bf-req::before,.bft-run,.bff::after,.bfc-chip,.bfc-live,.bfp li.now .bfp-dot::after{animation:none}
}

/* ---- Black Friday: the buyer's journey (2026-10-20, v3) ---- */
/* hero: who answers, and since when */
.bf-trust{display:flex;align-items:center;gap:14px;margin-top:30px}
.bf-faces{display:flex;flex:none}
.bf-faces img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid #1C1250;background:#2A1F6B}
.bf-faces img+img{margin-left:-10px}
.bf-trust p{font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);max-width:44ch}
/* where are you starting from? */
.bfw-sec{padding:100px 0 90px}
.bfw-head{max-width:760px;margin-bottom:40px}
.bfw-head h2{font-size:clamp(32px,3.4vw,52px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.bfw-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--magenta)}
.bfw-head p{margin-top:14px;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.bfw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bfw-c{position:relative;display:flex;flex-direction:column;padding:28px 28px 26px;border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .35s,transform .35s var(--out)}
.js .bfw-c[data-r]{transition:opacity .9s var(--out),translate .9s var(--out),box-shadow .35s,transform .35s var(--out);transition-delay:calc(var(--i)*.1s),calc(var(--i)*.1s),0s,0s}
.bfw-c:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 44px 70px -44px rgba(25,19,92,.45)}
.bfw-c.on{box-shadow:inset 0 0 0 2px var(--magenta),0 44px 70px -44px rgba(244,20,114,.45)}
.bfw-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.bfw-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#1C1250,#B3136A);color:#fff}
.bfw-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bfw-k{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--magenta)}
.bfw-c h3{font:500 clamp(22px,1.9vw,27px)/1.2 var(--serif);font-style:italic;color:var(--indigo);letter-spacing:-.01em;text-wrap:balance}
.bfw-p{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.bfw-lh{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.bfw-l{list-style:none;margin:10px 0 22px;display:grid;gap:8px}
.bfw-l li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.bfw-l li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#FCE4EF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2L11.5 5.6' fill='none' stroke='%23F41472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.bfw-b{margin-top:auto;width:100%;justify-content:center;background:transparent;color:var(--indigo);box-shadow:inset 0 0 0 1.5px var(--indigo);border-radius:999px}
.bfw-b:hover{background:var(--indigo);color:#fff}
.bfw-b .on{display:none}
.bfw-c.on .bfw-b{background:var(--magenta);color:#fff;box-shadow:none}
.bfw-c.on .bfw-b .off{display:none}
.bfw-c.on .bfw-b .on{display:inline}
.bfm li.flash{animation:bfFlash 1.6s var(--out)}
@keyframes bfFlash{0%{box-shadow:0 0 0 0 rgba(244,20,114,.5)}30%{box-shadow:0 0 0 6px rgba(244,20,114,.18)}100%{box-shadow:0 0 0 0 rgba(244,20,114,0)}}
@media (max-width:1000px){ .bfw{grid-template-columns:minmax(0,1fr);max-width:620px} }
@media (max-width:600px){ .bfw-sec{padding:64px 0} .bfw-c{padding:22px 20px} }
/* what shop owners say */
.bfq-sec{padding:96px 0 90px;background:linear-gradient(150deg,#120D45,#2A1360 60%,#3E1260);color:#fff;overflow:hidden}
.bfq-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.bfq-head h2{color:#fff;font-size:clamp(30px,3.2vw,48px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.bfq-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:#FF8DBA}
.bfq-stat{padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bfq-r{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.bfq-r b{font:600 40px/1 var(--display);letter-spacing:-.04em}
.bfq-stars{display:flex;gap:3px}
.bfq-stars svg{width:18px;height:18px;fill:#F2A93B}
.bfq-stat p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.bfq-stat .bfq-sub{margin-top:6px;font-size:13px;color:rgba(255,255,255,.55)}
.bfq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bfq-i{position:relative;margin:0;padding:30px 28px 26px;border-radius:22px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column}
.js .bfq-i[data-r]{transition-delay:calc(var(--i)*.12s)}
.bfq-mark{position:absolute;top:6px;right:22px;font:400 96px/1 var(--serif);color:rgba(255,141,186,.35)}
.bfq-i blockquote{margin:0;font:400 17px/1.55 var(--sans);color:rgba(255,255,255,.92)}
.bfq-i figcaption{margin-top:auto;padding-top:18px;font:600 14px var(--display);color:#FF8DBA}
@media (max-width:900px){ .bfq-head{grid-template-columns:minmax(0,1fr);align-items:start} .bfq{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .bfq-sec{padding:64px 0} }
/* the request: what happens next, who reads it */
.bf-next{list-style:none;counter-reset:bfn;margin:6px 0 26px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.bf-next li{counter-increment:bfn;position:relative;display:grid;gap:2px;padding:14px 0 14px 46px;border-bottom:1px solid rgba(255,255,255,.1)}
.bf-next li::before{content:counter(bfn);position:absolute;left:0;top:13px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,141,186,.16);color:#FF8DBA;font:600 14px var(--display)}
.bf-next b{font:600 16px/1.3 var(--display);color:#fff}
.bf-next span{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.68)}
.bf-readers{display:flex;align-items:center;gap:14px;margin:24px 0 16px}
.bf-readers .bf-faces img{width:46px;height:46px;border-color:#24145A}
.bf-readers .bf-faces img+img{margin-left:-12px}
.bf-readers p{display:grid;gap:2px}
.bf-readers small{font-size:12.5px;color:rgba(255,255,255,.55)}
.bf-readers b{font:600 16px var(--display);color:#fff}
.bf-req .bf-picked{margin:0 0 6px}
@media (prefers-reduced-motion:reduce){ .bfm li.flash{animation:none} }
.bf-req .prose .bf-next,.bf-req .prose .bf-picked ul{padding-left:0}
.bf-req .prose .bf-next li+li{margin-top:0}
.bf-req .prose b{background:none;color:#fff}
.bfw-b{border:0}
.bfq-i{padding-top:58px}
.bfq-mark{top:8px;left:24px;right:auto;font-size:84px;color:rgba(255,141,186,.5)}
.sec.bfq-sec{padding:100px 0 96px}
.sec.bfw-sec{padding:100px 0 90px}
@media (max-width:600px){ .sec.bfq-sec,.sec.bfw-sec{padding:64px 0} }
/* .ro: why it's easier with the team that already knows the store */
.bfy-head{max-width:820px;margin-bottom:46px}
.bfy-head h2{color:#fff;font-size:clamp(30px,3.2vw,48px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.bfy-head h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:#FF8DBA}
.bfy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.14)}
.bfy-i{padding:30px 26px 8px 0;border-right:1px solid rgba(255,255,255,.1)}
.bfy-i+.bfy-i{padding-left:26px}
.bfy-i:last-child{border-right:0}
.js .bfy-i[data-r]{transition-delay:calc(var(--i)*.1s)}
.bfy-ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:14px;background:rgba(255,141,186,.14);color:#FF8DBA}
.bfy-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bfy-i h3{font:600 19px/1.25 var(--display);color:#fff;letter-spacing:-.015em;margin-bottom:10px;text-wrap:balance}
.bfy-i p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}
@media (max-width:1000px){ .bfy{grid-template-columns:repeat(2,minmax(0,1fr))} .bfy-i:nth-child(2){border-right:0} .bfy-i:nth-child(3){padding-left:0} .bfy-i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)} }
@media (max-width:600px){ .bfy{grid-template-columns:minmax(0,1fr)} .bfy-i,.bfy-i+.bfy-i{padding:24px 0 6px;border-right:0} .bfy-i+.bfy-i{border-top:1px solid rgba(255,255,255,.1)} }

/* ---- Mailchimp module download page (2026-10-20): Mailchimp's colours, Cavendish yellow and Peppercorn ---- */
body:has(.ph-hero.mc){--mc-y:#FFE01B;--mc-k:#241C15;--mc-cream:#FBF8EE;--magenta:#241C15;--indigo:#241C15}
/* header and hero: dark type on the yellow */
body:has(.ph-hero.mc) .site-head .mainnav>a,body:has(.ph-hero.mc) .site-head .dd-t,body:has(.ph-hero.mc) .site-head .lang>summary,body:has(.ph-hero.mc) .site-head .lang summary,body:has(.ph-hero.mc) .site-head .menu-btn{color:var(--mc-k)}
body:has(.ph-hero.mc) .site-head .mainnav>a::after,body:has(.ph-hero.mc) .site-head .dd-t::after{background:var(--mc-k)}
body:has(.ph-hero.mc) .site-head .btn{border-color:var(--mc-k);color:var(--mc-k)}
body:has(.ph-hero.mc) .site-head .btn:hover{background:var(--mc-k);color:var(--mc-y)}
body:has(.ph-hero.mc) .site-head .brand img{filter:brightness(0)}
body:has(.ph-hero.mc) .site-head .menu-btn i,body:has(.ph-hero.mc) .site-head .menu-btn i::before,body:has(.ph-hero.mc) .site-head .menu-btn i::after{background:var(--mc-k)}
.ph-hero.mc{background:var(--mc-y);animation:none;color:var(--mc-k)}
.ph-hero.mc .hm-orbs i{background:rgba(36,28,21,.05)!important;border-color:transparent!important}
.ph-hero.mc h1{color:var(--mc-k)}
.ph-hero.mc h1 em{color:var(--mc-k)}
.ph-hero.mc .lead{color:rgba(36,28,21,.82)}
.ph-hero.mc .crumbs,.ph-hero.mc .crumbs a{color:rgba(36,28,21,.7)}
.ph-hero.mc .crumbs a:hover,.ph-hero.mc .crumbs [aria-current]{color:var(--mc-k)}
.ph-hero.mc .crumbs li+li::before{background:repeating-linear-gradient(90deg,rgba(36,28,21,.4) 0 2px,transparent 2px 6px)}
.ph-hero.mc .crumbs .node{border-color:rgba(36,28,21,.5)}
.ph-hero.mc .crumbs [aria-current] .node{background:var(--mc-k);border-color:var(--mc-k);box-shadow:0 0 0 5px rgba(36,28,21,.1)}
.mc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:6px}
.btn.mc-dl{gap:12px;padding:20px 30px;border-radius:999px;background:var(--mc-k);color:#fff;font:600 17px/1 var(--display);box-shadow:0 18px 36px -18px rgba(36,28,21,.7);transition:transform .25s var(--out),box-shadow .25s,background .25s}
.btn.mc-dl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.mc-dl:hover{transform:translateY(-2px);box-shadow:0 24px 40px -18px rgba(36,28,21,.8);background:#000;color:#fff}
.ph-hero.mc .tl{color:var(--mc-k);background-image:linear-gradient(var(--mc-k),var(--mc-k)),linear-gradient(rgba(36,28,21,.35),rgba(36,28,21,.35))}
.mc-meta{margin-top:18px;font-size:14px;color:rgba(36,28,21,.72)}
/* the module card in the hero: the sync rows fill one after another, over and over */
.mcc{position:relative;max-width:440px;margin-left:auto;padding:26px 26px 20px;border-radius:24px;background:#fff;box-shadow:0 2px 0 var(--mc-k),0 40px 70px -36px rgba(36,28,21,.55);border:2px solid var(--mc-k);rotate:1.5deg;animation:dFloat 7s ease-in-out infinite}
.mcc-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #EFE9D7}
.mcc-logo{display:grid;place-items:center;width:110px;height:48px;padding:0 8px;border-radius:12px;background:var(--mc-y)}
.mcc-logo img{width:100%;height:auto}
.mcc-top div{display:grid;gap:2px;min-width:0}
.mcc-top b{font:600 17px var(--display);color:var(--mc-k)}
.mcc-top small{font-size:12.5px;color:#6B635A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcc-ok{margin-left:auto;padding:5px 10px;border-radius:999px;background:#E3F5E1;color:#1E7A35;font:600 12px var(--sans);white-space:nowrap}
.mcc-rows{list-style:none;display:grid;gap:12px;margin:18px 0 14px}
.mcc-rows li{display:grid;grid-template-columns:110px minmax(0,1fr) 18px;align-items:center;gap:12px;font-size:14px;color:var(--mc-k)}
.mcc-rows i{display:block;height:8px;border-radius:8px;background:#F2EDDC;overflow:hidden}
.mcc-rows em{display:block;height:100%;width:0;border-radius:8px;background:var(--mc-k);animation:mcFill 9s var(--ease) infinite;animation-delay:calc(var(--i)*.55s)}
.mcc-rows li b{color:#1E7A35;opacity:0;animation:mcTick 9s ease infinite;animation-delay:calc(var(--i)*.55s)}
@keyframes mcFill{0%{width:0}22%{width:100%}88%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes mcTick{0%,18%{opacity:0;transform:scale(.5)}24%{opacity:1;transform:scale(1.15)}28%,88%{opacity:1;transform:none}100%{opacity:0}}
.mcc-foot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6B635A}
.mcc-foot::before{content:"";width:8px;height:8px;border-radius:50%;background:#2DB44F;box-shadow:0 0 0 0 rgba(45,180,79,.6);animation:bfLive 1.8s ease-out infinite}
/* section heads: a yellow marker under the italic words */
.mc-head{max-width:820px;margin-bottom:48px}
.mc-head h2,.mcr-l h2{font-size:clamp(32px,3.4vw,50px);line-height:1.05;letter-spacing:-.03em;color:var(--mc-k);text-wrap:balance}
.mc-head h2 em,.mcr-l h2 em,.mc-req .form-aside h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--mc-k);background:linear-gradient(transparent 58%,var(--mc-y) 58%,var(--mc-y) 92%,transparent 92%);padding:0 .08em}
.mc-head p{margin-top:16px;font-size:17.5px;line-height:1.6;color:#57504A}
/* what it syncs */
.sec.mcs-sec{padding:100px 0;background:#fff}
.mcs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--mc-k)}
.mcs li{padding:28px 24px 30px 0;border-bottom:1px solid #E8E2D2}
.mcs li:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid #E8E2D2}
.js .mcs li[data-r]{transition-delay:calc(var(--i)*.06s)}
.mcs-ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:50%;background:var(--mc-y);color:var(--mc-k)}
.mcs-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mcs h3{font:600 18px/1.25 var(--display);color:var(--mc-k);margin-bottom:8px}
.mcs p{font-size:15px;line-height:1.55;color:#57504A}
/* installing: dark, yellow numbers */
.sec.mct-sec{padding:100px 0;background:var(--mc-k);color:#fff}
.mct-sec .mc-head h2{color:#fff}
.mct-sec .mc-head h2 em{color:var(--mc-k)}
.mct-sec .mc-head p{color:rgba(255,255,255,.72)}
.mct{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.mct li{position:relative;padding-top:78px}
.mct li::before{content:"";position:absolute;left:64px;right:-28px;top:27px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,224,27,.45) 0 6px,transparent 6px 12px)}
.mct li:last-child::before{display:none}
.js .mct li[data-r]{transition-delay:calc(var(--i)*.12s)}
.mct-n{position:absolute;left:0;top:0;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mc-y);color:var(--mc-k);font:700 24px var(--display)}
.mct h3{font:600 20px/1.25 var(--display);color:#fff;margin-bottom:10px}
.mct p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.74)}
.mct .mct-path{margin-top:12px;display:inline-flex;flex-wrap:wrap;gap:4px;padding:7px 12px;border-radius:10px;background:rgba(255,224,27,.1);box-shadow:inset 0 0 0 1px rgba(255,224,27,.35);font:600 12.5px var(--sans);color:var(--mc-y)}
.mct-path span{color:rgba(255,224,27,.6)}
.mct-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.mct-tips p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.mct-tips b{color:var(--mc-y)}
.mct-cta{margin-top:48px}
.mct-sec .btn.mc-dl{background:var(--mc-y);color:var(--mc-k);box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
.mct-sec .btn.mc-dl:hover{background:#fff;color:var(--mc-k)}
/* what you need + who builds it */
.sec.mcr-sec{padding:100px 0;background:var(--mc-cream)}
.mcr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 72px;align-items:start}
.mcr-l dl{margin-top:30px;border-top:2px solid var(--mc-k)}
.mcr-l dl div{display:grid;grid-template-columns:10em minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid #E5DEC8}
.mcr-l dt{font:600 15px var(--display);color:#6B635A}
.mcr-l dd{font:600 19px/1.3 var(--display);color:var(--mc-k)}
.mcr-r{padding:30px;border-radius:24px;background:#fff;border:2px solid var(--mc-k);box-shadow:6px 6px 0 var(--mc-k)}
.mcr-badge{display:block;width:200px;height:auto;margin-bottom:20px}
.mcr-r h3{font:600 22px/1.2 var(--display);color:var(--mc-k);margin-bottom:10px}
.mcr-r p{font-size:15.5px;line-height:1.6;color:#57504A;margin-bottom:16px}
.mcr-r .tl{color:var(--mc-k)}
/* the setup offer: back on the yellow */
.sec.mc-req{padding:100px 0;background:var(--mc-y)}
.mc-req .form-aside h2{color:var(--mc-k)}
.mc-req .form-aside .lead{color:rgba(36,28,21,.82)}
.mc-req .form-card{border:2px solid var(--mc-k);box-shadow:8px 8px 0 var(--mc-k)}
.mc-req .btn.pri{background:var(--mc-k);color:#fff;border-radius:999px}
.mc-req .form-card>p{margin:-6px 0 20px;font-size:15px;color:#57504A}
body:has(.ph-hero.mc) .d-foot{background:var(--mc-k);animation:none}
body:has(.ph-hero.mc) .faq summary:hover{color:#57504A}
@media (max-width:1100px){ .mcs{grid-template-columns:repeat(2,minmax(0,1fr))} .mcs li:not(:nth-child(4n+1)){padding-left:0;border-left:0} .mcs li:nth-child(2n){padding-left:24px;border-left:1px solid #E8E2D2} .mct{grid-template-columns:repeat(2,minmax(0,1fr))} .mct li:nth-child(2n)::before{display:none} }
@media (max-width:900px){ .mcr{grid-template-columns:minmax(0,1fr)} .mct-tips{grid-template-columns:minmax(0,1fr);gap:14px} .mcc{margin:0 auto} }
@media (max-width:600px){
  .sec.mcs-sec,.sec.mct-sec,.sec.mcr-sec,.sec.mc-req{padding:64px 0}
  .mcs{grid-template-columns:minmax(0,1fr)} .mcs li,.mcs li:nth-child(2n){padding:22px 0;border-left:0}
  .mct{grid-template-columns:minmax(0,1fr);gap:30px} .mct li::before{display:none} .mct li{padding:0 0 0 76px} .mct-n{top:-4px}
  .mcr-l dl div{grid-template-columns:minmax(0,1fr);gap:4px}
  .btn.mc-dl{width:100%;justify-content:center}
  .mcc{rotate:0deg;padding:20px 18px 16px}
  .mcc-rows li{grid-template-columns:96px minmax(0,1fr) 16px;font-size:13.5px}
  .mcc-logo{width:92px;height:42px}
}
@media (prefers-reduced-motion:reduce){ .mcc,.mcc-foot::before{animation:none} .mcc-rows em{animation:none;width:100%} .mcc-rows li b{animation:none;opacity:1} }
.mct-sec .mc-head h2 em{background:var(--mc-y);padding:0 .14em .04em;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body:has(.ph-hero.mc) .d-foot .hm-orbs i{background:rgba(255,255,255,.04)!important;border-color:transparent!important}
.mc-addons{display:flex;align-items:center;gap:10px;margin-top:22px;padding:12px 16px;max-width:560px;border-radius:14px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(36,28,21,.18);font-size:14.5px;line-height:1.45;color:var(--mc-k)}
.mc-addons svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the explainer film on the Mailchimp page */
.sec.mcv-sec{padding:96px 0 90px;background:var(--mc-cream)}
.mcv-frame{position:relative;border-radius:26px;overflow:hidden;border:3px solid var(--mc-k);box-shadow:10px 10px 0 var(--mc-k);background:var(--mc-k);aspect-ratio:16/9}
.mcv-frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--mc-y)}
.mcv-meta{margin-top:22px;font-size:15px;color:#57504A}
@media (max-width:600px){ .sec.mcv-sec{padding:64px 0} .mcv-frame{border-radius:16px;box-shadow:6px 6px 0 var(--mc-k)} }
/* Black Friday: the campaign film */
.sec.bfv-sec{padding:96px 0;background:linear-gradient(160deg,#0B0826,#1C1250 60%,#3B1460);color:#fff}
.bfv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 64px;align-items:center}
.bfv-copy h2{color:#fff;font-size:clamp(30px,3vw,46px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.bfv-copy h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:#FF8DBA}
.bfv-copy p{margin-top:14px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78)}
.bfv-copy .bfv-meta{font-size:14px;color:rgba(255,255,255,.55)}
.bfv-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#0B0826;box-shadow:0 50px 90px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12)}
.bfv-frame video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){ .bfv{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .sec.bfv-sec{padding:64px 0} .bfv-frame{border-radius:16px} }
/* Mailchimp page: FREE, front and centre */
.mcc-wrap{position:relative;max-width:440px;margin-left:auto}
.mcc-wrap .mcc{margin-left:0;max-width:none}
.mcc-free{position:absolute;z-index:3;left:-168px;top:112px;width:156px;height:156px;display:grid;place-items:center;transform:rotate(-12deg);animation:mcFree 4s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(36,28,21,.35))}
.mcc-free svg{position:absolute;inset:0;width:100%;height:100%}
.mcc-free polygon{fill:#241C15;stroke:#241C15;stroke-width:2;stroke-linejoin:round}
.mcc-free span{position:relative;display:grid;justify-items:center;line-height:1;color:#FFE01B}
.mcc-free b{font-family:var(--display);font-weight:800;letter-spacing:.02em}
.mcc-free small{margin-top:6px;font:700 17px var(--display);color:#241C15;background:#fff;padding:3px 10px;border-radius:999px}
@keyframes mcFree{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-8deg) scale(1.05)}}
.ph-hero.mc h1 em{display:block;font-size:1.04em}
.mcr-l dl div:last-child dd{justify-self:start;padding:4px 16px;border-radius:999px;background:var(--mc-y);font-weight:800}
@media (max-width:900px){ .mcc-wrap{margin:0 auto} }
@media (max-width:1100px){ .mcc-wrap{padding-top:104px} .mcc-free{left:auto;right:14px;top:-2px;width:124px;height:124px} }
@media (max-width:600px){ .mcc-free{width:116px;height:116px} .mcc-free b{transform:scale(.74)} .mcc-free small{font-size:14px} }
@media (prefers-reduced-motion:reduce){ .mcc-free{animation:none} }
/* standalone landing pages: logo left, language switch right, at every width (there's no menu panel to hold it) */
.site-head.bare .lang{display:block;margin-left:auto}