/* Serann Marketing colour layer: one accent colour next to black and platinum, dark tone by default,
   richer cards and sections, and the tabbed "What we do" stage. Accent and tone are set on <html> (data-acc, data-tone). */
html{--acc:#8E7CFF;--acc2:#CFC7FF;--acc-d:#5A45E0;--acc-rgb:142,124,255;--acc-on:#0B0B0C}
html[data-acc=jade]{--acc:#2FD9A2;--acc2:#B4F5DE;--acc-d:#0B8A63;--acc-rgb:47,217,162}
html[data-acc=ember]{--acc:#FF6B3D;--acc2:#FFC6B0;--acc-d:#D4421A;--acc-rgb:255,107,61}
html[data-acc=platinum]{--acc:#8E7CFF;--acc2:#F1F2F4;--acc-d:#5A45E0;--acc-rgb:201,206,214}

/* accent into every place the site used platinum */
html body #ssx{--a:var(--acc-d)!important}
html body #ssx .cta,html body #ssx .hd:not(.is-solid),html body #ssx .hero-stage,html body #ssx .hero,html body #ssx .phero,html body #ssx .scn,html body #ssx .ft,
html body #ssx .dark-band,html body #ssx .pc.rec,html body #ssx .pk,html body #ssx .pkg .box,html body #ssx .w30-band,html body #ssx .glb-sec{--a:var(--acc)!important}

/* ---------- dark tone (default) ---------- */
html:not([data-tone=light]) body #ssx{--bg:#08080A;--bg2:#111114;--bg3:#19191D;--ink:#F4F3EF;--ink2:#B4B2AC;--muted:#86847E;--line:rgba(244,243,239,.08);--line2:rgba(244,243,239,.16);
  --paper:#0D0D10;--pink:#F4F3EF;--pink2:#B4B2AC;--pline:rgba(244,243,239,.13);--adeep:var(--acc);--a:var(--acc)!important;background:#08080A;color:var(--ink)}
html:not([data-tone=light]) body{background:#08080A}
html:not([data-tone=light]) body #ssx .hd.is-solid{background:rgba(8,8,10,.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(244,243,239,.07)}
html:not([data-tone=light]) body #ssx .kpi,html:not([data-tone=light]) body #ssx .chart{background:#111114}
html:not([data-tone=light]) body #ssx .pk-dim{background:#08080A}
html:not([data-tone=light]) body #ssx .light{box-shadow:none;border-top:1px solid rgba(244,243,239,.07)}
html:not([data-tone=light]) body #ssx .light .em{color:inherit}

/* sections turn into lit blocks: soft accent light, alternating panels */
html:not([data-tone=light]) body #ssx main>.sec:not(.glb-sec):not(.film):not(.light){background:
  radial-gradient(40% 45% at 88% 22%,rgba(var(--acc-rgb),.09),transparent 72%),
  radial-gradient(36% 50% at 0% 100%,rgba(var(--acc-rgb),.06),transparent 70%)}
html:not([data-tone=light]) body #ssx main>.sec-t:nth-of-type(even),html:not([data-tone=light]) body #ssx main>#services{margin:0 clamp(10px,1.4vw,20px);border-radius:clamp(28px,4vw,56px);
  background:radial-gradient(60% 70% at 100% 0%,rgba(var(--acc-rgb),.13),transparent 65%),radial-gradient(50% 60% at 0% 100%,rgba(var(--acc-rgb),.07),transparent 70%),linear-gradient(180deg,#101013,#0B0B0D);
  border:1px solid rgba(244,243,239,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html:not([data-tone=light]) body #ssx main>.sec-t:nth-of-type(even)+.sec-t,html:not([data-tone=light]) body #ssx main>.sec-t:nth-of-type(even)+.cta{margin-top:clamp(10px,1.4vw,20px)}
html[data-tone=light] body #ssx main>.sec:not(.glb-sec):not(.film):not(.light){background:radial-gradient(40% 55% at 95% 0%,rgba(var(--acc-rgb),.10),transparent 72%)}

/* ---------- type ---------- */
html body #ssx .sec .em,html body #ssx .phero .em,html body #ssx .cta .em,html body #ssx .ft .em,html body #ssx .film .em,html body #ssx .glb-sec .em{
  background:linear-gradient(100deg,#F4F3EF 0%,var(--acc2) 38%,var(--acc) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
html body #ssx .sec .em *,html body #ssx .phero .em *,html body #ssx .cta .em *,html body #ssx .glb-sec .em *{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-tone=light] body #ssx .sec:not(.light):not(.film):not(.glb-sec) .em{background:linear-gradient(100deg,var(--acc-d),color-mix(in srgb,var(--acc-d) 60%,var(--acc)));-webkit-background-clip:text;background-clip:text;color:transparent}
html body #ssx .pill::before{background:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16),0 0 14px rgba(var(--acc-rgb),.7)}
html body #ssx .kpi4 .hl b{background:linear-gradient(100deg,var(--acc2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
html body #ssx .link:hover{border-color:var(--acc)}

/* ---------- buttons: accent, text optically centred ---------- */
html body #ssx .btn.mag,html body #ssx .cta .btn.mag,html body #ssx .hd .btn.mag,html body #ssx .hd:not(.is-solid) .btn.mag,html body #ssx .mnav .btn{background:var(--acc);color:var(--acc-on);
  box-shadow:0 12px 34px -12px rgba(var(--acc-rgb),.75),inset 0 1px 0 rgba(255,255,255,.35)}
html body #ssx .btn.mag:hover{box-shadow:0 16px 44px -10px rgba(var(--acc-rgb),.9),inset 0 1px 0 rgba(255,255,255,.4)}
html:not([data-tone=light]) body #ssx .btn.ghost{border-color:rgba(244,243,239,.2);color:#F4F3EF}

/* ---------- cards: glass, accent edge light, spotlight ---------- */
html:not([data-tone=light]) body #ssx :is(.box,.lk,.mi,.kpi,.sim-in,.t-in){
  background:radial-gradient(480px circle at var(--mx,-999px) var(--my,-999px),rgba(var(--acc-rgb),.16),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 60%),#0F0F12;
  border:1px solid rgba(244,243,239,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 70px -46px rgba(0,0,0,.9)}
html[data-tone=light] body #ssx :is(.box,.lk,.mi){background:radial-gradient(480px circle at var(--mx,-999px) var(--my,-999px),rgba(var(--acc-rgb),.12),transparent 42%),#fff}
html body #ssx :is(.box,.lk,.mi){position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.16,.84,.24,1),border-color .4s,box-shadow .5s}
html body #ssx :is(.box,.lk,.mi)::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(145deg,rgba(var(--acc-rgb),.85),rgba(var(--acc-rgb),.0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.4;transition:opacity .45s}
html body #ssx :is(.box,.lk,.mi):hover::after{opacity:1}
html body #ssx .box:hover{transform:translateY(-4px)}
html:not([data-tone=light]) body #ssx :is(.box,.lk,.mi):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 80px -40px rgba(var(--acc-rgb),.28)}
html body #ssx .lk:hover .go{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
html body #ssx .box .k,html body #ssx .lk .k,html body #ssx .mi .when,html body #ssx .pi .n,html body #ssx .wk .k{color:var(--a)}
html body #ssx .mi::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.9),transparent);opacity:.55;transition:opacity .4s}
html body #ssx .mi:hover::before{opacity:1}
html body #ssx .pi{transition:background .4s}
html:not([data-tone=light]) body #ssx .pi:hover{background:linear-gradient(90deg,rgba(var(--acc-rgb),.07),transparent 70%)}
html body #ssx .wk-line b{background:linear-gradient(90deg,var(--acc),var(--acc2))}
html body #ssx .faq summary:hover{color:var(--a)}
html body #ssx .chips-l a:hover{border-color:var(--acc);color:var(--ink)}
html body #ssx .sm-clocks i.open{background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}
html body #ssx .glb-legend button.on,html body #ssx .glb-legend button:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
html body #ssx .sim-bar .c3{background:linear-gradient(180deg,var(--acc2),var(--acc))}
html body #ssx .sim-big b{background:linear-gradient(100deg,#F4F3EF,var(--acc2) 45%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
html body #ssx input[type=range].sm-r::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--acc) var(--p),var(--line2) var(--p))}
html body #ssx input[type=range].sm-r::-moz-range-progress{background:var(--acc)}
html body #ssx input[type=range].sm-r::-webkit-slider-thumb{border-color:var(--acc)}
html body #ssx .sim-cur button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
html body #ssx .ixp a:hover .go{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
html body #ssx .ixp-card .st b{background:linear-gradient(100deg,var(--acc2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- What we do: tabbed stage ---------- */
#ssx .svs{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,3.4vw,56px);align-items:start}
#ssx .svs-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
#ssx .svs-tab{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:clamp(18px,1.9vw,26px) 0;color:var(--muted);cursor:pointer;font:inherit;transition:color .4s}
#ssx .svs-tab .n{font:500 12px/2.6 var(--f-m);letter-spacing:.14em;color:var(--muted);transition:color .4s}
#ssx .svs-tab .cat{display:block;font:600 clamp(22px,2.3vw,34px)/1.1 var(--f-d);letter-spacing:-.035em;transition:color .4s,transform .5s cubic-bezier(.16,.84,.24,1)}
#ssx .svs-tab .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,.84,.24,1),opacity .4s;opacity:0}
#ssx .svs-tab .d>span{overflow:hidden;display:block;font:400 16px/1.5 var(--f-body);color:var(--ink2);padding-top:0;transition:padding .55s}
#ssx .svs-tab:hover{color:var(--ink2)}
#ssx .svs-tab:hover .cat{transform:translateX(6px)}
#ssx .svs-tab.on{color:var(--ink)}
#ssx .svs-tab.on .n{color:var(--acc)}
#ssx .svs-tab.on .d{grid-template-rows:1fr;opacity:1}
#ssx .svs-tab.on .d>span{padding-top:10px}
#ssx .svs-tab .pr{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
#ssx .svs-tab .pr b{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px rgba(var(--acc-rgb),.8)}
#ssx .svs-tab.on .pr b{transform:scaleX(var(--p,0))}
#ssx .svs-tab:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}
#ssx .svs-stage{position:relative;min-width:0;position:sticky;top:110px}
#ssx .svs-glow{position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 60% 40%,rgba(var(--acc-rgb),.22),transparent 70%);filter:blur(30px)}
#ssx .svs-panel{display:flex;flex-direction:column;gap:18px;animation:svs-in .7s cubic-bezier(.16,.84,.24,1)}
#ssx .svs-panel[hidden]{display:none}
@keyframes svs-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
#ssx .svs-cap{display:none}
#ssx .svs-cap .n{font:500 12px/1.4 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
#ssx .svs-cap h3{margin:8px 0 0;font:600 22px/1.2 var(--f-d);letter-spacing:-.025em;color:var(--ink)}
#ssx .svs-panel .pn-f b{white-space:nowrap}
#ssx .svs-panel .scn{box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(var(--acc-rgb),.18)}
#ssx .svs-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
#ssx .svs-foot p{margin:0;max-width:52ch;color:var(--ink2);font-size:15.5px;line-height:1.55}
#ssx .svs-foot .link{flex:none}
@media (max-width:980px){
  #ssx .svs{grid-template-columns:minmax(0,1fr)}
  #ssx .svs-stage{position:relative;top:0}
  #ssx .svs-nav{flex-direction:row;overflow-x:auto;gap:8px;border:0;padding-bottom:6px;scrollbar-width:none;margin:0 calc(-1*var(--gut,20px));padding-left:var(--gut,20px);padding-right:var(--gut,20px)}
  #ssx .svs-nav::-webkit-scrollbar{display:none}
  #ssx .svs-tab{flex:none;width:auto;display:flex;gap:8px;align-items:center;border:1px solid var(--line2);border-radius:999px;padding:10px 16px 10px}
  #ssx .svs-tab .n{line-height:1}
  #ssx .svs-tab .cat{font:500 15px/1 var(--f-body);letter-spacing:0;white-space:nowrap}
  #ssx .svs-tab:hover .cat{transform:none}
  #ssx .svs-tab .d,#ssx .svs-tab .pr{display:none}
  #ssx .svs-tab.on{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
  #ssx .svs-tab.on .n{color:var(--acc-on)}
  #ssx .svs-cap{display:block}
  #ssx .svs-foot{flex-direction:column;align-items:flex-start}
}


/* ---------- packages page: glass cards in the dark tone ---------- */
html:not([data-tone=light]) body #ssx .pc:not(.rec),html:not([data-tone=light]) body #ssx .pc-trust{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 60%),#0F0F12;border-color:rgba(244,243,239,.08)}
html:not([data-tone=light]) body #ssx .pc:not(.rec):hover{border-color:rgba(var(--acc-rgb),.5);box-shadow:0 50px 80px -40px rgba(var(--acc-rgb),.3)}
html:not([data-tone=light]) body #ssx .pc:not(.rec) h3,html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-time,html:not([data-tone=light]) body #ssx .pc-trust b,html:not([data-tone=light]) body #ssx .pc-unsure a{color:#F4F3EF}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-promise,html:not([data-tone=light]) body #ssx .pc-trust span,html:not([data-tone=light]) body #ssx .pc-unsure{color:#B4B2AC}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-inc li{color:#E6E4DE}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-best{background:rgba(255,255,255,.04);color:#F4F3EF;border:1px solid rgba(255,255,255,.06)}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-best span,html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-lab,html:not([data-tone=light]) body #ssx .pc-fee{color:#8A8882}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-lab{border-top-color:rgba(255,255,255,.08)}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .pc-who{color:var(--acc)}
html:not([data-tone=light]) body #ssx .pc-logos img{background:#F4F3EF;border-color:transparent}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .btn.ghost{background:transparent;color:#F4F3EF;border:1px solid rgba(244,243,239,.22)}
html:not([data-tone=light]) body #ssx .pc:not(.rec) .btn.ghost:hover{background:#F4F3EF;color:#0B0B0C}
html:not([data-tone=light]) body #ssx .pc.rec{background:radial-gradient(120% 70% at 100% 0%,rgba(var(--acc-rgb),.35),transparent 60%),linear-gradient(180deg,#1A1630,#0E0D16);border-color:rgba(var(--acc-rgb),.55);box-shadow:0 50px 90px -40px rgba(var(--acc-rgb),.45)}
html:not([data-tone=light]) body #ssx .pc-trust i{background:var(--acc);color:#0B0B0C}

/* ---------- city calendar: interactive year line ---------- */
#ssx .yr{position:relative;margin-bottom:28px;padding:clamp(18px,2.2vw,30px);border-radius:24px;border:1px solid var(--line);
  background:radial-gradient(70% 120% at 0% 0%,rgba(var(--acc-rgb),.10),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),#0E0E11;overflow:hidden}
#ssx .yr-m{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-bottom:1px solid var(--line);padding-bottom:12px}
#ssx .yr-m span{font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#ssx .yr-rows{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:14px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/12));background-size:100% 100%}
#ssx .yr-ev{position:relative;display:block;height:38px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:var(--ink2)}
#ssx .yr-ev i{position:absolute;top:13px;left:var(--l);width:var(--w);height:12px;border-radius:999px;background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.5),0 0 18px rgba(var(--acc-rgb),.45);opacity:.78;transform-origin:left;transition:opacity .35s,box-shadow .35s,transform 1.1s cubic-bezier(.16,.84,.24,1)}
#ssx .yr-ev span{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:baseline;gap:10px;white-space:nowrap;transition:color .3s}
#ssx .yr-ev.r span{left:calc(var(--l) + var(--w) + 12px)}
#ssx .yr-ev.l span{right:calc(100% - var(--l) + 12px);flex-direction:row-reverse}
#ssx .yr-ev b{font:600 15px/1 var(--f-d);letter-spacing:-.01em;color:var(--ink)}
#ssx .yr-ev em{font:500 11px/1 var(--f-m);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#ssx .yr-ev:hover i,#ssx .yr-ev.hot i,#ssx .yr-ev:focus-visible i{opacity:1;box-shadow:0 0 0 1px rgba(var(--acc-rgb),.9),0 0 28px rgba(var(--acc-rgb),.85)}
#ssx .yr-ev:hover b,#ssx .yr-ev.hot b{color:var(--acc2)}
#ssx .yr-ev:focus-visible{outline:none}
#ssx .yr.pre .yr-ev i{transform:scaleX(0)}
#ssx .yr-now{position:absolute;top:0;bottom:0;left:var(--now,-10%);width:1px;background:linear-gradient(180deg,transparent,#F4F3EF 20%,#F4F3EF 80%,transparent);opacity:.55;pointer-events:none}
#ssx .yr-now span{position:absolute;top:-2px;left:6px;font:500 10px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:#F4F3EF}
#ssx .mi.hot{transform:translateY(-4px)}
#ssx .mi.hot::after{opacity:1}
@media (max-width:760px){
  #ssx .yr{padding:16px 14px}
  #ssx .yr-m span{font-size:9px;letter-spacing:0;text-align:center}
  #ssx .yr-ev{height:46px}
  #ssx .yr-ev i{top:6px;height:9px}
  #ssx .yr-ev span,#ssx .yr-ev.r span,#ssx .yr-ev.l span{top:auto;bottom:4px;transform:none;left:0;right:auto;flex-direction:row}
  #ssx .yr-ev b{font-size:13.5px}
  #ssx .yr-ev em{display:none}
}

/* ---------- kinetic platform band ---------- */
#ssx .mq{position:relative;overflow:hidden;padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#ssx .mq-t{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);width:max-content;will-change:transform}
#ssx .mq .w{font:600 clamp(34px,5.4vw,84px)/1 var(--f-d);letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(244,243,239,.28);transition:color .4s,-webkit-text-stroke-color .4s}
#ssx .mq .w.f{color:transparent;background:linear-gradient(100deg,#F4F3EF,var(--acc2) 45%,var(--acc));-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}
#ssx .mq i{font-style:normal;font-size:clamp(16px,2vw,28px);color:var(--acc);text-shadow:0 0 16px rgba(var(--acc-rgb),.8)}
#ssx .mq:hover .w:not(.f){-webkit-text-stroke-color:rgba(244,243,239,.55)}

/* gradient text: give every clipped box room for descenders (g, j, p, q, y) so nothing is cut at the bottom */
html body #ssx .em .wi,html body #ssx .em .w{padding-top:.08em;padding-bottom:.2em;margin-top:-.08em;margin-bottom:-.2em}
html body #ssx .kpi4 .hl b,html body #ssx .sim-big b,html body #ssx .ixp-card .st b,html body #ssx .mq .w.f{padding-bottom:.18em;margin-bottom:-.18em}

/* ---------- WOW layer: living light in heroes and CTAs, scroll progress ---------- */
.sm-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:2147483400;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px rgba(var(--acc-rgb),.9);pointer-events:none}
html body #ssx .phero{isolation:isolate}
html body #ssx .phero::before,html body #ssx .cta::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.9;
  background:radial-gradient(30% 35% at calc(var(--hx,70%) + 0%) calc(var(--hy,30%) + 0%),rgba(var(--acc-rgb),.30),transparent 70%),
    radial-gradient(25% 30% at 20% 80%,rgba(var(--acc-rgb),.16),transparent 70%),radial-gradient(22% 28% at 85% 85%,rgba(120,90,255,.12),transparent 70%);
  animation:sm-aurora 18s ease-in-out infinite alternate;transition:background-position .6s}
@keyframes sm-aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.06)}100%{transform:translate3d(2%,-2%,0) scale(1.02)}}
html body #ssx .phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(244,243,239,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,243,239,.05) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask:radial-gradient(60% 70% at var(--hx,70%) var(--hy,30%),#000,transparent 75%);mask:radial-gradient(60% 70% at var(--hx,70%) var(--hy,30%),#000,transparent 75%)}
html body #ssx .cta{isolation:isolate;overflow:hidden}
html body #ssx .cta::after{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;z-index:-1;pointer-events:none;transform:translate(-50%,-50%);opacity:.35;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(var(--acc-rgb),.55) 80%,transparent 90%);animation:sm-spin 14s linear infinite;-webkit-mask:radial-gradient(closest-side,transparent 55%,#000 56%,#000 57%,transparent 58%);mask:radial-gradient(closest-side,transparent 55%,#000 56%,#000 57%,transparent 58%)}
@keyframes sm-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
html body #ssx .cta h2{font-size:clamp(40px,6vw,104px);line-height:1;letter-spacing:-.045em}
html body #ssx .cta .btn.mag{min-height:64px;padding:0 34px;font-size:18px;animation:sm-glow 2.4s ease-in-out infinite}
@keyframes sm-glow{0%,100%{box-shadow:0 12px 34px -12px rgba(var(--acc-rgb),.75),0 0 0 0 rgba(var(--acc-rgb),.45),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 16px 44px -10px rgba(var(--acc-rgb),.95),0 0 0 12px rgba(var(--acc-rgb),0),inset 0 1px 0 rgba(255,255,255,.35)}}
.cta-live{display:flex;width:max-content;max-width:100%;align-items:center;gap:10px;margin:18px 0 0;padding:8px 14px 8px;border-radius:999px;border:1px solid rgba(244,243,239,.14);background:rgba(255,255,255,.04);font:500 13px/1 var(--f-d);color:#d9d7d1}
.cta-live i,.desk-dot{width:8px;height:8px;border-radius:50%;background:#7c7a74;flex:none}
.cta-live.open i,.desk.open .desk-dot{background:#4cd08a;box-shadow:0 0 0 0 rgba(76,208,138,.6);animation:sm-pulse 2s infinite}
@keyframes sm-pulse{0%{box-shadow:0 0 0 0 rgba(76,208,138,.55)}100%{box-shadow:0 0 0 10px rgba(76,208,138,0)}}
@media (prefers-reduced-motion:reduce){html body #ssx .phero::before,html body #ssx .cta::before,html body #ssx .cta::after,html body #ssx .cta .btn.mag{animation:none}}

/* ---------- contact: live desk ---------- */
#ssx .desk{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,32px);border-radius:28px;border:1px solid rgba(244,243,239,.1);
  background:radial-gradient(120% 80% at 100% 0%,rgba(var(--acc-rgb),.22),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),#0F0F12;box-shadow:0 60px 120px -50px rgba(var(--acc-rgb),.45),inset 0 1px 0 rgba(255,255,255,.08)}
#ssx .desk-top{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#d9d7d1}
#ssx .desk-clock{display:flex;align-items:baseline;gap:14px}
#ssx .desk-clock b{font:600 clamp(64px,7vw,112px)/.9 var(--f-d);letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:linear-gradient(100deg,#F4F3EF,var(--acc2) 55%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
#ssx .desk-clock span{font:500 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:#8A8882}
#ssx .desk-line{margin:0;color:#c9c7c1;font-size:16px;line-height:1.5}
#ssx .desk-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
#ssx .desk-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(var(--acc-rgb),.6)}
#ssx .desk-who b{display:block;font-size:15px;color:#F4F3EF}#ssx .desk-who span{font-size:13px;color:#8A8882}
#ssx .desk-mail{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#ssx .desk-mail a{color:#F4F3EF;font-weight:500;font-size:15.5px}
#ssx .desk-copy{min-height:34px;padding:6px 14px 6px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.5);background:transparent;color:var(--acc2);font:500 13px/1 var(--f-d);cursor:pointer}
#ssx .desk-copy.ok{background:var(--acc);color:#0B0B0C}

/* ---------- contact: brief builder ---------- */
#ssx .bsec{padding-top:clamp(40px,5vw,80px)}
#ssx .bt{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:clamp(20px,3vw,48px);align-items:start}
#ssx .bt-rail{position:sticky;top:120px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
#ssx .bt-rail li{display:flex;align-items:center;gap:12px;color:#6f6d68;font:500 14px/1.2 var(--f-d);transition:color .4s}
#ssx .bt-rail li i{font:500 11px/1 var(--f-m);font-style:normal;letter-spacing:.1em;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(244,243,239,.14);transition:all .4s}
#ssx .bt-rail li.on{color:#F4F3EF}#ssx .bt-rail li.on i{border-color:var(--acc);color:#0B0B0C;background:var(--acc);box-shadow:0 0 18px rgba(var(--acc-rgb),.6)}
#ssx .bt-rail li.done{color:#B4B2AC}#ssx .bt-rail li.done i{border-color:rgba(var(--acc-rgb),.6);color:var(--acc2)}
#ssx .bt-rail .bt-bar{display:none}
#ssx .bt-form{position:relative;padding:clamp(24px,3vw,44px);border-radius:32px;border:1px solid rgba(244,243,239,.09);
  background:radial-gradient(90% 60% at 0% 0%,rgba(var(--acc-rgb),.10),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),#0E0E11;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 60px 100px -60px rgba(0,0,0,.9)}
#ssx .bt-form .h3x{margin:14px 0 28px;font:600 clamp(28px,3vw,44px)/1.05 var(--f-d);letter-spacing:-.035em;color:#F4F3EF}
#ssx .bt-step{border:0;margin:0;padding:0;min-width:0;animation:bt-in .55s cubic-bezier(.16,.84,.24,1)}
#ssx .bt-step[hidden]{display:none}
@keyframes bt-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
#ssx .bt-step legend{padding:0;font:600 clamp(20px,1.8vw,26px)/1.2 var(--f-d);letter-spacing:-.02em;color:#F4F3EF}
#ssx .bt-sub{margin:8px 0 20px;color:#8A8882;font-size:15px}
#ssx .bt-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#ssx .bt-tile{position:relative;display:flex;align-items:center;gap:12px;padding:14px 44px 14px 14px;border-radius:18px;border:1px solid rgba(244,243,239,.1);background:rgba(255,255,255,.025);cursor:pointer;transition:border-color .3s,background .3s,transform .3s}
#ssx .bt-tile:hover{border-color:rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
#ssx .bt-tile input{position:absolute;opacity:0;pointer-events:none}
#ssx .bt-ic{width:40px;height:40px;border-radius:12px;background:#F4F3EF;display:grid;place-items:center;flex:none}
#ssx .bt-ic img{width:24px;height:24px;object-fit:contain}#ssx .bt-ic i{font-style:normal;font-weight:700;color:#0B0B0C}
#ssx .bt-t{font:500 15px/1.25 var(--f-d);color:#E6E4DE}
#ssx .bt-ck{position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid rgba(244,243,239,.25);transition:all .3s}
#ssx .bt-tile:has(input:checked){border-color:var(--acc);background:linear-gradient(135deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.04));box-shadow:0 0 0 1px rgba(var(--acc-rgb),.4),0 20px 40px -24px rgba(var(--acc-rgb),.7)}
#ssx .bt-tile:has(input:checked) .bt-ck{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.3l2 2L8 3' fill='none' stroke='%230B0B0C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--acc)}
#ssx .bt-tile:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
#ssx .bt-cur{display:flex;gap:6px;margin:18px 0 26px}
#ssx .bt-cur button{min-height:38px;padding:7px 14px 7px;border-radius:999px;border:1px solid rgba(244,243,239,.16);background:transparent;color:#B4B2AC;font:500 14px/1 var(--f-d);cursor:pointer}
#ssx .bt-cur button.on{background:var(--acc);border-color:var(--acc);color:#0B0B0C}
#ssx .bt-val{display:block;font:600 clamp(30px,3.6vw,54px)/1.05 var(--f-d);letter-spacing:-.04em;background:linear-gradient(100deg,#F4F3EF,var(--acc2) 50%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;margin-bottom:14px}
#ssx .bt-stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:8px;font:500 11px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#6f6d68}
#ssx .bt-stops span{text-align:center}#ssx .bt-stops span:first-child{text-align:left}#ssx .bt-stops span:last-child{text-align:right}
#ssx .bt-stops span.on{color:var(--acc2)}
#ssx .bt-hint{margin-top:28px;padding:18px 20px;border-radius:18px;border:1px solid rgba(var(--acc-rgb),.3);background:rgba(var(--acc-rgb),.07)}
#ssx .bt-hint span{display:block;font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:8px}
#ssx .bt-hint p{margin:0;color:#E6E4DE;font-size:16px;line-height:1.55}
#ssx .bt-step .fld{margin-top:18px}
#ssx .bt-lab{margin:20px 0 10px;font:600 11px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:#8A8882}
#ssx .bt-chips{display:flex;flex-wrap:wrap;gap:8px}
#ssx .bt-chip input{position:absolute;opacity:0;pointer-events:none}
#ssx .bt-chip span{display:inline-flex;min-height:40px;align-items:center;padding:8px 16px 8px;border-radius:999px;border:1px solid rgba(244,243,239,.16);color:#d9d7d1;font:500 14px/1 var(--f-d);cursor:pointer;transition:all .25s}
#ssx .bt-chip span:hover{border-color:rgba(var(--acc-rgb),.6)}
#ssx .bt-chip input:checked+span{background:var(--acc);border-color:var(--acc);color:#0B0B0C}
#ssx .bt-chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
#ssx .bt-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#ssx .bt-err{min-height:22px;margin:16px 0 0;color:#ff9a8a;font-size:14.5px}
#ssx .bt-nav{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
#ssx .bt-kbd{font:500 12px/1 var(--f-m);letter-spacing:.06em;color:#6f6d68;margin-left:6px}
#ssx .bt-done{text-align:left;animation:bt-in .7s cubic-bezier(.16,.84,.24,1)}
#ssx .bt-done[hidden]{display:none}
#ssx .bt-tick svg{width:72px;height:72px}
#ssx .bt-tick circle{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:bt-draw .8s .1s ease forwards}
#ssx .bt-tick path{fill:none;stroke:#F4F3EF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:bt-draw .5s .7s ease forwards}
@keyframes bt-draw{to{stroke-dashoffset:0}}
#ssx .bt-done h3{margin:18px 0 8px;font:600 clamp(32px,3.6vw,52px)/1 var(--f-d);letter-spacing:-.04em;color:#F4F3EF}
#ssx .bt-done>p{color:#c9c7c1;font-size:17px;margin:0 0 26px}
#ssx .bt-next3{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#ssx .bt-next3 li{padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#B4B2AC;font-size:15px;line-height:1.5}
#ssx .bt-next3 b{display:block;color:var(--acc2);font:600 12px/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
#ssx .bt-sum{position:sticky;top:120px;display:flex;flex-direction:column;gap:0;padding:22px;border-radius:24px;border:1px solid rgba(244,243,239,.09);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),#0D0D10}
#ssx .bt-sum-k{font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:14px}
#ssx .bt-sum-r{display:flex;flex-direction:column;gap:5px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
#ssx .bt-sum-r span{font-size:12.5px;color:#7c7a74}
#ssx .bt-sum-r b{font:500 15px/1.4 var(--f-d);color:#E6E4DE;transition:color .3s}
#ssx .bt-sum-r b.flash{animation:bt-flash .8s ease}
@keyframes bt-flash{0%{color:var(--acc2)}100%{color:#E6E4DE}}
#ssx .bt-meter{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#ssx .bt-meter i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
#ssx .bt-meter i b{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px rgba(var(--acc-rgb),.8);transition:width .6s cubic-bezier(.16,.84,.24,1)}
#ssx .bt-meter span{font:500 11px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#7c7a74}
@media (max-width:1100px){#ssx .bt{grid-template-columns:minmax(0,1fr) 280px}#ssx .bt-rail{display:none}}
@media (max-width:820px){#ssx .bt{grid-template-columns:minmax(0,1fr)}#ssx .bt-sum{position:relative;top:0;order:2}#ssx .bt-tiles{grid-template-columns:minmax(0,1fr)}#ssx .bt-stops span{font-size:9px;letter-spacing:0}#ssx .bt-kbd{display:none}}
#ssx .bt [hidden]{display:none!important}
#ssx .bsec{padding-top:0!important}

/* mobile menu: everything fits, starts at the top, scrolls if the screen is short; the Get in touch button is always reachable */
html body #ssx .mnav{justify-content:flex-start;gap:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:92px var(--gut,20px) calc(28px + env(safe-area-inset-bottom))}
html body #ssx .mnav a:not(.btn){font-size:clamp(26px,7.6vw,40px);line-height:1.1;padding:13px 0;flex:none}
html body #ssx .mnav .btn{margin-top:24px;flex:none;align-self:stretch;justify-content:center;min-height:56px}
@media (max-height:640px){html body #ssx .mnav a:not(.btn){font-size:24px;padding:9px 0 10px}}

/* home hero on phones: the dot wave stays, but the text below sits on a glass card so it reads cleanly; platform logos in equal tiles */
@media (max-width:760px){
  html body #ssx .hero canvas{opacity:.55}
  html body #ssx .hero-low{position:relative;gap:22px;margin-top:34px;padding:22px 18px 20px;border:1px solid rgba(244,243,239,.1);border-radius:26px;
    background:linear-gradient(180deg,rgba(18,17,24,.82),rgba(10,10,12,.9));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(var(--acc-rgb),.08),inset 0 1px 0 rgba(255,255,255,.06)}
  html body #ssx .hero-low::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.9),transparent)}
  html body #ssx .stack{gap:12px}
  html body #ssx .stack .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  html body #ssx .stack .logos img{width:100%;height:auto;aspect-ratio:1;max-width:48px;padding:9px;box-sizing:border-box;object-fit:contain;border-radius:13px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
  html body #ssx .stack .who{font-size:14px}
  html body #ssx .hero-lead p{font-size:15.5px;line-height:1.6;margin:0 0 18px}
  html body #ssx .hero-lead .btn{width:100%;justify-content:center;min-height:56px}
}

/* =====================================================================
   MOBILE AND TABLET SYSTEM
   ===================================================================== */
/* footer CTA card (all sizes) */
html body #ssx .ft-box{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:24px;border:1px solid rgba(244,243,239,.1);
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--acc-rgb),.24),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),#0F0F12;box-shadow:0 40px 80px -50px rgba(var(--acc-rgb),.5)}
html body #ssx .ft-k{font:600 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--acc2)}
html body #ssx .ft-h{font:600 clamp(22px,2vw,28px)/1.1 var(--f-d);letter-spacing:-.03em;color:#F4F3EF}
html body #ssx .ft-p{margin:0;font-size:14.5px;line-height:1.5;color:#B4B2AC}
html body #ssx .ft-box .cta-live{margin:2px 0 4px}
html body #ssx .ft-box .btn{margin-top:4px}
html body #ssx .ft-mail{font-size:14.5px;color:#d9d7d1;border-bottom:1px solid rgba(244,243,239,.25);padding:8px 0 4px}
html body #ssx .ft-mail:hover{color:#fff;border-color:var(--acc)}

/* bigger tap targets everywhere */
html body #ssx .faq summary{min-height:56px;display:flex;align-items:center}
html body #ssx .ft-bot nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
html body #ssx .ft .proof{display:inline-flex;align-items:center;min-height:40px}
html body #ssx a.link{min-height:44px}

/* swipe rows (turned on by JS below 761px) */
html body #ssx .m-swipe{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin-left:calc(-1*var(--gut,20px));margin-right:calc(-1*var(--gut,20px));
  padding:4px var(--gut,20px) 8px;scroll-padding-left:var(--gut,20px)}
html body #ssx .m-swipe::-webkit-scrollbar{display:none}
html body #ssx .m-swipe>*{flex:0 0 84%!important;max-width:84%!important;scroll-snap-align:start;margin:0!important}
html body #ssx .m-swipe.narrow>*{flex-basis:72%!important;max-width:72%!important}
html body #ssx .m-dots{display:flex;justify-content:center;gap:6px;margin:14px 0 0}
html body #ssx .m-dots i{width:6px;height:6px;border-radius:6px;background:rgba(244,243,239,.22);transition:width .35s cubic-bezier(.16,.84,.24,1),background .35s}
html body #ssx .m-dots i.on{width:22px;background:var(--acc)}
html body #ssx .m-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 11px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#7c7a74}
html body #ssx .m-hint::after{content:"→";color:var(--acc2);animation:m-nudge 1.6s ease-in-out infinite}
@keyframes m-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}

/* footer accordions (turned on by JS below 761px) */
html body #ssx .m-acc{border-top:1px solid rgba(244,243,239,.1)}
html body #ssx .m-acc>h4{margin:0!important;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:56px;font:600 13px/1 var(--f-d)!important;letter-spacing:.08em;color:#F4F3EF!important}
html body #ssx .m-acc>h4::after{content:"";width:10px;height:10px;border-right:1.5px solid var(--acc2);border-bottom:1.5px solid var(--acc2);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s}
html body #ssx .m-acc.open>h4::after{transform:rotate(225deg) translate(-3px,-3px)}
html body #ssx .m-acc>ul,html body #ssx .m-acc>.fl{display:grid!important;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .45s cubic-bezier(.16,.84,.24,1)}
html body #ssx .m-acc>ul>*,html body #ssx .m-acc>.fl>*{min-height:0}
html body #ssx .m-acc .m-acc-in{min-height:0;display:flex;flex-direction:column;gap:0;padding:0}
html body #ssx .m-acc.open>ul,html body #ssx .m-acc.open>.fl{grid-template-rows:1fr}
html body #ssx .m-acc .m-acc-in a{display:flex;align-items:center;min-height:42px;font-size:15px;color:#c9c7c1}
html body #ssx .m-acc .m-acc-in li{list-style:none}

/* sticky mobile CTA (shown by JS after the hero, hidden near the footer and on /contact/) */
.m-cta{position:fixed;left:12px;right:12px;max-width:560px;margin:0 auto;bottom:calc(12px + env(safe-area-inset-bottom));z-index:2147483300;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;
  background:rgba(16,15,22,.82);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(244,243,239,.12);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9),0 0 0 1px rgba(142,124,255,.12);transform:translateY(140%);transition:transform .5s cubic-bezier(.16,.84,.24,1);font-family:'Geist','Geist Fallback',system-ui,sans-serif}
.m-cta.on{transform:none}
.m-cta .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.m-cta .t b{font:600 14px/1.15 'Geist','Geist Fallback',system-ui,sans-serif;color:#F4F3EF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cta .t span{display:flex;align-items:center;gap:6px;font:500 11.5px/1 'Geist','Geist Fallback',system-ui,sans-serif;color:#9a988f}
.m-cta .t span i{width:7px;height:7px;border-radius:50%;background:#7c7a74}
.m-cta .t span i.open{background:#4cd08a;box-shadow:0 0 8px rgba(76,208,138,.8)}
.m-cta a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:#8E7CFF;color:#0B0B0C;font:600 15px/1 'Geist','Geist Fallback',system-ui,sans-serif;text-decoration:none;box-shadow:0 10px 26px -10px rgba(142,124,255,.9)}
@media (min-width:1025px){.m-cta{display:none}}

@media (max-width:760px){
  /* section rhythm: less dead space between blocks on phones */
  html body #ssx .sec{padding-top:clamp(64px,16vw,84px);padding-bottom:clamp(64px,16vw,84px)}
  html body #ssx .sec-head{margin-bottom:32px}
  html body #ssx .cta{padding:64px 0}
  html body #ssx .cta .btn.mag{width:100%;justify-content:center}
  html body #ssx .phero .phero-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  html body #ssx .phero .phero-cta .btn{justify-content:center;min-height:54px}
  /* bottom space so the sticky CTA never covers the last line */
  html body #ssx .ft{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (min-width:761px) and (max-width:1100px){
  /* tablets: two columns where desktop had three or four */
  html body #ssx .grid3,html body #ssx .lk-grid,html body #ssx .mlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #ssx .lk-grid.g4{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body #ssx .svs{grid-template-columns:minmax(0,1fr)}
  html body #ssx .svs-stage{position:relative;top:0}
}

/* footer on phones and tablets: CTA card first, columns become accordions, clocks scroll sideways */
@media (max-width:1024px){
  /* footer: CTA card first, columns become accordions, clocks scroll sideways */
  html body #ssx .ft-grid{display:flex!important;flex-direction:column;gap:0!important}
  html body #ssx .ft-grid>div:first-child{order:0;padding-bottom:22px}
  html body #ssx .ft-box{order:-1;width:100%;margin-bottom:28px;box-sizing:border-box}
  html body #ssx .ft-box .btn{width:100%;justify-content:center;min-height:56px}
  html body #ssx .ft-links{display:flex!important;flex-direction:column;gap:0!important;margin-top:8px}
  html body #ssx .sm-clocks{display:flex!important;overflow-x:auto;scrollbar-width:none;gap:0;margin:8px calc(-1*var(--gut,20px)) 0;padding:0 var(--gut,20px);border-bottom:0}
  html body #ssx .sm-clocks::-webkit-scrollbar{display:none}
  html body #ssx .sm-clocks>div{flex:0 0 auto;padding:16px 26px 16px 0}
  html body #ssx .ft-bot{flex-direction:column;align-items:flex-start;gap:8px}
  html body #ssx .ft-bot nav{display:flex;flex-wrap:wrap;gap:0 10px;margin-left:-6px}
  html body #ssx .ft-box{max-width:none}
  html body #ssx .ft{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (min-width:761px) and (max-width:1024px){html body #ssx .ft-box .btn{width:auto;padding:0 34px}}
/* home hero on tablets: same glass card as phones so the wave never runs through the text */
@media (min-width:761px) and (max-width:1024px){
  html body #ssx .hero-low{position:relative;padding:26px 24px;border:1px solid rgba(244,243,239,.1);border-radius:28px;
    background:linear-gradient(180deg,rgba(18,17,24,.8),rgba(10,10,12,.88));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
}

/* buttons: the white hover fill must always come with dark text; on touch screens there is no sticky hover fill, only a press effect */
html:not([data-tone=light]) body #ssx .btn.ghost:hover{color:#0B0B0C}
html:not([data-tone=light]) body #ssx .btn.ghost:hover .ar{color:#0B0B0C}
@media (hover:none){
  html body #ssx .btn:hover::before,html body #ssx .btn::before{transform:translateY(101%)!important}
  html body #ssx .btn.ghost:hover,html:not([data-tone=light]) body #ssx .btn.ghost:hover,html:not([data-tone=light]) body #ssx .btn.ghost:hover .ar{color:#F4F3EF}
  html body #ssx .pc:not(.rec) .btn.ghost:hover{background:transparent;color:#F4F3EF}
  html body #ssx .btn:hover .ar{transform:none}
  html body #ssx .btn{transition:transform .15s ease,background-color .2s,box-shadow .2s}
  html body #ssx .btn:active{transform:scale(.97)}
  html body #ssx .btn.ghost:active{background:rgba(244,243,239,.1)}
}

/* footer wordmark: whole letters (nothing cut), lit by a slow wave of light like Serann Digital, glowing violet dot */
html body #ssx .mark{line-height:.92;letter-spacing:-.04em;overflow:visible;padding-bottom:.04em;margin-top:28px;color:#2A2A2C}
html body #ssx .mark .w{overflow:visible;padding:0;margin:0}
html body #ssx .mark .wi{color:#343436;animation:sm-lit 6s ease-in-out infinite;animation-delay:calc(var(--li,0) * .14s)}
html body #ssx .mark i,html body #ssx .mark .wi:has(i){color:var(--acc)!important;text-shadow:0 0 24px rgba(var(--acc-rgb),.9),0 0 70px rgba(var(--acc-rgb),.7),0 0 140px rgba(var(--acc-rgb),.5);animation:none}
@keyframes sm-lit{0%,55%,100%{color:#343436;text-shadow:none}74%{color:#E2E1DD;text-shadow:0 0 34px rgba(var(--acc-rgb),.55),0 0 90px rgba(var(--acc-rgb),.3)}88%{color:#424244;text-shadow:none}}
html body #ssx .ft{overflow:hidden}
@media (prefers-reduced-motion:reduce){html body #ssx .mark .wi{animation:none;color:#3C3C3E}}

/* ================= Free tools hub: live console + bento cards with animated previews ================= */
html body #ssx .tc{position:relative;border-radius:28px;padding:1px;background:linear-gradient(150deg,rgba(var(--acc-rgb),.7),rgba(var(--acc-rgb),.08) 40%,rgba(255,255,255,.12));
  box-shadow:0 60px 120px -50px rgba(var(--acc-rgb),.55),0 30px 60px -40px rgba(0,0,0,.9);max-width:460px;margin-left:auto}
html body #ssx .tc>*{position:relative}
html body #ssx .tc::before{content:"";position:absolute;inset:1px;border-radius:27px;background:radial-gradient(120% 80% at 100% 0%,rgba(var(--acc-rgb),.18),transparent 60%),linear-gradient(180deg,#141418,#0C0C0F)}
html body #ssx .tc-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(244,243,239,.07);font:500 12px/1 var(--f-m);letter-spacing:.08em;color:#B4B2AC}
html body #ssx .tc-dots{display:flex;gap:6px}html body #ssx .tc-dots i{width:9px;height:9px;border-radius:50%;background:rgba(244,243,239,.14)}
html body #ssx .tc-t{flex:1;text-transform:uppercase}
html body #ssx .tc-live{display:inline-flex;align-items:center;gap:7px;color:var(--acc2)}
html body #ssx .tc-live i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6);animation:tc-ping 2s infinite}
@keyframes tc-ping{0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6)}70%{box-shadow:0 0 0 9px rgba(var(--acc-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}}
html body #ssx .tc-body{padding:18px 22px 22px;display:grid;gap:14px}
html body #ssx .tc-g{position:relative;width:min(100%,260px);margin:0 auto 4px}
html body #ssx .tc-g svg{display:block;width:100%;overflow:visible}
html body #ssx .tc-track{fill:none;stroke:rgba(244,243,239,.08);stroke-width:14;stroke-linecap:round}
html body #ssx .tc-arc{fill:none;stroke:url(#tcg);stroke-width:14;stroke-linecap:round;stroke-dasharray:var(--arc,60) 100;transition:stroke-dasharray .7s cubic-bezier(.16,.84,.24,1);filter:drop-shadow(0 0 10px rgba(var(--acc-rgb),.55))}
html body #ssx .tc-be{stroke:#F4F3EF;stroke-width:2;stroke-dasharray:3 3;opacity:.55;transform-origin:110px 112px;transform:rotate(var(--be,-30deg));transition:transform .7s cubic-bezier(.16,.84,.24,1)}
html body #ssx .tc-big{position:absolute;left:0;right:0;bottom:-2px;text-align:center}
html body #ssx .tc-big b{display:block;font-size:clamp(38px,3.6vw,50px);font-weight:600;letter-spacing:-.04em;line-height:1;background:linear-gradient(100deg,#F4F3EF,var(--acc2) 45%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
html body #ssx .tc-big span{font:500 11px/1 var(--f-m);letter-spacing:.16em;color:#86847E;text-transform:uppercase}
html body #ssx .tc-f{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;font-size:13px;color:#B4B2AC}
html body #ssx .tc-f output{font:600 14px/1 var(--f-m);color:#F4F3EF}
html body #ssx .tc-f input{grid-column:1/-1;height:22px}
html body #ssx .tc-k{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html body #ssx .tc-k>div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(244,243,239,.07)}
html body #ssx .tc-k span{display:block;font-size:11.5px;color:#86847E;margin-bottom:6px}
html body #ssx .tc-k b{font:600 20px/1 var(--f-d);letter-spacing:-.02em;color:#F4F3EF}
html body #ssx .tc-k b.neg{color:#FF8A7A}
html body #ssx .tc-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px 13px;border-radius:999px;background:rgba(var(--acc-rgb),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.45);color:var(--acc2);font-weight:500;font-size:14px;transition:background .3s,color .3s}
html body #ssx .tc-go:hover{background:var(--acc);color:var(--acc-on)}

/* filter chips */
html body #ssx .tb-f{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
html body #ssx .tb-f button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px;border-radius:999px;border:1px solid rgba(244,243,239,.12);background:rgba(255,255,255,.02);color:#B4B2AC;font:500 14px/1 var(--f-d);cursor:pointer;transition:all .3s}
html body #ssx .tb-f button i{font:500 11px/1 var(--f-m);font-style:normal;padding:4px 6px;border-radius:999px;background:rgba(244,243,239,.08);color:#86847E}
html body #ssx .tb-f button:hover{border-color:rgba(var(--acc-rgb),.6);color:#F4F3EF}
html body #ssx .tb-f button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-on);box-shadow:0 10px 30px -12px rgba(var(--acc-rgb),.8)}
html body #ssx .tb-f button.on i{background:rgba(11,11,12,.16);color:var(--acc-on)}

/* bento */
html body #ssx .tb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html body #ssx .tb{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:360px;border-radius:26px;overflow:hidden;color:#F4F3EF;
  background:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(var(--acc-rgb),.18),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 55%),#0F0F12;
  border:1px solid rgba(244,243,239,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 70px -46px rgba(0,0,0,.9);
  transition:transform .6s cubic-bezier(.16,.84,.24,1),box-shadow .6s,opacity .4s}
html body #ssx .tb.w2{grid-column:span 2}
html body #ssx .tb::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--ang,0deg),rgba(var(--acc-rgb),0) 0deg,rgba(var(--acc-rgb),.95) 60deg,rgba(var(--acc-rgb),0) 120deg,rgba(var(--acc-rgb),0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
html body #ssx .tb:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 60px 90px -44px rgba(var(--acc-rgb),.42)}
html body #ssx .tb:hover::after{opacity:1;animation:tb-spin 3.2s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes tb-spin{to{--ang:360deg}}
html body #ssx .tb-n{position:absolute;top:28px;right:30px;z-index:2;font:500 12px/1 var(--f-m);letter-spacing:.1em;color:rgba(244,243,239,.32)}
html body #ssx .tb-tx{padding:0 24px 76px;display:grid;gap:8px}
html body #ssx .tb .k{font:500 11px/1.3 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
html body #ssx .tb h3{margin:0;font-size:clamp(20px,1.6vw,24px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
html body #ssx .tb p{margin:0;font-size:14.5px;line-height:1.5;color:#9D9B95;max-width:42ch}
html body #ssx .tb-go{position:absolute;left:24px;bottom:22px;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 16px;border-radius:999px;border:1px solid rgba(244,243,239,.14);
  font-size:13.5px;font-weight:500;color:#F4F3EF;transition:all .4s cubic-bezier(.16,.84,.24,1)}
html body #ssx .tb-go>span:first-child{line-height:1;padding-bottom:.08em}
html body #ssx .tb-go .ar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(244,243,239,.08);transition:all .4s}
html body #ssx .tb:hover .tb-go{background:var(--acc);border-color:var(--acc);color:var(--acc-on);padding-right:8px}
html body #ssx .tb:hover .tb-go .ar{background:rgba(11,11,12,.15);transform:translateX(3px)}
html body #ssx .tb-grid.filt .tb.w2{grid-column:span 1}
html body #ssx .tb.off{display:none}

/* preview stage */
html body #ssx .tv{position:relative;height:170px;margin:14px 14px 18px;border-radius:18px;overflow:hidden;
  background:radial-gradient(90% 120% at 80% 0%,rgba(var(--acc-rgb),.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(244,243,239,.06);
  display:flex;flex-direction:column;justify-content:center;padding:16px 18px;font-family:var(--f-m)}
html body #ssx .tv::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,243,239,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,243,239,.04) 1px,transparent 1px);background-size:22px 22px;mask:radial-gradient(80% 90% at 50% 40%,#000,transparent);-webkit-mask:radial-gradient(80% 90% at 50% 40%,#000,transparent);pointer-events:none}
html body #ssx .tb.w2 .tv{height:200px}
html body #ssx .tv svg{width:100%;height:100%;overflow:visible;position:relative}
html body #ssx .tv text{font:500 10px var(--f-m);fill:#86847E;letter-spacing:.06em}
html body #ssx .tv .ln{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.7))}
html body #ssx .tv .pt{fill:var(--acc2);opacity:0;filter:drop-shadow(0 0 8px var(--acc))}
html body #ssx .tv .be,html body #ssx .tv .ax{stroke:rgba(244,243,239,.25);stroke-dasharray:4 4}
html body #ssx .tv .ar-f{opacity:0;transition:opacity 1s .6s}
html body #ssx .tb.in .tv .ln{animation:tv-draw 1.6s cubic-bezier(.6,.05,.25,1) forwards}
html body #ssx .tb.in .tv .pt{animation:tv-pop .5s 1.4s forwards}
html body #ssx .tb.in .tv .ar-f{opacity:1}
@keyframes tv-draw{to{stroke-dashoffset:0}}
@keyframes tv-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
html body #ssx .tv .pt{transform-box:fill-box;transform-origin:center}
html body #ssx .tv-chip{position:absolute;top:14px;left:16px;padding:7px 11px;border-radius:999px;background:rgba(11,11,12,.6);border:1px solid rgba(var(--acc-rgb),.4);font-size:12px;color:#B4B2AC;backdrop-filter:blur(6px)}
html body #ssx .tv-chip b{color:#F4F3EF;font-weight:600}
html body #ssx .tv-row{position:relative;display:flex;align-items:baseline;gap:8px;font-size:11px;color:#86847E;margin-top:12px}
html body #ssx .tv-row b{font:600 15px var(--f-d);color:#F4F3EF;margin-right:14px}
/* budget bars */
html body #ssx .tv-bars .bars{position:relative;display:flex;align-items:flex-end;gap:6px;height:96px}
html body #ssx .tv-bars .bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--acc),rgba(var(--acc-rgb),.25));transform:scaleY(.04);transform-origin:bottom;opacity:.85}
html body #ssx .tb.in .tv-bars .bars i{animation:tv-grow .9s var(--d) cubic-bezier(.16,.84,.24,1) forwards}
html body #ssx .tv-bars .bars i:last-child{background:linear-gradient(180deg,var(--acc2),var(--acc));box-shadow:0 0 18px rgba(var(--acc-rgb),.6)}
@keyframes tv-grow{to{transform:scaleY(1)}}
/* donut */
html body #ssx .tv-donut{flex-direction:row;align-items:center;gap:18px}
html body #ssx .tv-donut svg{width:118px;height:118px;flex:none;transform:rotate(-90deg)}
html body #ssx .tv-donut .trk{fill:none;stroke:rgba(244,243,239,.08);stroke-width:12}
html body #ssx .tv-donut .seg{fill:none;stroke:var(--acc);stroke-width:12;stroke-linecap:round;stroke-dasharray:0 100;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.6));transition:stroke-dasharray 1.4s cubic-bezier(.16,.84,.24,1)}
html body #ssx .tb.in .tv-donut .seg{stroke-dasharray:18 100}
html body #ssx .tv-donut .dw{position:relative;flex:none;width:118px;height:118px}html body #ssx .tv-donut .dn{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
html body #ssx .tv-donut .dn b{display:block;font:600 24px/1 var(--f-d);color:#F4F3EF}
html body #ssx .tv-donut .dn span{font-size:10px;letter-spacing:.14em;color:#86847E}
html body #ssx .tv-donut .dn-s{display:grid;gap:10px;font-size:11.5px;color:#86847E}
html body #ssx .tv-donut .dn-s b{color:#F4F3EF;font:600 14px var(--f-d);margin-left:4px}
/* funnel */
html body #ssx .tv-fun .fn{position:relative;display:flex;justify-content:space-between;align-items:center;height:30px;margin-bottom:6px;padding:0 12px;border-radius:9px;font-size:11px;color:#B4B2AC;overflow:hidden}
html body #ssx .tv-fun .fn::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,rgba(var(--acc-rgb),.55),rgba(var(--acc-rgb),.15));transform:scaleX(0);transform-origin:left}
html body #ssx .tb.in .tv-fun .fn::before{animation:tv-x .9s var(--d) cubic-bezier(.16,.84,.24,1) forwards}
html body #ssx .tv-fun .fn>*{position:relative}html body #ssx .tv-fun .fn b{color:#F4F3EF;font:600 13px var(--f-d)}
@keyframes tv-x{to{transform:scaleX(1)}}
/* utm */
html body #ssx .tv-utm .url{display:flex;flex-wrap:wrap;gap:4px;font-size:12px;line-height:1.5;color:#B4B2AC;word-break:break-all}
html body #ssx .tv-utm .h{color:#F4F3EF}
html body #ssx .tv-utm .q{opacity:0;transform:translateY(6px)}
html body #ssx .tv-utm em{font-style:normal;color:var(--acc2);background:rgba(var(--acc-rgb),.14);padding:1px 5px;border-radius:5px}
html body #ssx .tb.in .tv-utm .q{animation:tv-up .5s forwards}
html body #ssx .tb.in .tv-utm .q:nth-child(3){animation-delay:.35s}html body #ssx .tb.in .tv-utm .q:nth-child(4){animation-delay:.7s}
@keyframes tv-up{to{opacity:1;transform:none}}
html body #ssx .tv-copy{position:relative;align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:var(--acc);color:var(--acc-on);font-size:11px;font-weight:600;opacity:0}
html body #ssx .tv-copy i{width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(1px,-1px)}
html body #ssx .tb.in .tv-copy{animation:tv-up .4s 1.2s forwards}
/* google ad */
html body #ssx .tv-ad{justify-content:center}
html body #ssx .tv-ad .serp{position:relative;max-width:560px;padding:14px 16px;border-radius:14px;background:#151519;border:1px solid rgba(244,243,239,.08);font-family:Arial,Helvetica,sans-serif}
html body #ssx .tv-ad .sp{display:flex;align-items:center;gap:10px;font-size:11.5px;line-height:1.3;color:#B4B2AC}
html body #ssx .tv-ad .sp b{color:#F4F3EF}
html body #ssx .tv-ad .fav{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--acc2),var(--acc))}
html body #ssx .tv-ad .t{margin:8px 0 4px;font-size:17px;color:#A9A0FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:inset(0 100% 0 0)}
html body #ssx .tb.in .tv-ad .t{animation:tv-type 1.2s steps(40) .2s forwards}
@keyframes tv-type{to{clip-path:inset(0 0 0 0)}}
html body #ssx .tv-ad .d{font-size:12.5px;line-height:1.45;color:#B4B2AC}
html body #ssx .tv-ad .lim{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font:500 10.5px var(--f-m);color:#86847E}
html body #ssx .tv-ad .lim span{padding:4px 8px;border-radius:999px;background:rgba(var(--acc-rgb),.1)}
html body #ssx .tv-ad .lim b{color:var(--acc2)}
/* vat */
html body #ssx .tv-vat .vx{display:flex;align-items:center;gap:12px;font:600 22px var(--f-d);color:#86847E}
html body #ssx .tv-vat .vx i{font:600 12px var(--f-m);font-style:normal;padding:6px 9px;border-radius:999px;background:rgba(var(--acc-rgb),.16);color:var(--acc2)}
html body #ssx .tv-vat .vx b{color:#F4F3EF;font-size:30px;letter-spacing:-.03em}
html body #ssx .tv-vat .flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
html body #ssx .tv-vat .flags span{padding:5px 9px;border-radius:8px;border:1px solid rgba(244,243,239,.1);font-size:11px;color:#B4B2AC;opacity:0}
html body #ssx .tb.in .tv-vat .flags span{animation:tv-up .4s forwards}
html body #ssx .tv-vat .flags span:nth-child(2){animation-delay:.1s!important}html body #ssx .tv-vat .flags span:nth-child(3){animation-delay:.2s!important}html body #ssx .tv-vat .flags span:nth-child(4){animation-delay:.3s!important}html body #ssx .tv-vat .flags span:nth-child(5){animation-delay:.4s!important}
/* calendar */
html body #ssx .tv-cal .cal{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
html body #ssx .tv-cal .cal span{position:relative;display:grid;place-items:center;height:52px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(244,243,239,.06);font:600 13px var(--f-d);color:#86847E;opacity:0;transform:scale(.9)}
html body #ssx .tv-cal .cal span.hot{background:linear-gradient(180deg,rgba(var(--acc-rgb),.38),rgba(var(--acc-rgb),.12));border-color:rgba(var(--acc-rgb),.6);color:#F4F3EF}
html body #ssx .tv-cal .cal em{position:absolute;bottom:4px;font:500 8px var(--f-m);font-style:normal;letter-spacing:.06em;color:var(--acc2)}
html body #ssx .tv-cal .cal span.hot{padding-bottom:10px}
html body #ssx .tb.in .tv-cal .cal span{animation:tv-cell .45s var(--d) forwards}
@keyframes tv-cell{to{opacity:1;transform:none}}
/* shopping title */
html body #ssx .tv-title .chips{display:flex;flex-wrap:wrap;gap:6px}
html body #ssx .tv-title .chips span{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(244,243,239,.1);font-size:12px;color:#F4F3EF;opacity:0;transform:translateX(-8px)}
html body #ssx .tv-title .chips span:first-child{border-color:rgba(var(--acc-rgb),.6);background:rgba(var(--acc-rgb),.14)}
html body #ssx .tb.in .tv-title .chips span{animation:tv-up .45s forwards}
html body #ssx .tv-title .chips span:nth-child(2){animation-delay:.15s!important}html body #ssx .tv-title .chips span:nth-child(3){animation-delay:.3s!important}html body #ssx .tv-title .chips span:nth-child(4){animation-delay:.45s!important}html body #ssx .tv-title .chips span:nth-child(5){animation-delay:.6s!important}
html body #ssx .tv-title .cnt{margin-top:16px;display:grid;gap:8px;font-size:11px;color:#86847E}
html body #ssx .tv-title .cnt i{display:block;height:6px;border-radius:9px;background:rgba(244,243,239,.08);position:relative;overflow:hidden}
html body #ssx .tv-title .cnt i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,var(--acc2),var(--acc));transform:scaleX(0);transform-origin:left}
html body #ssx .tb.in .tv-title .cnt i::after{animation:tv-x 1.2s .7s cubic-bezier(.16,.84,.24,1) forwards}
html body #ssx .tv-title .cnt b{color:#F4F3EF}
/* hover replays a little life */
html body #ssx .tb:hover .tv{border-color:rgba(var(--acc-rgb),.35)}
html body #ssx .tb .tv{transition:border-color .4s,transform .6s cubic-bezier(.16,.84,.24,1)}
html body #ssx .tb:hover .tv{transform:scale(1.015)}

/* promise strip */
html body #ssx .tp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html body #ssx .tp{display:flex;gap:16px;padding:24px;border-radius:22px;border:1px solid rgba(244,243,239,.07);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
html body #ssx .tp-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(var(--acc-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.4)}
html body #ssx .tp-ic svg{width:22px;height:22px;fill:none;stroke:var(--acc2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body #ssx .tp h3{margin:2px 0 6px;font-size:18px;font-weight:600;letter-spacing:-.02em}
html body #ssx .tp p{margin:0;font-size:14.5px;line-height:1.5;color:#9D9B95}

@media (max-width:1024px){
  html body #ssx .tb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #ssx .tb.w2{grid-column:span 2}
  html body #ssx .tp-row{grid-template-columns:minmax(0,1fr)}
  html body #ssx .tc{margin:28px auto 0}
}
@media (max-width:640px){
  html body #ssx .tb-grid{grid-template-columns:minmax(0,1fr)}
  html body #ssx .tb.w2{grid-column:auto}
  html body #ssx .tb{min-height:0}
  html body #ssx .tv,html body #ssx .tb.w2 .tv{height:168px}
  html body #ssx .tb-f{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
  html body #ssx .tb-f::-webkit-scrollbar{display:none}
  html body #ssx .tb-f button{flex:none}
  html body #ssx .tv-ad .t{font-size:15px}
}
@media (hover:none){html body #ssx .tb:hover{transform:none}html body #ssx .tb:hover::after{animation:none;opacity:0}}
@media (prefers-reduced-motion:reduce){html body #ssx .tb *{animation-duration:.01s!important;animation-delay:0s!important}}
html body #ssx .tb .k i{font-style:normal;color:rgba(244,243,239,.35);margin-right:10px;padding-right:10px;border-right:1px solid rgba(244,243,239,.15)}
html body #ssx .tc-cur{display:flex;gap:6px;padding:14px 22px 0}
html body #ssx .tc-cur button{flex:1;padding:9px 10px 9px;border-radius:999px;border:1px solid rgba(244,243,239,.12);background:transparent;color:#B4B2AC;font:500 12.5px/1 var(--f-m);letter-spacing:.04em;cursor:pointer;transition:all .3s}
html body #ssx .tc-cur button:hover{border-color:rgba(var(--acc-rgb),.6);color:#F4F3EF}
html body #ssx .tc-cur button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}

/* ================= Cards v2: feature boxes, link cards, pitfalls, weeks, calendar moments ================= */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cv-spin{to{--ang:360deg}}
html body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi){border-radius:28px}
html:not([data-tone=light]) body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi){
  background:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(var(--acc-rgb),.17),transparent 42%),
    radial-gradient(70% 60% at 92% 0%,rgba(var(--acc-rgb),.13),transparent 72%),linear-gradient(180deg,#151519,#0C0C0F)!important;
  border:1px solid rgba(244,243,239,.075)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 80px -50px rgba(0,0,0,.95)!important}
/* rotating light edge on hover, soft static edge otherwise */
html body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi)::after{
  background:linear-gradient(150deg,rgba(var(--acc-rgb),.75),rgba(var(--acc-rgb),0) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,.12))!important;opacity:.45}
html body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi):hover::after{
  background:conic-gradient(from var(--ang),rgba(var(--acc-rgb),0) 0deg,rgba(var(--acc-rgb),1) 70deg,rgba(var(--acc2-rgb,207,199,255),.8) 100deg,rgba(var(--acc-rgb),0) 150deg,rgba(var(--acc-rgb),0) 360deg)!important;
  opacity:1;animation:cv-spin 3.4s linear infinite}
html body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi)::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.95),transparent);opacity:.5;transition:opacity .45s,left .6s,right .6s}
html body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi):hover::before{opacity:1;left:12px;right:12px}
html body #ssx :is(.grid3>.box:not(.person):not(.post-card),.cases .box,.lk,.mi):hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 60px 100px -50px rgba(var(--acc-rgb),.45)!important}

/* feature boxes */
html body #ssx .grid3{gap:18px}
html body #ssx .grid3>.box:not(.person):not(.post-card){padding:clamp(26px,2.4vw,36px);gap:0}
html body #ssx .grid3>.box>*{position:relative;z-index:1}
html body #ssx .box .bx-w{position:absolute;right:-4px;top:-38px;z-index:0;font:700 clamp(150px,13vw,190px)/1 var(--f-d);letter-spacing:-.07em;color:transparent;
  -webkit-text-stroke:1px rgba(244,243,239,.07);pointer-events:none;transition:-webkit-text-stroke-color .6s,transform .8s cubic-bezier(.16,.84,.24,1)}
