/* Layout: one column. Hero is the product itself (a working search panel). Below: what it reads, how it starts, where it runs. */
:root{
  --paper:#FAF4EA;      /* warm page, from the icon's paper */
  --sheet:#FFFFFF;      /* raised surface */
  --ink:#2B1A12;        /* the icon's espresso lens */
  --moss:#7A5A44;       /* secondary text */
  --fern:#F6D7A6;       /* soft fills */
  --amber:#F29A1E;      /* the icon's saffron: used for the found thing only */
  --amber-ink:#8A4A00;
  --line:rgba(43,26,18,.14);
  --panel:#2B1A12; --panel-fg:#F6EEDC; --panel-dim:#B79F8A; --panel-row:#3A2519;
  --f:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --deva:"Tiro Devanagari Hindi","Noto Serif Devanagari",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1A120C;--sheet:#25190F;--ink:#F6EEDC;--moss:#C9AC93;--fern:#5A3510;--amber:#F5A83A;--amber-ink:#FFD49A;
  --line:rgba(246,238,220,.14);--panel:#2E1E14;--panel-row:#3F2A1C;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1A120C;--sheet:#25190F;--ink:#F6EEDC;--moss:#C9AC93;--fern:#5A3510;--amber:#F5A83A;--amber-ink:#FFD49A;
  --line:rgba(246,238,220,.14);--panel:#2E1E14;--panel-row:#3F2A1C;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.02em}
p{margin:0}

/* nav */
nav .wrap{display:flex;align-items:center;gap:24px;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.01em}
.brand img{width:34px;height:34px}
nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-size:15px}
nav ul a{text-decoration:none;color:var(--moss)}
nav ul a:hover{color:var(--ink)}
@media (max-width:620px){nav ul li:not(:last-child){display:none}}

/* hero */
.hero{position:relative;padding-block:40px 72px;overflow:hidden}
.deva{position:absolute;right:-2%;top:-40px;font:400 clamp(180px,30vw,380px)/1 var(--deva);color:var(--fern);opacity:.55;pointer-events:none;user-select:none}
.hero h1{position:relative;font-size:clamp(42px,7.4vw,92px);line-height:.98;font-variation-settings:"wdth" 82,"opsz" 96;font-weight:760;max-width:11ch}
.lede{position:relative;margin-top:22px;max-width:34em;font-size:clamp(18px,2vw,21px);color:var(--moss)}
.cta{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;background:var(--ink);color:var(--paper)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn svg{width:18px;height:18px;fill:currentColor}
.cta small{color:var(--moss);font-size:14px;margin-left:4px}

/* the panel */
.panel{position:relative;margin-top:52px;background:var(--panel);color:var(--panel-fg);border-radius:22px;padding:14px;box-shadow:0 30px 60px -30px rgba(43,26,18,.45)}
.bar{display:flex;align-items:center;gap:12px;background:var(--panel-row);border-radius:13px;padding:14px 16px}
.bar svg{width:22px;height:22px;flex:none;stroke:var(--panel-dim);fill:none;stroke-width:2}
.bar input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--panel-fg);font:500 clamp(17px,2.2vw,22px) var(--f)}
.bar input::placeholder{color:var(--panel-dim)}
kbd{font:600 13px var(--f);padding:3px 7px;border-radius:6px;background:rgba(246,238,220,.1);color:var(--panel-dim);white-space:nowrap}
.tries{display:flex;flex-wrap:wrap;gap:8px;padding:12px 4px 4px;font-size:14px;color:var(--panel-dim)}
.tries button{font:inherit;color:var(--panel-fg);background:none;border:1px solid rgba(246,238,220,.18);border-radius:999px;padding:4px 12px;cursor:pointer}
.tries button:hover{border-color:var(--amber)}
.results{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.results li:not(.empty){display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:12px;border-radius:12px}
.results li.top{background:var(--panel-row)}
.thumb{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font:700 11px var(--f);letter-spacing:.04em}
.k-pdf{background:#F6EEDC;color:#2B1A12}.k-img{background:#F6C27A;color:#2B1A12}.k-aud{background:#C4700F;color:#FFF8EE}.k-vid{background:#5A3A22;color:#FFF8EE}.k-doc{background:#FFFFFF;color:#2B1A12}
.results .name{font-weight:600;overflow-wrap:anywhere}
.results .why{font-size:14.5px;color:var(--panel-dim);margin-top:2px}
.results mark{background:none;color:#FFB547;font-weight:600}
.results .where{font-size:13px;color:var(--panel-dim);text-align:right}
.empty{padding:22px 12px;color:var(--panel-dim)}
@media (max-width:560px){.results li{grid-template-columns:40px 1fr}.results .where{display:none}.thumb{width:40px;height:40px}}
.note{font-size:14px;color:var(--moss);margin-top:12px}

/* sections */
section{padding-block:72px;border-top:1px solid var(--line)}
section h2{font-size:clamp(30px,4.2vw,48px);line-height:1.05;font-variation-settings:"wdth" 88,"opsz" 72;max-width:18ch}
section .intro{margin-top:14px;max-width:36em;color:var(--moss)}

.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:36px 48px;margin-top:44px}
.kind{display:grid;grid-template-columns:14px 1fr;gap:16px}
.kind i{width:14px;height:14px;border-radius:4px;margin-top:8px}
.kind h3{font-size:21px;font-variation-settings:"wdth" 95}
.kind p{color:var(--moss);margin-top:4px}
.kind .ext{font-size:13.5px;margin-top:8px;color:var(--ink);opacity:.7}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:36px}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;counter-increment:s}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--line)}
.steps h3{font-size:19px;margin-top:5px}
.steps p{color:var(--moss);margin-top:4px}

