/* Glidro — separate Wispr Flow-inspired website copy.
   Approved mockup 2: cream, lavender, sage and forest green.
   Retains the current Glidro layout, typography, content and live demos. */

@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --glidro-background: #fffeeb;
  --glidro-surface: #f4f2e3;
  --glidro-canvas: #fffef8;
  --glidro-preview: #f2edf8;
  --glidro-primary: #1e302a;
  --glidro-secondary: #f1efd9;
  --glidro-separator: #dddfcb;
  --glidro-lavender: #e3caf4;
  --glidro-lavender-hover: #d9bbee;
  --glidro-lavender-ink: #6e5a8f;
  --glidro-sage: #e1e9d8;
  --glidro-forest: #234f47;
  --glidro-heading: 'EB Garamond', Georgia, serif;

  --paper: var(--glidro-background);
  --mist: var(--glidro-surface);
  --mist-2: var(--glidro-background);
  --ink: var(--glidro-primary);
  --ink-2: #50615a;
  --ink-3: #59675f;
  --line: var(--glidro-separator);
  --line-2: #cbd2bf;
  --amber: var(--glidro-lavender-ink);
  --amber-hi: var(--glidro-lavender);
  --amber-ink: var(--glidro-forest);
  --amber-wash: #f0e6f8;
  --green-ink: var(--glidro-forest);
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-xl: 14px;
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;
  --shadow-1: 0 0 0 1px var(--glidro-separator);
  --shadow-2: 0 0 0 1px var(--glidro-separator), 0 10px 30px -20px rgb(26 26 26 / 14%);
}

body { background: var(--glidro-background); }
::selection { background: var(--glidro-lavender); color: var(--ink); }

/* Serif headings and the quiet Figtree controls mirror the native app. */
h1, h2, h3, .display, .section-title, .price-amount {
  font-family: var(--glidro-heading);
  font-weight: 400;
  letter-spacing: -0.018em;
}
.hero h1 {
  font-size: clamp(44px, 6.6vw, 86px);
  font-weight: 400;
  letter-spacing: -0.027em;
  line-height: 1.05;
}
.section-title, .article-head h1, .doc h1 { font-weight: 400; letter-spacing: -0.018em; }
.tile h3, .points h3, .article-body h2, .article-body h3,
.doc h2, .related h2, .rest > h3, .cta-banner h3 {
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.16;
}
.tile h3 { font-size: 28px; }
.points h3 { font-size: 26px; }
.keys-group h3, .versus-pane h3, .footer .footer-title {
  font-family: var(--sans);
  font-weight: 600;
}
.footer .footer-title {
  letter-spacing: normal;
  line-height: inherit;
}
.hero-sub { letter-spacing: 0; }
.hero-badge { background: var(--glidro-secondary); border-radius: 8px; }
.hero-badge b { border-radius: 5px; }
.hero, .demo-section { background: var(--glidro-background); }
.section:not(.section-alt) { background: var(--glidro-canvas); }
.section.section-alt { background: var(--glidro-background); }

.nav { background: rgb(255 254 235 / 92%); border-bottom-color: var(--line); }
.nav.scrolled { background: rgb(255 254 235 / 94%); }
.nav-logo {
  gap: 9px;
  font-family: ui-rounded, 'Figtree', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.035em;
}
.nav-logo img {
  width: 32px;
  height: 24px;
  border-radius: 0;
  object-fit: contain;
}
.nav-links a:hover { background: var(--glidro-secondary); }
.nav-links a.nav-cta {
  border-radius: 8px;
  font-weight: 500;
  color: var(--glidro-primary);
  background: var(--glidro-lavender);
  box-shadow: inset 0 0 0 1.5px var(--glidro-primary);
}
.nav-links a.nav-cta:hover {
  color: var(--glidro-primary);
  background: var(--glidro-lavender-hover);
}

