/* Learn GTD — Helder's own lesson design.
   One type scale: the system font (SF Pro on Apple devices) for everything you read and tap; the rounded brand face
   only for a few moments that earn it (the page title, the loop's number, "Lesson complete").
   One scroll model: a lesson fills the screen, the page scrolls, and one footer with the primary button stays at
   the bottom above the home indicator. No fixed-height boxes.
   Calm gamification: your loop (progress per GTD step) and the Weekly Review streak. No hearts, gems or mascots. */

:root{
  --ls-title:700 1.75rem/1.18 var(--body);      /* 28 pt, Title 1 emphasized */
  --ls-head:600 1.0625rem/1.3 var(--body);      /* 17 pt, Headline */
  --ls-text:400 1.0625rem/1.5 var(--body);      /* 17 pt, Body, a little more leading for reading */
  --ls-sub:400 .9375rem/1.4 var(--body);        /* 15 pt, Subhead */
  --ls-foot:400 .8125rem/1.35 var(--body);      /* 13 pt, Footnote */
  --ls-r:14px;
}

/* ---------- Focus: a lesson or setup step fills the screen ---------- */
body.r-lesson .tabbar,body.r-lesson .nav,body.r-lesson .iosbar,body.r-lesson .ititle,body.r-lesson .top,
body.r-lesson #statusBar,body.r-lesson .fab{display:none!important}
body.r-lesson{padding:0!important}
body.r-lesson .wrap{display:block;max-width:none;padding:0;margin:0}
body.r-lesson #view{max-width:680px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px)) 0 max(20px,env(safe-area-inset-right,0px))!important}

.lesson{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));color:var(--ink);font:var(--ls-text)}
.lesson *{letter-spacing:normal}

/* Top bar: Close, the steps of this lesson, where you are. Stays put while you scroll. */
.ls-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 0;background:var(--paper)}
.ls-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 -7px;border:0;border-radius:50%;cursor:pointer;color:var(--muted);
  background:radial-gradient(circle,var(--fill) 15px,transparent 15.5px)}
.ls-x svg{width:16px;height:16px;stroke-width:2.6}
@media (hover:hover){.ls-x:hover{color:var(--ink)}}
.ls-segs{flex:1;display:flex;gap:4px;align-items:center;min-width:0}
.ls-segs i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.ls-segs i.done{background:color-mix(in srgb,var(--sc) 55%,var(--line))}
.ls-segs i.on{background:var(--sc)}
.ls-count{flex:none;min-width:44px;text-align:right;font:var(--ls-foot);color:var(--muted);font-variant-numeric:tabular-nums}

/* The step */
.ls-step{display:flex;flex-direction:column;gap:16px;padding:18px 0 8px}
.ls-eyebrow{margin:0;font:600 .8125rem/1.3 var(--body);color:var(--muted)}
.ls-eyebrow b{font-weight:600;color:var(--sc)}
.ls-intro{margin:-4px 0 0;font:var(--ls-sub);color:var(--muted)}
.ls-title{margin:-8px 0 0;font:var(--ls-title);letter-spacing:-.022em;text-wrap:balance;color:var(--ink)}
.ls-title:focus{outline:none}
.ls-body{margin:0;font:var(--ls-text);max-width:62ch}
.ls-hint{margin:-6px 0 0;font:var(--ls-sub);color:var(--muted)}
.ls-src{margin:-4px 0 0;font:var(--ls-foot);color:var(--muted)}

/* Grouped content, like an inset grouped list */
.ls-group{display:flex;flex-direction:column;background:var(--card);border-radius:var(--ls-r);overflow:hidden}
.ls-group > div{padding:12px 16px}
.ls-group > div + div{border-top:.5px solid var(--line)}
.ls-group small{display:block;font:600 .8125rem/1.3 var(--body);color:var(--muted)}
.ls-group p{margin:2px 0 0;font:var(--ls-text)}
.ls-group.gain small{color:var(--sc)}

/* The five steps (the first lesson) */
.ls-five{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ls-five li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--card);font:var(--ls-head);color:var(--ink)}
.ls-five i,.ls-num i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sc);color:var(--onsc,#fff);font:700 .8125rem/1 var(--body);font-style:normal;font-variant-numeric:tabular-nums}

/* Numbered list */
.ls-num{list-style:none;margin:0;padding:0;background:var(--card);border-radius:var(--ls-r)}
.ls-num li{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 16px;position:relative}
.ls-num li + li::before{content:"";position:absolute;top:0;left:52px;right:0;border-top:.5px solid var(--line)}
.ls-num span{font:var(--ls-text)}

/* Vague, then concrete */
.ls-pairs{list-style:none;margin:0;padding:0;background:var(--card);border-radius:var(--ls-r)}
.ls-pairs li{display:flex;flex-direction:column;gap:3px;padding:12px 16px;position:relative}
.ls-pairs li + li::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--line)}
.ls-pairs small{font:var(--ls-sub);color:var(--muted)}
.ls-pairs b{display:flex;gap:8px;align-items:flex-start;font:var(--ls-head)}
.ls-pairs b svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--sc)}

