/* CleanCleaver design system, part 2 (loads after styles.css, which holds the tokens, type and the base components).
   Everything the newer pages share: the mega-menus and search, the six-column footer, the poster hero, cards, plan cards,
   the compare sheet, callouts, reference pages, help, the changelog, widgets and the motion language.
   Rules (docs/marketing/site/SITE-PLAN.md): flat palette colors, ink outlines, hard offset shadows (never a blur glow),
   48px targets, transform/opacity-only motion, and the final state whenever motion is reduced. */
:root{
  --ease:cubic-bezier(.2,.8,.2,1); --ease-snap:cubic-bezier(.3,1.5,.5,1); --ease-lock:cubic-bezier(.2,.9,.3,1.3);
  --t-fast:150ms; --t-base:250ms; --t-story:600ms; --t-max:1200ms;
  --shadow:0 1px 2px rgba(23,35,46,.06),0 12px 28px -16px rgba(23,35,46,.32); --radius:14px;
}

/* ── header: mega-menus, search, sign in ── */
.nav .signin,.masthead-in>.signin{display:flex;align-items:center;min-height:48px;padding-inline:6px;font:600 14px/1 var(--sans);text-decoration:none;color:var(--ink2);white-space:nowrap}
.masthead-in>.signin:hover{color:var(--ink)}
.nav-util{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;color:var(--ink2);text-decoration:none;flex:none;transition:background var(--t-fast)}
.nav-util:hover{background:rgba(23,35,46,.07);color:var(--ink)}
.nav{margin-left:auto}
@media (min-width:1280px){.nav+.nav-util{margin-left:0}}
.mega-h{margin:2px 12px 6px;padding-bottom:6px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--rule)}
/* below 1280 the menus hide: search, the sign-up and the menu button sit together at the right (at 1024 they sat by the logo) */
@media (max-width:1279px){.masthead-in>.nav-util{margin-left:auto}.masthead-in>.signin{display:none}.btn-try{margin-left:0}}
@media (max-width:480px){.nav-util{width:44px}}

dialog.search{position:fixed;inset:12vh auto auto 50%;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));margin:0;padding:0;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow);z-index:60;pointer-events:auto}
dialog.search::backdrop{background:rgba(23,35,46,.45)}
.search-form{display:flex;gap:8px;padding:12px;border-bottom:1.5px solid var(--ink)}
.search-form input{flex:1;min-width:0;min-height:48px;font:400 18px var(--sans);padding:0 12px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper-hi);color:var(--ink)}
.search-x{min-height:48px;padding:0 14px;font:600 14px var(--sans);border:1.5px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.search-out{list-style:none;margin:0;padding:6px;max-height:52vh;overflow:auto}
.search-out a{display:grid;gap:2px;min-height:48px;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.search-out a:hover,.search-out a:focus-visible,.search-out a[aria-selected="true"]{background:rgba(23,35,46,.08)}
.search-out b{font:600 15px/1.2 var(--sans)}.search-out span{font:400 13px/1.3 var(--sans);color:var(--ink2)}
.search-out .none{padding:14px;font:400 15px var(--sans);color:var(--ink2)}
@media (prefers-reduced-motion:no-preference){dialog.search[open]{animation:drop var(--t-base) var(--ease)}}

/* ── footer: six columns and the legal bar ── */
.foot-six{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px 20px}
.foot-six .foot-nav a{min-height:44px;display:flex;align-items:center;font:600 14px/1.2 var(--sans);padding-block:6px;text-decoration:none;color:var(--ink)}
.foot-six .foot-nav a:hover{text-decoration:underline}
.foot-six .foot-nav{align-content:start}
.foot-six .foot-nav:last-child{grid-column:auto!important;grid-template-columns:none!important}
@media (max-width:1000px){.foot-six{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){.foot-six{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.legal-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--rule)}
.legal-bar .made{margin:0}
.legal-nav{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;font:600 14px/1 var(--sans)}
.legal-nav a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none}
.legal-nav a:hover{text-decoration:underline}
.legal-nav span{color:var(--ink2);font-weight:400}

/* ── the poster hero: headline beside a big flat 80s-print-ad graphic ── */
.hero.hero-poster{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;justify-items:stretch;gap:clamp(20px,4vw,56px);padding-bottom:clamp(28px,5vw,64px)}
.hero-poster h1{text-align:left;font-size:clamp(40px,5.2vw,68px);max-width:none}
.hero-poster .hero-copy{display:grid;gap:14px;justify-items:start}
@media (max-width:900px){.hero.hero-poster{grid-template-columns:minmax(0,1fr)}.hero-poster .art{order:-1;max-width:420px;margin-inline:auto}}
figure.art{margin:0;position:relative;width:100%}
figure.art>svg{display:block;width:100%;height:auto;aspect-ratio:4/3;overflow:visible}
.art-hero{filter:drop-shadow(0 10px 16px rgba(23,35,46,.16))}
.art-side{max-width:360px;justify-self:center}
.art-card{width:100%;max-width:220px;margin-bottom:8px}
.poster-fallback{background:var(--paper-hi)}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split .art{order:-1}}

/* ── cards, tags, tile indexes ── */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cards,.cards.cols-2,.cards.cols-4{grid-template-columns:minmax(0,1fr)}}
.card>a,.card>div{display:grid;gap:6px;align-content:start;height:100%;padding:18px;background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.card>a:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(23,35,46,.08),0 18px 32px -16px rgba(23,35,46,.4)}
.card>a:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.card b{font:700 21px/1.15 var(--serif)}.card span:not(.tag){font-size:18px;color:var(--ink2)}
.tag{justify-self:start;padding:3px 9px;font:700 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper-hi)}
.tag-new{background:var(--go);color:#fff;border-color:var(--ink)}.tag-better{background:var(--water);color:#fff}.tag-fix{background:var(--spark)}
.tiles.idx{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.idx-group h3{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:8px 0 12px;font-size:28px}
.idx-group h3 span{font:400 15px var(--sans);color:var(--ink2)}
.idx-group{padding-top:10px;border-top:1px solid var(--rule)}

/* ── plan cards and the compare sheet ── */
.plans{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{display:grid;gap:6px;align-content:start;padding:18px;background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease-lock),box-shadow var(--t-base) var(--ease)}
.plan h3{font-size:24px}.plan-who{font:600 14px/1.3 var(--sans);color:var(--ink2)}
.plan-price b{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:lining-nums}
.plan-price span{display:block;font:400 14px var(--sans);color:var(--ink2)}
.plan-note{font:600 14px var(--sans);color:var(--go)}
.plan.is-on{transform:translate(-3px,-3px);box-shadow:var(--shadow);background:var(--paper-hi);outline:3px solid var(--spark);outline-offset:0}
.plan.is-on h3::after{content:" · yours";font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--warm-deep)}
.built-plans .prices{margin-top:8px;max-width:640px}
.sheet-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.sheet-wrap:focus-visible{outline:3px solid var(--water)}
.sheet{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font:400 16px/1.35 var(--sans)}
.sheet.cmp{min-width:600px}
.sheet th,.sheet td{padding:11px 12px;text-align:center;border-bottom:1px solid rgba(23,35,46,.2)}
.sheet thead th{position:sticky;top:0;background:var(--paper-hi);font:700 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);z-index:1}
.sheet tbody th[scope=row]{text-align:left;font-weight:600;min-width:220px;position:sticky;left:0;background:var(--card)}
.sheet-note{display:block;font-weight:400;font-size:13px;color:var(--ink2)}
.sheet-group th{text-align:left!important;padding-top:20px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:var(--paper-hi)!important;border-bottom:1.5px solid var(--ink)!important}
.sheet td.yes{color:var(--go);font-weight:800;font-size:20px}.sheet td.no{color:var(--ink2)}
.sheet .hl,.sheet .is-on{background:rgba(242,193,78,.22)}
.sheet tbody th[scope=row]{text-align:left}
.sheet td:first-child,.sheet th:first-child{text-align:left}
.cmp td,.cmp th[scope=row]{vertical-align:top;text-align:left}
.cmp td{font-size:15px}

