/* =====================================================================
   Taskbook — the landing page. Built on the app's own tokens.css and
   app.css, so the close-ups further down are the real components rather
   than pictures of them. This file only adds the page around them.
   Light only: the page is designed on paper, and its one dark band
   (Privacy) is dark on purpose. privacy.html wears it too, for the top
   bar, footer and type.
   ===================================================================== */

/* app.css locks the body to the viewport for the app shell; the page scrolls */
html,body.landing{height:auto}
body.landing{overflow:visible;overflow-x:clip;background:var(--tb-bg);color:var(--tb-text)}
@media (prefers-reduced-motion:no-preference){html:has(body.landing){scroll-behavior:smooth}}
.landing a{color:var(--tb-text);text-decoration:none;transition:color var(--dur) var(--ease)}
.landing a:hover{color:var(--tb-accent-text)}

.lp-skip{position:fixed;left:16px;top:-48px;z-index:100;padding:8px 14px;border-radius:var(--r);background:var(--tb-text);
  color:var(--tb-bg)!important;font-weight:600;transition:top var(--dur) var(--ease)}
.lp-skip:focus{top:12px}

/* ------------------------------ buttons ------------------------------ */
.lp-btn{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:10px;font-size:15px;font-weight:600;
  white-space:nowrap;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.lp-btn-lg{height:54px;padding:0 24px;border-radius:12px;font-size:17px}
.landing .lp-btn-lime{background:var(--tb-accent);color:var(--tb-on-accent)}
.landing .lp-btn-lime:hover{background:color-mix(in srgb,var(--tb-accent) 88%,var(--tb-on-accent));color:var(--tb-on-accent)}
/* lime text is fine here: it sits on ink, never on paper */
.landing .lp-btn-ink{background:var(--tb-text);color:var(--tb-accent)}
.landing .lp-btn-ink:hover{background:color-mix(in srgb,var(--tb-text) 86%,var(--tb-bg));color:var(--tb-accent)}
.landing .lp-btn-line{border:1.5px solid var(--tb-text);font-weight:500}
.landing .lp-btn-line:hover{background:var(--tb-hover);color:var(--tb-text)}
.lp-btn:active{transform:translateY(1px)}

/* ------------------------------ top bar ------------------------------ */
.lp-top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:36px;height:72px;padding:0 56px;
  background:var(--tb-bg);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.lp-top.scrolled{border-bottom-color:var(--tb-line)}
.lp-brand{display:flex;align-items:center;gap:10px;flex:none}
.lp-brand img{display:block}
.lp-brand span{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.6px}
.lp-nav{display:flex;gap:28px;font-size:15px}
.lp-grow{flex:1}
.lp-signin{font-size:15px}
/* fills with page scroll; scaleX keeps it on the compositor */
.lp-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--tb-accent);
  transform:scaleX(var(--p,0));transform-origin:0 50%}

/* ------------------------------ hero ------------------------------ */
.lp-hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:118px 0 120px;overflow:hidden}
.lp-eyebrow{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--tb-border);border-radius:16px;
  font-family:var(--mono);font-size:13px;line-height:18px}
.lp-eyebrow i{width:8px;height:8px;border-radius:2px;background:var(--tb-accent)}
/* The design was drawn at Bricolage's smallest optical size, which is looser and wider than the
   one browsers pick automatically at display sizes. Pin it, or the headline breaks in other places. */
.lp-h1,.lp-brand span{font-variation-settings:"opsz" 12}
.lp-h1{max-width:1160px;margin:0;padding:0 20px;text-align:center;font-family:var(--font-display);
  font-size:clamp(42px,6vw,86px);font-weight:800;letter-spacing:-.041em;line-height:.96}
.lp-hl{padding:0 .14em;border-radius:.14em;background:var(--tb-accent)}
.lp-lede{max-width:720px;margin:0;padding:0 20px;text-align:center;font-size:21px;line-height:1.5;color:var(--tb-text-body)}
.lp-ctas{display:flex;flex-direction:column;align-items:center;gap:12px}
.lp-ctas-row{display:flex;gap:12px}
.lp-note{font-size:14px;line-height:20px;color:var(--tb-text-muted)}

