/* The landing page (index.html). Loads after styles.css and uses its tokens, nav, buttons and footer.
   Two surfaces alternate: paper (hero, settlement) and ink (Keki, closing band). The doodles are SVG paths drawn
   by doodle.js; their shared rules (stroke caps, the hand font) sit in styles.css under "Doodles". */

.lp{font-size:16px;line-height:1.5}
.lp-rel{position:relative}
.lp-paper{position:relative;overflow:hidden;background:var(--paper);color:var(--ink)}
.lp-ink{position:relative;overflow:hidden;background:var(--bg);color:var(--text)}
.lp-paper :focus-visible{outline-color:var(--ink)}

/* the site's paper grain, and a softer paper fibre for the hero */
.lp-grain::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain-d) 0 0/180px 180px}
.lp-fibre::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.35;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86  0 0 0 0 .80  0 0 0 0 .77  0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") 0 0/420px 420px}
/* dot grid, faded out toward the middle so it never sits behind copy */
.lp-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(17,19,21,.16) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 30%,#000 88%);mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 30%,#000 88%)}
.lp-dots-light{background-image:radial-gradient(rgba(242,243,245,.11) 1px,transparent 1.3px)}

/* type */
.lp-h2{font-size:clamp(32px,3.6vw,44px);line-height:1.09;letter-spacing:-.035em;font-weight:600}
.lp-lede{font-size:18px;line-height:1.55;color:var(--text-2)}
.lp-mark{position:relative;display:inline-block;white-space:nowrap}
.lp-under{position:absolute;left:-1%;width:102%;bottom:-.15em;height:.26em;overflow:visible;pointer-events:none}
.lp-under-sm{bottom:-.14em}

/* buttons: the site's .btn, plus an outline that takes its color from the surface */
.lp-ctas{display:flex;flex-wrap:wrap;gap:12px}
.lp .btn{font-weight:500}
.lp-outline{border-color:color-mix(in srgb,currentColor 22%,transparent);color:inherit}
.lp-outline:hover{background:color-mix(in srgb,currentColor 5%,transparent)}

/* doodles that show from a breakpoint up */
.lp-md,.lp-xl,.lp-md-sm{display:none}

/* ---------- hero ---------- */
.lp-hero{min-height:calc(100vh - var(--nav));display:flex;flex-direction:column;align-items:center;padding:clamp(72px,9vh,112px) 30px 0}
.lp-hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1240px;text-align:center}
.lp-hero h1{max-width:13em;font-size:clamp(42px,5.4vw,78px);line-height:1.04;letter-spacing:-.04em;font-weight:600}
.lp-sub{margin-top:28px;max-width:30em;color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);line-height:1.5}
.lp-circled{margin-top:8px}
.lp-circled svg{position:absolute;left:-8%;top:-38%;width:116%;height:176%;overflow:visible;pointer-events:none}
.lp-hero-ctas{margin-top:44px;align-items:center;justify-content:center}
.lp-free{position:relative;display:inline-flex}
.lp-free svg{position:absolute;left:-112px;top:-58px;width:120px;height:100px;overflow:visible;pointer-events:none}

