/* TellCMS landing page styles. Extracted from index.html (formerly inline). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Ledgerly-inspired SaaS / fintech: slate neutrals + emerald accent ([ledgerly.aura.build](https://ledgerly.aura.build/)) */
  --bg:#f8fafc;
  --sidebar:#ecfdf5;
  --mint:#34d399;
  --dark:#020617;
  --accent:#059669;
  --accent-deep:#047857;
  --accent-light:#d1fae5;
  --text:#0f172a;
  --text-mid:#475569;
  --text-muted:#94a3b8;
  --border:#e2e8f0;
  --card-bg:#ffffff;
  /* Ledgerly (aura.build): headline / display type is Space Grotesk */
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
html{scroll-behavior:smooth}
/* Same as ledgerly.aura.build computed h1 */
h1{font-family:'Space Grotesk',sans-serif!important}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
}

/* ── NAV ───────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;height:68px;
  background:rgba(248,250,252,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  display:flex;align-items:center;
  text-decoration:none;line-height:0;
}
.nav-logo img{
  height:34px;width:auto;max-width:200px;
  object-fit:contain;display:block;
}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--text-mid);
  font-size:0.9rem;font-weight:400;
  transition:color .2s;
}
.nav-links a:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:1rem}
.nav-signin{
  text-decoration:none;color:var(--text-mid);
  font-size:.9rem;font-weight:400;
  transition:color .2s;
}
.nav-signin:hover{color:var(--accent)}
.nav-cta{
  background:var(--accent);color:#fff;
  padding:.5rem 1.4rem;border-radius:100px;
  text-decoration:none;font-size:.875rem;font-weight:500;
  transition:background .2s,transform .15s;
}
.nav-cta:hover{background:var(--accent-deep);transform:translateY(-1px)}

/* ── HERO ──────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:start;gap:4rem;
  /* Fixed nav is 68px — pad by nav height + breathing room so content/visual clear the bar */
  padding:calc(68px + 3rem) 5vw 80px;
  position:relative;overflow:hidden;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px,rgba(15,23,42,0.05) 1px,transparent 0);
  background-size:28px 28px;
}
.hero-content{position:relative;z-index:2}
.hero::before{
  content:'';
  position:absolute;top:-200px;right:-100px;
  width:700px;height:700px;
  background:radial-gradient(ellipse,rgba(52,211,153,0.28) 0%,transparent 68%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute;bottom:-150px;left:-80px;
  width:500px;height:500px;
  background:radial-gradient(ellipse,rgba(14,165,233,0.09) 0%,transparent 70%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--sidebar);
  color:var(--accent);
  font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem 1rem;border-radius:100px;
  margin-bottom:1.5rem;
}
.hero-eyebrow span{
  width:6px;height:6px;background:var(--accent);border-radius:50%;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.75rem,4.2vw,4rem);
  font-weight:700;line-height:1.06;
  letter-spacing:-0.035em;
  color:var(--dark);
  margin-bottom:1.5rem;
}
.hero h1 em{
  font-style:italic;color:var(--accent);
}
.hero-sub{
  font-size:1.1rem;color:var(--text-mid);
  line-height:1.75;max-width:480px;
  margin-bottom:2.5rem;
}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn-primary{
  background:var(--accent);color:#fff;
  padding:.75rem 2rem;border-radius:100px;
  text-decoration:none;font-size:.95rem;font-weight:500;
  transition:background .2s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(5,150,105,.25);
}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 8px 28px rgba(5,150,105,.3)}
.btn-secondary{
  color:var(--accent);text-decoration:none;
  font-size:.95rem;font-weight:500;
  display:flex;align-items:center;gap:.4rem;
  transition:gap .2s;
}
.btn-secondary:hover{gap:.7rem}
.hero-note{
  font-size:.8rem;color:var(--text-muted);margin-top:1rem;
}

