/* =========================================================================
   LoveGoBuy Spreadsheet — lovegobuysheet.org
   Editorial / search-first template. Intentionally distinct from sibling
   sites: numbered sections, bento grid, category tiles, vertical timeline,
   dark accent band. LoveGoBuy brand identity (coral/red + heart).
   ========================================================================= */
:root{
  --bg:#FFFFFF;
  --bg-soft:#FFF6F2;
  --bg-tint:#FFEFE8;
  --ink:#1A1620;
  --ink-2:#574F5E;
  --ink-3:#8A8290;
  --line:#F0E2DA;
  --line-2:#EADCD3;
  --red:#FF3B30;
  --coral:#FF6A4D;
  --coral-2:#FF8A6B;
  --grad:linear-gradient(100deg,#FF7A52,#FF3B30);
  --grad-2:linear-gradient(135deg,#FF8A6B,#FF2E58);
  --dark:#1C1822;
  --dark-2:#262030;
  --leaf:#13B981;
  --gold:#FFB02E;
  --indigo:#5B6CFF;
  --shadow:0 18px 40px rgba(255,72,52,.14);
  --shadow-sm:0 8px 20px rgba(60,30,20,.08);
  --rad:18px;
  --rad-lg:26px;
  --maxw:1160px;
  --head:'Space Grotesk',system-ui,Segoe UI,sans-serif;
  --body:'Inter',system-ui,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.16rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red)}
.lead{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:600;font-size:.98rem;
  padding:.78em 1.5em;border-radius:999px;border:0;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-red{background:var(--grad);color:#fff;box-shadow:var(--shadow-sm)}
.btn-red:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;text-decoration:none}
.btn-out{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-out:hover{border-color:var(--red);color:var(--red);text-decoration:none}
.btn-ghostw{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.32)}
.btn-ghostw:hover{background:rgba(255,255,255,.24);text-decoration:none}

/* ---------- top utility bar ---------- */
.topbar{background:var(--ink);color:#EFE7F0;font-size:.82rem}
.topbar .wrap{display:flex;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar .promo{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.topbar .promo span{display:inline-flex;align-items:center;gap:.4em;color:#CcC2D0;color:#cbc2d0}
.topbar .promo b{color:#fff}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.topbar a{color:#FFCFc4;color:#ffcfc4;font-weight:600}
.topbar a:hover{color:#fff}

/* ---------- masthead / nav ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mast{display:flex;align-items:center;gap:1.4rem;height:72px}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--head);font-weight:700;font-size:1.2rem;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo img{height:30px}
.logo .s{color:var(--red)}
.mnav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.mnav a{color:var(--ink);font-weight:500;font-size:.97rem;position:relative;padding:.2rem 0}
.mnav a:hover{color:var(--red);text-decoration:none}
.mnav a.on{color:var(--red)}
.mnav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--grad);border-radius:2px}
.mnav .pill{background:var(--ink);color:#fff;padding:.5em 1.1em;border-radius:999px;font-family:var(--head)}
.mnav .pill:hover{background:#000;color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:1.7rem;color:var(--ink);cursor:pointer}

/* ---------- search-first hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(95deg,rgba(255,243,237,.975) 0%,rgba(255,243,237,.9) 36%,rgba(255,243,237,.4) 58%,rgba(255,243,237,.04) 100%),url('/assets/img/hero-bg.png');
  background-size:cover;background-position:center right}
.hero .wrap{position:relative;z-index:2;padding:clamp(2.4rem,5.5vw,4rem) 22px clamp(2.2rem,5vw,3.4rem)}
.hero-copy{max-width:560px}
.hero h1{margin-bottom:.6rem}
.hero .lead{max-width:44ch;margin-bottom:1.4rem}

/* big search */
.bigsearch{display:flex;gap:.5rem;background:#fff;border:2px solid #FFD7C9;border-radius:999px;
  padding:.45rem .5rem .45rem 1.3rem;box-shadow:var(--shadow);max-width:560px;align-items:center}
.bigsearch input{flex:1;border:0;outline:0;font-size:1.05rem;font-family:var(--body);background:transparent;color:var(--ink)}
.bigsearch input::placeholder{color:#bcb0b6}
.searchmeta{font-size:.84rem;color:var(--ink-3);margin:.7rem 0 0}
.trend{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;align-items:center}
.trend .t-label{font-size:.8rem;color:var(--ink-3);font-weight:600;margin-right:.2rem}
.trend a{background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:.34em .85em;font-size:.84rem;
  font-weight:600;color:var(--ink)}
.trend a:hover{border-color:var(--red);color:var(--red);text-decoration:none}

/* marketplace ribbon */
.ribbon{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px dashed var(--line-2)}
.ribbon .lab{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600}
.ribbon .mkt{display:inline-flex;align-items:center;gap:.4em;font-family:var(--head);font-weight:600;color:var(--ink-2);font-size:.95rem}
.ribbon .mkt b{width:9px;height:9px;border-radius:50%;background:var(--coral)}

/* mini stat strip in hero art */
.hero-stats{display:flex;gap:1rem;margin-top:1.1rem}
.hero-stats .s{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;text-align:center;box-shadow:var(--shadow-sm)}
.hero-stats .s b{display:block;font-family:var(--head);font-size:1.3rem;color:var(--red);line-height:1}
.hero-stats .s span{font-size:.76rem;color:var(--ink-3)}

/* ---------- generic section ---------- */
.sec{padding:clamp(3.2rem,6.5vw,5.4rem) 0}
.sec.soft{background:var(--bg-soft)}
.sec.tint{background:var(--bg-tint)}
.sec.dark{background:var(--dark);color:#EDE7F0}
.sec.dark h2{color:#fff}
.sec.dark .lead{color:#C3BACB}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.4rem;flex-wrap:wrap}
.sec-head .l{max-width:60ch}
.sec-num{font-family:var(--head);font-weight:700;font-size:.82rem;color:var(--red);letter-spacing:.12em;display:block;margin-bottom:.5rem}
.sec-head h2{margin:0}
.crumb{font-size:.84rem;color:var(--ink-3);padding-top:1.1rem}
.crumb a{color:var(--ink-3)}

/* ---------- How To Find Products ---------- */
.find-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.find-art{border-radius:var(--rad-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.find-art img{width:100%}
.methods{display:flex;flex-direction:column;gap:1rem;margin:1.4rem 0}
.method{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.method .k{font-family:var(--head);font-weight:700;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:1.05rem}
.method h3{margin:0 0 .15rem;font-size:1.04rem}
.method p{margin:0;color:var(--ink-2);font-size:.96rem}
.discord{display:flex;align-items:center;gap:.9rem;background:#EEF0FF;border:1px solid #DCE0FF;border-radius:16px;
  padding:1rem 1.2rem;color:#3A3F6B}
.discord .ic{font-size:1.5rem}
.discord b{color:#3b3fa0}
.discord a{color:#4a4fd6;font-weight:700;white-space:nowrap}

/* ---------- Why Choose Us — bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1.1rem}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;min-height:200px;position:relative;overflow:hidden}
.tile .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:#FFE9E2;font-size:1.5rem;margin-bottom:1rem}
.tile h3{margin-bottom:.4rem}
.tile p{margin:0;color:var(--ink-2);font-size:.95rem}
.tile.wide{grid-column:span 2}
.tile.feature{grid-column:span 2;grid-row:span 2;background:var(--grad);color:#fff;justify-content:flex-end}
.tile.feature .ic{background:rgba(255,255,255,.2)}
.tile.feature h3{font-size:1.5rem;color:#fff}
.tile.feature p{color:rgba(255,255,255,.92);font-size:1rem}
.tile.feature .imgslot{position:absolute;inset:0;z-index:0;opacity:.9}
.tile.feature .imgslot img{width:100%;height:100%;object-fit:cover}
.tile.feature .fc{position:relative;z-index:1;text-shadow:0 1px 8px rgba(120,20,10,.35)}
.tile.feature .ph{background:rgba(20,8,4,.22);border-color:rgba(255,255,255,.55);color:#fff;text-shadow:none}
.tile.feature .ph small{color:rgba(255,255,255,.85)}
.tile.dark{background:var(--ink);color:#fff}
.tile.dark .ic{background:rgba(255,255,255,.12)}
.tile.dark p{color:#C9C0D2}

/* ---------- category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cat-tile{position:relative;display:flex;flex-direction:column;gap:.35rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);padding:1.5rem 1.4rem 1.25rem;box-shadow:var(--shadow-sm);transition:.18s;color:var(--ink);overflow:hidden}
.cat-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--cc,#FF6A4D)}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;text-decoration:none}
.cat-tile .badge{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;font-size:1.75rem;
  background:var(--cb,#FFE4DC);margin-bottom:.7rem}
.cat-tile .nm{font-family:var(--head);font-weight:700;font-size:1.12rem}
.cat-tile .ds{font-size:.85rem;color:var(--ink-3);flex:1;line-height:1.45}
.cat-tile .go{display:inline-flex;align-items:center;gap:.35em;font-family:var(--head);font-size:.85rem;font-weight:700;
  color:var(--cg,var(--red));margin-top:.5rem}
.cat-tile:hover .go{gap:.6em}
.cat-tile:nth-child(7n+1){--cc:#FF6A4D;--cb:#FFE4DC;--cg:#FF3B30}
.cat-tile:nth-child(7n+2){--cc:#5B6CFF;--cb:#E7EAFF;--cg:#4453E6}
.cat-tile:nth-child(7n+3){--cc:#FFB02E;--cb:#FFF1D6;--cg:#C8870E}
.cat-tile:nth-child(7n+4){--cc:#13B981;--cb:#DCF6EC;--cg:#0E9468}
.cat-tile:nth-child(7n+5){--cc:#FF3B6B;--cb:#FFE1E9;--cg:#E11D52}
.cat-tile:nth-child(7n+6){--cc:#A05BFF;--cb:#F0E6FF;--cg:#7E37E6}
.cat-tile:nth-child(7n+7){--cc:#FF8A3D;--cb:#FFEAD6;--cg:#E06A12}

/* search by link box */
.linkbox{display:flex;gap:.5rem;background:#fff;border:2px solid #FFD7C9;border-radius:999px;padding:.4rem .4rem .4rem 1.2rem;
  align-items:center;box-shadow:var(--shadow-sm);max-width:620px}
.linkbox input{flex:1;border:0;outline:0;font-size:1rem;background:transparent;font-family:var(--body)}
.linkbox input::placeholder{color:#bcb0b6}

/* ---------- vertical timeline ---------- */
.timeline{position:relative;max-width:760px;margin-inline:auto;padding-left:2.4rem}
.timeline::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--coral),rgba(255,106,77,.15))}
.tl-step{position:relative;padding:0 0 1.8rem}
.tl-step:last-child{padding-bottom:0}
.tl-step .dot{position:absolute;left:-2.4rem;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;
  font-family:var(--head);font-weight:700;font-size:.85rem;display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg)}
.sec.dark .tl-step .dot{box-shadow:0 0 0 5px var(--dark)}
.tl-step h3{margin:0 0 .25rem}
.tl-step p{margin:0;color:var(--ink-2)}
.sec.dark .tl-step p{color:#BBB1C5}

/* ---------- updates / news ---------- */
.updates{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.upd{display:grid;grid-template-columns:auto 1fr;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:1.3rem;box-shadow:var(--shadow-sm)}
.upd .em{width:48px;height:48px;border-radius:14px;background:#FFE9E2;display:grid;place-items:center;font-size:1.4rem}
.upd .bd{display:inline-block;font-size:.7rem;font-weight:700;padding:.16em .55em;border-radius:999px;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}
.bd.pay{background:#EAF0FF;color:#3A5BD9}.bd.feat{background:#FFE9E2;color:var(--red)}.bd.ship{background:#E6F6EF;color:#0E8F54}.bd.perk{background:#FFF3D6;color:#A87708}
.upd h3{margin:0 0 .3rem;font-size:1.04rem}
.upd p{margin:0 0 .5rem;color:var(--ink-2);font-size:.93rem}
.upd .more{font-weight:700;font-size:.88rem}

/* ---------- FAQ as Q&A grid ---------- */
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2.4rem}
.qa{border-top:2px solid var(--line-2);padding-top:1rem}
.qa h3{font-size:1.04rem;margin:0 0 .4rem;display:flex;gap:.5rem}
.qa h3 .q{color:var(--red);font-family:var(--head)}
.qa p{margin:0;color:var(--ink-2);font-size:.95rem}

/* ---------- image placeholder slot (for user-supplied images) ---------- */
.imgslot{position:relative}
.imgslot img{display:block}
.ph{display:none;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,#FFF1EB,#FFF1EB 12px,#FFE7DD 12px,#FFE7DD 24px);
  border:2px dashed #FFB59E;border-radius:14px;color:#C8694D;font-family:var(--head);font-weight:600;font-size:.82rem;padding:1rem;min-height:160px}
.imgslot.missing img{display:none}
.imgslot.missing .ph{display:flex}
.ph small{display:block;font-weight:500;color:#D98A6E;margin-top:.3rem;font-size:.74rem}

/* ---------- callout ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:var(--rad-lg);
  padding:clamp(2.2rem,4.5vw,3.4rem);text-align:center;box-shadow:var(--shadow)}
.cta-band h2{color:#fff}
.cta-band p{opacity:.95;max-width:54ch;margin-inline:auto}
.cta-band .heart{position:absolute;font-size:8rem;opacity:.16;right:5%;top:-14%}
.cta-row{display:flex;gap:.8rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}

.note{display:flex;gap:.8rem;background:#FFF7E9;border:1px solid #F6E3BE;border-radius:14px;padding:1rem 1.2rem;color:#7a5a12;font-size:.92rem}
.note a{color:#a87708;font-weight:700}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#C8BFD2;padding:3.4rem 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem}
.foot .logo{color:#fff}.foot .logo .s{color:var(--coral-2)}
.foot p{color:#A89FB4;font-size:.9rem;max-width:34ch}
.foot h4{font-family:var(--head);color:#fff;font-size:.95rem;margin:0 0 .8rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot a{color:#BFB6CC;font-size:.9rem}.foot a:hover{color:#fff}
.foot .disc{font-size:.78rem;color:#867D95;border-top:1px solid #34303E;margin-top:2rem;padding-top:1.2rem}
.foot .fb{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#867D95;margin-top:.8rem}

/* ---------- homepage intro teasers ---------- */
.intro2{display:grid;grid-template-columns:1.2fr .8fr;gap:2.2rem;align-items:center}
.perks{display:flex;flex-wrap:wrap;gap:.8rem}
.perk{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:.7rem 1rem;box-shadow:var(--shadow-sm);font-weight:600;font-size:.92rem}
.perk .pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#FFE9E2;font-size:1.1rem}
.miniflow{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.mf{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow-sm);text-align:center}
.mf .mn{font-family:var(--head);font-weight:700;color:var(--red);font-size:.8rem;letter-spacing:.05em}
.mf h4{margin:.3rem 0 .2rem;font-family:var(--head);font-size:.98rem}
.mf p{margin:0;font-size:.82rem;color:var(--ink-3)}
.see{display:inline-flex;align-items:center;gap:.4em;font-family:var(--head);font-weight:600;color:var(--red);margin-top:1.2rem}
.see:hover{gap:.7em;text-decoration:none}

/* category chips (homepage teaser) */
.cat-chips{display:flex;flex-wrap:wrap;gap:.7rem}
.cat-chips a{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line-2);border-radius:999px;
  padding:.6rem 1.1rem;font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--ink);box-shadow:var(--shadow-sm);transition:.16s}
.cat-chips a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);text-decoration:none}
.cat-chips a .e{font-size:1.15rem}

/* photo bento tile */
.tile.photo{position:relative;color:#fff;justify-content:flex-end;overflow:hidden}
.tile.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tile.photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,8,4,.15),rgba(20,8,4,.74));z-index:1}
.tile.photo .fc{position:relative;z-index:2}
.tile.photo .ic{background:rgba(255,255,255,.2)}
.tile.photo p{color:rgba(255,255,255,.92)}

/* ---------- detailed page: illustrated method/topic cards ---------- */
.howrow{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin-bottom:2.4rem}
.howrow:nth-child(even) .howrow-art{order:2}
.howrow-art{border-radius:var(--rad-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.howrow-art .imgslot img{width:100%;display:block}
.howrow .k{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  background:var(--grad);color:#fff;font-family:var(--head);font-weight:700;margin-bottom:.7rem}
.howrow h3{font-size:1.3rem;margin-bottom:.4rem}
.howrow ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--ink-2)}
.howrow ul li{margin-bottom:.35rem}

/* help center */
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:2.6rem}
.help-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem;box-shadow:var(--shadow-sm);color:var(--ink)}
.help-card:hover{text-decoration:none;border-color:#FFC9B8;transform:translateY(-3px);box-shadow:var(--shadow)}
.help-card .ic{width:46px;height:46px;border-radius:13px;background:#FFE9E2;display:grid;place-items:center;font-size:1.3rem;margin-bottom:.8rem}
.help-card h3{margin-bottom:.3rem}
.help-card p{margin:0;color:var(--ink-3);font-size:.9rem}
.qa-group{margin-bottom:2.4rem}
.qa-group h2{margin-bottom:1.2rem}

/* reveal */
[data-rv]{opacity:0;transform:translateY(16px);transition:.6s ease}
[data-rv].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero{background:linear-gradient(178deg,rgba(255,243,237,.5) 0%,rgba(255,243,237,.9) 52%,rgba(255,243,237,.98) 100%),url('/assets/img/hero-bg.png');background-size:cover;background-position:center top}
  .find-grid{grid-template-columns:1fr;gap:1.6rem}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.feature{grid-column:span 2;grid-row:span 1;min-height:240px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .updates,.qa-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .intro2{grid-template-columns:1fr;gap:1.4rem}
  .miniflow{grid-template-columns:repeat(2,1fr)}
  .help-grid{grid-template-columns:1fr}
  .howrow{grid-template-columns:1fr;gap:1.2rem}
  .howrow .howrow-art{order:-1!important}
}
@media(max-width:680px){
  .burger{display:block}
  .mnav{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-bottom:1px solid var(--line);padding:.4rem 22px 1rem;display:none;box-shadow:var(--shadow-sm)}
  .mnav.open{display:flex}
  .mnav a{padding:.75rem 0;border-bottom:1px solid var(--line)}
  .mnav .pill{margin-top:.6rem;text-align:center}
  .mnav a.on::after{display:none}
  .topbar .promo span:not(:first-child){display:none}
  .bento,.cat-grid{grid-template-columns:1fr}
  .tile.feature{grid-column:span 1}
  .miniflow{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}