/* Both typefaces are under the SIL Open Font License and served from here, so the site calls no one else. */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

/* Light only, whatever the visitor's system is set to (Matt, 14 Nov 2026): the pictures are all of light pages. */
:root { color-scheme: light; --edge: #14161a; --bg: #ffffff; --fg: #14161a; --soft: #555b66; --line: #14161a; --faint: #e6e8ec; --panel: #f3f5f8; --accent: #1f5eff; --button: #ffc93c; --button-fg: #14161a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 18px/1.55 "IBM Plex Sans", sans-serif; }
main, header, footer { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.home main, .home header, .home footer { max-width: 1000px; }
header { display: flex; align-items: center; gap: 10px; padding-top: 24px; padding-bottom: 24px; }
header img { width: 28px; height: 28px; }
header a { color: inherit; text-decoration: none; font-weight: 600; }
header nav { margin-left: auto; display: flex; gap: 24px; font-size: 16px; }
header nav a { font-weight: 400; color: var(--soft); }
h1, h2, h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(34px, 6vw, 48px); margin: 24px 0 16px; }
h2 { font-size: clamp(28px, 5vw, 38px); margin: 96px 0 12px; }
h3 { font-size: 22px; margin: 0 0 6px; letter-spacing: -0.01em; }
p, li { color: var(--soft); }
strong { color: var(--fg); font-weight: 600; }
a { color: var(--accent); }
code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--faint); padding: 1px 5px; border-radius: 4px; }
footer { border-top: 1px solid var(--faint); margin-top: 96px; padding-top: 20px; padding-bottom: 48px; font-size: 14px; color: var(--soft); }

/* Home: the opening is centred, like a product box: icon, name, one sentence. */
.hero { text-align: center; padding: 40px 0 24px; }
.hero img { width: 120px; height: 120px; }
.hero h1 { font-size: clamp(44px, 9vw, 76px); margin: 20px 0 12px; }
.hero p { font-size: clamp(19px, 3vw, 23px); max-width: 580px; margin: 0 auto; }
.button { display: inline-block; margin-top: 28px; padding: 12px 22px; background: var(--button); color: var(--button-fg); font-weight: 600; border: 2px solid var(--button-fg); border-radius: 8px; box-shadow: 0 4px 0 var(--button-fg); }
.hero small { display: block; margin-top: 16px; font-size: 15px; color: var(--soft); }

/* Screenshots sit in little windows. */
.windows { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
figure { margin: 0; border: 2px solid var(--edge); border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: 0 6px 0 var(--edge); }
figcaption { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 15px; font-weight: 600; color: var(--fg); border-bottom: 2px solid var(--edge); }
figcaption::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--edge); background: var(--button); }
figure img { width: 100%; height: auto; display: block; }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.three p { margin: 0; font-size: 17px; }
.narrow { max-width: 640px; }
table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 17px; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--faint); vertical-align: top; }
th { font-weight: 600; }
td { color: var(--soft); }
td:first-child { color: var(--fg); }

@media (max-width: 760px) { .windows, .three { grid-template-columns: 1fr; }  header nav { gap: 16px; font-size: 15px; } }

