/* Mightlings — marketing site.
   Direction and reference lock: docs/website-direction.md. Palette: brand/README.md.
   Motion tiers and curves are the app's own, from src/motion.js, so a reveal here runs at the same
   speed as the chrome dissolving in the app. Nothing on this page makes a third-party request. */

@font-face{
  font-family:"Inter Variable"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Variable"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Scene, from the app's own backdrop. */
  --ground:#020906; --ground-2:#010604; --raise:rgba(255,255,255,.012);
  /* Chrome, from the app's :root. Roles preserved: --primary fills a capsule and nothing else. */
  --text:#E4E3FA; --text-2:#B9B7EE; --text-3:#8F8DD6;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.22);
  --primary:#7472C4; --primary-hover:#7E7CCB; --primary-label:#F0EFFF;
  --sheet:#4C4BA1;
  /* Reflect Notes' move, borrowed narrowly: lift a surface with an inset glow, never a drop shadow. */
  --inset:inset 0 0 24px 0 rgba(255,255,255,.04);

  /* Motion. Tiers and curves transcribed from src/motion.js so the site and the app move alike. */
  --answer:.32s; --press:.12s; --change:.7s; --ambient:1.6s;
  --arrive:cubic-bezier(.165,.84,.44,1);   /* power3.out  — anything appearing */
  --depart:cubic-bezier(.55,.085,.68,.53); /* power2.in   — anything leaving */
  --travel:cubic-bezier(.645,.045,.355,1); /* power3.inOut— a glide across */
  --smooth:cubic-bezier(.445,.05,.55,.95); /* sine.inOut  — opacity-only */

  --rhythm:104px; --gutter:20px; --measure:62ch;
  color-scheme:dark;
}
@media (max-width:760px){ :root{ --rhythm:68px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--text);
  font:400 17px/1.55 "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

.wrap{width:100%; max-width:1080px; margin:0 auto; padding-inline:var(--gutter)}
/* Both references centre their content blocks. The block is centred; the prose inside stays left-aligned,
   because centred body copy at 62ch is harder to read than it is handsome. */
.narrow{max-width:var(--measure); margin-inline:auto}

/* ---- Nav: Chantlings keeps it in the corners and never sticks it to the top. ---- */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:26px}
.brand{display:flex; align-items:center; gap:11px; color:var(--text); text-decoration:none; font-weight:600; letter-spacing:-.01em; font-size:17px}
.brand svg{width:26px; height:26px; overflow:visible; flex:none}
.langs{display:flex; align-items:center; gap:2px; font-size:14px}
.langs a{
  color:var(--text-3); text-decoration:none; padding:7px 12px; border-radius:999px;
  transition:color var(--answer) var(--smooth), background var(--answer) var(--smooth);
}
.langs a:hover{color:var(--text)}
.langs a[aria-current="true"]{color:var(--text); background:rgba(255,255,255,.08)}

/* ---- Hero: Drepute's move — one full-bleed nocturnal plate, centred type over it. ---- */
.hero{position:relative; min-height:clamp(520px,78vh,760px); display:grid; place-items:center; text-align:center; overflow:hidden}
.hero-art{position:absolute; inset:-8% 0 0; z-index:0; pointer-events:none}
.hero-art img{width:100%; height:116%; object-fit:cover; object-position:50% 45%; display:block}
/* Light enough that the plate is actually a forest. The contrast gate in tools/build-hero.mjs measured the body
   copy at 8.92:1 over the bare plate, so there is room to give the art back most of its range and still clear AA. */
.hero-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(2,9,6,.30) 0%, rgba(2,9,6,.02) 30%, rgba(2,9,6,.80) 84%, var(--ground) 100%);
}
.hero-inner{position:relative; z-index:1; padding-block:56px}
h1{
  margin:0 0 20px; font-weight:600; letter-spacing:-.024em; line-height:1.06;
  font-size:clamp(36px,7.2vw,70px); text-wrap:balance;
}
.hero p{margin:0 auto 32px; max-width:46ch; color:var(--text-2); font-size:clamp(17px,2.1vw,20px); text-wrap:pretty}

.cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px;
  font-size:16px; font-weight:500; text-decoration:none; border:1px solid var(--line-2); color:var(--text);
  background:transparent; transition:border-color var(--answer) var(--smooth), background var(--answer) var(--smooth), transform var(--press) var(--arrive);
}
.btn:hover{border-color:var(--text-3); background:rgba(255,255,255,.05)}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--primary); border-color:var(--primary); color:var(--primary-label); font-weight:600}
.btn.primary:hover{background:var(--primary-hover); border-color:var(--primary-hover)}
.btn small{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:400}
.btn.primary small{color:rgba(240,239,255,.7)}

/* ---- Sections: Chantlings' 100px rhythm, one idea each. Half the rhythm on each side, so the gap
   BETWEEN two sections is one rhythm rather than two — padding-block:var(--rhythm) doubled it to 208px. ---- */
section{padding-block:calc(var(--rhythm) / 2)}
main > section:first-child{padding-top:calc(var(--rhythm) * .75)}
.eyebrow{
  margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
h2{margin:0 0 18px; font-weight:600; letter-spacing:-.018em; line-height:1.14; font-size:clamp(26px,4.2vw,40px); text-wrap:balance}
h3{margin:0 0 8px; font-weight:600; font-size:19px; letter-spacing:-.01em}
p{margin:0 0 18px; color:var(--text-2); text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{color:var(--text); font-weight:600}
a.inline{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:border-color var(--answer) var(--smooth)}
a.inline:hover{border-color:var(--text)}

/* ---- Friends: the only product imagery, and it is a real capture, never an illustration. ---- */
/* Capped: at full width these phone captures ran taller than the viewport and took over the page. The direction
   lock says imagery here is atmospheric, not the subject. */
.friends{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,5vw,64px); align-items:start;
  max-width:700px; margin-inline:auto}
@media (max-width:700px){ .friends{grid-template-columns:1fr; gap:48px; max-width:300px} }
.friend img{width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--line); box-shadow:var(--inset)}
.friend .cap{margin-top:16px}
.friend .cap p{font-size:16px}

