/* PenBot UI refresh (v38). Loaded after site.css on content pages only (never in design-tool.html or capture.html).
   To switch the whole refresh off, remove the ui2.css and ui2.js tags from the pages. */
:root{--paper:#fffdf8;--line:#ece3d4;--muted:#55657a;--r:18px;--sh:0 1px 2px rgba(20,36,53,.06),0 8px 28px rgba(20,36,53,.08);--sh2:0 2px 4px rgba(20,36,53,.08),0 16px 40px rgba(20,36,53,.14)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--cream);text-rendering:optimizeLegibility}
::selection{background:#c9d8f5}
a{color:var(--ink)}
:focus-visible{outline:3px solid #f2b705;outline-offset:2px;border-radius:6px}

/* headings: keep the Dancing Script brand on h1/h2, plain and readable for card titles */
h1{letter-spacing:-.01em}
h3{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em}

/* header */
header{transition:box-shadow .2s}
header.pbsc{box-shadow:0 6px 20px rgba(0,0,0,.18)}
header nav a{padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
header nav a.on{border-bottom-color:#7fc8a0}
@media(max-width:860px){
 #mt{min-width:44px;min-height:44px;font-size:20px;cursor:pointer}
 header nav{padding:8px 16px 18px!important;box-shadow:0 18px 30px rgba(0,0,0,.25);max-height:calc(100vh - 70px);overflow:auto}
 header nav a{display:flex!important;align-items:center;min-height:48px;margin:0!important;padding:0 6px;font-size:17px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#dfe8f0}
 header nav a.on{color:#fff;background:rgba(255,255,255,.06);border-radius:8px}
 header nav .pbnavcta{margin-top:12px;justify-content:center;background:var(--go);color:#fff;border-radius:12px;border:0!important;font-weight:700}
}

/* buttons */
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;transition:transform .12s,box-shadow .15s,filter .15s;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,36,53,.18)}
.btn:active{transform:translateY(0)}
.btn.go{background:var(--go)}

/* cards */
.card,.pcard,.audc,details{box-shadow:var(--sh)}
a.card,a.pcard,a.audc,.pbuc a{transition:transform .15s,box-shadow .2s}
a.card:hover,a.pcard:hover,a.audc:hover,.pbuc a:hover{transform:translateY(-3px);box-shadow:var(--sh2)}

/* product cards: compact side-by-side on phones instead of tall empty picture boxes */
@media(max-width:700px){
 .pcards{gap:12px!important}
 .pcard{display:grid!important;grid-template-columns:112px 1fr;grid-template-rows:auto auto 1fr;align-items:start;column-gap:4px}
 .pcard .pimg,.pcard img{grid-row:1/4;width:112px!important;height:100%!important;min-height:112px;aspect-ratio:auto!important;object-fit:contain}
 .pcard b{padding:14px 14px 0!important}
 .pcard span{padding:2px 14px!important}
 .pcard em{padding:2px 14px 14px!important}
}

/* home: steps strip stacks cleanly on phones */
@media(max-width:600px){
 .diff{grid-template-columns:1fr!important}
 .diff>*{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:start;padding:16px 18px!important;border-right:0!important}
 .diff .num{grid-row:1/3;font-size:34px!important}
 .diff h3{font-size:17px;margin:2px 0 0!important}
 .diff p{margin:4px 0 0!important}
}

/* home: trust strip under the hero */
.pbtrust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0 8px;padding:0;list-style:none}
.pbtrust li{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh);font-weight:600;font-size:14px;line-height:1.3}
.pbtrust svg{flex:0 0 26px;width:26px;height:26px;color:var(--go)}
@media(max-width:900px){.pbtrust{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.pbtrust li{font-size:13px;padding:10px 12px}}

/* section headings */
.pbsh{text-align:center;max-width:680px;margin:48px auto 18px}
.pbsh .kicker,.pbk{display:inline-block;font:700 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--go);margin:0 0 4px}
.pbsh h2{margin:.1em 0}
.pbsh p{color:var(--muted);margin:.3em 0 0;font-size:17px}

/* home: use cases */
.pbuc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pbuc a{display:block;background:#fff;border-radius:var(--r);padding:18px 18px 16px;text-decoration:none;color:var(--navy);box-shadow:var(--sh);position:relative;overflow:hidden}
.pbuc a:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--b2)}
.pbuc a:nth-child(3n+2):before{background:#7fc8a0}.pbuc a:nth-child(3n):before{background:#e7b46a}
.pbuc .ic{font-size:26px;line-height:1}
.pbuc b{display:block;font-size:17px;margin:8px 0 4px}
.pbuc span{display:block;font-size:14px;color:var(--muted)}
.pbuc em{display:block;font-style:normal;font-weight:700;font-size:14px;color:var(--ink);margin-top:10px}
@media(max-width:900px){.pbuc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pbuc{grid-template-columns:1fr}.pbuc a{display:grid;grid-template-columns:40px 1fr;column-gap:10px;padding:14px 16px}.pbuc .ic{grid-row:1/4;font-size:28px;padding-top:6px}.pbuc b{margin:0 0 2px}.pbuc em{margin-top:6px}}

/* home: real pen vs printed */
.pbvs{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--sh2);max-width:920px;margin:0 auto}
.pbvs>div{padding:24px 26px}
.pbvs .us{background:linear-gradient(160deg,#f2faf5,#fff 60%)}
.pbvs .them{background:#fafafa;color:#5f6b78}
.pbvs h3{margin:0 0 10px;display:flex;align-items:center;gap:8px}
.pbvs ul{list-style:none;margin:0;padding:0}
.pbvs li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid #eef0f2;font-size:15px}
.pbvs li:first-child{border-top:0}
.pbvs .us li:before{content:'✓';flex:0 0 22px;height:22px;border-radius:50%;background:var(--go);color:#fff;font:700 13px/22px Inter,sans-serif;text-align:center}
.pbvs .them li:before{content:'–';flex:0 0 22px;height:22px;border-radius:50%;background:#e4e7ea;color:#7a8592;font:700 14px/22px Inter,sans-serif;text-align:center}
@media(max-width:700px){.pbvs{grid-template-columns:1fr}.pbvs>div{padding:20px}}

/* closing call to action */
.pbend{margin:56px 0 10px;background:var(--navy);color:#fff;border-radius:24px;padding:36px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center;position:relative;overflow:hidden}
.pbend h2{color:#fff;margin:0}
.pbend p{color:#c9d6e2;margin:.4em 0 0}
.pbend .ctas{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pbend .btn.alt{background:transparent;color:#fff;border-color:#93b4c6}
.pbend:after{content:'';position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(127,200,160,.25),transparent)}
@media(max-width:700px){.pbend{grid-template-columns:1fr;padding:26px 20px;text-align:left}.pbend .ctas{justify-content:flex-start}.pbend .btn{flex:1 1 100%}}

/* hero tidy on phones: full-width buttons */
@media(max-width:600px){.hero2 .ctas{display:grid;grid-template-columns:1fr;gap:8px}.hero2 .ctas .btn{margin:0;width:100%}}

/* visualiser: watch-it-write button and pen */
.pbplay{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:6px 12px;font:600 13px Inter,sans-serif;cursor:pointer;min-height:34px}
.pbplay:hover{background:rgba(255,255,255,.16)}
.pbnib{pointer-events:none}

/* how it works: numbered timeline */
.pbsteps{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}
.pbsteps li{background:#fff;border-radius:var(--r);padding:20px 18px;box-shadow:var(--sh);position:relative;counter-increment:s}
.pbsteps li:before{content:counter(s);display:flex;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font:700 18px Inter,sans-serif;align-items:center;justify-content:center;margin-bottom:10px}
.pbsteps li:not(:last-child):after{content:'';position:absolute;top:41px;right:-14px;width:14px;height:2px;background:#c9d6e2}
.pbsteps b{display:block;font-size:17px;margin-bottom:4px}
.pbsteps span{font-size:15px;color:var(--muted)}
@media(max-width:900px){.pbsteps{grid-template-columns:1fr;gap:0;padding-left:0}.pbsteps li{display:grid;grid-template-columns:54px 1fr;border-radius:0;box-shadow:none;background:transparent;padding:0 0 22px}.pbsteps li:before{margin:0}.pbsteps li:not(:last-child):after{left:20px;top:46px;bottom:4px;right:auto;width:2px;height:auto}.pbsteps b{margin-top:8px}}

/* FAQ */
details{border:1px solid transparent;transition:border-color .15s;padding:0!important;overflow:hidden}
details[open]{border-color:var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;min-height:56px;font-size:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';flex:0 0 28px;height:28px;border-radius:50%;background:#eef3f8;color:var(--ink);font:700 18px/28px Inter,sans-serif;text-align:center;transition:transform .2s}
details[open] summary:after{content:'–'}
details>p,details>div{margin:0;padding:0 18px 16px;color:#33475b}

/* tables: hint that wide tables scroll sideways on phones */
.tw{position:relative;border-radius:12px;-webkit-overflow-scrolling:touch}
.tw td:first-child,.tw th:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:6px 0 8px -6px rgba(20,36,53,.18)}
.tw th:first-child{background:var(--b1)}
.pbswipe{display:none;font-size:13px;color:var(--muted);margin:6px 2px 0}
.tw.pbov+.pbswipe{display:block}

/* sticky call to action on phones */
.pbbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,248,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 -6px 20px rgba(20,36,53,.12);transform:translateY(110%);transition:transform .25s}
.pbbar.show{transform:none}
.pbbar .btn{flex:1;margin:0;min-height:46px;padding:10px 12px;font-size:15px}
@media(max-width:760px){.pbbar{display:flex}body.pbhasbar footer{padding-bottom:80px}}

/* footer */
footer .hw{flex-wrap:wrap;align-items:flex-start;gap:24px}
.pbfnav{display:grid;grid-template-columns:repeat(2,auto);gap:6px 28px;font-size:14px}
.pbfnav a{color:#c9d6e2;text-decoration:none;padding:4px 0;display:inline-block}.pbfnav a:hover{color:#fff;text-decoration:underline}
@media(max-width:700px){footer .hw{flex-direction:column}}

/* gentle reveal on scroll (only once JS has marked the page) */
.pbjs .pbrv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.pbjs .pbrv.in{opacity:1;transform:none}

/* contact + forms */
input,textarea,select{font:inherit}
.card input:not([type=checkbox]):not([type=radio]):not([type=file]),.card textarea{width:100%;padding:12px;border:2px solid #d5dee7;border-radius:10px;margin:4px 0 10px;background:#fff}
.card input:not([type=checkbox]):not([type=radio]):focus,.card textarea:focus{border-color:var(--ink);outline:0}
.card input[type=checkbox]{width:20px;height:20px;vertical-align:-4px;margin-right:8px}

/* placeholders for Wayne stay obvious on TEST */
.note{border-radius:12px}

/* v39: four product cards (letters, envelopes, font pack) */
.pcards.pc4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1000px){.pcards.pc4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.pcards.pc4{grid-template-columns:minmax(0,1fr)!important}}
.pcard.pcfont{outline:2px solid #7fc8a0;outline-offset:-2px}
.pbtrust a{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}
.pbtrust a:hover{text-decoration:underline}

/* v39: font pack contents */
.pbpk{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pbpk>div{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh);border-top:4px solid #7fc8a0}
.pbpk b{display:block;font-size:17px;margin-bottom:4px}
.pbpk span{font-size:14px;color:var(--muted)}
.pbpkn{text-align:center;color:var(--muted);font-size:14px;margin:14px 0 4px}
@media(max-width:900px){.pbpk{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pbpk{grid-template-columns:1fr}}

/* v40: one simple choice of how to make your font */
.pbways{margin:22px 0}
.pbwg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pbw{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh);color:inherit;text-decoration:none;border:2px solid transparent}
a.pbw:hover{border-color:#7fc8a0}
.pbw b{font-size:17px}
.pbw span{font-size:14px;font-weight:700;color:#1f6b45}
.pbw.soon{opacity:.6}.pbw.soon span{color:var(--muted)}
@media(max-width:900px){.pbwg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pbwg{grid-template-columns:1fr}}
.pbready{background:#e3f4ea;border-radius:var(--r);padding:16px;margin:14px 0}
.pbready .btn{margin:8px 8px 0 0}
#write,#ways{scroll-margin-top:90px}

/* v43: paired choices look equal; colour only on hover / tap / keyboard focus */
.hero2 .ctas .btn,.pbf .fsdone .btn,.pbf .fshb .btn{background:#fff!important;color:#1d3a8a!important;border:2px solid #1d3a8a!important;box-shadow:none!important}
.pbend .ctas .btn{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important;box-shadow:none!important}
.hero2 .ctas .btn:hover,.hero2 .ctas .btn:focus-visible,.hero2 .ctas .btn:active,.pbend .ctas .btn:hover,.pbend .ctas .btn:focus-visible,.pbend .ctas .btn:active,.pbf .fsdone .btn:hover,.pbf .fsdone .btn:focus-visible,.pbf .fsdone .btn:active,.pbf .fshb .btn:hover,.pbf .fshb .btn:focus-visible,.pbf .fshb .btn:active{background:#1f6b45!important;border-color:#1f6b45!important;color:#fff!important}