/* Paper theme landing (10 Nov). Generated from design-mock/paper-mock.html by port.py. Scoped to .pp so old app CSS can't leak in. */
.pp :where(h1,h2,h3,p,a,button,section,small,em,b,i,span,div){all:unset;box-sizing:border-box}
.pp :where(h1,h2,h3,p,section,div){display:block}
.pp button,.pp a{cursor:pointer}
.pp button:focus-visible,.pp a:focus-visible{outline:2px solid #C2372B;outline-offset:3px}
.pp img{max-width:100%}
.pp{
  --paper:#F5EFE3; --sheet:#FBF8F1; --ink:#1F1B16; --ink-2:#4A443B; --pencil:#8A8275;
  --rule:#D9CFBD; --line:#DDE7EE; --margin:#F0C6BF;
  --red:#C2372B; --hi:#F6E27A; --hi-soft:rgba(246,226,122,.55);
  --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
  --hand:"Caveat",cursive; --read:"Newsreader",Georgia,serif;
}
.pp *{box-sizing:border-box;margin:0}
.pp,.pp{overflow-x:clip}
.pp{
  background:var(--paper); color:var(--ink); font:16px/1.55 var(--sans);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pp .p-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.pp a{color:inherit}
.pp .p-header{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--rule)}
.pp .p-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.pp .p-logo img{width:42px;height:42px;object-fit:contain}
.pp .p-logo b{font:600 20px/1 var(--serif);letter-spacing:-.01em}
.pp .p-logo i{font:500 22px/1 var(--hand);color:var(--red);font-style:normal;margin-left:4px}
.pp .p-nav{display:flex;gap:26px;align-items:center;font-size:15px;color:var(--ink-2)}
.pp .p-nav a{text-decoration:none}
.pp .p-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:var(--ink);color:var(--sheet);
  font:600 15px/1 var(--sans);padding:13px 20px;border-radius:999px;cursor:pointer;text-decoration:none}
.pp .p-btn.p-ghost{background:transparent;color:var(--ink)}
.pp .p-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.pp /* hero */
.p-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;padding:104px 0 104px}
.pp .p-kick{font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pencil)}
.pp h1{font:600 clamp(44px,5.6vw,74px)/1.06 var(--serif);letter-spacing:-.025em;margin:20px 0 26px}
.pp h1 .p-u{position:relative;white-space:nowrap}
.pp h1 .p-u svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.pp h1 em{display:block;font-style:italic;font-weight:400;color:var(--ink-2)}
.pp .p-lede{font:400 20px/1.5 var(--read);color:var(--ink-2);max-width:30em}
.pp .p-cta{display:flex;gap:14px;align-items:center;margin-top:30px;flex-wrap:wrap}
.pp .p-note{font:500 22px/1.1 var(--hand);color:var(--red);transform:rotate(-2deg);display:inline-block}
.pp /* lined sheet */
.p-sheet{position:relative;background:var(--sheet);border-radius:3px;padding:34px 30px 34px 64px;
  box-shadow:0 1px 0 var(--rule),0 18px 40px -18px rgba(60,45,25,.35),0 2px 6px rgba(60,45,25,.08);
  background-image:linear-gradient(var(--sheet) 0 0),repeating-linear-gradient(transparent 0 31px,var(--line) 31px 32px);
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px);
  background-position:0 34px}
