/* ========================================================= SortMyDump — redesigned site stylesheet Cream / near-black base · Satoshi type · soft app mesh as the single signature accent (Gradient 1 default, 2 optional). ========================================================= */ @font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-display:swap;} @font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-display:swap;} @font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-display:swap;} @font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Black.woff2") format("woff2");font-weight:900;font-display:swap;} /* ------------------------- Tokens ------------------------- */ :root{ --cream:#f5f2ee; --ink:#0e0c0b; --bg:#fffefc; --surface-tint:#fffefc; --surface-deep:#f7f6f4; /* @kind color */ --text-strong:rgba(0,0,0,0.97); --text-body:rgba(0,0,0,0.92); --text-soft:rgba(0,0,0,0.85); --card:#ffffff; --card-grad:linear-gradient(150deg,#f0e7f8 0%,#f8eaf1 46%,#fbeee2 100%); /* @kind color */ --card-border:rgba(14,12,11,0.08); --card-border-strong:rgba(0,0,0,0.18); /* @kind color */ --hairline:rgba(14,12,11,0.10); --frame-bg-1:#0e0c0b; --frame-bg-2:#0e0c0b; --frame-rim:none; /* @kind shadow */ --hero-shadow:none; /* @kind shadow */ /* Gradient 1 — warm sweep (sampled from app gradient) */ --mesh-1: radial-gradient(125% 135% at 8% 4%, #7a5ca7 0%, rgba(122,92,167,0) 56%), radial-gradient(115% 120% at 97% 4%, #cb4b9c 0%, rgba(203,75,156,0) 52%), radial-gradient(120% 125% at 92% 80%,#fab180 0%, rgba(250,177,128,0) 55%), radial-gradient(140% 130% at 52% 106%,#f7e851 0%, rgba(247,232,81,0) 56%), radial-gradient(120% 120% at 8% 94%, #eab77c 0%, rgba(234,183,124,0) 55%), #f59a8f; /* @kind color */ /* Gradient 2 — blue-lobe sweep (optional accent) */ --mesh-2: radial-gradient(120% 125% at 8% 4%, #8d6ea9 0%, rgba(141,110,169,0) 55%), radial-gradient(110% 115% at 96% 4%, #c055a0 0%, rgba(192,85,160,0) 50%), radial-gradient(115% 120% at 102% 74%,#5ebceb 0%, rgba(94,188,235,0) 48%), radial-gradient(130% 120% at 22% 104%,#fdcd64 0%, rgba(253,205,100,0) 55%), radial-gradient(120% 120% at 56% 102%,#f9e450 0%, rgba(249,228,80,0) 50%), #f79d8d; /* @kind color */ --mesh:var(--mesh-1); /* warm "My" text-clips */ --my-warm:linear-gradient(100deg, #ad7ce0 0%, #ff7ab8 30%, #ffac7c 62%, #ffd24f 100%); /* @kind color */ --my:var(--my-warm); /* @kind color */ /* app chrome-rim gradient — 11-stop loop (yellow→peach→sky→indigo→violet→pink→peach→yellow) */ --rim-static:linear-gradient(100deg, #FFDB5C, #FFC285, #75BDFF, #75BDFF, #6B57F5, #A85CFF, #FF5CC2, #FF5CC2, #FFC285, #FFC285, #FFDB5C); /* @kind color */ /* the yellow stop from --my-warm, deepened here so it still reads on the light bg */ --accent-yellow:#b07d12; /* @kind color */ --radius-card:24px; --radius-button:16px; --radius-chip:999px; --maxw:1240px; --nav-h:70px; --gutter:clamp(20px,5vw,48px); --shadow-soft:0 1px 2px rgba(14,12,11,0.04), 0 10px 30px rgba(14,12,11,0.07); --shadow-float:0 18px 50px rgba(14,12,11,0.13); --ease:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */ } /* Dark mode: a [data-theme] attribute on selects the palette. An inline script sets it on load from the saved choice or the system preference, so dark tokens live under one clean theme scope. */ html[data-theme="dark"]{ --bg:#080706; --surface-tint:#151312; --surface-deep:#100e0c; /* @kind color */ --text-strong:rgba(255,255,255,0.97); --text-body:rgba(255,255,255,0.92); --text-soft:rgba(255,255,255,0.85); --card:#1a1715; --card-grad:linear-gradient(150deg,#211c26 0%,#1d1a1e 55%,#201a16 100%); /* @kind color */ --accent-yellow:#ffd24f; /* @kind color */ --card-border:rgba(255,255,255,0.10); --card-border-strong:rgba(255,255,255,0.20); /* @kind color */ --hairline:rgba(255,255,255,0.09); --frame-bg-1:#f5f1ec; --frame-bg-2:#f5f1ec; --frame-rim:none; /* @kind shadow */ --hero-shadow:none; /* @kind shadow */ --shadow-soft:0 1px 2px rgba(0,0,0,0.30), 0 10px 30px rgba(0,0,0,0.34); --shadow-float:0 18px 50px rgba(0,0,0,0.50); } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ------------------------- Reset -------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} } body{ font-family:"Satoshi",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; background:var(--bg);color:var(--text-body); font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{color:var(--text-strong);line-height:1.12;letter-spacing:-0.022em;font-weight:900;text-wrap:balance;} h2{font-weight:900;} h3,h4{font-weight:700;letter-spacing:-0.015em;} /* ----------------------- Utilities ------------------------ */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);} .eyebrow{font-size:clamp(0.85rem,0.78rem + 0.4vw,1rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);} .mesh-text{background:var(--my);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} /* ------------------------ Logo ---------------------------- */ .smd{display:inline-flex;align-items:center;min-width:0;} .smd-img{height:30px;width:auto;max-width:100%;display:block;} .nav .smd{flex:0 1 auto;max-width:min(220px,52%);} .nav .smd-img{height:clamp(20px,4.8vw,30px);} /* ----------------------- Buttons -------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:inherit;font-size:1rem;font-weight:700; padding:.95rem 1.7rem;border-radius:var(--radius-chip);border:none;cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s var(--ease); position:relative;white-space:nowrap; } .btn:active{transform:scale(.97);} .btn svg{flex:none;} .btn i{font-size:1.15em;flex:none;line-height:0;} .scr-gear i{font-size:18px;} .ba-list li i{font-size:18px;flex:none;margin-top:1px;} .ba-card.before .ba-list li i{opacity:.45;} /* Primary CTA — pill with a rotating chrome-gradient ring (conic pseudo masked by an inner fill) + soft glow */ .btn-primary{ color:var(--text-strong); position:relative; z-index:0; overflow:hidden; background:transparent; border:none; border-radius:var(--radius-chip); box-shadow:0 4px 16px rgba(14,12,11,.10), 0 0 12px rgba(168,120,230,.14); transition:transform .18s var(--ease),box-shadow .3s var(--ease); } .btn-primary::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:240%;aspect-ratio:1;transform:translate(-50%,-50%); background:conic-gradient(#FFDB5C, #FFC285, #75BDFF, #75BDFF, #6B57F5, #A85CFF, #FF5CC2, #FF5CC2, #FFC285, #FFC285, #FFDB5C); animation:spin 7s linear infinite;} .btn-primary::after{content:"";position:absolute;z-index:-1;inset:2.5px;border-radius:inherit;background:var(--surface-tint);} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(14,12,11,.14), 0 0 28px rgba(168,120,230,.45), 0 0 12px rgba(255,92,194,.30);} .btn-primary:active{transform:translateY(0) scale(.99);} @media (prefers-reduced-motion:reduce){.btn-primary::before{animation:none;}} .btn-soon{cursor:default;} .btn-soon .btn-copy{padding-bottom:2px;} .btn-soon .soon-tag{ font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--text-soft);padding-left:.55rem;margin-left:.3rem;border-left:1px solid var(--hairline); } .btn-ghost{color:var(--text-body);background:transparent;font-weight:600;padding-inline:.6rem;} .btn-ghost:hover{color:var(--text-strong);} /* ------------------------- Nav ---------------------------- */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);background:color-mix(in srgb,var(--surface-tint) 82%,transparent);border-bottom:1px solid var(--hairline);} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;} .nav-links{display:flex;align-items:center;gap:1.6rem;} .nav-links a:not(.btn){font-size:.95rem;font-weight:500;color:var(--text-body);transition:color .18s var(--ease);} .nav-links a:not(.btn):hover{color:var(--text-strong);} .nav-links a[aria-current="page"]{color:var(--text-strong);font-weight:700;} .nav-links .btn{padding:.6rem 1.15rem;font-size:.9rem;} /* 820, not 768: four text links + the CTA leave no room beside the logo below ~790px */ @media (max-width:820px){.nav-links a:not(.btn){display:none;}} /* ------------------------- Hero --------------------------- */ .hero{position:relative;background:var(--surface-tint);margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + clamp(40px,7vw,88px)) 0 clamp(48px,7vw,88px);overflow:hidden;} .hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:680px;z-index:0; background:var(--mesh);filter:blur(90px) saturate(120%);opacity:.34; -webkit-mask-image:radial-gradient(60% 70% at 60% 30%,#000 0%,transparent 75%); mask-image:radial-gradient(60% 70% at 60% 30%,#000 0%,transparent 75%);pointer-events:none;} .hero .wrap{position:relative;z-index:1;} .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,6vw,72px);align-items:center;} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center;}} .hero h1{font-size:clamp(2.6rem,5.6vw,4.05rem);margin-bottom:1.3rem;text-wrap:balance;} .hero h1 .mesh-text{font-weight:900;} .hero .lede{font-size:clamp(1.06rem,2.1vw,1.24rem);color:var(--text-body);max-width:46ch;margin-bottom:1rem;} @media (max-width:900px){.hero .lede{margin-inline:auto;}} .hero .wink{color:var(--text-soft);font-size:clamp(1.06rem,2.1vw,1.24rem);margin:1.4rem 0 2rem;} .hero-actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;} @media (max-width:900px){.hero-actions{justify-content:center;}.hero-media{order:-1;}} /* ------- Phone mockup (recreates the app home screen) ------- */ .phone{width:min(340px,80vw);margin-inline:auto;border-radius:46px;padding:11px;background:#000;box-shadow:0 30px 70px rgba(14,12,11,.30),0 0 0 1px rgba(14,12,11,.06);position:relative;} .phone-screen{width:100%;height:100%;border-radius:36px;background:#0b0a09;overflow:hidden;position:relative;display:flex;flex-direction:column;color:#f3efe9;padding:46px 22px 22px;} .phone-screen:has(.phone-shot){padding:0;height:auto;} .phone-shot{width:100%;height:auto;object-fit:contain;object-position:top center;display:block;} /* hold the screen ratio before video metadata arrives, so the poster never jumps */ video.phone-shot{aspect-ratio:1206/2622;background:#0b0a09;} .scr-top{display:flex;justify-content:flex-end;margin-bottom:auto;} .scr-gear{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:rgba(255,255,255,.7);} .scr-title{font-weight:900;font-size:2rem;letter-spacing:-.02em;text-align:center;margin-bottom:.5rem;color:#f3efe9;} .scr-logo{display:flex;justify-content:center;margin-bottom:.9rem;} .scr-logo img{width:150px;height:auto;display:block;} .scr-title .my{background:var(--my);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .scr-sub{font-size:.82rem;line-height:1.45;color:rgba(243,239,233,.8);text-align:center;max-width:24ch;margin:0 auto 1.5rem;} .scr-steps{display:grid;gap:.9rem;margin-bottom:auto;} .scr-step{display:flex;align-items:center;gap:.8rem;} .scr-step .n{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#f3efe9;} .scr-step span{font-size:.92rem;font-weight:500;color:#f3efe9;} .scr-cta{margin-top:1.4rem;position:relative;z-index:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem; padding:.95rem;border-radius:var(--radius-chip);font-weight:700;font-size:.98rem;color:#f3efe9;} .scr-cta::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:260%;aspect-ratio:1;transform:translate(-50%,-50%); background:conic-gradient(#FFDB5C, #FFC285, #75BDFF, #75BDFF, #6B57F5, #A85CFF, #FF5CC2, #FF5CC2, #FFC285, #FFC285, #FFDB5C);animation:spin 7s linear infinite;} .scr-cta::after{content:"";position:absolute;z-index:-1;inset:2px;border-radius:inherit;background:#0b0a09;} /* --------------------- Section frame ---------------------- */ .section{padding:clamp(52px,8vw,104px) 0;} .section-head{max-width:62ch;margin-bottom:clamp(34px,5vw,60px);} .section-head.center{margin-inline:auto;text-align:center;} .section-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.75rem;} .section-head p{font-size:1.06rem;color:var(--text-body);} .section.tint{background:var(--surface-tint);} .section.deep{background:var(--surface-deep);} .section.divide{border-top:1px solid var(--hairline);} /* ------------------------- Steps -------------------------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,22px);} @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.steps{grid-template-columns:1fr;}} .step{background:var(--card-grad);border:none;border-radius:var(--radius-card);padding:1.7rem;box-shadow:var(--shadow-soft);} .step .num{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:.95rem;color:var(--text-strong);margin-bottom:1.1rem;} .step .num::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:var(--rim-static);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;} .step h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-strong);} .step p{font-size:.95rem;color:var(--text-body);} /* ----------------------- Features ------------------------- */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,22px);} @media (max-width:900px){.features{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.features{grid-template-columns:1fr;}} .feature{padding:1.7rem;border-radius:var(--radius-card);border:1px solid var(--card-border);background:var(--card-grad);box-shadow:var(--shadow-soft);} .feature .ico{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:13px;color:var(--text-strong);font-size:24px;margin-bottom:1.1rem;} .feature .ico::before{content:"";position:absolute;inset:0;border-radius:13px;padding:1.5px;background:var(--rim-static);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;} .feature h3{font-size:1.06rem;margin-bottom:.45rem;color:var(--text-strong);} .feature p{font-size:.95rem;} /* --------------------- Audience band ---------------------- */ .audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;text-align:left;} .audience-head h2{font-size:clamp(1.9rem,4vw,2.7rem);} .audience-body p{font-size:1.08rem;margin-bottom:1rem;} .audience-body p:last-child{margin-bottom:0;} @media (max-width:860px){.audience-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,28px);}} /* --------------------- App screenshots -------------------- */ .shots{position:relative;overflow:hidden;} .shots::before{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:min(900px,92%);height:560px;z-index:0; background:var(--mesh);filter:blur(110px) saturate(120%);opacity:.26;pointer-events:none; -webkit-mask-image:radial-gradient(58% 60% at 50% 45%,#000 0%,transparent 76%);mask-image:radial-gradient(58% 60% at 50% 45%,#000 0%,transparent 76%);} .shots .wrap{position:relative;z-index:1;} .shots-carousel{position:relative;max-width:1000px;margin-inline:auto;} .shot-arrow{display:none;} .shots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.5vw,44px);max-width:1000px;margin-inline:auto;align-items:start;} .shot{margin:0;} .shot-raise{transform:translateY(-24px);} .shot-frame{position:relative;border-radius:clamp(30px,4vw,40px);padding:8px;background:#000; box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px rgba(14,12,11,.28),0 0 0 1px rgba(14,12,11,.06);} .shot-frame img{width:100%;height:auto;aspect-ratio:1206/2622;object-fit:contain;object-position:top center;border-radius:clamp(23px,3.2vw,32px);display:block;} .shot-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:30%;height:18px;border-radius:999px;background:#000;z-index:2;} .shot-cap{text-align:center;margin-top:1.1rem;font-size:.98rem;font-weight:600;color:var(--text-body);} @media (max-width:860px){ .shots-grid{gap:clamp(14px,2.4vw,22px);} .shot-raise{transform:none;} .shot-cap{font-size:.88rem;} } @media (max-width:560px){ /* horizontal scroll-snap carousel — three tall phones won't stack readably */ .shots-grid{display:flex;grid-template-columns:none;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:calc(-1*var(--gutter));padding:6px var(--gutter) 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .shots-grid::-webkit-scrollbar{display:none;} .shot{flex:0 0 min(320px,82%);scroll-snap-align:center;} .shot-frame{padding:11px;border-radius:46px;} .shot-frame img{border-radius:36px;} .shot-notch{top:16px;width:96px;height:26px;} .shot-cap{font-size:.92rem;} .shot-arrow{ display:flex;align-items:center;justify-content:center; position:absolute;top:28%;z-index:3; width:42px;height:42px;padding:0;border-radius:999px; border:1px solid var(--card-border-strong); background:color-mix(in srgb,var(--surface-deep) 86%,transparent); color:var(--text-strong);cursor:pointer; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-soft); } .shot-arrow i{font-size:22px;line-height:0;} .shot-arrow-prev{left:2px;} .shot-arrow-next{right:2px;} .shot-arrow:disabled{opacity:.28;cursor:default;} .shot-arrow:not(:disabled):active{transform:scale(.96);} } /* --------------------- Before / After --------------------- */ .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,26px);} @media (max-width:720px){.ba-grid{grid-template-columns:1fr;}} .ba-card{border-radius:var(--radius-card);padding:2.1rem;border:none;box-shadow:var(--shadow-soft);background:var(--card-grad);} .ba-card.after{position:relative;z-index:0;overflow:hidden;background:transparent;border:none;} .ba-card.after::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:200%;aspect-ratio:1;transform:translate(-50%,-50%); background:conic-gradient(#FFDB5C, #FFC285, #75BDFF, #75BDFF, #6B57F5, #A85CFF, #FF5CC2, #FF5CC2, #FFC285, #FFC285, #FFDB5C); animation:spin 7s linear infinite;} .ba-card.after::after{content:"";position:absolute;z-index:-1;inset:1.6px;border-radius:inherit;background:var(--card-grad);} .ba-card h3{font-size:1.5rem;margin-bottom:1.4rem;} .ba-card.before{background:var(--surface-deep);border:1px solid var(--card-border);} .ba-list{list-style:none;display:grid;gap:.9rem;} .ba-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;color:var(--text-body);} .ba-list li svg{flex:none;margin-top:3px;} /* ------------------------- FAQ ---------------------------- */ .faq-list{display:grid;gap:.75rem;max-width:820px;margin-inline:auto;} .faq{border:1px solid var(--card-border-strong);border-radius:var(--radius-button);background:var(--card);overflow:hidden;} .faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.45rem;font-weight:700;color:var(--text-strong);font-size:1.02rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;} .faq summary::-webkit-details-marker{display:none;} .faq summary .chev{flex:none;transition:transform .22s var(--ease);color:var(--text-soft);font-size:19px;line-height:0;} .faq[open] summary .chev{transform:rotate(45deg);} .faq .faq-body{padding:0 1.45rem 1.3rem;font-size:.98rem;color:var(--text-body);} /* --------------------- Final CTA -------------------------- */ .closing{position:relative;overflow:hidden;} .closing::before{content:"";position:absolute;inset:0;z-index:0;background:var(--mesh-2);filter:blur(95px) saturate(118%);opacity:.32;pointer-events:none;} .final-cta{text-align:center;position:relative;z-index:1;} .final-cta .panel{border-radius:var(--radius-card);padding:clamp(44px,7vw,76px) clamp(24px,5vw,56px);position:relative;overflow:hidden; background:var(--ink);color:#f3efe9;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,var(--shadow-float);border:1.5px solid rgba(255,255,255,.52);} .final-cta .panel::before{content:"";position:absolute;inset:0;background:var(--mesh-2);opacity:.22;z-index:1;} .final-cta .panel>*{position:relative;z-index:2;} .final-cta .btn-primary{color:#f3efe9;} .final-cta .btn-primary::after{background:var(--ink);} .final-cta .btn-primary .soon-tag{color:rgba(243,239,233,.72);border-left-color:rgba(243,239,233,.28);} .final-cta h2{font-size:clamp(2.1rem,4.5vw,3.1rem);margin-bottom:1rem;color:#fff;} .final-cta p{font-size:1.1rem;max-width:50ch;margin:0 auto 2rem;color:rgba(243,239,233,.88);} .final-cta .support{margin-top:1.3rem;font-size:.95rem;color:rgba(243,239,233,.72);} /* ------------------------- Footer ------------------------- */ .footer{position:relative;z-index:1;padding:clamp(44px,6vw,68px) 0 2.5rem;} .footer-top{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;margin-bottom:2.5rem;} @media (max-width:720px){.footer-top{grid-template-columns:1fr;}} .footer .smd{margin-bottom:.95rem;} .footer-desc{font-size:.96rem;color:var(--text-body);max-width:38ch;} .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;align-content:start;} .footer-col{display:flex;flex-direction:column;gap:.7rem;} .footer-col-h{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.15rem;} .footer-links a{font-size:.95rem;color:var(--text-body);transition:color .18s var(--ease),transform .18s var(--ease);width:fit-content;} .footer-links a:hover{color:var(--text-strong);transform:translateX(2px);} .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.75rem;border-top:1px solid var(--hairline);font-size:.85rem;color:var(--text-soft);} .footer-bottom a{color:var(--text-body);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--hairline);transition:color .18s var(--ease),text-decoration-color .18s var(--ease);} .footer-bottom a:hover{color:var(--text-strong);text-decoration-color:currentColor;} /* reveal-on-scroll */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}} /* ========================================================= RESPONSIVE REFINEMENTS — tablet & mobile Breakpoint ladder: ≤1024 tablet · ≤768 large phone · ≤560 phone ========================================================= */ /* --- Tablet (≤1024): tighten before/after + footer rhythm --- */ @media (max-width:1024px){ .nav-links{gap:1.15rem;} .ba-grid{gap:18px;} } /* --- Large phone / small tablet (≤768) --- */ @media (max-width:768px){ .nav .wrap{height:64px;gap:.75rem;} .nav .smd-img{height:24px;} .nav-links .btn{padding:.58rem .95rem;font-size:.78rem;} /* before/after stacks (was 720) so iPad portrait keeps two-up a touch longer */ .ba-grid{grid-template-columns:1fr;} html{--nav-h:64px;} .footer-top{grid-template-columns:1fr;} } /* --- Phone (≤560): single column, full-width actions --- */ @media (max-width:560px){ :root{--gutter:20px;} .nav .smd-img{height:20px;} .nav-links .btn{padding:.52rem .82rem;font-size:.72rem;} .nav-links .btn .soon-tag{font-size:.55rem;letter-spacing:.08em;padding-left:.4rem;margin-left:.2rem;} .section{padding:clamp(44px,12vw,64px) 0;} /* CTAs go full-width and tall enough to tap */ .hero-actions{flex-direction:column;align-items:stretch;width:100%;} .hero-actions .btn{width:100%;padding-block:1.05rem;font-size:1.02rem;} .hero-actions .btn-ghost{padding-block:.75rem;} /* hero copy + media spacing */ .hero{padding-top:calc(var(--nav-h) + clamp(24px,7vw,40px));} .hero-media{margin-bottom:.5rem;} .phone{width:min(320px,85vw);} /* section heads breathe less on small screens */ .section-head{margin-bottom:clamp(26px,8vw,40px);} /* final CTA button full-width inside panel */ .final-cta .panel .btn{width:100%;padding-block:1.05rem;} /* footer meta stacks left-aligned */ .footer-bottom{flex-direction:column;align-items:flex-start;gap:.5rem;} } /* ---------------- Centered message pages (404 · thank you) ---------------- */ .not-found{padding:clamp(64px,10vw,128px) 0 clamp(36px,5vw,64px);text-align:center;} .not-found .wrap{max-width:640px;} .not-found .eyebrow{margin-bottom:1rem;} .not-found h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1rem;} .not-found p{color:var(--text-body);font-size:1.08rem;max-width:42ch;margin:0 auto 1.6rem;} .not-found .btn{margin-top:.4rem;} /* ------------------------- Legal pages -------------------------- */ .legal{padding:clamp(44px,6vw,84px) 0 clamp(36px,5vw,64px);} .legal .wrap{max-width:768px;} .legal h1{font-size:clamp(2.2rem,5vw,3rem);font-weight:900;letter-spacing:-.022em;line-height:1.04;color:var(--text-strong);} .legal .updated{margin-top:.65rem;color:var(--text-soft);font-size:.95rem;} .legal h2{font-size:1.42rem;font-weight:800;letter-spacing:-.01em;color:var(--text-strong);margin:2.5rem 0 .55rem;} .legal h3{font-size:1.08rem;font-weight:700;color:var(--text-strong);margin:1.5rem 0 .35rem;} .legal p{color:var(--text-body);margin-top:.7rem;line-height:1.72;} .legal ul{margin:.7rem 0 0;padding-left:1.25rem;color:var(--text-body);line-height:1.72;} .legal li{margin-top:.4rem;} .legal em{font-style:italic;} .legal a{color:var(--text-strong);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--hairline);transition:text-decoration-color .18s var(--ease);} .legal a:hover{text-decoration-color:currentColor;} .legal .callout{margin-top:1.7rem;padding:1.15rem 1.35rem;background:var(--surface-deep);border:1px solid var(--card-border);border-radius:14px;color:var(--text-body);line-height:1.62;font-size:.97rem;} .legal .callout strong{color:var(--text-strong);} /* ------------------------- Support page -------------------------- */ /* .support-page, not .support — .support is already the final-cta tagline */ .support-page{position:relative;overflow:hidden;padding:clamp(44px,6vw,84px) 0 clamp(48px,7vw,88px);} .support-page::before{content:"";position:absolute;inset:-32% -10% auto -10%;height:600px;z-index:0; background:var(--mesh);filter:blur(100px) saturate(120%);opacity:.26; -webkit-mask-image:radial-gradient(58% 64% at 50% 24%,#000 0%,transparent 76%); mask-image:radial-gradient(58% 64% at 50% 24%,#000 0%,transparent 76%);pointer-events:none;} /* .wrap keeps the default --maxw so the page lines up with the closing CTA panel */ .support-page .wrap{position:relative;z-index:1;} .support-page .eyebrow{margin-bottom:.9rem;} .support-page h1{font-size:clamp(2.2rem,5vw,3rem);line-height:1.04;} .support-lede{margin-top:.9rem;font-size:clamp(1.02rem,1.6vw,1.14rem);color:var(--text-body);line-height:1.6;max-width:52ch;} /* aside is capped so the form takes the extra width rather than the cards */ .support-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,26vw,380px));gap:clamp(18px,2.6vw,32px);margin-top:clamp(30px,4.5vw,46px);align-items:start;} @media (max-width:860px){.support-grid{grid-template-columns:1fr;}} /* aside cards reuse the card ladder from the rest of the site */ .support-aside{display:grid;gap:clamp(14px,2vw,18px);} .support-card{padding:1.4rem 1.5rem;border-radius:var(--radius-card);border:1px solid var(--card-border);background:var(--surface-deep);box-shadow:var(--shadow-soft);} .support-card h2{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--text-strong);} .support-card p{margin-top:.5rem;font-size:.94rem;line-height:1.62;color:var(--text-body);} .support-card a{color:var(--text-strong);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--hairline);transition:text-decoration-color .18s var(--ease);} .support-card a:hover{text-decoration-color:currentColor;} .support-links{list-style:none;display:grid;gap:.55rem;margin-top:.75rem;} .support-links a{font-size:.94rem;color:var(--text-body);text-decoration:none;display:inline-block;transition:color .18s var(--ease),transform .18s var(--ease);} .support-links a:hover{color:var(--text-strong);transform:translateX(2px);} /* --------------------------- Forms ------------------------------ */ .form{display:flex;flex-direction:column;gap:1.15rem;padding:clamp(22px,3.2vw,32px);border-radius:var(--radius-card);border:1px solid var(--card-border);background:var(--surface-tint);box-shadow:var(--shadow-soft);} .form-hp{display:none!important;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;} @media (max-width:560px){.form-row{grid-template-columns:1fr;}} .field{display:flex;flex-direction:column;gap:.45rem;} .field label{font-size:.9rem;font-weight:600;color:var(--text-strong);letter-spacing:-.005em;} .field-opt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-left:.35rem;} .field-req{color:var(--accent-yellow);font-weight:700;} .field-hint{font-size:.83rem;color:var(--text-soft);opacity:.72;line-height:1.5;} .field input,.field textarea,.field select{ font-family:inherit;font-size:1rem;font-weight:500;color:var(--text-strong); width:100%;padding:.85rem 1rem;border-radius:14px; background:var(--surface-deep);border:1px solid var(--card-border-strong); transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); } .field textarea{min-height:150px;resize:vertical;line-height:1.6;} .field input::placeholder,.field textarea::placeholder{color:var(--text-soft);opacity:.42;} .field input:hover,.field textarea:hover,.field select:hover{border-color:var(--text-soft);} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:transparent; box-shadow:0 0 0 1.5px rgba(168,120,230,.85),0 0 0 5px rgba(168,120,230,.16); } .field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{border-color:rgba(255,110,110,.75);} /* dark-mode autofill: Chrome forces its own light fill unless overridden */ .field input:-webkit-autofill{-webkit-text-fill-color:var(--text-strong);-webkit-box-shadow:0 0 0 100px var(--surface-deep) inset;caret-color:var(--text-strong);} /* select: native arrow swapped for a token-coloured chevron */ .select{position:relative;display:block;} .select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;} /* :invalid only matches while the empty placeholder option is selected, so this fades the control to match the text inputs' placeholders. color-mix rather than opacity, which would fade the border too. */ .select select:invalid{color:color-mix(in srgb,var(--text-soft) 48%,transparent);} .select select option{color:var(--text-strong);} .select::after{content:"";position:absolute;right:1.15rem;top:50%;width:7px;height:7px;margin-top:-5px; border-right:2px solid var(--text-soft);border-bottom:2px solid var(--text-soft); transform:rotate(45deg);pointer-events:none;} .form-actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.45rem;} .form-note{font-size:.88rem;color:var(--text-soft);opacity:.8;line-height:1.5;} @media (max-width:560px){ .form-actions{flex-direction:column;align-items:stretch;gap:.9rem;} .form-actions .btn{width:100%;padding-block:1.05rem;} .form-note{text-align:center;} } /* --- Very small (≤380): rein in the largest display type --- */ @media (max-width:380px){ .hero h1{font-size:clamp(2.25rem,9vw,2.6rem);} }