/* /first-email — The First Email generator. Loaded after base.css, which supplies the
   tokens, header, footer, .btn, .eyebrow, .wrap and the type atoms. Everything here is
   page-specific. The one light surface on the page is .paper: the inbox and the opened
   email are shown as they would look in a mail client, not in the site's colours. */
.fe{
  --ok:#8FD3A6; --warn:#F2B36B;
  --paper:#FFFFFF; --paper-ink:#202124; --paper-muted:#5F6368; --paper-line:#E6E8EB; --paper-hi:#FFF8E6;
}
.fe code{font:500 .9em var(--mono);background:rgba(243,236,221,.08);padding:1px 5px;border-radius:4px}
.fe .fine{font-size:13px;line-height:1.55;color:var(--muted)}
.fe .lbl{font:500 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fe .caption{font-size:13px;line-height:1.5;color:var(--muted)}

/* ============================== hero ============================== */
.fehero{padding:clamp(48px,6vw,84px) 0 clamp(28px,3.5vw,44px);border-top:0}
.fehero h1{font-size:var(--t-h1);max-width:15.5em;margin-top:16px}
.fehero .deck{max-width:40em;margin-top:20px;color:var(--cream);opacity:.93}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.facts li{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:9px 12px}

/* ============================== generator ============================== */
.bench{padding-block:clamp(28px,4vw,48px) clamp(40px,5vw,64px)}
.benchgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:980px){.benchgrid{grid-template-columns:minmax(0,1fr)}}
.fe-fields{display:flex;flex-direction:column;gap:24px;min-width:0}
.example-note{font:500 12px/1.45 var(--mono);color:var(--accent);border:1px dashed rgba(232,181,71,.5);border-radius:8px;padding:10px 12px}
.fe fieldset{border:0;border-top:1px solid var(--hair);padding-top:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.fe legend{float:left;width:100%;display:flex;gap:12px;align-items:center;margin-bottom:4px;font:500 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fe legend + *{clear:both}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f > span{font-weight:500;font-size:14.5px}
.f > span em{font-style:normal;font-weight:400;color:var(--muted);font-size:12.5px;margin-left:4px}
.f small,.hint{font-size:13px;line-height:1.5;color:var(--muted)}
.hint{margin-top:-6px}
.fe input,.fe textarea{width:100%;background:var(--well);border:1px solid var(--edge);border-radius:8px;color:var(--cream);font:400 16px/1.45 var(--sans);padding:11px 12px;transition:border-color var(--m-state)}
.fe textarea{line-height:1.55;resize:vertical;min-height:280px}
.fe input::placeholder{color:var(--muted);opacity:.8}
@media(hover:hover){.fe input:hover,.fe textarea:hover{border-color:var(--cream)}}
.fe input:focus-visible,.fe textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.chips button{font:400 13.5px/1.2 var(--sans);color:var(--muted);background:none;border:1px dashed var(--edge);border-radius:999px;padding:8px 12px;cursor:pointer}
@media(hover:hover){.chips button:hover{color:var(--cream);border-color:var(--cream)}}
.linkish{margin-left:auto;background:none;border:0;padding:4px 0;font:500 12px/1 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.fe-view{min-width:0}
.view-sticky{display:flex;flex-direction:column;gap:12px}
@media(min-width:981px){.view-sticky{position:sticky;top:84px}}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}

/* The one lifted object: paper. */
.paper{background:var(--paper);color:var(--paper-ink);border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 14px 40px -18px rgba(0,0,0,.55);overflow:hidden}
.inbox{font:400 13.5px/1.35 Arial,Helvetica,sans-serif}
.inbox-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--paper-line)}
.inbox-row:first-child{border-top:0}
.inbox-row .from,.inbox-row .subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.inbox-row .snip{color:var(--paper-muted)}
.inbox-row .time{font-size:12px;color:var(--paper-muted)}
.inbox-row.them{color:#3C4043}
.inbox-row.you{background:var(--paper-hi);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.inbox-row.you .snip{font-weight:400}
@media(max-width:560px){
  .inbox-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .inbox-row .time{grid-column:2;grid-row:1}
  .inbox-row .subj{grid-column:1 / -1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.opened{width:100%;max-width:100%;margin-inline:auto;transition:max-width var(--m-move) var(--e-move)}
.opened.phone{max-width:390px}
.msg-head{padding:18px 20px 6px;font-family:Arial,Helvetica,sans-serif}
.msg-subj{margin-bottom:14px;font-size:20px;line-height:1.3;color:var(--paper-ink)}
.msg-from{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--paper-ink)}
.msg-from .addr,.msg-from .to{color:var(--paper-muted);font-size:12.5px;overflow-wrap:anywhere}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:#5E7F66;color:#fff;display:grid;place-items:center;font:500 16px/1 Arial,sans-serif}
#pv-frame{display:block;width:100%;height:420px;border:0;background:var(--paper)}

.seg{display:inline-flex;border:1px solid var(--edge);border-radius:999px;padding:2px}
.seg button{background:none;border:0;border-radius:999px;min-height:36px;padding:6px 14px;color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--well);color:var(--cream);box-shadow:inset 0 0 0 1px var(--rule)}

.checks{border:1px solid var(--rule);border-radius:10px;padding:14px 16px;background:rgba(5,24,29,.35)}
.checks .label-row{margin:0 0 10px}
.score{font:500 12px/1 var(--mono);color:var(--cream);font-variant-numeric:tabular-nums}
#checks{list-style:none;margin-bottom:10px;display:flex;flex-direction:column;gap:7px}
#checks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14px;line-height:1.45}
#checks li::before{content:"";width:10px;height:10px;margin-top:5px;border-radius:50%;border:1.5px solid var(--warn)}
#checks li.ok::before{background:var(--ok);border-color:var(--ok)}
#checks li .why{display:block;color:var(--muted);font-size:13px}

/* ============================== output ============================== */
.out{padding-block:clamp(44px,5.5vw,72px)}
.out-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.out-head h2{margin-top:0}
.code{background:var(--well);border:1px solid var(--hair);border-radius:10px;padding:18px;max-height:420px;overflow:auto;font:400 12.5px/1.6 var(--mono);color:#DCE6E3;white-space:pre;tab-size:2}
.out .ctarow{margin-top:16px}
.status{font:500 12px/1 var(--mono);color:var(--ok)}
.fine.setup{margin-top:14px;font-size:14.5px;color:var(--muted)}
.fine.setup b{color:var(--cream);font-weight:500}
.out .fine + .fine{margin-top:6px}

/* ============================== reading ============================== */
.read .wrap > *{max-width:var(--lane-text)}
.read h2{margin-bottom:20px}
.read h3{font-size:26px;margin:28px 0 8px}
.read p{font-size:17px;line-height:1.7;color:var(--cream);opacity:.93}
.read p + p{margin-top:14px}
.read .sub{color:var(--muted);opacity:1;margin-top:-6px}
.read a,.plan a{border-bottom:1px solid var(--rule);padding-bottom:1px}
@media(hover:hover){.read a:hover,.plan a:hover{border-color:var(--accent)}}
.checklist{list-style:none;counter-reset:c;margin-top:18px;display:flex;flex-direction:column;gap:14px}
.checklist li{counter-increment:c;position:relative;padding-left:40px;font-size:16px;line-height:1.65}
.checklist li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:0;font:500 12px/2.2 var(--mono);color:var(--accent)}
.checklist b{font-weight:600}
.read .sources{margin-top:24px;font-size:13.5px;color:var(--muted);opacity:1}
.read .sources a{color:var(--muted)}

/* ============================== the build ============================== */
.gate{padding-bottom:clamp(60px,8vw,110px)}
.gate-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;border:1px solid var(--edge);border-radius:14px;padding:clamp(20px,3.5vw,36px);background:linear-gradient(180deg,rgba(232,181,71,.07),rgba(5,24,29,.4))}
@media(max-width:860px){.gate-card{grid-template-columns:minmax(0,1fr)}}
.gate-copy h2{margin-top:10px}
.gate-copy p:last-child{margin-top:12px;font-size:16.5px;line-height:1.6;max-width:36em}
.gate-form{display:flex;flex-direction:column;gap:10px;min-width:0}
.gate-row{display:flex;gap:10px;flex-wrap:wrap}
.gate-row input{flex:1 1 200px;min-width:0;min-height:52px}
.gate-row .btn{flex:0 0 auto}
@media(max-width:560px){.gate-row .btn{flex:1 1 100%}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.gate-msg{font-size:14px;min-height:1.3em;color:var(--muted)}
.gate-msg.err{color:var(--warn)}
.gate-msg.ok{color:var(--ok)}
.plan{margin-top:32px;border-top:1px solid var(--rule);padding-top:28px;outline:none}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.plan-head h2{margin-top:0}
.days{list-style:none;margin-bottom:20px;display:flex;flex-direction:column;max-width:880px}
.days li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 24px;padding:16px 0;border-top:1px solid var(--hair)}
.days li:first-child{border-top:0;padding-top:0}
.days .day{font:500 11.5px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.days p:last-child{font-size:16px;line-height:1.65;max-width:62ch}
@media(max-width:640px){.days li{grid-template-columns:minmax(0,1fr)}}

@media(prefers-reduced-motion:reduce){.opened{transition:none}}
@media print{.bench,.out,.gate-card{display:none}}

/* ── LP rebuild ────────────────────────────────────────────────────────────
   The two products this page sits next to sell inbox placement: "Land in the
   Primary tab, not Promotions." This tool cannot promise that and says so in
   its own UI. So the page does not compete on the claim — it competes on being
   the only page in the category that tells you what actually decides the tab,
   and hands you a working tool with no signup while the others ask for a demo.

   Everything below is layout for that argument. No new colour, no new type
   scale: base.css already owns both. */

/* The hero's proof row. Three numbers about the TOOL, not about results, so
   nothing here needs a denominator it cannot produce. */
.heronums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3vw,36px);max-width:var(--lane-text)}
.heronums div{border-top:2px solid var(--edge);padding-top:12px}
.heronums b{display:block;font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);line-height:1;letter-spacing:var(--track)}
.heronums span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:16px}
@media(max-width:600px){.heronums{grid-template-columns:1fr;gap:12px}}

