:root{
  --ink:#0a0a0a;
  --paper:#fff;
  --surface:#f5f5f7;
  --surface-dark:#111;
  --muted:#6e6e73;
  --muted-dark:#a1a1a6;
  --line:rgba(0,0,0,.14);
  --line-dark:rgba(255,255,255,.16);
  --blue:#0071e3;
  --orange:#0071e3;
  --max:1280px;
  --edge:clamp(22px,4.5vw,72px);
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif}
.masthead{position:fixed;height:56px;padding:0 var(--edge);border-color:rgba(0,0,0,.08);background:rgba(255,255,255,.84);color:var(--ink);backdrop-filter:saturate(180%) blur(20px)}
.brand{width:clamp(190px,20vw,260px);max-width:58vw;gap:0;color:var(--ink)}
.brand img.ipad-full-logo{display:block;width:260px;max-width:100%;height:auto;aspect-ratio:6;object-fit:cover;object-position:center 34%;filter:invert(1)}
.masthead nav{gap:clamp(18px,2.4vw,34px)}
.masthead nav a{color:var(--ink);font-size:.78rem;font-weight:500}
.masthead nav a:hover{color:var(--blue)}
.nav-launch{padding:8px 15px;border-radius:999px;background:var(--blue);color:#fff!important;font-weight:600!important}
.menu-button{color:var(--ink)}
.eyebrow{margin-bottom:18px;color:var(--muted);font-size:.82rem;font-weight:650;letter-spacing:.015em}
.hero{min-height:100svh;padding-top:clamp(108px,12vw,170px);padding-bottom:clamp(80px,8vw,120px);background:var(--surface);grid-template-columns:minmax(340px,.78fr) minmax(520px,1.22fr);gap:clamp(42px,5vw,88px)}
.hero-copy{max-width:680px}
.hero h1,.inside h2,.photo-story h2,.capabilities h2,.install h2,.product-choice h2,.finale h2,.bonus-pack h2{font-family:inherit;font-weight:650;letter-spacing:-.055em;line-height:.98}
.hero h1{font-size:clamp(3.7rem,5.1vw,5.75rem)}
.lede{margin-top:30px;color:var(--muted);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5}
.hero-actions{margin-top:32px;gap:14px 22px}
.primary-button{min-height:44px;padding:0 19px;border-radius:999px;background:var(--blue);font-size:1rem;font-weight:600}
.primary-button:hover{background:#0077ed}
.text-button{border:0;color:var(--blue);font-size:1rem}
.moment-note{margin-top:22px;color:var(--muted);font-size:.82rem}
.ipad-hardware{padding:12px;border-color:#3a3a3c;border-radius:34px;background:#050505;box-shadow:0 35px 90px rgba(0,0,0,.22),inset 0 0 0 2px #222}
.app-demo{aspect-ratio:1.38;border-radius:22px;grid-template-rows:42px minmax(0,1fr);background:#111}
.demo-topbar{padding:0 12px;border-color:#292929;background:#151515}
.demo-editor{min-height:0;display:grid;grid-template-columns:25% minmax(0,1fr) 25%;background:#1b1b1b}
.demo-rail,.demo-inspector{min-width:0;padding:12px 10px;background:#111;color:#8e8e93;font-size:6px;line-height:1.2;text-transform:uppercase}
.demo-rail{display:flex;flex-direction:column;gap:4px;border-right:1px solid #2a2a2a}
.demo-rail strong,.demo-inspector strong{display:block;margin:2px 0 6px;color:#d1d1d6;font-size:6px;letter-spacing:.12em}
.demo-rail>span{padding:5px 3px;border-bottom:1px solid #252525}
.demo-rail button{min-height:18px;padding:2px 5px;border:1px solid #333;border-radius:3px;background:#1c1c1e;color:#a1a1a6;font:inherit;text-align:left}
.demo-rail button.active{border-color:#8e8e93;background:#f5f5f7;color:#111}
.demo-canvas{min-width:0;display:grid;grid-template-rows:24px minmax(0,1fr);background:#242424}
.demo-canvas-toolbar{display:flex;align-items:center;justify-content:center;gap:12px;border-bottom:1px solid #303030;background:#181818;color:#8e8e93;font-size:5px}
.demo-workspace{padding:10px;background:#242424}
.demo-workspace img{filter:grayscale(1) contrast(1.08);transition:filter .2s ease}
.demo-inspector{display:flex;flex-direction:column;gap:6px;border-left:1px solid #2a2a2a}
.demo-inspector>span,.demo-inspector>i{padding:5px 4px;border:1px solid #2e2e2e;border-radius:3px;background:#181818;font-style:normal;text-transform:none}
.demo-histogram{height:36px;border:1px solid #303030;background:linear-gradient(155deg,transparent 0 35%,#777 36% 38%,transparent 39% 48%,#aaa 49% 52%,transparent 53% 64%,#666 65% 68%,transparent 69%)}
.demo-caption{color:var(--muted);font-size:.68rem}
.demo-caption span:first-child{color:var(--ink)}
.proof{border-color:var(--line);background:#fff;color:var(--ink)}
.proof div{border-color:var(--line)}
.proof span{color:var(--muted)}
.inside{background:#fff;color:var(--ink)}
.inside .eyebrow,.capabilities .eyebrow,.product-choice .eyebrow{color:var(--muted)}
.inside h2,.capabilities h2,.product-choice h2{font-size:clamp(3rem,5.6vw,5.25rem)}
.tool-path{border-color:var(--line)}
.tool-path li{border-color:var(--line)}
.tool-path li>b,.tool-path p{color:var(--muted)}
.photo-story{background:#000}
.photo-story h2{font-size:clamp(3rem,5.6vw,5.25rem)}
.photo-story>div>p:not(.eyebrow){color:var(--muted-dark)}
.photo-story a{border:0;color:#2997ff}
.capabilities{background:var(--surface);color:var(--ink)}
.capability-grid{border-color:var(--line)}
.capability-grid article{border-color:var(--line);background:#fff}
.capability-grid article>span,.capability-grid p,.raw-note{color:var(--muted)}
.capability-grid h3{font-family:inherit;font-weight:650;letter-spacing:-.04em}
.bonus-pack{background:#000;color:#f5f5f7}
.bonus-pack h2{font-family:inherit;font-weight:650;letter-spacing:-.055em;line-height:.98}
.bonus-pack-copy>p:not(.eyebrow){color:var(--muted-dark)}
.bonus-pack-looks{border-color:var(--line-dark)}
.bonus-pack-looks article+article{border-color:var(--line-dark);background:#111}
.bonus-pack-looks p{color:var(--muted-dark);font-family:inherit}
.install{background:#fff;color:var(--ink)}
.install-copy>p:not(.eyebrow),.install-steps p{color:var(--muted)}
.install-steps,.install-steps li{border-color:var(--line)}
.install-steps li>span{border-color:#86868b}
.product-choice{background:var(--surface);color:var(--ink)}
.choice-grid{gap:16px}
.choice-grid article{border:0;border-radius:28px;background:#fff}
.choice-grid article+article{border:0}
.choice-grid article.featured{background:#111;color:#f5f5f7}
.choice-grid h3{font-family:inherit;font-weight:650;letter-spacing:-.045em}
.choice-grid article>p:not(.product-label){color:var(--muted)}
.choice-grid .featured>p:not(.product-label){color:var(--muted-dark)}
.choice-grid ul,.choice-grid li{border-color:var(--line)}
.choice-grid .featured ul,.choice-grid .featured li{border-color:var(--line-dark)}
.choice-grid a,.choice-grid .featured a{color:var(--blue)}
.finale{background:#fff;color:var(--ink)}
.finale>p:last-child{color:var(--muted)}
footer{border-color:var(--line);background:var(--surface);color:var(--muted)}
footer .brand{display:flex;width:240px}
footer nav a:hover{color:var(--blue)}
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:110px}
  .hero-copy{max-width:850px}
}
@media(max-width:760px){
  .masthead{height:52px}
  .masthead nav{top:52px;background:rgba(255,255,255,.98);border-color:var(--line)}
  .hero{padding-top:90px}
  .hero h1{font-size:clamp(3.15rem,15vw,4.5rem)}
  .app-demo{grid-template-rows:34px minmax(0,1fr)}
  .demo-editor{grid-template-columns:24% minmax(0,1fr) 24%}
  .demo-rail,.demo-inspector{padding:7px 5px;font-size:4.6px}
  .demo-rail button{min-height:14px}
  .demo-histogram{height:24px}
  .choice-grid article{border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.demo-workspace img{transition:none}}