/* ═══════════════════════════════════════════════════════════════
   Physical Minimalism — Site-wide Extension
   Layered on top of styles.css. Loaded on all pages.
   ─────────────────────────────────────────────────────────────
   Design principle: every elevation change must communicate
   hierarchy, not decoration. Shadows simulate ambient light
   hitting physical material.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. VARIABLE LAYER
   All PM tokens are additive — zero existing variables removed.
   ───────────────────────────────────────────────────────────── */

:root {

  /* ── Z-Axis Surface Registry ──────────────────────────────── */
  --surface-0:         var(--nm-bg);               /* Base layer: page bg  */
  --surface-1:         var(--nm-bg-alt);            /* Level 1: cards       */
  --surface-2-bg:      rgba(240, 243, 247, 0.88);  /* Level 2: floating    */
  --surface-2-blur:    blur(18px) saturate(1.4);

  /* ── Shadow Primitives (derived from --text-primary #2d3447) ─
     Each layer serves a specific optical function:
     - edge:   1px crisp boundary — defines the material's silhouette
     - core:   medium blur — the body of the shadow close to the object
     - spread: soft feather — ambient light falloff across the surface
     - deep:   large bleed — long-range shadow for very elevated objects   */

  /* Default (3-layer) */
  --pm-edge:      0 1px 1px  rgba(45, 52, 71, 0.09);
  --pm-core:      0 4px 10px rgba(45, 52, 71, 0.07);
  --pm-spread:    0 12px 28px rgba(45, 52, 71, 0.04);

  /* Lifted / hover (4-layer — Y increases, blur widens) */
  --pm-edge-up:   0 2px 2px  rgba(45, 52, 71, 0.10);
  --pm-core-up:   0 7px 16px rgba(45, 52, 71, 0.08);
  --pm-spread-up: 0 20px 44px rgba(45, 52, 71, 0.06);
  --pm-deep-up:   0 36px 72px rgba(45, 52, 71, 0.03);

  /* Floating (4-layer — nav, modals, app mockup) */
  --pm-edge-fl:   0 2px 4px  rgba(45, 52, 71, 0.11);
  --pm-core-fl:   0 9px 22px rgba(45, 52, 71, 0.09);
  --pm-spread-fl: 0 26px 52px rgba(45, 52, 71, 0.07);
  --pm-deep-fl:   0 52px 96px rgba(45, 52, 71, 0.05);

  /* ── Rim Light ────────────────────────────────────────────────
     Simulates ambient light striking the top physical edge.
     Applied as the first value in every elevated shadow stack so
     it always reads as the brightest, closest surface boundary.  */
  --pm-rim:       inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --pm-rim-strong:inset 0 1px 0 rgba(255, 255, 255, 0.92);

  /* ── Composed Elevation Levels ────────────────────────────── */
  --pm-l1:        var(--pm-rim), var(--pm-edge), var(--pm-core), var(--pm-spread);
  --pm-l1-hover:  var(--pm-rim), var(--pm-edge-up), var(--pm-core-up), var(--pm-spread-up), var(--pm-deep-up);
  --pm-l2:        var(--pm-rim-strong), var(--pm-edge-fl), var(--pm-core-fl), var(--pm-spread-fl), var(--pm-deep-fl);

  /* ── Physical Press ───────────────────────────────────────────
     Active state switches outer ambient shadow to inset crush,
     mimicking a real button being physically depressed.          */
  --pm-press:     inset 0 1px 3px rgba(45, 52, 71, 0.18),
                  inset 0 3px 9px rgba(45, 52, 71, 0.11);

  /* ── Subtle Surface Borders ──────────────────────────────────
     1px border aids depth perception in low-contrast areas.
     --pm-border pairs with --pm-rim: border handles the outside
     edge; rim handles the inner top highlight.                   */
  --pm-border:        1px solid rgba(255, 255, 255, 0.60);
  --pm-border-focus:  1px solid rgba(46, 196, 182, 0.45);

  /* ── Consistent Transition Curve ─────────────────────────────
     cubic-bezier(0.4, 0, 0.2, 1) is the Material Design
     "standard" easing — fast start, decelerated end. It gives
     UI elements a sense of physical weight (they accelerate
     quickly when lifted, then settle gently).                    */
  --pm-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --pm-dur-sm: 0.18s;
  --pm-dur:    0.26s;
  --pm-dur-lg: 0.38s;
}


/* ─────────────────────────────────────────────────────────────
   2. NAVIGATION — Surface Level 2 (Floating)
   The nav lives above all page content. It gets the full L2
   treatment: deep ambient shadow + backdrop blur to maintain
   compositional context with the page beneath it.
   ───────────────────────────────────────────────────────────── */

