/* sodaburny.com - Cola Noir & Ember */
:root {
  --ink: #12151d;
  --panel: #1a1f2b;
  --panel2: #202636;
  --line: #33394a;
  --gold: #d9a45b;
  --ember: #f28c28;
  --ember-deep: #cf6a10;
  --mint: #56c596;
  --star: #e8b64c;
  --txt: #ece5d8;
  --mut: #b9ae9c;
  --dark-on-ember: #221302;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--ink);
  color: var(--txt);
  font-family: 'Onest', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--ember); }
a:focus-visible, button:focus-visible, input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
h1, h2, h3 { font-weight: 600; }
h1, .cn-h2 {
  font-family: 'Italiana', Georgia, serif;
  font-weight: 400;
  letter-spacing: .02em;
}
.cn-wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.cn-skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ember);
  color: var(--dark-on-ember);
  padding: 8px 14px;
  z-index: 90;
}
.cn-skip:focus { left: 8px; }

/* announcement */
.cn-note {
  background: #0c0e14;
  color: var(--gold);
  text-align: center;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}

/* masthead */
.cn-mast { border-bottom: 1px solid var(--line); background: var(--ink); position: relative; }
.cn-mast-in { display: flex; align-items: center; justify-content: space-between; min-height: 66px; position: relative; }
.cn-logo {
  font-family: 'Italiana', Georgia, serif;
  font-size: 27px;
  letter-spacing: .14em;
  color: var(--txt);
  text-decoration: none;
}
.cn-logo span { color: var(--ember); }
.cn-logo sup { font-size: 11px; color: var(--mut); }
.cn-nav ul { list-style: none; display: flex; gap: 26px; align-items: center; }
.cn-nav { display: flex; align-items: center; gap: 26px; }
.cn-nav a { color: var(--txt); text-decoration: none; font-size: 15.5px; }
.cn-nav a:hover { color: var(--ember); }
.cn-nav a[aria-current="page"] { color: var(--gold); }
.cn-burger { display: none; background: none; border: 1px solid var(--line); border-radius: 6px; width: 44px; height: 40px; cursor: pointer; }
.cn-burger span { display: block; width: 20px; height: 2px; background: var(--txt); margin: 4px auto; }

/* buttons */
.cn-btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--ember), var(--ember-deep));
  color: var(--dark-on-ember);
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  padding: 15px 34px;
  font-size: 17px;
  letter-spacing: .02em;
  border: 0;
}
.cn-btn:hover { filter: brightness(1.08); }
.cn-btn-sm { padding: 9px 18px; font-size: 14.5px; }
.cn-btn-dock { padding: 10px 22px; font-size: 15px; }

/* hero / buy box (layout B, centered) */
.cn-hero { padding: 44px 0 56px; text-align: center; background: radial-gradient(ellipse at 50% -10%, #232a3c 0%, var(--ink) 62%); }
.cn-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.12; margin: 10px auto 14px; max-width: 720px; }
.cn-rating { color: var(--mut); font-size: 15px; }
.cn-rating a { color: var(--gold); }
.cn-stars { color: var(--star); letter-spacing: 2px; margin-right: 6px; }
.cn-canon { max-width: 680px; margin: 0 auto 24px; color: var(--txt); font-size: 17.5px; }
.cn-canon strong { font-weight: 500; }
.cn-hero-img { margin: 4px auto 30px; }
.cn-packs-fs { border: 0; padding: 0; margin: 0; }
.cn-packs-fs legend { margin-bottom: 14px; }
.cn-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 0 auto 26px;
  text-align: left;
}
.cn-pack { position: relative; }
.cn-pack input { position: absolute; opacity: 0; }
.cn-pack label {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 18px 16px;
  cursor: pointer;
  min-height: 100%;
}
.cn-pack input:checked + label { border-color: var(--ember); background: var(--panel2); box-shadow: 0 0 0 1px var(--ember); }
.cn-pack input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }
.cn-pack-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #221302;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 14px;
  white-space: nowrap;
}
.cn-pack-name { font-size: 19px; font-weight: 700; }
.cn-pack-days { color: var(--mut); font-size: 14px; margin-bottom: 10px; }
.cn-pack-img { text-align: center; min-height: 132px; }
.cn-pack-img img { max-height: 150px; width: auto; }
.cn-hero-img img { max-width: 380px; }
.cn-pack-per { font-size: 22px; font-weight: 700; color: var(--gold); margin-top: 8px; }
.cn-pack-per small { font-size: 13px; color: var(--mut); font-weight: 400; }
.cn-pack-total { font-size: 15px; }
.cn-pack-was { color: var(--mut); text-decoration: line-through; }
.cn-pack-save {
  display: inline-block;
  background: rgba(86, 197, 150, .14);
  color: var(--mint);
  border-radius: 5px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 2px 9px;
  margin: 7px 0 4px;
}
.cn-pack-ship { font-size: 13px; color: var(--mut); }
.cn-price-zone { min-height: 96px; margin-bottom: 18px; }
.cn-price-big { font-family: 'Italiana', Georgia, serif; font-size: 46px; color: var(--txt); line-height: 1.1; }
.cn-price-big small { font-size: 18px; color: var(--mut); font-family: 'Onest', Arial, sans-serif; }
.cn-price-line { color: var(--mut); font-size: 16px; }
.cn-price-line strong { color: var(--mint); font-weight: 600; }
.cn-cta-wrap { margin: 6px 0 14px; }
.cn-micro { color: var(--mut); font-size: 14px; max-width: 560px; margin: 0 auto; }
.cn-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 20px; color: var(--mut); font-size: 13.5px; }
.cn-badges span::before { content: "\2713"; color: var(--mint); margin-right: 7px; }

