/* ==========================================================================
   Perry the Prompter — website
   --------------------------------------------------------------------------
   The look: a printed object, not a SaaS template. Warm paper, ink, one
   amber accent, an editorial serif, everything centred on one axis. Every
   competitor is dark with a purple glow; next to them this reads as a
   different class of thing. Fonts are self-hosted (fonts/README.md).
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Paper and ink */
  --paper:      #F6F1E9;   /* the page */
  --paper-2:    #EFE8DC;   /* tinted bands */
  --card:       #FCFAF6;   /* raised surfaces */
  --ink:        #14191F;   /* text */
  --ink-2:      #4A515A;   /* body copy */
  --ink-3:      #6F675C;   /* quiet labels, warm grey — 4.6:1 even on the tint, so small text stays readable */
  --line:       rgba(27, 36, 48, .10);
  --line-2:     rgba(27, 36, 48, .18);

  /* Brand */
  --night:      #1B2430;
  --sand:       #F4EDE2;
  --fur:        #6B4F3A;
  --bill:       #D98E4A;   /* the accent — sparingly */
  --bill-deep:  #B8702F;
  --bill-soft:  #F4DDC3;
  --river:      #4C8A86;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape and depth */
  --r:    18px;
  --r-lg: 26px;
  --shadow-window:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 60px 90px -45px rgba(27, 36, 48, .34),
    0 24px 40px -24px rgba(27, 36, 48, .16),
    0 0 0 1px rgba(27, 36, 48, .07);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 20px 40px -28px rgba(27, 36, 48, .25),
    0 0 0 1px rgba(27, 36, 48, .06);

  --wrap: 1160px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Paper grain. Barely there — it's what stops flat colour looking digital. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .35;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--bill-soft); color: var(--ink); }
/* No lone words at the end of a paragraph, anywhere on the site. Short
   centred lines (sub-heads, card copy) balance instead, so both lines match. */
p { text-wrap: pretty; }
.sec-sub, .gains span, .tile p, .step p, .plan-for { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--bill); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: .1em .45em;
  border-radius: 7px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-2), 0 2px 0 var(--line-2);
  font: 500 .82em/1.5 var(--sans);
  text-align: center;
  color: var(--ink);
}

/* ---------------------------------------------------------------- type --- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 4.7rem);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.display-sm { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; margin: 0; }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink-2); margin: 0; }
.lede em { font-style: normal; color: var(--ink); font-weight: 500; }

/* The amber underline under Perry's half of a sentence, drawn like a pen
   stroke rather than a border. It draws itself in when the line appears. */
.swash { position: relative; white-space: nowrap; color: var(--fur); }
.swash::after {
  content: "";
  position: absolute;
  left: -.02em; right: -.04em; bottom: -.07em;
  height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C60 6 140 4 297 9' stroke='%23D98E4A' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease) .35s;
}
.in .swash::after, .in.swash::after { transform: scaleX(1); }
.strike { position: relative; color: var(--ink-3); }
.strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 54%;
  height: .06em; background: var(--ink-3); transform: rotate(-2deg);
}