.lp-stage{position:relative;display:flex;justify-content:center;width:100%;margin-top:20px;scroll-margin-top:96px}
/* the logo's two ruled lines, running in behind the demo */
.lp-bar{position:absolute;left:0;width:100%;height:60px;background:var(--tb-accent);
  transform:scaleX(var(--bar,.18));transform-origin:0 50%}
.lp-bar-1{top:240px}
.lp-bar-2{top:320px}
/* the hero's demo: the app's window at 1280×800, scaled to fit (hero.js) */
.lp-shot{position:relative;width:min(1120px,calc(100% - 40px));aspect-ratio:1280/800;overflow:hidden;
  background:var(--canvas);border:1px solid var(--tb-border);border-radius:16px;box-shadow:0 30px 80px var(--tb-shadow)}
.lp-heroapp{width:1280px;height:800px}
/* Assist docked as the app docks it: the page keeps clear of it (app.css .app.assist-open .main) */
.lp-heroapp .lp-main{padding-right:var(--assist-w)}
.lp-heroapp .ai-thread,.lp-herosolo .ai-thread{position:relative}
.lp-shot .lp-cursor{z-index:50}
.lp-shot .btn.lp-press,.lp-shot .ask-opt.lp-press{background:var(--press)}
.lp-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ------------------------------ pinned sections ------------------------------
   The section is taller than the screen and its stage sticks, so the demo plays
   as you scroll through it. Its height is how long the demo takes to play. */
.lp-pin{position:relative;height:var(--h,1600px)}
.lp-stick{position:sticky;top:0;display:flex;gap:70px;height:100vh;min-height:640px;padding:132px 80px 0;overflow:hidden}
.lp-copy{display:flex;flex-direction:column;gap:22px;flex:none;width:400px;padding-top:40px}
.lp-kicker{font-family:var(--mono);font-size:13px;line-height:18px;color:var(--tb-accent-text)}
.lp-kicker i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:2px;background:var(--tb-accent)}
.lp-kicker b{margin-right:10px;font-weight:400;color:var(--tb-text-muted)}
.lp-h2{margin:0;font-family:var(--font-display);font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1;
  font-variation-settings:"opsz" 12}
.lp-body{margin:0;font-size:19px;line-height:1.55;color:var(--tb-text-body)}
.lp-keys{display:flex;flex-wrap:wrap;gap:8px}
.lp-keys span{padding:4px 8px;border:1px solid var(--tb-border);border-radius:6px;font-size:13px;line-height:18px;color:var(--tb-text-muted)}
.lp-keys code{font-family:var(--mono);color:var(--tb-text)}
.lp-demo{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0;padding-top:40px}
.lp-card{background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:16px}
/* close-ups use the app's own rows and controls, but nothing in them is live */
.lp-demo .task,.lp-demo .t-title{cursor:default}
.lp-demo .task:hover{background:none}

/* ------------------------------ app close-ups ------------------------------
   Magnified, the way a close-up is: the app's real proportions, scaled as a whole. */
.lp-zoom{display:flex;flex-direction:column;gap:20px;zoom:1.25}
/* the app's quick-add dialog (.cmdk.quickadd), without the fixed positioning */
.lp-modal{padding:var(--s-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--elev)}
.lp-modal .composer{margin:0;border:0;background:transparent}
.lp-modal .ci{white-space:pre-wrap}
.lp-ph{color:var(--ink-3);opacity:.8}
.lp-caret{display:inline-block;width:1.5px;height:17px;margin:0 1px;vertical-align:-3px;background:var(--ink-1);
  animation:lp-blink 1.06s steps(1) infinite}
