/* ===== Landing Page ===== */

:root {
  --lp-brand: #0d9488;
  --lp-brand-dark: #0f766e;
  --lp-brand-soft: #d1fae5;
  --lp-bg: #f8fafc;
  --lp-surface: #ffffff;
  --lp-ink: #0f172a;
  --lp-ink-secondary: #64748b;
  --lp-muted: #64748b;
  --lp-border: #e2e8f0;
  --lp-border-strong: #cbd5e1;
  --lp-accent: #3b82f6;
  --lp-accent-light: #dbeafe;
  --lp-danger: #ef4444;
  --lp-radius: 12px;
  --lp-radius-sm: 8px;
  --lp-radius-pill: 999px;
  --lp-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.05);
  --lp-shadow-lg: 0 4px 24px rgb(0 0 0 / 0.08);
  --lp-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

/* Topbar links go to #features / #pricing etc. — leave headroom so the
   section heading isn't hidden under the sticky header. */
.lp-section[id] {
  scroll-margin-top: 80px;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--lp-bg);
  color: var(--lp-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Nav */
.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100vw;
  z-index: 100;
  background: color-mix(in srgb, var(--lp-bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--lp-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lp-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.lp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--lp-ink);
}

.lp-logo span { letter-spacing: -0.01em; }

.lp-nav-links {
  display: flex;
  gap: 24px;
  flex: 1;
}

.lp-nav-links a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--lp-ink-secondary);
  transition: color 0.15s;
}

.lp-nav-links a:hover { color: var(--lp-ink); }

/* Buttons */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: var(--lp-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.lp-btn-primary {
  background: var(--lp-brand);
  color: #fff;
  border-color: var(--lp-brand);
}

.lp-btn-primary:hover {
  background: var(--lp-brand-dark);
  border-color: var(--lp-brand-dark);
}

.lp-btn-secondary {
  background: var(--lp-surface);
  color: var(--lp-ink);
  border-color: var(--lp-border);
}

.lp-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.lp-btn-lg {
  padding: 12px 32px;
  font-size: 1rem;
  border-radius: var(--lp-radius);
}

.lp-btn-ghost {
  background: transparent;
  color: var(--lp-ink-secondary);
  border-color: transparent;
}

.lp-btn-ghost:hover {
  color: var(--lp-ink);
  background: rgba(0, 0, 0, 0.04);
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.lp-nav-signed-in { gap: 12px; }

.lp-nav-email {
  font-size: 0.85rem;
  color: var(--lp-ink-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* Hero scenario tags */
.lp-hero-scenarios {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.lp-scenario-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 1px solid var(--lp-border);
  border-radius: 20px;
  background: var(--lp-surface);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lp-ink-secondary);
  transition: all 0.15s;
}

.lp-scenario-tag:hover {
  border-color: var(--lp-brand);
  color: var(--lp-brand);
  box-shadow: var(--lp-shadow);
}

/* Hero illustration SVGs */
.lp-hero-card-icon-svg,
.lp-hero-arrow,
.lp-use-case-tag svg,
.lp-facts svg {
  flex-shrink: 0;
  color: var(--lp-brand);
}

/* Social Proof */
.lp-social-proof {
  text-align: center;
  padding: 32px 0;
}

.lp-social-proof-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--lp-ink);
  margin-bottom: 24px;
}

.lp-social-proof-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.lp-social-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lp-social-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--lp-brand);
  letter-spacing: -0.02em;
}

.lp-social-stat-label {
  font-size: 0.82rem;
  color: var(--lp-ink-secondary);
  font-weight: 500;
}

/* Product Demo Screenshots */
.lp-demo-gif {
  margin-top: 48px;
}

