/* SideMinder — the public site
   ---------------------------
   The palette is the app's own, so a side that has looked at the demo and then
   comes back here is looking at the same thing. --navy, --bg, --paper, --ink
   and --ink-soft are lifted from `ticksheet-app/public/assets/app.css`; yes,
   no and maybe are the three answers the product exists to record and the
   reason the mark carries a tick, a cross and a question mark.

   The six accent colours are the six woven bars of the mark itself, read off
   `sideminder.svg`. They are the only colour this site adds, and they are not
   added - they were already in the corner of every page.

   FOURTH PASS, 19 September 2026: lighter again, and the name and the mark
   made the largest thing on the page rather than a 36px logo in a corner.
   Three things changed and the rest followed from them.

     1. The mark's six bars are drawn as an actual line - across the top of the
        sticky bar, at the head of a price card, under a section heading. The
        third pass had them only as tints behind icons, which is the mark's
        colour without the mark's shape.
     2. The brand is a LOCKUP, not a logo: mark and wordmark sized together,
        84px and 3rem in the hero, 40px and 1.4rem in the bar. A product whose
        whole pitch is "your side's name, not ours" has to be willing to say
        its own name once, loudly, in the one place it is allowed to.
     3. Everything structural got quieter to make room - lines paler, shadows
        wider and softer, radii larger, sections further apart. Lighter is not
        less colour; it is less WEIGHT, so the colour can be the loud part.

   Rewritten whole each pass rather than appended to, because three appended
   passes had already stopped reading top to bottom once. There is no build
   step. One stylesheet, hand-written. */

:root {
    --navy:        #0018a8;
    --navy-deep:   #001272;
    --navy-soft:   #e9ecfb;
    --navy-mid:    #c6cef0;

    --bg:          #f7f9fd;
    --paper:       #ffffff;
    --ink:         #17203a;
    --ink-soft:    #5a6480;
    --line:        #e8ecf6;
    --line-strong: #a3abc4;

    --yes:         #0018a8;
    /* The app's No is #79839c and Maybe #9c6a00, and both are right there and
       wrong here. The app walks its answer colours against #eef1fa - the
       alternate row, the darkest ground an answer is ever written on - and
       this site drew them on white until the illustrated sheet arrived with a
       striped row of its own. Measured on that stripe: #79839c was 3.79, the
       first correction #656f8a still only 4.43, and #9c6a00 4.16. Both are
       walked until they clear there, which makes them safe on white too. */
    --no:          #606a84;   /* 4.78:1 on the striped row, 5.40 on white */
    --maybe:       #8c5e00;   /* 5.00:1 on the striped row, 5.65 on white */
    --confirmed:   #1c7a44;   /* 5.36:1 carrying white */

    /* The six bars, as the mark draws them. Used as a line, and at low alpha
       as tints. */
    --b1: #00a6a0;   /* teal    */
    --b2: #0079c2;   /* blue    */
    --b3: #2b4bb5;   /* indigo  */
    --b4: #6a3fb5;   /* violet  */
    --b5: #9c31a8;   /* purple  */
    --b6: #c62a7e;   /* magenta */

    /* The mark's six bars, unrolled. In the logo they weave round a hexagon,
       each bar passing UNDER the next; here they zigzag along a line and do
       the same - every segment runs on past the vertex, and the one to its
       right is drawn over it, so of any two the right-hand end of the left
       one is under the left-hand end of the right one. The colours go pink
       to green and back, pink to green and back, never jumping, which is ten
       segments to a tile. Both were William's, 19 September: the first cut
       was a plain zigzag sharing vertices, which was the colours without the
       weave. 120 units wide, 12 high, repeated; the tile before's last
       segment is drawn first so the seam weaves like everywhere else.
       Inline SVG because a second request for 800 bytes is silly. */
    --weave: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M-14.2 1.08L2.2 10.92' stroke='%239c31a8'/%3E%3Cpath d='M-2.2 10.92L14.2 1.08' stroke='%23c62a7e'/%3E%3Cpath d='M9.8 1.08L26.2 10.92' stroke='%239c31a8'/%3E%3Cpath d='M21.8 10.92L38.2 1.08' stroke='%236a3fb5'/%3E%3Cpath d='M33.8 1.08L50.2 10.92' stroke='%232b4bb5'/%3E%3Cpath d='M45.8 10.92L62.2 1.08' stroke='%230079c2'/%3E%3Cpath d='M57.8 1.08L74.2 10.92' stroke='%2300a6a0'/%3E%3Cpath d='M69.8 10.92L86.2 1.08' stroke='%230079c2'/%3E%3Cpath d='M81.8 1.08L98.2 10.92' stroke='%232b4bb5'/%3E%3Cpath d='M93.8 10.92L110.2 1.08' stroke='%236a3fb5'/%3E%3Cpath d='M105.8 1.08L122.2 10.92' stroke='%239c31a8'/%3E%3C/g%3E%3C/svg%3E");
    --weave-h: 11px;

    /* The same six, deep enough to draw a 1.6px icon on the tint above and
       clear 3:1. Teal and blue are the two that had to move; the rest are
       already dark enough as the mark paints them. */
    --i1: #00726e;
    --i2: #005a91;
    --i3: #2b4bb5;
    --i4: #6a3fb5;
    --i5: #9c31a8;
    --i6: #a8226a;

    --measure:     66rem;
    --gutter:      1.15rem;
    --radius:      16px;
    --radius-lg:   24px;

    /* Wider and fainter than the third pass. A shadow that can be seen as a
       shadow is a border drawn badly; this one is only the lift. */
    --shadow:      0 1px 2px rgb(23 32 58 / .04), 0 18px 44px -26px rgb(23 32 58 / .22);
    --shadow-lg:   0 2px 4px rgb(23 32 58 / .04), 0 36px 72px -36px rgb(23 32 58 / .28);

    color-scheme: light dark;
}