/* Small label above each heading: a quiet pill with a dot */
.label {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 .74rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bill); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font: 500 .97rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { height: 38px; padding: 0 16px; font-size: .9rem; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn-ink {
  background: var(--night);
  color: var(--sand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 12px 24px -12px rgba(20, 25, 31, .6);
}
.btn-ink:hover { background: #222D3B; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 18px 30px -12px rgba(20, 25, 31, .6); }
.btn-bill {
  background: var(--bill);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 24px -12px rgba(217, 142, 74, .8);
}
.btn-bill:hover { background: #E19A58; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn:disabled { cursor: default; opacity: .5; transform: none; }
.btn-text { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--ink); }
.btn-text span { transition: transform .25s var(--ease); }
.btn-text:hover span { transform: translateX(4px); }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled {
  background: rgba(246, 241, 233, .8);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
/* Three columns, so the links sit exactly on the page's centre line */
.nav-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 16px max(24px, env(safe-area-inset-left));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.logo span { font: 400 1.5rem/1 var(--serif); letter-spacing: -.02em; }
.nav-links { display: flex; gap: 34px; }
.nav-links a { font-size: .94rem; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-login { background: none; border: 0; cursor: pointer; font-size: .94rem; font-weight: 500; padding: 8px 6px; color: var(--ink); }
.nav-login:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; position: relative; }
.nav-burger span { position: absolute; left: 10px; right: 10px; height: 1.6px; background: var(--ink); transition: transform .3s var(--ease); }
.nav-burger span:first-child { top: 16px; }
.nav-burger span:last-child { top: 23px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.sheet { display: grid; padding: 8px 24px 24px; background: rgba(246, 241, 233, .97); box-shadow: 0 1px 0 var(--line); }
.sheet a, .sheet button {
  padding: 15px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: center; font-size: 1.1rem; text-decoration: none; cursor: pointer;
}

/* Account button and menu (signed in) */
.acct { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 4px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2);
}
.acct-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fur); color: var(--sand); font: 600 .85rem/1 var(--sans); text-transform: uppercase; }
.acct-plan { font-size: .84rem; font-weight: 500; }
.acct-plan.pro { color: var(--bill-deep); }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; padding: 8px;
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow-card);
  display: grid;
}
.acct-email { margin: 6px 10px 8px; font-size: .82rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.acct-menu button { text-align: left; padding: 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: .92rem; }
.acct-menu button:hover { background: var(--paper-2); }

/* ----------------------------------------------------------------- hero -- */
/* Tight on purpose: the demo is the key part, so it should be on screen early. */
.hero { position: relative; padding: clamp(28px, 3.6vw, 52px) 0 0; overflow: hidden; }
/* A faint dotted field behind the headline, fading out towards the edges,
   so the top of the page has texture without having decoration. */
.hero::before {
  content: "";
  position: absolute; inset: 0 0 35% 0;
  background-image: radial-gradient(rgba(27, 36, 48, .13) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px; padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -10px rgba(27, 36, 48, .3);
  font-size: .86rem; font-weight: 500; color: var(--ink-2);
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--river); box-shadow: 0 0 0 4px rgba(76, 138, 134, .16); }
.hero .lede { margin-top: 20px; max-width: 38ch; text-wrap: balance; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
/* The line under the button that answers "what's the catch?" */
.hero .micro { margin: 18px 0 0; font-size: .85rem; color: var(--ink-3); letter-spacing: .01em; }

/* Works in: the seven apps, as monochrome marks with their names */
/* Under the demo now: "also works in…" follows the chatgpt.com window */
.works-below { margin: 6px auto 0; padding: 0 24px clamp(76px, 9vw, 112px); }
.works { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.works-label { font: 500 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; max-width: 760px; }
.works li { display: inline-flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 500; color: var(--ink-2); transition: color .2s; }
.works li:hover { color: var(--ink); }
.works li svg { width: 22px; height: 22px; fill: currentColor; }

/* --------------------------------------------------------- the demo ------ */
.stage {
  position: relative;
  max-width: 1150px;
  margin: clamp(30px, 3.4vw, 42px) auto 0;
  padding: 0 24px 34px;
  /* Settings on the left, the chat on the right — read left to right, it's
     "your profile → your prompt". Centred together as one group. */
  display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 30px; align-items: start;
}
/* A warm wash behind the window, so it sits in light rather than on a void */
.stage::before {
  content: "";
  position: absolute; left: 10%; right: 10%; top: 6%; bottom: 14%;
  background: radial-gradient(60% 60% at 50% 45%, rgba(217, 142, 74, .24), transparent 70%);
  filter: blur(34px);
  z-index: -1;
}
.window {
  position: relative;
  margin: 0;
  width: 100%;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}
.window-bar {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#F8F4EE, #F2EDE5);
}
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #E1D9CD; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08); }
.addr {
  flex: 0 1 300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8rem; color: var(--ink-3);
}
.addr-app { width: 14px; height: 14px; fill: var(--ink); }
.bar-spacer { width: 47px; }
.window-body { padding: clamp(26px, 3.4vw, 42px) clamp(18px, 5vw, 64px) clamp(26px, 3.4vw, 38px); background: #FDFCFA; }
.greeting { margin: 0 0 20px; text-align: center; font: 400 clamp(1.45rem, 2.4vw, 1.9rem)/1.2 var(--serif); letter-spacing: -.02em; }

.composer {
  position: relative;
  max-width: 620px; margin: 0 auto;
  padding: 20px 20px 14px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 36, 48, .1), 0 14px 30px -18px rgba(27, 36, 48, .3);
  transition: box-shadow .4s var(--ease);
}
.composer.done { box-shadow: 0 0 0 1px rgba(217, 142, 74, .55), 0 0 0 6px rgba(217, 142, 74, .12), 0 14px 30px -18px rgba(27, 36, 48, .3); }
.draft { margin: 0 0 18px; min-height: 3.2em; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
/* The box is typeable: a text cursor, no browser outline (the composer shows
   focus instead), and a placeholder when it's been cleared. */
.draft[contenteditable="true"], .draft[contenteditable="plaintext-only"] { cursor: text; outline: none; }
.draft:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
/* Looks like a live input before anyone touches it: a blinking cursor after
   the last word. Gone on focus (the real one takes over) and during a dive. */
.composer:not(:focus-within):not(.busy) .draft::after {
  content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 2px;
  vertical-align: -.2em; background: var(--ink); animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.composer { cursor: text; }
.composer button { cursor: pointer; }
.composer:hover:not(:focus-within):not(.busy) { box-shadow: 0 0 0 1px rgba(27, 36, 48, .3), 0 14px 30px -18px rgba(27, 36, 48, .3); }
/* The tab on the box's top edge: "Type your own" */
.edit-tab {
  position: absolute; top: -12px; left: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--bill); color: var(--ink);
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 4px 10px -4px rgba(217, 142, 74, .7);
  transition: opacity .25s, transform .25s var(--ease);
  pointer-events: none;
}
.edit-tab svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.composer:focus-within .edit-tab, .composer.busy .edit-tab { opacity: 0; transform: translateY(4px); }
.composer:focus-within { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 6px rgba(217, 142, 74, .14), 0 14px 30px -18px rgba(27, 36, 48, .3); }
/* Under the chat: the invitation to try, and any message about limits */
.try-hint { max-width: 620px; margin: 16px auto 0; text-align: center; font-size: .9rem; font-weight: 500; color: var(--fur); animation: chip .5s var(--ease) both; }
.demo-msg {
  max-width: 620px; margin: 16px auto 0; padding: 12px 16px; border-radius: 12px;
  background: var(--bill-soft); color: #6E4520; font-size: .9rem; text-align: center;
}
.demo-msg a { color: #5A3818; font-weight: 600; text-underline-offset: 3px; }
/* Words are inline-blocks so they can move: old ones sink, new ones rise. */
.draft .w, .draft .o { display: inline-block; }
.draft .w { opacity: 0; animation: rise .55s var(--ease) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* The rough draft going under: each word drops, tips and blurs out, in a wave
   spreading from where Perry hit (the delay is set per word in demo.js). */
.draft .o.sink { animation: sink .5s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes sink { to { opacity: 0; transform: translateY(16px) rotate(var(--tip, 4deg)); filter: blur(4px); } }
.draft mark { background: var(--bill-soft); color: var(--ink); border-radius: 4px; padding: 0 2px; animation: mark-in .55s var(--ease) both; }
@keyframes mark-in { from { background-color: transparent; } }
.draft.fading { opacity: 0; filter: blur(3px); transition: opacity .3s, filter .3s; }
@keyframes word { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

.composer-foot { display: flex; align-items: center; gap: 10px; }
.cf-btn, .cf-send { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.cf-btn svg, .cf-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cf-send { background: var(--ink); color: #fff; box-shadow: none; border: 0; padding: 0; cursor: pointer; }
.cf-spacer { flex: 1; }

/* Perry's button. Breathes while working: a slow pulse and a warm halo. */
.perry {
  position: relative;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 0 0 1px rgba(107, 79, 58, .25), 0 6px 14px -6px rgba(107, 79, 58, .6);
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.perry img { width: 40px; height: 40px; }
.perry:hover { transform: scale(1.07); }
.perry::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; opacity: 0; }
.perry.working { animation: breathe 1.5s ease-in-out infinite; }
/* Asking to be clicked: a hop and a wiggle, then stillness — repeating every
   2.6s with a warm pulse, so it catches the eye without nagging. */
.perry.calling { animation: beckon 2.6s ease-in-out infinite; }
.perry.calling::after { opacity: 1; animation: halo 2.6s ease-out infinite; }
@keyframes beckon {
  0%, 34%, 100% { transform: none; }
  7%  { transform: translateY(-8px) rotate(-10deg); }
  14% { transform: translateY(0) rotate(0) scale(1.04, .96); }
  20% { transform: translateY(-3px) rotate(6deg); }
  26% { transform: none; }
}
.perry.working::after { opacity: 1; animation: halo 1.5s ease-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(217, 142, 74, .45); } 100% { box-shadow: 0 0 0 14px rgba(217, 142, 74, 0); } }

/* "Click me": in the chat box's own bottom bar, just left of Perry, pointing
   right at him. Hanging below him it collided with the hint line underneath.
   right = composer padding + send button + gap + Perry + breathing room. */
.nudge {
  position: absolute; right: 118px; bottom: 20px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--night); color: var(--sand);
  font-size: .78rem; font-weight: 500; white-space: nowrap;
  animation: nudge-x 1.6s ease-in-out infinite;
  transition: opacity .3s;
}
.nudge::before { content: ""; position: absolute; right: -4px; top: 50%; margin-top: -5px; width: 10px; height: 10px; background: var(--night); transform: rotate(45deg); border-radius: 2px; }
.nudge.gone { opacity: 0; pointer-events: none; }
/* Leans away and back towards Perry, like a finger tapping at him */
@keyframes nudge-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

.after { max-width: 620px; margin: 18px auto 0; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; text-align: left;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(76, 138, 134, .1); color: #2F6662;
  font-size: .8rem; font-weight: 500;
  opacity: 0; transform: translateY(6px);
  animation: chip .5s var(--ease) forwards;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--river); }
.chips.generic .chip { background: rgba(27, 36, 48, .06); color: var(--ink-3); }
.chips.generic .chip::before { background: var(--ink-3); }
@keyframes chip { to { opacity: 1; transform: none; } }
.undo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: none; box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .82rem; font-weight: 500;
}
.undo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.undo:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* ------------------------------------------------------------ the dive -- */
/* Anticipation: the button dips before he jumps (after :hover, so it wins) */
.perry.crouch { transform: scale(.86); transition: transform .17s ease-in; }
/* Perry leaves the button while he's away */
.perry img { transition: opacity .12s, transform .25s var(--ease); }
.perry.away img { opacity: 0; transform: scale(.4); }
.perry.away { box-shadow: 0 0 0 1px rgba(107, 79, 58, .18); }
/* ...and pops back in when he lands home */
.perry.back img { animation: pop-in .5s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes pop-in { from { opacity: 0; transform: scale(.3) rotate(-12deg); } }

/* The kick-off puff at the button */
.puff {
  position: absolute; z-index: 2; left: var(--sx); top: var(--sy);
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 2px solid rgba(217, 142, 74, .6);
  opacity: 0; pointer-events: none;
}
.puff.go { animation: puff .5s var(--ease) forwards; }
@keyframes puff { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }

/* The diver. Three nested layers make the arc real: the outer one moves
   sideways at a steady pace, the middle one rises then falls with different
   easing each way (that's the parabola), the inner one tilts and squashes. */
.diver {
  position: absolute; z-index: 3;
  left: var(--sx); top: var(--sy);
  width: 80px; height: 50px; margin: -25px 0 0 -40px;   /* centred on the start point */
  pointer-events: none;
  opacity: 0;
}
.diver-y, .diver-body { width: 100%; height: 100%; }
.diver-body { transform-origin: 38% 55%; filter: drop-shadow(0 7px 7px rgba(27, 36, 48, .2)); }

.diver.go { opacity: 1; animation: fly-x var(--dur, .62s) linear forwards; }
.diver.go .diver-y { animation: fly-y var(--dur, .62s) forwards; }
.diver.go .diver-body { animation: fly-body var(--dur, .62s) forwards; }
@keyframes fly-x { to { transform: translateX(var(--dx)); } }
@keyframes fly-y {
  0%   { transform: translateY(0);           animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  42%  { transform: translateY(var(--apex)); animation-timing-function: cubic-bezier(.55, 0, .8, .45); }
  100% { transform: translateY(var(--dy)); }
}
/* He faces left, so nose-up is a clockwise turn and nose-down anticlockwise.
   Crouch, stretch on take-off, level at the top, nose first into the text. */
@keyframes fly-body {
  0%   { transform: rotate(8deg)   scale(1.12, .82); }
  14%  { transform: rotate(24deg)  scale(.9, 1.14); }
  45%  { transform: rotate(0deg)   scale(1); }
  100% { transform: rotate(-58deg) scale(.94, 1.06); }
}

/* The text line is the water's surface. Clipping the middle layer at the
   line (it doesn't rotate, so the cut stays level) means he slides UNDER the
   words instead of fading — the difference between diving and vanishing. */
.diver.under, .diver.emerge { opacity: 1; }
/* Under: held where he landed. (Emerge needs no offset — he's placed at the
   end of the new prompt before he comes up.) */
.diver.under { transform: translateX(var(--dx)); }
.diver.under .diver-y { transform: translateY(var(--dy)); clip-path: polygon(-400% -800%, 500% -800%, 500% 60%, -400% 60%); }
.diver.under .diver-body { animation: go-under .36s cubic-bezier(.5, 0, .9, .45) forwards; }
@keyframes go-under {
  from { transform: rotate(-58deg) scale(.94, 1.06); }
  to   { transform: translate(-6px, 46px) rotate(-74deg) scale(.9, 1.1); }
}

/* Coming back up at the end of the new prompt, now facing right (scaleX(-1)
   flips him, so here nose-up is anticlockwise). Rises through the surface. */
.diver.emerge .diver-y { clip-path: polygon(-400% -800%, 500% -800%, 500% 60%, -400% 60%); }
.diver.emerge .diver-body { animation: surface .34s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes surface {
  from { transform: translateY(44px) rotate(-64deg) scaleX(-1); }
  to   { transform: translateY(-6px) rotate(-30deg) scaleX(-1); }
}

/* The hop home: same arc machinery, mirrored body, shrinking into the button */
.diver.hop { opacity: 1; animation: fly-x .5s linear forwards; }
.diver.hop .diver-y { animation: fly-y .5s forwards; }
.diver.hop .diver-body { animation: hop-body .5s forwards; }
@keyframes hop-body {
  0%   { transform: translateY(-6px) rotate(-30deg) scaleX(-1); }
  45%  { transform: rotate(-4deg) scaleX(-1); }
  85%  { transform: rotate(28deg) scale(-.7, .7); opacity: 1; }
  100% { transform: rotate(36deg) scale(-.4, .4); opacity: 0; }
}

/* The splash: two flattened ripples and six drops thrown up and out */
.splash { position: absolute; z-index: 2; left: var(--tx); top: var(--ty); width: 0; height: 0; pointer-events: none; }
.splash .ring {
  position: absolute; left: -70px; top: -16px;
  width: 140px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(217, 142, 74, .7);
  opacity: 0;
}
.splash .ring-2 { border-color: rgba(76, 138, 134, .55); }
.splash.small { transform: scale(.6); }
.splash.go .ring { animation: ripple .75s var(--ease) forwards; }
.splash.go .ring-2 { animation-delay: .12s; }
@keyframes ripple { 0% { opacity: 1; transform: scale(.15); } 100% { opacity: 0; transform: scale(1.5); } }
.splash b {
  position: absolute; left: -3.5px; top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bill);
  opacity: 0;
}
.splash b:nth-of-type(2n) { background: var(--river); width: 5px; height: 5px; }
.splash.go b { animation: drop .7s forwards; }
/* Each drop's direction, as x/y pairs: up and out, then falling back */
.splash b:nth-of-type(1) { --x: -46px; --y: -38px; }
.splash b:nth-of-type(2) { --x: -22px; --y: -54px; }
.splash b:nth-of-type(3) { --x: -4px;  --y: -46px; }
.splash b:nth-of-type(4) { --x: 18px;  --y: -56px; }
.splash b:nth-of-type(5) { --x: 40px;  --y: -40px; }
.splash b:nth-of-type(6) { --x: 58px;  --y: -24px; }
@keyframes drop {
  0%   { opacity: 1; transform: translate(0, 0) scale(.5);                 animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  55%  { opacity: 1; transform: translate(var(--x), var(--y)) scale(1);    animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.3), 18px) scale(.6); }
}

/* The profile card: pinned to the window's edge like a note, slightly askew */
.knows {
  position: relative; z-index: 2;
  margin-top: 46px;          /* level with the chat box, not the window's top bar */
  padding: 15px 17px 0;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card), 0 34px 54px -30px rgba(27, 36, 48, .4);
  overflow: hidden;
  transform: rotate(-1.5deg);
  transition: transform .5s var(--ease);
}
.knows:hover { transform: rotate(0deg) translateY(-2px); }
/* Private use: the profile greys out — and the note says Perry still helps */
.knows.is-private dl { opacity: .35; filter: grayscale(1); }

/* Role and style are editable — they look like text until you touch them */
.knows-input {
  width: 100%; margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: 6px;
  background: transparent; font: inherit; color: var(--ink);
  border-bottom: 1px dashed var(--line-2); border-radius: 6px 6px 0 0;
  transition: background .2s, box-shadow .2s;
}
/* A small pencil at the end of each editable field */
.knows-input {
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5l3 3L6 13H3v-3z' fill='none' stroke='%236F675C' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px;
}
.knows-input:hover { background-color: var(--paper-2); }
.knows-input:focus { outline: none; background-color: #fff; border-bottom-color: transparent; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.knows dt label { cursor: pointer; }

/* Detail: three choices, like the setting in the extension */
.knows dl div.stack { grid-template-columns: 1fr; gap: 8px; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg button {
  flex: 1; height: 28px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: .8rem; font-weight: 500; color: var(--ink-2);
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 36, 48, .14), 0 0 0 1px var(--line); }
.seg button:disabled { cursor: default; }

/* The Private use row, set off at the foot of the card */
.private {
  display: flex; align-items: center; gap: 12px;
  margin: 2px -17px 0; padding: 12px 17px 14px;
  border-top: 1px solid var(--line); background: var(--paper);
  cursor: pointer; transition: background .3s;
}
.knows.is-private .private { background: rgba(76, 138, 134, .1); }
.private-text { display: grid; gap: 2px; text-align: left; }
.private-text b { font-size: .86rem; font-weight: 600; }
.private-text small { font-size: .76rem; line-height: 1.35; color: var(--ink-3); }
.private .switch { margin-left: auto; flex: none; }
.knows-head { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.knows-head span { font-size: .86rem; font-weight: 600; }
.knows dl { margin: 0; transition: opacity .4s, filter .4s; }
.knows dl div { display: grid; grid-template-columns: 64px 1fr; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .85rem; text-align: left; }
.knows dl div:last-child { border-bottom: 0; }
.knows dt { color: var(--ink-3); }
.knows dd { margin: 0; }

.switch { margin-left: auto; position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.switch-track { width: 36px; height: 21px; border-radius: 999px; background: #D8D0C3; transition: background .25s; position: relative; }
.switch-dot { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .25s var(--ease); }
.switch input:checked + .switch-track { background: var(--bill); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(15px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--bill); outline-offset: 2px; }

/* -------------------------------------------------------------- sections -- */
/* --bg lets things that must match their section (the rings round the step
   numbers) follow it, now that paper and tint alternate. */
.section { padding: clamp(96px, 12vw, 150px) 0; --bg: var(--paper); }
.section-tint { background: var(--paper-2); --bg: var(--paper-2); }
.sec-head { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Why it matters: the same request played out without Perry and with him */
.sec-sub { margin: 22px 0 0; font-size: 1.15rem; color: var(--ink-2); max-width: 40ch; }
.outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; align-items: stretch; }
.chat { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: var(--r-lg); }
.chat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chat-head span:first-child { display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.rounds { padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.bubble { margin: 0; padding: 11px 15px; max-width: 88%; font-size: .93rem; line-height: 1.5; text-align: left; }
/* You on the right, the AI on the left — how every chat app lays it out */
.bubble.you { align-self: flex-end; background: var(--paper-2); border-radius: 18px 18px 5px 18px; }
.bubble.ai { align-self: flex-start; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 18px 18px 18px 5px; }
.chat-foot { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 600; text-align: center; }

.chat-without { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.chat-without .chat-head span:first-child { color: var(--ink-3); }
.chat-without .rounds { background: rgba(27, 36, 48, .07); color: var(--ink-2); }
.chat-without .bubble { color: var(--ink-2); }
.chat-without .bubble.ai { background: transparent; }
.chat-without .chat-foot { color: var(--ink-3); }
.chat-without .chat-foot::before { content: "↻ "; }

.chat-with { background: var(--card); box-shadow: var(--shadow-card), 0 34px 64px -38px rgba(217, 142, 74, .6); }
.chat-with .chat-head span:first-child { color: var(--fur); }
.chat-with .rounds { background: var(--bill-soft); color: var(--bill-deep); }
/* Stronger than elsewhere: this highlight sits on a beige bubble, where the
   usual soft amber disappears. */
.chat-with mark { background: linear-gradient(transparent 55%, rgba(217, 142, 74, .42) 55%); color: inherit; padding: 0 1px; }
.chat-with .bubble.ai { box-shadow: inset 0 0 0 1px rgba(76, 138, 134, .35); }
.chat-with .chat-foot { color: #2F6662; }
.chat-with .chat-foot::before { content: "✓ "; }

.gains { list-style: none; margin: 56px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.gains li { display: grid; gap: 6px; }
.gains b { font: 400 1.4rem/1.2 var(--serif); letter-spacing: -.015em; }
.gains span { color: var(--ink-2); font-size: .96rem; }

/* How it works: three numbered steps, joined by a dotted line */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; text-align: center; }
.steps::before {
  content: ""; position: absolute; top: 21px; left: 17%; right: 17%;
  border-top: 1.5px dashed var(--line-2);
}
.step { position: relative; display: flex; flex-direction: column; align-items: center; }
.step-n {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--night); color: var(--sand);
  font: 400 1.2rem/1 var(--serif);
  box-shadow: 0 0 0 8px var(--bg, var(--paper));
  margin-bottom: 26px;
}
.step h3 { font-size: 1.2rem; margin: 24px 0 6px; }
.step p { margin: 0; color: var(--ink-2); font-size: .98rem; }

.vignette {
  position: relative; width: 100%;
  height: 200px; border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow-card);
  display: grid; place-items: center;
  overflow: hidden;
}
.vg-toolbar { display: flex; align-items: center; gap: 10px; width: 76%; height: 46px; padding: 0 10px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.vg-addr { flex: 1; height: 24px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.vg-icon { width: 22px; height: 22px; border-radius: 6px; background: #E4DCD0; }
.vg-perry { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); box-shadow: 0 0 0 2px var(--bill); }
.vg-toast { position: absolute; right: 14%; top: 64%; padding: 7px 12px; border-radius: 10px; background: var(--night); color: var(--sand); font-size: .78rem; font-weight: 500; }
.vg-toast::before { content: "✓ "; color: var(--bill); }
.vg-form { width: 74%; display: grid; gap: 9px; }
.vg-field { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .84rem; }
.vg-field b { font-weight: 500; color: var(--ink-3); }
.vg-composer { position: relative; width: 76%; padding: 18px 16px 50px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); display: grid; gap: 8px; }
.vg-line { height: 8px; border-radius: 4px; background: #E7E0D5; }
.vg-line.short { width: 60%; }
.vg-btn { position: absolute; right: 12px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); box-shadow: 0 0 0 1px rgba(107, 79, 58, .25); animation: breathe 2.4s ease-in-out infinite; }
.vg-keys { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }

/* The details: a calm 2×2 */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 960px; margin: 0 auto; }
.tile { padding: 22px 22px 30px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-card); text-align: center; }
.tile h3 { margin: 24px 0 6px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.15rem; }
.tile p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.tile-art { height: 170px; border-radius: var(--r); background: var(--paper); display: grid; place-items: center; padding: 18px; }
.badge { padding: 3px 8px; border-radius: 999px; background: var(--bill-soft); color: var(--bill-deep); font: 600 .66rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; }

.refine { align-content: center; gap: 14px; }
.refine .q { margin: 0; font: 400 1.15rem/1.2 var(--serif); }
.refine .opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.refine .opts span { padding: 7px 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .86rem; }
.refine .opts span.on { background: var(--night); color: var(--sand); box-shadow: none; }
.toast-art { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 12px; background: var(--night); color: var(--sand); font-size: .9rem; box-shadow: 0 16px 30px -16px rgba(20, 25, 31, .6); }
.toast-art b { margin-left: 8px; color: var(--bill); font-weight: 600; }
.lib { width: min(100%, 300px); display: grid; gap: 7px; text-align: left; }
.lib-search { padding: 9px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .82rem; color: var(--ink-3); }
.lib-row { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 9px; background: #fff; font-size: .84rem; box-shadow: inset 0 0 0 1px var(--line); }
.lib-row i { font-style: normal; font-size: .72rem; color: var(--bill-deep); font-weight: 600; }
.sync { display: flex; align-items: center; gap: 12px; width: min(100%, 320px); }
.dev { padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .84rem; font-weight: 500; }
.sync-line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); position: relative; }
.sync-line i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bill); animation: travel 2.6s var(--ease) infinite; }
@keyframes travel { 0% { left: 0; } 50% { left: calc(100% - 10px); } 100% { left: 0; } }

/* Pricing */
.cycle { display: inline-flex; margin-top: 30px; padding: 4px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.cycle button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--ink-2); transition: background .25s, color .25s; }
.cycle button em { font-style: normal; margin-left: 6px; color: var(--bill-deep); font-weight: 600; }
.cycle button.on { background: var(--night); color: var(--sand); }
.cycle button.on em { color: var(--bill); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.plan {
  position: relative;
  padding: 36px 28px 32px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.plan h3 { font: 400 1.6rem/1 var(--serif); letter-spacing: -.02em; }
.price { margin: 22px 0 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 6rem; }
.price b { font: 400 3.4rem/1 var(--serif); letter-spacing: -.04em; }
.price span { font-size: .86rem; color: var(--ink-3); }
.plan ul { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: inline-grid; gap: 12px; text-align: left; width: 100%; justify-content: center; }
.plan li { position: relative; padding-left: 26px; font-size: .96rem; color: var(--ink-2); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: .45em;
  width: 12px; height: 7px;
  border-left: 1.8px solid var(--river); border-bottom: 1.8px solid var(--river);
  transform: rotate(-45deg);
}
.plan li b { color: var(--ink); font-weight: 600; }
.plan-pro { background: var(--night); color: var(--sand); box-shadow: 0 44px 80px -40px rgba(20, 25, 31, .75); transform: translateY(-10px); }
.plan-pro .price span { color: rgba(244, 237, 226, .6); }
.plan-pro ul { border-color: rgba(244, 237, 226, .14); }
.plan-pro li { color: rgba(244, 237, 226, .82); }
.plan-pro li b { color: var(--sand); }
.plan-pro li::before { border-color: var(--bill); }
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 13px; border-radius: 999px;
  background: var(--bill); color: var(--ink);
  font: 600 .7rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.plans-note { margin: 38px 0 0; text-align: center; font-size: .86rem; color: var(--ink-3); }

/* FAQ: one centred column */
.faq { max-width: 740px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:first-child { border-top: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 4px;
  font: 400 1.25rem/1.3 var(--serif); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 4px 26px; color: var(--ink-2); }
.faq a { color: var(--ink); text-underline-offset: 3px; }

/* Closing */
.closing { padding: clamp(110px, 13vw, 170px) 0; text-align: center; }
.closing-in { display: flex; flex-direction: column; align-items: center; }
.closing-perry { width: 190px; height: auto; margin-bottom: 34px; animation: idle 5s ease-in-out infinite; }
@keyframes idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.closing .lede { margin: 22px 0 36px; }

/* Footer: centred and quiet */
.foot { border-top: 1px solid var(--line); padding: 56px 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.foot-in .logo { justify-self: auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.foot-links a { font-size: .92rem; color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-fine { margin: 0; font-size: .8rem; line-height: 1.7; color: var(--ink-3); max-width: 60ch; }

/* --------------------------------------------------------------- sign-in -- */
.auth {
  width: min(420px, calc(100vw - 32px));
  padding: 40px 34px 30px;
  border: 0; border-radius: 22px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 50px 100px -30px rgba(20, 25, 31, .45), 0 0 0 1px rgba(27, 36, 48, .08);
  text-align: center;
}
.auth[open] { animation: pop .35s var(--ease); }
.auth::backdrop { background: rgba(27, 36, 48, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .3s; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
.auth-x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.auth-x:hover { background: var(--paper-2); }
.auth-x svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.auth-perry { margin: 0 auto 18px; }
.auth h2 { margin: 0; font: 400 1.85rem/1.1 var(--serif); letter-spacing: -.025em; }
.auth-sub { margin: 10px 0 26px; color: var(--ink-2); font-size: .95rem; }
.field { display: grid; gap: 7px; text-align: left; margin-bottom: 16px; }
.field span { font-size: .82rem; font-weight: 500; color: var(--ink-2); }
.field input { height: 48px; padding: 0 16px; border-radius: 12px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 400 1rem var(--sans); color: var(--ink); transition: box-shadow .2s; }
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(217, 142, 74, .18); }
.field input.code { text-align: center; font: 500 1.5rem var(--mono); letter-spacing: .45em; padding-left: calc(16px + .45em); }
.auth-fine { margin: 16px 0 0; font-size: .82rem; color: var(--ink-3); }
.auth-fine .link { font-size: .82rem; color: var(--ink-2); }
.auth-msg { margin: 14px 0 0; min-height: 1.2em; font-size: .88rem; font-weight: 500; }
.auth-msg.bad { color: #B04A2E; }
.auth-msg.good { color: #2F6662; }

/* ----------------------------------------------------------------- toast -- */
.toast {
  position: fixed; left: 50%; z-index: 120;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 13px 20px; border-radius: 14px;
  background: var(--night); color: var(--sand);
  font-size: .92rem; box-shadow: 0 20px 40px -20px rgba(20, 25, 31, .7);
  animation: pop .35s var(--ease);
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* --------------------------------------------------------------- reveals -- */
/* Only hidden when JS is running (html.js) — without it, everything shows. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .plan-pro.reveal.in { transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .swash::after { transform: scaleX(1); }
}

/* -------------------------------------------------------------- responsive -- */
@media (max-width: 1100px) {
  /* No room side by side: the card sits above the window, both centred */
  .stage { grid-template-columns: 1fr; gap: 18px; }
  .knows { width: min(100%, 420px); margin: 0 auto; transform: none; }
  .knows:hover { transform: none; }
  .window { width: min(100%, 860px); margin: 0 auto; }
}

@media (max-width: 900px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-links, .nav-login, .nav-actions .btn-sm { display: none; }
  .nav-burger { display: block; }
  .outcome { grid-template-columns: 1fr; max-width: 560px; }
  .gains { grid-template-columns: 1fr; gap: 22px; max-width: 420px; }
  .steps { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 52px; }
  .steps::before { display: none; }
  .bento { grid-template-columns: 1fr; max-width: 520px; }
  .plans { grid-template-columns: 1fr; max-width: 440px; gap: 34px; }
  .plan-pro, .js .plan-pro.reveal.in { transform: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .stage { padding-inline: 16px; }
  .window-bar .addr { flex-basis: 180px; }
  .bar-spacer { display: none; }
  .composer { padding: 16px 16px 12px; border-radius: 22px; }
  .nudge { right: 114px; bottom: 18px; }   /* the composer's padding is 16px here */
  .hero-cta { flex-direction: column; gap: 18px; width: 100%; }
  .hero-cta .btn-lg { width: 100%; }
  /* Seven logos wrap into centred rows on a phone, tighter than on desktop */
  .works ul { gap: 14px 22px; }
}

/* ============================================================ legal pages ==
   impressum / datenschutz / privacy / terms share this sheet. Plain
   documents, so they get a quiet reading layout and nothing else.
   ========================================================================== */
.legal { max-width: 720px; margin: 0 auto; padding: 72px 24px 110px; }
.legal h1 { font: 400 clamp(2.4rem, 5vw, 3.4rem)/1.05 var(--serif); letter-spacing: -.03em; margin: 0 0 10px; }
/* German has words like "Datenschutzerklärung" that are wider than a phone at
   heading size; hyphenate them (pages set lang="de") rather than scroll sideways */
.legal h1, .legal h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.legal h2 { font: 400 1.6rem/1.2 var(--serif); letter-spacing: -.02em; margin: 52px 0 14px; }
.legal h3 { margin: 30px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal .updated { color: var(--ink-3); font-size: .9rem; margin: 0 0 30px; }
.legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .94rem; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.legal th { font-weight: 600; color: var(--ink); background: var(--paper-2); }
.legal .todo { margin: 0 0 30px; padding: 16px 18px; border-radius: 12px; background: var(--bill-soft); color: #6E4520; font-size: .94rem; }
.legal .todo strong { color: #5A3818; }
.legal code { font: .9em var(--mono); background: var(--paper-2); padding: 1px 5px; border-radius: 5px; }
/* The four promises at the top of the privacy pages: plain words first */
.promises-light { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 28px; }
.promises-light div { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }
.promises-light b { font: 400 1.15rem/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.promises-light span { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 600px) { .promises-light { grid-template-columns: 1fr; } }
/* The legal pages' header: logo left, "Back" right */
.legal-nav .nav-in { grid-template-columns: 1fr auto; }

/* After checkout (thanks.html): Perry, one line, one button, centred */
.legal.thanks { text-align: center; padding-top: 56px; }
.legal.thanks img { display: block; margin: 0 auto 8px; }
.legal.thanks p { max-width: 460px; margin: 0 auto 28px; }