/* Hybrid · C-derived body components (sg-), copied from c-chrome.css minus C's header/footer/pill. Owner: C-agent. */
:root { --sg-max: 1240px; --sg-gutter: clamp(16px, 4vw, 40px); --sg-wax: radial-gradient(circle at 38% 32%, #d24848, #85181d 62%, #4a0a0e); --sg-wax-gold: radial-gradient(circle at 38% 32%, #fff1c8, #e2bf4d 48%, #8a6420 100%); }
[hidden] { display: none !important; }
.sg-wrap { max-width: var(--sg-max); margin: 0 auto; padding: 0 var(--sg-gutter); }
/* ─── buttons (saga variants on the kit's .btn) ─── */
.sg-cta { position: relative; overflow: hidden; }
.sg-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%); transform: translateX(-120%); animation: sg-sheen 4.8s ease-in-out infinite 1.2s; pointer-events: none; }
@keyframes sg-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.sg-cta small { font: 500 12px/1 var(--font-body); letter-spacing: .02em; font-variant: normal; opacity: .78; }
.sg-link { font-family: var(--font-heading); font-variant: small-caps; letter-spacing: .07em; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-hair); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.sg-link:hover { color: var(--gold-bright); border-color: var(--gold); }
.sg-ctas { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.sg-fine { font: italic 15px/1.4 var(--font-lore); color: var(--cream-dim); }

/* ─── type ─── */
.sg-kicker { font: 600 12px/1 var(--font-heading); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); }
.sg-h1 { font: 900 clamp(34px, 5.4vw, 74px)/1.02 var(--font-display); color: var(--gold); letter-spacing: .03em; text-shadow: 0 0 40px rgba(212,175,55,.25), 0 3px 0 rgba(0,0,0,.5); margin: 10px 0 14px; }
.sg-h2 { font: 700 clamp(28px, 3.6vw, 48px)/1.08 var(--font-display); color: var(--gold); letter-spacing: .03em; margin: 8px 0 12px; text-shadow: 0 0 30px rgba(212,175,55,.2); }
.sg-h3 { font: 700 clamp(19px, 1.8vw, 24px)/1.2 var(--font-heading); color: var(--cream); letter-spacing: .04em; margin: 0 0 8px; }
.sg-lede { font: 400 clamp(19px, 1.7vw, 23px)/1.45 var(--font-lore); color: var(--cream); max-width: 640px; margin: 0 0 22px; }
.sg-lede em, .sg-time { font-style: italic; color: var(--gold-bright); }
.sg-p { font: 400 16px/1.6 var(--font-body); color: var(--cream-dim); max-width: 620px; }
.sg-p b { color: var(--cream); font-weight: 600; }
.sg-time { font: italic 600 clamp(17px, 1.5vw, 20px)/1 var(--font-lore); letter-spacing: .02em; }

/* ─── parchment ─── */
.sg-parch { position: relative; color: var(--parchment-text); background: #f1e4cc url('assets/parchment-clean.png') center / cover; border-radius: 6px; box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(120,80,30,.35), inset 0 0 0 1px rgba(90,60,20,.3); }
.sg-parch::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(90,55,20,.28) 100%); }
.sg-parch h2, .sg-parch h3, .sg-parch h4 { font-family: var(--font-heading); color: #4a3418; }
.sg-parch .sg-ink-red { color: #8a1c22; }

/* ─── wax seal ─── */
.sg-seal { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 0; padding: 0;
  background: var(--sg-wax); color: #ffe6b8; font: 700 16px/1 var(--font-heading);
  box-shadow: 0 5px 14px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.22), inset 0 0 0 5px rgba(243,212,122,.22), 0 0 0 4px rgba(12,10,8,.6);
  transition: transform .25s var(--ease-spring), box-shadow .3s; }
.sg-seal:hover { transform: scale(1.08) rotate(-4deg); }
.sg-seal.gold { background: var(--sg-wax-gold); color: #3a2508; }
.sg-seal.cracked::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M21 1 L18 11 L24 16 L17 24 L21 39 M18 11 L7 8 M24 16 L35 13 M17 24 L6 30 M21 31 L31 33' stroke='%23f3d47a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; filter: drop-shadow(0 0 3px rgba(243,212,122,.9)); }

/* ─── proof frames: a real screenshot / app video in a carved frame ─── */
.sg-frame { position: relative; border-radius: 14px; padding: 8px; background: linear-gradient(160deg, #3a2f22, #1a1510 55%, #2c2419); border: 1px solid var(--gold-hair); box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,239,213,.08); }
.sg-frame-in { position: relative; border-radius: 8px; overflow: hidden; background: #0b0907; aspect-ratio: 16 / 10; }
.sg-frame-in img, .sg-frame-in video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sg-frame-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px 2px; font: italic 14px/1.3 var(--font-lore); color: var(--cream-dim); }
.sg-frame-cap b { font: 600 11px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); font-style: normal; }
.sg-frame-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--gold-faint); background: rgba(0,0,0,.3); }
.sg-frame-tabs button { border: 0; background: transparent; color: var(--cream-dim); font: 600 11px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.sg-frame-tabs button.on { background: rgba(212,175,55,.18); color: var(--gold-bright); }
.sg-frame .sg-live { position: absolute; left: 14px; top: 14px; z-index: 2; }

/* lazy video */
video.sg-vid { background: #0b0907; }
.sg-vbtn { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--gold-hair); background: rgba(12,10,8,.72); color: var(--cream); font: 600 12px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); }
.sg-vbtn:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ─── section shells ─── */
.sg-sec { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.sg-sec-dark { background: linear-gradient(180deg, rgba(12,10,8,0), rgba(12,10,8,.75) 12%, rgba(12,10,8,.75) 88%, rgba(12,10,8,0)); }
.sg-divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-dim); font-size: 22px; margin: 0 auto; max-width: 520px; }
.sg-divider::before, .sg-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hair), transparent); }

