/* Layout: the name is the lintel. LINTEL runs across the full width like the beam over a shop door, then
   Main Street lights up beneath it. The doorway section is a bright room where you pick your business and see
   your price beside a real-looking sample website.

   THEME: the whole site is drawn from the three colors below. Change them and every section, button,
   the Main Street illustration and the logo follow. Keep --dark dark and --light light so text stays readable. */
:root{
  --dark:#0c1724;     /* night navy: page background and text on light sections */
  --light:#f4f6f8;    /* cool white: text on dark sections and light section backgrounds */
  --accent:#ff6b1a;   /* signal orange: the one bright color, used sparingly */

  /* everything below is worked out from the three colors above */
  --bg:var(--dark);
  --ink:var(--light);
  --surface:#13233a;
  --surface-2:#1a2e4a;
  --surface-3:#24395a;
  --muted:#a9b6c6;
  --paper:var(--light);
  --paper-ink:var(--dark);
  --paper-muted:#4a5868;
  --paper-2:#e4e9ef;
  --accent-ink:var(--dark);
  --accent-soft:#ffd9bf;
  --accent-text:#b2410a;
  --accent-hover:#ff8240;

  --f:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --step-small:clamp(0.875rem,0.85rem + 0.1vw,0.9375rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 2.6vw,3.5rem);
  --gutter:clamp(16px,2.4vw,32px);
  --gap:clamp(88px,11vw,180px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --muted:color-mix(in srgb,var(--light) 68%,var(--dark));
    --paper-muted:color-mix(in srgb,var(--dark) 72%,var(--light));
    --paper-2:color-mix(in srgb,var(--light) 92%,var(--dark));
    --accent-soft:color-mix(in srgb,var(--accent) 30%,var(--light));
    --accent-text:color-mix(in srgb,var(--accent) 70%,#000);
  }
}
/* lighter steps of the dark color that keep its hue, so a navy theme stays navy and a green one stays green */
@supports (color:oklch(from red l c h)){
  :root{
    --surface:oklch(from var(--dark) calc(l + .05) c h);
    --surface-2:oklch(from var(--dark) calc(l + .1) c h);
    --surface-3:oklch(from var(--dark) calc(l + .17) c h);
  }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--surface-3) var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--f);font-stretch:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
input,textarea,select{caret-color:var(--accent)}
h1,h2,h3{margin:0;font-family:var(--f);font-weight:800;font-stretch:115%;letter-spacing:-.02em;line-height:1;text-wrap:balance}
h2{font-size:var(--step-head);text-transform:uppercase}
p{margin:0}
em{font-style:normal;color:var(--accent)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}


/* one button shape: flat rectangle that lifts on hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:.7em 1.3em;border:0;border-radius:0;background:var(--paper);color:var(--paper-ink);font:700 var(--step-small)/1.1 var(--f);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{transform:translateY(-2px);background:#ffffff}
.btn:active{transform:translateY(1px)}
.btn.hot{background:var(--accent);color:var(--accent-ink)}
.btn.hot:hover{background:var(--accent-hover)}
.btn.dark{background:var(--bg);color:var(--ink)}
.btn.dark:hover{background:var(--surface-2)}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:800 var(--step-small)/1 var(--f);font-stretch:115%;letter-spacing:.01em}
.brand svg{width:36px;height:36px}
.mark-door{fill:var(--accent)}
.mark-beam{fill:var(--ink)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:var(--step-small)}
.nav a:not(.btn){text-decoration:none;position:relative;padding:8px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}

/* ---------- hero: the name as the lintel ---------- */
.hero{min-height:min(100svh,980px);display:grid;grid-template-rows:auto 1fr auto auto;background:var(--bg)}
.hero>.wrap,.foot>.wrap{width:100%}
.hero-mid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start;padding-top:clamp(40px,8vh,110px)}
.hero-mid .lede{font-size:clamp(1.5rem,1rem + 1.7vw,2.375rem);line-height:1.18;font-weight:600;font-stretch:105%;letter-spacing:-.01em;max-width:26ch}
.hero-mid .side{justify-self:end;display:grid;gap:20px;max-width:36ch;font-size:var(--step-body);color:var(--muted)}
.hero-mid .side b{color:var(--ink);font-weight:700;display:block;margin-bottom:4px}
.hero-mid .side .btn{justify-self:start}
@media (max-width:820px){.hero-mid{grid-template-columns:1fr}.hero-mid .side{justify-self:start}}
.mono{margin:0;padding-top:clamp(28px,5vh,64px)}
.mono .title{display:block;width:100%}
.fit{display:inline-block;font-weight:900;font-stretch:125%;font-size:19vw;line-height:.8;letter-spacing:-.03em;white-space:nowrap;text-transform:uppercase;padding-top:.04em}
.mono-sub{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 var(--step-small)/1.3 var(--f);padding:14px 0 18px;border-top:6px solid var(--accent);margin-top:10px}
.mono-sub span:first-child{color:var(--accent);font-weight:800;font-size:var(--step-body)}
.mono-sub span:last-child{color:var(--muted);font-weight:400}
.mask{overflow:hidden}
.js .mask .lift{transform:translateY(105%);animation:lift 1s var(--ease) .15s forwards}
@keyframes lift{to{transform:none}}

/* business ticker under the name */
.ticker{overflow:hidden;background:var(--surface);color:var(--ink)}
.ticker .track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker .run{display:flex;align-items:center;flex:none}
.ticker span{font:800 clamp(1rem,.9rem + .4vw,1.25rem)/1 var(--f);font-stretch:115%;text-transform:uppercase;letter-spacing:.02em;padding:14px 22px;white-space:nowrap}
.ticker i{width:8px;height:8px;background:var(--accent);flex:none}
.ticker:hover .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Main Street, colored from the theme ---------- */
.street-band{background:var(--bg)}
.street-wrap{margin:0}
.street{width:100%;height:auto}
.street .sky{fill:var(--bg)}
.street .far{fill:var(--surface)}
.street .wall{fill:var(--surface-2)}
.street .shop:nth-of-type(odd) .wall{fill:var(--surface-3)}
.street .roof{fill:var(--surface)}
.street .trim,.street .sign,.street .pane{fill:var(--bg)}
.street .sign-t{fill:var(--ink)}
.street .lit{fill:var(--accent-soft)}
.street .door,.street .open-sign{fill:var(--accent)}
.street .open-t{fill:var(--accent-ink)}
.street .lintel{fill:var(--ink)}
.street .walk{fill:var(--surface-3)}
.street .road{fill:var(--surface)}
.street .dash{fill:var(--ink);opacity:.35}
.street .star{fill:var(--ink)}
.street .lit,.street .door{transition:opacity .6s var(--ease)}
.js .street-wrap:not(.on) .lit{opacity:0}
.js .street-wrap:not(.on) .door{opacity:.25}
.street-wrap.on .shop .lit{transition-delay:calc(var(--i,0) * 180ms)}
.street .shop[data-i="1"]{--i:1}.street .shop[data-i="2"]{--i:2}.street .shop[data-i="3"]{--i:3}.street .shop[data-i="4"]{--i:4}.street .shop[data-i="5"]{--i:5}
.street .open-sign{animation:buzz 4s steps(1) infinite}
.street .star{animation:twinkle 3.4s ease-in-out infinite}
.street .s1{animation-delay:1.1s}.street .s2{animation-delay:2.2s}
@keyframes twinkle{50%{opacity:.25}}
@keyframes buzz{0%,100%{opacity:1}47%{opacity:.35}49%{opacity:1}51%{opacity:.5}53%{opacity:1}}
.street-note{padding-block:clamp(28px,4vw,48px) clamp(48px,6vw,80px)}
.street-note p{font-size:var(--step-lead);line-height:1.38;max-width:52ch;color:var(--muted)}
.street-note a{color:var(--ink);font-weight:700;text-decoration-color:var(--accent)}
@media (max-width:700px){
  .street-wrap{overflow:hidden}
  .street{width:230%;max-width:none;animation:pan 36s ease-in-out infinite alternate}
  @keyframes pan{to{transform:translateX(-56.5%)}}
}