/* ---- Behaviour: a plain list. The direction lock rejects an icons-in-circles grid. ---- */
.plain{list-style:none; margin:0 auto; padding:0; display:grid; gap:2px; max-width:var(--measure)}
.plain li{
  padding:15px 2px; border-top:1px solid var(--line); color:var(--text-2); font-size:16.5px;
  display:flex; gap:14px; align-items:baseline;
}
.plain li:last-child{border-bottom:1px solid var(--line)}
.plain b{color:var(--text); font-weight:600; flex:none; min-width:11.5ch}
@media (max-width:520px){ .plain li{flex-direction:column; gap:4px} .plain b{min-width:0} }

/* ---- The honesty section. product-copy-and-claims.md: "the most persuasive thing on the page". ---- */
.claims{border-left:2px solid var(--primary); padding:4px 0 4px 26px; max-width:var(--measure); margin-inline:auto}
.claims p{font-size:18px}
@media (max-width:560px){ .claims{padding-left:18px} }

footer{padding-block:56px var(--rhythm); border-top:1px solid var(--line); color:var(--text-3); font-size:14.5px}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 20px; padding:0; list-style:none}
.foot-links a{color:var(--text-2); text-decoration:none; transition:color var(--answer) var(--smooth)}
.foot-links a:hover{color:var(--text)}
.foot-note{margin:0; max-width:64ch}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--text-2); outline-offset:3px; border-radius:6px}

/* ---- The orb: the app's own mark, drawn by site.js. The site's only ambient motion. ---- */
.orb{overflow:visible; fill:none; stroke:rgba(255,255,255,.8); stroke-width:.6; stroke-linecap:round; stroke-linejoin:round}
.orb .arc-back{stroke-opacity:.16; stroke-width:.45}
.orb .arc-front{stroke-opacity:.8}
.orb .dot{fill:#fff; stroke:none}
.orb .core{fill:rgba(255,255,255,.95); stroke:none; transform-origin:14px 14px; animation:breathe 6s cubic-bezier(.25,.1,.25,1) infinite}
@keyframes breathe{0%,100%{transform:scale(.8); opacity:.7} 50%{transform:scale(1.3); opacity:1}}

/* ---- Reveal: ambient tier, and only ever applied once JS is present, so no-JS sees everything. ---- */
.js-reveal .reveal{opacity:0; transform:translateY(14px)}
.js-reveal .reveal.seen{
  opacity:1; transform:none;
  transition:opacity var(--ambient) var(--smooth), transform var(--change) var(--arrive);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){ .js-reveal .reveal{opacity:1; transform:none} }

/* ---- Document pages: design notes, privacy, terms, support. Long-form, one column, reference-heavy. ---- */
.doc{max-width:72ch; margin-inline:auto}
.doc h2{margin-top:0}
.doc > section{padding-block:calc(var(--rhythm) / 2) 0}
.doc h3{margin:34px 0 10px; font-size:20px}
.doc h4{margin:24px 0 6px; font-size:16px; font-weight:600; color:var(--text)}
.doc p,.doc li{font-size:16.5px}
.doc ul{padding-left:20px; margin:0 0 18px}
.doc li{margin-bottom:8px; color:var(--text-2)}
.lede-lg{font-size:19px; color:var(--text-2); max-width:60ch}

/* Evidence labels, taken from the review's own four-state table so the page and the research agree. */
.ev{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; border:1px solid var(--line-2); color:var(--text-3); white-space:nowrap;
  vertical-align:2px; margin-left:8px}
.ev.supported{color:#8FD6B4; border-color:rgba(143,214,180,.45)}
.ev.promising{color:#C9C7F5; border-color:rgba(201,199,245,.45)}
.ev.indirect{color:#B9B7EE; border-color:var(--line-2)}
.ev.untested{color:#E7C878; border-color:rgba(231,200,120,.45)}
.ev-key{display:grid; gap:12px; margin:0 0 8px; padding:0; list-style:none}
.ev-key li{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin:0}
.ev-key .ev{margin-left:0; min-width:96px; text-align:center}

/* A wide table scrolls in its own box rather than pushing the page sideways. */
.scroll{overflow-x:auto; margin:0 0 20px}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
th,td{text-align:left; padding:11px 16px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2)}
th{color:var(--text-3); font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600}
td:first-child{color:var(--text)}

blockquote{margin:0 0 20px; padding:2px 0 2px 22px; border-left:2px solid var(--line-2)}
blockquote p{color:var(--text); font-size:17.5px}
blockquote cite{display:block; margin-top:8px; font-style:normal; font-size:14px; color:var(--text-3)}

/* References: numbered, hanging, and every entry states its own limitation. */
.refs{counter-reset:ref; list-style:none; padding:0; margin:0}
.refs li{counter-increment:ref; position:relative; padding-left:38px; margin-bottom:18px; font-size:15px; color:var(--text-2)}
.refs li::before{content:counter(ref); position:absolute; left:0; top:1px; width:26px; text-align:right;
  font-size:13px; color:var(--text-3); font-variant-numeric:tabular-nums}
.refs a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-2)}
.refs a:hover{border-color:var(--text)}
.refs .limit{display:block; margin-top:4px; color:var(--text-3); font-size:14px}