/* ============================================================ SENARRA โ€” Shared design system (v6) "Where memory keeps its voice." Fonts (DM Serif Display + DM Sans) are loaded via in each page's , so no @import here. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ --navy:#0d1829; --gold:#c9a96e; --purple:#7c3aed; --pink:#e05a8a; --peach:#f4ede6; --lavender:#f0ecf8; --text:#1a1230; --muted:#7a6f85; --border:#e8e2f0; --white:#ffffff; --grad:linear-gradient(135deg,#f4ede6 0%,#f0ecf8 50%,#e8e2f8 100%); } html{scroll-behavior:smooth;} body{font-family:'DM Sans',sans-serif;font-weight:400;color:var(--text);background:var(--white);overflow-x:hidden;} /* NAV */ nav{ position:sticky;top:0;z-index:100; background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.08); padding:0 48px;height:68px; display:flex;align-items:center;justify-content:space-between; } .logo{ font-family:'DM Serif Display',serif; font-size:22px;color:white;text-decoration:none; display:flex;align-items:center;gap:12px;font-weight:400; } .logo-img{width:52px;height:52px;border-radius:50%;object-fit:cover;} .nav-links{display:flex;align-items:center;gap:28px;} .nav-links a{font-size:14px;color:rgba(255,255,255,0.65);text-decoration:none;font-weight:400;transition:color 0.2s;white-space:nowrap;} .nav-links a:hover{color:white;} .nav-cta{ background:linear-gradient(135deg,var(--purple),var(--pink)); color:white!important;padding:10px 22px;border-radius:100px; font-size:14px;font-weight:500;text-decoration:none; display:flex;align-items:center;gap:6px; } .nav-cta-ghost{ color:rgba(255,255,255,0.85)!important; border:1px solid rgba(255,255,255,0.28); padding:10px 22px;border-radius:100px; font-size:14px;font-weight:500;text-decoration:none; display:flex;align-items:center;gap:6px; transition:border-color 0.2s,background 0.2s; white-space:nowrap; } .nav-cta-ghost:hover{border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.06);} .nav-login{ color:rgba(255,255,255,0.9)!important; border:1px solid rgba(255,255,255,0.28); padding:9px 20px;border-radius:100px; font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap; transition:border-color 0.2s,background 0.2s; } .nav-login:hover{border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.06);} /* GOLD LINE */ .gold-line{height:3px;background:linear-gradient(90deg,var(--purple),var(--gold),var(--pink));} /* HERO */ .hero{ background:var(--grad); padding:44px 48px 0;min-height:auto; display:grid;grid-template-columns:1fr 1fr; gap:48px;align-items:end;overflow:hidden; } .hero-left{padding-bottom:56px;} .hero-badge{ display:inline-flex;align-items:center;gap:8px; background:white;border:1px solid var(--border); border-radius:100px;padding:6px 16px 6px 8px; font-size:12px;font-weight:500;color:var(--purple);margin-bottom:28px; text-decoration:none;transition:border-color 0.2s,box-shadow 0.2s; } a.hero-badge:hover{border-color:var(--purple);box-shadow:0 4px 16px rgba(124,58,237,0.12);} .hero-badge-dot{ width:20px;height:20px;border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); display:flex;align-items:center;justify-content:center;font-size:10px;color:white; } h1{ font-family:'DM Serif Display',serif; font-size:clamp(52px,6vw,80px);line-height:1.05; color:var(--navy);margin-bottom:24px;letter-spacing:-0.02em; } h1 em{font-style:italic;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .hero-sub{font-size:17px;color:var(--muted);line-height:1.7;font-weight:300;margin-bottom:40px;max-width:480px;} .hero-actions{display:flex;gap:12px;align-items:center;margin-bottom:24px;flex-wrap:wrap;} .btn-primary{background:linear-gradient(135deg,var(--purple),var(--pink));color:white;padding:16px 32px;border-radius:100px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;} .btn-ghost{background:white;color:var(--navy);border:1px solid var(--border);padding:16px 28px;border-radius:100px;font-size:15px;font-weight:400;text-decoration:none;display:inline-block;} .btn-gold{background:var(--gold);color:var(--navy);padding:14px 24px;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;display:inline-block;} .hero-proof{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .stars{color:#f59e0b;letter-spacing:2px;} /* HERO PHONE STACK */ .hero-right{position:relative;display:flex;justify-content:center;align-items:flex-end;} .phone-stack{position:relative;width:320px;height:560px;max-width:100%;} .phone{position:absolute;border-radius:40px;overflow:hidden;box-shadow:0 32px 64px rgba(13,24,41,0.25);border:3px solid #0d1829;background:#0d1829;} .phone::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:62px;height:9px;background:#0d1829;border-radius:0 0 10px 10px;z-index:6;} .phone-main{bottom:0;left:50%;transform:translateX(-50%);width:240px;z-index:3;} .phone-back-left{bottom:50px;left:0;z-index:1;opacity:0.55;transform:rotate(-8deg);width:190px;} .phone-back-right{bottom:50px;right:0;z-index:2;opacity:0.7;transform:rotate(6deg);width:190px;} .phone img{width:100%;display:block;border-radius:36px;} /* FLOAT CARD */ .float-card{ position:absolute;background:white;border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.14); border:1px solid var(--border);padding:14px 18px; z-index:10;min-width:190px; } .float-card-bottom{bottom:16px;left:-44px;} .fc-label{font-size:10px;font-weight:500;color:var(--purple);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:4px;} .fc-name{font-family:'DM Serif Display',serif;font-size:18px;color:var(--navy);margin-bottom:2px;} .fc-dates{font-size:11px;color:var(--muted);margin-bottom:10px;} .fc-wave{display:flex;align-items:center;gap:2px;height:24px;} .fc-bar{width:3px;border-radius:2px;background:linear-gradient(to top,var(--purple),var(--pink));opacity:0.6;} /* SCREENSHOT SLIDER - phones */ .slider-section{background:var(--navy);padding:72px 48px 56px;overflow:hidden;} .slider-label{text-align:center;font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;} .slider-title{font-family:'DM Serif Display',serif;font-size:clamp(28px,3vw,40px);color:white;text-align:center;margin-bottom:8px;} .slider-title em{font-style:italic;color:var(--gold);} .slider-sub{font-size:15px;color:rgba(255,255,255,0.4);text-align:center;margin-bottom:24px;font-weight:300;} .theme-toggle-wrap{display:flex;justify-content:center;margin-bottom:36px;} .theme-toggle{ position:relative;display:flex;align-items:center;gap:0; background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14); border-radius:100px;padding:6px 6px;cursor:pointer; font-size:13px;font-weight:500;color:rgba(255,255,255,0.55); transition:border-color 0.2s; } .theme-toggle:hover{border-color:rgba(255,255,255,0.28);} .theme-toggle .tt-icon{font-size:14px;line-height:1;padding:0 6px;} .theme-toggle .tt-label{padding:4px 10px 4px 2px;line-height:1;white-space:nowrap;} .theme-toggle .tt-divider{width:1px;height:16px;background:rgba(255,255,255,0.15);margin:0 2px;} .theme-toggle .tt-pill{ position:absolute;left:4px;top:4px; width:calc(50% - 4px);height:calc(100% - 8px); border-radius:100px;background:rgba(255,255,255,0.12); transition:transform 0.25s cubic-bezier(0.4,0,0.2,1); pointer-events:none; } .theme-toggle.light-active .tt-pill{transform:translateX(calc(100% + 8px));} .theme-toggle.light-active{color:rgba(255,255,255,0.55);} .theme-toggle .tt-label:first-of-type,.theme-toggle .tt-icon:first-of-type{color:rgba(255,255,255,0.9);} .theme-toggle.light-active .tt-icon:first-of-type, .theme-toggle.light-active .tt-label:first-of-type{color:rgba(255,255,255,0.45);} .theme-toggle.light-active .tt-icon:last-of-type, .theme-toggle.light-active .tt-label:last-of-type{color:rgba(255,255,255,0.9);} /* One slide visible at a time: viewport caps the width, each slide fills 100% of it */ .slider-viewport{overflow:hidden;max-width:360px;width:100%;margin:0 auto;} .slider-track{ display:flex; transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); } /* Phone frame wrapper for slider */ .slide-phone-wrap{flex:0 0 100%;min-width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;} .slide-phone-frame{ width:230px;max-width:62vw; background:var(--navy); border-radius:36px; border:2px solid rgba(255,255,255,0.12); overflow:hidden; box-shadow:0 24px 56px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04); position:relative; } /* phone notch */ .slide-phone-frame::before{ content:''; position:absolute;top:0;left:50%;transform:translateX(-50%); width:80px;height:10px; background:rgba(0,0,0,0.8); border-radius:0 0 12px 12px; z-index:10; } .slide-phone-frame img{width:100%;display:block;} .slide-caption{ font-size:14px;color:rgba(255,255,255,0.55); text-align:center;font-weight:300;max-width:320px;line-height:1.55; } .slider-controls{ display:flex;align-items:center;justify-content:center; gap:16px;margin-top:36px; } .slider-btn{ width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:white;font-size:18px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background 0.2s; } .slider-btn:hover{background:rgba(255,255,255,0.18);} .slider-btn:disabled{opacity:0.3;cursor:default;} .slider-dots{display:flex;gap:10px;} .slider-dot{ width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,0.2);cursor:pointer; transition:all 0.2s;border:none;padding:0; } .slider-dot.active{background:var(--gold);transform:scale(1.2);} /* MARQUEE */ .marquee-wrap{background:#0a121e;padding:16px 0;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);} .marquee-track{display:inline-flex;animation:marquee 28s linear infinite;} .mi{font-size:11px;color:rgba(255,255,255,0.35);letter-spacing:0.18em;text-transform:uppercase;padding:0 24px;} .ms{color:var(--gold);opacity:0.6;} @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* SECTIONS */ .section{padding:96px 48px;max-width:1200px;margin:0 auto;} .eyebrow{font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--purple);margin-bottom:14px;display:block;} .section-h{font-family:'DM Serif Display',serif;font-size:clamp(36px,4vw,54px);line-height:1.1;color:var(--navy);letter-spacing:-0.01em;margin-bottom:16px;} .section-h em{font-style:italic;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .section-p{font-size:16px;color:var(--muted);line-height:1.7;font-weight:300;max-width:580px;} /* TWO KINDS */ .two-kinds{background:var(--grad);padding:96px 48px;} .two-kinds-inner{max-width:1200px;margin:0 auto;} .two-kinds-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;} .kind-card{background:white;border-radius:24px;border:1px solid var(--border);padding:40px 36px;} .kind-icon{font-size:28px;margin-bottom:20px;display:block;} .kind-label{font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--purple);margin-bottom:12px;} .kind-card h3{font-family:'DM Serif Display',serif;font-size:26px;color:var(--navy);margin-bottom:14px;line-height:1.2;} .kind-card h3 em{font-style:italic;} .kind-card p{font-size:15px;color:var(--muted);line-height:1.7;font-weight:300;} /* FEATURES */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;} .feat-card{background:var(--peach);border-radius:20px;padding:32px 28px;border:1px solid rgba(255,255,255,0.8);} .feat-card:nth-child(even){background:var(--lavender);} .feat-emoji{font-size:32px;margin-bottom:16px;display:block;} .feat-card h3{font-family:'DM Serif Display',serif;font-size:20px;color:var(--navy);margin-bottom:10px;} .feat-card p{font-size:14px;color:var(--muted);line-height:1.6;font-weight:300;} /* VOICEMAIL */ .voicemail-section{background:var(--navy);padding:96px 48px;} .voicemail-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;} .voicemail-section .eyebrow{color:var(--gold);} .voicemail-section .section-h{color:white;} .voicemail-section .section-p{color:rgba(255,255,255,0.45);} .vm-steps{margin-top:32px;display:flex;flex-direction:column;gap:20px;} .vm-step{display:flex;gap:16px;align-items:flex-start;} .vm-step-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));color:white;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .vm-step-text strong{color:white;font-size:14px;font-weight:500;display:block;margin-bottom:3px;} .vm-step-text p{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6;font-weight:300;} .vm-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;overflow:hidden;} .vm-card-header{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;gap:14px;} .vm-icon{width:44px;height:44px;border-radius:12px;background:rgba(201,169,110,0.12);border:1px solid rgba(201,169,110,0.2);display:flex;align-items:center;justify-content:center;font-size:20px;} .vm-name{font-size:15px;font-weight:500;color:white;margin-bottom:3px;} .vm-date{font-size:12px;color:rgba(255,255,255,0.3);} .vm-body{padding:24px;} .vm-wave{display:flex;align-items:center;gap:3px;height:32px;margin-bottom:16px;} .vbar{background:var(--gold);border-radius:2px;opacity:0.5;width:3px;} .vm-text{font-family:'DM Serif Display',serif;font-style:italic;font-size:15px;color:rgba(255,255,255,0.6);line-height:1.6;margin-bottom:16px;} .vm-tags{display:flex;gap:8px;} .tag{font-size:11px;padding:5px 12px;border-radius:100px;font-weight:500;} .tag-s{background:rgba(201,169,110,0.12);color:var(--gold);border:1px solid rgba(201,169,110,0.2);} .tag-t{background:rgba(124,58,237,0.15);color:#c4b5fd;border:1px solid rgba(124,58,237,0.25);} /* BUILT FOR */ .built-section{background:var(--grad);padding:96px 48px;} .built-inner{max-width:1200px;margin:0 auto;} .built-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;} .built-card{background:white;border:1px solid var(--border);border-radius:20px;padding:32px 28px;} .built-card.full{grid-column:1/-1;background:var(--navy);border-color:transparent;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;padding:40px 48px;} .built-card h3{font-family:'DM Serif Display',serif;font-size:20px;color:var(--navy);margin-bottom:10px;} .built-card.full h3{font-size:28px;color:white;} .built-card.full h3 em{font-style:italic;color:var(--gold);} .built-card p{font-size:14px;color:var(--muted);line-height:1.6;font-weight:300;} .built-card.full p{color:rgba(255,255,255,0.5);font-size:15px;} .built-emoji{font-size:28px;margin-bottom:14px;display:block;} /* CALL */ .call-section{padding:96px 48px;} .call-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;} .call-number-btn{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--purple),var(--pink));color:white;padding:16px 28px;border-radius:100px;font-size:17px;font-weight:500;text-decoration:none;margin:20px 0 8px;} .call-vanity{font-size:12px;color:var(--muted);margin-bottom:32px;} .call-steps{display:flex;flex-direction:column;gap:14px;} .call-step{display:flex;gap:16px;align-items:flex-start;background:var(--peach);border-radius:14px;padding:18px 20px;border:1px solid rgba(255,255,255,0.8);} .cs-num{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--purple),var(--pink));color:white;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;} .cs-content h4{font-size:14px;font-weight:500;color:var(--navy);margin-bottom:4px;} .cs-content p{font-size:13px;color:var(--muted);line-height:1.5;font-weight:300;} /* FOUNDER */ .founder-section{background:var(--lavender);padding:96px 48px;text-align:center;} .founder-inner{max-width:720px;margin:0 auto;} .founder-q{font-family:'DM Serif Display',serif;font-size:clamp(22px,3vw,34px);font-style:italic;color:var(--navy);line-height:1.5;margin-bottom:32px;position:relative;padding-top:20px;} .founder-q em{background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .founder-q::before{content:'"';font-size:96px;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0.15;position:absolute;top:-20px;left:-10px;font-family:'DM Serif Display',serif;line-height:1;} .founder-div{width:40px;height:2px;background:linear-gradient(135deg,var(--purple),var(--pink));margin:0 auto 20px;border-radius:2px;} .founder-name{font-size:15px;font-weight:500;color:var(--navy);margin-bottom:4px;} .founder-role{font-size:13px;color:var(--muted);} /* PRICING */ .pricing-section{background:var(--navy);padding:96px 48px;} .pricing-inner{max-width:1200px;margin:0 auto;} .pricing-section .eyebrow{color:var(--gold);} .pricing-section .section-h{color:white;} .pricing-section .section-p{color:rgba(255,255,255,0.4);} .founding-banner{background:linear-gradient(135deg,rgba(201,169,110,0.12),rgba(201,169,110,0.06));border:1px solid rgba(201,169,110,0.3);border-radius:20px;padding:28px 32px;margin-bottom:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .founding-text h3{font-family:'DM Serif Display',serif;font-size:22px;color:var(--gold);margin-bottom:6px;} .founding-text p{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.6;font-weight:300;max-width:520px;} .founding-badges{display:flex;gap:12px;flex-shrink:0;} .founding-badge{background:rgba(201,169,110,0.1);border:1px solid rgba(201,169,110,0.25);border-radius:12px;padding:14px 20px;text-align:center;} .fb-label{font-size:10px;color:var(--gold);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;font-weight:500;} .fb-discount{font-family:'DM Serif Display',serif;font-size:24px;color:white;} .fb-sub{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;} .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:0;} .p-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:28px 22px;} .p-card.featured{background:rgba(201,169,110,0.08);border-color:rgba(201,169,110,0.3);} .p-tier{font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;} .p-price{font-family:'DM Serif Display',serif;font-size:40px;color:white;line-height:1;margin-bottom:2px;} .p-founding{font-size:13px;color:var(--gold);margin-bottom:4px;font-weight:500;opacity:0.8;} .p-period{font-size:12px;color:rgba(255,255,255,0.3);margin-bottom:16px;} .p-highlights{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;} .p-highlight{font-size:13px;color:rgba(255,255,255,0.6);display:flex;align-items:center;gap:8px;font-weight:300;} .p-highlight::before{content:'โœ“';color:var(--gold);font-size:12px;font-weight:600;flex-shrink:0;} .p-expand{background:none;border:none;cursor:pointer;font-size:12px;color:rgba(255,255,255,0.35);display:flex;align-items:center;gap:4px;padding:0;font-family:'DM Sans',sans-serif;transition:color 0.2s;} .p-expand:hover{color:rgba(255,255,255,0.65);} .p-extra{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:6px;} .p-extra.hidden{display:none;} .p-extra-item{font-size:12px;color:rgba(255,255,255,0.4);display:flex;align-items:center;gap:8px;font-weight:300;} .p-extra-item::before{content:'ยท';color:rgba(255,255,255,0.25);} .pricing-cta{text-align:center;margin-top:36px;} .pricing-fine{font-size:12px;color:rgba(255,255,255,0.25);margin-top:14px;} /* FAQ */ .faq-section{padding:96px 48px;background:var(--peach);} .faq-inner{max-width:800px;margin:0 auto;} .faq-section .eyebrow{color:var(--purple);} .faq-section .section-h{color:var(--navy);margin-bottom:40px;} .faq-item{border-bottom:1px solid var(--border);} .faq-q{width:100%;background:none;border:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:var(--navy);text-align:left;} .faq-icon{width:28px;height:28px;border-radius:50%;background:rgba(124,58,237,0.1);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--purple);flex-shrink:0;transition:transform 0.3s;} .faq-item.open .faq-icon{transform:rotate(45deg);} .faq-a{display:none;padding:0 0 24px;font-size:15px;color:var(--muted);line-height:1.7;font-weight:300;max-width:660px;} .faq-item.open .faq-a{display:block;} /* FOOTER */ footer{background:#060d18;padding:64px 48px 40px;} .footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;} .f-brand{font-family:'DM Serif Display',serif;font-size:26px;color:white;margin-bottom:8px;} .f-tagline{font-family:'DM Serif Display',serif;font-style:italic;font-size:14px;color:rgba(255,255,255,0.3);margin-bottom:20px;} .f-contact{font-size:13px;color:rgba(255,255,255,0.3);line-height:1.9;} .f-col-title{font-size:11px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:16px;} .f-links{display:flex;flex-direction:column;gap:10px;} .f-links a{font-size:13px;color:rgba(255,255,255,0.4);text-decoration:none;transition:color 0.2s;} .f-links a:hover{color:rgba(255,255,255,0.75);} .f-bottom{max-width:1200px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;} .f-copy{font-size:12px;color:rgba(255,255,255,0.18);} /* FADE */ .fade-up{opacity:0;transform:translateY(24px);transition:opacity 0.65s ease,transform 0.65s ease;} .fade-up.visible{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion: reduce){ .fade-up{opacity:1;transform:none;transition:none;} .marquee-track{animation:none;} html{scroll-behavior:auto;} } /* ============================================================ SHARED INNER-PAGE UTILITIES (about, download, legal, etc.) ============================================================ */ .page-wrap{max-width:1000px;margin:0 auto;padding:96px 48px;} .page-wrap.narrow{max-width:760px;} .page-hero{background:var(--grad);padding:88px 48px 72px;text-align:center;} .page-hero .eyebrow{display:inline-block;} .page-hero h1{font-size:clamp(40px,5vw,64px);margin:0 auto 18px;max-width:820px;} .page-hero p{font-size:17px;color:var(--muted);line-height:1.7;font-weight:300;max-width:620px;margin:0 auto;} .prose{max-width:760px;margin:0 auto;} .prose h2{font-family:'DM Serif Display',serif;font-size:clamp(26px,3vw,34px);color:var(--navy);letter-spacing:-0.01em;margin:48px 0 16px;line-height:1.2;} .prose h2 em{font-style:italic;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .prose h3{font-family:'DM Serif Display',serif;font-size:21px;color:var(--navy);margin:32px 0 12px;} .prose p{font-size:16px;color:var(--text);line-height:1.8;font-weight:300;margin-bottom:18px;} .prose ul,.prose ol{margin:0 0 18px 22px;} .prose li{font-size:16px;color:var(--text);line-height:1.8;font-weight:300;margin-bottom:8px;} .prose a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;} .prose strong{font-weight:500;color:var(--navy);} .prose .meta{font-size:13px;color:var(--muted);margin-bottom:32px;} .divider{width:40px;height:2px;background:linear-gradient(135deg,var(--purple),var(--pink));border-radius:2px;margin:0 0 20px;} .center{text-align:center;} .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;} .cta-row.center{justify-content:center;} /* ============================================================ RESPONSIVE โ€” the v6 reference shipped without media queries. ============================================================ */ @media (max-width: 1024px){ .pricing-grid{grid-template-columns:repeat(2,1fr);} .features-grid,.built-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width: 860px){ nav{padding:0 16px;height:60px;} .nav-links{gap:10px;overflow:visible;} .nav-links a:not(.nav-cta):not(.nav-cta-ghost):not(.nav-login){display:none;} .nav-cta-ghost{display:none;} .nav-cta{font-size:13px;padding:8px 14px;} .nav-login{font-size:13px;padding:8px 13px;} .logo{font-size:18px;} .logo-img{width:40px;height:40px;} .hero{grid-template-columns:1fr;padding:48px 22px 0;min-height:0;gap:24px;} .hero-left{padding-bottom:32px;} .hero-right{margin:0 auto;} .phone-stack{height:480px;} .float-card-bottom{left:auto;right:-12px;} .slider-section{padding:56px 0 48px;} .slider-label,.slider-title,.slider-sub{padding:0 22px;} .slider-viewport{max-width:100%;padding:0 22px;} .section,.two-kinds,.built-section,.voicemail-section,.call-section,.pricing-section,.faq-section,.founder-section{padding:64px 22px;} .two-kinds-grid{grid-template-columns:1fr;} .features-grid,.built-grid{grid-template-columns:1fr;} .voicemail-inner,.call-inner{grid-template-columns:1fr;gap:40px;} .built-card.full{grid-template-columns:1fr;gap:24px;padding:32px 28px;} .pricing-grid{grid-template-columns:1fr;} .founding-banner{flex-direction:column;align-items:flex-start;} .footer-inner{grid-template-columns:1fr 1fr;gap:32px;} .f-bottom{flex-direction:column;align-items:flex-start;} .page-wrap{padding:56px 22px;} .page-hero{padding:56px 22px 44px;} } @media (max-width: 480px){ .footer-inner{grid-template-columns:1fr;} .founding-badges{width:100%;} .founding-badge{flex:1;} .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center;justify-content:center;} }