/* The signed-out page.
   ---------------------------------------------------------------------------------------------
   Loaded only by the landing page, and written entirely on the design system's tokens — the same
   carbon, the same orange, the same radii the product uses once somebody is inside it. A marketing
   page drawn in colours the product does not have is a promise the first screen breaks.

   What changed, and why, because the old one was not wrong so much as shapeless:

     * Four identical three-card grids ran one after another on one rhythm, so the page read as a
       list of boxes rather than as an argument. Sections now alternate — full-bleed hero, tinted
       strip, asymmetric split, dark panel, dense list — and the eye has somewhere to rest.

     * Nothing showed the product. A visitor buying software wants to see the software, so the hero
       carries a browser frame and the delivery section carries a phone, both drawn here in CSS
       rather than shipped as screenshots that go stale the week a screen changes.

     * The icons were text glyphs — ☏, ◔, and a literal capital A. Those render as a different
       shape on every operating system and read as a placeholder nobody replaced. They are inline
       SVG now, one sprite, inheriting colour.

   Nothing here is themeable. The seven themes belong to a garage that has chosen one; a visitor who
   has not signed up has no garage and no choice to honour. */

.lp{background:var(--card);color:var(--ink);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.lp-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.lp-narrow{max-width:760px;margin-left:auto;margin-right:auto}

.lp ::selection{background:var(--orange);color:var(--on-acc)}

.lp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* One sprite, referenced by <use>. Colour comes from the parent, so an icon on the dark panel and
   the same icon on paper are one definition rather than two. */
.lp-svg{position:absolute;width:0;height:0;overflow:hidden}
.lp-i{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------------------- the bar */

.lp-bar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.lp-bar.stuck{border-bottom-color:var(--line);box-shadow:0 1px 3px rgba(16,19,24,.04)}
.lp-bar .lp-wrap{display:flex;align-items:center;gap:16px;height:68px}

.lp-mark{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;
  font-size:18px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.lp-mark span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--orange);color:var(--on-acc);font-size:16px;
  box-shadow:0 2px 8px rgba(240,78,35,.32)}

.lp-nav{display:flex;gap:4px;margin-left:22px}
.lp-nav a{color:var(--slate);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:7px 12px;border-radius:8px;transition:color .15s,background .15s}
.lp-nav a:hover{color:var(--ink);background:var(--paper)}

.lp-bar .lp-acts{margin-left:auto;display:flex;align-items:center;gap:10px}

/* The bar's own menu button, on a phone where the links do not fit. */
.lp-burger{display:none;margin-left:auto;width:40px;height:40px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  align-items:center;justify-content:center;cursor:pointer;font-size:17px}
.lp-drawer{display:none;border-top:1px solid var(--line);background:var(--card);padding:10px 0 16px}
.lp-drawer.open{display:block}
.lp-drawer .lp-wrap{display:grid;gap:2px}
.lp-drawer a{padding:11px 4px;color:var(--ink);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--line-2)}
.lp-drawer .lp-btn{margin-top:12px;justify-content:center;border-bottom:0}

/* ---------------------------------------------------------------------------------- buttons */

.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-family:var(--body);font-size:14.5px;font-weight:600;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .18s,background .15s,border-color .15s}
.lp-btn:hover{border-color:var(--slate-2);transform:translateY(-1px)}
.lp-btn:active{transform:translateY(0)}

.lp-btn.pri{background:var(--orange);border-color:var(--orange);color:var(--on-acc);
  box-shadow:0 1px 2px rgba(206,61,22,.24),0 6px 18px rgba(240,78,35,.24)}
.lp-btn.pri:hover{background:var(--orange-d);border-color:var(--orange-d);
  box-shadow:0 2px 4px rgba(206,61,22,.28),0 10px 26px rgba(240,78,35,.3)}

.lp-btn.ghost{background:transparent;border-color:transparent;color:var(--slate)}
.lp-btn.ghost:hover{color:var(--ink);background:var(--paper);transform:none}

