@font-face { font-display: swap; font-family: "kmrMelangeGrotesk"; font-style: normal; font-weight: 400; src: url("https://www.stripeyste.com/_next/static/immutable/media/KMRMelangeGrotesk_Regular-s.p.2xk451emj9pcx.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "kmrMelangeGrotesk"; font-style: normal; font-weight: 700; src: url("https://www.stripeyste.com/_next/static/immutable/media/KMRMelangeGrotesk_Bold-s.p.1-c_8paoeqdrg.woff2") format("woff2"); }

:root { --theme-font-body: "kmrMelangeGrotesk", Arial, sans-serif; --theme-font-heading: "kmrMelangeGrotesk", Arial, sans-serif; }
body { background-color: #f5f5f7; font-family: "kmrMelangeGrotesk", Arial, sans-serif; }

/* Header: a white pill that scrolls away with the page (Paul, 2026-10-04):
   these pages are for doing one thing, so it need not follow the reader. */
:root body > site-header {
  background: #fff; border-radius: 999px; box-sizing: border-box; color: #0a0a0a;
  font-family: "kmrMelangeGrotesk", Arial, sans-serif; gap: 1.5rem;
  margin: .75rem max(1rem, calc((100% - 80rem) / 2)) 2.5rem; min-height: 4rem;
  padding: 0 1.5rem; z-index: 60;
}
:root body > site-header .site-logo img { max-height: none; max-width: none; width: 278px; }
:root body > site-header a { color: #525252; font-size: 1rem; font-weight: 500; letter-spacing: -.04em; text-decoration: none; transition: color .15s; }
:root body > site-header a:hover { color: #171717; }
:root body > site-header nav ul { gap: 1.5rem; }
:root body > site-header site-action a {
  background: #171717; border: 0; border-radius: 999px; color: #fafafa;
  font-size: .875rem; line-height: 1.25rem; padding: .5rem 1rem;
}
:root body > site-header site-action a:hover { background: rgb(23 23 23 / .8); color: #fafafa; }
:root body > site-header details.site-menu > nav { background: #fff; color: #0a0a0a; }

/* Footer: the dark band. */
:root body > site-footer {
  background: #0a0a0a; color: #fafafa; font-family: "kmrMelangeGrotesk", Arial, sans-serif;
  padding: 6rem max(2.25rem, calc((100% - 94.5rem) / 2)) .625rem;
}
:root body.buyer-journey > site-footer { margin-top: 4rem; }
:root body > site-footer .site-logo img { filter: brightness(0) invert(1); height: 2rem; max-height: none; width: auto; }
:root body > site-footer site-footer-head { margin-bottom: 4.75rem; }
:root body > site-footer .site-social a { color: #fafafa; }
:root body > site-footer site-footer-columns { display: flex; flex-wrap: wrap; gap: 2rem; }
:root body > site-footer site-footer-columns section { width: 14rem; }
:root body > site-footer h2 { color: #fafafa; font-family: inherit; font-size: 1.125rem; font-weight: 500; margin: 0 0 1.25rem; }
:root body > site-footer site-footer-columns ul { gap: .75rem; }
:root body > site-footer a { color: #a3a3a3; font-size: 1rem; text-decoration: none; }
:root body > site-footer a:is(:hover, :focus-visible) { text-decoration: underline; }
:root body > site-footer .site-image { margin-top: 4.75rem; width: 100%; }
:root body > site-footer .site-note { color: #a3a3a3; font-size: .875rem; margin-top: 2rem; }

@media (max-width: 1023px) {
  :root body > site-header { border-radius: 999px; margin: .75rem 1rem 1.75rem; min-height: 50px; padding: 0 1rem; position: static; }
  :root body > site-header .site-logo img { width: 180px; }
  :root main.pro-main:has(> .pro-card) { padding-inline: 2rem; }
}
@media (max-width: 599px) {
  :root body > site-header { gap: .5rem; }
  :root body > site-header .site-logo img { width: 148px; }
}
@media (max-width: 599px) {
  :root body > site-footer { padding: 4rem 1rem .625rem; }
}

/* Content pages: the reading column of www.stripeyste.com, no card. */
@font-face { font-display: swap; font-family: "sohneBuch"; font-style: normal; font-weight: 400; src: url("https://www.stripeyste.com/_next/static/immutable/media/SoehneWeb_Buch-s.p.27ywtzj7e58cv.woff2") format("woff2"); }

:root body.buyer-journey > main:has(> .static-page) {
  background: transparent; border-radius: 0; box-shadow: none;
  max-width: 896px; min-height: 0; padding: 4rem 1rem;

  &:before {display:none;}

  & footer {display:none;}
}
@media (min-width: 1024px) {
  :root body.buyer-journey > main:has(> .static-page) { padding: 4rem 0 6rem; }
}

.static-page .sp-content { color: #525252; font-family: "sohneBuch", Arial, sans-serif; font-size: 1.125rem; line-height: 1.556; }
.static-page .sp-content h1 { color: #0a0a0a; font-family: "kmrMelangeGrotesk", Arial, sans-serif; font-size: 3.75rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; margin: 0 0 2rem; }
.static-page .sp-content h1 strong { font-weight: inherit; }
@media (min-width: 1024px) { .static-page .sp-content h1 { font-size: 4.5rem; } }
.static-page .sp-content h2 { color: #0a0a0a; font-size: 1.5em; font-weight: 700; line-height: 1.333; margin: 2em 0 1em; }
.static-page .sp-content h2:before { display:none; }
.static-page .sp-content p, .static-page .sp-content ul, .static-page .sp-content ol { margin: 1.25em 0; }
.static-page .sp-content li { margin: .5em 0; padding-inline-start: .375em; }
.static-page .sp-content li::marker { color: #d1d5dc; }
.static-page .sp-content strong { color: #0a0a0a; font-weight: 600; }
.static-page .sp-content a { color: #171717; font-weight: 500; text-decoration: underline; }

/* Ticket page type, to the brand toolkit and www.stripeyste.com: Melange
   Grotesk at its regular weight for headlines and subheads (the site never
   sets a bold heading, and only Regular and Bold are loaded here, so a 600
   draws Bold), and Söhne Buch for body copy. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.pro-card h1 { font-weight: 400; letter-spacing: -.02em; }
.pro-content h2, .schedule-group h3, .step-heading { font-weight: 400; letter-spacing: -.02em; }
.step-choice-main { font-weight: 400; }
.step-chip, .checkout-button, .step-back { font-weight: 500; }
.pro-description { color: #525252; font-family: "sohneBuch", Arial, sans-serif; font-size: 1.125rem; line-height: 1.556; }

/* Ticket pages, in the shapes of www.stripeyste.com: words straight on the
   grey page with no white card, the page as wide as the header pill, grey
   cards with no border (the partner cards), pills for every button (black
   filled, or outlined), the partner tabs' white track with a black pill for
   the steps, and hairline rows like the winners list. */
/* The page's text lines up under the header's: the pill's edge plus its
   own inset (Paul, 2026-10-04). */
:root main.pro-main:has(> .pro-card) { padding: 2rem calc(max(1rem, calc((100% - 80rem) / 2)) + 1.5rem) 0; }
:root .pro-main .pro-card {
  background: transparent; border-radius: 0; box-shadow: none; max-width: none; overflow: visible;
  &::before { display: none; }
  & > footer { display: none; }
}
:root .pro-main .pro-content { padding: 0; }

/* The title and its line, as the site's section heads. */
:root .pro-main .pro-card h1 { color: #0a0a0a; font-size: clamp(2.25rem, 4vw, 3.75rem); letter-spacing: -.02em; line-height: 1; }
:root .pro-main .pro-description { margin-top: 1rem; }
:root .pro-main .pro-description event-description > strong:only-child { color: #525252; font-size: 1.5rem; }

/* "Primary schools tickets": an eyebrow, like ABOUT THE EVENT. */
:root .pro-main .pro-content [data-block="tickets"] > h2 {
  color: #0a0a0a; font-family: "kmrMelangeGrotesk", Arial, sans-serif; font-size: .875rem; font-weight: 400;
  letter-spacing: 0; margin: 3rem 0 1.25rem; text-transform: uppercase;
  &::before { display: none; }
}

/* Two columns that use the width. */
@media (min-width: 1024px) {
  :root .pro-main .purchase-cols[data-priced] { gap: 4rem; grid-template-columns: minmax(0, 1fr) 26rem; }
}

/* The steps: the partner tabs. A white pill track, the step you are on a
   black pill, the others plain words. */
:root .pro-main .checkout-steps { --step-accent: #171717; --step-heading-ink: #0a0a0a; --step-ink: #171717; --step-ink-muted: #525252; --step-link: #171717; }
:root .pro-main .step-progress {
  background: #fff; border-radius: 999px; display: inline-flex; gap: .25rem; margin: 0 0 2.5rem; max-width: 100%; padding: .5rem;
}
:root .pro-main .step-progress li { flex: none; }
:root .pro-main .step-chip {
  background: transparent; border-radius: 999px; color: #525252; font-size: 1rem; font-weight: 400; letter-spacing: -.01em; padding: .75rem 1.25rem;
}
:root .pro-main .step-progress li.done .step-chip { background: transparent; color: #171717; }
:root .pro-main .step-progress li.done .step-chip:hover { background: #f5f5f7; }
:root .pro-main .step-progress li.active .step-chip { background: #000; color: #fff; }
:root .pro-main .step-chip:disabled { color: #a3a3a3; opacity: 1; }

/* The question each step asks, as a subhead. */
:root .pro-main .step-heading { color: #0a0a0a; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 1.5rem; }

/* "Change date": the site's outlined pill. */
:root .pro-main .step-back {
  border: 1px solid #a3a3a3; border-radius: 999px; color: #171717; font-size: 1rem; margin: 0 0 1.5rem; padding: .625rem 1.25rem .625rem 2.5rem;
  &::before { inset-inline-start: 1.25rem; }
  &:hover { border-color: #171717; text-decoration: none; }
}

/* Dates and times: the partner cards. Grey, no border, generous corners,
   the price in the cards' darker pill. */
:root .pro-main .step-choice {
  background: #e8e8ec; border: 0; border-radius: 1.5rem; gap: .375rem; margin: 0 0 .75rem; padding: 1.5rem 1.75rem;
  &:hover:not(:disabled) { background: #dedee3; }
  &[aria-current] { background: #fff; box-shadow: inset 0 0 0 1.5px #171717; }
}
:root .pro-main .step-choice-main { color: #0a0a0a; font-family: "kmrMelangeGrotesk", Arial, sans-serif; font-size: 1.5rem; letter-spacing: -.02em; }
:root .pro-main .step-choice-sub { color: #525252; font-family: "sohneBuch", Arial, sans-serif; font-size: 1rem; }
:root .pro-main .step-choice:disabled {
  background: #efeff2; cursor: default; opacity: 1;
  & .step-choice-main, & .step-choice-sub { color: #6b6b6b; }
  & .step-choice-badge { background: #dcdce0; color: #404040; opacity: 1; }
}
/* The date step says only the date: how many times a day has is the next
   step's to show. The step is the first one, and on the time step the same
   line carries the session's name, so only the first step's goes. */
/* Which step is the date's: the first of three (date, time, tickets), or the
   second of four where the flow opens on "What are you booking?". */
:root .pro-main .checkout-steps:has(> .step-progress > li.active:first-child:nth-last-child(3)) .step-choice-sub { display: none; }
:root .pro-main .checkout-steps:has(> .step-progress > li.active:nth-child(2):nth-last-child(3)) .step-choice-sub { display: none; }
:root .pro-main .step-choice-badge { background: #d4d4d8; color: #171717; font-size: .9375rem; font-weight: 400; padding: .375rem .875rem; }

/* Ticket rows: the winners list's hairlines, the name as its row title. */
:root .pro-main ticket-list ticket-row { border-color: #d4d4d8; padding: 1.5rem 0; }
:root .pro-main ticket-list label { color: #0a0a0a; font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; }
:root .pro-main ticket-list .muted { color: #525252; font-family: "sohneBuch", Arial, sans-serif; font-size: 1rem; }
:root .pro-main ticket-list { margin-top: -1rem; }
/* On a phone the name takes the whole row and the price and stepper go
   under it, so a ticket name is never squeezed into one word a line. */
@media (max-width: 599px) {
  :root .pro-main ticket-list ticket-row { flex-wrap: wrap; row-gap: .75rem; }
  :root .pro-main ticket-list ticket-row > .grow { flex: 1 0 100%; }
  :root .pro-main ticket-list ticket-row > .price { margin-inline-end: auto; }
  :root .pro-main .step-progress { display: flex; }
  :root .pro-main .step-progress li { flex: 1 1 auto; min-width: 0; }
  :root .pro-main .step-chip { font-size: .9375rem; padding: .625rem .75rem; }
}
:root .pro-main ticket-list .price-main { color: #0a0a0a; font-size: 1.25rem; font-weight: 400; }
/* Melange's figures are tabular by default, which spaced every price out
   ("€ 1 8 9 . 0 0"); the site sets its numbers proportional. */
:root .pro-main :is(.price, .price-main, .price-was, [data-total], .step-choice-badge) { font-feature-settings: "pnum" 1, "tnum" 0; font-variant-numeric: proportional-nums; letter-spacing: normal; }
:root .pro-main ticket-list .qty {
  align-items: center; background: #fff; border-radius: 999px; padding: .25rem;
  & .step { background: transparent; border: 0; border-radius: 999px; }
  /* The symbol stays black on hover: the shop's own hover paints it in the
     background colour, for a dark circle, and this circle is light. */
  & .step:hover:not(:disabled) { background: #f5f5f7; color: #0a0a0a; }
  & input { background: transparent; border: 0; box-shadow: none; font-size: 1.125rem; }
}

/* The total and its buttons: a grey card, as the partner cards are. */
@media (min-width: 1024px) {
  :root .pro-main [data-priced] > .purchase-rail { background: #e8e8ec; border: 0; border-radius: 1.5rem; padding: .5rem; top: 5.75rem; }
}
:root .pro-main .purchase-rail .summary { border: 0; }
:root .pro-main .purchase-rail .summary summary { font-size: 1.25rem; font-weight: 400; }
:root .pro-main .purchase-rail .summary summary .price { font-weight: 400; }
:root .pro-main .checkout-button {
  background: #171717; border-radius: 999px; color: #fff; font-size: 1.125rem; font-weight: 400; min-height: 3.5rem;
  &:hover { background: rgb(23 23 23 / .85); }
}
:root .pro-main .quote-instead {
  background: transparent; border: 1px solid #a3a3a3; border-radius: 999px; color: #171717; font-size: 1rem; min-height: 3rem; width: 100%;
  &:hover { border-color: #171717; }
}

/* The free-ticket line: a grey pill of its own, never a side-stripe. */
:root .pro-main .recommend-hint { background: #e8e8ec; border: 0; border-radius: 1rem; color: #171717; padding: 1rem 1.25rem; }

/* Links in the words read as the site's do: dark and underlined. */
:root .pro-main .pro-description a { color: #171717; text-decoration: underline; }

/* The pages after Continue (details, payment, the order and its tickets), in
   the same shapes as the ticket page: words on the grey page, the order in a
   grey card, white fields, pill buttons. A page with the order beside its
   form takes the header's width; one column keeps the content pages'
   reading column. */
:root body.buyer-journey { background-color: #f5f5f7; }
:root body.buyer-journey > main:not(:has(> .static-page)) {
  background: transparent; border-radius: 0; box-shadow: none; max-width: 896px;
  padding: 2rem 1rem 4rem;
  &::before { display: none; }
  & > footer { display: none; }
}
:root body.buyer-journey > main:not(:has(> .static-page)):has(> checkout-cols) { max-width: 80rem; padding-inline: 1.5rem; }
:root body.buyer-journey checkout-bar { background: #f5f5f7; border-color: #d4d4d8; }
:root body.buyer-journey > main .bj-eyebrow { color: #0a0a0a; font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
:root body.buyer-journey > main > h1 { color: #0a0a0a; font-family: "kmrMelangeGrotesk", Arial, sans-serif; font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 400; letter-spacing: -.02em; line-height: 1; }
:root body.buyer-journey > main :is(h2, h3, legend) { color: #0a0a0a; font-weight: 400; letter-spacing: -.01em; }
:root body.buyer-journey > main label, :root body.buyer-journey > main label strong { color: #0a0a0a; font-weight: 400; }
:root body.buyer-journey > main :is(.muted, .hint) { color: #525252; }
:root body.buyer-journey > main .rows .row { border-color: #d4d4d8; }
:root body.buyer-journey > main a { color: #171717; }

/* Fields: white, a quiet edge, round corners; focus in the site's ink. */
:root body.buyer-journey > main :is(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea) {
  background-color: #fff; border: 1px solid #d4d4d8; border-radius: .75rem; color: #0a0a0a; font-size: 1rem; min-height: 3rem;
}
:root body.buyer-journey > main :is(input, select, textarea):focus-visible { border-color: #171717; outline: 2px solid #171717; outline-offset: 1px; }
:root body.buyer-journey > main :is(input[type=checkbox], input[type=radio]) { accent-color: #171717; }

/* Each ticket's own questions: a grey card head, as the partner cards. */
:root body.buyer-journey > main fieldset.co-attendee > legend,
:root body.buyer-journey > main fieldset.co-attendee > summary {
  background: #e8e8ec;
  border-bottom: 0;
  border-radius: 999px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: .65rem 1.25rem;
}

/* The order: a grey card, as on the ticket page. */
:root body.buyer-journey order-rail { background: #e8e8ec; border: 0; border-radius: 1.5rem; padding: 1.5rem; }
:root body.buyer-journey order-rail .row { border-color: #d4d4d8; }
:root body.buyer-journey :is(order-rail, checkout-bar) :is(.price, .rail-total) { font-feature-settings: "pnum" 1, "tnum" 0; font-variant-numeric: proportional-nums; letter-spacing: normal; }
:root body.buyer-journey order-rail .rail-total { font-weight: 400; }

/* The What you paid panel (Doc, 2026-10-05): a bold heading, and lines and
   button edges dark enough to read on the grey. Get directions opens a menu,
   so it is a <summary> rather than a link, and takes the links' weight here
   rather than the platform's 600. */
:root body.buyer-journey main order-rail > h2 { font-weight: 700; }
:root body.buyer-journey order-rail :is(.rows, .row, .rail-total) { border-color: #bbbbc1; }
:root body.buyer-journey order-rail :is(a.pill-link, summary.pill-link, .dir-menu > summary) { border-color: #bbbbc1; font-weight: 500; }

/* The buttons: the site's black pill. */
:root body.buyer-journey > main :is(checkout-bar button, button[type=submit]:not(.promo-apply, .quiet-link, [data-admission-cancel])) {
  background: #171717; border: 0; border-radius: 999px; color: #fff; font-size: 1.125rem; font-weight: 400; min-height: 3.5rem;
}
:root body.buyer-journey > main :is(checkout-bar button, button[type=submit]:not(.promo-apply, .quiet-link, [data-admission-cancel], [name=transfer_resend], .sim-paid, .sim-declined)):not(.busy):is(:hover, :focus-visible),
:root body.buyer-journey > main a.button:not(.secondary, .ghost):not(.busy):is(:hover, :focus-visible) {
  background: rgb(23 23 23 / .85); color: #fff; text-decoration: none;
}

/* "Send a new code" on Pay by bank transfer's code step: the second way on,
   so the outlined pill rather than a second black one. */
:root body.buyer-journey > main button[type=submit][name=transfer_resend] {
  background: transparent; border: 1px solid #a3a3a3; color: #171717;
  &:hover { background: transparent; border-color: #171717; }
  &.busy::after { border-color: #171717; border-top-color: transparent; }
}

/* Test mode's two outcomes keep the pill but say which they are in colour,
   as the product draws them: the successful payment solid green, the failed
   one a red outline. Its own state colours, not the site's black. The
   outline is an inset shadow so both pills keep the height of every other
   button here. Same weight as the pill rule above and after it, so it wins
   on order; the busy rule below still outweighs it. */
:root body.buyer-journey > main button[type=submit].sim-paid { background: var(--ok); color: #fff; }
:root body.buyer-journey > main button[type=submit].sim-paid:hover { background: color-mix(in srgb, var(--ok), #000 14%); }
:root body.buyer-journey > main button[type=submit].sim-declined { background: transparent; box-shadow: inset 0 0 0 1px var(--danger-ink); color: var(--danger-ink); }
:root body.buyer-journey > main button[type=submit].sim-declined:hover { background: color-mix(in srgb, var(--danger-ink) 8%, transparent); }

/* Yes/No answers and tick lists: white, the fields' edge, a black edge on
   the one chosen. */
:root body.buyer-journey > main .yesno .yn { background: #fff; border: 1px solid #d4d4d8; border-radius: .75rem; }
:root body.buyer-journey > main .yesno .yn:has(input:checked) { border-color: #171717; box-shadow: inset 0 0 0 1px #171717; }
:root body.buyer-journey > main .checkgroup { background: #fff; border: 1px solid #d4d4d8; border-radius: .75rem; overflow: hidden; }
:root body.buyer-journey > main .checkgroup .cg-opt { background: transparent; border-color: #ececf0; }

/* Link buttons are pills too: black for the one way on, outlined for the
   rest. The torn ticket band at the head of the card belongs to the card,
   which is gone. */
:root body.buyer-journey > main a.button { background: #171717; border: 0; border-radius: 999px; color: #fff; font-size: 1.125rem; font-weight: 400; min-height: 3.5rem; text-decoration: none; }
:root body.buyer-journey > main a.button.secondary, :root body.buyer-journey > main a.button.ghost { background: transparent; border: 1px solid #a3a3a3; color: #171717; }
:root body.buyer-journey > main .quiet-link { color: #171717; text-decoration: underline; }
:root body.buyer-journey > main > stub-band { display: none; }

/* Every figure proportional, as on the site: Melange's default tabular
   figures spaced each amount out wherever the base look sets numbers. */
:root body.buyer-journey > main *, :root .pro-main * { font-feature-settings: "pnum" 1, "tnum" 0; font-variant-numeric: proportional-nums; }

/* On a wide screen a field is as wide as what goes in it, not the column
   (Paul, 2026-10-03): a name or an email address in a 50rem box reads as a
   form that has lost its layout. A phone keeps them full width. */
@media (min-width: 600px) {
  :root body.buyer-journey > main :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=number]), select, textarea, .yesno, .checkgroup, .namefield) { max-width: 32rem; }
}

/* No coloured section marks (Paul, 2026-10-03: not part of Stripe's brand).
   They are the look's "pastel" section wash, drawn before every heading. */
:root body.buyer-journey main :is(h2, h3)::before, :root .pro-main .pro-content h2::before { display: none; }

/* No directions on the order and ticket pages: the date and venue line is
   the whole of the head, so it keeps the head's own space under it. */
:root body.buyer-journey head-row venue-links { display: none; }
:root body.buyer-journey head-row > .support { margin-block-end: 1.25rem; }

/* Links in a paragraph read as www.stripeyste.com sets them: dark, weight 500,
   underlined. Every other link on these pages is a control (a pill, a menu
   item, a row) and keeps the platform's own look, with no underline. The
   colour itself is the look's link colour (link_color), so nothing red is
   left to override; buttons and pills keep their own styles. */
:root :is(.pro-main, body.buyer-journey > main) a:not(.button, .checkout-button, .step-chip, [class*="btn"], [role="button"]) { font-weight: 500; }
:root :is(.pro-main, body.buyer-journey > main) p a:not(.button, .checkout-button, .step-chip, [class*="btn"], [role="button"]) { text-decoration: underline; text-underline-offset: .2em; }

/* "You're all set!" as the brand's band of circles (the "POWERED BY
   STRIPE.COM · 1965–2026" strip), in the brand's green #5bc768 (Paul,
   2026-10-03). A row of overlapping circles: the middle is one circle per
   tile, each tile narrower than the circle so neighbours meet at a pinch,
   and a whole circle at each end. The tick becomes the strip's black dot. */
:root body.buyer-journey > main .order-state {
  --os-h: 2.75rem;
  --os-r: calc(var(--os-h) / 2);
  --os-g: #5bc768;
  background:
    radial-gradient(circle var(--os-r) at var(--os-r) 50%, var(--os-g) calc(var(--os-r) - .5px), transparent var(--os-r)) no-repeat border-box,
    radial-gradient(circle var(--os-r) at calc(100% - var(--os-r)) 50%, var(--os-g) calc(var(--os-r) - .5px), transparent var(--os-r)) no-repeat border-box,
    radial-gradient(circle var(--os-r) at 50% 50%, var(--os-g) calc(var(--os-r) - .5px), transparent var(--os-r)) 0 0 / calc(var(--os-h) * .74) 100% round no-repeat content-box;
  background-clip: border-box, border-box, content-box;
  background-origin: border-box, border-box, content-box;
  box-sizing: border-box;
  color: #0a0a0a;
  display: inline-flex;
  font-family: "kmrMelangeGrotesk", Arial, sans-serif;
  font-size: .75rem;
  font-weight: 400;
  gap: .75rem;
  letter-spacing: .02em;
  line-height: 1;
  margin: 0 0 1.5rem;
  min-block-size: var(--os-h);
  /* The repeated circles start and end on the end circles' own centres,
     so every circle in the band is the same distance from the next; the
     words get their room from their own margins instead. */
  padding: 0 calc(var(--os-h) * .13);
  text-transform: uppercase;
  &::after { content: ""; flex: none; inline-size: .85rem; }
}
:root body.buyer-journey > main .order-state > .os-tick { background: #0a0a0a; block-size: .625rem; inline-size: .625rem; margin-inline-start: .85rem; }
:root body.buyer-journey > main .order-state > .os-tick svg { display: none; }

/* The school-type chooser (content page "School group booking", Paul,
   2026-10-04): last year's first step. In the website's own type (Paul,
   2026-10-05): its section heading (text-5xl, lg:text-6xl, tracking -0.02em,
   line-height 1) and its default button (a #171717 pill, kmrMelangeGrotesk
   500, tracking -0.04em, 16px/24px, px-6 py-3.5, sentence case, 80% on
   hover). The two school types sit side by side, centred. Scoped to this one
   page by its piece id, so the Terms page keeps its reading layout. */
.static-page .sp-content[data-src="content:3"] { column-gap: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.static-page .sp-content[data-src="content:3"] > :not(.sp-button-row) { flex-basis: 100%; }
.static-page .sp-content[data-src="content:3"] h1 { font-size: 3rem; letter-spacing: -.02em; line-height: 1; margin: 3rem 0 2.5rem; }
.static-page .sp-content[data-src="content:3"] > p:not(.sp-button-row) { color: #525252; margin: 0 0 1.5rem; }
.static-page .sp-content[data-src="content:3"] .sp-button-row { margin: 0 0 .75rem; }
.static-page .sp-content[data-src="content:3"] .sp-button { align-items: center; background: #171717; border: 1px solid transparent; border-radius: 999px; box-shadow: none; color: #fafafa; display: inline-flex; font-family: "kmrMelangeGrotesk", Arial, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.5rem; padding: .875rem 1.5rem; text-decoration: none; text-transform: none; transition: background-color .15s; }
.static-page .sp-content[data-src="content:3"] .sp-button:hover { background: color-mix(in srgb, #171717 80%, transparent); }
.static-page .sp-content[data-src="content:3"] .sp-button:focus-visible { outline: 3px solid #737373; outline-offset: 2px; }
@media (min-width: 64rem) {
  .static-page .sp-content[data-src="content:3"] h1 { font-size: 3.75rem; }
}

/* A busy button shows its spinner IN PLACE of its words, never over them
   (Paul, 2026-10-04). The two pill rules above paint the label white with
   more weight than the shop's own button.busy can reach, so the busy state
   is restated here at their weight, after them. */
:root .pro-main .checkout-button.busy,
:root body.buyer-journey > main :is(checkout-bar button, button[type=submit]:not(.promo-apply, .quiet-link, [data-admission-cancel])).busy { color: transparent; }

/* The ring on a chosen date or time sits at the card's centre-right, inside
   its padding: the shop's corner spot fell into these cards' big curve. A
   price badge there gives the ring its place while it spins, so the ring
   never lands on top of the price. */
:root .pro-main .step-choice.chosen::after { bottom: 0; margin-block: auto; right: 1.75rem; top: 0; }
:root .pro-main .step-choice.chosen .step-choice-badge { visibility: hidden; }

/* The promotion box in the total's grey card (2026-10-04): a white field and
   a white pill, so both stand out from the card, with edges dark enough for
   the 3:1 a control's boundary needs against white and against the grey. */
:root .pro-main .purchase-rail .promo-row input {
  background: #fff; border: 1px solid #8e8e93; border-radius: .75rem; color: #0a0a0a; min-height: 3rem;
  &::placeholder { color: #6b6b6b; }
  &:focus-visible { border-color: #171717; outline: 2px solid #171717; outline-offset: 1px; }
}
:root .pro-main .purchase-rail button.promo-apply {
  background: #fff; border: 1px solid #8e8e93; border-radius: 999px; color: #171717; font-weight: 500; min-height: 3rem; padding-inline: 1.25rem;
  &:hover { border-color: #171717; }
}

/* 96px from the last of the content to the top of the footer. */
:root .pro-card > .pro-content > :last-child { margin-bottom: 0; }
:root body > .pro-shell + site-footer { margin-top: 6rem; }

/* "Add to order" in the free-ticket line: the promo Apply button's white
   pill, not an underlined link. */
:root .pro-main .recommend-hint .earn-add {
  background: #fff; border: 1px solid #8e8e93; border-radius: 999px; color: #171717;
  font-size: .9375rem; font-weight: 500; padding: .5rem 1.25rem; text-decoration: none;
  &:hover { background: #fff; border-color: #171717; }
}

/* Their theme draws its own footer, so hide Tito's plain account footer
   wherever the two appear together. */
body > site-footer ~ account-footer { display: none; }

.quote-instead:hover {
  text-decoration: none;
}

/* Pay by bank transfer: the quote button's outlined pill, between the
   checkout button and the quote button. */
[data-purchase-footer] { display: flex; flex-direction: column; gap: 1rem; }
[data-purchase-footer] :is(.transfer-instead, .quote-instead) { margin: 0; }
:root .pro-main [data-purchase-footer] .transfer-instead {
  background: transparent; border: 1px solid #a3a3a3; border-radius: 999px; box-sizing: border-box;
  color: #171717; font-size: 1rem; font-weight: 400; min-height: 3rem; padding: .25rem .5rem; width: 100%;
  &:hover { background: transparent; border-color: #171717; }
  /* The spinner in place of the words, in ink, not white on the grey. */
  &.busy { color: transparent; }
  &.busy::after { border-color: #171717; border-top-color: transparent; }
}

/* General public flow: no "booking for a company" option */
form:has(input[name="flow"][value="general-public"]) label.check:has(input[name="is_company"]),
form:has(input[name="flow"][value="general-public"]) company-block {
  display: none;
}

/* Arrival-window note under the time step's heading:
   primary and secondary school flows only */
body:is(:has(input[name="flow"][value="primary-schools"]),
        :has(input[name="flow"][value="secondary-schools"]))
  :is(.checkout-steps:has(.step-progress > li.active:nth-last-child(2)) .step-panel > .step-heading,
      fieldset.session-picker > legend)::after {
  content: "Please arrive during your selected window. Your group can stay for 2.5 hours.";
  display: block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 0.5rem;
  opacity: 0.75;
}

/* Step chips: the "1. " is bare text in the button; the step's name is its <span>. */

.step-progress .step-chip > span { margin-inline-start: .15em; }

/* "You can pay by card instead." on Pay by bank transfer: a link in a
   sentence, which submits the form, so it is a button underneath. */
:root body.buyer-journey > main transfer-card button.quiet-link[type=submit] {
  color: #171717; font-weight: 500; text-decoration: underline; text-underline-offset: .2em;
}

/* The free-ticket line in sentence case: ticket names arrive capitalised
   mid-sentence ("1 free Primary school teacher ticket"). ::first-letter
   only works on a block, and the line itself is a flex row, so the case is
   set on the span that holds the words. The Add button is outside that span
   and keeps its own case. */
.recommend-hint > :is([data-earn-words], [data-companion-words]) { text-transform: lowercase; }
.recommend-hint > :is([data-earn-words], [data-companion-words])::first-letter { text-transform: uppercase; }

/* The plain "we recommend" line has no span: its words sit straight in the
   flex row. It has nothing else in it, so it can be a block, which gives
   ::first-letter something to work on. */
.recommend-hint:not([hidden], :has(> *)) { display: block; text-transform: lowercase; }
.recommend-hint:not([hidden], :has(> *))::first-letter { text-transform: uppercase; }

/* Free tickets (the page checkout asks before pricing): its sentence in
   sentence case, like the line on the ticket page. It is the page's only
   plain paragraph apart from the eyebrow. */
:root body.buyer-journey > main:has(> #checkout-earn-free) > p:not(.bj-eyebrow) { text-transform: lowercase; }
:root body.buyer-journey > main:has(> #checkout-earn-free) > p:not(.bj-eyebrow)::first-letter { text-transform: uppercase; }

/* The order summary's free-ticket line, in the same case as the notice
   under the tickets: "6 primary school teacher tickets free with 100
   primary school student tickets". The line starts with its count, so it
   needs no capital letter put back. */
[data-summary-line="free"] > :first-child { text-transform: lowercase; }

/* "No thanks, continue": the outlined pill, full width under Add to order.
   The form's id outweighs the black-pill and hover rules above, so the busy
   state is restated here: the spinner in ink, with the words gone at once. */
:root #checkout-earn-free button[name=claim_free][value="0"] {
  background: transparent; border: 1px solid #a3a3a3; border-radius: 999px; box-sizing: border-box;
  color: #171717; font-size: 1.125rem; min-height: 3.5rem; width: 100%;
  &:is(:hover, :focus-visible) { background: transparent; border-color: #171717; color: #171717; }
  &.busy { color: transparent; transition: none; }
  &.busy::after { border-color: #171717; border-top-color: transparent; }
}

/* Hide the price change on arrival windows. "Fully booked" still shows. */
.step-choice:not(:disabled) .step-choice-badge,
.session-row:not([data-shut]) .session-note {
  display: none;
}

/* The callout's button ("Complete your details", "Name your attendees"):
   the platform colours its text, which beat the black pill's white. */
:root body.buyer-journey > main callout > .co-act > a.button:not(.primary) {
  background: #171717; border: 0; color: #fff; min-height: 2.5rem;
}

/* The language picker: under the header pill, its right edge in line with
   the Login button, the same way the page's text lines up under the logo on
   the left. It is pulled up to sit closer to the header, and its bottom
   margin grows by the same amount, so the ticket page below doesn't move. */
:root body > .pro-shell > .lang-switch {
  margin: -1.5rem calc(max(1rem, calc((100% - 80rem) / 2)) + 1.5rem) 2.05rem auto;
}
@media (max-width: 1023px) {
  :root body > .pro-shell > .lang-switch { margin: -.75rem 2rem 1.3rem auto; }
}

/* No Login button: neither the black pill in the header nor its row in the
   phone menu. */
:root body > site-header site-action,
:root body > site-header details.site-menu li:has(> a[href^="https://enter.yste.ie"]) { display: none; }

/* Portal pages: the header gives the portal's name instead of linking back
   to the main site. Every portal page has a link or form that points into
   /portals/, so this matches portal pages and no others. */
:root body:has(main :is([href*="/portals/"], [action*="/portals/"])) > site-header :is(nav, details.site-menu, site-action) { display: none; }
:root body:has(main :is([href*="/portals/"], [action*="/portals/"])) > site-header::after {
  color: #0a0a0a; content: "SPONSORSHIP PORTAL";
  font-size: .875rem; font-weight: 700; letter-spacing: .08em;
}

/* The invitation's two answers (Paul, 2026-10-22): side by side and sized to
   their words, rather than the full-height black pill every other submit
   button here wears. "I'm attending" keeps the black pill; "I'm not
   attending" is the site's outlined pill. [name=response] is only ever on
   the invitation's answers (the details step's and the code step's groups
   have no such name), and it is also what out-ranks the pill rule above. */
:root body.buyer-journey > main button-group:has(> button[name=response]) { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
:root body.buyer-journey > main button-group > button[type=submit][name=response] { font-size: 1rem; min-height: 2.75rem; padding: .625rem 1.5rem; width: auto; }
:root body.buyer-journey > main button-group > button[type=submit][name=response][value=no] { background: transparent; box-shadow: inset 0 0 0 1px #a3a3a3; color: #171717; }
:root body.buyer-journey > main button-group > button[type=submit][name=response][value=no]:not(.busy):is(:hover, :focus-visible) { background: rgb(23 23 23 / .06); color: #171717; }

:root body.buyer-journey > main:not(:has(> .static-page)) .as-head { background: #f5f5f7; }

/* On a phone: the page's edge is the header pill's, and the steps stack
   one to a line so each answer reads in full (Doc, 2026-10-26). */
@media (max-width: 599px) {
  :root main.pro-main:has(> .pro-card) { padding-inline: 1rem; }
  :root .pro-main .step-progress { border-radius: 1.5rem; flex-direction: column; gap: .25rem; }
  :root .pro-main .step-progress li { flex: none; }
  :root .pro-main .step-chip { padding: .625rem 1rem; text-align: start; white-space: normal; }
}

.ticket-includes,
br:has(+ .ticket-includes) {
  display: none;
}

@container (width < 34rem) {
  ticket-row:not([donation]) > div.price {
    justify-self: start;
    text-align: left;
  }
}

/* The "add a companion" line: the sentence takes the whole first row (next
   to the red badge when it shows), so the Add buttons always drop below it
   together instead of splitting across two rows. */
:root .pro-main .recommend-hint.companion > [data-companion-words] { flex: 1 1 calc(100% - 1.65rem); }
:root .pro-main .recommend-hint.companion:not(.bad) > [data-companion-words] { flex-basis: 100%; }
/* Start the buttons under the sentence, not under the badge. */
:root .pro-main .recommend-hint.companion.bad > [data-companion-add]:first-of-type { margin-left: 1.65rem; }

body.buyer-journey .portal-head h1 { margin-block: 1rem .1rem; }