/* ============================================================ AUN — aun.css Single source of truth. Replaces: - redesign.css (840KB legacy) - aun-fixes.css (395KB override layer) - aun-mobile.css (16KB mobile patches) - aun-typography.css (6KB type fixes) Loaded standalone in . No !important wars. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1'); /* ── 1. TOKENS ─────────────────────────────────────────── */ :root{ /* Brand core */ --aun-green: #25443a; --aun-coral: #ff8e8b; --aun-coral-deep: #ff6b66; /* headline-only saturated coral */ --aun-success: #33CC66; /* sole accent — match confirmed */ --aun-red: #E8331A; /* destructive only — not in active palette */ /* Surfaces */ --aun-bg: #F7F5F0; --aun-surface: #FEFDF9; --aun-ink: #0E0D0A; --aun-ink-2: #2e2c28; --aun-muted: #5c5850; --aun-muted-2: #4A4845; --aun-rule: #E0DDD7; --aun-rule-2: #EDEAE4; /* Dark-surface text */ --on-dark: #FEFDF9; --on-dark-muted: rgba(254,253,249,.7); --on-dark-dim: rgba(254,253,249,.4); --on-dark-faint: rgba(254,253,249,.08); /* Type — Barlow Condensed (display) + DM Serif Display (body + editorial) */ --f-head: 'Barlow Condensed','Arial Narrow',sans-serif; --f-body: 'DM Sans', 'Helvetica Neue', sans-serif; --f-serif: 'DM Serif Display', Georgia, serif; /* Type scale */ --ts-xs: 0.75rem; --ts-sm: 0.875rem; --ts-base: 1rem; --ts-md: 1.125rem; --ts-lg: 1.5rem; --ts-xl: 2rem; --ts-2xl: 3rem; --ts-3xl: 3.5rem; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; /* Layout */ --max-w: 1120px; --pad: clamp(20px,4vw,40px); --nav-h: 88px; /* Radii — squared brand */ --r-sm: 6px; --r-md: 8px; /* button radius */ --r-lg: 16px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px; /* status pills only */ /* Elevation */ --elev-1: 0 4px 12px rgba(14,13,10,.06); --elev-2: 0 24px 64px rgba(14,13,10,.18), 0 0 0 1px rgba(14,13,10,.08); --elev-card: 0 1px 0 rgba(14,13,10,.04), 0 12px 32px rgba(14,13,10,.06); /* Motion */ --ease: cubic-bezier(.22,1,.36,1); --d-fast: .15s; --d-med: .3s; --d-slow: .65s; } /* ── 2. RESET ──────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ background:var(--aun-bg); color:var(--aun-ink); font-family:var(--f-body); font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-top:var(--nav-h); } img,video,svg{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;} /* ── 3. TYPE PRIMITIVES ───────────────────────────────── */ h1,h2,h3,h4,h5,h6{ font-family:var(--f-head); font-weight:900; letter-spacing:-.01em; line-height:.95; text-transform:uppercase; color:var(--aun-ink); } h1 em,h2 em,h3 em,h4 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; text-transform:none; color:var(--aun-muted); letter-spacing:0; } p{font-family:var(--f-body);line-height:1.7;color:var(--aun-ink-2);} p strong{color:var(--aun-ink);font-weight:500;} .eyebrow{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head); font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--aun-green); line-height:1.2; } /* In-headline highlight chip — coral on green */ .hl{ font-family:inherit; color:var(--aun-coral); background:var(--aun-green); padding:.05em .14em; border-radius:5px; -webkit-box-decoration-break:clone; box-decoration-break:clone; display:inline; } .hl.inverse{color:var(--aun-green);background:var(--aun-coral);} /* ── 4. LAYOUT ────────────────────────────────────────── */ .container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);} section{padding:0;} /* ── 5. NAVIGATION ────────────────────────────────────── */ nav#nav{ position:fixed;top:0;left:0;right:0;z-index:900; height:88px; display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad); background:rgba(247,245,240,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s; } nav#nav.scrolled{border-bottom-color:var(--aun-rule);} /* Brand lockup — square logo + "we play" baseline-aligned */ .nav-logo{display:inline-flex;align-items:flex-end;gap:12px;line-height:0;} .nav-logo img{width:64px;height:64px;border-radius:12px;display:block;} .nav-logo .we{ font-family:var(--f-head); font-weight:800; font-size:26px; text-transform:lowercase; letter-spacing:-.005em; color:var(--aun-coral); line-height:1; padding-bottom:21px; /* 64 * 0.33 = 21 — baseline aligns with "aun" inside the tile */ } .nav-links{display:flex;align-items:center;gap:28px;list-style:none;} .nav-links a{ font-family:var(--f-head); font-size:.85rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--aun-ink-2); transition:color .15s; } .nav-links a:hover,.nav-links a.active{color:var(--aun-ink);} .nav-cta{ display:inline-flex;align-items:center;gap:6px; background:var(--aun-coral);color:var(--aun-ink); border:1.5px solid var(--aun-coral); font-family:var(--f-head);font-weight:700; font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; padding:12px 18px; border-radius:var(--r-sm); text-decoration:none; transition:background .15s,transform .15s,border-color .15s; } .nav-cta:hover{background:#ff7a76;border-color:#ff7a76;transform:translateY(-1px);} /* Burger / drawer */ .burger{display:none;flex-direction:column;gap:5px;width:28px;} .burger span{display:block;height:2px;background:var(--aun-ink);border-radius:2px;transition:transform .25s,opacity .25s;transform-origin:center;} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .drawer{ display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:850; background:var(--aun-bg);flex-direction:column; padding:32px var(--pad) 40px; } .drawer.open{display:flex;} .drawer a{ display:block;font-family:var(--f-head);font-weight:900;font-size:2.4rem; text-transform:uppercase;letter-spacing:.02em;color:var(--aun-ink); padding:14px 0;border-bottom:1px solid var(--aun-rule);line-height:1; } .drawer .dcta{ margin-top:28px;border-bottom:none; display:inline-flex;align-items:center;justify-content:center; background:var(--aun-coral);color:var(--aun-green); padding:16px 28px;border-radius:var(--r-md); font-size:1.1rem;font-weight:800;letter-spacing:.04em; width:100%;text-align:center; } /* ── 6. BUTTONS ──────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:13px 24px; box-shadow: 4px 4px 0 0 var(--aun-coral); transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; border-radius:var(--r-md); font-family:var(--f-head); font-size:.95rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1.5px solid transparent; cursor:pointer; transition:transform var(--d-fast),background var(--d-fast),color var(--d-fast),border-color var(--d-fast); white-space:nowrap; } .btn:hover{ transform: translate(-1px,-1px); box-shadow: 6px 6px 0 0 var(--aun-coral); } .btn-ink{background:var(--aun-green);color:var(--aun-surface);border-color:var(--aun-green);} .btn-ink:hover{background:#1f3a31;border-color:#1f3a31;} .btn-ghost{background:transparent;color:var(--aun-ink);border-color:#b0aca4;} .btn-ghost:hover{border-color:var(--aun-ink);} .btn-coral{background:var(--aun-coral);color:var(--aun-green);border-color:var(--aun-coral);} .btn-coral:hover{background:#ff7a76;border-color:#ff7a76;} .btn-green{background:var(--aun-green);color:var(--aun-coral);border-color:var(--aun-green);} .btn-green:hover{background:#1f3a31;border-color:#1f3a31;} .btn-white{background:rgba(254,253,249,.10);color:var(--on-dark);border-color:rgba(254,253,249,.32);} .btn-white:hover{background:rgba(254,253,249,.18);} .btn-lg{font-size:1.05rem;padding:16px 30px;} /* ── 7. CHIPS / BADGES / PILLS ───────────────────────── */ .chip{ display:inline-flex;align-items:center;gap:6px; padding:4px 10px; border-radius:var(--r-md); background:transparent; border:1px solid var(--aun-green); font-family:var(--f-head); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--aun-green); line-height:1.2; } .chip-problem{background:transparent;color:var(--aun-green);border-color:var(--aun-green);} .chip-fix {background:transparent;color:var(--aun-green);border-color:var(--aun-green);} .chip-neutral{background:transparent;color:var(--aun-green);border-color:var(--aun-green);} /* Trust pill — sole pill in the system, status only */ .trust-pill{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:4px 10px; margin-bottom:20px; font-family:var(--f-head); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--aun-green); line-height:1.2; } .trust-dot{display:none;} /* ── 8. HERO ─ split: typographic left + committed phone right ── */ .hero{ max-width:var(--max-w); margin:0 auto; padding:20px var(--pad) 32px; display:grid; grid-template-columns: 1.35fr 1fr; gap:0 64px; align-items:start; position:relative; } .hero-left{ display:flex;flex-direction:column;align-items:flex-start; padding-bottom:0; } .hero-left .trust-pill{margin-bottom:40px;} /* Headline — Barlow Condensed, title case, coral, hand-drawn underlines */ .hero h1.hero-headline{ font-family:var(--f-head); font-weight:700; font-style:normal; font-size:clamp(3.4rem,6.8vw,6rem); line-height:1.08; letter-spacing:-.015em; color:var(--aun-coral-deep); margin:0 0 40px 0; text-transform:none; max-width:100%; } .hero h1.hero-headline .u{ position:relative; display:inline-block; padding-bottom:.08em; } .hero h1.hero-headline .u svg{ position:absolute; left:0; width:100%; bottom:-.02em; height:.14em; overflow:visible; pointer-events:none; } .hero h1.hero-headline .u svg path{ fill:none; stroke:var(--aun-green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect: non-scaling-stroke; } /* Sub copy */ .hero-sub{ font-family:var(--f-body); font-size:clamp(1.02rem,1.15vw,1.15rem); line-height:1.55; color:var(--aun-muted-2); font-weight:400; max-width:480px; margin:0 0 36px 0; } .hero-sub strong{color:var(--aun-ink);font-weight:600;} /* CTAs — green primary, outline secondary, with coral offset shadow */ .hero-actions{ display:flex;gap:16px;flex-wrap:wrap;align-items:center; margin-bottom:24px; } /* Coral variants keep shadow in green so it's visible on coral fill */ .btn-coral{box-shadow: 4px 4px 0 0 var(--aun-green);} .btn-coral:hover{box-shadow: 6px 6px 0 0 var(--aun-green);} /* Nav CTA is coral-on-pill; use green shadow */ .nav-cta{box-shadow: 3px 3px 0 0 var(--aun-ink);} .nav-cta:hover{box-shadow: 5px 5px 0 0 var(--aun-ink);} /* Hero-actions inherits .btn shadow — no overrides needed */ /* Early-access tag row */ .hero-note{ font-family:var(--f-body); font-size:.82rem; color:var(--aun-muted); display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:4px; } .hero-note .tag{ display:inline-flex;align-items:center; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:3px 8px; font-family:var(--f-head);font-weight:700; font-size:.62rem;letter-spacing:.10em;text-transform:uppercase; color:var(--aun-green); } /* Right column — phone top aligns with headline top */ .hero-right{ position:relative; display:flex; justify-content:center; align-items:flex-start; padding-top:0; } .hero-phone{ width:min(320px, 100%); max-height:580px; aspect-ratio: 9 / 16; background:var(--aun-ink); border-radius:36px; border:8px solid var(--aun-ink); position:relative; overflow:hidden; } .hero-phone .phone-screen{ width:100%; height:100%; background:linear-gradient(180deg,#1a302a 0%,#0c1815 100%); position:relative; display:flex; align-items:center; justify-content:center; } .hero-phone .phone-notch{ position:absolute;top:16px;left:50%;transform:translateX(-50%); width:116px;height:28px; background:#000; border-radius:16px; z-index:2; } .hero-phone .phone-placeholder{ font-family:var(--f-head);font-weight:700; font-size:.7rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,142,139,.32); text-align:center; } /* ── 9. FACTS STRIP ───────────────────────────────────── */ .facts{background:var(--aun-green);width:100%;} .facts-inner{ max-width:var(--max-w);margin:0 auto; padding:0 var(--pad); display:grid;grid-template-columns:repeat(3,1fr); } .fact{padding:32px 28px;display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(255,255,255,.08);} .fact:last-child{border-right:none;} .fact-num{ font-family:var(--f-head);font-weight:900; font-size:clamp(2.6rem,4.5vw,4rem); line-height:1;color:var(--on-dark);letter-spacing:-.02em; } .fact-label{ font-family:var(--f-body);font-size:.85rem;line-height:1.5; color:var(--on-dark-muted);font-weight:400;max-width:240px; } .fact-label strong{color:var(--on-dark);font-weight:500;} /* ── 10. PROOF / STEPS ───────────────────────────────── */ .proof{border-top:1px solid var(--aun-rule);} .proof-inner{ max-width:var(--max-w);margin:0 auto; padding:40px var(--pad) 40px; display:grid;grid-template-columns:240px 1fr;gap:72px;align-items:start; } .proof-phone{ background:var(--aun-ink);border-radius:var(--r-2xl); padding:10px;box-shadow:var(--elev-2); position:relative;flex-shrink:0;margin-top:0; } .proof-phone::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:70px;height:22px;background:var(--aun-ink); border-radius:0 0 13px 13px;z-index:2; } .proof-video{width:100%;border-radius:var(--r-xl);display:block;aspect-ratio:480/1040;object-fit:cover;} .proof-copy{display:flex;flex-direction:column;gap:32px;} .proof-title{ font-family:var(--f-head);font-weight:900; font-size:clamp(2.2rem,4vw,3.4rem); text-transform:uppercase;letter-spacing:.005em;line-height:.95; color:var(--aun-ink);text-wrap:balance; } .proof-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--aun-muted);letter-spacing:0;} /* Scenario flow — vertical step list */ .scenario-flow{position:relative;display:flex;flex-direction:column;} .scenario-flow::before{ content:'';position:absolute;left:19px;top:36px;bottom:36px;width:1px; background:linear-gradient(to bottom,var(--aun-rule) 0%,rgba(14,13,10,.18) 50%,var(--aun-rule) 100%); } .flow-step{display:flex;align-items:flex-start;gap:20px;padding:24px 0;position:relative;overflow:visible;} .flow-step+.flow-step{border-top:1px solid var(--aun-rule);} .step-num{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--f-head);font-size:1rem;font-weight:800; flex-shrink:0;position:relative;z-index:1; background:var(--aun-bg);color:var(--aun-ink-2);border:1.5px solid #c8c4bc; } .flow-step.highlight .step-num{background:var(--aun-ink);color:var(--aun-coral);border-color:var(--aun-ink);} .step-content{flex:1;min-width:0;padding-top:4px;overflow-wrap:break-word;word-wrap:break-word;} .step-content h4{ font-family:var(--f-head);font-weight:900; font-size:clamp(1.3rem,2.2vw,1.7rem); text-transform:uppercase;letter-spacing:.01em;line-height:1.05; color:var(--aun-ink-2);margin-bottom:8px; display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .flow-step.highlight .step-content h4{color:var(--aun-ink);} .step-content h4 .brand-aun{ font-family:var(--f-head);font-style:normal;font-weight:900; color:var(--aun-coral); } .step-content p{font-family:var(--f-body);font-size:.92rem;color:var(--aun-muted-2);line-height:1.6;font-weight:400;} /* ── 11. PROOF CTA CARD ──────────────────────────────── */ .proof-card{ background:var(--aun-ink);border-radius:var(--r-lg); padding:28px 32px; display:flex;align-items:center;justify-content:space-between; gap:24px;flex-wrap:wrap; } .proof-card-label{ font-family:var(--f-head);font-size:.66rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark-dim);display:block;margin-bottom:6px; } .proof-card-title{ font-family:var(--f-head);font-weight:900;font-size:1.5rem; text-transform:uppercase;letter-spacing:.02em;color:var(--on-dark);line-height:1; } .proof-card-sub{font-family:var(--f-body);font-size:.85rem;color:var(--on-dark-muted);font-weight:400;margin-top:6px;} .proof-card-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap;} /* ── 12. SECTION LABEL / EYEBROW ─────────────────────── */ .section-label{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head); font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--aun-green); margin-bottom:12px; } /* ── 13. FOOTER ─ multi-column ───────────────────────── */ footer{ background:var(--aun-green); color:var(--on-dark); padding:20px var(--pad); width:100%; } .footer-mini{ max-width:var(--max-w);margin:0 auto; display:flex;align-items:center;justify-content:space-between; gap:32px;flex-wrap:wrap; } .footer-mini-links{ flex-direction:row !important; flex-wrap:wrap; gap:24px !important; } .footer-mini-links a{font-size:.88rem;} .footer-mini-copy{ font-family:var(--f-body);font-size:.78rem; color:var(--on-dark-dim); white-space:nowrap; } .footer-top{ max-width:var(--max-w);margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.08); } .footer-brand{display:flex;flex-direction:column;gap:12px;} .footer-brand-logo{ display:inline-flex;align-items:flex-end;gap:10px;line-height:0; text-decoration:none; } .footer-brand-logo img{height:28px;width:auto;border-radius:0;display:block;} .footer-brand-text{ font-family:var(--f-head);font-weight:800;font-size:15px; text-transform:lowercase;letter-spacing:-.005em; color:var(--aun-coral);line-height:1;padding-bottom:10px; } .footer-desc{ font-family:var(--f-body);font-size:.82rem;line-height:1.5; color:var(--on-dark-muted);max-width:28ch;margin:0; } .fcol-title{ display:block; font-family:var(--f-head);font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:10px; } .fcol-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;} .fcol-links a{ font-family:var(--f-body);font-size:.86rem; color:var(--on-dark); text-decoration:none; transition:color .15s; } .fcol-links a:hover{color:var(--aun-coral);} .footer-bottom{ max-width:var(--max-w);margin:0 auto; padding-top:16px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--f-body);font-size:.74rem; color:var(--on-dark-dim); } .footer-bottom a{color:var(--on-dark-muted);text-decoration:none;} .footer-bottom a:hover{color:var(--aun-coral);} /* ── 14. STICKY MOBILE CTA ───────────────────────────── */ .sticky-bar{ display:none;position:fixed;bottom:0;left:0;right:0;z-index:800; padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background:rgba(247,245,240,.96); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--aun-rule); } .sticky-bar .btn{width:100%;justify-content:center;} /* ── 15. ANIMATIONS / REVEALS ────────────────────────── */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .reveal.in{opacity:1;transform:translateY(0);} .d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;} @keyframes slideUp{from{opacity:0;transform:translateY(32px);}to{opacity:1;transform:translateY(0);}} /* ── 16. SKIP LINK (a11y) ────────────────────────────── */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:9999; background:var(--aun-coral);color:var(--aun-green); padding:10px 18px;font-family:var(--f-head);font-weight:700; text-transform:uppercase;letter-spacing:.06em;font-size:.85rem; border-radius:var(--r-md); } .skip-link:focus{left:16px;top:16px;} /* ── 17. FORM PRIMITIVES ─────────────────────────────── */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;} .field label{font-family:var(--f-head);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aun-ink-2);} .field input,.field select,.field textarea{ font-family:var(--f-body);font-size:1rem; padding:14px 16px;border-radius:var(--r-md); border:1.5px solid var(--aun-rule);background:var(--aun-surface);color:var(--aun-ink); transition:border-color .15s,box-shadow .15s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--aun-ink);box-shadow:0 0 0 3px rgba(14,13,10,.08); } .field-help{font-family:var(--f-body);font-size:.78rem;color:var(--aun-muted);} /* ── 18. RESPONSIVE ──────────────────────────────────── */ @media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;gap:32px;} .proof-inner{grid-template-columns:1fr;gap:40px;} .proof-phone{max-width:200px;margin:0 auto;} .proof-card{flex-direction:column;align-items:flex-start;} .proof-card-actions{width:100%;} .proof-card-actions .btn{flex:1;justify-content:center;} } @media (max-width:768px){ .nav-links,.nav-cta{display:none;} .burger{display:flex;} body{padding-bottom:84px;} .sticky-bar{display:block;} .hero{ grid-template-columns:1fr; gap:40px 0; padding:32px var(--pad) 0; min-height:auto; } .hero-left{padding-bottom:32px;} .hero-left .trust-pill{margin-bottom:24px;} .hero h1.hero-headline{font-size:clamp(2.6rem,11vw,4.2rem);margin-bottom:28px;} .hero-sub{margin-bottom:24px;} .hero-actions{flex-direction:column;width:100%;align-items:stretch;margin-bottom:16px;} .hero-actions .btn{width:100%;justify-content:center;text-align:center;} .hero-right{min-height:auto;order:-1;} .hero-phone{width:min(260px,70%);} .facts-inner{grid-template-columns:1fr;} .fact{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:24px 0;} .fact:last-child{border-bottom:none;} .fact-label{max-width:100%;} section{padding:56px 0;} footer{padding:48px var(--pad) 0;} .footer-bottom{flex-direction:column;text-align:center;} } @media (max-width:480px){ .footer-top{grid-template-columns:1fr;} .nav-logo .we{font-size:16px;padding-bottom:11px;} .nav-logo img{width:36px;height:36px;} .drawer a{font-size:1.8rem;} } /* ── 19. UTILITIES ───────────────────────────────────── */ .text-balance{text-wrap:balance;} .text-pretty{text-wrap:pretty;} .hidden{display:none !important;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ── 20. HERO PHONE VIDEO ────────────────────────────── */ .hero-phone .phone-video{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; display:block; z-index:1; } /* ── 21. INNER PAGE HERO ─────────────────────────────── */ .page-hero{ max-width:var(--max-w);margin:0 auto; padding:88px var(--pad) 48px; display:flex;flex-direction:column;align-items:flex-start;gap:20px; } .page-hero .page-kicker, .page-hero .section-label{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head); font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--aun-green); line-height:1.2; margin-bottom:16px; } .page-hero h1.page-title{ font-family:var(--f-head);font-weight:700;font-style:normal; font-size:clamp(2.8rem,6vw,5rem); line-height:1.04;letter-spacing:-.015em; color:var(--aun-coral-deep); text-transform:none;margin:0; } .page-hero h1.page-title em{ font-family:var(--f-serif);font-style:italic;font-weight:400; color:var(--aun-ink);letter-spacing:0; } .page-hero .page-lede{ font-family:var(--f-body);font-size:clamp(1.05rem,1.2vw,1.2rem); color:var(--aun-ink-2);max-width:60ch;line-height:1.55; } /* ── 22. STEPS ROW (how-it-works) ────────────────────── */ .steps-row{ max-width:var(--max-w);margin:0 auto; padding:0 var(--pad) 72px; display:flex;flex-direction:column;gap:0; } /* default (fill) = coral accent */ .steps-row .step{ background:var(--aun-surface); border:1px solid var(--aun-rule); border-top:3px solid var(--aun-coral); border-radius:var(--r-lg); padding:28px 24px 32px; display:flex;flex-direction:column;gap:0; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-top-color .25s; } .steps-row .step:hover{transform:translateY(-3px);box-shadow:var(--elev-2);} .steps-row .step .step-num{ /* reset the generic .step-num circle */ width:auto;height:auto;border-radius:0;border:none; background:transparent; display:block; font-family:var(--f-head);font-weight:900;font-size:.75rem; color:var(--aun-coral);letter-spacing:.18em; margin-bottom:16px; transition:color .25s; } .steps-row .step .step-title{ font-family:var(--f-head);font-weight:900;font-size:1.2rem;line-height:1.1; text-transform:uppercase;letter-spacing:.02em;color:var(--aun-ink); margin-bottom:12px; } .steps-row .step .step-desc{ font-family:var(--f-body);font-size:.92rem;line-height:1.65; color:var(--aun-muted); } /* green accent when find journey is active */ .steps-row[data-journey="find"] .step{ border-top-color:var(--aun-green); } .steps-row[data-journey="find"] .step .step-num{ color:var(--aun-green); } /* ── 23. FEATURE PANELS (fpanel) ─────────────────────── */ .fpanels{ max-width:var(--max-w);margin:0 auto; padding:40px var(--pad) 72px; display:flex;flex-direction:column;gap:48px; } .fpanel{ display:grid;grid-template-columns:1fr 280px;gap:56px; align-items:center; background:var(--aun-surface); border:1px solid var(--aun-rule); border-radius:var(--r-xl); padding:56px; } .fpanel.flip{grid-template-columns:280px 1fr;} .fpanel.flip .fpanel-copy{order:2;} .fpanel.flip .fpanel-phone{order:1;} .fpanel-copy{display:flex;flex-direction:column;gap:20px;} .fpanel-kicker{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head); font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--aun-green); margin-bottom:12px; } .fpanel-title{ font-family:var(--f-head);font-weight:900; font-size:clamp(2rem,3.4vw,2.8rem); line-height:1.04;letter-spacing:-.01em; text-transform:uppercase;color:var(--aun-ink); } .fpanel-body{ font-family:var(--f-body);font-size:1.02rem;line-height:1.6; color:var(--aun-ink-2);max-width:48ch; } .fpanel-body strong{color:var(--aun-ink);font-weight:600;} .fpanel-link{ display:inline-flex;align-items:center;gap:8px; font-family:var(--f-head);font-weight:700;font-size:.9rem; letter-spacing:.04em;text-transform:uppercase; color:var(--aun-ink);text-decoration:none; align-self:flex-start; padding:10px 20px; border:1.5px solid var(--aun-ink); border-radius:var(--r-md); box-shadow:4px 4px 0 0 var(--aun-coral); transition:transform .15s, box-shadow .15s; } .fpanel-link:hover{color:var(--aun-ink);} .fpanel-phone{ width:100%;aspect-ratio:9/16;max-height:360px; background:var(--aun-ink);border:8px solid var(--aun-ink); border-radius:36px;position:relative;overflow:hidden; } .fpanel-phone::before{ content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%); width:90px;height:22px;background:#000;border-radius:12px;z-index:2; } .fpanel-phone-screen{ position:absolute;inset:0; background:linear-gradient(180deg,#1a302a 0%,#0c1815 100%); display:flex;align-items:center;justify-content:center; color:rgba(255,142,139,.32); font-family:var(--f-head);font-weight:700;font-size:.7rem; letter-spacing:.18em;text-transform:uppercase; } /* ── 24. COMPARE (WhatsApp vs AUN) ───────────────────── */ .compare-dark{ background:var(--aun-surface); padding:80px var(--pad); border-top:1px solid rgba(14,13,10,.08); border-bottom:1px solid rgba(14,13,10,.08); } .compare-dark-inner{ max-width:var(--max-w);margin:0 auto; display:flex;flex-direction:column;gap:16px; } .compare-dark-title{ font-family:var(--f-head);font-weight:900; font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1.05; color:var(--aun-ink);letter-spacing:-.01em; } .compare-dark-title .vs{ font-family:var(--f-body);font-style:italic;font-weight:400; font-size:clamp(1.2rem,2.2vw,1.8rem); color:var(--aun-ink);opacity:.45;text-transform:lowercase;vertical-align:middle; } .compare-dark-title em{ font-family:var(--f-serif);font-style:italic;font-weight:400; color:var(--aun-coral);letter-spacing:0; } .compare-dark-sub{ font-family:var(--f-body);font-size:1.05rem;color:rgba(14,13,10,.55); margin-bottom:24px; } .cmp-grid{ display:grid;grid-template-columns:1fr 1fr;gap:24px; } .cmp-col{ background:#fff; border:1px solid rgba(14,13,10,.1); border-radius:var(--r-lg); padding:32px; } .cmp-col.cmp-win{ background:var(--aun-green); border-color:transparent; } .cmp-col h3{ font-family:var(--f-head);font-weight:900;font-size:1.3rem; text-transform:uppercase;letter-spacing:.04em;margin-bottom:20px; color:var(--aun-ink); } .cmp-col.cmp-win h3{color:var(--on-dark);} .cmp-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .cmp-col li{ font-family:var(--f-body);font-size:.95rem;line-height:1.5; color:rgba(14,13,10,.55);padding-left:24px;position:relative; } .cmp-col.cmp-win li{color:var(--on-dark-muted);} .cmp-col li::before{ content:'';position:absolute;left:0;top:8px; width:10px;height:10px;border-radius:50%; background:rgba(14,13,10,.12); } .cmp-col.cmp-win li::before{background:var(--aun-coral);} @media(max-width:640px){ .cmp-grid{grid-template-columns:1fr;} .compare-dark{padding:48px var(--pad);} } /* ── 25. FAQ ─────────────────────────────────────────── */ .faq-list{ max-width:800px;margin:0 auto; padding:32px var(--pad) 80px; display:flex;flex-direction:column;gap:0; } .faq-item{ border-bottom:1px solid var(--aun-rule); padding:24px 0; } .faq-item summary{ list-style:none;cursor:pointer; display:flex;justify-content:space-between;align-items:flex-start;gap:24px; font-family:var(--f-body);font-weight:600;font-size:1.1rem; line-height:1.45;color:var(--aun-ink); padding:4px 0; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:'+';flex-shrink:0; font-family:var(--f-head);font-weight:400;font-size:1.8rem;line-height:1; color:var(--aun-coral-deep); transition:transform .2s var(--ease); } .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item .faq-a{ padding:12px 0 4px;max-width:66ch; font-family:var(--f-body);font-size:1rem;line-height:1.65; color:var(--aun-ink-2); } .faq-item .faq-a p{margin-bottom:12px;} .faq-item .faq-a p:last-child{margin-bottom:0;} /* ── 26. ABOUT / CONTENT PAGES ───────────────────────── */ .content-wrap{ max-width:760px;margin:0 auto; padding:24px var(--pad) 96px; } .content-wrap h2{ font-family:var(--f-head);font-weight:900; font-size:clamp(1.6rem,2.2vw,2rem); text-transform:uppercase;letter-spacing:-.005em; color:var(--aun-ink); margin:40px 0 16px; } .content-wrap h3{ font-family:var(--f-head);font-weight:700; font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em; color:var(--aun-ink);margin:24px 0 12px; } .content-wrap p{ font-family:var(--f-body);font-size:1.05rem;line-height:1.7; color:var(--aun-ink-2);margin-bottom:16px;max-width:66ch; } .content-wrap p strong{color:var(--aun-ink);font-weight:600;} .content-wrap ul{ list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px; } .content-wrap ul li{ font-family:var(--f-body);font-size:1rem;line-height:1.6; color:var(--aun-ink-2);padding-left:22px;position:relative; } .content-wrap ul li::before{ content:'';position:absolute;left:0;top:10px; width:8px;height:8px;border-radius:50%;background:var(--aun-coral); } /* ── 27. CTA ROW (inner page final CTA) ──────────────── */ .cta-row{ max-width:var(--max-w);margin:0 auto; padding:40px var(--pad) 80px; display:flex;flex-direction:column;align-items:center;gap:24px; text-align:center; } .cta-row-title{ font-family:var(--f-head);font-weight:900; font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.05; text-transform:uppercase;color:var(--aun-ink);letter-spacing:-.005em; } .cta-row-sub{ font-family:var(--f-body);font-size:1rem;color:var(--aun-muted); } .cta-row-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;} /* ── 28. INNER-PAGE RESPONSIVE ───────────────────────── */ @media (max-width:900px){ .steps-row{grid-template-columns:repeat(2,1fr);} .fpanel,.fpanel.flip{grid-template-columns:1fr;gap:32px;padding:32px;} .fpanel.flip .fpanel-copy{order:1;} .fpanel.flip .fpanel-phone{order:2;} .fpanel-phone{max-width:220px;margin:0 auto;} .cmp-grid{grid-template-columns:1fr;} } @media (max-width:600px){ .steps-row{grid-template-columns:1fr;} .page-hero{padding:64px var(--pad) 32px;} .compare-dark{padding:56px var(--pad);} } /* ── 29. CLUBS PAGE ──────────────────────────────────── */ /* Dark hero split */ .hero-dark{background:var(--aun-green);padding:72px var(--pad) 0;position:relative;overflow:hidden;width:100%;} .hero-dark::before{content:'';position:absolute;top:-200px;left:-240px;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(255,142,139,.28) 0%,rgba(255,142,139,.12) 35%,rgba(255,142,139,0) 70%);pointer-events:none;z-index:0;} .hero-dark::after{content:'';position:absolute;top:-80px;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,142,139,.14) 0%,rgba(255,142,139,.05) 45%,rgba(255,142,139,0) 75%);pointer-events:none;z-index:0;} .hero-dark-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:flex-end;min-height:480px;position:relative;z-index:1;} .hero-dark-kicker{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid rgba(254,253,249,.45); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head);font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:rgba(254,253,249,.75); margin-bottom:12px; } .hero-dark-title{font-family:var(--f-head);font-weight:900;font-size:clamp(3rem,6vw,5.4rem);text-transform:uppercase;letter-spacing:.005em;line-height:.92;color:var(--on-dark);margin-bottom:22px;} .hero-dark-title em{font-style:italic;font-family:var(--f-serif);font-weight:400;text-transform:none;color:var(--aun-coral);letter-spacing:0;} .hero-dark-sub{font-family:var(--f-body);font-size:1rem;color:rgba(254,253,249,.72);line-height:1.75;font-weight:400;max-width:460px;margin-bottom:32px;} .hero-dark-sub strong{color:var(--on-dark);font-weight:500;} .hero-dark-actions{display:flex;gap:12px;flex-wrap:wrap;} .hero-dark-actions .btn-dark-ghost{background:transparent;color:rgba(254,253,249,.75);border:1.5px solid rgba(254,253,249,.22);box-shadow:4px 4px 0 0 var(--aun-coral);} .hero-dark-actions .btn-dark-ghost:hover{color:var(--on-dark);border-color:rgba(254,253,249,.55);} .hero-dark-note{font-family:var(--f-body);font-size:.82rem;color:rgba(254,253,249,.45);margin-top:16px;} .hero-dark-note a{color:var(--aun-coral);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s;} .hero-dark-note a:hover{color:#ffb3b0;} .hero-copy{padding-bottom:56px;} .dash-col{display:flex;align-items:flex-start;justify-content:center;align-self:start;margin-top:120px;} /* WhatsApp mock card */ .wa-mock{background:#ECE5DD;border-radius:16px;padding:12px;width:100%;max-width:360px;color:#111;box-shadow:0 10px 36px rgba(0,0,0,.24);border:1px solid #D1CCC3;overflow:hidden;} .wa-mock-header{display:flex;align-items:center;gap:10px;padding:4px 6px 10px;border-bottom:1px solid rgba(0,0,0,.07);margin-bottom:10px;} .wa-mock-avatar{width:36px;height:36px;border-radius:50%;background:#25443A;display:flex;align-items:center;justify-content:center;color:#FEFDF9;font-size:.85rem;flex-shrink:0;} .wa-mock-title{font-family:var(--f-body);font-weight:600;font-size:.85rem;color:#111;} .wa-mock-meta{font-family:var(--f-body);font-size:.65rem;color:#666;margin-top:2px;} .wa-mock-body{display:flex;flex-direction:column;gap:4px;padding:4px 6px 6px;} .wa-mock-sender{font-family:var(--f-body);font-size:.6rem;color:#075E54;font-weight:600;margin-bottom:2px;} .wa-mock-bubble{font-family:var(--f-body);padding:8px 11px;font-size:.74rem;line-height:1.5;max-width:85%;color:#111;} .wa-mock-bubble.out{background:#DCF8C6;border-radius:3px 12px 12px 12px;} .wa-mock-bubble.in{background:#fff;border-radius:12px 3px 12px 12px;} .wa-mock-link-bubble{background:#DCF8C6;border-radius:3px 12px 12px 12px;padding:8px 11px;max-width:72%;margin-top:3px;} .wa-mock-link-bubble .lb-title{font-family:var(--f-body);font-weight:600;font-size:.7rem;color:#111;margin-bottom:2px;} .wa-mock-link-bubble .lb-url{font-family:var(--f-body);color:#075E54;font-size:.7rem;text-decoration:underline;} .wa-mock-other-sender{font-family:var(--f-body);font-size:.6rem;color:#666;font-weight:500;margin-top:8px;} /* Truth band (under dark hero) */ .truth-band{background:var(--aun-ink);padding:28px var(--pad);border-top:1px solid rgba(255,255,255,.08);width:100%;} .truth-inner{max-width:var(--max-w);margin:0 auto;} .truth-text{font-family:var(--f-head);font-weight:700;font-size:clamp(1rem,2vw,1.4rem);text-transform:uppercase;letter-spacing:.04em;color:rgba(254,253,249,.25);line-height:1.7;} .truth-text strong{color:rgba(254,253,249,.82);font-weight:900;} /* Problem section (clubs) */ .problem-section{background:var(--aun-bg);border-bottom:1px solid var(--aun-rule);width:100%;} .problem-inner{max-width:var(--max-w);margin:0 auto;padding:72px var(--pad);} .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:28px;} .problem-copy p{font-family:var(--f-body);font-size:.95rem;color:var(--aun-muted-2);line-height:1.75;font-weight:400;margin-bottom:14px;} .problem-copy p:last-child{margin-bottom:0;} .problem-copy strong{color:var(--aun-ink);font-weight:500;} .problem-imgs{display:flex;gap:14px;align-items:flex-start;justify-content:center;padding-top:8px;} .wa-scene{flex:1;max-width:200px;transform:rotate(-1.5deg);background:#ECE5DD;border-radius:14px;padding:12px;font-size:.7rem;box-shadow:0 6px 24px rgba(0,0,0,.12);} .wa-scene-b{transform:rotate(2deg);} .wa-scene-top{font-family:var(--f-body);font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A6A60;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.07);display:flex;align-items:center;gap:6px;} .wa-scene-msgs{display:flex;flex-direction:column;gap:3px;} .wa-sm{max-width:78%;padding:7px 10px;border-radius:11px;font-size:.7rem;line-height:1.4;color:#111;} .wa-sm.t{background:#fff;border-radius:3px 11px 11px 11px;} .wa-sm.m{background:#D9FDD3;border-radius:11px 3px 11px 11px;margin-left:auto;} .wa-sn{font-size:.52rem;color:#888;margin-bottom:1px;} .wa-sn.r{text-align:right;margin-right:4px;} .wa-sn.l{margin-left:4px;} .wa-scene-flood{background:rgba(0,0,0,.07);border-radius:8px;padding:8px 11px;text-align:center;font-size:.64rem;color:#7A6A60;font-style:italic;margin-top:6px;line-height:1.4;} .wa-scene-sys{font-size:.6rem;color:#7A6A60;font-style:italic;line-height:1.4;padding:2px 6px;opacity:.8;} .wa-card{background:#fff;border-radius:4px 11px 11px 11px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;margin:2px 0;box-shadow:0 1px 2px rgba(0,0,0,.04);} .wa-card-t{font-family:var(--f-head);font-size:.58rem;font-weight:700;letter-spacing:.06em;color:#0E0D0A;margin-bottom:2px;} .wa-card-r{font-size:.64rem;color:#333;line-height:1.35;} .wa-card-link{font-size:.6rem;color:#2a7ab0;text-decoration:underline;margin-top:2px;word-break:break-all;} /* Perks grid */ .perks-section{max-width:var(--max-w);margin:0 auto;padding:72px var(--pad);} .perks-head{margin-bottom:36px;} .perks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--aun-rule);} .perk{background:var(--aun-bg);padding:32px 28px;display:flex;flex-direction:column;gap:14px;transition:background .2s;} .perk:hover{background:var(--aun-bg-alt,#FEFDF9);} .perk-icon{width:34px;height:34px;flex-shrink:0;color:var(--aun-ink);} .perk-title{font-family:var(--f-head);font-weight:700;font-size:.98rem;text-transform:uppercase;letter-spacing:.04em;color:var(--aun-ink);} .perk-desc{font-family:var(--f-body);font-size:.88rem;color:var(--aun-muted-2);line-height:1.65;font-weight:400;} /* Free band */ .free-band{background:var(--aun-ink);padding:44px var(--pad);width:100%;} .free-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;} .free-title{font-family:var(--f-head);font-weight:900;font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;letter-spacing:.005em;color:var(--on-dark);line-height:.95;} .free-sub{font-family:var(--f-body);font-size:.95rem;color:rgba(254,253,249,.45);font-weight:400;max-width:420px;line-height:1.6;} .free-sub strong{color:rgba(254,253,249,.85);font-weight:500;} .free-band .btn{background:var(--aun-coral);color:var(--aun-ink);border-color:var(--aun-coral);} .free-band .btn:hover{background:var(--aun-coral);filter:brightness(1.05);} /* Flow section (clubs onboarding) */ .flow-section{background:var(--aun-bg);border-top:1px solid var(--aun-rule);border-bottom:1px solid var(--aun-rule);width:100%;} .flow-inner{max-width:var(--max-w);margin:0 auto;padding:72px var(--pad);} .flow-head{margin-bottom:32px;} .flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--aun-rule);} .flow-steps .step{background:var(--aun-bg);padding:32px 24px;border:none;display:flex;flex-direction:column;} .flow-steps .step .step-num{width:auto;height:auto;background:none;border:none;font-family:var(--f-head);font-weight:900;font-size:3rem;line-height:1;color:var(--aun-rule);margin-bottom:10px;letter-spacing:-.02em;padding:0;display:block;} .flow-steps .step.step-last .step-num, .flow-steps .step.step-opt-a .step-num, .flow-steps .step.step-opt-b .step-num{color:var(--aun-green);} .flow-steps .step.step-last .step-title, .flow-steps .step.step-opt-a .step-title, .flow-steps .step.step-opt-b .step-title{color:var(--aun-green);} .flow-steps .step.highlight{background:var(--aun-green);} .flow-steps .step.highlight .step-num{color:var(--aun-coral);} .flow-steps .step.highlight .step-title{color:var(--on-dark);} .flow-steps .step.highlight .step-desc{color:rgba(254,253,249,.7);} .flow-steps .step.highlight .ftag{background:rgba(255,255,255,.14);color:rgba(254,253,249,.88);border-color:transparent;} .ftag{display:inline-flex;align-items:center;gap:4px; background:transparent; border:1px solid rgba(254,253,249,.5); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head);font-weight:700; font-size:.65rem;letter-spacing:.12em;text-transform:uppercase; color:rgba(254,253,249,.8); line-height:1.2; } .ftag-g{background:#DBEFD3;color:#2A6A3A;} .ftag-n{background:var(--aun-bg);color:var(--aun-muted-2);border:1px solid var(--aun-rule);} .flow-steps .step .step-title{font-family:var(--f-head);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--aun-ink);margin-bottom:8px;} .flow-steps .step .step-desc{font-family:var(--f-body);font-size:.87rem;color:var(--aun-muted-2);line-height:1.65;font-weight:400;margin-bottom:14px;} /* Contact / form card */ .cta-box{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);} .contact-wrap{max-width:720px;margin:0 auto;padding:72px 0 64px;text-align:center;scroll-margin-top:80px;} .contact-eyebrow{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--aun-green); border-radius:var(--r-md); padding:4px 10px; font-family:var(--f-head);font-size:.68rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--aun-green); margin-bottom:12px; } .contact-heading{font-family:var(--f-head);font-weight:900;font-size:clamp(2.2rem,4.5vw,3.2rem);text-transform:uppercase;letter-spacing:.005em;line-height:.92;color:var(--aun-ink);margin-bottom:12px;} .contact-heading em{font-style:italic;color:var(--aun-muted-2);} .contact-sub{font-family:var(--f-body);font-size:.98rem;color:var(--aun-muted-2);line-height:1.65;max-width:600px;margin:0 auto 28px;} .form-card{background:#FAFAF7;border:1px solid #D8D4CC;border-radius:14px;padding:32px;box-shadow:6px 6px 0 0 var(--aun-coral);max-width:600px;margin:0 auto;text-align:left;} .form-legend{font-family:var(--f-head);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--aun-muted-2);display:block;margin-bottom:8px;} .topic-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;} .topic-chip{font-family:var(--f-head);font-size:.78rem;padding:8px 14px;border:1px solid #D8D4CC;border-radius:4px;background:#F5F3EE;color:var(--aun-muted-2);cursor:pointer;transition:all .15s;outline:none;} .topic-chip:hover{border-color:var(--aun-green);} .topic-chip.active{background:var(--aun-green);border-color:var(--aun-green);color:var(--on-dark);} .req{color:var(--aun-coral);margin-left:2px;} .form-card .field input,.form-card .field textarea,.form-spam-input{width:100%;font-family:var(--f-body);font-size:.92rem;background:#F5F3EE;border:1px solid #D8D4CC;border-radius:12px;padding:12px 14px;color:var(--aun-ink);outline:none;transition:border-color .15s,background .15s;box-sizing:border-box;} .form-card .field input::placeholder,.form-card .field textarea::placeholder{color:#B5B0A6;} .form-card .field input:focus,.form-card .field textarea:focus,.form-spam-input:focus{border-color:var(--aun-green);background:#FAFAF7;} .form-card .field textarea{min-height:90px;resize:vertical;line-height:1.6;} .field-error{font-family:var(--f-body);font-size:.75rem;color:var(--aun-coral);margin-top:4px;display:none;} .field.has-error .field-error{display:block;} .field.has-error input,.field.has-error textarea{border-color:var(--aun-coral);} .form-spam-row{margin-bottom:18px;} .form-spam-input{width:140px;} .form-hp{position:absolute;left:-9999px;opacity:0;} .form-submit{width:100%;font-family:var(--f-head);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--aun-green);color:var(--on-dark);border:1.5px solid var(--aun-green);border-radius:var(--r-md);padding:15px;cursor:pointer;box-shadow:4px 4px 0 0 var(--aun-coral);transition:transform .15s,box-shadow .15s,background .15s;background .2s,transform .1s;} .form-submit:hover{background:#1f3a31;border-color:#1f3a31;transform:translate(-1px,-1px);box-shadow:6px 6px 0 0 var(--aun-coral);} .form-submit:active{transform:translate(0,0);box-shadow:2px 2px 0 0 var(--aun-coral);} .form-submit:disabled{opacity:.5;cursor:not-allowed;}h .form-note{font-family:var(--f-body);font-size:.82rem;color:var(--aun-muted-2);text-align:center;margin-top:12px;} .form-note a{color:var(--aun-green);text-decoration:underline;text-underline-offset:2px;} .form-success{display:none;text-align:center;padding:48px 24px;} .form-success.show{display:block;} .form-success-icon{display:inline-block;width:56px;height:56px;border-radius:50%;background:var(--aun-green);color:var(--on-dark);font-size:1.6rem;line-height:56px;margin-bottom:16px;} .form-success-title{font-family:var(--f-head);font-weight:900;font-size:1.8rem;text-transform:uppercase;color:var(--aun-ink);margin-bottom:8px;} .form-success-text{font-family:var(--f-body);font-size:.92rem;color:var(--aun-muted-2);line-height:1.6;max-width:420px;margin:0 auto;} @media (max-width:900px){ .hero-dark-inner{grid-template-columns:1fr;gap:32px;min-height:auto;} .hero-copy{padding-bottom:8px;} .dash-col{justify-content:flex-start;align-self:auto;margin-top:0;} .problem-grid{grid-template-columns:1fr;} .problem-imgs{justify-content:flex-start;padding-top:0;} .perks-grid{grid-template-columns:1fr 1fr;} .flow-steps{grid-template-columns:1fr 1fr;} .free-inner{flex-direction:column;align-items:flex-start;gap:18px;} } @media (max-width:600px){ .perks-grid,.flow-steps{grid-template-columns:1fr;} .hero-dark-title{font-size:clamp(2.6rem,12vw,3.8rem);} .problem-inner,.perks-section,.flow-inner{padding:56px var(--pad);} .form-card{padding:24px 20px;} .contact-wrap{padding:56px 0 48px;} } /* ── LAUNCH WIDGET ─ lightweight typographic countdown ─────── */ .launch-widget{display:flex;flex-direction:column;gap:8px;margin-top:20px;align-self:flex-start;} .launch-pre-label{font-family:var(--f-head);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--aun-muted);margin:0;} .scoreboard{display:flex;align-items:baseline;gap:0;} .scoreboard-cell{display:flex;flex-direction:column;align-items:center;} .sb-num{font-family:var(--f-head);font-size:2.2rem;font-weight:900;line-height:1;color:var(--aun-green);letter-spacing:.02em;font-variant-numeric:tabular-nums;} .sb-label{font-family:var(--f-head);font-size:.52rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--aun-muted);margin-top:2px;} .sb-sep{font-family:var(--f-head);font-size:1.8rem;font-weight:900;color:var(--aun-rule);line-height:1;padding:0 3px;align-self:flex-start;margin-top:2px;} .waitlist-note{font-family:var(--f-body);font-size:.82rem;color:var(--aun-muted);margin:0;} .waitlist-note strong{color:var(--aun-ink);font-weight:700;} .launch-summit-note{font-family:var(--f-head);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aun-muted);margin:0;} /* ── TWO-SIDES SPLIT — homepage mid section ──────────────── */ .two-sides{padding:var(--sp-xl) 0;border-top:1px solid var(--aun-rule);} .two-sides-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1px 1fr;gap:0;padding:0 var(--sp-md);} @media(max-width:768px){.two-sides-inner{grid-template-columns:1fr;}.two-sides-divider{display:none;}.two-sides-col+.two-sides-col{border-top:1px solid var(--aun-rule);padding-top:var(--sp-lg);}} .two-sides-divider{background:var(--aun-rule);align-self:stretch;margin:0 var(--sp-lg);} .two-sides-col{display:flex;flex-direction:column;gap:var(--sp-sm);padding:var(--sp-lg) 0;} .two-sides-col .section-label{margin-bottom:.25rem;} .two-sides-headline{font-family:var(--f-head);font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.05;color:var(--aun-ink);margin:0 0 var(--sp-sm);letter-spacing:-.01em;} .two-sides-body{font-family:var(--f-body);font-size:1rem;line-height:1.6;color:var(--aun-ink-mid,#4a4a3a);margin:0 0 var(--sp-md);max-width:38ch;} .two-sides-col .btn{align-self:flex-start;} /* ── JOURNEY PILL TOGGLE — how-it-works steps switcher ──────── */ .steps-row{ padding:var(--sp-xl) var(--pad) var(--sp-xl); } /* Tab switcher — full-width, centered */ .journey-select{ display:flex; align-items:center; justify-content:center; gap:0; background:var(--aun-rule-2,#EDEAE4); border-radius:12px; padding:4px; margin:0 auto var(--sp-lg); width:100%; max-width:520px; } .journey-pill{ flex:1; font-family:var(--f-head);font-size:.85rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase; padding:.75rem 1.5rem; border:none;border-radius:9px; background:transparent; color:var(--aun-muted); cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; text-align:center; line-height:1; } /* inactive hover */ .journey-pill:not(.active):hover{ color:var(--aun-ink-2); background:rgba(14,13,10,.05); } /* fill pill (first) — active = coral */ #jpill-fill.active{ background:var(--aun-coral); color:#fff; box-shadow:0 1px 6px rgba(255,142,139,.35); } /* find pill (second) — active = green */ #jpill-find.active{ background:var(--aun-green); color:var(--on-dark); box-shadow:0 1px 6px rgba(37,68,58,.3); } /* Step cards grid */ .jsteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .jsteps[hidden]{display:none;} /* Step card base — colors handled in sec22 via data-journey */ .step{ display:flex;flex-direction:column;gap:0; background:var(--aun-surface); border:1px solid var(--aun-rule); border-top:3px solid var(--aun-coral); border-radius:var(--r-lg); padding:28px 24px 32px; transition:transform .2s,box-shadow .2s,border-top-color .25s; } .step:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(14,13,10,.09);} .step .step-num{ font-family:var(--f-head);font-weight:900;font-size:.75rem; color:var(--aun-coral);letter-spacing:.18em; margin-bottom:16px;display:block; transition:color .25s; } .step .step-title{ font-family:var(--f-head);font-weight:900; font-size:1.2rem;line-height:1.1; text-transform:uppercase;letter-spacing:.02em; color:var(--aun-ink);margin-bottom:12px; } .step .step-desc{ font-family:var(--f-body);font-size:.92rem;line-height:1.65; color:var(--aun-muted); } .step--highlight .step-num{color:var(--aun-green);} .step--highlight .step-title{color:var(--aun-green);} .step--highlight{border-top-color:var(--aun-green);} @media(max-width:900px){.jsteps{grid-template-columns:1fr 1fr;}} @media(max-width:540px){ .jsteps{grid-template-columns:1fr;} .journey-select{max-width:100%;} .journey-pill{font-size:.78rem;padding:.65rem 1rem;} } /* ── CLUBS TEASER — homepage section ───────────────────────── */ .clubs-teaser{ background:var(--aun-ink); padding:var(--sp-xl) var(--sp-md); } .clubs-teaser-inner{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-xl); align-items:center; } @media(max-width:768px){.clubs-teaser-inner{grid-template-columns:1fr;}.clubs-teaser-aside{display:none;}} .clubs-teaser-copy{display:flex;flex-direction:column;gap:var(--sp-sm);} .clubs-teaser-copy .section-label.on-dark{color:rgba(254,253,249,.5);} .clubs-teaser-headline{ font-family:var(--f-head); font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.05; color:var(--aun-cream); margin:0 0 var(--sp-sm); letter-spacing:-.01em; } .clubs-teaser-list{ list-style:none; padding:0; margin:0 0 var(--sp-md); display:flex; flex-direction:column; gap:.5rem; } .clubs-teaser-list li{ font-family:var(--f-body); font-size:.95rem; color:rgba(254,253,249,.75); line-height:1.4; padding-left:1.2rem; position:relative; } .clubs-teaser-list li::before{ content:'→'; position:absolute; left:0; color:var(--aun-green); font-family:var(--f-head); font-weight:800; } .clubs-teaser-aside{ display:flex; flex-direction:column; gap:var(--sp-md); } .clubs-teaser-stat{display:flex;flex-direction:column;gap:.2rem;border-left:2px solid var(--aun-green);padding-left:var(--sp-sm);} .clubs-stat-num{ font-family:var(--f-head); font-size:2.2rem; font-weight:900; color:var(--aun-green); line-height:1; } .clubs-stat-label{ font-family:var(--f-body); font-size:.8rem; color:rgba(254,253,249,.5); line-height:1.3; } /* ── HOMEPAGE ADDITIONS v2 — phone UI wireframe + lw-row + btn-ghost-cream —— */ /* Countdown row layout */ .lw-row{display:flex;align-items:baseline;gap:0;} /* Phone UI wireframe */ .phone-ui-frame{ position:absolute; top:60px;left:12px;right:12px;bottom:20px; display:flex;flex-direction:column;gap:10px; overflow:hidden; } .pui-pill{ font-family:var(--f-head);font-size:.62rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:rgba(254,253,249,.55); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-pill); padding:4px 10px; align-self:flex-start; } .pui-card{ background:rgba(254,253,249,.08); border:1px solid rgba(254,253,249,.14); border-radius:14px; padding:12px; display:flex;flex-direction:column;gap:5px; } .pui-card--dim{ background:rgba(254,253,249,.04); border-color:rgba(254,253,249,.07); opacity:.7; } .pui-badge{ font-family:var(--f-head);font-size:.58rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase; color:var(--aun-green); background:rgba(37,68,58,.35); border:1px solid rgba(37,68,58,.5); border-radius:4px; padding:2px 7px; align-self:flex-start; } .pui-badge--dim{color:rgba(254,253,249,.4);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);} .pui-club{ font-family:var(--f-head);font-size:.85rem;font-weight:800; color:var(--aun-cream);letter-spacing:.01em;text-transform:uppercase; line-height:1.1; } .pui-detail{ font-family:var(--f-body);font-size:.68rem;color:rgba(254,253,249,.6); } .pui-level{ font-family:var(--f-body);font-size:.65rem;color:rgba(254,253,249,.45); } .pui-btn{ margin-top:6px; background:var(--aun-coral); color:var(--aun-ink); border:none; border-radius:8px; font-family:var(--f-head);font-size:.72rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase; padding:8px 12px; cursor:pointer; align-self:stretch; text-align:center; } /* Ghost button on dark backgrounds (clubs teaser) */ .btn-ghost-cream{ background:transparent; color:var(--aun-cream); border:1.5px solid rgba(254,253,249,.5); } .btn-ghost-cream:hover{ border-color:var(--aun-cream); background:rgba(254,253,249,.06); } /* Fix: mobile nav logo border-radius to match desktop proportions */ @media (max-width: 480px) { .nav-logo img { border-radius: 7px; } }