/* Quango, subset to Latin + common punctuation (tools/build-font.js).
   Preloaded by every page; swap = text is never invisible while it loads. */
@font-face {
  font-family: 'Quango';
  src: url('/assets/fonts/quango.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   insrc.co design system — one stylesheet for / (insrc) and /resrc/ (re:src).
   Both pages use the same components, type scale, spacing and radii. Only the
   colour tokens differ, set by the theme class on <html>:
     .theme-insrc  dark, red accent, white buttons
     .theme-resrc  mint off-white, green accent, green buttons
   Add new colours as tokens in BOTH themes, never as literals in components.
   ========================================================================== */

/* ====== SHARED TOKENS ====== */
:root {
  /* Radii: re:src's set (from the app), used everywhere. */
  --radius-input: 12px;
  --radius-card: 22px;
  --radius-pill: 999px;

  /* Type */
  --font-display: 'Quango', 'Inter Tight', sans-serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; /* app screen recreations only */
  --logo-size: 28px;
  --fs-hero: clamp(56px, 8vw, 128px);
  --fs-section: clamp(44px, 5.5vw, 84px);
  --fs-cta: clamp(48px, 6.5vw, 108px);
  --fs-h3: 32px;
  --fs-stat: 96px;
  --fs-lede: 19px;

  /* Layout */
  --container: 1400px;
  --gutter: 32px;
  --nav-pad: 20px;
  --nav-cta-w: 168px;
  --control-h: 40px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ====== THEMES (colour only) ====== */
.theme-insrc {
  color-scheme: dark;
  --bg: #0A0A0A;
  --fg: #FFFFFF;
  --fg-soft: rgba(255, 255, 255, 0.85);
  --muted: rgba(255, 255, 255, 0.55);
  --faint: rgba(255, 255, 255, 0.35);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #D62318;
  --link-hover: #D62318;
  --on-accent: #FFFFFF;
  --page-wash: none;
  --glow: transparent;
  --cta-glow: rgba(214, 35, 24, 0.08);


  --btn-bg: #FFFFFF;
  --btn-fg: #0A0A0A;
  --btn-hover-bg: #D62318;
  --btn-hover-fg: #FFFFFF;
  --btn-shadow: none;

  --card-bg: rgba(255, 255, 255, 0.025);
  --card-hover-bg: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-shadow: none;
  --card-filter: none;

  --featured-bg: #FFFFFF;
  --featured-fg: #0A0A0A;
  --featured-muted: rgba(10, 10, 10, 0.62);
  --featured-accent: #D62318;
  --featured-line: rgba(10, 10, 10, 0.12);
  --featured-btn-bg: #0A0A0A;
  --featured-btn-fg: #FFFFFF;
  --featured-btn-hover-bg: #D62318;
  --featured-shadow: none;

  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: rgba(255, 255, 255, 0.18);
  --field-focus: #D62318;
  --field-ring: rgba(214, 35, 24, 0.22);
  --placeholder: rgba(255, 255, 255, 0.3);
  --option-bg: #0A0A0A;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --slide-bg: #161616;
  --slide-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  --overlay: rgba(10, 10, 10, 0.55);

  --switch-bg: rgba(255, 255, 255, 0.07);
  --switch-border: rgba(255, 255, 255, 0.16);
  --switch-label: rgba(255, 255, 255, 0.62);
  --switch-label-on: #0A0A0A;
  --switch-label-hover: #FFFFFF;
  --switch-knob: #FFFFFF;
  --switch-knob-shadow: none;
  --switch-shadow: none;
  --focus: #FFFFFF;

  --status-border: rgba(255, 255, 255, 0.35);
  --status-ok: rgba(255, 255, 255, 0.85);
  --status-err: #D62318;
  --status-info: rgba(255, 255, 255, 0.6);
  --status-bg: rgba(255, 255, 255, 0.03);
  /* Pricing badges and check marks */
  --badge-fg: #FFFFFF;
  --badge-bg: rgba(214, 35, 24, 0.22);
  --badge-border: rgba(214, 35, 24, 0.6);
  --featured-badge-fg: #B81E14;
  --featured-badge-bg: rgba(214, 35, 24, 0.08);
  --featured-badge-border: rgba(214, 35, 24, 0.35);
  --check: #D62318;
}

.theme-resrc {
  color-scheme: light;
  --bg: #F3F7F4;
  --fg: #111412;
  --fg-soft: #5F6863;
  --muted: #5F6863;
  --faint: #646D68;
  --line: rgba(17, 20, 18, 0.07);
  --line-strong: rgba(17, 20, 18, 0.10);
  --accent: #22A55B;
  --link-hover: #157A45;
  --on-accent: #FFFFFF;
  /* The app's mint ombre: mint at the top easing into the off-white page. */
  --page-wash: linear-gradient(180deg, #D3EDDE 0px, #E7F3EC 220px, #F3F7F4 460px);
  --glow: rgba(143, 227, 180, 0.42);
  --cta-glow: rgba(143, 227, 180, 0.5);


  --btn-bg: #157A45;
  --btn-fg: #FFFFFF;
  --btn-hover-bg: #116A3B;
  --btn-hover-fg: #FFFFFF;
  --btn-shadow: 0 2px 6px rgba(17, 20, 18, 0.08), 0 12px 28px rgba(21, 122, 69, 0.24);

  --card-bg: linear-gradient(180deg, #FFFFFF8C 0%, #FFFFFF14 55%, #FFFFFF2E 100%), #FFFFFF8F;
  --card-hover-bg: linear-gradient(180deg, #FFFFFFA6 0%, #FFFFFF26 55%, #FFFFFF3D 100%), #FFFFFFA6;
  --card-border: #FFFFFFC7;
  --card-shadow: inset 0 1px 0 #FFFFFFF2, inset 0 -1px 0 #FFFFFF40, inset 0 0 22px #FFFFFF61, 0 1px 2px #1114120D, 0 10px 34px #1114121A;
  --card-filter: blur(28px) saturate(190%);

  --featured-bg: linear-gradient(160deg, #1F9458, #126B3C);
  --featured-fg: #FFFFFF;
  --featured-muted: rgba(255, 255, 255, 0.8);
  --featured-accent: #8FE3B4;
  --featured-line: rgba(255, 255, 255, 0.16);
  --featured-btn-bg: #FFFFFF;
  --featured-btn-fg: #157A45;
  --featured-btn-hover-bg: #F0FBF5;
  --featured-shadow: 0 2px 6px rgba(17, 20, 18, 0.10), 0 24px 60px rgba(21, 122, 69, 0.30);

  --field-bg: rgba(255, 255, 255, 0.85);
  --field-border: rgba(17, 20, 18, 0.10);
  --field-focus: #22A55B;
  --field-ring: rgba(34, 165, 91, 0.16);
  --placeholder: #646D68;
  --option-bg: #FFFFFF;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F6863' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --slide-bg: #FFFFFF;
  --slide-shadow: 0 20px 60px rgba(17, 20, 18, 0.12);
  --overlay: rgba(17, 20, 18, 0.45);

  --switch-bg: rgba(255, 255, 255, 0.62);
  --switch-border: rgba(255, 255, 255, 0.85);
  --switch-label: rgba(17, 20, 18, 0.55);
  --switch-label-on: #FFFFFF;
  --switch-label-hover: #111412;
  --switch-knob: #157A45;
  --switch-knob-shadow: 0 2px 6px rgba(17, 20, 18, 0.10), 0 6px 16px rgba(21, 122, 69, 0.28);
  --switch-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(17, 20, 18, 0.05), 0 8px 24px rgba(17, 20, 18, 0.06);
  --focus: #157A45;

  --status-border: rgba(17, 20, 18, 0.12);
  --status-ok: #22A55B;
  --status-err: #C8372D;
  --status-info: #E8A33D;
  --status-bg: rgba(255, 255, 255, 0.9);
  /* Pricing badges and check marks */
  --badge-fg: #126B3C;
  --badge-bg: rgba(34, 165, 91, 0.12);
  --badge-border: rgba(34, 165, 91, 0.3);
  --featured-badge-fg: #FFFFFF;
  --featured-badge-bg: rgba(255, 255, 255, 0.18);
  --featured-badge-border: rgba(255, 255, 255, 0.4);
  --check: #157A45;
}

/* ====== BASE ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  font-family: var(--font-sans);
  color: var(--fg);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Page wash (re:src's mint ombre), pinned to the top of the viewport like the
   app's ambient background. Body has no background of its own so this layer
   sits between the page colour on <html> and the content. The nav paints the
   same gradient (see .nav), so it never shows as a bar. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--page-wash);
  pointer-events: none;
  z-index: -1;
}

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

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

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ====== SCROLL LOCK + REVEAL ====== */
html:not(.skip-intro) body.intro-locked { overflow: hidden; height: 100vh; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered reveal: body copy fades in slightly after frames and headings */
.reveal .card p,
.reveal .price-includes,
.reveal .price-list,
.reveal .price-cta,
.reveal .price-desc {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;
}
.reveal.is-visible .card p,
.reveal.is-visible .price-includes,
.reveal.is-visible .price-list,
.reveal.is-visible .price-cta,
.reveal.is-visible .price-desc { opacity: 1; transform: translateY(0); }

/* ====== NAV ====== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--nav-pad) 0;
  /* No bar on either page: the nav is opaque (content scrolling under it stays
     hidden, so it's always readable) but painted with exactly what's behind it,
     the page colour plus the top of the viewport-pinned wash. No border, blur
     or shadow. */
  background: var(--page-wash), var(--bg);
}

.nav-inner {
  position: relative;
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo: "insrc." and "re:src" share one box (size, baseline, left edge). */
.logo {
  display: inline-block;
  width: 2.8em; /* fits the wider of "insrc." and "re:src" */
  font-family: var(--font-display);
  font-size: var(--logo-size);
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  text-transform: lowercase;
  color: var(--fg);
}
.logo-mark,
.logo-re { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--link-hover); }

/* Boxed nav CTA: same size and place on both pages. */
.nav-links a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-cta-w);
  height: var(--control-h);
  font-size: 13px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  transition: background 0.2s, color 0.2s;
}
.nav-links a.nav-cta:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }

/* ====== SITE SWITCH (insrc | re:src) ====== */
.site-switch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 38px;
  padding: 3px;
  margin: 0;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-pill);
  background: var(--switch-bg);
  border: 1px solid var(--switch-border);
  box-shadow: var(--switch-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  view-transition-name: site-switch;
  transition: background 0.34s ease, border-color 0.34s ease;
}

.site-switch-label {
  position: relative;
  z-index: 1;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  white-space: nowrap;
  color: var(--switch-label);
  transition: color 0.34s ease;
}

.site-switch-knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: var(--switch-knob);
  box-shadow: var(--switch-knob-shadow);
  transition: transform 0.34s var(--ease), background 0.34s ease, box-shadow 0.34s ease;
}

.theme-insrc .site-switch-label[data-side="insrc"],
.theme-resrc .site-switch-label[data-side="resrc"] { color: var(--switch-label-on); }
.theme-resrc .site-switch-knob { transform: translateX(100%); }
.theme-insrc .site-switch:hover .site-switch-label[data-side="resrc"],
.theme-resrc .site-switch:hover .site-switch-label[data-side="insrc"] { color: var(--switch-label-hover); }

.site-switch:focus { outline: none; }
.site-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ====== BUTTONS ====== */
.btn-primary,
.form-submit,
.price-cta,
.custom-callout-cta {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-primary:hover,
.form-submit:hover,
.price-cta:hover,
.custom-callout-cta:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }

.btn-primary,
.form-submit {
  padding: 18px 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.btn-primary svg,
.form-submit svg { transition: transform 0.2s; }
.btn-primary:hover svg,
.form-submit:hover svg { transform: translateX(4px); }

.btn-secondary {
  color: var(--fg);
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s;
}
.btn-secondary:hover { color: var(--link-hover); }

button[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* ====== HERO ====== */
.hero {
  padding: 60px 0 120px;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow-x: clip;
}
/* re:src: a little more room between the nav and the headline */
.hero.hero-roomy { padding-top: 100px; }
.hero > .container { width: 100%; }
.hero-stage { width: 100%; position: relative; }
.hero-text { width: 100%; }

h1.hero-headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.01em;
  max-width: 1100px;
  margin-bottom: 56px;
  text-transform: lowercase;
}

/* Sub + CTAs on the left; on re:src an illustration sits to the right. */
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero-sub {
  max-width: 620px;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--fg-soft);
  margin-bottom: 64px;
}

.hero-cta-row {
  display: flex;
  gap: 16px 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* ====== insrc INTRO (direct load of "/" only: body.has-intro) ======
   A page swapped in by the switch arrives without .has-intro and skips it, and
   so does a direct load with a #section (html.skip-intro, set in <head>). */
html:not(.skip-intro) .has-intro .nav {
  visibility: hidden;
  animation: navPopIn 0.01s linear forwards;
  animation-delay: 5.425s;
}
@keyframes navPopIn { to { visibility: visible; } }

html:not(.skip-intro) .has-intro .nav-links {
  opacity: 0;
  animation: navLinksFadeIn 0.5s ease forwards;
  animation-delay: 5.425s;
}
@keyframes navLinksFadeIn { to { opacity: 1; } }

html:not(.skip-intro) .has-intro .hero-text {
  opacity: 0;
  animation: textFadeIn 0.8s ease forwards;
  animation-delay: 5.075s;
}
@keyframes textFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

body:not(.has-intro) .hero-bubble-wrap,
body:not(.has-intro) .ghost-logo,
html.skip-intro .hero-bubble-wrap,
html.skip-intro .ghost-logo { display: none; }

/* ====== insrc INTRO: bubble + ghost logo ====== */
/*
 * SIX-PHASE ANIMATION:
 *   1. 0    - 6.0s : letter animation plays in bubble at full size
 *   2. 5.0  - 5.5s : bubble shrinks in place to nav-logo size (scale 0.4375)
 *   3. 5.5s        : bubble vanishes, ghost text appears at same spot/size
 *   4. 5.5  - 6.3s : ghost text travels from center to nav logo position
 *   5. 7.3s        : nav bar appears (with real logo)
 *   6. 7.3  - 7.6s : ghost text fades out behind real nav logo
 */
.hero-bubble-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
  animation: bubbleWrapVanish 0.01s linear forwards;
  animation-delay: 4.125s;
}

@keyframes bubbleWrapVanish {
  to { opacity: 0; }
}

.ghost-logo {
  position: fixed;
  font-family: var(--font-display);
  font-size: var(--logo-size);
  letter-spacing: 0.02em;
  color: var(--fg);
  text-transform: lowercase;
  z-index: 51;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  animation:
    ghostAppear 0.01s linear forwards,
    ghostFly 0.8s cubic-bezier(0.32, 0.72, 0, 1) forwards,
    ghostFade 0.3s ease forwards;
  animation-delay: 4.125s, 4.125s, 5.425s;
}

.ghost-logo .dot { color: var(--accent); }

@keyframes ghostAppear {
  to { opacity: 1; }
}

@keyframes ghostFly {
  to {
    top: var(--land-top, 34px);
    left: var(--land-left, 64px);
    transform: translate(0, 0);
  }
}

@keyframes ghostFade {
  to { opacity: 0; }
}


/* ====== ORIGIN ANIMATION ====== */
/* The bubble stays at 560px internally so letter positions work, but visually scales */
.bubble {
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: var(--bg);
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: scale(0.86);
  transform-origin: center;
  animation: bubbleShrink 0.375s cubic-bezier(0.6, 0, 0.3, 1) forwards;
  animation-delay: 3.75s;
}

/* Shrink in place: scale 0.86 -> scale 0.4375 makes 64px letters become 28px (nav logo size) */
@keyframes bubbleShrink {
  to {
    transform: scale(0.4375);
    background: transparent;
  }
}

@media (max-width: 900px) {
  .bubble {
    transform: scale(0.57);
  }
  @keyframes bubbleShrink {
    to {
      transform: scale(0.4375);
      background: transparent;
    }
  }
}

.bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.letter {
  position: absolute;
  font-family: var(--font-display);
  font-size: 64px;
  text-transform: lowercase;
  color: var(--fg);
  opacity: 0;
  z-index: 2;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  user-select: none;
  line-height: 1;
}

.letter.i {
  top: 60px; left: 380px;
  transform: rotate(15deg);
  animation: keep-i 4.5s forwards;
}
@keyframes keep-i {
  0%   { opacity: 0; top: 60px; left: 380px; transform: rotate(15deg); }
  7.5% { opacity: 1; top: 60px; left: 380px; transform: rotate(15deg); }
  56.25% { opacity: 1; top: 60px; left: 380px; transform: rotate(15deg); }
  75%, 100% { opacity: 1; top: 248px; left: 184px; transform: rotate(0deg); }
}

.letter.n {
  top: 420px; left: 90px;
  transform: rotate(-12deg);
  animation: keep-n 4.5s forwards;
}
@keyframes keep-n {
  0%   { opacity: 0; top: 420px; left: 90px; transform: rotate(-12deg); }
  7.5% { opacity: 1; top: 420px; left: 90px; transform: rotate(-12deg); }
  56.25% { opacity: 1; top: 420px; left: 90px; transform: rotate(-12deg); }
  75%, 100% { opacity: 1; top: 248px; left: 208px; transform: rotate(0deg); }
}

.letter.s {
  top: 110px; left: 110px;
  transform: rotate(-8deg);
  animation: keep-s 4.5s forwards;
}
@keyframes keep-s {
  0%   { opacity: 0; top: 110px; left: 110px; transform: rotate(-8deg); }
  7.5% { opacity: 1; top: 110px; left: 110px; transform: rotate(-8deg); }
  56.25% { opacity: 1; top: 110px; left: 110px; transform: rotate(-8deg); }
  75%, 100% { opacity: 1; top: 248px; left: 254px; transform: rotate(0deg); }
}

.letter.r {
  top: 380px; left: 380px;
  transform: rotate(10deg);
  animation: keep-r 4.5s forwards;
}
@keyframes keep-r {
  0%   { opacity: 0; top: 380px; left: 380px; transform: rotate(10deg); }
  7.5% { opacity: 1; top: 380px; left: 380px; transform: rotate(10deg); }
  56.25% { opacity: 1; top: 380px; left: 380px; transform: rotate(10deg); }
  75%, 100% { opacity: 1; top: 248px; left: 296px; transform: rotate(0deg); }
}

.letter.c {
  top: 250px; left: 460px;
  transform: rotate(-15deg);
  animation: keep-c 4.5s forwards;
}
@keyframes keep-c {
  0%   { opacity: 0; top: 250px; left: 460px; transform: rotate(-15deg); }
  7.5% { opacity: 1; top: 250px; left: 460px; transform: rotate(-15deg); }
  56.25% { opacity: 1; top: 250px; left: 460px; transform: rotate(-15deg); }
  75%, 100% { opacity: 1; top: 248px; left: 334px; transform: rotate(0deg); }
}

.bubble .dot {
  position: absolute;
  font-family: var(--font-display);
  font-size: 64px;
  text-transform: lowercase;
  color: var(--accent);
  top: 248px; left: 378px;
  opacity: 0;
  z-index: 3;
  line-height: 1;
  user-select: none;
  animation: dot-arrive 4.5s forwards;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dot-arrive {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 0; transform: scale(0); }
  81.25% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

.letter.o1 {
  top: 90px; left: 230px;
  transform: rotate(8deg);
  animation: drop-o1 4.5s forwards;
}
@keyframes drop-o1 {
  0%   { opacity: 0; top: 90px; left: 230px; transform: rotate(8deg); }
  7.5% { opacity: 1; top: 90px; left: 230px; transform: rotate(8deg); }
  37.5% { opacity: 1; top: 90px; left: 230px; transform: rotate(8deg); }
  56.25%, 100% { opacity: 0; top: -350px; left: -70px; transform: rotate(8deg); }
}

.letter.u1 {
  top: 200px; left: 80px;
  transform: rotate(-20deg);
  animation: drop-u1 4.5s forwards;
  animation-delay: 0.1s;
}
@keyframes drop-u1 {
  0%   { opacity: 0; top: 200px; left: 80px; transform: rotate(-20deg); }
  7.5% { opacity: 1; top: 200px; left: 80px; transform: rotate(-20deg); }
  37.5% { opacity: 1; top: 200px; left: 80px; transform: rotate(-20deg); }
  56.25%, 100% { opacity: 0; top: 100px; left: -500px; transform: rotate(-20deg); }
}

.letter.e {
  top: 280px; left: 100px;
  transform: rotate(18deg);
  animation: drop-e 4.5s forwards;
  animation-delay: 0.2s;
}
@keyframes drop-e {
  0%   { opacity: 0; top: 280px; left: 100px; transform: rotate(18deg); }
  7.5% { opacity: 1; top: 280px; left: 100px; transform: rotate(18deg); }
  37.5% { opacity: 1; top: 280px; left: 100px; transform: rotate(18deg); }
  56.25%, 100% { opacity: 0; top: 500px; left: -400px; transform: rotate(18deg); }
}

.letter.o2 {
  top: 360px; left: 250px;
  transform: rotate(-10deg);
  animation: drop-o2 4.5s forwards;
  animation-delay: 0.15s;
}
@keyframes drop-o2 {
  0%   { opacity: 0; top: 360px; left: 250px; transform: rotate(-10deg); }
  7.5% { opacity: 1; top: 360px; left: 250px; transform: rotate(-10deg); }
  37.5% { opacity: 1; top: 360px; left: 250px; transform: rotate(-10deg); }
  56.25%, 100% { opacity: 0; top: 900px; left: 200px; transform: rotate(-10deg); }
}

.letter.u2 {
  top: 100px; left: 360px;
  transform: rotate(22deg);
  animation: drop-u2 4.5s forwards;
  animation-delay: 0.05s;
}
@keyframes drop-u2 {
  0%   { opacity: 0; top: 100px; left: 360px; transform: rotate(22deg); }
  7.5% { opacity: 1; top: 100px; left: 360px; transform: rotate(22deg); }
  37.5% { opacity: 1; top: 100px; left: 360px; transform: rotate(22deg); }
  56.25%, 100% { opacity: 0; top: -300px; left: 800px; transform: rotate(22deg); }
}

.letter.t {
  top: 320px; left: 420px;
  transform: rotate(-25deg);
  animation: drop-t 4.5s forwards;
  animation-delay: 0.25s;
}
@keyframes drop-t {
  0%   { opacity: 0; top: 320px; left: 420px; transform: rotate(-25deg); }
  7.5% { opacity: 1; top: 320px; left: 420px; transform: rotate(-25deg); }
  37.5% { opacity: 1; top: 320px; left: 420px; transform: rotate(-25deg); }
  56.25%, 100% { opacity: 0; top: 700px; left: 800px; transform: rotate(-25deg); }
}


/* ====== re:src HERO ILLUSTRATION (abstract, in the app's glass + mint language) ====== */
.hero-art {
  position: relative;
  aspect-ratio: 1 / 0.9;
  width: 100%;
  max-width: 500px;
  justify-self: end;
}
.hero-art::before {
  content: '';
  position: absolute;
  inset: -12% -10% -8% -14%;
  background: radial-gradient(closest-side, rgba(143, 227, 180, 0.7), rgba(143, 227, 180, 0));
  z-index: -1;
}

.glass {
  background: var(--card-bg);
  -webkit-backdrop-filter: var(--card-filter);
  backdrop-filter: var(--card-filter);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.art-cal {
  position: absolute;
  inset: 4% 4% 14% 8%;
  border-radius: calc(var(--radius-card) * 1.5);
  padding: 7% 6% 6%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6%;
}
.art-cal-head { display: flex; align-items: center; justify-content: space-between; }
.art-bar { display: block; height: 12px; border-radius: var(--radius-pill); background: rgba(17, 20, 18, 0.10); }
.art-bar.dark { background: #111412; height: 18px; }
.art-seg { display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.6); border: 1px solid #FFFFFFC7; }
.art-seg span { width: 26px; height: 12px; border-radius: var(--radius-pill); background: rgba(17, 20, 18, 0.08); }
.art-seg span.on { background: #FFFFFF; box-shadow: 0 1px 2px #1114120A, 0 8px 24px #1114120A; }

.art-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
}
.art-grid i {
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 5px;
}
.art-grid i b { display: block; height: 7px; border-radius: var(--radius-pill); background: #CEF2DE; }
.art-grid i b.past { background: rgba(17, 20, 18, 0.07); }
.art-grid i.today { background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(34, 165, 91, 0.22); }
.art-grid i.today::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(160deg, #1F9458, #126B3C);
}

.art-card {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 56%;
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
  animation: art-float 7s ease-in-out infinite alternate;
}
.art-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); grid-row: span 2; }
.art-card .art-bar:nth-of-type(2) { width: 70%; background: rgba(17, 20, 18, 0.7); }
.art-card .art-bar:nth-of-type(3) { width: 92%; }

.art-chip {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: art-float 6s ease-in-out -2s infinite alternate;
}
.art-chip .art-bar { width: 46px; background: #157A45; opacity: 0.85; }

.art-mark {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-card);
  background: #8FE3B4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(34, 165, 91, 0.28);
}
.art-mark svg { width: 40px; height: 40px; fill: #FFFFFF; }

@keyframes art-float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

/* ====== SECTIONS ====== */
.section { padding: 90px 0; overflow-x: clip; }

/* Anchor landings (#pricing etc.): keep the section heading clear of the sticky nav. */
section[id] { scroll-margin-top: 24px; }

.section-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 1100px;
  margin-bottom: 52px;
  text-transform: lowercase;
}
.section-title.has-lede { margin-bottom: 24px; }

.section-lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 56px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Soft glow behind headings (re:src's mint; none on insrc) */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -12%;
  top: -60%;
  width: min(760px, 120%);
  height: 220%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}

/* ====== CARDS ====== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  border-radius: var(--radius-card);
  background: var(--card-bg);
  -webkit-backdrop-filter: var(--card-filter);
  backdrop-filter: var(--card-filter);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s;
}
.card:hover { background: var(--card-hover-bg); }

.card h3 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin-bottom: 16px;
  text-transform: lowercase;
}
.card p { font-size: 15px; color: var(--muted); line-height: 1.55; }

.problem-card { min-height: 280px; justify-content: center; }

.stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 0.95;
  color: var(--accent);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.stat-unit { font-size: 36px; color: var(--fg); margin-left: 2px; }

.feature-card { padding: 22px 22px 32px; }
.feature-card h3 { margin: 28px 6px 10px; }
.feature-card p { margin: 0 6px; }

/* ====== insrc EXAMPLES CAROUSEL (continuous marquee) ====== */
.examples-section { overflow: hidden; }

.examples-viewport {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.examples-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.examples-track.is-dragging { cursor: grabbing; }

.example {
  flex: 0 0 600px;
  text-decoration: none;
  color: inherit;
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  transition: transform 0.4s var(--ease);
  -webkit-user-drag: none;
}
.example:hover { transform: scale(1.06); z-index: 10; }

.example-slide {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--slide-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  box-shadow: var(--slide-shadow);
}

.example-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 5;
  font-size: 14px;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--overlay);
  border-radius: var(--radius-card);
}
.example:hover .example-overlay { opacity: 1; }

/* ====== re:src FEATURES: showcases ====== */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 96px;
}
.showcase.flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
.showcase.flip .showcase-text { order: 2; }

.showcase-text h3 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  text-transform: lowercase;
}
.showcase-text p { font-size: 17px; line-height: 1.6; color: var(--muted); }

.shot {
  border-radius: var(--radius-card);
  padding: 10px;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-card) - 10px);
}

