/* PromptDeck's universe: the stylesheet its presentation page and its privacy
   page share, so the two read as one place. Extracted from promptdeck.html on
   2026-09-18, the day PromptDeck joined the applications catalogue. The glass
   comes from glass.css, loaded beside this one, never from here. */
/* ---------------------------------------------------------------------------
   PromptDeck's own place (docs/design/APP-UNIVERSES.md): its own ink/cream/
   violet identity, taken from the app icon, sharing nothing of the site's
   dark shell but the header glass, measurement and the Support button every
   application page owes. `data-static-page` keeps it out of the app-page
   and prerender-diff pipelines built for the catalogue's templated pages.
   --------------------------------------------------------------------------- */
:root{
  --ink:#0E0F17;
  --ink-2:#141626;
  --card:#181B2B;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --cream:#F3F0E7;
  --muted:#9B99AC;
  --dim:#6E6C80;
  --violet:#7B6BFF;
  --magenta:#E13FA6;
  --grad:linear-gradient(115deg,#5B6CFF 0%,#A24BF0 52%,#E23FA8 100%);
  --todo:#6B9BF2;
  --progress:#F0973A;
  --review:#B07CE8;
  --blocked:#F0555A;
  --done:#3FBF7F;
  --r:18px;
  --pad:clamp(20px,5vw,40px);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:-30% -10% auto;height:70vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 55% at 22% 40%,rgba(91,108,255,.20),transparent 70%),
    radial-gradient(42% 50% at 78% 30%,rgba(226,63,168,.16),transparent 70%);
}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 var(--pad)}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.028em;line-height:1.06;font-weight:680}
h1{font-size:clamp(38px,6.4vw,70px)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:clamp(19px,2vw,22px);letter-spacing:-.02em;line-height:1.25}
p{margin:0}
.lede{font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:#CFCCDD}
.muted{color:var(--muted)}
.small{font-size:14.5px;line-height:1.55}
.eyebrow{
  font:600 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
@media(max-width:560px){.eyebrow{letter-spacing:.1em;font-size:11px}}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- skip link, focus ---------- */
.skip{
  position:absolute;left:-9999px;top:.6rem;z-index:20;padding:.7rem 1.1rem;
  border-radius:999px;background:var(--violet);color:#fff;font-weight:600;text-decoration:none;
}
.skip:focus{left:var(--pad)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}

/* ---------- top bar: the site's glass (glass.css), tinted with this page's
   own ink. See docs/design/APP-UNIVERSES.md: the bar is shared, the colour
   under it is the page's. ---------- */
.bar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;
  padding:14px var(--pad);isolation:isolate;--glass:#0E0F17;
}
.bar>*:not(.glass-fade){position:relative;z-index:1}
.bar .who{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:640;letter-spacing:-.02em;color:var(--cream)}
.bar .who img{width:30px;height:30px;border-radius:8px}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14.5px}
.bar nav a{color:var(--muted);text-decoration:none}
.bar nav a:hover{color:var(--cream)}
@media(max-width:620px){.bar nav a.hide-s{display:none}}
/* The one button every application bar carries: Support, at the right, to
   the contact page in this application's support mode (site convention). */
.bar .support{padding:9px 16px;font-size:14px}

/* ---------- agent-ready badge (reusable across every Appro app page) -------
   Wording is fixed: "Agent-ready", never "Made for AI agents" (it reads as if
   the agent were the customer) and never "Works with AI Agents" (a reserved
   claim). The subline carries the meaning in one breath.
   -------------------------------------------------------------------------- */
