/*  ═══════════════════════════════════════════════════════════════════════════
    KeyCodeSolar - the public site

    Hand written, no framework, no build step. The same decision KeyCodeMart
    took, for the same reason: a stylesheet that fails to load should cost the
    look of a page, not its behaviour.

    ══ ORANGE, BLACK AND WHITE ══  (asked for, 9 Sep 2026)

    THERE IS NO DARK MODE, DELIBERATELY. The page does not follow the machine's
    preference and does not switch. That is a commitment rather than an
    omission, which is why `color-scheme: light` is declared below: without it
    a browser on a dark machine would still paint form controls, scrollbars and
    autofill dark, and the page would end up half white and half charcoal.

    THREE COLOURS, AND THE ORANGE COMES IN TWO WEIGHTS. White is the ground and
    carries almost everything; black is the type and the bands that break the
    page up; orange is reserved for the thing to press and the thing worth
    noticing, and nothing else. A third of a page in an accent is not an accent.

    ⚠ TEXT ON ORANGE IS BLACK, NOT WHITE, and that is measured rather than
      taste. White on the bright orange lands around 3.6:1, which fails normal
      body text; black on the same orange is about 5.8:1. The deep orange is
      the one that takes white. Change either hue and check this again.

    EVERY COLOUR IS DECLARED HERE AND NOWHERE ELSE. The last palette change
    caught eleven hard-coded values scattered through the components - exactly
    the bug this header has always warned about - so the dark-band hairlines
    and the docket now have tokens of their own too.
    ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /*  Tells the browser this page is light, whatever the machine prefers.
        Form controls, scrollbars and autofill follow this.  */
    color-scheme: light;

    /* ground and paper */
    --ink:        #0E2A47;   /* the navy of the logo - hero, app bar, footer */
    --ink-soft:   #16395E;
    --ink-rule:   #2A4D74;   /* hairlines INSIDE a dark band */
    --paper:      #FFFFFF;
    --card:       #FFFFFF;   /* same as the ground - separation is by border */
    --card-2:     #F4F4F4;   /* the recessed white, for headers and wells */

    /* type */
    --text:       #0B1A38;
    --text-2:     #4B4B4B;
    --text-3:     #767676;
    --on-ink:     #F6F6F6;
    --on-ink-2:   #A9A9A9;

    /* the orange, in two weights */
    --ember:      #F59E0B;   /* the bright blue of the logo - the thing to press */
    --danger:     #C62828;   /* refusals, blocks, errors - never a thing to press */
    --ember-lift: #FBB53C;
    --ember-ink:  #111827;   /* what reads on the bright blue */
    --brass:      #0F5C99;   /* deep navy - secondary marks and chips */
    --brass-lift: #1C72B8;
    --brass-ink:  #FFFFFF;   /* what reads on the deep orange */

    /* lines */
    --rule:       #E3E3E3;
    --rule-soft:  #EFEFEF;

    /*  The kitchen ticket. A docket is paper whatever the palette is, so it
        gets its own set rather than borrowing the page's.  */
    --ticket:      #FFFFFF;
    --ticket-ink:  #111111;
    --ticket-rule: #C7C7C7;
    --ticket-note: #6E6E6E;

    --shadow-sm:  0 1px 2px rgb(0 0 0 / .08);
    --shadow-md:  0 2px 4px rgb(0 0 0 / .08), 0 12px 28px -14px rgb(0 0 0 / .35);

    --radius:     10px;
    --radius-sm:  6px;

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    --wrap: 74rem;
}

/* ═══════════════════════════════════════════════════════════════ resets === */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 600; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 600; }

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 3px; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }

.eyebrow {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ══════════════════════════════════════════════════════════════ buttons === */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font: inherit; font-size: .92rem; font-weight: 500;
    padding: .58rem 1.05rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-solid { background: var(--ember); color: var(--ember-ink); border-color: var(--ember); }
.btn-solid:hover { background: var(--ember-lift); border-color: var(--ember-lift); }

.btn-quiet { background: transparent; color: var(--text); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--text-3); }

.btn-brass { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
.btn-brass:hover { background: var(--brass-lift); border-color: var(--brass-lift); }

.btn-lg { font-size: 1rem; padding: .8rem 1.5rem; }

/* ════════════════════════════════════════════════════════════ masthead === */

.masthead {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule-soft);
}

