/* Store-informed landing page. No webfonts, trackers, build step or image dependency. */
body[data-page="home"] {
  --canvas:#fcfdff; --surface:#fff; --surface-soft:#f3f8fd; --ink:#15324d;
  --muted:#5c7083; --faint:#5c7083; --line:#e0e8ef; --line-strong:#cad9e6;
  --green:#096ab1; --green-hover:#075389; --green-soft:#eaf5ff; --green-line:#c9e2f7;
  --accent:#096ab1; --sky:#23adf2; --hero-panel:#e8f5ff; --navy:#102f49;
  --shadow-dialog:0 24px 100px #12314a29;
  background:var(--canvas); color:var(--ink);
}
:root[data-theme="dark"] body[data-page="home"] {
  --canvas:#0d1925; --surface:#142535; --surface-soft:#192e41; --ink:#e5f2fc;
  --muted:#afc4d6; --faint:#afc4d6; --line:#294155; --line-strong:#3b5870;
  --green:#83caff; --green-hover:#b3dfff; --green-soft:#183c57; --green-line:#335a79;
  --accent:#83caff; --hero-panel:#16364e; --navy:#091e2f;
}
@media (prefers-color-scheme:dark) { :root:not([data-theme]) body[data-page="home"] {
  --canvas:#0d1925; --surface:#142535; --surface-soft:#192e41; --ink:#e5f2fc;
  --muted:#afc4d6; --faint:#afc4d6; --line:#294155; --line-strong:#3b5870;
  --green:#83caff; --green-hover:#b3dfff; --green-soft:#183c57; --green-line:#335a79;
  --accent:#83caff; --hero-panel:#16364e; --navy:#091e2f;
} }
.home-workspace { margin-left:0; }
.home-main.main-content { max-width:none; padding:0; }
.home-container { width:min(1184px,calc(100% - 96px)); margin-inline:auto; }
.home-main h1,.home-main h2,.home-main h3 { word-break:keep-all; text-wrap:balance; }
.home-main p { word-break:keep-all; overflow-wrap:anywhere; }
.home-main .icon { width:20px; height:20px; }
.home-header { position:sticky; top:0; z-index:25; background:var(--surface); border-bottom:1px solid var(--line); }
.home-header-inner { width:min(1280px,calc(100% - 80px)); min-height:82px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.home-brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); flex-shrink:0; }
.home-brand .app-mark { width:40px; height:40px; border-radius:12px; font-size:29px; background:#0879c2; color:#fff; }
.home-brand .app-mark > span { color:#c1ebff; }
.home-brand strong { display:block; font-size:18px; font-weight:800; letter-spacing:-.6px; line-height:1.3; }
.home-brand small { display:block; margin-top:3px; color:var(--muted); font-size:10px; letter-spacing:.5px; }
.home-header .public-nav { gap:7px; }
.home-header .public-nav>a { min-height:44px; padding:10px 14px; font-size:13px; }
.home-header-actions { display:flex; align-items:center; gap:7px; }
.home-header-actions .icon-button { min-width:40px; height:40px; }
.home-button { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:52px; padding:14px 23px; border:1px solid transparent; border-radius:10px; font-size:14px; font-weight:650; line-height:1.5; text-align:center; }
.home-button .icon { width:19px; height:19px; }
.home-button-primary { background:var(--green); color:var(--surface); }
.home-button-primary:hover { background:var(--green-hover); color:var(--surface); box-shadow:0 6px 20px #0877bd20; }
.home-button-outline { border-color:var(--line-strong); background:var(--surface); color:var(--ink); }
.home-button-outline:hover { background:var(--green-soft); border-color:var(--green); color:var(--green); }
.home-header .header-start { min-height:40px; padding:10px 15px; font-size:12px; margin-left:6px; }
.enhanced .home-menu.js-only { display:none!important; }
.home-hero { display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:30px; padding-block:66px 39px; }
.home-eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:1.75px; color:var(--green); }
.eyebrow-dot { width:7px; height:7px; background:var(--sky); border-radius:50%; box-shadow:0 0 0 5px var(--green-soft); margin:5px; }
.home-hero h1 { font-size:clamp(42px,4.8vw,68px); font-weight:800; line-height:1.2; letter-spacing:-3.9px; margin:25px 0 24px; }
.home-hero h1>span { color:var(--accent); }
.hero-break { display:none; }
.home-lead { color:var(--muted); font-size:16px; line-height:1.95; margin:0; letter-spacing:-.3px; }
.home-lead strong { font-weight:650; color:var(--ink); }
.home-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-store-note { color:var(--muted); font-size:11px; margin:11px 0 0; }
.hero-windows { display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin-top:28px; min-height:32px; }
.hero-windows .icon { width:15px; height:15px; }
.hero-windows strong { color:var(--green); font-weight:650; margin-left:5px; }
.hero-windows:hover strong { text-decoration:underline; text-underline-offset:4px; }
.hero-visual { margin:0; min-width:0; }
.hero-stage { position:relative; height:526px; isolation:isolate; }
.hero-stage:before { content:""; position:absolute; inset:22px 0 23px 26px; background:var(--hero-panel); border-radius:44% 30% 32% 28%; z-index:-3; }
.stage-orbit { position:absolute; border:1px solid var(--green-line); border-radius:50%; z-index:-2; }
.orbit-a { width:440px; height:440px; right:-2px; top:35px; }
.orbit-b { width:350px; height:350px; right:40px; top:80px; }
.stage-plus { position:absolute; font-weight:300; color:var(--accent); font-size:24px; }
.plus-a { top:55px; left:95px; }.plus-b { bottom:43px; right:75px; }
.hero-note { position:absolute; left:3px; top:92px; display:flex; align-items:center; gap:8px; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:0 8px 28px #12385408; padding:12px 16px; border-radius:12px; font-size:11px; transform:rotate(-5deg); z-index:3; }
.hero-note>span { color:var(--green); }.hero-note .icon { width:18px; }
.product-phone { position:absolute; top:8px; left:31%; width:262px; height:474px; padding:13px 13px 17px; border-radius:35px; border:5px solid #fff; outline:1px solid #cbdfea; background:#fbfdff; color:#183751; box-shadow:16px 26px 60px #15446422,0 4px 9px #124a7514; transform:rotate(6deg); overflow:hidden; }
.phone-status { font-size:9px; font-weight:700; padding:0 7px 12px; display:flex; justify-content:space-between; line-height:1.4; color:#213e53; }
.phone-camera { position:absolute; top:11px; left:50%; width:45px; height:11px; margin-left:-22px; border-radius:12px; background:#16394f; }
.phone-appbar { display:flex; justify-content:space-between; align-items:center; padding:4px 0 16px; }
.phone-appbar>strong { font-size:18px; letter-spacing:-.9px; color:#087abd; font-weight:800; }.phone-appbar strong>span { color:#39baf5; }
.phone-appbar>.icon { width:16px; height:16px; color:#486f86; }
.phone-heading>span { display:block; color:#567487; font-size:9px; margin-bottom:4px; }.phone-heading>strong { display:block; font-size:12px; letter-spacing:-.4px; }
.phone-folders { display:flex; align-items:center; gap:5px; font-size:9px; margin:14px 0 12px; }
.phone-folders>span { display:flex; align-items:center; gap:3px; border:1px solid #dbe9f1; border-radius:15px; padding:4px 9px; background:#fff; color:#4d6b80; }.phone-folders>span.selected { background:#117abc; color:#fff; border-color:#117abc; }.phone-folders .icon { width:10px; height:10px; }
.phone-entry { padding:10px 12px; margin-bottom:8px; border:1px solid #dce8f1; border-radius:11px; background:#fff; }
.phone-entry.active { border-color:#7bbfe8; background:#eff8fe; }
.phone-entry>div { display:flex; align-items:center; justify-content:space-between; }.phone-entry code { color:#0068a6; font-size:11px; font-weight:750; }.phone-entry div>span { font-size:8px; color:#527187; }
.phone-entry p { font-size:9px; color:#38576c; margin:6px 0 0; line-height:1.7; }
.entry-tag { display:inline-block; font-size:7px; color:#165f91; background:#dbeeff; margin-top:7px; padding:1px 5px; border-radius:3px; }
.phone-add { position:absolute; display:grid; place-items:center; bottom:63px; right:18px; width:33px; height:33px; background:#0e8bd0; color:#fff; border-radius:50%; box-shadow:0 3px 8px #188bcc35; }
.phone-add .icon { width:18px; }
.phone-bottom { position:absolute; display:flex; justify-content:space-around; left:7px; right:7px; bottom:15px; border-top:1px solid #e0edf5; padding:9px 9px 0; background:#fbfdff; font-size:8px; color:#566f80; }.phone-bottom span { display:flex; flex-direction:column; align-items:center; gap:3px; }.phone-bottom .icon { width:15px; height:15px; }.phone-bottom>span:first-child { color:#056cae; }
.phone-home-indicator { position:absolute; width:70px; height:3px; bottom:4px; left:50%; margin-left:-35px; background:#39566c; border-radius:3px; }
.expansion-float { position:absolute; left:6px; right:73px; bottom:41px; border:1px solid var(--line-strong); border-radius:15px; background:var(--surface); color:var(--ink); box-shadow:0 15px 35px #183e6317; transform:rotate(-3deg); z-index:4; }
.expansion-top { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:10px; }.float-icon { display:grid; place-items:center; width:24px; height:24px; background:var(--green-soft); color:var(--green); border-radius:6px; }.expansion-top .icon { width:14px; height:14px; }.expansion-check { color:var(--green); margin-left:auto; }
.expansion-content { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px; }.expansion-content>code { color:var(--green); font-size:20px; font-weight:700; }.expansion-content>.icon { color:var(--muted); width:17px; }.expansion-content>span { font-size:12px; color:var(--ink); line-height:1.8; }
.hero-keycap { position:absolute; display:grid; place-items:center; width:44px; height:44px; background:var(--surface); color:var(--green); border:1px solid var(--line-strong); border-bottom-width:4px; box-shadow:0 5px 12px #1238510a; font-size:25px; border-radius:10px; font-weight:600; }
.keycap-a { left:28px; top:225px; transform:rotate(-14deg); }.keycap-b { right:6px; top:182px; transform:rotate(13deg); }
.hero-visual figcaption { text-align:center; color:var(--muted); font-size:9px; line-height:1.7; margin:6px 5px 0; }
.home-benefits { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); padding-block:24px; gap:15px; }
.home-benefits>div { display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; color:var(--muted); }.home-benefits .icon { color:var(--green); width:21px; height:21px; }.home-benefits strong { font-weight:650; color:var(--ink); }
.home-section { padding-block:87px; }
.home-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.home-kicker { display:block; color:var(--green); font-size:10px; font-weight:700; letter-spacing:1.7px; line-height:1.6; }
.home-main h2 { font-size:35px; line-height:1.35; font-weight:750; letter-spacing:-1.5px; margin:13px 0 0; }
.home-section-heading>p { margin:0 0 3px; color:var(--muted); font-size:13px; line-height:1.9; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { min-width:0; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:18px; position:relative; overflow:hidden; }
.feature-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--green-line); background:var(--green-soft); color:var(--green); border-radius:11px; margin-bottom:18px; }
.feature-card h3 { font-size:21px; font-weight:700; line-height:1.45; letter-spacing:-.7px; margin:0 0 11px; }
.feature-card>p { color:var(--muted); font-size:12px; line-height:1.9; margin:0; }
.feature-card p.feature-footnote { font-size:9px; margin-top:14px; }
.feature-large { background:var(--surface-soft); }
.replacement-graphic { margin-top:24px; }
.mini-label { font-size:9px; color:var(--muted); letter-spacing:1.1px; font-weight:650; }
.replacement-line { display:flex; align-items:center; gap:7px; margin:11px 0 17px; }
.replacement-line kbd { display:grid; place-items:center; width:46px; height:45px; background:var(--surface); border:1px solid var(--line-strong); border-bottom-width:3px; border-radius:8px; font-size:21px; color:var(--green); font-weight:650; }
.replacement-line>span { margin-left:auto; color:var(--green); }
.replacement-result { display:flex; align-items:flex-start; gap:6px; padding:13px 10px; color:var(--green); border:1px solid var(--green-line); border-radius:7px; background:var(--green-soft); font-size:10px; line-height:1.7; }.replacement-result .icon { width:13px; height:13px; margin-top:3px; }
.folder-visual { display:flex; gap:0; justify-content:center; align-items:flex-end; margin:32px 0 11px; height:122px; }
.folder-tile { display:flex; flex-direction:column; gap:13px; padding:16px 13px; min-width:94px; height:106px; border:1px solid #bbd9f0; border-radius:12px; background:#e1f1ff; color:#185d91; box-shadow:0 7px 16px #1d528d0b; }
.folder-tile .icon { width:29px; height:29px; stroke-width:1.5; }.folder-tile b { font-size:12px; font-weight:650; }.folder-1 { transform:rotate(-10deg); margin-right:-12px; }.folder-2 { background:#f1f6ff; transform:translateY(-13px); z-index:1; }.folder-3 { background:#d1eaff; transform:rotate(10deg); margin-left:-12px; }
.backup-visual { display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-radius:12px; padding:18px 12px; margin-top:36px; background:var(--surface-soft); }
.backup-visual>span { color:var(--green); }.backup-visual>span>.icon { width:28px; height:28px; }.backup-visual strong { display:block; font-size:11px; font-weight:700; }.backup-visual small { display:block; font-size:9px; color:var(--muted); margin-top:4px; }.backup-visual>.icon { color:var(--green); margin-left:auto; width:17px; }
.feature-compact { padding-block:25px; }.feature-compact .feature-icon { margin-bottom:16px; }.feature-compact h3 { font-size:18px; letter-spacing:-.8px; }.feature-compact p { min-height:47px; }
.feature-mini { display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:1px solid var(--line); margin-top:21px; font-size:10px; color:var(--muted); }.feature-mini>.icon { width:16px; color:var(--green); }.password-dots { color:var(--green); letter-spacing:5px; }.example-toggle { display:block; width:30px; height:18px; border-radius:15px; background:var(--green); position:relative; }.example-toggle:after { content:""; position:absolute; width:12px; height:12px; background:var(--surface); border-radius:50%; right:3px; top:3px; }
.trigger-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:21px; padding-top:16px; border-top:1px solid var(--line); }.trigger-chips>span { font-size:9px; color:var(--green); background:var(--green-soft); border:1px solid var(--green-line); border-radius:5px; padding:3px 9px; }
/* Local-only demo: light inputs deliberately remain light in either site theme. */
.home-demo-section { background:#102f49; color:#eaf6ff; padding-block:74px 33px; }
.demo-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:30px 85px; align-items:center; }
.demo-intro .home-kicker { color:#9dcff4; }.demo-intro h2 { color:#f0f8ff; font-size:36px; }
.demo-intro>p { color:#b9cddd; font-size:13px; line-height:1.9; margin:22px 0 0; }
.demo-recipe { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:#c1d9e8; margin-top:28px; font-size:11px; }.demo-recipe>code { border:1px solid #416c8d; border-radius:7px; padding:5px 12px; background:#193f5d; color:#e9f6ff; font-size:15px; }
.demo-intro p.demo-small-note { display:flex; gap:8px; font-size:10px; color:#b5ccde; margin-top:32px; }.demo-small-note>.icon { width:14px; height:14px; margin-top:3px; }
.demo-panel { min-width:0; color:#193750; color-scheme:light; border:1px solid #d3e4f0; border-radius:15px; background:#fff; box-shadow:0 16px 40px #06192733; }
.enhanced .demo-tabs { display:flex; gap:5px; padding:9px 10px; border-bottom:1px solid #dfe9f1; background:#f1f7fc; border-radius:15px 15px 0 0; }
.demo-tabs>button { flex:1; color:#526d82; background:transparent; border:1px solid transparent; border-radius:8px; padding:10px 7px; min-height:42px; font-size:12px; font-weight:600; }.demo-tabs>button[aria-selected=true] { color:#096ab1; background:#fff; border-color:#d4e3ed; box-shadow:0 2px 4px #174b7808; }.demo-tabs>button:hover { color:#085488; background:#e3effa; }
.demo-panel :focus-visible { outline-color:#096ab1; }
.demo-pane { padding:22px 25px 18px; }.enhanced .demo-form.js-only { display:block!important; }
.demo-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }.demo-label-row>label { font-size:11px; color:#4c6780; font-weight:550; }
.demo-text-button { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 0; color:var(--green); background:transparent; font-size:10px; white-space:nowrap; }.demo-text-button:hover { text-decoration:underline; text-underline-offset:4px; }.demo-text-button .icon { width:13px; height:13px; }.demo-panel .demo-text-button { color:#096ab1; }
.demo-input-wrap { display:flex; align-items:center; gap:10px; min-height:53px; border:1px solid #85b5d9; border-radius:9px; padding:6px 6px 6px 13px; background:#fff; box-shadow:0 0 0 3px #edf6ff; }.demo-input-wrap>span { color:#526f83; }.demo-input-wrap>span>.icon { width:18px; }.demo-input-wrap input { flex:1; min-width:0; width:100%; border:0; background:transparent; padding:3px 0; color:#193750; font-size:16px; border-radius:3px; outline-offset:3px; }.demo-input-wrap input::placeholder { font-size:13px; color:#5b7083; }.demo-input-wrap input[aria-invalid=true] { outline:2px solid #a94233; outline-offset:2px; }.demo-input-wrap>button { display:grid; place-items:center; min-width:39px; height:39px; color:#fff; background:#096ab1; border-radius:7px; }.demo-input-wrap>button:hover { background:#075389; }
.demo-input-hint { color:#5b7083; font-size:9px; margin:9px 0 17px; line-height:1.75; }.demo-output-label { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#4e687e; font-size:10px; margin:18px 0 10px; }.demo-output-label>span:first-child { display:flex; gap:6px; align-items:center; }.demo-output-label .icon { width:13px; height:13px; }.demo-result-badge { color:#22608c; background:#eaf5ff; border:1px solid #d3e6f7; border-radius:5px; font-size:8px; padding:2px 7px; }
.demo-output { min-height:141px; padding:18px 19px; background:#f2f8fd; border:1px solid #dce9f3; border-radius:9px; color:#244861; font-size:13px; line-height:1.95; white-space:pre-wrap; overflow-wrap:anywhere; }.demo-output.is-waiting { color:#5b7083; font-size:12px; }
.demo-bottom { align-items:center; justify-content:space-between; gap:10px; padding-top:10px; }.demo-bottom>p { color:#526c80; font-size:9px; line-height:1.6; margin:0; }.demo-privacy-note { grid-column:1/-1; display:flex; align-items:flex-start; justify-content:center; gap:7px; font-size:10px; color:#b5ccde; margin:0; line-height:1.8; }.demo-privacy-note .icon { width:12px; height:12px; margin-top:3px; }
.dynamic-section { display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:center; }
.dynamic-copy h2>span { color:var(--green); }.dynamic-copy>p { font-size:13px; color:var(--muted); margin:20px 0 0; line-height:1.9; }.dynamic-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }.dynamic-tags>span { display:inline-flex; align-items:center; gap:6px; font-size:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); border-radius:18px; padding:5px 12px; }.dynamic-tags .icon { width:12px; height:12px; }.dynamic-copy p.dynamic-note { font-size:9px; margin-top:20px; }
.dynamic-example { border:1px solid var(--line-strong); background:var(--surface); border-radius:18px; box-shadow:0 12px 24px #114a7710; overflow:hidden; }.dynamic-bar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:14px 22px; background:var(--surface-soft); color:var(--green); }.dynamic-bar>.icon { width:16px; height:16px; }.dynamic-body { padding:24px; }.tag-template { color:var(--muted); font-size:15px; line-height:2.3; margin:10px 0; }.tag-template code { color:var(--green); background:var(--green-soft); border:1px solid var(--green-line); border-radius:6px; padding:3px 7px; font-size:14px; white-space:nowrap; }.tag-connector { color:var(--green); margin:13px 0; }.dynamic-output { border:1px solid var(--green-line); background:var(--green-soft); border-radius:10px; padding:16px; color:var(--green); font-size:15px; font-weight:600; margin:10px 0 0; }.dynamic-example-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }.dynamic-example-footer>span { font-size:9px; color:var(--muted); }
.screenshot-section { padding-bottom:8px; }.store-gallery { border:1px solid var(--line-strong); border-radius:18px; background:var(--surface); }
.store-gallery>summary { display:flex; align-items:center; gap:22px; padding:28px 32px; cursor:pointer; list-style:none; border-radius:18px; }.store-gallery>summary::-webkit-details-marker { display:none; }.store-gallery>summary:hover { background:var(--surface-soft); }.gallery-symbol { display:grid; place-items:center; width:66px; height:74px; border:1px solid var(--green-line); background:var(--green-soft); color:var(--green); border-radius:17px; transform:rotate(-7deg); }.gallery-symbol>.icon { width:34px; height:34px; stroke-width:1.4; }.gallery-summary-copy { display:block; }.gallery-summary-copy>strong { display:block; font-size:21px; font-weight:700; letter-spacing:-.6px; margin:5px 0; }.gallery-summary-copy>span:last-child { font-size:11px; color:var(--muted); }.gallery-open-label { margin-left:auto; color:var(--green); display:inline-flex; align-items:center; gap:15px; font-size:12px; white-space:nowrap; }.store-gallery[open] .gallery-open-label>.icon { transform:rotate(180deg); }
.gallery-content { padding:0 28px 25px; }.gallery-notice { display:flex; align-items:flex-start; gap:7px; margin:8px 0 23px; font-size:11px; color:var(--muted); }.gallery-notice>.icon { flex-shrink:0; width:15px; margin-top:2px; }.store-shots { display:grid; grid-template-columns:repeat(4,1fr); gap:25px 18px; }.store-shot { min-width:0; margin:0; }.shot-frame { position:relative; height:300px; display:grid; place-items:center; background:var(--green-soft); border:1px solid var(--green-line); border-radius:12px; overflow:hidden; }.shot-frame img { height:296px; width:148px; object-fit:contain; }.image-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:var(--green); text-align:center; padding:18px; }.image-fallback .shot-number { font-size:13px; letter-spacing:3px; }.image-fallback>.icon { width:38px; height:38px; stroke-width:1.2; }.image-fallback>strong { font-size:12px; }.image-fallback>[data-image-status] { font-size:9px; color:var(--muted); }.store-shot figcaption { margin:13px 0 0; }.store-shot figcaption>strong { display:block; font-size:12px; }.store-shot figcaption>span { display:block; font-size:10px; margin-top:3px; color:var(--muted); }.store-shot figcaption>a { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:10px; min-height:32px; }.store-shot figcaption>a>.icon { width:12px; height:12px; }.gallery-store-link { display:inline-flex; align-items:center; gap:9px; font-size:12px; padding-top:20px; }
.home-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding-top:9px; }.step-number { display:flex; align-items:center; gap:20px; color:var(--green); font-size:27px; font-weight:450; line-height:1; letter-spacing:-1px; margin-bottom:25px; }.step-number>span { flex:1; height:1px; background:var(--line-strong); }.home-steps h3 { margin:0 0 11px; font-size:15px; font-weight:700; letter-spacing:-.5px; }.home-steps p { margin:0; color:var(--muted); font-size:12px; line-height:1.9; }.home-steps code { background:var(--green-soft); color:var(--green); border-radius:3px; padding:1px 4px; }
.home-privacy { display:flex; align-items:center; gap:27px; padding:34px 36px; background:var(--surface-soft); border:1px solid var(--line-strong); border-radius:17px; }.home-privacy-icon { display:grid; place-items:center; flex-shrink:0; width:72px; height:72px; border:1px solid var(--green-line); border-radius:20px; background:var(--surface); color:var(--green); }.home-privacy-icon>.icon { width:35px; height:35px; stroke-width:1.3; }.home-privacy-copy { flex:1; }.home-privacy h2 { font-size:24px; margin:7px 0 9px; letter-spacing:-.8px; }.home-privacy p { font-size:12px; color:var(--muted); line-height:1.9; margin:0; }.home-privacy>.home-button { white-space:nowrap; font-size:12px; padding-inline:17px; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.platform-card { min-width:0; padding:31px 33px 22px; border:1px solid var(--line-strong); border-radius:18px; background:var(--surface); }.platform-android { background:var(--surface-soft); border-color:var(--green-line); }.platform-card-top { display:flex; justify-content:space-between; align-items:center; gap:15px; }.platform-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--green); background:var(--green-soft); border:1px solid var(--green-line); border-radius:12px; }.platform-icon>.icon { width:24px; height:24px; }.platform-category { color:var(--muted); font-size:9px; letter-spacing:1.2px; font-weight:650; }.platform-card h3 { font-size:25px; margin:22px 0 13px; letter-spacing:-1px; }.platform-card h3>span { font-size:17px; font-weight:450; letter-spacing:-.2px; color:var(--muted); margin-left:5px; }.platform-card>p { color:var(--muted); font-size:12px; line-height:1.9; margin:0 0 23px; }.platform-card>.home-button { width:100%; font-size:13px; }.platform-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; }.platform-bottom>span { font-size:9px; color:var(--muted); }.platform-bottom>a { display:flex; align-items:center; gap:6px; min-height:34px; font-size:10px; }.platform-bottom .icon { width:12px; height:12px; }.platform-download-note { display:flex; align-items:flex-start; gap:6px; font-size:10px; color:var(--muted); margin:16px 0 0; line-height:1.8; }.platform-download-note>.icon { flex-shrink:0; width:13px; height:13px; margin-top:3px; }
.home-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; padding-bottom:74px; }.faq-intro>p { color:var(--muted); font-size:12px; margin:21px 0 7px; }.faq-intro>a { display:inline-flex; align-items:center; gap:8px; font-size:12px; min-height:36px; }.faq-intro>a>.icon { width:14px; height:14px; }.faq-list { border-top:1px solid var(--line-strong); }.faq-list>details { border-bottom:1px solid var(--line); }.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:67px; padding:18px 4px; cursor:pointer; font-size:13px; font-weight:650; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary>.icon { width:16px; height:16px; color:var(--muted); }.faq-list details[open] summary>.icon { transform:rotate(45deg); }.faq-answer { padding:0 32px 23px 4px; }.faq-answer>p { font-size:12px; line-height:1.9; color:var(--muted); margin:0; }.faq-answer>a { display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:10px; min-height:30px; }.faq-answer>a>.icon { width:13px; height:13px; }
.home-closing { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:35px; padding:44px 48px; background:var(--green-soft); border:1px solid var(--green-line); border-radius:20px; }.home-closing h2 { font-size:34px; position:relative; z-index:1; }.closing-actions { display:flex; flex-direction:column; align-items:center; gap:14px; z-index:1; }.closing-actions>a:not(.home-button) { display:inline-flex; align-items:center; gap:7px; font-size:11px; min-height:32px; }.closing-actions>a>.icon { width:16px; height:16px; }.closing-symbol { position:absolute; right:31%; top:-20px; font-size:195px; line-height:1; color:var(--green-line); font-weight:700; pointer-events:none; }
.store-source-note { text-align:center; color:var(--muted); font-size:9px; margin-top:25px; line-height:1.9; }.store-source-note>a { text-decoration:underline; text-underline-offset:3px; }
.home-workspace .site-footer { width:min(1184px,calc(100% - 96px)); max-width:none; padding:27px 0 32px; margin-top:45px; }.home-workspace .site-footer p { font-size:10px; }.home-workspace .footer-right nav { font-size:11px; }
.legacy-policy-notice { display:flex; align-items:flex-start; gap:10px; margin-top:22px; border:1px solid var(--green-line); background:var(--green-soft); padding:15px 19px; border-radius:10px; font-size:12px; }.legacy-policy-notice>p { margin:0; }.legacy-policy-notice a { display:inline-flex; align-items:center; gap:5px; text-decoration:underline; }.legacy-policy-notice .icon { width:15px; height:15px; }
@media (min-width:1350px) { .home-hero h1 { font-size:65px; } }
@media (max-width:1150px) {
  .home-container,.home-workspace .site-footer { width:calc(100% - 64px); }.home-header-inner { width:calc(100% - 48px); gap:12px; }
  .home-header .public-nav { gap:2px; }.home-header .public-nav>a { padding-inline:9px; }.home-header-actions { gap:3px; }.home-header .header-start { padding-inline:11px; }
  .home-hero { gap:12px; }.home-hero h1 { letter-spacing:-2.5px; font-size:52px; }.hero-stage { height:510px; }.product-phone { left:26%; }.expansion-float { right:23px; }.hero-note { left:-10px; }.hero-keycap.keycap-b { right:0; }.orbit-a { width:380px; height:380px; right:0; }.orbit-b { width:300px; height:300px; right:40px; }.home-hero-actions .home-button { font-size:12px; padding-inline:15px; }.home-lead { font-size:14px; }
  .feature-card { padding:24px; }.feature-card h3 { font-size:19px; }.feature-compact h3 { font-size:16px; }.folder-tile { min-width:77px; padding:14px 10px; }.demo-layout { gap:27px 45px; }.dynamic-section { gap:50px; }.home-privacy { gap:19px; padding:28px; }.home-privacy h2 { font-size:21px; }.home-privacy-icon { width:59px; height:59px; }.home-faq { gap:45px; }
}
@media (max-width:900px) {
  .home-header-inner { flex-wrap:wrap; gap:0; padding-top:12px; }.home-header .public-nav { order:3; width:100%; justify-content:center; border-top:1px solid var(--line); margin-top:10px; padding-block:2px; }.home-header .public-nav>a { padding:7px 15px; }.home-brand .app-mark { width:34px; height:34px; font-size:25px; }.home-brand strong { font-size:16px; }.home-brand small { font-size:9px; }.enhanced .home-menu.js-only { display:flex!important; }.home-header-actions .header-start { display:none; }
  .home-hero { padding-top:36px; grid-template-columns:1fr 1fr; }.home-hero h1 { font-size:46px; }.hero-break { display:block; }.home-lead { font-size:13px; }.home-hero-actions { gap:8px; }.home-hero-actions .home-button { min-height:45px; padding:11px 13px; font-size:11px; }.hero-windows { font-size:10px; gap:5px; }.hero-windows strong { display:block; margin-left:0; }.hero-stage { height:470px; }.product-phone { width:229px; height:434px; left:20%; top:4px; padding:12px 11px; }.phone-heading>strong { font-size:11px; }.phone-entry { padding:9px 10px; }.phone-folders { margin-block:10px; }.phone-appbar { padding-bottom:13px; }.phone-entry p { font-size:8px; }.phone-add { bottom:60px; }.expansion-float { right:2px; left:-16px; bottom:16px; }.expansion-content { padding:14px; gap:7px; }.expansion-content>span { font-size:10px; }.expansion-content>code { font-size:16px; }.expansion-top { font-size:9px; }.hero-note { top:60px; left:-15px; font-size:9px; padding:10px; }.hero-keycap { width:33px; height:33px; font-size:20px; }.keycap-a { left:0; top:210px; }.keycap-b { display:none; }.orbit-a { width:300px; height:300px; right:-5px; top:60px; }.orbit-b { width:250px; height:250px; right:20px; top:85px; }.hero-stage:before { inset:20px -3px 45px 8px; }.hero-visual figcaption { font-size:8px; }
  .home-benefits { gap:10px; }.home-benefits>div { font-size:10px; gap:8px; }.home-benefits>div>span>strong { display:block; }.home-section { padding-block:64px; }.home-main h2 { font-size:29px; }.home-section-heading>p { font-size:11px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.feature-large { grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-start; }.feature-large .replacement-graphic { margin-top:auto; padding-top:35px; }.feature-folder,.feature-backup { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }.feature-folder .feature-icon,.feature-backup .feature-icon { grid-column:1/-1; }.feature-folder>p,.feature-backup>p { grid-column:1/-1; }.feature-folder .folder-visual,.feature-backup .backup-visual { grid-column:1/-1; margin-top:20px; }.feature-folder h3,.feature-backup h3 { grid-column:1/-1; }.feature-card>p { font-size:11px; }.feature-compact { min-height:233px; }.demo-layout { gap:25px 30px; grid-template-columns:.85fr 1.15fr; }.demo-intro h2 { font-size:29px; }.demo-intro>p { font-size:12px; }.demo-pane { padding:18px; }.dynamic-section { gap:30px; }.dynamic-copy h2 { font-size:28px; }.dynamic-copy>p { font-size:12px; }.dynamic-body { padding:20px; }.tag-template { font-size:13px; }.tag-template code { font-size:12px; }.dynamic-output { font-size:12px; }
  .home-privacy { flex-wrap:wrap; }.home-privacy>.home-button { margin-left:78px; }.home-privacy-copy { flex-basis:calc(100% - 80px); }.platform-card { padding:26px 24px 18px; }.platform-card h3 { font-size:22px; }.platform-card h3>span { font-size:14px; }.platform-card>p { font-size:11px; }.home-faq { grid-template-columns:.75fr 1.25fr; gap:30px; }.faq-list summary { font-size:12px; }.home-closing { padding:35px; }.home-closing h2 { font-size:29px; }.home-closing .home-button { font-size:12px; padding-inline:15px; }.store-shots { grid-template-columns:repeat(3,1fr); }.home-steps { gap:23px; }.home-steps h3 { font-size:13px; }.home-steps p { font-size:11px; }
}
@media (max-width:640px) {
  .home-container,.home-workspace .site-footer { width:calc(100% - 40px); }.home-header-inner { width:calc(100% - 32px); padding-top:10px; }.home-header .public-nav { margin-top:8px; }.home-header .public-nav>a { min-height:43px; padding:8px 12px; font-size:12px; }.home-header-actions .icon-button { width:39px; min-width:39px; height:42px; }.home-brand { gap:8px; }.home-brand small { font-size:8px; }
  .home-hero { display:flex; flex-direction:column; padding:37px 0 28px; gap:17px; align-items:stretch; }.home-eyebrow { font-size:8px; letter-spacing:1.3px; }.home-hero h1 { font-size:43px; letter-spacing:-2.9px; line-height:1.24; margin:21px 0 20px; }.hero-break { display:none; }.home-lead { font-size:13px; line-height:1.95; }.home-lead br:last-child { display:none; }.home-hero-actions { gap:8px; margin-top:23px; }.home-hero-actions .home-button { flex:1 1 auto; min-height:49px; padding-inline:13px; font-size:11px; gap:7px; }.home-hero-actions .home-button>.icon { width:16px; height:16px; }.hero-store-note { font-size:9px; }.hero-windows { margin-top:13px; font-size:10px; }.hero-windows strong { display:inline; margin-left:2px; }
  .hero-visual { width:100%; max-width:450px; align-self:center; }.hero-stage { height:458px; }.product-phone { left:27%; width:231px; height:433px; top:3px; }.hero-note { left:0; top:63px; padding:11px 12px; }.expansion-float { bottom:20px; left:0; right:18px; }.expansion-content>span { font-size:11px; }.hero-stage:before { inset:21px -5px 25px 8px; }.orbit-a { width:320px; height:320px; right:0; top:50px; }.orbit-b { width:260px; height:260px; right:30px; top:80px; }.plus-a { top:15px; left:45px; }.plus-b { right:15px; bottom:9px; }.keycap-a { left:6px; top:212px; }.hero-visual figcaption { font-size:8px; margin-top:5px; }
  .home-benefits { grid-template-columns:1fr 1fr; padding-block:21px; gap:22px 13px; }.home-benefits>div { justify-content:flex-start; font-size:10px; gap:10px; }.home-benefits>div>span>strong { display:inline; }.home-benefits .icon { width:19px; height:19px; }
  .home-section { padding-block:54px; }.home-section-heading { display:block; margin-bottom:25px; }.home-kicker { font-size:8px; letter-spacing:1.4px; }.home-main h2 { font-size:27px; letter-spacing:-1.3px; }.home-section-heading>p { font-size:11px; margin:15px 0 0; }.feature-grid { grid-template-columns:1fr; gap:13px; }.feature-card { padding:25px; }.feature-large { grid-row:auto; }.feature-card h3 { font-size:20px; }.feature-card h3>br { display:none; }.feature-card>p { font-size:12px; }.feature-large .replacement-graphic { margin-top:24px; padding:0; }.replacement-line { margin-bottom:15px; }.replacement-result { font-size:11px; padding:13px; }.feature-folder,.feature-backup { display:block; }.folder-visual { height:102px; margin-block:25px 9px; }.folder-tile { min-width:101px; height:95px; }.feature-compact { min-height:0; }.feature-compact>p { min-height:0; }.feature-compact h3 { font-size:18px; }.feature-icon { width:36px; height:36px; margin-bottom:14px; }.backup-visual { margin-top:20px; }.feature-mini,.trigger-chips { margin-top:19px; }.feature-mini { font-size:11px; }.trigger-chips>span { font-size:10px; }
  .home-demo-section { padding-block:49px 26px; }.demo-layout { grid-template-columns:1fr; gap:27px; }.demo-intro h2 { font-size:29px; }.demo-intro>p { font-size:12px; margin-top:16px; }.demo-desktop-break { display:none; }.demo-recipe { margin-top:20px; }.demo-intro p.demo-small-note { margin-top:20px; }.demo-pane { padding:20px 18px 16px; }.demo-tabs>button { font-size:11px; }.demo-output { min-height:137px; font-size:12px; }.demo-privacy-note { font-size:9px; text-align:left; justify-content:flex-start; }.demo-bottom { align-items:flex-start; }.demo-bottom>p { padding-top:5px; }
  .dynamic-section { display:flex; flex-direction:column; gap:26px; align-items:stretch; }.dynamic-copy>p { font-size:12px; }.dynamic-copy p.dynamic-note { font-size:9px; }.dynamic-body { padding:23px; }.tag-template { font-size:14px; }.tag-template code { font-size:13px; }.dynamic-output { font-size:13px; }.dynamic-example-footer>span { font-size:9px; }
  .store-gallery>summary { padding:22px 18px; gap:13px; flex-wrap:wrap; }.gallery-symbol { width:44px; height:53px; border-radius:12px; }.gallery-symbol>.icon { width:27px; height:27px; }.gallery-summary-copy { flex:1; }.gallery-summary-copy>strong { font-size:16px; line-height:1.5; }.gallery-summary-copy>span:last-child { font-size:10px; }.gallery-open-label { font-size:10px; margin-left:57px; margin-top:-5px; }.gallery-content { padding:0 16px 21px; }.gallery-notice { font-size:10px; }.store-shots { grid-template-columns:repeat(2,1fr); gap:20px 12px; }.shot-frame { height:275px; }.shot-frame img { width:auto; max-width:100%; height:auto; max-height:273px; }.image-fallback { padding:12px; }.image-fallback>strong { font-size:11px; }.store-shot figcaption>strong { font-size:11px; }.store-shot figcaption>span { font-size:9px; }.gallery-store-link { font-size:11px; }
  .home-steps { grid-template-columns:1fr; gap:27px; padding-top:0; }.step-number { margin-bottom:15px; font-size:24px; }.home-steps h3 { font-size:15px; }.home-steps p { font-size:12px; }.home-privacy { padding:25px; gap:16px; }.home-privacy-icon { width:46px; height:46px; border-radius:13px; }.home-privacy-icon>.icon { width:26px; height:26px; }.home-privacy-copy { flex-basis:100%; }.home-privacy h2 { font-size:22px; margin-top:7px; }.home-privacy p { font-size:11px; }.home-privacy>.home-button { margin:0; min-height:44px; font-size:11px; }
  .platform-grid { grid-template-columns:1fr; gap:15px; }.platform-card { padding:25px 24px 18px; }.platform-card h3 { font-size:25px; margin-top:19px; }.platform-card h3>span { font-size:16px; }.platform-card>p { font-size:12px; }.platform-card>.home-button { font-size:12px; }.platform-bottom>span { font-size:9px; }.platform-download-note { font-size:9px; }
  .home-faq { grid-template-columns:1fr; gap:24px; padding-bottom:46px; }.faq-intro h2>br { display:none; }.faq-intro>p { margin-top:15px; font-size:11px; }.faq-intro>a { font-size:11px; }.faq-list summary { font-size:12px; min-height:63px; }.faq-answer { padding-right:10px; }.faq-answer>p { font-size:11px; }
  .home-closing { flex-direction:column; align-items:flex-start; gap:24px; padding:30px 27px; }.home-closing h2 { font-size:29px; }.closing-actions { align-items:flex-start; gap:9px; }.closing-actions .home-button { font-size:12px; }.closing-symbol { font-size:157px; top:-5px; right:0; }.store-source-note { text-align:left; font-size:8px; margin-top:19px; }.home-workspace .site-footer { margin-top:30px; padding-block:24px; gap:16px; }.home-workspace .footer-right nav { flex-wrap:wrap; font-size:10px; }.home-workspace .footer-right p { font-size:9px; }.legacy-policy-notice { font-size:10px; padding:13px; }
}
@media (max-width:359px) {
  .home-container,.home-workspace .site-footer { width:calc(100% - 32px); }.home-header-inner { width:calc(100% - 24px); }.home-header .public-nav>a { padding-inline:9px; font-size:11px; }.home-header-actions .icon-button { width:35px; min-width:35px; }.home-hero h1 { font-size:38px; letter-spacing:-2.8px; }.home-hero-actions { flex-wrap:wrap; }.home-hero-actions .home-button { font-size:10px; padding-inline:10px; }.home-hero-actions .icon { width:14px; }.home-lead { font-size:12px; }.hero-windows { font-size:9px; }.hero-stage { height:435px; }.product-phone { left:22%; width:215px; height:420px; }.phone-entry { padding-block:8px; }.phone-folders { margin-block:8px; }.phone-appbar { padding-bottom:11px; }.phone-heading>strong { font-size:10px; }.expansion-float { right:1px; bottom:13px; }.expansion-top { font-size:8px; }.expansion-content>span { font-size:10px; }.orbit-a { width:276px; height:276px; right:0; }.orbit-b { width:226px; height:226px; right:25px; }.hero-note { font-size:8px; }.home-benefits>div { font-size:9px; gap:7px; }.home-benefits .icon { width:17px; height:17px; }.demo-label-row { gap:4px; }.demo-label-row>label { font-size:10px; }.demo-text-button { font-size:9px; }.gallery-summary-copy>strong { font-size:14px; }.shot-frame { height:238px; }.shot-frame img { max-height:236px; }
}
@media (pointer:coarse) {
  .home-header-actions .icon-button,.demo-tabs>button,.demo-input-wrap>button,.demo-text-button { min-height:44px; }
  .home-header-actions .icon-button { height:44px; }.demo-input-wrap>button { min-width:44px; }
}
@media (prefers-reduced-motion:reduce) { .home-main * { animation:none!important; transition:none!important; } }
@media print {
  body[data-page=home] { background:#fff!important; color:#111!important; }.home-header,.home-main .js-only,.home-closing,.hero-stage,.gallery-symbol,.closing-symbol { display:none!important; }
  .home-container,.home-workspace .site-footer { width:100%; }.home-hero,.dynamic-section,.home-faq { display:block; }.home-hero { padding-top:10px; }.home-section { padding-block:25px; }.home-main h1 { font-size:35px; }.home-main h2 { font-size:25px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.feature-card,.platform-card { break-inside:avoid; }.home-demo-section { background:#fff; color:#111; padding-block:20px; }.demo-intro h2,.demo-intro>p,.demo-intro .home-kicker,.demo-privacy-note { color:#333; }.demo-layout { display:block; }.demo-panel { margin-top:20px; box-shadow:none; }.home-workspace .site-footer { margin-top:20px; }
}