/* Deiko secondary pages: privacy, terms, changelog, blog, comparisons.
   Same world as the landing page (DESIGN.md): white and paper, ink text, one indigo,
   Bricolage for display, Geist for reading, marker ink for the hand-drawn bits. */
:root{
  --ink:#161618; --ink-2:#4b4b53; --ink-3:#6b6b73; --ink-4:#9a9aa2;
  --line:#ececef; --line-2:#e2e2e6; --paper:#fafafb; --paper-2:#f5f5f7;
  --accent:#4a5bac; --accent-ink:#4050a0; --accent-soft:#eef1ff;
  --wall:radial-gradient(120% 90% at 0% 0%,#dfe4ff 0%,transparent 55%),radial-gradient(90% 80% at 100% 10%,#ece4ff 0%,transparent 60%),radial-gradient(100% 90% at 60% 100%,#e6eeff 0%,transparent 60%),#f5f6ff;
  --shadow:0 24px 60px -28px rgba(30,36,90,.28),0 1px 3px rgba(20,20,30,.06);
  --display:'Bricolage Grotesque','Geist',sans-serif; --sans:'Geist',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --marker:'Permanent Marker',cursive;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;}
::selection{background:#dfe3fa;color:var(--ink);}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px;}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* nav: same bar as the home page */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);}
.nav-in{max-width:1200px;margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;gap:30px;}
.brand{display:flex;align-items:center;gap:10px;font:650 20px/1 var(--display);letter-spacing:-.02em;text-decoration:none;}
.mark{width:24px;height:24px;flex:0 0 24px;border-radius:6.5px;background:linear-gradient(#5a6bc4,#37448c);display:grid;place-items:center;}
.mark::before{content:'';width:10px;height:10px;border-radius:50%;border:1.8px solid #eef1ff;background:radial-gradient(circle,#eef1ff 0 1.9px,transparent 2.3px);}
.links{display:flex;gap:24px;font-size:14.5px;color:var(--ink-2);}
.links a{text-decoration:none;}
.links a:hover,.links a[aria-current]{color:var(--ink);}
.nav-cta{margin-left:auto;}
.btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 17px;border-radius:12px;font:500 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;}
.btn-ink{background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(22,22,24,.55);}
.btn-ink:hover{background:#000;}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line-2);}
.btn-line:hover{border-color:#cfcfd5;}
.ico-apple{width:14px;height:14px;flex:none;margin:-2px -1px 0 -2px;}
@media (max-width:760px){.links{display:none;}.nav-in{padding:0 18px;}}

/* page head: text left, a product-made picture right */
.head{max-width:1200px;margin:0 auto;padding:clamp(48px,6vw,88px) 28px clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;}
.head.solo{grid-template-columns:minmax(0,1fr);max-width:860px;}
.head h1{margin:0;font:650 clamp(40px,5.4vw,76px)/1 var(--display);letter-spacing:-.035em;text-wrap:balance;}
.head h1 .ul{position:relative;white-space:nowrap;}
.head h1 .ul svg{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible;}
.head h1 .ul path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;}
.lead{margin:22px 0 0;font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch;text-wrap:pretty;}
.meta{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--ink-3);}
.meta b{font-weight:500;color:var(--ink-2);}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:500;}
@media (max-width:900px){.head{grid-template-columns:1fr;}}

/* pictures made from the product itself */
.wall{position:relative;padding:clamp(18px,3vw,34px);border-radius:24px;background:var(--wall);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 80px -40px rgba(40,50,120,.3);}
.win{background:#fff;border-radius:14px;border:1px solid rgba(20,20,30,.07);box-shadow:var(--shadow);overflow:hidden;}
.win-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-bottom:1px solid var(--line);background:#fafafb;}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#e2e2e6;}
.win-bar i:nth-child(1){background:#ff5f57}.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin:0 auto;font-size:12px;color:var(--ink-3);}
.term{margin:0;padding:18px 20px 22px;font:500 13.5px/1.85 var(--mono);color:var(--ink-2);white-space:pre-wrap;}
.term .p{color:var(--ink-3);} .term .ok{color:#177a45;} .term .v{color:var(--accent-ink);}
.cover{border-radius:22px;overflow:hidden;background:var(--wall);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);}
.cover svg{display:block;width:100%;height:auto;}
.rel{display:grid;gap:10px;}
.rel div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -18px rgba(30,36,90,.3);}
.rel b{font:600 14px/1 var(--mono);color:var(--accent-ink);min-width:56px;}
.rel span{font-size:14.5px;color:var(--ink-2);}
.rel div:first-child{border-color:#cdd3f5;}

/* reading column */
.prose{max-width:760px;margin:0 auto;padding:0 28px clamp(64px,8vw,112px);}
.prose > :first-child{margin-top:0;}
.prose h2{margin:2.2em 0 .5em;font:650 clamp(26px,2.4vw,32px)/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance;scroll-margin-top:84px;}
.prose h3{margin:1.8em 0 .4em;font:600 20px/1.3 var(--display);letter-spacing:-.015em;}
.prose p,.prose li{color:#2c2c31;}
.prose p{margin:0 0 1.05em;}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em;}
.prose li{margin:.35em 0;}
.prose li::marker{color:var(--accent);}
.prose a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
.prose a:hover{color:var(--ink);}
.prose strong{font-weight:600;color:var(--ink);}
.prose code{font:500 .88em/1 var(--mono);padding:.15em .4em;border-radius:6px;background:var(--paper-2);color:var(--ink);}
.prose kbd{font:500 .85em/1 var(--sans);padding:.2em .5em;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:#fff;}
.prose pre{margin:1.4em 0;padding:18px 20px;border-radius:14px;background:#fafafb;border:1px solid var(--line);overflow-x:auto;font:500 14px/1.7 var(--mono);}
.prose pre code{padding:0;background:none;font-size:inherit;}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--ink-2);font-size:1.05em;}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px;}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.prose th{font-weight:600;color:var(--ink);background:var(--paper);}
.prose figure{margin:2em 0;}
.prose figcaption{margin-top:10px;font-size:14px;color:var(--ink-3);text-align:center;}
.key{margin:1.2em 0 1.6em;padding:20px 24px;border-radius:16px;background:var(--accent-soft);border:1px solid #dde2fb;}
.key ul{margin:0;}
.key li{color:var(--ink);}
.note{margin:1.8em 0;padding:16px 20px;border-radius:14px;background:#fff7d1;color:#4a3f00;font-size:15.5px;}
.note b{font-family:var(--marker);font-weight:400;font-size:18px;margin-right:6px;}
.faq h3{margin-top:1.4em;}
.toc{margin:0 0 2.2em;padding:18px 22px;border-radius:14px;border:1px solid var(--line);background:var(--paper);font-size:15px;}
.toc b{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-3);}
.toc ol{margin:0;padding-left:1.2em;}
.toc a{text-decoration:none;color:var(--ink-2);}
.toc a:hover{color:var(--accent-ink);}
.cta{margin:3em 0 0;padding:clamp(24px,3vw,34px);border-radius:22px;background:var(--wall);display:grid;gap:14px;}
.cta h2{margin:0;font-size:clamp(24px,2.2vw,30px);}
.cta p{margin:0;color:var(--ink-2);}
.cta div{display:flex;flex-wrap:wrap;gap:10px;}

/* changelog: releases hang off one line */
.log h2{position:relative;padding-left:26px;font-family:var(--mono);font-size:22px;letter-spacing:-.01em;}
.log h2::before{content:'';position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);}

/* blog index */
.cards{max-width:1200px;margin:0 auto;padding:0 28px clamp(64px,8vw,112px);display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;}
.card{display:grid;grid-template-rows:auto 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;box-shadow:0 20px 50px -34px rgba(30,36,90,.35);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(30,36,90,.4);}
.card .cover{border-radius:0;}
.card div.t{padding:20px 22px 24px;display:grid;gap:8px;align-content:start;}
.card h2{margin:0;font:650 22px/1.2 var(--display);letter-spacing:-.02em;}
.card p{margin:0;font-size:15.5px;color:var(--ink-2);}
.card small{font-size:13px;color:var(--ink-3);}
.sub-h{max-width:1200px;margin:0 auto;padding:0 28px 18px;font:650 24px/1.2 var(--display);letter-spacing:-.02em;}

/* footer: same as the home page */
.foot{border-top:1px solid var(--line);background:var(--paper);padding:36px 28px;}
.foot-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;font-size:14.5px;color:var(--ink-3);}
.foot-in a{text-decoration:none;}
.foot-in a:hover{color:var(--ink);}
.foot-in .brand{font-size:17px;color:var(--ink);}
.foot-in span{margin-left:auto;}
.foot-in span a{text-decoration:underline;text-underline-offset:2px;}
@media (max-width:760px){.foot-in span{margin-left:0;width:100%;}}
@media (prefers-reduced-motion:reduce){.card{transition:none;}html{scroll-behavior:auto;}}