/* 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 48px}
.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}
a.ar-eyebrow{text-decoration:none;transition:.15s}
a.ar-eyebrow:hover{background:#DED3F7}
.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}
.ar-quote cite a,.ar-tnote a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ar-quote cite a:hover,.ar-tnote a:hover{color:var(--violet)}

/* 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%}
}

/* comparison table */
.ar-tablewrap{overflow-x:auto;margin:22px 0 8px;border:1px solid var(--line);border-radius:14px}
.ar-table{width:100%;min-width:520px;border-collapse:collapse;font-size:16px;color:var(--navy)}
.ar-table th,.ar-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ar-table thead th{background:#F4F1FB;font-weight:800}
.ar-table tbody th{font-weight:600}
.ar-table tbody tr:last-child th,.ar-table tbody tr:last-child td{border-bottom:none}
.ar-table .grp td{background:#FAF8FE;font-weight:800;font-size:15px;letter-spacing:.02em}
.ar-table td.chg{background:#FFF6E4;font-weight:700}
.ar-tnote{font-size:14px!important;color:var(--navy);margin:0 0 20px!important}

/* before / after screenshot pair */
.ar-ba{display:grid;gap:18px;margin:22px 0 26px}
.ar-ba figure{margin:0}
.ar-ba .lbl{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin:0 0 9px}
.ar-ba .lbl.old{background:#EDF2FB;color:#001B54}
.ar-ba .lbl.new{background:#EDE9FB;color:#4B2E9E}
.ar-ba img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}

/* ===== article frame: contents | article | sign-up ===== */
.ar-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;column-gap:56px}
.ar-hero .ar-grid .in{max-width:none;margin:0}
.ar-hero h1{text-wrap:balance}
.ar-main{padding-top:56px;padding-bottom:44px;align-items:start}
.ar-main .ar{max-width:none;margin:0;padding:0}
.ar h2{scroll-margin-top:92px}

/* table of contents */
.ar-toc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 108px);overflow:auto;padding-right:4px}
.ar-toc-h{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 10px}
.ar-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.ar-toc li{margin:0}
.ar-toc a{display:block;margin-left:-2px;padding:9px 8px 9px 14px;border-left:2px solid transparent;border-radius:0 8px 8px 0;font-size:15px;line-height:1.4;font-weight:600;color:var(--navy);text-decoration:none;transition:.15s}
.ar-toc a:hover{color:var(--violet)}
.ar-toc a.on{color:var(--violet);border-left-color:var(--violet);background:#F4F1FB}
.ar-toc-more{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0 14px;padding:0;background:none;border:none;font:inherit;font-size:15px;font-weight:700;color:var(--violet);cursor:pointer}
.ar-toc-more svg{transition:.15s}
.ar-toc-more.open svg{transform:rotate(180deg)}

/* the same list folded above the article, for narrower screens */
.ar-toc-m{display:none;border:1px solid var(--line);border-radius:12px;padding:0 16px;margin:0 0 24px;background:#fff}
.ar-toc-m summary{cursor:pointer;list-style:none;padding:13px 0;font-size:16px;font-weight:800;color:var(--navy)}
.ar-toc-m summary::-webkit-details-marker{display:none}
.ar-toc-m summary::after{content:"+";float:right;font-weight:800;color:var(--violet)}
.ar-toc-m[open] summary::after{content:"\2212"}
.ar-toc-m ol{margin:0 0 14px;padding-left:20px}
.ar-toc-m li{font-size:16px;line-height:1.45;margin:0 0 8px}
.ar-toc-m a{color:var(--navy);font-weight:600;text-decoration:none}
.ar-toc-m a.on{color:var(--violet)}

/* sign-up card */
.ar-side{position:sticky;top:88px;align-self:start}
.ar-signup{background:linear-gradient(160deg,#7C5CD6 0%,#5A3DA8 100%);border-radius:18px;padding:26px 24px 22px;box-shadow:0 26px 50px -34px rgba(44,36,91,.7)}
.ar-signup-h{font-size:25px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:#fff;margin:0 0 10px}
.ar-signup-p{font-size:16px;line-height:1.55;color:#EFEAFF;margin:0 0 18px}
.ar-signup-form fieldset{border:none;margin:0 0 14px;padding:0;min-width:0}
.ar-signup-form legend{font-size:15px;font-weight:700;color:#fff;margin:0 0 7px;padding:0}
.ar-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#4A2F99;border-radius:11px;padding:4px}
.ar-seg label{position:relative;cursor:pointer;margin:0}
.ar-seg input{position:absolute;opacity:0;pointer-events:none}
.ar-seg span{display:block;text-align:center;padding:9px 6px;border-radius:8px;font-size:15px;font-weight:700;color:#E4DCFA;transition:.15s}
.ar-seg input:checked+span{background:#fff;color:#4B2E9E}
.ar-seg input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.ar-signup-lbl{display:block;font-size:15px;font-weight:700;color:#fff;margin:0 0 7px}
.ar-signup-in{display:block;width:100%;box-sizing:border-box;border:none;border-radius:10px;padding:12px 14px;margin:0 0 12px;font:inherit;font-size:16px;color:var(--navy);background:#fff}
.ar-signup-in:focus{outline:3px solid #F5A623;outline-offset:1px}
.ar-signup-btn{display:block;width:100%;border:none;border-radius:10px;padding:13px 16px;font:inherit;font-size:16px;font-weight:800;color:#fff;background:#001B54;cursor:pointer;transition:.15s}
.ar-signup-btn:hover{background:#0B2A6B}
.ar-signup-note{font-size:14px;text-align:center;color:#E4DCFA;margin:10px 0 0}

@media(max-width:1180px){
  .ar-grid{grid-template-columns:minmax(0,1fr) 300px;column-gap:44px}
  .ar-col-l,.ar-toc{display:none}
  .ar-toc-m{display:block}
}
@media(max-width:900px){
  .ar-grid{grid-template-columns:minmax(0,1fr)}
  .ar-col-r{display:none}
  .ar-side{position:static;margin-top:36px}
}

/* article header: title, date and share beside the lead image */
.ar-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:center}
.ar-head-text h1{font-size:42px;margin:0 0 18px}
.ar-head-meta{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.ar-head-meta time{font-size:16px;font-weight:600;color:var(--navy)}
.ar-head-meta .ar-share{margin:0}
.ar-head--noimg{grid-template-columns:minmax(0,1fr)}
.ar-head--noimg .ar-head-text{max-width:860px}
.ar-head-img img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 60px -40px rgba(44,36,91,.6)}
@media(max-width:900px){
  .ar-head{grid-template-columns:minmax(0,1fr);gap:28px}
  .ar-head-text h1{font-size:31px}
}
/* on phones the Share button sits mid-screen, so open its menu leftwards */
@media(max-width:600px){.ar-share-menu{left:auto;right:0}}

/* "Keep reading": related articles below the body. Cover tones are repeated from
   fw-blog.css because that stylesheet is not loaded on article pages. */
.ar-rel{border-top:1px solid var(--line);background:#FBFAFE;padding:44px 0 56px;margin-top:56px}
.ar-rel h2{font-size:26px;font-weight:800;color:var(--navy);margin:0 0 22px;letter-spacing:-.01em}
.ar-rel-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ar-rel-grid li{margin:0}
.ar-rel-grid a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:.16s}
.ar-rel-grid a:hover{border-color:#cdbff0;transform:translateY(-2px);box-shadow:0 18px 34px -26px rgba(44,36,91,.55)}
.ar-rel-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#EFEAF9}
.ar-rel-img img{display:block;width:100%;height:100%;object-fit:cover}
.ar-rel-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px}
.ar-rel-tile .big{font-size:27px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.ar-rel-tile .small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.ar-rel-tile.t-violet{background:linear-gradient(140deg,#F1ECFC 0%,#DED3F7 100%);color:#4B2E9E}
.ar-rel-tile.t-navy{background:linear-gradient(140deg,#EDF2FB 0%,#D3DEF2 100%);color:#001B54}
.ar-rel-tile.t-gold{background:linear-gradient(140deg,#FFF6E4 0%,#FCE3B1 100%);color:#7A4A00}
.ar-rel-tile.t-green{background:linear-gradient(140deg,#EAF7EF 0%,#CDEBD8 100%);color:#135F34}
.ar-rel-topic{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--violet);padding:16px 18px 0}
.ar-rel-t{display:block;font-size:17px;line-height:1.35;font-weight:700;color:var(--navy);padding:7px 18px 0}
.ar-rel-m{display:block;margin-top:auto;font-size:16px;font-weight:600;color:var(--navy);padding:12px 18px 16px}
.ar-rel-all{margin:24px 0 0}
.ar-rel-all a{font-size:16px;font-weight:700;color:var(--violet);text-decoration:none}
.ar-rel-all a:hover{text-decoration:underline}
@media(max-width:900px){.ar-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ar-rel h2{font-size:23px}}
@media(max-width:620px){.ar-rel-grid{grid-template-columns:minmax(0,1fr)}.ar-rel{padding:34px 0 40px;margin-top:40px}}

/* 2027 comparison matrix: two eras, each split Supervised / Concentrated */
.ar-table.g27-matrix{min-width:660px;text-align:center}
.ar-table.g27-matrix th,.ar-table.g27-matrix td{text-align:center;vertical-align:middle;padding:11px 9px;line-height:1.35}
.ar-table.g27-matrix .g27-rq{text-align:left;width:25%;background:#F4F1FB;padding-left:14px}
.ar-table.g27-matrix tbody th{text-align:left;font-weight:700;background:#FBFAFE;padding-left:14px}
.ar-table.g27-matrix .g27-era{font-size:16px;line-height:1.3;border-bottom:3px solid transparent}
.ar-table.g27-matrix .g27-before{background:#EDF2FB;color:var(--navy);border-bottom-color:#A9BEDF}
.ar-table.g27-matrix .g27-after{background:#EDE9FB;color:#4B2E9E;border-bottom-color:var(--violet)}
.ar-table.g27-matrix .g27-sub{background:#F7F5FC;font-weight:700}
.ar-table.g27-matrix .g27-all{color:var(--navy)}