html body #ssx .box:hover .bx-w{-webkit-text-stroke-color:rgba(var(--acc-rgb),.42);transform:translate(-6px,8px)}
html body #ssx .box .bx-k{display:flex;align-items:center;gap:12px;margin:0 0 26px;letter-spacing:0;text-transform:none}
html body #ssx .box .bx-n{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font:600 15px/1 var(--f-m);color:#F4F3EF;
  background:linear-gradient(145deg,rgba(var(--acc-rgb),.42),rgba(var(--acc-rgb),.08));box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.6),0 12px 30px -10px rgba(var(--acc-rgb),.75);transition:transform .5s cubic-bezier(.16,.84,.24,1)}
html body #ssx .box:hover .bx-n{transform:rotate(-8deg) scale(1.06)}
html body #ssx .box .bx-l{padding:calc(7px - .06em) 12px calc(7px + .06em);border-radius:999px;border:1px solid rgba(var(--acc-rgb),.32);background:rgba(var(--acc-rgb),.07);
  font:500 11.5px/1.2 var(--f-m);letter-spacing:.13em;text-transform:uppercase;color:var(--acc2)}
html body #ssx .grid3>.box h3{font-size:clamp(22px,1.9vw,27px);line-height:1.12;letter-spacing:-.03em;margin:0 0 14px;font-weight:600}
html body #ssx .grid3>.box>p{color:#A3A19B;font-size:15.5px;line-height:1.62;margin:0;flex:1}
html body #ssx .grid3>.box .checks{margin:26px 0 0;padding:4px 18px;gap:0;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(244,243,239,.065)}
html body #ssx .grid3>.box .checks li{padding:13px 0 13px 34px;font-size:14.5px;line-height:1.45;color:#E6E4DE}
html body #ssx .grid3>.box .checks li+li{border-top:1px solid rgba(244,243,239,.06)}
html body #ssx .grid3>.box .checks li::before{left:0;top:13px;width:21px;height:21px;background:linear-gradient(145deg,var(--acc),var(--acc-d));border:0;box-shadow:0 0 14px rgba(var(--acc-rgb),.55)}
html body #ssx .grid3>.box .checks li::after{left:8px;top:17.5px;width:5px;height:9px;border-color:#0B0B0C;border-width:0 2px 2px 0}