/* ── callouts, prose, reference pages ── */
.callout{padding:16px 18px;border-left:6px solid var(--water);background:rgba(10,112,144,.1);font-size:19px;max-width:52em}
.callout-draft{border-color:var(--warm);background:rgba(179,68,12,.12)}.callout-notclaimed{border-color:var(--ink);background:var(--card);box-shadow:var(--shadow)}
.callout p+p,.callout ul{margin-top:10px}.callout ul{padding-left:1.2em;display:grid;gap:6px}
.prose-body{max-width:44em;display:grid;gap:14px;font-size:20px}
.prose-body h3{margin-top:10px}.prose-body ul,.prose-body ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.prose-body table{border-collapse:collapse;font:400 16px var(--sans)}.prose-body td,.prose-body th{padding:8px 10px;border:1px solid rgba(23,35,46,.3);text-align:left}
.prose-body a{font-weight:600}
.ref-head{display:grid;gap:12px;padding-block:clamp(24px,5vw,56px) 24px;justify-items:start}
.ref-head h1{text-align:left;font-size:clamp(38px,5vw,60px);max-width:16em}
.ref-updated{font:600 14px var(--sans);color:var(--ink2)}
.ref-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;border-top:1px solid var(--rule)}
.ref-rail{position:sticky;top:84px;padding-top:24px}
.ref-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:0;font:600 14px/1.3 var(--sans);counter-reset:r}
.ref-rail a{display:flex;gap:8px;align-items:center;min-height:40px;text-decoration:none;color:var(--ink2);border-left:3px solid transparent;padding-left:10px}
.ref-rail a:hover{color:var(--ink);border-color:var(--warm)}.ref-rail a[aria-current=true]{color:var(--ink);border-color:var(--ink)}
.ref-body .section:first-child{border-top:0}
/* question pages in the reference layout (PageSpec `question`): the answer under the H1, the "Next question" link at the end */
.ref-head .answer{font-size:21px;line-height:1.45;max-width:40em;margin:0}
.ref-body .lib-next{font:600 18px/1.4 var(--sans);border-top:1.5px solid var(--rule);margin-top:28px;padding-top:12px}.ref-body .lib-next a{display:inline-block;padding-block:12px}
@media (max-width:860px){.ref-wrap{grid-template-columns:minmax(0,1fr)}.ref-rail{position:static;padding-top:14px}.ref-rail ol{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}

/* ── help center, changelog, filters, site map ── */
.help-search{display:grid;gap:6px;max-width:560px}.help-search label{font:700 13px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.help-search input{min-height:52px;font:400 18px var(--sans);padding:0 14px;border:1.5px solid var(--ink);border-radius:10px;background:var(--card);box-shadow:var(--shadow)}
.help-groups{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.help-groups{grid-template-columns:minmax(0,1fr)}}
.help-group h3{padding-bottom:6px;border-bottom:2.5px solid var(--ink);font-size:24px}
.help-group ul{list-style:none;margin:0;padding:0}
.help-group li a{display:grid;gap:2px;min-height:48px;padding:10px 4px;border-bottom:1px solid rgba(23,35,46,.25);text-decoration:none}
.help-group li a:hover{background:rgba(23,35,46,.05)}.help-group li b{font:600 17px/1.25 var(--sans)}.help-group li span{font:400 14px/1.3 var(--sans);color:var(--ink2)}
.filter{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;font:600 14px var(--sans);border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer;transition:transform var(--t-fast) var(--ease-snap),background var(--t-fast)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper-hi)}.chip:active{transform:scale(.95)}
.log{display:grid;gap:26px}
.log-day h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-bottom:6px;border-bottom:2.5px solid var(--ink);font-size:26px}
.log-day h3 span{font:400 16px var(--sans);color:var(--ink2)}
.log-day ul{list-style:none;margin:0;padding:0}
.log-day li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(23,35,46,.22);font-size:19px}
.log-day li[hidden],.idx-group[hidden]{display:none!important}
@media (max-width:520px){.log-day li{grid-template-columns:minmax(0,1fr)}}
.sitemap{columns:3 240px;column-gap:32px}.sitemap section{break-inside:avoid;margin-bottom:22px}.sitemap h3{font-size:20px;margin-bottom:6px}
.sitemap ul{list-style:none;margin:0;padding:0}.sitemap a{display:inline-block;padding-block:8px;font:600 15px var(--sans)}