#nav {
  background: var(--surface-2-bg);
  backdrop-filter: var(--surface-2-blur);
  -webkit-backdrop-filter: var(--surface-2-blur);
  box-shadow: var(--pm-l2);
  border-bottom: var(--pm-border);
  transition:
    padding     var(--pm-dur) var(--pm-ease),
    box-shadow  var(--pm-dur) var(--pm-ease),
    background  var(--pm-dur) var(--pm-ease);
}

#nav.scrolled {
  background: rgba(236, 240, 245, 0.94);
  box-shadow: var(--pm-l2);
}

.mobile-menu.open {
  background: var(--surface-2-bg);
  backdrop-filter: var(--surface-2-blur);
  -webkit-backdrop-filter: var(--surface-2-blur);
  box-shadow: var(--pm-l2);
  border-top: var(--pm-border);
}


/* ─────────────────────────────────────────────────────────────
   3. BADGE & SECTION LABELS — Surface Level 1 (Micro-modules)
   Small floating chips deserve their own layer. A subtle L1
   shadow lifts them off the background just enough to read as
   interactive meta-information rather than inline body copy.
   ───────────────────────────────────────────────────────────── */

.badge,
.section-label {
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  background: var(--surface-0);
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease);
}


/* ─────────────────────────────────────────────────────────────
   4. HERO APP MOCKUP — Surface Level 2 (Floating Object)
   The most visually prominent element on the page. It should
   feel like a physical device placed on a desk, casting a deep
   shadow. Gets L2 shadow but NO backdrop-filter (it's opaque).
   ───────────────────────────────────────────────────────────── */

.app-mockup {
  box-shadow: var(--pm-l2);
  transition: transform var(--pm-dur-lg) var(--pm-ease),
              box-shadow var(--pm-dur-lg) var(--pm-ease);
}

.app-mockup:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow: var(--pm-l2);
}

/* Float tags: Level 1 micro-elements hovering beside the mockup */
.float-tag {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease),
              transform  var(--pm-dur-sm) var(--pm-ease);
}


/* ─────────────────────────────────────────────────────────────
   5. VALUE BRIDGE — Surface Level 1
   ───────────────────────────────────────────────────────────── */

.hvb-main {
  background: var(--surface-0);
  box-shadow: var(--pm-l1-hover); /* pre-elevated — it's the hero content card */
  border: var(--pm-border);
  transition: box-shadow var(--pm-dur) var(--pm-ease);
}

.hvb-main::before {
  /* Retain the teal/orange left accent from styles.css */
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 4px;
  background: linear-gradient(180deg, var(--teal), var(--orange));
  border-radius: 0 4px 4px 0;
}

.hvb-tile {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}

.hvb-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-l1-hover);
}


/* ─────────────────────────────────────────────────────────────
   6. HOW IT WORKS — Steps — Surface Level 1
   Step number badges use an inset to appear recessed into the
   card surface — communicating that they are indexing labels,
   not interactive.
   ───────────────────────────────────────────────────────────── */

.step {
  background: var(--surface-1);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: var(--pm-l1-hover);
}

/* Step number: recessed inset — it's a label stamped into the material */
.step-num {
  background: var(--surface-1);
  box-shadow: var(--pm-press);
  border: none;
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease);
}


/* ─────────────────────────────────────────────────────────────
   7. FEATURE CARDS — Surface Level 1
   Feature icons are inset (stamped into the card surface).
   Cards lift on hover with full 4-layer shadow.
   ───────────────────────────────────────────────────────────── */

.feature-card {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--pm-l1-hover);
}

/* Feature icon: inset — physical die-cut into the card */
.feature-icon {
  background: var(--surface-0);
  box-shadow: var(--pm-press);
  border: none;
}


/* ─────────────────────────────────────────────────────────────
   8. PRICING — Surface Level 1 with Featured at Level 1+
   The featured card gets pre-hover elevation (l1-hover) to
   communicate hierarchy: it's the recommended choice.
   Structural border-top accent is retained via original CSS.
   ───────────────────────────────────────────────────────────── */

.price-card {
  background: var(--surface-1);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--pm-l1-hover);
}

/* Featured: already elevated to l1-hover — visually dominant */
.price-card.featured {
  box-shadow: var(--pm-l1-hover);
  border-top: 3px solid var(--teal);
}

.price-card.featured:hover {
  transform: translateY(-6px);
  /* Re-stack with a slightly deeper bottom shadow to avoid
     looking identical to a hovered non-featured card */
  box-shadow:
    var(--pm-rim-strong),
    var(--pm-edge-up),
    0 9px 20px rgba(45, 52, 71, 0.09),
    0 26px 56px rgba(45, 52, 71, 0.07),
    0 48px 88px rgba(45, 52, 71, 0.04);
}