/* Dark mode follows the system, as the app's does. The navy is lifted well
   clear of the ground, because #0018a8 on near-black is a link nobody over
   fifty can read - and half the people this is built for are over fifty. */
@media (prefers-color-scheme: dark) {
    :root {
        --navy:        #93a7ff;
        --navy-deep:   #b9c5ff;
        --navy-soft:   #1b2340;
        --navy-mid:    #2c3760;

        --bg:          #0f1320;
        --paper:       #171d2e;
        --ink:         #e8ebf5;
        --ink-soft:    #a5adc6;
        --line:        #29304c;
        --line-strong: #3d4870;

        --yes:         #93a7ff;
        --no:          #98a1ba;
        --maybe:       #e0aa3c;
        --confirmed:   #57c98a;

        /* On a dark ground the bars can be drawn as they are. */
        --i1: #3fd1cb; --i2: #4fb3ee; --i3: #8fa6ff;
        --i4: #b394f0; --i5: #d47ee0; --i6: #f07ab8;

        --shadow:    0 1px 2px rgb(0 0 0 / .3), 0 18px 44px -26px rgb(0 0 0 / .6);
        --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 36px 72px -36px rgb(0 0 0 / .7);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.68 system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--navy); }
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
    border-radius: 3px;
}

h1, h2, h3 { line-height: 1.14; color: var(--ink); margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.3rem); letter-spacing: -0.028em; font-weight: 750; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.4vw, 2.2rem); letter-spacing: -0.02em; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.008em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }
code {
    font-size: .92em;
    background: var(--navy-soft);
    color: var(--navy);
    padding: .08em .38em;
    border-radius: 6px;
}
img, picture { max-width: 100%; }
picture { display: block; }
picture img { display: block; width: 100%; height: auto; }

