/*
 * mini-till.co.uk, marketing pages only.
 *
 * Loaded after brand.css and site.css, so it only states what changes. It is
 * linked from the pages that carry site.css and from nowhere else, which is the
 * line between marketing and product here: till.html and stock.html load
 * brand.css alone and are deliberately untouched. No brand.css token value is
 * changed; the amber was lifted to AA on purpose and is used as it stands.
 *
 * The idea: the receipt. A till's whole output is a strip of thermal paper, and
 * that strip has a typographic grammar everybody in Britain can already read
 * without being taught it. Monospace. One column, about forty characters wide.
 * Description left, money right, on a common edge. Dotted rules where the paper
 * is meant to tear. SUBTOTAL, then VAT, then TOTAL, in that order, with the
 * total the only thing in bold.
 *
 * So the pricing is printed as a receipt, the feature list is printed as line
 * items, and the page is near-monochrome because a receipt is: the amber is
 * spent on the one action that matters and nowhere else. Every other site in
 * this set is led by a colour, and this one is led by the absence of one, which
 * is the honest answer for a product whose output is a black-on-grey strip.
 *
 * What it replaces: a hero, a three-column plan grid of rounded cards with a
 * highlighted middle one, and feature boxes with line icons. That layout is on
 * every SaaS pricing page ever built and said nothing about a market stall.
 */

/* --------------------------------------------------------------- tokens */

:root {
    --step-6: 3rem;
    --step-7: 4rem;

    /*
     * The receipt face. A real till prints in a mono, so the figures, the line
     * items and every label are set in one, and the prose stays in the body
     * face so long-form reading is not punished for the conceit.
     */
    --font-receipt: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;

    /* Thermal paper, and the ink a cheap printer actually lays down. */
    --roll: #F4F4F2;
    --band: #1A1C20;
    --receipt-ink: #16171A;
    --receipt-soft: #3A3E46;
    --receipt-muted: #5E636E;
    --tear: #C6C8CD;
}

body.site {
    background: var(--roll);
    color: var(--receipt-ink);
}

/* -------------------------------------------------------------- the head */

.site-head {
    background: var(--band);
    border-bottom: 0;
    box-shadow: none;
}

.site-head .site-brand,
.site-head .site-nav a {
    color: #fff;
}

.site-head .site-nav a {
    font-family: var(--font-receipt);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    border-bottom: 2px solid transparent;
}

.site-head .site-nav a:hover,
.site-head .site-nav a[aria-current='page'] {
    background: transparent;
    border-bottom-color: #fff;
}

.site-head .site-brand {
    font-family: var(--font-receipt);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The one action that is worth the brand colour. */
.site-head .btn-primary {
    background: var(--brand-700);
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: var(--font-receipt);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-head .btn-primary:hover {
    background: var(--brand-800);
}

.site-head a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------- the hero */

/*
 * The top of the roll. The plate is blank thermal receipt paper, greyscale and
 * multiplied over the band so it can only darken: white type measures 17.06:1
 * on the flat band and no worse anywhere over the texture.
 */
.hero,
.masthead {
    background-color: var(--band);
    background-image: url('/img/receipt-roll.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    border-bottom: 0;
}

.hero::after,
.masthead::after {
    /* The tear-off perforation the roll is cut on. */
    content: '';
    display: block;
    height: 0;
    border-bottom: 3px dashed var(--tear);
    opacity: 0.55;
}

.hero h1,
.masthead h1 {
    color: #fff;
    font-size: clamp(2rem, 5.5vw, var(--step-6));
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 17ch;
    text-wrap: balance;
}

.hero .lede,
.masthead-standfirst {
    color: #fff;
    opacity: 0.88;
    max-width: 48ch;
}

.masthead-kicker,
.hero-kicker {
    display: block;
    font-family: var(--font-receipt);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.75;
    margin-bottom: 1rem;
}

.masthead {
    padding-block: clamp(1.75rem, 4.5vw, 2.75rem) 0;
}

.masthead-inner {
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.masthead h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.4rem);
    max-width: 24ch;
    margin: 0;
}

.masthead-standfirst {
    margin-top: 0.9rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ------------------------------------------------------- the line items */

/*
 * Anything that is a label rather than prose. One mannerism, used everywhere it
 * applies, which is what makes the receipt read as a receipt rather than as a
 * page with a monospace heading on it.
 */
.receipt-label,
.plan h3,
.section-kicker,
.feature h3 {
    font-family: var(--font-receipt);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--receipt-muted);
}

/*
 * A dotted rule is where a receipt separates one thing from the next, so
 * sections are separated by one instead of by a card edge.
 */
.section,
.section-tight {
    border-top: 2px dashed var(--tear);
    background: none;
}

.site-main > .section:first-child,
.site-main > .section-tight:first-child,
.hero + .section,
.hero + .section-tight {
    border-top: 0;
}

.section-head h2 {
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------ the plans */

/*
 * Three rounded cards with a highlighted middle one is the single most
 * interchangeable component on the web. The plans are printed as a receipt
 * instead: name and price on one line with the money on a common right edge,
 * inclusions as line items beneath, the rule above the price doing the work the
 * border was doing.
 */
.plan-grid,
.plan-grid-3 {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 62rem;
    margin-inline: auto;
}

@media (min-width: 60rem) {
    .plan-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.plan,
.plan-pro {
    background: none;
    border: 0;
    border-top: 2px solid var(--receipt-ink);
    border-radius: 0;
    box-shadow: none;
    padding: 0.9rem 0 0;
    transform: none;
}

.plan h3 {
    margin: 0 0 0.6rem;
    color: var(--receipt-ink);
}

/*
 * The money, in the figure face, on the right edge a receipt aligns to. This
 * was a large coloured number floating in the middle of a card.
 */
.plan-price {
    font-family: var(--font-receipt);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--receipt-ink);
    margin: 0 0 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px dashed var(--tear);
    padding-bottom: 0.6rem;
}

.plan-price span {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--receipt-muted);
}

.plan-sub {
    color: var(--receipt-soft);
    font-size: 0.95rem;
    margin: 0.75rem 0 1rem;
}

/* Inclusions as printed line items, each on its own ruled row. */
.plan ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: 0.9rem;
}

.plan li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-bottom: 1px dotted var(--tear);
    color: var(--receipt-soft);
}

