/* Demstrap. One graphite tone from the first pixel to the last; content sits straight on it, held by type and space.
       Orange (#ff7a00) only on the primary action, the logo, an open answer and the footer signature. One mono use: file sizes.
       Type scale, seven steps: 12 / 14 / 17 / 24 / 40 / 96 / the hero line. Nothing improvises a size of its own.
       Motion: the hero arrives once, the app window settles as it rises, the floating bar comes down after the hero,
       answers open and close in place, and the signature writes itself once at the very end. */
    @font-face{font-family:'Mona Sans';font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(fonts/mona-sans.woff2) format('woff2')}
    @font-face{font-family:'Dems Display';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/dems-display-black.woff2) format('woff2')}
    @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-mono.woff2) format('woff2')}

    :root{
      --page:#1d1d1f;
      --raise:#2a2a2d;
      --fg:#f5f5f7;
      --fg-1:#e8e8ed;
      --fg-2:#b1b1b6;
      --fg-3:#98989e;
      --panel:#242427;
      --line:rgba(255,255,255,.11);
      --line-2:rgba(255,255,255,.2);
      --accent:#ff7a00;
      --accent-hi:#ff8b1f;
      --accent-ink:#160c00;
      --focus:#ffb95e;
      --sans:'Mona Sans','Segoe UI',system-ui,-apple-system,sans-serif;
      --mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
      /* the scale */
      --t-12:12px;
      --t-14:14px;
      --t-17:17px;
      --t-24:clamp(20px,1.7vw,24px);
      --t-40:clamp(32px,2.8vw,40px);
      --t-96:clamp(56px,6.7vw,96px);
      --t-hero:clamp(46px,6.4vw,96px);
      --wrap:1120px;
      --gutter:clamp(16px,4vw,40px);
      --gap:clamp(12px,1.5vw,20px);
      --nav-h:48px;--pbar-h:52px;
      --sec:clamp(104px,11vw,160px);
      --ease:cubic-bezier(.16,1,.3,1);
      --ease-apple:cubic-bezier(.28,.11,.32,1);
    }

    *,*::before,*::after{box-sizing:border-box}
    html{background:var(--page);color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;overflow-x:clip}
    body{margin:0;background:var(--page);color:var(--fg);font:420 var(--t-17)/1.55 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
    img,svg{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button{font:inherit;color:inherit}
    h1,h2,h3,p,ul,ol{margin:0}
    ul,ol{padding:0;list-style:none}
    ::selection{background:rgba(255,122,0,.35)}
    :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
    [hidden]{display:none!important}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .skip{position:fixed;left:16px;top:8px;z-index:60;padding:14px 18px;border-radius:999px;background:var(--fg);color:#000;font:600 var(--t-14)/1 var(--sans)}
    .skip:not(:focus){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
    .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
    .ic{width:16px;height:16px;flex:none;fill:currentColor}
    .size{font:500 var(--t-14)/1 var(--mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}

    /* type */
    .h-40{font-weight:650;font-size:var(--t-40);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
    .lede{max-width:30em;margin-top:16px;font-weight:540;font-size:var(--t-24);line-height:1.38;letter-spacing:-.018em;color:var(--fg-3);text-wrap:pretty}
    .lede b{font-weight:inherit;color:var(--fg)}
    .lede a,.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);transition:text-decoration-color .2s ease}
    .lede a:hover,.prose a:hover{text-decoration-color:var(--fg)}

    /* buttons: pills, 44px targets; one primary per screen */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;touch-action:manipulation;
      font:580 var(--t-17)/1 var(--sans);letter-spacing:-.012em;white-space:nowrap;background:var(--accent);color:var(--accent-ink);transition:background-color .2s ease,color .2s ease,transform .18s var(--ease)}
    .btn:hover{background:var(--accent-hi)}
    .btn:active{transform:scale(.97)}
    .btn .ic{width:17px;height:17px}
    .btn.is-done,.btn.is-done:hover{background:var(--raise);color:var(--fg)}
    .btn:disabled{cursor:default}

    /* ======================= NAVIGATION ======================= */
    .nav{position:absolute;top:0;left:0;right:0;z-index:40;border-bottom:1px solid var(--line)}
    .nav-in{display:flex;align-items:center;gap:16px;max-width:calc(1024px + var(--gutter)*2);height:var(--nav-h);margin:0 auto;padding:0 var(--gutter)}
    .brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;font:640 var(--t-17)/1 var(--sans);letter-spacing:-.02em;white-space:nowrap}
    .brand .logo{width:20px;height:20px;flex:none}
    .nav-links{display:flex;margin:0 auto}
    .nav-links a{display:inline-flex;align-items:center;height:44px;padding:0 12px;font:450 var(--t-12)/1 var(--sans);color:rgba(245,245,247,.82);transition:color .2s ease}
    .nav-links a:hover{color:#fff}
    .nav-cta{display:flex;align-items:center;margin-right:-12px}
    .nav-icon{display:inline-grid;place-items:center;width:44px;height:44px;color:rgba(245,245,247,.82);transition:color .2s ease}
    .nav-icon:hover{color:#fff}

    .pbar{--pb-ease:cubic-bezier(.32,.72,0,1);position:fixed;z-index:46;top:10px;left:50%;width:min(calc(1024px + var(--gutter)*2),calc(100% - 16px));height:var(--pbar-h);
      transform:translate(-50%,-90px);opacity:0;visibility:hidden;transition:transform .42s cubic-bezier(.5,0,.75,0) .16s,opacity .2s ease .4s,visibility 0s linear .62s}
    .pbar::before{content:'';position:absolute;inset:0;border-radius:18px;background:rgba(22,22,23,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 10px 30px rgba(0,0,0,.35);clip-path:inset(0 calc(50% - 70px) round 18px);transition:clip-path .36s var(--pb-ease)}
    @media (prefers-reduced-transparency:reduce){.pbar::before{background:#161617;-webkit-backdrop-filter:none;backdrop-filter:none}}
    .pbar-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:0 10px 0 16px;opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .2s ease}
    .pbar.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .55s var(--pb-ease),opacity .2s ease,visibility 0s}
    .pbar.on::before{clip-path:inset(0 0 round 18px);transition:clip-path .62s var(--pb-ease) .14s}
    .pbar.on .pbar-in{opacity:1;transform:none;transition:opacity .35s ease .42s,transform .45s var(--pb-ease) .38s}
    .pbar-title{display:flex;align-items:center;gap:10px;font:650 var(--t-17)/1 var(--sans);letter-spacing:-.02em;white-space:nowrap}
    .pbar-title .logo{width:22px;height:22px;flex:none}
    .pbar-title small{font:450 var(--t-14)/1 var(--sans);letter-spacing:0;color:var(--fg-3)}
    .pbar-acts{display:flex;align-items:center;gap:6px}
    .pbar-link{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:450 var(--t-14)/1 var(--sans);color:var(--fg-2);transition:color .2s ease}
    .pbar-link:hover{color:var(--fg)}
    .pbar .btn{height:32px;padding:0 14px;font-size:var(--t-14);position:relative}
    .pbar .btn::before{content:'';position:absolute;inset:-6px -2px}
    .pbar .btn .ic{width:14px;height:14px}
    .pbar:not(.is-pro) .pb-pro,.pbar.is-pro .pb-v6{display:none}
    .pbar.is-pro .pbar-in{animation:pbswap .35s ease}
    @keyframes pbswap{from{opacity:0;transform:translateY(-3px)}}
    @media (prefers-reduced-motion:reduce){.pbar.is-pro .pbar-in{animation:none}}

    /* ======================= HERO: the line, the action, then the product ======================= */
    .hero{position:relative}
    /* The line is set condensed and sized so its longer half runs the full measure, edge to edge of the grid the rest
       of the page sits on. The CTA row, the figure caption and the app window share those same two edges. */
    .hero-in{padding:calc(var(--nav-h) + clamp(64px,12vh,124px)) var(--gutter) 0;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto}
    .hero-h{--m:min(100vw - var(--gutter)*2,var(--wrap));font-weight:800;font-stretch:80%;font-size:min(calc(var(--m) / 8.04),164px);line-height:.9;letter-spacing:-.036em;
      margin-left:-.04em}
    .hero-h span{display:block;white-space:nowrap}
    .hero-h .soft{color:var(--fg-3)}
    .hero-go{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:clamp(36px,5vh,52px)}
    .hero-meta{font-size:var(--t-14);line-height:1.4;color:var(--fg-2)}
    .hero-meta .size{color:var(--fg-2)}
    /* a figure caption on the window's own right edge: the line above says what it is, the window proves it */
    .hero-fig{margin-left:auto;display:flex;align-items:center;gap:10px;font:500 var(--t-12)/1 var(--mono);color:var(--fg-3);white-space:nowrap}
    .hero-fig i{width:22px;height:1px;background:var(--line-2)}
    .hero-shot{position:relative;padding:clamp(44px,6vh,64px) var(--gutter) 0}
    .win{position:relative;width:min(var(--wrap),100%);margin:0 auto;border-radius:clamp(12px,1.3vw,18px);overflow:hidden;background:#070708;transform-origin:50% 0;
      box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1px 0 0 rgba(255,255,255,.06) inset,0 40px 120px -30px rgba(0,0,0,.75)}
    @supports (corner-shape:superellipse(1.6)){.win{corner-shape:superellipse(1.6);border-radius:clamp(15px,1.6vw,22px)}}
    .win img{width:100%;height:auto}
    /* the live app: the real v6.2.0 page, drawn at the window's own 1058 x 628 and scaled to fit. It sits on top of the
       screenshot of that same Home and takes over once it is up, with no fade, so the swap can't be seen */
    .win .live{position:absolute;left:0;top:0;width:1058px;height:628px;border:0;transform-origin:0 0;visibility:hidden;background:#060609;color-scheme:dark}
    .win.is-live .live{visibility:visible}
    .win.is-live{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
    @media (max-width:600px){.win .live{display:none}}

    /* ======================= SECTIONS =======================
       Each section has its own composition, so the page never repeats one layout: DemsV6 is a product sheet (name, facts,
       capabilities, an install panel), Other releases is an index where each build is known by one fact, Made by Dem pairs
       the people with the room they keep, the FAQ reads beside a heading that stays put. All of it hangs on one 12-column
       grid; capability and install columns share the same three tracks (1-4, 5-8, 9-12). */
    .sec{padding-top:var(--sec)}
    .sec-head{max-width:40em}
    .sec-head .lede{margin-top:14px}
    .sub{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
    .sub h3{font-weight:620;font-size:var(--t-17);letter-spacing:-.012em}
    .sub p{font-size:var(--t-14);color:var(--fg-3)}

    /* ---------- DemsV6: the one recommended build ---------- */
    .v6{align-items:end;row-gap:48px}
    .v6-main{grid-column:1/8}
    .v6-id{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
    .v6-id .logo{width:clamp(44px,4.4vw,64px);height:auto;flex:none}
    .v6-name{font-weight:700;font-size:var(--t-96);line-height:.95;letter-spacing:-.05em}
    .v6-main .lede{max-width:23em;margin-top:24px}
    .v6-main .btn{margin-top:32px}
    /* the release facts: everything a careful person checks before running an .exe, in one place */
    .facts{grid-column:9/13;align-self:end}
    .facts p{margin:0}
    .sp-k{font:500 var(--t-14)/1 var(--mono);color:var(--fg-3);letter-spacing:-.01em}
    .sp-ver{margin-top:20px!important;font-weight:760;font-size:clamp(40px,4.4vw,64px);line-height:.92;letter-spacing:-.045em;color:var(--fg);font-variant-numeric:tabular-nums}
    .sp-line{margin-top:12px!important;font-size:var(--t-14);color:var(--fg-3)}
    .sp-file{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:28px!important;padding-top:14px;border-top:1px solid var(--line-2);font-size:var(--t-14)}
    .sp-exe{font-weight:560;color:var(--fg)}
    .sp-file .size{color:var(--fg-2)}
    .sp-free{margin-top:24px!important;font-weight:760;font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:-.03em;color:var(--fg)}
    .sp-free span{color:var(--fg-3);font-weight:560}
    .sp-note{margin-top:10px!important;max-width:34ch;font-size:var(--t-14);line-height:1.5;color:var(--fg-3)}
    .sp-note a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s ease}
    .sp-note a:hover{text-decoration-color:var(--fg)}

    /* What it does: one card per part of the app, each showing that part as it looks in DemsV6. Wide and narrow cards
       alternate (7/5, 5/7, 7/5); every card has the tile's cut corner. Auto-Reapply is the one lit card: the live state. */
    /* The release marquee: one orange band, oversized black type set condensed, the logo symbol (in ink) between
       phrases. Tilted 1.2deg and wider than the page, so both ends run off the edges; the page clips it. */
    .mq{position:relative;width:100vw;margin:clamp(64px,7vw,104px) 0 0 calc(50% - 50vw);padding:clamp(10px,1.2vw,18px) 0;overflow:hidden;pointer-events:none}
    .mq-band{width:108vw;margin-left:-4vw;background:var(--accent);color:var(--accent-ink);transform:rotate(-1.2deg);overflow:hidden}
    .mq-t{display:flex;width:max-content}
    .mq-t>div{display:flex;align-items:center;flex:none}
    .mq span{padding:0 clamp(18px,2vw,34px);font:850 clamp(34px,5.6vw,84px)/1 var(--sans);font-stretch:80%;letter-spacing:-.025em;text-transform:uppercase;white-space:nowrap;
      padding-top:.12em;padding-bottom:.08em}
    /* the separator is the logo itself, flattened to ink */
    .mq-s{width:clamp(18px,2.2vw,32px);height:auto;flex:none}
    .mq-s{fill:var(--accent-ink)}
    @media (prefers-reduced-motion:no-preference){
      .mq-t{animation:mq 48s linear infinite}
      .mq.off .mq-t{animation-play-state:paused}
    }
    @keyframes mq{to{transform:translate3d(-50%,0,0)}}
    .caps{margin-top:clamp(72px,8vw,112px)}
    .caps-h{font-weight:650;font-size:var(--t-40);line-height:1.08;letter-spacing:-.03em}
    .caps ul{margin-top:clamp(24px,3vw,36px);row-gap:var(--gap)}
    .cap{--n:clamp(26px,2.6vw,36px);--pad:clamp(22px,2.4vw,32px);position:relative;display:flex;flex-direction:column;min-width:0;min-height:clamp(280px,24vw,320px);
      overflow:hidden;border-radius:clamp(18px,2vw,24px);background:var(--panel);
      clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
    .cap.w7{grid-column:span 7}
    .cap.w5{grid-column:span 5}
    .cap-t{padding:var(--pad) var(--pad) 0}
    .cap-t b{display:block;font-weight:650;font-size:var(--t-24);line-height:1.15;letter-spacing:-.025em}
    .cap-t p{margin-top:8px;max-width:27em;font-size:var(--t-14);line-height:1.5;color:var(--fg-2);text-wrap:pretty}
    .cap.lit{background:var(--accent);color:var(--accent-ink)}
    .cap.lit .cap-t p{color:rgba(22,12,0,.74)}
    .cap-ui{margin-top:auto;padding:clamp(26px,3vw,40px) 0 0 var(--pad)}

    /* feature card backgrounds: drawn art behind the copy and the app parts, cropped by the card's own edges */
    .cap-t,.cap-ui{position:relative;z-index:1}
    .cap-art{position:absolute;z-index:0;top:0;right:0;width:360px;height:300px;pointer-events:none;overflow:visible}
    .cap-art .ln path{stroke:rgba(255,255,255,.045);stroke-width:1;fill:none}
    .cap-art .ln-f path{stroke:rgba(255,255,255,.028)}
    .cap-art .ln2{stroke:rgba(255,255,255,.07);fill:none}
    .cap-art .tk rect{fill:rgba(255,255,255,.07)}
    .cap-art .tk .m-on{fill:rgba(255,255,255,.17)}
    .cap-art .f1{fill:#29292c;stroke:rgba(255,255,255,.05)}
    .cap-art .f2{fill:#2d2d31;stroke:rgba(255,255,255,.06)}
    .cap-art .f3{fill:#323236;stroke:rgba(255,255,255,.08)}
    .cap-art g[class] use{vector-effect:non-scaling-stroke;stroke-width:1}
    .cap-art .e-o use,.cap-art .e-o2 use{fill:none}
    .cap-art .e-o{stroke:rgba(255,255,255,.13)}
    .cap-art .e-o2{fill:none;stroke:rgba(255,255,255,.1)}
    .cap-art .e-f{fill:#2c2c30;stroke:rgba(255,255,255,.06)}
    .cap-art .e-on{fill:rgba(255,122,0,.14);stroke:rgba(255,122,0,.6)}
    .cap-art .e-big{fill:#27272a;stroke:rgba(255,255,255,.04)}
    .cap-art .crv path{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
    .cap-art .crv .c-hi{stroke:rgba(255,255,255,.16);stroke-width:1.5}
    .cap-art .turn{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
    .cap.lit .disc{fill:rgba(255,255,255,.07)}
    .cap.lit .rings circle{fill:none;stroke:rgba(22,12,0,.1);stroke-width:1}
    .cap.lit .cyc{fill:none;stroke:rgba(22,12,0,.22);stroke-width:9;stroke-linecap:round}
    .cap.lit .cyc-dot{fill:rgba(22,12,0,.22)}
    .cap-art .mm{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.05)}
    .cap-art .mm-t{fill:rgba(255,122,0,.08);stroke:rgba(255,122,0,.45)}
    .cap-art .lbl{font:500 8px/1 var(--mono);fill:rgba(255,255,255,.2);letter-spacing:.02em}
    .cap-art .ln-s{stroke:rgba(255,255,255,.1);fill:none}
    .cap-art .ptr{stroke:rgba(255,122,0,.5);stroke-width:1;fill:none}
    .cap-art .ptr-o{fill:none;stroke:rgba(255,122,0,.5)}
    .cap-art .k{fill:rgba(255,255,255,.05)}
    .cap-art .v{fill:none;stroke:rgba(255,255,255,.1)}
    .cap-art .v-on{fill:rgba(255,122,0,.1);stroke:rgba(255,122,0,.55)}
    .cap-art .el{fill:none;stroke:rgba(255,255,255,.08)}
    .cap-art .gl{stroke:rgba(255,255,255,.06);fill:none}
    .cap-art .cap-d{stroke:rgba(255,122,0,.4);stroke-dasharray:3 4;fill:none}
    .cap-art .ft{stroke:rgba(255,255,255,.16);stroke-width:1.1;fill:none;stroke-linejoin:round}
    /* the tail of the framerate chart: a straight run up through the ceiling, like a ticker on a good day */
    .cap-art .ft-up{fill:none;stroke:rgba(255,122,0,.9);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.55,0,.25,1)}
    .cap-art .ft-lbl{fill:rgba(255,122,0,.75);opacity:0;transition:opacity .4s ease .8s}
    .cap.spike .ft-up{stroke-dashoffset:0}.cap.spike .ft-lbl{opacity:1}
    /* Smart Handle: a brain, side on. Folds are contour lines of one field, clipped to the outline; one orange spark */
    .cap-art .b-o{fill:#29292d;stroke:rgba(255,255,255,.17);stroke-width:1.1}
    .cap-art .b-g{fill:none;stroke:rgba(255,255,255,.11);stroke-width:1;stroke-linecap:round}
    .cap-art .b-s{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.25;stroke-linecap:round}
    .cap-art .b-st{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.1}
    .cap-art .b-on{fill:var(--accent)}
    .cap.lit .cap-art .pl{fill:none;stroke:rgba(14,7,0,.66);stroke-width:1.5;stroke-linejoin:round}
    .cap.lit .cap-art .pl-hi{fill:none;stroke:rgba(14,7,0,.9);stroke-width:1.9}
    .cap.lit .cap-art .pl-b{stroke:rgba(14,7,0,.38);fill:none}
    .cap.lit .cap-art .pl-t{stroke:rgba(14,7,0,.5)}
    .cap.lit .cap-art .pl-l{font:500 8px/1 var(--mono);fill:rgba(14,7,0,.62)}
    .cap.lit .cap-art{-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%);mask-image:linear-gradient(90deg,transparent 4%,#000 30%)}
    @media (max-width:600px){.cap-art{opacity:.7;right:-60px}}

    /* the app's own parts: real v6.2.0 screens (rendered from the app's HTML), framed like a window corner that runs off the card */
    .app.shot{position:relative;margin-bottom:-14px;border-radius:14px 0 0 0;overflow:hidden;background:#070708;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
    .app.shot::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);pointer-events:none}
    .cap.lit .app.shot{box-shadow:0 30px 60px -24px rgba(90,30,0,.55)}
    .app.shot img{display:block;width:100%;height:auto}
    .fps-big{display:flex;align-items:baseline;gap:10px;margin:0 0 clamp(18px,2.4vw,28px)}
    .fps-big b{font-weight:700;font-size:var(--t-96);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
    .fps-big span{font-weight:650;font-size:var(--t-24);letter-spacing:-.02em;color:var(--fg-3)}

    /* install: an editorial timeline. One hairline rail, three tiles of the logo sitting on it (they light in order), each step
       dropping a little further below the rail than the last. No panel, no cards. The fourth tile, still unset, is Roblox. */
    .install{margin-top:clamp(72px,9vw,128px)}
    .install-hd{align-items:end;margin-bottom:clamp(36px,4.5vw,56px)}
    .install-h{grid-column:1/8;font-weight:720;font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
    .install-sub{grid-column:9/13;font-size:var(--t-14);line-height:1.5;color:var(--fg-3)}
    .inst-tl{--rail:11px;position:relative;list-style:none;margin:0;padding:0}
    .inst-tl::before,.inst-tl::after{content:"";position:absolute;left:0;right:0;top:var(--rail);height:1px;background:var(--line-2)}
    .inst-tl::after{z-index:1;right:calc(100% / 12 * 1.5);background:var(--accent);transform:scaleX(var(--p,1));transform-origin:0 50%}
    /* the logo walks the rail: whole at the start, spinning as it goes, leaving one tile at each step (JS adds .anim) */
    .inst-tl.anim{--p:0;--q:0}
    .inst-tl.anim::before,.inst-tl.anim::after{will-change:transform;backface-visibility:hidden}
    .inst-tl.anim::before{transform:scaleX(var(--q));transform-origin:0 50%}
    .inst-tl.anim .st::before{transform:scaleY(0);transform-origin:50% 0;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
    .inst-tl.anim .st.in::before{transform:none}
    .inst-tl.anim .st-m,.inst-tl.anim .inst-end{visibility:hidden}
    .inst-tl.anim .st-m.on,.inst-tl.anim .inst-end.on{visibility:visible}
    .inst-tl.anim .st>:not(.st-m){opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .9s var(--ease)}
    .inst-tl.anim .st.in>:not(.st-m){opacity:1;transform:none}
    .inst-tl.anim .st.in>b{transition-delay:.12s}.inst-tl.anim .st.in>p{transition-delay:.24s}
    .inst-tl.anim .inst-end{opacity:0;transition:opacity .6s ease}
    .inst-tl.anim .inst-end.on{opacity:1}
    .walk{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--accent);z-index:2;pointer-events:none;will-change:transform,opacity}
    .walk.tr{z-index:1}
    /* the ring off an impact: a hairline, no glow, sized by how hard the dot hit */
    .thud{display:none;position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--accent);z-index:1;pointer-events:none;opacity:0;animation:thud .62s cubic-bezier(.2,.7,.3,1) forwards}
    @keyframes thud{0%{transform:scale(.6);opacity:var(--o,.5)}100%{transform:scale(var(--s,3));opacity:0}}
    .st{--drop:0px;position:relative;grid-column:span 4;padding:calc(var(--rail) + 22px + var(--drop)) clamp(12px,2vw,32px) 0 0}
    .st:nth-child(2){--drop:clamp(28px,4vw,56px)}
    .st:nth-child(3){--drop:clamp(56px,8vw,112px)}
    .st-m{position:absolute;left:0;top:0;width:22px;height:22px;z-index:1}
    .st-m::before{content:"";position:absolute;left:5px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
    .st::before{content:"";position:absolute;left:10.5px;top:calc(var(--rail) + 14px);height:calc(var(--drop) + 4px);width:1px;background:var(--line-2)}
    .st:first-child::before{display:none}
    .st-n{display:block;font-weight:800;font-size:clamp(76px,9vw,136px);line-height:.8;letter-spacing:-.065em;color:var(--fg);margin-left:-.04em}
    .st-n span{color:var(--tile-off)}
    .st b{display:block;margin-top:clamp(18px,2vw,26px);font-weight:680;font-size:var(--t-24);line-height:1.15;letter-spacing:-.025em}
    .st p{margin-top:10px;max-width:30ch;font-size:var(--t-14);line-height:1.55;color:var(--fg-2);text-wrap:pretty}
    .st p a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
    .st p a:hover{color:var(--accent)}
    .st p em{font-style:normal;color:var(--fg)}
    .inst-end{position:absolute;right:0;top:0;display:flex;align-items:center;height:22px;padding-left:12px;background:var(--page);font-size:var(--t-12);color:var(--fg-3)}


    /* Other releases opens on a punchline, not a section title: a small aside, a half-size "Well," hanging on the left,
       and "there's more." set to the full measure, pushed right. The two lines drift together as you scroll in;
       the full stop lands last, in orange. */
    .more-hd{--m:min(100vw - var(--gutter)*2,var(--wrap));align-items:end;row-gap:0}
    .more-k{grid-column:1/6;grid-row:1;align-self:end;margin:0 0 .9em;font:500 var(--t-14)/1 var(--mono);color:var(--fg-3);letter-spacing:-.01em}
    .more-k span{display:inline-block}
    .more-h{grid-column:1/-1;grid-row:2;margin:0;font-family:'Dems Display',var(--sans);font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:0;
      font-size:min(calc(var(--m) / 9.4),132px);color:var(--fg)}
    .mh{display:block;overflow:hidden;padding:.06em 0 .04em;margin:-.06em 0 -.04em}
    .mh>span{display:inline-block;will-change:transform}
    .mh-a{font-size:.5em;line-height:.9}
    .mh-b{text-align:right;white-space:nowrap}
    .mh-b i{display:inline-block;font-style:normal;color:var(--accent)}
    .more-lede{grid-column:8/13;grid-row:3;margin:clamp(22px,2.4vw,34px) 0 0;font-weight:540;font-size:var(--t-17);line-height:1.45;letter-spacing:-.012em;color:var(--fg-3);text-wrap:pretty}
    @media (max-width:760px){
      .more-k{grid-column:1/-1}
      .more-h{font-size:calc(var(--m) / 5.1)}
      .mh-b{white-space:normal;line-height:.88}
      .mh-a{font-size:.62em}
      .more-lede{grid-column:2/-1}
    }
    /* the reveal (only with JS and motion allowed): lines rise out of their own clip, the stop drops in with a bounce */
    .more-hd.pre .more-k span,.more-hd.pre .mh>span{transform:translateY(108%)}
    .more-hd.pre .more-lede{opacity:0;transform:translateY(12px)}
    .more-hd.pre .mh-b i{transform:translateY(-1.1em) rotate(-30deg);opacity:0}
    .more-hd .more-k span,.more-hd .mh>span{transition:transform .9s cubic-bezier(.2,.75,.15,1)}
    .more-hd .mh-a>span{transition-delay:.12s}.more-hd .mh-b>span{transition-delay:.26s}
    .more-hd .more-lede{transition:opacity .7s ease .75s,transform .9s cubic-bezier(.2,.75,.15,1) .75s}
    @media (prefers-reduced-motion:no-preference){.more-hd:not(.pre) .mh-b i{animation:stop .7s cubic-bezier(.3,0,.3,1) .95s both}}
    @keyframes stop{0%{transform:translateY(-1.1em) rotate(-30deg);opacity:0}45%{transform:translateY(0) rotate(6deg);opacity:1}65%{transform:translateY(-.14em) rotate(-2deg)}82%{transform:translateY(0) rotate(0)}100%{transform:none;opacity:1}}
    .mh-a,.mh-b{transform:translateX(var(--dx,0px))}

    /* ---------- the motif system. One language, four strengths: the hero field is the full statement; below it the
       tile only returns as quieter derivatives, each used once: a ghost tile row (accent), a dot matrix taken from
       the tile centres (transition), line-only outlines (crop), dashed outlines (footer echo). Never repeated. */
    #download .caps,#more,#team,.foot{position:relative;isolation:isolate}
    .mo{position:absolute;pointer-events:none;z-index:-1}
    .mo svg{display:block;width:100%;height:auto;overflow:visible}
    .mo-caps{right:0;top:8px;width:min(22%,250px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
    .mo-caps .t{fill:rgba(255,255,255,.045)}.mo-caps .t-on{fill:var(--accent)}
    #more{padding-bottom:clamp(110px,11vw,160px)}
    .mo-more{left:0;right:0;bottom:clamp(10px,2vw,30px);height:110px;overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
    .mo-more svg{width:max(100%,1200px);height:100%}
    .mo-more circle{fill:rgba(255,255,255,.11)}.mo-more .on{fill:var(--accent)}
    /* Made by Dem carries the hero's own field (same tiles, tilt and on/off/unset states), cropped and calmer */
    .mo-team{left:0;right:0;top:calc(var(--sec) * .6 + 24px);bottom:0;overflow:hidden;
      --g:max(16px,(100vw - var(--wrap)) / 2);
      -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent 98%),linear-gradient(90deg,#000,#000 calc(var(--g) - 70px),transparent calc(var(--g) + 30px),transparent calc(100% - var(--g) - 30px),#000 calc(100% - var(--g) + 70px));
      -webkit-mask-composite:source-in;
      mask-image:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent 98%),linear-gradient(90deg,#000,#000 calc(var(--g) - 70px),transparent calc(var(--g) + 30px),transparent calc(100% - var(--g) - 30px),#000 calc(100% - var(--g) + 70px));
      mask-composite:intersect}
    .mo-team .fld{position:absolute;left:50%;top:50%;width:max(1700px,120vw);transform:translate(-50%,-50%) rotate(14.6deg)}
    .mo-team .fld svg{width:100%;height:auto}
    .mo-foot{right:0;top:clamp(90px,9vw,130px);width:min(40vw,560px);
      -webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 70%);mask-image:linear-gradient(200deg,#000 10%,transparent 70%)}
    .mo-foot use{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.2;stroke-dasharray:3 5}
    @media (max-width:760px){.mo-caps{display:none}.mo-team .fld{width:max(1100px,280vw)}.mo-foot{width:80vw}}
    /* easter egg: a tapped tile in the hero or Made by Dem fields flips to orange, then quietly goes back */
    .field .t.pop,.mo-team .t.pop{fill:var(--accent)!important;fill-opacity:1;transition:none}
    .field .t.unpop,.mo-team .t.unpop{fill:var(--accent)!important;fill-opacity:0;transition:fill-opacity 1.1s ease}
    .field .t.back,.mo-team .t.back{transition:fill 1.1s ease}
    /* ---------- Other releases: an index. Each build carries one plain tag (Old, Lightest, Legacy, Macro) ---------- */
    .rel{margin-top:clamp(36px,4.5vw,56px);border-top:1px solid var(--line-2)}
    .rel-row{align-items:start;padding:28px 0 26px;border-bottom:1px solid var(--line)}
    .rel-name{grid-column:1/5}
    .rel-name h3{font-weight:650;font-size:var(--t-24);line-height:1.15;letter-spacing:-.025em}
    /* the tag is a tile too: cut at the bottom-right corner */
    .rtag{--n:6px;display:inline-flex;align-items:center;height:24px;margin-top:10px;padding:0 10px;border-radius:7px;background:var(--raise);
      font:620 var(--t-12)/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-1);
      clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
    .rel-desc{grid-column:5/11}
    .rel-desc p{color:var(--fg-2);text-wrap:pretty}
    /* developer's note: an editorial aside in Dem's voice. No box: a hairline rule, a hanging quote mark, a signed line */
    .dnote{position:relative;margin:16px 0 0;padding:1px 0 1px 26px;border-left:1px solid rgba(143,182,255,.32)}
    .dnote blockquote{position:relative;margin:0;font-size:var(--t-14);line-height:1.55;font-style:italic;color:var(--fg-2);text-wrap:pretty}
    .dnote blockquote::before{content:'\201C';position:absolute;left:-.62em;top:-.02em;font:700 1.7em/1 var(--sans);font-style:normal;color:rgba(143,182,255,.7)}
    .dnote figcaption{display:flex;align-items:center;gap:7px;margin-top:8px;font:560 var(--t-12)/1 var(--sans);letter-spacing:.02em;color:var(--fg-3)}
    .dnote figcaption b{font-weight:640;color:#8fb6ff}
    .dnote-i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(92,148,255,.14);color:#8fb6ff}
    .dnote-i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
    /* the kitten as the app draws it while you pet it: happy eyes and mouth, full cheeks, its hearts drifting up */
    .kit .kh{transform-box:fill-box;transform-origin:50% 100%}
    @media (prefers-reduced-motion:no-preference){
      .kit .kh{animation:kheart 2.6s ease-out infinite}
      .kit .kh1{animation-delay:-.9s}.kit .kh2{animation-delay:-1.8s}
    }
    @keyframes kheart{0%{opacity:0;transform:translateY(8px) scale(.5)}25%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scale(1.15) rotate(10deg)}}
    .rel-act{grid-column:11/13;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
    .rel-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:-10px;padding:0 2px;border:0;background:none;cursor:pointer;color:var(--fg);
      font:580 var(--t-14)/1 var(--sans);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:6px;transition:text-decoration-color .2s ease,color .2s ease}
    .rel-go:hover{text-decoration-color:var(--fg)}
    .rel-go .ic{width:15px;height:15px}
    .rel-go.is-done{color:var(--fg-2);text-decoration-color:transparent}
    .rel-act small{font-size:var(--t-12);color:var(--fg-3);white-space:nowrap}
    .inside{margin-top:8px}
    .inside summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer;list-style:none;font-size:var(--t-14);color:var(--fg-3);transition:color .2s ease}
    .inside summary::-webkit-details-marker{display:none}
    .inside summary:hover{color:var(--fg)}
    .inside summary .ic{width:12px;height:12px;transition:transform .35s var(--ease)}
    .inside[open] summary .ic{transform:rotate(180deg)}
    .inside ul{padding:2px 0 4px;font-size:var(--t-14);line-height:1.7;color:var(--fg-2)}
    .inside li{display:inline}
    .inside li+li::before{content:' / ';color:var(--fg-3)}

    /* ---------- DemsPRO: a launch announcement. No band of its own, the page's black runs straight through.
       A quiet mono header, then the original PRO mark from the DemsPRO site set across the full measure,
       then copy on the left and the real app running off the right edge. The mark is the only orange
       besides the button ---------- */
    /* the ink reveal (script: proInk) hides the section until the ink starts, then a WebGL layer the colour of the
       page lies over it and the ink eats through; without script nothing is hidden */
    .pro.ink-on{clip-path:inset(0 0 100% 0)}
    .pro.ink-run{position:relative}
    .pro-ink{position:absolute;z-index:45;left:0;top:0;pointer-events:none;will-change:transform}
    .pro{margin-top:var(--sec);overflow:hidden;overflow:clip;background:#000;padding:clamp(64px,8vw,120px) 0 clamp(64px,8vw,112px)}
    .pro-k{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
      font:500 var(--t-12)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
    .pro-k b{font-weight:600;color:var(--fg)}
    .pro-mark{margin-top:clamp(28px,4vw,56px);line-height:0}
    /* The PRO itself is the DemsPRO site's hero mark, ported as is (website/assets/site.css + site.js): the same mask, fill,
       glow, light band and entrance. Only its size differs: it runs the width of this section's measure. */
    .pro-mark{container-type:inline-size}
    .hn-pro{position:relative;isolation:isolate;display:block;width:100%;height:.8em;font-size:calc(100cqw * 288 / 1127 / .8);line-height:0}
    .hn-pro{--pro-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1127 288'%3E%3Cpath d='M8 0H103V288H4A4 4 0 0 1 0 284V8A8 8 0 0 1 8 0ZM8 0H310A56 56 0 0 1 366 56V154A56 56 0 0 1 310 210H0V8A8 8 0 0 1 8 0ZM103 94V116H254A9 9 0 0 0 263 107V103A9 9 0 0 0 254 94ZM389 0H484V288H385A4 4 0 0 1 381 284V8A8 8 0 0 1 389 0ZM389 0H691A56 56 0 0 1 747 56V154A56 56 0 0 1 691 210H381V8A8 8 0 0 1 389 0ZM484 94V116H635A9 9 0 0 0 644 107V103A9 9 0 0 0 635 94ZM564 209H691L744.7 284.7Q747 288 743 288H624Q620 288 617.7 284.7ZM819 0H1071A56 56 0 0 1 1127 56V232A56 56 0 0 1 1071 288H819A56 56 0 0 1 763 232V56A56 56 0 0 1 819 0ZM879 94A14 14 0 0 0 865 108V180A14 14 0 0 0 879 194H1011A14 14 0 0 0 1025 180V108A14 14 0 0 0 1011 94Z'/%3E%3C/svg%3E")}
    .hn-pro>span,.pro-g>i{position:absolute;inset:0;display:block;
      -webkit-mask:var(--pro-mask) center/100% 100% no-repeat;mask:var(--pro-mask) center/100% 100% no-repeat}
    .pro-w{overflow:hidden;background-color:#fc8502;
      background-image:
        radial-gradient(70% 60% at 22% 0%,rgba(255,238,170,.24),rgba(255,238,170,0) 72%),
        radial-gradient(60% 70% at 86% 100%,rgba(200,40,0,.16),rgba(200,40,0,0) 70%),
        linear-gradient(180deg,#ffbd1c 0%,#fcae02 15%,#fc9a02 32%,#fc8502 50%,#fb6e03 68%,#fb5c04 86%,#f44f08 100%);
      background-image:
        radial-gradient(70% 60% at 22% 0%,rgba(255,238,170,.24),rgba(255,238,170,0) 72%),
        radial-gradient(60% 70% at 86% 100%,rgba(200,40,0,.16),rgba(200,40,0,0) 70%),
        linear-gradient(180deg in oklab,#ffbd1c 0%,#fcae02 15%,#fc9a02 32%,#fc8502 50%,#fb6e03 68%,#fb5c04 86%,#f44f08 100%)}
    .pro-g{-webkit-mask:none!important;mask:none!important;z-index:-1;filter:blur(.03em);opacity:.3;pointer-events:none}
    .pro-g>i{background:linear-gradient(180deg,#fcae02,#fb5704)}
    .pro-sheen{position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;transform:translateX(360%);
      background:linear-gradient(100deg,rgba(255,246,226,0) 0%,rgba(255,246,226,.06) 28%,rgba(255,250,238,.34) 50%,rgba(255,246,226,.06) 72%,rgba(255,246,226,0) 100%)}
    .pro-lead{position:absolute;top:0;bottom:0;left:0;width:26%;pointer-events:none;opacity:0;transform:translateX(385%);
      background:linear-gradient(90deg,rgba(255,240,205,.32) 0%,rgba(255,246,222,.78) 9%,rgba(255,226,160,.42) 26%,rgba(255,206,120,.14) 58%,rgba(255,206,120,0) 100%)}
    @media (prefers-reduced-motion:no-preference){
      .pro-sheen{display:none}
    }
    .pro.idle .pro-sheen{animation-play-state:paused}
    @keyframes pro-sweep{
      0%{transform:translateX(360%)}
      26%{transform:translateX(-120%)}
      100%{transform:translateX(-120%)}
    }
    /* waiting for its entrance: covered (script uncovers it); without script it simply shows */
    html.reveals .pro:not(.pro-in-done) .hn-pro.armed{clip-path:inset(-40% -10% -40% 100%)}
    .pro-in{margin-top:clamp(56px,7vw,104px);align-items:start}
    .pro-copy{grid-column:1/5;padding-top:4px}
    .pro-lede{max-width:17em;font-weight:540;font-size:var(--t-24);line-height:1.42;letter-spacing:-.018em;color:var(--fg-3);text-wrap:pretty}
    .pro-lede b{font-weight:600;color:var(--fg)}
    .pro-go{margin-top:32px}
    .pro-go span{font-size:1.05em;line-height:1}
    .pro-note{margin-top:14px;font:500 var(--t-12)/1.4 var(--mono);color:var(--fg-3)}
    .pro-shot{grid-column:5/-1;margin:0 calc(-1 * (var(--gutter) + max(0px, (100vw - var(--wrap) - var(--gutter) * 2) / 2))) 0 clamp(8px,2.4vw,40px)}
    /* shown up to just past the Offsets card's icons, no further (owner's crop) */
    .pro-shot img{--f:linear-gradient(to right,#000 37.75%,rgba(0,0,0,.82) 47%,rgba(0,0,0,.5) 57%,rgba(0,0,0,.2) 66%,transparent 75.5%);-webkit-mask-image:var(--f);mask-image:var(--f)}
    .pro-shot img{width:min(128%,1040px);max-width:none;height:auto;border-radius:12px 0 0 12px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
    .pro-price{margin-top:clamp(36px,4vw,52px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
    .pro-price b{font-weight:800;font-stretch:80%;font-size:clamp(44px,4.4vw,64px);line-height:.9;letter-spacing:-.03em}
    .pro-price span{font-size:var(--t-14);color:var(--fg-2);max-width:14em;line-height:1.35;text-wrap:balance}
    .pro-ctas{margin-top:clamp(32px,3.4vw,44px);display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
    .pro-ctas .pro-go{margin-top:0}
    .pro-try{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--t-14);color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2,rgba(255,255,255,.25))}
    .pro-try:hover{text-decoration-color:var(--fg)}
    /* What's New: the DemsPRO site's engine card (website/assets/site.css .engine/.efig), taken over as is and tightened.
       The heading and copy, then one row per feature: its clip running off the card's edge (left for Raycast, right
       for Desync), the number beside it. PRO's card is black on graphite; here the page is black, so the card is graphite. */
    .pro-new-h{margin:clamp(88px,9vw,136px) 0 clamp(22px,2.4vw,32px);font-weight:700;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.04em}
    .pro-new-h+.engine{margin-top:0}
    .engine{--pc:clamp(24px,3.2vw,44px);margin-top:clamp(88px,9vw,136px);margin-inline:calc(-1 * clamp(0px,(100vw - var(--wrap) - var(--gutter)*2)/2 - 24px,40px));
      padding:var(--pc) 0;border-radius:clamp(22px,2.4vw,30px);background:#0f0f11;overflow:hidden;isolation:isolate}
    @supports (corner-shape:superellipse(1.6)){.engine{corner-shape:superellipse(1.6);border-radius:calc(clamp(22px,2.4vw,30px)*1.22)}}
    .engine-copy{max-width:720px;padding:0 var(--pc)}
    .eng-h{margin:0;font-weight:650;font-size:clamp(26px,2.8vw,40px);line-height:1.07;letter-spacing:-.031em;text-wrap:balance}
    .engine-copy .copy{margin:clamp(12px,1.6vw,18px) 0 0;max-width:34em;font-weight:560;font-size:clamp(16px,1.35vw,19px);line-height:1.42;letter-spacing:-.016em;color:var(--fg-3);text-wrap:pretty}
    .engine-copy .hi{font-weight:inherit;color:var(--fg)}
    .engine-figs{display:grid;gap:clamp(28px,4vh,48px);margin-top:clamp(28px,4vh,44px)}
    .efig{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3.6vw,52px);margin:0;padding-right:var(--pc)}
    .efig-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);padding:0 0 0 var(--pc)}
    .efig-flip .efig-media{order:2}
    .efig-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:0 18px 18px 0;background:#0a0a0b}
    .efig-flip .efig-media{border-radius:18px 0 0 18px}
    .efig-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-apple)}
    @media (hover:hover){.engine:hover .efig-media video{transform:scale(1.035)}}
    .efig-n{display:block;font-weight:700;font-size:clamp(56px,6.4vw,96px);line-height:.9;letter-spacing:-.055em;color:var(--fg);font-variant-numeric:tabular-nums}
    .efig-t{display:block;max-width:19em;margin-top:clamp(12px,1.6vh,18px);font-size:clamp(15px,1.2vw,17px);line-height:1.45;letter-spacing:-.01em;color:var(--fg-3);text-wrap:pretty}
    .efig-t b{font-weight:560;color:var(--fg)}
    @media (max-width:760px){
      .engine{margin-inline:calc(var(--gutter) * -1);border-radius:0}
      .efig,.efig-flip{grid-template-columns:1fr;gap:18px;padding:0}
      .efig-flip .efig-media{order:0}
      .efig-media,.efig-flip .efig-media{border-radius:0}
      .efig figcaption{padding:0 var(--pc)}
      .engine-figs{gap:36px}
      .efig-n{font-size:clamp(50px,14vw,64px)}
    }

    /* DemsV6 or DemsPRO: the DemsPRO site's comparison (site.css .cmp), product names on a sticky header, the PRO column
       set on its own soft panel, row lines only */
    .pro-cmp{margin-top:clamp(104px,11vw,168px)}
    .pro-cmp-h{font-weight:700;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.04em}
    .pro-cmp-lede{margin-top:14px;max-width:30em;font-size:var(--t-24);line-height:1.38;letter-spacing:-.018em;color:var(--fg-3)}
    .cmp{--c1:52%;--c2:24%;position:relative;isolation:isolate;width:100%;margin-top:clamp(28px,4vw,48px);border-collapse:separate;border-spacing:0;table-layout:fixed}
    .cmp::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(var(--c1) + var(--c2));width:var(--c2);border-radius:18px;background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
    .cmp-c-feat{width:var(--c1)}.cmp-c-prod{width:var(--c2)}
    .cmp th,.cmp td{padding:20px clamp(10px,2vw,24px);font-weight:inherit;text-align:center;vertical-align:middle}
    .cmp thead th{position:sticky;top:calc(var(--pbar-h) + 16px);z-index:2;padding-top:20px;padding-bottom:16px;vertical-align:bottom;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
    @media (prefers-reduced-transparency:reduce){.cmp thead th{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}}
    .cmp thead th:last-child{background:#1c1c1e;border-radius:18px 18px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
    .cmp thead th:last-child .cmp-price{color:var(--accent)}
    .cmp thead th:nth-child(2) .cmp-name{color:var(--fg-2)}
    .cmp th:first-child{padding-left:0;text-align:left}
    .cmp-name{display:block;font-weight:650;font-size:clamp(17px,1.9vw,24px);line-height:1.15;letter-spacing:-.025em;color:var(--fg)}
    .cmp-price{display:block;margin-top:4px;font-size:clamp(13px,1.1vw,15px);color:var(--fg-2)}
    .cmp tbody tr>*{border-top:1px solid var(--line)}
    .cmp tbody th[scope=row]{padding-left:12px;font-weight:500;font-size:clamp(15px,1.25vw,17px);line-height:1.35;letter-spacing:-.014em;color:var(--fg);text-wrap:pretty}
    .cmp tbody tr:not(.cmp-grp)>*{transition:background-color .25s ease}
    @media (hover:hover){.cmp tbody tr:not(.cmp-grp):hover>*{background-color:rgba(255,255,255,.035)}}
    .cmp-sub{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;letter-spacing:0;color:var(--fg-3)}
    .cmp .cmp-grp>*{padding:clamp(34px,5vh,48px) 0 12px 12px;border-top:0;text-align:left;font-weight:650;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.022em;line-height:1.2;color:var(--fg)}
    .cmp .cmp-grp-pro>th::before{content:'';display:inline-block;width:7px;height:7px;margin:0 10px .18em 0;border-radius:50%;background:var(--accent);vertical-align:middle}
    .yes,.no{display:inline-block;vertical-align:middle}
    .yes svg{display:block;width:20px;height:20px;fill:none;stroke:var(--fg-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .cmp td:last-child .yes svg{stroke:var(--accent)}
    .no{width:14px;height:2px;border-radius:1px;background:#6e6e73}
    /* compact pass: same table, tighter rows and a narrower measure so it reads at a glance */
    .pro-cmp .cmp{max-width:880px;margin-left:auto;margin-right:auto}
    .pro-cmp .cmp th,.pro-cmp .cmp td{padding-top:11px;padding-bottom:11px}
    .pro-cmp .cmp thead th{padding-top:14px;padding-bottom:12px}
    .pro-cmp .cmp-name{font-size:clamp(15px,1.4vw,19px)}
    .pro-cmp .cmp-price{font-size:13px;margin-top:2px}
    .pro-cmp .cmp tbody th[scope=row]{font-size:clamp(14px,1.1vw,15.5px)}
    .pro-cmp .cmp .cmp-grp>*{padding:22px 0 8px 12px;font-size:clamp(15px,1.3vw,17px)}
    .pro-cmp .cmp .yes svg{width:17px;height:17px}
    .pro-cmp-h,.pro-cmp-lede{max-width:880px;margin-left:auto;margin-right:auto}
    .pro-cmp-h{font-size:clamp(28px,3vw,42px)}
    .pro-cmp-lede{font-size:var(--t-17)}
    /* Still not decided?: the "Well, there's more." punchline again, closing PRO with a way out to its own site */
    .undecided{margin-top:clamp(104px,11vw,168px)}
    .und-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
    .und-go:hover{color:var(--accent)}
    /* Still not decided: everything on the centre line. The two lines arrive on their own once it is on screen (no
       scroll scrubbing), each from its own side, and settle tighter than "Well, there's more." */
    .undecided{justify-items:center;text-align:center}
    .undecided .more-k{grid-column:1/-1;margin-bottom:1.1em}
    .undecided .more-h{grid-column:1/-1;line-height:.8}
    .undecided .mh{text-align:center}
    .undecided .mh-a{margin-bottom:-.02em}
    .undecided .more-lede{grid-column:3/11;max-width:34em;display:flex;flex-direction:column;align-items:center;text-align:center}
    .undecided .mh-a,.undecided .mh-b{transform:none}
    .undecided .mh>span{transition:transform 1.15s cubic-bezier(.16,.84,.2,1),opacity .6s ease}
    .undecided.pre .mh-a>span{transform:translateX(-46%);opacity:0}
    .undecided.pre .mh-b>span{transform:translateX(30%);opacity:0}
    .undecided .mh-a>span{transition-delay:.05s}.undecided .mh-b>span{transition-delay:.12s}
    .undecided .more-lede{transition-delay:.85s}
    @media (max-width:760px){.undecided .more-h{font-size:calc(var(--m) / 6.3)}.undecided .mh-a{font-size:.5em}.undecided .more-lede{grid-column:1/-1}}
    .cmp-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(40px,6vh,64px);text-align:center}
    .cmp-note{font-size:14.5px;color:var(--fg-3)}
    @media (max-width:760px){
      .cmp{--c1:40%;--c2:30%}
      .cmp thead th:not(:first-child){padding-left:4px;padding-right:4px}
      .cmp-name{font-size:clamp(14px,4.4vw,17px)}
      .cmp th,.cmp td{padding:14px 8px}
      .cmp th:first-child,.cmp tbody th[scope=row],.cmp .cmp-grp>th{padding-left:6px}
      .cmp thead th{padding-top:14px;padding-bottom:12px}
    }
    @media (max-width:900px){
      .pro-copy{grid-column:1/-1}
      .pro-shot{grid-column:1/-1;margin-left:0;margin-top:44px}
      .pro-shot img{width:150%}
    }
    @media (max-width:600px){.pro-shot img{width:230%}}

    /* ---------- Made by Dem: the section is the symbol. Four tiles, notches meeting in the middle like the logo's:
       the two people who make it, the kitten that lives in the app, and the room where everyone meets (lit) ---------- */
    .team-w{align-items:center;row-gap:48px}
    .team-head{grid-column:1/6}
    .team-head .lede{margin-top:14px}
    .team-note{margin-top:28px;max-width:21em;font-size:var(--t-14);line-height:1.55;color:var(--fg-3)}
    .board{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--tgap)}
    .tile{--n:clamp(24px,2.6vw,38px);position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0;aspect-ratio:1;
      padding:clamp(18px,2vw,26px);border-radius:clamp(18px,2vw,26px);background:var(--panel)}
    .n-br{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
    .n-bl{clip-path:polygon(0 0,100% 0,100% 100%,var(--n) 100%,0 calc(100% - var(--n)))}
    .n-tr{clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%)}
    .n-tl{clip-path:polygon(var(--n) 0,100% 0,100% 100%,0 100%,0 var(--n))}
    .avatar{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;background:#333337;overflow:hidden;font:640 20px/1 var(--sans);color:var(--fg)}
    .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
    .avatar img.ok{opacity:1}
    .tile b{display:block;font-weight:650;font-size:var(--t-24);line-height:1.15;letter-spacing:-.025em}
    .tile p>span,.tile .dc-t>span{display:block;margin-top:6px;font-size:var(--t-14);line-height:1.45;color:var(--fg-2)}
    .kit-tile{align-items:flex-start}
    .kit{width:clamp(64px,7vw,96px);height:auto;margin:-4px 0 0 -6px}
    .dc{background:var(--accent);color:var(--accent-ink);transition:background-color .2s ease}
    .dc:hover{background:var(--accent-hi)}
    .dc .dc-t>span{color:rgba(22,12,0,.72)}
    .dc-top{display:flex;align-items:center;justify-content:space-between}
    .dc-mark{width:30px;height:30px;flex:none;fill:currentColor}
    .dc-go{width:20px;height:20px;flex:none;fill:currentColor;transition:transform .25s var(--ease)}
    .dc:hover .dc-go{transform:translate(3px,-3px)}
    .dc:focus-visible{outline-offset:4px}

    /* ---------- FAQ: the heading stays beside the answers while they are read ---------- */
    .faq-wrap{align-items:start}
    .faq-aside{grid-column:1/5;position:sticky;top:96px}
    .faq-aside .lede{font-size:var(--t-17);margin-top:12px}
    .faq{grid-column:5/13;border-top:1px solid var(--line-2)}
    .faq details{border-bottom:1px solid var(--line)}
    .faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:22px 0;cursor:pointer;list-style:none;
      font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.016em;line-height:1.3;color:var(--fg-1);transition:color .2s ease}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:hover,.faq details[open] summary{color:#fff}
    .faq summary:focus-visible{outline-offset:-2px;border-radius:6px}
    .faq summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s ease,background-color .2s ease}
    .faq summary i::before,.faq summary i::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;border-radius:1px;background:currentColor;transition:transform .35s var(--ease)}
    .faq summary i::after{transform:rotate(90deg)}
    .faq summary:hover i{box-shadow:inset 0 0 0 1px var(--fg-3)}
    .faq details[open] summary i{background:var(--accent);box-shadow:none;color:var(--accent-ink)}
    .faq details[open] summary i::after{transform:rotate(0deg)}
    .faq .a{max-width:38em;padding:0 56px 26px 0;color:var(--fg-2);font-size:var(--t-17);line-height:1.6}
    .faq .a b{font-weight:600;color:var(--fg)}
    /* ======================= FOOTER: an index, then the signature ======================= */
    .foot{--axis:minmax(0,1fr) minmax(0,3fr);padding-top:calc(var(--sec) * .85);font-size:var(--t-14)}
    .foot-row,.foot-legal{display:grid;grid-template-columns:var(--axis);column-gap:var(--gap);align-items:start;border-top:1px solid var(--line)}
    .foot-row{padding:6px 0}
    .foot-k{display:flex;align-items:center;min-height:44px;margin:0;font:620 var(--t-14)/1.3 var(--sans);letter-spacing:-.01em;color:var(--fg)}
    .foot .brand{font-size:var(--t-14)}
    .foot-about{max-width:58ch;padding:12px 0;line-height:1.5;color:var(--fg-3);text-wrap:pretty}
    .foot-links{display:flex;flex-wrap:wrap;column-gap:clamp(20px,2.8vw,40px)}
    .foot-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--fg-2);transition:color .2s ease}
    .foot-links a:hover{color:var(--fg)}
    .foot-links .ic{width:15px;height:15px;color:var(--fg-3);transition:color .2s ease}
    .foot-links a:hover .ic{color:var(--fg)}
    .foot-legal{padding:4px 0;font-size:var(--t-12);color:var(--fg-3)}
    .foot-legal .foot-k{font:inherit;color:inherit}
    .foot-legal p{display:flex;align-items:center;min-height:44px;margin:0}

    /* the one ink moment on the page: the Demstrap signature, as on the DemsPRO site: full-bleed name with "Keep cooking." in brush pen */
.foot-mark{margin-top:clamp(8px,1.5vh,16px);overflow:hidden;overflow:clip}
.foot-sig{--ink:#ff6a1f;--paper:#ecebe7;--hw:clamp(250px,35.5vw,920px);--st:max(2.8vw,42px);
  --cap:calc(var(--st) + var(--hw) * .1834 - var(--hw) * .027);--fs:calc(103vw / 4.839);
  position:relative;container-type:inline-size;isolation:isolate}
@supports (width:1cqw){.foot-sig{--hw:clamp(250px,35.5cqw,920px);--fs:calc(103cqw / 4.839)}}
.foot-word{position:relative;z-index:0;display:block;width:max-content;font-size:var(--fs);
  margin:calc(var(--cap) - .151em) 0 -.12em calc(-.9cqw - .047em);font-weight:900;font-stretch:112.5%;
  line-height:1;letter-spacing:-.065em;white-space:nowrap;color:var(--paper);user-select:none;-webkit-user-select:none}
.sig-hand{position:absolute;z-index:2;display:block;overflow:visible;fill:var(--ink);pointer-events:none}
.sig-hand{left:18cqw;top:var(--st);width:var(--hw);height:calc(var(--hw) * 93 / 338)}
.sig-pen{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
/* with motion, the pen writes once when the band is in view: every stroke is cut into pieces that never cross themselves,
   each revealed through its own mask (so no pass leaks ink onto another), driven by site.js at a hand's pace. Once written,
   the dashes come off and the ink is the plain static drawing, the same one reduced motion and no-JS see. */
html.sig-draw .sig-pen{stroke-dasharray:1 1.2;stroke-dashoffset:1.1}
html.sig-draw .foot-sig.done .sig-pen{stroke-dasharray:none;stroke-dashoffset:0}



    /* ======================= THE TILE: Demstrap's graphic language =======================
       Everything decorative on the page is one shape: a single tile of the symbol, a soft square with one corner cut
       where it meets the other three. A tile is a flag: lit (orange) is on, graphite is off, an outline is unset.
       Four tiles with their cuts meeting make the symbol; many make a field of symbols, set at the symbol's own 14.6° tilt.
       Uses: a config board behind the app window in the hero, flag lines between sections (each a real-looking FFlag set to true), a
       progress symbol that completes as you install, a mark per release, the team as the symbol itself, a question
       mark set in tiles. Nothing else decorates. */
    :root{--tile-off:#2b2b2f;--tile-ghost:rgba(255,255,255,.085);--tgap:clamp(8px,1vw,12px)}
    .t-on{fill:var(--accent)}
    .t-off{fill:var(--tile-off)}
    .t-ghost{fill:none;stroke:var(--tile-ghost);stroke-width:1.1;vector-effect:non-scaling-stroke}
    .t-hi{fill:#3a3a3f}

    /* the hero's config board: a field of symbols, mostly unset, a few flags switching on as the page opens */
    .hero{isolation:isolate}
    .hero-in{position:relative;z-index:2}
    .hero-shot{position:relative;z-index:1}
    /* the config board now runs behind the app window: the window sits in the field of flags it sets. It fades out
       above (the line stays on clean ground) and below (it never reaches the next section). */
    .field-clip{position:absolute;z-index:0;left:0;right:0;top:calc(clamp(44px,6vh,64px) - 90px);height:clamp(520px,58vw,860px);overflow:hidden;pointer-events:none;
      -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 20%,#000 52%,transparent 88%);mask-image:linear-gradient(180deg,transparent 4%,#000 20%,#000 52%,transparent 88%)}
    .field{position:absolute;left:50%;top:50%;width:max(1800px,125vw);transform:translate(-50%,-50%) rotate(14.6deg);pointer-events:none}
    .field svg{width:100%;height:auto;overflow:visible}

    /* flag lines: the seam between two sections, a row of tiles turning through the symbol's four positions */
    .has-strip{padding-top:calc(var(--sec) * .6)}
    .strip{position:relative;margin-bottom:calc(var(--sec) * .62);height:12px}
    .strip-row{position:absolute;inset:0;overflow:hidden}
    .strip-row svg{position:absolute;left:50%;top:0;height:12px;width:auto;max-width:none;transform:translateX(-50%);overflow:visible}
    .strip-k{position:relative;height:12px;display:flex;align-items:center}
    .strip-k code{position:relative;padding:0 14px 0 0;margin-left:-1px;background:var(--page);font:500 var(--t-12)/1 var(--mono);color:var(--fg-2);white-space:nowrap;box-shadow:-40px 0 0 var(--page)}
    .strip-k code i{font-style:normal;color:var(--fg-3)}
    .strip-k code em{font-style:normal;color:var(--accent)}
    .strip .t-on{fill:var(--tile-off);transition:fill .3s ease calc(var(--d,0) * 1ms)}
    .strip.lit .t-on{fill:var(--accent)}


    /* a mark per release: the symbol with its own flags set. DemsV6 is the whole symbol; every other build lights fewer */
    .sigil{display:block;width:34px;height:34px;flex:none;margin-top:2px}
    .sigil svg{width:100%;height:100%;transform:rotate(14.6deg);transition:transform .6s var(--ease)}
    .rel-name{display:flex;align-items:flex-start;gap:16px}


    /* the FAQ's question mark, set in tiles; its dot is the one lit flag */
    .qmark{width:clamp(112px,11vw,156px);margin-top:44px}
    .qmark svg{width:100%;height:auto;overflow:visible}

    @media (prefers-reduced-motion:no-preference){
      @keyframes tin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
      @keyframes lit{0%,60%{fill:var(--tile-off)}100%{fill:var(--accent)}}
      .field .t{transform-box:fill-box;transform-origin:50% 50%;animation:tin .7s var(--ease) calc(var(--d,0) * 1ms + 250ms) both}
      .field .t-on{animation:tin .7s var(--ease) calc(var(--d,0) * 1ms + 250ms) both,lit 1.6s ease calc(var(--d,0) * 1ms + 700ms) both}
    }

    /* toast */
    .toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:440px}
    .toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:999px;font-size:var(--t-14);
      background:rgba(22,22,23,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 50px -12px rgba(0,0,0,.8);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .35s var(--ease),transform .45s var(--ease)}
    .toast.show{opacity:1;transform:none}
    .toast .ok{width:16px;height:16px;color:var(--fg)}
    .toast button{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border:0;border-radius:50%;background:none;color:var(--fg-3);cursor:pointer}
    .toast button:hover{color:var(--fg);background:rgba(255,255,255,.06)}
    .toast button .ic{width:14px;height:14px}

    /* resume toast: after a reload the page comes back at the section you were in, with its animations from the start */
    .toast .rs-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
    .toast .rs-t{color:var(--fg-3)}.toast .rs-t b{font-weight:600;color:var(--fg)}
    .toast .rs-top{width:auto;height:30px;padding:0 12px;border-radius:999px;font:inherit;font-weight:560;color:var(--fg);background:rgba(255,255,255,.07)}
    .toast .rs-top:hover{background:rgba(255,255,255,.12)}
    /* ======================= MOTION (only with motion allowed; no JS and reduced motion see everything) ======================= */
    @media (prefers-reduced-motion:no-preference){
      @keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
      .hero-h span{animation:up 1.1s var(--ease) both}
      .hero-h span:nth-child(2){animation-delay:.14s}
      .hero-go{animation:up 1s var(--ease) .32s both}
      .hero-shot{animation:up 1.2s var(--ease) .46s both}
      /* answers and release details open and close in place, so it is clear where the text came from */
      @supports (interpolate-size:allow-keywords){
        :root{interpolate-size:allow-keywords}
        .faq details::details-content,.inside::details-content{block-size:0;overflow:clip;opacity:0;
          transition:block-size .42s var(--ease),opacity .3s ease,content-visibility .42s allow-discrete}
        .faq details[open]::details-content,.inside[open]::details-content{block-size:auto;opacity:1}
      }
    }
    html.reveals .rv{transition:opacity .9s var(--ease-apple),transform 1.1s var(--ease-apple)}
    html.reveals .rv[data-d="1"]{transition-delay:.12s}
    html.reveals .rv:not(.in){opacity:0;transform:translateY(28px)}

    /* ======================= RESPONSIVE ======================= */
    @media (max-width:1000px){
      .team-head{grid-column:1/-1}
      .step{grid-column:span 4}
      .board{grid-column:1/-1}
      .tile{aspect-ratio:auto;min-height:clamp(196px,26vw,240px)}
    }
    @media (max-width:900px){
      .faq-aside{position:relative;padding-right:120px}
      .qmark{position:absolute;right:0;top:4px;width:84px;margin:0}
    }
    @media (max-width:760px){
      .field{width:max(1100px,280vw)}
      .hero-h{font-size:calc((100vw - var(--gutter)*2) / 4.7);line-height:.92}
      .hero-h span{white-space:normal;text-wrap:balance}
      .hero-fig{display:none}
      .tile{aspect-ratio:auto;min-height:196px;--n:22px}
      .tile b{font-size:19px}
      .avatar{width:44px;height:44px;font-size:17px}
      .qmark{width:62px}
      .faq-aside{padding-right:84px}
      .rel-name{gap:12px}
      .sigil{width:28px;height:28px}
    }

    @media (max-width:1000px){
      .rel-name{grid-column:1/5}
      .rel-desc{grid-column:5/11}
      .rel-act{grid-column:11/13;grid-row:1}
      .cap.w7,.cap.w5{grid-column:span 6}
    }
    @media (max-width:900px){
      .v6-main,.facts{grid-column:1/-1}
      .facts{margin-top:8px}
      .cap.w7,.cap.w5{grid-column:1/-1}
      .cap{min-height:0}
      .faq-aside,.faq{grid-column:1/-1}
      .faq-aside{position:relative;top:auto;margin-bottom:24px}
    }
    @media (max-width:760px){
      body{font-size:16px}
      .nav-in{gap:8px}
      .nav-links{margin:0 0 0 auto}
      .nav-links a{padding:0 7px}
      .nav-cta{display:none}
      .hero-in{padding-top:calc(var(--nav-h) + 72px)}
      .hero-go{flex-direction:column;align-items:flex-start}
      .cap{--n:24px}
      .cap-ui{padding-top:24px}
      .install-h,.install-sub{grid-column:1/-1}
      .install-sub{margin-top:12px}
      .inst-tl{display:block;padding-bottom:40px}
      .inst-tl::before,.inst-tl::after{left:10.5px;right:auto;top:11px;bottom:11px;width:1px;height:auto}
      .inst-tl::after{bottom:52px;transform:scaleY(var(--p,1));transform-origin:50% 0}
      .inst-tl.anim::before{transform:scaleY(var(--q));transform-origin:50% 0}
      .st{--drop:0px!important;padding:0 0 40px 46px}
      .st::before{display:none}
      .st-n{font-size:72px;margin-top:-4px}
      .st b{margin-top:14px}
      .inst-end{top:auto;bottom:0;left:0;right:auto}
      .rel-row{grid-template-columns:minmax(0,1fr) auto;row-gap:14px}
      .rel-name{grid-column:1;grid-row:1}
      .rel-act{grid-column:2;grid-row:1}
      .rel-desc{grid-column:1/-1;grid-row:2;margin-top:0}
      .faq .a{padding-right:0}
      .foot{--axis:1fr}
      .foot-row,.foot-legal{grid-template-columns:1fr}
      .foot-about{padding-top:0}
      .foot-legal p{min-height:0;padding-bottom:12px}
    }
    @media (max-width:440px){
      .pbar-title span,.pbar-title small{display:none}
    }
    @media (max-width:370px){
      .brand span{display:none}
    }

    /* display type: Dems Display Black (the owner's own face, capitals, figures and punctuation only), set in capitals
       on the headlines, the marquee and the big numbers; body copy stays Mona Sans. Sizes are set to keep the old measure */
    .hero-h,.v6-name,.mq span,.h-40,.caps-h,.pro-new-h,.pro-eng-h,.pro-cmp-h{font-family:'Dems Display',var(--sans);font-weight:900;font-stretch:normal;text-transform:uppercase}
    .hero-h{font-size:min(calc(var(--m) / var(--hd,16.6)),120px);line-height:1;letter-spacing:0}

    /* Controls, cards and pictures are for clicking, not for copying: a click or drag on them never starts a text selection. Body copy stays selectable. */
    a,button,summary,label,nav,.tile,.rel-row,.nav-icon,.btn,svg,img,picture,video,.win,.pro-shot{-webkit-user-select:none;user-select:none}
    img,svg,video{-webkit-user-drag:none}
    .rn-vid{pointer-events:none}
    /* Smart Handle: a static brain, its folds grown as a labyrinth inside the outline (lit ridges on dark grooves) */
    .cap-art .br-bg{fill:#1c1c1f;stroke:rgba(255,255,255,.22);stroke-width:.9}
    .cap-art .br-gy{fill-rule:evenodd;stroke:rgba(255,255,255,.15);stroke-width:.55;stroke-linejoin:round}
    .cap-art .br-cb{fill:#2b2b30;stroke:rgba(255,255,255,.2);stroke-width:.8}
    .cap-art .br-fo{fill:none;stroke:rgba(255,255,255,.11);stroke-width:.6}
    .cap-art .br-st{fill:none;stroke:rgba(255,255,255,.15);stroke-width:.9}
    /* light horizon: one thin amber line across the full width with a low glow on it. Static. It sits in the empty band
       between blocks (under the PRO wordmark, above "Still not decided?"), never behind type or pictures. */
    .hz{position:relative;height:1px;width:100vw;margin-left:calc(50% - 50vw);pointer-events:none}
    .hz::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 4%,rgba(255,122,0,.55) 26%,#ffb44a 50%,rgba(255,122,0,.55) 74%,transparent 96%)}
    .hz::after{content:"";position:absolute;left:18%;right:18%;top:-46px;height:92px;background:radial-gradient(50% 50% at 50% 50%,rgba(255,122,0,.2),rgba(255,122,0,.06) 45%,transparent 72%)}
    .und-hz{margin-top:clamp(96px,10vw,152px)}
    .und-hz+.undecided{margin-top:clamp(56px,6vw,88px)}
    /* 3.7x and 4x in the owner's display face */
    .efig-n{font-family:'Dems Display',var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:0;font-variant-numeric:normal}
    /* PRO sits closer to "Well, there's more." */
    #more{padding-bottom:clamp(40px,4vw,64px)}
    .pro{margin-top:clamp(24px,3vw,48px)}
    /* resume toast, editorial: a flag line, a display headline that talks back, one plain line, one way out */
    .toast.rs{align-items:flex-end;gap:20px;padding:18px 18px 18px 22px;border-radius:18px;background:#0e0e10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.5)}
    .rs-body{display:grid;gap:8px;min-width:0}
    .rs-k{font:500 var(--t-12)/1 var(--mono);color:var(--fg-3)}
    .rs-k i{font-style:normal;color:var(--fg-3)} .rs-k em{font-style:normal;color:var(--accent)}
    .rs-h{margin:2px 0 0;font-family:'Dems Display',var(--sans);font-weight:900;text-transform:uppercase;font-size:clamp(24px,3vw,30px);line-height:.9;letter-spacing:0;color:var(--fg)}
    .toast .rs-t{margin:0;font-size:var(--t-14);line-height:1.4;color:var(--fg-3)}
    .toast.rs .rs-top{flex:none;height:36px;padding:0 14px;color:var(--accent-ink);background:var(--accent);font-weight:620}
    .toast.rs .rs-top:hover{background:var(--accent-hi)}
    .toasts:has(.rs){max-width:540px}
    .toast.rs .rs-top{white-space:nowrap}
    @media (min-width:600px){.rs-h{white-space:nowrap}}
    .toast.rs .rs-top{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:6px}