/* Body type: Host Grotesk (open-licensed, SIL OFL), bundled with the site. Variable weight 300–800.
   Headings stay in Inter. */
@font-face {
  font-family: "Host Grotesk";
  src: url("/assets/fonts/host-grotesk.woff") format("woff");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Round Peg. — roundpeg.fit
   --accent is set per session by the inline script in <head>. */

:root {
  --accent: #67E659;
  --head: "Host Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Host Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --black: #000;
  --white: #fff;
  --wrap: 1120px;
  /* One spacing unit for the whole site: page margins, gaps, padding and bars all use it.
     Larger spaces are multiples of it; tight pairs use half. */
  --g: clamp(20px, 3vw, 40px);
  --g2: calc(var(--g) / 2);
  --section: calc(var(--g) * 4);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--black); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

h1, h2, h3, .hero-tagline, .price { font-family: var(--head); }
h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--g) * 2);
  margin: 0 auto;
  padding: 0 var(--g);
}
.section { padding: var(--section) 0 0; }

/* Buttons */
.button {
  display: inline-block;
  padding: var(--g2) var(--g);
  border: 2px solid var(--black);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--black); color: var(--white); }
.button-dark { background: var(--black); color: var(--white); }
.button-dark:hover { background: var(--white); color: var(--black); }
.button-accent { background: var(--accent); border-color: var(--accent); color: var(--black); }
.button-accent:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.cta :focus-visible { outline-color: var(--white); }

