/* Bookmo home page, v0.11.0. Loaded AFTER styles.css, never instead of it.

   WHY THIS IS A SEPARATE FILE.
   styles.css line 1 is the entire minified base and it is shared by three consumers:
   this page, the 14-panel client portal, and 404.html. There is no CSS test in this
   repository and no check here can read a computed style, so an edit to that line can
   break the portal with perfectly correct HTML and nothing would catch it. This file
   exists so that rebuilding the home page touches none of its RULES.

   ONE EXCEPTION, added later: the brand green was darkened from #078c46 to #067a3d
   in styles.css itself -- the :root token plus four rules that hardcoded the hex.
   White on the old green measured 4.33:1, under the 4.5:1 the CTA label needs.
   Changing a colour VALUE cannot move anything, which is a different risk class
   from restructuring rules; and overriding the token only here would have left the
   public site and the client portal on two different greens, which clients see.

   HOW IT AVOIDS FIGHTING styles.css.
   The rebuilt markup uses bm- prefixed class names, so the old home-page rules simply
   never match. What DOES still reach the new markup is every rule in styles.css that
   selects by TAG or by ID, and those are neutralised explicitly in the block below
   rather than discovered one at a time in a browser.

   THREE RULES THIS FILE OBEYS, EACH FOR A RECORDED REASON:

   1. No !important on `display`, anywhere. enterPortal() hides header, #site and
      #footer with .hidden{display:none!important}. An !important display here would
      tie with it and win on source order -- which is exactly change-log row 20, where
      an !important tie made a control render when it could not work.

   2. Do not redefine .btn .green .outline .wrap .nav .logo .bars .consult .actions
      .cards .footer-grid .white .hidden .panel .active .modal .modal-card .modal-foot.
      Those look like dead home-page rules and are not: .btn/.green/.outline style the
      login modal's Sign In button and the portal's Back button, .cards styles the
      portal's staff workspace, and 404.html uses nearly all of them. They stay live.

   3. No <aside> on this page, and no .panel/.active/[data-panel]. styles.css carries
      bare `aside nav button` rules, and showPanel() strips .active from every
      [data-panel] and .panel in the DOCUMENT.

   WHAT IS NOW INERT in styles.css line 1 (kept there, matched by nothing on this
   page, still worth knowing when reading it): .hero .hero-grid .hero-copy .hero-points
   .hero-image .services .title .split .why .why-copy .why-grid .report-image .contact
   .two .section .alt .price .featured .bottom. 404.html does not use any of those. */

/* ------------------------------------------------------------------ tokens */
:root{
  --bm-max:1240px;
  --bm-gutter:clamp(20px,4vw,40px);
  --bm-s1:6px; --bm-s2:12px; --bm-s3:20px; --bm-s4:32px;
  --bm-s5:48px; --bm-s6:72px; --bm-s7:104px;
  --bm-r:16px; --bm-r-sm:10px; --bm-r-pill:999px;
  --bm-ink:#0d2545;
  --bm-mute:#53647a;
  --bm-line:#dfe6ee;
  --bm-tint:#eef7f1;          /* pale green, the icon wells */
  --bm-paper:#f6f8fa;         /* alternating section ground */
  --bm-navy-2:#0f3a6d;        /* one step up from --navy, for borders on navy */
  --bm-shadow:0 1px 2px rgba(8,43,86,.04),0 12px 28px rgba(8,43,86,.07);
  --bm-shadow-lift:0 2px 4px rgba(8,43,86,.05),0 18px 44px rgba(8,43,86,.11);
  --bm-ring:0 0 0 3px rgba(6,122,61,.4);
}

/* --------------------------------------------- neutralising styles.css line 1
   Every rule here cancels something that reaches the new markup by tag or id. Each
   one is a real collision found by reading styles.css, not defensive noise. */

/* Anchor nav IS this site's navigation and the header is sticky, so without this
   every jump lands with the target hidden under the header. styles.css sets
   scroll-padding-top only below 760px, so on desktop this has always been wrong. */
html{scroll-padding-top:92px}

/* styles.css: header{height:72px}. A hard height, and the rebuilt header wraps its
   nav at narrow desktop widths -- with a fixed height the wrapped row overflows. */
