/* page-three.css — Mapas (rc3-namespace) */

.rc3-body{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(185,255,62,.08), transparent 60%),
    radial-gradient(900px 560px at 90% 40%, rgba(74,31,77,.18), transparent 62%),
    radial-gradient(900px 560px at 40% 90%, rgba(241,230,207,.08), transparent 62%),
    rgba(7,8,11,1);
}

/* ensure content not under fixed header */
.rc3-main{ padding-top: 88px; }

.rc3-section{ padding: 34px 0; }
.rc3-h1{
  margin: 10px 0 0;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: rgba(241,230,207,.95);
}
.rc3-h1Accent{
  color: rgba(185,255,62,.92);
  text-shadow: 0 0 22px rgba(185,255,62,.12);
}
.rc3-lead{
  margin: 14px 0 0;
  color: rgba(229,233,255,.74);
  line-height: 1.8;
  max-width: 70ch;
}
.rc3-h2{
  margin: 10px 0 0;
  font-size: clamp(22px, 3.1vw, 40px);
  line-height: 1.12;
  color: rgba(241,230,207,.93);
}
.rc3-leadSmall{
  margin: 12px 0 0;
  color: rgba(229,233,255,.72);
  line-height: 1.75;
  max-width: 82ch;
}
.rc3-sHead{ padding-bottom: 10px; }

