/* The client skin (28 Sep 2026 for the gift flow, Gian; 29 Sep 2026 on every page a client reaches by a link): the website's design
   system - Cormorant Garamond + Jost, the cream / olive / gold tokens of website/site/site.css - on the booking page /b and its
   screens (Your bookings, the regular booking), the questionnaire /q, the shop, the gift flow and the pay page, and the pages that
   say something is off. It sits on top of app.css and every rule is under main.client, .ctop or .cflow, so the staff portal and the
   iPad cannot move. One rule per line; app.css's selector shape with .cflow in front, so the skin's rule always wins. */
/* 15 Oct 2026 (Gian: "the look and feel seamless"): the tokens are the current site's (website/site3/src/styles.css - cream, bone, linen,
   the deep olive, the line colour, DM Sans for the body), the gold is gone (--g-gold now names the olive the site uses for every accent),
   corners are square and nothing casts a shadow. No font size changed. */
:root {
  --g-paper: #fbf7f0; --g-surface: #f2ece2; --g-deep: #e9e0d2; --g-ink: #33261d; --g-soft: #71675d; --g-faint: #857a6e;
  --g-olive: #30382a; --g-olive-deep: #4a5230; --g-gold: #30382a; --g-rule: #ded6ca; --g-shadow: rgba(51, 38, 29, 0);
  --g-chosen: #f2ece2; --g-offer: #f2ece2; --g-err: #F1E3DB; --g-err-ink: #8A4A34;
  --g-fd: "Cormorant Garamond", "Hoefler Text", Garamond, "Times New Roman", serif;
  --g-fb: "DM Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
/* the page: Response.html sends a bare fragment, so the page-level rules hang off the <main> the browser wraps */
html:has(main.client), html:has(main.client) body { background: var(--g-paper); color: var(--g-ink); font-family: var(--g-fb); font-weight: 300; }
/* the header as the site's on a phone: the mark on the left with the wordmark beside it, 72px, the same line under it */
.ctop { display: flex; align-items: center; height: 72px; padding: 0 24px; border-bottom: 1px solid var(--g-rule); background: var(--g-paper); }
/* 16 Oct 2026 (Gian, on an iPad: "the logo goes to extreme left ... keep it aligned with the text to the left"): the brand sits in the same
   640px column as the page's text (main.client's 1rem gutter + .bform's max-width), so on a wide screen it starts where the words start.
   The table iPad's header (.ctop--table, its own clock on the right) is left alone. */
.ctop:not(.ctop--table) { padding: 0 1rem; }
.ctop:not(.ctop--table) .ctop__brand { width: 100%; max-width: 640px; margin: 0 auto; justify-content: start; }
.ctop__brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; justify-items: start; color: var(--g-ink); text-decoration: none; }
.ctop__mark { grid-row: 1 / 3; width: 2.4rem; height: auto; color: var(--g-olive); }
.ctop__word { font-family: var(--g-fd); font-weight: 400; font-size: 1.55rem; letter-spacing: .3em; margin-right: -.3em; line-height: 1; text-transform: uppercase; }
.ctop__sub { font-family: var(--g-fb); font-weight: 400; font-size: .52rem; letter-spacing: .36em; line-height: 1; margin-top: .3rem; text-transform: uppercase; color: var(--g-soft); }
main.client { background: var(--g-paper); padding: 1.2rem 1rem 3rem; }
.cflow a { color: var(--g-olive); text-decoration-color: var(--g-rule); text-underline-offset: 3px; }
.cflow b, .cflow strong { font-weight: 500; }
.cflow .bform { max-width: 640px; margin: 0 auto; font-family: var(--g-fb); color: var(--g-ink); }
.cflow .bform h1 { font-family: var(--g-fd); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); letter-spacing: 0; text-transform: none; line-height: 1.1; margin: .4rem 0 .5rem; color: var(--g-ink); }
.cflow .bform h2 { font-family: var(--g-fd); font-weight: 400; font-size: 1.55rem; letter-spacing: 0; text-transform: none; line-height: 1.15; margin: 1.7rem 0 .5rem; color: var(--g-ink); }
.cflow .bform .lead { font-family: var(--g-fb); font-weight: 300; font-size: 1rem; line-height: 1.55; color: var(--g-soft); margin: 0 0 1rem; }
.cflow .bform p { font-weight: 300; }
.cflow .bform .gpic { display: block; margin: .1rem 0 1.15rem; border-radius: 0; overflow: hidden; box-shadow: none; }
.cflow .bform .gpic img { display: block; width: 100%; height: auto; }
/* the welcome page's amount line between the card and the number, sized to fill the width on a phone (19 Oct 2026, Gian) */
.cflow .bform .wamt { font-family: var(--g-fd); font-weight: 400; font-size: clamp(1.8rem, 10.6vw, 3.9rem); line-height: 1.06; color: var(--g-ink); margin: 0 0 1.1rem; text-wrap: balance; letter-spacing: 0; }
.cflow .bform .dots span { background: var(--g-rule); width: 9px; height: 9px; }
.cflow .bform .dots span.on { background: var(--g-gold); }
.cflow .bform .err { background: var(--g-err); color: var(--g-err-ink); border-radius: 0; font-weight: 400; font-family: var(--g-fb); }
.cflow .bform .note { background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: 0; color: var(--g-soft); font-weight: 300; }
.cflow .bform .muted, .cflow .bform .muted a { color: var(--g-soft); font-weight: 300; }
.cflow .bform .muted a { text-decoration: underline; text-decoration-color: var(--g-gold); text-underline-offset: 3px; }
.cflow .bform .known { margin: .3rem 0 1rem; font-size: .95rem; }
/* the tiles, as on the site: the gift amounts (.gp) and the booking page's choices (.card - the 60 / 90, every week or two) */
.cflow .gp__row { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--g-faint); margin: 1.1rem 0 .55rem; }
.cflow .gift-grid, .cflow .bform .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.cflow .gp, .cflow .bform .card { position: relative; display: grid; gap: .35rem; align-content: start; padding: .95rem 1rem 1rem; border: 1px solid var(--g-rule); border-radius: 0;
                                  background: var(--g-surface); cursor: pointer; min-height: 48px; margin: 0; box-shadow: none; }
