:root{
  --bg:#080C11; --deep:#0C1319; --glass:rgba(232,240,244,.055); --line:rgba(232,240,244,.1);
  --tx:#E8F0F4; --dim:#8A9BA6; --accent:#4FA8DE; --warm:#E4B363; --hot:#E0664B;
  --sans:'Instrument Sans',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* The wordmark only. e-Ukraine Head is the drawn face; Inter Tight is the
     fallback it was specified against, so the lockup holds either way. */
  --display:'e-Ukraine Head','Inter Tight',-apple-system,system-ui,sans-serif;
  --spring:cubic-bezier(.16,.8,.24,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);overflow-x:hidden}
body{color:var(--tx);font-family:var(--sans)}
a{color:var(--accent);text-decoration:none;transition:color .3s}
a:hover{color:var(--warm)}
::selection{background:rgba(79,168,222,.3)}

@keyframes vspin{to{transform:rotate(360deg)}}
@keyframes vspinr{to{transform:rotate(-360deg)}}
@keyframes vpulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
@keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes vdash{to{stroke-dashoffset:-1400}}
@keyframes vribbon{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- site-wide wind: fixed flow-field canvas above section backgrounds, below content ---- */
/* Turned down so the field reads as weather beyond the glass rather than as lines competing
   with the cards in front of it. Focus is not set here: wind.js splits the field into depth
   planes and blurs each by how far back it sits, so this is only the overall level. */
.wind{position:fixed;inset:0;z-index:1;pointer-events:none;display:block;width:100%;height:100%;
  opacity:.72}
/* Reading pages keep the same air, turned down further so it never competes with the text. */
.wind-quiet{opacity:.36}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;padding:18px 0}
/* Tint and blur ride on their own layer so both can fade out together. A backdrop-filter has a
   hard edge at its own box: text crossing the bottom of the bar snapped from blurred to sharp,
   which is what reads as the header flickering while you scroll. Masking the layer ends the
   blur gradually instead, and the content above it keeps its own stacking. */
