/* =========================================================
   Laper website UI kit — component styles & shared rules
   Loads after colors_and_type.css; everything here references
   those tokens. Per-component layout lives in JSX inline.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#08160a;color:var(--fg-on-dark);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-feature-settings:var(--font-features-sans);scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit}

/* ---- Containers ---- */
.lp-container{max-width:var(--container);margin:0 auto;padding:0 28px}
.lp-section{padding:var(--space-9) 0}
  /* Tonal section variants — all on dark-green page */
  .lp-section.is-dark{background:#0a1c0d;color:var(--fg-on-dark)}
  .lp-section.is-dark--coal{background:#0e1f10;color:var(--fg-on-dark)}
  .lp-section.is-dark--graphite{background:#142719;color:var(--fg-on-dark)}
.lp-section.is-mist{background:var(--bg-3)}
.lp-section.is-paper{background:var(--bg-2)}

/* ---- Section heading kit ---- */
.lp-section-head{max-width:760px;margin:0 auto var(--space-7);text-align:center}
.lp-section-head .lp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.lp-section-head .lp-eyebrow::before{content:"";width:24px;height:2px;background:currentColor;display:inline-block;border-radius:2px}
.lp-section-head .lp-eyebrow::after{content:"";width:24px;height:2px;background:currentColor;display:inline-block;border-radius:2px}
.lp-section-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:var(--tracking-tight);margin:0;color:inherit}
.lp-section-head h2 .lp-accent{font-style:italic;color:var(--laper-green);font-weight:800}
.lp-section.is-dark .lp-section-head h2 .lp-accent{color:var(--laper-green-bright)}
.lp-section-head p{font-family:var(--font-sans);font-size:18px;line-height:1.5;color:var(--fg-2);margin:18px auto 0;max-width:620px}
.lp-section.is-dark .lp-section-head p{color:rgba(255,255,255,0.72)}

/* ---- Button base ---- */
.lp-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;border:1.5px solid transparent;font-family:var(--font-sans);font-weight:600;font-size:15px;letter-spacing:-0.005em;line-height:1;cursor:pointer;transition:transform 220ms var(--ease-out),background 220ms var(--ease-out),box-shadow 220ms var(--ease-out),color 220ms var(--ease-out),border-color 220ms var(--ease-out);background:none;color:inherit;text-decoration:none;white-space:nowrap}
.lp-btn:hover{transform:translateY(-1px)}
.lp-btn:active{transform:translateY(0)}
.lp-btn--primary{background:var(--laper-green);color:#fff}
.lp-btn--primary:hover{background:var(--laper-green-dark);box-shadow:var(--shadow-4)}
.lp-btn--dark{background:var(--laper-ink);color:#fff}
.lp-btn--dark:hover{background:var(--laper-graphite);box-shadow:var(--shadow-3)}
.lp-btn--ghost{background:transparent;color:var(--fg-1);border-color:var(--laper-bone)}
.lp-btn--ghost:hover{border-color:var(--laper-green);color:var(--laper-green-dark)}
.lp-btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,0.18)}
.lp-btn--ghost-dark:hover{border-color:var(--laper-green-bright);color:var(--laper-green-bright)}
.lp-btn--lg{padding:18px 30px;font-size:16px}
.lp-btn .lp-arrow{transition:transform 220ms var(--ease-out)}
.lp-btn:hover .lp-arrow{transform:translateX(4px)}

/* ---- Tag pills ---- */
.lp-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-family:var(--font-sans);font-weight:600;font-size:12px;line-height:1;letter-spacing:0.02em;background:var(--laper-green-pale);color:var(--laper-green-dark)}
.lp-tag--dark{background:rgba(214,255,77,0.12);color:var(--laper-lime);border:1px solid rgba(214,255,77,0.25)}
.lp-tag--ghost{background:transparent;color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--laper-bone)}

/* ---- Scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:translateY(0)}
[data-reveal-from="left"]{transform:translateX(-30px)}
[data-reveal-from="right"]{transform:translateX(30px)}
[data-reveal-from="left"].is-in,[data-reveal-from="right"].is-in{transform:translateX(0)}
[data-reveal-from="zoom"]{transform:scale(0.96)}
[data-reveal-from="zoom"].is-in{transform:scale(1)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---- Scroll progress bar ---- */
.lp-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;pointer-events:none}
.lp-progress::after{content:"";display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--laper-green) 0%,var(--laper-lime) 100%);transition:width 80ms linear}