.cflow .gp input[type="radio"], .cflow .bform .card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cflow .gp:has(input:checked), .cflow .bform .card:has(input:checked) { border-color: var(--g-olive); box-shadow: inset 0 0 0 1.5px var(--g-olive); background: var(--g-chosen); }
.cflow .gp:focus-within, .cflow .bform .card:focus-within { outline: 2px solid var(--g-gold); outline-offset: 2px; }
.cflow .gp--offer { border: 1px solid var(--g-olive); background: var(--g-offer); box-shadow: none; }
.cflow .gp--offer:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--g-olive); }
.cflow .gp__label, .cflow .bform .card span { font-family: var(--g-fb); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-faint); }
.cflow .gp__value { font-family: var(--g-fd); font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight: 400; color: var(--g-ink); line-height: 1.1; }
.cflow .bform .card b { font-family: var(--g-fd); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 400; color: var(--g-ink); line-height: 1.1; }
.cflow .gp__value s { text-decoration: line-through; text-decoration-color: var(--g-gold); opacity: .6; font-weight: 300; font-size: .72em; margin-right: .35em; }
.cflow .gp__pill { justify-self: start; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-surface); background: var(--g-olive); padding: .3rem .55rem; border-radius: 0; margin-bottom: .15rem; }
.cflow .gp--any { border-style: dashed; }
.cflow .gp--any .gp__value { display: flex; align-items: baseline; gap: .15em; }
.cflow .gp--any input[type="number"] { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--g-gold); border-radius: 0; background: transparent;
                                       font: inherit; font-size: 1em; color: var(--g-ink); padding: 0 .1em .05em; min-height: 0; outline: none; -moz-appearance: textfield; }
.cflow .gp--any input[type="number"]::-webkit-outer-spin-button, .cflow .gp--any input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cflow .gp--any input::placeholder { color: var(--g-faint); opacity: 1; font-style: italic; }
/* the fields and the buttons */
.cflow .bform .field span { font-family: var(--g-fb); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--g-faint); font-weight: 400; }
.cflow .bform .field input, .cflow .bform .field select, .cflow .bform .field textarea { border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface);
       font-family: var(--g-fb); font-weight: 300; font-size: 1rem; color: var(--g-ink); }
.cflow .bform .field textarea { width: 100%; min-height: 70px; padding: 10px 14px; }
.cflow .bform .field input:focus, .cflow .bform .field select:focus, .cflow .bform .field textarea:focus { border-color: var(--g-gold); outline: none; box-shadow: 0 0 0 2px rgba(48, 56, 42, .18); }
.cflow .bform .field.phone input { font-family: var(--g-fd); font-weight: 500; font-size: clamp(26px, 10vw, 44px); letter-spacing: .04em; border: 1px solid var(--g-rule); background: var(--g-surface); }
.cflow .bform .code4 input { font-family: var(--g-fd); font-weight: 500; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); color: var(--g-ink); }
.cflow .btn { border-radius: 0; font-family: var(--g-fb); font-weight: 400; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; background: var(--g-olive); color: var(--g-surface); border: 1px solid var(--g-olive); text-decoration: none; }
.cflow .btn:hover { background: var(--g-olive-deep); border-color: var(--g-olive-deep); }
.cflow .bform .btn.send, .cflow .btn.pay { min-height: 52px; }
.cflow .btn.secondary { background: transparent; color: var(--g-ink); border: 1px solid var(--g-rule); }
.cflow .btn.secondary:hover { background: transparent; color: var(--g-olive); border-color: var(--g-olive); }
.cflow .bform .again { margin-top: .6rem; }
.cflow .bform .done-actions { gap: .6rem; margin-top: 1.4rem; }
.cflow .bform .done-actions.tight { margin-top: .8rem; }
/* the day strip and the times (/b/time, a move on Your bookings) */
.cflow .bform .days { gap: .5rem; padding: 4px 2px 10px; margin: .6rem 0 .2rem; }
.cflow .bform .card .vafter { display: block; color: var(--g-olive); font-size: .78rem; margin-top: .15rem; }     /* the length's price after the voucher (20 Oct 2026) */
.cflow .bform .day { flex: 0 0 64px; gap: .15rem; padding: .55rem .25rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-deep); color: var(--g-ink); min-height: 72px; text-decoration: none; }     /* an open day is the time pill's shade, a touch darker (20 Oct 2026, Gian; --g-deep next to the pills' --g-surface); the chosen day the deep olive */
.cflow .bform .day b { font-family: var(--g-fd); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.cflow .bform .day small { font-family: var(--g-fb); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-soft); font-weight: 400; }
.cflow .bform .day.full small, .cflow .bform .day.closed small { color: var(--g-faint); }
.cflow .bform .day.on { background: var(--g-olive); border-color: var(--g-olive); color: var(--g-surface); }
.cflow .bform .day.on small { color: rgba(244, 239, 230, .78); }
.cflow .bform .day.more { border-style: dashed; background: transparent; color: var(--g-faint); }
/* a day with nothing free, or no hours, stays on the strip with the word under it (14 Oct 2026, Gian): quiet ink, not a link */
.cflow .bform .day.full, .cflow .bform .day.closed { background: var(--g-paper); border-color: var(--g-rule); color: var(--g-faint); cursor: default; }     /* a full or closed day sits in the page's own colour, a quiet outline only (20 Oct 2026, Gian: "the same colour as the background of the page"; the shaded tile of 17 Oct is gone) */
.cflow .bform .day .state { color: var(--g-gold); font-size: .52rem; letter-spacing: .14em; margin-top: .1rem; }
.cflow .bform .day.on.full, .cflow .bform .day.on.closed { background: var(--g-paper); border-color: var(--g-olive); color: var(--g-olive); }
.cflow .bform .day.on.full small, .cflow .bform .day.on.closed small { color: var(--g-olive); }
.cflow .bform .onfile { margin: 0 0 .7rem; }
.cflow .bform .times { gap: .6rem; margin: .8rem 0; }
.cflow .bform .pill { min-height: 48px; padding: .6rem 1.1rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); color: var(--g-ink);
                      font-family: var(--g-fb); font-weight: 400; font-size: 1rem; letter-spacing: .04em; cursor: pointer; }
