/* ==================================================================
   ManufactIQ, the public landing page.

   A deliberately separate stylesheet from brand.css, because this is a
   deliberately separate design: Archivo and IBM Plex rather than Saira
   Semi Condensed, a warm off-white ground rather than paper, and far more
   air than an application screen can afford. The product and the page
   that sells it are allowed to look different; what they must not do is
   contradict each other, so the logo and the orange are the same.

   Nothing here is shared with the application. A change to brand.css
   cannot move this page, and a change here cannot move the CRM.

   The pricing toggle is CSS only - two radio buttons and sibling
   selectors. No JavaScript at all, which means it works before any script
   loads, cannot break, and needs no exception to the script policy.
   ================================================================== */

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

:root {
    --ink:        #131313;
    --ink-soft:   #3c3a38;
    --body:       #4a4744;
    --body-soft:  #5c5854;
    --muted:      #7a746e;
    --muted-soft: #8a8580;
    --ground:     #fbfaf9;
    --card:       #ffffff;
    --tint:       #f2efec;
    --rule:       rgba(19, 19, 19, 0.09);
    --rule-firm:  rgba(19, 19, 19, 0.13);

    /* The mockup's orange. It differs from brand.css's --mq-signal
       (#F26430) by a couple of points; they are both "ManufactIQ orange"
       and if the guidelines are the authority this should become #F26430.
       Left as the design specified, and named here so it is one edit. */
    --signal:      #F1592A;
    --signal-dark: #c9421a;

    --display: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --page: 1180px;
    --gutter: 40px;
}

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

html, body { margin: 0; padding: 0; }

body.landing {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-dark); }

/* Keyboard users have to be able to see where they are, and the mockup
   says nothing about it - so it is added rather than left out. */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 3px;
}

.wrap {
    max-width: var(--page);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.mono {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted-soft);
}

.eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-soft);
}

/* ---------------------------------------------------------- header */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 250, 249, 0.92);
    /* Progressive: without it the bar is simply opaque enough to read. */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(19, 19, 19, 0.09);
}
.masthead .wrap {
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.masthead__logo { height: 30px; width: auto; display: block; }

.topnav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 14.5px;
    font-weight: 500;
}
.topnav a { color: var(--ink-soft); }
.topnav a:hover { color: var(--ink); }

/* ------------------------------------------------------- buttons */

.btn {
    display: inline-block;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
}
.btn--signal { background: var(--signal); color: #fff; }
.btn--signal:hover { background: var(--ink); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--signal); color: #fff; }
.btn--outline {
    color: var(--ink);
    font-weight: 600;
    border-color: rgba(19, 19, 19, 0.18);
}
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--paper { background: #fff; color: var(--ink); }
.btn--paper:hover { background: var(--signal); color: #fff; }

.btn--sm  { font-size: 14px;   padding: 10px 20px; font-weight: 600; }
.btn--md  { font-size: 15.5px; padding: 15px 26px; }
.btn--lg  { font-size: 16px;   padding: 16px 30px; }
.btn--wide { display: block; width: 100%; font-size: 15px; padding: 13px; }

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

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
    padding-top: 88px;
    padding-bottom: 72px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(19, 19, 19, 0.14);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 26px;
}
.pill i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal); display: block; flex: none;
}

.hero h1 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 62px;
    line-height: 1.02;
    letter-spacing: -0.032em;
    margin: 0 0 22px;
    text-wrap: pretty;
}
.hero__lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--body);
    margin: 0 0 34px;
    max-width: 30em;
    text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__note { margin: 22px 0 0; }

/* The screenshot frame. The images inside are real captures of the demo
   account, so the frame only has to hold them: no fixed height, the
   picture's own aspect ratio decides. */
