/* KwickPhone shared landing-page layout (hero variants + bands).
   Edit THIS file to change hero/zigzag/band styling site-wide — no page regen needed.
   Served with a short revalidating cache (see nginx exact-match rule), so edits go live in minutes. */

/* shared hero variants: split (image right/left) + centered (image below) */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:stretch}
.hero-split h1{max-width:none}
.hero-art{border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(22,18,14,.16);min-height:320px}
.hero-art img,.hero-art video{display:block;width:100%;height:100%;min-height:320px;object-fit:cover}
.hero-img-left .hero-copy{order:2}.hero-img-left .hero-art{order:1}
.hero-below .hero-copy{max-width:780px;margin:0 auto;text-align:center}
.hero-below .hero-copy h1,.hero-below .hero-copy .lead{max-width:none}
.hero-below .hero-copy .brandbar,.hero-below .hero-copy .cta,.hero-below .hero-copy .trust{justify-content:center}
.hero-below .hero-copy .roadnote{margin-left:auto;margin-right:auto}
/* zigzag "why" band */
.zz{background:#fff;border-top:1px solid var(--line,rgba(21,17,13,.12));border-bottom:1px solid var(--line,rgba(21,17,13,.12))}
.zz .wrap{padding-top:60px;padding-bottom:60px}
.zz .ey{margin-bottom:10px}.zz>.wrap>.h2{margin-bottom:8px}
.zzrow{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:40px}
.zzrow.rev .zztext{order:2}.zzrow.rev .zzimg{order:1}
.zztext h3{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.4em}
.zztext p{color:var(--mut,var(--muted,#6e665c));font-size:1.02rem;max-width:46ch}
.zzimg{border-radius:16px;overflow:hidden;box-shadow:0 16px 44px -18px rgba(22,18,14,.3)}
.zzimg img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* full-bleed image band */
.fbsec{padding:34px 0}
.fb{position:relative;border-radius:18px;overflow:hidden;min-height:400px;display:flex;align-items:flex-end}
.fb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fb .fb-cap{position:relative;width:100%;padding:40px 38px;color:#fff;background:linear-gradient(0deg,rgba(15,12,9,.82),rgba(15,12,9,.35) 55%,rgba(15,12,9,0))}
.fb .fb-cap h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;max-width:18ch;line-height:1.08}
.fb .fb-cap p{max-width:56ch;color:rgba(255,255,255,.92);margin-top:10px;font-size:1.02rem}
/* feature card grid (image-free) */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.c3{background:var(--panel,var(--bg2,#f7f5f1));border:1px solid var(--line,rgba(21,17,13,.12));border-radius:16px;padding:26px 24px}
.c3 .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(225,37,27,.09);color:var(--accent);margin-bottom:15px}
.c3 .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c3 h3{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.35em}
.c3 p{color:var(--mut,var(--muted,#6e665c));font-size:.96rem}
/* breadcrumb (deep matrix pages get an explicit up-path) */
.crumbs{border-bottom:1px solid var(--line,rgba(21,17,13,.12));font-size:.85rem}
.crumbs .wrap{padding:22px 0 16px;display:flex;flex-wrap:wrap;align-items:center;column-gap:11px;row-gap:4px}
.crumbs a{color:var(--mut,var(--muted,#6e665c));text-decoration:none}
.crumbs a:hover{color:var(--accent,#e1251b);text-decoration:underline}
.crumbs .sep{color:var(--mut,var(--muted,#6e665c));opacity:.55;margin:0}
.crumbs .cur{color:var(--ink,#15110d);font-weight:600;margin:0}
/* sibling use-case cross-links */
.sib{background:var(--panel,var(--bg2,#f7f5f1));border-top:1px solid var(--line,rgba(21,17,13,.12));border-bottom:1px solid var(--line,rgba(21,17,13,.12))}
.sib .wrap{padding-top:54px;padding-bottom:54px}
.sib .h2{margin:6px 0 4px}
.sibgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:24px}
.sibgrid a{display:block;padding:14px 16px;background:#fff;border:1px solid var(--line,rgba(21,17,13,.12));border-radius:12px;text-decoration:none;color:var(--ink,#15110d);font-weight:600;font-size:.96rem;transition:.15s}
.sibgrid a:hover{border-color:var(--accent,#e1251b);box-shadow:0 8px 22px -12px rgba(22,18,14,.28);transform:translateY(-1px)}
.sib .cta{margin-top:24px}
/* real-restaurant directory / showcase cards */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:18px;margin-top:30px}
.rcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,rgba(21,17,13,.12));border-radius:16px;padding:22px 22px 20px;transition:.15s}
.rcard:hover{border-color:var(--accent,#e1251b);box-shadow:0 14px 34px -18px rgba(22,18,14,.32);transform:translateY(-2px)}
.rcard .rname{font-family:var(--disp,'Hanken Grotesk','Inter',sans-serif);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;color:var(--ink,#15110d);line-height:1.15}
.rcard .rmeta{color:var(--mut,var(--muted,#6e665c));font-size:.92rem;margin-top:4px}
.rcard .rtag{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green,#1a8a3a);background:rgba(26,138,58,.1);border:1px solid rgba(26,138,58,.28);border-radius:999px;padding:4px 10px;margin-top:13px;align-self:flex-start}
.rcard .rtag .dot{width:7px;height:7px;border-radius:50%;background:var(--green,#1a8a3a)}
.rcard .rquote{margin-top:13px;font-size:.92rem;color:var(--ink,#15110d);font-style:italic;line-height:1.45}
.rcard .ract{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:9px}
.rcard a.order{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent,#e1251b);color:#fff;font-weight:700;font-size:.95rem;padding:11px 14px;border-radius:10px;text-decoration:none}
.rcard a.order:hover{filter:brightness(.94)}
.rcard a.callai{display:inline-flex;align-items:center;gap:7px;color:var(--ink,#15110d);font-weight:600;font-size:.9rem;text-decoration:none}
.rcard a.callai svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.rcard a.callai .lbl{color:var(--mut,var(--muted,#6e665c));font-weight:500}
.rcard a.callai:hover{color:var(--accent,#e1251b)}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:26px}.hero-img-left .hero-copy{order:1}.hero-img-left .hero-art{order:2}
  .hero-art{min-height:0}.hero-art img,.hero-art video{height:auto;min-height:0;aspect-ratio:16/9}
  .zzrow,.zzrow.rev{grid-template-columns:1fr;gap:22px}.zzrow.rev .zztext,.zzrow.rev .zzimg{order:initial}
  .cards3{grid-template-columns:1fr}.fb .fb-cap{padding:26px 22px}
  .sibgrid{grid-template-columns:1fr}}