.cflow .bform .pill small { color: var(--g-faint); font-size: .72rem; font-weight: 300; }
.cflow .bform .pill:hover, .cflow .bform .pill:focus { border-color: var(--g-olive); color: var(--g-olive); background: var(--g-chosen); }
.cflow .bform .pill--now, .cflow .bform .pill--now:hover { display: inline-flex; align-items: center; gap: .4rem; background: var(--g-olive); border-color: var(--g-olive); color: var(--g-surface); cursor: default; }
.cflow .bform .pill--now small { color: rgba(244, 239, 230, .78); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; }
.cflow .bform .check.regular { gap: .7rem; padding: .8rem 1rem; margin: 0 0 .9rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); font-family: var(--g-fb); font-weight: 300; font-size: .95rem; color: var(--g-soft); }
.cflow .bform .check.regular input { accent-color: var(--g-olive); width: 20px; height: 20px; flex: none; margin: 2px 0 0; }
.cflow .bform details.pair { border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); padding: .6rem 1rem; }
.cflow .bform details.pair summary { font-family: var(--g-fb); font-weight: 400; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-olive); }
/* "Nearly there": the choice, the hold */
.cflow .bform .chosen { font-family: var(--g-fd); font-weight: 400; font-size: 1.45rem; line-height: 1.25; color: var(--g-ink); margin: .4rem 0 .9rem; background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: 0; padding: 1rem 1.1rem; }
.cflow .bform .chosen small { font-family: var(--g-fb); font-weight: 300; font-size: .95rem; line-height: 1.4; color: var(--g-soft); margin-top: .3rem; }
.cflow .bform .held { background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: 0; color: var(--g-olive-deep); font-family: var(--g-fb); font-weight: 400; font-size: .95rem; }
.cflow .bform .held.lapsed { background: var(--g-offer); border-color: var(--g-gold); color: #4a5230; }
/* Your bookings (/b/mine) */
.cflow .bform .mine { gap: .8rem; }
.cflow .bform .mine .row { background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: 0; padding: 1rem 1.1rem .9rem; }
.cflow .bform .mine .row h3 { font-family: var(--g-fd); font-weight: 400; font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--g-ink); margin: 0 0 .25rem; }
.cflow .bform .mine .row p { font-weight: 300; font-size: .95rem; color: var(--g-soft); }
.cflow .bform .mine .acts { gap: .5rem; }
.cflow .bform .mine .acts .btn { font-size: .66rem; letter-spacing: .2em; min-height: 40px; padding: .5rem .7rem; }
/* the regular booking's dates (/b/repeat) */
.cflow .bform .steps { list-style: none; margin: .6rem 0 1rem; padding: 0; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); }
.cflow .bform .step { display: flex; gap: .8rem; align-items: baseline; padding: .65rem 1rem; border-top: 1px solid var(--g-rule); font-family: var(--g-fd); font-size: 1.15rem; color: var(--g-ink); }
.cflow .bform .step:first-child { border-top: 0; }
.cflow .bform .step__n { flex: none; width: 1.2rem; font-family: var(--g-fb); font-size: .9rem; color: var(--g-olive); }
.cflow .bform .step--taken { color: var(--g-faint); }
.cflow .bform .step--taken .step__n { color: var(--g-faint); }
/* the questionnaire (/q, and on the Done screen) */
.cflow .qform h1 { font-family: var(--g-fd); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); letter-spacing: 0; text-transform: none; line-height: 1.1; margin: .4rem 0 .5rem; color: var(--g-ink); }
.cflow .qform .lead { font-family: var(--g-fb); font-weight: 300; font-size: 1.08rem; line-height: 1.55; color: var(--g-soft); margin: 0 0 1rem; }
.cflow .qform .q { background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: 0; padding: 1rem 1.1rem; margin: 0 0 .8rem; box-shadow: none; }
.cflow .qform .q h3 { font-family: var(--g-fd); font-weight: 400; font-size: 1.38rem; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--g-ink); margin: 0 0 .7rem; }
.cflow .qform .q .n { font-family: var(--g-fd); font-weight: 400; color: var(--g-gold); min-width: 1.5rem; }
.cflow .qform .q .opt { font-family: var(--g-fb); font-weight: 300; font-size: .95rem; color: var(--g-faint); }
.cflow .qform .opts { gap: .5rem; }
.cflow .qform .opts--after { margin-top: .6rem; }
.cflow .qform .allergies .other { display: none; margin-top: .5rem; }                                   /* 2 Oct: the box for "Other" */
.cflow .qform .allergies:has(select option[value="other"]:checked) .other { display: block; }
.cflow .qform .opts label { border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-paper); font-family: var(--g-fb); font-weight: 300; font-size: 1.05rem; color: var(--g-ink); min-height: 46px; padding: .55rem .95rem; }     /* a touch larger (2 Oct) */
.cflow .qform .opts label:has(input:checked) { border-color: var(--g-olive); background: var(--g-chosen); box-shadow: inset 0 0 0 1px var(--g-olive); }
.cflow .qform .opts input { accent-color: var(--g-olive); width: 18px; height: 18px; }
.cflow .qform .more input, .cflow .qform .more select, .cflow .qform .health textarea, .cflow .qform .story textarea { border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-paper);
       font-family: var(--g-fb); font-weight: 300; font-size: 1rem; color: var(--g-ink); }
