/* ==========================================================================
   jesse: a quiet, native-app surface
   Paper page, porcelain controls, warm ink. Depth comes from light and
   hairlines, never from texture. One font: SF Pro on Apple devices, Inter
   everywhere else. Everything visual starts from the tokens below.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* colour. Kept as 6-digit hex: main.js hands several of them to Cal.com */
  --bg:        #e9e3d5;   /* paper                                   */
  --bg-glow:   #f6f2e9;   /* light falling from the top              */
  --bg-edge:   #ddd5c4;   /* the room around the page                */
  --panel:     #f1ece2;   /* sheets, sunk fields                     */
  --panel-hi:  #fbf8f2;   /* porcelain: controls, raised surfaces    */
  --ink:       #2c2823;   /* text, primary buttons                   */
  --ink-2:     #665f54;   /* secondary text: 4.9:1 on paper          */
  --ink-3:     #8a8276;   /* chevrons, disabled, decoration only     */
  --line:      #d9d0bf;   /* hairline, as hex                        */
  --line-2:    #b3aa9b;   /* stronger hairline                       */
  --accent:    #a8452f;   /* errors, the one badge: 4.6:1 on paper   */
  --on-ink:    #f8f4ec;
  --focus:     #2c2823;

  /* hairlines and washes drawn from the ink, so they sit right on any surface */
  --hair:      rgb(44 40 35 / .1);
  --hair-2:    rgb(44 40 35 / .17);
  --fill:      rgb(44 40 35 / .045);
  --fill-2:    rgb(44 40 35 / .075);
  --glass:     rgb(246 242 233 / .74);

  /* depth: warm, layered, soft */
  --sh-1:   0 1px 1px rgb(60 44 24 / .04), 0 1px 3px rgb(60 44 24 / .07);
  --sh-2:   0 1px 2px rgb(60 44 24 / .05), 0 6px 16px -6px rgb(60 44 24 / .16);
  --sh-3:   0 2px 6px rgb(60 44 24 / .05), 0 18px 40px -14px rgb(60 44 24 / .26);
  --sh-4:   0 6px 18px rgb(46 34 20 / .08), 0 40px 100px -24px rgb(46 34 20 / .42);
  --sh-btn: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(30 22 12 / .2), 0 10px 22px -12px rgb(30 22 12 / .6);
  --scrim:  rgb(38 30 20 / .34);
  --thumb-dim: 1;

  color-scheme: light;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-display: clamp(2.25rem, 1.5rem + 1.9vw, 3.25rem);   /* 36 → 52 */
  --t-title:   clamp(2rem, 1.62rem + 1vw, 2.625rem);      /* 32 → 42 */

  /* shape and motion */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
  --ease:     cubic-bezier(.32, .72, 0, 1);    /* iOS sheet */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in:  cubic-bezier(.55, 0, .75, .2);
  --spring:   cubic-bezier(.34, 1.45, .64, 1);

  /* layout */
  --col: 660px;
  --bar-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171512; --bg-glow: #25211c; --bg-edge: #0f0d0b;
    --panel: #211e1a; --panel-hi: #2b2823;
    --ink: #f0eadf; --ink-2: #aea596; --ink-3: #857d70;
    --line: #37332d; --line-2: #5c564c;
    --accent: #e8957f; --on-ink: #171512; --focus: #f0eadf;
    --hair: rgb(240 234 223 / .09); --hair-2: rgb(240 234 223 / .15);
    --fill: rgb(240 234 223 / .05); --fill-2: rgb(240 234 223 / .085);
    --glass: rgb(23 21 18 / .72);
    --sh-1: 0 1px 2px rgb(0 0 0 / .4);
    --sh-2: 0 1px 2px rgb(0 0 0 / .4), 0 8px 18px -8px rgb(0 0 0 / .6);
    --sh-3: 0 2px 8px rgb(0 0 0 / .4), 0 20px 44px -16px rgb(0 0 0 / .7);
    --sh-4: 0 8px 22px rgb(0 0 0 / .45), 0 44px 110px -26px rgb(0 0 0 / .85);
    --sh-btn: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .5), 0 10px 24px -12px rgb(0 0 0 / .8);
    --scrim: rgb(0 0 0 / .55);
    --thumb-dim: .93;
    --w-title: 650; --w-display: 600;
    color-scheme: dark;
  }
}
/* the same dark palette, chosen by hand; keep the two blocks identical */
:root[data-theme="dark"] {
  --bg: #171512; --bg-glow: #25211c; --bg-edge: #0f0d0b;
  --panel: #211e1a; --panel-hi: #2b2823;
  --ink: #f0eadf; --ink-2: #aea596; --ink-3: #857d70;
  --line: #37332d; --line-2: #5c564c;
  --accent: #e8957f; --on-ink: #171512; --focus: #f0eadf;
  --hair: rgb(240 234 223 / .09); --hair-2: rgb(240 234 223 / .15);
  --fill: rgb(240 234 223 / .05); --fill-2: rgb(240 234 223 / .085);
  --glass: rgb(23 21 18 / .72);
  --sh-1: 0 1px 2px rgb(0 0 0 / .4);
  --sh-2: 0 1px 2px rgb(0 0 0 / .4), 0 8px 18px -8px rgb(0 0 0 / .6);
  --sh-3: 0 2px 8px rgb(0 0 0 / .4), 0 20px 44px -16px rgb(0 0 0 / .7);
  --sh-4: 0 8px 22px rgb(0 0 0 / .45), 0 44px 110px -26px rgb(0 0 0 / .85);
  --sh-btn: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .5), 0 10px 24px -12px rgb(0 0 0 / .8);
  --scrim: rgb(0 0 0 / .55);
  --thumb-dim: .93;
  --w-title: 650; --w-display: 600;
  color-scheme: dark;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background-color: var(--bg);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 24%, transparent) transparent;
}
body {
  min-height: 100svh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.011em;
  font-feature-settings: "cv11", "ss03";
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* the page is lit from above and falls off towards the edges; a fixed layer, so it never seams or scrolls */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 50% at 50% -8%, var(--bg-glow), transparent 72%),
    radial-gradient(ellipse 125% 95% at 50% 40%, transparent 55%, var(--bg-edge) 100%);
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
::selection { background: color-mix(in srgb, var(--ink) 16%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 300; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; box-shadow: var(--sh-3);
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 14px; }
.meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s, color .2s;
}
.link:hover { text-decoration-color: currentColor; }
button.link { font-size: inherit; }