.local{background:var(--sheet);border-radius:20px;padding:30px}
.local h3{font-size:24px;letter-spacing:-.02em}
.local p{color:var(--moss);margin-top:10px}
.local dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:22px 0 0;font-size:15px}
.local dt{font-weight:600}.local dd{margin:0;color:var(--moss)}

.table{overflow-x:auto;margin-top:36px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--moss);font-size:14px}
td:first-child{font-weight:600;width:22%}
td kbd{background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

.get{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-block:28px 40px;font-size:14px;color:var(--moss)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.promise{position:relative;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:15px;font-weight:600}
.promise span{display:inline-flex;align-items:center;gap:8px}
.promise svg{width:18px;height:18px;fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.offline{background:var(--panel);color:var(--panel-fg);border-radius:22px;padding:clamp(28px,5vw,56px)}
.offline h2{color:var(--panel-fg)}
.offline .intro{color:var(--panel-dim)}
.offline ul{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px 32px}
.offline li b{display:block;font-size:18px;margin-bottom:4px;color:#FFB547}
.offline li{color:var(--panel-dim);font-size:15.5px}
.early{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mail{font:600 17px var(--f);padding:12px 16px;border-radius:12px;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--line);user-select:all}
.copy{font:600 15px var(--f);padding:12px 16px;border-radius:12px;border:0;background:var(--ink);color:var(--paper);cursor:pointer}
/* blog */
.post-list{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0}
.post-list li{border-top:1px solid var(--line);padding-block:26px}
.post-list a{text-decoration:none;display:grid;gap:6px;max-width:44em}
.post-list h3{font-size:clamp(22px,2.6vw,28px);font-variation-settings:"wdth" 90}
.post-list a:hover h3{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:5px}
.post-list p{color:var(--moss)}
.meta{font-size:14px;color:var(--moss)}
article{max-width:38em;padding-block:40px 80px}
article h1{font-size:clamp(34px,5vw,54px);line-height:1.05;font-variation-settings:"wdth" 86,"opsz" 72;margin-top:10px}
article .meta{margin-top:16px}
article p,article li{font-size:18.5px;line-height:1.7}
article p{margin-top:1.1em}
article h2{font-size:26px;margin-top:1.8em;letter-spacing:-.015em}
article ul{padding-left:1.2em}
article a{text-decoration-color:var(--amber);text-underline-offset:3px}
.back{font-size:15px;color:var(--moss)}
nav ul a.navbuy{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:4px}
.tries{align-items:center}