:root { --bg:#faf9f6; --surface:#fff; --surface-alt:#f1f0ea; --text:#17201d; --muted:#69736f; --line:#d9ddd7; --accent:#306c52; --accent-ink:#fff; --radius:18px; --display-font:Georgia, 'Times New Roman', serif; --body-font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme:light; }
[hidden] { display:none !important; }
.skip-link { position:fixed; z-index:1000; top:.75rem; left:.75rem; padding:.65rem .9rem; border-radius:.5rem; background:var(--text); color:var(--bg); font-weight:700; text-decoration:none; transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.compatibility-disclosure { width:min(1320px, calc(100% - 2.5rem)); margin:.75rem auto 0; color:var(--muted); font-size:.82rem; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--bg); font-family:var(--body-font); font-size:16px; line-height:1.55; } a { color:inherit; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.58; } p { margin:0 0 1rem; } h1,h2,h3 { font-family:var(--display-font); font-weight:500; line-height:1.05; letter-spacing:-.035em; margin:0 0 .7rem; } h1 { font-size:clamp(2.7rem,7vw,6.2rem); } h2 { font-size:clamp(1.75rem,3.3vw,3.3rem); } h3 { font-size:1.35rem; } main { overflow:hidden; } .preview-banner { background:var(--text); color:var(--bg); padding:.52rem max(1rem, calc((100vw - 1320px)/2)); text-align:center; font-size:.78rem; letter-spacing:.03em; } .site-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem max(1.25rem, calc((100vw - 1320px)/2)); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 94%, transparent); } .brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:-.03em; white-space:nowrap; } .brand-mark { display:grid; place-items:center; flex-shrink:0; width:2rem; height:2rem; background:var(--accent); color:var(--accent-ink); border-radius:50%; font-family:var(--display-font); font-size:1.15rem; } .main-nav,.nav-actions { display:flex; align-items:center; gap:1.4rem; } .main-nav a,.text-link { color:var(--muted); text-decoration:none; font-size:.92rem; } .main-nav a[aria-current="page"] { color:var(--text); text-decoration:underline; text-underline-offset:.35rem; } .menu-toggle,.mobile-nav { display:none; } .btn { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:.65rem 1.1rem; border:1px solid var(--accent); border-radius:999px; background:transparent; color:var(--text); text-decoration:none; font-weight:650; font-size:.92rem; transition:transform .15s, background .15s; } .btn:hover { transform:translateY(-2px); } .btn-primary { background:var(--accent); color:var(--accent-ink); } .btn-secondary { border-color:var(--line); background:var(--surface); } .btn.compact { min-height:38px; padding:.35rem .8rem; font-size:.8rem; } .hero,.section,.manifesto,.closing,.page-hero,.form-layout,.checkout-layout,.auth-page,.article-grid,.legal-content { width:min(1320px, calc(100% - 2.5rem)); margin-inline:auto; } .hero { min-height:660px; display:grid; grid-template-columns:minmax(0, .94fr) minmax(350px,.9fr); align-items:center; gap:clamp(2rem,8vw,10rem); padding-block:clamp(4rem,9vw,8rem); } .hero-copy { max-width:720px; } .eyebrow { margin-bottom:1rem; color:var(--accent); text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.13em; } .hero-lead,.section-heading>p { max-width:620px; color:var(--muted); font-size:clamp(1.06rem,1.7vw,1.3rem); } .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; } .hero-visual { min-width:0; } .device-stack { position:relative; max-width:480px; margin-inline:auto; } .device-card { position:relative; z-index:1; padding:.7rem; border:1px solid var(--line); border-radius:clamp(24px,3vw,40px); background:var(--surface); box-shadow:0 24px 70px color-mix(in srgb, var(--text) 15%, transparent); } .device-card-head,.screen-top { display:flex; justify-content:space-between; align-items:center; padding:.5rem .5rem .8rem; font-size:.78rem; color:var(--muted); } .status-dot::before { content:''; display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.35rem; background:var(--accent); } .device-screen { padding:1rem; min-height:390px; border-radius:calc(var(--radius) + 6px); background:var(--surface-alt); } .screen-top { padding:0 0 1.25rem; color:var(--text); } .app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; } .app-tile { padding:1rem .55rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-align:center; } .app-tile>span { display:grid; place-items:center; width:2.45rem; height:2.45rem; margin:0 auto .45rem; border-radius:.8rem; background:var(--accent); color:var(--accent-ink); font-weight:800; } .app-tile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; } .screen-note { margin-top:1rem; padding:.75rem; border-radius:10px; color:var(--muted); background:var(--surface); font-size:.75rem; } .device-summary { position:absolute; z-index:2; right:-8%; bottom:-1.5rem; width:58%; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:0 12px 35px color-mix(in srgb, var(--text) 12%, transparent); } .device-summary>* { display:block; } .device-summary span,.device-summary small { color:var(--muted); font-size:.75rem; } .device-summary strong { margin:.25rem 0; } .section { padding-block:clamp(3.5rem,8vw,8rem); } .section-heading { max-width:780px; margin-bottom:2.5rem; } .feature-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .feature-card { min-height:250px; padding:1.4rem; border-right:1px solid var(--line); } .feature-card:first-child { padding-left:0; } .feature-card:last-child { border-right:0; } .feature-card p,.usecase-card p { color:var(--muted); font-size:.93rem; } .feature-index { display:block; margin-bottom:3.5rem; color:var(--accent); font-size:.78rem; font-weight:bold; } .manifesto { display:grid; grid-template-columns:1fr .56fr; gap:5rem; padding:clamp(3rem,8vw,8rem); background:var(--surface-alt); border-radius:var(--radius); } .manifesto-aside { border-left:1px solid var(--line); padding-left:1.5rem; color:var(--muted); } .manifesto-aside strong { color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; } .usecase-section { border-top:1px solid var(--line); } .usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .usecase-card { min-height:280px; padding:1.5rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:end; } .usecase-card>span { margin-bottom:auto; color:var(--accent); font-size:.75rem; text-transform:uppercase; font-weight:700; letter-spacing:.08em; } .closing { margin-top:2rem; margin-bottom:clamp(4rem,10vw,9rem); padding:clamp(3rem,8vw,7rem); text-align:center; border-radius:var(--radius); background:var(--accent); color:var(--accent-ink); } .closing .section-heading,.closing p { margin-inline:auto; } .closing .eyebrow { color:var(--accent-ink); }.closing .btn { margin-top:1rem; border-color:var(--accent-ink); color:var(--accent); background:var(--accent-ink); } .site-footer { padding:3rem max(1.25rem, calc((100vw - 1320px)/2)); border-top:1px solid var(--line); } .footer-main { display:grid; grid-template-columns:2fr repeat(4,1fr); gap:2rem; } .footer-main p,.footer-bottom { color:var(--muted); font-size:.82rem; }.footer-main section h2 { font-family:var(--body-font); font-size:.8rem; font-weight:800; letter-spacing:.04em; }.footer-main section a { display:block; margin:.45rem 0; text-decoration:none; font-size:.86rem; }.footer-bottom { display:grid; grid-template-columns:1.2fr 1.2fr .8fr; gap:1rem; padding-top:2rem; margin-top:2rem; border-top:1px solid var(--line); }.page-hero { padding-block:clamp(4rem,9vw,8rem) 3rem; }.content-narrow { max-width:840px; }.pricing-grid { width:min(1320px, calc(100% - 2.5rem)); margin:1rem auto 5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; }.plan-card { position:relative; display:flex; flex-direction:column; padding:1.7rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.plan-card.popular { border:2px solid var(--accent); }.plan-badge { position:absolute; top:-.7rem; left:1.5rem; padding:.25rem .6rem; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:.72rem; font-weight:bold; }.price { margin:1.5rem 0; }.price strong { font-family:var(--display-font); font-size:3rem; font-weight:500; }.price span { color:var(--muted); }.plan-card ul { padding-left:1rem; margin:0 0 2rem; color:var(--muted); }.plan-card .btn { margin-top:auto; }.info-callout { border-top:1px solid var(--line); }.compatibility-strip { display:grid; grid-template-columns:repeat(4,1fr); width:min(1320px, calc(100% - 2.5rem)); margin:1rem auto; border-block:1px solid var(--line); }.compatibility-strip span { padding:1.2rem; border-right:1px solid var(--line); }.compatibility-strip b { display:block; color:var(--accent); font-size:.7rem; margin-bottom:.6rem; }.two-column { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }.panel { padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.fine-print { color:var(--muted); font-size:.86rem; }.split-stage { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:2rem; width:min(1320px, calc(100% - 2.5rem)); margin:4rem auto; }.split-stage .manifesto { width:100%; margin:0; display:block; }.split-stage .manifesto-aside { display:none; }.technical-intro { padding-block:2rem; }.technical-intro .manifesto { margin:0 auto; }.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-bottom:6rem; }.article-grid article { padding:1.4rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.article-grid h2 { font-size:1.45rem; }.article-grid p:last-child { color:var(--muted); font-size:.9rem; }.search-field input,.toolbar input { width:100%; }.form-layout,.checkout-layout { display:grid; grid-template-columns:1fr .7fr; gap:2rem; padding-bottom:6rem; }.form-layout form,.auth-card { display:grid; gap:1rem; }.form-layout label,.auth-card label,.panel label { display:grid; gap:.4rem; font-size:.88rem; font-weight:650; }.form-layout input,.form-layout select,.form-layout textarea,.auth-card input,.checkout-layout input,.checkout-layout select,.panel input,.panel select { width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); }.check { display:flex !important; align-items:flex-start; gap:.55rem; font-weight:400 !important; }.check input { width:auto !important; margin-top:.3rem; }.form-feedback { min-height:1.4rem; color:var(--muted); font-size:.86rem; }.form-feedback.error { color:#9c2f2f; }.legal-content { padding-bottom:6rem; }.legal-content article { padding:1.6rem 0; border-top:1px solid var(--line); }.legal-content p { max-width:720px; color:var(--muted); }.auth-page { min-height:calc(100vh - 150px); display:grid; grid-template-columns:1fr minmax(320px,.75fr); gap:6rem; align-items:center; padding-block:6rem; }.auth-copy { max-width:570px; }.auth-card { padding:2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.auth-card p:last-child { margin-bottom:0; }.dashboard { min-height:100vh; display:grid; grid-template-columns:245px 1fr; }.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:1.5rem; padding:1.3rem; border-right:1px solid var(--line); background:var(--surface); }.sidebar nav { display:grid; gap:.25rem; }.sidebar nav a,.sidebar>a:not(.brand) { padding:.65rem .75rem; border-radius:9px; color:var(--muted); text-decoration:none; font-size:.9rem; }.sidebar nav a[aria-current="page"] { background:var(--surface-alt); color:var(--text); font-weight:700; }.sidebar>a:last-child { margin-top:auto; }.workspace { padding:2rem clamp(1.5rem,5vw,5rem); }.demo-notice { max-width:850px; margin-bottom:2rem; padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:.82rem; }.workspace-heading { margin-bottom:2rem; }.workspace-heading h1 { font-size:clamp(2.4rem,5vw,4.5rem); }.workspace-heading p { color:var(--muted); }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem; }.stat-card { min-height:150px; padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; }.stat-card span,.stat-card small { color:var(--muted); font-size:.8rem; }.stat-card strong { margin:.6rem 0 auto; font-family:var(--display-font); font-size:2.6rem; font-weight:500; }.stat-card a { color:var(--accent); font-size:.82rem; }.toolbar { display:flex; gap:1rem; margin-bottom:1rem; }.toolbar input { max-width:430px; padding:.7rem; border:1px solid var(--line); border-radius:10px; }.toolbar select { padding:.7rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.table-wrap table { width:100%; border-collapse:collapse; }.table-wrap th,.table-wrap td { padding:1rem; border-bottom:1px solid var(--line); text-align:left; font-size:.9rem; }.table-wrap th { color:var(--muted); font-weight:600; }.table-wrap [data-no-devices] { padding:1rem; }.wallet-grid,.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.wallet-grid form { display:grid; gap:1rem; }.empty-state { max-width:620px; }.order-summary dl { margin:1.5rem 0; }.order-summary dl div { display:flex; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid var(--line); }.order-summary dt { color:var(--muted); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:850px) { .main-nav,.nav-actions { display:none; }.menu-toggle { display:block; padding:.45rem .65rem; border:1px solid var(--line); background:var(--surface); border-radius:8px; }.mobile-nav { display:grid; padding:1rem 1.25rem; border-bottom:1px solid var(--line); background:var(--surface); }.mobile-nav a { padding:.6rem 0; text-decoration:none; }.hero { grid-template-columns:1fr; min-height:0; }.hero-copy { order:0; }.device-stack { margin-top:1rem; }.feature-grid { grid-template-columns:repeat(2,1fr); }.feature-card:nth-child(odd) { padding-left:0; }.feature-card:nth-child(2) { border-right:0; }.manifesto,.form-layout,.checkout-layout,.auth-page,.two-column,.split-stage { grid-template-columns:1fr; gap:2rem; }.footer-main { grid-template-columns:repeat(2,1fr); }.footer-main>div { grid-column:1/-1; }.footer-bottom { grid-template-columns:1fr; }.article-grid { grid-template-columns:repeat(2,1fr); }.dashboard { grid-template-columns:1fr; }.sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid var(--line); }.sidebar nav { grid-auto-flow:column; overflow:auto; max-width:100%; }.sidebar>a:last-child { margin-top:0; }.workspace { padding:1.5rem; }.wallet-grid,.settings-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .hero,.section,.manifesto,.closing,.page-hero,.form-layout,.checkout-layout,.auth-page,.article-grid,.legal-content { width:min(100% - 1.5rem, 1320px); }.site-header { padding-inline:.75rem; }.hero { padding-block:3.5rem; }.hero-title { font-size:clamp(2.7rem,14vw,4.2rem); }.device-summary { right:-2%; }.feature-grid,.usecase-grid,.pricing-grid,.compatibility-strip,.article-grid,.stat-grid { grid-template-columns:1fr; }.feature-card,.feature-card:first-child { padding:1.25rem 0; border-right:0; border-bottom:1px solid var(--line); min-height:auto; }.feature-index { margin-bottom:1.2rem; }.usecase-card { min-height:220px; }.pricing-grid,.compatibility-strip { width:calc(100% - 1.5rem); }.compatibility-strip span { border-right:0; border-bottom:1px solid var(--line); }.toolbar { flex-direction:column; }.auth-page { padding-block:3rem; }.workspace { padding:1rem; }.workspace-heading h1 { font-size:2.6rem; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; } }
.dashboard > *, .wallet-grid > *, .checkout-layout > *, .settings-grid > *, .stat-grid > *, .toolbar > * { min-width:0; }
.sidebar nav { min-width:0; }
.panel { overflow-wrap:anywhere; }
.payment-options { display:grid; gap:1rem; min-width:0; margin:1.3rem 0; padding:1.3rem 0; border:0; border-block:1px solid var(--line); }
.payment-options label { display:grid; gap:.5rem; }
.payment-destination { min-width:0; padding:1rem; background:color-mix(in srgb, currentColor 7%, transparent); border-radius:var(--radius); }
.payment-destination code { display:block; overflow-wrap:anywhere; word-break:break-all; font-size:.9rem; margin:.65rem 0 1rem; user-select:all; }
.payment-network-note { font-weight:650; font-size:.9rem; }
.payment-copy-feedback { font-size:.875rem; margin-top:.7rem; }
[data-checkout-result] { margin-top:1.5rem; }
.payment-request { border-top:1px solid var(--line); padding-top:1.2rem; }
.payment-request code { display:block; padding:1rem; background:color-mix(in srgb, currentColor 7%, transparent); border-radius:var(--radius); overflow-wrap:anywhere; word-break:break-all; user-select:all; }
.checkout-layout form > label { margin-block:.8rem; }
.payment-request p { overflow-wrap:anywhere; }
.payment-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-block:1rem; }
body[data-brand] .sidebar .brand, body[data-brand] .sidebar nav a:not([aria-current]), body[data-brand] .sidebar > a:not(.brand) { color:inherit; }