/* THE ARGUMENT. Two columns: what decides the tab, and who decides it. The
   left column is what you control, the right is what you do not — and the
   asymmetry is the point, so they are not equal widths. */
/* .read caps every direct child at the reading measure (line 102), which is
   right for prose and wrong for a two-column comparison: at 680px each column
   was 323px and the lists broke to three words a line. The comparison is not
   prose and takes the full wrap; the ledger below it IS prose and keeps the
   measure. */
.read .wrap > .decides{max-width:none}
.decides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,34px);margin-top:clamp(26px,3vw,38px)}
@media(max-width:840px){.decides{grid-template-columns:1fr}}
.dcol{background:var(--well);border:1px solid var(--rule);border-radius:6px;padding:clamp(20px,2.4vw,28px)}
.dcol.yours{border-top:3px solid var(--accent)}
.dcol.theirs{border-top:1px dashed var(--edge)}
.dcol h3{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.dcol.yours h3{color:var(--accent)}
.dcol .dlede{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:var(--track);margin:6px 0 16px;text-wrap:balance}
.dcol ul{list-style:none;margin:0;padding:0}
.dcol li{padding-top:12px;margin-top:12px;border-top:1px solid var(--hair);font-size:15.5px;line-height:23px}
.dcol li:first-child{margin-top:0;padding-top:0;border-top:0}
.dcol li b{color:var(--cream);font-weight:600}
.dnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:14px;line-height:21px;color:var(--muted)}
.dnote a{color:var(--cream);border-bottom:1px solid var(--rule)}
.dnote a:hover{border-color:var(--accent)}

/* The claim ledger: what this page will and will not tell you, in the site's
   own three-weight notation. This is the section the category does not have. */
.ledger{margin-top:clamp(26px,3vw,38px);max-width:var(--lane-text)}
.ledger .lrow{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding-top:15px;margin-top:15px;border-top:1px solid var(--hair)}
.ledger .lrow:first-child{margin-top:0;padding-top:0;border-top:0}
.ledger dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:18px}
.ledger dd{margin:0;font-size:16px;line-height:25px}
.ledger dd.un{color:var(--muted)}
@media(max-width:620px){.ledger .lrow{grid-template-columns:1fr;gap:5px}}