/* motion.css: concept v5 (1 Nov 2026). The Cloudspital-style motion system on the Forbes India page:
   living backdrop, glass cards, one reveal grammar, hero entrance, a glass dock, a formats picker
   and an auto-playing "how it works". Our colours, fonts and copy; their mechanics only. */
:root{--fx-ease:cubic-bezier(.16,1,.3,1);--fx-ease-io:cubic-bezier(.65,0,.35,1);
  --fx-glass-a:rgba(255,255,255,.84);--fx-glass-b:rgba(255,255,255,.56);--fx-edge:rgba(255,255,255,.75);
  --fx-shadow:0 2px 6px rgba(15,42,34,.05),0 26px 50px -28px rgba(15,42,34,.32);
  --fx-b1:rgba(76,187,138,.17);--fx-b2:rgba(20,96,118,.10);--fx-b3:rgba(255,196,160,.20);--fx-b4:rgba(127,216,176,.16);
  --fx-tint:rgba(244,246,243,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fx-glass-a:rgba(26,37,32,.80);--fx-glass-b:rgba(19,28,24,.62);--fx-edge:rgba(255,255,255,.10);
  --fx-shadow:0 2px 6px rgba(0,0,0,.2),0 26px 50px -28px rgba(0,0,0,.6);
  --fx-b1:rgba(76,187,138,.10);--fx-b2:rgba(20,96,118,.16);--fx-b3:rgba(255,150,100,.06);--fx-b4:rgba(127,216,176,.07);--fx-tint:rgba(19,28,24,.5)}}

/* 1. living backdrop: very light, fixed behind the whole page */
.fx-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-bg i{position:absolute;border-radius:50%;will-change:transform;animation:fx-drift var(--d,38s) ease-in-out infinite alternate;
  background:radial-gradient(closest-side,var(--c) 0,var(--c) 32%,transparent 100%)}
.fx-bg .b1{width:62vmax;height:62vmax;left:-26vmax;top:-24vmax;--c:var(--fx-b1);--d:36s}
.fx-bg .b2{width:54vmax;height:54vmax;right:-22vmax;top:-8vmax;--c:var(--fx-b2);--d:41s;animation-delay:-9s}
.fx-bg .b3{width:58vmax;height:58vmax;left:6vmax;bottom:-36vmax;--c:var(--fx-b3);--d:45s;animation-delay:-15s}
.fx-bg .b4{width:40vmax;height:40vmax;right:-6vmax;bottom:-16vmax;--c:var(--fx-b4);--d:33s;animation-delay:-4s}
@keyframes fx-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vmax,-4vmax,0) scale(1.12)}100%{transform:translate3d(-4vmax,5vmax,0) scale(.94)}}
html.fx section[style*="paper-2"]{background:var(--fx-tint)!important}

/* 2. glass cards */
html.fx .fgroup,html.fx .why>*,html.fx .hn,html.fx .ncta,html.fx .pricenote,html.fx .ind:not(.img),html.fx .fx-panel,html.fx .fx-screen,html.fx .fx-steps .fx-step.is-on{
  background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);
  box-shadow:inset 0 1px 0 var(--fx-edge),var(--fx-shadow);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}