/* Without and with */
.ls-compare{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.ls-compare{grid-template-columns:1fr 1fr}}
.ls-compare section{background:var(--card);border-radius:var(--ls-r);padding:14px 16px}
.ls-compare h3{margin:0 0 8px;font:var(--ls-head)}
.ls-compare ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ls-compare li{display:flex;gap:10px;align-items:flex-start;font:var(--ls-sub)}
.ls-compare li svg{flex:none;width:18px;height:18px;margin-top:1px}
.ls-compare .wo h3,.ls-compare .wo li{color:var(--muted)}
.ls-compare .wi h3{color:var(--s4)}
.ls-compare .wi li svg{color:var(--s4)}

/* Questions: pick an option, then see Allen's approach next to yours */
.ls-choices{display:flex;flex-direction:column;gap:10px}
.ls-choice{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:52px;padding:13px 16px;border:0;border-radius:var(--ls-r);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background-color .15s,box-shadow .15s}
@media (hover:hover){.ls-choice:not(:disabled):hover{background:color-mix(in srgb,var(--sc) 6%,var(--card))}}
.ls-choice:not(:disabled):active{background:color-mix(in srgb,var(--sc) 10%,var(--card))}
.ls-choice:disabled{cursor:default;opacity:1}
.ls-mark{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--muted) 60%,transparent);color:var(--onsc,#fff)}
.ls-mark svg{width:15px;height:15px;stroke-width:2.6}
.ls-ct{display:flex;flex-direction:column;gap:4px;min-width:0}
.ls-ct b{font:var(--ls-head)}
.ls-ct small{font:var(--ls-sub);color:var(--ink);opacity:.82}
.ls-ct em{font-style:normal;font-weight:600;color:var(--s4)}
.ls-ct em.mine{color:var(--sc)}
.ls-choice.best{box-shadow:inset 0 0 0 1.5px var(--s4);background:color-mix(in srgb,var(--s4) 7%,var(--card))}
.ls-choice.best .ls-mark{background:var(--s4);box-shadow:none}
.ls-choice.mine:not(.best){box-shadow:inset 0 0 0 1.5px var(--sc)}
.ls-choice.mine:not(.best) .ls-mark{box-shadow:inset 0 0 0 7px var(--sc)}
.ls-choices:has(.best) .ls-choice:not(.best):not(.mine) .ls-ct b{color:var(--muted)}

/* Feedback line under a question */
.ls-res{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;background:var(--fill);font:var(--ls-sub);color:var(--ink)}
.ls-res svg{flex:none;width:20px;height:20px}
.ls-res b{font-weight:600}
.ls-res small{display:block;margin-top:4px;font:var(--ls-sub);color:var(--muted)}
.ls-res.ok{background:color-mix(in srgb,var(--s4) 11%,var(--card))}.ls-res.ok svg{color:var(--s4)}
.ls-res.no{background:color-mix(in srgb,var(--s1) 11%,var(--card))}.ls-res.no svg{color:var(--s1)}

/* Sorting */
.ls-sort{display:flex;flex-direction:column;gap:12px;padding:18px 16px;border-radius:var(--ls-r);background:var(--card);text-align:center}
.ls-of{margin:0;font:var(--ls-foot);color:var(--muted);font-variant-numeric:tabular-nums}
.ls-item{margin:-4px 0 2px;font:600 1.25rem/1.3 var(--body);letter-spacing:-.01em;text-wrap:balance}
.ls-sort .ls-res{text-align:left}
.ls-buckets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ls-buckets.b3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:600px){.ls-buckets.b4{grid-template-columns:repeat(4,minmax(0,1fr))}.ls-buckets.b6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ls-bucket{display:flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:8px 10px;border:0;border-radius:12px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);font:var(--ls-head);color:var(--ink);cursor:pointer;transition:background-color .15s}
@media (hover:hover){.ls-bucket:not(:disabled):hover{background:color-mix(in srgb,var(--sc) 6%,var(--card))}}
.ls-bucket:not(:disabled):active{background:color-mix(in srgb,var(--sc) 10%,var(--card))}
.ls-bucket:disabled{cursor:default;color:var(--muted)}
.ls-bucket svg{width:16px;height:16px;stroke-width:2.6}
.ls-bucket.right{box-shadow:inset 0 0 0 1.5px var(--s4);color:var(--s4);background:color-mix(in srgb,var(--s4) 7%,var(--card))}
.ls-bucket.mine{box-shadow:inset 0 0 0 1.5px var(--s1);color:var(--s1)}

