/*! LifeLearn -- Library guide system v1.0.0
 *  FILE: ll-guide-styles-v1.css   ->   wp-content/lifelearn-assets/css/
 *  Extracted verbatim from the New Parent Guide exemplar (page 544) so that
 *  every guide page carries markup only. Do not add page-specific rules here.
 */

/* -- base --- */
.ll-resource *, .ll-resource *::before, .ll-resource *::after { box-sizing: border-box; }
.ll-resource { font-family: "DM Sans", system-ui, sans-serif; color: #2D3748; -webkit-font-smoothing: antialiased; line-height: 1.75; }
.ll-resource a { text-decoration: none; color: inherit; }
.ll-resource img { display: block; max-width: 100%; }
.ll-resource {
  --navy: #0E1B3D; --navy-deep: #050B1E;
  --teal: #0E9F8B; --teal-dark: #0B8676;
  --teal-light: #E1F5EE; --teal-mist: #F0FBF8;
  --gold: #F59E0B; --white: #FFFFFF;
  --off-white: #F8F9FB; --cream: #FFFBF5;
  --grey-200: #E2E8F0;
  --text-body: #2D3748; --text-muted: #5A6577; --text-soft: #94A3B8;
  --shadow-sm: 0 2px 12px rgba(14,27,61,0.06);
  --shadow-md: 0 8px 32px rgba(14,27,61,0.10);
  --radius: 12px; --radius-lg: 20px;
}

/* -- reading progress --- */
.ll-progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg,#0E9F8B,#3DBDAF); z-index: 99999; transition: width 0.1s ease; border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(14,159,139,0.5); }

/* -- navigation is NOT ours ---------------------------------------
 * Code Snippet 79 (the "On this page" panel) prints
 *     nav.jump-nav { display: none !important; }
 * on every page it runs on, which is every guide page. The panel IS the
 * navigation. Our <nav class="jump-nav"> stays in the markup only as the
 * panel's fallback source; it is never shown, so it carries no styling
 * here. Do not restyle it - the site will hide it again anyway.
 * ---------------------------------------------------------------- */
nav.jump-nav { display: none; }

/* -- reveal on scroll --- */
.ll-resource .reveal { opacity: 1; transform: none; transition: opacity 0.65s ease, transform 0.65s ease; }
html.ll-anim .ll-resource .reveal { opacity: 0; transform: translateY(20px); }
html.ll-anim .ll-resource .reveal.visible { opacity: 1; transform: none; }
.ll-resource .reveal.d1 { transition-delay: .06s; }
.ll-resource .reveal.d2 { transition-delay: .12s; }
.ll-resource .reveal.d3 { transition-delay: .18s; }

/* -- measure --- */
.ll-resource .wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.ll-resource .wrap--wide { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ll-resource .w { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media(min-width:640px) { .ll-resource .w { padding: 0 28px; } }
@media(max-width:479px) { .ll-resource .wrap, .ll-resource .wrap--wide { padding: 0 16px; } }

/* -- type --- */
.ll-resource h1, .ll-resource h2, .ll-resource h3, .ll-resource h4 { font-family: "Outfit", sans-serif; color: var(--navy); letter-spacing: -0.02em; }
.ll-resource p { margin: 0 0 22px; font-size: 18.5px; line-height: 1.8; }
.ll-resource p:last-child { margin-bottom: 0; }

/* -- hero --- */
.ll-resource .hero { position: relative; background: linear-gradient(148deg,#0E1B3D 0%,#16295C 52%,#0C463C 100%); padding: 56px 0 0; overflow: hidden; color: #fff; }
.ll-resource .hero::before { content: ""; position: absolute; top: -140px; right: -100px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(14,159,139,.28) 0%,transparent 65%); pointer-events: none; }
.ll-resource .hero::after { content: ""; position: absolute; bottom: 40px; left: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle,rgba(14,159,139,.12) 0%,transparent 65%); pointer-events: none; }
.ll-resource .hero-tx { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size: 52px 52px; pointer-events: none; }
.ll-resource .hero-in { position: relative; z-index: 2; padding: 0 0 48px; text-align: center; }
.ll-resource .hero-eye { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px; border-radius: 999px; margin-bottom: 18px; background: rgba(255,255,255,.09); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); font-family: "Outfit", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.88); }
.ll-resource .hero-eye svg { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 2.1; }
.ll-resource .hero h1 { font-family: "Outfit", sans-serif; font-size: clamp(36px,6.5vw,66px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; color: #fff; margin: 0 auto 16px; max-width: 680px; }
.ll-resource .hero h1 em { font-style: italic; color: #FFE9B8; font-size: .75em; }
.ll-resource .hero-sub { font-size: clamp(15px,2vw,18px); line-height: 1.7; color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto 20px; }
.ll-resource .hero-stats { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; overflow: hidden; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.ll-resource .hstat { padding: 7px 16px; color: rgba(255,255,255,.80); }
.ll-resource .hstat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.12); }
.ll-resource .hstat strong { color: #fff; font-weight: 800; }

/* -- category strip --- */
.ll-resource .lib-cat-strip { position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-start; padding: 14px 20px; background: rgba(0,0,0,.30); border-top: 1px solid rgba(255,255,255,.07); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
@media(min-width:640px) { .ll-resource .lib-cat-strip { justify-content: center; } }
.ll-resource .lib-cat-strip::-webkit-scrollbar { display: none; }
.ll-resource .s-back { display: inline-flex; align-items: center; gap: 5px; font-family: "Outfit", sans-serif; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.55); white-space: nowrap; padding-right: 16px; margin-right: 16px; border-right: 1px solid rgba(255,255,255,.13); flex-shrink: 0; text-decoration: none; transition: color .15s; }
.ll-resource .s-back:hover { color: #fff; }
.ll-resource .s-pills { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; }
.ll-resource .s-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; font-family: "Outfit", sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.65); white-space: nowrap; text-decoration: none; transition: background .2s, color .2s; }
.ll-resource .s-pill:hover { background: rgba(255,255,255,.14); color: #fff; }
.ll-resource .sdot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
@media(max-width:479px) { .ll-resource .lib-cat-strip { padding: 12px 14px; } .ll-resource .s-pill { font-size: 9px; padding: 6px 11px; } }

/* -- sections --- */
.ll-resource .section { padding: 48px 0; }
@media(min-width:720px) { .ll-resource .section { padding: 72px 0; } }
.ll-resource .section--white { background: var(--white); }
.ll-resource .section--off-white { background: var(--off-white); }
.ll-resource .section--teal { background: linear-gradient(135deg,#f0faf8 0%,#e8f7f4 100%); }
.ll-resource .section-label { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; background: var(--teal-light); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 16px; }
.ll-resource .section-label svg { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 2.1; }
.ll-resource .section-h2 { font-size: clamp(26px,3.5vw,36px); font-weight: 800; line-height: 1.18; margin: 0 0 20px; }
.ll-resource .section-h2 em { font-style: italic; color: var(--teal-dark); }

/* -- pull quote (never narrated) --- */
.ll-resource .pull-quote { border-left: 4px solid var(--teal); padding: 20px 28px; margin: 36px 0; background: var(--teal-mist); border-radius: 0 var(--radius) var(--radius) 0; }
.ll-resource .pull-quote p { font-family: "Outfit", sans-serif; font-size: clamp(18px,2.2vw,22px); font-weight: 600; font-style: italic; color: var(--navy); line-height: 1.45; margin: 0; }

/* -- callout (never narrated) --- */
.ll-resource .callout { background: var(--cream); border: 1px solid #F4E4BC; border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 22px 26px; margin: 32px 0; }
.ll-resource .callout-label { display: inline-flex; align-items: center; gap: 6px; font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #B45309; margin: 0 0 8px; }
.ll-resource .callout-label svg { width: 14px; height: 14px; flex: 0 0 auto; stroke-width: 2.1; }
.ll-resource .callout p { font-size: 15.5px; color: var(--text-body); margin: 0 0 10px; line-height: 1.68; }
.ll-resource .callout p:last-child { margin-bottom: 0; }
.ll-resource .callout-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: "Outfit", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--teal-dark); }
.ll-resource .callout-link:hover { text-decoration: underline; }

/* -- numbered step list --- */
.ll-resource .week-list { display: flex; flex-direction: column; gap: 16px; margin: 28px 0; }
.ll-resource .week-item { display: flex; gap: 20px; align-items: center; padding: 22px 24px; background: #fff; border: 1px solid #E8EDF4; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ll-resource .week-num { min-width: 54px; height: 36px; padding: 0 14px; border-radius: 100px; background: linear-gradient(135deg,#0E9F8B,#0B8676); color: #fff; font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; white-space: nowrap; letter-spacing: 0.2px; line-height: 1; }
.ll-resource .week-content strong { display: block; font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.ll-resource .week-content p { font-size: 14.5px; color: var(--text-muted); margin: 0; line-height: 1.65; }
.ll-resource .ll-subcard { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 13px 16px; border-radius: 12px; background: #F0FBF8; border: 1px solid #CDEDE5; border-left: 3px solid #0B8676; }
.ll-resource .ll-subcard strong { font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 700; color: #0E1B3D; }
.ll-resource .ll-subcard span { font-size: 13.5px; color: #5A6577; line-height: 1.5; }

/* -- feel cards --- */
.ll-resource .feel-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 28px 0; }
@media(min-width:600px) { .ll-resource .feel-grid { grid-template-columns: 1fr 1fr; } }
.ll-resource .feel-card { background: #fff; border: 1px solid #E8EDF4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ll-resource .feel-accent { height: 4px; background: linear-gradient(90deg,#0E9F8B,#3DBDAF); }
.ll-resource .feel-body { padding: 20px 22px; }
.ll-resource .feel-icon { line-height: 0; margin-bottom: 10px; }
.ll-resource .feel-icon svg { width: 26px; height: 26px; stroke: #0B8676; fill: none; stroke-width: 1.7; }
.ll-resource .feel-card h4 { font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.ll-resource .feel-card p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.65; }

/* -- checklist --- */
.ll-resource .checklist { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-direction: column; gap: 0; border: 1px solid #E8EDF4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ll-resource .checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid #F0F4F8; background: #fff; font-size: 14.5px; color: var(--text-body); line-height: 1.6; }
.ll-resource .checklist li:last-child { border-bottom: none; }
.ll-resource .checklist-week { font-family: "Outfit", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark); background: var(--teal-light); padding: 2px 8px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.ll-resource .checklist-week--2 { color: #6D28D9; background: #EDE9FE; }
.ll-resource .checklist-week--3 { color: #065F46; background: #D1FAE5; }
.ll-resource .checklist-week--4 { color: #92400E; background: #FEF3C7; }

/* -- ledger (do / skip, is / isn't) --- */
.ll-resource .ledger { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 30px 0; }
@media(min-width:760px) { .ll-resource .ledger { grid-template-columns: 1fr 1fr; gap: 22px; } }
.ll-resource .ledger-col { border-radius: 18px; overflow: hidden; border: 1px solid #E8EDF4; background: #fff; box-shadow: 0 2px 12px rgba(14,27,61,0.06); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.ll-resource .ledger-col:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14,27,61,0.10); }
@media(prefers-reduced-motion:reduce) { .ll-resource .ledger-col { transition: none; } }
.ll-resource .ledger-col--do { border-color: #A7F3D0; }
.ll-resource .ledger-col--skip { border-color: #FECACA; }
.ll-resource .ledger-head { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid #EEF2F7; }
.ll-resource .ledger-col--do .ledger-head { background: linear-gradient(90deg,#ECFDF5,#F0FDF9); }
.ll-resource .ledger-col--skip .ledger-head { background: linear-gradient(90deg,#FEF2F2,#FFF5F5); }
.ll-resource .ledger-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.ll-resource .ledger-col--do .ledger-badge { background: #059669; color: #fff; }
.ll-resource .ledger-col--skip .ledger-badge { background: #DC2626; color: #fff; }
.ll-resource .ledger-badge svg { width: 17px; height: 17px; }
.ll-resource .ledger-htx { display: flex; flex-direction: column; line-height: 1.1; }
.ll-resource .ledger-eyebrow { display: block; font-family: "Outfit", sans-serif; font-size: 14.5px; font-weight: 800; color: #0E1B3D; letter-spacing: -0.01em; line-height: 1.1; }
.ll-resource .ledger-head h2.ledger-subh2.section-h2,
article.ll-resource .ledger-head h2.ledger-subh2.section-h2 { font-family: "DM Sans", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; line-height: 1.1 !important; margin: 3px 0 0 0 !important; padding: 0 !important; }
.ll-resource .ledger-col--do .ledger-head h2.ledger-subh2.section-h2 { color: #059669 !important; }
.ll-resource .ledger-col--skip .ledger-head h2.ledger-subh2.section-h2 { color: #DC2626 !important; }
.ll-resource .ledger-list { list-style: none !important; margin: 0 !important; padding: 6px 0 !important; display: flex; flex-direction: column; }
.ll-resource .ledger-list li.ledger-row { list-style: none !important; display: flex !important; align-items: flex-start; gap: 12px; padding: 11px 20px !important; margin: 0; border-bottom: 1px solid #F4F7FA; font-family: "DM Sans", sans-serif; font-size: 14.5px; line-height: 1.5; color: #2D3748; }
.ll-resource .ledger-list li.ledger-row:last-child { border-bottom: 0; }
.ll-resource .ledger-list li.ledger-row::marker { content: "" !important; }
.ll-resource .ledger-list li.ledger-row::before,
article.ll-resource .ledger-list li.ledger-row::before { content: none !important; display: none !important; }
.ll-resource .ledger-chip { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ll-resource .ledger-col--do .ledger-chip { background: #D1FAE5; color: #059669; }
.ll-resource .ledger-col--skip .ledger-chip { background: #FEE2E2; color: #DC2626; }
.ll-resource .ledger-chip svg.ledger-mk { width: 13px; height: 13px; }
.ll-resource .ledger-tx { flex: 1 1 auto; min-width: 0; }
/* the narrator reads .do-list li -- keep the class on ledger lists */
.ll-resource .do-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 9px; }
.ll-resource .do-list li { list-style: none !important; display: flex !important; gap: 8px !important; align-items: flex-start !important; font-size: 14px; line-height: 1.55; }
.ll-resource .do-list li::marker { content: "" !important; }
.ll-resource .do-list li::before { content: none !important; }
.ll-resource .ledger-list.do-list { gap: 0; }

/* -- what's next cards --- */
.ll-resource .next-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media(min-width:600px) { .ll-resource .next-grid { grid-template-columns: 1fr 1fr; } }
.ll-resource .next-card { background: #fff; border: 1px solid #E8EDF4; border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease; box-shadow: var(--shadow-sm); }
.ll-resource .next-card:hover { transform: translateY(-3px); border-color: rgba(14,159,139,.35); }
.ll-resource .next-num { font-family: "Outfit", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 6px; }
.ll-resource .next-card h4 { font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.ll-resource .next-card p { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.55; flex-grow: 1; }
.ll-resource .next-cta { font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.ll-resource .next-all { display: block; text-align: center; margin-top: 40px; font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 600; color: var(--teal-dark); }

/* -- pre-footer --- */
.ll-resource .prefooter { position: relative; background: linear-gradient(148deg,#0E1B3D 0%,#16295C 52%,#0C463C 100%); padding: 56px 0; overflow: hidden; color: #fff; }
@media(min-width:720px) { .ll-resource .prefooter { padding: 88px 0; } }
.ll-resource .prefooter::before { content: ""; position: absolute; top: -140px; right: -100px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(14,159,139,.28) 0%,transparent 65%); pointer-events: none; }
.ll-resource .prefooter::after { content: ""; position: absolute; bottom: -90px; left: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle,rgba(14,159,139,.12) 0%,transparent 65%); pointer-events: none; }
.ll-resource .prefooter-tx { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size: 52px 52px; pointer-events: none; }
.ll-resource .prefooter-in { position: relative; z-index: 2; text-align: center; max-width: 600px; margin: 0 auto; padding: 0 24px; }
.ll-resource .prefooter-eye { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px; border-radius: 999px; margin-bottom: 18px; background: rgba(255,255,255,.09); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); font-family: "Outfit", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.88); }
.ll-resource .prefooter-eye svg { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 2.1; }
.ll-resource .prefooter h2 { font-family: "Outfit", sans-serif; font-size: clamp(26px,4.5vw,40px); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; color: #fff; margin: 0 0 14px; }
.ll-resource .prefooter h2 em { font-style: italic; color: #FFE9B8; }
.ll-resource .prefooter p { font-size: clamp(15px,2vw,17px); line-height: 1.7; color: rgba(255,255,255,.72); max-width: 460px; margin: 0 auto 26px; }

/* -- buttons --- */
.ll-resource .cta-btns { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0 20px; }
@media(min-width:500px) { .ll-resource .cta-btns { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; padding: 0; } }
.ll-resource .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 600; border: 2px solid transparent; transition: all .22s ease; }
.ll-resource .btn--white { background: var(--white); color: var(--navy); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.ll-resource .btn--white:hover { transform: translateY(-2px); }
.ll-resource .btn--outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.ll-resource .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

/* -- hero and pre-footer fill their CONTAINER, not the window ------
 * calc(50% - 50vw) measures from the browser window. The site's fixed
 * left icon rail makes the content canvas about 78px narrower, so a
 * viewport bleed lands half the rail out and drags a sideways scrollbar
 * across every desktop width. Filling the container is what the live
 * guides actually do.
 * ---------------------------------------------------------------- */
.ll-resource .hero, .ll-resource .prefooter { width: 100%; margin-left: 0; margin-right: 0; }
.ll-resource { overflow-x: clip; }

/* -- mobile --- */
@media(max-width:720px) {
  .ll-resource .hero-in { padding: 0 0 36px; }
  .ll-resource .hero-tx { background-size: 40px 40px; }
  .ll-resource .lib-cat-strip { padding: 14px 18px; justify-content: flex-start; }
}
@media(max-width:639px) {
  .ll-resource .hero { padding-top: 48px; }
  .ll-resource .hero-in { padding-left: 18px; padding-right: 18px; }
  .ll-resource .prefooter-tx { background-size: 40px 40px; }
}

/* -- scroll behaviour ----------------------------------------------
 * html{scroll-behavior} belongs to Code Snippet 10, which sets it
 * site-wide at priority 999. We only reserve the sticky-header offset.
 * ------------------------------------------------------------------ */
.ll-resource .section[id] { scroll-margin-top: 160px; }

/* --- sprite icons --------------------------------------------------
 * Pages reference shapes from the sprite the behaviour file injects,
 * rather than carrying the path data. Sized by context, as the inline
 * icons used to be.
 * ------------------------------------------------------------------ */
.llic { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 2.1; fill: none; }
.llic-sm { width: 12px; height: 12px; flex: 0 0 auto; stroke-width: 1.6; fill: none; }
.ll-resource .feel-icon .llic { width: 26px; height: 26px; stroke: #0B8676; stroke-width: 1.7; }
.ll-resource .callout-label .llic { width: 14px; height: 14px; }
.ll-resource .ledger-badge .llic { width: 17px; height: 17px; stroke-width: 3; }
.ll-resource .ledger-chip .llic { width: 13px; height: 13px; stroke-width: 3; }
.jump-link .llic { width: 1em; height: 1em; }

/* ===================================================================
   ENGAGEMENT LAYER v1.1
   Quiet interactions for a parent reading a long guide. Every one of
   these ADDS to the page - none of them hides a word of the source,
   because hidden prose is prose the narrator reads to an empty screen.
   =================================================================== */

/* --- a tickable checklist ------------------------------------------
 * The list already existed. Now a parent can mark off what they have
 * done and it is still there when they come back. */
.ll-resource .checklist.is-live li { cursor: pointer; user-select: none; position: relative; padding-left: 54px; transition: background .18s ease; }
.ll-resource .checklist.is-live li:hover { background: #F7FBFA; }
.ll-resource .checklist.is-live li::before {
  content: ""; position: absolute; left: 20px; top: 16px; width: 20px; height: 20px;
  border: 2px solid #CBD5E1; border-radius: 6px; background: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
.ll-resource .checklist.is-live li::after {
  content: ""; position: absolute; left: 26px; top: 21px; width: 8px; height: 4px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.ll-resource .checklist.is-live li:hover::before { border-color: #0E9F8B; }
.ll-resource .checklist.is-live li.is-done::before { background: #0E9F8B; border-color: #0E9F8B; }
.ll-resource .checklist.is-live li.is-done::after { transform: rotate(-45deg) scale(1); }
.ll-resource .checklist.is-live li.is-done { color: #94A3B8; }
.ll-resource .checklist.is-live li.is-done .checklist-week { opacity: .5; }
.ll-resource .ll-tally {
  display: flex; align-items: center; gap: 12px; padding: 13px 20px;
  background: #F0FBF8; border-top: 1px solid #E8EDF4;
  font-family: "Outfit", sans-serif; font-size: 12.5px; font-weight: 600; color: #0B8676; }
.ll-resource .ll-tally-bar { flex: 1; height: 5px; border-radius: 99px; background: #D7EFE8; overflow: hidden; }
.ll-resource .ll-tally-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg,#0E9F8B,#3DBDAF); transition: width .45s cubic-bezier(.4,0,.2,1); }
.ll-resource .ll-tally b { font-variant-numeric: tabular-nums; }
.ll-resource .ll-tally .ll-reset { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #94A3B8; cursor: pointer; background: none; border: 0; }
.ll-resource .ll-tally .ll-reset:hover { color: #0B8676; text-decoration: underline; }

/* --- a spine down a sequence of steps ------------------------------
 * Purely visual. Makes a five-step sequence read as one journey
 * rather than five unrelated boxes. */
.ll-resource .week-list { position: relative; }
.ll-resource .week-list.is-spined::before {
  content: ""; position: absolute; left: 47px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, rgba(14,159,139,.28), rgba(14,159,139,.10));
  border-radius: 2px; pointer-events: none; }
@media(max-width:560px) { .ll-resource .week-list.is-spined::before { display: none; } }
.ll-resource .week-item { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ll-resource .week-item:hover { transform: translateX(3px); border-color: rgba(14,159,139,.32);
  box-shadow: 0 8px 26px rgba(14,27,61,.09); }
.ll-resource .week-num { position: relative; z-index: 1; }
@media(prefers-reduced-motion:reduce) { .ll-resource .week-item:hover { transform: none; } }

/* --- the pull quote, given more presence ---------------------------
 * Same colours, more craft: a quiet mark, and the rule grows as it
 * comes into view rather than simply appearing. */
.ll-resource .pull-quote { position: relative; border-left: 0; padding: 26px 30px 26px 34px; overflow: hidden; }
.ll-resource .pull-quote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg,#0E9F8B,#3DBDAF); transform: scaleY(0); transform-origin: top;
  transition: transform .7s cubic-bezier(.4,0,.2,1); }
.ll-resource .pull-quote.visible::before { transform: scaleY(1); }
.ll-resource .pull-quote::after {
  content: "\201C"; position: absolute; right: 16px; bottom: -18px;
  font-family: "Outfit", sans-serif; font-size: 108px; font-weight: 800; line-height: 1;
  color: #0E9F8B; opacity: .07; pointer-events: none; }
@media(prefers-reduced-motion:reduce) { .ll-resource .pull-quote::before { transform: scaleY(1); transition: none; } }

/* --- a figure: diagrams and illustrated explainers ------------------
 * For structural content that reads better drawn than described. The
 * caption above it is narrated; the figure itself is not. */
.ll-resource .ll-figure { margin: 32px 0; border: 1px solid #E8EDF4; border-radius: 20px;
  background: linear-gradient(160deg,#FBFDFC,#F4F9F8); overflow: hidden; box-shadow: 0 2px 12px rgba(14,27,61,.05); }
.ll-resource .ll-figure-in { padding: 26px 24px 22px; }
.ll-resource .ll-figure-cap { padding: 11px 20px; border-top: 1px solid #E8EDF4; background: #fff;
  font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: #5A6577; }

/* --- a photograph inside a figure: a height ceiling ------------------
 * A portrait shot sized only by width grew to match its own shape: in
 * the 810px reading column an 800x1000 photo ran to 1013px and pushed
 * past the screen. The ceiling keys off the figure's OWN width, not the
 * viewport, so a landscape or square image is never touched at any
 * window size, and object-fit keeps the whole picture visible inside
 * the ceiling rather than cropping a labelled sketch. The child
 * combinators reach the plain single photo only - photo grids and
 * stage-card photos keep the heights their own markup sets. */
.ll-resource .ll-figure,
.ll-resource .ll-figure-in { container-type: inline-size; }
.ll-resource .ll-figure > img,
.ll-resource .ll-figure > .ll-figure-in > img { max-height: 100cqw; object-fit: contain; }

/* a ladder of levels - used where the source describes tiers */
.ll-resource .ll-ladder { display: flex; flex-direction: column-reverse; gap: 8px; }
.ll-resource .ll-rung { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: #fff; border: 1px solid #E8EDF4; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .25s; }
.ll-resource .ll-rung:hover { transform: translateY(-2px) scale(1.008); border-color: rgba(14,159,139,.35);
  box-shadow: 0 10px 26px rgba(14,27,61,.10); }
.ll-resource .ll-rung-n { flex: 0 0 auto; min-width: 62px; height: 30px; padding: 0 12px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: #fff; background: linear-gradient(135deg,#0E9F8B,#0B8676); }
.ll-resource .ll-rung-t { font-size: 14px; color: #2D3748; line-height: 1.5; }
.ll-resource .ll-rung-t b { font-family: "Outfit", sans-serif; font-weight: 700; color: #0E1B3D; }
@media(prefers-reduced-motion:reduce) { .ll-resource .ll-rung:hover { transform: none; } }

/* --- copy a block of template text ---------------------------------
 * For the guides that hand a parent a letter to send. */
.ll-resource .ll-copywrap { position: relative; }
.ll-resource .ll-copy { position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; cursor: pointer;
  font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 600; color: #5A6577;
  transition: border-color .2s, color .2s, background .2s; }
.ll-resource .ll-copy:hover { border-color: #0E9F8B; color: #0B8676; }
.ll-resource .ll-copy.is-done { background: #0E9F8B; border-color: #0E9F8B; color: #fff; }

/* --- a reveal that the narration opens for you ----------------------
 * A question from the source, with its answer folded away. Tap it and
 * it opens. Leave it closed and press play, and it opens itself the
 * moment Helen reaches it - so a listener never hears words that are
 * not on the screen in front of them.
 * ------------------------------------------------------------------ */
.ll-resource .ll-reveal { margin: 30px 0; border: 1px solid #E8EDF4; border-radius: 18px;
  background: linear-gradient(160deg,#FBFDFC,#F5FAF9); overflow: hidden;
  box-shadow: 0 2px 12px rgba(14,27,61,.05); transition: border-color .3s ease, box-shadow .3s ease; }
.ll-resource .ll-reveal.is-open { border-color: rgba(14,159,139,.30); box-shadow: 0 10px 30px rgba(14,27,61,.09); }
.ll-resource .ll-reveal-q { display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 20px 22px; background: none; border: 0; text-align: left; cursor: pointer; }
.ll-resource .ll-reveal-mark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E1F5EE; color: #0B8676; transition: background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.ll-resource .ll-reveal-mark .llic { width: 16px; height: 16px; stroke-width: 2.4; }
.ll-resource .ll-reveal.is-open .ll-reveal-mark { background: #0E9F8B; color: #fff; transform: rotate(90deg); }
.ll-resource .ll-reveal-t { flex: 1; min-width: 0; }
.ll-resource .ll-reveal-t b { display: block; font-family: "Outfit", sans-serif; font-size: 16.5px;
  font-weight: 700; color: #0E1B3D; line-height: 1.35; letter-spacing: -.01em; }
.ll-resource .ll-reveal-cue { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: #0B8676; opacity: .85; transition: opacity .25s ease; }
.ll-resource .ll-reveal.is-open .ll-reveal-cue { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.ll-resource .ll-reveal-cue i { width: 5px; height: 5px; border-radius: 50%; background: #0E9F8B;
  animation: llPulse 2.4s ease-in-out infinite; }
@keyframes llPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
.ll-resource .ll-reveal-a { max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s cubic-bezier(.4,0,.2,1), opacity .4s ease; }
.ll-resource .ll-reveal.is-open .ll-reveal-a { max-height: 2200px; opacity: 1; }
.ll-resource .ll-reveal-a-in { padding: 2px 22px 22px 66px; border-top: 1px solid #EEF3F1; margin-top: 2px; }
.ll-resource .ll-reveal-a-in p { font-size: 16px; margin-bottom: 16px; }
.ll-resource .ll-reveal-a-in p:last-child { margin-bottom: 0; }
@media(max-width:560px) { .ll-resource .ll-reveal-a-in { padding-left: 22px; } }
@media(prefers-reduced-motion:reduce) {
  .ll-resource .ll-reveal-a { transition: none; }
  .ll-resource .ll-reveal-mark { transition: none; }
  .ll-resource .ll-reveal-cue i { animation: none; }
}

/* --- variant tabs: one guide, four nations --------------------------
 * Twenty-eight of the guides say the same thing four ways. Rather than
 * four pages or one very long one, the parent picks their nation and
 * reads theirs. A listener does nothing: when Helen reaches a panel,
 * the page switches to it.
 * ------------------------------------------------------------------ */
.ll-resource .ll-tabs { margin: 30px 0; border: 1px solid #E8EDF4; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 12px rgba(14,27,61,.05); }
.ll-resource .ll-tabbar { display: flex; overflow-x: auto; scrollbar-width: none; background: #F6F9F8;
  border-bottom: 1px solid #E8EDF4; }
.ll-resource .ll-tabbar::-webkit-scrollbar { display: none; }
.ll-resource .ll-tab { position: relative; flex: 1 0 auto; padding: 14px 20px; border: 0; background: none;
  cursor: pointer; white-space: nowrap;
  font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .2px; color: #94A3B8;
  transition: color .22s ease, background .22s ease; }
.ll-resource .ll-tab:hover { color: #0B8676; background: rgba(14,159,139,.05); }
.ll-resource .ll-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2.5px;
  border-radius: 2px 2px 0 0; background: linear-gradient(90deg,#0E9F8B,#3DBDAF);
  transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.ll-resource .ll-tab[aria-selected="true"] { color: #0E1B3D; background: #fff; }
.ll-resource .ll-tab[aria-selected="true"]::after { transform: scaleX(1); }
.ll-resource .ll-panel { padding: 24px 24px 22px; animation: llFade .38s ease; }
.ll-resource .ll-panel[hidden] { display: none; }
.ll-resource .ll-panel p { font-size: 16px; }
@keyframes llFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media(max-width:560px) { .ll-resource .ll-panel { padding: 20px 18px; } .ll-resource .ll-tab { padding: 13px 15px; font-size: 12px; } }

/* --- an accordion: several folds, grouped --------------------------- */
.ll-resource .ll-acc { margin: 30px 0; border: 1px solid #E8EDF4; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 12px rgba(14,27,61,.05); }
.ll-resource .ll-acc-row + .ll-acc-row { border-top: 1px solid #EEF3F1; }
.ll-resource .ll-acc-q { display: flex; align-items: center; gap: 13px; width: 100%; padding: 17px 20px;
  border: 0; background: none; text-align: left; cursor: pointer; transition: background .2s ease; }
.ll-resource .ll-acc-q:hover { background: #F7FBFA; }
.ll-resource .ll-acc-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; color: #0B8676; background: #E1F5EE;
  transition: background .28s ease, color .28s ease; }
.ll-resource .ll-acc-row.is-open .ll-acc-n { background: #0E9F8B; color: #fff; }
.ll-resource .ll-acc-t { flex: 1; font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 700;
  color: #0E1B3D; line-height: 1.4; }
.ll-resource .ll-acc-chev { flex: 0 0 auto; color: #94A3B8; transition: transform .32s cubic-bezier(.4,0,.2,1), color .28s; }
.ll-resource .ll-acc-chev .llic { width: 15px; height: 15px; }
.ll-resource .ll-acc-row.is-open .ll-acc-chev { transform: rotate(90deg); color: #0B8676; }
.ll-resource .ll-acc-a { max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
.ll-resource .ll-acc-row.is-open .ll-acc-a { max-height: 1600px; opacity: 1; }
.ll-resource .ll-acc-a-in { padding: 0 20px 20px 59px; }
.ll-resource .ll-acc-a-in p { font-size: 15.5px; margin-bottom: 14px; }
.ll-resource .ll-acc-a-in p:last-child { margin-bottom: 0; }
@media(max-width:560px) { .ll-resource .ll-acc-a-in { padding-left: 20px; } }

/* --- a figure worth pausing on: a number from the source ------------ */
.ll-resource .ll-stat { display: flex; align-items: center; gap: 20px; margin: 30px 0; padding: 24px 26px;
  border-radius: 18px; background: linear-gradient(135deg,#0E1B3D,#0A3D35); color: #fff; overflow: hidden;
  position: relative; }
.ll-resource .ll-stat::after { content: ""; position: absolute; top: -60px; right: -40px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle,rgba(14,159,139,.30),transparent 66%); pointer-events: none; }
.ll-resource .ll-stat-n { position: relative; z-index: 1; flex: 0 0 auto;
  font-family: "Outfit", sans-serif; font-size: clamp(38px,6vw,58px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: #FFE9B8; font-variant-numeric: tabular-nums; }
.ll-resource .ll-stat-t { position: relative; z-index: 1; font-size: 15.5px; line-height: 1.6;
  color: rgba(255,255,255,.82); }
@media(max-width:560px) { .ll-resource .ll-stat { flex-direction: column; align-items: flex-start; gap: 10px; } }

@media(prefers-reduced-motion:reduce) {
  .ll-resource .ll-panel { animation: none; }
  .ll-resource .ll-acc-a, .ll-resource .ll-acc-chev, .ll-resource .ll-tab::after { transition: none; }
}

/* --- a source list, kept as a list ---------------------------------- */
.ll-resource .ll-bullets { margin: 26px 0; }
.ll-resource .ll-bullets-lead { font-size: 17px; margin: 0 0 14px; }
.ll-resource ul.bullets { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 9px; }
@media(min-width:560px) { .ll-resource ul.bullets { grid-template-columns: 1fr 1fr; } }
.ll-resource ul.bullets li { position: relative; padding: 11px 16px 11px 38px; border-radius: 11px;
  background: #F7FBFA; border: 1px solid #E8EDF4; font-size: 14.5px; line-height: 1.5; color: #2D3748;
  transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.ll-resource ul.bullets li::before { content: ""; position: absolute; left: 16px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: #0E9F8B; opacity: .55; transition: opacity .2s, transform .2s; }
.ll-resource ul.bullets li:hover { transform: translateY(-2px); border-color: rgba(14,159,139,.32); background: #fff; }
.ll-resource ul.bullets li:hover::before { opacity: 1; transform: scale(1.25); }
@media(prefers-reduced-motion:reduce) { .ll-resource ul.bullets li:hover { transform: none; } }

/* --- a table the source gives as a table ---------------------------- */
.ll-resource .ll-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ll-resource .ll-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ll-resource .ll-table th { text-align: left; padding: 13px 16px; background: #0E1B3D; color: #fff;
  font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.ll-resource .ll-table td { padding: 13px 16px; border-bottom: 1px solid #EEF3F1; font-size: 14px;
  line-height: 1.5; color: #2D3748; vertical-align: top; background: #fff; }
.ll-resource .ll-table tbody tr { transition: background .18s ease; }
.ll-resource .ll-table tbody tr:hover td { background: #F7FBFA; }
.ll-resource .ll-table td:first-child { font-family: "Outfit", sans-serif; font-weight: 700; color: #0E1B3D; white-space: nowrap; }

/* --- reading comfort must reach the new components ------------------
 * The player's Larger text and Dyslexia-friendly spacing settings were
 * written when a guide was nothing but paragraphs inside .wrap. Every
 * component added since needs to answer to them too, or a parent who
 * needs those settings gets them on half the page.
 * ------------------------------------------------------------------ */
.ll-resource.ll-large .ll-panel p,
.ll-resource.ll-large .ll-acc-a-in p,
.ll-resource.ll-large .ll-reveal-a-in p,
.ll-resource.ll-large .ll-bullets-lead,
.ll-resource.ll-large .week-content p,
.ll-resource.ll-large .feel-body p,
.ll-resource.ll-large .ll-stat-t { font-size: 18px; line-height: 1.95; }
.ll-resource.ll-large ul.bullets li,
.ll-resource.ll-large .checklist li,
.ll-resource.ll-large .ll-table td,
.ll-resource.ll-large .ledger-list li.ledger-row,
.ll-resource.ll-large .ll-rung-t { font-size: 16.5px; line-height: 1.8; }
.ll-resource.ll-large .ll-acc-t,
.ll-resource.ll-large .ll-reveal-t b { font-size: 18px; line-height: 1.5; }

.ll-resource.ll-space .ll-panel p,
.ll-resource.ll-space .ll-acc-a-in p,
.ll-resource.ll-space .ll-reveal-a-in p,
.ll-resource.ll-space .ll-bullets-lead,
.ll-resource.ll-space .week-content p,
.ll-resource.ll-space .feel-body p,
.ll-resource.ll-space .ll-stat-t,
.ll-resource.ll-space ul.bullets li,
.ll-resource.ll-space .checklist li,
.ll-resource.ll-space .ll-table td,
.ll-resource.ll-space .ledger-list li.ledger-row,
.ll-resource.ll-space .ll-rung-t,
.ll-resource.ll-space .ll-acc-t,
.ll-resource.ll-space .ll-reveal-t b { letter-spacing: .03em; word-spacing: .12em; line-height: 2.05; }

/* the warm background has to carry through the panels too, or the page
   ends up cream with white boxes punched out of it */
.ll-resource.ll-paper .ll-tabs,
.ll-resource.ll-paper .ll-acc,
.ll-resource.ll-paper .ll-panel,
.ll-resource.ll-paper .ll-figure-cap,
.ll-resource.ll-paper .checklist li,
.ll-resource.ll-paper .week-item,
.ll-resource.ll-paper .feel-card,
.ll-resource.ll-paper .ll-rung,
.ll-resource.ll-paper .ll-table td { background: #FBF6EC; }
.ll-resource.ll-paper .ll-reveal,
.ll-resource.ll-paper .ll-figure,
.ll-resource.ll-paper ul.bullets li { background: #F6F0E2; }
.ll-resource.ll-paper .ll-table tbody tr:hover td { background: #F1E9D8; }

/* --- the wider measure ---------------------------------------------
 * The reading column was 720px, the exemplar's own figure. On a wide
 * monitor that reads as a ribbon. It is now 860px, with the body type
 * lifted to 18.5px so the line length stays where it was rather than
 * running to a hundred characters. Wide blocks and the hero grow in
 * proportion, so the page keeps its shape.
 * ------------------------------------------------------------------ */
.ll-resource .ll-reveal-a-in p,
.ll-resource .ll-panel p { font-size: 17.5px; }
.ll-resource .ll-acc-a-in p { font-size: 17px; }
.ll-resource ul.bullets li,
.ll-resource .checklist li { font-size: 15.5px; }
.ll-resource .ll-rung-t { font-size: 15px; }
.ll-resource .ll-table td { font-size: 15px; }
.ll-resource .week-content p { font-size: 15.5px; }
.ll-resource .feel-card p { font-size: 14.5px; }

/* --- a decision flow -----------------------------------------------
 * The source draws this as an arrow diagram. Rendered as connected
 * nodes it stays readable on a phone, and every word of it is in the
 * page rather than in a picture, so the narrator reads it too.
 * ------------------------------------------------------------------ */
.ll-resource .ll-flow { margin: 30px 0; display: grid; gap: 0; }
.ll-resource .ll-fnode { position: relative; padding: 16px 20px; border-radius: 14px;
  background: #fff; border: 1px solid #E8EDF4; box-shadow: 0 2px 10px rgba(14,27,61,.05);
  font-size: 15.5px; line-height: 1.5; color: #2D3748; }
.ll-resource .ll-fnode--ask { background: linear-gradient(135deg,#0E1B3D,#0A3D35); color: #fff;
  border-color: transparent; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 16.5px; }
.ll-resource .ll-fnode--end { background: #F0FBF8; border-color: rgba(14,159,139,.3); }
.ll-resource .ll-fjoin { justify-self: center; width: 2px; height: 22px;
  background: linear-gradient(180deg, rgba(14,159,139,.45), rgba(14,159,139,.18)); }
.ll-resource .ll-fsplit { display: grid; gap: 12px; }
@media(min-width:640px) { .ll-resource .ll-fsplit { grid-template-columns: 1fr 1fr; } }
.ll-resource .ll-fbranch { position: relative; padding: 14px 18px 16px; border-radius: 14px;
  background: #FBFDFC; border: 1px solid #E8EDF4;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.ll-resource .ll-fbranch:hover { transform: translateY(-2px); border-color: rgba(14,159,139,.35);
  box-shadow: 0 10px 26px rgba(14,27,61,.09); }
.ll-resource .ll-fbranch-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 4px 11px; border-radius: 999px;
  font-family: "Outfit", sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; }
.ll-resource .ll-fbranch--yes .ll-fbranch-k { background: #E1F5EE; color: #076153; }
.ll-resource .ll-fbranch--no .ll-fbranch-k { background: #FEF3E2; color: #92600C; }
.ll-resource .ll-fbranch-t { display: block; font-size: 15px; line-height: 1.5; color: #2D3748; }
@media(prefers-reduced-motion:reduce) { .ll-resource .ll-fbranch:hover { transform: none; } }
/* --- a checklist split into weeks, with a save-and-share bar ---------
 * A month-long checklist read aloud in one run said its week badge
 * before every single item — "W1 send the letter, W1 let your child…"
 * nineteen times. Splitting it into one list per week says the week
 * once, as a heading, and lets each week carry its own progress: on a
 * thirty-day list, finishing a week is the encouraging moment, not
 * inching a single bar from 5% to 10%.
 *
 * Each week is a separate .checklist, so the existing tickable-list
 * script gives every one its own tally with no change to that code.
 * ------------------------------------------------------------------- */
.ll-resource .checklist-head { display: flex; align-items: center; gap: 10px;
  font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark);
  margin: 30px 0 10px; }
.ll-resource .checklist-head::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg,#CDEDE5,transparent); }
.ll-resource .checklist-head + .checklist { margin-top: 0; }

/* The save-and-share bar, added by the behaviour script after the last
 * week. Deliberately quiet: it is a tool, not a call to action. */
.ll-resource .ll-clsave { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 22px 0 0; padding: 15px 18px; border-radius: 14px;
  background: #F7FBFA; border: 1px solid #E2E8F0; }
.ll-resource .ll-clsave-t { font-family: "Outfit", sans-serif; font-size: 12.5px;
  font-weight: 700; color: #0E1B3D; margin-right: auto; }
.ll-resource .ll-clsave-t small { display: block; font-family: "DM Sans", sans-serif;
  font-size: 11.5px; font-weight: 400; color: #5A6577; margin-top: 2px; }
.ll-resource .ll-clbtn { display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  font-family: "Outfit", sans-serif; font-size: 12.5px; font-weight: 700;
  background: #fff; border: 1px solid #CDEDE5; color: #0B8676;
  transition: background .18s ease, border-color .18s ease; }
.ll-resource .ll-clbtn:hover { background: #F0FBF8; border-color: #0E9F8B; }
.ll-resource .ll-clbtn:focus-visible { outline: 2px solid #0E9F8B; outline-offset: 2px; }
.ll-resource .ll-clsave-said { font-family: "DM Sans", sans-serif; font-size: 12px;
  color: #0B8676; }
@media(max-width:520px){
  .ll-resource .ll-clsave-t { margin-right: 0; width: 100%; }
  .ll-resource .ll-clbtn { flex: 1; justify-content: center; }
}
@media print { .ll-resource .ll-clsave { display: none; } }

/* Share is the one that leaves the site, so it leads. */
.ll-resource .ll-clbtn--go { background: #0E9F8B; border-color: #0E9F8B; color: #fff; }
.ll-resource .ll-clbtn--go:hover { background: #0B8676; border-color: #0B8676; }

/* --- checklist rows must not be flex containers ---------------------
 * The Listen Player wraps EVERY word in its own span so it can
 * highlight them one at a time. Inside a flex row each of those spans
 * becomes a flex item, so the row's 14px gap is applied between every
 * word and the sentence spreads across the line like justified text.
 * It looks like a typography bug and is really a layout one, and it
 * shows on screen as well as in print.
 *
 * The flex was only ever there to sit a week badge beside the text.
 * Weeks are headings now, so the row can be a plain block; the badge
 * still works inline for any guide that has not been converted yet.
 * The tick box is absolutely positioned already, so it is unaffected.
 * ------------------------------------------------------------------- */
.ll-resource .checklist li { display: block; }
.ll-resource .checklist-week { display: inline-block; margin-right: 10px; }

/* ══ PRINTING A GUIDE ═════════════════════════════════════════════════
 * A printed guide was coming out unusable: the site header, the
 * sections panel, the listen player and the whole site footer repeated
 * on every page, printed over the text.
 *
 * Rather than name every piece of furniture — which would miss anything
 * added later, and differs between themes — this keeps ONLY the guide
 * itself and whatever contains it, and drops everything else. Written
 * with :has() so it needs no knowledge of the surrounding markup; the
 * explicit rules underneath cover older browsers that lack it.
 * ═══════════════════════════════════════════════════════════════════ */
@media print {
  body *:not(:has(.ll-resource)):not(.ll-resource):not(.ll-resource *) {
    display: none !important;
  }

  /* Named fallbacks, for browsers without :has() */
  .site-header, #header, .buddypanel, .bb-mobile-panel-wrapper,
  .jump-nav, .ll-progress-bar, #llPlayer, .llx, .rc, .ll-clsave,
  .ll-tally .ll-reset, footer, .site-footer, .ll-sections,
  [data-ll-ui="1"].ll-clsave { display: none !important; }

  html, body {
    background: #fff !important; margin: 0 !important; padding: 0 !important;
  }

  /* Content fades in as it is scrolled past, which means anything the
     reader has NOT scrolled to is still invisible when they press
     print — and prints as blank space. A guide printed after opening it
     and going straight to print would come out almost empty. Nothing
     animates on paper, so every revealed element is simply shown. */
  html.ll-anim .ll-resource .reveal,
  .ll-resource .reveal {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important; }
  .ll-resource { color: #1a1a1a !important; }

  /* The hero is a full-bleed dark gradient. Printed, it costs a
     cartridge of ink and makes the title harder to read, so it is
     reduced to plain type with a rule under it. */
  .ll-resource .hero, .ll-resource .prefooter {
    background: #fff !important; color: #0E1B3D !important;
    margin: 0 !important; padding: 0 0 12px !important;
    border-bottom: 2px solid #0E1B3D; }
  .ll-resource .hero::before, .ll-resource .hero::after,
  .ll-resource .hero-tx, .ll-resource .prefooter::before,
  .ll-resource .prefooter::after, .ll-resource .prefooter-tx,
  .ll-resource .lib-cat-strip { display: none !important; }
  .ll-resource .hero h1, .ll-resource .hero h1 em,
  .ll-resource .hero-eye, .ll-resource .hero-sub,
  .ll-resource .hstat, .ll-resource .hstat strong {
    color: #0E1B3D !important; }
  .ll-resource .hero-in { padding: 0 !important; text-align: left !important; }
  .ll-resource .hero h1 { font-size: 26pt !important; margin: 0 0 6px !important; }
  .ll-resource .hero-sub { font-size: 11pt !important; max-width: none !important; }
  .ll-resource .hero-stats { border: 0 !important; }

  .ll-resource .section { padding: 18px 0 !important; background: #fff !important; }
  .ll-resource .wrap, .ll-resource .wrap--wide, .ll-resource .w {
    max-width: none !important; padding: 0 !important; }
  .ll-resource p, .ll-resource li { font-size: 11pt !important; line-height: 1.5 !important; }
  .ll-resource .section-h2 { font-size: 15pt !important; }
  .ll-resource .checklist-head { font-size: 10pt !important; margin: 16px 0 6px !important; }

  /* Nothing should be split across a page break mid-thought. */
  .ll-resource .checklist li, .ll-resource .week-item,
  .ll-resource .callout, .ll-resource .pull-quote,
  .ll-resource .next-card, .ll-resource .ll-acc-row,
  .ll-resource .ll-figure, .ll-resource .feel-card {
    break-inside: avoid; page-break-inside: avoid; }
  .ll-resource .section-h2, .ll-resource .checklist-head {
    break-after: avoid; page-break-after: avoid; }

  /* An accordion prints as its contents, not as a row of closed lids. */
  .ll-resource .ll-acc-a { max-height: none !important; overflow: visible !important; }
  .ll-resource .ll-acc-chev { display: none !important; }

  /* A tick box the reader has filled in must survive onto paper. The
     box is absolutely positioned, so narrowing the row's indent without
     moving the box too puts it straight over the first letter. */
  .ll-resource .checklist.is-live li { padding-left: 26px !important; }
  .ll-resource .checklist.is-live li::before {
    left: 0 !important; top: 14px !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ll-resource .checklist.is-live li::after {
    left: 6px !important; top: 19px !important; }
  .ll-resource .checklist.is-live li.is-done::before {
    background: #0E9F8B !important; border-color: #0E9F8B !important; }
  .ll-resource .checklist.is-live li.is-done { color: #555 !important; }
  .ll-resource .ll-tally { background: #fff !important; border-top: 1px solid #ccc !important;
    color: #333 !important; padding: 6px 0 !important; }
  .ll-resource .ll-tally-bar { display: none !important; }

  /* ── Print button: the checklist alone ─────────────────────────────
   * Ctrl+P prints the whole guide, which is right. But the Print button
   * lives INSIDE the checklist, so it prints the checklist — a parent
   * putting one on the fridge does not want thirteen pages of guide
   * behind it. The script adds this class for the moment the print
   * dialogue is open, then takes it off again.
   * ───────────────────────────────────────────────────────────────── */
  .ll-print-checklist .section:not(:has(.checklist)),
  .ll-print-checklist .hero,
  .ll-print-checklist .prefooter { display: none !important; }
  .ll-print-checklist .section:has(.checklist) > .wrap > *:not(.checklist):not(.checklist-head):not(.section-h2):not(.ll-tally) {
    display: none !important; }
  .ll-print-checklist .section:has(.checklist) { padding: 0 !important; }
  .ll-print-checklist::before {
    content: attr(data-print-title);
    display: block; font-family: "Outfit", sans-serif; font-size: 15pt;
    font-weight: 800; color: #0E1B3D; margin: 0 0 4px;
    padding-bottom: 8px; border-bottom: 2px solid #0E1B3D; }

  @page { margin: 16mm 14mm; }
}

/* --- the hero, brought down in height --------------------------------
 * The hero was running very tall on guides with a long intro. The worst
 * case is a 70-word standfirst in a 560px column at 1.7 line-height:
 * seven lines of text, which pushed the first section a long way below
 * the fold and made the page feel slow to start.
 *
 * Widening the column is what does most of the work — the same words in
 * fewer lines — with a slightly tighter leading and a little less
 * padding above and below. A guide with a short standfirst barely
 * changes; the long ones lose roughly a hundred pixels.
 * -------------------------------------------------------------------- */
.ll-resource .hero { padding-top: 44px; }
.ll-resource .hero-in { padding-bottom: 38px; }
.ll-resource .hero-sub { max-width: 660px; line-height: 1.55; margin-bottom: 18px; }
.ll-resource .hero h1 { margin-bottom: 14px; }
@media(max-width:640px){
  .ll-resource .hero { padding-top: 34px; }
  .ll-resource .hero-in { padding-bottom: 30px; }
}

/* --- "Something not right?" ------------------------------------------
 * A quiet way for a reader to report a problem from the guide they are
 * on, without hunting for a contact page or trying to describe where
 * they were.
 *
 * Deliberately understated: it sits at the very end of a guide, in the
 * same grey as a footnote. Nobody should feel invited to complain, but
 * someone who has spotted a genuine error should not have to go looking.
 * -------------------------------------------------------------------- */
.ll-resource .ll-report { margin: 0; padding: 26px 0 40px; text-align: center; }
.ll-resource .ll-report-open { display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 8px;
  font-family: "DM Sans", sans-serif; font-size: 13px; color: #8792A4;
  transition: color .18s ease, background .18s ease; }
.ll-resource .ll-report-open:hover { color: #0B8676; background: #F2FAF8; }
.ll-resource .ll-report-open:focus-visible { outline: 2px solid #0E9F8B; outline-offset: 2px; }
.ll-resource .ll-report-open svg { width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 2; }

.ll-resource .ll-report-panel { display: none; max-width: 620px; margin: 14px auto 0;
  padding: 22px 24px; border-radius: 16px; background: #F7FBFA;
  border: 1px solid #E2E8F0; text-align: left; }
.ll-resource .ll-report-panel[data-open="1"] { display: block; }
.ll-resource .ll-report-h { font-family: "Outfit", sans-serif; font-size: 15px;
  font-weight: 800; color: #0E1B3D; margin: 0 0 4px; }
.ll-resource .ll-report-sub { font-family: "DM Sans", sans-serif; font-size: 13px;
  color: #5A6577; margin: 0 0 16px; line-height: 1.5; }

/* The kind of problem matters: a wrong fact in a legal guide and a
   mispronounced word need different people and different urgency. */
.ll-resource .ll-report-kinds { display: grid; gap: 8px; margin: 0 0 16px; }
.ll-resource .ll-report-kind { display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 11px; background: #fff;
  border: 1px solid #E2E8F0; cursor: pointer; text-align: left;
  font-family: "DM Sans", sans-serif; font-size: 13.5px; color: #2D3748;
  transition: border-color .16s ease, background .16s ease; }
.ll-resource .ll-report-kind:hover { border-color: #CDEDE5; background: #FCFEFE; }
.ll-resource .ll-report-kind[aria-pressed="true"] { border-color: #0E9F8B;
  background: #F0FBF8; }
.ll-resource .ll-report-kind b { display: block; font-family: "Outfit", sans-serif;
  font-size: 13px; font-weight: 700; color: #0E1B3D; margin-bottom: 1px; }
.ll-resource .ll-report-kind small { color: #5A6577; font-size: 12.5px; }

.ll-resource .ll-report-note { width: 100%; min-height: 84px; padding: 11px 13px;
  border-radius: 11px; border: 1px solid #E2E8F0; background: #fff; resize: vertical;
  font-family: "DM Sans", sans-serif; font-size: 13.5px; color: #2D3748;
  line-height: 1.5; }
.ll-resource .ll-report-note:focus { outline: none; border-color: #0E9F8B; }

.ll-resource .ll-report-where { font-family: "DM Sans", sans-serif; font-size: 12px;
  color: #8792A4; margin: 10px 0 0; line-height: 1.5; }
.ll-resource .ll-report-actions { display: flex; flex-wrap: wrap; gap: 9px;
  align-items: center; margin-top: 14px; }
.ll-resource .ll-report-send { min-height: 40px; padding: 0 18px; border-radius: 10px;
  border: 1px solid #0E9F8B; background: #0E9F8B; color: #fff; cursor: pointer;
  font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700; }
.ll-resource .ll-report-send:hover { background: #0B8676; border-color: #0B8676; }
.ll-resource .ll-report-send[disabled] { opacity: .5; cursor: not-allowed; }
.ll-resource .ll-report-cancel { min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid #E2E8F0; background: #fff; color: #5A6577; cursor: pointer;
  font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700; }
.ll-resource .ll-report-said { font-family: "DM Sans", sans-serif; font-size: 12.5px;
  color: #0B8676; }

@media print { .ll-resource .ll-report { display: none !important; } }

/* --- Keep this guide -------------------------------------------------
 * The Library index has a keep button on every row, but a reader who
 * arrives at a guide from a search or a link never sees it. This puts
 * the same action where they actually are.
 *
 * It uses My Locker's own bridge, so a guide kept here is the same
 * record as one kept from the index — not a second, parallel list.
 * -------------------------------------------------------------------- */
.ll-resource .ll-keep { text-align: center; padding: 30px 0 0; }
.ll-resource .ll-keep-btn { display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  font-family: "Outfit", sans-serif; font-size: 13.5px; font-weight: 700;
  background: #fff; border: 1px solid #CDEDE5; color: #0B8676;
  transition: background .18s ease, border-color .18s ease; }
.ll-resource .ll-keep-btn:hover { background: #F0FBF8; border-color: #0E9F8B; }
.ll-resource .ll-keep-btn:focus-visible { outline: 2px solid #0E9F8B; outline-offset: 2px; }
.ll-resource .ll-keep-btn[disabled] { opacity: .55; cursor: default; }
.ll-resource .ll-keep-btn svg { width: 16px; height: 16px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Once it is kept, the button stops being a button and becomes the way
   back to My Locker — the only useful thing left to do with it. */
.ll-resource a.ll-keep-btn.is-kept { background: #0E9F8B; border-color: #0E9F8B;
  color: #fff; text-decoration: none; }
.ll-resource a.ll-keep-btn.is-kept:hover { background: #0B8676; border-color: #0B8676; }
.ll-resource a.ll-keep-btn.is-kept svg { fill: currentColor; }
.ll-resource .ll-keep-said { display: block; margin-top: 9px;
  font-family: "DM Sans", sans-serif; font-size: 12.5px; color: #5A6577; }
@media print { .ll-resource .ll-keep { display: none !important; } }

/* --- touch targets on small screens ----------------------------------
 * A mobile audit found several controls under the 40px minimum a thumb
 * needs. Two of them were mine, which is the more embarrassing half.
 *
 * Height is added with padding rather than by growing the text, so the
 * page looks the same and only the tappable area changes. Applied at
 * phone widths only: on a desktop, where the target is a mouse pointer,
 * the tighter spacing reads better.
 * -------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ll-resource .ll-report-open { min-height: 44px; padding: 10px 14px; }
  .ll-resource .ll-tally .ll-reset { min-height: 44px; padding: 0 14px;
    display: inline-flex; align-items: center; }
  .ll-resource .callout-link { min-height: 44px; display: inline-flex;
    align-items: center; }
  .ll-resource .next-all { min-height: 44px; display: inline-flex;
    align-items: center; }
  .ll-resource .s-back { min-height: 44px; display: inline-flex;
    align-items: center; padding-right: 6px; }
  /* The category pills sit in a scrolling strip where 44px would make
     the strip unreasonably tall, so they get a comfortable 36px and a
     wider gap instead — easier to hit without dominating the hero. */
  .ll-resource .s-pill { min-height: 36px; display: inline-flex;
    align-items: center; }
  .ll-resource .s-pills { gap: 10px; }
}

/* --- the bottom of the screen on a phone ------------------------------
 * Four fixed controls sit at the foot of every guide, and they come from
 * four different places: the Listen player (snippet 83), the Sections
 * button and its panel (snippet 79), and Reading comfort (the library
 * plugin). None of them knows the others exist.
 *
 * The stacking was intended: the player lifts itself to 90px on a phone
 * precisely so the Sections button can sit at 24px beneath it. What was
 * not accounted for is that Reading comfort also claims that bottom row,
 * on the right — and the Sections button is centred, so on a narrow
 * screen the two run into each other.
 *
 * Fixed here rather than in three separate files because this is the
 * only place that can see all four at once. The Sections button moves
 * off centre to the left, giving Reading comfort the right-hand side,
 * and the two share the row without touching.
 *
 * Both of the button's transform states are restated, because it slides
 * up from below on first appearance and overriding only one would leave
 * it stranded off-screen.
 * ---------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .ll-toc-trigger {
    left: 12px !important;
    transform: translateX(0) translateY(120px) !important;
  }
  .ll-toc-trigger.in {
    transform: translateX(0) translateY(0) !important;
  }
  /* Room for Reading comfort beside it, and never wider than half. */
  .ll-toc-trigger { max-width: calc(50% - 18px); overflow: hidden;
    text-overflow: ellipsis; }

  /* Reading comfort keeps the right-hand side, level with it. Scoped
     under .ll-resource to match how the library plugin writes it — an
     unscoped .rc rule loses to the plugin's own on specificity. */
  .ll-resource .rc { bottom: 24px !important; right: 12px !important; }
  .ll-resource .rc .rc-btn { max-width: calc(50vw - 18px); }

  /* Its panel must open ABOVE the player rather than behind it. The
     panel was being cut off because Reading comfort sits at z-index
     9500 while the player is at 9985 — so the panel, however tall,
     disappeared under the bar. */
  .ll-resource .rcp, .ll-resource .rc-panel, .ll-resource #rcp,
  .rcp, .rc-panel, #rcp { z-index: 9995 !important; }
}

/* On the narrowest phones two buttons on one row is a squeeze, so the
   Sections button keeps only its icon and Reading comfort keeps its
   words — the one whose purpose is least obvious from a symbol. */
@media (max-width: 400px) {
  .ll-toc-trigger { padding-left: 16px; padding-right: 16px; }
}

/* --- the swipe cue, everywhere something scrolls sideways -------------
 * An audit of every guide found five modules that scroll sideways on a
 * phone. Tables already had a cue; three did not, and the worst of them
 * hides 630px of category pills behind an edge with nothing to say so.
 *
 * On a touch screen there is no scrollbar. A strip that simply ends
 * reads as the end, not as something you can push. The category strip
 * has a one-time glow after four seconds to hint at this, which is a
 * nice touch but only fires once per session and only if the reader is
 * still on the page — a shadow is always there, and always honest.
 *
 * These shadows sit at whichever edge still has content beyond it and
 * fade as you reach it, so they appear only while there is more to see.
 * The strip sits on a dark hero so its fade is dark; the tab bar sits
 * on the page so its fade is white.
 * -------------------------------------------------------------------- */
.ll-resource .lib-cat-strip {
  background-image:
    linear-gradient(to right, rgba(9,17,40,.55), rgba(9,17,40,0)),
    linear-gradient(to left,  rgba(9,17,40,.55), rgba(9,17,40,0));
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%;
  background-attachment: scroll, scroll;
}

.ll-resource .ll-tabbar {
  background-image:
    linear-gradient(to right, #fff 40%, rgba(255,255,255,0)),
    linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(14,27,61,.14), rgba(14,27,61,0)),
    linear-gradient(to left,  rgba(14,27,61,.14), rgba(14,27,61,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 22px 100%, 22px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}