/* ============================================================= Naya Basta — nayabasta.com Parent-first consumer landing page. Design system extends the live app identity (warm navy + terracotta + green), not the formal print-deck house style. ============================================================= */ /* ---------- fonts (self-hosted variable; latin + latin-ext for ₹) ---------- */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap; src:url(assets/fonts/fraunces-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap; src:url(assets/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap; src:url(assets/fonts/hanken-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap; src:url(assets/fonts/hanken-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} img,svg{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} ul{list-style:none} :focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px} /* ---------- tokens ---------- */ :root{ /* surfaces */ --paper:#FBFBF9; --paper-sand:#F4F2EA; --card:#FFFFFF; /* ink */ --ink:#14212E; --ink-muted:#5A6B7B; --ink-faint:#66727E; /* navy hero gradient (from the app) */ --navy-1:#0E1B29; --navy-2:#1B3A5C; --navy-grad:linear-gradient(152deg,#0E1B29 0%,#163150 52%,#1B3A5C 100%); /* terracotta = action + money/savings */ --terra:#BC5324; --terra-hover:#A8471C; --terra-ink:#9E4114; --terra-tint:#FBEADF; /* green = trust + delivered + verified */ --green:#177A4E; --green-tint:#E4F1EA; /* violet = live-tracking only */ --track-violet:#6C5CE0; --track-violet-tint:#EDEBFB; /* lines */ --hairline:#E7E3DA; --hairline-cool:#ECEEF1; /* on dark */ --on-navy:#FBFBF9; --on-navy-mut:#AEBCCB; --hairline-navy:rgba(255,255,255,.14); /* radii */ --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px; /* shadows (warm, navy-tinted) */ --e1:0 1px 2px rgba(14,27,41,.04),0 4px 12px rgba(14,27,41,.06); --e2:0 2px 6px rgba(14,27,41,.06),0 12px 32px rgba(14,27,41,.10); --e-phone:0 34px 74px -26px rgba(14,27,41,.42),0 8px 22px -12px rgba(14,27,41,.28); /* type */ --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; /* layout */ --container:1200px; --gutter:clamp(20px,5vw,48px); --phone-ar:620/1455; } /* ---------- base ---------- */ body{ font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; font-feature-settings:"tnum" 0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* `clip` contains the rotated phone mockups without creating a scroll container, which `hidden` does — and a scroll container on is what breaks the sticky header in iOS Safari. `hidden` first as the fallback for browsers without `clip`. */ overflow-x:hidden; overflow-x:clip; } /* ---------- type helpers ---------- */ /* A pure-vw slope leaves the floor dominating every phone width, so 320px and 430px get an identically sized headline. The offset keeps the small end at ~32px while letting it actually grow across the phone range. */ .display{font-family:var(--serif);font-optical-sizing:auto;font-weight:540; font-size:clamp(32px,4.8vw + 16px,68px);line-height:1.04;letter-spacing:-.02em;overflow-wrap:break-word} h2.section-title,.section-title{font-family:var(--serif);font-optical-sizing:auto;font-weight:520; font-size:clamp(32px,4.4vw,50px);line-height:1.07;letter-spacing:-.016em} h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(26px,3vw,34px); line-height:1.12;letter-spacing:-.01em} .eyebrow{font-family:var(--sans);font-weight:700;font-size:13px;line-height:1.2; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)} .eyebrow.on-navy{color:#D9B79C} .eyebrow.on-green{color:var(--green)} .lead{font-size:clamp(18px,2vw,20px);line-height:1.5;color:var(--ink-muted);max-width:52ch} p{max-width:68ch} .tnum{font-feature-settings:"tnum" 1} /* ---------- layout ---------- */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} section{position:relative} .section-pad{padding-block:clamp(64px,9vw,120px)} .bg-sand{background:var(--paper-sand)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px; padding:14px 24px;border-radius:var(--r-md);transition:background .17s ease,color .17s ease, border-color .17s ease,transform .09s ease,box-shadow .17s ease;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--terra);color:#fff;box-shadow:0 1px 2px rgba(14,27,41,.08),0 8px 20px -8px rgba(188,83,36,.5)} .btn-primary:hover{background:var(--terra-hover)} .btn-ghost{border:1.5px solid var(--hairline);color:var(--ink);background:var(--card)} .btn-ghost:hover{border-color:var(--ink);background:#fff} .btn-lg{padding:16px 30px;font-size:17px} .btn .arrow{transition:transform .2s cubic-bezier(.16,1,.3,1)} .btn:hover .arrow{transform:translateX(3px)} .btn-onnavy{background:#fff;color:var(--navy-1)} .btn-onnavy:hover{background:var(--on-navy)} .btn-onnavy-ghost{border:1.5px solid var(--hairline-navy);color:var(--on-navy)} .btn-onnavy-ghost:hover{border-color:var(--on-navy)} /* ---------- header ---------- */ #top-sentinel{position:absolute;top:0;left:0;height:1px;width:1px} .site-header{position:sticky;top:0;z-index:100; background:rgba(251,251,249,.86); background:color-mix(in srgb,var(--paper) 86%,transparent); -webkit-backdrop-filter:saturate(1.15) blur(10px);backdrop-filter:saturate(1.15) blur(10px); border-bottom:1px solid transparent;transition:border-color .25s ease,padding .25s ease,background .25s ease} .site-header.is-stuck{border-bottom-color:var(--hairline)} .header-inner{display:flex;align-items:center;justify-content:space-between; padding-block:18px;transition:padding-block .25s ease} .site-header.is-stuck .header-inner{padding-block:11px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:540; font-size:22px;letter-spacing:-.01em;color:var(--ink)} .brand svg{width:30px;height:30px;flex:none} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:15px;font-weight:500;color:var(--ink-muted);transition:color .15s ease;position:relative} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px; background:var(--terra);transition:right .2s cubic-bezier(.16,1,.3,1)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{right:0} .header-cta{display:flex;align-items:center;gap:16px} .menu-toggle{display:none} :where(section,footer)[id],.anchor{scroll-margin-top:88px} /* ---------- hero ---------- */ .hero{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden} .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px);align-items:center} .hero-copy{max-width:600px} .hero .display{margin-top:22px} .hero .lead{margin-top:22px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .trust-strip{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px; padding-top:24px;border-top:1px solid var(--hairline)} .trust-item{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--ink-muted)} .trust-item svg{width:19px;height:19px;color:var(--green);flex:none} /* phone stage (hero) */ .phone-stage{position:relative;display:flex;justify-content:center;align-items:center; min-height:520px} .phone-stage::before{content:"";position:absolute;width:78%;height:78%; background:radial-gradient(closest-side,rgba(27,58,92,.14),transparent 72%); filter:blur(6px);z-index:0} .phone{position:relative;padding:8px;border-radius:42px; background:linear-gradient(150deg,#2c3644 0%,#151d28 48%,#0b1017 100%); box-shadow:var(--e-phone);z-index:2} .phone::after{content:"";position:absolute;inset:3px;border-radius:39px; border:1px solid rgba(255,255,255,.06);pointer-events:none} .phone img{display:block;width:100%;height:auto;aspect-ratio:var(--phone-ar); object-fit:cover;border-radius:34px;background:#EEEDEA} .phone-hero{width:min(300px,72%);rotate:-3.5deg} .phone-twin{position:absolute;width:min(258px,62%);transform:rotate(6deg) translate(30%,7%); z-index:1;opacity:.94;box-shadow:var(--e2)} /* float animation (gated by reduced-motion) */ @keyframes float-y{0%,100%{translate:0 0}50%{translate:0 -7px}} @keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} /* Card-placed phones (feature rows, steps, year shop): a gentle perpetual float. These phones carry no static transform of their own (unlike the rotated hero/partner phones, which float via JS), so animating .phone transform directly is safe. Each is offset so the page does not bob in unison. */ .feature-media .phone, .year-media .phone, .step .phone{animation:float-soft 6.5s ease-in-out infinite;will-change:transform} .feature.flip .feature-media .phone{animation-delay:-2.2s} .feature.track .feature-media .phone{animation-delay:-3.6s} .year-media .phone{animation-delay:-1.4s} .step:nth-child(2) .phone{animation-delay:-1.6s} .step:nth-child(3) .phone{animation-delay:-3.1s} /* A soft light sweep across the screen the first time a card phone scrolls into view. */ .feature-media.is-revealed .phone::before, .year-media.is-revealed .phone::before, .step.is-revealed .phone::before{content:"";position:absolute;inset:8px;border-radius:34px; z-index:3;pointer-events:none; background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.30) 50%,transparent 64%); background-size:220% 100%;animation:sheen 1.25s ease-out .4s 1 both} .step.is-revealed .phone::before{inset:6px;border-radius:28px} @keyframes sheen{from{background-position:150% 0}to{background-position:-80% 0}} /* ---------- how it works (stepped columns) ---------- */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,60px)} .step{padding:0 clamp(20px,2.6vw,36px)} .step+.step{border-left:1px solid var(--hairline)} .step-idx{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--terra-ink); font-feature-settings:"tnum" 1} .step{display:flex;flex-direction:column} .step h3{margin-top:12px;font-size:clamp(22px,2.2vw,26px)} .step p{margin-top:10px;font-size:16px;color:var(--ink-muted);max-width:34ch} .step-shot{margin-top:26px} .steps .step-shot{margin-top:auto;padding-top:26px} .step .phone{box-shadow:var(--e2);padding:6px;border-radius:34px} .step .phone::after{border-radius:31px} .step .phone img{border-radius:28px} .step .phone{width:100%;max-width:236px;margin-inline:auto} /* ---------- feature rows (zig-zag) ---------- */ .feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px);align-items:center} .feature.flip .feature-media{order:-1} .feature-copy{max-width:520px} .feature-copy .section-title{margin-top:18px} .feature-copy p{margin-top:18px;color:var(--ink-muted)} .feature-list{margin-top:24px} .feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px; padding:12px 0;border-top:1px solid var(--hairline);color:var(--ink)} .feature-list li:last-child{border-bottom:1px solid var(--hairline)} .feature-list .tick{color:var(--ink-faint);flex:none;margin-top:2px;width:19px;height:19px} #trust .feature-list .tick{color:var(--green)} .feature-media{position:relative;display:flex;justify-content:center} .feature-media .phone{width:min(300px,74%)} /* live-track section = violet accent only; a single soft glow marks it as the one focal row */ .feature.track .eyebrow{color:var(--track-violet)} .feature.track .feature-media::before{content:"";position:absolute;width:72%;height:66%;border-radius:50%; background:radial-gradient(closest-side,rgba(108,92,224,.16),transparent 70%);z-index:0} .feature.track .badge-eta{position:absolute;z-index:3;top:14%;right:6%;background:#fff; border-radius:var(--r-pill);box-shadow:var(--e2);padding:9px 15px 9px 12px;display:flex; align-items:center;gap:9px;font-weight:600;font-size:14px} .feature.track .badge-eta .dot{width:9px;height:9px;border-radius:50%;background:var(--track-violet)} /* ---------- year-round shop ---------- */ .year{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(32px,5vw,72px);align-items:center} .year-copy{max-width:560px} .year-copy p{margin-top:18px;color:var(--ink-muted)} .calendar-rail{margin-top:30px;display:flex;flex-direction:column;gap:0} .cal-row{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline; padding:14px 0;border-top:1px solid var(--hairline)} .cal-row:last-child{border-bottom:1px solid var(--hairline)} .cal-when{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)} .cal-what{font-size:16.5px;color:var(--ink);font-weight:500} .cal-what span{display:block;font-weight:400;font-size:14px;color:var(--ink-muted);margin-top:2px} .year-media{position:relative;display:flex;justify-content:center} .year-media .phone{width:min(280px,72%)} .year-media::before{content:"";position:absolute;width:74%;height:70%;border-radius:50%; background:radial-gradient(closest-side,rgba(188,83,36,.1),transparent 70%);z-index:0} /* ---------- partner navy band ---------- */ .partner{background:var(--navy-grad);color:var(--on-navy);overflow:hidden;position:relative} .partner::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 82% 20%,rgba(27,58,92,.55),transparent 60%);pointer-events:none} .partner .container{position:relative;z-index:1} .partner-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,5vw,72px);align-items:center} .partner-copy{max-width:560px} .partner .section-title{color:var(--on-navy);margin-top:18px} .partner-deck{margin-top:20px;font-size:19px;line-height:1.5;color:var(--on-navy);max-width:46ch} .partner-copy p.sub{margin-top:16px;color:var(--on-navy-mut);font-size:16.5px} .partner-keep{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .keep-chip{border:1px solid var(--hairline-navy);border-radius:var(--r-pill); padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--on-navy)} .stat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px} .stat-tile{border:1px solid var(--hairline-navy);border-radius:var(--r-lg);padding:18px 16px; background:rgba(255,255,255,.03)} .stat-tile .n{font-family:var(--sans);font-weight:800;font-feature-settings:"tnum" 1; font-size:clamp(26px,3.4vw,36px);line-height:1;letter-spacing:-.01em} .stat-tile .n.hot{color:#E8996B} .stat-tile .c{margin-top:8px;font-size:13px;color:var(--on-navy-mut);line-height:1.35} .partner-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} .partner-media{position:relative;display:flex;justify-content:center;min-height:480px;align-items:center} .partner-media::before{content:"";position:absolute;width:82%;height:70%; background:radial-gradient(closest-side,rgba(232,153,107,.22),transparent 72%);filter:blur(4px)} .partner-media .phone-main{width:min(290px,72%);rotate:3deg;z-index:2} .partner-media .phone-back{position:absolute;width:min(232px,58%);transform:rotate(-6deg) translate(-34%,10%); z-index:1;opacity:.9;box-shadow:var(--e2)} .partner :focus-visible{outline-color:#8FB4D9} /* ---------- schools divider ---------- */ .schools{background:var(--navy-1);color:var(--on-navy);text-align:center; padding-block:clamp(52px,7vw,86px)} .schools .eyebrow{color:#8FB4D9;justify-content:center} .schools p{max-width:24ch;margin:16px auto 0;font-family:var(--serif);font-weight:400; font-size:clamp(26px,3.4vw,38px);line-height:1.22;letter-spacing:-.01em;color:var(--on-navy)} .schools a.link{display:inline-flex;align-items:center;gap:8px;margin-top:26px; font-weight:600;font-size:16px;color:#8FB4D9} .schools a.link:hover{color:#fff} .schools :focus-visible{outline-color:#8FB4D9} /* ---------- final CTA ---------- */ .final{text-align:center} .final .container{background:var(--paper-sand);border:1px solid var(--hairline); border-radius:var(--r-2xl);padding:clamp(48px,7vw,84px) clamp(24px,5vw,64px)} .final .section-title{max-width:16ch;margin:14px auto 0} .final .lead{margin:18px auto 0;text-align:center;max-width:52ch} .pill-soon{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans); font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--green); background:var(--green-tint);border-radius:var(--r-pill);padding:8px 16px} .pill-soon .ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none} .pill-soon .ping::before{content:"";position:absolute;inset:0;border-radius:50%; background:var(--green);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite} @keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}} .waitlist{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:32px auto 0;max-width:520px} .waitlist input{flex:1 1 240px;min-width:0;font:inherit;font-size:16px;color:var(--ink); background:var(--card);border:1.5px solid var(--hairline);border-radius:var(--r-md); padding:14px 18px;transition:border-color .17s ease,box-shadow .17s ease} .waitlist input::placeholder{color:var(--ink-faint)} .waitlist input:focus-visible{outline:none;border-color:var(--terra); box-shadow:0 0 0 3px rgba(188,83,36,.16)} .waitlist .btn{flex:0 0 auto} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .waitlist-msg{flex:1 1 100%;margin:4px 0 0;font-size:15px;font-weight:500;text-align:center} .waitlist-msg.is-ok{color:var(--green)} .waitlist-msg.is-err{color:var(--terra-ink)} .waitlist-note{margin:18px auto 0;font-size:14px;color:var(--ink-muted);max-width:46ch} .waitlist-note a{color:var(--terra-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .store-badges{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px} .store-badge{display:inline-flex;align-items:center;gap:11px;background:var(--navy-1);color:#fff; border-radius:var(--r-md);padding:11px 20px;transition:transform .09s ease,background .17s ease} .store-badge:hover{background:#0a141f} .store-badge:active{transform:translateY(1px)} .store-badge svg{width:24px;height:24px;flex:none} .store-badge .sb-sm{display:block;font-size:11px;line-height:1.15;opacity:.8} .store-badge .sb-lg{display:block;font-size:17px;font-weight:600;line-height:1.2} .store-badge .sb-txt{display:block;text-align:left} /* ---------- footer ---------- */ .site-footer{background:var(--paper-sand);border-top:1px solid var(--hairline); padding-block:clamp(48px,6vw,72px) 32px} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px} .footer-brand .brand{margin-bottom:14px} .footer-brand p{font-size:14.5px;color:var(--ink-muted);max-width:34ch} .footer-brand .addr{margin-top:14px;font-size:14px;line-height:1.7;color:var(--ink-muted)} .footer-brand .addr a{color:var(--ink);font-weight:500} .footer-col h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px} .footer-col li{margin-bottom:10px} .footer-col a{font-size:15px;color:var(--ink-muted);transition:color .15s ease} .footer-col a:hover{color:var(--ink)} .footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between; align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--hairline); font-size:13.5px;color:var(--ink-faint)} .footer-bottom .promise{display:flex;align-items:center;gap:9px;color:var(--green)} .footer-bottom .promise svg{width:17px;height:17px} /* ---------- reveal animation ---------- */ .reveal{transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)} .reveal.js-armed{opacity:0;transform:translateY(18px)} .reveal.is-revealed{opacity:1;transform:none} /* ============================================================= Responsive ============================================================= */ @media (max-width:1024px){ .hero-grid{grid-template-columns:minmax(0,1fr);gap:48px} .hero-copy{max-width:640px} .phone-stage{min-height:auto} .partner-grid{grid-template-columns:minmax(0,1fr);gap:48px} .partner-media{min-height:auto;order:-1} .year{grid-template-columns:minmax(0,1fr);gap:44px} } @media (max-width:820px){ .nav-links{ position:fixed;inset:0 0 auto;top:0;flex-direction:column;align-items:flex-start;gap:6px; background:var(--paper);padding:88px var(--gutter) 32px;border-bottom:1px solid var(--hairline); transform:translateY(-102%);visibility:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1),visibility .3s; box-shadow:var(--e2);z-index:-1; /* The panel is fixed, so anything past the viewport bottom is unreachable — on a landscape phone the last link fell off. */ max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain} .nav-links.open{transform:translateY(0);visibility:visible} .nav-links a{font-size:20px;padding:12px 0;color:var(--ink)} .nav-links a::after{display:none} .menu-toggle{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--r-sm);color:var(--ink);z-index:2} .header-cta .btn:not(.menu-toggle){display:none} .feature{grid-template-columns:minmax(0,1fr);gap:40px} .feature.flip .feature-media{order:0} .feature-media{order:-1} .feature-copy{max-width:640px} .steps{grid-template-columns:minmax(0,1fr);gap:0} .step{padding:32px 0} .step+.step{border-left:none;border-top:1px solid var(--hairline)} .step .phone{max-width:210px} .stat-tiles{grid-template-columns:1fr 1fr 1fr;gap:10px} .footer-top{grid-template-columns:1fr;gap:32px} } @media (max-width:520px){ body{font-size:16px} .hero-actions .btn{flex:1 1 auto;justify-content:center} .stat-tiles{grid-template-columns:1fr;gap:10px} .stat-tile{display:flex;align-items:baseline;gap:14px} .stat-tile .c{margin-top:0} .cal-row{grid-template-columns:1fr;gap:6px} .cal-when{grid-column:1/-1} .footer-bottom{flex-direction:column;align-items:flex-start} } /* Landscape phones: the panel's generous top padding costs height it does not have, and the menu is the only way to navigate at this width. */ @media (max-width:820px) and (max-height:500px){ .nav-links{padding-top:66px;padding-bottom:20px} .nav-links a{font-size:17px;padding:9px 0} .header-inner{padding-block:12px} } /* Touch devices: links sized for a mouse sit under the 24px WCAG 2.5.8 minimum — the footer phone and email were 18px tall. Scoped to coarse pointers so the desktop rhythm is untouched. */ @media (pointer:coarse){ .footer-col a{display:inline-block;padding-block:11px} .footer-col li{margin-bottom:0} .footer-brand .addr a{display:inline-block;padding-block:8px} .schools a.link{padding-block:10px} .waitlist-note a{display:inline-block;padding-block:6px} } /* ---------- reduced motion backstop ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal,.reveal.js-armed{opacity:1!important;transform:none!important} .phone-hero,.phone-main{animation:none!important} }