.skip {
    position: absolute; left: -9999px;
    background: var(--paper); color: var(--ink);
    padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

.visually-hidden, .sheet__sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- the bar ------------------------------------------------------------ */

/* White, not navy. The solid band was the single heaviest thing on the page,
   and the mark - nine flat colours - is the one thing here that is allowed to
   be loud. A white bar lets it be.

   The six bars of the mark run across the top of it as a 3px rule. It is the
   whole brand in three pixels, it is the first thing on the page, and it costs
   no vertical space worth counting. */
.bar {
    background: rgb(255 255 255 / .88);
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}
.bar::before {
    content: "";
    display: block;
    /* Room above and below the weave - 7px each side - so it sits in the bar
       rather than being the bar's top edge. William, 19 September. */
    height: calc(var(--weave-h) + 14px);
    background: var(--weave) repeat-x center;
    background-size: 120px var(--weave-h);
}
.bar__in {
    max-width: var(--measure);
    margin: 0 auto;
    padding: .62rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.4rem;
}
/* The lockup in the bar, on every page: the mark at 56px, the two-colour
   wordmark at 1.9rem and the credential under it. It was the home hero's;
   William liked it there and asked for it here instead, so the bar grew to
   carry it and the hero gave it up. Still one row beside the nav on a laptop. */
.bar__home {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink);
    text-decoration: none;
}
.bar__mark { display: block; flex: none; }
.bar__lock { display: flex; flex-direction: column; line-height: 1; }
.bar__word {
    font-size: 1.9rem;
    font-weight: 780;
    letter-spacing: -0.036em;
}
/* Two words in one, and the join is where the mark's magenta lands. Nothing
   clever: the second half takes the last bar of the weave, which is the only
   colour on the page that is already in the logo beside it. */
.bar__word b { font-weight: inherit; color: var(--i6); }
.bar__say {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: .38rem;
}
.bar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .2rem;
    margin-left: auto;
}
.bar__nav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: .42rem .8rem;
    border-radius: 999px;
    font-size: .96rem;
    font-weight: 500;
}
.bar__nav a:hover { color: var(--ink); background: var(--bg); }
.bar__nav a[aria-current="page"] {
    color: var(--navy);
    background: var(--navy-soft);
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .bar { background: rgb(23 29 46 / .88); }
}

/* ---- blocks ------------------------------------------------------------- */

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
/* A narrow section is not a narrower container - that would re-centre it and
   give the page two different left edges. The container stays put and its
   children are capped, so every heading starts on the same line down the left. */
.narrow > * { max-width: 44rem; }

section { padding: 4rem 0; }
.band { background: var(--bg); }

.lede {
    font-size: 1.25rem;
    color: var(--ink-soft);
    max-width: 36em;
    line-height: 1.58;
}

.kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--i4);
    background: color-mix(in srgb, var(--b4) 10%, transparent);
    padding: .3rem .78rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

/* A heading with the six bars under it, short. Used once or twice a page, not
   on every heading - a rule under everything is a rule under nothing. */
.ruled::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: var(--weave-h);
    background: var(--weave) repeat-x;
    background-size: 120px var(--weave-h);
    margin-top: .8rem;
}

/* The hero has a wash behind it: the teal, violet and magenta of the mark at
   a few percent, blurred into the paper. It is the lightest way to put the
   brand's colour on the page without a block of it. */
.hero {
    padding: 3.4rem 0 3.5rem;
    background:
        radial-gradient(62rem 32rem at 6% -14%,  color-mix(in srgb, var(--b1) 15%, transparent), transparent 62%),
        radial-gradient(52rem 30rem at 94% -4%,  color-mix(in srgb, var(--b4) 13%, transparent), transparent 62%),
        radial-gradient(42rem 28rem at 58% 112%, color-mix(in srgb, var(--b6) 8%,  transparent), transparent 62%),
        var(--paper);
}
/* 17em, not 15: at 15 the home headline dropped its last word onto a line of
   its own at 1280px, which is the one width most people will first see it at. */