.cflow .qform .more select { width: 100%; min-height: 46px; padding: 8px 12px; }
.cflow .qform .more input:focus, .cflow .qform .more select:focus, .cflow .qform .health textarea:focus, .cflow .qform .story textarea:focus { border-color: var(--g-gold); outline: none; box-shadow: 0 0 0 2px rgba(48, 56, 42, .18); }
.cflow .qform .health { border-left: 3px solid var(--g-olive-deep); background: var(--g-surface); }
.cflow .qform .private { font-family: var(--g-fb); font-weight: 300; font-size: .92rem; color: var(--g-olive-deep); }
.cflow .qform .onfile { background: var(--g-paper); border: 1px solid var(--g-rule); border-radius: 0; color: var(--g-olive-deep); }
.cflow .qform .hint { font-weight: 300; font-size: .9rem; color: var(--g-soft); }
.cflow .qform .consent { font-weight: 300; font-size: .92rem; line-height: 1.5; color: var(--g-soft); }
.cflow .qform .consent input { accent-color: var(--g-olive); }
.cflow .qform .send { min-height: 52px; font-size: .8rem; }
.cflow .qform .err { background: var(--g-err); border: 1px solid #E3C9BC; color: var(--g-err-ink); border-radius: 0; font-weight: 400; }
.cflow .qform .savestate { font-weight: 300; font-size: .85rem; color: var(--g-faint); }
.cflow .qform .savestate.saved { color: var(--g-olive); }
.cflow .qform .savestate.failed { color: var(--g-err-ink); }
/* the summary card on "Nearly there" and the pay page */
.cflow .gsum { display: grid; gap: .3rem; padding: 1rem 1.1rem; margin: 0 0 1rem; border: 1px solid var(--g-rule); background: var(--g-surface); }
.cflow .gsum__label { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--g-faint); }
.cflow .gsum__what { font-family: var(--g-fd); font-size: 1.45rem; line-height: 1.2; }
.cflow .gsum__price { font-family: var(--g-fd); font-size: 1.6rem; }
.cflow .gsum__price s { text-decoration-color: var(--g-gold); opacity: .6; font-weight: 300; font-size: .72em; margin-right: .35em; }
.cflow .gsum__for { font-weight: 300; color: var(--g-soft); font-size: .95rem; }
.cflow .gsum__remove { justify-self: end; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-faint); text-decoration: underline; text-decoration-color: var(--g-gold); text-underline-offset: 3px; }
.cflow .gsum__total { font-family: var(--g-fd); font-size: 1.3rem; margin: 0 0 .6rem; }
.cflow .gsum__add { display: inline-block; font-family: var(--g-fb); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-olive); text-decoration: none;
                    border: 1px solid var(--g-olive); border-radius: 0; padding: .7rem 1rem; margin: .2rem 0 .8rem; }
