/* ============================================================
   landing.css — shared styles for MikeyFilms local-SEO landing
   pages. Pairs with /fonts.css. Reuses the site's "drawn to spec"
   design tokens so every landing page matches the main site.
   ============================================================ */

:root{
  --bench:      #181310;
  --bench-2:    #211913;
  --bench-3:    #120e0b;
  --sawdust:    #ece3d1;
  --sawdust-dim:#b9ad98;
  --muted:      #8c8170;
  --ember:      #e9863b;
  --ember-deep: #c96b27;
  --chalk:      #8897a3;
  --chalk-dim:  rgba(136,151,163,.30);
  --line:       rgba(236,227,209,.12);
  --line-soft:  rgba(236,227,209,.07);
  --grid:       rgba(136,151,163,.05);

  --radius:    9px;
  --radius-sm: 6px;

  --wrap: 1040px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --sec-y: clamp(3rem, 7vw, 5.5rem);

  --mono: "Space Mono", ui-monospace, monospace;
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bench);
  color:var(--sawdust);
  font-family:var(--body);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ember); color:var(--bench); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
.eyebrow{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--chalk); }
.fig{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:800; line-height:1.04; margin:0; }
h1{ font-size:clamp(2.1rem,1.3rem + 3.4vw,3.4rem); letter-spacing:-.02em; }
h2{ font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem); font-weight:700; letter-spacing:-.015em; }
h3{ font-size:1.24rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }

a.inl{ color:var(--ember); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--chalk-dim); }
a.inl:hover{ text-decoration-color:var(--ember); }

/* buttons — identical to the main site */
.btn{ --bg:var(--ember); --fg:var(--bench);
  display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.85rem 1.4rem; border:1px solid var(--bg);
  background:var(--bg); color:var(--fg); cursor:pointer; line-height:1; border-radius:var(--radius-sm);
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease; }
.btn .arr{ transition:transform .2s ease; }
.btn:hover{ background:var(--ember-deep); border-color:var(--ember-deep); transform:translateY(-2px); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:var(--sawdust); border-color:var(--line); }
.btn--ghost:hover{ background:transparent; border-color:var(--chalk); color:var(--sawdust); transform:translateY(-2px); }
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.skip{ position:fixed; top:-100px; left:1rem; z-index:400; background:var(--ember); color:var(--bench);
  padding:.7rem 1.1rem; border-radius:var(--radius-sm); font-family:var(--mono); font-weight:700; font-size:.8rem; transition:top .18s ease; }
.skip:focus{ top:1rem; }

