/* ========================================================================== WORKTYPE — SITE STYLESHEET Structure: direction 05, "The Seam". Palette: the application's "Plot", see apps/web/src/ui/tokens.css in the worktype repo. Single source of truth. Every page links this file. Do not redefine tokens in a page; if a page needs something new, add it here as a component. ========================================================================== */ /* --- TOKENS -------------------------------------------------------------- */ :root{ /* Palette follows the application's "Plot" direction, apps/web/src/ui/tokens.css. The site keeps the drift/std/seam names because the whole stylesheet is built on them, but the values are the app's, so the two products look like one thing. */ /* Ground A — "drift". Unresolved, before, muted. Marketing default. */ --drift: #fcfcfd; --drift-ink: #14161a; --drift-mute: #5c636d; --drift-mute-2: #6b727c; --drift-hair: #e4e6ea; --drift-fill: #f7f9fc; /* Ground B — "standard". Resolved, after, authoritative. App + conversion. The app's signal blue. It means "measured" there and "resolved" here, which is the same claim made twice. */ --std: #1b3a6b; --std-ink: #fcfcfd; --std-mute: #a7b6d0; --std-hair: rgba(252,252,253,.18); --std-fill: rgba(252,252,253,.07); /* Seam — the only accent. Ice blue, chosen to stay in the same temperature as the ink blue so the seam reads as a technical marker rather than decoration. It is tuned for the dark ground, where it is 6.79:1. On the light ground it is deliberately faint: the boundary it marks is already carried by the change of ground, and the rule is an edge, not a signal. Anything that must be seen on the light ground uses --std instead. */ --seam: #a8cfe0; --seam-soft: rgba(168,207,224,.12); /* Type */ --display: "Big Shoulders Display", "Arial Narrow", sans-serif; --body: "Public Sans", system-ui, -apple-system, sans-serif; /* Spacing scale — 4px base. Use these, not arbitrary values. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:56px; --s9:76px; --s10:96px; /* Structure */ --maxw: 1200px; --gutter: 44px; --seam-w: 2px; } /* --- RESET --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--drift);color:var(--drift-ink); font-family:var(--body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* Focus is an accessibility control, not decoration, so it uses the highest contrast available on each ground rather than the accent. */ :focus-visible{outline:3px solid var(--std);outline-offset:2px} .ground-std :focus-visible,.on-std :focus-visible,.sec-dark :focus-visible{outline-color:var(--seam)} /* Page-level ground. Put class="ground-std" on for dark-default pages. */ body.ground-std{background:var(--std);color:var(--std-ink)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)} @media(max-width:880px){:root{--gutter:22px}} /* --- TYPE ---------------------------------------------------------------- */ /* RULE: --display is for headings and numerals only, never below 22px, never for body copy, form labels, table cells, or nav. It is condensed and loses legibility fast at small sizes. */ .disp{font-family:var(--display);font-weight:900;text-transform:uppercase; letter-spacing:-.015em;line-height:.88} h1.page{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:clamp(40px,7vw,96px);line-height:.86;letter-spacing:-.02em;margin:0 0 var(--s5)} h2.sec{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(32px,4.6vw,60px);line-height:.9;letter-spacing:-.015em; margin:0 0 var(--s5);max-width:16ch} h3.sub{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(26px,3.4vw,42px);line-height:.92;letter-spacing:-.015em;margin:0 0 var(--s3)} h4.min{font-family:var(--body);font-size:17px;font-weight:600;margin:0 0 var(--s2);letter-spacing:-.01em} .kick{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; margin:0 0 var(--s5);color:var(--drift-mute-2)} .ground-std .kick,.on-std .kick{color:var(--seam)} .lede{font-size:17.5px;line-height:1.6;max-width:54ch;margin:0;color:#3d444d} .ground-std .lede,.on-std .lede{color:var(--std-mute)} .lede b{font-weight:600;color:var(--drift-ink)} .ground-std .lede b,.on-std .lede b{color:var(--std-ink)} .small{font-size:13px;color:var(--drift-mute-2)} .on-std .small,.ground-std .small{color:#9db0cd} /* --- SEAM ---------------------------------------------------------------- */ /* RULE: the seam marks a real boundary between two states. Three legal forms: 1. .split — a 50/50 comparison of before/after. The canonical use. 2. .spine — a structural divider on interior pages (docs sidebar, form column). Vertical, full height of its container. 3. .seam-stub — a short vertical mark entering a section from its top edge, used once per page maximum as a closing echo. Never use the seam as an underline, a border on a card, or a highlight. */ /* The two columns share rows, so the kicker, heading, lede and item stack line up across the seam no matter how long either lede runs. Without this the comparison silently breaks the moment one side wraps to an extra line, and the paired items stop answering each other. Five rows covers the longest side used (kicker, heading, lede, chips, tally); a side with four children simply leaves the last row at zero. */ /* A band of page ground below the split. Sections are otherwise flush, and the whitespace that reads as a gap above a split is just the preceding section's trailing padding on the light ground. Where a dark section follows, its top padding is dark and gives no break at all, so the light column butts against it. This supplies the matching band. */ /* Both columns sit on the section's own ground, divided by a seam rule rather than by a change of colour. The two-ground version this replaces shouted the comparison; at this size the copy carries it and the seam only has to mark where one side ends. The 2px middle column is a real grid track holding a real element, not an ::after overlay, so it participates in layout and cannot drift out of alignment with the columns it divides. Shared rows are kept from the previous treatment: the sides align across the seam whatever length either lede runs to. Without it the comparison silently breaks the moment one column wraps to an extra line, and the paired rows stop answering each other. */ .split{display:grid;grid-template-columns:1fr var(--seam-w) 1fr; grid-template-rows:repeat(6,auto);align-items:stretch} .split > .seamline{background:var(--seam);grid-row:1 / -1} .split > .side{display:grid;grid-template-rows:subgrid;grid-row:1 / -1;align-content:start} .split > .side.a{padding-right:var(--s7)} .split > .side.b{padding-left:var(--s7)} .split > .side .tag{font-size:14.5px;line-height:1.6;margin:0 0 var(--s5);max-width:40ch; color:var(--drift-mute)} .sec-dark .split > .side .tag{color:var(--std-mute)} /* Hairline rows, not filled boxes. Six of these run down the page and filled cards would read as twelve objects to compare rather than two columns. */ .mini{border-top:1px solid var(--drift-hair);padding:14px 0} .mini b{display:block;font-family:var(--body);font-weight:700;font-size:15px; margin-bottom:3px;color:var(--drift-ink)} .mini span{display:block;font-size:14px;line-height:1.55;color:var(--drift-mute)} .sec-dark .mini{border-color:var(--std-hair)} .sec-dark .mini b{color:var(--std-ink)} .sec-dark .mini span{color:var(--std-mute)} @media(max-width:880px){ /* Stacked, so there is nothing to align across: drop back to normal flow, or the shared rows force both sides into one column's worth. The seam turns and becomes the horizontal rule between them. */ .split{grid-template-columns:1fr;grid-template-rows:none} .split > .side{display:block;grid-row:auto} .split > .side.a{padding-right:0} .split > .side.b{padding-left:0} .split > .seamline{grid-row:auto;height:var(--seam-w);margin:var(--s6) 0} } .spine{position:relative} .spine::before{content:"";position:absolute;left:0;top:0;bottom:0; width:var(--seam-w);background:var(--seam)} .seam-stub{position:relative} .seam-stub::before{content:"";position:absolute;left:50%;top:0; width:var(--seam-w);height:56px;background:var(--seam);transform:translateX(-1px)} /* --- SECTIONS ------------------------------------------------------------ */ /* RULE: sections alternate ground. A page never runs three sections of the same ground in a row without a split or spine between them. */ .sec-light{background:var(--drift);color:var(--drift-ink); padding:var(--s9) 0 84px;border-top:1px solid var(--drift-hair)} .sec-dark{background:var(--std);color:var(--std-ink);padding:var(--s9) 0 84px} /* A centred section header: kicker, heading and intro lede, sitting over whatever follows. Content beneath keeps its own alignment, so a rail or a split underneath stays left-aligned. Left-aligned these cap at 16ch and 54ch, which leaves the right half of the band empty. Where a two-tone .split starts directly beneath, the dark panel then begins hard against that empty half and the whole thing reads as a ragged step rather than a header over two columns. */ .sec-head{text-align:center} .sec-head h2.sec,.sec-head .lede{margin-left:auto;margin-right:auto} /* Page headers follow the same rule one level up, so an interior page reads the way the homepage hero does and does not flip alignment between its own title and the section headers beneath it. */ .page-head{text-align:center} .page-head h1.page,.page-head .lede{margin-left:auto;margin-right:auto} .sec-dark h2.sec,.sec-dark h1.page{color:var(--std-ink)} .sec-dark .kick{color:var(--seam)} .sec-dark .lede{color:var(--std-mute)} .sec-dark .lede b{color:var(--std-ink)} @media(max-width:880px){.sec-light,.sec-dark{padding:52px 0 58px}} /* --- NAV ----------------------------------------------------------------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(252,252,253,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--drift-hair)} .nav.on-std{background:rgba(27,58,107,.94);border-bottom-color:var(--std-hair)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:62px; display:flex;align-items:center;gap:30px} .logo{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:23px;letter-spacing:.01em;margin-right:auto;display:flex;align-items:center; /* Big Shoulders is condensed with almost no left side bearing, so the mark sits visually tighter than the gap value suggests. */ gap:14px} /* The mark is the accent, everywhere. It is 6.79:1 on the dark ground and a deliberately quiet 1.62:1 on the light one. A logo mark is decoration rather than an affordance, so the faint version is a choice, not a defect. It must not be --std: the footer sits on --std, so a blue mark disappears there entirely. */ .logo i{width:4px;height:19px;background:var(--seam);display:inline-block} .nav .lnk{font-size:13.5px;font-weight:500;color:var(--drift-mute)} .nav .lnk:hover{color:var(--drift-ink)} .nav.on-std .lnk{color:var(--std-mute)} .nav.on-std .lnk:hover{color:var(--std-ink)} .nav .lnk[aria-current="page"]{color:var(--drift-ink);box-shadow:inset 0 -2px 0 var(--std)} .nav.on-std .lnk[aria-current="page"]{color:var(--std-ink);box-shadow:inset 0 -2px 0 var(--seam)} /* There is no mobile menu, so below 900px the nav collapses to the logo plus the two doors into the app. Sign in has to survive that: it is the only route back in for someone who already has an account, and dropping it would leave a returning user on a phone with nowhere to go but Start free. */ @media(max-width:900px){.nav .lnk:not(.lnk-auth){display:none}} /* --- BUTTONS ------------------------------------------------------------- */ .btn{display:inline-block;background:var(--std);color:var(--std-ink); font-weight:600;font-size:15.5px;padding:16px 30px;border:0;cursor:pointer; font-family:var(--body);transition:background .15s,color .15s} .btn:hover{background:var(--seam);color:var(--std)} .btn-ghost{display:inline-block;border:2px solid var(--std);color:var(--std); font-weight:600;font-size:15.5px;padding:14px 26px;background:transparent;cursor:pointer; font-family:var(--body);transition:background .15s,color .15s} .btn-ghost:hover{background:var(--std);color:var(--std-ink)} /* Buttons on the standard ground. These are keyed off a CLASS, so a section that sets the dark ground with an inline style and no class gets the light-ground button instead: --std fill on a --std background, contrast 1.0:1, invisible. That shipped on three pages plus both pricing tables. Two cases, two fixes: - A component whose ground is fixed by its own class (.side.b, .tier.hi) is listed here, the same way .item already is. - A one-off section that sets a ground inline gets .on-std in the markup. */ .on-std .btn,.sec-dark .btn,.ground-std .btn,.tier.hi .btn{background:var(--seam);color:var(--std)} .on-std .btn:hover,.sec-dark .btn:hover,.ground-std .btn:hover,.side.b .btn:hover,.tier.hi .btn:hover{background:var(--std-ink)} .on-std .btn-ghost,.sec-dark .btn-ghost,.ground-std .btn-ghost,.side.b .btn-ghost,.tier.hi .btn-ghost{border-color:var(--std-ink);color:var(--std-ink)} .on-std .btn-ghost:hover,.sec-dark .btn-ghost:hover,.ground-std .btn-ghost:hover,.side.b .btn-ghost:hover,.tier.hi .btn-ghost:hover{background:var(--std-ink);color:var(--std)} .btn-sm{font-size:13.5px;padding:11px 18px} .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .cta.center{justify-content:center} /* --- SPLIT PROSE GRID ---------------------------------------------------- */ /* Two columns of prose sitting side by side within a section. Lives here rather than inline on the page because it needs a breakpoint, and an inline grid-template-columns outranks any class rule that would collapse it. */ .ind-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8);align-items:start} @media(max-width:880px){.ind-grid{grid-template-columns:1fr;gap:var(--s6)}} /* --- ITEM STACK ---------------------------------------------------------- */ .stack{display:grid;gap:9px} .item{padding:14px 16px;font-size:14px;line-height:1.5; background:var(--drift-fill);border-left:2px solid #c8ccd2;color:#5c636d} .item b{font-weight:600;display:block;margin-bottom:3px;color:#3d444d} .on-std .item,.sec-dark .item{background:var(--std-fill); border-left-color:var(--seam);color:#dbe3f0} .on-std .item b,.sec-dark .item b b{color:var(--std-ink)} /* --- RAIL (sequenced steps) ---------------------------------------------- */ .rail{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s7); border-top:1px solid var(--drift-hair)} .sec-dark .rail{border-top-color:var(--std-hair)} .rail > .st{padding:26px 30px 10px 0;border-right:1px solid var(--drift-hair);position:relative} .sec-dark .rail > .st{border-right-color:var(--std-hair)} .rail > .st:last-child{border-right:0} .rail > .st:not(:first-child){padding-left:30px} .rail > .st::before{content:"";position:absolute;top:-4px;left:0;width:6px;height:6px;background:var(--seam)} .rail > .st:not(:first-child)::before{left:30px} .rail h4{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:15px;letter-spacing:.1em;color:var(--seam);margin:0 0 14px} .rail b{display:block;font-size:19px;font-weight:600;margin-bottom:10px} .rail p{margin:0;font-size:14.5px;line-height:1.6;color:var(--drift-mute)} .sec-dark .rail p{color:var(--std-mute)} @media(max-width:880px){ .rail{grid-template-columns:1fr} .rail > .st{border-right:0;border-bottom:1px solid var(--drift-hair);padding:24px 0 22px!important} .sec-dark .rail > .st{border-bottom-color:var(--std-hair)} .rail > .st::before{left:0!important} } /* --- COLUMN GRID (evidence, features) ------------------------------------ */ .cols{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s7); border-top:2px solid var(--drift-ink)} .sec-dark .cols{border-top-color:var(--std-ink)} .cols > .col{padding:var(--s5) 26px 26px 0;border-right:1px solid var(--drift-hair)} .sec-dark .cols > .col{border-right-color:var(--std-hair)} .cols > .col:last-child{border-right:0} .cols > .col:not(:first-child){padding-left:26px} .cols h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--drift-mute-2);margin:0 0 14px} .sec-dark .cols h4{color:var(--seam)} .cols q{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:24px;line-height:.98;letter-spacing:-.01em;margin-bottom:12px;quotes:none;color:var(--drift-ink)} .sec-dark .cols q{color:var(--std-ink)} .cols q::before,.cols q::after{content:""} .cols p{margin:0;font-size:13.5px;line-height:1.55;color:var(--drift-mute)} .sec-dark .cols p{color:var(--std-mute)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){.cols{grid-template-columns:1fr 1fr} .cols > .col{border-bottom:1px solid var(--drift-hair);padding-bottom:22px}} @media(max-width:560px){.cols,.cols-3,.cols-2{grid-template-columns:1fr} .cols > .col{border-right:0;padding-left:0!important}} /* A .cols-3 holding six items runs two rows of three. The base grid assumes a single row: every non-last column carries a right border and every non-first a left padding, which in a second row indents that row's first column and hangs a border on the grid's right edge. Desktop only; below 900px the two-column rules above already give every cell a bottom border. Harmless on a one-row .cols-3: nth-child(n+4) matches nothing, and the other two rules strip a border and a padding that the edge columns should not have anyway. */ @media(min-width:901px){ .cols-3 > .col:nth-child(3n){border-right:0} .cols-3 > .col:nth-child(3n+1){padding-left:0} .cols-3 > .col:nth-child(n+4){border-top:1px solid var(--drift-hair)} .sec-dark .cols-3 > .col:nth-child(n+4){border-top-color:var(--std-hair)} } /* --- CHIPS + TALLY ------------------------------------------------------- */ /* align-items, or a side holding one chip stretches it to the full height of the shared row: subgrid sizes that row to the tallest side, so the single chip on the left grew to match two wrapped rows on the right. */ .chips{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start;align-content:flex-start} .chips span{font-size:13px;font-weight:500;padding:6px 12px;border-radius:5px; border:1px solid var(--drift-hair);color:var(--drift-ink)} .sec-dark .chips span,.on-std .chips span{border-color:var(--std-hair);color:var(--std-ink)} .tally{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px; letter-spacing:.01em;margin-top:var(--s4);color:var(--drift-ink)} .tally span{font-family:var(--body);font-weight:500;font-size:14px;text-transform:none; letter-spacing:0;color:var(--drift-mute)} .sec-dark .tally{color:var(--std-ink)} .sec-dark .tally span{color:var(--std-mute)} .tally b{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:24px;letter-spacing:0;vertical-align:-1px} /* --- TIERS --------------------------------------------------------------- */ /* Billing toggle. CSS only, because the site ships no JavaScript: a hidden checkbox drives sibling selectors on the tier grid. Both labels point at the same input, so either one flips it. Annual is checked by default, so the lower number anchors first and switching to monthly reveals the penalty. */ .bill-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* Centred under the section header. inline-flex ignores auto margins, so this is flex with a fitted width instead. */ .bill-switch{display:flex;width:fit-content;margin:var(--s5) auto 0; border:1px solid var(--drift-hair);border-radius:2px;overflow:hidden} .bill-opt{padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer; color:var(--drift-mute);transition:background .12s,color .12s} .bill-opt:hover{color:var(--drift-ink)} .bill-monthly{background:var(--drift-ink);color:var(--drift)} .bill-toggle:checked ~ .bill-switch .bill-monthly{background:transparent;color:var(--drift-mute)} .bill-toggle:checked ~ .bill-switch .bill-annual{background:var(--drift-ink);color:var(--drift)} .bill-toggle:focus-visible ~ .bill-switch{outline:3px solid var(--std);outline-offset:2px} .when-annual{display:none} .bill-toggle:checked ~ .tiers .when-annual{display:revert} .bill-toggle:checked ~ .tiers .when-monthly{display:none} .tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s7); border:2px solid var(--drift-ink)} /* A column so the CTA can be pushed to the bottom. The cards are already equal height — grid stretches them — but content flows top-down, so a one-line description lifted Company's button above the other two. */ .tier{padding:var(--s6) var(--s6) 36px;display:flex;flex-direction:column} /* auto absorbs the leftover space above the button; flex-start stops the anchor stretching to the full column width, which is what a flex item would otherwise do. */ .tier > .btn,.tier > .btn-ghost{margin-top:auto;align-self:flex-start} .tier:not(:last-child){border-right:2px solid var(--drift-ink)} .tier.hi{background:var(--std);color:var(--std-ink)} .tier h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--drift-mute-2);margin:0 0 18px} .tier.hi h4{color:var(--seam)} .amt{display:flex;align-items:baseline;gap:9px;margin-bottom:10px} .amt b{font-family:var(--display);font-weight:900;font-size:56px;line-height:.85;letter-spacing:-.02em} .amt span{font-size:13px;color:var(--drift-mute)} .tier.hi .amt span{color:var(--std-mute)} .tier > p{font-size:15px;line-height:1.6;color:#3d444d;margin:0 0 var(--s5);max-width:36ch} .tier.hi > p{color:var(--std-mute)} .tier ul{list-style:none;padding:0;margin:0 0 var(--s5)} .tier li{font-size:14.5px;line-height:1.45;padding:10px 0 10px 20px;position:relative; border-top:1px solid var(--drift-hair);color:#3d444d} .tier.hi li{border-top-color:var(--std-hair);color:var(--std-mute)} .tier li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:2px;background:var(--drift-ink)} .tier.hi li::before{background:var(--seam)} @media(max-width:900px){.tiers{grid-template-columns:1fr} .tier:not(:last-child){border-right:0;border-bottom:2px solid var(--drift-ink)}} /* --- DOCS SHELL ---------------------------------------------------------- */ /* The seam here is the spine between navigation and content. */ .shell{display:grid;grid-template-columns:264px 1fr;min-height:70vh} .shell-nav{padding:var(--s7) var(--s6) var(--s8) 0} .shell-body{padding:var(--s7) 0 var(--s9) var(--s7);position:relative} .shell-body::before{content:"";position:absolute;left:0;top:0;bottom:0; width:var(--seam-w);background:var(--seam)} .shell-nav h5{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--drift-mute-2);margin:0 0 var(--s3)} .shell-nav ul{list-style:none;padding:0;margin:0 0 var(--s6)} .shell-nav li a{display:block;padding:7px 0;font-size:14.5px;color:var(--drift-mute)} .shell-nav li a:hover{color:var(--drift-ink)} .shell-nav li a[aria-current="page"]{color:var(--drift-ink);font-weight:600} .prose{max-width:66ch} .prose h2{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:32px;line-height:.94;letter-spacing:-.015em;margin:var(--s8) 0 var(--s4)} .prose h2:first-child{margin-top:0} .prose h3{font-size:19px;font-weight:600;margin:var(--s6) 0 var(--s2);letter-spacing:-.01em} .prose p{font-size:16px;line-height:1.68;color:#3d444d;margin:0 0 var(--s4)} .prose ul{margin:0 0 var(--s4);padding-left:20px} .prose li{font-size:16px;line-height:1.68;color:#3d444d;margin-bottom:6px} .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px; background:var(--drift-fill);padding:2px 6px} .callout{border-left:2px solid var(--std);background:rgba(27,58,107,.06); padding:var(--s4) var(--s5);margin:0 0 var(--s5)} .callout p{margin:0;font-size:15px;line-height:1.6} @media(max-width:880px){ .shell{grid-template-columns:1fr} .shell-nav{padding:var(--s5) 0 var(--s4)} .shell-body{padding:var(--s5) 0 var(--s8);border-top:var(--seam-w) solid var(--seam)} .shell-body::before{display:none} } /* --- FORM ---------------------------------------------------------------- */ .field{margin-bottom:var(--s5)} .field label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;margin-bottom:var(--s2);color:var(--drift-mute)} .on-std .field label,.ground-std .field label{color:var(--std-mute)} .field input,.field select{width:100%;font-family:var(--body);font-size:16px; padding:14px 15px;border:2px solid var(--drift-ink);background:#fff;color:var(--drift-ink)} /* Both halves of each pair, or a dark-ground form gets a white select sitting in a row of transparent inputs. No page uses a dark form today; these stay complete so the next one that does is not a bug report. */ .ground-std .field input,.ground-std .field select, .on-std .field input,.on-std .field select{ background:transparent;border-color:var(--std-hair);color:var(--std-ink)} .ground-std .field input:focus,.ground-std .field select:focus, .on-std .field input:focus,.on-std .field select:focus{border-color:var(--seam)} .field .hint{font-size:13px;color:var(--drift-mute-2);margin:var(--s2) 0 0} .ground-std .field .hint,.on-std .field .hint{color:#9db0cd} /* --- TIMELINE (changelog) ------------------------------------------------ */ .tl{list-style:none;padding:0;margin:var(--s7) 0 0} .tl > li{display:grid;grid-template-columns:150px 1fr;gap:var(--s6); padding:var(--s5) 0;border-top:1px solid var(--drift-hair)} .tl > li:first-child{border-top:2px solid var(--drift-ink)} .tl time{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:20px;letter-spacing:.01em;color:var(--drift-mute-2)} .tl h3{font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em} .tl p{margin:0;font-size:15px;line-height:1.6;color:var(--drift-mute)} .badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:4px 9px;background:var(--seam);color:var(--std);margin-bottom:8px} @media(max-width:700px){.tl > li{grid-template-columns:1fr;gap:var(--s2)}} /* --- EMPTY STATE --------------------------------------------------------- */ .empty{border:2px dashed rgba(252,252,253,.28);padding:var(--s8) var(--s7);text-align:center} .empty h3{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:28px;line-height:.95;margin:0 0 var(--s3);color:var(--std-ink)} .empty p{font-size:15.5px;line-height:1.6;color:var(--std-mute);max-width:44ch;margin:0 auto var(--s5)} /* --- FOOTER -------------------------------------------------------------- */ .site-foot{background:var(--std);color:var(--std-ink); border-top:1px solid var(--std-hair);padding:var(--s8) 0 var(--s7)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6);margin-bottom:var(--s8)} .foot-grid h5{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--seam);margin:0 0 var(--s3)} /* Must exclude the logo. At .foot-grid a this rule is 0,1,1 and beats .logo at 0,1,0, so it was overriding the mark's display, size, colour and padding: the footer logo rendered as a 14px muted link with its mark jammed against the word, because gap does nothing on a block. */ .foot-grid a:not(.logo){display:block;padding:5px 0;font-size:14px;color:var(--std-mute)} .foot-grid a:not(.logo):hover{color:var(--std-ink)} .foot-grid p{font-size:14.5px;line-height:1.6;color:var(--std-mute);margin:var(--s3) 0 0;max-width:34ch} .foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:1px solid var(--std-hair);padding-top:var(--s5);font-size:12.5px;color:#9db0cd} @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} /* --- MOTION -------------------------------------------------------------- */ /* RULE: one orchestrated moment per page maximum, and it must be tied to meaning (a state resolving), never ambient. Everything else is a 150ms colour transition on hover. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} } /* --- PRODUCT SHOTS ------------------------------------------------------- */ /* The site carried no imagery at all until now, and the reason to break that is narrow: a buyer evaluating a category they half understand wants to see the thing. Both shots are framed in browser chrome so they read as software rather than as illustration, and both are real screens rather than mockups. Anything that is not a real screen goes back to being typographic. */ .shot{margin:var(--s8) auto 0;max-width:1000px;border:1px solid var(--drift-hair); border-radius:12px;overflow:hidden;background:#fff; box-shadow:0 34px 70px -34px rgba(20,22,26,.30),0 10px 24px -14px rgba(20,22,26,.16)} .shot .bar{height:38px;background:var(--drift-fill);border-bottom:1px solid var(--drift-hair); display:flex;align-items:center;gap:7px;padding:0 var(--s4)} .shot .bar i{width:9px;height:9px;border-radius:50%;background:#d3d7de;display:inline-block} .shot .bar .url{margin-left:var(--s3);font-size:12px;color:var(--drift-mute-2);background:#fff; border:1px solid var(--drift-hair);border-radius:4px;padding:3px var(--s3)} .shot img{display:block;width:100%;height:auto} /* --- WORKS-WITH LOGO STRIP ----------------------------------------------- */ /* Set at reading weight, not as fine print: these names are the proof that nothing has to be migrated. Marks are neutral and carry no wording that implies endorsement. */ .logos{display:flex;gap:var(--s7);justify-content:center;align-items:center;flex-wrap:wrap;margin:0} .lk{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;color:var(--drift-ink)} .lk svg{width:23px;height:23px;display:block;flex:none} /* --- THE LOOP ------------------------------------------------------------ */ /* Save, reuse, promote in one line. It restates the rail above it rather than adding to it, which is the point: the claim is that the loop is short. */ .loop{margin:var(--s8) auto 0;max-width:720px} .loop svg{width:100%;height:auto;display:block} /* --- PRICING TEASER ------------------------------------------------------ */ .ptease{text-align:center} .ptease .price-line{font-size:17.5px;line-height:1.6;color:#3d444d; margin:0 auto var(--s6);max-width:52ch} .ptease .price-line b{color:var(--drift-ink);font-weight:600} /* --- INSTALL BUTTONS ------------------------------------------------------ Under the extension scene, because that is where somebody has just looked at a picture of the thing and had nothing to click. Two buttons rather than one "get the extension" link: the browser someone is holding is the only fact that decides which store they need, and making them work that out is a step with no purpose. The marks are simplified stand-ins drawn here rather than hotlinked. Google and Microsoft both publish official install badges (the Chrome Web Store badge and the Edge Add-ons badge) and those should replace these before any paid promotion; the geometry below is close enough to be recognised at 20px and honest about being ours. */ .installs { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin: var(--s7) auto 0 } .install { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--body); font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 6px; border: 1.5px solid var(--std-hair); color: var(--std-ink); background: var(--std-fill); transition: .15s } .install:hover { background: rgba(252,252,253,.14); border-color: var(--seam) } .install svg { width: 20px; height: 20px; display: block; flex: none } .install .sub { display: block; font-weight: 400; font-size: 12px; color: var(--std-mute) } .install-note { text-align: center; font-size: 13.5px; color: var(--std-mute); margin: var(--s4) auto 0; max-width: 54ch; line-height: 1.6 } @media(max-width:600px){ .install { width: 100%; justify-content: center } } /* --- EXTENSION SCENE ----------------------------------------------------- */ /* The popup overlapping a generic assistant page is the one claim that needs showing rather than telling: it works beside the tool, not inside it. The page beneath is deliberately anonymous — naming a specific assistant here would imply a relationship none of them agreed to. */ .ext-scene{position:relative;max-width:960px;margin:var(--s7) auto 0} .ext-browser{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--std-hair); box-shadow:0 34px 70px -34px rgba(0,0,0,.55)} .ext-chrome{height:44px;background:#eef1f5;display:flex;align-items:center;gap:8px; padding:0 var(--s4);border-bottom:1px solid var(--drift-hair)} .ext-chrome .d{width:10px;height:10px;border-radius:50%;background:#cfd4dc;display:inline-block} .ext-chrome .addr{margin-left:var(--s3);font-size:12.5px;color:var(--drift-mute-2);background:#fff; border:1px solid var(--drift-hair);border-radius:5px;padding:5px var(--s4);min-width:200px} .ext-chrome .exts{margin-left:auto;display:flex;gap:8px;align-items:center} .ext-chrome .ext-ic{width:23px;height:23px;border-radius:5px;background:#e2e6ec; color:var(--drift-mute-2);font-size:12px;display:flex;align-items:center;justify-content:center} .ext-chrome .wmark{background:var(--std);color:var(--std-ink);font-weight:800;font-family:var(--display)} /* The right padding reserves the popup's column, so the assistant content centres in what is left rather than being centred under the popup and losing a word behind it. */ .ext-page{height:460px;background:linear-gradient(180deg,#fff,#f3f6fb); display:flex;align-items:center;justify-content:center;padding-right:292px} .asst{text-align:center;width:100%;max-width:560px;padding:0 var(--s5)} .asst-h{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em; font-size:clamp(24px,3.4vw,36px);color:#20242b;margin:0 0 var(--s5);line-height:.95} .asst-input{border:1px solid #dfe3ea;border-radius:12px;background:#fff;padding:18px 20px; text-align:left;color:#9aa1ab;font-size:15px;box-shadow:0 10px 24px -16px rgba(0,0,0,.25)} .asst-chips{display:flex;gap:8px;justify-content:center;margin-top:var(--s4);flex-wrap:wrap} .asst-chips span{font-size:13px;color:var(--drift-mute-2);border:1px solid var(--drift-hair); border-radius:100px;padding:6px 14px;background:#fff} /* Width is derived from the frame, not chosen: the shot is 600x999, so at 258px it stands 429px tall and clears the 504px frame with room below. Sized by eye it spills past the bottom edge and reads as a broken image. */ .ext-pop{position:absolute;top:44px;right:22px;width:258px;height:auto;border-radius:10px; border:1px solid var(--drift-hair);box-shadow:0 26px 54px -16px rgba(20,22,26,.5)} @media(max-width:880px){ .ext-pop{width:186px;top:34px;right:12px} .ext-page{height:340px;padding-right:206px} .asst-h{font-size:20px} } @media(max-width:600px){ /* Stacked: overlapping a 320px-wide phone screen hides the thing it is meant to sit beside, so the popup drops below the frame instead. */ .ext-pop{position:static;width:100%;max-width:260px;display:block;margin:var(--s5) auto 0} .ext-page{padding-right:0;height:260px} .ext-scene{margin-top:var(--s6)} }