/* link cards */
html body #ssx .lk{padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) 78px!important;gap:10px}
html body #ssx .lk>*{position:relative;z-index:1}
html body #ssx .lk .lk-m{display:grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:16px;font:600 22px/1 var(--f-d);color:#F4F3EF;
  background:linear-gradient(145deg,rgba(var(--acc-rgb),.5),rgba(var(--acc-rgb),.06));box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.55),0 14px 34px -12px rgba(var(--acc-rgb),.8);transition:transform .6s cubic-bezier(.16,.84,.24,1)}
html body #ssx .lk:hover .lk-m{transform:translateY(-3px) rotate(-6deg)}
html body #ssx .lk .k{font:500 11px/1.3 var(--f-m);letter-spacing:.15em;color:var(--acc)}
html body #ssx .lk h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.025em;line-height:1.15}
html body #ssx .lk p{color:#9D9B95;font-size:14.5px;line-height:1.55}
html body #ssx .lk .go{position:absolute;left:clamp(22px,2.2vw,30px);bottom:22px;width:auto!important;height:38px;padding:0 6px 0 16px;border-radius:999px;display:inline-flex!important;align-items:center;gap:10px;
  border:1px solid rgba(244,243,239,.14)!important;background:transparent!important;color:#F4F3EF!important;transition:all .45s cubic-bezier(.16,.84,.24,1)}
