/* LadyBugz Academy: the public, indexable pages (web/public/*.html).
   One stylesheet for the home page, the story page, the two articles and the three legal pages.
   Brand: red #cd1719 and teal #146464. No gold, no yellow, anywhere.
   Headings Poppins, body Source Sans 3 (Google Fonts, with system fallbacks).
   Lifted from the signed-off content pages; the page-type blocks keep their original look. */

:root{
  --red:#cd1719; --red-dark:#b31416; --teal:#146464; --teal-dark:#0e4a4a; --teal-soft:#e7f2f0;
  --grey:#bcbcb4; --ink:#16201f; --dark1:#0c1a1a; --dark2:#123c3c;
  --soft:#f5f7f7; --paleteal:#f0f7f7; --body:#333333; --muted:#55615f; --line:#e2e6eb;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
  color:var(--body); background:#fff; line-height:1.65; font-size:1.06rem;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.btn,.eyebrow,.label{font-family:'Poppins','Helvetica Neue',Arial,sans-serif}
img{max-width:100%;display:block;height:auto}
a{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:3px}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 16px}
.wrap-wide{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--teal);padding:12px 16px;z-index:20;font-weight:700}
.skip:focus{left:8px;top:8px}
/* The skip link's target carries tabindex="-1" so focus really lands there. The target is a container,
   not a control, so it gets no ring of its own (Chrome matches :focus-visible on a tabindex="-1" element
   even for a mouse click, so both states are cleared). The very next Tab lands on the first link inside
   the content and that one shows the normal teal ring. */
#main:focus,#main:focus-visible{outline:none;box-shadow:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-weight:700; font-size:1.04rem; padding:.95rem 1.9rem;
  border-radius:999px; background:var(--red); color:#fff; text-decoration:none;
  box-shadow:0 10px 24px rgba(205,23,25,.3); text-align:center; line-height:1.3;
}
.btn:hover{background:var(--red-dark)}
.btn.ghost{background:#fff;color:var(--teal);border:2px solid var(--teal);box-shadow:none}
.btn.ghost:hover{background:var(--paleteal)}
.btn.full{display:block;width:100%}
.btn.sm{font-size:.95rem;padding:.6rem 1.1rem;box-shadow:none}

/* ---------- site header ---------- */
.site-head{border-bottom:1px solid #e9ecec;background:#fff}
.site-head .inner{
  max-width:1120px;margin:0 auto;padding:12px 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
}
.site-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:'Poppins',Arial,sans-serif;font-weight:700}
.site-brand img{width:26px;height:26px}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 18px;flex:1 1 100%;order:3}
.site-nav a{color:var(--muted);text-decoration:none;font-size:.95rem;font-weight:600}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--teal);text-decoration:underline}
.site-head .acts{margin-left:auto;display:flex;align-items:center;gap:14px}
.site-head .signin{color:var(--teal);font-weight:700;text-decoration:none;font-size:.95rem}
.site-head .signin:hover{text-decoration:underline}
@media (min-width:900px){
  .site-nav{flex:0 1 auto;order:0;margin-left:14px}
}