/* 3. one reveal grammar (set by motion.js on html.m-on) */
html.m-on .rv.pre{color:inherit!important}
html.m-on .lift-wait{opacity:1;transform:none}
html.m-on [data-m]:not([data-m-in]){opacity:0}
html.m-on [data-m][data-m-in]:not([data-m-done]){animation:fx-up .9s var(--fx-ease) var(--md,0s) both}
html.m-on [data-m=head][data-m-in]:not([data-m-done]){animation-name:fx-head}
html.m-on [data-m=card][data-m-in]:not([data-m-done]){animation-name:fx-card;animation-duration:.85s}
html.m-on [data-m=pop][data-m-in]:not([data-m-done]){animation-name:fx-pop;animation-duration:.6s}
html.m-on [data-m=media][data-m-in]:not([data-m-done]){animation-name:fx-wipe;animation-duration:1.25s}
@keyframes fx-up{0%{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes fx-head{0%{opacity:0;translate:0 14px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes fx-card{0%{opacity:0;translate:0 28px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes fx-pop{0%{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes fx-wipe{0%{opacity:1;clip-path:inset(0 0 100% 0);scale:1.08}to{opacity:1;clip-path:inset(0 0 0 0);scale:1}}

/* 4. hero entrance: lines rise out of a blur, accent words shimmer, floating cards pop in, then keep floating */
html.m-on .hx-center>*,html.m-on .hx-h1>span{animation:fx-head 1s var(--fx-ease) var(--hd,0s) both}
html.m-on .hx-h1>.l1{--hd:.05s}html.m-on .hx-h1>.l2{--hd:.14s}html.m-on .hx-h1>.l3{--hd:.23s}
html.m-on .hx-center>.hx-lede{--hd:.34s}html.m-on .hx-center>.hx-ctas{--hd:.42s}html.m-on .hx-center>.hx-note{--hd:.5s}html.m-on .hx-center>.hx-mini{--hd:.56s}html.m-on .hx-center>.hx-rail{--hd:.6s}
html.m-on .hx-center>.hx-h1{animation:none}
.hx-h1 .l2 em{background:linear-gradient(100deg,#146076 0%,#238478 30%,#4CBB8A 50%,#238478 70%,#146076 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-sheen 9s ease-in-out infinite alternate;padding-right:.06em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hx-h1 .l2 em{background-image:linear-gradient(100deg,#6FC7D6 0%,#5CC9A0 40%,#B8F0D6 50%,#5CC9A0 60%,#6FC7D6 100%)}}
@keyframes fx-sheen{to{background-position:100% 0}}
html.m-on .hx-fl{animation:fx-flpop .9s var(--fx-ease) var(--fd,.6s) both,hxbob 7s ease-in-out infinite}
html.m-on .hx-fl.p2,html.m-on .hx-fl.p5,html.m-on .hx-fl.p8{animation-duration:.9s,8.5s;animation-delay:var(--fd,.6s),-2s}
html.m-on .hx-fl.p3,html.m-on .hx-fl.p6{animation-duration:.9s,9.5s;animation-delay:var(--fd,.6s),-4s}
.hx-fl.p1{--fd:.62s}.hx-fl.p5{--fd:.72s}.hx-fl.p2{--fd:.82s}.hx-fl.p6{--fd:.92s}.hx-fl.p3{--fd:1.02s}.hx-fl.p7{--fd:1.12s}.hx-fl.p4{--fd:1.22s}.hx-fl.p8{--fd:1.32s}
@keyframes fx-flpop{0%{opacity:0;scale:.82;filter:blur(8px)}to{opacity:1;scale:1;filter:blur(0)}}
/* live bits on two chips: a pulse on the money-back promise, the link types itself */
.hx-fl.p6 .i{position:relative}
.fx-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1F9D4C;margin-right:2px;box-shadow:0 0 0 0 rgba(31,157,76,.5);animation:fx-ping 2s ease-out infinite}
@keyframes fx-ping{0%{box-shadow:0 0 0 0 rgba(31,157,76,.45)}80%,100%{box-shadow:0 0 0 10px rgba(31,157,76,0)}}
.fx-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation:fx-typein 2.4s steps(40,end) 1.6s forwards}
@keyframes fx-typein{to{max-width:42ch}}
/* the devices sit on a drawn arc */
.devstage{isolation:isolate}
.fx-arc{position:absolute;left:50%;top:44%;width:min(92%,820px);translate:-50% -50%;z-index:-1;pointer-events:none;overflow:visible}
.fx-arc path{fill:none;stroke-linecap:round}
.fx-arc .a1{stroke:url(#fx-arcg);stroke-width:34;stroke-dasharray:1200;stroke-dashoffset:1200}
.fx-arc .a2{stroke:rgba(20,96,118,.18);stroke-width:1.4;stroke-dasharray:3 9}
.fx-arc.on .a1{animation:fx-draw 1.8s var(--fx-ease) .1s forwards}
@keyframes fx-draw{to{stroke-dashoffset:0}}

/* 5. glass dock (replaces the phone sticky bar; on desktop it appears once the hero buttons scroll away) */
.sbar{display:none!important}
.fx-dock{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:4px;padding:6px;
  border-radius:999px;translate:-50% 0;background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);
  box-shadow:inset 0 1px 0 var(--fx-edge),0 2px 8px rgba(15,42,34,.06),0 24px 48px -18px rgba(15,42,34,.38);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  transition:opacity .45s var(--fx-ease),translate .6s var(--fx-ease)}
.fx-dock.hide{opacity:0;translate:-50% 130%;pointer-events:none}
.fx-d{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;color:var(--ink);text-decoration:none;font:500 15px/1 var(--sans);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.fx-d .i{width:18px;height:18px}
.fx-d:hover{background:rgba(42,140,127,.10)}
.fx-d.fx-call{background:var(--grad-cta,linear-gradient(135deg,#146076,#2A8C7F));color:#fff;font-weight:600;padding:0 20px;box-shadow:0 10px 22px -12px rgba(20,96,118,.7)}
.fx-d.fx-wa .i{color:#1F9D4C}
.fx-d.is-here{background:#fff;box-shadow:0 6px 16px -8px rgba(15,42,34,.35);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-d.is-here{background:rgba(255,255,255,.12);color:var(--ink)}}
.fx-sep{width:1px;height:26px;background:var(--line-2);margin-inline:4px}
.fx-d:focus-visible{outline:3px solid #2A8C7F;outline-offset:2px}
@media (max-width:719px){
  .fx-dock{left:12px;right:12px;translate:none;justify-content:space-between;gap:2px;padding:5px}
  .fx-dock.hide{translate:0 130%}
  .fx-d{flex:1;flex-direction:column;justify-content:center;gap:4px;min-height:54px;padding:0 4px;font-size:11px;border-radius:22px}
  .fx-d.fx-call{padding:0 6px}
  .fx-d .lg{display:none}
  .fx-sep{display:none}
  body{padding-bottom:88px}
}
@media (min-width:720px){.fx-d .sm{display:none}}

/* 6. formats picker: tabs on the left, one glass panel on the right; plays by itself until you tap */
.fx-picker{display:grid;gap:22px;margin-top:34px}
.fx-tabs{display:grid;gap:8px;align-content:start}
.fx-tab{position:relative;display:flex;gap:14px;align-items:center;width:100%;padding:16px 18px;border-radius:20px;border:1px solid transparent;background:transparent;
  color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:background .35s,border-color .35s,box-shadow .35s}
.fx-tab:hover{background:rgba(42,140,127,.06)}
.fx-ti{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(42,140,127,.10);color:#146076;transition:background .35s,color .35s}
.fx-ti .i{width:22px;height:22px}
.fx-tt b{display:block;font-weight:600;font-size:18px;line-height:1.25}
.fx-tt small{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin-top:2px}
.fx-tab[aria-selected=true]{background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border-color:var(--fx-edge);box-shadow:inset 0 1px 0 var(--fx-edge),var(--fx-shadow)}
.fx-tab[aria-selected=true] .fx-ti{background:var(--grad-cta,linear-gradient(135deg,#146076,#2A8C7F));color:#fff}
.fx-bar{position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#146076,#4CBB8A);transform:scaleX(0);transform-origin:0 50%}
.fx-picker.play .fx-tab[aria-selected=true] .fx-bar,.fx-stepper.play .fx-step.is-on .fx-bar{transform:scaleX(1);transition:transform var(--fx-cycle,5.2s) linear}
.fx-panels{display:grid}
.fx-panel{grid-area:1/1;display:grid;align-content:start;border-radius:28px;overflow:hidden;visibility:hidden}
.fx-panel.is-on{visibility:visible;animation:fx-card .7s var(--fx-ease) both}
.fx-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A2C35}
.fx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,53,0) 45%,rgba(10,44,53,.6))}
.fx-media img:first-child{width:100%;height:100%;object-fit:cover;display:block}
.fx-panel.is-on .fx-media img:first-child{animation:fx-wipe 1.1s var(--fx-ease) both}
.fx-media .ed-logo{position:absolute;left:16px;bottom:14px;width:96px;height:auto;z-index:1}
.fx-media .kind{position:absolute;right:14px;bottom:13px;z-index:1;padding:4px 10px;border-radius:999px;background:rgba(5,26,32,.55);color:#fff;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.fx-body{padding:22px 24px 26px}
.fx-body h3{margin:0 0 10px;font-size:22px}
.fx-body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fx-body li{display:grid;gap:2px;padding-left:28px;position:relative}
.fx-body li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#2A8C7F 0 3px,rgba(42,140,127,.18) 4px)}
.fx-body li b{font-weight:600}
.fx-body li span{color:var(--muted);font-size:16px;line-height:1.5}
.fx-panel.is-on .fx-body li{animation:fx-up .7s var(--fx-ease) both}
.fx-panel.is-on .fx-body li:nth-child(2){animation-delay:.1s}
@media (min-width:900px){.fx-picker{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:34px;align-items:start}
  .fx-panel.is-on{grid-template-columns:1fr}}

/* 7. how it works: steps on the left, a live screen on the right that acts out each step */
.fx-stepper{display:grid;gap:22px;margin-top:34px}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.fx-step{position:relative;border-radius:20px;border:1px solid transparent;transition:background .35s,border-color .35s}
.fx-sbtn{display:flex;gap:14px;align-items:center;width:100%;padding:16px 18px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;position:relative;border-radius:20px}
.fx-sn{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--mono);color:#146076;background:rgba(42,140,127,.10);transition:background .35s,color .35s}
.fx-step.is-on .fx-sn{background:var(--grad-cta,linear-gradient(135deg,#146076,#2A8C7F));color:#fff}
.fx-st{font-weight:600;font-size:18px}
.fx-step:not(.is-on) .fx-st{color:var(--muted)}
.fx-whobox{display:grid;margin-top:12px;border-radius:20px;border:1px dashed var(--line-2)}
.fx-who{grid-area:1/1;display:grid;align-content:start;margin:0;padding:16px 18px;gap:8px;visibility:hidden}
.fx-who.is-on{visibility:visible;animation:fx-up .6s var(--fx-ease) both}
.fx-who>div{display:grid;grid-template-columns:86px 1fr;gap:10px;font-size:15px;line-height:1.45}
.fx-who dt{font:600 11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#2A8C7F}
.fx-who .ed dt{color:#B7791F}
.fx-who dd{margin:0;color:var(--muted)}
.fx-hint{margin:14px 0 0;font-size:14px;color:var(--muted)}
@media (min-width:900px){.fx-stepper{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:center}}

/* the screen */
.fx-screen{position:relative;border-radius:26px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.fx-chrome{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.fx-chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.fx-url{margin-left:10px;flex:1;min-width:0;padding:6px 12px;border-radius:999px;background:var(--paper-2);font:500 12px/1.3 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-stage{display:grid;padding:22px}
.fx-scene{grid-area:1/1;display:grid;align-content:start;gap:12px;visibility:hidden}
.fx-scene.is-on{visibility:visible}
.fx-scene.is-on>*{animation:fx-up .6s var(--fx-ease) var(--sd,0s) both}
/* scene 1: a WhatsApp-style brief */
.fx-bub{max-width:82%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.45}
.fx-bub.you{justify-self:end;background:#DCF8C6;color:#0D1411;border-bottom-right-radius:6px}
.fx-bub.ex{justify-self:start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:6px}
.fx-bub.ex b{display:block;font-size:12px;color:#2A8C7F;margin-bottom:2px}
.fx-typing{justify-self:start;display:inline-flex;gap:4px;padding:12px 14px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.fx-typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:fx-dot 1s ease-in-out infinite}
.fx-typing i:nth-child(2){animation-delay:.15s}.fx-typing i:nth-child(3){animation-delay:.3s}
@keyframes fx-dot{0%,100%{translate:0 0;opacity:.5}50%{translate:0 -3px;opacity:1}}
.fx-reply{display:grid;justify-items:start}
.fx-reply>*{grid-area:1/1}
.fx-scene.is-on .fx-typing{animation:fx-up .4s var(--fx-ease) .7s both,fx-out .2s ease 1.65s forwards}
.fx-scene.is-on .fx-reply{animation:none}
.fx-scene.is-on .fx-reply .fx-bub{animation:fx-up .6s var(--fx-ease) 1.75s both}
.fx-scope{border-radius:18px;border:1px solid var(--line);background:var(--paper);overflow:hidden}
.fx-scope h4{margin:0;padding:10px 14px;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#146076;background:rgba(42,140,127,.08)}
.fx-scope div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:14px}
.fx-scope dt{color:var(--muted)}.fx-scope dd{margin:0;font-weight:500}
/* scene 2: interview and photos */
.fx-call{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:var(--deep);color:var(--deep-ink)}
.fx-av{display:flex}.fx-av span{width:40px;height:40px;border-radius:50%;border:2px solid var(--deep);background:linear-gradient(135deg,#2A8C7F,#4CBB8A)}
.fx-av span+span{margin-left:-10px;background:linear-gradient(135deg,#F6B496,#E5602A)}
.fx-call b{display:block;font-size:15px}.fx-call small{color:var(--deep-muted);font-size:13px}
.fx-eq{margin-left:auto;display:flex;gap:3px;align-items:end;height:24px}
.fx-eq i{width:4px;height:100%;border-radius:2px;background:#7FD8B0;transform-origin:50% 100%;animation:fx-eqa .9s ease-in-out infinite alternate}
.fx-eq i:nth-child(2){animation-delay:-.3s}.fx-eq i:nth-child(3){animation-delay:-.6s}.fx-eq i:nth-child(4){animation-delay:-.15s}.fx-eq i:nth-child(5){animation-delay:-.45s}
@keyframes fx-eqa{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}
.fx-lbl{font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fx-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fx-ph{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--paper-3)}
.fx-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fx-ph.logo{display:grid;place-items:center;background:var(--paper)}
.fx-ph.logo span{font-weight:700;font-size:15px;letter-spacing:-.02em}
.fx-ph::after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:4px;border-radius:2px;background:linear-gradient(90deg,#4CBB8A,#2A8C7F);transform:scaleX(0);transform-origin:0 50%}
.fx-scene.is-on .fx-ph::after{animation:fx-fill 1.6s var(--fx-ease-io) var(--pd,.6s) forwards}
.fx-ph:nth-child(2){--pd:.9s}.fx-ph:nth-child(3){--pd:1.2s}
@keyframes fx-fill{to{transform:scaleX(1)}}
.fx-pen{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.fx-pen .i{width:18px;height:18px;color:#2A8C7F}
/* scene 3: the draft and the approve tap */
.fx-doc{border-radius:18px;border:1px solid var(--line);background:var(--paper);padding:16px 18px;display:grid;gap:9px}
.fx-doc .tag{justify-self:start;padding:4px 10px;border-radius:999px;font:600 11px/1.4 var(--mono);letter-spacing:.06em;background:var(--tbc-bg);color:var(--tbc)}
.fx-doc h5{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15}
.fx-ln{height:8px;border-radius:4px;background:var(--paper-3)}
.fx-ln.w9{width:92%}.fx-ln.w8{width:80%}.fx-ln.w6{width:62%}
.fx-ln.edit{background:rgba(76,187,138,.35)}
.fx-approve{justify-self:start;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--grad-cta,linear-gradient(135deg,#146076,#2A8C7F));color:#fff;font-weight:600;font-size:15px}
.fx-approve .i{width:18px;height:18px}
.fx-approve{display:inline-grid}
.fx-approve>span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px}
.fx-approve .ok{opacity:0}
.fx-scene.is-on .fx-approve{animation:fx-up .6s var(--fx-ease) .5s both,fx-press .25s ease 1.9s}
.fx-scene.is-on .fx-approve::after{content:"";position:absolute;left:30%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;opacity:0;animation:fx-ripple .7s ease-out 1.95s}
@keyframes fx-press{50%{scale:.94}}
@keyframes fx-ripple{0%{opacity:.5;transform:scale(0)}to{opacity:0;transform:scale(14)}}
.fx-scene.is-on .fx-approve .go{animation:fx-out .2s ease 2.05s forwards}
.fx-scene.is-on .fx-approve .ok{animation:fx-in .3s ease 2.1s forwards}
@keyframes fx-out{to{opacity:0}}
@keyframes fx-in{to{opacity:1}}
.fx-sent{justify-self:start;display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(42,140,127,.10);color:#146076;font-size:14px;font-weight:500}
.fx-sent .i{width:16px;height:16px}
.fx-small{font-size:13px;color:var(--muted)}
/* scene 4: live, labelled */
.fx-live{border-radius:18px;border:1px solid var(--line);background:var(--paper);overflow:hidden;display:grid;grid-template-columns:1fr 112px}
.fx-live .txt{padding:16px 18px;display:grid;gap:8px;align-content:start}
.fx-live .bc{justify-self:start;padding:4px 10px;border-radius:6px;background:#FBF1E4;color:#8A5A14;font:600 11px/1.4 var(--mono);letter-spacing:.1em}
.fx-live h5{margin:0;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15}
.fx-live .by{font-size:12px;color:var(--muted)}
.fx-live img{width:100%;height:100%;object-fit:cover}
.fx-toast{justify-self:end;display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border-radius:16px;background:var(--deep);color:var(--deep-ink);font-size:14px;box-shadow:0 18px 30px -16px rgba(0,0,0,.45)}
.fx-toast .i{width:18px;height:18px;color:#7FD8B0}
.fx-scene.is-on .fx-toast{animation:fx-toastin .7s var(--fx-ease) 1.6s both}
@keyframes fx-toastin{0%{opacity:0;translate:30px 0;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.fx-share{justify-self:start;display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:14px}
.fx-share .i{width:16px;height:16px;color:#0A66C2}
.fx-url .t{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:100%}
.fx-screen[data-on="4"] .fx-url .t{animation:fx-urltype 1.4s steps(30,end) both}
@keyframes fx-urltype{0%{max-width:0}to{max-width:100%}}

/* 8. money-back: the seal pops and a ring draws round it */
.mbg-seal{position:relative}
.fx-ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;overflow:visible}
.fx-ring circle{fill:none;stroke:#C9F26B;stroke-width:2;stroke-dasharray:4 7;opacity:.7;transform-origin:50% 50%;animation:fx-spin 30s linear infinite}
@keyframes fx-spin{to{transform:rotate(1turn)}}

/* concept tag */
.fx-tagc{position:fixed;left:14px;bottom:22px;z-index:44;padding:6px 12px;border-radius:999px;background:#0A2C35;color:#7FD8B0;font:600 12px/1.3 var(--mono);letter-spacing:.04em;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
@media (max-width:719px){.fx-tagc{bottom:96px;font-size:11px}}

@media (prefers-reduced-motion:reduce){
  .fx-bg i,.hx-h1 .l2 em,.fx-ring circle,.fx-eq i,.fx-typing i,.fx-pulse{animation:none!important}
  .fx-type{max-width:none;animation:none}
  .fx-scene.is-on>*,.fx-scene.is-on .fx-reply .fx-bub,.fx-who.is-on,.fx-panel.is-on,.fx-panel.is-on .fx-media img:first-child,.fx-panel.is-on .fx-body li{animation:none!important}
  .fx-scene.is-on .fx-ph::after{animation:none;transform:scaleX(1)}
  .fx-arc .a1{stroke-dashoffset:0}
}
@media (max-width:700px){.fx-bg i{animation:none}}
@media (prefers-reduced-motion:reduce){.fx-typing{display:none}.fx-who:not(.is-on),.fx-scene:not(.is-on),.fx-panel:not(.is-on){visibility:hidden}}

/* phones and small tablets: the thing that moves sits on top, the choices sit right under it */
@media (max-width:899px){
  .fx-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:4px 20px 8px;scroll-snap-type:x mandatory}
  .fx-tabs::-webkit-scrollbar{display:none}
  .fx-tab{flex:none;width:auto;scroll-snap-align:start;padding:10px 14px 12px;border-radius:999px;gap:10px;border-color:var(--line)}
  .fx-ti{width:32px;height:32px;border-radius:10px}.fx-ti .i{width:18px;height:18px}
  .fx-tt b{font-size:15px;white-space:nowrap}.fx-tt small{display:none}
  .fx-tab .fx-bar{left:16px;right:16px}
  .fx-body{padding:18px 18px 20px}
  .fx-stepper>div:first-child{order:2}
  .fx-steps{grid-template-columns:1fr 1fr;gap:6px}
  .fx-sbtn{padding:10px 12px;gap:10px;border-radius:16px}
  .fx-sn{width:30px;height:30px;font-size:12px}
  .fx-st{font-size:14px;line-height:1.25}
  .fx-step{border-radius:16px}
  .fx-step:not(.is-on){border-color:var(--line)}
  .fx-who{padding:14px 16px}
  .fx-who>div{grid-template-columns:78px 1fr;font-size:14px}
  .fx-stage{padding:16px}
  .fx-screen{border-radius:22px}
  .fx-live{grid-template-columns:1fr 84px}
  .fx-tagc{display:none}
}

/* 9. why Execlient hub: worries flow into a glass Execlient core, answers flow out; one pair lights up at a time */
.fx-hub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.78fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:14px 28px;align-items:center;
  margin-top:34px;padding:30px 28px 34px;border-radius:32px;background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);
  box-shadow:inset 0 1px 0 var(--fx-edge),var(--fx-shadow);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.fx-hub-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.fx-hub-lines path{fill:none;stroke:rgba(15,42,34,.13);stroke-width:1.4;transition:stroke .4s,stroke-width .4s}
.fx-hub-lines path.l.hot{stroke:rgba(214,138,40,.85);stroke-width:2.2}
.fx-hub-lines path.r.hot{stroke:rgba(42,140,127,.9);stroke-width:2.2}
.fx-hub-lines circle.l{fill:#E8962E}.fx-hub-lines circle.r{fill:#2A8C7F}
.fx-hub-lbl{grid-row:1;margin:0;display:flex;align-items:center;gap:8px;font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);position:relative;z-index:1}
.fx-hub-lbl i{width:8px;height:8px;border-radius:50%}
.fx-hub-lbl.l{grid-column:1}.fx-hub-lbl.l i{background:#E8962E}
.fx-hub-lbl.r{grid-column:3;justify-content:flex-end}.fx-hub-lbl.r i{background:#2A8C7F}
.fx-hub-col{grid-row:2;list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative;z-index:1}
.fx-hub-col.l{grid-column:1}.fx-hub-col.r{grid-column:3}
.fx-hc{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:18px;background:var(--paper);border:1px solid var(--line);cursor:default;
  box-shadow:0 1px 2px rgba(15,42,34,.04);transition:border-color .35s,box-shadow .35s,translate .45s var(--fx-ease),opacity .35s}
.fx-hc .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.fx-hc .ic .i{width:20px;height:20px}
.fx-hub-col.l .ic{background:#FBF1E4;color:#B7791F}
.fx-hub-col.r .ic{background:rgba(42,140,127,.12);color:#146076}
.fx-hc b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.fx-hc small{display:block;color:var(--muted);font-size:13.5px;line-height:1.4;margin-top:2px}
.fx-hub-col.l .fx-hc b{color:var(--muted)}
.fx-hub.cycling .fx-hc:not(.hot){opacity:.72}
.fx-hub-col.l .fx-hc.hot{border-color:rgba(214,138,40,.55);box-shadow:0 14px 30px -18px rgba(214,138,40,.6);translate:6px 0;opacity:1}
.fx-hub-col.l .fx-hc.hot b{color:var(--ink)}
.fx-hub-col.r .fx-hc.hot{border-color:rgba(42,140,127,.55);box-shadow:0 14px 30px -18px rgba(20,96,118,.6);translate:-6px 0;opacity:1}
/* the glass core */
.fx-core{grid-column:2;grid-row:2;position:relative;justify-self:center;width:min(100%,290px);aspect-ratio:1;display:grid;place-items:center;z-index:1}
.fx-core .glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(127,216,176,.75),rgba(42,140,127,.55) 45%,rgba(20,96,118,.45) 75%);filter:blur(18px);animation:fx-breathe 5s ease-in-out infinite alternate}
@keyframes fx-breathe{to{transform:scale(1.08) rotate(20deg)}}
.fx-core .r1,.fx-core .r2{position:absolute;border-radius:50%;pointer-events:none}
.fx-core .r1{inset:0;border:2px dotted rgba(42,140,127,.45);animation:fx-spin 40s linear infinite}
.fx-core .r2{inset:9%;border:2px dashed rgba(232,150,46,.55);animation:fx-spin 28s linear infinite reverse}
.fx-core .disc{position:relative;width:64%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:4px;text-align:center;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.68));border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -14px 30px -18px rgba(20,96,118,.5),0 24px 50px -22px rgba(20,96,118,.6);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);transition:scale .5s var(--fx-ease)}
.fx-core .disc img{width:80%;height:auto;justify-self:center}
.fx-core .disc .lg-d{display:none}
.fx-hc .sh{display:none}
.fx-hub-say{display:none}
.fx-hub.pulse .fx-core .disc{scale:1.05}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-core .disc{background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border-color:rgba(255,255,255,.18)}
  :root:not([data-theme="light"]) .fx-core .disc .lg-l{display:none}:root:not([data-theme="light"]) .fx-core .disc .lg-d{display:block}
  :root:not([data-theme="light"]) .fx-hub-lines path{stroke:rgba(255,255,255,.12)}
  :root:not([data-theme="light"]) .fx-hub-col.l .ic{background:rgba(232,150,46,.14);color:#F2B866}}
/* phones: like the cloudspital phone hub. Worries in a 2-column grid on top, lines into the core, lines out to the
   answers in a 2-column grid below, and a line under the panel that spells out the lit pair */
@media (max-width:899px){
  .fx-hub{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 12px 18px;border-radius:26px}
  .fx-hub-lbl{justify-content:center!important;margin:2px 0 10px}
  .fx-hub-lbl.l{order:1}.fx-hub-col.l{order:2}.fx-core{order:3}.fx-hub-lbl.r{order:4}.fx-hub-col.r{order:5}.fx-hub-say{order:6}
  .fx-hub-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fx-hc{gap:8px;padding:9px 10px;border-radius:14px;min-height:52px}
  .fx-hc .ic{width:30px;height:30px;border-radius:9px}.fx-hc .ic .i{width:16px;height:16px}
  .fx-hc b,.fx-hc small{display:none}
  .fx-hc .sh{display:block;font-style:normal;font-weight:600;font-size:13px;line-height:1.25;color:var(--ink)}
  .fx-hub-col.l .fx-hc .sh{color:var(--muted)}
  .fx-hub-col.l .fx-hc.hot .sh{color:var(--ink)}
  .fx-hub-col.l .fx-hc.hot,.fx-hub-col.r .fx-hc.hot{translate:0 0}
  .fx-core{width:min(70%,230px);margin:76px auto 76px}
  .fx-hub-lbl.r{display:none}
  .fx-hub-say{display:block;margin:14px 2px 0;padding:12px 14px;border-radius:14px;background:rgba(42,140,127,.08);font-size:14px;line-height:1.45;color:var(--muted);min-height:4.3em}
  .fx-hub-say b{color:var(--ink);font-weight:600}
}
@media (prefers-reduced-motion:reduce){.fx-core .glow,.fx-core .r1,.fx-core .r2{animation:none}}

/* 10. two ways: a tree that grows as you scroll. The trunk splits into Digital and Print; each of those fans out into
   four branches that grow towards their options, and each option lights up when its branch reaches it.
   Phones: the four branches run down the screen edge as a bundle and peel off into their cards one by one. */
.fx-tree{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px minmax(0,1fr);margin-top:28px;padding:250px 0 30px}
.fx-tree-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fx-tree-svg .base{fill:none;stroke:rgba(15,42,34,.18);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round}
.fx-tree-svg .past{fill:none;stroke-width:3.5;stroke-linecap:round}
.fx-tree-svg .past.trunk{stroke-width:5}
.fx-tree-svg .halo{fill:none;stroke-width:14;stroke-linecap:round;opacity:.15}
.fx-tree-svg .tip{fill:#fff;stroke-width:3}
.fx-tree-svg .tipglow{opacity:.28}
.fx-tree-svg .bud{transition:r .5s var(--fx-ease),opacity .4s}
.fx-root{position:absolute;left:50%;top:0;translate:-50% 0;z-index:2;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);box-shadow:inset 0 1px 0 var(--fx-edge),0 16px 32px -14px rgba(20,96,118,.55)}
.fx-root img{width:34px;height:34px}
.fx-bname{position:absolute;top:96px;z-index:1;font:700 clamp(42px,5.2vw,72px)/1 var(--sans);letter-spacing:-.045em;color:transparent;
  -webkit-text-stroke:1.5px rgba(42,140,127,.38);transition:color .7s ease,-webkit-text-stroke-color .7s ease;user-select:none}
.fx-bname.d{right:calc(50% + 112px)}.fx-bname.p{left:calc(50% + 112px)}
.fx-bname.lit.d{color:#2A8C7F;-webkit-text-stroke-color:transparent}
.fx-bname.lit.p{color:#146076;-webkit-text-stroke-color:transparent}
.fx-hub-node{position:absolute;z-index:2;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1.5px solid var(--line-2);color:var(--faint);transition:background .5s,border-color .5s,color .5s,box-shadow .5s,scale .6s var(--fx-ease)}
.fx-hub-node .i{width:22px;height:22px}
.fx-hub-node.lit{background:linear-gradient(135deg,#4CBB8A,#2A8C7F);border-color:transparent;color:#fff;scale:1.06;box-shadow:0 0 0 8px rgba(76,187,138,.16),0 12px 24px -10px rgba(20,96,118,.6)}
.fx-hub-node.p.lit{background:linear-gradient(135deg,#2A8C7F,#146076);box-shadow:0 0 0 8px rgba(20,96,118,.14),0 12px 24px -10px rgba(20,96,118,.6)}
.fx-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px}
.fx-stack.d{grid-column:1;align-items:flex-end}
.fx-stack.p{grid-column:3;align-items:flex-start;padding-top:70px}
.fx-wcard{position:relative;display:flex;gap:14px;align-items:flex-start;width:min(100%,420px);padding:16px 18px 18px;border-radius:20px;
  background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);box-shadow:inset 0 1px 0 var(--fx-edge),var(--fx-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  opacity:.38;filter:saturate(.3);translate:0 12px;transition:opacity .6s ease,filter .6s ease,translate .8s var(--fx-ease),box-shadow .6s}
.fx-wcard.lit{opacity:1;filter:none;translate:0 0}
.fx-wcard .wic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(42,140,127,.10);color:#146076;transition:background .5s,color .5s}
.fx-wcard .wic .i{width:20px;height:20px}
.fx-wcard.lit .wic{background:linear-gradient(135deg,#4CBB8A,#2A8C7F);color:#fff}
.fx-wcard.p.lit .wic{background:linear-gradient(135deg,#2A8C7F,#146076)}
.fx-wcard .k,.fx-merge .k{margin:0;font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#2A8C7F}
.fx-wcard.p .k{color:#146076}
.fx-wcard h3{margin:4px 0 4px;font-size:19px;line-height:1.2;letter-spacing:-.015em}
.fx-wcard div>p:not(.k){margin:0;color:var(--muted);font-size:14.5px;line-height:1.45}
.fx-leaves{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.fx-leaves li{padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:500;background:rgba(76,187,138,.13);color:#146076;
  opacity:0;scale:.8;transition:opacity .4s ease,scale .55s var(--fx-ease);transition-delay:calc(.25s + var(--j,0) * .09s)}
.fx-wcard.p .fx-leaves li{background:rgba(20,96,118,.10)}
.fx-wcard.lit .fx-leaves li{opacity:1;scale:1}
.fx-merge{grid-column:1/-1;justify-self:center;position:relative;z-index:1;margin-top:90px;width:min(100%,640px);padding:26px 26px 28px;border-radius:26px;text-align:center;
  background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);box-shadow:inset 0 1px 0 var(--fx-edge),var(--fx-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);opacity:.4;translate:0 14px;transition:opacity .6s,translate .8s var(--fx-ease)}
.fx-merge.lit{opacity:1;translate:0 0}
.fx-merge h3{margin:6px 0 14px;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em}
.fx-merge h3 em{font-family:var(--serif);font-weight:400;color:#2A8C7F}
.fx-promises{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fx-promises li{padding:7px 13px;border-radius:999px;background:rgba(42,140,127,.10);color:#146076;font-size:14px;font-weight:500}
.fx-merge .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-tree-svg .base{stroke:rgba(255,255,255,.2)}
  :root:not([data-theme="light"]) .fx-bname.lit.d{color:#5CC9A0}:root:not([data-theme="light"]) .fx-bname.lit.p{color:#6FC7D6}
  :root:not([data-theme="light"]) .fx-leaves li,:root:not([data-theme="light"]) .fx-promises li,:root:not([data-theme="light"]) .fx-wcard .wic{color:#9FE3C6}
  :root:not([data-theme="light"]) .fx-wcard .k{color:#5CC9A0}:root:not([data-theme="light"]) .fx-wcard.p .k{color:#6FC7D6}}
@media (max-width:899px){
  .fx-tree{display:flex;flex-direction:column;padding-top:196px}
  .fx-stack{display:contents}
  .fx-wcard{order:var(--o);width:auto;margin:16px 34px 0;padding:14px 14px 16px;gap:12px}
  .fx-wcard[style*="--o:5"]{margin-top:52px}
  .fx-wcard .wic{width:36px;height:36px;border-radius:11px}.fx-wcard .wic .i{width:18px;height:18px}
  .fx-wcard h3{font-size:17px}
  .fx-wcard div>p:not(.k){font-size:14px}
  .fx-hub-node{width:38px;height:38px;margin:-19px 0 0 -19px}.fx-hub-node .i{width:17px;height:17px}
  .fx-bname{top:124px;font-size:clamp(28px,9vw,40px)}
  .fx-bname.d{left:42px;right:auto}.fx-bname.p{right:42px;left:auto}
  .fx-root{width:56px;height:56px}.fx-root img{width:28px;height:28px}
  .fx-merge{order:20;margin-top:64px;padding:22px 16px 22px}
}
@media (max-width:899px){.fx-tree-svg .past.branch{stroke-width:2.6}.fx-tree-svg .halo{stroke-width:9}}
@media (prefers-reduced-motion:reduce){.fx-wcard,.fx-merge,.fx-leaves li{transition:none}}
.fx-core .disc{display:flex;align-items:center;justify-content:center}
/* 1 Nov: Vishal wants the logo circle plain white, not white-green: solid white disc, softer halo, same in dark mode */
.fx-core .disc{background:#fff;border:1px solid rgba(15,42,34,.08);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(15,42,34,.06),0 24px 50px -22px rgba(20,96,118,.45)}
.fx-core .glow{opacity:.4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-core .disc{background:#fff;border-color:rgba(255,255,255,.2)}
  :root:not([data-theme="light"]) .fx-core .disc .lg-l{display:block}:root:not([data-theme="light"]) .fx-core .disc .lg-d{display:none}}

/* 11. two ways, Option A (10 Nov): the icon in the centre, curved branches out to Digital (left) and Print (right),
   then a centre spine down between the two columns. Each row's dot and both its options light up as the spine
   reaches it. Phones: titles only; tap an option and its details open under the row. */
.fx-tw{position:relative;margin-top:26px;padding-top:258px}
.fx-tw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fx-tw-svg .base{fill:none;stroke:rgba(15,42,34,.18);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round}
.fx-tw-svg .past{fill:none;stroke-width:5;stroke-linecap:round}
.fx-tw-svg .halo{fill:none;stroke-width:16;stroke-linecap:round;opacity:.15}
.fx-tw-svg .tip{fill:#fff;stroke-width:3}
.fx-tw-svg .tipglow{opacity:.28}
.tw-heads{position:absolute;left:0;right:0;top:150px;display:flex;justify-content:space-between;align-items:center;z-index:1;pointer-events:none}
.tw-head{display:flex;align-items:center;gap:12px}
.tw-head.p{flex-direction:row-reverse;text-align:right}
.tw-node{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--line-2);color:var(--faint);
  transition:background .5s,border-color .5s,color .5s,box-shadow .5s,scale .6s var(--fx-ease)}
.tw-node .i{width:23px;height:23px}
.tw-head.lit .tw-node{background:linear-gradient(135deg,#4CBB8A,#2A8C7F);border-color:transparent;color:#fff;scale:1.05;box-shadow:0 0 0 9px rgba(76,187,138,.16),0 12px 24px -10px rgba(20,96,118,.6)}
.tw-head.p.lit .tw-node{background:linear-gradient(135deg,#2A8C7F,#146076);box-shadow:0 0 0 9px rgba(20,96,118,.14),0 12px 24px -10px rgba(20,96,118,.6)}
.tw-hn{display:grid;gap:4px}
.tw-hn b{font:700 clamp(34px,4.4vw,60px)/1 var(--sans);letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.5px rgba(42,140,127,.38);transition:color .7s ease,-webkit-text-stroke-color .7s ease}
.tw-hn small{font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tw-head.d.lit b{color:#2A8C7F;-webkit-text-stroke-color:transparent}
.tw-head.p.lit b{color:#146076;-webkit-text-stroke-color:transparent}
.tw-rows{position:relative;z-index:1;display:grid;gap:16px}
.tw-row{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:72px}
.tw-dot{position:absolute;left:50%;top:40px;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--paper);border:3px solid var(--line-2);z-index:2;
  transition:border-color .5s,box-shadow .5s,scale .5s var(--fx-ease)}
.tw-row.lit .tw-dot{border-color:#2A8C7F;scale:1.15;box-shadow:0 0 0 6px rgba(76,187,138,.18)}
.tw-cell{position:relative;padding:18px 20px 20px;border-radius:20px;
  background:linear-gradient(160deg,var(--fx-glass-a),var(--fx-glass-b));border:1px solid var(--fx-edge);box-shadow:inset 0 1px 0 var(--fx-edge),var(--fx-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);transition:border-color .4s,box-shadow .4s}
.tw-btn{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:default}
.tw-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(42,140,127,.10);color:#146076;transition:background .5s,color .5s}
.tw-ic .i{width:20px;height:20px}
.tw-row.lit .tw-cell.d .tw-ic{background:linear-gradient(135deg,#4CBB8A,#2A8C7F);color:#fff}
.tw-row.lit .tw-cell.p .tw-ic{background:linear-gradient(135deg,#2A8C7F,#146076);color:#fff}
.tw-t{flex:1;font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.tw-tog{display:none}
.tw-desc p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.tw-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.tw-tags li{padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:500;background:rgba(76,187,138,.13);color:#146076}
.tw-cell.p .tw-tags li{background:rgba(20,96,118,.10)}
.tw-detail{display:none}
.fx-tw .fx-merge{margin-top:64px;opacity:1;translate:0 0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-tw-svg .base{stroke:rgba(255,255,255,.2)}
  :root:not([data-theme="light"]) .tw-head.d.lit b{color:#5CC9A0}:root:not([data-theme="light"]) .tw-head.p.lit b{color:#6FC7D6}
  :root:not([data-theme="light"]) .tw-tags li,:root:not([data-theme="light"]) .tw-ic{color:#9FE3C6}}
@media (max-width:899px){
  .fx-tw{padding-top:216px}
  .tw-heads{top:118px}
  .tw-head{gap:8px}
  .tw-node{width:42px;height:42px}.tw-node .i{width:18px;height:18px}
  .tw-hn b{font-size:clamp(28px,9vw,40px)}
  .tw-hn small{font-size:9.5px}
  .tw-rows{gap:12px}
  .tw-row{column-gap:20px;row-gap:0}
  .tw-dot{top:36px;width:12px;height:12px;margin:-6px 0 0 -6px;border-width:2.5px}
  .tw-cell{padding:12px 12px 14px;border-radius:16px}
  .tw-btn{display:grid;grid-template-columns:auto 1fr;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tw-ic{width:32px;height:32px;border-radius:10px}.tw-ic .i{width:16px;height:16px}
  .tw-t{grid-column:1/-1;font-size:15px}
  .tw-tog{display:grid;place-items:center;position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);transition:rotate .3s var(--fx-ease),background .3s,color .3s}
  .tw-tog .i{width:14px;height:14px}
  .tw-desc{display:none}
  .tw-cell.open{border-color:rgba(42,140,127,.6);box-shadow:0 0 0 3px rgba(76,187,138,.2),var(--fx-shadow)}
  .tw-cell.open .tw-tog{rotate:45deg;background:#2A8C7F;border-color:transparent;color:#fff}
  .tw-detail{grid-column:1/-1;position:relative;z-index:3;margin-top:10px;padding:14px 16px 16px;border-radius:16px;background:#EEF7F3;border:1px solid rgba(42,140,127,.35)}
  .tw-detail.on{display:block;animation:fx-up .45s var(--fx-ease) both}
  .tw-detail::before{content:"";position:absolute;top:-7px;left:calc(25% - 6px);width:12px;height:12px;background:inherit;border-left:1px solid rgba(42,140,127,.35);border-top:1px solid rgba(42,140,127,.35);rotate:45deg;background:#EEF7F3}
  .tw-detail.from-p::before{left:calc(75% - 6px)}
  .tw-detail b{display:block;font-size:15px}
  .tw-detail p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
  .tw-detail .tw-tags{margin-top:10px}
  .fx-tw .fx-merge{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){.tw-detail.on{animation:none}}
@media (max-width:899px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tw-detail,:root:not([data-theme="light"]) .tw-detail::before{background:#14271F}}

/* 14. 11 Nov: About = Option B "Three scenes". Centred head, three illustrated scenes (the homepage art, split into
   layers so parts of it move), a 4-number band, then a deep teal "One Growth Partner" band. The illustration motion is
   ambient and slow; it pauses when the section is off screen (.off from motion.js section 8) and stops for reduced motion. */
.ob-top{text-align:center;max-width:900px;margin-inline:auto}
.ob-top h2{font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.035em;margin-top:10px}
.ob-intro{font-size:19px;line-height:1.6;color:var(--muted);max-width:64ch;margin:18px auto 0}
.ob-scenes{display:grid;gap:18px;margin-top:48px}
.ob-scene{text-align:center;padding:26px 24px 30px;border-radius:26px;display:grid;gap:12px;justify-items:center;align-content:start}
.ob-scene h3{margin:6px 0 0;font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--ink);max-width:24ch}
.ob-scene p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:36ch}
.ob-scene.mid{background:var(--paper);box-shadow:0 30px 60px -36px rgba(20,96,118,.45);border:1px solid var(--line)}
/* the band: page-coloured, with a liquid gradient stroke flowing round its edge (two bright currents chasing each other)
   and a soft glow under it; a faint static line keeps the shape when the currents pass */
@property --ob-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ob-flow{to{--ob-ang:360deg}}
.ob-band{position:relative;isolation:isolate;margin-top:40px;border-radius:30px;padding:30px;background:var(--paper);border:1px solid rgba(20,96,118,.14);display:grid;gap:28px}
.ob-band::before,.ob-band::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2.5px;pointer-events:none;
  background:conic-gradient(from var(--ob-ang),rgba(76,187,138,0) 0deg,#4CBB8A 46deg,#C9F26B 78deg,#2A8C7F 118deg,rgba(42,140,127,0) 168deg,rgba(20,96,118,0) 182deg,#146076 226deg,#4CBB8A 268deg,rgba(127,216,176,0) 326deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ob-flow 6s linear infinite}
.ob-band::after{z-index:-1;padding:5px;filter:blur(14px);opacity:.75}
.ob-band.off::before,.ob-band.off::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ob-band::before,.ob-band::after{animation:none;background:linear-gradient(135deg,#146076,#4CBB8A 50%,#C9F26B)}.ob-band::after{opacity:.25}}
.ob-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:24px 0 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper)}
.ob-nums div{padding:16px 18px}
.ob-nums div:nth-child(even){border-left:1px solid var(--line)}
.ob-nums div:nth-child(n+3){border-top:1px solid var(--line)}
.ob-nums dt{font-size:36px;line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.ob-nums sup{font-size:.45em;color:#2A8C7F}
.ob-nums dd{margin:6px 0 0;font-size:13px;color:var(--muted)}
.ob-logo img{height:40px;width:auto}
.ob-logo .l-light{display:var(--logo-light)}.ob-logo .l-dark{display:var(--logo-dark)}
.ob-eq{font-size:24px;line-height:1.3;font-weight:650;letter-spacing:-.02em;margin:16px 0 0;color:var(--ink)}
.ob-eq span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-who{display:flex;gap:12px;align-items:center;margin-top:22px}
.ob-who img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.ob-who b{display:block;font-size:15.5px;color:var(--ink)}.ob-who span{font-size:12.5px;color:var(--muted)}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ob-chips li{padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font-size:14.5px;color:var(--ink)}
.ob-chips li.on{background:color-mix(in srgb,var(--lime) 30%,var(--paper));border-color:rgba(37,130,122,.45)}
.ob-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-weight:600;color:var(--green-text);text-decoration:none}
.ob-more .i{width:16px;height:16px}
.ob-partners{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ob-partners img{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;box-sizing:content-box;width:auto}
.ob .reg-line{display:flex;flex-wrap:wrap;gap:6px 18px;margin:24px 0 0;font-size:13px;color:var(--muted)}
.ob .reg-line b{color:var(--ink);font-weight:600}.ob .reg-line a{color:var(--green-text);font-weight:600}
@media (min-width:900px){
  .ob-scenes{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .ob-band{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding:44px}
}
@media (max-width:719px){
  .ob-intro{font-size:16.5px}
  .ob-scene{padding:18px 6px 22px}
  .ob-nums div{padding:14px 14px}.ob-nums dt{font-size:30px}
  .ob-band{padding:24px;border-radius:24px}.ob-eq{font-size:20px}
  .ob-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-chips li{display:flex;align-items:center;padding:9px 11px;font-size:13.5px;line-height:1.25;border-radius:12px}
  .ob-chips li:last-child:nth-child(odd){grid-column:1/-1}
  .ob-partners img{transform:none}
}

/* the moving illustrations: every layer is the full 398x214 frame, stacked */
.ob-art{position:relative;width:100%;max-width:330px;aspect-ratio:398/214;overflow-x:clip}
.ob-art .l{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ob-art .glow,.ob-art .ripple,.ob-art .glint,.ob-art .flame{position:absolute;pointer-events:none}
.ob-art .path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@keyframes ob-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(5%)}}
@keyframes ob-drift2{0%,100%{transform:translateX(0)}50%{transform:translateX(-4%)}}
.ob-art .c1{animation:ob-drift 11s ease-in-out infinite}
.ob-art .c2{animation:ob-drift2 13s ease-in-out infinite}
.ob-art .c3{animation:ob-drift 12s ease-in-out infinite -3s}
/* scene 1: connect */
@keyframes ob-sun{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5%)}}
@keyframes ob-sunglow{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.85;transform:translate(-50%,-56%) scale(1.15)}}
.ob-art .sun{animation:ob-sun 6s ease-in-out infinite}
.ob-art .sun-glow{left:50%;top:38.8%;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,196,60,.55),rgba(255,196,60,0) 66%);animation:ob-sunglow 6s ease-in-out infinite}
@keyframes ob-light{0%,100%{opacity:0}35%,60%{opacity:1}}
.ob-art .lt{opacity:0;animation:ob-light 6.6s ease-in-out infinite}
.ob-art .g2{animation-delay:-2.2s}.ob-art .g3{animation-delay:-4.4s}
@keyframes ob-ripple{0%{transform:translate(-50%,-50%) scale(.25);opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.ob-art .ripple{left:49.2%;top:76.5%;width:9%;aspect-ratio:1}
.ob-art .ripple i{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;border:2px solid #4CBB8A;animation:ob-ripple 2.8s cubic-bezier(.16,1,.3,1) infinite}
.ob-art .ripple i+i{animation-delay:1.4s}
/* scene 2: ideas */
@keyframes ob-fil{0%,100%{filter:drop-shadow(0 0 0 rgba(255,213,74,0))}50%{filter:drop-shadow(0 0 2px #FFD54A) drop-shadow(0 0 6px rgba(255,200,60,.9))}}
@keyframes ob-bulb{0%,100%{opacity:.15}50%{opacity:.9}}
.ob-art .fil{animation:ob-fil 3.2s ease-in-out infinite}
.ob-art .f2{animation-delay:-1.6s}
.ob-art .bulb-glow{left:62.8%;top:30%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,226,120,.75),rgba(255,226,120,0) 62%);mix-blend-mode:screen;animation:ob-bulb 3.2s ease-in-out infinite}
@keyframes ob-spin{to{transform:rotate(360deg)}}
.ob-art .gear{transform-origin:86.13% 69.02%;animation:ob-spin 9s linear infinite}
.ob-art .spark{fill:#FFD54A;filter:drop-shadow(0 0 3px rgba(255,200,60,.95))}
/* scene 3: next level */
@keyframes ob-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes ob-flame{0%{transform:translateX(-50%) scaleY(.65);opacity:.8}100%{transform:translateX(-50%) scaleY(1.15);opacity:1}}
.ob-art .rk{position:absolute;inset:0;animation:ob-hover 2.8s ease-in-out infinite}
.ob-art .flame{left:61.9%;top:24.6%;width:2.8%;height:9%;transform-origin:50% 0;border-radius:50% 50% 50% 50%/25% 25% 75% 75%;background:linear-gradient(#FFF1B8,#FFB02E 55%,rgba(255,120,40,0));animation:ob-flame .22s ease-in-out infinite alternate}
@keyframes ob-glint{0%,70%,100%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}80%{transform:translate(-50%,-50%) scale(1) rotate(45deg);opacity:1}}
.ob-art .glint{width:3.4%;aspect-ratio:1;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 2px rgba(255,220,120,.9));animation:ob-glint 2.6s ease-out infinite}
.ob-art .k1{left:71.1%;top:75.7%}.ob-art .k2{left:75.4%;top:84.6%;animation-delay:-.9s}.ob-art .k3{left:67.8%;top:92.5%;animation-delay:-1.7s}
/* paused off screen; still for reduced motion */
.ob-scenes.off .ob-art *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ob-art *{animation:none!important}.ob-art .lt{opacity:0}.ob-art .spark{display:none}}