.agent-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 15px 8px 11px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  text-decoration:none;font-size:14px;line-height:1;white-space:nowrap;
}
.agent-badge:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.24)}
.agent-badge i{
  display:grid;place-items:center;width:23px;height:23px;border-radius:7px;
  background:var(--grad);font:600 12px/1 var(--mono);color:#fff;font-style:normal;
}
.agent-badge b{font-weight:620;letter-spacing:-.01em}
.agent-badge span{color:var(--dim);font-size:13px}
@media(max-width:560px){
  /* Keep the subline: it is what stops "Agent-ready" reading as "for agents". */
  .agent-badge{flex-wrap:wrap;justify-content:center;border-radius:16px;padding:11px 16px;white-space:normal}
  .agent-badge span{flex:0 0 100%;text-align:center;margin-top:5px;line-height:1.35}
}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,8vw,92px) 0 0;text-align:center}
.hero h1{margin:18px auto 0;max-width:15ch}
.hero .lede{margin:22px auto 0;max-width:60ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:32px 0 0}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;
  font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;
}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -12px rgba(162,75,240,.8)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:var(--line-2);color:var(--cream)}
.btn.ghost:hover{background:rgba(255,255,255,.05)}
.btn.plain{background:rgba(255,255,255,.06);color:var(--cream)}
.btn.plain:hover{background:rgba(255,255,255,.1)}
.status-line{
  margin:20px auto 0;max-width:36ch;
  font:500 13.5px/1.7 var(--mono);color:var(--dim);
}
.dot{
  display:inline-block;vertical-align:1px;width:7px;height:7px;margin-right:10px;
  border-radius:50%;background:var(--progress);box-shadow:0 0 0 4px rgba(240,151,58,.16);
}
.badges{display:flex;justify-content:center;margin:26px 0 0}

.shot{
  border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  background:var(--ink-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.04) inset;
}
/* The hero image stands on the page with nothing drawn behind or over it:
   no frame, no panel, no fade. A device mockup brings its own shadow. */
.hero-shot{margin:clamp(32px,5vw,56px) auto 0;max-width:1120px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}

/* ---------- chip strip ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:clamp(42px,6vw,60px) 0 0}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;
  font:600 13px/1 -apple-system,system-ui,sans-serif;border:1px solid;
}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal}
.c-todo{color:var(--todo);border-color:rgba(107,155,242,.3);background:rgba(107,155,242,.1)}
.c-prog{color:var(--progress);border-color:rgba(240,151,58,.3);background:rgba(240,151,58,.1)}
.c-rev{color:var(--review);border-color:rgba(176,124,232,.3);background:rgba(176,124,232,.1)}
.c-blk{color:var(--blocked);border-color:rgba(240,85,90,.3);background:rgba(240,85,90,.1)}
.c-done{color:var(--done);border-color:rgba(63,191,127,.3);background:rgba(63,191,127,.1)}
.c-pause{color:var(--muted);border-color:var(--line-2);background:rgba(255,255,255,.04)}

/* ---------- sections ---------- */
section{padding:clamp(64px,10vw,120px) 0 0}
main>section:last-of-type{padding-bottom:clamp(64px,10vw,120px)}
.head{max-width:62ch}
.head h2{margin:14px 0 0}
.head p{margin:18px 0 0}
.center{margin-inline:auto;text-align:center}

.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center;margin:clamp(34px,5vw,56px) 0 0}
/* A grid track never shrinks below its content unless told to, and a panning
   capture would otherwise push the whole page wider than a phone. */
.split>*{min-width:0}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1.15fr}
  .split.flip{grid-template-columns:1.15fr 1fr}
  .split.flip>*:first-child{order:2}
}
/* A stacked row: copy in a readable column, then the capture at full width.
   Squeezing a whole app window into half a split makes its UI unreadable, so
   only tight detail crops go in a .split. */
.stack{margin:clamp(34px,5vw,56px) 0 0}
.stack .copy{max-width:62ch}
.stack .copy h3{margin:0 0 14px}
.stack .copy p+p{margin-top:14px}
.stack .shot{margin-top:clamp(24px,3.5vw,34px)}

/* Every body capture is a tight crop with an explicit display width, set per
   shot with --w. The captures are 1x, so --w stays within about 1.4x their own
   pixel width: enough for the UI to read large, short of visible mush. Raise
   these once 2x captures replace the assets. */