/* reveal on scroll */
.sg-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.sg-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sg-rv { opacity: 1; transform: none; } .sg-cta::after { animation: none; } }

/* ─── closing seal band (shared CTA) ─── */
.sg-closer { text-align: center; padding: clamp(70px, 9vw, 120px) var(--sg-gutter); position: relative; overflow: hidden; }
.sg-closer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255,120,30,.16), transparent 70%); pointer-events: none; }
.sg-anvil { width: 150px; height: 150px; margin: 0 auto; display: block; cursor: pointer; border: 0; background: none; padding: 0; filter: drop-shadow(0 0 24px rgba(255,120,30,.45)); transition: transform .25s var(--ease-spring); }
.sg-anvil img { width: 100%; height: 100%; object-fit: contain; }
.sg-anvil:hover { transform: scale(1.04); }
.sg-anvil:active { transform: scale(.96) translateY(3px); }
.sg-closer .sg-ctas { justify-content: center; }
.sg-price-line { font: 600 13px/1 var(--font-heading); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dim); margin-top: 18px; }

/* ─── type ─── */
.sg-kicker { font: 600 12px/1 var(--font-heading); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); }
.sg-h1 { font: 900 clamp(34px, 5.4vw, 74px)/1.02 var(--font-display); color: var(--gold); letter-spacing: .03em; text-shadow: 0 0 40px rgba(212,175,55,.25), 0 3px 0 rgba(0,0,0,.5); margin: 10px 0 14px; }
.sg-h2 { font: 700 clamp(28px, 3.6vw, 48px)/1.08 var(--font-display); color: var(--gold); letter-spacing: .03em; margin: 8px 0 12px; text-shadow: 0 0 30px rgba(212,175,55,.2); }
.sg-h3 { font: 700 clamp(19px, 1.8vw, 24px)/1.2 var(--font-heading); color: var(--cream); letter-spacing: .04em; margin: 0 0 8px; }
.sg-lede { font: 400 clamp(19px, 1.7vw, 23px)/1.45 var(--font-lore); color: var(--cream); max-width: 640px; margin: 0 0 22px; }
.sg-lede em, .sg-time { font-style: italic; color: var(--gold-bright); }
.sg-p { font: 400 16px/1.6 var(--font-body); color: var(--cream-dim); max-width: 620px; }
.sg-p b { color: var(--cream); font-weight: 600; }
.sg-time { font: italic 600 clamp(17px, 1.5vw, 20px)/1 var(--font-lore); letter-spacing: .02em; }

/* small shared bits */
.sg-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--gold-hair); background: rgba(212,175,55,.08); color: var(--gold); font: 600 11px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.sg-tag.crimson { color: #ff8a9b; border-color: rgba(196,30,58,.5); background: rgba(196,30,58,.14); }
.sg-tag.ice { color: #bfe3ff; border-color: rgba(143,214,255,.45); background: rgba(111,184,255,.12); }
.sg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sg-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--cream-dim); }
.sg-list li iconify-icon { color: var(--gold); font-size: 18px; margin-top: 2px; }
.sg-list li b { color: var(--cream); font-weight: 600; }
.sg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .sg-grid2 { grid-template-columns: 1fr; } }
.sg-noscroll { overflow: hidden; }
.sg-chev { display: inline-block; width: 12px; height: 12px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.sg-die { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.08; clip-path: polygon(50% 0, 97% 26%, 97% 74%, 50% 100%, 3% 74%, 3% 26%); background: linear-gradient(160deg, #fff1c8 0%, #f3d47a 22%, #d4af37 55%, #8a6420 100%); filter: drop-shadow(0 0 14px rgba(243,212,122,.55)); }
.sg-die::before { content: ''; position: absolute; left: 17%; right: 17%; top: 24%; bottom: 26%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,250,230,.75), rgba(226,191,77,.4)); }
.sg-die::after { content: ''; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 49.4%, rgba(90,60,10,.35) 50%, transparent 50.6%), linear-gradient(-32deg, transparent 49.4%, rgba(90,60,10,.35) 50%, transparent 50.6%); }
.sg-die b { position: relative; z-index: 1; margin-top: 12%; font: 900 1em/1 var(--font-display); color: #2a1a05; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
@media (max-width: 520px) { .btn.lg { white-space: normal; height: auto; min-height: 52px; padding: 10px 18px; text-align: center; font-size: 17px; line-height: 1.2; } }

/* lived-in label on screenshots */
.sg-live-note { position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(12,10,8,.82); border: 1px solid var(--gold-faint); font: italic 12.5px/1 var(--font-lore); color: var(--cream-dim); }
.sg-vbtn[data-vsnd] { left: auto; }
.sg-frame-cap { flex-wrap: wrap; }
.sg-frame-tabs { flex-wrap: wrap; max-width: 100%; }

/* anvil mark in closers (the new flaming-anvil mark) */
.sg-anvil img { width: 100%; height: 100%; object-fit: contain; }
.sg-closer .sg-anvil { width: 140px; height: 140px; }
.sg-vbtn.sg-hero-snd { position: absolute; right: var(--sg-gutter); bottom: 24px; z-index: 5; }
@media (max-width: 900px) { .sg-vbtn.sg-hero-snd { top: 12px; bottom: auto; } }