/* Bidden presentation site: masthead and kit showcase.
   Tokens come from context/ui-context.md. No hex outside this block. */

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/cormorant-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/cormorant-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --card: #f6f1ec;
  --page: #ffffff;
  --linen: #ad9c91;
  --ink: #4a4540;
  --pencil: #6f6963;
  --thread: #d8d1c9;
  --line-ui: #9a9289;
  --seal: #7d5f40;

  /* Text colours on each kit's backdrop (the backdrop decides, not the site theme). */
  --on-wedding: #4a4540;
  --on-wedding-muted: #4a4540; /* pencil measured 3.4:1 on this backdrop, under 4.5 */
  --on-christmas-dinner: #f6f1ec;
  --on-christmas-dinner-muted: #d8d1c9;
  --on-kids-birthday: #2b2724;
  --on-kids-birthday-muted: #2b2724;
  --on-business-event: #4a4540;
  --on-business-event-muted: #4a4540; /* pencil measured 3.8:1 on this backdrop, under 4.5 */

  /* Tint of the header glass over the Christmas kit, whose backdrop is dark green. */
  --glass-christmas-dinner: #14221a;

  --phone-bezel: #1d1a18;
  --screen-off: var(--ink); /* the loader's screen, the footer's dark brown; js/boot-gate.js uses the same hex for the browser bar */

  --f-display: "Cormorant", Georgia, serif;
  --f-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-nav: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --head-h: 68px;
  --foot-h: 84px;
  --phone-h: clamp(340px, calc(100vh - var(--head-h) - var(--foot-h) - 56px), 880px);
  --phone-bezel-w: 11px;
}

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

[hidden] {
  display: none !important;
}

html {
  background: var(--card);
}

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.38;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}

/* Top bar ------------------------------------------------------------- */

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--card);
  font: 500 14px/1.2 var(--f-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

html {
  scroll-padding-top: var(--head-h);
}

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 28px;
  /* Frosted glass, always: the page shows through, blurred (same idea as the IC Brow Studio bar). */
  background: color-mix(in srgb, var(--hd-glass, var(--card)) 60%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--hd-ink, var(--ink));
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
/* Two hairlines frame the row, 8px in from the top and bottom edges, in the text colour. */
.site-head::before,
.site-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, currentColor 55%, transparent);
  pointer-events: none;
}
.site-head::before {
  top: 8px;
}
.site-head::after {
  bottom: 8px;
}
/* Over the kit showcase (class set by js/showcase.js): text and glass follow the kit under the bar. */
.site-head.over-stage :focus-visible {
  outline-color: currentColor;
}
.site-head.over-stage[data-kit="wedding"] { --hd-ink: var(--on-wedding); }
.site-head.over-stage[data-kit="christmas-dinner"] { --hd-ink: var(--on-christmas-dinner); --hd-glass: var(--glass-christmas-dinner); }
.site-head.over-stage[data-kit="kids-birthday"] { --hd-ink: var(--on-kids-birthday); }
.site-head.over-stage[data-kit="business-event"] { --hd-ink: var(--on-business-event); }
@media (prefers-reduced-motion: reduce) {
  .site-head {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .site-head {
    background: var(--hd-glass, var(--card));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.wordmark a {
  display: inline-block;
  padding-block: 11px; /* 44px touch target */
  color: inherit;
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding-block: 14px; /* 45px touch target */
  color: var(--hd-ink, var(--ink));
  font: 500 14px/1.2 var(--f-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover::after {
    transform: scaleX(1);
  }
}
.menu-btn {
  display: none;
}

/* Pages with no pinned showcase start below the fixed bar. */
body.plain {
  padding-top: var(--head-h);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wordmark {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* Showcase ------------------------------------------------------------- */

.pw {
  position: relative;
  width: 100%;
  /* height is set by the script: (kits - 1) x vhPerUnit */
}

.pw-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--card);
}

.pw-base,
.pw-panels {
  position: absolute;
  inset: 0;
}
.pw-base {
  z-index: 2;
}
.pw-panels {
  z-index: 3;
}

.pw-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Each later backdrop is revealed from the bottom edge upward.
   --reveal goes 100% (hidden) to 0% (fully shown). */
.pw-panel {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--reveal, 100%) 0 0 0);
  will-change: clip-path;
}

/* Phone ---------------------------------------------------------------- */

.phone {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: calc(var(--head-h) + (100% - var(--head-h) - var(--foot-h)) / 2);
  transform: translate(-50%, -50%);
  padding: var(--phone-bezel-w);
  border-radius: 38px;
  background: var(--phone-bezel);
  box-shadow: 0 34px 60px -26px rgba(29, 26, 24, 0.45), 0 10px 24px -14px rgba(29, 26, 24, 0.35);
}

.phone-island {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(var(--phone-bezel-w) + 9px);
  width: 27%;
  height: 22px;
  border-radius: 12px;
  background: var(--phone-bezel);
  transform: translateX(-50%);
  pointer-events: none;
}

.phone-screen {
  position: relative;
  height: var(--phone-h);
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
  overflow: hidden;
  background: var(--card);
  isolation: isolate;
}

.phone-view {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}
.phone-view[data-hidden] {
  clip-path: inset(100% 0 0 0);
}

.phone-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--card);
}
/* The phone is its own scroll zone. While the page glides, vendor/lenis.css turns off pointer events on every
   iframe, so a wheel over the phone went to the page and moved on to the next kit. The phone keeps its frames. */