.shot { position: relative; }
.shot__glow {
    position: absolute;
    inset: -18px -18px auto auto;
    width: 170px; height: 170px;
    background: radial-gradient(circle at 70% 30%,
                rgba(241, 89, 42, 0.16), transparent 70%);
    pointer-events: none;
}
.shot__frame {
    border: 1px solid rgba(19, 19, 19, 0.12);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 24px 60px -30px rgba(19, 19, 19, 0.35);
    overflow: hidden;
    position: relative;
}
.shot__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    background: #f4f2f0;
}
.shot__bar i {
    width: 9px; height: 9px; border-radius: 50%;
    background: #d9d4cf; display: block; flex: none;
}
.shot__bar span {
    font-family: var(--mono); font-size: 11px;
    color: var(--muted-soft); margin-left: 8px;
}
.shot__img {
    display: block;
    width: 100%;
    height: auto;
    /* Shows through while the picture loads, so the frame does not flash
       white against the warm page. */
    background: #f6f4f2;
}

.shot--standalone {
    border: 1px solid rgba(19, 19, 19, 0.12);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
}

/* ------------------------------------------------------- replaces */

.band {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--card);
}
.band .wrap {
    padding-top: 26px; padding-bottom: 26px;
    display: flex; flex-wrap: wrap; gap: 40px;
    align-items: center; justify-content: space-between;
}
.band__list {
    display: flex; flex-wrap: wrap; gap: 34px;
    font-family: var(--display); font-weight: 600;
    font-size: 15px; color: var(--body);
}

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

.section { padding-top: 82px; padding-bottom: 24px; }
.section--roomy { padding-top: 70px; padding-bottom: 70px; }

.section h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -0.028em;
    margin: 0 0 14px;
}
.section__lead {
    font-size: 18px; line-height: 1.55; color: var(--body);
    margin: 0 0 46px; max-width: 38em;
}

