/* Type (owner, 2026-10-08): the owner switched to Lato and Outfit to match Slack's marketplace typography. Slack sets
   body text in Lato (open license) and headings in ITC Avant Garde Gothic, a commercial face we hold no licence for,
   so Outfit stands in for it: geometric, a single-storey a, a wide round o. Both come from Google Fonts only.
   Before that the owner asked for the Ahrefs look: Inter for text, Sora for headings. */
/* Palette, pastel pass (owner, 2026-10-04): the same scheme, softened. Paper, a warm charcoal for ink, a coral
   pen, a butter highlighter. Text on the coral is always ink, which keeps it readable. */
/* Brand tokens and the pieces both pages share. The idea: an editor's desk. Paper, ink, one red pen,
   and a highlighter that marks what still needs your own number. */
:root{
  --paper:#F8F4ED; --paper-2:#EFE9DD; --card:#FFFDF9; --ink:#2C2823; --ink-2:#3B3630; --body:#4A443C; --muted:#756D61;
  --line:rgba(22,19,14,.14); --line-2:rgba(22,19,14,.08);
  --pen:#F4978A; --pen-dark:#B4472F; --pen-tint:#FBE4DE; --hi:#FFE9A8;
  --on-ink:#F8F4ED; --on-ink-muted:#BDB5A6; --ink-line:rgba(245,241,232,.16);
  --disp:"Outfit","Trebuchet MS",Arial,sans-serif; --text:"Lato",Arial,sans-serif; --mono:"JetBrains Mono",Consolas,monospace;
  --r:10px; --r-lg:18px;
  --shadow:0 0 0 1px rgba(22,19,14,.06),0 2px 4px rgba(22,19,14,.06),0 18px 40px -18px rgba(22,19,14,.28);
  --shadow-lift:0 0 0 1px rgba(22,19,14,.08),0 4px 8px rgba(22,19,14,.08),0 32px 64px -24px rgba(22,19,14,.42);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font:400 16.5px/1.55 var(--text);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:700;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pen);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-size:.8em;letter-spacing:.02em}

/* ---------- buttons */
/* Shape: a bullet. Round on the left, squared on the right, where the arrow sits in its own tile. The shape comes
   from the product: a slide's rounded card with a square marker. --rl is half the button's height: a larger
   value would make the browser shrink every corner together and square off the right side.
   Motion: on hover or keyboard focus a line draws itself around the shape, starting at the round end, and the
   fill changes color in a sweep. The main button of a section also carries a slow light that travels its outline.
   Three levels, so the eye knows where to go: main (filled, with the light), second (outlined, fills on hover),
   small (toolbar and card buttons, no light). */