/* Popular badge: Level 1 chip floating above the featured card */
.popular-badge {
  box-shadow: var(--pm-l1);
}


/* ─────────────────────────────────────────────────────────────
   9. FAQ — Surface Level 1 (open = physical press)
   Default state: raised. Open state: pressed/inset. This
   communicates that clicking "opens" the material like pressing
   a physical panel down to reveal content underneath.
   ───────────────────────────────────────────────────────────── */

.faq-item {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: box-shadow var(--pm-dur) var(--pm-ease),
              border-color var(--pm-dur-sm) var(--pm-ease);
}

/* Open/Active = pressed into the surface */
.faq-item[open],
.faq-item.active {
  box-shadow: var(--pm-press);
  border: var(--pm-border-focus);
}

.faq-item summary,
.faq-question {
  transition: color var(--pm-dur-sm) var(--pm-ease);
}


/* ─────────────────────────────────────────────────────────────
   10. CTA BOX — Surface Level 1 (pre-lifted)
   The CTA is a call to action — it should feel prominent and
   slightly above the page. Uses l1-hover pre-applied so it
   reads as the most important action zone.
   ───────────────────────────────────────────────────────────── */

.cta-box {
  background: var(--surface-1);
  box-shadow: var(--pm-l1-hover);
  border: var(--pm-border);
}

/* Gradient top accent (retained from styles.css, refined opacity) */
.cta-box::before {
  opacity: 0.50;
}


/* ─────────────────────────────────────────────────────────────
   11. BUTTONS — Primary CTA: flat orange (no glow / elevation)
   ───────────────────────────────────────────────────────────── */

.btn-primary {
  box-shadow: none;
  transition: background var(--pm-dur-sm) var(--pm-ease);
}

.btn-primary:hover {
  transform: none;
  box-shadow: none;
  filter: none;
  background: var(--orange-hover);
}

.btn-primary:active {
  transform: none;
  box-shadow: none;
  background: var(--orange-dark);
}

.btn-ghost {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur-sm) var(--pm-ease),
              box-shadow var(--pm-dur-sm) var(--pm-ease),
              color       var(--pm-dur-sm) var(--pm-ease);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-l1-hover);
  color: var(--teal);
}

.btn-ghost:active {
  transform: translateY(2px);
  box-shadow: var(--pm-press);
  transition-duration: var(--pm-dur-sm);
}


/* ─────────────────────────────────────────────────────────────
   12. FORM INPUTS — Physical Press on Focus
   Inputs are recessed by default (inset shadow = stamped into
   the form card). On focus, the press deepens slightly and a
   teal focus ring wraps the outside — communicating "this field
   is now active and receiving input."
   ───────────────────────────────────────────────────────────── */

.form-input,
.form-group input,
.form-group select,
.form-group textarea,
.demo-input,
.newsletter-input {
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease),
              border     var(--pm-dur-sm) var(--pm-ease);
}

.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.demo-input:focus,
.newsletter-input:focus {
  outline: none;
  box-shadow:
    var(--pm-press),
    0 0 0 3px rgba(46, 196, 182, 0.20);
  border: var(--pm-border-focus) !important;
}


/* ─────────────────────────────────────────────────────────────
   13. DEMO OPTIONS (How It Works mockup)
   ───────────────────────────────────────────────────────────── */

.demo-option {
  background: var(--surface-1);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur-sm) var(--pm-ease),
              box-shadow var(--pm-dur-sm) var(--pm-ease),
              color       var(--pm-dur-sm) var(--pm-ease);
}

.demo-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-l1-hover);
  color: var(--teal);
}

.demo-option.selected {
  box-shadow: var(--pm-press);
  border: var(--pm-border-focus);
  color: var(--teal);
  transform: translateY(1px);
}


/* ─────────────────────────────────────────────────────────────
   14. G2 CARD BASE — PM override
   ───────────────────────────────────────────────────────────── */

.g2 {
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}

.g2:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-l1-hover);
}


/* ─────────────────────────────────────────────────────────────
   15. FOOTER SURFACE — Level 0 (Base / Recessed)
   Footer sits at the base of the page hierarchy. --nm-bg-deep
   makes it appear slightly recessed relative to the page body,
   communicating "this is below the main content layer."
   The top border provides the rim-light effect in reverse —
   the edge catching light from above.
   ───────────────────────────────────────────────────────────── */

footer {
  background: var(--nm-bg-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.60); /* top rim light from above */
  box-shadow: inset 0 4px 16px rgba(45, 52, 71, 0.04); /* subtle inset depth */
}


