/* P1 v2 — the promo page redesigned to ChatGPT's memo (build/myplaces_review/promo_redesign_chatgpt_1013.md, 2026-10-13 14:3x
   "ask chat to redesign it… the entire page") with Bill's standing rules on top (DECISIONS.md 2026-10-13 13:58–14:28): "in one place."
   in mustard, bold, no underline; the F1 wordmark on its own paper row, never on the mustard; no FAQ or Maps links in the header; no
   blue anywhere. Palette: paper #FBF8F2, ink #17181A, tomato #C43D30, mustard #F2A900, dividers #DEDCD5, meta #62625C.
   Loaded by brand.js on every promo page. The home page carries <body class="home"> and gets the full redesign below; the other pages
   (about, sign-in, terms…) keep the agreed header: wordmark on paper, mustard band with Sign in + a tomato Try button.
   Before: look_p1.before_redesign_1013.css. */

/* ---- the look's variables win over site.css in light and dark (the promo pages have no dark mode) ---- */
html{--ink:#17181A!important;--gray:#62625C!important;--meta:#62625C!important;--line:#DEDCD5!important;--soft:#F3EFE6!important;--bg:#FBF8F2!important;
  --accent:#C43D30!important;--accent-h:#A93327!important;--accent-on-dark:#17181A!important;--link:#17181A!important;
  --charcoal:#FBF8F2!important;--charcoal-2:#FBF8F2!important;--on-dark:#17181A!important;--on-dark-meta:#62625C!important;--dline:#DEDCD5!important;
  --rd-line:#DEDCD5!important;--rd-field:#F3EFE6!important;--bb:#C43D30!important;--bbp:#F3EFE6!important;--bbd:#FBF8F2!important;--brandblue:#C43D30!important}
html,body{background:#FBF8F2!important;color:#17181A}
body{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.top,main,.hero{background:#FBF8F2!important}

/* ---- shared: buttons and accents on every promo page (sign-in, checkout, cancel…) ---- */
.btn{border-radius:6px!important;font-weight:700!important}
.btn.btn-a,a.btn-a,.member .btn-a,.trial .btn-a,.hero .btn-a,.cta .btn-a,#membership .btn-a,.ckgo,.tsd-primary,#tsdRemindSave{background:#C43D30!important;color:#FBF8F2!important;border:0!important}
.btn.btn-a:hover,a.btn-a:hover,.trial .btn-a:hover{background:#A93327!important}
.btn-b,.btn-o{background:transparent!important;color:#17181A!important;border:1.5px solid #17181A!important;box-shadow:none!important}
.btn-b:hover,.btn-o:hover{background:#F3EFE6!important}
h1,h1 .acc,h2,h3{color:#17181A!important}
.eyebrow{color:#C43D30!important}
.plan-tag{background:#17181A!important;color:#FBF8F2!important}
.map-list li::before,.bul li::before{background:#C43D30!important}
.cmpc .cc.us.hd .sg.f1,.wyt .cc.us.hd .sg.f1{--f1w:58px}.cmpc .cc.us.hd .sg.f1 img,.wyt .cc.us.hd .sg.f1 img{width:58px!important;max-width:100%}   /* "wyt": the table's class may not contain "cmp" — the hosted renderer's pop-up hider hides anything so named */
.bd.y{background:transparent!important;color:#C43D30!important}
.sheet-h{background:#FBF8F2!important;color:#17181A!important;border-bottom:1px solid #DEDCD5}
.sheet-h span{color:#62625C!important}
.sheet-x,.fs-bar button,.expand{background:#FBF8F2!important;color:#17181A!important;border:1px solid #2B2B2B!important;border-radius:6px!important;box-shadow:none!important}
.fs{background:#FBF8F2!important}
.fs-bar{background:#F2A900!important;color:#17181A!important;border-bottom:1px solid #2B2B2B}
.fs.cm-fs .fs-bar b{color:#17181A!important}
.fs.cm-fs .fs-res{background:#17181A!important}
.frame-cover,.cm-cover{background:#FBF8F2!important}
.frame-cover .spin,.cm-cover .spin{border-color:#DEDCD5!important;border-top-color:#17181A!important}
.trial{background:#FBF8F2!important;border-radius:12px 12px 0 0}
.trial .btn{border-radius:6px!important}

/* ---- every promo page except the home page: the agreed header — the wordmark on its paper row, a mustard band with Sign in and Try ---- */
body:not(.home) header{background:#FBF8F2!important;border-bottom:0!important;padding:0!important;height:auto!important;min-height:0!important;position:static!important;box-shadow:none!important}
body:not(.home) header .wrap.nav{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;padding:0!important;max-width:none!important;height:auto!important;min-height:0!important;gap:0!important;background:#FBF8F2!important}
body:not(.home) header .logo.sg{flex:0 0 100%!important;padding:12px 16px 8px!important;margin:0!important;font-size:0;height:auto!important;background:#FBF8F2!important}
body:not(.home) header .logo.sg img{height:28px!important;width:auto!important;display:block}
body:not(.home) header nav{display:none!important}
body:not(.home) header .wrap.nav > .right,body:not(.home) header .wrap.nav > *:has(a.btn){flex:0 0 100%!important;display:flex!important;gap:10px!important;align-items:center!important;justify-content:flex-end!important;background:#F2A900!important;border-top:1px solid #2B2B2B!important;border-bottom:1px solid #2B2B2B!important;padding:8px 16px!important;margin:0!important;height:auto!important;min-height:0!important}
body:not(.home) header .wrap.nav > .right a,body:not(.home) header .wrap.nav > *:has(a.btn) a{color:#17181A!important;font-weight:700!important;font-size:14px!important;text-decoration:none!important;padding:8px 6px!important;background:transparent!important;border:0!important}
body:not(.home) header .wrap.nav > .right a.btn,body:not(.home) header .wrap.nav > *:has(a.btn) a.btn{background:#C43D30!important;color:#FBF8F2!important;border:0!important;border-radius:6px!important;padding:9px 14px!important;font-size:13px!important}

/* =====================================================================================================================
   THE HOME PAGE (body.home) — memo §1: paper throughout, ink text, hairline separators; phone 20px gutters / 40px section padding;
   Mac 1160px container, 40px gutters, 72px section padding, 48px column gaps. Body 16/1.5; headings 28px phone / 36px Mac at 750. */
.home .wrap{max-width:1160px;padding:0 20px}
.home .sec{padding:40px 0;border-top:1px solid #DEDCD5}
.home h2{font-size:28px;font-weight:750;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;color:#17181A!important}
.home h3{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px}
.home .lede{font-size:16px;line-height:1.5;font-weight:400;color:#17181A!important;max-width:36em;margin:0}
.home .eyebrow{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C43D30!important;margin:0 0 10px;display:block}
.home .cap{font-size:12px;line-height:1.4;color:#62625C}
.home .btn{min-height:48px;padding:0 20px;font-size:14px;font-weight:700;line-height:1.2;border-radius:6px!important;justify-content:center}
.home .btn-sm{min-height:36px;padding:0 14px;font-size:12px}
.home a{color:inherit}
.home .logo,.home .sg,.home .sg *{color:#C43D30!important}   /* the wordmark is the red drawing; nothing inherits site.css's old blue */
.home .wyb{min-width:0}.home .wyb .names{overflow-wrap:anywhere}

/* §2 header: a paper masthead with the red wordmark (100px phone / 128px Mac), then a full-width mustard control strip (1px #2B2B2B
   rules): coverage left, Sign in and a tomato Try button right. No logo on the mustard; no FAQ or Maps links (Bill). */
.home header{background:#FBF8F2!important;position:static!important;border:0!important;box-shadow:none!important;padding:0!important;height:auto!important}
.home .mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.home .mast .logo{font-size:0;line-height:0}
.home .mast .logo.sg.f1 img{width:100px!important;height:auto!important;display:block}
.home .mast-tag{display:none;font-size:14px;font-weight:500;color:#17181A;white-space:nowrap}
.home .band{background:#F2A900;border-top:1px solid #2B2B2B;border-bottom:1px solid #2B2B2B}
.home .band .wrap.nav{display:flex;align-items:center;gap:12px;height:56px;max-width:1160px}
.home .band .cov{font-size:11px;font-weight:600;letter-spacing:.02em;color:#17181A;white-space:nowrap}
.home .band .cov2{display:none;font-size:14px;font-weight:600;color:#17181A;white-space:nowrap}
.home .band .cov2::before{content:"·";margin:0 10px 0 0;color:#2B2B2B}
.home .band nav{display:none!important}
.home .band .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.home .band .signin{font-size:11px;font-weight:600;color:#17181A!important;text-decoration:none;white-space:nowrap;padding:8px 4px}
.home .band .btn{background:#C43D30!important;color:#FBF8F2!important;border:0!important;box-shadow:none!important;white-space:nowrap}

/* §3 hero: stacked on a phone; Mac 7/5 split — the message left, live coverage, chips and sign-up right */
.home .hero{padding:32px 0;border-bottom:0!important}
.home .hero-grid2{display:grid;grid-template-columns:1fr;gap:28px}
.home h1{font-size:40px;font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0;color:#17181A!important;max-width:12em}
.home h1 .acc{color:#F2A900!important;text-decoration:none!important;font-weight:800!important}   /* Bill 14:0x: mustard, no underline */
.home .hero .sub{font-size:18px;line-height:1.4;font-weight:500;color:#17181A;margin:16px 0 0;max-width:30em}
.home .total{margin:0;font-size:16px;font-weight:500;line-height:1.4;color:#17181A!important}
.home #tsTotal{font-size:16px!important;font-weight:500!important;line-height:1.4!important;color:#17181A!important}
.home #tsTotal .p1-num{display:block;font-size:28px;font-weight:750;line-height:1.1;letter-spacing:-.015em;color:#17181A;margin:0 0 4px}
.home .total small{display:block;font-size:12px;font-weight:400;color:#62625C!important;margin-top:4px}
.home .ticker{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.home .ticker button{display:inline-flex;align-items:baseline;gap:5px;font:inherit;font-size:12px;font-weight:600;line-height:1.2;color:#17181A!important;background:#FBF8F2!important;border:1px solid #DEDCD5!important;border-radius:6px!important;padding:8px 10px;cursor:pointer;box-shadow:none}
.home .ticker button:hover{border-color:#17181A!important}
.home .ticker button b{font-weight:700;color:#17181A!important}
.home .ticker button span{font-weight:500;color:#62625C!important}
.home .ticker .more{color:#62625C!important;font-weight:600}
.home .hero-cta{display:block;margin-top:24px}
.home .hero-cta .btn{width:100%}
.home .hero-cta .fine{font-size:12px;line-height:1.4;color:#62625C;margin:12px 0 0;max-width:34em}
.home .hero-cta .fine a{color:#17181A;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* §4 real restaurant pages: paper framing, hairline borders, no shadows, 16px gaps; the row still slides on its own and by hand (Bill 9/29–9/30) */
.home .reelsec{padding-bottom:40px;overflow:hidden}
.home .reelsec h2{margin-bottom:24px}
.home .reel{padding:0 0 0 20px}
.home .rl-track{gap:16px}
.home .rl-card{width:240px;max-width:none}   /* #368 (Bill 10/16 "Revert them to that size"): the pre-10/13 size from site.css — 240 on phones, 270 from 700px, 320 from 900px, 350 from 1300px (10/13 had 78vw/max 340; 10/15 #352 had 39vw/max 170) */
@media (min-width:700px){.home .rl-card{width:270px}}
.home .rl-screen{border:1px solid #DEDCD5!important;border-radius:6px!important;box-shadow:none!important;background:#FBF8F2}
.home .rl-img{aspect-ratio:390/900}
.home .rl-city{top:8px;left:8px;bottom:auto;padding:3px 7px;background:rgba(23,24,26,.88);color:#FBF8F2;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:0}   /* over the photo, never the name (the cards were retaken 10/13) */
.home .rl-foot{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;text-align:left;margin-top:16px}
.home .rl-foot .rl-note{margin:0;font-size:12px;line-height:1.4;color:#62625C}
.home .rl-try,.home #exploreBtn{background:none!important;border:0!important;color:#17181A!important;font:600 13px/1.4 Inter,system-ui,sans-serif;padding:0!important;min-width:0;min-height:0;border-radius:0!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* §5 what you get: a plain table — feature column plus a narrow check column, 14px/500, tomato checks, 16px cell padding, hairline rules */
.home .wyt{max-width:900px;margin:0 auto;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
.home .wyt .cr{grid-template-columns:minmax(0,1fr) 64px;align-items:center}
.home .wyt .cr+.cr{border-top:1px solid #DEDCD5}
.home .wyt .cr.cg+.cr{border-top:0}
.home .wyt .cl{padding:16px 12px 16px 0;font-size:14px;font-weight:500;line-height:1.45;color:#17181A}
.home .wyt .cl .asof{color:#62625C;font-weight:400;white-space:normal}
.home .wyt .cc{align-self:stretch}
.home .wyt .cc.us{background:transparent!important}
.home .wyt .ch .cl.lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#17181A;padding:0 0 12px;align-self:end}
.home .wyt .ch .hd{padding:0 0 10px;align-self:end}
.home .wyt .cr.cg{border-top:1px solid #DEDCD5}
.home .wyt .cr.cg .cl{padding:20px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#62625C}
.home .bd{width:26px;height:26px;border-radius:0}
.home .bd.y{background:transparent!important;color:#C43D30!important}
.home .bd svg{width:22px;height:22px}
.home .wy-blocks{max-width:900px;margin:32px auto 0;display:grid;grid-template-columns:1fr;gap:24px}
.home .wyb{border-top:1px solid #DEDCD5;padding-top:20px}
.home .wyb p{margin:0 0 8px;font-size:14px;line-height:1.5;color:#17181A}
.home .wyb .names{font-size:14px;line-height:1.6;color:#17181A;font-weight:500}
.home .wyb .names b{font-weight:700;margin-right:4px}
.home .wyb .names.small{font-size:13px;color:#62625C;font-weight:400}
.home .wyb .names .sep{color:#A9A59C;margin:0 5px}
.home .morebtn{font:inherit;font-size:14px;font-weight:600!important;color:#17181A!important;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.home .allplats{margin-top:8px;font-size:13px;line-height:1.6;color:#62625C}

/* §6 the three demonstrations: heading, two sentences, the demo; Mac equal columns, alternating sides; screens at most 320px wide */
.home .demo-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.home .demo-txt{min-width:0}
.home .demo-txt h2{margin-bottom:12px}
.home .demo-shot{width:100%;max-width:320px;margin:0 auto;justify-self:center}
.home .demo-shot.remshot{width:auto;max-width:320px;border:0!important;border-radius:0;box-shadow:none!important;background:transparent!important;overflow:visible}
.home .demo-shot.remshot img{width:100%;height:auto;border:1px solid #DEDCD5;border-radius:12px}   /* no display here: promo_mo.js hides the still once its animation is in */
.home .mo-rem,.home .mo-walkdemo{width:320px;max-width:100%;margin:0 auto;border:1px solid #DEDCD5!important;border-radius:12px;background:#FBF8F2!important;box-shadow:none!important}
.home .ckdemo{width:320px;max-width:100%;margin:0 auto;aspect-ratio:9/18.6;border:1px solid #DEDCD5!important;border-radius:12px;background:#fff;overflow:hidden;box-shadow:none!important}
.home .ckdemo iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.home .ckapp{margin:16px 0 0}
.home .ckapp .appbadge img{height:40px;width:auto;display:block}

/* §7 worldwide coverage: the globe, then eight city cards (paper, hairline, 12px padding), "Show all 42 cities" opens the rest inline;
   the neighborhood maps merged here (the copy and the strip of city shapes) */
.home .world{background:#FBF8F2!important;color:#17181A!important;padding:40px 0}
.home .world h2,.home .world p,.home .world .lede{color:#17181A!important}
.home .world-head{max-width:36em;margin-bottom:24px}
.home .world-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.home .world-globe{min-width:0;overflow:hidden}
.home .globe{margin:0 auto}
.home .globe-hint{text-align:center;color:#62625C!important;font-size:12px;line-height:1.4;margin:8px 0 0}
.home .cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;border:0!important;border-radius:0;overflow:visible}
.home .cgrid > *{padding:12px!important;border:1px solid #DEDCD5!important;border-radius:6px;background:#FBF8F2!important;display:flex;flex-direction:column;gap:2px;color:#17181A!important;min-width:0}
.home .cgrid button{cursor:pointer}
.home .cgrid button:hover{background:#F3EFE6!important;border-color:#17181A!important}
.home .cgrid small{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#62625C!important}
.home .cgrid b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#17181A!important}
.home .cgrid .cnt{font-size:12px;font-weight:500;color:#62625C!important}
.home .cmore{display:block;width:100%;margin:12px 0 0;font:inherit;font-size:14px;font-weight:700;color:#17181A!important;background:transparent!important;border:1.5px solid #17181A!important;border-radius:6px!important;min-height:44px;padding:0 18px;cursor:pointer}
.home .cmore:hover{background:#F3EFE6!important}
.home .cnote{margin:12px 0 0;font-size:12px;line-height:1.4;color:#62625C!important}
.home .cm-head{max-width:36em;margin:24px 0 12px}
.home .cm-head p{margin:0;font-size:14px;line-height:1.5;color:#17181A}
.home .cm-car{margin:0 -20px;padding:4px 20px 8px}
.home .cm-card{background:#FBF8F2;border:1px solid #DEDCD5;border-radius:6px;color:#17181A}
.home .cm-card .shp{background:#F3EFE6;border-radius:4px}
.home .cm-card b{font-size:14px}
.home .cm-card small{color:#62625C}

/* §8 pricing: annual then monthly (Mac: two equal cards), 24px padding, 16px gap, prices 36px/750, tomato annual, ink-outline monthly */
.home #membership{padding:40px 0}
.home .plans{display:grid;grid-template-columns:1fr;gap:16px;max-width:none;margin:24px 0 0;text-align:left}
.home .plan{background:#FBF8F2;border:1px solid #DEDCD5;border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:4px}
.home .plan-year{border:1.5px solid #17181A}
.home .plan-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;background:#17181A!important;color:#FBF8F2!important;border-radius:4px;padding:4px 8px;margin:0 0 10px}
.home .plan-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#62625C;margin:0 0 10px}
.home .plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin:0}
.home .plan-price b{font-size:36px;font-weight:750;letter-spacing:-.02em;line-height:1;color:#17181A}
.home .plan-price .per{font-size:14px;font-weight:500;color:#62625C}
.home .plan-sub{font-size:13px;font-weight:500;color:#62625C;margin:6px 0 0}
.home .plan-fine{font-size:13px;line-height:1.5;color:#62625C;margin:8px 0 16px}
.home .plan .btn{margin-top:auto;width:100%}
.home .trustline{font-size:12px;line-height:1.4;color:#62625C;margin:16px 0 0;max-width:none}
.home .appline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:#62625C}
.home .appline .appbadge img{height:40px;width:auto;display:block}

/* FAQ — three collapsed rows after pricing (16px/600 questions, 20px row padding) */
.home .faq-wrap{max-width:760px}
.home .faq{margin-top:16px;border-top:1px solid #DEDCD5}
.home .faq-q{border-bottom:1px solid #DEDCD5}
.home .faq-q summary{padding:20px 0;font-size:16px;font-weight:600;color:#17181A;gap:16px}
.home .faq-q summary::after{color:#62625C}
.home .faq-q p{margin:0 0 20px;font-size:15px;line-height:1.55;color:#17181A}
.home .faq-more>summary{padding:20px 0;font-size:16px;font-weight:600;color:#17181A;border-top:0;list-style:none}
.home .faq-more>summary::after{color:#62625C}
.home .faq-more .faq-q:first-of-type{border-top:1px solid #DEDCD5}
.home .faq-q .faq-a{margin:0 0 20px;font-size:15px;line-height:1.55;color:#17181A}
.home .faq-q .faq-a p{margin:0 0 10px}.home .faq-q .faq-a b{color:#17181A;font-weight:600}

/* footer: paper, the red wordmark, the legal and support links in two columns (four on a Mac), 13px, 32px padding */
.home footer{margin-top:0;padding:32px 0;border-top:1px solid #DEDCD5;color:#62625C;font-size:13px}
.home .foot{display:block}
.home .foot .logo{font-size:0;line-height:0;display:inline-block}
.home .foot .logo.sg.f1 img{width:100px!important;height:auto!important;display:block}
.home .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:20px;max-width:560px}
.home .foot-links a{font-size:13px;font-weight:500;color:#17181A;text-decoration:none}
.home .foot-links a:hover{text-decoration:underline}
.home .legal{margin:20px 0 0;font-size:12px;line-height:1.4;max-width:62em;color:#62625C}
.home footer .copy{margin:12px 0 0;font-size:12px;color:#62625C}

/* ---- Mac (memo §1): 1160px container, 40px gutters, 72px section padding, 48px column gaps ---- */
@media (min-width:900px){
  .home .wrap{padding:0 40px}
  .home .sec{padding:72px 0}
  .home h2{font-size:36px}
  .home .mast{padding:16px 40px;max-width:1160px;margin:0 auto}
  .home .mast .logo.sg.f1 img{width:128px!important}
  .home .mast-tag{display:block}
  .home .band .wrap.nav{height:60px;gap:16px}
  .home .band .cov{font-size:14px}
  .home .band .cov2{display:inline}
  .home .band .signin{font-size:14px}
  .home .band .btn-sm{min-height:40px;padding:0 16px;font-size:14px}
  .home .hero{padding:48px 0}
  .home .hero-grid2{grid-template-columns:7fr 5fr;gap:48px;align-items:center}
  .home h1{font-size:64px}
  .home .hero .sub{margin-top:20px}
  .home #tsTotal .p1-num{font-size:32px}
  .home .hero-cta .btn{width:auto;min-width:260px}
  .home .reel{width:auto;max-width:none;margin:0;padding:0 0 0 max(40px,calc((100vw - 1080px)/2))}   /* #368: the pre-10/13 row again (site.css .reel): starts under the heading and runs on to the window's right edge; was clipped to a 1080px box, four across (10/13 ChatGPT review) */
  .home .rl-card{width:320px;max-width:none}   /* #368: pre-10/13 size (site.css: 320 from 900px, 350 from 1300px); was /8 (#352) */
  .home .rl-foot{max-width:1160px}
  .home .wy-blocks{grid-template-columns:1fr 1fr;gap:48px}
  .home .demo-grid{grid-template-columns:1fr 1fr;gap:48px}
  .home .demo-grid.demo-alt .demo-txt{order:2}
  .home .demo-grid.demo-alt .demo-shot{order:1}
  .home .world-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
  .home .globe{width:100%;max-width:100%}
  .home .cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home .cmore{width:auto}
  .home .plans{grid-template-columns:1fr 1fr}
  .home .foot-links{grid-template-columns:repeat(4,auto);justify-content:start;gap:12px 32px}
}
@media (min-width:1300px){.home .rl-card{width:350px}}   /* #368: pre-10/13 size */
@media (min-width:520px) and (max-width:899px){
  .home .cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* the app's own in-page views stay readable in the look */
.home .fs-bar .logo{display:none}
.home .inv-bar a{border-radius:6px}

/* 2026-10-14 11:3x Bill (#65, "go live with everything"): the city count in the mustard band, larger and bolder */
.home .band .cov{font-size:15px!important;font-weight:800!important;letter-spacing:0!important}@media(min-width:768px){.home .band .cov{font-size:17px!important}}

/* 2026-10-14 15:5x (#86/#104): the second line under the headline and its link to the chart */
.home .hero .sub2{margin-top:8px!important}.home .sub2 .seeall{color:#17181A;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* 2026-10-14 #128/#141 chart redesign (ChatGPT ask_chart) */
/* BLOCK */
.home #every {
  background: #FBF8F2 !important;
  color: #17181A !important;
  padding: 40px 18px !important;
}

.home #every,
.home #every * {
  box-sizing: border-box !important;
}

.home #every > .wrap {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* HEADLINE */
.home #every > .wrap > h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 42px !important;
  letter-spacing: -1.2px !important;
  text-align: left !important;
  text-transform: none !important;
  color: #17181A !important;
}

/* TABLE SHELL: no card, no competing column layout */
.home #every .wyt.one[role="table"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 4px solid #17181A !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* BASE ROW: sentence + a genuinely narrow check column */
.home #every .wyt.one > .cr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  column-gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Reset legacy cell sizing/padding */
.home #every .wyt.one > .cr > .cl,
.home #every .wyt.one > .cr > .cc {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* SENTENCES */
.home #every .wyt.one > .cr > .cl {
  font-family: "Inter", sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  color: #17181A !important;
}

/* Rules only between consecutive feature rows */
.home #every .wyt.one > .cr:not(.cg):not(.ch)
  + .cr:not(.cg):not(.ch) {
  border-top: 1px solid #DEDCD5 !important;
}

/* CHECKS: retain the existing SVG and accessible "Yes" cell */
.home #every .wyt.one > .cr > .cc {
  display: flex !important;
  align-self: start !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  margin-top: 2px !important;
  color: #C43D30 !important;
}

.home #every .wyt.one > .cr > .cc .bd.y {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #C43D30 !important;
}

.home #every .wyt.one > .cr > .cc .bd.y svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  color: #C43D30 !important;
}

.home #every .wyt.one > .cr > .cc .bd.y svg path {
  stroke: currentColor !important;
  stroke-width: 3 !important;
}

/* SECTION LABELS: mustard bands, not small gray captions */
.home #every .wyt.one > .cr.cg {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 20px 0 0 !important;
  padding: 8px 10px !important;
  background: #F2A900 !important;
  border: 0 !important;
}

.home #every .wyt.one > .cr.cg > .cl {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #17181A !important;
}

/* Empty label-row cell: retain it without taking layout space */
.home #every .wyt.one > .cr.cg > .cc {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* No extra gap before Discover */
.home #every .wyt.one > .cr.ch + .cr.cg,
.home #every .wyt.one > .cr.cg:first-child {
  margin-top: 0 !important;
}

/* COUNT SENTENCE: all existing words and data hooks retained */
.home #every .wyt.one > .cr.count-row {
  padding: 12px 0 !important;
}

.home #every .wyt.one > .cr.count-row > .cl {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: -0.3px !important;
}

.home #every .wyt.one > .cr.count-row [data-total],
.home #every .wyt.one > .cr.count-row [data-cities],
.home #every .wyt.one > .cr.count-row [data-countries],
.home #every .wyt.one > .cr.count-row [data-continents] {
  font-weight: 800 !important;
}

.home #every .wyt.one > .cr.count-row .asof {
  display: block !important;
  margin-top: 4px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  color: #62625C !important;
}

.home #every .wyt.one > .cr.count-row > .cc {
  margin-top: 3px !important;
}

/* Visually hide redundant column headers, not their semantics */
.home #every .wyt.one > .cr.ch {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* DESKTOP: keep the reading order and the single strong column */
@media (min-width: 900px) {
  .home #every {
    padding: 64px 32px !important;
  }

  .home #every > .wrap > h2 {
    margin-bottom: 28px !important;
    font-size: 56px !important;
    line-height: 58px !important;
    letter-spacing: -1.8px !important;
  }

  .home #every .wyt.one > .cr {
    column-gap: 16px !important;
    padding: 12px 0 !important;
  }

  .home #every .wyt.one > .cr > .cl {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .home #every .wyt.one > .cr > .cc {
    margin-top: 3px !important;
  }

  .home #every .wyt.one > .cr.cg {
    margin-top: 24px !important;
    padding: 8px 10px !important;
  }

  .home #every .wyt.one > .cr.cg > .cl {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .home #every .wyt.one > .cr.count-row > .cl {
    font-size: 26px !important;
    line-height: 33px !important;
  }

  .home #every .wyt.one > .cr.count-row > .cc {
    margin-top: 6px !important;
  }
}

/* 2026-10-14 #146/#147: quiet section labels with a mustard tick, tighter spacing (ChatGPT ask_chart2) */

  /* Outer spacing */
  .home #every {
    margin-block: 0 !important;
    padding: 32px 18px 24px !important;
  }

  .home #every h2 {
    margin: 0 0 18px !important;
  }

  .home #every .wyt.one {
    margin: 0 !important;
    padding: 0 !important;
    row-gap: 0 !important;
    border-spacing: 0 !important;
  }

  /* Remove old row-level spacing and decoration.
     Cell padding below controls the vertical rhythm. */
  .home #every .wyt.one > .cr {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Category rows: no full-width band */
  .home #every .wyt.one > .cr.cg {
    background: transparent !important;
  }

  .home #every .wyt.one > .cr.cg > .cl {
    position: relative !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;

    /* 18px before label; 8px after label.
       3px tick + 8px gap = 11px left inset. */
    padding: 18px 0 8px 11px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #202020 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  /* No extra space above the first category */
  .home #every .wyt.one > .cr.cg:first-child > .cl {
    padding-top: 0 !important;
  }

  /* Quiet mustard tick */
  .home #every .wyt.one > .cr.cg > .cl::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: 0 !important;
    width: 3px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #efad00 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Remove any previous label underline */
  .home #every .wyt.one > .cr.cg > .cl::after {
    content: none !important;
    display: none !important;
  }

  /* Feature cells: keep the existing two-column layout */
  .home #every .wyt.one > .cr:not(.cg) > .cl,
  .home #every .wyt.one > .cr:not(.cg) > .cl + .cc {
    margin-block: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 19px !important;
    line-height: 26px !important;
    vertical-align: top !important;
    border-top: 0 !important;
    border-bottom: 1px solid #dedbd3 !important;
  }

  .home #every .wyt.one > .cr:not(.cg) > .cl {
    padding-left: 0 !important;
    color: #202020 !important;
  }

  /* Keep the tomato checks */
  .home #every .wyt.one > .cr:not(.cg) > .cl + .cc {
    color: #d93627 !important;
  }

  /* Label already supplies the 8px gap */
  .home #every .wyt.one > .cr.cg + .cr:not(.cg) > .cl,
  .home #every .wyt.one > .cr.cg + .cr:not(.cg) > .cl + .cc {
    padding-top: 0 !important;
  }

  /* Label supplies the entire 18px inter-group gap.
     No trailing padding or divider competing with it. */
  .home #every .wyt.one > .cr:not(.cg):has(+ .cr.cg) > .cl,
  .home #every .wyt.one > .cr:not(.cg):has(+ .cr.cg) > .cl + .cc,
  .home #every .wyt.one > .cr:not(.cg):last-child > .cl,
  .home #every .wyt.one > .cr:not(.cg):last-child > .cl + .cc {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* #every supplies the 24px bottom gap.
     Do not add another section-top gap. */
  .home #every + section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .home #every + section > :first-child,
  .home #every + section h2:first-child {
    margin-top: 0 !important;
  }
/* fixes after the render: one rule per row across the full width (never broken under the check), labels a touch larger */
.home #every .wyt.one > .cr > .cl,.home #every .wyt.one > .cr > .cc{border:0!important;box-shadow:none!important}
.home #every .wyt.one > .cr:not(.cg):not(.ch) + .cr:not(.cg):not(.ch){border-top:1px solid #DEDCD5!important}
.home #every .wyt.one > .cr.cg > .cl{font-size:14px!important;line-height:18px!important;letter-spacing:.06em!important}
html body.home #every .wyt.one > .cr > .cl,html body.home #every .wyt.one > .cr > .cc{border-bottom:0!important;border-top:0!important}
#every#every#every .cc,#every#every#every .cl{border-bottom:0!important;border-top:0!important}
#every#every#every .wyt.one > .cr.cg{padding:0 0 6px!important;margin:16px 0 0!important}#every#every#every .wyt.one > .cr.cg:first-of-type,#every#every#every .wyt.one > .cr.ch + .cr.cg{margin-top:4px!important}#every#every#every .wyt.one > .cr.cg > .cl{padding-top:0!important;padding-bottom:0!important;margin:0!important}
#every#every#every .wyt.one > .cr:not(.cg):not(.ch){padding-bottom:10px!important}
/* #149 one step stronger than "quiet" */
#every#every#every .wyt.one > .cr.cg > .cl{font-size:15px!important;line-height:20px!important;font-weight:800!important;letter-spacing:.07em!important}#every#every#every .wyt.one > .cr.cg > .cl::before{width:5px!important;height:18px!important}

/* #150/#153/#154 the short comparison under the feature list */

/* #159: the comparison carries the original lines, larger and tighter */

/* Bill 2026-10-15: "the check marks should be more prominent… kind of faint" — a bold drawn check, not the thin font one */

/* Bill 2026-10-15: "these two headings… should be probably the same size or definitely bolder and larger" — as large as the section headings below */
.home .wyb h3{font-size:28px!important;font-weight:750!important;line-height:1.1!important;letter-spacing:-.02em!important;margin:0 0 10px!important}
/* Bill 2026-10-15 ("Sanders Guide should be a larger font… the other… should not be light"; ChatGPT agreed, text not the logo): */

/* #57 (2026-10-15): the tastemakers section — a still of the live Videos tab, framed like the reminder still; a row of small tastemaker pictures (36px, never larger) with the count */
.home .demo-shot.tmshot{width:auto;max-width:320px;margin:0 auto;border:0!important;border-radius:0;box-shadow:none!important;background:transparent!important;overflow:visible}
.home .demo-shot.tmshot img{width:100%;height:auto;display:block;border:1px solid #DEDCD5;border-radius:12px}
.home .tm-row{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.home .tm-avs{display:flex;align-items:center}
.home .tm-avs img{width:36px;height:36px;border-radius:50%;border:2px solid #FBF8F2;margin-left:-8px;object-fit:cover;background:#F3EFE6;display:block}
.home .tm-avs img:first-child{margin-left:0}
.home .tm-n{margin:0;font-size:15px;color:#17181A}

/* #211 (Bill 2026-10-15 09:39: "the old version… where the globe was charcoal and the cities below it were charcoal looked more impactful…
   revert back to that… Consult with chat"): one warm-charcoal band for the globe and the city cards, flat, full-bleed, the page's container
   width; the neighborhood-map strip stays on paper below it. Colors from ChatGPT's answer (build/myplaces_review/globe_chatgpt_1015.md):
   no pure black, no blue, no shadows or glows; pins stay tomato; counts in the page's mustard. */
.home .world{padding:0 0 40px}
.home .world-band{background:#2D2B27!important;color:#FBF8F2;padding:48px 0 56px;margin:0 0 24px}
.home .world-band h2{color:#FBF8F2!important}
.home .world-band .lede{color:#D8D1C6!important}
.home .world-band .globe-hint{color:#B7B0A5!important}
.home .world-band .cgrid > *{background:#312F2A!important;border:1px solid #4A463F!important;color:#FBF8F2!important}
.home .world-band .cgrid button:hover{background:#3A3732!important;border-color:#FBF8F2!important}
.home .world-band .cgrid small{color:#C9C2B6!important}
.home .world-band .cgrid b{color:#FBF8F2!important}
.home .world-band .cgrid .cnt{color:#F2A900!important}
.home .world-band .cmore{color:#17181A!important;background:#FBF8F2!important;border-color:#FBF8F2!important}
.home .world-band .cmore:hover{background:#F3EFE6!important}
.home .world-band .cnote{color:#B7B0A5!important}
.home .world .cm-head{margin-top:0}
@media (min-width:900px){.home .world-band{padding:80px 0 88px}}

/* #309 (2026-10-15): "Share it. It’s in your guide." — a before/after of one real run: the paste page with the link in it, an arrow, the
   "We found N places" page. Stacked on a phone (arrow turned down), side by side from 900px; both stills framed like the other demo stills. */
.home #shareit .si-txt{max-width:640px;margin:0 auto 28px;text-align:center}
.home #shareit .si-txt .lede{margin:0 auto}
.home .si-pair{display:flex;flex-direction:column;align-items:center;gap:12px}
.home .si-shot{margin:0;width:100%;max-width:300px}
.home .si-shot img{width:100%;height:auto;display:block;border:1px solid #DEDCD5;border-radius:12px;background:#FBF8F2}
.home .si-shot figcaption{margin:10px 0 0;text-align:center;font-size:14px;font-weight:700;color:#17181A}
.home .si-arrow{color:#C43D30;display:flex;align-items:center;justify-content:center;transform:rotate(90deg);margin:2px 0}
@media (min-width:900px){
  .home .si-pair{flex-direction:row;align-items:flex-start;justify-content:center;gap:32px}
  .home .si-shot{max-width:360px}
  .home .si-arrow{transform:none;align-self:center;margin:0}
  .home #shareit .si-txt{margin-bottom:40px}
}

/* #230/#319 (Bill 2026-10-15 10:21 "a thin orange border around it, rounded in the corners"; 20:1x "do it"): the comparison chart alone,
   as in build/myplaces_review/promo_chart_border_230_1015.png — the key line under it stays outside */

/* #466 (Bill 2026-10-16 10:2x: "the table with the check marks looks not that exciting… make it pop more? Consult with chat."):
   ChatGPT's comparison ledger, chatgpt_direct/log/20261016-103831_REPLY_ask_compare_pop.md — mustard Sanders Guide lane, 2px ink frame,
   red check badges with a cream CSS tick, quiet dashes; the count sentence between the heading and the panel; phones (<768px): each
   sentence full width with a two-cell result strip under it. The old #compare rules: build/review_466_1016/look_p1.css.before. */
.home #every#every{background:#FBF8F2!important;color:#17181A!important;padding:56px 18px 64px!important}
.home #every#every > .wrap{max-width:1080px!important;margin-inline:auto!important}
.home #every#every > .wrap > h2{font-family:Inter,sans-serif!important;font-size:40px!important;line-height:42px!important;font-weight:800!important;letter-spacing:-.04em!important;margin:0 0 20px!important}
.home #every .vs-count{margin:0 0 24px!important;font:400 15px/22px Inter,sans-serif;color:#17181A}
.home #every .vs-count b{font-weight:700}
.home #compare{padding:0!important;margin:0!important;background:transparent!important}
.home #compare .vs-panel{width:100%;border:2px solid #17181A;border-radius:16px;overflow:hidden;box-shadow:0 6px 0 #E7E0D4;background:#FBF8F2}
.home #compare .vs-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;margin:0;border:0;font-family:Inter,sans-serif;color:#17181A}
.home #compare .vs-table th,.home #compare .vs-table td{border:0;margin:0;box-sizing:border-box;hyphens:none;overflow-wrap:break-word;white-space:normal}
.home #compare .vs-sr,.home #compare .vs-table thead th.f .vs-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.home #compare .vs-table .f{background:#FBF8F2}
.home #compare .vs-table .us{background:#F2B01E}
.home #compare .vs-table .ot{background:#F0EEE8}
/* the marks */
.home #compare .compare-check{position:relative;display:inline-block;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#C43D30;vertical-align:middle;transform:none}
.home #compare .compare-check::after{content:"";position:absolute;left:50%;top:46%;width:9px;height:15px;border-right:3px solid #FBF8F2;border-bottom:3px solid #FBF8F2;box-sizing:border-box;transform:translate(-50%,-55%) rotate(45deg)}
.home #compare .vs-dash{position:relative;display:inline-block;flex:0 0 32px;width:32px;height:32px;vertical-align:middle}
.home #compare .vs-dash::after{content:"";position:absolute;left:7px;top:15px;width:18px;height:2px;background:#77736C}
/* the key line under the panel: the same marks, small */
.home #compare .vs-key{margin:18px 0 0;font:400 13px/18px Inter,sans-serif;color:#62625C}
.home #compare .vs-kc{position:relative;display:inline-block;width:16px;height:16px;border-radius:50%;background:#C43D30;vertical-align:-3px}
.home #compare .vs-kc::after{content:"";position:absolute;left:50%;top:46%;width:5px;height:8px;border-right:2px solid #FBF8F2;border-bottom:2px solid #FBF8F2;box-sizing:border-box;transform:translate(-50%,-55%) rotate(45deg)}
.home #compare .vs-kd{display:inline-block;width:12px;height:2px;background:#77736C;vertical-align:4px}

/* DESKTOP, 768px and above: a three-column table, 56/22/22 */
@media (min-width:768px){
  .home #every#every{padding:80px 32px 96px!important}
  .home #every#every > .wrap > h2{font-size:56px!important;line-height:59px!important}
  .home #every .vs-count{font-size:16px;line-height:24px}
  .home #compare .vs-table thead th{height:104px;padding:20px 12px;text-align:center;vertical-align:middle}
  .home #compare .vs-table thead th.f{width:56%}
  .home #compare .vs-table thead th.us{width:22%;font-size:20px;line-height:23px;font-weight:700;color:#17181A}
  .home #compare .vs-table thead th.ot{width:22%;font-size:14px;line-height:20px;font-weight:500;color:#5F5B55}
  .home #compare .vs-table tbody th.f{padding:20px 24px;text-align:left;vertical-align:middle;font-size:17px;line-height:26px;font-weight:400;color:#17181A;border-top:1px solid #D8D1C5}
  .home #compare .vs-table tbody td{height:96px;padding:20px 12px;text-align:center;vertical-align:middle;border-top:1px solid #D8D1C5}
  .home #compare .vs-table tbody td.us{border-top-color:rgba(23,24,26,.16)}
  .home #compare .vs-table .vs-lab{display:none}
}

/* PHONES, below 768px: the sentence full width, then a two-cell strip naming both sides */
@media (max-width:767.98px){
  .home #compare .vs-table,.home #compare .vs-table tbody{display:block;width:100%}
  .home #compare .vs-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
  .home #compare .vs-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .home #compare .vs-table tbody tr + tr{border-top:1px solid #D8D1C5}
  .home #compare .vs-table tbody th.f{grid-column:1 / -1;display:block;padding:18px;text-align:left;font-size:16px;line-height:24px;font-weight:400;color:#17181A}
  .home #compare .vs-table tbody td{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:76px;padding:12px;text-align:left;border-top:1px solid rgba(23,24,26,.12)}
  .home #compare .vs-table tbody td.ot{border-left:1px solid rgba(23,24,26,.12)}
  .home #compare .vs-table .vs-lab{display:block;min-width:0}
  .home #compare .vs-table td.us .vs-lab{font-size:14px;line-height:17px;font-weight:700;color:#17181A}
  .home #compare .vs-table td.ot .vs-lab{font-size:12px;line-height:16px;font-weight:500;color:#5F5B55}
}

/* motion: each red badge settles up 4px as it enters the view (CSS only; reduced-motion and older browsers get the still design) */
.compare-check {
  transform: none;
}

@keyframes compare-check-enter {
  from { transform: translateY(4px) scale(.96); }
  to   { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and
            (animation-range: entry 0% entry 100%) {
    .compare-check {
      animation: compare-check-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

/* 10/16 #481 Bill (recording 11:17): "the font has to be bold for each where it says what it does. It shouldn't be so faint." */
#compare .vs-table tbody th.f{font-weight:700!important;color:#17181A!important}

/* #485 PREVIEW ONLY, option A (ChatGPT chatgpt_direct/log/20261016-112534_REPLY_ask_options.md) — never in the repo copy */
.home #every#every{background:#F2B01E!important;color:#17181A!important}
.home #every#every > .wrap > h2,.home #every .vs-count,.home #every .vs-count b{color:#17181A!important}
.home #every .vs-count .vs-asof,.home #every .vs-count .vs-asof *{color:#17181A!important;font-weight:500!important}
.home #compare .vs-panel{position:relative;isolation:isolate;border:0!important;padding:0;border-radius:10px!important;overflow:hidden;box-shadow:0 0 0 1px #17181A, 0 6px 18px #17181A24!important;background:#FBF8F2!important}
.home #compare .vs-table{position:relative;z-index:1;border-collapse:separate;border-spacing:0;table-layout:fixed;background:transparent;color:#17181A}
.home #compare .vs-table tbody .f,.home #compare .vs-table tbody .ot{background:#FBF8F2!important}
.home #compare .vs-table tbody .us{background:#FFF1CE!important}
.home #compare .vs-table thead th.f{background:#FBF8F2!important}
.home #compare .vs-table thead th.ot{background:#FBF8F2!important;color:#17181A!important}
.home #compare .vs-table thead th.us{background:#FFF1CE!important;color:#17181A!important}
.home #compare .vs-table tbody th.f{color:#17181A!important;font-weight:700!important}
.home #compare .vs-table tbody th.f,.home #compare .vs-table tbody td{border-top:1px solid #DDD8CE!important}
.home #compare .vs-table tbody td.us{border-top-color:#E6D8B6!important}

.home #compare .vs-table .vs-hn{display:none}
/* the marks: a 20px slot, a CSS tick 8x14 with 3px borders, a 16x2 dash; no badges */
.home #compare .compare-check{position:relative;display:inline-block;width:20px;height:20px;flex:none;border-radius:0;background:none!important;vertical-align:middle;animation:none!important;transform:none!important}
.home #compare .compare-check::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:14px;box-sizing:border-box;border:0;border-right:3px solid #C43D30;border-bottom:3px solid #C43D30;transform:translate(-50%,-62%) rotate(45deg)}
.home #compare .vs-dash{position:relative;display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.home #compare .vs-dash::after{content:"";position:absolute;left:2px;top:9px;width:16px;height:2px;background:#707070}

/* phones: the shared layout at 390px */
@media (max-width:639.98px){
  .home #every#every{padding:40px 18px 48px!important}
  .home #every#every > .wrap{padding:0!important;max-width:none!important}
  .home #every#every > .wrap > h2{font:800 40px/42px Inter,sans-serif!important;letter-spacing:-1.2px!important;margin:0 0 16px!important}
  .home #every .vs-count{font:400 14px/20px Inter,sans-serif!important;margin:0 0 20px!important}
  .home #every .vs-count b{font-weight:700!important}
  .home #compare,.home #every#every #compare{margin:0!important}
  .home #compare .vs-table,.home #compare .vs-table tbody{display:table!important;width:100%!important}
  .home #compare .vs-table tbody{display:table-row-group!important}
  .home #compare .vs-table thead{display:table-header-group!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important}
  .home #compare .vs-table tr{display:table-row!important}
  .home #compare .vs-table th,.home #compare .vs-table td{display:table-cell!important;min-height:0!important}
  .home #compare .vs-table col.c-us{width:64px}
  .home #compare .vs-table col.c-ot{width:78px}
  .home #compare .vs-table thead th{height:80px;padding:12px 4px;text-align:center;vertical-align:middle;position:static}
  .home #compare .vs-table thead th.us{font:800 12px/15px Inter,sans-serif!important}
  .home #compare .vs-table thead th.ot{font:600 11px/14px Inter,sans-serif!important}
  .home #compare .vs-table .vs-hw{display:none}
  .home #compare .vs-table .vs-hn{display:inline}
  .home #compare .vs-table tbody th.f{grid-column:auto;padding:12px!important;text-align:left;vertical-align:top;font:700 15px/21px Inter,sans-serif!important}
  .home #compare .vs-table tbody td{padding:12px 0!important;text-align:center;vertical-align:top;height:auto!important;line-height:21px}
  .home #compare .vs-table tbody td.ot{border-left:0!important}
  .home #compare .compare-check,.home #compare .vs-dash{display:block;margin:0 auto}
  
}

/* 10/16 #487 Bill (shot 11:35): "The sections beneath it should not be in mustard" — the mustard ends after the table; "Book direct" and
   "Read the critics" sit on the cream paper, edge to edge */
.home #every#every{padding-bottom:0!important}
.home #every .wy-blocks{position:relative;margin-top:40px!important;padding:40px 0 56px!important;background:#FBF8F2;box-shadow:0 0 0 100vmax #FBF8F2;clip-path:inset(0 -100vmax)}

/* #489 PREVIEW ONLY — section rhythm (ChatGPT chatgpt_direct/log/20261016-114337_REPLY_ask_rhythm.md); never in the repo copy */
html body.home{--g489:20px}
@media (min-width:900px){html body.home{--g489:40px}}
html body.home main > .hero,html body.home section.sec{border-top:0!important;border-bottom:0!important;margin-top:0!important;margin-bottom:0!important;position:relative}
html body.home main > .hero{padding:48px 0!important}
html body.home section.reelsec,html body.home section#reminders.sec,html body.home section#walk.sec,html body.home section#check.sec,
html body.home section#tastemakers.sec,html body.home section#shareit.sec,html body.home section#faq.sec{padding:48px 0!important}
html body.home section#story-sec.sec{padding:32px 0!important}
html body.home section#cities.sec{padding:0 0 48px!important}
html body.home section#membership.sec{padding:56px 0!important}
html body.home #every .wy-blocks{padding:48px 0!important}
html body.home #every .wy-blocks .wyb + .wyb{margin-top:32px!important;padding-top:0!important;border-top:0!important}
html body.home .demo-txt h2{margin-bottom:16px!important}
html body.home .demo-txt .eyebrow{font-size:12px!important;line-height:16px!important;font-weight:700!important;letter-spacing:.1em!important;margin:0 0 12px!important}
/* A — alternating paper tones */
html body.home section.reelsec,html body.home section#walk.sec,html body.home section#tastemakers.sec,html body.home section#cities.sec,html body.home section#faq.sec{background:#EEE7DC!important}
html body.home section#walk .demo-txt .eyebrow,html body.home section#tastemakers .demo-txt .eyebrow,html body.home section#faq .eyebrow{color:#A93428!important}
html body.home section#reminders::before{content:"";position:absolute;top:0;left:max(var(--g489),calc((100% - 1160px)/2 + var(--g489)));right:max(var(--g489),calc((100% - 1160px)/2 + var(--g489)));border-top:1px solid #D6CEC1}
html body.home section#faq .faq a,html body.home section#walk .lede a,html body.home section#tastemakers .lede a,html body.home section.reelsec .rl-note a{color:#A93428!important;text-decoration:underline}

/* ---- 2026-10-17 12:4x Bill picked "B" (DECISIONS 12:4x; ChatGPT 12:26): calmer colors — the oat sections and the comparison section
   on #F2F1ED, the header band's mustard softened to #E6B64D, the Sanders Guide column #F8EFD9 ---- */
html body.home section.reelsec,html body.home section#walk.sec,html body.home section#tastemakers.sec,html body.home section#cities.sec,html body.home section#faq.sec{background:#F2F1ED!important}
.home #every#every{background:#F2F1ED!important}
.home #compare .vs-table .us{background:#F8EFD9!important}
.home .band,.fs-bar{background:#E6B64D!important}
.home #every .wyt.one > .cr.cg{background:#F8EFD9!important}
/* the "Why not just use ChatGPT, Claude or Gemini?" call-out (Bill 12:4x: "a big call out… and it should also be in the table") */
.home section.aisec{background:#FBF8F2;padding:34px 0 30px}
.home .aisec .ai-card{max-width:760px;margin:0 auto;background:#F2F1ED;border:1px solid #D9D9D2;border-top:4px solid #E6B64D;border-radius:14px;padding:22px 20px 20px;box-sizing:border-box}
.home .aisec h2{font-size:30px;line-height:34px;font-weight:800;letter-spacing:-.01em;margin:0 0 12px;color:#17181A}
.home .aisec .ai-lede{font-size:17px;line-height:24px;margin:0 0 14px;color:#17181A}
.home .aisec ul.ai-checks{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.home .aisec ul.ai-checks li{font-size:15px;line-height:20px;font-weight:600;color:#17181A;padding-left:24px;position:relative}
.home .aisec ul.ai-checks li:before{content:"\2713";position:absolute;left:0;top:0;color:#C43D30;font-weight:800}
.home .aisec .ai-note{font-size:14px;line-height:20px;color:#5E605B;margin:0 0 16px}
.home .aisec .ai-flow{display:flex;flex-direction:column;gap:8px}
.home .aisec .ai-q{align-self:flex-start;background:#17181A;color:#FBF8F2;border-radius:16px 16px 16px 4px;padding:8px 14px;font-size:14px;font-weight:600}
.home .aisec .ai-node{border:1px solid #D9D9D2;border-radius:10px;padding:10px 12px;font-size:14px;line-height:19px;background:#FBF8F2}
.home .aisec .ai-node b{display:block;font-size:15px}
.home .aisec .ai-node.sg{background:#F8EFD9}
.home .aisec .ai-arrow{align-self:center;color:#5E605B;font-size:16px;line-height:1}
@media (min-width:760px){.home .aisec h2{font-size:38px;line-height:42px}.home .aisec ul.ai-checks{grid-template-columns:repeat(4,auto)}}
.home .aisec ul.ai-list{list-style:none;padding:0;margin:0 0 16px}
.home .aisec ul.ai-list li{font-size:16px;line-height:22px;color:#17181A;padding:10px 0 10px 28px;position:relative;border-top:1px solid #D9D9D2}
.home .aisec ul.ai-list li:first-child{border-top:0}
.home .aisec ul.ai-list li:before{content:"\2713";position:absolute;left:2px;top:10px;color:#C43D30;font-weight:800}
.home .aisec .ai-more{display:inline-block;font-weight:700;font-size:16px;color:#17181A;text-decoration:underline;text-underline-offset:3px}
.home .aisec .ai-foot{font-size:12.5px;line-height:17px;color:#5E605B;margin:0 0 14px}
.aisec .ai-list li[hidden]{display:none!important}
.aisec .ai-more[hidden]{display:none!important}
/* Intel section (Bill 2026-10-17 19:4x) */
#intel .intel-ex{display:grid;gap:12px;margin-top:18px}
#intel .ix{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid #DEDCD5;border-radius:14px;background:#fff}
#intel .ix b{font-size:18px;font-weight:800;color:#17181A}#intel .ix span{font-size:16px;line-height:1.45;color:#17181A}
#intel .ix a{font-size:14px;color:#555B64;text-decoration:none;margin-right:10px}
@media(min-width:900px){#intel .intel-ex{grid-template-columns:repeat(3,1fr)}}
#intel .ix .ixs{display:block}

/* #892 (Bill 10/17 21:1x "formatting of this is terrible… best practices"): fine print centered under the full-width button, the monthly
   option on its own line, the membership code out of the hero (footer + sign-in page, as Netflix/Spotify/Apple do) */
.home .hero-cta .fine{text-align:center;max-width:none;margin:10px auto 0}
.home .hero-cta .fine-alt{margin-top:8px;font-size:13px}
@media (min-width:900px){.home .hero-cta .fine{text-align:left;margin-left:0;max-width:34em}}
/* #980 (Bill 10/18 08:5x, desktop: "Read the critics is lower than book direct"): side by side, both blocks start at the same line —
   the stacked-phone rule above (second block 32px lower, no rule line) only applies when they are stacked */
@media (min-width:900px){html body.home #every .wy-blocks .wyb + .wyb{margin-top:0!important;padding-top:20px!important;border-top:1px solid #DEDCD5!important}}

/* ===== #992 (Bill 10/18 09:0x: the table's yellow column "looks a little dated… more vibrant… the check mark… red… Sanders Guide at the top
   of the column… bold or slightly larger… extra spacing… different sections… a little more different color"). ChatGPT 09:2x spec; the
   wording is unchanged (EVERY, the column names and the city chips stay as Bill approved them). ===== */
html body.home #compare .vs-panel{border:1px solid #D8CFC2!important;border-radius:10px!important;overflow:hidden!important;box-shadow:none!important;background:#FBF8F2!important}
html body.home #compare .vs-table{background:#FBF8F2!important;border-collapse:separate!important;border-spacing:0!important}
html body.home #compare .vs-table .us,html body.home #compare .vs-table tbody .us,html body.home #compare .vs-table thead th.us{background:transparent!important}
html body.home #compare .vs-table thead th.us{font:800 16px/19px Inter,sans-serif!important;color:#C43D30!important;border-top:3px solid #E53945!important;text-align:center!important;padding:12px 4px!important;vertical-align:middle!important}
html body.home #compare .vs-table thead th.ot{font:600 12px/16px Inter,sans-serif!important;color:#635C55!important;padding:12px 4px!important;vertical-align:middle!important}
html body.home #compare .vs-table tbody th.f{font:400 15px/21px Inter,sans-serif!important;color:#17181A!important;padding:12px!important}
html body.home #compare .vs-table tbody td{padding:12px 4px!important;text-align:center!important;vertical-align:top!important}
html body.home #compare .vs-table tbody tr>*{border-top:1px solid #D8CFC2!important;border-left:0!important;border-right:0!important}
html body.home #compare .vs-table tbody td.us{border-top-color:#D8CFC2!important}
html body.home #compare .vs-table thead tr>*{border-bottom:1px solid #D8CFC2!important}
html body.home #compare .compare-check{display:inline-block!important;width:22px!important;height:22px!important;border:0!important;transform:none!important;margin:0!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E53945' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/22px 22px no-repeat!important}
html body.home #compare .compare-check::before,html body.home #compare .compare-check::after{content:none!important;display:none!important}
html body.home #compare .vs-dash{color:#82786D!important}
/* section rhythm: paper and warm stone, full width, alternating */
html body.home section.reelsec,html body.home section#every,html body.home section#reminders,html body.home section#tastemakers,html body.home section#cities,html body.home section#faq{background:#F1EAE0!important}
html body.home section.hero,html body.home section#story-sec,html body.home section#ai,html body.home section#check,html body.home section#shareit,html body.home section#membership{background:#FBF8F2!important}
@media (max-width:600px){
  html body.home section.sec{padding-top:36px!important;padding-bottom:36px!important}
  html body.home section.hero{padding-top:28px!important;padding-bottom:32px!important}
  html body.home #every .wy-blocks{padding:32px 0 0!important}
  html body.home .sec h2{margin-bottom:12px!important}
  html body.home .storysec blockquote,html body.home .storysec .quote{font-size:17px!important;line-height:26px!important;border-left:3px solid #E53945!important;padding-left:16px!important}
}
html body.home section #compare .vs-table col.c-f{width:54%!important}html body.home section #compare .vs-table col.c-us{width:24%!important}html body.home section #compare .vs-table col.c-ot{width:22%!important}
html body.home section #compare .vs-table thead th.us{font:800 15px/18px Inter,sans-serif!important;word-break:keep-all!important;overflow-wrap:normal!important;hyphens:none!important}
html body.home section #compare .vs-table thead th#vs-ot{font:600 12px/16px Inter,sans-serif!important;color:#635C55!important}

/* #1033 (Bill 10/18 10:5x: "the header is not sticky… make… the header sticky"): the header sticks; its logo row slides away, the yellow band
   with Sign in and Try 7 days free stays at the top */
html body.home header{position:sticky!important;top:var(--sg-mast-neg,0px)!important;z-index:60!important}
/* #1032: the join box after the comparison */
.home .midcta{max-width:420px;margin:28px auto 8px;text-align:center}.home .midcta .btn{width:100%}.home .midcta .fine{font-size:12px;line-height:1.4;color:#62625C;margin:10px 0 0}
.home .midcta .fine a{color:#17181A;font-weight:600;text-decoration:underline;text-underline-offset:2px}.home .midcta .fine-alt{font-size:13px;margin-top:8px}

/* #1033: the band pinned once the logo row is off screen (index.html script) */
html body.home header{position:static!important;top:auto!important}
.home .band.sg-fixed{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:60!important;box-shadow:0 2px 6px rgba(0,0,0,.08)}
/* #992: the section colours win over older per-section backgrounds */
html body.home section.reelsec:not(#_z),html body.home section#every:not(#_z),html body.home section#reminders:not(#_z),html body.home section#tastemakers:not(#_z),html body.home section#cities:not(#_z),html body.home section#faq:not(#_z){background:#F1EAE0!important}
html body.home section.hero:not(#_z),html body.home section#story-sec:not(#_z),html body.home section#ai:not(#_z),html body.home section#check:not(#_z),html body.home section#shareit:not(#_z),html body.home section#membership:not(#_z){background:#FBF8F2!important}
/* #1040 (Bill 10/18 11:03: "the mustard header above the header… doesn't look great when you start scrolling"; "the table… more off-white…
   doesn't pop enough"): once pinned, the bar turns paper (Safari tints the status area from whatever sits at the top, so a mustard bar made a
   second mustard band above it); the comparison table is white on the stone section */
.home .band.sg-fixed{background:#FBF8F2!important;border-top:0!important;border-bottom:1px solid #DEDCD5!important;box-shadow:0 2px 8px rgba(23,24,26,.06)!important}
html body.home #compare .vs-panel,html body.home #compare .vs-table,html body.home section #compare .vs-table thead th,html body.home section #compare .vs-table tbody th,html body.home section #compare .vs-table tbody td{background:#FFFFFF!important}
html body.home #compare .vs-panel{border-color:#D8D2C6!important;box-shadow:0 1px 3px rgba(23,24,26,.06)!important}
html body.home section#every #compare .vs-table tbody tr>*:not(#_z),html body.home section#every #compare .vs-table thead tr>*:not(#_z){background:#FFFFFF!important}