/* Features page: each feature has a coloured pane with a real capture and a part of it shown bigger. */
.feature { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; margin-top: 96px; }
.feature h2 { margin-top: 0; }
.feature:nth-of-type(odd) { grid-template-columns: 520px 1fr; }
.feature:nth-of-type(odd) .pane { order: -1; }
h2.next { margin-top: 128px; }
.pane { position: relative; height: 420px; border: 2px solid var(--edge); border-radius: 14px; box-shadow: 0 6px 0 var(--edge); overflow: hidden; color: #14161a; }
.pane.small { height: 280px; }
.pane.yellow { background: #ffc93c; } .pane.blue { background: #8fb0ff; } .pane.pink { background: #ffb3c7; } .pane.green { background: #b4e3a0; }
.pane > * { position: absolute; margin: 0; }
.pane .page, .pane .crop { border-radius: 4px; background: #fff; }
.pane .crop { overflow: hidden; border: 2px solid #14161a; }
.pane .crop img { display: block; }
.ring { border: 3px solid #14161a; border-radius: 6px; }
.ring.fill { background: rgba(255, 201, 60, .45); }
.tag { background: #14161a; color: #fff; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.callout { background: #fff; border: 2px solid #14161a; border-radius: 10px; box-shadow: 6px 6px 0 #14161a; overflow: hidden; }
.layers { list-style: none; padding: 8px 0; font-size: 14px; line-height: 30px; }
.layers li { padding-left: 34px; color: #14161a; white-space: nowrap; background: no-repeat 14px 50% / 10px 10px linear-gradient(#9747ff, #9747ff); }
.layers .in1 { padding-left: 54px; background-position-x: 34px; } .layers .in2 { padding-left: 74px; background-position-x: 54px; }
.layers .text { background-image: none; color: #555b66; }
.layers .on { background-color: #efe5ff; font-weight: 600; }
.instance { position: absolute; border: 2px solid #9747ff; border-radius: 10px; }
.props { padding: 12px 14px; font-size: 14px; }
.props > dt { font-weight: 600; font-size: 16px; color: #9747ff; margin-bottom: 6px; }
.props div { display: flex; justify-content: space-between; line-height: 28px; } .props div dt { color: #555b66; } .props dd { margin: 0; color: #14161a; }
.props .from { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e6e8ec; font-size: 13px; color: #555b66; }
.report { font-size: 14px; margin: 0; border-collapse: separate; } .report td { padding: 10px 14px; color: #14161a; } .report td:first-child { font-weight: 600; white-space: nowrap; } .report tr:last-child td { border-bottom: 0; }
.state { width: 200px; border-width: 2px; border-radius: 8px; box-shadow: 4px 4px 0 #14161a; background: #fff; } .state figcaption { border: 0; border-top: 2px solid #14161a; padding: 4px 8px; font-size: 13px; color: #14161a; order: 2; } .state figcaption::before { display: none; }
@media (max-width: 760px) { .feature, .feature:nth-of-type(odd) { grid-template-columns: 1fr; gap: 24px; } .feature .pane { order: 0 !important; } }

.scroll { overflow-x: auto; }
.note { font-size: 14px; }

/* Home: the two screenshots on a coloured stage, small panes over the three features, and the route a copy takes. */
.stage { position: relative; margin-top: 48px; padding: 64px 40px 72px; background: #8fb0ff; border: 2px solid var(--edge); border-radius: 18px; box-shadow: 0 6px 0 var(--edge); }
.stage .windows { margin-top: 0; }
.stage figure { border-color: #14161a; box-shadow: 6px 6px 0 #14161a; transform: rotate(-1.5deg); }
.stage figure + figure { transform: rotate(1.5deg) translateY(14px); }
.stage figcaption { border-color: #14161a; }
.arrow { position: absolute; top: 10px; left: 50%; width: 120px; margin-left: -60px; fill: none; stroke: #14161a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.toast { position: absolute; left: 9%; bottom: 26px; padding: 10px 18px; background: #14161a; color: #fff; font-size: 17px; border-radius: 8px; box-shadow: 5px 5px 0 #ffc93c; transform: rotate(-3deg); }
.pane.mini { height: 170px; margin-bottom: 20px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.flow span { padding: 8px 16px; border: 2px solid var(--line); border-radius: 8px; box-shadow: 0 4px 0 var(--line); font-weight: 600; }
.flow i { font-style: normal; font-size: 22px; }
.flow .none { margin-left: 24px; border-style: dashed; box-shadow: none; color: var(--soft); text-decoration: line-through; }
.flow small { color: var(--soft); font-size: 15px; }
@media (max-width: 760px) { .stage { padding: 56px 16px 72px; } .flow .none { margin-left: 0; } }

/* Home, lower half: the comparison in a card with our column marked, then blocks of colour, so it isn't a run of headings and paragraphs. */
.block { border: 2px solid var(--edge); border-radius: 14px; box-shadow: 0 6px 0 var(--edge); color: #14161a; }
.block a { color: #1f5eff; }
/* The comparison: our column is a raised yellow card, and each answer is a mark with a few words. */
.scroll { padding: 28px 0 10px; }
.scroll .compare { margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 860px; font-size: 15px; }
.compare th, .compare td { padding: 16px 14px; border-bottom: 2px dashed var(--faint); vertical-align: top; color: var(--soft); }
.compare tr:first-child th { font: 700 20px/1.1 "Bricolage Grotesque", sans-serif; color: var(--fg); vertical-align: bottom; border-bottom: 0; }
.compare th[scope] { width: 190px; padding-left: 0; font-size: 16px; color: var(--fg); }
.compare tr:last-child > * { border-bottom: 0; }
.compare .us { position: relative; background: #ffc93c; color: #14161a; font-weight: 600; border-left: 2px solid #14161a; border-right: 2px solid #14161a; border-bottom-color: rgba(20, 22, 26, .25); }
.compare tr:first-child .us { padding-top: 30px; color: #14161a; border-top: 2px solid #14161a; border-radius: 14px 14px 0 0; }
.compare .us.last { border-bottom: 2px solid #14161a; border-radius: 0 0 14px 14px; box-shadow: 0 6px 0 #14161a; }
.sticker { position: absolute; top: -14px; left: 12px; font: 600 13px/1.6 "IBM Plex Sans", sans-serif; transform: rotate(-6deg); }
.b { display: block; width: 30px; height: 30px; margin-bottom: 8px; border: 2px solid #14161a; border-radius: 50%; color: #14161a; font: 700 17px/26px "IBM Plex Sans", sans-serif; text-align: center; }
.b.yes { background: #b4e3a0; } .b.yes::before { content: "\2713"; }
.b.no { background: #ffb3c7; } .b.no::before { content: "\00d7"; font-size: 21px; }
.b.half { background: #8fb0ff; } .b.half::before { content: "~"; }
.b.ask { background: #fff; } .b.ask::before { content: "?"; }
.us .b { background: #fff; } .us .b.no { background: #ffb3c7; }
.note { color: var(--soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 72px; }
.block { padding: 32px; } .block h2 { margin: 0 0 12px; font-size: 30px; } .block p, .block li { color: #14161a; margin: 0; }
.block.pink { background: #ffb3c7; } .block.green { background: #b4e3a0; } .block.yellow { background: #ffc93c; }
.wont { list-style: none; margin: 0; padding: 0; } .wont li { position: relative; padding-left: 30px; } .wont li + li { margin-top: 14px; }
.wont li::before { content: "\00d7"; position: absolute; left: 2px; top: -5px; font-size: 26px; font-weight: 600; }
.block .flow span { background: #fff; border-color: #14161a; box-shadow: 0 4px 0 #14161a; } .block .flow .none { margin-left: 0; background: none; box-shadow: none; color: #14161a; }
.closing { margin-top: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.chips a { padding: 8px 16px; background: #fff; color: #14161a; font-weight: 600; text-decoration: none; border: 2px solid #14161a; border-radius: 999px; box-shadow: 0 4px 0 #14161a; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* Home: why it exists. The drawing is a ship going from lines on paper, through bare ribs, to a built hull. */
.ship { position: relative; } .ship img { display: block; width: 100%; height: auto; } .ship .tag { position: absolute; }
.why { margin-top: 96px; }
.why h2 { margin-top: 28px; }
.why .cols { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; margin-top: 20px; align-items: start; }
.why .big { margin: 0; font: 700 clamp(30px, 5vw, 44px)/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; color: var(--fg); }
.why .cols div p { margin: 0 0 16px; }
.why + .closing { margin-top: 72px; }
@media (max-width: 760px) { .why .cols { grid-template-columns: 1fr; gap: 20px; } }
a.button { text-decoration: none; transition: transform .12s, box-shadow .12s; } a.button:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--button-fg); }
a.button span { display: inline-block; margin-left: 6px; transition: transform .12s; } a.button:hover span { transform: translateX(4px); }
.more { margin: 12px 0 0; text-align: center; }
.why .cols { margin-top: 36px; }

/* Phone width. The feature panes are laid out in fixed pixels for a 520px box, so below that they are shrunk whole. */
@media (max-width: 760px) {
  .feature .pane { width: 520px; max-width: none; margin: 0 auto; }
  .scroll::before { content: "Swipe sideways to see the other tools \2192"; display: block; position: sticky; left: 0; margin-bottom: 24px; font-size: 14px; color: var(--soft); }
  .flow { flex-direction: column; align-items: flex-start; gap: 6px; } .flow i { margin-left: 20px; transform: rotate(90deg); } .flow .none { margin-top: 10px; }
}
@media (max-width: 560px) { .feature .pane { zoom: .8; } }
@media (max-width: 456px) { .feature .pane { zoom: .67; } }
@media (max-width: 388px) { .feature .pane { zoom: .58; } }
@media (max-width: 342px) { .feature .pane { zoom: .5; } }