/* Blog design. Matches the claraai.tech homepage: dark header, footer and title band,
   Outfit headings, white pill buttons. The article itself sits on a light reading surface. */
:root{
  --ink:#070312;            /* homepage background */
  --ink-2:#0C071A;          /* homepage dark card */
  --text:#0F0822;           /* homepage text on light sections */
  --body:#2A2440;
  --violet:#8B5CF6;
  --violet-deep:#5D27CA;
  --lilac:#CDB8FF;
  --lavender:#EDE3FF;       /* homepage light section */
  --paper:#FAF8FC;
  --gray:#5F5A72;
  --border:#E6DFF5;
  --line:rgba(255,255,255,0.08);
  --display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --reading:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--reading);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.dark{background:var(--ink);color:#fff;}
body.dark main{overflow:hidden;overflow:clip;}
::selection{background:rgba(196,181,253,0.35);}
img{max-width:100%;}

/* ---------- header (same as homepage) ---------- */
header.site{
  position:sticky;top:0;z-index:40;font-family:var(--display);
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
header.site .in{
  max-width:1280px;margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
header.site .logo{display:flex;align-items:center;text-decoration:none;color:#fff;font-size:22px;font-weight:500;}
header.site .logo img{height:32px;width:auto;max-width:140px;object-fit:contain;display:block;}
header.site nav.desktop{display:flex;align-items:center;gap:32px;font-size:14px;}
header.site nav a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color .15s;}
header.site nav a:hover,header.site nav a[aria-current]{color:#fff;}
header.site nav a.pill,header.site nav a.pill:hover{color:#0A0618;}
.pill{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--display);font-weight:500;font-size:14px;line-height:1;
  background:#fff;color:#0A0618;padding:12px 18px;border-radius:999px;text-decoration:none;transition:background .15s;
}
.pill:hover{background:rgba(255,255,255,0.9);color:#0A0618;}
.pill.lg{font-size:15px;padding:15px 28px;}
.pill.ghost{background:rgba(255,255,255,0.05);color:#fff;border:1px solid rgba(255,255,255,0.14);}
.pill.ghost:hover{background:rgba(255,255,255,0.1);color:#fff;}
header.site details.menu{display:none;}
header.site details.menu summary{
  list-style:none;cursor:pointer;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.7);
}
header.site details.menu summary::-webkit-details-marker{display:none;}
header.site details.menu summary svg{width:20px;height:20px;}
header.site details.menu .x,header.site details.menu[open] .bars{display:none;}
header.site details.menu[open] .x{display:block;}
header.site details.menu nav{
  position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:16px;
  padding:16px 16px 20px;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:16px;
}
header.site details.menu nav .pill{margin-top:8px;width:100%;}

/* ---------- dark title band ---------- */
.band{position:relative;background:var(--ink);color:#fff;overflow:hidden;}
.band::before{
  content:"";position:absolute;width:640px;height:640px;right:-140px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,0.42),transparent 68%);filter:blur(60px);pointer-events:none;
}
.band::after{
  content:"";position:absolute;width:520px;height:520px;left:-220px;bottom:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(93,39,202,0.35),transparent 68%);filter:blur(70px);pointer-events:none;
}
.band .in{position:relative;z-index:1;max-width:808px;margin:0 auto;padding:44px 24px 0;}
.band.post .in{padding-bottom:230px;}
.band.index{overflow:visible;}
.band.index::after{display:none;}
.band.index .in{max-width:1280px;padding:72px 40px 56px;}
.crumbs{font-family:var(--display);font-size:13.5px;color:rgba(255,255,255,0.45);margin:0 0 22px;}
.crumbs a{color:rgba(255,255,255,0.6);text-decoration:none;}
.crumbs a:hover{color:#fff;}
.eyebrow{
  display:inline-flex;align-items:center;font-family:var(--display);font-weight:400;font-size:12px;
  letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);border-radius:999px;padding:8px 16px;margin:0 0 22px;
}
h1{
  font-family:var(--display);font-weight:600;font-size:52px;line-height:1.06;letter-spacing:-0.03em;color:#fff;margin:0 0 20px;
}
.band.index h1{font-size:68px;line-height:1;max-width:900px;}
.grad{background:linear-gradient(135deg,#FFFFFF,#CDB8FF 60%,#8C63FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.band .lede{font-family:var(--display);font-weight:300;font-size:20px;line-height:1.55;color:rgba(255,255,255,0.66);max-width:640px;margin:22px 0 0;}
.byline{font-family:var(--display);font-size:15px;color:rgba(255,255,255,0.55);margin:0;}
.byline strong{font-weight:500;color:rgba(255,255,255,0.88);}

/* ---------- article ---------- */
.page{max-width:808px;margin:0 auto;padding:0 24px 72px;}
.hero{position:relative;z-index:2;margin:-190px 0 44px;}
.hero img{
  width:100%;height:auto;display:block;border-radius:22px;background:#fff;
  border:1px solid rgba(255,255,255,0.14);box-shadow:0 30px 60px -28px rgba(7,3,18,0.55);
}
article p{margin:0 0 20px;color:var(--body);}
article > p:first-of-type{font-size:19px;line-height:1.7;color:var(--text);}
h2{
  font-family:var(--display);font-weight:600;font-size:31px;line-height:1.18;letter-spacing:-0.03em;color:var(--text);margin:56px 0 18px;
}
h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-0.01em;color:var(--text);margin:34px 0 12px;}
article a{color:var(--violet-deep);text-decoration-color:rgba(139,92,246,0.45);text-underline-offset:3px;}
article a:hover{color:var(--ink);}
article ul{margin:0 0 20px;padding-left:22px;color:var(--body);}
article ul li{margin-bottom:8px;}
figure{margin:32px 0 34px;}
figure img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--border);box-shadow:0 18px 40px -26px rgba(15,8,34,0.4);}
figcaption{font-family:var(--display);font-size:14px;color:var(--gray);margin-top:10px;text-align:center;}
ol.steps{margin:0 0 22px;padding-left:0;list-style:none;counter-reset:step;}
ol.steps li{counter-increment:step;position:relative;padding:3px 0 3px 48px;margin-bottom:14px;color:var(--body);}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:3px;width:32px;height:32px;border-radius:50%;
  background:var(--lavender);color:var(--violet-deep);font-family:var(--display);font-weight:600;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
ol.steps li strong{color:var(--text);}
.table-wrap{overflow-x:auto;margin:10px 0 34px;border:1px solid var(--border);border-radius:18px;background:#fff;}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:540px;}
th,td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:13px 16px;text-align:left;vertical-align:top;}
tr:last-child td{border-bottom:0;}
th:last-child,td:last-child{border-right:0;}
th{background:var(--lavender);color:var(--text);font-family:var(--display);font-weight:600;font-size:14px;}
td:first-child,th:first-child{font-weight:600;color:var(--text);}
blockquote{
  margin:30px 0;padding:22px 26px;background:var(--lavender);border-radius:20px;
  font-family:var(--display);font-size:20px;line-height:1.5;color:var(--text);
}
blockquote p:last-child{margin-bottom:0;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:30px 0 34px;}
.stats .stat{background:var(--ink);border-radius:22px;padding:22px 22px 20px;}
.stats .stat strong{
  display:block;font-family:var(--display);font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-0.03em;margin-bottom:8px;
  background:linear-gradient(135deg,#FFFFFF,#CDB8FF 60%,#8C63FF);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stats .stat span{display:block;font-family:var(--display);font-size:15px;line-height:1.45;color:rgba(255,255,255,0.66);}
#faq{margin-top:64px;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px 24px;margin-bottom:14px;}
.faq-item h3{margin:0 0 8px;font-size:19px;}
.faq-item p{margin:0;}
.sources{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);font-size:14px;color:var(--gray);}
.sources h2{font-size:13px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray);margin:0 0 10px;}
.sources ul{padding-left:18px;margin:0;color:var(--gray);}
.sources a{word-break:break-word;}

/* ---------- call to action (homepage contact card) ---------- */
.cta-box{
  position:relative;overflow:hidden;margin:60px 0 0;padding:40px;border-radius:30px;color:#fff;
  background:linear-gradient(135deg,rgba(139,92,246,0.32),rgba(12,7,26,0.2) 55%),var(--ink);border:1px solid rgba(255,255,255,0.1);
}
.cta-box h2{color:#fff;margin:0 0 12px;font-size:32px;}
.cta-box p{font-family:var(--display);font-weight:300;font-size:18px;line-height:1.55;color:rgba(255,255,255,0.7);margin:0 0 26px;max-width:560px;}
.cta-box .btns{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- post cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:30px;font-family:var(--display);
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.035);transition:border-color .2s,transform .2s;
}
.card:hover{border-color:rgba(205,184,255,0.45);transform:translateY(-2px);}
.card a.img{display:block;padding:10px 10px 0;}
.card img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:22px;background:#fff;}
.card .in{padding:20px 22px 24px;}
.card .cat{font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--lilac);margin:0 0 10px;}
.card h2,.card h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-0.02em;margin:0 0 10px;}
.card h2 a,.card h3 a{color:#fff;text-decoration:none;}
.card p{font-weight:300;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,0.62);margin:0 0 14px;}
.card time{font-size:13px;color:rgba(255,255,255,0.4);}
.listing{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:8px 40px 96px;}
/* The newest post gets a wide card at the top of the blog index. */
.card.featured{grid-column:1/-1;flex-direction:row;align-items:stretch;background:rgba(255,255,255,0.045);}
.card.featured a.img{flex:0 0 54%;padding:12px 0 12px 12px;}
.card.featured img{height:100%;border-radius:22px;}
.card.featured .in{display:flex;flex-direction:column;justify-content:center;padding:36px 44px;}
.card.featured h2{font-size:38px;line-height:1.08;letter-spacing:-0.03em;margin-bottom:14px;}
.card.featured p{font-size:18px;}
.card .pill.read{align-self:flex-start;margin-top:22px;}
.more{background:var(--ink);color:#fff;}
.more .in{max-width:1280px;margin:0 auto;padding:72px 40px 80px;}
.more h2{color:#fff;font-size:34px;margin:0 0 28px;}
.label{font-family:var(--display);font-size:13px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin:0 0 14px;}

/* ---------- footer (same as homepage) ---------- */
footer.site{background:var(--ink);border-top:1px solid var(--line);font-family:var(--display);}
footer.site .in{
  max-width:1280px;margin:0 auto;padding:32px 40px;display:flex;flex-wrap:wrap;gap:16px 24px;
  align-items:center;justify-content:space-between;font-size:14px;color:rgba(255,255,255,0.4);
}
footer.site img{height:24px;width:auto;max-width:120px;object-fit:contain;display:block;}
footer.site .tag{display:flex;align-items:center;gap:24px;}
footer.site a{color:rgba(255,255,255,0.55);text-decoration:none;}
footer.site a:hover{color:#fff;}

@media (max-width:1023px){
  .card.featured h2{font-size:28px;}
  .card.featured .in{padding:26px 28px;}
}
@media (max-width:767px){
  body{font-size:16px;}
  header.site .in{padding:14px 16px;}
  header.site nav.desktop,header.site .cta-desktop{display:none;}
  header.site details.menu{display:block;}
  header.site .logo img{height:28px;}
  .band .in{padding:30px 16px 0;}
  .band.post .in{padding-bottom:130px;}
  .band.index .in{padding:44px 16px 36px;}
  h1{font-size:34px;line-height:1.1;}
  .band.index h1{font-size:40px;line-height:1.08;}
  .band .lede{font-size:17px;}
  .eyebrow{font-size:10px;letter-spacing:0.14em;padding:7px 12px;}
  .page{padding:0 16px 56px;}
  .hero{margin-top:-100px;margin-bottom:32px;}
  .hero img,figure img{border-radius:16px;}
  article > p:first-of-type{font-size:17.5px;}
  h2{font-size:25px;margin-top:44px;}
  .cta-box{padding:28px 22px;border-radius:24px;}
  .cta-box h2{font-size:26px;}
  .cta-box .btns .pill{width:100%;}
  .listing{padding:0 16px 64px;}
  .more .in{padding:52px 16px 56px;}
  .more h2{font-size:27px;}
  .cards{grid-template-columns:1fr;}
  .card.featured{flex-direction:column;}
  .card.featured a.img{flex:none;padding:10px 10px 0;}
  .card.featured .in{padding:20px 22px 24px;}
  .card.featured h2{font-size:24px;}
  .card.featured p{font-size:15.5px;}
  footer.site .in{padding:28px 16px;flex-direction:column;align-items:flex-start;}
  footer.site .tag .extra{display:none;}
}