/* ==========================================================================
   PageFairy — style-v4.css
   Token-driven successor to style.css. Every legacy class name still resolves,
   so existing pages keep rendering; the values behind them are now tokens.
   Brand pink is #ff7096 throughout.
   ========================================================================== */

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Oleo+Script:wght@700&family=Quicksand:wght@500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand */
  --pf-pink:         #ff7096;
  --pf-pink-hover:   #ff5a85;
  --pf-pink-deep:    #f0447f;   /* gradient end + pressed states */
  --pf-pink-tint:    #ffe4ec;
  --pf-pink-tint-2:  #ffd5e0;
  --pf-pink-wash:    #fff5f8;
  --pf-blush:        #ffe7ef;   /* blurred hero glow (from v2) */
  --pf-slate:        #f1f5f9;   /* page base, matches login */

  --pf-gradient-pink: linear-gradient(135deg, #ff7096, #f0447f);
  --pf-gradient-wash: radial-gradient(ellipse 60% 55% at 50% 0%, #ffe4ec 0%, transparent 70%);
  --pf-gradient-text: linear-gradient(135deg, #ff7096 0%, #f0447f 100%);

  /* Neutrals */
  --pf-ink:         #0f172a;
  --pf-body:        #334155;
  --pf-muted:       #475569;
  --pf-subtle:      #64748b;
  --pf-faint:       #6b7280;
  --pf-placeholder: #94a3b8;

  --pf-bg:        #fffefb;
  --pf-surface:   #ffffff;
  --pf-surface-2: #f8f8f8;
  --pf-border:    #e5e7eb;
  --pf-border-2:  #f1f1f1;
  --pf-border-3:  #e2e8f0;

  /* Fluid type — one clamp() replaces the old min-width:768px pairs */
  --pf-text-xs:   0.75rem;
  --pf-text-sm:   0.875rem;
  --pf-text-base: 1rem;
  --pf-text-lg:   clamp(1rem,    0.94rem + 0.31vw, 1.125rem);
  --pf-text-xl:   clamp(1.125rem,1.06rem + 0.31vw, 1.25rem);
  --pf-text-2xl:  clamp(1.5rem,  1.35rem + 0.75vw, 1.875rem);
  --pf-text-4xl:  clamp(2.25rem, 1.75rem + 2.2vw, 3.25rem);

  --pf-tracking-tight: -0.03em;
  --pf-leading-tight:  1.1;
  --pf-leading-body:   1.65;

  /* Space */
  --pf-space-1: 0.25rem;
  --pf-space-2: 0.5rem;
  --pf-space-3: 0.75rem;
  --pf-space-4: 1rem;
  --pf-space-6: 1.5rem;
  --pf-space-8: 2rem;
  --pf-space-12: 3rem;

  /* Radius */
  --pf-radius-sm:   0.625rem;
  --pf-radius:      0.875rem;
  --pf-radius-lg:   1.25rem;
  --pf-radius-xl:   1.5rem;
  --pf-radius-full: 9999px;

  /* Elevation — layered, pink-tinted rather than grey */
  --pf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(255, 112, 150, 0.06);
  --pf-shadow:    0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(255, 112, 150, 0.10);
  --pf-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(255, 112, 150, 0.16);
  --pf-shadow-pink:       0 6px 18px rgba(255, 112, 150, 0.35);
  --pf-shadow-pink-hover: 0 10px 26px rgba(255, 112, 150, 0.45);

  --pf-ring: 0 0 0 4px rgba(255, 112, 150, 0.20);

  --pf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pf-transition: 180ms var(--pf-ease);

  /* Fonts */
  --pf-font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --pf-font-heading: 'DM Sans', var(--pf-font-body);
  --pf-font-ui:      'Quicksand', var(--pf-font-body);
  --pf-font-logo:    'Oleo Script', cursive;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--pf-font-body);
  color: var(--pf-body);
  background-color: var(--pf-bg);
  line-height: var(--pf-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* One visible focus ring for every interactive element — the old sheet styled
   :focus on inputs only, leaving links and buttons with the UA default. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pf-pink);
  outline-offset: 3px;
  border-radius: var(--pf-radius-sm);
}

::selection { background: var(--pf-pink-tint); color: var(--pf-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography
   Only font-family keeps !important — it has to win against Tailwind's
   font-* utilities. Size, weight and color are now overridable.
   -------------------------------------------------------------------------- */
.logo-font {
  font-family: var(--pf-font-logo) !important;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--pf-ink);
  text-decoration: none;
  line-height: 1.1;
  transition: color var(--pf-transition);
}
.logo-font:hover { color: var(--pf-pink-deep); }

.heading-primary {
  font-family: var(--pf-font-heading) !important;
  font-weight: 700;
  font-size: var(--pf-text-4xl);
  line-height: var(--pf-leading-tight);
  letter-spacing: var(--pf-tracking-tight);
  color: var(--pf-ink);
  margin: 0;
  text-wrap: balance;
}

.heading-secondary {
  font-family: var(--pf-font-heading) !important;
  font-weight: 700;
  font-size: var(--pf-text-2xl);
  line-height: 1.2;
  letter-spacing: var(--pf-tracking-tight);
  color: var(--pf-ink);
  margin: 0;
  text-wrap: balance;
}

.heading-tertiary {
  font-family: var(--pf-font-heading) !important;
  font-weight: 700;
  font-size: var(--pf-text-xl);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--pf-ink);
  margin: 0;
}

.subheading {
  font-family: var(--pf-font-ui) !important;
  font-weight: 500;
  font-size: var(--pf-text-lg);
  color: var(--pf-muted);
  margin: 0;
  text-wrap: pretty;
}

.text-meta { font-size: var(--pf-text-xs); color: var(--pf-faint); }

.pink-accent { color: var(--pf-pink); }

/* Gradient wordmark for the one or two words that carry the headline */
.pink-gradient {
  background: var(--pf-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pf-pink);   /* fallback where background-clip is unsupported */
}

/* Link with an underline that wipes in from the left on hover */
.link-pink {
  color: var(--pf-pink-deep);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(var(--pf-pink), var(--pf-pink));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--pf-transition);
  padding-bottom: 1px;
}
.link-pink:hover { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.pf-container {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: var(--pf-space-6);
}
.pf-container-wide { max-width: 72rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--pf-space-4) var(--pf-space-6);
  border-bottom: 1px solid rgba(22, 34, 76, 0.05);
  background-color: rgba(241, 245, 249, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@supports not (backdrop-filter: blur(8px)) {
  .site-header { background-color: var(--pf-slate); }
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-4);
  max-width: 48rem;
  margin-inline: auto;
}
.site-nav-links { display: flex; align-items: center; gap: var(--pf-space-6); }

/* Top-of-page nav links. Distinct from .app-nav-link, which is the sidebar
   style — its padding and inset left bar only read right in a vertical rail. */
.nav-link {
  position: relative;
  font-family: var(--pf-font-ui);
  font-weight: 600;
  font-size: var(--pf-text-sm);
  color: var(--pf-muted);
  text-decoration: none;
  transition: color var(--pf-transition);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--pf-gradient-pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pf-transition);
}
.nav-link:hover { color: var(--pf-ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current='page'] { color: var(--pf-pink-deep); font-weight: 700; }
.nav-link[aria-current='page']::after { transform: scaleX(1); }
.nav-link { white-space: nowrap; }

/* Phones: text links live in the footer, so the header keeps logo + CTA only */
@media (max-width: 36rem) {
  .site-nav-links .nav-link { display: none; }
}

.site-footer {
  border-top: 1px solid var(--pf-border-3);
  padding: var(--pf-space-8) var(--pf-space-6);
  text-align: center;
  font-size: var(--pf-text-xs);
  color: var(--pf-faint);
  background-color: var(--pf-surface);
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--pf-transition);
}
.site-footer a:hover { color: var(--pf-pink-deep); }