/* ---------- the doorway: pick your business ---------- */
.door{background:var(--paper);color:var(--paper-ink);padding-block:clamp(56px,7vw,110px);border-top:8px solid var(--accent)}
.door .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.door h2{margin-bottom:24px}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0 0 28px;min-width:0}
.pick legend{font-size:var(--step-body);margin-bottom:14px;padding:0;max-width:44ch;color:var(--paper-muted)}
.pick label{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;background:var(--paper-2);color:var(--paper-ink);cursor:pointer;font-weight:600;font-size:var(--step-small);line-height:1.25;border:2px solid transparent;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pick label::before{content:"";width:12px;height:12px;flex:none;border:2px solid currentColor;transition:background-color .2s var(--ease)}
.pick label:hover{border-color:var(--paper-ink)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label:has(input:checked){background:var(--paper-ink);color:var(--paper)}
.pick label:has(input:checked)::before{background:var(--accent);border-color:var(--accent)}
.pick label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.pick{grid-template-columns:1fr}}
.quote{display:grid;gap:18px;border-top:2px solid var(--paper-ink);padding-top:24px}
.quote .price{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);font-weight:500;line-height:1.2;letter-spacing:-.01em}
.quote .price .fig{font-weight:900;font-stretch:115%}
.quote .for{font-size:var(--step-lead);line-height:1.35;max-width:36ch;font-weight:600}
.quote ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.quote li{display:flex;gap:12px;align-items:baseline}
.quote li::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;transform:translateY(-2px)}
.quote .actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:6px}
.quote .actions a:not(.btn){font-size:var(--step-small);font-weight:700}
.shot{display:grid;gap:14px;position:sticky;top:24px;min-width:0}
.shot figure{margin:0}
.shot .caption{font-size:var(--step-small);color:var(--paper-muted);max-width:56ch}
.shot .swap{transition:opacity .3s var(--ease),transform .4s var(--ease)}
.shot .swap.fade{opacity:0;transform:translateY(10px)}
@media (max-width:900px){.door .wrap{grid-template-columns:1fr}.shot{position:static}}

/* ---------- sample websites: a real browser window with a real page inside ---------- */
.browser{background:#fff;border-radius:10px;overflow:hidden}
.browser .bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;background:#e9edf1;border-bottom:1px solid #d3d9e0} /* taste-skill-ignore: inside a sample site (data-ui) */
.browser .dots{display:flex;gap:7px;flex:none}
.browser .dots i{width:11px;height:11px;border-radius:50%;background:#c4ccd5}
.browser .url{flex:1;max-width:380px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:24px;border-radius:6px;background:#fff;color:#4a5868;font:500 12px/1 var(--f)}
.browser .lock{width:10px;height:12px;fill:#4a5868;stroke:#4a5868}
.browser .bar-end{width:47px;flex:none}
.browser .view{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;overscroll-behavior:contain;scrollbar-width:none}
.browser .view::-webkit-scrollbar{display:none}
.site{font-size:12px;font-size:2cqw;width:50em;min-height:31.25em;display:flex;flex-direction:column;background:var(--mb);color:var(--mi);font-family:var(--mfb,Archivo,Arial,sans-serif);line-height:1.35;
  --mb:#fff;--mi:#111;--ma:#111;--mai:#fff;--mt:var(--ma);--ms:#f2f2f2;--mf:Archivo,Arial,sans-serif;--mw:800;--mr:0;--mfoot:#111;--mfi:#fff}
.site h4,.site h5{margin:0;font-family:var(--mf);font-weight:var(--mw);letter-spacing:-.02em;text-wrap:balance}
.site h4{font-size:2.5em;line-height:1.02;margin:.28em 0 .32em}
.site h4 em{color:var(--mt);display:block}
.site h5{font-size:1.35em;margin-bottom:.8em}
.m-strip{background:var(--ma);color:var(--mai);text-align:center;font-size:.68em;padding:.55em;font-weight:600;letter-spacing:.02em}
.m-strip b{margin-left:.5em}
.m-nav{display:flex;align-items:center;gap:1.4em;padding:1em 2.4em;border-bottom:1px solid rgba(127,127,127,.22)} /* taste-skill-ignore: inside a sample site (data-ui) */
.m-logo{display:flex;align-items:center;gap:.5em;font-weight:800;font-size:.95em;font-family:var(--mf)}
.m-logo .mk{width:1.1em;height:1.1em}
.m-links{margin-left:auto;display:flex;gap:1.7em;font-size:.74em;opacity:.78}
.m-btn{display:inline-block;background:var(--ma);color:var(--mai);font-weight:700;font-size:.78em;padding:.85em 1.3em;border-radius:var(--mr);white-space:nowrap}
.m-btn.sm{font-size:.68em;padding:.65em 1em}
.m-btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 .14em currentColor} /* taste-skill-ignore: inside a sample site (data-ui) */
.m-eyebrow{display:block;font-size:.64em;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--mt)}
.m-copy p{font-size:.86em;opacity:.82;max-width:30em}
.m-btns{display:flex;gap:.7em;margin-top:1.3em;flex-wrap:wrap}
.m-pic{overflow:hidden;border-radius:var(--mr);aspect-ratio:4/3}
.m-pic .art{width:100%;height:100%}
.m-hero.split{display:grid;grid-template-columns:1.05fr 1fr;gap:2.2em;padding:2.4em 2.4em 2.6em;align-items:center}
.m-hero.over{position:relative;height:23em}
.m-hero.over .m-pic{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.m-hero.over .m-copy{position:absolute;left:2.4em;bottom:2.2em;max-width:23em;background:var(--mb);padding:1.5em 1.7em}
.m-hero.center{text-align:center;padding:2.4em 2.4em 0}
.m-hero.center .m-btns{justify-content:center}
.m-pic.wide{aspect-ratio:3.2/1;margin-top:1.8em}
.m-sec{padding:2.2em 2.4em}
.m-sec.two{display:grid;grid-template-columns:1.25fr 1fr;gap:2.4em}
.m-menu{display:grid;grid-template-columns:1fr 1fr;gap:.6em 2.4em;font-size:.84em}
.m-sec.two .m-menu{grid-template-columns:1fr}
.m-row{display:flex;align-items:baseline;gap:.5em}
.m-row i{flex:1;border-bottom:.1em dotted currentColor;opacity:.35}
.m-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9em}
.m-card{background:var(--ms);padding:1.1em;border-radius:var(--mr);display:grid;gap:.35em;align-content:start;font-size:.8em}
.m-card span{opacity:.72;font-size:.92em}
.m-card .ic{width:1.9em;height:1.9em;fill:var(--mt);color:var(--mt);margin-bottom:.3em}
.m-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9em}
.m-tile{display:grid;gap:.5em;font-size:.78em}
.m-tile .art{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--mr)}
.m-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em;font-size:.78em;text-align:center}
.m-person svg{width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:.4em}
.m-person b,.m-person span{display:block}
.m-person span{opacity:.7}
.m-band{display:flex;flex-wrap:wrap;gap:.6em 2.4em;padding:1.2em 2.4em;background:var(--ms);font-size:.8em}
.m-band b{margin-right:.4em}
.m-foot{margin-top:auto;display:flex;justify-content:space-between;padding:1.2em 2.4em;font-size:.7em;background:var(--mfoot);color:var(--mfi)}
.m-foot span{opacity:.7}

