/* KAGO Landing Pages - LP-specific layout on the Hallmark system.
 * Loaded AFTER guides.css (base tokens, nav, chero, footer, btn) and BEFORE enhance.css.
 * No CDNs, local assets only, no em/en dashes, WCAG-AA, reduced-motion aware.
 */

/* thin outline icon system (Lucide) - matches index.html */
.ico{display:inline-flex;flex:0 0 auto;width:30px;height:30px;color:var(--ochre)}
.ico svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* LP hero - extends .chero with a two-column photo layout + gift hook */
.lp-hero .wrap{position:relative;z-index:2}
.lp-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.lp-hero h1{max-width:15ch}
.lp-hero__gift{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;background:color-mix(in srgb,var(--ochre) 16%,transparent);border:1px solid color-mix(in srgb,var(--ochre) 45%,transparent);color:var(--ochre-lt);border-radius:2px;padding:.6rem .9rem;font-weight:700;font-size:.95rem}
.lp-hero__gift .ico{width:22px;height:22px;color:var(--ochre-lt)}
.lp-hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:1.8rem}
.lp-hero__note{margin-top:1.2rem;font-size:.85rem;color:color-mix(in srgb,var(--on-ink) 62%,transparent)}
.lp-hero__photo{position:relative;isolation:isolate}
.lp-hero__photo img{position:relative;z-index:2;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;border-radius:3px;box-shadow:0 30px 64px rgba(0,0,0,.42)}
.lp-hero__photo:before{content:"";position:absolute;z-index:1;right:-4%;bottom:-5%;width:56%;height:64%;background:var(--ochre);border-radius:3px}
.lp-hero__photo:after{content:"";position:absolute;z-index:1;left:-5%;top:-5%;width:32%;height:32%;border:2px solid color-mix(in srgb,var(--ochre) 70%,transparent);border-radius:3px}
/* gradient-only hero fallback (no photo) */
.lp-hero--noimg .lp-hero__grid{grid-template-columns:1fr;max-width:34ch}

/* benefit / proof points */
.lp-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.lp-point{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--off);border:1px solid var(--rule);border-left:3px solid var(--ochre);border-radius:2px;padding:1.3rem 1.5rem}
.lp-point .ico{margin-top:.15rem}
.lp-point h3{font-size:1.22rem;font-weight:800;margin-bottom:.3rem}
.lp-point p{color:var(--muted);font-size:1rem}

/* the gift + lead form band */
.lp-offer{background:var(--cream-2)}
.lp-offer__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.lp-gift{background:var(--ink);color:var(--on-ink);border-radius:4px;border-top:5px solid var(--ochre);padding:clamp(1.5rem,4vw,2.4rem);position:relative;overflow:hidden}
.lp-gift:before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--ochre) 16%,transparent),transparent 60%);pointer-events:none}
.lp-gift>*{position:relative;z-index:2}
.lp-gift .eyebrow{color:var(--ochre-lt);margin-bottom:.8rem}
.lp-gift h2{color:var(--on-ink);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.02em}
.lp-gift p{color:color-mix(in srgb,var(--on-ink) 78%,transparent);margin:.8rem 0 1.1rem;font-size:1rem}
.lp-gift ul{list-style:none;display:grid;gap:.6rem;margin:0}
.lp-gift li{position:relative;padding-left:1.5rem;color:color-mix(in srgb,var(--on-ink) 88%,transparent);font-size:.98rem;font-weight:600}
.lp-gift li:before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--ochre)}
.lp-gift .btn{margin-top:1.4rem}

/* funnel product cards (reuse .item so scope-modal.js auto-wires; dark band) */
.lp-funnel{background:var(--ink);color:var(--on-ink)}
.lp-funnel .sec-head h2{color:var(--on-ink)}
.lp-funnel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.item{border:1px solid color-mix(in srgb,var(--on-ink) 18%,transparent);border-radius:3px;padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;min-height:230px;transition:transform var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out)}
.item:hover{transform:translateY(-6px);background:color-mix(in srgb,var(--on-ink) 5%,transparent)}
.item.star{border-color:var(--ochre);background:color-mix(in srgb,var(--ochre) 11%,transparent)}
.item .tag{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre-lt)}
.item h3{color:var(--on-ink);font-size:1.5rem;font-weight:800;margin:.5rem 0 .4rem}
.item p{color:color-mix(in srgb,var(--on-ink) 66%,transparent);font-size:.95rem;flex:1}
.item .price{font-family:var(--font-display);font-weight:900;font-size:2rem;color:var(--ochre-lt);margin-top:1rem;font-variant-numeric:tabular-nums}
.item .price small{font-family:var(--font-body);font-weight:600;font-size:.8rem;color:color-mix(in srgb,var(--on-ink) 55%,transparent);display:block}
.lp-funnel__foot{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;color:color-mix(in srgb,var(--on-ink) 66%,transparent);font-size:.95rem}

/* honesty strip */
.lp-honest{background:var(--cream-2);text-align:center}
.lp-honest .wrap{max-width:760px}
.lp-honest h2{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:800;letter-spacing:-.02em}
.lp-honest h2 em{font-style:normal;color:var(--clay)}
.lp-honest p{color:var(--muted);font-size:1.08rem;margin-top:1rem}

/* section heads reused on LP */
.sec-head{max-width:48ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em}
.sec-head p{color:var(--muted);font-size:1.08rem;margin-top:1rem;max-width:var(--measure)}

@media(max-width:880px){
  .lp-hero__grid,.lp-offer__grid{grid-template-columns:1fr}
  .lp-hero__photo{max-width:420px;margin:.5rem auto 0}
  .lp-points{grid-template-columns:1fr}
}