/* ── widgets ── */
.widget-section .widget{display:grid;gap:14px;padding:clamp(14px,3vw,28px);background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.widget-caption{font:italic 16px var(--serif);color:var(--ink2)}
.widget button,.widget [role=slider],.widget [role=switch]{min-height:48px;min-width:48px}
.widget :focus-visible{outline:3px solid var(--water);outline-offset:3px}
.widget-status{font:600 16px var(--sans);min-height:1.4em}

/* ── motion language (SITE-PLAN section 4): the states kit.js toggles; the final state is the default ── */
@media (prefers-reduced-motion:no-preference){
  .js-anim [data-anim]:not(.in){opacity:0}
  .js-anim [data-anim="stamp"]:not(.in){transform:scale(1.08)}
  .js-anim [data-anim="slide"]:not(.in){transform:translateY(12px)}
  [data-anim]{transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease-snap)}
  .js-anim [data-anim="draw"]:not(.in) path[data-draw]{stroke-dashoffset:var(--len,400)}
  [data-anim="draw"] path[data-draw]{stroke-dasharray:var(--len,400);transition:stroke-dashoffset var(--t-story) var(--ease)}
  .btn{transition:background var(--t-fast),transform var(--t-fast) var(--ease-snap)}
  .btn:not(.btn-try):hover{transform:translateY(-1px)}
  .art-hero:hover{filter:drop-shadow(8px 8px 0 rgba(23,35,46,.9))}
  .art-hero{transition:filter var(--t-base) var(--ease)}
}
@media (prefers-reduced-motion:reduce){[data-anim],[data-anim] *{transition:none!important;animation:none!important}}

/* ── the band: text on one side, its visual on the other, alternating; together on a phone (owner, 2026-09-29) ── */
.band{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"head visual" "body visual";column-gap:clamp(28px,6vw,88px);row-gap:18px;align-items:start;align-content:center}
.band-r{grid-template-areas:"head visual" "body visual"}
.band-l{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"visual head" "visual body"}
.band-wide{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body"}
.band-head{grid-area:head;align-self:end;display:grid;gap:12px}
.band-body{grid-area:body;align-self:start;display:grid;gap:18px}
.band-visual{grid-area:visual;align-self:center;position:relative}
.band-visual .art{max-width:520px;margin-inline:auto}
.band-visual .widget{margin:0}
.band-r .band-visual .art{transform-origin:center}
@media (max-width:860px){
  .band,.band-l,.band-r{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "body";row-gap:14px}
  .band-visual .art{max-width:min(100%,420px)}
  .band-head{align-self:start}
}

/* ── asks: hook, proof, ask. A reason why beside every button; a done-ask inside each widget; a sticky one on phones ── */
.ask{display:grid;gap:8px;justify-items:start;padding-top:6px}
.ask-why{font:600 15px/1.35 var(--sans);color:var(--ink2);max-width:34em}
.ask .cta{margin:0}
.widget-ask{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 16px;background:var(--paper-hi);border:1.5px dashed var(--ink);border-radius:10px}
.widget-ask p{font:600 17px/1.3 var(--sans);flex:1 1 220px}
.js-anim .widget-ask:not(.on){display:none}
@media (prefers-reduced-motion:no-preference){.widget-ask.on{animation:drop var(--t-base) var(--ease)}}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(251,250,246,.96);border-top:1.5px solid var(--ink);box-shadow:0 -8px 16px -14px rgba(23,35,46,.6)}
.sticky-cta .btn{width:100%}
@media (max-width:760px){.sticky-cta.on{display:block}body.has-sticky{padding-bottom:72px}}
@media (prefers-reduced-motion:no-preference){.sticky-cta.on{animation:rise-in var(--t-base) var(--ease)}}
@keyframes rise-in{from{transform:translateY(100%)}}