.lp-demo-screenshots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.lp-demo-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lp-demo-shot img,
.lp-demo-shot svg {
  display: block;
  border-radius: var(--lp-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  border: 1px solid var(--lp-border);
  background: var(--lp-surface);
  max-width: 100%;
  height: auto;
}

.lp-demo-shot-desktop img,
.lp-demo-shot-desktop svg {
  max-width: 640px;
}

.lp-demo-shot-phone img,
.lp-demo-shot-phone svg {
  max-width: 240px;
}

.lp-demo-shot-label {
  font-size: 0.85rem;
  color: var(--lp-ink-secondary);
  font-weight: 500;
}

.lp-demo-arrow {
  display: none;
}

/* Interactive Demo Styles */
.demo-step-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--lp-brand);
  text-align: center;
  margin-bottom: 20px;
  animation: demoFadeInUp 0.4s ease-out;
}

.demo-desktop-frame {
  width: 500px;
  background: #f1f5f9;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--lp-border);
  animation: demoSlideInRight 0.6s ease-out 0.5s both;
}

.demo-desktop-header {
  height: 36px;
  background: #e8f0ef;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  border-radius: 12px 12px 0 0;
}

.demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
}

.demo-dot:nth-child(2) { background: #f59e0b; }
.demo-dot:nth-child(3) { background: #22c55e; }

.demo-desktop-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #e8f0ef;
}

.demo-tool-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #cbd5e1;
  color: #475569;
  transition: all 0.15s;
}

.demo-tool-btn:hover {
  background: #94a3b8;
}

.demo-tool-primary {
  background: var(--lp-brand);
  color: white;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.demo-tool-primary:hover {
  background: var(--lp-brand-dark);
}

.demo-sheet-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 0 0 12px 12px;
}

.demo-sheet-table th,
.demo-sheet-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
}

.demo-sheet-table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #64748b;
}

.demo-sheet-table td {
  color: #334155;
}

.demo-new-row {
  animation: demoRowHighlight 0.5s ease-out;
  background: #d1fae5;
}

/* Phone Demo */
.demo-phone-frame {
  width: 220px;
  background: #1e293b;
  border-radius: 32px;
  padding: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid #334155;
  animation: demoSlideInLeft 0.6s ease-out 0.3s both;
}

.demo-phone-notch {
  width: 100px;
  height: 20px;
  background: #1e293b;
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.demo-phone-screen {
  background: #f8fafc;
  border-radius: 24px;
  overflow: hidden;
  padding-top: 10px;
}

.demo-camera-view {
  width: calc(100% - 28px);
  height: 150px;
  background: #0f172a;
  margin: 14px auto;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.demo-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid var(--lp-brand);
}

.demo-corner.top-left { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.demo-corner.top-right { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.demo-corner.bottom-left { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.demo-corner.bottom-right { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.demo-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--lp-brand);
  animation: demoScanMove 1.5s linear infinite;
  box-shadow: 0 0 10px var(--lp-brand);
}

.demo-barcode-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: none;
}

.demo-barcode-preview.show {
  display: block;
  animation: demoBarcodeAppear 0.3s ease-out forwards;
}

.demo-barcode-lines {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 10px 15px;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
}

.demo-barcode-line {
  height: 30px;
  background: #1e293b;
}

.demo-scan-btn {
  display: block;
  width: 120px;
  height: 45px;
  background: var(--lp-brand);
  border: none;
  border-radius: 22px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin: 16px auto;
  transition: transform 0.2s;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
}

.demo-scan-btn:active {
  transform: scale(0.95);
}

.demo-last-scanned {
  padding: 12px;
  background: #e8f0ef;
  margin: 0 14px 14px;
  border-radius: 8px;
  text-align: center;
}

.demo-last-label {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.demo-last-code {
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-brand);
  letter-spacing: 0.5px;
}

/* Arrow */
.demo-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  animation: demoPulseArrow 2s ease-in-out infinite;
}

.demo-arrow {
  width: 50px;
  height: 50px;
  fill: var(--lp-brand);
  animation: demoBounceArrow 1s ease-in-out infinite;
}

/* QR Overlay */
.demo-qr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 10;
}

.demo-qr-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  text-align: center;
  animation: demoFadeInScale 0.4s ease-out;
}

