@import url('./edit-button.css');
:root { color-scheme: light dark; --ink:#192b43; --muted:#53667d; --surface:#fff; --line:#dbe5ee; background:#f4f8fc; color:var(--ink); font:16px/1.7 system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; } a { color:#205a9d; } .wrap { width:min(1060px,calc(100% - 40px)); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; font-weight:750; font-size:1.2rem; } .brand img { width:48px; height:48px; }
nav { display:flex; gap:18px; flex-wrap:wrap; } nav button { background:none; color:inherit; font:inherit; border:0; padding:8px; cursor:pointer; } nav button[aria-pressed=true] { font-weight:750; text-decoration:underline; text-underline-offset:6px; }
main { padding:60px 0 40px; } .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:40px; align-items:center; }
.eyebrow { color:#376a99; font-weight:700; letter-spacing:.09em; } h1 { font-size:clamp(2rem,4.2vw,3.1rem); word-break:auto-phrase; overflow-wrap:anywhere; text-wrap:balance; line-height:1.2; letter-spacing:-.035em; margin:.4em 0; } .lead { color:var(--muted); font-size:1.15rem; max-width:660px; } .actions { display:flex; flex-wrap:wrap; gap:16px; margin:28px 0 16px; }
.small { font-size:.9rem; color:var(--muted); } .cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:48px 0 30px; } section.panel { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; }
h2 { font-size:1.35rem; line-height:1.45; margin:0 0 12px; } input { width:100%; min-height:48px; margin:10px 0 16px; padding:10px 12px; border:1px solid #849cb5; border-radius:8px; font:inherit; background:var(--surface); color:var(--ink); } form .twpe-edit-button { width:100%; }
.error { color:#ac2830; } footer { padding:24px 0 40px; border-top:1px solid var(--line); color:var(--muted); } footer a { margin-right:16px; } .skip { position:absolute; top:-100px; left:12px; padding:10px; background:white; } .skip:focus { top:8px; }
@media(max-width:650px) { .wrap { width:calc(100% - 28px); } header { align-items:flex-start; flex-direction:column; gap:6px; padding:16px 0; } main { padding-top:28px; } .hero { grid-template-columns:1fr; gap:12px; } .hero-shots { margin:8px 0 48px; } .cards { grid-template-columns:1fr; margin-top:28px; } section.panel { padding:20px; } .actions .twpe-edit-button { width:100%; } }
@media(prefers-color-scheme:dark) { :root { --ink:#e9f1fb; --muted:#bdcada; --surface:#18283d; --line:#34485f; background:#101c2b; } a { color:#a8d6ff; } .eyebrow { color:#9fcdf3; } .error { color:#ffadb3; } }

.cards { align-items:start; }
.docs { margin:8px 0 30px; } .docs>h2 { font-size:1.6rem; } .docs-cards { margin-top:16px; }
.docs .eyebrow { margin:0 0 6px; font-size:.85rem; } .docs h3 { font-size:1.2rem; line-height:1.45; margin:0 0 10px; }
.doc-languages { list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 0 12px; } .doc-languages a { display:inline-block; padding:6px 16px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:650; }
.terms { margin:40px 0 0; } .terms dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:8px 0 0; } .terms dt { font-weight:750; font-size:1.05rem; } .terms dd { margin:4px 0 0; color:var(--muted); font-size:.92rem; }
@media(max-width:650px) { .terms { margin-top:24px; } .terms dl { grid-template-columns:1fr; gap:14px; } }

/* Real screenshots on the top page */
.shot { display:block; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 18px 44px rgba(25,43,67,.16); }
.hero-shots { position:relative; margin-bottom:64px; }
.hero-main { overflow:hidden; aspect-ratio:740/470; } .hero-main img { display:block; width:162.2%; height:auto; }
.shot-stage { position:absolute; right:-24px; bottom:-60px; width:50%; height:auto; }
.doc-shot { display:block; margin:-8px -8px 18px; padding:16px; border-radius:14px; border:1px solid var(--line); background:#e5eef8; aspect-ratio:16/9; }
.doc-shot img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(25,43,67,.18)); }
/* Crop a screenshot to its top-left corner; --crop is the image width relative to the visible frame */
.crop-shot { display:block; overflow:hidden; } .crop-shot img { display:block; width:var(--crop,100%); height:auto; }
.open-flow { display:grid; justify-items:center; gap:6px; margin:24px 0 20px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#e5eef8; text-align:center; font-size:.9rem; }
.open-ways { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; list-style:none; margin:0; padding:0; } .open-ways li { padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-weight:650; }
.open-arrow { width:2px; height:16px; background:#849cb5; position:relative; } .open-arrow::after { content:''; position:absolute; left:-5px; bottom:-2px; border:6px solid transparent; border-top-color:#849cb5; border-bottom:0; }
.open-editor { margin:2px 0 0; padding:8px 18px; border-radius:10px; background:#205a9d; color:#fff; font-weight:750; } .open-out { margin:2px 0 0; color:var(--muted); }
.open-shot { aspect-ratio:760/432; --crop:189.5%; box-shadow:none; }
.guide-chapters { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; list-style:none; margin:20px 0 0; padding:0; }
.guide-chapters a { display:grid; gap:8px; font-size:.9rem; font-weight:650; line-height:1.45; text-decoration:none; } .guide-chapters a:hover span:last-child { text-decoration:underline; }
.guide-chapters .shot { aspect-ratio:16/10; box-shadow:none; } .guide-chapters img { width:100%; height:100%; object-fit:cover; object-position:left top; }
@media(prefers-color-scheme:dark) { .shot { box-shadow:0 18px 44px rgba(0,0,0,.5); } .doc-shot, .open-flow { background:#22364f; } .open-editor { background:#a8d6ff; color:#101c2b; } .open-shot, .guide-chapters .shot { box-shadow:none; } }
@media(max-width:650px) { .shot-stage { right:-6px; bottom:-44px; width:56%; } }