/* Slim homepage footer: copyright left, social icons right, slate to match
   the hero and login. Add .footer-bar next to .site-footer to use it. */
.footer-bar {
  background-color: var(--pf-slate);
  border-top: 0;
  text-align: left;
}
.footer-bar-inner {
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-4);
}
.footer-copy {
  margin: 0;
  font-family: var(--pf-font-ui);
  font-weight: 600;
  font-size: var(--pf-text-sm);
  color: var(--pf-subtle);
}
.footer-social { display: flex; align-items: center; gap: 1.25rem; }
.footer-social a { color: var(--pf-placeholder); }
.footer-social a:hover { color: var(--pf-pink-deep); }
.footer-social svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 30rem) {
  .footer-bar-inner { flex-direction: column; text-align: center; }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-space-6);
  font-family: var(--pf-font-ui);
  font-weight: 600;
}

.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Soft blush glow behind a hero, painted with a pseudo-element so it never
   affects layout or intercepts clicks */
.section-glow { position: relative; isolation: isolate; }
.section-glow::before {
  content: '';
  position: absolute;
  inset: -20% 0 auto;
  height: 32rem;
  background: var(--pf-gradient-wash);
  z-index: -1;
  pointer-events: none;
}

.stack > * + * { margin-top: var(--pf-space-4); }
.stack-lg > * + * { margin-top: var(--pf-space-6); }
.measure { max-width: 34rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Buttons
   The old .btn-pink set two colors, so every page re-declared padding and
   radius in utilities. .btn now owns the shape.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-2);
  padding: 0.8125rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-full);
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: var(--pf-text-sm);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--pf-transition), box-shadow var(--pf-transition),
              background-color var(--pf-transition), border-color var(--pf-transition),
              color var(--pf-transition);
}
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-pink {
  background-color: var(--pf-pink);
  background-image: var(--pf-gradient-pink);
  color: #ffffff;
  box-shadow: var(--pf-shadow-pink);
}
.btn-pink:hover {
  background-color: var(--pf-pink-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--pf-shadow-pink-hover);
}
.btn-pink:active { transform: translateY(0); box-shadow: var(--pf-shadow-sm); }

