/* ==========================================================================
   LockLift — site styles
   Shared by index.html, privacy-policy.html, terms-of-service.html
   --------------------------------------------------------------------------
   Contents:
     1. Design tokens
     2. Reset & base
     3. Layout primitives
     4. Header / nav
     5. Hero
     6. Phone mockups (shared)
     7. How it works
     8. Why it works
     9. Document pages (legal)
    10. Footer
    11. Responsive
   ========================================================================== */

/* ── 1. Design tokens ────────────────────────────────────────────────────── */

:root {
  /* Brand greens */
  --primary-green:   #053E21;  /* wordmark, headings, logo mark            */
  --accent-green:    #115531;  /* links, icons, step numerals              */
  --highlight-green: #149E48;  /* eyebrows, hero emphasis, link hover      */
  --fill-green:      #E7F5E3;  /* selected / filled state                  */

  /* Surfaces */
  --bg:           #FEFBF7;  /* page background            */
  --panel-bg:     #F8F3EB;  /* "How it works" band        */
  --badge-bg:     #EAE7E3;

  /* Text */
  --text-primary:   #111111;
  --text-secondary: #57554F;
  --text-tertiary:  #65635D;

  /* Lines */
  --border: #DFDEDC;
  --ring:   #C5C4C2;

  /* Supporting surfaces used by the mockups (not part of the core palette) */
  --step-panel-bg:   #EEE8DE;  /* tinted card behind each step phone */
  --device-frame:    #1b1b1d;  /* phone bezel                        */
  --device-screen:   #08411f;  /* letterbox behind the camera screen */

  /* Warm ambient shadow cast by the phone mockups.
     Deliberately warm brown, not grey — greys are not used anywhere. */
  --warm-shadow: 120, 92, 52;

  /* Radii.
     NOTE: 16px (controls/rows) and 20px (large panels) are the house tokens.
     The mockup geometry below is dictated by device hardware, and the step
     panels ship at the design's 28px. See README for the open question. */
  --radius-control: 16px;
  --radius-panel:   20px;
  --radius-step-panel: 28px;

  /* Typography — resolves to SF Pro on Apple platforms, Inter where it is
     installed, and a neutral grotesk (Segoe UI / Roboto) everywhere else. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Hero mockup cluster is composed at a fixed 480×600 and scaled as one
     unit on narrow screens, so the overlap never breaks. */
  --phone-scale: 1;
}

/* ── 2. Reset & base ─────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; }

a {
  color: var(--accent-green);
  text-decoration: none;
}

a:hover { color: var(--highlight-green); }

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--highlight-green);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, p { margin: 0; }

/* Anchored sections clear the page top when jumped to. */
[id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 3. Layout primitives ────────────────────────────────────────────────── */

.shell {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.section-head {
  max-width: 620px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}

.eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--highlight-green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text-primary);
}

.section-lede {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 16px;
}

/* ── 4. Header / nav ─────────────────────────────────────────────────────── */

.site-header {
  max-width: 1160px;
  margin-inline: auto;
  padding: 22px clamp(20px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__spacer { flex: 1; }

/* The whole lockup is sized from one knob: .brand's font-size. The mark, the
   gap and the corner radius are all em-based, so changing --brand-size scales
   mark, wordmark and spacing together and keeps their proportions locked
   (mark 1.5x the wordmark, gap 0.42x, radius 0.306x the mark). */
.brand {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: var(--brand-size, 30px);
  gap: 0.4167em;
  color: var(--primary-green);
}

.brand:hover { color: var(--primary-green); }

/* App icon. Served at 144px and sized down here, so it stays sharp on
   high-DPI screens rather than rendering at its native pixel size. The
   artwork is a full-bleed square with its own green field, so it takes the
   same rounded-square treatment the placeholder mark had. */
.brand__mark {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.4583em;
  display: block;
  flex: none;
}

.brand__name {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary-green);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-green);
}

.site-nav a:hover { color: var(--highlight-green); }

/* ── 5. Hero ─────────────────────────────────────────────────────────────── */