header{height:auto;min-height:72px}

/* styles.css below 760px: #menu{font-size:0} with #menu:before{content:'☰'}. The new
   button holds an inline SVG, so without this you get the icon AND a 25px glyph
   stacked inside a 42px grid cell. */
#menu::before{content:none}

/* styles.css: a{color:inherit}. Nothing else. So links start unstyled everywhere and
   inherit white inside the navy footer, which is right -- but the focus ring and the
   hover treatment have to be stated. */
a{color:inherit}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:none;box-shadow:var(--bm-ring);border-radius:4px;
}

/* THE ONE THAT WOULD HAVE SHIPPED BROKEN. #formMsg has no display rule of its own:
   it is a <small> and it renders as a block today only because of
   `.contact form small{display:block}` -- a class rule the rebuilt markup does not
   match. Without this, a failed contact submit renders INLINE, on the same line as
   the Send button, with the mailto link wrapping around it. That is the same family
   as change-log row 20. #newsMsg already carries display:block in styles.css.
   Deliberately NOT restating the .ok/.err colours: they already exist, they already
   work, and they carry a comment explaining why the two differ. Two definitions of
   one thing means the next person edits the wrong one. */
#formMsg{display:block;margin-top:var(--bm-s2)}
#newsMsg{margin-top:var(--bm-s2)}

/* styles.css: #newsletter button{padding:9px 17px;border-radius:3px}. Kept green,
   restyled to match the rest of the page. */
#newsletter button{padding:0 18px;border-radius:var(--bm-r-sm);cursor:pointer}

/* ------------------------------------------------------------ shared shapes */
.bm-wrap{width:min(var(--bm-max),100% - var(--bm-gutter)*2);margin-inline:auto}

/* Every section pays the same vertical rent. Before the rebuild, Services was 13px of
   padding while Pricing was 70px, which is why the page read as unbalanced.
   TIGHTENED after the owner reported "a lot of empty space": this was
   clamp(56px,7vw,104px), which at 1440px is 100px top AND bottom -- about 200px of
   padding per section, six sections deep. Now clamp(38px,4vw,64px). The rhythm is
   still uniform, which was the point of having a scale; it is just less generous. */
.bm-section{padding-block:clamp(38px,4vw,64px)}
.bm-section--paper{background:var(--bm-paper)}

.bm-head-block{max-width:62ch;margin-inline:auto;text-align:center;
  margin-bottom:clamp(22px,2.4vw,32px)}
.bm-head-block h2{font:800 clamp(28px,3.2vw,42px)/1.15 Manrope,sans-serif;
  letter-spacing:-.02em;margin:0 0 var(--bm-s2);color:var(--navy)}
.bm-head-block p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;
  color:var(--bm-mute)}

/* var(--green) again. This was hardcoded to #067a3d because the old brand green
   measured only 3.96:1 on this tint, under the 4.5:1 needed at 13px. The token is
   that value now, so the special case is gone -- it measures 4.98:1 here. */
.bm-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--bm-s3);
  padding:6px 14px;border-radius:var(--bm-r-pill);background:var(--bm-tint);
  color:var(--green);font-size:13px;font-weight:700;letter-spacing:.01em}

/* Icon wells. One shape, three sizes, used by every icon on the page. */
.bm-ico{display:grid;place-items:center;flex:none;border-radius:50%;
  background:var(--bm-tint);color:var(--green)}
.bm-ico svg{width:22px;height:22px}
.bm-ico--sm{width:40px;height:40px}
.bm-ico--sm svg{width:19px;height:19px}
.bm-ico--md{width:52px;height:52px}
.bm-ico--onnavy{background:rgba(255,255,255,.08);color:#6fe08a;
  box-shadow:inset 0 0 0 1px rgba(111,224,138,.45)}

/* Buttons. NOT named .btn -- that class is live for the modal, the portal and
   404.html and must keep its current look. */
.bm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 var(--bm-s3);border:1px solid transparent;
  border-radius:var(--bm-r-sm);font-weight:700;font-size:15px;cursor:pointer;
  text-align:center;transition:transform .12s ease,box-shadow .12s ease,
  background-color .12s ease,border-color .12s ease}
