- , so
the order is real semantics, not a drawn number — the numeral badges are
aria-hidden. Colour discipline: navy carries the journey, ORANGE marks
only the active (hovered/focused) step and the closing highlight.
Desktop: one row on a progress line. 1180px: three across, no line
(a line across wrapped rows would lie about the order). 980px: two.
860px: a vertical timeline — nothing to swipe, nothing to scroll
sideways, every step readable in place.
=================================================================== */
.journey {
position: relative;
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4);
}
/* the progress line, drawn from the first node's centre to the last */
.journey::before {
content: ""; position: absolute; z-index: 0;
top: 27px; left: 10%; right: 10%; height: 2px;
background: var(--line);
}
.journey-step {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.journey-node {
position: relative;
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center;
background: var(--navy); color: #fff;
margin-bottom: var(--s-4);
transition: background-color 0.18s ease;
}
.journey-ico { width: 26px; height: 26px; display: block; }
.journey-num {
position: absolute; top: -3px; right: -5px;
width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center;
background: #fff; color: var(--navy);
border: 2px solid var(--navy);
font-size: var(--fs-small); font-weight: 700; line-height: 1;
transition: border-color 0.18s ease, color 0.18s ease;
}
.journey-step h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.journey-step p {
color: var(--muted); font-size: 0.95rem; line-height: 1.5;
margin: 0 0 0.35rem; max-width: 30ch;
}
.journey-link {
display: inline-flex; align-items: center; gap: 0.3rem;
min-height: var(--tap); font-weight: 600; font-size: var(--fs-small);
margin-top: auto; /* grid items stretch, so the links line up across steps
however many lines a heading takes */
}
/* ORANGE, used only here: the step the reader is on */
.journey-step:hover .journey-node,
.journey-step:focus-within .journey-node { background: var(--orange-ink); }
.journey-step:hover .journey-num,
.journey-step:focus-within .journey-num { border-color: var(--orange-ink); color: var(--orange-ink); }
.journey-close {
margin: var(--s-7) 0 0; padding-left: var(--s-4);
border-left: 3px solid var(--orange); /* the one highlight */
font-size: 1.1875rem; font-weight: 600; color: var(--navy);
}
@media (max-width: 1180px) {
.journey { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); }
.journey::before { display: none; }
}
@media (max-width: 980px) {
.journey { grid-template-columns: repeat(2, 1fr); }
}
/* Below 700px the journey becomes a vertical timeline. It gets its own
breakpoint rather than riding the shared 860px collapse, because a 768px
tablet should still read as a grid of steps, not a single file. */
@media (max-width: 700px) {
/* vertical timeline: the line runs down through the nodes, content beside
them. No carousel, so nothing has to be swiped precisely to be read. */
.journey { grid-template-columns: 1fr; gap: var(--s-6); }
.journey::before {
display: block; top: 28px; bottom: 28px; left: 27px; right: auto;
width: 2px; height: auto;
}
.journey-step {
display: grid; grid-template-columns: 56px 1fr;
column-gap: var(--s-4); align-items: start; text-align: left;
}
.journey-node { grid-row: 1 / span 3; margin-bottom: 0; }
.journey-step p { max-width: none; }
.journey-close { margin-top: var(--s-6); }
}
/* ===================================================================
PRODUCT SHOWCASE (Phase 5, 2026-08-28)
An APG tabs widget over real app screenshots. Extends the existing
[role=tab] styling rather than replacing it. The keyboard behaviour
lives in assets/header.js, which every page already loads.
No carousel and nothing auto-rotates: a tab changes only when a person
asks it to.
=================================================================== */
.tabs {
display: flex; gap: var(--s-1); flex-wrap: wrap;
border-bottom: 1px solid var(--line); margin-bottom: var(--s-6);
}
.tabs [role="tab"] {
min-height: var(--tap); padding: 0 var(--s-4);
background: none; border: 0; border-bottom: 3px solid transparent;
font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
white-space: nowrap;
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] {
color: var(--blue); border-bottom-color: var(--blue);
}
.tour-panel {
display: grid; grid-template-columns: 1fr auto;
gap: var(--s-9); align-items: center;
}
.tour-panel[hidden] { display: none; }
.tour-panel:focus-visible { outline-offset: 6px; }
.tour-copy .status { margin: 0 0 var(--s-4); }
.tour-copy h3 { font-size: 1.5rem; margin-bottom: var(--s-4); }
/* the benefit points reuse the existing .ticks component; only the rhythm
and the muted colour differ here */
.tour-points { margin: 0 0 var(--s-5); gap: var(--s-3); }
.tour-points li { color: var(--muted); }
.tour-art { display: flex; justify-content: center; }
/* a shade smaller than the hero phone: the copy beside it is short, and a
623px column next to 340px of text leaves the panel looking half-empty.
Width only -- the height follows the image's own ratio, so nothing stretches. */
.tour-art .device { width: 250px; }
/* the labelled development state, at the same aspect as a real screenshot so
dropping the capture in later shifts nothing */
.shot-todo {
width: 250px; height: 541px; box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--s-2); text-align: center; padding: var(--s-5);
border: 2px dashed var(--line-strong); border-radius: 34px;
background: repeating-linear-gradient(135deg, var(--bg) 0 10px, var(--bg-soft) 10px 20px);
color: var(--muted);
}
.shot-todo strong { color: var(--ink); font-size: var(--fs-body); }
.shot-todo span { font-size: var(--fs-small); }
.shot-todo code {
font-size: var(--fs-small); background: #fff; color: var(--muted);
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 8px;
}
.tour-cta { margin: var(--s-8) 0 0; }
/* the panel swap gets one short cross-fade, and only if motion is welcome */
@media (prefers-reduced-motion: no-preference) {
.tour-panel { animation: tour-in 0.25s ease-out; }
}
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 980px) {
.tour-panel { grid-template-columns: 1fr; gap: var(--s-6); justify-items: start; }
.tour-art { width: 100%; }
}
/* Phones: one scrollable row of tabs with a visible cue that it scrolls --
a fade on the right edge plus a real scrollbar, so the overflow is never
a secret. The panel below is unaffected: no swiping needed to read it. */
/* Below 1180px the eight tabs no longer fit on one line. Rather than wrap
them into a second row, the list becomes one scrollable strip with a
VISIBLE cue that there is more: a fade on the right edge and a real
scrollbar. The panel below never scrolls sideways, so nothing important
needs a precise swipe to be read. */
@media (max-width: 1180px) {
.tabs {
flex-wrap: nowrap; overflow-x: auto; gap: 0;
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
-webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.tabs [role="tab"] { padding: 0 var(--s-3); }
}
@media (max-width: 860px) {
/* match the phone-frame width the hero already uses at this breakpoint, so
a captured tab and a pending one are the same size */
.shot-todo { width: 258px; height: 558px; border-radius: 30px; }
}
@media (max-width: 700px) {
.tour-copy h3 { font-size: 1.375rem; }
.tour-cta .btn { width: 100%; }
}
/* ===================================================================
FEATURE BENTO + USE CASES + TRUST (Phase 6, 2026-08-29)
Four capability groups in a bento grid, a three-way use-case chooser on
the same tabs widget the showcase uses, and seven trust cards. Every
trust claim restates /security -- nothing is asserted here that the site
does not already document.
=================================================================== */
/* align-items: start so each tile is its own height. Stretching them to a
common row height leaves a dead gap in whichever tile has the shorter
capability list, which is exactly what a bento should not look like. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr);
gap: var(--s-5); align-items: start; }
.bento-cell {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: var(--s-6);
}
.bento-cell.is-half { grid-column: span 3; }
.bento-cell.is-wide { grid-column: span 4; }
.bento-cell.is-narrow { grid-column: span 2; }
.bento-ico {
width: 44px; height: 44px; border-radius: var(--radius-sm);
display: grid; place-items: center; margin-bottom: var(--s-4);
background: var(--navy); color: #fff;
}
.bento-svg { width: 22px; height: 22px; display: block; }
.bento-cell h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.bento-cell > p { color: var(--muted); font-size: 0.95rem; margin-bottom: var(--s-4); }
/* the capabilities themselves: compact, scannable, still real text */
.bento-list {
list-style: none; margin: 0 0 var(--s-5); padding: 0;
display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.bento-list li {
font-size: var(--fs-small); color: var(--ink);
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: var(--radius-pill); padding: 5px 12px;
}
.bento-cell .btn-link { margin-top: auto; align-self: flex-start; }
/* ---- use-case chooser ---- */
.use-panel[hidden] { display: none; }
.use-panel { max-width: 62ch; }
.use-panel h3 { font-size: 1.375rem; margin-bottom: var(--s-4); }
.use-points { margin: 0 0 var(--s-5); gap: var(--s-3); }
.use-points li { color: var(--muted); }
/* .btn is inline-flex, so the space before the arrow collapses */
.use-panel .btn { gap: 0.4rem; }
@media (prefers-reduced-motion: no-preference) {
.use-panel { animation: tour-in 0.25s ease-out; }
}
/* ---- trust ---- */
.trust-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--s-5);
}
.trust-ico {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center; margin-bottom: var(--s-4);
background: var(--bg-soft); color: var(--navy); border: 1px solid var(--line);
}
.trust-svg { width: 21px; height: 21px; display: block; }
.trust-card h3 { font-size: 1.125rem; }
.trust-note {
margin: var(--s-6) 0 0; max-width: 70ch;
color: var(--muted); font-size: var(--fs-small);
}
@media (max-width: 1180px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-cell.is-half, .bento-cell.is-wide, .bento-cell.is-narrow { grid-column: span 1; }
}
@media (max-width: 700px) {
.bento { grid-template-columns: 1fr; gap: var(--s-4); }
.bento-cell { padding: var(--s-5); }
.trust-grid { grid-template-columns: 1fr; }
.use-panel .btn { width: 100%; }
}
/* ===================================================================
PRICING (Phase 7, 2026-08-29)
The monthly/yearly switch is a real
and the swap is done with :has() -- no JavaScript at all. Both prices
are always in the DOM, so if :has() is unsupported the reader sees both
figures rather than none, and a crawler indexes both either way.
=================================================================== */
.bill-toggle {
display: flex; align-items: center; justify-content: center; gap: var(--s-3);
margin: 0 0 var(--s-7); flex-wrap: wrap;
}
.bill-opt { font-weight: 600; color: var(--muted); }
.bill-opt b { color: var(--green-ink); font-weight: 700; font-size: var(--fs-small); }
.bill-switch {
position: relative; display: inline-flex; align-items: center;
min-height: var(--tap); padding: 0 var(--s-1); cursor: pointer;
}
.bill-switch input {
position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.bill-track {
width: 54px; height: 30px; border-radius: var(--radius-pill);
background: var(--line-strong); position: relative;
transition: background-color 0.16s ease;
}
.bill-track::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 24px; height: 24px; border-radius: 50%; background: #fff;
transition: transform 0.16s ease;
}
.bill-switch input:checked ~ .bill-track { background: var(--blue); }
.bill-switch input:checked ~ .bill-track::after { transform: translateX(24px); }
.bill-switch input:focus-visible ~ .bill-track {
outline: 3px solid var(--blue); outline-offset: 2px;
}
/* which of the two figures is on show */
body:has(#bill-yearly:checked) .p-monthly { display: none; }
body:has(#bill-yearly:not(:checked)) .p-yearly { display: none; }
body:has(#bill-yearly:not(:checked)) .bill-opt:first-of-type { color: var(--ink); }
body:has(#bill-yearly:checked) .bill-opt:last-of-type { color: var(--ink); }
/* ---- cards ---- */
.tier-blurb { color: var(--muted); font-size: 0.95rem; margin: 0.15rem 0 0.6rem; }
.tier .price { display: flex; align-items: baseline; }
.tier .per { min-height: 3.2em; }
.gst-note { font-size: var(--fs-small); color: var(--muted); margin: 0 0 var(--s-4); }
.tier-meta {
display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4);
}
.tier-meta span {
font-size: var(--fs-small); font-weight: 600; color: var(--navy);
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: var(--radius-pill); padding: 4px 11px;
}
.tier-trial {
font-size: var(--fs-small); color: var(--muted);
margin: 0 0 var(--s-4); padding-top: var(--s-3);
border-top: 1px solid var(--line);
}
.tier .btn { width: 100%; }
/* the two remaining plans, behind a native disclosure -- no JS, and the
summary carries its own aria-expanded */
.all-plans { margin-top: var(--s-6); }
.all-plans > summary {
display: inline-flex; align-items: center; gap: 0.4rem;
min-height: var(--tap); padding: 0 var(--s-5);
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
font-weight: 600; color: var(--blue); cursor: pointer; list-style: none;
}
.all-plans > summary::-webkit-details-marker { display: none; }
.all-plans > summary::after {
content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
.all-plans[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.all-plans > summary:hover { background: var(--bg-soft); }
.tiers.two { grid-template-columns: repeat(2, 1fr); margin-top: var(--s-5); }
/* ---- comparison table ---- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare caption { text-align: left; padding: var(--s-4) var(--s-5); color: var(--muted); font-size: var(--fs-small); }
.compare th, .compare td { padding: var(--s-3) var(--s-4); text-align: center; border-top: 1px solid var(--line); }
.compare thead th { background: var(--bg-soft); font-size: var(--fs-small); white-space: nowrap; }
.compare tbody th { text-align: left; font-weight: 600; font-size: 0.95rem; }
.compare td { color: var(--muted); font-size: 0.95rem; }
.compare td.yes { color: var(--green-ink); font-weight: 700; }
.compare tbody tr:nth-child(odd) { background: #FBFCFE; }
/* ---- sticky mobile CTA ---- */
.sticky-cta { display: none; }
@media (max-width: 860px) {
.sticky-cta {
display: flex; align-items: center; gap: var(--s-4);
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
padding: var(--s-3) var(--gutter);
padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid var(--line);
box-shadow: 0 -2px 16px rgb(23 32 51 / 0.10);
}
.sticky-plan { flex: 1; font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }
.sticky-plan b { display: block; color: var(--ink); font-size: 1rem; }
.sticky-cta .btn { flex: 0 0 auto; }
/* room so the bar never covers the last thing on the page */
body:has(.sticky-cta) footer { padding-bottom: 84px; }
}
/* the round button overlaps the last line of the footer on a phone unless
the footer makes room for it */
@media (max-width: 700px) {
body:has(.support-fab):not(:has(.sticky-cta)) footer { padding-bottom: 84px; }
}
@media (max-width: 980px) {
.tiers.two { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.bill-toggle { gap: var(--s-2); }
.tier .per { min-height: 0; }
.all-plans > summary { width: 100%; justify-content: center; }
}
/* ===================================================================
CREDIBILITY (Phase 8, 2026-08-29)
Two verified facts about who builds this, three routes to check us out,
and one plain disclaimer. Nothing here is a badge, a seal or a number.
The testimonial fields below (.quote-face, .quote-who, .quote-type,
.quote-source) extend the existing .quote-card for the day a real,
consented customer story exists. They are dormant on purpose: see
website/TESTIMONIALS.md. Never populate them with invented praise.
=================================================================== */
.cred { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.cred-point {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: var(--s-6);
}
.cred-ico {
width: 44px; height: 44px; border-radius: var(--radius-sm);
display: grid; place-items: center; margin-bottom: var(--s-4);
background: var(--navy); color: #fff;
}
.cred-svg { width: 22px; height: 22px; display: block; }
.cred-point h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.cred-point p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.cred-links {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
margin-top: var(--s-6);
}
.cred-link {
display: block; padding: var(--s-4) var(--s-5);
border: 1px solid var(--line); border-radius: var(--radius);
background: #fff; color: var(--ink);
}
.cred-link:hover { border-color: var(--blue); text-decoration: none; }
.cred-link b { display: block; color: var(--blue); margin-bottom: 0.15rem; }
.cred-link span { font-size: var(--fs-small); color: var(--muted); }
.cred-note {
margin: var(--s-6) 0 0; max-width: 78ch;
font-size: var(--fs-small); color: var(--muted);
}
.cred-note b { color: var(--ink); }
/* dormant testimonial fields -- see the header comment */
.quote-card figcaption { display: flex; align-items: center; gap: var(--s-3); }
.quote-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.quote-who { display: block; }
.quote-who > span { display: block; }
.quote-type {
font-size: var(--fs-small); font-weight: 600; color: var(--navy);
background: var(--bg); border: 1px solid var(--line);
border-radius: var(--radius-pill); padding: 2px 9px;
display: inline-block; margin-top: 4px;
}
.quote-source { margin: var(--s-4) 0 0; font-size: var(--fs-small); }
@media (max-width: 980px) {
.cred-links { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.cred { grid-template-columns: 1fr; gap: var(--s-4); }
.cred-point { padding: var(--s-5); }
}
/* ===================================================================
FOOTER + CONVERSION (Phase 9, 2026-08-29)
Six link groups beside the brand block, a floating support button that
is a
(so it can never open by itself), and a sticky mobile
bar. The button is kept clear of the sticky bar and of the open nav
drawer, and is left off /contact entirely -- a bottom-right button over
a long form is the thing that must not happen.
=================================================================== */
.footer-top { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-9); }
.footer-brand h2 { font-size: 1.25rem; }
.footer-brand p { font-size: 0.95rem; }
.footer-contact { font-style: normal; display: grid; gap: 0.3rem; margin: var(--s-4) 0 0; }
.footer-contact span { color: inherit; }
.footer-apps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); }
.footer-links h2 { font-size: 1rem; }
.footer-bottom {
margin-top: var(--s-8); padding-top: var(--s-5);
border-top: 1px solid rgb(255 255 255 / 0.14);
display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
justify-content: space-between;
}
.footer-bottom .fine { margin: 0; }
/* ---- floating support button ---- */
.support-fab { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 35; }
.support-fab > summary {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer; list-style: none;
background: var(--navy); color: #fff;
box-shadow: 0 4px 14px rgb(23 32 51 / 0.28);
}
.support-fab > summary::-webkit-details-marker { display: none; }
.support-fab > summary:hover { background: var(--blue-dark); }
.support-fab > summary svg { width: 26px; height: 26px; }
.support-fab[open] > summary { background: var(--blue-dark); }
/* an absolutely-positioned child escapes the closed
' content
hiding, so the panel has to be hidden explicitly -- without this it sits
open on every page */
.support-fab:not([open]) .support-menu { display: none; }
.support-menu {
position: absolute; right: 0; bottom: calc(56px + var(--s-3));
width: max-content; min-width: 224px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-lg); padding: var(--s-2);
}
.support-menu p {
margin: 0; padding: var(--s-2) var(--s-3);
font-size: var(--fs-small); font-weight: 700; color: var(--muted);
}
.support-menu a {
display: block; min-height: var(--tap); line-height: var(--tap);
padding: 0 var(--s-3); border-radius: var(--radius-sm);
color: var(--ink); font-weight: 600;
}
.support-menu a:hover { background: var(--bg-soft); text-decoration: none; }
/* it must never sit on top of the mobile drawer or the sticky bar */
body.nav-open .support-fab,
body.nav-open .sticky-cta { display: none; }
body:has(.sticky-cta) .support-fab { bottom: calc(var(--gutter) + 76px); }
/* ---- sticky bar: the two-button variant ---- */
.sticky-dual { gap: var(--s-3); }
.sticky-dual .btn { flex: 1 1 0; }
@media (max-width: 1180px) {
.footer-top { grid-template-columns: 260px 1fr; gap: var(--s-7); }
}
@media (max-width: 980px) {
.footer-top { grid-template-columns: 1fr; gap: var(--s-7); }
.footer-brand { max-width: 46ch; }
}
@media (max-width: 700px) {
.footer-links { grid-template-columns: repeat(2, 1fr); }
.footer-apps .btn { flex: 1 1 auto; }
.support-fab { right: var(--s-3); bottom: var(--s-3); }
/* less of the screen given to a floating control on a small phone */
.support-fab > summary { width: 48px; height: 48px; }
.support-fab > summary svg { width: 22px; height: 22px; }
.support-menu { bottom: calc(48px + var(--s-2)); }
body:has(.sticky-cta) .support-fab { bottom: calc(var(--s-3) + 76px); }
}
/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }
.faq summary {
cursor: pointer; font-weight: 600; list-style: none; position: relative;
padding-right: 2rem;
/* a 28px summary is under the 44px target the design system promises */
min-height: var(--tap); display: flex; align-items: center;
}
.faq summary::after {
content: "+"; position: absolute; right: 0.25rem; top: 50%;
transform: translateY(-50%); color: var(--brand); font-weight: 700;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0.6rem 0 0; }
/* --- pricing --- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.tier { display: flex; flex-direction: column; }
.tier .price { font-size: 2rem; font-weight: 800; margin: 0.4rem 0 0.1rem; }
.tier .per { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.45rem; flex: 1; }
.tier li { padding-left: 1.6rem; position: relative; font-size: 0.95rem; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--green-ink); font-weight: 700; }
.tier li.no { color: var(--muted); }
.tier li.no::before { content: "—"; color: var(--line); }
/* the emphasis ring is a shadow, not a thicker border: a 2px border made the
featured card's content start 1px lower, so its CTA no longer lined up
with its neighbours' */
.tier.featured {
border-color: var(--brand); position: relative;
box-shadow: 0 0 0 1px var(--brand), var(--shadow);
}
.tier .flag {
position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
background: var(--brand); color: #fff; font-size: var(--fs-small); font-weight: 700;
padding: 0.15rem 0.8rem; border-radius: 999px; white-space: nowrap;
}
/* --- download page --- */
.dl-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: start; }
.version-pill {
display: inline-flex; gap: 0.5rem; align-items: center;
background: var(--bg-soft); color: var(--brand-dark);
border: 1px solid var(--line); border-radius: 999px;
padding: 0.3rem 0.9rem; font-size: 0.9rem; font-weight: 600;
}
.form-grid { display: grid; gap: 0.9rem; }
.form-grid label { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; }
.form-grid .hint { font-weight: 400; color: var(--muted); }
.form-grid input {
font: inherit; padding: 0.6rem 0.8rem; min-height: var(--tap);
border: 1px solid var(--line-strong); border-radius: var(--radius-sm); width: 100%;
}
.form-grid input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.consent { display: flex; gap: 0.6rem; align-items: start; font-size: 0.88rem; color: var(--muted); font-weight: 400; }
.consent input { width: auto; margin-top: 0.25rem; }
.form-error { background: #FEECEC; color: var(--red); border: 1px solid #F7C9C9; border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: var(--fs-small); }
.dl-success { text-align: center; }
.dl-success .qr { margin: 1.25rem auto; width: 168px; }
.dl-success .qr img, .dl-success .qr canvas { border: 8px solid #fff; box-shadow: var(--shadow); border-radius: 8px; }
.note { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: 0.92rem; color: var(--muted); }
.install-steps { padding-left: 1.2rem; color: var(--muted); font-size: 0.95rem; }
.install-steps li { margin-bottom: 0.5rem; }
.hidden { display: none; }
/* --- legal pages --- */
.legal { max-width: 780px; }
.legal h2 { margin-top: 2.25rem; font-size: 1.25rem; }
.legal p, .legal li { color: var(--ink); }
.legal .updated { color: var(--muted); font-size: 0.9rem; }
/* --- breadcrumbs, prose articles, TOC (2026-08 SEO redesign) --- */
.breadcrumbs { background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: var(--fs-small); padding: 0.5rem 0; color: var(--muted); }
.breadcrumbs a {
color: var(--muted); display: inline-flex; align-items: center;
min-height: var(--tap);
}
.breadcrumbs b { color: var(--ink); font-weight: 600; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.tier .was { min-height: 1.4rem; font-size: 0.92rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.tier .was s, .tier .per s { color: var(--muted); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.tier .offer { background: #E7F6EE; color: var(--green-ink); font-size: var(--fs-small); font-weight: 700; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap; }
.addons { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.95rem; max-width: 900px; }
/* the partner band's secondary link was a 24px target */
.partner-band .more {
display: inline-flex; align-items: center; min-height: var(--tap);
}
.partner-band { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 1.5rem; align-items: center; margin-top: 1.5rem; background: var(--bg-soft); }
.partner-band .eyebrow { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-dark); }
.partner-band h3 { margin: 0.3rem 0 0.5rem; }
.partner-band p { margin: 0; color: var(--muted); }
.partner-cta { display: grid; gap: 0.6rem; justify-items: start; }
.partner-cta .more { font-size: 0.92rem; }
.form-grid select, .form-grid textarea {
font: inherit; padding: 0.6rem 0.8rem; min-height: var(--tap);
border: 1px solid var(--line-strong); border-radius: var(--radius-sm); width: 100%; background: #fff;
}
.form-grid select:focus-visible, .form-grid textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.checklist li { padding-left: 1.6rem; position: relative; font-size: 0.95rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--green-ink); font-weight: 700; }
.badge { display: inline-block; background: var(--bg-soft); color: var(--brand-dark); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.8rem; font-size: var(--fs-small); font-weight: 600; }
.updated { color: var(--muted); font-size: 0.9rem; }
.prose { max-width: 780px; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-soft); }
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.95rem; }
.toc ol { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.callout { background: var(--bg-soft); border-left: 4px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin: 1.25rem 0; }
.callout p:last-child { margin-bottom: 0; }
/* --- GST calculator --- */
.calc { max-width: 560px; }
.calc .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.calc .slabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.3rem 0 0.6rem; }
.calc .slabs button { font: inherit; min-height: var(--tap); padding: 0.4rem 1.1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; font-weight: 600; }
.calc .slabs button.on { border-color: var(--brand); background: var(--bg-soft); color: var(--brand-dark); }
.calc .seg { display: flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.calc .seg button { flex: 1; font: inherit; min-height: var(--tap); padding: 0.55rem; border: 0; background: #fff; cursor: pointer; font-weight: 600; color: var(--ink); }
.calc .seg button.on { background: var(--brand); color: #fff; }
.calc-result { margin-top: 1.25rem; }
.calc-result table { width: 100%; border-collapse: collapse; }
.calc-result td { padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--line); }
.calc-result td:last-child { text-align: right; font-weight: 700; }
.calc-result tr.total td { font-size: 1.1rem; color: var(--brand-dark); }
/* --- CTA band + footer --- */
.cta-band { background: var(--brand-deep); color: #e5edf9; text-align: center; padding: 3.5rem 0; }
.cta-band h2 { color: #fff; }
.cta-band .btn { background: #fff; color: var(--brand-deep); margin-top: 0.75rem; }
.cta-band .btn:hover { background: #e5edf9; }
.site-footer { background: #0b1220; color: #94a3b8; padding: 2.75rem 0 2rem; font-size: 0.92rem; }
.site-footer h2 { color: #e2e8f0; margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.3; letter-spacing: 0; }
/* 0.15rem of padding left these at 29px; footer links are navigation, not
prose, so they get a real target */
.site-footer a {
color: #94a3b8; display: flex; align-items: center;
min-height: var(--tap); padding: 0.15rem 0;
}
.site-footer a:hover { color: #fff; }
/* .btn.ghost is coloured for a white page; on the dark footer it read
at 2.27:1. Light text on the dark ground instead. */
.site-footer .btn.ghost {
color: #e2e8f0; border-color: #47546b; min-height: var(--tap);
}
.site-footer .btn.ghost:hover {
background: rgb(255 255 255 / 0.07); border-color: #94a3b8; color: #fff;
}
.site-footer .fine { border-top: 1px solid #1e293b; padding-top: 1.25rem; font-size: var(--fs-small); }
.site-footer .footer-contact { margin-top: 0.9rem; }
/* full brand lockup (logo.png master -> logo-full.webp) */
.brand-logo { display: block; margin: 0 auto 1.25rem; max-width: 100%; height: auto; }
/* ===================================================================
DESIGN SYSTEM COMPONENTS (Phase 1, 2026-08-28)
Everything above this line predates the system and now consumes its
tokens. Everything below is new and shared. Docs: DESIGN-SYSTEM.md,
live examples: /styleguide.html
=================================================================== */
/* --- buttons: third variant (primary = .btn, outlined = .btn.ghost) --- */
.btn-link {
display: inline-flex; align-items: center; gap: 0.35rem;
min-height: var(--tap);
color: var(--brand); font-weight: 600; background: none; border: 0;
padding: 0 0.15rem; font-size: 1rem; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.btn[disabled], .btn-link[disabled] { opacity: 0.55; cursor: not-allowed; }
/* --- section heading --- */
.section-head .eyebrow {
display: block; font-size: var(--fs-small); font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand);
margin-bottom: var(--s-2);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* --- feature card (a .card with an icon slot and optional link) --- */
.card h3 { margin-bottom: var(--s-2); }
.card .card-link { display: inline-block; margin-top: var(--s-3); font-weight: 600; }
/* --- testimonial card ---
USE ONLY with a real, attributed quote from a real customer who agreed.
Never ship this with invented praise. */
.quote-card {
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: var(--radius); padding: var(--s-6);
}
.quote-card blockquote { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
.quote-card figcaption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--muted); }
.quote-card figcaption b { color: var(--ink); display: block; font-size: 1rem; }
/* --- trust badge ---
USE ONLY for certifications/registrations actually held. No fake seals. */
.trust {
display: inline-flex; align-items: center; gap: var(--s-2);
border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: var(--s-2) var(--s-3); background: #fff;
font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}
.trust img, .trust svg { height: 22px; width: auto; }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* --- status badge (distinct from the neutral .badge pill) --- */
.status {
display: inline-flex; align-items: center; gap: 0.35rem;
border-radius: var(--radius-pill); padding: 0.15rem 0.7rem;
font-size: var(--fs-small); font-weight: 700; border: 1px solid transparent;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.is-ok { background: #E7F6EE; color: var(--green-ink); border-color: #C6E8D5; }
.status.is-warn { background: #FDF3E3; color: var(--amber-ink); border-color: #F5DFB4; }
.status.is-error { background: #FEECEC; color: var(--red); border-color: #F7C9C9; }
.status.is-info { background: var(--bg-soft); color: var(--brand-dark); border-color: var(--line); }
/* --- accordion (the FAQ pattern, generalised; native
, no JS) --- */
.accordion details { border-bottom: 1px solid var(--line); padding: var(--s-4) 0; }
.accordion summary {
min-height: var(--tap); align-items: center;
cursor: pointer; font-weight: 600; list-style: none; position: relative;
padding-right: var(--s-7); min-height: var(--tap); display: flex; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: "+"; position: absolute; right: 0.25rem; color: var(--brand);
font-weight: 700; font-size: 1.25rem;
}
.accordion details[open] summary::after { content: "–"; }
.accordion details > *:not(summary) { color: var(--muted); margin: var(--s-3) 0 0; }
/* --- tabs ---
Markup carries the ARIA roles so it is accessible; a few lines of JS
toggle aria-selected / hidden. Styling only lives here. */
[role="tablist"] {
display: flex; gap: var(--s-1); flex-wrap: wrap;
border-bottom: 1px solid var(--line); margin-bottom: var(--s-5);
}
[role="tab"] {
min-height: var(--tap); padding: 0 var(--s-4);
background: none; border: 0; border-bottom: 3px solid transparent;
font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
}
[role="tab"]:hover { color: var(--ink); }
[role="tab"][aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
[role="tabpanel"][hidden] { display: none; }
/* --- modal: native