/* ==========================================================================
   Cadence landing — M3 components.
   Hand-built to the Material 3 component spec: buttons (filled/tonal/outlined),
   icon buttons, assist/filter chips, segmented buttons, outlined text fields,
   cards, the FAQ accordion, carousel controls and the ripple state layer.
   Every color comes from the token roles — no raw hex here.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* Buttons — M3 anatomy: 40dp height (compact/lg variants scale it),   */
/* fully-rounded shape, label-large type, trailing icon slot, and a    */
/* state layer that fades in on hover/focus/press.                     */
/* ------------------------------------------------------------------ */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding-inline: 1.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

/* State layer: a currentColor wash at M3 opacities over every variant. */
.btn::before,
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn:hover::before   { opacity: var(--md-sys-state-hover-opacity); }
.btn:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.btn:active::before  { opacity: var(--md-sys-state-pressed-opacity); }

/* Filled (primary) */
.btn--primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn--primary:hover {
  box-shadow: var(--md-sys-elevation-level1);
}
.btn--primary:active { box-shadow: none; }

/* Tonal (secondary-container) — the quiet companion to a filled CTA */
.btn--ghost {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.btn--ghost:hover { box-shadow: var(--md-sys-elevation-level1); }

/* Outlined variant, used sparingly (pricing non-featured CTAs) */
.btn--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.btn--outlined:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }

/* Sizes */
.btn--sm { height: 2rem; padding-inline: 1rem; font-size: 0.8125rem; }
.btn--lg { height: 3.25rem; padding-inline: 1.75rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* Trailing icon slot (GSAP's magnetic-hover parallax targets this wrapper) */
.btn__icon-wrapper { display: inline-grid; place-items: center; }
.btn__icon { width: 1.125em; height: 1.125em; }

/* Ripple (span injected by the tiny ripple helper in index.html) */
.ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.25;
  transform: scale(0);
  animation: ripple-grow 550ms var(--md-sys-motion-easing-decelerate) forwards;
}
@keyframes ripple-grow {
  to { transform: scale(1); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Icon buttons — 40dp circular touch target + state layer.            */
/* Used by: theme toggle, hamburger, carousel arrows, mockup rows.     */
/* ------------------------------------------------------------------ */
.icon-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.icon-btn:hover { color: var(--md-sys-color-on-surface); }
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.icon-btn:hover::before  { opacity: var(--md-sys-state-hover-opacity); }
.icon-btn:active::before { opacity: var(--md-sys-state-pressed-opacity); }

.theme-toggle { color: var(--md-sys-color-on-surface-variant); }
.theme-toggle__icon { width: 1.25rem; height: 1.25rem; }
[data-theme="light"] .theme-toggle__icon--light { display: none; }
[data-theme="dark"]  .theme-toggle__icon--dark  { display: none; }
html:not([data-theme]) .theme-toggle__icon--light { display: none; } /* default = dark */

/* Hamburger (three bars morphing to an X while the sheet is open) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem;
  border-radius: var(--md-sys-shape-corner-full);
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-on-surface);
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
              opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ */
/* Assist chips — trust pills, install badges. 32dp, outlined, pill.   */
/* ------------------------------------------------------------------ */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding-inline: 0.875rem;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

/* Eyebrow — original uppercase section label; the pill variant below is
   the hero exception (sentence case, quiet green pill, static dot). */
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: 14px;
}
.eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
  padding: 6px 15px;
  border-radius: 999px;
  box-shadow: none;
}
[data-theme="light"] .eyebrow--pill {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Segmented button — Monthly/Annual billing toggle.                   */
/* Selected segment: secondary-container fill + check mark.            */
/* ------------------------------------------------------------------ */
.ptoggle {
  display: inline-flex;
  align-self: center;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  overflow: hidden;
  margin-inline: auto;
}
.ptoggle__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1.5rem;
  font: var(--md-sys-typescale-label-large);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.ptoggle__btn + .ptoggle__btn { box-shadow: inset 1px 0 0 var(--md-sys-color-outline); }
.ptoggle__btn::after {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  margin-left: -1.625rem;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-spring),
              opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              margin var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
  /* check mark drawn with clip-path so no icon font is needed */
  clip-path: polygon(18% 50%, 36% 66%, 82% 22%, 92% 34%, 38% 86%, 8% 60%);
}
.ptoggle__btn.is-on {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.ptoggle__btn.is-on::after { opacity: 1; transform: scale(1); margin-left: 0; }
.ptoggle__hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent-strong);
}

