/* Layout: Liquid Glass. A living backdrop of soft colour fields and giant Kazakh glyphs sits behind
   floating glass layers — capsule nav on top, tab bar at the bottom on phones. Content is one
   left-aligned 1120px column. Gold underline marks Kazakh-specific letters everywhere. */
:root{
  --bg:#E9EEF4; --ink:#0E1A26; --muted:#4D5D70;
  --glass:rgba(255,255,255,.42); --glass-strong:rgba(255,255,255,.62);
  --rim:rgba(255,255,255,.85); --rim-low:rgba(255,255,255,.25); --shade:rgba(20,40,60,.14);
  --tint:#0A7C8A; --tint-glass:rgba(7,96,108,.9); --on-tint:#FFFFFF;
  --altyn:#E8A300;
  --f1:#7FD3DC; --f2:#FFC86B; --f3:#9FB8FF; --f4:#FF9EB1;   /* backdrop colour fields */
  --glyph:rgba(14,26,38,.07);
  --sys:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Onest", "Segoe UI", Roboto, sans-serif;
  --display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Geologica", "Segoe UI", Roboto, sans-serif;
  --r:28px; --r-sm:16px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#070C12; --ink:#EEF3F8; --muted:#A3B1C2;
  --glass:rgba(40,52,66,.38); --glass-strong:rgba(48,62,78,.58);
  --rim:rgba(255,255,255,.32); --rim-low:rgba(255,255,255,.06); --shade:rgba(0,0,0,.45);
  --tint:#4CC6D4; --tint-glass:rgba(40,170,186,.62); --on-tint:#FFFFFF;
  --altyn:#FFC233;
  --f1:#0E6C78; --f2:#8A5A00; --f3:#2B3F9A; --f4:#8A2846;
  --glyph:rgba(255,255,255,.06); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070C12; --ink:#EEF3F8; --muted:#A3B1C2;
  --glass:rgba(40,52,66,.38); --glass-strong:rgba(48,62,78,.58);
  --rim:rgba(255,255,255,.32); --rim-low:rgba(255,255,255,.06); --shade:rgba(0,0,0,.45);
  --tint:#4CC6D4; --tint-glass:rgba(40,170,186,.62); --on-tint:#FFFFFF;
  --altyn:#FFC233;
  --f1:#0E6C78; --f2:#8A5A00; --f3:#2B3F9A; --f4:#8A2846;
  --glyph:rgba(255,255,255,.06); color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
html{scroll-padding-top:100px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sys);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--tint)}
:focus-visible{outline:3px solid var(--tint);outline-offset:3px;border-radius:12px}
h1,h2,h3{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.025em}
h2{font-size:clamp(30px,4.4vw,46px);font-weight:700}
h3{font-size:21px;font-weight:650;letter-spacing:-.01em}
p{margin:0}
mark.kz{background:none;color:inherit;box-shadow:inset 0 -.16em 0 var(--altyn)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip.glass{position:fixed;left:-999px;padding:10px 16px;border-radius:999px}.skip.glass:focus{left:16px;top:16px;z-index:60}

/* ---------- backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.field{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;animation:drift 26s ease-in-out infinite alternate}
.field.a{width:52vmax;height:52vmax;background:var(--f1);left:-14vmax;top:-12vmax}
.field.b{width:40vmax;height:40vmax;background:var(--f2);right:-10vmax;top:18vh;animation-delay:-8s}
.field.c{width:46vmax;height:46vmax;background:var(--f3);left:20vw;bottom:-22vmax;animation-delay:-14s}
.field.d{width:30vmax;height:30vmax;background:var(--f4);right:12vw;bottom:8vh;animation-delay:-4s;opacity:.6}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
.glyphs{position:absolute;inset:0;font:800 min(46vw,520px)/1 "Geologica",var(--display);color:var(--glyph)}
.glyphs span{position:absolute}
.glyphs span:nth-child(1){left:-4vw;top:4vh}
.glyphs span:nth-child(2){right:-6vw;top:38vh}
.glyphs span:nth-child(3){left:18vw;top:96vh}

/* ---------- glass material ---------- */
.glass{
  position:relative;isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--rim),            /* top specular edge */
    inset 0 -1px 0 var(--rim-low),       /* bottom inner edge */
    inset 0 0 0 1px var(--rim-low),
    0 1px 2px var(--shade),
    0 18px 50px -12px var(--shade);
}
.glass::before{ /* moving light sheen, follows the pointer */
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.38),transparent 60%);
  mix-blend-mode:soft-light;opacity:.9;
}
.glass::after{ /* bright rim that fades around the edge, like thick glass */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--rim),transparent 38%,transparent 62%,var(--rim-low));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.glass.strong{background:var(--glass-strong)}