.demo-qr-code {
  width: 120px;
  height: 120px;
  margin-bottom: 12px;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-qr-pattern {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 80px;
  height: 80px;
}

.demo-qr-cell {
  width: 10px;
  height: 10px;
  background: #1e293b;
  border-radius: 1px;
}

.demo-qr-cell.empty {
  background: transparent;
}

.demo-qr-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* Step Indicator */
.demo-step-indicator {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  animation: demoFadeInUp 0.5s ease-out 0.8s both;
}

.demo-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s ease;
}

.demo-step-dot.active {
  background: var(--lp-brand);
  transform: scale(1.3);
}

/* Animations */
@keyframes demoScanMove {
  0% { top: 10px; opacity: 1; }
  100% { top: calc(100% - 10px); opacity: 0.5; }
}

@keyframes demoRowHighlight {
  0% { background: #86efac; }
  100% { background: white; }
}

@keyframes demoFadeInScale {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes demoFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes demoSlideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes demoSlideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes demoBarcodeAppear {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes demoPulseArrow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes demoBounceArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

@keyframes demoFlashGreen {
  0%, 100% { background: transparent; }
  50% { background: rgba(16, 185, 129, 0.2); }
}

.demo-flash-effect {
  animation: demoFlashGreen 0.5s ease-out;
}

@media (max-width: 768px) {
  .lp-demo-screenshots {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .lp-demo-shot-desktop img,
  .lp-demo-shot-desktop svg {
    max-width: 100%;
  }
  
  .demo-desktop-frame {
    width: 100%;
    max-width: 350px;
  }
  
  .demo-phone-frame {
    width: 180px;
  }
  
  .demo-arrow-container {
    transform: rotate(90deg);
  }
}

/* Hero */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 24px 64px;
  text-align: center;
}

.lp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(13, 148, 136, 0.08), transparent),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(13, 148, 136, 0.04), transparent);
  pointer-events: none;
}

.lp-hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* The hero title used to span 60% of the first viewport, pushing the
   primary CTA below the fold. Cap at 3rem on desktop so the CTA
   ("Open the app — no signup") is visible without scrolling on a
   standard 900px-tall laptop. */
