* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.26)),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: #e3c4aa; color: var(--text); }

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 1000;
  padding: .72rem 1rem; background: var(--text); color: #fff; border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

.demo-banner {
  padding: .52rem 1rem;
  background: #30231d;
  color: #f7e8d9;
  border-bottom: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,239,232,.96);
  border-bottom: 1px solid rgba(104,88,77,.18);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(100%, var(--content-width)); min-height: 70px; margin: 0 auto;
  padding: 0 .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .72rem; color: var(--text); text-decoration: none; min-width: 0; }
.brand img { width: 38px; height: 38px; flex: 0 0 auto; }
.brand-copy { display: grid; min-width: 0; line-height: 1.08; }
.brand-copy strong { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-copy small { margin-top: .23rem; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.desktop-nav { display: none; }
.mobile-menu { position: relative; display: block; }
.mobile-menu summary {
  cursor: pointer; list-style: none; padding: .57rem .78rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: .82rem; font-weight: 850;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav {
  position: absolute; right: 0; top: calc(100% + .55rem); width: min(84vw, 330px);
  padding: .55rem; display: grid; gap: .15rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 22px 55px rgba(40,26,19,.16);
}
.mobile-menu nav a { padding: .78rem .82rem; color: var(--text); text-decoration: none; border-radius: 11px; font-weight: 760; }
.mobile-menu nav a:hover { background: #f2ebe4; }

main { min-height: 62vh; }
.container { width: min(calc(100% - 1.35rem), var(--content-width)); margin: 0 auto; }
.narrow { width: min(calc(100% - 1.35rem), 860px); margin: 0 auto; }
.section { padding: 3.2rem 0; }
.section-tight { padding: 2rem 0; }
.section-intro { max-width: 720px; margin-bottom: 1.4rem; }

.eyebrow {
  margin: 0 0 .85rem; color: var(--accent); font-size: .7rem; font-weight: 900;
  letter-spacing: .15em; text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; text-wrap: balance; }
h1 { margin: 0 0 1rem; font-size: clamp(2.55rem, 11vw, 4.8rem); letter-spacing: -.045em; }
h2 { margin: 0 0 .9rem; font-size: clamp(1.72rem, 7vw, 2.65rem); letter-spacing: -.025em; }
h3 { margin: 0 0 .6rem; font-size: 1.24rem; letter-spacing: -.015em; }
p { margin-top: 0; }
.dek { max-width: 760px; color: var(--muted); font-size: 1.04rem; }

.hero {
  position: relative; overflow: hidden; padding: 4.2rem 0 3.4rem;
  background:
    radial-gradient(circle at 92% 8%, rgba(201,135,82,.28), transparent 29%),
    radial-gradient(circle at 12% 105%, rgba(132,151,143,.22), transparent 30%),
    var(--primary-strong);
  color: #fffdf9;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.1) 50%, transparent 50.2%);
  background-size: 64px 64px;
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 2.4rem; align-items: center; }
.hero h1 { max-width: 820px; font-size: clamp(3rem, 13vw, 6.6rem); }
.hero p { max-width: 690px; color: rgba(255,253,249,.76); font-size: 1.02rem; }
.hero .eyebrow { color: #efb987; }
.hero-card {
  overflow: hidden; padding: 0; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0,0,0,.16);
}
.hero-visual { background: #efe5da; }
.hero-visual img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.hero-note { padding: 1.15rem 1.2rem 1.25rem; }
.hero-note strong { display: block; margin-bottom: .35rem; color: #fff; font-size: .83rem; letter-spacing: .07em; text-transform: uppercase; }
.hero-note p { margin: 0; font-size: .86rem; }

.actions { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.45rem; }
.btn {
  min-height: 48px; padding: .78rem 1.05rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px; text-decoration: none;
  font-size: .9rem; font-weight: 850; line-height: 1.2; text-align: center;
}
.btn-primary { background: var(--accent); color: #241c18; box-shadow: inset 0 -1px 0 rgba(0,0,0,.16); }
.btn-primary:hover { background: #d69560; }
.btn-secondary { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.34); color: #fffdf9; }
.btn-secondary:hover { background: rgba(255,255,255,.08); }
.btn-muted { background: #ece8e3; border-color: #ddd4ca; color: #716860; cursor: not-allowed; }
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--primary); }
.btn-outline:hover { border-color: #bcae9f; }

.page-head {
  padding: 3.4rem 0 2.7rem;
  background: linear-gradient(180deg, rgba(255,253,249,.58), rgba(244,239,232,.18));
  border-bottom: 1px solid var(--border);
}
.page-head h1 { color: var(--primary-strong); font-size: clamp(2.55rem, 11vw, 4.8rem); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1.25rem; color: var(--muted); font-size: .78rem; }
.breadcrumbs a { color: var(--muted); }

.grid-3, .grid-2 { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem;
  box-shadow: 0 10px 28px rgba(54,38,28,.035);
}
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover { border-color: #bda996; box-shadow: 0 14px 34px rgba(54,38,28,.065); }
.card img { width: 100%; aspect-ratio: 3/2; margin-bottom: 1rem; object-fit: cover; border-radius: calc(var(--radius) - 7px); background: #eee4d9; }
.kicker { margin-bottom: .45rem; color: var(--primary); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.card p, .section p { color: var(--muted); }

.verdict {
  position: relative; overflow: hidden; padding: 1.35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 16px 42px rgba(54,38,28,.05);
}
.verdict::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--accent); }
.verdict-grid { display: grid; gap: 1.35rem; }
.best-not { display: grid; gap: .7rem; }
.best-box, .not-box { padding: 1rem; border-radius: 14px; }
.best-box { background: #edf4ef; border: 1px solid #cbdcd0; }
.not-box { background: #f8eeeb; border: 1px solid #e5cdc6; }
.best-box h3 { color: var(--positive); }
.not-box h3 { color: var(--negative); }
.clean-list { padding-left: 1.15rem; margin: .55rem 0 0; }
.clean-list li + li { margin-top: .35rem; }

.confidence {
  display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: baseline;
  padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .82rem;
}
.confidence strong { color: var(--primary); }

.spec-grid {
  overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
}
.spec { min-height: 110px; padding: 1rem; background: var(--surface); }
.spec span { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.spec strong { display: block; color: var(--text); font-size: .96rem; line-height: 1.35; }

.pros-cons { display: grid; gap: .8rem; }
.pros, .cons { padding: 1.15rem; border-radius: var(--radius); }
.pros { background: #edf4ef; border: 1px solid #cbdcd0; }
.cons { background: #f8eeeb; border: 1px solid #e5cdc6; }
.pros h3 { color: var(--positive); }
.cons h3 { color: var(--negative); }

.table-wrap {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(54,38,28,.04);
}
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: .9rem .95rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { background: var(--primary-strong); color: #fffdf9; font-size: .77rem; letter-spacing: .03em; }
tbody th { width: 24%; color: var(--text); background: #f7f2ec; font-size: .85rem; }
td { color: var(--muted); font-size: .9rem; }
tr:last-child th, tr:last-child td { border-bottom: 0; }

.source-list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.source-list li { padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
.source-list a { font-weight: 750; }
.source-list small { display: block; margin-top: .28rem; color: var(--muted); }

.aff-note { max-width: 720px; margin-top: .6rem; color: var(--muted); font-size: .76rem; }
.cta-panel {
  position: relative; overflow: hidden; margin-top: 1rem; padding: 1.35rem;
  background: var(--primary-strong); color: #fffdf9; border-radius: 20px;
}
.cta-panel::after { content: ""; position: absolute; right: -70px; top: -90px; width: 210px; height: 210px; border-radius: 50%; background: rgba(201,135,82,.16); }
.cta-panel h3, .cta-panel p, .cta-panel .actions { position: relative; z-index: 1; }
.cta-panel p { color: rgba(255,253,249,.72); }
.cta-panel .aff-note a { color: #fffdf9 !important; }

.faq-list { display: grid; gap: .7rem; }
.faq-item { padding: 1rem 1.05rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.faq-item h2, .faq-item h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.faq-item p { margin: 0; color: var(--muted); }

.notice { padding: 1rem; background: #fff2df; border: 1px solid #e6c79d; border-radius: 13px; color: #62411f; }

.site-footer { margin-top: 4rem; background: #e9e2da; border-top: 1px solid var(--border); }
.footer-inner { width: min(100%, var(--content-width)); margin: 0 auto; padding: 2.5rem .8rem; display: grid; gap: 1.5rem; }
.footer-inner > div > strong { font-family: var(--font-display); font-size: 1.15rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-content: flex-start; }
.footer-links a { color: var(--muted); font-size: .82rem; }
.footer-copy { max-width: 650px; margin: .65rem 0 0; color: var(--muted); font-size: .78rem; }

@media (min-width: 600px) {
  .container, .narrow { width: min(calc(100% - 2.5rem), var(--content-width)); }
  .header-inner, .footer-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
  .actions { flex-direction: row; flex-wrap: wrap; }
  .grid-2, .pros-cons, .best-not { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .verdict { padding: 1.7rem; }
}

@media (min-width: 840px) {
  .header-inner { min-height: 76px; }
  .desktop-nav { display: flex; align-items: center; gap: 1.35rem; }
  .desktop-nav a { color: var(--muted); font-size: .82rem; font-weight: 800; text-decoration: none; }
  .desktop-nav a:hover { color: var(--text); }
  .mobile-menu { display: none; }
  .hero { padding: 6.3rem 0 5rem; }
  .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 4.4rem; }
  .section { padding: 4.7rem 0; }
  .page-head { padding: 4.6rem 0 3.2rem; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .verdict-grid { grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); gap: 2rem; }
  .spec-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .footer-inner { grid-template-columns: 1.2fr .8fr; gap: 2.5rem; }
  .footer-links { justify-content: flex-end; }
}

@media (min-width: 1100px) {
  .hero h1 { font-size: 5.9rem; }
  .card { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Phase B local Site Pack additions — deliberately not promoted to Starter V0.1 */
.anchor-section { scroll-margin-top: 96px; }
.product-image { object-fit: contain !important; background: #fffaf5 !important; }
.product-intro-grid { display: grid; gap: .9rem; align-items: stretch; }
.product-media { display:flex; align-items:center; justify-content:center; min-height:280px; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.product-media img { width:100%; max-height:430px; object-fit:contain; }
.price-panel { display:grid; gap:1rem; align-content:center; padding:1.25rem; background:var(--primary-strong); color:#fffdf9; border-radius:var(--radius); }
.price-panel .eyebrow { color:#efb987; }
.price-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; }
.price-main { font-family:var(--font-display); font-size:2.3rem; line-height:1; }
.price-regular { color:rgba(255,255,255,.56); text-decoration:line-through; }
.snapshot { margin:.5rem 0 0; color:var(--muted); font-size:.76rem; font-weight:750; }
.price-panel .snapshot,.price-panel .data-note { color:rgba(255,253,249,.72); }
.data-note { margin:0; font-size:.8rem; }
.compat-card { padding:1.15rem; background:#f3eee8; border:1px solid var(--border); border-radius:var(--radius); }
.card-price { display:flex; gap:.45rem; align-items:baseline; margin:.85rem 0 0; }
.card-price strong { color:var(--text); font-family:var(--font-display); font-size:1.35rem; }
.card-price span { font-size:.72rem; color:var(--muted); }
.setup-grid { display:grid; gap:.75rem; }
.setup-step { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:inherit; text-decoration:none; }
.setup-step:hover { border-color:#bda996; }
.setup-step p { margin:0; color:var(--muted); }
.setup-number { width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%; background:var(--primary-strong); color:#fff; font-weight:900; }
.center-action { margin-top:1rem; }
.inline-links { font-weight:700; }
@media (min-width: 700px) {
  .product-intro-grid { grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr); }
  .setup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1000px) {
  .setup-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .setup-step { grid-template-columns:1fr; }
}

/* Conversion CTA pass — local to OutIn Review Site Pack. */
.price-cta { margin-top: .15rem; }
.price-cta .btn { width: 100%; justify-content: center; background: #fffdf9; color: var(--primary-strong); border-color: #fffdf9; }
.price-cta .btn:hover { background: #f6efe5; border-color: #f6efe5; }

.inline-affiliate-cta,
.affiliate-strip,
.compare-choice-cta {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
  margin: 1.1rem 0 2rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * .78);
  background: var(--surface);
}
.inline-affiliate-cta strong,
.affiliate-strip strong,
.compare-choice-cta strong { display: block; margin-bottom: .18rem; }
.inline-affiliate-cta span,
.affiliate-strip span,
.compare-choice-cta span { color: var(--muted); font-size: .92rem; }
.inline-affiliate-cta .actions,
.compare-choice-cta .actions { margin-top: 0; }
.affiliate-strip { background: #f7f1e8; border-color: rgba(94,70,49,.18); }
.affiliate-strip .btn { flex: 0 0 auto; }

.mobile-sticky-cta { display: none; }

@media (min-width: 700px) {
  .inline-affiliate-cta,
  .affiliate-strip,
  .compare-choice-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.05rem 1.2rem; }
  .inline-affiliate-cta .actions,
  .compare-choice-cta .actions { flex-wrap: nowrap; }
}

@media (max-width: 699px) {
  body.page-product-review { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .62rem 1rem calc(.62rem + env(safe-area-inset-bottom));
    background: rgba(255,253,249,.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 28px rgba(45,35,27,.10);
    backdrop-filter: blur(10px);
  }
  .mobile-sticky-copy { min-width: 0; display: grid; line-height: 1.12; }
  .mobile-sticky-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
  .mobile-sticky-copy span { color: var(--muted); font-size: .82rem; margin-top: .12rem; }
  .mobile-sticky-cta .btn { padding: .68rem .9rem; white-space: nowrap; font-size: .88rem; }
}