/* Lavender purchase controls retain the original button dimensions. */
.btn { border-radius: 8px; font-weight: 500; letter-spacing: 0; }
.btn-primary, .article-body .cta-banner a.btn-primary {
  color: var(--glidro-primary);
  background: var(--glidro-lavender);
  box-shadow: inset 0 0 0 1.5px var(--glidro-primary);
}
.btn-primary:hover {
  color: var(--glidro-primary);
  background: var(--glidro-lavender-hover);
  box-shadow: inset 0 0 0 1.5px var(--glidro-primary);
  transform: translateY(-1px);
}
.btn-ghost { background: var(--glidro-secondary); box-shadow: none; }
.btn-ghost:hover { background: #e8e8d0; }

/* Approved landing-page pointer: an overlay preserves the existing spacing. */
.hero-demo-cta {
  position: relative;
  color: var(--glidro-background);
  background: var(--glidro-forest);
}
.hero-demo-cta:hover {
  color: var(--glidro-background);
  background: var(--glidro-primary);
}
.hero-demo-cta .hero-demo-pointer {
  position: absolute;
  top: calc(50% - 6px);
  left: 100%;
  width: 90px;
  height: 130px;
  color: #8051a0;
  pointer-events: none;
}
#strip-demo .cym-screen { box-shadow: 0 0 0 2px #8051a0; }
@media (max-width: 760px) {
  /* Keep the decoration clear of wrapped controls and copy on small screens. */
  .hero-demo-cta .hero-demo-pointer { display: none; }
}
.off, .price-left { box-shadow: none; border-radius: 8px; }
.price-left-dot { box-shadow: none; }

/* Calm native panels replace the source's glossy cards. */
.tile, .keys-group, .versus-pane, .specs {
  background: var(--glidro-surface);
  border-radius: 12px;
  box-shadow: none;
}
.pricing-card {
  background: var(--glidro-canvas);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
}
.tier-strip a, .related-card, .article-body a.related-card {
  background: var(--glidro-surface);
  border-radius: 10px;
  box-shadow: none;
}
.verdict, .choice-card.rec {
  background: var(--glidro-secondary);
  box-shadow: none;
}
.verdict p { color: var(--ink-2); }
.comp-table th.hero-col { background: var(--glidro-secondary); }
.step.key .step-num { color: var(--glidro-primary); background: var(--glidro-lavender); }
.step-tag { box-shadow: none; border-radius: 8px; }
.faq-a a, .article-body a, .doc a { text-decoration-color: var(--glidro-lavender-ink); }
.section-lede a, .points a, .tile-copy a, .rest dd a, .demo-caption a, .release-note a, .footer-base p a {
  text-decoration: underline;
  text-decoration-color: var(--glidro-lavender-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.comp-wrap:focus-visible { outline: 2.5px solid var(--glidro-lavender-ink); outline-offset: 3px; }
.price-amount del { color: #65736b !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.faq-item summary { font-weight: 500; letter-spacing: 0; }
.faq-item summary::after { border-radius: 8px; }
.faq-item summary:hover::after { background-color: var(--glidro-secondary); }
.footer { background: var(--glidro-surface); border-top: 1px solid var(--line); }

/* Sage and lilac wallpaper; recognizable application colors remain intact. */
.cym-screen { color: var(--ink); }
.cym-wall {
  background: linear-gradient(125deg, var(--glidro-sage), #e7e6df 48%, #e5dcf2);
  box-shadow: 0 0 0 1px var(--line-2), 0 18px 44px -30px rgb(35 79 71 / 24%);
}
.cym-wall::after { box-shadow: none; }
.cym-veil.l {
  background: linear-gradient(270deg, rgb(255 254 235 / 74%) 0, rgb(255 254 235 / 92%) 220px, var(--glidro-background) 420px);
}
.cym-veil.r {
  background: linear-gradient(90deg, rgb(255 254 235 / 74%) 0, rgb(255 254 235 / 92%) 220px, var(--glidro-background) 420px);
}
.cym-menubar { background: rgb(242 244 229 / 88%); backdrop-filter: blur(18px); }
.cym-bar { background: #f5f2f8; }
.cym.border .cym-win.is-focus .cym-w {
  box-shadow: 0 0 0 2.5px var(--glidro-lavender), 0 8px 24px -15px rgb(35 79 71 / 28%);
}
.cym-tabs button.on { color: var(--glidro-background); background: var(--glidro-forest); }
.cym-dock { background: rgb(255 254 235 / 88%); }
.cym-arrow { background: var(--glidro-canvas); }
.safari .pill { background: var(--glidro-primary); border-radius: 5px; }
.safari .shot { background: #eee5f8; box-shadow: none; }
.safari .tb { background: #f5f2f8; }
.safari .url { background: #e9e2f2; color: var(--glidro-lavender-ink); }
.safari .pg .sk { background: var(--glidro-lavender-ink); }
.term .p, .term .g { color: #ded9cf; }
.app.gen { background: var(--glidro-surface); }
.gridwm { background: linear-gradient(125deg, var(--glidro-sage), #e5dcf2); box-shadow: 0 0 0 1px var(--line); }
.key-btn { background: var(--glidro-secondary); border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(35 79 71 / 8%); }
.key-btn:hover { background: #e9e8d2; }
.key-btn[aria-pressed="true"] { background: var(--glidro-secondary); box-shadow: inset 0 0 0 1px var(--glidro-forest); }
.keycap { border-radius: 5px; background: var(--glidro-canvas); }
.range input {
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  min-width: 0;
  background: transparent;
  accent-color: var(--glidro-primary);
  cursor: ew-resize;
}
.range input::-webkit-slider-runnable-track {
  height: 20px;
  border-radius: 8px;
  background: linear-gradient(to right,
    var(--glidro-primary) 0 var(--glidro-range-progress, 33.333%),
    var(--glidro-separator) var(--glidro-range-progress, 33.333%) 100%);
}
.range input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 2px;
  height: 12px;
  margin-top: 4px;
  border: 0;
  border-radius: 1px;
  background: #fff;
  box-shadow: none;
  transform: translateX(-5px);
}
.range input::-moz-range-track { height: 20px; border-radius: 8px; background: var(--glidro-separator); }
.range input::-moz-range-progress { height: 20px; border-radius: 8px; background: var(--glidro-primary); }
.range input::-moz-range-thumb { width: 2px; height: 12px; border: 0; border-radius: 1px; background: #fff; transform: translateX(-5px); }

@media (min-width: 1001px) {
  .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .nav-links { background: rgb(255 254 235 / 98%); }
  .nav:has(.nav-links.open) { background: var(--glidro-background); }
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(44px, 10.9vw, 62px); line-height: 1.04; }
  .tile, .tile.wide { border-radius: 12px; }
  .tile h3 { font-size: 27px; }
  .nav-logo { font-size: 21px; }
}

.release-note { text-align:center; max-width:660px; margin:24px auto 0; }

/* Forest explainer section from the approved mockup. Light comparison cards
   keep their own dark text and app previews rather than inheriting cream ink. */
#how-it-works.section { background: var(--glidro-forest); color: var(--glidro-background); }
#how-it-works .section-title,
#how-it-works .section-lede strong,
#how-it-works .points h3 { color: var(--glidro-background); }
#how-it-works .section-lede,
#how-it-works .points p,
#how-it-works .versus-count { color: #e1ead8; }
#how-it-works .versus-pane { color: var(--glidro-primary); background: var(--glidro-surface); }
#how-it-works .versus-pane p { color: var(--ink-2); }

/* Supporting pages share the same palette without changing their structure. */
.verdict, .choice-card.rec, .comp-table th.hero-col { background: #eee5f8; }
.cta-banner { background: var(--glidro-sage); }
.doc .setup-end { background: var(--glidro-forest); }
.pricing-card { box-shadow: 0 0 0 1px var(--glidro-separator), 0 10px 30px -20px rgb(35 79 71 / 18%); }