/* ---------- site footer ---------- */
.site-foot{background:var(--soft);border-top:1px solid #e9ecec;margin-top:0;padding:38px 0 44px;font-size:.95rem;color:var(--muted)}
.site-foot .cols{max-width:1120px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1fr;gap:26px}
.site-foot h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:10px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:8px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--red);text-decoration:underline}
.site-foot .legalline{max-width:1120px;margin:28px auto 0;padding:18px 16px 0;border-top:1px solid #e3e7e7}
@media (min-width:760px){.site-foot .cols{grid-template-columns:repeat(3,1fr);gap:32px}}

/* ---------- hero (story page and home page) ---------- */
.hero{
  color:#fff;text-align:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1c5757 0%,var(--dark2) 45%,var(--dark1) 100%);
  padding:56px 0 64px;
}
.hero .eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#ffd0d0;margin-bottom:18px}
.hero h1{font-size:clamp(1.95rem,5.4vw,3rem);line-height:1.12;font-weight:800;letter-spacing:-.01em}
.hero p.lede{max-width:620px;margin:20px auto 0;font-size:clamp(1.04rem,2.2vw,1.2rem);color:rgba(255,255,255,.9)}
.hero .sig{margin-top:22px;font-size:.92rem;color:rgba(255,255,255,.66)}
.hero .btn{margin-top:28px}
@media (min-width:640px){.hero{padding:76px 0 84px}}

/* ---------- story page body ---------- */
.story{padding:44px 0 20px}
.story h2{font-size:clamp(1.35rem,3.2vw,1.72rem);font-weight:700;color:var(--teal);line-height:1.25;margin:46px 0 14px}
.story h2:first-of-type{margin-top:0}
.story p{margin:0 0 18px}
.story ul{margin:0 0 20px;padding-left:22px}
.story li{margin:0 0 9px}
.story .lead-para{font-size:1.16rem;color:var(--ink)}
.story strong.step{color:var(--red)}
.callout{background:var(--teal);color:#fff;padding:24px 26px;border-radius:10px;margin:28px 0;font-size:1.1rem;line-height:1.5;font-weight:600}
.callout p{margin:0}
.note{background:var(--paleteal);border-left:4px solid var(--teal);padding:20px 22px;border-radius:8px;margin:28px 0}
.note h3{font-size:1.05rem;color:var(--teal);margin-bottom:8px;font-weight:700}
.note p:last-child{margin-bottom:0}
.figures{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0}
.fig{background:var(--soft);border-radius:10px;padding:18px 20px}
.fig .n{font-family:'Poppins',Arial,sans-serif;font-weight:800;font-size:1.5rem;color:var(--teal);line-height:1.1}
.fig .l{font-size:.95rem;color:var(--muted);margin-top:6px}
@media (min-width:640px){.figures{grid-template-columns:repeat(3,1fr)}.story{padding:60px 0 20px}}

/* ---------- shared CTA band ---------- */
.cta-band{background:var(--soft);padding:48px 0;margin-top:56px;text-align:center}
.cta-band h2{color:var(--ink);margin:0 0 10px;font-size:clamp(1.3rem,3vw,1.6rem)}
.cta-band p{max-width:520px;margin:0 auto 24px;color:var(--muted)}
.cta-band .alt{margin:16px auto 0;font-size:.95rem;color:var(--muted)}
.cta-band .alt a{color:var(--red)}

/* ---------- read-next strip ---------- */
.readnext{padding:8px 0 4px}
.readnext h2{font-size:1.2rem;color:var(--teal);margin-bottom:16px;font-weight:700}
.readnext ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:14px}
.readnext li{background:var(--soft);border-radius:10px;padding:18px 20px}
.readnext a{font-weight:700;text-decoration:none}
.readnext a:hover{text-decoration:underline}
.readnext .d{display:block;color:var(--muted);font-size:.95rem;margin-top:6px}
@media (min-width:760px){.readnext ul{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}

/* ---------- article pages ---------- */
.article{max-width:720px;margin:0 auto;padding:32px 16px 56px;color:var(--ink);font-size:18px}
.article h1{font-size:1.95rem;line-height:1.2;font-weight:700;color:var(--ink);margin:0 0 14px}
.article .meta{font-style:italic;color:#5a6a68;font-size:.95rem;margin:0 0 10px}
.article .standfirst{font-size:1.12rem;color:#33413f;margin:0 0 28px}
.article h2{font-size:1.35rem;line-height:1.3;font-weight:600;color:var(--teal);margin:40px 0 12px}
.article h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:26px 0 8px}
.article p{margin:0 0 18px}
.article ul,.article ol{margin:0 0 20px;padding-left:22px}
.article li{margin:0 0 10px}
.insights{background:var(--paleteal);border-left:4px solid var(--teal);padding:20px 18px 6px;margin:0 0 34px;border-radius:3px}
.insights h2{margin:0 0 12px;font-size:1.12rem;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.insights ul{padding-left:20px;margin-bottom:14px}
.insights li{margin-bottom:12px}
.label{color:var(--red);font-weight:700}
.closer{background:var(--soft);border-top:3px solid var(--grey);padding:20px 18px 6px;margin:36px 0 28px;border-radius:3px}
.cta{margin:34px 0 10px}
.article .btn{border-radius:4px;box-shadow:none;padding:16px 26px;font-weight:600;font-size:1.02rem}
.emailline{font-size:.98rem;color:#33413f;margin:14px 0 30px}
.byline{font-family:'Poppins',Arial,sans-serif;font-weight:600;color:var(--teal);border-top:1px solid var(--grey);padding-top:16px;margin:0}
/* Header image slot. The img carries its real pixel size as width/height attributes, so the browser
   reserves the right amount of space before the file arrives and nothing on the page moves when it
   loads. height:auto keeps the picture undistorted if a replacement image has a different shape. The
   soft background is what the reserved box shows while the image is still downloading. */
.page-header{display:block;margin:0 0 26px}
.page-header-img{display:block;width:100%;height:auto;border-radius:10px;background:var(--soft);margin:0}
.article-page .readnext .wrap-wide{max-width:752px}
@media (min-width:640px){
  .article{font-size:19px;padding:44px 16px 72px}
  .article h1{font-size:2.4rem}
  .article h2{font-size:1.5rem}
}

/* ---------- home page: hero (the approved landing copy, reused from the member app) ----------
   Two columns from 900px up: the statement, the lead and the one call to action on the left, the white
   "what you get" card on the right. One column below that, copy first, card second. The columns are
   deliberately uneven (the card column is the wider one) so the long card runs shorter and the two
   sides finish close together: balance is a defect check here, not a preference. No gold, no yellow.
   The h1's <em> uses a light red tint (the same family as the eyebrow) because brand red on the dark
   panel is too close in tone to read comfortably. */
.lb-hero{
  color:#fff;
  background:radial-gradient(1100px 620px at 16% -25%,#1c5757 0%,var(--dark2) 46%,var(--dark1) 100%);
  padding:38px 0 42px;
}
.lb-hero .lb-hero-wrap{
  max-width:1120px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:1fr;gap:26px;align-items:start;
}
.lb-hero .lb-hero-eyebrow{
  font-family:'Poppins',Arial,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#ffd0d0;margin:0 0 14px;
}
.lb-hero h1{
  font-family:'Poppins',Arial,sans-serif;font-size:clamp(1.85rem,5.2vw,2.75rem);
  line-height:1.14;font-weight:800;letter-spacing:-.01em;color:#fff;margin:0;
}
.lb-hero h1 em{font-style:normal;color:#ffb0b1}
.lb-hero .lb-hero-lead{margin:18px 0 0;font-size:clamp(1.02rem,1.9vw,1.14rem);color:rgba(255,255,255,.92)}
.lb-hero .lb-hero-note{margin:12px 0 0;font-size:.93rem;color:rgba(255,255,255,.72)}
.lb-hero .lb-hero-cta{margin:24px 0 0}
.lb-hero .lb-hero-cta .btn{box-shadow:0 12px 28px rgba(0,0,0,.34)}
.lb-hero .lb-hero-reassure{
  list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;
  font-size:.88rem;color:rgba(255,255,255,.82);
}
.lb-hero .lb-hero-reassure li{background:rgba(255,255,255,.1);border-radius:999px;padding:.3rem .75rem}
/* the "what you get from your scan" card */
.lb-hero .lb-hero-card{
  background:#fff;color:var(--body);border-radius:16px;padding:24px 22px;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}
.lb-hero .lb-hero-card h2{font-family:'Poppins',Arial,sans-serif;font-size:1.16rem;font-weight:700;color:var(--ink);margin:0}
.lb-hero .lb-hero-steps{list-style:none;counter-reset:lbst;margin:14px 0 0;padding:0;display:grid;gap:12px}
.lb-hero .lb-hero-steps>li{counter-increment:lbst;position:relative;padding-left:42px;font-size:.96rem;line-height:1.5;color:#3c4745}
.lb-hero .lb-hero-steps>li:before{
  content:counter(lbst);position:absolute;left:0;top:0;width:29px;height:29px;border-radius:50%;
  background:var(--red);color:#fff;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:.9rem;
  display:grid;place-items:center;
}
.lb-hero .lb-hero-steps>li b{display:block;color:var(--ink)}
.lb-hero .lb-hero-checks{margin-top:18px}
.lb-hero .lb-hero-checks .lb-strong{font-weight:700;color:var(--ink);margin:0}
.lb-hero .lb-plain-list{margin:7px 0 0;padding-left:20px;list-style:disc;display:grid;gap:3px;font-size:.94rem;line-height:1.45}
.lb-hero .lb-hero-small{margin:6px 0 0;font-size:.89rem;color:var(--muted)}
.lb-hero .lb-hero-why{margin-top:18px;border:2px solid var(--red);border-radius:12px;padding:14px 16px;background:#fffafa}
.lb-hero .lb-why-eyebrow{
  font-family:'Poppins',Arial,sans-serif;font-size:.73rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);margin:0 0 6px;
}
.lb-hero .lb-hero-why p{margin:0;font-size:.94rem;line-height:1.5;color:#3c4745}
.lb-hero .lb-hero-why .lb-why-link{margin-top:8px;font-weight:700}
.lb-hero .lb-hero-why .lb-why-link a{color:var(--teal)}
/* Two columns only from 1000px up. Between 900 and 1000 the card column is too narrow: the card runs
   far taller than the copy beside it and leaves a gap down one side, so the stacked layout is kept. */
@media (min-width:1000px){
  .lb-hero{padding:56px 0 60px}
  .lb-hero .lb-hero-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:46px;align-items:center}
  .lb-hero .lb-hero-card{padding:28px 26px}
}

/* ---------- home page: How it works (scoped, lifted from the signed-off section) ---------- */
.lb-how{background:#fff;color:#333;padding:56px 0;font-size:17px;line-height:1.6}
.lb-how .lb-wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.lb-how h2,.lb-how h3,.lb-how .lb-eyebrow,.lb-how .lb-btn,.lb-how .lb-price,.lb-how .lb-stepno{font-family:'Poppins',Arial,sans-serif}
.lb-how .lb-eyebrow{display:block;text-align:center;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-bottom:8px}
.lb-how .lb-title{text-align:center;font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;color:var(--ink);line-height:1.18;margin:0 auto 12px;max-width:620px}
.lb-how p.lb-sub{text-align:center;max-width:580px;margin:0 auto 40px;color:var(--muted);font-size:1.05rem}
.lb-how .lb-steps{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:34px;list-style:none;padding:0}
.lb-how .lb-step{background:var(--soft);border-radius:14px;padding:26px 24px;border:1px solid #e9ecec}
.lb-how .lb-stepno{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:14px}
.lb-how .lb-step h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 8px}
.lb-how .lb-step p{margin:0 0 10px;color:#444}
.lb-how .lb-step p:last-child{margin-bottom:0}
.lb-how .lb-tag{display:inline-block;background:var(--paleteal);color:var(--teal);font-weight:700;font-size:.82rem;padding:.25rem .6rem;border-radius:6px;margin-bottom:12px}
.lb-how .lb-scan-cta{text-align:center;margin:0 0 56px}
.lb-how h2.lb-plans-h{text-align:center;font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;color:var(--ink);margin:0 0 30px}
.lb-how .lb-btn{
  display:inline-block;text-align:center;font-weight:700;font-size:1rem;text-decoration:none;
  padding:.9rem 1.6rem;border-radius:999px;background:var(--red);color:#fff;
  box-shadow:0 8px 20px rgba(205,23,25,.28);line-height:1.3;
}
.lb-how .lb-btn:hover{background:var(--red-dark)}
.lb-how .lb-btn.lb-ghost{background:#fff;color:var(--teal);border:2px solid var(--teal);box-shadow:none}
.lb-how .lb-btn.lb-ghost:hover{background:var(--paleteal)}
.lb-how .lb-btn.lb-full{display:block;width:100%}
.lb-how .lb-plans{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;list-style:none;padding:13px 0 0}
.lb-how .lb-plan{background:#fff;border:1px solid #e3e7e7;border-radius:16px;padding:28px 24px;position:relative}
/* Review fix 5+6 (2026-10-27): the recommended card keeps a 1px border like the others and draws its
   second ring with a box-shadow, and the badge is positioned, so NOTHING in the card is pushed down.
   Every card in the row therefore starts its title and price on the same line. */
.lb-how .lb-plan.is-rec{border:1px solid var(--red);box-shadow:0 0 0 1px var(--red),0 14px 34px rgba(205,23,25,.12)}
.lb-how .lb-badge{position:absolute;top:-13px;left:24px;background:var(--red);color:#fff;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px}
.lb-how .lb-plan h3{font-size:1.25rem;font-weight:700;color:var(--ink);margin:0 0 10px}
.lb-how .lb-rec-tag{font-size:.9rem;color:var(--muted);margin:8px 0 14px}
.lb-how .lb-why-h{font-size:.95rem;font-weight:700;color:var(--ink);margin:0 0 8px}
.lb-how .lb-price{font-size:2.1rem;font-weight:800;color:var(--teal);line-height:1}
.lb-how .lb-price span{font-size:1rem;font-weight:600;color:var(--muted)}
.lb-how .lb-annual{font-size:.9rem;color:var(--muted);margin:8px 0 18px}
.lb-how .lb-plan ul.lb-feats{list-style:none;margin:0 0 22px;padding:0}
.lb-how .lb-plan ul.lb-feats li{position:relative;padding:0 0 10px 26px;font-size:.98rem;color:#3c4745}
.lb-how .lb-plan ul.lb-feats li:before{content:"\2713";position:absolute;left:2px;top:0;color:var(--teal);font-weight:700}
.lb-how .lb-r95{font-size:.9rem;color:var(--teal);background:var(--paleteal);border-radius:8px;padding:10px 12px;margin:0 0 18px}
.lb-how .lb-foot{text-align:center;margin:36px auto 0;max-width:640px;color:var(--muted);font-size:.95rem}
@media (min-width:720px){
  .lb-how{padding:72px 0}
  .lb-how .lb-steps{grid-template-columns:repeat(3,1fr);gap:22px}
  .lb-how .lb-plans{grid-template-columns:1fr 1fr;gap:26px}
}

/* ---------- legal pages ---------- */
.legal{background:#f5f6f8;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;color:#22252b}
.legal .wrap{max-width:780px;margin:0 auto;padding:32px 20px 72px}
.legal .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.legal h1,.legal h2,.legal h3{line-height:1.3;color:#1a1a2e}
.legal h1{font-size:30px;font-weight:700;letter-spacing:-.4px}
.legal h2{font-size:21px;font-weight:600;margin-top:36px}
.legal h3{font-size:17px;font-weight:600;margin-top:24px}
.legal p,.legal ul,.legal ol,.legal table{margin-top:12px}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin-top:6px}
.legal .card a{color:var(--teal)}
.legal .card a:hover{color:var(--teal-dark)}
.legal .lede{font-size:17px;color:#555d6b;margin-top:10px}
.legal .meta{font-size:14px;color:#555d6b;margin-top:6px}
.legal .note{background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:8px;padding:14px 16px;margin-top:18px}
.legal .plain{background:#fff8f8;border-left:4px solid var(--red);border-radius:8px;padding:14px 16px;margin-top:18px}
.legal .draft{background:var(--red);color:#fff;font-weight:600;padding:12px 16px;border-radius:10px;margin-bottom:24px}
.legal table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.legal th,.legal td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.legal th{background:var(--teal-soft);font-weight:600;color:#1a1a2e}
.legal .narrow{max-width:480px}
.legal .toc{font-size:15px}
.legal footer{margin-top:40px;font-size:14px;color:#555d6b}
.legal .tablewrap{overflow-x:auto}
@media (max-width:600px){
  .legal .wrap{padding:20px 16px 56px}
  .legal .card{padding:20px 16px}
  .legal h1{font-size:25px}
  .legal table,.legal th,.legal td{font-size:14px}
}

/* ---------- articles index (/articles): every Academy article, newest first ----------
   One column on a phone (picture on top, words under it). From 760px each article is a row:
   the header picture on the left at a fixed 300px, the date, title and summary beside it. */
.articles-index{max-width:960px;margin:0 auto;padding:32px 16px 36px;color:var(--ink)}
.articles-index h1{font-size:1.95rem;line-height:1.2;font-weight:700;margin:0 0 10px}
.articles-index .lead{font-size:1.1rem;color:#33413f;max-width:640px;margin:0 0 28px}
.art-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.art-card{display:grid;grid-template-columns:1fr;gap:14px;background:var(--soft);border-radius:10px;padding:14px;text-decoration:none;color:inherit}
.art-card:hover h2,.art-card:focus-visible h2{text-decoration:underline}
.art-card img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.art-card .art-date{font-size:.9rem;color:var(--muted);margin:0 0 4px}
.art-card h2{font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--teal);margin:0 0 6px}
.art-card .art-sum{margin:0;color:var(--body)}
.articles-index .story-line{margin:28px 0 0;color:var(--muted)}
.articles-index + .cta-band{margin-top:8px}
@media (min-width:760px){
  .articles-index{padding:44px 16px 40px}
  .articles-index h1{font-size:2.4rem}
  .art-card{grid-template-columns:300px 1fr;gap:22px;align-items:center;padding:16px}
}