.m-restaurant{--mb:#fff8ec;--mi:#2b1d14;--ma:#b8321f;--mt:#b8321f;--ms:#f6e7cf;--mf:Georgia,"Times New Roman",serif;--mfoot:#2b1d14}
.m-plumbing{--mb:#fff;--mi:#0f2a44;--ma:#ffd23f;--mai:#0f2a44;--mt:#1f5f99;--ms:#eef3f8;--mr:.3em;--mfoot:#0f2a44}
.m-plumbing .m-hero{background:#0f2a44;color:#fff}
.m-plumbing .m-hero .m-eyebrow,.m-plumbing .m-hero h4 em{color:#ffd23f}
.m-roofing{--mb:#f4f6f8;--mi:#1d1d1d;--ma:#e8590c;--mt:#c74a08;--ms:#e4e9ef;--mfoot:#1d1d1d}
.m-roofing h4,.m-roofing h5,.m-roofing .m-logo{font-stretch:125%;text-transform:uppercase}
.m-roofing h4{font-size:2.1em}
.m-landscaping{--mb:#f5f8f1;--mi:#1f3d2b;--ma:#1f3d2b;--mt:#3a7d44;--ms:#e4eedc;--mr:.5em;--mfoot:#1f3d2b}
.m-salon{--mb:#fbf3f4;--mi:#2a1f24;--ma:#2a1f24;--mt:#b0204f;--ms:#f3e4e7;--mf:Georgia,"Times New Roman",serif;--mw:400;--mr:.2em;--mfoot:#2a1f24}
.m-salon .m-logo{letter-spacing:.12em;text-transform:uppercase;font-family:var(--mfb,Archivo,Arial,sans-serif)}
.m-auto{--mb:#151a21;--mi:#f2f2f2;--ma:#ff6b1a;--mai:#151a21;--mt:#ff8a45;--ms:#212833;--mfoot:#0b0e12}
.m-auto h4{font-stretch:115%}

/* ---------- how it works: accordion ---------- */
.how{padding-block:var(--gap)}
.how-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:end;margin-bottom:64px}
.how-intro p{font-size:var(--step-lead);line-height:1.4;max-width:40ch}
.acc{display:flex;height:500px;list-style:none;margin:0;padding:0;counter-reset:st;gap:4px}
.acc li{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--c);color:var(--t);transition:flex-grow .5s var(--ease),background-color .3s var(--ease);counter-increment:st}

.acc li[data-open]{flex-grow:6;--c:var(--surface-2)}
.acc li[data-open]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--accent)}
.acc button{all:unset;cursor:pointer;position:absolute;inset:0;z-index:1}
.acc li:not([data-open]):hover{--c:var(--surface-2)}
.acc button:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}
.acc .name{position:absolute;left:22px;bottom:24px;transform-origin:left bottom;transform:rotate(-90deg) translateY(100%);white-space:nowrap;font-weight:700;font-size:var(--step-body);transition:opacity .25s}
.acc .open{position:absolute;inset:0;padding:64px 32px 32px;display:grid;grid-template-rows:auto 1fr auto;gap:16px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease) .1s}
.acc li[data-open] .open{opacity:1;visibility:visible}
.acc li[data-open] .name{opacity:0}
.acc .open h3{font-size:var(--step-head);text-transform:uppercase;max-width:14ch}
.acc .open p{align-self:end;max-width:30ch;font-size:var(--step-lead);line-height:1.35}
.acc li{--c:var(--surface);--t:var(--ink)}
@media (max-width:820px){
  .acc .open p{font-size:var(--step-body)}
  .how-intro{grid-template-columns:1fr}
  .acc{flex-direction:column;height:auto}
  .acc li{flex:none;min-height:64px}
  .acc button{position:static;display:flex;align-items:center;min-height:64px;padding:0 20px 0 64px;width:100%;box-sizing:border-box}
  .acc .name{position:static;transform:none}
  .acc .open{position:static;display:none;padding:0 20px 28px 64px;opacity:1;visibility:visible}
  .acc li[data-open] .open{display:grid}
  .acc li[data-open] .name{opacity:1}
  .acc .open h3{display:none}
}

/* ---------- prices ---------- */
.prices{background:var(--paper);color:var(--paper-ink);padding-block:var(--gap)}
.prices .head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:end;margin-bottom:56px}
.prices .head p{font-size:var(--step-lead);line-height:1.4;max-width:40ch}
.table-wrap{overflow-x:auto}
table.rates{width:100%;border-collapse:collapse;font-size:var(--step-body);min-width:640px}
.rates th,.rates td{text-align:left;padding:20px 16px 20px 0;vertical-align:top;border-bottom:2px solid var(--paper-ink)}
.rates thead th{font-size:var(--step-small);font-weight:700;padding-bottom:12px}
.rates td.n{font-size:var(--step-lead);font-weight:800;font-stretch:115%;white-space:nowrap}
.rates td.k{font-weight:700;width:28%;transition:padding .2s var(--ease)}
.rates td.what{color:var(--paper-muted);max-width:44ch}
.rates tr{transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.rates tbody tr:hover{background:var(--paper-2)}
.rates tbody tr:hover td.k{padding-left:16px}
.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:72px}
.incl>div{background:var(--paper-2);padding:clamp(22px,2.6vw,36px);border-top:6px solid var(--paper-ink)}
.incl>div:first-child{border-top-color:var(--accent)}
.incl h3{font-size:var(--step-lead);text-transform:uppercase;margin-bottom:18px}
.incl ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.incl li{display:flex;gap:12px;align-items:baseline}
.incl li::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;transform:translateY(-2px)}
.incl .fine{margin-top:18px;color:var(--paper-muted);font-size:var(--step-small);max-width:52ch}
@media (max-width:820px){.prices .head,.incl{grid-template-columns:1fr}.incl{gap:24px}}

/* ---------- about ---------- */
.about{background:var(--surface);padding-block:var(--gap)}
.about .wrap{display:grid;grid-template-columns:minmax(160px,3fr) minmax(0,9fr);gap:clamp(32px,6vw,96px)}
.facts{margin:0;display:grid;gap:22px;align-content:start;font-size:var(--step-small)}
.facts>div{border-left:4px solid var(--accent);padding-left:14px}
.facts dt{color:var(--muted)}
.facts dd{margin:4px 0 0;font-weight:800;font-size:var(--step-body)}
.about .text{display:grid;gap:24px;max-width:62ch}
.about h2{margin-bottom:6px}
.about .text p{font-size:clamp(1.25rem,1rem + .9vw,1.625rem);line-height:1.38}
@media (max-width:820px){.about .wrap{grid-template-columns:1fr}.about .text{order:-1}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--gap)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:32px;display:grid;gap:20px}
.faq h2{max-width:12ch}
.faq-sub{color:var(--muted);font-size:var(--step-lead);line-height:1.38;max-width:28ch}
.qs{display:grid;gap:8px}
.qs details{background:var(--surface);border-left:4px solid transparent;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.qs details:hover{border-left-color:var(--surface-3)}
.qs details[open]{background:var(--surface-2);border-left-color:var(--accent)}
.qs summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:20px 24px;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:600}
.qs summary::-webkit-details-marker{display:none}
.qs .qn{font:900 var(--step-small)/1 var(--f);font-stretch:125%;color:var(--accent);flex:none;width:2.2em}
.qs .qt{flex:1}
.qs summary::after{content:"";width:22px;height:22px;flex:none;background:var(--ink);clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%);transition:transform .3s var(--ease),background-color .3s var(--ease)}
.qs details[open] summary::after{transform:rotate(45deg);background:var(--accent)}
.qs details p{padding:0 24px 24px calc(24px + 2.2em + 20px);max-width:66ch;font-size:var(--step-body)}
@media (max-width:820px){.faq .wrap{grid-template-columns:1fr}.faq-head{position:static}.qs details p{padding-left:24px}}

