@import url('./fonts.css');

/* ------------------------------------------------------------ */
/* Tokens, lifted from the Piper app (src/renderer/src/tokens.css)*/
/* so the site and the product read as the same thing.            */
/* ------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  --paper: light-dark(#fbf8f1, #131614);
  --bone: light-dark(#f4f0e6, #191d1a);
  --bone-2: light-dark(#ece5d6, #222824);
  --surface: light-dark(#fffdf8, #1b201d);
  --ink: light-dark(#1a1712, #e9eae4);
  --ink-2: light-dark(#453e34, #c2c6bc);
  --muted: light-dark(#877e6d, #8a9089);
  --faint: light-dark(#a9a091, #71776f);
  --rule: light-dark(#ded5c3, #2c332e);
  --rule-soft: light-dark(#eae3d4, #232926);

  --accent: light-dark(#a03a22, #b4552e);
  --accent-hover: light-dark(#8d3019, #c66235);
  --on-accent: light-dark(#fdf6f0, #fbf3ec);

  --ok: light-dark(#3f5d4a, #8fb98a);
  --danger: light-dark(#8c2f1d, #dd8c74);

  --shadow: light-dark(26 23 18, 0 0 0);

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --text: 'Instrument Sans', system-ui, sans-serif;

  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;

  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --page: 1080px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

a { color: var(--accent); text-underline-offset: 3px; transition: color 0.14s ease; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s-3);
  z-index: 20;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip:focus { left: var(--s-5); }

/* ------------------------------------------------------------ */
/* Header                                                        */
/* ------------------------------------------------------------ */
.site-head { padding-block: var(--s-5); }
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 30px; height: 21px; display: block; }
.brand span {
  font-family: var(--display);
  font-weight: 550;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.head-cta {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px var(--s-4);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.head-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ */
/* Hero. Centred, few words, one action, then the product.       */
/* ------------------------------------------------------------ */
.hero { padding-top: clamp(var(--s-7), 9vw, 104px); }
.hero .wrap { text-align: center; }

h1 {
  font-family: var(--display);
  font-weight: 550;
  font-size: clamp(44px, 7.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 auto var(--s-5);
  max-width: 15ch;
  text-wrap: balance;
}

.lede {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--muted);
  margin: 0 auto var(--s-7);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ */
/* Signup                                                        */
/* ------------------------------------------------------------ */
.signup { max-width: 440px; margin-inline: auto; scroll-margin-top: 90px; }
.field-row { display: flex; gap: var(--s-2); }
.field-row[hidden] { display: none; }

.signup input[type='email'] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 13px var(--s-4);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color 0.14s ease;
}
.signup input[type='email']::placeholder { color: var(--faint); }
.signup input[type='email']:hover { border-color: var(--muted); }
.signup input[type='email']:focus-visible { border-color: var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  padding: 13px var(--s-5);
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--bone-2); border-color: var(--rule); color: var(--faint); cursor: default; }

/* A honeypot for bots, off-screen rather than display:none so a scripted filler
   still finds it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile runs in invisible mode, so the slot draws nothing and must not
   reserve space. Switch the widget back to managed in Cloudflare and this needs
   a top margin again. */
.turnstile-slot { line-height: 0; }
.turnstile-slot[hidden] { display: none; }

.form-msg {
  margin: var(--s-3) 0 0;
  font-size: 15px;
  min-height: 1.4em;
  color: var(--muted);
}
.form-msg[data-state='ok'] { color: var(--ok); font-weight: 600; }
.form-msg[data-state='error'] { color: var(--danger); }
.form-note { margin: var(--s-3) 0 0; font-size: 14px; color: var(--faint); }

/* ------------------------------------------------------------ */
/* Screens. Each one is the real Piper app, filmed headless       */
/* against seeded data and held on its finished frame.            */
/* ------------------------------------------------------------ */
.screen {
  position: relative;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 30px 64px -40px rgb(var(--shadow) / 0.34);
}
.screen img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase {
  margin-top: clamp(var(--s-6), 5vw, 56px);
  margin-inline: auto;
  padding-inline: var(--s-5);
  max-width: 1240px;
}
/* The hero shows its whole frame. Cropping it to a viewport fraction cut the
   finished state through the middle of a table, which reads as a mistake
   rather than as a window onto something larger. */
.screen--hero {
  box-shadow: 0 40px 80px -48px rgb(var(--shadow) / 0.42);
}

/* ------------------------------------------------------------ */
/* Proof. One claim, next to the app doing that exact thing.     */
/* ------------------------------------------------------------ */
.proof {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(var(--s-7), 7vw, 96px);
  display: grid;
  gap: clamp(var(--s-8), 9vw, 128px);
}
.bit {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-5);
  display: grid;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
}
@media (min-width: 880px) {
  .bit { grid-template-columns: 0.78fr 1.22fr; }
  /* Alternate the side the screen sits on, so the page keeps a rhythm. The
     column widths flip with it, or the screen lands in the narrow column and
     the app shrinks to something nobody can read. */
  .bit--flip { grid-template-columns: 1.22fr 0.78fr; }
  .bit--flip .bit__say { order: 2; }
  .bit--flip .screen { order: 1; }
}
.bit h2 {
  font-family: var(--display);
  font-weight: 550;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.bit p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 36ch; }

/* ------------------------------------------------------------ */
/* Where Piper works                                             */
/* ------------------------------------------------------------ */
.where {
  border-top: 1px solid var(--rule-soft);
  background: var(--bone);
  padding-block: clamp(var(--s-7), 7vw, 96px);
  text-align: center;
}
.where h2 {
  font-family: var(--display);
  font-weight: 550;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.where__lede {
  margin: 0 auto var(--s-6);
  max-width: 48ch;
  color: var(--muted);
  font-size: 17px;
}
.chips {
  list-style: none;
  margin: 0 auto clamp(var(--s-7), 6vw, 72px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  max-width: 760px;
}
.chips li {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 15px;
}
.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  text-align: left;
}
@media (min-width: 760px) { .claims { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.claims li { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.claims strong {
  display: block;
  font-family: var(--display);
  font-weight: 550;
  font-size: 18px;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ------------------------------------------------------------ */
/* Closing call to action                                        */
/* ------------------------------------------------------------ */
.close-cta {
  text-align: center;
  padding-block: clamp(var(--s-8), 9vw, 112px);
}
.close-cta h2 {
  font-family: var(--display);
  font-weight: 550;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 auto var(--s-6);
  max-width: 18ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------ */
/* Footer                                                        */
/* ------------------------------------------------------------ */
.site-foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: var(--s-6);
  color: var(--muted);
  font-size: 14px;
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
}
.site-foot nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }

@media (max-width: 560px) {
  .field-row { flex-direction: column; }
  .btn { width: 100%; }
  .head-cta { display: none; }
}

/* ------------------------------------------------------------ */
/* Legal pages                                                   */
/* ------------------------------------------------------------ */
.prose { max-width: 62ch; padding-block: var(--s-7) var(--s-8); }
.prose h1 {
  font-size: clamp(31px, 4.4vw, 44px);
  margin: 0 0 var(--s-5);
  max-width: none;
  text-align: left;
}
.prose h2 {
  font-family: var(--display);
  font-weight: 550;
  font-size: 21px;
  letter-spacing: -0.018em;
  margin: var(--s-7) 0 var(--s-3);
}
.prose p, .prose li { color: var(--ink-2); font-size: 16.5px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s-2); }
.prose .updated { color: var(--muted); font-size: 15px; }