/* ==========================================================================
   Nixie, public site
   Sober, flat, hairline. Small radii. No gradients, no glow, no blobs.
   ========================================================================== */

:root {
  --cream: #fdfaf7;
  --paper: #ffffff;
  --linen: #f6f0ec;
  --ink: #4a3f42;
  --ink-strong: #2f282a;
  --ink-soft: #6b5d61;
  --muted: #6f6368;
  --line: #ebe0dd;
  --rose: #d9a3ab;
  --rose-deep: #94505d;
  --sage: #9db8a4;
  --sage-deep: #4f6d58;

  --shadow-1: 0 1px 2px rgba(47, 40, 42, .06);
  --shadow-2: 0 2px 6px rgba(47, 40, 42, .07), 0 1px 2px rgba(47, 40, 42, .05);
  --shadow-3: 0 6px 18px rgba(47, 40, 42, .10), 0 1px 3px rgba(47, 40, 42, .06);

  --wrap: 1180px;
  --gut: 28px;

  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

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

/* The sticky bar is 62px tall. Every anchored target clears it with 24px of
   breathing room above, so a heading never lands underneath it. The value is
   one token, so the bar height and the offset can never drift apart. */
:root { --bar-h: 62px; --bar-clear: calc(var(--bar-h) + 24px); }

html {
  /* iOS Safari and Chrome on Android inflate text inside wide blocks when a
     page is read in portrait, so a heading renders larger than the size set
     here and can overrun the screen. The value 100% permits that inflation;
     `none` holds the type at the size the layout was measured for. Every size
     on this page is already fluid, so nothing is made less legible by this:
     the headline still grows with the viewport, it simply stops growing
     beyond it. This is the difference between a page that is correct in a
     desktop browser narrowed to 320px and one that is correct on a phone. */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding-top: var(--bar-clear);
}

section[id],
main [id],
:target { scroll-margin-top: var(--bar-clear); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
input, button, select, textarea { font-family: inherit; }
/* 16px minimum on form controls, so iOS never zooms the page */
input, select, textarea { font-size: 16px; }
img { height: auto; }

a { color: var(--rose-deep); }

::selection { background: #f2dde1; color: var(--ink-strong); }

:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink-strong);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  z-index: 300;
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- top bar */

/* The bar is fully opaque, so anything scrolling past it is occluded rather
   than half-visible through it. Its own stacking context sits above every
   section, and no section may raise itself into it. */
.top {
  position: sticky;
  top: 0;
  z-index: 200;
  isolation: isolate;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.top-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: 3px;
}
.brand img { height: 24px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
  font-size: 15px;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink-strong); border-bottom-color: var(--rose); }

.top-act { display: flex; align-items: center; gap: 10px; flex: none; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* the phone menu button: hidden on the desktop, a 44px target on a phone */
.menu-btn {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-strong);
  cursor: pointer;
}
.menu-btn .ico { width: 22px; height: 22px; }
.menu-btn .ex { display: none; }
body.nav-open .menu-btn .bars { display: none; }
body.nav-open .menu-btn .ex { display: block; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid var(--rose-deep);
  background: var(--rose-deep);
  color: #fff;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .14s linear, border-color .14s linear, color .14s linear;
}
.btn:hover { background: #7d4350; border-color: #7d4350; }

.btn.ghost {
  background: transparent;
  color: var(--ink-strong);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: #d6c5c0; background: var(--paper); }

.btn.lg { height: 46px; padding: 0 22px; font-size: 16px; }

.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- headings */

/* The heading family is Newsreader at all three levels, so the scale reads as
   one voice; Hanken is kept for UI, labels and body. Newsreader carries an
   optical size axis, so each level asks for the size it is actually rendered
   at. Tracking tightens only as the size grows, and stays well inside the
   -0.04em floor. Line height tightens as the size grows. */
h1, h2, h3 {
  color: var(--ink-strong);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  /* If a weight has not loaded, render the weight we have rather than letting
     the browser synthesise one. A faux bold is measurably wider than the real
     cut, which is how a headline that fits in one browser overruns in another. */
  font-synthesis: none;
}

h1 {
  font-variation-settings: "opsz" 52;
  line-height: 1.06;
  letter-spacing: -0.02em;
  /* The floor tracks the viewport rather than pinning at a fixed pixel size.
     At 320px this resolves to about 27px, which fits the longest word in the
     headline inside the gutter with room to spare; on a large screen the
     ceiling still holds it at 47px. */
  font-size: clamp(24px, 7.4vw, 47px);
}

/* the two tone headline: a flat rose-deep second line, never a gradient */
h1 span { color: var(--rose-deep); }

h2 {
  font-variation-settings: "opsz" 36;
  font-size: clamp(26px, 2.9vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.014em;
}
h2 span { color: var(--rose-deep); }

/* A genuine third level: large enough to hold a section on its own, and set
   in the heading face so it belongs to the same family as the two above it. */
h3 {
  font-variation-settings: "opsz" 24;
  font-weight: 600;
  font-size: clamp(21px, 1.9vw, 24px);
  line-height: 1.26;
  letter-spacing: -0.008em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(16.5px, 1.3vw, 18.5px);
  line-height: 1.6;
  color: var(--ink);
}

.sub { color: var(--muted); }

/* ---------------------------------------------------------------- sections */

section { position: relative; }

.band {
  background: var(--linen);
  border-block: 1px solid var(--line);
}

.pad { padding-block: clamp(46px, 4.4vw, 64px); }

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

.hero { padding-top: clamp(34px, 3.6vw, 52px); padding-bottom: 0; }

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: 20px 48px;
  align-items: end;
  margin-bottom: 28px;
}

/* the break in the markup is the only break wanted, so the headline is
   allowed its natural width; below 900px it wraps normally again */
/* the headline wraps at the break authored in the markup and stays inside its
   own column, so it can never run under the lede beside it */
.hero h1 { max-width: none; text-wrap: pretty; overflow-wrap: break-word; }

.hero-side { padding-bottom: 4px; }
.hero-side .lede { max-width: 66ch; margin-bottom: 18px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* a screen, flat and square on, inside a hairline frame */
.shot {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.shot img { width: 100%; }

.hero-cap {
  margin-top: 13px;
  max-width: 72ch;
  font-size: 14.5px;
  color: var(--muted);
}

/* The hero composition: a drawn rail of the studio's screens on the left, the
   timetable itself beside it. The rail is the page's own drawing and is
   hidden from assistive technology's reading order only where it repeats. */
.hero-stage {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.hero-stage .hero-shot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-inline-start: 1px solid var(--line);
}

.rail {
  background: var(--linen);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.rail li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  font: 500 14px/1.2 var(--sans);
  color: var(--ink-soft);
}

.rail li svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

/* the current screen is marked by weight and surface, never a thick bar */
.rail li.on {
  background: var(--paper);
  color: var(--ink-strong);
  font-weight: 600;
}
.rail li.on svg { opacity: 1; stroke: var(--rose-deep); }

/* ------------------------------------------------------------ the branch
   One input at the top, the studio's own way of working, fanning down into
   the five things Nixie does with it. The connectors are the same soft dotted
   hairline the screen sequence uses. */

.br-sec h2 { max-width: 20ch; margin-bottom: clamp(26px, 2.8vw, 36px); }

.branch { display: grid; justify-items: center; }

/* a caption naming a part of the diagram, never a kicker over a heading */
.br-cap {
  margin: 0 0 8px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.br-in {
  margin: 0;
  max-width: 62ch;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
}
.br-in::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: 12px;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--rose);
}
.br-in p {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 22;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.42;
  color: var(--ink-strong);
  text-wrap: balance;
}

/* the single node the input passes through */
.br-node {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.br-node-m { color: var(--rose-deep); display: block; }
.br-node-m svg { width: 22px; height: 22px; }
.br-node b {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-strong);
}

.br-fan { width: 100%; height: clamp(46px, 5vw, 76px); }
.br-fan svg { width: 100%; height: 100%; display: block; }
.br-fan path {
  fill: none;
  stroke: #cdbcb7;
  stroke-width: 1.25;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.br-out {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}
.br-out li { text-align: center; }
.br-out b {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.26;
  letter-spacing: -0.006em;
  color: var(--ink-strong);
  text-wrap: balance;
}
.br-out span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  /* The fan cannot splay sideways on a phone, so the branch is redrawn
     vertically: the trunk runs down the left and each outcome hangs off it
     on its own elbow. The structure is the point, so it stays a diagram
     rather than flattening into a list of instructions. */
  .br-fan { display: none; }
  .br-out {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 18px;
    max-width: 62ch;
    position: relative;
  }
  /* the trunk */
  .br-out::before {
    content: '';
    position: absolute;
    inset-block: 10px 26px;
    inset-inline-start: 7px;
    width: 1px;
    background: repeating-linear-gradient(
      to bottom, #cdbcb7 0 3px, transparent 3px 7px);
  }
  .br-out li {
    text-align: left;
    padding: 13px 0 13px 26px;
    position: relative;
  }
  /* each elbow out to its outcome */
  .br-out li::before {
    content: '';
    position: absolute;
    inset-inline-start: 8px;
    top: 23px;
    width: 12px;
    height: 1px;
    background: repeating-linear-gradient(
      to right, #cdbcb7 0 3px, transparent 3px 7px);
  }
  /* the node where the elbow meets the trunk */
  .br-out li::after {
    content: '';
    position: absolute;
    inset-inline-start: 4px;
    top: 20px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--rose-deep);
  }
  .br-out li:first-child { padding-top: 4px; }
  .br-out li:first-child::before { top: 14px; }
  .br-out li:first-child::after { top: 11px; }
  .br-out li:last-child { padding-bottom: 0; }
  .br-cap { margin-bottom: 5px; }
}

/* ------------------------------------------------------- the five screens
   Flat, square on, one after the other at full width. A soft dotted line
   joins each consecutive pair, so the five read as one sequence rather than
   five separate cards. */

.plane-sec { overflow: clip; }

.plane-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 56px;
  align-items: end;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.plane-head p { max-width: 68ch; color: var(--ink); }

.seq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: stretch;
}

.seq-step { margin: 0; }
.seq-step h3 { margin-bottom: 14px; }
.seq-step .shot { box-shadow: var(--shadow-3); }

/* the connector: a hairline dotted line, muted, drawn straight down the
   centre between one screen and the next */
.seq-join {
  display: block;
  height: clamp(44px, 4.4vw, 68px);
  margin: 0;
  justify-self: center;
  width: 24px;
}
.seq-join svg {
  width: 24px;
  height: 100%;
  display: block;
  overflow: visible;
}
.seq-join path {
  fill: none;
  stroke: #cdbcb7;
  stroke-width: 1.25;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ------------------------------------------- money, space and the quiet room
   Three screens in one section, so the breadth reads at a glance. */

.one-sec { overflow: clip; }

.one-head { max-width: 68ch; margin-bottom: clamp(28px, 3vw, 40px); }
.one-head h2 { margin-bottom: 14px; }

.one-grid {
  display: grid;
  gap: clamp(26px, 3vw, 38px);
  margin-bottom: clamp(34px, 3.6vw, 50px);
}

/* The words sit above their screen at a full reading measure, and the screen
   runs the width of the section beneath them. */
.one-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.one-note h3 { margin-bottom: 10px; }
.one-note p {
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 72ch;
}

.one-item .shot { box-shadow: var(--shadow-3); }

.one-live {
  max-width: 68ch;
  margin-bottom: 20px;
}
.one-live h3 { margin-bottom: 7px; }
.one-live p { color: var(--ink-soft); font-size: 16px; }

/* ---------------------------------------------------------------- building */

.bldg-sec { overflow: clip; }


.bldg-stage {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.bldg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.bldg-date {
  font: 600 15.5px/1.2 var(--sans);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.002em;
}
.bldg-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-strong);
  font: 600 13.5px/1 var(--sans);
  padding: 8px 15px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 74px;
  transition: border-color .14s linear, background .14s linear;
}
.bldg-btn:hover { border-color: #d6c5c0; background: var(--linen); }

.bldg-svg-wrap { padding: 10px 12px 4px; background: var(--paper); display: flex; justify-content: center; }
#bldg-svg { width: 100%; height: auto; max-height: 430px; display: block; }

/* type inside the drawing */
#bldg-svg text { font-family: var(--sans); text-anchor: middle; }
#bldg-svg .rm-n { font-size: 10px; font-weight: 600; fill: #47393c; }
#bldg-svg .rm-v { font-size: 11px; font-weight: 700; fill: #372c2f; font-variant-numeric: tabular-nums; }
#bldg-svg .rm-s { font-size: 8.5px; font-weight: 500; fill: #8b7d80; }
#bldg-svg .lv-n { font-size: 10.5px; font-weight: 700; fill: #6b5d61; letter-spacing: .09em; }
#bldg-svg .lv-s { font-size: 9.5px; font-weight: 500; fill: #97888c; }

/* the week timeline */
.bldg-time { padding: 4px 20px 16px; }
.bldg-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin-bottom: 10px;
}
.bldg-playhead {
  position: absolute;
  top: -5px;
  left: 0;
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: var(--rose-deep);
  transform: translateX(-1px);
}

.bldg-days {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bldg-days li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.bldg-days b { font-weight: 600; color: var(--ink-soft); }
.bldg-days em { font-style: normal; font-variant-numeric: tabular-nums; }
.bldg-days li.today b,
.bldg-days li.today em { color: var(--rose-deep); font-weight: 700; }

.bldg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
  background: var(--cream);
  font-size: 13px;
  color: var(--muted);
}
.bldg-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bldg-legend .sw {
  width: 15px; height: 11px; border-radius: 2px; flex: none;
  border: 1px solid #cbbcc0;
}
/* the authored ramp, five stops, matching the drawing exactly */
.bldg-legend .sw0 { background: rgb(243, 237, 233); }
.bldg-legend .sw1 { background: rgb(229, 238, 231); }
.bldg-legend .sw2 { background: rgb(199, 220, 205); }
.bldg-legend .sw3 { background: rgb(235, 200, 205); }
.bldg-legend .sw4 { background: rgb(218, 165, 173); }
.bldg-legend .swh {
  background-color: #f1ebe7;
  background-image: repeating-linear-gradient(45deg, transparent 0 2px, #ded2cd 2px 4px);
}

/* ---------------------------------------------------------------- families */

.pf-head { max-width: 68ch; margin-bottom: clamp(28px, 3vw, 40px); }
.pf-head h2 { margin-bottom: 14px; }

/* Two real captures as overlapping sheets: the family's own view in front,
   her statement of invoices behind it. Flat sheets, quiet shadow, no tilt. */
.pf-stack {
  position: relative;
  padding: 0 0 clamp(54px, 7vw, 104px);
}

/* the statement sits behind and to the right, far enough clear that its
   invoice numbers and statuses stay readable beside the front sheet */
.pf-back {
  width: min(50%, 470px);
  margin-inline-start: auto !important;
  box-shadow: var(--shadow-2);
}

.pf-front {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(62%, 690px);
  box-shadow: var(--shadow-3);
}

.pf-list {
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 16px;
  color: var(--ink-soft);
}
.pf-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}
.pf-list svg {
  width: 16px; height: 16px; margin-top: 4px;
  stroke: var(--sage-deep); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

@media (min-width: 901px) {
  .pf-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
}

/* ------------------------------------------------------ branded invoices
   Two studio identities, one invoice. Each studio supplies its own accent
   through --sc, so the only thing that changes between the two documents is
   the branding. The dotted edge is the same language the request flow uses
   for something that has been sent: a document about to be torn off. */

.inv-head { max-width: 68ch; margin-bottom: clamp(28px, 3vw, 40px); }
.inv-head h2 { margin-bottom: 14px; }

.inv-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  align-items: start;
}

/* the dotted edge sits on the outer figure, with the paper inset inside it,
   so the dots read as the tear line rather than as the document's own rule */
.inv {
  margin: 0;
  padding: 9px;
  border: 1.5px dotted #c9b7b2;
  border-radius: 10px;
  background: transparent;
}

.inv-paper {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  padding: clamp(18px, 1.8vw, 24px);
}

.inv-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.inv-mark { color: var(--sc); display: block; }
.inv-mark svg { width: 34px; height: 34px; }
.inv-id b {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 20;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.006em;
  color: var(--sc);
}
.inv-id em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.inv-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.inv-meta dt {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.inv-meta dd {
  margin: 2px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-strong);
}

.inv-tab {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 14px;
}
.inv-tab thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--line);
}
.inv-tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-tab tbody th {
  text-align: left;
  font-weight: 400;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
}
.inv-tab tbody td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-strong);
  font-weight: 500;
  vertical-align: top;
}
.inv-tab tbody th b {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-strong);
}
.inv-tab tbody th span {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 1px;
}
.inv-off td, .inv-off th b { color: var(--sage-deep); }