/* the plain pages: the thank-you, "This link isn't right", "No such page", and the pay page */
.cflow .done { text-align: center; padding: 2rem .5rem; }
.cflow .done h1 { font-family: var(--g-fd); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); letter-spacing: 0; text-transform: none; line-height: 1.1; color: var(--g-ink); }
.cflow .done p { font-weight: 300; line-height: 1.6; color: var(--g-soft); }
.cflow .done-actions { gap: .6rem; }
.cflow .done.pay { text-align: left; padding: .5rem 0; }
.cflow .done.pay h1 { font-size: 2.1rem; }
.cflow .done.pay .what { font-weight: 300; color: var(--g-soft); font-size: 1rem; }
.cflow .done.pay .big { font-family: var(--g-fd); font-size: 3rem; font-weight: 400; color: var(--g-ink); margin: .4rem 0; }
.cflow .done.pay .btn.pay { display: block; width: 100%; text-align: center; padding: 0 1.4rem; line-height: 52px; }

/* the October offer's screen (3 Oct 2026, views/offer.py): the gift cards and the modal, inside the booking page's skin */
.cflow .bform.offer h2 { margin-top: 1.4rem; }
.cflow .bform .friend { display: grid; gap: .6rem; margin: .6rem 0 .2rem; }
.cflow .bform .friend[hidden] { display: none; }
.cflow .bform .gifts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: .6rem 0 1rem; }
.cflow .bform .gift { position: relative; display: grid; gap: .3rem; align-content: start; padding: .7rem .75rem .8rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); cursor: pointer; }
.cflow .bform .gift input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cflow .bform .gift:has(input:checked) { border-color: var(--g-olive); box-shadow: inset 0 0 0 1.5px var(--g-olive); background: var(--g-chosen); }
.cflow .bform .gift:focus-within { outline: 2px solid var(--g-gold); outline-offset: 2px; }
.cflow .bform .gift__pic { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; background: var(--g-rule); }
.cflow .bform .gift__pic--none { display: grid; place-items: center; font-family: var(--g-fd); font-size: 2.4rem; color: var(--g-faint); }
.cflow .bform .gift__name { font-family: var(--g-fd); font-weight: 400; font-size: 1.15rem; line-height: 1.15; color: var(--g-ink); margin-top: .3rem; }
.cflow .bform .gift__sum { font-family: var(--g-fb); font-weight: 300; font-size: .82rem; line-height: 1.4; color: var(--g-soft); text-transform: none; letter-spacing: 0; }
.cflow .bform .gift__price { font-family: var(--g-fb); font-size: .85rem; color: var(--g-ink); text-transform: none; letter-spacing: 0; }
.cflow .bform .gift__price small { color: var(--g-faint); }
.cflow .bform .gift__more { justify-self: start; margin-top: .2rem; padding: .3rem .7rem; font-family: var(--g-fb); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g-olive); background: transparent; border: 1px solid var(--g-rule); border-radius: 0; cursor: pointer; }
.cflow .bform .gmodal { width: min(92vw, 30rem); max-height: 90vh; padding: 0; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-paper); color: var(--g-ink); overflow: auto; }
.cflow .bform .gmodal::backdrop { background: rgba(40, 36, 30, .55); }
.cflow .bform .gmodal.open { display: block; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; }
.cflow .bform .gmodal__pic { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cflow .bform .gmodal__text { padding: 1rem 1.1rem .4rem; }
.cflow .bform .gmodal__text h3 { font-family: var(--g-fd); font-weight: 400; font-size: 1.6rem; margin: .1rem 0 .2rem; }
.cflow .bform .gmodal__text h4 { font-family: var(--g-fb); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--g-faint); margin: .9rem 0 .3rem; }
.cflow .bform .gmodal__tag { font-style: italic; color: var(--g-soft); margin: 0 0 .4rem; }
.cflow .bform .gmodal__price { font-family: var(--g-fb); font-size: 1rem; margin: 0 0 .6rem; }
.cflow .bform .gmodal__price small { color: var(--g-faint); }
.cflow .bform .gmodal__desc, .cflow .bform .gmodal__text p { font-weight: 300; line-height: 1.5; }
.cflow .bform .gmodal__list, .cflow .bform .gmodal__ticks { margin: 0; padding-left: 1.1rem; font-weight: 300; line-height: 1.5; }
.cflow .bform .gmodal__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.cflow .bform .gmodal__chips span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g-olive); border: 1px solid var(--g-rule); padding: .25rem .55rem; }
.cflow .bform .gmodal__acts { display: grid; gap: .5rem; padding: .8rem 1.1rem 1.1rem; }
/* the October gift's banner on the booking page's first two screens (6 Oct 2026, Gian: "show that every massage in October comes with
   a free gift up to the value of R700 … make it noticeable"): gold-bordered, lifted, the headline in the display face */
