/* inkform — site chrome. The editor carries its own styles. */
:root{
  /* Neutrals sampled from the hero photograph so the page and the product shot
     sit on the same ground instead of meeting at a visible seam. */
  --ink:#1a1a18; --paper:#f7f4f0; --paper-2:#efeae4; --line:#e4ddd5;
  --graphite:#6b675f; --graphite-2:#8b867d;
  --accent:#2f6f62; --accent-dark:#23524a; --err:#8c2f2f; --ok:#2b6b3f;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
     background:#efeee9;padding:1px 5px;border-radius:4px}

/* header */
.bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
     padding:12px 22px;border-bottom:1px solid var(--line);background:#fff}
.brand{font-size:20px;font-weight:600;letter-spacing:-.02em;text-decoration:none;color:var(--ink);
       display:inline-flex;align-items:center;gap:9px}
.brand b{color:var(--accent);font-weight:inherit}
.brand-mark{display:block;flex:none}
.brand.big{font-size:30px;margin-bottom:4px;gap:11px}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bar nav a{text-decoration:none;color:var(--graphite)}
.bar nav a:hover{color:var(--ink)}
.who{color:var(--graphite);font-size:13.5px}

main{max-width:1000px;margin:0 auto;padding:28px 22px 60px}
main.wide{max-width:1120px;padding-top:0}
body.centred{display:grid;place-items:center;min-height:100vh;padding:20px}

/* ---------- landing page ---------- */
.hero{display:grid;gap:44px;align-items:center;padding:56px 0 8px;
      grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
         color:var(--graphite-2);margin:0 0 18px}
.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.035em;
         font-weight:600;margin:0 0 20px}
/* the turn of the sentence is the whole idea — let the second half recede */
.hero h1 span{color:var(--graphite-2)}
.lede{font-size:17px;line-height:1.6;color:var(--graphite);max-width:56ch;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.trust{font-size:13px;color:var(--graphite-2);margin:18px 0 0}

.hero-shot{margin:0}
.hero-shot img{width:100%;height:auto;display:block;border-radius:14px;
               border:1px solid var(--line);
               box-shadow:0 1px 2px rgba(26,26,24,.04),0 18px 44px -22px rgba(26,26,24,.35)}

/* device strip */
.devices{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
         padding:34px 0 6px;margin-top:22px;border-top:1px solid var(--line)}
.devices-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
               color:var(--graphite-2);margin:0}
.devices ul{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.devices li{font-size:13px;color:var(--graphite);background:var(--paper-2);
            border:1px solid var(--line);border-radius:20px;padding:3px 11px}

/* features */
.features{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
          border-radius:var(--radius);overflow:hidden;
          grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:52px}
.features article{background:var(--paper);padding:26px 24px}
.features h2{font-size:15.5px;margin:0 0 8px;letter-spacing:-.01em}
.features p{margin:0;color:var(--graphite);font-size:14.5px;line-height:1.6}

/* closing note */
.plain{margin-top:52px;padding-top:34px;border-top:1px solid var(--line);max-width:64ch}
.plain h2{font-size:20px;margin:0 0 12px;letter-spacing:-.02em}
.plain p{color:var(--graphite);margin:0 0 12px;line-height:1.65}
.plain strong{color:var(--ink);font-weight:600}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:32px;padding-top:34px}
  .hero-shot{order:-1}
}

/* cards + forms */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
      padding:26px;max-width:940px;margin:0 auto;width:100%}
.card.narrow{max-width:460px}
.wide-card{max-width:100%}
body.centred .card{max-width:380px}
h1{font-size:22px;margin:0 0 14px}
h2{font-size:17px;margin:26px 0 10px}
label{display:block;margin:14px 0 4px;font-size:13.5px;color:var(--graphite)}
input,select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
             font:inherit;background:#fff;color:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.btn{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:#fff;
     padding:9px 16px;border-radius:8px;font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:#eef3f1;color:var(--accent-dark)}
.btn.wide{width:100%;margin-top:18px}
.btn.big{padding:12px 22px;font-size:16px;margin-top:10px}
.btn.tiny{padding:4px 9px;font-size:12px}
.sub{color:var(--graphite);margin:0 0 18px}
/* auth cards: the sign-in and sign-up forms sit alone on the page */
body.centred{background:var(--paper-2)}
body.centred .card{max-width:400px;padding:30px 28px;
  box-shadow:0 1px 2px rgba(26,26,24,.04),0 14px 40px -26px rgba(26,26,24,.4)}
body.centred .brand.big{margin-bottom:2px}
.alt{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
     font-size:13.5px;color:var(--graphite);text-align:center}
.card .note{background:var(--paper-2);border-left-color:var(--graphite-2);
            font-size:13px;line-height:1.6;color:var(--graphite);margin-top:20px}
.hint{font-size:12.5px;color:var(--graphite);margin:6px 0 0}
.note{background:#f3f6f5;border-left:3px solid var(--accent);padding:10px 12px;border-radius:0 6px 6px 0}
.note.pw code{font-size:15px;user-select:all}
.err{background:#fbf0f0;border-left:3px solid var(--err);color:var(--err);padding:10px 12px;border-radius:0 6px 6px 0}
.ok{background:#f0f7f2;border-left:3px solid var(--ok);color:var(--ok);padding:10px 12px;border-radius:0 6px 6px 0}
.muted{color:var(--graphite)}
.tag{font-size:11px;background:#f3ead9;color:#7a5c1e;padding:1px 6px;border-radius:20px;margin-left:5px}

/* tables */
.grid{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.grid th,.grid td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.grid th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions form{margin:0}
.inline-form{max-width:420px}
.foot{border-top:1px solid var(--line);padding:18px 22px;color:var(--graphite);font-size:13px}
.foot p{margin:0}

@media (max-width:620px){
  .grid thead{display:none}
  .grid tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .grid td{display:flex;justify-content:space-between;border:0;padding:4px 0}
  .row-actions{justify-content:flex-start}
}

/* ---------- dedication ---------- */
/* Parisienne, SIL Open Font License 1.1, subset to the eleven glyphs this line
   needs — 2.8 KB rather than 61 KB, and self-hosted because the CSP is
   font-src 'self'. */
@font-face{
  font-family:"Dedication";
  src:url("/assets/fonts/parisienne-dedication.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
.dedication{
  margin:56px 0 4px;text-align:center;line-height:1;
  /* the small caps and the script sit on different optical baselines; align
     them by their own boxes rather than nudging with magic numbers */
  display:flex;align-items:baseline;justify-content:center;gap:.5em;
}
.dedication span{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--graphite-2);
}
.dedication em{
  font-family:"Dedication",'Snell Roundhand','Apple Chancery',cursive;
  font-style:normal;font-size:27px;color:var(--graphite);letter-spacing:.01em;
}