/* chat mockup */
.hero-visual{
  position:relative;z-index:2;
}
.chat-mockup{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(15,23,42,.09);
  animation:floatUp .8s ease both;
}
@keyframes floatUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.chat-header{
  background:var(--dark);
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:.75rem;
}
.chat-header-dot{width:10px;height:10px;border-radius:50%;background:var(--mint)}
.chat-header-title{
  font-size:.8rem;color:rgba(255,255,255,.7);font-weight:400;
}
.chat-header-site{
  font-size:.8rem;color:#fff;font-weight:500;margin-left:auto;
  background:rgba(255,255,255,.1);padding:.2rem .6rem;border-radius:100px;
}
.chat-body{
  padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;
  background:#fafaf9;
  /* Fixed min-height keeps the card from jumping between phases of the
     scripted animation — bubbles fade in/out without collapsing layout. */
  min-height:340px;
  transition:min-height .4s ease;
}
.bubble{
  max-width:85%;padding:.7rem 1rem;border-radius:14px;
  font-size:.875rem;line-height:1.5;
  /* Every scripted bubble starts invisible; the state machine in
     the JS block below toggles .is-visible to reveal them. */
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.bubble.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.bubble-user.is-visible{
  /* Slightly different entry for the user bubble — it "flies" in from
     the right so it visually reads as the user's typed message landing
     in the chat transcript. */
  animation:bubbleUserIn .4s ease both;
}
@keyframes bubbleUserIn{
  from{opacity:0;transform:translate(12px,4px) scale(.96)}
  to  {opacity:1;transform:translate(0,0)          scale(1)}
}
/* Thinking bubble: 3 dots bouncing while Claude is "thinking". */
.bubble-thinking{
  padding:.55rem .9rem;
  align-self:flex-start;
}
.thinking-dots{display:inline-flex;gap:4px;align-items:center;height:14px}
.thinking-dots i{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.4;
  animation:thinkingBounce 1.1s infinite ease-in-out both;
}
.thinking-dots i:nth-child(2){animation-delay:.15s}
.thinking-dots i:nth-child(3){animation-delay:.3s}
@keyframes thinkingBounce{
  0%,80%,100%{transform:translateY(0);opacity:.4}
  40%        {transform:translateY(-4px);opacity:1}
}
/* Success bubble: soft green tint + animated check. */
.bubble-success{
  background:#f0faf4;border-color:#b8e6c8;
  color:#1f5c37;display:flex;align-items:center;gap:.55rem;
}
.bubble-success strong{color:#1f5c37}
.success-check{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:#2f9e57;color:#fff;font-size:.72rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(47,158,87,.4);
}
.bubble-success.is-visible .success-check{
  animation:successPop .5s ease .1s both, successPulse 1.4s ease .6s 1;
}
@keyframes successPop{
  from{transform:scale(.3);opacity:0}
  60% {transform:scale(1.15)}
  to  {transform:scale(1);opacity:1}
}
@keyframes successPulse{
  0%  {box-shadow:0 0 0 0 rgba(47,158,87,.45)}
  100%{box-shadow:0 0 0 10px rgba(47,158,87,0)}
}
.bubble-user{
  background:var(--accent);color:#fff;
  align-self:flex-end;border-bottom-right-radius:4px;
  /* User bubbles are short single-utterance lines; the .bubble base
     padding/line-height is tuned for AI replies (which often wrap and
     embed media), so tighten the user bubble specifically. The wider
     max-width lets longer messages wrap to ≤2 lines on desktop instead
     of being squeezed into 3, which keeps the bubble visually compact. */
  padding:.3rem .8rem;line-height:1.35;
  max-width:92%;
}
.bubble-ai{
  background:#fff;color:var(--text);
  border:1px solid var(--border);
  align-self:flex-start;border-bottom-left-radius:4px;
}
.bubble-ai strong{color:var(--accent)}
.approval-card{
  background:#fff;border:1.5px solid var(--accent);
  border-radius:12px;padding:.9rem 1rem;
  font-size:.8rem;
  /* Same reveal pattern as bubbles — hidden by default, the state
     machine toggles .is-visible. The card slides up a little further
     so the transition feels deliberate. */
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.approval-card.is-visible{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
/* When the user "approves", the card briefly highlights the Approve
   button and then fades out as the success bubble takes over. */
.btn-approve.is-clicking{
  animation:approveClick .45s ease both;
}
@keyframes approveClick{
  0%  {transform:scale(1);box-shadow:0 0 0 0 rgba(5,150,105,.35)}
  50% {transform:scale(.94);box-shadow:0 0 0 10px rgba(5,150,105,.12)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(5,150,105,0)}
}
.approval-card .ac-header{
  font-weight:500;color:var(--accent);margin-bottom:.6rem;font-size:.8rem;
}
.approval-card .ac-row{
  display:flex;justify-content:space-between;
  color:var(--text-mid);padding:.2rem 0;
  border-bottom:1px solid #f1f5f9;font-size:.78rem;
}
.approval-card .ac-row:last-of-type{border:none}
.approval-card .ac-change{
  display:flex;align-items:center;gap:.5rem;
  margin-top:.6rem;padding:.4rem .6rem;
  background:var(--accent-light);border-radius:6px;font-size:.78rem;
}
.ac-old{text-decoration:line-through;color:var(--text-muted)}
.ac-arrow{color:var(--accent)}
.ac-new{color:var(--accent);font-weight:500}
.approval-btns{display:flex;gap:.5rem;margin-top:.75rem}
.btn-approve{
  flex:1;background:var(--accent);color:#fff;
  border:none;border-radius:100px;padding:.4rem;
  font-size:.78rem;font-weight:500;cursor:pointer;
  font-family:var(--font-body);
}
.btn-deny{
  flex:1;background:var(--sidebar);color:var(--text);
  border:none;border-radius:100px;padding:.4rem;
  font-size:.78rem;cursor:pointer;
  font-family:var(--font-body);
}
.chat-input-row{
  display:flex;gap:.5rem;align-items:center;
  padding:.75rem 1rem;background:#fff;border-top:1px solid var(--border);
}
.chat-input{
  flex:1;background:var(--bg);border:1px solid var(--border);
  border-radius:100px;padding:.45rem 1rem;
  font-size:.8rem;color:var(--text-mid);font-family:var(--font-body);
  min-height:1.6em;
  display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;
}
.chat-input.is-idle{color:var(--text-muted)}
.chat-input-text{display:inline-block}
.chat-caret{
  display:inline-block;width:1px;height:1em;
  background:var(--accent);margin-left:2px;
  animation:caretBlink 1s steps(1) infinite;
  opacity:0;
}
.chat-input.is-typing .chat-caret,
.chat-input.is-focus  .chat-caret{opacity:1}
@keyframes caretBlink{50%{opacity:0}}
/* Send button pulses once when the user "sends" the message. */
.chat-send.is-sending{animation:sendPulse .5s ease both}
@keyframes sendPulse{
  0%  {transform:scale(1)}
  50% {transform:scale(1.2);filter:brightness(1.15)}
  100%{transform:scale(1)}
}
/* Respect the OS reduced-motion preference: skip the scripted loop and
   just show the finished approval-card state (this matches what a
   returning visitor would see anyway). */
@media (prefers-reduced-motion:reduce){
  .chat-mockup{animation:none}
  .bubble,.approval-card{transition:none}
  .bubble[data-stage="user"],
  .bubble[data-stage="reply"],
  .approval-card[data-stage="approval"]{opacity:1;transform:none;pointer-events:auto}
  .bubble[data-stage="thinking"],
  .bubble[data-stage="success"]{display:none}
  .thinking-dots i{animation:none}
}
.chat-send{
  background:var(--accent);border:none;border-radius:50%;
  width:30px;height:30px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.chat-send::after{
  content:'';display:block;
  width:0;height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid #fff;
  margin-left:2px;
}
/* Paperclip attach button — used in scene 3 only. */
.chat-attach{
  background:transparent;border:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  transition:color .2s,background .2s;
}
.chat-attach:hover,
.chat-attach.is-active{
  color:var(--accent);background:var(--accent-light);
}

/* ── Scene deck (multi-scenario carousel) ─────────────────── */
.scene-deck{
  /* All three scenes share a single grid cell so the deck auto-grows
     to the tallest scene. This guarantees the dots below it never get
     covered by a scene that happens to be taller than the others. */
  display:grid;
  grid-template-areas:"stack";
}
.scene{
  grid-area:stack;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
/* Keep the active scene painted above the others during crossfades —
   otherwise a scene later in DOM (e.g. "images") would visually cover
   an earlier active scene while its opacity is still animating out. */
.scene.is-active{opacity:1;pointer-events:auto;z-index:1}
.scene-dots{
  display:flex;gap:.5rem;justify-content:center;
  margin-top:1.25rem;
}
.scene-dots button{
  width:18px;height:4px;border-radius:100px;
  background:var(--border);border:none;cursor:pointer;padding:0;
  transition:background .25s ease,width .25s ease;
}
.scene-dots button.is-active{background:var(--accent);width:28px}
.scene-dots button:hover{background:var(--accent)}

/* ── Scene 1: Connect Sitefinity ──────────────────────────── */
.connect-body{
  /* Fits the same min-height rule as .chat-body so all scenes line up. */
  min-height:340px;
}
.connect-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.1rem 0 .35rem;
}
.connect-title{font-size:.95rem;font-weight:500;color:var(--text)}
.btn-add-site{
  background:var(--accent);color:#fff;
  font-size:.78rem;font-weight:500;font-family:var(--font-body);
  border:none;border-radius:100px;
  padding:.4rem .9rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;
  box-shadow:0 4px 14px rgba(5,150,105,.18);
  transition:transform .15s,box-shadow .2s;
}
.btn-add-site span[aria-hidden]{font-size:1rem;line-height:1}
.btn-add-site.is-clicking{animation:approveClick .45s ease both}
.connect-empty{
  border:1.5px dashed var(--border);
  border-radius:12px;padding:1.25rem;
  text-align:center;color:var(--text-muted);font-size:.8rem;
  transition:opacity .35s ease,transform .35s ease;
}
.connect-empty.is-hidden{opacity:0;transform:translateY(-4px);pointer-events:none}
.connect-list{display:flex;flex-direction:column;gap:.5rem}
.site-tile{
  background:#fff;border:1px solid var(--border);
  border-radius:10px;padding:.65rem .8rem;
  display:flex;align-items:center;gap:.6rem;font-size:.78rem;
  opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .4s ease,transform .4s ease;
}
.site-tile.is-visible{opacity:1;transform:translateY(0) scale(1)}
.site-tile .st-dot{
  width:8px;height:8px;border-radius:50%;background:#2f9e57;
  box-shadow:0 0 0 0 rgba(47,158,87,.4);
  animation:successPulse 1.6s ease 1;
}
.site-tile .st-name{font-weight:500;color:var(--text)}
.site-tile .st-meta{
  color:#2f9e57;margin-left:auto;font-size:.72rem;font-weight:500;
}
/* Inline "Add website" form (slides up inside the mockup). */
.connect-form{
  background:#fff;border:1px solid var(--accent);
  border-radius:12px;padding:.85rem .95rem;
  display:flex;flex-direction:column;gap:.55rem;
  box-shadow:0 8px 28px rgba(5,150,105,.08);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .4s ease,transform .4s ease;
  pointer-events:none;
}
.connect-form.is-visible{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
.cf-title{
  font-size:.78rem;font-weight:500;color:var(--accent);
  margin-bottom:.15rem;
}
.cf-row{display:flex;gap:.55rem}
.cf-row .cf-field{flex:1;min-width:0}
.cf-field{display:flex;flex-direction:column;gap:.2rem}
.cf-label{
  font-size:.62rem;color:var(--text-muted);
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;
}
.cf-input{
  background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:.35rem .6rem;
  font-size:.75rem;color:var(--text);font-family:var(--font-mono);
  min-height:1.7em;
  display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;
  transition:border-color .2s,box-shadow .2s;
}
.cf-input.is-typing{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(5,150,105,.08);
}
.cf-input .chat-caret{opacity:0}
.cf-input.is-typing .chat-caret{opacity:1}
.cf-connect{
  align-self:flex-end;
  background:var(--accent);color:#fff;
  font-size:.78rem;font-weight:500;font-family:var(--font-body);
  border:none;border-radius:100px;
  padding:.42rem 1.1rem;cursor:pointer;margin-top:.25rem;
}
.cf-connect.is-clicking{animation:approveClick .45s ease both}

/* ── Scene 3: Image grid + attachment chip ────────────────── */
/* Scene 3's transcript grows past a single-viewport height across
   two rounds, so we cap the body and let older bubbles scroll up
   under a slim transparent scrollbar as new ones arrive. */
.scene[data-scene="images"] .chat-body{
  max-height:340px;
  overflow-y:auto;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.scene[data-scene="images"] .chat-body::-webkit-scrollbar{width:4px}
.scene[data-scene="images"] .chat-body::-webkit-scrollbar-track{background:transparent}
.scene[data-scene="images"] .chat-body::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.1);border-radius:100px;
}
.bubble-media{max-width:100%;width:100%}
/* Single-row grids keep the reply bubble compact so scene 3's mockup
   matches the height of scenes 1 & 2. Grid column count is per-grid:
   5 for round 1 (5 tiles), 6 for round 2 (5 + 1 new). */
.image-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem;
  margin-top:.45rem;
}
.image-grid[data-el="grid1"]{grid-template-columns:repeat(5,1fr)}
.image-tile{
  position:relative;aspect-ratio:4/3;border-radius:6px;
  background:var(--bg);overflow:hidden;
  border:1px solid var(--border);
  opacity:0;transform:scale(.92);
  transition:opacity .35s ease,transform .35s ease;
}
.image-tile.is-visible{opacity:1;transform:scale(1)}
/* Placeholder "image" = labelled gradient so the tiles read as
   distinct content without actually needing bitmap assets. */
.image-tile::before{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:500;font-size:.58rem;letter-spacing:0;
  padding:1px;text-align:center;line-height:1;
  background:linear-gradient(135deg,var(--ph-a,#99f6e4) 0%,var(--ph-b,#047857) 100%);
}
.image-tile.is-new{
  animation:newTile 1.6s ease 1;
  border-color:#2f9e57;
}
@keyframes newTile{
  0%  {box-shadow:0 0 0 0  rgba(47,158,87,.55)}
  100%{box-shadow:0 0 0 8px rgba(47,158,87,0)}
}
.tile-download{
  position:absolute;bottom:3px;right:3px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-size:.58rem;font-weight:700;line-height:1;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  opacity:0;transition:opacity .25s ease .15s;
}
.image-tile.is-visible .tile-download{opacity:1}

.input-attachments{
  padding:.35rem 1rem 0;background:#fff;
  display:none;
}
.input-attachments.is-visible{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--sidebar);color:var(--accent);
  border-radius:100px;padding:.2rem .65rem;
  font-size:.7rem;font-weight:500;
  opacity:0;transform:translateY(4px);
  transition:opacity .3s,transform .3s;
}
.chip.is-visible{opacity:1;transform:translateY(0)}
.chip-size{color:var(--text-muted);font-weight:400;margin-left:.1rem}

/* Extend reduced-motion fallback to cover the new scenes: show each
   scene's "finished" state and skip all entry transitions. */
@media (prefers-reduced-motion:reduce){
  .scene{transition:none;opacity:1;pointer-events:auto}
  .scene:not(.is-active){display:none}
  .connect-empty,.connect-form{transition:none}
  .connect-form{opacity:1;transform:none;pointer-events:auto}
  .site-tile,.image-tile,.chip{opacity:1;transform:none;transition:none}
  .input-attachments{display:flex}
}

/* ── LOGOS / PLATFORMS ─────────────────────── */
.platforms{
  padding:2rem 5vw 5rem;
  text-align:center;
}
.platforms-label{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:2rem;font-weight:500;
}
.platform-grid{
  display:flex;gap:2rem;justify-content:center;align-items:center;flex-wrap:wrap;
}
.platform-pill{
  display:flex;align-items:center;gap:.6rem;
  background:#fff;border:1px solid var(--border);
  border-radius:100px;padding:.6rem 1.4rem;
  font-size:.875rem;font-weight:500;color:var(--text-mid);
  transition:border-color .2s,box-shadow .2s;
}
.platform-pill:hover{border-color:var(--mint);box-shadow:0 4px 20px rgba(52,211,153,.22)}
.platform-icon{
  width:22px;height:22px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#fff;
}
.icon-sf{background:var(--accent)}
.icon-sc{background:#eb1c26}
.icon-wp{background:#21759b}

/* ── SECTION SHARED ────────────────────────── */
section{padding:6rem 5vw}
.section-label{
  display:inline-block;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:.75rem;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2rem,3vw,2.75rem);
  font-weight:700;line-height:1.15;
  letter-spacing:-0.025em;color:var(--dark);
  margin-bottom:1rem;
}
.section-sub{
  font-size:1.05rem;color:var(--text-mid);
  max-width:520px;line-height:1.75;
  margin-bottom:3rem;
}

/* ── HOW IT WORKS ──────────────────────────── */
.how{background:var(--dark)}
.how .section-label{color:var(--mint)}
.how .section-title{color:#fff}
.how .section-sub{color:rgba(255,255,255,.6)}
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2px;
}
.step{
  padding:2.5rem 2rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  position:relative;transition:background .3s;
}
.step:hover{background:rgba(255,255,255,.06)}
.step-num{
  font-family:var(--font-display);
  font-size:3.5rem;font-weight:700;
  color:rgba(52,211,153,.18);
  line-height:1;margin-bottom:1rem;
}
.step-icon{
  width:44px;height:44px;background:rgba(179,222,193,.12);
  border-radius:10px;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
}
.step-icon svg{width:22px;height:22px;fill:none;stroke:var(--mint);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step h3{color:#fff;font-size:1rem;font-weight:500;margin-bottom:.5rem}
.step p{color:rgba(255,255,255,.55);font-size:.875rem;line-height:1.65}

/* ── FEATURES ──────────────────────────────── */
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.feat-card{
  background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:2rem;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.feat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(15,23,42,.07);
  border-color:var(--mint);
}
.feat-icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--accent-light);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
}
.feat-icon svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feat-card h3{font-size:1.05rem;font-weight:500;color:var(--dark);margin-bottom:.5rem}
.feat-card p{font-size:.875rem;color:var(--text-mid);line-height:1.65}

/* ── PLATFORMS DETAIL ──────────────────────── */
.platforms-detail{background:var(--sidebar)}
.plat-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}
.plat-card{
  background:#fff;border:1px solid rgba(179,222,193,.4);
  border-radius:16px;padding:2rem;
  transition:box-shadow .2s;
}
.plat-card:hover{box-shadow:0 8px 32px rgba(179,222,193,.4)}
.plat-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .9rem;border-radius:100px;
  font-size:.75rem;font-weight:500;margin-bottom:1.25rem;
}
.badge-sf{background:rgba(5,150,105,.1);color:var(--accent)}
.badge-sc{background:rgba(235,28,38,.1);color:#c0121b}
.badge-wp{background:rgba(33,117,155,.1);color:#165a78}
.plat-card h3{font-size:1.05rem;font-weight:500;color:var(--dark);margin-bottom:.6rem}
.plat-card p{font-size:.875rem;color:var(--text-mid);line-height:1.65;margin-bottom:1.25rem}
.plat-features{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.plat-features li{
  font-size:.82rem;color:var(--text-mid);
  display:flex;align-items:center;gap:.5rem;
}
.plat-features li::before{
  content:'';display:block;
  width:5px;height:5px;border-radius:50%;
  background:var(--mint);flex-shrink:0;
}
.plat-status{
  display:inline-block;
  font-size:.72rem;font-weight:500;
  padding:.2rem .65rem;border-radius:100px;
  margin-top:1rem;
}
.status-live{background:rgba(52,199,123,.12);color:#1a7a4a}
.status-soon{background:rgba(240,165,0,.12);color:#8a5e00}

/* ── PRICING ───────────────────────────────── */
.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;align-items:start;
}
.pricing-card{
  background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:2rem;
  transition:transform .2s,box-shadow .2s;
}
.pricing-card:hover{transform:translateY(-4px)}
.pricing-card.featured{
  border:2px solid var(--accent);
  box-shadow:0 12px 48px rgba(5,150,105,.15);
  position:relative;
}
.pricing-card.featured::before{
  content:'Most popular';
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;
  font-size:.72rem;font-weight:500;padding:.25rem .9rem;
  border-radius:100px;white-space:nowrap;
}
.pricing-label{
  font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:.75rem;
}
.pricing-price{
  display:flex;align-items:baseline;gap:.3rem;
  margin-bottom:.25rem;
}
.pricing-price .amount{
  font-family:var(--font-display);
  font-size:2.8rem;font-weight:700;color:var(--dark);letter-spacing:-0.03em;
}
.pricing-price .currency{
  font-size:1.2rem;font-weight:500;color:var(--text-mid);margin-bottom:.3rem;
}
.pricing-price .period{
  font-size:.85rem;color:var(--text-muted);
}
.pricing-desc{
  font-size:.85rem;color:var(--text-mid);
  margin-bottom:1.5rem;padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.pricing-features{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.75rem}
.pricing-features li{
  font-size:.875rem;color:var(--text-mid);
  display:flex;align-items:flex-start;gap:.6rem;
}
.check{
  flex-shrink:0;width:17px;height:17px;
  background:var(--sidebar);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.check::after{
  content:'';display:block;
  width:5px;height:3px;
  border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg) translate(0.5px,-0.5px);
}
.pricing-btn{
  display:block;text-align:center;text-decoration:none;
  padding:.7rem;border-radius:100px;font-size:.875rem;font-weight:500;
  transition:all .2s;
}
.pricing-btn-outline{
  border:1.5px solid var(--border);color:var(--dark);
}
.pricing-btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.pricing-btn-fill{
  background:var(--accent);color:#fff;border:1.5px solid transparent;
  box-shadow:0 4px 16px rgba(5,150,105,.2);
}
.pricing-btn-fill:hover{background:var(--accent-deep)}
.pricing-note{
  text-align:center;font-size:.8rem;color:var(--text-muted);
  margin-top:1.5rem;
}
.pricing-loading,.pricing-error{
  grid-column:1/-1;text-align:center;padding:2rem 1rem;
  color:var(--text-muted);font-size:.95rem;
}
.pricing-error{color:var(--accent)}

/* ── TESTIMONIAL / CTA ─────────────────────── */
.cta{
  background:var(--dark);
  text-align:center;
  padding:8rem 5vw;
  position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;
  background:radial-gradient(ellipse,rgba(179,222,193,.08) 0%,transparent 70%);
  pointer-events:none;
}
.cta-logo{
  margin-bottom:2rem;display:block;line-height:0;
}
.cta-logo img{
  height:40px;width:auto;max-width:220px;margin:0 auto;
  object-fit:contain;display:block;
}
.cta h2{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3.35rem);
  font-weight:700;color:#fff;
  letter-spacing:-0.03em;line-height:1.1;
  margin-bottom:1.25rem;
}
.cta h2 em{font-style:italic;color:var(--mint)}
.cta p{
  font-size:1.05rem;color:rgba(255,255,255,.55);
  max-width:460px;margin:0 auto 2.5rem;
}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-light{
  background:#fff;color:var(--accent);
  padding:.75rem 2rem;border-radius:100px;
  text-decoration:none;font-size:.95rem;font-weight:500;
  transition:transform .15s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.btn-ghost{
  border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);
  padding:.75rem 2rem;border-radius:100px;
  text-decoration:none;font-size:.95rem;font-weight:400;
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.6);color:#fff}

/* ── FOOTER ────────────────────────────────── */
footer{
  background:var(--dark);
  border-top:1px solid rgba(255,255,255,.07);
  padding:2rem 5vw;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.footer-logo{display:flex;align-items:center;line-height:0;}
.footer-logo img{
  height:32px;width:auto;max-width:180px;
  object-fit:contain;display:block;
}
.footer-links{display:flex;gap:1.5rem;list-style:none}
.footer-links a{
  font-size:.8rem;color:rgba(255,255,255,.4);
  text-decoration:none;transition:color .2s;
}
.footer-links a:hover{color:rgba(255,255,255,.8)}
.footer-copy{font-size:.78rem;color:rgba(255,255,255,.3)}

/* ── ANIMATIONS ────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ── RESPONSIVE ────────────────────────────── */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:calc(68px + 3rem);text-align:center}
  .hero-sub{margin:0 auto 2.5rem}
  .hero-actions{justify-content:center}
  .hero-visual{display:none}
  .nav-links{display:none}
  .nav-signin{display:none}
  .nav-logo img{height:28px;max-width:160px}
}

/* ── UNDER THE HOOD INFOGRAPHIC ────────────── */
/* Break out of section horizontal padding — full viewport width */
#under-hood .uh-fullbleed-wrap{
  margin-left:-5vw;
  margin-right:-5vw;
  width:auto;
  max-width:none;
}
#uh-infographic-wrap *{box-sizing:border-box}
#uh-infographic-wrap{
  font-family:'Inter',system-ui,sans-serif;
  padding:28px clamp(12px,3vw,28px) 32px;
  background:#fff;
  border-radius:0;
  border:1px solid var(--border);
  border-left:none;
  border-right:none;
  width:100%;
  max-width:none;
}
#uh-infographic-wrap .iflow{width:100%}
/* Horizontal chain: left → right — flex to fit without overflow scroll */
#uh-infographic-wrap .uh-chain{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(2px,0.6vw,8px);
  width:100%;
  overflow-x:visible;
  padding:8px 0 12px;
}
#uh-infographic-wrap .uh-chain > *{min-width:0}

#uh-infographic-wrap .inode{
  position:relative;border-radius:16px;padding:clamp(10px,1.2vw,14px) clamp(10px,1.5vw,16px);
  cursor:default;
  transition:transform .2s,box-shadow .2s;
  opacity:0;transform:translateX(-18px);
  flex:1 1 0;
  width:auto;
  min-width:0;
  max-width:none;
}
#uh-infographic-wrap .inode.inode-orch{flex:1.2 1 0;min-width:0}
#uh-infographic-wrap .inode.ivisible{opacity:1;transform:translateX(0);transition:opacity .5s ease,transform .5s ease,box-shadow .2s}
#uh-infographic-wrap .inode:hover{transform:translateX(0) translateY(-3px);box-shadow:0 10px 28px rgba(5,150,105,.14)}
#uh-infographic-wrap .inode.ivisible.ipulse{animation:uh-ipulse-h .55s ease}
@keyframes uh-ipulse-h{0%{transform:translateX(0) scale(1)}40%{transform:translateX(0) scale(1.02)}100%{transform:translateX(0) scale(1)}}

#uh-infographic-wrap .inode-user{background:var(--dark);border:1.5px solid rgba(255,255,255,.1)}
#uh-infographic-wrap .inode-user .inode-icon svg{stroke:#f8fafc}
#uh-infographic-wrap .inode-user .inode-title{color:#f8fafc}
#uh-infographic-wrap .inode-user .inode-desc{color:rgba(255,255,255,.55)}

#uh-infographic-wrap .inode-orch{background:#fff;border:2px solid var(--accent)}
#uh-infographic-wrap .inode-orch .inode-icon svg{stroke:var(--accent)}
#uh-infographic-wrap .inode-orch .inode-title{color:var(--dark)}
#uh-infographic-wrap .inode-orch .inode-desc{color:var(--text-mid)}

#uh-infographic-wrap .inode-approval{background:#fff;border:2px dashed var(--accent)}
#uh-infographic-wrap .inode-approval .inode-icon svg{stroke:var(--accent)}
#uh-infographic-wrap .inode-approval .inode-title{color:var(--dark)}
#uh-infographic-wrap .inode-approval .inode-desc{color:var(--text-mid)}

#uh-infographic-wrap .inode-cms{background:var(--sidebar);border:1.5px solid var(--mint)}
#uh-infographic-wrap .inode-cms .inode-icon svg{stroke:#0f6e56}
#uh-infographic-wrap .inode-cms .inode-title{color:var(--dark)}
#uh-infographic-wrap .inode-cms .inode-desc{color:var(--text-mid)}

#uh-infographic-wrap .inode-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#uh-infographic-wrap .inode-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#uh-infographic-wrap .iicon-user{background:rgba(255,255,255,.1)}
#uh-infographic-wrap .iicon-orch{background:rgba(5,150,105,.07)}
#uh-infographic-wrap .iicon-approval{background:rgba(5,150,105,.1)}
#uh-infographic-wrap .iicon-cms{background:rgba(179,222,193,.4)}
#uh-infographic-wrap .inode-icon svg{width:17px;height:17px;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#uh-infographic-wrap .inode-title{font-size:12.5px;font-weight:600;line-height:1.25;overflow-wrap:break-word}
#uh-infographic-wrap .inode-badge{font-size:9px;font-weight:500;padding:2px 8px;border-radius:100px;margin-left:auto;white-space:nowrap}
#uh-infographic-wrap .ibadge-user{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
#uh-infographic-wrap .ibadge-orch{background:rgba(5,150,105,.08);color:var(--accent)}
#uh-infographic-wrap .ibadge-approval{background:rgba(5,150,105,.1);color:var(--accent)}
#uh-infographic-wrap .ibadge-cms{background:rgba(15,110,86,.1);color:#0a5040}
#uh-infographic-wrap .inode-desc{font-size:11px;line-height:1.5;padding-left:40px;overflow-wrap:break-word}

#uh-infographic-wrap .isub-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(5,150,105,.1)}
#uh-infographic-wrap .isub-step{display:flex;align-items:flex-start;gap:6px;background:rgba(5,150,105,.04);border-radius:8px;padding:6px 8px;opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .35s ease}
#uh-infographic-wrap .isub-step.ivisible{opacity:1;transform:translateX(0)}
#uh-infographic-wrap .istep-num{width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
#uh-infographic-wrap .istep-text{font-size:10px;color:var(--text);line-height:1.4}
#uh-infographic-wrap .istep-label{font-weight:600;display:block;font-size:10px;color:var(--dark)}
#uh-infographic-wrap .istep-sub{font-size:9px;color:var(--text-mid)}

/* Horizontal connectors — shrinkable so row fits viewport */
#uh-infographic-wrap .iconn-h{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  align-self:center;
  flex:0 1 clamp(28px,5vw,64px);
  width:auto;
  min-width:24px;
  max-width:72px;
  padding:0 1px;
  opacity:0;
  transition:opacity .35s ease;
}
#uh-infographic-wrap .iconn-h.ivisible{opacity:1}
#uh-infographic-wrap .iconn-line-h{
  width:100%;height:2px;background:var(--border);border-radius:1px;
  position:relative;overflow:visible;margin-bottom:4px;
}
#uh-infographic-wrap .iconn-tag-wrap{display:flex;justify-content:center;padding:0 2px;margin-bottom:2px}
#uh-infographic-wrap .iconn-tag{
  font-size:9px;font-weight:500;color:var(--accent);
  background:rgba(5,150,105,.07);padding:2px 6px;border-radius:100px;
  border:1px solid rgba(5,150,105,.14);white-space:normal;text-align:center;line-height:1.25;
  overflow-wrap:break-word;max-width:100%
}
#uh-infographic-wrap .iconn-arrow-h{
  width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:8px solid var(--border);
}