.cflow .bform .gbanner { margin: 0 0 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--g-olive); border-radius: 0; background: var(--g-offer); box-shadow: none; }
.cflow .bform .gbanner__head { font-family: var(--g-fd); font-weight: 500; font-size: clamp(1.2rem, 1rem + 1vw, 1.45rem); line-height: 1.2; color: var(--g-olive); margin: 0 0 .35rem; }
.cflow .bform .gbanner__text { font-family: var(--g-fb); font-weight: 300; font-size: .92rem; line-height: 1.5; color: var(--g-soft); margin: 0; }
/* the voucher panel above the voucher box on "Nearly there" (15 Oct 2026, late, Gian: "highlight there the amount you get off … Make it
   noticeable"; the welcome voucher offered in the flow): the olive border and the offer ground of the gift banner, the amount off in the
   display face, the price struck through beside what is left to pay; the box under it is part of the same block */
.cflow .bform .vpanel { margin: 1.1rem 0 .4rem; padding: .95rem 1rem 1rem; border: 1px solid var(--g-olive); border-radius: 0; background: var(--g-offer); box-shadow: none; }
.cflow .bform .vpanel .field { margin: .7rem 0 .6rem; }
.cflow .bform .vpanel--offer .field { margin: .9rem 0 0; }
.cflow .bform .vpanel .field input { background: var(--g-paper); }
.cflow .bform .vpanel__eyebrow { font-family: var(--g-fb); font-weight: 400; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--g-olive); margin: 0 0 .3rem; }
.cflow .bform .vpanel__big { font-family: var(--g-fd); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem); line-height: 1.1; color: var(--g-olive); margin: 0 0 .25rem; }
.cflow .bform .vpanel__price { font-family: var(--g-fd); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--g-ink); margin: 0 0 .45rem; }
.cflow .bform .vpanel__price s { text-decoration: line-through; text-decoration-color: var(--g-olive); opacity: .55; font-weight: 300; font-size: .8em; margin-right: .3em; }
.cflow .bform .vpanel__text { font-family: var(--g-fb); font-weight: 300; font-size: .92rem; line-height: 1.5; color: var(--g-soft); margin: 0; }
.cflow .bform .vpanel__btn { display: block; width: 100%; min-height: 52px; margin: .8rem 0 .5rem; }
.cflow .bform .vpanel__small { font-family: var(--g-fb); font-weight: 300; font-size: .78rem; line-height: 1.45; color: var(--g-faint); margin: 0; }
.cflow .bform .vfield--applied input, .cflow .bform .vfield--offer input { border-color: var(--g-olive); }
.cflow .bform .vfield--applied input { font-family: var(--g-fd); font-weight: 500; font-size: 1.25rem; letter-spacing: .06em; color: var(--g-olive); }
.cflow .bform .vfield--applied span, .cflow .bform .vfield--offer span { color: var(--g-olive); }
.cflow .bform .vnote { margin: 1rem 0 0; }
.cflow .bform .offer-note { margin: .8rem 0; }
.cflow .bform .offer-note .btn { margin-top: .6rem; }
.cflow .bform .offer-h { margin-top: 1.2rem; }
.cflow .bform .cards.how { grid-template-columns: 1fr; }
.cflow .bform .cards.how .card b { font-size: 1.15rem; }
.cflow .bform textarea { width: 100%; font: inherit; font-weight: 300; padding: .7rem .8rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); color: var(--g-ink); resize: vertical; }
.cflow .done .how { margin: .8rem 0; display: grid; gap: .6rem; text-align: left; }
.cflow .done .how label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .7rem .8rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); font-weight: 300; cursor: pointer; }
.cflow .done .how label b { display: block; font-weight: 400; }
.cflow .done .how textarea { width: 100%; font: inherit; font-weight: 300; padding: .7rem .8rem; border: 1px solid var(--g-rule); border-radius: 0; background: var(--g-surface); color: var(--g-ink); }
.cflow .done .how[hidden] { display: none; }
.cflow .done .how label.field { grid-template-columns: 1fr; padding: .7rem .8rem .8rem; }     /* the address box under its label, not beside it (17 Oct, Gian's phone: the textarea squeezed to the right) */
.cflow .done .how label.field span { display: block; margin-bottom: .45rem; }
.cflow .done .how label.field textarea { min-height: 84px; }
.cflow .done .chosen-how { font-weight: 300; color: var(--g-soft); }
.cflow .done .chosen-how a { color: var(--g-olive); }

