@font-face { font-family: 'Switzer'; src: url('fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #f0efeb;
  --surface: #e5e3de;
  --ink: #171614;
  --muted: #57534d;
  --accent: #164b54;
  --accent-step: #1d5a64;
  --accent-ink: #ffffff;
  --accent-soft: #c9dbd8;
  --field-ink: #171614;
  --field-ink-text: #f0efeb;
  --field-ink-muted: #a9a59d;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  --step-head: clamp(2rem, 1.2rem + 2.9vw, 3.5rem);
  --step-display: 10.4vw;

  --m: clamp(18px, 2.2vw, 32px);
  --gap: clamp(16px, 1.6vw, 24px);
  --section: clamp(96px, 12vw, 200px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-feature-settings: 'kern';
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: square, one fill */
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 500;
  padding: 0.95em 1.4em;
  line-height: 1.1;
  transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.button:hover { background: #0e3a42; }
.button:active { transform: scale(0.97); }
.button-light { background: var(--bg); color: var(--ink); }
.button-light:hover { background: #ffffff; }

.section-title { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }

/* Hero */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--m);
  gap: var(--gap);
}
.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wordmark { font-weight: 600; text-decoration: none; letter-spacing: -0.02em; }
.links { display: flex; gap: clamp(14px, 2vw, 32px); }
.links a, .wordmark { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color 0.2s var(--ease), text-underline-offset 0.2s var(--ease); }
.links a:hover, .wordmark:hover { text-decoration-color: currentColor; text-underline-offset: 3px; }
.statement {
  align-self: center;
  font-size: var(--step-display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #1f1d1a;
  max-width: 11.5em;
  text-wrap: balance;
  padding-bottom: 6vh;
  transform-origin: 0 50%;
}
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.lead { font-size: var(--step-lead); line-height: 1.32; max-width: 40ch; letter-spacing: -0.015em; }
.hero-foot .button { flex: none; font-size: var(--step-body); }

/* Steps: a staircase */
.steps { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.steps .section-title { grid-column: 1 / -1; margin-bottom: clamp(40px, 5vw, 72px); }
.stair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(40px, 4vw, 64px); }
.stair li { grid-column-end: -1; }
.stair li:nth-child(1) { grid-column-start: 1; }
.stair li:nth-child(2) { grid-column-start: 3; }
.stair li:nth-child(3) { grid-column-start: 5; }
.stair li:nth-child(4) { grid-column-start: 7; }
.stair h3 { font-size: var(--step-head); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; max-width: 18em; text-wrap: balance; }
.stair li:nth-child(4) h3 { color: var(--accent); }
.stair p { margin-top: 14px; max-width: 40ch; }

/* Example: the promise, shown */
.example {
  margin-top: var(--section);
  background: var(--accent);
  color: var(--accent-ink);
  padding: clamp(72px, 9vw, 150px) var(--m);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 40px;
  align-items: start;
}
.example-text { grid-column: 1 / span 4; position: sticky; top: var(--m); }
.example-text h2 { font-size: var(--step-head); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.example-text p { margin-top: 20px; max-width: 32ch; }
.toggle { display: inline-flex; margin-top: 32px; background: #0e3a42; padding: 4px; }
.toggle button {
  font: inherit; font-weight: 500; border: 0; cursor: pointer;
  background: transparent; color: var(--accent-ink);
  padding: 0.7em 1.15em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.toggle button:hover { background: var(--accent-step); }
.toggle button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.toggle button:active { transform: scale(0.97); }
.toggle button:focus-visible { outline-color: var(--bg); }
html:not(.js) .toggle { display: none; }

.example-figure { grid-column: 6 / -1; }
.example-figure figcaption { margin-top: 16px; font-size: var(--step-small); color: var(--accent-soft); max-width: 60ch; }

/* The browser frame (an interface fragment) */
.browser { background: #d9d6cf; padding: 0; container-type: inline-size; }
.browser-bar { display: flex; align-items: center; justify-content: center; padding: 1.4cqw; background: #d9d6cf; }
.address { background: #f6f5f2; color: #4a4741; font-size: max(13px, 1.5cqw); padding: 0.45em 1.4em; border-radius: 999px; min-width: 40%; text-align: center; }
.screen { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: #fff; }
.mock { position: absolute; inset: 0; transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0s; }
[data-state="after"] .mock-before, [data-state="before"] .mock-after { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.45s; }
[data-state="after"] .mock-before { transform: scale(0.985); }
[data-state="before"] .mock-after { transform: scale(1.015); }

.devices { display: grid; grid-template-columns: 1fr 24%; gap: 3%; align-items: end; }

/* The phone frame */
.phone { background: #1c1b19; padding: 7% 5% 9%; border-radius: 22px; }
.phone-screen { position: relative; aspect-ratio: 9 / 18; overflow: hidden; background: #fff; container-type: inline-size; border-radius: 6px; }
.phone .mock-before { padding: 4cqw 3cqw; }
.p-after { display: block; padding: 0; overflow: hidden; }
.p-top { display: flex; justify-content: space-between; align-items: center; padding: 6cqw 6cqw; font-weight: 600; font-size: 7cqw; letter-spacing: -0.02em; }
.p-call { background: #2a2119; color: #f6f1e8; font-weight: 500; font-size: 6cqw; padding: 1.5cqw 4cqw; }
.p-after img { width: 100%; aspect-ratio: 1 / 0.7; object-fit: cover; }
.p-h { padding: 6cqw 6cqw 0; font-size: 10cqw; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.p-open { padding: 4cqw 6cqw 0; font-size: 6.2cqw; display: flex; align-items: center; gap: 2.5cqw; }
.p-open::before { content: ''; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #3f8a4c; }
.p-btn { margin: 5cqw 6cqw 0; background: #7a4a22; color: #fff; text-align: center; font-size: 6.4cqw; font-weight: 500; padding: 3.6cqw; }
.p-row { margin: 3cqw 6cqw 0; display: flex; justify-content: space-between; background: #ece4d6; font-size: 6cqw; padding: 3cqw 4cqw; }
.p-row + .p-row { margin-top: 2cqw; }

/* Before: an old site, kept gentle */
.mock-before { background: #ffffff; color: #000; font-family: 'Times New Roman', Times, serif; text-align: center; padding: 3cqw 4cqw; font-size: 1.6cqw; line-height: 1.35; }
.old-title { font-size: 3.4cqw; font-weight: bold; color: #1a3aa8; margin-bottom: 1.5cqw; }
.old-nav { color: #1a3aa8; background: #e4e4e4; padding: 0.8cqw; margin-bottom: 2.5cqw; }
.old-table { margin: 0 auto; width: 80%; border-collapse: collapse; }
.old-table td { padding: 1.4cqw; text-align: left; vertical-align: top; border: 1px solid #b5b5b5; }
.old-table p { margin-bottom: 1cqw; }
.old-table u { color: #1a3aa8; }
.old-img { width: 30%; background: #f0f0f0; color: #777; text-align: center !important; vertical-align: middle !important; font-size: 1.4cqw; }
.old-foot { margin-top: 3cqw; font-size: 1.25cqw; color: #666; }

/* After: the proposal */
.mock-after { background: #f6f1e8; color: #2a2119; font-family: 'Switzer', system-ui, sans-serif; display: grid; grid-template-rows: auto 1fr auto; }
.m-top { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqw 3.2cqw; }
.m-name { font-weight: 600; font-size: 2cqw; letter-spacing: -0.02em; }
.m-links { display: flex; gap: 2.4cqw; font-size: 1.5cqw; align-items: center; }
.m-call { background: #2a2119; color: #f6f1e8; padding: 0.6cqw 1.6cqw; }
.m-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3cqw; padding: 0 3.2cqw; align-items: center; }
.m-h { font-size: 3.9cqw; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.m-open { margin-top: 2cqw; font-size: 1.7cqw; display: flex; align-items: center; gap: 0.8cqw; }
.m-open::before { content: ''; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #3f8a4c; }
.m-buttons { margin-top: 2.6cqw; display: flex; gap: 1.2cqw; }
.m-btn { background: #7a4a22; color: #fff; font-size: 1.6cqw; font-weight: 500; padding: 1.1cqw 2cqw; }
.m-btn-2 { background: #e8dfd0; color: #2a2119; }
.m-hero img { width: 100%; aspect-ratio: 1 / 0.84; object-fit: cover; }
.m-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; padding: 2.4cqw 3.2cqw 2.8cqw; font-size: 1.6cqw; }
.m-list p { display: flex; justify-content: space-between; background: #ece4d6; padding: 1.2cqw 1.6cqw; }

/* Pricing: a large table */
.pricing { padding: var(--section) var(--m) 0; }
.plans { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plans col { width: auto; }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 20px var(--gap); font-weight: 400; }
.plans thead th { vertical-align: bottom; padding-top: 32px; padding-bottom: 32px; }
.plans thead th:first-child { width: 25%; vertical-align: top; padding-left: 0; }
.plans tbody th { font-weight: 500; padding-left: 0; }
.plans h2 { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.plan-name { display: block; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; }
.plan-price { display: block; font-size: var(--step-head); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; margin-top: 6px; white-space: nowrap; }
.plan-from { display: block; margin-top: 14px; }
.plan-month { display: block; margin-top: 10px; }
.plan-rec { display: block; margin-top: 4px; font-weight: 500; }
.plans tbody tr:nth-child(odd) { background: var(--surface); }
.plans tbody tr.actions { background: transparent; }
.plans .rec { background: var(--accent); color: var(--accent-ink); }
.plans tbody tr:nth-child(odd) .rec { background: var(--accent-step); }
.plans tbody tr.actions .rec { background: var(--accent); }
.plans .no { color: var(--muted); }
.plans .rec.no { color: var(--accent-soft); }
.plans tr.actions td, .plans tr.actions th { padding-top: 28px; padding-bottom: 32px; vertical-align: middle; }
.note { color: var(--muted); font-weight: 400; }
.plans-stack { display: none; }

/* About */
.about { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.about h2 { grid-column: 1 / span 4; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.about-text { grid-column: 6 / -1; }
.lead-big { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; max-width: 26ch; }
.about-text p + p { margin-top: 24px; max-width: 42ch; }

/* FAQ */
.faq { padding: var(--section) var(--m) clamp(96px, 9vw, 150px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.faq .section-title { grid-column: 1 / span 6; margin-bottom: 56px; }
.faq dl { grid-column: 1 / -1; display: grid; row-gap: clamp(48px, 5.5vw, 84px); }
.qa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: baseline; }
.qa dt { grid-column: 1 / span 6; font-size: var(--step-lead); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.qa dd { grid-column: 8 / -1; max-width: 42ch; line-height: 1.55; }

/* Contact and close */
.contact {
  background: var(--field-ink);
  color: var(--field-ink-text);
  min-height: 72svh;
  padding: var(--m);
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 48px;
}
.contact-top { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; flex-wrap: wrap; }
.contact h2 { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.contact-top p { font-size: var(--step-lead); max-width: 26ch; line-height: 1.3; letter-spacing: -0.015em; }
.email {
  align-self: end;
  display: block;
  font-size: 7.1vw;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4vh;
  transition: color 0.25s var(--ease);
}
.email:hover { color: var(--accent-soft); }
.email:focus-visible { outline-color: var(--accent-soft); }
.contact-foot { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: var(--step-small); color: var(--field-ink-muted); }
.contact-foot p { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.contact-foot a { color: var(--field-ink-text); text-decoration: none; font-size: var(--step-body); }
.contact-foot a:hover { text-decoration: underline; }
.contact-foot p:first-child { align-items: baseline; }

/* Motion: entrances (content stays visible without script) */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }

/* Signature: the statement settles as the first screen leaves */
@supports (animation-timeline: scroll()) {
  .statement.in { animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes settle { from { scale: 1; } to { scale: 0.93; } }
}

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .statement.in { animation: none; }
  .mock, .button, .toggle button { transition: none; }
}

/* Tablet */
@media (max-width: 1080px) {
  .example-text { grid-column: 1 / -1; position: static; }
  .example-figure { grid-column: 1 / -1; }
  .example-text p { max-width: 48ch; }
  .plans thead th:first-child { width: 22%; }
  .plan-price { font-size: clamp(1.6rem, 0.8rem + 2.4vw, 2.4rem); }
}

/* Phone */
@media (max-width: 760px) {
  :root { --step-display: 9.6vw; }
  .links .wide { display: none; }
  .hero { min-height: 0; grid-template-rows: auto auto auto; padding-bottom: 40px; }
  .statement { padding-bottom: 0; align-self: start; margin-top: 18vh; }
  .hero-foot { margin-top: 20px; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-foot .button { width: 100%; text-align: center; }

  .stair { row-gap: 40px; }
  .stair li:nth-child(n) { grid-column: 1 / -1; }
  .stair li:nth-child(2) { padding-left: 6vw; }
  .stair li:nth-child(3) { padding-left: 12vw; }
  .stair li:nth-child(4) { padding-left: 18vw; }
  .stair h3 { font-size: 7.6vw; }

  .plans { display: none; }
  .devices { grid-template-columns: 1fr; }
  .phone { display: none; }
  .plans-stack { display: grid; gap: 20px; }
  .plans-stack .section-title { margin-bottom: 12px; }
  .plan { background: var(--surface); padding: 24px 20px; }
  .plan.rec { background: var(--accent); color: var(--accent-ink); }
  .plan h3 { font-weight: 600; }
  .plan .plan-name { font-size: var(--step-lead); }
  .plan .plan-price { font-size: 9vw; margin-top: 4px; }
  .plan .plan-month { margin-top: 8px; }
  .plan dl { margin-top: 20px; display: grid; gap: 4px; }
  .plan dt { color: var(--muted); margin-top: 12px; }
  .plan-incl { margin-top: 20px; font-weight: 500; }
  .plan-incl + dl { margin-top: 4px; }
  .plan.rec dt { color: var(--accent-soft); }
  .plan .button { display: block; text-align: center; margin-top: 24px; }

  .about h2, .about-text { grid-column: 1 / -1; }
  .about-text { margin-top: 28px; }

  .faq .section-title { grid-column: 1 / -1; margin-bottom: 40px; }
  .faq dl { row-gap: 44px; }
  .qa dt, .qa dd { grid-column: 1 / -1; }
  .qa dd { margin-top: 12px; }

  .contact { min-height: 80svh; }
  .email { font-size: 8.6vw; white-space: normal; line-height: 1.05; }
  .contact-foot { flex-direction: column; }
}