.lp-hero-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.lp-hero-title span {
  background: linear-gradient(135deg, var(--lp-brand), #0891b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp-hero-subtitle {
  font-size: 1.1rem;
  color: var(--lp-ink-secondary);
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

.lp-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.lp-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.lp-hero-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}

.lp-hero-card-icon { font-size: 1.6rem; }

.lp-hero-card-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.lp-hero-arrow { flex-shrink: 0; }

/* Sections */
.lp-section {
  padding: 72px 24px;
}

.lp-section-alt {
  background: linear-gradient(180deg, var(--lp-bg) 0%, #f0fdf9 50%, var(--lp-bg) 100%);
}

.lp-section-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.lp-section-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.lp-section-subtitle {
  text-align: center;
  color: var(--lp-ink-secondary);
  font-size: 1.05rem;
  margin-bottom: 40px;
}

/* Features */
.lp-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* Horizontal-scroll variant: when the viewport can't comfortably fit the
   6 feature cards side-by-side, fall back to a single row that scrolls
   left/right instead of wrapping into a tall stack. The cards keep a
   fixed flex-basis so the row reads as "feature cards you can browse
   through" on phones and narrow windows. */
.lp-features.lp-features-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 18px;
  margin: 0 -4px;
  gap: 18px;
  /* Allow the row to extend past the section padding so the
     first/last cards can be scrolled fully into view. */
  scroll-padding: 0 4px;
  /* A scrollbar (auto on overflow) only shows on supporting browsers. */
  scrollbar-width: thin;
  scrollbar-color: var(--lp-border) transparent;
  -webkit-overflow-scrolling: touch;
}

.lp-features.lp-features-scroll .lp-feature-card {
  flex: 0 0 280px;
  width: 280px;
}

.lp-features.lp-features-scroll::-webkit-scrollbar {
  height: 6px;
}

.lp-features.lp-features-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.lp-features.lp-features-scroll::-webkit-scrollbar-thumb {
  background-color: var(--lp-border-strong);
  border-radius: 3px;
}

.lp-feature-card {
  padding: 32px 28px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  transition: box-shadow 0.2s, transform 0.2s;
}

.lp-feature-card:hover {
  box-shadow: var(--lp-shadow-lg);
  transform: translateY(-2px);
}

.lp-feature-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.lp-feature-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.lp-feature-card p {
  font-size: 0.92rem;
  color: var(--lp-ink-secondary);
  line-height: 1.65;
}

/* Pro feature card: subtle tinted background and accent border so Pro
   features stand out from the four core "everyone gets this" cards
   without changing the grid layout. The Pro badge sits inline after
   the heading. */
.lp-feature-card-pro {
  background: linear-gradient(180deg, var(--lp-brand-50, #ecfdf5) 0%, var(--lp-surface) 60%);
  border-color: var(--lp-brand, #0d8a6a);
  border-width: 1.5px;
}

.lp-feature-pro-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lp-brand, #0d8a6a);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  /* Nudge the pill up a hair so it visually centers next to the
     heading text on the same line (caps height differs from h3). */
  position: relative;
  top: -2px;
}

/* Steps */
.lp-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-step {
  text-align: center;
  max-width: 280px;
  padding: 24px 20px;
}

.lp-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lp-brand);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.lp-step h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.lp-step p {
  font-size: 0.9rem;
  color: var(--lp-ink-secondary);
  line-height: 1.6;
}

.lp-step-connector {
  display: flex;
  align-items: center;
  padding-top: 56px;
  flex-shrink: 0;
}

/* Pricing */
.lp-pricing {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.lp-pricing-card {
  width: 340px;
  padding: 36px 32px 28px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.lp-pricing-card:hover {
  box-shadow: var(--lp-shadow-lg);
}

.lp-pricing-card-featured {
  border-color: var(--lp-brand);
  box-shadow: 0 0 0 2px var(--lp-brand), 0 8px 32px rgba(13,148,136,0.18);
}

.lp-pricing-card-featured:hover {
  box-shadow: 0 0 0 2px var(--lp-brand), 0 12px 40px rgba(13,148,136,0.24);
}

.lp-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lp-brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 20px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* (Removed: .lp-badge-coming-soon and .lp-pricing-feature-coming-soon.
   The last place that used them — the Cloud backup row in the Pro
   pricing card and the comparison table — was switched from
   "Coming soon" to ✓ on 2026-07-03 when the BYOC Google Drive backup
   shipped. If we ever need a "coming soon" badge again, prefer reusing
   a single .lp-badge utility rather than the prior two-class combo. */

.lp-pricing-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--lp-ink);
}

.lp-pricing-description {
  font-size: 0.88rem;
  color: var(--lp-ink-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.lp-pricing-price-block {
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--lp-border);
  border-bottom: 1px solid var(--lp-border);
}

.lp-pricing-card-featured .lp-pricing-price-block {
  background: linear-gradient(135deg, rgba(13,148,136,0.04) 0%, rgba(13,148,136,0.01) 100%);
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
  padding-right: 32px;
}

.lp-pricing-amount {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--lp-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.lp-pricing-card-featured .lp-pricing-amount {
  color: var(--lp-brand);
}

.lp-pricing-period {
  font-size: 0.88rem;
  color: var(--lp-ink-secondary);
  margin-bottom: 4px;
}

.lp-pricing-yearly {
  font-size: 0.82rem;
  color: var(--lp-ink-secondary);
  font-weight: 500;
}

.lp-pricing-card .lp-btn {
  width: 100%;
  margin-bottom: 24px;
}

.lp-pricing-features {
  list-style: none;
  text-align: left;
  flex: 1;
}

.lp-pricing-features li {
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--lp-ink);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--lp-border);
}

.lp-pricing-features li:last-child {
  border-bottom: none;
}

.lp-pricing-features li::before {
  content: "✓";
  color: var(--lp-brand);
  font-weight: 700;
  flex-shrink: 0;
}

/* Muted features (not available in Free plan) */
.lp-pricing-features li.lp-feature-muted {
  color: var(--lp-ink-secondary);
  text-decoration: none;
  opacity: 0.5;
}

.lp-pricing-features li.lp-feature-muted::before {
  content: "—";
  color: var(--lp-ink-secondary);
  font-weight: 400;
}

/* Headline Pro features: visually elevated vs the rest of the list so
   they pass the "1-second read" test (row count, Drive backup, Sheets). */
.lp-pricing-features li.lp-pricing-headline {
  font-weight: 600;
  font-size: 0.94rem;
  background: linear-gradient(180deg, var(--lp-brand-soft) 0%, transparent 100%);
  padding: 10px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  border-bottom: 1px solid transparent;
}

.lp-pricing-features li.lp-pricing-headline + li:not(.lp-pricing-headline) {
  margin-top: 6px;
}

/* Pricing currency suffix */
.lp-pricing-currency {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--lp-ink-secondary);
  margin-left: 2px;
}

/* Billing toggle */
.lp-billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.lp-billing-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--lp-ink-secondary);
  transition: color 0.2s;
}

