/* pebble landing — prototype styles.
   Depends on tokens.css (the full token contract: colour + type + space + radii +
   shadow + motion). Type: Instrument Serif (display / slams), Instrument Sans (body),
   IBM Plex Mono (her voice + fine print). Fluid clamp() display sizes are web-only
   (see brand/DESIGN-TOKENS.md); every other value is a token var.
   Palette grammar: ink does the talking; magenta is the one brand colour
   (button + wordmark); coral marks speed (the timestamp); the cairn carries
   all four; aqua appears once (the cairn's cap) — that's the page's one breath. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground-paper);color:var(--text-ink);
  font-family:var(--font-sans);
  font-size:var(--size-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;
}
p{margin:0}
a{color:inherit}
em{font-style:italic}

/* ---- header ---- */
header.site{
  position:absolute;top:0;left:0;right:0;z-index:var(--z-header);
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,3vw,30px) clamp(20px,5vw,56px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img,.brand svg{width:30px;height:33px;display:block}
.brand .wordmark{
  font-family:var(--font-serif);font-size:var(--size-wordmark);letter-spacing:var(--tracking-wordmark);
  color:var(--text-ink);line-height:var(--leading-flat);
}

/* ---- buttons ---- */
.btn{
  font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--size-button);
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;
  border-radius:var(--radius-pill);border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-default),filter var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default);
}
.btn:focus-visible{outline:2px solid var(--magenta-deep);outline-offset:3px}
.btn-primary{background:var(--magenta-fill);color:var(--on-magenta)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{color:var(--magenta-deep);border-color:color-mix(in srgb,var(--magenta-fill) 40%,transparent);font-size:var(--size-button-sm);padding:10px 18px}
.btn-ghost:hover{background:var(--magenta-wash)}
.btn .wa{width:18px;height:18px;fill:currentColor}

/* ---- main / beats ---- */
main{padding:var(--page-top) 0 0}
.beat{
  width:var(--col);margin:0 auto;padding-block:0;
  display:flex;flex-direction:column;
}
.beat + .beat{margin-top:var(--beat-gap)}

/* beat 1 — the wound */
.passage{font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:var(--leading-reading);color:var(--text-body);max-width:var(--measure)}
.passage em{color:var(--text-ink);font-style:italic}
.passage.tight{margin-top:1.4em}
.slam{
  font-family:var(--font-serif);font-weight:var(--weight-regular);
  font-size:clamp(2.4rem,7vw,4.4rem);line-height:var(--leading-display);letter-spacing:var(--tracking-display);
  color:var(--text-ink);margin:0 0 .85em;text-wrap:balance;
}

/* beat 2 — the turn */
.turn-head{
  position:relative;width:20ch;max-width:100%;
  font-family:var(--font-serif);font-size:clamp(1.8rem,5vw,2.8rem);
  line-height:var(--leading-tight);color:var(--text-ink);
}
.turn-cairn{
  position:absolute;left:calc(100% - 6px);top:56%;transform:translateY(-50%);
  width:96px;height:96px;display:block;overflow:visible;
}
.turn-lede{width:100%;font:inherit;color:inherit}
.lede-br{display:none}          /* the "We're pebble." break is mobile-only */
.product{margin-top:1.1em;font-size:var(--size-lg);line-height:var(--leading-body);color:var(--text-body);max-width:var(--measure)}
.product strong{color:var(--text-ink);font-weight:var(--weight-semibold)}
@media (max-width:980px){
  .turn-head{display:flex;flex-direction:column;gap:14px}
  .turn-cairn{position:static;width:66px;height:66px;transform:none}
}

/* beat 3 — the chat */
.thread{display:flex;flex-direction:column;gap:9px;max-width:440px}
.bubble{
  padding:11px 15px;border-radius:var(--radius-xl);font-size:var(--size-base);line-height:var(--leading-chat);max-width:82%;
}
.bubble.you{align-self:flex-end;background:var(--magenta-wash);color:var(--text-ink);border-bottom-right-radius:5px}
.bubble.peb{
  align-self:flex-start;background:var(--ground-surface-2);color:var(--text-ink-soft);
  border-bottom-left-radius:5px;border:1px solid var(--line-default);
  font-family:var(--font-mono);font-size:var(--size-chat-bot);line-height:var(--leading-chat-bot);
}
.stamp{margin-top:16px;font-family:var(--font-mono);font-size:var(--size-stamp);letter-spacing:var(--tracking-stamp);color:var(--coral-text)}

/* beat 4 — the humans: backers first, photos as quiet evidence */
.made-label{font-size:var(--size-lg);color:var(--text-ink);max-width:34ch}
.maker-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.78rem;max-width:var(--measure)}
.maker-list li{font-size:1.02rem;line-height:1.45;color:var(--text-body)}
.maker-list span{font-weight:var(--weight-semibold);color:var(--text-ink)}
.backers{margin-top:2.4rem}
.backers-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-ink-faint)}
.logo-row{margin-top:1.1rem;display:flex;gap:clamp(24px,3.8vw,46px);align-items:center;flex-wrap:wrap}
.logo-row img{height:44px;width:auto}
.strip{margin-top:1.9rem;display:flex;gap:10px}
.strip img{display:block;flex:1 1 0;min-width:0;height:104px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--line-default)}
@media (max-width:720px){
  .strip{flex-wrap:wrap}
  /* basis tuned for 5 photos: 3+2 rows; no orphan stretching full-width */
  .strip img{flex:1 1 30%;height:96px}
  /* the essay breathes smaller on a phone — reading pace over presence */
  .passage{font-size:1.02rem;line-height:1.52}
  .passage.tight{margin-top:1.05em}
  .slam{font-size:clamp(2.1rem,9.5vw,2.9rem);margin-bottom:.7em}
  /* the turn is the page's thesis — on phones the lede hard-wraps (see the
     .lede-br breaks) so its box hugs the text via max-content; the cairn then
     sits 24px to its right, vertically centered, the pair left-aligned */
  .turn-head{flex-direction:row;align-items:center;justify-content:flex-start;gap:24px;width:100%}
  .lede-br{display:inline}
  .turn-lede{flex:0 0 auto;width:max-content;max-width:100%;font-size:clamp(1.5rem,7vw,2.15rem)}
  .turn-cairn{position:static;transform:none;flex:none;width:60px;height:60px}
  /* backers stay on one line on phones — smaller so all three fit */
  .logo-row{gap:12px;flex-wrap:nowrap}
  .logo-row img{height:26px}
  .product,.made-label{font-size:1.02rem}
  .maker-list li{font-size:.98rem}
  main{padding-top:clamp(96px,16vh,140px)}
}

