/* ============================================================
   getnessi.ai — landing → ceremony → handoff
   Tokens lifted from the live Bubl stylesheet
   (Nessi/Marketing/landing-page/styles.css) so this reads as
   the same family as bubl.co and nessi.chat.
   ============================================================ */

:root{
  /* Bubl brand gradient stops */
  --lilac:#756EB1;
  --lavender:#7470AE;
  --cobalt:#3C5AA7;
  --indigo:#445AA3;
  --ocean:#437EBE;
  --blue:#1F7FC2;
  --cyan:#3DB7D7;
  --aqua:#00B8DA;

  --grad-wordmark:linear-gradient(135deg,#756EB1 0%,#3C5AA7 32%,#1F7FC2 70%,#00B8DA 100%);
  --grad-horiz:linear-gradient(90deg,#7470AE 0%,#445AA3 33%,#437EBE 66%,#3DB7D7 100%);

  /* Neutrals */
  --ink:#0E1024;
  --ink-2:#232539;
  --ink-3:#5A5D74;
  --ink-4:#8E91A8;
  --ink-5:#B7B9CB;
  --line:#E8E9F1;
  --paper:#FBFAF7;
  --white:#FFFFFF;

  /* iMessage — NOT brand colours. Used only inside the thread card.
     --imsg is the BOTTOM stop of the outgoing bubble gradient, because the
     tail is drawn at the bubble's baseline. */
  --imsg:#0B7CFC;
  --bubble:#E9E9EB;

  --font-sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Column width — the page is a mobile screen that centres on desktop. */
  --col:440px;
  /* Raised by JS when a mobile keyboard opens. */
  --kb:0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(900px 620px at 92% -8%,rgba(61,183,215,.10),transparent 60%),
    radial-gradient(900px 620px at -12% 22%,rgba(117,110,177,.13),transparent 60%),
    var(--paper);
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
}

.stage{position:relative;min-height:100svh}

.view{
  position:fixed;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;
}
.view.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s var(--ease)}

.grad{
  background:var(--grad-wordmark);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* Centring column, shared by every view. */
.col{width:100%;max-width:var(--col);margin:0 auto}

:where(a,button,input):focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
  border-radius:6px;
}

/* ── LANDING ───────────────────────────────────────────── */
.land{
  position:absolute;inset:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:
    max(52px,env(safe-area-inset-top)) 24px
    calc(196px + env(safe-area-inset-bottom));
}
.land::-webkit-scrollbar{width:0}

.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--indigo);margin:0 0 16px;
}
.eyebrow span{margin-right:4px}

.h1{
  font-size:clamp(29px,8.2vw,36px);
  line-height:1.08;letter-spacing:-.035em;font-weight:800;
  margin:0 0 14px;text-wrap:balance;
}
.h1 b{display:block;font-weight:800}

.lede{
  font-size:15px;line-height:1.55;color:var(--ink-3);
  margin:0 0 22px;font-weight:400;text-wrap:pretty;
}
.lede b{color:var(--ink-2);font-weight:600}

/* ── the proof screenshot ──────────────────────────────────
   Built to read as an actual iOS Messages screen, not a chat
   widget: conversation header, timestamp divider, read receipt,
   rich-link footer, composer. Everything inside this card uses
   the system face so it renders as real SF on Apple devices.
   ──────────────────────────────────────────────────────── */
.thread{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 38px -20px rgba(40,40,90,.34);
}

