@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap');

:root {
  --paper:    #F4F5F3;
  --sheet:    #FFFFFF;
  --ink:      #1A1D20;
  --graphite: #5A6168;
  --pencil:   #8C939A;
  --rule:     #D6DBD8;
  --grid:     #E6E9E7;
  --red:      #BF2E1B;

  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'IBM Plex Sans', -apple-system, 'Helvetica Neue', sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
}

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

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Header */

.top {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
.mark {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mark span { color: var(--graphite); font-weight: 400; }
.top nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--graphite); }
.top nav a:hover { color: var(--ink); }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--sheet);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 3px;
  transition: background 0.2s;
}
.btn:hover { background: var(--red); }
.top nav .btn { color: var(--sheet); padding: 10px 18px; }

/* Hero */

.hero {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--rule);
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.hero .lead {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 34em;
  margin-bottom: 32px;
}
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 28px; }
.hero .actions a.plain { color: var(--graphite); font-size: 15px; }
.hero .fine { font-size: 14px; color: var(--graphite); }

/* The marked-up sheet */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 24px 48px -32px rgba(26, 29, 32, 0.35);
  font-size: 14px;
  position: relative;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 2px solid var(--ink);
}
.sheet-head strong { font-weight: 600; }
.sheet-head span { color: var(--graphite); }

.line {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 0 14px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--grid);
  align-items: baseline;
}
.line .code { color: var(--pencil); font-variant-numeric: tabular-nums; }
.line .amt { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.line.total { border-bottom: none; border-top: 2px solid var(--ink); font-weight: 600; }

.struck { position: relative; color: var(--graphite); }
.struck::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px; top: 52%;
  height: 2px;
  background: var(--red);
  transform-origin: left;
  animation: strike 0.45s ease-out both;
  animation-delay: var(--d, 0.6s);
}
.fix {
  display: block;
  color: var(--red);
  font-weight: 600;
  animation: appear 0.4s ease-out both;
  animation-delay: calc(var(--d, 0.6s) + 0.35s);
}
.note {
  grid-column: 2 / -1;
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 2px solid var(--red);
  color: var(--red);
  font-size: 13.5px;
  line-height: 1.45;
  animation: appear 0.4s ease-out both;
  animation-delay: calc(var(--d, 0.6s) + 0.5s);
}
.ring { position: relative; display: inline-block; }
.ring svg {
  position: absolute;
  left: -14px; top: -9px;
  width: calc(100% + 28px);
  height: calc(100% + 18px);
  overflow: visible;
  pointer-events: none;
}
.ring path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw 0.7s ease-out both;
  animation-delay: var(--d, 0.6s);
}
.sheet-caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--graphite);
}

@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw   { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .struck::after, .fix, .note, .ring path { animation: none; }
  .ring path { stroke-dashoffset: 0; }
}

/* Sections */

section.block { padding: clamp(64px, 9vw, 112px) 0; border-bottom: 1px solid var(--rule); }
section.block.white { background: var(--sheet); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 72px);
}
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.split > div:first-child p {
  margin-top: 18px;
  color: var(--graphite);
  max-width: 24em;
}
.prose p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  max-width: 36em;
}
.prose p + p { margin-top: 1.1em; }

.risks { border-top: 2px solid var(--ink); }
.risks > div {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 8px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.risks h3 { font-size: 17px; font-weight: 600; line-height: 1.4; }
.risks p { color: #33383D; max-width: 38em; }

.docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}
.docs h3 { font-size: 15px; font-weight: 600; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 6px; }
.docs li { list-style: none; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }

/* About */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.about-grid figure img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; filter: grayscale(0.15); }
.about-grid figcaption { font-size: 14px; color: var(--graphite); margin-top: 10px; }
.about-grid h2 { margin-bottom: 24px; }
.terms {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  font-size: 16px;
  max-width: 40em;
}

/* Fees */

