/* dealdates.app — one stylesheet for the static pages.
   No external requests (no web fonts, no icons): the privacy page says the
   site loads nothing from anywhere else, and a system serif stack looks
   right on every platform that matters. Colour is the digest's own palette
   — navy header, terracotta for what is due, sage for the meta line — so
   the site and the email read as one thing. No animation, by choice. */

:root{
  --ink:#141a21; --muted:#5b6675; --line:#e6dfd3; --hair:#efe9df;
  --bg:#fbf8f3; --paper:#ffffff; --soft:#f3ede3;
  --accent:#0b3d64; --accent-ink:#082c49;
  --terra:#c8642d; --terra-ink:#a8481a; --terra-bg:#fbf0e8;
  --sage:#4a7c6f; --sage-bg:#e8f0ec; --flag:#b3261e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}

/* Header: the wordmark with a terracotta mark, an eyebrow, the serif headline. */
header{padding:52px 0 8px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.2px;color:var(--accent);font-size:18px;text-decoration:none}
.brand::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--terra);transform:rotate(45deg) scale(.82)}
.eyebrow{display:block;margin:26px 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
h1{font:400 40px/1.15 var(--serif);letter-spacing:-.5px;margin:10px 0 16px;color:var(--accent-ink)}
h2{font:400 26px/1.25 var(--serif);letter-spacing:-.2px;margin:48px 0 12px;color:var(--accent-ink);position:relative;padding-top:14px}
h2::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--terra);border-radius:2px}
h3{font:600 16px/1.4 var(--sans);margin:22px 0 6px;color:var(--ink)}
p,li{margin:0 0 15px}
ol,ul{padding-left:22px}
li{margin-bottom:9px}
.lead,.sub{font-size:19px;color:var(--muted);margin-bottom:24px}
.sub{font-size:17px}
a{color:var(--accent);text-decoration-color:rgba(11,61,100,.35);text-underline-offset:2px}
a:hover{color:var(--terra-ink);text-decoration-color:var(--terra)}
code{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font:400 14px var(--mono)}
strong{color:var(--ink)}

/* The sample digest: an email card — navy brand bar, paper body, the flag in terracotta. */
.sample{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:0;margin:26px 0;overflow:hidden;box-shadow:0 1px 0 rgba(20,26,33,.04),0 10px 30px -18px rgba(11,61,100,.35)}
.sample::before{content:"DEAL DATES · TODAY";display:block;background:var(--accent);color:#fff;font:700 11px/1 var(--sans);letter-spacing:.14em;padding:11px 18px}
.sample pre{margin:0;padding:16px 18px;overflow-x:auto;font:400 13px/1.6 var(--mono);white-space:pre;color:#333}
.sample b{color:var(--terra);font-weight:700}

/* Numbered steps: serif numerals in the margin, like a printed guide. */
ol.steps{list-style:none;padding:0;margin:8px 0 20px;counter-reset:step}
ol.steps>li{position:relative;padding:4px 0 6px 58px;margin:0 0 14px;counter-increment:step;min-height:44px}
ol.steps>li::before{content:counter(step);position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:50%;background:var(--terra-bg);color:var(--terra-ink);font:400 22px/42px var(--serif);text-align:center}
.step{position:relative;padding:22px 24px 12px;margin:26px 0;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.step h2{margin-top:0;padding-top:0;font-size:22px}
.step h2::before{display:none}
.step>h2::after{content:"";display:block;width:34px;height:3px;background:var(--terra);border-radius:2px;margin-top:10px}

/* Notes and callouts. */
.record{margin:-8px 0 8px;font-size:15px;color:var(--muted)}
.record .status{margin-right:4px}
/* "Email me a sample digest": one field, one button, no script. */
.sample-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-10px 0 28px}
.sample-form label{flex:1 1 100%;font-size:15px;color:var(--muted)}
.sample-form input[type=email]{flex:1 1 240px;font:400 16px var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.sample-form input[type=email]:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
.sample-form button{font:700 15px var(--sans);padding:11px 18px;border:0;border-radius:8px;background:var(--terra);color:#fff;cursor:pointer}
.sample-form button:hover{background:var(--terra-ink)}
.sample-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{border-left:3px solid var(--terra);background:var(--terra-bg);border-radius:0 8px 8px 0;padding:14px 18px;margin:24px 0;font-size:15px;color:#5a4a3f}
.note strong{color:var(--ink)}
.fwd{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:18px 0;font-size:15px}
.fwd h3:first-child{margin-top:0}
.status{display:inline-block;background:var(--sage-bg);color:var(--sage);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}

/* Tables: definition-style, warm rules, navy labels. */
table{border-collapse:collapse;width:100%;margin:14px 0 22px;font-size:15px;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
th{color:var(--accent-ink);font-weight:600;white-space:nowrap;width:32%;background:var(--soft)}
table.plain{background:transparent;border:0;border-radius:0}
table.plain td{padding:4px 14px 4px 0;border:0}

/* Footer. */
footer{margin-top:64px;border-top:1px solid var(--line);padding:22px 0 64px;font-size:14px;color:var(--muted)}
footer a{margin-right:16px}

@media (max-width:560px){
  h1{font-size:30px} h2{font-size:23px} body{font-size:16px}
  th,td{display:block;width:auto;padding:4px 14px}
  th{padding-top:12px;background:transparent} td{padding-bottom:12px;border-bottom:1px solid var(--hair)}
  tr:last-child td{border-bottom:0}
  ol.steps>li{padding-left:52px}
}