
:root{
  --bg:#fffaf2; --navy:#10203d; --coral:#ff6b4a; --gold:#ffd45d; --gold2:#ffcf55;
  --muted:#526078; --line:#d9dfe9; --cream:#f8f2e8; --cobalt:#dbe8ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.opal-body{margin:0;background:var(--bg);color:var(--navy);font-family:Arial,Helvetica,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.font-display,.logo,h1,h2,h3,table .col-name{font-family:Georgia,"Times New Roman",serif}
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 1.25rem}
.site-header{background:var(--navy);color:#fff}
.site-header .bar{display:flex;min-height:80px;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.logo{font-size:1.45rem;letter-spacing:.16em;text-transform:lowercase;color:inherit;text-decoration:none;font-weight:600}
.nav{display:none;gap:1.5rem;align-items:center;font-size:.84rem;font-weight:700}
.nav a{color:rgba(255,255,255,.8);text-decoration:none}
.nav a:hover{color:#fff}
@media(min-width:900px){.nav{display:flex}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;font-weight:800;text-decoration:none;border:0;cursor:pointer;padding:.9rem 1.4rem}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:#ff8469}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#1c3562}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-outline{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.hero-band{background:var(--navy);color:#fff;padding:3rem 0 4rem}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:#e54f35;margin:0 0 .8rem;font-size:.76rem;font-weight:900}
.hero-band .eyebrow{color:var(--gold)}
.hero-band h1{font-size:clamp(2.6rem,6vw,5.5rem);line-height:.9;letter-spacing:-.04em;margin:0;max-width:18ch}
.hero-band p.lead{margin:1.25rem 0 0;max-width:42rem;font-size:1.125rem;line-height:1.7;color:rgba(255,255,255,.72)}
.section{padding:3.5rem 0}
.muted{color:var(--muted)}
.dim{color:rgba(255,255,255,.45)}
.grid-3{display:grid;gap:1.25rem}
@media(min-width:800px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-4{display:grid;gap:1.25rem}
@media(min-width:900px){.grid-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px) and (max-width:899px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.spark-card{border:2px solid var(--navy);border-radius:1.75rem;align-items:flex-start;gap:1rem;min-height:170px;padding:1.4rem;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;box-shadow:7px 7px 0 #10203d;text-decoration:none;color:var(--navy);background:#fff;position:relative}
.spark-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #10203d}
.spark-card.cobalt{background:#dbe8ff}
.spark-card.coral{background:#ff8067}
.spark-card.gold{background:#ffd45d}
.spark-card .tag{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.spark-card strong{font-family:Georgia,"Times New Roman",serif;font-size:1.55rem;line-height:1.05;display:block;margin:.35rem 0}
.spark-card small{display:block;font-size:.95rem;line-height:1.45;color:rgba(16,32,61,.82)}
.spark-card .meta{margin-top:auto;padding-top:.8rem;font-size:.8rem;font-weight:800}
.spark-card.selected{outline:3px solid var(--coral);outline-offset:2px}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.pill{border-radius:999px;border:2px solid var(--navy);background:#fff;padding:.55rem 1rem;font-weight:800;font-size:.85rem;cursor:pointer}
.pill.on{background:var(--navy);color:#fff}
.compare-table-wrap{overflow-x:auto;border:2px solid var(--navy);border-radius:1.7rem;background:#fff;box-shadow:8px 8px 0 #10203d}
table.compare{min-width:850px;width:100%;border-collapse:collapse;text-align:left}
table.compare thead th{background:var(--gold2);padding:1.1rem;font-size:1.35rem}
table.compare th.row{padding:1.1rem;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;vertical-align:top;width:9rem}
table.compare td{padding:1.1rem;color:var(--muted);vertical-align:top;line-height:1.45;border-top:1px solid var(--line)}
table.compare th.row{border-top:1px solid var(--line)}
.cta-band{margin-top:2.5rem;display:grid;gap:1.25rem;border-radius:2rem;background:var(--cobalt);padding:1.75rem;align-items:center}
@media(min-width:800px){.cta-band{grid-template-columns:1fr auto}}
.cta-actions{display:flex;flex-direction:column;gap:.75rem;min-width:220px}
.note{margin-top:1.5rem;font-size:.875rem;color:#657087}
.curated{display:grid;gap:1rem}
@media(min-width:800px){.curated{grid-template-columns:repeat(2,1fr)}}
.curated a{display:block;border:2px solid var(--navy);border-radius:1.5rem;padding:1.25rem 1.4rem;background:#fff;text-decoration:none;color:var(--navy);box-shadow:6px 6px 0 #10203d}
.curated a:hover{transform:translate(-1px,-1px)}
.curated .tag{color:#e54f35;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.curated strong{display:block;font-family:Georgia,serif;font-size:1.45rem;margin:.35rem 0}
.img-frame{aspect-ratio:16/9;overflow:hidden;border-radius:1.5rem;border:2px solid var(--navy);box-shadow:7px 7px 0 #10203d;background:#ddd}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block}
.img-row{display:grid;gap:1.1rem;margin:0 0 2rem}
@media(min-width:800px){.img-row{grid-template-columns:repeat(2,1fr)}}
.curated a .thumb{aspect-ratio:16/9;overflow:hidden;border-radius:1rem;border:2px solid var(--navy);margin:0 0 .9rem;background:#ddd}
.curated a .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.form-card{max-width:720px;margin:0 auto;border:2px solid var(--navy);border-radius:1.75rem;background:#fff;padding:1.75rem;box-shadow:8px 8px 0 #10203d}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-weight:800;font-size:.9rem}
.field input,.field select,.field textarea{border:2px solid var(--navy);border-radius:1rem;padding:.85rem 1rem;font:inherit;background:var(--bg)}
.field textarea{min-height:110px;resize:vertical}
.form-grid{display:grid;gap:0 1rem}
@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr}}
.success{display:none;border:2px solid var(--navy);background:#e8ffe8;border-radius:1.25rem;padding:1.25rem;margin-top:1rem}
.success.show{display:block}
.site-footer{background:#08142c;color:#fff;padding:3rem 1.25rem}
.foot{display:flex;flex-direction:column;gap:2rem;justify-content:space-between}
@media(min-width:800px){.foot{flex-direction:row;align-items:flex-end}}
.foot-links{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.9rem;font-weight:700}
.foot-links a{color:#fff;text-decoration:none}
.sticky-cta{position:fixed;right:1rem;bottom:1rem;z-index:40}
.tools{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.5rem 0}
#live-table{display:none;margin-top:2rem}
#live-table.show{display:block}

.opal-idea-rail{margin-top:1.5rem}
.opal-idea-rail-label{font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#526078;margin:0 0 .75rem}
.opal-idea-rail-track{display:flex;gap:.85rem;overflow-x:auto;padding:0 0 .75rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:stretch}
.opal-idea-chip{flex:0 0 9.5rem;width:9.5rem;scroll-snap-align:start;border:2px solid #10203d;border-radius:1.15rem;overflow:hidden;background:#fff;box-shadow:5px 5px 0 #10203d;text-decoration:none;color:#10203d;display:flex;flex-direction:column;align-items:stretch}
.opal-idea-chip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block;flex:0 0 auto;background:#d9dfe9}
.opal-idea-chip span{display:block;padding:.55rem .7rem .7rem;font-weight:800;font-size:.9rem;min-height:2.6rem;flex:1 1 auto}
