/* Yelto home page: the sections below the top bar. Same layout and motion system as relaycall.co, in the
   dashboard's look (styles.css has the tokens, top bar, buttons and footer). Landing-only tokens are prefixed --lp. */
:root {
  --lp-h1:clamp(38px,5vw,64px); --lp-h2:clamp(30px,3.6vw,46px); --lp-h3:clamp(26px,2.4vw,34px);
  --lp-hero-art:#eef0f4; --lp-bezel:#1d1f24;
  --spring:cubic-bezier(.38,1.21,.22,1); --spring-fx:cubic-bezier(.34,.8,.34,1);
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --lp-hero-art:#16181c; } }
:root[data-theme="dark"] { --lp-hero-art:#16181c; }
body { display:block; }

/* hero: words left, a live call card stack right */
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding-block:72px 96px; }
h1 { font-size:var(--lp-h1); line-height:1.12; letter-spacing:-.035em; font-weight:700; margin:0; }
.ln { display:block; overflow:hidden; padding-block-end:.1em; }
.ln > span { display:inline-block; transform:translateY(105%); transition:transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--d,0) * 120ms); }
.go .ln > span { transform:none; }
/* a red marker sweeps across the key word */
.mark { position:relative; display:inline-block; z-index:0; margin-inline:.08em; }
.mark::after { content:""; position:absolute; inset:-.02em -.14em; width:0; background:var(--acc); border-radius:.3em; z-index:-1; transform:rotate(-1.3deg); transition:width 1s cubic-bezier(.6,0,.3,1); }
.mark::before { content:attr(data-t); position:absolute; inset:0; color:var(--on-acc); clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.6,0,.3,1); }
.mark.sel::after { width:calc(100% + .28em); } .mark.sel::before { clip-path:inset(0 0 0 0); }
.lead { font-size:clamp(17px,1.4vw,20px); line-height:1.65; color:var(--ink-2); margin:28px 0 0; max-width:38ch; }
.ctas { display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }
.ctas .btn { min-width:200px; }
.ticks { display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:24px; font-size:14px; color:var(--ink-2); }
.ticks span { display:inline-flex; gap:7px; align-items:center; } .ticks svg { width:16px; height:16px; color:var(--ok); }
.fade { opacity:0; transform:translateY(14px); transition:opacity .7s, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--d,0) * 120ms); }
.go .fade { opacity:1; transform:none; }

.art { background:var(--lp-hero-art); border-radius:var(--r-card); aspect-ratio:1.08; position:relative; display:grid; place-items:center; overflow:hidden; }
.stack { width:min(80%,420px); display:flex; flex-direction:column; gap:14px; position:relative; }
.card { background:var(--surface); border-radius:var(--r-tile); box-shadow:var(--lp-card-shadow); padding:14px 16px; display:flex; gap:12px; align-items:center;
  font-weight:600; font-size:14.5px; opacity:0; transform:translateY(16px) scale(.97); transition:opacity .45s, transform .5s var(--spring); }
