/* ============================================================ Quote60 — warm paper theme Libre Baskerville / Lora / IBM Plex Mono on a cream ground. Light by default; .dark on switches the whole thing. ============================================================ */ :root{ /* one padding scale, so no two cards breathe differently */ --pad-card:34px; --pad-card-sm:26px; --bg:#f5f1e6; --fg:#4a3f35; --card:#fffcf5; --card-fg:#4a3f35; --primary:#855f3c; --primary-fg:#ffffff; /* was #855f3c — 2.98:1 on --mutedbg */ --secondary:#e2d8c3; --secondary-fg:#5c4d3f; --mutedbg:#ece5d8; --mut:#74614d; --accent:#d4c8aa; --accent-fg:#4a3f35; --destructive:#b54a35; --destructive-fg:#ffffff; --hair:#dbd0ba; --ring:#855f3c; --c1:#855f3c; --c2:#785c3c; --c3:#735a3a; --c4:#b3906f; --c5:#c0a080; --r:0.25rem; --r-lg:0.35rem; --r-sm:0.2rem; /* the arrow and box glyphs the UI uses are in none of these three faces, so name the symbol fallback instead of leaving the pick to the OS */ --serif:'Libre Baskerville',Georgia,"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",serif; --body-serif:'Lora',Georgia,"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",serif; --mono:'IBM Plex Mono',ui-monospace,"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",monospace; --sh:2px 3px 5px hsl(28 13% 20% / .12); --sh-lg:3px 6px 18px hsl(28 13% 20% / .16); --max:1240px; --pad:32px; /* names the older rules still reference */ --text:var(--fg); --dim:#5c4d3f; --surface:var(--card); --surface-2:var(--mutedbg); --amber:var(--primary); --amber-dim:rgba(166,124,82,.14); --mint:#6f7d53; --ice:#6d7f92; --alert:var(--destructive); --bg-2:var(--mutedbg); --hair-2:rgba(219,208,186,.55); --sans:var(--body-serif); } html.dark{ --bg:#2d2621; --fg:#ece5d8; --card:#3a322c; --card-fg:#ece5d8; --primary:#c0a080; --primary-fg:#2d2621; --secondary:#4a4039; --secondary-fg:#ece5d8; --mutedbg:#312b26; --mut:#c5bcac; --accent:#59493e; --accent-fg:#ece5d8; --hair:#4a4039; --ring:#c0a080; --c1:#c0a080; --c2:#b3906f; --c3:#855f3c; --c4:#785c3c; --c5:#735a3a; --text:var(--fg); --dim:#d8cfc0; --surface:var(--card); --surface-2:var(--mutedbg); --amber:var(--primary); --amber-dim:rgba(192,160,128,.16); --bg-2:var(--mutedbg); --hair-2:rgba(74,64,57,.7); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body-serif); font-size:17px;line-height:1.68;font-weight:400;overflow-x:hidden; -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%} h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.14; letter-spacing:-.01em;margin:0;color:var(--fg)} h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08} h2{font-size:clamp(25px,3vw,36px)} h3{font-size:20px;letter-spacing:-.015em} p{margin:0 0 14px;color:var(--dim)} a{color:var(--amber);text-underline-offset:3px} img,svg{display:block;max-width:100%} figure{margin:0} :focus{outline:none} :focus-visible{outline:2px solid var(--amber);outline-offset:2px} ::selection{background:rgba(166,124,82,.3)} .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .mono{font-family:var(--mono);font-size:14px;letter-spacing:.12em; text-transform:uppercase;color:var(--amber)} .kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px} .kicker::before{content:"";width:38px;height:1px;background:var(--amber)} .muted{color:var(--mut)} .skip{position:absolute;left:-9999px} /* grid ground under the dark sections */ .grid-bg{background-image: linear-gradient(rgba(122,104,82,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(122,104,82,.10) 1px,transparent 1px); background-size:56px 56px} /* ---------- header ---------- */ .bar{position:sticky;top:0;z-index:40;background:rgba(255,252,245,.9); backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)} .bar-in{max-width:var(--max);margin:0 auto;padding:14px var(--pad); display:flex;align-items:center;gap:40px} /* .mark now holds the lockup and nothing else, so font-size here is not type — it is the lockup's scale: 1em of it is 1.04em of lockup height. 23px matches what the app headers carry, so the mark is the same size across the whole site and the responsive rules still shrink it. */ .mark{display:flex;align-items:center;font-size:23px;text-decoration:none;flex:none} .bar nav{display:flex;gap:28px;font-size:14px;margin-right:auto} .bar nav a{color:var(--dim);text-decoration:none} .bar nav a{position:relative;padding-bottom:4px} .bar nav a:hover{color:var(--fg)} .bar nav a[aria-current]{color:var(--fg);font-weight:600} .bar nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px; height:2px;background:var(--primary);border-radius:1px} .bar .side{display:flex;align-items:center;gap:16px;font-size:14px} .bar .side a{color:var(--dim);text-decoration:none} .bar .side a:hover{color:var(--fg)} /* ---------- mobile navigation ---------- The burger and its script have existed since the first build; the button was never emitted and nothing styled it, so on a phone the five nav links and the two side links simply ran off the right edge (~317px past it). The script toggles .open on #nav, so .side is reached as its sibling rather than changing the script. */ .burger{display:none;flex:none;flex-direction:column;justify-content:center;gap:5px; width:42px;height:38px;padding:0 9px;cursor:pointer; background:var(--card);border:1px solid var(--hair);border-radius:var(--r)} .burger span{display:block;height:2px;background:var(--fg);border-radius:1px; transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:820px){ .burger{display:flex} .bar-in{gap:14px;flex-wrap:wrap;padding-left:20px;padding-right:20px} .mark{margin-right:auto} .bar nav,.bar .side{display:none;flex-basis:100%;width:100%;margin:0; flex-direction:column;align-items:stretch;gap:0} .bar nav.open,.bar nav.open ~ .side{display:flex} .bar nav.open{margin-top:12px;border-top:1px solid var(--hair)} .bar nav a,.bar .side a{padding:14px 2px;font-size:16px; border-bottom:1px solid var(--hair);color:var(--fg)} .bar nav a{padding-bottom:14px} .bar nav a[aria-current]::after{display:none} .bar nav a[aria-current]{color:var(--primary)} .bar .side a.btn-line{margin:14px 0 4px;text-align:center;border-bottom:0} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:14px;letter-spacing:.02em;border-radius:var(--r);padding:12px 20px; text-decoration:none;border:1px solid transparent;cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .12s ease} .btn:active{transform:translateY(1px)} .btn-y{color:var(--bg);background:var(--amber);border-color:var(--amber);font-weight:600} .btn-y:hover{background:var(--c2);border-color:var(--c2)} .btn-o,.btn-d{color:var(--fg);background:transparent;border-color:var(--hair)} .btn-o:hover,.btn-d:hover{border-color:var(--amber);background:var(--amber-dim)} .btn-sm{padding:8px 14px;font-size:14px} .btn-line{color:var(--amber);border:1px solid var(--amber);background:transparent; border-radius:var(--r);padding:8px 14px;font-family:var(--mono);font-size:14px; text-decoration:none;display:inline-block} .btn-line:hover{background:var(--amber-dim)} /* ---------- sections ---------- */ section{border-bottom:1px solid var(--hair);padding:96px 0;position:relative} section.band{background:var(--bg-2)} section.hero{padding:0;border-bottom:1px solid var(--hair)} .head{max-width:62ch;margin-bottom:44px} .head h2{margin-top:10px} .head p{color:var(--mut);font-size:17px;margin-top:16px} /* ---------- hero ---------- */ .hero-in{max-width:var(--max);margin:0 auto;padding:104px var(--pad) 96px; display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero3d{width:100%;height:auto;max-width:none;display:block; filter:drop-shadow(0 30px 60px hsl(28 13% 20% / .14))} @media (min-width:1100px){ /* let the drawing run past the container edge so it reads at full size */ .herohouse{width:calc(100% + 5vw);margin-right:-5vw} } .motion .hero3d{transform:perspective(1600px) rotateY(var(--hy,-3deg)) rotateX(var(--hx,2deg)); transition:transform .3s cubic-bezier(.22,.61,.36,1)} .hero3d .chip{opacity:0;animation:chipIn .7s cubic-bezier(.22,.61,.36,1) forwards} .hero3d .chip-a{animation-delay:.45s}.hero3d .chip-b{animation-delay:.6s} .hero3d .chip-c{animation-delay:.75s}.hero3d .chip-d{animation-delay:.9s} @keyframes chipIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .no-motion .hero3d .chip{opacity:1;animation:none} .hero h1{max-width:14ch;margin:0 0 26px} .hero .lede{font-size:19px;color:var(--dim);max-width:46ch;margin:0 0 34px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px} .hero ol{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:52ch} .hero ol li{display:flex;gap:16px;align-items:baseline;font-size:16px;color:var(--dim)} .hero ol em{font-style:normal;font-family:var(--mono);font-size:14px;color:var(--amber);flex:none} @media (max-width:960px){ .hero-in{grid-template-columns:1fr;padding-top:72px} } /* ---------- spec strip ---------- */ .spec{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)} .spec div{padding:34px var(--pad);border-right:1px solid var(--hair)} .spec div:last-child{border-right:0} .spec b{display:block;font-family:var(--mono);font-size:clamp(24px,2.6vw,34px); font-weight:500;color:var(--fg);letter-spacing:-.02em} .spec span{display:block;font-size:14px;color:var(--mut);margin-top:8px} @media (max-width:820px){ .spec{grid-template-columns:1fr 1fr} .spec div:nth-child(2n){border-right:0} } /* ---------- cards ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px} .cell{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg); padding:var(--pad-card) var(--pad-card) calc(var(--pad-card) + 4px);transition:border-color .2s ease,transform .2s ease} .cell:hover{border-color:rgba(166,124,82,.4);transform:translateY(-3px)} .cell .mono{font-size:14px;margin-bottom:14px;display:block} .cell h3{margin-bottom:10px} .cell p{color:var(--mut);font-size:15px;margin:0} /* ---------- product screens ---------- */ .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} @media (max-width:900px){ .shots{grid-template-columns:1fr} } .shot{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column; transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease} .shot:hover{border-color:rgba(166,124,82,.4);box-shadow:var(--sh-lg)} .shot svg{width:100%;height:auto;border-bottom:1px solid var(--hair)} .shot figcaption{padding:var(--pad-card-sm) var(--pad-card) calc(var(--pad-card-sm) + 6px);font-size:15px;color:var(--mut);margin-top:auto} .shot figcaption b{display:block;font-family:var(--mono);font-size:14px; letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin-bottom:8px} /* ---------- demo ---------- */ .player{position:relative;max-width:1000px;margin:0 auto;border-radius:var(--r-lg); overflow:hidden;border:1px solid var(--hair);background:var(--surface);box-shadow:var(--sh-lg)} .player svg,.player img{display:block;width:100%;height:auto} /* the width/height attributes on the still reserve its box before the file arrives, so the section does not jump when it loads */ .pbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:92px;height:92px;border-radius:50%;background:var(--amber);border:0;cursor:pointer; box-shadow:0 12px 40px hsl(28 13% 20% / .12);transition:transform .2s ease} .pbtn::after{content:"";position:absolute;left:37px;top:27px;border-left:30px solid var(--bg); border-top:19px solid transparent;border-bottom:19px solid transparent} .pbtn:hover{transform:translate(-50%,-50%) scale(1.06)} .cap{position:absolute;left:18px;bottom:16px;background:rgba(74,63,53,.86); font-family:var(--mono);font-size:14px;color:var(--card);padding:7px 13px;border-radius:var(--r)} .chapters{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;max-width:1000px;margin:26px auto 0;padding:0} .chapters li{display:flex;gap:12px;align-items:baseline;padding:14px 16px; border:1px solid var(--hair);border-radius:var(--r);background:var(--surface); color:var(--dim);font-size:15px} .chapters li:hover{border-color:rgba(166,124,82,.4)} .chapters em{font-style:normal;font-family:var(--mono);font-size:14px;color:var(--amber);flex:none} /* ---------- pricing ---------- */ .billing{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--hair); border-radius:24px;padding:4px;margin-bottom:8px} .bill{border:0;background:none;font-family:var(--mono);font-size:14px;color:var(--mut); padding:9px 20px;border-radius:20px;cursor:pointer} .bill.on{background:var(--amber);color:var(--bg);font-weight:600} .bill span{font-size:14px;margin-left:6px} /* no opacity: at .8 the label composited to #dfd4c4 on the amber fill, 3.87:1, below AA */ .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:28px} .tier{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg); padding:var(--pad-card) var(--pad-card) calc(var(--pad-card) + 6px);display:flex;flex-direction:column} .tier.best{border-color:var(--amber);background:linear-gradient(180deg,rgba(166,124,82,.09),var(--surface))} .tier h3{margin:10px 0 8px} .tier .who{color:var(--mut);font-size:14.5px;min-height:44px} .tier .price{margin:18px 0 6px} .tier .amt{font-family:var(--mono);font-size:38px;font-weight:500;color:var(--fg);letter-spacing:-.02em} .tier .term{display:block;font-size:14px;color:var(--mut);margin-top:6px} .tier ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:11px} .tier ul li{position:relative;padding-left:24px;font-size:15px;color:var(--dim)} .tier ul li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px; border-radius:2px;background:var(--amber)} .tier .btn{margin-top:auto;justify-content:center} /* ---------- cases, quotes, faq ---------- */ .cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin-top:28px} .case{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg); padding:var(--pad-card)} .case h3{margin-bottom:10px} .case p{color:var(--mut);font-size:15px} .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} @media (max-width:900px){ .split{grid-template-columns:1fr;gap:32px} } blockquote{margin:0;border-left:2px solid var(--amber);padding-left:24px} blockquote p{font-size:21px;line-height:1.4;color:var(--fg)} blockquote cite{font-style:normal;font-family:var(--mono);font-size:14px;color:var(--mut)} .faq{border-top:1px solid var(--hair);margin-top:34px} .faq details{border-bottom:1px solid var(--hair)} .faq summary{cursor:pointer;padding:18px 0;font-size:17px;font-weight:600; color:var(--fg);list-style:none;display:flex;align-items:center;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";font-family:var(--mono);color:var(--amber);font-size:19px} .faq details[open] summary::before{content:"–"} .faq p{color:var(--mut);padding:0 0 18px 32px;margin:0;max-width:76ch} .notes{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;max-width:52ch} .notes li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--dim)} .key{flex:none;width:24px;height:24px;border:1px solid var(--amber);border-radius:50%; color:var(--amber);font-family:var(--mono);font-size:14px;display:grid;place-items:center;margin-top:2px} .strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:26px 0} .strip-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex; align-items:center;gap:30px;flex-wrap:wrap;font-family:var(--mono);font-size:14px;color:var(--mut)} .figs{display:grid;grid-template-columns:1fr 1fr;gap:14px} .fig{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r); padding:var(--pad-card-sm)} .fig b{display:block;font-family:var(--mono);font-size:26px;color:var(--fg)} .fig span{font-size:14px;color:var(--mut)} /* Dark variant (the estimate-review tiles). The rule above sets the number to --fg explicitly, so a colour on the tile can never reach it — that is what put dark text on a dark tile. Must stay after .fig b: same specificity. */ .fig-dark{background:#4a5f6e;border-color:#3d505c} .fig-dark b{color:#fffcf5} .fig-dark span{color:#d6e2e9} /* help page bits */ .bookcard{display:grid;place-items:center;padding:10px} .book{background:var(--surface-2);border:1px solid var(--hair); border-radius:2px .35rem .35rem 2px;padding:38px 34px 34px 42px;max-width:340px; box-shadow:-6px 0 0 hsl(28 13% 20% / .10),var(--sh-lg);position:relative} .book .bookmark{position:absolute;top:0;right:26px;width:26px;height:52px;background:var(--amber)} .book .bookmark span{position:absolute;bottom:-1px;left:0;border-left:13px solid transparent; border-right:13px solid transparent;border-bottom:11px solid var(--surface-2)} .book b{display:block;font-size:27px;font-weight:600;letter-spacing:-.025em;margin:26px 0 12px} .book em{display:block;font-style:normal;color:var(--mut);font-size:14.5px;line-height:1.5} .book .pages{display:block;margin-top:22px;font-family:var(--mono);font-size:14px; letter-spacing:.1em;text-transform:uppercase;color:var(--amber)} .vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:28px} .vid{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden} .vid:hover{border-color:rgba(166,124,82,.4)} .vid .thumb{position:relative;height:132px;background:linear-gradient(140deg,var(--secondary),var(--mutedbg))} .vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px; border-radius:50%;background:var(--amber);display:block} .vid .play::after{content:"";position:absolute;left:18px;top:13px;border-left:14px solid var(--bg); border-top:9px solid transparent;border-bottom:9px solid transparent} .vid .len{position:absolute;right:9px;bottom:9px;background:rgba(74,63,53,.86);color:var(--card); font-family:var(--mono);font-size:14px;padding:3px 7px;border-radius:4px} .vid b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.05em; text-transform:uppercase;padding:var(--pad-card-sm) var(--pad-card-sm) 0} .vid p{color:var(--mut);font-size:16px;margin:9px 0 0; padding:0 var(--pad-card-sm) var(--pad-card-sm)} /* legal pages */ .legal{max-width:74ch;margin:0 auto} .legal h2{margin-bottom:10px} .legal h3{font-size:19px;margin:30px 0 8px} .legal p,.legal li{color:var(--mut)} .legal ul{margin:0 0 16px;padding-left:20px} .legal .stamp{background:var(--amber-dim);border:1px solid rgba(166,124,82,.35); border-radius:var(--r);padding:16px 18px;color:#F0C889;margin-bottom:30px} .legal .stamp b{display:block;margin-bottom:5px;color:var(--amber)} /* forms */ .field{margin-bottom:18px} .field label{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.02em; color:var(--mut);margin-bottom:8px} .field input,.field select,.field textarea{width:100%;font-family:var(--body-serif);font-size:16px; color:var(--fg);background:var(--bg-2);border:1px solid var(--hair); border-radius:var(--r);padding:13px 14px} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--amber);box-shadow:0 0 0 3px rgba(166,124,82,.18)} /* footer */ footer{position:relative;overflow:hidden;padding:56px 0 40px;color:var(--mut);font-size:14px} /* a soft wash rising out of the bottom corner, in place of a hard edge */ footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(125% 130% at 50% 4%, rgba(166,124,82,.03) 45%, rgba(166,124,82,.15) 100%)} .foot,.foot-b,.foot-word{position:relative;z-index:1} /* contact lines under the mark */ .foot-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px} .foot-contact li{display:flex;align-items:center;gap:11px} .foot-contact svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--primary); stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* the one live thing in the list gets a slow pulse */ /* the li is a grid item and fills the column, so hang the dot off the link */ .foot-live a{position:relative} .foot-live a::after{content:"";position:absolute;top:3px;right:-12px;width:6px;height:6px; border-radius:50%;background:var(--primary);animation:footPulse 2s ease-in-out infinite} @keyframes footPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}} .foot-social{display:flex;align-items:center;gap:18px} .foot-social a{display:grid;place-items:center;color:var(--mut)} .foot-social a:hover{color:var(--primary)} .foot-social svg{width:19px;height:19px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (prefers-reduced-motion:reduce){ .foot-live a::after{animation:none} } .foot{max-width:var(--max);margin:0 auto;padding:0 var(--pad); display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px} @media (max-width:820px){ .foot{grid-template-columns:1fr 1fr} } footer h2.foot-h{font-family:var(--mono);font-size:14px;letter-spacing:.1em; text-transform:uppercase;color:var(--fg);margin:0 0 14px;font-weight:500} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} footer a{color:var(--mut);text-decoration:none} footer a:hover{color:var(--fg)} .foot-b{max-width:var(--max);margin:34px auto 0;padding:22px var(--pad) 0; border-top:1px solid var(--hair);display:flex;align-items:center;gap:26px;flex-wrap:wrap} .foot-b a{color:var(--mut);text-decoration:none;font-size:14px} .foot-b a:hover{color:var(--fg)} .foot-b .mono{margin-left:auto;font-size:14px;letter-spacing:.06em;color:var(--mut)} /* build stamp: quiet, but always reachable so a bug report can name it */ .buildstamp{font-family:var(--mono);font-size:14px;color:var(--mut); letter-spacing:.04em;white-space:nowrap} .foot-b .buildstamp{flex-basis:100%;margin-top:6px} .buildstamp-float{position:fixed;left:10px;bottom:8px;z-index:99; background:var(--card);border:1px solid var(--hair);border-radius:3px;padding:3px 8px} @media (max-width:760px){ .foot-b{justify-content:center;text-align:center} .foot-b .mono{margin:8px auto 0;width:100%} } .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* motion */ .motion .rv{opacity:0;transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,.61,.36,1) var(--d,0ms), transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0ms)} .motion .rv.shown{opacity:1;transform:none} .no-motion .rv{opacity:1;transform:none} .motion .shot,.motion .player{transform:perspective(1400px) rotateX(var(--tilt,0deg)) rotateY(var(--px,0deg)) translateY(var(--lift,0px));will-change:transform} .readbar{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--amber); transform:scaleX(0);transform-origin:0 50%;z-index:200;pointer-events:none} .no-motion .readbar{display:none} @media (prefers-reduced-motion:reduce){ .motion .rv{opacity:1!important;transform:none!important} .motion .shot,.motion .player{transform:none!important} .readbar{display:none} } /* ---------- figures on the inner pages ---------- */ .flowfig svg,.chartfig svg,.agenda svg{width:100%;height:auto;display:block} .flowcap{margin:22px 0 0;color:var(--mut);font-size:16px;text-align:center;max-width:74ch;margin-inline:auto} .chartfig .flowcap,.agenda .flowcap{text-align:left} .jobgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px} .jobcard{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg); overflow:hidden;transition:border-color .2s ease,transform .2s ease} .jobcard:hover{border-color:rgba(166,124,82,.4);transform:translateY(-3px)} .jobcard svg{width:100%;height:auto;display:block;border-bottom:1px solid var(--hair)} .jobmeta{padding:var(--pad-card-sm) var(--pad-card) calc(var(--pad-card-sm) + 2px)} .jobmeta b{display:block;font-size:17px;font-weight:600;color:var(--fg);margin-bottom:6px} .jobmeta span{font-family:var(--mono);font-size:14px;color:var(--mut)} @media (max-width:900px){ .flowfig{overflow-x:auto} .flowfig svg{min-width:900px} } /* ---------- hero house ---------- */ .herohouse{position:relative;width:100%} .herohouse img{width:100%;height:auto;display:block; filter:drop-shadow(0 40px 70px hsl(28 13% 20% / .16))} .hmarks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hchip{position:absolute;display:flex;align-items:center;gap:12px; background:rgba(23,26,40,.94);border:1px solid #39405C;border-radius:14px; padding:14px 18px;backdrop-filter:blur(8px);box-shadow:0 14px 34px hsl(28 13% 20% / .12); opacity:0;animation:chipIn .7s cubic-bezier(.22,.61,.36,1) forwards} .hchip em{display:block;font-style:normal;font-family:var(--mono);font-size:14px; letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} .hchip b{display:block;font-family:var(--mono);font-size:20px;font-weight:600; color:var(--fg);margin-top:4px} .hchip b.amber{color:var(--amber)} .hchip b.mint{color:var(--mint)} .hchip .dot{width:11px;height:11px;border-radius:50%;flex:none} .hchip .dot.ok{background:var(--mint)} .hchip .dot.ice{background:var(--ice)} .hc-a{left:0;top:6%;animation-delay:.45s} .hc-b{right:2%;top:0;animation-delay:.6s} .hc-c{left:2%;bottom:2%;animation-delay:.75s} .hc-d{right:0;bottom:6%;animation-delay:.9s} .no-motion .hchip{opacity:1;animation:none} @keyframes chipIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .motion .herohouse .hframe{transform:perspective(1600px) rotateY(var(--hy,-3deg)) rotateX(var(--hx,1deg)); transition:transform .35s cubic-bezier(.22,.61,.36,1)} @media (max-width:700px){ .hchip{padding:10px 13px} .hchip b{font-size:17px} .hchip em{font-size:14px} .hc-b,.hc-d{right:0} } /* ---------- hero: prices attach to the frame by a leader line ---------- */ .herohouse{position:relative;width:100%} .herohouse img{width:100%;height:auto;display:block; filter:drop-shadow(3px 10px 26px hsl(28 13% 20% / .24))} /* The picture and its dimension figures lean as one plane, so the figures stay on the rules that are drawn into the image. */ /* The artwork is the house alone; the three dimension rules are drawn by .hrules over a frame that reserves room for them. Percentage padding resolves against the width on every side, so these two values hold the padded box at 1129 x 523 at any hero width. */ .hframe{position:relative;padding:0 4.96% 5.669% 0} .hrules{position:absolute;inset:0;width:100%;height:100%;display:block; fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linecap:butt; vector-effect:non-scaling-stroke;pointer-events:none} .hdim{position:absolute;font-family:var(--mono);font-size:14px;font-weight:600; color:var(--primary);background:var(--bg);padding:2px 7px;border-radius:var(--r-sm); white-space:nowrap;pointer-events:none} .hdim-d{left:13.508%;top:93.499%;transform:translate(-50%,-50%)} .hdim-w{left:61.027%;top:93.499%;transform:translate(-50%,-50%)} .hdim-h{left:97.52%;top:43.881%;transform:translate(-50%,-50%) rotate(-90deg)} /* the site holds a 14px floor on text, so only the padding gives here */ @media (max-width:700px){ .hdim{padding:1px 5px} } .calls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px; position:relative} .call{position:relative;background:var(--card);border:1px solid var(--hair); border-top:2px solid var(--primary);border-radius:var(--r);padding:12px 14px; box-shadow:var(--sh);opacity:0} .call em{display:block;font-style:normal;font-family:var(--mono);font-size:14px; color:var(--mut);line-height:1.35} .call b{display:block;font-family:var(--mono);font-size:16px;color:var(--fg);margin-top:4px} /* the leader: a line that draws upward from the card into the drawing, ending in a dot on the part being priced */ .call .lead{position:absolute;left:var(--x,50%);bottom:100%;width:2px;height:0; background:var(--primary);transform-origin:bottom} .call .lead::after{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:10px; border-radius:50%;background:var(--primary);opacity:0; box-shadow:0 0 0 4px rgba(166,124,82,.2)} .calltotal{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:14px; background:var(--card);border:1px solid var(--hair);border-left:3px solid var(--primary); border-radius:var(--r);padding:16px 20px;box-shadow:var(--sh);opacity:0} .calltotal em{display:block;font-style:normal;font-family:var(--mono);font-size:14px;color:var(--mut)} .calltotal b{display:block;font-family:var(--mono);font-size:17px;color:var(--fg);margin-top:3px} .calltotal b.big{font-size:22px} .calltotal b.amber{color:var(--primary)} .calltotal .arrow{color:var(--primary);font-size:20px} /* the sequence: line draws, dot lands, card arrives — one trade at a time */ .motion .call .lead{animation:leadDraw .45s ease forwards} .motion .call .lead::after{animation:dotIn .3s ease forwards} .motion .call{animation:cardIn .4s ease forwards} .motion .call:nth-child(1) .lead{animation-delay:.5s} .motion .call:nth-child(1) .lead::after{animation-delay:.95s} .motion .call:nth-child(1){animation-delay:1.05s} .motion .call:nth-child(2) .lead{animation-delay:1.5s} .motion .call:nth-child(2) .lead::after{animation-delay:1.95s} .motion .call:nth-child(2){animation-delay:2.05s} .motion .call:nth-child(3) .lead{animation-delay:2.5s} .motion .call:nth-child(3) .lead::after{animation-delay:2.95s} .motion .call:nth-child(3){animation-delay:3.05s} .motion .call:nth-child(4) .lead{animation-delay:3.5s} .motion .call:nth-child(4) .lead::after{animation-delay:3.95s} .motion .call:nth-child(4){animation-delay:4.05s} .motion .calltotal{animation:cardIn .5s ease forwards;animation-delay:4.7s} @keyframes leadDraw{from{height:0}to{height:44px}} @keyframes dotIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} @keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* without motion, everything is simply there */ .no-motion .call,.no-motion .calltotal{opacity:1;animation:none} .no-motion .call .lead{height:44px} .no-motion .call .lead::after{opacity:1} @media (prefers-reduced-motion:reduce){ .call,.calltotal{opacity:1!important;animation:none!important} .call .lead{height:44px!important;animation:none!important} .call .lead::after{opacity:1!important;animation:none!important} } @media (max-width:820px){ .calls{grid-template-columns:1fr 1fr;margin-top:20px} .call .lead{display:none} .call{border-top-width:1px;border-left:3px solid var(--primary)} } } .tkanim{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg); padding:20px;box-shadow:var(--sh)} .tkanim svg{width:100%;height:auto;display:block} /* figure tables on the features page */ .figtab{width:100%;border-collapse:collapse;margin-top:18px;table-layout:fixed} .figtab td{padding:11px 0;font-size:16px;color:var(--fg); border-bottom:1px solid var(--hair);vertical-align:baseline} .figtab tr:last-child td{border-bottom:0} .figtab td:first-child{width:62%} .figtab td:last-child{text-align:right;font-family:var(--mono);font-size:16px; color:var(--mut);white-space:nowrap} .figtab b{font-weight:600} /* every figure gets air between its drawing and the card edge */ .flowfig svg,.chartfig svg,.agenda svg,.tkanim svg{margin:0 auto} .shot svg,.jobcard svg{padding:14px 14px 0;background:var(--card)} .jobcard svg{border-bottom:1px solid var(--hair);padding-bottom:14px} .figs{gap:16px} .fig b{font-size:30px;line-height:1.1} .fig span{font-size:15px;display:block;margin-top:6px} @media (max-width:700px){ :root{--pad-card:24px;--pad-card-sm:20px} } .flowfig,.chartfig,.agenda,.tkanim{background:var(--card);border:1px solid var(--hair); border-radius:var(--r-lg);padding:var(--pad-card) calc(var(--pad-card) + 6px); box-shadow:var(--sh)} /* ------------------------------------------------------------------ NOT BUILT YET Some capabilities are described on the marketing pages that the product does not do. Rather than delete the plan, mark it: this has to read as a status, not as decoration, so it carries its own border and its own colour instead of inheriting the muted label beside it. --mut on --card is AA at this size (5.9:1). ------------------------------------------------------------------ */ .soon{display:inline-block;margin-left:8px;padding:1px 8px; border:1px solid var(--hair);border-radius:999px; font-family:ui-monospace,'IBM Plex Mono',monospace;font-size:14px; font-weight:600;letter-spacing:.02em;color:var(--mut);background:var(--card)} /* ------------------------------------------------------------------ DESK PHOTOGRAPH — features.html, above the workflow diagram Framed to match .flowfig directly below it (same card, border, radius and shadow) so the two read as one pair, but with the padding on the caption instead of the image: a photograph wants to meet its frame, a diagram wants air around it. Caption is 14px, the floor the tests enforce, and --mut on --card is 5.9:1 — AA at this size. ------------------------------------------------------------------ */ .deskfig{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg); box-shadow:var(--sh);overflow:hidden;margin:0 0 20px} .deskfig img{display:block;width:100%;height:auto} .deskfig figcaption{font-family:var(--mono);font-size:14px;color:var(--mut); padding:12px calc(var(--pad-card) + 6px) 14px;border-top:1px solid var(--hair)} /* ------------------------------------------------------------------ FEATURE PHOTOGRAPHS — features.html .flip was already on block 02 in the markup but was never defined anywhere in this stylesheet, so both blocks were rendering text-left and the page read as a column. Defining it is what actually makes the sides alternate. .figcol lets a photograph sit above the data card inside one half of the two-column .split, without adding a third child that would break the grid. ------------------------------------------------------------------ */ .figcol{display:grid;gap:22px;justify-items:start;align-content:start} .featshot{width:100%;max-width:380px;margin:0;border-radius:var(--r-lg); overflow:hidden;border:1px solid var(--hair);box-shadow:var(--sh);background:var(--card)} .featshot img{display:block;width:100%;height:auto} /* desktop: alternate which side the photo column falls on */ @media (min-width:901px){ .split.flip > :first-child{order:2} } /* Below 900px .split is already one column. The words come first in the DOM in all three blocks, so pushing that child down is what puts the photograph above the text on a phone. */ @media (max-width:900px){ .split > :first-child{order:2} } .unitask{margin-top:14px;padding:14px 16px;border:1px solid var(--hair); background:var(--card);font-size:14.5px;line-height:1.6;color:var(--dim)} /* ---- the lockup ---- */ .mark .q60{width:4.75em;height:1.04em;display:block;flex:none} .q-w{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;font-size:1000px} /* ---- the footer lockup sweeps once when the footer is reached ---- Only .q60-sweep animates, and only once .run is added, so the nav, login and app copies of the same drawing never move. */ .q60-sweep .q-min,.q60-sweep .q-hr{transform-box:view-box;transform-origin:4355px 395px} .q60-sweep.run .q-min{animation:q60min 1.6s cubic-bezier(.45,.03,.25,1) both} .q60-sweep.run .q-hr{animation:q60hr 1.6s cubic-bezier(.45,.03,.25,1) both} @keyframes q60min{from{transform:rotate(-360deg)}to{transform:rotate(0)}} @keyframes q60hr{from{transform:rotate(-30deg)}to{transform:rotate(0)}} @media (prefers-reduced-motion:reduce){ .q60-sweep.run .q-min,.q60-sweep.run .q-hr{animation:none;transform:none} } /* the footer watermark: the lockup in outline, drawing itself in once the footer is reached, with a band of colour that follows the cursor */ .foot-word{max-width:var(--max);margin:34px auto -6px;padding:0 var(--pad)} .foot-word svg{display:block;width:100%;height:auto;cursor:crosshair} .fw{fill:none;stroke-width:8.75;stroke-linejoin:round} .fw-ghost{stroke:var(--hair);opacity:0;transition:opacity .35s ease} .foot-word:hover .fw-ghost{opacity:1} .fw-draw{stroke:rgba(166,124,82,.5);stroke-dasharray:25000;stroke-dashoffset:25000} .foot-word.drawn .fw-draw{animation:fwDraw 3.4s ease-in-out forwards} @keyframes fwDraw{to{stroke-dashoffset:0}} /* colour only under the cursor, and only while hovering */ .fw-fill{stroke:url(#fwGrad);stroke-width:12.25;opacity:0;transition:opacity .3s ease} .foot-word:hover .fw-fill{opacity:1} @media (max-width:820px){ .foot-word{display:none} } @media (prefers-reduced-motion:reduce){ .fw-draw{stroke-dashoffset:0;animation:none} }