/* benchlight.dev pages, October 29, 2026: the shared header and footer, the home chooser and samples, pricing,
   the redesign preview page, trade pages and examples. Loaded last (public-shell.mjs), after the refresh styles. */
/* One rhythm (8px family), fewer box styles. */

/* Full screen: the page, header and footer run edge to edge with side padding (owner rule, Oct 27). */
body.public-site main,body.public-site .site-header,body.public-site .site-footer{max-width:none}

/* Header: Start free is the one filled button; Log in is a quiet link (in the menu on phones). */
body.public-site header.site-header .login-link.mk-login{background:transparent;border:0;color:var(--ink);padding:9px 4px;font-weight:600;border-radius:0}
body.public-site header.site-header .login-link.mk-login:hover{background:transparent;color:var(--accent-dark);text-decoration:underline}
body.public-site header.site-header .mk-start{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border-radius:999px;background:var(--accent);color:#fff;font-weight:650;line-height:1.4;white-space:nowrap;text-decoration:none;flex-shrink:0}
body.public-site header.site-header .mk-start:hover{background:var(--accent-dark)}
body.public-site header.site-header .mobile-menu nav a.mk-menu-login{display:none}
/* A window narrower than the logo (a 320px phone at 200% zoom): the wordmark moves under the lamp, both at full size. */
body.public-site header.site-header>.brand{flex-wrap:wrap;flex-shrink:1;min-width:0}
@media (max-width:700px){
  body.public-site header.site-header .login-link.mk-login{display:none}
  body.public-site header.site-header .mk-start{padding:9px 14px}
  body.public-site header.site-header .mobile-menu nav a.mk-menu-login{display:flex;font-weight:650;border-top:1px solid var(--line);margin-top:8px}
}

/* Page openings: one plain H1, one lead, no eyebrow. */
.mk-intro{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line)}
.mk-intro .lead{margin:0}
@media (max-width:700px){.mk-intro{padding:var(--s4) 0}}

