/* pages.css: the small public pages (/edit-pdf, /mail-merge, /modifier-pdf, /new, /templates)
   on the same Homerun-derived system as the landing page and the app:
   sand page, cream sheets, warm ink, one blue, Rubik + Inter, light default. */
:root {
  --bg:#eee9df; --card:#fbf9f5; --card2:#f3f1ed; --ink:#2d2323; --muted:#736b6b;
  --line:#e0dacf; --blue:#4f75fe; --blue2:#3f63e8; --yellow:#ffbb00; --tint-yellow:#f7e7a6;
  --tint-blue:#d9e2ff; --tint-mint:#d0f0e2; --tint-sand:#e9e2d3; --navbg:rgba(255,255,255,.95);
  --head:"Rubik","Inter",system-ui,sans-serif; --hand:"Patrick Hand SC","Inter",system-ui,sans-serif;
}
:root:not([data-theme="light"]) {
  --bg:#120e0e; --card:#1b1515; --card2:#292222; --ink:#f6f1ea; --muted:#a89f97;
  --line:#3a3030; --tint-yellow:#38300f; --tint-blue:#1b2140; --tint-mint:#14302a; --tint-sand:#2a2220; --navbg:rgba(29,23,23,.95);
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:var(--ink); min-height:100vh; line-height:1.6; font-family:Inter,system-ui,sans-serif;
       display:flex; flex-direction:column; align-items:center; padding:96px 16px 64px; }
a { color:inherit; }

/* floating pill nav, same as the landing banner */
.nav { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:20; width:min(980px,calc(100% - 24px)); height:68px;
       display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 22px; border-radius:999px;
       background:var(--navbg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
       box-shadow:0 1px 0 rgba(45,35,35,.04),0 12px 32px -18px rgba(45,35,35,.35); }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--head); font-weight:900; font-size:20px; letter-spacing:-.5px; }
.brand svg { width:30px; height:30px; flex:none; }
.brand svg rect, .brand svg path { stroke:var(--ink); }
.nav .links { display:flex; align-items:center; gap:4px; }
.nav .links a { text-decoration:none; color:var(--ink); font-size:16px; padding:10px 14px; border-radius:999px; }
.nav .links a:hover { background:var(--card2); }
.nav .links a.pill, .nav a.ghost.pill { background:var(--blue); color:#fff; padding:11px 22px; margin-left:6px; }
.nav .links a.pill:hover { background:var(--blue2); }
.nav span a.ghost { text-decoration:none; color:var(--ink); font-size:16px; padding:10px 14px; border-radius:999px; margin:0 !important; }
.nav span a.ghost:last-child { background:var(--blue); color:#fff; padding:11px 22px; margin-left:6px !important; }

.wrap { width:100%; max-width:1000px; }
.hero { padding:28px 0 8px; }
.eyebrow { font-family:var(--hand); font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin:0 0 10px; }
h1 { font-family:var(--head); font-weight:900; font-size:clamp(38px,5.6vw,64px); line-height:1.02; letter-spacing:-1px; margin:0 0 18px; max-width:14ch; }
.lede, .sub { color:var(--muted); font-size:19px; line-height:1.55; margin:0 0 28px; max-width:56ch; }
.sub { font-size:17px; margin-bottom:0; }

.cta, .btn, .open { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--blue); color:#fff; border:0;
       border-radius:999px; font:inherit; font-weight:400; font-size:17px; line-height:20px; padding:15px 26px 16px; cursor:pointer; text-decoration:none;
       transition:transform .18s, background .18s, box-shadow .18s; }
.cta:hover, .btn:hover, .open:hover { background:var(--blue2); transform:translateY(-2px); box-shadow:0 8px 22px rgba(79,117,254,.35); }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.lock { color:var(--muted); font-size:14px; display:inline-flex; align-items:center; gap:7px; margin-left:16px; }
.lock svg, .cta svg, .btn svg { width:18px; height:18px; flex:none; }

/* feature tiles */
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:44px 0 8px; }
.feat { background:var(--card); border-radius:28px; padding:26px; }
.feat .ic { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin-bottom:16px; background:var(--tint-yellow); border:3px solid var(--ink); }
.feat:nth-child(2) .ic { background:var(--tint-blue); } .feat:nth-child(3) .ic { background:var(--tint-mint); }
.feat .ic svg { width:24px; height:24px; stroke:var(--ink); }
.feat h3 { font-family:var(--head); font-weight:900; font-size:20px; letter-spacing:-.3px; margin:0 0 8px; }
.feat p { color:var(--muted); font-size:15px; margin:0; }

