/* Field Notes Kit: styles. MOBILE FIRST: the base rules are written for an iPhone (~390px).
   Desktop adds on top with min-width queries at the bottom of each section. System fonts only. */
:root {
  /* palette tokens (swapped per variant) */
  --fg:#14202e; --bg:#f7f9fb; --paper:#fff; --muted:#475567; --line:#dbe2ea; --edge:#7a8a9c;
  --brand:#1e3a5f; --brand-hover:#2a4d7b; --on-brand:#fff;
  --cta:#2a7a4b; --cta-hover:#226640; --on-cta:#ffffff;
  --eyebrow:#2f5586; --hover:#eaf0f6; --focus:#2a7a4b; --err:#b42318; --ok:#14602c;
  --shadow:0 1px 2px rgba(20,30,25,.06),0 4px 14px rgba(20,30,25,.07);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --bar:84px; /* height of the sticky cart bar, not counting the home-indicator area */
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--fg); font:18px/1.5 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
img { max-width:100%; height:auto; }
button, input { font-family:var(--font); }
button, a.buy, a.ghost { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
[hidden] { display:none !important; }
main { max-width:720px; margin:0 auto; padding:16px calc(18px + var(--sal)) calc(40px + var(--sab)) calc(18px + var(--sar)); }
body.has-bar main { padding-bottom:calc(var(--bar) + var(--sab) + 32px); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }

/* ---------- header ---------- */
.kicker { font:600 12px/1 var(--mono); letter-spacing:.14em; color:var(--eyebrow); margin:0 0 12px; }
header { padding-left:0; }
header h1 { font-size:34px; line-height:1.06; letter-spacing:-.035em; margin:0 0 10px; font-weight:800; text-wrap:balance; }
.dot { color:var(--eyebrow); }
header .sub, .sub { font-size:17px; color:var(--muted); margin:0; max-width:520px; }

/* ---------- step headings + home cards (stacked, full width, thumb reachable) ---------- */
.stephead { font:800 24px/1.2 var(--font); letter-spacing:-.02em; margin:28px 0 12px; color:var(--fg); }
.stephead span { display:block; font:700 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:4px; }
.cards { display:grid; grid-template-columns:1fr; gap:12px; }
.homecard { display:grid; grid-template-columns:1fr 52px; align-items:center; column-gap:12px; text-align:left; width:100%; min-height:112px; padding:16px 16px 16px 18px; background:var(--paper); color:var(--fg); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); cursor:pointer; font:inherit; }
.homecard b { font-size:28px; line-height:1.1; letter-spacing:-.03em; font-weight:800; }
.homecard span { grid-column:1; font-size:16px; line-height:1.35; color:var(--muted); margin-top:4px; }
.homecard i { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-style:normal; font-size:26px; }
.homecard:active { transform:scale(.99); background:var(--hover); }

/* ---------- home switch (after choosing) ---------- */
.toggle { display:grid; grid-template-columns:1fr 1fr; margin:22px 0 0; border:1.5px solid var(--edge); border-radius:10px; overflow:hidden; background:var(--paper); }
.toggle button { font:800 18px/1.15 var(--font); letter-spacing:-.01em; padding:12px 8px; min-height:56px; border:0; background:var(--paper); color:var(--fg); cursor:pointer; }
.toggle button + button { border-left:1.5px solid var(--edge); }
.toggle button.on { background:var(--brand); color:var(--on-brand); }