/* ------------------------------------------------------------------ */
/* Feature cards — the original glassy bento. Outer card is a hairline */
/* frame with 8px padding; the inner pane is frosted glass. Hover      */
/* lifts 6px and reveals a green gradient bar across the top.          */
/* ------------------------------------------------------------------ */
.card {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 8px;
  transition: transform .4s var(--md-sys-motion-easing-standard),
              box-shadow .4s var(--md-sys-motion-easing-standard),
              border-color .4s var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}
.card__inner {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 60%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: calc(var(--md-sys-shape-corner-extra-large) - 8px);
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
[data-theme="light"] .card {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 2%, transparent);
}
[data-theme="light"] .card__inner {
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-sys-elevation-level2);
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
}
.card::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  height: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--md-sys-color-primary) 75%, #fff),
    var(--md-sys-color-primary));
  opacity: 0;
  transition: opacity .3s var(--md-sys-motion-easing-standard);
  z-index: 10;
  border-radius: 99px;
}
.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.18rem; margin-bottom: 12px; letter-spacing: -0.02em; }
.card p { color: var(--md-sys-color-on-surface-variant); font-size: .98rem; line-height: 1.7; margin: 0; }

/* Bento layout — asymmetric, dense (original composition) */
.grid--3 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
}
.grid--3 > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
.grid--3 > :nth-child(2),
.grid--3 > :nth-child(3) { grid-column: span 3; }
.grid--3 > :nth-child(4),
.grid--3 > :nth-child(5),
.grid--3 > :nth-child(6) { grid-column: span 2; }

/* Icon container: 48dp squircle in a soft primary tint */
.icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
  margin-bottom: 18px;
}
.icon svg { width: 24px; height: 24px; stroke: var(--color-accent-strong); }
[data-theme="light"] .icon svg { stroke: var(--md-sys-color-primary); }

/* ------------------------------------------------------------------ */
/* Outlined text field — M3 spec: 56dp, extra-small corners, floating  */
/* label notched into the border. Implemented with the placeholder=" " */
/* + sibling-label technique; refgate.js keeps its exact IDs.          */
/* ------------------------------------------------------------------ */
.md-field {
  position: relative;
  margin-top: 0.375rem;
}
.md-field input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  caret-color: var(--md-sys-color-primary);
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-field input:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
.md-field input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}
.md-field label {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  padding-inline: 0.25rem;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
  pointer-events: none;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.md-field input:focus + label,
.md-field input:not(:placeholder-shown) + label {
  top: 0;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-primary);
}
.md-field--otp input {
  letter-spacing: 0.35em;
  font-family: var(--font-mono);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* FAQ accordion — outlined list items; GSAP drives open/close height, */
/* CSS supplies the resting look + rotating affordance.                */
/* ------------------------------------------------------------------ */
.faq { display: grid; gap: 0.75rem; }
.faq__item {
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 55%, transparent);
  overflow: hidden;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.faq__item[open] { background: var(--md-sys-color-surface-container-low); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font: var(--md-sys-typescale-title-medium);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--md-sys-color-on-surface-variant);
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  /* plus sign */
  clip-path: polygon(
    44% 8%, 56% 8%, 56% 44%, 92% 44%, 92% 56%, 56% 56%,
    56% 92%, 44% 92%, 44% 56%, 8% 56%, 8% 44%, 44% 44%);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 1.25rem 1.25rem; }
.faq__body p {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

/* ------------------------------------------------------------------ */
/* Carousel controls — icon-button arrows + elongated active dot       */
/* (the M3 "carousel" linear indicator idiom).                         */
/* ------------------------------------------------------------------ */
.hero-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.hero-carousel__arrow {
  color: var(--md-sys-color-on-surface-variant);
}
.hero-carousel__arrow svg { width: 1.375rem; height: 1.375rem; }
.hero-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline-variant);
  transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
              background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.hero-carousel__dot.is-active {
  width: 1.75rem;
  background: var(--md-sys-color-primary);
}

/* ------------------------------------------------------------------ */
/* Sticky mobile CTA bar (phones only; appears past the hero via       */
/* js/nav.js). Hidden by default — responsive.css enables it ≤640px    */
/* and pads the footer so the bar never covers it.                     */
/* ------------------------------------------------------------------ */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 60;
  opacity: 0;
  translate: 0 120%;
  pointer-events: none;
  transition: translate var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-spring),
              opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.mobile-cta.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.mobile-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--md-sys-elevation-level3), inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.mobile-cta__text {
  font: var(--md-sys-typescale-title-medium);
  font-weight: 600;
}