/* pills */
.rc3-heroLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.rc3-pill{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  border:1px solid rgba(185,255,62,.32);
  background: rgba(185,255,62,.10);
  color: rgba(241,230,207,.92);
  text-decoration:none;
  padding: 10px 14px;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(185,255,62,.55);
  background: rgba(185,255,62,.14);
}
.rc3-pill--ghost{
  border-color: rgba(237,241,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(229,233,255,.78);
}
.rc3-pill--ghost:hover{
  border-color: rgba(241,230,207,.26);
  background: rgba(241,230,207,.06);
}

/* HERO layout */
.rc3-heroInner{
  display:grid;
  gap: 18px;
}
.rc3-heroStage{
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background:
    repeating-linear-gradient(180deg,
      rgba(237,241,255,.05) 0px,
      rgba(237,241,255,.05) 1px,
      rgba(237,241,255,0) 34px,
      rgba(237,241,255,0) 44px
    ),
    rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
  min-height: 520px;
}
.rc3-heroStage::after{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(circle at 22% 18%, rgba(185,255,62,.12), transparent 55%),
    radial-gradient(circle at 88% 35%, rgba(74,31,77,.20), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

/* spinning wheel */
.rc3-wheel{
  width: min(460px, 92%);
  aspect-ratio: 1 / 1;
  margin: 8px auto 0;
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.14);
  background:
    radial-gradient(circle at 50% 50%, rgba(7,8,11,.82), rgba(7,8,11,.22) 60%, rgba(7,8,11,0) 72%),
    conic-gradient(
      rgba(185,255,62,.26),
      rgba(241,230,207,.10),
      rgba(74,31,77,.18),
      rgba(185,255,62,.26)
    );
  box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  animation: rc3WheelSpin 22s linear infinite;
}
@keyframes rc3WheelSpin{ to{ transform: rotate(360deg); } }

.rc3-wheelCore{
  position:absolute;
  inset: 18%;
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.34);
  display:grid;
  place-items:center;
  text-align:center;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.rc3-wheelK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(241,230,207,.84);
}
.rc3-wheelT{
  margin: 8px 0 0;
  color: rgba(229,233,255,.72);
}

/* postcards pinned around */
.rc3-postal{
  margin:0;
  width: min(350px, 64%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-postal:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-postal img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-postalCap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-postalK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-postalT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-postal--a{ left:14px; top:14px; transform: rotate(-1.1deg); }
.rc3-postal--b{ right:14px; top:64px; transform: rotate(1.1deg); }
.rc3-postal--c{ left:18px; bottom:14px; transform: rotate(1.0deg); }

/* SECTION 2: triangle */
.rc3-tri{
  margin-top: 14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
  min-height: 640px;
}
.rc3-triLines{
  position:absolute;
  inset: 10px;
  border-radius: 28px;
  background:
    repeating-linear-gradient(90deg,
      rgba(237,241,255,.06) 0px,
      rgba(237,241,255,.06) 1px,
      rgba(237,241,255,0) 22px,
      rgba(237,241,255,0) 28px
    );
  opacity:.25;
  pointer-events:none;
}

.rc3-triNode{
  margin:0;
  width: min(350px, 66%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  z-index:1;
}
.rc3-triNode:hover{
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
  transform: translateY(-3px) rotate(0deg);
}
.rc3-triNode img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-triCap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-triK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-triT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-triNode--top{ left:50%; top:14px; transform: translateX(-50%) rotate(.35deg); }
.rc3-triNode--left{ left:14px; bottom:86px; transform: rotate(-.6deg); }
.rc3-triNode--right{ right:14px; bottom:86px; transform: rotate(.6deg); }

.rc3-triLegend{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  border-radius: 26px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  z-index:2;
}
.rc3-triLegendK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-triLegendT{ margin:8px 0 0; color: rgba(229,233,255,.72); line-height:1.65; }

/* SECTION 3: threads */
.rc3-s3Grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:stretch;
}

.rc3-s3Text{
  border-radius: 30px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
}
.rc3-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.rc3-step{
  border-radius: 22px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px;
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:12px;
  align-items:start;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-step:hover{
  transform: translateY(-2px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.06);
}
.rc3-stepK{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(7,8,11,.55);
  border:1px solid rgba(237,241,255,.12);
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  color: rgba(185,255,62,.88);
}
.rc3-stepT{ color: rgba(229,233,255,.72); line-height:1.75; }

.rc3-s3Callout{
  margin-top:12px;
  border-radius: 26px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
}
.rc3-s3CallK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s3CallT{ margin:8px 0 0; color: rgba(229,233,255,.72); line-height:1.7; }

.rc3-s3Panel{
  margin:0;
  border-radius: 30px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s3Panel:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s3Panel img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s3Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s3CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s3CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

/* reveal */
[data-rc-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-rc-reveal].is-in{
  opacity: 1;
  transform: translateY(0);
}

/* responsive */
@media (max-width: 1020px){
  .rc3-heroStage{ min-height: 760px; }
  .rc3-postal{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width: 100%; transform:none; margin-top:12px; }
  .rc3-wheel{ margin-top: 0; }

  .rc3-tri{ min-height: auto; display:grid; gap:12px; }
  .rc3-triNode{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width: 100%; transform:none; }
  .rc3-triLegend{ position:relative; left:auto; right:auto; bottom:auto; }

  .rc3-s3Grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .rc3-main{ padding-top: 84px; }
}
/* =========================
   SECTION 4: Windows + tape
   ========================= */
.rc3-s4Grid{
  margin-top: 14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: .95fr 1.1fr .95fr;
  gap:14px;
  align-items:stretch;
  min-height: 420px;
}
.rc3-s4Tape{
  position:absolute;
  inset: 10px;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(185,255,62,.10), rgba(237,241,255,0) 45%, rgba(241,230,207,.08)),
    repeating-linear-gradient(
      180deg,
      rgba(237,241,255,.05) 0px,
      rgba(237,241,255,.05) 1px,
      rgba(237,241,255,0) 34px,
      rgba(237,241,255,0) 44px
    );
  opacity:.26;
  pointer-events:none;
}

.rc3-s4Win{
  margin:0;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.36);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  position:relative;
  z-index:1;
}
.rc3-s4Win:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s4Win img{
  width:100%;
  max-width:350px;
  margin:0 auto;
  clip-path: polygon(4% 8%, 92% 3%, 97% 72%, 8% 96%);
}
.rc3-s4Win--a{ transform: rotate(-.6deg); }
.rc3-s4Win--b{ transform: rotate(.6deg); }
.rc3-s4Win--a:hover{ transform: translateY(-3px) rotate(-.25deg); }
.rc3-s4Win--b:hover{ transform: translateY(-3px) rotate(.25deg); }

.rc3-s4Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s4CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s4CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s4Notes{
  display:grid;
  gap:10px;
  align-content:start;
  position:relative;
  z-index:1;
}
.rc3-s4Note{
  border-radius: 22px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding:12px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s4Note:hover{
  transform: translateY(-2px);
  border-color: rgba(241,230,207,.24);
  background: rgba(241,230,207,.06);
}
.rc3-s4NoteK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s4NoteT{ margin:8px 0 0; color: rgba(229,233,255,.72); line-height:1.65; }

/* =========================
   SECTION 5: Rose dial
   ========================= */
.rc3-s5Grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: .95fr 1.1fr .95fr;
  gap:14px;
  align-items:stretch;
}

.rc3-s5Card{
  margin:0;
  border-radius: 30px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s5Card:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s5Card img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s5Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s5CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s5CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s5RoseDial{
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
}
.rc3-s5Dial{
  width: min(360px, 92%);
  aspect-ratio: 1/1;
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.14);
  background:
    radial-gradient(circle at 50% 50%, rgba(7,8,11,.82), rgba(7,8,11,.18) 62%, rgba(7,8,11,0) 72%),
    conic-gradient(
      rgba(74,31,77,.18),
      rgba(241,230,207,.10),
      rgba(185,255,62,.22),
      rgba(74,31,77,.18)
    );
  box-shadow: 0 26px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
  animation: rc3RoseSpin 26s linear infinite;
}
@keyframes rc3RoseSpin{ to{ transform: rotate(360deg); } }

.rc3-s5Ticks{
  list-style:none;
  margin: 12px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  color: rgba(229,233,255,.70);
  font-family: var(--rc-font-mono);
  font-size: 11px;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.rc3-s5Ticks li{
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s5Ticks li:hover{
  transform: translateY(-2px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.06);
}
.rc3-s5Hint{
  margin: 12px 0 0;
  color: rgba(229,233,255,.72);
  line-height:1.7;
  max-width: 46ch;
}

/* =========================
   SECTION 6: Filmstrip
   ========================= */
.rc3-s6Grid{
  margin-top: 14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: .95fr 1.1fr .95fr;
  gap:14px;
  align-items:stretch;
  min-height: 420px;
}

.rc3-s6Strip{
  position:absolute;
  left:50%;
  top:10px;
  bottom:10px;
  width: min(220px, 40%);
  transform: translateX(-50%);
  border-radius: 26px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(237,241,255,.10) 0px,
      rgba(237,241,255,.10) 2px,
      rgba(237,241,255,0) 24px,
      rgba(237,241,255,0) 40px
    ),
    linear-gradient(180deg, rgba(185,255,62,.10), rgba(74,31,77,.10));
  opacity:.22;
  pointer-events:none;
}

.rc3-s6Frame{
  margin:0;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.36);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  position:relative;
  z-index:1;
}
.rc3-s6Frame:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s6Frame img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s6Frame--a{ transform: rotate(-.4deg); }
.rc3-s6Frame--b{ transform: rotate(.4deg); }
.rc3-s6Frame--a:hover{ transform: translateY(-3px) rotate(-.18deg); }
.rc3-s6Frame--b:hover{ transform: translateY(-3px) rotate(.18deg); }

.rc3-s6Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s6CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s6CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s6Side{
  display:grid;
  gap:10px;
  align-content:start;
  position:relative;
  z-index:1;
}
.rc3-s6Chip{
  border-radius: 22px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding:12px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s6Chip:hover{
  transform: translateY(-2px);
  border-color: rgba(241,230,207,.24);
  background: rgba(241,230,207,.06);
}
.rc3-s6ChipK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s6ChipT{ margin:8px 0 0; color: rgba(229,233,255,.72); line-height:1.65; }

/* Responsive */
@media (max-width: 1020px){
  .rc3-s4Grid{ grid-template-columns: 1fr; min-height:auto; }
  .rc3-s5Grid{ grid-template-columns: 1fr; }
  .rc3-s6Grid{ grid-template-columns: 1fr; min-height:auto; }
  .rc3-s6Strip{ display:none; }
}
/* =========================
   SECTION 7: Fold board
   ========================= */
.rc3-s7Board{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 520px;
}
.rc3-s7Folds{
  position:absolute;
  inset:10px;
  border-radius: 28px;
  background:
    repeating-linear-gradient(90deg,
      rgba(237,241,255,.08) 0px,
      rgba(237,241,255,.08) 1px,
      rgba(237,241,255,0) 34px,
      rgba(237,241,255,0) 44px
    ),
    repeating-linear-gradient(180deg,
      rgba(237,241,255,.05) 0px,
      rgba(237,241,255,.05) 1px,
      rgba(237,241,255,0) 28px,
      rgba(237,241,255,0) 40px
    );
  opacity:.22;
  pointer-events:none;
}
.rc3-s7Main,
.rc3-s7Patch{
  margin:0;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  z-index:1;
}
.rc3-s7Main{
  left: 50%;
  top: 22px;
  transform: translateX(-50%) rotate(.35deg);
  width: min(350px, 72%);
}
.rc3-s7Patch{
  right: 18px;
  bottom: 18px;
  transform: rotate(-.6deg);
  width: min(320px, 62%);
}
.rc3-s7Main:hover,
.rc3-s7Patch:hover{
  transform: translateX(-50%) translateY(-3px) rotate(.18deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s7Patch:hover{
  transform: translateY(-3px) rotate(-.25deg);
}
.rc3-s7Main img,
.rc3-s7Patch img{
  width:100%;
  max-width:350px;
  margin:0 auto;
}
.rc3-s7Main img{
  clip-path: polygon(2% 8%, 98% 2%, 96% 92%, 8% 98%);
}
.rc3-s7Patch img{
  clip-path: polygon(4% 6%, 96% 10%, 92% 96%, 6% 92%);
}
.rc3-s7Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s7CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s7CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s7Micro{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left: 18px;
  bottom: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  z-index:2;
}
.rc3-s7Micro li{
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(229,233,255,.72);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s7Micro li:hover{
  transform: translateY(-2px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.06);
}

/* =========================
   SECTION 8: Stamps diagonal
   ========================= */
.rc3-s8Diagonal{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr .9fr 1fr;
  gap:14px;
  align-items:stretch;
}
.rc3-s8Slash{
  position:absolute;
  inset:-80px;
  background: linear-gradient(135deg, rgba(185,255,62,.10), rgba(74,31,77,.16), rgba(241,230,207,.08));
  opacity:.18;
  pointer-events:none;
  transform: rotate(-8deg);
}
.rc3-s8Stamp{
  margin:0;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:relative;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  z-index:1;
}
.rc3-s8Stamp--a{ transform: rotate(-.45deg); }
.rc3-s8Stamp--b{ transform: rotate(.45deg); }
.rc3-s8Stamp:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s8Perforation{
  position:absolute;
  inset:10px;
  border-radius: 20px;
  background:
    radial-gradient(circle, rgba(241,230,207,.22) 1.5px, rgba(241,230,207,0) 2px) 0 0 / 14px 14px;
  opacity:.25;
  pointer-events:none;
}
.rc3-s8Stamp img{ width:100%; max-width:350px; margin:0 auto; }

.rc3-s8Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s8CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s8CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s8Text{
  border-radius: 30px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px;
  align-content:start;
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
}
.rc3-s8P{ margin:0; color: rgba(229,233,255,.72); line-height:1.7; }
.rc3-s8Tags{ display:flex; flex-wrap:wrap; gap:10px; }
.rc3-s8Tag{
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  padding: 10px 12px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.84);
}

/* =========================
   SECTION 9: Tide rail
   ========================= */
.rc3-s9RailWrap{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
}
.rc3-s9Wave{
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 20% 35%, rgba(185,255,62,.12), transparent 58%),
    radial-gradient(circle at 85% 55%, rgba(74,31,77,.18), transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(237,241,255,.06) 0px,
      rgba(237,241,255,.06) 1px,
      rgba(237,241,255,0) 26px,
      rgba(237,241,255,0) 36px
    );
  opacity:.22;
  pointer-events:none;
}

.rc3-s9Rail{
  display:flex;
  gap:12px;
  align-items:stretch;
  overflow:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  position:relative;
  z-index:1;
}
.rc3-s9Rail::-webkit-scrollbar{ height:10px; }
.rc3-s9Rail::-webkit-scrollbar-thumb{
  background: rgba(237,241,255,.14);
  border-radius: 99px;
}

.rc3-s9Token{
  margin:0;
  scroll-snap-align: start;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.36);
  min-width: 320px;
  max-width: 360px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s9Token:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s9Token img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s9Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s9CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s9CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s9Stops{
  scroll-snap-align: start;
  min-width: 420px;
  border-radius: 30px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  display:grid;
  gap:10px;
}
.rc3-s9Stop{
  border-radius: 22px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.rc3-s9StopK{
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s9StopT{
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(229,233,255,.78);
}

.rc3-s9Hint{
  margin: 10px 0 0;
  color: rgba(229,233,255,.62);
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
}

/* Responsive */
@media (max-width: 1020px){
  .rc3-s8Diagonal{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .rc3-s7Main,
  .rc3-s7Patch{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    transform:none;
    width:100%;
    margin-bottom: 12px;
  }
  .rc3-s7Board{ min-height:auto; display:grid; gap:12px; }
  .rc3-s7Micro{ position:relative; left:auto; bottom:auto; }

  .rc3-s9Stops{ min-width: 280px; }
  .rc3-s9Token{ min-width: 280px; }
}
/* =========================
   SECTION 10: Wings
   ========================= */
.rc3-s10Grid{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: .95fr 1.1fr .95fr;
  gap:14px;
  align-items:stretch;
}
.rc3-s10Wing{
  margin:0;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s10Wing:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s10Wing img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s10Wing--left{ transform: rotate(-.45deg); }
.rc3-s10Wing--right{ transform: rotate(.45deg); }
.rc3-s10Wing--left:hover{ transform: translateY(-3px) rotate(-.2deg); }
.rc3-s10Wing--right:hover{ transform: translateY(-3px) rotate(.2deg); }

.rc3-s10Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s10CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s10CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s10Core{
  border-radius: 30px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  display:grid;
  gap:12px;
  align-content:start;
  position:relative;
  overflow:hidden;
}
.rc3-s10Badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.rc3-s10Badge{
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  padding: 10px 12px;
  text-align:center;
  min-width: 120px;
}
.rc3-s10BadgeK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s10BadgeT{
  display:block;
  margin-top:6px;
  color: rgba(229,233,255,.78);
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.rc3-s10P{
  margin:0;
  color: rgba(229,233,255,.72);
  line-height:1.7;
  text-align:center;
}
.rc3-s10Pulse{
  display:flex;
  justify-content:center;
  gap:8px;
}
.rc3-s10Pulse span{
  width:10px;
  height:10px;
  border-radius: 99px;
  background: rgba(185,255,62,.78);
  box-shadow: 0 0 0 8px rgba(185,255,62,.10);
  transform: scale(.86);
  animation: rc3PulseDot 1.5s ease-in-out infinite;
}
.rc3-s10Pulse span:nth-child(2){ animation-delay:.12s; }
.rc3-s10Pulse span:nth-child(3){ animation-delay:.24s; }
.rc3-s10Pulse span:nth-child(4){ animation-delay:.36s; }
@keyframes rc3PulseDot{
  50%{ transform: scale(1.08); box-shadow: 0 0 0 12px rgba(185,255,62,.08); }
}

/* =========================
   SECTION 11: Magnetic board
   ========================= */
.rc3-s11Board{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 460px;
}
.rc3-s11Stripe{
  position:absolute;
  inset:10px;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(74,31,77,.18), rgba(237,241,255,0) 45%, rgba(185,255,62,.10)),
    repeating-linear-gradient(180deg,
      rgba(237,241,255,.05) 0px,
      rgba(237,241,255,.05) 1px,
      rgba(237,241,255,0) 34px,
      rgba(237,241,255,0) 44px
    );
  opacity:.22;
  pointer-events:none;
}
.rc3-s11Magnet{
  margin:0;
  width: min(350px, 62%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  position:absolute;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  z-index:1;
}
.rc3-s11Magnet:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s11Magnet img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s11Magnet--a{ left:14px; top:14px; transform: rotate(-.6deg); }
.rc3-s11Magnet--b{ right:14px; bottom:64px; transform: rotate(.6deg); }

.rc3-s11Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s11CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s11CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s11Tags{
  position:absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  z-index:2;
  width: min(520px, 92%);
}
.rc3-s11Tag{
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(229,233,255,.72);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s11Tag:hover{
  transform: translateY(-2px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.06);
}
.rc3-s11Note{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  margin:0;
  border-radius: 26px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  color: rgba(229,233,255,.72);
  line-height:1.65;
  z-index:2;
}

/* =========================
   SECTION 12: Glass atlas mosaic
   ========================= */
.rc3-s12Mosaic{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:stretch;
}
.rc3-s12GlassFx{
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 22% 18%, rgba(185,255,62,.12), transparent 55%),
    radial-gradient(circle at 88% 55%, rgba(74,31,77,.18), transparent 60%),
    linear-gradient(135deg, rgba(241,230,207,.06), rgba(237,241,255,0) 55%);
  opacity:.22;
  pointer-events:none;
}
.rc3-s12Tile{
  margin:0;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  position:relative;
  z-index:1;
}
.rc3-s12Tile:hover{
  transform: translateY(-3px);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s12Tile img{ width:100%; max-width:350px; margin:0 auto; }

.rc3-s12Tile--big{
  grid-row: span 2;
  transform: rotate(-.35deg);
}
.rc3-s12Tile--a{ transform: rotate(.35deg); }
.rc3-s12Tile--b{ transform: rotate(-.2deg); }

.rc3-s12Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s12CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s12CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

/* Responsive */
@media (max-width: 1020px){
  .rc3-s10Grid{ grid-template-columns: 1fr; }
  .rc3-s12Mosaic{ grid-template-columns: 1fr; }
  .rc3-s12Tile--big{ grid-row: auto; transform:none; }
}

@media (max-width: 560px){
  .rc3-s11Magnet{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    width:100%;
    transform:none;
    margin-bottom: 12px;
  }
  .rc3-s11Board{ min-height:auto; display:grid; gap:12px; }
  .rc3-s11Tags{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    justify-content:flex-start;
  }
  .rc3-s11Note{ position:relative; left:auto; right:auto; bottom:auto; }
}
/* =========================
   SECTION 13: Braid board
   ========================= */
.rc3-s13BraidBoard{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 560px;
}
.rc3-s13BraidLines{
  position:absolute;
  inset:10px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 18%, rgba(185,255,62,.10), transparent 58%),
    radial-gradient(circle at 88% 55%, rgba(74,31,77,.16), transparent 60%),
    repeating-linear-gradient(135deg,
      rgba(237,241,255,.06) 0px,
      rgba(237,241,255,.06) 1px,
      rgba(237,241,255,0) 18px,
      rgba(237,241,255,0) 28px
    ),
    repeating-linear-gradient(45deg,
      rgba(241,230,207,.04) 0px,
      rgba(241,230,207,.04) 1px,
      rgba(241,230,207,0) 22px,
      rgba(241,230,207,0) 34px
    );
  opacity:.26;
  pointer-events:none;
}
.rc3-s13Legend{
  position:absolute;
  left:14px;
  top:14px;
  display:grid;
  gap:10px;
  z-index:2;
}
.rc3-s13LegItem{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
}
.rc3-s13LegDot{
  width:10px;
  height:10px;
  border-radius: 99px;
  box-shadow: 0 0 0 8px rgba(185,255,62,.08);
}
.rc3-s13LegDot--a{ background: rgba(185,255,62,.88); }
.rc3-s13LegDot--b{ background: rgba(241,230,207,.78); box-shadow: 0 0 0 8px rgba(241,230,207,.08); }
.rc3-s13LegDot--c{ background: rgba(160,120,255,.70); box-shadow: 0 0 0 8px rgba(160,120,255,.08); }
.rc3-s13LegTxt{
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(229,233,255,.72);
}

.rc3-s13Node{
  margin:0;
  width: min(350px, 64%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  z-index:1;
}
.rc3-s13Node:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s13Node img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s13Node--a{ left:14px; top:110px; transform: rotate(-.7deg); }
.rc3-s13Node--b{ right:14px; top:160px; transform: rotate(.7deg); }
.rc3-s13Node--c{ left:50%; bottom:78px; transform: translateX(-50%) rotate(.2deg); }

.rc3-s13Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s13CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s13CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s13Rule{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  margin:0;
  border-radius: 26px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  color: rgba(229,233,255,.72);
  line-height:1.65;
  z-index:2;
}

/* =========================
   SECTION 14: Flip cards
   ========================= */
.rc3-s14Grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.rc3-s14Card{
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding: 14px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  outline:none;
}
.rc3-s14Card:focus{
  box-shadow: var(--rc-shadow), 0 0 0 3px rgba(185,255,62,.14);
}
.rc3-s14CardInner{
  position:relative;
  min-height: 430px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.rc3-s14Card:hover .rc3-s14CardInner,
.rc3-s14Card:focus .rc3-s14CardInner{
  transform: rotateY(180deg);
}

.rc3-s14Face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  overflow:hidden;
  background: rgba(7,8,11,.22);
}
.rc3-s14Face--front{ display:grid; }
.rc3-s14Face--back{
  transform: rotateY(180deg);
  padding: 14px;
  display:grid;
  align-content:start;
  gap:10px;
  background:
    repeating-linear-gradient(180deg,
      rgba(237,241,255,.05) 0px,
      rgba(237,241,255,.05) 1px,
      rgba(237,241,255,0) 34px,
      rgba(237,241,255,0) 44px
    ),
    rgba(7,8,11,.22);
}

.rc3-s14Shot{ margin:0; }
.rc3-s14Shot img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s14Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s14CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s14CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s14Badge{
  position:absolute;
  right:12px;
  top:12px;
  border-radius: 999px;
  border:1px solid rgba(185,255,62,.34);
  background: rgba(185,255,62,.10);
  color: rgba(241,230,207,.92);
  padding: 10px 12px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
}

.rc3-s14BackK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s14BackT{
  margin:0;
  color: rgba(229,233,255,.72);
  line-height:1.75;
}
.rc3-s14BackList{
  list-style:none;
  margin: 4px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.rc3-s14BackList li{
  border-radius: 999px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(229,233,255,.72);
}

@media (prefers-reduced-motion: reduce){
  .rc3-s14CardInner{ transition:none; }
}

/* =========================
   SECTION 15: Diary spread
   ========================= */
.rc3-s15Spread{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 520px;
}
.rc3-s15Paper{
  border-radius: 30px;
  border:1px solid rgba(237,241,255,.12);
  background:
    repeating-linear-gradient(180deg,
      rgba(237,241,255,.06) 0px,
      rgba(237,241,255,.06) 1px,
      rgba(237,241,255,0) 34px,
      rgba(237,241,255,0) 44px
    ),
    rgba(255,255,255,.05);
  padding: 14px;
  max-width: 72ch;
  margin: 8px auto 0;
  position:relative;
  z-index:1;
}
.rc3-s15Line{
  margin:0;
  color: rgba(229,233,255,.72);
  line-height:1.85;
}
.rc3-s15Bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(229,233,255,.70);
  line-height:1.85;
}
.rc3-s15Ink{
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(circle at 22% 18%, rgba(185,255,62,.12), transparent 55%),
    radial-gradient(circle at 88% 55%, rgba(74,31,77,.18), transparent 60%);
  opacity:.18;
  pointer-events:none;
  animation: rc3InkDrift 10s ease-in-out infinite;
}
@keyframes rc3InkDrift{
  50%{ transform: translateY(10px); }
}

.rc3-s15Photo{
  margin:0;
  width: min(350px, 64%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  z-index:2;
}
.rc3-s15Photo:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s15Photo img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s15Photo--a{ left:14px; top:14px; transform: rotate(-.6deg); }
.rc3-s15Photo--b{ right:14px; bottom:14px; transform: rotate(.6deg); }

.rc3-s15Tape{
  position:absolute;
  left:14px;
  top:14px;
  width: 84px;
  height: 26px;
  border-radius: 8px;
  background: rgba(241,230,207,.14);
  border:1px solid rgba(241,230,207,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transform: rotate(-12deg);
  opacity:.85;
  z-index:3;
}
.rc3-s15Photo--b .rc3-s15Tape{
  left:auto;
  right:14px;
  top:14px;
  transform: rotate(10deg);
}

.rc3-s15Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s15CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s15CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

/* Responsive */
@media (max-width: 1020px){
  .rc3-s14Grid{ grid-template-columns: 1fr; }
  .rc3-s13BraidBoard{ min-height: 820px; }
}
@media (max-width: 560px){
  .rc3-s13Node{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    width:100%;
    transform:none;
    margin-bottom: 12px;
  }
  .rc3-s13BraidBoard{ min-height:auto; display:grid; gap:12px; }
  .rc3-s13Legend{ position:relative; left:auto; top:auto; }
  .rc3-s13Rule{ position:relative; left:auto; right:auto; bottom:auto; }

  .rc3-s15Photo{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    width:100%;
    transform:none;
    margin-top: 12px;
  }
  .rc3-s15Spread{ min-height:auto; }
}
/* =========================
   SECTION 16: Route desk
   ========================= */
.rc3-s16Table{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 520px;
}
.rc3-s16GridFx{
  position:absolute;
  inset:10px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 22%, rgba(185,255,62,.12), transparent 58%),
    radial-gradient(circle at 86% 65%, rgba(74,31,77,.18), transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(237,241,255,.06) 0px,
      rgba(237,241,255,.06) 1px,
      rgba(237,241,255,0) 22px,
      rgba(237,241,255,0) 32px
    );
  opacity:.24;
  pointer-events:none;
}

.rc3-s16Piece{
  margin:0;
  width: min(350px, 66%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  z-index:2;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s16Piece:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s16Piece img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s16Piece--a{ left:14px; top:14px; transform: rotate(-.6deg); }
.rc3-s16Piece--b{ right:14px; bottom:14px; transform: rotate(.6deg); }

.rc3-s16Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s16CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s16CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s16Core{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(520px, 92%);
  border-radius: 30px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  z-index:3;
}
.rc3-s16CoreK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
  text-align:center;
}
.rc3-s16List{
  list-style:none;
  margin: 12px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.rc3-s16List li{
  border-radius: 22px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(229,233,255,.76);
}
.rc3-s16List li span:first-child{ color: rgba(241,230,207,.86); }
.rc3-s16CoreT{
  margin: 12px 0 0;
  color: rgba(229,233,255,.72);
  line-height:1.7;
  text-align:center;
}

.rc3-s16Pins{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.rc3-s16Pins span{
  position:absolute;
  width:10px;
  height:10px;
  border-radius: 99px;
  background: rgba(185,255,62,.82);
  box-shadow: 0 0 0 10px rgba(185,255,62,.10);
  opacity:.7;
  animation: rc3PinsFloat 5.2s ease-in-out infinite;
}
.rc3-s16Pins span:nth-child(1){ left:18px; top:52%; animation-delay:.1s; }
.rc3-s16Pins span:nth-child(2){ right:18px; top:38%; animation-delay:.4s; background: rgba(241,230,207,.76); box-shadow: 0 0 0 10px rgba(241,230,207,.10); }
.rc3-s16Pins span:nth-child(3){ left:50%; top:18px; transform: translateX(-50%); animation-delay:.2s; }
.rc3-s16Pins span:nth-child(4){ left:50%; bottom:18px; transform: translateX(-50%); animation-delay:.55s; background: rgba(160,120,255,.70); box-shadow: 0 0 0 10px rgba(160,120,255,.10); }
@keyframes rc3PinsFloat{ 50%{ transform: translateY(-8px); } }

/* =========================
   SECTION 17: Team compass
   ========================= */
.rc3-s17Dial{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 560px;
}
.rc3-s17Rings{
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(circle at 50% 50%, rgba(185,255,62,.08), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(237,241,255,.06), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(237,241,255,.04), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(74,31,77,.12), transparent 62%);
  opacity:.9;
  pointer-events:none;
}

.rc3-s17Blip{
  margin:0;
  width: min(350px, 66%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  z-index:2;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s17Blip:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s17Blip img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s17Blip--n{ left:14px; top:14px; transform: rotate(-.5deg); }
.rc3-s17Blip--s{ right:14px; bottom:14px; transform: rotate(.5deg); }

.rc3-s17Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s17CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s17CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s17Rules{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92%);
  display:grid;
  gap:10px;
  z-index:3;
}
.rc3-s17Bubble{
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s17Bubble:hover{
  transform: translateY(-2px);
  border-color: rgba(241,230,207,.24);
  background: rgba(241,230,207,.06);
}
.rc3-s17BubbleK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s17BubbleT{
  margin:8px 0 0;
  color: rgba(229,233,255,.72);
  line-height:1.7;
}

/* =========================
   SECTION 18: Atlas gate
   ========================= */
.rc3-s18Arc{
  margin-top:14px;
  border-radius: 34px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  box-shadow: var(--rc-shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  min-height: 640px;
}
.rc3-s18Glow{
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(circle at 50% 35%, rgba(185,255,62,.14), transparent 58%),
    radial-gradient(circle at 30% 70%, rgba(74,31,77,.18), transparent 60%),
    linear-gradient(135deg, rgba(241,230,207,.06), rgba(237,241,255,0) 55%);
  opacity:.24;
  pointer-events:none;
}

.rc3-s18Shard{
  margin:0;
  width: min(350px, 62%);
  border-radius: 26px;
  border:1px solid rgba(237,241,255,.12);
  background: rgba(7,8,11,.22);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  position:absolute;
  z-index:2;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.rc3-s18Shard:hover{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(185,255,62,.28);
  background: rgba(185,255,62,.05);
}
.rc3-s18Shard img{ width:100%; max-width:350px; margin:0 auto; }
.rc3-s18Shard--a{ left:14px; top:90px; transform: rotate(-.8deg); }
.rc3-s18Shard--b{ left:50%; top:14px; transform: translateX(-50%) rotate(.2deg); }
.rc3-s18Shard--c{ right:14px; top:110px; transform: rotate(.8deg); }

.rc3-s18Cap{ padding:10px 12px 12px; border-top:1px solid rgba(237,241,255,.10); }
.rc3-s18CapK{
  display:block;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(241,230,207,.86);
}
.rc3-s18CapT{ display:block; margin-top:4px; color: rgba(229,233,255,.72); line-height:1.45; }

.rc3-s18Core{
  position:absolute;
  left:50%;
  bottom:14px;
  transform: translateX(-50%);
  width: min(680px, 92%);
  border-radius: 30px;
  border:1px dashed rgba(241,230,207,.22);
  background: rgba(241,230,207,.06);
  padding: 12px;
  z-index:3;
  text-align:center;
}
.rc3-s18CoreK{
  margin:0;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(185,255,62,.86);
}
.rc3-s18CoreT{
  margin: 10px 0 0;
  color: rgba(229,233,255,.72);
  line-height:1.75;
}

.rc3-s18Ctas{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.rc3-s18Btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border:1px solid rgba(185,255,62,.32);
  background: rgba(185,255,62,.10);
  color: rgba(241,230,207,.92);
  text-decoration:none;
  padding: 12px 14px;
  font-family: var(--rc-font-mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.rc3-s18Btn:hover{
  transform: translateY(-2px);
  border-color: rgba(185,255,62,.55);
  background: rgba(185,255,62,.14);
}
.rc3-s18Btn--ghost{
  border-color: rgba(237,241,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(229,233,255,.78);
}
.rc3-s18Btn--ghost:hover{
  border-color: rgba(241,230,207,.26);
  background: rgba(241,230,207,.06);
}

/* Responsive */
@media (max-width: 1020px){
  .rc3-s16Table{ min-height: 820px; }
  .rc3-s16Core{ position:relative; left:auto; top:auto; transform:none; margin: 12px auto 0; }
  .rc3-s16Piece{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; transform:none; margin-bottom:12px; }

  .rc3-s17Dial{ min-height: 820px; }
  .rc3-s17Rules{ position:relative; left:auto; top:auto; transform:none; margin: 12px auto 0; }
  .rc3-s17Blip{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; transform:none; margin-bottom:12px; }

  .rc3-s18Arc{ min-height: 940px; }
  .rc3-s18Shard{ position:relative; left:auto; right:auto; top:auto; width:100%; transform:none; margin-bottom:12px; }
  .rc3-s18Core{ position:relative; left:auto; bottom:auto; transform:none; margin: 12px auto 0; }
}