.btn-ghost {
  background-color: var(--pf-surface);
  border-color: var(--pf-border);
  color: var(--pf-ink);
  box-shadow: var(--pf-shadow-xs);
}
.btn-ghost:hover {
  border-color: var(--pf-pink-tint-2);
  background-color: var(--pf-pink-wash);
  transform: translateY(-2px);
  box-shadow: var(--pf-shadow-sm);
}

.btn-sm { padding: 0.5625rem 1.125rem; font-size: var(--pf-text-xs); }
.btn-lg { padding: 1rem 2.25rem; font-size: var(--pf-text-base); }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   6. Surfaces
   style.css had four overlapping card classes. They now share one base.
   -------------------------------------------------------------------------- */
.card, .surface-card, .panel-card, .setting-row {
  background-color: var(--pf-surface);
  border: 1px solid var(--pf-border-2);
  border-radius: var(--pf-radius-lg);
}
.surface-card { border-color: var(--pf-border); border-radius: var(--pf-radius); }
.panel-card   { box-shadow: var(--pf-shadow); }

.card-lift { transition: transform var(--pf-transition), box-shadow var(--pf-transition); }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--pf-shadow-lg); }

.setting-row {
  border-radius: var(--pf-radius);
  padding: var(--pf-space-4) 1.25rem;
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
}
.setting-row:hover {
  border-color: var(--pf-pink-tint-2);
  box-shadow: var(--pf-shadow-sm);
}

.card-pad { padding: clamp(1.5rem, 4vw, 2.5rem); }

.glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,228,236,0.5));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--pf-radius-xl);
  box-shadow: var(--pf-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.8);
}
/* Without backdrop-filter the gradient alone is nearly invisible */
@supports not (backdrop-filter: blur(20px)) {
  .glass-card { background: var(--pf-surface); }
}

.bg-surface { background-color: var(--pf-surface-2); }

.divider-soft {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--pf-pink-tint-2), transparent);
  margin: var(--pf-space-2) 0;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--pf-space-2); }

