/* ============================================================ Borderfull landing page Brand tokens mirrored from the app's DesignTokens.swift ============================================================ */ /* Satoshi (Fontshare, ITF Free Font License) — self-hosted display face. Variable file covers weights 300-900; headings use 600. */ @font-face{ font-family:"Satoshi"; src:url("fonts/satoshi-variable.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; } :root{ /* App gradient stops */ --navy:#030509; /* gradientDark */ --blue:#4571DA; /* gradientMid */ --blue-deep:#1530A0; /* safeBar */ --light:#F2F2F6; /* gradientLight */ /* Status */ --green:#1A9E73; /* safeBadge */ --green-ring:#38EBAD; /* safeRing */ --orange:#B87314; /* warnBadge */ --orange-ring:#FAC233; /* warnRing */ --red:#DB3B38; /* dangerBadge */ /* Ink + surfaces — LIGHT is the default theme */ --ink:#0A0A0B; --ink-soft:#3a3d44; --muted:#6b7280; --line:rgba(10,10,15,.08); --surface:#ffffff; /* page background */ --surface-2:#f6f7fb; /* alt section background */ --card-bg:#ffffff; /* cards */ --card-border:rgba(10,10,15,.08); --band-dark:#0A0A0B; /* always-dark bands (final CTA) */ --shadow-card:0 18px 50px -22px rgba(10,20,60,.35); --shadow-soft:0 10px 30px -16px rgba(10,20,60,.25); --maxw:1160px; --r-lg:24px; --r-md:16px; --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif; --font-display:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif; } /* DARK theme override (toggled via data-theme="dark" on ) */ [data-theme="dark"]{ --ink:#eaeef5; --ink-soft:#aeb6c4; --muted:#828b9c; --line:rgba(255,255,255,.09); --surface:#070a12; --surface-2:#0c111b; --card-bg:#121826; --card-border:rgba(255,255,255,.08); --band-dark:#06070b; --shadow-card:0 18px 50px -22px rgba(0,0,0,.6); --shadow-soft:0 10px 30px -16px rgba(0,0,0,.5); } html{color-scheme:light} [data-theme="dark"]{color-scheme:dark} *{box-sizing:border-box} html{scroll-behavior:smooth} /* Keep hash targets clear of the fixed floating nav when scrolled to. */ :where(#download, section[id], #top){scroll-margin-top:92px} body{ margin:0;font-family:var(--font);color:var(--ink);background:var(--surface); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5; transition:background .35s ease, color .35s ease; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* Display headings use Satoshi; body + UI stay Inter. */ h1,h2,h3{font-family:var(--font-display)} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px} /* ---------- Reveal animation ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- Shared bits ---------- */ .eyebrow{ display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--blue);margin-bottom:14px; } .eyebrow--center{display:block;text-align:center} .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto} .dot--green{background:var(--green)} .dot--blue{background:var(--blue)} .stars{color:#F5A623;letter-spacing:2px;font-size:14px} .stars--lg{font-size:20px} /* App Store badge (rendered via CSS background image of an inline SVG) */ .appstore{display:inline-flex;align-items:center;transition:transform .15s ease,opacity .15s ease} .appstore:hover{transform:translateY(-2px)} .appstore:active{transform:translateY(0)} .appstore__svg{ display:block;background-repeat:no-repeat;background-size:contain;background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Crect width='120' height='40' rx='8' fill='%23000'/%3E%3Crect x='.5' y='.5' width='119' height='39' rx='7.5' fill='none' stroke='%23A6A6A6' stroke-opacity='.4'/%3E%3Cpath fill='%23fff' d='M24.77 20.3c-.02-2.35 1.92-3.49 2.01-3.54-1.1-1.6-2.81-1.82-3.41-1.84-1.45-.15-2.85.86-3.59.86-.74 0-1.89-.84-3.11-.82-1.6.02-3.08.93-3.9 2.37-1.68 2.91-.43 7.2 1.2 9.55.8 1.15 1.75 2.44 3 2.4 1.21-.05 1.67-.78 3.13-.78 1.46 0 1.87.78 3.14.75 1.3-.02 2.12-1.17 2.9-2.33.92-1.33 1.3-2.62 1.32-2.69-.03-.01-2.53-.97-2.55-3.84-.02-2.39 1.95-3.54 2.04-3.6-1.12-1.63-2.86-1.81-3.46-1.85z'/%3E%3Cpath fill='%23fff' d='M22.4 13.32c.66-.8 1.11-1.91.99-3.02-.96.04-2.13.64-2.81 1.42-.61.69-1.14 1.84-1 2.91 1.07.08 2.17-.55 2.82-1.31z'/%3E%3Ctext x='40' y='16.5' fill='%23fff' font-family='Helvetica,Arial,sans-serif' font-size='8'%3EDownload on the%3C/text%3E%3Ctext x='40' y='30' fill='%23fff' font-family='Helvetica,Arial,sans-serif' font-size='15' font-weight='600'%3EApp Store%3C/text%3E%3C/svg%3E"); } .appstore--sm .appstore__svg{width:120px;height:40px} .appstore--lg .appstore__svg{width:168px;height:56px} .appstore--invert .appstore__svg{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Crect width='120' height='40' rx='8' fill='%23fff'/%3E%3Cpath fill='%23000' d='M24.77 20.3c-.02-2.35 1.92-3.49 2.01-3.54-1.1-1.6-2.81-1.82-3.41-1.84-1.45-.15-2.85.86-3.59.86-.74 0-1.89-.84-3.11-.82-1.6.02-3.08.93-3.9 2.37-1.68 2.91-.43 7.2 1.2 9.55.8 1.15 1.75 2.44 3 2.4 1.21-.05 1.67-.78 3.13-.78 1.46 0 1.87.78 3.14.75 1.3-.02 2.12-1.17 2.9-2.33.92-1.33 1.3-2.62 1.32-2.69-.03-.01-2.53-.97-2.55-3.84-.02-2.39 1.95-3.54 2.04-3.6-1.12-1.63-2.86-1.81-3.46-1.85z'/%3E%3Cpath fill='%23000' d='M22.4 13.32c.66-.8 1.11-1.91.99-3.02-.96.04-2.13.64-2.81 1.42-.61.69-1.14 1.84-1 2.91 1.07.08 2.17-.55 2.82-1.31z'/%3E%3Ctext x='40' y='16.5' fill='%23000' font-family='Helvetica,Arial,sans-serif' font-size='8'%3EDownload on the%3C/text%3E%3Ctext x='40' y='30' fill='%23000' font-family='Helvetica,Arial,sans-serif' font-size='15' font-weight='600'%3EApp Store%3C/text%3E%3C/svg%3E"); } /* ============================================================ NAV (iOS 26 liquid glass, floating) ============================================================ */ .nav{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 18px;pointer-events:none;transition:top .3s ease; /* Foreground adapts to whatever sits behind the glass. */ --nav-fg:#0a0a0b;--nav-fg-soft:rgba(10,10,15,.66)} [data-theme="dark"] .nav{--nav-fg:#fff;--nav-fg-soft:rgba(255,255,255,.82)} .nav.is-scrolled{top:8px;--nav-fg:#fff;--nav-fg-soft:rgba(255,255,255,.82)} .nav__bar{ position:relative; pointer-events:auto;display:flex;align-items:center;gap:22px;width:100%;max-width:980px;height:58px;padding:0 12px 0 20px; border-radius:999px; /* Light mode: a frosted-white pill that reads on a bright hero. */ background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55)); -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(10,15,40,.10); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -22px rgba(2,6,23,.30); transition:height .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; } /* Dark mode: the original translucent glass over the dark hero. */ [data-theme="dark"] .nav__bar{ background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); border:1px solid rgba(255,255,255,.35); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(255,255,255,.10) inset, 0 18px 40px -20px rgba(2,6,23,.55); } /* Scrolled (either mode): smoked dark glass, white text. */ .nav.is-scrolled .nav__bar{height:52px;background:linear-gradient(180deg, rgba(13,20,45,.62), rgba(13,20,45,.46));border-color:rgba(255,255,255,.16);box-shadow:0 18px 40px -20px rgba(2,6,23,.5)} .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17.5px;letter-spacing:-.01em;color:var(--nav-fg);transition:color .3s ease} .brand__mark{display:inline-flex;color:var(--nav-fg);transition:color .3s ease} .brand__name{color:var(--nav-fg)} /* Nav wordmark logo: recolored via mask so it follows --nav-fg across light/dark/scrolled. */ .brand__logo{ display:block;height:24px;width:131px; /* 703×129 viewBox → 24px tall */ background-color:var(--nav-fg); -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAzIiBoZWlnaHQ9IjEyOSIgdmlld0JveD0iMCAwIDcwMyAxMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05OS44Mzg5IDgyLjM1NjZDOTkuODM4OSA2Ny45Mzc4IDEwMy41NDMgNTYuNjI5IDExMC45NSA0OC40MzAxQzExOC40MTQgNDAuMjMxMiAxMjkuNDk2IDM2LjEzMTcgMTQ0LjE5OCAzNi4xMzE3QzE1OC44OTkgMzYuMTMxNyAxNjkuOTU0IDQwLjIzMTIgMTc3LjM2MSA0OC40MzAxQzE4NC44MjUgNTYuNjI5IDE4OC41NTcgNjcuOTM3OCAxODguNTU3IDgyLjM1NjZDMTg4LjU1NyA5Ni43NzUzIDE4NC44MjUgMTA4LjA4NCAxNzcuMzYxIDExNi4yODNDMTY5Ljk1NCAxMjQuNDgyIDE1OC44OTkgMTI4LjU4MSAxNDQuMTk4IDEyOC41ODFDMTI5LjQ5NiAxMjguNTgxIDExOC40MTQgMTI0LjQ4MiAxMTAuOTUgMTE2LjI4M0MxMDMuNTQzIDEwOC4wODQgOTkuODM4OSA5Ni43NzUzIDk5LjgzODkgODIuMzU2NlpNMTI0Ljk0NSA4Mi4zNTY2QzEyNC45NDUgOTMuMSAxMjYuNTg0IDEwMC43MzMgMTI5Ljg2NCAxMDUuMjU3QzEzMy4yIDEwOS43MjQgMTM3Ljk3OCAxMTEuOTU3IDE0NC4xOTggMTExLjk1N0MxNTAuNDE4IDExMS45NTcgMTU1LjE2NyAxMDkuNzI0IDE1OC40NDcgMTA1LjI1N0MxNjEuNzgzIDEwMC43MzMgMTYzLjQ1MSA5My4xIDE2My40NTEgODIuMzU2NkMxNjMuNDUxIDcxLjYxMzIgMTYxLjc4MyA2NC4wMDggMTU4LjQ0NyA1OS41NDFDMTU1LjE2NyA1NS4wMTc1IDE1MC40MTggNTIuNzU1NyAxNDQuMTk4IDUyLjc1NTdDMTM3Ljk3OCA1Mi43NTU3IDEzMy4yIDU1LjAxNzUgMTI5Ljg2NCA1OS41NDFDMTI2LjU4NCA2NC4wMDggMTI0Ljk0NSA3MS42MTMyIDEyNC45NDUgODIuMzU2NloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNMjAxLjU0NCAxMjYuODg1QzE5OC4xNTEgMTI2Ljg4NSAxOTYuNDU1IDEyNS4xODkgMTk2LjQ1NSAxMjEuNzk2VjQyLjkxN0MxOTYuNDU1IDM5LjUyNDQgMTk4LjE1MSAzNy44MjggMjAxLjU0NCAzNy44MjhIMjE0Ljk0NUMyMTguMzM3IDM3LjgyOCAyMjAuMDM0IDM5LjUyNDQgMjIwLjAzNCA0Mi45MTdWNDkuODcySDIyMC4zNzNDMjIxLjg0MyA0Ni4yNTMxIDIyNC4zMDMgNDMuMDU4NCAyMjcuNzUyIDQwLjI4NzdDMjMxLjIwMSAzNy41MTcxIDIzNS4yNzIgMzYuMTMxNyAyMzkuOTY2IDM2LjEzMTdDMjQzLjE4OSAzNi4xMzE3IDI0NS44NDYgMzYuNTI3NSAyNDcuOTM4IDM3LjMxOTJDMjQ5LjkxNyAzOC4wNTQyIDI1MC42ODEgMzkuNDExMyAyNTAuMjI4IDQxLjM5MDNMMjQ3Ljg1MyA1MS40ODM1QzI0Ny4zNDUgNTMuNzQ1MiAyNDUuODE4IDU0LjQyMzggMjQzLjI3MyA1My41MTkxQzI0MS44MDMgNTMuMDEwMiAyNDAuMzkgNTIuNzU1NyAyMzkuMDMzIDUyLjc1NTdDMjMzLjYwNCA1Mi43NTU3IDIyOS4xMDkgNTYuMDA3IDIyNS41NDcgNjIuNTA5NkMyMjEuOTg1IDY5LjAxMjIgMjIwLjIwMyA3OC40ODMzIDIyMC4yMDMgOTAuOTIzVjEyMS43OTZDMjIwLjIwMyAxMjUuMTg5IDIxOC41MDcgMTI2Ljg4NSAyMTUuMTE0IDEyNi44ODVIMjAxLjU0NFoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNMjUzLjE2IDgyLjM1NjZDMjUzLjE2IDY5LjkxNjkgMjU1Ljg0NSA1OS4xMTY5IDI2MS4yMTcgNDkuOTU2OEMyNjYuNjQ1IDQwLjc0MDEgMjc2LjAwMyAzNi4xMzE3IDI4OS4yOTEgMzYuMTMxN0MyOTQuMzggMzYuMTMxNyAyOTguNzM0IDM2Ljg2NjggMzAyLjM1MyAzOC4zMzY5QzMwNS45NzIgMzkuODA3MSAzMDkuMjUxIDQyLjk3MzYgMzEyLjE5MiA0Ny44MzY0SDMxMi41MzFDMzEyLjMwNSA0NS41NzQ2IDMxMi4xOTIgNDMuMzEyOCAzMTIuMTkyIDQxLjA1MTFWNi43ODUzQzMxMi4xOTIgMy4zOTI2NSAzMTMuODg4IDEuNjk2MzMgMzE3LjI4MSAxLjY5NjMzSDMzMC44NTFDMzM0LjI0NCAxLjY5NjMzIDMzNS45NCAzLjM5MjY1IDMzNS45NCA2Ljc4NTNWMTIxLjc5NkMzMzUuOTQgMTI1LjE4OSAzMzQuMjQ0IDEyNi44ODUgMzMwLjg1MSAxMjYuODg1SDMxNy40NUMzMTQuNjIzIDEyNi44ODUgMzEzLjA5NiAxMjUuMTg5IDMxMi44NyAxMjEuNzk2TDMxMi41MzEgMTE2Ljg3N0gzMTIuMTkyQzMwOS4yNTEgMTIxLjc0IDMwNS45NzIgMTI0LjkwNiAzMDIuMzUzIDEyNi4zNzZDMjk4LjczNCAxMjcuODQ2IDI5NC4zOCAxMjguNTgxIDI4OS4yOTEgMTI4LjU4MUMyNzYuMDAzIDEyOC41ODEgMjY2LjY0NSAxMjQuMDAxIDI2MS4yMTcgMTE0Ljg0MUMyNTUuODQ1IDEwNS42MjUgMjUzLjE2IDk0Ljc5NjMgMjUzLjE2IDgyLjM1NjZaTTI3OC4yNjUgODIuMzU2NkMyNzguMjY1IDkxLjQwMzcgMjc5LjQyNCA5OC42MTMgMjgxLjc0MyAxMDMuOTg1QzI4NC4xMTggMTA5LjMgMjg5LjEyMiAxMTEuOTU3IDI5Ni43NTUgMTExLjk1N0MzMDAuOTk2IDExMS45NTcgMzA0LjYxNSAxMDkuNTgzIDMwNy42MTIgMTA0LjgzM0MzMTAuNjY1IDEwMC4wMjcgMzEyLjE5MiA5My44MDY4IDMxMi4xOTIgODYuMTczM1Y3OC41Mzk4QzMxMi4xOTIgNzAuOTA2NCAzMTAuNjY1IDY0LjcxNDggMzA3LjYxMiA1OS45NjUxQzMwNC42MTUgNTUuMTU4OCAzMDAuOTk2IDUyLjc1NTcgMjk2Ljc1NSA1Mi43NTU3QzI4OS4xMjIgNTIuNzU1NyAyODQuMTE4IDU1LjQ0MTYgMjgxLjc0MyA2MC44MTMzQzI3OS40MjQgNjYuMTI4NCAyNzguMjY1IDczLjMwOTUgMjc4LjI2NSA4Mi4zNTY2WiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik0zNDAuMzY0IDgyLjM1NjZDMzQwLjM2NCA2OC4wNTA5IDM0My45MjcgNTYuNzcwMyAzNTEuMDUxIDQ4LjUxNDlDMzU4LjIzMiA0MC4yNTk0IDM2OC4zNTQgMzYuMTMxNyAzODEuNDE1IDM2LjEzMTdDMzk2LjU2OSAzNi4xMzE3IDQwNy44MjEgNDAuMDMzMyA0MTUuMTcyIDQ3LjgzNjRDNDIyLjUyMyA1NS42Mzk1IDQyNi4xOTggNjguMTkyMyA0MjYuMTk4IDg1LjQ5NDhDNDI2LjE5OCA4OC44ODc0IDQyNC42MTUgOTAuNTgzOCA0MjEuNDQ5IDkwLjU4MzhIMzY1LjQ3QzM2Ni4zNzUgOTkuOTcwMSAzNjguNjkzIDEwNS44NzkgMzcyLjQyNSAxMDguMzFDMzc2LjE1NyAxMTAuNzQyIDM4MC40ODIgMTExLjk1NyAzODUuNDAyIDExMS45NTdDMzkwLjA5NSAxMTEuOTU3IDM5My42ODUgMTExLjMzNSAzOTYuMTczIDExMC4wOTFDMzk4LjY2MSAxMDguODQ4IDQwMC43NTMgMTA3LjE1MSA0MDIuNDUgMTA1LjAwM0M0MDQuMzcyIDEwMi41MTUgNDA2Ljc0NyAxMDIuMTE5IDQwOS41NzQgMTAzLjgxNUw0MTguMDU2IDEwOC45ODlDNDIxLjM5MiAxMTEuMDI0IDQyMS44NzMgMTEzLjQ1NiA0MTkuNDk4IDExNi4yODNDNDE2LjA0OSAxMjAuNDExIDQxMi4wMDYgMTIzLjQ5MiA0MDcuMzY5IDEyNS41MjhDNDAyLjczMiAxMjcuNTY0IDM5NS40MSAxMjguNTgxIDM4NS40MDIgMTI4LjU4MUMzNjkuMTczIDEyOC41ODEgMzU3LjYxIDEyNC40NTQgMzUwLjcxMiAxMTYuMTk4QzM0My44MTMgMTA3Ljk0MyAzNDAuMzY0IDk2LjY2MjMgMzQwLjM2NCA4Mi4zNTY2Wk0zNjUuNTU1IDczLjYyMDVINDAyLjQ1QzQwMi40NSA2Ny41MTM3IDQwMC45MjMgNjIuNTM3OSAzOTcuODcgNTguNjkyOEMzOTQuODE2IDU0Ljc5MTMgMzg5Ljk1MyA1Mi44NDA1IDM4My4yODEgNTIuODQwNUMzNzcuOTY2IDUyLjg0MDUgMzczLjc1NCA1NC43MDY1IDM3MC42NDQgNTguNDM4NEMzNjcuNTM0IDYyLjExMzggMzY1LjgzNyA2Ny4xNzQ1IDM2NS41NTUgNzMuNjIwNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNNDQ2LjMwMyAxMjYuODg1QzQ0Mi45MSAxMjYuODg1IDQ0MS4yMTQgMTI1LjE4OSA0NDEuMjE0IDEyMS43OTZWNDIuOTE3QzQ0MS4yMTQgMzkuNTI0NCA0NDIuOTEgMzcuODI4IDQ0Ni4zMDMgMzcuODI4SDQ1OS43MDRDNDYzLjA5NyAzNy44MjggNDY0Ljc5MyAzOS41MjQ0IDQ2NC43OTMgNDIuOTE3VjQ5Ljg3Mkg0NjUuMTMyQzQ2Ni42MDMgNDYuMjUzMSA0NjkuMDYyIDQzLjA1ODQgNDcyLjUxMSA0MC4yODc3QzQ3NS45NjEgMzcuNTE3MSA0ODAuMDMyIDM2LjEzMTcgNDg0LjcyNSAzNi4xMzE3QzQ4Ny45NDggMzYuMTMxNyA0OTAuNjA1IDM2LjUyNzUgNDkyLjY5OCAzNy4zMTkyQzQ5NC42NzcgMzguMDU0MiA0OTUuNDQgMzkuNDExMyA0OTQuOTg4IDQxLjM5MDNMNDkyLjYxMyA1MS40ODM1QzQ5Mi4xMDQgNTMuNzQ1MiA0OTAuNTc3IDU0LjQyMzggNDg4LjAzMyA1My41MTkxQzQ4Ni41NjMgNTMuMDEwMiA0ODUuMTQ5IDUyLjc1NTcgNDgzLjc5MiA1Mi43NTU3QzQ3OC4zNjQgNTIuNzU1NyA0NzMuODY4IDU2LjAwNyA0NzAuMzA2IDYyLjUwOTZDNDY2Ljc0NCA2OS4wMTIyIDQ2NC45NjMgNzguNDgzMyA0NjQuOTYzIDkwLjkyM1YxMjEuNzk2QzQ2NC45NjMgMTI1LjE4OSA0NjMuMjY2IDEyNi44ODUgNDU5Ljg3NCAxMjYuODg1SDQ0Ni4zMDNaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTUwMS40MzcgNTQuNzkxM0M0OTguMTAxIDU0Ljc5MTMgNDk2LjQzMyA1My4zNzc3IDQ5Ni40MzMgNTAuNTUwNVY0Mi4wNjg5QzQ5Ni40MzMgMzkuMjQxNyA0OTguMTAxIDM3LjgyOCA1MDEuNDM3IDM3LjgyOEg1MDYuMTg3VjI1Ljk1MzhDNTA2LjE4NyAxNS41NDk2IDUwOS4xNTUgOC42MjI5OSA1MTUuMDkzIDUuMTczNzlDNTIxLjAzIDEuNzI0NiA1MjguMDk4IDAgNTM2LjI5NyAwQzU0MC4xOTggMCA1NDMuNTM0IDAuMjI2MTc3IDU0Ni4zMDUgMC42Nzg1M0M1NDkuMTMyIDEuMTMwODggNTUxLjYyIDEuNjk2MzMgNTUzLjc2OSAyLjM3NDg2QzU1NS44MDQgMy4wNTMzOSA1NTYuNTM5IDQuNDY2OTkgNTU1Ljk3NCA2LjYxNTY3TDU1My40MjkgMTYuMTk5OUM1NTIuOTIxIDE4LjA2NTkgNTUxLjYyIDE4LjYzMTMgNTQ5LjUyOCAxNy44OTYyQzU0OC4yODQgMTcuNDQzOSA1NDYuNTMxIDE3LjEzMjkgNTQ0LjI2OSAxNi45NjMzQzU0Mi4wNjQgMTYuNzM3MSA1NDAuMzExIDE2LjYyNCA1MzkuMDExIDE2LjYyNEM1MzQuODgzIDE2LjYyNCA1MzIuMzM5IDE4LjA2NTkgNTMxLjM3NyAyMC45NDk2QzUzMC40MTYgMjMuODMzNCA1MjkuOTM1IDI4LjMyODYgNTI5LjkzNSAzNC40MzU0VjM3LjgyOEg1NDEuMTMxQzU0NC40NjcgMzcuODI4IDU0Ni4xMzUgMzkuMjQxNyA1NDYuMTM1IDQyLjA2ODlWNTAuNTUwNUM1NDYuMTM1IDUzLjM3NzcgNTQ0LjQ2NyA1NC43OTEzIDU0MS4xMzEgNTQuNzkxM0g1MjkuOTM1VjEyMS43OTZDNTI5LjkzNSAxMjUuMTg5IDUyOC4yMzkgMTI2Ljg4NSA1MjQuODQ2IDEyNi44ODVINTExLjI3NkM1MDcuODgzIDEyNi44ODUgNTA2LjE4NyAxMjUuMTg5IDUwNi4xODcgMTIxLjc5NlY1NC43OTEzSDUwMS40MzdaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTU1MS42NTkgODkuOTA1MlY0Mi45MTdDNTUxLjY1OSAzOS41MjQ0IDU1My4zNTUgMzcuODI4IDU1Ni43NDcgMzcuODI4SDU3MC4zMThDNTczLjcxMSAzNy44MjggNTc1LjQwNyAzOS41MjQ0IDU3NS40MDcgNDIuOTE3VjgzLjc5ODVDNTc1LjQwNyA5Ni4xMjUxIDU3Ni4yNTUgMTAzLjkgNTc3Ljk1MiAxMDcuMTIzQzU3OS42NDggMTEwLjM0NiA1ODMuMjEgMTExLjk1NyA1ODguNjM4IDExMS45NTdDNTk0LjQwNiAxMTEuOTU3IDU5OC43ODggMTA5LjY2NyA2MDEuNzg1IDEwNS4wODdDNjA0Ljc4MiAxMDAuNDUxIDYwNi4yOCA5MC44NjY1IDYwNi4yOCA3Ni4zMzQ2VjQyLjkxN0M2MDYuMjggMzkuNTI0NCA2MDcuOTc2IDM3LjgyOCA2MTEuMzY5IDM3LjgyOEg2MjQuOTRDNjI4LjMzMiAzNy44MjggNjMwLjAyOSAzOS41MjQ0IDYzMC4wMjkgNDIuOTE3VjEyMS43OTZDNjMwLjAyOSAxMjUuMTg5IDYyOC4zMzIgMTI2Ljg4NSA2MjQuOTQgMTI2Ljg4NUg2MTEuNTM5QzYwOC4xNDYgMTI2Ljg4NSA2MDYuNDUgMTI1LjE4OSA2MDYuNDUgMTIxLjc5NlYxMTYuODc3SDYwNi4xMTFDNjAzLjUxIDEyMS4zNDQgNjAwLjIwMiAxMjQuNDI1IDU5Ni4xODcgMTI2LjEyMkM1OTIuMTcyIDEyNy43NjIgNTg3LjQyMyAxMjguNTgxIDU4MS45MzggMTI4LjU4MUM1NzMuMjg3IDEyOC41ODEgNTY2LjA3NyAxMjUuODExIDU2MC4zMSAxMjAuMjY5QzU1NC41NDIgMTE0LjcyOCA1NTEuNjU5IDEwNC42MDcgNTUxLjY1OSA4OS45MDUyWiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik02NDcuNzY2IDEyNi44ODVDNjQ0LjM3MyAxMjYuODg1IDY0Mi42NzcgMTI1LjE4OSA2NDIuNjc3IDEyMS43OTZWMjEuNjI4MUM2NDIuNjc3IDE5LjA4MzcgNjQzLjI3IDE2Ljc2NTMgNjQ0LjQ1OCAxNC42NzMyTDY1MC45ODkgMy4yMjMwMkM2NTIuMjMyIDEuMDc0MzQgNjUzLjcwMyAwIDY1NS4zOTkgMEg2NjEuMzM2QzY2NC43MjkgMCA2NjYuNDI1IDEuNjk2MzMgNjY2LjQyNSA1LjA4ODk4VjEyMS43OTZDNjY2LjQyNSAxMjUuMTg5IDY2NC43MjkgMTI2Ljg4NSA2NjEuMzM2IDEyNi44ODVINjQ3Ljc2NloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNNjg0LjE2MiAxMjYuODg1QzY4MC43NjkgMTI2Ljg4NSA2NzkuMDczIDEyNS4xODkgNjc5LjA3MyAxMjEuNzk2VjIxLjYyODFDNjc5LjA3MyAxOS4wODM3IDY3OS42NjcgMTYuNzY1MyA2ODAuODU0IDE0LjY3MzJMNjg3LjM4NSAzLjIyMzAyQzY4OC42MjkgMS4wNzQzNCA2OTAuMDk5IDAgNjkxLjc5NSAwSDY5Ny43MzJDNzAxLjEyNSAwIDcwMi44MjEgMS42OTYzMyA3MDIuODIxIDUuMDg4OThWMTIxLjc5NkM3MDIuODIxIDEyNS4xODkgNzAxLjEyNSAxMjYuODg1IDY5Ny43MzIgMTI2Ljg4NUg2ODQuMTYyWiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxMjAuNTI0QzAgMTI0Ljc2NSAyLjI2MTc3IDEyNi44ODUgNi43ODUzIDEyNi44ODVIMzkuODYzNkM1OS4zNzE0IDEyNi44ODUgNzMuMzY2MSAxMjMuNjYyIDgxLjg0NzcgMTE3LjIxNkM5MC4zMjkzIDExMC43NyA5NC41NzAxIDEwMi4zNDUgOTQuNTcwMSA5MS45NDA4Qzk0LjU3MDEgODMuMDYzNCA5MS4wOTI3IDc2LjE5MzMgODQuMTM3NyA3MS4zMzA1QzgwLjQxNzIgNjguNzI5MSA3Ni45NTU1IDY2Ljc3NSA3My43NTI4IDY1LjQ2ODJDNjkuMjA1NSA2OC4wMTQ4IDY0LjE1MDQgNzAuODM0IDU4Ljk2NiA3My43MDM0TDUzLjQyNTEgMTA0LjY4OUM1My4zNTI0IDEwNS4wOTkgNTMuMTM3MiAxMDUuNDcgNTIuODE3MiAxMDUuNzM4TDQ2Ljk3MjQgMTEwLjU4N0M0Ni43OTI3IDExMC43MzcgNDYuNTc1NCAxMTAuODM1IDQ2LjM0NDEgMTEwLjg3QzQ2LjExMjcgMTEwLjkwNiA0NS44NzU5IDExMC44NzggNDUuNjU5NCAxMTAuNzg5QzQ1LjQ0MjkgMTEwLjcgNDUuMjU0OCAxMTAuNTU0IDQ1LjExNTQgMTEwLjM2NkM0NC45NzU5IDExMC4xNzkgNDQuODkwNSAxMDkuOTU3IDQ0Ljg2ODMgMTA5LjcyNUw0Mi4yNDk4IDgyLjg4OTRDMjkuMTgwOCA5MC4wNDcgMTguMTIyNSA5NS44OTkgMTUuMTUzMyA5Ny4wNDE0QzE0Ljk0NiA5Ny4xMTUgMTQuNzIzMyA5Ny4xMzQ0IDE0LjUwNjMgOTcuMDk3N0MxNC4yODk0IDk3LjA2MSAxNC4wODU1IDk2Ljk2OTMgMTMuOTE0MiA5Ni44MzE1TDMuNTEwNDggODguNjAxNUMzLjAzNDk1IDg4LjIxNjggMi42OTI2MiA4Ny42OTI4IDIuNTMxODIgODcuMTAzNkMyLjM3MTAxIDg2LjUxNDQgMi4zOTk4NyA4NS44ODk3IDIuNjE0MzEgODUuMzE3N0MyLjgyODc1IDg0Ljc0NTcgMy4yMTc5NCA4NC4yNTUzIDMuNzI2OTIgODMuOTE1OUM0LjIzNTkxIDgzLjU3NjQgNC44Mzg5NyA4My40MDQ5IDUuNDUwOTUgODMuNDI1NkwxNi4xMzUyIDgzLjg5MTlMNjAuNjI1OSA1MS42NDc4QzYxLjYzOTkgNTAuODg5NCA2Mi44MDU3IDUwLjM1NzMgNjQuMDQ0MSA1MC4wODc4QzY1LjI4MjUgNDkuODE4MyA2Ni41NjQ2IDQ5LjgxNzYgNjcuODAzMyA1MC4wODU3TDgyLjUzMjIgNTMuMjU2NUM4My4yNDE3IDUzLjQwMTMgODMuOTMwMSA1My43OTUzIDg0LjQzNTcgNTQuMzExMUM4OC44NDMyIDUwLjIxMTMgOTEuMDA3OCA0NC43MTgyIDkxLjAwNzggMzcuOTEyOUM5MS4wMDc4IDI2LjgzMDIgODcuMTkxMSAxOC42MzEzIDc5LjU1NzYgMTMuMzE2MkM3MS45ODA3IDcuOTQ0NDYgNTcuMzM1OCA1LjI1ODYxIDM1LjYyMjggNS4yNTg2MUg2Ljc4NTNDMi4yNjE3NyA1LjI1ODYxIDAgNy4zNzkwMSAwIDExLjYxOThWMTIwLjUyNFpNMjkuODgwOCA2OS4xMUwxNi40Mzc3IDY1LjIzOTdDMTYuMjA2NyA2NS4xODA0IDE1Ljk5ODcgNjUuMDUzMyAxNS44NDA5IDY0Ljg3NDlDMTUuNjgzIDY0LjY5NjQgMTUuNTgyNSA2NC40NzQ5IDE1LjU1MjMgNjQuMjM4OEMxNS41MjIxIDY0LjAwMjggMTUuNTYzNiA2My43NjMxIDE1LjY3MTQgNjMuNTUwOUMxNS43NzkyIDYzLjMzODYgMTUuOTQ4NSA2My4xNjM1IDE2LjE1NzIgNjMuMDQ4MkwyMi44NjcgNTkuMjAxM0MyMy4wNDE3IDU5LjA4ODMgMjMuMjQzNSA1OS4wMjM5IDIzLjQ1MTUgNTkuMDE0N0w0NC42NTY0IDU4LjQwODZMMjkuODgwOCA2OS4xMVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K") no-repeat center/contain; mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAzIiBoZWlnaHQ9IjEyOSIgdmlld0JveD0iMCAwIDcwMyAxMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05OS44Mzg5IDgyLjM1NjZDOTkuODM4OSA2Ny45Mzc4IDEwMy41NDMgNTYuNjI5IDExMC45NSA0OC40MzAxQzExOC40MTQgNDAuMjMxMiAxMjkuNDk2IDM2LjEzMTcgMTQ0LjE5OCAzNi4xMzE3QzE1OC44OTkgMzYuMTMxNyAxNjkuOTU0IDQwLjIzMTIgMTc3LjM2MSA0OC40MzAxQzE4NC44MjUgNTYuNjI5IDE4OC41NTcgNjcuOTM3OCAxODguNTU3IDgyLjM1NjZDMTg4LjU1NyA5Ni43NzUzIDE4NC44MjUgMTA4LjA4NCAxNzcuMzYxIDExNi4yODNDMTY5Ljk1NCAxMjQuNDgyIDE1OC44OTkgMTI4LjU4MSAxNDQuMTk4IDEyOC41ODFDMTI5LjQ5NiAxMjguNTgxIDExOC40MTQgMTI0LjQ4MiAxMTAuOTUgMTE2LjI4M0MxMDMuNTQzIDEwOC4wODQgOTkuODM4OSA5Ni43NzUzIDk5LjgzODkgODIuMzU2NlpNMTI0Ljk0NSA4Mi4zNTY2QzEyNC45NDUgOTMuMSAxMjYuNTg0IDEwMC43MzMgMTI5Ljg2NCAxMDUuMjU3QzEzMy4yIDEwOS43MjQgMTM3Ljk3OCAxMTEuOTU3IDE0NC4xOTggMTExLjk1N0MxNTAuNDE4IDExMS45NTcgMTU1LjE2NyAxMDkuNzI0IDE1OC40NDcgMTA1LjI1N0MxNjEuNzgzIDEwMC43MzMgMTYzLjQ1MSA5My4xIDE2My40NTEgODIuMzU2NkMxNjMuNDUxIDcxLjYxMzIgMTYxLjc4MyA2NC4wMDggMTU4LjQ0NyA1OS41NDFDMTU1LjE2NyA1NS4wMTc1IDE1MC40MTggNTIuNzU1NyAxNDQuMTk4IDUyLjc1NTdDMTM3Ljk3OCA1Mi43NTU3IDEzMy4yIDU1LjAxNzUgMTI5Ljg2NCA1OS41NDFDMTI2LjU4NCA2NC4wMDggMTI0Ljk0NSA3MS42MTMyIDEyNC45NDUgODIuMzU2NloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNMjAxLjU0NCAxMjYuODg1QzE5OC4xNTEgMTI2Ljg4NSAxOTYuNDU1IDEyNS4xODkgMTk2LjQ1NSAxMjEuNzk2VjQyLjkxN0MxOTYuNDU1IDM5LjUyNDQgMTk4LjE1MSAzNy44MjggMjAxLjU0NCAzNy44MjhIMjE0Ljk0NUMyMTguMzM3IDM3LjgyOCAyMjAuMDM0IDM5LjUyNDQgMjIwLjAzNCA0Mi45MTdWNDkuODcySDIyMC4zNzNDMjIxLjg0MyA0Ni4yNTMxIDIyNC4zMDMgNDMuMDU4NCAyMjcuNzUyIDQwLjI4NzdDMjMxLjIwMSAzNy41MTcxIDIzNS4yNzIgMzYuMTMxNyAyMzkuOTY2IDM2LjEzMTdDMjQzLjE4OSAzNi4xMzE3IDI0NS44NDYgMzYuNTI3NSAyNDcuOTM4IDM3LjMxOTJDMjQ5LjkxNyAzOC4wNTQyIDI1MC42ODEgMzkuNDExMyAyNTAuMjI4IDQxLjM5MDNMMjQ3Ljg1MyA1MS40ODM1QzI0Ny4zNDUgNTMuNzQ1MiAyNDUuODE4IDU0LjQyMzggMjQzLjI3MyA1My41MTkxQzI0MS44MDMgNTMuMDEwMiAyNDAuMzkgNTIuNzU1NyAyMzkuMDMzIDUyLjc1NTdDMjMzLjYwNCA1Mi43NTU3IDIyOS4xMDkgNTYuMDA3IDIyNS41NDcgNjIuNTA5NkMyMjEuOTg1IDY5LjAxMjIgMjIwLjIwMyA3OC40ODMzIDIyMC4yMDMgOTAuOTIzVjEyMS43OTZDMjIwLjIwMyAxMjUuMTg5IDIxOC41MDcgMTI2Ljg4NSAyMTUuMTE0IDEyNi44ODVIMjAxLjU0NFoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNMjUzLjE2IDgyLjM1NjZDMjUzLjE2IDY5LjkxNjkgMjU1Ljg0NSA1OS4xMTY5IDI2MS4yMTcgNDkuOTU2OEMyNjYuNjQ1IDQwLjc0MDEgMjc2LjAwMyAzNi4xMzE3IDI4OS4yOTEgMzYuMTMxN0MyOTQuMzggMzYuMTMxNyAyOTguNzM0IDM2Ljg2NjggMzAyLjM1MyAzOC4zMzY5QzMwNS45NzIgMzkuODA3MSAzMDkuMjUxIDQyLjk3MzYgMzEyLjE5MiA0Ny44MzY0SDMxMi41MzFDMzEyLjMwNSA0NS41NzQ2IDMxMi4xOTIgNDMuMzEyOCAzMTIuMTkyIDQxLjA1MTFWNi43ODUzQzMxMi4xOTIgMy4zOTI2NSAzMTMuODg4IDEuNjk2MzMgMzE3LjI4MSAxLjY5NjMzSDMzMC44NTFDMzM0LjI0NCAxLjY5NjMzIDMzNS45NCAzLjM5MjY1IDMzNS45NCA2Ljc4NTNWMTIxLjc5NkMzMzUuOTQgMTI1LjE4OSAzMzQuMjQ0IDEyNi44ODUgMzMwLjg1MSAxMjYuODg1SDMxNy40NUMzMTQuNjIzIDEyNi44ODUgMzEzLjA5NiAxMjUuMTg5IDMxMi44NyAxMjEuNzk2TDMxMi41MzEgMTE2Ljg3N0gzMTIuMTkyQzMwOS4yNTEgMTIxLjc0IDMwNS45NzIgMTI0LjkwNiAzMDIuMzUzIDEyNi4zNzZDMjk4LjczNCAxMjcuODQ2IDI5NC4zOCAxMjguNTgxIDI4OS4yOTEgMTI4LjU4MUMyNzYuMDAzIDEyOC41ODEgMjY2LjY0NSAxMjQuMDAxIDI2MS4yMTcgMTE0Ljg0MUMyNTUuODQ1IDEwNS42MjUgMjUzLjE2IDk0Ljc5NjMgMjUzLjE2IDgyLjM1NjZaTTI3OC4yNjUgODIuMzU2NkMyNzguMjY1IDkxLjQwMzcgMjc5LjQyNCA5OC42MTMgMjgxLjc0MyAxMDMuOTg1QzI4NC4xMTggMTA5LjMgMjg5LjEyMiAxMTEuOTU3IDI5Ni43NTUgMTExLjk1N0MzMDAuOTk2IDExMS45NTcgMzA0LjYxNSAxMDkuNTgzIDMwNy42MTIgMTA0LjgzM0MzMTAuNjY1IDEwMC4wMjcgMzEyLjE5MiA5My44MDY4IDMxMi4xOTIgODYuMTczM1Y3OC41Mzk4QzMxMi4xOTIgNzAuOTA2NCAzMTAuNjY1IDY0LjcxNDggMzA3LjYxMiA1OS45NjUxQzMwNC42MTUgNTUuMTU4OCAzMDAuOTk2IDUyLjc1NTcgMjk2Ljc1NSA1Mi43NTU3QzI4OS4xMjIgNTIuNzU1NyAyODQuMTE4IDU1LjQ0MTYgMjgxLjc0MyA2MC44MTMzQzI3OS40MjQgNjYuMTI4NCAyNzguMjY1IDczLjMwOTUgMjc4LjI2NSA4Mi4zNTY2WiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik0zNDAuMzY0IDgyLjM1NjZDMzQwLjM2NCA2OC4wNTA5IDM0My45MjcgNTYuNzcwMyAzNTEuMDUxIDQ4LjUxNDlDMzU4LjIzMiA0MC4yNTk0IDM2OC4zNTQgMzYuMTMxNyAzODEuNDE1IDM2LjEzMTdDMzk2LjU2OSAzNi4xMzE3IDQwNy44MjEgNDAuMDMzMyA0MTUuMTcyIDQ3LjgzNjRDNDIyLjUyMyA1NS42Mzk1IDQyNi4xOTggNjguMTkyMyA0MjYuMTk4IDg1LjQ5NDhDNDI2LjE5OCA4OC44ODc0IDQyNC42MTUgOTAuNTgzOCA0MjEuNDQ5IDkwLjU4MzhIMzY1LjQ3QzM2Ni4zNzUgOTkuOTcwMSAzNjguNjkzIDEwNS44NzkgMzcyLjQyNSAxMDguMzFDMzc2LjE1NyAxMTAuNzQyIDM4MC40ODIgMTExLjk1NyAzODUuNDAyIDExMS45NTdDMzkwLjA5NSAxMTEuOTU3IDM5My42ODUgMTExLjMzNSAzOTYuMTczIDExMC4wOTFDMzk4LjY2MSAxMDguODQ4IDQwMC43NTMgMTA3LjE1MSA0MDIuNDUgMTA1LjAwM0M0MDQuMzcyIDEwMi41MTUgNDA2Ljc0NyAxMDIuMTE5IDQwOS41NzQgMTAzLjgxNUw0MTguMDU2IDEwOC45ODlDNDIxLjM5MiAxMTEuMDI0IDQyMS44NzMgMTEzLjQ1NiA0MTkuNDk4IDExNi4yODNDNDE2LjA0OSAxMjAuNDExIDQxMi4wMDYgMTIzLjQ5MiA0MDcuMzY5IDEyNS41MjhDNDAyLjczMiAxMjcuNTY0IDM5NS40MSAxMjguNTgxIDM4NS40MDIgMTI4LjU4MUMzNjkuMTczIDEyOC41ODEgMzU3LjYxIDEyNC40NTQgMzUwLjcxMiAxMTYuMTk4QzM0My44MTMgMTA3Ljk0MyAzNDAuMzY0IDk2LjY2MjMgMzQwLjM2NCA4Mi4zNTY2Wk0zNjUuNTU1IDczLjYyMDVINDAyLjQ1QzQwMi40NSA2Ny41MTM3IDQwMC45MjMgNjIuNTM3OSAzOTcuODcgNTguNjkyOEMzOTQuODE2IDU0Ljc5MTMgMzg5Ljk1MyA1Mi44NDA1IDM4My4yODEgNTIuODQwNUMzNzcuOTY2IDUyLjg0MDUgMzczLjc1NCA1NC43MDY1IDM3MC42NDQgNTguNDM4NEMzNjcuNTM0IDYyLjExMzggMzY1LjgzNyA2Ny4xNzQ1IDM2NS41NTUgNzMuNjIwNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNNDQ2LjMwMyAxMjYuODg1QzQ0Mi45MSAxMjYuODg1IDQ0MS4yMTQgMTI1LjE4OSA0NDEuMjE0IDEyMS43OTZWNDIuOTE3QzQ0MS4yMTQgMzkuNTI0NCA0NDIuOTEgMzcuODI4IDQ0Ni4zMDMgMzcuODI4SDQ1OS43MDRDNDYzLjA5NyAzNy44MjggNDY0Ljc5MyAzOS41MjQ0IDQ2NC43OTMgNDIuOTE3VjQ5Ljg3Mkg0NjUuMTMyQzQ2Ni42MDMgNDYuMjUzMSA0NjkuMDYyIDQzLjA1ODQgNDcyLjUxMSA0MC4yODc3QzQ3NS45NjEgMzcuNTE3MSA0ODAuMDMyIDM2LjEzMTcgNDg0LjcyNSAzNi4xMzE3QzQ4Ny45NDggMzYuMTMxNyA0OTAuNjA1IDM2LjUyNzUgNDkyLjY5OCAzNy4zMTkyQzQ5NC42NzcgMzguMDU0MiA0OTUuNDQgMzkuNDExMyA0OTQuOTg4IDQxLjM5MDNMNDkyLjYxMyA1MS40ODM1QzQ5Mi4xMDQgNTMuNzQ1MiA0OTAuNTc3IDU0LjQyMzggNDg4LjAzMyA1My41MTkxQzQ4Ni41NjMgNTMuMDEwMiA0ODUuMTQ5IDUyLjc1NTcgNDgzLjc5MiA1Mi43NTU3QzQ3OC4zNjQgNTIuNzU1NyA0NzMuODY4IDU2LjAwNyA0NzAuMzA2IDYyLjUwOTZDNDY2Ljc0NCA2OS4wMTIyIDQ2NC45NjMgNzguNDgzMyA0NjQuOTYzIDkwLjkyM1YxMjEuNzk2QzQ2NC45NjMgMTI1LjE4OSA0NjMuMjY2IDEyNi44ODUgNDU5Ljg3NCAxMjYuODg1SDQ0Ni4zMDNaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTUwMS40MzcgNTQuNzkxM0M0OTguMTAxIDU0Ljc5MTMgNDk2LjQzMyA1My4zNzc3IDQ5Ni40MzMgNTAuNTUwNVY0Mi4wNjg5QzQ5Ni40MzMgMzkuMjQxNyA0OTguMTAxIDM3LjgyOCA1MDEuNDM3IDM3LjgyOEg1MDYuMTg3VjI1Ljk1MzhDNTA2LjE4NyAxNS41NDk2IDUwOS4xNTUgOC42MjI5OSA1MTUuMDkzIDUuMTczNzlDNTIxLjAzIDEuNzI0NiA1MjguMDk4IDAgNTM2LjI5NyAwQzU0MC4xOTggMCA1NDMuNTM0IDAuMjI2MTc3IDU0Ni4zMDUgMC42Nzg1M0M1NDkuMTMyIDEuMTMwODggNTUxLjYyIDEuNjk2MzMgNTUzLjc2OSAyLjM3NDg2QzU1NS44MDQgMy4wNTMzOSA1NTYuNTM5IDQuNDY2OTkgNTU1Ljk3NCA2LjYxNTY3TDU1My40MjkgMTYuMTk5OUM1NTIuOTIxIDE4LjA2NTkgNTUxLjYyIDE4LjYzMTMgNTQ5LjUyOCAxNy44OTYyQzU0OC4yODQgMTcuNDQzOSA1NDYuNTMxIDE3LjEzMjkgNTQ0LjI2OSAxNi45NjMzQzU0Mi4wNjQgMTYuNzM3MSA1NDAuMzExIDE2LjYyNCA1MzkuMDExIDE2LjYyNEM1MzQuODgzIDE2LjYyNCA1MzIuMzM5IDE4LjA2NTkgNTMxLjM3NyAyMC45NDk2QzUzMC40MTYgMjMuODMzNCA1MjkuOTM1IDI4LjMyODYgNTI5LjkzNSAzNC40MzU0VjM3LjgyOEg1NDEuMTMxQzU0NC40NjcgMzcuODI4IDU0Ni4xMzUgMzkuMjQxNyA1NDYuMTM1IDQyLjA2ODlWNTAuNTUwNUM1NDYuMTM1IDUzLjM3NzcgNTQ0LjQ2NyA1NC43OTEzIDU0MS4xMzEgNTQuNzkxM0g1MjkuOTM1VjEyMS43OTZDNTI5LjkzNSAxMjUuMTg5IDUyOC4yMzkgMTI2Ljg4NSA1MjQuODQ2IDEyNi44ODVINTExLjI3NkM1MDcuODgzIDEyNi44ODUgNTA2LjE4NyAxMjUuMTg5IDUwNi4xODcgMTIxLjc5NlY1NC43OTEzSDUwMS40MzdaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTU1MS42NTkgODkuOTA1MlY0Mi45MTdDNTUxLjY1OSAzOS41MjQ0IDU1My4zNTUgMzcuODI4IDU1Ni43NDcgMzcuODI4SDU3MC4zMThDNTczLjcxMSAzNy44MjggNTc1LjQwNyAzOS41MjQ0IDU3NS40MDcgNDIuOTE3VjgzLjc5ODVDNTc1LjQwNyA5Ni4xMjUxIDU3Ni4yNTUgMTAzLjkgNTc3Ljk1MiAxMDcuMTIzQzU3OS42NDggMTEwLjM0NiA1ODMuMjEgMTExLjk1NyA1ODguNjM4IDExMS45NTdDNTk0LjQwNiAxMTEuOTU3IDU5OC43ODggMTA5LjY2NyA2MDEuNzg1IDEwNS4wODdDNjA0Ljc4MiAxMDAuNDUxIDYwNi4yOCA5MC44NjY1IDYwNi4yOCA3Ni4zMzQ2VjQyLjkxN0M2MDYuMjggMzkuNTI0NCA2MDcuOTc2IDM3LjgyOCA2MTEuMzY5IDM3LjgyOEg2MjQuOTRDNjI4LjMzMiAzNy44MjggNjMwLjAyOSAzOS41MjQ0IDYzMC4wMjkgNDIuOTE3VjEyMS43OTZDNjMwLjAyOSAxMjUuMTg5IDYyOC4zMzIgMTI2Ljg4NSA2MjQuOTQgMTI2Ljg4NUg2MTEuNTM5QzYwOC4xNDYgMTI2Ljg4NSA2MDYuNDUgMTI1LjE4OSA2MDYuNDUgMTIxLjc5NlYxMTYuODc3SDYwNi4xMTFDNjAzLjUxIDEyMS4zNDQgNjAwLjIwMiAxMjQuNDI1IDU5Ni4xODcgMTI2LjEyMkM1OTIuMTcyIDEyNy43NjIgNTg3LjQyMyAxMjguNTgxIDU4MS45MzggMTI4LjU4MUM1NzMuMjg3IDEyOC41ODEgNTY2LjA3NyAxMjUuODExIDU2MC4zMSAxMjAuMjY5QzU1NC41NDIgMTE0LjcyOCA1NTEuNjU5IDEwNC42MDcgNTUxLjY1OSA4OS45MDUyWiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik02NDcuNzY2IDEyNi44ODVDNjQ0LjM3MyAxMjYuODg1IDY0Mi42NzcgMTI1LjE4OSA2NDIuNjc3IDEyMS43OTZWMjEuNjI4MUM2NDIuNjc3IDE5LjA4MzcgNjQzLjI3IDE2Ljc2NTMgNjQ0LjQ1OCAxNC42NzMyTDY1MC45ODkgMy4yMjMwMkM2NTIuMjMyIDEuMDc0MzQgNjUzLjcwMyAwIDY1NS4zOTkgMEg2NjEuMzM2QzY2NC43MjkgMCA2NjYuNDI1IDEuNjk2MzMgNjY2LjQyNSA1LjA4ODk4VjEyMS43OTZDNjY2LjQyNSAxMjUuMTg5IDY2NC43MjkgMTI2Ljg4NSA2NjEuMzM2IDEyNi44ODVINjQ3Ljc2NloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNNjg0LjE2MiAxMjYuODg1QzY4MC43NjkgMTI2Ljg4NSA2NzkuMDczIDEyNS4xODkgNjc5LjA3MyAxMjEuNzk2VjIxLjYyODFDNjc5LjA3MyAxOS4wODM3IDY3OS42NjcgMTYuNzY1MyA2ODAuODU0IDE0LjY3MzJMNjg3LjM4NSAzLjIyMzAyQzY4OC42MjkgMS4wNzQzNCA2OTAuMDk5IDAgNjkxLjc5NSAwSDY5Ny43MzJDNzAxLjEyNSAwIDcwMi44MjEgMS42OTYzMyA3MDIuODIxIDUuMDg4OThWMTIxLjc5NkM3MDIuODIxIDEyNS4xODkgNzAxLjEyNSAxMjYuODg1IDY5Ny43MzIgMTI2Ljg4NUg2ODQuMTYyWiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxMjAuNTI0QzAgMTI0Ljc2NSAyLjI2MTc3IDEyNi44ODUgNi43ODUzIDEyNi44ODVIMzkuODYzNkM1OS4zNzE0IDEyNi44ODUgNzMuMzY2MSAxMjMuNjYyIDgxLjg0NzcgMTE3LjIxNkM5MC4zMjkzIDExMC43NyA5NC41NzAxIDEwMi4zNDUgOTQuNTcwMSA5MS45NDA4Qzk0LjU3MDEgODMuMDYzNCA5MS4wOTI3IDc2LjE5MzMgODQuMTM3NyA3MS4zMzA1QzgwLjQxNzIgNjguNzI5MSA3Ni45NTU1IDY2Ljc3NSA3My43NTI4IDY1LjQ2ODJDNjkuMjA1NSA2OC4wMTQ4IDY0LjE1MDQgNzAuODM0IDU4Ljk2NiA3My43MDM0TDUzLjQyNTEgMTA0LjY4OUM1My4zNTI0IDEwNS4wOTkgNTMuMTM3MiAxMDUuNDcgNTIuODE3MiAxMDUuNzM4TDQ2Ljk3MjQgMTEwLjU4N0M0Ni43OTI3IDExMC43MzcgNDYuNTc1NCAxMTAuODM1IDQ2LjM0NDEgMTEwLjg3QzQ2LjExMjcgMTEwLjkwNiA0NS44NzU5IDExMC44NzggNDUuNjU5NCAxMTAuNzg5QzQ1LjQ0MjkgMTEwLjcgNDUuMjU0OCAxMTAuNTU0IDQ1LjExNTQgMTEwLjM2NkM0NC45NzU5IDExMC4xNzkgNDQuODkwNSAxMDkuOTU3IDQ0Ljg2ODMgMTA5LjcyNUw0Mi4yNDk4IDgyLjg4OTRDMjkuMTgwOCA5MC4wNDcgMTguMTIyNSA5NS44OTkgMTUuMTUzMyA5Ny4wNDE0QzE0Ljk0NiA5Ny4xMTUgMTQuNzIzMyA5Ny4xMzQ0IDE0LjUwNjMgOTcuMDk3N0MxNC4yODk0IDk3LjA2MSAxNC4wODU1IDk2Ljk2OTMgMTMuOTE0MiA5Ni44MzE1TDMuNTEwNDggODguNjAxNUMzLjAzNDk1IDg4LjIxNjggMi42OTI2MiA4Ny42OTI4IDIuNTMxODIgODcuMTAzNkMyLjM3MTAxIDg2LjUxNDQgMi4zOTk4NyA4NS44ODk3IDIuNjE0MzEgODUuMzE3N0MyLjgyODc1IDg0Ljc0NTcgMy4yMTc5NCA4NC4yNTUzIDMuNzI2OTIgODMuOTE1OUM0LjIzNTkxIDgzLjU3NjQgNC44Mzg5NyA4My40MDQ5IDUuNDUwOTUgODMuNDI1NkwxNi4xMzUyIDgzLjg5MTlMNjAuNjI1OSA1MS42NDc4QzYxLjYzOTkgNTAuODg5NCA2Mi44MDU3IDUwLjM1NzMgNjQuMDQ0MSA1MC4wODc4QzY1LjI4MjUgNDkuODE4MyA2Ni41NjQ2IDQ5LjgxNzYgNjcuODAzMyA1MC4wODU3TDgyLjUzMjIgNTMuMjU2NUM4My4yNDE3IDUzLjQwMTMgODMuOTMwMSA1My43OTUzIDg0LjQzNTcgNTQuMzExMUM4OC44NDMyIDUwLjIxMTMgOTEuMDA3OCA0NC43MTgyIDkxLjAwNzggMzcuOTEyOUM5MS4wMDc4IDI2LjgzMDIgODcuMTkxMSAxOC42MzEzIDc5LjU1NzYgMTMuMzE2MkM3MS45ODA3IDcuOTQ0NDYgNTcuMzM1OCA1LjI1ODYxIDM1LjYyMjggNS4yNTg2MUg2Ljc4NTNDMi4yNjE3NyA1LjI1ODYxIDAgNy4zNzkwMSAwIDExLjYxOThWMTIwLjUyNFpNMjkuODgwOCA2OS4xMUwxNi40Mzc3IDY1LjIzOTdDMTYuMjA2NyA2NS4xODA0IDE1Ljk5ODcgNjUuMDUzMyAxNS44NDA5IDY0Ljg3NDlDMTUuNjgzIDY0LjY5NjQgMTUuNTgyNSA2NC40NzQ5IDE1LjU1MjMgNjQuMjM4OEMxNS41MjIxIDY0LjAwMjggMTUuNTYzNiA2My43NjMxIDE1LjY3MTQgNjMuNTUwOUMxNS43NzkyIDYzLjMzODYgMTUuOTQ4NSA2My4xNjM1IDE2LjE1NzIgNjMuMDQ4MkwyMi44NjcgNTkuMjAxM0MyMy4wNDE3IDU5LjA4ODMgMjMuMjQzNSA1OS4wMjM5IDIzLjQ1MTUgNTkuMDE0N0w0NC42NTY0IDU4LjQwODZMMjkuODgwOCA2OS4xMVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K") no-repeat center/contain; transition:background-color .3s ease; } .nav.is-scrolled .brand__logo{height:22px;width:120px} .nav__links{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:600;color:var(--nav-fg-soft)} .nav__links a{transition:color .15s} .nav__links a:hover{color:var(--nav-fg)} .navcta{ display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;white-space:nowrap;flex:0 0 auto; font-size:14px;font-weight:700;color:#fff;background:#0a0a0b; box-shadow:0 6px 16px -8px rgba(0,0,0,.45);transition:transform .15s ease, box-shadow .15s ease, background .3s ease, color .3s ease; } /* Dark mode and scrolled: invert the CTA to a white pill. */ [data-theme="dark"] .navcta,.nav.is-scrolled .navcta{color:#0a0a0b;background:#fff} .navcta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(0,0,0,.55)} /* Hamburger (mobile only) */ .nav__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px; width:38px;height:38px;flex:0 0 auto;border-radius:999px;cursor:pointer; color:var(--nav-fg);background:rgba(125,135,155,.14);border:1px solid rgba(125,135,155,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s ease, color .3s ease} .nav__burger:hover{background:rgba(125,135,155,.24)} .nav__burger span{width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease, opacity .2s ease} .nav.is-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav.is-open .nav__burger span:nth-child(2){opacity:0} .nav.is-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:1024px){ .nav__bar{gap:10px;padding:0 10px 0 16px} .nav__burger{display:inline-flex;order:3} /* On small screens the CTA sits next to the burger; the theme toggle moves into the menu. */ .navcta{margin-left:auto;order:2;padding:0 14px} .themebtn:not(.themebtn--menu){display:none} .nav__links .themebtn--menu{ display:flex;justify-content:space-between;width:100%;height:auto; padding:11px 14px;border-radius:12px;color:#0a0a0b; background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none; } .nav__links .themebtn--menu:hover{background:rgba(10,15,40,.06);transform:none} .nav__links .themebtn--menu svg{width:20px;height:20px} [data-theme="dark"] .nav__links .themebtn--menu{color:#fff} [data-theme="dark"] .nav__links .themebtn--menu:hover{background:rgba(255,255,255,.08)} .nav__links{ position:absolute;top:calc(100% + 10px);left:0;right:0;margin-left:0; flex-direction:column;gap:4px;padding:10px;border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84)); -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(10,15,40,.10); box-shadow:0 18px 44px -18px rgba(2,6,23,.45); opacity:0;transform:translateY(-8px);pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .nav__links a{padding:11px 14px;border-radius:12px;font-size:15px;color:#0a0a0b} .nav__links a:hover{background:rgba(10,15,40,.06);color:#0a0a0b} [data-theme="dark"] .nav__links{ background:linear-gradient(180deg, rgba(18,24,38,.96), rgba(12,17,27,.9)); border-color:rgba(255,255,255,.12); } [data-theme="dark"] .nav__links a{color:#fff} [data-theme="dark"] .nav__links a:hover{background:rgba(255,255,255,.08);color:#fff} .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto} } /* ============================================================ HERO (full app-dashboard gradient) ============================================================ */ .hero{ position:relative;overflow:hidden;overflow:clip;color:var(--ink); /* Light mode: a clean, bright surface. Let the product carry the colour. */ background:linear-gradient(180deg, #ffffff 0%, #eef1f7 100%); } /* Dark mode: the calm near-black surface. */ [data-theme="dark"] .hero{ color:#fff; background:linear-gradient(180deg, #03050A 0%, #070b16 100%); } /* A single, very subtle cool glow behind the device. Nothing else competes. */ .hero__glow{position:absolute;inset:-12% -10% auto auto;width:680px;height:620px;border-radius:50%; pointer-events:none;filter:blur(40px); background:radial-gradient(closest-side, rgba(69,113,218,.12), transparent 72%)} [data-theme="dark"] .hero__glow{background:radial-gradient(closest-side, rgba(69,113,218,.20), transparent 72%)} .hero__fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg, transparent, rgba(6,7,11,.0));pointer-events:none} /* Match the nav bar width (980px) so the hero copy lines up with the nav. */ /* Centered, stacked hero (pop.site composition): copy on top, device below. */ .hero__inner{position:relative;z-index:2;max-width:980px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:140px;padding-bottom:88px} .hero__copy{display:flex;flex-direction:column;align-items:center;max-width:820px} .eyebrow--light{color:var(--green-ring)} .hero__title{font-size:clamp(40px,6.6vw,82px);line-height:1.02;letter-spacing:-.04em;font-weight:600;margin:0 0 22px;color:inherit;max-width:16ch} .hero__sub{font-size:clamp(17px,1.5vw,22px);line-height:1.5;font-weight:400;color:var(--ink-soft);max-width:560px;margin:0 auto 30px} [data-theme="dark"] .hero__sub{color:rgba(255,255,255,.78)} .hero__cta{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:6px} /* QR download modal (desktop only; phones deep-link straight to the store) */ .qrmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease} .qrmodal[hidden]{display:none} .qrmodal.is-open{opacity:1} .qrmodal__backdrop{position:absolute;inset:0;background:rgba(3,5,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .qrmodal__card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:40px 44px 34px;max-width:400px;width:calc(100% - 40px);text-align:center;transform:translateY(10px) scale(.98);transition:transform .22s ease} .qrmodal.is-open .qrmodal__card{transform:translateY(0) scale(1)} .qrmodal__close{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer} .qrmodal__close:hover{background:rgba(128,128,128,.14)} .qrmodal__title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px} .qrmodal__sub{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 22px} .qrmodal__qr{display:block;width:220px;height:220px;margin:0 auto 20px;border-radius:18px;border:1px solid var(--card-border)} .qrmodal__store{margin:0 auto} .hero__ctaline{margin:0;font-size:14px;color:rgba(255,255,255,.7);font-weight:500} .hero__trust{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:rgba(255,255,255,.85);font-weight:500} .hero__trust li{display:flex;align-items:center;gap:10px} .hero__rating{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.72);font-weight:500} .hero__device{display:flex;justify-content:center} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* ---------- Auto-cycling product screens; the iPhone frame IS the screen ---------- Each beat is a full phone that cross-fades. The frame dissolves at the bottom into the hero background, and the callout pills overlap outside the bezel. */ .ob{position:relative;width:300px;height:580px;margin:0 auto;animation:floaty 6s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.ob{animation:none}} .ob__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none} .ob__slide.is-active{opacity:1;pointer-events:auto} /* iPhone frame — bottom masked to transparent so it melts into the background */ .ob__device{position:relative;width:300px;height:580px;border-radius:48px;padding:12px; background:linear-gradient(160deg,#1c1f27,#05060a); box-shadow:0 40px 80px -30px rgba(8,15,45,.55), 0 0 0 1px rgba(255,255,255,.06) inset; -webkit-mask:linear-gradient(180deg,#000 0,#000 56%,transparent 88%); mask:linear-gradient(180deg,#000 0,#000 56%,transparent 88%)} /* .ob__device--solid (How-it-works + planner) now uses the real frame image too, defined alongside the hero frame below. */ .ob__notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:100px;height:24px;background:#05060a;border-radius:14px;z-index:4} .ob__screen{position:absolute;inset:12px;border-radius:38px;overflow:hidden;padding:44px 16px 0;display:flex;flex-direction:column;gap:10px;text-align:left} .obs--grad{background:linear-gradient(160deg,#030509 0%, #2545b0 42%, #f2f2f6 99%);color:#fff} .obs--scan{background:#000;align-items:center;gap:12px;padding-left:9px;padding-right:9px} .obs--export{background:#eef0f4} /* Floating callout pills — overlap OUTSIDE the iPhone bezel */ .obchip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:5px; background:#fff;color:#0a0a0b;font-size:11.5px;font-weight:700;white-space:nowrap; padding:7px 11px;border-radius:99px;border:1px solid rgba(0,0,0,.05); box-shadow:0 8px 18px -6px rgba(0,0,0,.4);transform:rotate(var(--rot,0))} .obchip svg{flex:0 0 auto} .obchip--tr{top:132px;right:-26px} .obchip--bl{top:300px;left:-30px} /* ---------- Real iPhone frame image over the CSS screens (pop.site look) ---------- Used by the hero (.hero__device .ob__device) AND the How-it-works / planner step devices (.ob__device--solid). The frame is painted as ::after so the Dynamic Island sits ON TOP of the screen and the drop-shadow follows the phone silhouette. */ .hero__device .ob, .hero__device .ob__device, .ob__device--solid{width:300px;height:609px} /* 1009:2048 native frame aspect */ .hero__device .ob__device, .ob__device--solid{ border-radius:0;padding:0;background:none;box-shadow:none;overflow:visible; -webkit-mask:none;mask:none} .hero__device .ob__notch, .ob__device--solid .ob__notch{display:none} /* island is baked into the frame */ /* CSS screen sits just under the bezel cutout (insets measured from the frame's alpha) */ .hero__device .ob__screen, .ob__device--solid .ob__screen{ inset:auto;top:2.5%;left:5%;right:5.1%;bottom:2.2%; border-radius:30px;padding:40px 16px 0} .hero__device .ob__device::after, .ob__device--solid::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:url("images/IphoneFrame.avif") center/100% 100% no-repeat; filter:drop-shadow(0 38px 55px rgba(8,15,45,.30))} [data-theme="dark"] .hero__device .ob__device::after, [data-theme="dark"] .ob__device--solid::after{ filter:drop-shadow(0 38px 60px rgba(0,0,0,.55))} /* Status palette shared by dashboard + schengen cards */ .is-safe{--c:var(--green);--barc:var(--blue-deep)} .is-warn{--c:var(--orange);--barc:var(--orange)} .is-danger{--c:var(--red);--barc:var(--red)} .obs__badge{align-self:flex-start;font-size:9px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--c,var(--green));padding:3px 8px;border-radius:99px} /* Dashboard card */ .obs__card{border-radius:14px;padding:13px} .obs__card--dark{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25));display:flex;flex-direction:column;gap:7px} .obs__big{display:flex;align-items:baseline;gap:3px;color:#fff} .obs__big strong{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.02em} .obs__big span{font-size:16px;font-weight:600;opacity:.85} .obs__cap{font-size:11px;color:rgba(255,255,255,.85)} .obs__bar{height:6px;border-radius:99px;overflow:hidden} .obs__bar--dark{background:rgba(255,255,255,.25)} .obs__bar--light{background:rgba(0,0,0,.08)} .obs__fill{display:block;height:100%;border-radius:99px;background:var(--barc,var(--blue-deep));transition:width .5s ease} /* Trip rows (dashboard + schengen) */ .obs__trips{display:flex;flex-direction:column;gap:7px} .obs__trip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border-radius:11px;padding:8px 9px} .obs__trip .flag{width:26px;height:26px;box-shadow:0 0 0 1px rgba(255,255,255,.25)} .obs__trip-b{display:flex;flex-direction:column;line-height:1.2} .obs__trip-b strong{font-size:12px;font-weight:700;color:#fff} .obs__trip-b span{font-size:9.5px;color:rgba(255,255,255,.6)} /* Schengen card (white, on gradient) */ .obs__card--light{background:rgba(255,255,255,.93);color:rgba(0,0,0,.9);display:flex;flex-direction:column;gap:8px} .obs__schhead{display:flex;align-items:center;justify-content:space-between} .obs__schtitle{font-size:10px;font-weight:800;letter-spacing:.03em;color:rgba(0,0,0,.9)} .obs__schmeter{display:flex;align-items:baseline;gap:4px} .obs__schmeter strong{font-size:25px;font-weight:800;letter-spacing:-.02em} .obs__schmeter span{font-size:9.5px;color:rgba(0,0,0,.5)} .obs__schmeter em{margin-left:auto;font-size:9.5px;font-weight:700;font-style:normal} .obs__schnote{font-size:8.5px;color:rgba(0,0,0,.4)} .obs__schcta{text-align:center;background:#000;color:#fff;font-size:10px;font-weight:700;padding:7px;border-radius:99px} .obs__schlabel{font-size:9px;font-weight:800;letter-spacing:.03em;color:rgba(255,255,255,.9);margin-top:2px} /* Scanner */ .obs__scancard{position:relative;width:100%;margin-top:10px;background:#fff;border-radius:11px;padding:13px;overflow:hidden; border:1.5px solid rgba(255,255,255,.35);transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease} .obs__scancard::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--green-ring),transparent);box-shadow:0 0 6px var(--green-ring); animation:obscan 1.4s ease-in-out infinite} .obs__scancard.is-locked{border-color:var(--green-ring);transform:scale(1.04);box-shadow:0 0 12px rgba(56,235,173,.7)} .obs__scancard.is-locked::after{opacity:0;animation:none} .is-paused .obs__scancard::after{animation-play-state:paused} @keyframes obscan{0%{top:0}50%{top:calc(100% - 2px)}100%{top:0}} .obs__detected{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);color:#fff;font-size:10.5px;font-weight:600;padding:6px 12px;border-radius:99px;opacity:0;transform:scale(.7);transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.4,.4,1)} .obs__detected.is-on{opacity:1;transform:scale(1)} .obs__check{width:16px;height:16px;border-radius:50%;background:var(--green-ring);color:#04221a;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center} .obs__shutter{margin-top:20px;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45) inset, 0 0 0 3px rgba(255,255,255,.3)} /* Scanner documents */ .doc{font-family:var(--font);color:#0a0a0b;display:flex;flex-direction:column;gap:6px} .doc__top{display:flex;justify-content:space-between;align-items:center} .doc__top b{font-size:10px;font-weight:900} .doc__top small{font-size:6.5px;font-weight:700;color:#9aa0ab} .doc__route{display:flex;align-items:center;justify-content:space-between} .doc__route strong{display:block;font-size:17px;font-weight:800;line-height:1} .doc--pass .doc__route div span,.doc__route .doc__r span{font-size:6.5px;color:#9aa0ab} .doc__r{text-align:right} .doc__plane{font-size:10px;color:#9aa0ab} .doc__meta{display:flex;justify-content:space-between} .doc__meta small{display:block;font-size:6px;font-weight:700;color:#9aa0ab} .doc__meta b{font-size:8px;font-weight:700} .doc__barcode{height:20px;margin-top:2px;background:repeating-linear-gradient(90deg,#0a0a0b 0,#0a0a0b 2px,#fff 2px,#fff 4px,#0a0a0b 4px,#0a0a0b 5px,#fff 5px,#fff 8px)} .doc__qr{width:32px;height:32px;background: repeating-linear-gradient(0deg,#0a0a0b 0 2px,#fff 2px 4px), repeating-linear-gradient(90deg,#0a0a0b 0 2px,transparent 2px 4px);background-blend-mode:multiply} .doc--ocr b{font-size:10px;font-weight:700} .doc--ocr p{margin:0;font-size:7.5px;line-height:1.4;color:rgba(0,0,0,.72)} /* Export record */ .obs--export{padding:44px 0 0} .obs__rechead{background:var(--blue);color:#fff;text-align:center;font-size:11px;font-weight:800;letter-spacing:.05em;padding:12px;margin:0 15px;border-radius:10px} .obs__recrows{padding:3px 15px;display:flex;flex-direction:column} .obs__recrow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #e6e8ee;font-size:10.5px} .obs__recrow:last-child{border-bottom:none} .obs__recrow span{color:#6b7280} .obs__recrow b{color:#0a0a0b;font-weight:700} .obs__seal{color:var(--green);display:inline-flex;transform:scale(1.5) rotate(-8deg);opacity:0;transition:transform .35s cubic-bezier(.2,1.5,.4,1), opacity .25s ease} .obs__seal.is-stamped{transform:none;opacity:1} .obs__recbtn{margin:6px 15px 0;text-align:center;background:var(--green);color:#fff;font-weight:700;font-size:10.5px;padding:11px;border-radius:10px} /* ============================================================ SHARED MOCKUP BITS ============================================================ */ /* Circular country flags (ISO codes), used by the live trip rows. */ .flag{flex:0 0 auto;border-radius:50%;object-fit:cover;display:block;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08)} /* ============================================================ STRIP ============================================================ */ .strip{background:var(--ink);color:#fff} .strip__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:18px 0;font-size:13.5px;font-weight:600;letter-spacing:.01em;opacity:.92} .strip__dot{opacity:.4} @media (max-width:680px){.strip__inner{font-size:12px;gap:10px}} /* ============================================================ SECTIONS ============================================================ */ .section{padding:128px 0} .section__head{max-width:680px;margin:0 auto 64px;text-align:center} .section__head--left{margin-left:0;text-align:left} .section__title{font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-.032em;line-height:1.06;margin:0 0 18px;text-wrap:balance} .section__lead{font-size:clamp(16px,1.4vw,19px);font-weight:400;color:var(--ink-soft);margin:0;text-wrap:balance} /* Problem cards */ .problem{background:var(--surface-2)} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pcard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--shadow-soft); transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, opacity .7s cubic-bezier(.2,.7,.2,1)} .pcard:hover{transform:translateY(-4px);box-shadow:0 30px 64px -30px rgba(10,20,60,.5)} @media (prefers-reduced-motion:reduce){.pcard{transition:none}} /* Frosted-glass icon tiles (echoes the liquid-glass nav) */ .pcard__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;margin-bottom:18px; border:1px solid var(--card-border); -webkit-backdrop-filter:blur(8px) saturate(170%);backdrop-filter:blur(8px) saturate(170%); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -1px 0 rgba(255,255,255,.08) inset, 0 10px 22px -12px rgba(2,6,23,.35)} /* Neutral, monochrome icon tiles. Colour comes from the product, not the page. */ .icon--red,.icon--orange,.icon--blue{ color:var(--ink-soft); background:linear-gradient(165deg, var(--surface), var(--surface-2)); } .pcard h3{font-size:19px;font-weight:600;margin:0 0 9px;letter-spacing:-.01em} .pcard p{margin:0;color:var(--ink-soft);font-size:15px} /* How it works steps */ /* Match the nav bar width (980px) so the steps line up with the nav and hero. */ .step{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:980px;margin:0 auto 96px} .step:last-of-type{margin-bottom:64px} .step--reverse .step__copy{order:2} .step--reverse .step__device{order:1} /* Inset the copy so its outer margin matches the phone's (the phone is centered in its column, giving it a (column-300)/2 side gap; mirror that on the text). */ .step__copy{padding-left:clamp(0px, calc((100vw - 700px) / 4), 81px)} .step--reverse .step__copy{padding-left:0;padding-right:clamp(0px, calc((100vw - 700px) / 4), 81px)} .step__num{display:inline-block;font-size:13px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px} /* Numbered gradient badge (echoes the avatar gradient) */ .step__badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px; font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:18px; background:linear-gradient(150deg,var(--blue),var(--blue-deep)); box-shadow:0 12px 26px -12px rgba(21,48,160,.65), 0 1px 0 rgba(255,255,255,.25) inset} .step__copy h3{font-size:clamp(25px,3vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0 0 14px;text-wrap:balance} .step__copy p{font-size:17.5px;font-weight:400;color:var(--ink-soft);margin:0 0 20px;max-width:460px;text-wrap:balance} .step__device{display:flex;justify-content:center} /* Fade the lower half of the step device frames out (hero frame stays full) */ .step__device .ob__device{ -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 78%); mask-image:linear-gradient(to bottom,#000 50%,transparent 78%)} .planner-stage{display:flex;justify-content:center;max-width:980px;margin:0 auto 64px} .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .ticks li{position:relative;padding-left:30px;font-size:15.5px;font-weight:600;color:var(--ink)} .ticks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--green); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat} /* Richer ticks: frosted-glass chips that echo the liquid-glass nav pill */ .ticks--rich{gap:10px;align-items:flex-start} .ticks--rich li{ align-self:flex-start;display:inline-flex;align-items:center;gap:10px; padding:9px 16px 9px 11px;border-radius:999px;font-size:15px; background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55)); -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(10,15,40,.10); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 26px -18px rgba(2,6,23,.35)} .ticks--rich li::before{ position:static;flex:0 0 auto;top:auto;left:auto;width:22px;height:22px;border-radius:50%; -webkit-mask:none;mask:none; background:rgba(26,158,115,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231A9E73' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat} [data-theme="dark"] .ticks--rich li{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); border-color:rgba(255,255,255,.14); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 12px 26px -18px rgba(0,0,0,.5)} .centered-cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px} /* Benefits */ .benefits{background:var(--surface-2)} .cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .bcard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow-soft)} .bcard__k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:14px} .bcard h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0 0 8px} .bcard p{margin:0;color:var(--ink-soft);font-size:14.5px} /* Privacy band */ .privacy{background:linear-gradient(150deg,#030509 0%, #16306f 60%, #1b3c8f 100%);color:#fff;padding:112px 0} .privacy__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center} .privacy .eyebrow{color:var(--green-ring)} .privacy__copy h2{font-size:clamp(28px,3.6vw,46px);font-weight:600;letter-spacing:-.032em;margin:0 0 14px;line-height:1.06} .privacy__copy p{color:rgba(255,255,255,.82);font-size:17px;max-width:520px;margin:0 0 22px} .privacy__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:540px} .privacy__list li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600} .privacy__list .dot--blue{background:var(--green-ring)} .privacy__shield{display:flex;justify-content:center} /* Rotating trust phrase (replaces the old frosted badge tiles) */ .privacy__rotator{margin:0;min-height:1.3em} .privacy__rotword{display:inline-block;font-family:var(--font-display); font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.2; color:var(--green-ring); transition:opacity .35s ease, transform .35s ease} .privacy__rotword.is-out{opacity:0;transform:translateY(-8px)} @media (prefers-reduced-motion:reduce){.privacy__rotword{transition:none}} /* Reviews */ .ratingline{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px;font-size:14px;color:var(--muted);font-weight:500} .reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .review{margin:0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column} .reviews__note{text-align:center;font-size:13px;color:var(--muted);margin:22px 0 0} .review__stars{color:#F5A623;letter-spacing:2px;font-size:15px;margin-bottom:12px} .review blockquote{margin:0 0 18px;font-size:15.5px;line-height:1.55;color:var(--ink);font-weight:500} .review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto} .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--blue),var(--blue-deep));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto} .review figcaption strong{display:block;font-size:14.5px;font-weight:700} .review figcaption div span{font-size:12.5px;color:var(--muted)} /* FAQ */ .faq__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start} .faq__list{display:flex;flex-direction:column;gap:12px} .qa{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-md);padding:4px 22px;box-shadow:var(--shadow-soft);overflow:hidden} .qa summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:16px} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";font-size:24px;font-weight:400;color:var(--blue);transition:transform .28s cubic-bezier(.4,0,.2,1);line-height:1} .qa.is-open summary::after{transform:rotate(45deg)} /* animated answer panel (smooth open/close, driven by JS height) */ .qa__a{height:0;overflow:hidden;transition:height .32s cubic-bezier(.4,0,.2,1)} .qa p{margin:0;padding:2px 0 18px;color:var(--ink-soft);font-size:15px;max-width:560px} /* Final CTA */ .finalcta{position:relative;overflow:hidden;background:var(--band-dark);color:#fff;padding:96px 0;text-align:center} .finalcta__glow{position:absolute;inset:-30% 30% auto;height:480px;border-radius:50%; background:radial-gradient(closest-side, rgba(69,113,218,.45), transparent 70%);filter:blur(20px);pointer-events:none} .finalcta__inner{position:relative} .finalcta h2{font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-.035em;line-height:1.04;margin:0 0 16px} .finalcta p{font-size:18.5px;font-weight:400;color:rgba(255,255,255,.78);max-width:560px;margin:0 auto 30px} .finalcta__inner .appstore{margin:0 auto} .finalcta__line{font-size:14px;color:rgba(255,255,255,.6);margin-top:16px} /* Footer */ .footer{background:#06070b;color:rgba(255,255,255,.7);padding:48px 0} .footer__inner{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center} .footer__brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:17px} .footer__brand .brand__mark{color:var(--blue)} .footer__links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;font-weight:600} .footer__links a:hover{color:#fff} .footer__legal{font-size:12.5px;color:rgba(255,255,255,.45);max-width:620px;line-height:1.6;margin:0} /* ============================================================ RESPONSIVE ============================================================ */ /* iPad Pro and down: the privacy band and FAQ center so their copy clears the gutter. */ @media (max-width:1024px){ .privacy__inner{grid-template-columns:1fr;text-align:center} .privacy__copy p{margin-left:auto;margin-right:auto} .privacy__list{margin-left:auto;margin-right:auto} .privacy__list li{justify-content:center} .privacy__shield{order:-1} .faq__inner{grid-template-columns:1fr;gap:30px} .section__head--left{text-align:center} } @media (max-width:980px){ .hero__inner{gap:30px;padding-top:108px;padding-bottom:72px} .hero__copy{display:flex;flex-direction:column;align-items:center;order:1} .hero__device{order:2} .hero__cta{align-items:center} .hero__trust{align-items:center} .reviews__grid{grid-template-columns:repeat(2,1fr)} .cards4{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .section{padding:64px 0} .section__head{margin-bottom:38px} .cards3{grid-template-columns:1fr} .step{grid-template-columns:1fr;gap:32px;margin-bottom:64px;text-align:center} .step__copy{display:flex;flex-direction:column;align-items:center;padding-left:0;padding-right:0} .step__badge{margin:0 0 16px;width:40px;height:40px;font-size:18px;border-radius:12px} .step__copy h3{font-size:22px;line-height:1.2;margin:0 0 12px} .step__copy p{margin:0 0 22px} .step--reverse .step__copy{order:1} .step--reverse .step__device{order:2} .ticks{text-align:left} .reviews__grid{grid-template-columns:1fr} .privacy__list{grid-template-columns:1fr} } @media (max-width:440px){ .cards4{grid-template-columns:1fr} .appstore--lg .appstore__svg{width:150px;height:50px} } /* ============================================================ THEME TOGGLE (lives in the glass nav) ============================================================ */ .themebtn{ pointer-events:auto;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;flex:0 0 auto;border-radius:999px;cursor:pointer; color:var(--nav-fg);background:rgba(125,135,155,.14);border:1px solid rgba(125,135,155,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:background .15s ease, transform .15s ease, color .3s ease; } .themebtn:hover{background:rgba(125,135,155,.24);transform:translateY(-1px)} .themebtn svg{width:18px;height:18px} /* Light (default) shows the moon (tap to go dark); dark shows the sun. */ .themebtn svg.themebtn__sun{display:none} .themebtn svg.themebtn__moon{display:block} [data-theme="dark"] .themebtn svg.themebtn__sun{display:block} [data-theme="dark"] .themebtn svg.themebtn__moon{display:none} /* Menu variant: a labelled row that only appears inside the mobile dropdown. */ .themebtn--menu{display:none} .themebtn__label{font-size:15px;font-weight:600} .themebtn__label--light{display:none} [data-theme="dark"] .themebtn__label--dark{display:none} [data-theme="dark"] .themebtn__label--light{display:inline} /* ============================================================ TRIP PLANNER MOCKUP (what-if planner screen) ============================================================ */ .obs__plantrip{display:flex;align-items:center;gap:10px;margin-top:2px} .obs__plantrip .flag{width:30px;height:30px;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .obs__plantrip-b{display:flex;flex-direction:column;line-height:1.2} .obs__plantrip-b strong{font-size:14px;font-weight:800;color:rgba(0,0,0,.9)} .obs__plantrip-b span{font-size:9.5px;color:rgba(0,0,0,.5)} .obs__planverdict{font-size:11px;font-weight:800;color:var(--c,var(--green))}