.nav::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-30px;pointer-events:none;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  background:linear-gradient(180deg,rgba(8,12,17,.96) 0%,rgba(8,12,17,.95) 65%,rgba(8,12,17,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);
          mask-image:linear-gradient(180deg,#000 70%,transparent)}
.nav-logo{display:block;width:44px;height:44px;border-radius:11px;flex:none}
.nav-name{font:600 21px/24px var(--display);letter-spacing:-.015em;white-space:nowrap}
/* The i is typed dotless (U+0131) and its tittle is drawn, so the one warm
   mark in the name is the operating point — the same wheat a working fan is
   drawn in. Everything is in em, so the lockup survives any type size. */
.wm-i{position:relative;display:inline-block}
.wm-dot{position:absolute;left:50%;top:.1em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--warm)}
.sp{flex:1}
.nav-link{font:400 13px/18px var(--sans);color:var(--dim)}
.nav-link+.nav-link{margin-left:22px}
.nav-link:hover{color:var(--warm)}

/* ---- buttons ---- */
.btn{display:flex;align-items:center;cursor:pointer;
  transition:transform .4s var(--spring),background .3s,border-color .3s,color .3s}
.btn-solid{background:var(--tx);color:#06121A}
.btn-solid:hover{background:var(--warm);color:#06121A}
.btn-ghost{border:1px solid var(--line);color:var(--tx)}
.btn-ghost:hover{border-color:var(--accent);color:var(--tx)}
.btn-nav{margin-left:26px;height:34px;padding:0 18px;border-radius:9px;font:600 13px/1 var(--sans)}
.btn-hero{height:48px;padding:0 26px;gap:10px;border-radius:12px;font:600 15px/1 var(--sans)}
.btn-hero:hover{transform:translateY(-2px)}
.btn-price{height:48px;padding:0 22px;border-radius:12px;font:500 15px/1 var(--sans)}
.btn-cta{height:52px;padding:0 30px;border-radius:13px;font:600 16px/1 var(--sans)}
.btn-cta:hover{transform:translateY(-3px)}
.btn-cta-ghost{height:52px;padding:0 26px;border-radius:13px;font:500 16px/1 var(--sans)}

/* ---- reveal ---- */
[data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity 1.1s var(--spring),transform 1.1s var(--spring)}
[data-reveal="0"],[data-reveal="1"]{transition-duration:1.2s}
[data-reveal="1"]{transition-delay:.18s}

/* ---- hero ---- */
.hero{position:relative;min-height:880px;display:flex;align-items:center;overflow:hidden;padding:120px 0 80px}
.hero-fan{position:absolute;left:50%;top:44%;width:1500px;height:1500px;margin-left:-750px;margin-top:-750px;
  pointer-events:none;will-change:transform}
.hero-fan svg{display:block;width:100%;height:100%}
/* Both columns start on one line: the badge and the live card share a top edge rather than the
   shorter column floating in the middle of the taller one. */
.hero-grid{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:start}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.badge{display:flex;align-items:center;gap:10px;width:fit-content;height:30px;padding:0 14px;
  border-radius:15px;border:1px solid var(--line);background:var(--glass);
  font:400 12px/1 var(--mono);color:var(--dim)}
.badge b{width:6px;height:6px;border-radius:3px;background:var(--accent);display:block}
/* Sized so the longest localised headline still breaks where its <br> says, not mid-phrase. */
.hero-title{font:600 64px/68px var(--sans);letter-spacing:-.03em;text-wrap:balance}
.hero-sub{font:400 18px/28px var(--sans);color:var(--dim);max-width:520px;text-wrap:pretty}
.hero-ctas{display:flex;align-items:center;gap:14px;padding-top:6px}
.hero-note{font:400 13px/18px var(--sans);color:var(--dim)}
.hero-cards{display:flex;flex-direction:column;gap:16px}

/* ---- live card ---- */
/* No float on this one: it now sets the shared top edge, and a breathing edge is worse than a
   still card. The link card below it still drifts, so the hero has not stopped moving. */
.live-card{border-radius:18px;border:1px solid var(--line);
  background:rgba(12,19,25,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,.5);padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.live-head{display:flex;align-items:center;gap:10px}
.live-head b{font:600 14px/18px var(--sans)}
.live-state{height:24px;padding:0 10px;display:flex;align-items:center;border-radius:12px;
  background:rgba(228,179,99,.16);font:400 11px/1 var(--mono);color:var(--warm)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{display:flex;flex-direction:column;gap:3px}
.stat i{font:400 11px/14px var(--sans);color:var(--dim);font-style:normal}
.stat b{font:500 26px/30px var(--mono);font-weight:500;color:var(--tx);transition:color .5s}
.rule{height:1px;background:var(--line)}
.live-chart{display:block;width:100%;height:84px}
.legend{display:flex;gap:16px;font:400 11px/14px var(--sans);color:var(--dim)}
.link-card{animation:vfloat 11s ease-in-out infinite .8s;border-radius:16px;border:1px solid var(--line);
  background:rgba(232,240,244,.05);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:16px 18px;display:flex;align-items:center;gap:16px}
.link-fan{display:block;flex:none;animation:vspin 3.4s linear infinite;transform-origin:center}
.link-copy{flex:1;display:flex;flex-direction:column;gap:2px}
.link-copy b{font:500 13px/18px var(--sans);font-weight:500}
.link-copy span{font:400 12px/16px var(--sans);color:var(--dim)}

/* ---- x-ray ---- */
/* No rule across the top: the gradient starts on the hero's own colour, so the section arrives
   as a change of tone rather than as a drawn line. */
.xray{position:relative;padding:110px 0;
  background:linear-gradient(180deg,var(--bg),var(--deep))}
.xray-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.xray-head{display:flex;align-items:flex-end;gap:40px}
.xray-head-copy{flex:1;display:flex;flex-direction:column;gap:14px}
.eyebrow{font:400 12px/16px var(--mono);color:var(--accent);letter-spacing:.1em}
.section-title{font:600 46px/52px var(--sans);letter-spacing:-.02em;text-wrap:pretty}
.xray-lede{font:400 15px/24px var(--sans);color:var(--dim);max-width:420px;text-wrap:pretty}
.board{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:#080D12;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.board svg{display:block;width:100%;height:auto}

/* ---- features ---- */
.features{padding:110px 0;background:var(--deep)}
.features-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.features-title{font:600 46px/52px var(--sans);letter-spacing:-.02em;max-width:620px;text-wrap:pretty}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Glass tint over a dark base: the wind drifts behind these, so text needs a floor to sit on.
   No backdrop-filter here — blurring a live canvas re-runs for every card on every frame. */
.feature{border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(0deg,var(--glass),var(--glass)),rgba(10,16,21,.88);
  padding:26px 24px;
  display:flex;flex-direction:column;gap:14px;min-height:280px;
  transition:transform .5s var(--spring),border-color .5s}
.feature:hover{transform:translateY(-6px);border-color:rgba(79,168,222,.45)}
.feature-tag{font:400 11px/14px var(--mono);color:var(--accent);letter-spacing:.1em}
.feature-name{font:600 22px/28px var(--sans)}
.feature-body{font:400 14px/22px var(--sans);color:var(--dim);text-wrap:pretty}
.feature .sp{flex:1}
.feature svg{display:block;width:100%;height:80px}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line);padding-top:36px}
.number{display:flex;flex-direction:column;gap:6px}
.number b{font:500 34px/38px var(--mono);font-weight:500;color:var(--tx)}
.number span{font:400 13px/18px var(--sans);color:var(--dim);text-wrap:pretty}

/* ---- cool it down: the playable terminal ---- */
.cli{padding:110px 0;background:var(--deep)}
.cli-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column;gap:26px}
.cli-head{display:flex;flex-direction:column;gap:14px;max-width:620px}
.cli-lede{margin:0;font:400 16px/25px var(--sans);color:var(--dim);text-wrap:pretty}
/* The app on the left, a terminal on the right: a command typed in one moves the other, which
   is the only way to show what automation actually feels like. */
.cli-rig{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:22px;align-items:stretch}

.cli-app{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;
  border:1px solid var(--line);background:rgba(12,19,25,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.cli-app-head{display:flex;align-items:center;gap:10px;font:600 14px/18px var(--sans);color:var(--tx)}
.cli-pill{padding:4px 10px;border-radius:20px;background:rgba(228,179,99,.16);
  font:400 11px/1 var(--mono);color:var(--warm)}
.cli-readout{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cli-stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.cli-stat i{font:400 11px/14px var(--mono);color:var(--dim);font-style:normal;letter-spacing:.08em}
.cli-stat b{font:500 26px/30px var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}
.cli-chart{display:block;width:100%;height:132px}
.cli-goal-line{stroke:rgba(228,179,99,.5);stroke-width:1;stroke-dasharray:3 4}
.cli-legend{display:flex;gap:16px;font:400 11px/14px var(--sans);color:var(--dim)}
/* Two blowers that turn at whatever the fans are actually doing — the rate is the readout. */
.cli-blowers{display:flex;align-items:center;gap:10px}
.cli-imp{display:block;width:44px;height:44px;flex:none;color:var(--accent)}
.cli-imp g{transform-origin:50px 50px;animation:vspin 2.4s linear infinite}
.cli-goal{display:flex;align-items:baseline;gap:8px}
.cli-goal i{font:400 11px/14px var(--mono);color:var(--dim);font-style:normal;letter-spacing:.08em}
.cli-goal b{font:500 15px/18px var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}
.cli-track{height:3px;border-radius:2px;background:rgba(232,240,244,.09);overflow:hidden}
.cli-bar{height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .3s linear}

/* Terminal.app, because this is a Mac app and the window everyone already knows reads as real. */
.cli-term{display:flex;flex-direction:column;min-width:0;border-radius:12px;overflow:hidden;
  border:1px solid rgba(0,0,0,.55);background:#0A0D10;cursor:text;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.cli-term-bar{display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;flex:none;
  background:linear-gradient(180deg,#2C2F33,#232629);border-bottom:1px solid rgba(0,0,0,.6)}
.cli-dot{width:12px;height:12px;border-radius:6px;flex:none}
.cli-dot.is-r{background:#FF5F57}.cli-dot.is-y{background:#FEBC2E}.cli-dot.is-g{background:#28C840}
.cli-term-title{flex:1;text-align:center;margin-left:-54px;
  font:400 12px/16px var(--sans);color:#B8BFC6;white-space:nowrap;overflow:hidden}
.cli-out{flex:1;min-height:250px;max-height:340px;overflow-y:auto;padding:14px 16px;margin:0;
  font:400 12.5px/20px var(--mono);color:#C6D0D8}
.cli-line{white-space:pre-wrap;word-break:break-word}
.cli-line.is-cmd{color:#E8F0F4}
.cli-line.is-ok{color:#7EE787}
.cli-line.is-err{color:#FF7B72}
.cli-line.is-note{color:#E4B363}
.cli-line.is-help{color:#8A9BA6}
/* A terminal line, not a form field: the real input is invisible and laid over the row to take
   the keystrokes, a span echoes them, and the block after it is the only cursor anyone sees. */
.cli-form{position:relative;display:flex;align-items:center;gap:8px;flex:none;
  padding:0 16px 12px 16px;font:400 12.5px/20px var(--mono);cursor:text}
.cli-prompt{flex:none;color:#7EE787}
.cli-typed{display:flex;align-items:center;min-width:0;overflow:hidden}
.cli-echo{white-space:pre;color:#E8F0F4}
/* The cursor sits ON a character and inverts it, the way Terminal.app draws a block: hollow
   while the window is unfocused, and blinking between inverted and normal once it has focus.
   Blinking the colours rather than the opacity keeps the character under it readable. */
.cli-caret{flex:none;white-space:pre;color:#E8F0F4;
  box-shadow:inset 0 0 0 1px rgba(198,208,216,.5)}
.cli-form:focus-within .cli-caret{box-shadow:none;animation:cliBlink 1.06s step-end infinite}
@keyframes cliBlink{
  0%,49%{background:#C6D0D8;color:#0A0D10}
  50%,100%{background:transparent;color:#E8F0F4}
}
.cli-in{position:absolute;inset:0;width:100%;padding:0 16px 12px calc(16px + 3ch + 8px);margin:0;border:0;
  background:none;font:inherit;color:transparent;caret-color:transparent}
.cli-in:focus,.cli-in:focus-visible{outline:none}
.cli-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px 16px;flex:none}
.cli-chip{border:1px solid rgba(232,240,244,.14);border-radius:7px;background:none;cursor:pointer;
  padding:5px 9px;font:400 11.5px/15px var(--mono);color:#8A9BA6;
  transition:color .3s,border-color .3s,background .3s}
.cli-chip:hover{color:#E8F0F4;border-color:rgba(126,231,135,.5);background:rgba(126,231,135,.08)}

/* An author display value outranks the UA's [hidden], so the attribute needs saying again or
   the banner congratulates everyone the moment the page loads. */
.cli-win[hidden]{display:none}
.cli-win{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(79,168,222,.35);border-radius:14px;padding:16px 20px;
  font:400 14px/22px var(--sans);color:var(--tx);background:rgba(79,168,222,.07)}
.cli-note{font:400 12px/18px var(--mono);color:var(--dim)}
@media (max-width:960px){
  .cli-rig{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .cli{padding:80px 0}
  .cli-stat b{font:500 21px/25px var(--mono)}
  .cli-out{min-height:200px}
}

/* ---- faq ---- */
/* Same tone as the features above it: the 110px on either side is the separation. */
.faq{padding:110px 0;background:var(--deep)}
.faq-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:60px;align-items:start}
.faq-head{display:flex;flex-direction:column;gap:14px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(0deg,var(--glass),var(--glass)),rgba(10,16,21,.88);
  transition:border-color .5s}
.faq-item.open{border-color:rgba(79,168,222,.35)}
.faq-q{display:flex;align-items:center;gap:16px;width:100%;padding:20px 22px;margin:0;
  background:none;border:0;color:var(--tx);font:500 16px/22px var(--sans);text-align:left;cursor:pointer}
.faq-q svg{flex:none;color:var(--dim);transition:transform .5s var(--spring),color .5s}
.faq-item.open .faq-q svg{transform:rotate(45deg);color:var(--accent)}
.faq-a{height:0;overflow:hidden;transition:height .5s var(--spring),opacity .5s var(--spring);opacity:0}
.faq-item.open .faq-a{opacity:1}
.faq-a p{margin:0;padding:0 22px 20px 22px;font:400 14px/22px var(--sans);color:var(--dim);
  max-width:640px;text-wrap:pretty}

/* ---- pricing ---- */
.pricing{position:relative;padding:130px 0 110px;overflow:hidden;
  background:linear-gradient(180deg,var(--deep),#070B0F)}
/* Sits fully inside the section: hanging it above the edge let overflow:hidden slice the
   gradient while it was still opaque, which read as a straight line across the top. */
.pricing-glow{position:absolute;left:50%;top:0;width:900px;height:900px;margin-left:-450px;
  border-radius:450px;background:radial-gradient(circle,rgba(79,168,222,.16),rgba(8,12,17,0) 62%);
  pointer-events:none;animation:vpulse 9s ease-in-out infinite}
.pricing-inner{position:relative;z-index:2;max-width:880px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:22px;text-align:center}
.pricing-title{font:600 58px/62px var(--sans);letter-spacing:-.03em;text-wrap:pretty}
.pricing-sub{font:400 17px/26px var(--sans);color:var(--dim);max-width:560px;text-wrap:pretty}
.pricing-ctas{display:flex;align-items:center;gap:14px;padding-top:10px}
.pricing-meta{font:400 12px/16px var(--mono);color:var(--dim);padding-top:8px}

/* ---- footer ---- */
.footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:34px 40px;
  display:flex;align-items:center;gap:16px;max-width:1180px;margin:0 auto}
.footer span{font:400 12px/16px var(--sans);color:var(--dim)}
.footer a{font:400 12px/16px var(--sans);color:var(--dim)}
.footer a+a{margin-left:20px}
.footer a:hover{color:var(--warm)}

@media (max-width:960px){
  .hero{min-height:0;padding:130px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-title{font:600 46px/50px var(--sans);letter-spacing:-.03em}
  .xray,.features{padding:80px 0}
  .faq{padding:80px 0}
  .faq-inner{grid-template-columns:1fr;gap:28px}
  .pricing{padding:100px 0 80px}
  .xray-head{flex-direction:column;align-items:flex-start;gap:18px}
  .feature-grid{grid-template-columns:1fr}
  .feature{min-height:0}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .pricing-title{font:600 40px/44px var(--sans);letter-spacing:-.03em}
  .section-title,.features-title{font:600 34px/40px var(--sans);letter-spacing:-.02em}
}
@media (max-width:640px){
  /* The footer is one flex row on desktop; on a phone the brand line gets crushed to one word
     per line, so it stacks and the links wrap as their own row. */
  /* Everything centres on a phone: brand, tagline, then the links as one centred wrapped row. */
  .footer{flex-wrap:wrap;justify-content:center;text-align:center;row-gap:14px;padding:32px 0}
  .footer-brand{flex:1 0 100%;justify-content:center}
  .footer-tag{flex:1 0 100%}
  .footer .sp{display:none}
  .footer>a:not(.footer-brand){flex:0 0 auto;margin:0 11px}
  .footer a+a{margin-left:11px}

  /* The nav must fit a narrow phone with long localised labels: the download label and the
     language name together ran a hair wider than the gutter allowed, so the picker was clipped. */
  .nav-inner{gap:10px;min-width:0}
  .btn-nav{margin-left:0;padding:0 14px;font-size:12px}
  .lang{margin-left:0;min-width:0}
  .lang-current{max-width:112px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    display:inline-flex;padding:0 10px}
  .nav{padding:14px 0}
  .nav-logo{width:36px;height:36px;border-radius:9px}
  .nav-name{font-size:18px;line-height:22px}
  .nav-link{display:none}
  .hero-ctas{flex-wrap:wrap}
  /* Wrapped buttons in a centred section should stay centred, and match each other's width. */
  .pricing-ctas{flex-wrap:wrap;justify-content:center}
  .pricing-ctas .btn{flex:1 1 240px;justify-content:center;max-width:320px}
}

/* Motion collapses to instant changes under Reduce Motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---- document pages (privacy, support) ---- */
.doc{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:150px 40px 90px}
.doc-back{display:inline-flex;align-items:center;gap:8px;font:400 13px/16px var(--mono);color:var(--dim)}
.doc-back:hover{color:var(--warm)}
.doc h1{font:600 52px/56px var(--sans);letter-spacing:-.03em;margin:22px 0 14px;text-wrap:pretty}
.doc-lede{font:400 17px/27px var(--sans);color:var(--dim);margin:0 0 10px;text-wrap:pretty}
.doc-stamp{font:400 12px/16px var(--mono);color:var(--dim);opacity:.8}
.doc section{margin-top:44px}
.doc h2{font:600 22px/28px var(--sans);letter-spacing:-.01em;margin:0 0 12px}
.doc h3{font:500 16px/22px var(--sans);margin:26px 0 8px}
.doc p,.doc li{font:400 15px/25px var(--sans);color:var(--dim);text-wrap:pretty}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:20px}
.doc li{margin:0 0 8px}
.doc li::marker{color:var(--accent)}
.doc strong{color:var(--tx);font-weight:500}
.doc code{font:400 13px/1.5 var(--mono);color:var(--warm);
  background:rgba(228,179,99,.1);border-radius:5px;padding:2px 6px}
.doc-note{border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:12px;
  background:rgba(10,16,21,.88);padding:18px 20px;margin:0 0 12px}
.doc-note p:last-child{margin:0}
.doc-rule{height:1px;background:var(--line);margin:44px 0 0}
@media (max-width:960px){
  .doc{padding:110px 24px 70px}
  .doc h1{font:600 36px/40px var(--sans);letter-spacing:-.02em}
}

/* ---- pricing page ---- */
.tiers-page{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:150px 40px 90px}
.tiers-page h1{font:600 52px/56px var(--sans);letter-spacing:-.03em;margin:22px 0 14px;text-wrap:pretty}
.tiers-page .doc-lede{max-width:560px}
.tiers-error{font:400 14px/22px var(--sans);color:var(--hot);border:1px solid rgba(224,102,75,.35);
  border-radius:12px;background:rgba(224,102,75,.08);padding:14px 18px;margin:20px 0 0;max-width:640px}

/* The period switch slides; it never cuts from one state to the other. */
.cycle{position:relative;display:inline-flex;margin:32px 0 34px;padding:4px;
  border:1px solid var(--line);border-radius:13px;background:rgba(10,16,21,.6)}
.cycle-thumb{position:absolute;top:4px;left:4px;width:104px;height:36px;border-radius:10px;
  background:var(--glass);border:1px solid rgba(79,168,222,.35);
  transition:transform .5s var(--spring)}
.cycle[data-on="year"] .cycle-thumb{transform:translateX(104px)}
.cycle-opt{position:relative;z-index:1;width:104px;height:36px;border:0;background:transparent;
  cursor:pointer;font:500 13px/1 var(--sans);color:var(--dim);border-radius:10px;
  transition:color .4s var(--spring)}
.cycle-opt.is-on{color:var(--tx)}
.cycle-opt:hover{color:var(--tx)}
.cycle-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tier{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:18px;
  border:1px solid var(--line);background:rgba(10,16,21,.72);
  transition:transform .5s var(--spring),border-color .4s var(--spring)}
.tier:hover{transform:translateY(-4px);border-color:rgba(79,168,222,.35)}
.tier-featured{border-color:rgba(79,168,222,.45);background:rgba(12,19,25,.85)}
.tier-head{display:flex;flex-direction:column;gap:5px}
.tier-name{font:600 22px/28px var(--sans)}
.tier-desc{font:400 13px/20px var(--sans);color:var(--dim);text-wrap:pretty}
.tier-rule{height:1px;background:var(--line);margin:2px 0 0}
/* Price and its qualifier sit on one baseline, the way a price tag reads. */
.tier-price{display:flex;align-items:baseline;gap:11px;min-height:46px}
.tier-amount{font:500 34px/40px var(--mono);color:var(--tx);font-variant-numeric:tabular-nums;
  transition:opacity .17s var(--spring),transform .17s var(--spring)}
.tier-amount.is-swapping{opacity:0;transform:translateY(-6px)}
.tier-qual{font:400 12px/17px var(--sans);color:var(--dim);max-width:150px;text-wrap:pretty}

/* Each feature is a claim plus the sentence that makes it concrete — a bare bullet list
   makes the reader guess what "custom presets" actually means. */
.tier-features{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.tier-features li{position:relative;padding-left:23px}
.tier-features li::before{content:"\2713";position:absolute;left:1px;top:0;
  font:600 12px/19px var(--sans);color:var(--accent)}
.tier-features li b{display:block;font:500 13px/19px var(--sans);color:var(--tx);
  font-weight:500;margin:0 0 3px;text-wrap:pretty}
.tier-features li span{display:block;font:400 12px/18px var(--sans);color:var(--dim);text-wrap:pretty}

/* Anything that qualifies the purchase rather than describing it lives below a divider,
   so it reads as a choice the buyer gets to make rather than fine print. */
.tier-foot{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.tier-foot b{display:block;font:500 12px/18px var(--sans);color:var(--warm);margin:0 0 3px}
.tier-foot span{display:block;font:400 12px/18px var(--sans);color:var(--dim);text-wrap:pretty}
.tier-cta{-webkit-appearance:none;appearance:none;justify-content:center;width:100%;height:46px;
  padding:0 20px;border-radius:12px;font:600 14px/1 var(--sans);margin-top:4px}
.tier-cta.btn-solid{border:0}
.tier-cta.btn-ghost{background:transparent}
.tier-cta:hover:not(:disabled){transform:translateY(-2px)}
.tier-cta:disabled{opacity:.4;cursor:default;transform:none}
.tiers-locale{font:400 12px/18px var(--mono);color:var(--dim);margin:26px 0 34px}
.tiers-foot{max-width:none}   /* spans the content column, like the tier grid above */

/* ---- welcome ---- */
.welcome-fan{display:block;animation:vspin 9s linear infinite;transform-origin:center;margin:0 0 8px}
.welcome-cta{display:inline-flex;width:fit-content;margin-top:6px}

@media (max-width:960px){
  .tiers-page{padding:110px 24px 70px}
  .tiers-page h1{font:600 36px/40px var(--sans);letter-spacing:-.02em}
  .tier-grid{grid-template-columns:1fr}
}

/* ---- semantics added for SEO: headings keep their visual weight, links stay reachable ---- */
.feature-name{margin:0}
.faq-qt{margin:0;font:inherit;color:inherit}
.skip-link{position:absolute;left:-9999px;top:0;z-index:40;padding:12px 18px;border-radius:0 0 10px 0;
  background:var(--tx);color:#06121A;font:600 13px/1 var(--sans)}
.skip-link:focus{left:0;color:#06121A}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- licence key card (welcome page) ---- */
.lic{border:1px solid var(--line);border-radius:14px;background:rgba(10,16,21,.88);
  padding:18px 20px;margin:0 0 20px;transition:border-color .5s var(--spring)}
.lic b{display:block;font:600 15px/22px var(--sans);color:var(--tx);margin:0 0 6px}
.lic p{font:400 13px/21px var(--sans);color:var(--dim);margin:0;text-wrap:pretty}
.lic-wait{border-color:rgba(79,168,222,.3)}
.lic-wait b::after{content:'';display:inline-block;width:6px;height:6px;margin-left:8px;
  border-radius:3px;background:var(--accent);animation:vpulse 1.4s ease-in-out infinite}
.lic-ok{border-color:rgba(228,179,99,.45)}
.lic-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 12px}
.lic-key code{font:500 17px/26px var(--mono);color:var(--warm);letter-spacing:.04em;
  background:rgba(228,179,99,.09);border:1px solid rgba(228,179,99,.25);
  border-radius:9px;padding:7px 13px;user-select:all}
.lic-key button{cursor:pointer;background:transparent;color:var(--tx);
  border:1px solid var(--line);border-radius:9px;font:500 12px/1 var(--sans);padding:9px 14px;
  transition:border-color .3s,color .3s}
.lic-key button:hover{border-color:var(--accent)}

/* ---- Safari cost control ----
   Decorative animation idles while scrolled away, and the X-ray gets its own layer so its
   inner motion never re-paints the board's large drop shadow. */
.anim-paused,
.anim-paused *{animation-play-state:paused!important}
.board svg{transform:translateZ(0)}
.hero-fan svg{transform:translateZ(0)}

/* ---- one gutter for the whole site ----
   Header and page content share a single 1180px grid, so the logo lines up with the headline
   and the Download button lines up with the right edge of the content on every page. */
.nav-inner{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.nav-inner,.hero-grid,.xray-inner,.features-inner,.faq-inner,.pricing-inner,.footer,.tiers-page,.doc{
  width:100%;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px}
.nav-inner{max-width:1180px}
.nav-home{display:flex;align-items:center;gap:14px;color:var(--tx);text-decoration:none}
.nav-home:hover{color:var(--tx)}
.nav-home:hover .nav-logo{opacity:.85}
.nav-logo{transition:opacity .3s}
@media (max-width:960px){
  .nav-inner,.hero-grid,.xray-inner,.features-inner,.faq-inner,.pricing-inner,.footer,.tiers-page,.doc{
    padding-left:24px;padding-right:24px}
}

/* ---- real app screenshots: alternating rows, the shot floating rather than boxed in ---- */
.rows{display:flex;flex-direction:column;gap:108px;margin-top:52px}
.row{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center}
.row-copy{display:flex;flex-direction:column;gap:14px}
.row-copy h3{font:600 34px/40px var(--sans);letter-spacing:-.02em;margin:0;text-wrap:pretty}
.row-copy p{font:400 16px/26px var(--sans);color:var(--dim);margin:0;max-width:46ch;text-wrap:pretty}
.row-meta{font:400 12px/18px var(--mono);color:var(--dim);opacity:.75;padding-top:2px}
/* The shots carry their own rounded panels and transparency, so no frame is added — the shadow
   follows the artwork's shape rather than a rectangle around it. */
.row-shot img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.6))}
.row.flip .row-copy{order:2}
.row.flip .row-shot{order:1}
@media (max-width:960px){
  .rows{gap:72px;margin-top:36px}
  .row{grid-template-columns:1fr;gap:26px}
  .row-copy h3{font:600 27px/32px var(--sans);letter-spacing:-.02em}
  .row.flip .row-copy,.row.flip .row-shot{order:0}
}

/* ---- card plot wells: the same furniture as the app's curve editor ---- */
.feature .mini{height:auto;aspect-ratio:260 / 96}   /* fills the card, no letterboxing */

/* ---- Homebrew install line ---- */
.brew{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:4px}
.pricing-inner .brew{align-items:center}
.brew-label{font:400 12px/16px var(--mono);color:var(--dim);letter-spacing:.02em}
.brew-cmd{display:inline-flex;align-items:center;gap:12px;padding:9px 12px 9px 14px;margin:0;
  border:1px solid var(--line);border-radius:10px;background:rgba(232,240,244,.04);cursor:pointer;
  transition:border-color .4s,background .4s}
.brew-cmd:hover{border-color:rgba(79,168,222,.45);background:rgba(232,240,244,.07)}
.brew-cmd code{font:400 12.5px/1 var(--mono);color:var(--tx);background:none;padding:0}
.brew-copy{font:400 10px/1 var(--mono);color:var(--dim);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;border-radius:6px;background:rgba(232,240,244,.07)}
.brew-cmd.is-copied .brew-copy{color:var(--accent)}
@media (max-width:640px){ .brew-cmd code{font-size:11px} }

/* The notch widget is shown on its desktop, so it reads as a framed rectangle unlike the
   transparent panels above it. */
.row:last-child .row-shot img{border-radius:12px;border:1px solid var(--line)}

/* Terms acknowledged where the money is, not buried in a footer. */
.tiers-terms{font:400 12px/20px var(--sans);color:var(--dim);margin:22px 0 0;max-width:620px;text-wrap:pretty}
.tiers-terms a{color:var(--accent)}
.tiers-terms a:hover{color:var(--warm)}

/* ---- language picker ----
   A <details> dropdown: closed it is one quiet control; open it is a panel over the page,
   never inline text pushing the nav around. */
.lang{position:relative;margin-left:18px;flex:none}
.lang-current{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--glass);cursor:pointer;list-style:none;
  font:400 13px/1 var(--sans);color:var(--dim);white-space:nowrap;
  transition:border-color .3s,color .3s,background .3s}
.lang-current::-webkit-details-marker{display:none}
.lang-current::marker{content:''}
.lang-current::after{content:'';width:5px;height:5px;margin-top:-3px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .4s var(--spring)}
.lang-current:hover{color:var(--tx);border-color:rgba(79,168,222,.4)}
.lang[open] .lang-current{color:var(--tx);border-color:rgba(79,168,222,.45)}
.lang[open] .lang-current::after{transform:rotate(-135deg);margin-top:2px}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:30;
  display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:2px;padding:8px;
  border-radius:14px;border:1px solid var(--line);background:rgba(10,16,21,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  animation:langIn .32s var(--spring) both}
@keyframes langIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.lang-option{display:block;padding:8px 12px;border-radius:8px;white-space:nowrap;
  font:400 13px/1.3 var(--sans);color:var(--dim);transition:background .25s,color .25s}
.lang-option:hover{background:rgba(232,240,244,.07);color:var(--tx)}
.lang-option.is-current{color:var(--tx);background:rgba(79,168,222,.14)}
@media (max-width:640px){
  .lang{margin-left:12px}
  .lang-current{height:30px;padding:0 10px;font-size:12px}
  .lang-menu{grid-template-columns:repeat(2,minmax(112px,1fr));padding:6px;
    right:-8px;max-height:60vh;overflow-y:auto}
  .lang-option{padding:7px 9px;font-size:12px}
}

/* ---- footer brand: the mark and the drawn wordmark, not the name as plain text ---- */
.footer-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--tx);flex:none}
.footer-brand:hover{color:var(--tx)}
.footer-brand .nav-name{font-size:17px;line-height:20px}
.footer-logo{display:block;border-radius:7px;flex:none;transition:opacity .3s}
.footer-brand:hover .footer-logo{opacity:.85}
.footer-tag{font:400 12px/16px var(--sans);color:var(--dim)}

/* Very narrow screens: the language name gives way to a globe, which never overflows however
   long "Português (Brasil)" or "Bahasa Indonesia" happens to be. */
@media (max-width:430px){
  .lang-current{max-width:none;font-size:0;gap:6px;padding:0 9px}
  .lang-current::before{content:'';width:15px;height:15px;flex:none;opacity:.85;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9BA6' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18'/%3E%3C/svg%3E")}
  .lang-menu{right:-6px;grid-template-columns:repeat(2,minmax(104px,1fr))}
}