/* ============================================================
   landing.css — shared design system for Mohammad Emon's
   Google Ads landing pages.  Look A: "Slate & Brass".
   Mobile-first. No framework. Native <details> FAQ (no JS).
   ============================================================ */

:root {
  /* palette */
  --ink:        #0f1f38;   /* slate navy */
  --ink-2:      #34435c;   /* body text */
  --ink-3:      #66728a;   /* muted */
  --brass:      #c79a3b;   /* KO gold */
  --brass-dk:   #a97f28;   /* hover */
  --bone:       #faf8f3;   /* page bg */
  --paper:      #ffffff;   /* cards */
  --sand:       #e7e0d0;   /* hairline */
  --sand-2:     #f1ece1;   /* soft fill */
  --ok:         #2f6a52;   /* success/confirm */
  --focus:      #2b6cb0;   /* visible focus ring */

  /* type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(15,31,56,0.12);
  --shadow-sm: 0 4px 16px rgba(15,31,56,0.08);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-2);
  background: var(--bone);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brass-dk); }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .4em; font-weight: 700; }
p { margin: 0 0 1em; }
.lp-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

/* visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}
.lp-skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; }
.lp-skip:focus { left:8px; top:8px; }

/* ---------- header (no nav; logo is NOT a link) ---------- */
.lp-header { background: var(--ink); color: #fff; }
.lp-header__in { display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 12px 20px; max-width: var(--wrap); margin-inline:auto; }
.lp-logo { display:flex; align-items:center; gap:10px; }
.lp-logo img { width:38px; height:38px; }
.lp-logo__name { font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; line-height:1.05; }
.lp-logo__sub { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.lp-header__call { display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--ink); background:var(--brass); border-radius:9px; padding:9px 15px; text-decoration:none; font-size:.95rem; white-space:nowrap; }
.lp-header__call:hover { background:#d8ab4a; }

/* ---------- trilingual greeting band (signature) ---------- */
.lp-greet { background: var(--sand-2); border-bottom:1px solid var(--sand); }
.lp-greet__in { max-width:var(--wrap); margin-inline:auto; padding: 9px 20px; text-align:center;
  font-family:var(--font-display); font-weight:600; color:var(--ink); letter-spacing:.06em; font-size:.98rem; }
.lp-greet__in span { color:var(--brass-dk); }
.lp-greet__in i { color:var(--sand); font-style:normal; margin:0 .5em; }

/* ---------- hero ---------- */
.lp-hero { padding: 30px 0 8px; }
.lp-hero__in { display:grid; grid-template-columns: 1fr; gap: 26px; align-items:start; }
.lp-h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.lp-sub { font-size: 1.1rem; color: var(--ink-2); margin: 0 0 4px; max-width: 40ch; }
.lp-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lp-chip { font-size:.8rem; font-weight:600; color:var(--ink-2); background:var(--paper); border:1px solid var(--sand); border-radius:999px; padding:6px 13px; }

/* ---------- form card ---------- */
.lp-form-card { background:var(--paper); border:1px solid var(--sand); border-top:4px solid var(--brass); border-radius:var(--radius); padding: 22px; box-shadow:var(--shadow); }
.lp-form-card h2 { font-size:1.3rem; margin:0 0 4px; }
.lp-form-card .lp-note { color:var(--ink-3); font-size:.9rem; margin:0 0 16px; }
.lp-field { margin-bottom:13px; }
.lp-field label { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:5px; }
.lp-input, .lp-select {
  width:100%; font: inherit; font-size:1rem; color:var(--ink);
  background:var(--bone); border:1px solid var(--sand); border-radius:9px;
  padding:12px 14px; -webkit-appearance:none; appearance:none;
}
.lp-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2366728a' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.lp-input:focus, .lp-select:focus { border-color:var(--brass); background:#fff; }
.lp-input::placeholder { color:#9aa3b2; }

/* ---------- buttons ---------- */
.lp-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-weight:700; font-size:1.02rem; border:0; border-radius:10px; padding:14px 20px; cursor:pointer; text-decoration:none; width:100%; }
.lp-btn--primary { background:var(--brass); color:var(--ink); }
.lp-btn--primary:hover { background:var(--brass-dk); color:#fff; }
.lp-btn--call { background:var(--ink); color:#fff; margin-top:12px; }
.lp-btn--call:hover { background:#183256; }
.lp-btn--ghost { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.lp-or { text-align:center; color:var(--ink-3); font-size:.82rem; margin:12px 0 2px; text-transform:uppercase; letter-spacing:.1em; }

/* form success */
.lp-form-success { display:none; text-align:center; padding:18px 0; }
.lp-form-success .tick { font-size:2rem; }

/* ---------- media placeholders (explicit ratio, no CLS) ---------- */
.lp-media { position:relative; width:100%; background:
  repeating-linear-gradient(45deg, var(--sand-2), var(--sand-2) 12px, #ece5d6 12px, #ece5d6 24px);
  border:1px solid var(--sand); border-radius:var(--radius); overflow:hidden; }
.lp-media--169 { aspect-ratio: 16 / 9; }
.lp-media--45  { aspect-ratio: 4 / 5; }
.lp-media__label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-3); font-size:.85rem; font-weight:600; padding:12px; }

/* ---------- sections ---------- */
.lp-section { padding: 40px 0; }
.lp-section--alt { background:var(--sand-2); border-block:1px solid var(--sand); }
.lp-eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-dk); margin-bottom:8px; }
.lp-h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }

/* how it works — 3 steps */
.lp-steps { display:grid; gap:16px; margin-top:22px; }
.lp-step { background:var(--paper); border:1px solid var(--sand); border-radius:var(--radius); padding:20px; }
.lp-step__num { width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--brass); font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.lp-step h3 { font-size:1.1rem; margin:0 0 5px; }
.lp-step p { margin:0; font-size:.96rem; }

/* why mohammad */
.lp-why { display:grid; gap:22px; align-items:center; }
.lp-why p { font-size:1.02rem; }

/* generic content blocks (extra sections) */
.lp-prose p { font-size:1rem; }
.lp-prose ul { margin:0 0 1em; padding-left:1.15em; }
.lp-prose li { margin-bottom:.4em; }

/* prominent notice */
.lp-notice { background:#fff7e6; border:1px solid var(--brass); border-left:5px solid var(--brass); border-radius:12px; padding:18px 20px; }
.lp-notice h3 { color:var(--brass-dk); font-size:1.05rem; margin:0 0 6px; }
.lp-notice p { margin:0; color:var(--ink-2); }

/* placeholder content block (for lawyer-verify etc.) */
.lp-placeholder { background:var(--sand-2); border:1px dashed var(--ink-3); border-radius:10px; padding:16px 18px; color:var(--ink-2); font-size:.95rem; }

/* disclaimer */
.lp-disclaimer { font-size:.85rem; color:var(--ink-3); margin-top:14px; }

/* ---------- savings calculator (sell page) ---------- */
.lp-calc { background:var(--paper); border:1px solid var(--sand); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.lp-calc__row { margin-bottom:18px; }
.lp-calc__row label { display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.lp-calc__val { font-family:var(--font-display); font-weight:700; color:var(--brass-dk); }
.lp-calc input[type=range] { width:100%; accent-color:var(--brass); }
.lp-calc__out { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.lp-calc__card { background:var(--bone); border:1px solid var(--sand); border-radius:10px; padding:14px; text-align:center; }
.lp-calc__card b { display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }
.lp-calc__card.win { background:#f0f6f2; border-color:#bfe0cf; }
.lp-calc__card.win b { color:var(--ok); }
.lp-calc__card span { font-size:.78rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- FAQ (native details) ---------- */
.lp-faq { max-width:760px; }
.lp-faq details { border-bottom:1px solid var(--sand); }
.lp-faq summary { list-style:none; cursor:pointer; padding:18px 0; font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.03rem; display:flex; justify-content:space-between; gap:14px; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"+"; color:var(--brass-dk); font-size:1.4rem; line-height:1; flex-shrink:0; }
.lp-faq details[open] summary::after { content:"\2013"; }
.lp-faq .lp-faq__a { padding:0 0 18px; font-size:.98rem; color:var(--ink-2); }

/* ---------- repeated CTA ---------- */
.lp-cta { background:var(--ink); color:#fff; border-radius:var(--radius); padding: clamp(26px,5vw,44px); text-align:center; }
.lp-cta h2 { color:#fff; }
.lp-cta p { color:#cdd6e4; max-width:46ch; margin-inline:auto; }
.lp-cta__btns { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:440px; margin:20px auto 0; }
.lp-cta__btns .lp-btn { width:auto; flex:1 1 180px; }
.lp-cta .lp-btn--primary { background:var(--brass); }
.lp-cta .lp-btn--ghost { color:#fff; border-color:rgba(255,255,255,.5); }

/* ---------- compliance footer ---------- */
.lp-footer { background:var(--ink); color:#aeb9cc; padding: 26px 0 100px; font-size:.82rem; line-height:1.6; }
.lp-footer__legal { max-width:820px; }
.lp-footer a { color:#cdd6e4; }
.lp-footer__meta { margin-top:12px; color:#7d879b; }

/* ---------- sticky mobile bar ---------- */
.lp-sticky { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:1px; background:var(--sand); box-shadow:0 -6px 20px rgba(15,31,56,.16); }
.lp-sticky a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 8px; font-weight:700; font-size:.98rem; text-decoration:none; }
.lp-sticky__call { background:var(--ink); color:#fff; }
.lp-sticky__form { background:var(--brass); color:var(--ink); }
@media (min-width: 861px) { .lp-sticky { display:none; } .lp-footer { padding-bottom:26px; } }

/* ---------- desktop layout ---------- */
@media (min-width: 861px) {
  body { font-size:18px; }
  .lp-hero { padding: 44px 0 12px; }
  .lp-hero__in { grid-template-columns: 1.02fr .98fr; gap: 44px; }
  .lp-form-card { position: sticky; top: 16px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
  .lp-why { grid-template-columns: 1.1fr .9fr; }
}