.fees { display: grid; gap: 48px; }
.fee-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 5vw, 72px);
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}
.fee-row h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 10px; }
.fee-row > div:first-child p { color: var(--graphite); font-size: 16px; }
.fee-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fee-table th { text-align: left; font-weight: 500; color: var(--graphite); font-size: 14px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
.fee-table td { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.fee-table td:last-child, .fee-table th:last-child { text-align: right; }
.fee-table td:last-child { font-weight: 600; }
.fee-note { margin-top: 14px; font-size: 15px; color: var(--graphite); }
.fee-single { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; }

/* Closing */

.closing { padding: clamp(72px, 10vw, 128px) 0; background: var(--ink); color: var(--paper); }
.closing h2 { max-width: 14em; }
.closing p { margin: 20px 0 32px; max-width: 34em; color: #C5CACE; font-family: var(--serif); font-size: 19px; }
.closing .btn { background: var(--paper); color: var(--ink); }
.closing .btn:hover { background: var(--red); color: var(--sheet); }

footer { padding: 40px 0 56px; font-size: 14px; color: var(--graphite); }
footer .wrap { display: grid; gap: 14px; }
footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer nav { display: flex; gap: 20px; }
footer nav a { text-decoration: none; }
footer .legal { max-width: 52em; font-size: 13px; }

/* Responsive */

@media (max-width: 900px) {
  .hero .wrap, .split, .about-grid, .fee-row { grid-template-columns: 1fr; }
  .about-grid figure { max-width: 320px; }
  .risks > div { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top nav a:not(.btn) { display: none; }
  .line { grid-template-columns: 1fr auto; padding: 10px 14px; }
  .line .code { display: none; }
  .note { grid-column: 1 / -1; }
  .sheet-head { padding: 12px 14px; flex-direction: column; gap: 2px; }
  .docs { grid-template-columns: 1fr; }
  .prose p { font-size: 18px; }
}

/* v3: direct hero + table plan */

.hero .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
.hero h1 { font-size: clamp(42px, 5.4vw, 70px); }
.byline { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; font-size: 15px; color: var(--graphite); }
.byline img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.byline strong { display: block; color: var(--ink); font-weight: 600; }

.plan { padding-top: 8px; }
.side { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.seat { text-align: center; font-size: 14px; line-height: 1.35; }
.seat strong { display: block; font-weight: 600; }
.seat span { color: var(--graphite); font-size: 13px; }
.chair {
  width: 46px; height: 34px;
  margin: 0 auto 10px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--sheet);
  position: relative;
}
.chair::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px; top: 4px;
  height: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.side .seat > div + .chair { margin: 10px auto 0; }
.side.near .chair::before { top: auto; bottom: 4px; }

.board {
  margin: 4px 0;
  height: 110px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--sheet);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--pencil);
}
.board span { border: 1px solid var(--rule); padding: 6px 12px; background: var(--paper); }

.seat.empty .chair { border-style: dashed; border-color: var(--rule); background: transparent; }
.seat.empty .chair::before { border-color: var(--rule); border-style: dashed; }
.seat.me .chair, .seat.me .chair::before { border-color: var(--red); }
.seat.me .chair { background: #FBEDEA; }
.seat.me strong, .seat.me span { color: var(--red); }
.seat.me { animation: seat-in 0.6s ease-out both; animation-delay: 0.9s; }
@keyframes seat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.plan-caption {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.plan-caption em { font-style: normal; color: var(--red); }

.why .prose p:first-child { font-size: clamp(21px, 2vw, 24px); line-height: 1.5; }
.fit { margin-top: 36px; border-top: 2px solid var(--ink); max-width: 40em; }
.fit li { list-style: none; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--rule); position: relative; }
.fit li::before { content: ''; position: absolute; left: 2px; top: 23px; width: 12px; height: 7px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }

.sample { margin-top: 48px; max-width: 640px; }
.sheet:not(.in) .struck::after, .sheet:not(.in) .fix, .sheet:not(.in) .note, .sheet:not(.in) .ring path { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) { .seat.me { animation: none; } }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .side { gap: 6px; }
  .seat { font-size: 13px; }
  .seat span { font-size: 12px; }
  .chair { width: 38px; height: 28px; }
}

/* v4: credentials strip + worries */

.creds { background: var(--ink); color: var(--paper); }
.creds .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creds .wrap > div { padding: 26px 24px 28px 0; }
.creds .wrap > div + div { padding-left: 24px; border-left: 1px solid #3A4046; }
.creds strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 4px; }
.creds span { font-size: 14px; color: #AEB4BA; line-height: 1.45; display: block; }

.worries-head { max-width: 40em; margin-bottom: 48px; }
.worries-head h2 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 18px; }
.worries-head p { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 22px); color: #33383D; }
.worries { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 2px solid var(--ink); }
.worries > div { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.worries h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.worries p { color: #33383D; }
.promise { margin-top: 40px; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); color: var(--red); }

@media (max-width: 900px) {
  .creds .wrap { grid-template-columns: 1fr 1fr; }
  .creds .wrap > div:nth-child(3) { padding-left: 0; border-left: none; }
  .creds .wrap > div:nth-child(n+3) { border-top: 1px solid #3A4046; }
  .worries { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .creds .wrap { grid-template-columns: 1fr; }
  .creds .wrap > div, .creds .wrap > div + div { padding: 18px 0; border-left: none; }
  .creds .wrap > div + div { border-top: 1px solid #3A4046; }
}

.about-grid video.onsite { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; object-fit: cover; background: var(--grid); display: block; }

.band { border-bottom: 1px solid var(--rule); }
.band img { width: 100%; height: clamp(320px, 52vw, 720px); object-fit: cover; object-position: 50% 85%; }

.side-photo { margin-top: 36px; width: 100%; max-width: 340px; height: auto; }
@media (max-width: 900px) { .side-photo { max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } }

.side-video { margin-top: 36px; max-width: 300px; }
.side-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--grid); display: block; }
.side-video figcaption { font-size: 14px; color: var(--graphite); margin-top: 10px; }
@media (max-width: 900px) { .side-video { max-width: 260px; } }

/* v5: fees as steps */

.fees-intro { font-family: var(--serif); font-size: 19px; color: #33383D; margin-bottom: 40px; max-width: 36em; }
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border: 2px solid var(--ink); }
.step { padding: 32px clamp(20px, 3vw, 40px) 36px; }
.step + .step { border-left: 2px solid var(--ink); }
.step-no { font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 6px; }
.step h3 { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.2; margin-bottom: 14px; }
.step > p { color: #33383D; margin-bottom: 16px; max-width: 34em; }
.step .fee-single { color: var(--ink); margin-bottom: 18px; }
.step .credit { font-weight: 600; color: var(--ink); }
.step .btn { margin-top: 8px; }
.step .fee-table { margin-top: 8px; }

.addons { margin-top: 56px; }
.addons > h3 { font-size: 15px; font-weight: 600; color: var(--graphite); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.addon-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); padding-top: 24px; }
.addon-grid h4 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.addon-grid p { color: #33383D; font-size: 16px; margin-bottom: 12px; }

@media (max-width: 900px) {
  .steps, .addon-grid { grid-template-columns: 1fr; }
  .step + .step { border-left: none; border-top: 2px solid var(--ink); }
}

/* v6: contact page */

[hidden] { display: none !important; }
.contact .next { list-style: none; margin-top: 28px; border-top: 2px solid var(--ink); }
.contact .next li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--graphite); }
.contact .next strong { color: var(--ink); font-weight: 600; }
.contact .fine { font-size: 14px; }
.form { display: grid; gap: 20px; max-width: 640px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.form input, .form select, .form textarea {
  font: 400 17px/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--red); background: var(--sheet); }
.form .btn { justify-self: start; border: none; cursor: pointer; }
.form .btn:disabled { opacity: 0.6; cursor: default; }
.form .hp { position: absolute; left: -9999px; }
.form-msg { font-family: var(--serif); font-size: 21px; }

@media (max-width: 720px) {
  .form .row2 { grid-template-columns: 1fr; }
}