/* ---------- contact ---------- */
.contact{background:var(--surface);padding-block:var(--gap) clamp(48px,6vw,80px)}
.contact .ask{font-size:var(--step-lead);max-width:38ch;margin-bottom:24px}
.contact h2{margin-bottom:16px}
.mail{display:inline-block;font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:1;text-decoration:none;overflow-wrap:anywhere;font-size:clamp(2rem,6.4vw,6.5rem);transition:color .25s var(--ease)}
.mail:hover{color:var(--accent)}
.contact .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);margin-top:clamp(56px,8vw,110px);align-items:start}
.contact .direct{display:grid;gap:14px;font-size:var(--step-body)}
.contact .direct p{color:var(--muted)}
.contact .direct a{color:var(--ink);font-weight:700}
form.req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:var(--bg);padding:clamp(20px,2.6vw,36px);border-top:6px solid var(--accent)}
form.req .full{grid-column:1/-1}
form.req label{display:grid;gap:6px;font-size:var(--step-small);font-weight:600}
form.req .opt{font-weight:400;color:var(--muted)}
form.req .hint{font-size:var(--step-small);color:var(--muted);margin-top:4px}
form.req input,form.req select,form.req textarea{width:100%;min-height:52px;border:2px solid var(--surface-2);border-radius:0;background:var(--surface);color:var(--ink);padding:12px 14px;font-size:var(--step-body);transition:border-color .2s var(--ease)}
form.req input:hover,form.req select:hover,form.req textarea:hover{border-color:var(--surface-3)}
form.req input:focus,form.req select:focus,form.req textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
form.req textarea{min-height:120px;resize:vertical;line-height:1.45}
form.req select{appearance:none;background-image:none;padding-right:44px}
form.req .sel{position:relative}
form.req .sel::after{content:"";position:absolute;right:18px;bottom:22px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
form.req label.check{display:flex;align-items:flex-start;gap:12px;font-weight:400;font-size:var(--step-small);line-height:1.45;cursor:pointer;margin-top:4px}
form.req label.check input{appearance:none;width:22px;height:22px;min-height:0;flex:none;padding:0;margin:0;border:2px solid var(--muted);background:var(--surface);cursor:pointer;display:grid;place-content:center}
form.req label.check input::before{content:"";width:12px;height:7px;border-left:3px solid var(--accent-ink);border-bottom:3px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
form.req label.check input:checked{background:var(--accent);border-color:var(--accent)}
form.req label.check input:checked::before{opacity:1}
form.req label.check input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
form.req label.check a{color:var(--ink);font-weight:700}
form.req .btn{min-height:56px;width:100%}
form.req .note{font-size:var(--step-small);color:var(--muted)}
form.req .note a{color:var(--ink)}
form.req .done{background:var(--paper);color:var(--paper-ink);padding:18px 20px;font-weight:600;border-left:6px solid var(--accent)}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}
@media (max-width:820px){.contact .grid,form.req{grid-template-columns:1fr}}

/* ---------- footer: the name returns ---------- */
.foot{background:var(--paper);color:var(--paper-ink);display:grid;gap:clamp(64px,10vw,160px);padding-block:56px 20px;border-top:8px solid var(--accent)}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;font-size:var(--step-small)}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.cols li:first-child{font-weight:800;font-size:var(--step-body)}
.cols li{color:var(--paper-muted)}
.cols li:first-child,.cols a{color:var(--paper-ink)}
.cols a{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .2s}
.cols a:hover{text-decoration-color:var(--accent)}
.big{padding-top:40px}
.big .fit{color:var(--paper-ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:var(--step-small);color:var(--paper-muted);padding-top:16px}
@media (max-width:820px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- privacy notice ---------- */
.notice{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:20;margin:0 auto;max-width:720px;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;background:var(--paper);color:var(--paper-ink);padding:16px 20px;border-left:6px solid var(--accent);font-size:var(--step-small);animation:up .5s var(--ease) both}
.notice p{flex:1 1 320px}
.notice a{font-weight:700}
.notice .btn{min-height:44px;background:var(--paper-ink);color:var(--paper)}
@keyframes up{from{transform:translateY(24px);opacity:0}}

/* ---------- entrances ---------- */
.rise{animation:rise .8s var(--ease) both;animation-delay:calc(var(--d,0) * 80ms)}
[data-d="1"]{--d:1}[data-d="2"]{--d:2}[data-d="3"]{--d:3}[data-d="4"]{--d:4}[data-d="5"]{--d:5}
.rise.wait{animation-play-state:paused}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise,.js .mask .lift,.js .site,.notice{animation:none;transform:none}
  .ticker .track,.street .star,.street .open-sign,.street{animation:none}
  .street{width:100%}
  .js .street-wrap:not(.on) .lit,.js .street-wrap:not(.on) .door{opacity:1}
  .btn,.acc li,.pick label,.shot .swap,.street .lit,.street .door{transition:none}
  .btn:hover{transform:none}
}

/* ---------- plain pages ---------- */
.doc{background:var(--paper);color:var(--paper-ink);padding-block:clamp(56px,8vw,110px);border-top:8px solid var(--accent)}
.doc .wrap{max-width:860px}
.doc h1{font-size:var(--step-head);text-transform:uppercase;margin-bottom:12px}
.doc .updated{color:var(--paper-muted);font-size:var(--step-small);margin-bottom:40px}
.doc h2{font-size:var(--step-lead);margin:44px 0 12px}
.doc p,.doc li{max-width:68ch}
.doc p+p{margin-top:14px}
.doc ul{padding-left:1.2em;display:grid;gap:8px;margin:12px 0 0}
.doc a{color:var(--accent-text)}
.doc-foot{padding-block:28px}
.doc-foot .legal{color:var(--muted)}
.doc-foot a{color:var(--ink)}

@media (max-width:640px){
  .table-wrap{overflow:visible}
  table.rates{min-width:0}
  .rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rates tr{display:grid;grid-template-columns:1fr auto auto;gap:4px 18px;padding:18px 0;border-bottom:2px solid var(--paper-ink)}
  .rates td{border:0;padding:0}
  .rates td.k{grid-column:1/-1;width:auto}
  .rates td.n{font-size:var(--step-body)}
  .rates td.n:nth-child(2)::before{content:"Setup ";font-weight:400;font-size:var(--step-small);font-stretch:100%}
  .rates td.n:nth-child(3)::before{content:"Monthly ";font-weight:400;font-size:var(--step-small);font-stretch:100%}
  .rates td.what{grid-column:1/-1}
  .rates tbody tr:hover{background:none;box-shadow:none}
  .rates tbody tr:hover td.k{padding-left:0}
}

/* on a phone, the sample sites switch to their own phone layout, like a real responsive site would */
@media (max-width:600px){.browser .view{aspect-ratio:4/5}.browser .bar-end{display:none}}
@container (max-width:560px){
  .site{font-size:3.4cqw;width:auto}
  .m-links{display:none}
  .m-nav{padding:1em 1.4em;justify-content:space-between}
  .m-hero.split{grid-template-columns:1fr;padding:1.8em 1.4em;gap:1.4em}
  .m-hero.over{height:auto;display:flex;flex-direction:column}
  .m-hero.over .m-pic{position:relative;aspect-ratio:4/3}
  .m-hero.over .m-copy{position:relative;left:auto;bottom:auto;max-width:none;padding:1.6em 1.4em}
  .m-hero.center{padding:1.8em 1.4em 0}
  .m-sec{padding:1.8em 1.4em}
  .m-sec.two{grid-template-columns:1fr;gap:1.8em}
  .m-cards,.m-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-menu{grid-template-columns:1fr}
  .m-band{padding:1.2em 1.4em}
  .m-foot{padding:1.2em 1.4em}
  .site h4{font-size:2.3em}
}

/* ---------- real photos ---------- */
.street-photo{position:relative;overflow:hidden;background:var(--surface);aspect-ratio:2/1;max-height:78vh;width:100%}
.street-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s var(--ease),filter 2.4s var(--ease);filter:saturate(.85) brightness(.8)}
.street-photo.on img{transform:none;filter:none}
.street-photo figcaption{position:absolute;right:12px;bottom:10px;font-size:12px;color:#fff;background:rgba(12,23,36,.6);padding:4px 8px}
@media (max-width:700px){.street-photo{aspect-ratio:4/3}}
.m-pic{background:var(--ms)}
.m-pic img,.m-tile img{width:100%;height:100%;object-fit:cover;display:block}
.m-tile img{aspect-ratio:4/3;height:auto;border-radius:var(--mr);background:var(--ms)}
.m-gal.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-hero.over .m-pic::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12)}
@media (prefers-reduced-motion:reduce){.street-photo img{transform:none;filter:none;transition:none}}

