/* rules the live sheet carries for the landing's own pointers (styles.ts LANDING_POINTERS_DRAFT) are reused as they are */
.dl .hero .p-eyebrow:where(:not(.v16-root *)){display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;background:rgba(255,143,31,.14);color:#8a4a00;
  font-size:var(--t-meta);font-weight:var(--w-ui);margin:0 auto 18px}
.dl .hero .p-h1:where(:not(.v16-root *)){font-size:var(--t-display);max-width:14ch;margin-inline:auto}
.dl .hero .p-line:where(:not(.v16-root *)){max-width:40ch}

/* the count pill: the app's label and its five-step meter, in the sheet's amber (.plan .tag) */
.dl .p-seen-pill:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(255,143,31,.14);color:#8a4a00;
  font-size:var(--t-meta);font-weight:var(--w-ui);white-space:nowrap}
.dl .p-meter:where(:not(.v16-root *)){display:inline-flex;gap:2px;align-items:flex-end}
.dl .p-meter i:where(:not(.v16-root *)){display:block;width:4px;height:12px;border-radius:2px;background:rgba(138,74,0,.22)}
.dl .p-meter i.on:where(:not(.v16-root *)){background:#8a4a00}

/* A: subject chips under the hero */
.dl .p-chips:where(:not(.v16-root *)){display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:36px auto 0;max-width:760px}
.dl .p-chips a:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:8px;min-height:var(--ctl);padding:0 16px;border-radius:999px;background:var(--card);
  box-shadow:0 0 0 1px var(--line) inset;font-size:var(--t-small);font-weight:var(--w-ui);color:var(--fg)}
.dl .p-chips a .num:where(:not(.v16-root *)){color:var(--fg3);font-weight:400}
@media (max-width:699px){.dl .p-chips:where(:not(.v16-root *)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}.dl .p-chips a:where(:not(.v16-root *)){justify-content:space-between;padding:4px 14px;font-size:var(--t-meta);text-align:left;line-height:1.3}}

/* A: a subject's block */
.dl .p-subjs:where(:not(.v16-root *)){display:grid;gap:var(--sec);padding-top:var(--sec)}
.dl .p-subj:where(:not(.v16-root *)){max-width:860px;margin-inline:auto;width:100%;scroll-margin-top:96px}
.dl .p-subj-head:where(:not(.v16-root *)){display:grid;gap:10px;margin-bottom:22px}
.dl .p-subj-name:where(:not(.v16-root *)){font-size:var(--t-title);font-weight:var(--w-title);letter-spacing:-.035em;line-height:1.04}
.dl .p-subj-figs:where(:not(.v16-root *)){display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--t-small);color:var(--fg2)}
.dl .p-subj-figs b:where(:not(.v16-root *)){color:var(--fg);font-weight:var(--w-strong)}

/* a question card */
.dl .p-qs:where(:not(.v16-root *)){display:grid;gap:14px;margin:0;padding:0;list-style:none}
.dl .p-q:where(:not(.v16-root *)){display:grid;gap:14px;padding:var(--card-pad);border-radius:var(--r-card);background:var(--card);box-shadow:0 0 0 1px var(--line) inset,0 30px 60px -40px rgba(13,27,42,.35);text-align:left}
.dl .p-q-top:where(:not(.v16-root *)){display:flex;align-items:center;gap:12px}
.dl .p-q-n:where(:not(.v16-root *)){display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--panel-2);font-size:var(--t-small);font-weight:var(--w-strong)}
.dl .p-q-text:where(:not(.v16-root *)){font-size:var(--t-h3);font-weight:var(--w-strong);letter-spacing:-.015em;line-height:1.35;text-wrap:pretty}
.dl .p-q-meta:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3)}
.dl .p-opts:where(:not(.v16-root *)){display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dl .p-opts li:where(:not(.v16-root *)){display:flex;align-items:center;gap:12px;min-height:var(--ctl);padding:8px 14px 8px 8px;border-radius:var(--r-ctl);
  box-shadow:0 0 0 1px var(--line) inset;font-size:var(--t-body);line-height:1.4;color:var(--fg)}
.dl .p-key:where(:not(.v16-root *)){flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--panel-2);font-size:var(--t-meta);font-weight:var(--w-strong);color:var(--fg2)}

/* locked rows: grey bars only, no text */
.dl .p-ghosts:where(:not(.v16-root *)){display:grid;gap:14px;margin:14px 0 0;padding:0;list-style:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 100%)}
.dl .p-ghosts li:where(:not(.v16-root *)){display:grid;gap:10px;padding:var(--card-pad);border-radius:var(--r-card);background:var(--card);box-shadow:0 0 0 1px var(--line) inset}
.dl .p-ghosts i:where(:not(.v16-root *)){display:block;height:12px;border-radius:999px;background:var(--panel-2)}

/* the lock: the packs section's Free card colours (.r-free) */
.dl .p-lock:where(:not(.v16-root *)){display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:start;margin-top:14px;padding:var(--card-pad);
  border-radius:var(--r-card);background:var(--panel-2);text-align:left}
.dl .p-lock-ico:where(:not(.v16-root *)){display:grid;place-items:center;width:var(--ctl);height:var(--ctl);border-radius:50%;background:var(--card);color:var(--fg);box-shadow:0 0 0 1px var(--line) inset}
.dl .p-lock-ico .i:where(:not(.v16-root *)){width:20px;height:20px}
.dl .p-lock-txt:where(:not(.v16-root *)){display:grid;gap:6px}
.dl .p-lock-txt b:where(:not(.v16-root *)){font-size:var(--t-h3);font-weight:var(--w-strong);letter-spacing:-.015em;line-height:1.25}
.dl .p-lock-txt span:where(:not(.v16-root *)){font-size:var(--t-small);line-height:1.5;color:var(--fg2);text-wrap:pretty}
.dl .p-lock-acts:where(:not(.v16-root *)){grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
@media (min-width:700px){.dl .p-lock-acts:where(:not(.v16-root *)){grid-column:2}}
/* the hero's runway reaches below the hero (.hero-art bottom); the new parts sit over it, as the landing's sections do */
.dl .p-subj:where(:not(.v16-root *)),.dl .p-lock:where(:not(.v16-root *)),.dl .p-qs:where(:not(.v16-root *)){position:relative;z-index:1}