has to sit as a normal flow child next to it - do not make
the li a block or the tick and the summary stop sharing a baseline. */
.checks.expandable li{align-items:flex-start}
.checks.expandable details{flex:1;min-width:0}
.checks.expandable summary{
cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:8px;
border-radius:6px;transition:color .15s;
}
.checks.expandable summary::-webkit-details-marker{display:none}
.checks.expandable summary::after{
content:"\203A";margin-left:auto;flex:none;color:var(--muted-fg);
font-size:19px;line-height:1;transform:rotate(90deg);transition:transform .18s;
}
.checks.expandable details[open] summary::after{transform:rotate(-90deg)}
.checks.expandable summary:hover{color:var(--atlas)}
.checks.expandable summary:focus-visible{outline:2px solid var(--atlas);outline-offset:3px}
.checks.expandable details p{
font-size:14px;line-height:1.55;color:var(--muted-fg);
margin:8px 0 2px;padding-left:2px;
}
/* ---------- standalone companion app store ---------- */
.store{background:var(--background)}
.store-grid{
/* minmax(0,1fr), not 1fr. Plain 1fr floors each column at its min-content
width, and .btn sets white-space:nowrap, so the longest button label
("Buying opens in September") was stretching the Claude column wider
than the other four. */
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
max-width:1180px;margin:48px auto 0;align-items:stretch;
}
.store-card{
display:flex;flex-direction:column;
background:var(--card);border:1px solid var(--border);border-radius:14px;
padding:24px 22px 22px;
}
.store-card.ready{border-color:var(--comet);box-shadow:0 14px 34px oklch(55% .12 70 / .12)}
.store-card.soon{background:var(--muted);border-style:dashed}
.store-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.store-card .logo-dot{font-size:22px;line-height:1}
.store-badge{
font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
padding:4px 9px;border-radius:999px;background:var(--comet-soft);color:var(--comet);
white-space:nowrap;
}
.store-badge.soon{background:transparent;border:1px solid var(--border);color:var(--muted-fg)}
.store-card h3{font-size:17px;margin-bottom:7px}
.store-card p{font-size:14px;line-height:1.5;color:var(--muted-fg);flex:1}
.store-price{
font-family:var(--serif);font-size:31px;line-height:1;margin:18px 0 14px;
}
.store-price small{font-family:var(--sans);font-size:13px;color:var(--muted-fg);font-weight:500}
/* ---------- sale pricing ----------
The old price is context for the new one, not a number to read first:
smaller, muted, struck through. Sized in em so one rule serves all three
price sizes (31px in the store grid, 46px and 40px on the checkout pages).
A line-through is invisible to a screen reader, so the markup also carries
"Regular price" / "Sale price" in .visually-hidden spans. Change one and
change the other, or the two audiences stop being told the same thing. */
.price-was{
/* Its own line, not inline before the new price. Inline, "$247 $147 one
time" needs 179px and a store card gives it 164px, so the "one time"
was orphaned onto a second line anyway. Stacked it fits every card and
every checkout page, and reads the way a sale price is expected to. */
display:block;font-size:.5em;line-height:1.2;margin-bottom:2px;
color:var(--muted-fg);font-weight:500;
text-decoration:line-through;
/* The default hairline all but disappears in Fraunces at these sizes. */
text-decoration-thickness:.08em;
}
/* Says the strikethrough is deliberate rather than a mistake, once, at the
top of the store, instead of repeating "$100 off" on all five cards. */
.sale-flag{
display:inline-block;margin-top:14px;
font-size:13px;font-weight:700;letter-spacing:.04em;
padding:6px 14px;border-radius:999px;
background:var(--comet-soft);color:var(--comet);
}
/* .btn is nowrap by default and these columns are narrow. Without this the
label runs straight out through the side of the card. */
.store-card .btn{width:100%;justify-content:center;white-space:normal;line-height:1.35}
/* Not a link yet. Looks like a label, not a dead button. */
.btn.is-pending{
cursor:default;pointer-events:none;opacity:.72;font-weight:600;
background:transparent;border-style:dashed;color:var(--muted-fg);
/* Undo .btn's nowrap: these labels are sentences, not verbs. */
white-space:normal;line-height:1.35;
}
.store-note{margin:34px auto 0;max-width:none;font-size:14.5px;color:var(--muted-fg);font-style:italic}
.store-note a{color:var(--atlas);font-weight:600;text-decoration:underline}
/* ---------- faq ---------- */
.faq{background:var(--background)}
.faq-list{max-width:760px;margin:40px auto 0}
/* Scoped to .faq-list on purpose. These were bare element selectors and were
leaking 18px of vertical padding, a bottom border and an 18px serif face
into the pricing checklists, which is what knocked the ticks out of line
with their labels. */
.faq-list details{border-bottom:1px solid var(--border);padding:18px 0}
.faq-list summary{
font-family:var(--serif);font-size:18px;cursor:pointer;list-style:none;
display:flex;justify-content:space-between;gap:20px;font-weight:600;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--comet);font-weight:700;font-family:var(--sans)}
.faq-list details[open] summary::after{content:"\2013"}
.faq-list details p{margin-top:12px;font-size:15.5px}
/* ---------- final cta ---------- */
.finalcta{
background:linear-gradient(160deg, oklch(97% .018 72), oklch(96% .026 68));
border-top:1px solid var(--border);text-align:center;
}
.finalcta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* ---------- footer ---------- */
.site-footer{background:var(--atlas);color:oklch(88% .02 85);padding:56px 0 30px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.site-footer .logo{color:oklch(98% .004 85);font-size:20px}
.site-footer p{color:oklch(78% .02 85);font-size:14px;margin-top:10px;max-width:280px}
.site-footer h2{
font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:oklch(72% .06 70);
margin-bottom:12px;font-weight:700;font-family:var(--sans);line-height:1.4;
}
.site-footer ul{list-style:none;display:grid;gap:9px}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-bot{
border-top:1px solid oklch(42% .06 255);margin-top:40px;padding-top:20px;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;
color:oklch(72% .02 85);
}
@supports not (color: oklch(50% .1 200)){
.site-footer{color:#d8d2c9} .site-footer .logo{color:#fffefc}
.site-footer p,.foot-bot{color:#b9b2a8} .site-footer h2{color:#d6a978}
.foot-bot{border-top-color:#3d5375}
}
/* ---------- early access (BILLING_MODE=test) ---------- */
.preview-banner{
background:var(--comet);color:#fff;font-size:13.5px;font-weight:600;
padding:9px 20px;text-align:center;letter-spacing:.01em;
}
.ea-overlay{
position:fixed;inset:0;z-index:100;background:oklch(22% .015 65 / .55);
display:none;place-items:center;padding:24px;
}
.ea-overlay[data-open="true"]{display:grid}
.ea-modal{
background:var(--card);border:1px solid var(--border);border-radius:14px;
padding:34px 32px;max-width:460px;width:100%;
box-shadow:0 30px 70px -30px oklch(22% .015 65 / .5);position:relative;
}
.ea-modal h2{font-size:26px;margin-bottom:10px}
.ea-modal p{font-size:15px}
.ea-close{
position:absolute;top:12px;right:14px;background:none;border:0;font-size:24px;
line-height:1;color:var(--muted-fg);cursor:pointer;padding:6px;border-radius:6px;
}
.ea-close:hover{background:var(--muted);color:var(--foreground)}
.ea-form{display:grid;gap:12px;margin-top:20px}
.ea-form label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-fg)}
.ea-form input{
font-family:var(--sans);font-size:16px;padding:13px 14px;border-radius:var(--radius);
border:1px solid var(--border);background:var(--background);color:var(--foreground);width:100%;
}
.ea-form input:focus{border-color:var(--atlas)}
.ea-form .btn{justify-content:center}
.ea-fine{font-size:13px;margin-top:14px}
.ea-msg{font-size:14.5px;margin-top:14px;min-height:1.2em}
.ea-msg.err{color:var(--comet);font-weight:600}
.ea-msg.ok{color:var(--manus);font-weight:600}
body.ea-locked{overflow:hidden}
@media (max-width:1080px){
.app-grid,.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
.hero-grid,.problem-grid,.plan-grid{grid-template-columns:1fr}
.feat-grid,.plus-benefits{grid-template-columns:1fr 1fr}
.app-grid{grid-template-columns:1fr 1fr}
.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-grid{grid-template-columns:1fr 1fr}
.nav-links .hide-sm{display:none}
.problem-aside{padding-top:0}
}
@media (max-width:620px){
section{padding:60px 0}
.feat-grid,.plus-benefits,.app-grid,.foot-grid{grid-template-columns:1fr}
.store-grid{grid-template-columns:1fr}
.freeband{flex-direction:column;align-items:flex-start}
.hero{padding:52px 0 56px}
.wrap{padding:0 20px}
}
/* ---------- phones ---------- */
@media (max-width:640px){
/* Matches the app's text-lg on the wordmark, and buys back the width the
32px desktop header padding was eating. */
.logo{font-size:18px}
.site-header .wrap{padding:0 20px}
.nav{gap:10px}
.nav-links{gap:14px}
.site-header .btn{padding:0 13px}
}
@media (max-width:360px){
/* The narrow end (iPhone SE and friends). nowrap on the header items
stops them stacking, but it converts the overflow into a clipped
"Start Free" instead - at 320px the row wants ~312px and only has
280px. Everything gives a little rather than dropping "Log In",
which is the only way back in for an existing member. */
.site-header .wrap{padding:0 14px}
.logo{font-size:16px}
.nav{gap:8px}
.nav-links{gap:10px}
.site-header .btn{padding:0 11px;font-size:13px}
}
@media (max-width:620px){
/* Both hero lines have to hold their own line - the section is written as
two sentences with a
, and a third line reads as a mistake. Measured, not guessed: the longest line, "Start using the right ones.", renders 11.94x its font-size in Fraunces 600 at this letter-spacing. The line box is 100vw minus 2x20px of .wrap padding, so the largest size that still fits is (100vw - 40px) / 11.94 = 8.375vw - 3.35px; 8.2vw - 3.5px leaves a little slack for rounding. min() caps it at 38px, which is what clamp() gives on the other side of this breakpoint, so the size is continuous at 620px rather than jumping. Below ~494px the old 38px floor could not fit either line, which is why this runs to 620px and not to 480px. */ .hero h1{font-size:min(38px, calc(8.2vw - 3.5px))} } /* Cards read better centred once they are one per row. */ @media (max-width:620px){ .feat{text-align:center} .app,.store-card{align-items:center;text-align:center} .app .logo-mark,.store-card .logo-mark{margin-left:auto;margin-right:auto} /* .store-top is space-between for the logo/badge row; at one card per row it should be the two of them centred together instead. */ .store-top{width:auto;justify-content:center} .store-card .btn{width:100%} } /* ---------- thank-you pages ---------- */ .thanks{padding:64px 0 90px} .thanks-card{ max-width:680px;margin:0 auto;background:var(--card); border:1px solid var(--border);border-radius:16px;padding:44px 44px 38px; box-shadow:0 18px 44px oklch(22% .015 65 / .07); } /* Everything above the first rule is centred: tick, eyebrow, headline and the payment line. Below it the content is instructions and reads better ranged left. */ .thanks-head{text-align:center} .thanks-tick{ width:52px;height:52px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--manus);color:#fff; font-size:26px;font-weight:800;margin:0 auto 22px; } .thanks-card h1{font-size:clamp(28px,3.4vw,38px)} .thanks-card .lede{margin-top:16px;font-size:17.5px} .thanks-what,.thanks-help{margin-top:34px;padding-top:26px;border-top:1px solid var(--border)} .thanks-card h2{font-size:15px;letter-spacing:.09em;text-transform:uppercase; font-family:var(--sans);font-weight:700;color:var(--muted-fg);margin-bottom:16px} .thanks-steps{margin:0;padding-left:0;list-style:none;counter-reset:s;display:grid;gap:15px} .thanks-steps li{ counter-increment:s;position:relative;padding-left:40px; font-size:15.5px;line-height:1.6; } .thanks-steps li::before{ content:counter(s);position:absolute;left:0;top:1px; width:26px;height:26px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--atlas-soft);color:var(--atlas); font-size:13px;font-weight:700;font-family:var(--sans); } .thanks-help p{font-size:15.5px;line-height:1.6} .thanks-help a{color:var(--atlas);font-weight:600;text-decoration:underline} .thanks-back{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px} @media (max-width:620px){ .thanks{padding:40px 0 60px} .thanks-card{padding:30px 22px 26px;border-radius:14px} .thanks-back .btn{width:100%;justify-content:center} } /* ---------- tool logo marks ---------- Brand SVGs come from simple-icons (CC0). The marks themselves are the trademarks of their owners and are used here only to identify which tool each companion app is for. ChatGPT, Canva and Manus are NOT in simple-icons - they have been removed at those companies' request - so they fall back to .is-mono, a monogram in the same tile. If you obtain an official SVG for one of them, drop the path into the span in index.html and delete the is-mono class. Do not go hunting for an unofficial copy. Note img-src in .htaccess is 'self' data:, which is why these are inline SVG rather than![]()
pointing anywhere external. */
.logo-mark{
width:36px;height:36px;border-radius:10px;flex:none;
display:inline-flex;align-items:center;justify-content:center;
background:var(--mark-soft,var(--muted));color:var(--mark,var(--foreground));
}
.logo-mark svg{width:19px;height:19px;display:block;fill:currentColor}
.logo-mark.is-mono{
font-family:var(--sans);font-weight:800;font-size:12.5px;letter-spacing:-.02em;
}
.m-claude {--mark:#d97757;--mark-soft:rgba(217,119,87,.15)}
.m-chatgpt {--mark:#0f8a6d;--mark-soft:rgba(15,138,109,.14)}
.m-gemini {--mark:#8e75b2;--mark-soft:rgba(142,117,178,.16)}
.m-notebooklm{--mark:#33373d;--mark-soft:rgba(51,55,61,.10)}
.m-perplexity{--mark:#1a8fa0;--mark-soft:rgba(31,184,205,.16)}
.m-canva {--mark:#0097a7;--mark-soft:rgba(0,196,204,.16)}
.m-manus {--mark:var(--atlas);--mark-soft:var(--atlas-soft)}
.m-video {--mark:var(--comet);--mark-soft:var(--comet-soft)}
/* Full-colour marks. The Gemini star carries Google's own four-colour
gradient, so it gets a neutral chip rather than a single-hue tint - a
coloured background behind a multicoloured mark muddies both. The path
sets fill="url(#...)" directly, which beats the inherited currentColor
from .logo-mark svg. */
.logo-mark.is-full{background:var(--muted)}
/* placement inside the two card types */
.app .logo-mark{margin-bottom:12px}
.store-top .logo-mark{width:32px;height:32px;border-radius:9px}
.store-top .logo-mark svg{width:17px;height:17px}
.store-top .logo-mark.is-mono{font-size:11.5px}
@supports not (color: oklch(50% .1 200)){
.m-manus{--mark:#243b63;--mark-soft:rgba(36,59,99,.08)}
.m-video{--mark:#a86b32;--mark-soft:rgba(168,107,50,.12)}
}
/* ---------- former inline styles ----------
These were style="" attributes. They silently did nothing, because the
Content-Security-Policy in .htaccess sets style-src 'self' with no
'unsafe-inline', which blocks style attributes as well as
, and a third line reads as a mistake. Measured, not guessed: the longest line, "Start using the right ones.", renders 11.94x its font-size in Fraunces 600 at this letter-spacing. The line box is 100vw minus 2x20px of .wrap padding, so the largest size that still fits is (100vw - 40px) / 11.94 = 8.375vw - 3.35px; 8.2vw - 3.5px leaves a little slack for rounding. min() caps it at 38px, which is what clamp() gives on the other side of this breakpoint, so the size is continuous at 620px rather than jumping. Below ~494px the old 38px floor could not fit either line, which is why this runs to 620px and not to 480px. */ .hero h1{font-size:min(38px, calc(8.2vw - 3.5px))} } /* Cards read better centred once they are one per row. */ @media (max-width:620px){ .feat{text-align:center} .app,.store-card{align-items:center;text-align:center} .app .logo-mark,.store-card .logo-mark{margin-left:auto;margin-right:auto} /* .store-top is space-between for the logo/badge row; at one card per row it should be the two of them centred together instead. */ .store-top{width:auto;justify-content:center} .store-card .btn{width:100%} } /* ---------- thank-you pages ---------- */ .thanks{padding:64px 0 90px} .thanks-card{ max-width:680px;margin:0 auto;background:var(--card); border:1px solid var(--border);border-radius:16px;padding:44px 44px 38px; box-shadow:0 18px 44px oklch(22% .015 65 / .07); } /* Everything above the first rule is centred: tick, eyebrow, headline and the payment line. Below it the content is instructions and reads better ranged left. */ .thanks-head{text-align:center} .thanks-tick{ width:52px;height:52px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--manus);color:#fff; font-size:26px;font-weight:800;margin:0 auto 22px; } .thanks-card h1{font-size:clamp(28px,3.4vw,38px)} .thanks-card .lede{margin-top:16px;font-size:17.5px} .thanks-what,.thanks-help{margin-top:34px;padding-top:26px;border-top:1px solid var(--border)} .thanks-card h2{font-size:15px;letter-spacing:.09em;text-transform:uppercase; font-family:var(--sans);font-weight:700;color:var(--muted-fg);margin-bottom:16px} .thanks-steps{margin:0;padding-left:0;list-style:none;counter-reset:s;display:grid;gap:15px} .thanks-steps li{ counter-increment:s;position:relative;padding-left:40px; font-size:15.5px;line-height:1.6; } .thanks-steps li::before{ content:counter(s);position:absolute;left:0;top:1px; width:26px;height:26px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--atlas-soft);color:var(--atlas); font-size:13px;font-weight:700;font-family:var(--sans); } .thanks-help p{font-size:15.5px;line-height:1.6} .thanks-help a{color:var(--atlas);font-weight:600;text-decoration:underline} .thanks-back{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px} @media (max-width:620px){ .thanks{padding:40px 0 60px} .thanks-card{padding:30px 22px 26px;border-radius:14px} .thanks-back .btn{width:100%;justify-content:center} } /* ---------- tool logo marks ---------- Brand SVGs come from simple-icons (CC0). The marks themselves are the trademarks of their owners and are used here only to identify which tool each companion app is for. ChatGPT, Canva and Manus are NOT in simple-icons - they have been removed at those companies' request - so they fall back to .is-mono, a monogram in the same tile. If you obtain an official SVG for one of them, drop the path into the span in index.html and delete the is-mono class. Do not go hunting for an unofficial copy. Note img-src in .htaccess is 'self' data:, which is why these are inline SVG rather than