.pp .p-sheet::before{content:"";position:absolute;top:0;bottom:0;left:46px;width:1.5px;background:var(--margin)}
.pp .p-sheet.p-tilt{transform:rotate(1.2deg)}
.pp .p-sheet p{font:400 19px/32px var(--read);color:var(--ink)}
.pp .p-sheet .p-title{font:600 13px/32px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pencil)}
.pp .p-strike{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;color:var(--pencil)}
.pp .p-hl{background:linear-gradient(transparent 18%,var(--hi-soft) 18% 88%,transparent 88%);padding:0 2px}
.pp .p-circ{position:relative;display:inline-block}
.pp .p-circ svg{position:absolute;inset:-8px -10px;width:calc(100% + 20px);height:calc(100% + 16px);overflow:visible;pointer-events:none}
.pp .p-mnote{position:absolute;font:600 21px/1.05 var(--hand);color:var(--red);max-width:150px}
.pp .p-clip{position:absolute;top:-18px;right:34px;width:84px;transform:rotate(6deg)}
.pp .p-clip img{width:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.pp .p-clip span{position:absolute;top:-8px;left:30px;width:16px;height:44px;border:3px solid #9AA0A6;border-radius:9px;background:transparent}
.pp /* sections */
section{padding:80px 0;border-top:1px solid var(--rule)}
.pp h2{font:600 clamp(32px,4vw,48px)/1.08 var(--serif);letter-spacing:-.02em;margin:14px 0 14px;max-width:18em}
.pp .p-sub{font:400 19px/1.5 var(--read);color:var(--ink-2);max-width:34em}
.pp /* index cards */
.p-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.pp .p-card{background:var(--sheet);padding:26px 24px 28px;border-radius:3px;position:relative;
  box-shadow:0 12px 26px -16px rgba(60,45,25,.4),0 1px 3px rgba(60,45,25,.08);
  background-image:linear-gradient(to bottom,transparent 60px,var(--margin) 60px 61.5px,transparent 61.5px);background-repeat:no-repeat}
.pp .p-card:nth-child(1){transform:rotate(-1deg)}
.pp .p-card:nth-child(2){transform:rotate(.6deg)}
.pp .p-card:nth-child(3){transform:rotate(-.4deg)}
.pp .p-card .p-n{font:700 30px/1 var(--hand);color:var(--red)}
.pp .p-card h3{font:600 22px/1.2 var(--serif);margin:28px 0 10px}
.pp .p-card p{font:400 16.5px/28px var(--read);color:var(--ink-2)}
.pp .p-tape{position:absolute;top:-12px;left:50%;width:86px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(246,226,122,.6);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pp /* studio window */
.p-studio{margin-top:44px;background:#EFE7D8;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(60,45,25,.45)}
.pp .p-sbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-2)}
.pp .p-tabs{display:flex;gap:6px}
.pp .p-tabs span{padding:7px 14px;border-radius:999px}
.pp .p-tabs .p-on{background:var(--ink);color:var(--sheet)}
.pp .p-sgrid{display:grid;grid-template-columns:330px 1fr;min-height:520px}
.pp .p-sgrid>*{min-width:0}
.pp .p-chat{padding:24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:16px}
.pp .p-host{display:flex;gap:12px;align-items:flex-start}
.pp .p-host img{width:52px;height:52px;object-fit:contain;flex:none}
.pp .p-bubble{background:var(--sheet);border-radius:4px 16px 16px 16px;padding:14px 16px;font:400 16px/1.45 var(--read);box-shadow:0 1px 2px rgba(60,45,25,.1)}
.pp .p-bubble b{display:block;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil);margin-bottom:8px}
.pp .p-me{align-self:flex-end;background:transparent;border:1.5px dashed var(--pencil);border-radius:16px 4px 16px 16px;padding:12px 15px;font:400 16px/1.45 var(--read);max-width:85%}
.pp .p-mic{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:10px}
.pp .p-micdot{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:22px;box-shadow:0 0 0 6px rgba(194,55,43,.14)}
.pp .p-mic small{font:500 20px/1.1 var(--hand);color:var(--ink-2)}
.pp .p-draft{padding:28px 28px 0;position:relative}
.pp .p-draft .p-sheet{padding-top:34px;padding-right:190px;min-height:390px}
.pp .p-draft .p-mnote{right:22px}
.pp .p-dock{display:flex;align-items:center;gap:22px;padding:16px 28px 22px}
.pp .p-time{font:600 28px/1 var(--serif);font-variant-numeric:tabular-nums}
.pp .p-time small{display:block;font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil)}
.pp .p-wave{flex:1;height:44px}
.pp .p-rec{display:flex;gap:10px}
.pp /* marked feedback */
.p-marked{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;align-items:start}
.pp .p-report{background:var(--sheet);padding:30px;border-radius:3px;box-shadow:0 14px 30px -18px rgba(60,45,25,.4);position:relative}
.pp .p-grade{position:absolute;top:-30px;right:-6px;font:700 54px/1 var(--hand);color:var(--red);transform:rotate(-8deg)}
.pp .p-grade small{display:block;font-size:20px;text-align:center}
.pp .p-row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.pp .p-row:last-of-type{border-bottom:0}
.pp .p-row b{font:600 15px/1.3 var(--sans)}
.pp .p-row span{font:600 20px/1 var(--serif);font-variant-numeric:tabular-nums}
.pp .p-row em{grid-column:1/-1;font:600 20px/1.15 var(--hand);color:var(--red);font-style:normal}
.pp .p-example{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil);margin-bottom:6px}
.pp .p-pull{font:400 italic 26px/1.35 var(--read);color:var(--ink);border-left:3px solid var(--red);padding-left:22px}
.pp .p-pull + p{margin-top:16px;color:var(--ink-2)}
.pp /* privacy */
.p-privacy{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:36px}
.pp .p-privacy h3{font:600 20px/1.25 var(--serif);margin-bottom:8px}
.pp .p-privacy p{font:400 17px/1.5 var(--read);color:var(--ink-2)}
.pp .p-privacy svg{width:34px;height:34px;margin-bottom:12px;color:var(--red)}
.pp .p-doodle{position:absolute;color:#8A8275;pointer-events:none}
.pp .p-doodle path,.pp .p-doodle circle,.pp .p-doodle ellipse,.pp .p-doodle line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp #p-how{position:relative}
.pp .p-d-mic{right:2%;top:58px;width:120px;transform:rotate(8deg)}
.pp .p-end{position:relative}
.pp .p-d-plane{left:calc(50% + 150px);bottom:62px;width:190px}
@media (max-width:900px){
.pp .p-d-mic{width:84px;top:40px;right:0}
.pp .p-d-plane{display:none}
}
.pp /* end */
.p-end{text-align:center;padding:96px 0}
.pp .p-end h2{margin-left:auto;margin-right:auto}
.pp .p-end .p-cta{justify-content:center}
.pp .p-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0 40px;border-top:1px solid var(--rule);font-size:14px;color:var(--pencil)}
@media (max-width:900px){
.pp .p-hero{grid-template-columns:1fr;gap:48px;padding:64px 0 64px}
.pp .p-kick{line-height:1.5}
.pp .p-cards,.pp .p-privacy,.pp .p-marked{grid-template-columns:1fr}
.pp .p-sgrid{grid-template-columns:1fr}
.pp .p-chat{border-right:0;border-bottom:1px solid var(--rule)}
.pp .p-draft .p-sheet{padding-right:24px}
.pp .p-draft .p-mnote{position:static;display:block;margin-top:8px;max-width:none}
.pp .p-nav a{display:none}
}
@media (max-width:520px){
.pp .p-wrap{padding:0 16px}
.pp .p-sheet{padding:34px 18px 28px 48px}
.pp .p-nav .p-btn{display:none}
.pp .p-sheet.p-tilt{transform:none}
.pp .p-clip{right:10px;width:64px}
.pp .p-sbar{flex-wrap:wrap;gap:8px}
.pp .p-rec{flex-wrap:wrap}
.pp .p-sheet::before{left:34px}
.pp .p-hero .p-mnote{position:static;display:block;margin-top:6px;max-width:none}
.pp .p-dock{flex-wrap:wrap;padding:16px}
.pp .p-wave{flex-basis:100%;order:3}
.pp .p-draft{padding:18px 16px 0}
.pp section{padding:56px 0}
}
.pp{display:block;min-height:100vh}
.pp .p-btn{display:inline-flex}
.pp .p-sbar,.pp .p-tabs,.pp .p-host,.pp .p-mic,.pp .p-dock,.pp .p-rec,.pp .p-cta,.pp .p-logo,.pp .p-nav{display:flex}
@media (max-width:520px){.pp .p-grade{right:6px;top:-26px;font-size:46px}}

