/* Parrot public pages: "pixel and paper".
   Serif prose on cream, cut through with pixel things: a pixel parrot, step-cut corners,
   hard offset shadows, mono timestamps and WhatsApp-blue double ticks. */
body.home {
  --ink: oklch(24% 0.015 150);
  --soft: oklch(24% 0.015 150 / .64);
  --hair: oklch(24% 0.015 150 / .14);
  --leaf: oklch(63% 0.17 145);
  --leaf-deep: oklch(46% 0.13 152);
  --leaf-wash: oklch(91% 0.07 135);
  --card: oklch(98.6% 0.01 85);
  --shadow: oklch(24% 0.015 150 / .9);
  /* one-step pixel corner, 4px */
  --cut: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  /* two-step pixel corner, 8px, for big panels */
  --cut2: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  background: var(--paper);
  color: var(--ink);
}
body.home ::selection { background: var(--leaf-wash); color: var(--ink); }
body.home .app-foot { display: none; }
body.home :focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 3px; }

/* ---------- header ---------- */
body.home .top { max-width: 1240px; margin: 0 auto; padding: 28px 40px 0; align-items: center; }
body.home .top .mark { display: inline-flex; align-items: center; gap: 10px; font: 600 21px var(--display); letter-spacing: -0.015em; color: var(--ink); }
body.home .top .mark img { width: 22px; height: auto; image-rendering: pixelated; }
body.home .top nav { gap: 26px; font: 500 13.5px var(--sans); }
body.home .top nav a, body.home .top nav button { color: var(--soft); text-decoration: none; }
body.home .top nav a:hover, body.home .top nav a[aria-current] { color: var(--ink); }

body.home main { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ---------- shared pieces ---------- */
/* pixel button: step-cut block with a hard shadow that it presses into */
.px-btn {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px 13px 22px; background: var(--leaf-deep); color: #fff; font: 600 15px var(--sans);
  clip-path: var(--cut); box-shadow: inset 0 -4px 0 oklch(30% 0.1 152), inset 0 2px 0 oklch(100% 0 0 / .18); transition: translate .1s steps(2), box-shadow .1s steps(2), background .15s;
}
.px-btn::after, .px-link::after { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; clip-path: polygon(0 40%, 50% 40%, 50% 0, 60% 0, 60% 10%, 70% 10%, 70% 20%, 80% 20%, 80% 30%, 90% 30%, 90% 40%, 100% 40%, 100% 60%, 90% 60%, 90% 70%, 80% 70%, 80% 80%, 70% 80%, 70% 90%, 60% 90%, 60% 100%, 50% 100%, 50% 60%, 0 60%); }
.px-btn:hover { background: oklch(40% 0.13 152); }
.px-btn:active { translate: 0 3px; box-shadow: inset 0 -1px 0 oklch(30% 0.1 152); }
.px-btn:focus-visible { outline: none; background: var(--ink); }
.px-btn:disabled { opacity: .5; cursor: default; }

.px-link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 500 17px var(--display); color: var(--ink); padding: 2px 0; border-bottom: 2px dotted var(--leaf); }
.px-link:hover { border-bottom-style: solid; }
.px-link:hover::after { translate: 3px 0; }
.px-link::after { transition: translate .15s steps(3); width: 9px; height: 9px; }
.px-link:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 4px; }

/* the parrot: blinks every few seconds, bobs when you type */
.parrot { display: block; image-rendering: pixelated; }
.parrot .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.2s steps(1) infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0); } }
.parrot.bob .body { animation: bob .26s steps(2) 2; }
@keyframes bob { 50% { transform: translateY(-1px); } }

/* ---------- home ---------- */
body.home #auth { min-height: calc(100svh - 76px); display: flex; flex-direction: column; }
body.home #auth .split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 88px; align-items: start; min-height: 0; padding-top: 64px; }
.pitch { max-width: 640px; }
.pitch h1 { font: 500 clamp(40px, 4.6vw, 62px)/1.04 var(--display); letter-spacing: -0.03em; margin: 0 0 22px; text-wrap: balance; overflow-wrap: break-word; }
.pitch .lede { font: 400 19px/1.55 var(--display); color: var(--soft); max-width: 50ch; margin: 0 0 36px; text-wrap: pretty; }