#uh-infographic-wrap .ipacket{
  position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;
  border-radius:50%;background:var(--accent);opacity:0;
}
#uh-infographic-wrap .ipacket.ianim{animation:uh-itravel-h .65s ease forwards}
@keyframes uh-itravel-h{
  0%{opacity:0;left:-6px}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;left:calc(100% + 6px)}
}

#uh-infographic-wrap .ichat-bubble{
  width:calc(100% - 40px);margin-left:40px;margin-top:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:8px;
  padding:6px 10px;font-size:10px;color:rgba(255,255,255,.65);font-style:italic;line-height:1.35;
  position:relative;opacity:0;transition:opacity .35s .15s ease
}
#uh-infographic-wrap .ichat-bubble.ivisible{opacity:1}
#uh-infographic-wrap .ichat-bubble::before{
  content:'';position:absolute;left:12px;top:-5px;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:5px solid rgba(255,255,255,.13)
}

#uh-infographic-wrap .ireplay-wrap{display:flex;justify-content:center;margin-top:18px}
#uh-infographic-wrap .ireplay-btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border:none;border-radius:100px;padding:9px 22px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .2s,transform .15s}
#uh-infographic-wrap .ireplay-btn:hover{background:var(--accent-deep);transform:translateY(-1px)}
#uh-infographic-wrap .ireplay-btn:disabled{cursor:default;transform:none}
#uh-infographic-wrap .ireplay-btn svg{width:13px;height:13px;fill:#fff}

