:root{--navy:#1d2b4f;--navy2:#16213d;--navy3:#0f1829;--gold:#e3a92e;--gold-lt:#f0c766;--gold-dp:#c08a1e;
--cream:#fdfaf3;--cream2:#f4ede0;--ink:#1c1c1c;--mut:#6f6a62;--line:#e2dccf;--orange:#d9741f;}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* NAV */
.nav{background:var(--navy);padding:14px 24px}
.nav .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px}
.logomark{width:46px;height:46px;border:2px solid var(--gold);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.logomark b{color:var(--gold);font-size:15px;letter-spacing:.5px}
.logomark i{color:#fff;font-size:13px;font-weight:700;font-style:normal}
.tagline{color:#fff;font-size:12px;letter-spacing:3px}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.6px;color:#fff}
.navlinks a{color:#fff}
.navlinks a:hover{color:var(--gold-lt)}
.pill{background:var(--gold);color:var(--navy);padding:7px 13px;border-radius:16px;font-weight:700}
.pill.orange{background:var(--orange);color:#fff}
.pill.ghost{border:1.5px solid #9db4e0;padding:6px 12px;border-radius:16px}
/* CATEGORY BAR */
.catbar{background:var(--navy2);padding:12px 20px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.catbar a{background:#2b3d69;border:1px solid #46578a;color:#f4f1ec;font-size:11px;letter-spacing:.04em;padding:6px 12px;border-radius:5px;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.catbar a:hover{background:var(--gold);border-color:var(--gold);color:#412402}
.catbar a.all{background:var(--gold);border-color:var(--gold);color:#412402;font-weight:600}
.catbar a.all:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
/* HERO */
.hero{position:relative;min-height:540px;display:flex;align-items:center;padding:52px 24px;
/* Image request REMOVED 2026-08-31. It resolved to /css/images/hero.jpg and
   404'd on every page load -- site.css lives in /css/, so a bare 'images/...'
   path never pointed at /images/. The neutral gradient IS the look Paul wants
   (a Prescott cityscape would skew a five-county site toward one county), so
   the fix is to stop asking for the file, not to correct the path. */
 background:linear-gradient(rgba(12,20,40,.60),rgba(12,20,40,.74)) center 40%/cover}
.hero .in{max-width:1180px;margin:0 auto;width:100%}
.badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:1.6px;padding:5px 11px;border-radius:3px;margin-bottom:15px}
.hero h1{color:#fff;font-size:44px;line-height:1.14;margin:0 0 14px;max-width:660px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
.hero p{color:#dde5f2;font-size:16px;line-height:1.6;max-width:600px;margin:0 0 22px}
.btn{display:inline-block;background:var(--gold);color:var(--navy);padding:13px 24px;border-radius:4px;font-weight:700;font-size:14px;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--gold-lt)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.65);color:#fff}
.btn.navy{background:var(--navy);color:#fff}
/* SECTIONS */
.sec{padding:46px 24px}
.sec.alt{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--gold-dp);font-size:11px;letter-spacing:2.4px;font-weight:600;text-align:center;margin-bottom:12px}
h2.sec-t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:34px;color:var(--navy);text-align:center;margin:0 0 12px}
.sec-sub{text-align:center;color:var(--mut);font-size:14.5px;max-width:660px;margin:0 auto 26px;line-height:1.65}
.count{text-align:center;font-size:18px;color:var(--navy);margin-bottom:24px}
.count b{color:var(--gold-dp)}
/* SEARCH */
.searchrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.searchrow input{border:2px solid var(--navy);border-radius:4px;padding:12px 15px;width:380px;max-width:78vw;font-size:14px;font-family:inherit;background:#fff}
.searchrow input:focus{outline:none;border-color:var(--gold-dp)}
/* CATEGORY GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .13s,box-shadow .13s;display:block}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(29,43,79,.16)}
.card .band{height:56px}
.card .body{padding:12px 13px}
.card .body .n{color:var(--navy);font-size:14px;font-weight:700;line-height:1.3}
.card .body .c{color:#9a9a9a;font-size:11.5px;margin-top:3px}
/* LISTINGS */
.listwrap{max-width:1180px;margin:0 auto}
.feat{background:#fff;border:2px solid var(--gold);border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 3px 14px rgba(227,169,46,.25)}
.feat .lbl{color:var(--gold-dp);font-size:10.5px;letter-spacing:1.4px;font-weight:700;margin-bottom:10px}
.feat h3{margin:0 0 6px;color:var(--navy);font-size:19px;font-family:'Cormorant Garamond',Georgia,serif}
.feat p{margin:0 0 12px;color:var(--mut);font-size:13.5px;line-height:1.6}
.listing{background:#fff;border:1px solid var(--line);border-radius:6px;padding:13px 16px;margin-bottom:7px;display:flex;align-items:center;gap:12px}
.listing .nm{font-size:15px;color:var(--ink);flex:1}
.listing .ct{font-size:11.5px;color:#a5a09a;white-space:nowrap}
.muted-note{color:var(--mut);font-size:12.5px;font-style:italic;margin-top:14px;text-align:center}
/* NEWSLETTER */
.news{background:var(--navy);padding:44px 24px;text-align:center}
.news h2{color:#fff;font-size:30px;margin:0 0 10px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
.news p{color:#b8c6e0;font-size:14px;max-width:540px;margin:0 auto 20px}
.news form{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.news input{border:none;border-radius:4px;padding:12px 14px;font-size:13.5px;font-family:inherit}
.news .row2{display:flex;gap:9px}.news .row2 input{flex:1;width:100%}
/* FOOTER */
footer{background:var(--navy3);padding:30px 24px}
footer .in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
footer h4{color:#fff;font-size:12px;margin:0 0 10px;letter-spacing:.5px}
footer a,footer div.f{color:#8fa2c4;font-size:12px;line-height:2.05;display:block}
footer a:hover{color:var(--gold-lt)}
.copy{background:#0b1322;padding:14px;text-align:center;color:#6d80a3;font-size:11.5px}
/* AGENT */
.agent{position:fixed;right:20px;bottom:18px;z-index:9999;display:flex;align-items:flex-end;gap:10px}
.agent .bub{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:12px 15px;box-shadow:0 4px 16px rgba(0,0,0,.17);max-width:250px;font-size:12.5px;line-height:1.5}
.agent .btnc{width:50px;height:50px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.26);flex-shrink:0;cursor:pointer}
@media(max-width:640px){.hero h1{font-size:32px}h2.sec-t{font-size:26px}.agent .bub{display:none}}

/* HERO CAROUSEL (index only) */
.hero .in.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.hgrid .hleft h1{max-width:none}
.hgrid .hleft p{max-width:none}
.hz-stage{min-height:356px;display:flex;align-items:center}
.hz-card{background:rgba(20,31,58,.90);border:1px solid rgba(227,169,46,.45);border-radius:10px;padding:22px 24px;width:100%}
.hz-card .hh{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;color:var(--gold);line-height:1.18;font-weight:600}
.hz-card .hb{font-size:14px;color:#dde5f2;margin-top:9px;line-height:1.6}
.hz-ctl{display:flex;align-items:center;gap:10px;margin-top:14px}
.hz-pz{background:transparent;border:1px solid rgba(255,255,255,.40);color:#dde5f2;font-size:11px;padding:5px 11px;border-radius:4px;cursor:pointer;font-family:inherit}
.hz-pz:hover{background:rgba(255,255,255,.12)}
.hz-dots{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.hz-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.32);display:inline-block}
.hz-dot.on{background:var(--gold)}
.hz-meta{font-size:10.5px;color:#9fb0cc;margin-top:7px;font-style:italic}
@media(max-width:860px){.hero{min-height:auto;padding:34px 20px}.hero .in.hgrid{grid-template-columns:1fr;gap:24px}.hz-stage{min-height:340px}}

/* CAROUSEL AD CARDS */
.hz-ad{background:#fff;border:2px solid var(--gold);border-radius:10px;width:100%;position:relative;overflow:hidden}

.hz-photo{width:100%;height:200px;object-fit:cover;display:block}
.hz-chip{position:absolute;left:14px;top:160px;background:#fff;border-radius:8px;padding:6px 10px;box-shadow:0 3px 10px rgba(0,0,0,.28);height:46px;display:flex;align-items:center}
.hz-chip img{height:32px;width:auto;max-width:112px;object-fit:contain;display:block}
.hz-chip.dark{background:#111;border:1px solid #2c2c2c}
.hz-body{padding:28px 18px 15px}
.hz-offer{background:linear-gradient(135deg,#e3a92e,#c08a1e);border-radius:10px;padding:20px 22px;width:100%;display:block;text-decoration:none;transition:transform .18s,box-shadow .18s}
.hz-offer:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.32)}
.hz-tag{position:absolute;right:12px;top:12px;background:var(--gold);color:#2a1a02;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.hz-top{margin-bottom:2px}
.hz-lg{height:44px;width:auto;max-width:150px;object-fit:contain;flex:0 0 auto}
.hz-nm{font-weight:700;font-size:16px;color:var(--navy);line-height:1.2}
.hz-cat{font-size:12px;color:#8a8474;margin-top:2px}
.hz-txt{font-size:13.5px;color:#55524a;margin-top:10px;line-height:1.55}
.hz-fine{font-size:10.5px;color:#9b958a;margin-top:8px}
.hz-offer .oh{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:#2a1a02;font-weight:600;line-height:1.18}
.hz-offer .ob{font-size:13.5px;color:#4a3208;margin-top:8px;line-height:1.55}
.hz-offer .op{display:inline-block;background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:5px;margin-top:12px}

.hz-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.hz-call{background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:6px;text-decoration:none;letter-spacing:.02em}
.hz-call:hover{background:#152443}
.hz-web{border:1.5px solid var(--gold-dp);color:var(--gold-dp);font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:6px;text-decoration:none}
.hz-web:hover{background:var(--gold);border-color:var(--gold);color:#2a1a02}

.hz-fine b{color:#55524a;font-weight:800}
/* ===== AD BORDER EFFECTS — added 2026-08-21 ===== */
.hz-fx{position:relative;border-radius:11px;padding:3px;display:block;width:100%}
.hz-fx>.hz-ad,.hz-fx>.hz-offer,.hz-fx>.hz-card{position:relative;z-index:1}
.hz-fx>.hz-ad{border-color:transparent}
/* 1 gold sweep */
.fx-sweep{background:var(--line);overflow:hidden}
.fx-sweep:before{content:'';position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0deg,transparent 300deg,var(--gold-lt) 340deg,var(--gold) 355deg,transparent 360deg);animation:fxspin 3.4s linear infinite}
@keyframes fxspin{to{transform:rotate(360deg)}}
/* 2 glow pulse */
.fx-glow{border:2px solid var(--line);background:#fff;animation:fxpulse 2.8s ease-in-out infinite}
@keyframes fxpulse{0%,100%{box-shadow:0 0 0 0 rgba(227,169,46,0);border-color:var(--line)}50%{box-shadow:0 0 18px 3px rgba(227,169,46,.45);border-color:var(--gold)}}
/* 3 corner brackets */
.fx-brk{border:2px solid var(--line);background:#fff}
.fx-brk .fxb{position:absolute;width:28px;height:28px;border:3px solid var(--gold);opacity:0;z-index:3;pointer-events:none}
.fx-brk .fxb:nth-of-type(1){left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:9px 0 0 0;animation:fxbrk 3.4s ease-in-out infinite}
.fx-brk .fxb:nth-of-type(2){right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 9px 0;animation:fxbrk 3.4s ease-in-out .22s infinite}
@keyframes fxbrk{0%{opacity:0;transform:translate(6px,6px)}18%,60%{opacity:1;transform:translate(0,0)}90%,100%{opacity:0;transform:translate(0,0)}}
/* 4 sparkle */
.fx-spk{border:2px solid var(--gold-dp);background:#fff}
.fx-spk .fxs{position:absolute;width:7px;height:7px;background:var(--gold-lt);border-radius:50%;opacity:0;box-shadow:0 0 9px 2px rgba(240,199,102,.9);z-index:3;pointer-events:none;animation:fxspk 2.8s ease-in-out infinite}
.fx-spk .fxs:nth-of-type(1){left:16%;top:-4px}
.fx-spk .fxs:nth-of-type(2){right:9%;top:-4px;animation-delay:.55s}
.fx-spk .fxs:nth-of-type(3){right:-4px;top:52%;animation-delay:1.1s}
.fx-spk .fxs:nth-of-type(4){left:38%;bottom:-4px;animation-delay:1.65s}
.fx-spk .fxs:nth-of-type(5){left:-4px;top:26%;animation-delay:2.2s}
@keyframes fxspk{0%,72%,100%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.25)}88%{opacity:0;transform:scale(.5)}}
/* 5 rise and settle */
.fx-rise{border:2px solid var(--line);background:#fff;animation:fxrise 3.8s ease-out infinite}
@keyframes fxrise{0%{transform:translateY(12px);opacity:.35;border-color:var(--line);box-shadow:0 0 0 rgba(29,43,79,0)}22%{transform:translateY(0);opacity:1;border-color:var(--gold)}70%{border-color:var(--gold);box-shadow:0 8px 22px rgba(29,43,79,.18)}100%{transform:translateY(0);opacity:1;border-color:var(--line);box-shadow:0 2px 8px rgba(29,43,79,.07)}}
/* 6 static premium */
.fx-prem{border:2px solid var(--gold);background:#fff;box-shadow:0 3px 16px rgba(192,138,30,.22);transition:box-shadow .2s}
.fx-prem:hover{box-shadow:0 6px 26px rgba(192,138,30,.38)}
/* accessibility: honour a visitor who has asked for less motion */
@media (prefers-reduced-motion: reduce){
 .fx-sweep:before,.fx-glow,.fx-brk .fxb,.fx-spk .fxs,.fx-rise{animation:none!important}
 .fx-sweep{background:var(--gold)}
 .fx-glow,.fx-brk,.fx-rise{border-color:var(--gold)}
 .fx-brk .fxb,.fx-spk .fxs{opacity:1}
}

/* --- generator additions --- */

/* --- solo video pane (Paul, 2026-08-26): one salesperson, standing still --- */
/* A full-width Sage band was built and rejected on sight, 2026-08-31. Kept out
   rather than left as dead CSS: she is back in the left pane where she started.
   The reason it lost is worth remembering if it is ever proposed again -- giving
   her the whole fold pushed every advertiser below it, and the home page carousel
   spot is the thing Platinum is sold on. */
/* The FSBO button. Louder than the other two pills on purpose -- Sage tells
   people out loud to look for it, so it has to win a glance. Gold fill against
   the navy bar, slightly larger text, and a soft halo so it reads as the one
   thing on the bar that is not navigation. */
.nav a.pill.fsbo{position:relative;background:linear-gradient(180deg,#f0c766,#e3a92e);
 color:#1d2b4f;font-weight:800;letter-spacing:.06em;border:1px solid #c08a1e;
 padding:8px 16px;animation:fsboGlow 2.6s ease-in-out infinite}
.nav a.pill.fsbo:hover{background:linear-gradient(180deg,#f7d489,#eab63f);
 animation-play-state:paused;box-shadow:0 0 0 4px rgba(227,169,46,.42),
 0 0 26px 6px rgba(227,169,46,.55)}
/* The glow. Same family as the advertiser border effects at features/ad-effects.html
   -- fx-glow is the one on the Windmill card. A halo that breathes rather than
   blinks: blinking reads as an error state, a slow pulse reads as "this one is
   worth a look." Paul, 2026-08-31: "I want it to glow."
   ⚠️ It is the ONLY animated thing in the nav on purpose. Two competing pulses
   in one bar and neither wins. */
@keyframes fsboGlow{
  0%,100%{box-shadow:0 0 0 2px rgba(227,169,46,.20), 0 0 10px 1px rgba(227,169,46,.28)}
  50%    {box-shadow:0 0 0 4px rgba(227,169,46,.40), 0 0 22px 5px rgba(227,169,46,.60)}
}
@media(prefers-reduced-motion:reduce){
  /* Someone who has asked their machine to stop animating things gets the halo
     without the pulse -- still the loudest button on the bar, just still. */
  .nav a.pill.fsbo{animation:none;
   box-shadow:0 0 0 3px rgba(227,169,46,.34), 0 0 18px 4px rgba(227,169,46,.5)}
}

/* FSBO consent block. Deliberately plain and roomy -- these tick boxes decide
   who is allowed to phone a private individual at home, so they get read, not
   skimmed past. No clever styling, nothing pre-ticked. */
.consent{background:#f7f5ef;border:1px solid #e6e2d8;border-radius:8px;
 padding:16px 18px;margin:14px 0}
.consent .clab{font-weight:600;color:#1d2b4f;font-size:14.5px;margin:0 0 10px}
.consent label{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;
 color:#3a3730;line-height:1.55;padding:5px 0;cursor:pointer}
.consent input[type=checkbox]{width:17px;height:17px;margin:2px 0 0;flex:0 0 auto;
 accent-color:#1d2b4f;cursor:pointer}
/* RADIO BUTTONS -- added 2026-09-03, description corrected by Paul the same night.
   The rule above existed for checkboxes and there was no matching one for radios.
   ⚠️ THE VISIBLE DOT WAS NEVER THE PROBLEM -- it always rendered at its natural
   ~13px and never changed size. What was wrong was the INVISIBLE BOX around it:
   with no width and no flex rule, the input stretched to 404px and 349px inside
   the flex label, and that empty box shoved each label to the far right edge
   where it wrapped onto two lines. The symptom Paul actually saw, and the right
   way to describe it: TWO ROWS OF TEXT MISALIGNED, not oversized buttons.
   Claude measured w:404 h:13 and still called it a dot-size bug -- the height
   was sitting there in the same reading saying otherwise.
   That control decides whether a business may lawfully be phoned -- an owner may,
   a neighbour recommending somebody else may not -- so it is the last control on
   the site that should be ambiguous. Every automated check on that form was green
   and it was still wrong on screen; Paul found it by looking at it.
   Same three declarations as the checkbox: a fixed 17px box, flex:0 0 auto so the
   flex row cannot stretch it, and the navy accent. */
.consent input[type=radio]{width:17px;height:17px;margin:2px 0 0;flex:0 0 auto;
 accent-color:#1d2b4f;cursor:pointer}
.consent .cnote{font-size:13px;color:#6b6659;line-height:1.6;margin:10px 0 0}

.pane.billboard.solo{align-items:flex-start;gap:0}
.solo-h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
 font-size:38px;line-height:1.12;color:#fff;margin:0 0 14px;letter-spacing:.2px}
.solo-stage{width:100%;min-height:430px}
.solo-stage .bslide{width:100%;height:100%}
.solo-sub{color:#d8cdb4;font-size:14.5px;line-height:1.65;margin:14px 0 0;max-width:46ch}
.pane.billboard.solo video.hz-photo{width:100%;height:auto;display:block;background:#0c1428}
@media(max-width:900px){.solo-h1{font-size:30px}.solo-stage{min-height:0}}
/* --- selling pages: ladder, menu, services, contact form ----------------- */
/* Ported from the hand-built advertise.html so the generated page is visually
   identical to what was already on air -- the change is where the NUMBERS come
   from, not how the page looks. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;max-width:1180px;margin:0 auto;align-items:stretch}
.tier{background:#fff;border:1px solid #e6e2d8;border-radius:9px;padding:0 0 22px;display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}
.tier .cap{height:5px;display:block}
.tier .pad{padding:20px 18px 0;display:flex;flex-direction:column;flex:1}
.tier.best{border:2px solid #e3a92e;box-shadow:0 4px 18px rgba(227,169,46,.26)}
.tier .flag{position:absolute;top:0;right:0;background:#e3a92e;color:#1d2b4f;font-size:9.5px;font-weight:800;letter-spacing:1.1px;padding:4px 9px;border-bottom-left-radius:5px}
.tier h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:24px;color:#1d2b4f;margin:0 0 2px;letter-spacing:.3px}
.tier .amt{font-size:31px;font-weight:700;color:#1d2b4f;line-height:1.1;margin:8px 0 2px}
.tier .amt span{font-size:13px;font-weight:400;color:#8a8578}
.tier .who{font-size:12px;color:#a8802a;font-weight:600;min-height:32px;line-height:1.4;margin-bottom:11px}
.tier ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.tier li{font-size:13px;color:#3a3730;line-height:1.45;padding:6px 0 6px 19px;position:relative;border-bottom:1px solid #f4f1ea}
.tier li:last-child{border-bottom:none}
/* THE BACKSLASHES BELOW MUST STAY DOUBLED, AND THIS COMMENT MUST STAY
   ESCAPE-FREE. EXTRA_CSS is an ordinary Python string, not a raw one. A CSS
   unicode escape written with ONE backslash is eaten by Python as an octal
   escape before CSS ever sees it: the tick became a superscript-one followed
   by a 3, and the em-dash became an invisible control character followed by a
   4. Both were live -- on the tier cards and on the FSBO list -- until
   2026-09-01, when Paul spotted them by reading the actual page. No check we
   run would have caught it, because the build was valid and the stylesheet
   loaded fine; it was simply printing the wrong characters.
   RULE: any CSS escape added here gets TWO backslashes. Do not paste an
   example of the broken form into this comment -- it breaks the same way. */
.tier li:before{content:"\2713";position:absolute;left:0;color:#a8802a;font-weight:700}
.tier li.no{color:#a5a09a}.tier li.no:before{content:"\2014";color:#cfc9be}
/* The buy buttons.
   These were scoped as `.tier .go`, which meant they only looked like buttons
   inside the pricing cards on /advertise/. On /menu/ the same links sit in a
   different container, so they inherited nothing and rendered as 152x20px of
   plain inline text -- correct hrefs, pointing at the right Stripe pages, and
   invisible as something you could click. Found by Paul clicking them on the
   live page 2026-08-26, on the one page where a visitor decides to buy.
   Base class is standalone now; .tier keeps only its card-specific margin. */
.go{display:block;text-align:center;background:#e3a92e;color:#1d2b4f;padding:12px 18px;border-radius:5px;font-weight:700;font-size:13.5px;text-decoration:none;transition:background .15s}
.go:hover{background:#efc061;color:#1d2b4f}
.go.quiet{background:transparent;border:1.5px solid #1d2b4f;color:#1d2b4f}
.go.quiet:hover{background:#1d2b4f;color:#fff}
.go.none{background:#f4f1ea;color:#8a8474;font-weight:600;cursor:default}
.go.talk{background:#1d2b4f;color:#fff}
.go.talk:hover{background:#2b3d69;color:#fff}
.tier .go{margin:auto 18px 0;padding:12px 10px}
.mleft .go{margin-top:4px}
.ladder{max-width:820px;margin:30px auto 0;background:#fff;border:1px solid #e6e2d8;border-radius:9px;padding:22px 26px}
.ladder h4{margin:14px 0 6px;color:#1d2b4f;font-size:15px;font-weight:700}
.ladder h4:first-of-type{margin-top:0}
.ladder p{margin:0 0 10px;color:#6b6659;font-size:14px;line-height:1.7}
.ladder p:last-child{margin-bottom:0}
.svcstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:1180px;margin:0 auto}
.svcbox{background:#fff;border:1px solid #e6e2d8;border-left:4px solid #1d2b4f;border-radius:8px;padding:20px 22px}
.svcbox.star{border-left-color:#e3a92e}
.svcbox .lbl{font-size:10px;letter-spacing:.14em;color:#a8802a;font-weight:700;margin-bottom:6px}
.svcbox b{display:block;color:#1d2b4f;font-size:17px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;margin-bottom:3px}
.svcbox .pr{color:#a8802a;font-weight:700;font-size:14px;margin-bottom:7px}
.svcbox p{margin:9px 0 0;color:#6b6659;font-size:13.5px;line-height:1.6}
.svclist{list-style:none;padding:0;margin:0}
.svclist li{font-size:13px;color:#3a3730;line-height:1.45;padding:4px 0 4px 17px;position:relative}
.svclist li:before{content:"\2713";position:absolute;left:0;color:#a8802a;font-weight:700}  /* doubled on purpose -- see note above */
.paynote{text-align:center;color:#6b6659;font-size:12.5px;margin-top:22px;line-height:1.8;max-width:820px;margin-left:auto;margin-right:auto}
/* The Menu -- claim on the left, the thing itself on the right */
.mrow{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.35fr);gap:26px;align-items:start;padding:26px 0;border-top:1px solid #e6e2d8}
.mrow:first-of-type{border-top:none}
.mnum{width:26px;height:26px;border-radius:50%;background:#1d2b4f;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.mleft h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:27px;color:#1d2b4f;margin:0 0 7px}
.mleft p{margin:0 0 10px;color:#6b6659;font-size:14.5px;line-height:1.7}
.mnote{font-size:12px;color:#8a8578;margin-bottom:14px}
.mlbl{font-size:10px;letter-spacing:.13em;color:#a8802a;font-weight:700;margin-bottom:8px}
.mprice{margin:2px 0 12px;font-size:26px;font-weight:700;color:#1d2b4f;line-height:1.15}
.mprice span{font-size:13px;font-weight:400;color:#8a8578}
/* The Silver sample card.
   site.css styles .listing as a flex ROW built for exactly two children --
   name on the left, city pushed to the right. The demo card has six (name,
   city, phone, address, hours, description), so every field was being laid
   out side by side across 483px like spreadsheet columns instead of stacking
   like an actual listing. Caught by Paul on the live page 2026-08-26.
   Override to block so the sample looks like what a customer would buy. */
.demo .listing{display:block;text-align:left;padding:14px 16px}
.demo .listing .nm{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.demo .listing .ct{margin-bottom:8px}
.demo .dl{font-size:12.5px;color:#6b6659;line-height:1.55}
.demo .dd{font-size:12.5px;color:#3a3730;line-height:1.55;margin-top:6px}
.demo .dlogo{width:38px;height:38px;border-radius:6px;background:#1d2b4f;color:#e3a92e;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.belowlbl{text-align:center;font-size:11.5px;color:#a09a8c;padding:9px 0}
@media(max-width:760px){.mrow{grid-template-columns:1fr;gap:16px}}
/* browse */
.bcat{font-size:15px;color:#1d2b4f;margin:20px 0 7px;font-weight:600}
.bcat a{color:inherit}
.cc{font-size:12px;color:#8a8578;font-variant-numeric:tabular-nums;font-weight:400}
/* contact form */
.cform input,.cform select,.cform textarea{width:100%;padding:11px 13px;margin-bottom:10px;border:1px solid #e6e2d8;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;color:#3a3730}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cform .row2 input{margin-bottom:10px}
@media(max-width:600px){.cform .row2{grid-template-columns:1fr}}

.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:22px}
.catcard{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 15px;
 background:#fff;border:1px solid #e6e2d8;border-radius:8px;text-decoration:none;color:#1d2b4f}
.catcard:hover{border-color:#c9a24a}
.catcard .cn{font-size:14px}
.catcard .cc{font-size:12px;color:#8a8578;font-variant-numeric:tabular-nums}
.ctygrid{display:grid;gap:9px;margin-top:22px}
.cty{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:8px;
 border:1px solid #e6e2d8;background:#fff;text-decoration:none}
.cty.live{border-color:#ce5c17}
.cty.soon{opacity:.62;background:#faf8f3}
.cty .cn{font-size:15px;color:#1d2b4f}
.cty .cs{font-size:12.5px;color:#8a8578}
.zipnote{margin-top:9px;font-size:12.5px;letter-spacing:.04em;color:#d8cdb4}
.thin{margin-top:16px;font-size:13px;color:#8a8578}
.listing.paid{border-left:3px solid #ce5c17;padding-left:13px}
.sec.alt{background:#faf8f3}
/* The flag lives here now, not behind the hero -- this is the section that is
   actually ABOUT Arizona, and at 9% it reads as warmth rather than wallpaper. */
.flagsec{position:relative;overflow:hidden}
.flagsec .flagbg{position:absolute;inset:0;width:100%;height:100%;opacity:.09}
.flagsec .wrap{position:relative}

/* --- split hero: headline band + billboard | sponsors --- */
/* Hero: contained, light and airy -- nothing bleeds to the edge of the screen,
   and every card has room around it. This mirrors the live site, which reads
   cleaner than a full-bleed slab. */
/* ---- HERO: reuses the LIVE site's own rules, not new ones ----------------
   Background, stage height, card, controls and dots are all the existing
   .hero / .hz-* classes already in site.css. The only thing added here is the
   two-up grid, so BOTH panels are identical by construction. */
/* Both ads run out to the OUTER edges of the 1180px container -- the same
   container the nav and category bar use -- so the left card lines up flush
   under "Electricians" and the right card flush under "All categories".
   The separation now comes entirely from the centre gutter. */
.split{max-width:1180px;margin:0 auto;width:100%;
 display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:start}
.pane{position:relative;min-width:0;display:flex;flex-direction:column}
.billboard{align-items:flex-start}   /* card hugs the left edge  */
.sponsors{align-items:flex-end}      /* card hugs the right edge */
.pane>*{width:100%}

/* Taller to stay in proportion with the extra width. */
.split .hz-stage{width:100%;min-height:430px;align-items:stretch}
.split .bslide,.split .aslide{width:100%}
.split .bslide.on,.split .aslide.on{height:100%;display:flex}
.split .hz-fx{display:flex;flex-direction:column;flex:1}
/* column, not row -- a real ad stacks photo above body; row would put the
   picture beside the text and break every live ad card. */
.split .hz-ad{display:flex;flex-direction:column;flex:1}
.split .hz-body{flex:1;display:flex;flex-direction:column;justify-content:center}
/* text-only house slides get the padding; photo ads keep the live padding */
.split .hz-ad:not(:has(.hz-photo)) .hz-body{padding:26px 24px}
.plabel{font-size:10.5px;letter-spacing:.15em;color:var(--gold);margin-bottom:12px}
.hero1 h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
 font-size:30px;line-height:1.16;color:var(--gold);margin:0 0 10px}
.hero1 .hsub{font-size:14px;line-height:1.6;color:#4a4a44;margin:0 0 16px}
.bh{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;line-height:1.2;
 color:#1d2b4f;margin-bottom:9px}
.bslide p{font-size:14px;line-height:1.6;color:#4a4a44;margin:0 0 14px}
.bstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.bs{background:#f7f5ef;border-radius:6px;padding:9px 11px}
.bsv{font-size:20px;color:var(--gold-dp);font-variant-numeric:tabular-nums;line-height:1.1}
.bsl{font-size:10.5px;color:#8a8578;margin-top:2px}
.adn{font-size:23px;color:#1d2b4f;margin-bottom:5px}
.adm{font-size:12.5px;color:#8a7a5c;margin-bottom:16px}
.adsize{margin-top:12px;font-size:10.5px;letter-spacing:.06em;color:#b9ad93}
/* Pause must stop the BORDER animation too, or the button visibly lies. */
.pane.paused .fx-spk .fxs,.pane.paused .fx-sweep:before,
.pane.paused .fx-glow,.pane.paused .fx-rise{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .fx-spk .fxs{animation:none!important;opacity:1}
}
.bslide,.aslide{position:absolute;inset:0;opacity:0;visibility:hidden;
 transition:opacity .5s ease}
.bslide.on,.aslide.on{opacity:1;visibility:visible;position:relative}
.bh{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;line-height:1.2;
 color:#1d2b4f;margin-bottom:10px}
.bslide p{font-size:14.5px;line-height:1.62;color:#6b6a63;margin:0 0 16px}
.bstats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;max-width:400px}
.bs{background:#f7f5ef;border-radius:7px;padding:10px 13px}
.bsv{font-size:21px;color:#ce5c17;font-variant-numeric:tabular-nums;line-height:1.1}
.bsl{font-size:11px;color:#8a8578;margin-top:2px}
.btn.sm{font-size:12.5px;padding:8px 15px}
/* 480x200 landscape -- matches the ad you already run on the live site, and it
   is close enough to 16:9 that a business can drop in creative or a video still
   without recutting it. Bigger presence than a 300x250 square, less height. */
/* 560 x 200 -- your live ad's height, a little wider to fill the column, with
   real space around it rather than butting against a panel edge. */
.adcard{width:100%;min-height:270px;
 display:flex;flex-direction:column;justify-content:center;
 background:#fff;border-radius:9px;padding:26px 30px}
.adn{font-size:25px;color:#1d2b4f;margin-bottom:6px}
.adm{font-size:13px;color:#8a7a5c;margin-bottom:18px}
.adcard .btn.sm{align-self:flex-start}
.adsize{margin-top:12px;font-size:10.5px;letter-spacing:.06em;color:#b9ad93}
.hz-dots .dot{width:6px;height:6px;padding:0;border:0;border-radius:4px;cursor:pointer;
 background:#ddd8cb;transition:width .25s,background .25s}
.hz-dots .dot.on{width:18px;background:#ce5c17}
@media(max-width:980px){
 .split{grid-template-columns:1fr;gap:30px;max-width:560px}
 .billboard,.sponsors{align-items:stretch}
 .split .hz-stage{min-height:380px}

 /* `.sponsors{order:-1}` REMOVED 2026-08-31. It lifted the ads above the
    billboard when the two panes stacked, so on a phone the paid slots took the
    top of the screen. That was right when the billboard was the first thing on
    the page. It is not now -- Sage's band sits above both, so all this line did
    was reorder the two panes underneath her and push the site's own carousel to
    third. Phone reading order now matches desktop: Sage, house carousel, ads.
    ⚖️ LEVER: if GA4 says mobile is most of the traffic and advertisers want to
    sit higher, putting this one line back raises them without touching anything
    else on the page. */
 .hero1 h1{font-size:26px}
 .bh{font-size:23px}
}
.tierbadge{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.08em;
 text-transform:uppercase;color:#993c1d;background:#f7e6dc;padding:2px 7px;border-radius:4px;vertical-align:2px}
@media(max-width:640px){.catgrid{grid-template-columns:1fr}}

/* --- SITE SEARCH (2026-09-01) -------------------------------------------
   Sits inside .nav on every page. Deliberately not a small icon in a corner:
   the failure it fixes was a person who could not find a business that was
   already listed, so the box has to be the obvious thing to do on arrival. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}
.srch{background:#12233f;border-top:1px solid rgba(255,255,255,.10);padding:14px 0 16px}
.srchin{max-width:1000px;margin:0 auto;padding:0 18px;position:relative}
.srchrow{display:flex;align-items:center;gap:16px}
.srchcol{position:relative;flex:1 1 auto;min-width:0}
.srchform{position:relative;display:block}

/* The phone number, beside the box. Gold on navy -- deliberately the second
   loudest thing in the header after the search field itself.
   Grid, not flex: the icon occupies column 1 across both rows, and the label
   sits directly above the number in column 2. One rule set, no overrides. */
.hphone{flex:0 0 auto;display:grid;grid-template-columns:auto auto;
 grid-template-rows:auto auto;column-gap:11px;align-items:center;
 text-decoration:none;background:#d8a03d;color:#12233f;border-radius:8px;
 padding:8px 17px 9px 14px;box-shadow:0 2px 10px rgba(0,0,0,.20);white-space:nowrap}
.hphone:hover{background:#e6b155}
.hphone:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hphone>svg{grid-column:1;grid-row:1/3;width:24px;height:24px;fill:#12233f}
.hphone .hpl{grid-column:2;grid-row:1;font:600 10.5px/1.35 Inter,sans-serif;
 letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.hphone .hpn{grid-column:2;grid-row:2;font:700 21px/1.1 Inter,sans-serif;
 letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.srchico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;
 fill:none;stroke:#8fa4c4;stroke-width:2;stroke-linecap:round;pointer-events:none}
#az-q{width:100%;box-sizing:border-box;font:400 17px/1.4 Inter,system-ui,sans-serif;
 color:#12233f;background:#fff;border:2px solid transparent;border-radius:8px;
 padding:14px 44px 14px 44px;-webkit-appearance:none;appearance:none;
 box-shadow:0 2px 10px rgba(0,0,0,.18)}
#az-q::placeholder{color:#7d8ba3}
#az-q:focus{outline:none;border-color:#d8a03d;box-shadow:0 0 0 4px rgba(216,160,61,.30)}
#az-q::-webkit-search-cancel-button{display:none}
.srchclear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;
 border:0;border-radius:50%;background:#eef1f6;color:#4a5a72;font-size:19px;line-height:1;
 cursor:pointer}
.srchclear:hover{background:#dfe4ec}
.srchhint{margin:9px 0 0;text-align:center;font-size:12.5px;color:#93a6c2;letter-spacing:.01em}
.srchres{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:60;
 background:#fff;border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.30);
 max-height:min(66vh,520px);overflow-y:auto;padding:6px 0;text-align:left}
.srchres[hidden]{display:none}
.srgrp{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;
 color:#8494ab;padding:12px 18px 7px}
.srow{display:block;padding:9px 18px;text-decoration:none;color:#12233f;border:0}
.srow:hover,.srow:focus,.srow[aria-selected="true"]{background:#f3f6fb;outline:none}
.srow b{display:block;font:600 15.5px/1.35 Inter,sans-serif}
.srow em{display:block;font-style:normal;font-size:12.5px;color:#6b7a91;margin-top:1px}
.srow .mk{background:#fdf0d4;border-radius:2px;padding:0 1px}
.stowns{padding:2px 18px 12px;display:flex;flex-wrap:wrap;gap:6px}
.stowns a{font:600 12px/1 Inter,sans-serif;color:#12233f;background:#eef1f6;
 border-radius:20px;padding:7px 11px;text-decoration:none}
.stowns a:hover{background:#d8a03d;color:#fff}
/* Contact page: the number, above the form, not buried under it. */
.callcard{display:block;text-align:center;text-decoration:none;background:#12233f;
 border:2px solid #d8a03d;border-radius:10px;padding:20px 18px;margin:0 0 4px}
.callcard:hover{background:#172c50}
.callcard .cclab{display:block;font:600 10.5px/1 Inter,sans-serif;letter-spacing:.12em;
 text-transform:uppercase;color:#d8a03d;margin-bottom:9px}
.callcard .ccnum{display:block;font:700 clamp(28px,6vw,38px)/1.05 Inter,sans-serif;
 color:#fff;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.callcard .ccsub{display:block;margin-top:8px;font-size:13.5px;color:#a9bcd8}
.orline{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:#8a8578;
 font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.orline:before,.orline:after{content:"";flex:1;height:1px;background:#ddd8cc}
/* Strip on every category page -- placed where the hiring decision is made. */
.lcstrip{background:#f4ecdb;border-top:1px solid #e6d9bd;border-bottom:1px solid #e6d9bd}
.lcstrip .in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;
 align-items:center;justify-content:space-between;gap:10px}
.lcstrip span{font-size:14.5px;color:#4a4030}
.lcstrip a{font:600 13.5px/1 Inter,sans-serif;color:#12233f;background:#d8a03d;
 border-radius:6px;padding:9px 14px;text-decoration:none;white-space:nowrap}
.lcstrip a:hover{background:#e6b155}
/* Missing-business prompt, below the listings on every category page and on
   every town hub (2026-09-02). Same shape as .lcstrip but cooler, so it reads
   as a quiet offer rather than a second warning. NO BACKSLASH ESCAPES IN HERE:
   EXTRA_CSS is an ordinary Python string, so a single-backslash CSS escape is
   eaten as an OCTAL escape before CSS ever sees it -- that is what turned every
   tick mark on the site into "13" on 2026-09-01. */
.addstrip{background:#eef2f8;border-top:1px solid #d9e2ef;border-bottom:1px solid #d9e2ef;
 margin-top:26px;border-radius:8px}
.addstrip .in{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;flex-wrap:wrap;
 align-items:center;justify-content:space-between;gap:10px}
.addstrip span{font-size:14.5px;color:#33415c}
.addstrip a{font:600 13.5px/1 Inter,sans-serif;color:#fff;background:#12233f;
 border-radius:6px;padding:9px 14px;text-decoration:none;white-space:nowrap}
.addstrip a:hover{background:#1d3560}

/* --- Check a contractor's licence (2026-09-01) --- */
.lcform{position:relative;margin:0 0 14px}
#lc-q{width:100%;box-sizing:border-box;font:400 17px/1.4 Inter,system-ui,sans-serif;
 color:#12233f;background:#fff;border:2px solid #d8a03d;border-radius:8px;padding:14px 16px;
 -webkit-appearance:none;appearance:none;box-shadow:0 2px 10px rgba(0,0,0,.08)}
#lc-q:focus{outline:none;box-shadow:0 0 0 4px rgba(216,160,61,.28)}
#lc-q::-webkit-search-cancel-button{display:none}
.lcout{margin:0 0 20px;border:1px solid #e2ddd2;border-radius:8px;overflow:hidden;background:#fff}
.lcout[hidden]{display:none}
.lcrow{display:block;padding:14px 17px;border-top:1px solid #eee8dc;text-decoration:none;color:#12233f}
.lcrow:first-child{border-top:none}
.lcrow:hover{background:#fbf7ef}
.lcrow b{display:block;font:600 16px/1.35 Inter,sans-serif}
.lcrow em{display:block;font-style:normal;font-size:13px;color:#6b7a91;margin-top:1px}
.lcsrc{display:block;margin-top:7px;font-size:13.5px;line-height:1.45}
.lcsrc.ok{color:#2a6236}
.lcsrc.none{color:#8a5f14}
.lccta{display:block;margin-top:6px;font:600 12.5px/1 Inter,sans-serif;color:#9c7016}
.rocbtn{display:block;text-align:center;text-decoration:none;background:#12233f;
 border:2px solid #d8a03d;border-radius:10px;padding:18px 16px;margin:0 0 26px}
.rocbtn:hover{background:#172c50}
.rocbtn .rl{display:block;font:700 20px/1.2 Inter,sans-serif;color:#fff}
.rocbtn .rs{display:block;margin-top:5px;font-size:13px;color:#d8a03d;letter-spacing:.02em}
.lcnote{border-top:1px solid #ddd8cc;padding-top:20px}
.lcnote h3{font:600 17px/1.3 Inter,sans-serif;margin:0 0 10px}
.lcnote p{font-size:15px;line-height:1.6;color:#3a3730;margin:0 0 11px}
.snone{padding:16px 18px;color:#6b7a91;font-size:14px}
.snone b{color:#12233f}
.smore{display:block;padding:11px 18px;font:600 12.5px/1 Inter,sans-serif;color:#8a5f14;
 text-decoration:none;border-top:1px solid #edf0f5}
.smore:hover{background:#fdf7ec}
@media(max-width:860px){
 /* Phone first, search under it. On a phone the number IS the call to action,
    and it is one tap. */
 .srchrow{flex-direction:column-reverse;align-items:stretch;gap:11px}
 .hphone{justify-content:center;grid-template-columns:auto auto;justify-items:start;
  padding:9px 14px}
 .hphone .hpn{font-size:23px}
}
@media(max-width:640px){
 .srch{padding:11px 0 13px}
 #az-q{font-size:16px;padding:12px 40px 12px 40px}  /* 16px stops iOS zooming on focus */
 .srchhint{display:none}
 .srchres{max-height:60vh}
}