.masthead-in {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 4rem;
}

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }

.brand-mark {
    display: grid; place-items: center;
    width: 2rem; height: 2rem;
    background: var(--ink); color: var(--ember);
    font-family: var(--display); font-weight: 700; font-size: .8rem;
    letter-spacing: .02em;
    border-radius: var(--radius-sm);
}

.brand-name { font-family: var(--display); font-size: 1.06rem; font-weight: 500; }
.brand-name b { font-weight: 700; }

.masthead-nav { display: flex; gap: 1.35rem; margin-left: auto; font-size: .92rem; }
.masthead-nav a { color: var(--text-2); text-decoration: none; white-space: nowrap; }
.masthead-nav a:hover { color: var(--text); }

.masthead-actions { display: flex; gap: .5rem; }

@media (max-width: 60rem) {
    .masthead-nav { display: none; }
    .masthead-actions { margin-left: auto; }
}
@media (max-width: 34rem) {
    .masthead-actions .btn-quiet { display: none; }
}

/* ═══════════════════════════════════════════════════════════════ bands === */

.band { padding-block: clamp(3.5rem, 7vw, 6rem); }
.band + .band { border-top: 1px solid var(--rule-soft); }
.band-ink { background: var(--ink); color: var(--on-ink); border-top: 0; }
.band-ink h2, .band-ink h3 { color: var(--on-ink); }
.band-ink .eyebrow { color: var(--brass-lift); }

.band-head { display: flex; flex-direction: column; gap: .7rem; max-width: 44rem; margin-bottom: 2.5rem; }
.band-head p { color: var(--text-2); font-size: 1.08rem; }
.band-ink .band-head p { color: var(--on-ink-2); }

/* ════════════════════════════════════════════════════════════════ hero === */

.hero {
    background: var(--ink);
    color: var(--on-ink);
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    overflow: hidden;
}

.hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 62rem) { .hero-in { grid-template-columns: 1fr; } }

.hero-copy { display: flex; flex-direction: column; gap: 1.35rem; }
.hero-copy h1 { color: var(--on-ink); }
.hero-copy .lede { color: var(--on-ink-2); font-size: 1.15rem; max-width: 34rem; }
.hero-copy .eyebrow { color: var(--brass-lift); }

.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .35rem; }

.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9rem; color: var(--on-ink-2); }
.hero-points li { display: flex; align-items: baseline; gap: .45rem; }
.hero-points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass-lift); flex: none; }

/* ═══════════════════════════════════════════ the docket, hero right-hand === */
/*
    The kitchen order ticket. It is the artefact this whole product exists to
    print, so it is what the page opens with - a screenshot of a form would say
    far less about what the software actually does.
*/
.docket-stack { position: relative; display: grid; gap: 1rem; justify-items: center; }

.docket {
    width: min(21rem, 100%);
    background: var(--ticket);
    color: var(--ticket-ink);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.62;
    padding: 1.15rem 1.2rem;
    border-radius: 2px;
    box-shadow: var(--shadow-md);
    position: relative;
}

.docket::before, .docket::after {
    content: ""; position: absolute; left: 0; right: 0; height: 6px;
    background-image: radial-gradient(circle at 5px 50%, var(--ink) 3.5px, transparent 4px);
    background-size: 10px 6px;
}
.docket::before { top: -3px; }
.docket::after  { bottom: -3px; }