/* one entrance for the whole site: a short rise out of the page */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- 3. controls ---------- */
.pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -.008em; white-space: nowrap;
  color: var(--ink); background: var(--panel-hi);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-1);
  transition: background-color .2s, box-shadow .3s var(--ease-out), transform .35s var(--ease-out), color .2s, opacity .2s;
  user-select: none; -webkit-user-select: none;
}
@media (hover: hover) { .pill:hover { box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); } }
.pill:active { transform: scale(.97); transition-duration: .1s; }
.pill .icon { width: 16px; height: 16px; stroke-width: 1.7; }
.pill-dark { color: var(--on-ink); background: var(--ink); box-shadow: var(--sh-btn); }
@media (hover: hover) {
  .pill-dark:hover { background: color-mix(in srgb, var(--ink) 92%, var(--panel-hi)); box-shadow: var(--sh-btn); }
}
.pill-lg { height: 50px; padding: 0 24px; gap: 10px; font-size: 15.5px; }
.pill-lg .icon { width: 18px; height: 18px; }
/* the big buttons lift a little under the pointer */
@media (hover: hover) { .pill-lg:not(:disabled):hover { transform: translateY(-1px); } }
.pill-lg:not(:disabled):active { transform: scale(.975); }
.pill-block { width: 100%; }
.pill-ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
@media (hover: hover) { .pill-ghost:hover { color: var(--ink); background: var(--fill-2); box-shadow: none; } }
.pill[aria-busy="true"] { opacity: .6; pointer-events: none; }
.pill:disabled { cursor: default; transform: none; }
.pill-dark:disabled { background: var(--fill-2); color: var(--ink-3); box-shadow: none; }

.round {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink); background: var(--panel-hi);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-1);
  transition: background-color .2s, box-shadow .3s var(--ease-out), transform .35s var(--ease-out), color .2s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .round:hover { box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); } }
.round:active { transform: scale(.92); transition-duration: .1s; }
.round .icon { width: 17px; height: 17px; }
.round-plain { background: transparent; box-shadow: none; }
@media (hover: hover) { .round-plain:hover { background: var(--fill-2); box-shadow: none; } }
/* close: a soft grey disc, as on iOS sheets */
.close { width: 32px; height: 32px; background: var(--fill-2); color: var(--ink-2); box-shadow: none; }
@media (hover: hover) { .close:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); color: var(--ink); } }
.close .icon { width: 14px; height: 14px; stroke-width: 2; }

/* BG | EN: a small segmented control; the thumb slides to the active language */
.lang {
  gap: 0; height: 32px; padding: 2px;
  background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
@media (hover: hover) { .lang:hover { box-shadow: inset 0 0 0 1px var(--hair-2); } }
.lang::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 34px; height: 28px; border-radius: 999px;
  background: var(--panel-hi); box-shadow: 0 0 0 .5px var(--hair), var(--sh-1);
  transition: transform .45s var(--ease);
}
.lang:has(b[data-lang="en"].is-active)::before { transform: translateX(34px); }
.lang b { position: relative; display: grid; place-items: center; width: 34px; height: 28px; font-weight: 600; color: var(--ink-2); transition: color .25s; }
.lang b.is-active { color: var(--ink); }
.lang i { display: none; }

/* the theme button shows where it will take you; the two glyphs turn into each other */
.theme-toggle > .icon { grid-area: 1 / 1; transition: opacity .3s var(--ease-out), transform .55s var(--ease); }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { opacity: 1; transform: none; }
}

/* switches (cookie settings) */
.switch {
  appearance: none; flex: none; position: relative; cursor: pointer;
  width: 46px; height: 28px; border-radius: 999px;
  background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background-color .3s var(--ease-out), box-shadow .3s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14), 0 3px 8px rgb(0 0 0 / .12);
  transition: transform .45s var(--spring);
}
.switch:checked { background: var(--ink); box-shadow: none; }
.switch:checked::after { transform: translateX(18px); }
:root[data-theme="dark"] .switch::after { background: #f4efe6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .switch::after { background: #f4efe6; } }
.switch:disabled { opacity: .45; cursor: default; }

/* checkbox (consent) */
.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.check input {
  appearance: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--panel-hi); box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background-color .2s, box-shadow .2s;
}
.check input::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--on-ink); border-bottom: 2px solid var(--on-ink);
  transform: rotate(-45deg) scale(0); transition: transform .35s var(--spring);
}
.check input:checked { background: var(--ink); box-shadow: none; }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* fields: soft wells that brighten and take a ring when focused */
.input {
  display: block; width: 100%; min-height: 52px;
  padding: 14px 16px;
  border: 0; border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 16px; line-height: 1.4;
  appearance: none;
  transition: box-shadow .25s var(--ease-out), background-color .25s;
}
.input::placeholder { color: var(--ink-2); opacity: 1; }
@media (hover: hover) { .input:hover { box-shadow: inset 0 0 0 1px var(--hair-2); } }
.input:focus { outline: none; background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--ink-3), 0 0 0 4px var(--fill-2); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
textarea.input { resize: vertical; min-height: 150px; line-height: 1.5; }
select.input {
  cursor: pointer; padding-right: 40px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8276' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}
.hp { position: absolute; left: -9999px; }

/* ---------- 4. app shell: top bar, footer ---------- */
.app { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
/* language switch: a brief cross-fade instead of a visible reflow */
.app, dialog.sheet .sheet-body { transition: opacity .14s ease; }
html.is-switching .app, html.is-switching dialog.sheet .sheet-body { opacity: 0; }

/* the bar spans the window; its content keeps to 1200px. It stays with you,
   and turns into frosted glass once the page moves under it */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px;
  min-height: var(--bar-h);
  padding: 12px max(20px, calc((100% - 1200px) / 2));
  background-color: var(--glass);
  box-shadow: 0 1px 0 var(--hair);
  -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px);
}
@supports (animation-timeline: scroll()) {
  .topbar { animation: bar-glass linear both; animation-timeline: scroll(root); animation-range: 0 56px; }
}
@keyframes bar-glass {
  from { background-color: transparent; box-shadow: 0 1px 0 transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  to   { background-color: var(--glass); box-shadow: 0 1px 0 var(--hair); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px); }
}
.brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 8px; margin-left: -8px; border-radius: 12px; min-width: 0;
  font-size: 16.5px; font-weight: 650; letter-spacing: -.024em;
  transition: background-color .2s;
}
.brand .icon { width: 25px; height: 25px; stroke-width: 1.45; transition: transform .6s var(--spring); }
@media (hover: hover) { .brand:hover .icon { transform: rotate(-8deg); } }
.topbar-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
@media (max-width: 340px) { .brand-name { display: none; } }

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; font-size: 14px; color: var(--ink-2); }
.top-links { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px; }
/* each link keeps one width in both languages (main.js pins it), and the current page wears a porcelain pill */
.top-links a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; text-align: center;
  transition: color .2s, background-color .25s, box-shadow .3s var(--ease-out);
}
@media (hover: hover) { .top-links a:hover { color: var(--ink); background: var(--fill-2); } }
.top-links a:active { background: var(--fill-2); }
.top-links a[aria-current="page"] { color: var(--ink); background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair), var(--sh-1); }
.nav-icon { width: 16px; height: 16px; opacity: .8; transition: opacity .2s; }
.top-links a[aria-current="page"] .nav-icon, .top-links a:hover .nav-icon { opacity: 1; }

