/* Social Broker — social-broker.css Build: 2026-09-27 v6 (client portal + 404 + centring fix) Check you have the right file: search for 'Build:' above. */ /* ============================================================ SOCIAL BROKER — v3 (final pass) ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg{display:block;max-width:100%} button,input{font:inherit;color:inherit} a{color:inherit;text-decoration:none} ul,ol{list-style:none} :focus{outline:none} :focus-visible{outline:2px solid #15616D;outline-offset:3px} :root{ --bone:#FFF8F1; --paper:#FFFFFF; --red:#E71D36; --red-deep:#C31329; --red-pale:#FDEAEC; --cyan:#36D6E7; --cyan-pale:#E3F7FA; --teal:#15616D; --navy:#09032B; /* deep brand navy — backgrounds, the mark */ --navy-text:#1A2456; /* lighter, visibly-blue navy — all heading text */ --ink:#102F38; --muted:#4F6971; --line:rgba(16,47,56,.1); --line-strong:rgba(16,47,56,.2); --display:"Newsreader",Georgia,serif; --body:"DM Sans",system-ui,sans-serif; --ease:cubic-bezier(.22,.68,.24,1); --r:16px; --pad:clamp(20px,5vw,64px); --hh:76px; } body{font-family:var(--body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bone)} h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.014em;line-height:1.08;color:var(--navy-text)} .h1{font-size:clamp(2.6rem,5.6vw,4.3rem);line-height:1.02} .h2{font-size:clamp(1.9rem,3.2vw,2.6rem)} .h3{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.22} .sub{font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.55;color:var(--muted)} .small{font-size:.87rem;color:var(--muted)} p{margin-bottom:1em}p:last-child{margin-bottom:0} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--pad)} .narrow{max-width:740px;margin-inline:auto} .band{padding-block:clamp(56px,7vw,96px)} .band-sm{padding-block:clamp(36px,4.6vw,60px)} .band-lg{padding-block:clamp(72px,9vw,128px)} .paper{background:var(--paper)} .bone{background:var(--bone)} .center{text-align:center} /* NAVY, textured — never flat */ .navy{position:relative;overflow:hidden;color:#fff; background: radial-gradient(115% 85% at 10% 0%,rgba(54,214,231,.22),transparent 55%), radial-gradient(95% 75% at 94% 100%,rgba(231,29,54,.16),transparent 58%), var(--navy)} .navy::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(255,255,255,.45) 1px,transparent 1.2px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.12) 68%,transparent); mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.12) 68%,transparent)} .navy>*{position:relative;z-index:1} /* headings ALWAYS navy except white on dark bands — one rule, no drift. Scoped to direct section content only — a light .card sitting inside a navy section keeps normal dark text, or its own text would vanish (white-on-white). This is the fix for that exact bug. */ .navy h1,.navy h2,.navy h3,.navy h4{color:#fff} .navy .sub{color:rgba(255,255,255,.8)} .navy .card h3,.navy .card h4{color:var(--navy-text)} /* DSM HUB-AND-SPOKE — a central "content strategy" node with three jobs radiating from it, not a sequence. These three things are simultaneous properties of a strategy, not steps 1-2-3 (that shape is reserved for Getting Started), so the model is deliberately not linear. */ .hub{position:relative;margin-top:clamp(38px,4.8vw,58px)} .hub-center{width:120px;height:120px;border-radius:50%;background:var(--navy); border:2.5px solid rgba(255,255,255,.5);display:grid;place-items:center; margin:0 auto;position:relative;z-index:2;box-shadow:0 0 0 8px var(--navy),0 10px 30px rgba(0,0,0,.3)} .hub-center span{font-family:var(--display);font-weight:600;font-size:1rem;color:#fff; text-align:center;line-height:1.2} /* Connector — built from the SAME grid math as .hub-nodes below (3 equal columns), not a hand-guessed SVG path independent of it. A column's center always sits at 1/6, 3/6, 5/6 of the row width regardless of the row's actual pixel size, so this stays precisely aligned at any width instead of only looking roughly right at one assumed size. */ .hub-connector{position:relative;height:56px;margin-top:6px} .hc-stem{position:absolute;left:50%;top:0;width:2px;height:16px;background:rgba(255,255,255,.28); transform:translateX(-50%)} .hc-bar{position:absolute;left:16.667%;right:16.667%;top:16px;height:2px;background:rgba(255,255,255,.28)} .hc-drop{position:absolute;top:16px;width:2px;height:40px;background:rgba(255,255,255,.28)} .hc-drop-1{left:16.667%;transform:translateX(-50%)} .hc-drop-2{left:50%;transform:translateX(-50%)} .hc-drop-3{left:83.333%;transform:translateX(-50%)} .hc-stem,.hc-bar,.hc-drop{opacity:0;transition:opacity .6s var(--ease) .3s} .hub.in .hc-stem,.hub.in .hc-bar,.hub.in .hc-drop{opacity:1} .hub-nodes{position:relative;z-index:1;margin-top:0; display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)} .hub-node{text-align:center;display:flex;flex-direction:column;align-items:center} /* One consistent ring colour across all three, not red/teal/cyan per node — these are three equal, simultaneous jobs, not a ranked or colour-coded sequence, and three different circle colours implied a distinction that isn't real. The emoji and heading already tell them apart. */ .hub-dot{width:52px;height:52px;border-radius:50%;background:var(--navy); border:2.5px solid rgba(255,255,255,.55);color:#fff;display:grid;place-items:center; font-size:1.3rem;margin-bottom:1rem} .hub-node h3{margin-bottom:.35rem} .hub-node .small{max-width:24ch;color:rgba(255,255,255,.68)} .pillar-tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px; margin-top:.9rem;padding:0} .pillar-tags li{font-size:.76rem;font-weight:500;padding:.32em .68em;border-radius:99em; background:rgba(255,255,255,.1);color:#fff} @media(max-width:820px){ .hub-nodes{grid-template-columns:1fr;gap:clamp(26px,4.6vw,38px)} .hub-connector{display:none} } .navy .card p,.navy .card .small{color:var(--muted)} .g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)} .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} @media(max-width:980px){.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:1fr 1fr}} @media(max-width:860px){.g3{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}} @media(max-width:600px){.g4,.g3,.g5{grid-template-columns:1fr 1fr}} @media(max-width:420px){.g5{grid-template-columns:1fr}} /* BUTTONS — one shape rule. Cut-corner pill = primary action ONLY. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem; font-family:var(--body);font-size:.96rem;font-weight:500;padding:.86em 1.6em; border-radius:99em;cursor:pointer;white-space:nowrap;border:none; transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)} .btn-primary{background:var(--red);color:#fff;border-radius:99em 0 99em 99em} .btn-primary:hover,.btn-primary:focus-visible{background:var(--red-deep);color:#fff} .btn-primary:focus-visible{box-shadow:0 0 0 3px var(--cyan)} .btn-sec{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)} .btn-sec:hover{background:var(--bone);color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)} .btn-ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)} .btn-ghost:hover{background:rgba(255,255,255,.22)} /* .btn is used on real links throughout the site (this ghost button links to /decision-safety-map/, for instance) — without this, browsers apply their own dark default color once a link has been visited or is being hovered, regardless of what .btn itself sets. Same bug already fixed once tonight in the onboarding form; fixing it here too rather than case-by-case. */ .btn:link,.btn:visited,.btn:hover,.btn:active{color:inherit} .btn-primary:link,.btn-primary:visited,.btn-primary:hover,.btn-primary:active{color:#fff} .btn-ghost:link,.btn-ghost:visited,.btn-ghost:hover,.btn-ghost:active{color:#fff} .btn-sec:link,.btn-sec:visited,.btn-sec:hover,.btn-sec:active{color:var(--ink)} .btn-sm{font-size:.86rem;padding:.62em 1.2em} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,26px)} .card-hover{transition:border-color .2s,box-shadow .2s} .card-hover:hover{border-color:var(--teal);box-shadow:0 4px 22px rgba(16,47,56,.06)} /* EYEBROW — small uppercase red pill, used identically everywhere */ .eyebrow{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--red-deep);background:var(--red-pale); padding:.42em .85em;border-radius:99em;margin-bottom:.85rem} .navy .eyebrow{background:var(--red);color:#fff} .tile{width:44px;height:44px;border-radius:13px;background:var(--cyan-pale);display:grid; place-items:center;font-size:1.3rem;line-height:1;flex:none} .navy .tile{background:rgba(255,255,255,.1)} /* HEADER */ .sb-head{position:sticky;top:0;z-index:60;height:var(--hh); background:rgba(255,248,241,.94);backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} .sb-head.stuck{border-bottom-color:var(--line);box-shadow:0 1px 0 var(--line),0 10px 24px -14px rgba(9,3,43,.18)} .sb-head-in{display:flex;align-items:center;justify-content:center;height:100%;gap:3rem} .sb-logo{display:flex;align-items:center;gap:.55rem;flex:none;margin-right:2.2rem} .sb-logo img{height:34px;width:auto} .sb-logo b{font-family:var(--display);font-weight:600;font-size:1.18rem;color:var(--navy-text)} .nav-list{display:flex;align-items:center;gap:1.7rem} /* :not(.btn) is the fix — without it this rule's specificity beats .btn-primary's white text, which is exactly why "Let's talk" was rendering as dark navy text on a red pill, barely legible. */ .nav-list>li>a:not(.btn){font-size:.92rem;font-weight:500;color:var(--ink);padding:.3rem 0; border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .nav-list>li>a:not(.btn):hover{color:var(--teal);border-bottom-color:var(--cyan)} /* ONE cta lives inside the nav list. Nothing else in the header renders a button. */ .burger{display:none;width:38px;height:38px;flex-direction:column;justify-content:center; gap:5px;align-items:center;border-radius:10px;margin-left:auto;background:none;border:none} .burger i{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:.24s var(--ease)} .sb-head.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} .sb-head.open .burger i:nth-child(2){opacity:0} .sb-head.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:880px){ .nav-list{display:none} .burger{display:flex} .sb-head.open .nav-list{display:flex;position:absolute;inset:var(--hh) 0 auto;flex-direction:column; align-items:stretch;gap:0;background:var(--bone);border-bottom:1px solid var(--line); padding:.5rem var(--pad) 1.1rem} .sb-head.open .nav-list>li>a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line)} .sb-head.open .nav-list li:last-child{margin-top:.6rem} .sb-head.open .nav-list li:last-child a{border-bottom:none} } /* HERO — centred, big, one action, with an actual environment behind it. Flat centred text on plain cream reads as adrift — nothing grounds it. A soft radial glow anchored behind the headline plus a faint dot-grid gives the section a place to exist in, without competing with the type. */ .hero{position:relative;overflow:hidden;text-align:center; padding-block:clamp(64px,8.2vw,116px) clamp(40px,5.2vw,64px); background: radial-gradient(60% 55% at 50% 8%,rgba(54,214,231,.16),transparent 62%), radial-gradient(46% 40% at 82% 4%,rgba(231,29,54,.09),transparent 60%), var(--bone)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(16,47,56,.06) 1px,transparent 1.2px); background-size:26px 26px; -webkit-mask-image:radial-gradient(64% 60% at 50% 22%,#000,transparent 78%); mask-image:radial-gradient(64% 60% at 50% 22%,#000,transparent 78%)} .hero>*{position:relative;z-index:1} .hero-in{max-width:920px;margin-inline:auto} .hero .eyebrow{margin-bottom:1.1rem} .hero .h1{margin-bottom:1.15rem} .hero .sub{max-width:50ch;margin-inline:auto;margin-bottom:2rem} .hero-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem} /* HERO CARD STACK. Three real posts auto-rotate through front/middle/back positions, endlessly, so the hero shows the actual product moving rather than sitting still. Pure CSS: three staggered infinite animations sharing one keyframe, each 1/3 out of phase with the others. */ .stack{position:relative;height:300px;max-width:230px;margin:clamp(28px,4vw,44px) auto 0;perspective:1000px} .stack-card{position:absolute;inset:0;border-radius:14px;overflow:hidden; box-shadow:0 14px 34px rgba(9,3,43,.16);animation:stackcycle 9s ease-in-out infinite} .stack-card .post{height:100%;border-radius:14px} .stack-card .pimg{height:100%;aspect-ratio:auto} .sc-0{animation-delay:0s} .sc-1{animation-delay:-3s} .sc-2{animation-delay:-6s} /* three positions in the cycle: front (top,scale1), mid (behind-left), back (behind-right,smallest) */ @keyframes stackcycle{ 0%,4%{transform:translateY(0) translateX(0) scale(1) rotate(0deg);z-index:3;opacity:1} 33.3%{transform:translateY(14px) translateX(-16px) scale(.93) rotate(-4deg);z-index:2;opacity:.85} 66.6%{transform:translateY(24px) translateX(16px) scale(.87) rotate(4deg);z-index:1;opacity:.65} 96%,100%{transform:translateY(0) translateX(0) scale(1) rotate(0deg);z-index:3;opacity:1} } @media(prefers-reduced-motion:reduce){.stack-card{animation:none} .sc-0{z-index:3}.sc-1{transform:translateY(14px) translateX(-16px) scale(.93) rotate(-4deg);z-index:2;opacity:.85} .sc-2{transform:translateY(24px) translateX(16px) scale(.87) rotate(4deg);z-index:1;opacity:.65}} .cyc{color:var(--red)} .caret{display:inline-block;width:.05em;height:.76em;background:var(--red);margin-left:.04em; vertical-align:-.04em;animation:blink 1.05s steps(1) infinite} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} .capture{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:500px;margin-inline:auto} .capture input{flex:1 1 230px;padding:.86em 1.15em;border:1.5px solid var(--line-strong); border-radius:99em;font-size:.98rem;background:var(--paper);color:var(--ink)} .capture input::placeholder{color:var(--muted)} .capture input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--cyan-pale)} .capture-note{font-size:.84rem;color:var(--muted);margin-top:.7rem} /* client journey — kept as plain text right under the note, quiet and small, answering "then what happens" without competing with the capsules below */ .journey{display:flex;align-items:center;gap:.55rem;margin-top:1.3rem; font-size:.92rem;color:var(--ink);flex-wrap:wrap;justify-content:center;font-weight:500} .journey b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px; border-radius:50%;background:var(--teal);color:#fff;font-size:.68rem;font-weight:700;margin-right:.3rem} .journey .jarrow{color:var(--line-strong);font-size:.8rem} /* FLOATING TOPIC CAPSULES — replaces the pop-in chip row. Five slots, each on its own fade cycle, drifting very slightly. Pulled from real broking and advice topics so the hero itself demonstrates the range of the library. */ .capsules{position:relative;height:78px;margin-top:1.8rem;max-width:640px;margin-inline:auto} @media(max-width:480px){.capsules{max-width:100%}} .capsule{position:absolute;display:inline-flex;align-items:center;gap:.4rem; font-size:.86rem;font-weight:500;padding:.5em .95em;border-radius:99em; background:var(--paper);color:var(--ink);border:1px solid var(--line); box-shadow:0 4px 14px rgba(16,47,56,.08);white-space:nowrap;opacity:0; animation:capfloat 8s ease-in-out infinite} .capsule .e{font-size:.98rem;line-height:1} @keyframes capfloat{ 0%{opacity:0;transform:translateY(6px) scale(.92)} 8%{opacity:1;transform:translateY(0) scale(1)} 46%{opacity:1;transform:translateY(-3px) scale(1)} 54%{opacity:0;transform:translateY(-8px) scale(.96)} 100%{opacity:0;transform:translateY(-8px) scale(.96)} } /* STATS STRIP — directly under hero, Taka-style */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats-in{padding-block:clamp(20px,2.6vw,30px)} /* AS SEEN IN — placeholder slots. These ARE placeholders: dashed border and grey fill until a real masthead is dropped in (see page.html, look for /logos/*.svg). This CSS was missing entirely before, which is exactly why it rendered as plain unstyled text. */ .seen{margin-top:clamp(30px,3.6vw,46px);padding-top:1.3rem;border-top:1px solid var(--line)} .seen-logo{height:32px;min-width:110px;margin-inline:.85rem;flex:none; display:grid;place-items:center;padding-inline:.75rem; border-radius:9px;background:rgba(16,47,56,.03);border:1px dashed var(--line-strong); font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--muted);white-space:nowrap} .seen-logo img{height:100%;width:auto;object-fit:contain; filter:grayscale(1) opacity(.65);transition:filter 200ms} .seen-logo:hover img{filter:none} /* PLATFORMS section — replaces what used to be a single subtle text link under the marquee with an actual section: the four real channel icons, plus one clear way through to the page explaining what each one does. */ .platform-row{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,36px);margin-top:clamp(24px,3vw,36px)} .platform-item{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:600;color:var(--ink)} .platform-item img{width:28px;height:28px;object-fit:contain} .stat b{display:block;font-family:var(--display);font-weight:600;color:var(--navy-text); font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;margin-bottom:.3rem} .stat span{font-size:.8rem;color:var(--muted)} /* WEEK VIEW — the primary "what do I get" proof */ .week-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .week-row::-webkit-scrollbar{height:5px} .week-row::-webkit-scrollbar-thumb{background:rgba(16,47,56,.18);border-radius:99em} .week-day{flex:0 0 clamp(180px,19vw,220px);scroll-snap-align:start} .week-lbl{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);margin-bottom:.55rem;padding-left:.15rem} /* POST MOCKUP */ .post{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden; display:flex;flex-direction:column} .post-hd{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem} .pav{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:grid; place-items:center;font-size:.62rem;font-weight:700;flex:none} .pnm{font-size:.75rem;font-weight:600;line-height:1.15} .pmt{font-size:.65rem;color:var(--muted)} .chan{width:19px;height:19px;border-radius:6px;margin-left:auto;flex:none;display:grid; place-items:center;background:rgba(16,47,56,.06);font-size:.48rem;color:var(--muted)} .chan img{width:100%;height:100%;object-fit:contain} .pimg{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--cyan-pale)} .art{display:block;width:100%;height:100%} .art .ah{font-family:var(--display);font-weight:600;letter-spacing:-.014em} .art .af{font-family:var(--display);font-weight:600;letter-spacing:-.03em} .art .ab{font-family:var(--body)} .art .al{font-family:var(--body);font-weight:700;letter-spacing:.07em} .pfoot{padding:.6rem .7rem .75rem} .pcap{font-size:.73rem;line-height:1.42;color:var(--muted)} .pcap b{color:var(--ink);font-weight:600} .photo{width:100%;height:100%;display:flex;flex-direction:column} .photo-img{flex:1;position:relative;background:var(--cyan-pale);color:rgba(16,47,56,.15)} .photo-img::before{content:"";position:absolute;inset:0; background-image:radial-gradient(currentColor 2.2px,transparent 2.4px);background-size:12px 12px} .photo-img::after{content:attr(data-slot);position:absolute;left:9px;top:8px;font-size:.52rem; font-weight:600;color:rgba(16,47,56,.55)} .photo-img img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover} .photo-band{background:var(--bp,var(--teal));color:#fff;padding:.7rem .75rem .78rem} .photo-band .pl{font-size:.52rem;font-weight:700;letter-spacing:.08em;opacity:.8;margin-bottom:.22rem} .photo-band .ph{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.08} /* SOCIAL PROOF */ .stars{display:flex;gap:2px;margin-bottom:.7rem} .stars svg{width:13px;height:13px;fill:var(--red);flex:none} .qtext{font-family:var(--display);font-size:clamp(1.02rem,1.4vw,1.14rem);line-height:1.34;margin-bottom:.7rem} .qattr{font-size:.84rem;color:var(--muted)} .qattr b{color:var(--ink);font-weight:600} /* REVIEWS SLIDER — same drag-scroll pattern as the week view, so it scales to however many of the ~50 Google reviews you want to paste in; it just keeps scrolling instead of needing a grid reflow. */ .q-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;cursor:grab} .q-row.dragging{cursor:grabbing;scroll-snap-type:none} .q-row.dragging *{user-select:none} .q-row::-webkit-scrollbar{height:5px} .q-row::-webkit-scrollbar-thumb{background:rgba(16,47,56,.18);border-radius:99em} .qcard{flex:0 0 clamp(240px,26vw,300px);scroll-snap-align:start;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,26px)} /* GETTING STARTED, step 1 rich mockup — merged in what used to be a separate "make it yours" section. Chips stagger in with a fade+rise when the step scrolls into view (.reveal.in triggers @keyframes below). */ .tl-card-rich{max-width:420px} .mk-row{margin-bottom:1rem} .mk-row:last-of-type{margin-bottom:0} .mk-row-split{display:flex;gap:1.6rem} .mk-chips{display:flex;flex-wrap:wrap;gap:6px} .mk-chip{display:inline-flex;align-items:center;gap:.32rem;font-size:.76rem;font-weight:500; padding:.34em .7em;border-radius:99em;background:var(--paper);border:1px solid var(--line); color:var(--muted);opacity:0;transform:translateY(5px)} .reveal.in .mk-chip{animation:mkchip 420ms var(--ease) forwards} @keyframes mkchip{to{opacity:1;transform:none}} .mk-chip.on{background:var(--cyan-pale);border-color:var(--teal);color:var(--teal)} .mk-swatches{display:flex;gap:6px} .mk-swatches i{width:22px;height:22px;border-radius:7px;display:block;box-shadow:inset 0 0 0 1px rgba(9,3,43,.08)} .mk-swatches i.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--teal)} .mk-done{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--teal); margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);opacity:0} .reveal.in .mk-done{animation:mkchip 420ms var(--ease) 900ms forwards} .mk-done svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;flex:none} /* step 2: connected vs pending channel rows */ .tl-tick{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700; letter-spacing:.02em;color:var(--teal)} .tl-tick svg{width:12px;height:12px;fill:none;stroke:var(--teal);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .tl-pending{font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--red-deep); background:var(--red-pale);padding:.25em .6em;border-radius:99em} /* GETTING STARTED — vertical stage journey. A running line down the left connects each numbered stage; each stage carries a small interface mockup rather than plain text, so it reads as a process, not a card grid. .reveal already handles the per-stage fade/slide-up as it scrolls in. */ .timeline{position:relative;margin-top:clamp(30px,3.8vw,48px);max-width:640px} .timeline::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px; background:linear-gradient(180deg,var(--red),var(--teal) 50%,var(--cyan))} .tl-step{position:relative;padding-left:60px;padding-bottom:clamp(34px,4.4vw,52px)} .tl-step:last-child{padding-bottom:0} .tl-marker{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%; background:var(--paper);border:2px solid var(--red);color:var(--red-deep); display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.05rem;z-index:1} .tl-body h3{margin-bottom:.35rem} .tl-body>p{font-size:.95rem;color:var(--muted);margin-bottom:1rem;max-width:44ch} .tl-card{background:var(--bone);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;max-width:340px} .tl-lab{font-size:.7rem;font-weight:600;color:var(--muted);margin:0 0 .35rem} .tl-field{background:var(--paper);border:1px solid var(--line);border-radius:8px; padding:.5em .7em;font-size:.82rem;margin-bottom:.75rem} .tl-chips{display:flex;flex-wrap:wrap;gap:5px} .tl-chips span{font-size:.72rem;padding:.32em .65em;border-radius:99em;background:var(--paper); border:1px solid var(--line);color:var(--muted)} .tl-chips span.on{background:var(--cyan-pale);border-color:var(--teal);color:var(--teal)} .tl-row{display:flex;align-items:center;padding:.5em 0;border-bottom:1px solid var(--line);font-size:.85rem} .tl-row:last-child{border-bottom:0} .tl-row b{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.03em;color:var(--teal)} .tl-approve{display:flex;gap:8px} .tl-approve .btn{flex:1;cursor:default} .tl-queue{font-size:.7rem;color:var(--muted);text-align:center;margin:.7rem 0 0} /* STEPS */ .step-row{display:flex;gap:1rem;align-items:flex-start} .step-num{width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff; display:grid;place-items:center;font-size:.86rem;font-weight:600;flex:none} .step-row h3{margin-bottom:.28rem} .step-row p{font-size:.94rem;color:var(--muted)} /* CUSTOMISE — compact list, not a giant configurator */ .custom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(22px,2.8vw,34px)} @media(max-width:700px){.custom-grid{grid-template-columns:1fr}} .custom-item{background:var(--paper);padding:1.1rem 1.2rem;display:flex;gap:.8rem;align-items:flex-start} .custom-item .tile{width:36px;height:36px;border-radius:10px;font-size:1.02rem} .custom-item h4{font-size:.96rem;font-weight:600;margin-bottom:.2rem} .custom-item p{font-size:.85rem;color:var(--muted)} /* chips — round everywhere, same radius as hero */ .chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:500; padding:.4em .8em;border-radius:99em;background:var(--cyan-pale);color:var(--teal)} /* IS / ISN'T */ .cmp li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;padding:.35rem 0} .cmp li svg{width:14px;height:14px;flex:none;margin-top:.26em;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .yes li svg{stroke:var(--teal)} .no li{color:var(--muted)} .no li svg{stroke:var(--red-deep)} .cmp h3{margin-bottom:.3rem} .cmp>p{font-size:.92rem;color:var(--muted);margin-bottom:.9rem} /* INDUSTRIES */ .ind-img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;position:relative; background:var(--cyan-pale);color:rgba(16,47,56,.15);margin-bottom:.9rem} .ind-img::before{content:"";position:absolute;inset:0; background-image:radial-gradient(currentColor 2.4px,transparent 2.6px);background-size:14px 14px} .ind-img::after{content:attr(data-slot);position:absolute;left:11px;bottom:9px;font-size:.6rem; font-weight:600;color:rgba(16,47,56,.5)} .ind-tag{position:absolute;left:11px;top:11px;z-index:3} .ind p{font-size:.92rem;color:var(--muted);margin:.3rem 0 .75rem} .ind a{font-size:.88rem;font-weight:600;color:var(--teal);border-bottom:1.5px solid var(--cyan);padding-bottom:2px} /* COST COMPARISON TABLE */ .vs{width:100%;border-collapse:collapse;margin-top:clamp(22px,2.8vw,34px)} .vs th,.vs td{text-align:left;padding:.85rem .8rem;border-bottom:1px solid var(--line)} .vs thead th{border-bottom:1.5px solid var(--navy);font-family:var(--display);font-weight:600;font-size:1.1rem} .vs thead th:first-child{font-family:var(--body);font-size:.76rem;font-weight:600;color:var(--muted)} .vs tbody th{font-size:.82rem;color:var(--muted);font-weight:500} .vs td{font-size:.9rem} .vs .us{background:var(--cyan-pale)} .vs thead .us{color:var(--teal)} @media(max-width:680px){ .vs,.vs tbody,.vs tr,.vs td,.vs th{display:block} .vs thead{display:none} .vs tr{border-bottom:1.5px solid var(--navy);padding-bottom:.5rem;margin-bottom:.5rem} .vs td{border-bottom:0;padding:.2rem .8rem} .vs td::before{content:attr(data-l) ": ";font-weight:600;color:var(--muted)} } /* PRICING */ .plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px); margin-top:clamp(22px,2.8vw,36px)} @media(max-width:860px){.plan-grid{grid-template-columns:1fr}} .plan{display:flex;flex-direction:column} .plan.featured{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);background:linear-gradient(180deg,var(--cyan-pale) 0%,var(--paper) 140px)} .plan-badge{font-size:.7rem;font-weight:700;letter-spacing:.05em;color:var(--red-deep);margin-bottom:.4rem} .plan h3{margin-bottom:.25rem} .plan .desc{font-size:.9rem;color:var(--muted);margin-bottom:1rem} .plan-price{display:flex;align-items:baseline;gap:.32rem;margin-bottom:.2rem} .plan-price b{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,3.2vw,2.6rem);letter-spacing:-.02em} .plan-price span{font-size:.8rem;color:var(--muted)} .plan-sub{font-size:.8rem;color:var(--teal);margin-bottom:1.1rem} .plan ul{display:grid;gap:.42rem;font-size:.9rem;margin-bottom:1.3rem} .plan li{display:flex;gap:.48rem;align-items:flex-start} .plan li svg{width:13px;height:13px;flex:none;margin-top:.3em;fill:none;stroke:var(--teal); stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} .plan .btn{margin-top:auto;width:100%} .billing-toggle{display:inline-flex;position:relative;background:rgba(16,47,56,.07); padding:4px;border-radius:99em} .billing-track{position:absolute;top:4px;left:4px;height:calc(100% - 8px);background:var(--paper); border-radius:99em;box-shadow:0 1px 3px rgba(16,47,56,.14);transition:transform .3s var(--ease),width .3s var(--ease)} .billing-toggle button{position:relative;z-index:2;font-size:.86rem;font-weight:500;padding:.5em .95em; color:var(--muted);border:none;background:none;box-shadow:none; -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent} .billing-toggle button[aria-pressed="true"]{color:var(--ink)} /* FAQ */ .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:1rem 2.2rem 1.05rem 0;position:relative; font-family:var(--display);font-weight:500;font-size:1.1rem;line-height:1.22} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--teal)} .faq summary::after{content:"";position:absolute;right:2px;top:1.35rem;width:9px;height:9px; border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg); transition:transform .26s var(--ease)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq .ans{padding-bottom:1.05rem;font-size:.94rem;color:var(--muted);max-width:64ch} /* AUTHOR + DSM TEASER — same .wrap as everything else. Two cards side by side: who built this, and the framework it runs on, each linking out to more. Sits directly after the full Decision Safety Map band, not buried near the bottom of the page. */ .author-solo{max-width:760px;margin-inline:auto} .author-row{display:flex;gap:clamp(16px,2.2vw,26px);align-items:center;flex-wrap:wrap} .author-img{width:clamp(84px,10vw,108px);aspect-ratio:1;border-radius:14px;flex:none; position:relative;overflow:hidden;background:var(--cyan-pale);color:rgba(16,47,56,.15)} .author-img::before{content:"";position:absolute;inset:0; background-image:radial-gradient(currentColor 2.2px,transparent 2.4px);background-size:12px 12px} .author-img::after{content:attr(data-slot);position:absolute;inset:0;display:grid;place-items:center; font-size:.52rem;font-weight:600;color:rgba(16,47,56,.5)} .author-body{flex:1 1 260px;min-width:0} .author-name{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--red-deep);margin-bottom:.4rem} .author-body h3{margin-bottom:.35rem} .author-body p{font-size:.92rem;color:var(--muted);margin-bottom:.9rem} /* CTA BAND */ .cta-band{text-align:center} .cta-band h2{margin-bottom:.9rem} .cta-band .sub{margin-inline:auto;margin-bottom:1.8rem;max-width:44ch} /* FOOTER */ .sb-foot{background:#FFFCF8;border-top:1px solid var(--line);padding-block:clamp(44px,5.6vw,76px) 1.6rem} .foot-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.8fr);gap:clamp(24px,3.4vw,56px)} @media(max-width:900px){.foot-top{grid-template-columns:1fr}} .foot-brand .sb-logo{margin-bottom:.9rem} .foot-brand p{font-size:.88rem;color:var(--muted);max-width:30ch;margin-bottom:1.1rem} .fsocs{display:flex;gap:8px} .fsoc{width:34px;height:34px;border-radius:9px;background:rgba(16,47,56,.05);display:grid; place-items:center;transition:background .18s} .fsoc:hover{background:var(--cyan-pale)} .fsoc img{width:16px;height:16px;object-fit:contain} .fsoc span{font-size:.56rem;font-weight:700;color:var(--muted)} .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)} @media(max-width:700px){.foot-cols{grid-template-columns:1fr 1fr}} @media(max-width:420px){.foot-cols{grid-template-columns:1fr}} .fcol h3{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--teal);margin-bottom:.8rem} .fcol ul{display:grid;gap:.48rem} .fcol a{font-size:.88rem;color:var(--ink)} .fcol a:hover{color:var(--red-deep)} .foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center; margin-top:clamp(26px,3.4vw,42px);padding-top:1.3rem;border-top:1px solid var(--line)} .foot-base p{font-size:.8rem;color:var(--muted)} .foot-base ul{display:flex;gap:1rem} .foot-base a{font-size:.8rem;color:var(--muted)} .foot-base a:hover{color:var(--teal)} /* REVEAL */ .reveal{opacity:0;transform:translateY(12px)} .js .reveal{transition:opacity .55s var(--ease),transform .55s var(--ease)} .js .reveal.in{opacity:1;transform:none} html:not(.js) .reveal{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important} .reveal{opacity:1!important;transform:none!important} /* capfloat's resting keyframe is opacity:0 — without this override every capsule would snap to invisible instead of just holding still visible */ .capsule{animation:none!important;opacity:1!important;transform:none!important} /* Same bug, same fix, on the hero photo's topic chips — introduced when the hero was rebuilt around the photo, after the capsule fix above was already written, so it never got applied here. Without this override these are invisible under reduced motion, which is very likely what was happening on the actual phone this was reported from. */ .float-capsules .chip{animation:none!important;opacity:1!important;transform:none!important;position:static!important;display:inline-flex!important;margin:4px 6px 0 0} .float-capsules{display:flex!important;flex-wrap:wrap;height:auto!important;background:var(--paper)!important; box-shadow:0 10px 28px -8px rgba(9,3,43,.22)!important;padding:.7em .8em!important} } /* ===== INNER PAGES: About, Decision Safety Map, Channels, Contact, Insights ===== */ .dsm-detail{position:relative;padding-left:56px} .dd-num{--nc:#fff;position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:50%; background:var(--paper);border:2.5px solid var(--nc);color:var(--nc);display:grid;place-items:center; font-family:var(--display);font-weight:600;font-size:1rem} .dsm-detail h2{margin-bottom:0} .dsm-detail p b{color:var(--ink);font-weight:600} .cal-embed{background:var(--paper);border:1.5px dashed var(--line-strong);border-radius:var(--r); min-height:340px;display:flex;align-items:center;justify-content:center} /* ===== HERO REBUILD: two columns, photo + floating UI callouts ===== */ .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px); align-items:center;padding-top:clamp(20px,3vw,36px)} .hero-copy{text-align:left} .hero-copy .eyebrow{margin-bottom:1rem} .hero-copy .h1{margin-bottom:1.1rem} .hero-copy .sub{max-width:46ch;margin-bottom:2rem} .hero-actions{justify-content:flex-start} .hero-photo-wrap{position:relative} /* This asset is a composed transparent-background graphic — her head breaks the frame deliberately and it already carries its own red line art. Treating it as a photo-in-a-box (cover-fit into a shadowed rectangle) would crop her head off and fight the existing line work. It just sits naturally instead, sized to the column, nothing added. */ .hero-photo{position:relative} .hero-photo img{width:100%;height:auto;display:block} .float-card{position:absolute;background:var(--paper);border-radius:14px; box-shadow:0 10px 28px -8px rgba(9,3,43,.22);padding:.85em 1.1em;z-index:2} .float-capsules{left:-4%;top:52%;width:210px;height:56px;background:none;box-shadow:none;padding:0} .float-capsules .chip{position:absolute;display:inline-flex;align-items:center;gap:.35rem; font-size:.78rem;font-weight:500;padding:.5em .9em;border-radius:99em;background:var(--paper); color:var(--ink);box-shadow:0 8px 20px -6px rgba(9,3,43,.25);white-space:nowrap;opacity:0; animation:heroCapFloat 7s ease-in-out infinite} @keyframes heroCapFloat{ 0%{opacity:0;transform:translateY(6px) scale(.94)} 10%{opacity:1;transform:translateY(0) scale(1)} 48%{opacity:1;transform:translateY(-3px) scale(1)} 58%{opacity:0;transform:translateY(-8px) scale(.96)} 100%{opacity:0} } /* At-a-glance signal that this is social content, not a blog or a newsletter — real platform icons, not text, since recognition should be instant, before anyone reads a word of copy. */ .float-platforms{left:-4%;top:0%;display:flex;gap:10px;padding:.7em .9em} .float-platforms img{width:22px;height:22px;object-fit:contain} .float-colour{right:2%;top:1%;width:160px} .fc-label{font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:.55rem} .fc-swatches{display:flex;gap:7px} .fc-swatches button{width:24px;height:24px;border-radius:7px;border:none;padding:0;cursor:pointer; box-shadow:inset 0 0 0 1px rgba(9,3,43,.1);transition:box-shadow .15s,transform .15s} .fc-swatches button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--teal)} .fc-swatches button:hover{transform:scale(1.1)} .float-approve{right:1%;bottom:2%;display:flex;align-items:center;gap:.5rem; font-size:.86rem;font-weight:600;color:var(--ink)} .fc-tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:50%;background:var(--teal);color:#fff;font-size:.72rem;flex:none} @media(max-width:860px){ .hero-grid{grid-template-columns:1fr} .hero-copy{text-align:center} .hero-copy .sub{margin-inline:auto} .hero-actions{justify-content:center} .hero-photo-wrap{max-width:380px;margin-inline:auto} .float-capsules{left:-4%} /* the desktop position sits level with her head, relying on horizontal clearance that a narrower mobile column does not have — pushing it down clears her face instead of covering it */ .float-colour{right:-2%;top:16%} .float-approve{right:-2%} } /* ============================================================ SOCIAL BROKER — v5 Appended to v3. Changes rhythm, hierarchy and one motif. Surface rule: white cards on bone, bone cards on white, never white on white. ============================================================ */ :root{ --evidence:#0F4F52; --authority:#09032B; --cut:14px; --out:cubic-bezier(.16,.84,.34,1); --tint-threat:#FF5468; --tint-clarity:#5ED7EA; --tint-justify:#7FD8C9; } /* ---------- SURFACES --------------------------------------- */ .s-cream{background:var(--bone)} .s-paper{background:var(--paper)} .s-cream .card,.s-cream .panel{background:var(--paper)} .s-paper .card,.s-paper .panel{background:var(--bone)} .panel{border:1px solid var(--line);padding:clamp(18px,2.2vw,26px); border-radius:var(--cut) 0 var(--cut) var(--cut)} .s-evidence{background:var(--evidence);color:#fff} .s-evidence h1,.s-evidence h2,.s-evidence h3,.s-evidence h4{color:#fff} .s-evidence .sub{color:rgba(255,255,255,.78)} .s-evidence .eyebrow{background:rgba(255,255,255,.14);color:#fff} .s-authority{position:relative;overflow:hidden;background:var(--authority);color:#fff} .s-authority h1,.s-authority h2,.s-authority h3,.s-authority h4{color:#fff} .s-authority .sub{color:rgba(255,255,255,.72)} .s-authority .eyebrow{background:transparent;color:var(--tint-threat);padding:0} .s-authority::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 55% at 50% 0%,rgba(54,214,231,.11),transparent 62%)} .s-authority>*{position:relative;z-index:1} /* ---------- THE CUT CORNER: buttons, cards, post frames ----- */ .btn,.btn-primary,.btn-sec,.btn-ghost{border-radius:99em 0 99em 99em} .card,.qcard,.plan,.post,.tl-card,.cal-embed,.artefact,.panel,.ind-panel, .cost-card,.faq-wrap,.rev{border-radius:var(--cut) 0 var(--cut) var(--cut)} .pimg,.ind-img,.author-img,.tile{border-radius:10px} .chip,.eyebrow,.pillar-tags li,.mk-chip,.tl-chips span{border-radius:99em} /* ---------- ONE MOTION GESTURE ----------------------------- */ .reveal{transform:translateY(12px)} .js .reveal{transition:opacity .4s var(--out),transform .4s var(--out)} .stagger>*{transition-delay:0ms} .stagger>*:nth-child(2){transition-delay:60ms} .stagger>*:nth-child(3){transition-delay:120ms} .stagger>*:nth-child(4){transition-delay:180ms} .stagger>*:nth-child(5){transition-delay:240ms} .stagger>*:nth-child(6){transition-delay:300ms} /* ---------- THE MOTIF: the post artwork itself, drifting ---- */ .drift-host{position:relative;isolation:isolate;padding-top:clamp(206px,21vw,272px)} .drift{position:absolute;left:0;right:0;top:0;height:clamp(190px,19.5vw,250px); overflow:hidden;pointer-events:none;z-index:0} .drift-rail{display:flex;gap:18px;position:absolute;top:0;left:0;width:max-content; animation:driftx 68s linear infinite} .drift-rail.b{animation-duration:92s;animation-direction:reverse} @keyframes driftx{from{transform:translateX(0)}to{transform:translateX(-50%)}} .drift-post{width:clamp(146px,15vw,196px);flex:none} .drift-post .pa{margin:0} .drift-veil{position:absolute;left:0;right:0;top:0;height:clamp(190px,19.5vw,250px); z-index:1;pointer-events:none} .s-cream .drift-veil{background:linear-gradient(180deg,rgba(255,248,241,.26) 0%,rgba(255,248,241,.66) 52%,var(--bone) 92%)} .s-paper .drift-veil{background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.66) 52%,var(--paper) 92%)} .s-authority .drift-veil{background:linear-gradient(180deg,rgba(9,3,43,.26) 0%,rgba(9,3,43,.68) 52%,var(--authority) 92%)} .drift-host>.wrap{position:relative;z-index:2} @media(prefers-reduced-motion:reduce){.drift-rail{animation:none}} /* ---------- HERO -------------------------------------------- */ .hero-v6{position:relative;overflow:hidden;background:var(--bone); padding-block:clamp(42px,5.4vw,76px) clamp(46px,5.6vw,76px)} .hero-v6::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 46% at 12% 4%,rgba(54,214,231,.12),transparent 64%)} .hero-v6>*{position:relative;z-index:1} .hero-v6-grid{display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,64px);align-items:center} @media(max-width:960px){.hero-v6-grid{grid-template-columns:1fr;gap:clamp(30px,5vw,42px)}} .hero-v6 .h1{margin-bottom:1.05rem;max-width:15ch} .hero-v6 .sub{max-width:45ch;margin-bottom:1.8rem} .role{color:var(--red);font-weight:600;border-bottom:2px solid rgba(231,29,54,.3); white-space:nowrap;transition:opacity .22s ease} @media(max-width:960px){ .hero-v6 .hero-copy{text-align:left} .hero-v6 .hero-copy .sub{margin-inline:0} .hero-v6 .hero-actions{justify-content:flex-start} } /* the artefact: a white card on bone, with real controls */ .artefact{background:var(--paper);border:1px solid var(--line); box-shadow:0 26px 60px -32px rgba(9,3,43,.42);padding:clamp(15px,1.8vw,20px); max-width:432px;margin-inline:auto;width:100%; --pbg:#0F4F52;--pin:#FFFFFF;--pac:#7FD8C9} .ctrl{margin-bottom:.9rem} .ctrl-lab{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:.5rem} .ind-tabs{display:flex;gap:5px;flex-wrap:wrap} .ind-tabs button{font-size:.76rem;font-weight:500;padding:.42em .8em;cursor:pointer; border:1px solid var(--line-strong);background:var(--paper);color:var(--muted); border-radius:99em;transition:all .18s var(--out)} .ind-tabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .sw-row{display:flex;gap:7px} .sw{width:26px;height:26px;flex:none;border:2px solid transparent;cursor:pointer;padding:0; border-radius:7px;box-shadow:inset 0 0 0 1px rgba(9,3,43,.1);transition:box-shadow .18s var(--out)} .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--navy-text)} .sw:focus-visible{outline:2px solid var(--navy-text);outline-offset:3px} .ctrl-row{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;align-items:flex-start} .ctrl-row .ctrl{flex:0 0 auto} .fmt-row{display:flex;gap:1.1rem;margin-top:.85rem;flex-wrap:wrap} .fmt{font-size:.74rem;font-weight:500;color:var(--muted);background:none;border:none; padding:.1rem 0 .3rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .18s var(--out)} .fmt:hover{color:var(--ink)} .fmt[aria-pressed="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--red)} .artefact-note{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;padding-top:.7rem; border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)} .artefact-note svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--evidence); stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} /* ---------- POST ARTWORK: four formats, 4:5 ---------------- */ .pa{--pbg:#0F4F52;--pin:#fff;--pac:#7FD8C9;background:var(--pbg);color:var(--pin); aspect-ratio:4/5;padding:clamp(14px,1.7vw,20px);display:flex;flex-direction:column; border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(16,47,56,.09); transition:background .42s var(--out),color .42s var(--out)} .pa.dark{box-shadow:none} .pa .k{font-size:.52rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; opacity:.74;margin-bottom:.5rem} .pa .hd{font-family:var(--display);font-weight:600;letter-spacing:-.022em; font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.1} .pa .big{font-family:var(--display);font-weight:600;letter-spacing:-.04em; font-size:clamp(1.9rem,3vw,2.5rem);line-height:.98;color:var(--pac);margin-top:auto} .pa .subl{font-family:var(--display);font-weight:600;font-size:clamp(.96rem,1.4vw,1.1rem); line-height:1.12;letter-spacing:-.02em} .pa .ft{font-size:.6rem;line-height:1.35;opacity:.76;margin-top:.5rem} .pa .rows{margin-top:auto;display:grid} .pa .rw{display:flex;justify-content:space-between;gap:.5rem;font-size:.6rem; padding:.36rem 0;border-top:1px solid rgba(0,0,0,.12)} .pa.dark .rw{border-top-color:rgba(255,255,255,.22)} .pa .rw b{font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--pac)} .pa .logo{margin-top:.6rem;font-size:.46rem;font-weight:700;letter-spacing:.12em;opacity:.6} .pa .shot{flex:1;margin-top:.55rem;border-radius:6px;position:relative;overflow:hidden; background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.05)); display:grid;place-items:center} .pa .shot::before{content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.22) 1.6px,transparent 1.8px); background-size:11px 11px} .pa .shot span{position:relative;font-size:.5rem;font-weight:700;letter-spacing:.12em;opacity:.7} .pa .pbars{margin-top:auto;display:grid;gap:.55rem} .pa .pb .t{display:flex;justify-content:space-between;align-items:baseline;font-size:.58rem; opacity:.75;margin-bottom:.22rem} .pa .pb .t b{font-family:var(--display);font-weight:600;font-size:1.02rem;opacity:1;letter-spacing:-.03em} .pa .pb .tr{height:7px;border-radius:2px;background:rgba(255,255,255,.2)} .pa:not(.dark) .pb .tr{background:rgba(16,47,56,.1)} .pa .pb .fl{height:100%;border-radius:2px;background:var(--pac)} /* hero post is bigger, so it gets its own scale */ .artefact .pa{padding:clamp(20px,2.4vw,26px)} .artefact .pa .k{font-size:.6rem;margin-bottom:.7rem} .artefact .pa .hd{font-size:clamp(1.4rem,2.3vw,1.8rem)} .artefact .pa .big{font-size:clamp(2.6rem,4vw,3.3rem)} .artefact .pa .subl{font-size:clamp(1.14rem,1.8vw,1.35rem)} .artefact .pa .ft{font-size:.72rem} .artefact .pa .rw{font-size:.74rem;padding:.5rem 0} .artefact .pa .rw b{font-size:1.08rem} .artefact .pa .pb .t{font-size:.72rem} .artefact .pa .pb .t b{font-size:1.4rem} .artefact .pa .pb .tr{height:10px} .artefact .pa .logo{font-size:.54rem} .artefact .pa .shot span{font-size:.58rem} /* ---------- PRESS STRIP — full bleed, no heading ----------- */ .seen-rail{display:flex;align-items:center;gap:clamp(18px,3vw,42px);flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none;padding-block:clamp(18px,2.2vw,26px)} .seen-rail::-webkit-scrollbar{display:none} .seen-rail img{height:26px;width:auto;flex:none;object-fit:contain; filter:grayscale(1) opacity(.45);transition:filter .2s var(--out)} .seen-rail img:hover{filter:none} .seen-lab{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);flex:none} /* ---------- WHERE YOU PUBLISH — teal, centred -------------- */ .chan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16); border-radius:var(--cut) 0 var(--cut) var(--cut);overflow:hidden; margin-top:clamp(26px,3.2vw,42px)} @media(max-width:860px){.chan-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.chan-grid{grid-template-columns:1fr}} .chan-cell{background:var(--evidence);padding:clamp(20px,2.4vw,28px);text-align:left} .chan-cell img{width:26px;height:26px;object-fit:contain;margin-bottom:.9rem; filter:brightness(0) invert(1)} .chan-cell h3{font-size:1.06rem;margin-bottom:.35rem} .chan-cell p{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.72)} .chan-foot{margin-top:clamp(20px,2.4vw,30px);font-size:.88rem;color:rgba(255,255,255,.72)} /* ---------- INDUSTRIES — recognition, not a card grid ------ */ .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px); margin-top:clamp(24px,3vw,38px)} @media(max-width:900px){.ind-grid{grid-template-columns:1fr}} .ind-panel{background:var(--paper);border:1px solid var(--line);overflow:hidden; display:flex;flex-direction:column;transition:box-shadow .22s var(--out)} .ind-panel:hover{box-shadow:0 22px 46px -28px rgba(9,3,43,.4)} .ind-bar{height:8px;background:var(--ic,#0F4F52)} .ind-in{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1} .ind-eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ic,#0F4F52);margin-bottom:.6rem} .ind-panel h3{font-size:clamp(1.2rem,1.7vw,1.4rem);margin-bottom:.5rem;max-width:18ch} .ind-panel>.ind-in>p{font-size:.92rem;color:var(--muted);margin-bottom:1.1rem} .ind-words{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.3rem; padding-top:1rem;border-top:1px solid var(--line)} .ind-words span{font-size:.74rem;font-weight:500;padding:.3em .68em;border-radius:99em; background:rgba(16,47,56,.045);color:var(--muted)} .ind-link{margin-top:auto;align-self:flex-start;font-size:.86rem;font-weight:600; color:var(--ic,#0F4F52);display:inline-flex;align-items:center;gap:.4rem} .ind-link:hover{color:var(--red-deep)} .ind-link i{display:block;width:16px;height:1.5px;background:currentColor; transition:width .2s var(--out)} .ind-link:hover i{width:26px} /* ---------- REVIEW WALL ------------------------------------ */ .wall{columns:4;column-gap:clamp(12px,1.5vw,18px);margin-top:clamp(24px,3vw,38px)} @media(max-width:1080px){.wall{columns:3}} @media(max-width:760px){.wall{columns:2}} @media(max-width:480px){.wall{columns:1}} .rev{break-inside:avoid;background:var(--bone);border:1px solid var(--line); padding:clamp(15px,1.7vw,19px);margin-bottom:clamp(12px,1.5vw,18px)} .s-cream .rev{background:var(--paper)} .rev-stars{display:flex;gap:2px;margin-bottom:.6rem} .rev-stars svg{width:13px;height:13px;fill:#E8A33D;flex:none} .rev p{font-size:.88rem;line-height:1.5;color:var(--ink);margin-bottom:.65rem} .rev .who{font-size:.78rem;color:var(--muted)} .rev .who b{color:var(--ink);font-weight:600} .wall-note{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; margin-top:clamp(18px,2.2vw,26px);font-size:.86rem;color:var(--muted)} .wall-note b{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink)} /* ---------- GETTING STARTED — the numbers live here -------- */ .timeline::before{background:var(--evidence);opacity:.25} .tl-marker{border-color:var(--evidence);color:var(--evidence)} .s-cream .tl-card{background:var(--paper)} .step-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,48px); align-items:start} @media(max-width:820px){.step-grid{grid-template-columns:1fr}} .step-stat{text-align:right;min-width:120px} @media(max-width:820px){.step-stat{text-align:left;display:flex;align-items:baseline;gap:.7rem}} .step-stat b{display:block;font-family:var(--display);font-weight:500;letter-spacing:-.045em; font-size:clamp(3rem,5.6vw,4.4rem);line-height:.86;color:var(--navy-text)} .step-stat span{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-top:.4rem;max-width:14ch;margin-left:auto} @media(max-width:820px){.step-stat span{margin-left:0;margin-top:0}} .payoff{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap; margin-top:clamp(22px,2.8vw,34px);padding:clamp(20px,2.4vw,28px); background:var(--evidence);color:#fff;border-radius:var(--cut) 0 var(--cut) var(--cut)} .payoff b{font-family:var(--display);font-weight:500;letter-spacing:-.045em; font-size:clamp(3rem,5.4vw,4.2rem);line-height:.86;flex:none} .payoff div{flex:1 1 260px} .payoff h3{font-size:1.15rem;margin-bottom:.25rem;color:#fff} .payoff p{font-size:.9rem;color:rgba(255,255,255,.75);margin:0} /* ---------- DECISION SAFETY MAP — three jobs, ruled -------- */ .jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18); margin-top:clamp(30px,3.6vw,46px)} @media(max-width:860px){.jobs{grid-template-columns:1fr}} .job{padding:clamp(26px,3vw,42px) clamp(20px,2.4vw,34px); border-left:1px solid rgba(255,255,255,.18)} .job:first-child{border-left:0;padding-left:0} @media(max-width:860px){ .job{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-left:0;padding-right:0} .job:first-child{border-top:0} } .job-top{display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem} .job-num{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%; border:1px solid rgba(255,255,255,.45);font-size:.8rem;font-weight:600;color:#fff} .job-lab{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--jt)} .job h3{font-size:clamp(1.35rem,2vw,1.7rem);margin-bottom:.55rem} .job>p{font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.62);margin-bottom:1.3rem;max-width:30ch} .job ul{display:grid;gap:.5rem} .job li{display:flex;align-items:center;gap:.6rem;font-size:.94rem;color:rgba(255,255,255,.9)} .job li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--jt)} .jobs-foot{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap; margin-top:clamp(24px,3vw,38px)} .jobs-foot .btn{margin-left:auto} .jobs-foot p{flex:1 1 320px;font-size:.92rem;color:rgba(255,255,255,.6);margin:0;max-width:52ch} /* ---------- COST — heading above, centred ------------------ */ .cost{position:relative;display:grid; grid-template-columns:minmax(120px,1.05fr) 1.15fr 1fr 1fr;align-items:stretch; margin-top:clamp(26px,3.2vw,42px)} .cost-card{grid-column:2;grid-row:1/7;background:var(--bone); box-shadow:0 24px 54px -26px rgba(9,3,43,.42);border:1px solid var(--line); border-top:3px solid var(--red);margin:-18px -4px;z-index:0} .cost-cell{padding:.95rem;border-bottom:1px solid var(--line);font-size:.9rem; display:flex;align-items:center;position:relative;z-index:1} .cost-cell.hd{border-bottom:1.5px solid var(--navy);font-family:var(--body);font-weight:600; font-size:.98rem;color:var(--navy-text);padding-block:.85rem} .cost-cell.lab{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--muted)} .cost-cell.us{color:var(--ink);font-weight:600} .cost-cell.us.hd{color:var(--evidence)} .cost-cell.them{color:rgba(79,105,113,.75);background:rgba(16,47,56,.022)} .cost-cell.them.hd{font-weight:500} .cost .c1{grid-column:1}.cost .c2{grid-column:2}.cost .c3{grid-column:3}.cost .c4{grid-column:4} .cost .r1{grid-row:1}.cost .r2{grid-row:2}.cost .r3{grid-row:3} .cost .r4{grid-row:4}.cost .r5{grid-row:5}.cost .r6{grid-row:6} .cost-cta{grid-column:2;grid-row:6;display:flex;justify-content:center; padding:1.1rem .9rem 1.2rem;position:relative;z-index:1} .cost-note{font-size:.78rem;color:var(--muted);margin-top:clamp(24px,2.8vw,34px);text-align:center} @media(max-width:780px){ .cost{grid-template-columns:1fr;grid-auto-flow:row} .cost-card{display:none} .cost .c1,.cost .c2,.cost .c3,.cost .c4{grid-column:1} .cost .r1,.cost .r2,.cost .r3,.cost .r4,.cost .r5,.cost .r6{grid-row:auto} .cost-cta{grid-column:1;grid-row:auto} .cost-cell.hd{display:none} .cost-cell.lab{border-bottom:0;padding-bottom:.2rem;margin-top:.7rem} .cost-cell::before{content:attr(data-c);font-size:.72rem;font-weight:600;color:var(--muted); width:100px;flex:none} .cost-cell.lab::before{content:none} } /* ---------- PRICING — Signal carries the weight ------------ */ .plan-grid{align-items:stretch} .plan{background:var(--paper);border:1px solid var(--line);position:relative} .sig{display:flex;align-items:flex-end;gap:4px;height:24px;margin-bottom:1rem} .sig i{width:8px;display:block;background:rgba(16,47,56,.13);border-radius:2px; height:0;transition:height .55s var(--out)} .sig i:nth-child(2){transition-delay:90ms} .sig i:nth-child(3){transition-delay:180ms} .reveal.in .sig i:nth-child(1){height:34%} .reveal.in .sig i:nth-child(2){height:66%} .reveal.in .sig i:nth-child(3){height:100%} .sig.lv1 i:nth-child(1),.sig.lv2 i:nth-child(-n+2),.sig.lv3 i{background:var(--red)} .plan-price b{font-size:clamp(2.4rem,3.6vw,3rem)} .plan-sub{color:var(--muted)} .plan hr{border:0;border-top:1px solid var(--line);margin:1rem 0} .plan li::marker{content:""} .plan.hero-plan{background:var(--authority);border-color:var(--authority);color:#fff; box-shadow:0 30px 64px -30px rgba(9,3,43,.6);margin-block:clamp(-14px,-1.4vw,-8px)} .plan.hero-plan h3,.plan.hero-plan .plan-price b{color:#fff} .plan.hero-plan .desc,.plan.hero-plan .plan-sub{color:rgba(255,255,255,.66)} .plan.hero-plan hr{border-top-color:rgba(255,255,255,.2)} .plan.hero-plan li{color:#fff} .plan.hero-plan .sig i{background:rgba(255,255,255,.22)} .plan.hero-plan .sig.lv3 i{background:var(--red)} .plan.hero-plan .btn{background:#fff;color:var(--authority)} .plan.hero-plan .btn:link,.plan.hero-plan .btn:visited,.plan.hero-plan .btn:hover{color:var(--authority)} .plan.hero-plan .btn:hover{background:rgba(255,255,255,.88)} .plan ul{gap:.55rem} .plan li{display:flex;gap:.6rem;align-items:flex-start} .plan li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%; background:var(--red);margin-top:.52em} .plan li svg{display:none} /* ---------- FAQ -------------------------------------------- */ .faq-wrap{background:var(--bone);border:1px solid var(--line); padding:clamp(6px,1vw,14px) clamp(18px,2.2vw,30px);margin-top:clamp(22px,2.6vw,34px)} .s-cream .faq-wrap{background:var(--paper)} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:0} .faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.6rem 1.15rem 0;position:relative; font-family:var(--display);font-weight:600;font-size:clamp(1.06rem,1.4vw,1.2rem); line-height:1.24;color:var(--navy-text);transition:color .18s var(--out)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--red-deep)} .faq details[open] summary{color:var(--red-deep)} .faq summary::after{content:"";position:absolute;right:4px;top:1.5rem;width:12px;height:12px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);transition:transform .26s var(--out)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq .ans{padding:0 0 1.2rem;font-size:.95rem;line-height:1.6;color:var(--muted);max-width:64ch} /* ---------- CLOSE ------------------------------------------ */ .cta-band h2{margin-bottom:.9rem} .cta-band .sub{margin-inline:auto;margin-bottom:1.8rem;max-width:44ch} .capture input{border-radius:99em} /* ============================================================ v5.1 — hero meta, custom colour, review wall ============================================================ */ /* the fifth swatch is a real picker */ .sw-custom{position:relative;display:grid;place-items:center;cursor:pointer; background:conic-gradient(from 210deg,#E11B33,#E8A33D,#1D6F4B,#1B93AE,#6C4AB6,#E11B33); box-shadow:inset 0 0 0 1px rgba(9,3,43,.14)} .sw-custom::after{content:"";width:9px;height:9px;border-radius:50%; background:var(--paper);box-shadow:0 0 0 1px rgba(9,3,43,.16)} .sw-custom.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--navy-text)} .sw-custom.on::after{display:none} .sw-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%; border:none;padding:0;cursor:pointer} /* what the post is about, and what it is doing */ .meta-row{display:flex;gap:0;margin-top:.9rem;border-top:1px solid var(--line)} .meta{flex:1 1 0;padding:.75rem .2rem .2rem;min-width:0} .meta+.meta{border-left:1px solid var(--line);padding-left:.9rem} .meta-lab{display:block;font-size:.6rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .meta-val{display:block;font-family:var(--display);font-weight:600;font-size:.98rem; line-height:1.2;letter-spacing:-.01em;color:var(--navy-text)} .meta:last-child .meta-val{color:var(--evidence)} /* review wall — a wall, with an edge */ .wall-frame{position:relative;max-height:clamp(430px,44vw,560px);overflow:hidden; margin-top:clamp(24px,3vw,38px)} .wall-fade{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0),var(--paper) 86%)} .s-cream .wall-fade{background:linear-gradient(180deg,rgba(255,248,241,0),var(--bone) 86%)} .wall-cta{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; margin-top:-14px;position:relative;z-index:2} .rev-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem; margin-bottom:.6rem} .rev-src{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(79,105,113,.55)} .rev-lead{background:var(--evidence);border-color:var(--evidence);color:#fff} .s-paper .rev.rev-lead,.s-cream .rev.rev-lead{background:var(--evidence)} .rev-lead .rev-score{font-family:var(--display);font-weight:500;letter-spacing:-.04em; font-size:clamp(2.8rem,4.4vw,3.6rem);line-height:.9;margin-bottom:.5rem} .rev-lead p{color:rgba(255,255,255,.82);font-size:.86rem;margin-bottom:0} .rev-lead .rev-src{color:rgba(255,255,255,.55)} .rev-lead .rev-stars svg{fill:#fff} /* industries and the review wall sit back to back — give them air */ #industries{padding-bottom:clamp(60px,7vw,104px)} /* ============================================================ v6 — floating hero controls, industries on teal, animated steps, annual pricing ============================================================ */ /* ---------- HERO STAGE: post first, controls hovering ------ */ .stage{position:relative;padding-left:clamp(0px,14vw,200px)} .stage-post{max-width:368px;margin-left:auto} .stage-post .pa{box-shadow:0 30px 70px -34px rgba(9,3,43,.52);border-radius:12px} .stage .meta-row,.stage .artefact-note{max-width:368px;margin-left:auto} .stage .artefact-note{border-top:0;padding-top:0;margin-top:.7rem} .ctrl-card{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:3; width:192px;background:var(--paper);border:1px solid var(--line); border-radius:var(--cut) 0 var(--cut) var(--cut);padding:16px 16px 18px; box-shadow:0 26px 54px -26px rgba(9,3,43,.44)} .ctrl-hint{display:inline-flex;align-items:center;gap:.36rem;font-size:.62rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--red);background:var(--red-pale); padding:.34em .7em;border-radius:99em;margin-bottom:.95rem} .ctrl-hint svg{width:11px;height:11px;fill:currentColor} .ctrl-card .ctrl+.ctrl{margin-top:.95rem;padding-top:.95rem;border-top:1px solid var(--line)} .ctrl-card .ctrl{margin-bottom:0} .ctrl-card .ind-tabs{flex-direction:column;align-items:stretch;gap:4px} .ctrl-card .ind-tabs button{text-align:left} @media(max-width:960px){ .stage{padding-left:0} .stage-post,.stage .meta-row,.stage .artefact-note{max-width:none;margin-left:0} .ctrl-card{position:static;transform:none;width:auto;margin-bottom:14px;box-shadow:none} .ctrl-card .ind-tabs{flex-direction:row;flex-wrap:wrap} } /* ---------- INDUSTRIES ON TEAL ----------------------------- */ .ind-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,3vw,54px); align-items:end;margin-bottom:clamp(26px,3.2vw,42px)} @media(max-width:860px){.ind-head{grid-template-columns:1fr;gap:14px}} .ind-head .sub{margin:0} .s-evidence .ind-panel{background:var(--paper);border:0;box-shadow:0 22px 48px -30px rgba(3,24,26,.6)} .s-evidence .ind-panel h3{color:var(--navy-text)} .s-evidence .ind-panel p{color:var(--muted)} .s-evidence .ind-panel:hover{box-shadow:0 30px 60px -28px rgba(3,24,26,.72)} .ind-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center; background:color-mix(in srgb,var(--ic) 10%,transparent);margin-bottom:1rem} .ind-ico svg{width:26px;height:26px;fill:none;stroke:var(--ic);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .ind-words{gap:5px} .ind-words span{font-size:.72rem;padding:.28em .62em;background:color-mix(in srgb,var(--ic) 8%,transparent); color:var(--muted)} /* ---------- STEPS, ANIMATED -------------------------------- */ .steps{position:relative;padding-left:clamp(48px,5vw,62px);margin-top:clamp(30px,3.8vw,48px)} .steps .line{position:absolute;left:clamp(18px,2.3vw,23px);top:10px;bottom:34px;width:2px; background:rgba(15,79,82,.14);overflow:hidden} .steps .line span{display:block;height:100%;background:var(--evidence); transform:scaleY(0);transform-origin:top;transition:transform 1.15s cubic-bezier(.4,0,.2,1)} .steps.run .line span{transform:scaleY(1)} .step{position:relative;padding-bottom:clamp(28px,3.4vw,46px)} .step:last-child{padding-bottom:0} .step-mark{position:absolute;left:calc(clamp(48px,5vw,62px) * -1);top:0; width:clamp(36px,4.6vw,46px);height:clamp(36px,4.6vw,46px);border-radius:50%; border:2px solid var(--evidence);background:var(--paper);display:grid;place-items:center; font-family:var(--display);font-weight:600;font-size:1rem;color:var(--evidence); opacity:0;transform:scale(.55);transition:opacity .38s var(--out),transform .38s var(--out)} .step-body{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(18px,3vw,46px); align-items:start;opacity:0;transform:translateY(14px); transition:opacity .5s var(--out),transform .5s var(--out)} .steps.run .step-mark{opacity:1;transform:scale(1)} .steps.run .step-body{opacity:1;transform:none} .steps.run .step:nth-child(2) .step-mark{transition-delay:.12s} .steps.run .step:nth-child(2) .step-body{transition-delay:.2s} .steps.run .step:nth-child(3) .step-mark{transition-delay:.52s} .steps.run .step:nth-child(3) .step-body{transition-delay:.6s} .steps.run .step:nth-child(4) .step-mark{transition-delay:.92s} .steps.run .step:nth-child(4) .step-body{transition-delay:1s} .step-body h3{margin-bottom:.3rem} .step-text p{font-size:.95rem;color:var(--muted);max-width:46ch;margin:0} @media(max-width:860px){.step-body{grid-template-columns:1fr;gap:16px}} .step-card{background:var(--bone);border:1px solid var(--line);padding:clamp(15px,1.8vw,20px);border-radius:var(--cut) 0 var(--cut) var(--cut)} .s-cream .step-card{background:var(--paper)} .step-lab{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-bottom:.7rem} .steps .chips{display:flex;flex-wrap:wrap;gap:6px} .steps .chips span{font-size:.76rem;padding:.34em .74em;border-radius:99em;border:1px solid var(--line-strong); color:var(--muted);opacity:0;transform:translateY(5px); transition:opacity .3s var(--out),transform .3s var(--out),background .3s var(--out),color .3s var(--out)} .steps.run .chips span{opacity:1;transform:none} .steps.run .chips span:nth-child(1){transition-delay:.42s} .steps.run .chips span:nth-child(2){transition-delay:.5s} .steps.run .chips span:nth-child(3){transition-delay:.58s} .steps.run .chips span:nth-child(4){transition-delay:.66s} .steps.run .chips span:nth-child(5){transition-delay:.74s} .steps.run .chips span:nth-child(6){transition-delay:.82s} .steps.run .chips span:nth-child(-n+3){background:var(--evidence);border-color:var(--evidence);color:#fff} .conn{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.52rem 0;border-bottom:1px solid var(--line);font-size:.9rem} .conn:last-child{border-bottom:0} .conn b{font-size:.78rem;font-weight:600;color:var(--evidence);display:inline-flex; align-items:center;gap:.4rem;opacity:0;transform:translateX(6px); transition:opacity .3s var(--out),transform .3s var(--out)} .conn b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--evidence)} .steps.run .conn:nth-child(1) b{opacity:1;transform:none;transition-delay:.82s} .steps.run .conn:nth-child(2) b{opacity:1;transform:none;transition-delay:.96s} .steps.run .conn:nth-child(3) b{opacity:1;transform:none;transition-delay:1.1s} .steps.run .conn:nth-child(4) b{opacity:1;transform:none;transition-delay:1.24s} .approve{display:flex;gap:.6rem;flex-wrap:wrap} .step-queue{font-size:.78rem;color:var(--muted);margin:.8rem 0 0;text-align:center} /* ---------- PLATFORMS ON A LIGHT GROUND -------------------- */ .s-cream .chan-grid,.s-paper .chan-grid{background:var(--line);border-color:var(--line)} .s-cream .chan-cell{background:var(--paper)} .s-paper .chan-cell{background:var(--bone)} .s-cream .chan-cell p,.s-paper .chan-cell p{color:var(--muted)} .s-cream .chan-cell img,.s-paper .chan-cell img{filter:none;width:28px;height:28px} .s-cream .chan-foot,.s-paper .chan-foot{color:var(--muted)} .s-cream .chan-foot a,.s-paper .chan-foot a{color:var(--evidence); border-bottom:1.5px solid var(--line-strong);padding-bottom:2px} /* ---------- PRICING: MONTHLY AND ANNUAL -------------------- */ .price-head{display:flex;align-items:flex-end;justify-content:space-between; gap:clamp(16px,3vw,40px);flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px)} .bill-wrap{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .bill-save{font-size:.78rem;font-weight:600;color:var(--evidence);opacity:.55; transition:opacity .2s var(--out)} .billing-toggle button{cursor:pointer;border-radius:99em} .plan-price b,.plan-sub{transition:opacity .16s var(--out)} .plan-price b.swap,.plan-sub.swap{opacity:0} /* ============================================================ v6.1 — press rail inside the hero, is/isn't on the teal ============================================================ */ /* the logo rail shares the hero's ground, so it reads as one band */ .seen-band{margin-top:clamp(30px,4vw,56px);padding-top:clamp(10px,1.4vw,18px); border-top:1px solid var(--line)} .seen-band .seen-rail{padding-block:clamp(10px,1.4vw,16px)} .hero-v6{padding-bottom:clamp(30px,3.6vw,50px)} /* what it is, what it is not — on the teal, no cards */ .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18); border-radius:var(--cut) 0 var(--cut) var(--cut);overflow:hidden; margin-top:clamp(26px,3.2vw,42px)} @media(max-width:780px){.cmp-grid{grid-template-columns:1fr}} .cmp-cell{background:var(--evidence);padding:clamp(22px,2.8vw,36px)} .cmp-cell h3{color:#fff;margin-bottom:.45rem} .cmp-cell>p{font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.66); margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.18)} .cmp-cell ul{display:grid;gap:.75rem;margin:0;padding:0;list-style:none} .cmp-cell li{display:flex;align-items:flex-start;gap:.75rem;font-size:.95rem; line-height:1.45;color:#fff} .cmp-cell li svg{width:16px;height:16px;flex:none;margin-top:.2em;fill:none; stroke:var(--tint-justify);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .cmp-cell.no li{color:rgba(255,255,255,.62)} .cmp-cell.no li svg{stroke:var(--tint-threat)} /* ============================================================ v6.2 — control reset The theme (and Elementor's kit stylesheet) sets background, colour and tap-highlight on bare