/* ─────────────────────────────────────────────────────────────
   16. STAGGER CHILDREN — inherit PM transitions
   ───────────────────────────────────────────────────────────── */

.stagger-child {
  transition:
    opacity   0.7s var(--pm-ease),
    transform 0.7s var(--pm-ease),
    filter    0.7s var(--pm-ease);
}


/* ─────────────────────────────────────────────────────────────
   17. SCROLL REVEAL — inherit PM transitions
   ───────────────────────────────────────────────────────────── */

.reveal {
  transition: opacity var(--pm-dur-lg) var(--pm-ease),
              transform var(--pm-dur-lg) var(--pm-ease),
              filter   var(--pm-dur-lg) var(--pm-ease);
}


/* ─────────────────────────────────────────────────────────────
   18. SIGNUP PAGE
   The form card is Surface Level 2 — it's the most important
   interactive object on the page, so it gets the deepest
   elevation. Inputs are recessed (inset), feature icons are
   inset stamps, social buttons are Level 1 raised.
   ───────────────────────────────────────────────────────────── */

/* Form card: Level 2 — the primary action object on the page */
.signup-form {
  background: var(--surface-1);
  box-shadow: var(--pm-l2);
  border: var(--pm-border);
}

/* Inputs: recessed into the form surface */
.form-input {
  background: var(--surface-1);
  box-shadow: var(--nm-inset-sm);
  border: none;
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease);
}

.form-input:focus {
  box-shadow: var(--pm-press), 0 0 0 3px rgba(46, 196, 182, 0.20);
  border: var(--pm-border-focus) !important;
  outline: none;
}

/* Feature icons: inset stamps */
.feature-icon {
  box-shadow: var(--pm-press);
  background: var(--surface-1);
}

/* Social buttons: Level 1 raised, press on active */
.social-btn {
  background: var(--surface-1);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur-sm) var(--pm-ease),
              box-shadow var(--pm-dur-sm) var(--pm-ease),
              color       var(--pm-dur-sm) var(--pm-ease);
}
.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-l1-hover);
  color: var(--teal);
}
.social-btn:active {
  transform: translateY(1px);
  box-shadow: var(--pm-press);
}

/* Trust badges: raised chips, consistent with badge/label treatment */
.trust-item {
  box-shadow: var(--pm-l1);
  background: var(--surface-0);
  border: var(--pm-border);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
}


/* ─────────────────────────────────────────────────────────────
   19. CONTACT PAGE
   ───────────────────────────────────────────────────────────── */

.contact-card {
  background: var(--surface-0);
  box-shadow: var(--pm-l1-hover);
  border: var(--pm-border);
}

.info-card {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-l1-hover);
}

.info-icon {
  background: var(--surface-0);
  box-shadow: var(--pm-press);
}


/* ─────────────────────────────────────────────────────────────
   20. ABOUT PAGE — stat items, value cards, team members
   ───────────────────────────────────────────────────────────── */

.stat-item {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-l1-hover);
}

.value-card {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-l1-hover);
}

.value-icon {
  background: var(--surface-0);
  box-shadow: var(--pm-press);
}

.team-member {
  background: var(--surface-1);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.team-member:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-l1-hover);
}


/* ─────────────────────────────────────────────────────────────
   21. BLOG CARDS
   ───────────────────────────────────────────────────────────── */

.blog-card {
  background: var(--surface-0);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-l1-hover);
}

.newsletter-box {
  background: var(--surface-1);
  box-shadow: var(--pm-l1-hover);
  border: var(--pm-border);
}

.newsletter-input {
  background: var(--surface-1);
  box-shadow: var(--nm-inset-sm);
  border: none;
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease);
}
.newsletter-input:focus {
  box-shadow: var(--pm-press), 0 0 0 3px rgba(46, 196, 182, 0.20);
  outline: none;
}


/* ─────────────────────────────────────────────────────────────
   22. HOW IT WORKS PAGE — demo interface
   ───────────────────────────────────────────────────────────── */

.demo-interface {
  background: var(--surface-1);
  box-shadow: var(--pm-l1-hover);
  border: var(--pm-border);
}

.demo-input {
  background: var(--surface-1);
  box-shadow: var(--nm-inset-sm);
  border: none;
  transition: box-shadow var(--pm-dur-sm) var(--pm-ease);
}
.demo-input:focus {
  box-shadow: var(--pm-press), 0 0 0 3px rgba(46, 196, 182, 0.20);
  outline: none;
}

.proof-card {
  background: var(--surface-1);
  box-shadow: var(--pm-l1);
  border: var(--pm-border);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.proof-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-l1-hover);
}