/* beat 5 — say hey */
.sayhey{scroll-margin-top:80px}
.closing{
  font-family:var(--font-serif);font-weight:var(--weight-regular);
  font-size:clamp(1.9rem,5vw,3.1rem);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);
  color:var(--text-ink);max-width:18ch;
}
.cta-wrap{margin-top:1.6em;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.qr{width:120px;height:120px;border-radius:var(--radius-lg);border:1px solid var(--line-default);background:var(--ground-surface);padding:8px}
@media (max-width:480px){.qr{display:none}}

/* ---- footer ---- */
footer.site-foot{
  width:var(--col);margin:var(--beat-gap) auto 0;
  padding:clamp(28px,5vw,48px) 0 clamp(40px,8vh,90px);
  border-top:1px solid var(--line-default);
}
.fine{font-family:var(--font-mono);font-size:var(--size-fine);letter-spacing:var(--tracking-fine);color:var(--text-ink-faint);line-height:var(--leading-loose)}
/* footer layout mirrors legal.css (.legal-foot-*) — keep in sync */
.legal-foot-row{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.legal-foot-nav{display:flex;gap:16px;flex-wrap:wrap}
.legal-foot-nav a{text-decoration:none}
.legal-foot a{
  color:var(--magenta-deep);
  text-decoration-color:color-mix(in srgb,var(--magenta-deep) 42%,transparent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.legal-foot a:hover{color:var(--magenta-fill);text-decoration-color:currentColor}

/* ---- motion: fast in, settle. respects reduced-motion ---- */
.reveal{opacity:0;transform:translateY(var(--offset-reveal))}
.reveal.in{opacity:1;transform:none;transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-standard)}
.demo .bubble{opacity:0;transform:translateY(var(--offset-chat))}
.demo.in .bubble{opacity:1;transform:none;transition:opacity var(--duration-medium) var(--ease-out),transform var(--duration-medium) var(--ease-standard)}
.demo.in .bubble:nth-child(1){transition-delay:.05s}
.demo.in .bubble:nth-child(2){transition-delay:.5s}
.demo.in .bubble:nth-child(3){transition-delay:.9s}
.demo.in .bubble:nth-child(4){transition-delay:1.35s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.in,.demo .bubble,.demo.in .bubble{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ================= v2 — still water layer ================= */
/* the pond sits under everything; content floats above it */
#water{position:fixed;inset:0;z-index:var(--z-base);pointer-events:none}
header.site{z-index:var(--z-header)}
main,footer.site-foot{position:relative;z-index:var(--z-content)}

/* when the GSAP clock owns motion, neutralise the v0 IO reveals */
.js-motion .reveal,.js-motion .reveal.in{opacity:1;transform:none;transition:none}
.js-motion .demo .bubble,.js-motion .demo.in .bubble{opacity:1;transform:none;transition:none}

/* chat typing indicator (injected by motion.js) */
.bubble.typing{display:inline-flex;gap:5px;align-items:center;padding:13px 15px;min-width:52px}
.bubble.typing i{width:6px;height:6px;border-radius:var(--radius-full);background:var(--text-ink-faint);display:block;animation:tdot 1s infinite ease-in-out}
.bubble.typing i:nth-child(2){animation-delay:.15s}
.bubble.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* slam / closing line masks (SplitText lines) */
.js-motion .slam,.js-motion .closing{visibility:hidden}
.js-motion .slam.split-ready,.js-motion .closing.split-ready{visibility:visible}
/* the mask clips at the line box; tight display line-height would sever
   descenders (the g in "Networking") — grow the clip box, not the spacing */
.sline-mask{padding-bottom:.16em;margin-bottom:-.16em;padding-top:.06em;margin-top:-.06em}