/* ============================================================ Scoped — scoped-app.com shared stylesheet One file behind every page: landing, blog, legal, reset. Fonts are linked per-page in (Bricolage Grotesque, Hanken Grotesk, IBM Plex Mono via Google Fonts). ============================================================ */ :root { --bg: #0B1220; --bg-alt: #0E1728; --bg-deep: #070C16; --card: #131E33; --card-2: #172542; --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.16); --text: #EAF0FB; --muted: #93A4C3; --primary: #2E7DFF; --primary-hi:#5AA6FF; --success: #33C77E; --paper: #FFFFFF; --paper-ink: #111111; --paper-box: #E0E1E6; --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --maxw: 1140px; --loop: 13s; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; margin: 0; } a { color: inherit; } p { margin: 0; } img { max-width: 100%; height: auto; } .inner, .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 26px; } .eyebrow { font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 700; font-size: 0.98rem; border: 1px solid transparent; border-radius: 12px; padding: 14px 22px; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn.primary { background: var(--primary); color: #fff; } .btn.primary:hover { background: #226ae6; } .btn.ghost { background: transparent; border-color: var(--line-2); color: var(--text); } .btn.ghost:hover { border-color: var(--primary-hi); color: var(--primary-hi); } .btn:focus-visible { outline: 2px solid var(--primary-hi); outline-offset: 2px; } .btn:disabled { opacity: 0.6; cursor: default; } /* reveal on scroll */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); } [data-reveal].in { opacity: 1; transform: none; } .no-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* ============================================================ SITE HEADER (shared) */ .site-nav { border-bottom: 1px solid transparent; } .site-nav .inner { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 14px; } .lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); } .lockup svg { width: 30px; height: 30px; color: var(--primary); } .lockup .wm { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; } .topnav { display: flex; gap: 28px; align-items: center; } .topnav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .topnav a:hover { color: var(--text); } .topnav .btn { padding: 10px 16px; font-size: 0.88rem; } /* ============================================================ HERO (landing) */ .page-top { position: relative; overflow: hidden; background: radial-gradient(760px 520px at 82% -6%, rgba(46,125,255,0.24), transparent 68%), radial-gradient(560px 420px at -4% 100%, rgba(46,125,255,0.12), transparent 70%), var(--bg); } .hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 40px; align-items: center; padding: 40px 0 90px; } .hero .eyebrow { color: var(--primary-hi); } .hero h1 { font-size: clamp(2.9rem, 7vw, 4.6rem); letter-spacing: -0.035em; } .hero h1 .done { background: linear-gradient(100deg, var(--primary-hi), var(--primary) 55%, #8FC0FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .sub { margin: 22px 0 0; font-size: 1.14rem; color: var(--muted); max-width: 42ch; } .notify { margin-top: 30px; max-width: 440px; } .nlabel { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 8px; } .nrow { display: flex; gap: 8px; flex-wrap: wrap; } .nrow input { flex: 1 1 180px; font-family: var(--body); font-size: 0.95rem; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.05); color: var(--text); } .nrow input::placeholder { color: #6E7F9E; } .nrow input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; } .notify-msg { margin-top: 10px; font-size: 0.88rem; min-height: 1.2em; } .notify-msg.ok { color: var(--success); } .notify-msg.err { color: #F0685F; } .badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .abadge { display: inline-flex; align-items: center; gap: 9px; background: #000; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 8px 14px; opacity: 0.7; } .abadge svg { width: 20px; height: 20px; flex: none; } .abadge .t { display: flex; flex-direction: column; line-height: 1.12; color: #fff; } .abadge .t small { font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.9; } .abadge .t b { font-family: var(--display); font-weight: 700; font-size: 0.9rem; } .proofs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; } .proofs li { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: var(--muted); } .proofs li svg { width: 17px; height: 17px; color: var(--success); flex: none; } /* ---- two phones ---- */ .phones { position: relative; display: grid; place-items: center; min-height: 580px; } .phone { position: relative; width: 264px; border-radius: 42px; background: #05070D; padding: 10px; box-shadow: 0 50px 100px -34px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.05) inset; } .phone::after { content: ""; position: absolute; right: -3px; top: 124px; width: 3px; height: 56px; border-radius: 2px; background: #1c2740; } .phone::before { content: ""; position: absolute; left: -3px; top: 100px; width: 3px; height: 90px; border-radius: 2px; background: #1c2740; } .screen { position: relative; height: 508px; border-radius: 34px; overflow: hidden; background: var(--bg); } .dyn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 88px; height: 23px; border-radius: 100px; background: #05070D; z-index: 30; } .phone.behind { position: absolute; top: 4px; left: 2px; transform: rotate(-7deg) scale(0.82); transform-origin: top left; z-index: 1; filter: saturate(0.92); } .phone.main { position: relative; z-index: 2; transform: rotate(2.5deg); margin-top: 54px; margin-left: 46px; } .statusbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px 4px; font-size: 11px; font-weight: 600; font-family: var(--mono); } .statusbar .sb-r { display: flex; align-items: center; gap: 4px; } .statusbar .bars { display: flex; align-items: flex-end; gap: 2px; height: 9px; } .statusbar .bars i { width: 3px; border-radius: 1px; background: currentColor; } .statusbar .bars i:nth-child(1){height:4px} .statusbar .bars i:nth-child(2){height:6px} .statusbar .bars i:nth-child(3){height:8px} .statusbar .bars i:nth-child(4){height:9px} .statusbar .batt { width: 20px; height: 10px; border: 1px solid currentColor; border-radius: 3px; position: relative; opacity: 0.9; } .statusbar .batt::after { content:""; position:absolute; inset:2px; right:5px; background: currentColor; border-radius: 1px; } .home { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: #fff; } .home .statusbar { color: #fff; } .home .hero-panel { background: var(--card); margin: 6px 14px 0; border-radius: 18px; padding: 16px 16px 18px; } .home .hp-eye { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .home .hp-lbl { font-size: 10px; color: var(--muted); margin: 10px 0 3px; } .home .hp-amt { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; } .home .stat-row { display: flex; gap: 8px; margin: 12px 14px 0; } .home .stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; } .home .stat b { font-family: var(--display); font-weight: 700; font-size: 16px; } .home .stat span { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; } .home .rq { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 16px 14px 8px; } .home .q { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin: 0 14px 7px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; } .home .q .nm { font-size: 11px; font-weight: 700; } .home .q .jb { font-size: 9.5px; color: var(--muted); margin-top: 1px; } .home .q .amt { font-size: 11px; font-weight: 700; } .home .fab { position: absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; color: #fff; font-size: 22px; box-shadow: 0 10px 24px -8px rgba(46,125,255,0.7); } .scr-view { position: absolute; inset: 0; display: flex; flex-direction: column; } .rec { background: var(--bg); color: #fff; animation: recFade var(--loop) linear infinite; } .rec .statusbar { color: #fff; } .rv-top { display: flex; align-items: center; gap: 11px; padding: 14px 20px 0; } .rv-top .bk { font-size: 20px; line-height: 1; opacity: 0.85; } .rv-top .ti { font-size: 15px; font-weight: 700; font-family: var(--display); } .rec .rv-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30px; } .scoper { position: relative; width: 168px; height: 168px; display: grid; place-items: center; margin-bottom: 26px; } .scoper svg { position: absolute; inset: 0; width: 100%; height: 100%; } .scoper svg path { stroke: var(--primary-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; } .mic-orb { width: 96px; height: 96px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; animation: micPulse 2.2s ease-in-out infinite; } .mic-orb svg { position: static; width: 33px; height: 33px; fill: #fff; } .rv-wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-bottom: 18px; } .rv-wave i { width: 3px; border-radius: 100px; background: var(--primary-hi); height: 60%; transform-origin: center; animation: breathe 1.1s ease-in-out infinite; animation-delay: var(--d, 0s); } .rv-listen { font-size: 13px; font-weight: 700; margin-bottom: 8px; } .rv-script { font-size: 12px; line-height: 1.55; text-align: center; color: rgba(255,255,255,0.58); min-height: 56px; } .rv-script span { opacity: 0; } .rv-script .s1 { animation: sl1 var(--loop) linear infinite; } .rv-script .s2 { animation: sl2 var(--loop) linear infinite; } .rv-script .s3 { animation: sl3 var(--loop) linear infinite; } .rv-foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 0 26px; } .rv-foot .cam { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); display: grid; place-items: center; font-size: 15px; } .rv-foot .stop { padding: 11px 22px; border-radius: 100px; background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 700; } .rev { background: var(--bg-alt); color: var(--text); animation: revFade var(--loop) linear infinite; } .rev .statusbar { color: var(--text); } .rev-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; overflow: hidden; } .tot-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; opacity: 0; animation: totCard var(--loop) linear infinite; } .tot-card .eb { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .tot-card .amt { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1; } .tot-card .meta { font-size: 10.5px; color: var(--muted); margin-top: 7px; } .li-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 13px 15px; } .li-card .eb { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); opacity: 0; animation: liHead var(--loop) linear infinite; } .li-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; padding: 8px 0 7px; border-bottom: 1px solid var(--line); opacity: 0; } .li-row:last-child { border-bottom: 0; padding-bottom: 2px; } .li-row b { font-weight: 700; font-variant-numeric: tabular-nums; } .li-row.l1 { animation: li1 var(--loop) linear infinite; } .li-row.l2 { animation: li2 var(--loop) linear infinite; } .li-row.l3 { animation: li3 var(--loop) linear infinite; } .send-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: #fff; border-radius: 16px; padding: 13px; font-size: 13px; font-weight: 700; opacity: 0; animation: sendBtn var(--loop) linear infinite; } .send-btn svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .sent-pill { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(51,199,126,0.14); color: var(--success); border: 1px solid rgba(51,199,126,0.32); border-radius: 16px; padding: 13px; font-size: 13px; font-weight: 700; opacity: 0; animation: sentPill var(--loop) linear infinite; } .sent-pill svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .artcap { margin-top: 30px; font-size: 0.78rem; color: #6E7F9E; text-align: center; max-width: 34ch; } @keyframes recFade { 0%,33%{opacity:1} 40%,94%{opacity:0} 99%,100%{opacity:1} } @keyframes revFade { 0%,35%{opacity:0} 41%,95%{opacity:1} 99%,100%{opacity:0} } @keyframes micPulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(90,166,255,0.45)} 50%{transform:scale(1.05);box-shadow:0 0 0 17px rgba(90,166,255,0)} } @keyframes breathe { 0%,100%{transform:scaleY(0.4);opacity:0.5} 50%{transform:scaleY(1);opacity:1} } @keyframes sl1 { 0%,7%{opacity:0} 13%,32%{opacity:1} 38%,100%{opacity:0} } @keyframes sl2 { 0%,15%{opacity:0} 21%,32%{opacity:1} 38%,100%{opacity:0} } @keyframes sl3 { 0%,23%{opacity:0} 29%,32%{opacity:1} 38%,100%{opacity:0} } @keyframes totCard { 0%,39%{opacity:0;transform:translateY(10px)} 46%,94%{opacity:1;transform:translateY(0)} 99%,100%{opacity:0} } @keyframes liHead { 0%,44%{opacity:0} 49%,94%{opacity:1} 99%,100%{opacity:0} } @keyframes li1 { 0%,50%{opacity:0;transform:translateY(8px)} 55%,94%{opacity:1;transform:translateY(0)} 99%,100%{opacity:0} } @keyframes li2 { 0%,55%{opacity:0;transform:translateY(8px)} 60%,94%{opacity:1;transform:translateY(0)} 99%,100%{opacity:0} } @keyframes li3 { 0%,60%{opacity:0;transform:translateY(8px)} 65%,94%{opacity:1;transform:translateY(0)} 99%,100%{opacity:0} } @keyframes sendBtn { 0%,68%{opacity:0;transform:translateY(8px)} 73%,82%{opacity:1;transform:translateY(0)} 85%,100%{opacity:0} } @keyframes sentPill { 0%,84%{opacity:0;transform:scale(0.8)} 89%{opacity:1;transform:scale(1.06)} 92%,95%{opacity:1;transform:scale(1)} 99%,100%{opacity:0} } /* ============================================================ LANDING SECTIONS */ section { padding: 96px 0; } .band-alt { background: var(--bg-alt); } .sec-head { max-width: 640px; margin-bottom: 48px; } .sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); } .sec-head p { margin: 16px 0 0; color: var(--muted); font-size: 1.05rem; } .rule-label { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 auto 48px; max-width: var(--maxw); padding: 0 28px; } .rule-label::before, .rule-label::after { content: ""; height: 1px; background: var(--line); flex: 1; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; display: grid; gap: 12px; align-content: start; } .step .sn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.72rem; color: var(--primary-hi); } .step .ic { width: 26px; height: 26px; color: var(--primary-hi); } .step h3 { font-size: 1.2rem; } .step p { color: var(--muted); font-size: 0.95rem; } .cust { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: center; } .cust .copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); } .cust .copy p { color: var(--muted); margin-top: 16px; } .xero-chip { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-2); border-radius: 100px; padding: 10px 16px; font-size: 0.9rem; font-weight: 600; } .xero-chip .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--success); display: grid; place-items: center; flex: none; animation: chipPop 5.5s ease-in-out infinite; } .xero-chip .tick svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } @keyframes chipPop { 0%,62%,100% { transform: scale(1); } 68% { transform: scale(1.18); } } .no-motion .xero-chip .tick { animation: none; } .quote-doc { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 12px; padding: 34px 36px 64px; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.7); font-family: Arial, Helvetica, "Liberation Sans", sans-serif; font-size: 11px; line-height: 1.5; overflow: hidden; } .quote-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; } .qd-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; } .qd-logo { width: 58px; height: 58px; border-radius: 4px; background: var(--paper-box); display: grid; place-items: center; flex: none; } .qd-logo span { font-weight: 700; font-size: 18px; color: #60646C; } .qd-biz b { font-size: 15px; font-weight: 700; display: block; margin-bottom: 3px; } .qd-biz div { color: #333; font-size: 9.5px; } .qd-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .qd-meta .ttl { font-size: 19px; font-weight: 700; margin-bottom: 6px; } .qd-meta .r { font-size: 9.5px; color: #333; } .qd-meta .r b { font-weight: 700; color: var(--paper-ink); } .qd-jobtitle { font-size: 12px; font-weight: 700; margin-bottom: 12px; } .qd-table { width: 100%; border-collapse: collapse; border-top: 1px solid #D0D0D0; } .qd-table th { text-align: left; font-size: 9px; font-weight: 700; padding: 6px 0; border-bottom: 1px solid #111; } .qd-table th.r, .qd-table td.r { text-align: right; } .qd-table td { font-size: 9.5px; padding: 6px 0; border-bottom: 1px solid #EAEAEA; } .qd-sum { width: 200px; margin-left: auto; margin-top: 10px; } .qd-sum div { display: flex; justify-content: space-between; font-size: 9.5px; color: #333; padding: 3px 0; } .qd-sum div.tot { color: var(--paper-ink); font-weight: 700; border-top: 1px solid #111; margin-top: 4px; padding-top: 6px; } .qd-terms-h { font-size: 12px; font-weight: 700; margin: 22px 0 6px; } .qd-terms { font-size: 9px; color: #333; line-height: 1.45; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 10px; align-content: start; } .feat .ic-box { width: 38px; height: 38px; border-radius: 11px; background: rgba(46,125,255,0.14); display: grid; place-items: center; } .feat .ic-box svg { width: 20px; height: 20px; color: var(--primary-hi); } .feat h3 { font-size: 1.08rem; } .feat p { color: var(--muted); font-size: 0.92rem; } .feat.wide { grid-column: span 2; background: linear-gradient(140deg, var(--card-2), var(--card)); border-color: var(--line-2); } .feat.wide .mini-chip { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; background: rgba(51,199,126,0.15); color: #7FE3B4; border-radius: 100px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; width: fit-content; } .feat.wide .mini-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .pricing { text-align: center; } .pricing .eyebrow { color: var(--primary-hi); } .pricing h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); } .pricing .lede { max-width: 44ch; margin: 18px auto 0; color: var(--muted); } .price-card { margin: 40px auto 0; max-width: 400px; background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; padding: 34px; } .price-card .amount { font-family: var(--display); font-weight: 700; font-size: 3rem; letter-spacing: -0.03em; line-height: 1; } .price-card .amount .per { font-family: var(--body); font-size: 1rem; color: var(--muted); font-weight: 500; } .price-card .unlim { margin-top: 8px; color: var(--primary-hi); font-weight: 700; font-size: 0.95rem; } .price-card .sep { height: 1px; background: var(--line); margin: 22px 0; } .price-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; text-align: left; } .price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--muted); } .price-card li svg { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 3px; } .price-card .btn { width: 100%; } .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 44px; } .qa { border-top: 1px solid var(--line); padding-top: 18px; } .qa h3 { font-size: 1.02rem; margin-bottom: 6px; } .qa p { color: var(--muted); font-size: 0.93rem; } .qa a { color: var(--primary-hi); } /* ============================================================ FOOTER (shared) */ .site-footer { background: var(--bg-deep); color: var(--muted); padding: 64px 0 40px; border-top: 1px solid var(--line); } .foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } .foot-brand .lockup .wm { color: var(--text); } .foot-brand p { margin-top: 14px; font-size: 0.9rem; max-width: 32ch; } .foot-col h4 { font-family: var(--body); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; font-weight: 600; } .foot-col a { display: block; color: var(--text); text-decoration: none; font-size: 0.9rem; padding: 5px 0; opacity: 0.82; } .foot-col a:hover { opacity: 1; color: var(--primary-hi); } .foot-bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.8rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ============================================================ LEGAL / DOC PAGES */ .doc { max-width: 760px; margin: 0 auto; padding: 56px 26px 110px; } .doc-head { border-bottom: 1px solid var(--line); padding-bottom: 30px; margin-bottom: 14px; } .doc-head .eyebrow { color: var(--primary-hi); } .doc-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 14px; } .doc-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; } .doc-meta strong { color: var(--text); font-weight: 600; } .doc-lede { font-size: 1.05rem; margin-top: 20px; max-width: 64ch; } .toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; margin: 40px 0 12px; } .toc .eyebrow { margin-bottom: 12px; } .toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 30px; font-size: 0.9rem; } .toc li { margin-bottom: 8px; break-inside: avoid; } .toc a { color: var(--text); text-decoration: none; } .toc a:hover { color: var(--primary-hi); } .clause { padding: 38px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; } .clause:last-of-type { border-bottom: none; } .clause .cnum { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .clause h2 { font-size: 1.35rem; margin: 0 0 14px; } .clause h3 { font-size: 1.02rem; margin: 22px 0 8px; } .clause p, .clause li { max-width: 66ch; font-size: 0.97rem; } .clause p { margin: 0 0 14px; } .clause ul, .clause ol { margin: 0 0 14px; padding-left: 1.3em; } .clause li { margin-bottom: 8px; } .clause a { color: var(--primary-hi); } .clause .muted { color: var(--muted); } .data-table-wrap { overflow-x: auto; margin: 4px 0 18px; } table.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } table.data-table th, table.data-table td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; } table.data-table th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; } table.data-table td.muted-cell { color: var(--muted); } table.data-table td.num { font-variant-numeric: tabular-nums; } .callout { border-left: 3px solid var(--primary); background: rgba(46,125,255,0.08); padding: 14px 18px; border-radius: 0 8px 8px 0; font-size: 0.92rem; margin: 4px 0 16px; } .callout p { margin: 0; max-width: none; } .contact-block { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; } .contact-block p { margin: 0 0 4px; max-width: none; } .contact-block a { color: var(--primary-hi); } .doc-foot { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .doc-foot a { color: var(--muted); text-decoration: none; } .doc-foot a:hover { color: var(--primary-hi); } /* ============================================================ BLOG */ .blog-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; } .blog-index { padding: 48px 0 8px; } .blog-index .eyebrow { color: var(--primary-hi); } .blog-index h1 { font-size: clamp(2rem, 5vw, 2.7rem); margin: 0 0 10px; } .blog-index .intro { color: var(--muted); margin: 0 0 34px; } .post-card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin-bottom: 14px; transition: border-color .2s ease, transform .2s ease; } .post-card:hover { border-color: var(--line-2); transform: translateY(-2px); } .post-card .meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .post-card h2 { font-size: 1.3rem; margin: 8px 0 6px; } .post-card p { margin: 0; color: var(--muted); font-size: 0.95rem; } .article { max-width: 720px; margin: 0 auto; padding: 44px 24px 96px; } .article .back { font-size: 0.85rem; color: var(--muted); text-decoration: none; } .article .back:hover { color: var(--primary-hi); } .article .kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-hi); margin-top: 22px; display: block; } .article h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); margin: 12px 0 12px; } .article .byline { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; } .article .byline a { color: var(--primary-hi); } .article .lead { font-size: 1.14rem; color: var(--text); margin: 18px 0 26px; } .prose p { margin: 0 0 18px; } .prose h2 { font-size: 1.35rem; margin: 34px 0 12px; } .prose h3 { font-size: 1.08rem; margin: 26px 0 8px; } .prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; } .prose li { margin-bottom: 8px; } .prose strong { color: var(--text); } .prose a { color: var(--primary-hi); } .article-cta { margin-top: 34px; background: linear-gradient(140deg, var(--card-2), var(--card)); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; } .article-cta .h { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; } .article-cta p { margin: 0; color: var(--muted); font-size: 0.95rem; } .article-cta a.btn { margin-top: 14px; } /* ============================================================ AUTH CARD (reset page) */ .auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; } .auth-wrap { max-width: 400px; width: 100%; } .auth-wrap .lockup { justify-content: center; margin-bottom: 34px; } .auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 34px 28px; } .auth-card h1 { font-size: 1.4rem; margin-bottom: 10px; text-align: center; } .auth-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; text-align: center; } .auth-card label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; } .auth-card input { width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 16px; margin-bottom: 16px; font-family: inherit; background: rgba(255,255,255,0.05); color: var(--text); } .auth-card input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; } .auth-card input#code { text-align: center; letter-spacing: 4px; font-weight: 700; } .auth-card .button { display: block; width: 100%; padding: 15px 24px; background: var(--primary); color: #fff; font-weight: 700; font-size: 16px; border-radius: 12px; border: none; cursor: pointer; font-family: inherit; } .auth-card .button:disabled { opacity: 0.6; cursor: default; } .auth-card .error { color: #F0685F; font-size: 0.88rem; margin: 4px 0 0; text-align: center; } /* ============================================================ GET / APP-LINK PAGE */ .get-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; } .get-wrap { max-width: 440px; width: 100%; text-align: center; } .get-wrap .lockup { justify-content: center; margin-bottom: 30px; } .get-wrap h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); margin: 0 0 12px; } .get-wrap p { color: var(--muted); margin: 0 0 22px; } .get-wrap .notify { max-width: 100%; margin: 0 0 20px; } .get-wrap .notify-msg { text-align: center; } .get-wrap .badges { justify-content: center; margin-top: 4px; } .get-wrap .get-foot { margin-top: 22px; font-size: 0.9rem; } .get-wrap .get-foot a { color: var(--primary-hi); text-decoration: none; } .get-wrap .get-foot a:hover { text-decoration: underline; } /* ============================================================ MOTION / RESPONSIVE */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1 !important; transform: none !important; } .rec, .rv-wave i, .mic-orb, .tot-card, .li-card .eb, .li-row, .send-btn, .sent-pill, .xero-chip .tick { animation: none !important; } .rec { opacity: 0; } .rev { opacity: 1; } .tot-card, .li-card .eb, .li-row, .send-btn { opacity: 1; } } @media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 32px; padding: 24px 0 60px; text-align: center; } .hero .sub, .notify { margin-left: auto; margin-right: auto; } .badges, .proofs li { justify-content: center; } .topnav { display: none; } .phones { min-height: 540px; } .phone.behind { display: none; } .phone.main { transform: none; margin: 0; } .steps, .feat-grid { grid-template-columns: 1fr; } .feat.wide { grid-column: span 1; } .cust { grid-template-columns: 1fr; gap: 34px; } .faq-grid { grid-template-columns: 1fr; } .foot-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { section { padding: 66px 0; } .quote-doc { padding: 26px 24px 56px; } .toc ol { columns: 1; } .foot-top { grid-template-columns: 1fr; } }