/* ══════════════════════════════════════════════════════════════════════
ap.css — the Apple-style marketing layer. Rolled out ONE PAGE AT A
TIME (Kevin, 2026-09-04: "copy apple.com.sg style"). P&L is page one.
──────────────────────────────────────────────────────────────────────
HOW A PAGE OPTS IN
← still needed: nav+footer
← AFTER shell.css
⚠ shell.css IS STILL LOADED AND MUST BE. shell.js injects the nav and
the footer and they are styled entirely by shell.css. This file adds
`a-` prefixed classes and touches NOTHING shell.css owns except a few
`body.ap` scoped nav tweaks at the bottom. A page that uses no `.sec`
`.g` `.hero` `.feat` … classes therefore has no conflict at all.
⚠ THE ONE STRUCTURAL RULE: SECTIONS ALTERNATE WHITE AND GREY.
`.a-sec` is white; `.a-sec.a-grey` is #F5F5F7. Apple never puts two of
the same colour next to each other, and the rhythm IS the design — it
is what separates one idea from the next without a single rule line.
There are no borders between sections here; do not add any.
⚠ CARDS INVERT THEIR SECTION. A white card sits on grey, a grey card
sits on white. A grey card on a grey section disappears.
⚠ SF PRO IS REAL ON A MAC, INTER EVERYWHERE ELSE. `-apple-system`
resolves to the actual San Francisco on macOS/iOS, which is what makes
this read as Apple rather than as an imitation of it; Inter is the
closest available substitute on Windows and Android. Do not "simplify"
the stack down to one webfont.
⚠ THE ACCENT IS STILL THE PRODUCT'S OWN COLOUR, NOT APPLE BLUE. Every
page keeps the colour it is identified by in the nav dot, the footer and
the product menu (P&L is #15653F). Apple's blue would make nine pages
that all look like the same product. Only the LAYOUT is Apple's.
PALETTE (Apple's own neutrals — every value here is measured)
--a-ink #1D1D1F 16.9:1 on white · 15.9:1 on grey
--a-ink-2 #6E6E73 5.07:1 on white · 4.66:1 on grey ← the floor
--a-hair #D2D2D7 rules only, never text
accent #15653F 6.90:1 on white · 6.48:1 on grey
⚠ #6E6E73 IS THE LIGHTEST GREY ALLOWED ON TEXT. Apple's own #86868B
is 3.5:1 and fails AA; it is used here for NOTHING.
══════════════════════════════════════════════════════════════════════ */
body.ap{
--a-font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',
'Helvetica Neue',Helvetica,Arial,sans-serif;
--a-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--a-ink:#1D1D1F;
--a-ink-2:#6E6E73;
--a-grey:#F5F5F7;
--a-hair:#D2D2D7;
--a-hair-2:#E8E8ED;
--a-r:18px; /* card radius */
--a-r-lg:28px; /* banner radius */
background:#fff;
color:var(--a-ink);
font-family:var(--a-font);
font-size:17px;
line-height:1.4706;
letter-spacing:-.022em;
-webkit-font-smoothing:antialiased;
}
/* ── layout ───────────────────────────────────────────
1024px is Apple's own content width; 692px is their measure for a
centred paragraph, which is what stops a lede running to 120 characters
on a wide screen. */
.a-w{max-width:1024px;margin:0 auto;padding:0 22px}
.a-sec{padding:100px 0;background:#fff}
.a-sec.a-grey{background:var(--a-grey)}
.a-sec.a-tight{padding-top:0}
.a-c{text-align:center}
/* ── type ─────────────────────────────────────────────
Apple's headline sizes are large and their tracking is NEGATIVE and
tightens as the size grows. A 56px headline at normal tracking reads
as a poster; at -.005em it reads as Apple. */
.a-h1{font-size:clamp(40px,6.4vw,80px);line-height:1.05;letter-spacing:-.015em;
font-weight:600;margin:0}
.a-h2{font-size:clamp(32px,4.6vw,56px);line-height:1.0714;letter-spacing:-.005em;
font-weight:600;margin:0}
.a-h3{font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:.004em;
font-weight:600;margin:0}
.a-h4{font-size:19px;line-height:1.26;letter-spacing:.012em;font-weight:600;margin:0}
.a-eyebrow{font-size:17px;line-height:1.24;font-weight:600;letter-spacing:-.022em;
color:var(--accent);margin:0 0 6px}
.a-lede{font-size:clamp(19px,2vw,21px);line-height:1.381;letter-spacing:.011em;
font-weight:400;color:var(--a-ink);margin-top:19px}
.a-body{font-size:17px;line-height:1.4706;letter-spacing:-.022em;color:var(--a-ink-2)}
.a-body b,.a-body strong{color:var(--a-ink);font-weight:600}
.a-small{font-size:14px;line-height:1.4286;letter-spacing:-.016em;color:var(--a-ink-2)}
.a-num{font-family:var(--a-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.a-mt8{margin-top:8px}.a-mt16{margin-top:16px}.a-mt24{margin-top:24px}
.a-mt40{margin-top:40px}.a-mt56{margin-top:56px}
/* ⚠ .a-narrow IS DECLARED AFTER THE TYPE CLASSES ON PURPOSE. It centres a
paragraph with auto side margins, and any type class that used a margin
SHORTHAND above would otherwise reset those to 0 and pin the paragraph to
the left of the page. That is exactly the bug Kevin caught on 2026-09-04:
the text inside was centred, so it looked almost right, but the 692px box
holding it was sitting hard left in a 1024px page.
⚠ Never give .a-lede, .a-body or .a-small a `margin:` shorthand. */
.a-narrow{max-width:692px;margin-left:auto;margin-right:auto}
/* ── the section header: headline, then a chevron link ──
Apple's SectionHeader is a headline plus one or two "Learn more ›"
links directly under it. The links are the ONLY navigation inside a
section — there are no buttons in the body of an Apple page. */
.a-shead{margin-bottom:40px}
.a-shead .a-h2{margin-bottom:0}
.a-shead-links{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:18px}
.a-c .a-shead-links{justify-content:center}
/* ── chevron link ─────────────────────────────────────
⚠ THE CHEVRON IS A PSEUDO-ELEMENT, NOT AN SVG OR AN EMOJI. It has to
inherit the link's colour and shift on hover, and a character does both
for free. It nudges 2px right on hover; Apple's does the same. */
.a-link{display:inline-flex;align-items:center;gap:3px;color:var(--accent);
text-decoration:none;font-size:17px;line-height:1.24;letter-spacing:-.022em;
font-weight:400}
.a-link::after{content:'\203A';font-size:1.35em;line-height:1;position:relative;top:-.04em;
transition:transform .2s ease}
.a-link:hover{text-decoration:underline;text-underline-offset:4px}
.a-link:hover::after{transform:translateX(2px)}
.a-link-sm{font-size:14px}
.a-link-plain::after{content:none}
/* ── pill button ──────────────────────────────────────
980px is Apple's own radius token. A pill only appears in the hero,
the price tiles and the closing CTA; everywhere else a page this long
would start to look like a shop. */
.a-btn{display:inline-flex;align-items:center;justify-content:center;
min-width:28px;padding:12px 22px;border-radius:980px;background:var(--accent);
color:#fff;border:1px solid var(--accent);font-family:inherit;font-size:17px;
line-height:1.176;letter-spacing:-.022em;font-weight:400;text-decoration:none;
transition:opacity .18s ease}
.a-btn:hover{opacity:.85}
.a-btn-2{background:transparent;color:var(--accent);border-color:var(--accent)}
.a-btn-2:hover{background:var(--accent);color:#fff;opacity:1}
.a-btns{display:flex;flex-wrap:wrap;gap:12px}
.a-c .a-btns{justify-content:center}
/* ── ribbon (Apple's thin promo strip above the hero) ──
⚠ IT IS NOT A NOTICE BAR AND MUST NOT BECOME ONE. Apple's ribbon
carries one fact and one link; the dismissible site-wide notice bar was
removed from this site on purpose (31 Aug 2026) and does not come back. */
.a-ribbon{background:var(--a-grey);padding:14px 0;text-align:center;
font-size:14px;line-height:1.4286;letter-spacing:-.016em}
.a-ribbon b{font-weight:600}
.a-ribbon .a-link{font-size:14px;margin-left:8px}
/* ── hero ─────────────────────────────────────────────
Centred, generous, and the visual carries the weight. Apple's hero
text block never exceeds ~16 words; ours is longer because we have to
explain a category people do not already know, so the lede is capped at
a real measure instead. */
.a-hero{padding:64px 0 0;background:#fff;text-align:center}
.a-hero .a-h1{margin-top:8px}
.a-hero .a-lede{max-width:640px;margin-left:auto;margin-right:auto}
.a-hero .a-shead-links{justify-content:center;margin-top:22px;gap:10px 30px}
.a-hero-note{margin:26px auto 0;max-width:560px}
.a-hero-stage{margin-top:52px;padding:56px 22px 64px;background:var(--a-grey)}
/* ── the worked example (receipt → books) ─────────────
Built from type and rules, never a screenshot: it themes correctly, it
cannot go stale, and there is still no product photography on this site. */
.a-demo{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;
max-width:900px;margin:0 auto;text-align:left}
.a-card{background:#fff;border-radius:var(--a-r);padding:24px 22px;
box-shadow:0 2px 14px rgba(0,0,0,.06)}
.a-grey .a-card{background:#fff}
.a-card-top{display:flex;align-items:center;gap:9px;padding-bottom:13px;
border-bottom:1px solid var(--a-hair-2);margin-bottom:14px}
.a-card-top .a-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.a-card-top b{font-size:14px;font-weight:600;letter-spacing:-.016em}
.a-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
font-size:14px;line-height:1.4286;letter-spacing:-.016em;color:var(--a-ink-2);
border-bottom:1px solid #F2F2F4}
.a-row:last-child{border-bottom:0}
.a-row b{color:var(--a-ink);font-weight:500;font-family:var(--a-mono);
font-size:13px;letter-spacing:0;white-space:nowrap}
.a-row-tot{display:flex;justify-content:space-between;margin-top:12px;padding-top:12px;
border-top:1px solid var(--a-hair);font-size:17px;font-weight:600}
.a-row-tot span:last-child{font-family:var(--a-mono);color:var(--accent);letter-spacing:0}
.a-arrow{font-size:26px;color:var(--a-ink-2);line-height:1}
.a-recpt{font-family:var(--a-mono);font-size:12.5px;line-height:1.9;letter-spacing:0;
color:var(--a-ink-2)}
.a-recpt .a-recpt-h{color:var(--a-ink);font-weight:500;letter-spacing:.06em}
.a-recpt div{display:flex;justify-content:space-between;gap:12px}
.a-stage-cap{max-width:640px;margin:34px auto 0;text-align:center}
/* ── tile grids ───────────────────────────────────────
⚠ GAP, NOT RULES. The previous design system separated cards with 1px
hairlines (.b-rulegrid, .g). Apple separates them with air and a
radius. Do not mix the two on one page — it reads as two designs. */
.a-grid{display:grid;gap:20px;margin-top:40px}
.a-g2{grid-template-columns:repeat(2,1fr)}
.a-g3{grid-template-columns:repeat(3,1fr)}
.a-g4{grid-template-columns:repeat(4,1fr)}
.a-tile{background:var(--a-grey);border-radius:var(--a-r);padding:32px 28px}
.a-grey .a-tile{background:#fff}
.a-tile .a-h3{margin-bottom:10px}
.a-tile .a-h4{margin-bottom:8px}
.a-tile p{font-size:15px;line-height:1.4667;letter-spacing:-.016em;color:var(--a-ink-2);margin:0}
.a-tile p b{color:var(--a-ink);font-weight:600}
/* numbered steps — the figure is the only mono on a tile */
.a-step-n{font-family:var(--a-mono);font-size:13px;font-weight:500;letter-spacing:0;
color:var(--accent);margin-bottom:14px;display:block}
/* ── expandable feature card (Apple's "+" card) ───────
⚠ IT IS A , SO IT WORKS WITH NO JAVASCRIPT. Apple's opens a
modal; a modal needs script, a focus trap and a scroll lock, and buys a
marketing page nothing. The + rotates into a − when open. */
.a-fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.a-fcard{background:var(--a-grey);border-radius:var(--a-r);overflow:hidden}
.a-grey .a-fcard{background:#fff}
.a-fcard>summary{list-style:none;cursor:pointer;padding:32px 28px;
display:block;position:relative}
.a-fcard>summary::-webkit-details-marker{display:none}
.a-fcard .a-topic{font-size:17px;font-weight:600;letter-spacing:-.022em;
color:var(--a-ink-2);margin-bottom:10px}
.a-fcard .a-h3{padding-right:44px}
.a-fcard .a-plus{position:absolute;right:24px;bottom:28px;width:36px;height:36px;
border-radius:50%;background:rgba(0,0,0,.05);color:var(--a-ink);
display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
font-weight:300;transition:background .18s ease}
.a-grey .a-fcard .a-plus{background:rgba(0,0,0,.05)}
.a-fcard>summary:hover .a-plus{background:rgba(0,0,0,.09)}
.a-fcard[open] .a-plus{transform:rotate(45deg)}
.a-fcard>summary{padding-bottom:84px}
.a-fcard[open]>summary{padding-bottom:20px}
.a-fcard[open] .a-plus{bottom:auto;top:28px}
.a-fcard ul{list-style:none;margin:0;padding:0 28px 32px}
.a-fcard li{font-size:15px;line-height:1.4667;letter-spacing:-.016em;color:var(--a-ink-2);
padding-left:18px;position:relative;margin-bottom:11px}
.a-fcard li:last-child{margin-bottom:0}
.a-fcard li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
border-radius:50%;background:var(--accent)}
.a-fcard li b{color:var(--a-ink);font-weight:600}
/* ── banner card (Apple's one wide card) ────────────── */
.a-banner{background:var(--a-grey);border-radius:var(--a-r-lg);padding:72px 48px;
text-align:center}
.a-grey .a-banner{background:#fff}
.a-banner .a-h2{max-width:16ch;margin:0 auto}
.a-banner .a-body{max-width:60ch;margin:20px auto 0}
.a-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:8px;margin:32px 0 0}
.a-flow span{font-size:14px;letter-spacing:-.016em;color:var(--a-ink);
background:#fff;border:1px solid var(--a-hair);border-radius:980px;padding:7px 16px}
.a-grey .a-flow span{background:var(--a-grey);border-color:var(--a-hair-2)}
.a-flow span.a-sep{border:0;background:none;padding:0;color:var(--a-ink-2)}
/* ── quote ──────────────────────────────────────────── */
.a-quote{max-width:800px;margin:0 auto;text-align:center}
.a-quote .a-pull{font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.003em;
font-weight:600;margin:0}
.a-quote .a-body{margin-top:24px;text-align:left}
.a-quote .a-by{margin-top:22px;font-size:14px;letter-spacing:-.016em;color:var(--a-ink-2)}
.a-quote .a-by b{color:var(--a-ink);font-weight:600}
/* ── price tiles ────────────────────────────────────── */
.a-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.a-plan{background:var(--a-grey);border-radius:var(--a-r);padding:36px 32px;display:flex;
flex-direction:column;text-align:center}
.a-grey .a-plan{background:#fff}
.a-plan .a-topic{font-size:17px;font-weight:600;color:var(--a-ink-2);margin-bottom:14px}
.a-plan .a-price{font-size:44px;line-height:1.1;letter-spacing:-.01em;font-weight:600}
.a-plan .a-price small{font-size:17px;font-weight:400;color:var(--a-ink-2);letter-spacing:-.022em}
.a-plan .a-per{font-size:14px;letter-spacing:-.016em;color:var(--a-ink-2);margin-top:6px}
.a-plan ul{list-style:none;margin:26px 0 30px;padding:0;text-align:left}
.a-plan li{font-size:15px;line-height:1.4667;letter-spacing:-.016em;color:var(--a-ink-2);
padding-left:26px;position:relative;margin-bottom:12px}
.a-plan li b{color:var(--a-ink);font-weight:600}
.a-plan li svg{position:absolute;left:0;top:3px;width:15px;height:15px;color:var(--accent)}
.a-plan .a-btn{margin-top:auto;align-self:center}
/* ── comparison table ─────────────────────────────────
⚠ AT LEAST ONE ROW STILL GOES TO THE OTHER SIDE. See the .cmp comment
in shell.css — that rule is about honesty, not about a stylesheet, and
it survives the redesign untouched. No competitor price is ever stated. */
.a-cmp{margin-top:40px;border-top:1px solid var(--a-hair);font-size:15px}
.a-cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px;
padding:18px 4px;border-bottom:1px solid var(--a-hair-2);align-items:baseline}
.a-cmp-row.a-cmp-h{border-bottom:1px solid var(--a-hair);font-size:13px;font-weight:600;
letter-spacing:.01em;text-transform:uppercase;color:var(--a-ink-2);padding:14px 4px}
.a-cmp-h .a-us{color:var(--accent)}
.a-cmp-k{color:var(--a-ink);font-weight:500;letter-spacing:-.016em}
.a-cmp-row div{color:var(--a-ink-2);line-height:1.4;letter-spacing:-.016em}
.a-cmp-row b{color:var(--a-ink);font-weight:600}
.a-y::before{content:'\2713';color:var(--accent);font-weight:600;margin-right:7px}
.a-n::before{content:'\2715';color:var(--a-ink-2);margin-right:7px}
.a-cmp a{color:var(--accent)}
.a-cmp-note{margin-top:24px;max-width:72ch}
/* ── accordion (FAQ, objections) ────────────────────── */
.a-acc{margin-top:40px;border-top:1px solid var(--a-hair)}
.a-acc details{border-bottom:1px solid var(--a-hair)}
.a-acc summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;
justify-content:space-between;align-items:baseline;gap:20px;
font-size:19px;line-height:1.3;letter-spacing:-.012em;font-weight:600}
.a-acc summary::-webkit-details-marker{display:none}
.a-acc summary::after{content:'+';font-weight:300;font-size:24px;line-height:1;
color:var(--accent);flex-shrink:0}
.a-acc details[open] summary::after{content:'\2212'}
.a-acc p{font-size:17px;line-height:1.4706;letter-spacing:-.022em;color:var(--a-ink-2);
padding-bottom:24px;max-width:72ch;margin:0}
.a-acc p+p{margin-top:-8px}
.a-acc q{display:block;font-style:italic;font-weight:600;margin-bottom:0}
/* ── footnotes (Apple's "sosumi") ─────────────────────
⚠ THIS IS WHERE THE CAVEATS LIVE NOW, AND THEY ARE STILL LOAD-BEARING.
Every number on the page that has a condition attached carries a
superscript down to here. Deleting a footnote means deleting the claim
it qualifies, not just the small print. */
.a-notes{padding:36px 0 56px;background:#fff}
.a-notes ol{margin:0;padding-left:18px}
.a-notes li{font-size:12px;line-height:1.3334;letter-spacing:-.01em;color:var(--a-ink-2);
margin-bottom:9px}
.a-notes li b{color:var(--a-ink);font-weight:600}
.a-notes a{color:var(--accent)}
.a-fn{font-size:.62em;vertical-align:.5em;text-decoration:none;color:var(--accent);
font-weight:400;letter-spacing:0}
.a-fn:hover{text-decoration:underline}
/* ── nav + footer tweaks, scoped to this page only ────
The chrome is shell.css's and stays shell.css's. These four rules only
round the nav button and match the type, so the page does not start
with a square-cornered button above a page of pills. */
body.ap #nav,body.ap footer{font-family:var(--a-font)}
body.ap .nav-r .btn{border-radius:980px;padding:7px 15px;font-weight:400}
body.ap #nav{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid rgba(0,0,0,.08)}
body.ap footer{background:var(--a-grey);border-top:0}
/* ── responsive ─────────────────────────────────────── */
@media(max-width:940px){
.a-g3,.a-g4,.a-fcards{grid-template-columns:repeat(2,1fr)}
.a-demo{grid-template-columns:1fr;gap:16px;max-width:460px}
.a-arrow{transform:rotate(90deg);text-align:center}
.a-banner{padding:56px 32px}
}
@media(max-width:734px){
body.ap{font-size:16px}
.a-w{padding:0 20px}
.a-sec{padding:64px 0}
.a-hero{padding-top:44px}
.a-hero-stage{margin-top:38px;padding:36px 20px 44px}
.a-g2,.a-g3,.a-g4,.a-fcards,.a-plans{grid-template-columns:1fr}
.a-banner{padding:44px 24px;border-radius:var(--a-r)}
.a-cmp-row{grid-template-columns:1fr 1fr;gap:8px 16px}
.a-cmp-k{grid-column:1/-1;padding-bottom:2px}
.a-cmp-h .a-cmp-k{display:none}
.a-shead{margin-bottom:32px}
.a-fcard>summary{padding:26px 22px 76px}
.a-fcard[open]>summary{padding-bottom:16px}
.a-fcard ul{padding:0 22px 26px}
}
/* ══ additions, 2026-09-04 — Kevin's running order for the P&L page ══
⚠ FEATURES IS ITS OWN SECTION, DIRECTLY BELOW PRICE (Kevin, 2026-09-05:
"i want features to be in its own section below pricing, it's important
to me"). This REVERSES the older "the full feature list lives under the
price, never in a section of its own" rule, and the nested unstyled
wrapper that faked a nav item for it is gone for
good. The spirit of the old rule survives, because Features is still the
very next thing a reader meets after the price — they are asking what
they get for the money and the answer is the next screenful. */
.a-inc{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px;margin-top:56px;
padding-top:48px;border-top:1px solid var(--a-hair)}
.a-grey .a-inc{border-top-color:var(--a-hair)}
/* ⚠ IN ITS OWN SECTION THE HEADING DOES THE SEPARATING, so the rule and the
space that used to divide the list from the plans above it both come off.
Leave them on .a-inc itself: nothing else uses that class today, but the
defaults are what make it safe to drop the list back inside another
block. */
#features .a-inc{margin-top:0;padding-top:0;border-top:0}
.a-inc h3{font-size:17px;line-height:1.24;letter-spacing:-.022em;font-weight:600;
margin:0 0 14px;color:var(--a-ink)}
.a-inc ul{list-style:none;margin:0;padding:0}
.a-inc li{font-size:15px;line-height:1.4667;letter-spacing:-.016em;color:var(--a-ink-2);
padding-left:18px;position:relative;margin-bottom:11px}
.a-inc li:last-child{margin-bottom:0}
.a-inc li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
border-radius:50%;background:var(--accent)}
.a-inc li b{color:var(--a-ink);font-weight:600}
/* ⚠ ONE CENTRED WINDOW, NOT A LEFT COLUMN (Kevin, 2026-09-04: "center all
text"). The record sits on the middle line and its three explanations
sit under it as three centred tiles, so nothing on the page is ranged
left except a bullet list or a table, where centring is unreadable. */
.a-one{max-width:420px;margin:44px auto 28px}
/* the worked example: the record on one side, what it means on the other */
.a-split{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:44px;
align-items:start;margin-top:44px}
.a-split .a-note+.a-note{margin-top:22px}
.a-note{font-size:16px;line-height:1.5;letter-spacing:-.02em;color:var(--a-ink-2)}
.a-note b{color:var(--a-ink);font-weight:600}
/* hero upload visual — the bulk drop, which is the headline feature */
.a-up{max-width:520px;margin:0 auto;text-align:left}
.a-up-head{display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:14px;border-bottom:1px solid var(--a-hair-2);margin-bottom:6px}
.a-up-head b{font-size:15px;font-weight:600;letter-spacing:-.016em}
.a-up-head span{font-size:13px;letter-spacing:-.01em;color:var(--a-ink-2);
font-family:var(--a-mono)}
.a-up-row{display:flex;align-items:center;gap:11px;padding:9px 0;
font-size:14px;line-height:1.35;letter-spacing:-.016em;color:var(--a-ink-2);
border-bottom:1px solid #F2F2F4}
.a-up-row:last-of-type{border-bottom:0}
.a-up-row .a-tick{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.a-up-row .a-f{color:var(--a-ink-2);font-family:var(--a-mono);font-size:12px;
letter-spacing:0;width:96px;flex-shrink:0}
.a-up-row b{color:var(--a-ink);font-weight:500}
.a-up-row .a-amt{margin-left:auto;font-family:var(--a-mono);font-size:13px;
letter-spacing:0;color:var(--a-ink)}
.a-up-more{font-size:13px;letter-spacing:-.01em;color:var(--a-ink-2);padding-top:12px;
border-top:1px solid var(--a-hair-2);margin-top:6px}
@media(max-width:940px){
.a-inc{grid-template-columns:repeat(2,1fr);gap:32px 28px}
.a-split{grid-template-columns:1fr;gap:32px}
}
@media(max-width:734px){
.a-inc{grid-template-columns:1fr;margin-top:44px;padding-top:36px}
.a-up-row .a-f{display:none}
}
/* ══ product visuals, 2026-09-04 ══════════════════════════════════════
Kevin: "show images when we can, you give it a try first that look like
our system, but amp up the look." These are HAND-BUILT MOCK-UPS of the
real screens, not screenshots — there is still no product photography on
this site, and a mock-up themes correctly, stays sharp on any display
and cannot go stale the week a button moves.
⚠ THEY MIRROR THE REAL BACKEND, AND THAT IS THE POINT. The P&L block
copies `.pl-table` in public/backend/pl.html — section headers, indented
categories, a teal gross-profit line and a tinted net-profit line. The
GST block copies `.f5-grid` — four boxes across, Box 8 spanning the row.
If either of those screens is redesigned, these are wrong and should be
redrawn; somebody who signs up must recognise what they were shown. */
.a-win{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),
0 8px 30px rgba(0,0,0,.09);overflow:hidden;text-align:left}
.a-win-bar{display:flex;align-items:center;gap:9px;padding:13px 18px;
border-bottom:1px solid var(--a-hair-2);background:#FCFCFD}
.a-win-bar .a-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.a-win-bar b{font-size:13.5px;font-weight:600;letter-spacing:-.014em}
.a-win-bar .a-tag{margin-left:auto;font-size:11.5px;letter-spacing:.02em;font-weight:600;
color:var(--accent);background:var(--accent-wash);border-radius:980px;padding:4px 10px}
.a-win-in{padding:18px}
/* ⚠ A WIDE TABLE SCROLLS INSIDE ITS OWN WINDOW. THE PAGE BODY NEVER DOES.
The four-column P&L mock-up cannot compress below about 402px, so on a
390px phone it was making the whole document scroll sideways — on pl.html
as well, since 2026-09-04. Found at 390px in an iframe sweep; a desktop
window is wide enough to hide it completely. */
.a-win-in{overflow-x:auto}
/* P&L statement — mirrors .pl-table */
.a-plt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.a-plt th{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
color:var(--a-ink-2);padding:8px 10px;border-bottom:1px solid var(--a-hair);
background:#FAFAFB;text-align:right;white-space:nowrap}
.a-plt th:first-child{text-align:left}
.a-plt td{font-size:12.5px;color:var(--a-ink-2);padding:6px 10px;
border-bottom:1px solid #F2F2F4;text-align:right;white-space:nowrap;
font-family:var(--a-mono);letter-spacing:0}
.a-plt td:first-child{text-align:left;font-family:var(--a-font);letter-spacing:-.014em}
.a-plt tr.a-sec-h td{background:#FAFAFB;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.07em;color:var(--a-ink-2);padding:7px 10px;
border-bottom:1px solid var(--a-hair);font-family:var(--a-font)}
.a-plt td.a-in{padding-left:22px}
.a-plt tr.a-sub td{font-weight:600;color:var(--a-ink);background:rgba(0,0,0,.02);
border-top:1px solid var(--a-hair)}
.a-plt tr.a-gp td{font-weight:700;color:var(--accent);background:var(--accent-wash);
border-top:2px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.07)}
.a-plt tr.a-np td{font-weight:700;color:var(--accent);background:var(--accent-wash);
border-top:2px solid rgba(0,0,0,.14);border-bottom:0;font-size:13.5px}
/* GST F5 — mirrors .f5-grid */
.a-f5{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.a-f5 div{background:#FAFAFB;border:1px solid var(--a-hair-2);border-radius:10px;padding:11px 12px}
.a-f5 .a-lbl{display:block;font-size:10px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;color:var(--a-ink-2)}
.a-f5 .a-desc{display:block;font-size:11px;line-height:1.3;color:var(--a-ink-2);margin-top:1px}
.a-f5 .a-val{display:block;font-size:16px;font-weight:700;margin-top:5px;
font-family:var(--a-mono);letter-spacing:0;color:var(--a-ink)}
.a-f5 .a-net{grid-column:span 2;background:var(--accent-wash);border-color:rgba(0,0,0,.1)}
.a-f5 .a-net .a-val{font-size:21px;color:var(--accent)}
/* two windows side by side under a headline */
/* ⚠ THE TWO WINDOWS STRETCH TO THE SAME HEIGHT so their captions sit on
one line. Left to their natural heights they land ~40px apart and the
block reads as two unrelated pictures rather than one comparison. */
.a-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;align-items:stretch}
/* ⚠ min-width:0 IS WHAT LETS THE TABLE SCROLL RATHER THAN THE PAGE. A grid
item defaults to min-width:auto, so the four-column P&L mock-up's own
min-content width (about 402px) sets the column width and pushes the whole
document sideways on a 390px phone — .a-win-in's overflow-x:auto never gets
a chance to do anything. This was live on pl.html too. */
.a-two>div{display:flex;flex-direction:column;min-width:0}
.a-two .a-win{flex:1}
.a-two .a-cap{margin-top:16px;text-align:center}
@media(max-width:940px){ .a-two{grid-template-columns:1fr;gap:32px} }
/* ══ product visuals, part two — 2026-09-04 ═══════════════════════════
Added while rolling the Apple signature from pl.html onto the other
eight product pages. Same rule as .a-plt and .a-f5 above: these are
HAND-BUILT MOCK-UPS of real backend screens, never screenshots. If a
screen is redesigned the mock-up here is wrong and must be redrawn —
somebody who signs up has to recognise what they were shown.
⚠ NEVER PUT --a-ink-2 TEXT ON --accent-wash. #6E6E73 measures 4.45
to 4.49 on the palest three washes (chatbot, compliance, pro365) and
fails AA by a whisker. Accent-on-wash is safe on all nine (4.73 at
worst, on Snapshop's orange), and --a-ink on wash is 14.8 or better.
Those three washes were nudged two steps lighter on their own pages
for the same reason; do not "restore" the older values. */
/* .a-one, one size up, for a record with more in it */
.a-one-lg{max-width:600px;margin:44px auto 28px}
/* a status word inside a mock-up window */
.a-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;
border-radius:980px;padding:3px 9px;background:var(--accent-wash);color:var(--accent);
white-space:nowrap}
.a-pill-q{background:rgba(0,0,0,.05);color:var(--a-ink-2)}
.a-up-row .a-pill{margin-left:auto}
.a-up-row .a-pill+.a-amt{margin-left:12px}
/* ── phone frame ──────────────────────────────────────
⚠ A PHONE, NOT A WINDOW, AND THE DIFFERENCE IS THE ARGUMENT. The HR
staff app, the Snapslot booking page and the Snapshop storefront are
things somebody holds in their hand while standing up; drawing them
as a laptop window would quietly claim the opposite. Everything the
BOSS looks at stays in .a-win. */
.a-ph{max-width:300px;margin:0 auto;background:#fff;border-radius:34px;padding:9px;
box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 44px rgba(0,0,0,.14);text-align:left}
.a-ph-in{border:1px solid var(--a-hair-2);border-radius:26px;overflow:hidden}
.a-ph-bar{display:flex;align-items:center;gap:8px;padding:14px 15px 12px;
border-bottom:1px solid var(--a-hair-2);background:#FCFCFD}
.a-ph-bar .a-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.a-ph-bar b{font-size:12.5px;font-weight:600;letter-spacing:-.014em}
.a-ph-body{padding:15px}
/* ── tappable options, each showing the price it produces ─────────────
⚠ THE PRICE ON THE BUTTON IS SNAPSLOT'S OWN RULE, not decoration: a
choice that changes what somebody pays has to show what it produces
before they commit to it. Snapshop's slot picker reuses it. */
.a-qn{font-size:13px;font-weight:600;letter-spacing:-.014em;color:var(--a-ink);margin:0 0 10px}
.a-opts{display:grid;gap:8px}
.a-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;
border:1px solid var(--a-hair);border-radius:11px;padding:10px 13px;
font-size:13.5px;letter-spacing:-.016em;color:var(--a-ink)}
.a-opt span:last-child{font-family:var(--a-mono);font-size:12.5px;letter-spacing:0;
color:var(--a-ink-2)}
.a-opt.a-on{border-color:var(--accent);border-width:1.5px;padding:9.5px 12.5px;
background:var(--accent-wash)}
.a-opt.a-on span:last-child{color:var(--accent);font-weight:500}
/* ── a month, and the times inside one day ────────────
⚠ A SHUT DAY IS PLAIN GREY TEXT, NOT A PALER GREY. #6E6E73 is the
lightest ink allowed anywhere on this site and the audit counts every
number in this grid as a text node. A free day is told apart by its
tinted chip, not by dimming everything else. */
.a-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.a-cal span{font-size:11.5px;line-height:29px;border-radius:8px;color:var(--a-ink-2);
font-family:var(--a-mono);letter-spacing:0}
.a-cal span.a-dw{font-family:var(--a-font);font-size:9.5px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;line-height:18px;color:var(--a-ink-2)}
.a-cal span.a-free{background:var(--accent-wash);color:var(--accent);font-weight:600}
.a-cal span.a-pick{background:var(--accent);color:#fff;font-weight:600}
.a-slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.a-slots b{font-size:12.5px;font-weight:500;letter-spacing:-.014em;color:var(--a-ink);
border:1px solid var(--a-hair);border-radius:980px;padding:6px 12px}
.a-slots b.a-on{background:var(--accent);border-color:var(--accent);color:#fff}
/* ── kanban columns — the CRM board ─────────────────── */
.a-kan{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.a-kan-c{background:#FAFAFB;border:1px solid var(--a-hair-2);border-radius:11px;padding:9px}
.a-kan-h{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--a-ink-2);margin-bottom:8px;display:flex;justify-content:space-between;gap:6px}
.a-kan-card{background:#fff;border:1px solid var(--a-hair-2);border-radius:8px;
padding:8px 9px;margin-bottom:6px;font-size:11.5px;line-height:1.35;
letter-spacing:-.014em;color:var(--a-ink)}
.a-kan-card:last-child{margin-bottom:0}
.a-kan-card em{display:block;font-style:normal;font-size:10.5px;color:var(--a-ink-2);
margin-top:3px;font-family:var(--a-mono);letter-spacing:0}
/* ── chat bubbles — the website chatbot ─────────────── */
.a-chat{display:flex;flex-direction:column;gap:8px}
.a-msg{max-width:84%;font-size:13px;line-height:1.4;letter-spacing:-.014em;
border-radius:15px 15px 15px 4px;padding:9px 12px;background:#F2F2F4;
color:var(--a-ink);align-self:flex-start}
.a-msg.a-me{align-self:flex-end;border-radius:15px 15px 4px 15px;
background:var(--accent-wash);color:var(--a-ink)}
@media(max-width:734px){
.a-kan{grid-template-columns:1fr}
.a-ph{max-width:280px}
}
/* ══ long-form pages — about, privacy, terms — 2026-09-05 ═════════════
Kevin: "apply same design language for about, blog, privacy and term."
Everything above this line was built for a product page, where the copy
is short and centred. These three pages are the opposite: a legal
document and a company page are read straight through, so the rule that
changes is the one already written into the copy rules — HEADLINES ARE
CENTRED, RUNNING TEXT IS NOT. A 700-word clause set centred is
unreadable, exactly as a bullet list or a comparison table is.
⚠ THE WORDS IN privacy.html AND tos.html WERE NOT TOUCHED. Legal text
is the one thing on this site that must never be quietly reworded; the
rebuild rehoused it, character for character. Only the chrome changed.
⚠ AND THAT IS WHY THE EM DASHES SURVIVE THERE. The no-em-dash rule is
about marketing copy; rewriting a clause to obey a house style is a
change to a legal document, which is not a design decision to make. */
.a-doc{max-width:720px;margin:0 auto;text-align:left}
.a-doc-sec{margin-bottom:44px}
.a-doc-sec:last-child{margin-bottom:0}
.a-doc-sec>h2{font-size:22px;line-height:1.28;letter-spacing:-.016em;font-weight:600;
color:var(--a-ink);margin:0 0 14px}
.a-doc-n{display:block;font-family:var(--a-mono);font-size:12px;font-weight:500;
letter-spacing:.04em;color:var(--accent);margin-bottom:7px}
.a-doc-sec h3{font-size:17px;font-weight:600;letter-spacing:-.022em;color:var(--a-ink);
margin:22px 0 8px}
.a-doc-sec p{font-size:16px;line-height:1.6;letter-spacing:-.018em;color:var(--a-ink-2);
margin:0 0 13px}
.a-doc-sec p:last-child{margin-bottom:0}
.a-doc-sec ul,.a-doc-sec ol{margin:0 0 15px;padding:0;list-style:none}
.a-doc-sec li{font-size:16px;line-height:1.6;letter-spacing:-.018em;color:var(--a-ink-2);
padding-left:19px;position:relative;margin-bottom:10px}
.a-doc-sec li:last-child{margin-bottom:0}
.a-doc-sec li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
border-radius:50%;background:var(--accent)}
.a-doc-sec b,.a-doc-sec strong{color:var(--a-ink);font-weight:600}
.a-doc-sec a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* ⚠ THE TABLE SCROLLS INSIDE ITS OWN BOX, THE PAGE NEVER DOES. Same trap
as .a-win-in — the privacy data table has three columns and cannot
compress below about 430px, so on a 390px phone it would take the whole
document sideways with it. */
.a-tbl-wrap{overflow-x:auto;margin:16px 0 15px;border-radius:12px;
border:1px solid var(--a-hair-2)}
.a-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.a-tbl th,.a-tbl td{text-align:left;padding:11px 14px;vertical-align:top;
border-bottom:1px solid var(--a-hair-2);line-height:1.45;letter-spacing:-.014em}
.a-tbl tr:last-child td{border-bottom:0}
.a-tbl th{background:#FAFAFB;color:var(--a-ink);font-weight:600;font-size:12px;
letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.a-tbl td{color:var(--a-ink-2)}
.a-tbl td:first-child{color:var(--a-ink);font-weight:500;white-space:nowrap}
/* the date line under a legal title */
.a-doc-meta{font-size:14px;letter-spacing:-.016em;color:var(--a-ink-2);margin-top:18px}
.a-doc-meta b{color:var(--a-ink);font-weight:600}
/* ── the team photo, and the two bios under it ────────
⚠ THE 52px AVATAR CIRCLES ARE NOT COMING BACK (2 Sep 2026). One real
face beside a letter-J placeholder read as a team of one and a half.
⚠ height:auto IS REQUIRED on the : the width/height attributes are
a presentational hint that beats aspect-ratio, so without it the photo
renders at its full 960px height and no crop happens at all. The 15%
object-position is derived, not eyeballed — it lands the band just below
both shirt logos with headroom above the heads. RE-DERIVE IT IF THE
PHOTO IS EVER REPLACED. */
.a-photo{margin:44px auto 0;max-width:820px;border-radius:var(--a-r);overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 34px rgba(0,0,0,.10)}
.a-photo img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;
object-position:center 15%;display:block}
.a-bios{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;
max-width:820px;margin-left:auto;margin-right:auto;text-align:left}
.a-bio{background:#fff;border-radius:var(--a-r);padding:30px 28px}
.a-sec:not(.a-grey) .a-bio{background:var(--a-grey)}
.a-bio h3{font-size:21px;line-height:1.2;letter-spacing:-.014em;font-weight:600;margin:0}
.a-bio .a-role{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--accent);margin:5px 0 14px}
.a-bio p{font-size:15px;line-height:1.5;letter-spacing:-.016em;color:var(--a-ink-2);margin:0}
.a-bio p+p{margin-top:12px}
.a-bio a{color:var(--accent)}
/* ── a pulled sentence, used once on the about page ─── */
.a-said{max-width:640px;margin:38px auto 0;text-align:center;font-size:clamp(20px,2.4vw,26px);
line-height:1.28;letter-spacing:-.008em;font-weight:600;color:var(--a-ink)}
.a-said span{display:block;font-size:15px;line-height:1.47;letter-spacing:-.016em;
font-weight:400;color:var(--a-ink-2);margin-top:14px}
@media(max-width:734px){
.a-bios{grid-template-columns:1fr}
.a-photo img{aspect-ratio:4/3}
.a-doc-sec{margin-bottom:36px}
}
/* ══ a bullet list inside a tile — 2026-09-05 ════════════════════════════
Same marks and rhythm as .a-inc, but tile padding rather than column
padding. ⚠ RANGED LEFT, and that is not a break with "centre
everything": the copy rule has always excepted bullet lists, because a
centred list has no common left edge for the eye to run down. */
.a-tile ul{list-style:none;margin:14px 0 0;padding:0;text-align:left}
.a-tile li{font-size:15px;line-height:1.4667;letter-spacing:-.016em;color:var(--a-ink-2);
padding-left:18px;position:relative;margin-bottom:11px}
.a-tile li:last-child{margin-bottom:0}
.a-tile li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
border-radius:50%;background:var(--accent)}
.a-tile li b{color:var(--a-ink);font-weight:600}
/* ══ enquiry form — /custom.html, 2026-09-05 ═════════════════════════════
The only form in this layer, and the only place on an `ap` page anybody
types anything.
⚠ THE FIELDS ARE RANGED LEFT INSIDE A CENTRED BLOCK, deliberately. A
label centred over its own box reads as a caption rather than as an
instruction, and the eye loses the left edge it fills a form down. The
heading above and the note below are still centred like everything else.
⚠ THE FOCUS RING IS THE ACCENT AND MUST STAY. Clearing an outline
without replacing it is how a keyboard user loses their place on a page.
⚠ 16px ON THE INPUTS IS NOT A TYPO. iOS Safari zooms the whole page in
on focus for anything smaller, and it does not zoom back out. */
.a-form{max-width:560px;margin:44px auto 0;text-align:left;display:grid;gap:20px}
.a-form-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.a-field label{display:block;font-size:14px;font-weight:600;letter-spacing:-.016em;
color:var(--a-ink);margin-bottom:8px}
.a-field input,.a-field textarea{width:100%;font-family:var(--a-font);font-size:16px;
line-height:1.45;letter-spacing:-.016em;color:var(--a-ink);background:#fff;
border:1px solid var(--a-hair);border-radius:12px;padding:13px 15px;
transition:border-color .15s ease,box-shadow .15s ease}
.a-field textarea{min-height:132px;resize:vertical;display:block}
.a-field input::placeholder,.a-field textarea::placeholder{color:var(--a-ink-2);opacity:1}
.a-field input:focus,.a-field textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-wash)}
.a-form .a-btn{width:100%;cursor:pointer}
.a-form .a-btn[disabled]{opacity:.55;cursor:default}
.a-form-note{font-size:13.5px;line-height:1.5;letter-spacing:-.016em;
color:var(--a-ink-2);margin:0;text-align:center}
.a-form-err{display:none;font-size:14px;line-height:1.45;letter-spacing:-.016em;
color:#B0203A;background:#FDF2F4;border-radius:12px;padding:12px 15px;margin:0}
.a-done{display:none;max-width:560px;margin:44px auto 0;background:var(--accent-wash);
border-radius:var(--a-r);padding:38px 32px;text-align:center}
@media(max-width:734px){ .a-form-2{grid-template-columns:1fr} }