.lp-btn.big{padding:15px 26px;font-size:16px;border-radius:11px}
.lp-btn .lp-i{font-size:17px;stroke-width:1.9}

.lp-btn.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.lp-btn.on-dark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}

/* ---------------------------------------------------------------------------------- the hero */

.lp-hero{position:relative;padding:88px 0 0;text-align:center;overflow:hidden}
.lp-hero:before{content:'';position:absolute;inset:-260px 0 auto;height:760px;pointer-events:none;
  background:
    radial-gradient(620px 340px at 50% 30%, rgba(240,78,35,.11), transparent 68%),
    radial-gradient(900px 420px at 82% 4%, rgba(86,69,184,.07), transparent 62%)}
.lp-hero .lp-wrap{position:relative}

.lp-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;
  border-radius:var(--pill);background:var(--card);border:1px solid var(--line);color:var(--slate);
  font-size:12.5px;font-weight:600;margin-bottom:26px;box-shadow:var(--sh)}
.lp-eyebrow b{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--pill);
  background:var(--orange-w);color:var(--orange-d);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}

.lp-hero h1{font-family:var(--disp);font-weight:700;letter-spacing:-.038em;
  font-size:clamp(40px,6.4vw,74px);line-height:1.02;margin:0 auto 22px;max-width:16ch}
.lp-hero h1 em{font-style:normal;color:var(--orange)}

.lp-lede{font-size:clamp(16.5px,1.55vw,19.5px);color:var(--slate);max-width:60ch;
  margin:0 auto 32px;line-height:1.62}

.lp-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.lp-note{font-size:13.5px;color:var(--slate-2);margin-top:18px}

/* ------------------------------------------------------------------- the product, in a frame */

.lp-shot{margin-top:56px;position:relative}
.lp-shot:after{content:'';position:absolute;left:8%;right:8%;bottom:-1px;height:180px;
  background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none}

.lp-frame{max-width:1000px;margin:0 auto;border-radius:16px;overflow:hidden;text-align:left;
  border:1px solid var(--line);background:var(--card);
  box-shadow:0 2px 6px rgba(16,19,24,.05),0 24px 70px -18px rgba(16,19,24,.28)}
.lp-frame-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--card-2);
  border-bottom:1px solid var(--line)}
.lp-dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.lp-dot:nth-child(1){background:#FF5F57}.lp-dot:nth-child(2){background:#FEBC2E}
.lp-dot:nth-child(3){background:#28C840}
.lp-addr{margin-left:10px;flex:1;max-width:280px;padding:4px 12px;border-radius:var(--pill);
  background:var(--card);border:1px solid var(--line);font-family:var(--mono);font-size:11px;
  color:var(--slate-2);text-align:center}

/* What is inside the frame: the shape of a real screen, not a photograph of one. */
.lp-app{display:grid;grid-template-columns:190px 1fr;min-height:376px}
.lp-app-rail{background:var(--carbon);padding:16px 12px;display:grid;align-content:start;gap:3px}
.lp-app-rail .g{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#5C6675;
  padding:12px 10px 5px;font-weight:700}
.lp-app-rail .r{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--rail-tx);font-size:12.5px;font-weight:500}
.lp-app-rail .r .lp-i{font-size:14px;opacity:.8}
.lp-app-rail .r.on{background:var(--orange);color:#fff}
.lp-app-rail .r.on .lp-i{opacity:1}
.lp-app-rail .r .n{margin-left:auto;font-family:var(--mono);font-size:10px;
  background:rgba(255,255,255,.1);padding:1px 6px;border-radius:var(--pill)}

.lp-app-body{padding:18px;background:var(--paper);display:grid;align-content:start;gap:12px}
.lp-app-h{display:flex;align-items:center;gap:10px}
.lp-app-h b{font-family:var(--disp);font-size:17px;letter-spacing:-.02em}
.lp-app-h .sp{margin-left:auto}
.lp-chip{padding:3px 10px;border-radius:var(--pill);font-size:10.5px;font-weight:700;
  background:var(--green-w);color:var(--green)}
.lp-chip.amber{background:var(--amber-w);color:var(--amber)}

.lp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.lp-tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px}
.lp-tile .k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);
  font-weight:700}
