/* The features page and the guide: the same look as the home page (black, white type, Newsreader for the big lines and
   Geist for the rest, nothing smaller than 18px, no labels above headings), with lilac from the flower for the few
   things that need marking: "Early", "Windows only", the current place in the guide. */
:root{
  --bg:#000;
  --fg:#fff;
  --dim:rgba(255,255,255,.74);
  --hint:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.4);
  --panel:rgba(255,255,255,.04);
  --lilac:#c3b4f5;
  --lilac-line:rgba(195,180,245,.45);
  --font:"Geist","Segoe UI",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gutter:clamp(20px,4vw,56px);
  --text:clamp(19px,1.35vw,21px);
  --small:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--text)/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-10000px;top:0}
.skip:focus{left:var(--gutter);top:12px;z-index:20;background:var(--fg);color:#000;padding:10px 16px;border-radius:8px}

/* The bar across the top: her name, the two pages, and the waitlist. */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.scrolled{border-bottom-color:var(--line)}
.mark{font-family:var(--serif);font-size:clamp(28px,2.4vw,34px);font-weight:500;letter-spacing:-.01em;text-decoration:none;line-height:1}
.links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.links a{text-decoration:none;color:var(--dim);font-size:var(--small);transition:color .2s}
.links a:hover,.links a[aria-current="page"]{color:var(--fg)}
.links .join{color:#000;background:var(--fg);padding:10px 20px;border-radius:999px;font-weight:500}
.links .join:hover{color:#000;background:#e9e9e9}
@media (max-width:560px){.links{gap:14px}.links .join{display:none}}
/* Phones: the bar keeps Features, Pricing and Account; the guide is in every footer. */
@media (max-width:430px){.links a[href="/guide"]{display:none}}
@media (max-width:350px){.links{gap:10px}}

/* Type. */
h1,h2,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(46px,6vw,96px);line-height:1.02;margin:0}
h2{font-size:clamp(34px,3.6vw,56px);line-height:1.08;margin:0}
h3{font-family:var(--font);font-weight:500;font-size:clamp(22px,1.7vw,26px);line-height:1.3;letter-spacing:-.01em;margin:0}
p{margin:0}
.lede{color:var(--dim);font-size:clamp(21px,1.7vw,26px);line-height:1.5;max-width:34em;text-wrap:pretty}
code,kbd{font-family:var(--mono);font-size:max(var(--small),.92em)}
code{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.05em .35em}
kbd{border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;padding:.02em .4em}

/* Labels after a name: Early, Windows only. Same size as the text around them. */
.label{display:inline-block;vertical-align:.12em;margin-left:.45em;padding:.08em .6em;border:1px solid var(--lilac-line);border-radius:999px;color:var(--lilac);font:500 var(--small)/1.35 var(--font);letter-spacing:0;white-space:nowrap}
.label.plain{border-color:var(--line-strong);color:var(--dim)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 28px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:500 var(--text)/1 var(--font);text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.btn:hover{background:rgba(255,255,255,.08);border-color:var(--fg)}
.btn.solid{background:var(--fg);color:#000;border-color:var(--fg)}
.btn.solid:hover{background:#e9e9e9}

/* Headings decoding out of scrambled characters (scramble.js), as on the home page. */
.sw-word{white-space:nowrap}
.sc{position:relative}
.sc.hid,.sc.scr{color:transparent}
.sc.scr::after{content:attr(data-g);position:absolute;left:0;top:0;color:var(--dim)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.seen{opacity:1;transform:none}

.foot{border-top:1px solid var(--line);margin-top:clamp(60px,10vh,120px);padding:40px var(--gutter) 56px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;color:var(--hint);font-size:var(--small)}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* Her flower's box (features, the guide): a still of her flower (flower-still.webp) only where the live one can't run:
   no JavaScript, or pages.js found no WebGL or a graphics driver that draws nothing (.still). */
html:not(.js) .bloom-box,.bloom-box.still{background:url(/flower-still.webp?v=1) center bottom/contain no-repeat}