html body #ssx .lk .go::before{content:"Open";font:500 13.5px/1 var(--f-d);padding-bottom:.08em}
html body #ssx .lk .go .ar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(244,243,239,.08);transition:all .45s}
html body #ssx .lk:hover .go{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--acc-on)!important;padding-right:8px}
html body #ssx .lk:hover .go .ar{background:rgba(11,11,12,.15);transform:translateX(3px)}

/* calendar moments */
html body #ssx .mi{padding:clamp(22px,2.2vw,30px)!important;gap:12px}
html body #ssx .mi>*{position:relative;z-index:1}
html body #ssx .mi .when{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:calc(7px - .06em) 12px calc(7px + .06em) 10px;border-radius:999px;
  background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.35);font:500 11px/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--acc2)}
html body #ssx .mi .when::before{content:"";width:12px;height:12px;flex:none;border-radius:3px;border:1.5px solid currentColor;border-top-width:3.5px;opacity:.9}
html body #ssx .mi h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.025em;line-height:1.15;margin-top:6px}
html body #ssx .mi p{color:#9D9B95;font-size:14.5px;line-height:1.6}
html body #ssx .mi.hot,html body #ssx .mi.on{border-color:rgba(var(--acc-rgb),.5)!important}

/* pitfalls: numbered glass rows */
html body #ssx .plist{gap:14px;border-top:0}
html body #ssx .pi{position:relative;grid-template-columns:58px minmax(0,1fr);gap:18px;padding:24px 26px 26px 22px;border:1px solid rgba(244,243,239,.07);border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:border-color .45s,transform .6s cubic-bezier(.16,.84,.24,1),background .45s}
html body #ssx .pi::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--acc2),var(--acc));transform:scaleY(0);opacity:0;transition:transform .6s cubic-bezier(.16,.84,.24,1),opacity .4s}
html body #ssx .pi:hover{border-color:rgba(var(--acc-rgb),.4);transform:translateX(4px);background:linear-gradient(90deg,rgba(var(--acc-rgb),.1),rgba(255,255,255,.01) 70%)}
html body #ssx .pi:hover::before{transform:scaleY(1);opacity:1}
html body #ssx .pi .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:600 14px/1 var(--f-m);letter-spacing:.02em;color:#F4F3EF;
  background:radial-gradient(circle at 30% 25%,rgba(var(--acc-rgb),.55),rgba(var(--acc-rgb),.08) 70%);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.55),0 0 24px -6px rgba(var(--acc-rgb),.8)}