/* nothing may widen the page on a phone: an element waiting to be revealed (scaled or shifted) is clipped, not scrolled */
body{overflow-x:clip}

/* ── audit follow-ups (2026-09-29): Talk to us, actions in the Features panel, the checklist gallery, the featured card ── */
.nav-right{margin-left:0;flex:none}
.talk .dd-panel{left:auto;right:-20px;width:270px}
.talk-panel .mega-h{margin:4px 12px 6px}

.dd-panel a.btn{color:var(--paper-hi);display:inline-flex;padding:0 18px;min-height:44px}
.dd-panel a.btn.btn-quiet{color:var(--ink);background:transparent}
.dd-panel a.btn:hover{background:#2B3A47}
.dd-panel a.btn.btn-quiet:hover{background:rgba(23,35,46,.06)}

/* phones: the compare sheet slides sideways with a visible hint and a fade; the paper table stacks into cards */
.sheet-hint{display:none;font:600 13px var(--sans);color:var(--ink2)}
@media (max-width:760px){
  .sheet-hint{display:block}
  .sheet-wrap{position:relative;-webkit-overflow-scrolling:touch}
  .sheet{min-width:640px}
  .sheet tbody th[scope=row]{min-width:150px}
  .cmp{min-width:0!important}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr{display:block;width:100%}
  .cmp tr{padding:10px 12px;border-bottom:1.5px solid var(--ink)}
  .cmp tbody th[scope=row]{position:static;display:block;min-width:0;padding:4px 0 8px;font-size:17px;background:transparent}
  .cmp td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;border:0;padding:6px 0;font-size:15px}
  .cmp td::before{content:attr(data-label);font:700 12px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
  .cmp td.hl{background:rgba(242,193,78,.22);padding-inline:8px;margin-inline:-8px}
}

/* inline links in short paragraphs, captions and step panels: a 44px-high hit area without changing the text size */
.widget-caption a,.w-stepper a,.built-plans>*>p a,.band-body>p a,.band-body .lead a{display:inline-block;padding-block:10px}

/* inside a band the copy column is half the page: lists that were built for full width stack in one column */
.band:not(.band-wide) .triad{grid-template-columns:minmax(0,1fr)}
.band:not(.band-wide) .triad li+li{border-top:1px solid rgba(23,35,46,.3)}
.band:not(.band-wide) .rules{grid-template-columns:minmax(0,1fr)}
.band:not(.band-wide) .film,.band:not(.band-wide) .timeline{max-width:100%}
.chip{min-height:48px}
/* the opener's menu list scrolls: say so with a soft fade instead of cutting a row in half */
.opener-items{padding-bottom:14px;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}

/* phones: logo, the sign-up and the menu button must fit in one row (search lives in the menu on a phone) */
@media (max-width:560px){.masthead-in>.nav-util{display:none}}
@media (max-width:420px){.masthead-in{gap:8px}.masthead .logo{gap:4px}}

/* ── menus, rebuilt 2026-09-29 (Safari 26 on macOS looked crowded: 5 narrow columns, a header wider than its rule) ──
   One container: --wrap (styles.css) is the width of the header row, its rule and the page. Panels hang from the header
   row, centred, never wider than the viewport minus the gutters. A mega panel is at most 3 columns, each at least 260px
   (column-width + column-count: the browser drops to 2 columns by itself before a column gets narrower). Every item is
   an icon slot (.mi), a bold label and ONE line of description; a heading never wraps; a strip holds the two actions. */
:root{--mi-ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%234A3D2E' stroke-opacity='.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mi{display:block;flex:none;width:32px;height:32px;border-radius:9px;background:var(--mi-img,none) center/contain no-repeat,var(--mi-ph) center/16px no-repeat,rgba(23,35,46,.07)}
/* State icons (core states/icons.ts): the small mark in the state bar and the picker, the switcher in the header, the phone menu row. */
.mi-s{display:inline-block;vertical-align:middle;width:24px;height:24px;border-radius:7px;margin-inline-end:8px}
.state-bar .state-pick .mi-s{margin-inline-end:6px;margin-block:-4px 0}
.menu a.acc-link.state-row{justify-content:flex-start;text-align:left;gap:12px}
.state-row .mt{display:grid;gap:2px}.state-row .mt b{font:700 17px/1.2 var(--sans)}.state-row .mt span{font:500 13px/1.2 var(--sans);color:var(--ink2)}
.masthead-in{gap:clamp(6px,.7vw,10px)}
.nav{gap:clamp(10px,1.2vw,18px)}
.nav>.nav-a{white-space:nowrap}
.talk summary{white-space:nowrap}.talk-i{display:none}
.talk .dd-panel{left:auto;right:0;width:min(320px,calc(100vw - 2 * var(--gutter)))}
.dd-panel.mega{display:block;left:var(--gutter);right:var(--gutter);width:auto;max-width:1120px;margin-inline:auto;top:calc(100% + 6px);padding:20px 22px 0;overflow:visible}
.mega-cols{column-count:3;column-width:260px;column-gap:28px;-webkit-column-count:3;-webkit-column-gap:28px}
@media (min-width:1181px){.mega-cols .col-start{break-before:column;-webkit-column-break-before:always}.mega-cols>:first-child{break-before:auto}}
.mega-grp{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;padding-bottom:14px}
.mega-h{margin:0 10px 6px;white-space:nowrap;border:0;border-bottom:2.5px solid var(--c,var(--ink));border-image:none}
.dd-panel a:not(.btn):not(.mega-card):not(.mega-all){grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:center;min-height:48px;padding:6px 10px}
.mt{display:grid;gap:1px;min-width:0}
.mt b{font:600 15px/1.25 var(--sans);white-space:nowrap}
.mt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 13px/1.35 var(--sans);color:var(--ink2)}
.mega-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:6px -22px 0;padding:12px 22px;border-top:1px solid #E4E1D6;background:rgba(23,35,46,.04);border-radius:0 0 12.5px 12.5px}
.mega-all{display:grid;gap:1px;padding:4px 6px;border-radius:8px;text-decoration:none;color:var(--ink)}
.mega-all b{font:600 15px/1.25 var(--sans)}.mega-all span{font:400 13px/1.35 var(--sans);color:var(--ink2)}
.mega-cta{display:flex;flex-wrap:wrap;gap:10px}
.dd-panel a.btn{color:var(--paper-hi);display:inline-flex;align-items:center;justify-content:center;padding:0 18px;min-height:44px;white-space:nowrap}
.mega a.mega-card{display:grid;gap:6px;align-content:start;break-inside:avoid;-webkit-column-break-inside:avoid;padding:12px;background:var(--paper-hi);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);text-decoration:none}
.mega-card svg{width:100%;max-width:150px;height:auto;display:block}
.mega-card b{font:700 15px/1.2 var(--sans)}.mega-card span{font:400 13px/1.3 var(--sans);color:var(--ink2)}
.mega-card:hover{background:#F1F9FC}
@media (max-width:1180px){
  :root{--gutter:clamp(16px,3.4vw,40px)}
  .dd-panel.mega{max-width:800px}
  .mega-cols{column-count:2;-webkit-column-count:2}
}
/* With the full menu the button reads "25 days free →": the row is 1112 px wide at 1440 (the page's --wrap) and the long label
   does not fit beside five menus, Talk to us and Sign in. The words stay for screen readers. Below 1280 the menus hide and the
   long label has the room. "Talk to us" is always its words, in the menus' type: a phone icon alone read as unexplained. */
@media (min-width:1280px){.btn-try .long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:1279px){.nav-right{display:none}}
/* the row's gaps at full width: at 1440 the row is the page's 1112 px and the old 10/18 px gaps put the button 7 px past the rule */
@media (min-width:1280px){.masthead-in{gap:8px}.nav{gap:16px}}
@media (max-width:560px){.btn-try .long{display:none}.btn-try{margin-left:auto}}

/* ── the phone menu: a full-width sheet under the header; groups are accordions, one open at a time; Sign in and the
   sign-up stay pinned at the bottom; the page behind does not scroll ── */
.menu{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--mh-c) + 6px);bottom:0;z-index:39;pointer-events:auto;display:flex;flex-direction:column;padding:0;background:var(--card);border:0;border-top:1.5px solid var(--ink);border-radius:0;box-shadow:none;max-height:none;overflow:hidden;overscroll-behavior:contain}
.menu-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px var(--gutter) 20px}
.acc{border-bottom:1px solid #E4E1D6}
.menu .acc summary,.menu a.acc-link{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;font:600 19px/1.2 var(--sans);color:var(--ink);text-decoration:none;cursor:pointer;list-style:none;border-bottom:1px solid #E4E1D6}
.menu .acc summary{border-bottom:0}
.menu .acc summary::-webkit-details-marker{display:none}
.menu .acc summary::after{content:"";width:9px;height:9px;margin-right:6px;border-right:2.5px solid;border-bottom:2.5px solid;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.menu .acc[open] summary::after{transform:translateY(2px) rotate(225deg)}
.menu .acc-body{padding:0 0 10px}
.menu .menu-h{margin:12px 4px 2px;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.menu .acc-body a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 4px;font:600 17px/1.2 var(--sans);text-decoration:none;color:var(--ink);border-bottom:0}
.menu .acc-body a:active,.menu a.acc-link:active{background:rgba(23,35,46,.07)}
.menu-phone{margin-top:14px}
.menu-foot{flex:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:10px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1.5px solid var(--ink)}
.menu-foot .btn{margin:0;min-height:52px;justify-content:center;white-space:nowrap;text-align:center;font-size:16px;padding-inline:12px}
@media (prefers-reduced-motion:no-preference){.menu:not([hidden]){animation:drop .22s cubic-bezier(.2,.8,.2,1)}}
html.menu-lock,html.menu-lock body{overflow:hidden;overscroll-behavior:none}
/* Story loops (Gemini + Veo clips, media/loops/*). A paper-framed 16:9 window: explicit aspect-ratio, so no layout shift;
   the poster (a webp of the first frame) shows before load, with reduced motion, and if video fails. loops.js plays them only on screen. */
.loop{margin:0;aspect-ratio:16/9;width:100%;max-width:560px;margin-inline:auto;background:#F3F1EA;border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative}
.loop-v{display:block;width:100%;height:100%;object-fit:cover;background:#F3F1EA;pointer-events:none}
.loop-beside{max-width:100%}
.loop-tall{aspect-ratio:4/3}
.rules .prove{font-size:16px;color:var(--ink);margin-top:2px}.rules .prove b{font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--water-deep);margin-right:6px}
.band-visual .loop{max-width:520px}
/* The hero scenery: the clip's cream ground is lighter than the page, so "darken" leaves only the ink and colors. */
.hero-scene{position:absolute;left:0;bottom:-3.5%;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;mix-blend-mode:darken;pointer-events:none;z-index:0;clip-path:inset(69.5% 0 0 0)}
.hero-chop .wave{z-index:1}

/* Icons (site/icons/*.svg): a flat 64-unit vector family, crisp from 28px to 64px. Decorative; the label beside them says the same. */
.ic{display:inline-block;flex:none;width:40px;height:40px;vertical-align:middle}
.tiles.idx a:has(.ic-tile){grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.tiles.idx .ic-tile{grid-row:1 / span 2;width:44px;height:44px}
.ic-kicker{width:28px;height:28px;margin-right:8px;vertical-align:-8px}

/* The checklist email ask (lead-gate.js; core leads.ts): a small dialog over the page. It reuses the opener's card and field styles. */
.lead-dialog{border:0;padding:0;background:transparent;color:var(--ink);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto}
.lead-dialog::backdrop{background:rgba(42,33,24,.55)}
.lead-form[hidden],.lead-done[hidden],.lead-err[hidden],.lead-done-note[hidden]{display:none}
.lead-h{margin:0;font-size:clamp(24px,5vw,30px);line-height:1.1}
.lead-sub,.lead-done-note,.lead-done-open{margin:0;font:400 16px/1.4 var(--sans);color:var(--ink2)}
.lead-form input[type=email],.lead-form input[type=text]{width:100%;min-width:0;min-height:48px;font:400 17px var(--sans);padding:0 10px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.lead-form .chk span{font:400 15px/1.3 var(--sans)}
.lead-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.lead-err{margin:0;font:600 15px/1.3 var(--sans);color:var(--t-orange)}
.lead-actions{display:flex;flex-wrap:wrap;gap:12px}
.lead-fine{margin:0}
.lead-done{display:grid;gap:14px;padding:20px;background:var(--card);border:1.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
.lead-done-open a{color:var(--ink);font-weight:700}

/* ── chat (chat.js): our own button; Crisp loads only after a click. Under the sticky sign-up bar (z 35), and above it on phones
   while that bar is showing (the bar is 72px tall plus the phone's safe area) ── */
.chat-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:34;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper-hi);color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none;box-shadow:0 8px 18px -10px rgba(23,35,46,.55);cursor:pointer}
.chat-fab svg{color:var(--water);flex:none}
.chat-fab:hover{background:var(--water-tint)}
.chat-fab[hidden]{display:none}
@media (max-width:760px){body.has-sticky .chat-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:no-preference){.chat-fab{transition:bottom var(--t-base) var(--ease)}}
@media print{.chat-fab{display:none}}

/* The state grid on /states/: one tile per state we do not cover yet (the plain icon, the name, one line). */
.prose-body:has(.state-grid){max-width:none}
.prose-body ul.state-grid,.state-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.state-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:56px;padding:10px 12px;border:1.5px solid rgba(23,35,46,.14);border-radius:12px;background:var(--paper-hi,#fff);color:var(--ink);text-decoration:none}
.state-tile .mi{grid-row:1/3;width:32px;height:32px;margin:0}
.prose-body .state-tile{font-weight:400}.state-tile b{font:700 15px/1.25 var(--sans)}
.state-tile span:last-child{white-space:nowrap;font:500 12.5px/1.3 var(--sans);color:var(--ink2)}
.state-tile:hover,.state-tile:focus-visible{border-color:var(--ink);background:var(--paper-2,#f4f2ea)}

/* ── the home pages' rule cards (pages-src/rulecards.ts): the law wall opener, then one IKEA card per rule ──
   The wall is real, labeled text in tiny type that scrolls (transform and filter only) while the clipboard loop beside it runs;
   "Read the actual rules" (a labeled checkbox, :has) shows the same text at reading size and stops the motion. Reduced motion, no-JS and
   Save-Data: the wall stands still at its top, the cards and their steps show at once. No height changes while it plays. */
.law-opener{display:grid;gap:clamp(18px,3vw,36px);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;margin-bottom:clamp(22px,3vw,34px)}
.law-opener .loop{max-width:520px;width:100%}
@media (max-width:860px){.law-opener{grid-template-columns:minmax(0,1fr)}.law-opener .loop{display:none}}
.law-q{font:700 clamp(22px,2.4vw,30px)/1.15 var(--serif);margin:0 0 10px;color:var(--ink)}
.law-wall{position:relative;height:clamp(170px,26vh,240px);overflow:hidden;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--paper-hi);padding:10px 14px;font:400 9pt/1.35 var(--sans);color:var(--ink2);text-align:left}
.law-wall h4{font:700 9pt/1.3 var(--sans);margin:8px 0 2px;color:var(--ink)}
.law-wall p{margin:0 0 6px;font-size:inherit;line-height:inherit;color:inherit}
.law-wall .law-src{font-size:8pt;font-weight:600;color:var(--water-deep)}
.law-wall::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to bottom,transparent,var(--paper-hi));pointer-events:none}
.law-scroll{animation:law-scroll var(--law-T,18s) linear infinite;animation-play-state:paused;will-change:transform}
.band-proof:has(.lsvg.running) .law-scroll{animation-play-state:running}
@keyframes law-scroll{0%{transform:translateY(0);filter:blur(0);opacity:1}68%{transform:translateY(-64%);filter:blur(0);opacity:1}82%,100%{transform:translateY(-72%);filter:blur(3px);opacity:.3}}
.law-stop{font:800 clamp(28px,3.4vw,42px)/1.05 var(--serif);letter-spacing:-.01em;margin:16px 0 10px;color:var(--ink)}
.law-stop b{color:var(--water-deep)}
.law-read{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.law-read input{width:20px;height:20px;margin:0;accent-color:var(--water-deep)}
.law-opener:has(.law-read input:checked) .law-wall{height:auto;max-height:70vh;overflow:auto;font-size:16px;line-height:1.5}
.law-opener:has(.law-read input:checked) .law-wall h4{font-size:16px;margin-top:14px}
.law-opener:has(.law-read input:checked) .law-wall .law-src{font-size:13px}
.law-opener:has(.law-read input:checked) .law-scroll{animation:none}
.law-opener:has(.law-read input:checked) .law-wall::after{display:none}
@media (prefers-reduced-motion:reduce){.law-scroll{animation:none!important}.law-wall{font-size:11pt}}
.rulecards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(3,minmax(0,1fr))}
.rulecard{display:grid;gap:8px;align-content:start;padding:18px 18px 16px;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.rulecard .art-card{max-width:150px;margin:0 0 4px}
.rulecard h3{font:700 clamp(21px,1.8vw,24px)/1.15 var(--serif);margin:0}
.rulecard .rulecard-law{font-size:16px;color:var(--ink2);margin:0}
.rulecard .ikea{margin:4px 0 0;padding:0;list-style:none;counter-reset:ikea;display:grid;gap:8px}
.rulecard .ikea li{counter-increment:ikea;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;font-size:17px;line-height:1.35;color:var(--ink)}
.rulecard .ikea li::before{content:counter(ikea);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);font:800 16px/1 var(--sans);color:var(--ink);background:var(--paper-hi)}
.rulecard .prove{font-size:16px;color:var(--ink);margin:6px 0 0;padding:10px 12px;border-radius:10px;background:var(--paper-hi)}
.rulecard .prove b{font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--water-deep);margin-right:6px}
.rulecard .cite{margin:4px 0 0}
.rulecard>a{font:600 15px var(--sans);display:inline-block;padding-block:10px;justify-self:start}
.rulecard .more.local{font-size:15px}
.band-rulecards .band-body .sheet-hint{margin:0 0 8px}
@media (max-width:760px){
  .rulecards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86vw,340px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
  .rulecard{scroll-snap-align:start}
}
/* micro motion: the card enters (kit.js adds .in), its steps tick in one after another, the win line pops; the final state whenever motion is reduced */
.js-anim .rulecard:not(.in) .ikea li{opacity:0;transform:translateX(-8px)}
.js-anim .rulecard:not(.in) .prove{opacity:0;transform:scale(.96)}
.rulecard .ikea li,.rulecard .prove{transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease-snap)}
.rulecard .ikea li:nth-child(2){transition-delay:120ms}.rulecard .ikea li:nth-child(3){transition-delay:240ms}.rulecard .prove{transition-delay:380ms}
/* The Florida home's county list (florida-home.ts): a compact grid of links inside a tick item, no ticks of its own */
.county-links{list-style:none;margin:.75em 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5em,1fr));gap:.35em 1em;font-size:.92em}
.ticks .county-links li{padding-left:0;color:inherit}.ticks .county-links li::before{content:none}
.fl-counties summary,.tx-areas summary{cursor:pointer;font-weight:700;color:var(--ink)}
/* The Texas home's department list (texas-home.ts): each row names its department, so wider cells; the live one carries a tag */
.county-links.tx-area-links{grid-template-columns:repeat(auto-fill,minmax(17em,1fr));gap:.5em 1.25em}
.tx-area-links .tag{margin-left:.35em;font-size:12px;padding:1px 7px;vertical-align:1px}
.tx-area-links .fine{display:block}
select{min-height:44px;height:44px}

/* layout audit 2026-10-10 (test/layout-fit.test.ts): */
/* 44 px targets; links inside a sentence keep the line's height (WCAG 2.5.8 inline exception) */
.crumbs a,.masthead .logo{min-width:44px}
.ref-rail a{min-height:44px}
:where(main) :where(li:not(.card,.hc),td)>a:only-child:not(.btn),:where(main) blockquote>footer>a:first-child{display:inline-flex;align-items:center;min-height:44px}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=hidden]),select,textarea){font:400 16px/1.3 var(--sans);min-height:44px;padding:0 10px;border:1.5px solid var(--ink2);border-radius:8px;background:var(--paper-hi);color:var(--ink);max-width:100%}
:where(textarea){padding:8px 10px}
/* the state line's "Texas?" ask, held before state-pick.js writes it (render.ts STATE_BAR_HOLD) */
.state-bar.will-ask .state-ask:empty{display:flex;min-height:44px;min-width:min(100%,240px)}
/* "According to CleanCleaver.com" + Cite this (pages-src/license.ts citeBlock; the server's live data blocks) */
.cite-us{font:500 13px/1.5 var(--sans);color:var(--water-deep);margin:.5em 0 0;overflow-wrap:anywhere}
.btn-cite{font:600 13px/1 var(--sans);min-height:44px;padding:0 14px;margin-left:.35em;border:1px solid currentColor;border-radius:999px;background:transparent;color:var(--water-deep);cursor:pointer;vertical-align:middle}
.btn-cite:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.cite-copy{display:block;width:100%;margin-top:.5em;font:13px/1.4 var(--sans)}
/* Live data blocks (services/api/src/livedata/render.ts): counts only, never a business */
.live-data{margin:1.5em 0;padding:1em 1.25em;border:1px solid var(--water-tint);border-radius:14px;background:var(--water-tint)}
.live-codes{padding-left:1.4em}.live-codes li{margin:.5em 0}.live-code,.live-range{font-size:.9em;color:var(--water-deep)}
.live-kinds{border-collapse:collapse;margin:.75em 0;width:100%;max-width:32em}.live-kinds th,.live-kinds td{text-align:left;padding:.3em .5em;border-bottom:1px solid rgba(0,0,0,.08)}
.live-kinds caption{text-align:left;font-weight:600;padding:.25em 0}

