/* Paper: ILVC Square V3 — white / yellow logo concept.
   Opt-in theme; the homepage markup and interactions are shared with V1. */
html[data-theme="v2"] {
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-text: #0a0a0a;
  --color-muted: #666666;
  --color-primary: #ff4d57;
  --color-success: #0a0a0a;
  --color-border: rgb(10 10 10 / 20%);
  --highlight: #f4ff3d;
  color-scheme: light;
  --ink: var(--color-canvas);
  --surface: var(--color-surface);
  --paper: var(--color-text);
  --muted: var(--color-muted);
  --coral: var(--color-primary);
  --coral-strong: var(--color-primary);
  --mint: var(--color-success);
  --line: var(--color-border);
}

html[data-theme="v2"] body::before {
  background: var(--ink);
}

html[data-theme="v2"] :is(.mini-mark, .availability, .eyebrow, .logo-domain,
  .pricing-kicker, .pricing-action, .confirmation-status, .confirmation-action,
  .topics, .site-footer) {
  font-family: var(--font-mono);
}

html[data-theme="v2"] .site-header { min-height: 5.5rem; }
html[data-theme="v2"] .mini-mark { font-weight: 700; letter-spacing: 0.08em; }
html[data-theme="v2"] .availability::before {
  background: var(--mint);
  box-shadow: 0 0 0 0.3rem rgb(129 221 183 / 8%);
}
html[data-theme="v2"] main { padding-top: clamp(3rem, 6vw, 5rem); }
html[data-theme="v2"] .hero { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
html[data-theme="v2"] .eyebrow { color: var(--mint); font-size: 0.75rem; }
html[data-theme="v2"] .eyebrow::before,
html[data-theme="v2"] .eyebrow::after { background: var(--line); width: 2.5rem; }
html[data-theme="v2"] .logo { gap: clamp(0.6rem, 1.4vw, 1.2rem); }
html[data-theme="v2"] .logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.065em;
}
html[data-theme="v2"] .logo-word--vibe {
  background: var(--highlight);
  color: var(--paper);
  padding: 0.12em 0.2em 0.18em;
  border-radius: 0.14em;
  transform: rotate(-1.5deg);
  -webkit-text-fill-color: currentColor;
}
html[data-theme="v2"] .logo-heart { filter: none; }
html[data-theme="v2"] .logo-heart path { stroke-width: 5; }
html[data-theme="v2"] h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.04;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
html[data-theme="v2"] .intro { line-height: 1.6; }
html[data-theme="v2"] .waitlist :is(.formkit-input, .formkit-submit) {
  font-family: var(--font-mono) !important;
}
html[data-theme="v2"] .waitlist .formkit-input {
  background: var(--surface) !important;
  padding-inline: 1.5rem !important;
}
html[data-theme="v2"] .waitlist-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--paper);
  border: 2px solid var(--paper);
  font: 700 0.875rem/1.5 var(--font-mono);
  text-decoration: none;
}
html[data-theme="v2"] .pricing {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  background: transparent;
}
html[data-theme="v2"] .pricing-heading { padding-inline: 0; }
html[data-theme="v2"] .pricing-track { gap: 1.25rem; }
html[data-theme="v2"] .pricing-card {
  height: auto;
  min-height: 27rem;
  gap: 2rem;
  flex: 1 1 0;
  min-width: 0;
}
html[data-theme="v2"] .pricing-card--featured {
  flex-grow: 1.18;
  min-height: 29rem;
  padding: 2rem;
  background: var(--highlight);
}
html[data-theme="v2"] .pricing-card--featured .pricing-kicker { color: var(--mint); }
html[data-theme="v2"] .pricing-badge { margin-bottom: 1rem; }
html[data-theme="v2"] .pricing-card h3 { line-height: 1.12; }
html[data-theme="v2"] .price strong { font-size: 2.75rem; }
html[data-theme="v2"] .pricing-features li:first-child { border-top: 0; }
html[data-theme="v2"] .carousel-navigation { padding-inline: 0; }
html[data-theme="v2"] .expectations { padding-block: 3rem 1rem; }
html[data-theme="v2"] .topics { font-size: 0.75rem; }
html[data-theme="v2"] .site-footer { min-height: 5.5rem; color: var(--muted); }
html[data-theme="v2"] :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 5px;
}
html[data-theme="v2"][data-confirmed="true"] .confirmation h1 {
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
@media (max-width: 52rem) {
  html[data-theme="v2"] .pricing-card,
  html[data-theme="v2"] .pricing-card--featured {
    flex: 0 0 min(22.5rem, calc(100vw - 3.5rem));
    min-height: 29rem;
    padding: 1.5rem;
  }
}
@media (max-width: 34rem) {
  html[data-theme="v2"] .site-header { min-height: 4.8rem; }
  html[data-theme="v2"] .hero { min-height: auto; }
  html[data-theme="v2"] .eyebrow { font-size: 0.65rem; }
}

html[data-theme="v2"] .mini-heart { color: var(--coral); }
html[data-theme="v2"] .logo {
  gap: clamp(0.5rem, 1.1vw, 1rem);
}
html[data-theme="v2"] .logo-word { font-size: clamp(2.5rem, 6.6vw, 6.7rem); }
html[data-theme="v2"] .logo-domain { color: var(--muted); }
html[data-theme="v2"] .logo-i { font-family: var(--font-display); }
html[data-theme="v2"] .pricing-card {
  background: var(--surface);
  border: 2px solid var(--paper);
  border-radius: 2rem;
}
html[data-theme="v2"] .pricing-card--featured { background: var(--highlight); }
html[data-theme="v2"] :is(.pricing-label, .pricing-kicker) { color: var(--paper); }
html[data-theme="v2"] .pricing-badge { background: var(--paper); color: var(--ink); }
html[data-theme="v2"] .pricing-action { border: 2px solid var(--paper); }
html[data-theme="v2"] .pricing-action:hover { background: var(--highlight); }
html[data-theme="v2"] .pricing-card--featured .pricing-action { background: var(--paper); color: var(--ink); }
html[data-theme="v2"] .pricing-card--featured .pricing-action:hover { background: #333; }
html[data-theme="v2"] .waitlist .formkit-submit {
  background: var(--highlight) !important;
  border: 2px solid var(--paper) !important;
  color: var(--paper) !important;
}
html[data-theme="v2"] .waitlist .formkit-submit:hover { background: #e5f02d !important; }
html[data-theme="v2"] .waitlist .formkit-input { border: 2px solid var(--paper) !important; }
html[data-theme="v2"] .confirmation-step { background: var(--surface); }
html[data-theme="v2"] .confirmation-card { border: 2px solid var(--paper); }
html[data-theme="v2"] .confirmation-action--primary {
  background: var(--highlight); color: var(--paper); border: 2px solid var(--paper);
}
html[data-theme="v2"] .confirmation-check { border-color: var(--paper); background: var(--highlight); }
html[data-theme="v2"] .confirmation-step a { color: var(--paper); }
@media (max-width: 52rem) {
  html[data-theme="v2"] .logo-word { font-size: clamp(3rem, 14vw, 6rem); }
}

/* Topic teasers: paper notes beneath the main signup CTA. */
html[data-theme="v2"] .topic-notes {
  display: block;
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  text-align: left;
}
.topic-notes h2 {
  margin: 0 0 2.5rem;
  text-align: center;
  font: 700 clamp(1.5rem, 3vw, 2rem)/1.2 var(--font-display);
  letter-spacing: -0.035em;
}
.topic-notes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 1rem 0.75rem 1.5rem;
  list-style: none;
}
.topic-note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-height: 18rem;
  padding: 1.75rem 1.375rem 1.375rem;
  color: #0a0a0a;
  background: var(--note-color);
  box-shadow: 2px 5px 0 rgb(10 10 10 / 7%), 0 10px 18px rgb(10 10 10 / 7%);
  transform: rotate(var(--note-angle));
}
.topic-note::before {
  position: absolute;
  top: -0.625rem;
  left: calc(50% - 1.75rem);
  width: 3.5rem;
  height: 1.25rem;
  background: rgb(255 255 255 / 65%);
  border: 1px solid rgb(10 10 10 / 6%);
  transform: rotate(-6deg);
  content: "";
}
.topic-note--design { --note-color: #f4ff3d; --note-angle: -4deg; }
.topic-note--images { --note-color: #ffd6df; --note-angle: 3deg; }
.topic-note--search { --note-color: #dce8ff; --note-angle: -2deg; }
.topic-note--visibility { --note-color: #def0c3; --note-angle: 4deg; }
.topic-note-label {
  font: 700 0.625rem/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.topic-note h3 {
  margin: 0;
  font: 700 clamp(1.35rem, 2vw, 1.75rem)/1.08 var(--font-display);
  letter-spacing: -0.045em;
}
.topic-note p { margin: 0; font-size: 0.875rem; line-height: 1.55; }
.topic-note-footer {
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid rgb(10 10 10 / 20%);
  font: 400 0.625rem/1.6 var(--font-mono);
}
@media (max-width: 64rem) {
  .topic-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (max-width: 34rem) {
  .topic-notes-grid { grid-template-columns: 1fr; gap: 2rem; padding-inline: 1rem; }
  .topic-note { min-height: 16rem; padding: 1.75rem; }
  .topic-note h3 { font-size: 1.875rem; }
  .topic-note-label, .topic-note-footer { font-size: 0.6875rem; }
}