.field-label {
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink);
}

.auth-input, .input-pink {
  width: 100%;
  padding: 0.9375rem var(--pf-space-4);
  border: 1px solid var(--pf-border);
  background-color: var(--pf-surface-2);
  border-radius: var(--pf-radius-sm);
  font-family: var(--pf-font-ui);
  font-weight: 500;
  font-size: var(--pf-text-base);
  color: var(--pf-ink);
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition),
              background-color var(--pf-transition);
}
.auth-input::placeholder, .input-pink::placeholder { color: var(--pf-placeholder); }

.auth-input:hover, .input-pink:hover { border-color: var(--pf-pink-tint-2); }

.auth-input:focus, .input-pink:focus {
  outline: none;
  border-color: var(--pf-pink);
  background-color: var(--pf-surface);
  box-shadow: var(--pf-ring);
}
.auth-input:disabled, .input-pink:disabled { opacity: 0.6; cursor: not-allowed; }

/* Flags a field only once the user has filled it in and left it invalid */
.auth-input:user-invalid, .input-pink:user-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}

.field-hint  { font-size: var(--pf-text-xs); color: var(--pf-faint); }
.field-error { font-size: var(--pf-text-xs); color: #b91c1c; font-weight: 600; }

/* Email + button that sit flush on one line, stacking on small screens */
.input-group { display: flex; flex-wrap: wrap; gap: var(--pf-space-3); }
.input-group > .auth-input { flex: 1 1 14rem; }

.toggle-pink:checked {
  background-color: var(--pf-pink);
  border-color: var(--pf-pink);
  --tglbg: #ffffff;
}

/* --------------------------------------------------------------------------
   8. Components
   -------------------------------------------------------------------------- */
.step-num {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--pf-radius-full);
  background-image: var(--pf-gradient-pink);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pf-font-heading);
  font-weight: 700;
  font-size: var(--pf-text-base);
  line-height: 1;
  box-shadow: var(--pf-shadow-pink), 0 0 0 6px var(--pf-pink-wash);
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--pf-radius-sm);
  background-color: var(--pf-pink-tint);
  color: var(--pf-pink-deep);
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--pf-radius-full);
  background-color: var(--pf-pink-tint);
  color: var(--pf-pink-deep);
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: var(--pf-text-xs);
  letter-spacing: 0.01em;
}

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--pf-space-3); }
.feature-list li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-family: var(--pf-font-ui);
  font-weight: 500;
  color: var(--pf-body);
}
.feature-list li::before {
  content: '✓';
  color: var(--pf-pink);
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.4;
}

.empty-state {
  background-color: var(--pf-surface);
  border: 2px dashed var(--pf-pink-tint-2);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-12) var(--pf-space-8);
  text-align: center;
}
.empty-state-icon {
  width: 5rem; height: 5rem;
  border-radius: var(--pf-radius-full);
  background: linear-gradient(135deg, var(--pf-pink-tint), var(--pf-surface));
  border: 1px solid var(--pf-pink-tint-2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--pf-space-6);
  color: var(--pf-pink-deep);
}

/* Hero: slate base (matches login) with dot grain, plus a soft blurred blush
   glow behind the content. Put this on the outer <section> and keep
   .pf-container on an inner div so the base spans the full width. */
.section-blush {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--pf-slate);
  background-image: radial-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.section-blush > .pf-container { position: relative; }
.section-blush > .pf-container::before {
  content: '';
  position: absolute;
  inset: -4rem -6rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 180, 0.34), rgba(255, 231, 239, 0.6) 55%, transparent 100%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
/* Soft white light from the top edge, gives the slate a little lift */
.section-blush::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%);
  z-index: -2;
  pointer-events: none;
}
.section-blush .badge {
  background-color: var(--pf-surface);
  border: 1px solid rgba(255, 112, 150, 0.3);
}
.section-blush .auth-input { background-color: var(--pf-surface); }
.section-blush .divider-soft {
  background: linear-gradient(90deg, transparent, var(--pf-pink), transparent);
  opacity: 0.35;
}