/* trust strip */
.cn-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0e1119; }
.cn-strip .cn-wrap { display: flex; flex-wrap: wrap; gap: 8px 34px; justify-content: center; padding: 14px 20px; }
.cn-strip-item { color: var(--gold); font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; }

/* sections */
.cn-sec { padding: 58px 0; }
.cn-sec-alt { background: #161a24; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cn-sec h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 22px; }
.cn-kicker { color: var(--ember); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.cn-sec p + p { margin-top: 14px; }
.cn-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cn-why-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px 22px; }
.cn-why-card h3 { color: var(--gold); margin-bottom: 10px; font-size: 19px; }
.cn-why-card p { font-size: 15.5px; color: var(--mut); }

/* spec dl */
.cn-spec { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cn-spec dt { grid-column: 1; background: var(--panel); padding: 12px 18px; color: var(--gold); font-size: 14.5px; border-bottom: 1px solid var(--line); }
.cn-spec dd { grid-column: 2; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.cn-spec dt:last-of-type, .cn-spec dd:last-of-type { border-bottom: 0; }

/* gist */
.cn-gist { background: var(--panel); border-left: 3px solid var(--ember); border-radius: 0 10px 10px 0; padding: 22px 26px; font-size: 16.5px; }

/* citations */
.cn-cites sup a { color: var(--gold); text-decoration: none; font-size: 12px; }
.cn-refs ol { padding-left: 22px; }
.cn-refs li { margin-bottom: 8px; font-size: 14.5px; color: var(--mut); overflow-wrap: anywhere; }
.cn-refs a { color: var(--gold); }

/* ingredients preview */
.cn-ing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cn-ing { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.cn-ing img { flex: 0 0 56px; border-radius: 8px; }
.cn-ing h3 { font-size: 16.5px; }
.cn-ing p { font-size: 14px; color: var(--mut); margin-top: 4px; }
.cn-ing-note { margin-top: 18px; color: var(--mut); font-size: 15px; }

/* steps */
.cn-steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cn-steps li { counter-increment: st; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.cn-steps li::before { content: counter(st, decimal-leading-zero); font-family: 'Italiana', Georgia, serif; display: block; font-size: 30px; color: var(--ember); margin-bottom: 8px; }
.cn-steps h3 { font-size: 17px; margin-bottom: 6px; }
.cn-steps p { font-size: 14.5px; color: var(--mut); }

/* reviews preview + wall */
.cn-rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cn-rev-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.cn-rev-card blockquote { font-size: 15.5px; }
.cn-rev-meta { margin-top: 12px; color: var(--mut); font-size: 13.5px; }
.cn-verified { color: var(--mint); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; margin-left: 8px; }

/* Q&A */
.cn-qa-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.cn-qa-item h3 { font-size: 19px; color: var(--gold); margin-bottom: 8px; }
.cn-qa-item p { font-size: 16px; }

/* guarantee band */
.cn-gband { text-align: center; background: linear-gradient(180deg, #1c2130, #161a24); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cn-gband-num { font-family: 'Italiana', Georgia, serif; font-size: 84px; color: var(--ember); line-height: 1; }
.cn-gband p { max-width: 640px; margin: 14px auto 0; }

/* final cta band */
.cn-ctaband { text-align: center; }
.cn-ctaband .cn-btn { margin-top: 14px; }

/* takeaways */
.cn-take ul { list-style: none; }
.cn-take li { padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--line); font-size: 16px; }
.cn-take li::before { content: "\2192"; position: absolute; left: 4px; color: var(--ember); }

.cn-lastup { color: var(--mut); font-size: 13.5px; margin-top: 26px; }

/* subpage scaffolding */
.cn-page-head { padding: 46px 0 30px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% -30%, #222941 0%, var(--ink) 70%); }
.cn-page-head h1 { font-size: clamp(30px, 4.4vw, 44px); max-width: 860px; }
.cn-page-head p { color: var(--mut); max-width: 760px; margin-top: 10px; }
.cn-crumb { font-size: 13px; color: var(--mut); margin-bottom: 14px; }
.cn-crumb a { color: var(--gold); text-decoration: none; }
.cn-byline { color: var(--mut); font-size: 14px; margin-top: 12px; }
.cn-tldr { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 0 10px 10px 0; padding: 20px 24px; margin: 30px 0; font-size: 16px; }
.cn-tldr strong { color: var(--gold); }

/* supplement facts panel */
.cn-facts-panel { max-width: 560px; border: 2px solid var(--txt); padding: 14px 16px; background: #0e1119; font-family: 'Onest', Arial, sans-serif; }
.cn-facts-panel h3 { font-size: 30px; border-bottom: 8px solid var(--txt); padding-bottom: 6px; margin-bottom: 6px; font-weight: 700; }
.cn-facts-serving { font-size: 14.5px; border-bottom: 4px solid var(--txt); padding-bottom: 6px; margin-bottom: 4px; }
.cn-facts-panel table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cn-facts-panel th, .cn-facts-panel td { text-align: left; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.cn-facts-panel th[scope="col"] { border-bottom: 2px solid var(--txt); font-size: 13px; }
.cn-facts-panel td:last-child, .cn-facts-panel th:last-child { text-align: right; }
.cn-facts-foot { font-size: 12.5px; color: var(--mut); margin-top: 8px; }

/* glossary */
.cn-glossary dt { color: var(--gold); font-weight: 600; margin-top: 16px; }
.cn-glossary dd { color: var(--mut); font-size: 15.5px; margin-top: 4px; }

/* review page stats */
.cn-scorehead { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; margin: 26px 0; }
.cn-score-big { font-family: 'Italiana', Georgia, serif; font-size: 74px; line-height: 1; }
.cn-dist { flex: 1; min-width: 260px; }
.cn-bar { display: grid; grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 7px; color: var(--mut); }
.cn-bar-track { background: var(--panel2); border-radius: 99px; height: 10px; overflow: hidden; }
.cn-bar-fill { background: var(--star); height: 100%; }
.cn-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 34px 0; }
.cn-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 14px; text-align: center; }
.cn-stat b { display: block; font-family: 'Italiana', Georgia, serif; font-weight: 400; font-size: 30px; color: var(--gold); }
.cn-stat span { font-size: 13px; color: var(--mut); }
.cn-wall { column-count: 2; column-gap: 16px; }
.cn-wall .cn-rev-card { break-inside: avoid; margin-bottom: 16px; }
.cn-timeline { list-style: none; }
.cn-timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 15px; }

/* faq */
.cn-faq-group { margin-bottom: 38px; }
.cn-faq-group h2 { font-size: 24px; color: var(--gold); margin-bottom: 6px; }
.cn-det { border-bottom: 1px solid var(--line); }
.cn-det summary { cursor: pointer; padding: 16px 0; font-size: 17px; font-weight: 600; list-style: none; position: relative; padding-right: 34px; }
.cn-det summary::after { content: "+"; position: absolute; right: 4px; color: var(--ember); font-size: 22px; }
.cn-det[open] summary::after { content: "\2212"; }
.cn-det summary::-webkit-details-marker { display: none; }
.cn-det div { padding: 0 0 18px; color: var(--mut); font-size: 15.5px; }
.cn-det div p + p { margin-top: 10px; }

/* contact */
.cn-contact-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; margin: 24px 0; }
.cn-contact-card p { font-size: 15.5px; }
.cn-form { display: grid; gap: 12px; max-width: 520px; }
.cn-form label { font-size: 14px; color: var(--mut); }
.cn-form input, .cn-form textarea { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--txt); padding: 10px 12px; font-family: inherit; font-size: 15px; }

/* legal */
.cn-legal h2 { font-size: 22px; margin: 28px 0 10px; color: var(--gold); }
.cn-legal p, .cn-legal li { font-size: 15.5px; color: var(--mut); }
.cn-legal ul, .cn-legal ol { padding-left: 22px; margin-top: 8px; }

/* dock */
.cn-dock { position: fixed; left: 0; right: 0; bottom: 0; background: #0c0e14; border-top: 1px solid var(--gold); z-index: 40; }
.cn-dock-in { display: flex; align-items: center; gap: 16px; padding: 10px 20px; }
.cn-dock-name { font-family: 'Italiana', Georgia, serif; font-size: 20px; letter-spacing: .1em; }
.cn-dock-price { color: var(--gold); font-size: 15px; flex: 1; }
.cn-dock-x { background: none; border: 0; color: var(--mut); font-size: 24px; cursor: pointer; padding: 4px 8px; }
body.cn-dock-pad { padding-bottom: 68px; }
body.cn-dock-off .cn-dock { display: none; }
body.cn-dock-off { padding-bottom: 0; }

/* footer */
.cn-foot { border-top: 1px solid var(--line); background: #0c0e14; padding: 50px 0 30px; }
.cn-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.cn-foot-logo { font-family: 'Italiana', Georgia, serif; font-size: 22px; letter-spacing: .12em; margin-bottom: 12px; }
.cn-foot-brand p { font-size: 14px; color: var(--mut); }
.cn-foot-brand p + p { margin-top: 12px; }
.cn-foot-firm { font-size: 13.5px; }
.cn-foot-col h3 { color: var(--gold); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.cn-foot-col ul { list-style: none; }
.cn-foot-col li { margin-bottom: 8px; }
.cn-foot-col a { color: var(--mut); text-decoration: none; font-size: 14.5px; }
.cn-foot-col a:hover { color: var(--ember); }
.cn-foot-legal { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 22px; }
.cn-foot-legal p { font-size: 12.5px; color: #8b8271; margin-bottom: 8px; }

/* responsive */
@media (max-width: 900px) {
  .cn-packs, .cn-why, .cn-ing-grid, .cn-steps { grid-template-columns: 1fr 1fr; }
  .cn-stats { grid-template-columns: repeat(3, 1fr); }
  .cn-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cn-burger { display: block; }
  .cn-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
    gap: 14px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility 0s linear .2s;
    z-index: 50;
  }
  .cn-nav.cn-open { visibility: visible; opacity: 1; transition: opacity .2s, visibility 0s; }
  .cn-nav ul { flex-direction: column; gap: 12px; align-items: flex-start; }
  .cn-packs, .cn-why, .cn-ing-grid, .cn-steps, .cn-rev-grid { grid-template-columns: 1fr; }
  .cn-wall { column-count: 1; }
  .cn-stats { grid-template-columns: 1fr 1fr; }
  .cn-spec { grid-template-columns: 1fr; }
  .cn-spec dt, .cn-spec dd { grid-column: 1; }
  .cn-spec dt { border-bottom: 0; padding-bottom: 2px; }
  .cn-bar { grid-template-columns: 48px minmax(0, 1fr) 44px; }
  .cn-timeline li { grid-template-columns: 110px minmax(0, 1fr) 48px; }
  .cn-dock-name { display: none; }
  .cn-foot-grid { grid-template-columns: 1fr; }
  .cn-gband-num { font-size: 64px; }
}