/* ========================================================================== AspectGraph marketing site — shared component system. Three ad-test variants share this file; theme is switched by the `data-variant` attribute on (command | overtake | advantage). Only tokens, the hero background, and the hero visual differ per variant; every other section is identical so the A/B test isolates the hook. Dependency-free, system fonts only (no CDN), committed brand look per variant. ========================================================================== */ /* ---------- structural tokens (variant-neutral) ---------- */ :root{ --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --serif: ui-serif, "New York", Georgia, "Times New Roman", serif; --maxw: 1140px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --pad: clamp(20px, 5vw, 40px); --sec-y: clamp(56px, 9vw, 108px); } /* ---------- variant palettes ---------- */ :root[data-variant="command"]{ --bg:#07111b; --bg-2:#0b1826; --panel:#0e1e30; --panel-2:#132840; --ink:#e8f0fa; --ink-strong:#ffffff; --muted:#9fb3ce; --faint:#6a819e; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15); --accent:#3b82f6; --accent-2:#60a5fa; --on-accent:#04101f; --ok:#22c55e; --warn:#f59e0b; color-scheme: dark; } :root[data-variant="overtake"]{ --bg:#0a0705; --bg-2:#120c09; --panel:#170f0a; --panel-2:#20140d; --ink:#fdefe4; --ink-strong:#ffffff; --muted:#d0b4a6; --faint:#9a7362; --line:rgba(255,255,255,.08); --line-2:rgba(255,140,80,.22); --accent:#ff7a18; --accent-2:#ff3b30; --on-accent:#1a0603; --ok:#5fd08a; --warn:#ffb03a; color-scheme: dark; } :root[data-variant="advantage"]{ --bg:#f2f3ef; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f6f7f3; --ink:#0c1310; --ink-strong:#05100c; --muted:#516059; --faint:#7c8a82; --line:rgba(12,19,16,.10); --line-2:rgba(12,19,16,.16); --accent:#0e7c66; --accent-2:#1f9d82; --on-accent:#ffffff; --ok:#0e7c66; --warn:#c77b16; color-scheme: light; } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit; text-decoration:none} img{max-width:100%; display:block} h1,h2,h3{text-wrap:balance; margin:0} p{margin:0} :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)} .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)} .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:inherit; font-weight:600; font-size:15px; line-height:1; padding:13px 20px; border-radius:var(--r-sm); border:1px solid transparent; transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; white-space:nowrap; } .btn:active{transform:translateY(1px)} .btn--primary{background:var(--accent); color:var(--on-accent); box-shadow:0 12px 30px -14px color-mix(in srgb, var(--accent) 85%, transparent)} .btn--primary:hover{background:var(--accent-2)} .btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)} .btn--ghost:hover{border-color:var(--accent); color:var(--accent)} .btn .arrow{transition:transform .16s ease} .btn:hover .arrow{transform:translateX(3px)} /* ---------- nav ---------- */ .nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} .nav-inner{display:flex; align-items:center; gap:22px; height:64px} .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:17px; color:var(--ink-strong)} .brand svg{width:24px; height:24px; display:block} .nav-links{display:flex; gap:26px; margin-left:14px} .nav-links a{color:var(--muted); font-size:14.5px; transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-actions{margin-left:auto; display:flex; align-items:center; gap:12px} .nav-actions .btn{padding:10px 16px; font-size:14px} @media(max-width:820px){ .nav-links{display:none} } /* beta badge — brand-consistent, themed per variant */ .beta-badge{ display:inline-flex; align-items:center; align-self:center; white-space:nowrap; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 42%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:999px; padding:4px 9px; line-height:1; } .nav-inner .beta-badge{margin-left:-10px} .cta-band .beta-badge{margin-bottom:20px} /* waitlist / email capture */ .waitlist{display:flex; gap:10px; max-width:480px; margin:30px auto 0; flex-wrap:wrap; justify-content:center} .waitlist .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none} .waitlist input[type=email]{ flex:1 1 260px; min-width:0; font:inherit; font-size:15px; line-height:1.2; padding:13px 16px; border-radius:var(--r-sm); background:var(--panel); color:var(--ink); border:1px solid var(--line-2); transition:border-color .16s ease; } .waitlist input[type=email]::placeholder{color:var(--faint)} .waitlist input[type=email]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)} .waitlist .btn{flex:0 0 auto} .waitlist[hidden]{display:none} .waitlist-msg{max-width:480px; margin:16px auto 0; font-size:15px; font-weight:500} .waitlist-msg[hidden]{display:none} .waitlist-msg.ok{color:var(--ok)} .waitlist-msg.err{color:var(--warn)} .waitlist-alt{margin-top:18px; font-size:14px} .waitlist-alt a{color:var(--muted); border-bottom:1px solid var(--line-2); padding-bottom:1px} .waitlist-alt a:hover{color:var(--ink); border-color:var(--accent)} /* ---------- hero (shared frame) ---------- */ .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)} .hero-inner{padding:clamp(48px,8vw,92px) 0 clamp(40px,7vw,72px); display:grid; gap:clamp(36px,5vw,56px); grid-template-columns:1fr; align-items:center} @media(min-width:940px){ .hero-inner{grid-template-columns:1.08fr .92fr} } .hero h1{font-size:clamp(34px,5.6vw,60px); line-height:1.02; letter-spacing:-.032em; font-weight:780; color:var(--ink-strong)} .hero h1 em{font-style:normal; color:var(--accent)} .hero .lede{margin-top:22px; font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:44ch} .hero .lede b{color:var(--ink); font-weight:600} .hero-cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px} .trust{margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint)} .trust .dot{width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:8px; vertical-align:middle} /* hero backgrounds per variant */ :root[data-variant="command"] .hero{background:radial-gradient(120% 90% at 84% -6%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 55%), linear-gradient(180deg,#08131f,var(--bg))} :root[data-variant="overtake"] .hero{background:radial-gradient(120% 90% at 88% -8%, color-mix(in srgb,var(--accent-2) 26%, transparent), transparent 52%), radial-gradient(80% 80% at -5% 110%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 55%), linear-gradient(180deg,var(--bg-2),var(--bg))} :root[data-variant="advantage"] .hero{background:radial-gradient(110% 80% at 94% -8%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 55%), linear-gradient(180deg,#f6f7f4,var(--bg))} /* ---------- hero visual card ---------- */ .visual{background:color-mix(in srgb,var(--panel) 80%, transparent); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px; box-shadow:0 40px 90px -60px rgba(0,0,0,.8); font-family:var(--mono)} .visual-head{display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:4px 6px 12px} .visual-head .live{color:var(--ok)} /* command — roster */ .agent{display:flex; align-items:center; gap:11px; padding:11px 8px; font-size:13px} .agent+.agent{border-top:1px solid var(--line)} .agent .nm{color:var(--ink); font-weight:500} .agent .rl{color:var(--faint); margin-left:3px} .agent .ml{margin-left:8px; font-size:10px; letter-spacing:.03em; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); border-radius:5px; padding:2px 6px} .agent .st{margin-left:auto; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:7px} .d{width:9px; height:9px; border-radius:50%; flex:none} .d.on{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%, transparent)} .d.work{background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%, transparent)} .d.idle{background:var(--faint)} .st.working{color:var(--warn)} /* overtake — race lanes */ .lane{display:grid; grid-template-columns:66px 1fr auto; gap:11px; align-items:center; margin:9px 4px; font-size:12px} .lane .ln{color:var(--muted)} .track{height:9px; border-radius:99px; background:color-mix(in srgb,var(--ink) 8%, transparent); overflow:hidden} .fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2))} .lane .stt{font-size:10.5px; color:var(--faint); letter-spacing:.04em} .lane.done .stt{color:var(--accent)} .compare{margin-top:12px; padding:11px 6px 4px; border-top:1px dashed var(--line-2); display:flex; justify-content:space-between; font-size:10.5px; color:var(--faint)} .compare b{color:var(--muted)} @media (prefers-reduced-motion:no-preference){ .fill.wip{background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-2)); background-size:220% 100%; animation:slide 1.7s linear infinite} @keyframes slide{0%{background-position:120% 0}100%{background-position:-120% 0}} } /* advantage — proof stats */ .proofrow{display:flex; flex-direction:column; gap:20px; font-family:var(--sans)} .stack{display:flex; align-items:center} .stack .av{width:46px; height:46px; border-radius:13px; margin-left:-12px; border:3px solid var(--panel); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; box-shadow:0 8px 18px -10px rgba(0,0,0,.5)} .stack .av:first-child{margin-left:0} .av.g1{background:#0e7c66} .av.g2{background:#1f9d82} .av.g3{background:#134e4a} .av.g4{background:#0c1310; font-size:22px} .vals{display:flex; gap:28px; flex-wrap:wrap} .vals .v{display:flex; flex-direction:column} .vals .v b{font-size:30px; font-weight:780; letter-spacing:-.02em; line-height:1; color:var(--ink-strong); font-variant-numeric:tabular-nums} .vals .v.em b{color:var(--accent)} .vals .v span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:7px} /* ---------- generic section ---------- */ .sec{padding:var(--sec-y) 0} .sec-head{max-width:60ch; margin-bottom:clamp(30px,5vw,52px)} .sec-head h2{line-height:1.12; font-size:clamp(26px,3.6vw,40px); letter-spacing:-.025em; font-weight:740; color:var(--ink-strong); margin-top:12px} .sec-head p{margin-top:16px; color:var(--muted); font-size:18px} .alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} /* ---------- how it works ---------- */ .steps{display:grid; gap:20px; grid-template-columns:1fr} @media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} } .step{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:26px; position:relative} .step .n{font-family:var(--mono); font-size:13px; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 38%, transparent); border-radius:7px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; margin-bottom:18px} .step h3{font-size:19px; letter-spacing:-.01em; color:var(--ink-strong)} .step p{margin-top:10px; color:var(--muted); font-size:15.5px} /* ---------- product proof (board + chat) ---------- */ .product{display:grid; gap:18px; grid-template-columns:1fr} @media(min-width:960px){ .product{grid-template-columns:1.35fr .95fr; align-items:stretch} } .panel{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 40px 90px -70px rgba(0,0,0,.7)} .panel-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)} .panel-head .tt{font-weight:600; color:var(--ink)} .panel-head .badge{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ok); display:flex; align-items:center; gap:6px} .panel-head .badge .d{width:7px;height:7px} .board{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; flex:1} .col-head{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:2px 4px 10px; display:flex; justify-content:space-between} .card{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px; margin-bottom:9px} .card .t{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3} .card .meta{display:flex; align-items:center; gap:7px; margin-top:10px; font-size:11px; color:var(--muted)} .mini{width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex:none} .mini.b1{background:#3b82f6} .mini.b2{background:#a855f7} .mini.b3{background:#0ea5a3} .mini.b4{background:#64748b} .modeltag{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:2px 5px} .card.working{border-color:color-mix(in srgb,var(--warn) 45%, var(--line))} .card .wk{display:flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--mono); font-size:10px; color:var(--warn)} .card .wk .d{width:7px;height:7px} .card.donec{opacity:.72} .card .done-k{color:var(--ok); font-family:var(--mono); font-size:10px; margin-top:9px; display:flex; align-items:center; gap:5px} .chat{display:flex; flex-direction:column; gap:12px; padding:16px; flex:1} .msg{display:flex; flex-direction:column; gap:5px} .msg .who{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--faint)} .msg .who .mini{width:18px;height:18px;border-radius:5px} .msg .who b{color:var(--ink); font-weight:600; font-size:12px} .msg .who .mt{font-family:var(--mono); font-size:9.5px; color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:1px 4px} .msg .bubble{font-size:13.5px; color:var(--ink); line-height:1.45; padding-left:26px} .msg .bubble .at{color:var(--accent); font-weight:600} .msg.you .bubble{color:var(--muted)} .decision{margin-left:26px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink); background:color-mix(in srgb,var(--accent) 12%, transparent); border:1px solid color-mix(in srgb,var(--accent) 34%, transparent); border-radius:99px; padding:6px 12px} .decision .ic{color:var(--accent)} /* ---------- features ---------- */ .feat-grid{display:grid; gap:16px; grid-template-columns:1fr} @media(min-width:640px){ .feat-grid{grid-template-columns:repeat(2,1fr)} } @media(min-width:980px){ .feat-grid{grid-template-columns:repeat(4,1fr)} } .feat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:24px} .feat .ic{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent)} .feat .ic svg{width:21px; height:21px} .feat h3{font-size:17px; letter-spacing:-.01em; color:var(--ink-strong)} .feat p{margin-top:9px; color:var(--muted); font-size:14.5px} /* ---------- CTA band ---------- */ .cta-band{position:relative; overflow:hidden; text-align:center; padding:clamp(56px,9vw,100px) 0} .cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 60%); pointer-events:none} .cta-band .inner{position:relative} .cta-band h2{line-height:1.12; font-size:clamp(28px,4.4vw,46px); letter-spacing:-.03em; font-weight:780; color:var(--ink-strong); max-width:20ch; margin:0 auto} .cta-band p{margin:18px auto 0; color:var(--muted); max-width:52ch; font-size:18px} .cta-band .btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px} .cta-band .fine{margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--faint)} /* ---------- thank-you page ---------- */ .thanks{min-height:72vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 0} .thanks .check{width:66px; height:66px; border-radius:50%; margin-bottom:26px; display:flex; align-items:center; justify-content:center; color:var(--ok); background:color-mix(in srgb, var(--ok) 16%, transparent); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent)} .thanks .check svg{width:32px; height:32px} .thanks h1{font-size:clamp(30px,5vw,46px); letter-spacing:-.03em; font-weight:760; color:var(--ink-strong)} .thanks p{margin-top:16px; color:var(--muted); font-size:18px; max-width:46ch} .thanks .btns{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line); padding:52px 0 40px; color:var(--muted); font-size:14px} .foot-top{display:flex; flex-wrap:wrap; gap:28px 60px; justify-content:space-between} .foot .brand{margin-bottom:14px} .foot .tag{max-width:34ch; color:var(--faint)} .foot-cols{display:flex; gap:56px; flex-wrap:wrap} .foot-cols h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:600} .foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px} .foot-cols a{color:var(--muted)} .foot-cols a:hover{color:var(--ink)} .foot-bottom{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px; color:var(--faint); font-family:var(--mono); letter-spacing:.03em} @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} } /* ---------- beta site (2026-09): room hero, feature pages, download band ---------- */ .nav-links a[aria-current="page"]{color:var(--ink-strong)} .btn--lg{padding:15px 24px; font-size:16px} @media(min-width:1100px){ .hero-inner--room{grid-template-columns:.82fr 1.18fr} } .hero--short .hero-inner{display:block} .hero--short{padding:clamp(48px,7vw,80px) 0 clamp(36px,5vw,56px)} .hero--short h1{font-size:clamp(32px,5vw,54px); line-height:1.04; letter-spacing:-.03em; font-weight:780; color:var(--ink-strong); margin-top:12px} .hero--short .lede{margin-top:18px; font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:48ch} .hero--short .hero-cta-row{margin-top:28px} .hero--short .trust{margin-top:26px} .step h3 a,.why p a{color:var(--accent); font-weight:600} .step h3 a:hover,.why p a:hover{text-decoration:underline} .step p a{color:var(--accent); font-weight:600; white-space:nowrap} /* room panel (hero + /room) */ .room-panel{font-family:var(--sans)} .room-body{display:grid; grid-template-columns:1fr; gap:0} @media(min-width:700px){ .room-body{grid-template-columns:1.25fr 1fr} .room-right{border-left:1px solid var(--line)} } .room-left{padding:12px 12px 4px} .room-left .board{padding:0; margin-top:10px} .room-panel .board{grid-template-columns:repeat(3,1fr)} .room-panel .card{padding:9px 10px; margin-bottom:7px} .room-panel .card .t{font-size:12.5px} .room-panel .chat{padding:12px; gap:10px} .room-panel .bubble{font-size:12.5px} /* Steps checklist */ .stepsbox{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px 6px; font-family:var(--mono)} .stepsbox-head{display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-bottom:6px} .stp{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:3px 0} .stp .k{width:14px; text-align:center; color:var(--faint)} .stp .n{margin-left:auto; font-size:10.5px; color:var(--faint)} .stp.done{color:var(--faint)} .stp.done .k{color:var(--ok)} .stp.now{color:var(--ink-strong); font-weight:600} .stp.now .k{color:var(--accent)} .stepsvis .stepsbox{margin:0 4px 12px} .chat--tight{padding:0 4px} /* decision request pill */ .decide{background:var(--panel-2); border:1px solid color-mix(in srgb,var(--accent) 55%, var(--line)); border-radius:var(--r-md); padding:12px 14px; margin-left:26px; font-family:var(--sans)} .chat--tight .decide{margin-left:0} .decide+.decide{margin-top:10px} .decide-q{font-size:13px; font-weight:600; color:var(--ink-strong); margin-bottom:9px} .decide-o{display:flex; flex-wrap:wrap; gap:7px} .decide-o span{font-size:12px; border:1px solid var(--line-2); border-radius:8px; padding:5px 10px; color:var(--ink)} .decide-o span.pick{border-color:var(--accent); color:var(--accent); font-weight:600} .decide-o span.you{color:var(--muted); border-style:dashed} /* roster bench */ .bench{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding:10px 8px 4px; border-top:1px dashed var(--line-2); font-size:12px; color:var(--muted)} .bench>span:first-child{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-right:4px} .bench .mini{width:18px; height:18px; border-radius:5px; font-size:9px; margin-left:6px} .bench .add{margin-left:auto; color:var(--accent)} .visual .mini{display:inline-flex} /* permission prompt */ .perm-q{display:flex; gap:12px; align-items:flex-start; padding:14px 8px 6px; font-family:var(--sans)} .perm-q .mini{width:28px; height:28px; border-radius:8px; font-size:13px} .perm-q b{display:block; color:var(--ink-strong); font-size:15px} .perm-q span{font-size:12.5px; color:var(--faint)} .perm-btns{display:flex; gap:8px; flex-wrap:wrap; padding:14px 8px 8px; font-family:var(--sans)} .perm-btns .btn{padding:9px 14px; font-size:13px} .perm-foot{padding:10px 8px 2px; border-top:1px dashed var(--line-2); font-size:11px; color:var(--faint); letter-spacing:.04em} /* journal ledger */ .jl{display:grid; grid-template-columns:44px 22px 1fr auto; gap:10px; align-items:center; padding:9px 6px; font-size:12.5px; color:var(--ink); border-top:1px solid var(--line)} .jl:nth-of-type(2){border-top:0} .jl .ts{color:var(--faint); font-size:11px} .jl .k.dec{color:var(--accent); text-align:center} .jl .mini{width:18px; height:18px; border-radius:5px; font-size:9px} .jl .by{color:var(--faint); font-size:11px} .jl.usage{border-top:1px dashed var(--line-2); color:var(--muted)} /* feature grid + why */ .feat-grid{display:grid; gap:14px; grid-template-columns:1fr} @media(min-width:640px){ .feat-grid{grid-template-columns:repeat(2,1fr)} } @media(min-width:960px){ .feat-grid{grid-template-columns:repeat(3,1fr)} } .featcard{display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; color:var(--ink); transition:border-color .15s, transform .15s} .featcard:hover{border-color:var(--accent); transform:translateY(-2px)} .featcard b{font-size:18px; letter-spacing:-.01em; color:var(--ink-strong); line-height:1.25} .featcard .go{margin-top:auto; font-size:13.5px; color:var(--accent); font-weight:600} .why{display:grid; gap:18px; grid-template-columns:1fr} @media(min-width:760px){ .why{grid-template-columns:repeat(2,1fr)} } .why>div{padding:24px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel)} .why h3{font-size:18px; color:var(--ink-strong); letter-spacing:-.01em} .why p{margin-top:8px; color:var(--muted); font-size:15px} /* download band */ .dl-band{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; text-align:left; max-width:640px; margin:34px auto 0; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:20px 22px} .dl-text{display:flex; flex-direction:column; gap:4px} .dl-text b{color:var(--ink-strong); font-size:17px} .dl-text span{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.03em} .cta-band .waitlist{margin-top:26px} .cta-band .waitlist .btn--ghost{padding:12px 16px; font-size:14px} /* legal pages */ .legal-hero .wrap{padding-top:clamp(40px,7vw,72px); padding-bottom:clamp(36px,6vw,60px)} .legal-hero h1{margin-top:12px} .legal-notice{display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding:9px 14px 9px 12px; border:1px solid color-mix(in srgb,var(--warn) 45%, transparent); background:color-mix(in srgb,var(--warn) 10%, transparent); border-radius:999px; color:var(--ink); font-size:14px} .legal-notice .dot{width:8px; height:8px; border-radius:50%; background:var(--warn); flex:none} .legal-notice b{font-weight:600} .legal-meta{margin-top:32px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden} @media(min-width:760px){ .legal-meta{grid-template-columns:repeat(4,1fr)} } .legal-meta-item{background:var(--panel); padding:16px 18px; display:flex; flex-direction:column; gap:8px} .legal-meta-item .kicker{font-size:11px; letter-spacing:.14em} .legal-meta-item b{font-weight:560; font-size:15px; line-height:1.45; color:var(--ink)} .legal-sec-wrap{padding-top:clamp(36px,5vw,56px)} .legal-grid{display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:start} @media(min-width:940px){ .legal-grid{grid-template-columns:260px minmax(0,720px)} } .legal-toc{display:flex; flex-direction:column; gap:2px; position:sticky; top:84px} .legal-toc .kicker{margin-bottom:10px} .legal-toc a{display:flex; gap:10px; align-items:baseline; padding:6px 10px; margin-left:-10px; border-radius:var(--r-sm); font-size:14px; color:var(--muted); line-height:1.35} .legal-toc a:hover{background:var(--panel); color:var(--ink)} .legal-toc .n{font-family:var(--mono); font-size:11.5px; color:var(--faint); width:18px; flex:none; text-align:right} @media(max-width:939px){ .legal-toc{position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:2px 16px} .legal-toc .kicker{grid-column:1/-1} } .legal{font-size:16.5px; line-height:1.68; color:var(--ink)} .legal-sec{padding:30px 0; border-top:1px solid var(--line); scroll-margin-top:84px} .legal-sec:first-child{border-top:0; padding-top:0} .legal-sec h2{display:flex; align-items:center; gap:14px; font-size:21px; letter-spacing:-.015em; font-weight:700; color:var(--ink-strong); margin-bottom:16px} .legal-sec h2 .n{font-family:var(--mono); font-size:12.5px; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 38%, transparent); border-radius:7px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; flex:none} .legal-sec p{margin:0 0 14px; max-width:68ch} .legal-sec p:last-child{margin-bottom:0} .legal-sec--caps p{font-size:14.5px; line-height:1.7; letter-spacing:.005em; color:var(--muted)} .legal-sec h3{font-size:16.5px; font-weight:650; color:var(--ink-strong); margin:22px 0 8px; letter-spacing:-.005em} .legal-sec ul{margin:0 0 14px; padding-left:22px; max-width:68ch; display:flex; flex-direction:column; gap:8px} .legal-sec li b{color:var(--ink-strong); font-weight:600} .legal-todo{background:color-mix(in srgb,var(--warn) 18%, transparent); color:var(--ink); border-radius:4px; padding:0 4px; box-decoration-break:clone; -webkit-box-decoration-break:clone} .legal-sec a{color:var(--accent); text-decoration:underline; text-underline-offset:3px} .legal-top{margin-top:34px; font-size:14px} .legal-top a{color:var(--faint)} .legal-top a:hover{color:var(--accent)} /* release notes */ .notes{max-width:760px} .rel{padding:26px 0; border-top:1px solid var(--line)} .rel:first-child{border-top:0; padding-top:0} .rel h3{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--accent); margin:0 0 12px} .rel ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px; color:var(--ink); font-size:15.5px; line-height:1.55} .foot-tag{max-width:34ch; color:var(--faint); margin:0} .foot-cols>div{display:flex; flex-direction:column; gap:10px} /* ---------- Studio-faithful visuals (drawn from the app's own surfaces) ---------- */ .ag{background:#07111b; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; font-family:var(--sans); font-size:12px; color:var(--ink); box-shadow:0 40px 90px -60px rgba(0,0,0,.8); display:flex; flex-direction:column} .ag .at{color:var(--accent); font-weight:600} .ag-eyebrow{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:4px} .ag-head{padding:14px 16px 12px; border-bottom:1px solid var(--line)} .ag-head.jr{display:flex; justify-content:space-between; align-items:flex-start; gap:12px} .ag-title{font-size:20px; font-weight:750; letter-spacing:-.02em; color:var(--ink-strong); line-height:1.1} .ag-obj{font-size:11.5px; color:var(--muted); margin-top:4px} .ag-teamline{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:10.5px; color:var(--muted); justify-content:flex-end} .ag-chip{display:inline-flex; align-items:center; gap:4px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-size:10.5px; color:var(--ink)} .ag-bar{width:64px; height:4px; border-radius:99px; background:color-mix(in srgb,var(--ink) 10%, transparent); overflow:hidden} .ag-bar i{display:block; height:100%; background:var(--ok); border-radius:99px} .ag-body{display:grid; grid-template-columns:1fr; flex:1; min-height:0} @media(min-width:720px){ .ag-body{grid-template-columns:1fr 1.15fr} .ag-board{border-left:1px solid var(--line)} } .ag-body.one{grid-template-columns:1fr} .ag-body.one .ag-board{border-left:0} .ag-tools{display:flex; gap:8px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); font-size:10.5px; color:var(--muted)} .ag-tools>span{border:1px solid var(--line); border-radius:6px; padding:3px 8px; white-space:nowrap} .ag-tools .ag-search{flex:1; color:var(--faint); overflow:hidden; text-overflow:ellipsis} .ag-tools .ag-tools-r{margin-left:auto; border:0; letter-spacing:.2em} .ag-picker.on{border-color:var(--accent); color:var(--ink-strong)} .ag-tools b{color:var(--ink)} /* chat */ .ag-chat{display:flex; flex-direction:column; min-width:0} .ag-feed{display:flex; flex-direction:column; gap:12px; padding:12px 12px 8px; flex:1} .ag-feed.pad{padding:16px} .ag-feed.tail{border-top:1px solid var(--line); padding:10px 12px} .ag-row{display:flex; align-items:flex-end; gap:8px; max-width:92%} .ag-row.you{align-self:flex-end; flex-direction:row-reverse; max-width:80%} .ag-av{width:26px; height:26px; border-radius:50%; flex:none; background:#26323f; border:1px solid var(--line-2); color:var(--muted); font-weight:700; font-size:11px; display:inline-flex; align-items:center; justify-content:center} .ag-av.xs{width:16px; height:16px; font-size:8px; margin-right:6px} .ag-bubble{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:8px 11px; font-size:12px; line-height:1.4; color:var(--ink)} .ag-bubble.you{background:#1f4ed8; border-color:#2f5fe6; color:#fff} .ag-who{display:flex; align-items:center; gap:6px; margin-bottom:3px; font-size:11px} .ag-who b{color:var(--accent-2); font-weight:600} .ag-pill{font-size:8.5px; letter-spacing:.04em; border:1px solid var(--line-2); border-radius:4px; padding:0 4px; color:var(--muted)} .ag-when{font-size:9.5px; color:var(--faint); white-space:nowrap} .ag-reply{display:block; margin-top:5px; font-size:9.5px; opacity:.75} .ag-note{align-self:center; font-size:10px; color:var(--faint); background:var(--panel); border-radius:6px; padding:4px 10px; text-align:center} .ag-ready{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:6px; vertical-align:-1px} .ag-composer{border-top:1px solid var(--line); padding:8px 10px 10px} .ag-posting{font-size:10px; color:var(--faint); margin-bottom:6px} .ag-posting b{color:var(--ink); font-weight:600} .ag-input{background:var(--panel); border:1px solid var(--line-2); border-radius:8px; padding:9px 10px; font-size:11px; color:var(--faint)} /* waiting pill + popover */ .ag-waiting{align-self:center; display:inline-flex; align-items:center; gap:7px; background:var(--panel-2); border:1px solid color-mix(in srgb,var(--accent) 55%, var(--line)); border-radius:99px; padding:5px 12px; font-size:11px; font-weight:600; color:var(--ink-strong)} .ag-waiting-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent)} .ag-waiting-n{font-weight:400; color:var(--muted)} .ag-popover{align-self:center; width:min(100%,420px); background:var(--panel); border:1px solid var(--line-2); border-radius:12px; padding:6px; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); display:flex; flex-direction:column; gap:6px} .ag-q{padding:10px 12px; border-radius:9px; background:var(--panel-2)} .ag-q-who{font-size:10px; color:var(--faint); margin-bottom:3px} .ag-q-text{font-size:12.5px; font-weight:600; color:var(--ink-strong); margin-bottom:8px} .ag-q-opts{display:flex; flex-wrap:wrap; gap:6px} .ag-q-opts span{font-size:11px; border:1px solid var(--line-2); border-radius:7px; padding:4px 9px; color:var(--ink)} .ag-q-opts span:first-child{border-color:var(--accent); color:var(--accent-2)} .ag-q-opts span.you{border-style:dashed; color:var(--muted)} /* board */ .ag-board{display:flex; flex-direction:column; min-width:0} .ag-lanes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px; flex:1; overflow:hidden} .ag-lanes.has-steps{grid-template-columns:1.05fr repeat(4,minmax(0,1fr))} @media(max-width:719px){ .ag-lanes,.ag-lanes.has-steps{grid-template-columns:repeat(2,minmax(0,1fr))} } .ag-lane{background:#0a1522; border:1px solid var(--line); border-radius:9px; padding:7px; display:flex; flex-direction:column; gap:6px; min-width:0} .ag-lane-h{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--ink); padding:2px 2px 4px} .ag-n{margin-left:auto; font-size:9.5px; color:var(--faint); border:1px solid var(--line); border-radius:99px; padding:0 6px; font-variant-numeric:tabular-nums} .ag-dot{width:7px; height:7px; border-radius:50%; flex:none} .ag-dot.todo{background:var(--faint)} .ag-dot.prog{background:var(--accent)} .ag-dot.blocked{background:var(--warn)} .ag-dot.done{background:var(--ok)} .ag-card{background:var(--panel-2); border:1px solid var(--line); border-radius:7px; padding:7px 8px} .ag-card-t{font-size:11px; font-weight:600; color:var(--ink); line-height:1.3} .ag-card-m{display:flex; align-items:center; margin-top:5px; font-size:9.5px; color:var(--muted)} .ag-card.working{border-color:color-mix(in srgb,var(--accent) 50%, var(--line))} .ag-card.done{opacity:.7} .ag-card.done .ag-card-m{color:var(--ok)} .ag-add,.ag-empty{font-size:10px; color:var(--faint); padding:4px 2px} .ag-empty{border:1px dashed var(--line); border-radius:7px; padding:12px 6px; text-align:center} .ag-steps{background:var(--panel)} .ag-step{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); padding:5px 4px; border-radius:6px} .ag-step-n{width:16px; height:16px; border-radius:50%; border:1px solid var(--line-2); font-size:9px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-variant-numeric:tabular-nums} .ag-step.done{color:var(--faint)} .ag-step.done .ag-step-n{border-color:var(--ok); color:var(--ok)} .ag-step.now{background:var(--panel-2); color:var(--ink-strong); font-weight:600} .ag-step.now .ag-step-n{background:var(--accent); border-color:var(--accent); color:#fff} .ag-strip{display:flex; align-items:center; gap:10px; margin:0 10px 10px; padding:8px 10px; background:var(--panel); border:1px solid var(--line-2); border-radius:8px; font-size:11px} .ag-strip b{display:block; color:var(--ink)} .ag-strip span:not(.ag-star):not(.ag-open){font-size:9.5px; color:var(--faint)} .ag-star{color:var(--accent)} .ag-open{margin-left:auto; border:1px solid var(--line-2); border-radius:6px; padding:3px 9px; color:var(--ink)} /* teams page */ .ag-section{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); padding:12px 16px 6px} .ag-section span{letter-spacing:.04em; margin-left:6px} .ag-working{margin:0 16px; background:var(--panel); border:1px solid color-mix(in srgb,var(--accent) 45%, var(--line)); border-radius:10px; padding:12px 14px; display:grid; gap:8px} .ag-live{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok)} .ag-tname{font-size:15px; font-weight:700; color:var(--ink-strong); display:flex; align-items:center; gap:8px; flex-wrap:wrap} .ag-online{font-size:10.5px; font-weight:400; color:var(--muted)} .ag-members{display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; font-size:11px} .ag-members div{display:flex; flex-direction:column; margin-left:-8px; margin-right:6px} .ag-members b{color:var(--ink)} .ag-members span{font-size:9.5px; color:var(--faint)} .ag-working-btns{display:flex; gap:8px; justify-content:flex-end} .ag-btn{border:1px solid var(--line-2); border-radius:7px; padding:5px 11px; font-size:11px; color:var(--ink); white-space:nowrap} .ag-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600} .ag-tcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:4px 16px 16px} .ag-tcard{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--muted)} .ag-tcard>b{color:var(--ink-strong); font-size:13px} .ag-tcard span b{color:var(--ink)} .ag-tfoot{font-size:10px; color:var(--faint)} .ag-stack{display:flex; margin-bottom:4px} .ag-stack .ag-av{margin-left:-7px; border:2px solid var(--panel)} .ag-stack .ag-av:first-child{margin-left:0} /* approval sheet */ .ag-sheet{align-items:center; justify-content:center; padding:26px 18px 14px; background:radial-gradient(60% 80% at 50% 0%, color-mix(in srgb,var(--accent) 14%, transparent), #07111b 70%)} .ag-sheet-card{width:min(100%,400px); background:var(--panel); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); overflow:hidden} .ag-sheet-h{padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-strong)} .ag-sheet-body{display:flex; gap:12px; padding:14px 16px; align-items:flex-start} .ag-sheet-body .ag-av{width:32px; height:32px; font-size:13px} .ag-sheet-body b{display:block; font-size:13px; color:var(--ink-strong)} .ag-sheet-body>div>span{display:block; font-size:11px; color:var(--muted); margin-top:2px} .ag-sheet-body code{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:10.5px; background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:3px 7px; color:var(--ink)} .ag-sheet-btns{display:flex; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--line); align-items:center} .ag-sp{flex:1} .ag-sheet-foot{margin-top:14px; font-size:10.5px; color:var(--faint); letter-spacing:.04em} /* journal */ .ag-seg{display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; font-size:10px; flex:none} .ag-seg span{padding:4px 8px; color:var(--muted)} .ag-seg span.on{background:var(--panel-2); color:var(--ink-strong)} .ag-band{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 16px 4px} .ag-band div{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:10px 12px} .ag-band b{display:block; font-size:20px; font-weight:750; color:var(--ink-strong); font-variant-numeric:tabular-nums; line-height:1} .ag-band span{font-size:10px; color:var(--faint); display:block; margin-top:5px} .ag-jcards{display:grid; grid-template-columns:1.3fr 1fr; gap:8px; padding:8px 16px 16px} .ag-jcard{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:10px 12px; display:flex; flex-direction:column; gap:6px} .ag-jroom{font-size:11.5px; font-weight:600; color:var(--ink-strong); display:flex; justify-content:space-between; padding-bottom:4px; border-bottom:1px solid var(--line)} .ag-jroom span{font-weight:400; color:var(--faint); font-size:10px} .ag-jl{display:flex; align-items:center; font-size:11px; color:var(--ink)} .ag-jl>span:last-child{margin-left:auto; font-size:10px; color:var(--faint); font-variant-numeric:tabular-nums} .ag-dec{color:var(--accent); margin-right:8px} @media(max-width:600px){ .ag-band,.ag-jcards,.ag-tcards{grid-template-columns:1fr} } /* narrow room panels: keep lane names on one line and drop the (empty) Blocked lane */ .ag-board{container-type:inline-size} .ag-lane-h{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ag-lane-h .ag-n{flex:none} @container (max-width: 640px){ .ag-lane.blocked{display:none} .ag-lanes{grid-template-columns:repeat(3,minmax(0,1fr))} .ag-lanes.has-steps{grid-template-columns:1.1fr repeat(3,minmax(0,1fr))} } /* ---------- room graphics get the full width; panels size by their own width ---------- */ .hero-inner--room{grid-template-columns:1fr; gap:clamp(28px,4vw,44px)} @media(min-width:1100px){ .hero-inner--room{grid-template-columns:1fr 1fr} } /* The hero shows a SQUARE crop of the room, anchored top-left: the chat in full, the board cut at the right edge so it reads as "there is more", never the whole tile squeezed to fit (owner, 2026-09-10). */ .hero-crop{aspect-ratio:1/1; overflow:hidden; position:relative; border-radius:var(--r-lg); border:1px solid var(--line-2); box-shadow:0 40px 90px -60px rgba(0,0,0,.8); background:#07111b} .hero-crop .ag{width:160%; max-width:none; border:0; border-radius:0; box-shadow:none; will-change:transform} /* Hover-driven pan (owner, 2026-09-10): the frame rests on the chat; pointer on the panel glides it to the board, pointer off glides it back. 60% of the tile is off-frame (160% wide), so full travel is -37.5% of the tile's own width. One slow idle glide after load hints that there is more, then the pointer owns it. */ /* A slow scroll, not a jump: ~5s across the tile on hover, and the same pace back on leave. */ .hero-crop .ag{transition:transform 5s cubic-bezier(.35,0,.25,1)} .hero-crop:hover .ag,.hero-crop:focus-within .ag{transform:translateX(-37.5%)} @keyframes hero-hint{ 0%,100%{transform:translateX(0)} 40%,60%{transform:translateX(-37.5%)} } /* The hint glide lives on a WRAPPER, never on the tile: a finished keyframe animation keeps owning the property it animated, and a hover change to that same property then applies with no transition (the "jumps to the end" bug, 2026-09-10). Two elements, two transforms, both smooth. */ .hero-pan{width:100%} @media (prefers-reduced-motion:no-preference){ .hero-pan{animation:hero-hint 7s cubic-bezier(.45,0,.2,1) 2.5s 1 both} .hero-crop:hover .hero-pan,.hero-crop:focus-within .hero-pan{animation-play-state:paused} } /* Edge fades swap sides with the pan so the cut edge always reads as "more this way". */ .hero-crop::before,.hero-crop::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1; transition:opacity 5s cubic-bezier(.35,0,.25,1)} .hero-crop::before{background:linear-gradient(90deg, #07111b 0%, transparent 18%); opacity:0} .hero-crop::after{background:linear-gradient(90deg, transparent 78%, #07111b 100%), linear-gradient(180deg, transparent 88%, #07111b 100%); opacity:1} .hero-crop:hover::before,.hero-crop:focus-within::before{opacity:1} .hero-crop:hover::after,.hero-crop:focus-within::after{opacity:.35} /* The hint: a small pill in the corner, gone once the pointer has found the panel. */ .hero-hint{position:absolute; right:14px; bottom:14px; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:color-mix(in srgb,#07111b 78%, transparent); border:1px solid var(--line-2); border-radius:999px; padding:6px 10px; backdrop-filter:blur(6px); transition:opacity .5s ease; pointer-events:none} .hero-crop:hover .hero-hint{opacity:0} @media(max-width:1099px){ .hero-crop{aspect-ratio:auto; border:0; box-shadow:none; overflow:visible} .hero-crop .ag{width:100%; border:1px solid var(--line-2); border-radius:var(--r-lg); animation:none} .hero-crop::after,.hero-crop::before,.hero-hint{display:none} } .hero-inner--room>div:first-child{max-width:62ch} .ag{container:panel / inline-size} .ag-board{container:board / inline-size} .ag-body.room{grid-template-columns:.9fr 1.4fr} @container panel (max-width: 760px){ .ag-body,.ag-body.room{grid-template-columns:1fr} .ag-board{border-left:0; border-top:1px solid var(--line)} } @container board (max-width: 680px){ .ag-lane.blocked{display:none} .ag-lanes{grid-template-columns:repeat(3,minmax(0,1fr))} .ag-lanes.has-steps{grid-template-columns:1.1fr repeat(3,minmax(0,1fr))} } @container board (max-width: 460px){ .ag-lanes,.ag-lanes.has-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .ag-steps{grid-column:1 / -1} } .ag-lane{min-width:0} .ag-card-t,.ag-bubble,.ag-step,.ag-obj{overflow-wrap:anywhere} .ag-lane-h{overflow:visible; text-overflow:clip} /* ---------- phone nav menu ---------- */ .nav-toggle{display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0} .nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .18s ease, opacity .18s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px} @media(max-width:820px){ .nav-inner{flex-wrap:wrap; height:auto; min-height:64px; padding:10px 0} .nav-toggle{display:flex; order:2} .nav-actions{margin-left:10px; order:3} .nav-links{display:none; order:4; flex-basis:100%; flex-direction:column; gap:0; margin:8px 0 4px; border-top:1px solid var(--line)} .nav-links.open{display:flex} .nav-links a{padding:12px 4px; border-bottom:1px solid var(--line); font-size:16px; color:var(--ink)} .nav-links a[aria-current="page"]{color:var(--accent-2)} } @media(max-width:820px){ .nav-inner{gap:10px} .nav-actions{margin-left:auto} .nav-toggle{margin-left:0} .nav-actions .btn{padding:9px 12px} } @media(max-width:480px){ .nav-inner .beta-badge{display:none} } /* Interactive decision example and feature navigation. */ .ag-demo-label{padding:12px 16px 0; color:var(--muted); font-size:11px} fieldset.ag-q{margin:0; min-width:0; border:0} .ag-q-opts button,.ag-demo-reset{font:inherit; font-size:11px; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:7px; padding:8px 10px; min-height:44px; cursor:pointer; transition:background .15s,border-color .15s} .ag-q-opts button.you{border-style:dashed} .ag-q-opts button:disabled{cursor:default; opacity:.65} .ag-q-opts button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:white} .ag-q-opts button:focus-visible,.ag-demo-reset:focus-visible,.featcard:focus-visible{outline:2px solid var(--accent-2); outline-offset:4px} .ag-demo-answer{min-height:3em; margin:8px 0 0; font-size:11px; color:var(--ink); line-height:1.5} .ag-demo-reset{align-self:center} .ag-demo-reset[hidden]{display:none} .featcard:focus-visible{border-color:var(--accent)} .featcard .go{transition:transform .15s ease} @media(hover:hover){ .ag-q-opts button:not(:disabled):hover,.ag-demo-reset:hover{border-color:var(--accent-2)} } @media(prefers-reduced-motion:no-preference){ .featcard:hover .go,.featcard:focus-visible .go{transform:translateX(3px)} } @media(prefers-reduced-motion:reduce){.featcard:hover{transform:none}}