:root{
  --bg:#f6f2ea;--surface:#fffdf9;--text:#1b1a20;--text-2:#5e5a53;
  --accent:#2f4bda;--logo-ink:#1b1a20;--logo-labs:#6b675f;--brand-blue:#008efc;--brand-baking:#1b1a20;--accent-soft:#e6e9fb;--border:#e5dfd3;--rule:#d6cfc1;
  --app-icon-back:#1b1a20;--brand-cobalt:#2f4bda;--brand-sky:#008efc;--button:#2f4bda;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wordmark:"Avenir Next",Avenir,"Montserrat","Segoe UI",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --app-icon-back:#fffdf9;--bg:#16151b;--surface:#211f27;--text:#f6f2ea;--text-2:#a7a299;
  --accent:#8c9dff;--logo-ink:#f6f2ea;--logo-labs:#9a968f;--brand-blue:#73baff;--brand-baking:#f6f2ea;--accent-soft:#262b4a;--border:#312e38;--rule:#3d3a45;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--sans);padding:32px 20px 64px}
main,.site-header,.site-footer{max-width:680px;margin:0 auto}
a{color:var(--accent)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:600 1.1rem var(--serif)}
.brand svg{width:34px;height:34px;color:var(--accent);flex:none}
.brand span{color:var(--text-2);font-weight:400}
nav{display:flex;gap:18px;font-size:.95rem}
nav a{text-decoration:none;color:var(--text-2)}
nav a:hover,nav a[aria-current]{color:var(--accent)}
.page-index{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:16px 0 28px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:.9rem}
main [id]{scroll-margin-top:20px}
h1{font:600 clamp(1.9rem,5vw,2.6rem)/1.15 var(--serif);margin:36px 0 10px;text-wrap:balance}
h2{font:600 1.35rem/1.3 var(--serif);margin:44px 0 10px}
h3{font-size:1rem;margin:0 0 6px}
.lede{color:var(--text-2);font-size:1.08rem;margin:0 0 28px}
.meta{color:var(--text-2);font-size:.92rem;margin:0 0 28px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin:20px 0}
.callout{background:var(--accent-soft);border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin:0 0 32px}
.callout strong{color:var(--accent)}
.app-card{display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:inherit}
.app-icon{width:72px;height:72px;border-radius:17px;object-fit:cover;background:var(--surface);flex:none}
.product-page-title{display:flex;flex-direction:column;align-items:flex-start;font:700 clamp(1.9rem,5vw,2.6rem)/1.15 var(--wordmark);letter-spacing:-.025em;color:var(--text);margin:36px 0 10px;overflow-wrap:anywhere}
.skyhigh{color:var(--brand-blue)}
.product-page-title .page-label{font:500 1rem/1.4 var(--sans);letter-spacing:0;color:var(--text-2);margin-top:8px}
.product-heading{display:flex;gap:20px;align-items:flex-start;margin:36px 0 10px}
.product-heading .product-page-title,.app-card .product-page-title{margin:0}
.product-heading .product-page-title{min-width:0}
.app-card>div{min-width:0}
.app-card p{margin:0;color:var(--text-2)}
.pill{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:3px 10px;margin-top:10px}
.button{display:inline-block;background:var(--button);color:#fff;text-decoration:none;padding:11px 20px;border-radius:999px;font-weight:600;font-size:.95rem}
ul.features{padding-left:1.2em}ul.features li{margin-bottom:6px}
.faq{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border);padding:18px 0}
.faq-item h3{margin:0 0 4px}
.faq-item p{color:var(--text-2);margin:0}
.contact{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contact .label{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.contact .email{font:1.15rem var(--serif);color:var(--accent)}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
ol.steps li{display:flex;gap:14px}
ol.steps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--button);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}
ol.steps p{margin:0;padding-top:1px}
section{margin-top:36px}
section h2{margin-top:0}
.num{color:var(--accent);font-style:italic;font-weight:400;margin-right:8px}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--text-2);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:none}
@media(max-width:520px){
  .table-card{overflow:visible}
  table,tbody{display:block}
  tr{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-bottom:1px solid var(--border)}
  th,td{display:block;padding:0;border:0}
  th{white-space:normal}
  tr:last-child{border-bottom:0}
}
.site-footer{margin-top:64px;padding-top:22px;background:linear-gradient(90deg,var(--brand-cobalt),var(--brand-sky)) top left/100% 2px no-repeat;color:var(--text-2);font-size:.88rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.site-footer a{color:var(--text-2)}

/* Roadmap and tester program (2026-10-01) */
.stage-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:36px}
.stage-head h2{margin:0}
.card>.stage-head:first-child{margin-top:0}
.stage-note{color:var(--text-2);margin:0 0 12px}
.items{border-top:1px solid var(--border)}
.item{border-bottom:1px solid var(--border);padding:18px 0}
.item h3{margin:0 0 4px}
.item p{color:var(--text-2);margin:0}
.card ul{margin:0;padding-left:1.2em}
.card li{margin-bottom:8px}
.card li:last-child{margin-bottom:0}
.email-line .email{font:1.05rem var(--serif);color:var(--accent);user-select:all}
nav{flex-wrap:wrap;row-gap:6px}
/* Beta page history (2026-10-01) */
details.item summary{cursor:pointer;list-style-position:outside}
details.item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details.item[open] summary{margin-bottom:8px}
details.item p{color:var(--text-2);margin:0 0 10px}
.product-overview{margin-top:36px}
.product-overview+.lede{margin-top:28px}
.contact-note{margin-top:14px}
.release-meta{margin:6px 0 16px}
.table-card{padding:6px 14px;overflow-x:auto}
/* Studio menu and per-app menu */
.app-nav{max-width:680px;margin:14px auto 0;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:.92rem}
.app-nav-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text);text-decoration:none;padding-right:16px;border-right:1px solid var(--border)}
.app-nav-name img{width:22px;height:22px;border-radius:5px;flex:none}
.app-nav-links{display:flex;gap:6px 16px;flex-wrap:wrap}
.app-nav-links a{color:var(--text-2);text-decoration:none}
.app-nav-links a:hover,.app-nav-links a[aria-current]{color:var(--accent)}
.app-nav-links a[aria-current]{font-weight:600}
@media(max-width:520px){.app-nav-name{border-right:0;padding-right:0;width:100%}}
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px;margin:20px 0}
.app-grid .card{margin:0}
.app-tile{display:flex;gap:18px;align-items:flex-start;text-decoration:none;color:inherit}
a.app-tile:hover{border-color:var(--accent)}
.app-tile p{margin:0;color:var(--text-2)}
.app-tile h3.app-tile-title{font:700 clamp(1.25rem,3vw,1.5rem)/1.15 var(--wordmark);letter-spacing:-.025em;margin:0 0 8px;overflow-wrap:anywhere}
.app-tile>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0;align-self:stretch;flex:1}
.app-tile .pill{margin-top:auto}
.app-tile p{padding-bottom:12px}
.app-tile.upcoming{border-style:dashed;background:transparent;align-items:center}

/* Company logo in the header; colors follow light and dark mode */
.brand .brand-logo{width:186px;height:44px;color:inherit}
@media(max-width:520px){.brand .brand-logo{width:152px;height:36px}}

@media(max-width:520px){
  .app-tile,.product-heading,.app-card.product-overview{flex-direction:column;gap:14px}
  .app-tile>div{width:100%}
}

/* Contrasting app artwork: dark icons on light pages, light icons on dark pages. */
.app-icon-picture{display:block;flex:none}
.app-icon-picture img{display:block;background:var(--app-icon-back)}
.app-nav-name .app-icon-picture{width:22px;height:22px}