.hero h1 { max-width: 17em; }
.hero .lede { font-size: 1.35rem; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.8rem;
}
/* A line under the buttons, like the price at the top of Home, would
   otherwise sit right against them: a paragraph has no top margin. */
.actions + p { margin-top: 1.2rem; }

.btn {
    display: inline-block;
    padding: .82rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--navy);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--go { background: var(--navy); color: var(--paper); box-shadow: 0 10px 24px -12px var(--navy); }
.btn--go:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--quiet { background: rgb(255 255 255 / .6); color: var(--navy); }
.btn--quiet:hover { background: var(--navy-soft); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: #fff; }

@media (prefers-color-scheme: dark) {
    .btn--go { color: var(--bg); }
    .btn--quiet { background: rgb(255 255 255 / .04); }
    .btn--light { color: #17203a; }
}

.two {
    display: grid;
    gap: .5rem 3rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    max-width: 54rem;
    font-size: 1.1rem;
}
.two h3 { margin-bottom: .4rem; }
.two p { color: var(--ink-soft); }
.two > div > p:last-child { margin-bottom: 0; }

.split {
    display: grid;
    gap: 2.4rem 3.5rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: center;
}
.split__text > * { max-width: 34rem; }
/* A split whose picture is not there yet. shot() returns nothing until a
   screenshot is on disk, and a two-column grid with one empty column is half a
   page of white space waiting for a file nobody has taken. The prose widens to
   the measure it would have had on its own. */
.split--alone { display: block; }
.split--alone .split__text > * { max-width: 44rem; }

/* ---- cards -------------------------------------------------------------- */

.cards {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Four cards in a three-wide grid leave one on its own underneath. 22rem is
   the smallest minimum at which three no longer fit in 62rem, so four go 2x2. */
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
/* No border. A card is a white shape lifted a little off the page, which is
   lighter than a line round a box and reads as one in both themes. */
.card {
    background: var(--paper);
    border-radius: var(--radius);
    padding: 1.4rem 1.45rem 1.5rem;
    box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-soft); margin: 0; }
.card__do { margin-top: .85rem !important; font-weight: 600; }

.card__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 13px;
    margin-bottom: .95rem;
    background: var(--navy-soft);
    color: var(--navy);
}
.ic { display: block; }

/* Six tints from the six bars, in the order the mark weaves them. A row of
   identical navy squares was the last blocky thing on the page. */
.t1 { background: color-mix(in srgb, var(--b1) 13%, transparent); color: var(--i1); }
.t2 { background: color-mix(in srgb, var(--b2) 13%, transparent); color: var(--i2); }
.t3 { background: color-mix(in srgb, var(--b3) 13%, transparent); color: var(--i3); }
.t4 { background: color-mix(in srgb, var(--b4) 13%, transparent); color: var(--i4); }
.t5 { background: color-mix(in srgb, var(--b5) 13%, transparent); color: var(--i5); }
.t6 { background: color-mix(in srgb, var(--b6) 13%, transparent); color: var(--i6); }

@media (prefers-color-scheme: dark) {
    .t1, .t2, .t3, .t4, .t5, .t6 { background: rgb(255 255 255 / .07); }
}

/* Other apps: a card each, with the app's own icon as it sits on a home
   screen, so somebody who has it installed knows it at a glance. A status sits
   beside the icon, so the names line up across a row whether a card has one or
   not. The names are h2s under the page's h1, at a card heading's size. */
.app__top {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}
.app__icon { display: block; flex: none; width: 4rem; height: 4rem; }
/* The phone screenshot sits at the foot of the card, pushed down so the three
   line up across a row however long the words above them are. */
.app { display: flex; flex-direction: column; }
.app .shot { margin: auto auto 0; padding-top: 1.5rem; width: 100%; max-width: 16rem; }
/* Two screenshots, StrikeCounter's floor display and its score, one above the
   other and each cropped to the part that matters, pushed down the same way.
   Side by side they were too small to read. */
.app__pair {
    margin: auto auto 0;
    padding-top: 1.5rem;
    width: 100%;
    max-width: 16rem;
    display: grid;
    gap: .75rem;
}
.app__pair .shot { margin: 0; padding: 0; max-width: none; }
.app__top .kicker { margin: 0; }
.app h2 { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: .4rem; }
.app p + p { margin-top: .7rem; }

/* A run of plain statements, each under its own heading, read in order. */
.run { margin: 0; padding: 0; }
.run > div {
    padding: 1.3rem 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0 1rem;
}
.run > div:first-child { border-top: 0; padding-top: .3rem; }
.run > div > h3, .run > div > p { grid-column: 2; }
.run h3 { margin-bottom: .35rem; }
.run p { color: var(--ink-soft); margin: 0 0 .7em; }
.run p:last-child { margin-bottom: 0; }
.run__ic {
    grid-row: span 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    margin-top: .1rem;
}

/* One gap, for the two places a block follows a picture rather than prose. */
.pushed { margin-top: 2.2rem; }

.note {
    background: color-mix(in srgb, var(--b3) 7%, var(--paper));
    border-left: 4px solid var(--b3);
    border-radius: 12px;
    padding: 1.05rem 1.25rem;
    max-width: 44rem;
}
.note :last-child { margin-bottom: 0; }

/* ---- what a side switches on -------------------------------------------- */

/* The seven parts a side chooses between, as a set of pills rather than a
   table. They are a menu, and a menu should look like a menu. */
.switches {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
}
.switches li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--paper);
    border-radius: 999px;
    padding: .5rem 1.05rem .5rem .75rem;
    font-weight: 600;
    font-size: .98rem;
    box-shadow: var(--shadow);
}
.switches li::before {
    content: "";
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    flex: none;
}
.switches li:nth-child(6n+1)::before { background: var(--b1); }
.switches li:nth-child(6n+2)::before { background: var(--b2); }
.switches li:nth-child(6n+3)::before { background: var(--b3); }
.switches li:nth-child(6n+4)::before { background: var(--b4); }
.switches li:nth-child(6n+5)::before { background: var(--b5); }
.switches li:nth-child(6n+6)::before { background: var(--b6); }