.lp-tile .v{font-family:var(--mono);font-size:15px;font-weight:700;margin-top:3px;letter-spacing:-.02em}
.lp-tile.acc .v{color:var(--orange)}
.lp-tile.pos .v{color:var(--green)}

.lp-rows{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lp-row{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line-2);font-size:12px}
.lp-row:last-child{border-bottom:0}
.lp-row.h{background:var(--card-2);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-2);font-weight:700}
.lp-row .p{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:-.02em}
.lp-row .m{font-family:var(--mono);font-size:11.5px}
.lp-row .d{color:var(--slate);font-size:11.5px}

/* ------------------------------------------------------------------------------ the flow strip */

.lp-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.lp-step{padding:18px 16px;border-right:1px solid var(--line-2);text-align:left;position:relative}
.lp-step:last-child{border-right:0}
.lp-step b{display:block;font-family:var(--mono);font-size:10.5px;color:var(--orange);
  margin-bottom:7px;font-weight:700;letter-spacing:.04em}
.lp-step span{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em}
.lp-step i{display:block;font-style:normal;font-size:12px;color:var(--slate);margin-top:4px;
  line-height:1.45}

/* -------------------------------------------------------------------------------- sections */

.lp-sec{padding:78px 0;position:relative}
.lp-sec.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-sec.dark{background:var(--carbon);color:#fff}
.lp-sec.dark .lp-h2{color:#fff}
.lp-sec.dark .lp-sub{color:var(--rail-tx)}
.lp-sec.dark .lp-kicker{color:#FF7A54}
.lp-sec.tight{padding:60px 0}

/* Two plain sections running together have no edge between them, so the boundary is one gap and
   not two. Where the background changes — into the tinted band or the dark panel — the pair stays,
   because there the space is what makes the change read as deliberate. */
.lp-sec + .lp-sec:not(.alt):not(.dark){padding-top:0}

.lp-head{max-width:none;margin-bottom:38px}
.lp-head.mid{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.lp-head.mid .lp-h2,.lp-head.mid .lp-sub{margin-left:auto;margin-right:auto}

.lp-h2{font-family:var(--disp);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(26px,3.1vw,39px);line-height:1.12;margin:0 0 14px;max-width:26ch}
.lp-sub{font-size:16.5px;color:var(--slate);max-width:60ch;margin:0;line-height:1.62}
.lp-kicker{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange);margin:0 0 14px;font-weight:700}

/* ---------------------------------------------------------------------------------- cards */

.lp-grid{display:grid;gap:16px}
.lp-grid.c3{grid-template-columns:repeat(3,1fr)}
.lp-grid.c2{grid-template-columns:repeat(2,1fr)}

.lp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.lp-card:hover{transform:translateY(-2px);border-color:var(--slate-2);box-shadow:var(--sh-2)}
.lp-card h3{font-family:var(--disp);font-size:17.5px;font-weight:700;letter-spacing:-.022em;
  margin:0 0 9px;line-height:1.3}
.lp-card p{margin:0;font-size:14.5px;color:var(--slate);line-height:1.6}
.lp-card .lp-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--orange-w);color:var(--orange);font-size:20px;margin-bottom:16px}

.lp-sec.alt .lp-card{background:var(--card)}
.lp-sec.dark .lp-card{background:var(--carbon-2);border-color:var(--carbon-3)}
.lp-sec.dark .lp-card:hover{border-color:#3A424E}
.lp-sec.dark .lp-card h3{color:#fff}
.lp-sec.dark .lp-card p{color:var(--rail-tx)}
.lp-sec.dark .lp-card .lp-ico{background:rgba(240,78,35,.18);color:#FF7A54}

/* ------------------------------------------------------------------------- the split claim */

.lp-split{display:grid;grid-template-columns:1fr 1.06fr;gap:56px;align-items:center}
.lp-split.flip .lp-split-v{order:-1}
.lp-split ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.lp-split li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15px;color:var(--slate);
  line-height:1.55}
.lp-split li b{color:var(--ink);font-weight:600}
.lp-sec.dark .lp-split li b{color:#fff}
.lp-tick{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--orange-w);color:var(--orange);font-size:12px;margin-top:2px}
.lp-sec.dark .lp-tick{background:rgba(240,78,35,.2);color:#FF7A54}

/* A worked example, drawn the way the product draws a table. */
.lp-demo{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.lp-demo-h{display:flex;align-items:center;gap:9px;padding:13px 16px;background:var(--card-2);
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--slate);font-weight:600}
.lp-demo-h .lp-i{font-size:15px;color:var(--orange)}
.lp-demo-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink)}
.lp-demo-row:last-child{border-bottom:0}
.lp-demo-row .lp-num{font-family:var(--mono);font-size:13px;letter-spacing:-.02em}
.lp-demo-row.tot{background:var(--card-2);font-weight:700}
.lp-dim{color:var(--slate-2)}
.lp-good{color:var(--green);font-weight:700}
.lp-bad{color:var(--red);font-weight:700}

/* ------------------------------------------------------------------------------ the phone */

.lp-phone{width:280px;margin:0 auto;border-radius:34px;padding:9px;background:var(--carbon);
  border:1px solid var(--carbon-3);box-shadow:0 30px 70px -22px rgba(16,19,24,.5)}
.lp-phone-in{border-radius:26px;overflow:hidden;background:#E9E2DA}
.lp-phone-h{display:flex;align-items:center;gap:9px;padding:12px 13px;background:#075E54;color:#fff}
.lp-phone-h .av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.lp-phone-h .nm{font-size:12.5px;font-weight:600;line-height:1.2}
.lp-phone-h .nm i{display:block;font-style:normal;font-size:10px;opacity:.75;font-weight:400}
.lp-phone-b{padding:14px 12px;display:grid;gap:9px;min-height:230px;align-content:start}
.lp-bubble{background:#fff;border-radius:10px 10px 10px 3px;padding:9px 11px;font-size:12px;
  color:#1E2429;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08);max-width:92%}
.lp-bubble.me{background:#DCF8C6;border-radius:10px 10px 3px 10px;margin-left:auto}
.lp-bubble .t{display:block;font-size:9.5px;color:#7B8B95;text-align:right;margin-top:3px}
.lp-file{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;background:#F2F5F7;
  margin-bottom:7px}
.lp-file .lp-i{font-size:18px;color:var(--red)}
.lp-file b{display:block;font-size:11.5px;line-height:1.25}
.lp-file span{font-size:10px;color:#7B8B95}

/* ------------------------------------------------------------------------- who it is for */

.lp-who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-who .lp-card{display:flex;flex-direction:column;padding:28px}
.lp-who ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.lp-who li{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:13.5px;color:var(--slate);
  line-height:1.5}
.lp-who li .lp-i{font-size:14px;color:var(--orange);margin-top:3px}

/* -------------------------------------------------------------- the dense list underneath */

.lp-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.lp-feat-i{display:grid;grid-template-columns:38px 1fr;gap:15px;padding:26px 24px;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}

/* The right-hand column and the bottom row have the page's own edge already. */
.lp-feat-i:nth-child(3n){border-right:0}
.lp-feat-i:nth-last-child(-n+3){border-bottom:0}

.lp-feat-i .lp-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--orange-w);color:var(--orange);font-size:18px}
.lp-feat-i h3{font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.02em;
  margin:5px 0 6px}
.lp-feat-i p{margin:0;font-size:14px;color:var(--slate);line-height:1.6}

/* -------------------------------------------------------------------------- the proof strip */

.lp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-strip div{padding:26px 22px;border-right:1px solid var(--line-2)}
.lp-strip div:last-child{border-right:0}
.lp-strip b{display:block;font-family:var(--disp);font-size:23px;font-weight:700;
  letter-spacing:-.03em;margin-bottom:4px}
.lp-strip span{font-size:13.5px;color:var(--slate);line-height:1.5}

/* ---------------------------------------------------------------------------------- the FAQ */

.lp-faq{display:grid;gap:0;max-width:820px;margin:0 auto;
  border-top:1px solid var(--line)}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.4}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:after{content:'';position:absolute;right:8px;top:29px;width:11px;height:11px;
  border-right:2px solid var(--slate-2);border-bottom:2px solid var(--slate-2);
  transform:rotate(45deg);transition:transform .2s}
.lp-faq details[open] summary:after{transform:rotate(-135deg)}
.lp-faq summary:hover{color:var(--orange-d)}
.lp-faq p{margin:0 0 22px;font-size:15px;color:var(--slate);max-width:68ch;line-height:1.65}

/* -------------------------------------------------------------------------------- the close */

.lp-close{background:var(--carbon);color:#fff;text-align:center;padding:100px 0;position:relative;
  overflow:hidden}
.lp-close:before{content:'';position:absolute;inset:auto 0 -300px;height:600px;pointer-events:none;
  background:radial-gradient(600px 300px at 50% 100%, rgba(240,78,35,.24), transparent 66%)}
.lp-close .lp-wrap{position:relative}
.lp-close .lp-h2{color:#fff;margin-left:auto;margin-right:auto;max-width:19ch}
.lp-close .lp-sub{color:var(--rail-tx);margin-left:auto;margin-right:auto;margin-bottom:32px}

/* ------------------------------------------------------------------------------- the footer */

.lp-foot{background:var(--carbon);color:var(--rail-tx);padding:56px 0 34px;
  border-top:1px solid var(--carbon-3)}
.lp-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;
  border-bottom:1px solid var(--carbon-3)}
.lp-foot .lp-mark{color:#fff}
.lp-foot-top p{margin:14px 0 0;font-size:13.5px;line-height:1.6;max-width:38ch}
.lp-foot h4{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#6B7686;
  margin:0 0 14px;font-weight:700}
.lp-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.lp-foot a{color:var(--rail-tx);text-decoration:none;font-size:14px}
.lp-foot a:hover{color:#fff}
.lp-foot-btm{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:24px;
  font-size:13px;color:#6B7686}
.lp-foot-btm .sp{margin-left:auto}

/* --------------------------------------------------------------------------------- motion
   A section arriving as it is scrolled to, once. Anybody who has asked their machine for less
   movement gets the page with none — the class is simply never added. */

.lp-rise{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.lp-rise.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .lp-rise{opacity:1;transform:none;transition:none}
  .lp-btn,.lp-card{transition:none}
  .lp-btn:hover,.lp-card:hover{transform:none}
}

/* ------------------------------------------------------------------------- narrower screens
   A garage owner reads this on a phone as often as at a desk. The grids collapse in the order the
   argument is made, so the page still reads top to bottom rather than becoming a column of cards. */

@media (max-width:1080px){
  .lp-split{grid-template-columns:1fr;gap:40px}
  .lp-split.flip .lp-split-v{order:0}
  /* Two across: the divider now falls on every second cell, and the last row is whichever two
     are last. Re-stated rather than inherited, because nth-child(3n) is a claim about three. */
  .lp-feat{grid-template-columns:repeat(2,1fr)}
  .lp-feat-i{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .lp-feat-i:nth-child(3n){border-right:1px solid var(--line-2)}
  .lp-feat-i:nth-child(2n){border-right:0}
  .lp-feat-i:nth-last-child(-n+3){border-bottom:1px solid var(--line-2)}
  .lp-feat-i:nth-last-child(-n+2){border-bottom:0}
  .lp-flow{grid-template-columns:repeat(3,1fr)}
  .lp-step{border-bottom:1px solid var(--line-2)}
  .lp-step:nth-child(3n){border-right:0}
  .lp-step:nth-last-child(-n+3){border-bottom:0}
  .lp-app{grid-template-columns:150px 1fr}
}

@media (max-width:860px){
  .lp-nav,.lp-bar .lp-acts{display:none}
  .lp-burger{display:flex}
  .lp-grid.c3,.lp-who{grid-template-columns:1fr}
  .lp-strip{grid-template-columns:repeat(2,1fr)}
  .lp-strip div{border-bottom:1px solid var(--line-2)}
  .lp-strip div:nth-child(2n){border-right:0}
  .lp-strip div:nth-last-child(-n+2){border-bottom:0}
  .lp-app-rail{display:none}
  .lp-app{grid-template-columns:1fr}
  .lp-tiles{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:620px){
  .lp-wrap{padding:0 20px}
  .lp-hero{padding:56px 0 0}
  .lp-sec{padding:64px 0}
  .lp-close{padding:72px 0}
  .lp-grid.c2,.lp-feat{grid-template-columns:1fr}

  /* One column: every cell is a row, so there is no vertical divider at all and only the last
     row has no line under it. */
  .lp-feat-i{border-right:0;border-bottom:1px solid var(--line-2);padding:22px 20px}
  .lp-feat-i:nth-child(3n),.lp-feat-i:nth-child(2n){border-right:0}
  .lp-feat-i:nth-last-child(-n+3),.lp-feat-i:nth-last-child(-n+2){border-bottom:1px solid var(--line-2)}
  .lp-feat-i:last-child{border-bottom:0}
  .lp-flow{grid-template-columns:1fr}
  .lp-step{border-right:0}
  .lp-shot{margin-top:40px}
  .lp-cta .lp-btn{width:100%}
  .lp-foot-top{grid-template-columns:1fr 1fr;gap:28px}
}

/* ---------------------------------------------------------------------------------- the logo
   The lockup replaces the lettermark in the bar and the footer. Sized by height so the artwork's
   own aspect ratio decides the width — a logo squeezed to a fixed box is a logo somebody drew
   carefully and somebody else stretched.

   Sized generously, because of how this particular lockup is drawn: the wordmark occupies about a
   third of the image's height and the strapline under it a good deal less. At the 34px that looked
   right for a lettermark, "GARAGEX" was eleven pixels tall and the strapline was four — present,
   and unreadable. The bar opens up to hold it rather than the logo shrinking to fit the bar. */

.lp-bar .lp-wrap{height:88px}
.lp-mark img{height:56px;width:auto;display:block}

/* The footer's is the same lockup at the same size as the bar's, and the arithmetic is the whole
   reason this number is not 56 too. Down here the image wears the .brandplate white ground, and
   box-sizing is border-box everywhere, so the plate's 7px of padding comes out of the height rather
   than being added to it. 70 less 14 is 56: identical artwork, top and bottom.

   It had been 46, which is 32px of logo - the wordmark eleven pixels tall and the strapline under
   it four, on the one surface where there is room for neither to be a problem. */
.lp-foot-top .lp-mark img{height:70px}

@media (max-width:1000px){
  .lp-bar .lp-wrap{height:78px}
  .lp-mark img{height:48px}
  .lp-foot-top .lp-mark img{height:62px}
}

@media (max-width:720px){
  .lp-bar .lp-wrap{height:70px}
  .lp-mark img{height:42px}

  /* The footer column is the full width of a phone, so this one keeps its head while the bar's
     ducks: 42px of logo against the bar's 42, and the plate around it. */
  .lp-foot-top .lp-mark img{height:56px}
}

/* The footer's logo, on the dark ground it sits on.
 *
 * The artwork is drawn for paper — a navy wordmark on white — so on the carbon footer the letters
 * disappeared and all that was left was the red X, which reads as a broken image rather than as a
 * logo. It is given the white ground it was drawn for, exactly as the sign-in screen's dark half
 * does it, rather than being inverted into a white-on-dark version the brand does not have.
 *
 * The header logo needs none of this: that bar is white already. */
.lp-foot-top .lp-mark img{/* the plate is .brandplate, in the design system */}