/* ---------- back link on policy pages ---------- */
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;padding:10px 16px 10px 12px;background:var(--paper-2);color:var(--paper-ink)!important;font-weight:700;font-size:var(--step-small);text-decoration:none;border-left:4px solid var(--accent);transition:background-color .2s var(--ease)}
.back:hover{background:var(--paper-ink);color:var(--paper)!important}
.back svg{width:16px;height:16px}
.back-end{margin-top:56px}
.back-end .back{margin-bottom:0}
.m-hours{display:grid;gap:.6em;font-size:.84em}
.m-hours>div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(127,127,127,.25);padding-bottom:.5em} /* taste-skill-ignore: inside a sample site (data-ui) */
.m-hours p{opacity:.75;margin-top:.4em}
.p-diner{object-position:50% 62%}.p-lawn{object-position:50% 58%}.p-salon{object-position:40% 62%}
.p-roof{object-position:50% 45%}.p-auto{object-position:35% 50%}.p-plumb{object-position:40% 50%}

.shot .browser{cursor:pointer}

/* ---------- phone hardening: nothing may ever be wider than the screen ---------- */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
main,footer,section,header{max-width:100%;overflow-x:clip}
h1,h2,h3,h4,h5,p,li,dd,dt,summary,label,a,td,th,figcaption{overflow-wrap:break-word;min-width:0}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
.cols a,.direct a,.mail,.doc a,.legal span,.notice a{overflow-wrap:anywhere}
img,svg,video,iframe,table{max-width:100%}
.foot,.doc-foot{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.contact{padding-bottom:calc(clamp(48px,6vw,80px) + env(safe-area-inset-bottom,0px))}
@media (max-width:560px){
  h2{font-size:clamp(1.65rem,7.2vw,2.25rem)}
  .doc h1{font-size:clamp(1.6rem,7.4vw,2.25rem);font-stretch:105%}
  .doc h2{font-size:1.2rem}
  .hero-mid .lede{font-size:clamp(1.35rem,6vw,1.75rem)}
  .mail{font-size:clamp(1.35rem,7.4vw,2.25rem)}
  .cols{grid-template-columns:1fr;gap:28px}
  .legal{flex-direction:column}
  .doc-foot .legal span:last-child{display:flex;flex-wrap:wrap;gap:6px 14px}
  .top{gap:12px}
  .brand span{font-size:.9rem}
  .nav .btn{padding:.6em .9em;min-height:44px}
  .qs summary{padding:18px 16px;gap:12px}
  .qs details p{padding:0 16px 20px}
  form.req{padding:18px}
  .notice{padding:14px 16px}
  .acc .open{padding-left:20px}
  .acc button{padding-left:56px}
}
.doc-links{display:flex;flex-wrap:wrap;gap:6px 16px}
/* grids may never grow wider than the screen because of the fitted LINTEL word */
.hero,.foot{grid-template-columns:minmax(0,1fr)}
.mono .title,.big{overflow:hidden;max-width:100%}
.fit{max-width:none}
@media (max-width:560px){
  .notice{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));flex-wrap:nowrap;gap:12px;padding:10px 12px;font-size:.8125rem;line-height:1.35}
  .notice p{flex:1 1 auto}
  .notice .btn{min-height:40px;padding:.5em .9em;flex:none}
}

/* ---------- logo and brand ---------- */
.brand{gap:12px}
.brand svg{width:44px;height:44px;flex:none}
.mark-key{fill:var(--accent)}
.brand .wm{display:grid;line-height:1}
.brand .wm b{font-weight:900;font-stretch:125%;font-size:1.375rem;letter-spacing:-.01em}
.brand .wm small{font-weight:700;font-size:.8125rem;letter-spacing:.02em;margin-top:3px;color:var(--muted);display:flex;align-items:center;gap:6px}
.brand .wm small::before{content:"";width:14px;height:3px;background:var(--accent)}
.brand:hover .mark-door,.brand:hover .mark-key{fill:var(--ink)}
.brand .mark-door,.brand .mark-key{transition:fill .25s var(--ease)}
@media (max-width:560px){.brand svg{width:38px;height:38px}.brand .wm b{font-size:1.15rem}.brand .wm small{font-size:.8125rem}}

/* ---------- about page ---------- */

.doc .lead{font-size:var(--step-lead);line-height:1.4;max-width:46ch;margin:8px 0 36px}
.about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 12px}
.about-facts>div{background:var(--paper-2);border-top:4px solid var(--accent);padding:16px 18px}
.about-facts dt{color:var(--paper-muted);font-size:var(--step-small)}
.about-facts dd{margin:4px 0 0;font-weight:800}
.about-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px!important}
.about-cta .btn{color:var(--paper-ink)!important;text-decoration:none}
.about-cta .btn:not(.hot){background:var(--paper-2)}
@media (max-width:640px){.about-facts{grid-template-columns:1fr}}

/* ---------- menu: links in a row on wide screens, a three-bar dropdown on phones ---------- */
.top{position:relative}
.menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.menu-btn{display:none}
@media (max-width:820px){
  .nav{gap:10px}
  .js .menu-btn{display:inline-grid;align-content:center;justify-items:center;gap:5px;width:48px;height:48px;padding:0;border:2px solid var(--surface-3);background:var(--surface);cursor:pointer;flex:none;transition:border-color .2s var(--ease)}
  .js .menu-btn span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s var(--ease)}
  .js .menu-btn[aria-expanded="true"]{border-color:var(--accent)}
  .js .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .js .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .js .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .js .menu{position:absolute;z-index:30;top:100%;left:max(var(--gutter),env(safe-area-inset-left,0px));right:max(var(--gutter),env(safe-area-inset-right,0px));display:grid;gap:0;background:var(--surface);border-top:4px solid var(--accent);box-shadow:0 24px 48px -12px rgba(0,0,0,.6);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s linear .25s} /* taste-skill-ignore: the dropdown is a real overlay */
  .js .menu.open{visibility:visible;opacity:1;transform:none;transition:opacity .2s var(--ease),transform .25s var(--ease)}
  .js .menu a{display:flex;align-items:center;min-height:56px;padding:0 20px;font-size:var(--step-body);font-weight:600;color:var(--ink);margin-bottom:2px;background:var(--surface)}
  .js .menu a:last-child{margin-bottom:0}
  .js .menu a::after{display:none}
  .js .menu a:hover,.js .menu a:focus-visible{background:var(--surface-2)}
  html:not(.js) .menu{flex-wrap:wrap;gap:10px 16px}
}
@media (prefers-reduced-motion:reduce){.js .menu,.js .menu-btn span{transition:none}}