/* Hero */
.hero {
  position: relative;
  background: var(--accent);
  min-height: 100vh; min-height: 100svh;   /* fills the first screen on any browser */
  display: flex; align-items: center;
  padding: calc(var(--g) * 2) 0;
}
/* Masthead (wordmark + tagline) sits at the top; the typed lines and buttons sit dead centre of the screen. */
.hero > .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100svh - var(--g) * 4); }
.hero-masthead { position: absolute; top: calc(var(--g) * 2); left: 0; right: 0; }
/* The typed lines and buttons travel together as one centred block; buttons sit flush right under the lines. */
.hero-center { display: flex; flex-direction: column; max-width: 100%; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--g2); margin-top: calc(var(--g) * 2); }
.pill.pill-outline { color: var(--black); background: transparent; box-shadow: inset 0 0 0 2px var(--black); text-decoration: none; }
.pill.pill-outline::after { content: "↓"; }
.pill.pill-outline:hover::after { transform: translateY(3px); }
.hero-mark img { width: clamp(170px, 22vw, 300px); }
.hero-tagline {
  margin-top: calc(var(--g2) * 0.5);   /* a tagline sits close to its wordmark */
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.015em;
}
.hero-cred {
  /* Sized so each typed line fits on one line; the block is centred, the lines share a left edge. */
  padding-top: calc(var(--g) * 3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: min(calc((100vw - var(--g) * 2) / 52), 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 820px) {
  /* Phones: one line per phrase would be too small to read, so let them wrap. */
  .hero-cred { font-size: 1.05rem; white-space: normal; max-width: 34ch; }
}
/* Hero call to action: black pill; the label ticks sideways on hover. */
.hero-cta {
  padding: var(--g2) 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cta-view { display: block; }
.cta-track { position: relative; display: block; white-space: nowrap; }
.cta-track > span { display: inline-block; padding: 0 var(--g); }
.cta-track > span:last-child { position: absolute; top: 0; left: 100%; }
.hero-cta:hover .cta-track,
.hero-cta:focus-visible .cta-track { animation: cta-tick 2.4s linear infinite; }
@keyframes cta-tick { to { transform: translateX(-100%); } }

/* DOS-style typing: lines type one after another; the ghost reserves the space so nothing shifts. */
.term { display: grid; margin: 0; }
.term + .term { margin-top: 0.6em; }
.term > * { grid-area: 1 / 1; }
.term > .sr-only { grid-area: auto; }
.term-ghost, .term-rest { visibility: hidden; }
.term-cursor {
  display: inline-block;
  width: 0.62em; height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--black);
  visibility: hidden;
}
.term-live .term-cursor { visibility: hidden; }
.term.is-active .term-live .term-cursor { visibility: visible; }
.term.is-idle .term-live .term-cursor { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inline wordmark: anywhere "Round Peg." appears in running text.
   Sized so its capitals match the surrounding cap height; takes the text colour. */
.wm {
  display: inline-block;
  height: 0.935em;
  aspect-ratio: 1281 / 228;
  vertical-align: -0.205em;
  background: currentColor;
  -webkit-mask: url("/assets/round-peg-wordmark.png") no-repeat center / contain;
          mask: url("/assets/round-peg-wordmark.png") no-repeat center / contain;
}

/* Before / after: drag to compare. The bar across the top splits with the slider:
   black "Default Circle" on the left, session-colour wordmark on the right. */
.ba {
  position: relative;
  margin-top: calc(var(--g) * 2);
  --pos: 50%;
  user-select: none;
  touch-action: pan-y;
}
.ba-bar { position: relative; height: calc(var(--g) * 1.4); overflow: hidden; }
.ba-bar-after, .ba-bar-before {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 var(--g2);
}
.ba-bar-after { background: var(--accent); color: var(--black); justify-content: flex-end; }
.ba-bar-before {
  background: var(--black); color: var(--white); justify-content: flex-start;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
/* Left: plain, generic type — deliberately "default". */
.ba-text { font-family: Arial, Helvetica, sans-serif; font-size: clamp(0.8rem, 1.3vw, 1rem); line-height: 1; white-space: nowrap; }
/* Right: "Circle with" + the wordmark, in the site's own type. */
.ba-after-text { font-size: clamp(0.85rem, 1.4vw, 1.1rem); font-weight: 500; line-height: 1; white-space: nowrap; }
.ba-stage { position: relative; overflow: hidden; }
.ba-after { width: 100%; }
.ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-before { width: 100%; height: 100%; object-fit: cover; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 4px; margin-left: -2px;
  background: var(--accent);
  pointer-events: none;
}
/* A round peg for a handle. */
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.2s ease;
}
.ba-knob::before, .ba-knob::after {
  content: ""; position: absolute; top: 50%; margin-top: -6px;
  border: 6px solid transparent;
}
.ba-knob::before { left: 7px; border-right-color: var(--black); border-left-width: 0; }
.ba-knob::after { right: 7px; border-left-color: var(--black); border-right-width: 0; }
.ba:hover .ba-knob, .ba.is-dragging .ba-knob { transform: scale(1.12); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.ba:has(.ba-range:focus-visible) { outline: 3px solid var(--black); outline-offset: 3px; }
.case {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--g2) var(--g); margin-top: var(--g2); color: var(--black);
}
.case a { color: var(--black); text-decoration: none; border-bottom: 2px solid var(--accent); white-space: nowrap; }

/* Pricing */
.pricing { padding-bottom: var(--section); }
.pricing-note { margin-top: var(--g2); color: var(--black); }
.tiers {
  margin: calc(var(--g) * 2) calc(var(--g) * -1) 0;   /* pulled out so card text lines up with the heading */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--g);
}
.tier { position: relative; display: flex; flex-direction: column; padding: var(--g); cursor: pointer; transition: background-color 0.2s ease; }
/* The highlight follows whichever package is ticked. */
.tier:has(.tier-radio:checked) { background: var(--accent); }
/* The invisible radio covers the whole card, so a click anywhere selects it. */
.tier-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* The selector: a round hole; ticking a card drops a round peg into it. */
.tier-check {
  position: relative; flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--black);
}
.tier-check::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--black);
  opacity: 0;
  transform: translateY(-34px) scale(0.7);
  transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), opacity 0.2s ease;
}
.tier:hover .tier-check::after { opacity: 0.25; transform: translateY(-14px) scale(0.85); }
.tier:has(.tier-radio:checked) .tier-check::after { opacity: 1; transform: none; }
.tier:has(.tier-radio:focus-visible) .tier-check { outline: 3px solid var(--black); outline-offset: 3px; }
.tier-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--g2); pointer-events: none; }
/* The pill only shows on the ticked card; it stays in the layout so nothing shifts. */
.tier .tier-go { visibility: hidden; pointer-events: auto; white-space: nowrap; font-size: 1rem; padding: var(--g2) calc(var(--g2) * 1.5); }
.tier:has(.tier-radio:checked) .tier-go { visibility: visible; }
.tier h3 { font-size: 1.3rem; font-weight: 700; }
.tier-pitch { margin-top: var(--g2); font-weight: 500; max-width: 26ch; }
.price { margin-top: var(--g); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.price span { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.setup { margin-top: 6px; font-size: 0.9rem; color: var(--black); }
.tier ul { list-style: none; padding: 0; margin: var(--g) 0; flex: 1; font-size: 0.95rem; }
.tier li + li { margin-top: 8px; }

/* Pill button, shared by "Let's get started" */
.pill {
  display: inline-block;
  padding: var(--g2) var(--g);
  border: 0; border-radius: 999px;
  background: var(--black); color: var(--white);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 500;
  transition: transform 0.15s ease;
}
.pill::after { content: "→"; display: inline-block; margin-left: 0.4em; transition: transform 0.25s ease; }
.pill:hover::after { transform: translateX(5px); }
.pill-accent { background: var(--accent); color: var(--black); }
.pill-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px var(--white); }
.pill-ghost::after { content: "↓"; }
.pill-ghost:hover::after { transform: translateY(3px); }
.pill-ghost[aria-expanded="true"]::after { transform: rotate(180deg); }

/* CTA */
.cta { background: var(--black); color: var(--white); padding: var(--section) 0; }
.cta h2 { max-width: 16ch; margin-bottom: calc(var(--g) * 2); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--g2); }