/* ---- photographs -------------------------------------------------------- */

/* .photo is either the <picture> itself or a <figure> round one with a
   caption under it. The rounded, lifted shape is the picture in both cases -
   a figure that clipped its own caption would be a picture with a line of
   text cut off underneath. */
.photo { margin: 0; }
picture.photo, .photo > picture {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg);
}
.photo img { object-fit: cover; }

/* The hero photograph is a 4:1 banner and at 390px that is 90px tall, which
   is a letterbox and not a picture. It is allowed to crop taller on a phone. */
.photo--hero { margin-top: 2.6rem; }
.photo--hero img { aspect-ratio: 3 / 1; }
@media (max-width: 40rem) {
    .photo--hero img { aspect-ratio: 16 / 9; }
}

.photo--side img { aspect-ratio: 4 / 3; }
/* For a 4:1 banner sitting in a half-width column: 2:1 keeps the sky and the
   silhouettes where 4:3 would crop the dawn photograph down to three heads. */
.photo--wide img { aspect-ratio: 2 / 1; }

figcaption {
    font-size: .86rem;
    color: var(--ink-soft);
    margin-top: .7rem;
    max-width: 40rem;
}

/* A caption says what the picture is, and nothing else. Who took it and on
   what terms is a real obligation for the Commons photographs and is met on
   /about#photographs, which the footer links from every page - William asked
   (19 September) that the line under a picture describe the picture rather
   than its provenance, and that is a fair split: the reader gets a caption,
   the photographer gets a credit page. */

/* A full-bleed strip of photograph between two sections. Its job is colour
   and pace, so it is short - a breath, not a hero. */
.strip { margin: 0; line-height: 0; }
.strip img {
    width: 100%;
    height: clamp(150px, 24vw, 280px);
    object-fit: cover;
    display: block;
}

