/* The public website. Two themes from one set of tokens: light is the default, dark follows the operating system, and a switch in the header overrides both and is remembered. Nothing here uses an inline style, which lets the pages run under style-src 'self'; colours a script has to compute are passed in as custom properties instead. Motion is opt-in twice over: every reveal only hides itself once the script has added .js to , and the whole set is switched off under prefers-reduced-motion. A visitor without JavaScript sees the finished page, not an empty one. */ :root{ color-scheme:light only; --bg:#fbfaf7; --bg-lift:#fffdf6; --cream:#fbf2d6; --cream-soft:#fff4cc; --gold-solid:#f3d477; --surface:rgba(26,23,14,.032); --surface-2:rgba(26,23,14,.058); --surface-solid:#ffffff; --line:rgba(26,23,14,.11); --line-strong:rgba(26,23,14,.2); --text:#17160f; --muted:#57554b; --dim:#8a877b; --accent:#c2921a; --accent-ink:#7e5c08; --accent-wash:rgba(210,163,40,.13); --accent-edge:rgba(170,128,25,.34); --win:#0f7a4d; --win-wash:rgba(15,122,77,.1); --win-edge:rgba(15,122,77,.28); --code-bg:#f4f2eb; --code-text:#3c3a30; --shadow-sm:0 1px 2px rgba(26,23,14,.05),0 6px 16px -10px rgba(26,23,14,.16); --shadow-lg:0 2px 6px rgba(26,23,14,.04),0 34px 60px -34px rgba(26,23,14,.3); --glow:rgba(226,182,66,.2); --header:rgba(251,250,247,.72); --sprite-opacity:1; --btn-bg:#e9c44b;--btn-fg:#191509;--btn-hover:#f0cf62; --radius:18px; --radius-lg:26px; --shell:1180px; --ease:cubic-bezier(.22,.72,.26,1); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --display:"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; transition:background .5s var(--ease),color .5s var(--ease); } body::before{ content:'';position:fixed;inset:0 0 auto;height:820px;z-index:-1;pointer-events:none; background:radial-gradient(58% 64% at 50% -12%,var(--glow),transparent 72%); } h1,h2,h3,h4,p,figure,ol{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;background:none;border:0} [hidden]{display:none!important} .sprite{display:none} :focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px} ::selection{background:var(--accent-wash)} .shell{width:min(var(--shell),calc(100% - 72px));margin-inline:auto} .skip-link{position:fixed;top:-100px;left:24px;z-index:70;background:var(--btn-bg);color:var(--btn-fg);padding:12px 20px;border-radius:0 0 12px 12px;font-weight:600} .skip-link:focus{top:0} .mark{font-style:normal;color:var(--accent-ink)} .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--dim)} .lede{color:var(--muted);font-size:19px;line-height:1.65;max-width:56ch} .fine-print{color:var(--dim);font-size:13.5px;line-height:1.7;margin-top:30px;max-width:72ch} .tag{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);background:var(--surface);border:1px solid var(--line);padding:5px 10px;border-radius:999px;white-space:nowrap} .arrow{font-size:.82em;opacity:.65;transition:transform .3s var(--ease)} a:hover>.arrow,button:hover>.arrow{transform:translate(2px,-2px)} .text-link{border-bottom:1px solid var(--line-strong);padding-bottom:3px} .text-link:hover{border-color:var(--accent);color:var(--accent-ink)} /* ---- The pencilled underline: the one small thing that made the first design look drawn rather than generated. Same curve and same stroke as before, now as a background so a highlight needs no extra element. ---- */ .hero h1 .mark,.closing-inner h2 .mark,.post-head h1 .mark{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 550 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12Q240 -1 542 8' fill='none' stroke='%23eed075' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:left bottom;background-size:100% .2em; /* The word keeps the ink of the headline; the gold is the stroke under it, not the letters. Two marks on the same word cancel each other out. */ color:inherit;padding-bottom:.1em; } /* ---- Platform marks ---- */ .logo-mark{width:22px;height:22px;flex:none;fill:currentColor;opacity:var(--sprite-opacity)} .logo-mark[data-platform=shopify]{color:#7ab55c} .logo-mark[data-platform=woocommerce]{color:#96588a} .logo-mark[data-platform=shopware]{color:#189eff} .logo-mark[data-platform=webflow]{color:#146ef5} .logo-mark[data-platform=magento]{color:#ee672f} /* ---- Buttons: flat fills, no gradients ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 28px; border-radius:999px;border:1px solid transparent;font-size:15.5px;font-weight:600;letter-spacing:-.1px;white-space:nowrap; background:var(--btn-bg);color:var(--btn-fg); transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease); } .btn:hover{background:var(--btn-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .btn:active{transform:translateY(0)} .btn.ghost{background:transparent;color:var(--text);border-color:var(--line-strong)} .btn.ghost:hover{background:var(--surface);border-color:var(--text)} .btn.small{min-height:42px;padding:11px 20px;font-size:13.5px} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} /* ---- Reading progress ---- */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:0 50%;opacity:0;transition:opacity .3s} .post-page .scroll-progress{opacity:1} /* ---- Header ---- */ .site-header{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)} .site-header.is-scrolled{border-bottom-color:var(--line)} .nav{display:flex;align-items:center;gap:38px;height:74px} .brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-1.4px;flex-shrink:0} .brand .dot{color:var(--accent-ink)} .logo{display:flex;align-items:flex-end;gap:3px;width:27px;height:27px;padding:6px 5px;border-radius:9px;background:var(--text);transition:background .4s var(--ease)} .logo i{display:block;width:3px;border-radius:2px;background:var(--bg);height:9px} .logo i:nth-child(2){height:15px} .logo i:nth-child(3){height:12px;opacity:.6} .nav-links{display:flex;align-items:center;gap:28px;font-size:14.5px;color:var(--muted);white-space:nowrap} .nav-links>a{position:relative;padding:4px 0} .nav-links>a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)} .nav-links>a:hover{color:var(--text)} .nav-links>a:hover::after{transform:scaleX(1)} .nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0} .nav-app{font-size:14.5px;color:var(--muted);white-space:nowrap} .nav-app:hover{color:var(--text)} .lang{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:11px;font-weight:600;letter-spacing:.04em} .lang a{padding:5px 10px;border-radius:999px;color:var(--dim);transition:background .25s,color .25s} .lang a[aria-current]{background:var(--surface-2);color:var(--text)} .lang a:hover{color:var(--text)} /* The panel hangs off this, so the dropdown needs its own containing block. */ .menu{position:relative} .menu summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;color:var(--muted);padding:4px 0} .menu summary::-webkit-details-marker{display:none} .menu summary:hover,.menu[open] summary{color:var(--text)} .caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)} .menu[open] .caret{transform:translateY(1px) rotate(-135deg)} .menu-panel{ position:absolute;top:calc(100% + 20px);left:-20px;width:342px;padding:10px;display:grid;gap:2px; background:var(--surface-solid);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg); animation:menu-in .28s var(--ease) both; } .menu-panel a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:13px;transition:background .2s} .menu-panel a:hover{background:var(--surface-2)} .menu-panel strong{display:block;font-size:14px;font-weight:600} .menu-panel small{display:block;font-size:11.5px;color:var(--dim);margin-top:3px} .menu-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);flex-shrink:0} @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 11px} .nav-toggle i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)} .nav-toggle[aria-expanded=true] i:first-child{transform:translateY(3.2px) rotate(45deg)} .nav-toggle[aria-expanded=true] i:last-child{transform:translateY(-3.2px) rotate(-45deg)} .mobile-nav{border-top:1px solid var(--line);background:var(--bg-lift)} .mobile-nav .shell{display:grid;padding-block:8px} .mobile-nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px} .mobile-nav a:last-child{border-bottom:0} .mobile-lang{color:var(--accent-ink)} /* ---- Motion: reveals, hero entrance, pointer spotlight ---------------------------------------------------- */ /* Only a page that got its script hides anything, so no-JS visitors read the finished article. */ .js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .js [data-reveal].is-visible{opacity:1;transform:none} .js [data-i="1"]{transition-delay:.05s} .js [data-i="2"]{transition-delay:.1s} .js [data-i="3"]{transition-delay:.15s} .js [data-i="4"]{transition-delay:.2s} .js [data-i="5"]{transition-delay:.25s} .js [data-i="6"]{transition-delay:.3s} .js [data-i="7"]{transition-delay:.35s} @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes rise-soft{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes glow-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}} .js .hero>.shell>*{animation:rise .95s var(--ease) both} .js .hero-eyebrow{animation-delay:.05s} .js .hero h1{animation-delay:.13s} .js .hero-sub,.js .post-head h1{animation-delay:.22s} .js .hero .cta-row,.js .hero .fact-row,.js .billing-toggle{animation-delay:.31s} .js .hero-note{animation-delay:.38s} .js .montage,.js .metrics{animation-delay:.46s} .js .hero-glow{animation:glow-in 1.6s var(--ease) both} /* The soft light that follows the pointer across a card. The two coordinates come from the script. */ .card,.plan,.post-card,.install-step,.montage-card,.scene{position:relative;isolation:isolate} .card::after,.plan::after,.post-card::after,.install-step::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--accent-wash),transparent 65%); transition:opacity .45s var(--ease); } .card:hover::after,.plan:hover::after,.post-card:hover::after,.install-step:hover::after{opacity:1} /* ---- Hero ---- */ .hero{position:relative;padding:120px 0 104px;text-align:center} .hero.sub{padding:92px 0 64px;text-align:left} .hero.short{padding-bottom:40px} .hero-glow{position:absolute;inset:-180px 0 auto;height:680px;pointer-events:none;background:radial-gradient(46% 58% at 50% 32%,var(--glow),transparent 70%);will-change:transform} .hero>.shell{position:relative} .hero-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--muted)} .hero.sub .hero-eyebrow{justify-content:flex-start} .pill{display:inline-grid;place-items:center;min-width:36px;height:26px;padding:0 10px;border-radius:999px;background:var(--accent-wash);border:1px solid var(--accent-edge);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.09em;white-space:nowrap} .pill-logo{padding:0 7px;min-width:32px;height:30px;background:var(--surface);border-color:var(--line)} .pill-logo .logo-mark{width:17px;height:17px} .hero h1{font-family:var(--display);font-size:clamp(46px,6.4vw,86px);line-height:1.01;letter-spacing:-3.4px;font-weight:700;margin:28px 0 26px;text-wrap:balance} .hero.sub h1{font-size:clamp(40px,5vw,64px);letter-spacing:-2.2px} .hero-sub{font-size:20px;line-height:1.6;color:var(--muted);max-width:60ch;margin-inline:auto;text-wrap:pretty} .hero.sub .hero-sub{font-size:19px;max-width:58ch} .hero .cta-row{justify-content:center} .hero.sub .cta-row{justify-content:flex-start} .hero-note{font-size:12.5px;color:var(--dim);margin-top:20px;letter-spacing:.01em} .fact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px} .fact-row li{font-size:13.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 18px} .metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 64px;margin-top:52px;padding-top:38px;border-top:1px solid var(--line)} .metrics div{display:flex;align-items:baseline;gap:11px} .metrics strong{font-size:26px;font-weight:600;letter-spacing:-1px;color:var(--accent-ink);font-variant-numeric:tabular-nums} .metrics span{font-size:13.5px;color:var(--dim)} /* ---- Hero montage ---- */ .montage{display:grid;grid-template-columns:.9fr .55fr 1.35fr;gap:16px;margin-top:64px;text-align:left} .montage-card{ padding:24px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-solid); box-shadow:var(--shadow-lg);display:flex;flex-direction:column; } .montage-card>header{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11.5px;color:var(--dim);margin-bottom:20px} .montage-title{font-size:21px;font-weight:600;letter-spacing:-.7px;margin-bottom:24px} .mini-page{flex:1;text-align:center;padding:30px 20px;border-radius:14px;background:var(--bg);border:1px solid var(--line)} .wordmark{font-size:12.5px;font-weight:700;letter-spacing:-.4px;color:var(--muted)} .mini-page h3{font-size:23px;font-weight:500;letter-spacing:-.9px;line-height:1.15;margin:18px 0 12px} .mini-page p{font-size:11.5px;line-height:1.6;color:var(--dim)} .mini-cta{display:inline-block;margin-top:20px;padding:10px 17px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--btn-bg);color:var(--btn-fg);transition:background .3s var(--ease)} .variant-toggle{display:flex;gap:4px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .variant-toggle button{flex:1;padding:10px;border-radius:10px;color:var(--dim);font-size:11.5px;transition:background .25s,color .25s} .variant-toggle button[aria-pressed=true]{background:var(--surface-2);color:var(--text)} .variant-toggle button:hover{color:var(--text)} .bar-row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin-bottom:22px} .bar-row>span{font-size:13.5px;color:var(--muted)} .bar-row>strong{font-size:23px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums;text-align:right} .bar{grid-column:1/-1;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:9px 0 7px} .bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--dim);transition:width 1.2s var(--ease)} .bar-row.win .bar i{background:var(--win)} .bar.is-visible[data-fill="50"] i{width:50%} .bar.is-visible[data-fill="53"] i{width:53%} .bar.is-visible[data-fill="80"] i{width:80%} .bar.is-visible[data-fill="89"] i{width:89%} html:not(.js) .bar[data-fill="50"] i{width:50%} html:not(.js) .bar[data-fill="53"] i{width:53%} html:not(.js) .bar[data-fill="80"] i{width:80%} html:not(.js) .bar[data-fill="89"] i{width:89%} .bar-row>small{grid-column:1/-1;font-size:11.5px;color:var(--dim)} .scene-note{font-size:11.5px;color:var(--dim);margin-top:auto;padding-top:10px} /* ---- The gold block between the idea and its evidence: the boldest colour on the page, and the reason the montage reads as a composition rather than as two boxes. ---- */ .montage-art{ position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--gold-solid);color:#3b3112; display:flex;flex-direction:column;align-items:center;justify-content:center; } .montage-art svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a8801e;stroke-width:1;opacity:.35;animation:art-drift 18s ease-in-out infinite alternate} .montage-art>div{position:relative;display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:56px;font-weight:700;letter-spacing:-3px} .montage-art>div span{font-size:19px;line-height:1;letter-spacing:0;color:#7a622b} .montage-art p{position:absolute;left:22px;right:16px;bottom:22px;font-size:12px;line-height:1.45} @keyframes art-drift{from{transform:translateY(-8px) scale(1.05)}to{transform:translateY(8px) scale(1.1)}} /* ---- Platform strip ---- */ .strip-section{padding:20px 0 76px} .strip-label{text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:26px} .platform-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .platform-strip a{display:inline-flex;align-items:center;gap:11px;padding:12px 22px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;color:var(--muted);transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)} .platform-strip a:hover,.platform-strip a[aria-current]{color:var(--text);border-color:var(--line-strong);background:var(--surface);transform:translateY(-2px)} /* ---- Bands and section heads ---- */ .band{padding:120px 0} .band.tight{padding:72px 0} .band.alt{background:var(--bg-lift);border-block:1px solid var(--line)} .section-head{max-width:60ch;margin-bottom:60px} .section-head h2{font-family:var(--display);font-size:clamp(32px,4.1vw,54px);line-height:1.05;letter-spacing:-2.4px;font-weight:700;margin:18px 0 20px;text-wrap:balance} .section-head .lede{font-size:18.5px} /* ---- Cards ---- */ .card-grid{display:grid;gap:20px} .card-grid.four{grid-template-columns:repeat(4,1fr)} .card-grid.three{grid-template-columns:repeat(3,1fr)} .card{ padding:32px 28px 34px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface); transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease); } .card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-sm)} .card.plain{background:transparent} .card-index{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:20px} .card h3{font-size:19px;font-weight:600;letter-spacing:-.45px;margin-bottom:11px} .card p{font-size:14.5px;line-height:1.7;color:var(--muted)} /* ---- Feature tabs ---- */ .tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin-bottom:8px} .tabs button{display:flex;align-items:center;gap:13px;padding:20px 4px;border-bottom:2px solid transparent;color:var(--dim);font-size:15.5px;text-align:left;transition:color .3s var(--ease),border-color .3s var(--ease)} .tabs button:hover{color:var(--muted)} .tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent);font-weight:600} .tab-index{font-size:11.5px;letter-spacing:.12em;color:var(--accent-ink)} .tab-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:center;padding-top:60px} .tab-panel:not([hidden]){animation:rise-soft .6s var(--ease) both} .feature-index{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .tab-copy h3{font-size:clamp(28px,2.9vw,38px);line-height:1.12;letter-spacing:-1.3px;font-weight:600;margin:20px 0 18px} .tab-copy p{color:var(--muted);font-size:16px;line-height:1.75} .scene{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-solid);padding:22px;min-height:342px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)} .scene-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11.5px;color:var(--dim);padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:20px} .dot-b{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px} .scene-editor .scene-canvas{position:relative;flex:1;border-radius:14px;background:var(--bg);border:1px solid var(--line);padding:30px 24px 58px;text-align:center} .scene-headline{font-size:27px;letter-spacing:-1.1px;line-height:1.15;margin:20px 0 30px} .scene-tagname{position:absolute;left:50%;transform:translateX(-100px);margin-top:-24px;font-size:9.5px;letter-spacing:.06em;background:var(--accent);color:var(--btn-fg);padding:3px 8px;border-radius:6px} .scene-target{position:relative;display:inline-block;padding:12px 20px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-size:12.5px;font-weight:600;outline:1px solid var(--accent-edge);outline-offset:5px} .scene-target i{position:absolute;right:-9px;bottom:-9px;width:7px;height:7px;background:var(--surface-solid);border:1px solid var(--accent);border-radius:2px} .scene-popover{position:absolute;right:14px;bottom:14px;width:194px;text-align:left;padding:14px;border-radius:14px;background:var(--surface-solid);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)} .scene-popover span{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)} .scene-popover strong{display:block;font-size:11.5px;font-weight:500;padding:9px;margin:9px 0 8px;border:1px solid var(--line);border-radius:8px} .scene-popover small{font-size:9.5px;color:var(--win)} .check-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)} .check-row strong{font-size:14.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} .check-row strong.ok{color:var(--win)} /* ---- Steps ---- */ .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .step-card{border-top:1px solid var(--line-strong);padding-top:28px} .step-number{display:block;font-size:12px;letter-spacing:.16em;color:var(--accent-ink);margin-bottom:24px} .step-card h3{font-size:21px;font-weight:600;letter-spacing:-.6px;margin-bottom:13px} .step-card p{font-size:14.5px;line-height:1.7;color:var(--muted)} /* ---- Two-column panels ---- */ .split-panel{display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:center} .split-panel.reverse>div:first-child{order:2} .split-panel h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.5vw,46px);line-height:1.08;letter-spacing:-1.8px;font-weight:600;margin:18px 0 20px;text-wrap:balance} .split-panel .btn{margin-top:30px} .team-panel,.role-table{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:26px 28px} .team-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.11em;color:var(--dim);padding-bottom:18px} .team-row{display:flex;align-items:center;gap:15px;padding:19px 0;border-top:1px solid var(--line)} .team-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);color:var(--accent-ink);font-size:13px;font-weight:700} .team-row strong{display:block;font-size:14.5px;font-weight:600} .team-row small{display:block;font-size:11.5px;color:var(--dim);margin-top:3px} .team-role{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap} .role-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);padding-bottom:16px} .role-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;padding:17px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} .role-row>span:first-child{color:var(--text);font-weight:600} .check-list{display:grid;gap:15px} .check-list li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.65;color:var(--muted)} .check-list li::before{content:'✓';position:absolute;left:0;top:0;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--win-wash);border:1px solid var(--win-edge);color:var(--win);font-size:11px} /* ---- Price teaser ---- */ .price-teaser{display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:center} .price-teaser h2{font-size:clamp(30px,3.5vw,46px);line-height:1.08;letter-spacing:-1.8px;font-weight:600;margin:18px 0 20px} .price-peek{display:grid;gap:8px} .price-peek li{display:grid;grid-template-columns:1fr auto;gap:3px 16px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);align-items:baseline;transition:border-color .3s var(--ease),transform .3s var(--ease)} .price-peek li:hover{border-color:var(--line-strong);transform:translateX(4px)} .price-peek span{font-size:15.5px;font-weight:600} .price-peek strong{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-ink)} .price-peek small{grid-column:1/-1;font-size:11.5px;color:var(--dim)} /* ---- Platform pages ---- */ .install-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .install-step{padding:32px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .35s var(--ease)} .install-step:hover{border-color:var(--line-strong)} .install-step h3{font-size:20px;font-weight:600;letter-spacing:-.5px;margin-bottom:11px} .install-step p{font-size:14.5px;line-height:1.7;color:var(--muted)} .code-block{ margin:22px 0 0;padding:20px 22px;border-radius:14px;background:var(--code-bg);border:1px solid var(--line); overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--code-text); } .code-block code{white-space:pre} .caveat-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:76px;align-items:start} .caveat-panel h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-1.5px;font-weight:600;margin-top:18px} .caveat-list{display:grid;gap:20px} .caveat-list li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.7;color:var(--muted)} .caveat-list li::before{content:'!';position:absolute;left:0;top:0;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--accent-wash);border:1px solid var(--accent-edge);color:var(--accent-ink);font-size:11px;font-weight:700} .platform-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .platform-cards .logo-mark{width:30px;height:30px;margin-bottom:20px} .platform-cards h3{font-size:17px;margin-bottom:7px} .platform-cards p{font-size:12.5px;color:var(--dim)} /* ---- Platform pages: the three-step setup promise ---- */ .setup-steps{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:12px 28px 24px} .setup-step{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line)} .setup-number{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent-wash);border:1px solid var(--accent-edge);color:var(--accent-ink);font-size:13px;font-weight:700} .setup-step strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:6px} .setup-step p{font-size:14px;line-height:1.65;color:var(--muted)} .setup-note{padding-top:20px;font-size:13px} /* ---- Pricing ---- */ .billing-toggle{display:inline-flex;gap:4px;margin-top:38px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--surface)} .billing-toggle button{display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:999px;color:var(--muted);font-size:14.5px;transition:background .3s var(--ease),color .3s var(--ease)} .billing-toggle button[aria-pressed=true]{background:var(--surface-solid);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)} .save{font-size:11px;color:var(--win);background:var(--win-wash);border:1px solid var(--win-edge);border-radius:999px;padding:3px 10px} .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start} .plan{display:flex;flex-direction:column;padding:34px 28px 36px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)} .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)} .plan.featured{border-color:var(--accent-edge);background:var(--surface-solid);box-shadow:var(--shadow-lg)} .plan-badge{position:absolute;top:-12px;left:28px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;background:var(--btn-bg);color:var(--btn-fg);padding:6px 14px;border-radius:999px} .plan h2{font-size:19px;font-weight:600;letter-spacing:-.35px} .plan-for{font-size:13.5px;line-height:1.6;color:var(--dim);margin-top:9px;min-height:44px} .plan-price{display:flex;flex-direction:column;gap:3px;margin:24px 0 16px} .price{font-size:46px;font-weight:600;letter-spacing:-2.4px;font-variant-numeric:tabular-nums;line-height:1} .price-suffix{font-size:12.5px;color:var(--dim)} .plan-traffic{display:flex;flex-direction:column;padding:16px 0 22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)} .plan-traffic strong{font-size:17px;font-weight:600;color:var(--accent-ink);font-variant-numeric:tabular-nums} .plan .btn{width:100%} .plan-features{display:grid;gap:12px;margin-top:26px} .plan-features li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.6;color:var(--muted)} .plan-features li::before{content:'✓';position:absolute;left:0;color:var(--accent-ink);font-size:11px} .plan-grid[data-billing=monthly] [data-price-yearly]{display:none} .plan-grid[data-billing=yearly] [data-price-monthly]{display:none} .enterprise{display:grid;grid-template-columns:1.1fr 1fr auto;gap:52px;align-items:center;margin-top:26px;padding:38px 40px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface)} .enterprise h2{display:flex;align-items:baseline;gap:15px;font-size:24px;font-weight:600;letter-spacing:-.8px;margin-bottom:11px} .enterprise-price{font-size:13.5px;font-weight:500;color:var(--accent-ink)} .enterprise p{font-size:14.5px;line-height:1.7;color:var(--muted)} .enterprise .check-list li{font-size:13.5px;padding-left:30px} .explainer{margin-top:44px;padding:32px 34px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)} .explainer h3{font-size:17px;font-weight:600;margin-bottom:11px} .explainer p{font-size:14.5px;line-height:1.75;color:var(--muted);max-width:86ch} .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)} .compare{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px} .compare th,.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)} .compare thead th{font-size:13.5px;font-weight:600;color:var(--text);background:var(--bg-lift);position:sticky;top:0} .compare thead th:first-child{color:var(--dim);font-weight:500} .compare tbody th{font-weight:400;color:var(--muted)} .compare td{text-align:center;width:138px} .compare .featured{background:var(--accent-wash)} .compare tbody tr:hover td,.compare tbody tr:hover th{background:var(--surface-2)} .group-row th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);background:var(--bg-lift);font-weight:700;padding-top:24px} .tick{color:var(--win);font-size:15px} .dash{color:var(--dim)} .compare .value{font-size:13.5px;color:var(--text)} /* ---- FAQ ---- */ .faq-section{padding:120px 0;border-top:1px solid var(--line)} .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:86px;align-items:start} .faq-grid h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.5vw,46px);line-height:1.08;letter-spacing:-1.8px;font-weight:600;margin-top:18px} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{position:relative;list-style:none;cursor:pointer;padding:26px 46px 26px 0;font-size:17px;line-height:1.45;font-weight:500;transition:color .25s} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{content:'';position:absolute;right:8px;top:34px;width:9px;height:9px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .35s var(--ease)} .faq-list details[open] summary::after{transform:translateY(4px) rotate(-135deg)} .faq-list summary:hover{color:var(--accent-ink)} .faq-list details p{font-size:15.5px;line-height:1.75;color:var(--muted);margin:0 46px 28px 0;animation:rise-soft .45s var(--ease) both} /* ---- Blog ---- */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post-card{display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)} .post-card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-sm)} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:13px;font-size:12.5px;color:var(--dim)} .post-card h3{font-size:20px;font-weight:600;letter-spacing:-.6px;line-height:1.28;margin:20px 0 13px} .post-card p{flex:1;font-size:14.5px;line-height:1.7;color:var(--muted)} .post-more{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--accent-ink)} .post-more small{font-size:11.5px;color:var(--dim)} .post{position:relative;padding:68px 0 24px} .post-head{max-width:768px;margin-inline:auto;position:relative} .breadcrumb{font-size:12.5px;color:var(--dim);margin-bottom:28px} .breadcrumb a:hover{color:var(--accent-ink)} .post-head h1{font-family:var(--display);font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-2.4px;font-weight:700;margin:22px 0 20px;text-wrap:balance} .post-head .hero-sub{font-size:19px;margin-inline:0} /* The article and its table of contents: a sticky rail on the left, the text on the right. */ .post-layout{display:grid;grid-template-columns:232px minmax(0,768px);gap:64px;justify-content:center;padding-top:52px} .toc{position:sticky;top:112px;align-self:start;max-height:calc(100vh - 150px);overflow-y:auto;padding-right:8px} .toc-title{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:18px} .toc ol{display:grid;gap:2px;counter-reset:toc} .toc li{counter-increment:toc} .toc a{display:block;padding:9px 0 9px 26px;position:relative;font-size:13.5px;line-height:1.5;color:var(--dim);border-left:1.5px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease)} .toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:10px;font-size:10px;opacity:.65} .toc a:hover{color:var(--text)} .toc a.is-active{color:var(--accent-ink);border-left-color:var(--accent);font-weight:500} .toc-top{display:inline-block;margin-top:22px;font-size:12.5px;color:var(--dim)} .toc-top:hover{color:var(--text)} .toc-mobile{display:none;margin-bottom:34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:6px 20px} .toc-mobile summary{list-style:none;cursor:pointer;padding:16px 0;font-size:14.5px;font-weight:600} .toc-mobile summary::-webkit-details-marker{display:none} .toc-mobile ol{display:grid;gap:4px;padding-bottom:16px;counter-reset:toc} .toc-mobile li{counter-increment:toc} .toc-mobile a{display:block;padding:8px 0;font-size:14px;color:var(--muted)} .post-body{max-width:768px} .post-body h2{font-size:29px;line-height:1.2;letter-spacing:-1.1px;font-weight:600;margin:56px 0 20px;scroll-margin-top:120px} .post-body h2:first-child{margin-top:0} .post-body p{font-size:18px;line-height:1.78;color:var(--muted);margin-bottom:22px} .post-body ul{display:grid;gap:14px;margin:0 0 26px} .post-body li{position:relative;padding-left:30px;font-size:17px;line-height:1.75;color:var(--muted)} .post-body li::before{content:'';position:absolute;left:7px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--accent)} .note{margin:36px 0;padding:26px 28px;border-radius:var(--radius);border:1px solid var(--accent-edge);background:var(--accent-wash)} .note strong{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:11px} .note p{font-size:16px;line-height:1.7;color:var(--text);margin:0;opacity:.85} /* ---- Closing ---- */ .closing{padding:0 0 120px} .closing-inner{position:relative;overflow:hidden;text-align:center;padding:88px 44px 80px;border-radius:24px;border:1px solid var(--accent-edge);background:var(--cream)} .closing-inner h2{font-family:var(--display);font-size:clamp(34px,4.6vw,58px);line-height:1.03;letter-spacing:-2.6px;font-weight:700;margin:20px 0 8px;position:relative;z-index:1;text-wrap:balance} .closing-inner .cta-row{justify-content:center;position:relative;z-index:1} .closing-note{font-size:13.5px;color:var(--dim);margin-top:24px;position:relative;z-index:1} .closing-glow{position:absolute;inset:auto -10% -70% 32%;height:400px;background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);pointer-events:none} /* ---- Footer ---- */ .site-footer{border-top:1px solid var(--line);background:var(--bg-lift);padding:76px 0 38px} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:52px} .footer-brand p{font-size:13.5px;line-height:1.75;color:var(--dim);margin-top:20px;max-width:34ch} .footer-grid h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:20px} .footer-grid div a{display:block;font-size:14.5px;color:var(--muted);padding:7px 0;transition:color .25s,transform .25s var(--ease)} .footer-grid div a:hover{color:var(--accent-ink);transform:translateX(3px)} .footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)} .footer-note{opacity:.75} /* ---- Imprint and privacy policy: plain text at the article measure, no decoration ---- */ .legal{padding-top:64px} .legal-body{max-width:760px;margin-inline:auto} .legal-body h2{font-size:22px;letter-spacing:-.6px;margin:44px 0 16px} .legal-body p,.legal-body li{font-size:16px;line-height:1.75} .legal-lines{font-variant-numeric:tabular-nums;color:var(--text)} .footer-note a{color:var(--muted)} .footer-note a:hover{color:var(--accent-ink)} /* ---- Responsive ---- */ /* Six navigation items plus the actions need the room; the workspace link is the first to go, because the button beside it leads to the same place for anyone who does not have an account yet. */ @media(max-width:1300px){ .nav-links{gap:20px;font-size:14px} .nav{gap:26px} } @media(max-width:1180px){ .shell{width:calc(100% - 52px)} .nav-app{display:none} .post-layout{grid-template-columns:200px minmax(0,1fr);gap:44px} } @media(max-width:1080px){ .nav-links{gap:22px;font-size:14px} .nav-actions{gap:10px} .card-grid.four,.plan-grid,.platform-cards{grid-template-columns:repeat(2,1fr)} .card-grid.three,.post-grid{grid-template-columns:repeat(2,1fr)} .split-panel,.price-teaser,.faq-grid,.caveat-panel,.tab-panel{gap:48px} .enterprise{grid-template-columns:1fr;gap:28px} .band{padding:88px 0} .faq-section{padding:88px 0} } @media(max-width:900px){ .post-layout{grid-template-columns:minmax(0,1fr);gap:0;padding-top:38px} .toc{display:none} .toc-mobile{display:block} .post-head,.post-body{max-width:none} } @media(max-width:860px){ .nav-links,.nav-app,.lang{display:none} .tag{white-space:normal} .nav{height:66px;gap:16px} .nav-actions{margin-left:auto} .hero{padding:72px 0 64px} .hero.sub{padding:56px 0 46px} .hero h1{letter-spacing:-1.8px} .hero-sub{font-size:17px} .montage,.tab-panel,.split-panel,.price-teaser,.faq-grid,.caveat-panel,.install-grid{grid-template-columns:1fr;gap:30px} .montage-art{display:none} .split-panel.reverse>div:first-child{order:0} .band{padding:68px 0} .faq-section{padding:68px 0} .section-head{margin-bottom:38px} .card-grid.four,.card-grid.three,.post-grid,.plan-grid,.platform-cards{grid-template-columns:1fr} .step-grid{grid-template-columns:1fr;gap:28px} .tabs{grid-template-columns:1fr;border-bottom:0} .tabs button{border-bottom:1px solid var(--line);padding:16px 4px} .tabs button[aria-selected=true]{border-bottom-color:var(--accent)} .metrics{gap:14px 30px;justify-content:flex-start;text-align:left} .metrics div{flex-direction:column;gap:2px} .closing-inner{padding:56px 26px 50px} .closing{padding-bottom:68px} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .footer-brand{grid-column:1/-1} .post-body p{font-size:17px} .post-body h2{font-size:25px;margin-top:44px} .plan-for{min-height:0} } @media(max-width:560px){ .shell{width:calc(100% - 36px)} .nav-actions .btn,.nav-actions .hero-eyebrow{flex-direction:column;gap:12px} .hero.sub .hero-eyebrow{align-items:flex-start} .hero h1{font-size:clamp(36px,9vw,46px);letter-spacing:-1.4px} .hero.sub h1{font-size:clamp(31px,7.8vw,40px);letter-spacing:-1.1px} .montage-card>header{flex-wrap:wrap;gap:6px} .cta-row .btn{width:100%} .code-block{font-size:11.5px;padding:15px} .enterprise,.explainer,.closing-inner{padding-inline:24px} .price{font-size:40px} } /* ---- "Folgt": planned, not built. Visually quieter than anything that ships today. ---- */ .soon{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;border:1px dashed var(--line-strong);background:transparent;color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;vertical-align:middle} .soon-card{border-style:dashed} .soon-card h3{color:var(--muted)} /* ---- Support: documentation grouped by topic ---- */ .docs{display:grid;gap:44px} .docs-group h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding-bottom:14px;border-bottom:1px solid var(--line-strong);margin-bottom:6px;scroll-margin-top:120px} .docs-group .faq-list summary{font-size:16px;padding:20px 46px 20px 0} .docs-group .faq-list summary::after{top:28px} .docs-group .faq-list details p{font-size:15px;margin-bottom:22px} /* ---- Comparison pages ---- */ .verdict{max-width:76ch;margin-bottom:38px;padding:30px 34px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)} .verdict p:last-child{font-size:18px;line-height:1.7;color:var(--muted);margin-top:12px} .compare.verbose td,.compare.verbose th{text-align:left;width:auto;font-size:14px;vertical-align:top} .compare.verbose td{color:var(--muted)} .compare.verbose td.featured{color:var(--text);font-weight:500} .two-lists{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start} .two-lists h2{font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-1px;font-weight:600;margin-bottom:26px} /* ---- Product menu glyph, and a left-aligned platform strip inside a panel ---- */ .menu-glyph{display:grid;place-items:center;width:100%;height:100%;font-size:13px;font-weight:700;color:var(--accent-ink)} .platform-strip.start{justify-content:flex-start;margin-top:18px} /* ---- Calculators ---- */ .calc{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start} .calc-fields{display:grid;gap:18px;padding:32px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)} .calc-field{display:grid;gap:9px} .calc-label{font-size:14px;font-weight:500} .calc-label em{font-style:normal;color:var(--dim)} .calc-field small{font-size:12px;color:var(--dim);line-height:1.5} .calc-field input,.calc-field select{ width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg); color:var(--text);font-size:16px;font-variant-numeric:tabular-nums;transition:border-color .25s var(--ease) } .calc-field input:focus,.calc-field select:focus{border-color:var(--accent);outline:none} .calc-results{position:sticky;top:112px;padding:32px;border:1px solid var(--accent-edge);border-radius:var(--radius-lg);background:var(--accent-wash)} .calc-result{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)} .calc-result span{font-size:14px;color:var(--muted)} .calc-result strong{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right} .calc-result.primary{border-bottom:0;padding-top:22px} .calc-result.primary span{font-size:15px;color:var(--text)} .calc-result.primary strong{font-size:30px;letter-spacing:-1px;color:var(--accent-ink)} .calc[data-verdict=better] .calc-result.primary strong{color:var(--win)} .calc-note{font-size:12px;color:var(--dim);line-height:1.6;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .js .calc-note{display:none} .calc .eyebrow{margin-bottom:8px} .calc+.explainer{margin-top:34px} @media(max-width:1080px){ .two-lists{gap:40px} .calc{grid-template-columns:1fr} .calc-results{position:static} } @media(max-width:860px){ .two-lists{grid-template-columns:1fr;gap:36px} .verdict{padding:24px 22px} .calc-fields,.calc-results{padding:24px 22px} .docs{gap:34px} } /* Everything above is decoration; a visitor who asked for less motion gets the page, not the show. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .montage-art svg{animation:none} *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important} .js [data-reveal]{opacity:1;transform:none} .bar i{transition:none} .bar[data-fill="50"] i{width:50%} .bar[data-fill="53"] i{width:53%} .bar[data-fill="80"] i{width:80%} .bar[data-fill="89"] i{width:89%} .btn:hover,.card:hover,.post-card:hover,.plan:hover,.platform-strip a:hover{transform:none} }