/* SessionSpark website: the shared base.
   Light and pink as it stands; a site's own theme.css is laid over it.
   Layout: one long page. The hero is the product itself, a morning in
   the diary; everything below it explains that picture.
   Colours are the app's own tokens, so the site and the app are one brand. */
:root {
  --plum: #2A1B27;          /* deep surround, the app's darkest plane */
  --canvas: #FCF2F7;
  --blush: #F9E1EC;         /* the hero's wash */
  --card: #FFFFFF;
  --sunk: #F7E8F0;
  --line: #F0DCE6;
  --line-strong: #E2C6D4;
  --ink: #1A1220;
  --muted: #685C70;
  --accent: #D3195F;
  --accent-dark: #B0124F;
  --accent-soft: #FDE8F0;
  --accent-ink: #9A0F47;
  --spark: #FFD34E;
  --on-accent: #FFFFFF;

  --arrived: #B86E00; --arrived-soft: #FFF1D9;
  --prep: #0A84A8;    --prep-soft: #DDF3FA;
  --service: #3B5BDB; --service-soft: #E3E9FF;
  --ready: #138A57;   --ready-soft: #DDF4E8;
  --done: #B9B0BC;
  --danger: #B5352A;

  --display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 72rem;
  --radius: 14px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 1rem/1.6 var(--body); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band + .band { border-top: 1px solid var(--line); }
.eyebrow { font: 600 0.75rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.lede { font-size: 1.125rem; color: var(--muted); max-width: 38rem; }
.section-head { display: grid; gap: 0.75rem; max-width: 42rem; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.95rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }

/* ── Header ──────────────────────────────────────────────── */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--canvas); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); font: 700 1.15rem/1 var(--display); }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--ink); }
.top .btn { min-height: 2.4rem; padding: 0 1rem; }
@media (max-width: 760px) { .nav { display: none; } .top .btn-ghost { display: none; } .top .btn-primary { margin-left: auto; } }

