:root{
  --ink:#fff8ef;
  --copy:rgba(255,248,239,.78);
  --muted:rgba(255,248,239,.54);
  --bg:#0d0710;
  --bg2:#160b13;
  --panel:#1a1017;
  --panel2:#120a10;
  --gold:#e8bd59;
  --gold2:#ffd977;
  --pink:#ff2a92;
  --pink2:#c81866;
  --blue:#56b9ff;
  --green:#54c887;
  --red:#ef6d5e;
  --line:rgba(255,255,255,.10);
  --goldLine:rgba(232,189,89,.30);
  --shadow:0 28px 80px rgba(0,0,0,.38);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% -4%, rgba(255,42,146,.13), transparent 35rem),
    radial-gradient(circle at 90% 5%, rgba(232,189,89,.08), transparent 36rem),
    linear-gradient(180deg,#0b0710 0%,#120913 55%,#0b0710 100%);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.announcement{
  background:linear-gradient(90deg,#7f1045,#c51b69,#7f1045);
  border-bottom:1px solid rgba(255,255,255,.12);
  text-align:center;
  padding:8px 16px;
  color:white;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
	position:relative;
	z-index:99999;
}

	
	
	
	
.sitebar{
  position:sticky;top:8%;
z-index:50;
  background:rgba(13,7,16,.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)
}
.sitebar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px}
.brand-mark{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(232,189,89,.55);
  display:grid;place-items:center;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold);font-weight:700
}
.brand-copy strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.05rem}
.brand-copy span{display:block;color:var(--muted);font-size:.57rem;text-transform:uppercase;letter-spacing:.12em}
.nav{display:flex;align-items:center;gap:18px}
.nav a{
  text-decoration:none;color:#cfc7cf;
  font-size:.68rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase
}
.nav a:hover{color:white}
.nav .download{
  padding:9px 12px;border-radius:8px;
  background:var(--gold);color:#1d1407
}
.mobile-toggle{
  display:none;background:transparent;color:white;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px
}

.hero{padding:92px 0 78px;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:52px;align-items:center
}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--gold);font-size:.67rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase
}
.eyebrow:before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--pink),var(--gold))}
.release-badge{
  display:inline-flex;gap:8px;align-items:center;
  margin-bottom:16px;padding:7px 10px;border-radius:999px;
  background:rgba(255,42,146,.09);
  border:1px solid rgba(255,42,146,.34);
  color:#ff9bc7;font-size:.64rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase
}
.hero h1{
  margin:14px 0 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,6.4vw,6.1rem);
  line-height:.96;letter-spacing:-.05em;font-weight:500
}
.hero h1 .gold{color:var(--gold2)}
.hero h1 .pink{color:#ff72b7}
.hero-copy{max-width:760px;color:var(--copy);font-size:1.05rem}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 16px;border-radius:9px;
  text-decoration:none;border:1px solid var(--gold);
  background:var(--gold);color:#1a1207;
  font-size:.75rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase
}
.btn.secondary{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.18)}
.hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.hero-meta span{
  padding:6px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:.65rem
}
.cover-shell{
  position:relative;padding:16px;
  border-radius:24px;background:linear-gradient(145deg,#1b1018,#0c070b);
  border:1px solid rgba(232,189,89,.26);box-shadow:var(--shadow)
}
.cover-shell:before{
  content:"";position:absolute;inset:-30px -20px;z-index:-1;
  background:radial-gradient(circle,rgba(255,42,146,.12),transparent 66%);
  filter:blur(12px)
}
.cover-shell img{border-radius:14px}
.cover-caption{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:12px 4px 2px;color:var(--muted);font-size:.66rem
}
.cover-caption strong{color:var(--gold)}

section{padding:82px 0}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);
  gap:32px;align-items:end;margin-bottom:30px
}
.section-kicker{color:var(--gold);font-size:.64rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.section-head h2{
  margin:8px 0 0;max-width:15ch;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.4rem,5vw,4.7rem);font-weight:500;line-height:1.03;letter-spacing:-.04em
}
.section-head p{margin:0;color:var(--copy)}