.lenis.lenis-smooth .phone-frame {
  pointer-events: auto;
}

/* Titles: a left and a right column in the gaps between the phone and the backdrop art.
   Each side is a zero-size anchor at the stage centre, offset by --sx / --sy from the script.
   The column inside is moved vertically by GSAP, one slot (the stage height) per kit. */

.pw-title {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.pw-side {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(var(--sx, 0px), var(--sy, 0px));
}

.pw-col {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.pw-cell {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--col-w, 180px);
  display: grid;
  justify-items: center;
  gap: 0.5em;
  text-align: center;
  transform: translate(-50%, -50%) translateY(calc(var(--i) * var(--slot, 100vh)));
}

/* The line column sits left of the phone; pull it away from the bezel. */
.pw-side--left .pw-cell {
  transform: translate(calc(-50% - 14px), -50%) translateY(calc(var(--i) * var(--slot, 100vh)));
}

.pw-line {
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--on);
}

.pw-tag {
  font: 500 14px/1.3 var(--f-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--on);
}

.theme-wedding {
  --on: var(--on-wedding);
  --on-muted: var(--on-wedding-muted);
}
.theme-christmas-dinner {
  --on: var(--on-christmas-dinner);
  --on-muted: var(--on-christmas-dinner-muted);
}
.theme-kids-birthday {
  --on: var(--on-kids-birthday);
  --on-muted: var(--on-kids-birthday-muted);
}
.theme-business-event {
  --on: var(--on-business-event);
  --on-muted: var(--on-business-event-muted);
}
.theme-juniper-gray {
  --on: #2f3a36;
  --on-muted: #2f3a36;
}

/* Kit names: a list to the right of the phone. The kit in view is large, the others small.
   Each kit has its own copy of the list, clipped to the band between two wipe edges (script sets --top and --bot),
   so the list changes on the same line as the backdrop. The real buttons are a transparent copy on top. */

.pw-names {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  clip-path: inset(var(--top, 0%) 0 calc(100% - var(--bot, 100%)) 0);
}
.pw-names--hit {
  z-index: 21;
  clip-path: none;
}

.pw-list {
  --row: 56px;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--col-w, 180px) - 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate(calc(-50% + 24px), -50%); /* keeps the names clear of the phone bezel */
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long word must not widen the column toward the phone */
  grid-auto-rows: var(--row);
}

.pw-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--on-muted);
}
.pw-name.is-on {
  font-size: clamp(1.1rem, 1.55vw, 1.6rem);
  letter-spacing: 0.2em;
  color: var(--on);
}