/* ---------- top capsule nav ---------- */
header.top{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:0;right:0;z-index:30}
.capsule{display:flex;align-items:center;gap:6px;height:58px;padding:0 8px 0 20px;border-radius:999px}
.logo{font:800 18px "Geologica",var(--display);color:var(--ink);text-decoration:none;letter-spacing:.02em;margin-right:auto;padding-block:10px;display:inline-block}
.logo span{color:var(--altyn)}
.capsule nav{display:flex;gap:2px}
.capsule nav a{color:var(--ink);text-decoration:none;font-weight:550;font-size:15px;padding:9px 14px;border-radius:999px;transition:background .25s}
.capsule nav a:hover{background:var(--glass-strong)}
.lang{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;padding:9px 13px;border-radius:999px}
.lang:hover{background:var(--glass-strong)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--sys);padding:13px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;min-height:46px;color:var(--ink);transition:transform .35s cubic-bezier(.2,1.6,.4,1),filter .2s}
.btn:active{transform:scale(.95)}
.btn.tinted{background:var(--tint-glass);color:var(--on-tint)}
.btn.tinted::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 60%)}
.capsule nav a.on{background:var(--glass-strong);color:var(--tint)}
.btn.sm{padding:9px 16px;font-size:15px;min-height:40px}

/* ---------- bottom tab bar (phones) ---------- */
.tabbar{display:none}
@media (max-width:860px){
  .capsule nav,.capsule .btn{display:none}
  .tabbar{display:flex;position:fixed;z-index:30;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);height:66px;border-radius:999px;padding:6px;gap:4px}
  .tabbar a{flex:1;display:grid;place-items:center;align-content:center;gap:1px;text-decoration:none;color:var(--ink);border-radius:999px;font-size:11.5px;font-weight:600}
  .tabbar a b{font:800 20px/1 "Geologica",var(--display)}
  .tabbar a.on{background:var(--glass-strong);color:var(--tint)}
  footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
}

/* ---------- hero ---------- */
.hero{padding-block:140px 40px;display:grid;gap:28px}
.hero h1{font-size:clamp(40px,7vw,84px);font-weight:800;max-width:14ch}
.hero .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.alpha{display:flex;flex-wrap:wrap;gap:8px}
.alpha b{font:800 24px/1 "Geologica",var(--display);width:52px;height:52px;display:grid;place-items:center;border-radius:16px}
.alpha b i{font-style:normal;box-shadow:inset 0 -.16em 0 var(--altyn)}