.lp-billing-label[data-active] {
  color: var(--lp-ink);
  font-weight: 600;
}

.lp-toggle-switch {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--lp-border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  padding: 0;
}

.lp-toggle-switch[aria-checked="true"] {
  background: var(--lp-brand);
}

.lp-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.lp-toggle-switch[aria-checked="true"] .lp-toggle-thumb {
  transform: translateX(22px);
}

.lp-billing-save {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lp-brand);
  background: rgba(13,148,136,0.1);
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Feature comparison table */
.lp-feature-compare {
  margin-top: 40px;
  text-align: center;
}

.lp-feature-compare-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lp-ink);
  margin-bottom: 20px;
}

.lp-compare-table {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.lp-compare-table th {
  background: var(--lp-accent-light);
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-compare-table th:first-child {
  border-radius: 8px 0 0 0;
  text-align: left;
}

.lp-compare-table th:last-child {
  border-radius: 0 8px 0 0;
}

.lp-compare-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--lp-border);
  color: var(--muted);
  text-align: center;
}

.lp-compare-table td:first-child {
  font-weight: 600;
  color: var(--lp-ink);
  text-align: left;
}

.lp-compare-table td:nth-child(3) {
  color: var(--lp-accent);
  font-weight: 600;
}

.lp-compare-table tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

.lp-compare-table tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

/* Small inline note inside a comparison-table cell, e.g. "files stay in
   your own Drive" next to a ✓. Kept slightly smaller than the primary
   value so the headline (the ✓ or the number) still reads first, but
   uses the same accent color + bold weight as the rest of the Pro
   column so the whole row feels like one consistent unit. Without
   this, notes used to fall back to a muted gray that fought the blue
   Pro text and looked like a different table. */
.lp-table-note {
  margin-left: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--lp-accent);
  opacity: 0.85;
}

/* Social Proof */
.lp-social-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin: 32px 0 40px;
  flex-wrap: wrap;
}

.lp-social-stat {
  text-align: center;
}

.lp-social-stat-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--lp-accent);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lp-social-stat-label {
  display: block;
  font-size: 0.88rem;
  color: var(--lp-muted);
  margin-top: 4px;
}

/* Use case tags */
.lp-use-cases {
  text-align: center;
  margin-bottom: 40px;
}

.lp-use-cases-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lp-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.lp-use-case-tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lp-use-case-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lp-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-use-case-tag:hover {
  border-color: var(--lp-brand);
  box-shadow: 0 1px 4px rgba(13,148,136,0.1);
}

.lp-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.lp-testimonial {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  padding: 24px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}

.lp-testimonial:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.lp-testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.lp-testimonial p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--lp-ink);
  margin: 0 0 16px;
  font-style: italic;
}