.inv-tab tfoot th {
  text-align: left;
  padding: 13px 14px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-strong);
}
.inv-tab tfoot td {
  padding: 13px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 22;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.inv-pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sc-soft);
}
.inv-due { display: block; }
.inv-due dt,
.inv-bpay dt {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.inv-due dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-strong);
}
.inv-bpay { grid-column: 1; }
.inv-bp-t {
  display: block;
  font: 700 12px/1 var(--sans);
  letter-spacing: .08em;
  color: var(--sc);
  margin-bottom: 6px;
}
.inv-bpay dl { margin: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 4px 20px; justify-content: start; }
.inv-bpay dd {
  margin: 2px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.inv-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--sc);
  color: #fff;
  font: 600 15px/1 var(--sans);
}

.inv-from {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.inv-list { margin-top: clamp(26px, 3vw, 36px); }

/* ---- the studio's other messages, on the same branding and the same edge */

.mail-head {
  max-width: 68ch;
  margin: clamp(38px, 4vw, 56px) 0 clamp(20px, 2.2vw, 28px);
}
.mail-head h3 { margin-bottom: 10px; }
.mail-head p { color: var(--ink-soft); font-size: 16.5px; }

.mail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
  align-items: stretch;
}

/* the whole card stretches to its row, so the actions line up along the
   bottom of every template in that row */
