/* olifant.io. Layout only: every colour is a
   token from tokens.css (generated from the design's token files). Dark follows the OS (no scripts on this site). */
@font-face{font-family:Inter;src:url(inter-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(jbmono-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--ol-sans);color:var(--ol-ink);background:var(--ol-paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--ol-focus);border-radius:var(--ol-r-sm)}
.wrap{max-width:var(--ol-site-max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--ol-paper);padding:8px 12px;z-index:9}
.u{text-decoration:underline;text-underline-offset:2px}

/* nav */
.top{display:flex;align-items:center;justify-content:space-between;height:64px;border-bottom:1px solid var(--ol-line);gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px}.mark{width:26px;height:26px;flex:none}
.top ul{display:none;gap:28px;list-style:none;margin:0;padding:0;color:var(--ol-ink-2);font-size:15px}
.top ul a:hover{color:var(--ol-ink)}
.top .cta .btn.p{display:none}
.menu{position:relative}
.menu summary{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--ol-line);border-radius:var(--ol-r);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round}
.menu .drop{position:absolute;right:0;top:50px;z-index:5;min-width:220px;background:var(--ol-paper);border:1px solid var(--ol-line);border-radius:var(--ol-r);box-shadow:var(--ol-shadow-pop);padding:6px;display:grid}
.menu .drop a{padding:10px 12px;border-radius:8px;font-size:15px}.menu .drop a:hover{background:var(--ol-box)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:0 18px;height:42px;border-radius:var(--ol-r);font-weight:500;font-size:15px;border:1px solid var(--ol-line);background:var(--ol-paper);color:var(--ol-ink);white-space:nowrap;transition:background var(--ol-motion)}
.btn:hover{background:var(--ol-box)}
.btn.p{background:var(--ol-accent);color:var(--ol-accent-ink);border-color:transparent}.btn.p:hover{background:var(--ol-accent-hover)}
.cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* hero */
.hero{padding:48px 0 32px}.hero .cols{display:grid;gap:28px}
.hero h1{font-size:var(--ol-t-3xl);line-height:1.08;letter-spacing:var(--ol-track-display);font-weight:600;margin:0 0 18px;max-width:17ch}
.hero p{font-size:clamp(17px,2vw,20px);color:var(--ol-ink-2);max-width:52ch;margin:0 0 26px}
.micro{font-size:var(--ol-t-sm);color:var(--ol-muted);margin-top:12px}
.facts{display:grid;gap:10px;align-content:start;margin:0;padding:0;list-style:none}
.facts li{background:var(--ol-box);border-radius:var(--ol-r);padding:14px 16px;font-size:14.5px}
.facts b,.trust b{display:block;font-weight:600;margin-bottom:2px}.facts span{color:var(--ol-ink-2)}

/* the app in its frame (an illustration) */
.frame{margin:40px 0 0;background:var(--ol-well);border:1px solid var(--ol-line);border-radius:var(--ol-r-lg);padding:10px;overflow:hidden;font-size:14px}
.frame .bar{display:flex;align-items:center;gap:14px;padding:6px 4px 12px}.frame .bar b{display:flex;align-items:center;gap:8px;font-weight:600}.frame .bar .mark{width:20px;height:20px}
.frame .bar .s{flex:1;max-width:360px;background:var(--ol-paper);border:1px solid var(--ol-line);border-radius:8px;padding:6px 12px;color:var(--ol-muted);font-size:13px}
.frame .av{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--ol-box-2);display:grid;place-items:center;font-size:11px;font-weight:600}
.frame .body{display:grid;grid-template-columns:1fr}
.frame aside{display:none;padding:12px;color:var(--ol-ink-2);font-size:13.5px;line-height:2}
.frame aside b{color:var(--ol-ink);background:var(--ol-paper);display:block;padding:0 8px;border-radius:6px;box-shadow:0 0 0 1px var(--ol-line-chrome);font-weight:500}
.frame aside div{padding:0 8px}.frame aside .lab{margin-top:8px;color:var(--ol-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.frame .sheet{background:var(--ol-paper);padding:12px 14px 4px;border-radius:10px}
.frame .sheet h3{margin:0;font-size:15px;font-weight:600}.frame .sheet small{display:block;color:var(--ol-muted);margin-bottom:8px}
.frame .list{border:1px solid var(--ol-line);border-radius:10px;overflow:hidden;margin-bottom:10px}
.row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--ol-line)}.row:first-child{border-top:0}
.row .ic{width:22px;height:22px;border-radius:6px;background:var(--ol-box);display:grid;place-items:center;color:var(--ol-ink-2)}
.row .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linejoin:round}.row .ic.f{background:var(--ol-box-2)}
.row em{font-style:normal;color:var(--ol-muted);font-size:12.5px;display:block}.row b{font-weight:500}.row .d{color:var(--ol-muted);font-size:12.5px;text-align:right}
.ai{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ol-second);vertical-align:1px;margin-right:4px}
.ain{color:var(--ol-second);font-weight:500}