/* Three photographs in a row, each its own shape, labelled underneath. */
.tiles {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    list-style: none;
    margin: 2.2rem 0 0;
    padding: 0;
}
.tiles figure { margin: 0; }
.tiles picture {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.tiles img { aspect-ratio: 4 / 3; object-fit: cover; }
.tiles figcaption { margin-top: .6rem; }
.tiles strong { color: var(--ink); font-size: .98rem; margin-right: .3rem; }

/* A section written over a photograph. The picture is an <img> inside rather
   than a CSS background, so it can carry srcset and alt like every other. */
.scene {
    position: relative;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}
.scene__img {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.scene__img img { width: 100%; height: 100%; object-fit: cover; }
.scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(10 14 40 / .74), rgb(10 14 40 / .58) 60%, rgb(10 14 40 / .8));
}
.scene h2, .scene h3, .scene p, .scene .lede { color: #fff; }
.scene .lede { color: rgb(255 255 255 / .86); }
.scene a:not(.btn) { color: #fff; }
.scene .ruled::after { background: rgb(255 255 255 / .55); }

/* ---- screenshots -------------------------------------------------------- */

/* A screenshot is a picture of a real interface and wants an edge, unlike a
   photograph, which is a picture of the world and does not. A hairline and a
   soft lift is the whole of it - no fake browser chrome, which is a lie about
   what you are looking at and one more thing to draw badly. */
.shot { margin: 2rem 0 0; max-width: 46rem; }
.shot__pic {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--paper);
}
.shot img { display: block; width: 100%; height: auto; }

/* A screenshot of a phone stands up rather than lying down. */
.shot--phone { max-width: 19rem; }

/* Several screenshots in a row, two up, each with its caption. The gallery
   is built from whatever shot() returned something for, so it is never a grid
   with a hole in it. */
.shots {
    display: grid;
    gap: 1.6rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-top: 2.4rem;
}
.shots .shot { margin: 0; max-width: none; }

/* ---- films of the demo -------------------------------------------------- */

/* A film is a screenshot that moves, and wears the same edge. It is 16 by 10,
   the computer's screen, which the walkthrough keeps when it turns to the
   phone. */
.film { margin: 2rem 0 0; max-width: 46rem; }
.film__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--paper);
}
.film__still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__v { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A part of the app with its film: its words beside the film on a wide
   screen, above it on a narrow one. Three cards to a row left each film too
   small to read, so a card with a film takes the whole row and the parts with
   nothing to film sit two to a row after them. */
.card--film {
    grid-column: 1 / -1;
    display: grid;
    gap: 1.2rem 2.2rem;
    align-items: center;
}
.card--film .film { margin: 0; max-width: none; }
@media (min-width: 52rem) {
    .card--film { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ---- the illustrated ticksheet ------------------------------------------ */

.sheet { margin: 2.25rem 0 0; max-width: 46rem; }

.sheet__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

/* table-layout: fixed so the six answer columns are equal. min-width is what
   makes it scroll on a phone rather than crushing to 25px a column. */
.sheet__t {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;
    table-layout: fixed;
    font-size: .95rem;
}
.sheet__t th, .sheet__t td { border-bottom: 1px solid var(--line); }
.sheet__t tbody tr:last-child th,
.sheet__t tbody tr:last-child td { border-bottom: 0; }

/* Soft navy on navy, not white on solid navy: the header row was the one
   remaining block of brand colour on the page. */
.sheet__t thead th {
    background: var(--navy-soft);
    color: var(--navy);
    font-weight: 650;
    padding: .65rem .5rem;
    text-align: center;
    font-size: .9rem;
    white-space: nowrap;
}
.sheet__t thead th.sheet__ev { text-align: left; padding-left: .9rem; }

.sheet__ev {
    width: 13rem;
    text-align: left;
    font-weight: 400;
    padding: .65rem .9rem;
    white-space: nowrap;
    /* Pinned, exactly as the real grid pins it. */
    position: sticky;
    left: 0;
    background: var(--paper);
    border-right: 1px solid var(--line);
    z-index: 1;
}
.sheet__date { display: block; font-size: .8rem; color: var(--ink-soft); }
.sheet__what { display: block; font-weight: 600; color: var(--ink); }
.sheet__ok {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--confirmed);
    background: color-mix(in srgb, var(--confirmed) 12%, transparent);
    border-radius: 999px;
    padding: .1rem .5rem;
    vertical-align: .1em;
}

.sheet__c {
    /* Positioned so the screen-reader span sits against its own cell. Without
       this the absolutely-positioned spans escape the scrolling box, land off
       the right of the page, and give the document a scrollWidth of 533 at a
       390px viewport - a horizontal scrollbar caused by six one-pixel
       elements nobody can see. */
    position: relative;
    text-align: center;
    font-weight: 700;
    padding: .65rem .3rem;
}
.sheet__t tbody tr:nth-child(even) td { background: #eef1fa; }
.sheet__c.is-y { color: var(--yes); }
.sheet__c.is-n { color: var(--no); }
.sheet__c.is-m { color: var(--maybe); }
.sheet__c.is-blank { color: var(--line-strong); }

@media (prefers-color-scheme: dark) {
    .sheet__t tbody tr:nth-child(even) td { background: #1d2540; }
}

/* ---- the weekly email --------------------------------------------------- */

.mailer { margin: 0; }
.mailer__card {
    max-width: 24rem;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
}
.mailer__band {
    background: linear-gradient(90deg, var(--b3), var(--b4));
    color: #fff;
    font-weight: 650;
    padding: .68rem 1rem;
    font-size: .95rem;
}
.mailer__body { padding: .3rem 1rem 1rem; }
.mailer__ev { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.mailer__ev:last-child { border-bottom: 0; padding-bottom: .2rem; }
.mailer__what { margin: 0 0 .6rem; font-size: .95rem; }
.mailer__what span { color: var(--ink-soft); font-size: .88rem; }
.mailer__btns { display: flex; gap: .4rem; }
.mailer__b {
    flex: 1;
    text-align: center;
    padding: .45rem .3rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 650;
    border: 1.5px solid currentColor;
}
.mailer__b.is-y { background: var(--yes); color: var(--paper); border-color: var(--yes); }
.mailer__b.is-n { color: var(--no); }
.mailer__b.is-m { color: var(--maybe); }

@media (prefers-color-scheme: dark) {
    .mailer__b.is-y { color: var(--bg); }
}

/* ---- price -------------------------------------------------------------- */

.price {
    position: relative;
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 2rem 1.8rem 1.8rem;
    max-width: 30rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
/* The six bars along the top, which is where the mark's colour gets to be a
   line rather than a block. */
.price::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: var(--weave-h);
    background: var(--weave) repeat-x;
    background-size: 120px var(--weave-h);
}
.hero .price { margin-top: 2.1rem; }
.price__free {
    display: inline-block;
    background: var(--confirmed);
    color: #fff;
    font-weight: 650;
    font-size: .88rem;
    padding: .28rem .8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.price__fig {
    font-size: clamp(2.6rem, 1.6rem + 3.2vw, 3.6rem);
    font-weight: 780;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
}
.price__per { color: var(--ink-soft); font-weight: 500; font-size: 1.05rem; }
.price ul { margin: 1.35rem 0 0; padding-left: 1.15rem; color: var(--ink-soft); }
.price li { margin-bottom: .45rem; }

@media (prefers-color-scheme: dark) {
    .price__free { color: var(--bg); }
}

/* ---- plain lists -------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; }
.ticks li::before {
    content: "";
    position: absolute;
    left: .2rem; top: .38em;
    width: .42rem; height: .78rem;
    border: solid var(--confirmed);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

dl.qa { margin: 0; }
dl.qa dt { font-weight: 650; margin-top: 1.6rem; }
dl.qa dd { margin: .35rem 0 0; color: var(--ink-soft); }

/* ---- the figures strip -------------------------------------------------- */

.figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 2rem 0 .8rem;
    padding: 0;
}
.figs li { border-left: 3px solid; padding-left: .95rem; }
.figs li:nth-child(1) { border-color: var(--b1); }
.figs li:nth-child(2) { border-color: var(--b2); }
.figs li:nth-child(3) { border-color: var(--b4); }
.figs li:nth-child(4) { border-color: var(--b6); }
.figs strong {
    display: block;
    font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.figs li:nth-child(1) strong { color: var(--i1); }
.figs li:nth-child(2) strong { color: var(--i2); }
.figs li:nth-child(3) strong { color: var(--i4); }
.figs li:nth-child(4) strong { color: var(--i6); }
.figs span { color: var(--ink-soft); font-size: .92rem; }
.figs__note { color: var(--ink-soft); font-size: .88rem; margin: 0; }

/* The badge beside the words that name the side. */
.with {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.with img { width: 64px; height: 64px; border-radius: 50%; box-shadow: var(--shadow); flex: none; }
.with strong { display: block; font-size: 1.1rem; }
.with span { color: var(--ink-soft); font-size: .95rem; }

.bigmail {
    font-size: clamp(1.15rem, .9rem + 1.2vw, 1.6rem);
    font-weight: 650;
    margin-top: 1rem;
    word-break: break-word;
}

/* ---- the credits list --------------------------------------------------- */

/* Every borrowed photograph, in one place, on the page that is about where
   this came from. Printed from inc/credits.php, which bin/commons.php writes,
   so it cannot say something the assets folder does not. */
.credits {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    font-size: .95rem;
    color: var(--ink-soft);
    max-width: 44rem;
}
.credits li {
    padding: .7rem 0;
    border-top: 1px solid var(--line);
}
.credits li:first-child { border-top: 0; }
.credits strong { color: var(--ink); }

/* ---- footer ------------------------------------------------------------- */

.foot {
    background: var(--bg);
    border-top: 1px solid var(--line);
}
.foot__in {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.6rem var(--gutter) 3rem;
}
.foot__lead { font-weight: 600; margin-bottom: 1rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1rem; }
.foot__nav a { color: var(--navy); text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__with {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink-soft);
    font-size: .95rem;
    margin-bottom: .9rem;
}
.foot__with img { flex: none; border-radius: 50%; }
.foot__with strong { color: var(--ink); }
.foot__small { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.foot__small a { color: inherit; }

/* ---- narrow ------------------------------------------------------------- */

/* On a phone the six nav items wrap to two rows and there is no hiding them
   behind a hamburger: this is read by people who would rather see the six
   words than learn what three stacked lines mean. */
@media (max-width: 30rem) {
    .bar__in { padding-bottom: .35rem; gap: .25rem .8rem; }
    .bar__nav { margin-left: 0; width: 100%; gap: .1rem .1rem; }
    .bar__nav a { font-size: .88rem; padding: .3rem .6rem; }
    .bar__home { gap: .55rem; }
    .bar__mark { width: 44px; height: 44px; }
    .bar__word { font-size: 1.5rem; }
    .bar__say { font-size: .6rem; }
    .hero { padding: 2.4rem 0 2.6rem; }
    section { padding: 3rem 0; }
    .actions .btn { flex: 1 1 100%; text-align: center; }
    .sheet, .shot { margin-top: 1.75rem; }
    /* Narrower event column on a phone: at 13rem it takes more than half the
       screen and only two members show beside it. At 9.5rem, three do. */
    .sheet__ev { width: 9.5rem; }
    .sheet__t { min-width: 30rem; }
    .run > div { grid-template-columns: 2.2rem 1fr; gap: 0 .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
    .btn:hover { transform: none; }
}