/* The homepage only (home.css is shared with /mac, /windows, the workshop and more).
   Black and Apple blue, normal-sized type, one idea per screen. */
:root {
  --white: #000;
  --light: #161618;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --line: #2c2c2e;
  --blue: #0a84ff;
  --blue-h: #2997ff;
  --link: #2997ff;
}
html { scroll-padding-top: 76px; scroll-behavior: smooth; }
body { background: #000; }
.wrap { width: min(1080px, 100% - 2 * var(--gutter)); }
.h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }

.btn { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.btn svg { width: 16px; height: 16px; }
.btn-blue:hover { box-shadow: none; }
.btn-ink { background: #f5f5f7; color: #000; }
.btn-ink:hover { background: #fff; }
.btn-ghost { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.ctas { gap: 10px; margin-top: 24px; }
.thanks { background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 0, 0, .6); }
.wall-mac { background: radial-gradient(70% 70% at 70% 15%, #2f9bff 0%, rgba(47, 155, 255, 0) 70%), linear-gradient(160deg, #0a3f8f, #04142f 75%); }

/* ─── Nav ─── */
.nav, .nav.scrolled { position: sticky; top: 10px; height: 48px; margin-top: 10px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; color: #f5f5f7; }
.nav .wrap { width: min(720px, 100% - 2 * var(--gutter)); height: 48px; padding: 0 6px 0 14px; gap: 18px; border-radius: 999px; pointer-events: auto; background: rgba(28, 28, 30, .7); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .35); }
.brand { font-size: 16px; font-weight: 600; letter-spacing: -.01em; gap: 8px; }
.brand img { width: 24px; height: 24px; }
.nav-links { margin: 0 auto; gap: 20px; font-size: 13px; color: #a1a1a6; }
.nav-links a:hover, .nav-links a.on { color: #fff; }
.nav-buy { margin-left: 0; }
.nav-buy .btn { height: 36px; padding: 0 15px; font-size: 13px; }
@media (max-width: 900px) { .nav-buy { margin-left: auto; } }

/* ─── First screen ─── */
.hero2 { display: flex; align-items: center; min-height: min(calc(100svh - 58px), 760px); padding: 28px 0 40px; }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.hero2 h1 { margin: 0; font-size: clamp(36px, 4.1vw, 54px); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; }
.scrib { color: #2997ff; white-space: nowrap; padding-bottom: .05em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12C60 4 120 3 180 6c40 2 80 3 117-1' fill='none' stroke='%232997ff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .13em no-repeat; }
.hero2-sub { margin: 18px 0 0; max-width: 480px; font-size: 17px; line-height: 1.5; color: #a1a1a6; }
.hero2 .ctas { justify-content: flex-start; }
.hero2-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #86868b; }
.hero2-fine b { color: #d1d1d6; font-weight: 500; }
.hero2-demo { margin: 0; min-width: 0; }
.hero2-demo figcaption { margin-top: 12px; min-height: 1.5em; font-size: 14px; color: #a1a1a6; text-align: center; }
.demo-scr { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 7px #161618, 0 0 0 8px rgba(255, 255, 255, .1); font-size: 12px; }
.demo-scr .menubar { height: 22px; font-size: 10.5px; gap: 12px; padding: 0 10px; opacity: 1; }
.demo-scr .isl { z-index: 6; font-size: 12px; }
.demo-scr .isl .pane { padding: 0 14px; }
.demo-scr .isl .pane .row { gap: 10px; }
.demo-scr .isl .cam { top: 8px; width: 7px; height: 7px; margin-left: -3.5px; }
.demo-scr .dot-red { width: 10px; height: 10px; }
.demo-scr .ed-hang { width: 110px; height: 110px; margin-left: -55px; }
.demo-term { left: 4%; top: 25%; width: 62%; height: 64%; font-size: 10.5px !important; line-height: 1.65 !important; }
.demo-term .bar, .demo-vid .bar { height: 20px; font-size: 9.5px; gap: 4px; padding: 0 8px; }
.demo-term .bar i, .demo-vid .bar i { width: 7px; height: 7px; }
.demo-term .body { padding: 8px 10px !important; }
.demo-vid { right: 4%; top: 54%; width: 33%; height: 34%; }
.dt-you { display: table; padding: 0 4px; margin: 0 0 3px -4px; background: rgba(255, 255, 255, .13); }
.dt-rule { height: 1px; margin: 4px 0; background: #3a3a40; }
.dt-q { font-weight: 700; color: #bcdcff; }
.dt-on { color: #bcdcff; }
.demo-vid .pic { top: 20px; }
.demo-vid .ttl { font-size: 11px; left: 10px; bottom: 14px; }
.demo-vid .prog { left: 10px; right: 10px; bottom: 8px; height: 2px; }
@media (max-width: 860px) {
  .hero2 { min-height: 0; padding: 26px 0 30px; }
  .hero2-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero2 h1 { font-size: clamp(34px, 9.4vw, 44px); }
  .hero2-sub { font-size: 16px; }
}

.hero2-try { display: inline-block; margin-top: 10px; font-size: 14px; color: #2997ff; }
.hero2-try span { display: inline-block; margin-left: 2px; }

/* ─── Try it ─── */
#try .h2 { font-size: clamp(26px, 2.9vw, 36px); }
.try-sub { margin: 8px auto 26px; max-width: 620px; text-align: center; font-size: 16px; line-height: 1.45; color: #a1a1a6; }
.try-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #86868b; }
.try-note b { color: #d1d1d6; font-weight: 500; }

.eb, .eb-back { transition: opacity .25s; }
.try-on .eb, .try-on .eb-back { opacity: 0; pointer-events: none; }

/* ─── Sections ─── */
.sec2 { padding: clamp(52px, 7vw, 84px) 0; }
.sec2 .h2 { text-align: center; }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; margin: 32px auto 0; }
.vs > div { padding: 24px 26px; border-radius: 20px; background: #111113; }
.vs h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #86868b; }
.vs ul { list-style: none; margin: 0; padding: 0; }
.vs li { padding: 7px 0; font-size: 16px; line-height: 1.4; color: #a1a1a6; }
.vs-b { background: #0071e3 !important; }
.vs-b h3 { color: #fff; }
.vs-b li { color: #fff; }
.why-line { margin: 20px auto 0; text-align: center; font-size: 14px; color: #86868b; }
@media (max-width: 680px) { .vs { grid-template-columns: 1fr; } }

.more-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; margin-top: 32px; align-items: stretch; }
.more-list { display: flex; flex-direction: column; }
.more-list button { display: block; width: 100%; padding: 14px 16px; border-radius: 14px; text-align: left; transition: background .2s; }
.more-list button b { display: block; font-size: 16px; font-weight: 600; color: #a1a1a6; }
.more-list button span { display: none; margin-top: 4px; font-size: 14px; line-height: 1.45; color: #a1a1a6; }
.more-list button:hover b { color: #f5f5f7; }
.more-list button.on { background: #161618; }
.more-list button.on b { color: #f5f5f7; }
.more-list button.on span { display: block; }
.more-view { position: relative; min-height: 300px; border-radius: 18px; overflow: hidden; background: radial-gradient(90% 90% at 75% 0%, #2f9bff 0%, rgba(47, 155, 255, 0) 70%), linear-gradient(165deg, #0a4aa8, #04163a 80%); }
.more-view .isl { --r: 22px; font-size: 13.5px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.more-view .pane { padding: 0 16px 14px; white-space: normal; }
.more-view .ci-ttl { height: 44px; font-size: 12px; }
.more-view .clips { grid-template-columns: repeat(3, 1fr); }
.more-view .clipc { height: 104px; font-size: 12px; padding: 10px; }
.more-view .clipc:nth-child(n+4) { display: none; }
.more-view .foc .tm { font-size: 36px; }
.more-view .mus .art { width: 84px; height: 84px; }
.more-view .mus .ctl { gap: 22px; }
.more-view .rev .big { font-size: 44px; }
.more-view .rev .bars { height: 86px; }
.more-view .cost-row { grid-template-columns: 96px 1fr 54px; height: 34px; font-size: 13px; }
.cost-row .bar i { background: #0a84ff; width: var(--v); }
.rev .bars i { transform: none; }
.clipc { transform: none; opacity: 1; }
@media (max-width: 760px) { .more-grid { grid-template-columns: 1fr; } .more-view { min-height: 270px; } }

.meet2 { background: #0071e3; color: #fff; padding: 44px 0; }
.meet2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.meet2 .h2 { text-align: left; }
.meet2 p { margin: 12px 0 0; max-width: 460px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.meet2-stage { position: relative; height: 200px; }
.meet2-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.acts { justify-content: flex-start; gap: 8px; margin-top: 18px; }
.acts button { height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 500; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.acts button:hover { transform: none; background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bubble { color: #1d1d1f; font-size: 13px; padding: 7px 12px; }
@media (max-width: 680px) { .meet2-grid { grid-template-columns: 1fr; } .meet2-stage { height: 170px; } }

.pcard2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 860px; margin: 0 auto; padding: 36px 40px; border-radius: 24px; background: #111113; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pcard2 .h2 { text-align: left; font-size: clamp(34px, 4vw, 46px); }
.pcard2-was { margin: 8px 0 0; font-size: 14px; color: #86868b; }
.pcard2-pitch { margin: 18px 0 0; font-size: 16px; line-height: 1.45; color: #d1d1d6; }
.pcard2-buy { width: 100%; height: 48px; margin-top: 18px; font-size: 16px; }
.pcard2-r { list-style: none; margin: 0; padding: 0; align-self: center; }
.pcard2-r li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; line-height: 1.35; color: #d1d1d6; }
.pcard2-r li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5 8.2 14.6 16 6' stroke='%232997ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcard2-r a { color: #2997ff; }
.v2-line { margin: 18px auto 0; text-align: center; font-size: 14px; color: #86868b; }
.v2-line b { color: #d1d1d6; font-weight: 500; }
.v2-line a { color: #2997ff; }
@media (max-width: 720px) { .pcard2 { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; } }

/* ─── FAQ ─── */
.faq { max-width: 720px; margin: 22px auto 0; }
.faq .faq { margin: 0; }
.faq summary { padding: 16px 32px 16px 0; font-size: 16px; font-weight: 500; letter-spacing: 0; }
.faq summary::after { font-size: 22px; }
.faq p { font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
.faq details[open] > summary::after { color: #2997ff; }
.faq-more > summary { color: #2997ff; }
.faq-more:last-child { border-bottom: 0; }
.compat { font-size: 13px; }
.compat .y { color: #30d158; }
.compat .p { color: #ff9f0a; }

/* ─── Close ─── */
.final2 { padding: 30px 0 70px; text-align: center; }
.final2 .ctas { margin-top: 20px; }

/* ─── Footer ─── */
footer { background: #000; border-top: 1px solid #1c1c1e; font-size: 13px; color: #86868b; }
footer .wrap { display: block; padding: 40px 0 26px; }
.fcols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 20px; }
.fcols b { display: block; margin-bottom: 8px; color: #f5f5f7; font-weight: 600; }
.fcols a { display: block; padding: 4px 0; line-height: 1.3; }
.fcols a:hover { color: #f5f5f7; text-decoration: none; }
.fbase { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 28px; padding-top: 16px; border-top: 1px solid #1c1c1e; font-size: 12px; }
.fbase a { color: #2997ff; }
footer .dir-badges { margin-top: 16px; }
footer .dir-badges img { height: 36px; width: auto; }
@media (max-width: 860px) { .fcols { grid-template-columns: 1fr 1fr; } }