/* Organic landing and article visual system */
:root{
  --op-navy:#162235;
  --op-navy-2:#243149;
  --op-ink:#17191b;
  --op-muted:#5d5f5b;
  --op-paper:#f7f6f2;
  --op-card:#fffdf8;
  --op-line:#ded9ce;
  --op-gold:#e8a020;
  --op-gold-2:#f3b640;
  --op-teal:#168463;
  --op-teal-soft:#e6f4ee;
}

body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,246,242,.98) 520px),
    radial-gradient(circle at 18% 8%, rgba(232,160,32,.12), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(22,132,99,.1), transparent 30%),
    var(--op-paper);
}

.top .cta,.cta,.button{
  align-items:center;
  gap:9px;
  border:1px solid rgba(22,34,53,.12);
  box-shadow:0 8px 18px rgba(232,160,32,.22), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.top .cta:hover,.cta:hover,.button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(232,160,32,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.icon{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon.fill{fill:currentColor;stroke:none}

.hero{position:relative;overflow:hidden}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -80px -160px auto;
  width:360px;height:360px;
  border:1px solid rgba(22,34,53,.08);
  transform:rotate(18deg);
  pointer-events:none;
}
.hero-grid{align-items:stretch}
.visual-panel{
  background:linear-gradient(145deg,var(--op-navy),#101827);
  color:#fff;
  border-radius:8px;
  padding:24px;
  box-shadow:0 24px 60px rgba(22,34,53,.2);
  position:relative;
  overflow:hidden;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.visual-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.08));
  pointer-events:none;
}
.visual-panel > *{position:relative}
.visual-kicker{font:800 11px system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--op-gold);margin-bottom:10px}
.visual-panel h2{color:#fff;font-size:28px;line-height:1.08;margin:0 0 12px}
.visual-panel p,.visual-panel li{color:rgba(255,255,255,.72)}
.visual-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.visual-list li{display:flex;gap:10px;align-items:flex-start;font:600 14px/1.45 system-ui,sans-serif}
.visual-list .icon{color:var(--op-gold);margin-top:1px}
.mini-report{
  background:rgba(255,255,255,.96);
  color:var(--op-ink);
  border-radius:8px;
  padding:18px;
  border:1px solid rgba(255,255,255,.25);
  margin-top:22px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.mini-report .label{color:var(--op-muted)}
.mini-report strong{display:block;font:800 28px/1.1 Georgia,serif;color:var(--op-navy);margin:6px 0}
.mini-bars{display:grid;gap:8px;margin-top:14px}
.mini-bar{height:9px;background:#ece8de;border-radius:999px;overflow:hidden}
.mini-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--op-teal),var(--op-gold));border-radius:999px}

.proof,.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.proof div,.metric{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--op-line);
  background:rgba(255,255,255,.72);
  border-radius:8px;
  padding:15px;
  font:700 13px/1.35 system-ui,sans-serif;
}
.proof .icon,.metric .icon{color:var(--op-teal)}

.card,.block,.aside,.compare div,.decision div,.estimate-card{
  border-radius:8px!important;
  box-shadow:0 10px 28px rgba(22,34,53,.06);
}
.card{position:relative;overflow:hidden}
.card::before{
  content:"";
  display:block;
  width:38px;height:38px;
  background:var(--op-teal-soft);
  border-radius:8px;
  margin-bottom:16px;
}
.card:nth-child(1)::before{background:linear-gradient(135deg,var(--op-teal-soft),#fff4dc)}
.card:nth-child(2)::before{background:linear-gradient(135deg,#fff4dc,#fff)}
.card:nth-child(3)::before{background:linear-gradient(135deg,#edf0f7,var(--op-teal-soft))}

.testimonial-band{
  background:#fff;
  border-top:1px solid var(--op-line);
  border-bottom:1px solid var(--op-line);
  padding:46px 0;
}
.testimonial-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}
.quote-card{
  background:var(--op-card);
  border:1px solid var(--op-line);
  border-radius:8px;
  padding:26px;
  box-shadow:0 12px 34px rgba(22,34,53,.07);
}
.quote-card blockquote{
  font:700 clamp(22px,3vw,32px)/1.2 Georgia,serif;
  color:var(--op-navy);
  margin:0 0 18px;
}
.quote-card cite{font:700 13px system-ui,sans-serif;color:var(--op-muted);font-style:normal}
.signal-list{display:grid;gap:12px}
.signal{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--op-navy);
  color:#fff;
  border-radius:8px;
  padding:18px;
}
.signal .icon{color:var(--op-gold);margin-top:2px}
.signal strong{display:block;margin-bottom:3px}
.signal span{color:rgba(255,255,255,.68);font-size:14px}

.article-hero{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:34px;
  align-items:center;
}
.article-visual{
  background:linear-gradient(145deg,#fff,#f5f1e7);
  border:1px solid var(--op-line);
  border-radius:8px;
  padding:24px;
  box-shadow:0 22px 55px rgba(22,34,53,.12);
}
.article-visual svg{width:100%;height:auto;display:block}
.article-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:34px;
  align-items:start;
}
.article-main{
  background:#fff;
  border:1px solid var(--op-line);
  border-radius:8px;
  padding:34px;
  box-shadow:0 14px 40px rgba(22,34,53,.06);
}
.article-main h2:first-child{margin-top:0}
.article-main .cta-panel{
  color:#fff;
}
.article-main .cta-panel h2,
.article-main .cta-panel p{
  color:#fff;
}
.article-main .cta-panel p{
  opacity:.72;
}
.reading-panel{
  position:sticky;
  top:18px;
  background:var(--op-navy);
  color:#fff;
  border-radius:8px;
  padding:22px;
}
.reading-panel h3{font:800 19px/1.2 Georgia,serif;margin:0 0 10px;color:#fff}
.reading-panel p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:16px}
.reading-panel .button{width:100%;justify-content:center;margin-top:20px}
.key-points{display:grid;gap:10px;margin:18px 0 22px;padding:0;list-style:none}
.key-points li{display:flex;gap:9px;font:600 13px/1.45 system-ui,sans-serif;color:rgba(255,255,255,.76)}
.key-points .icon{color:var(--op-gold);width:16px;height:16px;margin-top:1px}

@media(max-width:820px){
  .article-hero,.testimonial-grid,.article-shell{grid-template-columns:1fr}
  .visual-panel{min-height:auto}
  .proof,.metric-strip{grid-template-columns:1fr}
  .reading-panel{position:static}
  .article-main{padding:24px}
}