/* Samlify landing. Tokens and landing-specific spectrum exceptions in DESIGN.md. */
:root{
  --bg:#FFFFFF; --paper:#FDFCFA; --surface:#F3F1EC; --surface-hover:#EAE7DF;
  --ink:#1F1E1B; --ink-muted:#78746B; --ink-faint:#B6B1A6;
  --border:#E4E0D7; --border-hover:#CFC9BC; --divider:#F0EDE6;
  --accent:#6A3FD6; --accent-hover:#5631B8; --accent-soft:#F3EFFD; --signal:#6A3FD6;
  --ok:#28734F; --ok-soft:#EAF3EE;
  --r-sm:8px; --r:10px; --r-card:26px; --r-panel:32px;
  --sh-soft:0 2px 6px rgba(31,30,27,.03);
  --sh-med:0 .8rem 1.2rem rgba(31,30,27,.04), 0 1.6rem 3.2rem rgba(31,30,27,.04);
  --page:1300px; --ease:cubic-bezier(0,0,.2,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html[data-logo="02"]{ --g1:#FFD65A; --g2:#F69A91; --g3:#AA55DC; --g4:#AA55DC; }
html[data-logo="03"]{ --g1:#F8D95B; --g2:#EE8CC2; --g3:#8554E7; --g4:#4D97EF; }
:root{ --grad:linear-gradient(115deg,var(--g1),var(--g2) 38%,var(--g3) 72%,var(--g4)); }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
/* No gray flash on tap in Safari; keyboard focus keeps its ring below. */
a,button,input,label,[tabindex]{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

/* Header */
.top{position:relative;z-index:2}
.top-in{max-width:var(--page);margin:0 auto;padding:30px 26px 18px;display:flex;align-items:center;gap:32px}
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.lockup-mark{width:32px;height:32px;display:block}
.lockup-word{font-size:26px;font-weight:600;letter-spacing:-.028em;line-height:1}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:500;color:var(--ink-muted);transition:color .12s var(--ease),background-color .12s var(--ease)}
.nav a:hover{color:var(--ink);background:var(--surface)}
.top-end{margin-left:auto;display:flex;align-items:center;gap:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;
  font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background-color .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-ghost:hover{background:var(--surface);border-color:var(--border-hover)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}

/* Type */
.h1{font-size:64px;line-height:.98;font-weight:500;letter-spacing:-.012em;text-wrap:balance}
.h2{font-size:48px;line-height:1.08;font-weight:500;letter-spacing:-.008em;text-wrap:balance}
.lead{font-size:24px;line-height:30px;color:var(--ink-muted);text-wrap:pretty}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 92px);margin:0 auto;padding:96px 24px 160px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero::before{content:"";position:absolute;inset:18% 0 -200px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 65%,rgba(238,140,194,.38),transparent 58%),radial-gradient(ellipse at 85% 65%,rgba(77,151,239,.32),transparent 58%),radial-gradient(ellipse at 50% 85%,rgba(133,84,231,.24),transparent 60%);mask-image:linear-gradient(transparent,#000 25%,#000 60%,transparent)}
.hero .h1{max-width:1112px;font-size:48px;line-height:1.08;letter-spacing:-.03em}
.hero .lead{max-width:800px;margin-top:20px;font-size:20px;line-height:28px}
.lead-phone{display:none}
.cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.join{width:100%;max-width:520px;margin-top:36px;scroll-margin:120px}
.join-field{position:relative;display:flex;gap:4px;padding:3.5px;border-radius:999px;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:var(--sh-soft);
  transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.join-field:hover{border-color:transparent}
/* Keep the spectrum edge visible at rest, on hover and while sending.
   Focus adds a soft colour glow without another outline. */
.join-field:focus-within{box-shadow:0 0 16px rgba(133,84,231,.16)}
/* The cover starts exactly on the button (app.js sets --ct --cr --cb --cl from the live layout),
   grows across the field, and shrinks back onto the button when it leaves. */
.join-cover{position:absolute;inset:3.5px;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:23px;
  background:var(--ink);color:var(--paper);pointer-events:none;visibility:hidden;outline:none;
  clip-path:inset(var(--ct,0) var(--cr,0) var(--cb,0) var(--cl,0) round 23px);transition:clip-path .42s cubic-bezier(.2,.7,.2,1)}
.join.cover-on .join-cover{visibility:visible}
.join.cover-full .join-cover{clip-path:inset(0 round 23px);pointer-events:auto} /* takes the pointer; the controls under it are inert */
.join-disc{flex:none;width:34px;height:34px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .3s var(--ease)}
.join-mk{width:24px;height:24px;display:block}
.join-cover-t{font-size:16px;font-weight:500;line-height:22px;white-space:nowrap;opacity:0;transition:opacity .2s var(--ease)}
.join.cover-full .join-disc{opacity:1;transform:none;transition-delay:.16s}
.join.cover-full .join-cover-t{opacity:1;transition-delay:.2s}
/* The same thinking motion as the Example's mark: it turns and a bright blade runs round it. It stops where it is once the server answered. */
.join[data-state="sending"] .join-mk,.join[data-state="done"] .join-mk{animation:turn 2.8s linear infinite}
.join[data-state="sending"] .join-mk .blade{animation:wave 1.2s linear infinite;animation-delay:calc(var(--i) * .15s - 1.2s)}
.join[data-state="done"] .join-mk{animation-play-state:paused}
.join-input{flex:1 1 auto;min-width:0;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:transparent;
  font:inherit;font-size:17px;color:var(--ink);outline:none}
.join-input::placeholder{color:var(--ink-faint)}
/* Browser autofill otherwise paints a blue fill when the field returns after signup. */
.join-input:is(:autofill,:-webkit-autofill){box-shadow:0 0 0 100px var(--bg) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
@media (forced-colors:active){
  .join-input:is(:autofill,:-webkit-autofill){box-shadow:none;-webkit-text-fill-color:CanvasText;caret-color:CanvasText}
}
.join-btn{flex:none;min-height:46px} /* field, padding and border total the old 56 px button row, so the fold holds */
.join-btn[aria-disabled="true"]{opacity:.7;cursor:progress}
/* Under the full cover the button would double the cover's anti aliased edge (a visible notch where the pill curves away on phones); it is inert there, and the clip always starts and ends on it, so it is never seen missing. */
.join.cover-full .join-btn{visibility:hidden}
.join[data-state="error"] .join-field:not(:focus-within),.join[data-state="invalid"] .join-field:not(:focus-within){border-color:#B3261E}
/* Status and scope note share one reserved line, wider than the form so the longest message fits on it. */
.join-foot{display:grid;margin-top:16px;min-height:22px;width:min(680px,calc(100vw - 48px)); /* app.js raises min-height to the tallest message at this width */position:relative;left:50%;transform:translateX(-50%)}
.join-foot>p{grid-area:1/1;margin:0}
.join-status{font-size:15px;line-height:22px;color:var(--ink-muted)}
/* While the cover shows the answer, the line below stays read out but not drawn: one visible confirmation at a time. */
.join-status:empty,.join[data-state="sending"] .join-status,.join.cover-full[data-state="done"] .join-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.join[data-state="done"] .cta-note,.join[data-state="error"] .cta-note,.join[data-state="invalid"] .cta-note,.join[data-state="nudge"] .cta-note{visibility:hidden}
.join[data-state="done"] .join-status{justify-self:center;color:var(--accent);font-weight:500}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .join[data-state="done"] .join-status{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}
}
@media (forced-colors:active){
  .join[data-state="done"] .join-status{background:none;color:CanvasText}
}
.join[data-state="error"] .join-status{color:#B3261E}
.cta-note{font-size:15px;line-height:22px;color:var(--ink-muted)}

/* Demo: one sample conversation */
.stage{position:relative;padding:8px 24px 96px;scroll-margin-top:24px;overflow-x:clip}
.glow{position:absolute;left:50%;top:-48px;bottom:40px;width:min(1180px,100%);transform:translateX(-50%);pointer-events:none;z-index:0}
.glow-svg{width:100%;height:100%;filter:blur(60px);opacity:.85}
.panel{position:relative;z-index:1;max-width:720px;margin:0 auto;background:var(--bg);border-radius:var(--r-panel);
  box-shadow:var(--sh-med),0 0 0 1px rgba(31,30,27,.05);overflow:hidden;
  display:flex;flex-direction:column;height:444px}
.panel-head{flex:none;padding:16px 28px;border-bottom:1px solid var(--divider);background:var(--paper)}
.demo-label{font-size:14px;line-height:24px;font-weight:600;color:var(--ink-muted)}
/* The transcript keeps one height: new messages push older ones up and out of
   view, and the visitor can scroll back. The panel never grows. */
.chat{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent;
  padding:28px 28px 32px;display:flex;flex-direction:column;gap:20px;
  -webkit-mask-image:linear-gradient(transparent,#000 18px);mask-image:linear-gradient(transparent,#000 18px)}
.chat>*{flex:none}
.chat:focus{outline:none}
.chat:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:0 0 var(--r-panel) var(--r-panel)}
.in{animation:rise .32s var(--ease) both}
.msg{display:flex;gap:12px;align-items:flex-start;min-width:0}
.msg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(31,30,27,.08),0 1px 3px rgba(31,30,27,.06)}
.av .mk{width:22px;height:22px;display:block}
.msg-who{font-size:14px;font-weight:600;line-height:20px;margin-top:8px}
/* Said in words while the mark turns, so the wait reads as work. */
.msg-status{font-size:15px;line-height:22px;color:var(--ink-muted)}
.bubble{display:inline-block;max-width:100%;padding:12px 16px;border-radius:4px 18px 18px 18px;background:var(--surface);font-size:17px;line-height:25px;text-wrap:pretty}
.msg-you{justify-content:flex-end}
.bubble-you{border-radius:18px 4px 18px 18px;background:var(--ink);color:var(--paper);font-weight:500}
.card{width:100%;padding:20px 22px 22px;border-radius:18px;border:1.5px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.card-t{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.004em;text-wrap:balance}
.card-p{font-size:16px;line-height:23px;color:var(--ink-muted);text-wrap:pretty}
.card .btn{margin-top:14px}
.card .btn[aria-disabled="true"]{background:var(--surface);color:var(--ink-muted);cursor:default;transform:none}
.plan{border:1px solid var(--border);background:var(--bg);gap:12px}
.plan-steps{counter-reset:p;display:flex;flex-direction:column;gap:10px;margin:4px 0 4px}
.plan-steps li{counter-increment:p;display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:24px}
.plan-steps li::before{content:counter(p);flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;background:var(--surface);font-variant-numeric:tabular-nums;transform:translateY(-1px)}
.panel-foot{flex:none;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:16px 28px;border-top:1px solid var(--divider);background:var(--paper);
  transition:opacity .3s var(--ease)}
.panel-foot.off{opacity:0;visibility:hidden} /* keeps its height; inert in the markup until Build */
.panel-foot .btn{scroll-margin:24px} /* focus brings the whole foot into view, not a button on the screen's edge */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.mk .blade{transform-box:view-box;transform-origin:56px 56px}
/* Samlify thinking: the exact mark turns slowly while a bright blade runs round it and the ones behind it fade.
   The mark is eightfold symmetric, so a turn alone reads as still; the one bright blade gives it a direction. */
.msg-load .av .mk{animation:turn 2.8s linear infinite}
.msg-load .av .blade{animation:wave 1.2s linear infinite;animation-delay:calc(var(--i) * .15s - 1.2s)}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes wave{0%{opacity:1}100%{opacity:.18}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}

/* How */
.section{max-width:1080px;margin:0 auto;padding:80px 24px;scroll-margin-top:8px}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px;position:relative}
.flow::before{content:"";position:absolute;left:22px;right:calc(33.333% - 40px);top:21px;height:2px;background:var(--grad);opacity:.6;border-radius:2px}
.flow li{position:relative;min-width:0}
.flow-n{position:relative;display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--bg);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px var(--ink) inset}
.flow h3{margin-top:20px;font-size:24px;line-height:30px;font-weight:500}
.flow p{margin-top:6px;font-size:17px;line-height:25px;color:var(--ink-muted);max-width:300px}

/* FAQ: an exclusive accordion. app.js sets .qa's min-height to the closed
   questions plus the tallest answer, so the page below never moves. Each
   answer animates as a 0fr to 1fr grid row with the same timing, so while
   one opens and another closes their sum never passes the tallest. */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;align-items:start;border-top:1px solid var(--divider);padding-top:80px}
.qa-item{border-bottom:1px solid var(--border)}
.qa-item:first-child{border-top:1px solid var(--border)}
.qa-h{font:inherit}
.qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;border:0;background:none;cursor:pointer;
  text-align:left;font-size:20px;line-height:27px;font-weight:500;color:var(--ink)}
.qa-q::after{content:"";flex:none;width:12px;height:12px;margin-right:4px;border-right:1.75px solid var(--ink);border-bottom:1.75px solid var(--ink);
  transform:translateY(-3px) rotate(45deg);transition:transform .26s var(--ease)}
.qa-q[aria-expanded="true"]::after{transform:translateY(3px) rotate(-135deg)}
.qa-a{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .26s var(--ease),opacity .2s var(--ease),visibility 0s linear .26s}
.qa-item.open .qa-a{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .26s var(--ease),opacity .26s var(--ease) .04s,visibility 0s}
.qa-in{min-height:0;overflow:hidden}
.qa-in p{padding:0 0 22px;font-size:18px;line-height:27px;color:var(--ink-muted);max-width:620px}

/* Close */
.close{max-width:900px;margin:0 auto;padding:64px 24px 120px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:32px}
.close .join{margin-top:0}

/* Footer */
.foot{border-top:1px solid var(--divider);background:var(--paper)}
.foot-in{max-width:var(--page);margin:0 auto;padding:22px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-word{font-size:19px;font-weight:600;letter-spacing:-.028em}
.foot-note{font-size:14px;color:var(--ink-muted)}
.foot-links{display:flex;gap:4px;margin-left:auto}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--ink-muted);transition:color .12s var(--ease),background-color .12s var(--ease)}
.foot-links a:hover{color:var(--ink);background:var(--surface)}
.foot-links a[aria-current="page"]{color:var(--ink)}
.foot-links .foot-icon{width:44px;padding:0;justify-content:center}

/* Privacy and Terms */
.legal{max-width:720px;margin:0 auto;padding:56px 24px 96px}
.legal .h2{margin-bottom:12px}
.legal-date{font-size:15px;color:var(--ink-muted)}
.legal-intro{font-size:19px;line-height:28px;color:var(--ink-muted);margin-top:24px}
.legal h3{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em;margin:44px 0 12px}
.legal h4{font-size:17px;font-weight:600;margin:24px 0 8px}
.legal p,.legal li{font-size:17px;line-height:27px}
.legal p+p{margin-top:12px}
.legal ul{list-style:disc;padding-left:22px;margin-top:8px}
.legal li+li{margin-top:6px}
.legal ul+p,.legal-scroll+p{margin-top:12px}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px;line-height:22px}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--border)}
.legal-table th{font-weight:600}
.legal-scroll{overflow-x:auto}
.legal-quote{margin:12px 0 0;padding:12px 16px;border-left:3px solid var(--border);background:var(--paper);font-size:15px;line-height:23px}

/* 900px: two column grids collapse */
@media (max-width:900px){
  .nav{display:none}
  .faq{grid-template-columns:1fr;gap:24px}
}
/* 640px: type drops, padding tightens */
@media (max-width:640px){
  .legal{padding:36px 16px 72px}
  .foot-in{padding:16px}
  .foot-links{margin-left:-12px;width:100%}
  .top-in{padding:22px 16px 12px;gap:12px}
  .lockup{gap:9px}
  .lockup-mark{width:28px;height:28px}
  .lockup-word{font-size:22px}
  .top-cta{display:none}
  .h1{font-size:38px;line-height:1.04}
  .h2{font-size:34px;line-height:1.1}
  .lead{font-size:18px;line-height:25px}
  .hero{min-height:calc(100svh - 78px);padding:clamp(24px,6svh,56px) 20px clamp(40px,10svh,96px)}
  .hero .h1{max-width:340px;font-size:clamp(28px,8vw,32px);line-height:1.12}
  .hero .lead{margin-top:16px;font-size:16px;line-height:24px}
  .lead-desktop{display:none}
  .lead-phone{display:inline}
  .join{margin-top:28px}
  .join{align-self:center;max-width:360px}
  .join-field{flex-direction:row;border-radius:999px;gap:2px;padding:3px}
  .join-input{min-height:44px;padding:0 12px;text-align:left;font-size:16px}
  .join-disc{width:28px;height:28px}
  .join-mk{width:22px;height:22px}
  .join-btn{width:auto;min-height:44px;padding:0 14px;font-size:13px}
  .join-foot{width:auto;left:0;transform:none}
  .stage{padding:0 12px 56px}
  .glow{top:-20px}
  .panel{border-radius:26px}
  .panel-head{padding:14px 18px}
  /* Narrow phones wrap the suggestion onto more lines; wider ones get a shorter panel instead of blank room under it. */
  .panel{height:min(540px,max(480px,calc(890px - 100vw)),calc(100svh - 120px))}
  .chat{padding:20px 18px 24px;gap:20px;-webkit-mask-image:linear-gradient(transparent,#000 24px);mask-image:linear-gradient(transparent,#000 24px)}
  /* Phones: no avatar column and no disc. The mark sits unboxed before the name with the status on the same line,
     one row that keeps its height when the status goes, so the cards take the whole width and nothing below moves. */
  .msg{position:relative;gap:0}
  .msg .av{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:0;background:none;box-shadow:none}
  .av .mk{width:28px;height:28px}
  .msg-body{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:12px;justify-items:start}
  .msg-body>*{grid-column:1/-1}
  .msg-who{grid-column:1;margin-top:0;padding-left:36px;line-height:28px}
  .msg-status{grid-column:2;display:flex;align-items:center;gap:8px;min-width:0;line-height:28px}
  .msg-status::before{content:"";flex:none;width:3px;height:3px;border-radius:50%;background:var(--ink-faint)}
  .bubble{font-size:16px;line-height:23px}
  .bubble-you{padding:8px 14px;font-size:15px;line-height:22px}
  .card{padding:16px 18px 18px}
  .card-t{font-size:20px;line-height:26px}
  .card .btn{margin-top:12px}
  /* Once pressed, Build steps back to an outline so the new messages lead. */
  .card .btn[aria-disabled="true"]{background:transparent;border-color:var(--border)}
  .plan-steps li{font-size:16px;line-height:23px}
  .panel-foot{padding:10px 18px;justify-content:space-between;gap:8px}
  .panel-foot .btn-ghost{border-color:transparent;padding:0 12px;margin-left:-12px}
  .section{padding:72px 20px}
  /* Equal tracks keep both number-to-number connections the same length. */
  .flow{grid-template-columns:1fr;grid-auto-rows:1fr;gap:40px;margin-top:40px}
  .flow::before{display:none}
  .flow li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-content:start}
  /* The number spans title and text, so the text follows the title directly. */
  .flow-n{grid-row:1/3;z-index:1}
  /* Phones: the gradient line runs down from each circle's centre to the next (40 px gap + 22 px), none after 3. */
  .flow li:not(:last-child)::after{content:"";position:absolute;left:21px;top:22px;bottom:-62px;width:2px;background:var(--grad);opacity:.6;border-radius:2px;z-index:0}
  .flow h3{margin-top:8.5px;font-size:20px;line-height:27px;align-self:start}
  .flow p{grid-column:2;margin-top:10px;font-size:17px;line-height:26px;max-width:none}
  .faq{padding-top:64px;padding-bottom:24px;gap:32px}
  .qa-q{min-height:64px;padding:20px 0;font-size:17px;line-height:26px}
  .qa-in p{padding-top:4px;padding-bottom:24px;font-size:16px;line-height:26px}
  .close{padding:48px 20px 96px}
  .close .join-btn{width:auto}
}
@media (max-width:374px){
  .lockup-mark{width:24px;height:24px}
  .lockup-word{font-size:20px}
  .lockup{gap:7px}
  .h1{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .qa-a,.qa-q::after,.join-cover,.join-disc,.join-cover-t{transition:none!important} /* the cover's busy and success read at once */
  /* The rule above would turn app.js's room reserves into a .01ms transition (property all), leaving the old
     min-height in layout until the next frame; reserved room must hold from the first layout. */
  .join-foot,#qa{transition:none!important}
  /* The one exception (DESIGN, Motion): while Samlify is busy its mark breathes in place, opacity only and slow.
     No turn, no travel; everything else stays still. */
  .msg-load .av .blade,.join[data-state="sending"] .join-mk .blade{animation:breathe 1.6s ease-in-out infinite!important}
}

/* Private invite links. After a confirmed new signup the field shows the person's own link
   with Copy link (same pill, so nothing above moves), and the gift line sits under the status. */
.invite-input,.invite-copy,.invite-more{display:none}
.join.invited .join-field>.join-input:not(.invite-input),.join.invited .join-field>.join-btn:not(.invite-copy){display:none}
.join.invited .invite-input{display:block;text-overflow:ellipsis;color:var(--ink)}
.join.invited .invite-copy{display:inline-flex}
.join.invited .invite-more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.invite-gift{max-width:600px;font-size:15px;line-height:22px;color:var(--ink-muted);text-wrap:pretty}
.invite-gift b{font-weight:500;color:var(--ink)}
.invite-gift a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.hero.invited .hero-foot{display:none}
/* A visitor from a friend's invite link: one small line above the headline, added by the server. */
.invite-line{margin-bottom:16px;font-size:15px;line-height:22px;font-weight:500;color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .invite-line{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}
}
@media (forced-colors:active){.invite-line{background:none;color:CanvasText}}
@media (max-width:640px){
  .join.invited .invite-input{font-size:15px;padding:0 8px 0 14px}
  .copy-more{display:none}
  .invite-gift{padding:0 4px}
  .invite-line{margin-bottom:12px}
}

/* Proof, text only (William, 23 October 2026): the startup programs that gave Samlify credits. Quiet, under the closing form. */
.close-proof{margin-top:-16px;max-width:520px;font-size:15px;line-height:22px;color:var(--ink-muted);text-wrap:balance}

/* Invite popup after a signup */
.invite-pop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(31,30,27,.32);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s .2s}
.invite-pop:not(.on){pointer-events:none}
.invite-pop.on{opacity:1;visibility:visible;transition:opacity .2s var(--ease)}
.invite-pop-on{overflow:hidden}
.invite-pop-card{position:relative;width:100%;max-width:520px;max-height:100%;overflow:auto;padding:36px 32px 28px;border-radius:32px;text-align:center;
  border:1.5px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;box-shadow:0 24px 64px rgba(31,30,27,.16);
  transform:translateY(12px) scale(.98);transition:transform .26s var(--ease)}
.invite-pop.on .invite-pop-card{transform:none}
.invite-pop-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:28px;line-height:1;color:var(--ink-muted);cursor:pointer}
.invite-pop-x:hover{background:var(--surface)}
.invite-pop-mk{width:56px;height:56px;display:block;margin:0 auto 14px}
.invite-pop-t{font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-.02em}
.invite-pop-lead{margin-top:8px;font-size:17px;color:var(--ink-muted)}
.invite-pop-field{margin-top:20px;display:flex;gap:6px;padding:4px;border-radius:999px;border:1px solid var(--border);background:var(--paper)}
.invite-pop-input{flex:1 1 auto;min-width:0;min-height:44px;border:0;background:transparent;padding:0 14px;font:inherit;font-size:16px;color:var(--ink)}
.invite-pop-input:focus{outline:none}
.invite-pop-copy{flex:none;min-height:44px}
.invite-pop-gift{margin-top:18px;font-size:16px;line-height:24px;color:var(--ink-muted);text-wrap:pretty}
.invite-pop-gift b{color:var(--ink);font-weight:500}
.invite-pop-share{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.invite-pop-share .btn{min-height:44px}
.invite-pop-foot{margin-top:18px;font-size:14px;color:var(--ink-faint)}
.invite-pop-foot a{color:var(--ink-muted)}
@media (max-width:640px){.invite-pop{align-items:flex-end}.invite-pop-card{padding:32px 20px 22px;border-radius:28px}.invite-pop-t{font-size:26px}}
@media (prefers-reduced-motion:reduce){.invite-pop,.invite-pop-card{transition:none}}
/* The optional question in the popup, above the link: the same field and button as the link's, one quiet note under it. */
.invite-pop-ask{margin-top:20px;padding-bottom:20px;border-bottom:1px solid var(--divider)}
.invite-pop-ql{display:block;font-size:17px;line-height:24px;font-weight:500;color:var(--ink)}
.invite-pop-qf{margin-top:12px;display:flex;gap:6px;padding:4px;border-radius:999px;border:1px solid var(--border);background:var(--bg);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.invite-pop-qf:focus-within{border-color:var(--border-hover);box-shadow:0 0 16px rgba(133,84,231,.16)}
.invite-pop-qin{flex:1 1 auto;min-width:0;min-height:44px;border:0;background:transparent;padding:0 14px;font:inherit;font-size:16px;color:var(--ink)}
.invite-pop-qin:focus{outline:none}
.invite-pop-send{flex:none;min-height:44px}
.invite-pop-send[aria-disabled="true"]{opacity:.7;cursor:progress}
.invite-pop-qn{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.invite-pop-err{font-size:14px;line-height:20px;color:#B3261E}
.invite-pop-err:empty{display:none}
.invite-pop-done{font-size:16px;line-height:24px;font-weight:500;color:var(--ink);text-wrap:pretty}
.invite-pop-ask+.invite-pop-lead{margin-top:20px}
@media (max-width:640px){
  .invite-pop-ask{margin-top:14px;padding-bottom:14px}
  .invite-pop-ql{font-size:16px;line-height:22px}
  .invite-pop-qf{margin-top:10px}
  .invite-pop-qin{padding:0 10px 0 14px}
  .invite-pop-send{padding:0 14px;font-size:14px}
  .invite-pop-ask+.invite-pop-lead{margin-top:14px}
  /* With the question above, the card stays within a small phone's screen: a smaller mark, and the three share buttons on one row. */
  .invite-pop-on .invite-pop-card{padding-top:24px}
  .invite-pop-mk{width:44px;height:44px;margin-bottom:10px}
  .invite-pop-share .btn{padding:0 14px}
  .invite-pop-gift{margin-top:14px}
  .invite-pop-share{margin-top:12px}
  .invite-pop-foot{margin-top:14px}
}

/* The nudge: two soft pulses of the button when a typed address was left unsent. */
.join-btn.nudge{animation:join-nudge 1.1s var(--ease) 2}
@keyframes join-nudge{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(133,84,231,0)}45%{transform:scale(1.035);box-shadow:0 0 0 7px rgba(133,84,231,.16)}}
.join[data-state="nudge"] .join-status{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.join-btn.nudge{animation:none}}

/* The ask: the optional question on the page itself (d-ask). A quiet white pill above the email,
   the same height as the signup row; the signup button sends both. */
.join-q{display:block;width:100%;min-height:56px;margin-bottom:12px;padding:0 24px;border:1px solid var(--border);border-radius:999px;background:var(--bg);box-shadow:var(--sh-soft);
  font:inherit;font-size:17px;color:var(--ink);outline:none;transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.join-q::placeholder{color:var(--ink-faint)}
.join-q:hover{border-color:var(--border-hover)}
.join-q:focus{border-color:var(--border-hover);box-shadow:0 0 16px rgba(133,84,231,.16)}
.join-q:read-only{color:var(--ink-muted)}
.join.invited .join-q{display:none}
@media (max-width:640px){.join-q{min-height:50px;margin-bottom:10px;padding:0 16px;font-size:16px}}