/* The site search's switch, [CleanCleaver] | [Restaurant lookup] (owner, 2026-10-16): the dialog's tabs (site/search.js) and the links on /find/.
   One selection pill slides between the two (the bar's own motion); none under Reduce Motion. Both share one view-transition name. */
.lk-tog{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border:1px solid var(--hair);border-radius:999px;background:var(--paper-hi);box-shadow:0 1px 2px rgba(23,35,46,.06)}
.lk-tog-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);transition:transform 200ms var(--ease)}
.lk-tog-a,.lk-tog [role=tab]{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;font:600 15px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color 200ms var(--ease)}
.lk-tog-a[aria-current=page],.lk-tog [aria-selected=true]{color:#fff}
.lk-tog:has(.lk-tog-a[aria-current=page]:last-child) .lk-tog-pill,.lk-tog.is-find .lk-tog-pill{transform:translateX(100%)}
.lk-tog.is-site .lk-tog-pill{transform:none}
.lk-tog.is-site .lk-tog-a[aria-current=page]{color:var(--ink)}.lk-tog.is-site .lk-tog-a:first-of-type{color:#fff}
.lk-tog-a:focus-visible,.lk-tog [role=tab]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){.lk-tog-pill,.lk-tog-a,.lk-tog [role=tab]{transition:none!important}}
html[data-motion=off] :is(.lk-tog-pill,.lk-tog-a,.lk-tog [role=tab]){transition:none!important}
.search-top{display:flex;justify-content:center;padding:12px 12px 0}
dialog.search.is-find{width:min(880px,calc(100vw - 24px))}
dialog.search .search-panel{transition:opacity 120ms var(--ease)}
dialog.search.lk-fade .search-panel{opacity:0;transition:none}
[data-search-find]{padding:12px}
::view-transition-group(cc-search){animation-duration:280ms;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){dialog.search .search-panel{transition:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
@media (max-width:480px){.lk-tog [role=tab]{padding:0 14px;font-size:14.5px}}
/* Room for the Restaurant Lookup pill (styles.css) on the one-line header, measured in header-fits.test.ts: a little less air. */
@media (min-width:1280px){.masthead-in{gap:4px}.nav{gap:8px}.lk-cta{gap:6px;padding:0 12px}.lk-cta-ic{width:16px;height:16px}}
@media (max-width:420px){.masthead-in{gap:4px}}
@media (max-width:360px){.lk-tog-a,.lk-tog [role=tab]{padding:0 11px;font-size:13.5px}}