/* Adapted from unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */
:root{color-scheme:light;--paper:#faf8f3;--ink:#302c27;--secondary:#635c52;--line:#dedbd3;--accent:#48634b}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 system-ui,sans-serif}
a{color:var(--accent);text-underline-offset:4px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
header,main,footer{max-width:1040px;margin:auto;padding-inline:24px}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding-block:8px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:20px;font-weight:600;text-decoration:none}
.brand img{width:32px;height:32px;object-fit:contain}
nav{display:flex;gap:24px;font-size:14px}
nav a{text-decoration:none}
nav a:hover{text-decoration:underline}
h1,h2,h3,p,figure{margin:0}
h1{max-width:600px;font-size:40px;font-weight:500;line-height:1.16;letter-spacing:-.025em}
h2{font-size:24px;font-weight:500;line-height:1.3;margin-bottom:24px}
h3{font-size:16px;font-weight:500;line-height:1.4;margin-bottom:8px}
section{padding-block:40px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:center;padding-block:32px}
.intro{max-width:464px;margin:16px 0 24px;font-size:16px;color:var(--secondary)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:8px 16px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font-size:14px;font-weight:500;text-decoration:none}
.button:hover{background:#354c38}
.availability,.caption{margin-top:12px;font-size:12px;color:var(--secondary)}
.hero-preview{justify-self:center}
.preview-image{width:240px;background:url('/loading-logo.svg') center/64px 52px no-repeat}
.hero-preview img{display:block;width:240px;height:320px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:8px}
#kenalan,.walkthrough,.backup,.faq,.contact{border-top:1px solid var(--line)}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.features article{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-content:start}.feature-art{grid-row:1 / 3;width:56px;height:56px;object-fit:contain}.features p{grid-column:2}
.features p,.screens p{font-size:14px;color:var(--secondary)}
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.screen-frame{height:280px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:url('/loading-logo.svg') center/64px 52px no-repeat}
.screen-frame img{display:block;width:100%;height:auto}
.screens figcaption{padding-top:16px}
.backup{display:grid;grid-template-columns:1fr 2fr;gap:48px}
.backup p{color:var(--secondary);margin-bottom:12px}
.backup a{font-size:14px}
.faq{display:grid;grid-template-columns:1fr 2fr;column-gap:48px}
.faq h2{grid-row:1 / 7}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
summary{cursor:pointer;padding-block:16px;font-size:14px;font-weight:500}
.faq details p{padding-bottom:16px;font-size:14px;color:var(--secondary)}
.contact{display:flex;align-items:center;justify-content:space-between;gap:24px}
.contact h2{margin-bottom:8px}
.contact p{font-size:14px;color:var(--secondary)}
.contact p+a{display:inline-block;margin-top:8px;font-size:14px}
.contact .button{flex-shrink:0}
footer{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:24px;border-top:1px solid var(--line);font-size:12px}
footer .brand{font-size:16px}
footer .brand img{width:24px;height:24px}
.footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;width:100%;padding-top:16px;border-top:1px solid var(--line);color:var(--secondary)}
footer span{margin-right:auto;color:var(--secondary)}
@media(max-width:800px){.hero{gap:24px;grid-template-columns:minmax(0,1fr) 240px}h1{font-size:32px}.features,.screens{gap:20px}.backup,.faq{grid-template-columns:1fr 2fr;gap:24px}}
@media(max-width:600px){header,main,footer{padding-inline:20px}header{flex-wrap:wrap;padding-block:8px;gap:4px}nav{width:100%;justify-content:space-between;gap:12px}nav a{display:inline-flex;align-items:center;min-height:44px}section{padding-block:28px}h1{font-size:32px}h2{font-size:22px;margin-bottom:20px}.hero{grid-template-columns:1fr;padding-block:24px;gap:24px}.intro{margin-bottom:20px}.hero-preview{width:100%}.preview-image{width:100%}.hero-preview img{width:100%;height:240px}.features{grid-template-columns:1fr;gap:20px}.features h3{margin-bottom:4px}.screens{grid-template-columns:1fr;gap:24px}.screens figure{display:grid;grid-template-columns:144px minmax(0,1fr);gap:16px;align-items:start}.screen-frame{height:192px}.screens figcaption{padding-top:0}.backup,.faq{display:block}.faq h2{margin-bottom:8px}.contact{align-items:flex-start;flex-direction:column;gap:16px}footer span{width:100%;margin:0}}

summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex-shrink:0;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
details[open]>summary::after{transform:rotate(225deg)}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero{animation:landing-enter 400ms cubic-bezier(.22,1,.36,1) both}
  .button{transition:background-color 160ms cubic-bezier(.22,1,.36,1),transform 160ms cubic-bezier(.22,1,.36,1)}
  .button:active{transform:scale(.98)}
  summary{transition:color 160ms cubic-bezier(.22,1,.36,1)}
  summary:hover{color:var(--accent)}
  summary::after{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
  /* shortcut: older browsers toggle accordions instantly; remove the fallback when intrinsic-size transitions are universal. */
  @supports (interpolate-size:allow-keywords) and selector(details::details-content){
    .faq details,.comparison{interpolate-size:allow-keywords}
    .faq details::details-content,.comparison::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size 220ms cubic-bezier(.22,1,.36,1),opacity 220ms cubic-bezier(.22,1,.36,1),content-visibility 220ms allow-discrete}
    .faq details[open]::details-content,.comparison[open]::details-content{block-size:auto;opacity:1}
  }
}
@keyframes landing-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.footer-heart{display:inline-block;vertical-align:-2px;fill:#c4413b}

.language-switch{display:flex;gap:4px;font-size:12px}
.language-switch a{display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;border-radius:4px;text-decoration:none;color:var(--secondary)}
.language-switch a[aria-current=true]{background:#edf0e3;color:var(--accent);font-weight:500}
.download{border-top:1px solid var(--line)}
.download-options{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.download-options article{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fdfbf7}
.download-options article:first-child{background:#edf0e3;border-color:#ccd4bf}
.download-options h3{margin-bottom:4px}
.download-options p{font-size:14px;color:var(--secondary)}
.download-options .button,.download-status{margin-top:auto}
.download-status{display:flex;align-items:center;gap:12px;min-height:44px;font-size:13px;color:var(--secondary)}
@media(max-width:800px){header{gap:16px}nav{gap:16px}}
@media(max-width:600px){header nav{order:3}.language-switch{margin-left:auto}.download-options{grid-template-columns:1fr;gap:16px}}