html body #ssx .pi h3{font-size:clamp(19px,1.5vw,22px);margin:4px 0 8px}
html body #ssx .pi p{color:#A3A19B;font-size:15px;line-height:1.6}

/* four weeks: glass cards hanging from the line */
html body #ssx .wk4{gap:16px;padding-top:40px}
html body #ssx .wk-line{top:10px;height:2px;border-radius:2px;background:rgba(244,243,239,.08)}
html body #ssx .wk-line b{background:linear-gradient(90deg,var(--acc2),var(--acc));box-shadow:0 0 16px rgba(var(--acc-rgb),.8)}
html body #ssx .wk{padding:24px 24px 26px;border-radius:24px;border:1px solid rgba(244,243,239,.075);gap:10px;
  background:radial-gradient(100% 60% at 0% 0%,rgba(var(--acc-rgb),.12),transparent 60%),linear-gradient(180deg,#141418,#0D0D10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 70px -50px rgba(0,0,0,.95);transition:transform .6s cubic-bezier(.16,.84,.24,1),border-color .45s,box-shadow .6s}
html body #ssx .wk:hover{transform:translateY(-6px);border-color:rgba(var(--acc-rgb),.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 90px -50px rgba(var(--acc-rgb),.5)}
html body #ssx .wk .dot{top:-38px;left:22px;width:18px;height:18px;background:#0B0B0C;border:2px solid var(--acc);box-shadow:0 0 0 5px #0B0B0D,0 0 16px rgba(var(--acc-rgb),.9)}
html body #ssx .wk::before{content:"";position:absolute;left:30px;top:-21px;width:2px;height:20px;background:linear-gradient(180deg,var(--acc),rgba(var(--acc-rgb),0))}
html body #ssx .wk .k{align-self:flex-start;padding:calc(6px - .06em) 11px calc(6px + .06em);border-radius:999px;background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.35);font-size:11px;color:var(--acc2)}
html body #ssx .wk h3{font-size:clamp(20px,1.6vw,24px);line-height:1.15;margin-top:4px}
html body #ssx .wk p{color:#9D9B95;font-size:14.5px;line-height:1.6}

@media (max-width:1024px){html body #ssx .wk .dot,html body #ssx .wk::before{display:none}html body #ssx .wk4{padding-top:0;row-gap:16px}}
@media (hover:none){html body #ssx :is(.grid3>.box,.cases .box,.lk,.mi,.wk,.pi):hover{transform:none}}
@media (prefers-reduced-motion:reduce){html body #ssx :is(.grid3>.box,.cases .box,.lk,.mi):hover::after{animation:none}}

/* ================= Film chapters: three films, thumbnail tabs with progress ================= */
html body #ssx .fch{margin-top:clamp(28px,4vw,48px)}
html body #ssx .fch-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
html body #ssx .fch-t{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(112px,9vw,150px) minmax(0,1fr);align-items:center;gap:18px;padding:12px 18px 12px 12px;border-radius:24px;text-align:left;cursor:pointer;overflow:hidden;
  color:#F4F3EF;font:inherit;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid rgba(244,243,239,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .6s cubic-bezier(.16,.84,.24,1),border-color .45s,box-shadow .6s,background .45s}
html body #ssx .fch-t::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s;
  background:conic-gradient(from var(--ang,0deg),rgba(var(--acc-rgb),0) 0deg,rgba(var(--acc-rgb),1) 70deg,rgba(207,199,255,.85) 100deg,rgba(var(--acc-rgb),0) 150deg,rgba(var(--acc-rgb),0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html body #ssx .fch-t:hover{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.35)}
html body #ssx .fch-t.on{background:radial-gradient(120% 140% at 0% 0%,rgba(var(--acc-rgb),.2),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -30px rgba(var(--acc-rgb),.55)}
html body #ssx .fch-t.on::after{opacity:1;animation:cv-spin 4s linear infinite}
html body #ssx .fch-t .th{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 30px -14px rgba(0,0,0,.9);filter:saturate(.55) brightness(.62);transition:filter .5s,transform .6s cubic-bezier(.16,.84,.24,1)}
html body #ssx .fch-t:hover .th{filter:saturate(.9) brightness(.85);transform:scale(1.02)}
html body #ssx .fch-t.on .th{filter:none}
html body #ssx .fch-t .th::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65))}
html body #ssx .fch-t .pl{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(11,11,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .5s cubic-bezier(.16,.84,.24,1),background .4s,opacity .4s}
html body #ssx .fch-t .pl::after{content:"";position:absolute;left:15px;top:12px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
html body #ssx .fch-t:hover .pl{transform:scale(1.12);background:var(--acc)}
html body #ssx .fch-t.on .pl{opacity:0}
html body #ssx .fch-t .eq{position:absolute;left:10px;bottom:9px;display:flex;align-items:flex-end;gap:3px;height:14px;opacity:0;transition:opacity .4s}
html body #ssx .fch-t .eq b{width:3px;height:100%;border-radius:2px;background:var(--acc2);transform-origin:bottom;animation:fch-eq 1s ease-in-out infinite}
html body #ssx .fch-t .eq b:nth-child(2){animation-delay:-.35s}html body #ssx .fch-t .eq b:nth-child(3){animation-delay:-.7s}
@keyframes fch-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
html body #ssx .fch-t.on.playing .eq{opacity:1}
html body #ssx .fch-t .len{position:absolute;right:8px;bottom:7px;font:500 11px/1 var(--f-m);font-style:normal;padding:4px 6px;border-radius:6px;background:rgba(11,11,12,.7);color:#E8E6E0;letter-spacing:.04em}
html body #ssx .fch-t .tx{display:flex;flex-direction:column;gap:5px;min-width:0}
html body #ssx .fch-t .ch{font:500 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:#86847E;transition:color .4s}
html body #ssx .fch-t.on .ch{color:var(--acc2)}
html body #ssx .fch-t .tx b{font-size:clamp(17px,1.3vw,20px);font-weight:600;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #ssx .fch-t .d{font-size:13.5px;color:#8E8C86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #ssx .fch-t .pr{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;background:rgba(244,243,239,.06);overflow:hidden;z-index:3}
html body #ssx .fch-t .pr b{position:absolute;inset:0;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--acc2),var(--acc));box-shadow:0 0 14px rgba(var(--acc-rgb),.9)}
html body #ssx .fch .film-frame{margin-top:0}
html body #ssx .fch-v[hidden]{display:none}
html body #ssx .fch-v video{display:block;width:100%;height:auto;background:#000}
@media (max-width:1100px){html body #ssx .fch-t{grid-template-columns:96px minmax(0,1fr);gap:14px}html body #ssx .fch-t .d{display:none}}
@media (max-width:720px){
  html body #ssx .fch-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px 14px;padding:4px 16px 6px;gap:10px}
  html body #ssx .fch-tabs::-webkit-scrollbar{display:none}
  html body #ssx .fch-t{flex:none;width:78%;scroll-snap-align:start;grid-template-columns:92px minmax(0,1fr);padding:10px 14px 10px 10px;border-radius:20px}
  html body #ssx .fch-t .d{display:block}
}
@media (hover:none){html body #ssx .fch-t:hover{transform:none}}

/* Hero stack: keep the particle field from showing through the label and logos */
html body #ssx .hero .stack{position:relative;isolation:isolate}
html body #ssx .hero .stack::before{content:"";position:absolute;inset:-26px -48px -22px -36px;z-index:-1;pointer-events:none;border-radius:40px;
 background:radial-gradient(ellipse 70% 75% at 42% 50%,rgba(11,11,12,.92) 45%,rgba(11,11,12,.6) 70%,transparent 100%)}
html body #ssx .hero .stack .lab{color:#A9A8A3}
html body #ssx .hero .stack .who{text-wrap:balance}

/* Footer social links */
html body #ssx .ft-soc{display:flex;gap:10px;margin-top:22px}
html body #ssx .ft-soc a{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#C9C7C1;background:rgba(255,255,255,.04);
 box-shadow:inset 0 0 0 1px rgba(244,243,239,.1);transition:color .25s,background .25s,box-shadow .25s,transform .25s}
html body #ssx .ft-soc a svg{width:19px;height:19px;display:block}
html body #ssx .ft-soc a:hover,html body #ssx .ft-soc a:focus-visible{color:#fff;transform:translateY(-2px);background:rgba(142,124,255,.16);box-shadow:inset 0 0 0 1px rgba(142,124,255,.55),0 10px 26px -10px rgba(142,124,255,.8)}

/* ===== Tablet and phone home: shorter and cleaner (31 Oct 2026) =====
   How we work without the tablet mockups, packages as a swipe row, six industries then a button, no globe on phones */
@media (max-width:1024px){
  html body #ssx .how-scn{display:none!important}
  html body #ssx .how-pin,html body #ssx .how-sticky{height:auto!important;position:static!important}
  html body #ssx .how-track{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important;transform:none!important;padding:0 var(--gut)!important;max-width:1240px;margin:0 auto}
  html body #ssx .how-track .step{max-width:none;width:auto;gap:12px;padding:26px 24px 28px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--line)}
  html body #ssx .how-track .step-no{font-size:56px;-webkit-text-stroke:1px var(--a)}
  html body #ssx .how-track .step h3{font-size:24px;margin:0}
  html body #ssx .how-track .step p{font-size:15.5px;line-height:1.55;margin:0}
  html body #ssx #how .prog{display:none}
  html body #ssx .pk-wrap{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 7px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  html body #ssx .pk-wrap::-webkit-scrollbar{display:none}
  html body #ssx .pk{position:relative!important;top:auto!important;transform:none!important;margin:0!important;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:24px;overflow:hidden}
  html body #ssx .pk-img{height:190px}
  html body #ssx .pk-body{padding:24px 22px 26px;gap:20px;flex:1}
  html body #ssx .pk h3{font-size:28px;margin:12px 0 10px}
  html body #ssx .pk p{font-size:15.5px}
  html body #ssx .pk-icons img{width:38px;height:38px;border-radius:10px}
  html body #ssx .pk-foot{gap:18px}
  html body #ssx .pk-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  html body #ssx .pk-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:all .3s}
  html body #ssx .pk-dots i.on{width:22px;border-radius:6px;background:var(--a)}
  html body #ssx .ixp:not(.all) a:nth-of-type(n+7){display:none}
  html body #ssx .ixp a h3{font-size:clamp(20px,3.2vw,30px)}
  html body #ssx .ixp-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:16px 20px 16px;border-radius:999px;border:0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);font:600 15px var(--f-s);cursor:pointer}
  html body #ssx .ixp-more i{font-style:normal;transition:transform .3s}
  html body #ssx .ixp.all + .ixp-more i{transform:rotate(180deg)}
}
@media (min-width:1025px){html body #ssx .ixp-more,html body #ssx .pk-dots{display:none}}
@media (max-width:1024px){html body #ssx #global .glb-wrap,html body #ssx #global .glb-tip{display:none!important}}
@media (max-width:720px){
  html body #ssx .how-track{grid-template-columns:minmax(0,1fr)}
  html body #ssx .how-track .step{display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:16px;row-gap:6px;padding:22px 20px}
  html body #ssx .how-track .step-no{grid-row:1/3;font-size:46px;line-height:1}
  html body #ssx .how-track .step h3{font-size:21px;align-self:end}
  html body #ssx .how-track .step p{grid-column:2;font-size:15px}
  html body #ssx .how-track .step > :not(.step-no):not(h3):not(p){grid-column:1/-1}
  html body #ssx .pk-wrap{grid-auto-columns:84%;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}
  html body #ssx .pk-img{height:170px}
  html body #ssx .pk h3{font-size:25px}
  html body #ssx #beyond .sx-vis{display:none}
}

/* Results strip under the hero on tablets and phones: centred numbers (one row of four on tablets, two by two on phones) */
@media (max-width:1024px){
  html body #ssx .live-wrap{text-align:center}
  html body #ssx .stats .stat{align-items:center;text-align:center;padding-left:12px!important;padding-right:12px!important}
  html body #ssx .stats .stat b{text-align:center}
}
@media (min-width:721px) and (max-width:1024px){
  html body #ssx .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  html body #ssx .stats .stat{border-left:1px solid var(--line);border-top:0!important;padding-top:30px;padding-bottom:28px}
  html body #ssx .stats .stat:first-child{border-left:0}
  html body #ssx .stats .stat b{font-size:clamp(30px,5vw,46px)}
  html body #ssx .stats .stat span{font-size:13px}
}
@media (max-width:720px){
  html body #ssx .stats .stat:nth-child(3){border-left:0}
  html body #ssx .stats .stat:nth-child(even){border-left:1px solid var(--line)}
}
@media (max-width:720px){html body #ssx .live-wrap .live-badge{justify-content:center;max-width:300px;margin:0 auto;text-align:center}}
/* hero card on tablets: platform tiles in a neat row, button its natural width */
@media (min-width:721px) and (max-width:1024px){
  html body #ssx .hero .stack .logos{display:flex!important;flex-wrap:wrap;gap:10px}
  html body #ssx .hero .stack .logos img{width:54px!important;height:54px!important;max-width:none!important;padding:10px!important;aspect-ratio:1}
  html body #ssx .hero .hero-lead .btn{width:auto!important;align-self:flex-start;display:inline-flex}
  html body #ssx .hero .hero-lead p{max-width:600px}
}

/* films: swipe dots and a short slide when the film changes by swipe (phones and tablets) */
html body #ssx .fch-dots{display:none;justify-content:center;gap:8px;margin:14px 0 0}
html body #ssx .fch-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .3s}
html body #ssx .fch-dots i.on{width:22px;border-radius:6px;background:var(--acc2)}
@media (max-width:1024px){html body #ssx .fch-dots{display:flex}}
@keyframes fchL{from{opacity:.3;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes fchR{from{opacity:.3;transform:translateX(-40px)}to{opacity:1;transform:none}}
html body #ssx .film-frame.sw-l .fch-v.on{animation:fchL .35s ease-out}
html body #ssx .film-frame.sw-r .fch-v.on{animation:fchR .35s ease-out}

/* footer accordions: button inside the heading, list inside a box, closed links hidden from touch and keyboard */
html body #ssx .m-acc>h4 .m-tg{all:unset;box-sizing:border-box;flex:1;display:flex;align-items:center;min-height:56px;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit}
html body #ssx .m-acc>h4 .m-tg:focus-visible{outline:2px solid var(--acc2);outline-offset:4px;border-radius:6px}
html body #ssx .m-acc>.m-box{display:grid!important;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .45s cubic-bezier(.16,.84,.24,1)}
html body #ssx .m-acc.open>.m-box{grid-template-rows:1fr}
html body #ssx .m-box>ul.m-acc-in{margin:0!important;padding:0!important;list-style:none}
html body #ssx .m-acc:not(.open) .m-acc-in{visibility:hidden;transition:visibility 0s .45s}
html body #ssx .m-acc.open .m-acc-in{visibility:visible;transition:none}

/* ---- "How we work" screens: dark glass instead of white Google screens in metal tablet frames (desktop) ---- */
@media (min-width:1025px){
  html:root body #ssx .how-scn{border:1px solid transparent!important;border-radius:24px;
    background:linear-gradient(180deg,#141418,#0B0B0E) padding-box,linear-gradient(150deg,rgba(167,139,250,.55),rgba(255,255,255,.08) 38%,rgba(255,255,255,.04) 62%,rgba(139,92,246,.35)) border-box!important;
    box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02),0 30px 90px -50px rgba(139,92,246,.45)!important}
  html:root body #ssx .how-scn::before{display:none!important}
  html:root body #ssx .how-scn .scn-in::after{background:radial-gradient(120% 80% at 0% 0%,rgba(167,139,250,.10),transparent 55%)!important;mix-blend-mode:normal!important}
  html:root body #ssx .how-scn .scn-in>.pn:not(.float){border-radius:16px;border:1px solid rgba(255,255,255,.07)!important}
  /* panels */
  html body #ssx .how-scn .pn.doc,html body #ssx .how-scn .pn.ga{background:#121216!important;color:#ECEBE7!important;font-family:var(--f-d)!important}
  html body #ssx .how-scn .doc-bar,html body #ssx .how-scn .ga-h{background:#18181D!important;border-bottom:1px solid rgba(255,255,255,.07)!important;color:#ECEBE7!important}
  html body #ssx .how-scn .doc-t,html body #ssx .how-scn .ga-crumb{color:#ECEBE7!important;border-left-color:rgba(255,255,255,.1)!important}
  html body #ssx .how-scn .ga-h b{color:#A9A7A1!important}
  html body #ssx .how-scn .doc-ic,html body #ssx .how-scn .rep-ic{background:linear-gradient(135deg,#A78BFA,#7C5CF0)!important}
  html body #ssx .how-scn .doc-ic::after{background:repeating-linear-gradient(rgba(255,255,255,.9) 0 1.5px,transparent 1.5px 3px)!important}
  html body #ssx .how-scn .doc-tag,html body #ssx .how-scn .ga-date{color:#A9A7A1!important;border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.03)}
  html body #ssx .how-scn .doc-page{background:transparent!important;box-shadow:none!important;border-radius:0!important;margin:0!important}
  html body #ssx .how-scn .doc-meta,html body #ssx .how-scn .doc-th,html body #ssx .how-scn .ga-th,html body #ssx .how-scn .doc-legend,html body #ssx .how-scn .doc-kv span,
  html body #ssx .how-scn .doc-sign,html body #ssx .how-scn .doc-spark span,html body #ssx .how-scn .rep-cards span,html body #ssx .how-scn .ga-foot{color:#8E8C86!important;font-family:var(--f-m)!important;letter-spacing:.04em}
  html body #ssx .how-scn .doc-th,html body #ssx .how-scn .doc-tr,html body #ssx .how-scn .ga-th,html body #ssx .how-scn .ga-tr,html body #ssx .how-scn .doc-sign{border-color:rgba(255,255,255,.06)!important}
  html body #ssx .how-scn .doc-tr,html body #ssx .how-scn .ga-tr{color:#DAD8D3!important}
  html body #ssx .how-scn .doc-kv>div,html body #ssx .how-scn .rep-cards>div{border-color:rgba(255,255,255,.08)!important;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border-radius:10px!important}
  html body #ssx .how-scn .doc-kv b,html body #ssx .how-scn .rep-cards b{color:#F4F3EF!important;font-weight:600!important;letter-spacing:-.02em}
  html body #ssx .how-scn .doc-sign b{color:#ECEBE7!important}
  html body #ssx .how-scn .doc-ol li{color:#DAD8D3}
  html body #ssx .how-scn .doc-ol li span{color:#A78BFA!important;font-family:var(--f-m);font-weight:500!important}
  html body #ssx .how-scn .rep-cards em.up{color:#5EE6A8!important}
  html body #ssx .how-scn .doc-mix i.h,html body #ssx .how-scn .doc-legend i.h,html body #ssx .how-scn .sev i.h{background:#FF7A6B!important}
  html body #ssx .how-scn .doc-mix i.m,html body #ssx .how-scn .doc-legend i.m,html body #ssx .how-scn .sev i.m{background:#F5C451!important}
  html body #ssx .how-scn .doc-mix i.l,html body #ssx .how-scn .doc-legend i.l,html body #ssx .how-scn .sev i.l{background:#5EE6A8!important}
  /* charts: violet line on dark */
  html body #ssx .how-scn svg [stroke="#1a73e8"]{stroke:#A78BFA!important}
  html body #ssx .how-scn svg stop{stop-color:#8B5CF6!important}
  html body #ssx .how-scn .ga-foot{background:#18181D!important;border-top:1px solid rgba(255,255,255,.07)!important}
  html body #ssx .how-scn svg [fill="#1a73e8"]{fill:#A78BFA!important}
  html body #ssx .how-scn svg [stroke="#eceff1"],html body #ssx .how-scn svg line{stroke:rgba(255,255,255,.07)!important}
  html body #ssx .how-scn svg [fill^="url"]{opacity:.35}
  html body #ssx .how-scn .ga-h img{filter:saturate(1.05)}
  /* step numbers and text under the screens */
  html body #ssx .how-track .step-no{background:linear-gradient(180deg,#C4B5FD,#7C5CF0);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0!important;color:transparent!important;font-weight:500!important;opacity:.9}
}

/* platform band on inner pages (replaces the big outlined words) */
html body #ssx .plat-in{padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html body #ssx .plat-in .lab{text-align:center;margin:0 0 18px}
html body #ssx .chip.t{padding:12px 22px}
/* "Costs" note links on city pages */
html body #ssx #h-cost~.note a,html body #ssx section[aria-labelledby="h-cost"] .note a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px}
html body #ssx section[aria-labelledby="h-cost"] .note{margin-top:22px}
@media (min-width:1025px){html body #ssx section[aria-labelledby="h-cost"] .plist{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Google-style report panels (.pn.ga) as dark glass on every page and width ---- */
html:root body #ssx .pn.ga{background:linear-gradient(180deg,#16161B,#101014)!important;color:#ECEBE7!important;font-family:var(--f-d)!important;
  border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 30px 60px -36px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)!important;overflow:hidden}
html:root body #ssx .pn.ga .ga-h{background:rgba(255,255,255,.025)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;color:#ECEBE7!important}
html:root body #ssx .pn.ga .ga-h b{color:#F4F3EF!important;font-weight:600!important;letter-spacing:-.01em}
html:root body #ssx .pn.ga .ga-crumb{color:#A9A7A1!important;border-left-color:rgba(255,255,255,.12)!important}
html:root body #ssx .pn.ga .ga-date{color:#A9A7A1!important;border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.03)!important;border-radius:999px!important;font-family:var(--f-m)!important;font-size:.78em!important;letter-spacing:.02em}
html:root body #ssx .pn.ga .ga-th{color:#8E8C86!important;font-family:var(--f-m)!important;font-size:.74em!important;letter-spacing:.08em;text-transform:uppercase;border-bottom-color:rgba(255,255,255,.07)!important}
html:root body #ssx .pn.ga .ga-tr{color:#DAD8D3!important;border-bottom-color:rgba(255,255,255,.05)!important}
html:root body #ssx .pn.ga .ga-foot{background:rgba(255,255,255,.025)!important;border-top:1px solid rgba(255,255,255,.07)!important;color:#8E8C86!important}
html:root body #ssx .pn.ga svg [stroke="#1a73e8"]{stroke:#A78BFA!important}
html:root body #ssx .pn.ga svg [fill="#1a73e8"]{fill:#A78BFA!important}
html:root body #ssx .pn.ga svg stop{stop-color:#8B5CF6!important}
html:root body #ssx .pn.ga svg [stroke="#eceff1"],html:root body #ssx .pn.ga svg line{stroke:rgba(255,255,255,.07)!important}
html:root body #ssx .pn.ga .trk-bad{color:#FF8A7A!important;opacity:.75;text-decoration-color:rgba(255,138,122,.8)}
html:root body #ssx .pn.ga .trk-good{color:#F4F3EF!important}
html:root body #ssx .pn.ga .trk-good em{color:#5EE6A8!important;background:rgba(94,230,168,.1)!important;box-shadow:inset 0 0 0 1px rgba(94,230,168,.22);font-family:var(--f-m)}
html:root body #ssx .pn.ga .trk-src{background:rgba(142,124,255,.06)!important;color:#A9A7A1!important;border-bottom:0!important}
html:root body #ssx .pn.ga .trk-src span:first-child{color:#C9BEFF}
html:root body #ssx .pn.ga .ga-tabs{border-bottom:1px solid rgba(255,255,255,.07)!important}
html:root body #ssx .pn.ga .ga-tabs>div span{color:#8E8C86!important}
html:root body #ssx .pn.ga .ga-tabs>div b,html:root body #ssx .pn.ga .ga-tabs>div b span{color:#F4F3EF!important;font-weight:500!important;letter-spacing:-.02em}
html:root body #ssx .pn.ga .ga-tabs>div.on{background:linear-gradient(180deg,rgba(142,124,255,.12),rgba(142,124,255,.02))!important;box-shadow:inset 0 -2px 0 #A78BFA!important}
html:root body #ssx .pn.ga .ga-tabs>div.on span{color:#C9BEFF!important}
html:root body #ssx .pn.ga .ga-tabs .strike,html:root body #ssx .pn.ga .ga-tabs>div b .strike{color:#6E6C67!important}
html:root body #ssx .pn.ga svg [stroke="#e8eaed"],html:root body #ssx .pn.ga svg [stroke="#e8eaed"] path{stroke:rgba(255,255,255,.07)!important}
html:root body #ssx .pn.ga svg [stroke="#9aa0a6"]{stroke:rgba(255,255,255,.28)!important}
html:root body #ssx .pn.ga svg [fill="#9aa0a6"]{fill:rgba(255,255,255,.28)!important}
html:root body #ssx .pn.ga .ga-x{color:#6E6C67!important;font-family:var(--f-m)}
html:root body #ssx .pn.ga .gst{color:#DAD8D3!important}
html:root body #ssx .pn.ga .gst i{background:#5EE6A8!important;box-shadow:0 0 8px rgba(94,230,168,.5)}
html:root body #ssx .pn.ga .gst i.r{background:#FF7A6B!important;box-shadow:0 0 8px rgba(255,122,107,.5)}
html:root body #ssx .pn.ga .gst i.spin{background:transparent!important;box-shadow:none;border-color:rgba(255,255,255,.4)!important;border-right-color:transparent!important}
html:root body #ssx .pn.ga .fig-bars .bar b{color:#F4F3EF!important}
html:root body #ssx .pn.ga .fig-bars .bar i{background:linear-gradient(90deg,#7C5CF0,#A78BFA)!important}
html:root body #ssx .pn.ga .fig-bars .bar i.b{background:linear-gradient(90deg,#C9A24A,#F5C451)!important}

/* ---- Bigger free tools (feed checker, search terms, placements, scripts, A/B, schema) ---- */
html body #ssx .px .t-out.px-out{position:static;gap:18px}
html body #ssx .px[data-px] .t-in{gap:18px}
html body #ssx .drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:170px;padding:26px 20px;border-radius:20px;text-align:center;cursor:pointer;
  border:1.5px dashed rgba(167,139,250,.45);background:radial-gradient(80% 120% at 50% 0%,rgba(142,124,255,.12),transparent 70%),rgba(255,255,255,.02);transition:border-color .2s,background .2s}
html body #ssx .drop:hover,html body #ssx .drop.on{border-color:#A78BFA;background:radial-gradient(80% 120% at 50% 0%,rgba(142,124,255,.22),transparent 70%),rgba(255,255,255,.03)}
html body #ssx .drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
html body #ssx .drop b{font:600 18px/1.25 var(--f-d);color:#F4F3EF;letter-spacing:-.01em}
html body #ssx .drop>span:not(.drop-ic){font-size:14px;color:#9A988F;max-width:520px;line-height:1.45}
html body #ssx .drop-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#A78BFA,#7C5CF0);box-shadow:0 12px 30px -12px rgba(142,124,255,.9);margin-bottom:6px}
html body #ssx .drop-ic svg{width:22px;height:22px;fill:none;stroke:#0B0B0C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body #ssx .px-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
html body #ssx .px-f{font:500 12.5px var(--f-m);color:#8E8C86;letter-spacing:.03em;overflow-wrap:anywhere}
html body #ssx .cbtn.ghost{background:transparent;color:#ECEBE7;border:1px solid rgba(244,243,239,.2)}
html body #ssx .cbtn.ghost:hover{border-color:#A78BFA;color:#fff}
html body #ssx .tool .fld.chk{flex-direction:row;align-items:center;gap:10px}
html body #ssx .tool .fld.chk input{width:22px;min-height:22px;height:22px;padding:0;flex:none}
html body #ssx .px-sum{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:24px;align-items:end}
html body #ssx .px-sum .outs{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
html body #ssx .px-sum .outs>div{border-bottom:0;border-left:1px solid var(--line);padding:6px 0 6px 16px}
html body #ssx .px-btns{display:flex;gap:10px;flex-wrap:wrap}
html body #ssx .rtbl-w{border:1px solid rgba(244,243,239,.08);border-radius:16px;overflow:auto;max-height:560px;background:linear-gradient(180deg,#141418,#0F0F12)}
html body #ssx .rtbl-w.tall{max-height:520px}
html body #ssx .rtbl{width:100%;border-collapse:collapse;font-size:14px;color:#DAD8D3}
html body #ssx .rtbl th{position:sticky;top:0;z-index:1;background:#18181D;text-align:left;font:500 11px/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#8E8C86;padding:12px 14px;border-bottom:1px solid rgba(244,243,239,.08);white-space:nowrap}
html body #ssx .rtbl td{padding:12px 14px;border-bottom:1px solid rgba(244,243,239,.05);vertical-align:top}
html body #ssx .rtbl tr:last-child td{border-bottom:0}
html body #ssx .rtbl tbody tr:hover td{background:rgba(142,124,255,.05)}
html body #ssx .rtbl td b{display:block;font-weight:600;color:#F4F3EF;overflow-wrap:anywhere}
html body #ssx .rtbl td small{display:block;margin-top:3px;font-size:13px;color:#8E8C86;line-height:1.45;overflow-wrap:anywhere}
html body #ssx .rtbl .nm{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
html body #ssx .rtbl .ids{font:500 12px/1.5 var(--f-m);color:#A9A7A1;overflow-wrap:anywhere;min-width:140px}
html body #ssx .rtbl .ck{width:36px}
html body #ssx .rtbl .ck input{width:18px;height:18px;accent-color:#8E7CFF}
html body #ssx .rtbl .why{font-size:13px;color:#C9BEFF}
html body #ssx .rtbl .sv{display:inline-block;padding:3px 8px;border-radius:999px;font:500 11px var(--f-m);letter-spacing:.04em;white-space:nowrap}
html body #ssx .rtbl .sev-error .sv{color:#FF8A7A;background:rgba(255,122,107,.1);box-shadow:inset 0 0 0 1px rgba(255,122,107,.25)}
html body #ssx .rtbl .sev-warn .sv{color:#F5C451;background:rgba(245,196,81,.1);box-shadow:inset 0 0 0 1px rgba(245,196,81,.25)}
html body #ssx .rtbl .sev-info .sv{color:#A9A7A1;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
html body #ssx .rtbl .tagk{font:500 11px var(--f-m);color:#A9A7A1;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);white-space:nowrap}
html body #ssx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html body #ssx code.negs{white-space:pre-wrap;max-height:220px;overflow:auto;display:block}
/* scripts library */
html body #ssx .px.scripts{gap:16px}
html body #ssx .scr-list{display:grid;gap:14px}
html body #ssx .scr{border-radius:22px;border:1px solid rgba(244,243,239,.08);background:linear-gradient(180deg,#151519,#0F0F12);padding:clamp(18px,2.2vw,28px);display:grid;gap:16px}
html body #ssx .scr-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start}
html body #ssx .scr-n{font:600 15px var(--f-m);color:#A78BFA;padding-top:3px}
html body #ssx .scr h3{font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.02em;color:#F4F3EF;margin:0}
html body #ssx .scr p{font-size:15px;color:#A9A7A1;line-height:1.55;margin-top:6px;max-width:760px}
html body #ssx .scr-f{font:500 11px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#5EE6A8;padding:6px 10px;border-radius:999px;background:rgba(94,230,168,.08);box-shadow:inset 0 0 0 1px rgba(94,230,168,.2);white-space:nowrap}
html body #ssx .scr details{border-radius:14px;border:1px solid rgba(244,243,239,.08);background:#0B0B0D;overflow:hidden}
html body #ssx .scr summary{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;font:500 14px var(--f-d);color:#ECEBE7;list-style:none}
html body #ssx .scr summary::-webkit-details-marker{display:none}
html body #ssx .scr summary::after{content:"+";font:500 18px/1 var(--f-m);color:#A78BFA}
html body #ssx .scr details[open] summary::after{content:"−"}
html body #ssx .scr-l{margin-left:auto;font:500 12px var(--f-m);color:#6E6C67}
html body #ssx .scr pre,html body #ssx pre.codeout{margin:0;padding:16px;max-height:420px;overflow:auto;border-top:1px solid rgba(244,243,239,.06);font:500 12.5px/1.6 var(--f-m);color:#C9C7C1;white-space:pre;tab-size:2}
html body #ssx pre.codeout{border:1px solid rgba(244,243,239,.08);border-radius:14px;background:#0B0B0D;max-height:460px}
html body #ssx .scr-a{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
html body #ssx .scr-a span{font-size:13px;color:#8E8C86}
/* A/B bars */
html body #ssx .abx{display:grid;gap:10px}
html body #ssx .abx>div{display:grid;grid-template-columns:22px minmax(0,1fr) 72px;gap:12px;align-items:center}
html body #ssx .abx span{font:600 14px var(--f-m);color:#A9A7A1}
html body #ssx .abx i{display:block;height:12px;border-radius:999px;background:rgba(244,243,239,.25);transition:width .5s cubic-bezier(.16,.84,.24,1);min-width:4px}
html body #ssx .abx>div+div i{background:linear-gradient(90deg,#7C5CF0,#A78BFA);box-shadow:0 0 14px rgba(142,124,255,.5)}
html body #ssx .abx b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#F4F3EF}
@media (max-width:760px){
  html body #ssx .px-sum{grid-template-columns:minmax(0,1fr)}
  html body #ssx .px-sum .outs{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #ssx .px-sum .outs>div{border-left:0;border-top:1px solid var(--line);padding:12px 0}
  html body #ssx .scr-h{grid-template-columns:auto minmax(0,1fr)}
  html body #ssx .scr-f{grid-column:2;justify-self:start}
  html body #ssx .rtbl{font-size:13px;min-width:600px}
  html body #ssx .rtbl th,html body #ssx .rtbl td{padding:10px}
}
/* hub previews for the new tools */
html body #ssx .tv-feed{gap:8px}
html body #ssx .tv-feed .fc-s{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
html body #ssx .tv-feed .fc-s b{font:600 30px/1 var(--f-d);color:#F4F3EF;letter-spacing:-.03em}
html body #ssx .tv-feed .fc-s span{font-size:11px;color:#86847E;letter-spacing:.06em}
html body #ssx .tv-feed .fc-r{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12px;color:#B4B2AC;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03);opacity:0;transform:translateY(6px)}
html body #ssx .tv-feed .fc-r i{width:8px;height:8px;border-radius:50%;background:#F5C451;box-shadow:0 0 8px rgba(245,196,81,.6)}
html body #ssx .tv-feed .fc-r.e i{background:#FF7A6B;box-shadow:0 0 8px rgba(255,122,107,.6)}
html body #ssx .tv-feed .fc-r b{font:600 13px var(--f-d);color:#F4F3EF}
html body #ssx .tb.in .tv-feed .fc-r,html body #ssx .tb.in .tv-px .px-r{animation:tv-in .5s var(--d) cubic-bezier(.16,.84,.24,1) forwards}
@keyframes tv-in{to{opacity:1;transform:none}}
html body #ssx .tv-ng{gap:7px}
html body #ssx .tv-ng .ng{display:grid;grid-template-columns:62px minmax(0,1fr) 46px;gap:10px;align-items:center;font-size:12px;color:#B4B2AC}
html body #ssx .tv-ng .ng i{height:9px;border-radius:999px;background:linear-gradient(90deg,#FF7A6B,rgba(255,122,107,.35));width:var(--w);transform:scaleX(.03);transform-origin:left}
html body #ssx .tb.in .tv-ng .ng i{animation:tv-grow-x .9s var(--d) cubic-bezier(.16,.84,.24,1) forwards}
@keyframes tv-grow-x{to{transform:scaleX(1)}}
html body #ssx .tv-ng .ng b{font:600 12px var(--f-d);color:#F4F3EF;text-align:right}
html body #ssx .tv-code{justify-content:space-between;padding:14px 16px}
html body #ssx .tv-code pre{position:relative;margin:0;font:500 11.5px/1.55 var(--f-m);color:#B4B2AC;white-space:pre;overflow:hidden}
html body #ssx .tv-code .c{color:#6E6C67}html body #ssx .tv-code .kw{color:#C9BEFF;text-transform:none;letter-spacing:0;font:inherit}html body #ssx .tv-code .n{color:#5EE6A8}html body #ssx .tv-code .s{color:#A78BFA}html body #ssx .tv-code .v{color:#F5C451}
html body #ssx .tv-chips{position:relative;display:flex;gap:6px}
html body #ssx .tv-chips span{font-size:10.5px;letter-spacing:.06em;color:#B4B2AC;padding:4px 9px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.35);background:rgba(11,11,12,.5)}
html body #ssx .tv-px{gap:7px}
html body #ssx .tv-px .px-r{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12px;color:#B4B2AC;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.03);opacity:0;transform:translateY(6px)}
html body #ssx .tv-px .px-r i{width:12px;height:12px;border-radius:4px;border:1.5px solid #A78BFA;background:rgba(142,124,255,.35)}
html body #ssx .tv-px .px-r em{font-style:normal;font-size:10.5px;color:#FF8A7A}
html body #ssx .tv-ab{gap:10px}
html body #ssx .tv-ab .abv{display:grid;grid-template-columns:16px minmax(0,1fr) 48px;gap:10px;align-items:center;font-size:12px;color:#86847E}
html body #ssx .tv-ab .abv i{height:12px;border-radius:999px;background:rgba(244,243,239,.22);width:var(--w);transform:scaleX(.03);transform-origin:left}
html body #ssx .tv-ab .abv.b i{background:linear-gradient(90deg,#7C5CF0,#A78BFA);box-shadow:0 0 12px rgba(142,124,255,.55)}
html body #ssx .tb.in .tv-ab .abv i{animation:tv-grow-x 1s cubic-bezier(.16,.84,.24,1) forwards}
html body #ssx .tv-ab .abv b{font:600 13px var(--f-d);color:#F4F3EF;text-align:right}
/* bulk mode */
html body #ssx .mode-tabs{display:inline-flex;gap:4px;padding:5px;margin:0 0 18px;border-radius:999px;border:1px solid rgba(244,243,239,.1);background:rgba(255,255,255,.03)}
html body #ssx .mode-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px 10px;border-radius:999px;border:0;background:transparent;color:#A9A7A1;font:500 15px var(--f-d);cursor:pointer}
html body #ssx .mode-tabs button.on{background:var(--acc);color:var(--acc-on);box-shadow:0 10px 30px -12px rgba(var(--acc-rgb),.8)}
html body #ssx .mode-tabs button i{font:500 10px/1 var(--f-m);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:999px;background:rgba(94,230,168,.14);color:#5EE6A8}
html body #ssx .mode-tabs button.on i{background:rgba(11,11,12,.18);color:var(--acc-on)}
html body #ssx .bk-note{font-size:15px;line-height:1.55;color:#A9A7A1;margin:0;max-width:820px}
html body #ssx .bk-set{display:grid;gap:14px;padding:18px;border-radius:18px;border:1px solid rgba(244,243,239,.07);background:rgba(255,255,255,.02)}
html body #ssx .bk-map{display:grid;gap:14px}
html body #ssx .bk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html body #ssx .bk-grid select{min-height:46px!important;font-size:15px!important}
html body #ssx .rtbl.bk td{white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
html body #ssx .rtbl.bk tr.fl td:last-child{color:#FF8A7A}
html body #ssx .rtbl.bk tr:not(.fl) td:last-child{color:#5EE6A8}
html body #ssx .tb-bulk{display:inline-block;margin-left:8px;font:500 10px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:rgba(94,230,168,.12);color:#5EE6A8;vertical-align:middle}
@media (max-width:980px){html body #ssx .bk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){html body #ssx .bk-grid{grid-template-columns:minmax(0,1fr)}html body #ssx .mode-tabs{display:flex}html body #ssx .mode-tabs button{flex:1;justify-content:center;padding-left:10px;padding-right:10px;font-size:14px}}
/* button arrow: a drawn arrow, optically centred, instead of the font's arrow glyph */
html body #ssx .btn .ar{display:inline-block;flex:none;width:1em;height:1em;font-size:inherit;color:inherit;line-height:0;text-indent:-9999px;overflow:hidden;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/contain no-repeat}
html body #ssx .btn{gap:12px;letter-spacing:-.01em}
/* ---- city hero: landmark photo card with local time on glass ---- */
html body #ssx .city-ph{position:relative;margin:0 0 0 auto;max-width:540px;width:100%;aspect-ratio:4/4.3;border-radius:28px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 30px 80px -50px rgba(142,124,255,.55);background:#141418}
html body #ssx .city-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.02);transition:transform 1.6s cubic-bezier(.16,.84,.24,1)}
html body #ssx .city-ph:hover img{transform:scale(1.06)}
html body #ssx .city-ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,0) 22%,rgba(11,11,12,0) 42%,rgba(11,11,12,.55) 70%,rgba(11,11,12,.88) 100%)}
html body #ssx .cp-pill{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font:500 13px/1 var(--f-d);color:#F4F3EF;
  background:rgba(11,11,12,.45);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
html body #ssx .cp-pill i{width:7px;height:7px;border-radius:50%;background:#5EE6A8;box-shadow:0 0 0 4px rgba(94,230,168,.18);animation:cp-pulse 2.4s ease-in-out infinite}
@keyframes cp-pulse{50%{box-shadow:0 0 0 7px rgba(94,230,168,0)}}
html body #ssx .cp-cap{position:absolute;top:22px;right:20px;max-width:46%;text-align:right;font:500 10.5px/1.35 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,243,239,.78);text-shadow:0 1px 8px rgba(0,0,0,.6)}
html body #ssx .cp-glass{position:absolute;left:14px;right:14px;bottom:14px;padding:18px 18px 16px;border-radius:20px;color:#F4F3EF;
  background:linear-gradient(180deg,rgba(20,20,26,.55),rgba(14,14,18,.72));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
html body #ssx .cp-time{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px}
html body #ssx .cp-time .tm{font:600 clamp(40px,4.4vw,58px)/.9 var(--f-d);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
html body #ssx .cp-d{display:flex;flex-direction:column;gap:4px;padding-bottom:3px;font:500 11px/1.25 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#C9C7C1}
html body #ssx .cp-d span:last-child{color:#A78BFA}
html body #ssx .cp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html body #ssx .cp-facts>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);min-width:0}
html body #ssx .cp-facts span{font:500 10px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#9A988F}
html body #ssx .cp-facts b{font:600 14px/1.25 var(--f-d);color:#F4F3EF;overflow-wrap:anywhere}
html body #ssx .cp-sec{margin:12px 2px 0;font-size:13.5px;line-height:1.45;color:#DAD8D3}
html body #ssx .cp-sec span{display:inline-block;margin-right:8px;font:500 10px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#9A988F}
@media (max-width:980px){html body #ssx .city-ph{margin:8px auto 0;max-width:560px}}
@media (max-width:480px){html body #ssx .city-ph{aspect-ratio:4/5;border-radius:22px}html body #ssx .cp-facts>div{padding:9px 10px}html body #ssx .cp-facts b{font-size:13px}html body #ssx .cp-cap{display:none}}
/* ---- AI checker and prompt builders ---- */
html body #ssx .aichk-f{display:flex;gap:10px;align-items:stretch}
html body #ssx .aichk-f .fld{flex:1}
html body #ssx .aichk-f input{min-height:58px!important;font-size:18px!important;border-radius:999px!important;padding:0 22px!important}
html body #ssx .aichk-f .cbtn{min-height:58px;padding:0 28px;font-size:16px}
html body #ssx .aichk-f .cbtn[disabled]{opacity:.7;cursor:progress}
html body #ssx .aichk-load{display:flex;align-items:center;gap:14px;padding:26px 4px;color:#A9A7A1}
html body #ssx .aichk-load i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(167,139,250,.3);border-top-color:#A78BFA;animation:ssxSpin .8s linear infinite}
@keyframes ssxSpin{to{transform:rotate(360deg)}}
html body #ssx .aichk-top{display:flex;align-items:center;gap:24px}
html body #ssx .aichk-ring{--c:#5EE6A8;position:relative;flex:none;width:132px;height:132px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#0F0F12 78%,transparent 79% 100%),conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
html body #ssx .lvl-mid .aichk-ring{--c:#F5C451}html body #ssx .lvl-low .aichk-ring{--c:#FF7A6B}
html body #ssx .aichk-ring b{font:600 44px/1 var(--f-d);letter-spacing:-.04em;color:#fff}
html body #ssx .aichk-ring span{font:500 11px var(--f-m);color:#8E8C86;letter-spacing:.08em}
html body #ssx .aichk-top h3{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em;margin:0;color:#F4F3EF}
html body #ssx .aichk-top p{color:#A9A7A1;margin-top:6px}
html body #ssx .ai-box{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 20px;border-radius:18px;
  background:linear-gradient(120deg,rgba(142,124,255,.16),rgba(142,124,255,.04));border:1px solid rgba(167,139,250,.35)}
html body #ssx .ai-box b{display:block;font:600 17px var(--f-d);color:#F4F3EF}
html body #ssx .ai-box span{display:block;font-size:14px;color:#B4B2AC;margin-top:3px}
html body #ssx .ai-box.pri{box-shadow:0 20px 60px -30px rgba(142,124,255,.8)}
html body #ssx .ai-go a.cbtn{display:inline-flex;align-items:center;text-decoration:none}
html body #ssx .aichk-bots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html body #ssx .aichk-bots>div{padding:16px;border-radius:16px;border:1px solid rgba(244,243,239,.08);background:rgba(255,255,255,.02);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
html body #ssx .aichk-bots h4{width:100%;margin:0 0 4px;font:500 11px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#8E8C86}
html body #ssx .aichk-bots span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:13px;color:#DAD8D3;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
html body #ssx .aichk-bots i{width:7px;height:7px;border-radius:50%;background:#5EE6A8}
html body #ssx .aichk-bots .no i{background:#FF7A6B}html body #ssx .aichk-bots .no{color:#FFB3A8}
html body #ssx .aichk-t .st-pass .sv{color:#5EE6A8;background:rgba(94,230,168,.1)}
html body #ssx .aichk-t .st-warn .sv{color:#F5C451;background:rgba(245,196,81,.1)}
html body #ssx .aichk-t .st-fail .sv{color:#FF8A7A;background:rgba(255,122,107,.1)}
html body #ssx .pb .t-out{gap:14px}
html body #ssx .pb-out{width:100%;min-height:360px;resize:vertical;padding:16px;border-radius:16px;border:1px solid rgba(244,243,239,.1);background:#0B0B0D;color:#DAD8D3;font:500 13px/1.6 var(--f-m)}
html body #ssx .pb-note{font-size:13.5px;color:#8E8C86;line-height:1.5}
@media (max-width:640px){html body #ssx .aichk-f{flex-direction:column}html body #ssx .aichk-top{flex-direction:column;align-items:flex-start}html body #ssx .aichk-bots{grid-template-columns:1fr}}
/* hub previews: AI */
html body #ssx .tv-ai{flex-direction:row;align-items:center;gap:22px}
html body #ssx .tv-ai .air{position:relative;flex:none;width:118px;height:118px}
html body #ssx .tv-ai svg{width:118px;height:118px;transform:rotate(-90deg)}
html body #ssx .tv-ai .trk{fill:none;stroke:rgba(244,243,239,.08);stroke-width:11}
html body #ssx .tv-ai .seg{fill:none;stroke:#5EE6A8;stroke-width:11;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.4s cubic-bezier(.16,.84,.24,1)}
html body #ssx .tb.in .tv-ai .seg{stroke-dasharray:82 100}
html body #ssx .tv-ai .air b{position:absolute;inset:0;display:grid;place-items:center;font:600 30px var(--f-d);color:#F4F3EF}
html body #ssx .tv-ai .aib{display:grid;gap:12px;min-width:0}
html body #ssx .tv-ai .bots{display:flex;flex-wrap:wrap;gap:6px}
html body #ssx .tv-ai .bots span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#B4B2AC;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(5px)}
html body #ssx .tb.in .tv-ai .bots span{animation:tv-in .5s var(--d) forwards}
html body #ssx .tv-ai .bots i{width:6px;height:6px;border-radius:50%;background:#5EE6A8}html body #ssx .tv-ai .bots .no i{background:#FF7A6B}
html body #ssx .tv-prompt{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:8px 13px;border-radius:999px;background:#F4F3EF;color:#0B0B0C;font:600 12px var(--f-d)}
html body #ssx .tv-prompt i{width:10px;height:10px;border-right:2px solid;border-top:2px solid;transform:rotate(45deg)}
html body #ssx .tv-pr{gap:9px;justify-content:center}
html body #ssx .tv-pr .pr-q,html body #ssx .tv-pr .pr-a{position:relative;font-size:12px;line-height:1.4;padding:9px 12px;border-radius:12px;color:#DAD8D3;max-width:92%}
html body #ssx .tv-pr .pr-q{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
html body #ssx .tv-pr .pr-a{margin-left:auto;background:rgba(142,124,255,.16);border:1px solid rgba(167,139,250,.35);color:#F4F3EF}
html body #ssx .tv-pr span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8E8C86;margin-bottom:2px}
html body #ssx .tv-pr .pr-a i{display:inline-block;width:6px;height:12px;margin-left:3px;vertical-align:-2px;background:#A78BFA;animation:pr-blink 1s steps(2) infinite}
@keyframes pr-blink{50%{opacity:0}}
@media (max-width:760px){html body #ssx .rtbl.aichk-t{min-width:0}html body #ssx .rtbl.aichk-t td:nth-child(2){font-size:12.5px}}
/* ---- tool pages: premium hero ---- */
html body #ssx [hidden]{display:none!important}
html body #ssx .tvh{min-height:0;cursor:default;padding-bottom:6px;max-width:560px;margin-left:auto}
html body #ssx .tvh:hover{transform:none}
html body #ssx .tvh .tv{height:auto;min-height:250px;margin:6px 16px 14px;zoom:1.18}
html body #ssx .tvh-bar{display:flex;align-items:center;gap:12px;padding:16px 20px 8px}
html body #ssx .tvh-dots{display:flex;gap:6px}html body #ssx .tvh-dots i{width:9px;height:9px;border-radius:50%;background:rgba(244,243,239,.16)}
html body #ssx .tvh-dots i:first-child{background:#FF7A6B}html body #ssx .tvh-dots i:nth-child(2){background:#F5C451}html body #ssx .tvh-dots i:last-child{background:#5EE6A8}
html body #ssx .tvh-t{flex:1;font:500 11.5px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#9A988F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #ssx .tvh-live{display:inline-flex;align-items:center;gap:7px;font:500 11px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#5EE6A8}
html body #ssx .tvh-live i{width:7px;height:7px;border-radius:50%;background:#5EE6A8;box-shadow:0 0 0 4px rgba(94,230,168,.15);animation:cp-pulse 2.4s ease-in-out infinite}
html body #ssx .tvh-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 20px 16px;flex-wrap:wrap}
html body #ssx .tvh-stat b{display:block;font:600 26px/1 var(--f-d);letter-spacing:-.03em;color:#F4F3EF}
html body #ssx .tvh-stat span{font:500 11px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#8E8C86}
html body #ssx .tvh-chips{display:flex;gap:6px;flex-wrap:wrap}
html body #ssx .tvh-chips span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:12.5px;color:#DAD8D3;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
html body #ssx .tvh-chips i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
html body #ssx .th-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
html body #ssx .th-badges{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
html body #ssx .th-badges li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#B4B2AC}
html body #ssx .th-badges li::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(94,230,168,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235EE6A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center/12px no-repeat}
html body #ssx .tool-sec{scroll-margin-top:90px}
@media (max-width:980px){html body #ssx .tvh{margin:10px auto 0}html body #ssx .tvh .tv{zoom:1}}
html body #ssx .rel-all{margin-top:28px;text-align:center}
/* ---------- Ad tracking checker ---------- */
html body #ssx .tchk-f{flex-wrap:wrap}
html body #ssx .tchk-comp{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
html body #ssx .tchk-comp input{min-height:50px!important;font-size:16px!important;border-radius:999px!important;padding:0 20px!important}
html body #ssx .tchk-comp[hidden]{display:none!important}
html body #ssx .tchk-add{margin-top:12px;background:none;border:0;padding:4px 0;color:#C4B5FD;font:500 14px var(--f-b);cursor:pointer}
html body #ssx .tchk-add:hover{color:#fff}
html body #ssx .tchk-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
html body #ssx .tchk-g>div{padding:16px;border-radius:16px;border:1px solid rgba(244,243,239,.08);background:rgba(255,255,255,.02);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
html body #ssx .tchk-g h4{width:100%;margin:0 0 4px;font:500 11px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#8E8C86}
html body #ssx .tchk-g span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:13px;color:#DAD8D3;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
html body #ssx .tchk-g span small{font:500 11px var(--f-m);color:#8E8C86}
html body #ssx .tchk-g i{width:7px;height:7px;border-radius:50%;background:#5EE6A8}
html body #ssx .tchk-g .none{color:#8E8C86;background:none;border-style:dashed}
html body #ssx .tchk-h{margin:26px 0 10px;font:600 20px var(--f-d);color:#F4F3EF}
html body #ssx .tchk-m td.ok{color:#5EE6A8}html body #ssx .tchk-m td.no{color:#FF8A7A}
html body #ssx .tchk-m th{text-align:left;white-space:nowrap}
html body #ssx .tchk-bout:empty{display:none}
html body #ssx .tv-trk .tv-prompt{font-family:var(--f-m)}
@media (max-width:900px){html body #ssx .tchk-g{grid-template-columns:1fr 1fr}}
@media (max-width:640px){html body #ssx .tchk-g,html body #ssx .tchk-comp{grid-template-columns:1fr}}
html body #ssx .tchk-g span{flex-wrap:wrap;row-gap:2px}