/* heyias.com - bilingual, light, mobile-first */
:root{
  --paper:#faf7f0;
  --raised:#f3eee3;
  --ink:#14120d;
  --dim:#605949;
  --faint:#9b937f;
  --line:rgba(20,18,13,.13);
  --line-strong:rgba(20,18,13,.26);
  --accent:#b4472c;
  --accent-soft:rgba(180,71,44,.09);
  --good:#3f6b45;

  --sans:"General Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display:"Clash Display","General Sans",ui-sans-serif,system-ui,sans-serif;
  --deva:"Hind","Noto Sans Devanagari",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:var(--paper)}

/* Devanagari gets its own face and a touch more line height, because stacked
   matras need the room. This is why the site is not "translated". */
:lang(hi){font-family:var(--deva);line-height:1.78}

.wrap{max-width:940px;margin:0 auto;padding:0 var(--gut)}

/* language toggle */
.topbar{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:17px}
.brand svg{display:block}
.topbar .sp{flex:1}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.lang button{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;color:var(--dim);transition:background .14s ease,color .14s ease;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lang button:last-child{font-family:var(--deva);letter-spacing:0;text-transform:none;font-size:12.5px}

/* hero */
.hero{padding:clamp(40px,9vw,86px) 0 clamp(28px,5vw,46px)}
.status{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.status:lang(hi){font-family:var(--deva);letter-spacing:.04em;text-transform:none;font-size:12px}
.wordmark{margin:0 0 6px;font-family:var(--deva);font-weight:600;
  font-size:clamp(46px,11vw,96px);line-height:1.12;letter-spacing:-.01em}
.romanised{margin:0 0 22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint)}
.thesis{margin:0 0 20px;font-size:clamp(24px,4.4vw,40px);font-weight:600;
  line-height:1.18;letter-spacing:-.03em;max-width:19ch}
.thesis em{font-style:normal;color:var(--accent)}
.lede{margin:0;max-width:56ch;font-size:clamp(17px,2vw,19.5px);color:var(--dim);line-height:1.62}

/* sections */
.sec{padding:clamp(30px,3.8vw,46px) 0 0;border-top:1px solid var(--line);margin-top:clamp(30px,3.8vw,46px)}
.sec:first-of-type{border-top:0;margin-top:0}
.kicker{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.kicker:lang(hi){font-family:var(--deva);letter-spacing:.06em;text-transform:none;font-size:12.5px}
.sec h2{margin:0 0 14px;font-size:clamp(24px,3.4vw,32px);font-weight:600;
  letter-spacing:-.025em;line-height:1.2;max-width:24ch}
.sec > p{margin:0 0 22px;max-width:62ch;color:var(--dim)}

/* refusals: the most distinctive thing on the page */
.refusals{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.refusal{background:var(--paper);padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.refusal .no{grid-row:1/3;font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:4px}
.refusal h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.refusal p{margin:5px 0 0;color:var(--dim);font-size:15.5px;line-height:1.58}

/* the loop */
.loop{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 22px}
.loop span{display:inline-flex;align-items:center;padding:9px 15px;border:1px solid var(--line-strong);
  border-radius:999px;font-size:14.5px}
.loop span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.loop i{font-style:normal;color:var(--faint);font-size:15px}

/* layers */
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.layer{border:1px solid var(--line);border-radius:8px;padding:22px;background:var(--raised)}
.layer .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.layer h3{margin:8px 0 8px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.layer p{margin:0;color:var(--dim);font-size:15px;line-height:1.58}

/* evidence figures */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fig{background:var(--paper);padding:24px}
.fig b{display:block;font-size:clamp(30px,5vw,40px);font-weight:600;letter-spacing:-.035em;
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.fig p{margin:10px 0 0;color:var(--dim);font-size:14.5px;line-height:1.52}

/* wedge callout */
.wedge{border:1px solid var(--line-strong);border-radius:8px;padding:26px;background:var(--raised)}
.wedge h3{margin:0 0 10px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.wedge p{margin:0 0 14px;color:var(--dim)}
.wedge p:last-child{margin-bottom:0}
.wedge .qwk{display:flex;flex-wrap:wrap;gap:20px;margin:18px 0 0;font-family:var(--mono);font-size:12.5px}
.wedge .qwk span{color:var(--dim)}
.wedge .qwk b{color:var(--ink);font-weight:500}
.wedge .qwk .win b{color:var(--good)}

/* build status */
.built{display:grid;gap:10px;margin:0 0 22px}
.built div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.built .mark{font-family:var(--mono);font-size:11px;color:var(--good)}
.built .mark.todo{color:var(--faint)}
.built p{margin:0;color:var(--dim);font-size:15.5px}
.built b{color:var(--ink);font-weight:600}

footer{margin-top:clamp(46px,7vw,84px);padding:26px 0 72px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
footer a:hover{color:var(--accent)}
footer .end{margin-left:auto;text-transform:none;letter-spacing:.04em}
footer:lang(hi) .end{font-family:var(--deva)}

[data-lang]{display:none}
[data-lang].on{display:revert}

@media (max-width:620px){
  .refusal{grid-template-columns:1fr}
  .refusal .no{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------------------------------------------------------- illustrations */
.figure{margin:20px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--raised);padding:22px 24px 20px}
.figure figcaption{margin:10px 0 0;font-size:14.5px;color:var(--dim);line-height:1.55}
.figure svg{display:block;width:100%;height:auto;overflow:visible}
.figure .lbl{font-family:var(--sans);font-size:12.5px;fill:var(--ink)}
.figure .lbl-hi{font-family:var(--deva);font-size:12.5px;fill:var(--ink)}
.figure .val{font-family:var(--mono);font-size:12.5px;fill:var(--ink);font-weight:500}
.figure .sub{font-family:var(--mono);font-size:10.5px;fill:var(--faint);letter-spacing:.08em}
.figure .node{fill:var(--paper);stroke:var(--line-strong);stroke-width:1}
.figure .flow{stroke:var(--faint);stroke-width:1.5;fill:none}
.figure .flow-back{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-dasharray:4 4}

/* data table fallback, always present for the charts */
.figure details{margin:12px 0 0}
.figure summary{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);cursor:pointer}
.figure summary:hover{color:var(--accent)}
.figure table{width:100%;border-collapse:collapse;margin:12px 0 0;font-size:14px}
.figure th,.figure td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.figure th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:500}
.figure td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* companion product */
.companion{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start;
  border:1px solid var(--line-strong);border-radius:8px;padding:24px;background:var(--raised)}
.companion .icon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:#3C0A0C;color:#fff;font-weight:600;font-size:20px;grid-row:1/4}
.companion h3{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.companion p{margin:0 0 14px;color:var(--dim);font-size:15.5px;line-height:1.58}
.companion .cta{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:6px;
  background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:500;
  transition:background .14s ease}
.companion .cta:hover{background:var(--accent)}
.companion .note{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.companion .note:lang(hi){font-family:var(--deva);letter-spacing:.03em;text-transform:none;font-size:12.5px}
@media (max-width:560px){
  .companion{grid-template-columns:1fr}
  .companion .icon{grid-row:auto;margin-bottom:14px}
}

/* ---------------------------------------------------------- type system */
/* Clash Display carries the headings, General Sans the reading, Hind the
   Devanagari. All three are in classy-fonts; Hind is Indian Type Foundry's
   Devanagari family, which is why it sets Hindi better than a fallback face. */
.thesis,.sec h2,.refusal h3,.layer h3,.wedge h3,.companion h3,.fig b{font-family:var(--display)}
.thesis:lang(hi),.sec h2:lang(hi),.refusal h3:lang(hi),.layer h3:lang(hi),
.wedge h3:lang(hi),.companion h3:lang(hi){font-family:var(--deva);font-weight:600}
.wordmark{font-family:var(--deva);font-weight:600}

/* Hind runs a little tighter than Noto, so Devanagari needs less extra leading */
:lang(hi){line-height:1.72}

/* the two-value stat needs to sit on one line */
.fig b.pair{font-size:clamp(21px,3.2vw,28px);letter-spacing:-.02em;white-space:nowrap}

/* companion: two actions side by side */
.ctarow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.companion .cta em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(250,247,240,.62);margin-left:2px}
.companion .cta--ghost{background:none;color:var(--ink);border:1px solid var(--line-strong)}
.companion .cta--ghost:hover{background:none;border-color:var(--accent);color:var(--accent)}

/* ------------------------------------------------------------------ pricing */
.topbar .navlink{font-size:14px;color:var(--dim);margin-right:18px}
.topbar .navlink:hover{color:var(--accent)}
.up{font-size:14px;color:var(--dim)}
.up:hover{color:var(--accent)}
.lede-link{color:var(--accent);font-weight:500;white-space:nowrap}
.lede-link:hover{text-decoration:underline;text-underline-offset:3px}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:14px}
.plan{border:1px solid var(--line);border-radius:8px;padding:26px;background:var(--raised);
  display:flex;flex-direction:column}
.plan.lead{border-color:var(--line-strong)}
.plan .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.plan .amt{display:flex;align-items:baseline;gap:9px;margin:12px 0 10px}
.plan .amt b{font-family:var(--display);font-size:clamp(34px,6vw,44px);font-weight:600;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.plan .amt span{color:var(--faint);font-size:13px}
.plan > p{margin:0 0 16px;color:var(--dim);font-size:15px;line-height:1.58}
.plan ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  color:var(--dim);font-size:15px;line-height:1.5}
.plan li .m{font-family:var(--mono);font-size:11px;color:var(--good)}
.plan li.not,.plan li.not .m{color:var(--faint)}
.plan .cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:6px;background:var(--ink);color:var(--paper);
  font-weight:600;font-size:14.5px}
.plan .cta:hover{background:var(--accent)}
.plan .cta--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.plan .cta--ghost:hover{background:none;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sec > .note{margin:16px 0 0;color:var(--faint);font-size:14px;line-height:1.6}

/* JetBrains Mono carries no Devanagari, so every Hindi kicker, tag and note was
   silently falling back to a system face. The site's whole type argument is that
   Hindi is a first language here, not an afterthought, so name the face. */
.kicker:lang(hi),.plan .tag:lang(hi),.layer .n:lang(hi),.companion .note:lang(hi){
  font-family:var(--deva);letter-spacing:.06em;text-transform:none}
/* Same reasoning for the three CJK marks in the method section. */
.layer .n :lang(zh),.layer .n :lang(ja),.layer .n :lang(ko){
  font-family:"Hiragino Sans","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  letter-spacing:.04em}

/* ----------------------------------------------------------------- waitlist */
.wl{display:grid;gap:22px;margin:4px 0 0;max-width:640px}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-field{border:0;padding:0;margin:0;display:grid;gap:10px}
.wl-field legend{padding:0;font-size:15px;font-weight:500;color:var(--ink)}
.wl-opts{display:flex;flex-wrap:wrap;gap:8px}
.wl-opts label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;padding:9px 14px;background:var(--raised);
  font-size:15px;color:var(--dim);transition:border-color .18s ease,color .18s ease}
.wl-opts label:hover{border-color:var(--line-strong);color:var(--ink)}
.wl-opts input{accent-color:var(--accent);margin:0}
.wl-opts label:has(input:checked){border-color:var(--accent);color:var(--ink)}
.wl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}
.wl-input{display:grid;gap:7px;font-size:15px;font-weight:500;color:var(--ink);min-width:0}
.wl-input input{font:inherit;font-weight:400;width:100%;padding:11px 13px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.wl-input input::placeholder{color:var(--faint)}
.wl-input input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.wl button[type="submit"]{justify-self:start;display:inline-flex;align-items:center;
  padding:12px 22px;border:0;border-radius:6px;background:var(--ink);color:var(--paper);
  font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer}
.wl button[type="submit"]:hover{background:var(--accent)}
.wl button[type="submit"]:disabled{opacity:.55;cursor:default}
.wl-status{margin:16px 0 0;font-size:15px;color:var(--ink);max-width:640px}
.wl-status a{color:var(--accent);font-weight:500}
@media (max-width:560px){ .wl-row{grid-template-columns:1fr} }