/* ==========================================================================
   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; }

html { -webkit-text-size-adjust: 100%; }

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: 60;
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

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

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 250, 247, .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.05) blur(6px);
}

.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 */

h1, h2, h3 {
  color: var(--ink-strong);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
}

h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-size: clamp(36px, 4.3vw, 54px);
  text-wrap: balance;
}

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

h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  font-size: clamp(27px, 3.1vw, 37px);
  line-height: 1.12;
}
h2 span { color: var(--rose-deep); }

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.006em;
}

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.02fr) minmax(0, .98fr);
  gap: 20px 56px;
  align-items: end;
  margin-bottom: 28px;
}

/* each authored line holds on one line; the break is the one in the markup */
.hero h1 { max-width: none; text-wrap: nowrap; }

.hero-side { padding-bottom: 4px; }
.hero-side .lede { max-width: 48ch; 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); }

/* ---------------------------------------------------------------- plane */

.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: 28px;
}
.plane-head p { max-width: 50ch; color: var(--ink); }

/* the angled composition: flat images laid on one shared plane */
.plane {
  position: relative;
  height: 440px;
  margin-bottom: 32px;
}

.plane-in {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1500px;
  height: 460px;
  margin: -212px 0 0 -770px;
  transform: rotateX(36deg) rotateZ(-15deg) scale(.80);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.sheet {
  position: absolute;
  top: 50%;
  width: 470px;
  margin-top: -140px;
  border: 1px solid rgba(74, 63, 66, .18);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 0 14px 26px rgba(47, 40, 42, .13);
  transition: transform .32s cubic-bezier(.32, 0, .22, 1), box-shadow .32s linear, filter .32s linear;
  transform: translateZ(0);
  filter: saturate(.55) brightness(1.04) contrast(.97);
}
.sheet img { width: 100%; border-radius: 2px; }

/* One row along the plane's own X axis. The rotation turns it into a stair
   that climbs to the right, so the LEFTMOST sheet lands TOP LEFT on screen.
   Payments is placed there. */
.sheet[data-k="payments"]   { left:   0px; z-index: 5; }
.sheet[data-k="reschedule"] { left: 255px; z-index: 4; }
.sheet[data-k="rooms"]      { left: 510px; z-index: 3; }
.sheet[data-k="building"]   { left: 765px; z-index: 2; }
.sheet[data-k="timetable"]  { left:1020px; z-index: 1; }

.sheet.on {
  z-index: 9;
  filter: none;
  transform: translateZ(84px);
  box-shadow: 0 28px 52px rgba(47, 40, 42, .24);
  border-color: rgba(148, 80, 93, .55);
}

/* labels sit flat over the band, never rotated, positioned from live geometry */
.plane-key { position: absolute; inset: 0; pointer-events: none; }
.plane-key b {
  position: absolute;
  left: 0;
  top: 0;
  font: 600 12.5px/1.2 var(--sans);
  color: var(--ink-soft);
  letter-spacing: .015em;
  white-space: nowrap;
  background: var(--linen);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transform: translate(-50%, 0);
  transition: color .2s linear, border-color .2s linear, background .2s linear;
}
.plane-key b::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 14px;
  background: #cdbcb7;
}
.plane-key b.on {
  color: var(--ink-strong);
  border-color: var(--rose-deep);
  background: var(--paper);
}
.plane-key b.on::after { background: var(--rose-deep); }

/* tablist */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 500 14px/1 var(--sans);
  padding: 9px 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .14s linear, background .14s linear, color .14s linear;
}
.tab:hover { border-color: #d6c5c0; }
.tab[aria-selected="true"] {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #fff;
  font-weight: 600;
}

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  gap: 38px;
  align-items: start;
}
.panel .shot { box-shadow: var(--shadow-3); }
.panel-note h3 { margin-bottom: 8px; }
.panel-note p { color: var(--ink-soft); font-size: 16px; }

/* ------------------------------------------- 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: 62ch; 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);
}

.one-item {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* the second screen reverses, so the eye zig-zags rather than marching */
.one-item:nth-child(2) { grid-template-columns: minmax(0, 1fr) 268px; }
.one-item:nth-child(2) .one-note { order: 2; }

.one-note h3 { margin-bottom: 8px; }
.one-note p { color: var(--ink-soft); font-size: 16px; }

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

.one-live {
  max-width: 56ch;
  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: 64ch; 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);
  }
}

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

.req-head { max-width: 62ch; 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: 52ch; 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: 48ch; 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; }

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

@media (max-width: 1100px) {
  .plane { height: 400px; }
  .plane-in { transform: rotateX(36deg) rotateZ(-15deg) scale(.66); }
  .panel { grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; }
  .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); }
  .one-item,
  .one-item:nth-child(2) { grid-template-columns: 228px minmax(0, 1fr); gap: 24px; }
  .one-item:nth-child(2) .one-note { order: 0; }
}

@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 { display: none; }
  .plane-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
  .panel { grid-template-columns: 1fr; gap: 20px; }
  .panel-note { order: -1; }

    
  /* 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,
  .one-item:nth-child(2) { grid-template-columns: 1fr; gap: 16px; }
  .one-item:nth-child(2) .one-note { order: 0; }

  /* 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; }
  .tabs { gap: 7px; }
  .tab { padding: 11px 14px; font-size: 14px; min-height: 44px; }
  .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; }
}