.pw-kit {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
/* Visible on any backdrop: a light ring with a dark ring around it. */
.pw-kit:focus-visible {
  outline: 2px solid var(--card);
  box-shadow: 0 0 0 4px var(--ink);
}

/* Kit names answer the pointer: the visible copy of the name under the hovered transparent button is underlined. */
@media (hover: hover) and (pointer: fine) {
  .pw-title:has(.pw-list--hit .pw-name:nth-child(1) .pw-kit:hover) .pw-names:not(.pw-names--hit) .pw-name:nth-child(1),
  .pw-title:has(.pw-list--hit .pw-name:nth-child(2) .pw-kit:hover) .pw-names:not(.pw-names--hit) .pw-name:nth-child(2),
  .pw-title:has(.pw-list--hit .pw-name:nth-child(3) .pw-kit:hover) .pw-names:not(.pw-names--hit) .pw-name:nth-child(3),
  .pw-title:has(.pw-list--hit .pw-name:nth-child(4) .pw-kit:hover) .pw-names:not(.pw-names--hit) .pw-name:nth-child(4) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

/* The offer card: a paper card laid on the first kit, bottom left. Its width stops short of the phone, and its type
   scales with its own width (container units), so it holds from a laptop down to a small desktop window. */

.hero-card {
  position: absolute;
  z-index: 22;
  left: 44px;
  bottom: 44px;
  width: min(460px, calc(50vw - (var(--phone-h) * 0.4615 + 2 * var(--phone-bezel-w)) / 2 - 44px - 28px));
  container-type: inline-size;
  padding: 34px 36px 36px;
  background: var(--card);
  border: 1px solid var(--thread);
  box-shadow: 0 24px 40px -20px rgba(43, 39, 36, 0.5);
}
.hero-h1,
.hero-sub {
  margin: 0;
}
.hero-h1 {
  font-size: clamp(26px, 11.8cqi, 46px);
  font-weight: 300;
  line-height: 1.06;
  text-wrap: balance;
}
.hero-sub {
  margin-top: 14px;
  font-size: clamp(16px, 5.4cqi, 21px);
  line-height: 1.35;
  text-wrap: pretty;
}
.hero-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.hero-acts .btn {
  padding-inline: 16px;
  letter-spacing: 0.1em;
  max-width: 100%;
  text-align: center;
}
@media (max-height: 700px) {
  .hero-card {
    padding: 22px 24px 24px;
    bottom: 28px;
  }
  .hero-sub {
    margin-top: 10px;
  }
  .hero-acts {
    margin-top: 16px;
  }
}

/* Sections below the showcase ------------------------------------------- */

.band {
  padding: 72px 28px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.band--card {
  background: var(--card);
}
.band--page {
  background: var(--page);
}
.wrap {
  max-width: 920px;
  margin-inline: auto;
}

.h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lead {
  margin: 0 0 24px;
  font-size: 23px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.prose {
  max-width: 36em;
}
.page-title {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.updated {
  margin: 0 0 40px;
  font: 400 14px/1.3 var(--f-ui);
  letter-spacing: 0.08em;
  color: var(--pencil);
}
.legal h2 {
  margin: 40px 0 8px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal ul {
  margin: 0 0 20px;
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 4px;
}
.legal a {
  color: var(--seal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.prose p,
.prose-line {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* How it works */
.steps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--thread);
}
.steps li {
  display: grid;
  grid-template-columns: 56px minmax(150px, 230px) 1fr;
  gap: 8px 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--thread);
}
.steps p {
  margin: 0;
  max-width: 28em;
  text-wrap: pretty;
}
.step-n {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--seal);
}
.step-t {
  margin: 0;
  font-size: 23px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

/* Plans */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 32px;
}
.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  background: var(--page);
  border: 1px solid var(--thread);
}
.plan-name {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.plan .lead {
  min-height: 2.6em; /* two lines, so both plans' lists start at the same height */
}
.plan-price {
  margin: 0 0 8px;
  min-height: 2.6em; /* two lines, same reason */
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.ticks {
  align-self: stretch;
  flex: 1;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--thread);
}
.ticks li {
  padding: 12px 0;
  border-bottom: 1px solid var(--thread);
  font-size: 20px;
  line-height: 1.3;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--card);
  font: 500 14px/1.2 var(--f-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: transparent;
    color: var(--ink);
  }
}

/* Prices */
.table-scroll {
  margin-top: 8px;
  overflow-x: auto;
}
.prices {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.prices thead th {
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
  font: 500 14px/1.2 var(--f-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
}
.prices tbody th {
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid var(--thread);
  font-weight: 400;
  text-align: left;
}
.prices td {
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--thread);
  font-size: 26px;
  font-weight: 500;
}
.prices .num {
  text-align: right;
}
.prices td.num {
  white-space: nowrap;
}

.extras {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--thread);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.extras li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--thread);
}
.amount {
  font-size: 26px;
  font-weight: 500;
}

.note {
  max-width: 36em;
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.35;
  color: var(--pencil);
  text-wrap: pretty;
}


/* Contact */
.contact-lines {
  display: grid;
  gap: 4px;
  margin: 24px 0 0;
  font-size: 28px;
  line-height: 1.3;
}
.contact-lines a,
.note a {
  color: var(--seal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  width: fit-content;
}

/* Footer: ink ground with card text. Linen would give 2.3:1 for the card text and 3.4:1 for ink. */
.site-footer {
  padding: 28px 28px;
  background: var(--ink);
  color: var(--card);
}
.site-footer-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
}
.footer-logo {
  display: block;
  width: 80px;
  height: auto;
}
.site-footer p {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}
.site-footer nav a {
  display: inline-block;
  padding-block: 12px; /* 44px touch target */
  margin-block: -12px;
  color: var(--card);
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-footer nav a:focus-visible {
  outline-color: var(--card);
}
.powered {
  margin: 40px 0 0;
  font: 400 14px/1.3 var(--f-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}

@media (max-width: 720px) {
  .steps li {
    grid-template-columns: 40px 1fr;
  }
  .steps p {
    grid-column: 2;
  }
}


/* Phone page ------------------------------------------------------------ */

.pm-kits-band {
  padding-block: 32px 56px;
}
@media (scripting: enabled) {
  html:not(.kits-failed) .pm-kits:empty {
    min-height: 100svh; /* the list is built by js/phone.js after first paint; keep the content below it off screen until then. Without JS it never fills, so no gap there. */
  }
}
.pm-kits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A list with one example (branded.html) gets one centred, wider card instead of half an empty grid. */
.pm-kits:has(> li:only-child) {
  grid-template-columns: minmax(0, 260px);
  justify-content: center;
}
.pm-kit {
  appearance: none;
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.pm-kit:active {
  transform: scale(0.985);
}
.pm-kit-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  margin-bottom: 8px;
  border: 1px solid var(--thread);
}
.pm-kit-name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pm-kit-line {
  font-size: 18px;
  font-style: italic;
  line-height: 1.25;
}
.pm-kit-tag {
  font: 500 14px/1.3 var(--f-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-kit-cta {
  margin-top: 6px;
  padding-block: 10px; /* 44px touch target */
  font: 500 14px/1.2 var(--f-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.pm-viewer {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
}
.pm-viewer[open] {
  display: flex;
  flex-direction: column;
}
.pm-viewer::backdrop {
  background: var(--card);
}
.pm-viewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
  background: var(--card);
  border-bottom: 1px solid var(--thread);
}
.pm-viewer-title {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pm-viewer-bar .btn {
  padding: 12px 20px;
}
.pm-viewer-body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pm-viewer-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body:has(dialog[open]) {
  overflow: hidden;
}

/* Sections on a phone: 56px bands and 16px gutters */
@media (max-width: 720px) {
  .band {
    padding: 56px 16px;
  }
  .plan {
    padding: 24px;
  }
  .band.pm-kits-band {
    padding-block: 32px 56px;
  }
  .prices thead th {
    padding-block: 10px;
    font-size: 14px;
    letter-spacing: 0.08em;
    vertical-align: bottom;
  }
  .prices tbody th {
    padding-right: 12px;
    font-size: 20px;
    line-height: 1.25;
  }
  .prices td {
    padding-left: 12px;
    font-size: 22px;
  }
  .contact-lines {
    font-size: clamp(20px, 6vw, 28px);
    overflow-wrap: anywhere;
  }
  .contact-lines a {
    padding-block: 10px; /* 44px touch target */
  }
  .site-footer {
    padding: 24px 16px;
  }
}

/* Questions: one markup, two looks. A flat list on desktop, an accordion on the phone. */
.acc {
  margin: 32px 0 0;
  border-top: 1px solid var(--thread);
}
.acc details {
  border-bottom: 1px solid var(--thread);
}
.acc summary {
  font-size: 23px;
  font-style: italic;
  line-height: 1.25;
  list-style: none;
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc details p {
  margin: 0;
  text-wrap: pretty;
}

@media (min-width: 900px) and (min-height: 548px) {
  .acc details {
    padding: 20px 0;
    overflow: hidden;
  }
  .acc summary {
    float: left;
    width: calc((100% - 32px) / 2.4);
    pointer-events: none;
  }
  .acc details p {
    margin-left: calc((100% - 32px) / 2.4 + 32px);
  }
}

@media (max-width: 899px), (max-height: 547px) {
  :root {
    --head-h: 60px;
  }
  body {
    padding-top: var(--head-h);
  }
  .site-head {
    padding-inline: 16px;
  }
  /* The 44px Menu button fills the bar, so the hairlines sit closer to the edges. */
  .site-head::before {
    top: 3px;
  }
  .site-head::after {
    bottom: 3px;
  }
  .wordmark {
    font-size: 22px;
  }
  .menu-btn {
    appearance: none;
    display: inline-block;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: 500 16px/1.2 var(--f-display);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--thread);
  }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 4px 16px 16px;
  }
  .site-nav li + li {
    border-top: 1px solid var(--thread);
  }
  .site-nav a {
    display: block;
    padding-block: 14px;
    font-size: 16px;
  }
  .site-nav a::after {
    display: none;
  }
  .pw {
    display: none;
  }
  .acc summary {
    position: relative;
    display: block;
    min-height: 56px;
    padding: 14px 40px 14px 0;
    cursor: pointer;
  }
  /* Plus drawn as two bars; the vertical one turns flat, so the plus becomes a minus. */
  .acc summary::before,
  .acc summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 16px;
    height: 1.5px;
    background: var(--seal);
    transition: transform 220ms var(--ease-out);
  }
  .acc summary::before {
    transform: translateY(-50%);
  }
  .acc summary::after {
    transform: translateY(-50%) rotate(90deg);
  }
  .acc details[open]:not([data-closing]) summary::after {
    transform: translateY(-50%) rotate(0deg);
  }
  .acc details p {
    margin: 0 0 20px;
    padding-right: 40px;
  }
}
/* The plain navigation and kit list are shared by no-script and controller-failure states.
   Scripting keeps today's first-paint hiding until the watchdog identifies a failed controller. */
@media (max-width: 899px), (max-height: 547px) {
  .site-head {
    position: static;
    flex-wrap: wrap;
    height: auto;
    padding-block: 12px;
  }
  body {
    padding-top: 0;
  }
  .menu-btn {
    display: none;
  }
  .site-nav {
    position: static;
    width: 100%;
    border-bottom: 0;
  }
}
@media (max-width: 899px) and (scripting: enabled), (max-height: 547px) and (scripting: enabled) {
  html:not(.nav-failed) .site-head {
    position: fixed;
    flex-wrap: nowrap;
    height: var(--head-h);
    padding-block: 0;
  }
  html:not(.nav-failed) body {
    padding-top: var(--head-h);
  }
  html:not(.nav-failed) .menu-btn {
    display: inline-block;
  }
  html:not(.nav-failed) .site-nav {
    display: none;
    position: absolute;
    width: auto;
    border-bottom: 1px solid var(--thread);
  }
  html:not(.nav-failed) .site-head[data-open] .site-nav {
    display: block;
  }
}
/* A desktop without its showcase uses the plain kit list under the fixed header. */
@media (min-width: 900px) and (min-height: 548px) {
  .pw {
    display: none;
  }
  .band.pm-kits-band {
    padding-top: calc(var(--head-h) + 48px);
  }
}
@media (min-width: 900px) and (min-height: 548px) and (scripting: enabled) {
  html:not(.showcase-failed):not(.kits-failed) .pw {
    display: block;
  }
  html:not(.showcase-failed):not(.kits-failed) .pm-kits-band {
    display: none;
  }
}

/* The offer on the phone, above the kits */
.pm-hero {
  margin-bottom: 36px;
}
.pm-hero .hero-h1 {
  font-size: clamp(36px, 10.5vw, 46px);
}
.pm-hero .hero-sub {
  margin-top: 14px;
  font-size: 22px;
}
.pm-hero .hero-acts {
  margin-top: 22px;
}
.pm-hero .btn {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 14px 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .acc summary::before,
  .acc summary::after {
    transition: none;
  }
}

/* Plan buttons: a row, with a quieter second button */
.plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
}
/* Side by side, Branded's two buttons wrap onto two rows, and between 720 and 900px the second one wraps its label too.
   Both cards reserve that height (2 x 46.8px button, the gap, 16px for the wrapped label), content from the top,
   so the main buttons sit on one line. */
@media (min-width: 720px) {
  .plan-actions {
    min-height: calc(2 * 46.8px + 12px + 16px);
  }
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    background: var(--ink);
    color: var(--card);
  }
}

/* Programmatic focus targets (skip link, section jumps) show no ring. */
[tabindex="-1"]:focus { outline: none; }

/* Loader --------------------------------------------------------------- */

/* js/boot-gate.js puts html.loading on the first visit of a session. Desktop: the real phone sits in its spot with a dark
   screen on top (.phone-boot) and everything else is held back. Phone: a full-screen dark screen (.loader). When
   js/boot.js ends it, html.loading comes off and html.reveal carries the fade-ins for about a second. Without
   JavaScript neither class is ever set, so both screens stay hidden. */

.boot-screen {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--screen-off);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 450ms var(--ease-out), visibility 0s linear 450ms;
}
html.loading .boot-screen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
/* The light behind the logo, coming up like a display warming. */
.boot-screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(246, 241, 236, 0.13), rgba(246, 241, 236, 0));
  animation: boot-glow 1400ms ease-out 100ms both;
}
.boot-logo {
  position: relative;
  height: auto;
  animation: boot-on 900ms var(--ease-out) 150ms both, boot-breathe 2600ms ease-in-out 1300ms infinite;
}
@keyframes boot-on {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.94);
  }
}
@keyframes boot-glow {
  from {
    opacity: 0;
  }
}
@keyframes boot-breathe {
  50% {
    opacity: 0.72;
  }
}
@keyframes boot-fade {
  from {
    opacity: 0;
  }
}