.phones {
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: flex-start;
}
.phone {
  width: min(300px, 44%);
  border-radius: calc(var(--radius-card) * 2);
  padding: 9px;
  background: #111412;
  box-shadow: 0 2px 6px rgba(17, 20, 18, 0.10), 0 30px 60px rgba(17, 20, 18, 0.18);
}
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-card) * 2 - 9px); }
.phone:nth-child(2) { margin-top: 56px; }

.feature-grid { margin-bottom: 96px; }

.shot-phone { display: flex; justify-content: center; }
.shot-phone .phone { width: min(300px, 72%); }

/* Feature boxes: a hand-built visual on top, then label, heading, line. */
.box-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.box-card .mock {
  aspect-ratio: 1170 / 1080;
  border-radius: calc(var(--radius-card) - 6px);
  overflow: hidden;
}
.box-card .mock { min-height: 0; justify-content: center; padding: 6%; gap: 14px; }
.box-card .mock > * { zoom: 1.45; }
.box-card .eyebrow { margin: 28px 6px 10px; }
.box-card h3 { margin-top: 0; }
/* Full-width box under the 2×2 (languages) */
.box-wide { grid-column: 1 / -1; }
.box-wide .mock { aspect-ratio: 2340 / 760; align-items: center; }
.box-wide .mock > * { width: 300px; max-width: 100%; }
.lang-pill { flex: none; padding: 3px 9px; border-radius: 999px; background: #DDF6E8; color: #157A45; font-size: 11px; font-weight: 600; }

/* Closing line between the boxes and "Works on iPhone" */
.closing-line {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  text-align: center;
  max-width: 980px;
  margin: 150px auto;
}

/* Lightweight recreations of app screens (decorative; they keep the app's own look) */
.mock {
  border-radius: calc(var(--radius-card) - 6px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1114120A;
  padding: 14px;
  min-height: 214px;
  font-family: var(--font-app);
  font-size: 13px;
  line-height: 1.35;
  color: #111412;
  display: flex;
  flex-direction: column;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
}
.mock small { display: block; color: #646D68; font-size: 12px; }
.mock b { font-weight: 600; }
.mock .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-input);
  background: #FFFFFF;
  box-shadow: 0 1px 2px #1114120A, 0 8px 24px #1114120A;
}
.mock .row > div { flex: 1; min-width: 0; }
.av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #157A45;
  background: #DDF6E8;
  flex-shrink: 0;
}
.av.sky { background: #EAF3FD; color: #2B5C8A; }
.av.cream { background: #FFF7EA; color: #8A5A12; }
.chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: #DDF6E8;
  color: #157A45;
  white-space: nowrap;
}
.chip.grey { background: rgba(17, 20, 18, 0.06); color: #5F6863; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  background: rgba(17, 20, 18, 0.045);
  color: #646D68;
}
.search::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.inv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.inv-line { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid #ECEFEC; color: #5F6863; }
.inv-line.total { color: #111412; font-weight: 700; border: 0; font-size: 15px; }
.pay {
  margin-top: auto;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: #157A45;
  color: #FFFFFF;
  font-weight: 600;
}
.thread-from { text-align: center; }
.bubble-msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 18px;
  font-size: 13px;
}
.bubble-msg.out { align-self: flex-end; background: #157A45; color: #FFFFFF; border-bottom-right-radius: 6px; }
.bubble-msg.in { align-self: flex-start; background: #FFFFFF; box-shadow: 0 1px 2px #1114120A, 0 8px 24px #1114120A; border-bottom-left-radius: 6px; }
.assist-a {
  background: #FFFFFF;
  border-radius: var(--radius-input);
  padding: 12px;
  box-shadow: 0 1px 2px #1114120A, 0 8px 24px #1114120A;
  display: grid;
  gap: 6px;
}
.assist-a .who { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #157A45; }
.assist-a .who i { width: 18px; height: 18px; border-radius: 6px; background: #8FE3B4; display: inline-block; }
.assist-a ul { list-style: none; display: grid; gap: 4px; }
.assist-a li { display: flex; justify-content: space-between; color: #5F6863; }
.toggle {
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: rgba(17, 20, 18, 0.14);
  position: relative;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(17, 20, 18, 0.2);
}
.toggle.on { background: #22A55B; }
.toggle.on::after { left: 16px; }
.clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  box-shadow: 0 1px 2px #1114120A, 0 8px 24px #1114120A;
  font-weight: 600;
}
.clock .live { display: inline-flex; align-items: center; gap: 8px; color: #157A45; font-variant-numeric: tabular-nums; }
.clock .live::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #22A55B; }
.hours {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-items: end;
  height: 92px;
  padding: 6px 6px 0;
}
.hours span { display: block; border-radius: 8px 8px 4px 4px; background: #CEF2DE; height: var(--h); }
.hours span.now { background: linear-gradient(180deg, #22A55B, #157A45); }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; text-align: center; padding: 0 6px; }

/* ====== re:src APP MOCKUPS (hand-built; they keep the app's own look, like .mock) ======
   Each scales with its frame: sizes are in em, and the root font-size is a share of the
   frame's width (container query units), so they stay crisp at every width.
   Desktop: designed at 1440px wide (1em = 16px). Phone: 390px wide. Estimate: 704px. */
.am-fig { container-type: inline-size; }
.phone { container-type: inline-size; }
.am-d,
.am-ph,
.am-e {
  font-family: var(--font-app);
  color: #111412;
  line-height: 1.3;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}
.am-d b, .am-ph b, .am-e b { font-weight: 600; }
.am-d small, .am-ph small, .am-e small { display: block; color: #5F6863; font-size: 0.85em; }
.am-logo { font-family: var(--font-display); color: #111412; white-space: nowrap; }
.am-logo i { font-style: normal; color: #157A45; }
.am-ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.am-av {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 700;
  color: #157A45;
  background: #DDF6E8;
  border: 0.15em solid #FFFFFF;
  flex: none;
}
.am-av.sky { background: #EAF3FD; color: #2B5C8A; }
.am-av.cream { background: #FFF7EA; color: #8A5A12; }
.am-glass {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.1em 0.3em rgba(17, 20, 18, 0.04), 0 0.6em 2em rgba(17, 20, 18, 0.04);
}
.am-circle {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  color: #2A302C;
  flex: none;
}
.am-btn { padding: 0.7em 1.25em; border-radius: 2em; background: rgba(255, 255, 255, 0.72); font-weight: 600; white-space: nowrap; }
.am-new { padding: 0.75em 1.3em; border-radius: 2em; background: #157A45; color: #FFFFFF; font-weight: 600; white-space: nowrap; }
.am-seg { display: flex; padding: 0.25em; border-radius: 1.6em; }
.am-seg span { flex: 1; text-align: center; padding: 0.55em 1.6em; border-radius: 1.3em; color: #2A302C; }
.am-seg .on { background: #FFFFFF; color: #157A45; font-weight: 600; box-shadow: 0 0.1em 0.4em rgba(17, 20, 18, 0.06); }

/* Desktop app (month calendar, day panel) */
.am-d {
  font-size: calc(100cqw / 90);
  aspect-ratio: 1440 / 940;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 2.5em;
  padding: 1.25em 2.5em 1.25em 1.25em;
  border-radius: calc(var(--radius-card) - 10px);
  background: linear-gradient(180deg, #D5EEDF 0%, #E9F4EE 40%, #F3F7F4 100%);
}
.am-side { width: 14.5em; flex: none; border-radius: 2.5em; padding: 2.4em 1em 1.6em; display: flex; flex-direction: column; }
.am-side .am-logo { font-size: 2.05em; padding-left: 0.45em; margin-bottom: 1em; }
.am-nav { display: grid; gap: 0.25em; }
.am-nav span { display: flex; align-items: center; gap: 0.85em; padding: 0.62em 1em; border-radius: 1.2em; font-size: 1.05em; color: #2A302C; }
.am-nav span.on { background: #FFFFFF; color: #157A45; font-weight: 600; box-shadow: 0 0.1em 0.4em rgba(17, 20, 18, 0.05); }
.am-user { margin-top: auto; display: flex; align-items: center; gap: 0.7em; padding: 0 0.5em; }
.am-user > div { min-width: 0; }
.am-user small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-head { display: flex; align-items: center; gap: 0.6em; padding-top: 0.6em; }
.am-title { font-size: 3.4em; font-weight: 700; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.am-title small { display: inline; font-size: 0.42em; font-weight: 500; color: #5F6863; letter-spacing: 0; margin-left: 0.3em; }
.am-head .am-seg { margin: 0 auto; font-size: 1.05em; }
.am-cal { flex: 1; margin-top: 1.4em; border-radius: 2.75em; padding: 1.4em 1.4em 1em; display: grid; grid-template-rows: auto repeat(5, 1fr); gap: 0.35em; min-height: 0; }
.am-wk, .am-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4em; }
.am-wk span { color: #5F6863; font-size: 0.85em; padding: 0 1em; }
.am-day { padding: 0.7em 0.6em 0.4em; border-radius: 1.6em; min-width: 0; display: flex; flex-direction: column; gap: 0.3em; }
.am-day > i { font-style: normal; align-self: flex-start; padding-left: 0.35em; margin-bottom: 0.2em; }
.am-day.out > i { color: #B4BBB7; }
.am-day.past > i { color: #5F6863; }
.am-day.today { background: #FFFFFF; box-shadow: 0 0.2em 1.2em rgba(17, 20, 18, 0.08); }
.am-day.today > i { width: 1.75em; height: 1.75em; padding: 0; border-radius: 50%; background: #157A45; color: #FFFFFF; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.am-p { font-size: 0.85em; padding: 0.25em 0.6em; border-radius: 0.55em; background: #DDF3E6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-p em { font-style: normal; color: #5F6863; margin-right: 0.3em; font-size: 0.92em; }
.am-p.past { background: rgba(17, 20, 18, 0.05); color: #5F6863; }
.am-p.now { background: #BDEBD1; font-weight: 600; }
.am-more { font-size: 0.8em; color: #157A45; font-weight: 600; padding-left: 0.6em; }
.am-panel {
  position: absolute;
  top: 1.25em;
  right: 1.25em;
  bottom: 1.25em;
  width: 27em;
  border-radius: 2.5em;
  background: #FBFDFC;
  box-shadow: -1em 0 3em rgba(17, 20, 18, 0.08);
  padding: 2.3em 1.5em 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.am-panel .am-circle { position: absolute; top: 1.6em; right: 1.5em; width: 2.3em; height: 2.3em; background: rgba(17, 20, 18, 0.05); }
.am-panel h4 { font-size: 2.3em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 0.4em; }
.am-panel > small { font-size: 1em; }
.am-job { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 0.8em; align-items: center; padding: 1em; border-radius: 1.4em; background: #FFFFFF; box-shadow: 0 0.1em 0.2em rgba(17, 20, 18, 0.04), 0 0.5em 1.5em rgba(17, 20, 18, 0.05); }
.am-job b { display: block; font-size: 1.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-job.now { background: #DDF3E6; }
.am-faces { display: flex; }
.am-faces .am-av + .am-av { margin-left: -0.55em; }
.am-panel-foot { margin-top: auto; display: flex; align-items: center; gap: 1.4em; }
.am-panel-foot .am-new { flex: 1; text-align: center; padding: 1em; }
.am-panel-foot b { padding-right: 0.6em; }

/* Phone app (Today, month, today's map) */
.am-ph {
  font-size: calc(100cqw / 24.375);
  aspect-ratio: 390 / 844;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 3.2em 1em 0;
  border-radius: calc(var(--radius-card) * 2 - 9px);
  background: linear-gradient(180deg, #D3EDDE 0%, #E6F3EB 32%, #F3F7F4 66%);
}
.am-top { display: flex; align-items: center; justify-content: space-between; }
.am-top .am-circle { width: 2.75em; height: 2.75em; }
.am-top .am-logo { font-size: 1.85em; }
.am-timer { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.65em 1em; border-radius: 2em; background: rgba(255, 255, 255, 0.72); color: #157A45; font-weight: 600; font-variant-numeric: tabular-nums; }
.am-timer::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: #22A55B; }
.am-date { color: #5F6863; font-size: 1.05em; margin-top: 0.3em; line-height: 1.2; }
.am-big { font-size: 2.4em; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.am-big small { display: inline; font-size: 0.5em; letter-spacing: 0; font-weight: 500; margin-left: 0.2em; }
.am-card { border-radius: 1.6em; padding: 0.95em 1.1em; }
.am-next { display: flex; align-items: center; gap: 1em; }
.am-next .k b { color: #157A45; font-size: 1.15em; }
.am-next .w { flex: 1; min-width: 0; }
.am-next .w b { font-size: 1.12em; display: block; }
.am-next .n { color: #157A45; font-weight: 600; }
.am-note { display: flex; gap: 0.7em; align-items: flex-start; background: #E1F4E9; border: 1px solid rgba(255, 255, 255, 0.92); border-radius: 1.6em; padding: 0.95em 1.1em; }
.am-note .am-ic { margin-top: 0.15em; color: #157A45; }
.am-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.3em; }
.am-sec b { font-size: 1.3em; font-weight: 700; }
.am-sec span { color: #157A45; font-weight: 600; }
.am-tiles { display: grid; grid-template-columns: 1fr 0.82fr; grid-template-rows: 1fr 1fr; gap: 0.5em; height: 18.5em; flex: none; }
.am-tile { border-radius: 1.5em; position: relative; overflow: hidden; }
.am-tile.a { grid-row: span 2; background: linear-gradient(180deg, #C3D0C6 0%, #9DB0A2 55%, #66786B 100%); }
.am-tile.a::before { content: ''; position: absolute; left: 18%; top: 34%; width: 30%; height: 70%; border-radius: 1.4em 1.4em 0 0; background: rgba(139, 160, 145, 0.85); }
.am-tile.a::after { content: ''; position: absolute; right: 18%; top: 20%; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.am-tile.b { background: linear-gradient(180deg, #D9CCBE 0%, #A99A8B 100%); }
.am-tile.b::before { content: ''; position: absolute; left: 14%; bottom: 0; width: 46%; height: 42%; border-radius: 1em 1em 0 0; background: rgba(238, 230, 220, 0.55); }
.am-tile.c { background: #FBF3E2; padding: 0.9em; display: flex; flex-direction: column; justify-content: space-between; }
.am-tile.c b { font-size: 1.05em; line-height: 1.25; }
.am-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8em 0.7em 0.7em; display: flex; align-items: center; gap: 0.45em; color: #FFFFFF; font-size: 0.85em; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(30, 36, 32, 0.55)); }
.am-cap .am-av { font-size: 0.75em; }
.am-post { display: flex; justify-content: space-between; align-items: center; padding: 0.85em 0.9em 0.85em 1.2em; border-radius: 2em; color: #646D68; }
.am-tabs { position: absolute; left: 0.8em; right: 0.8em; bottom: 0.8em; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0.4em; border-radius: 2.2em; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0.2em 1em rgba(17, 20, 18, 0.07); }
.am-tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 0.55em 0 0.45em; border-radius: 1.7em; font-size: 0.7em; color: #2A302C; }
.am-tabs .am-ic { width: 1.9em; height: 1.9em; }
.am-tabs .on { background: #DDF3E6; color: #157A45; font-weight: 600; }
.am-mhead { display: flex; align-items: center; gap: 0.5em; }
.am-mhead .am-big { flex: 1; margin: 0; }
.am-mcal { border-radius: 2em; padding: 0.9em 0.6em 1em; }
.am-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.3em; text-align: center; }
.am-mgrid > span { color: #5F6863; font-size: 0.85em; padding-bottom: 0.4em; }
.am-md { padding: 0.3em 0 0.25em; border-radius: 1.1em; }
.am-md i { font-style: normal; font-size: 1.2em; width: 1.8em; height: 1.8em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.am-md.out i { color: #B4BBB7; }
.am-md.past i { color: #5F6863; }
.am-md.today { background: #FFFFFF; box-shadow: 0 0.2em 0.8em rgba(17, 20, 18, 0.08); }
.am-md.today i { background: #157A45; color: #FFFFFF; font-weight: 700; }
.am-dots { display: flex; gap: 0.2em; justify-content: center; height: 0.45em; margin-top: 0.1em; }
.am-dots b { width: 0.42em; height: 0.42em; border-radius: 50%; background: #22A55B; }
.am-md.past .am-dots b { background: #B4BBB7; }
.am-upnext { display: flex; align-items: center; gap: 0.75em; }
.am-upnext::before { content: ''; width: 0.6em; height: 0.6em; border-radius: 50%; background: #22A55B; flex: none; }
.am-upnext div { flex: 1; min-width: 0; }
.am-upnext b { font-size: 1.1em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-map { height: 15.5em; flex: none; border-radius: 1.6em; overflow: hidden; position: relative; background: #E8F0EA; border: 1px solid rgba(255, 255, 255, 0.92); }
.am-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-stop { display: flex; align-items: center; gap: 0.75em; padding: 0.75em 0.8em; border-radius: 1.4em; }
.am-stop > div { flex: 1; min-width: 0; }
.am-stop b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-num { width: 1.7em; height: 1.7em; border-radius: 50%; background: #157A45; color: #FFFFFF; font-weight: 700; font-size: 0.9em; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.am-go { width: 2.3em; height: 2.3em; border-radius: 50%; background: #DDF3E6; color: #157A45; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.am-go .am-ic { width: 1.1em; height: 1.1em; }

/* Estimate: good / better / best, picked, signed, approved */
.am-e { font-size: calc(100cqw / 44); display: grid; gap: 1em; padding: 1.6em; border-radius: calc(var(--radius-card) - 10px); background: linear-gradient(180deg, #D9F0E2 0%, #F3F7F4 70%); }
.am-e-head { display: flex; align-items: center; gap: 0.8em; }
.am-e-head .logo-sq { width: 2.6em; height: 2.6em; border-radius: 0.8em; background: #DDF6E8; color: #157A45; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.am-e-head b { font-size: 1.15em; display: block; }
.am-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; }
.am-opt { position: relative; background: #FFFFFF; border-radius: 1.2em; padding: 1em 0.95em; border: 0.14em solid transparent; display: flex; flex-direction: column; gap: 0.4em; box-shadow: 0 0.1em 0.3em rgba(17, 20, 18, 0.04); }
.am-opt h6 { font-size: 1.05em; font-weight: 700; }
.am-opt .l { display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.8em; color: #5F6863; }
.am-opt .t { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 0.5em; border-top: 1px solid #ECEFEC; }
.am-opt .t b { font-size: 1.45em; font-weight: 700; letter-spacing: -0.02em; color: #111412; }
.am-opt .t small { font-size: 0.8em; }
.am-opt.pick { border-color: #22A55B; background: #F2FBF6; box-shadow: 0 0.6em 1.6em rgba(21, 122, 69, 0.14); }
.am-opt .pick-tag { position: absolute; top: -0.8em; right: 0.8em; padding: 0.2em 0.65em; border-radius: 1em; background: #157A45; color: #FFFFFF; font-size: 0.75em; font-weight: 600; }
.am-sign { display: flex; align-items: flex-end; gap: 1.4em; background: #FFFFFF; border-radius: 1.2em; padding: 1em 1.3em; box-shadow: 0 0.1em 0.3em rgba(17, 20, 18, 0.04); }
.am-sign .sig { flex: 1; min-width: 0; }
.am-sign .sig span { display: block; font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Apple Chancery', cursive; font-size: 1.9em; line-height: 1.3; color: #1F3B2C; border-bottom: 1px solid #D5DBD7; padding: 0 0.2em; }
.am-approved { display: flex; align-items: center; gap: 0.6em; }
.am-approved b { font-size: 1.1em; color: #157A45; display: block; }
.am-ok { width: 1.6em; height: 1.6em; border-radius: 50%; background: #22A55B; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.am-ok::after { content: ''; width: 0.38em; height: 0.7em; border: solid #FFFFFF; border-width: 0 0.16em 0.16em 0; transform: translate(0, -0.08em) rotate(45deg); }
.am-approved .am-ok { width: 2.2em; height: 2.2em; }

/* Invoice in a feature block: the hand-built invoice, larger */
.am-stage { display: flex; align-items: center; justify-content: center; padding: 3.5em 2em; border-radius: calc(var(--radius-card) - 10px); background: linear-gradient(180deg, #D5EEDF 0%, #F3F7F4 100%); }
.am-stage .mock { width: 300px; max-width: 100%; zoom: 1.45; min-height: 0; box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1114120A, 0 20px 50px #11141214; }

/* QuickBooks sync box */
.qb-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.qb-sync { width: 30px; height: 30px; border-radius: 50%; background: #DDF6E8; color: #157A45; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mock .am-ok { font-size: 13px; }

/* ====== PRICING ====== */
.billing {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--switch-bg);
  border: 1px solid var(--switch-border);
  box-shadow: var(--switch-shadow);
  margin-bottom: 40px;
}
.billing button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--switch-label);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 20px;
  height: 36px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.billing button[aria-pressed="true"] {
  background: var(--switch-knob);
  color: var(--switch-label-on);
  box-shadow: var(--switch-knob-shadow);
}
.billing .save { font-size: 12px; opacity: 0.8; margin-left: 4px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.price-card {
  border-radius: var(--radius-card);
  background: var(--card-bg);
  -webkit-backdrop-filter: var(--card-filter);
  backdrop-filter: var(--card-filter);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 56px 40px 40px;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
.price-card.featured {
  background: var(--featured-bg);
  color: var(--featured-fg);
  border-color: transparent;
  box-shadow: var(--featured-shadow);
}

.price-tier {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  text-transform: lowercase;
}
.price-card.featured .price-tier { color: var(--featured-accent); }

.price-desc { font-size: 14px; color: var(--muted); margin-bottom: 40px; line-height: 1.55; }
.price-card.featured .price-desc { color: var(--featured-muted); }

.price-amount {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.price-amount .per {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0;
  font-weight: 400;
}
.price-card.featured .price-amount .per { color: var(--featured-muted); }
.price-note { font-size: 13px; color: var(--muted); min-height: 20px; }
.price-card.featured .price-note { color: var(--featured-muted); }
.price-note s { opacity: 0.8; margin-right: 4px; }
.price-users { font-size: 14px; font-weight: 600; margin: -24px 0 16px; }
.price-badge,
.price-flag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.price-badge { margin-left: 6px; vertical-align: 1px; }
.price-card { position: relative; }
.price-flag { position: absolute; top: 24px; right: 24px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
.price-card.featured .price-badge,
.price-card.featured .price-flag {
  color: var(--featured-badge-fg);
  background: var(--featured-badge-bg);
  border-color: var(--featured-badge-border);
}

/* Monthly / yearly (re:src) */
.pricing .y { display: none; }
.pricing[data-billing="yearly"] .m { display: none; }
.pricing[data-billing="yearly"] .y { display: inline; }

.price-list { list-style: none; margin: 36px 0; flex: 1; }
.price-includes {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  margin-top: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.price-includes + .price-list { margin-top: 16px; }
.price-card.featured .price-includes { color: var(--featured-muted); border-color: var(--featured-line); }
/* re:src: "Everything in X, plus:" as a small bold label */
.price-includes.is-label { font-style: normal; font-weight: 600; font-size: 13px; color: var(--fg); }
.price-card.featured .price-includes.is-label { color: var(--featured-fg); }

.price-list li {
  font-size: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
}
.price-list li::before { content: "—"; color: var(--accent); }
/* Check-mark lists (re:src) */
.price-list.checks li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: var(--check);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-card.featured .price-list.checks li::before { background: var(--featured-accent); }
.price-card.featured .price-list li { border-color: var(--featured-line); color: var(--featured-fg); }
.price-card.featured .price-list li::before { color: var(--featured-accent); }

.price-cta {
  display: block;
  padding: 16px 24px;
  text-align: center;
  font-size: 14px;
  margin-top: auto;
}
.price-card.featured .price-cta { background: var(--featured-btn-bg); color: var(--featured-btn-fg); }
.price-card.featured .price-cta:hover { background: var(--featured-btn-hover-bg); color: var(--featured-btn-fg); }
.theme-insrc .price-card.featured .price-cta:hover { color: #FFFFFF; }

/* "included in every plan" strip under the re:src tiers */
.plan-all { margin-top: 32px; text-align: center; }
.plan-all-label {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.price-list.plan-all-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 0; }
.plan-all-list li { border: 0; padding: 0; }

/* Callout strip below the priced tiers */
.custom-callout {
  margin-top: 32px;
  padding: 36px 40px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  transition: background 0.3s;
}
.custom-callout:hover { background: var(--card-hover-bg); }
.custom-callout-text { flex: 1; max-width: 640px; }
.custom-callout-label {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}
.custom-callout-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  margin-bottom: 8px;
}
.custom-callout-text p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.custom-callout-cta { padding: 16px 24px; font-size: 14px; white-space: nowrap; }

/* ====== CTA / FORM ====== */
.cta-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  left: -10%;
  top: 30%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--cta-glow) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner { max-width: 980px; position: relative; }

.cta-section h2 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-cta);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: 40px;
  text-transform: lowercase;
}

.cta-section .cta-inner > p {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 64px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 760px;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 500;
}
.form-field label .opt { font-weight: 400; color: var(--faint); }

.form-field input,
.form-field select,
.form-field textarea {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-input);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field select {
  padding-right: 40px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-field select option { background: var(--option-bg); color: var(--fg); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--placeholder); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--field-focus);
  box-shadow: 0 0 0 4px var(--field-ring);
}
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid { border-color: var(--status-err); }

.form-submit { justify-self: start; }

.form-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.55;
  padding: 18px 20px;
  color: var(--fg);
  border: 1px solid var(--status-border);
  border-radius: var(--radius-input);
  background: var(--status-bg);
}
.form-status[hidden] { display: none; }
.form-status:focus { outline: none; }
.form-status strong { font-weight: 600; }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-status[data-state="success"] { border-color: var(--status-ok); }
.form-status[data-state="error"] { border-color: var(--status-err); }
.form-status[data-state="fallback"] { border-color: var(--status-info); }

/* ====== FOOTER ====== */
.footer {
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 60px;
}
.footer-brand .logo { --logo-size: 26px; margin-bottom: 18px; }
.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 320px;
  margin-bottom: 20px;
}
.footer-brand .location { font-size: 13px; color: var(--faint); line-height: 1.6; }
.footer-col-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin-bottom: 22px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: var(--fg); opacity: 0.85; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-col a:hover { color: var(--link-hover); opacity: 1; }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.footer-bottom .mark { color: var(--accent); }
.footer-bottom a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--link-hover); }

/* ====== SECONDARY PAGES (privacy, 404) ====== */
.page-header { padding: 80px 0 48px; }
.page-header h1 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-bottom: 20px;
}
.page-meta { font-size: 14px; color: var(--muted); }

.prose { padding: 8px 0 100px; }
.prose .container > * { max-width: 760px; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  margin: 56px 0 16px;
}
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose li { font-size: 16px; line-height: 1.7; color: var(--fg-soft); }
.prose p + p { margin-top: 14px; }
.prose ul { list-style: none; margin-top: 14px; display: grid; gap: 12px; }
.prose li { position: relative; padding-left: 28px; }
.prose li::before { content: "—"; color: var(--accent); position: absolute; left: 0; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.prose a:hover { color: var(--link-hover); }

.lost {
  min-height: calc(100vh - 82px);
  padding: 60px 0 100px;
  display: flex;
  align-items: center;
}
.lost > .container { width: 100%; }
.lost-code {
  font-family: var(--font-display);
  font-size: clamp(120px, 20vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.lost h1 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: var(--fs-section);
  line-height: 1;
  text-transform: lowercase;
  margin-bottom: 24px;
}
.lost p {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 48px;
}

/* ====== VIEW TRANSITION (switch flip) ======
   One continuous ~0.85s animation, transforms and opacity only (smooth on
   iPhone Safari):
     0–680ms    page colours ease across (root + nav crossfade, ease-in-out)
     0–560ms    switch knob slides, labels and nav CTA recolour
     0–280ms    logo and hero copy ease out (fade, drift up)
     180–620ms  new logo eases in
     220–820ms  new headline, subhead, CTA, illustration ease in, staggered
   Snapshots are shown at natural size (never stretched); their groups glide
   from the old position to the new one, so copy eases into place. */
.vt-nav { view-transition-name: site-nav; }
.vt-logo { view-transition-name: site-logo; }
.vt-nav-cta { view-transition-name: nav-cta; }
html.vt-hero .vt-title { view-transition-name: hero-title; }
html.vt-hero .vt-sub { view-transition-name: hero-sub; }
html.vt-hero .vt-cta { view-transition-name: hero-cta; }
html.vt-hero .hero-art { view-transition-name: hero-art; }

/* The switch: its pill crossfades, the knob slides across (its own group), and
   the labels sit in groups above the knob so they stay readable on top of it. */
.site-switch-knob { view-transition-name: switch-knob; }
.site-switch-label[data-side="insrc"] { view-transition-name: switch-label-insrc; }
.site-switch-label[data-side="resrc"] { view-transition-name: switch-label-resrc; }
/* During a View Transition the snapshots do the animating. */
html.vt-running .site-switch,
html.vt-running .site-switch * { transition: none !important; }

:root {
  --vt-ease-io: cubic-bezier(0.65, 0, 0.35, 1);   /* colours */
  --vt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* things settling into place */
  --vt-ease-in: cubic-bezier(0.55, 0, 1, 0.45);   /* things leaving */
}

@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes vt-rise-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-art-in { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
@keyframes vt-art-out { to { opacity: 0; transform: translateY(-12px) scale(0.98); } }

/* Page colours: one slow, even crossfade. */
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(nav-cta),
::view-transition-new(nav-cta),
::view-transition-old(switch-label-insrc),
::view-transition-new(switch-label-insrc),
::view-transition-old(switch-label-resrc),
::view-transition-new(switch-label-resrc),
::view-transition-old(site-switch),
::view-transition-new(site-switch) {
  animation-duration: 0.68s;
  animation-timing-function: var(--vt-ease-io);
  animation-fill-mode: both;
}
::view-transition-old(root),
::view-transition-old(site-nav),
::view-transition-old(nav-cta),
::view-transition-old(switch-label-insrc),
::view-transition-old(switch-label-resrc),
::view-transition-old(site-switch) { animation-name: vt-fade-out; }
::view-transition-new(root),
::view-transition-new(site-nav),
::view-transition-new(nav-cta),
::view-transition-new(switch-label-insrc),
::view-transition-new(switch-label-resrc),
::view-transition-new(site-switch) { animation-name: vt-fade-in; }
::view-transition-old(nav-cta),
::view-transition-new(nav-cta),
::view-transition-old(switch-label-insrc),
::view-transition-new(switch-label-insrc),
::view-transition-old(switch-label-resrc),
::view-transition-new(switch-label-resrc) { animation-duration: 0.56s; }

/* Switch knob: slides across while it recolours. */
::view-transition-group(switch-knob) { animation-duration: 0.56s; animation-timing-function: var(--vt-ease-io); }
::view-transition-old(switch-knob),
::view-transition-new(switch-knob) { animation-duration: 0.56s; animation-timing-function: var(--vt-ease-io); }

/* Hero pieces glide between their two positions (the heroes differ in height). */
::view-transition-group(hero-title),
::view-transition-group(hero-sub),
::view-transition-group(hero-cta) {
  animation-duration: 0.64s;
  animation-timing-function: var(--vt-ease-io);
}
/* Logo and nav CTA share one box on both pages: nothing to glide. */
::view-transition-group(site-logo),
::view-transition-group(nav-cta) { animation: none; }
::view-transition-old(site-logo),
::view-transition-new(site-logo),
::view-transition-old(hero-title),
::view-transition-new(hero-title),
::view-transition-old(hero-sub),
::view-transition-new(hero-sub),
::view-transition-old(hero-cta),
::view-transition-new(hero-cta),
::view-transition-old(hero-art),
::view-transition-new(hero-art) {
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  animation-fill-mode: both;
}

/* Out: logo and hero copy ease up and away. */
::view-transition-old(site-logo),
::view-transition-old(hero-title),
::view-transition-old(hero-sub),
::view-transition-old(hero-cta) { animation: vt-rise-out 0.28s var(--vt-ease-in) both; }
::view-transition-old(hero-art) { animation: vt-art-out 0.3s var(--vt-ease-in) both; }

/* In: new pieces rise into place, staggered. */
::view-transition-new(site-logo) { animation: vt-rise-in 0.44s var(--vt-ease-out) 0.18s both; }
::view-transition-new(hero-title) { animation: vt-rise-in 0.52s var(--vt-ease-out) 0.22s both; }
::view-transition-new(hero-sub) { animation: vt-rise-in 0.52s var(--vt-ease-out) 0.28s both; }
::view-transition-new(hero-cta) { animation: vt-rise-in 0.48s var(--vt-ease-out) 0.34s both; }
::view-transition-new(hero-art) { animation: vt-art-in 0.56s var(--vt-ease-out) 0.24s both; }

/* Fallback where View Transitions aren't supported: a quick crossfade. */
html.swap-fade body { transition: opacity 0.24s var(--vt-ease-io); }
html.swap-fade.swap-out body { opacity: 0; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1100px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  section[id] { scroll-margin-top: 50px; }
  .hero { padding: 60px 0 80px; min-height: auto; }
  .hero.hero-roomy { padding-top: 84px; }
  .hero-row { grid-template-columns: 1fr; gap: 48px; }
  .hero-art { justify-self: center; max-width: 420px; }
  .section { padding: 56px 0; }
  .section-title { margin-bottom: 32px; }
  .card-grid,
  .pricing-grid { grid-template-columns: 1fr; }
  .stat { font-size: 72px; }
  .stat-unit { font-size: 28px; }
  .card { padding: 40px 28px; }
  .feature-card { padding: 20px 20px 28px; }
  .box-wide .mock { aspect-ratio: 1170 / 1080; }
  .price-list.plan-all-list { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
  .examples-section { padding: 56px 0; }
  .example { flex: 0 0 360px; }
  .examples-track { gap: 16px; }
  .showcase,
  .showcase.flip { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  .showcase.flip .showcase-text { order: 0; }
  .showcase-text h3 { font-size: 32px; }
  .feature-grid { margin-bottom: 64px; }
  .price-card { padding: 40px 28px 32px; }
  .price-tier { font-size: 32px; }
  .price-amount { font-size: 44px; }
  .price-list { margin: 28px 0; }
  .price-includes { margin-top: 28px; }
  .price-includes + .price-list { margin-top: 12px; }
  .custom-callout { flex-direction: column; align-items: flex-start; padding: 32px 28px; gap: 24px; }
  .custom-callout-headline { font-size: 26px; }
  .closing-line { margin: 88px auto; }
  .price-flag { top: 18px; right: 18px; }
  .cta-section { padding: 68px 0; }
  .contact-form { grid-template-columns: 1fr; }
  .footer { padding: 60px 0 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 639px) {
  .am-stage { padding: 2em 1em; }
  .am-stage .mock { zoom: 1; }
  .box-card .mock > * { zoom: 1; }
  .nav-links { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .phones { gap: 14px; }
  .phone { padding: 6px; }
  .phone:nth-child(2) { margin-top: 36px; }
  .billing button { padding: 0 14px; }
}

@media (max-width: 479px) {
  :root { --logo-size: 24px; }
  .site-switch { height: 34px; }
  .site-switch-label { padding: 0 11px; font-size: 13px; line-height: 26px; }
  .art-mark { width: 52px; height: 52px; }
  .art-mark svg { width: 30px; height: 30px; }
  .art-card { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-switch, .site-switch-knob, .site-switch-label { transition: none; }
  .art-card, .art-chip { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .theme-resrc { --card-bg: #FFFFFF; --card-filter: none; }
}