/* ---------- people stepper ---------- */
.people { display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 16px; }
.step { width:64px; height:64px; border-radius:50%; border:1.5px solid var(--edge); background:var(--paper); color:var(--fg); box-shadow:var(--shadow); font-size:30px; line-height:1; cursor:pointer; display:grid; place-items:center; user-select:none; -webkit-user-select:none; }
.step:active { transform:scale(.96); background:var(--brand); color:var(--on-brand); }
.step:disabled { opacity:.25; cursor:default; background:var(--paper); color:var(--fg); }
.count { min-width:120px; text-align:center; }
.count output { display:block; font-size:72px; line-height:1; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.count .label { display:block; font:600 13px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin-top:6px; }

/* ---------- buy buttons ---------- */
.cta { margin:24px 0 32px; text-align:center; }
.cta.top { margin:0 0 8px; }
.buy { display:block; width:100%; padding:18px 18px; min-height:64px; background:var(--cta); color:var(--on-cta); text-decoration:none; font-size:19px; font-weight:800; border-radius:12px; letter-spacing:-.01em; box-shadow:0 2px 0 rgba(0,0,0,.12),0 6px 16px rgba(0,0,0,.14); text-align:center; }
.buy.disabled { opacity:.4; pointer-events:none; }
.buys { display:flex; flex-direction:column; gap:10px; }
.buy .amt { display:block; margin-top:2px; font-size:15px; font-weight:600; opacity:.9; }
.row2 { margin-top:10px; }
.ghost { width:100%; padding:14px; min-height:56px; background:var(--paper); color:var(--fg); border:1.5px solid var(--line); border-radius:10px; font-size:17px; cursor:pointer; }
a.ghost { display:flex; align-items:center; justify-content:center; text-decoration:none; margin-top:10px; text-align:center; }
.fine { font-size:15px; color:var(--muted); margin:14px auto 0; max-width:480px; }
.fit { margin:18px 0 0; text-align:center; font:13px var(--mono); color:var(--muted); }

/* ---------- summary ---------- */
.summary { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin-top:22px; background:var(--paper); }
.stat { text-align:center; }
.stat b { display:block; font-size:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat span { font:600 12px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- item list ---------- */
.list h2, .notes h2 { font:700 14px var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--eyebrow); margin:30px 0 6px; }
.item { display:grid; grid-template-columns:44px 44px 1fr; column-gap:6px; row-gap:2px; align-items:center; padding:12px 0; min-height:64px; border-bottom:1px dashed var(--line); }
.item input[type=checkbox] { width:28px; height:28px; margin:0 8px; accent-color:var(--brand); cursor:pointer; }
.item .qty { font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-align:center; }
.item .qty small { font-size:12px; font-weight:500; color:var(--muted); }
.item .name { display:flex; align-items:center; min-height:44px; font-weight:700; text-decoration:none; overflow-wrap:anywhere; }
.item .size { font-size:15px; margin-top:3px; font-variant-numeric:tabular-nums; }
.item .meta { font-size:15px; color:var(--muted); margin-top:2px; }
.item .price { grid-column:3; font-variant-numeric:tabular-nums; font-weight:600; }
.item .price small { display:inline; margin-left:6px; font-size:14px; color:var(--muted); font-weight:400; }
.item.off { opacity:.35; }
.item.off .name { text-decoration:line-through; }
.item .name:active { text-decoration:underline; text-decoration-color:var(--brand); }

.notes ul { padding-left:20px; color:#2a2a28; margin:0; }
.notes li { margin:12px 0; }
.notes a { text-decoration-color:var(--brand); text-underline-offset:2px; overflow-wrap:anywhere; }
footer { margin-top:44px; padding-top:18px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); }
footer a { display:inline-block; padding:6px 0; }

/* ---------- top bar: logo pill + follow pill, in normal flow (scrolls away, never covers content) ---------- */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:720px; margin:0 auto; padding:calc(8px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal)); }
.corner { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 8px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; background:#ececE6; color:#000; }
.corner.right { padding-left:14px; }
.corner img { border-radius:50%; width:28px; height:28px; }

/* ---------- sticky cart bar (phones) ---------- */
.bar { position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px calc(14px + var(--sar)) calc(10px + var(--sab)) calc(14px + var(--sal)); background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(20,30,25,.08); }
.bar .buy { min-height:56px; padding:14px 16px; font-size:18px; }
.bar .buy span { opacity:.8; font-weight:500; }
body.kb .bar { display:none; }
.bar { transform:translateY(105%); visibility:hidden; transition:transform .22s ease, visibility 0s .22s; }
.bar.on { transform:none; visibility:visible; transition:transform .22s ease; } /* hide while the keyboard is open so it never covers a field */

/* ---------- Free Setup Pack opt-in ---------- */
.optin-box { margin:24px 0; padding:18px 16px 16px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.optin-box h2 { font:800 22px/1.2 var(--font); letter-spacing:-.02em; text-transform:none; color:var(--fg); margin:0 0 8px; }
.optin-box p { margin:0 0 14px; color:var(--muted); font-size:17px; }
.optin-row { display:flex; flex-direction:column; gap:10px; }
.optin-row input[type=email] { width:100%; min-height:56px; padding:0 16px; font-size:18px; border:1.5px solid var(--edge); border-radius:10px; background:#fff; color:var(--fg); -webkit-appearance:none; appearance:none; }
.optin-row button { width:100%; min-height:56px; padding:0 22px; font:700 19px var(--font); background:var(--brand); color:var(--on-brand); border:0; border-radius:10px; cursor:pointer; }
.optin-row button:disabled { opacity:.5; cursor:default; }
.optin .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.optin-box p.optin-hate { margin:12px 0 0; font-size:16px; }
.optin-msg { margin:12px 0 0; font-size:18px; font-weight:600; }
.optin-msg:empty { display:none; }
.optin-msg.ok { color:var(--ok); } .optin-msg.bad { color:var(--err); }
.optin-msg a { color:inherit; padding:6px 0; display:inline-block; }

/* ---------- setup pack page ---------- */
.setup header h1 { font-size:38px; }
.steps { list-style:none; counter-reset:s; padding:0; margin:22px 0 0; display:grid; gap:10px; }
.steps li { counter-increment:s; display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; font-size:18px; background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; }
.steps li::before { content:counter(s); display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-weight:800; font-size:18px; }
.aibtns { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.aibtns a { display:inline-flex; align-items:center; justify-content:center; padding:0 18px; min-height:48px; border:1.5px solid var(--edge); border-radius:10px; text-decoration:none; font-weight:700; font-size:17px; background:#fff; }
.master { margin:24px 0 0; padding:18px 16px; background:var(--brand); color:var(--on-brand); border-radius:14px; box-shadow:var(--shadow); }
.master h2 { font:800 22px/1.2 var(--font); text-transform:none; letter-spacing:-.02em; color:#fff; margin:0 0 6px; }
.master p { margin:0 0 14px; color:#e6ebe7; font-size:17px; }
.master .copy { background:#fff; color:var(--fg); }
.pcard { padding:16px 0 18px; border-bottom:1px dashed var(--line); }
.pcard h3 { font-size:21px; line-height:1.25; margin:0 0 8px; letter-spacing:-.01em; }
.badge { display:inline-block; font:700 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; margin:0 0 10px; }
.badge.manual { background:#dff3e4; color:#0f4d22; } .badge.closest { background:#fff1cc; color:#6b4b00; }
.badge.maker { background:#e4ecf8; color:#173c73; } .badge.none { background:#ececE6; color:#333; }
.plinks { list-style:none; padding:0; margin:0 0 10px; }
.plinks li { margin:0; font-size:17px; }
.plinks a { display:flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:3px; text-decoration-color:var(--brand); overflow-wrap:anywhere; }
.pcard .tip { color:var(--muted); font-size:16px; margin:0 0 12px; }
.pcard .note { background:#fff8e1; border-left:4px solid #d9a400; padding:10px 12px; font-size:16px; margin:0 0 12px; }
.copy { display:block; width:100%; min-height:56px; padding:12px 16px; font:700 18px var(--font); background:var(--brand); color:var(--on-brand); border:0; border-radius:10px; cursor:pointer; }
.copy.done { background:var(--ok); color:#fff; }
details.prompt { margin-top:8px; } details.prompt summary { cursor:pointer; font-size:17px; font-weight:600; min-height:44px; display:flex; align-items:center; }
details.prompt pre { white-space:pre-wrap; overflow-wrap:anywhere; font:15px/1.5 var(--mono); background:#f2f2ec; border:1px solid var(--line); border-radius:8px; padding:12px; margin:6px 0 0; color:#1a1a18; }
.master details.prompt pre { background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.25); color:#f1f4f2; }
.master summary { color:#fff; }
.trust { margin-top:28px; padding-left:20px; font-size:16px; color:var(--muted); }
.trust li { margin:8px 0; }

/* ---------- guide page ---------- */
.guide h1 { font-size:32px; }
.guide table { width:100%; border-collapse:collapse; margin:12px 0; }
.guide td, .guide th { border-bottom:1px solid var(--line); padding:10px 6px; text-align:left; font-size:16px; vertical-align:top; }
.guide .box { width:22px; } .guide .box i { display:inline-block; width:18px; height:18px; border:1.5px solid #000; }
.guide .noprint { margin-top:18px; }

/* ================= DESKTOP (tablet and up) ================= */
@media (min-width:700px) {
  body { font-size:18px; }
  main { padding:28px 20px 64px; }
  body.has-bar main { padding-bottom:64px; }
  .bar { display:none; }
  header h1 { font-size:48px; }
  header .sub, .sub { font-size:18px; }
  header { padding-left:0; }
  .stephead { font-size:28px; margin-top:34px; }
  .cards { grid-template-columns:1fr 1fr; gap:16px; }
  .homecard { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; min-height:220px; padding:24px 22px 20px; row-gap:10px; }
  .homecard b { font-size:34px; }
  .homecard span { font-size:19px; margin:0; }
  .homecard i { grid-column:1; grid-row:3; width:100%; height:56px; border-radius:8px; font-size:22px; }
  .homecard:hover, .homecard:focus-visible { background:var(--hover); box-shadow:0 0 0 3px var(--focus), var(--shadow); outline:none; }
  .toggle { margin-top:28px; } .toggle button { font-size:22px; padding:22px 10px; min-height:68px; } .toggle button:hover { background:#efefe8; }
  .people { gap:20px; margin:32px 0 24px; }
  .step { width:72px; height:72px; font-size:32px; } .step:hover { background:var(--brand); color:var(--on-brand); }
  .count { min-width:150px; } .count output { font-size:88px; }
  .buy { font-size:21px; padding:24px; min-height:72px; } .buy:hover { background:var(--cta-hover); }
  .buys { flex-direction:row; } .buys .buy { flex:1; min-width:0; }
  .row2 { display:block; }
  .summary { grid-template-columns:repeat(4,1fr); gap:12px; padding:18px 0; margin-top:28px; }
  .item { grid-template-columns:30px 56px 1fr; column-gap:14px; padding:14px 0; }
  .item input[type=checkbox] { width:24px; height:24px; margin:0; }
  .item .price { grid-column:auto; text-align:right; } .item .price small { display:block; margin:0; }
  .item .name:hover { text-decoration:underline; text-decoration-color:var(--brand); }
  .notes ul { padding-left:18px; }
  .topbar { padding-top:16px; padding-left:20px; padding-right:20px; }
  .corner { height:36px; font-size:13px; opacity:.7; transition:opacity .35s ease; } .corner:hover, .corner:focus-visible { opacity:1; }
  .corner.left { padding-left:6px; }
  .corner img { width:20px; height:20px; }
  .optin-box { margin:28px 0; padding:22px 20px 20px; } .optin-box h2 { font-size:24px; } .optin-box p { font-size:18px; }
  .optin-row { flex-direction:row; } .optin-row input[type=email] { width:auto; flex:1; min-width:0; font-size:20px; min-height:60px; }
  .optin-row button { width:auto; white-space:nowrap; min-height:60px; }
  .setup header h1 { font-size:46px; }
  .steps li { font-size:19px; }
  .master h2 { font-size:24px; }
  .pcard h3 { font-size:22px; }
  .copy { font-size:19px; min-height:60px; } .copy:hover { background:var(--brand-hover); } .master .copy:hover { background:#eef2ef; }
  .aibtns a:hover { background:var(--brand); color:var(--on-brand); }
  .guide h1 { font-size:34px; } .guide td, .guide th { font-size:14px; padding:8px 6px; }
}
@media print { .corner, .noprint, .bar, footer a.back { display:none !important; } main { padding:0 !important; } body { font-size:12px; } }

/* ---------- "Money is no object" premium toggle (discreet) ---------- */
.tier { margin:6px 0 0; text-align:center; }
.tier-link { background:none; border:0; padding:12px 8px; min-height:44px; font:inherit; font-size:14px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); cursor:pointer; }
.tier-link:hover, .tier-link:focus-visible { color:var(--fg); text-decoration-color:currentColor; }
.tier-on { margin:0 auto; max-width:420px; font-size:14px; color:var(--muted); line-height:1.4; }
.tier-on .tier-link { display:block; margin:0 auto; }