/* phone: the four facts as boxes under the frame */
.trust{display:grid;gap:14px;margin:36px 0 0;padding:0;list-style:none}.trust li{background:var(--ol-box);border-radius:var(--ol-r);padding:18px}.trust span{color:var(--ol-ink-2);font-size:14.5px}

/* sections */
.sec{padding:56px 0 8px}
.sec h2{font-size:clamp(26px,3.2vw,36px);line-height:1.15;letter-spacing:var(--ol-track-display);font-weight:600;margin:0 0 10px;max-width:22ch}
.sec .lede{font-size:17px;color:var(--ol-ink-2);max-width:56ch;margin:0 0 24px}
.steps{display:grid;gap:14px;margin:0;padding:0;list-style:none}.steps li{background:var(--ol-box);border-radius:var(--ol-r);padding:20px}
.steps h3{font-weight:600;margin:0 0 6px;font-size:16px}.steps p{margin:0 0 12px;color:var(--ol-ink-2);font-size:14.5px}
.steps .mini{background:var(--ol-paper);border:1px solid var(--ol-line);border-radius:8px;padding:10px 12px;font-size:13px;overflow-wrap:anywhere}
.steps .mini code{font-family:var(--ol-mono);font-size:12.5px}
.chat{background:var(--ol-box);border-radius:var(--ol-r);padding:20px;display:grid;gap:12px;max-width:720px}
.chat .m{max-width:560px;font-size:14.5px;line-height:1.5}
.chat .who{display:block;font-size:12.5px;color:var(--ol-muted);font-weight:500;margin-bottom:2px}
.chat .m.me{justify-self:end;background:var(--ol-paper);border:1px solid var(--ol-line);border-radius:12px 12px 2px 12px;padding:10px 14px}
.chat .m.a{padding:0 2px}.chat .m.a .who{color:var(--ol-second)}
.chat .tool{font:12.5px/1.5 var(--ol-mono);color:var(--ol-muted);background:var(--ol-paper);border:1px solid var(--ol-line);border-radius:8px;padding:8px 10px;margin:6px 0;overflow-wrap:anywhere}
.price{margin:56px 0 8px;display:grid;gap:14px}
.price .card{border:1px solid var(--ol-line);border-radius:var(--ol-r-lg);padding:24px}
.price .k{color:var(--ol-muted);font-size:14px}
.price .big{font-size:40px;font-weight:600;letter-spacing:var(--ol-track-display);margin:0}.price .big small{font-size:16px;color:var(--ol-muted);font-weight:400}
.price p{color:var(--ol-ink-2);margin:6px 0 16px}.price .card b{display:block}.price .card.t p{margin:6px 0 0}
.faq{display:grid;gap:8px;max-width:720px}
.faq details{border:1px solid var(--ol-line);border-radius:var(--ol-r);padding:0 16px}
.faq summary{padding:14px 0;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--ol-muted)}.faq details[open] summary:after{content:"–"}
.faq p{margin:0 0 14px;color:var(--ol-ink-2);font-size:14.5px}

/* footer */
footer{border-top:1px solid var(--ol-line);margin-top:56px;padding:28px 0;color:var(--ol-muted);font-size:var(--ol-t-sm);display:grid;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}footer nav a,footer .u{text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--ol-ink)}

/* the security page */
.doc{max-width:720px}
.doc h1{font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:var(--ol-track-display);font-weight:600;margin:48px 0 10px}
.doc .lede{font-size:18px;color:var(--ol-ink-2);margin:0 0 28px}
.doc h2{font-size:var(--ol-t-xl);letter-spacing:-.01em;margin:36px 0 10px;font-weight:600}
.doc p{font-size:16px;color:var(--ol-ink-2);line-height:1.6}
.doc dl{margin:0}.doc .fact{display:grid;grid-template-columns:1fr;gap:4px 16px;border-top:1px solid var(--ol-line);padding:14px 0}
.doc dt{font-weight:600;color:var(--ol-ink)}.doc dd{margin:0;color:var(--ol-ink-2);font-size:15px}
.doc .not{background:var(--ol-box);border-radius:var(--ol-r);padding:16px 18px;margin:16px 0;color:var(--ol-ink-2)}.doc .not b{display:block;margin-bottom:6px;color:var(--ol-ink)}
.doc .stamp{font-size:var(--ol-t-sm);color:var(--ol-muted)}

@media(min-width:600px){
  .top ul{display:flex}.menu{display:none}.top .cta .btn.p{display:inline-flex}
  .frame{margin:48px 0 0}.frame .body{grid-template-columns:200px 1fr}.frame aside{display:block}.frame .sheet{border:1px solid var(--ol-line)}
  .trust{display:none}.price{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}.doc .fact{grid-template-columns:200px 1fr}
}
@media(min-width:960px){.hero .cols{grid-template-columns:1.25fr 1fr;align-items:center}.facts{grid-template-columns:1fr 1fr}}
@media(max-width:959px){.facts{display:none}}
@media(max-width:380px){.top .cta .btn{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}