/* specimen */
.spec{overflow:hidden;margin-top:12px}
.spec-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:16px 18px}
.spec-bar label{font-size:14px;font-weight:600;color:var(--muted)}
#t{flex:1 1 260px;min-width:0;font:500 17px var(--sys);padding:12px 18px;border:0;border-radius:999px;background:var(--glass-strong);color:var(--ink);box-shadow:inset 0 1px 3px var(--shade)}
.size{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
#sz{accent-color:var(--tint);width:120px}
.row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"meta sample badge";gap:16px;align-items:center;padding:10px 18px;border-top:1px solid var(--rim-low)}
.row .meta{font-size:14px;line-height:1.35}
.row .meta strong{display:block;font-size:15px}
.row .meta span{color:var(--muted)}
/* One line per font keeps the tester compact; the full text stays in the input. */
.row .sample{min-width:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok{font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--glass-strong);white-space:nowrap}
.ok.bad{color:#C2412D}
.spec-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px;border-top:1px solid var(--rim-low);font-size:14px;color:var(--muted)}
.row .meta{grid-area:meta}.row .sample{grid-area:sample}.row .ok{grid-area:badge}
@media (max-width:640px){.row{grid-template-columns:1fr auto;grid-template-areas:"meta badge" "sample sample";gap:6px 12px}}

/* ---------- sections ---------- */
section.block{padding-block:56px}
.head{display:grid;gap:10px;margin-bottom:28px;max-width:640px}
.head p{color:var(--muted)}

.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tool{display:flex;flex-direction:column;gap:14px;padding:16px 16px 20px}
.tool .vis{height:210px;border-radius:20px;display:grid;place-items:center;overflow:hidden;background:var(--glass-strong);box-shadow:inset 0 1px 0 var(--rim-low)}
.tool .name,.tool .what,.tool ul,.tool .acts{padding-inline:6px}
.tool .name{display:flex;align-items:center;gap:10px}
.tag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--altyn);color:#1A1200}
.tool .what{color:var(--muted);font-size:16px}
.tool ul{margin:0;list-style:none;display:grid;gap:6px;font-size:15px}
.tool li::before{content:"✓";color:var(--tint);font-weight:700;margin-right:8px}
.tool .acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tool .acts a.more{font-size:15px;font-weight:600;padding-block:12px}
@media (max-width:960px){.tools{grid-template-columns:1fr}}
.v-qarip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;width:100%}
.v-qarip div{border-radius:14px;display:grid;place-items:center;height:84px;font-size:40px;background:var(--glass);box-shadow:inset 0 1px 0 var(--rim)}
/* Таңба card: the two modes side by side — a finished 9:16 Story and a transparent text sticker. */
.v-tanba{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:14px}
.v-story{width:104px;aspect-ratio:9/16;max-width:100%;border-radius:16px;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;color:#fff;
  background:radial-gradient(90% 60% at 18% 8%,rgba(255,200,107,.85) 0%,transparent 60%),linear-gradient(165deg,#0A7C8A 0%,#0B2A3A 78%);
  box-shadow:0 16px 30px -12px rgba(10,30,50,.55),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-4deg)}
