/* ==========================================================================
   getstaple.app

   The site's own layout only. Every colour is a token from tokens.css, which
   is the app's file copied in unchanged — so the site re-renders in dark for
   free and cannot drift from the product's palette.

   Type sizes are *not* tokens. The token scale is a phone app's (--t-display
   is 30px, sized for a 390pt screen); a page read at arm's length on a laptop
   needs its own scale, and pretending otherwise would mean editing the app's
   tokens to fix a heading on a website.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  /* No webfont. `--serif` falls back to Iowan Old Style, Palatino and Georgia, which is a
     warm serif on every platform that matters — and the privacy policy says the app talks
     to nobody but Google and OpenRouter. A font CDN on the page that says so would be a
     third party, fetched from the reader's browser, to set a heading in Fraunces. */
  font-synthesis-weight:none;
}

a{color:var(--primary);text-underline-offset:2px}
a:hover{text-decoration:none}

img{max-width:100%;height:auto}

:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- chrome */

.bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  max-width:1080px;margin:0 auto;padding:var(--s-5) var(--s-6);
}
.wordmark{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--on-surface);text-decoration:none;
}
.bar nav{display:flex;gap:var(--s-5);font-size:15px}
.bar nav a{color:var(--on-surface-variant);text-decoration:none}
.bar nav a:hover{color:var(--primary)}

footer{
  max-width:1080px;margin:0 auto;padding:var(--s-6) var(--s-6) 64px;
  border-top:1px solid var(--outline-variant);margin-top:96px;
  font-size:15px;
}
footer p+p{margin-top:var(--s-2)}
.muted{color:var(--on-surface-variant)}

/* ------------------------------------------------------------- the pitch */

main{max-width:1080px;margin:0 auto;padding:0 var(--s-6)}

.hero,.feature{
  display:grid;grid-template-columns:1fr minmax(0,300px);
  gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(40px,7vw,96px) 0;
}
.feature{border-top:1px solid var(--outline-variant)}
/* The screens alternate sides so the page has a rhythm rather than a column of captions.
   The track widths swap too: `order` alone moves the image into the 1fr column and blows
   a 300px phone up to half the page. */
.feature--flip{grid-template-columns:minmax(0,300px) 1fr}
.feature--flip .feature__words{order:2}

h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(38px,6.4vw,68px);line-height:1.05;letter-spacing:-0.02em;
}
.feature h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-0.015em;
}
.lede{font-size:clamp(18px,2vw,21px);color:var(--on-surface-variant);margin-top:var(--s-5)}
.feature__words p{color:var(--on-surface-variant);margin-top:var(--s-4);max-width:38ch}
.hero .muted{margin-top:var(--s-6);font-size:15px}

/* A phone screen on a page, not a photograph of one: the app already draws its own
   rounded corners, so this is a hairline and a lift, and nothing that pretends to be
   hardware. */
.shot{
  display:block;width:100%;border-radius:var(--r-lg);
  border:1px solid var(--outline-variant);
  box-shadow:0 24px 60px -24px color-mix(in srgb,var(--scrim) 40%,transparent);
}

/* -------------------------------------------------------------- documents */

.prose{max-width:68ch;padding-bottom:var(--s-6)}
.prose h1{font-size:clamp(32px,5vw,46px);margin:var(--s-6) 0 var(--s-5)}
.prose h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(23px,3vw,29px);
  line-height:1.2;margin:56px 0 var(--s-4);
}
.prose h3{font-size:19px;font-weight:600;margin:32px 0 var(--s-3)}
.prose p,.prose ul{margin:var(--s-4) 0}
.prose ul{padding-left:1.25em}
.prose li+li{margin-top:var(--s-2)}
.prose strong{font-weight:600;color:var(--on-surface)}
.prose code{
  font-family:var(--mono);font-size:0.88em;
  background:var(--surface-container);border-radius:var(--r-sm);padding:1px 5px;
}

/* `display:block` is what gives a four-column table a scrollbar instead of a squeeze on a
   phone. The browser generates an anonymous table box inside, so the columns still line
   up across rows — this is the one place the site departs from plain flow. */
.prose table{
  display:block;overflow-x:auto;max-width:100%;
  border-collapse:collapse;margin:var(--s-6) 0;font-size:15px;
}
.prose th,.prose td{
  border:1px solid var(--outline-variant);
  padding:var(--s-3) var(--s-4);text-align:left;vertical-align:top;min-width:9ch;
}
.prose th{background:var(--surface-container);font-weight:600}
.prose tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-container) 45%,transparent)}

/* ------------------------------------------------------------------ small */

@media (max-width:820px){
  body{font-size:16px}
  .hero,.feature{grid-template-columns:1fr;justify-items:start}
  .feature--flip .feature__words{order:0}
  .shot{max-width:320px;margin:var(--s-5) auto 0}
  footer{margin-top:56px}
}