/* Apexure design system, direction D ("Stage"). September 2026. One stylesheet for every new template. Tokens first, then base type and buttons, the header, the hero and its variants, section patterns, lists, the article, the footer. Page-only patterns live in d-templates.css. Fonts: Plus Jakarta Sans (display), Inter (body), IBM Plex Mono (labels). Light theme only; the site is light. Open decisions carried as attributes on : data-cta="gold|orange|green|sky|lime", data-hero="purple|light". */ :root{ --bg:#ffffff; --bg-2:#f6f4fb; --ink:#171233; --ink-2:#4a4563; --muted:#7c7792; --line:#e6e2f0; --purple:#410099; --purple-2:#5a1fd0; --azulado:#231e46; --magenta:#8a1a9b; --lilac:#efe9fb; --light-vision:#dcdae9; --display:"Plus Jakarta Sans",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --h1-size:clamp(44px,6.6vw,90px); --h1-ls:-.045em; --h1-lh:1; --h1-w:600; --h2-w:600; --h3-w:700; --num-w:700; --h2-ls:-.03em; --max:1180px; --straddle:100px; /* action colour: the only thing on the page that uses it is a call to action */ --cta:#ffb600; --cta-hover:#f0ab00; --cta-ink:#231e46; --stars:#ffb600; /* hero surface */ --hero-bg:radial-gradient(55% 60% at 85% 0%,rgba(138,26,155,.6),transparent 65%),radial-gradient(45% 45% at 5% 100%,rgba(90,31,208,.55),transparent 65%),linear-gradient(180deg,#2b0d6e 0%,#410099 55%,#37088a 100%); --hero-ink:#fff; --hero-sub:#dccff6; --hero-micro:#c9b9f0; --grain:.07; --chip-shadow:0 20px 44px rgba(14,4,50,.32); --chip-border:transparent; --frame-shadow:0 50px 100px rgba(14,4,50,.5),0 0 0 1px rgba(255,255,255,.14); --sec-color:#fff; --sec-border:rgba(255,255,255,.55); --sec-hover:rgba(255,255,255,.1); } :root[data-cta="orange"]{--cta:#F46036;--cta-hover:#e2532b;--cta-ink:#231e46} :root[data-cta="green"]{--cta:#04A777;--cta-hover:#03996d;--cta-ink:#0e1f1a} :root[data-cta="sky"]{--cta:#3fc9ff;--cta-hover:#2bbdf7;--cta-ink:#231e46} :root[data-cta="lime"]{--cta:#31F03C;--cta-hover:#29d934;--cta-ink:#0e1f1a} :root[data-hero="light"]{ --hero-bg:radial-gradient(60% 50% at 85% 0%,rgba(65,0,153,.10),transparent 60%),linear-gradient(180deg,#f7f5fc 0%,#efecf7 100%); --hero-ink:var(--ink); --hero-sub:var(--ink-2); --hero-micro:var(--muted); --grain:0; --chip-shadow:0 14px 34px rgba(14,4,50,.12); --chip-border:var(--line); --frame-shadow:0 30px 70px rgba(14,4,50,.16),0 0 0 1px var(--line); --sec-color:var(--purple); --sec-border:rgba(65,0,153,.4); --sec-hover:rgba(65,0,153,.06); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:4px} img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:0 auto;padding:0 32px} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);font-weight:500} h1,h2,h3{font-family:var(--display);font-weight:var(--h2-w);letter-spacing:var(--h2-ls);text-wrap:balance;margin:0} h1{font-size:var(--h1-size);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);font-weight:var(--h1-w)} h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08} h3{font-size:20px;letter-spacing:-.015em;line-height:1.25;font-weight:var(--h3-w)} p{margin:0} .lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:56ch} .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:16px;padding:15px 24px;border-radius:999px;border:1.5px solid transparent;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;min-height:48px} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)} .btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)} .btn-secondary{background:transparent;color:var(--sec-color);border-color:var(--sec-border)} .btn-secondary:hover{background:var(--sec-hover)} .btn-outline{background:transparent;color:var(--purple);border-color:rgba(65,0,153,.35)} .btn-outline:hover{background:rgba(65,0,153,.06)} .btn svg{transition:transform .15s} .btn:hover svg{transform:translateX(3px)} .arrow{color:var(--purple);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px} .arrow svg{transition:transform .15s} .arrow:hover svg{transform:translateX(3px)} /* nav */ .nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center} .brand img{height:24px;width:auto;display:block} @media(max-width:640px){.brand img{height:19px}} .nav .wrap{position:relative} .nav .right{display:flex;align-items:center;gap:10px} .nav .btn{padding:11px 18px;font-size:15px;white-space:nowrap;min-height:44px} .nav .btn .short{display:none} .menu{display:flex;gap:2px;align-items:center;list-style:none;margin:0;padding:0} .menu>li{position:relative} .menu>li.has-mega{position:static} .menu .top{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:999px;font:500 15px/1 var(--body);color:var(--ink-2);background:none;border:0;cursor:pointer} .menu .top svg{width:14px;height:14px;transition:transform .15s;opacity:.7} .menu .top:hover,.menu>li.open>.top{color:var(--purple);background:var(--bg-2)} .menu>li.open>.top svg{transform:rotate(180deg)} .panel{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(14,4,50,.16);padding:10px;display:none;z-index:50} .menu>li.open>.panel{display:block} .panel.simple{min-width:270px} .panel.simple a{display:block;padding:10px 12px;border-radius:10px;font-size:14px;color:var(--ink-2);white-space:nowrap} .panel.simple a:hover{background:var(--bg-2);color:var(--purple)} .panel .ext{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:6px;letter-spacing:.04em} .panel.mega{left:32px;right:32px;padding:22px;grid-template-columns:repeat(4,1fr) 250px;gap:8px 22px} .menu>li.open>.panel.mega{display:grid} .grp .hub{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);padding:8px 10px 2px;border-radius:10px;letter-spacing:-.01em} .grp .hub:hover{color:var(--purple)} .grp .blurb{font-size:13px;color:var(--muted);padding:0 10px 8px;line-height:1.45} .grp a.it{display:block;font-size:14px;color:var(--ink-2);padding:7px 10px;border-radius:8px} .grp a.it:hover{background:var(--bg-2);color:var(--purple)} .grp a.it.all{color:var(--purple);font-weight:600} .feat{background:var(--azulado);color:#fff;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px} .feat .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#c9a8ff} .feat b{display:block;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.02em} .feat p{font-size:13px;color:#cfc9e6;line-height:1.5;flex:1} .feat .btn{align-self:flex-start;padding:10px 16px;font-size:14px;min-height:40px} .burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer} .burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .2s} .burger span::before{top:-6px}.burger span::after{top:6px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} .sheet{display:none;position:fixed;inset:72px 0 0 0;background:#fff;z-index:45;overflow:auto;padding:12px 20px 40px} .sheet.open{display:block} .sheet details{border-bottom:1px solid var(--line)} .sheet summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:600 17px/1.2 var(--display);color:var(--ink)} .sheet summary::-webkit-details-marker{display:none} .sheet summary svg{width:16px;height:16px;transition:transform .15s;opacity:.6} .sheet details[open] summary svg{transform:rotate(180deg)} .sheet .sub{padding:0 0 12px} .sheet .sub .hub{display:block;font-weight:600;font-size:15px;color:var(--ink);padding:10px 0 2px} .sheet .sub a.it{display:block;font-size:15px;color:var(--ink-2);padding:8px 0 8px 14px} .sheet .sub a.it.all{color:var(--purple);font-weight:600} .sheet .sub a.one{display:block;font-size:15px;color:var(--ink-2);padding:9px 0} .sheet .sheet-cta{margin-top:20px;display:flex;flex-direction:column;gap:12px} .sheet .sheet-cta .btn{justify-content:center} .sheet .sheet-cta small{color:var(--muted);font-size:13px;text-align:center} .sheet .contact{margin-top:22px;font-size:14px;color:var(--ink-2);display:grid;gap:4px} @media(max-width:900px){.menu{display:none}.burger{display:inline-flex}} @media(max-width:640px){.nav .btn .long{display:none}.nav .btn .short{display:inline}.nav .btn{padding:10px 14px;font-size:14px;min-height:40px}.nav .right{gap:8px}.sheet{inset:72px 0 0 0}} /* hero: the stage */ section{padding:96px 0} section.hero{position:relative;z-index:0;color:var(--hero-ink);padding:72px 0 0;overflow:visible} .hero::before{content:"";position:absolute;inset:0 0 var(--straddle) 0;z-index:-2;background:var(--hero-bg)} .hero::after{content:"";position:absolute;inset:0 0 var(--straddle) 0;z-index:-1;opacity:var(--grain);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} .hero-top{text-align:center;max-width:900px;margin:0 auto;padding-bottom:52px} .hero-top h1{color:var(--hero-ink)} .hero-top .sub{font-size:19px;color:var(--hero-sub);margin:22px auto 0;max-width:58ch;text-wrap:balance} .hero-top .ctas{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:32px} .hero-top .micro{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 0;margin-top:16px;font-size:14px;color:var(--hero-micro)} .hero-top .micro span+span::before{content:"·";margin:0 10px;opacity:.7} .hero-top .trust{margin-top:22px;font-size:14px;color:var(--hero-sub);display:inline-flex;align-items:center;gap:10px} .hero-top .trust .stars{color:var(--stars);letter-spacing:2px;font-size:13px} .stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 336px;align-items:start} .frame{border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--frame-shadow);animation:rise .8s cubic-bezier(.2,.7,.2,1) both} .frame .chrome{height:38px;background:#f3f1f8;border-bottom:1px solid #e6e2f0;display:flex;align-items:center;gap:6px;padding:0 14px} .frame .chrome i{width:10px;height:10px;border-radius:50%;background:#d9d3e8} .frame .chrome span{margin-left:12px;flex:1;background:#fff;border-radius:6px;padding:4px 12px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .frame img{width:100%;height:auto} .frame .chrome .short{display:none} @media(max-width:640px){.frame .chrome .long{display:none}.frame .chrome .short{display:inline}} .trace{list-style:none;margin:0 0 0 -48px;padding:28px 0 0;position:relative;z-index:2} .chip{position:relative;background:#fff;color:var(--ink);border-radius:12px;padding:13px 16px 13px 18px;box-shadow:var(--chip-shadow);border:1px solid var(--chip-border);display:grid;gap:2px;grid-template-areas:"k" "b" "d";margin:0 0 14px;animation:pop .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.55s + var(--i) * .3s)} .chip .k{grid-area:k;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)} .chip b{grid-area:b;font-family:var(--display);font-weight:var(--num-w);font-size:22px;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap} .chip .d{grid-area:d;font-size:13px;color:var(--ink-2);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .trace .cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-micro);margin:12px 0 0 66px;line-height:1.6} .trace .cap span{display:block} @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.frame,.chip{animation:none}} /* proof strip */ .proof{padding:56px 0 0} .proof .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.6;margin-bottom:22px} .proof .logos{display:flex;gap:28px 40px;align-items:center;flex-wrap:wrap;justify-content:space-between} .proof .logos img{height:22px;width:auto;filter:brightness(0) opacity(.5)} .proof .logos img.tall{height:28px} /* sections */ .head{max-width:640px;margin-bottom:48px} .head p{margin-top:16px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px} .quote-card{background:var(--bg-2);border-radius:20px;padding:30px 30px 26px;display:flex;flex-direction:column;gap:16px} .quote-card q{quotes:"“" "”";font-family:var(--display);font-weight:var(--h2-w);font-size:24px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)} .quote-card .fix{color:var(--ink-2);font-size:16px;padding-top:14px;border-top:1px solid var(--line)} .quote-card .fix b{color:var(--purple);font-weight:500;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:6px} /* what you own */ .own{background:var(--bg-2)} .own .card{background:#fff;min-height:250px;display:flex;flex-direction:column;gap:10px} .own .card .ic{width:40px;height:40px;border-radius:12px;background:var(--lilac);display:grid;place-items:center;color:var(--purple);margin-bottom:6px} .own .card p{color:var(--ink-2);font-size:15px;flex:1} .own .card .rcpt{font-family:var(--mono);font-size:12px;color:var(--purple);border-top:1px solid var(--line);padding-top:12px;letter-spacing:.02em;line-height:1.5} /* evidence band */ .evidence{background:var(--azulado);color:#fff} .evidence .head{color:#fff} .evidence .head p,.evidence .lede{color:#cfc9e6} .evidence .eyebrow{color:#c9a8ff} .evidence .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .hypo{background:#fff;color:var(--ink);border-radius:20px;padding:26px;box-shadow:0 30px 60px rgba(0,0,0,.35)} .hypo .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:12px} .hypo .k span:last-child{color:#04A777} .hypo .h{font-family:var(--display);font-weight:var(--h2-w);font-size:22px;line-height:1.3;margin:12px 0 18px;letter-spacing:-.015em} .hypo .h mark{background:linear-gradient(transparent 62%,rgba(138,26,155,.28) 62%);color:inherit;padding:0 2px} .hypo dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;font-size:14px;margin:0} .hypo dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px} .hypo dd{margin:0;color:var(--ink-2)} .hypo dd b{color:var(--ink);font-weight:600} .evidence ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px} .evidence li{display:grid;grid-template-columns:28px 1fr;gap:14px;color:#e6e2f4;font-size:16px;line-height:1.5} .evidence li i{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:#c9a8ff;font-style:normal} .evidence li b{color:#fff;font-weight:600} /* results */ .results .row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .res{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease} .res:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(14,4,50,.1)} .res img{aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line);width:100%} .res .b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1} .res .when{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .res .n{font-family:var(--display);font-weight:var(--num-w);font-size:30px;letter-spacing:-.025em;color:var(--purple);font-variant-numeric:tabular-nums;line-height:1} .res .n small{font-size:14px;letter-spacing:0;color:var(--muted);font-family:var(--body);font-weight:500;margin-left:6px} .res .w{font-size:15px;color:var(--ink-2);flex:1} .res .arrow{margin-top:6px} .results .more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px} .mini{border-top:2px solid var(--purple);padding:16px 4px 0;font-size:15px;color:var(--ink-2)} .mini b{display:block;font-family:var(--display);font-weight:var(--num-w);font-size:22px;color:var(--ink);letter-spacing:-.02em;margin-bottom:4px;font-variant-numeric:tabular-nums} /* recent work strip */ .work-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:72px 0 22px} .work-head h3{font-size:24px;letter-spacing:-.02em} .work-head p{color:var(--muted);font-size:15px;margin-top:4px} .work-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .wk{display:flex;flex-direction:column;gap:10px} .wk img{aspect-ratio:4/3;object-fit:cover;object-position:top;width:100%;border:1px solid var(--line);border-radius:12px;transition:transform .15s ease} .wk:hover img{transform:translateY(-2px)} .wk b{font-size:14px;font-weight:600;display:block;line-height:1.3} .wk span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-top:3px} /* mid-page call to action */ .midcta{margin-top:72px;background:var(--bg-2);border-radius:24px;padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center} .midcta h3{font-size:24px;letter-spacing:-.02em} .midcta p{color:var(--ink-2);margin-top:6px;max-width:60ch} .midcta .r{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .midcta small{font-size:13px;color:var(--muted)} /* how we work */ .how{background:var(--bg-2)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff} .step{padding:26px 24px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px} .step:last-child{border-right:0} .step .num{font-family:var(--mono);font-size:12px;color:var(--purple);letter-spacing:.1em} .step .num span{color:var(--muted);margin-left:10px;letter-spacing:.06em} .step p{font-size:15px;color:var(--ink-2)} /* reviews */ .reviews .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .rev{border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:18px;background:#fff} .rev q{quotes:"“" "”";font-size:17px;line-height:1.55;color:var(--ink);flex:1} .rev .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)} .rev .who i{width:38px;height:38px;border-radius:50%;background:var(--lilac);color:var(--purple);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;font-style:normal;flex:none} .rev .who b{display:block;color:var(--ink);font-weight:600} .stars{color:var(--stars);letter-spacing:2px;font-size:14px} /* objections */ .faq{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px} .qa{border-top:2px solid var(--purple);padding-top:16px} .qa b{display:block;font-family:var(--display);font-weight:var(--h3-w);font-size:18px;letter-spacing:-.015em;margin-bottom:8px} .qa p{color:var(--ink-2);font-size:15px} /* final call to action */ section.cta{padding:0 0 96px} .cta .box{background:radial-gradient(60% 80% at 90% 0%,rgba(138,26,155,.55),transparent 60%),linear-gradient(135deg,#2b0d6e 0%,#410099 100%);color:#fff;border-radius:28px;padding:64px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden} .cta h2{color:#fff} .cta p{color:#dcd2f3;margin-top:14px;font-size:17px} .cta .right{display:flex;flex-direction:column;gap:12px;align-items:flex-start;position:relative} .cta .right small{color:#cbbdf0;font-size:14px;line-height:1.5} footer{border-top:1px solid var(--line);background:var(--bg-2);padding:64px 0 28px;color:var(--ink-2);font-size:14px} footer a:hover{color:var(--purple)} .ftop{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;padding-bottom:40px;border-bottom:1px solid var(--line)} .ftop .fbrand p{margin-top:16px;max-width:44ch;color:var(--ink-2)} .fsocial{display:flex;gap:8px;margin-top:18px} .fsocial a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-2)} .fsocial a:hover{color:var(--purple);border-color:var(--purple)} .fsocial svg{width:16px;height:16px} .fcta{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .fcta b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);letter-spacing:-.02em} .fcta small{color:var(--muted);font-size:13px} .fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:40px 0 8px} .fcols h4{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em} .fcols h4 a{color:inherit} .fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .fcols li a{color:var(--ink-2)} .fcols .ext{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:6px;letter-spacing:.04em} .fcols .contact li{color:var(--ink-2)} .fcols .contact b{color:var(--ink);font-weight:600} .fmore{border-top:1px solid var(--line)} .fmore summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 0;font-weight:600;font-size:14px;color:var(--ink)} .fmore summary::-webkit-details-marker{display:none} .fmore summary svg{width:14px;height:14px;opacity:.6;transition:transform .15s} .fmore[open] summary svg{transform:rotate(180deg)} .fmore summary span{color:var(--muted);font-weight:400} .flinks{display:flex;flex-wrap:wrap;gap:6px 0;padding:0 0 16px} .flinks a{font-size:13px;color:var(--ink-2);padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;margin:0 6px 6px 0} .fbottom{margin-top:8px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:var(--muted)} .fbottom .legal{display:flex;gap:16px} @media(max-width:1100px){ section.hero{padding-bottom:48px} .hero::before,.hero::after{inset:0} .stage{grid-template-columns:1fr} .trace{margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .chip{margin:0;box-shadow:0 12px 30px rgba(14,4,50,.25)} .chip .d{white-space:normal} .trace .cap{grid-column:1/-1;margin-left:0} .proof{padding-top:40px} .work-row{grid-template-columns:repeat(3,1fr)} } @media(max-width:960px){ .grid-4,.results .row,.results .more,.reviews .grid-3,footer .cols{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line)} .evidence .wrap{grid-template-columns:1fr} .cta .box{grid-template-columns:1fr;padding:44px} .midcta{grid-template-columns:1fr} .fcols{grid-template-columns:1fr 1fr} .ftop{grid-template-columns:1fr} } @media(max-width:760px){ .trace{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .wrap{padding:0 20px} section{padding:64px 0} section.hero{padding:52px 0 40px} .hero-top{padding-bottom:36px} .hero-top .sub{font-size:17px} .hero-top .ctas .btn-primary,.hero-top .ctas .btn-secondary{width:100%;justify-content:center} .grid-2,.grid-4,.results .row,.results .more,.reviews .grid-3,footer .cols,.faq{grid-template-columns:1fr} .steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0} .proof .logos{gap:22px 28px;justify-content:flex-start} .proof .logos img{height:18px}.proof .logos img.tall{height:24px} .cta .box{padding:32px 24px;border-radius:20px} .midcta{padding:28px 22px;border-radius:20px} .ftop{grid-template-columns:1fr;gap:24px} .fcols{grid-template-columns:1fr;gap:26px;padding:32px 0 4px} .fcta .btn{width:100%;justify-content:center} .fbottom{flex-direction:column} .midcta .btn{width:100%;justify-content:center} .work-head{flex-direction:column;align-items:flex-start;margin-top:56px} .work-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none} .work-row::-webkit-scrollbar{display:none} .wk{flex:0 0 72vw;scroll-snap-align:start} } @media(max-width:520px){ .trace{grid-template-columns:1fr;gap:10px} .chip{grid-template-columns:1fr auto;grid-template-areas:"k b" "d b";align-items:center;column-gap:14px;padding:12px 16px} .chip b{font-size:20px;text-align:right} } /* ---- shared additions used by more than one template ---- */ /* kicker and standfirst */ .hero-top .sub{max-width:66ch} .hero-top .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-micro);margin-bottom:22px} .hero-top .kicker b{color:var(--hero-ink);font-weight:500} .hero-top .kicker a:hover{color:var(--hero-ink)} /* facts strip: six labelled facts under a hero */ .facts{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:20px;margin-top:56px;overflow:hidden} .facts div{padding:18px 20px;border-right:1px solid var(--line)} .facts div:last-child{border-right:0} .facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .facts dd{margin:0;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.35} .facts dd small{display:block;font-weight:400;color:var(--ink-2);font-size:13px;margin-top:2px} .facts dd a{color:var(--purple)} /* labelled cards in a row of three */ .inc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px} .in{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px} .in .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)} .in h3{font-size:18px} .in p{font-size:14.5px;color:var(--ink-2);line-height:1.55} /* big numbers */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px} .stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px 20px} .stat b{display:block;font-family:var(--display);font-weight:var(--num-w);font-size:44px;letter-spacing:-.035em;line-height:1;color:var(--purple);font-variant-numeric:tabular-nums} .stat .l{font-family:var(--display);font-weight:600;font-size:17px;margin-top:10px;letter-spacing:-.01em} .stat p{font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:6px} /* one person's words, with their photo */ .said{background:var(--bg-2)} .said .card{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start;padding:32px} .said img{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block} .said q{quotes:"\201C" "\201D";font-family:var(--display);font-weight:var(--h2-w);font-size:24px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);display:block} .said .who{margin-top:16px;font-size:14px;color:var(--muted)} .said .who b{display:block;color:var(--ink);font-weight:600} .said .stars{margin-bottom:12px} /* a quoted brief */ .brief{margin-top:20px;background:var(--bg-2);border-radius:20px;padding:30px 30px 26px} .brief q{quotes:"\201C" "\201D";font-family:var(--display);font-weight:var(--h2-w);font-size:24px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);max-width:30ch;display:block} .brief .src{display:block;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)} /* ledger table */ .ledger{width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:block;margin-top:36px} .ledger table{width:100%;border-collapse:collapse} .ledger th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);font-weight:500} .ledger td{padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2);vertical-align:top;line-height:1.5} .ledger tr:last-child td{border-bottom:0} .ledger td b{color:var(--ink);font-weight:600} .ledger td.s,.ledger td.f{font-family:var(--display);font-weight:600;color:var(--purple);white-space:nowrap;font-variant-numeric:tabular-nums} /* a row of chips with a label */ .platforms,.tools{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .platforms+.platforms{margin-top:10px} .platforms .lbl,.tools .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:6px} .platforms span,.tools span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13.5px;color:var(--ink-2)} .platforms span b{font-weight:600;color:var(--ink)} /* a note under a grid */ .steps-note,.rungs-note,.offers-note,.team-note,.measured{margin-top:16px;font-size:14px;color:var(--muted);max-width:80ch} .rungs-note a{color:var(--purple)} .team-note{text-align:center} /* a foot line under a related strip */ .work-more{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)} /* the landing page example callouts, class names kept from 326 markdown bodies */ /* callouts: class names kept from the current markdown bodies, so no content edits */ .lpe2-commentary{display:grid;grid-template-columns:44px 1fr;gap:16px;background:var(--bg-2);border-radius:20px;padding:24px 26px;margin:26px 0} .lpe2-commentary__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover} .lpe2-commentary__header{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .lpe2-commentary__name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)} .lpe2-commentary__role{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .lpe2-commentary p{font-size:16px;line-height:1.6;color:var(--ink);margin:0} .lpe2-insight,.lpe2-tip,.lpe2-decision{border-radius:20px;padding:22px 24px;margin:26px 0} .lpe2-insight{background:#fff;border:1px solid var(--line)} .lpe2-tip{background:var(--lilac)} .lpe2-decision{background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:16px} .lpe2-insight__label,.lpe2-tip__label,.lpe2-decision__label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:10px} .lpe2-insight__label svg{width:16px;height:16px} .lpe2-insight p,.lpe2-tip p,.lpe2-decision p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0} .lpe2-decision__icon{width:40px;height:40px;border-radius:12px;background:var(--lilac);display:grid;place-items:center;color:var(--purple)} .lpe2-decision__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lpe2-decision__title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px} .lpe2-testimonial{border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin:26px 0;background:#fff} .lpe2-testimonial__stars{display:flex;gap:2px;margin-bottom:14px} .lpe2-testimonial__stars svg{width:16px;height:16px;fill:var(--stars)} .prose .lpe2-testimonial__quote{font-family:var(--display);font-weight:var(--h2-w);font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);margin:0 0 16px} .lpe2-testimonial__author{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)} .lpe2-testimonial__avatar-placeholder{width:38px;height:38px;border-radius:50%;background:var(--lilac);color:var(--purple);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;flex:none} .lpe2-testimonial__name{color:var(--ink);font-weight:600} /* byline */ .byline{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;border-top:1px solid var(--line);padding-top:26px;margin-top:44px} .byline img{width:56px;height:56px;border-radius:50%;object-fit:cover} .byline b{display:block;font-family:var(--display);font-weight:700;font-size:16px} .byline span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .byline p{font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.55;max-width:60ch} @media(max-width:1100px){.facts{grid-template-columns:repeat(3,1fr)}.facts div:nth-child(3){border-right:0}.facts div:nth-child(-n+3){border-bottom:1px solid var(--line)}.inc{grid-template-columns:1fr 1fr}} @media(max-width:960px){.stats{grid-template-columns:1fr 1fr}} @media(max-width:640px){ .facts{grid-template-columns:1fr 1fr} .facts div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .facts div:nth-child(2n){border-right:0} .facts div:nth-child(n+5){border-bottom:0} .inc,.stats{grid-template-columns:1fr} .said .card{grid-template-columns:1fr;padding:24px} .said img{width:72px;height:72px} .said q{font-size:20px} .stat b{font-size:38px} .ledger{overflow-x:auto} .ledger table{min-width:600px} .ledger td,.ledger th{padding:12px 14px} .lpe2-commentary{grid-template-columns:1fr;padding:20px} .lpe2-commentary__avatar{width:40px;height:40px} .lpe2-decision{grid-template-columns:1fr} .byline{grid-template-columns:1fr} } /* ---- list pages: blog index, examples index, case study index ---- */ /* list pages: blog index */ .list-hero .hero-top h1{font-size:clamp(38px,5.2vw,68px)} .list-hero .hero-top .sub{max-width:60ch} .list-hero{--straddle:46px} .list-hero .hero-top{padding-bottom:40px} .filters{position:relative;z-index:2;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(14,4,50,.28),0 0 0 1px rgba(255,255,255,.14);padding:14px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .filters button{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font:500 14px/1 var(--body);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .filters button small{font-family:var(--mono);font-size:10.5px;color:var(--muted)} .filters button:hover{border-color:var(--purple);color:var(--purple)} .filters button[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff} .filters button[aria-pressed="true"] small{color:#d9c9ff} .filters .search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-width:250px;color:var(--muted)} .filters .search input{border:0;outline:0;background:transparent;font:400 14px var(--body);color:var(--ink);width:100%} .filters .search input::placeholder{color:var(--muted)} .filters .search:focus-within{border-color:var(--purple)} /* cards */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .post{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease} .post:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(14,4,50,.1)} .post .img{aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden} .post .img img{width:100%;height:100%;object-fit:cover;display:block} .post .img .ph{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#2b0d6e,#410099);color:#c9b9f0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .post .b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .post .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)} .post h3{font-size:18px;line-height:1.25;letter-spacing:-.015em} .post p{font-size:14.5px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1} .post .meta{display:flex;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px} .post.big h3{font-size:22px} .post.big .b{padding:22px 24px 24px} .big3{gap:24px} /* all posts */ .listhead{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px;flex-wrap:wrap} .count{display:flex;gap:16px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .count a{color:var(--purple)} .posts .nl,.csgrid .nl{grid-column:1/-1;background:var(--azulado);color:#fff;border-radius:20px;padding:30px 32px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center} .nl .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a8ff} .nl h3{color:#fff;font-size:24px;letter-spacing:-.02em;margin-top:8px} .nl p{color:#cfc9e6;font-size:15px;margin-top:8px;max-width:52ch} .nlf{display:flex;gap:10px} .nlf .btn{white-space:nowrap} .nlf input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:0 18px;font:400 15px var(--body);min-height:50px} .nlf input::placeholder{color:#a79bd0} .nlf input:focus{outline:2px solid var(--cta);outline-offset:2px} .more{display:flex;justify-content:center;margin-top:36px} .empty{color:var(--muted);font-size:15px;padding:40px 0;text-align:center} [hidden]{display:none!important} @media(max-width:960px){.posts{grid-template-columns:1fr 1fr}.posts .nl,.csgrid .nl{grid-template-columns:1fr}.nl .nlf{justify-content:flex-start!important}} @media(max-width:760px){.filters{padding:12px}.filters .search{margin-left:0;width:100%;min-width:0}} @media(max-width:640px){ .posts{grid-template-columns:1fr} .filters .search{margin-top:4px} .post.big h3{font-size:19px} .nlf{flex-direction:column} .listhead{align-items:start} } /* examples index additions */ .filters select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:999px;padding:8px 34px 8px 14px;font:500 14px/1.2 var(--body);color:var(--ink-2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c7792' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;cursor:pointer;max-width:240px;text-overflow:ellipsis} .filters select:hover{border-color:var(--purple);color:var(--purple)} .filters select.on{background-color:var(--purple);color:#fff;border-color:var(--purple);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} .filters .clr{border-color:transparent;color:var(--purple);font-weight:600} .post .meta .sc{color:var(--purple);font-weight:500} .nl.audit .nlf{justify-content:flex-end} @media(max-width:760px){.filters select{max-width:none;width:100%}} /* industry tiles */ .inds{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .ind{appearance:none;border:1px solid var(--line);background:#fff;border-radius:20px;overflow:hidden;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;font-family:var(--body)} .ind:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(14,4,50,.1)} .ind img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;border-bottom:1px solid var(--line)} .ind .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 18px 16px} .ind b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em} .ind small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap} @media(max-width:960px){.inds{grid-template-columns:1fr 1fr}} @media(max-width:640px){.inds{grid-template-columns:1fr 1fr;gap:12px}.ind .t{flex-direction:column;gap:2px;padding:12px 14px}} /* case study index additions */ .csgrid .res .n{font-size:32px} .csgrid .res .n small{display:block;margin:6px 0 0;font-size:13.5px;line-height:1.4} .csgrid .res .w b{color:var(--ink);font-weight:600} .csgrid .nl{grid-column:1/-1} .nl.proof .nlf{justify-content:flex-end} /* ---- blog post ---- */ /* blog post template */ .post-hero .hero-top h1{font-size:clamp(34px,4.7vw,60px);max-width:20ch;margin:0 auto} .post-hero .hero-top .sub{max-width:62ch;font-size:18px} .post-hero{--straddle:110px} .post-hero .hero-top{padding-bottom:40px} .who{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap} .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.35)} .who .n{text-align:left;line-height:1.25} .who .n b{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--hero-ink)} .who .n span{font-size:13px;color:var(--hero-sub)} .who .dates{display:flex;gap:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-micro);margin-left:18px;padding-left:18px;border-left:1px solid rgba(255,255,255,.25)} .who .dates span+span::before{content:"·";margin:0 10px;opacity:.7} /* summary card straddling the purple edge */ .summary{position:relative;z-index:2;background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(14,4,50,.28),0 0 0 1px rgba(255,255,255,.14);padding:26px 30px 28px} .summary .k{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:14px} .summary .k span{color:var(--muted)} .summary ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 36px} .summary li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:var(--ink)} .summary li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--purple)} /* article grid */ .article-sec{padding:64px 0 72px} .article{display:grid;grid-template-columns:250px minmax(0,1fr);gap:72px;align-items:start} .toc{position:sticky;top:96px} .toc summary{list-style:none;cursor:default;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .toc summary::-webkit-details-marker{display:none} .toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)} .toc li a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--ink-2);text-decoration:none} .toc li a:hover{color:var(--purple)} .toc li.on>a{color:var(--purple);border-left-color:var(--purple);font-weight:600} .toc li ol{display:none;border:0;padding-left:14px;margin:2px 0 6px} .toc li.open>ol{display:block} .toc li ol a{font-size:13px;padding:4px 0 4px 16px;color:var(--muted)} .toc li ol li.on>a{color:var(--purple);border-left-color:var(--purple);font-weight:500} .toc .sum{display:flex;gap:10px;align-items:center;margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;font-size:13.5px;color:var(--ink-2);text-decoration:none;line-height:1.35} .toc .sum b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-weight:500;margin-bottom:2px} .toc .sum svg{flex:none;color:var(--purple)} .toc .sum:hover{border-color:var(--purple)} .progress{position:fixed;left:0;top:72px;height:3px;width:0;background:var(--purple);z-index:41;transition:width .1s linear} /* prose */ .prose{min-width:0} .prose>p:first-child{font-size:19px;color:var(--ink);line-height:1.6} .prose>h2{font-size:30px;letter-spacing:-.025em;line-height:1.15;margin:56px 0 16px;scroll-margin-top:100px} .prose h3{font-size:21px;margin:36px 0 12px;scroll-margin-top:100px} .prose p{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 18px;max-width:66ch} .prose strong{color:var(--ink);font-weight:600} .prose a{color:var(--purple);text-decoration:underline;text-decoration-color:rgba(65,0,153,.35);text-underline-offset:3px} .prose code{font-family:var(--mono);font-size:.9em;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)} .prose ul,.prose ol{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:10px;max-width:66ch} .prose li{padding-left:22px;position:relative;font-size:16.5px;line-height:1.6;color:var(--ink-2)} .prose li p{margin:0;font-size:inherit} .prose ul>li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--purple)} .prose ol{counter-reset:n} .prose ol>li{padding-left:34px;counter-increment:n} .prose ol>li::before{content:counter(n);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--lilac);color:var(--purple);font-family:var(--mono);font-size:12px;display:grid;place-items:center} .prose p>img:only-child{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);margin:8px 0 26px} .prose>svg{display:block;width:100%;height:auto;border-radius:16px;margin:8px 0 12px} .prose .ax-svg-mobile{display:none} .prose p>em:only-child{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);text-align:center;font-style:normal;max-width:none;margin:-2px 0 28px} /* components kept by class name from the markdown bodies */ .ax-takeaways{background:var(--azulado);color:#fff;border-radius:22px;padding:28px 30px;margin:28px 0} .ax-takeaways h2{color:#fff;font-size:22px;margin:0 0 14px} .ax-takeaways ul{max-width:none}.ax-takeaways li{color:#e4dff5}.ax-takeaways ul>li::before{background:#c9a8ff} .ax-case-study{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:28px 0;box-shadow:0 14px 34px rgba(14,4,50,.06)} .ax-case-study .ax-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:10px} .ax-case-study p{font-size:16px;margin:0 0 14px;max-width:none} .ax-stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:4px 0 14px} .ax-stat{display:grid;gap:4px} .ax-stat-number{font-family:var(--display);font-weight:var(--num-w);font-size:32px;letter-spacing:-.025em;color:var(--purple);line-height:1;font-variant-numeric:tabular-nums} .ax-stat-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ax-case-study .ax-review-meta{margin:0;font-size:14px} .ax-case-study .ax-review-meta a{font-weight:600;text-decoration:none} .ax-case-study .ax-review-meta a::after{content:" →"} .ax-tip,.ax-warning,.keynote{border-radius:18px;padding:20px 24px 20px;margin:26px 0} .ax-tip{background:var(--lilac)} .ax-warning{background:var(--bg-2);border-left:3px solid var(--magenta);border-radius:0 18px 18px 0} .keynote{background:var(--bg-2)} .ax-tip::before,.ax-warning::before,.keynote::before{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:8px} .ax-tip::before{content:"Tip"}.ax-warning::before{content:"Watch out";color:var(--magenta)}.keynote::before{content:"Key takeaway"} .ax-tip p,.ax-warning p,.keynote p{margin:0;font-size:16px;color:var(--ink);max-width:none} .ax-cta{background:radial-gradient(60% 80% at 90% 0%,rgba(138,26,155,.55),transparent 60%),linear-gradient(135deg,#2b0d6e 0%,#410099 100%);color:#fff;border-radius:22px;padding:30px 32px;margin:32px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 32px;align-items:center} .ax-cta h3{color:#fff;font-size:22px;margin:0;grid-column:1} .ax-cta p{color:#dcd2f3;font-size:15px;margin:0;grid-column:1;max-width:52ch} .ax-cta .ax-cta-button{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;background:var(--cta);color:var(--cta-ink);text-decoration:none;white-space:nowrap;min-height:46px} .ax-cta .ax-cta-button:hover{background:var(--cta-hover)} .ax-review{border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:28px 0;background:#fff} .ax-review-stars{color:var(--stars);letter-spacing:2px;font-size:14px;margin-bottom:10px} .ax-review>p{font-family:var(--display);font-weight:var(--h2-w);font-size:21px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;max-width:none} .ax-review .ax-review-meta{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--muted)} .ax-review .ax-review-meta strong{color:var(--ink)} .prose div[style*="overflow-x"]{margin:8px 0 26px;border:1px solid var(--line);border-radius:16px} .ax-table{width:100%;border-collapse:collapse;font-size:15px} .ax-table th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;background:var(--bg-2);border-bottom:1px solid var(--line)} .ax-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);line-height:1.5} .ax-table tr:last-child td{border-bottom:0} .ax-table td strong{color:var(--ink)} .prose p>a.ax-portfolio-card{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:16px;padding:18px 22px;text-decoration:none;color:var(--ink);max-width:none} .ax-portfolio-card .ax-portfolio-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);flex:none} .ax-portfolio-card strong{flex:1;font-weight:600;font-size:16px;line-height:1.35} .ax-portfolio-card .ax-portfolio-arrow{color:var(--purple);font-size:20px} .prose p:has(>a.ax-portfolio-card){max-width:none} .ax-sources{margin:40px 0 0;border-top:1px solid var(--line);padding-top:18px} .ax-sources-bar{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ax-sources-bar-label{color:var(--purple)} .ax-sources-favicons{display:none} .ax-sources details{margin-top:10px} .ax-sources summary{cursor:pointer;font-size:14px;color:var(--purple);font-weight:600} .ax-sources ol{margin:12px 0 0;max-width:none} .ax-sources li{font-size:14.5px} .ax-sources li img{display:none} .ax-source-domain{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:6px} /* front-matter components */ .quote{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;margin:30px 0;padding:24px 26px;border-radius:20px;background:var(--bg-2)} .quote img{width:52px;height:52px;border-radius:50%;object-fit:cover} .quote p{font-family:var(--display);font-weight:var(--h2-w);font-size:20px;line-height:1.35;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;max-width:none} .quote .by{font-size:14px;color:var(--muted)} .quote .by b{color:var(--ink);font-weight:600} .quote .by a{text-decoration:none} .readnext{display:flex;align-items:center;gap:16px;margin:24px 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;text-decoration:none!important;color:var(--ink);font-size:15.5px;font-weight:500;line-height:1.35} .readnext .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);flex:none} .readnext span{flex:1} .readnext svg{flex:none;color:var(--purple)} .readnext:hover{border-color:var(--purple)} .donext{border:1px solid var(--line);border-radius:22px;padding:28px 30px;margin:44px 0 0} .donext h2{font-size:24px;margin:0 0 8px} .donext>p{font-size:15.5px;margin:0 0 18px} .donext ol{display:grid;gap:14px;max-width:none} .donext li{padding-left:0;font-size:15.5px} .donext li::before{display:none} .donext li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px} .prose .faq{grid-template-columns:1fr;gap:18px;margin:20px 0 0} .prose .qa b{font-size:17px} .prose .qa p{font-size:15.5px;max-width:none;margin:0} .offerform{background:var(--azulado);color:#fff;border-radius:22px;padding:28px 30px;margin:32px 0} .offerform .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a8ff} .offerform h3{color:#fff;font-size:23px;margin:8px 0 8px} .offerform p{color:#cfc9e6;font-size:15px;margin:0 0 18px;max-width:56ch} .offerform .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px} .offerform .fields label{display:grid;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#a79bd0} .offerform .fields label.full{grid-column:1/-1} .offerform input{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:0 16px;font:400 15px var(--body);min-height:48px;width:100%} .offerform input::placeholder{color:#8d82bb} .offerform input:focus{outline:2px solid var(--cta);outline-offset:2px} .offerform .row{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap} .offerform small{color:#a79bd0;font-size:13px} /* end of article */ .author{display:grid;grid-template-columns:72px 1fr;gap:22px;align-items:start;border-top:1px solid var(--line);margin-top:48px;padding-top:32px} .author img{width:72px;height:72px;border-radius:50%;object-fit:cover} .author .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .author b{display:block;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.015em;margin-top:6px} .author .role{font-size:14px;color:var(--muted)} .author p{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin:10px 0 12px;max-width:60ch} .author .links{display:flex;gap:18px;font-size:14px} .author .links a{color:var(--purple);font-weight:600;text-decoration:none} /* offer band + read next */ .offer{background:var(--azulado);color:#fff;border-radius:24px;padding:36px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center} .offer .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a8ff} .offer h2{color:#fff;font-size:30px;letter-spacing:-.025em;margin-top:10px} .offer p{color:#cfc9e6;font-size:16px;margin-top:12px;max-width:52ch} .offer .right{display:flex;flex-direction:column;align-items:flex-start;gap:12px} .offer .right small{color:#a79bd0;font-size:13.5px;line-height:1.5} .next{padding-top:0} .also{margin-top:22px;font-size:15px;color:var(--ink-2);line-height:1.8} .also a{color:var(--purple);text-decoration:underline;text-decoration-color:rgba(65,0,153,.35);text-underline-offset:3px} .also .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:10px} @media(max-width:1100px){.article{grid-template-columns:220px minmax(0,1fr);gap:48px}} @media(max-width:960px){ .article{grid-template-columns:1fr;gap:28px} .toc{position:static} .toc summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0} .toc summary::after{content:"+";font-size:16px;letter-spacing:0} .toc details[open] summary::after{content:"–"} .toc details[open] summary{margin-bottom:12px} .toc li ol{display:block} .toc .sum{display:none} .offer{grid-template-columns:1fr;padding:28px} .summary ul{grid-template-columns:1fr} } @media(max-width:640px){ .post-hero{--straddle:44px} .hero-top h1{font-size:34px} .who{gap:12px} .who .dates{margin-left:0;padding-left:0;border:0;width:100%;justify-content:center} .summary{padding:20px 20px 22px} .article-sec{padding:40px 0 56px} .prose>h2{font-size:25px} .prose>p:first-child{font-size:17.5px} .prose p{font-size:16px} .prose .ax-svg-desktop{display:none}.prose .ax-svg-mobile{display:block} .ax-cta{grid-template-columns:1fr}.ax-cta .ax-cta-button{grid-column:1;grid-row:auto;justify-self:start} .ax-stats{gap:12px 24px} .quote{grid-template-columns:1fr} .offerform .fields{grid-template-columns:1fr} .author{grid-template-columns:1fr} .donext{padding:22px} .ax-case-study{padding:20px} } .prose #summary_image{scroll-margin-top:100px} .summary .k>b{white-space:nowrap;font-weight:500} @media(max-width:640px){ .who .dates{flex-direction:column;align-items:center;gap:4px} .who .dates span+span::before{content:none;margin:0} .summary .k{flex-direction:column;align-items:flex-start;gap:4px} } .prose .qa{border-top:1px solid var(--line);padding-top:18px} .prose .qa:first-child{border-top:2px solid var(--purple)} .ax-table{min-width:600px} @media(max-width:640px){.prose p>a.ax-portfolio-card{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px}.ax-portfolio-card strong{font-size:15.5px}}