/*  ═══════════════════════════════════════════════════════════════════════════
    KeyCodeSallonBilling - 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:        #0B2049;   /* the navy of the logo - hero, app bar, footer */
    --ink-soft:   #12295E;
    --ink-rule:   #24407A;   /* 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:      #1877F2;   /* the bright blue of the logo - the thing to press */
    --danger:     #C62828;   /* refusals, blocks, errors - never a thing to press */
    --ember-lift: #3D8FF5;
    --ember-ink:  #FFFFFF;   /* what reads on the bright blue */
    --brass:      #0B2A6F;   /* deep navy - secondary marks and chips */
    --brass-lift: #1A3F8F;
    --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;
    /*  The writing side is the wider one: it carries the heading and the
        callback form. The brand side holds a logo and two buttons, and any
        more room than that is a hole in the page.  */
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    /*  Both columns start at the top. Centred, the shorter one drifts into
        the middle and leaves an empty band above it.  */
    align-items: start;
}
@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; }

/* ── legal pages: privacy policy, delete your account ─────────────────── */
.wrap-narrow { max-width: 46rem; }
.legal h1 { margin: .35rem 0 1rem; }
.legal h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--text-2); line-height: 1.6; }
.legal ul { padding-left: 1.2rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .5rem 0 1rem; }
.legal-table th, .legal-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal-table th { color: var(--text-3); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.legal-box { background: var(--card-2, #f4f5f8); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0 1.6rem; }
.legal-box h3 { margin: 0 0 .5rem; font-size: 1rem; }
.legal .fields { margin-top: 1rem; }
.legal .field small { color: var(--text-3); font-size: .8rem; }
.legal-foot { margin-top: 1.6rem; font-size: .92rem; }

/* ── the phone app on the landing page ────────────────────────────────── */
.section-app { background: linear-gradient(135deg, #2F7BFF 0%, #7B5CFF 45%, #F02C9C 100%); color: #fff; }
.section-app .eyebrow, .section-app h2, .section-app .lede { color: #fff; }
.section-app .lede { opacity: .92; max-width: 44rem; }
.app-shots { display: flex; gap: 1.1rem; overflow-x: auto; padding: 1.4rem .2rem 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.app-shots figure { flex: 0 0 auto; width: clamp(11rem, 22vw, 15rem); margin: 0; scroll-snap-align: start; text-align: center; }
.app-shots img { display: block; width: 100%; border-radius: 1.2rem; border: 4px solid rgba(255,255,255,.22); box-shadow: 0 18px 40px rgba(0,0,0,.28); background: #fff; }
.app-shots figcaption { margin-top: .6rem; font-size: .9rem; font-weight: 600; }
.app-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1rem; }
.section-app .btn-solid { background: #fff; color: #0B2049; border-color: #fff; }
.app-note { font-size: .88rem; opacity: .9; }
.app-links { width: 100%; font-size: .88rem; opacity: .95; }
.app-links a { color: #fff; }
.legal h2[id] { scroll-margin-top: 5rem; }

/* ── features at a glance ─────────────────────────────────────────────── */
.glance { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.glance li { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.glance li::before { content: "✓"; color: var(--ember); font-weight: 900; }
.glance b { font-size: 1.02rem; }
.glance span { color: var(--text-2); font-size: .92rem; line-height: 1.5; }

/* ── plans ────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; margin-top: 1.6rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem 1.4rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.plan-best { border-color: var(--ember); box-shadow: 0 18px 44px rgba(11,32,73,.14); }
.plan-tag { position: absolute; top: -.75rem; left: 1.2rem; background: var(--ember); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--radius-sm); }
.plan h3 { margin: 0; }
.price { margin: 0; display: flex; align-items: baseline; gap: .3rem; }
.price b { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--ink); }
.price span { color: var(--text-3); }
.plan ul { margin: 0; padding-left: 1.1rem; color: var(--text-2); font-size: .94rem; line-height: 1.7; flex: 1; }
.plan .btn { align-self: flex-start; }
.plans-note { margin-top: 1.4rem; color: var(--text-2); }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.faq details { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); padding: .2rem 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; padding: .8rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ember); font-weight: 900; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 1rem; color: var(--text-2); line-height: 1.6; }

/* ── contact us / feedback ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2.5rem; align-items: start; }
@media (max-width: 62rem) { .contact-grid { grid-template-columns: 1fr; } }
.contact-ways { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .5rem; color: var(--text-2); }
.contact-ways b { display: inline-block; min-width: 5rem; color: var(--text); }
.contact-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); padding: 1.4rem; box-shadow: 0 18px 44px rgba(11,32,73,.08); }
.contact-form .kind-row { flex-direction: row; gap: 1.4rem; }
.contact-form .kind-row label { display: flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--text); white-space: nowrap; }
.contact-form small { color: var(--text-3); margin-left: .8rem; }
.contact-form .field textarea { width: 100%; }
.stars { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.stars input { display: none; }
.stars label { font-size: 1.7rem; color: var(--rule); cursor: pointer; line-height: 1; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #F4B400; }
.notice-ok { background: #E7F6EC; color: #1B5E20; border-left: 4px solid #2E7D32; padding: .7rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.validation { background: #FCE8E8; color: #8B1E1E; border-left: 4px solid #C62828; padding: .7rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.validation ul { margin: 0; padding-left: 1rem; }

/* ── feedback: what salons say ────────────────────────────────────────── */
.stars-static { color: #F4B400; letter-spacing: .05em; }
.rating-line { display: flex; align-items: center; gap: .5rem; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.quote { margin: 0; padding: 1.2rem 1.3rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; gap: .6rem; }
.quote p { margin: 0; color: var(--text); line-height: 1.55; font-size: 1rem; }
.quote p::before { content: open-quote; color: var(--ember); font-family: var(--display); font-size: 1.6rem; line-height: 0; margin-right: .15rem; }
.quote p::after { content: close-quote; color: var(--ember); font-family: var(--display); font-size: 1.6rem; line-height: 0; margin-left: .15rem; }
.quote footer { font-size: .88rem; color: var(--text-2); }
.quote .when { color: var(--text-3); }

/* ── screens: the web app, screen by screen ───────────────────────────── */
.screens { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.4rem; margin-top: 1.4rem; align-items: start; }
@media (max-width: 62rem) { .screens { grid-template-columns: 1fr; } }
.screens-menu { display: flex; flex-direction: column; gap: .3rem; }
@media (max-width: 62rem) { .screens-menu { flex-direction: row; flex-wrap: wrap; } }
.screens-menu button { text-align: left; font: inherit; font-size: .93rem; font-weight: 500; color: var(--text-2); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .5rem .8rem; cursor: pointer; }
.screens-menu button:hover { background: var(--paper); border-color: var(--rule); }
.screens-menu button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.screens-view { margin: 0; }
.screens-view img { width: 100%; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(11,32,73,.14); background: #fff; }
.screens-view figcaption { margin-top: .7rem; color: var(--text-2); font-size: .92rem; line-height: 1.5; }

/* ── feature glyphs, whatsapp button ──────────────────────────────────── */
.glance li::before { content: none; }
.glance-ico { width: 2.1rem; height: 2.1rem; padding: .4rem; border-radius: .6rem; background: color-mix(in srgb, var(--ember) 12%, transparent); color: var(--ember); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .2rem; }
.wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: flex; align-items: center; gap: .5rem; background: #25D366; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; padding: .7rem 1rem .7rem .8rem; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.wa-float:hover { background: #1EBE5B; }
.wa-float svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
@media (max-width: 40rem) { .wa-float span { display: none; } .wa-float { padding: .7rem; } }

.hero .btn-quiet { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
.hero .btn-quiet:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── how it is built: the benefits ────────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; }
@media (max-width: 62rem) { .how-grid { grid-template-columns: 1fr; } }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.benefits li { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border-left: 3px solid var(--ember); background: var(--paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.benefits b { font-size: .98rem; }
.benefits span { color: var(--text-2); font-size: .9rem; line-height: 1.5; }

/* ── why sizorpro: unique features and benefits ───────────────────────── */
.section-why { background: var(--ink); color: #fff; }
.section-why .eyebrow { color: #F2C46B; }
.section-why h2, .section-why .lede { color: #fff; }
.section-why .lede { opacity: .9; max-width: 46rem; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.why { padding: 1.2rem 1.3rem; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: .5rem; }
.why h3 { margin: 0; font-size: 1.08rem; color: #fff; }
.why-f { margin: 0; color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.55; }
.why-b { margin: 0; color: #fff; font-size: .93rem; line-height: 1.55; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.14); }
.why-b b { color: #F2C46B; }

/* ── what it does: the day, step by step ──────────────────────────────── */
.day { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; counter-reset: step; }
.day li { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem 1.1rem 1.1rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); }
.day li::after { counter-increment: step; content: counter(step); position: absolute; top: .7rem; right: .9rem; font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: color-mix(in srgb, var(--ink) 14%, transparent); }
.day-ico { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: .8rem; background: var(--ink); color: #fff; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.day h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.day p { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.55; }

/* ── a product by keycode technology ──────────────────────────────────── */
.made-by { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-decoration: none; color: var(--text-3); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.made-by img { width: 11rem; height: auto; background: #fff; padding: .5rem .7rem; border-radius: var(--radius-sm); }
.made-by-card { margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.made-by-card img { width: 13rem; padding: 0; }
.made-by-site { text-transform: none; letter-spacing: 0; color: var(--ember); font-size: .88rem; }

/* ── footer navigation ────────────────────────────────────────────────── */
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 1rem; }
@media (max-width: 62rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .footer-grid { grid-template-columns: 1fr; } }
.footer-nav { display: flex; flex-direction: column; gap: .45rem; font-size: .92rem; }
.footer-nav b { color: #fff; margin-bottom: .3rem; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.footer-nav a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer .made-by { margin-bottom: 0; }

.social { display: flex; gap: .5rem; margin-top: .9rem; }
.social a { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.social a:hover { background: rgba(255,255,255,.22); }
.social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ── readability on the public site: one clear sans face, larger, darker ─ */
/*  Scoped to the public shell (body.public) so the signed-in app keeps its
    denser type.  */
body.public { --display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --text-2: #2B3445; --text-3: #4B5566; font-size: 1.0625rem; line-height: 1.65; }
body.public h1, body.public h2, body.public h3 { letter-spacing: -0.02em; font-weight: 800; }
body.public h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
body.public .lede { font-size: 1.12rem; }
body.public .glance span, body.public .day p, body.public .why-f, body.public .why-b, body.public .plan ul, body.public .faq p, body.public .quote p, body.public .app-shots figcaption, body.public .screens-view figcaption { font-size: 1rem; }
body.public .eyebrow { font-size: .8rem; font-weight: 700; }
body.public .footer-nav { font-size: .97rem; }
body.public .footer-nav a { color: rgba(255,255,255,.9); }
body.public .footer-legal { font-size: .9rem; opacity: .85; }
body.public .btn { font-weight: 700; }

/* ── book an appointment: under the logo in the hero ──────────────────── */
.hero-brand { display: flex; flex-direction: column; align-items: flex-start; }
.hero .btn-book { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.4rem; padding: .7rem 1.2rem .7rem 1rem; border-radius: 999px; background: var(--ember); color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; box-shadow: 0 10px 26px rgba(24,119,242,.35); }
.hero .btn-book:hover { background: #3D8FF5; color: #fff; }
.hero .btn-book svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* ── see it working: one video, still until asked ─────────────────────── */
.video-frame { position: relative; max-width: 56rem; margin: 0 auto; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(11, 32, 73, .25); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5rem; height: 5rem; border-radius: 50%; background: rgba(11, 32, 73, .82); display: grid; place-items: center; transition: background .15s ease, transform .15s ease; }
.video-play:hover .video-btn, .video-play:focus-visible .video-btn { background: var(--ember); transform: translate(-50%, -50%) scale(1.06); }
.video-btn svg { width: 2.4rem; height: 2.4rem; fill: #fff; margin-left: .2rem; }
@media (max-width: 40rem) { .video-btn { width: 3.6rem; height: 3.6rem; } .video-btn svg { width: 1.8rem; height: 1.8rem; } }

/* ── request a callback: the hero's one ask ───────────────────────────── */
.callback-card { background: #fff; color: var(--text); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 0 0 1.4rem; box-shadow: 0 18px 44px rgba(11,32,73,.28); max-width: 34rem; }
.callback-head { display: flex; align-items: center; gap: .6rem; }
.callback-head b { font-size: 1.15rem; color: var(--ink); }
.callback-tag { background: #E4F6EA; color: #1B8A4C; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: .25rem .5rem; border-radius: 999px; }
.callback-lede { margin: .45rem 0 .8rem; color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.callback-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.callback-form input { flex: 1 1 9rem; min-width: 0; font: inherit; font-size: .95rem; padding: .6rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #fff; color: var(--text); }
.callback-form input:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.callback-form .btn { flex: 0 0 auto; }
.callback-note { margin: .6rem 0 .5rem; color: var(--text-3); font-size: .8rem; }
.callback-ways { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; border-top: 1px solid var(--rule-soft); padding-top: .6rem; }
.callback-ways a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; font-size: .9rem; }
.callback-ways svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.way-wa { color: #1EA855; }
.way-call { color: var(--ember); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang-toggle { display: inline-flex; align-items: center; padding: .4rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; }
.lang-toggle:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/*  Google publishes this badge and asks that it is not redrawn; the only
    freedom is its size, and Play asks for a clear space around it.  */
.play-badge { display: inline-flex; align-items: center; line-height: 0; }
.play-badge img { height: 2.6rem; width: auto; display: block; }
.masthead-actions .play-badge img { height: 2.3rem; }
.footer-play { margin: .2rem 0 .6rem; }
.footer-play img { height: 3rem; }

/*  The hero is two cells: the logo and its button on one side, everything
    written on the other - so the form sits under the heading rather than
    wherever the grid happened to flow it.  */
.hero .hero-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.hero .hero-copy h1 { margin: 0; }
.hero .hero-copy .lede { margin: 0; }
.hero .callback-card { margin: 0; max-width: none; }
.hero-play { margin-top: .2rem; }
.hero-play img { height: 3.1rem; }

/*  The hero is tall enough with a form in it; it does not also need the
    padding of a section that is only a sentence.  */
.hero { padding-block: clamp(2rem, 5vw, 3.4rem); }
.hero .logo-hero { width: min(13rem, 46vw); }
.hero .hero-brand { gap: .8rem; }
@media (max-width: 62rem) {
    .hero-in { gap: 1.4rem; }
    .hero .hero-brand { align-items: center; text-align: center; }
    .hero .logo-hero { margin-inline: auto; }
}
/*  Smaller than the page-wide h1: the hero now carries a form as well, and
    a headline that fills the screen pushes the one thing to press below it.  */
.hero .hero-copy h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; }