.next-ex{justify-self:start;background:none;border:0;padding:6px 0;font:700 var(--step-small)/1.2 var(--f);color:var(--paper-ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.25em;cursor:pointer}
.next-ex:hover{color:var(--accent-text)}

/* =====================================================================
   Restyle pass: flatter surfaces, more pictures, a real motion layer.
   ===================================================================== */

/* privacy notice: a slim bar at the very top of the page, never on top of content */
.notice{position:static;inset:auto;margin:0;max-width:none;display:flex;align-items:center;justify-content:center;gap:10px 20px;flex-wrap:wrap;padding:10px max(var(--gutter),env(safe-area-inset-left,0px));background:var(--paper);color:var(--paper-ink);border:0;box-shadow:none;font-size:var(--step-small);animation:none}
.notice p{flex:0 1 auto}
.notice .btn{min-height:44px;padding:.5em 1.1em;background:var(--paper-ink);color:var(--paper)}
.notice .btn:hover{background:var(--surface-2)}
@media (max-width:560px){.notice{position:static;left:auto;right:auto;bottom:auto;justify-content:space-between;flex-wrap:nowrap;padding:8px 16px}.notice .btn{min-height:44px}}

/* hero: sentence and its action together, the name below with clear air above it */
.lead-block{display:grid;gap:28px;justify-items:start}
.hero-mid .lede{font-size:clamp(1.5rem,1.05rem + 1.25vw,2.125rem);line-height:1.2;max-width:30ch}
.hero-mid{padding-bottom:clamp(150px,20vh,220px)}
.hero-mid .side{align-self:end}
@media (max-width:820px){
  .hero{grid-template-rows:auto auto auto auto auto}
  .hero > .top{order:0}
  .hero > .wrap:not(.top):not(.hero-mid){order:1}
  .hero > .hero-mid{order:2;padding-top:28px;padding-bottom:40px}
  .hero > .ticker{order:3}
  .mono{padding-top:20px}
  .hero-mid .lede{font-size:clamp(1.35rem,5.6vw,1.75rem)}
}

/* who we build for: an uneven wall of real photographs, each one a way into the picker */
.wall-sec{background:var(--bg);padding-block:clamp(72px,9vw,140px)}
.wall-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:end;margin-bottom:40px}
.wall-head p{font-size:var(--step-lead);line-height:1.38;color:var(--muted);max-width:40ch}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.tile{position:relative;display:block;overflow:hidden;background:var(--surface);color:var(--ink);text-decoration:none;height:clamp(240px,26vw,380px)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .4s var(--ease)}
.tile .cap{position:absolute;left:0;bottom:0;display:grid;gap:2px;padding:12px 16px 14px;background:var(--bg);max-width:calc(100% - 24px);transition:background-color .3s var(--ease)}
.tile .cap b{font-size:var(--step-body);font-weight:800}
.tile .cap span{font-size:var(--step-small);color:var(--muted)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile:hover .cap,.tile:focus-visible .cap{background:var(--accent);color:var(--accent-ink)}
.tile:hover .cap span,.tile:focus-visible .cap span{color:var(--accent-ink)}
.wall:hover .tile:not(:hover) img{opacity:.72}
.t-diner{grid-column:1/4}.t-roofing{grid-column:4/9}.t-plumbing{grid-column:9/13}
.t-lawn{grid-column:1/4}.t-auto{grid-column:4/10}.t-salon{grid-column:10/13}
.t-lawn,.t-auto,.t-salon{height:clamp(200px,21vw,310px)}
.t-diner img{object-position:50% 60%}.t-lawn img{object-position:50% 55%}.t-roofing img{object-position:50% 40%}
@media (max-width:820px){
  .wall-head{grid-template-columns:1fr;gap:14px}
  .wall{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .t-diner{grid-column:1/-1}.t-roofing{grid-column:1/6}.t-plumbing{grid-column:6/-1}
  .t-lawn{grid-column:1/4}.t-auto{grid-column:4/-1}.t-salon{grid-column:1/-1}
  .tile,.t-lawn,.t-auto,.t-salon{height:clamp(180px,48vw,300px)}
  .t-diner,.t-salon{height:clamp(220px,62vw,340px)}
  .tile .cap{padding:10px 12px}
}

/* the sample browser sits on a tone step */
.shot figure{background:var(--paper-2);padding:clamp(10px,1.4vw,18px)}
.next-ex{margin-top:2px}

/* sample sites: services as an open list instead of boxed cards */
.m-cards{gap:1.2em 1.6em}
.m-card{background:none!important;padding:0;grid-template-columns:auto 1fr;column-gap:.7em;align-items:start}
.m-card .ic{grid-row:span 2;margin:0}

/* the price figures land when the business changes */
.quote .price .fig{display:inline-block}
.quote .price.land .fig{animation:land .55s var(--ease) both}
.quote .price.land .fig + .fig{animation-delay:.06s}
.quote ul.land li{animation:rise .5s var(--ease) both}
.quote ul.land li:nth-child(2){animation-delay:.05s}.quote ul.land li:nth-child(3){animation-delay:.1s}.quote ul.land li:nth-child(4){animation-delay:.15s}
@keyframes land{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}

/* signature: the monument eases back as the first screen leaves; the footer name settles in */
.mono .fit,.big .fit{transform-origin:0 100%;will-change:transform}

/* staggered entrances for the parts of each section (added by script, so nothing hides without it) */
.js .stag{opacity:0;transform:translateY(24px)}
.js .stag.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--sd,0ms)}

/* Main Street drifts slowly while it is on screen */
.street-photo img{transform-origin:50% 60%}
.street-photo.on img{animation:drift 22s ease-in-out 2.4s infinite alternate}
@keyframes drift{from{transform:scale(1) translateX(0)}to{transform:scale(1.06) translateX(-1.5%)}}