/* The order on the pay page (18 Oct 2026): products first with their picture, then massages, then vouchers; Remove on a line. */
.cflow .done.pay .olines { margin: .6rem 0 1rem; border-top: 1px solid var(--g-rule); }
.cflow .done.pay .oline { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--g-rule); }
.cflow .done.pay .oline__pic { width: 64px; height: 64px; object-fit: cover; background: var(--g-surface); }
.cflow .done.pay .oline--massage, .cflow .done.pay .oline--voucher { grid-template-columns: 1fr auto; }
.cflow .done.pay .oline__what { font-family: var(--g-fd); font-size: 1.25rem; line-height: 1.2; margin: 0; }
.cflow .done.pay .oline__sub { font-size: .85rem; color: var(--g-soft); margin: .15rem 0 0; font-weight: 300; }
.cflow .done.pay .oline__price { font-family: var(--g-fd); font-size: 1.35rem; margin: 0; white-space: nowrap; }
.cflow .done.pay .oline__price s { opacity: .55; font-size: .75em; margin-right: .35em; font-weight: 300; }
.cflow .done.pay .oline__form { display: inline; }
.cflow .done.pay .oline__act { background: none; border: 0; padding: 0; margin: .35rem 0 0; font-family: var(--g-fb); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-faint); text-decoration: underline; text-decoration-color: var(--g-gold); text-underline-offset: 3px; cursor: pointer; }
.cflow .done.pay .also { font-size: .9rem; }
.cflow .bform .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--g-olive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The number box's example reads as an example, not a number already typed (19 Oct 2026: a client on Reve's phone thought it was filled in). */
.cflow .bform .field.phone input::placeholder { color: var(--g-faint); opacity: .55; font-weight: 300; }
.cflow .bform .field.phone input:focus::placeholder { opacity: .2; }

/* The gift page's chosen-gift bar (19 Oct 2026): sticky at the top once a tile is tapped, with Change back to the tiles. */
.cflow .gbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; margin: 0 0 .8rem; padding: .7rem .9rem; background: var(--g-olive); color: var(--g-surface); }
.cflow .gbar[hidden] { display: none; }
.cflow .gbar__label { font-family: var(--g-fb); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 239, 230, .7); }
.cflow .gbar__what { font-family: var(--g-fd); font-weight: 400; font-size: 1.1rem; line-height: 1.2; min-width: 0; }
.cflow .gbar__change { background: transparent; border: 1px solid rgba(244, 239, 230, .55); color: var(--g-surface); border-radius: 0; padding: .45rem .8rem; font-family: var(--g-fb); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.cflow .bform .field input::placeholder, .cflow .bform .field textarea::placeholder { color: var(--g-faint); opacity: .5; }