@keyframes lp-blink{50%{opacity:0}}
.lp-pressed{filter:brightness(.92)}
/* a cropped piece of an app page, on the app's own paper */
.lp-window{padding:4px 28px 8px;background:var(--canvas);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
.lp-land{overflow:hidden}

.lp-demo{position:relative}
.lp-demo .task.lp-hover{background:var(--surface)}
.lp-demo .check.lp-press{transform:scale(.88)}
/* a crop of a whole page: it shows as much as fits, magnified to suit (kit.js fitZoom) */
.lp-crop{position:relative;overflow:hidden;padding:0 24px}
.lp-page{position:relative;padding:24px 0 0}
.lp-toast{position:absolute;left:50%;bottom:20px;z-index:3;white-space:nowrap;opacity:0;animation:none}
.lp-cursor{position:absolute;left:0;top:0;z-index:4;opacity:0;pointer-events:none}
.lp-cursor svg{display:block}

/* a whole app window: topbar and view, cropped by the frame like a smaller window would be */
.lp-appframe{padding:0;background:var(--canvas)}
.lp-app .topbar{padding:0 20px}
.lp-app .board{position:relative;height:auto;overflow:visible}
.lp-app .col{max-height:none}
.lp-app .col-body{overflow:visible}
.lp-demo .card.lp-press{background:var(--hover)}
.lp-slot{overflow:hidden}
.lp-float{position:absolute;left:0;top:0;z-index:5;margin:0;pointer-events:none}
.lp-board .lp-cursor{z-index:6}

/* ------------------------------ 01 quick add ------------------------------ */
#quick-add{--h:1600px}

/* ------------------------------ 02 list ------------------------------ */
#views{--h:1800px}

/* ------------------------------ 03 board ------------------------------ */
#board{--h:2000px}

/* ------------------------------ 04 calendar ------------------------------ */
#calendar{--h:2000px}
.lp-calpage{padding-bottom:0}
/* columns at the width the app gives them on a 1440 screen; the weekend runs off the edge */
.lp-calgrid{grid-template-columns:56px repeat(7,150px);width:max-content;overflow:visible}
.lp-layer{position:absolute;pointer-events:none}
.lp-calgrid .lp-cursor{z-index:30}

/* ------------------------------ Assist docked beside a page (the hero) ------------------------------ */
.lp-app{position:relative}
/* Assist as the app docks it: the window's right edge, full height, with the page making room */
.lp-hasai .ai-panel{position:absolute;top:0;right:0;bottom:0;z-index:40;width:440px;transition:none}
.lp-hasai .lp-cursor{z-index:41}
.lp-main{height:100%;overflow:hidden}
.lp-demo .btn.lp-press{background:var(--press)}

/* ------------------------------ 07 assist ------------------------------ */
#assist{--h:2200px}
/* the panel on its own, as it docks at the window's edge, its own height */
#assist .lp-demo,#undo .lp-demo{align-items:center}
#undo{--h:1500px}
.lp-solo .lp-cursor{z-index:50}
.lp-solo{flex:none}
.lp-solo .ai-panel{position:relative;inset:auto;z-index:auto;width:440px;border-left:0;transition:none}
/* the composer's textarea, drawn so the caret and placeholder show while nothing has focus */
.lp-ta{min-height:52px;padding:12px 14px 4px;font-size:15px;line-height:1.45;color:var(--ink-1);white-space:pre-wrap}
.ai-box.has-cmd .lp-ta{min-height:44px;padding-top:8px}

/* ------------------------------ 06 sync ------------------------------ */
#sync{--h:1800px}
.lp-stack{flex-direction:column;gap:30px;padding-top:120px}
.lp-synchead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.lp-syncintro{display:flex;flex-direction:column;gap:16px}
.lp-aside{max-width:420px;margin:0;font-size:17px;line-height:1.5;color:var(--tb-text-body)}
.lp-synccards{display:flex;gap:24px}
.lp-synccard{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;padding:24px;background:var(--tb-surface);
  border:1px solid var(--tb-border);border-radius:16px;box-shadow:0 20px 50px color-mix(in srgb,var(--tb-shadow) 55%,transparent)}
.lp-h3{margin:0;font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.5px;font-variation-settings:"opsz" 12}
.lp-synccard > p{margin:0;font-size:15px;line-height:1.5;color:var(--tb-text-body)}
.lp-syncpair{display:flex;justify-content:center;gap:0;margin-top:16px}
.lp-side{display:flex;flex-direction:column;gap:8px;width:250px;min-width:0}
.lp-sidelabel{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:18px}
.lp-sidelabel b{font-weight:600}
.lp-sidelabel span{font-size:12px;color:var(--tb-text-muted)}
.lp-syncicon{display:grid;place-items:center;width:56px;flex:none;padding-top:40px;color:var(--tb-accent-text)}
.lp-syncicon svg{width:28px;height:28px;stroke-width:2}
.lp-mini{border-radius:10px}
.lp-dayview .cal-grid{grid-template-columns:56px minmax(0,1fr);width:auto}
.lp-dayview .lp-calpage{padding:0}
.lp-inbox .task{margin:0;padding:12px 14px;border-radius:0}
.lp-inbox .task:last-child{border-bottom:0}
.lp-listframe{min-height:230px;background:var(--surface)}
/* the other side: a plain stand-in for the other app, not an imitation of it */
.lp-other{position:relative;flex:1;min-height:230px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:10px;overflow:hidden}
.lp-ghead{border-bottom:1px solid var(--tb-line)}
.lp-ghours{position:relative;height:calc(4 * 38px)}
.lp-ghour{position:absolute;left:0;right:0;height:38px;padding:3px 0 0 8px;border-top:1px solid var(--tb-line);
  font-family:var(--mono);font-size:10px;line-height:12px;color:var(--tb-text-muted)}
.lp-ghour:first-child{border-top:0}
.lp-gev{position:absolute;left:44px;right:8px;display:flex;flex-direction:column;padding:4px 8px;border-radius:5px;font-size:12px;line-height:15px;overflow:hidden}
/* a short event crops its second line, never squeezes the first */
.lp-gev > *{flex:none}
.lp-gev b{font-weight:600;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-gev span{color:var(--tb-text-muted)}
.lp-gev.mine{background:var(--tb-accent-tint);box-shadow:inset 3px 0 0 var(--tb-accent-text)}
.lp-gev.theirs{background:color-mix(in srgb,var(--tb-blue) 12%,var(--tb-surface));box-shadow:inset 3px 0 0 var(--tb-blue)}
.lp-tlist{padding:2px 12px}
.lp-trow{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--tb-line)}
.lp-tlist .lp-land:last-child .lp-trow,.lp-tlist > .lp-trow:last-child{border-bottom:0}
.lp-tcheck{display:grid;place-items:center;width:18px;height:18px;flex:none;margin-top:1px;border:1.5px solid var(--tb-text-faint);border-radius:50%;color:transparent}
.lp-tcheck svg{width:10px;height:10px;stroke-width:3}
.lp-ttitle{font-size:14px;line-height:20px}
.lp-tmeta{font-size:12px;line-height:16px;color:var(--tb-text-muted)}
.lp-trow.done .lp-tcheck{background:var(--tb-text-muted);border-color:var(--tb-text-muted);color:var(--tb-surface)}
.lp-trow.done .lp-ttitle{color:var(--tb-text-muted);text-decoration:line-through}

/* ------------------------------ features ------------------------------ */
.lp-band{display:flex;flex-direction:column;gap:40px;padding:120px 80px 60px}
.lp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.lp-card{display:flex;flex-direction:column;gap:10px;padding:26px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:16px}
.lp-h4{margin:0;font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.4px;line-height:1.2;font-variation-settings:"opsz" 12}
.lp-card p{margin:0;font-size:15px;line-height:1.55;color:var(--tb-text-body)}
/* a chip that wraps keeps its padding on both lines */
.lp-card code,.lp-card kbd{padding:1px 5px;border-radius:4px;background:var(--tb-panel);font-family:var(--mono);font-size:13px;color:var(--tb-text);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ------------------------------ privacy ------------------------------ */
/* the app's night paper (tokens.css .tb-night), so every --tb-* name below is its dark value */
.lp-night{gap:36px;padding:100px 80px;background:var(--tb-bg);color:var(--tb-text)}
.lp-bandhead{display:flex;flex-direction:column;gap:14px;max-width:760px}
.lp-night .lp-h4{font-size:22px}
.lp-night .lp-card p{line-height:1.5}
.landing .lp-more{align-self:flex-start;font-size:16px;color:var(--tb-accent-text);
  text-decoration:underline 1px;text-underline-offset:3px}
.landing .lp-more:hover{text-decoration-thickness:2px}

/* ------------------------------ faq ------------------------------ */
.lp-faq{gap:24px;padding:100px 80px 110px}
.lp-qa{margin:0;border-top:1px solid var(--tb-line)}
.lp-qa div{display:flex;gap:48px;padding:24px 0;border-bottom:1px solid var(--tb-line)}
.lp-qa dt{flex:none;width:420px;font-size:19px;font-weight:600;line-height:1.35}
.lp-qa dd{margin:0;font-size:17px;line-height:1.55;color:var(--tb-text-body)}

/* ------------------------------ closing band ------------------------------ */
/* The mark at 12px a unit, the band its tile; cta.js grows --bar and draws the check. */
.lp-cta{--u:12px;display:flex;flex-direction:column;align-items:center;gap:52px;padding:150px 0 130px;overflow:hidden;
  background:var(--tb-logo-tile)}
.lp-motif{position:relative;align-self:stretch;height:calc(16 * var(--u))}
.lp-ctabar{position:absolute;left:0;right:0;height:calc(4 * var(--u));background:var(--tb-logo-ink);
  transform:scaleX(var(--bar,1));transform-origin:0 50%}
.lp-ctabar:first-child{top:calc(3 * var(--u))}
.lp-ctabar + .lp-ctabar{top:calc(9 * var(--u))}
.lp-cutout{position:absolute;top:0;left:50%;width:calc(16 * var(--u));height:calc(16 * var(--u));margin-left:calc(-8 * var(--u));
  overflow:visible}
.lp-cutout circle{fill:var(--tb-logo-tile)}
/* drawn by its dash: a dash the length of the path, then a longer gap, shifted along by cta.js */
.lp-cutout path{fill:none;stroke:var(--tb-logo-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2}
.lp-ctacopy{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 20px;color:var(--tb-text);text-align:center}
.lp-cta .lp-h2{margin-bottom:22px;font-size:72px;letter-spacing:-2.5px}

/* ------------------------------ footer ------------------------------ */
.lp-foot{display:flex;align-items:center;gap:28px;height:140px;padding:0 80px;border-top:1px solid var(--tb-line);font-size:14px}
.lp-foot .lp-brand span{font-size:19px;letter-spacing:-.5px}
.lp-legal{color:var(--tb-text-muted)}

/* ------------------------------ the privacy page (privacy.html) ------------------------------ */
.lp-doc{max-width:760px;margin:0 auto;padding:160px 20px 120px}
.lp-updated{display:block;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--tb-text-muted)}
.lp-doc .lp-body{margin-top:28px;font-size:18px}
.lp-short{margin-top:32px;padding:22px 24px 8px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:16px}
.lp-doc h2{margin:56px 0 14px;font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.15;
  font-variation-settings:"opsz" 12}
.lp-doc p,.lp-doc li{font-size:16px;line-height:1.65;color:var(--tb-text-body)}
.lp-doc p{margin:0 0 14px}
.lp-doc ul{margin:0 0 14px;padding-left:20px}
.lp-doc li{margin-bottom:8px}
.lp-doc strong{font-weight:600;color:var(--tb-text)}
.landing .lp-doc a{color:var(--tb-accent-text);text-decoration:underline 1px;text-underline-offset:3px}
.landing .lp-doc a:hover{text-decoration-thickness:2px}
.lp-doc table{width:100%;margin:0 0 20px;border-collapse:collapse;font-size:15px;line-height:1.5}
.lp-doc th,.lp-doc td{padding:12px 16px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--tb-line)}
.lp-doc th{padding-top:0;border-bottom-color:var(--tb-border);font-family:var(--mono);font-size:12px;font-weight:400;color:var(--tb-text-muted)}
.lp-doc td{color:var(--tb-text-body)}
.lp-doc td:first-child{width:46%;color:var(--tb-text)}

/* ------------------------------ narrow ------------------------------ */
@media (max-width:1300px){
  .lp-zoom{zoom:1.12}
}
@media (max-width:1200px){
  .lp-stick{gap:48px;padding:132px 40px 0}
  .lp-copy{width:340px}
  .lp-h2{font-size:48px}
  .lp-band{padding:120px 40px 60px}
  .lp-night{padding:100px 40px}
  .lp-faq{padding:100px 40px 110px}
  .lp-qa dt{width:340px}
  .lp-cta .lp-h2{font-size:64px}
}
@media (max-width:1000px){
  .lp-top{gap:24px;padding:0 24px}
  .lp-nav{gap:20px}
}
@media (max-width:900px){
  .lp-top{height:64px;padding:0 16px;gap:16px}
  .lp-nav{display:none}
  .lp-hero{height:auto;padding:104px 0 64px}
  .lp-lede{font-size:18px}
  .lp-ctas-row{flex-wrap:wrap;justify-content:center;padding:0 16px}
  /* down here the demo is Assist on its own, as on a phone */
  .lp-shot{width:calc(100% - 32px)}
  .lp-shot.lp-heroframe-solo{width:min(calc(100% - 32px),480px);height:600px;aspect-ratio:auto}
  .lp-bar{transform:none;height:40px}
  .lp-bar-1{top:30%}
  .lp-bar-2{top:calc(30% + 56px)}
  /* nothing pins down here: text above, demo below, and the demo plays once as it arrives */
  .lp-pin{height:auto}
  .lp-stick{position:relative;flex-direction:column;gap:28px;height:auto;min-height:0;padding:72px 16px 24px}
  .lp-copy{width:auto;padding-top:0}
  .lp-h2{font-size:40px;letter-spacing:-1.4px}
  .lp-body{font-size:17px}
  .lp-demo{padding-top:0}
  .lp-zoom{zoom:1}
  .lp-calgrid{grid-template-columns:56px repeat(7,110px)}
  .lp-stack{padding-top:72px}
  .lp-synchead{flex-direction:column;align-items:flex-start;gap:16px}
  .lp-synccards{flex-direction:column}
  .lp-synccard{padding:18px}
  .lp-syncpair{flex-direction:column;align-items:stretch}
  .lp-side{width:auto}
  .lp-syncicon{width:auto;height:44px;padding:0}
  .lp-syncicon svg{transform:rotate(90deg)}
  .lp-window:not(.lp-appframe){padding:4px 16px 8px}
  .lp-band{gap:28px;padding:72px 16px 40px}
  .lp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lp-card{padding:20px}
  .lp-card:last-child:nth-child(odd){grid-column:1 / -1}           /* nine cards in two columns: no orphan */
  .lp-night{padding:72px 16px}
  .lp-faq{gap:20px;padding:72px 16px 80px}
  .lp-qa div{flex-direction:column;gap:6px;padding:20px 0}
  .lp-qa dt{width:auto;font-size:17px}
  .lp-qa dd{font-size:16px}
  .lp-cta{--u:9px;gap:40px;padding:96px 0 88px}
  .lp-ctacopy{padding:0 16px}
  .lp-cta .lp-h2{margin-bottom:14px;font-size:44px;letter-spacing:-1.5px}
  .lp-foot{flex-wrap:wrap;height:auto;gap:14px 24px;padding:32px 16px}
  .lp-foot .lp-grow{flex-basis:100%;height:0}                     /* the links drop to their own line */
  .lp-doc{padding:112px 16px 80px}
  .lp-doc h2{margin-top:44px;font-size:23px}
}
@media (max-width:600px){
  .lp-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .lp-signin{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lp-bar{transform:none}
  .lp-caret{animation:none}
}