/* quieter feedback everywhere */
.pick label{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.pick label:active{transform:scale(.98)}
.qs summary{transition:color .2s var(--ease)}
.qs summary:hover{color:var(--accent)}
.cols a,.legal a{transition:color .2s var(--ease)}
.cols a:hover{color:var(--accent-text)}
.mail{transition:color .25s var(--ease),transform .4s var(--ease)}
.mail:hover{transform:translateX(6px)}

@media (prefers-reduced-motion:reduce){
  .js .stag{opacity:1;transform:none}
  .street-photo.on img,.quote .price.land .fig,.quote ul.land li{animation:none}
  .tile img,.mail{transition:none}
  .tile:hover img{transform:none}
  .mono .fit,.big .fit{transform:none!important}
}

/* phone fixes from the look round */
.street-photo figcaption{font-size:13px}
@media (max-width:820px){
  .acc button{padding-left:20px}
  .acc .open{padding-left:20px}
  .tile .cap{padding:8px 10px}
  .tile .cap b{font-size:.9375rem;line-height:1.2}
  .tile .cap span{display:none}
  .t-diner .cap span,.t-salon .cap span{display:block;font-size:.8125rem}
}
.js .stag.in{transition:opacity .55s var(--ease),transform .65s var(--ease);transition-delay:var(--sd,0ms)}

/* the hero rows are placed explicitly, so the notice can come and go without moving anything */
.hero{grid-template-rows:auto auto 1fr auto auto}
.hero > .notice{grid-row:1}
.hero > .top{grid-row:2}
.hero > .hero-mid{grid-row:3}
.hero > .wrap:not(.top):not(.hero-mid){grid-row:4}
.hero > .ticker{grid-row:5}
@media (max-width:820px){
  .hero{grid-template-rows:auto auto auto auto auto}
  .hero > .wrap:not(.top):not(.hero-mid){grid-row:3}
  .hero > .hero-mid{grid-row:4}
}
/* fewer type sizes: fold near-duplicates onto the scale */
.ticker span{font-size:var(--step-body)}
.brand .wm b{font-size:1.25rem}
.qs summary{font-size:1.25rem}
.quote .price{font-size:clamp(1.5rem,1.05rem + 1.25vw,2.125rem)}
/* footer: an invitation, the links, then the name; no dead air between them */
.foot{gap:clamp(40px,5vw,72px)}
.invite{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 32px}
.invite-h{font-size:var(--step-head);text-transform:none;letter-spacing:-.03em;max-width:16ch}
.big{padding-top:0}

/* prices now live inside "What do you run?" */
.door .door-more{display:block;margin-top:clamp(56px,7vw,96px)}
.door .incl{margin-top:0}
.pick + .other{margin:-12px 0 28px;font-size:var(--step-small);color:var(--paper-muted);max-width:52ch}
.other a{color:var(--paper-ink);font-weight:700;text-decoration-color:var(--accent)}

/* =====================================================================
   Sample sites, round two: built like real small-business homepages.
   Everything in em, so the page scales with its browser window.
   ===================================================================== */
.site{--mtop:color-mix(in srgb,var(--mfoot) 100%,transparent)}
.m-top{display:flex;justify-content:space-between;gap:1em;padding:.55em 2.4em;background:var(--mfoot);color:var(--mfi);font-size:.62em;letter-spacing:.01em}
.m-top b{font-weight:800}
.m-nav{background:var(--mb);position:relative;z-index:1}
.mono-mk{display:inline-flex}
.mono-mk svg{width:1.6em;height:1.6em;display:block}
.m-logo{font-size:.92em;gap:.6em}
.m-hero.bleed{position:relative;min-height:24em;display:flex;align-items:center;padding:2.6em 2.4em}
.m-hero.bleed .m-pic{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.m-scrim{position:relative;max-width:25em;background:rgba(10,14,20,.72);color:#fff;padding:1.7em 1.8em;border-radius:var(--mr)}
.m-scrim h4{color:#fff}
.m-scrim h4 em{color:var(--mt-on-dark,var(--ma))}
.m-scrim p{font-size:.82em;opacity:.9;max-width:30em}
.m-scrim .m-eyebrow{color:var(--mt-on-dark,var(--ma))}
.m-scrim .m-btn.ghost{color:#fff}
.m-trust{display:flex;flex-wrap:wrap;gap:.5em 1.2em;margin-top:1.3em;font-size:.66em;font-weight:600;opacity:.95}
.m-trust span{display:inline-flex;align-items:center;gap:.4em}
.ck{width:1.05em;height:1.05em;flex:none;color:var(--mt-on-dark,var(--ma))}
.m-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;margin-bottom:1.2em}
.m-sec-head h5{margin:0}
.m-sec-head p{font-size:.78em;opacity:.7;text-align:right}
.m-tabs{display:flex;gap:.4em;margin-bottom:1.1em;font-size:.7em;font-weight:700}
.m-tabs span{padding:.5em 1em;background:var(--ms);border-radius:var(--mr)}
.m-tabs .on{background:var(--ma);color:var(--mai)}
.m-menu{gap:1em 2.4em}
.m-menu.one{grid-template-columns:1fr}
.m-item{display:flex;align-items:baseline;gap:.6em;font-size:.82em}
.m-item > div{display:grid;gap:.15em;min-width:0}
.m-item > div span{font-size:.88em;opacity:.68}
.m-item i{flex:1;border-bottom:.1em dotted currentColor;opacity:.3;min-width:1em}
.m-item > b{white-space:nowrap}
.m-split{display:grid;grid-template-columns:1fr 1fr;gap:2.2em;align-items:center;background:var(--ms)}
.m-split.flip .m-pic{order:2}
.m-pic.tall{aspect-ratio:4/3}
.m-p{font-size:.84em;opacity:.82;margin:.4em 0 1em;max-width:30em}
.m-checks{list-style:none;margin:0;padding:0;display:grid;gap:.55em;font-size:.78em;font-weight:600}
.m-checks li{display:flex;align-items:center;gap:.55em}
.m-checks .ck{color:var(--mt)}
.m-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5em;padding:1.8em 2.4em;background:var(--ma);color:var(--mai)}
.m-cta b{display:block;font-family:var(--mf);font-size:1.25em;font-weight:var(--mw);letter-spacing:-.01em}
.m-cta span:not(.m-btn){font-size:.75em;opacity:.85}
.m-btn.inv{background:var(--mai);color:var(--ma)}
.m-foot{margin-top:0;display:block;padding:2em 2.4em 1.2em;font-size:.72em}
.m-fcols{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:2em;margin-bottom:1.6em}
.m-fcols > div{display:grid;gap:.45em;align-content:start}
.m-fcols b{font-size:1.05em}
.m-fcols span{opacity:.75;display:flex;align-items:center;gap:.45em}
.m-fcols span b{font-size:1em;opacity:1;margin-left:.3em}
.m-legal{display:flex;justify-content:space-between;opacity:.6;font-size:.9em}
.m-hero.center .m-p{margin:.2em auto .6em}
/* second photo slots: until a second picture exists, show a different part of the first */
.ph.c-2{object-position:70% 35%}
.ph.alt-crop.c-2{transform:scale(1.35);transform-origin:70% 40%}
/* text colors on dark scrims, per sample */
.m-restaurant{--mt-on-dark:#ffb38a}
.m-plumbing{--mt-on-dark:#ffd23f}
.m-plumbing .m-hero{background:none}
.m-roofing{--mt-on-dark:#ff9a5c}
.m-landscaping{--mt-on-dark:#c6e377}
.m-auto{--mt-on-dark:#ff8a45}
.m-auto .m-split{background:#1d232c}
.m-salon .m-split{background:var(--ms)}

@container (max-width:560px){
  .m-top{padding:.6em 1.4em;font-size:.7em}
  .m-top span:last-child{display:none}
  .m-hero.bleed{min-height:30em;align-items:flex-end;padding:1.4em}
  .m-scrim{max-width:none;padding:1.4em}
  .m-sec-head{display:block}
  .m-sec-head p{text-align:left;margin-top:.3em}
  .m-split{grid-template-columns:1fr;gap:1.4em}
  .m-split.flip .m-pic{order:0}
  .m-cta{flex-direction:column;align-items:flex-start;padding:1.6em 1.4em}
  .m-fcols{grid-template-columns:1fr;gap:1.2em}
  .m-foot{padding:1.6em 1.4em 1em}
  .m-tabs{flex-wrap:wrap}
}

/* the slogan under the name: name of the company, the promise, and what it is, on one baseline */
.mono-sub{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(16px,2.4vw,40px);row-gap:6px;padding:16px 0 22px}
.mono-sub p{margin:0}
.mono-sub .ms-name{color:var(--accent);font-weight:800;font-size:var(--step-body)}
.mono-sub .slogan{font-size:clamp(1.25rem,.85rem + 1.25vw,2.125rem);font-weight:800;font-stretch:110%;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.mono-sub .ms-what{color:var(--muted);font-weight:400;font-size:var(--step-small);text-align:right;max-width:30ch}
@media (max-width:900px){
  .mono-sub{grid-template-columns:auto minmax(0,1fr)}
  .mono-sub .ms-what{grid-column:1/-1;text-align:left;max-width:none}
}
@media (max-width:560px){
  .mono-sub{grid-template-columns:1fr;padding:14px 0 20px;row-gap:4px}
  .mono-sub .slogan{font-size:clamp(1.375rem,6.6vw,1.75rem)}
  .mono-sub .ms-what{margin-top:6px}
}
/* the slogan arrives just after the name lifts into place */
.js .mono-sub .slogan{animation:rise .8s var(--ease) .55s both}
@media (prefers-reduced-motion:reduce){.js .mono-sub .slogan{animation:none}}
/* smallest phones: keep the logo and the orange button on one line each */
.brand .wm small,.nav .btn{white-space:nowrap}
@media (max-width:360px){
  .top{gap:8px}
  .brand{gap:8px}
  .brand svg{width:32px;height:32px}
  .brand .wm b{font-size:1.05rem}
  .nav{gap:6px}
  .nav .btn{padding:.55em .7em;font-size:.8125rem}
  .js .menu-btn{width:44px;height:44px}
}
@media (min-width:901px){.mono-sub .ms-what{max-width:none;white-space:nowrap}}

/* =====================================================================
   Picker, quote and sample browser: bordered, with a clear selected state
   ===================================================================== */
.pick{gap:10px}
.pick label{align-items:flex-start;min-height:72px;padding:14px 16px 14px 14px;background:#fff;border:2px solid #cfd6de;color:var(--paper-ink);gap:12px}
.pick label::before{width:18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid #9aa7b5;background:#fff;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.pk-t{display:grid;gap:3px;min-width:0}
.pk-t b{font-weight:700;font-size:var(--step-small);line-height:1.25}
.pk-t small{font-size:.8125rem;font-weight:500;color:var(--paper-muted)}
.pick label:hover{border-color:var(--paper-ink);transform:translateY(-2px)}
.pick label:has(input:checked){background:var(--paper-ink);border-color:var(--paper-ink);color:var(--paper)}
.pick label:has(input:checked)::before{background:var(--accent);border:4px solid var(--paper)}
.pick label:has(input:checked) .pk-t small{color:#c6d0db}
.pick label:has(input:checked)::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:5px;background:var(--accent)}

.quote{background:#fff;border:2px solid var(--paper-ink);border-top:8px solid var(--accent);padding:clamp(20px,2.4vw,30px)}
.quote .for{font-size:var(--step-body);line-height:1.4}

.shot figure{background:var(--bg);padding:clamp(12px,1.8vw,24px);border-bottom:6px solid var(--accent)}
.browser{border:2px solid #0a121c;border-radius:12px}
.browser .bar{background:#dfe5eb}
.browser .dots i:nth-child(1){background:#ff6b5f}.browser .dots i:nth-child(2){background:#ffbd3d}.browser .dots i:nth-child(3){background:#2dc653}
.shot .next-ex{color:var(--paper-ink)}
@media (max-width:820px){.pick label{min-height:64px}}
@media (prefers-reduced-motion:reduce){.pick label:hover{transform:none}}

/* ---------- switching business types: quick, smooth, layered ---------- */
:root{--swift:cubic-bezier(.22,1,.36,1)}
.pick label{transition:background-color .28s var(--swift),color .28s var(--swift),border-color .28s var(--swift),transform .28s var(--swift)}
.pick label::before{transition:background-color .28s var(--swift),border-color .28s var(--swift),transform .28s var(--swift)}
.pick label:has(input:checked)::before{animation:dotPop .42s var(--swift) both}
.pick label:has(input:checked)::after{transform-origin:0 50%;animation:barIn .38s var(--swift) .04s both}
.pick label:has(input:checked) .pk-t{animation:nudge .36s var(--swift) both}
@keyframes dotPop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nudge{from{transform:translateX(-4px)}to{transform:none}}

.quote.land{animation:cardIn .4s var(--swift) both}
@keyframes cardIn{from{transform:translateY(8px)}to{transform:none}}
.quote .for,.quote .price,.quote ul{transition:opacity .2s var(--swift)}
.quote.land .for{animation:fadeUp .36s var(--swift) both}
.quote .price.land .fig{animation:land .42s var(--swift) .05s both}
.quote .price.land .fig + .fig{animation-delay:.11s}
.quote ul.land li{animation:fadeUp .36s var(--swift) both}
.quote ul.land li:nth-child(1){animation-delay:.08s}.quote ul.land li:nth-child(2){animation-delay:.12s}
.quote ul.land li:nth-child(3){animation-delay:.16s}.quote ul.land li:nth-child(4){animation-delay:.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.shot .swap{transition:opacity .42s var(--swift),transform .5s var(--swift)}
.shot .swap.fade{opacity:0;transform:translateY(14px) scale(.985)}

@media (prefers-reduced-motion:reduce){
  .pick label:has(input:checked)::before,.pick label:has(input:checked)::after,.pick label:has(input:checked) .pk-t,
  .quote.land,.quote.land .for,.quote .price.land .fig,.quote ul.land li{animation:none}
  .shot .swap,.shot .swap.fade{transition:none;transform:none;opacity:1}
}

/* header logo: a larger "Web Co." under LINTEL */
.brand .wm small{font-size:.9375rem;margin-top:4px;gap:7px}
.brand .wm small::before{width:16px}
@media (max-width:560px){.brand .wm small{font-size:.875rem}}
@media (max-width:360px){.brand .wm small{font-size:.8125rem}.brand .wm small::before{width:12px}}
/* the word "before" in the headline sentence carries the accent */
.hero-mid .lede em{color:var(--accent);font-style:normal}

/* "Run something else?": its own bordered card so nobody misses it */
.pick + .other{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 20px;margin:0 0 28px;padding:18px 20px;background:#fff;border:2px solid var(--paper-ink);border-left:8px solid var(--accent);color:var(--paper-ink);max-width:none;font-size:inherit}
.other-h{font-size:var(--step-lead);font-weight:800;font-stretch:110%;letter-spacing:-.01em;line-height:1.15;grid-column:1}
.other-p{font-size:var(--step-small);color:var(--paper-muted);grid-column:1;max-width:46ch}
.other .btn{grid-column:2;grid-row:1/3;white-space:nowrap}
@media (max-width:560px){
  .pick + .other{grid-template-columns:1fr;padding:16px}
  .other .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
}
/* links in the hero pricing sentence that open the picker on that business type */
.hero-mid .side .pick-link{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.22em;transition:color .2s var(--swift,ease)}
.hero-mid .side .pick-link:hover,.hero-mid .side .pick-link:focus-visible{color:var(--accent)}

/* =====================================================================
   Top bar: logo, the slogan beside it, then the menu
   ===================================================================== */
.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand tag nav";align-items:center;column-gap:clamp(16px,2.2vw,32px)}
.top > .brand{grid-area:brand}
.top > .tagline{grid-area:tag;justify-self:start}
.top > .nav{grid-area:nav}
.tagline{position:relative;margin:0;padding-left:16px;font-weight:700;font-stretch:105%;font-size:var(--step-small);line-height:1.2;letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.tagline::before{content:"";position:absolute;left:0;top:50%;width:4px;height:1.9em;transform:translateY(-50%);background:var(--accent)}
.doc ~ * .tagline,.doc-foot .tagline{color:var(--ink)}
@media (max-width:1120px){.top{grid-template-columns:auto auto;grid-template-areas:"brand nav" "tag tag";row-gap:12px}.top > .nav{justify-self:end}}
@media (max-width:560px){.tagline{font-size:.9375rem;padding-left:14px}.tagline::before{height:1.6em}}
.js .tagline{animation:rise .7s var(--swift,ease) .35s both}

/* under the big name: the company name and what it does */
.mono-sub{grid-template-columns:auto minmax(0,1fr)}
.mono-sub .ms-what{justify-self:end;text-align:right}
@media (max-width:900px){.mono-sub{grid-template-columns:1fr}.mono-sub .ms-what{justify-self:start;text-align:left;grid-column:auto}}

/* the logo's door opens as the page loads, and a little wider when you point at it */
.brand .mark-leaf{transform-box:fill-box;transform-origin:0 50%;transition:transform .45s var(--swift,ease)}
.js .brand .mark-leaf{animation:doorOpen 1s var(--swift,ease) .25s backwards}
.brand .mark-spill{transition:opacity .45s var(--swift,ease)}
.js .brand .mark-spill{animation:spillOn 1s var(--swift,ease) .35s backwards}
.brand:hover .mark-leaf,.brand:focus-visible .mark-leaf{transform:scaleX(.55)}
.brand:hover .mark-spill,.brand:focus-visible .mark-spill{opacity:.85}
.brand:hover .mark-door,.brand:hover .mark-key{fill:var(--accent)}
@keyframes doorOpen{from{transform:scaleX(2.67)}to{transform:none}}
@keyframes spillOn{from{opacity:0}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.js .brand .mark-leaf,.js .brand .mark-spill,.js .tagline{animation:none}.brand .mark-leaf{transition:none}}
.brand .mark-leaf polygon{fill:#b9c6d4}
/* the fine print under the monthly fee: easier to read */
.incl .fine{font-size:var(--step-small);line-height:1.55;color:#33414f;max-width:58ch;margin-top:20px}
.incl .fine b{color:var(--paper-ink);font-weight:700}
.incl .fine{font-size:clamp(.9375rem,.9rem + .15vw,1rem)}
/* seven inclusions now: keep the stagger quick */
.quote ul.land li:nth-child(5){animation-delay:.24s}.quote ul.land li:nth-child(6){animation-delay:.28s}.quote ul.land li:nth-child(7){animation-delay:.32s}
.quote ul{gap:8px}