@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#07101d;--ink2:#0b1727;--panel:#0e1d2e;--line:#243448;--paper:#f3efe4;--muted:#9aa8b9;--amber:#ffbd59;--amber2:#f48d3e;--blue:#6aa8ff;--danger:#ff7b6e;--ok:#70d7a5;--radius:20px;color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:var(--ink);color:var(--paper)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,#112b4f 0,transparent 31rem),var(--ink);line-height:1.55}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.skip{position:fixed;left:1rem;top:-5rem;background:var(--paper);color:var(--ink);padding:.7rem 1rem;z-index:99}.skip:focus{top:1rem}.site-head{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,5vw,5rem);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;background:rgba(7,16,29,.86);backdrop-filter:blur(18px);z-index:20}.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:-.03em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--amber);border-radius:50%;font:600 .76rem Fraunces;color:var(--amber)}.site-head nav{display:flex;gap:2rem;color:#c2cad5;font-size:.88rem}.site-head nav a:hover,.site-head nav a:focus-visible{color:var(--amber)}.lang,.text-button{border:0;background:transparent;color:var(--paper);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.hero{min-height:calc(100svh - 74px);display:grid;grid-template-columns:minmax(310px,.83fr) minmax(420px,1.17fr);align-items:center;gap:clamp(2rem,4vw,5rem);padding:clamp(3rem,7vw,8rem) clamp(1.2rem,5vw,5rem);overflow:hidden}.hero-copy{position:relative;z-index:2;max-width:720px}.eyebrow,.step{font-size:.72rem;font-weight:700;letter-spacing:.19em;color:var(--amber)}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 6px rgba(255,189,89,.12);margin-right:.8rem}h1,h2{font-family:Fraunces,Georgia,serif;line-height:.98;letter-spacing:-.045em;margin:.45rem 0 1.4rem}h1{font-size:clamp(4rem,7.5vw,8.5rem);max-width:8ch}h2{font-size:clamp(2.6rem,5vw,5.3rem)}h3{line-height:1.2}.lede{font-size:clamp(1rem,1.3vw,1.25rem);color:#c4ceda;max-width:620px}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;padding:.8rem 1.35rem;border:1px solid var(--line);font-weight:700;cursor:pointer}.button.primary{background:var(--amber);border-color:var(--amber);color:#231508;box-shadow:0 10px 35px rgba(244,141,62,.18)}.button.primary:hover{background:#ffd18b}.button.ghost{background:rgba(255,255,255,.03)}.honesty{font-size:.78rem;color:var(--muted)}.hero-media{margin:0;position:relative;min-height:560px;border-radius:28px;overflow:hidden;background:#08101c;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.45);transform:rotate(1.2deg)}.hero-media img{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,16,29,.32),transparent 38%,rgba(7,16,29,.04))}.scan-line{position:absolute;z-index:2;top:0;bottom:0;width:2px;left:18%;background:linear-gradient(transparent,var(--amber),transparent);box-shadow:0 0 28px 6px rgba(255,189,89,.42);animation:scan 5.5s cubic-bezier(.45,0,.2,1) infinite}.hero-media figcaption{position:absolute;z-index:3;left:1.2rem;right:1.2rem;bottom:1.2rem;display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;padding:1rem;background:rgba(7,16,29,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);border-radius:14px}.hero-media figcaption span{grid-row:1/3;color:var(--amber);font-weight:700}.hero-media figcaption small{color:var(--muted)}@keyframes scan{0%,8%{left:10%;opacity:0}20%,80%{opacity:1}92%,100%{left:90%;opacity:0}}.signal-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 clamp(1.2rem,5vw,5rem)}.signal-strip div{padding:1.8rem;border-right:1px solid var(--line)}.signal-strip div:last-child{border:0}.signal-strip strong{display:block;font:600 2.1rem Fraunces;color:var(--amber)}.signal-strip span{font-size:.78rem;color:var(--muted)}.workbench,.method,.proof,.commerce,.faq{padding:clamp(5rem,9vw,10rem) clamp(1.2rem,7vw,8rem)}.section-intro{display:grid;grid-template-columns:.45fr 1.2fr .8fr;gap:2rem;align-items:start}.section-intro h2{margin-top:0}.section-intro>p:last-child{color:var(--muted);max-width:520px}.case-form{margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem}.field-grid{display:grid;grid-template-columns:1.35fr 1fr .7fr .8fr;gap:1rem}label span,legend{display:block;font-size:.75rem;font-weight:700;letter-spacing:.03em;margin-bottom:.5rem;color:#c8d1dd}input,select,textarea{width:100%;background:#0a1421;color:var(--paper);border:1px solid #35485e;border-radius:10px;padding:.85rem}textarea{resize:vertical}.wide{display:block;margin-top:1rem}.wide small{display:block;margin-top:.45rem;color:var(--muted)}fieldset{border:0;padding:1.5rem 0;margin:0}.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.checks label{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:10px;padding:.9rem}.checks input{width:auto;accent-color:var(--amber)}.checks span{margin:0}.build{border:0}.result{margin-top:2rem;display:grid;grid-template-columns:auto 1.5fr .8fr;gap:2rem;padding:2rem;border:1px solid #4d6076;border-radius:var(--radius);background:linear-gradient(145deg,#111f31,#09131f)}.score-ring{width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;border:8px solid rgba(255,189,89,.17);outline:2px solid var(--amber);outline-offset:-8px}.score-ring span{font:650 2.8rem Fraunces}.score-ring small{color:var(--muted)}.status-label{color:var(--amber);font-size:.75rem;letter-spacing:.14em}.timeline{list-style:none;padding:0;margin:1rem 0}.timeline li{position:relative;padding:0 0 1.2rem 2rem;color:#d4dbe4}.timeline li:before{content:"";position:absolute;left:3px;top:.45rem;width:8px;height:8px;border-radius:50%;background:var(--amber)}.timeline li:after{content:"";position:absolute;left:6px;top:1rem;bottom:0;border-left:1px solid #4d6076}.gaps{border-left:1px solid var(--line);padding-left:1.5rem}.gaps ul{padding-left:1.1rem;color:var(--muted)}.method{background:var(--paper);color:#132033}.method .step{color:#9a560f}.method-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,8vw,9rem)}.rail-steps{border-top:1px solid #aab0b5}.rail-steps article{display:grid;grid-template-columns:48px .8fr 1.2fr;gap:1rem;padding:1.5rem 0;border-bottom:1px solid #c8c4ba;align-items:start}.rail-steps article>span{color:#9a560f;font-weight:700}.rail-steps h3,.rail-steps p{margin:0}.rail-steps p{color:#4a5561}.proof{background:linear-gradient(180deg,#07101d,#0e1c2c)}.proof-copy{max-width:850px}.matrix{border-top:1px solid var(--line);margin-top:3rem}.matrix>div{display:grid;grid-template-columns:.6fr 1.2fr 1fr;gap:1rem;padding:1.25rem;border-bottom:1px solid var(--line)}.matrix-head{color:var(--muted);font-size:.72rem;letter-spacing:.12em}.commerce{background:#0b1727}.commerce-head{max-width:1000px}.account-shell{display:grid;grid-template-columns:1.4fr .6fr;margin-top:3rem;border:1px solid #45566b;border-radius:22px;overflow:hidden}.auth-panel{padding:2rem;background:#f3efe4;color:#111927}.oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.auth-button{display:flex;gap:.7rem;justify-content:center;padding:.85rem;border:1px solid #b5afa3;border-radius:999px;font-weight:700}.auth-button.github{background:#111927;color:white}.divider{display:flex;align-items:center;gap:.8rem;color:#6b7078;margin:1.2rem 0}.divider:before,.divider:after{content:"";height:1px;background:#cac4b8;flex:1}.inline-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.7rem;margin-bottom:.8rem}.inline-form button,.password-form button{height:46px;border:0;border-radius:999px;background:#111927;color:#fff;padding:0 1rem;font-weight:700;cursor:pointer}.auth-panel input{background:#fff;color:#111927;border-color:#c3bdae}.password-form{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;border-top:1px solid #cac4b8;padding-top:1rem}.password-form>div{grid-column:1/-1;display:flex;gap:1rem;align-items:center}.password-form .text-button{background:transparent;color:#111927}.auth-message{font-size:.78rem;color:#59606a}.user-center{padding:2rem;background:#c8c0b0;color:#172132}.user-top{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.12em}.user-center button{border:0;background:transparent;text-decoration:underline;cursor:pointer}.user-center p{margin-top:4rem}.admin-link{display:inline-block;margin-top:2rem;text-decoration:underline}.price-rail{display:grid;grid-template-columns:.65fr 1.35fr;margin-top:1.5rem;border:1px solid var(--line);border-radius:20px;overflow:hidden}.price-rail>div{padding:2rem}.price-rail>div+div{border-left:1px solid var(--line)}.price-rail span{font-size:.72rem;color:var(--amber);letter-spacing:.15em}.price-rail strong{display:block;font:650 4.5rem Fraunces;margin:.5rem 0}.price-rail p,.price-rail small{color:var(--muted)}.paid{background:linear-gradient(135deg,#16283b,#111c2b)}.paid .button{display:flex;margin:1rem 0;width:max-content}.faq details{border-top:1px solid var(--line);padding:1.2rem 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{font:500 clamp(1.2rem,2vw,1.7rem) Fraunces;cursor:pointer}.faq details p{color:var(--muted);max-width:780px}footer{display:grid;grid-template-columns:1fr auto auto;gap:3rem;align-items:end;padding:3rem clamp(1.2rem,5vw,5rem);border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}footer nav{display:flex;gap:1rem;flex-wrap:wrap}footer .brand{color:var(--paper)}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}@media(max-width:1050px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-top:2rem}.hero-media{min-height:480px}.hero-media img{min-height:480px}.section-intro,.method-grid{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr 1fr}.checks{grid-template-columns:1fr 1fr}.result{grid-template-columns:auto 1fr}.gaps{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:1rem 0 0}.account-shell{grid-template-columns:1fr}.price-rail{grid-template-columns:1fr 1fr}}@media(max-width:700px){.site-head nav{display:none}.hero{padding-top:3rem}.hero-media,.hero-media img{min-height:360px}.hero-media{transform:none}.signal-strip{grid-template-columns:1fr 1fr}.signal-strip div:nth-child(2){border-right:0}.field-grid,.checks,.oauth-row,.password-form,.price-rail{grid-template-columns:1fr}.inline-form{grid-template-columns:1fr}.result{grid-template-columns:1fr}.score-ring{width:92px;height:92px}.rail-steps article,.matrix>div{grid-template-columns:1fr}.matrix-head{display:none!important}.account-shell{border-radius:14px}.price-rail>div+div{border-left:0;border-top:1px solid var(--line)}footer{grid-template-columns:1fr;align-items:start}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.scan-line{animation:none;left:70%}}
@media print{.site-head,.hero,.signal-strip,.case-form,.method,.proof,.commerce,.faq,footer{display:none!important}.workbench{padding:0}.section-intro{display:none}.result{display:grid!important;border:0;background:white;color:black}.gaps ul,.timeline li{color:#222}.text-button{display:none}}
 [hidden]{display:none!important}
 .hero-media video{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}@media(max-width:1050px){.hero-media video{min-height:480px}}@media(max-width:700px){.hero-media video{min-height:360px}}

/* ─────────────────────────────────────────────────────────────────────────
   TJ hero balance fix — shouyi 2026-08-18
   Root cause: .hero was a grid with NO max-width, so on wide screens it grew
   to the full viewport while .hero-copy stayed capped (720–760px). The right
   column also carried a larger fr (1.17–1.18), so the wider the screen the
   further the whole composition leaned right. Appended (not edited in place)
   so the original cascade is preserved and this is easy to roll back.
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  max-width: 1520px;
  margin-inline: auto;
}
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
@media (min-width: 1800px) {
  /* stop the visual from swelling past a comfortable reading rhythm */
  .hero { max-width: 1560px; }
}