/* Plans: grouped by the visitor's situation, one card style, the done-for-you plan in ink. */
.mk-plan-group{padding:var(--s5) 0 var(--s4)}
.mk-plan-group+.mk-plan-group{padding-top:0}
body.public-site .mk-group-title{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 var(--s3)}
.mk-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:var(--s3)} /* line-break-ok: grid of plan cards */
.mk-plan{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:8px;min-width:0}
body.public-site .mk-plan h3{font-size:1.5rem;margin:0}
.mk-plan .mk-plan-job{margin:0;font-size:1.0625rem}
.mk-price{margin:0;font-size:1rem;color:var(--muted)}
.mk-price strong{font:700 2.75rem/1 var(--display);letter-spacing:-.035em;color:var(--ink);margin-right:4px}
.mk-price span{white-space:nowrap}
.mk-tag{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mk-ticks{list-style:none;margin:0;padding:var(--s2) 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.mk-ticks li{position:relative;padding-left:28px;line-height:1.5}
.mk-ticks li::before{content:"";position:absolute;left:3px;top:.42em;width:12px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.mk-plan .mk-plan-button{margin-top:auto;align-self:stretch}
.mk-plan-feature{background:var(--ink);border-color:var(--ink);color:var(--paper)}
body.public-site .mk-plan-feature h3,.mk-plan-feature .mk-price strong{color:var(--paper)}
.mk-plan-feature .mk-price{color:#c9d3dd}
.mk-plan-feature .mk-tag{color:var(--glow)}
.mk-plan-feature .mk-ticks{border-color:#ffffff2e}
.mk-plan-feature .mk-ticks li::before{border-color:var(--glow)}
@media (max-width:700px){.mk-plan{padding:var(--s3)}.mk-plan-group{padding:var(--s4) 0 var(--s3)}}

/* Good to know: short facts in two columns, no boxes. */
.mk-know{padding:var(--s5) 0;border-top:1px solid var(--line)}
body.public-site .mk-know h2{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 var(--s3)}
.mk-know-list{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s5)}
.mk-know-list li{margin:0}
.mk-know-list strong{color:var(--ink)}
.mk-know+.mk-closer{margin-top:0}
@media (max-width:800px){.mk-know-list{grid-template-columns:1fr}}
@media (max-width:700px){.mk-know{padding:var(--s4) 0}}

/* Secondary button: same size as the primary, outlined. */
body.public-site .button.mk-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
body.public-site .button.mk-ghost:hover{background:var(--ink);color:var(--paper)}

/* Home chooser: four jobs, grouped by situation, each one tap target with its price. */
.mk-choose{padding:var(--s6) 0 var(--s5);border-top:1px solid var(--line)}
.mk-choose-head,.mk-faq-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3);margin-bottom:var(--s4)}
body.public-site .mk-choose-head h2,body.public-site .mk-faq-head h2{margin:0}
.mk-choose-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.mk-choose-group{display:grid;gap:var(--s2);align-content:start}
body.public-site .mk-group-label{font:700 .8125rem/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
body.public-site .mk-option{display:grid;gap:var(--s1);padding:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
a.mk-option:hover{border-color:var(--accent);box-shadow:0 10px 28px #0b2d4b14}
.mk-option-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--s2)}
.mk-option-name{font:700 1.375rem/1.2 var(--display);letter-spacing:-.025em}
.mk-option-price{font-weight:700;color:var(--accent);white-space:nowrap}
.mk-option-text{color:var(--text)}
.mk-option-go{display:inline-flex;align-items:center;gap:var(--s1);margin-top:4px;font-weight:600;text-decoration:underline;text-underline-offset:.22em}
.mk-option-go svg{width:20px;height:20px;flex-shrink:0}
body.public-site .mk-option.mk-option-feature{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mk-option-feature .mk-option-text{color:#d5dde5}
.mk-option-feature .mk-option-price{color:var(--glow)}
a.mk-option-feature:hover{border-color:var(--glow)}
.mk-address{margin-top:var(--s1)}
.mk-address label{display:block;font-size:.9375rem;font-weight:600;margin-bottom:8px}
.mk-address>div{display:flex;flex-wrap:wrap;gap:var(--s1)}
.mk-address input{flex:1 1 12rem;min-width:0;min-height:48px;padding:12px;border:1px solid #7c8989;border-radius:4px;background:var(--paper);font:inherit}
.mk-address button{flex:0 0 auto}
@media (max-width:900px){.mk-choose-grid{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:700px){.mk-choose{padding:var(--s4) 0}.mk-choose-head,.mk-faq-head{margin-bottom:var(--s3)}.mk-address button{flex:1 1 100%}}

/* Questions: plain list, answers in the HTML for people, search engines and assistants alike. */
.mk-faq{padding:var(--s6) 0 var(--s5);border-top:1px solid var(--line)}
.mk-faq-list{border-top:1px solid var(--line)}
.mk-faq-list details{border-bottom:1px solid var(--line)}
.mk-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:48px;padding:var(--s2) 0;cursor:pointer;list-style:none;font:700 1.25rem/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.mk-faq-list summary::-webkit-details-marker{display:none}
.mk-faq-list summary::after{content:"";flex:0 0 12px;width:12px;height:12px;margin-right:6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.mk-faq-list details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.mk-faq-list details p{margin:0;padding:0 0 var(--s3);font-size:1.0625rem}
@media (max-width:700px){.mk-faq{padding:var(--s4) 0}.mk-faq-list summary{font-size:1.125rem}}

/* Closing strip: who we are, one action, a quiet way in for customers. */
.mk-trust{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3) var(--s5);padding:var(--s5);margin:var(--s3) 0 0;background:var(--wash);border-radius:8px}
body.public-site .mk-trust h2{font-size:2rem;margin:0 0 var(--s2)}
.mk-trust p{margin:0}
.mk-trust-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
@media (max-width:900px){.mk-trust{grid-template-columns:1fr;padding:var(--s4) var(--s3)}}
.mk-choose-note{margin:var(--s3) 0 0;font-size:1.0625rem}
.mk-choose-note a{font-weight:600}

/* Subpages: text sections stack (heading over full-width text) instead of a heading alone in a left column. */
.refresh-section{grid-template-columns:1fr!important;gap:var(--s2)!important}
body.public-site .refresh-section .section-label h2{margin:0}

/* Two-way ending on every sales page: this page's action first, the other route as a quiet link. */
.mk-end-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.mk-end-actions .text-link{min-height:44px}

/* Hosting plan list on the navy band. */
.mk-ticks.mk-ticks-dark{border-color:#ffffff2e;margin:var(--s2) 0 0}
.mk-ticks.mk-ticks-dark li::before{border-color:var(--glow)}

/* Address box in a page opening (redesign). */
.mk-address-hero{margin-top:var(--s3)}
.mk-address-hero>div{max-width:none}

/* Trade looks on /examples. */
.mk-trades{padding:var(--s5) 0;border-top:1px solid var(--line)}
body.public-site .mk-trades h2{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 var(--s1)}
.mk-trades>p{margin:0 0 var(--s3)}

/* Free-website upsell: same section rhythm, the price said plainly. */
body.public-site .mk-upsell h2 em{color:var(--accent)}

/* Questions are real headings (for people scanning, search engines and assistants), styled as before. */
body.public-site .refresh-faq summary h2,body.public-site .mk-faq-list summary h3{font:inherit;letter-spacing:inherit;color:inherit;margin:0;flex:1 1 auto;min-width:0}
.mk-updated{margin:var(--s2) 0 0;font-size:.875rem;color:var(--muted)}
.questions-intro+.mk-updated{margin:0 0 var(--s2)}
body.public-site .refresh-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);list-style:none}
body.public-site .refresh-faq summary::-webkit-details-marker{display:none}
body.public-site .refresh-faq summary::after{content:"";flex:0 0 12px;width:12px;height:12px;margin-right:6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
body.public-site .refresh-faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}

/* Measured spacing (owner rule: text never tight on a box): helper lines and the prompt box clear their buttons. */
body.public-site .bl-st-copy .actions+.bl-st-helper,body.public-site .illustrated-intro .actions+.bl-st-helper{margin-top:var(--s2)}
body.public-site .claude-demo-start .actions+details{margin-top:var(--s2)}
body.public-site .bl-st-price .button+.bl-st-helper{margin-top:var(--s2)}

/* Footer: four even columns on wide screens; on phones each group is a short wrapped row of links, not a long column. */
body.public-site footer.site-footer .footer-top{grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr))}
body.public-site footer.site-footer .footer-brand p{font-size:1.0625rem;line-height:1.5;margin:var(--s2) 0 var(--s1)}
@media (max-width:1000px){body.public-site footer.site-footer .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  body.public-site footer.site-footer{padding-top:var(--s4)}
  body.public-site footer.site-footer .footer-top{display:grid;grid-template-columns:1fr;gap:var(--s3);padding-bottom:var(--s3)}
  body.public-site footer.site-footer .footer-brand p{font-size:1rem;margin:var(--s1) 0 4px}
  body.public-site footer.site-footer .footer-top nav{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:var(--s3);row-gap:0;align-items:center;justify-content:flex-start}
  body.public-site footer.site-footer .footer-top nav h2{flex:0 0 100%;margin:0 0 2px;font-size:.8125rem;letter-spacing:.08em}
  body.public-site footer.site-footer .footer-top nav a{min-height:40px;font-size:.9375rem}
  body.public-site footer.site-footer .footer-bottom{gap:var(--s1);padding-top:var(--s2)}
}
.mk-quiet{margin:var(--s2) 0 0;font-size:.9375rem;color:var(--muted)}
.mk-quiet a{color:var(--ink);font-weight:600}

/* ---------- Redesign preview page (/request): one big address field, a live rebuild, the rest in place. ---------- */
.rx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:var(--s5) var(--s6);align-items:center;padding:var(--s6) 0 var(--s5)}
.rx-copy .lead{margin:0 0 var(--s4)}
.rx-form label,.rx-label{display:block;font-weight:600;margin:0 0 var(--s1)}
.rx-optional{font-weight:400;color:var(--muted);font-size:.875rem;margin-left:4px}
.rx-url{display:flex;align-items:center;gap:var(--s1);padding:6px 6px 6px var(--s2);background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:0 18px 40px #0b2d4b1f}
.rx-url:focus-within{outline:3px solid var(--accent);outline-offset:4px}
.rx-url-icon{width:22px;height:22px;flex:0 0 22px;color:var(--muted)}
body.public-site .rx-url input{flex:1 1 auto;min-width:0;min-height:54px;border:0;background:transparent;font:inherit;font-size:1.1875rem;color:var(--ink);padding:0 4px;outline:0}
body.public-site .rx-url .rx-next{flex:0 0 auto;min-height:54px;border-radius:10px;background:var(--accent);border-color:var(--accent);color:#fff;padding:0 var(--s3);text-align:center}
body.public-site .rx-url .rx-next:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.rx-field-error{margin:var(--s1) 0 0;color:#a3341b;font-weight:600}
.rx-promises{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);color:var(--muted);font-size:.9375rem}
.rx-promises li{display:inline-flex;align-items:center;gap:6px}
.rx-promises svg{width:18px;height:18px;color:var(--accent);flex:0 0 18px}
.rx-step-2{border:0;margin:var(--s4) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:grid;gap:var(--s3);min-width:0}
.rx-step-2:not(.is-open){display:none}
.rx-step-2.is-open{animation:rx-rise .45s ease both}
.rx-step-2 legend{float:left;width:100%;padding:0;margin:0;font:700 1.5rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.rx-step-2 legend+*{clear:both}
.rx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
body.public-site .rx-step-2 input:not([type=checkbox]),body.public-site .rx-step-2 textarea{width:100%;min-height:52px;padding:12px;border:1px solid #7c8989;border-radius:8px;background:var(--card);font:inherit;color:var(--ink)}
body.public-site .rx-step-2 textarea{min-height:96px;resize:vertical}
.rx-chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.rx-chips label{position:relative;margin:0;font-weight:600}
.rx-chips input{position:absolute;opacity:0;width:1px;height:1px}
.rx-chips span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #b9b0a2;border-radius:999px;background:var(--card);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.rx-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rx-chips input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.rx-referral summary{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.rx-referral[open] summary{margin-bottom:var(--s1)}
.rx-consent{display:grid!important;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-weight:400!important}
.rx-consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--accent)}
body.public-site .rx-send{justify-self:start}
.rx-fine{margin:0;font-size:.875rem;color:var(--muted)}
.rx-fine a{color:var(--ink)}
.rx-sent{margin-top:var(--s4);padding:var(--s4);background:var(--wash);border-radius:14px}
body.public-site .rx-sent h2{font-size:2rem;margin:0 0 var(--s2)}
.rx-sent p{margin:0 0 var(--s2)}
.rx-next-steps{margin:0 0 var(--s2);padding-left:1.4em;display:grid;gap:var(--s1)}
.rx-feedback:empty{display:none}

/* The stage: lamp, browser window, the light sweeping down, and what a redesign keeps. */
.rx-stage{position:relative;margin:0;padding-top:58px;min-width:0}
.rx-lamp{position:absolute;top:0;left:50%;width:120px;height:auto;transform:translateX(-50%);z-index:3}
.rx-cone{position:absolute;top:54px;left:50%;width:min(70%,520px);height:120px;transform:translateX(-50%);background:linear-gradient(to bottom,#f2b57e66,#f2b57e00);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:.0;z-index:2;pointer-events:none} /* line-break-ok: light cone graphic */
.rx-stage.is-playing .rx-cone{animation:rx-cone 3.2s ease both}
@keyframes rx-cone{0%{opacity:0}15%{opacity:1}70%{opacity:.85}100%{opacity:0}}
.rx-field{display:grid;gap:0;min-width:0}
.rx-window{position:relative;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 30px 60px #0b2d4b29}
.rx-chrome{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--wash);border-bottom:1px solid var(--line)}
.rx-chrome i{width:10px;height:10px;border-radius:50%;background:#d6cbb8;flex:0 0 10px}
.rx-address{margin-left:10px;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--card);border:1px solid var(--line);border-radius:999px;font-size:.8125rem;color:var(--text);white-space:nowrap;overflow:hidden}
.rx-address svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
.rx-address span{overflow:hidden;text-overflow:ellipsis}
.rx-screen{position:relative;aspect-ratio:1200/855;overflow:hidden;background:#e9e4da}
.rx-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.rx-beam{position:absolute;inset:0;transform:translateY(-100%);opacity:0;pointer-events:none;background:linear-gradient(to bottom,transparent 70%,#f2b57e33 96%,transparent)}
.rx-beam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--glow);box-shadow:0 0 22px 6px #f2b57eaa}
.rx-kept{position:absolute;left:-26px;bottom:62px;list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);z-index:2}
.rx-kept li{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 24px #0b2d4b1f;font-weight:600;font-size:.875rem;color:var(--ink)}
.rx-kept svg{width:16px;height:16px;flex:0 0 16px;color:var(--accent)}
.rx-stage figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2);margin-top:var(--s2);font-size:.875rem;color:var(--muted)}
body.public-site .rx-replay{min-height:44px;padding:0;background:transparent;border:0;color:var(--ink);font-size:.875rem;font-weight:600;text-decoration:underline;text-underline-offset:.22em}
body.public-site .rx-replay svg{width:16px;height:16px}
.rx-stage.is-playing .rx-bulb{animation:rx-bulb 3.2s ease both}
.rx-stage.is-playing .rx-after{animation:rx-reveal 2.3s cubic-bezier(.55,.05,.3,1) .45s both}
.rx-stage.is-playing .rx-beam{animation:rx-beam 2.3s cubic-bezier(.55,.05,.3,1) .45s both}
.rx-stage.is-playing .rx-kept li{animation:rx-chip .5s ease both}
.rx-stage.is-playing .rx-kept li:nth-child(1){animation-delay:1.1s}
.rx-stage.is-playing .rx-kept li:nth-child(2){animation-delay:1.4s}
.rx-stage.is-playing .rx-kept li:nth-child(3){animation-delay:1.7s}
.rx-stage.is-playing .rx-kept li:nth-child(4){animation-delay:2s}
@keyframes rx-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rx-beam{0%{transform:translateY(-100%);opacity:1}90%{opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes rx-chip{from{opacity:0;transform:translateX(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rx-bulb{0%{opacity:.25}12%,100%{opacity:1}}
@keyframes rx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* How it works + questions under the hero. */
.rx-how{padding:var(--s6) 0 var(--s5);border-top:1px solid var(--line)}
body.public-site .rx-how h2,body.public-site .rx-faq h2{margin:0 0 var(--s4)}
.rx-how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.rx-how-list svg{display:block;width:48px;height:48px;color:var(--ink);margin-bottom:var(--s2)}
body.public-site .rx-how-list h3{font-size:1.375rem;margin:0 0 var(--s1)}
.rx-how-list p{margin:0}
.rx-faq{padding:var(--s5) 0;border-top:1px solid var(--line)}

@media (max-width:1000px){
  .rx-hero{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) 0}
  .rx-kept{position:static;display:flex;flex-wrap:wrap;margin-top:var(--s2)}
  .rx-stage{padding-top:50px}
  .rx-lamp{width:104px}
  .rx-cone{top:46px}
}
@media (max-width:800px){.rx-how-list{grid-template-columns:1fr;gap:var(--s3)}.rx-how{padding:var(--s4) 0}}
@media (max-width:600px){
  .rx-url{flex-wrap:wrap;padding:6px}
  .rx-url-icon{margin-left:10px}
  body.public-site .rx-url input{flex:1 1 calc(100% - 40px)}
  body.public-site .rx-url .rx-next{flex:1 1 100%;justify-content:center}
  .rx-pair{grid-template-columns:1fr}
  body.public-site .rx-send{justify-self:stretch}
  .rx-sent{padding:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  .rx-stage.is-playing *{animation:none!important}
  .rx-step-2.is-open{animation:none}
}

/* ---------- Trade pages: free website first, the full website as a real before and after. ---------- */
.mk-trade-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s5) var(--s6);align-items:center;padding:var(--s6) 0 var(--s5)}
.mk-trade-copy .lead{margin:0}
.mk-trade-copy .actions{margin-top:var(--s4)}
.mk-trade-note{margin:var(--s2) 0 0;font-size:.9375rem;color:var(--muted)}
.mk-trade-shot{margin:0;min-width:0}
.mk-trade-shot figcaption{margin-top:var(--s2);font-size:.875rem;color:var(--muted)}
.mk-trade-section{padding:var(--s5) 0;border-top:1px solid var(--line)}
body.public-site .mk-trade-section>h2{margin:0 0 var(--s4)}
.mk-needs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s5)}
.mk-needs li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s2);align-items:start}
.mk-needs svg{width:24px;height:24px;color:var(--accent);margin-top:2px}
body.public-site .mk-needs h3{font-size:1.1875rem;margin:0 0 6px}
.mk-needs p{margin:0}
.mk-trade-start{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s4) var(--s6);align-items:start}
body.public-site .mk-trade-start h2{margin:0 0 var(--s2)}
.mk-trade-start-copy p{margin:0 0 var(--s2)}
.mk-starter{display:grid;gap:var(--s1);padding:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:12px}
.mk-starter label{font-weight:600;margin:var(--s1) 0 0}
.mk-starter label:first-child{margin-top:0}
body.public-site .mk-starter button{margin-top:var(--s2);justify-self:start}
.mk-starter .small{margin:var(--s1) 0 0}
.mk-trade-built{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s4) var(--s6);align-items:center}
body.public-site .mk-trade-built h2{margin:0 0 var(--s3)}
.mk-built-copy .mk-ticks{border-top:0;padding-top:0;margin:0 0 var(--s4)}
.mk-ba{margin:0;min-width:0}
.mk-ba-pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s2);align-items:end}
.mk-ba-item{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 32px #0b2d4b1c;background:var(--card)}
.mk-ba-item img{display:block;width:100%;height:auto}
.mk-ba-item span{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:#ffffffe8;color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mk-ba-after span{background:var(--ink);color:var(--paper)}
.mk-ba figcaption{margin-top:var(--s2);font-size:.875rem;color:var(--muted)}
.mk-ba figcaption a{color:var(--ink);font-weight:600}
.mk-trade-faq .mk-faq-list{margin-top:0}
.mk-trade-others{padding:var(--s4) 0 0}
body.public-site .mk-trade-others h2{font-size:1.25rem;margin:0 0 var(--s2)}
.mk-trade-others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px var(--s3)}
.mk-trade-others a{display:inline-flex;align-items:center;min-height:40px;font-weight:600}

/* Examples gallery: twelve rebuilt samples, the old site as a small picture in the corner. */
.mk-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);padding:var(--s5) 0}
.mk-sample-card{display:grid;gap:var(--s2);min-width:0}
.mk-sample-media{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 36px #0b2d4b1f;transition:transform .2s,box-shadow .2s}
a.mk-sample-media:hover{transform:translateY(-3px);box-shadow:0 22px 44px #0b2d4b29}
.mk-sample-media>img{display:block;width:100%;height:auto}
.mk-sample-before{position:absolute;right:10px;bottom:10px;width:34%;border-radius:8px;overflow:hidden;border:2px solid #fff;box-shadow:0 8px 20px #0b2d4b40;background:#fff}
.mk-sample-before img{display:block;width:100%;height:auto}
.mk-sample-before span{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:999px;background:#ffffffe8;color:var(--ink);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mk-sample-text p{margin:0}
.mk-sample-trade{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body.public-site .mk-sample-text h3{font-size:1.375rem;margin:4px 0 4px}
.mk-sample-text a{font-weight:600}

@media (max-width:1000px){
  .mk-trade-hero,.mk-trade-start,.mk-trade-built{grid-template-columns:1fr;gap:var(--s4)}
  .mk-trade-hero{padding:var(--s4) 0}
  .mk-needs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-samples{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mk-needs{grid-template-columns:1fr;gap:var(--s3)}
  .mk-samples{grid-template-columns:1fr}
  .mk-trade-section{padding:var(--s4) 0}
  .mk-starter{padding:var(--s3)}
  body.public-site .mk-starter button{justify-self:stretch}
}

/* Home: a row of real builder samples (scrolls sideways on phones, snapping card by card). */
.mk-strip{padding:var(--s5) 0;border-top:1px solid var(--line)}
.mk-strip-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.mk-strip-card{display:grid;gap:var(--s1);color:var(--ink);text-decoration:none;min-width:0}
.mk-strip-card img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 14px 30px #0b2d4b1c;transition:transform .2s,box-shadow .2s}
.mk-strip-card:hover img{transform:translateY(-3px);box-shadow:0 20px 40px #0b2d4b29}
.mk-strip-card span{display:grid;font-size:.875rem;color:var(--muted)}
.mk-strip-card strong{font-size:1rem;color:var(--ink)}
.mk-strip-note{margin:var(--s3) 0 0;font-size:.875rem;color:var(--muted)}
@media (max-width:900px){
  .mk-strip-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s1);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .mk-strip-card{scroll-snap-align:start}
}
@media (max-width:700px){.mk-strip{padding:var(--s4) 0}}
/* Footer trades: two short columns on wide screens. */
@media (min-width:701px){body.public-site footer.site-footer .footer-top nav.mk-foot-trades{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(6em,calc(50% - 12px))),1fr));column-gap:var(--s3)}body.public-site footer.site-footer .footer-top nav.mk-foot-trades h2{grid-column:1/-1}}
.mk-trade-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--s1) var(--s3)} /* line-break-ok: grid of trade links */

/* See yours: the real free website inside the phone, drawn at 390px and scaled to the frame. */
.sy .see-phone.sy-phone{padding:0}
/* The See yours button keeps its 160px only where the form is that wide (not a 320px phone at 200% zoom), and a label
   that wraps there splits evenly ("What do / you do?"), never leaving one word. */
body.public-site .see-form button{min-width:min(160px,100%)}
body.public-site .see-form label{text-wrap:balance}
.sy-screen{position:relative;height:560px;overflow:hidden;background:#fff;--k:.78}
.sy-screen iframe{position:absolute;left:0;top:0;width:390px;height:calc(560px / var(--k));border:0;transform:scale(var(--k));transform-origin:top left;pointer-events:none;background:#fff}
/* The scale also comes from the screen's own width in CSS, so it is right on the first frame and after any later
   layout change. see-yours.mjs measures only once and on window resize, and on iPhones a measurement taken before
   the layout settled left the site wider than the phone, cut off at the right edge. */
@supports (width:calc(1px * tan(atan2(1px,1px)))) and (width:1cqw){
 .sy-screen{container-type:inline-size}
 .sy-screen iframe{--fit:min(1,tan(atan2(100cqw,390px)));height:calc(560px / var(--fit));transform:scale(var(--fit))}
}
.sy-sweep{position:absolute;inset:0;transform:translateY(-100%);opacity:0;pointer-events:none;background:linear-gradient(to bottom,transparent 60%,#f2b57e55 94%,transparent)}
.sy-sweep::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--glow);box-shadow:0 0 22px 6px #f2b57eaa}
.sy-screen.is-sweeping .sy-sweep{animation:rx-beam 1.6s cubic-bezier(.55,.05,.3,1) both}
.sy-caption{margin:var(--s2) 0 0;font-size:.875rem;color:var(--muted);text-align:center}
.sy .see-result.sy-result{display:grid;justify-items:center;gap:var(--s2);width:auto;margin:var(--s3) 0 0;text-align:center}
.sy .see-result.sy-result[hidden]{display:none}
.sy-result p{margin:0;font-weight:600;color:var(--ink)}
.sy-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s3)}
.sy-on .see-fallback{display:none}
@media (max-width:700px){.sy-screen{height:500px}}
/* The same address field everywhere: a smaller one inside the home chooser card. */
.mk-address .rx-url{box-shadow:none}
.rx-url.rx-url-sm{border-width:1.5px;border-radius:12px}
body.public-site .rx-url.rx-url-sm input{min-height:46px;font-size:1.0625rem}
body.public-site .rx-url.rx-url-sm .rx-next{min-height:46px;padding:0 var(--s2)}
.mk-address>div.rx-url{display:flex}
/* Address fields keep the icon, field and button on one line (they stack only on phones). */
body.public-site .mk-address .rx-url{flex-wrap:nowrap;max-width:44rem} /* line-break-ok: web-address form control */
body.public-site .mk-address .rx-url input{width:auto;flex:1 1 auto;border:0;min-height:52px;padding:0 4px;background:transparent}
@media (max-width:600px){body.public-site .mk-address .rx-url{flex-wrap:wrap}body.public-site .mk-address .rx-url input{flex:1 1 calc(100% - 40px)}body.public-site .mk-address .rx-url .rx-next{flex:1 1 100%}}

/* Home opening: the category label shows at every width, so phones also read what Benchlight is. */
body.public-site .opening-copy .eyebrow{display:block;color:var(--muted)}
/* Measured spacing: captions clear the picture above them. */
.mk-strip-card{gap:var(--s2)}
body.public-site .sy .sy-caption{margin:var(--s2) 0 0}

/* Review fixes. Words that must stay whole (addresses, product names). */
.mk-keep{display:inline-block}
/* URL page: optional details fold away; the error sits clear of the field in a real error red. */
.rx-more{border:1px solid var(--line);border-radius:10px;padding:0 var(--s3);background:var(--card)}
.rx-more summary{display:flex;align-items:center;gap:8px;min-height:52px;font-weight:600;cursor:pointer;list-style:none}
.rx-more summary::-webkit-details-marker{display:none}
.rx-more summary::after{content:"";width:10px;height:10px;margin-left:auto;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.rx-more[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.rx-more[open]{padding-bottom:var(--s3)}
.rx-more[open]>.rx-field+.rx-field{margin-top:var(--s3)}
.rx-field-error{display:flex;align-items:center;gap:8px;margin:var(--s2) 0 0;color:#b42318}
.rx-field-error svg{width:18px;height:18px;flex:0 0 18px}
.rx-sample-pill{position:absolute;right:12px;top:12px;z-index:3;padding:4px 10px;border-radius:999px;background:#ffffffeb;color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* Home: on phones the promise and buttons come first, the lit sample right after. */
@media (max-width:700px){body.public-site .opening .opening-copy{order:-1}body.public-site .opening{display:flex;flex-direction:column}}
/* Lines under cards and buttons keep a clear gap. */
.mk-choose-note{margin-top:var(--s4)}
/* Footer on phones: one link to the trades instead of twelve; two short columns for the rest. */
body.public-site footer.site-footer .footer-top nav a.mk-foot-trades-link{display:none}
@media (max-width:700px){
  body.public-site footer.site-footer .footer-top nav.mk-foot-trades{display:none}
  body.public-site footer.site-footer .footer-top nav a.mk-foot-trades-link{display:flex;align-items:center;font-weight:600}
  body.public-site footer.site-footer .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3)}
  body.public-site footer.site-footer .footer-brand{grid-column:1/-1}
  body.public-site footer.site-footer .footer-top nav{display:grid;grid-template-columns:1fr;row-gap:0}
  body.public-site footer.site-footer .footer-top nav a{min-height:36px}
}
/* Trade pages: label which picture is free and which is built for you. */
.mk-pill{position:absolute;left:12px;top:12px;z-index:2;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mk-built-shot{margin:0;min-width:0}
.mk-built-shot .mk-ba-item{display:block}
.mk-built-shot figcaption{margin-top:var(--s2);font-size:.875rem;color:var(--muted)}
.mk-built-shot figcaption a{color:var(--ink);font-weight:600}
.mk-end .mk-quiet{margin-top:var(--s2)}

/* ---------- Review batch 2 ---------- */
/* One button family: the header button matches page buttons; "More" is a quiet text link. */
body.public-site header.site-header .mk-start{border-radius:4px}
body.public-site header.site-header .mobile-menu>summary{border:0;background:transparent;padding-inline:4px}
@media (max-width:700px){body.public-site header.site-header .mobile-menu>summary{border:1px solid var(--line);border-radius:999px}}
/* Outlined buttons on light cards; the featured plan keeps the filled one. */
.mk-plan .button.mk-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.mk-plan .button.mk-ghost:hover{background:var(--ink);color:var(--paper)}
/* Home chooser: cards line up across the two columns (subgrid rows). */
.mk-choose-grid{grid-template-rows:auto 1fr 1fr;row-gap:var(--s2)}
.mk-choose-group{grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:var(--s2)}
@media (max-width:900px){.mk-choose-grid{grid-template-rows:none}.mk-choose-group{grid-row:auto;grid-template-rows:none}}
.mk-strip-intro{margin:calc(-1 * var(--s2)) 0 var(--s3);color:var(--muted)}
/* Notes and captions keep a clear gap under the button or box above. */
.mk-trade-note,body.public-site .opening-note{margin-top:var(--s3)}
/* Labels sit over the picture's lower corner, never over a business name. */
.mk-pill{top:auto;bottom:12px}
.mk-ba-item span{top:auto;bottom:10px}
.rx-sample-pill{top:auto;bottom:12px}
/* Phone mockups end cleanly: the last lines fade into the frame instead of being cut. */
.sy-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(#fff0,#fff);pointer-events:none;z-index:2}
/* Closing bands: words left, actions right (stacked on phones). */
body.public-site .refresh-closer.mk-end{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3) var(--s5)}
@media (max-width:800px){body.public-site .refresh-closer.mk-end{grid-template-columns:1fr}}
/* Trade lists: an even grid so no trade sits alone on a line. */
.mk-trade-others{padding:var(--s5) 0;border-top:1px solid var(--line)}
.mk-trade-others ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:4px var(--s4)} /* line-break-ok: grid of trade links */
/* Hosting: the three benefit headings at card-title size. */
body.public-site .bl-st-benefits h2{font-size:1.5rem;letter-spacing:-.02em}
/* Redesign samples: the words start at the top of each comparison. */
body.public-site .sample-study{align-items:start}

/* ---------- /request, centred: the address field is the centrepiece, the rebuild plays on a wide stage under it. ---------- */
.rx-hero.rx-center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:var(--s5);padding-top:var(--s6)}
.rx-center .rx-copy{display:grid;justify-items:center;width:100%}
.rx-center .rx-copy .eyebrow{margin-bottom:var(--s2)}
.rx-center .rx-copy .lead{margin:0 0 var(--s4)}
.rx-center .rx-form{width:100%;max-width:46rem;text-align:left} /* line-break-ok: the address form control */
.rx-center .rx-url{padding:8px 8px 8px var(--s3);border-radius:16px}
body.public-site .rx-center .rx-url input{min-height:64px;font-size:1.3125rem}
body.public-site .rx-center .rx-url .rx-next{min-height:60px;padding:0 var(--s4);font-size:1.0625rem}
.rx-center .rx-promises{justify-content:center}
.rx-confirm{margin:var(--s2) 0 0;text-align:center;font-weight:600;color:var(--ink)}
.rx-center .rx-stage{width:100%;max-width:64rem} /* line-break-ok: the sample browser window graphic */
.rx-center .rx-kept{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s2);margin-top:var(--s3)}
.rx-center .rx-stage figcaption{justify-content:center;text-align:center}
@media (max-width:600px){.rx-hero.rx-center{text-align:left;justify-items:stretch}.rx-center .rx-copy{justify-items:start}.rx-center .rx-promises{justify-content:flex-start}.rx-confirm{text-align:left}.rx-center .rx-kept{justify-content:flex-start}.rx-center .rx-stage figcaption{justify-content:space-between;text-align:left}body.public-site .rx-center .rx-url input{min-height:54px;font-size:1.125rem}}

/* ---------- Review batch 4 (home) ---------- */
/* The H1 names the category in the small label style; the brand line keeps the big title look. */
body.public-site .opening-copy h1.mk-h1-label{font:700 .75rem/1.5 var(--body)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)!important}
body.public-site .opening-copy .mk-slogan{font:700 clamp(2.75rem,5.2vw,5rem)/1.08 var(--display);letter-spacing:-.035em;color:var(--ink);margin:0 0 var(--s3);text-wrap:balance}
body.public-site .opening-copy .mk-slogan em{display:block;font-style:normal;color:var(--accent)}
@media (max-width:700px){body.public-site .opening-copy .mk-slogan{font-size:2.75rem;margin-bottom:var(--s2)}}
/* Samples: one large before/after beside two finished samples. */
.mk-proof{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.mk-proof-compare{margin:0}
.mk-proof-side{display:grid;gap:var(--s3)}
.mk-strip-card .mk-sample-media{display:block}
.mk-strip-label{display:grid;margin-top:var(--s2);font-size:.875rem;color:var(--muted)}
.mk-strip-label strong{font-size:1rem;color:var(--ink)}
@media (max-width:900px){.mk-proof{grid-template-columns:1fr}.mk-proof-side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mk-proof-side{grid-template-columns:1fr}}
/* See yours: the side result shows beside the form on wide screens. */
.sy-result-side{display:grid;gap:var(--s2);margin-top:var(--s4)}
.sy-result-side[hidden]{display:none}
.sy-result-side p{margin:0;font-weight:600;color:var(--ink)}
.sy-result-side .sy-actions{justify-content:flex-start}
@media (min-width:900px){body.public-site .sy .see-stage{position:sticky;top:96px}}
/* Specificity: the site's body.public-site p margin rule outranks single-class rules, so these carry the prefix. */
body.public-site .mk-choose-note{margin:var(--s4) 0 0}
body.public-site .mk-strip-intro{margin:calc(-1 * var(--s2)) 0 var(--s3)}
body.public-site .mk-trade-note{margin:var(--s3) 0 0}
body.public-site .mk-quiet{margin:var(--s2) 0 0}
body.public-site .mk-end .mk-quiet{margin-top:var(--s2)}
body.public-site .mk-updated{margin:var(--s2) 0 0}
body.public-site .rx-confirm{margin:var(--s2) 0 0}
body.public-site .rx-field-error{margin:var(--s2) 0 0}
body.public-site .sy-caption{margin:var(--s2) 0 0}
/* Option cards: content at the top, the link pinned to the bottom when rows share a height. */
body.public-site .mk-option{display:flex;flex-direction:column;gap:var(--s1)}
body.public-site .mk-option .mk-option-go,body.public-site .mk-option .mk-address{margin-top:auto}
/* Short inline links move as one piece instead of breaking mid-phrase. */
body.public-site .mk-choose-note a,body.public-site .mk-quiet a,body.public-site figcaption a,body.public-site .mk-trade-note a{white-space:nowrap}
@media (max-width:700px){body.public-site .opening .opening-art{align-self:stretch;width:100%}}

/* Very large text on a phone (200% with reader spacing): on these pages (main or the request form carries .fit-text)
   headings may hyphenate or break a long word, and kept-together links and prices may wrap, so nothing runs off the
   screen. At normal sizes the page is far wider than 14em, so this never applies. */
body.public-site .fit-text{container:fit/inline-size}
@container fit (max-width:14em){
  body.public-site .fit-text :is(h1,h2,h3,.mk-slogan,.mk-h1-label){overflow-wrap:anywhere;hyphens:auto}
  body.public-site .fit-text :is(.mk-choose-note,.mk-quiet,figcaption,.mk-trade-note) a,body.public-site .fit-text .mk-price span{white-space:normal}
  body.public-site .fit-text .mk-price strong{display:block;margin:0 0 4px}
  body.public-site .fit-text :is(li,dd,td){overflow-wrap:break-word}
}
/* Footer at 200% text on tablets and desktops: one column fewer (four to three, three to two), so "Free websites for"
   keeps "websites for" on one line, and the trades in one list, on wide screens too, so no trade splits mid-word.
   Container ems follow the footer's own text size, so ordinary text keeps its columns. */
@media (min-width:701px) and (max-width:1000px){@container site-footer (max-width:36em){body.public-site footer.site-footer .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}body.public-site footer.site-footer .footer-top nav.mk-foot-trades{grid-template-columns:minmax(0,1fr)}}}
@media (min-width:1001px){@container site-footer (max-width:42em){body.public-site footer.site-footer .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}body.public-site footer.site-footer .footer-brand{grid-column:1/-1}body.public-site footer.site-footer .footer-top nav.mk-foot-trades{grid-template-columns:minmax(0,1fr)}}}
@media (min-width:1601px){@container site-footer (max-width:75em){body.public-site footer.site-footer .footer-top nav.mk-foot-trades{grid-template-columns:minmax(0,1fr)}}}
/* Footer at very large text on a phone: one column, so a heading like WEBSITES never runs past its column. */
@container site-footer (max-width:14em){body.public-site footer.site-footer .footer-top{grid-template-columns:minmax(0,1fr)}}
/* Focus inside the navy plan card uses the warm light colour, so the ring stands out against the card. */
body.public-site .mk-plan-feature :focus-visible{outline-color:var(--glow)}

/* Compact shared directory: keep every destination, reveal groups only when requested. */
body.public-site footer.site-footer{padding:28px var(--gutter) 16px;border:0;background:var(--paper);container:site-footer/inline-size}
body.public-site footer.site-footer .footer-top{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1fr);gap:20px 48px;padding:0;margin:0}
body.public-site footer.site-footer .footer-brand{grid-column:auto;min-width:0;max-width:none}
body.public-site footer.site-footer .footer-brand .brand{margin:0;min-height:36px}
body.public-site footer.site-footer .footer-brand .brand-icon{width:25px;height:25px}
body.public-site footer.site-footer .footer-brand .brand-wordmark{width:120px;height:auto}
body.public-site footer.site-footer .footer-brand p{font-size:1rem;line-height:1.45;margin:8px 0 0;max-width:none}
body.public-site footer.site-footer .footer-directory{min-width:0;container:footer-links/inline-size}
body.public-site footer.site-footer .footer-directory nav.footer-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 20px;margin:0 0 2px}
body.public-site footer.site-footer .footer-top nav a{min-height:44px;display:flex;align-items:center;font-size:.9375rem;font-weight:550;line-height:1.4;padding:8px 0;overflow-wrap:normal;word-break:normal;text-decoration:none}
body.public-site footer.site-footer .footer-top nav a:hover{text-decoration:underline}
body.public-site footer.site-footer .footer-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
body.public-site footer.site-footer .footer-group{min-width:0;margin:0;padding:0;border:0}
body.public-site footer.site-footer .footer-group>summary{display:flex;justify-content:flex-start;align-items:center;gap:10px;min-height:44px;padding:8px 0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;font:650 .9375rem/1.35 var(--body);color:#263540;cursor:pointer;list-style:none}
body.public-site footer.site-footer .footer-group>summary::-webkit-details-marker{display:none}
body.public-site footer.site-footer .footer-group>summary svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:var(--wash);transition:transform .2s}
body.public-site footer.site-footer .footer-group[open]>summary{background:transparent;color:var(--accent-dark)}
body.public-site footer.site-footer .footer-group[open]>summary svg{transform:rotate(180deg)}
body.public-site footer.site-footer .footer-group:not([open])>nav{display:none}
body.public-site footer.site-footer .footer-group>nav{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0;margin:0}
body.public-site footer.site-footer .footer-bottom{padding:12px 0 0;margin:14px 0 0;border:0;display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
body.public-site footer.site-footer .footer-bottom>span{font-size:.8125rem;line-height:1.5}
body.public-site footer.site-footer .footer-bottom nav{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px 20px;margin:0}
body.public-site footer.site-footer .footer-bottom nav a{display:flex;align-items:center;min-height:44px;font-size:.875rem}
@media(max-width:760px){
 body.public-site footer.site-footer{padding:18px var(--gutter) 8px}
 body.public-site footer.site-footer .footer-top{grid-template-columns:minmax(0,1fr);gap:12px}
 body.public-site footer.site-footer .footer-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body.public-site footer.site-footer .footer-groups:has(details[open]){grid-template-columns:minmax(0,1fr)}
 body.public-site footer.site-footer .footer-group>summary{padding:8px 0;gap:6px}
 body.public-site footer.site-footer .footer-directory nav.footer-quick{gap:0 8px;margin:0 0 4px}
 body.public-site footer.site-footer .footer-group>nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
 body.public-site footer.site-footer .footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:8px 0 0;padding:4px 0 0}
}
@container site-footer (max-width:36em){body.public-site footer.site-footer .footer-top{grid-template-columns:minmax(0,1fr)}body.public-site footer.site-footer .footer-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container site-footer (max-width:19em){body.public-site footer.site-footer .footer-groups{grid-template-columns:minmax(0,1fr)}body.public-site footer.site-footer .footer-group>nav{grid-template-columns:minmax(0,1fr)}}

@container site-footer (max-width:36em){body.public-site footer.site-footer .footer-directory nav.footer-quick{display:flex;flex-wrap:wrap;gap:0 20px}}

@container footer-links (max-width:28em){
 body.public-site footer.site-footer .footer-groups{display:flex;flex-wrap:wrap;gap:0 22px}
 body.public-site footer.site-footer .footer-group[open]{flex-basis:100%}
 body.public-site footer.site-footer .footer-group>nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
@container footer-links (max-width:16em){body.public-site footer.site-footer .footer-group>nav{grid-template-columns:minmax(0,1fr)}}

body.public-site footer.site-footer .footer-quick a{white-space:nowrap}
@container footer-links (max-width:28em){body.public-site footer.site-footer .footer-directory nav.footer-quick{display:flex;flex-wrap:wrap;gap:0 20px}}

/* Merchant terms stay readable with enlarged type and reader spacing. */
#stores h2,#stores h3,#stores p{overflow-wrap:anywhere}

/* The paid-traffic landing keeps its action reachable without trapping navigation. */
.free-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.free-mobile-action{display:none}body.free-landing{padding-bottom:var(--free-action-height,0px)}html:has(.free-mobile-action){scroll-padding-bottom:var(--free-action-height,0px)}
@media(max-width:600px){body.free-landing .illustrated-intro{padding-top:24px;gap:24px}body.free-landing .illustrated-intro h1{font-size:clamp(1.25rem,9vw,2.75rem)}body.free-landing .illustrated-intro .lead{font-size:1.0625rem;margin-block:16px}body.free-landing .illustrated-intro .actions{margin-top:16px}.free-mobile-action:not([hidden]){display:block;position:fixed;inset:auto 0 0;padding:12px var(--gutter) max(12px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);z-index:5}.free-mobile-action .button{display:flex;justify-content:center;width:100%;white-space:normal;text-align:center;min-height:48px}}

body.free-landing h2{font-size:clamp(1rem,8vw,2.5rem)}body.free-landing h3{font-size:clamp(1rem,6vw,1.5rem)}

/* Keep the 320px landing header on one row at normal text size; enlarged text may wrap. */
@media(max-width:370px){body.public-site:is(.free-landing,:has(.cb-request),:has(.sx-builder)) header.site-header>.brand .brand-icon{display:none}body.public-site:is(.free-landing,:has(.cb-request),:has(.sx-builder)) header.site-header>.brand .brand-wordmark{width:110px;height:auto}body.public-site:is(.free-landing,:has(.cb-request),:has(.sx-builder)) header.site-header .header-actions{gap:8px}}
.free-trades>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:650;text-decoration:underline;text-underline-offset:4px}.free-trades[open]>summary{margin-bottom:16px}