.bm-btn svg{width:18px;height:18px;flex:none}
.bm-btn--primary{background:var(--green);color:#fff}
.bm-btn--primary:hover{background:#05602f;transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(6,122,61,.3)}
/* #8494a9, not a hairline grey: measured 3.09:1 on white, where #c3ccd8 was 1.62:1.
   WCAG 1.4.11 asks 3:1 for the boundary of a control, and a button you cannot see
   the edge of is the case it exists for. */
.bm-btn--ghost{background:#fff;border-color:#8494a9;color:var(--bm-ink)}
.bm-btn--ghost:hover{border-color:var(--navy);transform:translateY(-1px)}

/* Cards. NOT named .cards -- that class styles the portal's staff workspace. */
.bm-card{background:#fff;border:1px solid var(--bm-line);border-radius:var(--bm-r);
  padding:clamp(16px,1.5vw,22px);box-shadow:var(--bm-shadow)}

/* Images are <img> elements in a fixed-ratio frame, never a background window into a
   larger file. Twice now (change-log rows 27 and 28) a background-position window
   into the design mockup painted the mockup's OWN content -- a section heading, then
   a placeholder phone number -- onto the live site. An <img> cannot do that. */
/* Square corners, by request. This is the shared frame, so it applies to the hero
   picture AND the one on the navy panel -- one rounded and one pointed would read
   as an oversight. overflow:hidden stays: it is what crops the photo to the frame. */
.bm-frame{margin:0;border-radius:0;overflow:hidden;background:#e9eef3;
  box-shadow:var(--bm-shadow-lift);border:1px solid rgba(255,255,255,.5)}
.bm-frame img{display:block;width:100%;height:100%;object-fit:cover}

/* Visible only when focused. Not display:none -- a hidden element is not
   focusable, which would make the link useless to the only people it is for. */
.bm-skip{position:absolute;left:12px;top:-60px;z-index:30;padding:11px 18px;
  background:var(--navy);color:#fff;border-radius:var(--bm-r-sm);font-weight:700;
  font-size:14px;transition:top .15s ease}
.bm-skip:focus{top:12px}
#site:focus{outline:none}

/* ------------------------------------------------------------------- header */
.bm-head{display:flex;align-items:center;gap:var(--bm-s3);min-height:72px;
  padding-block:10px}
.bm-logo{display:flex;align-items:center;flex:none;margin-right:auto}
.bm-logo .bm-bars{display:flex;align-items:flex-end;gap:3px;margin-right:9px}
.bm-logo .bm-bars i{width:7px;border-radius:3px 3px 0 0}
.bm-logo .bm-bars i:nth-child(1){height:15px;background:#48aa75}
.bm-logo .bm-bars i:nth-child(2){height:23px;background:#48aa75}
.bm-logo .bm-bars i:nth-child(3){height:31px;background:#41a4c5}
.bm-logo .bm-bars i:nth-child(4){height:38px;background:#146c99}
.bm-logo b{display:block;font:800 30px/.86 Manrope,sans-serif;color:var(--navy);
  letter-spacing:-.02em}
.bm-logo small{display:block;font:700 9px/1 Inter,sans-serif;letter-spacing:.13em;
  color:#078ee0;margin-top:3px}

/* #links must be styled here by ID. styles.css scopes its nav rules to `.nav nav`
   and `.nav nav.open`, and the rebuilt header does not use .nav -- so without these
   the desktop nav would not lay out and the hamburger would toggle a class that
   nothing responds to. script.js:5 toggles exactly this `open` class. */
#links{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px)}
#links a{font-size:15px;font-weight:600;color:var(--bm-ink);padding:6px 0;
  border-bottom:2px solid transparent}
#links a:hover{color:var(--green);border-bottom-color:var(--green)}
.bm-login{background:none;border:0;font-size:15px;font-weight:700;color:var(--navy);
  cursor:pointer;padding:6px 0;white-space:nowrap}
.bm-login:hover{color:var(--green)}
.bm-head .bm-btn{min-height:44px;font-size:14px;white-space:nowrap}

#menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--bm-line);border-radius:var(--bm-r-sm);background:#fff;
  color:var(--navy);cursor:pointer;padding:0;font-size:0;margin-left:auto}
#menu svg{width:22px;height:22px}

/* --------------------------------------------------------------------- hero */
.bm-hero{background:
  radial-gradient(120% 120% at 88% 0%,rgba(7,140,70,.10) 0%,rgba(7,140,70,0) 55%),
  linear-gradient(180deg,#fbfcfd 0%,#eef3f8 100%);
  border-bottom:1px solid var(--bm-line);overflow:hidden}
.bm-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3vw,40px);align-items:start;
  padding-block:clamp(30px,3.4vw,52px)}
.bm-hero h1{margin:0 0 var(--bm-s3);
  font:800 clamp(38px,5.2vw,64px)/1.02 Manrope,sans-serif;letter-spacing:-.035em;
  color:var(--navy)}
.bm-hero h1 em{display:block;font-style:normal;color:var(--green)}
.bm-lead{margin:0;max-width:52ch;font-size:clamp(16px,1.35vw,19px);line-height:1.6;
  color:#3c4f68}
.bm-actions{display:flex;flex-wrap:wrap;gap:var(--bm-s2);margin:var(--bm-s3) 0 0}

/* A tight vertical stack in the left column, beside the form -- by request, after
   a version where these were a full-width three-across band under the hero. One
   column at every width, so the three read as one group rather than three
   separate columns of text. */
.bm-points{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;
  list-style:none}
.bm-points li{display:flex;align-items:flex-start;gap:var(--bm-s2)}
/* The <p> inside each row was carrying the browser's DEFAULT 1em top and bottom
   margin -- 16px each. That made every row 74px tall against a 14px gap, so an
   88px pitch: the three points looked spread out no matter what the gap said.
   Nobody wrote that space, which is why it took a browser to find it. */
.bm-points p,.bm-reach p{margin:0}
.bm-points b{display:block;font:700 15px Manrope,sans-serif;color:var(--navy)}
/* `p span`, not `span`. The icon well is itself a <span> inside .bm-points, so a
   bare `.bm-points span` (0,1,1) beat `.bm-ico` (0,1,0) and gave every icon
   display:block and the muted caption colour -- the icon sat in the corner of its
   own well, in grey. Found by looking at it; no static check can see this. */
.bm-points p span{display:block;font-size:13px;line-height:1.45;
  color:var(--bm-mute);margin-top:2px}

/* The frame is capped at the source image's own width, so the photo is never scaled
   UP past 1:1 at any viewport. That is what made the old crops look soft: they were
   665px and 258px wide inside full-bleed cells that grew without limit. When a
   higher-resolution photo replaces it, raise the cap. */
.bm-hero-media{max-width:660px;margin-left:auto;width:100%}
.bm-hero-media .bm-frame{aspect-ratio:16/9}

/* The hero's bottom-left cell: the three points, then the published phone, email
   and address. Those stay visible for the reason the markup comment gives -- with
   JavaScript off both forms on this page do nothing at all, and this is the only
   route that still works. */
.bm-hero-side{display:grid;gap:var(--bm-s3);align-content:start;
  border-top:1px solid var(--bm-line);padding-top:clamp(18px,2vw,24px)}

/* The hero's bottom-right cell, directly under the picture. #contact used to be
   its own full-width section; it is this cell now. The heading is styled here
   because .bm-contact-grid, which used to style it, no longer exists. */
.bm-hero-form h2{margin:0 0 var(--bm-s1);
  font:800 clamp(24px,2.4vw,32px)/1.15 Manrope,sans-serif;letter-spacing:-.02em;
  color:var(--navy)}
.bm-hero-form .bm-lead{font-size:15px;margin-bottom:var(--bm-s3);max-width:46ch}
.bm-hero-form .bm-card{padding:clamp(16px,1.4vw,20px)}

/* ----------------------------------------------------------------- services */
/* auto-fit, so five cards reflow 5 -> 3 -> 2 -> 1 with no breakpoint and no width at
   which something falls off the row. */
.bm-grid{display:grid;gap:var(--bm-s3)}
.bm-grid--5{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.bm-grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.bm-service h3{margin:var(--bm-s2) 0 var(--bm-s1);
  font:700 17px Manrope,sans-serif;color:var(--navy)}
.bm-service p{margin:0;font-size:14px;line-height:1.6;color:var(--bm-mute)}

/* ---------------------------------------------------------------------- why */
.bm-why{background:var(--navy);color:#fff}
.bm-why-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,3vw,48px);align-items:center}
.bm-why h2{margin:0 0 var(--bm-s2);
  font:800 clamp(28px,3.2vw,42px)/1.15 Manrope,sans-serif;letter-spacing:-.02em}
.bm-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--bm-s3) var(--bm-s3);margin:clamp(20px,2.2vw,30px) 0 0;padding:0;
  list-style:none}
.bm-benefits li{display:flex;align-items:flex-start;gap:14px}
.bm-benefits b{display:block;font:700 16px Manrope,sans-serif;margin-bottom:4px}
.bm-benefits p span{display:block;font-size:14px;line-height:1.55;color:#bccee2}
/* Capped for the same reason as the hero frame: this crop is only 258px wide, the
   weakest asset on the page. A replacement can lift this cap. */
.bm-why-media{max-width:400px;width:100%;margin-inline:auto}
.bm-why-media .bm-frame{aspect-ratio:4/3;border-color:rgba(255,255,255,.14)}

/* ------------------------------------------------------------------ pricing */
.bm-price{position:relative;display:flex;flex-direction:column;text-align:center}
.bm-price h3{margin:0;font:700 17px Manrope,sans-serif;color:var(--bm-mute);
  letter-spacing:.02em}
.bm-price .bm-amount{margin:var(--bm-s1) 0 var(--bm-s2);
  font:800 clamp(34px,3.4vw,44px)/1 Manrope,sans-serif;color:var(--navy);
  letter-spacing:-.03em}
.bm-price .bm-amount small{font:500 14px Inter,sans-serif;color:var(--bm-mute);
  letter-spacing:0}
.bm-price p{margin:0 0 var(--bm-s3);font-size:14px;line-height:1.6;
  color:var(--bm-mute)}
.bm-price .bm-btn{margin-top:auto;width:100%}
.bm-price--featured{border-color:var(--green);box-shadow:var(--bm-shadow-lift)}
.bm-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:11px;font-weight:700;
  padding:5px 13px;border-radius:var(--bm-r-pill);white-space:nowrap}

/* ---------------------------------------------------------------- resources */
.bm-res h3{margin:0 0 var(--bm-s1);font:700 16px Manrope,sans-serif;color:var(--navy)}
.bm-res p{margin:0;font-size:14px;line-height:1.6;color:var(--bm-mute)}

/* ------------------------------------------------------------------ contact */
/* The published phone, email and address stay visible in the page on purpose. With
   JavaScript off both forms do nothing at all -- that is the honest behaviour, and
   this is the route that still works. */
.bm-reach{list-style:none;margin:0;padding:0;display:grid;gap:var(--bm-s2)}
.bm-reach li{display:flex;align-items:center;gap:14px;font-size:14px;
  line-height:1.45}
.bm-reach a:hover{color:var(--green);text-decoration:underline}
.bm-reach small{display:block;color:var(--bm-mute);font-size:13px;margin-top:2px}

.bm-form{display:grid;gap:var(--bm-s2)}
.bm-form .bm-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--bm-s2)}
/* Same reason: #d3dbe4 measured 1.40:1 on the white card. These are the seven
   fields of the only enquiry route on the site; their edges have to be visible. */
.bm-form input,.bm-form select,.bm-form textarea{width:100%;min-width:0;
  padding:13px 14px;border:1px solid #8494a9;border-radius:var(--bm-r-sm);
  background:#fff;font-size:15px;color:var(--bm-ink)}
.bm-form textarea{resize:vertical;min-height:104px}
/* The placeholder IS the visible label here -- this project deliberately uses
   placeholder plus aria-label rather than visible <label>s, so for a sighted user
   this text is the only thing naming the field. #8a99ab measured 2.91:1; #66768a
   is 4.64:1 and still reads as placeholder rather than entered text. */
.bm-form input::placeholder,.bm-form textarea::placeholder{color:#66768a}
.bm-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2353647a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.bm-form input:focus,.bm-form select:focus,.bm-form textarea:focus{
  outline:none;border-color:var(--green);box-shadow:var(--bm-ring)}
.bm-form .bm-btn{justify-self:start;padding-inline:var(--bm-s4)}

/* ------------------------------------------------------------------- footer */
.bm-foot{display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.3fr 1.5fr;
  gap:var(--bm-s3) var(--bm-s3);padding-block:clamp(32px,3.4vw,48px)}
.bm-foot h4{margin:0 0 var(--bm-s3);font:700 13px Manrope,sans-serif;
  letter-spacing:.02em}
.bm-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bm-foot a,.bm-foot p,.bm-foot li{font-size:14px;line-height:1.55}
.bm-foot p{margin:0;color:#b7cae0}
.bm-foot a{color:#dbe6f2}
.bm-foot a:hover{color:#fff;text-decoration:underline}
.bm-foot .bm-logo b{color:#fff}
.bm-foot .bm-logo small{color:#7fc8f5}
.bm-foot-about{max-width:34ch;margin-top:var(--bm-s3)!important}
.bm-foot-reach li{display:flex;gap:11px;align-items:flex-start;color:#dbe6f2}
.bm-foot-reach svg{width:17px;height:17px;flex:none;margin-top:1px;color:#7fc8f5}

/* Server-side gated, fails closed, rel=nofollow -- see the comment in index.html.
   The rule above it is a separator, not decoration: it marks where the public links
   stop and the staff entrance begins. */
.bm-admin{margin-top:var(--bm-s2);padding-top:var(--bm-s2);
  border-top:1px solid rgba(255,255,255,.16)}
.bm-admin a{color:#7fc8f5;font-weight:600}

#newsletter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
  margin-top:var(--bm-s3)}
#newsletter input{min-width:0;padding:12px 13px;border:1px solid transparent;
  border-radius:var(--bm-r-sm);font-size:14px}
#newsletter input:focus{outline:none;box-shadow:var(--bm-ring)}

.bm-legal{border-top:1px solid rgba(255,255,255,.14)}
.bm-legal .bm-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--bm-s2);padding-block:var(--bm-s3);font-size:13px;color:#9fb6d0}

/* -------------------------------------------------------------- narrower ---
   Two breakpoints only. Everything that can reflow intrinsically already does, so
   these handle the things that genuinely cannot: the two-column sections, and the
   nav collapsing to a menu. */

@media(max-width:980px){
  .bm-hero-grid,.bm-why-grid{grid-template-columns:minmax(0,1fr)}
  .bm-hero-media{margin-inline:auto;max-width:600px}
  /* The old page hid its hero image entirely from 761px to 1050px, leaving a bare
     gradient band. It stays visible here at every width. */
  .bm-why-media{max-width:460px}
  .bm-foot{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

@media(max-width:900px){
  html{scroll-padding-top:80px}
  #menu{display:flex}
  #links{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-bottom:1px solid var(--bm-line);padding:var(--bm-s2) var(--bm-gutter)
    var(--bm-s3);box-shadow:var(--bm-shadow)}
  /* script.js:5 toggles this class. styles.css scopes its equivalent to `.nav nav`,
     which the rebuilt header does not use, so this rule is what makes the menu work. */
  #links.open{display:flex}
  #links a{padding:13px 0;border-bottom:1px solid var(--bm-line)}
  #links a:hover{border-bottom-color:var(--bm-line)}
  .bm-login{text-align:left;padding:15px 0 6px}
  header{position:sticky}
  .bm-head{position:relative;min-height:64px}
  .bm-head .bm-btn{display:none}
  .bm-logo b{font-size:26px}
}

@media(max-width:620px){
  .bm-hero-grid{padding-block:26px}
  .bm-actions .bm-btn{width:100%}
  .bm-form .bm-pair{grid-template-columns:1fr}
  .bm-form .bm-btn{width:100%;justify-self:stretch}
  .bm-points li,.bm-benefits li{align-items:center}
  .bm-legal .bm-wrap{flex-direction:column;gap:6px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bm-btn{transition:none}
  .bm-btn:hover{transform:none}
}