/* WebMogul design system: retro-modern, cobalt + amber on paper */
:root {
  --paper: #f6f4ec;
  --card: #fffdf7;
  --ink: #151d33;
  --ink-soft: #4a5268;
  --cobalt: #2547e8;
  --cobalt-dark: #1a35b8;
  --amber: #ffb020;
  --amber-soft: #fff3d6;
  --green: #0d7a55;
  --line: #e2ddcd;
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  font-size: 17px;
}
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
/* .hero and .site-bar sit ON the .wrap element, not inside it. A `padding: Y 0`
   shorthand on them resets .wrap's horizontal padding to zero, which put the logo
   and the h1 flush against the viewport edge at every width below 1060px while
   every other section kept its gutter. Use padding-block on anything that shares
   an element with .wrap, never the padding shorthand. */
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 clamp(24px, 4.5vw, 56px); }
.narrow { max-width: 760px; }

/* Ticker */
.ticker {
  background: var(--ink);
  color: #f6f4ec;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker span { display: inline-block; padding-left: 100%; animation: tick 38s linear infinite; }
@keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Header */
header.site {
  border-bottom: 2px solid var(--ink);
  background: var(--card);
  position: sticky; top: 0; z-index: 50;
}
.site-bar { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 18px; }
.logo { font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo .mogul { color: var(--cobalt); }
.logo .cursor { display: inline-block; width: .55em; height: 1.05em; background: var(--amber); vertical-align: text-bottom; margin-left: 3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
nav.main { display: flex; gap: 20px; flex-wrap: wrap; }
nav.main a { color: var(--ink); font-weight: 500; font-size: 15px; }
nav.main a:hover { color: var(--cobalt); }
.est {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 10px;
  background: var(--amber-soft); white-space: nowrap;
}

/* Hero */
.hero { padding-block: 64px 56px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; }
.hero h1 em { font-style: normal; color: var(--cobalt); }
.hero p.lede { font-size: 19px; color: var(--ink-soft); margin: 0 0 26px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 10px; font-weight: 600; font-size: 16px;
  border: 2px solid var(--ink); transition: transform .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn.primary { background: var(--cobalt); color: #fff; border-color: var(--cobalt-dark); box-shadow: 3px 3px 0 var(--ink); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* Retro browser card */
.browser { transform: rotate(2deg); border: 2px solid var(--ink); border-radius: 12px; background: var(--card); box-shadow: 8px 8px 0 rgba(21,29,51,.18); overflow: hidden; }
.browser .chrome { display: flex; align-items: center; gap: 8px; background: var(--ink); padding: 9px 12px; }
.browser .dot { width: 11px; height: 11px; border-radius: 50%; }
.browser .dot.r { background: #ff5f57; } .browser .dot.y { background: var(--amber); } .browser .dot.g { background: #28c840; }
.browser .url { font-family: var(--mono); font-size: 11.5px; color: #cfd6ea; background: #2a3352; border-radius: 6px; padding: 3px 10px; margin-left: 6px; }
.browser .page { padding: 22px 24px; }
.browser .page h3 { margin: 0 0 6px; font-size: 18px; }
.browser .page p { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.browser .bar { height: 10px; border-radius: 5px; background: var(--line); margin: 8px 0; }
.browser .bar.short { width: 62%; }
.browser .stamp { font-family: var(--mono); font-size: 11px; color: var(--green); border: 1.5px dashed var(--green); border-radius: 8px; padding: 4px 8px; display: inline-block; margin-top: 8px; }

/* Sections */
section.band { padding: 52px 0; }
section.band.alt { background: var(--card); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 10px; }
h2.sec { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; margin: 0 0 12px; }
p.sec-sub { color: var(--ink-soft); max-width: 640px; margin: 0 0 30px; }

.grid { display: grid; gap: 22px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 22px; box-shadow: 4px 4px 0 rgba(21,29,51,.12); display: flex; flex-direction: column;
}
section.band.alt .card { box-shadow: 4px 4px 0 rgba(21,29,51,.08); }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); flex: 1; }
.card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--cobalt); text-transform: uppercase; margin-bottom: 10px; }
.card a.more { font-weight: 600; font-size: 15px; }
.card.soon { opacity: .65; border-style: dashed; box-shadow: none; }

/* Newsletter */
.news { background: var(--ink); color: #f6f4ec; border-radius: 18px; padding: 40px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
.news h2 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.02em; }
.news p { color: #b9c1d9; margin: 0; font-size: 15.5px; }
.news form { display: flex; gap: 10px; }
.news input[type=email] { flex: 1; padding: 13px 16px; border-radius: 10px; border: none; font-size: 15px; font-family: inherit; }
.news button { padding: 13px 20px; border-radius: 10px; border: none; background: var(--amber); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; }

/* Article */
.article-head { padding: 54px 0 34px; border-bottom: 2px solid var(--ink); background: var(--card); }
.article-head h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.03em; margin: 10px 0 14px; }
.byline { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
article.body { padding: 40px 0 30px; }
article.body h2 { font-size: 27px; letter-spacing: -.02em; margin: 38px 0 12px; }
article.body h3 { font-size: 20px; margin: 28px 0 10px; }
article.body p, article.body li { color: #2b3350; }
article.body ul, article.body ol { padding-left: 24px; }

.verdict { border: 2px solid var(--ink); border-left: 10px solid var(--cobalt); background: var(--card); border-radius: 12px; padding: 20px 24px; margin: 26px 0; }
.verdict .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.verdict p { margin: 8px 0 0; font-size: 16.5px; }
.rating { font-family: var(--mono); font-size: 12.5px; margin-top: 10px; color: var(--ink-soft); }
.rating strong { color: var(--ink); }

.cta-box { border: 2px solid var(--ink); background: var(--amber-soft); border-radius: 12px; padding: 20px 24px; margin: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cta-box p { margin: 0; font-weight: 600; }
.cta-box .btn { flex-shrink: 0; }

table.spec { width: 100%; border-collapse: collapse; margin: 22px 0; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; font-size: 15px; }
table.spec th, table.spec td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); }
table.spec th { background: var(--ink); color: #f6f4ec; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
table.spec tr:last-child td { border-bottom: none; }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.pc { border: 2px solid var(--ink); border-radius: 12px; background: var(--card); padding: 18px 22px; }
.pc h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pc.pros h4 { color: var(--green); } .pc.cons h4 { color: #c0392b; }
.pc ul { margin: 0; padding-left: 20px; font-size: 15px; }
.pc li { margin-bottom: 6px; }

.placeholder {
  border: 2px dashed var(--cobalt); border-radius: 12px; background: #eef1ff;
  padding: 18px 22px; margin: 22px 0; font-family: var(--mono); font-size: 13.5px; color: var(--cobalt-dark);
}

.disclosure { border-top: 2px solid var(--line); margin-top: 40px; padding-top: 18px; font-size: 13.5px; color: var(--ink-soft); }

.related { padding: 10px 0 50px; }
.related h2 { font-size: 22px; margin: 0 0 16px; }

/* Tools */
.tool-panel { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); padding: 26px; margin: 26px 0; box-shadow: 4px 4px 0 rgba(21,29,51,.12); }
.tool-panel textarea { width: 100%; font-family: var(--mono); font-size: 13px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 10px; box-sizing: border-box; background: #fff; }
.tool-panel button.go { font: inherit; font-weight: 700; padding: 12px 22px; border-radius: 10px; border: 2px solid var(--cobalt-dark); background: var(--cobalt); color: #fff; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; border-radius: 999px; padding: 3px 10px; border: 1.5px solid; display: inline-block; }
.chip.ok { color: var(--green); border-color: var(--green); background: #e9f6f0; }
.chip.bad { color: #c0392b; border-color: #c0392b; background: #fdeeea; }
.chip.meh { color: #8a6d00; border-color: #b8940a; background: var(--amber-soft); }
pre.robots { font-family: var(--mono); font-size: 12.5px; background: var(--ink); color: #e8ecf9; border-radius: 10px; padding: 16px 18px; overflow-x: auto; }

/* Checklist */
.check-progress { position: sticky; top: 76px; z-index: 5; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 14px 18px; margin: 22px 0; box-shadow: 4px 4px 0 rgba(21,29,51,.12); }
.check-progress .bar-outer { height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; margin-top: 8px; }
.check-progress .bar-inner { height: 100%; background: var(--green); width: 0%; transition: width .25s ease; }
.check-item { display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding: 12px 4px; }
.check-item input[type=checkbox] { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--green); flex-shrink: 0; cursor: pointer; }
.check-item label { cursor: pointer; }
.check-item .why { display: block; font-size: 13.5px; color: var(--ink-soft); }
.check-item.done label { text-decoration: line-through; opacity: .6; }

/* Footer */
footer.site { background: var(--ink); color: #b9c1d9; padding: 46px 0 30px; margin-top: 40px; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
footer.site h4 { color: #f6f4ec; font-size: 15px; margin: 0 0 12px; }
footer.site a { color: #b9c1d9; display: block; margin-bottom: 8px; font-size: 14.5px; }
footer.site a:hover { color: #fff; }
footer.site .fine { border-top: 1px solid #2a3352; margin-top: 34px; padding-top: 18px; font-size: 12.5px; color: #8891ab; font-family: var(--mono); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-block: 44px 40px; }
  .browser { transform: rotate(1deg); }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; }
  .news { grid-template-columns: 1fr; padding: 30px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .check-progress { top: 70px; }
}
@media (max-width: 560px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .news form { flex-direction: column; }
  /* The hero mock is rotated, and a rotated box is wider than its own width.
     Straighten it on phones so it cannot push the page sideways. */
  .browser { transform: none; }
  /* Nav used to be display:none here, which left phones with no navigation at
     all. Give it its own scrollable line instead. */
  .site-bar { flex-wrap: wrap; padding-block: 12px; gap: 8px 14px; }
  .est { display: none; }
  nav.main {
    order: 3; flex-basis: 100%; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    gap: 18px; padding-bottom: 2px; scrollbar-width: none;
  }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { white-space: nowrap; font-size: 14.5px; }
}

/* Skip link, keyboard users land on it first */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: 0 0 10px 0; font-weight: 600; font-size: 15px;
}
.skip:focus { left: 0; text-decoration: none; }

/* Breadcrumbs */
.crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-soft); margin: 0 0 14px; line-height: 1.7;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--cobalt); }
.crumbs .sep { padding: 0 8px; opacity: .55; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* On-this-page table of contents */
.toc {
  border-left: 3px solid var(--amber); background: var(--card);
  border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 0 0 30px;
}
.toc .toc-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 5px; font-size: 15px; }
.toc li:last-child { margin-bottom: 0; }

/* Labelled fields inside a tool panel */
.tool-panel .fld { display: block; margin-bottom: 16px; }
.tool-panel .fld > span {
  display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px;
}
.tool-panel .fld input[type="text"] {
  width: 100%; font-family: var(--mono); font-size: 13px; padding: 12px 14px;
  border: 2px solid var(--ink); border-radius: 10px; box-sizing: border-box; background: #fff;
}

/* Search result previews */
.serp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 6px; }
.serp-lab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
.serp {
  background: #fff; border: 2px solid var(--ink); border-radius: 12px;
  padding: 16px 18px; font-family: Arial, Helvetica, sans-serif; overflow: hidden;
}
.serp.mobile { max-width: 100%; }
.serp-url { font-size: 12px; color: #202124; line-height: 1.4; word-break: break-word; }
.serp-url span { color: #5f6368; }
.serp-title {
  font-size: 20px; line-height: 1.3; color: #1a0dab; margin: 4px 0 4px;
  font-family: Arial, Helvetica, sans-serif;
}
.serp.mobile .serp-title { font-size: 18px; }
.serp-desc { font-size: 14px; line-height: 1.58; color: #4d5156; }

@media (max-width: 760px) {
  .serp-grid { grid-template-columns: 1fr; }
}

/* Wide tables scroll inside their own box rather than widening the page */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }
.tw table.spec { margin: 0; }
pre.robots, pre { overflow-x: auto; }
article.body { overflow-wrap: break-word; }
.check-item label { overflow-wrap: break-word; min-width: 0; }

/* A long button label must wrap rather than widen the page on a phone */
.btn { max-width: 100%; }
.cta-box .btn { flex-shrink: 1; }
@media (max-width: 560px) {
  .cta-box { flex-direction: column; align-items: flex-start; }
  .cta-box .btn { width: 100%; text-align: center; }
  .cta-row { flex-wrap: wrap; }
  .cta-row .btn { width: 100%; text-align: center; }
}

/* The rotated hero mock needs room for its own corners, or it bleeds a few
   pixels past the viewport at tablet and desktop widths. */
.browser { margin: 8px 10px; }

/* ---- The stack directory ---- */
.tierkey { display: grid; gap: 14px; margin: 24px 0 30px; padding: 20px 24px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card); }
.tierkey > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.tierkey p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

.tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px; border: 1.5px solid; display: inline-block; white-space: nowrap; }
.tier.t1 { color: #0d7a55; border-color: #0d7a55; background: #e9f6f0; }
.tier.t2 { color: #1a35b8; border-color: #1a35b8; background: #e8ecfd; }
.tier.t3 { color: #6a6252; border-color: #b8ae96; background: #f2efe4; }

.stackbar { position: sticky; top: 66px; z-index: 20; background: var(--paper);
  border-bottom: 2px solid var(--ink); padding: 12px 0 14px; margin: 26px 0 8px; }
.stackbar .toc-k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.fgroup { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fgroup:last-child { margin-bottom: 0; }
.fbtn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; }
.fbtn:hover { background: var(--amber-soft); }
.fbtn.on { background: var(--ink); color: var(--paper); }

.tool { border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 18px 22px; margin: 16px 0; }
.tool-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tool-head h3 { margin: 0; font-size: 19px; }
.tool p { margin: 0 0 8px; font-size: 15.5px; }
.tool p:last-child { margin-bottom: 0; }
.tool-when { color: var(--ink); }
.tool-catch { color: var(--ink-soft); font-size: 15px; }
.stackcat { margin-bottom: 10px; }
.stackcat[hidden] { display: none; }
.tool[hidden] { display: none; }

@media (max-width: 560px) {
  .tierkey > div { grid-template-columns: 1fr; gap: 6px; }
  .stackbar { position: static; }
}

/* ---- Price change log ---- */
.sweepbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 22px 24px; margin: 26px 0 30px; }
.sweepbox p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.sweepbox .big { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin: 2px 0 6px; }

.tier.k-vendor { color: #c0392b; border-color: #c0392b; background: #fdeeea; }
.tier.k-likely { color: #8a6d00; border-color: #b8940a; background: var(--amber-soft); }
.tier.k-ours   { color: var(--cobalt-dark); border-color: var(--cobalt-dark); background: #e8ecfd; }
.tier.k-first  { color: #6a6252; border-color: #b8ae96; background: #f2efe4; }

.logday { border-left: 3px solid var(--line); padding-left: 20px; margin: 0 0 30px; }
.logentry { border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 18px 22px; margin: 0 0 14px; }
.logentry.k-ours { border-color: var(--cobalt-dark); }
.logmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.logmeta .vendor { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); }
.logentry h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.logentry p { margin: 0; font-size: 15.5px; }

@media (max-width: 760px) {
  .sweepbox { grid-template-columns: 1fr; gap: 16px; }
  .logday { padding-left: 12px; }
}