/*
 * Clinidiary — "The Day" design direction.  PREVIEW ONLY.
 *
 * Not linked from the live site and not deployed. Lives beside the current
 * styles.css so the two can be read one URL apart.
 *
 * ## The thesis
 *
 * The page is a clinic day. A single time rail runs down the left edge of
 * everything from the first patient to after the last one, and every section
 * is pinned to the moment in a Tuesday when that part of the software is
 * actually touched. The rail is the one bold idea; everything else is kept
 * deliberately quiet so it stays the thing you remember.
 *
 * ## Why not the current design
 *
 * The current site is careful and honest and looks like every other practice
 * management landing page: white ground, slate + teal, six rounded cards with
 * icons, a near-black pill button, a fake browser window around the product
 * shot. Nothing on it could only be Clinidiary. The claim that earns this
 * product its readers — "shaped by the days it had to survive" — is made in a
 * sentence and nowhere in the layout. Here it is the layout.
 *
 * ## Where the colours come from
 *
 * Nothing invented. The diary already colours appointments by kind, and those
 * hues already mean something to anybody who has used the software for a day.
 * They are promoted from decoration inside the illustration to the page's
 * organising system: the rail wears the hue of the moment it is marking.
 */

@font-face {
  font-family: 'Figtree';
  src: url('/brand/fonts/figtree-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground: a cool paper rather than white. White is the default nobody
     chose; cream is the default every generated page chooses this year. */
  --paper: #f6f8fb;
  --lift: #ffffff;
  --ink: #0b1220;
  --ink-soft: #475569;
  /* Kept from the current site: these two were picked to clear AA (5.45:1 and
     4.97:1) after a #94a3b8 that was "not a colour so much as a rumour of
     one". Not a decision to re-open for a visual refresh. */
  --ink-faint: #5b6b7f;
  --rule: #e1e8f0;
  --rule-firm: #cbd7e4;

  --accent: #0d9488;
  --accent-text: #0f766e;
  --accent-soft: #ecfdf9;

  /*
   * The chrome's own values, mirrored from styles.css.
   *
   * The header, the footer and the buttons are the only things a visitor sees
   * on every page, so they are the one part of this file that must not have
   * an opinion: `/` and `/features/` have to be the same site. Everything from
   * here to the end of the buttons section is copied from styles.css
   * deliberately, and if that file's chrome changes, this has to change with
   * it. The real fix is one shared stylesheet for the chrome — see PROGRESS.
   */
  --brand: #0f172a;
  --line: #e2e8f0;

  /* The appointment kinds. Each has a text-safe tone and a fill; the text one
     clears 4.5:1 on paper, the fill is only ever behind ink. */
  --sky: #0369a1;      --sky-fill: #e0f2fe;
  --teal: #0f766e;     --teal-fill: #cbfbf1;
  --indigo: #4338ca;   --indigo-fill: #e0e7ff;
  --emerald: #047857;  --emerald-fill: #d1fae5;
  --rose: #be123c;     --rose-fill: #ffe4e6;
  --amber: #b45309;    --amber-fill: #fef3c7;
  --violet: #6d28d9;   --violet-fill: #ede9fe;
  --slate: #475569;    --slate-fill: #e2e8f0;

  /* The rail. One number, because everything measures off it. */
  --rail: 7rem;
  --gutter: 1.75rem;
  /*
   * The page column, in one place.
   *
   * Read by `.wrap` and by every `.hour`, so the header, the hero and every
   * section always agree about the margin. They have to: the rail is a
   * vertical line at a fixed offset from the column's left edge, and the
   * moment two sections disagree the line jogs and the day looks like three
   * days. It grows on a big monitor rather than stranding the content in a
   * narrow strip with a quarter of the screen empty on each side.
   */
  --page: 66rem;

  --shadow: 0 1px 2px rgb(11 18 32 / 4%), 0 12px 32px -10px rgb(11 18 32 / 10%);
  --shadow-lift: 0 2px 6px rgb(11 18 32 / 6%), 0 28px 60px -18px rgb(11 18 32 / 20%);

  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  --t-display: clamp(2.35rem, 1.05rem + 3.7vw, 4.35rem);
  --t-h2: clamp(1.7rem, 1.15rem + 1.6vw, 2.45rem);
  --t-lede: clamp(1.05rem, 1rem + 0.32vw, 1.2rem);
  --measure: 60ch;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Mobile browsers inflate text they judge too small for a column, which
     lands on exactly the mono labels this design uses for structure — a
     caption comes back the size of a heading. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Motion is decoration here. Anybody who has asked for less gets none. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.58;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.035em; }
p { margin: 0; max-width: var(--measure); }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/*
 * The utility voice.
 *
 * A clinic day is timestamps and codes — 9:40, EPC, INV-1042 — and the
 * current site sets every one of them in the same face as the prose, which is
 * why none of them look like data. One monospace stack, no new font file, no
 * change to a Content-Security-Policy that says font-src 'self' and means it.
 */
.mono {
  font-family: var(--mono);
  font-size: 0.695rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--ink); color: #fff;
  padding: 0.75rem 1rem; border-radius: 8px;
}