.docket-row { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.docket-big { font-size: 1.02rem; font-weight: 600; letter-spacing: .03em; }
.docket-sep { border-top: 1px dashed var(--ticket-rule); margin: .55rem 0; }
.docket-note { color: var(--ticket-note); padding-left: 1.1rem; }
.docket-stn {
    background: var(--ticket-ink); color: var(--ticket);
    padding: .05rem .5rem; font-weight: 600; letter-spacing: .1em; font-size: .72rem;
}
.docket-cap { font-size: .84rem; color: var(--on-ink-2); text-align: center; max-width: 22rem; }

/* ═════════════════════════════════════════════════════════ offer strip === */

.offer {
    background: var(--brass);
    color: var(--brass-ink);
    padding-block: .85rem;
    font-size: .95rem;
}
.offer-in { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.offer b { font-weight: 700; }
.offer code {
    font-family: var(--mono); font-size: .88em; font-weight: 600;
    background: var(--ink); color: var(--ember-lift);
    padding: .12rem .45rem; border-radius: 3px;
}
.offer .seats { margin-left: auto; font-size: .86rem; opacity: .8; }

/* ══════════════════════════════════════════════════════════ what it does === */

.groups { display: grid; gap: 2.5rem; }

.group-head {
    display: flex; align-items: baseline; gap: 1rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: .6rem; margin-bottom: 1.25rem;
}
.group-head h3 { font-size: 1.3rem; }
.group-head .count { font-family: var(--mono); font-size: .78rem; color: var(--text-3); margin-left: auto; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem 2rem;
}
.feature { display: flex; flex-direction: column; gap: .3rem; }
.feature h4 { font-size: 1rem; }
.feature p { color: var(--text-2); font-size: .94rem; }

/* ═══════════════════════════════════════════════════ a service, end to end === */
/*
    The five states a table moves through. Numbered, because this genuinely is
    a sequence and the order carries the information - not because numbers
    look tidy.
*/
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.band-ink .steps { background: var(--ink-rule); border-color: var(--ink-rule); }

.step { background: var(--card); padding: 1.15rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.band-ink .step { background: var(--ink-soft); }

.step .no { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--brass); }
.band-ink .step .no { color: var(--brass-lift); }
.step h4 { font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
.step p { font-size: .9rem; color: var(--text-2); }
.band-ink .step p { color: var(--on-ink-2); }

/* ═════════════════════════════════════════════════════════════ pricing === */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; align-items: start; }

.plan {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem 1.6rem;
    display: flex; flex-direction: column; gap: 1rem;
    box-shadow: var(--shadow-sm);
}
/*  One card lifted, not all three. A shadow on everything flattens the
    hierarchy it was meant to create.  */
.plan-featured { border-color: var(--brass); box-shadow: var(--shadow-md); }

.plan-name { display: flex; align-items: center; gap: .6rem; }
.plan-name h3 { font-size: 1.35rem; }
.plan-tag {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    background: var(--brass); color: var(--brass-ink); padding: .15rem .45rem; border-radius: 3px;
}
.plan-line { color: var(--text-2); font-size: .95rem; min-height: 2.8em; }

.plan-price { display: flex; align-items: baseline; gap: .4rem; font-family: var(--display); }
.plan-price .amount { font-size: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-price .per { font-family: var(--sans); font-size: .88rem; color: var(--text-3); }
.plan-price .ask { font-size: 1.3rem; font-weight: 600; color: var(--text-2); }

.plan-includes { display: flex; flex-direction: column; gap: .42rem; font-size: .92rem; }
.plan-includes li { display: flex; gap: .55rem; align-items: baseline; color: var(--text-2); }
.plan-includes li::before {
    content: ""; flex: none; width: .45rem; height: .45rem;
    border-radius: 50%; background: var(--brass);
}
.plan-includes .more { color: var(--text-3); font-size: .88rem; padding-left: 1rem; }
.plan-includes .more::before { display: none; }

.price-note {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--card-2);
    border-left: 3px solid var(--brass);
    padding: .9rem 1.1rem;
    font-size: .93rem; color: var(--text-2);
    margin-top: 1.5rem;
    border-radius: 0;
}

/* ═════════════════════════════════════════════════════════════ clients === */

.clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.client {
    background: var(--card); border: 1px solid var(--rule-soft);
    border-radius: var(--radius); padding: 1.3rem;
    display: flex; flex-direction: column; gap: .6rem;
}
.client blockquote { margin: 0; font-family: var(--display); font-size: 1.02rem; line-height: 1.45; }
.client cite { font-style: normal; font-size: .88rem; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════ demo === */

.demo-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 58rem) { .demo-in { grid-template-columns: 1fr; } }

.form-card {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 1.6rem;
    box-shadow: var(--shadow-sm);
}

.fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
/*  Written as auto / span N and never the "span N" shorthand - the shorthand
    puts the span in the START, which silently destroys any field meant to
    begin a fresh row. This cost KeyCodeMart an hour once.  */
.f2  { grid-column: auto / span 2; }
.f3  { grid-column: auto / span 3; }
.f5  { grid-column: auto / span 5; }
.f9  { grid-column: auto / span 9; }
.f4  { grid-column: auto / span 4; }
.f6  { grid-column: auto / span 6; }
.f8  { grid-column: auto / span 8; }
.f12 { grid-column: auto / span 12; }
@media (max-width: 42rem) { .f2, .f3, .f4, .f5, .f6, .f8, .f9 { grid-column: auto / span 12; } }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .84rem; font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea {
    font: inherit; font-size: .95rem;
    padding: .55rem .7rem;
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    width: 100%;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ember); }
.hint { font-size: .8rem; color: var(--text-3); }

.notice { padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .93rem; margin-bottom: 1.2rem; }
.notice-ok   { background: color-mix(in srgb, #1B8A4C 14%, transparent); border-left: 3px solid #1B8A4C; }
/*  Red, not the blue of the buttons: a refusal must not look like a thing to press.
    alert.js also pops these up as a dialog - so a STANDING caveat on a page uses
    notice-warn, which is drawn and left alone.  */
.notice-bad  { background: color-mix(in srgb, #C62828 12%, transparent); border-left: 3px solid #C62828; }
.notice-warn { background: color-mix(in srgb, #E09B00 14%, transparent); border-left: 3px solid #E09B00; }

.demo-why { display: flex; flex-direction: column; gap: 1.1rem; }
.demo-why ul { display: flex; flex-direction: column; gap: .7rem; }
.demo-why li { display: flex; gap: .7rem; align-items: baseline; color: var(--text-2); }
.demo-why li::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ember); }

/* ══════════════════════════════════════════════════════════════ footer === */

.footer { background: var(--ink); color: var(--on-ink-2); padding-block: 3rem 2rem; font-size: .92rem; }
.footer a { color: var(--on-ink); }

.contact-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.contact-col h4 { color: var(--brass-lift); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; margin-bottom: .7rem; }
.contact-col dl { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.contact-col dt { font-size: .8rem; color: var(--on-ink-2); opacity: .7; }
.contact-col dd { margin: 0; color: var(--on-ink); }
.contact-col .unset { color: var(--on-ink-2); font-style: italic; opacity: .65; }

.footer-legal { border-top: 1px solid var(--ink-rule); padding-top: 1.5rem; font-size: .85rem; opacity: .75; }

/* ══════════════════════════════════════════════════════ apology screens === */

.plain { min-height: 60vh; display: grid; place-items: center; padding-block: 4rem; }
.plain-in { max-width: 34rem; display: flex; flex-direction: column; gap: 1rem; text-align: center; }
.plain .ref {
    font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
    background: var(--card-2); padding: .5rem 1rem; border-radius: var(--radius-sm);
    display: inline-block; align-self: center;
}

/* ════════════════════════════════════════════════════════════ posters === */
/*
    Whatever an operator has put up. Sits between the hero and the offer strip
    - close enough to the top to be seen, far enough down that it never
    displaces the headline, which is the thing the page is actually for.
*/
.posters { background: var(--card-2); border-bottom: 1px solid var(--rule-soft); }
.posters .wrap { display: flex; flex-direction: column; gap: 1px; }

.poster {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1.1rem 0;
    flex-wrap: wrap;
}
.poster + .poster { border-top: 1px solid var(--rule); }

.poster-img {
    width: 5rem; height: 5rem; object-fit: cover;
    border-radius: var(--radius-sm); flex: none;
}
.poster-copy { flex: 1 1 20rem; display: flex; flex-direction: column; gap: .2rem; }
.poster-copy h3 { font-size: 1.15rem; }
.poster-copy p { color: var(--text-2); font-size: .95rem; }
.poster .btn { flex: none; }

/* ═══════════════════════════════════════ three things you see (landing) === */
/*
    A phone, a slip and a bill, drawn rather than photographed. The docket
    on a white band needs its perforations in the band's colour, not the
    hero's ink; and the QR is a checkerboard, which reads as one at a glance.
*/
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2.2rem 2rem; align-items: start; }
.trio-item { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.trio-item h4 { font-size: 1.12rem; margin-top: 1rem; }
.trio-item p  { color: var(--text-2); font-size: .95rem; }
.trio-item > .docket, .trio-item > .phone { align-self: center; }

.band .docket::before, .band .docket::after {
    background-image: radial-gradient(circle at 5px 50%, var(--paper) 3.5px, transparent 4px);
}
.docket-sm { width: min(18.5rem, 100%); font-size: .76rem; min-height: 15.5rem; }
.docket-c  { justify-content: center; text-align: center; }
.docket-qr {
    width: 5.2rem; height: 5.2rem; margin: .6rem auto .2rem;
    background-color: var(--ticket-ink);
    background-image:
        linear-gradient(90deg, var(--ticket) 50%, transparent 50%),
        linear-gradient(var(--ticket) 50%, transparent 50%);
    background-size: .65rem .65rem;
    background-blend-mode: difference;
    outline: 3px solid var(--ticket); outline-offset: -3px;
    box-shadow: inset 0 0 0 .3rem var(--ticket-ink);
}

.phone {
    width: 14.5rem; min-height: 15.5rem;
    background: var(--paper, #fff); color: var(--text);
    border: 6px solid var(--ink); border-radius: 1.4rem;
    box-shadow: var(--shadow-md);
    padding: .6rem .7rem .7rem; font-size: .74rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.phone-bar  { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.phone-cats { display: flex; gap: .3rem; overflow: hidden; }
.phone-cats span { font-size: .66rem; padding: .18rem .5rem; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap; }
.phone-cats span.on { background: var(--ink); color: var(--paper, #fff); border-color: var(--ink); }
.phone-dish { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .4rem .5rem; border: 1px solid var(--rule); border-radius: .5rem; }
.phone-dish b { font-weight: 600; grid-column: 1; }
.phone-dish small { color: var(--text-3); font-size: .64rem; grid-column: 1; }
.phone-dish em { font-style: normal; font-weight: 600; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.phone-cart { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: var(--ink); color: var(--paper, #fff); border-radius: .6rem; padding: .45rem .6rem; font-weight: 600; }
.phone-cart span { background: var(--ember); color: var(--ember-ink); padding: .25rem .55rem; border-radius: .4rem; font-size: .68rem; white-space: nowrap; }

/* ═══════════════════════════════════════════════════ required, said visibly === */
/*  A box that must be filled carries a mark on its label, so nobody finds
    out on Save. The alert dialog (alert.js) is the same box as the "are you
    sure" one, in the refusal colour.  */
.field:has(> [required]) > label::after,
.field:has(> .req) > label::after,
label.req::after,
.pick-q .req { content: " *"; color: var(--ember); font-weight: 700; }
.pick-q .req { content: none; }
.pick-group.pick-bad { outline: 2px solid var(--ember); outline-offset: .3rem; border-radius: 4px; }
.pick-err { color: var(--ember); font-size: .84rem; margin-top: .3rem; }
dialog.alert { border-top: 4px solid var(--ember); }
dialog.alert ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; color: var(--text-2); font-size: .95rem; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--ember); }

/*  ══ THE LOGO ══
    A square mark on a white tile, so it reads the same on the navy app bar
    and the white masthead. The word-mark beside it is set in the logo's own
    two colours.  */
.brand-logo {
    width: 2.4rem; height: 2.4rem; object-fit: contain;
    background: #fff; border-radius: var(--radius-sm); padding: .15rem;
}
.brand-name { font-family: var(--sans); font-weight: 900; letter-spacing: .04em; font-size: .98rem; color: inherit; }
.brand-name b { color: var(--ember); font-weight: 900; }
.masthead .brand-name { color: var(--ink); }
.logo-hero { display: block; width: min(15rem, 55vw); margin: 0 0 1.2rem; background: #fff; border-radius: var(--radius); padding: .6rem; }
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════ SolarX brand (28 Sep 2026) ===
   The wordmark is a white-ground JPEG, so it sits on the white masthead only.  */
.brand-wordmark { height: 3rem; width: auto; display: block; }
@media (max-width: 40rem) { .brand-wordmark { height: 2.3rem; } }

/* ════════════════════ the maker's credit - Keycode Technology Pvt Ltd === */
.madeby { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; color: #6B7A93; font-size: .82rem; text-align: center; }
.madeby img { width: 20px; height: 20px; object-fit: contain; }
.madeby b { color: #0E3FA8; font-weight: 650; }
.madeby-full { flex-direction: column; gap: .45rem; padding: .4rem 0 1.4rem; }
.madeby-full img { width: 180px; height: auto; border-radius: 12px; background: #fff; padding: .5rem; }
.madeby-full span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.footer .madeby { color: var(--on-ink-2); margin-bottom: 1rem; }
.footer .madeby b { color: #fff; }

/* ═══════════════════════════════════════ privacy, data security, deletion === */
/*  /privacy, /data-security, /delete-account (LegalController) - the pages
    Google Play links to. One navy band with the three as tabs, then a single
    readable column.  */

.legal-hero { background: var(--ink); color: var(--on-ink); padding-block: 2.6rem 2rem; }
.legal-hero .eyebrow { color: var(--ember); }
.legal-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 2.9rem); margin: .35rem 0 .55rem; }
.legal-hero p { color: var(--on-ink-2); max-width: 46rem; margin: 0; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.legal-tabs a { padding: .45rem .95rem; border: 1px solid var(--ink-rule); border-radius: 999px; color: var(--on-ink); text-decoration: none; font-size: .9rem; }
.legal-tabs a:hover { border-color: var(--on-ink-2); }
.legal-tabs a.on { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); font-weight: 600; }

.legal-body { padding-block: 2.4rem 4rem; }
.legal-doc { max-width: 48rem; }
.legal-doc > :first-child { margin-top: 0; }
.legal-doc h2 { font-size: 1.4rem; margin: 2.4rem 0 .7rem; }
.legal-doc h3 { font-size: 1.08rem; margin: 1.5rem 0 .45rem; }
.legal-doc p, .legal-doc li { line-height: 1.68; }
.legal-doc p { margin: 0 0 .9rem; }
.legal-doc ul { margin: 0 0 1rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.legal-doc a { color: var(--brass); }
.legal-meta { font-size: .85rem; color: var(--text-3); margin-bottom: 1.4rem; }

.legal-summary { background: #F5F8FC; border-left: 3px solid var(--ember); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 1.6rem; }
.legal-summary ul { margin: .3rem 0 0; }

.legal-tablewrap { overflow-x: auto; margin: .6rem 0 1.4rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
.legal-table th { background: #EEF3FF; color: #1E3A8A; text-align: left; font-weight: 600; padding: .6rem .75rem; }
.legal-table td { padding: .6rem .75rem; border-top: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.5; }
.legal-yes { color: #1B8A4C; font-weight: 600; }
.legal-no  { color: var(--text-3); }

.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem; }
.legal-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--card); }
.legal-card h3 { margin: 0 0 .35rem; font-size: 1rem; font-family: var(--sans); font-weight: 600; }
.legal-card p { margin: 0; font-size: .92rem; color: var(--text-2); line-height: 1.55; }

.legal-contact { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0 1.4rem; background: #FBFCFE; }
.legal-contact dl { margin: .4rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
.legal-contact dt { color: var(--text-3); font-size: .88rem; }
.legal-contact dd { margin: 0; }

.legal-form { display: grid; gap: 1rem; max-width: 40rem; margin-top: 1rem; }
.legal-form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.legal-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.legal-form legend { font-size: .84rem; font-weight: 500; color: var(--text-2); margin-bottom: .35rem; }
.legal-choice { display: flex; gap: .65rem; align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .65rem .8rem; cursor: pointer; }
.legal-choice:has(input:checked) { border-color: var(--ember); background: #FFF8EB; }
.legal-choice input { margin-top: .25rem; }
.legal-choice b { display: block; font-weight: 600; }
.legal-choice span { font-size: .86rem; color: var(--text-3); }
.legal-form .agree { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.legal-form .agree input { margin-top: .25rem; }
.legal-form .field-error { color: var(--danger); font-size: .82rem; }
.legal-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.legal-done { border: 1px solid #1B8A4C; background: color-mix(in srgb, #1B8A4C 8%, #fff); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-bottom: 1.6rem; }
.legal-done h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.legal-done .ref { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .15rem .5rem; }

.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1.2rem; font-size: .9rem; }
.footer-links a { color: var(--on-ink); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }