/* ---------- theme tokens ---------- Three palettes are defined for review: dark (default), dim, light. The palette is selected by the data-rv attribute on ; the floating switcher near the bottom of this file lets reviewers compare them and can be deleted once one is chosen. Every colour below is a token: no component rule hardcodes a colour, so a palette is a self-contained block. */ :root, [data-rv="dark"]{ color-scheme:dark; --bg:#08090B; --bg-2:#0C0E11; --surface:#111418; --surface-2:#161A1F; --surface-3:#191D22; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --hover:rgba(255,255,255,.05); --hover-soft:rgba(255,255,255,.04); --nav-bg:rgba(8,9,11,.78); --text:#EDEEF0; --text-alt:#868D96; --muted:#959BA4; --muted-2:#7C838C; --red:#FF2800; --red-soft:rgba(255,40,0,.14); --red-line:rgba(255,40,0,.30); --red-line-strong:rgba(255,40,0,.34); --red-text:#FF6647; --red-btn:#E02300; --red-btn-hover:#C61F00; --on-red:#FFFFFF; --num:#FF2800; --glow-1:rgba(255,40,0,.16); --glow-2:rgba(255,40,0,.05); --glow-3:rgba(255,40,0,.13); --trace:rgba(255,40,0,.22); --trace-grid:rgba(255,255,255,.06); --node-opacity:.55; --card-shadow:none; } /* Dim: mid-slate. A true midpoint: the ground sits roughly halfway between the near-black and the paper white, which forces its own decisions. Muted text has to come up, and the red chips sit on a deepened red rather than a light tint, because saturated red on mid-grey will not clear AA at label sizes. Cards lift off the ground with a soft shadow instead of contrast. */ [data-rv="dim"]{ color-scheme:dark; --bg:#3A414A; --bg-2:#333A42; --surface:#434B55; --surface-2:#4B535E; --surface-3:#4E5661; --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.26); --hover:rgba(255,255,255,.07); --hover-soft:rgba(255,255,255,.05); --nav-bg:rgba(58,65,74,.84); --text:#F4F6F8; --text-alt:#9BA4AF; --muted:#C6CCD3; --muted-2:#B3BAC3; --red:#FF2800; --red-soft:rgba(90,14,0,.55); --red-line:rgba(255,60,30,.42); --red-line-strong:rgba(255,60,30,.55); --red-text:#FF8163; --red-btn:#E02300; --red-btn-hover:#C61F00; --on-red:#FFFFFF; --num:#FF3D1E; --glow-1:rgba(255,40,0,.12); --glow-2:rgba(255,40,0,.04); --glow-3:rgba(255,40,0,.10); --trace:rgba(255,40,0,.28); --trace-grid:rgba(255,255,255,.07); --node-opacity:.6; --card-shadow:0 1px 2px rgba(0,0,0,.16),0 16px 34px -20px rgba(0,0,0,.55); } /* Light: near-white paper, ink text, deepened red so type stays AA. */ [data-rv="light"]{ color-scheme:light; --bg:#FBFBFA; --bg-2:#F3F4F6; --surface:#FFFFFF; --surface-2:#F6F7F9; --surface-3:#EEF0F3; --line:rgba(9,12,17,.10); --line-strong:rgba(9,12,17,.20); --hover:rgba(9,12,17,.05); --hover-soft:rgba(9,12,17,.04); --nav-bg:rgba(251,251,250,.82); --text:#101318; --text-alt:#7C8590; --muted:#545C66; --muted-2:#656E78; --red:#FF2800; --red-soft:rgba(255,40,0,.09); --red-line:rgba(196,32,0,.30); --red-line-strong:rgba(196,32,0,.42); --red-text:#D42400; --red-btn:#D42400; --red-btn-hover:#B81F00; --on-red:#FFFFFF; --num:#D42400; --glow-1:rgba(255,40,0,.10); --glow-2:rgba(255,40,0,.035); --glow-3:rgba(255,40,0,.08); --trace:rgba(255,40,0,.24); --trace-grid:rgba(9,12,17,.05); --node-opacity:.6; --card-shadow:0 1px 2px rgba(9,12,17,.05),0 14px 30px -18px rgba(9,12,17,.22); } :root{ --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --wrap:1120px; --pad:clamp(20px,5vw,40px); } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.1} p{margin:0} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)} .skip{position:absolute;left:-9999px;top:0;background:var(--red-btn);color:var(--on-red);padding:10px 16px;z-index:200} .skip:focus{left:12px;top:12px} /* ---------- shared type ---------- */ .eyebrow{ font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2); display:flex;align-items:center;gap:10px;margin:0 0 20px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--red);flex:none} .lede{color:var(--muted);font-size:clamp(16px,1.6vw,18.5px);max-width:62ch} /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:100; background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad); display:flex;align-items:center;gap:20px;min-height:68px} .nav-logo{flex:none;display:flex;align-items:center} .nav-logo img{width:132px} .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto} .nav-links a{ font-size:14.5px;color:var(--muted);text-decoration:none; padding:8px 14px;border-radius:6px;transition:color .18s,background .18s; } .nav-links a:hover{color:var(--text);background:var(--hover)} .nav-cta{ font-size:14.5px;font-weight:500;text-decoration:none;color:var(--text); border:1px solid var(--line-strong);border-radius:7px;padding:9px 18px; transition:border-color .18s,background .18s;white-space:nowrap; } .nav-cta:hover{border-color:var(--red);background:var(--red-soft)} /* CSS-only mobile menu */ #navtoggle{position:absolute;width:1px;height:1px;margin:0;opacity:0} #navtoggle:focus-visible~.nav-in .burger{outline:2px solid var(--red);outline-offset:2px} .burger{display:none;margin-left:auto;cursor:pointer;padding:10px;border-radius:6px} .burger span{display:block;width:20px;height:1.5px;background:var(--text);margin:4px 0;transition:transform .2s,opacity .2s} #navtoggle:checked~.nav-in .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} #navtoggle:checked~.nav-in .burger span:nth-child(2){opacity:0} #navtoggle:checked~.nav-in .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} @media (max-width:820px){ .burger{display:block} .nav-links{ display:none;position:absolute;left:0;right:0;top:100%; flex-direction:column;align-items:stretch;gap:0;margin:0; background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px var(--pad) 18px; } #navtoggle:checked~.nav-in .nav-links{display:flex} .nav-links a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)} .nav-links a:hover{background:none} .nav-cta{margin-top:14px;text-align:center;border-bottom:1px solid var(--line-strong)!important} } /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:0} .hero-bg{position:absolute;inset:0;pointer-events:none} .hero-bg::before{ /* red glow */ content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%); width:min(1100px,130vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,var(--glow-1) 0%,var(--glow-2) 38%,transparent 66%); } .hero-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5} .hero-bg .trace{stroke:var(--trace)} .hero-bg .grid{stroke:var(--trace-grid)} .hero-bg .node{fill:var(--red);opacity:var(--node-opacity)} .hero-bg::after{ /* fade traces into the page */ content:"";position:absolute;inset:0; background:linear-gradient(to bottom,transparent 30%,var(--bg) 96%); } .hero-in{position:relative;padding:clamp(44px,6vh,88px) 0 clamp(38px,5vh,68px)} .hero h1{ font-size:clamp(36px,5.4vw,60px);font-weight:700;letter-spacing:-.035em; max-width:23ch;margin-bottom:22px;text-wrap:balance; } .hero h1 .alt{color:var(--text-alt)} .hero .lede{font-size:clamp(17px,1.9vw,20px);max-width:58ch} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .btn{ display:inline-flex;align-items:center;gap:9px; font-size:15px;font-weight:500;text-decoration:none; padding:13px 24px;border-radius:8px;transition:.18s; } .btn-primary{background:var(--red-btn);color:var(--on-red);border:1px solid var(--red-btn);font-weight:600} .btn-primary:hover{background:var(--red-btn-hover);border-color:var(--red-btn-hover);transform:translateY(-1px)} .btn-ghost{border:1px solid var(--line-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--muted);background:var(--hover-soft)} .btn svg{flex:none} /* ---------- sections ---------- */ section{padding:clamp(44px,5.5vh,78px) 0} .section-head{max-width:70ch;margin-bottom:clamp(26px,3.4vh,46px)} .section-head.label-only{margin-bottom:clamp(16px,2.2vh,26px)} .section-head h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:16px} /* ---------- divisions ---------- */ .ruled{border-bottom:1px solid var(--line)} .divisions{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} @media (max-width:860px){.divisions{grid-template-columns:1fr}} .division{ position:relative;background:var(--surface);border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:14px;padding:clamp(22px,3vw,32px); display:flex;flex-direction:column;overflow:hidden; transition:border-color .2s,transform .2s; } .division:hover{border-color:var(--line-strong);transform:translateY(-2px)} .division::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--red),transparent); } .division-num{ font-family:var(--mono);font-size:11.5px;letter-spacing:.16em; color:var(--muted-2);margin-bottom:18px; } .division h2{font-size:clamp(22px,2.5vw,27px);margin-bottom:14px} .division p{color:var(--muted);font-size:16px} .division-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .division-list li{ font-family:var(--mono);font-size:12px;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:5px 12px; } .division-foot{margin-top:auto;padding-top:18px} /* product card (Ledger) */ .product{ margin-top:20px;background:var(--surface-2);border:1px solid var(--line); border-radius:11px;padding:17px 20px; } .product-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .product-name{font-size:19px;font-weight:600;letter-spacing:-.02em} .badge{ font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--red-text);background:var(--red-soft);border:1px solid var(--red-line); border-radius:999px;padding:4px 10px; } .product p{font-size:15px;color:var(--muted)} .product-link{display:block;text-decoration:none;transition:border-color .18s,background .18s} .product-link:hover{border-color:var(--red-line-strong);background:var(--surface-3)} .product-link .product-name::after{content:" \2192";color:var(--red-text)} /* ---------- track record ---------- */ .band{background:var(--bg-2)} .stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:12px; box-shadow:var(--card-shadow); overflow:hidden;margin-bottom:clamp(24px,3vh,44px); } @media (max-width:640px){.stats{grid-template-columns:1fr}} .stat{background:var(--bg-2);padding:22px 24px} .band .stat{background:var(--bg-2)} .stat-n{font-size:clamp(28px,3.4vw,36px);font-weight:700;letter-spacing:-.03em;color:var(--num)} .stat-l{font-size:14px;color:var(--muted);margin-top:4px} .award{ display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,4vw,48px); padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--line); } .award:last-child{border-bottom:1px solid var(--line)} @media (max-width:760px){.award{grid-template-columns:1fr;gap:16px}} .award-meta{display:flex;flex-direction:column;gap:10px;align-items:flex-start} @media (max-width:760px){.award-meta{flex-direction:row;align-items:center;gap:14px}} .award-year{font-family:var(--mono);font-size:15px;color:var(--muted-2);letter-spacing:.06em} .award-place{ font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--red-text);border:1px solid var(--red-line);background:var(--red-soft); border-radius:999px;padding:4px 11px;white-space:nowrap; } .award-body h3{font-size:clamp(19px,2.1vw,23px);margin-bottom:6px} .award-org{ font-size:14.5px;line-height:1.5;color:var(--muted-2); margin-bottom:14px;max-width:64ch; } .award-body p{color:var(--muted);font-size:16px;max-width:72ch} .award-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0;padding:0} .award-tags li{font-family:var(--mono);font-size:11.5px;color:var(--muted-2); border:1px solid var(--line);border-radius:4px;padding:3px 9px} /* ---------- about / founders ---------- */ .about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,72px);align-items:start} @media (max-width:900px){.about-grid{grid-template-columns:1fr}} .about-copy p+p{margin-top:15px} .about-copy p{color:var(--muted)} .founders{display:flex;flex-direction:column;gap:12px} .founder{ display:flex;align-items:center;gap:16px; background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px; box-shadow:var(--card-shadow); } .founder-mark{ flex:none;width:46px;height:46px;border-radius:10px; display:grid;place-items:center; font-family:var(--mono);font-size:15px;font-weight:500;color:var(--red-text); background:var(--red-soft);border:1px solid var(--red-line); } .founder-name{font-weight:600;font-size:17px;letter-spacing:-.015em} .founder-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted-2);margin-top:3px} .capabilities{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .capabilities li{ font-family:var(--mono);font-size:12px;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:5px 12px; } /* ---------- contact ---------- */ .contact-sec{position:relative;overflow:hidden} .contact-card{ position:relative;background:var(--surface);border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:16px;padding:clamp(30px,4.5vw,52px);text-align:center;overflow:hidden; } .contact-card::before{ content:"";position:absolute;top:-60%;left:50%;transform:translateX(-50%); width:min(760px,120%);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,var(--glow-3),transparent 62%); } .contact-card>*{position:relative} .contact-card .eyebrow{justify-content:center} .contact-card h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:16px} .contact-card .lede{margin:0 auto} .contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:30px 0;background:var(--bg-2)} .foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between} .foot-in img{width:108px;opacity:.85} .foot-meta{font-size:13.5px;color:var(--muted-2)} .foot-links{display:flex;gap:20px;font-size:13.5px} .foot-links a{color:var(--muted-2);text-decoration:none;transition:color .18s} .foot-links a:hover{color:var(--text)} /* ---------- palette switcher (REVIEW ONLY) ---------- Delete this block, the .theme-switch markup, and its script to ship a single palette; the site itself needs neither. */ .theme-switch{ position:fixed;right:16px;bottom:16px;z-index:300; display:flex;align-items:center;gap:8px; background:var(--surface);border:1px solid var(--line-strong); border-radius:999px;padding:6px 8px 6px 14px; box-shadow:0 8px 28px rgba(0,0,0,.28); font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; } .theme-switch-l{color:var(--muted-2);white-space:nowrap} .theme-switch button{ font:inherit;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);background:none;border:1px solid transparent; border-radius:999px;padding:5px 11px;cursor:pointer; transition:color .18s,background .18s,border-color .18s; } .theme-switch button:hover{color:var(--text);background:var(--hover)} .theme-switch button[aria-pressed="true"]{ color:var(--red-text);background:var(--red-soft);border-color:var(--red-line); } @media (max-width:520px){ .theme-switch{left:12px;right:12px;bottom:12px;justify-content:center;padding:6px 8px} .theme-switch-l{display:none} } @media print{.theme-switch{display:none}} /* ---------- inner page header ---------- */ .page-head{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-2)} .page-head .inner{position:relative} /* Ledger paper, drawn from the application's own icon: ruled lines, two column rules, and paired bars with a punched dot at opposite ends — a debit row and a credit row. Same token set as the home page's circuit traces, so both heros move together when a palette changes. */ .head-bg{position:absolute;inset:0;pointer-events:none} .head-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.6} .head-bg::before{ content:"";position:absolute;top:-70%;right:-5%; width:min(780px,80vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,var(--glow-1) 0%,var(--glow-2) 40%,transparent 68%); } .head-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(to bottom,transparent 45%,var(--bg-2) 98%); } .head-bg .rule{stroke:var(--trace-grid)} .head-bg .trace{stroke:var(--trace);fill:none} .head-bg .arc{stroke:var(--trace);fill:none} /* fill-opacity on each point multiplies with the group's, so a scatter can vary in density without any point escaping the palette's node opacity */ .head-bg .cloud{fill:var(--red);opacity:var(--node-opacity)} .head-bg .bar{fill:var(--trace)} .head-bg .punch{fill:var(--bg-2)} .head-bg .dot{fill:var(--red);opacity:var(--node-opacity)} /* padding-block, not the shorthand: the shorthand would reset .wrap's horizontal padding to zero and run the header flush to the edge below 1120px */ .page-head .inner{padding-block:clamp(36px,5vh,60px) clamp(30px,4.4vh,50px)} .page-head .mark{margin-bottom:18px} .page-head h1{font-size:clamp(30px,4.2vw,46px);font-weight:700;letter-spacing:-.033em;max-width:20ch;margin-bottom:16px;text-wrap:balance} /* ---------- product panel (Ledger on the home page) ---------- */ .panel{ position:relative;background:var(--surface);border:1px solid var(--line); border-radius:16px;box-shadow:var(--card-shadow);overflow:hidden; padding:clamp(24px,3.2vw,38px); } .panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)} .panel-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px} .panel-name{font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.03em} .panel-kind{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .panel-lede{color:var(--muted);font-size:clamp(16px,1.6vw,17.5px);max-width:66ch} .panel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:28px} @media (max-width:820px){.features{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.features{grid-template-columns:1fr}} .feature{background:var(--surface);padding:18px 20px} .feature h3{font-size:15.5px;margin-bottom:5px} .feature p{font-size:14.5px;color:var(--muted);line-height:1.55} .platforms{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .platform{ display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px; border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--muted); } .platform::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex:none} .platform.live{color:var(--text);border-color:var(--red-line)} .platform.live::before{background:var(--red)} /* ---------- proof strip ---------- */ .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .proof.two{grid-template-columns:repeat(2,1fr)} @media (max-width:800px){.proof{grid-template-columns:1fr}} .proof-item{ background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--card-shadow);padding:20px 22px;display:flex;flex-direction:column;gap:8px; } .proof-year{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--muted-2)} .proof-item h3{font-size:16.5px} .proof-item p{font-size:14.5px;color:var(--muted)} .proof-org{font-family:var(--mono);font-size:11.5px;color:var(--red-text)} /* ---------- inline "more" link ---------- */ .more{ display:inline-flex;align-items:center;gap:8px;margin-top:24px; font-family:var(--mono);font-size:12.5px;letter-spacing:.06em; color:var(--red-text);text-decoration:none; } .more:hover{text-decoration:underline} .more::after{content:"\2192"} /* ---------- contact ---------- */ .channels{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px} @media (max-width:700px){.channels{grid-template-columns:1fr}} .channel{ background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--card-shadow);padding:22px 24px;display:flex;flex-direction:column;gap:8px; } .channel h2{font-size:18px} .channel p{font-size:15px;color:var(--muted)} .channel a{font-family:var(--mono);font-size:14px;color:var(--red-text);word-break:break-all} /* ---------- product page: screenshots ---------- */ .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} @media (max-width:900px){.shots{grid-template-columns:1fr}} .shot{margin:0;display:flex;flex-direction:column;gap:10px} .shot-lead{margin-bottom:26px} .shot-frame{ aspect-ratio:16/10;border:1px solid var(--line-strong);border-radius:12px; background:var(--surface);overflow:hidden;box-shadow:var(--card-shadow); } /* The captures are 1.6047, a whisker off 16:10; cover crops the difference rather than letterboxing three frames to different heights. */ .shot-frame img{width:100%;height:100%;object-fit:cover;display:block} .shot figcaption{font-size:14.5px;color:var(--muted)} .shot figcaption b{color:var(--text);font-weight:600} /* ---------- product page: benefits ---------- */ .benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px} @media (max-width:760px){.benefits{grid-template-columns:1fr}} .benefit{ background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--card-shadow);padding:22px 24px;display:flex;flex-direction:column;gap:9px; } .benefit h3{font-size:17.5px} .benefit p{font-size:15px;color:var(--muted)} /* ---------- product page: plans ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} @media (max-width:860px){.plans{grid-template-columns:1fr}} .plan{ position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:var(--card-shadow);padding:24px 26px;display:flex;flex-direction:column;gap:14px;overflow:hidden; } .plan.featured{border-color:var(--red-line-strong)} .plan.featured::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)} .plan-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .plan h3{font-size:19px} .plan-tag{ font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--red-text);background:var(--red-soft);border:1px solid var(--red-line); border-radius:999px;padding:3px 9px; } .plan-price{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums} .plan-amount{font-size:34px;font-weight:700;letter-spacing:-.03em} .plan-per{font-family:var(--mono);font-size:12.5px;color:var(--muted-2)} .plan-annual{font-family:var(--mono);font-size:12.5px;color:var(--muted-2);margin-top:-6px} .plan-who{font-size:14.5px;color:var(--muted)} .plan-list{list-style:none;margin:0 0 auto;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--muted)} .plan-list li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start} .plan-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:8px;margin-left:5px} /* One action per card, pinned to the bottom so three cards of different lengths still line their buttons up. */ .plan .btn{width:100%;justify-content:center;margin-top:4px} .plan-note{ margin-top:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px; padding:18px 22px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline; } .plan-note b{color:var(--text);font-weight:600} .plan-note p{font-size:15px;color:var(--muted)} /* ---------- product page: download ---------- */ .dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} @media (max-width:760px){.dl{grid-template-columns:1fr}} .dl-item{ background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--card-shadow);padding:22px 24px;display:flex;flex-direction:column;gap:8px; } .dl-item h3{font-size:17px} .dl-item p{font-size:14.5px;color:var(--muted)} .dl-status{ font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted-2); } .dl-item.live .dl-status{color:var(--red-text)} /* ---------- product mark ---------- */ /* The product's own icon, framed so it reads as an app tile rather than dissolving into whichever palette is behind it. */ .mark{ width:58px;height:58px;border-radius:15px;display:block; border:1px solid var(--line-strong);background:var(--surface); box-shadow:0 10px 24px -14px rgba(0,0,0,.5); } .panel-top .mark{margin-right:2px} /* ---------- screenshot lightbox ---------- */ /* The thumbnails are 360px wide; the detail a buyer wants to inspect is not legible until the image is opened. Each is a link to the large file, so it still works with the script disabled — the dialog is the enhancement. */ .shot-open{display:block;cursor:zoom-in;border-radius:12px;text-decoration:none} .shot-open:focus-visible{outline:2px solid var(--red);outline-offset:3px} .lightbox{ border:0;padding:0;background:transparent;overflow:visible; max-width:min(1600px,94vw);max-height:94vh; } .lightbox::backdrop{background:rgba(6,8,11,.78)} .lightbox img{ width:100%;height:auto;max-height:82vh;object-fit:contain;display:block; border:1px solid var(--line-strong);border-radius:12px;background:var(--surface); } .lightbox-cap{ margin:14px 2px 0;font-size:14.5px;line-height:1.5; color:rgba(255,255,255,.82);max-width:80ch; } .lightbox-cap b{color:#fff;font-weight:600} .lightbox-close{ position:absolute;top:-14px;right:-14px;width:36px;height:36px; display:grid;place-items:center;cursor:pointer; font:600 20px/1 var(--sans);color:var(--text); background:var(--surface);border:1px solid var(--line-strong);border-radius:50%; box-shadow:0 8px 22px -10px rgba(0,0,0,.6); } .lightbox-close:hover{border-color:var(--red);color:var(--red-text)} @media (max-width:620px){ .lightbox-close{top:-10px;right:-6px;width:32px;height:32px;font-size:18px} .lightbox-cap{font-size:13.5px} }