/*
 * One width, everywhere, and it is narrower than a modern container usually
 * is. The rail only works if it never moves horizontally: the moment the
 * header, the hero and a section disagree about the margin, the line jogs and
 * the day looks like three days. So the page is a column — which is what a
 * day sheet is anyway — and the diary is the one thing allowed out of it.
 */
.wrap { width: min(100% - 3rem, var(--page)); margin-inline: auto; }

/* ------------------------------------------------------------------ header */
/* Mirrored from styles.css — see the note by --brand. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.8rem 0;
}

.wordmark img { display: block; height: 2rem; width: auto; }

@media (max-width: 640px) {
  .wordmark img { height: 1.7rem; }
}

.site-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.5rem;
}

/* A label never folds inside itself — "In practice" on two lines is not a
   link, it is a typesetting accident. */
.site-nav a { white-space: nowrap; }

/* Scoped away from buttons: `.site-nav a` is a class plus a type selector and
   outranks `.btn-primary`, so without the `:not()` the header's primary
   button renders slate on near-black and disappears. */
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
}

.site-nav a:not(.btn):hover { color: var(--ink); }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:active { transform: translateY(0); }

/*
 * Near-black, not the teal this page was drawn with.
 *
 * The teal read better against the paper and it was wrong: Sign up is on
 * every page of the site, and a button that changes colour when you move from
 * the home page to Features says the two are different sites. The one control
 * a visitor is meant to recognise is the last place to be interesting.
 */
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 25%), inset 0 1px 0 rgb(255 255 255 / 9%);
}
.btn-primary:hover {
  background: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(15 23 42 / 22%), inset 0 1px 0 rgb(255 255 255 / 9%);
}

.btn-ghost {
  background: var(--lift);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}