.section { margin:56px 0 0; }
.section h2 { font-family:var(--head); font-weight:900; font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-.5px; margin:0 0 22px; }
.steps { display:grid; gap:12px; }
.step { display:flex; gap:16px; align-items:flex-start; background:var(--card); border-radius:22px; padding:18px 22px; }
.step .n { flex:none; width:34px; height:34px; border-radius:50%; background:var(--yellow); color:#2d2323; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.step p { margin:5px 0 0; color:var(--ink); font-size:16px; } .step p span { color:var(--muted); }

.faq details { background:var(--card); border-radius:22px; padding:6px 24px; margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:500; font-size:17px; list-style:none; display:flex; align-items:center; padding:14px 0; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; margin-left:auto; color:var(--muted); font-size:24px; }
.faq details[open] summary::after { content:"–"; }
.faq p { color:var(--muted); font-size:16px; margin:0 0 16px; }

.endcta { margin:56px 0 0; background:#2d2323; color:#fff; border-radius:40px; padding:56px 32px; text-align:center; }
.endcta h2 { font-family:var(--head); font-weight:900; font-size:clamp(32px,4.4vw,52px); line-height:1.05; letter-spacing:-1px; margin:0 0 10px; color:#fff; }
.endcta p { color:rgba(255,255,255,.7); margin:0 0 26px; }
.foot { color:var(--muted); font-size:14px; margin-top:44px; text-align:center; }
.foot a { color:var(--ink); }

/* /new: the composer */
.card { width:100%; max-width:760px; background:var(--card); border-radius:32px; padding:36px; }
.card h1 { max-width:none; font-size:clamp(30px,4vw,44px); margin-bottom:10px; }
.card .sub { margin:0 0 26px; }
label { display:block; font-family:var(--hand); font-size:18px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
input, textarea { width:100%; background:var(--card2); border:0; border-radius:20px; padding:15px 20px; font:inherit; font-size:16px; color:var(--ink); outline:none;
                  transition:box-shadow .15s; }
input:focus, textarea:focus { box-shadow:0 0 0 2.5px var(--blue); }
textarea { min-height:260px; resize:vertical; line-height:1.65; font-size:15px; }
.row { margin-bottom:20px; }
.hint { color:var(--muted); font-size:13.5px; margin:10px 4px 0; }
.actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
.err { color:#d64545; font-size:14.5px; margin:12px 4px 0; min-height:18px; }
.embed { width:100%; max-width:760px; margin-top:16px; }
details { background:var(--card); border-radius:22px; padding:6px 22px; }
summary { cursor:pointer; padding:14px 0; font-weight:500; font-size:16px; list-style:none; display:flex; align-items:center; gap:8px; }
summary::-webkit-details-marker { display:none; }
summary .chev { margin-left:auto; color:var(--muted); transition:transform .2s; }

/* /templates */
header.hero { width:100%; max-width:1000px; margin-bottom:26px; }
.grid { width:100%; max-width:1000px; display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.tpl { background:var(--card); border-radius:28px; padding:24px; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s; }
.tpl:hover { transform:translateY(-4px); }
.tpl .top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.tpl .emoji { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--tint-yellow); border:3px solid var(--ink); }
.tpl:nth-child(3n+2) .emoji { background:var(--tint-blue); } .tpl:nth-child(3n) .emoji { background:var(--tint-mint); }
.tpl .emoji svg { width:24px; height:24px; stroke:var(--ink); }
.tpl .lang { margin-left:auto; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ink); background:var(--card2); border-radius:999px; padding:5px 12px; }
.tpl h3 { font-family:var(--head); font-weight:900; font-size:21px; letter-spacing:-.3px; margin:0 0 6px; }
.tpl p { color:var(--muted); font-size:15px; margin:0 0 20px; flex:1; }
.tpl .row { display:flex; align-items:center; gap:8px; margin:0; }
.open { flex:1; font-size:15px; padding:13px 16px 14px; }
.link { background:var(--card2); color:var(--ink); border:0; border-radius:999px; padding:13px 18px 14px; font:inherit; font-size:15px; cursor:pointer; white-space:nowrap; transition:background .15s; }
.link:hover { background:var(--line); }

@media (max-width:640px) {
  body { padding-top:88px; }
  .nav { padding:0 8px 0 16px; } .nav .links a:not(.pill) { display:none; } .nav span a.ghost:not(:last-child) { display:none; }
  .lock { display:flex; margin:14px 0 0; } .card { padding:24px; border-radius:26px; } .endcta { border-radius:28px; padding:40px 22px; }
}

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }