/* Story by AJ / HTML5 UP (CC BY 3.0). The page retains Story's banner,
   spotlight and wrapper structure. FFui typography and product presentation
   are adapted for the real interface; no generated pictures or mock devices. */
@import url('/site-assets/story/assets/css/main-local.css');
:root { --paper:#f8fbfc; --sky:#e8f4f8; --sky-deep:#d9edf3; --ink:#112d39; --muted:#4d6470; --rule:#b8d1db; --accent:#0f6480; --terminal:#05080d; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body,button,input,select,textarea { font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--ink); font-weight:400; letter-spacing:normal; }
body { background:var(--paper); }
#wrapper { overflow:hidden; }
h1,h2,h3,h4 { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--ink); font-weight:500; letter-spacing:-.045em; }
h2 { font-size:clamp(2.3rem,4.2vw,4.5rem); line-height:1.08; }
h3 { letter-spacing:-.025em; }
p { line-height:1.62; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:#063f54; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
code { border-radius:0; background:#e9f2f5; color:#123a4b; font-family:Menlo,Monaco,Consolas,monospace; padding:.08em .26em; }
.skip-link { position:absolute; top:-100px; left:10px; z-index:1000; padding:10px 14px; background:#fff; }
.skip-link:focus { top:10px; }
.eyebrow { margin:0 0 1.45rem; color:#35667b; font:600 .69rem/1.5 Menlo,Monaco,monospace; letter-spacing:.15em; text-transform:uppercase; }
.site-nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:clamp(1rem,3vw,3.5rem); min-height:70px; padding:0 clamp(1.4rem,4.5vw,5rem); border-bottom:1px solid var(--rule); background:rgba(248,251,252,.97); }
.site-nav-brand { flex:none; color:var(--ink); font:600 1.28rem/1 'Helvetica Neue',Helvetica,sans-serif; letter-spacing:-.06em; }
.brand-stop,.title-period { color:#2387a5; }
.site-nav nav { display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); margin-left:auto; }
.site-nav nav a,.nav-download { color:var(--ink); font-size:.8rem; font-weight:500; white-space:nowrap; }
.site-nav nav a:hover,.nav-download:hover { color:var(--accent); }
.nav-download { display:flex; align-items:center; justify-content:space-between; min-width:116px; gap:16px; margin-left:clamp(.8rem,1.6vw,2rem); padding:11px 0 11px 15px; border-left:1px solid var(--rule); }
.site-hero { display:grid !important; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:stretch !important; min-height:clamp(610px,calc(100svh - 70px),830px) !important; background:var(--sky) !important; }
.site-hero .content { display:flex; flex-direction:column; justify-content:center; width:auto !important; max-width:none !important; min-height:0; margin:0 !important; padding:clamp(3.5rem,6vw,7rem) clamp(2rem,5.8vw,6.5rem) !important; text-align:left !important; }
.site-hero h1 { margin:0 0 1.4rem; font-size:clamp(3.5rem,6.25vw,7.4rem); line-height:.98; letter-spacing:-.066em; }
.hero-lead { max-width:35rem; margin:0 0 1rem; font-size:clamp(1.12rem,1.6vw,1.45rem); line-height:1.38; font-weight:500; }
.hero-detail { max-width:34rem; margin:0; color:var(--muted); font-size:.96rem; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; margin:2.2rem 0 1.3rem; }
.site-button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.8rem; min-height:52px; padding:12px 18px; border:1px solid var(--ink); border-radius:0; font-size:.87rem; font-weight:600; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
.site-button-primary { background:var(--ink); color:#fff !important; }
.site-button-primary:hover { background:var(--accent); border-color:var(--accent); }
.site-button-secondary { background:transparent; color:var(--ink) !important; }
.site-button-secondary:hover { background:#fff; }
.site-text-link { display:inline-flex; align-items:center; gap:1.1rem; width:max-content; max-width:100%; border-bottom:1px solid currentColor; padding:0 0 4px; color:var(--ink); font-size:.87rem; font-weight:600; line-height:1.4; }
.site-text-link:hover { color:var(--accent); }
.release-line { margin:0; color:#547180; font:500 .69rem/1.5 Menlo,Monaco,monospace; }
.site-hero .site-stage { display:flex !important; flex-direction:column; justify-content:center; align-items:stretch; position:relative !important; width:auto !important; height:auto !important; min-width:0; margin:0 !important; padding:clamp(1.5rem,3vw,3.5rem) clamp(1.5rem,4vw,4.5rem) !important; background:var(--sky-deep) !important; border-left:1px solid var(--rule); }
.stage-label,.phone-stage-label,.proof-heading,.record-header { display:flex; justify-content:space-between; gap:12px; color:#355968; font:600 .65rem/1.4 Menlo,Monaco,monospace; letter-spacing:.08em; }
.stage-label { align-items:center; margin:0 0 1rem; }
.stage-label span:nth-child(2) { margin-right:auto; }
.stage-signal { width:7px; height:7px; border-radius:50%; background:#1e866c; }
.preview-shell { overflow:hidden; border:8px solid #182b33; box-shadow:0 18px 36px rgba(14,51,68,.16); background:var(--terminal); }
.preview-screen { position:relative; width:100%; overflow:hidden; background:var(--terminal); }
.preview-screen iframe { display:block; position:absolute; top:0; left:0; width:1280px; height:720px; border:0; transform:scale(var(--preview-scale,1)); transform-origin:top left; pointer-events:none; }
.stage-caption { max-width:34rem; margin:.95rem 0 0; color:#486674; font-size:.76rem; line-height:1.5; }
.site-index { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--rule); background:#fff; }
.site-index>div { display:grid; grid-template-columns:32px 1fr; column-gap:15px; align-content:center; min-height:105px; padding:1.4rem clamp(1.3rem,4vw,4.8rem); border-right:1px solid var(--rule); }
.site-index>div:last-child { border-right:0; }
.site-index .index-number { grid-row:span 2; color:#39758b; font:600 .68rem Menlo,Monaco,monospace; }
.site-index strong { color:var(--ink); font-size:.96rem; font-weight:600; }
.site-index p { margin:.25rem 0 0; color:var(--muted); font-size:.79rem; line-height:1.35; }
.feature-section { display:grid !important; grid-template-columns:1fr 1fr; min-height:570px; background:#fff; }
.feature-section .content { display:flex; flex-direction:column; justify-content:center; width:auto !important; max-width:790px !important; margin:0 !important; padding:clamp(3.5rem,6vw,7rem) clamp(2rem,6vw,7rem) !important; text-align:left !important; }
.feature-section .content p:not(.eyebrow) { max-width:34rem; color:var(--muted); font-size:.96rem; }
.feature-section .content h2 { max-width:38rem; margin-bottom:1.4rem; }
.feature-section .content .site-text-link { margin-top:1rem; }
.feature-section .image { display:flex !important; position:relative !important; align-items:center; justify-content:center; width:auto !important; height:auto !important; margin:0 !important; padding:clamp(2rem,5vw,6rem) !important; }
.feature-proof { grid-column:1; grid-row:1; background:#eef4f6 !important; border-right:1px solid var(--rule); }
#workspace .content { grid-column:2; grid-row:1; }
.proof-inner { width:min(100%,530px); border-top:2px solid #2c657c; color:var(--ink); text-align:left; }
.proof-heading { padding:15px 0; border-bottom:1px solid var(--rule); }
.proof-line { display:grid; grid-template-columns:40px 1fr; gap:14px; padding:23px 0; border-bottom:1px solid var(--rule); }
.proof-line>span { color:var(--accent); font:600 .72rem Menlo,Monaco,monospace; }
.proof-line strong { font-size:1.18rem; font-weight:500; }
.proof-line p { margin:.3rem 0 0; color:var(--muted); font-size:.83rem; }
.proof-foot { padding-top:16px; color:#6a8590; font:.69rem Menlo,Monaco,monospace; }
.field-section { background:var(--sky); border-top:1px solid var(--rule); }
.phone-proof { background:#d7eaf0 !important; border-left:1px solid var(--rule); }
.phone-stage { width:min(100%,430px); margin:auto; }
.phone-stage-label { margin-bottom:1.2rem; }
.phone-bezel { width:min(100%,304px); margin:0 auto; padding:7px; border:1px solid #102a36; border-radius:19px; background:#102a36; box-shadow:0 15px 32px rgba(16,42,54,.17); }
.phone-bezel .preview-screen { border-radius:11px; background:#f2f2f7; }
.phone-bezel iframe { width:390px; height:844px; }
.phone-stage>p { margin:.9rem 0 0; color:#4f6c79; text-align:center; font-size:.74rem; }
.keyboard-section { padding:5rem 0 5.8rem; background:#0b151b; color:#c3dadd; }
.keyboard-section h2 { color:#e4f2f3; }
.keyboard-section p:not(.eyebrow) { max-width:46rem; margin-inline:auto; color:#b6cbd0; }
.keyboard-section .eyebrow { color:#8ab7c1; }
.keyboard-section .keyboard-shot { display:block; width:min(100%,1130px); margin:2.5rem auto 1.6rem; padding:1.25rem; border:1px solid #53727c; background:#05080d; }
.keyboard-section .keyboard-shot img { display:block; width:100%; height:auto; max-height:380px; object-fit:contain; }
.keyboard-section .site-text-link { color:#d2e5e7; }
.nearby-section { border-top:1px solid var(--rule); }
.nearby-proof { grid-column:1; grid-row:1; background:#eef4f6 !important; border-right:1px solid var(--rule); }
#nearby .content { grid-column:2; grid-row:1; }
.nearby-record { width:min(100%,530px); background:#fff; border:1px solid var(--rule); text-align:left; }
.record-header { padding:17px 20px; border-bottom:1px solid var(--rule); }
.record-body { padding:26px 20px; border-bottom:1px solid var(--rule); }
.record-index { display:block; margin-bottom:11px; color:var(--accent); font:600 .68rem Menlo,Monaco,monospace; }
.record-body strong { font-size:1.25rem; font-weight:500; }
.record-body p { margin:.3rem 0 0; color:var(--muted); font-size:.84rem; }
.record-footer { padding:18px 20px; color:#5d7a86; font:.68rem Menlo,Monaco,monospace; }
.details-section { padding:clamp(4rem,6vw,7rem) 0; background:#fff; border-top:1px solid var(--rule); }
.details-section .inner { max-width:1200px; }
.details-section h2 { max-width:700px; margin-bottom:3.2rem; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,8rem); padding-bottom:3rem; }
.detail-column { border-top:2px solid var(--ink); }
.detail-column h3 { margin:1rem 0 1.5rem; font-size:1.4rem; }
.detail-column dl { margin:0; }
.detail-column dt { margin-top:1.3rem; font-size:.94rem; font-weight:600; }
.detail-column dd { margin:.25rem 0 0; color:var(--muted); font-size:.86rem; line-height:1.5; }
.detail-column code { font-size:.8rem; }
.notes-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.notes-row details { min-height:110px; padding:1.35rem; background:var(--sky); }
.notes-row summary { cursor:pointer; color:var(--ink); font-size:.88rem; font-weight:600; list-style:none; }
.notes-row summary::-webkit-details-marker { display:none; }
.notes-row summary::after { content:'+'; float:right; color:var(--accent); font-size:1.2rem; font-weight:400; }
.notes-row details[open] summary::after { content:'−'; }
.notes-row details p { margin:1rem 0 0; color:var(--muted); font-size:.8rem; line-height:1.55; }
.download-section { padding:5rem 0 5.5rem; background:#d8edf4; border-top:1px solid var(--rule); }
.download-section h2 { font-size:clamp(3rem,5vw,5rem); }
.download-section .inner>p:not(.eyebrow) { color:var(--muted); }
.download-section .download-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:2rem 0; }
.download-section .download-note { font-size:.78rem; }
.site-footer { padding:3rem 0 2rem; background:#f8fbfc; border-top:1px solid var(--rule); }
.site-footer .inner { max-width:1200px; }
.footer-main,.footer-legal { display:flex; justify-content:space-between; gap:2rem; }
.footer-main { align-items:start; padding-bottom:3rem; }
.footer-main p { margin:.6rem 0 0; font-size:.85rem; }
.footer-main strong { font-weight:600; }
.footer-brand { color:var(--ink); font-size:2.8rem; font-weight:600; letter-spacing:-.065em; }
.footer-main nav { display:flex; gap:1.4rem; padding-top:1rem; }
.footer-main nav a { color:var(--ink); font-size:.8rem; }
.footer-legal { align-items:end; border-top:1px solid var(--rule); padding-top:1.1rem; }
.footer-legal p { max-width:45rem; margin:0; color:#5d747e; font-size:.69rem; line-height:1.55; }
.footer-legal a { color:inherit; text-decoration:underline; }
.article-hero { padding:clamp(4rem,7vw,7rem) 0; background:var(--sky); border-bottom:1px solid var(--rule); }
.article-hero .inner,.article-body .inner { max-width:1080px; }
.article-hero h1 { max-width:760px; margin:0 0 1.2rem; font-size:clamp(3.2rem,6vw,6rem); line-height:1.04; }
.article-hero p:not(.eyebrow) { max-width:650px; margin:0; color:var(--muted); font-size:1.1rem; }
.article-body { padding:1rem 0 5rem; background:#fff; }
.article-block { display:grid; grid-template-columns:70px 1fr; gap:clamp(1rem,4vw,4rem); padding:2.6rem 0; border-bottom:1px solid var(--rule); }
.article-block>span { color:var(--accent); font:600 .75rem Menlo,Monaco,monospace; }
.article-block h2 { margin:0 0 1rem; font-size:clamp(1.6rem,2.5vw,2.5rem); }
.article-block p { max-width:720px; margin:0 0 .85rem; color:var(--muted); font-size:.93rem; }
.article-block p:last-child { margin-bottom:0; }
@media (max-width:1050px) {
  .site-hero { grid-template-columns:1fr; min-height:0 !important; }
  .site-hero .content { padding:4rem clamp(1.5rem,5vw,4rem) 3rem !important; }
  .site-hero .site-stage { border-left:0; border-top:1px solid var(--rule); padding:2rem clamp(1.5rem,5vw,4rem) !important; }
  .site-index>div { padding:1.3rem; }
  .feature-section .content { padding:3.5rem 2.5rem !important; }
  .feature-section .image { padding:2.5rem !important; }
}
@media (max-width:740px) {
  html { scroll-padding-top:58px; }
  .site-nav { min-height:58px; padding:0 1.2rem; gap:1rem; }
  .site-nav nav { display:none; }
  .nav-download { margin-left:auto; min-width:0; }
  .site-hero h1 { font-size:clamp(3.2rem,12vw,5rem); }
  .site-hero .content { padding:3.5rem 1.45rem 2.8rem !important; }
  .site-hero .site-stage { padding:1.35rem 1.45rem 1.7rem !important; }
  .stage-label span:last-child { display:none; }
  .site-index { grid-template-columns:1fr; }
  .site-index>div { min-height:76px; padding:1rem 1.45rem; border-right:0; border-bottom:1px solid var(--rule); }
  .site-index>div:last-child { border-bottom:0; }
  .feature-section { display:flex !important; flex-direction:column; min-height:0; }
  .feature-section .content { order:0; width:100% !important; padding:3.5rem 1.45rem !important; }
  .feature-section .image { order:1; width:100% !important; min-height:360px; padding:2.3rem 1.45rem !important; border:0; border-top:1px solid var(--rule); }
  .phone-proof { min-height:550px !important; }
  .keyboard-section { padding:3.6rem 0; }
  .keyboard-section .keyboard-shot { padding:.55rem; }
  .detail-grid { grid-template-columns:1fr; gap:2.5rem; }
  .details-section h2 { margin-bottom:2rem; }
  .notes-row { grid-template-columns:1fr; }
  .notes-row details { min-height:0; }
  .footer-main,.footer-legal { flex-direction:column; gap:1.4rem; }
  .article-hero,.article-body { text-align:left; }
  .article-block { grid-template-columns:34px 1fr; gap:1rem; }
  .footer-main { padding-bottom:2rem; }
  .footer-main nav { flex-wrap:wrap; padding-top:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .onscroll-fade-in .inner>*,.onload-content-fade-right .content,.onload-image-fade-in .image,.onscroll-image-fade-in .image { opacity:1 !important; transform:none !important; }
}