.lp-testimonial footer {
  font-size: 0.83rem;
  color: var(--lp-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-testimonial footer strong {
  color: var(--lp-ink);
  font-weight: 600;
}

.lp-testimonial footer cite {
  font-style: normal;
}

/* FAQ */
.lp-faq {
  max-width: 680px;
  margin: 0 auto;
}

.lp-faq-item {
  border-bottom: 1px solid var(--lp-border);
  padding: 18px 0;
}

.lp-faq-item:last-child { border-bottom: none; }

.lp-faq-item summary {
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--lp-ink);
  transition: color 0.2s;
  user-select: none;
}

.lp-faq-item summary:hover {
  color: var(--lp-brand);
}

.lp-faq-item summary::-webkit-details-marker { display: none; }

.lp-faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--lp-ink-secondary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.lp-faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.lp-faq-item p {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--lp-ink-secondary);
  line-height: 1.7;
  padding-right: 32px;
  animation: faqFadeIn 0.3s ease-out;
}

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.lp-footer {
  padding: 36px 24px 12px;
  border-top: 1px solid var(--lp-border);
  background: #f8fafc;
  color: #0f172a;
}

.lp-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

/* Row 1: brand block (left) + 3 link columns (right) on wide screens,
   single-column stack on narrow screens. */
.lp-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
  align-items: start;
}

.lp-footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
  align-self: start;
  margin-top: 0;
}

.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
}

.lp-footer-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  max-width: 280px;
}

.lp-footer-contact {
  margin-top: 0;
}

.lp-footer-text a {
  color: #0d9488;
  text-decoration: none;
  font-weight: 500;
}

.lp-footer-text a:hover {
  text-decoration: underline;
}

.lp-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  min-width: 0;
  justify-items: center;
}

.lp-footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0f172a;
  margin: 0 0 10px;
}

.lp-footer-col a {
  display: block;
  font-size: 0.9rem;
  color: #475569;
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.15s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-footer-col a:hover {
  color: #0d9488;
  transform: translateX(2px);
}

/* Row 2: copyright, separated by a thin divider, hugging the bottom. */
.lp-footer-bottom {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.lp-footer-copy {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  /* Tablet: stack brand block on top, 3-col grid below. */
  .lp-footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lp-footer-text { max-width: 100%; }
}

@media (max-width: 768px) {
  .lp-nav-links { display: none; }
  .lp-nav-inner { gap: 12px; padding: 0 12px; max-width: 100vw; }

  .lp-hero { padding: 120px 16px 60px; }
  .lp-hero-visual { flex-direction: column; gap: 12px; }
  .lp-hero-arrow { transform: rotate(90deg); }
  .lp-section { padding: 60px 16px; }
  .lp-steps { flex-direction: column; align-items: center; }
  .lp-step-connector { padding-top: 0; transform: rotate(90deg); }
  .lp-pricing-card { width: 100%; max-width: 360px; }

  .lp-footer { padding: 32px 16px 12px; }
  .lp-footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .lp-nav-inner { gap: 8px; padding: 0 10px; }
  .lp-logo { font-size: 1rem; }
  .lp-nav-actions .lp-btn { padding: 6px 12px; font-size: 0.8rem; }
  .lp-hero-title { font-size: 1.8rem; }
  .lp-hero-subtitle { font-size: 0.95rem; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-footer-links {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================
   Legal pages (/terms /privacy /refund /contact /third-party-notices)
   Reuse the same design tokens (Inter font, brand teal, surface,
   border, radius, shadow) as the rest of the landing experience.
   ============================================================ */

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}

.legal-page .legal-breadcrumb {
  font-size: 0.85rem;
  color: var(--lp-ink-secondary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.legal-page .legal-breadcrumb a {
  color: var(--lp-ink-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.legal-page .legal-breadcrumb a:hover {
  color: var(--lp-brand);
  text-decoration: underline;
}

.legal-page .legal-breadcrumb-sep {
  color: var(--lp-border-strong);
  user-select: none;
}

.legal-page .legal-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  margin: 0 0 8px;
  line-height: 1.15;
}

.legal-page .legal-effective {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--lp-ink-secondary);
  background: var(--lp-brand-soft);
  border: 1px solid color-mix(in srgb, var(--lp-brand) 25%, transparent);
  border-radius: var(--lp-radius-pill);
  padding: 4px 12px;
  margin-bottom: 32px;
  font-weight: 500;
}

.legal-page .legal-effective::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-brand);
  display: inline-block;
}

.legal-page .legal-toc {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 20px 24px;
  margin-bottom: 32px;
  box-shadow: var(--lp-shadow);
}

.legal-page .legal-toc-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lp-ink-secondary);
  margin: 0 0 12px;
}

.legal-page .legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 24px;
}

.legal-page .legal-toc-list li { margin: 0; }

.legal-page .legal-toc-list a {
  display: block;
  padding: 4px 0;
  font-size: 0.88rem;
  color: var(--lp-ink-secondary);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.legal-page .legal-toc-list a:hover {
  color: var(--lp-brand);
  transform: translateX(2px);
}

.legal-page .legal-section {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: var(--lp-shadow);
  transition: box-shadow 0.2s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.legal-page .legal-section:hover {
  box-shadow: var(--lp-shadow-md);
}

.legal-page .legal-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lp-ink);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.005em;
}

.legal-page .legal-section h2 .legal-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--lp-brand-soft);
  color: var(--lp-brand-dark);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 8px;
  flex-shrink: 0;
}

