/* LX Field Solutions — front-end mockup.
   Option 5's visual language, restructured: same paper, palette, panels,
   hairlines and wordmark. The console conceit is gone — sans reads, mono counts. */

:root {
  --paper: #EFEEE9;
  --card: #F8F7F4;
  --ink: #1C1C1A;
  --grid: #DDD9D0;
  --pen: #2B4C9B;
  --red: #B03A2E;
  --purple: #6B3FA0;
  --green: #2E6B4F;
  --muted: #6E6A61;
  --rule: #CFCAC0;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --header-h: 52px;
  --gap-section: 2.5rem;
  --gap-head: 1.5rem;
  --shadow: 3px 3px 0 rgba(28, 28, 26, .10);
  --measure: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 .6em; text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

p { margin: 0 0 1em; }
main p, main li { max-width: var(--measure); }

a { color: var(--pen); text-underline-offset: .16em; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* mono carries the figures: prices, durations, dates, labels */
.mono { font-family: var(--mono); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.2rem; }
.narrow { max-width: 42rem; }
.lede { font-size: 1.12rem; max-width: var(--measure); }
/* the copy directly under a page heading runs to the full content width, so its
   right edge lines up with the panels and rows below it rather than stopping short */
.page-intro p { max-width: none; }
.section { margin-top: var(--gap-section); }
.section > h2 { margin-bottom: var(--gap-head); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* ---------- site-header ---------- */
.site-header {
  border-bottom: 1px solid var(--ink); background: rgba(239, 238, 233, .92);
  position: sticky; top: 0; z-index: 30;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h); flex-wrap: nowrap;
}
/* the wordmark truncates rather than pushing the nav off a 375px screen */
.wordmark {
  color: var(--ink); text-decoration: none; font-weight: 600;
  letter-spacing: -.03em; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.wordmark .b { color: var(--purple); }
/* the nav holds its width; the wordmark is the one that gives ground */
.site-nav { margin-left: auto; flex: none; }
.site-nav ul {
  display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0;
  font-size: .88rem; align-items: center; flex-wrap: nowrap;
}
.site-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
/* the booking link sits at the right end of the bar; it takes the margin-left
   when there is no nav to hold that spot, and follows the nav when there is */
.header-cta {
  margin-left: auto; flex: none;
  font-size: .84rem; padding: .42rem .8rem; box-shadow: 2px 2px 0 rgba(28, 28, 26, .18);
}
.site-nav + .header-cta { margin-left: 0; }
.header-cta:active { box-shadow: 1px 1px 0 rgba(28, 28, 26, .18); }

@media (max-width: 560px) {
  .site-header .wrap { gap: .6rem; padding: 0 1rem; }
  .wordmark { font-size: .86rem; }
  /* the mark contracts to its monogram rather than crowding the nav —
     collapsed, not removed, so the link keeps its full name */
  .wordmark-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-nav ul { gap: .8rem; font-size: .8rem; }
  /* the button keeps its verb and drops the qualifier — the label still reads
     as an instruction at 375px, where the full phrase would wrap or shove */
  .header-cta { font-size: .78rem; padding: .4rem .7rem; }
  .header-cta .cta-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- cta-menu ---------- */
/* the booking button answers the question it raises — "what am I agreeing to?" —
   in a panel that drops from the button itself, rather than sending a cold click
   off to a calendar. The link still points at the calendar, so with no JS, or on
   a modified click, the booking page opens exactly as before. */
.cta-dock { position: relative; display: flex; margin-left: auto; flex: none; }
/* inside the dock the button no longer needs to claim the free space itself */
.cta-dock .header-cta { margin-left: 0; }
.site-nav + .cta-dock { margin-left: 0; }

.cta-menu {
  position: absolute; top: calc(100% + .7rem); right: 0; z-index: 40;
  /* held to the viewport on a 375px screen, where the dock sits 1rem from the edge */
  width: min(21rem, calc(100vw - 2rem));
  background: var(--card); border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(28, 28, 26, .18);
  padding: .9rem 1rem 1rem;
  animation: cta-menu-in .16s ease-out;
}
/* the notch ties the panel to the button it came from: a square turned on its
   corner, showing the two sides that carry on the panel's own border */
.cta-menu::before {
  content: ""; position: absolute; top: -5px; right: 1.1rem;
  width: 9px; height: 9px; background: var(--card);
  border-left: 1px solid var(--ink); border-top: 1px solid var(--ink);
  transform: rotate(45deg);
}
/* the same mono label the panels carry, so the drop-down reads as one of them */
.cta-menu-title {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px dashed var(--rule); padding-bottom: .5rem; margin: 0 0 .7rem;
}
.cta-menu-copy { font-size: .9rem; line-height: 1.5; margin: 0 0 .9rem; }
/* the action fills the panel's width: at this size there is nothing to line up
   beside it, and a full-width bar is the clearer target on a phone */
.cta-menu .btn { width: 100%; justify-content: center; font-size: .88rem; padding: .5rem .9rem; }
.cta-menu-hint {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  margin: .55rem 0 0; text-align: center;
}
@keyframes cta-menu-in { from { opacity: 0; transform: translateY(-5px); } }

/* ---------- panel ---------- */
.panel {
  background: var(--card); border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem; margin: 1.5rem 0;
}
.panel > :last-child { margin-bottom: 0; }
.panel-title {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px dashed var(--rule); padding-bottom: .5rem; margin: 0 0 1rem;
}

/* ---------- hero ---------- */
.hero { padding: 2.5rem 0 1rem; }

/* ---------- availability: the signature block ---------- */
.availability { font-family: var(--mono); }
.availability-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.availability-head strong { font-size: .86rem; }
.availability-head .stamp { font-size: .76rem; color: var(--muted); }
.availability-grid { display: grid; grid-template-columns: 4.4rem repeat(5, 1fr); gap: 3px; font-size: .76rem; }
.availability-grid .dow { color: var(--muted); text-align: center; padding-bottom: .2rem; }
.availability-grid .wk { color: var(--muted); display: flex; align-items: center; }
.availability-grid .day {
  border: 1px solid var(--rule); background: var(--paper);
  min-height: 3.1rem; padding: .3rem .35rem; display: flex; flex-direction: column; gap: .15rem;
}
.availability-grid .day .num { color: var(--muted); font-size: .7rem; }
.availability-grid .day .tag { font-size: .68rem; line-height: 1.25; }
.availability-grid .day[data-state="booked"] { background: repeating-linear-gradient(45deg, #E3DFD6, #E3DFD6 4px, #EFEEE9 4px, #EFEEE9 8px); color: var(--muted); }
.availability-grid .day[data-state="open"] { border-color: var(--green); background: #E7F1EB; }
.availability-grid .day[data-state="open"] .tag { color: var(--green); }
.availability-grid .day[data-state="hold"] { border-color: var(--pen); background: #E7ECF6; }
.availability-grid .day[data-state="hold"] .tag { color: var(--pen); }
.availability-grid .day[data-state="off"] { background: transparent; border-style: dashed; }
.availability-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .76rem; color: var(--muted); margin-top: .8rem; }
.availability-legend span::before {
  content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem;
  border: 1px solid var(--rule); vertical-align: -.05em;
}
.availability-legend .l-open::before { border-color: var(--green); background: #E7F1EB; }
.availability-legend .l-hold::before { border-color: var(--pen); background: #E7ECF6; }
.availability-legend .l-booked::before { background: #E3DFD6; }
@media (max-width: 560px) {
  .availability-grid { grid-template-columns: 3.2rem repeat(5, 1fr); font-size: .7rem; }
  .availability-grid .day { min-height: 2.6rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1.3;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: .6rem 1rem; border: 1px solid var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 rgba(28, 28, 26, .18);
}
.btn:hover { background: var(--pen); border-color: var(--pen); color: var(--paper); }
.btn:active { box-shadow: 1px 1px 0 rgba(28, 28, 26, .18); transform: translate(2px, 2px); }
.btn-alt { background: var(--card); color: var(--ink); }
.btn-alt:hover { background: var(--paper); color: var(--ink); border-color: var(--red); }
.btn svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-big { font-size: 1.08rem; padding: .9rem 1.5rem; box-shadow: 4px 4px 0 rgba(28, 28, 26, .22); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.1rem; }
.btn-row .meta-note { font-family: var(--mono); font-size: .8rem; color: var(--muted); }

/* ---------- spec-table ---------- */
table.spec-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.spec-table th, table.spec-table td { border: 1px solid var(--rule); padding: .5rem .6rem; text-align: left; vertical-align: top; }
table.spec-table th { background: var(--paper); font-weight: 600; white-space: nowrap; font-family: var(--mono); font-size: .8rem; }
table.spec-table td { max-width: var(--measure); }
table.spec-table caption,
table.compare-table caption {
  text-align: left; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding-bottom: .5rem;
}
.table-scroll { overflow-x: auto; }

/* ---------- compare-table ---------- */
table.compare-table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .86rem; }
table.compare-table th, table.compare-table td { border: 1px solid var(--rule); padding: .5rem .6rem; text-align: left; vertical-align: top; }
table.compare-table thead th { background: var(--paper); font-weight: 600; }
table.compare-table tbody th { background: var(--paper); font-family: var(--mono); font-size: .8rem; font-weight: 600; white-space: nowrap; }
table.compare-table td.figure { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }

/* ---------- offer-rows ---------- */
/* one service per full-width box, stacked 1 x n: mono rail left, prose right */
.offer-rows { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.offer-row {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr);
  gap: .5rem 1.8rem; align-items: start;
  background: var(--card); border: 1px solid var(--ink);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.offer-row h3 { margin: 0 0 .35rem; }
.offer-row .meta {
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
  display: flex; flex-direction: column; gap: .1rem; margin: 0;
}
.offer-row p { font-size: .95rem; margin: 0; }
.offer-row .ends-with {
  border-top: 1px dashed var(--rule); padding-top: .6rem; margin-top: .6rem;
  font-size: .9rem; color: #4A4640;
}
.offer-row .note {
  margin-top: .6rem; font-size: .9rem; color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: .8rem;
}
@media (max-width: 640px) {
  .offer-row { grid-template-columns: 1fr; gap: .6rem; }
  .offer-row .meta { flex-direction: row; flex-wrap: wrap; gap: .8rem; }
}

/* ---------- rungs ---------- */
.rungs { list-style: none; padding: 0; margin: 0; }
.rungs li { border-left: 2px solid var(--rule); padding: .7rem 0 .7rem 1rem; max-width: none; }
.rungs li:first-child { border-left-color: var(--green); }
.rungs .r-head { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.rungs .r-num { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.rungs .r-title { font-weight: 600; font-size: 1rem; }
.rungs .r-price { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin-left: auto; }
.rungs p { margin: .3rem 0 0; font-size: .95rem; }

/* ---------- timeline ---------- */
.timeline { margin: 0; }
.timeline .row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--rule); }
.timeline .row:last-child { border-bottom: 0; }
.timeline dt { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.timeline dd { margin: 0; font-size: .95rem; max-width: var(--measure); }
@media (max-width: 560px) {
  .timeline .row { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---------- portrait ---------- */
.portrait {
  display: block; border: 1px solid var(--ink); box-shadow: var(--shadow);
  object-fit: cover; object-position: 42% 40%; background: var(--card);
  border-radius: 50%;
}
.portrait-lg { width: min(420px, 72vw); height: min(420px, 72vw); }
.portrait-caption { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin: .6rem 0 0; line-height: 1.4; }
.portrait-caption strong { color: var(--ink); font-weight: 600; display: block; }

/* ---------- contact-methods ---------- */
.contact-methods { border-top: 1px dashed var(--rule); margin-top: 1rem; }
.contact-method {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: .5rem 1rem; align-items: center;
  padding: .75rem 0; border-bottom: 1px dashed var(--rule);
}
.contact-method .cm-label { display: inline-flex; color: var(--muted); }
.contact-method .cm-label svg { width: 1.5rem; height: 1.5rem; }
.contact-method .cm-label .icon-stroke {
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.contact-method .cm-value { font-family: var(--mono); font-size: .9rem; word-break: break-word; }

/* ---------- cm-copy ---------- */
/* the square at the end of each row: the same card-on-ink-with-a-hard-shadow as
   every other control here, sized to the row rather than to a sentence. The
   clipboard becomes a tick for two seconds — the icon is the whole feedback,
   so there is no label to swap. */
.cm-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none; padding: 0;
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--muted); cursor: pointer;
  box-shadow: 2px 2px 0 rgba(28, 28, 26, .14);
}
.cm-copy svg {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.cm-copy:hover { border-color: var(--red); color: var(--red); }
.cm-copy:active { box-shadow: 1px 1px 0 rgba(28, 28, 26, .14); transform: translate(1px, 1px); }
/* the tick waits behind the clipboard until the copy lands */
.cm-copy .icon-check { display: none; }
.cm-copy[data-copied="true"] {
  background: #E7F1EB; border-color: var(--green); color: var(--green);
}
.cm-copy[data-copied="true"] .icon-copy { display: none; }
.cm-copy[data-copied="true"] .icon-check { display: block; }

/* ---------- email-menu ---------- */
/* clicking an address is a coin toss — a mailto: opens the desktop mail app on
   one machine and nothing at all on the next. The panel makes the routes
   explicit rather than betting on one. Same panel language as .cta-menu. */
.email-choice { position: relative; display: inline-block; }

.email-menu {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 40;
  /* held to the viewport on a 375px screen, where the panel's own padding and
     the page gutter take ~2.6rem before this starts */
  width: min(18rem, calc(100vw - 3.5rem));
  background: var(--card); border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(28, 28, 26, .18);
  padding: .8rem .9rem .9rem;
  animation: cta-menu-in .16s ease-out;
}
/* the notch ties the panel to the address it came from */
.email-menu::before {
  content: ""; position: absolute; top: -5px; left: 1.1rem;
  width: 9px; height: 9px; background: var(--card);
  border-left: 1px solid var(--ink); border-top: 1px solid var(--ink);
  transform: rotate(45deg);
}
.email-menu-title {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px dashed var(--rule); padding-bottom: .5rem; margin: 0 0 .5rem;
  word-break: break-word;
}
/* the routes are one stack of full-width rows: at this size there is nothing to
   line up beside them, and a full-width bar is the clearer target on a phone */
.email-menu-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1.3;
  color: var(--pen); text-decoration: none;
  padding: .5rem .45rem;
}
.email-menu-item + .email-menu-item { border-top: 1px dashed var(--rule); }
.email-menu-item:hover { background: var(--paper); color: var(--red); }
.email-menu-hint {
  font-family: var(--mono); font-size: .68rem; font-weight: 400;
  color: var(--muted); flex: none;
}

/* ---------- copy-btn ---------- */
.copy-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1.3;
  border: 1px solid var(--ink); background: var(--card); color: var(--ink);
  padding: .6rem 1rem; cursor: pointer; border-radius: 0;
  box-shadow: 3px 3px 0 rgba(28, 28, 26, .18);
}
.copy-btn:active { box-shadow: 1px 1px 0 rgba(28, 28, 26, .18); transform: translate(2px, 2px); }
.copy-btn svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.copy-btn:hover { border-color: var(--red); color: var(--red); }
.copy-btn[data-copied="true"] { background: #E7F1EB; border-color: var(--green); color: var(--green); }

/* ---------- scheduler ---------- */
.scheduler {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--ink); background: var(--card); box-shadow: var(--shadow);
  min-height: 34rem;
}
.scheduler-cal { padding: 1.1rem 1.2rem; border-right: 1px solid var(--rule); }
.scheduler-times { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.scheduler h3 { font-size: .95rem; margin-bottom: .8rem; }
.month-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.month-name { font-family: var(--mono); font-size: .88rem; font-weight: 600; }
.month-nav { display: flex; gap: .35rem; }
.month-nav button {
  font-family: var(--mono); font-size: .9rem; line-height: 1;
  width: 1.9rem; height: 1.9rem; border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer; border-radius: 0;
}
.month-nav button:hover { background: var(--ink); color: var(--paper); }
.month-nav button:disabled { color: var(--rule); border-color: var(--rule); background: transparent; cursor: default; }
.month-nav button:disabled:hover { background: transparent; color: var(--rule); }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.month .dow { font-family: var(--mono); font-size: .66rem; color: var(--muted); text-align: center; padding-bottom: .25rem; }
.month .dow.weekend { color: var(--rule); }
.month .pad { min-height: 2.2rem; }
.day-btn {
  font-family: var(--mono); font-size: .78rem; line-height: 1;
  min-height: 2.2rem; padding: .3rem 0; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); cursor: pointer; border-radius: 0;
}
.day-btn[data-state="open"] { border-color: var(--green); background: #E7F1EB; color: var(--green); font-weight: 600; }
.day-btn[data-state="open"]:hover { border-color: var(--ink); color: var(--ink); }
.day-btn[aria-disabled="true"] { color: var(--rule); background: transparent; border-style: dashed; cursor: default; }
.day-btn.weekend[aria-disabled="true"] { color: #DEDAD1; }
.day-btn[aria-pressed="true"] {
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 600;
}
.month-legend { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin: .8rem 0 0; }

.times-list { list-style: none; margin: 0; padding: 0; }
.times-list li { max-width: none; }
.time-btn {
  display: block; width: 100%; text-align: left;
  font-family: var(--mono); font-size: .88rem;
  padding: .55rem .7rem; margin-bottom: .5rem;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; border-radius: 0; box-shadow: 2px 2px 0 rgba(28, 28, 26, .10);
}
.time-btn:hover { background: var(--card); border-color: var(--pen); color: var(--pen); }
.time-btn[aria-pressed="true"] { border-width: 2px; border-color: var(--ink); background: var(--card); font-weight: 600; }
.time-btn .local { display: block; font-size: .72rem; color: var(--muted); }
.times-empty { color: var(--muted); font-size: .9rem; }
.tz-line {
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
  border-left: 2px solid var(--pen); padding-left: .7rem; margin: auto 0 0;
}
.confirm-line { font-family: var(--mono); font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
.back-link { background: none; border: 0; padding: 0; font-family: var(--sans); font-size: .88rem; color: var(--pen); cursor: pointer; text-decoration: underline; }
.back-link:hover { color: var(--red); }
@media (max-width: 760px) {
  .scheduler { grid-template-columns: 1fr; min-height: 0; }
  .scheduler-cal { border-right: 0; border-bottom: 1px solid var(--rule); }
  .tz-line { margin-top: 1rem; }
}

/* ---------- annot ---------- */
.annot {
  border-left: 2px solid var(--red); padding-left: .9rem; margin: 1.3rem 0;
  font-size: .95rem; color: #4A4640; max-width: var(--measure);
}
.annot::before {
  content: "note "; font-family: var(--mono); color: var(--red);
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- empty-slot ---------- */
.empty-slot { border: 1px dashed var(--muted); padding: 1.2rem; color: var(--muted); }
.empty-slot strong { color: var(--ink); }
.empty-slot p:last-child { margin-bottom: 0; }

/* ---------- forms ---------- */
.field { margin-bottom: 1.3rem; }
label { display: block; font-weight: 600; margin-bottom: .2rem; font-size: .9rem; }
.optional { font-weight: 400; color: var(--muted); font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.hint { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; max-width: var(--measure); }
input[type=text], input[type=email], textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem; padding: .55rem .65rem;
  border: 1px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 0;
}
textarea { min-height: 8rem; resize: vertical; }
[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.error { color: var(--red); font-size: .85rem; display: block; margin-top: .3rem; }
.error:empty { display: none; }
.form-summary {
  border: 1px solid var(--red); color: var(--red); background: #FBEDEB;
  padding: .6rem .8rem; font-size: .88rem; margin-bottom: 1.2rem;
}
.inert-note { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-top: .8rem; }

/* ---------- site-footer ---------- */
.site-footer { border-top: 1px solid var(--ink); margin-top: 3rem; padding: 1.6rem 0 2.5rem; font-size: .82rem; color: var(--muted); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer strong { color: var(--ink); }
.site-footer ul { list-style: none; margin: .3rem 0 0; padding: 0; }
/* legal block sits hard right, held to a readable measure */
.footer-legal { margin-left: auto; max-width: 26rem; text-align: right; }
.footer-legal li + li { margin-top: .3rem; }

@media (max-width: 760px) {
  .footer-legal { margin-left: 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:active, .copy-btn:active, .cm-copy:active { transform: none; }
}