/* Three inline trust points under the CTA (from v2). Always one line:
   everything is sized in em off a font-size that shrinks with the viewport,
   so the whole row scales down together instead of wrapping. */
.trust-row {
  list-style: none;
  padding: 0;
  margin-inline: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2.25em;
  font-family: var(--pf-font-ui);
  font-weight: 600;
  font-size: min(0.75rem, 2.1vw);
  color: var(--pf-muted);
}
.trust-row li { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.trust-row svg { width: 1.33em; height: 1.33em; color: var(--pf-pink); flex-shrink: 0; }

/* ---- Homepage hero ---- */
.hero {
  min-height: calc(100svh - 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* stops the one-line title stretching the column */
  align-items: center;
}

/* One line at every width. The headline is about 10.9em wide in DM Sans, so
   the size is the space inside the container divided by 11.4, capped at 4.5rem.
   The hero column is widened to 56rem so the full 4.5rem size fits. */
.hero > .pf-container { max-width: 56rem; }
.hero-title {
  font-size: min(4.5rem, calc((100vw - 3rem) / 11.4));
  line-height: 1.05;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* Live dot inside the beta badge */
.badge-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--pf-radius-full);
  background-color: var(--pf-pink);
  flex-shrink: 0;
}
.badge-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--pf-pink);
  animation: pf-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pf-ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Email and button inside one glass pill, same glass as the login card */
.waitlist-pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 30rem;
  margin-inline: auto;
  padding: 0.375rem;
  border-radius: var(--pf-radius-full);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 228, 236, 0.55));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--pf-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: box-shadow var(--pf-transition);
}
.waitlist-pill:focus-within { box-shadow: var(--pf-ring), var(--pf-shadow-lg); }

.waitlist-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 1.125rem;
  border: 0;
  background: transparent;
  font-family: var(--pf-font-ui);
  font-weight: 500;
  font-size: var(--pf-text-base);
  color: var(--pf-ink);
}
.waitlist-input::placeholder { color: var(--pf-placeholder); }
.waitlist-input:focus, .waitlist-input:focus-visible { outline: none; }

@media (max-width: 30rem) {
  .waitlist-pill {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
    border-radius: var(--pf-radius-xl);
  }
  .waitlist-input { text-align: center; }
}

/* ---- Contact page ---- */
/* Same scale as the homepage headline, for short titles that never wrap */
.page-title {
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.contact-list {
  max-width: 28rem;
  margin-inline: auto;
  display: grid;
  gap: var(--pf-space-3);
  text-align: left;
}

/* Glass cards, same material as the homepage waitlist pill */
.contact-card {
  display: flex;
  align-items: center;
  gap: var(--pf-space-4);
  padding: 1.125rem 1.25rem;
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 228, 236, 0.45));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--pf-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
}
.contact-card:hover {
  border-color: var(--pf-pink-tint-2);
  box-shadow: var(--pf-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.contact-card .section-icon svg { width: 1.25rem; height: 1.25rem; }

.contact-card-title {
  display: block;
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink);
}
.contact-card-text { display: block; font-size: var(--pf-text-sm); color: var(--pf-muted); }

.contact-card-arrow {
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--pf-placeholder);
  transition: color var(--pf-transition);
}
.contact-card:hover .contact-card-arrow { color: var(--pf-pink-deep); }

.contact-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-2);
  font-family: var(--pf-font-ui);
  font-weight: 600;
  font-size: var(--pf-text-xs);
  color: var(--pf-subtle);
}
.contact-note svg { width: 1rem; height: 1rem; color: var(--pf-pink); flex-shrink: 0; }

/* ---- How it works page ---- */
.steps {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: grid;
  gap: 1.25rem;
}
/* Same glass material as the contact cards and the waitlist pill */
.step {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 228, 236, 0.45));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--pf-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
}
.step-text { font-size: 0.9375rem; }

