/* WarrantyOwed — custom layer over Tailwind */
:root { --navy:#14284B; --rust:#B5502A; --cream:#F4F0E8; --stone:#E6E0D3; --ink:#1E1D1A; }
html { scroll-behavior: smooth; }
body { font-size: 18px; line-height: 1.6; }
::selection { background:#F6E3DA; }
.font-display { font-weight: 800; letter-spacing: .01em; }

.logo-mark { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background: var(--rust); border-radius:6px; }
.nav-link { color:#2b2a26; padding:4px 0; border-bottom:3px solid transparent; }
.nav-link:hover { color: var(--rust); }
.nav-link.is-active { border-color: var(--rust); color: var(--navy); }

.btn-rust, .btn-navy, .btn-ghost { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; border-radius:.4rem; padding:.62rem 1.1rem; text-transform:uppercase; letter-spacing:.04em; font-size:.88rem; transition: background .15s, transform .15s; }
.btn-rust { background: var(--rust); color:#fff; }
.btn-rust:hover { background:#8F3C1D; }
.btn-navy { background: var(--navy); color:#fff; }
.btn-navy:hover { background:#0E1C36; }
.btn-ghost { background:#fff; border:2px solid var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color:#fff; }
.btn-rust:active, .btn-navy:active { transform: translateY(1px); }

.badge { display:inline-block; font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .6rem; border-radius:.25rem; }
.badge-ok { background:#DFEEE3; color:#2F6B3E; border:1px solid #b6d6bf; }
.badge-warn { background:#F7EAD0; color:#9A6212; border:1px solid #ecd29b; }
.badge-neutral { background:#ECE7DB; color:#5A564D; border:1px solid #d9d2c0; }
.badge-rust { background: var(--rust); color:#fff; }
.badge-navy { background: var(--navy); color:#fff; }
.badge-line { background:#fff; color: var(--navy); border:1px solid var(--navy); }

.card { background:#FCFAF5; border:1px solid #D9D2C0; border-radius:.6rem; }
.card-hover { transition: transform .18s, box-shadow .18s, border-color .18s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20,40,75,.55); border-color: var(--navy); }

.ad-slot { display:flex; align-items:center; justify-content:center; border:2px dashed #cfc7b2; border-radius:.5rem; background: repeating-linear-gradient(45deg,#f1ede3,#f1ede3 10px,#ece7da 10px,#ece7da 20px); color:#a49c86; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.aff-note { margin-top:.9rem; font-size:.85rem; color:#5A564D; }
.aff-note a { text-decoration: underline; }

.pill { border:2px solid var(--navy); background:#fff; color: var(--navy); border-radius:999px; padding:.38rem .95rem; font-weight:700; font-size:.88rem; white-space:nowrap; transition: background .15s, color .15s; }
.pill:hover { background:#E4E9F2; }
.pill[aria-pressed="true"] { background: var(--navy); color:#fff; }

.hero-bg { background-color: var(--cream); background-image: linear-gradient(rgba(20,40,75,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,40,75,.05) 1px, transparent 1px); background-size: 28px 28px; }

/* Cheat sheet */
.cheat { border:3px solid var(--navy); border-radius:.6rem; background:#fff; overflow:hidden; }
.cheat-head { background: var(--navy); color:#fff; padding:.55rem 1.1rem; font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase; }
.cheat-grid { display:grid; grid-template-columns: 1fr; }
@media (min-width:640px) { .cheat-grid { grid-template-columns: 1fr 1fr; } }
.cheat-cell { padding:1rem 1.1rem; border-top:1px solid #e7e1d2; border-right:1px solid #e7e1d2; }
.cheat-cell .k { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#7b7566; }
.cheat-cell .v { font-weight:700; font-size:1.02rem; line-height:1.3; margin-top:.2rem; }

.warnbox { border:3px solid var(--rust); background:#FBEDE6; border-radius:.6rem; padding:1.1rem 1.25rem; }
.warnbox h2 { color: var(--rust); margin-top:0 !important; font-size:1.5rem !important; }

.shopbox { border:3px solid var(--navy); background:#E4E9F2; border-radius:.6rem; padding:1.4rem; }
.product { background:#fff; border:1px solid #cfd6e4; border-radius:.5rem; padding:1rem; display:flex; flex-direction:column; }
.product .ph { height:84px; border-radius:.35rem; background: repeating-linear-gradient(135deg,#e4e9f2,#e4e9f2 8px,#d8dfec 8px,#d8dfec 16px); display:flex; align-items:center; justify-content:center; color:#6f7b95; font-weight:800; letter-spacing:.1em; font-size:.7rem; text-transform:uppercase; }

/* Article typography */
.article { font-size: 19px; line-height: 1.7; color:#26251f; }
.article > * + * { margin-top: 1.05em; }
.article h2 { font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.015em; font-size:2rem; line-height:1.05; color: var(--navy); margin-top:2em; scroll-margin-top:90px; }
.article h3 { font-weight:700; font-size:1.18rem; color: var(--ink); margin-top:1.4em; }
.article a { color: var(--rust); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.article ul, .article ol { padding-left:1.3em; }
.article ul { list-style: square; }
.article ol { list-style: none; counter-reset: step; padding-left:0; }
.article ol.steps > li { counter-increment: step; position:relative; padding-left:3.1rem; margin-top:1.1rem; }
.article ol.steps > li::before { content: counter(step); position:absolute; left:0; top:-.1rem; width:2.2rem; height:2.2rem; border-radius:.35rem; background: var(--navy); color:#fff; font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.35rem; display:flex; align-items:center; justify-content:center; }
.article ol.steps > li > strong:first-child { display:block; font-size:1.08rem; color: var(--navy); }
.article li::marker { color: var(--rust); }
.article table { width:100%; border-collapse:collapse; font-size:16px; }
.article th, .article td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid #e2dccb; vertical-align:top; }
.article th { background:#ECE7DB; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
.callout-note { background:#E4E9F2; border-left:5px solid var(--navy); padding:.9rem 1.1rem; border-radius:.35rem; font-size:17px; }
.toc a { color:#2b2a26; text-decoration:none; }
.toc a:hover { color: var(--rust); text-decoration: underline; }

/* Database table */
.dbwrap { overflow-x:auto; border:2px solid var(--navy); border-radius:.6rem; background:#fff; }
table.db { width:100%; min-width:1200px; border-collapse:collapse; font-size:15px; }
table.db thead th { position:sticky; top:0; background: var(--navy); color:#fff; text-align:left; padding:.75rem .8rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
table.db th[data-sort] { cursor:pointer; user-select:none; }
table.db th[data-sort]:hover { background:#0E1C36; }
table.db th .arr { opacity:.5; margin-left:.25rem; }
table.db td { padding:.75rem .8rem; border-top:1px solid #e7e1d2; vertical-align:top; }
table.db tbody tr:nth-child(even) { background:#FAF8F2; }
table.db tbody tr:hover { background:#F1EDE1; }
table.db .bn { font-weight:800; font-size:1.02rem; color: var(--navy); }
table.db .sub { font-size:.82rem; color:#6a6557; margin-top:.15rem; }
.vdot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.35rem; }
.v-read { background:#2F6B3E; } .v-partial { background:#C98F1F; } .v-confirm { background:#B5502A; }

@media (max-width:640px) { body{font-size:17px;} .article{font-size:18px;} .article h2{font-size:1.75rem;} }
/* Optional income hook: the digital "Claim Kit" box is hidden until you've created the product.
   To turn it on, delete the next line. */
.claim-kit { display:none; }

/* Placeholder ad boxes are hidden: AdSense Auto ads places ads automatically.
   To use manual ad units later, remove this line and paste <ins class="adsbygoogle"> code into each .ad-slot. */
.ad-slot { display:none !important; }