.v-story small{font:700 8px var(--sys);letter-spacing:.08em;opacity:.8;margin-bottom:auto}
.v-story b{font:400 19px/1.04 "Yeseva One",Georgia,serif}
.v-story i{align-self:flex-start;font:700 9px var(--sys);font-style:normal;color:#13202E;background:#D9FF47;border-radius:999px;padding:3px 8px}
.v-sticker{width:112px;height:128px;border-radius:16px;display:grid;place-content:center;justify-items:center;gap:10px;transform:rotate(3deg);
  background-color:var(--glass-strong);background-image:linear-gradient(45deg,var(--rim-low) 25%,transparent 25%,transparent 75%,var(--rim-low) 75%),linear-gradient(45deg,var(--rim-low) 25%,transparent 25%,transparent 75%,var(--rim-low) 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;box-shadow:0 16px 30px -14px var(--shade),inset 0 0 0 1px var(--rim-low)}
.v-sticker span{font:italic 400 19px/1 "Yeseva One",Georgia,serif;color:var(--ink);white-space:nowrap}
.v-sticker em{font:700 10px var(--sys);font-style:normal;color:var(--on-tint);background:var(--tint-glass);border-radius:999px;padding:4px 9px}
.v-voice{width:100%;padding:18px;display:grid;gap:14px;justify-items:center}
.mic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--tint-glass);color:#fff;font-size:26px;box-shadow:0 0 0 10px rgba(76,198,212,.18),inset 0 1px 0 rgba(255,255,255,.5);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(76,198,212,.06),inset 0 1px 0 rgba(255,255,255,.5)}}
.v-voice p{font-size:15px;border-radius:16px;padding:10px 14px;background:var(--glass);box-shadow:inset 0 1px 0 var(--rim)}
.v-voice p em{color:var(--muted);font-style:normal}

.princ{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.princ > div{display:grid;gap:10px;align-content:start;padding:24px}
.princ .glyph{font:800 40px/1 "Geologica",var(--display)}
.princ p{color:var(--muted);font-size:16px}
@media (max-width:800px){.princ{grid-template-columns:1fr}}

.man{padding:clamp(28px,5vw,56px);display:grid;gap:20px}
.man blockquote{margin:0;font:700 clamp(24px,3.4vw,38px)/1.22 var(--display);letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.man p{max-width:60ch;color:var(--muted)}
.man .sig{font-size:15px;font-weight:600;color:var(--ink)}

.two{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.two > div{padding:clamp(20px,3vw,32px)}
@media (max-width:860px){.two{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--rim-low)}
details:last-child{border-bottom:0}
summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:600;font-size:17px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:12px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--glass-strong);color:var(--tint);font-size:20px;transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:16px;color:var(--muted);max-width:60ch}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rim-low);font-size:15px}
.log li:last-child{border-bottom:0}
.log time{color:var(--muted);font-variant-numeric:tabular-nums}