/* RGB accent bar */
@keyframes slide-rgb { to { background-position:200% 0; } }
.rgb-bar{ height:3px; width:100%;
  background:linear-gradient(90deg,#e9863b,#e5c65a,#5ac37a,#4aa3d6,#8a6fd6,#d65a9a,#e9863b);
  background-size:200% 100%; animation:slide-rgb 9s linear infinite; }

/* ---- header ---- */
.lp-nav{ position:sticky; top:0; z-index:50; background:rgba(24,19,16,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.lp-nav .bar{ display:flex; align-items:center; gap:1rem; min-height:64px; }
.lp-brand{ display:inline-flex; align-items:center; gap:.6rem; }
.lp-brand img{ width:30px; height:30px; }
.lp-brand .word{ font-family:var(--disp); font-weight:800; font-size:1.12rem; letter-spacing:-.01em; color:var(--sawdust); }
.lp-brand .word b{ color:var(--ember); font-weight:800; }
.lp-nav .links{ margin-left:auto; display:flex; align-items:center; gap:1.4rem; }
.lp-nav .links a{ font-family:var(--mono); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); }
.lp-nav .links a:hover{ color:var(--sawdust); }
.lp-nav .links a.btn{ color:var(--bench); }
.lp-nav .links a.btn:hover{ color:var(--bench); }
@media (max-width:640px){
  .lp-nav .links{ gap:.8rem; }
  .lp-nav .links a.plain{ display:none; }
}

/* ---- hero ---- */
.lp-hero{ padding-block:clamp(2.6rem,6vw,4.6rem) clamp(1.6rem,4vw,2.6rem); }
.lp-crumb{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.3rem; }
.lp-crumb a{ color:var(--chalk); }
.lp-crumb a:hover{ color:var(--ember); }
.lp-crumb span{ color:var(--muted); }
.lp-hero h1{ margin:.7rem 0 0; max-width:20ch; }
.lp-hero .sub{ color:var(--sawdust-dim); font-size:clamp(1.05rem,1rem + .5vw,1.22rem); max-width:56ch; margin-top:1.1rem; }
.lp-hero .cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.lp-hero .price-tag{ font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; color:var(--chalk); margin-top:1.2rem; }
.lp-hero .price-tag b{ color:var(--ember); }

/* ---- content sections ---- */
main{ display:block; }
.lp-section{ padding-block:var(--sec-y); border-top:1px solid var(--line-soft); }
.lp-section > .wrap > .fig{ display:block; margin-bottom:.9rem; }
.lp-section h2{ max-width:26ch; }
.lp-section .lede{ color:var(--sawdust-dim); margin-top:1rem; max-width:62ch; }
.lp-prose > * + *{ margin-top:1.05rem; }
.lp-prose p{ color:var(--sawdust-dim); max-width:64ch; }
.lp-prose h2{ margin-top:2.2rem; }
.lp-prose ul{ margin:.4rem 0 0; padding:0; list-style:none; max-width:62ch; }
.lp-prose li{ position:relative; padding-left:1.5rem; color:var(--sawdust-dim); margin-top:.55rem; }
.lp-prose li::before{ content:"—"; position:absolute; left:0; color:var(--ember); font-family:var(--mono); }

/* feature grid */
.lp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:1.8rem; }
.lp-grid .cell{ background:var(--bench-2); padding:1.5rem 1.35rem; }
.lp-grid .cell .n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); }
.lp-grid .cell h3{ margin:.6rem 0 .4rem; }
.lp-grid .cell p{ color:var(--sawdust-dim); font-size:.95rem; }

/* FAQ */
.lp-faq{ margin-top:1.6rem; border-top:1px solid var(--line); }
.lp-faq details{ border-bottom:1px solid var(--line); }
.lp-faq summary{ list-style:none; cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0; position:relative; font-family:var(--disp); font-weight:700; font-size:1.08rem; color:var(--sawdust); }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{ content:"+"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%); font-family:var(--mono); color:var(--ember); font-size:1.3rem; transition:transform .2s ease; }
.lp-faq details[open] summary::after{ content:"\2013"; }
.lp-faq .a{ padding:0 0 1.2rem; color:var(--sawdust-dim); max-width:64ch; }

/* CTA band */
.lp-cta{ padding-block:clamp(2.8rem,7vw,5rem); border-top:1px solid var(--line); background:
  radial-gradient(120% 140% at 50% 0%, rgba(233,134,59,.10), transparent 60%); }
.lp-cta .box{ text-align:center; }
.lp-cta h2{ margin-inline:auto; max-width:20ch; }
.lp-cta p{ color:var(--sawdust-dim); margin:1rem auto 0; max-width:52ch; }
.lp-cta .cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.8rem; }

/* tool widget wrapper (embedded calculators) */
.lp-tool{ margin-top:1.9rem; }

/* ---- footer ---- */
.lp-foot{ border-top:1px solid var(--line); padding-block:2.6rem 2rem; }
.lp-foot .cols{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; align-items:baseline; }
.lp-foot .brand{ display:inline-flex; align-items:center; gap:.55rem; }
.lp-foot .brand img{ width:26px; height:26px; }
.lp-foot .brand .word{ font-family:var(--disp); font-weight:800; font-size:1rem; color:var(--sawdust); }
.lp-foot .brand .word b{ color:var(--ember); }
.lp-foot nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-left:auto; }
.lp-foot nav a{ font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk); }
.lp-foot nav a:hover{ color:var(--ember); }
.lp-foot .base{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line-soft); color:var(--muted); font-size:.82rem; }
.lp-foot .base b{ color:var(--sawdust-dim); font-weight:700; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}