/* the phone number: on wide screens a plain link beside a hairline; narrower, a round button */
.phone-link {
  height: 36px; padding: 0 16px 0 8px; margin-right: 2px; border-radius: 10px;
  background: none; box-shadow: none;
  font-size: 14px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.phone-link::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px; background: var(--hair-2); }
@media (hover: hover) { .phone-link:hover { color: var(--ink); box-shadow: none; } }
.phone-link:active { transform: none; }
.phone-link .icon { width: 16px; height: 16px; opacity: .8; }
@media (max-width: 1080px) {
  .phone-link { width: 36px; padding: 0; margin: 0; border-radius: 50%; color: var(--ink); background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair), var(--sh-1); }
  .phone-link::after, .phone-link span { display: none; }
  .phone-link .icon { width: 17px; height: 17px; opacity: 1; }
  @media (hover: hover) { .phone-link:hover { box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); } }
}
/* phones and small tablets: the links take their own row under the bar, and the bar scrolls away with the page */
@media (max-width: 760px) {
  .topbar { position: relative; grid-template-columns: 1fr auto; row-gap: 12px; padding: 12px 20px 8px; animation: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar-tools { grid-column: 2; }
  .top-links { grid-column: 1 / -1; grid-row: 2; gap: 4px; }
  .top-links a { height: 38px; padding: 0 clamp(8px, 2.6vw, 14px); font-size: clamp(13px, 3.7vw, 14.5px); }
  .top-links .nav-icon { display: none; }
}

/* footer: the legal minimum, set quietly */
.footer { padding: 28px 20px calc(26px + env(safe-area-inset-bottom)); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; font-size: 13px; color: var(--ink-2); }
.foot-nav a, .foot-nav button { font-size: inherit; color: inherit; transition: color .2s; }
.foot-nav a:hover, .foot-nav button:hover { color: var(--ink); }
.foot-nav .meta { font-size: 12px; }
/* phones: clear of the round chat button in the corner */
@media (max-width: 760px) { .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* ---------- 5. content pages ---------- */
.page-shell { width: min(100% - 40px, var(--col)); margin-inline: auto; padding: clamp(28px, 6vh, 64px) 0 clamp(80px, 12vh, 128px); }
.page[hidden] { display: none; }
.page-shell .page > * { animation: rise .8s var(--ease) backwards; }
.page-shell .page > :nth-child(2) { animation-delay: .05s; }
.page-shell .page > :nth-child(3) { animation-delay: .1s; }
.page-shell .page > :nth-child(n+4) { animation-delay: .15s; }

/* large title + lede */
.lt { font-size: var(--t-title); font-weight: var(--w-title, 700); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; outline: none; }
.lede-l { margin-top: 14px; max-width: 40rem; font-size: clamp(17px, 16.2px + .25vw, 19px); line-height: 1.5; letter-spacing: -.014em; color: var(--ink-2); text-wrap: balance; }
.lede-sm { margin-top: 4px; font-size: 16px; }
.gap { height: 28px; }
.group { padding: 40px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.page-cta { padding-top: 36px; }
.page-shell .page-cta { max-width: 420px; }
.page-shell .page > .page-cta .pill { width: auto; min-width: 240px; }
@media (max-width: 600px) { .page-shell .page > .page-cta .pill { width: 100%; } }
.note { padding-top: 22px; font-size: 14px; color: var(--ink-2); text-align: center; }
.page-shell .note { padding-top: 32px; font-size: 13.5px; text-align: left; }
.note-accent { color: var(--accent); }

/* rows: icon, title and line, chevron. Hairlines start where the text starts */
.rows { position: relative; }
.row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 18px;
  width: 100%; min-height: 70px; padding: 14px 0;
  text-align: left;
}
.rows > * + * > .row::before, .rows > .row + .row::before {
  content: ""; position: absolute; top: 0; left: 42px; right: 0; border-top: 1px solid var(--hair);
  transition: border-color .3s;
}
.row-plain { grid-template-columns: minmax(0, 1fr) auto; }
.rows > * + * > .row-plain::before, .rows > .row-plain + .row-plain::before { left: 0; }
/* a row you can press gets a soft wash under the pointer, drawn outside the text column */
a.row, button.row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.row::after, button.row::after {
  content: ""; position: absolute; inset: 3px -14px; z-index: -1; border-radius: 16px;
  background: var(--fill); opacity: 0; transition: opacity .25s, background-color .2s;
}
@media (hover: hover) { a.row:hover::after, button.row:hover::after { opacity: 1; } }
a.row:active::after, button.row:active::after { opacity: 1; background: var(--fill-2); transition-duration: .05s; }
/* keyboard focus is drawn on the same soft shape as the hover */
a.row:focus-visible, button.row:focus-visible { outline: none; }
a.row:focus-visible::after, button.row:focus-visible::after { opacity: 1; box-shadow: 0 0 0 2px var(--focus); }
.row-icon { width: 22px; height: 22px; color: var(--ink-2); justify-self: center; transition: color .2s; }
button.row:hover .row-icon, a.row:hover .row-icon { color: var(--ink); }
.row-num { font-family: var(--mono); font-size: 13px; color: var(--ink-2); justify-self: center; }
.row-title { display: block; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.row-sub { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.row-text { font-size: 16px; line-height: 1.45; }
.row-end { display: flex; align-items: center; gap: 14px; color: var(--ink-2); font-size: 15px; }
.chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .45s var(--ease), color .2s; }
@media (hover: hover) { a.row:hover .chev, button.row:not([aria-expanded="true"]):hover .chev { color: var(--ink); transform: translateX(3px); } }
@media (max-width: 600px) {
  .row { column-gap: 16px; min-height: 68px; }
  .rows > * + * > .row::before, .rows > .row + .row::before { left: 40px; }
  .rows > * + * > .row-plain::before, .rows > .row-plain + .row-plain::before { left: 0; }
  a.row::after, button.row::after { inset: 3px -10px; }
}

/* rows that expand in place: the open one stands on a porcelain surface,
   drawn behind it so nothing around it moves */
.acc { position: relative; isolation: isolate; }
.acc::before {
  content: ""; position: absolute; inset: 0 -18px; z-index: -1; border-radius: var(--r-lg);
  background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair), var(--sh-2);
  opacity: 0; transform: scale(.98);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease);
}
.acc.is-open::before { opacity: 1; transform: none; }
.acc.is-open > .row:not(:focus-visible)::after { opacity: 0 !important; }
.acc.is-open > .row:focus-visible::after { background: transparent; }
.acc.is-open > .row::before, .acc.is-open + * > .row::before { border-top-color: transparent; }
.acc .row[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--ink); }
.acc-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s var(--ease), opacity .3s var(--ease-out);
}
.acc-panel > .acc-inner { overflow: hidden; min-height: 0; }
.acc.is-open > .acc-panel { grid-template-rows: 1fr; opacity: 1; }
.acc-inner { padding-bottom: 6px; }
.acc:has(.row:not(.row-plain)) .acc-inner { padding-left: 42px; }
.no-js .acc-panel { grid-template-rows: 1fr; opacity: 1; }
@media (max-width: 600px) {
  .acc::before { inset: 0 -12px; border-radius: 20px; }
  .acc:has(.row:not(.row-plain)) .acc-inner { padding-left: 40px; }
}