/* One-pixel gaps showing the container's colour: a hairline grid without
   a border on every cell, which would double up. */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(19, 19, 19, 0.11);
    border: 1px solid rgba(19, 19, 19, 0.11);
    border-radius: 10px;
    overflow: hidden;
}
.cell { background: var(--card); padding: 26px 24px 28px; }
.cell__no {
    font-family: var(--mono); font-size: 11px;
    color: var(--signal); margin-bottom: 14px;
}
.cell h3 {
    font-family: var(--display); font-weight: 700; font-size: 19px;
    letter-spacing: -0.015em; margin: 0 0 8px;
}
.cell p { font-size: 14.5px; line-height: 1.5; color: var(--body-soft); margin: 0; }
.cell--ink { background: var(--ink); color: #fff; }
.cell--ink p { color: rgba(255, 255, 255, 0.72); }

/* -------------------------------------------------------- pricing */

.pricing {
    background: var(--card);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.pricing .wrap { padding-top: 82px; padding-bottom: 90px; }

.pricing__head {
    display: flex; flex-wrap: wrap; gap: 24px;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: 44px;
}
.pricing__head p {
    font-size: 17.5px; line-height: 1.5; color: var(--body);
    margin: 0; max-width: 34em;
}
.pricing__foot { margin: 26px 0 0; }

/* The toggle. Radio inputs rather than buttons, so the state lives in the
   document and the whole thing works with no script. The inputs
   themselves are off-screen but focusable, and their labels are the
   visible control. */
.toggle { display: flex; padding: 4px; background: var(--tint);
          border-radius: 9px; gap: 4px; }
.toggle__radio {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.toggle label {
    font-family: var(--display); font-weight: 600; font-size: 14px;
    letter-spacing: -0.01em;
    padding: 10px 16px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    background: transparent; color: #6b6661;
    user-select: none;
}
.toggle label small { font-family: var(--mono); font-size: 11px; opacity: 0.7; }
.toggle__radio:focus-visible + label { outline: 2px solid var(--signal);
                                       outline-offset: 2px; }

/* Which label looks pressed, and which prices show. Both sets of figures
   are in the markup and one is hidden, so switching needs no request and
   no script - and a reader with CSS off sees both, labelled. */
#bill-monthly:checked ~ .toggle label[for="bill-monthly"],
#bill-annual:checked  ~ .toggle label[for="bill-annual"] {
    background: var(--ink); color: #fff;
}
.price--annual, .note--annual { display: none; }
#bill-annual:checked ~ .plans .price--monthly,
#bill-annual:checked ~ .plans .note--monthly { display: none; }
#bill-annual:checked ~ .plans .price--annual,
#bill-annual:checked ~ .plans .note--annual { display: inline; }

.plans {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; align-items: start;
}
.plan {
    border: 1px solid var(--rule-firm);
    border-radius: 12px;
    padding: 30px 28px 32px;
    background: var(--ground);
}
.plan h3 {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    letter-spacing: -0.02em; margin: 0 0 6px;
}
.plan__who { font-size: 14.5px; color: var(--body-soft);
             margin: 0 0 26px; line-height: 1.5; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.plan__figure {
    font-family: var(--display); font-weight: 800; font-size: 46px;
    letter-spacing: -0.03em;
}
.plan__per { font-family: var(--mono); font-size: 12.5px; color: var(--muted-soft); }
.plan__note { font-family: var(--mono); font-size: 12px;
              color: var(--muted-soft); margin-bottom: 26px; min-height: 1em; }
.plan .btn { margin-bottom: 26px; }
.plan__lines { display: grid; gap: 11px; font-size: 14.5px; color: var(--ink-soft); }
.plan__line { display: flex; justify-content: space-between; gap: 12px; }
.plan__line + .plan__line { border-top: 1px solid var(--rule); padding-top: 11px; }
.plan__line span { color: var(--muted); }
.plan__line strong { font-weight: 600; }

.plan--featured {
    border: 1.5px solid var(--ink);
    background: var(--card);
    box-shadow: 0 20px 50px -30px rgba(19, 19, 19, 0.45);
    position: relative;
}
.plan__flag {
    position: absolute; top: -12px; left: 28px;
    background: var(--signal); color: #fff;
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.09em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 5px;
}

.plan--ink { background: var(--ink); color: #fff; }
.plan--ink .plan__who { color: rgba(255, 255, 255, 0.66); }
.plan--ink .plan__per,
.plan--ink .plan__note { color: rgba(255, 255, 255, 0.5); }
.plan--ink .plan__lines { color: rgba(255, 255, 255, 0.82); }
.plan--ink .plan__line span { color: rgba(255, 255, 255, 0.55); }
.plan--ink .plan__line strong { color: #fff; }
.plan--ink .plan__line + .plan__line { border-top-color: rgba(255, 255, 255, 0.14); }

/* -------------------------------------------------------- roadmap */

.split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center;
}
.split h2 {
    font-family: var(--display); font-weight: 800; font-size: 34px;
    letter-spacing: -0.026em; line-height: 1.1; margin: 0 0 16px;
}
.split p { font-size: 17px; line-height: 1.55; color: var(--body); margin: 0; }

.stages { display: flex; gap: 12px; align-items: stretch; }
.stage {
    flex: 1; border: 1px solid var(--ink); border-radius: 10px;
    padding: 22px 20px; background: var(--card);
}
.stage__tag { font-family: var(--mono); font-size: 11px;
              color: var(--signal); margin-bottom: 10px; }
.stage__name { font-family: var(--display); font-weight: 700; font-size: 18px; }
.stage--next { border: 1px dashed rgba(19, 19, 19, 0.28); background: transparent; }
.stage--next .stage__tag { color: var(--muted-soft); }
.stage--next .stage__name { color: var(--muted-soft); }

/* ----------------------------------------------------------- demo */

.demo { background: var(--ink); color: #fff; }
.demo .wrap {
    padding-top: 78px; padding-bottom: 78px;
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: 56px; align-items: center;
}
.demo h2 {
    font-family: var(--display); font-weight: 800; font-size: 42px;
    letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 16px;
}
.demo p { font-size: 18px; line-height: 1.55;
          color: rgba(255, 255, 255, 0.7); margin: 0; max-width: 28em; }
.demo__form { display: flex; gap: 12px; flex-wrap: wrap; }
.demo__note { font-family: var(--mono); font-size: 11.5px;
              color: rgba(255, 255, 255, 0.45); margin: 16px 0 0; flex: 1 1 100%; }

/* A label that only a screen reader needs. The landing stylesheet is
   standalone - it shares nothing with brand.css - so it carries its own. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.foot { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.foot .wrap {
    padding-top: 26px; padding-bottom: 26px;
    display: flex; flex-wrap: wrap; gap: 24px;
    align-items: center; justify-content: space-between;
}
.foot__brand { display: flex; align-items: center; gap: 12px; }
.foot__brand img { height: 24px; width: auto; display: block;
                   filter: brightness(0) invert(1); }
.foot__brand span { font-family: var(--mono); font-size: 12px;
                    color: rgba(255, 255, 255, 0.45); }
.foot__links { display: flex; gap: 26px; font-size: 13.5px; }
.foot__links a { color: rgba(255, 255, 255, 0.55); }
.foot__links a:hover { color: #fff; }

/* ----------------------------------------------------- responsive

   The hero, the roadmap and the demo are all two columns that stop
   working somewhere around a tablet; the feature grid goes to two and
   then one. Type comes down with them - 62 px is a headline on a laptop
   and a wall on a phone. */

@media (max-width: 1000px) {
    .hero, .split, .demo .wrap { grid-template-columns: 1fr; gap: 40px; }
    .hero { padding-top: 56px; padding-bottom: 48px; }
    .hero h1 { font-size: 46px; }
    .grid-12 { grid-template-columns: repeat(2, 1fr); }
    .plans { grid-template-columns: 1fr; }
    .plan--featured { order: -1; }
    .section h2, .demo h2 { font-size: 32px; }
}

@media (max-width: 620px) {
    :root { --gutter: 20px; }
    .hero h1 { font-size: 34px; letter-spacing: -0.02em; }
    .hero__lead { font-size: 17px; }
    .grid-12 { grid-template-columns: 1fr; }
    .masthead .wrap { flex-wrap: wrap; gap: 14px; }
    .topnav { gap: 18px; font-size: 14px; }
    .section { padding-top: 52px; }
    .pricing .wrap { padding-top: 52px; padding-bottom: 56px; }
    .band .wrap { gap: 16px; }
    .band__list { gap: 18px; font-size: 14px; }
    .stages { flex-direction: column; }

    /* A 1520px window shrunk to a phone is mush. Crop to the part that
       carries the point and keep it at a readable scale: the first few
       enquiries, and the report's chart. */
    .shot__img {
        height: 300px;
        object-fit: cover;
        object-position: 20% top;
    }
}

/* A visitor who prints the page wants the prices, not the screenshots. */
@media print {
    .masthead, .shot, .demo__form { display: none; }
    body.landing { background: #fff; }
    .plan, .cell { break-inside: avoid; }
}

/* ------------------------------------------------ booking a demo

   The calendar at /demo and its confirmation. Same design as the rest of
   this file, and the same rule: no JavaScript. A free half hour is a
   radio button whose label is the thing you can see, so choosing one is
   a browser primitive - it keyboard-navigates, it announces itself, and
   it submits with the form.

   Everything is here rather than in the template because the public
   pages' relaxed Content-Security-Policy allows Google's fonts and
   nothing else: no inline style attribute and no <style> block will
   render. See crm/blueprints/marketing.py.
   ---------------------------------------------------------------- */

.booking__head { padding: 64px 0 8px; max-width: 760px; }
.booking__head h1 {
    font-family: var(--display); font-weight: 800; font-size: 46px;
    line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 16px;
}
.booking__lead { font-size: 18px; line-height: 1.55; color: var(--body);
                 margin: 0 0 14px; }
.booking__hours { font-size: 12px; color: var(--muted);
                  text-transform: uppercase; letter-spacing: 0.08em; }

.booking { padding: 24px 0 80px; }

/* Browsers give a fieldset a border and odd padding; the legend is the
   step heading, so both are restyled rather than removed. */
.booking fieldset {
    border: 0; padding: 0; margin: 0 0 40px; min-width: 0;
}
.booking legend {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    color: var(--ink); padding: 0; margin-bottom: 18px;
}

/* ------------------------------------------------ the week */

.weekbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.weekbar__range {
    font-family: var(--mono); font-size: 13px; color: var(--ink-soft);
    letter-spacing: 0.02em;
}
/* Nothing earlier than this week, nothing past the horizon. Kept in place
   rather than removed so the bar does not jump about between weeks. */
.btn.is-off { opacity: 0.3; pointer-events: none; }

.slots__week {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.slots__day {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 12px; padding: 14px 12px;
}
.slots__dayname {
    font-family: var(--display); font-weight: 600; font-size: 14px;
    margin: 0 0 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--rule); color: var(--ink);
}
.slots__dayname span {
    display: block; font-family: var(--mono); font-size: 11px;
    font-weight: 400; color: var(--muted); margin-top: 3px;
}
.slots__times { display: grid; gap: 6px; }
.slots__none {
    font-family: var(--mono); font-size: 11.5px; color: var(--muted-soft);
    margin: 0; padding: 8px 0;
}

/* The radio itself is never seen, but must stay focusable - so it is
   moved off the page rather than hidden, and its focus ring is drawn on
   the label. display:none would take it out of the tab order. */
.slot__radio {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); border: 0;
}
.slot {
    display: block; text-align: center; padding: 8px 4px;
    border: 1px solid var(--rule-firm); border-radius: 8px;
    font-family: var(--mono); font-size: 13px; color: var(--ink-soft);
    background: #fff; cursor: pointer; user-select: none;
}
.slot__radio + .slot:hover { border-color: var(--ink); color: var(--ink); }
.slot__radio:checked + .slot {
    background: var(--signal); border-color: var(--signal); color: #fff;
}
.slot__radio:focus-visible + .slot {
    outline: 2px solid var(--signal); outline-offset: 2px;
}
/* Gone, taken, or beyond the horizon: a span, not a control. */
.slot--taken, .slot--gone, .slot--closed {
    cursor: default; background: var(--tint); border-color: transparent;
    color: var(--muted-soft);
}
.slot--taken { text-decoration: line-through; }

.slots__key {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 0; font-size: 11.5px; color: var(--muted);
}
.slots__key .slot { display: inline-block; padding: 3px 8px; font-size: 11px; }

/* ------------------------------------------------ who is coming */

.who {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
.who .field { margin-bottom: 20px; }
.who legend { grid-column: 1 / -1; }

.field label {
    display: block; font-family: var(--display); font-weight: 600;
    font-size: 13.5px; color: var(--ink); margin-bottom: 7px;
}
.field__opt {
    font-family: var(--mono); font-weight: 400; font-size: 11px;
    color: var(--muted-soft); text-transform: uppercase;
    letter-spacing: 0.06em; margin-left: 6px;
}
.field input {
    width: 100%; padding: 11px 13px; font-family: var(--sans);
    font-size: 15px; color: var(--ink); background: #fff;
    border: 1px solid var(--rule-firm); border-radius: 9px;
}
.field input:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 1px;
    border-color: var(--signal);
}
.field input[aria-invalid="true"] { border-color: var(--signal-dark); }
.field__hint, .field__error {
    font-family: var(--mono); font-size: 11.5px; margin: 6px 0 0;
}
.field__hint { color: var(--muted-soft); }
.field__error { color: var(--signal-dark); }

/* No person sees this: it is aria-hidden and out of the tab order, and a
   robot that fills it in gets its submission refused. Moved off-screen
   rather than display:none, because some form-fillers skip what is
   hidden that way and fill what is not. */
.honeypot {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}

.booking__go { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.booking__note { font-size: 11.5px; color: var(--muted); margin: 0; }

/* ------------------------------------------------ said out loud */

.notice {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 11px 14px; border-radius: 9px;
    margin: 0 0 22px; display: inline-block;
}
.notice--good { background: var(--ink); color: #fff; }
.notice--bad {
    background: var(--signal); color: #fff; text-transform: none;
    letter-spacing: 0; font-size: 13px;
}

/* ------------------------------------------------ the confirmation */

.booked { padding: 64px 0 90px; max-width: 700px; }
.booked h1 {
    font-family: var(--display); font-weight: 800; font-size: 38px;
    line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px;
}
.booked__lead { font-size: 17.5px; line-height: 1.55; color: var(--body);
                margin: 0 0 32px; }
.booked__facts {
    display: grid; grid-template-columns: 150px 1fr; gap: 0;
    margin: 0 0 32px; background: var(--card);
    border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.booked__facts dt, .booked__facts dd {
    margin: 0; padding: 12px 16px; font-size: 14.5px;
    border-top: 1px solid var(--rule);
}
.booked__facts dt:first-of-type, .booked__facts dt:first-of-type + dd {
    border-top: 0;
}
.booked__facts dt {
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: flex; align-items: center;
}
.booked__facts dd { color: var(--ink); }
.booked__next { font-size: 15.5px; line-height: 1.6; color: var(--body); }
.booked__note { font-size: 11.5px; color: var(--muted-soft); }

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

   Five columns of half hours do not fit a phone, so the week becomes five
   stacked days, each with its times in a row that wraps. Same markup.
   ---------------------------------------------------------------- */

@media (max-width: 860px) {
    .slots__week { grid-template-columns: 1fr; gap: 10px; }
    .slots__day { padding: 12px 14px; }
    .slots__dayname {
        display: flex; align-items: baseline; gap: 8px;
        padding-bottom: 8px; margin-bottom: 10px;
    }
    .slots__dayname span { margin-top: 0; }
    .slots__times {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
    .who { grid-template-columns: 1fr; }
    .booking__head h1 { font-size: 34px; }
    .booked h1 { font-size: 29px; }
    .booked__facts { grid-template-columns: 1fr; }
    .booked__facts dd { padding-top: 0; border-top: 0; }
    .booked__facts dt { padding-bottom: 4px; }
    .booked__facts dt:first-of-type + dd { padding-top: 0; }
}

/* ------------------------------------------------ the booking pop-up

   A native <dialog>, opened with showModal() by static/js/demo-modal.js.
   The browser draws the backdrop through ::backdrop and makes the rest of
   the page inert, so there is no overlay div and no scroll lock to write.

   The dialog itself is only a positioning box: everything visible is
   .modal__panel inside it, which is what makes a click landing on the
   dialog a click on the backdrop.
   ---------------------------------------------------------------- */

.modal {
    /* UA styles give a dialog a border, a width and auto margins. All of
       it has to go before it can be a full-viewport centring box. */
    border: 0;
    padding: 24px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    background: transparent;
    overflow-y: auto;
    /* Only applies while open; a closed dialog is display:none anyway. */
    display: grid;
    place-items: start center;
}
.modal:not([open]) { display: none; }

.modal::backdrop {
    background: rgba(19, 19, 19, 0.62);
}

.modal__panel {
    background: var(--ground);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(19, 19, 19, 0.3);
    width: 100%;
    max-width: 1040px;
    padding: 28px 30px 30px;
    color: var(--ink);
}

.modal__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 22px;
    padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.modal__title {
    font-family: var(--display); font-weight: 800; font-size: 30px;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px;
}
.modal__lead {
    font-size: 15.5px; line-height: 1.5; color: var(--body);
    margin: 0; max-width: 42em;
}
.modal__close {
    flex: none; width: 38px; height: 38px; line-height: 1;
    font-size: 26px; font-family: var(--sans);
    color: var(--muted); background: transparent;
    border: 1px solid var(--rule-firm); border-radius: 10px;
    cursor: pointer;
}
.modal__close:hover { color: var(--ink); border-color: var(--ink); }
.modal__close:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 2px;
}

/* The shared form sits inside the panel, so it must not carry the page's
   own vertical rhythm. */
.modal__body .booking { padding: 0; }
.modal__body .booking fieldset:last-of-type { margin-bottom: 24px; }

@media (max-width: 860px) {
    .modal { padding: 0; }
    .modal__panel {
        border-radius: 0; min-height: 100%; padding: 20px 18px 26px;
    }
    .modal__title { font-size: 24px; }
}