.legal-page .legal-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lp-ink);
  margin: 16px 0 8px;
}

.legal-page .legal-section p,
.legal-page .legal-section li {
  font-size: 0.95rem;
  color: var(--lp-ink);
  line-height: 1.7;
  margin-bottom: 10px;
}

.legal-page .legal-section p:last-child,
.legal-page .legal-section li:last-child { margin-bottom: 0; }

.legal-page .legal-section ul,
.legal-page .legal-section ol {
  padding-left: 22px;
  margin: 8px 0 12px;
}

.legal-page .legal-section li { margin-bottom: 6px; }

.legal-page .legal-section li::marker {
  color: var(--lp-brand);
}

.legal-page .legal-section strong { color: var(--lp-ink); }

.legal-page .legal-section code {
  background: #f1f5f9;
  border: 1px solid var(--lp-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--lp-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.legal-page .legal-section a {
  color: var(--lp-brand);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--lp-brand) 30%, transparent);
  transition: border-color 0.15s, color 0.15s;
}

.legal-page .legal-section a:hover {
  color: var(--lp-brand-dark);
  border-bottom-color: var(--lp-brand);
}

.legal-page .legal-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--lp-brand-soft) 60%, var(--lp-surface));
  border: 1px solid color-mix(in srgb, var(--lp-brand) 25%, transparent);
  border-left: 3px solid var(--lp-brand);
  border-radius: var(--lp-radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 0.92rem;
  color: var(--lp-ink);
}

.legal-page .legal-callout-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--lp-brand);
  margin-top: 2px;
}

.legal-page .legal-related {
  margin-top: 40px;
  padding: 24px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}

.legal-page .legal-related-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lp-ink-secondary);
  margin: 0 0 12px;
}

.legal-page .legal-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-page .legal-related-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-bg);
  border: 1px solid var(--lp-border);
  color: var(--lp-ink);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.legal-page .legal-related-list a:hover {
  border-color: var(--lp-brand);
  color: var(--lp-brand);
  background: var(--lp-brand-soft);
}

.legal-page .legal-related-list a::after {
  content: "→";
  font-size: 0.85em;
  color: var(--lp-ink-secondary);
  transition: color 0.15s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.legal-page .legal-related-list a:hover::after {
  color: var(--lp-brand);
  transform: translateX(2px);
}

/* Anchor offset so #section links land below the sticky nav */
.legal-page .legal-section[id],
.legal-section[id] { scroll-margin-top: 80px; }

/* Legal page responsive */
@media (max-width: 768px) {
  .legal-page { padding: 100px 16px 60px; }
  .legal-page .legal-title { font-size: 1.9rem; }
  .legal-page .legal-toc-list { grid-template-columns: 1fr; }
  .legal-page .legal-section { padding: 20px 20px; }
}

@media (max-width: 480px) {
  .legal-page { padding: 90px 14px 48px; }
  .legal-page .legal-title { font-size: 1.6rem; }
  .legal-page .legal-section { padding: 18px 16px; }
  .legal-page .legal-section h2 { font-size: 1rem; }
  .legal-page .legal-section p,
  .legal-page .legal-section li { font-size: 0.92rem; }
}