.btn-ghost:hover {
  background: var(--surface-soft, #f8fafc);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

/* `.site-nav a` is two classes deep and `.btn-primary` is one, so without
   this the nav's own colour wins and the signup button loses its label. The
   classic way a stylesheet cancels itself out. */
.site-nav .btn { padding: 0.5rem 0.95rem; font-size: 0.9rem; }
.site-nav .btn-primary { color: #fff; }
.site-nav .btn-ghost { color: var(--ink); }

/* ======================================================================
   THE RAIL
   ======================================================================
   Every block of the page is the same two-column grid: a rail carrying the
   time and a dot, and the content beside it. The vertical hairline lives on
   the content column's left border, so consecutive blocks draw one unbroken
   line from the first patient to after the last one — the day does not stop
   between sections, and neither does the rule.
*/

.hour {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  width: min(100% - 3rem, var(--page));
  margin-inline: auto;
}

.hour > .rail {
  position: relative;
  padding-top: 3.4rem;
  text-align: right;
  padding-right: 1.1rem;
}

.hour > .body {
  border-left: 1px solid var(--rule);
  padding: 3.4rem 0 3.4rem var(--gutter);
  min-width: 0;
}

/*
 * The rail takes the hue of the hour once you are reading it.
 *
 * `will-fill` is added by the script, so the starting state only exists in a
 * browser that is actually going to animate — without it the rail is simply
 * drawn in its own colour and nothing waits for anything.
 */
.hour.will-fill > .body { border-left-color: var(--rule); }
.hour.will-fill.is-filled > .body {
  /* Tinted, not saturated. At full strength a hue on a hairline running the
     whole height of a section reads as a dark spine down the page; mixed back
     into the paper it reads as the hour having a colour, which is the point.
     The line before it is what a browser without color-mix gets. */
  border-left-color: var(--rule-firm);
  border-left-color: color-mix(in srgb, var(--hue) 58%, var(--paper));
  transition: border-left-color 0.8s ease;
}
.hour.will-fill > .rail .dot { transform: scale(0.55); opacity: 0.35; }
.hour.will-fill.is-filled > .rail .dot {
  transform: scale(1); opacity: 1;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.35s ease;
}

/* The horizontal rule of an appointment book: one per hour, and none above
   the first because the day has to start somewhere. */
.hour + .hour > .rail::before,
.hour + .hour > .body::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  border-top: 1px solid var(--rule);
}
.hour + .hour > .body { position: relative; }

.rail .time {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The dot sits on the line, not beside it. */
.rail .dot {
  position: absolute;
  top: 3.55rem;
  right: -5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--hue, var(--slate));
  box-shadow: 0 0 0 4px var(--paper);
}

/* One assignment, read by the dot, the kind label and the rules below. */
[data-hue='sky']     { --hue: var(--sky);     --hue-fill: var(--sky-fill); }
[data-hue='teal']    { --hue: var(--teal);    --hue-fill: var(--teal-fill); }
[data-hue='indigo']  { --hue: var(--indigo);  --hue-fill: var(--indigo-fill); }
[data-hue='emerald'] { --hue: var(--emerald); --hue-fill: var(--emerald-fill); }
[data-hue='rose']    { --hue: var(--rose);    --hue-fill: var(--rose-fill); }
[data-hue='amber']   { --hue: var(--amber);   --hue-fill: var(--amber-fill); }
[data-hue='violet']  { --hue: var(--violet);  --hue-fill: var(--violet-fill); }
[data-hue='slate']   { --hue: var(--slate);   --hue-fill: var(--slate-fill); }

/*
 * The moment, named.
 *
 * Not "01 / 02 / 03". Numbering six features implies an order they do not
 * have; naming the moment each one belongs to is the thing that is actually
 * true, and it is the whole argument of the page in seven words at a time.
 */
.kind {
  font-family: var(--mono);
  font-size: 0.695rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hue, var(--ink-faint));
  margin-bottom: 0.85rem;
}

.body h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  max-width: 24ch;
  text-wrap: balance;
}

.body > p {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 1.06rem;
}

/* ------------------------------------------------------------------- hero */

/* Not overflow:hidden — the diary is meant to leave. The page is kept from
   scrolling sideways on <body> instead. */
.hero { position: relative; }

/*
 * Ruled paper, and then out of the way.
 *
 * The lines of a day sheet, at 44px — the height a 40-minute slot gets in the
 * illustration below — masked to nothing before they reach the prose. Texture
 * where there is air, silence where there are words.
 */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  pointer-events: none;
}

.hero > .rail, .hero > .body { position: relative; }

.hero > .rail { padding-top: 3.8rem; }
.hero > .rail .dot { top: 3.95rem; }
.hero > .body { padding-top: 3.8rem; padding-bottom: 3.8rem; }

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-text);
}

/* Two lengths of the same claim: the full clause where there is room, a
   shorter one on phones. A chip that wraps is a badge that broke. */
.eyebrow-short { display: none; }

@media (max-width: 560px) {
  .eyebrow-full { display: none; }
  .eyebrow-short { display: inline; }
}

.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/*
 * The headline's two voices.
 *
 * One family, two ends of it. The fixed clause is set at 300 and the word
 * that changes at 900 in the brand teal, so the sentence has a shape before
 * it has a meaning — and the animation is only ever emphasising the part that
 * was already emphasised. Weight contrast inside one family, rather than a
 * second typeface the Content-Security-Policy would have to be opened for.
 */
.hero h1 {
  margin-top: 1.5rem;
  font-size: var(--t-display);
  letter-spacing: -0.042em;
  /* Measured in the display size's own ch, so the headline keeps a headline's
     measure when the hero stacks and the column suddenly doubles. */
  max-width: 19ch;
}

.h-quiet {
  display: block;
  font-weight: 300;
  font-size: 0.74em;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-wrap: balance;
}

.typed {
  display: inline-block;
  margin-top: 0.15em;
  font-weight: 900;
  color: var(--accent-text);
}

.typed-caret {
  display: inline-block;
  width: 3px; height: 0.82em;
  margin-left: 0.06em;
  background: var(--accent);
  vertical-align: -0.06em;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.lede {
  margin-top: 1.5rem;
  font-size: var(--t-lede);
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero-actions {
  margin-top: 1.9rem;
  display: flex; flex-wrap: wrap; gap: 0.7rem;
}

.assurance {
  margin-top: 1.15rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
  max-width: 44ch;
}

/* ----------------------------------------------------- the diary, unboxed */
/*
 * No pips, no fake title bar, no window chrome.
 *
 * A drawn browser window around a product shot says "this is a picture of an
 * app" to a reader who already knew that, and it is the most copied framing
 * device there is. What the illustration needed instead was a caption saying
 * the bookings are invented — which is a sentence, not a chrome.
 */
.diary-caption {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: 0.65rem;
  color: var(--ink-faint);
}

.diary {
  background: var(--lift);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 0.9rem 1rem 1.1rem;
  overflow: hidden;
}

.d-grid {
  display: grid;
  grid-template-columns: 2.9rem repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
}

.d-head {
  font-family: var(--mono);
  font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
}

.d-time {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 0.5rem;
  text-align: right;
  padding-right: 0.45rem;
}

.d-slot {
  position: relative;
  min-height: 2.55rem;
  border-radius: 6px;
  padding: 0.36rem 0.5rem 0.36rem 0.62rem;
  background: var(--hue-fill, var(--slate-fill));
  color: var(--hue, var(--slate));
  font-size: 0.74rem;
  line-height: 1.28;
  overflow: hidden;
}

/* The kind is the colour and the colour is the kind — the bar restates it for
   anybody who cannot see the difference. */
.d-slot::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hue, var(--slate));
}

.d-slot b { display: block; font-weight: 700; font-size: 0.735rem; }
.d-slot i { display: block; font-style: normal; color: var(--ink-soft); font-size: 0.71rem; }

.d-mark {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hue, var(--slate));
  opacity: 0.85;
}

.d-free {
  background: transparent;
  border: 1px dashed var(--rule-firm);
  color: var(--ink-faint);
  font-size: 0.71rem;
  display: flex; align-items: center;
}
.d-free::before { display: none; }