.shot{max-width:var(--w,none)}
/* Fill the frame: without this an image just sits at its own pixel width and
   --w does nothing. Auto inline margins are deliberately not on the base rule,
   because they cancel a grid item's stretch and shrink it back to that same
   pixel width; only the stacked rows, which are plain blocks, get centred. */
.shot img{width:100%;height:auto}
.stack .shot{margin-inline:auto}
/* A full window squeezed into a phone is unreadable, so let it pan instead. */
@media(max-width:760px){
  .shot.wide{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .shot.wide img{width:860px;max-width:none}
}
.split .copy h3{margin:0 0 14px}
.split .copy p+p{margin-top:14px}

.grid{display:grid;gap:16px;margin:clamp(34px,5vw,52px) 0 0}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  padding:26px 24px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line);
}
.card h3{margin:0 0 10px;font-size:19px}
.card p{color:var(--muted);font-size:15.5px;line-height:1.55}
.card .ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin:0 0 16px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font:600 15px/1 var(--mono);color:var(--violet);
}

/* ---------- code ---------- */
.code{
  margin:clamp(28px,4vw,40px) 0 0;padding:24px 26px;border-radius:14px;background:#0A0B12;
  border:1px solid var(--line);font:13.5px/1.9 var(--mono);color:#C9C6D8;
  white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
@media(max-width:560px){.code{font-size:12px;padding:18px 16px}}
.code .c{color:var(--dim)}
.code .k{color:#8FB8FF}
.code .s{color:#7FD3A6}
.code b{color:var(--cream);font-weight:600}

/* ---------- spec table ---------- */
.specs{display:grid;gap:0;margin:clamp(30px,4vw,44px) 0 0;border-top:1px solid var(--line)}
.specs div{
  display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:14px 24px;
  padding:16px 2px;border-bottom:1px solid var(--line);align-items:baseline;
}
.specs dt,.specs b{font:600 13px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.specs span{color:#CFCCDD;font-size:16px}
@media(max-width:560px){.specs div{grid-template-columns:1fr;gap:4px}}

/* ---------- note / honesty block ---------- */
.note{
  margin:clamp(34px,5vw,52px) 0 0;padding:24px 26px;border-radius:var(--r);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.note p{color:var(--muted);font-size:15.5px}
.note p+p{margin-top:12px}
.note b{color:var(--cream);font-weight:620}

/* ---------- closing ---------- */

footer{border-top:1px solid var(--line);padding:30px 0 50px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
footer a{color:var(--muted);text-decoration:none;font-size:14.5px}
footer a:hover{color:var(--cream)}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
.copyline{font-size:14px;color:var(--dim)}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- policy page (the auto-rendered privacy route, policy-page.js) --
   PromptDeck's own place is drawn by hand; its privacy route is not, because
   the text has to stay one source (policy-data.js / the "no policy yet"
   fallback) for every application. Only the room around it is this file's. */
footer .by{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-weight:640;color:var(--cream)}
.tilerow{display:flex;gap:5px}
.tilerow i{width:9px;height:9px;border-radius:3px;background:var(--grad)}
.tilerow i:nth-child(2){opacity:.8}
.tilerow i:nth-child(3){opacity:.6}
.tilerow i:nth-child(4){opacity:.4}
footer p{font-size:14px;color:var(--dim);margin:0}

.policy-page section{padding:56px 0 90px}
.policy-page .wrap{max-width:44rem}
.policy-page .kicker{display:block;margin-bottom:16px;font:600 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.policy-page h1{margin-bottom:18px}
.policy-page p,.policy-page li{color:var(--muted);line-height:1.65}
.policy-page p+p{margin-top:14px}
.policy-page ul{margin:10px 0 0;padding-left:20px}
.policy-page .said{margin:0 0 26px;padding-left:14px;border-left:2px solid var(--violet);color:var(--dim);font-size:14px}
.policy-page .policy-date{color:var(--dim);font:600 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-top:30px}
.policy-page .policy-contact{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.policy-page .policy-contact a{font-weight:600;color:var(--cream)}
.policy-page .app-pending{color:var(--muted);font-size:17px;line-height:1.6;max-width:52ch}