/*
 * The quantity column a till prints. Decorative, so it is generated and the
 * list still reads as a plain list to a screen reader.
 */
.plan li::before {
    content: '1x';
    position: absolute;
    left: 0;
    font-family: var(--font-receipt);
    font-size: 0.72rem;
    color: var(--receipt-muted);
}

.plan .btn {
    border-radius: 0;
    font-family: var(--font-receipt);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.74rem;
}

.plan .btn-quiet {
    background: transparent;
    border: 1px solid var(--receipt-soft);
    color: var(--receipt-ink);
}

.plan .btn-quiet:hover {
    border-color: var(--brand-700);
    color: var(--brand-700);
}

/* The one plan that is a purchase gets the one colour on the page. */
.plan-pro {
    border-top-color: var(--brand-700);
}

.plan-pro .btn,
.plan-pro .btn-quiet {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}

.plan-pro .btn:hover,
.plan-pro .btn-quiet:hover {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #fff;
}

/* ---------------------------------------------------------- the features */

/*
 * Six boxes with a line icon each becomes six ruled entries. A market trader
 * reading this on a phone gets the same six facts and two fewer screens.
 */
.feature {
    background: none;
    border: 0;
    border-top: 1px solid var(--tear);
    border-radius: 0;
    box-shadow: none;
    padding: 0.9rem 0 0;
}

.feature h3 {
    font-family: var(--font-receipt);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--receipt-ink);
    margin: 0 0 0.35rem;
}

.feature p {
    color: var(--receipt-soft);
    font-size: 0.95rem;
}

/*
 * The line icons. Six of them, one per feature, none carrying information the
 * heading did not already carry. They are the estate's most recognisable tell,
 * so they come off rather than being restyled.
 */
.feature > svg,
.feature .icon {
    display: none;
}

/*
 * The trade strip: the kinds of business this suits. Set as the row of items a
 * receipt would list rather than as five pills.
 */
.trade {
    font-family: var(--font-receipt);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--receipt-muted);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.trade-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    border-block: 1px dashed var(--tear);
    padding-block: 0.75rem;
}

/* ------------------------------------------------------ the page proper */

/*
 * The generic card, retired. Rules and space do the separating, as they do on
 * the strip of paper this is all about.
 */
.card,
.panel,
.box,
.note,
.callout,
.content-card,
.faq-item,
.post-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.faq-item,
.post-card {
    border-top: 1px dashed var(--tear);
    padding-block: 1.1rem;
}

.site-main h2 {
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 26ch;
    color: var(--receipt-ink);
}

.site-main p,
.site-main li {
    color: var(--receipt-soft);
    max-width: 68ch;
}

.site-main .lede {
    color: var(--receipt-soft);
    max-width: 56ch;
}

/* The receipt restyle colours every heading and paragraph in the main column
   for a light background. The CTA band is the one inverted block inside it, so
   it has to opt back out: without this its heading renders dark on dark and is
   effectively invisible. */
.site-main .cta-band h2 {
    color: #fff;
    max-width: none;
}

.site-main .cta-band p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 36em;
}

/* --------------------------------------------------------------- focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand-700);
    outline-offset: 2px;
}

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

.site-foot {
    background: var(--band);
    color: #fff;
    border-top: 3px dashed var(--tear);
}

.site-foot a,
.site-foot h3 {
    color: #fff;
}

.site-foot h3 {
    font-family: var(--font-receipt);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
}

.site-foot a:focus-visible {
    outline-color: #fff;
}

/* --------------------------------------------------------------- print */

@media print {
    .site-head,
    .site-foot,
    .book-plug,
    .adsbygoogle {
        display: none !important;
    }

    .hero,
    .masthead {
        background: none !important;
        color: #000 !important;
    }

    .hero h1,
    .masthead h1,
    .hero .lede,
    .masthead-standfirst,
    .masthead-kicker {
        color: #000 !important;
        opacity: 1 !important;
    }

    .plan {
        break-inside: avoid;
    }
}