.hero {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(16px, 4vw, 40px) clamp(20px, 5vw, 40px) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Grid items default to min-width:auto, which lets wide content push the
   track open. Pin them to 0 so the columns stay inside the viewport. */
.hero > * { min-width: 0; }

.hero__title {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-bottom: 22px;
  color: var(--text-primary);
}

.hero__title span { color: var(--highlight-green); }

.hero__lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 34px;
  max-width: 30ch;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.link-cta {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-green);
  padding: 15px 8px;
  border-radius: var(--radius-control);
}

/* Mockup stage — fixed 480×600 composition, scaled as a single unit so the
   phone overlap never re-flows. The inner stage is taken out of flow: a
   scale() transform does not shrink the layout box, so leaving it in flow
   would force a 480px floor on the grid column and overflow small screens. */
.hero__stage {
  position: relative;
  width: 100%;
  min-width: 0;
  height: calc(600px * var(--phone-scale));
}

.hero__stage-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 480px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) scale(var(--phone-scale));
  transform-origin: top center;
}

/* Warm pad grounding both phones */
.hero__shadow-pad {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--warm-shadow), 0.22);
  filter: blur(28px);
}

/* ── 6. Phone mockups (shared) ───────────────────────────────────────────── */

.phone {
  padding: 5px;
  background: var(--device-frame);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.phone__screen--dark { background: var(--device-screen); }

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 21px;
  background: #000;
  border-radius: 12px;
  z-index: 2;
}

.phone__notch--sm {
  top: 8px;
  width: 66px;
  height: 19px;
  border-radius: 11px;
}

/* Front / focal phone — camera scan */
.phone--scan {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 4px;
  width: 258px;
  border-radius: 48px;
  transform: rotate(6deg) translate(16px, -10px);
  box-shadow: 0 40px 60px -26px rgba(var(--warm-shadow), 0.42);
}

.phone--scan .phone__screen {
  border-radius: 43px;
  height: 548px;
}

.phone--scan .phone__screen img { object-position: center; }

/* Behind — home dashboard */
.phone--home {
  position: relative;
  z-index: 1;
  width: 244px;
  border-radius: 46px;
  transform: rotate(-6deg) translate(-94px, 8px);
  box-shadow: 0 30px 50px -24px rgba(var(--warm-shadow), 0.35);
}

.phone--home .phone__screen {
  border-radius: 41px;
  height: 516px;
}

/* Step cards */
.phone--step {
  width: 210px;
  border-radius: 44px;
  box-shadow: 0 26px 44px -24px rgba(var(--warm-shadow), 0.4);
}

.phone--step .phone__screen {
  border-radius: 39px;
  height: 445px;
}

/* ── 7. How it works ─────────────────────────────────────────────────────── */

.how {
  background: var(--panel-bg);
  padding-block: clamp(56px, 8vw, 104px);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  max-width: 1000px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.step__panel {
  background: var(--step-panel-bg);
  border-radius: var(--radius-step-panel);
  padding: 40px 32px;
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.step__num {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--bg);
  color: var(--accent-green);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__title,
.feature__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--primary-green);
}

.step__body,
.feature__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── 8. Why it works ─────────────────────────────────────────────────────── */

.why {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 40px);
}

.why .section-head { margin-bottom: clamp(40px, 6vw, 64px); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 5vw, 72px);
}

/* Camera icon */
.icon {
  display: block;
  position: relative;
  margin-bottom: 20px;
}

.icon--camera { width: 28px; height: 24px; }

.icon__body {
  display: block;
  position: relative;
  width: 26px;
  height: 20px;
  border: 2px solid var(--accent-green);
  border-radius: 5px;
}

.icon__hump {
  position: absolute;
  top: -5px;
  left: 7px;
  width: 10px;
  height: 5px;
  border: 2px solid var(--accent-green);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

.icon__lens {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent-green);
  border-radius: 50%;
}

/* Flame icon */
.icon--flame { width: 20px; height: 26px; }