/* chat transcript: shows the product instead of describing it */
.chat { margin: 0 0 40px; display: grid; gap: 8px; max-width: 460px; }
.msg { position: relative; margin: 0; max-width: 82%; padding: 9px 12px 8px; font: 400 15px/1.4 var(--sans); clip-path: var(--cut); }
.msg .who { display: block; font: 600 12px var(--sans); color: var(--leaf-deep); margin-bottom: 2px; }
.msg .meta { display: block; text-align: right; font: 400 10.5px var(--mono); color: var(--soft); margin-top: 3px; letter-spacing: .02em; }
.msg .ticks { color: var(--tick); letter-spacing: -2px; margin: 0 2px 0 0; }
.msg.in { justify-self: start; background: var(--card); box-shadow: inset 0 -3px 0 var(--hair); animation: pop .35s steps(3) .2s both; }
.msg.out { justify-self: end; background: var(--leaf-wash); box-shadow: inset 0 -3px 0 oklch(46% 0.13 152 / .22); animation: pop .35s steps(3) 1.1s both; }
@keyframes pop { from { opacity: 0; translate: 0 6px; } }

.works { margin: 0 0 12px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--soft); }
.agents { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.agents li { box-shadow: inset 0 -2px 0 var(--hair); display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--card); clip-path: var(--cut); font: 500 13.5px var(--sans); color: var(--ink); white-space: nowrap; }
.agents li.any { background: none; outline: 1.5px dashed var(--hair); outline-offset: -1.5px; color: var(--soft); clip-path: none; }
.agents .logo { flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.agents .logo.word { background: none; -webkit-mask: none; mask: none; width: 14px; height: 14px; border: 1.5px solid currentColor; display: grid; place-items: center; box-sizing: border-box; }
.agents .logo.word::after { content: "I"; font: 700 8px/1 var(--display); }

.actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }

/* sign-up: a step-cut panel with the parrot perched on its top edge */
body.home .signup { position: sticky; top: 32px; padding-top: 70px; }
body.home .signup > .parrot { position: absolute; top: 2px; right: 34px; width: 64px; height: auto; z-index: 1; }
body.home .signup .panel { display: grid; gap: 14px; padding: 30px 28px 28px; background: var(--card); clip-path: var(--cut2); }
body.home .signup .lift { filter: drop-shadow(6px 6px 0 var(--shadow)); }
body.home .signup h2 { font: 500 28px/1.1 var(--display); letter-spacing: -0.02em; margin: 0; }
.signup .hint { margin: -6px 0 4px; font: 400 14px/1.5 var(--sans); color: var(--soft); }
body.home .signup .google { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 11px; border: 0; border-radius: 0; background: var(--paper); clip-path: var(--cut); font: 500 14px var(--sans); color: var(--ink); text-decoration: none; }
body.home .signup .google:hover { background: var(--leaf-wash); }
.signup .or { margin: 0; font: 400 11px var(--mono); color: var(--soft); text-align: center; }
body.home #authForm { display: grid; gap: 14px; }
body.home #authForm .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0; background: var(--paper); padding: 3px; clip-path: var(--cut); }
body.home #authForm .tabs button { all: unset; cursor: pointer; text-align: center; padding: 7px 0; font: 500 13px var(--sans); color: var(--soft); }
body.home #authForm .tabs button.on { background: var(--card); color: var(--ink); clip-path: var(--cut); }
body.home #authForm .tabs button:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: -2px; }
body.home #authForm label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; font: 500 12px var(--sans); color: var(--soft); }
body.home #authForm input { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: 0; background: var(--paper); box-shadow: inset 0 -2px 0 var(--hair); font: 400 15px var(--sans); color: var(--ink); }
body.home #authForm input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--leaf-deep); background: #fff; }
body.home #authForm .px-btn { justify-content: space-between; width: 100%; margin-top: 4px; }
body.home .err { font-size: 13px; }