/* ── Hero ────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background: radial-gradient(60rem 30rem at 85% 10%, var(--blush), transparent 70%), linear-gradient(180deg, var(--canvas), var(--canvas)); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy { display: grid; gap: 1.5rem; min-width: 0; }
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); font-weight: 800; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-note { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* The diary: a real-looking Saturday morning */
.diary {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -24px color-mix(in srgb, var(--plum) 35%, transparent);
  overflow: hidden; min-width: 0; margin: 0;
}
.diary-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); background: var(--sunk); }
.diary-bar strong { font: 700 0.95rem/1.2 var(--body); }
.diary-bar span { font-size: 0.8rem; color: var(--muted); }
.diary-bar .views { margin-left: auto; display: flex; gap: 2px; background: var(--line); border-radius: 8px; padding: 2px; }
.diary-bar .views b { font: 600 0.72rem/1 var(--body); padding: 0.35rem 0.55rem; border-radius: 6px; color: var(--muted); }
.diary-bar .views b.on { background: var(--card); color: var(--ink); }
.grid { display: grid; grid-template-columns: 3.1rem repeat(2, minmax(0, 1fr)); }
.grid .who { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); font-weight: 600; font-size: 0.85rem; min-width: 0; }
.grid .who i { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 0.7rem/1 var(--body); font-style: normal; color: var(--on-accent); }
.times { display: grid; grid-template-rows: repeat(8, 2.6rem); }
.times span { font: 500 0.68rem/1 var(--mono); color: var(--muted); padding: 0.3rem 0.4rem 0 0; text-align: right; border-top: 1px solid var(--line); }
.col { position: relative; display: grid; grid-template-rows: repeat(8, 2.6rem); border-left: 1px solid var(--line); min-width: 0; }
.col > s { border-top: 1px solid var(--line); text-decoration: none; }
.appt {
  position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 0.35rem 0.5rem;
  border-left: 4px solid var(--c); background: var(--cs); overflow: hidden; min-width: 0;
  display: grid; align-content: start; gap: 1px;
}
.appt b { font-size: 0.8rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt small { font-size: 0.7rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt .st { font: 600 0.62rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.booked { background: transparent; border: 1.5px dashed var(--line-strong); border-left: 4px solid var(--line-strong); --c: var(--muted); }
.appt.collected { --c: var(--done); --cs: var(--sunk); }
.appt.collected b { color: var(--muted); }
.s-arrived { --c: var(--arrived); --cs: var(--arrived-soft); }
.s-prep { --c: var(--prep); --cs: var(--prep-soft); }
.s-service { --c: var(--service); --cs: var(--service-soft); }
.s-ready { --c: var(--ready); --cs: var(--ready-soft); }
.now { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 2; }
.now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.diary-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }
.diary-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }
.diary-foot i { width: 0.6rem; height: 0.6rem; border-radius: 3px; background: var(--c); }

/* ── The day, stage by stage ─────────────────────────────── */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.stages li { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 12px; padding: 1rem; display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.stages b { font: 700 1.05rem/1.2 var(--display); }
.stages p { font-size: 0.9rem; color: var(--muted); }
.stages .booked-c { --c: var(--line-strong); border-top-style: dashed; }
.stages .done-c { --c: var(--done); }
.appt.short small { display: none; }
@media (max-width: 1000px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Features ────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature { background: var(--card); padding: 1.5rem 1.35rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.feature svg { width: 28px; height: 28px; color: var(--accent); }
.feature h3 { font-size: 1.15rem; font-weight: 700; }
.feature p { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* ── Online booking split ────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split > * { min-width: 0; }
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.ticks li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; }
.ticks li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border-radius: 50%; background: var(--ready-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23138A57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.phone { justify-self: center; width: min(100%, 20rem); background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 1.25rem 1rem; box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--plum) 40%, transparent); display: grid; gap: 0.9rem; }
.phone h4 { margin: 0; font: 700 1rem/1.2 var(--display); }
.phone .svc { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; font-size: 0.85rem; }
.phone .svc.on { border-color: var(--accent); background: var(--accent-soft); }
.phone .svc span { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }
.phone .day { font: 600 0.72rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.slots b { font: 500 0.8rem/1 var(--mono); text-align: center; padding: 0.6rem 0; border: 1px solid var(--line); border-radius: 8px; }
.slots b.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slots b.gone { color: var(--done); text-decoration: line-through; }
.phone .deposit { font-size: 0.8rem; color: var(--muted); padding-top: 0.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.phone .deposit b { color: var(--ink); font-family: var(--mono); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ── Pricing ─────────────────────────────────────────────── */
.price { background: var(--blush); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 20px; padding: clamp(1.75rem, 5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.price > * { min-width: 0; }
.price h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--ink); }
.price .eyebrow { color: var(--accent-ink); }
.price p { color: var(--muted); margin-top: 0.75rem; max-width: 34rem; }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.95rem; color: var(--ink); }
.price li { display: flex; gap: 0.6rem; }
.price li::before { content: "✦"; color: var(--accent); flex: none; }
.price .btn-primary { margin-top: 1.5rem; }
@media (max-width: 820px) { .price { grid-template-columns: minmax(0, 1fr); } }

/* ── Demo form ───────────────────────────────────────────── */
.demo .split { align-items: start; }
.steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.8rem; counter-increment: s; }
.steps li::before { content: counter(s); width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 0.95rem/1 var(--display); }
.steps b { display: block; }
.steps span { color: var(--muted); font-size: 0.95rem; }
form.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.25rem, 4vw, 2rem); display: grid; gap: 1rem; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 520px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.88rem; min-width: 0; }
label small { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--canvas);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.7rem 0.8rem;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-foot p { font-size: 0.8rem; color: var(--muted); flex: 1 1 14rem; }
.msg { border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.95rem; }
.msg.ok { background: var(--ready-soft); color: var(--ink); border: 1px solid var(--ready); }
.msg.bad { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent); }

/* ── Footer ──────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding-block: 2.5rem; font-size: 0.9rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
footer a { color: var(--muted); }

/* ── Privacy page ────────────────────────────────────────── */
.prose { max-width: 42rem; display: grid; gap: 1rem; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; }
.prose h2 { font-size: 1.35rem; font-weight: 700; margin-top: 1.25rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.prose .todo { background: var(--arrived-soft); border: 1px dashed var(--arrived); border-radius: 6px; padding: 0 0.3rem; }

/* ── tattoo.sessionspark.co.uk ───────────────────────────────
   The studios' site: always dark, the app's Ink look. Laid over the
   shared base above, so only the colours and a few studio-only pieces
   live here. The faint flash-sheet pattern behind the hero is the same
   one the app draws behind a studio's pages. */
:root {
  --plum: #000000;
  --canvas: #0F0D12;
  --blush: rgba(139, 92, 246, 0.28);
  --card: #1A1720;
  --sunk: #15121A;
  --line: #2A2431;
  --line-strong: #3D3547;
  --ink: #F2EEF5;
  --muted: #A79DB2;
  --accent: #8B5CF6;
  --accent-dark: #7C3AED;
  --accent-soft: #2B2340;
  --accent-ink: #C4B5FD;
  --spark: #F5C451;
  --on-accent: #FFFFFF;

  --arrived: #F0A63A; --arrived-soft: #3A2A10;
  --prep: #4CC3E6;    --prep-soft: #0F2C36;
  --service: #8EA4FF; --service-soft: #1C2550;
  --ready: #46C98C;   --ready-soft: #10301F;
  --done: #6E6370;
  --danger: #F07A6E;
  color-scheme: dark;
}

.hero { position: relative; isolation: isolate;
  background:
    radial-gradient(50rem 30rem at 90% 0%, var(--blush), transparent 65%),
    radial-gradient(40rem 26rem at 0% 100%, rgba(190, 40, 90, 0.16), transparent 65%),
    var(--canvas); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%22360%22 viewBox=%220 0 360 360%22%3E%3Cg transform=%22translate(60 62) rotate(-8) scale(1)%22%3E%3Cpath d=%22M0 0 Q14 -11 30 -5 L54 -20 L41 -3 L58 3 L37 6 Q21 17 5 9 L-8 13 Z%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%226%22 cy=%220%22 r=%221.6%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cpolygon points=%22234.6,37.2 236.9,47.3 246.9,49.9 238.0,55.2 238.6,65.5 230.8,58.6 221.2,62.4 225.3,52.9 218.8,45.0 229.0,45.9%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cg transform=%22translate(300 150) rotate(12) scale(1.1)%22%3E%3Cpath d=%22M0 9 C-20 -6 -14 -22 0 -12 C14 -22 20 -6 0 9 Z%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(150 170) rotate(25) scale(1)%22%3E%3Cpath d=%22M0 -30 L5 4 L-5 4 Z%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-13 5 H13 M0 5 V20%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%220%22 cy=%2224%22 r=%223.5%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(60 250) rotate(0) scale(1)%22%3E%3Ccircle r=%225%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-5 -2 A9 9 0 1 1 3 9 M7 -7 A13 13 0 1 1 -11 8%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 12 Q26 14 26 28 Q14 26 12 12 Z M-12 13 Q-24 20 -20 32 Q-10 26 -12 13 Z%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(250 262) rotate(-10) scale(1)%22%3E%3Cpath d=%22M5 -20 L-7 3 H2 L-5 20 L9 -4 H0 Z%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cpolygon points=%22330.0,311.0 332.4,316.7 338.6,317.2 333.9,321.3 335.3,327.3 330.0,324.1 324.7,327.3 326.1,321.3 321.4,317.2 327.6,316.7%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cg transform=%22translate(186 330) rotate(-6) scale(0.7)%22%3E%3Cpath d=%22M0 0 Q14 -11 30 -5 L54 -20 L41 -3 L58 3 L37 6 Q21 17 5 9 L-8 13 Z%22 stroke=%22%23fff%22 stroke-width=%222.2%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%226%22 cy=%220%22 r=%221.6%22 fill=%22%23fff%22/%3E%3C/g%3E%3Ccircle cx=%22140%22 cy=%2260%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22110%22 cy=%22120%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22330%22 cy=%2240%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2230%22 cy=%22160%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22220%22 cy=%22200%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22300%22 cy=%22220%22 r=%221.6%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22110%22 cy=%22320%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%22330%22 r=%221.6%22 fill=%22%23fff%22/%3E%3C/svg%3E") 0 0 / 360px 360px repeat; }

.diary { box-shadow: 0 1px 0 var(--line), 0 30px 60px -28px rgba(0, 0, 0, 0.8); }
.appt .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.appt .tags em { font: 600 0.6rem/1 var(--body); font-style: normal; padding: 3px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); white-space: nowrap; }

.phone { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85); }
.phone dl.quote { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: 0.85rem; }
.phone dl.quote dt { color: var(--muted); }
.phone dl.quote dd { margin: 0; font-weight: 600; font-family: var(--mono); font-size: 0.8rem; text-align: right; }
.phone .pay { background: var(--accent); color: var(--on-accent); text-align: center; border-radius: 10px; padding: 0.7rem; font-weight: 600; font-size: 0.85rem; }

.price { background: linear-gradient(135deg, #221A33, #1A1720 60%); border-color: var(--line-strong); }
.ticks li::before { background-color: var(--ready-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2346C98C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.stages li { background: var(--card); }