.icon__flame {
  position: absolute;
  inset: 0;
  background: var(--accent-green);
  clip-path: path('M10 0C10 0 3 5 3 14a7 7 0 0 0 14 0c0-2.5-1.3-4.5-3.3-6.5 0 2.5-2 4-2 4S10.6 8 10 0Z');
}

/* ── 9. Document pages (legal) ───────────────────────────────────────────── */

.doc {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 40px) clamp(64px, 9vw, 104px);
  /* Holds the footer down while these pages are still placeholders. */
  min-height: 46vh;
}

/* 680px keeps the measure near 75 characters — comfortable for long-form
   reading, and still inside the 1160px shell every other page uses. */
.doc__inner { max-width: 680px; }

.doc__title {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--text-primary);
}

/* "Last updated" line */
.doc__meta {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 34px;
}

.doc__lede {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.62;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Placeholder line (terms-of-service.html) */
.doc__body {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Long-form content. Element selectors so future legal copy needs no classes.
   Section headings carry the site's heading treatment — 800 weight, tight
   tracking, primary green — at a size that suits a document: the 46px
   .section-title used on the landing page would swamp body copy. */
.doc__inner h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-green);
  margin: 46px 0 14px;
}

.doc__inner p,
.doc__inner li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.doc__inner p { margin-bottom: 16px; }

.doc__inner ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.doc__inner li { margin-bottom: 9px; }
.doc__inner li::marker { color: var(--highlight-green); }

.doc__inner strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Underlined in body copy: colour alone shouldn't be the only affordance. */
.doc__inner a {
  color: var(--accent-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.doc__inner a:hover { color: var(--highlight-green); }

/* ── 10. Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 40px) clamp(40px, 6vw, 64px);
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px 4px 0;
  border-top: 1px solid var(--border);
}

.site-footer__brand { max-width: 320px; }

/* Footer lockup — deliberately its own, smaller scale; not affected by
   --brand-size. Overrides the em sizing with explicit values. */
.brand--sm {
  font-size: 15px;
  margin-bottom: 14px;
  gap: 9px;
}

.brand--sm .brand__mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.site-footer__tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.site-footer__cols {
  display: flex;
  gap: clamp(40px, 6vw, 80px);
  flex-wrap: wrap;
}

.site-footer__heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  font-size: 14px;
  color: var(--text-secondary);
}

.site-footer__links a:hover { color: var(--highlight-green); }

.site-footer__bottom {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding-top: 24px;
  text-align: center;
}

.site-footer__bottom small {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ── 11. Responsive ──────────────────────────────────────────────────────── */

/* Between the stacking breakpoint and ~1150px the 1160px shell runs flush to
   the viewport edge, so the mockup cluster's intentional right-hand bleed has
   nowhere to go and the focal phone clips. Ease it down through that band.
   At 1160 (the design's native width) the composition fits at full size, so
   the band deliberately stops just short of it. */
@media (min-width: 981px) and (max-width: 1150px) {
  :root { --phone-scale: 0.85; }
}

/* Tablet — hero stacks, mockups lead with the copy above them. */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(24px, 4vw, 40px);
  }

  .hero__copy { max-width: 34rem; }

  .hero__lede {
    margin-inline: auto;
  }

  .hero__actions { justify-content: center; }

  :root { --phone-scale: 0.95; }
}

@media (max-width: 720px) {
  :root { --phone-scale: 0.82; }

  .site-header__spacer { display: none; }
  .brand { flex: none; }
  .site-nav { gap: 20px; }
}

/* Mobile — single-column footer, tighter nav, scaled-down mockups. */
@media (max-width: 560px) {
  :root { --phone-scale: 0.66; }

  :root { --brand-size: 24px; }

  .site-header { padding-block: 18px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 14px; }

  .step__panel { padding: 32px 20px; }

  .site-footer__top {
    flex-direction: column;
    gap: 32px;
  }

  .site-footer__cols { gap: 32px; }
}

/* Small handsets — the brand lockup and three nav links have to share one
   row, so trim both rather than wrap the nav under the logo. */
@media (max-width: 380px) {
  :root { --phone-scale: 0.56; --brand-size: 19px; }

  .site-header { padding-inline: 16px; gap: 8px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 13px; }
}