/* conversation header */
.ios-bar{
  display:grid;grid-template-columns:24px 1fr 30px;align-items:center;
  padding:9px 13px 8px;
  background:rgba(247,247,247,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:.5px solid rgba(0,0,0,.16);
}
.ios-back{width:11px;height:18px;color:var(--ink)}
.ios-video{width:25px;height:16px;color:var(--ink);justify-self:end}
.ios-who{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.av{
  width:42px;height:42px;border-radius:50%;
  background:var(--grad-horiz);color:#fff;font-size:18px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:none;
  letter-spacing:.01em;
}
.tname{
  display:flex;align-items:center;gap:3px;
  font-size:12px;font-weight:500;color:#000;letter-spacing:-.01em;
}
.tname .chev{width:6px;height:10px;color:#A3A3A8;margin-top:.5px}

/* message stack */
.msgs{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.stamp{
  align-self:center;font-size:11px;color:#8E8E93;
  margin:2px 0 10px;letter-spacing:-.01em;
}
.stamp b{font-weight:600;color:#8E8E93}
.receipt{
  align-self:flex-end;font-size:10.5px;color:#8E8E93;
  margin:3px 3px 0;letter-spacing:-.01em;
}
.receipt b{font-weight:600}
.cap{
  align-self:flex-start;font-size:10.5px;color:#8E8E93;
  margin:4px 0 0 6px;letter-spacing:-.01em;
}

.m{
  position:relative;max-width:76%;
  font-size:15px;line-height:1.29;letter-spacing:-.015em;
  padding:8px 13px 9px;border-radius:19px;z-index:1;
}
.m.in{background:var(--bubble);color:#000;align-self:flex-start}
.m.out{
  background:linear-gradient(180deg,#28A0FF 0%,#0B7CFC 100%);
  color:#fff;align-self:flex-end;
}
.m.out u{text-decoration-color:rgba(255,255,255,.6)}
.m.gap{margin-top:8px}

/* composer */
.ios-input{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px 11px;
  border-top:.5px solid rgba(0,0,0,.1);
  background:rgba(247,247,247,.94);
}
.plus{
  width:29px;height:29px;border-radius:50%;flex:none;
  background:#E4E4E6;color:#7C7C81;
  display:flex;align-items:center;justify-content:center;
}
.plus svg{width:15px;height:15px}
.ifield{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;
  height:29px;padding:0 9px 0 12px;
  border:.5px solid #D5D5DA;border-radius:15px;
  font-size:13.5px;color:#A3A3A8;letter-spacing:-.01em;
}
.ifield .mic{width:12px;height:17px;color:#8E8E93;flex:none}

/* iMessage tails.
   The ::after mask is painted with the message area's own background. If the
   stack ever moves onto a tinted surface, --tail-mask must move with it or you
   get white notches under every tail.
   The outgoing tail matches the BOTTOM stop of the bubble gradient — it sits
   at the bubble's baseline, so anything lighter reads as a seam. */
.thread{--tail-mask:var(--white)}
.m.tail::before{content:"";position:absolute;bottom:-.5px;width:18px;height:18px;z-index:-1}
.m.tail::after{content:"";position:absolute;bottom:-.5px;width:11px;height:18px;background:var(--tail-mask);z-index:-1}
.m.in.tail::before{left:-6px;background:var(--bubble);border-bottom-right-radius:16px}
.m.in.tail::after{left:-11px;border-bottom-right-radius:11px}
.m.out.tail::before{right:-6px;background:var(--imsg);border-bottom-left-radius:16px}
.m.out.tail::after{right:-11px;border-bottom-left-radius:11px}

/* Maps rich link preview */
.m.link{padding:0;overflow:hidden;max-width:62%;border-radius:18px}
.m.link .map{display:block;width:100%;height:104px}
.m.link .meta{padding:7px 11px 9px;background:var(--bubble)}
.m.link .mt{font-size:12.5px;font-weight:600;color:#000;line-height:1.25;letter-spacing:-.01em}
.m.link .md{font-size:11px;color:#8E8E93;margin-top:1px;letter-spacing:-.01em}
.m.link.tail::before{border-bottom-right-radius:16px}

.closer{
  font-size:13.5px;color:var(--ink-4);text-align:center;
  margin:24px 0 0;font-weight:500;
}

/* ── the dock ──────────────────────────────────────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:14px 24px calc(18px + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.86);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid rgba(14,16,36,.07);
  transform:translateY(calc(-1 * var(--kb)));
  transition:transform .2s var(--ease);
}
/* Fallback for browsers without backdrop-filter — keep it legible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dock{background:rgba(251,250,247,.98)}
}

.dform{margin:0}
.dlabel{
  display:block;font-size:13.5px;font-weight:700;
  margin:0 0 8px 2px;letter-spacing:-.01em;
  transition:color .25s var(--ease);
}
.drow{display:flex;gap:8px;align-items:stretch}
.field{
  flex:1;min-width:0;
  background:var(--white);border:1px solid #DEDDD8;color:var(--ink);
  font-size:16px;font-weight:500;font-family:inherit;
  padding:13px 15px;border-radius:13px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.field:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(68,90,163,.14)}
.field::placeholder{color:#AFB3BA;font-weight:400}

.cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-horiz);color:#fff;border:0;text-decoration:none;
  font-size:15px;font-weight:700;font-family:inherit;letter-spacing:-.01em;
  padding:0 20px;border-radius:13px;cursor:pointer;white-space:nowrap;
  box-shadow:0 8px 22px -10px rgba(68,90,163,.9);
  transition:filter .2s,transform .12s var(--ease),box-shadow .2s,opacity .2s;
}
.cta:hover:not(:disabled){filter:brightness(1.06)}
.cta:active:not(:disabled){transform:scale(.975)}
.cta:disabled{opacity:.34;cursor:default;box-shadow:none;filter:saturate(.5)}

.fine{
  font-size:11.5px;color:var(--ink-4);text-align:center;
  margin:10px 0 0;line-height:1.45;
}

/* ── CEREMONY ──────────────────────────────────────────── */
.skip{
  position:absolute;z-index:12;
  top:calc(46px + env(safe-area-inset-top));right:22px;
  background:none;border:0;color:var(--ink-5);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  cursor:pointer;padding:8px;
}
.skip:hover{color:var(--ink-3)}

.log{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:9px;overflow:hidden;
  padding:0 max(26px,calc(50% - var(--col)/2 + 26px))
          calc(96px + env(safe-area-inset-bottom));
}
.ln{
  font-family:var(--font-mono);font-size:12.5px;color:#9BA1AB;
  display:flex;align-items:baseline;
  opacity:0;animation:in .3s var(--ease) forwards;
}
@keyframes in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ln .lead{flex:1;border-bottom:1px dotted currentColor;opacity:.45;margin:0 9px;transform:translateY(-3px)}
.ln .ok{color:#5FA98C;font-size:11.5px}
.ln.id{color:#767D89}
.ln .val{color:#3F4756}
.log.dim .ln{opacity:.14!important;transition:opacity .75s var(--ease)}

.say{
  font-size:clamp(28px,8vw,34px);
  letter-spacing:-.035em;font-weight:800;line-height:1.15;
  opacity:0;animation:say .6s var(--ease) forwards;
}
.say.b{color:var(--ink)}
@keyframes say{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.lrn{
  font-family:var(--font-mono);font-size:12.5px;
  color:rgba(68,90,163,.72);
  opacity:0;animation:in .22s var(--ease) forwards;
}

/* ── HANDOFF ───────────────────────────────────────────── */
.fin{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 30px calc(env(safe-area-inset-bottom));
  text-align:center;
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--grad-horiz);margin-bottom:26px;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(68,90,163,.45)}
  70%{box-shadow:0 0 0 22px rgba(68,90,163,0)}
  100%{box-shadow:0 0 0 0 rgba(68,90,163,0)}
}
.finh{
  font-size:clamp(27px,7.6vw,33px);
  letter-spacing:-.035em;font-weight:800;margin:0;line-height:1.14;
  text-wrap:balance;
}
.num{
  font-family:var(--font-mono);font-size:15.5px;color:var(--ink-3);
  margin:18px 0 24px;user-select:all;-webkit-user-select:all;letter-spacing:.01em;
}
.cta-lg{
  width:100%;max-width:280px;height:52px;font-size:16px;
}

/* ── handoff message preview ───────────────────────────
   Shows the exact outgoing bubble that will be waiting in Messages.
   The white strip isn't decoration: the bubble tail is drawn with a
   mask rectangle, so it needs a known flat colour behind it. Over the
   page's tinted radial background it would leave a faint notch. */
.preview{
  --tail-mask:#fff;
  width:100%;max-width:280px;margin:22px 0 0;
  display:flex;justify-content:flex-end;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:10px 12px;
  box-shadow:0 10px 26px -20px rgba(40,40,90,.45);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
}
.preview .m{max-width:88%}

/* ── desktop QR ────────────────────────────────────────
   sms: is inert on most desktops. Rather than leave a dead button,
   hand them the same pre-filled message on their phone. */
.qrwrap{
  display:none;flex-direction:column;align-items:center;gap:10px;
  margin:26px 0 0;
}
.qrwrap.on{display:flex}
.qr{
  width:132px;height:132px;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 26px -20px rgba(40,40,90,.45);
}
.qr svg{display:block;width:100%;height:100%}
.qrcap{font-size:11.5px;color:var(--ink-4);margin:0;line-height:1.45}

/* ── desktop ───────────────────────────────────────────── */
@media (min-width:768px){
  .land{padding-top:72px}
  .h1{font-size:38px}
  .lede{font-size:16px}
  .dock{
    padding-top:16px;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
}

/* ── reduced motion ────────────────────────────────────── */
/* The ceremony still plays — JS compresses it to ~2.4s — but nothing moves. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .ln,.say,.lrn{opacity:1!important}
}