/* Home page redesign: cream, teal, rounded cards, hand-written sticky notes */
.bo2{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.bo2:hover{background:var(--teal-l)}
.btn.big{padding:15px 30px;font-size:16.5px;border-radius:14px}
.sm-u{position:relative;color:var(--teal);white-space:nowrap}
.sm-u::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;height:.16em;border-radius:6px;background:var(--gold);opacity:.75;z-index:-1}

.h2hero{overflow:hidden;padding:64px 0 70px;background:radial-gradient(900px 420px at 85% 10%,#F2E8D2 0,transparent 70%),var(--ivory)}
.h2grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.h2pill{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--b);color:var(--teal);background:var(--teal-l);padding:9px 14px;border-radius:30px}
.h2pill i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.h2txt h1{font:900 68px/1.04 var(--d);letter-spacing:-.04em;margin-top:20px}
.h2sub{font-size:18.5px;line-height:1.65;color:var(--ink2);margin-top:20px;max-width:46ch}
.h2cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.h2count{margin-top:22px;font-size:15px;color:var(--ink2)}
.h2count b{font:800 22px var(--d);color:var(--teal);margin-right:4px}

.h2art{position:relative;min-height:400px;padding:26px 0 40px}
.qcard{position:relative;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:24px;max-width:380px;margin-left:auto;box-shadow:0 30px 60px -28px rgba(28,26,23,.35);transform:rotate(1.5deg)}
.qtag{font:600 11.5px/1 var(--b);color:var(--teal);background:var(--teal-l);padding:6px 10px;border-radius:20px}
.qt{font:700 18px/1.4 var(--d);margin:14px 0}
.qopts{list-style:none;display:grid;gap:8px}
.qopts li{display:flex;gap:10px;align-items:center;border:1.5px solid var(--rule);border-radius:12px;padding:10px 12px;font-size:14.5px}
.qopts li b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sand);font-size:12px}
.qopts li.ok{border-color:var(--teal);background:var(--teal-l)}
.qopts li.ok b{background:var(--teal);color:#fff}
.qok{display:inline-block;margin-top:14px;font:700 13px var(--b);color:var(--teal)}
.sticky{position:absolute;font:italic 600 16px/1.25 var(--d);color:#4a3b00;background:#FFE58A;padding:14px 16px;border-radius:4px 4px 14px 4px;box-shadow:0 12px 22px -10px rgba(0,0,0,.35)}
.sticky b{font-weight:800}
.s1{left:-6px;top:-8px;transform:rotate(-6deg);z-index:2}
.s2{right:14px;bottom:-14px;background:#CDEBE5;color:#0b3f38;transform:rotate(4deg)}
.mini-map{position:absolute;left:-10px;bottom:-6px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mm-c{background:var(--teal);color:#fff;font:700 13px var(--b);padding:8px 14px;border-radius:12px}
.mm-p{font:600 12px var(--b);padding:6px 11px;border-radius:20px;margin-left:18px}
.p1{background:#FCE4D8;color:#8a3412}.p2{background:#D9EEF7;color:#115a78}.p3{background:#E6F2D5;color:#3c6a12}
.squig{position:absolute;left:34%;top:-24px;opacity:.9}

.h2h{font:800 36px/1.15 var(--d);letter-spacing:-.03em;text-align:center}
.h2cards{padding:70px 0;background:var(--sand2)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.fc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:24px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;position:relative}
.fc:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(28,26,23,.4)}
.fc:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.fi{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:26px}
.c-teal .fi{background:var(--teal-l)}.c-gold .fi{background:var(--gold-l)}.c-clay .fi{background:var(--clay-l)}.c-blue .fi{background:#DCEBF6}
.fc h3{font:700 20px/1.25 var(--d);margin:16px 0 8px}
.fc p{font-size:14.5px;line-height:1.6;color:var(--ink2)}
.go{margin-top:auto;padding-top:18px;font:700 14px var(--b);color:var(--teal)}
.h2more{text-align:center;margin-top:28px;color:var(--ink2);font-size:15px}
.h2more a{color:var(--teal);font-weight:600}

.h2rev{padding:70px 0 90px}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.rev{background:#fff;border:1px solid var(--rule);border-radius:22px;padding:24px;margin:0}
.rev .stars{color:var(--gold);font-size:18px;letter-spacing:2px}
.rev blockquote{margin:12px 0;font-size:15.5px;line-height:1.65;color:var(--ink2)}
.rev figcaption{font:700 14px var(--b)}
.rev.empty{grid-column:1/-1;text-align:center;padding:40px 24px;background:var(--sand2);border-style:dashed}
.rev.empty p{font-size:16px;color:var(--ink2);margin-bottom:16px}

@media (max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}.revgrid{grid-template-columns:1fr}}
@media (max-width:820px){
  .h2hero{padding:38px 0 44px}
  .h2grid{grid-template-columns:1fr;gap:30px}
  .h2txt h1{font-size:44px}
  .h2sub{font-size:16.5px}
  .h2art{min-height:340px}
  .qcard{margin:0 auto;max-width:340px}
  .s1{left:-4px}.s2{right:0}
  .h2h{font-size:28px}
  .h2cards,.h2rev{padding:46px 0}
}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}.h2cta .btn{flex:1;text-align:center}.mini-map{display:none}.squig{display:none}}
@media (prefers-reduced-motion:reduce){.fc{transition:none}}


/* reviews: swipe row on phones, grid on larger screens */
.vidh{font:800 24px/1.2 var(--d);letter-spacing:-.02em;text-align:center;margin:44px 0 18px}
.vidrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vid{margin:0;background:#fff;border:1px solid var(--rule);border-radius:22px;overflow:hidden}
.vplay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;aspect-ratio:9/12;border:0;cursor:pointer;
  background:linear-gradient(160deg,var(--teal),var(--teal-d));color:#fff;font:700 15px var(--b)}
.vtri{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--teal);font-size:24px;padding-left:5px}
.vid video{display:block;width:100%;aspect-ratio:9/12;background:#000;object-fit:contain}
.vid figcaption{padding:14px 16px;font:700 14.5px var(--b)}
.vid figcaption small{display:block;font-weight:400;color:var(--ink2);margin-top:4px;line-height:1.5}
.vid .stars{color:var(--gold);letter-spacing:2px;margin-right:6px}
.revgrid.has{align-items:stretch}
@media (max-width:820px){
  .revgrid.has,.vidrow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
  .revgrid.has::-webkit-scrollbar,.vidrow::-webkit-scrollbar{display:none}
  .revgrid.has .rev,.vidrow .vid{flex:0 0 82%;scroll-snap-align:center}
  .vidh{font-size:21px;margin-top:30px}
}

/* reviewer photo, falls back to the first initial */
.rev figcaption,.vid figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.av{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal-l);color:var(--teal);font:800 16px var(--b);overflow:hidden;flex:0 0 auto}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.vid figcaption small{flex:1 1 100%}

/* owner reply under a review */
.rrep{margin-top:14px;padding:12px 14px;background:var(--teal-l);border-left:4px solid var(--teal);border-radius:0 12px 12px 0}
.rrep b{display:block;font:700 12px var(--b);letter-spacing:.05em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.rrep p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.vid .rrep{margin:0 14px 14px}