/* Viewports under 1200px: vertical flow (read top → bottom) */
@media (max-width:1199px){
  #uh-infographic-wrap .uh-chain{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    padding:4px 0 12px;
  }
  #uh-infographic-wrap .uh-chain > .inode{
    width:100%;
    max-width:min(400px,100%);
  }
  #uh-infographic-wrap .inode{
    flex:none;
    transform:translateY(16px);
  }
  #uh-infographic-wrap .inode.inode-orch{flex:none}
  #uh-infographic-wrap .inode.ivisible{transform:translateY(0)}
  #uh-infographic-wrap .inode:hover{transform:translateY(-3px)}
  #uh-infographic-wrap .inode.ivisible.ipulse{animation:uh-ipulse-v .55s ease}
  @keyframes uh-ipulse-v{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-3px) scale(1.02)}100%{transform:translateY(0) scale(1)}}

  #uh-infographic-wrap .iconn-h{
    flex:none;
    width:100%;
    max-width:120px;
    min-height:52px;
    padding:6px 0;
  }
  #uh-infographic-wrap .iconn-line-h{
    width:2px;height:28px;margin:0 auto 6px;
  }
  #uh-infographic-wrap .iconn-tag-wrap{margin-bottom:4px}
  #uh-infographic-wrap .iconn-arrow-h{
    border-top:8px solid var(--border);
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:none;
  }
  #uh-infographic-wrap .ipacket{
    left:50%;top:0;margin-left:-4px;margin-top:-4px;
    animation:none;
  }
  #uh-infographic-wrap .ipacket.ianim{animation:uh-itravel-v .65s ease forwards}
  @keyframes uh-itravel-v{
    0%{opacity:0;top:-6px}
    12%{opacity:1}
    88%{opacity:1}
    100%{opacity:0;top:calc(100% + 4px)}
  }

  #uh-infographic-wrap .isub-steps{grid-template-columns:1fr}
  #uh-infographic-wrap .isub-step{transform:translateY(6px)}
  #uh-infographic-wrap .isub-step.ivisible{transform:translateY(0)}
}

@media (max-width:640px){
  #uh-infographic-wrap{padding-left:clamp(8px,3vw,16px);padding-right:clamp(8px,3vw,16px)}
  #uh-infographic-wrap .inode{padding:10px 12px}
  #uh-infographic-wrap .inode-title{font-size:11.5px}
  #uh-infographic-wrap .inode-desc{font-size:10px;padding-left:36px}
  #uh-infographic-wrap .isub-steps{gap:4px}
  #uh-infographic-wrap .istep-text{font-size:9px}
}