body.home .foot { max-width: none; margin: auto 0 0; padding: 72px 0 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 12px var(--sans); color: var(--ink); }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot span:last-child { color: var(--soft); }

/* ---------- pricing ---------- */
body.home main.pricing { max-width: 1240px; margin: 0 auto; padding: 64px 40px 0; }
main.pricing h1 { font: 500 clamp(36px, 4vw, 54px)/1.05 var(--display); letter-spacing: -0.03em; text-align: left; max-width: 18ch; margin: 0 0 18px; }
main.pricing .lede { font: 400 19px/1.55 var(--display); color: var(--soft); text-align: left; max-width: 52ch; margin: 0 0 40px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 28px; margin-top: 80px; align-items: stretch; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.plan-box { position: relative; display: flex; }
.plan-box > .lift { flex: 1; display: flex; filter: drop-shadow(5px 5px 0 var(--hair)); }
.plan-box.featured > .lift { filter: drop-shadow(6px 6px 0 var(--shadow)); }
.plan-box > .parrot { position: absolute; top: -66px; right: 28px; width: 56px; height: auto; z-index: 1; }
.plan { flex: 1; grid-row: auto; display: flex; flex-direction: column; padding: 28px 26px 26px; border: 0; border-radius: 0; background: var(--card); clip-path: var(--cut2); box-shadow: none; }
.plan.featured { background: var(--card); border: 0; box-shadow: none; }
.plan h2 { font: 500 26px/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 6px; display: flex; align-items: baseline; justify-content: space-between; }
.plan h2 .tag { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--leaf-deep); }
.plan .price { font: 400 14px var(--mono); color: var(--soft); margin: 0 0 18px; display: block; letter-spacing: 0; }
.plan .what { font: 400 17px/1.45 var(--display); color: var(--ink); margin: 0 0 18px; }
.plan ul { list-style: none; margin: 0 0 28px; padding: 18px 0 0; border: 0; border-top: 2px dotted var(--hair); display: grid; gap: 8px; font: 400 14px/1.5 var(--sans); color: var(--ink); }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); color: var(--ink); }
.plan li::before { content: "\2713"; color: var(--leaf-deep); font-weight: 700; }
.plan li.no { color: var(--soft); }
.plan li.no::before { content: "\2013"; color: var(--soft); }
.plan .px-btn { margin-top: auto; align-self: stretch; justify-content: space-between; }
.plan.soon .px-btn { background: var(--ink); }
.plan.soon .price { color: var(--soft); }
main.pricing .fine { max-width: 66ch; margin: 64px 0 0; padding: 0 0 32px; font: 400 12.5px/1.6 var(--sans); color: var(--soft); text-align: left; }

@media (max-width: 1000px) {
  body.home #auth .split { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
  body.home .signup { position: relative; top: 0; max-width: 440px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 72px; max-width: 520px; }
}
@media (max-width: 560px) {
  body.home .top { padding: 22px 20px 0; }
  body.home .top nav { gap: 16px; }
  body.home main, body.home main.pricing { padding-left: 20px; padding-right: 20px; }
  body.home main.pricing { padding-top: 40px; }
  .msg { max-width: 92%; }
  body.home .signup .panel { padding: 26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .parrot .eye, .parrot.bob .body, .msg.in, .msg.out { animation: none; }
  .px-btn, .px-link::after { transition: none; }
}

/* a plain pointer for agents that were handed only this page's link */
.for-agents { margin: -18px 0 32px; font: 400 12px/1.5 var(--mono); color: var(--soft); }
.for-agents a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }

/* privacy, terms, legal notice */
main.legal h2 { font: 500 22px/1.2 var(--display); letter-spacing: -0.01em; margin: 40px 0 10px; }
main.legal p, main.legal li { font: 400 16px/1.6 var(--sans); color: var(--ink); max-width: 68ch; }
main.legal ul { padding-left: 20px; display: grid; gap: 6px; }
main.legal a { color: var(--ink); text-decoration-color: var(--leaf); text-underline-offset: 3px; }
main.legal { padding-bottom: 72px; }