/* =========================================================
   TRYBE GUIDES — copied 1:1 from the site's legacy zone.
   Values lifted verbatim from assets/css/main.css so these
   pages are the same product, not a lookalike.
   NO Playfair italics anywhere. Ever.
   ========================================================= */
:root{
  --bg: #0B0B0D;
  --ink: #ECE7DF;
  --amber: #FF7A18;
  --green: #005d5c;
  --green-bright: #17a29d;
  --btn: #2dd4bf;
  --muted: rgba(236,231,223,.58);
  --line: rgba(236,231,223,.12);
  --card: #101014;
  --font-head: 'Poppins', sans-serif;
  --font-sub: 'Playfair Display', serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--btn); color:#062a26; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#0B0B0D; }
::-webkit-scrollbar-thumb{ background:#26262c; border-radius:6px; }

/* ============ legacy zone — identical to the site ============ */
.legacy-bg{
  position: relative;
  background: #030b14;
  background-image: radial-gradient(ellipse 120% 1400px at 50% 0%, #1F314F 0%, #0B1727 45%, #030b14 100%);
  background-repeat: no-repeat;
  overflow: clip;
}
.legacy-bg .section{ background: transparent; position: relative; z-index: 1; }

.legacy-orbs{
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
  pointer-events: none; z-index: 0; overflow: visible;
}
.legacy-orbs span{
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen; filter: blur(160px);
  animation: blob 15s infinite alternate;
}
.orb-purple{ top:-5%; left:-5%; width:55rem; height:55rem; background:#6E298C; opacity:.35; }
.orb-teal{ top:35%; right:-5%; width:45rem; height:45rem; background:#00B2A9; opacity:.35; animation-delay:-2s; }
.orb-indigo{ bottom:-10%; left:15%; width:50rem; height:50rem; background:#4F46E5; opacity:.25; animation-delay:-4s; }
@keyframes blob{
  0%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(40px,-60px) scale(1.2); }
  66%{ transform: translate(-30px,30px) scale(0.9); }
  100%{ transform: translate(0,0) scale(1); }
}

/* glassmorphic cards — teal default, exactly per the site */
.legacy-bg .card,
.legacy-bg .panel{
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  padding: clamp(24px, 3.4vw, 44px);
  position: relative;
}
.legacy-bg .card:hover,
.legacy-bg .panel:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(0,178,169,0.3);
}
/* purple variant — same as the site's .glass-purple */
.legacy-bg .glass-purple{
  border-color: rgba(110,41,140,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(110,41,140,0.15);
}
.legacy-bg .glass-purple:hover{
  border-color: rgba(110,41,140,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(110,41,140,0.3);
}
/* the site's yellow accent inside the legacy zone */
.legacy-bg blockquote{
  border-left: 3px solid #FBBF24;
  background: rgba(255,255,255,0.05);
  padding: 14px 20px; margin: 16px 0; border-radius: 0 12px 12px 0;
  color: rgba(236,231,223,.86);
}

.wrap{ position:relative; z-index:1; max-width: 880px; margin:0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.section{ position:relative; padding: clamp(50px, 6vw, 90px) 0; }

/* ---------- masthead ---------- */
.guide-head{ text-align:center; padding: clamp(48px, 7vw, 90px) 0 clamp(24px, 3vw, 40px); position:relative; z-index:1; }
.guide-logo{ height:104px; width:auto; max-width:min(100%,340px); margin:0 auto 22px; border-radius:14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); display:block; }

/* eyebrow — Playfair, NOT italic, with the site's 44px amber dash */
.eyebrow{
  font-family: var(--font-sub);
  font-style: normal; font-weight:500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--amber); margin-bottom: 18px;
}
.eyebrow::before{
  content:''; display:inline-block; vertical-align:middle;
  width:44px; height:1px; background:var(--amber); margin-right:14px; opacity:.7;
}
.guide-head .eyebrow{ display:inline-block; }

/* display type — identical fill/stroke to the site */
.display{
  font-family: var(--font-head); font-weight:900;
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  line-height:.94; letter-spacing:-.015em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.display .fill{
  color: var(--ink);
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 18px rgba(0,0,0,.65), 0 12px 60px rgba(0,0,0,.5);
}
.display .stroke{
  color: transparent;
  -webkit-text-stroke: 2px rgba(236,231,223,.95);
  text-stroke: 2px rgba(236,231,223,.95);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.85));
}
/* .lede / .guide-sub — Playfair, font-style NORMAL (site rule) */
.guide-sub{
  font-family: var(--font-sub); font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: rgba(236,231,223,.8); max-width: 640px; margin: 24px auto 0;
}
.lede{
  font-family: var(--font-sub); font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: rgba(236,231,223,.8);
  max-width: 760px; margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.headline{
  font-family: var(--font-head); font-weight:900;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height:1.04; letter-spacing:-.02em; text-transform:uppercase;
  margin: 0 0 18px;
}
h3{
  font-family: var(--font-head); font-weight:700;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: var(--btn); margin: 22px 0 8px; letter-spacing:-.01em;
}
p{ margin: 0 0 14px; color: rgba(236,231,223,.86); line-height:1.75; }
strong{ color:#fff; font-weight:600; }
.accent-amber{ color: var(--amber); }
ul, ol{ margin: 0 0 18px 22px; color: rgba(236,231,223,.86); line-height:1.75; }
li{ margin-bottom: 9px; }
li::marker{ color: var(--btn); }
hr{ border:0; border-top:1px solid var(--line); margin: clamp(36px,4.5vw,56px) 0; }
a{ color: var(--btn); }

.panel-num{
  font-family: var(--font-head); font-weight:900;
  font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--amber);
  line-height:1; margin-bottom: 6px;
}
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: clamp(26px,3vw,40px); }
.panel{ margin: 0 0 clamp(26px, 3vw, 40px); }
.fillin{ display:block; border-bottom:1px dashed rgba(45,212,191,.55); min-height:38px; margin: 8px 0 22px; }
pre{
  background: rgba(0,0,0,.35); border:1px solid rgba(0,178,169,0.25); border-radius:14px;
  padding: 20px 22px; overflow-x:auto; font-size:13px; line-height:1.65;
  font-family: ui-monospace, Menlo, Consolas, monospace; color: rgba(236,231,223,.9); margin: 16px 0;
}

/* ---------- CTA ---------- */
.cta{ text-align:center; margin-top: clamp(40px, 5vw, 64px); }
.cta .display{ font-size: clamp(1.6rem, 4vw, 2.8rem); margin-bottom: 14px; }
.cta .eyebrow::before{ display:none; }
.btn{
  display:inline-block; font-family: var(--font-head); font-weight:700;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding: 17px 34px; border-radius:8px; text-decoration:none; border:0; cursor:pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.btn-teal{ background: var(--btn); color:#06231f; box-shadow: 0 8px 26px rgba(45,212,191,.35), 0 3px 10px rgba(0,0,0,.4); }
.btn-teal:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(45,212,191,.5), 0 4px 14px rgba(0,0,0,.45); }

/* ---------- footer — identical to the site ---------- */
.footer{ position:relative; z-index:1; border-top:1px solid var(--line); margin-top: clamp(70px, 9vw, 110px); padding: 34px 0 96px; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:14px; font-weight:700; letter-spacing:.04em; }
.footer-brand img{ width:76px; height:auto; }
.footer-legal{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(236,231,223,.45); }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color: rgba(236,231,223,.6); border:1px solid var(--line); border-radius:6px; padding:9px 14px;
  transition: color .3s, border-color .3s;
}
.footer-social a:hover{ color: var(--btn); border-color: rgba(45,212,191,.5); }
.footer-disclaimer{
  margin-top:24px; font-size:.62rem; line-height:1.7; color: rgba(236,231,223,.32);
  text-align: justify;
}

@media (max-width: 640px){
  .grid-2{ grid-template-columns: 1fr; }
  .guide-logo{ height:84px; }
  .display .stroke{ -webkit-text-stroke-width: 1.5px; }
  .footer-row{ justify-content:center; text-align:center; }
  .footer-brand img{ width:68px; }
  .footer-social{ justify-content:center; }
}

/* ---------- print / save-as-PDF ---------- */
@media print{
  .legacy-orbs{ display:none; }
  .legacy-bg{ background:#fff; background-image:none; }
  body{ background:#fff; color:#111; }
  .display .fill, .headline{ color:#111; text-shadow:none; }
  .display .stroke{ color:#111; -webkit-text-stroke:0; filter:none; }
  .eyebrow{ color:#c85a10; } .eyebrow::before{ background:#c85a10; }
  h3, a, li::marker{ color:#0a7d70; }
  p, li, .lede, .guide-sub{ color:#222; } strong{ color:#000; }
  .legacy-bg .card, .legacy-bg .panel{
    background:#f6f6f6; border-color:#ddd; box-shadow:none; backdrop-filter:none; transform:none;
  }
  .panel-num{ color:#c85a10; }
  .legacy-bg blockquote{ background:#f0f0f0; color:#333; border-left-color:#FBBF24; }
  pre{ background:#f4f4f4; border-color:#ddd; color:#111; }
  .btn-teal{ background:#0a7d70; color:#fff; box-shadow:none; }
  .footer-disclaimer, .footer-legal{ color:#666; }
}