/* 12 Nov: home page sections fill the screen. Computers: landing-snap.js moves one section per scroll.
   Phones: CSS snap locks each section in place (tall sections still scroll inside). Off in the studio. */
@media (prefers-reduced-motion: no-preference) {
  .pp .p-hero { min-height: calc(100svh - 90px); box-sizing: border-box; }
  .pp .p-wrap > section { min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
  html.snap-js { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) and (not ((pointer: fine) and (min-width: 900px) and (min-height: 640px))) {
  /* snap removed 12 Nov */
  .pp .p-header { scroll-snap-align: start; }
  .pp .p-wrap > section { scroll-snap-align: start; }
  .pp .p-footer { scroll-snap-align: end; }
}

/* pricing (12 Nov) */
.pp .p-prices{align-items:stretch}
.pp .p-pcard{display:flex;flex-direction:column}
.pp .p-pcard h3{margin-top:10px}
.pp .p-card p.p-amt{font:600 46px/1 var(--serif);margin:4px 0 16px}
.pp .p-list{list-style:none;padding:0;margin:0 0 22px;flex:1}
.pp .p-list li{font:400 16.5px/1.5 var(--read);color:var(--ink-2);padding:6px 0 6px 22px;position:relative;border-bottom:1px dashed var(--rule)}
.pp .p-list li::before{content:"✓";position:absolute;left:0;color:var(--red);font-family:var(--hand);font-weight:700}
.pp .p-best{outline:2px solid var(--red);outline-offset:-2px}
.pp .p-pick{position:absolute;top:-30px;right:14px;transform:rotate(-4deg)}
.pp .p-soon{display:block;font:600 21px/1.1 var(--hand);color:var(--pencil);text-align:center;padding:10px 0}
.pp .p-pcard .p-btn{justify-content:center}
.pp .p-list li.p-no::before{content:"✗";color:var(--pencil)}
/* beta launch 12 Nov */
.pp .p-beta{display:inline-block;margin-left:8px;padding:2px 8px;border:1.5px solid #c8102e;border-radius:4px;color:#c8102e;font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-4deg);vertical-align:middle}
.pp .p-broke{margin-top:18px}
.pp .p-footer a{color:inherit}