.d-break {
  grid-column: 2 / -1;
  background: repeating-linear-gradient(135deg, #eef2f7 0 6px, #f6f8fb 6px 12px);
  color: var(--ink-faint);
  font-size: 0.71rem;
  display: flex; align-items: center;
  min-height: 1.9rem;
}
.d-break::before { display: none; }

.d-tall { min-height: 5.5rem; }

/* --------------------------------------------------------- who runs on it */
/*
 * The practices, on their own page rather than as a strip on the front one.
 *
 * A single real clinic's mark in a row built for six reads as five missing,
 * and a logo says nothing a visitor wants to know. On a page there is room to
 * say what each one actually does with it — which is the only version of this
 * that is worth a click.
 *
 * The rule for adding one has not changed: the practice said yes, in writing,
 * after they were using it. A signup is consent to use the software, never
 * consent to be marketing for it.
 */
.practices { display: grid; gap: 1.1rem; margin-top: 2rem; }

.practice {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--lift);
  box-shadow: var(--shadow);
}
.practice img { width: 100%; height: auto; }
.practice h2 { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.02em; }
.practice .where {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}
.practice p { margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.99rem; }
.practice .uses {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.practice .uses li {
  font-family: var(--mono);
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid #cdeee7;
  border-radius: 6px;
  padding: 0.32rem 0.55rem;
}

/* The page's own opening, where the home page has a hero. */
.page-head { border-bottom: 1px solid var(--rule); padding: 3rem 0 2.6rem; }
.page-head h1 {
  margin-top: 1.2rem;
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 800; letter-spacing: -0.04em;
  max-width: 20ch;
}
.page-body { padding: 2.8rem 0 3.5rem; }

.close-more { margin-top: 1.5rem; }
.close-more a { color: #fff; font-weight: 600; text-underline-offset: 4px; }
.close-more a:hover { color: var(--accent); }

@media (max-width: 620px) {
  .practice { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .practice img { width: 6rem; }
}

/* -------------------------------------------------------------- the beats */

.beats {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  max-width: 56ch;
}

.beats li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.beats li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--hue, var(--slate));
  opacity: 0.75;
}

.more {
  display: inline-block;
  margin-top: 1.3rem;
  font-size: 0.94rem; font-weight: 600;
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- the noon */
/*
 * The lunch rule is not a joke at the reader's expense — it is the proof that
 * the shape of this page came from a real day rather than from a features
 * list. Set quieter than everything around it, because that is what it is.
 */
.noon { color: var(--ink-faint); font-size: 1rem; font-style: italic; max-width: 46ch; }
.hour.noon-hour > .body { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.hour.noon-hour > .rail { padding-top: 1.6rem; }
.hour.noon-hour .rail .dot { top: 1.75rem; }

/* --------------------------------------------------------------- the flow */
/*
 * Here, and only here, the rail is the appointment itself.
 *
 * Five states in the order they actually happen — so a descent down the rail
 * is the honest shape for them, unlike the six parts above, which have no
 * order at all and were a horizontal row of pills pretending they did.
 */
.flow { list-style: none; margin: 1.9rem 0 0; padding: 0; }

/* Indented and dashed, so it is plainly a different kind of line from the
   rail beside it. Two solid verticals fifteen pixels apart read as a mistake,
   not as a hierarchy. */
.flow li {
  position: relative;
  padding: 0 0 1.5rem 2rem;
  border-left: 1px dashed var(--rule-firm);
  margin-left: 1.6rem;
}
.flow li:last-child { border-left-color: transparent; padding-bottom: 0; }

.flow li::before {
  content: '';
  position: absolute; left: -5px; top: 0.32rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hue, var(--slate));
  box-shadow: 0 0 0 4px var(--paper);
}

.flow .state {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--hue, var(--ink));
}
.flow .what { display: block; margin-top: 0.2rem; color: var(--ink-soft); font-size: 0.97rem; max-width: 50ch; }

/* -------------------------------------------------------------- the close */
/*
 * The only dark thing on the page, at the end of it, where the day ends. The
 * rail carries on through in white — the point being that it never broke.
 */
/*
 * Full-bleed without a wrapper element.
 *
 * Everything on this page is the same two-column grid, and wrapping this one
 * section in an extra div to get an edge-to-edge background would break that
 * — the rail would have to be re-derived inside it. The shadow paints the ink
 * out past the viewport in every direction and the clip stops it running down
 * the page.
 */
.close {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
}
.close > .rail { padding-top: 4.4rem; }
.close > .rail .dot { top: 4.55rem; }
.close > .body { padding-top: 4.4rem; padding-bottom: 4.6rem; }
.close .body,
.close.will-fill > .body,
.close.will-fill.is-filled > .body { border-left-color: rgb(255 255 255 / 22%); }
.close .rail .time { color: rgb(255 255 255 / 45%); }
.close .rail .dot { box-shadow: 0 0 0 4px var(--ink); background: var(--accent); }
.close + .hour > .rail::before, .close + .hour > .body::before { border-top-color: transparent; }
.close h2 { color: #fff; max-width: 20ch; }
.close > .body > p { color: rgb(255 255 255 / 72%); }

.facts {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.facts li {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgb(255 255 255 / 80%);
}
.facts svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

.close .btn-ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / 28%); }
.close .btn-ghost:hover { border-color: rgb(255 255 255 / 55%); }
.close .btn-primary { background: var(--accent); }
.close .btn-primary:hover { background: #14b8a6; }

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

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 3rem 0 2rem;
  font-size: 0.93rem;
}

.site-footer .wrap {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.foot-col { display: flex; flex-direction: column; gap: 0.42rem; align-items: flex-start; }
.foot-col a { color: var(--ink-soft); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }

.foot-head {
  font-family: var(--mono);
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.foot-note { font-size: 0.88rem; color: var(--ink-faint); max-width: 30ch; }

.foot-legal {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ======================================================================
   WIDTHS
   ======================================================================
   Five, per the house rule: desktop, iPad landscape, iPad portrait, phone
   landscape, phone portrait. iPad landscape is the tight one — the desktop
   nav arrives at 1024 and spends the width the extra pixels just gave you.
*/

/* Hero goes side by side only when there is genuinely room for both. Below
   this the diary is worth more full-width than squeezed. */
/* A wide monitor gets a wider column, not a wider margin. */
@media (min-width: 1400px) { :root { --page: 74rem; } }
@media (min-width: 1700px) { :root { --page: 80rem; } }

@media (min-width: 1140px) {
  .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 3rem; }
  /*
   * The diary steps past the column's right edge, and stops.
   *
   * It used to run all the way out to the screen. On a 1440 that read as the
   * day continuing past the page; on a 1920 it read as the whole page having
   * slid right, because the left margin was 430px of nothing and the right
   * margin was zero. The overhang is now a fixed step — enough to say the
   * diary is not a boxed screenshot, small enough that the page still has two
   * margins.
   */
  .diary-side { margin-right: max(calc((var(--page) - 100vw) / 2), -3.5rem); }
}

@media (max-width: 1139px) {
  .diary-side { margin-top: 2.75rem; }
}

@media (max-width: 1080px) {
  :root { --rail: 4.5rem; --gutter: 1.35rem; }
}

/* The tablet band, mirrored from styles.css — seven items and a wordmark fit
   at 1025 and fit at 760 by wrapping; between the two they squeeze. */
@media (min-width: 761px) and (max-width: 1024px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.15rem; }
  .site-nav { gap: 1rem; }
  .site-nav a:not(.btn) { font-size: 0.95rem; }
  .site-nav .btn { min-height: 44px; padding: 0.55rem 1.1rem; }
}

/*
 * The nav wraps under the wordmark; it does not disappear behind a hamburger,
 * and it does not silently drop links. Carried over from the current site,
 * whose reasoning still holds: a menu you have to open is a menu nobody
 * opens, and a nav that vanishes at a width is a nav that is broken there.
 */
/*
 * Mirrored from styles.css, breakpoint included.
 *
 * It used to wrap at 660 here and at 760 there, so between those two widths
 * the home page had a one-row header and every other page had a wrapped one —
 * the header changing shape as you moved through the site, which is the exact
 * thing the nav was reorganised to stop doing. It stays sticky when wrapped,
 * also to match; that it is ~190px tall wrapped is a site-wide question, not
 * one to answer on one page.
 */
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.25rem; }

  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.9rem;
    /* Row rhythm comes from the links' own 44px targets, not from gap: the
       two actions are pinned to a distant row, and a row-gap would multiply
       across every empty row between. */
    row-gap: 0;
    padding-bottom: 0.5rem;
  }

  .site-nav a:not(.btn):not(.nav-signin) {
    display: flex; align-items: center;
    min-height: 44px;
  }

  /* Log in stops being a text link and becomes the quiet half of the pair.
     Row 20 is "after any plausible number of link rows". */
  .site-nav a.nav-signin {
    grid-row: 20; grid-column: 1;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px;
    margin-top: 0.4rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--lift);
    font-weight: 600;
    color: var(--ink);
  }

  .site-nav .btn-primary {
    grid-row: 20; grid-column: 2 / -1;
    margin-top: 0.4rem;
  }
}