.phone-boot {
  position: absolute;
  inset: 0;
  z-index: 6;
}
.phone-boot .boot-logo {
  width: 52%;
}

.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  touch-action: none;
}
.loader .boot-logo {
  width: clamp(150px, 46vw, 230px);
}

/* After 12 s js/boot.js adds this panel: a dark strip at the bottom of the screen with Continue and Try again.
   It sits on the body, not in the phone, because the desktop phone is inert while loading. */
.boot-help {
  position: fixed;
  z-index: 210;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 20px;
  background: var(--screen-off);
  border: 1px solid var(--card);
  color: var(--card);
  text-align: center;
}
.boot-help p,
.sample-help p {
  margin: 0 0 14px;
  font: 400 16px/1.35 var(--f-ui);
}
.boot-help-acts {
  display: flex;
  gap: 12px;
}
.boot-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--card);
  background: transparent;
  color: var(--card);
  font: 500 14px/1.2 var(--f-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.boot-btn--solid {
  background: var(--card);
  color: var(--screen-off);
}
.boot-btn:focus-visible {
  outline: 2px solid var(--card);
  outline-offset: 3px;
}

/* A failed invitation stays inside its own phone view or mobile viewer. */
.sample-help {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: auto;
  padding: 32px 20px;
  background: var(--screen-off);
  color: var(--card);
  text-align: center;
}
.sample-help .boot-btn {
  flex: none;
}
.sample-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 0;
  color: var(--card);
  font: 400 14px/1.35 var(--f-ui);
  text-underline-offset: 3px;
}
.sample-link:focus-visible {
  outline-color: var(--card);
}

