/* Gold Plan — WHITE / light theme, gold-forward palette (amber/bronze + teal
   on white), soft coloured shadows, subtle gradient borders. Mobile-first.
   Adapted from the CopyRadar stylesheet (same component system). */
:root{
  --bg:#ffffff; --bg2:#f7f8fc; --panel:#ffffff; --panel-tint:#f1f3fa;
  --ink:#14182b; --muted:#4b5468; --faint:#7a8199;
  --violet:#d97706; --violet-deep:#b45309; --teal:#0d9488; --teal-bright:#14b8a6;
  --amber:#92400e; --amber-bright:#f59e0b;
  --pos:#0a9665; --neg:#d92d20;
  --stroke:#e3e6f2; --stroke-strong:#cfd4e8;
  --shadow:0 18px 44px rgba(180,83,9,.10), 0 4px 14px rgba(20,24,43,.06);
  --shadow-hover:0 28px 60px rgba(180,83,9,.16), 0 6px 18px rgba(13,148,136,.10);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#bg3d{position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block}
.bg-fallback{position:fixed; inset:0; z-index:-3; background:
    radial-gradient(55% 42% at 12% 0%, rgba(217,119,6,.10), transparent 62%),
    radial-gradient(48% 40% at 92% 6%, rgba(20,184,166,.10), transparent 62%),
    radial-gradient(60% 50% at 85% 100%, rgba(245,158,11,.07), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg2) 78%, #ffffff);}
a{color:var(--violet-deep); text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.grad{background:linear-gradient(92deg, #b45309, #d97706 35%, #f59e0b 62%, #0d9488);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.8rem 1.1rem;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--stroke)}
.brand{display:flex; align-items:center; gap:.55rem; color:var(--ink); font-weight:700; font-size:1.22rem; letter-spacing:.2px}
.brand:hover{text-decoration:none}
.brand em{font-style:normal; color:var(--violet)}
.nav-links{display:flex; gap:.35rem}
.nav-links a{color:var(--muted); padding:.45rem .8rem; border-radius:999px; font-size:.95rem}
.nav-links a:hover{color:var(--ink); text-decoration:none; background:var(--panel-tint)}
.nav-links a.active{color:var(--violet-deep); background:#fdf0dc; box-shadow:inset 0 0 0 1px #f3d9a4}

main{max-width:1120px; margin:0 auto; padding:0 1.1rem 3rem}

/* ---------- bright cards + depth ---------- */
.glass{
  background:linear-gradient(165deg, #ffffff, #fbfbfe 60%);
  border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
}
.glass::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, rgba(217,119,6,.55), rgba(20,184,166,.45) 55%, rgba(245,158,11,.4)); opacity:.55}
.tilt{transform-style:preserve-3d; will-change:transform; transition:transform .35s ease, box-shadow .35s ease}
.tilt:hover{box-shadow:var(--shadow-hover)}

/* ---------- hero ---------- */
.hero{padding:3.2rem 0 1.4rem; text-align:left; position:relative}
.hero-media{position:absolute; inset:-1.2rem -1.1rem auto -1.1rem; height:calc(100% + 1.2rem);
  z-index:-1; overflow:hidden; border-radius:0 0 28px 28px;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 98%);
          mask-image:linear-gradient(180deg, #000 55%, transparent 98%)}
.hero-video, .hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hero-poster{display:none}
.hero-shade{position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.72) 20%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.05) 80%),
             linear-gradient(0deg, rgba(255,255,255,.55), transparent 45%)}
.eyebrow{color:var(--violet-deep); font-size:.78rem; letter-spacing:.22em; font-weight:700; margin:0 0 .9rem}
.hero h1, .page-head h1{font-size:clamp(2.1rem, 6.5vw, 3.6rem); line-height:1.08; margin:0 0 1rem; letter-spacing:-.01em}
.hero-sub{color:var(--muted); font-size:clamp(1rem, 2.6vw, 1.15rem); max-width:44rem; margin:0 0 1.8rem}
.hero-sub strong{color:var(--ink)}
.scoreboard{display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem 1rem; padding:1.2rem 1.3rem; max-width:820px}
.stat{display:flex; flex-direction:column; gap:.15rem; padding:.4rem .2rem}
.stat-label{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700}
.stat-value{font-size:clamp(1.45rem, 4.5vw, 2rem); font-weight:800; font-variant-numeric:tabular-nums}
.snapshot-note{color:var(--faint); font-size:.9rem; margin-top:.9rem}
.page-head{padding:2.6rem 0 .6rem}

/* ---------- feeds & cards ---------- */
.feed-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin:2.6rem 0 1.1rem; flex-wrap:wrap}
.feed-head h2{margin:0; font-size:clamp(1.4rem, 4vw, 1.9rem)}
.feed-badge{font-size:.68rem; letter-spacing:.14em; vertical-align:middle; color:#fff; background:var(--violet);
  padding:.22rem .55rem; border-radius:999px; font-weight:800; margin-left:.5rem}
.feed-badge.alt{background:var(--teal)}
.feed-badge.record{background:var(--amber)}
.record-note{background:#fdf6ec; border:1px solid #f0d9ae; color:#7c4a03; border-radius:14px;
  padding:.85rem 1rem; font-size:.94rem; margin:0 0 1.1rem; max-width:48rem}
.record-note strong{color:#5f3802}
.feed-tag{color:var(--muted); margin:.35rem 0 .2rem; max-width:38rem}
.feed-meta{color:var(--faint); font-size:.92rem; margin:.15rem 0 0}
.feed-meta strong{color:var(--ink)}
.delay-note{color:var(--faint); font-size:.9rem; margin:0}
.card-grid{display:grid; grid-template-columns:1fr; gap:1.1rem; perspective:1200px}
.alert-card{padding:1.25rem 1.3rem 1.35rem; position:relative}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.7rem}
.whale-chip{font-weight:700; font-size:.92rem; color:var(--violet-deep); background:rgba(217,119,6,.08);
  border:1px solid rgba(217,119,6,.30); padding:.28rem .7rem; border-radius:999px; max-width:65%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.whale-chip.fast{color:var(--teal); background:rgba(13,148,136,.08); border-color:rgba(13,148,136,.32)}
.open-chip{font-size:.72rem; letter-spacing:.1em; font-weight:800; color:var(--amber)}
.open-chip.done{color:var(--pos)}
.alert-card .market{margin:.1rem 0 .3rem; font-size:1.12rem; line-height:1.35}
.outcome{margin:0 0 .9rem; color:var(--muted)}
.outcome strong{color:var(--ink)}
.price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:.8rem .9rem;
  background:var(--panel-tint); border:1px solid var(--stroke); border-radius:14px;
  box-shadow:inset 0 1px 4px rgba(20,24,43,.05)}
.p-label{display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700}
.p-value{display:block; font-size:1.06rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:.15rem}
.price-trio{display:flex; align-items:center; gap:.55rem; padding:.8rem .9rem;
  background:var(--panel-tint); border:1px solid var(--stroke); border-radius:14px;
  box-shadow:inset 0 1px 4px rgba(20,24,43,.05)}
.pt-step{flex:1 1 0; min-width:0}
.pt-arrow{flex:0 0 auto; color:var(--faint); font-weight:800}
.gap-line{margin:.7rem 0 0; color:var(--muted); font-size:.92rem}
.gap-line strong{font-variant-numeric:tabular-nums}
.stale-flag{margin:0 0 .8rem; padding:.65rem .8rem; border-radius:12px; font-size:.9rem; font-weight:700;
  background:#fdf0e7; border:1px solid #f5cf9f; color:#8a4d05}
.card-meta{color:var(--faint); font-size:.86rem; margin:.85rem 0 .6rem}
.market-link{font-weight:700; font-size:.95rem}

.ad-slot{margin:2rem 0 .4rem; padding:1.1rem; text-align:center; color:var(--faint); font-size:.78rem;
  letter-spacing:.22em; border:1px dashed var(--stroke-strong); border-radius:14px; background:var(--bg2)}

/* ---------- how it works ---------- */
.how{margin-top:2.8rem; padding:1.6rem 1.5rem; overflow:hidden}
.how h2{margin:.1rem 0 1rem}
.steps{margin:0; padding-left:1.25rem; color:var(--muted); display:grid; gap:.7rem}
.steps strong{color:var(--ink)}
.how-media{display:none}

/* ---------- record ---------- */
.record-feed{margin-top:2.4rem}
.record-head{display:grid; gap:1rem; margin-bottom:1rem}
.record-head h2{margin:.1rem 0 .4rem; font-size:clamp(1.35rem, 4vw, 1.8rem)}
.spark{width:100%; max-width:560px; height:auto; display:block}
.table-wrap{overflow-x:auto; padding:.4rem}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:.9rem}
th, td{padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--stroke); vertical-align:top}
th{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
td{font-variant-numeric:tabular-nums}
td a{word-break:break-all}
.exit-note{color:var(--muted); min-width:180px}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.6rem}
.plan{padding:1.7rem 1.6rem; position:relative}
.plan.pro{border-color:#eec27f; box-shadow:var(--shadow), 0 0 0 1px #f3d9a4, 0 22px 50px rgba(180,83,9,.14)}
.plan-badge{position:absolute; top:-.7rem; right:1.2rem; background:linear-gradient(92deg, var(--violet), var(--teal));
  color:#fff; font-weight:800; font-size:.7rem; letter-spacing:.12em; padding:.3rem .7rem; border-radius:999px; z-index:2}
.plan h2{margin:.1rem 0 .2rem}
.price{font-size:2.4rem; font-weight:800; margin:.2rem 0 .8rem}
.price .per{font-size:1rem; color:var(--muted); font-weight:600}
.plan ul{margin:0 0 1.3rem; padding-left:1.15rem; color:var(--muted); display:grid; gap:.45rem}
.btn{display:inline-block; border:0; cursor:pointer; font-weight:700; font-size:.98rem;
  padding:.72rem 1.35rem; border-radius:999px; color:#fff; background:linear-gradient(92deg, var(--violet), var(--teal))}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:#fff; color:var(--violet-deep); box-shadow:inset 0 0 0 1.5px #eec27f}
.waitlist{display:flex; flex-direction:column; gap:.6rem}
.waitlist input{background:#fff; border:1px solid var(--stroke-strong); border-radius:999px;
  padding:.72rem 1.1rem; color:var(--ink); font-size:1rem; width:100%}
.waitlist input::placeholder{color:var(--faint)}
.waitlist input:focus{outline:2px solid var(--teal-bright); outline-offset:1px}
.fine{color:var(--faint); font-size:.85rem}
.flash{padding:.9rem 1.1rem; border-radius:14px; margin-top:1.2rem; font-weight:600}
.flash.ok{background:#e8f8f1; border:1px solid #9fe3c3; color:#0b6b43}
.flash.warn{background:#fdf0e7; border:1px solid #f5cf9f; color:#8a4d05}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--stroke); margin-top:3.5rem; background:var(--bg2)}
.footer-inner{max-width:1120px; margin:0 auto; padding:1.8rem 1.1rem 2.4rem}
.foot-brand{font-weight:800; margin:0 0 .6rem}
.disclaimer{color:var(--muted); font-size:.88rem; max-width:56rem; margin:0 0 .7rem}
.foot-meta{color:var(--faint); font-size:.82rem; margin:0}

/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .hero-video{display:none}
  .hero-poster{display:block}
}

/* ---------- small screens: poster fallback + one-line nav ---------- */
@media (max-width:719px){
  .hero-video{display:none}
  .hero-poster{display:block}
}
@media (max-width:560px){
  .nav{padding:.7rem .8rem; gap:.5rem}
  .brand{font-size:1.08rem; gap:.4rem}
  .brand-mark svg{width:24px; height:24px}
  .nav-links{gap:.1rem}
  .nav-links a{padding:.4rem .55rem; font-size:.88rem}
  main{padding:0 .9rem 2.4rem}
  .hero-media{inset:-1.2rem -.9rem auto -.9rem}
  .price-row{gap:.4rem; padding:.7rem .6rem}
  .p-value{font-size:.98rem}
}

/* ---------- desktop ---------- */
@media (min-width:720px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .scoreboard{grid-template-columns:repeat(4,1fr)}
  .plans{grid-template-columns:1fr 1fr}
  .record-head{grid-template-columns:1.2fr .8fr; align-items:center}
  .hero{padding-top:4.2rem}
  .how{display:grid; grid-template-columns:1.25fr .75fr; gap:1.6rem; align-items:center}
  .how-media{display:block; border-radius:16px; overflow:hidden; position:relative;
    box-shadow:0 16px 36px rgba(13,148,136,.16); border:1px solid var(--stroke)}
  .how-media video, .how-media img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1}
}
@media (min-width:1024px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- gold plan additions ---------- */
.flag-unverified{display:inline-block; font-size:.66rem; letter-spacing:.12em; font-weight:800;
  color:#8a4d05; background:#fdf0e7; border:1px solid #f5cf9f; padding:.14rem .5rem;
  border-radius:999px; vertical-align:middle; margin-right:.45rem}
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:.85rem; color:var(--muted)}
.checklist li{position:relative; padding-left:2rem}
.checklist li::before{content:""; position:absolute; left:0; top:.16rem; width:1.05rem; height:1.05rem;
  border-radius:5px; border:2px solid var(--stroke-strong); background:#fff}
.checklist strong{color:var(--ink)}
.how{margin-top:1.7rem}
.alert-feed{display:grid; gap:1.1rem; margin-top:2.2rem; max-width:840px}
.alert-item{padding:1.2rem 1.3rem 1.3rem}
.alert-date{font-size:.8rem; letter-spacing:.08em; font-weight:700; color:var(--faint); white-space:nowrap}
.alert-pnl{font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; margin:.35rem 0 0}
.open-status{border-color:#f0d9ae}
.bt-figure{margin:0}
.bt-chart{width:100%; height:auto; display:block}
.bt-figure figcaption{color:var(--muted); font-size:.9rem; margin-top:.7rem; max-width:54rem}
.bt-figure figcaption strong{color:var(--ink)}
.bt-small{max-width:780px}
@media (min-width:720px){
  .how{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
}

/* ---------- trade diary (Learn page) ---------- */
.diary-summary{padding:1rem 1.25rem; margin:0 0 1rem}
.diary-summary p{margin:0}
.diary-tabs{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.1rem}
.diary-tab{font:inherit; font-size:.85rem; font-weight:700; color:var(--muted);
  background:var(--panel); border:1px solid var(--stroke-strong);
  border-radius:999px; padding:.42rem .8rem; cursor:pointer}
.diary-tab:hover{color:var(--ink); border-color:var(--violet)}
.diary-tab .dt-count{display:inline-block; min-width:1.35rem; text-align:center;
  background:var(--panel-tint); border:1px solid var(--stroke); color:var(--faint);
  border-radius:999px; font-size:.72rem; padding:.05rem .3rem; margin-left:.3rem}
.diary-tab.active{color:#fff; background:linear-gradient(92deg, var(--violet), var(--violet-deep));
  border-color:transparent; box-shadow:0 8px 20px rgba(180,83,9,.25)}
.diary-tab.active .dt-count{background:rgba(255,255,255,.22); border-color:transparent; color:#fff}
.diary-panel{display:none}
.diary-panel.active{display:block}
.diary-month-meta{color:var(--muted); margin:.2rem 0 .9rem}
.diary-day{border:1px solid var(--stroke); border-radius:14px; background:#fff;
  padding:.75rem .95rem; margin:0 0 .6rem; box-shadow:0 4px 14px rgba(20,24,43,.04)}
.dd-head{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.25rem .9rem; margin:0 0 .3rem}
.dd-bal{color:var(--faint); font-size:.85rem; font-variant-numeric:tabular-nums}
.dd-read{margin:.18rem 0; color:var(--muted); font-size:.92rem; font-variant-numeric:tabular-nums}
.dd-note{color:var(--amber)}
.trend-chip{font-weight:800; font-size:.76rem; letter-spacing:.04em; padding:.12rem .55rem;
  border-radius:999px; white-space:nowrap}
.trend-chip.up{color:var(--pos); background:rgba(10,150,101,.10)}
.trend-chip.down{color:var(--neg); background:rgba(217,45,32,.08)}
.dd-decision{margin:.4rem 0 0; font-size:.92rem; color:var(--muted)}
.dd-decision strong{color:var(--ink); letter-spacing:.05em}
.dd-close{margin:.4rem 0 0; font-size:.92rem; color:var(--muted); font-variant-numeric:tabular-nums}
.diary-trade{background:var(--bg2); border:1px solid var(--stroke);
  border-left:4px solid var(--teal); border-radius:10px; padding:.6rem .85rem; margin:.55rem 0 .2rem}
.dt-line{margin:.22rem 0; font-size:.92rem; font-variant-numeric:tabular-nums}