footer .wrap{padding-block:24px 40px}
.foot{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;padding:24px 28px}
footer nav{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
footer nav a{color:var(--ink);text-decoration:none;font-size:15px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.mail code{font:inherit;color:var(--ink);user-select:all}
.copy{font:600 13px var(--sys);border:0;color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}

/* No backdrop-filter support: fall back to a solid frosted surface */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-strong)}
}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shared bits for inner pages ---------- */
.page-head{padding-block:132px 24px;display:grid;gap:14px}
.page-head h1{font-size:clamp(36px,6vw,64px);font-weight:800;max-width:16ch}
.page-head .lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--sys);padding:9px 15px;border-radius:999px;border:0;cursor:pointer;color:var(--ink);background:var(--glass);white-space:nowrap;min-height:40px;
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-low)}
.chip[aria-pressed="true"],.chip.on{background:var(--tint-glass);color:var(--on-tint)}
.chip small{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
.field-in{font:500 16px var(--sys);padding:12px 18px;border:0;border-radius:999px;background:var(--glass-strong);color:var(--ink);box-shadow:inset 0 1px 3px var(--shade);min-width:0;min-height:46px}
textarea.field-in{border-radius:20px;resize:vertical;line-height:1.5}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps > div{padding:22px;display:grid;gap:8px;align-content:start}
.steps > div::before{counter-increment:s;content:counter(s);font:800 22px/1 "Geologica",var(--display);color:var(--tint)}
.steps p{color:var(--muted);font-size:16px}
@media (max-width:800px){.steps{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);transform:translate(-50%,20px);opacity:0;z-index:50;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.note{font-size:14px;color:var(--muted)}

/* ==========================================================================
   Site-wide components (blog, landings, font pages, privacy, DauysTap)
   ========================================================================== */
.foot-id{display:grid;gap:8px;align-content:start}
.tabbar a{min-width:0}
.tabbar a b{font-size:19px}
@media (max-width:380px){.tabbar a{font-size:10.5px}}
.wrap.narrow{max-width:820px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted);padding-top:112px;margin-bottom:-96px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--tint)}
.crumbs + .page-head{padding-top:120px}
.meta-line{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Long-form text: articles, privacy, about */
.prose{padding:clamp(22px,4vw,44px);display:grid;gap:16px;margin-bottom:24px;min-width:0}
.prose > *{margin:0}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin-top:14px}
.prose h3{font-size:19px;margin-top:6px}
.prose p,.prose li{color:var(--muted);max-width:66ch;line-height:1.65;overflow-wrap:anywhere}
.prose p b,.prose p strong,.prose li b,.prose li strong{color:var(--ink)}
.prose ol,.prose ul{padding-left:22px;display:grid;gap:8px}
.prose li::marker{color:var(--tint);font-weight:700}
.prose a{color:var(--tint);text-underline-offset:3px}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rim-low);vertical-align:top;color:var(--muted)}
.prose th{color:var(--ink)}
.prose .table-wrap{overflow-x:auto}
.prose-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* Article list */
.post-list{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
@media (max-width:400px){.post-list{grid-template-columns:1fr}}
.post-card{display:grid;gap:10px;padding:22px;height:100%;text-decoration:none;color:var(--ink);align-content:start}
.post-card h2{font-size:20px;line-height:1.25}
.post-card p{color:var(--muted);font-size:15px}
.post-card .more{color:var(--tint);font-weight:600;font-size:15px;margin-top:auto}
.post-card:hover h2{color:var(--tint)}
.more-reading{padding:22px;margin-bottom:40px;display:grid;gap:10px}
.more-reading h2{font-size:20px}
.more-reading ul{margin:0;padding-left:20px;display:grid;gap:8px}
.more-reading a{color:var(--tint)}

/* Product landing pages */
.ld-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:120px 32px}
.ld-hero h1{font-size:clamp(36px,5.6vw,62px);font-weight:800}
.ld-hero h1 em{font-style:normal;box-shadow:inset 0 -.14em 0 var(--altyn)}
.ld-hero .lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:52ch;margin-top:16px}
.ld-hero .cta{margin-top:24px}
.ld-facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ld-facts li{display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:var(--glass);box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-low);font-size:14px;color:var(--muted)}
.ld-facts strong{color:var(--ink);font:700 16px var(--display)}
.ld-visual{position:relative;display:grid;place-items:center;min-width:0}
.ld-phone{width:min(100%,260px);border-radius:34px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(10,20,40,.55),inset 0 0 0 1px var(--rim-low);background:var(--glass-strong)}
.ld-phone img{display:block;width:100%;height:auto}
.ld-phones{display:flex;gap:16px;align-items:flex-end;justify-content:center;max-width:100%}
.ld-phones .ld-phone:nth-child(2){width:min(44%,200px);margin-bottom:-24px}
.ld-float{position:absolute;left:0;bottom:12%;padding:12px 16px;border-radius:20px;font:800 22px/1.1 "Geologica",var(--display);display:grid;gap:2px;background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 var(--rim),0 14px 30px -12px var(--shade)}
.ld-float small{font:600 12px var(--sys);color:var(--muted)}
@media (max-width:860px){.ld-hero{grid-template-columns:1fr;padding-top:100px}.ld-float{left:4px}}
.ld-problem{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:clamp(22px,4vw,40px)}
.ld-problem p{color:var(--muted)}
.ld-broken{font:700 26px var(--display);margin-top:14px !important;color:var(--ink) !important}
.ld-broken s{color:#C2412D}
@media (max-width:760px){.ld-problem{grid-template-columns:1fr}}
.ld-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ld-features li{padding:22px;display:grid;gap:8px;align-content:start}
.ld-features svg{width:28px;height:28px;stroke:var(--tint);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ld-features h3{font-size:18px}
.ld-features p{color:var(--muted);font-size:15px}
@media (max-width:900px){.ld-features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ld-features{grid-template-columns:1fr}}
.ld-show{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.ld-show.flip > :first-child{order:2}
.ld-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.ld-list li::before{content:"✓";color:var(--tint);font-weight:700;margin-right:10px}
@media (max-width:760px){.ld-show{grid-template-columns:1fr}.ld-show.flip > :first-child{order:0}}
.ld-who{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ld-cta{padding:clamp(26px,5vw,52px);display:grid;gap:14px;justify-items:start}
.ld-cta h2{font-size:clamp(26px,3.6vw,40px)}
.ld-cta p{color:var(--muted);max-width:56ch}
.ld-others{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ld-others a{padding:22px;display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.ld-others span{color:var(--muted);font-size:15px}
.ld-others em{font-style:normal;color:var(--tint);font-weight:600;font-size:15px}
@media (max-width:640px){.ld-others{grid-template-columns:1fr}}
.faq-box{padding:clamp(18px,3vw,30px)}

/* Font detail page */
.fd-head{padding-block:120px 18px;display:grid;gap:10px}
.fd-head h1{font-size:clamp(34px,5.5vw,58px);font-weight:800;overflow-wrap:anywhere}
.fd-head .lead{color:var(--muted);max-width:56ch}
.fd-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px}
@media (max-width:900px){.fd-grid{grid-template-columns:1fr}}
.fd-stage{padding:clamp(18px,3vw,28px);display:grid;gap:16px;min-width:0}
.fd-stage .tester-label{display:grid;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.fd-stage .detail-preview-input{font:500 17px var(--sys);padding:12px 18px;border:0;border-radius:999px;background:var(--glass-strong);color:var(--ink);box-shadow:inset 0 1px 3px var(--shade);width:100%;min-height:46px}
.fd-stage .size-control{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.fd-stage .size-control input{flex:1;accent-color:var(--tint)}
.fd-stage .size-control strong{font-variant-numeric:tabular-nums;color:var(--ink);min-width:44px;text-align:right}
.fd-stage .font-detail-preview{margin:0;font-size:40px;line-height:1.2;overflow-wrap:anywhere;color:var(--ink)}
.fd-stage .font-detail-letters{margin:0;font-size:22px;color:var(--muted);letter-spacing:.04em;overflow-wrap:anywhere;padding-top:14px;border-top:1px solid var(--rim-low)}
.fd-stage .glyph-live{margin:0;font-size:14px;font-weight:600;color:var(--tint)}
.fd-panel{padding:22px;display:grid;gap:14px}
.fd-panel .font-detail-meta{display:flex;flex-wrap:wrap;gap:8px}
.fd-panel .font-detail-meta span{padding:6px 12px;border-radius:999px;background:var(--glass-strong);font-size:13px;font-weight:600}
.fd-panel .license-badge.is-check,.fd-panel .license-badge[data-license="check"]{color:#9A5A00}
.fd-panel .license-copy{color:var(--muted);font-size:15px;margin:0}
.fd-panel .font-detail-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fd-panel .font-download{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:999px;background:var(--tint-glass);color:var(--on-tint);font-weight:600;text-decoration:none;flex:1 1 160px}
.fd-panel .font-detail-stories{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border-radius:999px;background:var(--glass-strong);color:var(--ink);font-weight:600;text-decoration:none;flex:1 1 160px}
.fd-panel .font-favorite{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:var(--glass-strong);color:var(--ink);font-size:20px}
.fd-panel .font-favorite::before{content:"♡"}
.fd-panel .font-favorite[aria-pressed="true"]{color:#E5484D}
.fd-panel .font-favorite[aria-pressed="true"]::before{content:"♥"}
.fd-panel .lg-btn-ico{display:none}
.fd-panel .disclaimer{font-size:13px;color:var(--muted);margin:0}
.similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.font-similar-card{padding:16px 18px;text-decoration:none;color:var(--ink);font-weight:600;border-radius:20px;background:var(--glass);box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-low)}
.font-similar-card:hover{color:var(--tint)}
.font-similar-card strong{font-weight:600}

/* Old-site bridge tokens, used by /dauystap/app.css */
:root{--bg-elevated:rgba(255,255,255,.62);--line:rgba(14,26,38,.10);--accent:var(--tint);--accent-soft:rgba(10,124,138,.12);--radius:22px;--radius-sm:14px;--ease:cubic-bezier(.2,.8,.2,1);--dt-navy:#0B3A44;--dt-navy-2:#0A5560;--dt-blue:#0A7C8A;--dt-blue-ink:#07606C;--dt-wave:#7FE3EC;--dt-track:rgba(14,26,38,.08)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg-elevated:rgba(48,62,78,.58);--line:rgba(255,255,255,.10);--accent-soft:rgba(76,198,212,.14);--dt-track:rgba(255,255,255,.10);--dt-blue-ink:#4CC6D4}}
:root[data-theme="dark"]{--bg-elevated:rgba(48,62,78,.58);--line:rgba(255,255,255,.10);--accent-soft:rgba(76,198,212,.14);--dt-track:rgba(255,255,255,.10);--dt-blue-ink:#4CC6D4}
:where(.dt-app) button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.dt-app{padding-block:112px 40px}
.dt-app .wrap{max-width:780px}
.dt-intro h1{font-family:var(--display);font-weight:800}
.dt-tabs{border:0;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-low)}
.dt-tabs [role="tab"]{border-radius:999px;color:var(--ink)}
.dt-tabs [role="tab"][aria-selected="true"]{background:var(--glass-strong);color:var(--tint);box-shadow:inset 0 1px 0 var(--rim),0 4px 14px -6px var(--shade)}
.dt-card{border:0;background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-low),0 18px 50px -12px var(--shade);border-radius:var(--r)}
.dt-recorder,.dt-gate{background:linear-gradient(150deg,#0B3A44,#0A5560 60%,#0E6C78);color:#fff}
.dt-output,textarea,.dt-card input[type="search"],.dt-select select{background:var(--glass-strong);border-color:transparent;color:var(--ink)}
.dt-drop{background:var(--glass-strong);border-color:var(--rim)}
.btn.btn-primary{background:var(--tint-glass);color:var(--on-tint)}
.btn.btn-ghost{background:var(--glass-strong);color:var(--ink)}
.dt-toast{border-radius:999px}
.ld-browser{width:100%;border-radius:22px;overflow:hidden;background:var(--glass-strong);box-shadow:0 30px 70px -24px rgba(10,20,40,.5),inset 0 0 0 1px var(--rim-low)}
.ld-browser-bar{display:flex;gap:6px;padding:10px 14px}
.ld-browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--rim-low);box-shadow:inset 0 0 0 1px var(--muted)}
.ld-browser img{display:block;width:100%;height:auto}
.ld-float.b{left:auto;right:0;bottom:auto;top:8%}
.ld-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 16px;max-width:100%}
.ld-strip::-webkit-scrollbar{display:none}
.ld-strip img{width:150px;height:auto;flex:0 0 auto;border-radius:18px;box-shadow:0 14px 30px -14px rgba(10,20,40,.5)}
/* License confirmation dialog injected by /qarip/qarip-lib.js */
.qarip-license-modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;background:rgba(5,10,18,.5)}
.qarip-license-dialog{position:relative;max-width:420px;width:100%;padding:24px;border-radius:var(--r);background:var(--glass-strong);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);box-shadow:inset 0 1px 0 var(--rim),0 24px 60px -20px var(--shade);color:var(--ink);display:grid;gap:10px}
.qarip-license-dialog h2{font-size:22px}
.qarip-license-dialog p{color:var(--muted);margin:0}
.qarip-license-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.qarip-dl-go{font:600 16px var(--sys);border:0;cursor:pointer;min-height:46px;padding:12px 22px;border-radius:999px;background:var(--tint-glass);color:var(--on-tint)}
.qarip-dl-info{color:var(--tint);font-weight:600}
.qarip-dl-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:var(--glass);color:var(--ink);font-size:20px}
.font-detail-author{color:var(--muted);margin:0}