/* Your turn: type into a field */
.lesson .lcap{display:flex;gap:8px}
.lesson .lcap input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:0;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:var(--ls-text);color:var(--ink)}
.lesson .lcap input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--sc),0 0 0 3.5px color-mix(in srgb,var(--sc) 22%,transparent)!important}
.lesson .lcap.two{flex-wrap:wrap}.lesson .lcap.two input{flex:1 1 140px}
.ls-meter{display:flex;align-items:center;gap:12px}
.ls-meter .lmeter{flex:1;display:flex;gap:6px}
.ls-meter .lmeter i{flex:1;height:6px;border-radius:3px;background:var(--line);animation:none}
.ls-meter .lmeter i.on{background:var(--sc)}
.ls-meter small{font:var(--ls-foot);color:var(--muted);font-variant-numeric:tabular-nums}
.lesson .lmeter{display:flex;gap:6px}
.lesson .lmeter i{flex:1;height:6px;border-radius:3px;background:var(--line);animation:none!important}
.lesson .lmeter i.on{background:var(--sc)}
.lesson .lfb{margin:0;font:var(--ls-head);color:var(--s4)}

/* Buttons. Familiar sizes: 50 pt primary, 44 pt targets. No 3D edges. */
.ls-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:12px;font:600 1.0625rem/1.2 var(--body);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.ls-btn:disabled{cursor:default}
.ls-btn.primary{min-height:50px;min-width:150px;padding:0 24px;border-radius:14px;background:var(--sc);color:var(--onsc,#fff)}
.ls-btn.primary:disabled{background:var(--fill);color:color-mix(in srgb,var(--muted) 80%,transparent)}
.ls-btn.tinted{background:color-mix(in srgb,var(--sc) 14%,var(--card));color:var(--sc)}
.ls-btn.tinted:disabled{opacity:.45}
.ls-btn.tinted.sq{min-width:44px;padding:0}
.ls-btn.tinted.lone{align-self:flex-start}
.ls-btn.plain{background:none;color:var(--sc);padding:0 10px;margin-left:-10px}
.ls-btn.plain + .ls-btn.plain{margin-left:0}
@media (hover:hover){.ls-btn.primary:not(:disabled):hover{filter:brightness(1.07)}.ls-btn.tinted:not(:disabled):hover{background:color-mix(in srgb,var(--sc) 20%,var(--card))}.ls-btn.plain:hover{opacity:.75}}
.ls-btn:not(:disabled):active{opacity:.7}
.ls-btn:focus-visible,.ls-choice:focus-visible,.ls-bucket:focus-visible,.ls-x:focus-visible,.lh-row:focus-visible,.lh-next:focus-visible{outline:3px solid color-mix(in srgb,var(--sc,var(--brand)) 55%,transparent);outline-offset:2px}

/* Footer: always at the bottom, always the same place. Secondary actions left, the primary right. */
.ls-foot{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-top:.5px solid var(--line)}
@media (prefers-reduced-transparency:reduce){.ls-foot{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
.ls-foot-in{display:flex;align-items:center;gap:8px;max-width:680px;margin:0 auto;
  padding:12px max(20px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.ls-aside{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap}
@media (max-width:380px){.ls-btn.primary{min-width:120px;padding:0 18px}}

/* Lesson complete */
.ls-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:8px}
.ls-done .ls-title{margin:8px 0 0}
.ls-celebrate{font-family:var(--hand)!important;font-weight:800!important;letter-spacing:-.02em!important}
.ls-lname{margin:0;font:var(--ls-text);color:var(--muted)}
.ls-step-progress{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--sc) 12%,var(--card));font:600 .9375rem/1.2 var(--body);color:var(--sc)}
.ls-step-progress i{width:8px;height:8px;border-radius:50%;background:var(--sc)}
.is-end .ls-eyebrow{display:none}

/* ---------- The loop (shared by the overview and lesson complete) ---------- */
.loopring{display:block;width:100%;height:100%}
.loopring circle{fill:none;stroke-width:10}
.loopring .tr{stroke:color-mix(in srgb,var(--sc) 20%,var(--card))}
.loopring .fill{stroke:var(--sc)}
.loopring .grow{stroke-dasharray:var(--to) 400;animation:lsgrow .9s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes lsgrow{from{stroke-dasharray:var(--from) 400}to{stroke-dasharray:var(--to) 400}}
.lh-ring{position:relative;flex:none;width:96px;height:96px}
.lh-ring > span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.lh-ring b{font:800 1.5rem/1 var(--hand);font-variant-numeric:tabular-nums;color:var(--ink)}
.lh-ring small{margin-top:2px;font:var(--ls-foot);color:var(--muted)}
.lh-ring.big{width:132px;height:132px}
.lh-ring.big > span svg{width:44px;height:44px;stroke-width:2.4;color:var(--sc);animation:lspop .4s ease-out .9s both}
@keyframes lspop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.loopring .grow,.lh-ring.big > span svg{animation:none}}

/* ---------- Overview ---------- */
.ltabs{display:flex!important;width:100%;max-width:440px;margin:0 0 4px}
.ltabs button{flex:1;min-height:32px;font:500 .875rem/1.2 var(--body)!important}
.ltabs button.on{font-weight:600!important}
.lhome{display:flex;flex-direction:column;gap:12px;max-width:640px;padding-bottom:12px}
.lh-title{margin:10px 0 0;font:800 1.75rem/1.15 var(--hand);letter-spacing:-.02em;color:var(--ink)}
.lh-sub{margin:-6px 0 4px;font:var(--ls-sub);color:var(--muted);max-width:52ch}
.lh-loop{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 20px;padding:16px;border-radius:16px;background:var(--card)}
.lh-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.lh-legend li{display:flex;align-items:center;gap:8px;font:var(--ls-sub)}
.lh-legend i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--sc)}
.lh-legend span{flex:1}
.lh-legend small{font:var(--ls-foot);color:var(--muted);font-variant-numeric:tabular-nums}
.lh-streak{display:flex;align-items:center;gap:10px;margin:0;font:var(--ls-sub);color:var(--muted)}
.lh-streak svg{flex:none;width:20px;height:20px;color:var(--s4)}
.lh-streak b{font-weight:600;color:var(--ink)}
.lh-loop .lh-streak{grid-column:1/-1;padding-top:12px;margin-top:4px;border-top:.5px solid var(--line)}
.lesson .lh-streak{justify-content:center}

/* Up next */
.lh-next{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-radius:16px;background:color-mix(in srgb,var(--sc) 9%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc) 22%,transparent);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.lh-next .lh-tx small{color:var(--sc);font-weight:600}
.lh-next .lh-tx span{font:var(--ls-sub);color:var(--muted)}
.lh-go{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:var(--sc);color:var(--onsc,#fff);font:600 .9375rem/1 var(--body)}
@media (hover:hover){.lh-next:hover{background:color-mix(in srgb,var(--sc) 13%,var(--card))}}
.lh-next:active{opacity:.8}

/* Lists */
.lh-sect{display:flex;justify-content:space-between;align-items:baseline;margin:14px 4px -4px;font:600 .8125rem/1.3 var(--body);color:var(--muted)}
.lh-sect small{font:var(--ls-foot);font-variant-numeric:tabular-nums}
.lh-list{list-style:none;margin:0;padding:0;border-radius:var(--ls-r);background:var(--card);overflow:hidden}
.lh-list li{position:relative}
.lh-list li + li::before{content:"";position:absolute;top:0;left:62px;right:0;border-top:.5px solid var(--line);z-index:1}
.lh-row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:9px 14px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
@media (hover:hover){.lh-row:hover{background:var(--fill)}}
.lh-row:active{background:var(--fill)}
.lh-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--sc) 13%,var(--card));color:var(--sc)}
.lh-ic .doodle{width:28px;height:14px}
.lh-ic > svg:not(.doodle){width:20px;height:20px;stroke-width:2.6}
.lh-row.done .lh-ic{background:var(--sc);color:var(--onsc,#fff)}
.lh-next .lh-ic{width:44px;height:44px;border-radius:12px;background:var(--card)}
.lh-next .lh-ic .doodle{width:34px;height:17px}
.lh-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lh-tx b{font:var(--ls-head)}
.lh-tx small{font:var(--ls-foot);color:var(--muted)}
.lh-st{flex:none;font:var(--ls-foot);color:var(--muted)}
.lh-row.next .lh-st{color:var(--sc);font-weight:600}
.lh-chev{flex:none;display:grid;color:var(--muted);opacity:.55}
.lh-chev svg{width:16px;height:16px}
.lh-note{margin:6px 4px 0;font:var(--ls-foot);color:var(--muted)}
.lh-reset{align-self:flex-start;margin:8px 4px 0;color:var(--muted)!important;font:var(--ls-foot)!important;text-decoration:none!important}
.lh-reset:hover{color:var(--ink)!important}

/* ---------- Setup steps: the widgets inside a step, in the same calm language ---------- */
.lesson .lprompts{display:flex;flex-wrap:wrap;gap:8px}
.lesson .lprompts span{padding:6px 12px;border-radius:999px;background:var(--card);box-shadow:none;font:var(--ls-sub)}
.lesson .lsweep{background:var(--card);border-radius:16px;padding:16px;gap:12px;box-shadow:none}
.lesson .lsweep h3{font:600 1.25rem/1.3 var(--body);letter-spacing:-.01em}
.lesson .lsweep .lprompts span{background:var(--fill)}
.lesson .lsweep .eyebrow{color:var(--muted);font:var(--ls-foot);letter-spacing:0;text-transform:none}
.lesson .ltimes li{box-shadow:none;border-radius:12px}
.lesson .ltimes b,.lesson .lsh b,.lesson .lbig b{font-family:var(--body);font-weight:700}
.lesson .lcapn{font:var(--ls-sub)}
.lesson .lctxchip{box-shadow:none;background:var(--card);font:var(--ls-sub)}
.lesson .ldays{gap:6px}
.lesson .ldaybtn{min-height:44px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font:600 .9375rem/1 var(--body)}
.lesson .ldaybtn.on{background:var(--sc);color:var(--onsc,#fff);box-shadow:none}
.lesson .ldaybtn:active{transform:none;opacity:.7}
.lesson .lprojs{box-shadow:none}
.lesson .lnaform input{min-height:40px}
.lesson .chalk{box-shadow:none!important}
.lesson > .lembedwrap{padding-top:8px}
@media (min-width:1000px){.ls-top{padding-top:18px}.ls-step{padding-top:28px}}
body.r-lesson .capbar,body.r-lesson .isearch{display:none!important}

/* ---------- On a large screen: a stage, not a document ----------
   Learned from how good lesson apps use a big screen (not copied): the top bar runs edge to edge, the step sits in the
   middle of the screen instead of at the top of an empty page, one visual anchor carries each screen, type grows with
   the room, and the footer is a full-width bar with the button at the right edge where the eye ends. */
.ls-art{display:none}
body.r-lesson .capbar{display:none!important}
@media (min-width:900px){
  body.r-lesson #view{max-width:none;padding:0!important}
  .lesson{min-height:100dvh;padding-bottom:0}
  .ls-top{padding:14px 40px;min-height:68px;gap:20px}
  .ls-segs i{height:6px}
  .ls-count{font-size:.9375rem}
  .ls-step{flex:1;width:100%;max-width:720px;margin:0 auto;padding:24px 40px 140px!important;display:flex;flex-direction:column;justify-content:center}
  .ls-art{display:block;color:var(--sc);margin:0 0 18px}
  .ls-art .lsdd{width:132px;height:66px;stroke-width:2.4}
  .lesson{--ls-title:700 2.375rem/1.15 var(--body);--ls-text:400 1.25rem/1.55 var(--body);--ls-head:600 1.25rem/1.3 var(--body);--ls-sub:400 1.0625rem/1.45 var(--body)}
  .ls-eyebrow{font-size:.9375rem}
  .ls-foot{left:0;right:0}
  .ls-foot-in{max-width:none!important;padding:16px 40px!important;min-height:96px}
  .ls-btn.primary{min-height:56px;min-width:190px;font-size:1.0625rem;border-radius:16px}
  .ls-choice{min-height:64px;font-size:1.125rem}
}
@media (min-width:1300px){ .ls-step{max-width:780px} .ls-art .lsdd{width:160px;height:80px} }
/* A lower screen (a 13-inch laptop): keep the stage, lose the extra height so nothing has to scroll. */
@media (min-width:900px) and (max-height:860px){
  .ls-art{margin-bottom:10px}.ls-art .lsdd{width:96px;height:48px}
  .lesson{--ls-title:700 2rem/1.15 var(--body);--ls-text:400 1.125rem/1.5 var(--body)}
  .ls-step{padding:8px 40px 100px!important}
  .ls-top{min-height:56px;padding:8px 40px}
  .ls-foot-in{min-height:76px;padding:10px 40px!important}
}
@media (min-width:900px) and (max-height:760px){ .ls-art{display:none} }