.mailer { display: flex; }
.mailer .inv-paper {
  flex: 1;
  padding: clamp(16px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mlr-top {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mlr-top .inv-mark svg { width: 26px; height: 26px; }
.mlr-top b {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 16;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--sc);
}

/* a caption naming the template, sitting inside the document rather than
   above a section heading */
.mlr-kind {
  margin: 12px 0 0;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.mailer h4 {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 20;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--ink-strong);
  text-wrap: balance;
}

.mlr-body {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.inv-btn.sm {
  grid-column: auto;
  grid-row: auto;
  height: 34px;
  padding: 0 15px;
  font-size: 14px;
  align-self: flex-start;
  margin-top: auto;
}
/* the action sits on the floor of the card, so a row of templates lines up */
.mailer .mlr-body { margin-bottom: 14px; }

@media (max-width: 900px) {
  .mail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mail-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-btn.sm { height: 44px; }
}

@media (max-width: 900px) {
  .inv-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .inv-meta { grid-template-columns: minmax(0, 1fr); }
  .inv-pay { grid-template-columns: minmax(0, 1fr); }
  .inv-btn { grid-column: 1; grid-row: auto; height: 44px; }
  .inv-tab tbody th { padding-right: 10px; }
}

/* ---------------------------------------------- the family's own page
   Sarah's account drawn in HTML, so the breadth of what a parent actually
   sees is visible at a glance: her dancers, the coming week with teacher and
   room, what she owes and when it goes, and the invoices behind it. */

.pt-head {
  max-width: 68ch;
  margin: clamp(34px, 3.6vw, 48px) 0 clamp(18px, 2vw, 24px);
}
.pt-head h3 { margin-bottom: 10px; }
.pt-head p { color: var(--ink-soft); font-size: 16.5px; }

.portal {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.pt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.pt-studio {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-strong);
}
.pt-who {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-soft);
}
.pt-who i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f4e3d6;
  color: #7a5334;
  font: 700 11px/1 var(--sans);
  font-style: normal;
  letter-spacing: .03em;
}

.pt-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 18px;
  padding: 18px;
  background: var(--linen);
}
.pt-main, .pt-side { display: grid; gap: 14px; align-content: start; }