/* The invitations loaded ahead on a phone: off to the side, never seen. */
.boot-frame {
  position: fixed;
  left: 0;
  top: 0;
  width: 390px;
  height: 844px;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 900px) and (min-height: 548px) {
  html.loading {
    overflow: hidden;
    scrollbar-gutter: stable; /* the scrollbar's width stays reserved, so nothing shifts when scrolling comes back */
  }
  html.loading :is(.site-head, .skip, .pw-base, .pw-panels, .pw-title, .hero-card, main > :not(.pw), body > footer) {
    opacity: 0;
    visibility: hidden;
  }
  html.loading .hero-card {
    transform: translateY(16px);
  }
  html.reveal :is(.pw-base, .pw-panels) {
    transition: opacity 700ms var(--ease-out) 200ms;
  }
  html.reveal .pw-title {
    transition: opacity 600ms var(--ease-out) 350ms;
  }
  html.reveal .hero-card {
    transition: opacity 600ms var(--ease-out) 400ms, transform 600ms var(--ease-out) 400ms;
  }
  html.reveal .site-head {
    transition: opacity 500ms var(--ease-out) 250ms, background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  }
}

@media (max-width: 899px), (max-height: 547px) {
  .loader {
    display: grid;
  }
  html.loading,
  html.loading body {
    overflow: hidden;
  }
  html.loading body > :not(.loader):not(.boot-help) {
    visibility: hidden;
  }
}

/* Reduced motion: the logo fades in, nothing glows or moves, and the page fades in without sliding. */
@media (prefers-reduced-motion: reduce) {
  .boot-logo {
    animation: boot-fade 400ms ease-out both;
  }
  .boot-screen::before {
    animation: none;
  }
  html.loading .hero-card {
    transform: none;
  }
  html.reveal .hero-card {
    transition: opacity 400ms var(--ease-out);
  }
}