/* blogby.email. Big, bold and warm. System fonts only, so nothing swaps or jumps as the page loads. */
:root{
  --bg:#fbf7f1; --card:#fff; --ink:#1a1410; --body:#4a4038; --soft:#8a7d72; --line:#eadfd3;
  --accent:#e8590c; --accent-2:#d6336c; --accent-dark:#c2410c; --green:#2f6f5e; --tint:#fff1e6;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 18px/1.6 var(--ui)}
a{color:var(--accent-dark)}
img{max-width:100%;height:auto;display:block}
.i{width:1em;height:1em;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp{position:absolute;left:-9999px}
section{padding:0 16px}

/* Header */
.top{max-width:1160px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:800 21px var(--ui);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mark{width:40px;height:40px;flex:none}
.brand{font-size:23px;letter-spacing:-.025em}
.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){color:var(--ink);text-decoration:none;font:600 16px var(--ui)}
.nav a:not(.btn):hover{color:var(--accent-dark)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:13px 24px;font:700 17px var(--ui);text-decoration:none;cursor:pointer}
.btn:hover{background:#000}
.btn .i{width:19px;height:19px}
.btn.sm{padding:9px 18px;font-size:15px}
.btn.big{padding:18px 32px;font-size:19px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:#fff}

/* Hero */
.hero{max-width:1160px;margin:0 auto;text-align:center;padding-top:48px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--tint);color:var(--accent-dark);border:1px solid #fcd9bf;border-radius:999px;padding:8px 16px;font:700 15px var(--ui);margin:0 0 26px}
.pill .i{width:17px;height:17px}
h1{margin:0 auto;max-width:13ch;font:900 clamp(48px,8.4vw,108px)/.98 var(--ui);letter-spacing:-.045em;color:var(--ink)}
.hl{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:680px;margin:26px auto 0;font:400 clamp(19px,2.1vw,23px)/1.55 var(--ui);color:var(--body)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.small{margin:18px auto 0;font-size:15.5px;color:var(--soft);max-width:560px}

/* Email to page picture, drawn in HTML so it's sharp and loads with the page */
.show{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;max-width:1000px;margin:60px auto 0;text-align:left}
.compose,.page{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(80,40,10,.35)}
.compose{overflow:hidden;transform:rotate(-1.5deg)}
.bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#f6efe7;border-bottom:1px solid var(--line);font-size:14px}
.bar span{width:11px;height:11px;border-radius:50%;background:#e2d5c7}
.bar b{margin-left:8px;color:var(--ink)}
.field{display:flex;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.field i{font-style:normal;color:var(--soft);width:56px;flex:none}
.to{background:var(--tint);color:var(--accent-dark);border-radius:6px;padding:0 7px;font-weight:600;box-shadow:0 0 0 4px rgba(232,89,12,.08)}
.body{padding:16px 18px 6px;font-size:15.5px}
.body p{margin:0 0 12px}
.ph{height:84px;border-radius:12px;background:linear-gradient(135deg,#ffd8a8,#fcc2d7);display:grid;place-items:center;color:#fff;margin:0 0 12px}
.ph .i{width:30px;height:30px}
.ph.big{height:120px}
.tags{color:var(--accent-dark);font-weight:600}
.send{margin:4px 18px 18px;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font:700 15px var(--ui);padding:9px 18px;border-radius:999px}
.send .i{width:16px;height:16px}
.plane{width:160px;display:grid;place-items:center}
.plane svg{width:160px;height:100px;overflow:visible}
.page{padding:22px 24px;transform:rotate(1.2deg)}
.pg-top{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink)}
.av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--green),#7fa98f);color:#fff;font:800 13px var(--ui);display:grid;place-items:center}
.pg-date{margin:18px 0 2px;font-size:13.5px;color:var(--soft)}
.page h3{margin:0 0 10px;font:800 25px/1.2 var(--ui);color:var(--ink);letter-spacing:-.02em}
.page p{font-size:15.5px;margin:0 0 12px}
.pg-tags{display:flex;gap:8px;margin:0}
.pg-tags span{background:#eef4f1;color:var(--green);border-radius:999px;padding:2px 11px;font-size:13.5px;font-weight:600}

/* Built on Cloudflare strip */
.cf{margin-top:80px}
.cf-in{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 30px}
.badge{width:254px;height:88px;border-radius:10px;flex:none}
.cf h2{margin:0 0 4px;font:800 26px/1.2 var(--ui);color:var(--ink);letter-spacing:-.02em}
.cf p{margin:0;font-size:17px}

/* Why */
.why{max-width:860px;margin:110px auto 0;text-align:center}
.big-p{font:500 clamp(22px,2.7vw,30px)/1.45 var(--ui);color:var(--ink);margin:0 0 22px;letter-spacing:-.01em}
.big-p em{font-style:italic;color:var(--accent-dark)}
.wave{height:14px;max-width:220px;margin:46px auto 0;background:radial-gradient(circle at 10px -4px,transparent 9px,var(--line) 10px,var(--line) 13px,transparent 14px) 0 0/20px 14px repeat-x}

/* to: line */
.to-line{max-width:900px;margin:70px auto 0;text-align:center}
.to-big{margin:0;font:900 clamp(34px,5.6vw,68px)/1.05 var(--ui);letter-spacing:-.04em;color:var(--ink)}
.to-big span{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Headings */
.h2{margin:0 auto 34px;max-width:20ch;text-align:center;font:900 clamp(34px,4.6vw,56px)/1.05 var(--ui);letter-spacing:-.035em;color:var(--ink)}
.h2.left{text-align:left;margin-left:0}

/* How */
.how{max-width:1100px;margin:120px auto 0}
.watch{max-width:1000px;margin:120px auto 0;text-align:center}.watch .sub{max-width:40ch;margin:-18px auto 30px;font-size:20px}.vid{margin:0}.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(80,40,10,.35);background:#fbf7f1}.watch .cta{margin-top:26px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px}
.steps .n{position:absolute;top:22px;right:24px;font:900 54px/1 var(--ui);color:#f3e7da}
.steps .ic,.card .ic,.updates .ic{width:54px;height:54px;border-radius:16px;background:var(--tint);color:var(--accent-dark);display:grid;place-items:center;margin-bottom:18px}
.steps .ic .i,.card .ic .i,.updates .ic .i{width:26px;height:26px}
.steps b{display:block;font:800 21px/1.25 var(--ui);color:var(--ink);margin-bottom:8px}
.steps p{margin:0;font-size:16.5px}
.soon{display:flex;gap:16px;align-items:flex-start;max-width:760px;margin:30px auto 0;background:#eef4f1;border:1px solid #cfe2d9;border-radius:18px;padding:18px 22px;color:var(--green)}
.soon>.i{width:26px;height:26px;margin-top:2px}
.soon b{color:#1f4d41;font-size:17px}
.soon p{margin:4px 0 0;font-size:16px;color:#3d5f55}
.soon a{color:#1f4d41;font-weight:700}

/* Looks */
.looks{max-width:1100px;margin:120px auto 0;display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}
.looks-text p{font-size:18.5px;margin:0 0 16px}
.shot{margin:0}
.shot img{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(80,40,10,.35)}
.shot figcaption{font-size:14px;color:var(--soft);margin-top:10px;text-align:center}

/* Features */
.features{max-width:1100px;margin:120px auto 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card b{display:block;font:800 18px/1.3 var(--ui);color:var(--ink);margin-bottom:6px}
.card p{margin:0;font-size:15.5px;line-height:1.5}

/* HEY World */
.vs{max-width:860px;margin:120px auto 0;text-align:center}
.vs .lead{margin-top:0}
.table{margin:34px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left}
.tr{display:grid;grid-template-columns:1fr 1.3fr 1.1fr;border-top:1px solid var(--line)}
.tr:first-child{border-top:0}
.tr span{padding:16px 20px;font-size:16.5px;display:flex;gap:8px;align-items:flex-start}
.tr span:first-child{font-weight:700;color:var(--ink)}
.tr span:nth-child(2){background:#fff8f2;color:var(--ink);font-weight:600}
.th span{font:800 17px var(--ui);color:var(--ink)}
.ok{color:var(--green);width:20px;height:20px;margin-top:2px}
.note{font-size:13.5px;color:var(--soft);margin-top:14px}

/* Paul */
.me{max-width:900px;margin:120px auto 0;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:40px 44px}
.me img{width:170px;height:170px;border-radius:50%;border:6px solid var(--tint)}
.eyebrow{margin:0 0 6px;font:800 14px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark)}
.me h2{margin:0 0 12px;font:900 40px/1.1 var(--ui);letter-spacing:-.03em;color:var(--ink)}
.me p{margin:0 0 12px;font-size:18px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none}

/* Updates */
.updates{margin-top:120px}
.up-in{max-width:900px;margin:0 auto;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:28px;padding:54px 30px;color:#fff}
.updates .ic{margin:0 auto 16px;background:rgba(255,255,255,.18);color:#fff}
.up-in h2{margin:0;font:900 clamp(34px,4.6vw,52px)/1.05 var(--ui);letter-spacing:-.035em}
.up-in>p{max-width:560px;margin:14px auto 0;font-size:18px;color:#fff3ea}
.up-in form{display:flex;gap:10px;max-width:520px;margin:28px auto 0;background:#fff;border-radius:999px;padding:6px}
.up-in input[type=email]{flex:1;min-width:0;border:0;background:transparent;font:16px var(--ui);padding:0 18px;color:var(--ink);outline:none}
.up-in .formmsg{background:#fff;color:var(--accent-dark);border-radius:12px;display:inline-block;padding:8px 14px;font-weight:600}

/* FAQ */
.faq{max-width:800px;margin:120px auto 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font:700 18.5px var(--ui);color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--ui);color:var(--accent-dark)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 22px 20px;font-size:17px}
.faq details ul{margin:-8px 0 0;padding:0 22px 16px 44px;font-size:17px}.faq details li{margin-bottom:6px}.faq details a{color:var(--accent-dark)}

/* End */
.end{max-width:900px;margin:120px auto 0;text-align:center}
.end h2{margin:0 0 28px;font:900 clamp(36px,5.4vw,64px)/1.03 var(--ui);letter-spacing:-.04em;color:var(--ink)}

/* Footer */
.foot{margin-top:110px;border-top:1px solid var(--line);padding:28px 16px 40px}
.foot-in{max-width:1100px;margin:0 auto;font-size:15px}
.foot p{margin:0 0 8px}
.foot .tm{font-size:12.5px;color:var(--soft)}

/* Thanks page */
.thanks{max-width:720px;margin:80px auto;text-align:center}
.thanks .ic{width:80px;height:80px;border-radius:24px;margin:0 auto 24px;background:var(--tint);color:var(--accent-dark);display:grid;place-items:center}
.thanks .ic .i{width:38px;height:38px}
.thanks h1{max-width:none;font-size:clamp(40px,6vw,64px)}

/* Tablet and phone */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .looks{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .nav a:not(.btn){display:none}
  .hero{padding-top:28px}
  .show{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .plane{margin:0 auto;transform:rotate(90deg);width:110px;height:150px}
  .plane svg{width:140px;height:88px}
  .compose,.page{transform:none}
  .cf{margin-top:60px}
  .cf-in{flex-direction:column;text-align:center;padding:24px 20px;gap:18px}
  .watch,.why,.how,.looks,.features,.vs,.me,.updates,.faq,.end{margin-top:80px}
  .steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:12px}
  .card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 18px}
  .card .ic{width:44px;height:44px;border-radius:13px;margin:0;grid-row:span 2}
  .card .ic .i{width:22px;height:22px}
  .brand{font-size:18px;white-space:nowrap}
  .mark{width:34px;height:34px}
  .brand{font-size:20px}
  .btn.sm{white-space:nowrap;padding:8px 14px}
  .tr{grid-template-columns:1fr 1fr}
  .tr span:first-child{grid-column:1/-1;padding-bottom:0;background:none}
  .th span:first-child{display:none}
  .me{grid-template-columns:1fr;text-align:center;padding:32px 22px;gap:20px}
  .me img{margin:0 auto;width:140px;height:140px}
  .up-in{padding:40px 18px}
  .up-in form{flex-direction:column;border-radius:20px}
  .up-in input[type=email]{padding:14px 16px}
  .btn.big{width:100%}
}
.formmsg[hidden]{display:none!important}
.badge-ph{width:88px;height:88px;border-radius:22px;background:#f38020;color:#fff;display:grid;place-items:center;flex:none}
.badge-ph .i{width:48px;height:48px}

/* The installer, blogby.email/install/ (assets/blog-by-email.css and .js, copied from paulobrien.com by build.mjs),
   in this site's colours. */
.install{max-width:860px;margin:50px auto 0;padding:0 16px}
.install .tm-top{text-align:center}
.install h1{max-width:none;font-size:clamp(40px,6.4vw,72px)}
.install .lead{margin-top:20px}
.install .steps.mini{margin:40px 0 0;grid-template-columns:repeat(3,1fr);gap:14px}
.install .steps.mini li{padding:18px;display:flex;gap:12px;align-items:center}
.install .steps.mini .ic{width:42px;height:42px;border-radius:12px;margin:0;flex:none}
.install .steps.mini .ic .i{width:21px;height:21px}
.install .steps.mini b{font-size:16.5px;margin:0}
.install .bbe{margin-top:26px;border-color:var(--line);background:linear-gradient(160deg,#fff4ea,#fff 55%);padding:26px}
.install .soon{max-width:none}
.bbe .steps{grid-template-columns:1fr}
.bbe .steps li{background:none;border:0;border-radius:0;padding:0;position:static}
.bbe h2{color:var(--ink)}
.bbe h2 .n,.bbe .btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
.bbe .btn.p:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.bbe .btn{color:var(--accent-dark);border-color:#f1d3bd;box-shadow:none}
.bbe .opt:has(input:checked){border-color:var(--accent);background:var(--tint)}
.bbe .opt input{accent-color:var(--accent)}
.bbe input:focus,.bbe select:focus{outline-color:var(--accent)}
.bbe .steps li.on .dot{border-color:var(--accent);border-top-color:transparent}
@media (max-width:760px){.install .steps.mini{grid-template-columns:1fr}.install .bbe{padding:18px}}

/* Hosted blogs (/hosted/): the request form beside what you get */
.hosted-hero{padding-top:40px}
.ask{margin-top:90px}
.ask-in{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}
.ask-side{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:28px;padding:38px 32px}
.ask-side .ic{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-bottom:18px}
.ask-side .ic .i{width:26px;height:26px}
.ask-side h2{margin:0 0 10px;font:900 clamp(30px,3.6vw,42px)/1.05 var(--ui);letter-spacing:-.03em}
.ask-side p{margin:0;color:#fff3ea}
.ask-side b{color:#fff}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.ticks .i{width:20px;height:20px;flex:none;margin-top:3px}
.ask-form,.ask-done{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:34px 30px;display:grid;gap:16px}
.ask-form h2,.ask-done h2{margin:0;font:900 clamp(28px,3vw,36px)/1.1 var(--ui);letter-spacing:-.03em;color:var(--ink)}
.ask-form label{display:grid;gap:6px;font:700 16px var(--ui);color:var(--ink)}
.ask-form label small{font-weight:400;font-size:14.5px;color:var(--soft)}
.ask-form input:not(.hp),.ask-form textarea{font:16px var(--ui);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;width:100%;box-sizing:border-box}
.ask-form textarea{resize:vertical;min-height:110px}
.ask-form input:focus,.ask-form textarea:focus{outline:3px solid #fcd9bf;border-color:var(--accent)}
.ask-form .btn{justify-self:start}
.ask-form .formmsg{margin:0;color:var(--accent-dark);font-weight:700}
.ask-form .fine{margin:0;font-size:14px;color:var(--soft)}
.ask-done{text-align:center;justify-items:center}
.ask-done .ic{width:80px;height:80px;border-radius:24px;background:#eef4f1;color:var(--green);display:grid;place-items:center}
.ask-done .ic .i{width:38px;height:38px}
.ask-done p{margin:0;max-width:440px}
[hidden]{display:none!important}
@media (max-width:860px){.ask-in{grid-template-columns:1fr}.ask-side{padding:30px 24px}.ask-form,.ask-done{padding:26px 20px}}

/* Guide pages (email-subscriptions/): numbered steps, each with its words and real screenshots. */
.guide-hero h1{max-width:14ch}
.guide{max-width:900px;margin:110px auto 0}
.g-step{display:grid;grid-template-columns:56px 1fr;gap:6px 22px;margin-bottom:56px}
.g-n{grid-row:span 3;width:56px;height:56px;border-radius:18px;background:var(--tint);color:var(--accent-dark);display:grid;place-items:center;font:900 26px var(--ui)}
.g-n .i{width:26px;height:26px}
.g-text h3{margin:8px 0 10px;font:800 clamp(23px,2.6vw,28px)/1.2 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.g-text p{margin:0 0 12px}
.g-text b{color:var(--ink)}
.g-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.g-btns.center{justify-content:center}
.g-shot{margin-top:14px}
.g-shot img{box-shadow:0 20px 44px -26px rgba(80,40,10,.35)}
.g-shot.g-mail img{max-width:560px;width:100%}
.g-shot figcaption{text-align:left}
@media (max-width:760px){.guide{margin-top:80px}.g-step{grid-template-columns:1fr;gap:6px}.g-n{grid-row:auto;width:46px;height:46px;border-radius:14px;font-size:22px}.g-n .i{width:22px;height:22px}}