/* Kiteflier guides: one branded page each, readable on a phone, prints to a clean PDF */
:root{--ink:#1B1C1E;--head:#111113;--soft:#6E6E73;--line:#ECECEE;--paper:#fff;--tint:#F7F7F8;--card:#fff;--accent:#6E6E73;--kite:#E8722A;--ok:#2E7D5B;--rule:#C9C9CE;
  --display:"Instrument Serif",Georgia,serif;--serif:"Instrument Serif",Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  padding:0 max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
a{color:inherit}
.bar{max-width:820px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:15px}
.bar a{text-decoration:none;color:var(--soft)}.bar a:hover{color:var(--ink)}
.bar .pdf{color:var(--ink);font-weight:500;border:1px solid var(--line);background:var(--card);padding:9px 18px;border-radius:999px}
.sheet{max-width:820px;margin:0 auto;background:var(--card);padding:48px 56px 36px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}
.head img{height:58px;display:block}
.head .site{font-size:14px;color:var(--soft);text-align:right;line-height:1.4}
.head .site b{color:var(--ink);font-weight:600;display:block;font-size:15px}
.kick{font:italic 400 20px/1.35 var(--serif);color:var(--soft);margin-top:30px}
h1{font:400 48px/1.05 var(--display);color:var(--head);margin-top:8px;letter-spacing:-.005em;text-wrap:balance}
.intro{font:400 16.5px/1.6 var(--sans);color:var(--ink);margin-top:16px;max-width:42em}
h2{font:600 12.5px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:28px 0 10px}
.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.cols>div{min-width:0}
ul.check{list-style:none;padding:0;display:grid;gap:8px}
ul.check li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:15.5px;line-height:1.45}
ul.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;border:1.5px solid var(--rule);border-radius:5px;background:#fff;cursor:pointer;display:grid;place-items:center}
ul.check input:checked{background:var(--ok);border-color:var(--ok)}
ul.check input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
ul.check input:checked+span{color:var(--soft)}
ul.check b,ol.steps b{font-weight:600}
ol.steps{padding-left:22px;display:grid;gap:8px;font-size:15.5px}
p.body{font-size:15.5px;margin-top:10px}
.note{background:var(--tint);border-left:3px solid var(--kite);border-radius:0 12px 12px 0;padding:14px 18px;margin-top:22px;font-size:15px}
.note b{font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;font-size:13px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.letter{border:1px solid var(--line);border-radius:14px;padding:22px 26px;font:400 18px/1.55 var(--serif);background:var(--tint)}
.letter p+p{margin-top:10px}
.letter .fill{background:#FDEBDD;border-radius:3px;padding:0 3px}
.cta{margin-top:30px;border-top:1px solid var(--line);padding-top:20px;font:400 21px/1.45 var(--serif)}
.cta a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--kite)}
.foot{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:var(--soft);border-top:1px solid var(--line);padding-top:16px}
.foot .brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:500}
.foot .brand img.logo{height:34px}
.foot .brand img.mark{height:20px;width:20px}
.foot .meta{text-align:right;line-height:1.5}
@media (max-width:680px){
  .sheet{padding:28px 20px 24px}
  .head img{height:46px}
  h1{font-size:38px}
  .intro{font-size:16px}
  .cols{grid-template-columns:1fr}
  .foot{flex-direction:column;align-items:flex-start}.foot .meta{text-align:left}
  .letter{padding:18px}
}
@page{size:Letter;margin:0.45in}
@media print{
  body{background:#fff;padding:0;font-size:15px}
  .bar{display:none}
  .sheet{box-shadow:none;padding:0;max-width:none}
  h1{font-size:38px}
  ul.check li,ol.steps,p.body{font-size:13.5px}
  ul.check{gap:5px}
  h2{margin:18px 0 7px}
  .kick{margin-top:20px}
  .note,.letter,table,tr,li{break-inside:avoid}
  ul.check input,.note,.letter .fill{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