/* "See Round Peg in action": client logos slide open below the buttons. */
.in-action {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.45s ease;
}
.in-action.is-open { grid-template-rows: 1fr; opacity: 1; }
.in-action-inner {
  overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--g) calc(var(--g) * 2);
}
.in-action.is-open .in-action-inner { padding-top: calc(var(--g) * 2); }
.client-logo { display: block; color: var(--white); text-decoration: none; transition: opacity 0.2s ease; }
.client-logo:hover { opacity: 0.7; }
.client-logo img { height: clamp(48px, 6vw, 72px); width: auto; }

/* Footer */
.site-footer { background: var(--black); color: var(--white); font-size: 0.85rem; padding: 0 0 var(--g); }

/* Contact pop-up: colour masthead with the wordmark, then bold, ruled fields. */
.contact-dialog {
  width: min(760px, calc(100vw - var(--g) * 2));
  max-height: calc(100svh - var(--g) * 2);
  padding: 0; border: 0;
  overflow: auto;
  background: var(--white);
}
.contact-dialog::backdrop { background: rgba(0,0,0,.75); }
.form-head { position: relative; background: var(--accent); padding: calc(var(--g) * 2) var(--g) var(--g); }
.form-mark { width: 100%; height: auto; }
.form-head h2 { margin-top: var(--g); font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
.form-intro { margin-top: var(--g2); font-weight: 500; }
.dialog-close {
  position: absolute; top: var(--g2); right: var(--g2);
  width: 44px; height: 44px; border: 0; background: none;
  font-size: 2.2rem; line-height: 1;
}
.form-body { padding: var(--g); display: grid; gap: var(--g); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.field-row-3 { grid-template-columns: repeat(3, 1fr); }
.contact-form label, .three-words legend {
  display: grid; gap: 4px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.three-words { margin: 0; padding: 0; border: 0; min-width: 0; }
.three-words legend { display: block; padding: 0; margin-bottom: 4px; }
.optional { font-weight: 500; letter-spacing: 0.04em; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 8px 0 10px;
  border: 0; border-bottom: 2px solid var(--black); border-radius: 0;
  background: transparent;
  color: var(--black);
  font: inherit; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 500;
  letter-spacing: -0.005em; text-transform: none;
}
.contact-form select { appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.contact-form ::placeholder { color: var(--black); opacity: 0.3; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-bottom-width: 4px; padding-bottom: 8px;
}
.contact-form textarea { resize: vertical; min-height: 2.6em; }
.hp { position: absolute; left: -9999px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--g); margin-top: var(--g2); }
.form-submit { margin-left: auto; }
.form-status { font-weight: 700; }

/* Custom cursor: a solid circle — black on light and colour, session colour on black. */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor input:not([type="radio"]):not([type="range"]):not([type="checkbox"]),
  html.has-cursor textarea { cursor: text !important; }
}
.cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483647;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--black);
  pointer-events: none;
  transition: width .18s ease, height .18s ease, margin .18s ease, background-color .15s ease, opacity .15s ease;
}
.cursor.on-dark { background: var(--accent); }
.cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.cursor.is-hidden { opacity: 0; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .field-row { grid-template-columns: 1fr; }
  .field-row-3 { grid-template-columns: repeat(3, 1fr); gap: var(--g2); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .tier, .pill::after, .in-action, .tier-check::after, .ba-knob { transition: none; }
  .hero-cta:hover .cta-track, .hero-cta:focus-visible .cta-track { animation: none; }
  .term.is-idle .term-cursor { animation: none; }
}