.pt-hello {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 28;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink-strong);
}
.pt-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }

.pt-priv {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #dfe8e1;
  border-radius: 8px;
  background: #eef4ef;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pt-priv svg {
  width: 17px; height: 17px; margin-top: 2px;
  fill: none; stroke: var(--sage-deep);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pt-priv b { color: var(--ink-strong); }

.pt-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 15px 16px;
}
.pt-card-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pt-card-h h5 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.008em;
  color: var(--ink-strong);
}
.pt-card-h span { font-size: 12.5px; color: var(--muted); }

.pt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink);
}
.pt-chip.on { border-color: var(--rose-deep); color: var(--rose-deep); font-weight: 600; }
.pt-chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #eee4de;
  color: #6b5d61;
  font: 700 10px/1 var(--sans);
  font-style: normal;
}
.pt-chip i.m { background: #f6e3e6; color: var(--rose-deep); }
.pt-chip em { font-style: normal; color: var(--muted); font-size: 12.5px; }

.pt-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.pt-rows li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.pt-rows li:first-child { border-top: 0; padding-top: 2px; }

.pt-when {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 5px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
}
.pt-when b {
  font: 700 10px/1 var(--sans);
  letter-spacing: .07em;
  color: var(--muted);
}
.pt-when em {
  font-style: normal;
  font: 600 15px/1 var(--sans);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.pt-what { display: block; min-width: 0; }
.pt-what > b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-strong); }
.pt-meta, .pt-who2 {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.pt-who2 { color: var(--muted); }
.pt-meta i, .pt-who2 i { font-style: normal; color: #c3b4b0; padding: 0 4px; }

.pt-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--linen);
  color: var(--ink-soft);
  font: 600 11.5px/1 var(--sans);
  white-space: nowrap;
}
.pt-pill.rose { background: #f6e3e6; color: var(--rose-deep); }
.pt-pill.sage { background: #e4efe7; color: var(--sage-deep); }

.pt-foot {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.pt-inv { list-style: none; margin: 0; padding: 0; display: grid; }
.pt-inv li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.pt-inv li:first-child { border-top: 0; padding-top: 2px; }
.pt-inv-n b, .pt-inv-s, .pt-inv-a { display: block; }
.pt-inv-n b { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.pt-inv-n em, .pt-inv-s em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.pt-inv-a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-strong);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pt-crn {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--linen);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pt-crn svg {
  width: 17px; height: 17px; margin-top: 1px;
  fill: none; stroke: var(--muted);
  stroke-width: 1.6; stroke-linecap: round;
}
.pt-crn b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }

.pt-big {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 34;
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.016em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.pt-cap { margin: 7px 0 0; font-size: 13px; color: var(--muted); }

.pt-debit {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid #f0dfe2;
  border-radius: 8px;
  background: #fbf1f3;
}
.pt-debit svg {
  width: 17px; height: 17px; margin-top: 2px;
  fill: none; stroke: var(--rose-deep);
  stroke-width: 1.5; stroke-linecap: round;
}
.pt-debit b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.pt-debit em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 3px;
}

.pt-meth {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.pt-meth-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
}
.pt-meth-i svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--muted);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pt-meth-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.pt-meth-t em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.pt-disc { margin: 0; display: grid; }
.pt-disc > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.pt-disc > div:first-child { border-top: 0; padding-top: 0; }
.pt-disc dt { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.pt-disc dt em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.pt-disc dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.pt-disc .off dd { color: var(--sage-deep); }
.pt-disc .tot { border-top: 1px solid #d8c9c5; }
.pt-disc .tot dd { font-size: 15.5px; }

.pt-fine { margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.pt-lbl { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.pt-sel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
  font-size: 13.5px;
  color: var(--ink);
}
.pt-sel svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--muted);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pt-send {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  height: 38px;
  border-radius: 6px;
  background: var(--sage-deep);
  color: #fff;
  font: 600 14px/1 var(--sans);
}

@media (max-width: 980px) {
  .pt-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .pt-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pt-body { padding: 14px; }
  .pt-rows li { grid-template-columns: 40px minmax(0, 1fr); }
  .pt-rows .pt-pill { grid-column: 2; justify-self: start; }
  .pt-inv li { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-inv-s { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- the flow */

.req-head { max-width: 68ch; margin-bottom: clamp(30px, 3.2vw, 44px); }
.req-head h2 { margin-bottom: 13px; }

/* Left to right, in the order it actually happens: the parent asks, the
   request travels to the studio manager, she decides on the real screen,
   and the approval sends an email back to the parent. The screen sits in
   the middle column under the manager, so the second leg leaves from it. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 218px) auto minmax(0, 1.55fr) auto minmax(0, 218px);
  grid-template-rows: auto auto;
  gap: 14px 10px;
  align-items: center;
}
.flow > li:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.flow > li:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.flow > li:nth-child(3) { grid-column: 3; grid-row: 1; align-self: end; }
.flow > li:nth-child(4) { grid-column: 3; grid-row: 2; align-self: start; }
.flow > li:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
.flow > li:nth-child(6) { grid-column: 5; grid-row: 1 / span 2; }

/* the approval fans out to two people: the parent and the teacher who moved */
.fout { display: grid; gap: 12px; }

/* the manager card and the screen read as one column, so they share an edge */
.flow > li:nth-child(3) .fcard { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.flow > li:nth-child(4) .fcard { border-top-left-radius: 0; border-top-right-radius: 0; }

.fstep { margin: 0; opacity: .45; transition: opacity .45s linear; }
.fstep.lit { opacity: 1; }

.fcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.fcard b { display: block; color: var(--ink-strong); font-weight: 600; font-size: 16px; }
.fcard em { display: block; font-style: normal; color: var(--muted); font-size: 13.5px; margin-top: 1px; }
.fcard p { margin: 9px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

.ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  font: 700 12px/1 var(--sans);
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.ava.sw { background: #f4e3d6; color: #7a5334; }
.ava.ec { background: #e2ece4; color: var(--sage-deep); }

/* the dotted legs */
.flink {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 96px;
}
.flink svg { overflow: visible; }
.flink .leg-h { width: 100%; height: 40px; display: block; }
.flink .leg-v { display: none; }
.fpath {
  fill: none;
  stroke: #c9b7b2;
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
.fdot { fill: var(--rose-deep); opacity: 0; transition: opacity .18s linear; }
.fdot.on { opacity: 1; }
.fnote { font-size: 12.5px; color: var(--muted); }

/* the studio screen card */
.fcard.screen { padding: 0; overflow: hidden; }
.scr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  font: 600 14px/1.2 var(--sans);
  color: var(--ink-strong);
}
.scr-bar .tag {
  font: 600 11.5px/1 var(--sans);
  color: #7a5334;
  background: #f6e9dc;
  border-radius: 4px;
  padding: 4px 8px;
}
.scr-rows { margin: 0; padding: 2px 16px; display: grid; }
.scr-rows > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.scr-rows > div:last-child { border-bottom: 0; }
.scr-rows dt { color: var(--muted); font-size: 13.5px; }
.scr-rows dd { margin: 0; color: var(--ink-strong); font-size: 14.5px; font-weight: 500; }
.scr-rows dd.ok { color: var(--sage-deep); font-weight: 600; }

.scr-act { display: flex; gap: 10px; padding: 13px 16px 15px; border-top: 1px solid var(--line); }
.scr-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 15px;
  font: 600 13.5px/1 var(--sans);
  color: var(--ink-strong);
  background: var(--paper);
}
.scr-btn.go { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }

/* the email card */
.fcard.mail { background: var(--linen); }
.mail-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.mail-top svg {
  width: 16px; height: 16px; flex: none;
  stroke: var(--rose-deep); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- security */

.sec-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 26px 56px;
  align-items: start;
}

.facts { display: grid; gap: 0; }
.fact {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
}
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact svg {
  width: 18px; height: 18px; margin-top: 4px;
  stroke: var(--rose-deep); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.fact b { display: block; color: var(--ink-strong); font-weight: 600; font-size: 16px; }
.fact span { display: block; color: var(--ink-soft); font-size: 15.5px; line-height: 1.54; margin-top: 3px; }

/* ---------------------------------------------------------------- pricing */

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 30px 56px;
  align-items: start;
}

.price-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 22px 0 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.price-head .n {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  color: var(--ink-strong);
}
.price-head .u { color: var(--muted); font-size: 16px; }

.price-note { color: var(--ink-soft); max-width: 66ch; font-size: 16px; }

.calc {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}
.calc label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 600 13px/1 var(--sans);
  color: var(--ink-strong);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.calc label em {
  font-style: normal; font-weight: 600; color: var(--rose-deep);
  text-transform: none; letter-spacing: 0; font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.calc input[type="range"] {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 0 0 18px;
  cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 17px; height: 17px;
  border-radius: 4px;
  background: var(--rose-deep);
  border: 0;
  cursor: pointer;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px;
  border-radius: 4px;
  background: var(--rose-deep);
  border: 0;
  cursor: pointer;
}

.calc-out {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.calc-out .amt {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.calc-out .per { color: var(--muted); font-size: 15px; }

.calc-why { margin-top: 11px; font-size: 14.5px; color: var(--ink-soft); min-height: 2.9em; }
.calc-why b { color: var(--rose-deep); font-weight: 600; }

/* ---------------------------------------------------------------- close */

.close-sec { text-align: center; }
.close-sec h2 { margin-bottom: 13px; }
.close-sec p { color: var(--ink-soft); max-width: 62ch; margin-inline: auto; margin-bottom: 24px; }
.close-sec .cta-row { justify-content: center; }

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

.foot {
  border-top: 1px solid var(--line);
  padding-block: 28px 36px;
  font-size: 14.5px;
  color: var(--muted);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.foot img { height: 18px; width: auto; opacity: .7; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; margin-inline-start: auto; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--rose-deep); text-decoration: underline; }

/* ---- the onboarding offer -------------------------------------------- */
.foot-offer {
  background: var(--linen);
  border-top: 1px solid var(--line);
  padding-block: 54px 50px;
}
.foot-offer-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: start;
}
.foot-offer-say h2 {
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 34ch;
}
/* Each sentence holds its own line where there is room, and folds naturally
   when there is not. */
.foot-offer-say h2 span { display: block; }

.foot-offer-say p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 62ch;
}
.foot-offer-more { margin-top: 16px; }
.foot-offer-more a {
  font-weight: 600;
  color: var(--rose-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.foot-offer-more a:hover { color: var(--ink); }

.foot-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.foot-pack {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 18px 16px;
  min-width: 0;
}
.foot-pack h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 2px;
}
.foot-pack-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 12px;
}
.foot-pack ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.foot-pack li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.foot-pack li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose-deep);
  opacity: .5;
}

/* ---- the copyright bar ------------------------------------------------ */
.foot-legal {
  border-top: 1px solid var(--line);
  padding-block: 18px 22px;
  font-size: 13px;
  color: var(--muted);
}
.foot-legal-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.foot-legal p { margin: 0; }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 18px; margin-inline-start: auto; }
.foot-legal a { color: var(--ink-soft); text-decoration: none; }
.foot-legal a:hover { color: var(--rose-deep); text-decoration: underline; }

@media (max-width: 900px) {
  .foot-offer-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .foot-offer-say h2 { font-size: 23px; max-width: none; }
}
@media (max-width: 560px) {
  .foot-offer { padding-block: 40px 36px; }
  .foot-packs { grid-template-columns: minmax(0, 1fr); }
  .foot-legal nav { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .price-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 30px 44px; }
  .sec-grid,   .flow { gap: 16px 8px; }
  .flink { min-width: 84px; }
  .fcard { padding: 14px 15px; }
  .hero-stage { grid-template-columns: 162px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --gut: 20px; }

  .top-in { gap: 12px; }
  .top-act { margin-inline-start: auto; }
  .menu-btn { display: inline-flex; }

  /* the anchors become a drawer under the bar */
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    padding: 6px var(--gut) 12px;
    font-size: 16px;
  }
  body.nav-open .nav { display: flex; }
  .nav a {
    padding: 13px 2px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover { border-bottom-color: var(--line); }

  .hero-top { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .hero h1 { max-width: 18ch; }
  .hero-side { padding-bottom: 0; }

  /* every transform is dropped: the selected screen is shown flat */
  .plane-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }


  /* the rail is a drawing of the app's own menu; below 900px the captured
     screen already shows its navigation, so the drawing stands down */
  .hero-stage { display: block; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .rail { display: none; }
  .hero-stage .hero-shot {
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-2);
  }

  /* the three screens stack, each under its own words */
  .one-item { gap: 16px; }

  /* the two sheets stop overlapping and simply follow one another */
  .pf-stack { padding: 0; display: grid; gap: 18px; }
  .pf-back, .pf-front {
    position: static;
    width: 100%;
    margin-inline-start: 0 !important;
  }
  .pf-front { order: -1; }

  /* the flow runs top to bottom, with the connectors redrawn vertically
     rather than a horizontal leg squashed sideways */
  .flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .flow > li { grid-column: auto; grid-row: auto; }
  .flow > li:nth-child(3) .fcard,
  .flow > li:nth-child(4) .fcard { border-radius: 8px; border: 1px solid var(--line); }
  .flow > li:nth-child(3) .fcard { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .flow > li:nth-child(4) .fcard { border-top-left-radius: 0; border-top-right-radius: 0; }

  .flink {
    min-width: 0;
    grid-template-columns: auto auto;
    grid-auto-flow: column;
    justify-items: start;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 4px 0 4px 26px;
  }
  .flink .leg-h { display: none; }
  .flink .leg-v { display: block; width: 22px; height: 52px; }
  .fnote { font-size: 13px; }

  .sec-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .calc { max-width: 430px; }
}

@media (max-width: 900px) {
  /* every real control reaches a 44px target on a touch screen */
  .top-act .btn { height: 44px; }
  .bldg-btn { min-height: 44px; padding-inline: 18px; }
  .foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(31px, 8.6vw, 40px); }
  .hero h1 { max-width: none; }
  .bldg-bar { flex-wrap: wrap; gap: 10px; }
  .bldg-date { font-size: 14.5px; }
  .bldg-days { grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
  .bldg-legend { gap: 6px 14px; font-size: 12px; }
  .scr-rows > div { grid-template-columns: 1fr; gap: 2px; }
  .scr-act { flex-wrap: wrap; }
  .foot-in { flex-direction: column; align-items: flex-start; }
  .foot nav { margin-inline-start: 0; gap: 16px; }
  .price-head .n { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .fstep { opacity: 1; }
}

/* ------------------------------------------------------- small phones (320)
   A captured app screen is 780px wide. Inside a 20px gutter on a 320px phone
   it lands at about 278px, which is a 2.8x reduction: the screen's own body
   text falls under 6px and stops being readable. So on the smallest phones
   the captures give up the right-hand margin and run to the edge, buying back
   every pixel available. Words keep their gutter; only the pictures bleed. */
@media (max-width: 380px) {
  :root { --gut: 16px; }

  .foot-offer-say h2 span { display: inline; }

  /* The captures run to the right edge. The selectors carry the parent so
     they outrank the earlier `.seq-step .shot` and `.one-item .shot` rules;
     a bare `.shot` here loses to them however late it appears. */
  .shot,
  .seq-step .shot,
  .one-item .shot,
  .pf-stack .shot {
    margin-inline-end: -16px;
    border-inline-end: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  /* The capture's own grid track is sized to the gutter-bound column, so the
     negative margin alone cannot widen it. The track is widened to match. */
  .seq, .one-grid, .pf-stack { margin-inline-end: -16px; }
  .seq-step, .one-item { min-width: 0; }
  /* the hero capture bleeds both ways, since it carries the page. The stage
     is what sits in the gutter below 900px, so the negative margin goes
     there and the frame inside it simply loses its side borders. */
  .hero-stage {
    margin-inline: -16px;
  }
  .hero-stage .hero-shot {
    border-inline: 0;
    border-radius: 0;
  }

  /* type comes down a step so headings stop breaking mid-word */
  .hero h1 {
    font-size: clamp(22px, 7.6vw, 30px);
    max-width: none;
    letter-spacing: -0.015em;
  }
  h2 { font-size: 24px; }
  .sub, .hero-side p { font-size: 15px; }

  /* the footer cards give back their inner padding */
  .foot-pack { padding: 15px 14px 14px; }
  .foot-offer { padding-block: 32px 30px; }
  .foot-offer-say h2 { font-size: 21px; }

  /* nothing may sit on a line narrower than its own words */
  .fcard, .nx-card { min-width: 0; }
}

/* A last guard for 320 and below: anything that still insists on its own
   width scrolls inside its own box rather than pushing the page sideways. */
@media (max-width: 340px) {
  .price-grid, .sec-grid, .flow { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- font boost defeat
   Chrome on Android boosts text inside a block it judges to be a wide column
   of reading matter. `text-size-adjust: none` turns that off, but it is worth
   not relying on a single switch for the one thing the user sees first. A
   block is exempt from boosting when its own height is constrained, so the
   headline carries an explicit line box as well. Belt and braces: either
   alone holds the line, and neither changes how the page looks anywhere. */
.hero h1 {
  max-height: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* ------------------------------------------------------------- overflow guard
   The page must never scroll sideways, on any device, at any zoom, whether or
   not the web font has loaded. A synthesised bold or a fallback serif is wider
   than the real weight, so a headline that fits in one environment can overrun
   in another. These rules make that impossible rather than unlikely:
   every box is bounded by the viewport and long words break instead of
   pushing. This is a floor, not a layout: nothing here positions anything. */
* { min-width: 0; }

h1, h2, h3, h4, p, li, a, b, span, blockquote, figcaption {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

h1, h2, h3 { max-width: 100%; }

img, svg, video, table, pre { max-width: 100%; }