/* ---- FAQ page ---- */
.faq-list {
  max-width: 36rem;
  margin-inline: auto;
  display: grid;
  gap: var(--pf-space-3);
  text-align: left;
}
/* Same glass material as the contact cards and step cards */
.faq-item {
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 228, 236, 0.45));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--pf-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
}
.faq-item:hover { border-color: var(--pf-pink-tint-2); }
.faq-item[open] { box-shadow: var(--pf-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-4);
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: var(--pf-text-base);
  color: var(--pf-ink);
  border-radius: var(--pf-radius-lg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--pf-pink-deep); }

.faq-chevron {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--pf-placeholder);
  transition: transform var(--pf-transition), color var(--pf-transition);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--pf-pink-deep); }

.faq-answer {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--pf-muted);
}

/* ---- Pricing page ---- */
.price-grid {
  display: grid;
  gap: var(--pf-space-6);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  max-width: 44rem;
  margin-inline: auto;
  align-items: stretch;
}

/* Same glass material as the contact, step, and FAQ cards */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  text-align: left;
  border-radius: var(--pf-radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 228, 236, 0.45));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--pf-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.price-card-featured {
  border-color: var(--pf-pink);
  box-shadow: var(--pf-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.price-tag {
  position: absolute;
  top: -0.75rem;
  left: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--pf-radius-full);
  background-color: var(--pf-pink);
  color: #fff;
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: 0.6875rem;
}

.price-name {
  margin: 0;
  font-family: var(--pf-font-ui);
  font-weight: 700;
  font-size: var(--pf-text-lg);
  color: var(--pf-ink);
}
.price-blurb { margin: 0.25rem 0 0; font-size: var(--pf-text-sm); color: var(--pf-muted); }

.price-amount {
  margin: var(--pf-space-6) 0 0;
  font-family: var(--pf-font-ui);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--pf-ink);
}
.price-unit {
  font-size: var(--pf-text-base);
  font-weight: 600;
  color: var(--pf-muted);
  letter-spacing: normal;
}
.price-sub { margin: var(--pf-space-2) 0 0; font-size: var(--pf-text-xs); color: var(--pf-subtle); }

.price-features {
  list-style: none;
  padding: 0;
  margin: var(--pf-space-6) 0 var(--pf-space-8);
  display: grid;
  gap: var(--pf-space-3);
  font-size: var(--pf-text-sm);
  color: var(--pf-muted);
}
.price-features li { display: flex; gap: var(--pf-space-2); align-items: flex-start; }
.price-features svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  color: var(--pf-pink);
}

/* Pins every card's button to the bottom so they line up across the row */
.price-cta { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. App shell (sidebar context only)
   -------------------------------------------------------------------------- */
.app-sidebar {
  background-color: var(--pf-surface);
  border-right: 1px solid var(--pf-border);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3);
  padding: var(--pf-space-3) var(--pf-space-4);
  border-radius: var(--pf-radius-sm);
  color: var(--pf-muted);
  font-family: var(--pf-font-ui);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--pf-transition), color var(--pf-transition);
}
.app-nav-link:hover { background-color: var(--pf-surface-2); color: var(--pf-ink); }
.app-nav-link.active,
.app-nav-link[aria-current='page'] {
  background-color: var(--pf-pink-tint);
  color: var(--pf-pink-deep);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--pf-pink);
}

.pf-tabs > .tab {
  color: var(--pf-subtle);
  font-family: var(--pf-font-ui);
  font-weight: 500;
  white-space: nowrap;
  --tab-bg: var(--pf-surface);
  --tab-border-color: var(--pf-border);
}
.pf-tabs > input.tab:checked { color: var(--pf-pink); }
.pf-tabs > .tab-content {
  background-color: var(--pf-surface);
  border-color: var(--pf-border);
}

/* --------------------------------------------------------------------------
   10. Utilities
   -------------------------------------------------------------------------- */
.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;
}
.text-center { text-align: center; }
.mt-2 { margin-top: var(--pf-space-2); }
.mt-4 { margin-top: var(--pf-space-4); }
.mt-6 { margin-top: var(--pf-space-6); }
.mt-8 { margin-top: var(--pf-space-8); }
.mt-12 { margin-top: var(--pf-space-12); }