/*
 * The rail folds.
 *
 * A 72px rail on a 390px screen is a fifth of the reading width spent on a
 * decoration. Below this the time goes inline above the moment, where it is
 * still information and costs nothing.
 */
@media (max-width: 700px) {
  .hour { grid-template-columns: minmax(0, 1fr); width: min(100% - 2.5rem, var(--page)); }
  .hour > .rail { display: none; }
  .hour > .body { border-left: 0; padding-left: 0; padding-top: 2.6rem; padding-bottom: 2.6rem; }
  .kind::before {
    content: attr(data-time) ' · ';
    color: var(--ink-faint);
  }
  .wrap { width: min(100% - 2.5rem, var(--page)); }
  .hero h1 { margin-top: 1.2rem; }
  .hero-actions .btn { flex: 1 1 auto; }
  /* Three practitioners do not fit a phone. The third column goes rather
     than every column becoming unreadable — a diary you cannot read is not a
     diary. */
  .d-grid { grid-template-columns: 2.4rem repeat(2, minmax(0, 1fr)); }
  .d-grid .c3 { display: none; }
}

/* Phone landscape: short and wide. The hero must not need a scroll to reach
   the first button. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero > .body { padding-top: 2rem; padding-bottom: 2rem; }
  .hero h1 { margin-top: 0.9rem; }
  .lede { margin-top: 1rem; }
  .hero-actions { margin-top: 1.2rem; }
}

@media (max-width: 460px) {
  .facts { gap: 0.45rem 1rem; }
  .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}