/* Shared styles for /articles. Loaded after fw-features.css.
   Font floor is 16px throughout, body text is always navy, per house style. */
:root{
  --navy:#001B54; --ink:#001B54; --violet:#6D4BC4; --violet-d:#5a3da8;
  --gold:#F5A623; --line:#E6ECF5; --green:#1f9d55;
}

/* hero */
.ar-hero{background:linear-gradient(180deg,#F4F1FB 0%,#F8F6FD 60%,#fff 100%);padding:52px 0 32px}
.ar-hero .in{max-width:820px;margin:0 auto}
.ar-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#EDE9FB;color:#4B2E9E;font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:14px}
.ar-hero h1{font-size:44px;line-height:1.14;font-weight:800;color:var(--navy);margin:0 0 16px;letter-spacing:-.01em}
.ar-meta{font-size:16px;color:var(--navy);margin:0}
.ar-meta b{font-weight:700}

/* body */
.ar{max-width:820px;margin:0 auto;padding:0 24px}
.ar-crumb{font-size:12.5px;color:#6b6790;font-weight:500;padding:16px 0 0}
.ar-crumb a{color:#6b6790;text-decoration:none}
.ar-crumb a:hover{color:var(--violet);text-decoration:underline}
.ar h2{font-size:27px;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:40px 0 12px;scroll-margin-top:78px}
.ar h3{font-size:20px;font-weight:800;color:var(--navy);margin:28px 0 8px}
.ar p{font-size:17px;line-height:1.72;color:var(--navy);margin:0 0 16px}
.ar ul,.ar ol{margin:0 0 18px;padding-left:24px}
.ar li{font-size:17px;line-height:1.7;color:var(--navy);margin:0 0 9px}
.ar a.inl{color:var(--violet);font-weight:700;text-decoration:underline}
.ar strong{color:var(--navy);font-weight:700}

/* pull quote for source material */
.ar-quote{background:#F7F5FC;border-left:4px solid var(--violet);border-radius:0 14px 14px 0;padding:20px 24px;margin:22px 0}
.ar-quote p{font-size:17px;line-height:1.7;margin:0 0 10px;color:var(--navy)}
.ar-quote p:last-child{margin:0}
.ar-quote cite{display:block;font-size:16px;font-style:normal;font-weight:700;color:#4B2E9E;margin-top:12px}

/* callout */
.ar-note{background:#FEF7E0;border:1px solid #F4E2A6;border-radius:14px;padding:18px 22px;margin:22px 0}
.ar-note p{font-size:16px;line-height:1.66;margin:0 0 10px}
.ar-note p:last-child{margin:0}

/* key point */
.ar-key{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 14px 14px 0;padding:18px 22px;margin:22px 0}
.ar-key p{margin:0;font-size:17px;line-height:1.66}

/* steps */
.ar-steps{counter-reset:s;list-style:none;padding:0;margin:20px 0}
.ar-steps li{counter-increment:s;position:relative;padding:0 0 0 46px;margin:0 0 16px;font-size:17px;line-height:1.7;color:var(--navy)}
.ar-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:#EDE9FB;color:#4B2E9E;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}

/* sources */
.ar-src{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 22px;margin:16px 0 0}
.ar-src li{font-size:16px;line-height:1.62;margin:11px 0}
.ar-src a{color:var(--violet);font-weight:600;text-decoration:underline}

/* cta */
.ar-cta{background:#F7F5FC;border:1px solid #E4DCF7;border-radius:18px;padding:28px 30px;margin:40px 0 10px;text-align:center}
.ar-cta h2{margin:0 0 10px;font-size:24px}
.ar-cta p{max-width:38em;margin:0 auto 18px}

/* index listing */
.ar-list{max-width:860px;margin:0 auto;padding:0 24px 70px}
.ar-card{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:0 0 16px;transition:.15s}
.ar-card:hover{border-color:#cdbff0;box-shadow:0 18px 38px -30px rgba(99,34,214,.45)}
.ar-card .top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:16px;color:var(--navy);margin-bottom:10px}
.ar-card .topic{background:#EDE9FB;color:#4B2E9E;font-weight:700;padding:4px 11px;border-radius:999px}
.ar-card h2{font-size:23px;font-weight:800;color:var(--navy);margin:0 0 10px;line-height:1.28}
.ar-card p{font-size:17px;line-height:1.62;color:var(--navy);margin:0}
.ar-card .more{display:inline-block;margin-top:12px;font-size:16px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--violet)}
.ar-empty{text-align:center;color:var(--navy);font-size:17px;padding:40px 0}

@media(max-width:820px){
  .ar-hero h1{font-size:31px}
  .ar h2{font-size:23px}
  .ar-card h2{font-size:20px}
}

/* share: one button that opens a small menu */
.ar-share{position:relative;display:inline-block;margin:18px 0 0}
.ar-share-trigger{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #d9dfea;border-radius:10px;padding:8px 15px;font-size:15px;font-weight:600;font-family:inherit;color:var(--navy);cursor:pointer;transition:.15s}
.ar-share-trigger svg{width:17px;height:17px;flex:none}
.ar-share-trigger:hover{border-color:var(--violet);color:var(--violet)}
.ar-share-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:196px;background:#fff;border:1px solid #ECE8F7;border-radius:14px;box-shadow:0 20px 44px -22px rgba(44,36,91,.5);padding:7px}
.ar-share-menu a,.ar-share-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:none;border-radius:9px;font-size:15px;font-weight:500;font-family:inherit;color:var(--navy);text-decoration:none;cursor:pointer;text-align:left}
.ar-share-menu a:hover,.ar-share-menu button:hover{background:#F4F1FB}
.ar-share-menu svg{width:18px;height:18px;flex:none;color:#4B2E9E}

/* date, at the foot of the article */
.ar-date{font-size:13px;color:#6b6790;margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line)}

/* article figure */
.ar-fig{margin:26px 0 30px}
.ar-fig img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.ar-fig figcaption{font-size:16px;line-height:1.6;color:var(--navy);margin-top:11px}

/* index card image */
.ar-card{display:flex;gap:22px;align-items:flex-start}
.ar-card .thumb{flex:none;width:232px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#F7F5FC}
.ar-card .thumb img{display:block;width:100%;height:auto}
.ar-card .body{min-width:0}
@media(max-width:660px){
  .ar-card{flex-direction:column;gap:16px}
  .ar-card .thumb{width:100%}
}