/* Built from docs/web-app/mockups/2026-10-21/redesign/ by make_site.py. Do not edit here. */
/* d-h.css */
/* Direction H, "Walk-through": the Blend, with "Sound familiar?" as a full-width walk-through of what lands on the dashboard,
   pillar by pillar (the owner, 22 October 2026). Results only, never the method. */
/* d-e.css */
/* Direction E, "The Blend": B's zine look, carrying D's question and phones and A's pricing. It reuses B's and D's styles. */
/* d-b.css */
/* Direction B, "The Zine". Draft fonts (Anton, Permanent Marker) and accents are proposals, not approved. */
.fb{--ink:#141D2A;--pop:#FFA500;--a1:#FF5C8A;--a2:#5B7CFF;--a3:#2FD69A;--paper:#FFF8EC;font-family:var(--font-body);color:var(--ink);overflow:hidden;
  background:#F4E9D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fb *{box-sizing:border-box}
.fb [data-in]{opacity:0;transform:translateY(30px) rotate(var(--r,0deg)) scale(.9);transition:opacity .5s,transform .7s var(--ease-bounce)}
.fb [data-in].in{opacity:1;transform:rotate(var(--r,0deg))}
.fb-huge{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(64px,11vw,190px);line-height:.86;letter-spacing:-.01em;margin:0 0 50px;position:relative;color:var(--ink)}
.fb-huge.light{color:#F4E9D6}
.hand{font-family:'Permanent Marker',cursive;font-size:clamp(20px,2.4vw,34px);color:var(--a1);line-height:1.1;position:absolute;letter-spacing:0;white-space:nowrap}
.h1{left:min(44vw,600px);bottom:20px;transform:rotate(-8deg);color:var(--a1)}
.h3{left:min(48vw,560px);bottom:24px;transform:rotate(-6deg);color:var(--pop)}
.h4{left:calc(100% + 20px);top:30%;transform:rotate(-7deg)}
.fb .btn{display:inline-block;font:900 18px/1 var(--font-body);background:var(--ink);color:#fff;padding:20px 30px;border-radius:999px;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease-bounce)}
.fb .btn:hover{transform:rotate(-3deg) scale(1.06)}
.fb-sec{padding:110px 6vw;position:relative}
.fb-ink{background:var(--ink);color:#F4E9D6}

.fb-tape-row{position:relative;height:200px;background:var(--navy-700)}
.tp{position:absolute;left:-5%;right:-5%;padding:14px 0;overflow:hidden;font-family:'Anton',sans-serif;font-size:44px;white-space:nowrap}
.tp span{display:inline-block;animation:marquee 30s linear infinite}
.t1{top:40px;background:var(--pop);transform:rotate(-4deg);color:var(--ink)}
.t2{top:96px;background:#F4E9D6;transform:rotate(3deg);color:var(--ink)}.t2 span{animation-direction:reverse}

/* Curve with polaroids */
.fb-curve{position:relative;height:560px;max-width:1200px;margin:0 auto}
.fb-curve .line{position:absolute;inset:0;width:100%;height:100%}
.pol{position:absolute;margin:0;width:230px;background:#fff;padding:12px 12px 16px;box-shadow:0 14px 30px rgba(20,29,42,.25);transition:transform .4s var(--ease-bounce),opacity .5s}
.pol:hover{transform:rotate(0) scale(1.08)!important;z-index:3}
.pol .pic{aspect-ratio:1;background:var(--bg);display:grid;place-items:center;background-image:radial-gradient(rgba(20,29,42,.18) 2px,transparent 2.5px);background-size:14px 14px}
.pol .pic svg{width:74%}
.pol figcaption{font-family:'Permanent Marker',cursive;font-size:26px;margin-top:10px;line-height:1}
.pol figcaption small{display:block;font-family:var(--font-body);font-size:13px;font-weight:600;opacity:.6;margin-top:4px}
.tape{position:absolute;top:-14px;left:50%;width:96px;height:30px;margin-left:-48px;background:rgba(255,236,170,.75);transform:rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.08)}
.p1{left:0;top:250px;--r:-7deg}.p2{left:26%;top:150px;--r:5deg}.p3{left:52%;top:120px;--r:-4deg}.p4{right:0;top:-30px;--r:8deg}
.broke .pic{filter:saturate(.6)}
.stamp{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);font-family:'Anton',sans-serif;font-size:42px;color:#E3263A;border:5px solid #E3263A;padding:2px 14px;border-radius:8px;background:rgba(255,255,255,.75);animation:fb-thump 2.4s var(--ease-bounce) infinite}
@keyframes fb-thump{0%,70%{transform:translate(-50%,-50%) rotate(-18deg) scale(1)}80%{transform:translate(-50%,-50%) rotate(-18deg) scale(1.15)}}
.h2{right:4%;bottom:-10px;transform:rotate(-4deg);color:var(--ink);font-size:clamp(20px,2.2vw,30px)}

/* Comic strips */
.strip{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:14px;max-width:1240px;margin:0 auto 26px;align-items:stretch}
.strip:nth-of-type(2){--r:.6deg}.strip:nth-of-type(3){--r:-.6deg}
.strip .lbl{font-family:'Permanent Marker',cursive;font-size:20px;color:#F4E9D6;align-self:center;line-height:1.1}
.strip .lbl b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:34px;color:var(--pop)}
.pn{position:relative;aspect-ratio:4/3;background:var(--bg);border:5px solid #F4E9D6;display:grid;place-items:center;overflow:hidden;color:var(--ink)}
.pn svg{width:46%;--paper:#fff}
.pn.dots{background-image:radial-gradient(rgba(20,29,42,.28) 3px,transparent 3.5px);background-size:16px 16px}
.pn .pow{position:absolute;top:12px;left:12px;font-family:'Anton',sans-serif;font-size:22px;background:#fff;padding:4px 10px;transform:rotate(-6deg);clip-path:polygon(0 10%,8% 0,30% 8%,50% 0,72% 10%,100% 0,94% 50%,100% 100%,70% 90%,50% 100%,25% 90%,0 100%,6% 50%)}
.pn .big{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,52px);transform:rotate(-4deg);animation:fb-wob 2s ease-in-out infinite}
@keyframes fb-wob{50%{transform:rotate(3deg) scale(1.05)}}
.sb{position:absolute;background:#fff;font-weight:800;font-size:15px;padding:8px 12px;border-radius:50%/40%;border:3px solid var(--ink)}
.sb::after{content:'';position:absolute;bottom:-12px;left:22px;border:8px solid transparent;border-top:12px solid var(--ink)}
.s1{top:12px;left:12px}.s2{top:40px;right:12px}
.pn .cap{position:absolute;left:0;right:0;bottom:0;background:#FFE45C;font-weight:800;font-size:14px;padding:8px 12px;border-top:4px solid var(--ink);line-height:1.25}

/* Report paper */
.fb-report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:6vw;align-items:center;max-width:1180px;margin:0 auto}
.paper{position:relative;background:#fff;padding:34px 30px 40px;--r:-4deg;box-shadow:0 30px 60px rgba(20,29,42,.25);max-width:420px;justify-self:center}
.paper .tl{left:10%;top:-14px;transform:rotate(-30deg)}.paper .tr{left:auto;right:-30px;top:-6px;transform:rotate(35deg)}
.paper .hd{display:flex;align-items:center;gap:10px;font-size:20px;border-bottom:3px solid var(--ink);padding-bottom:12px}
.paper .hd img{height:28px}
.paper .kt{width:70%;display:block;margin:12px auto}
.paper ul{margin:0;padding:0;list-style:none;font-weight:700;font-size:16px}.paper li{padding:10px 0;border-bottom:2px dashed rgba(20,29,42,.2)}
.paper .circle{position:absolute;left:-10px;top:40%;font-family:'Permanent Marker',cursive;color:var(--a1);font-size:22px;transform:rotate(-12deg) translateX(-60%)}
.rub{position:absolute;right:-24px;bottom:-30px;font-family:'Anton',sans-serif;font-size:64px;color:#E3263A;border:7px double #E3263A;padding:0 16px;transform:rotate(-14deg);background:rgba(255,255,255,.6)}
.fb-report .side p{font-size:22px;font-weight:600;margin:-20px 0 30px;max-width:440px}

/* Sticky notes */
.fb-cork{background:#C98E58 radial-gradient(rgba(0,0,0,.12) 1.5px,transparent 2px) 0 0/9px 9px}
.fb-cork .fb-huge{color:#fff}
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;max-width:1240px;margin:0 auto}
.nt{position:relative;background:var(--bg);padding:24px 20px 20px;aspect-ratio:1;box-shadow:0 18px 26px rgba(0,0,0,.22);display:flex;flex-direction:column}
.nt:nth-child(1){--r:-3deg}.nt:nth-child(2){--r:2deg;margin-top:30px}.nt:nth-child(3){--r:-1deg}.nt:nth-child(4){--r:4deg;margin-top:20px}
.nt::before{content:'';position:absolute;top:-10px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#E3263A;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2)}
.nt b{font-family:'Anton',sans-serif;font-weight:400;font-size:46px;line-height:1}
.nt strong{font-family:'Permanent Marker',cursive;font-weight:400;font-size:30px}
.nt p{font-family:'Permanent Marker',cursive;font-size:17px;margin:4px 0 0;opacity:.8}
.nt svg{position:absolute;right:10px;bottom:10px;width:38%}

/* Laptop lid */
.lid{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/10;background:linear-gradient(145deg,#3B4C66,#1E2B3E);border-radius:36px;padding:50px;box-shadow:0 40px 80px rgba(20,29,42,.35);overflow:hidden}
.lid .apple{position:absolute;left:50%;top:50%;width:90px;margin:-45px;opacity:.25}
.stk{position:absolute;width:180px;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;padding:20px;border:6px solid #fff;box-shadow:0 8px 16px rgba(0,0,0,.3);transition:transform .4s var(--ease-bounce)}
.stk:hover{transform:rotate(0) scale(1.1)!important}
.stk img{width:100%;height:100%;object-fit:contain}
.k1{left:12%;top:44%;transform:rotate(-12deg)}.k2{left:42%;top:30%;transform:rotate(8deg);border-radius:30px}.k3{right:10%;top:52%;transform:rotate(-5deg)}
.h5{left:50px;bottom:34px;color:var(--pop);font-size:22px}

/* Price tags */
.tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;max-width:1240px;margin:0 auto}
.tg{position:relative;background:#F4E9D6;color:var(--ink);padding:56px 22px 26px;clip-path:polygon(50% 0,100% 14%,100% 100%,0 100%,0 14%);transform-origin:50% 0;animation:fb-swing 4s ease-in-out infinite}
.tg:nth-child(2){animation-delay:-1s}.tg:nth-child(3){animation-delay:-2s}.tg:nth-child(4){animation-delay:-3s}
@keyframes fb-swing{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.tg.hot{background:var(--pop)}
.tg .hole{position:absolute;top:22px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--ink)}
.tg b{font-family:'Anton',sans-serif;font-weight:400;font-size:30px;display:block}
.tg em{font-style:normal;font-family:'Anton',sans-serif;font-size:58px;line-height:1;display:block;margin:6px 0 10px}
.tg em small{display:block;font-family:var(--font-body);font-size:13px;font-weight:700;margin-top:4px}
.tg p{font-family:'Permanent Marker',cursive;font-size:19px;margin:0;line-height:1.2}

.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1240px;margin:0 auto}
.q{background:#fff;padding:26px;--r:-2deg;box-shadow:0 12px 24px rgba(20,29,42,.15);border-left:8px solid var(--a2)}
.q:nth-child(2){--r:2deg;border-color:var(--a1)}.q:nth-child(3){--r:-1deg;border-color:var(--a3)}
.q b{display:block;font-size:20px;margin-bottom:12px}
.q .hand{position:static;font-size:22px;white-space:normal;color:var(--ink)}

.fb-end{background:var(--pop);padding:90px 6vw 60px;text-align:center}
.giant{font-family:'Anton',sans-serif;font-size:clamp(110px,24vw,380px);line-height:.8;color:var(--ink);letter-spacing:-.01em;margin-bottom:40px}
.fb-end p{font-weight:700;margin:30px 0 0}

@media (max-width:900px){
.fb-sec{padding:76px 16px}
.fb-huge{margin-bottom:36px}
.h1{position:static;display:block;transform:rotate(-6deg);margin-top:10px}
.h3,.h4{position:static;display:block;transform:rotate(-4deg);margin-top:12px;white-space:normal}
.fb-tape-row{height:150px}.tp{font-size:30px}.t1{top:28px}.t2{top:72px}
.fb-curve{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.fb-curve .line{display:none}
.pol{position:relative;left:auto!important;right:auto!important;top:auto!important;width:auto;padding:8px 8px 12px}.pol figcaption{font-size:20px}.pol figcaption small{font-size:11px}.stamp{font-size:26px;border-width:3px}
.h2{position:static;grid-column:1/-1;transform:rotate(-3deg);white-space:normal}
.strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:34px}
.strip .lbl{grid-column:1/-1;font-size:16px}.strip .lbl b{display:inline;font-size:26px;margin-right:8px}
.pn{aspect-ratio:3/4;border-width:3px}.pn svg{width:66%;margin-top:-30px}.pn .cap{font-size:11px;padding:5px 6px}.sb{font-size:11px;padding:4px 7px}.s2{top:auto;bottom:62px;right:6px}.pn .pow{font-size:14px;top:6px;left:6px}.pn .big{font-size:5.2vw}
.fb-report{grid-template-columns:minmax(0,1fr);gap:70px}.fb-report .side{order:-1}.fb-report .side p{font-size:18px;margin-top:-16px}
.paper{margin:0 20px}.paper .circle{display:none}.rub{font-size:44px;right:-10px}
.notes,.tags{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.nt{padding:16px 14px}.nt b{font-size:32px}.nt strong{font-size:22px}.nt p{font-size:14px}.nt:nth-child(2),.nt:nth-child(4){margin-top:0}
.lid{aspect-ratio:3/4;padding:30px 22px;border-radius:26px}.stk{width:130px}.k1{left:8%;top:30%}.k2{left:auto;right:8%;top:48%}.k3{left:14%;right:auto;top:66%}.h5{left:22px;right:22px;font-size:16px;white-space:normal}
.tg{padding:46px 14px 18px}.tg b{font-size:22px}.tg em{font-size:38px}.tg p{font-size:15px}
.qa{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* Already in (the owner, 22 October 2026): the logos as die-cut stickers, no box behind them. A white edge follows each logo's own shape. */
.stk{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
.stk img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #fff,0 12px 20px rgba(0,0,0,.4)}
@media (max-width:900px){.stk{width:120px}.k1{left:10%;top:26%}.k2{right:10%;top:42%}.k3{left:16%;top:58%}.h5{bottom:24px}}

/* The four systems carry A's lines and a post's actions (the owner, 22 October 2026). The cards stay polaroids. */
.pol .pl{margin:8px 0 0;font-size:14px;line-height:1.35;color:var(--ink)}
.pol .pl b{font-weight:800}
.pol .acts{display:flex;gap:14px;align-items:center;margin-top:10px;padding-top:9px;border-top:2px dashed rgba(20,29,42,.18);font-size:18px}
.pol .acts .lk{color:#E3263A;animation:fb-beat 2.2s ease-in-out infinite}
.pol .acts .bm{margin-left:auto}
@keyframes fb-beat{0%,60%,100%{transform:none}70%{transform:scale(1.35)}80%{transform:scale(.95)}}
.fb-curve{height:720px}
.p1{top:300px}.p2{top:180px}.p3{top:130px}.p4{top:-20px}
@media (max-width:900px){.fb-curve{height:auto}.pol .pl{font-size:12px}.pol .acts{font-size:15px;gap:10px}}

/* d-d.css */
/* Direction D, "The Group Chat". Draft accents are proposals, not approved. */
.fd{--ink:#141D2A;--pop:#FFA500;--a1:#FF5C8A;--a2:#5B7CFF;--a3:#2FD69A;--paper:#fff;--navy:#293951;font-family:var(--font-body);color:var(--ink);overflow:hidden;
  background:#FFA500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23293951' stroke-opacity='.12' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 30c6-10 18-10 24 0s-6 22-12 26c-6-4-18-16-12-26z'/%3E%3Ccircle cx='110' cy='40' r='14'/%3E%3Cpath d='M70 110l10-18 10 18-10 18z'/%3E%3Cpath d='M120 120h24v18h-14l-8 8v-8h-2z'/%3E%3Cpath d='M20 130l14 4-4 14'/%3E%3C/svg%3E")}
.fd *{box-sizing:border-box}
.fd [data-in]{opacity:0;transform:translateY(24px) scale(.92);transform-origin:left bottom;transition:opacity .4s,transform .5s var(--ease-bounce)}
.fd [data-in].in{opacity:1;transform:none}
.fd h2{font-size:clamp(44px,6vw,92px);font-weight:300;letter-spacing:-.05em;line-height:.92;text-align:center;margin:0 0 16px;color:var(--ink)}
.fd h2 em{font-style:normal;font-weight:900;display:block}
.fd .lead{text-align:center;font-weight:700;margin:0 0 50px;opacity:.7}
.fd-sec{padding:100px 5vw;position:relative}
.fd-wall{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23FFA500' stroke-opacity='.1' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 30c6-10 18-10 24 0s-6 22-12 26c-6-4-18-16-12-26z'/%3E%3Ccircle cx='110' cy='40' r='14'/%3E%3Cpath d='M70 110l10-18 10 18-10 18z'/%3E%3Cpath d='M120 120h24v18h-14l-8 8v-8h-2z'/%3E%3C/svg%3E")}
.fd-wall h2,.fd-wall .lead{color:#fff}.fd-wall h2 em{color:var(--pop)}

.chat{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.day{align-self:center;background:rgba(41,57,81,.85);color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:10px}
.m{display:flex;align-items:flex-end;gap:10px;position:relative;max-width:78%}
.m.them{align-self:flex-start}.m.us{align-self:flex-end;transform-origin:right bottom}
.m p{margin:0;font-size:clamp(20px,2.2vw,30px);line-height:1.25;padding:16px 22px;border-radius:28px;font-weight:500}
.m.them p{background:#fff;border-bottom-left-radius:8px}
.m.us p{background:var(--navy);color:#fff;border-bottom-right-radius:8px}
.m.us p b{color:var(--pop)}
.av{width:44px;height:44px;border-radius:50%;flex:none;object-fit:contain}
img.av{background:var(--navy);padding:7px}
.av.you{display:grid;place-items:center;background:#fff;font-weight:900;font-size:12px;border:3px solid var(--navy)}
.rx{position:absolute;right:58px;bottom:-14px;background:#fff;border-radius:999px;padding:3px 9px;font-size:13px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.m.cards{max-width:100%}
.c4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:var(--navy);padding:10px;border-radius:28px;border-bottom-right-radius:8px}
.pc{background:var(--bg);border-radius:20px;padding:14px 14px 16px;display:flex;flex-direction:column;transition:transform .3s var(--ease-bounce)}
.pc:hover{transform:rotate(-4deg) scale(1.05)}
.pc svg{width:80%;margin:0 auto 8px;animation:fd-bob 3s ease-in-out infinite}.pc:nth-child(2) svg{animation-delay:-.7s}.pc:nth-child(3) svg{animation-delay:-1.4s}.pc:nth-child(4) svg{animation-delay:-2.1s}
@keyframes fd-bob{50%{transform:translateY(-8px) rotate(4deg)}}
.pc b{font-size:18px;color:var(--ink)}.pc small{font-size:13px;color:var(--ink);opacity:.75}

/* Phones */
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1180px;margin:0 auto}
.ph{background:#ECE5DA;border-radius:40px;border:9px solid var(--ink);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.ph:nth-child(1){rotate:-3deg}.ph:nth-child(2){translate:0 30px}.ph:nth-child(3){rotate:3deg}
.ph .bar{display:flex;align-items:center;gap:10px;background:#fff;padding:22px 16px 12px}
.ph .bar small{display:block;font-size:12px;opacity:.6}.ph .bar b{font-size:15px}
.pav{width:40px;height:40px;border-radius:50%;background:var(--bg);display:grid;place-items:center;padding:5px;flex:none}
.feed{display:flex;flex-direction:column;gap:8px;padding:16px 12px 22px;min-height:400px}
.b{max-width:82%;font-size:15px;padding:10px 14px;border-radius:18px;line-height:1.3}
.b.in{align-self:flex-start;background:#fff;border-bottom-left-radius:5px}
.b.out{align-self:flex-end;background:#D7F8C4;border-bottom-right-radius:5px}
.b.diag{background:var(--pop);font-size:17px}.b small{display:block;font-size:11px;font-weight:800;opacity:.7}
.sys{align-self:center;font-size:12px;font-weight:800;background:rgba(41,57,81,.12);border-radius:8px;padding:5px 10px;margin:6px 0}
.vn{align-self:flex-start;display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px 14px;width:70%}
.vn span{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px}
.vn i{flex:1;height:18px;background:repeating-linear-gradient(90deg,var(--navy) 0 3px,transparent 3px 6px);-webkit-mask:linear-gradient(0deg,#000 20%,transparent 20% 80%,#000 80%),radial-gradient(#000,#000);opacity:.6}
.vn small{font-size:11px}

.file{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;border-radius:24px;border-bottom-right-radius:8px;padding:12px 22px 12px 12px}
.file .thumb{width:110px;height:130px;background:#fff;border-radius:14px;display:grid;place-items:center;transform:rotate(-4deg)}
.file .thumb svg{width:84%}
.file b{font-size:22px;display:block}.file small{font-size:14px;opacity:.75}
.replies{align-self:flex-end;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.qr{background:#fff;color:var(--ink);font-weight:800;font-size:16px;padding:14px 22px;border-radius:999px;border:3px solid var(--navy);text-decoration:none;cursor:pointer;transition:transform .3s var(--ease-bounce)}
.qr:hover{transform:translateY(-4px) scale(1.04)}
.qr.hot{background:var(--navy);color:var(--pop);font-size:20px}

/* Voice notes */
.vns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:40px auto 0}
.vbig{display:flex;align-items:center;gap:18px;background:#fff;border-radius:36px;padding:20px 26px 20px 20px}
.vbig:nth-child(odd){border-bottom-left-radius:8px}.vbig:nth-child(even){border-bottom-right-radius:8px;translate:0 40px}
.play{width:68px;height:68px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:24px;flex:none;color:var(--ink)}
.vbig>div{flex:1}.vbig b{font-size:24px}.vbig small{font-size:15px;opacity:.75}
.wave{height:34px;margin:6px 0;display:flex;align-items:center;gap:3px;overflow:hidden}.wave i{flex:none;width:4px;border-radius:2px;background:rgba(41,57,81,.25)}.wave i:nth-child(-n+18){background:var(--bg)}

/* Group members */
.group{max-width:560px;margin:0 auto;background:#fff;border-radius:32px;padding:10px 10px 16px;box-shadow:0 30px 60px rgba(41,57,81,.25)}
.gh{padding:16px 18px;border-bottom:1px solid rgba(41,57,81,.1)}.gh b{font-size:26px;font-weight:900;letter-spacing:-.03em;display:block}.gh small{opacity:.6}
.mem{display:flex;align-items:center;gap:14px;padding:12px 18px}
.mem img{width:58px;height:58px;border-radius:50%;object-fit:contain;background:#F3F5F8;padding:6px}
.mem b{font-size:18px;display:block}.mem small{opacity:.6}
.mem .on{margin-left:auto;width:12px;height:12px;border-radius:50%;background:var(--a3)}
.add{margin:8px 18px 0;padding:14px;border-radius:16px;border:2px dashed rgba(41,57,81,.3);text-align:center;font-weight:800;color:var(--navy)}

/* Poll */
.poll{max-width:640px;margin:40px auto 0;background:#fff;border-radius:32px;border-bottom-left-radius:8px;padding:20px}
.pq{display:flex;align-items:center;gap:10px;padding:4px 6px 14px}.pq b{font-size:18px}
.opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;margin-top:8px;background:#F3F5F8;transition:transform .3s var(--ease-bounce)}
.opt:hover{transform:scale(1.02)}
.opt .r{width:24px;height:24px;border-radius:50%;border:3px solid var(--navy);flex:none}
.opt b{font-size:18px;display:block}.opt small{font-size:14px;opacity:.7}
.opt.hot{background:var(--pop)}.opt.hot .r{background:var(--navy);box-shadow:inset 0 0 0 4px var(--pop)}

.fd-end{background:var(--navy);color:#fff;text-align:center;padding:110px 5vw 60px}
.fd-end h2{color:#fff}.fd-end h2 em{color:var(--pop)}
.typing{display:inline-flex;gap:6px;background:#fff;border-radius:999px;padding:14px 18px;margin-bottom:26px}
.typing i{width:10px;height:10px;border-radius:50%;background:var(--navy);animation:fd-dot 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes fd-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.send{display:inline-flex;align-items:center;gap:14px;margin:30px 0 40px;background:var(--pop);color:var(--ink);font-weight:900;font-size:22px;padding:12px 12px 12px 30px;border-radius:999px;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease-bounce)}
.send span{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--pop);display:grid;place-items:center}
.send:hover{transform:scale(1.05)}
.fd-end p{opacity:.6;font-size:14px}

@media (max-width:900px){
.fd-sec{padding:72px 16px}
.m{max-width:92%}.m p{font-size:18px;padding:12px 16px}.av{width:34px;height:34px}
.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.pc b{font-size:15px}
.phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:10px 16px 30px;gap:16px;scrollbar-width:none}
.ph{flex:0 0 84%;scroll-snap-align:center;rotate:none!important;translate:none!important}
.file .thumb{width:70px;height:84px}.file b{font-size:17px}.file small{font-size:12px}
.vns{grid-template-columns:minmax(0,1fr)}.vbig:nth-child(even){translate:none}.vbig b{font-size:19px}.play{width:52px;height:52px}
.qr.hot{font-size:17px}
}

/* "Sound like your DMs?": one chat per pillar, switched by kind (22 October 2026). The switch is three radios, so it needs no script. */
.fdk{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.kinds{display:flex;align-items:center;justify-content:center;gap:6px;margin:-26px auto 40px;flex-wrap:wrap}
.kinds span{color:#fff;font-weight:700;font-size:15px;margin-right:6px;opacity:.8}
.kinds label{cursor:pointer;font-weight:800;font-size:15px;padding:11px 20px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;transition:transform .3s var(--ease-bounce),background .2s}
.kinds label:hover{transform:translateY(-3px)}
#fdk-p:checked~.kinds label[for=fdk-p],#fdk-s:checked~.kinds label[for=fdk-s],#fdk-c:checked~.kinds label[for=fdk-c]{background:var(--pop);color:var(--ink)}
.kv{display:none}
#fdk-p:checked~.phones .kv-p,#fdk-s:checked~.phones .kv-s,#fdk-c:checked~.phones .kv-c{display:block;animation:fd-in .45s var(--ease-bounce)}
@keyframes fd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phones.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1280px}
.phones.four .ph{position:relative;rotate:none;translate:none}
.phones.four .ph:nth-child(odd){rotate:-2deg}.phones.four .ph:nth-child(even){rotate:2deg;translate:0 26px}
.ph .no{position:absolute;top:10px;right:14px;z-index:2;font-weight:900;font-size:12px;color:rgba(20,29,42,.35)}
.phones.four .feed{min-height:380px}
.phones.four .b{font-size:14px}
.b.brand{background:#fff;border:2px solid var(--a2)}
.nt{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.3}
.nt .hrt{color:var(--a1);font-size:18px}
@media (max-width:900px){
.kinds{margin:-20px auto 26px}.kinds label{padding:9px 14px;font-size:14px}.kinds span{flex-basis:100%;text-align:center;margin:0 0 4px}
.phones.four{display:flex}.phones.four .ph{flex:0 0 82%;rotate:none!important;translate:none!important}
}

/* "Sound like your page?" on real screens (22 October 2026): a plain light social-app look, in the phone's own system font,
   then the problem and the fix under each phone, as in A. */
#fdk-p:checked~.igs .kv-p,#fdk-s:checked~.igs .kv-s,#fdk-c:checked~.igs .kv-c{display:block;animation:fd-in .45s var(--ease-bounce)}
.igs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1280px;margin:0 auto}
.iph{background:#fff;border:8px solid var(--ink);border-radius:34px;overflow:hidden;height:470px;font:13px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#111;box-shadow:0 26px 50px rgba(0,0,0,.35)}
.isb{display:flex;justify-content:space-between;padding:8px 16px 2px;font-weight:600;font-size:11px}
.it{display:flex;align-items:center;gap:10px;padding:6px 14px 10px;border-bottom:1px solid #EFEFEF}.it b{font-size:15px}.ib{font-size:22px;line-height:1}
.isub{padding:10px 14px 4px;font-weight:600;font-size:12px;color:#737373}
.ia{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px;padding:4px}
.ia svg{width:100%;height:100%}
.ir{display:flex;align-items:center;gap:10px;padding:9px 14px}.ir>div{flex:1;min-width:0}.ir b{display:block;font-size:13px}.ir span{display:block;color:#737373;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ir small{color:#A0A0A0;font-size:11px}
.ih{display:flex;align-items:center;gap:8px;padding:8px 12px}.ih .ia{width:28px;height:28px}
.ip{aspect-ratio:16/9;background:var(--bg);display:grid;place-items:center}.ip svg{width:34%}
.ii{padding:8px 12px 2px;font-size:16px}
.ic{padding:2px 12px}
.ago{padding:2px 12px 6px;color:#A0A0A0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.icm{display:flex;gap:8px;align-items:center;padding:5px 12px}.icm .ia{width:24px;height:24px;font-size:10px}
.ins{margin:8px 14px;border:1px solid #EFEFEF;border-radius:14px;padding:14px}.ins>span{color:#737373;font-size:12px}.ins>b{display:block;font-size:30px;margin:2px 0 12px}
.ins.sm>b{font-size:20px;margin:2px 0 0}
.bar2{height:10px;border-radius:9px;background:#D9D9D9;overflow:hidden}.bar2 i{display:block;height:100%;background:#7B61FF}
.leg{display:grid;gap:6px;margin-top:12px;font-size:12px}.leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.leg .d1{background:#7B61FF}.leg .d2{background:#D9D9D9}
.thr{display:flex;flex-direction:column;gap:8px;padding:14px;height:calc(100% - 70px)}
.tav{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}.tav .ia{width:56px;height:56px;font-size:20px}.tav small{color:#737373}
.tb{align-self:flex-start;background:#EFEFEF;border-radius:18px;padding:9px 13px;max-width:85%}
.tin{margin-top:auto;border:1px solid #DBDBDB;border-radius:22px;padding:9px 14px;color:#A0A0A0}
.igc .cap{margin-top:16px;color:#fff}
.igc .n{display:block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.igc .cap>p{color:#fff!important;margin:0;font-size:16px;line-height:1.35;font-weight:600}
.igc .fx{margin-top:12px;background:var(--pop);color:var(--ink);border-radius:16px;padding:12px 14px}.igc .fx .n{opacity:.75}.igc .fx p{color:var(--ink);margin:0;font-size:15px;line-height:1.35;font-weight:700}
@media (max-width:900px){
.igs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 10px;gap:16px;scrollbar-width:none}
.igc{flex:0 0 80%;scroll-snap-align:center}
}
.igc .fx .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.igc .fx .chips span{font-size:12px;font-weight:800;background:rgba(20,29,42,.1);border-radius:999px;padding:5px 10px}

/* The fix, tidied (the owner, 22 October 2026): a header strip with the pillar, then how we come in and what you get as a checklist.
   The problem keeps three lines' room, so the four fixes start on one line on a laptop. */
.igc .pr{min-height:96px}
.igc .fx{padding:0;overflow:hidden;background:#fff;border-radius:20px}
.fxh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--pop);padding:12px 16px}
.fxh span{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.7}
.fxh b{font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.fxb{padding:14px 16px 16px;color:var(--ink)}
.fxb small{display:block;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#C77700;margin-bottom:6px}
.igc .fxb p{margin:0 0 12px;font-size:15px;line-height:1.35;font-weight:700;color:var(--ink);min-height:61px}
.fxb ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(20,29,42,.1)}
.fxb li{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:600;line-height:1.35;padding:8px 0;border-bottom:1px solid rgba(20,29,42,.08)}
.fxb li:last-child{border-bottom:0;padding-bottom:0}
.fxb li::before{content:'';flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--pop) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23141D2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:900px){.igc .pr{min-height:0}.igc .fxb p{min-height:0}}
.igc .pr p{color:#fff!important;margin:0;font-size:16px;line-height:1.35;font-weight:600}
.igc .fxb p{min-height:81px}
@media (max-width:900px){.igc .fxb p{min-height:0}}

/* Show, not say (the owner, 22 October 2026): each phone flips from Today (the broken screen) to With us (what we make).
   A checkbox per phone, so no script. */
.igh{display:flex;align-items:baseline;gap:10px;color:#fff;margin:0 4px 12px}
.igh span{font-weight:900;font-size:13px;color:var(--pop)}.igh b{font-size:22px;font-weight:900;letter-spacing:-.02em}
.flip{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.aft{display:none}
.flip:checked~.iph .bef{display:none}
.flip:checked~.iph .aft{display:block;animation:fd-in .45s var(--ease-bounce)}
.flip:checked~.iph{border-color:var(--pop);box-shadow:0 0 0 4px rgba(255,165,0,.35),0 26px 50px rgba(0,0,0,.35)}
.tog{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:16px auto 0;max-width:240px;background:rgba(255,255,255,.1);border-radius:999px;padding:4px}
.tog label{position:relative;z-index:1;text-align:center;font-weight:800;font-size:14px;padding:9px 0;color:#fff;cursor:pointer;border-radius:999px;transition:background .25s,color .25s}
.tog .t1{background:#fff;color:var(--ink)}
.flip:checked~.tog .t1{background:transparent;color:#fff}
.flip:checked~.tog .t2{background:var(--pop);color:var(--ink)}
.flip:not(:checked)~.tog .t2{animation:fd-nudge 2.4s ease-in-out infinite}
@keyframes fd-nudge{0%,70%,100%{transform:none}80%{transform:scale(1.08)}90%{transform:scale(.97)}}
/* With us: the core profile */
.pers{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 14px 8px;text-align:center}
.pers b{font-size:15px}
.pav2{width:64px;height:64px;border-radius:50%;background:#FFF1D6;display:grid;place-items:center;padding:8px}.pav2 svg{width:100%}
.ia.big{width:56px;height:56px}
.prow{display:grid;gap:8px;padding:6px 14px}
.prow>div{display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:center;background:#F6F6F6;border-radius:12px;padding:8px 10px}
.prow .pi{grid-row:span 2;font-size:18px}.prow small{color:#737373;font-size:11px}.prow b{font-size:13px}
/* With us: the month */
.mo{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:12px 12px 8px}
.dc{position:relative;aspect-ratio:1;border-radius:7px;background:var(--bg);display:grid;place-items:center;font-size:11px;color:#fff;font-weight:700}
.dc em{position:absolute;top:2px;left:4px;font-style:normal;font-size:8px;opacity:.85}
.day1{margin:4px 12px;border:1px solid #EFEFEF;border-radius:14px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px}
.day1 b{flex-basis:100%;font-size:13px}.day1 span{font-size:11px;font-weight:700;background:#E9F9EF;color:#127A3E;border-radius:999px;padding:3px 8px}
/* With us: shown to new people, and a way to pay */
.sugg{margin:8px 12px 0;font-size:11px;font-weight:700;color:#7B61FF;background:#F1EEFF;border-radius:8px;padding:6px 9px}
.ih .sp{display:block;font-size:11px;color:#737373}
.ip.big{position:relative;aspect-ratio:4/3}
.ip .tag{position:absolute;right:10px;bottom:10px;background:#fff;color:#111;font-weight:800;font-size:15px;padding:5px 10px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.cta{display:flex;justify-content:space-between;align-items:center;background:#3B82F6;color:#fff;font-weight:700;padding:9px 12px;font-size:13px}
.slots{display:flex;gap:6px;padding:8px 12px 0}.slots span{font-size:11px;font-weight:700;border:1px solid #3B82F6;color:#3B82F6;border-radius:999px;padding:4px 8px}
.rc{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 14px 12px}.rc>div{border:1px solid #EFEFEF;border-radius:12px;padding:8px 10px}.rc span{display:block;font-size:11px;color:#737373}.rc b{font-size:18px}
.aft>.cta:last-child{margin:0 14px;border-radius:10px}


/* D's notification rows share a class name with B's sticky notes: the notes keep B's look. */
.fb .notes .nt{display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-radius:0;padding:24px 20px 20px;font-size:inherit;line-height:normal}

/* The visitor's question, as two cut-out speech bubbles. */
.fe-q{padding-top:90px;padding-bottom:40px;display:flex;flex-direction:column;align-items:center;gap:22px}
.qb{position:relative;max-width:760px;padding:26px 34px;box-shadow:0 18px 30px rgba(20,29,42,.18)}
.qb p{margin:0;font-family:'Anton',Impact,sans-serif;font-size:clamp(40px,6.4vw,92px);line-height:.95;letter-spacing:-.005em;text-transform:uppercase}
.qb.you{background:#fff;--r:-3deg;align-self:flex-start;margin-left:6vw;clip-path:polygon(0 4%,6% 0,40% 3%,72% 0,100% 5%,98% 50%,100% 96%,62% 100%,30% 97%,4% 100%,2% 52%)}
.qb.you .who{position:absolute;top:-16px;left:30px;background:var(--a2);color:#fff;font-weight:900;font-size:14px;padding:6px 14px;border-radius:999px;transform:rotate(-4deg)}
.qb.us{background:var(--ink);color:#F4E9D6;--r:2deg;align-self:flex-end;margin-right:6vw;display:flex;align-items:center;gap:22px}
.qb.us img{width:64px;height:64px;flex:none;border-radius:50%;background:var(--navy-700);padding:10px}
.qb.us p{font-size:clamp(32px,4.6vw,66px)}.qb.us em{font-style:normal;color:var(--pop)}
.qh{position:static;align-self:center;transform:rotate(-3deg);color:var(--a1)}

/* D's phones, taped down on B's dark page. */
.fe-work .kinds span{color:#F4E9D6}
.fe-work .igc{position:relative}
.fe-work .igc::before{content:'';position:absolute;z-index:3;top:26px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(255,236,170,.8);transform:rotate(-5deg)}
.fe-work .igc:nth-child(2)::before{transform:rotate(4deg)}.fe-work .igc:nth-child(3)::before{transform:rotate(-2deg)}.fe-work .igc:nth-child(4)::before{transform:rotate(6deg)}
.fe-work .igc:nth-child(odd) .iph{rotate:-1.5deg}.fe-work .igc:nth-child(even) .iph{rotate:1.5deg}
.fe-work .igh b{font-family:'Permanent Marker',cursive;font-weight:400;font-size:26px}
.fe-work .iph{border-color:#F4E9D6}

/* A's pricing dots, on B's price tags. */
.tg .dots{display:flex;gap:6px;margin-top:14px}.tg .dots i{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);opacity:.35}.tg .dots i.on{background:var(--ink);opacity:1}
.tg>small{display:block;margin-top:8px;font-size:12px;font-weight:800}

@media (max-width:900px){
.qb{padding:18px 20px}.qb.you{margin-left:0}.qb.us{margin-right:0;gap:14px}.qb.us img{width:44px;height:44px}
.fe-work .igc::before{top:24px}
}
/* B's tape row uses .t1 and .t2 too: the Today / With us switch keeps its own place. The question bubble is not clipped, so its tag shows. */
.tog label.t1,.tog label.t2{top:auto;transform:none}
.qb.you{clip-path:none;border-radius:6px}

/* "Sound like your page?" as one card that turns over (the owner, 22 October 2026). Pick a pillar and a kind, tap the card:
   Today on the front, With us on the back. Until it is tapped, the card peeks round every few seconds to show it turns. */
.fe-deck{text-align:center}
.fe-deck .fb-huge{margin-bottom:30px}
.fe-deck .kinds{margin:0 auto 18px}
.ptabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 34px;max-width:900px}
.ptabs label{display:flex;align-items:center;gap:10px;cursor:pointer;background:rgba(244,233,214,.08);border:2px solid rgba(244,233,214,.2);color:#F4E9D6;border-radius:18px;padding:10px 18px 10px 10px;transition:transform .3s var(--ease-bounce),background .2s,border-color .2s}
.ptabs label:hover{transform:translateY(-4px) rotate(-1deg)}
.ptabs svg{width:38px;height:38px;--ink:#141D2A;--paper:#fff;background:#F4E9D6;border-radius:12px;padding:4px}
.ptabs span{font-family:'Anton',sans-serif;font-size:14px;color:var(--pop)}
.ptabs b{font-family:'Permanent Marker',cursive;font-weight:400;font-size:20px}
#fpl-1:checked~.ptabs label[for=fpl-1],#fpl-2:checked~.ptabs label[for=fpl-2],#fpl-3:checked~.ptabs label[for=fpl-3],#fpl-4:checked~.ptabs label[for=fpl-4]{background:var(--pop);border-color:var(--pop);color:var(--ink);transform:rotate(-2deg) scale(1.04)}
#fpl-1:checked~.ptabs label[for=fpl-1] span,#fpl-2:checked~.ptabs label[for=fpl-2] span,#fpl-3:checked~.ptabs label[for=fpl-3] span,#fpl-4:checked~.ptabs label[for=fpl-4] span{color:var(--ink)}
.deck{perspective:1600px;display:grid;place-items:center}
.fcard{display:none;width:330px;height:610px}
#fdk-p:checked~#fpl-1:checked~.deck .fcard.p1.kp,
#fdk-s:checked~#fpl-1:checked~.deck .fcard.p1.ks,
#fdk-c:checked~#fpl-1:checked~.deck .fcard.p1.kc,
#fdk-p:checked~#fpl-2:checked~.deck .fcard.p2.kp,
#fdk-s:checked~#fpl-2:checked~.deck .fcard.p2.ks,
#fdk-c:checked~#fpl-2:checked~.deck .fcard.p2.kc,
#fdk-p:checked~#fpl-3:checked~.deck .fcard.p3.kp,
#fdk-s:checked~#fpl-3:checked~.deck .fcard.p3.ks,
#fdk-c:checked~#fpl-3:checked~.deck .fcard.p3.kc,
#fdk-p:checked~#fpl-4:checked~.deck .fcard.p4.kp,
#fdk-s:checked~#fpl-4:checked~.deck .fcard.p4.ks,
#fdk-c:checked~#fpl-4:checked~.deck .fcard.p4.kc{display:block;animation:fe-deal .6s var(--ease-bounce)}
@keyframes fe-deal{from{opacity:0;transform:translateY(40px) rotate(-6deg) scale(.9)}to{opacity:1;transform:none}}
.turn{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform 1s cubic-bezier(.3,1.35,.45,1)}
.flip:checked+.turn{transform:rotateY(180deg)}
.flip:not(:checked)+.turn{animation:fe-peek 4s ease-in-out 1.2s infinite}
@keyframes fe-peek{0%,62%,100%{transform:rotateY(0)}72%{transform:rotateY(-32deg)}82%{transform:rotateY(8deg)}90%{transform:rotateY(0)}}
.turn:hover{animation-play-state:paused}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
.face .iph{height:100%;text-align:left;border-color:#F4E9D6;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.face.back .iph{border-color:var(--pop);box-shadow:0 0 0 6px rgba(255,165,0,.3),0 30px 60px rgba(0,0,0,.45)}
.badge{position:absolute;z-index:3;top:-18px;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase;background:#F4E9D6;color:var(--ink);padding:6px 18px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.badge.us{background:var(--pop);transform:translateX(-50%) rotate(3deg)}
.flipnote{position:static;display:block;margin:30px auto 0;color:var(--pop);transform:rotate(-2deg)}
/* The simpler screens: one big signal each. */
.face .it{padding:4px 16px 12px}.face .it b{font-size:17px}
.rq{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #F2F2F2}
.rq .ia.g{width:46px;height:46px;background:#C6CEDB;font-size:16px}
.rq b{display:block;font-size:15px}.rq span{font-size:14px;color:#737373}
.face .ip.big{position:relative;aspect-ratio:1}
.face .ip.big svg{width:46%}
.stamp2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);font-family:'Anton',sans-serif;font-size:30px;color:#E3263A;border:5px solid #E3263A;padding:2px 12px;background:rgba(255,255,255,.85);text-transform:uppercase;white-space:nowrap}
.bub{margin:14px 16px;background:#F2F2F2;border-radius:18px;padding:12px 16px;font-size:16px;font-weight:600}
.donut{width:220px;height:220px;margin:34px auto 20px;border-radius:50%;background:conic-gradient(#7B61FF calc(var(--f)*1%),#E5E5E5 0);display:grid;place-items:center}
.donut>div{width:150px;height:150px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut b{font-size:44px;line-height:1}.donut span{font-size:13px;color:#737373;max-width:100px}
.new{text-align:center;font-size:16px;color:#737373}.new b{color:#111;font-size:22px}
.ask{position:absolute;background:#fff;color:#111;font-weight:700;font-size:15px;padding:8px 13px;border-radius:16px 16px 16px 4px;box-shadow:0 6px 14px rgba(0,0,0,.18);animation:fa-pop 3.6s var(--ease-bounce) infinite}
.ask.a0{top:10%;left:8%}.ask.a1{top:34%;right:7%;animation-delay:.5s;border-radius:16px 16px 4px 16px}.ask.a2{bottom:10%;left:12%;animation-delay:1s}
@keyframes fa-pop{0%{transform:scale(.6);opacity:0}12%,80%{transform:none;opacity:1}100%{transform:translateY(-8px);opacity:0}}
.mo.big{gap:6px;padding:16px}.mo.big .dc{font-size:14px;border-radius:9px}
.allset{margin:6px 16px;text-align:center;font-weight:800;color:#127A3E;background:#E9F9EF;border-radius:12px;padding:12px}
.face .cta{margin:14px 16px 0;border-radius:12px;padding:13px 16px;font-size:15px}
.face .pers{padding-top:26px}.face .pav2{width:90px;height:90px}.face .pers b{font-size:18px}
.face .prow{padding:10px 16px}.face .prow>div{padding:12px}
.face .rc{padding:14px 16px 4px}
.face .ih{padding:10px 16px}
@media (max-width:900px){.fcard{width:290px;height:560px}.ptabs{gap:8px}.ptabs label{padding:8px 12px 8px 8px;flex:1 1 40%}.ptabs b{font-size:16px}.ptabs svg{width:30px;height:30px}.donut{width:190px;height:190px}.donut>div{width:130px;height:130px}}
.flipnote{color:var(--pop)!important;font-size:24px}
.fcard{height:560px}
@media (max-width:900px){
.ptabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:30px}
.ptabs label{min-width:0;padding:8px 10px 8px 8px;gap:8px}.ptabs b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard{height:510px}
}

/* "Sound familiar?" with the four agreed scenes (22 October 2026): B's strips, one per pillar, switched by kind.
   Each panel is drawn in em, so the same picture shrinks to a phone. */
.fe-strips .kinds{margin:-10px 0 34px;justify-content:flex-start}
#fdk-p:checked~.strips .kv-p,#fdk-s:checked~.strips .kv-s,#fdk-c:checked~.strips .kv-c{display:grid}
.fe-strips .strip .lbl b{font-size:40px}
.fe-strips .pn{font-size:15px}
.fe-strips .pn.s1p,.fe-strips .pn.s3p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;padding:.6em .6em 3.2em}
.fe-strips .pn svg.obj{width:38%;margin:0;transform:rotate(-6deg)}
.fe-strips .pn svg.obj.sm{width:24%}
.fe-strips .pn .cap{font-size:.95em}
.sb2{position:absolute;z-index:2;background:#fff;color:var(--ink);font-weight:800;font-size:.9em;line-height:1.15;padding:.45em .7em;border:.18em solid var(--ink);border-radius:1.2em 1.2em 1.2em .2em;max-width:60%;animation:fa-pop 3.6s var(--ease-bounce) infinite}
.sb2.q0{top:.7em;left:.7em}.sb2.q1{top:2.6em;right:.6em;border-radius:1.2em 1.2em .2em 1.2em;animation-delay:.5s}.sb2.q2{top:5em;left:1em;animation-delay:1s}
@keyframes fa-pop{0%{transform:scale(.6);opacity:0}12%,82%{transform:none;opacity:1}100%{transform:translateY(-6px);opacity:0}}
.stamp3{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);font-family:'Anton',sans-serif;font-size:1.45em;color:#E3263A;border:.22em solid #E3263A;padding:0 .4em;background:rgba(255,255,255,.85);white-space:nowrap;animation:fb-thump 2.4s var(--ease-bounce) infinite}
.reach{width:7.4em;height:7.4em;border-radius:50%;border:.2em solid var(--ink);background:radial-gradient(#fff 56%,transparent 57%),conic-gradient(var(--ink) calc(var(--f)*1%),rgba(255,255,255,.55) 0);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink)}
.reach b{font-family:'Anton',sans-serif;font-weight:400;font-size:1.8em;line-height:1}.reach small{font-size:.6em;font-weight:800}
.mini-p{width:4.2em;height:4.2em;border-radius:50%;background:#FFF1D6;border:.18em solid var(--ink);display:grid;place-items:center;padding:.5em}.mini-p svg{width:100%!important;margin:0!important}
.chips2{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em}.chips2 em{font-style:normal;font-size:.75em;font-weight:800;background:var(--pop);border:.15em solid var(--ink);border-radius:999px;padding:.2em .6em}
.cal2{display:grid;grid-template-columns:repeat(7,1.55em);gap:.3em}.cal2 i{font-style:normal;height:1.55em;border-radius:.3em;background:var(--bg);border:.12em solid var(--ink);color:#fff;font-size:.8em;font-weight:900;display:grid;place-items:center}
.post2{width:62%;border:.18em solid var(--ink);border-radius:.6em;overflow:hidden;background:#fff}
.ph2{position:relative;display:grid;place-items:center;aspect-ratio:16/10;background:var(--bg)}.ph2 svg.obj{width:40%!important;transform:none!important}
.btn2{display:block;background:#3B82F6;color:#fff;font-weight:800;font-size:.75em;padding:.4em .6em;text-align:left}
.btn2.solo{border:.18em solid var(--ink);border-radius:.5em;width:70%}
.tag2{position:absolute;right:.3em;bottom:.3em;background:#fff;border:.15em solid var(--ink);border-radius:.3em;font-weight:900;font-size:.85em;padding:0 .3em}
.new2{font-size:1em;letter-spacing:.2em}
.rate2{display:flex;gap:.4em}.rate2>span{border:.18em solid var(--ink);border-radius:.5em;padding:.3em .6em;text-align:left;background:#fff}.rate2 small{display:block;font-size:.65em;opacity:.7}.rate2 b{font-size:1.1em}
@media (max-width:900px){
.fe-strips .kinds{justify-content:center;margin:-6px auto 26px}
.fe-strips .pn{font-size:8.6px;aspect-ratio:3/4}
.fe-strips .strip .lbl b{font-size:26px}
.fe-strips .pn svg.obj{width:48%}.fe-strips .pn svg.obj.sm{width:30%}
.fe-strips .pn .cap{font-size:1.15em;padding:.5em .5em}
.fe-strips .pn.s1p,.fe-strips .pn.s3p{padding-bottom:4.6em}
}
.reach{flex-direction:column!important;text-align:center}.reach b,.reach small{display:block}.reach small{max-width:5em;line-height:1.1}
@media (max-width:900px){
.fe-strips .pn .big{font-size:4.3vw}
.sb2{font-size:1em;max-width:78%}.sb2.q0{top:.6em;left:.5em}.sb2.q1{top:4.2em;right:.5em}.sb2.q2{top:7.8em;left:.5em}
.fe-strips .pn.s1p svg.obj.sm{margin-top:8em}
}

/* Content (the owner, 22 October 2026: no pink here). Today is a page gone grey and dusty, like a shop with its shutters down;
   with us it comes back in the brand's own navy and orange. */
.pn.dead{background:#A9AEB8!important;background-image:radial-gradient(rgba(20,29,42,.16) 2px,transparent 2.5px),repeating-linear-gradient(0deg,rgba(20,29,42,.14) 0 3px,transparent 3px 14px)!important;background-size:14px 14px,auto!important}
.pn.dead svg.obj{filter:grayscale(1) contrast(.8);opacity:.65}
.pn.dead .web{position:absolute;top:0;right:0;width:4.4em;height:4.4em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23141D2A' stroke-opacity='.55' stroke-width='1.6'%3E%3Cpath d='M60 0L8 52M60 0L30 58M60 0L2 30M60 0L58 58'/%3E%3Cpath d='M48 2c0 6 4 10 10 10M36 2c0 12 10 22 22 22M24 2c0 18 16 34 34 34M12 2c0 24 22 46 46 46'/%3E%3C/svg%3E") center/contain no-repeat}
.pn.alive{background:var(--navy-700)!important}
.pn.alive .cal2 i{background:#F4E9D6!important;color:var(--ink);border-color:#F4E9D6}
.pn.alive .cal2 i:nth-child(3n+1){background:var(--pop)!important;border-color:var(--pop)}
.pn.alive .cal2 i{animation:fe-tick .5s var(--ease-bounce) both}
.pn.alive .cal2 i:nth-child(1){animation-delay:0.08s}.pn.alive .cal2 i:nth-child(2){animation-delay:0.16s}.pn.alive .cal2 i:nth-child(3){animation-delay:0.24s}.pn.alive .cal2 i:nth-child(4){animation-delay:0.32s}.pn.alive .cal2 i:nth-child(5){animation-delay:0.40s}.pn.alive .cal2 i:nth-child(6){animation-delay:0.48s}.pn.alive .cal2 i:nth-child(7){animation-delay:0.56s}.pn.alive .cal2 i:nth-child(8){animation-delay:0.64s}.pn.alive .cal2 i:nth-child(9){animation-delay:0.72s}.pn.alive .cal2 i:nth-child(10){animation-delay:0.80s}.pn.alive .cal2 i:nth-child(11){animation-delay:0.88s}.pn.alive .cal2 i:nth-child(12){animation-delay:0.96s}.pn.alive .cal2 i:nth-child(13){animation-delay:1.04s}.pn.alive .cal2 i:nth-child(14){animation-delay:1.12s}
@keyframes fe-tick{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.pn.alive .cal2{grid-template-columns:repeat(7,2.1em);gap:.4em}.pn.alive .cal2 i{height:2.1em;font-size:1em}
@media (max-width:900px){.pn.alive .cal2{grid-template-columns:repeat(7,1.7em);gap:.3em}.pn.alive .cal2 i{height:1.7em}}

/* Less pink, more paper, in the strips only (the owner, 22 October 2026; the four systems cards stay as they were): the pink is toned
   down to a dusty rose, and the strips' coloured panels get a printed texture: fine grain, halftone dots and light hatching, as if inked on newsprint. */
.fe-strips{--a1:#D9909E}
.fe-strips .pn.s1p:not(.dead),.fe-strips .ph2{position:relative;isolation:isolate}
.fe-strips .pn.s1p:not(.dead)::before,.fe-strips .ph2::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .15 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
   radial-gradient(rgba(20,29,42,.15) 1.5px,transparent 2px) 0 0/9px 9px,
   repeating-linear-gradient(-35deg,rgba(20,29,42,.07) 0 2px,transparent 2px 7px),
   radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.18),transparent 60%),
   var(--bg);
  mix-blend-mode:normal}
.fe-strips .pn.s1p:not(.dead){background:transparent!important}
.fe-strips .ph2{background:transparent!important}

/* The Product strips take the Content card's pink exactly (the owner, 22 October 2026): the brand pink at 60% saturation,
   #CD6B87, printed with the card's own halftone dots. */
.fe-strips{--a1:#CD6B87}
.fe-strips .kv-p .pn.s1p:not(.dead)::before,.fe-strips .kv-p .ph2::before{background:radial-gradient(rgba(20,29,42,.18) 2px,transparent 2.5px) 0 0/14px 14px,var(--bg)}

/* Monetization's fix: a path anyone can follow, with no shop button (the owner, 22 October 2026: shoppable tabs are not
   everywhere). Three numbered steps light up in turn. */
.path2{display:flex;flex-direction:column;gap:.3em;width:80%}
.path2>span{display:flex;align-items:center;gap:.45em;background:#fff;border:.15em solid var(--ink);border-radius:.5em;padding:.25em .45em;font-size:.75em;font-weight:800;text-align:left;animation:fe-step 3s infinite}
.path2>span:nth-child(2){animation-delay:.5s}.path2>span:nth-child(3){animation-delay:1s}
.path2 b{flex:none;width:1.5em;height:1.5em;border-radius:50%;background:var(--pop);display:grid;place-items:center;font-size:.9em}
@keyframes fe-step{0%,15%{background:#fff}25%,70%{background:#FFE9BF}85%,100%{background:#fff}}
.fe-strips .kv-p .s3p .post2,.fe-strips .kv-s .s3p .post2{width:48%}

/* What happens next (the owner, 22 October 2026): after each scene, a panel with the consequence that should haunt them.
   The strip now reads scene, and then, fix first, how we come in. Two by two on a phone. */
.fe-strips .strip{grid-template-columns:130px repeat(4,minmax(0,1fr))}
.pn.thn{background:var(--ink)!important;border-color:#E3263A;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:1.2em 1em;text-align:left}
.pn.thn .then{position:absolute;top:.7em;left:.7em;background:#E3263A;color:#fff;font-family:'Anton',sans-serif;font-size:1em;letter-spacing:.04em;padding:.15em .6em;transform:rotate(-4deg)}
.pn.thn p{margin:1.4em 0 0;font-family:'Permanent Marker',cursive;font-size:1.25em;line-height:1.25;color:#F4E9D6!important}
@media (max-width:900px){
.fe-strips .strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fe-strips .strip .lbl{grid-column:1/-1}
.fe-strips .pn{font-size:10.5px}
.fe-strips .pn .big{font-size:6.6vw}
.pn.thn p{font-size:1.45em}
}
/* Four panels share the row on a laptop: a little smaller type and taller panels, so nothing spills. */
@media (min-width:901px){.fe-strips .pn{font-size:13px;aspect-ratio:4/5}.fe-strips .pn .big{font-size:2.5em}.pn.alive .cal2{grid-template-columns:repeat(7,1.75em);gap:.3em}.pn.alive .cal2 i{height:1.75em}}

/* "And then…", drawn as a dread panel (the owner, 22 October 2026): night, a red glow from below, halftone and speed lines,
   a picture of the loss for each pillar, and the line on a torn scrap taped over it. */
.pn.thn{border-color:#F4E9D6;justify-content:flex-end;align-items:stretch;padding:0;overflow:hidden;
  background:
   radial-gradient(rgba(244,233,214,.13) 1.6px,transparent 2px) 0 0/10px 10px,
   repeating-conic-gradient(from 0deg at 50% 115%,rgba(227,38,58,.16) 0 4deg,transparent 4deg 11deg),
   radial-gradient(120% 75% at 50% 115%,#B3122A 0%,#5A0C19 38%,#141D2A 72%)!important}
.pn.thn::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% 110%,rgba(255,80,60,.35),transparent 70%);animation:fe-flick 3.2s ease-in-out infinite}
@keyframes fe-flick{0%,100%{opacity:.55}45%{opacity:1}50%{opacity:.4}55%{opacity:.9}}
.pn.thn .then{z-index:3;top:.6em;left:.6em;transform:rotate(-6deg);padding:.55em .9em .5em;font-size:1.05em;background:#E3263A;clip-path:polygon(0 18%,9% 0,22% 14%,38% 2%,52% 15%,68% 0,80% 14%,100% 6%,92% 40%,100% 62%,88% 74%,96% 100%,74% 88%,55% 100%,40% 86%,22% 100%,12% 84%,0 92%,6% 58%)}
.thv{position:absolute;inset:0 0 auto 0;height:58%;display:grid;place-items:center;z-index:1}
.thv svg{--ink:#F4E9D6;--paper:#2A3446;--a1:#3A4458;--a2:#55607A;--a3:#3A4458;--pop:#7A8399}
.v-aud .spot{position:absolute;top:0;left:50%;width:70%;height:100%;transform:translateX(-50%);background:linear-gradient(rgba(255,240,200,.28),rgba(255,240,200,0));clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.v-aud svg{width:26%;margin-top:30%;opacity:.85}
.v-con .hook{position:absolute;top:18%;left:50%;width:2.6em;height:1.4em;margin-left:-1.3em;border:.18em solid #F4E9D6;border-bottom:0;border-radius:1.4em 1.4em 0 0}
.v-con .closed{margin-top:1.4em;font-family:'Anton',sans-serif;font-size:1.7em;letter-spacing:.06em;color:#141D2A;background:#F4E9D6;padding:.15em .6em;border:.15em solid #E3263A;transform-origin:50% -1.2em;animation:fe-swing 2.6s ease-in-out infinite}
@keyframes fe-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.v-pro{grid-auto-flow:column;gap:.2em}.v-pro svg{width:34%;transform:rotate(-8deg);opacity:.8}
.v-pro .fade{font-family:'Anton',sans-serif;font-size:2em;letter-spacing:.1em;color:transparent;background:linear-gradient(90deg,#F4E9D6,rgba(244,233,214,0));-webkit-background-clip:text;background-clip:text;animation:fe-fade 2.4s ease-in-out infinite}
@keyframes fe-fade{0%,100%{opacity:.2;letter-spacing:.1em}50%{opacity:1;letter-spacing:.35em}}
.v-mon svg{width:40%;transform:rotate(28deg) translateY(10%);opacity:.85}
.v-mon .x{position:absolute;font-family:'Anton',sans-serif;font-size:2.6em;color:#E3263A;transform:rotate(-8deg);text-shadow:0 0 .3em rgba(227,38,58,.6)}
.pn.thn .tear{position:relative;z-index:2;margin:0 .6em .7em;background:#F4E9D6;color:var(--ink)!important;font-family:'Permanent Marker',cursive;font-size:1.05em;line-height:1.25;padding:.8em .8em .7em;transform:rotate(-1.5deg);box-shadow:0 .4em .8em rgba(0,0,0,.45);clip-path:polygon(0 6%,7% 0,18% 5%,31% 1%,46% 6%,60% 0,74% 5%,88% 0,100% 4%,100% 96%,90% 100%,77% 95%,62% 100%,48% 95%,33% 100%,18% 95%,6% 100%,0 94%)}
.pn.thn .tear::before{content:'';position:absolute;top:-.5em;left:50%;width:3.4em;height:1em;margin-left:-1.7em;background:rgba(255,236,170,.85);transform:rotate(3deg)}
@media (max-width:900px){.pn.thn .tear{font-size:1.15em}}
.thv.v-pro{display:flex;align-items:center;justify-content:center;gap:.3em}

/* Where it lives (the owner, 22 October 2026): every fix is drawn inside a small "Your dashboard" window. */
.fe-strips .pn.s3p{padding:.6em .6em 4.4em}
.dash{width:94%;background:#fff;border:.16em solid var(--ink);border-radius:.6em;overflow:hidden;box-shadow:.25em .25em 0 rgba(20,29,42,.15);display:flex;flex-direction:column}
.dbar{display:flex;align-items:center;gap:.25em;background:var(--navy-700);padding:.3em .45em}
.dbar i{width:.45em;height:.45em;border-radius:50%;background:rgba(255,255,255,.4)}.dbar i:first-child{background:var(--pop)}
.dbar b{margin-left:.35em;color:#fff;font-size:.62em;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.dbody{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:.7em .4em;min-height:7em}
.pn.alive .dash{background:var(--navy-700);border-color:#F4E9D6}.pn.alive .dbar{background:var(--ink)}
.dbody .post2{width:70%}
.fe-strips .pn.s3p .cap{font-size:.85em;line-height:1.25}
@media (max-width:900px){.fe-strips .pn.s3p{padding-bottom:5.6em}.dbody{min-height:0;padding:.5em .3em}.fe-strips .pn.s3p .cap{font-size:1em}}


/* Kind switch: only the chosen kind's words and pictures show */
#fdk-p:checked~.walk .k:not(.k-p),#fdk-s:checked~.walk .k:not(.k-s),#fdk-c:checked~.walk .k:not(.k-c){display:none!important}
.fh-walk .kinds{justify-content:flex-start;margin:-10px 0 26px}
.walk{max-width:1240px;margin:0 auto}

/* Pillar tabs */
.chtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.chtabs button{display:flex;align-items:center;gap:10px;font:inherit;cursor:pointer;background:rgba(244,233,214,.07);border:2px solid rgba(244,233,214,.18);color:#F4E9D6;border-radius:16px;padding:10px 14px;transition:background .2s,border-color .2s,transform .3s var(--ease-bounce)}
.chtabs button:hover{transform:translateY(-3px)}
.chtabs .cti{width:38px;height:38px;flex:none;border-radius:50%;background:#F4E9D6;padding:5px;display:grid;place-items:center}.chtabs .cti svg{width:100%;height:100%;--paper:#fff}
.chtabs b{font-family:'Permanent Marker',cursive;font-weight:400;font-size:19px}
.chtabs button.on{background:var(--pop);border-color:var(--pop);color:var(--ink)}

/* The stage */
.stage{position:relative;background:#F4E9D6;color:var(--ink);border-radius:26px;min-height:560px;overflow:hidden;touch-action:pan-y;
  background-image:radial-gradient(rgba(20,29,42,.08) 1.5px,transparent 2px);background-size:14px 14px}
.chap{display:none}.chap.on{display:block}
.segs{position:absolute;z-index:4;top:14px;left:20px;right:20px;display:flex;gap:6px}
.segs i{flex:1;height:5px;border-radius:5px;background:rgba(20,29,42,.15);overflow:hidden}.segs i b{display:block;height:100%;width:0;background:var(--ink)}
.segs i.done b{width:100%}.segs i.run b{animation:fh-fill 6.5s linear forwards}
@keyframes fh-fill{to{width:100%}}
.beat{display:none;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;align-items:center;min-height:560px;padding:50px 64px 40px}
.beat.on{display:grid}
.nar .bn{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--pop);padding:5px 10px;border-radius:6px;margin-bottom:16px}
.nar h3{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1;margin:0 0 14px;color:var(--ink);text-transform:uppercase}
.nar p{font-size:19px;line-height:1.4;font-weight:600;margin:0;color:var(--ink);max-width:420px}
.beat.now .nar h3{color:#B3122A}
.beat.now .nar p{font-family:'Permanent Marker',cursive;font-weight:400;font-size:22px;color:var(--ink)}
.beat.on .nar{animation:fh-in .5s var(--ease-out) both}
@keyframes fh-in{from{transform:translateX(-20px)}to{transform:none}}
.vis{position:relative;display:grid;place-items:center;min-height:440px}
.nav{position:absolute;z-index:5;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:0;background:var(--ink);color:var(--pop);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.nav:hover{transform:scale(1.1)}.nav.prev{left:10px}.nav.next{right:10px}

/* Things appear in turn, each time a step opens */
.pop{opacity:0}
.beat.on .pop{animation:fh-pop .55s var(--ease-bounce) var(--d,0s) both}
@keyframes fh-pop{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.beat.on .type{display:inline-block;animation:fh-type 1.6s steps(40) calc(var(--d,0s) + .4s) both}
@keyframes fh-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* The dashboard window */
.dw{width:100%;max-width:560px;background:#fff;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 22px 40px rgba(20,29,42,.22)}
.dw.wide{max-width:620px}
.dwb{display:flex;align-items:center;gap:6px;background:var(--navy-700);padding:10px 14px}
.dwb i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35)}.dwb i:first-child{background:var(--pop)}
.dwb b{margin-left:8px;color:#fff;font-size:13px;font-weight:800}
.dwc{padding:18px;display:grid;gap:10px}

/* Phone (today's problem) */
.phone2{width:300px;max-width:100%;background:#fff;border:9px solid var(--ink);border-radius:34px;padding:18px 14px 22px;box-shadow:0 26px 50px rgba(20,29,42,.3);display:grid;gap:10px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.p2t{font-weight:700;font-size:16px;padding-bottom:8px;border-bottom:1px solid #EEE}
.rq2{display:flex;gap:10px;align-items:center}.rq2 div{display:grid}.rq2 b{font-size:14px}.rq2 span{font-size:13px;color:#737373}
.ia2{width:38px;height:38px;border-radius:50%;background:#C6CEDB;color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.zero span{display:block;text-align:center;font-weight:800;color:#B3122A;background:#FDE7EA;border-radius:10px;padding:8px}
.img2{position:relative;aspect-ratio:1;border-radius:12px;background:#D9909E;display:grid;place-items:center}
.img2 svg{width:46%}
.dead2 .img2{background:#A9AEB8}.dead2 .img2 svg{filter:grayscale(1);opacity:.6}
.stamp4{font-family:'Anton',sans-serif;font-size:28px;color:#E3263A;border:5px solid #E3263A;padding:0 12px;background:rgba(255,255,255,.85);transform:rotate(-12deg);display:inline-block}
.img2 .pop{position:absolute}
.cm2{display:block;background:#F2F2F2;border-radius:16px;padding:10px 14px;font-weight:600;font-size:14px}
.ring3{display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;height:200px;margin:14px auto;border-radius:50%;background:radial-gradient(#fff 56%,transparent 57%),conic-gradient(#7B61FF 96%,#E5E5E5 0)}
.ring3 b{font-size:40px}.ring3 small{color:#737373}

/* Audience */
.pers2{display:flex;align-items:center;gap:14px}
.pav3{width:64px;height:64px;border-radius:50%;background:#FFF1D6;border:3px solid var(--ink);display:grid;place-items:center;padding:8px}.pav3 svg{width:100%}
.who2{font-size:20px;display:block}.pers2 small{font-size:13px;color:#6B7B95;font-weight:700}
.prow2{display:grid;grid-template-columns:32px 120px 1fr;align-items:center;gap:10px;background:#F6F3EC;border-radius:12px;padding:10px 12px}
.pi2{font-size:18px}.prow2 small{color:#6B7B95;font-weight:700;font-size:12px}.prow2 b{font-size:15px}
.chips3{display:flex;gap:6px;flex-wrap:wrap}.chips3 em{font-style:normal;font-weight:800;font-size:13px;background:var(--pop);border:2px solid var(--ink);border-radius:999px;padding:4px 12px}
.sl{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:8px}.sl small{font-size:12px;font-weight:700;color:#6B7B95}.sl small:last-child{text-align:right}
.trk{position:relative;height:6px;border-radius:6px;background:#E5E1D8}
.trk i{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--ink);border:3px solid var(--pop)}
.beat.on .trk i{animation:fh-slide 1.2s var(--ease-out) calc(var(--d,0s) + .2s) both}
@keyframes fh-slide{from{left:50%}to{left:var(--x)}}
.never{font-size:14px;font-weight:700}.never s{color:#B3122A;margin-left:6px}
.inv{display:block;background:var(--ink);color:#F4E9D6;border-radius:14px;padding:12px 14px}.inv small{display:block;color:var(--pop);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}.inv .type{font-size:17px;font-weight:600}
.use{display:inline-block;background:#3B82F6;color:#fff;font-weight:800;border-radius:10px;padding:9px 14px;font-size:14px}
.comps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.comp{background:#F6F3EC;border-radius:12px;padding:12px;display:grid;gap:8px}.comp>b{font-size:14px}
.cb small{display:block;font-size:11px;font-weight:700;color:#6B7B95;margin-bottom:3px}.cb i{display:block;height:8px;border-radius:6px;background:#C6CEDB;width:var(--w)}
.win{font-size:12px;font-weight:800;color:#127A3E;background:#E9F9EF;border-radius:8px;padding:5px 8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{display:grid;background:#F6F3EC;border-radius:12px;padding:10px 12px}.mini b{font-size:14px}.mini small{font-size:12px;color:#6B7B95}
.mt{display:grid;gap:4px}.mt small{font-size:12px;font-weight:700;color:#6B7B95}
.trk2{height:10px;border-radius:8px;background:#EDE9E0;overflow:hidden}.trk2 i{display:block;height:100%;width:var(--w);background:var(--pop);border-radius:8px}
.beat.on .trk2 i{animation:fh-grow 1.4s var(--ease-out) calc(var(--d,0s) + .2s) both}
@keyframes fh-grow{from{width:0}}

/* Content */
.ptabs2{display:flex;gap:6px;flex-wrap:wrap}.ptabs2 em{font-style:normal;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;background:#F6F3EC;border:2px solid #E5E1D8}.ptabs2 em.main{background:var(--ink);color:var(--pop);border-color:var(--ink)}
.cal3{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal3 i{font-style:normal;aspect-ratio:1;border-radius:8px;background:var(--navy-700);color:var(--pop);display:grid;place-items:center;font-size:15px}
.cal3 i:nth-child(3n){background:var(--pop);color:var(--ink)}
.post3{display:grid;gap:8px}
.sec{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;background:#F6F3EC;border-radius:10px;padding:9px 12px}
.sec>small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6B7B95}
.sec .type{font-weight:600;font-size:15px}
.ticks{display:flex;gap:6px;flex-wrap:wrap}.ticks i{font-style:normal;font-size:12px;font-weight:800;background:#E9F9EF;color:#127A3E;border-radius:999px;padding:3px 9px}
.frames{display:flex;gap:6px}.frames i{width:46px;height:62px;border-radius:6px;background:var(--navy-700);border:2px solid var(--ink);opacity:0}
.frames i:nth-child(2){background:var(--pop)}.frames i:nth-child(3){background:#D9909E}.frames i:nth-child(4){background:#5B7CFF}
.bk{display:inline-block;font-size:12px;font-weight:800;color:#3B82F6;border:2px solid #3B82F6;border-radius:999px;padding:3px 10px}
.fan{position:relative;width:100%;max-width:560px;height:400px}
.fan .pop{position:absolute}
.fc0{left:50%;top:50%;transform:translate(-50%,-50%)}.beat.on .fc0{animation-name:fh-pop-c}
@keyframes fh-pop-c{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%)}}
.idea{display:block;background:var(--ink);color:var(--pop);font-family:'Anton',sans-serif;font-size:26px;padding:16px 22px;border-radius:16px;white-space:nowrap}
.out{display:grid;justify-items:center;gap:6px;width:120px;padding:14px 10px;background:#fff;border:3px solid var(--ink);border-radius:16px;font-weight:800;box-shadow:0 10px 20px rgba(20,29,42,.15)}
.out b{font-size:28px;color:var(--pop)}
.fc1{left:4%;top:4%}.fc2{right:4%;top:4%}.fc3{left:4%;bottom:4%}.fc4{right:4%;bottom:4%}
.fan::before{content:'';position:absolute;inset:18% 22%;border:3px dashed rgba(20,29,42,.25);border-radius:24px}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st{display:block;text-align:center;font-weight:800;font-size:14px;padding:12px 6px;border-radius:12px;background:#F6F3EC;border:2px solid #E5E1D8}
.pipe .pop:last-child .st{background:#E9F9EF;border-color:#127A3E;color:#127A3E}
.needs{display:flex;align-items:center;gap:10px;font-weight:800;background:#FFF1D6;border-radius:12px;padding:12px 14px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 0 rgba(255,165,0,.7);animation:fh-glow 1.6s infinite}
@keyframes fh-glow{70%{box-shadow:0 0 0 10px rgba(255,165,0,0)}100%{box-shadow:0 0 0 0 rgba(255,165,0,0)}}

/* Promotion */
.winr{display:flex;align-items:center;gap:12px;background:#F6F3EC;border-radius:12px;padding:10px}
.th{width:54px;height:54px;flex:none;border-radius:10px;background:#D9909E;display:grid;place-items:center}.th svg{width:70%}
.why{font-weight:800;font-size:15px}
.grow2{display:grid;gap:2px;background:#F6F3EC;border-radius:12px;padding:10px 14px}.grow2 small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6B7B95}.grow2 b{font-size:16px}
.reach4{position:relative;width:420px;max-width:100%;aspect-ratio:1}
.reach4 .pop{position:absolute}
.core{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center;text-align:center;font-weight:800}
.reach4>.pop:first-child{left:0;top:0;width:100%;height:100%}
.reach4::before{content:'';position:absolute;inset:6%;border-radius:50%;border:3px dashed var(--pop)}
.face{font-size:30px;display:block}
.f0{left:10%;top:22%}.f1{left:24%;top:6%}.f2{left:46%;top:2%}.f3{left:68%;top:6%}.f4{left:82%;top:22%}.f5{left:86%;top:50%}.f6{left:78%;top:76%}.f7{left:56%;top:86%}.f8{left:30%;top:84%}.f9{left:8%;top:62%}
.lbl4 span{display:block;background:var(--pop);font-weight:900;padding:6px 14px;border-radius:999px;white-space:nowrap}


/* Monetization */
.item{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;background:#F6F3EC;border-radius:12px;padding:8px 12px}
.item b{font-size:16px}.item em{font-style:normal;font-weight:900;font-size:18px}
.dwc>.k{display:grid;gap:10px}
.buy4{display:grid;justify-items:center;gap:10px;width:320px;max-width:100%}
.buy4 .img2{display:grid;width:220px;background:#D9909E;border:3px solid var(--ink)}
.tag3{position:absolute;right:10px;bottom:10px;background:#fff;border:2px solid var(--ink);border-radius:8px;font-weight:900;padding:2px 8px}
.ps{display:flex;align-items:center;gap:10px;width:280px;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:9px 12px;font-weight:800}
.ps b{width:26px;height:26px;border-radius:50%;background:var(--pop);display:grid;place-items:center;flex:none}
.mk{display:grid}.mk b{font-size:18px}.mk small{color:#6B7B95;font-weight:600}
.rates{display:flex;gap:8px}.rates em{font-style:normal;font-weight:900;background:#F6F3EC;border-radius:10px;padding:8px 12px}
.sample{display:block;font-size:11px;font-weight:700;color:#6B7B95;text-align:right}

/* After the walk-through */
.endcta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:22px;color:#F4E9D6}
.endcta>span{font-family:'Permanent Marker',cursive;font-size:22px}
.go2{background:var(--pop);color:var(--ink);font-family:'Anton',sans-serif;font-size:22px;padding:10px 20px;border-radius:12px;text-decoration:none;cursor:pointer}
.endcta small{width:100%;text-align:center;font-weight:700;opacity:.75}

/* Phone */
@media (max-width:900px){
.chtabs{grid-template-columns:repeat(2,minmax(0,1fr))}.chtabs b{font-size:15px}.chtabs .cti{width:30px;height:30px}
.beat{grid-template-columns:minmax(0,1fr);gap:16px;padding:44px 16px 70px;min-height:0;align-items:start}
.nar h3{font-size:30px}.nar p{font-size:16px}.beat.now .nar p{font-size:18px}
.vis{min-height:0}
.stage{min-height:0}
.nav{top:auto;bottom:12px;margin:0;width:40px;height:40px}.nav.prev{left:14px}.nav.next{right:14px}
.prow2{grid-template-columns:26px 90px 1fr;padding:8px 10px}.prow2 b{font-size:13px}
.comps{grid-template-columns:minmax(0,1fr)}
.sec{grid-template-columns:minmax(0,1fr);gap:4px}
.fan{height:330px}.out{width:96px;padding:10px 6px}.idea{font-size:20px;padding:12px 16px}
.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
.reach4{width:300px}.core{width:110px;height:110px;margin:-55px;font-size:13px}.face{font-size:22px}
.grid2{grid-template-columns:minmax(0,1fr)}
.phone2{width:270px}
.dwc{padding:12px}
}
.reach4 .pop.lbl4{left:50%;top:auto;bottom:-6%}.reach4 .pop.lbl4 span{transform:translateX(-50%)}
.reach4 .face{position:static;inset:auto;backface-visibility:visible;-webkit-backface-visibility:visible}

/* The opening step of each pillar, full width and moving (the owner, 22 October 2026): the night of the "And then…" panels,
   the narration over it, and the problem playing out across the whole stage. */
.beat.now{display:none;position:relative;min-height:560px;padding:0;color:#F4E9D6;
  background:radial-gradient(rgba(244,233,214,.1) 1.6px,transparent 2px) 0 0/12px 12px,radial-gradient(120% 80% at 70% 115%,#B3122A 0%,#5A0C19 40%,#141D2A 75%)}
.beat.now.on{display:block}
.beat.now .nar{position:relative;z-index:3;max-width:520px;padding:50px 64px 0}
.beat.now .nar .bn{background:#E3263A;color:#fff}
.beat.now .nar h3{color:#F4E9D6}
.beat.now .nar p{color:var(--pop);font-size:24px}
.beat.now .vis{position:absolute;inset:0;z-index:1;min-height:0;display:block}
.scn{position:absolute;inset:0;overflow:hidden}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.count{--n:0;counter-reset:n var(--n);display:block;font-family:'Anton',sans-serif;font-size:76px;line-height:1}
.count::after{content:counter(n)}
.beat.on .count{animation:fh-count 2.6s ease-out .5s forwards}
@keyframes fh-count{to{--n:var(--to)}}
.ctrs{position:absolute;right:64px;bottom:56px;display:flex;gap:34px;z-index:2}
.ctr small{display:block;font-weight:800;font-size:14px;max-width:150px;opacity:.85}
.ctr.up .count{color:#F4E9D6}
.ctr.flat .count{color:#FF4D5E;animation:fh-throb 1.2s ease-in-out infinite}
@keyframes fh-throb{50%{transform:scale(1.12)}}
/* Audience: junk drifting across */
.drift{position:absolute;left:100%;top:calc(52% + (var(--i) - 4) * 30px);white-space:nowrap;background:#fff;color:var(--ink);font-weight:800;font-size:15px;padding:8px 14px;border-radius:16px 16px 16px 4px;box-shadow:0 8px 18px rgba(0,0,0,.35);opacity:.92}
.drift:nth-child(odd){background:#F4E9D6}
.beat.on .drift{animation:fh-drift 9s linear infinite;animation-delay:calc(var(--i) * -1.1s)}
@keyframes fh-drift{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 300px))}}
/* Content: the days go grey */
.sc-con .days{position:absolute;left:64px;right:64px;bottom:150px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.day{position:relative;aspect-ratio:3/4;border-radius:12px;border:3px dashed rgba(244,233,214,.35);display:grid;place-items:center;opacity:0}
.day small{position:absolute;top:6px;left:8px;font-size:11px;font-weight:800;opacity:.7}
.day.first{border:3px solid #F4E9D6;background:#D9909E}.day.first svg{width:56%}
.beat.on .day{animation:fh-dim .6s ease-out calc(.3s + var(--i) * .45s) forwards}
@keyframes fh-dim{0%{opacity:0;transform:translateY(10px)}60%{opacity:1;transform:none}100%{opacity:.55}}
.beat.on .day.first{animation:fh-first .6s ease-out .3s forwards,fh-fade 3s ease-in 1.2s forwards}
@keyframes fh-first{from{opacity:0}to{opacity:1}}
@keyframes fh-fade{to{filter:grayscale(1);opacity:.6}}
.web2{position:absolute;right:-14px;top:-30px;width:120px;height:120px;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23F4E9D6' stroke-opacity='.7' stroke-width='1.4'%3E%3Cpath d='M60 0L8 52M60 0L30 58M60 0L2 30M60 0L58 58'/%3E%3Cpath d='M48 2c0 6 4 10 10 10M36 2c0 12 10 22 22 22M24 2c0 18 16 34 34 34M12 2c0 24 22 46 46 46'/%3E%3C/svg%3E") center/contain no-repeat}
.beat.on .web2{animation:fh-web 1.2s ease-out 3.4s forwards}
@keyframes fh-web{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.sc-con .ctrs{bottom:auto;top:56px}
.ask2{position:absolute;left:64px;bottom:70px;background:#fff;color:var(--ink);font-weight:800;font-size:17px;padding:10px 16px;border-radius:18px 18px 18px 4px;opacity:0}
.beat.on .ask2{animation:fh-pop .6s var(--ease-bounce) 3.8s forwards}
/* Promotion: the same people go round */
.loop{position:absolute;right:120px;top:50%;width:300px;height:300px;margin-top:-130px}
.sc-pro .you{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:18px;background:#D9909E;border:3px solid #F4E9D6;display:grid;place-items:center}
.sc-pro .you svg{width:60%}.sc-pro .you small{position:absolute;bottom:-26px;font-weight:800;font-size:13px;white-space:nowrap}
.orbit{position:absolute;inset:0;animation:fh-spin 8s linear infinite}
@keyframes fh-spin{to{transform:rotate(360deg)}}
.same{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(-140px)}
.same span{display:block;font-size:30px;margin:-18px;animation:fh-spin 8s linear infinite reverse}
.lab1{position:absolute;right:110px;top:calc(50% + 190px);font-family:'Permanent Marker',cursive;font-size:20px;color:var(--pop)}
.walkers{position:absolute;left:0;right:0;bottom:24px;height:40px}
.pass{position:absolute;left:-40px;bottom:0;font-size:28px;opacity:.35;filter:grayscale(1)}
.beat.on .pass{animation:fh-pass 10s linear infinite;animation-delay:calc(var(--i) * -1.1s)}
@keyframes fh-pass{to{transform:translateX(calc(100vw + 80px))}}
.lab2{position:absolute;left:64px;bottom:70px;font-family:'Permanent Marker',cursive;font-size:18px;opacity:.7}
/* Monetization: the cart gives up */
.sc-mon .track{position:absolute;left:64px;right:64px;bottom:120px;display:flex;justify-content:space-between;gap:10px;padding-top:70px}
.sc-mon .track::before{content:'';position:absolute;left:0;right:0;bottom:22px;height:4px;background:repeating-linear-gradient(90deg,rgba(244,233,214,.5) 0 10px,transparent 10px 18px)}
.hs{position:relative;z-index:1;flex:1;text-align:center;font-weight:800;font-size:14px;background:#F4E9D6;color:var(--ink);border-radius:12px;padding:10px 8px;opacity:0}
.beat.on .hs{animation:fh-pop .5s var(--ease-bounce) calc(.3s + var(--i) * .25s) forwards}
.beat.on .hs:last-of-type{animation:fh-pop .5s var(--ease-bounce) 1.3s forwards,fh-shake .5s ease-in-out 4s 2}
@keyframes fh-shake{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.cart2{position:absolute;left:0;top:0;font-size:46px;z-index:2}
.beat.on .cart2{animation:fh-cart 5.5s ease-in-out .8s forwards}
@keyframes fh-cart{0%{left:0;transform:none}15%{transform:translateY(-14px)}20%{transform:none}35%{transform:translateY(-14px)}40%{transform:none}55%{transform:translateY(-14px)}60%{transform:none}72%{left:calc(80% - 40px);transform:none}85%{left:calc(80% - 40px);transform:rotate(80deg) translateY(10px)}100%{left:calc(80% - 40px);transform:rotate(80deg) translateY(10px);opacity:.6}}
.gaveup{position:absolute;right:0;top:-6px;font-family:'Anton',sans-serif;font-size:40px;color:#FF4D5E;border:5px solid #FF4D5E;padding:0 14px;transform:rotate(-10deg);opacity:0}
.beat.on .gaveup{animation:fh-stamp .4s ease-out 5.6s forwards}
@keyframes fh-stamp{from{opacity:0;transform:rotate(-10deg) scale(2)}to{opacity:1;transform:rotate(-10deg)}}
.sc-mon>.k{position:absolute;inset:0}
@media (max-width:900px){
.beat.now{min-height:620px}
.beat.now .nar{padding:44px 16px 0}.beat.now .nar p{font-size:18px}
.count{font-size:52px}.ctrs{right:16px;left:16px;bottom:70px;gap:16px;justify-content:space-between}.ctr small{font-size:12px}
.drift{font-size:13px;top:calc(60% + (var(--i) - 4) * 24px)}
.sc-con .days{left:16px;right:16px;bottom:200px;gap:6px}.day small{font-size:9px}
.sc-con .ctrs{top:auto;bottom:70px}
.ask2{left:16px;bottom:140px;font-size:15px}
.loop{right:50%;margin-right:-110px;width:220px;height:220px;top:auto;bottom:150px;margin-top:0}
.sc-pro .you{width:90px;height:90px;margin:-45px}.same{transform:rotate(var(--a)) translateY(-104px)}.same span{font-size:22px}
.lab1{right:auto;left:16px;top:auto;bottom:110px;font-size:16px}.lab2{left:16px;bottom:62px;font-size:14px}
.sc-mon .track{left:16px;right:16px;bottom:120px;flex-direction:column;gap:8px;padding-top:0;padding-right:70px}
.sc-mon .track::before{left:auto;right:30px;top:0;bottom:0;width:4px;height:auto;background:repeating-linear-gradient(0deg,rgba(244,233,214,.5) 0 10px,transparent 10px 18px)}
.hs{text-align:left;font-size:13px;padding:8px 10px}
.cart2{left:auto;right:6px;top:0;font-size:36px}
@keyframes fh-cart{0%{top:0;transform:none}72%{top:calc(80% - 30px);transform:none}85%,100%{top:calc(80% - 30px);transform:rotate(80deg)}}
.gaveup{top:auto;bottom:-56px;right:auto;left:0;font-size:30px}
}
.beat.now .nar p{color:var(--pop)!important}
.beat.now .nar h3{color:#F4E9D6!important}
@media (max-width:900px){.ask2{bottom:auto;top:200px}.web2{width:70px;height:70px;top:-20px;right:-8px}.day small{font-size:8px;white-space:nowrap}}
.same>span{display:block;margin:-18px;transform:rotate(calc(var(--a) * -1));animation:none}
.same i{display:block;font-style:normal;font-size:30px;animation:fh-spin 8s linear infinite reverse}
@media (max-width:900px){.same i{font-size:22px}}
.cart2 svg{width:64px;height:64px;display:block;--ink:#F4E9D6;--paper:#F4E9D6;--pop:var(--pop)}@media (max-width:900px){.cart2 svg{width:48px;height:48px}}

/* The two banners (the owner, 22 October 2026): the Mybrandcurve mark between the pillars at the back; at the front,
   "Built for selling and growing on" with each platform's icon in turn. */
.fh-tapes .tp span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;width:max-content}
.fh-tapes .tp b{font-weight:400}
.fh-tapes .tpm{height:.8em;width:auto;flex:none}
.fh-tapes .tpi{width:.95em;height:.95em;flex:none;color:var(--ink);--pop:#F4E9D6}
.fh-tapes .t2 .tpi[aria-label=YouTube]{--pop:#F4E9D6}
.fh-tapes .t1 span{animation:marquee 34s linear infinite}
.fh-tapes .t2 span{animation:marqueeR 40s linear infinite}
.fh-tapes.b-sell .bn-scale,.fh-tapes.b-scale .bn-sell,.fh-tapes:not(.b-sell):not(.b-scale) .bn-sell{display:none}
/* A creator's brand kit: the audience above the rates (the owner, 22 October 2026). */
.aud3{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:baseline;background:var(--ink);color:#F4E9D6;border-radius:12px;padding:12px 14px}
.aud3 small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--pop)}.aud3 b{font-size:15px}

/* The six fixes from the rules audit, taken in by the owner (22 October 2026). */
.extag{position:absolute;z-index:4;top:18px;right:20px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#F4E9D6;border:2px solid rgba(244,233,214,.5);border-radius:999px;padding:4px 10px}
.mini .tier{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--pop);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.mkline{display:flex;align-items:center;gap:10px;background:var(--ink);color:#F4E9D6;border-radius:12px;padding:10px 14px}
.mkline b{font-size:15px}.mkline small{font-size:12px;opacity:.75}.mkline em{margin-left:auto;font-style:normal;font-weight:800;color:var(--pop);font-size:13px}
.pp{display:block;font-size:12px;font-weight:800;color:#6B7B95}
.sec b{font-size:15px}
.keeps{display:flex;gap:8px;flex-wrap:wrap}.keeps em{font-style:normal;font-weight:800;font-size:13px;background:#F6F3EC;border-radius:999px;padding:5px 11px}
@media (max-width:900px){.extag{top:12px;right:14px}.mkline{flex-wrap:wrap}.mkline em{margin-left:0}}
.dwc>.k{display:grid;gap:10px}

/* The report as a journey (the owner, 22 October 2026): the walk-through's stage, seven steps, free and paid words. */
.fh-journey .stage{max-width:1240px;margin:0 auto}
.fh-journey .endcta{margin-top:22px}
.qcard{width:100%;max-width:520px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:22px;display:grid;gap:14px;box-shadow:0 22px 40px rgba(20,29,42,.2)}
.qn{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#6B7B95}
.qq{font-size:20px;line-height:1.3}
.opts{display:grid;gap:8px}
.opt{display:block;font-weight:700;font-size:15px;padding:11px 14px;border-radius:12px;border:2px solid #E5E1D8;background:#F6F3EC}
.beat.on .opt.pick{animation:fh-pick .4s ease-out 1.6s forwards}
@keyframes fh-pick{to{background:var(--pop);border-color:var(--ink)}}
.qbar{display:block;height:8px;border-radius:8px;background:#EDE9E0;overflow:hidden}.qbar i{display:block;height:100%;width:35%;background:var(--ink);border-radius:8px}
.beat.on .qbar i{animation:fh-q 3s ease-in-out 2s forwards}
@keyframes fh-q{to{width:100%}}
.res{display:flex;align-items:center;gap:18px}
.kite3{width:160px;flex:none}.kite3 .pulse{animation:pulse 1.6s infinite;transform-box:fill-box;transform-origin:center}
.ff{display:grid}.ff small{font-size:12px;font-weight:800;color:#6B7B95}.ff b{font-family:'Anton',sans-serif;font-weight:400;font-size:40px;color:#B3122A;line-height:1}
.fix1{display:grid;gap:4px;background:var(--ink);color:#F4E9D6;border-radius:14px;padding:12px 14px}.fix1 small{color:var(--pop);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.fix1 b{font-size:15px;line-height:1.35}
.field{display:block;border:2px solid #C6CEDB;border-radius:12px;padding:12px 14px;font-weight:600;color:#36475F;background:#fff}
.use.big{font-size:18px;padding:12px 20px}.payby{display:block;margin-top:6px;font-size:12px;font-weight:700;color:#6B7B95}
.paytxt{display:block;font-size:16px;font-weight:600;line-height:1.4}
.credit{display:block;font-size:13px;font-weight:700;background:#F6F3EC;border-radius:10px;padding:10px 12px}
.guar{display:block;font-size:13px;font-weight:800;color:#127A3E;background:#E9F9EF;border-radius:10px;padding:10px 12px}
.arrive{position:relative;width:100%;max-width:440px;display:grid;gap:16px;justify-items:center}
.screen2{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:16px 22px;font-size:18px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid #E5E1D8;border-top-color:var(--pop);animation:spin 1s linear infinite;flex:none}
.arrive .w1,.arrive .w2{grid-area:1/1}
.beat.on .arrive .w1{animation:fh-pop .55s var(--ease-bounce) .2s both,fh-out .3s ease-in 2s forwards}
@keyframes fh-out{to{opacity:0;transform:scale(.9)}}
.screen2.done{background:#E9F9EF;border-color:#127A3E;color:#127A3E}
.mail{display:flex;align-items:center;gap:12px;width:100%;background:rgba(255,255,255,.95);border-radius:18px;padding:12px 14px;box-shadow:0 14px 30px rgba(20,29,42,.2)}
.mail img{width:38px;height:38px;border-radius:10px;background:var(--navy-700);padding:6px}.mail span{display:grid}.mail small{color:#6B7B95}.mail em{margin-left:auto;align-self:flex-start;font-style:normal;font-size:12px;color:#6B7B95}
.gets{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;width:100%;max-width:600px}
.rimg img{width:100%;border-radius:14px;border:3px solid var(--ink);display:block;box-shadow:0 18px 30px rgba(20,29,42,.25)}
.glist{display:grid;gap:8px}
.gotit{display:block;font-weight:700;font-size:15px;background:#fff;border-radius:10px;padding:9px 12px;border:2px solid #E5E1D8}
.tiers3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:620px}
.tc{display:grid;gap:6px;align-content:start;background:#fff;border:2px solid #E5E1D8;border-radius:16px;padding:16px 14px;height:100%}
.tc b{font-family:'Anton',sans-serif;font-weight:400;font-size:24px}.tc small{font-size:13px;line-height:1.35;color:#36475F}
.tc.rec{border:3px solid var(--ink);background:var(--pop);transform:translateY(-8px);box-shadow:0 14px 26px rgba(20,29,42,.2)}
.tc em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--pop);border-radius:6px;padding:3px 7px;justify-self:start}
.days3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.days7{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.dd{display:grid;gap:4px;background:#F6F3EC;border-radius:12px;padding:10px;min-height:86px}.dd small{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#C77700}.dd b{font-size:14px;line-height:1.3}
@media (max-width:900px){
.qq{font-size:17px}.res{flex-direction:column}.kite3{width:130px}
.gets{grid-template-columns:minmax(0,1fr)}.rimg{max-width:220px;justify-self:center}
.tiers3{grid-template-columns:minmax(0,1fr)}.tc.rec{transform:none}
.days3{grid-template-columns:minmax(0,1fr)}.days7{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.fh-journey .fb-huge .h3{position:static;display:block;white-space:normal;margin-top:16px;transform:rotate(-2deg)}
/* Discreet in free, bold about the refund in paid (the owner, 22 October 2026). */
.rimg.frost{position:relative;display:block;overflow:hidden;border-radius:14px}
.rimg.frost::after{content:'Full report';position:absolute;left:0;right:0;bottom:0;top:30%;display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.06em;color:#F4E9D6;background:rgba(20,29,42,.35);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-radius:0 0 12px 12px}
.vis>.m-paid{display:grid;gap:18px;justify-items:center;width:100%}
.guarbig{display:block;max-width:520px;text-align:center;font-family:'Anton',sans-serif;font-size:30px;line-height:1.05;color:#127A3E;background:#E9F9EF;border:5px solid #127A3E;border-radius:16px;padding:14px 20px;transform:rotate(-2deg);box-shadow:0 14px 26px rgba(18,122,62,.25)}
.guarbig b{font-weight:400;color:var(--ink)}
.beat.on .gb{animation:fh-stamp2 .5s var(--ease-bounce) 1.6s both}
@keyframes fh-stamp2{from{opacity:0;transform:scale(1.6) rotate(-6deg)}to{opacity:1;transform:none}}
.tc .off{display:inline-block;justify-self:start;font-style:normal;font-size:12px;font-weight:900;color:#127A3E;background:#E9F9EF;border:2px solid #127A3E;border-radius:999px;padding:3px 9px}
.mode-free .tc .off{display:none}
@media (max-width:900px){.guarbig{font-size:22px;padding:10px 14px}}
/* The address on the email step: its key part blurred, ".com" left clear (the owner, 22 October 2026). The blurred text is a
   placeholder, so no real address is in the page. */
.blurtxt{filter:blur(5px);user-select:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Four moves, as a cork board (the owner, 22 October 2026): four sticky notes; the chosen one pins its details below. */
.fh-moves .fb-huge{color:#fff}
.mvlead{max-width:1240px;margin:-30px auto 26px;color:#fff;font-weight:700;font-size:17px}
.mvtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1240px;margin:0 auto 30px}
.mvn{position:relative;font:inherit;text-align:left;cursor:pointer;border:0;background:var(--bg);color:var(--ink);padding:22px 18px 18px;min-height:150px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 22px rgba(0,0,0,.22);transition:transform .35s var(--ease-bounce),box-shadow .3s}
.mvn:nth-child(1){transform:rotate(-2deg)}.mvn:nth-child(2){transform:rotate(1.5deg)}.mvn:nth-child(3){transform:rotate(-1deg)}.mvn:nth-child(4){transform:rotate(2deg)}
.mvn:hover{transform:rotate(0) translateY(-6px)}
.mvn.on{transform:rotate(0) translateY(-10px) scale(1.04);box-shadow:0 24px 34px rgba(0,0,0,.32),0 0 0 4px var(--ink)}
.mvn .pin,.card4 .tack{position:absolute;top:-9px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#E3263A;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2),0 3px 4px rgba(0,0,0,.3)}
.mvn b{font-family:'Anton',sans-serif;font-weight:400;font-size:40px;line-height:1}
.mvn strong{font-family:'Permanent Marker',cursive;font-weight:400;font-size:28px}
.mvn svg{position:absolute;right:10px;bottom:10px;width:58px;opacity:.9}
.tierst{display:inline-block;align-self:flex-start;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:6px;padding:3px 7px;transform:rotate(-3deg);margin-top:auto;background:rgba(255,255,255,.5)}
.mvboard{max-width:1240px;margin:0 auto}
.mvo{display:none;background:var(--bg);padding:24px;box-shadow:0 20px 34px rgba(0,0,0,.25);position:relative}
.mvo.on{display:block;animation:fh-unfold .5s var(--ease-bounce)}
@keyframes fh-unfold{from{opacity:0;transform:translateY(-16px) scaleY(.92);transform-origin:top}to{opacity:1;transform:none}}
.mvh{display:flex;align-items:center;gap:16px;margin-bottom:18px;color:var(--ink)}
.mvnum{font-family:'Anton',sans-serif;font-size:64px;line-height:.9}
.mvh b{font-family:'Permanent Marker',cursive;font-weight:400;font-size:34px;display:block}
.mvh p{margin:0;font-size:18px;font-weight:700;color:var(--ink)!important}
.mvh .tierst{margin:0 0 0 auto;font-size:13px;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cards4{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.card4{position:relative;background:#FFFDF6;color:var(--ink);padding:18px 14px 14px;border-radius:4px;box-shadow:0 8px 14px rgba(0,0,0,.18);transform:rotate(var(--r));opacity:0;background-image:repeating-linear-gradient(transparent 0 25px,rgba(91,124,255,.18) 25px 26px);background-position:0 34px}
.mvo.on .card4{animation:fh-drop .5s var(--ease-bounce) calc(.25s + var(--i) * .18s) forwards}
@keyframes fh-drop{from{opacity:0;transform:translateY(-30px) rotate(calc(var(--r) * 4))}to{opacity:1;transform:rotate(var(--r))}}
.card4:hover{transform:rotate(0) scale(1.04)!important;z-index:2}
.card4 .ci{font-size:24px;display:block;margin-bottom:6px}
.card4 b{display:block;font-size:16px;margin-bottom:4px}
.card4 small{display:block;font-size:14px;line-height:1.35;color:#36475F}
@media (max-width:900px){
.mvlead{margin:-20px auto 20px;font-size:15px}
.mvtabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mvn{min-height:118px;padding:18px 12px 12px}.mvn b{font-size:30px}.mvn strong{font-size:22px}.mvn svg{width:40px}.tierst{font-size:10px}
.mvo{padding:16px}.mvnum{font-size:46px}.mvh{flex-wrap:wrap;gap:10px}.mvh b{font-size:26px}.mvh p{font-size:15px}.mvh .tierst{margin:0}
.cards4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card4{padding:14px 10px 10px}.card4 b{font-size:14px}.card4 small{font-size:12.5px}
}

/* The report, in its own light (the owner, 22 October 2026; calmed the same day): flat brand orange with a light paper grain, and the heading in solid, bold ink. No rays, no torn edges, no layered shadow. */
.fh-journey{background:#FFA500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--ink)}
.fh-journey .fb-huge.light{text-shadow:none!important}
.fh-journey .inkt{color:var(--ink)}
.fh-journey .fb-huge .hand{color:#fff!important;text-shadow:none!important}
.fh-journey .stage{box-shadow:0 18px 40px rgba(41,57,81,.25)}
.fh-journey .endcta .go2{background:var(--ink)!important;color:#FFA500!important}
.fh-journey .endcta small{color:var(--ink)!important;font-weight:700}

/* "Already in" as profile cards (the owner chose A of three looks, 22 October 2026). The approved words and logos, in the page's zine style. */
.fh-already{text-align:center;overflow:hidden}
.al-head .fb-huge{color:var(--ink)}
.al-head p{font-size:20px;font-weight:700;margin:-18px auto 40px;max-width:640px;color:var(--ink)}
.al-tag{display:inline-block;font-style:normal;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:6px;padding:4px 9px;transform:rotate(-3deg)}
.al-ring{display:grid;place-items:center;border-radius:50%;background:conic-gradient(#FFA500,#E3263A,#F6A6C1,#FFA500);padding:5px}
.al-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #fff;background:#fff}
.al-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:1100px;margin:0 auto}
.al-card{position:relative;margin:0;background:#fff;border-radius:18px;padding:0 22px 26px;box-shadow:0 18px 30px rgba(41,57,81,.18);transform:rotate(var(--r));transition:transform .35s var(--ease-bounce)}
.al-card::before{content:'';display:block;height:86px;margin:0 -22px;border-radius:18px 18px 0 0;background:var(--c)}
.al-card:hover{transform:rotate(0) translateY(-8px)}
.al-card .al-ring{width:128px;height:128px;margin:-64px auto 12px}
.al-card b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:30px;line-height:1.1;color:var(--ink);margin-bottom:8px}
.al-card p{margin:14px 0 0;font-size:16px;line-height:1.4;color:#36475F}
.al-card .tape{z-index:2}
@media (max-width:900px){
.al-head p{font-size:16px;margin:-10px auto 28px}
.al-cards{grid-template-columns:minmax(0,1fr);gap:56px;max-width:340px}
.al-card .al-ring{width:110px;height:110px;margin-top:-55px}.al-card::before{height:70px}
}

/* The Q&A as flip cards (the owner, 22 October 2026: twelve questions without a long scroll). ?qa=a deck, ?qa=b wall. */
.fh-faq{text-align:center}
.fh-faq .qd{display:none}.fh-faq .qw{display:grid}
@media (max-width:900px){.fh-faq .qd{display:block}.fh-faq .qw{display:none}}
.fc{position:relative;perspective:1200px;cursor:pointer;text-align:left}
.fc-in{position:relative;width:100%;height:100%;transition:transform .6s var(--ease-bounce);transform-style:preserve-3d}
.fc.turned .fc-in{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;padding:26px 24px;display:flex;flex-direction:column;box-shadow:0 14px 26px rgba(41,57,81,.2)}
.fc-f{background:var(--c);color:var(--ink)}
.fc-f b{font-family:'Anton',sans-serif;font-weight:400;font-size:34px;line-height:1.1;margin-top:10px}
.fc-no{font-weight:900;font-size:13px;letter-spacing:.1em;opacity:.6}
.fc-f small{margin-top:auto;font-weight:800;font-size:13px;opacity:.65}
.fc-b{background:var(--ink);transform:rotateY(180deg);justify-content:center}
.fc-b .hand{position:static;white-space:normal;color:#FFA500;font-size:30px;line-height:1.25}
/* A: one deck, the next cards peeking behind */
.qd-stack{position:relative;width:min(520px,100%);height:320px;margin:0 auto}
.qd .fc{position:absolute;inset:0;transition:transform .45s var(--ease-bounce),opacity .3s;transform:translate(calc(var(--d,0) * 14px),calc(var(--d,0) * 12px)) rotate(calc(var(--d,0) * 2.5deg));z-index:calc(20 - var(--d,0))}
.qd .fc.back{opacity:0;pointer-events:none}
.qd .fc:not(.top){pointer-events:none}
.qd-ctl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:44px}
.qd-ctl button{font:inherit;cursor:pointer;line-height:1;border:0;padding:0;display:grid;place-items:center}
.qd-ctl button:active{transform:scale(.92)}
.qd-n{font-family:'Anton',sans-serif;font-size:26px;min-width:80px;color:var(--ink)}
/* The deck's buttons: solid ink circles with orange arrows, flat (the owner chose 1 of three, 22 October 2026). */
.qd-ctl button{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#FFA500;font-size:30px}
/* B: a wall of small cards, four across */
.qw{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1240px;margin:0 auto}
.qw .fc{height:190px}
.qw .fc:nth-child(odd){transform:rotate(-1.2deg)}.qw .fc:nth-child(even){transform:rotate(1deg)}
.qw .fc-f,.qw .fc-b{padding:18px 16px}
.qw .fc-f b{font-size:22px}.qw .fc-b .hand{font-size:20px}
.qw .fc-f small{font-size:11px}
@media (max-width:900px){
.qd-stack{height:280px;width:calc(100% - 30px)}
.fc-f b{font-size:28px}.fc-b .hand{font-size:24px}
.qw{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qw .fc{height:150px}.qw .fc-f,.qw .fc-b{padding:14px 12px}.qw .fc-f b{font-size:18px}.qw .fc-b .hand{font-size:16px}.qw .fc-f small{display:none}
}

/* "Do the math" (the owner, 22 October 2026): each job in a row, each alternative in a column, ours highlighted and switching by plan; on a phone, ours beside one picked alternative. The owner chose this look (C) of three. */
.fh-compare{background:var(--ink);color:#F4E9D6;text-align:center}
.fh-compare .fb-huge{color:#fff}
.fh-compare .fb-huge .hand{position:static;display:block;white-space:normal;margin-top:14px;color:#FFA500;transform:rotate(-2deg)}

.cm-c{max-width:1240px;margin:10px auto 0;overflow-x:auto}
.sc-pick{display:none}
.sc-tabs{display:flex;gap:6px}
.sc-tabs button,.sc-pick button{font:inherit;font-weight:800;font-size:13px;border:2px solid #F4E9D6;background:transparent;color:#F4E9D6;border-radius:999px;padding:6px 12px;cursor:pointer}
.sc-tabs button.on,.sc-pick button.on{background:#FFA500;border-color:#FFA500;color:var(--ink)}
.sc{width:100%;border-collapse:separate;border-spacing:0;text-align:left;font-size:14px;background:#FBF8F1;color:var(--ink);border-radius:16px;overflow:hidden}
.sc th,.sc td{padding:11px 12px;border-bottom:1px solid rgba(41,57,81,.12);vertical-align:middle}
.sc th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;background:#EFE7D6}
.sc td:first-child{font-weight:800}
.sc .ok{font-style:normal;color:#127A3E;font-weight:900;font-size:18px}.sc .no{font-style:normal;color:#C0283A;font-weight:900;font-size:18px}
.sc .sc-me{background:#FFF1D6;font-weight:800;box-shadow:inset 3px 0 0 #FFA500,inset -3px 0 0 #FFA500}
.sc th.sc-me{background:#FFA500;color:var(--ink)}
.sc-tabs{margin-top:8px}.sc-tabs button{border-color:var(--ink);color:var(--ink);font-size:11px;padding:4px 8px}.sc-tabs button.on{background:var(--ink);color:#FFA500;border-color:var(--ink)}
.sc-sum td{font-weight:800;background:#F4EDDE}
.cm-c .sc-me>span{display:none}
.cm-c.t-starter .sc-me .v-starter,.cm-c.t-growth .sc-me .v-growth,.cm-c.t-scale .sc-me .v-scale{display:inline}
@media (max-width:900px){
.sc-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px}.sc-pick span{font-weight:800;color:#FFA500;margin-right:4px}
.sc th:not(:first-child):not(.sc-me),.sc td:not(:first-child):not(.sc-me){display:none}
.cm-c.c-diy .sc-diy,.cm-c.c-ai .sc-ai,.cm-c.c-fr .sc-fr,.cm-c.c-ag .sc-ag{display:table-cell!important}
.sc{font-size:13px}.sc th,.sc td{padding:9px 8px}
}
@media (max-width:900px){.sc{table-layout:fixed}.sc td:first-child,.sc th:first-child{width:32%}.sc-tabs{flex-wrap:wrap;gap:4px}.sc-tabs button{padding:3px 7px;font-size:10.5px}.sc th{font-size:11px}}
/* The true cost of your time, under the table (the owner, 22 October 2026) */
.sc-cost{max-width:820px;margin:34px auto 0;text-align:center}
.sc-cost b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:40px;line-height:1.1;color:#FF8A8A}
.sc-cost p{margin:14px auto 0;font-size:20px;line-height:1.5;font-weight:600;color:#F4E9D6!important;max-width:720px}
.sc-sum .sc-diy{color:#C0283A}
@media (max-width:900px){.sc-cost b{font-size:28px}.sc-cost p{font-size:17px}}
/* The scene under the line, quieter (the owner, 22 October 2026): small, light, two lines at most on a laptop. */
.sc-cost p{font-size:15px;font-weight:300;line-height:1.6;max-width:940px;margin-top:10px;color:rgba(244,233,214,.8)!important}
@media (max-width:900px){.sc-cost p{font-size:13px;line-height:1.55}}
@media (max-width:900px){.sc-cost p{font-size:12px;line-height:1.5}}

/* The phone picker as one segmented bar, four equal parts (the owner, 22 October 2026: the wrapped chips looked staggered). */
@media (max-width:900px){
.sc-pick{display:block!important;margin-bottom:14px;text-align:left}
.sc-pick>span{display:block;font-weight:800;font-size:13px;color:#FFA500;margin:0 0 8px 2px}
.sc-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(244,233,214,.1);border-radius:999px;padding:4px;gap:2px}
.sc-seg button{border:0!important;border-radius:999px;padding:9px 2px!important;font-size:12px!important;white-space:nowrap;background:transparent;color:#F4E9D6}
.sc-seg button.on{background:#FFA500;color:var(--ink)}
}
@media (max-width:900px){.sc-plan{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:4px}.sc-pick>span+.sc-seg+span{margin-top:12px}.sc th.sc-me .sc-tabs{display:none}}

/* The footer as our own profile, as on a social app (the owner chose C of three looks, 22 October 2026). */
.ft2{padding:0;background:none;text-align:left}
.ft2-h{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(56px,9vw,130px);line-height:.92;margin:0;letter-spacing:-.01em}
.ft2-h span{color:inherit;opacity:.85}.ft2-h b{font-weight:400}
.ft2-btn{display:inline-flex!important;margin-top:30px}
.ft2-soc{display:flex;gap:10px;flex-wrap:wrap}
.ft2-soc a{width:40px;height:40px;border-radius:50%;display:grid!important;place-items:center;border:2px solid currentColor;margin:0!important;color:inherit}
.ft2-soc svg{width:18px;height:18px}
.ft2-soc a:hover{background:#FFA500;border-color:#FFA500;color:var(--ink)}
.ft2-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid currentColor;font-size:13px;opacity:.75}
/* C: our own profile, as on a social app */
.ft2-c{background:var(--ink);color:#F4E9D6;padding:100px 6vw 40px;text-align:center}
.ft2-prof{display:flex;align-items:center;justify-content:center;gap:24px;text-align:left}
.ft2-av{width:120px;height:120px;border-radius:50%;padding:5px;background:conic-gradient(#FFA500,#E3263A,#F6A6C1,#FFA500);flex:none}
.ft2-av img{width:100%;height:100%;border-radius:50%;background:#fff;border:4px solid var(--ink);object-fit:contain;padding:18px}
.ft2-who b{display:block;font-size:26px;font-weight:900;color:#fff}.ft2-who small{display:block;opacity:.6;font-size:15px}
.ft2-who p{margin:8px 0 0;font-size:16px;max-width:340px;color:#F4E9D6!important}
.ft2-acts{display:flex;gap:12px;justify-content:center;margin:26px 0 18px}
.ft2-acts .ft2-btn{margin:0}
.ft2-msg{display:inline-flex;align-items:center;padding:0 22px;border-radius:999px;border:2px solid #F4E9D6;color:#F4E9D6;font-weight:800;text-decoration:none}
.ft2-soc-big{justify-content:center}
.ft2-c .ft2-h{font-size:clamp(40px,6vw,80px);margin-top:60px}.ft2-c .ft2-h b{color:#FFA500}
.ft2-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:40px}
.ft2-links a{color:#F4E9D6;font-weight:700;text-decoration:none;font-size:14px}
.ft2-c .ft2-bar{border-color:rgba(244,233,214,.2);justify-content:center;gap:24px}
@media (max-width:900px){
.ft2-c{padding:70px 20px 30px}
.ft2-prof{flex-direction:column;text-align:center;gap:14px}.ft2-who p{margin-left:auto;margin-right:auto}
.ft2-av{width:96px;height:96px}
.ft2-acts{flex-wrap:wrap}.ft2-msg{padding:12px 22px}
.ft2-bar{flex-direction:column;align-items:center;text-align:center;gap:6px}
}
.ft2 .ft2-btn{align-items:center;gap:8px;background:#FFA500;color:var(--ink)!important;font-weight:900;font-size:18px;padding:16px 30px;border-radius:999px;text-decoration:none;cursor:pointer}
.ft2-btn:hover{transform:translateY(-2px)}
.ft2-c .ft2-h{color:#fff}
/* The two banners' backgrounds swapped (the owner, 22 October 2026, to compare): "Grow and scale on" in orange, the pillars on cream. ?tc=swap */
.fh-tapes.tc-swap .t1{background:#F4E9D6}
.fh-tapes.tc-swap .t2{background:var(--pop)}
/* Option 3: story highlights in place of the banners, as in the Feed draft (the owner, 22 October 2026). ?tc=hl */
.fh-hl{display:none;background:var(--navy-700,#293951);padding:34px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
.tc-hl .fh-tapes{display:none}.tc-hl .fh-hl{display:block}
.hl-row{display:flex;justify-content:center;gap:26px;max-width:1240px;margin:0 auto;overflow-x:auto;scrollbar-width:none;padding:6px 16px}
.hl-row::-webkit-scrollbar{display:none}
.hl{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:13px;font-weight:700;flex:none;text-decoration:none}
.hl-ring{width:92px;height:92px;border-radius:50%;padding:4px;background:conic-gradient(#FFA500,#E3263A,#F6A6C1,#FFA500);display:grid;place-items:center;transition:transform .3s var(--ease-bounce)}
.hl:hover .hl-ring{transform:scale(1.08) rotate(-6deg)}
.hl-ring svg{width:100%;height:100%;border-radius:50%;background:#F4E9D6;border:4px solid var(--navy-700,#293951);padding:14px;--paper:#fff}
.hl-k .hl-ring{background:rgba(255,255,255,.25)}
@media (max-width:900px){.hl-row{justify-content:flex-start;gap:16px}.hl-ring{width:72px;height:72px}.hl-ring svg{padding:11px}.hl{font-size:12px}}
/* Option 4: one calm banner (22 October 2026, to compare): only "Grow and scale on" and the platforms, flat, orange, slow. ?tc=one */
.fh-tapes.tc-one{height:auto;padding:26px 0}
.fh-tapes.tc-one .t1{display:none}
.fh-tapes.tc-one .t2.bn-scale{position:relative;top:auto;left:0;right:0;transform:none;background:var(--pop)}
.fh-tapes.tc-one .t2 span{animation-duration:70s}
@media (max-width:900px){.fh-tapes.tc-one{padding:18px 0}}
/* The calm banner sits straight on the seam between the hero and the next section: no darker band around it (the owner, 22 October 2026). */
.fh-tapes.tc-one{padding:0!important;background:none}
.fh-tapes.tc-one .t2.bn-scale{margin:0;left:0;right:0}
/* Option 5 (the owner, 22 October 2026): both moving banners, no darker band behind them, and never over the hero.
   The band shows the page's own cream, keeps room for the tilt above and below, and clips anything that would reach up. ?tc=open */
.fh-tapes.tc-open{background:transparent;height:250px;overflow:hidden}
.fh-tapes.tc-open .t1{top:62px}
.fh-tapes.tc-open .t2{top:122px}
@media (max-width:900px){.fh-tapes.tc-open{height:170px}.fh-tapes.tc-open .t1{top:34px}.fh-tapes.tc-open .t2{top:82px}}
.fh-tapes.tc-open .t2{box-shadow:0 6px 18px rgba(41,57,81,.18)}.fh-tapes.tc-open .t1{box-shadow:0 6px 18px rgba(41,57,81,.12)}
/* Option 5 also takes the swap: "Grow and scale on" in orange, in front; the pillars on cream behind (the owner, 22 October 2026). */
.fh-tapes.tc-open .t2{background:var(--pop);z-index:2}
.fh-tapes.tc-open .t1{background:#FBF6EC;z-index:1}
/* Option 5, slowed so the banners drift rather than race (the owner, 22 October 2026). */
.fh-tapes.tc-open .t1 span{animation-duration:64s}
.fh-tapes.tc-open .t2 span{animation-duration:76s}
/* Option 6 (the owner, 22 October 2026): the orange banner alone, tilted as now, on the cream, clear of the hero. ?tc=tilt */
.fh-tapes.tc-tilt .t1{display:none}
.fh-tapes.tc-tilt{height:180px}
.fh-tapes.tc-tilt .t2{top:50px}
@media (max-width:900px){.fh-tapes.tc-tilt{height:120px}.fh-tapes.tc-tilt .t2{top:32px}}
/* Option 7: one twisting ribbon (the owner, 22 October 2026). Orange face "Grow and scale on", cream back the pillars. ?tc=twist */
.fh-tapes .tw{display:none}
.fh-tapes.tc-twist{background:transparent;height:230px;overflow:hidden}
.fh-tapes.tc-twist .tp{display:none}
.fh-tapes.tc-twist .tw{display:block;position:absolute;left:-3%;right:-3%;top:44px;transform:rotate(-3deg)}
.tw-cv{display:block;width:100%;height:120px}
@media (max-width:900px){.fh-tapes.tc-twist{height:150px}.fh-tapes.tc-twist .tw{top:24px}.tw-cv{height:100px}}

/* Profile pictures in place of the head emoji (the owner, 22 October 2026): followers as they appear in an app. */
.fav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #FFA500,0 6px 12px rgba(0,0,0,.25);font-style:normal;flex:none}
.fav b{font-family:'Montserrat',system-ui,sans-serif;font-weight:900;font-size:14px;color:#fff;letter-spacing:.02em}
.fav0{background:linear-gradient(135deg,#FF7A59,#E3263A)}.fav1{background:linear-gradient(135deg,#5B7CFF,#293951)}.fav2{background:linear-gradient(135deg,#2BB673,#127A3E)}
.fav3{background:linear-gradient(135deg,#F6A6C1,#C2457A)}.fav4{background:linear-gradient(135deg,#FFC24B,#E08A00)}.fav5{background:linear-gradient(135deg,#8E7BFF,#5038C9)}
.fav-sm{width:34px;height:34px;border-width:2px}.fav-sm b{font-size:11px}
/* The same followers circling your post, each hearting it in turn */
.same i{position:relative;font-size:0!important}
.same .fav{margin:0}
.hrt{position:absolute;right:-8px;top:-10px;font-style:normal;font-size:18px;color:#E3263A;opacity:0;text-shadow:0 1px 0 #fff}
.beat.on .hrt{animation:fh-heart 4.4s ease-out infinite;animation-delay:var(--h)}
@keyframes fh-heart{0%,70%{opacity:0;transform:scale(.4) translateY(0)}76%{opacity:1;transform:scale(1.2) translateY(-4px)}90%{opacity:1;transform:scale(1) translateY(-14px)}100%{opacity:0;transform:translateY(-22px)}}
/* Passers-by: profile pictures that scroll past, faded, never stopping */
.pass{font-size:0!important;opacity:.55!important;filter:saturate(.6)!important}
.pass .fav{box-shadow:none}
/* The final step: a Reach window */
.rch{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
.rch-map{position:relative;aspect-ratio:1;max-width:260px;width:100%;margin:0 auto}
.rch-map>.pop{position:absolute}
.rch-map>.pop:first-child{left:50%;top:50%}
.rch-core{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--navy-700,#293951);color:#fff;display:grid;place-items:center;text-align:center;font-size:12px;line-height:1.2;padding:8px}
.rch-ring{position:absolute;inset:4%;border-radius:50%;border:3px dashed #FFA500;animation:fh-spin 30s linear infinite}
.rch-map>.pop:has(.rch-a){left:50%;top:50%}
.rch-a{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateY(-108px) rotate(calc(var(--a) * -1)) translate(-50%,-50%)}
.rch-map>.pop:has(.rch-lbl){left:50%;bottom:-4px}
.rch-lbl{display:block;transform:translateX(-50%);font-family:'Permanent Marker',cursive;color:#B26A00;font-size:16px;white-space:nowrap}
.rch-feed{display:grid;gap:10px}
.rch-n{display:flex;align-items:center;gap:10px;background:#F7F3EA;border-radius:12px;padding:9px 10px;font-size:13px;color:var(--ink);text-align:left}
.rch-n b{font-weight:800}
@media (max-width:900px){.rch{grid-template-columns:1fr}.rch-map{max-width:220px}.rch-a{transform:rotate(var(--a)) translateY(-90px) rotate(calc(var(--a) * -1)) translate(-50%,-50%)}.fav{width:36px;height:36px}.fav b{font-size:12px}.rch-core{width:80px;height:80px;font-size:11px}}
/* The circle holds still so the initials stay upright; each picture bobs gently instead. */
.sc-pro .orbit{animation:none}
.same i{animation:fh-bob 2.6s ease-in-out infinite!important;animation-delay:var(--h,0s)!important}
@keyframes fh-bob{50%{transform:translateY(-6px)}}
.same .fav{animation:none!important;transform:none!important}
.rch-map{margin-bottom:30px}
.rch-map>.pop:has(.rch-lbl){bottom:-30px}

/* Little people walking (the owner, 22 October 2026). The same six walk round your post; others stroll past on their phones. */
.wk{display:block;width:26px;height:54px;overflow:visible}
.wk-bob{animation:wk-bob .5s ease-in-out infinite;animation-delay:var(--w)}
@keyframes wk-bob{50%{transform:translateY(-3px)}}
.wk-leg,.wk-arm{transform-box:fill-box;transform-origin:top center;animation:wk-swing .5s ease-in-out infinite alternate;animation-delay:var(--w)}
.wk-leg.l1,.wk-arm.a2{--s:24deg}.wk-leg.l2,.wk-arm.a1{--s:-24deg}
@keyframes wk-swing{from{transform:rotate(var(--s))}to{transform:rotate(calc(var(--s) * -1))}}
/* Round the post: the circle turns again, each walker kept upright */
.sc-pro .orbit{animation:fh-spin 14s linear infinite!important}
.same i{animation:fh-spin 14s linear infinite reverse!important}
.same i .wk{margin:-27px -13px}
.same .hrt{right:-14px;top:-30px;animation-delay:var(--h)}
/* Past it: strolling by, phones out, not stopping */
.pass{font-size:0!important;opacity:.85!important;filter:none!important}
.pass .wk{width:22px;height:46px}
.beat.on .pass{animation-duration:14s!important;animation-delay:calc(var(--i) * -2s)!important}
@media (max-width:900px){.wk{width:22px;height:46px}.same i .wk{margin:-23px -11px}.pass .wk{width:18px;height:38px}}
.wk{width:30px;height:58px}.pass .wk{width:28px;height:54px}.same i .wk{margin:-29px -15px}
@media (max-width:900px){.wk{width:26px;height:50px}.pass .wk{width:24px;height:46px}.same i .wk{margin:-25px -13px}}
/* The post type on each winner: carousel, photo or video (22 October 2026). */
.winr .th{position:relative}
.fmt{position:absolute;right:4px;top:4px;font-style:normal;font-size:11px;line-height:1;background:rgba(20,29,42,.82);color:#fff;border-radius:5px;padding:3px 4px}
/* Readable headings and notes in the walk-through (the owner, 22 October 2026): the condensed capitals were packed too tight. */
.fh-walk .nar h3{letter-spacing:.035em;word-spacing:.08em;line-height:1.14}
.fh-walk .beat.now .nar p{letter-spacing:.03em;word-spacing:.06em;line-height:1.4}
.fh-walk .nar p{letter-spacing:.005em;line-height:1.45}
.fh-walk .lab1,.fh-walk .lab2{letter-spacing:.04em}
@media (max-width:900px){.fh-walk .nar h3{letter-spacing:.03em;line-height:1.16}}
/* The live site's "#work h3" tightens these headings; the walk-through keeps its own, readable spacing. */
#work.fh-walk .nar h3{letter-spacing:.035em!important;word-spacing:.08em;line-height:1.14!important}
#work.fh-walk .beat.now .nar p{letter-spacing:.03em!important;line-height:1.4!important}
#work.fh-walk .nar p{line-height:1.45}
@media (max-width:900px){#work.fh-walk .nar h3{letter-spacing:.03em!important;line-height:1.16!important}}
@media (max-width:900px){.fh-journey .fb-huge{font-size:56px!important;line-height:.98}}

/* The report steps' labels, bold (the owner, 22 October 2026). Four looks: ?sn=a, b, c, d. */
.fh-journey .sn{display:block;margin:0 0 14px}
.fh-journey .sn>b{display:none}
.fh-journey.sn-a-on .sn-a,.fh-journey.sn-b-on .sn-b,.fh-journey.sn-c-on .sn-c,.fh-journey.sn-d-on .sn-d{display:inline-flex}
/* A: a big ink tag */
.sn-a{font-family:'Anton',sans-serif;font-weight:400;font-size:30px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#FFA500;padding:6px 16px 4px;border-radius:8px;transform:rotate(-2deg)}
/* B: a giant outlined number with a small "step" above */
.sn-b{flex-direction:column;align-items:flex-start;font-family:'Anton',sans-serif;font-weight:400;font-size:84px;line-height:.85;color:transparent;-webkit-text-stroke:3px var(--ink);letter-spacing:.02em}
.sn-b small{font-family:Montserrat,system-ui,sans-serif;font-size:13px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#B26A00;-webkit-text-stroke:0;margin-bottom:6px}
/* C: handwritten, the number circled in orange */
.sn-c{align-items:center;gap:8px;font-family:'Permanent Marker',cursive;font-weight:400;font-size:30px;color:var(--ink)}
.sn-c i{font-style:normal;position:relative;padding:2px 12px}
.sn-c i::before{content:'';position:absolute;inset:-4px -2px;border:3px solid #FFA500;border-radius:50% 46% 52% 44%;transform:rotate(-4deg)}
/* D: a big orange numeral with "Step" beside it */
.sn-d{align-items:flex-end;gap:10px}
.sn-d em{font-style:normal;font-family:'Anton',sans-serif;font-size:76px;line-height:.8;color:#FFA500;-webkit-text-stroke:2px var(--ink)}
.sn-d small{font-family:Montserrat,system-ui,sans-serif;font-size:15px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-bottom:6px}
@media (max-width:900px){.sn-a{font-size:24px}.sn-b{font-size:64px}.sn-c{font-size:24px}.sn-d em{font-size:60px}}
/* The Mybrandcurve logo keeps its own shape wherever it sits (the owner, 22 October 2026: it was stretched into squares). */
#walk img[src*="mbc-mark"]{object-fit:contain!important;object-position:center!important;aspect-ratio:auto}
#walk .qb img[src*="mbc-mark"]{padding:11px 9px!important}
#walk .mail img[src*="mbc-mark"]{padding:8px 6px!important}

/* The hero, dressed to match (?hz=1). Words and layout unchanged. */
html.hz .hz-curve{font-family:'Anton',sans-serif!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.01em;font-size:1.02em}
html.hz .hz-card{position:relative;overflow:visible!important}
html.hz .hz-note{position:absolute;z-index:5;right:6px;top:-46px;font-family:'Permanent Marker',cursive;font-size:22px;color:#FFA500;transform:rotate(-4deg);white-space:nowrap;pointer-events:none}

/* Plotting on the strength map (the owner, 22 October 2026, in place of the tape). */
html.hz .hz-note{right:8px;top:-44px}
html.hz .hz-plot{position:absolute;left:0;top:0;z-index:4;overflow:visible;pointer-events:none}
html.hz .hz-ring{stroke-dasharray:900;stroke-dashoffset:0}
html.hz .hz-ring.draw{animation:hz-draw 1.1s ease-out both}
@keyframes hz-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
html.hz .hz-pin{filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
@media (max-width:900px){html.hz .hz-note{font-size:17px;top:-36px;right:4px}}

/* The hero's cards, with the sections' handmade touches (the owner, 22 October 2026). */
html.hz .hz-who{font-family:'Permanent Marker',cursive!important;font-weight:400!important;font-size:22px!important;letter-spacing:.02em!important;text-transform:none!important;color:#FFA500!important;transform:rotate(-2deg);transform-origin:left;display:inline-block}
html.hz .hz-who-ar{display:inline-block;margin-left:8px;font-family:'Permanent Marker',cursive}
html.hz .hz-stk{transition:transform .35s cubic-bezier(.34,1.56,.64,1)!important}
html.hz .hz-stk0{transform:rotate(-1.6deg)}html.hz .hz-stk1{transform:rotate(1.2deg) translateY(4px)}html.hz .hz-stk2{transform:rotate(-.8deg)}
html.hz .hz-stk:hover{transform:rotate(0) translateY(-6px)!important}
@media (max-width:900px){html.hz .hz-who{font-size:20px!important}html.hz .hz-stk0{transform:rotate(-1deg)}html.hz .hz-stk1{transform:rotate(.8deg)}html.hz .hz-stk2{transform:rotate(-.6deg)}}
html.hz .hz-stk0{transform:rotate(-1.6deg)!important}html.hz .hz-stk1{transform:rotate(1.2deg) translateY(4px)!important}html.hz .hz-stk2{transform:rotate(-.8deg)!important}
html.hz .mbc-fork .hz-stk:hover{transform:rotate(0) translateY(-6px)!important}
@media (max-width:900px){html.hz .hz-stk0{transform:rotate(-1deg)!important}html.hz .hz-stk1{transform:rotate(.8deg)!important}html.hz .hz-stk2{transform:rotate(-.6deg)!important}}
/* The note sits lower on a phone, clear of the Sign in line above the map. */
@media (max-width:900px){html.hz .hz-note{top:-14px!important;right:2px!important;font-size:15px!important}}

/* The hero blended into the section below, no hard line (?sm=1; the owner, 22 October 2026, to compare).
   The hero's last stretch settles into plain navy, and the ribbon's band fades from that navy into the cream, the ribbon across it. */
html.sm #root section::before{content:'';position:absolute;left:0;right:0;bottom:0;height:140px;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(41,57,81,0),#293951)}
html.sm .fh-tapes{height:300px!important;background:linear-gradient(to bottom,#293951 0%,#3B4A62 22%,#8E8E8F 50%,#E2D6C2 78%,#F4E9D6 100%)!important}
html.sm .fh-tapes::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.sm .fh-tapes .tw{top:90px!important;z-index:1}
@media (max-width:900px){html.sm .fh-tapes{height:210px!important}html.sm .fh-tapes .tw{top:60px!important}html.sm #root section::before{height:90px}}
/* The fade starts a little over the hero's bottom edge, so no line can show where they meet. */
html.sm .fh-tapes{position:relative;z-index:6;margin-top:-80px;height:380px!important;background:linear-gradient(to bottom,rgba(41,57,81,0) 0,#293951 80px,#3B4A62 32%,#8E8E8F 58%,#E2D6C2 82%,#F4E9D6 100%)!important}
html.sm .fh-tapes .tw{top:170px!important}
@media (max-width:900px){html.sm .fh-tapes{margin-top:-60px;height:270px!important;background:linear-gradient(to bottom,rgba(41,57,81,0) 0,#293951 60px,#3B4A62 32%,#8E8E8F 58%,#E2D6C2 82%,#F4E9D6 100%)!important}html.sm .fh-tapes .tw{top:118px!important}}

/* The hero redrawn in the zine style (?hr=zine; the owner, 22 October 2026, to compare). Words are the live hero's. */
html.zh #root section:not(.zh-hero){display:none!important}
.zh-hero{position:relative;background:#141D2A radial-gradient(rgba(244,233,214,.07) 1.4px,transparent 1.8px) 0 0/22px 22px;color:#F4E9D6;padding:150px 6vw 80px;overflow:hidden}
.zh-in{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;max-width:1240px;margin:0 auto}
.zh-badge{display:inline-block;background:rgba(255,236,170,.88);color:#141D2A;font-weight:800;font-size:14px;padding:8px 16px;transform:rotate(-3deg);box-shadow:0 3px 6px rgba(0,0,0,.25);margin-bottom:22px}
.zh-h{margin:0;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.01em}
.zh-h span{display:block;font-size:clamp(64px,8vw,124px);color:#F4E9D6}
.zh-h b{display:block;font-weight:400;font-size:clamp(96px,13vw,200px);color:#FFA500;margin-top:-4px;text-shadow:6px 6px 0 rgba(0,0,0,.35)}
.zh-tag{font-family:'Permanent Marker',cursive;font-size:clamp(22px,2.4vw,32px);color:#F4E9D6!important;margin:18px 0 26px;transform:rotate(-1.5deg)}
.zh-tag b{font-weight:400;color:#FFA500}
.zh-plat small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:10px}
.zh-plat div{display:flex;flex-wrap:wrap;gap:8px}
.zh-plat span{background:#F4E9D6;color:#141D2A;font-weight:900;font-size:13px;padding:7px 12px;border-radius:999px;transform:rotate(var(--r));box-shadow:0 3px 0 rgba(0,0,0,.35)}
.zh-map{position:relative;margin:0;background:#FBF6EC;color:#141D2A;padding:30px 22px 18px;transform:rotate(2.5deg);box-shadow:0 22px 40px rgba(0,0,0,.45)}
.zh-map svg{display:block;width:100%;height:auto}
.zh-tape{position:absolute;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(255,236,170,.85);transform:rotate(-4deg)}
.zh-ex{position:absolute;right:14px;top:10px;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#B26A00}
.zh-map figcaption{font-family:'Permanent Marker',cursive;color:#E3263A;font-size:20px;margin-top:4px;padding-left:10px}
.zh-ring{stroke-dasharray:400;stroke-dashoffset:400;animation:zh-draw 1.2s ease-out .6s forwards}
@keyframes zh-draw{to{stroke-dashoffset:0}}
.zh-who{max-width:1240px;margin:56px auto 0}
.zh-wl{display:inline-block;font-family:'Permanent Marker',cursive;font-size:26px;color:#FFA500;transform:rotate(-2deg);margin-bottom:22px}
.zh-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.zh-note{position:relative;font:inherit;text-align:left;cursor:pointer;border:0;background:var(--c);color:#141D2A;padding:30px 22px 22px;min-height:220px;transform:rotate(var(--r));box-shadow:0 16px 24px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;gap:6px}
.zh-note:hover{transform:rotate(0) translateY(-8px)}
.zh-tack{position:absolute;top:-9px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#E3263A;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2),0 3px 4px rgba(0,0,0,.3)}
.zh-ic svg{width:30px;height:30px;stroke:#141D2A}
.zh-note small{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.zh-note b{font-family:'Anton',sans-serif;font-weight:400;font-size:40px;line-height:1;text-transform:uppercase}
.zh-note p{margin:0;font-size:15px;line-height:1.4;color:#36475F!important;font-weight:600}
.zh-note em{align-self:flex-start;font-style:normal;font-size:12px;font-weight:800;border:2px solid #141D2A;border-radius:999px;padding:3px 10px;margin-top:auto}
.zh-go{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;background:#141D2A;color:#FFA500;display:grid;place-items:center;font-weight:900}
.zh-fine{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px;color:rgba(244,233,214,.8)}
.zh-fine p{margin:0;color:inherit!important}.zh-fine a{color:#FFA500;font-weight:800}
.zh-free{color:#F4E9D6!important;font-weight:700}
@media (max-width:900px){
.zh-hero{padding:120px 18px 60px}
.zh-in{grid-template-columns:1fr;gap:36px}
.zh-h span{font-size:64px}.zh-h b{font-size:104px}
.zh-map{transform:rotate(1.5deg);max-width:380px;margin:0 auto}
.zh-notes{grid-template-columns:1fr;gap:28px}.zh-note{min-height:0}.zh-note b{font-size:34px}
.zh-fine{flex-direction:column}
}
.zh-hero{padding-top:170px}
.zh-ring{stroke-dashoffset:0!important;animation:zh-draw2 1.2s ease-out .6s both!important}
@keyframes zh-draw2{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
@media (max-width:900px){.zh-hero{padding-top:150px}}
/* The dressed hero, darker (?dk=1; the owner, 22 October 2026, to compare): a deeper navy, the glows a little dimmer. */
html.hz-dk #root section{background:#1A2536!important}
html.hz-dk #root section .mbc-blob{opacity:.62!important}
/* The dressed hero keeps the original hero's background exactly: no extra grain (the owner, 22 October 2026: it was noisier, with less depth). */

/* Step 7's mini dashboard, sliding through its areas (the owner, 22 October 2026). */
.dsl{display:grid;gap:10px}
.dp-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:-4px -4px 0}
.dp-tabs::-webkit-scrollbar{display:none}
.dp-t{font:inherit;font-size:11px;font-weight:800;border:0;border-radius:999px;padding:6px 10px;background:#F2EDE3;color:#36475F;cursor:pointer;white-space:nowrap;flex:none}
.dp-t.on{background:#141D2A;color:#FFA500}
.dp-view{position:relative;min-height:230px}
.dp-view>div{position:absolute;inset:0;opacity:0;transform:translateX(18px);transition:opacity .4s,transform .4s;pointer-events:none;display:grid;align-content:start;gap:10px}
.dp-view>div.on{opacity:1;transform:none;pointer-events:auto}
.dp-dots{display:flex;justify-content:center;gap:6px}
.dp-dots i{width:7px;height:7px;border-radius:50%;background:rgba(20,29,42,.22);cursor:pointer}
.dp-dots i.on{width:20px;border-radius:7px;background:#FFA500}
.dp-pro{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF3D6,#F7E6F0);border-radius:14px;padding:14px}
.dp-av{width:54px;height:54px;border-radius:50%;padding:3px;background:conic-gradient(#FFA500,#E3263A,#F6A6C1,#FFA500);display:grid;place-items:center;flex:none}
.dp-av b{width:100%;height:100%;border-radius:50%;background:#141D2A;color:#FFA500;display:grid;place-items:center;font-weight:900;border:3px solid #fff}
.dp-pro>div b{display:block;font-size:16px;color:#141D2A}.dp-pro>div small{color:#5B6B82;font-size:12px}
.dp-pro em{margin-left:auto;font-style:normal;font-size:11px;font-weight:900;background:#141D2A;color:#fff;border-radius:999px;padding:4px 9px}
.dp-pills{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dp-pills span{background:#F7F3EA;border-radius:10px;padding:9px 10px;font-size:12px;font-weight:800;color:#141D2A}
.dp-l{margin:0;font-size:12.5px;color:#5B6B82!important}
.dp-h{font-size:15px;color:#141D2A}
.dp-row{background:#F7F3EA;border-radius:12px;padding:10px 12px}.dp-row small{display:block;font-size:11px;color:#5B6B82;font-weight:700}.dp-row b{font-size:13.5px;color:#141D2A}
.dp-btns{display:flex;gap:8px;flex-wrap:wrap}.dp-btns em{font-style:normal;font-size:12px;font-weight:900;background:#FFA500;color:#141D2A;border-radius:999px;padding:7px 12px}
.dp-btns em+em{background:#141D2A;color:#fff}
.dp-win{display:flex;align-items:center;gap:10px;background:#F7F3EA;border-radius:12px;padding:10px;font-size:13px;font-weight:700;color:#141D2A}
.dp-win .th{width:44px;height:44px;border-radius:10px;background:#D9909E;display:grid;place-items:center;flex:none}.dp-win .th svg{width:70%}
.dp-bars{display:flex;align-items:flex-end;gap:10px;height:110px;padding:8px 6px;background:#F7F3EA;border-radius:12px}
.dp-bars i{flex:1;height:var(--h);background:#FFE2A8;border-radius:6px 6px 2px 2px;position:relative;overflow:hidden}
.dp-bars i b{position:absolute;inset:auto 0 0 0;height:100%;background:#FFA500;transform-origin:bottom;transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dp-view>div.on .dp-bars i b{transform:scaleY(1)}
.dsl .days3,.dsl .days7{margin:0}
@media (max-width:900px){.dp-view{min-height:250px}}
/* The seven days fit inside the sliding dashboard. */
.dsl .days7{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px!important}
.dsl .days7>*{padding:6px 9px!important;min-height:0!important;font-size:12px!important;line-height:1.25!important}
.dsl .days7>* *{font-size:inherit!important}
.dsl .days3{gap:6px!important}.dsl .days3>*{padding:8px 10px!important}
.dp-view{min-height:270px}
@media (max-width:900px){.dp-view{min-height:300px}}
.dsl .dd{min-height:0!important;padding:6px 9px!important;font-size:12px!important;line-height:1.25}
.dsl .dd small{font-size:10px!important}.dsl .dd b{font-size:12.5px!important}
.dp-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dp-days span{background:#F7F3EA;border-radius:10px;padding:7px 9px;display:block}
.dp-days small{display:block;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#B26A00}
.dp-days b{display:block;font-size:12.5px;line-height:1.25;color:#141D2A}
/* The real dashboard preview inside step 7. */
.dp-live{position:relative;height:430px;border-radius:14px;overflow:hidden;background:#141D2A}
.dp-live iframe{position:absolute;left:0;top:0;width:390px;border:0;transform-origin:0 0;opacity:0;transition:opacity .45s;pointer-events:none}
.dp-live iframe.on{opacity:1}
@media (max-width:900px){.dp-live{height:400px}}
/* The dashboard sits neatly inside the window's rounded corners. */
.dp-live{clip-path:inset(0 round 14px);-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate;border-radius:14px}
.dp-cap{display:block!important;text-align:center!important;font-weight:600!important;color:#141D2A!important;font-size:clamp(10.5px,3.1vw,13px)!important;white-space:nowrap!important;letter-spacing:-.01em!important}
/* "Draft prices": the plan prices shown are the owner's draft, not approved (22 October 2026). Removed when approved. */
#walk .dpx{display:table;margin:0 auto 18px;font:800 11px/1 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#141D2A;background:#FFE45C;padding:6px 10px;border-radius:6px;transform:rotate(-2deg);border:2px dashed #141D2A}
#walk .fb-ink .dpx{position:relative;z-index:2}
/* Do the math: Tools as a fifth choice, and What you get back (drafts, the owner, 22 October 2026) */
@media (max-width:900px){.sc-seg:not(.sc-plan){grid-template-columns:repeat(5,minmax(0,1fr))}.sc-seg:not(.sc-plan) button{font-size:11px!important}
 .cm-c.c-tl .sc-tl{display:table-cell!important}}
.gb{max-width:980px;margin:22px auto 0;background:#FFF1D6;color:var(--ink);border-radius:16px;padding:18px 22px;box-shadow:inset 0 0 0 3px #FFA500}
.gb-h{display:block;font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.01em;text-transform:uppercase;margin-bottom:6px}
.gb-r{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:9px 0;border-top:1px solid rgba(20,29,42,.12)}
.gb-r b{font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#C46F00}
.gb-r p{margin:0;font-size:16px;font-weight:600;line-height:1.45;color:var(--ink)!important}
.gb .v-starter,.gb .v-growth,.gb .v-scale{display:none}
.cm-c.t-starter .gb .v-starter,.cm-c.t-growth .gb .v-growth,.cm-c.t-scale .gb .v-scale{display:inline}
.cm-c.t-starter .gb .gb-x{display:block;margin-top:8px;font-size:13px;font-weight:600;color:rgba(20,29,42,.7)}
@media (max-width:900px){.gb{padding:14px 14px}.gb-h{font-size:18px}.gb-r{grid-template-columns:64px 1fr;gap:8px}.gb-r b{font-size:11px}.gb-r p{font-size:14px}}
.gb,.gb p{text-align:left!important}
/* The price tags' start buttons and the plan the diagnostic recommended (the site build, 22 October 2026). */
#walk .tg-go{display:inline-block;margin-top:16px;padding:10px 16px;border-radius:999px;background:var(--ink);color:#FFE45C;font:800 14px/1 Montserrat,sans-serif;cursor:pointer;text-decoration:none}
#walk .tg.hot .tg-go{background:#141D2A;color:#FFA500}
#walk .tg-go:hover{transform:translateY(-1px)}
#walk .tg.tg-rec{background:#FFE45C}
@media (max-width:900px){#walk .tg-go{font-size:12px;padding:9px 12px}}
/* The round arrows under the report and "Sound familiar?" stay perfect circles on phones (the owner, 22 October 2026):
   a phone's own button padding was widening them into ovals. Matched to the Q&A's arrows. */
#walk .nav{padding:0!important;box-sizing:border-box;aspect-ratio:1;flex:none;min-width:0;-webkit-appearance:none;appearance:none}
@media (max-width:900px){#walk .nav{width:44px;height:44px}}
/* Four moves on a phone (the owner, 22 October 2026): the drawings sit in each note's top-right corner, so the longer
   "Growth & Scale" tag no longer runs under the Automate phone. */
@media (max-width:900px){#walk .mvn svg{top:14px;bottom:auto;right:10px}}
/* The hero on paper (?hero=paper, the owner, 22 October 2026): the few lines styled outside the hero's own code. */
#top.hero-paper .mbc-signin-hero{color:#3A4658}
#top.hero-paper .mbc-signin-hero a{color:#C46F00}
/* No hairline between the hero and the sections (the owner, 22 October 2026): the hero can end half a pixel short, which
   let the page's navy show through as a thin line; the sections tuck 2 pixels under it. The ribbon marks the change. */
#walk>:first-child{margin-top:-2px;position:relative}
/* The hero's three cards on a phone, two shorter options to compare with today's stack (the owner, 22 October 2026).
   ?fk=b: a swipe row, one card and the edge of the next. ?fk=c: three slim rows, each icon, name, line and arrow.
   Laptops are unchanged. */
@media (max-width:900px){
 html.fk-b #top .mbc-fork{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin:0 -5vw;padding:6px 5vw 14px;scrollbar-width:none}
 html.fk-b #top .mbc-fork::-webkit-scrollbar{display:none}
 html.fk-b #top .mbc-fork>button{flex:0 0 76%;scroll-snap-align:center;min-height:0!important}
 html.fk-b #top .fk-dots{display:flex;justify-content:center;gap:6px;margin:2px 0 0}
 html.fk-b #top .fk-dots i{width:8px;height:8px;border-radius:99px;background:rgba(20,29,42,.22);transition:all .3s}
 html.fk-b #top .fk-dots i.on{width:24px;background:#FFA500}
 html.fk-c #top .mbc-fork{gap:10px!important}
 html.fk-c #top .mbc-fork>button{display:grid!important;grid-template-columns:44px minmax(0,1fr) 34px;align-items:center;gap:12px!important;padding:12px 12px 12px 14px!important;min-height:0!important;border-radius:20px!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(2){display:contents!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(2)>span:first-child{width:44px!important;height:44px!important;order:1}
 html.fk-c #top .mbc-fork>button>div:nth-child(2)>span:last-child{width:34px!important;height:34px!important;order:3}
 html.fk-c #top .mbc-fork>button>div:nth-child(3){order:2;margin:0!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(3)>div:nth-child(1){font-size:10px!important;margin-bottom:2px!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(3)>div:nth-child(2){font-size:20px!important;margin-bottom:2px!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(3)>div:nth-child(3){font-size:12.5px!important;line-height:1.35!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(3)>div:nth-child(4){margin-top:6px!important}
 html.fk-c #top .mbc-fork>button>div:nth-child(3)>div:nth-child(4)>span{font-size:10.5px!important;padding:3px 9px!important}
 html.fk-c #top .mbc-fork>button>div:first-child{display:none}
 html.fk-c #top .mbc-fork>button .hz-free{display:none}
}
#top .fk-dots{display:none}

.mode-free .m-paid,.mode-paid .m-free{display:none!important}