.card.on { opacity:1; transform:none; }
.card .ic { width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; background:var(--acc-soft); color:var(--acc-text); }
.card .ic svg { width:18px; height:18px; }
.card small { display:block; font-weight:400; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.card.prompt { align-items:flex-start; font-weight:500; line-height:1.5; }
.card.prompt .t::after { content:""; display:inline-block; width:2px; height:1.05em; background:var(--acc); vertical-align:-.15em; margin-inline-start:2px; animation:blink 1s steps(1) infinite; }
.card.done .ic { background:var(--ok-soft); color:var(--ok); }
.card.ask .ic { background:var(--warn-soft); color:var(--warn); }
.card.ask { box-shadow:var(--lp-card-shadow),0 0 0 2px var(--warn) inset; }
.card .ok { margin-inline-start:auto; font-size:12px; font-weight:600; color:var(--ok); opacity:0; transition:opacity .3s; }
.card.done .ok { opacity:1; }
.card.live .ok { color:var(--acc-text); }
@keyframes blink { 50% { opacity:0; } }
.badge { position:absolute; inset-inline-end:-30px; bottom:-48px; background:var(--ok); color:#fff; font-weight:600; font-size:14px; line-height:1.2; text-align:center;
  border-radius:var(--r-md); padding:9px 14px; transform:rotate(12deg) scale(0); transition:transform .6s cubic-bezier(.39,1.29,.35,.98); box-shadow:0 8px 18px -8px rgba(0,0,0,.35); }
.badge.on { transform:rotate(12deg) scale(1); }
:root[data-theme="dark"] .badge { color:#0c0d10; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .badge { color:#0c0d10; } }

/* marquee */
.marq { padding-block:8px 72px; }
.marq-in { display:flex; align-items:center; gap:40px; }
.marq-in > p { margin:0; flex:none; font-size:15.5px; color:var(--ink-2); max-width:17ch; line-height:1.4; }
.track { overflow:hidden; flex:1; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.belt { display:flex; gap:56px; width:max-content; animation:belt 38s linear infinite; }
.belt span { display:inline-flex; align-items:center; gap:10px; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink-3); white-space:nowrap; }
.belt svg { width:24px; height:24px; }
@keyframes belt { to { transform:translateX(-50%); } }

/* bold colour block with numbers */
.block { background:var(--lp-block); color:var(--lp-on-block); border-radius:var(--r-card); padding:64px clamp(24px,5vw,72px) 56px; }
.block .top { display:grid; grid-template-columns:1fr 1fr; gap:40px; text-align:center; padding-bottom:44px; border-bottom:1px solid var(--lp-block-line); }
.block .top h3 { font-size:clamp(22px,2vw,28px); font-weight:600; margin:20px 0 0; letter-spacing:-.02em; }
.block .top p { margin:8px auto 0; opacity:.88; font-size:15.5px; max-width:40ch; }
.seals { display:flex; justify-content:center; }
.seal { width:84px; height:84px; border-radius:50%; background:#fff; color:#1d1f24; display:grid; place-items:center; margin-inline:-6px; box-shadow:0 0 0 5px var(--lp-block); }
.seal svg { width:32px; height:32px; }
.seal.c2 { background:#1d1f24; color:#fff; } .seal.c3 { background:#17784b; color:#fff; }
.nums { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:40px; }
.nums b { display:block; font-size:clamp(34px,3vw,44px); font-weight:600; letter-spacing:-.03em; }
.nums span { display:block; margin-top:6px; font-size:15.5px; line-height:1.45; opacity:.9; max-width:22ch; }

/* section heads */
section.s { padding-block:128px 0; }
.head { text-align:center; max-width:880px; margin-inline:auto; }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
h2 { font-size:var(--lp-h2); line-height:1.15; letter-spacing:-.03em; font-weight:700; margin:12px 0 0; }
.head p { font-size:18px; line-height:1.65; color:var(--ink-2); margin:18px auto 0; max-width:56ch; }
.rv { opacity:0; transform:translateY(28px); transition:opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity:1; transform:none; }

/* zig-zag stages */
.stages { margin-top:96px; display:flex; flex-direction:column; gap:120px; }
.stage { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.stage.rev .copy { order:2; }
.tag { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--c); }
.tag i { width:28px; height:28px; border-radius:var(--r-sm); background:var(--c); color:var(--on-c); display:grid; place-items:center; }
.tag i svg { width:16px; height:16px; }
.stage h3 { font-size:var(--lp-h3); font-weight:700; letter-spacing:-.025em; line-height:1.2; margin:14px 0 0; }
.stage .intro { font-size:17px; line-height:1.65; color:var(--ink-2); margin:14px 0 0; max-width:46ch; }
.acc { margin-top:28px; }
.acc-item { border-bottom:1px solid var(--line); }
.acc-item button { width:100%; display:flex; align-items:center; gap:12px; background:none; border:0; padding:22px 0; cursor:pointer; text-align:start; font-size:19px; font-weight:600; letter-spacing:-.015em; }
.acc-item button .chev { margin-inline-start:auto; color:var(--ink-3); transition:transform .5s var(--spring); }
.acc-item.open button .chev { transform:rotate(180deg); }
.acc-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.acc-body > div { overflow:hidden; }
.acc-item.open .acc-body { grid-template-rows:1fr; }
.acc-body p { margin:0; padding-bottom:24px; font-size:15.5px; line-height:1.7; color:var(--ink-2); max-width:52ch; }
.acc-item .bar { height:2px; background:var(--c); width:0; margin-top:-1px; position:relative; }
.acc-item.open.auto .bar { animation:fill var(--hold,6s) linear forwards; }
@keyframes fill { to { width:100%; } }
.stage.ask { --c:var(--acc); --on-c:var(--on-acc); --c-soft:var(--acc-soft); }
.stage.call { --c:var(--blue); --on-c:#fff; --c-soft:var(--blue-soft); }
.stage.result { --c:var(--ok); --on-c:#fff; --c-soft:var(--ok-soft); }
:root[data-theme="dark"] .stage.call, :root[data-theme="dark"] .stage.result { --on-c:#0c0d10; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .stage.call, :root:not([data-theme="light"]) .stage.result { --on-c:#0c0d10; } }

/* coloured frame with one scene per accordion item: small pieces of the real screens */
.frame { background:var(--c); border-radius:var(--r-card); aspect-ratio:1/1.02; position:relative; overflow:hidden; container-type:inline-size; }
.scene { position:absolute; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.scene.on { opacity:1; visibility:visible; }
.pop { opacity:0; transform:translateY(12px) scale(.96); }
.scene.on .pop { animation:pop .5s var(--spring) forwards; animation-delay:calc(var(--d,0) * 450ms + 150ms); }
@keyframes pop { to { opacity:1; transform:none; } }
.ui { background:var(--surface); color:var(--ink); border-radius:var(--r-tile); box-shadow:0 30px 60px -30px rgba(0,0,0,.45); width:80%; font-size:max(12px,2.6cqw); }
.sp { padding:5cqw; display:flex; flex-direction:column; gap:2.6cqw; }
.sp .hd { display:flex; justify-content:space-between; align-items:center; gap:1em; font-weight:600; }
.chipx { font-size:.8em; font-weight:600; border-radius:var(--r-pill); padding:.35em .85em; background:var(--c-soft); color:var(--c); white-space:nowrap; }
.chips { display:flex; flex-wrap:wrap; gap:1.6cqw; }
.chips span { font-weight:500; font-size:.9em; padding:.45em .95em; border-radius:var(--r-pill); background:var(--panel); }
.chips span.sel { background:var(--c); color:var(--on-c); font-weight:600; }
.fld { background:var(--panel); border-radius:.8em; padding:.65em .9em; line-height:1.35; }
.fld small { display:block; font-size:.78em; color:var(--ink-3); }
.fld.dim { color:var(--ink-3); }
/* call bubbles: them on the left, the assistant on the right */
.bub { max-width:88%; border-radius:1.1em 1.1em 1.1em .3em; padding:.7em .95em; background:var(--panel); line-height:1.45; }
.bub small { display:block; margin-top:.3em; color:var(--ink-3); font-size:.82em; }
.bub.me { align-self:flex-end; border-radius:1.1em 1.1em .3em 1.1em; background:var(--c); color:var(--on-c); }
.bub.me small { color:inherit; opacity:.8; }
.st { display:flex; align-items:center; gap:.7em; color:var(--ink-2); }
.st i { width:1.5em; height:1.5em; border-radius:50%; display:grid; place-items:center; background:var(--ok-soft); color:var(--ok); flex:none; }
.st i svg { width:.9em; height:.9em; } .st.now { color:var(--ink); font-weight:600; } .st.now i { background:var(--c); color:var(--on-c); }
.res { display:flex; gap:.8em; align-items:center; background:var(--ok-soft); color:var(--ink); border-radius:.9em; padding:.8em 1em; }
.res svg { width:1.3em; height:1.3em; color:var(--ok); flex:none; }
.res b { color:var(--ok); }
.ask-box { background:var(--warn-soft); border-radius:.9em; padding:.9em 1em; line-height:1.4; box-shadow:inset 0 0 0 1.5px var(--warn); }
.ask-box b { display:block; color:var(--warn); font-size:.8em; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.25em; }
.ask-box .acts { display:flex; gap:.6em; margin-top:.7em; }
.ask-box .acts span { padding:.4em 1.1em; border-radius:var(--r-pill); font-weight:600; background:var(--surface); }
.ask-box .acts span.y { background:var(--ink); color:var(--bg); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:.55em 1.4em; align-items:baseline; }
.kv dt { color:var(--ink-3); } .kv dd { margin:0; font-weight:600; text-align:end; }
.rowl { display:flex; align-items:center; gap:.8em; padding:.55em 0; border-top:1px solid var(--line); }
.rowl:first-of-type { border-top:0; }
.rowl .nm { flex:1; min-width:0; } .rowl small { display:block; color:var(--ink-3); font-size:.82em; }
.pill { font-size:.78em; font-weight:600; border-radius:var(--r-pill); padding:.3em .8em; background:var(--panel); color:var(--ink-2); white-space:nowrap; }
.pill.ok { background:var(--ok-soft); color:var(--ok); } .pill.live { background:var(--acc-soft); color:var(--acc-text); } .pill.warn { background:var(--warn-soft); color:var(--warn); }
.meter { height:.6em; border-radius:var(--r-pill); background:var(--panel); overflow:hidden; }
.meter i { display:block; height:100%; width:var(--w,50%); background:var(--c); border-radius:inherit; }

/* use cases: tabs, each with a sample call */
.uctabs { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:40px; }
.uctabs button { border:0; background:var(--panel); color:var(--ink-2); font-weight:500; font-size:15px; padding:12px 20px; border-radius:var(--r-pill); cursor:pointer; display:inline-flex; gap:8px; align-items:center;
  transition:background .2s, color .2s; }
.uctabs button svg { width:18px; height:18px; }
.uctabs button[aria-selected="true"] { background:var(--lp-btn); color:var(--lp-on-btn); font-weight:600; }
.ucp { display:none; margin-top:48px; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.ucp.on { display:grid; animation:pop .6s var(--spring); }
.ucp h3 { font-size:var(--lp-h3); font-weight:700; letter-spacing:-.025em; line-height:1.2; margin:0; }
.ucp > div > p { font-size:17px; line-height:1.65; color:var(--ink-2); margin:14px 0 0; max-width:46ch; }
.eg { margin-top:26px; background:var(--panel); border-radius:var(--r-tile); padding:16px 18px; display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.55; }
.eg svg { width:20px; height:20px; color:var(--acc); margin-top:2px; }
.eg small { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.gets { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:10px; font-size:15.5px; color:var(--ink-2); }
.gets li { display:flex; gap:10px; align-items:flex-start; } .gets svg { width:18px; height:18px; color:var(--ok); margin-top:3px; }
.ucv { --c:var(--blue); --on-c:#fff; --c-soft:var(--blue-soft); background:var(--lp-hero-art); border-radius:var(--r-card); padding:clamp(20px,4vw,48px); container-type:inline-size; }
:root[data-theme="dark"] .ucv { --on-c:#0c0d10; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .ucv { --on-c:#0c0d10; } }
.ucv .ui { width:100%; box-shadow:var(--lp-card-shadow); font-size:max(12px,2.3cqw); }
.ucv .sp { padding:4cqw; gap:2cqw; }
.ucfine { text-align:center; margin:28px 0 0; font-size:13.5px; color:var(--ink-3); }

/* two ways to use it */
.ways { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px; }
.way { border-radius:var(--r-card); padding:44px 36px 36px; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--panel); }
.way .up { font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.way h3 { font-size:clamp(24px,2.2vw,30px); font-weight:700; letter-spacing:-.025em; margin:10px 0 0; line-height:1.25; }
.way p { color:var(--ink-2); font-size:16px; line-height:1.65; margin:12px 0 0; max-width:40ch; }
.way .pic { width:100%; margin:32px 0 36px; display:flex; justify-content:center; }
.way .btn { width:100%; margin-top:auto; }
.way.red { background:var(--lp-block); color:var(--lp-on-block); background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.6px); background-size:22px 22px; }
.way.red .up, .way.red p { color:rgba(255,255,255,.88); }
.mini { --c:var(--blue); --on-c:#fff; background:var(--surface); color:var(--ink); border-radius:var(--r-tile); box-shadow:var(--lp-card-shadow); padding:16px; width:min(360px,100%); display:flex; flex-direction:column; gap:10px; text-align:start; font-size:14px; }
.mini .st i { width:22px; height:22px; } .mini .st i svg { width:12px; height:12px; }
:root[data-theme="dark"] .mini { --on-c:#0c0d10; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .mini { --on-c:#0c0d10; } }

/* team and control */
.langs { list-style:none; padding:0; margin:40px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:860px; }
.langs li { font-weight:500; font-size:15.5px; padding:12px 20px; border-radius:var(--r-pill); background:var(--panel); }
.langs li.more { background:var(--acc-soft); color:var(--acc-text); font-weight:600; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:72px; border-top:1px solid var(--line); padding-top:44px; text-align:start; }
.facts b { display:block; font-size:clamp(38px,4vw,54px); font-weight:700; letter-spacing:-.04em; color:var(--acc-text); }
.facts span { display:block; margin-top:4px; font-size:16px; color:var(--ink-2); line-height:1.5; max-width:26ch; }

/* faq */
.faqgrid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; }
.faqgrid .acc { margin-top:0; --c:var(--acc); }
.faqgrid .acc-item button { font-size:18px; }
.faqgrid .acc-body a { color:var(--acc-text); font-weight:600; }

/* closing call to action, inside the footer */
.foot { margin-top:128px; padding-top:80px; }
.foot .cta { text-align:center; padding-bottom:64px; border-bottom:1px solid var(--lp-block-line); margin-bottom:56px; }
.foot .cta .icon { width:84px; height:84px; border-radius:22px; margin:0 auto 24px; box-shadow:0 14px 30px -12px rgba(0,0,0,.4); }
.foot .cta h2 { color:#fff; } .foot .cta p { font-size:18px; opacity:.9; margin:14px 0 32px; }
.foot .cta .soon { display:block; margin-top:16px; font-size:13.5px; opacity:.8; }

@media (max-width:980px) {
  .hero { grid-template-columns:1fr; padding-block:40px 64px; gap:40px; }
  .marq-in { flex-direction:column; align-items:flex-start; gap:18px; } .track { width:100%; }
  .block .top { grid-template-columns:1fr; } .nums { grid-template-columns:1fr 1fr; }
  .stage, .faqgrid, .ucp { grid-template-columns:1fr; gap:32px; }
  .stage.rev .copy { order:0; }
  .stages { gap:88px; margin-top:64px; } section.s { padding-block-start:96px; }
  .ways, .facts { grid-template-columns:1fr; }
  .badge { inset-inline-end:-10px; }
  .art { aspect-ratio:auto; padding:40px 20px 72px; } .stack { width:100%; max-width:440px; }
}
@media (max-width:560px) {
  .ctas .btn { width:100%; }
  .block { padding-block:44px; } .seal { width:64px; height:64px; } .seal svg { width:26px; height:26px; }
  .acc-item button { font-size:17px; }
}
/* ?still freezes a representative frame for screenshots */
.still .ln > span, .still .fade, .still .rv, .still .card, .still .pop { transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
.still .belt { animation:none !important; }
.still .mark::after { width:calc(100% + .28em); transition:none; } .still .mark::before { clip-path:inset(0); transition:none; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .ln > span, .fade, .rv, .card, .pop { opacity:1 !important; transform:none !important; }
  .mark::after { width:calc(100% + .28em); } .mark::before { clip-path:inset(0); } .badge { transform:rotate(12deg); }
}