.problem-band{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(255,42,146,.04),rgba(232,189,89,.035))
}
.problem-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.problem-card{
  padding:24px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(145deg,var(--panel),var(--panel2))
}
.problem-card h3{margin:0 0 9px;font-family:Georgia,serif;font-weight:500;font-size:1.45rem}
.problem-card p{margin:0;color:var(--copy)}
.signal{
  margin-top:16px;padding:15px;border-left:4px solid var(--gold);
  background:rgba(232,189,89,.06);font-family:Georgia,serif;font-size:1.35rem;color:#f4dfa3
}
.goals{display:grid;gap:8px;margin-top:14px}
.goal{padding:10px 11px;border:1px solid var(--goldLine);background:rgba(255,255,255,.02);border-radius:9px;color:#d9d2dc;font-size:.8rem}

.definition-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.definition{
  min-height:195px;padding:18px;border:1px solid var(--goldLine);
  background:linear-gradient(145deg,#1c1018,#10090e)
}
.definition.intent{border-color:rgba(255,42,146,.46);background:linear-gradient(145deg,#251220,#10090e)}
.definition .num{color:var(--muted);font-family:Georgia,serif;font-size:1.5rem}
.definition small{display:block;margin-top:20px;color:var(--gold);font-size:.58rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.definition.intent small{color:var(--pink)}
.definition h3{font-family:Georgia,serif;font-weight:500;margin:7px 0}
.definition p{margin:0;color:var(--muted);font-size:.74rem}

.visual-frame{
  border:1px solid rgba(232,189,89,.22);
  background:#0d0710;border-radius:18px;padding:12px;box-shadow:var(--shadow)
}
.visual-frame img{width:100%;border-radius:12px}
.visual-caption{
  margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--muted);font-size:.66rem
}

.stage-section{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0))}
.stage-tabs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px
}
.stage-tab{
  border:1px solid var(--line);background:#151018;color:#bdb5bf;
  border-radius:10px;padding:11px 8px;font-size:.7rem;font-weight:900;text-transform:uppercase
}
.stage-tab.active{border-color:var(--gold);background:rgba(232,189,89,.09);color:var(--gold2)}
.stage-panel{
  display:grid;grid-template-columns:.75fr 1.25fr;gap:18px;
  border:1px solid var(--line);border-radius:16px;padding:20px;
  background:linear-gradient(145deg,var(--panel),var(--panel2))
}
.stage-panel h3{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:0}
.stage-panel .q{color:var(--gold);font-weight:850;margin:8px 0}
.stage-panel p{color:var(--copy)}
.stage-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meta-card{padding:13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}
.meta-card small{display:block;color:var(--muted);font-size:.57rem;text-transform:uppercase;font-weight:900;letter-spacing:.09em}
.meta-card strong{display:block;margin-top:4px;font-size:.78rem}
.agentic-lens{
  margin-top:10px;padding:13px;border-left:3px solid var(--pink);
  background:rgba(255,42,146,.05);color:#d9ccd5;font-size:.77rem
}
.agentic-lens strong{color:#ff8fc0}

.principles-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.principle{
  padding:18px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(145deg,#1a1017,#10090e)
}
.principle span{display:block;color:var(--gold);font-size:.6rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.principle h3{font-family:Georgia,serif;font-weight:500;font-size:1.35rem;margin:9px 0}
.principle p{color:var(--muted);font-size:.72rem;margin:0}

.ops-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ops{
  padding:21px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--panel),#10090e)
}
.ops .icon{
  width:42px;height:42px;border-radius:11px;border:1px solid rgba(232,189,89,.35);
  display:grid;place-items:center;color:var(--gold);font-weight:900
}
.ops h3{margin:12px 0 8px;font-family:Georgia,serif;font-weight:500}
.ops p{margin:0;color:var(--muted);font-size:.75rem}
.ops ul{padding-left:18px;color:#beb5c1;font-size:.72rem}

.agentic{
  background:
    radial-gradient(circle at 80% 20%,rgba(80,185,255,.06),transparent 28rem),
    radial-gradient(circle at 20% 30%,rgba(255,42,146,.08),transparent 28rem)
}
.agentic-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.agentic-copy{
  border:1px solid var(--line);border-radius:16px;padding:23px;background:linear-gradient(145deg,var(--panel),#10090e)
}
.agentic-copy h3{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:0 0 10px}
.agentic-copy p{color:var(--copy)}
.agentic-quote{
  margin-top:15px;padding:14px;border-left:4px solid var(--gold);
  background:rgba(232,189,89,.055);
  font-family:Georgia,serif;font-size:1.35rem;color:#ffe7a8
}

.applications{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.application{padding:16px;border:1px solid var(--line);border-radius:12px;background:#151019}
.application strong{display:block;font-family:Georgia,serif;font-size:1.1rem;font-weight:500}
.application p{margin:6px 0 0;color:var(--muted);font-size:.69rem}


.intensight-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:18px;align-items:center}
.intensight-copy{
  padding:23px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel),#10090e)
}
.intensight-copy h3{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:0 0 10px}
.intensight-copy p{color:var(--copy)}
.intensight-copy .label{color:var(--gold);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}

.action-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.action-card{
  min-height:165px;padding:15px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(145deg,var(--panel),#10090e);text-decoration:none
}
.action-card:hover{border-color:rgba(232,189,89,.4)}
.action-card small{color:var(--gold);font-size:.58rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.action-card h3{font-family:Georgia,serif;font-weight:500;margin:9px 0 6px}
.action-card p{color:var(--muted);font-size:.69rem;margin:0}

.research-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.research-card{
  padding:24px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(145deg,var(--panel),#10090e)
}
.research-card h3{font-family:Georgia,serif;font-size:1.65rem;font-weight:500;margin:0 0 8px}
.research-card p{color:var(--copy)}
.research-card ul{color:#c8beca;padding-left:18px}

.download-section{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,42,146,.06),rgba(232,189,89,.05))
}
.download-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.download-card{
  padding:24px;border:1px solid var(--goldLine);border-radius:18px;background:linear-gradient(145deg,#1d1018,#10090e)
}
.download-card h3{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:0 0 10px}
.download-card p{color:var(--copy)}
.citation-box{
  padding:17px;border:1px solid var(--line);border-radius:12px;background:#0c080d;color:#ddd3de;font-size:.78rem
}
.citation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.copy-btn{
  border:1px solid var(--gold);background:transparent;color:var(--gold);
  border-radius:8px;padding:8px 10px;font-size:.68rem;font-weight:900
}
.copy-status{color:var(--green);font-size:.68rem;align-self:center}

.closing{text-align:center;padding:100px 0}
.closing h2{
  margin:0 auto 16px;max-width:14ch;
  font-family:Georgia,serif;font-size:clamp(3rem,6vw,6rem);font-weight:500;line-height:1
}
.closing p{max-width:760px;margin:0 auto;color:var(--copy);font-size:1.05rem}
.closing .question{
  margin:30px auto 0;max-width:900px;padding:18px;
  border-top:1px solid var(--goldLine);border-bottom:1px solid var(--goldLine);
  font-family:Georgia,serif;font-size:1.55rem;color:#ffe5a5
}

footer{border-top:1px solid var(--line);padding:28px 0 40px}
.footer-grid{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;flex-wrap:wrap}
.footer-grid small{color:var(--muted)}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:#b8b0ba;text-decoration:none;font-size:.68rem}

@media(max-width:1080px){
  .hero-grid,.problem-grid,.stage-panel,.agentic-grid,.intensight-grid,.download-grid,.research-grid{grid-template-columns:1fr}
  .definition-grid{grid-template-columns:1fr 1fr}
  .principles-grid{grid-template-columns:repeat(2,1fr)}
  .applications,.action-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;padding:16px 24px;background:#110b12;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}
  .mobile-toggle{display:block}
  .section-head{grid-template-columns:1fr}
  .stage-tabs{grid-template-columns:1fr 1fr}
  .ops-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .container{padding:0 16px}
  .hero{padding-top:68px}
  .definition-grid,.principles-grid,.applications,.action-cards,.stage-meta{grid-template-columns:1fr}
  .hero h1{font-size:clamp(3rem,16vw,4.6rem)}
}


.cii-framework-resources {

  --cii-r-bg: #0b070b;
  --cii-r-panel: #161016;
  --cii-r-panel-2: #110c11;

  --cii-r-pink: #ff2b91;
  --cii-r-pink-soft: #ff78b8;

  --cii-r-gold: #e8bd59;
  --cii-r-gold-light: #ffdc7a;

  --cii-r-text: #fffaf4;
  --cii-r-copy: rgba(255,250,244,.76);
  --cii-r-muted: rgba(255,250,244,.50);

  --cii-r-line: rgba(255,255,255,.09);
  --cii-r-gold-line: rgba(232,189,89,.22);

  position: relative;

  padding:
    96px
    24px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 10% 10%,
      rgba(255,43,145,.08),
      transparent 30rem
    ),

    radial-gradient(
      circle at 90% 85%,
      rgba(232,189,89,.07),
      transparent 30rem
    ),

    linear-gradient(
      180deg,
      #090709 0%,
      #110b10 50%,
      #090709 100%
    );

  color:
    var(
      --cii-r-text
    );

}


.cii-framework-resources::before {

  content: "";

  position: absolute;

  inset:
    0
    0
    auto;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--cii-r-pink),
      var(--cii-r-gold),
      transparent
    );

  opacity: .6;

}


.cii-framework-resources__inner {

  position: relative;

  z-index: 2;

  max-width:
    1220px;

  margin:
    0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.cii-framework-resources__header {

  display: grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(300px,.75fr);

  gap:
    52px;

  align-items:
    end;

  margin-bottom:
    42px;

}


.cii-framework-resources__eyebrow {

  display: flex;

  align-items: center;

  gap:
    10px;

  margin-bottom:
    15px;

  color:
    var(--cii-r-gold);

  font-size:
    .65rem;

  font-weight:
    900;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


.cii-framework-resources__eyebrow-line {

  width:
    38px;

  height:
    1px;

  background:

    linear-gradient(
      90deg,
      var(--cii-r-pink),
      var(--cii-r-gold)
    );

}


.cii-framework-resources h2 {

  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.5rem
    );

  font-weight:
    500;

  line-height:
    .98;

  letter-spacing:
    -.05em;

}


.cii-framework-resources h2 span {

  color:
    var(
      --cii-r-pink-soft
    );

}


.cii-framework-resources h2 em {

  color:
    var(
      --cii-r-gold-light
    );

  font-style:
    normal;

}


.cii-framework-resources__intro p {

  margin:
    0
    0
    10px;

  color:
    var(
      --cii-r-copy
    );

  line-height:
    1.8;

}


.cii-framework-resources__intro p:first-child {

  color:
    #fff;

  font-weight:
    800;

  font-size:
    1.08rem;

}


/* =========================================================
   FEATURED FRAMEWORK
========================================================= */

.cii-framework-resources__featured {

  display: grid;

  grid-template-columns:
    minmax(280px,.72fr)
    minmax(0,1.28fr);

  gap:
    46px;

  align-items:
    center;

  padding:
    30px;

  background:

    radial-gradient(
      circle at 10% 10%,
      rgba(255,43,145,.08),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #1a1017,
      #0e090e
    );

  border:
    1px solid
    var(--cii-r-gold-line);

  border-radius:
    22px;

  box-shadow:

    0
    30px
    80px
    rgba(
      0,
      0,
      0,
      .32
    );

}


.cii-framework-resources__featured-visual {

  display:
    flex;

  justify-content:
    center;

}


.cii-framework-resources__cover-wrap {

  position:
    relative;

  width:
    min(
      100%,
      390px
    );

  padding:
    12px;

  border:
    1px solid
    rgba(
      232,
      189,
      89,
      .30
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      .03
    );

  box-shadow:

    0
    26px
    60px
    rgba(
      0,
      0,
      0,
      .45
    ),

    0
    0
    60px
    rgba(
      255,
      43,
      145,
      .08
    );

}


.cii-framework-resources__cover-wrap img {

  display:
    block;

  width:
    100%;

  border-radius:
    11px;

}


.cii-framework-resources__release-label {

  position:
    absolute;

  top:
    -13px;

  left:
    22px;

  padding:
    6px
    10px;

  background:

    linear-gradient(
      135deg,
      var(--cii-r-gold-light),
      var(--cii-r-gold)
    );

  color:
    #211505;

  border-radius:
    999px;

  font-size:
    .61rem;

  font-weight:
    900;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.cii-framework-resources__resource-number {

  color:
    var(
      --cii-r-pink-soft
    );

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.cii-framework-resources__featured h3 {

  max-width:
    720px;

  margin:
    9px
    0
    13px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.7rem
    );

  font-weight:
    500;

  line-height:
    1.03;

  letter-spacing:
    -.04em;

}


.cii-framework-resources__featured h3 span {

  font-size:
    .45em;

  vertical-align:
    top;

}


.cii-framework-resources__featured-lead {

  max-width:
    700px;

  color:
    #fff !important;

  font-size:
    1.05rem;

  font-weight:
    750;

}


.cii-framework-resources__featured-content > p {

  max-width:
    730px;

  color:
    var(
      --cii-r-copy
    );

  line-height:
    1.75;

}


.cii-framework-resources__tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin:
    20px
    0;

}


.cii-framework-resources__tags span {

  padding:
    6px
    9px;

  border:
    1px solid
    rgba(
      232,
      189,
      89,
      .18
    );

  border-radius:
    999px;

  background:
    rgba(
      232,
      189,
      89,
      .035
    );

  color:
    var(
      --cii-r-muted
    );

  font-size:
    .59rem;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;

}


.cii-framework-resources__featured-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}


/* =========================================================
   BUTTONS
========================================================= */

.cii-framework-resources__button {

  min-height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    0
    16px;

  border-radius:
    8px;

  text-decoration:
    none;

  font-size:
    .68rem;

  font-weight:
    900;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;

  transition:

    transform
    180ms ease,

    border-color
    180ms ease;

}


.cii-framework-resources__button:hover {

  transform:
    translateY(-2px);

}


.cii-framework-resources__button--primary {

  color:
    #211505;

  background:

    linear-gradient(
      135deg,
      var(--cii-r-gold-light),
      var(--cii-r-gold)
    );

  border:
    1px solid
    var(--cii-r-gold);

}


.cii-framework-resources__button--secondary {

  color:
    var(
      --cii-r-text
    );

  background:
    rgba(
      255,
      255,
      255,
      .025
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .16
    );

}


/* =========================================================
   RESOURCE CARDS
========================================================= */

.cii-framework-resources__grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  margin-top:
    18px;

}


.cii-framework-resources__card {

  display:
    flex;

  flex-direction:
    column;

  min-height:
    390px;

  padding:
    22px;

  border:

    1px solid
    var(
      --cii-r-line
    );

  border-radius:
    16px;

  background:

    linear-gradient(
      145deg,
      var(
        --cii-r-panel
      ),
      var(
        --cii-r-panel-2
      )
    );

}


.cii-framework-resources__card--citation {

  border-color:
    rgba(
      255,
      43,
      145,
      .26
    );

}


.cii-framework-resources__card-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.cii-framework-resources__card-number {

  color:
    rgba(
      255,
      255,
      255,
      .28
    );

  font-family:
    Georgia,
    serif;

  font-size:
    1.45rem;

}


.cii-framework-resources__icon {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  color:
    var(
      --cii-r-gold-light
    );

  border:

    1px solid
    rgba(
      232,
      189,
      89,
      .28
    );

  border-radius:
    10px;

  background:
    rgba(
      232,
      189,
      89,
      .045
    );

  font-weight:
    900;

}


.cii-framework-resources__card-label {

  margin-top:
    16px;

  color:
    var(
      --cii-r-pink-soft
    );

  font-size:
    .60rem;

  font-weight:
    900;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

}


.cii-framework-resources__card h3 {

  margin:
    7px
    0
    9px;

  font-family:
    Georgia,
    serif;

  font-size:
    1.45rem;

  font-weight:
    500;

}


.cii-framework-resources__card > p {

  color:
    var(
      --cii-r-muted
    );

  font-size:
    .76rem;

  line-height:
    1.7;

}


.cii-framework-resources__mini-list {

  display:
    grid;

  gap:
    6px;

  margin:
    12px
    0;

}


.cii-framework-resources__mini-list span {

  padding:
    6px
    8px;

  border-left:
    2px solid
    var(
      --cii-r-gold
    );

  background:
    rgba(
      255,
      255,
      255,
      .018
    );

  color:
    #c8bec8;

  font-size:
    .66rem;

}


.cii-framework-resources__card-link {

  margin-top:
    auto;

  padding-top:
    16px;

  color:
    var(
      --cii-r-gold-light
    );

  border-top:
    1px solid
    var(
      --cii-r-line
    );

  text-decoration:
    none;

  font-size:
    .67rem;

  font-weight:
    900;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

}


/* =========================================================
   CITATION
========================================================= */

.cii-framework-resources__citation-box {

  margin-top:
    9px;

  padding:
    12px;

  border:

    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

  border-radius:
    9px;

  background:
    #090709;

  color:
    #cfc4cf;

  font-size:
    .66rem;

  line-height:
    1.6;

}


.cii-framework-resources__citation-actions {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    11px;

}


.cii-framework-resources__copy-button {

  padding:
    8px
    10px;

  border:

    1px solid
    var(
      --cii-r-gold
    );

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --cii-r-gold-light
    );

  cursor:
    pointer;

  font-size:
    .62rem;

  font-weight:
    900;

  text-transform:
    uppercase;

}


.cii-framework-resources__text-link {

  color:
    var(
      --cii-r-muted
    );

  font-size:
    .62rem;

}


.cii-framework-resources__copy-status {

  min-height:
    18px;

  margin-top:
    7px;

  color:
    #73d7a2;

  font-size:
    .61rem;

}


/* =========================================================
   STAGE FLOW
========================================================= */

.cii-framework-resources__stage-flow {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin:
    14px
    0;

  padding:
    10px;

  border:

    1px solid
    var(
      --cii-r-line
    );

  border-radius:
    9px;

  background:
    rgba(
      255,
      255,
      255,
      .018
    );

}


.cii-framework-resources__stage-flow span {

  color:
    #e8dfe8;

  font-size:
    .60rem;

  font-weight:
    850;

  text-transform:
    uppercase;

}


.cii-framework-resources__stage-flow b {

  color:
    var(
      --cii-r-pink
    );

}


/* =========================================================
   FOOTER
========================================================= */

.cii-framework-resources__footer {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    30px;

  margin-top:
    20px;

  padding:
    22px
    24px;

  border:

    1px solid
    var(
      --cii-r-gold-line
    );

  border-radius:
    14px;

  background:

    linear-gradient(
      90deg,
      rgba(
        255,
        43,
        145,
        .04
      ),
      rgba(
        232,
        189,
        89,
        .04
      )
    );

}


.cii-framework-resources__footer-label {

  color:
    var(
      --cii-r-gold
    );

  font-size:
    .59rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.cii-framework-resources__footer p {

  max-width:
    620px;

  margin:
    6px
    0
    0;

  color:
    var(
      --cii-r-copy
    );

  font-family:
    Georgia,
    serif;

  font-size:
    1.03rem;

}


.cii-framework-resources__signature {

  flex-shrink:
    0;

  color:
    var(
      --cii-r-muted
    );

  font-size:
    .70rem;

  font-weight:
    850;

}


.cii-framework-resources__signature span {

  color:
    var(
      --cii-r-gold-light
    );

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 980px) {

  .cii-framework-resources__header,

  .cii-framework-resources__featured {

    grid-template-columns:
      1fr;

  }


  .cii-framework-resources__grid {

    grid-template-columns:
      1fr
      1fr;

  }


  .cii-framework-resources__footer {

    align-items:
      flex-start;

    flex-direction:
      column;

  }

}


@media
(max-width: 680px) {

  .cii-framework-resources {

    padding:
      68px
      16px;

  }


  .cii-framework-resources__featured {

    padding:
      20px;

  }


  .cii-framework-resources__grid {

    grid-template-columns:
      1fr;

  }


  .cii-framework-resources__card {

    min-height:
      auto;

  }


  .cii-framework-resources__featured-actions {

    flex-direction:
      column;

  }


  .cii-framework-resources__button {

    width:
      100%;

  }

}