.lp-shot{position:relative;margin-top:176px;width:100%;max-width:1040px;aspect-ratio:1400/560}
.lp-shot-frame{position:absolute;inset:0;overflow:hidden;border-radius:12px 12px 0 0;background:#0E0F13;border:1px solid rgba(17,19,21,.4);border-bottom:0;box-shadow:0 1px 0 rgba(22,25,28,.5),0 28px 60px -28px rgba(22,25,28,.55)}
.lp-shot-frame img{display:block;width:100%;height:auto;user-select:none}
.lp-shot-keki{position:absolute;right:5%;top:-64px;z-index:2;width:116px;height:116px;pointer-events:none}
.lp-crown{position:absolute;right:calc(5% + 20px);top:-112px;width:76px;height:54px;overflow:visible;pointer-events:none}
.lp-cloud{position:absolute;right:calc(5% + 116px);top:-108px;width:160px;height:80px;overflow:visible;pointer-events:none}
.lp-emoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.lp-manage{position:absolute;left:-196px;top:2%;z-index:2;width:220px;height:150px;overflow:visible;pointer-events:none}
.lp-answer{position:absolute;left:86.8%;top:30%;width:12%;height:22%;overflow:visible;pointer-events:none}

/* the hero comes in once (app.js adds .is-in). If the script never runs, the fallback shows it after 3s. */
.js .lp-in{opacity:0;transform:translateY(var(--y,18px));animation:lp-show 0s 3s forwards}
.js .lp-hero.is-in .lp-in{opacity:1;transform:none;transition:opacity 1100ms cubic-bezier(.2,.7,.2,1) var(--delay,0ms),transform 1100ms cubic-bezier(.2,.7,.2,1) var(--delay,0ms)}
@keyframes lp-show{to{opacity:1;transform:none}}

/* ---------- Meet Keki ---------- */
#keki{padding:120px 0 128px}
.lp-keki{display:grid;align-items:center;gap:64px}
.lp-tag{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;font:400 14px/1.5 var(--mono);color:var(--text)}
.lp-tag svg{position:absolute;left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:visible;pointer-events:none}
.lp-tag-paper{color:var(--ink)}
.lp-keki .lp-h2{margin-top:24px}
.lp-keki .lp-lede{margin-top:20px;max-width:30em}
.lp-note{margin-top:16px;max-width:34em;font-size:15px;line-height:1.625;color:var(--text-2)}
.lp-keki .lp-ctas{margin-top:32px}
.lp-req{margin-top:12px;font-size:13px;color:var(--text-3)}
.lp-keki-media{position:relative;width:100%;max-width:560px;margin-top:64px}
.lp-fill-frame{position:absolute;left:-10px;top:-10px;width:calc(100% + 20px);height:calc(100% + 20px);overflow:visible;pointer-events:none}
.lp-keki-live{position:relative;width:100%;overflow:hidden;aspect-ratio:700/664;border-radius:10px;background:#0E0F13}
.lp-keki-live iframe{position:absolute;left:0;top:0;width:700px;height:664px;border:0;transform-origin:0 0;pointer-events:none;color-scheme:dark}
.lp-thats{position:absolute;right:4%;top:-112px;z-index:2;width:170px;height:244px;overflow:visible;pointer-events:none}

/* doodle cards: the border is a boiling path; hover re-inks it and tilts the card like a lifted sticker */
.lp-cards{display:grid;gap:20px}
.lp-features{margin-top:96px}
.lp-card{position:relative;padding:22px 20px 26px;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.lp-card:hover{transform:translateY(-4px) rotate(-.7deg)}
.lp-card-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lp-ink-line{transition:stroke-width .2s}
.lp-card:hover .lp-ink-line{stroke-width:3.6}
.lp-card h3{position:relative;margin-top:20px;font-size:16px;font-weight:600}
.lp-card h3+p{position:relative;margin-top:6px;font-size:14.5px;line-height:1.625;color:var(--text-2)}

/* the mini product tiles: slow loops that mirror the app's own states */
.lp-tile-wrap{position:relative;margin-top:10px}
.lp-tile{position:relative;height:96px;padding:12px 14px;overflow:hidden;border-radius:8px;background:#0E1115;border:1px solid rgba(255,255,255,.1);font-size:11.5px;line-height:1.5;color:var(--text-2);user-select:none}
.lp-ico-bg{position:absolute;right:-12px;top:-22px;width:46px;height:46px;border-radius:50%;background:var(--bg);pointer-events:none}
.lp-ico{position:absolute;right:-11px;top:-21px;width:44px;height:44px;overflow:visible;pointer-events:none}
.lp-row{display:flex;align-items:center;gap:8px;height:22px}
.lp-hi{color:var(--text)}
.lp-r{margin-left:auto}
.lp-ok{color:var(--ok)}
.lp-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.lp-dot-attn{background:var(--attn)}
.lp-dot-ok{background:var(--ok)}
.lp-tag .lp-dot{width:7px;height:7px}
.lp-between{display:flex;justify-content:space-between;align-items:center}
.lp-full{height:100%}
.lp-swap{position:relative;width:70px;height:14px;text-align:right}
.lp-swap span{position:absolute;inset:0}
.lp-bar{margin-top:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.lp-bar i{display:block;height:100%;background:var(--ok)}
.lp-check{display:flex;align-items:center;gap:8px;margin-top:12px}
.lp-check-ico{position:relative;width:14px;height:14px}
.lp-check-ico i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--text-2);border-top-color:transparent}
.lp-check-ico b{position:absolute;inset:0;font-weight:500;line-height:14px}
.lp-agent{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--raised-2);border:1px solid rgba(255,255,255,.12)}
.lp-agent img{display:block}
.lp-dash{flex:1;margin:0 8px;border-top:1px dashed rgba(255,255,255,.18)}
.lp-doc{position:absolute;top:50%;left:56px;width:20px;height:22px;margin-top:-11px;border-radius:4px;background:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.lp-doc i{position:absolute;left:5px;height:2px;background:var(--bg);opacity:.5}
.lp-doc i:nth-child(1){top:6px;right:5px}
.lp-doc i:nth-child(2){top:11px;right:7px}
.lp-doc i:nth-child(3){top:16px;right:9px}
.lp-points{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.lp-points-n{font:400 22px/1 var(--mono);letter-spacing:-.02em;color:var(--text)}
.lp-points .lp-ok{font-weight:500}
.lp-points-meta{display:flex;gap:6px;margin-top:6px}

@keyframes v-rowin{0%,100%{opacity:0;transform:translateX(-6px)}12%,84%{opacity:1;transform:none}}
@keyframes v-fill{0%,8%{width:0}44%,100%{width:100%}}
@keyframes v-fadeA{0%,42%{opacity:1}52%,90%{opacity:0}100%{opacity:1}}
@keyframes v-fadeB{0%,42%{opacity:0}52%,90%{opacity:1}100%{opacity:0}}
@keyframes v-ring{to{transform:rotate(360deg)}}
@keyframes v-handoff{0%,10%{left:56px}45%,55%{left:calc(100% - 76px)}90%,100%{left:56px}}
.v-rowin{animation:v-rowin 5.2s cubic-bezier(.4,0,.2,1) infinite}
.v-fill{animation:v-fill 5.2s cubic-bezier(.4,0,.2,1) infinite}
.v-fadeA{animation:v-fadeA 5.2s ease-in-out infinite}
.v-fadeB{animation:v-fadeB 5.2s ease-in-out infinite}
.v-ring{animation:v-ring .9s linear infinite}
.v-handoff{animation:v-handoff 5.2s cubic-bezier(.65,0,.35,1) infinite}

.lp-rule{position:relative;margin-top:96px;height:12px}
.lp-rule svg{position:absolute;left:0;top:0;width:100%;height:12px;overflow:visible;pointer-events:none}

/* ---------- how settlement works ---------- */
#settlement{padding:120px 0 128px}
.lp-flag{display:flex;align-items:center;gap:16px}
.lp-barrier{flex:none;width:96px;height:56px;overflow:visible}
.lp-h2-settle{margin-top:24px;max-width:14em}
.lp-route{display:none;width:100%;height:auto;margin-top:48px;overflow:visible}
.lp-steps{margin-top:48px}
.lp-step{padding:28px 24px 30px;min-height:210px}
.lp-step-n{position:relative;font-size:22px;line-height:1;color:var(--ink)}
.lp-step h3{margin-top:8px;font-size:19px;line-height:1.25;letter-spacing:-.02em}
.lp-step h3+p{margin-top:12px;font-size:15px;color:var(--ink-2)}
.lp-docs{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:56px}
.lp-docs .btn{font-weight:550}
.lp-spec{position:absolute;left:calc(50% - 300px);top:-30px;width:220px;height:70px;overflow:visible;pointer-events:none}

/* the route draws itself once (app.js adds .is-drawn); each stroke's duration and delay sit on the element */
.lp-draw .dr{stroke-dasharray:1;stroke-dashoffset:0}
.lp-coin{offset-path:path('M184 116 C 260 70, 360 70, 420 96 S 440 122, 440 134');offset-rotate:0deg;offset-distance:100%}
.js .lp-draw:not(.is-drawn) .dr{stroke-dashoffset:1}
.js .lp-draw:not(.is-drawn) .dl{opacity:0}
.js .lp-draw:not(.is-drawn) .lp-coin{offset-distance:0%}
.lp-draw.is-drawn .dr{transition-property:stroke-dashoffset;transition-timing-function:ease-in-out}
.lp-draw.is-drawn .dr.lp-ease-out{transition-timing-function:ease-out}
.lp-draw.is-drawn .dl{transition:opacity 500ms}
.lp-draw.is-drawn .lp-coin{transition:offset-distance 1100ms cubic-bezier(.5,0,.6,1) 1900ms}

/* ---------- closing band ---------- */
.lp-close{padding:120px 0 96px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);text-align:center}
.lp-close .lp-lede{max-width:32em;margin:16px auto 0}
.lp-close .lp-ctas{justify-content:center;margin-top:32px}

/* ---------- breakpoints (the design's 640 / 768 / 1024 / 1280) ---------- */
@media (min-width:640px){
  .lp-nowrap-sm{white-space:nowrap}
  .lp-md-sm{display:block}
  .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .lp-md{display:block}
}
@media (min-width:1024px){
  .lp-keki{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px}
  .lp-keki-media{justify-self:end}
  .lp-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp-route{display:block}
  .lp-steps{margin-top:32px}
}
@media (min-width:1280px){
  .lp-xl{display:block}
}
@media (max-width:560px){
  .lp-hero{padding-left:16px;padding-right:16px}
  #keki,#settlement{padding:96px 0}
  .lp-close{padding-top:96px}
}

@media (prefers-reduced-motion:reduce){
  .js .lp-in{opacity:1;transform:none;animation:none;transition:none}
  .lp-draw .dr,.lp-draw .dl,.lp-coin{transition:none!important}
  .v-rowin,.v-fill,.v-fadeA,.v-fadeB,.v-ring,.v-handoff{animation:none}
  .v-fadeA{opacity:0}
  .lp-card:hover{transform:none}
}