/* inside a panel: detail, smaller and lighter than the row that opened it */
.acc-inner > :first-child { padding-top: 0; }
.acc-inner .lede-l { margin-top: 0; padding-bottom: 2px; max-width: 32rem; font-size: 15.5px; line-height: 1.6; }
.acc-inner .prose { padding: 0 0 12px; font-size: 16px; line-height: 1.6; gap: 10px; }
.acc-inner .group { padding: 18px 0 6px; }
.acc-inner .rows > * + * > .row::before, .acc-inner .rows > .row + .row::before { display: none; }
.acc-inner .row { min-height: 0; padding: 4px 0; }
.acc-inner .row-text { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.acc-inner .row-text::before { content: ""; position: absolute; left: 3px; top: .64em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
/* the action inside a panel stays secondary */
.acc-inner .page-cta { padding: 18px 0 22px; max-width: none; }
.acc-inner .page-cta .pill { width: auto; height: 44px; padding: 0 22px; font-size: 15px; color: var(--ink); background: var(--panel); box-shadow: 0 0 0 1px var(--hair-2); }
@media (hover: hover) { .acc-inner .page-cta .pill:hover { background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); } }

/* tools we work with: quiet chips */
.tools { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.tools li {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px;
  background: var(--fill-2);
  font-size: 13.5px; font-weight: 500; color: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); white-space: nowrap;
}

/* pricing and results */
.badge {
  display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.price { font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.price small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.case-title { margin-top: 4px; font-size: 24px; font-weight: 650; letter-spacing: -.024em; }
.case-text { padding: 14px 0 8px; font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.case-text p + p { margin-top: 4px; }
.case-text strong { font-weight: 600; color: var(--ink); }
.val { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.val s { color: var(--ink-2); text-decoration-color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.val i { font-style: normal; color: var(--ink-3); margin: 0 7px; }
.quote-block { padding-top: 14px; }
.quote-block + .quote-block { padding-top: 26px; }
.quote { padding: 6px 0 8px; font-size: 21px; line-height: 1.45; letter-spacing: -.018em; text-wrap: pretty; overflow-wrap: anywhere; }

/* about: a contact card without the card */
.profile { display: flex; align-items: center; gap: 22px; padding-top: 34px; }
.profile-name { font-size: 23px; font-weight: 650; letter-spacing: -.024em; }
.avatar {
  width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--panel-hi);
  box-shadow: 0 0 0 4px var(--panel-hi), 0 0 0 5px var(--hair), var(--sh-3);
  font-family: var(--mono); font-size: 10px; color: var(--ink-2); line-height: 1.3;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.prose { display: grid; gap: 14px; padding-top: 26px; max-width: 34rem; color: var(--ink-2); font-size: 18px; line-height: 1.6; letter-spacing: -.014em; text-wrap: pretty; }
.prose-left { padding-top: 18px; }
/* current projects: a row led by the app's own icon, drawn like a home-screen icon */
.row-app { grid-template-columns: 44px minmax(0, 1fr) auto; }
.rows > .row-app + .row-app::before { left: 62px; }
.app-icon { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); }
/* wider screens: the photo on the left, the name and the line about him together beside it */
@media (min-width: 601px) {
  .page:not(.about-card):has(> .profile) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 28px; }
  .page:not(.about-card):has(> .profile) > .lt { grid-column: 1 / -1; }
  .page:not(.about-card):has(> .profile) > .profile { display: contents; }
  .page:not(.about-card) > .profile > .avatar { grid-column: 1; grid-row: 2 / span 2; margin-top: 36px; animation: rise .8s .05s var(--ease) backwards; }
  .page:not(.about-card) > .profile > :not(.avatar) { grid-column: 2; grid-row: 2; padding-top: 44px; animation: rise .8s .08s var(--ease) backwards; }
  .page:not(.about-card):has(> .profile) > .prose { grid-column: 2; grid-row: 3; padding-top: 8px; }
  .page:not(.about-card) > .profile > .avatar { margin-top: 44px; align-self: center; } /* centred on the name and the line together */
  /* sections below the profile run the full width, from the same edge as every other page */
  .page:not(.about-card):has(> .profile) > .group, .page:not(.about-card):has(> .profile) > .rows { grid-column: 1 / -1; }
  .page:not(.about-card):has(> .profile) > .group { padding-top: 56px; }
}

/* about, centred like a profile card: photo, name and line on one centre line, projects below at the same width.
   To go back to the photo-on-the-left layout, remove the about-card class from about.html. */
.about-card { max-width: 560px; margin-inline: auto; text-align: center; }
.about-card > .profile { flex-direction: column; gap: 18px; padding-top: 40px; }
.about-card .avatar { width: 136px; height: 136px; }
.about-card .profile-name { font-size: 26px; }
.about-card > .prose { margin-inline: auto; padding-top: 10px; }
.about-card > .group, .about-card > .rows { text-align: left; }
.about-card > .group { padding-top: 56px; }

/* ---------- 6. legal page ---------- */
.doc {
  width: min(100% - 32px, 720px); margin: clamp(8px, 3vh, 32px) auto 40px;
  padding: 52px 60px 60px;
  background: var(--panel-hi); border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-3);
  animation: rise .8s var(--ease) backwards;
}
.doc h1 { font-size: clamp(28px, 2.2vw + 16px, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.doc .meta { display: block; margin-top: 10px; }
.doc > .note { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); text-align: left; font-size: 14px; }
.doc h2 { margin: 36px 0 10px; font-size: 18px; font-weight: 650; letter-spacing: -.018em; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.doc p + p { margin-top: 10px; }
.doc ul { display: grid; gap: 8px; margin-top: 8px; }
.doc ul li { position: relative; padding-left: 18px; }
.doc ul li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .link { color: var(--ink); }
.table-wrap { overflow-x: auto; margin: 12px 0 14px; border-radius: 14px; box-shadow: 0 0 0 1px var(--hair); -webkit-overflow-scrolling: touch; }
.doc table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-2); line-height: 1.45; }
.doc tr:last-child td { border-bottom: 0; }
.doc th { color: var(--ink); font-weight: 600; background: var(--fill); font-size: 13px; }
@media (max-width: 600px) { .doc { padding: 36px 22px 40px; border-radius: 26px; } }
html[lang="bg"] .lang-en, html[lang="en"] .lang-bg { display: none; }

/* ---------- 7. sheets (cookie settings) ---------- */
dialog.sheet {
  border: 0; padding: 0; margin: auto;
  width: min(100% - 40px, 560px); max-width: none;
  height: fit-content; max-height: min(88svh, 780px);
  color: var(--ink); background: var(--panel-hi);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-4);
  overflow: hidden;
}
dialog.sheet:focus { outline: none; }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .55s var(--ease); }
dialog.sheet.is-closing { animation: sheet-out .2s var(--ease-in) forwards; }
dialog.sheet::backdrop {
  background: var(--scrim); opacity: calc(1 - var(--pull, 0)); /* --pull: how far a phone sheet has been pulled down */
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  animation: fade .35s var(--ease-out);
}
dialog.sheet.is-closing::backdrop { animation: fade-out .2s ease forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
/* the page stays still behind a sheet: the scrollbar's space is kept as padding, so nothing shifts
   and the dimmed backdrop reaches the window edge (main.js measures --sbw) */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: auto; padding-right: var(--sbw, 0px); }

/* bar: back / small title (appears on scroll) / close */
.sheet-bar {
  position: relative; flex: none;
  display: grid; grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr); align-items: center;
  min-height: 60px; padding: 14px 18px 6px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.sheet-bar .close { justify-self: end; grid-column: 3; }
.back {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: 2px;
  height: 36px; padding: 0 12px 0 4px; border-radius: 999px;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  transition: background-color .2s;
}
@media (hover: hover) { .back:hover { background: var(--fill-2); } }
.back:active { background: var(--fill-2); }
.back .icon { width: 22px; height: 22px; stroke-width: 1.7; }
.back[hidden] { display: none; }
.bar-title { grid-column: 2; font-size: 16px; font-weight: 600; letter-spacing: -.014em; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
dialog.is-scrolled .bar-title { opacity: 1; }
dialog.is-scrolled .sheet-bar { border-bottom-color: var(--hair); }
.sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 44px 40px; scrollbar-width: thin; }
dialog.sheet .lt { font-size: 32px; }
dialog.sheet .lede-l { font-size: 16.5px; }
dialog.sheet .page-cta { padding-top: 28px; }
dialog.sheet .note { padding-top: 18px; }

/* pages inside a sheet slide like an iOS navigation stack */
.page.in-right { animation: page-in-right .45s var(--ease); }
.page.in-left { animation: page-in-left .45s var(--ease); }
@keyframes page-in-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes page-in-left { from { opacity: 0; transform: translateX(-40px); } }

/* phones: sheets rise from the bottom edge, with a grabber */
@media (max-width: 600px) {
  dialog.sheet { width: 100%; max-height: 92svh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  dialog.sheet[open] { animation-name: sheet-up; animation-duration: .55s; }
  dialog.sheet.is-closing { animation-name: sheet-down; animation-duration: .25s; }
  .sheet-bar { padding-top: 20px; min-height: 60px; }
  .sheet-bar::before, .panel-bar::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 5px; background: var(--hair-2); }
  /* the bar is the handle: pulling it down closes the sheet (main.js) */
  .sheet-bar, .panel-bar { touch-action: none; }
  .sheet-body { padding: 0 22px calc(32px + env(safe-area-inset-bottom)); }
  dialog.sheet .lt { font-size: 28px; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
}

/* ---------- 8. the booking sheet: dates, times, Cal.com's form, or a message ---------- */
dialog.book-sheet { width: min(100% - 40px, 480px); height: min(88svh, 628px); max-height: none; }
.book-sheet .panel { flex: 1; }
.panel { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* back on the left, close on the right, floating over the step */
.panel-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; padding: 14px 16px 0; pointer-events: none; }
.panel-bar > * { pointer-events: auto; }
.panel-bar .close { margin-left: auto; }
/* the step scrolls under the bar and fades out beneath it */
.panel-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 64px 32px 28px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 58px); mask-image: linear-gradient(to bottom, transparent 0, #000 58px);
}
.panel .page { min-height: 100%; display: flex; flex-direction: column; }
.panel .page[hidden] { display: none !important; }
.panel .page[data-page="root"] { justify-content: center; }
.panel .page[data-page="root"] .panel-alt { margin-top: 0; padding-top: 28px; }
.panel .page.form { display: grid; align-content: start; gap: 12px; }
.panel-t { font-size: 28px; font-weight: var(--w-title, 700); line-height: 1.12; letter-spacing: -.028em; outline: none; text-wrap: balance; }
.panel-sub { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.panel .page.form .panel-sub { margin: -6px 0 12px; }
.panel-alt { margin-top: auto; padding-top: 18px; font-size: 14.5px; color: var(--ink-2); text-align: center; }
.panel-alt .link { color: var(--ink); font-weight: 500; }

/* free days as chips, the soonest first */
.cal-chips { display: grid; gap: 10px; margin-top: 26px; }
.chip-month { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chip-month:first-child { margin-top: 0; }
.chip-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cal-chip {
  display: grid; justify-items: center; align-content: center; gap: 1px; height: 68px; padding: 0 2px;
  border-radius: var(--r-md); background: var(--panel);
  transition: background-color .2s, box-shadow .3s var(--ease-out), transform .35s var(--ease-out), color .2s;
  animation: fade .4s var(--ease-out) backwards;
}
.cal-chip small { font-size: 12px; font-weight: 500; color: var(--ink-2); text-transform: capitalize; }
.cal-chip b { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (hover: hover) { button.cal-chip:hover { background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); transform: translateY(-2px); } }
button.cal-chip:active { transform: scale(.95); transition-duration: .1s; }
.cal-chip.is-picked { background: var(--ink); color: var(--on-ink); }
.cal-chip.is-picked small { color: inherit; opacity: .7; }
/* while the dates load: soft placeholders in their final shape, a light passing over them */
.chip-ghost, .chip-ghost-label {
  background: linear-gradient(100deg, var(--panel) 30%, color-mix(in srgb, var(--panel) 40%, var(--panel-hi)) 50%, var(--panel) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
.chip-ghost-label { width: 110px; border-radius: 6px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
#book-live .cal-loading, #book-live .cal-empty { margin: 22px 0 0; text-align: left; }
.more-dates {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  height: 50px; margin-top: 14px; padding: 0 14px 0 18px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: 15px; font-weight: 500; text-align: left;
  transition: background-color .2s, box-shadow .2s;
}
@media (hover: hover) { .more-dates:hover { background: var(--panel); box-shadow: inset 0 0 0 1px transparent; } }
.more-dates:active { background: var(--fill-2); }
.more-dates .icon { width: 17px; height: 17px; color: var(--ink-3); transition: transform .45s var(--ease); }
.more-dates:hover .icon { transform: translateX(3px); color: var(--ink); }
/* hidden while the dates load, but its space is kept so nothing shifts when it appears */
.more-dates[hidden] { display: flex; visibility: hidden; }
.cal-empty { margin: 18px 4px 4px; color: var(--ink-2); font-size: 14.5px; text-align: center; }
.cal-loading { margin: 18px 4px 4px; color: var(--ink-2); font-size: 14.5px; text-align: center; }
.empty-state { margin-top: 24px; padding: 20px 22px; border-radius: 18px; background: var(--panel); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* the full month, one step further */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.cal-month { font-size: 28px; font-weight: var(--w-title, 700); letter-spacing: -.028em; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav .round { width: 36px; height: 36px; }
#cal-prev .icon { transform: rotate(180deg); }
.cal-nav .round[disabled] { opacity: .28; pointer-events: none; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; }
.cal-dow { margin: 22px 0 8px; }
.cal-dow span { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.cal-day {
  justify-self: center; width: 100%; max-width: 48px; aspect-ratio: 1;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink-3); cursor: default;
}
.cal-day.is-free {
  background: var(--panel); color: var(--ink); font-weight: 600; cursor: pointer;
  transition: background-color .2s, color .2s, transform .35s var(--ease-out), box-shadow .3s var(--ease-out);
}
@media (hover: hover) { .cal-day.is-free:hover { background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); transform: translateY(-1px); } }
.cal-day.is-free:active { transform: scale(.92); }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cal-day.is-off { opacity: .5; }
.cal-day.is-picked { background: var(--ink); color: var(--on-ink); }
.cal-day.is-blank { visibility: hidden; }
.cal-grid { transition: opacity .3s; }
.cal-grid.is-pending { opacity: .35; }
#cal-picker { padding: 0; }

/* the times: a calm grid, each a single tap */
.cal-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; padding: 2px; }
.cal-time {
  height: 52px; padding: 0 8px; border: 0; border-radius: 14px;
  background: var(--panel); font: inherit; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink);
  cursor: pointer; animation: rise .45s var(--ease-out) backwards;
  transition: background-color .2s, box-shadow .3s var(--ease-out), transform .35s var(--ease-out);
}
.cal-time:nth-child(2) { animation-delay: .02s; } .cal-time:nth-child(3) { animation-delay: .04s; }
.cal-time:nth-child(4) { animation-delay: .06s; } .cal-time:nth-child(5) { animation-delay: .08s; }
.cal-time:nth-child(6) { animation-delay: .1s; } .cal-time:nth-child(n+7) { animation-delay: .12s; }
@media (hover: hover) { .cal-time:hover { background: var(--panel-hi); box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); transform: translateY(-1px); } }
.cal-time:active { transform: scale(.95); transition-duration: .1s; }
.cal-form { margin: 14px -20px 0; min-height: 440px; }

/* the message form: one 12px beat */
.form { display: grid; gap: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.field { padding: 0; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 0 4px; }
.field-error { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--accent); animation: fade .3s var(--ease-out); }
.field-error::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field-error:empty { display: none; }
.form .check { margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--panel); align-items: center; }
.form .check .link { color: var(--ink); }
.form button[type="submit"] { margin-top: 8px; height: 52px; }
.form-status { display: none; margin-top: 4px; text-align: center; font-size: 14.5px; }
.form-status.is-error { display: block; color: var(--accent); animation: fade .3s var(--ease-out); }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* done: the tick draws itself */
.done { padding-top: 12vh; text-align: center; }
.panel .done { padding-top: 72px; }
.panel .done .panel-sub { max-width: 30ch; margin-inline: auto; }
.done-icon {
  display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-btn);
  animation: pop .7s var(--spring) both;
}
.done-icon .icon { width: 32px; height: 32px; stroke-width: 2.2; stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw .45s .25s var(--ease-out) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 600px) {
  dialog.book-sheet { width: 100%; height: 92svh; }
  .panel-bar { padding-top: 18px; pointer-events: auto; }
  .panel-body { padding: 68px 20px calc(24px + env(safe-area-inset-bottom)); }
  .panel-t, .cal-month { font-size: 26px; }
  .panel .page[data-page="root"] { justify-content: flex-start; }
  .panel .page[data-page="root"] .panel-alt { margin-top: auto; }
  .cal-form { margin-inline: -10px; }
}

/* ---------- 9. cookie notice: small, out of the way ---------- */
.cookie {
  position: fixed; z-index: 80; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100% - 40px);
  padding: 12px 12px 12px 18px;
  background: color-mix(in srgb, var(--panel-hi) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 20px; box-shadow: 0 0 0 1px var(--hair), var(--sh-3);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .35s var(--ease-out), transform .6s var(--ease);
}
.cookie.is-visible { opacity: 1; transform: none; }
.cookie p { max-width: 16rem; }
.cookie-actions { display: flex; gap: 6px; flex: none; }
.cookie-actions .pill { height: 32px; padding: 0 13px; font-size: 13px; }
@media (max-width: 600px) {
  .cookie { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; flex-wrap: wrap; gap: 10px; padding: 14px; }
  .cookie p { max-width: none; }
  .cookie-actions { width: 100%; }
  .cookie-actions .pill { flex: 1; height: 38px; }
}
@media (max-width: 760px) { .cookie { right: 82px; } }

/* ---------- 10. chat with jesse: a round button bottom right, a small window above it ---------- */
.cb { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: grid; justify-items: end; gap: 12px; pointer-events: none; }
.cb > * { pointer-events: auto; }
html:has(dialog[open]) .cb { margin-right: var(--sbw, 0px); }
.cb-open {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-btn), 0 18px 36px -14px rgb(30 22 12 / .45);
  transition: transform .45s var(--spring), box-shadow .3s;
}
@media (hover: hover) { .cb-open:hover { transform: translateY(-2px) scale(1.03); } }
.cb-open:active { transform: scale(.94); transition-duration: .1s; }
.cb-open .cb-face svg { width: 34px; height: 34px; stroke: currentColor; transition: transform .45s var(--spring); }
.cb.is-open .cb-open .cb-face svg { transform: scale(.9); }
.cb-face svg { display: block; fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cb-face .cb-eyes ellipse { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; animation: cb-blink 5.5s 2s infinite; }
.cb-open .cb-face { color: var(--on-ink); }
.cb-face .cb-talk { fill: currentColor; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cb-face[data-state="speaking"] .cb-smile { opacity: 0; }
.cb-face[data-state="speaking"] .cb-talk { opacity: 1; animation: cb-talk .3s ease-in-out infinite alternate; }
.cb-face[data-state="listening"] .cb-dot, .cb-face[data-state="connecting"] .cb-dot { fill: currentColor; animation: cb-pulse 1.1s ease-in-out infinite; }
@keyframes cb-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes cb-talk { from { transform: scale(.85, .35); } to { transform: scale(1, 1); } }
@keyframes cb-pulse { 50% { opacity: .3; } }

/* the window grows out of the corner and folds back into it */
.cb-panel {
  display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(580px, calc(100svh - 120px));
  border-radius: 26px; background: var(--panel-hi); color: var(--ink);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-4); overflow: hidden;
  transform-origin: 100% 100%;
  transition: opacity .22s var(--ease-out), transform .45s var(--ease), display .45s allow-discrete;
}
.cb-panel[hidden] { display: none; opacity: 0; transform: translateY(10px) scale(.94); transition-duration: .18s, .25s, .25s; transition-timing-function: var(--ease-in); }
@starting-style { .cb-panel:not([hidden]) { opacity: 0; transform: translateY(14px) scale(.94); } }
.cb-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--hair); }
.cb-head .cb-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel); color: var(--ink); flex: none; box-shadow: inset 0 0 0 1px var(--hair); }
.cb-head .cb-face svg { width: 26px; height: 26px; }
.cb-who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cb-who b { font-size: 15.5px; font-weight: 650; letter-spacing: -.018em; }
.cb-status { font-size: 12.5px; color: var(--ink-2); }
.cb-head .cb-x { width: 32px; height: 32px; background: var(--fill-2); color: var(--ink-2); }
.cb-head .cb-x .icon { width: 14px; height: 14px; stroke-width: 2; }
.cb-log { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; scrollbar-width: thin; }
.cb-msg { max-width: 84%; padding: 10px 14px; border-radius: 20px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: msg-in .4s var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.cb-agent { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.cb-user { align-self: flex-end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.cb-note { align-self: center; max-width: 100%; padding: 4px 8px; font-size: 12.5px; color: var(--accent); text-align: center; }
.cb-typing { display: flex; gap: 4px; padding: 14px 15px; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: cb-dots 1.1s infinite ease-in-out; }
.cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-dots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.cb-bar { display: flex; align-items: center; gap: 6px; padding: 10px 10px 12px 12px; border-top: 1px solid var(--hair); }
.cb-in { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--panel); font-size: 15px; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .25s var(--ease-out), background-color .25s; }
.cb-in::placeholder { color: var(--ink-2); }
.cb-in:focus { outline: none; background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--ink-3), 0 0 0 4px var(--fill-2); }
.cb-mic, .cb-send { width: 42px; height: 42px; }
.cb-send { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-btn); transition: opacity .2s, transform .35s var(--ease-out); }
@media (hover: hover) { .cb-send:hover { box-shadow: var(--sh-btn); background: color-mix(in srgb, var(--ink) 90%, var(--panel-hi)); } }
.cb-send .icon { stroke-width: 2; }
/* nothing typed yet: the send arrow waits */
.cb-bar:has(.cb-in:placeholder-shown) .cb-send { opacity: .35; box-shadow: none; }
.cb-mic[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; animation: cb-pulse 1.4s ease-in-out infinite; }
@media (max-width: 600px) {
  .cb { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cb-open { width: 54px; height: 54px; }
  .cb-panel { width: calc(100vw - 28px); height: min(72svh, 580px); }
}

/* ---------- 11. the short film (home): the page dims and blurs, one 16:9 frame ---------- */
dialog.film-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
dialog.film-dialog[open] { display: block; }
dialog.film-dialog::backdrop {
  background: rgb(22 18 13 / .7);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  animation: fade .4s var(--ease-out);
}
:root[data-theme="dark"] dialog.film-dialog::backdrop { background: rgb(0 0 0 / .76); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.film-dialog::backdrop { background: rgb(0 0 0 / .76); } }
dialog.film-dialog.is-closing::backdrop { animation: fade-out .22s ease forwards; }
.film-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  min-height: 100%; padding: 64px 20px 24px;
}
.film-frame {
  position: relative; flex: none;
  width: min(1280px, 92vw, calc((100svh - 180px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden; cursor: pointer; outline: none;
  background: #f3ead7 url(/animation/assets/poster.webp) center / cover no-repeat; /* the poster until the film is ready */
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 44px 120px -30px rgb(0 0 0 / .7), 0 2px 10px rgb(0 0 0 / .2);
  animation: film-in .6s var(--ease);
}
.film-frame:focus-visible { box-shadow: 0 0 0 3px #f6f1e7, 0 44px 120px -30px rgb(0 0 0 / .7); }
dialog.film-dialog.is-closing .film-frame, dialog.film-dialog.is-closing .film-end { animation: film-out .2s var(--ease-in) forwards; }
dialog.film-dialog.is-expanding .film-frame { animation: none; }
dialog.film-dialog:not([data-state]) .film-canvas, dialog.film-dialog[data-state="loading"] .film-canvas { opacity: 0; }
@keyframes film-in { from { opacity: 0; transform: translateY(14px) scale(.965); } }
@keyframes film-out { to { opacity: 0; transform: scale(.985); } }
.film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .4s; }
.film-load {
  position: absolute; left: 50%; top: 41%; width: 160px; height: 3px; margin-left: -80px;
  border-radius: 2px; background: rgb(52 48 42 / .14); overflow: hidden; transition: opacity .3s;
}
.film-load span { position: absolute; inset: 0; background: #2c2823; transform-origin: 0 50%; transform: scaleX(0); transition: transform .2s; }
dialog.film-dialog:not([data-state="loading"]) .film-load { opacity: 0; }
.film-big {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgb(251 248 242 / .82); color: #26221d;
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 18px 44px -14px rgb(20 12 4 / .5);
  opacity: 0; transform: scale(.88); pointer-events: none;
  transition: opacity .25s, transform .5s var(--spring);
}
.film-big svg { width: 34px; height: 34px; margin-left: 5px; }
dialog.film-dialog[data-state="paused"] .film-big { opacity: 1; transform: none; pointer-events: auto; }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; cursor: pointer; opacity: 0; transition: opacity .3s; }
.film-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(52 48 42 / .18); }
.film-bar span { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #2c2823; transform-origin: 0 50%; transform: scaleX(0); }
.film-fs {
  position: absolute; right: 14px; bottom: 16px; opacity: 0;
  background: rgb(251 248 242 / .78); color: #26221d;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 6px 16px -6px rgb(20 12 4 / .4);
  transition: opacity .3s, transform .35s var(--ease-out);
}
.film-frame:hover .film-bar, .film-frame:hover .film-fs,
dialog.film-dialog[data-state="paused"] .film-bar, dialog.film-dialog[data-state="paused"] .film-fs { opacity: 1; }
@media (hover: none) { .film-bar { opacity: .9; } .film-fs { opacity: 1; } }
.film-frame:fullscreen { width: 100%; height: 100%; border-radius: 0; background: #15130f; }
/* close sits on the dark surround whatever the theme: frosted glass */
.film-close {
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 2;
  width: 44px; height: 44px;
  background: rgb(255 255 255 / .12); color: #f6f1e7;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}
@media (hover: hover) { .film-close:hover { background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); } }
.film-close .icon { stroke-width: 1.8; }
/* the last seconds: the next step appears under the film, never on top of it */
.film-end {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 50px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .7s var(--ease);
}
dialog.film-dialog.is-end .film-end { opacity: 1; transform: none; pointer-events: auto; }
.film-end .pill { min-width: 220px; }
.film-end .pill-dark { background: #f8f4ec; color: #26221d; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 28px -12px rgb(0 0 0 / .6); }
.film-end .pill:not(.pill-dark) { background: rgb(255 255 255 / .12); color: #f3ede1; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (hover: hover) { .film-end .pill:not(.pill-dark):hover { background: rgb(255 255 255 / .18); } .film-end .pill-dark:hover { background: #fff; } }
/* phones upright: the film spans the width */
@media (max-width: 600px) and (orientation: portrait) {
  .film-stage { padding: 76px 12px 24px; }
  .film-frame { width: calc(100vw - 24px); border-radius: 14px; }
  .film-end { flex-direction: column; align-items: stretch; width: min(100%, 360px); gap: 10px; }
  .film-end .pill { min-width: 0; }
}
/* phones turned sideways: the film takes the whole screen */
@media (orientation: landscape) and (max-height: 500px) {
  .film-stage { padding: 0; gap: 0; }
  .film-frame { width: min(100vw, calc(100svh * 16 / 9)); border-radius: 0; box-shadow: none; }
  .film-end { position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ---------- 12. 404 ---------- */
.stage { display: grid; place-items: center; min-height: 100svh; padding: 24px 20px 48px; text-align: center; }
.stage-inner { width: min(100%, 40rem); }
.stage-inner > * { animation: rise .9s var(--ease) backwards; }
.stage-inner > :nth-child(2) { animation-delay: .06s; }
.stage-inner > :nth-child(3) { animation-delay: .12s; }
.stage-inner > :nth-child(4) { animation-delay: .18s; }
.mark { width: 56px; height: 56px; margin: 0 auto 22px; stroke-width: 1.3; color: var(--ink); }
.title { font-size: clamp(26px, 2vw + 16px, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.028em; text-wrap: balance; }
.title span { display: block; margin-top: 8px; font-size: 17px; font-weight: 400; letter-spacing: -.012em; color: var(--ink-2); }

/* ---------- 13. page transitions ---------- */
/* moving between pages cross-fades; the bar stays where it is */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: .32s; animation-timing-function: var(--ease-out); }
/* only where the bar is pinned: on phones it scrolls away, and a named bar would fly in from off-screen */
@media (min-width: 761px) { .topbar { view-transition-name: topbar; } }
body:not(:has(.jesse-corner)) .cb { view-transition-name: chat; }
/* the theme spreads out from its button (main.js starts it) */
.theme-vt .topbar, .theme-vt .cb { view-transition-name: none; }
.theme-vt::view-transition-old(root), .theme-vt::view-transition-new(root) { mix-blend-mode: normal; }
.theme-vt::view-transition-old(root) { animation: none; }
.theme-vt::view-transition-new(root) { animation: theme-in .7s var(--ease-out); }
@keyframes theme-in { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 0)); } }

/* ---------- 14. no-JS, print, reduced motion, forced colours ---------- */
.no-js dialog.sheet { display: block; position: static; margin: 16px auto; max-height: none; overflow: visible; }
.no-js .sheet-bar .round, .no-js .cookie { display: none; }
@media print {
  dialog.sheet { display: block !important; position: static !important; box-shadow: none; margin: 12px auto; max-height: none; }
  .cookie, .topbar-tools, .links, .cb, .jesse-corner { display: none !important; }
  .topbar { position: static; box-shadow: none; background: none; }
  body::before { display: none; }
  html, body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog.sheet::backdrop { animation: none !important; transition-duration: .01ms !important; }
  .topbar { background-color: var(--glass); box-shadow: 0 1px 0 var(--hair); }
  .done-icon .icon { stroke-dashoffset: 0; }
}
@media (prefers-contrast: more) {
  :root { --hair: color-mix(in srgb, var(--ink) 30%, transparent); --hair-2: color-mix(in srgb, var(--ink) 45%, transparent); --ink-2: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
}
@media (forced-colors: active) {
  .pill, .round, .input, .cal-chip, .cal-time, .cal-day.is-free, .more-dates, .cb-panel, dialog.sheet, .cookie, .jc-hello { border: 1px solid CanvasText; }
  .top-links a[aria-current="page"] { outline: 1px solid CanvasText; }
}