@property --draw{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --trace{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--ring:var(--ink);--glint:var(--pen-dark)}
.btn{--rl:26px;--rr:13px;--off:5px;position:relative;background-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border:0;
  border-radius:var(--rl) var(--rr) var(--rr) var(--rl);cursor:pointer;font:700 16px/1 var(--text);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  background-repeat:no-repeat;transition:transform .25s var(--ease),background-position .9s var(--ease),background-size .5s var(--ease),box-shadow .3s,color .3s}
.btn::before,.btn::after{content:"";position:absolute;inset:calc(var(--off) * -1);padding:2px;pointer-events:none;
  border-radius:calc(var(--rl) + var(--off)) calc(var(--rr) + var(--off)) calc(var(--rr) + var(--off)) calc(var(--rl) + var(--off));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* the outline that draws itself around the shape */
.btn::before{background:conic-gradient(from -90deg,var(--ring) var(--draw),transparent 0);transition:--draw .8s var(--ease)}
.btn:hover:not([disabled])::before,.btn:focus-visible::before{--draw:360deg}
.btn::after{display:none}
.btn:focus-visible{outline:2px solid transparent}
.btn:active:not([disabled]){transform:translateY(1px) scale(.985)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn:has(>svg){padding-right:9px}
.btn svg{flex:none;width:34px;height:34px;padding:9px;border-radius:6px;stroke-width:2.4;transition:transform .35s var(--ease),background-color .3s,color .3s}
.btn:hover:not([disabled]) svg{transform:translateX(2px)}

/* main: coral, ink text. The light travels the outline; hover sweeps a warm band across the fill. */
.btn-pen{color:var(--ink);background-image:linear-gradient(105deg,var(--pen) 0 36%,#FFDCC4 50%,var(--pen) 64% 100%);background-size:280% 100%;background-position:100% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 var(--pen-dark),0 16px 28px -16px rgba(180,71,47,.75)}
.btn-pen:hover:not([disabled]){background-position:0 0;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 var(--pen-dark),0 22px 34px -16px rgba(180,71,47,.8)}
.btn-pen svg{background:var(--ink);color:var(--hi)}
.btn-pen:hover:not([disabled]) svg{background:var(--hi);color:var(--ink)}
.btn-pen:not(.btn-sm)::after,.btn-main::after{display:block;background:conic-gradient(from var(--trace),transparent 0 72%,var(--glint) 91%,transparent 100%);animation:btn-trace 4.6s linear infinite}
.btn-pen:hover::after,.btn-main:hover::after,.btn:focus-visible::after{opacity:0}
@keyframes btn-trace{to{--trace:360deg}}
/* ink: the main button on a colored surface, and strong second actions */
.btn-ink{color:var(--on-ink);background-image:linear-gradient(105deg,var(--ink) 0 36%,#6A5F54 50%,var(--ink) 64% 100%);background-size:280% 100%;background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 26px -16px rgba(22,19,14,.7)}
.btn-ink:hover:not([disabled]){background-position:0 0;transform:translateY(-1px)}
.btn-ink svg{background:var(--pen);color:var(--ink)}
.btn-ink:hover:not([disabled]) svg{background:var(--hi)}
/* second: an outline that fills from the round end */
.btn-line{color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink));background-size:0% 100%;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-line:hover:not([disabled]){background-size:100% 100%;color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line svg{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.btn-line:hover:not([disabled]) svg{box-shadow:none;background:var(--hi);color:var(--ink)}
.btn-line.on-ink{color:var(--on-ink);background-image:linear-gradient(var(--on-ink),var(--on-ink));box-shadow:inset 0 0 0 1.5px var(--ink-line)}
.btn-line.on-ink:hover:not([disabled]){color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--on-ink)}
.btn-paper{color:var(--ink);background-color:var(--on-ink);background-image:linear-gradient(var(--hi),var(--hi));background-size:0% 100%}
.btn-paper:hover:not([disabled]){background-size:100% 100%}
.btn-sm{--rl:19px;--rr:9px;--off:4px;min-height:38px;padding:0 16px;font-size:14px;gap:9px}
.btn-sm:has(>svg){padding-right:6px}
.btn-sm svg{width:26px;height:26px;padding:6.5px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.btn::after{display:none!important}}

.field{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field:hover{border-color:rgba(22,19,14,.3)}
.field:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--hi)}
textarea.field{resize:vertical;min-height:120px;line-height:1.45}
label.lab{display:block;font:600 13px/1.2 var(--text);color:var(--muted);margin:0 0 6px}

/* ---------- pay popout */
/* A ticket, torn where the plan ends and the paying starts. The plan's deck count sits on a butter sticker over
   a small stack of slides, which fans out as the ticket arrives. One coral button, as everywhere on the page.
   It opens with no script (the popover attribute); public/pay.js makes it a modal and can put Stripe's card form
   in the lower half. Markup: public/paybox.js. Used on the landing pages and in the maker. On a phone it is a sheet from the bottom edge. The shape comes from two halves with a round
   bite out of each inner corner, so the shadow is a drop-shadow filter that follows the bites. */
.pay-direct{display:none}
@supports not selector(:popover-open){.pay-open{display:none}.pay-direct{display:inline-flex}}
.paybox{--bite:11px;position:fixed;inset:0;margin:auto;width:min(430px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 32px);padding:0;border:0;overflow:auto;background:transparent;color:var(--body);text-align:left;
  filter:drop-shadow(0 2px 3px rgba(22,19,14,.18)) drop-shadow(0 34px 44px rgba(22,19,14,.42));
  opacity:0;translate:0 20px;scale:.96;transition:opacity .26s var(--ease),translate .36s var(--ease),scale .36s var(--ease),overlay .36s allow-discrete,display .36s allow-discrete}
.paybox:popover-open,.paybox[open]{opacity:1;translate:0 0;scale:1}
@starting-style{.paybox:popover-open,.paybox[open]{opacity:0;translate:0 20px;scale:.96}}
.paybox::backdrop{background:rgba(28,25,21,0);backdrop-filter:blur(0);transition:background-color .3s,backdrop-filter .3s,overlay .3s allow-discrete,display .3s allow-discrete}
.paybox:popover-open::backdrop,.paybox[open]::backdrop{background:rgba(28,25,21,.64);backdrop-filter:blur(4px)}
@starting-style{.paybox:popover-open::backdrop,.paybox[open]::backdrop{background:rgba(28,25,21,0);backdrop-filter:blur(0)}}
.paybox[data-embedded]{width:min(520px,calc(100vw - 32px))}
.paybox-top,.paybox-pay{--ring:var(--ink);--glint:var(--pen-dark);position:relative;background-repeat:no-repeat;background-size:51% 100%;background-position:0 0,100% 0}
.paybox-top{padding:26px 26px 24px;border-radius:24px 24px 0 0;
  background-image:radial-gradient(circle var(--bite) at 0 100%,transparent calc(var(--bite) - .6px),var(--card) var(--bite)),radial-gradient(circle var(--bite) at 100% 100%,transparent calc(var(--bite) - .6px),var(--card) var(--bite))}
.paybox-pay{padding:24px 26px 24px;border-radius:0 0 24px 24px;
  background-image:radial-gradient(circle var(--bite) at 0 0,transparent calc(var(--bite) - .6px),var(--card) var(--bite)),radial-gradient(circle var(--bite) at 100% 0,transparent calc(var(--bite) - .6px),var(--card) var(--bite))}
.paybox-pay::before{content:"";position:absolute;left:calc(var(--bite) + 9px);right:calc(var(--bite) + 9px);top:-1px;border-top:2px dashed rgba(22,19,14,.2)}
.paybox-x{position:absolute;right:14px;top:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background-color:var(--paper-2);color:var(--ink);cursor:pointer;transition:background-color .2s,rotate .3s var(--ease)}
.paybox-x:hover{background-color:var(--hi);rotate:90deg}
.paybox-x svg{width:18px;height:18px}
.paybox-head{display:flex;align-items:center;gap:20px;padding-right:44px}
.paybox .paybox-head h3{font-size:26px;letter-spacing:-.02em;line-height:1.1}
.paybox-price{margin-top:6px;color:var(--muted);font-size:16px}
.paybox-price b{font:800 40px/1 var(--disp);color:var(--ink);letter-spacing:-.02em;margin-right:5px}
.paybox .ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.paybox .ticks li{display:flex;gap:10px;font-size:15.5px;line-height:1.4;color:var(--ink-2)}
.paybox .ticks svg{flex:none;width:19px;height:19px;margin-top:1px;padding:3.5px;stroke-width:3;border-radius:50%;background:var(--hi);color:var(--ink)}
/* the stack of slides and the sticker */
.paybox-art{position:relative;flex:none;width:104px;height:88px;border-radius:16px;background:var(--paper-2) radial-gradient(rgba(22,19,14,.11) 1px,transparent 1.5px) 0 0/11px 11px;box-shadow:inset 0 0 0 1px var(--line-2)}
.paybox-art i{position:absolute;left:23px;top:27px;width:58px;height:36px;border-radius:5px;background:var(--card);box-shadow:0 0 0 1px rgba(22,19,14,.13),0 7px 10px -6px rgba(22,19,14,.45);transition:rotate .55s var(--ease) .12s,translate .55s var(--ease) .12s}
.paybox-art i::before{content:"";position:absolute;left:7px;top:7px;width:22px;height:4px;border-radius:2px;background:var(--ink)}
.paybox-art i::after{content:"";position:absolute;left:7px;top:16px;width:36px;height:3px;border-radius:2px;background:rgba(22,19,14,.2);box-shadow:0 6px 0 rgba(22,19,14,.2)}
.paybox-art i:nth-child(1){rotate:-13deg;translate:-10px 3px}
.paybox-art i:nth-child(3){rotate:10deg;translate:10px 4px}
.paybox-art i:nth-child(3)::before{background:var(--pen-dark)}
.paybox-art b{position:absolute;right:-12px;top:-12px;display:grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:21px;background:var(--hi);color:var(--ink);font:800 15px/1 var(--disp);letter-spacing:-.02em;rotate:9deg;box-shadow:inset 0 0 0 1px rgba(22,19,14,.14),0 8px 14px -8px rgba(22,19,14,.6);transition:scale .5s cubic-bezier(.34,1.56,.64,1) .22s}
@starting-style{
  .paybox:popover-open .paybox-art i,.paybox[open] .paybox-art i{rotate:0deg;translate:0 0}
  .paybox:popover-open .paybox-art b,.paybox[open] .paybox-art b{scale:.3}
}
.paybox-go{width:100%;justify-content:space-between;padding-left:28px}
.paybox-note{margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.paybox-embed{margin:-6px -10px 14px;min-height:320px;border-radius:12px;overflow:hidden}
.paybox[aria-busy=true] .paybox-go{opacity:.7}
@media (max-width:560px){
  .paybox{inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:92dvh;translate:0 100%;scale:1}
  .paybox:popover-open,.paybox[open]{translate:0 0}
  .paybox[data-embedded]{width:100%}
  .paybox-top{padding:22px 20px 22px;border-radius:22px 22px 0 0}
  .paybox-pay{padding:22px 20px calc(20px + env(safe-area-inset-bottom));border-radius:0}
  .paybox-head{gap:16px}
  .paybox-art{width:92px;height:80px}.paybox-art i{left:17px;top:23px}
}
@starting-style{@media (max-width:560px){.paybox:popover-open,.paybox[open]{translate:0 100%;scale:1}}}

.wordmark{display:inline-flex;align-items:center;gap:10px;font:700 17px/1 var(--disp);letter-spacing:-.01em;text-decoration:none;color:inherit}
/* the mark: the happy robot from brand/logo (owner's pick, 2026-10-08). On the dark bars the head is paper; .on-light swaps in the ink version */
.wordmark i{display:block;width:30px;height:30px;background:url(/mark-on-dark.svg) center/contain no-repeat;position:relative;font-style:normal;flex:none}
.wordmark.on-light i{background-image:url(/mark.svg)}

mark.hi{background:linear-gradient(transparent 55%,var(--hi) 55%);color:inherit;padding:0 .08em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}