/* ==========================================================================
   STT Forms — structure + the token contract every skin fills in
   Override the --sttf-* tokens from a skin (assets/themes/*.css) to rebrand.

   Isolation: this widget is dropped into sales pages whose own CSS styles
   every button, input and heading. Structural rules are scoped with
   .sttf:not(#sttf-a):not(#sttf-b) — the two :not(#id) add ID-level weight
   without needing an id on the element, so a host rule needs two ids or
   !important to beat us. Tokens stay at low specificity so skins win.
   !important is reserved for the non-negotiables: 16px inputs, 44px targets,
   the focus ring, [hidden].
   ========================================================================== */

.sttf {
  --sttf-surface: #ffffff;
  --sttf-surface-2: #f5f8fa;
  --sttf-ink: #0c1420;
  --sttf-ink-2: #44576d;
  --sttf-ink-3: #66788c;
  --sttf-line: #d8e0e8;
  --sttf-line-2: #c3ceda;
  --sttf-accent: #1572bd;
  --sttf-accent-ink: #ffffff;
  --sttf-accent-soft: #e7f1fa;
  --sttf-good: #1c7a52;
  --sttf-good-soft: #e5f3ec;
  --sttf-danger: #b42318;
  --sttf-danger-soft: #fdecea;
  --sttf-radius: 12px;
  --sttf-font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sttf-display: "Archivo", var(--sttf-font);
  --sttf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sttf-stage-min: 250px;

  /* derived — skins may set these, otherwise they follow the six above */
  --sttf-accent-fill: var(--sttf-accent);
  --sttf-accent-fill-hover: var(--sttf-accent-fill);
  --sttf-accent-text: var(--sttf-accent);
  --sttf-field-line: var(--sttf-line-2);
  --sttf-shadow: none;
  --sttf-btn-shadow: none;
  --sttf-field-bg: var(--sttf-surface);        /* text boxes and choice rows */
  --sttf-field-shadow: none;
  /* call-to-action buttons (Next, Confirm, calendar links, sticky bar) — a
     skin can give them their own colour; by default they are the accent */
  --sttf-cta: var(--sttf-accent-fill);
  --sttf-cta-hover: var(--sttf-accent-fill-hover);
  --sttf-cta-ink: var(--sttf-accent-ink);
  --sttf-cta-shadow: var(--sttf-btn-shadow);
  --sttf-glow: rgba(21, 114, 189, .16);
  --sttf-skel-sheen: rgba(255, 255, 255, .55);
  --sttf-ease: cubic-bezier(.2, .8, .2, 1);

  font-family: var(--sttf-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sttf-ink);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  .sttf:not([data-sttf-theme="light"]) {
    --sttf-surface: #121d29;
    --sttf-surface-2: #18242f;
    --sttf-ink: #e9eff5;
    --sttf-ink-2: #a8b9c8;
    --sttf-ink-3: #8a9bac;
    --sttf-line: #25343f;
    --sttf-line-2: #344654;
    --sttf-accent: #56a8e8;
    --sttf-accent-ink: #06121d;
    --sttf-accent-soft: #132840;
    --sttf-good: #58c397;
    --sttf-good-soft: #10281f;
    --sttf-danger: #f08a7d;
    --sttf-danger-soft: #3a1c1a;
    --sttf-glow: rgba(86, 168, 232, .2);
    --sttf-skel-sheen: rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}

.sttf[data-sttf-theme="dark"] {
  --sttf-surface: #121d29;
  --sttf-surface-2: #18242f;
  --sttf-ink: #e9eff5;
  --sttf-ink-2: #a8b9c8;
  --sttf-ink-3: #8a9bac;
  --sttf-line: #25343f;
  --sttf-line-2: #344654;
  --sttf-accent: #56a8e8;
  --sttf-accent-ink: #06121d;
  --sttf-accent-soft: #132840;
  --sttf-good: #58c397;
  --sttf-good-soft: #10281f;
  --sttf-danger: #f08a7d;
  --sttf-danger-soft: #3a1c1a;
  --sttf-glow: rgba(86, 168, 232, .2);
  --sttf-skel-sheen: rgba(255, 255, 255, .06);
  color-scheme: dark;
}

/* ---- reservation before mount: no layout jump when the card arrives ---- */

[data-sttform]:not([data-sttf-ready]) {
  display: block;
  min-height: 420px;
  border-radius: 12px;
  background: rgba(127, 127, 127, .08);
}

/* ---- reset: host page CSS stops here ---- */

.sttf:not(#sttf-a):not(#sttf-b) {
  font-family: var(--sttf-font);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  white-space: normal;
  color: var(--sttf-ink);
  visibility: visible;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-placement] { display: block; width: 100%; max-width: 100%; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b), .sttf:not(#sttf-a):not(#sttf-b) *, .sttf:not(#sttf-a):not(#sttf-b) *::before, .sttf:not(#sttf-a):not(#sttf-b) *::after { box-sizing: border-box; }
.sttf:not(#sttf-a):not(#sttf-b) * {
  margin: 0; padding: 0; border: 0 solid transparent;
  background: none; box-shadow: none; text-shadow: none;
  float: none; transform: none; filter: none;
  min-width: 0; max-width: none;
  list-style: none; text-decoration: none;
  font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit;
  text-transform: inherit; text-align: inherit; white-space: inherit;
  vertical-align: baseline; overflow-wrap: break-word;
  animation: none; transition: none;
}
.sttf:not(#sttf-a):not(#sttf-b) *::before, .sttf:not(#sttf-a):not(#sttf-b) *::after { content: none; }
.sttf:not(#sttf-a):not(#sttf-b) button, .sttf:not(#sttf-a):not(#sttf-b) input, .sttf:not(#sttf-a):not(#sttf-b) select, .sttf:not(#sttf-a):not(#sttf-b) a, .sttf:not(#sttf-a):not(#sttf-b) label { all: unset; box-sizing: border-box; }
.sttf:not(#sttf-a):not(#sttf-b) :focus-visible:not([tabindex="-1"]) { outline: 2px solid var(--sttf-accent) !important; outline-offset: 2px !important; }
.sttf:not(#sttf-a):not(#sttf-b) [tabindex="-1"]:focus { outline: none; }
.sttf:not(#sttf-a):not(#sttf-b) input, .sttf:not(#sttf-a):not(#sttf-b) select { font-size: 16px !important; }             /* below 16px iOS zooms on focus */
.sttf:not(#sttf-a):not(#sttf-b) [hidden] { display: none !important; }
.sttf:not(#sttf-a):not(#sttf-b) button, .sttf:not(#sttf-a):not(#sttf-b) a, .sttf:not(#sttf-a):not(#sttf-b) input, .sttf:not(#sttf-a):not(#sttf-b) select { scroll-margin-top: var(--sttf-scroll-offset, 72px); }
.sttf:not(#sttf-a):not(#sttf-b) svg { display: block; width: 20px; height: 20px; max-width: none; flex: none; overflow: visible; }
.sttf:not(#sttf-a):not(#sttf-b) input:-webkit-autofill {
  -webkit-text-fill-color: var(--sttf-ink);
  caret-color: var(--sttf-ink);
  box-shadow: 0 0 0 1000px var(--sttf-surface) inset;
  transition: background-color 9999s;
}
.sttf:not(#sttf-a):not(#sttf-b) ::placeholder { color: var(--sttf-ink-3); opacity: 1; }

/* Words break only when they must; an email address (one long "word") may break anywhere. */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__done-sent, .sttf:not(#sttf-a):not(#sttf-b) .sttf__terminal .sttf__hint, .sttf:not(#sttf-a):not(#sttf-b) .sttf__empty, .sttf:not(#sttf-a):not(#sttf-b) .sttf__given-value, .sttf:not(#sttf-a):not(#sttf-b) .sttf__alert-body { overflow-wrap: anywhere; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__sr-only, .sttf:not(#sttf-a):not(#sttf-b) .sttf__sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ======================== the card ======================== */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__card {
  position: relative;
  background: var(--sttf-surface);
  border: 1px solid var(--sttf-line);
  border-radius: var(--sttf-radius);
  box-shadow: var(--sttf-shadow);
  overflow: hidden;
  max-width: 100%;
  transition: box-shadow .9s ease;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__card[data-sttf-flash] {
  box-shadow: 0 0 0 3px var(--sttf-accent), 0 0 0 9px var(--sttf-glow), var(--sttf-shadow);
  transition: none;
}

.sttf:not(#sttf-a):not(#sttf-b) .sttf__track { display: block; height: 3px; background: var(--sttf-line); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__track i {
  display: block; height: 100%; width: 0;
  background: var(--sttf-accent);
  transition: width .32s cubic-bezier(.4, 0, .2, 1), background-color .3s;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__track--seg { display: flex; gap: 3px; background: transparent; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__track--seg b { display: block; flex: 1 1 0; height: 100%; background: var(--sttf-line); overflow: hidden; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="done"] .sttf__track i { background: var(--sttf-good); }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__body { display: block; padding: 20px 18px 18px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="m"] .sttf__body { padding: 26px 24px 22px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__body { padding: 30px 28px 24px; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__meta {
  display: block;
  font-family: var(--sttf-mono);
  font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: .07em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--sttf-ink-3);
  margin: 0 0 10px;
}

.sttf:not(#sttf-a):not(#sttf-b) .sttf__title {
  display: block;
  font-family: var(--sttf-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.26;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--sttf-ink);
}
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="m"] .sttf__title, .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__title { font-size: 22px; }
/* questions read at a glance: bigger and tighter, with the greeting as a small lead */
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="questions"] .sttf__title { font-size: 23px; font-weight: 700; line-height: 1.22; letter-spacing: -.02em; margin-bottom: 22px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="questions"][data-sttf-w="m"] .sttf__title,
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="questions"][data-sttf-w="l"] .sttf__title { font-size: 27px; margin-bottom: 26px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__title-lead {
  display: block; margin-bottom: 8px;
  font-family: var(--sttf-font); font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: 0;
  color: var(--sttf-accent-text);
}
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="m"] .sttf__title-lead, .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__title-lead { font-size: 16px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="done"] .sttf__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="done"][data-sttf-w="m"] .sttf__title, .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-phase="done"][data-sttf-w="l"] .sttf__title { font-size: 28px; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__stage { display: block; min-height: 0; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="m"] .sttf__stage, .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__stage { min-height: var(--sttf-stage-min); }
@media (min-height: 601px) {
  /* picker → review → confirmation shouldn't bounce a centered card */
  .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="m"]:not([data-sttf-phase="questions"]) .sttf__stage,
  .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"]:not([data-sttf-phase="questions"]) .sttf__stage { min-height: 420px; }
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__stage[data-sttf-enter="fwd"] { animation: sttf-in-fwd .2s var(--sttf-ease) both; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__stage[data-sttf-enter="back"] { animation: sttf-in-back .2s var(--sttf-ease) both; }
@keyframes sttf-in-fwd { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes sttf-in-back { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* ---- choice options ---- */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__opts { display: flex; flex-direction: column; gap: 10px; }

/* each row: a key badge (A, B, C… — the keys work), the answer, a check once picked */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  font-size: 16px; font-weight: 500; line-height: 1.4;
  text-align: left;
  padding: 12px 16px 12px 12px;
  min-height: 58px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-line-2);
  background: var(--sttf-field-bg);
  box-shadow: var(--sttf-field-shadow);
  color: var(--sttf-ink);
  cursor: pointer;
  transition: border-color .14s, background-color .14s, box-shadow .14s, transform .14s var(--sttf-ease);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt-key {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--sttf-line-2); background: var(--sttf-surface);
  font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--sttf-ink-3);
  transition: background-color .14s, border-color .14s, color .14s;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt-text { flex: 1 1 auto; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt-check {
  flex: none; width: 20px; height: 20px; color: var(--sttf-accent-text);
  opacity: 0; transform: scale(.6); transition: opacity .16s, transform .16s var(--sttf-ease);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-pressed="true"] {
  border-color: var(--sttf-accent);
  background: var(--sttf-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sttf-accent);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-pressed="true"] .sttf__opt-key { background: var(--sttf-accent-fill); border-color: transparent; color: var(--sttf-accent-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-pressed="true"] .sttf__opt-check { opacity: 1; transform: none; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__opt { gap: 12px; padding-left: 10px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__opt-key { width: 28px; height: 28px; }

/* ---- "pick one or more" (a flow's multi question): checkbox rows, the hint above them,
   Continue marked disabled until one is ticked ---- */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__multi-hint { margin: -4px 0 12px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__multi-hint[data-sttf-need] { color: var(--sttf-danger); font-weight: 600; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt-box { border-radius: 6px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt-tick { width: 18px; height: 18px; opacity: 0; transform: scale(.6); transition: opacity .16s, transform .16s var(--sttf-ease); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-checked="true"] {
  border-color: var(--sttf-accent);
  background: var(--sttf-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sttf-accent);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-checked="true"] .sttf__opt-box { background: var(--sttf-accent-fill); border-color: transparent; color: var(--sttf-accent-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-checked="true"] .sttf__opt-tick { opacity: 1; transform: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__stage[data-sttf-kind="multi"] + .sttf__foot .sttf__next[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__given-picks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---- text fields ---- */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__field { display: flex; flex-direction: column; gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__label { display: block; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__control { position: relative; display: block; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field input {
  display: block; width: 100%;
  font-size: 17px !important; line-height: 24px;               /* over the 16px floor: easier to read back */
  padding: 15px 44px 15px 16px;
  min-height: 56px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-field-line);
  background: var(--sttf-field-bg);
  box-shadow: var(--sttf-field-shadow);
  color: var(--sttf-ink);
  caret-color: var(--sttf-accent);
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__control--ico input { padding-left: 48px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field input::placeholder { color: var(--sttf-ink-3); opacity: .85; }
/* one crisp ring: the 2px outline sits on the border, with a soft glow outside it */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field input:focus, .sttf:not(#sttf-a):not(#sttf-b) .sttf__field input:focus-visible {
  border-color: var(--sttf-accent);
  outline: 2px solid var(--sttf-accent) !important; outline-offset: -1px !important;
  box-shadow: 0 0 0 4px var(--sttf-glow);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field-ico {
  position: absolute; left: 16px; top: 50%; margin-top: -10px; width: 20px; height: 20px;
  color: var(--sttf-ink-3); pointer-events: none; transition: color .15s;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__control:focus-within .sttf__field-ico { color: var(--sttf-accent-text); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__ok {
  position: absolute; right: 14px; top: 50%; margin-top: -10px; width: 20px; height: 20px;
  color: var(--sttf-good); pointer-events: none;
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s var(--sttf-ease);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field[data-sttf-ok] .sttf__ok { opacity: 1; transform: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field[data-sttf-ok] .sttf__field-ico { color: var(--sttf-good); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field input[aria-invalid="true"] { border-color: var(--sttf-danger); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__field input[readonly] { opacity: .7; }
/* phone: a country picker beside the number. The <select> is real and covers
   the compact "flag +1" face, so taps and keys go to the native picker. */
/* the number never gets narrower than a long number needs: on the smallest
   phones the row wraps and the picker sits above a full-width box */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tel .sttf__control { flex: 1 1 185px; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc { position: relative; display: flex; flex: none; min-width: 44px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc-face {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 56px; padding: 0 8px 0 12px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-field-line);
  background: var(--sttf-field-bg); box-shadow: var(--sttf-field-shadow); color: var(--sttf-ink);
  font-size: 16px; line-height: 20px; white-space: nowrap; overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc-flag { font-size: 18px; line-height: 20px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc-chev { width: 20px; height: 20px; flex: none; color: var(--sttf-ink-3); transform: rotate(90deg); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc-select {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc:focus-within .sttf__cc-face { border-color: var(--sttf-accent); outline: 2px solid var(--sttf-accent); outline-offset: -1px; box-shadow: 0 0 0 4px var(--sttf-glow); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc--one .sttf__cc-chev { display: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cc--one .sttf__cc-select { cursor: default; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__tel { gap: 6px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__cc-face { padding: 0 6px 0 10px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__tel input { padding-left: 12px; padding-right: 40px; }
/* text steps: the reassurance sits at the foot of the question area, filling
   the space the height floor keeps (see DECISIONS: fill it, don't remove it) */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__stage[data-sttf-kind]:not([data-sttf-kind="choice"]) { display: flex; flex-direction: column; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__trust {
  list-style: none; margin: auto 0 0; padding: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 13px; line-height: 18px; color: var(--sttf-ink-3);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__trust li { display: inline-flex; align-items: center; gap: 6px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__trust-ico { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--sttf-good-soft); color: var(--sttf-good); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__enter { display: none; margin-left: auto; font-size: 13px; line-height: 20px; color: var(--sttf-ink-3); white-space: nowrap; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__enter kbd {
  display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 6px;
  border: 1px solid var(--sttf-line-2); border-bottom-width: 2px; background: var(--sttf-surface-2);
  font-family: var(--sttf-font); font-size: 12px; font-weight: 600; line-height: 14px; color: var(--sttf-ink-2);
}
@media (hover: hover) and (pointer: fine) {
  .sttf:not(#sttf-a):not(#sttf-b):not([data-sttf-w="xs"]) .sttf__enter:not([hidden]) { display: inline-block; }
  .sttf:not(#sttf-a):not(#sttf-b):not([data-sttf-w="xs"]) .sttf__enter:not([hidden]) + .sttf__next { margin-left: 14px; }
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__hint { display: block; font-size: 14px; line-height: 20px; color: var(--sttf-ink-3); margin: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__hint:empty { display: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__err { display: block; font-size: 14px; line-height: 20px; color: var(--sttf-danger); min-height: 1.2em; margin: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__suggest {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 44px; padding: 0 2px;
  font-size: 14px; color: var(--sttf-ink-2); cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__suggest b { font-weight: 600; color: var(--sttf-accent-text); margin: 0 3px; }

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

.sttf:not(#sttf-a):not(#sttf-b) .sttf__foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__back {
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 500;
  padding: 10px 14px 10px 2px;
  min-height: 44px;
  color: var(--sttf-ink-3); cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__back[aria-disabled="true"] { opacity: .45; cursor: default; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__next {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 600; line-height: 20px;
  margin-left: auto;
  padding: 12px 28px; border-radius: 999px;
  min-height: 48px;
  background: var(--sttf-cta); color: var(--sttf-cta-ink);
  box-shadow: var(--sttf-cta-shadow);
  cursor: pointer;
  text-align: center;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__next[aria-disabled="true"] { cursor: progress; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__next { flex: 1; min-width: 0; padding-left: 18px; padding-right: 18px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__foot { gap: 8px; }

/* ---- generic buttons and links ---- */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--sttf-line-2);
  font-size: 15px; font-weight: 600; line-height: 20px;
  color: var(--sttf-ink);
  background: transparent;
  text-align: center;
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__btn--primary {
  border-color: transparent;
  background: var(--sttf-cta);
  color: var(--sttf-cta-ink);
  box-shadow: var(--sttf-cta-shadow);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 4px;
  font-size: 15px; font-weight: 600;
  color: var(--sttf-accent-text);
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__link[aria-disabled="true"] { opacity: .45; cursor: default; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__link--small { font-size: 14px; font-weight: 600; padding: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__btn--quiet { border-color: var(--sttf-line); font-weight: 500; color: var(--sttf-ink-2); flex: 1; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-line);
  color: var(--sttf-ink-2);
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__icon-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__ico { display: inline-flex; flex: none; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__spinner {
  display: inline-block; width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: sttf-spin .7s linear infinite;
}
@keyframes sttf-spin { to { transform: rotate(360deg); } }

/* ======================== booking: pick a time ======================== */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__sched { display: flex; flex-direction: column; gap: 18px; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__session { display: flex; flex-wrap: wrap; gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--sttf-line);
  background: var(--sttf-surface-2);
  font-size: 13.5px; font-weight: 500; line-height: 20px;
  color: var(--sttf-ink-2);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip svg { width: 16px; height: 16px; color: var(--sttf-accent-text); }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 14px; line-height: 20px; color: var(--sttf-ink-2);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__note svg { width: 18px; height: 18px; color: var(--sttf-accent-text); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__note--quiet { font-size: 13px; color: var(--sttf-ink-3); }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-accent);
  background: var(--sttf-accent-soft);
  color: var(--sttf-ink);
  font-size: 14.5px; line-height: 21px;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert > .sttf__ico { color: var(--sttf-accent-text); margin-top: 1px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert--error { border-color: var(--sttf-danger); background: var(--sttf-danger-soft); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert--error > .sttf__ico { color: var(--sttf-danger); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert-title { font-weight: 600; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__cols { display: flex; flex-direction: column; gap: 22px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__pick { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__cols {
  display: grid; align-items: start; gap: 28px;
  grid-template-columns: minmax(308px, 1fr) 240px;
}

/* month grid */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cal { display: flex; flex-direction: column; gap: 10px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cal-month { font-size: 16px; font-weight: 600; line-height: 22px; font-variant-numeric: tabular-nums; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cal-nav { display: flex; gap: 6px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__grid { display: flex; flex-direction: column; gap: 3px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__row { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 3px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__row--head { margin-bottom: 2px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__dow {
  display: block; text-align: center;
  font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sttf-ink-3);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cell { display: block; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__day {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px;
  border-radius: calc(var(--sttf-radius) - 2px);
  font-size: 15px; font-weight: 600; line-height: 20px;
  font-variant-numeric: tabular-nums;
  background: var(--sttf-accent-soft);
  color: var(--sttf-ink);
  cursor: pointer;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__day[aria-disabled="true"] {
  background: transparent;
  color: var(--sttf-ink-3);
  font-weight: 400;
  cursor: default;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__day[aria-disabled="true"] .sttf__day-n { opacity: .55; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__day[data-loading] { background: var(--sttf-surface-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__day[aria-current="date"]::after {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--sttf-accent);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cell[aria-selected="true"] .sttf__day {
  background: var(--sttf-accent-fill);
  color: var(--sttf-accent-ink);
  box-shadow: 0 0 0 4px var(--sttf-glow);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__cell[aria-selected="true"] .sttf__day[aria-current="date"]::after { background: var(--sttf-accent-ink); }

/* day chips — the xs layout, where a 7-column grid can't hold 44px cells */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__agenda { display: flex; flex-direction: column; gap: 10px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__agenda-head { font-size: 15px; font-weight: 600; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 60px; padding: 8px 4px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-line-2);
  background: var(--sttf-surface);
  text-align: center;
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-top { font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; overflow-wrap: normal; color: var(--sttf-ink-3); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-date { font-size: 16px; font-weight: 600; line-height: 22px; font-variant-numeric: tabular-nums; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-n { font-size: 12px; line-height: 16px; color: var(--sttf-ink-3); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day[aria-pressed="true"] {
  border-color: transparent;
  background: var(--sttf-accent-fill);
  color: var(--sttf-accent-ink);
  box-shadow: 0 0 0 4px var(--sttf-glow);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day[aria-pressed="true"] .sttf__chip-top,
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day[aria-pressed="true"] .sttf__chip-n { color: var(--sttf-accent-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__agenda-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* timezone */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tz { display: flex; flex-direction: column; gap: 6px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tz-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tz-label svg { width: 16px; height: 16px; color: var(--sttf-accent-text); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__select-wrap { position: relative; display: block; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__select {
  display: block; width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  border-radius: calc(var(--sttf-radius) - 3px);
  border: 1px solid var(--sttf-field-line);
  background: var(--sttf-surface);
  color: var(--sttf-ink);
  font-size: 16px; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__select option, .sttf:not(#sttf-a):not(#sttf-b) .sttf__select optgroup { background: var(--sttf-surface); color: var(--sttf-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__select-chev {
  position: absolute; right: 12px; top: 50%; margin-top: -10px;
  color: var(--sttf-ink-3); pointer-events: none; transform: rotate(90deg);
}

/* times */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__times { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__times-head { display: flex; flex-direction: column; gap: 2px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__times-day { font-size: 16px; font-weight: 600; line-height: 22px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__times-sub { font-size: 13.5px; line-height: 19px; color: var(--sttf-ink-3); font-variant-numeric: tabular-nums; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__slots-wrap { display: flex; flex-direction: column; gap: 14px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__slot-group { display: flex; flex-direction: column; gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__slot-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sttf-ink-3); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 6px;
  border-radius: calc(var(--sttf-radius) - 2px);
  border: 1px solid var(--sttf-line-2);
  background: var(--sttf-surface);
  color: var(--sttf-ink);
  font-size: 15px; font-weight: 600; line-height: 20px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time { position: relative; flex-direction: column; gap: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 13px; color: var(--sttf-good); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time[aria-pressed="true"] .sttf__time-tag { color: var(--sttf-accent-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time-check { position: absolute; top: 3px; right: 3px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time-check svg { width: 12px; height: 12px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time[aria-pressed="true"] { padding-right: 16px; padding-left: 16px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time--alt { flex-direction: row; min-width: 96px; padding: 8px 14px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__period { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: calc(var(--sttf-radius) - 1px); background: var(--sttf-surface-2); border: 1px solid var(--sttf-line); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__period-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto;
  min-height: 44px; padding: 6px 8px; white-space: nowrap;
  border-radius: calc(var(--sttf-radius) - 4px);
  font-size: 14px; font-weight: 600; color: var(--sttf-ink-2);
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__period-n { font-size: 12px; font-weight: 600; color: var(--sttf-ink-3); font-variant-numeric: tabular-nums; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__period-btn[aria-pressed="true"] { background: var(--sttf-surface); color: var(--sttf-ink); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px var(--sttf-line); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__period-btn[aria-pressed="true"] .sttf__period-n { color: var(--sttf-accent-text); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time[aria-pressed="true"] {
  border-color: transparent;
  background: var(--sttf-accent-fill);
  color: var(--sttf-accent-ink);
  box-shadow: 0 0 0 4px var(--sttf-glow);
}

/* skeleton */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__skel {
  display: block;
  background-color: var(--sttf-surface-2);
  background-image: linear-gradient(90deg, transparent 0, var(--sttf-skel-sheen) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: sttf-shimmer 1.4s linear infinite;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__time.sttf__skel, .sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day.sttf__skel { border-color: transparent; cursor: default; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day.sttf__skel { min-height: 60px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__skel--line { height: 16px; width: 62%; border-radius: 6px; margin: 3px 0; }
@keyframes sttf-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* empty */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px;
  border-radius: var(--sttf-radius);
  border: 1px dashed var(--sttf-line-2);
  background: var(--sttf-surface-2);
  color: var(--sttf-ink-2);
  font-size: 15px;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__empty-title { font-size: 17px; font-weight: 600; color: var(--sttf-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__empty-ico, .sttf:not(#sttf-a):not(#sttf-b) .sttf__empty-ico svg { width: 28px; height: 28px; color: var(--sttf-accent-text); }

/* ======================== booking: confirm ======================== */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__review { display: flex; flex-direction: column; gap: 18px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 12px 16px 16px;
  border-radius: var(--sttf-radius);
  border: 1px solid var(--sttf-line);
  background: var(--sttf-surface-2);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none; width: 52px; height: 56px;
  border-radius: calc(var(--sttf-radius) - 2px);
  background: var(--sttf-surface);
  border: 1px solid var(--sttf-line);
  font-variant-numeric: tabular-nums;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tile-m { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sttf-accent-text); line-height: 14px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__tile-d { font-size: 22px; font-weight: 700; line-height: 26px; color: var(--sttf-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary-date { font-size: 17px; font-weight: 600; line-height: 23px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary-time { font-size: 16px; line-height: 22px; font-variant-numeric: tabular-nums; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary-zone { font-size: 14px; line-height: 20px; color: var(--sttf-ink-3); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary-what { font-size: 14px; line-height: 20px; color: var(--sttf-ink-2); margin-top: 6px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary .sttf__link { flex: none; margin-top: -10px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__summary { flex-wrap: wrap; row-gap: 2px; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__summary-main { flex-basis: 100%; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__summary .sttf__link { margin: 0 0 -10px -4px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary.is-stale .sttf__summary-time { text-decoration: line-through; color: var(--sttf-ink-3); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__summary-date { font-size: 18px; font-weight: 700; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__summary .sttf__tile, .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__ticket .sttf__tile { display: none; }
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="m"] .sttf__summary-date, .sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="l"] .sttf__summary-date { font-size: 20px; line-height: 26px; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert-slot { display: block; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__alert-slot:empty { display: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__fields { display: flex; flex-direction: column; gap: 14px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__given-box { display: flex; flex-direction: column; border-top: 1px solid var(--sttf-line); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__fields > .sttf__section-label { margin-bottom: -6px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__given {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0 4px;
  border-bottom: 1px solid var(--sttf-line);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__given-text { display: flex; flex-direction: column; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__given-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sttf-ink-3); line-height: 16px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__given-value { font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__reassure { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__reassure li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__reassure svg { width: 18px; height: 18px; color: var(--sttf-good); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__consent { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13.5px; line-height: 20px; color: var(--sttf-ink-3); }

/* ======================== booking: done ======================== */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__done { display: flex; flex-direction: column; gap: 20px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__check { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sttf-good-soft); color: var(--sttf-good); margin: 2px 0 16px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__check svg { width: 40px; height: 40px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__check-ring { stroke-dasharray: 151; stroke-dashoffset: 0; animation: sttf-ring .42s var(--sttf-ease) both; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__check-tick { stroke-dasharray: 34; stroke-dashoffset: 0; animation: sttf-tick .3s .28s var(--sttf-ease) both; }
@keyframes sttf-ring { from { stroke-dashoffset: 151; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes sttf-tick { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__ticket {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  border-radius: var(--sttf-radius);
  border: 1px solid var(--sttf-line);
  background: var(--sttf-surface-2);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__ticket-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__done-date { font-size: 17px; font-weight: 600; line-height: 23px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__done-time { font-size: 15px; line-height: 21px; color: var(--sttf-ink); font-variant-numeric: tabular-nums; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__ticket-what { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sttf-line-2); font-size: 14px; line-height: 20px; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__done-sent { font-size: 15px; line-height: 22px; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__done-sent strong { font-weight: 600; color: var(--sttf-ink); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__demo {
  display: inline-flex; align-self: flex-start;
  padding: 3px 10px; border-radius: 999px;
  border: 1px dashed var(--sttf-ink-3);
  font-size: 12.5px; line-height: 18px; color: var(--sttf-ink-3);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__section-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sttf-ink-3); line-height: 16px; margin-bottom: 10px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__addcal-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__steps-list { display: flex; flex-direction: column; gap: 10px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__steps-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__steps-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sttf-accent-soft); color: var(--sttf-accent-text);
  font-size: 12.5px; font-weight: 700; line-height: 1;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__change-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14px; line-height: 20px; color: var(--sttf-ink-3); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__addcal .sttf__hint { margin-top: 8px; }

/* terminal */
.sttf:not(#sttf-a):not(#sttf-b) .sttf__terminal { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--sttf-ink-2); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__terminal-ico, .sttf:not(#sttf-a):not(#sttf-b) .sttf__terminal-ico svg { width: 40px; height: 40px; color: var(--sttf-accent-text); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__terminal-msg { font-size: 16px; line-height: 24px; color: var(--sttf-ink); }

/* ======================== legacy preview result ======================== */

.sttf:not(#sttf-a):not(#sttf-b) .sttf__verdict {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--sttf-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--sttf-good-soft); color: var(--sttf-good);
  margin-bottom: 14px;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__sched > .sttf__verdict { margin-bottom: -4px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__why {
  display: block;
  background: var(--sttf-surface-2);
  border: 1px solid var(--sttf-line);
  border-radius: 9px;
  padding: 13px 15px; margin: 0 0 14px;
  font-size: 14px; color: var(--sttf-ink-2);
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__why b { color: var(--sttf-ink); font-weight: 600; }

.sttf:not(#sttf-a):not(#sttf-b) .sttf__url {
  display: block;
  font-family: var(--sttf-mono);
  font-size: 11.5px; line-height: 1.7;
  background: var(--sttf-surface-2);
  border: 1px solid var(--sttf-line);
  border-radius: 9px;
  padding: 11px 13px;
  overflow-x: auto; white-space: pre; overflow-wrap: normal;
  color: var(--sttf-ink-2); margin: 0 0 16px;
}

.sttf:not(#sttf-a):not(#sttf-b) .sttf__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf__actions a {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
  padding: 11px 22px; border-radius: 999px;
  min-height: 44px;
  background: var(--sttf-cta); color: var(--sttf-cta-ink);
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf__actions button {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  padding: 11px 20px; border-radius: 999px;
  min-height: 44px;
  border: 1px solid var(--sttf-line-2); background: transparent;
  color: var(--sttf-ink-2); cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b)[data-sttf-w="xs"] .sttf__actions { flex-direction: column; align-items: stretch; }

/* ======================== hover — pointer devices only ======================== */

@media (hover: hover) {
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__cc:not(.sttf__cc--one):hover .sttf__cc-face { border-color: var(--sttf-accent); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt:hover { border-color: var(--sttf-accent); background: var(--sttf-accent-soft); transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .55); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt:hover .sttf__opt-key { border-color: var(--sttf-accent); color: var(--sttf-accent-text); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__field input:not(:focus):hover { border-color: var(--sttf-ink-3); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__back:hover { color: var(--sttf-ink); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__next:hover, .sttf:not(#sttf-a):not(#sttf-b) .sttf__btn--primary:hover, .sttf:not(#sttf-a):not(#sttf-b) .sttf__actions a:hover { background: var(--sttf-cta-hover); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__btn:hover { border-color: var(--sttf-accent); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__link:not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: 3px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__icon-btn:not([aria-disabled="true"]):hover { border-color: var(--sttf-accent); color: var(--sttf-ink); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__day:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1px var(--sttf-accent); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__cell[aria-selected="true"] .sttf__day:hover { box-shadow: 0 0 0 4px var(--sttf-glow); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__time:not(.sttf__skel):hover, .sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day:not(.sttf__skel):hover { border-color: var(--sttf-accent); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__actions button:hover { border-color: var(--sttf-accent); color: var(--sttf-accent-text); }
}

/* ---- touch ---- */

.sttf:not(#sttf-a):not(#sttf-b) button, .sttf:not(#sttf-a):not(#sttf-b) a, .sttf:not(#sttf-a):not(#sttf-b) select, .sttf-scrim button {
  touch-action: manipulation;          /* kills the 300ms double-tap delay */
  -webkit-tap-highlight-color: transparent;
}
.sttf:not(#sttf-a):not(#sttf-b) button:not(.sttf__skel), .sttf:not(#sttf-a):not(#sttf-b) select, .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt, .sttf:not(#sttf-a):not(#sttf-b) .sttf__day, .sttf:not(#sttf-a):not(#sttf-b) .sttf__time:not(.sttf__skel) { min-height: 44px !important; }

/* ======================== modal ======================== */

.sttf-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8, 13, 24, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid; place-items: start center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 100vh;
  min-height: 100dvh;           /* survives the mobile URL bar collapsing */
  padding: calc(max(16px, 5vh) + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
}
.sttf-scrim__inner {
  width: 100%; max-width: 560px;
  position: relative;
  /* reserve room so the close control can never sit above the viewport */
  padding-top: 52px;
  transition: max-width .26s cubic-bezier(.2, .8, .2, 1);
}
.sttf-scrim__inner.is-wide { max-width: 760px; }
.sttf-scrim:not(#sttf-a):not(#sttf-b) .sttf-scrim__close {
  all: unset; box-sizing: border-box;
  position: absolute; top: 0; right: 0;
  font: 15px/1 var(--sttf-font, ui-sans-serif, system-ui, sans-serif);
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  background: none; border: 0; color: #dce6f1; cursor: pointer;
  text-transform: none; letter-spacing: normal; box-shadow: none;
}
.sttf-scrim:not(#sttf-a):not(#sttf-b) .sttf-scrim__close:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
.sttf-locked { overflow: hidden; }

/* ======================== sticky bar (long pages, mobile) ======================== */

.sttf:not(#sttf-a):not(#sttf-b).sttf-bar {
  position: fixed; left: 0; right: 0; bottom: var(--sttf-bar-bottom, 0px); z-index: 8990;
  display: block;
  padding: 11px max(16px, env(safe-area-inset-right)) max(11px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--sttf-surface);
  border-top: 1px solid var(--sttf-line);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .28);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .2s var(--sttf-ease), visibility 0s linear .2s;
}
.sttf:not(#sttf-a):not(#sttf-b).sttf-bar[data-state="shown"] { transform: none; visibility: visible; transition: transform .2s var(--sttf-ease); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__track { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sttf-line); }
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__track i { display: block; height: 100%; width: 0; background: var(--sttf-accent); transition: width .32s; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__btn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  width: 100%; min-height: 52px; padding: 8px 20px 8px 22px;
  border-radius: 999px;
  background: var(--sttf-cta); color: var(--sttf-cta-ink);
  box-shadow: var(--sttf-cta-shadow);
  text-align: left;
  cursor: pointer;
}
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__label { grid-column: 1; font-size: 16px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__meta { grid-column: 1; font-size: 12.5px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__meta:empty { display: none; }
.sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__go { grid-column: 2; grid-row: 1 / span 2; }

/* ======================== short viewports ========================
   A landscape phone, or a small window, shouldn't reserve 250px of empty
   stage. Height-based, so it catches landscape where a width query wouldn't. */

@media (max-height: 600px) {
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__stage { min-height: 0 !important; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__body { padding: 18px 20px 16px !important; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__title { font-size: 19px !important; margin-bottom: 14px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opts { gap: 7px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt { padding: 10px 14px; min-height: 46px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__foot { margin-top: 16px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__sched { gap: 14px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__review { gap: 14px; }
  .sttf-scrim { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .sttf-scrim__inner { padding-top: 48px; }
}
@media (max-height: 500px) {
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__chips { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__check { display: none; }
}
@media (max-height: 420px) {
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__meta { margin-bottom: 6px; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__title { font-size: 18px !important; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__day { height: 44px; }
}

/* ======================== preferences ======================== */

@media (prefers-reduced-motion: reduce) {
  .sttf:not(#sttf-a):not(#sttf-b) *, .sttf:not(#sttf-a):not(#sttf-b) *::before, .sttf:not(#sttf-a):not(#sttf-b) *::after, .sttf-scrim__inner {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .sttf:not(#sttf-a):not(#sttf-b).sttf-bar { transition-duration: .001ms !important; transition-delay: 0s !important; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__skel { background-image: none; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__spinner { display: none; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt:hover { transform: none; }
}

@media (forced-colors: active) {
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt, .sttf:not(#sttf-a):not(#sttf-b) .sttf__day, .sttf:not(#sttf-a):not(#sttf-b) .sttf__time, .sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day, .sttf:not(#sttf-a):not(#sttf-b) .sttf__field input, .sttf:not(#sttf-a):not(#sttf-b) .sttf__select, .sttf:not(#sttf-a):not(#sttf-b) .sttf__cc-face, .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt-key { border: 1px solid CanvasText; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-pressed="true"] .sttf__opt-key { background: HighlightText; color: Highlight; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-checked="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-checked="true"] .sttf__opt-box { background: HighlightText; color: Highlight; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__cell[aria-selected="true"] .sttf__day,
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__time[aria-pressed="true"],
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day[aria-pressed="true"],
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__period-btn[aria-pressed="true"],
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__opt[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__cell[aria-selected="true"] .sttf__day *,
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__time[aria-pressed="true"] *,
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__chip-day[aria-pressed="true"] *,
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__period-btn[aria-pressed="true"] * { color: inherit; opacity: 1; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__day[aria-current="date"]::after { background: CanvasText; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__cell[aria-selected="true"] .sttf__day[aria-current="date"]::after { background: HighlightText; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__next, .sttf:not(#sttf-a):not(#sttf-b) .sttf__btn--primary, .sttf:not(#sttf-a):not(#sttf-b) .sttf-bar__btn, .sttf:not(#sttf-a):not(#sttf-b) .sttf__actions a, .sttf:not(#sttf-a):not(#sttf-b) .sttf__btn { border: 1px solid ButtonText; }
  .sttf:not(#sttf-a):not(#sttf-b) .sttf__link { text-decoration: underline; }
}