/* ========================================================= Little Technical Solutions — Stylesheet Design tokens ========================================================= */ :root{ /* Color */ --paper: #EEF1F5; --paper-alt: #FFFFFF; --ink: #14213D; --ink-soft: #47567A; --ink-faint: #616F8C; --line: #CBD3E0; --line-strong: #9FADC4; --accent-orange: #FF6B35; --accent-orange-dark: #E4552150; --accent-teal: #2EC4B6; --navy-deep: #0B1830; --navy-mid: #14213D; /* Fixed light text for permanently-dark sections (hero, footer, CTAs). Deliberately NOT redefined in dark mode — these sections are always dark navy regardless of site theme, so their text must always stay light. */ --on-dark: #EEF1F5; /* Readable variants of the accent colors, for use as small/bare TEXT on adaptive light backgrounds — the vivid --accent-orange/--accent-teal stay reserved for buttons, backgrounds, and icons on dark sections, where the vivid, brighter tone is both correct and legible. */ --accent-orange-text: #C44D1F; --accent-teal-text: #0A7A6D; /* Selected/checked state (checkboxes, radios) — teal-based, kept visually distinct from both the orange CTA color and the red error color below, so "chosen" and "wrong" never look alike. */ --select-bg: #E8F8F5; --select-border: #2EC4B6; /* Error / missing-field state — a genuine red, adaptive so text stays readable against it in both themes. */ --error-bg: #FDECEA; --error-border: #D93F3F; --error-text: #A32E2E; /* Type */ --font-display: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --wrap: 1180px; --radius: 4px; --header-h: 76px; } /* Dark mode overrides — applied when is set. Only tokens that should visually adapt are redefined here. Fixed dark accents (--navy-deep, --navy-mid) and the brand accents stay stable across both themes so hero/footer/CTA sections don't shift. */ :root[data-theme="dark"]{ --paper: #0E1526; --paper-alt: #172038; --ink: #EDF1F7; --ink-soft: #B7C0D6; --ink-faint: #8994B3; --line: #2A3550; --line-strong: #3C4A6B; --accent-orange: #FF7B4D; --accent-teal: #3DDBC9; --accent-orange-text: #FF7B4D; --accent-teal-text: #3DDBC9; --select-bg: #0F332E; --select-border: #3DDBC9; --error-bg: #3A1B18; --error-border: #FF6B5C; --error-text: #FF9A8C; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body{ margin:0; font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } img{ max-width:100%; display:block; } ul{ margin:0; padding:0; list-style:none; } a{ color: inherit; text-decoration: none; } h1,h2,h3{ font-family: var(--font-display); margin: 0; line-height: 1.15; letter-spacing: -0.01em; } p{ margin:0; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .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; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--navy-mid); color:#fff; padding:.75rem 1.25rem; z-index:200; border-radius:0 0 var(--radius) 0; } .skip-link:focus{ left:0; } :focus-visible{ outline: 2px solid var(--accent-orange); outline-offset: 3px; } .wrap{ width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } /* ========================================================= Buttons ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .01em; padding: .85rem 1.5rem; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .btn-primary{ background: var(--accent-orange); color: #1A0E06; } .btn-primary:hover{ transform: translateY(-1px); background:#FF7B4D; } .btn-ghost{ background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn-ghost:hover{ border-color: var(--ink); } .btn-block{ width:100%; } .btn-small{ padding: .55rem 1.1rem; font-size:.8rem; } /* ========================================================= Header ========================================================= */ .site-header{ position: sticky; top:0; z-index:100; height: var(--header-h); display:flex; align-items:center; background: rgba(238,241,245,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } :root[data-theme="dark"] .site-header{ background: rgba(14,21,38,0.85); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .logo{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; } .logo-mark{ display:flex; align-items:center; } .logo-mark img{ display:block; width:40px; height:40px; object-fit:contain; } .logo-text{ display:flex; flex-direction:column; line-height:1.05; } .logo-line1{ font-family: var(--font-display); font-weight:600; font-size:.95rem; line-height:1.3; } .logo-line2{ font-family: var(--font-display); font-weight:600; font-size:.95rem; color: var(--accent-orange); line-height:1.3; } .logo-llc{ font-size:.68rem; font-weight:500; color: var(--ink-faint); vertical-align: 1px; } .main-nav{ display:flex; gap: 2rem; font-size:.92rem; font-weight:500; } .main-nav a{ position:relative; padding: .25rem 0; } .main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--accent-orange); transform: scaleX(0); transform-origin:left; transition: transform .2s ease; } .main-nav a:hover::after{ transform: scaleX(1); } .main-nav a.is-active{ color: #A83E1A; } .main-nav a.is-active::after{ transform: scaleX(1); background: var(--accent-orange); } :root[data-theme="dark"] .main-nav a.is-active{ color: var(--accent-orange-text); } .is-current-page{ cursor: not-allowed; } .header-actions a.btn.is-current-page{ pointer-events: none; opacity: .6; } .header-actions a.btn.is-current-page:hover{ transform:none; } .header-actions{ display:flex; align-items:center; gap:1.25rem; } .phone-link{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-size:.85rem; font-weight:500; white-space:nowrap; } .theme-toggle{ display:flex; align-items:center; justify-content:center; width: 36px; height: 36px; border-radius:50%; border: 1px solid var(--line-strong); background: var(--paper-alt); color: var(--ink); cursor:pointer; flex-shrink:0; transition: background .2s ease, border-color .2s ease, color .2s ease; } .theme-toggle:hover{ border-color: var(--accent-orange); color: var(--accent-orange); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .theme-icon-sun{ display:none; } .theme-toggle .theme-icon-moon{ display:block; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun{ display:block; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon{ display:none; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; } .nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; } /* ========================================================= Hero ========================================================= */ .hero{ position:relative; background: var(--navy-deep); color: var(--on-dark); overflow:hidden; padding: 5rem 0 4rem; } .hero-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, black 10%, transparent 70%); } .hero-inner{ position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:center; } .vet-badge{ display:inline-flex; align-items:center; gap:.4rem; font-family: var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--navy-deep); background: var(--accent-teal); padding:.4rem .7rem; border-radius: 3px; margin-bottom: 1.1rem; } .eyebrow{ font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-teal); margin-bottom: 1rem; font-weight:600; } .hero h1{ font-size: clamp(2.1rem, 4.1vw, 3.2rem); font-weight:600; color:#fff; } .accent-dot{ color: var(--accent-orange); } .hero-rotator{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-top: 1.1rem; font-family: var(--font-display); font-size:1.05rem; font-weight:500; color: rgba(238,241,245,0.65); } .rotator-slot{ display:inline-block; overflow:hidden; height:1.4em; vertical-align:bottom; } .rotator-word{ display:inline-block; color: var(--accent-teal); font-weight:700; animation: rotator-in .5s ease; } @keyframes rotator-in{ from{ opacity:0; transform: translateY(60%); } to{ opacity:1; transform: translateY(0); } } .rotator-word.is-leaving{ animation: rotator-out .35s ease forwards; } @keyframes rotator-out{ to{ opacity:0; transform: translateY(-60%); } } .hero-lede{ margin-top:1.25rem; font-size: 1.08rem; color: rgba(238,241,245,0.78); max-width: 46ch; } .hero-actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; } .hero .btn-ghost{ border-color: rgba(238,241,245,0.35); color:#fff; } .hero .btn-ghost:hover{ border-color:#fff; } .hero-stats{ display:flex; gap: 2.25rem; margin: 2.75rem 0 0; padding-top: 1.75rem; border-top: 1px solid rgba(238,241,245,0.15); flex-wrap:wrap; } .hero-stats dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(238,241,245,0.55); margin-bottom:.35rem; } .hero-stats dd{ margin:0; font-family:var(--font-display); font-size:.92rem; font-weight:600; } .hero-diagram{ position:relative; transition: transform .2s ease-out; transform-style: preserve-3d; will-change: transform; } .network-svg{ width:100%; height:auto; overflow:visible; } /* Scroll reveal */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); } .reveal.is-visible{ opacity:1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } .net-lines line{ stroke: rgba(238,241,245,0.18); stroke-width:1.5; } .net-node circle{ fill: var(--navy-mid); stroke: rgba(238,241,245,0.35); stroke-width:1.5; } .net-node text{ font-family: var(--font-display); font-size:12px; font-weight:600; fill: var(--on-dark); letter-spacing:.02em; } .net-node--center circle{ fill: var(--accent-orange); stroke: var(--accent-orange); } .net-node--center text{ fill: #1A0E06; font-size:14px; } .pulse{ fill: var(--accent-teal); filter: drop-shadow(0 0 4px var(--accent-teal)); } /* ========================================================= Trust strip ========================================================= */ .trust-strip{ background: var(--navy-mid); color: rgba(238,241,245,0.85); padding: .9rem 0; } .trust-strip-inner{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.6rem; font-family: var(--font-display); font-size:.8rem; letter-spacing:.03em; } .trust-strip .sep{ color: var(--accent-orange); } /* ========================================================= Section shared ========================================================= */ section{ padding: 5.5rem 0; } .section-head{ max-width: 640px; margin-bottom: 3rem; } .section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top:.6rem; font-weight:600; } .section-lede{ margin-top: 1rem; color: var(--ink-soft); font-size: 1.02rem; max-width: 56ch; } /* ========================================================= Services — ticket cards ========================================================= */ .ticket-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .ticket{ position:relative; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.6rem 1.9rem; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ticket:hover, .ticket:focus-within{ transform: translateY(-6px); box-shadow: 0 16px 32px rgba(20,33,61,0.1); border-color: var(--accent-orange); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease; } .ticket-expand-hint{ position:absolute; top: 1.5rem; right: 1.5rem; width: 22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--ink-faint); font-size: 1rem; font-weight:700; transition: transform .3s ease, color .2s ease; } .ticket.is-open .ticket-expand-hint{ transform: rotate(45deg); color: var(--accent-orange-text); } .ticket-detail{ max-height:0; overflow:hidden; opacity:0; transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease; font-size:.88rem; color: var(--ink-soft); border-top: 1px dashed var(--line); } .ticket.is-open .ticket-detail{ max-height: 140px; opacity:1; margin-top: 1rem; padding-top: .9rem; } .ticket::before{ content:""; position:absolute; top:0; left:0; right:0; height:0; border-top: 2px dashed var(--line-strong); } .ticket-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; } .ticket-code{ font-family: var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.06em; color: #B8451D; background: #FFF1EA; padding:.25rem .55rem; border-radius: 3px; } .ticket-icon{ width:22px; height:22px; color: var(--ink-faint); } .ticket h3{ font-size: 1.15rem; font-weight:600; margin-bottom: .9rem; } .ticket ul li{ position:relative; padding-left: 1.1rem; margin-bottom:.55rem; font-size:.92rem; color: var(--ink-soft); } .ticket ul li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; background: var(--accent-teal); border-radius:50%; } .ticket--wide{ grid-column: span 3; } .ul-columns{ display:grid; grid-template-columns: repeat(3, 1fr); column-gap:2rem; } /* ========================================================= Website showcase — before/after compare slider ========================================================= */ .showcase{ background: var(--paper); } .compare{ position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(20,33,61,0.16); border: 1px solid var(--line); user-select: none; cursor: ew-resize; touch-action: none; transition: filter .25s ease; } :root[data-theme="dark"] .compare{ filter: brightness(0.82) saturate(0.92); } :root[data-theme="dark"] .compare{ box-shadow: 0 24px 60px rgba(0,0,0,0.45); } .compare-frame{ position:absolute; inset:0; } .compare-after{ z-index:1; } .compare-before{ z-index:2; clip-path: inset(0 50% 0 0); border-right: 2px solid var(--paper-alt); } .mock-browser{ width:100%; height:100%; background:#fff; display:flex; flex-direction:column; } .mock-chrome{ display:flex; gap:6px; padding:.6rem .8rem; background:#E4E8EF; flex-shrink:0; } .mock-chrome span{ width:9px; height:9px; border-radius:50%; background:#C3CADA; } .mock-page{ flex:1; overflow:hidden; position:relative; } /* AFTER — clean, on-brand mockup */ .mock-page--after{ background: #EEF1F5; padding: 14px 18px; } .mock-nav{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .mock-logo{ font-family: var(--font-display); font-weight:700; font-size:.7rem; color: #14213D; } .mock-nav .mock-link{ width:34px; height:6px; border-radius:3px; background: #9FADC4; } .mock-nav .mock-cta{ margin-left:auto; padding: 5px 12px; border-radius:3px; background: var(--accent-orange); font-size:.6rem; color:#1A0E06; font-family: var(--font-display); font-weight:700; } .mock-hero{ display:flex; gap:14px; align-items:center; margin-bottom:16px; } .mock-hero-text{ flex:1.2; display:flex; flex-direction:column; gap:8px; } .mock-line{ display:block; height:9px; border-radius:3px; background: #14213D; opacity:.85; } .mock-line--lg{ width:85%; height:13px; } .mock-line--md{ width:60%; opacity:.4; } .mock-btn{ width:70px; height:16px; border-radius:3px; background: var(--accent-orange); margin-top:4px; } .mock-hero-art{ flex:1; aspect-ratio:1; border-radius:8px; background: linear-gradient(135deg, var(--accent-teal), var(--navy-mid)); } .mock-cards{ display:flex; gap:10px; } .mock-cards .mock-card{ flex:1; height:44px; border-radius:5px; background:#fff; border:1px solid #CBD3E0; } /* BEFORE — dated, cluttered mockup */ .mock-page--before{ background:#F4F1E4; padding:10px 12px; font-family: Georgia, serif; } .mock-nav--before{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; } .mock-logo--before{ font-size:.7rem; color:#5a4a1c; font-weight:700; margin-right:6px; } .mock-link--before{ width:26px; height:6px; background:#8a94a6; border-radius:1px; } .mock-banner-before{ background: repeating-linear-gradient(45deg, #FFD400, #FFD400 8px, #FF3B3B 8px, #FF3B3B 16px); color:#fff; font-weight:700; font-size:.55rem; text-align:center; padding:6px 4px; margin-bottom:10px; text-shadow: 1px 1px 0 #000; letter-spacing:.02em; } .mock-body-before{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; } .mock-line-before{ display:block; height:7px; width:90%; background:#9aa0ad; } .mock-line-before--lg{ height:11px; width:95%; background:#333; } .mock-btn-before{ margin-top:6px; padding:6px 14px; background:#39B54A; color:#fff; font-weight:700; font-size:.6rem; border:2px outset #6fdc7f; } .mock-footer-before{ margin-top:auto; height:14px; background:#333; } .compare-tag{ position:absolute; top:12px; font-family: var(--font-display); font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .6rem; border-radius:3px; z-index:3; } .compare-tag--after{ right:12px; background: var(--accent-teal); color: var(--navy-deep); } .compare-tag--before{ left:12px; background:#333; color:#fff; } .compare-handle{ position:absolute; top:0; bottom:0; left:50%; z-index:4; width: 3px; background: var(--paper-alt); transform: translateX(-50%); display:flex; align-items:center; justify-content:center; cursor: ew-resize; } .compare-handle-grip{ width:38px; height:38px; border-radius:50%; background: var(--accent-orange); color:#1A0E06; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 16px rgba(20,33,61,0.3); } .compare-handle:focus-visible .compare-handle-grip{ outline: 3px solid var(--navy-deep); outline-offset:2px; } /* ========================================================= How it works ========================================================= */ .how{ background: var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; counter-reset: step; list-style:none; padding:0; margin:0; } .steps li{ position:relative; padding-top: 3.25rem; } .step-num{ position:absolute; top:0; left:0; font-family: var(--font-display); font-size:1.6rem; font-weight:700; color: #fff; background: var(--navy-mid); width:2.4rem; height:2.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; } .steps h3{ font-size:1.02rem; margin-bottom:.5rem; } .steps p{ font-size:.92rem; color: var(--ink-soft); } .steps li:not(:last-child)::after{ content:""; position:absolute; top:1.2rem; left:3.2rem; right:-1.75rem; height:1px; background: var(--line); } @media (max-width: 900px){ .steps li::after{ display:none; } } /* ========================================================= Why us ========================================================= */ .why-inner{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items:start; } .why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .why-card{ background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .why-card h3{ font-size:1rem; margin-bottom:.5rem; font-weight:600; } .why-card p{ font-size:.9rem; color: var(--ink-soft); } /* ========================================================= Veteran-owned ========================================================= */ .veteran{ background: var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .veteran-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center; } .cred-list{ display:flex; flex-direction:column; gap:1rem; } .cred-card{ display:flex; align-items:flex-start; gap:.9rem; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .cred-card svg{ color: var(--accent-orange); flex-shrink:0; margin-top:.15rem; } .cred-card h3{ font-size:.95rem; font-weight:600; margin-bottom:.25rem; } .cred-card p{ font-size:.85rem; color: var(--ink-soft); } /* ========================================================= Stat strip (animated counters) ========================================================= */ .stat-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--line); } .stat-item{ text-align:left; } .stat-num, .stat-suffix{ font-family: var(--font-display); font-size: 2.2rem; font-weight:700; color: var(--ink); } .stat-suffix{ color: var(--accent-orange-text); } .stat-label{ display:block; margin-top:.4rem; font-size:.85rem; color: var(--ink-soft); max-width: 22ch; } /* ========================================================= Intake page ========================================================= */ .intake-hero{ background: var(--navy-deep); color: var(--on-dark); padding: 4rem 0 3rem; } .intake-hero .eyebrow{ color: var(--accent-teal); } .section-head .eyebrow, .why-copy .eyebrow, .veteran-copy .eyebrow{ color: var(--accent-teal-text); } .intake-hero h1{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); color:#fff; font-weight:600; margin-top:.6rem; } .intake-hero .section-lede{ color: rgba(238,241,245,0.75); margin-top:1rem; max-width: 62ch; } .intake-form-section{ padding: 3.5rem 0 5rem; } .intake-form{ max-width: 780px; margin: 0 auto; } .intake-block{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.75rem 2rem; margin-bottom: 1.5rem; } .intake-block-title{ display:flex; align-items:center; gap:.6rem; font-size: 1.05rem; font-weight:600; margin-bottom: 1.4rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--line); } .intake-block-num{ display:inline-flex; align-items:center; justify-content:center; width: 1.7rem; height: 1.7rem; border-radius:50%; background: var(--accent-orange); color:#1A0E06; font-family: var(--font-display); font-size:.85rem; font-weight:700; flex-shrink:0; } .intake-block-optional{ font-family: var(--font-body); font-weight:400; font-size:.8rem; color: var(--ink-faint); } .form-instructions{ display:flex; align-items:flex-start; gap:.7rem; background:#FFF8EE; border:1px solid #F3DDB0; color:#7A5A12; padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size:.88rem; line-height:1.55; } .form-instructions svg{ color:#B8451D; flex-shrink:0; margin-top:.15rem; } .form-instructions strong{ color:#5A3410; } .form-row--checkbox-trigger{ margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); } .form-row--checkbox-trigger .checkbox-pill{ align-items:flex-start; line-height:1.4; } /* Collapsible intake sections (Website Details / Gov Contracting) */ .intake-block--collapsible{ padding: 0; overflow:hidden; } .intake-block-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:none; border:none; cursor:pointer; text-align:left; color: inherit; font-family: inherit; padding: 1.75rem 1.75rem 1.4rem; } .intake-block--collapsible[data-active="true"] .intake-block-toggle{ padding-bottom: 1.4rem; } .intake-block-toggle-left{ display:flex; align-items:center; gap:.6rem; min-width:0; } .intake-block-title-text{ font-size: 1.05rem; font-weight:600; } .intake-block-toggle-right{ display:flex; align-items:center; gap:.8rem; flex-shrink:0; } .intake-block-status{ font-size:.76rem; color: var(--ink-faint); font-weight:400; max-width: 22ch; text-align:right; line-height:1.3; } .intake-block--collapsible[data-active="true"] .intake-block-status{ color: var(--accent-teal-text); font-weight:600; } .intake-chevron{ color: var(--ink-faint); flex-shrink:0; transition: transform .25s ease, color .2s ease; } .intake-block-toggle[aria-expanded="true"] .intake-chevron{ transform: rotate(180deg); color: var(--accent-orange-text); } .intake-block-content{ max-height:0; overflow:hidden; transition: max-height .3s ease; } .intake-block-content-inner{ padding: 0 1.75rem 2rem; border-top: 1px dashed var(--line); padding-top: 1.5rem; } /* Validation error states */ .form-row input.field-error, .form-row textarea.field-error{ border-color: var(--error-border); background: var(--error-bg); } [data-required].group-error{ outline: 2px solid var(--error-border); outline-offset: 4px; border-radius: var(--radius); } .form-note.form-note--missing{ display:none; background: var(--error-bg); border:1px solid var(--error-border); color: var(--error-text); padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.2rem; font-size:.88rem; line-height:1.6; } .form-note.form-note--missing.is-visible{ display:block; } .form-note--missing strong{ display:block; margin-bottom:.4rem; color: var(--error-text); } .form-note--missing ul{ margin: .4rem 0 0; padding-left: 1.2rem; } .form-note--missing li{ margin-bottom:.2rem; color: var(--error-text); } .checkbox-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; } .checkbox-pill, .radio-pill{ display:flex; align-items:center; gap:.5rem; padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size:.88rem; cursor:pointer; transition: border-color .15s ease, background .15s ease; } .checkbox-pill:has(input:checked), .radio-pill:has(input:checked){ border-color: var(--select-border); background: var(--select-bg); } .checkbox-pill input, .radio-pill input{ accent-color: var(--select-border); width:16px; height:16px; flex-shrink:0; } .radio-row{ display:flex; gap:.7rem; flex-wrap:wrap; } .form-row--split3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem; margin-bottom:1.1rem; } .form-row--split3 > div{ display:flex; flex-direction:column; gap:.5rem; } .form-row--split3 label{ margin-bottom:0; } @media (max-width: 700px){ .checkbox-grid{ grid-template-columns: 1fr 1fr; } .form-row--split3{ grid-template-columns: 1fr; } } @media (max-width: 480px){ .checkbox-grid{ grid-template-columns: 1fr; } } /* ========================================================= Pricing page ========================================================= */ .pricing-section{ padding: 3.5rem 0 5rem; } .launch-banner{ display:flex; align-items:flex-start; gap:.9rem; background: linear-gradient(135deg, #FFF1EA, #FFF8EE); border: 1px solid var(--accent-orange); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 2rem; } .launch-banner-icon{ display:flex; align-items:center; justify-content:center; width: 32px; height: 32px; border-radius:50%; flex-shrink:0; background: var(--accent-orange); color:#1A0E06; } .launch-banner p{ margin:0; font-size:.9rem; color:#7A4A1E; line-height:1.55; } .launch-banner strong{ color:#5A3410; } /* ========================================================= Subscriptions ========================================================= */ .sub-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; } .sub-card{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display:flex; flex-direction:column; min-width: 0; } .sub-card-head{ display:flex; align-items:center; gap:.8rem; margin-bottom: 1rem; } .sub-card-head h2{ font-size: 1.1rem; font-weight:600; margin:0; } .sub-card-desc{ font-size:.9rem; color: var(--ink-soft); line-height:1.6; margin-bottom: 1.4rem; } .sub-price{ display:flex; align-items:baseline; gap:.3rem; margin-bottom: 1.4rem; } .sub-price-amount{ font-family: var(--font-display); font-size: 2.2rem; font-weight:700; color: var(--ink); } .sub-price-period{ font-size:.9rem; color: var(--ink-faint); } .sub-card .pay-btn{ width:100%; text-align:center; } .sub-card .pay-vet-note{ margin-top:1.2rem; } @media (max-width: 820px){ .sub-grid{ grid-template-columns: 1fr; } } .do-i-qualify-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top: 1.6rem; padding: .8rem 1.4rem; background: var(--accent-orange); color:#1A0E06; border:none; border-radius: var(--radius); font-family: var(--font-display); font-weight:700; font-size:.92rem; cursor:pointer; transition: background .15s ease, transform .15s ease; } .do-i-qualify-btn:hover{ background:#FF7B4D; transform: translateY(-1px); } .do-i-qualify-btn svg{ animation: qualify-bounce 1.8s ease-in-out infinite; } @keyframes qualify-bounce{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } } .hero-groups{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2rem; scroll-margin-top: 100px; } .hero-groups-title{ font-size: 1.05rem; font-weight:600; margin-bottom: .4rem; } .hero-groups-subtitle{ font-size:.85rem; color: var(--ink-soft); margin-bottom: 1.3rem; } .hero-groups-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .hero-group-item{ display:block; width:100%; text-align:left; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor:pointer; overflow:hidden; font-family: inherit; color: inherit; transition: border-color .2s ease; } .hero-group-item:hover{ border-color: var(--accent-orange); } .hero-group-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding: .9rem 1rem; } .hero-group-item strong{ font-size:.9rem; color: var(--ink); } .hero-group-item strong small{ font-weight:400; color: var(--ink-soft); } .hero-group-chevron{ color: var(--ink-faint); flex-shrink:0; transition: transform .25s ease, color .2s ease; } .hero-group-item[aria-expanded="true"] .hero-group-chevron{ transform: rotate(180deg); color: var(--accent-orange-text); } .hero-group-detail{ display:block; max-height:0; overflow:hidden; transition: max-height .3s ease; } .hero-group-item[aria-expanded="true"] .hero-group-detail{ } .hero-group-thanks, .hero-group-verify{ display:block; font-size:.8rem; line-height:1.5; padding: 0 1rem; } .hero-group-thanks{ color: var(--ink-soft); font-style:italic; padding-bottom:.6rem; } .hero-group-verify{ color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top:.7rem; padding-bottom: 1rem; } .hero-group-verify strong{ color: var(--ink); font-style:normal; } @media (max-width: 900px){ .hero-groups-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .hero-groups-grid{ grid-template-columns: 1fr; } } /* ========================================================= Patch notes ========================================================= */ .patch-list{ max-width: 760px; margin: 0 auto; } .patch-entry{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.75rem; margin-bottom: 1.25rem; } .patch-entry-head{ display:flex; align-items:center; gap:.7rem; margin-bottom: 1rem; } .patch-version{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--ink); } .patch-version--current{ color: var(--accent-orange-text); } .patch-tag{ font-family: var(--font-display); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .55rem; border-radius:3px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); } .patch-tag--launch{ background:#FFF1EA; color:#B8451D; border-color:#F3C6A8; } .patch-changes{ list-style:none; margin:0; padding:0; } .patch-changes li{ position:relative; padding-left:1.2rem; margin-bottom:.6rem; font-size:.9rem; color: var(--ink-soft); line-height:1.55; } .patch-changes li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; background: var(--accent-teal); border-radius:50%; } .patch-changes li strong{ color: var(--ink); } .compare-savings{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; margin-bottom: 2.5rem; } .compare-savings h2{ font-size: 1.3rem; font-weight:600; margin-bottom:.5rem; } .compare-savings > p{ color: var(--ink-soft); font-size:.92rem; margin-bottom: 1.5rem; max-width: 70ch; } .savings-table{ width:100%; border-collapse: collapse; font-size:.88rem; } .savings-table th{ text-align:left; font-family: var(--font-display); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint); padding: .6rem .8rem; border-bottom: 2px solid var(--line); } .savings-table td{ padding: .8rem; border-bottom: 1px solid var(--line); vertical-align:top; } .savings-table tr:last-child td{ border-bottom:none; } .savings-table .savings-service{ font-weight:600; color: var(--ink); } .savings-table .savings-you{ color: var(--accent-orange-text); font-weight:700; font-family: var(--font-display); } .savings-table .savings-pct{ display:inline-block; background:#E9F9F3; color:#0B6E52; font-family: var(--font-display); font-weight:700; font-size:.78rem; padding:.2rem .5rem; border-radius:3px; } .savings-disclaimer{ margin-top: 1.5rem; font-size:.76rem; color: var(--ink-faint); line-height:1.6; border-top: 1px dashed var(--line); padding-top: 1rem; } .price-block{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; margin-bottom: 1.5rem; overflow:hidden; } .price-block-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: 1rem; background:none; border:none; cursor:pointer; text-align:left; padding: 1.5rem 1.75rem; font-family: inherit; color: inherit; min-width: 0; } .price-block-head-left{ display:flex; align-items:center; gap: .8rem; min-width: 0; } .price-block-toggle{ flex-shrink: 0; } .price-block-toggle{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; } .price-block-count{ font-family: var(--font-display); font-size:.76rem; color: var(--ink-faint); white-space:nowrap; } .price-chevron{ color: var(--ink-faint); transition: transform .25s ease, color .2s ease; flex-shrink:0; } .price-block-head[aria-expanded="true"] .price-chevron{ transform: rotate(180deg); color: var(--accent-orange-text); } .price-block-head:hover .price-chevron{ color: var(--accent-orange-text); } .price-list-wrap{ max-height:0; overflow:hidden; transition: max-height .3s ease; } .price-list-wrap .price-list{ padding: 0 1.75rem 1.5rem; } .price-block-head-left h2{ font-size: 1.15rem; font-weight:600; margin:0; } .price-list{ list-style:none; margin:0; padding:0; } .price-list li{ display:flex; justify-content:space-between; align-items:baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-size:.92rem; flex-wrap: wrap; } .price-list li:last-child{ border-bottom:none; } .price-item-name small{ color: var(--ink-faint); font-size:.82em; display:block; margin-top:.1rem; } .price-item-value{ font-family: var(--font-display); font-weight:700; color: var(--ink); white-space: nowrap; flex-shrink:0; } .price-item-value small{ font-weight:400; color: var(--ink-faint); } .price-item-free{ color: var(--accent-teal-text); } .pay-inline-link{ display:inline-block; margin-left:.6rem; font-family: var(--font-body); font-weight:600; font-size:.78rem; color: var(--accent-teal-text); text-decoration: underline; } .price-was{ color: var(--ink-faint); font-weight:400; text-decoration: line-through; margin-right:.4rem; } /* ========================================================= Payment page ========================================================= */ .pay-block-copy{ color: var(--ink-soft); font-size:.92rem; margin-bottom: 1.2rem; max-width: 62ch; } .pay-btn{ display:inline-flex; } .pay-list{ list-style:none; margin:0; padding:0; } .pay-list li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem 0; border-bottom: 1px dashed var(--line); } .pay-list li:last-child{ border-bottom:none; } .pay-list-info{ display:flex; flex-direction:column; gap:.2rem; } .pay-list-name{ font-weight:600; font-size:.95rem; } .pay-list-name small{ color: var(--ink-faint); font-weight:400; } .pay-list-price{ font-family: var(--font-display); font-weight:700; color: var(--accent-orange-text); } .pay-btn-sm{ padding:.55rem 1.2rem; font-size:.82rem; flex-shrink:0; } .pay-vet-note{ display:flex; align-items:center; gap:.5rem; margin-top:1.2rem; flex-wrap: wrap; font-size:.82rem; color:#7A5A12; background:#FFF1EA; padding:.8rem 1rem; border-radius: var(--radius); } .pay-vet-note svg{ color: var(--accent-orange); flex-shrink:0; } .pay-vet-note a{ color:#5A3A0E; text-decoration: underline; font-weight:700; } .pay-reference{ display:flex; flex-direction:column; gap: 1rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px dashed var(--line); } .pay-reference-item{ display:flex; flex-direction:column; gap:.3rem; } .pay-reference-item strong{ font-size:.9rem; color: var(--ink); } .pay-reference-item span{ font-size:.85rem; color: var(--ink-soft); line-height:1.55; } .pay-reference-item a{ color: var(--accent-teal-text); font-weight:600; text-decoration: underline; } .gov-info-note{ display:flex; align-items:flex-start; gap:.6rem; margin-top:.5rem; font-size:.82rem; color:#7A5A12; background:#FFF8EE; border:1px solid #F3DDB0; padding:.8rem 1rem; border-radius: var(--radius); } .gov-info-note svg{ color:#B8451D; flex-shrink:0; margin-top:.1rem; } .sub-restriction-note{ display:flex; align-items:flex-start; gap:.6rem; margin: .9rem 0 1.4rem; font-size:.8rem; line-height:1.5; color:#7A5A12; background:#FFF8EE; border:1px solid #F3DDB0; padding:.8rem 1rem; border-radius: var(--radius); } .sub-restriction-note svg{ color:#B8451D; flex-shrink:0; margin-top:.1rem; } /* ========================================================= Legal doc page ========================================================= */ .legal-doc{ max-width: 760px; margin: 0 auto; } .legal-doc h2{ font-size: 1.05rem; font-weight:600; margin-top: 2.2rem; margin-bottom:.7rem; padding-bottom:.5rem; border-bottom: 1px solid var(--line); } .legal-doc h2:first-child{ margin-top:0; } .legal-doc p{ color: var(--ink-soft); font-size:.92rem; line-height:1.7; margin-bottom:1rem; } .legal-doc ul{ margin: 0 0 1rem; padding-left: 1.3rem; color: var(--ink-soft); font-size:.92rem; line-height:1.7; } .legal-doc ul li{ margin-bottom:.4rem; } .legal-doc strong{ color: var(--ink); } /* ========================================================= Terms agreement checkbox (payment gating) ========================================================= */ .terms-agree{ display:flex; align-items:flex-start; gap:.7rem; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.5rem; } .terms-agree input[type="checkbox"]{ width:18px; height:18px; flex-shrink:0; margin-top:.15rem; accent-color: var(--accent-orange); } .terms-agree label{ font-size:.85rem; color: var(--ink-soft); line-height:1.5; cursor:pointer; } .terms-agree a{ color: var(--ink); text-decoration:underline; font-weight:600; } .terms-agree.needs-attention{ border-color: var(--accent-orange); background:#FFF1EA; } :root[data-theme="dark"] .terms-agree.needs-attention{ background: #2A1A12; } .terms-warning{ display:none; color: var(--accent-orange-text); font-size:.8rem; font-weight:600; margin: -1rem 0 1.5rem; } .terms-warning.is-visible{ display:block; } a.pay-btn.is-locked, a.pay-btn-sm.is-locked{ opacity:.5; } .price-block--wide{ } .price-list--columns{ display:grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; } .price-list--columns li{ border-bottom: 1px dashed var(--line); } .price-note{ display:flex; gap:.9rem; align-items:flex-start; background:#FFF8EE; border: 1px solid #F3DDB0; border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1rem 0 2.5rem; color:#7A5A12; font-size:.85rem; } .price-note svg{ flex-shrink:0; margin-top:.1rem; } .price-note p{ margin:0; } .pricing-cta{ text-align:center; background: var(--navy-mid); color:#fff; border-radius: var(--radius); padding: 2.5rem 2rem; } .pricing-cta h2{ color:#fff; font-size:1.3rem; margin-bottom:.6rem; } .pricing-cta p{ color: rgba(238,241,245,0.75); margin-bottom:1.4rem; max-width:52ch; margin-left:auto; margin-right:auto; } .vet-banner{ background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid)); color:#fff; text-align:center; border-radius: var(--radius); padding: 2rem; margin-bottom: 2.5rem; } .vet-banner svg{ color: var(--accent-teal); margin-bottom:.8rem; } .vet-banner h2{ color:#fff; font-size:1.3rem; margin-bottom:.6rem; } .vet-banner p{ color: rgba(238,241,245,0.78); max-width:60ch; margin: 0 auto; font-size:.92rem; } .vet-banner .vet-badge{ margin-bottom: 1rem; } @media (max-width: 700px){ .price-list--columns{ grid-template-columns: 1fr; } .savings-table{ font-size:.8rem; } .savings-table th:nth-child(2), .savings-table td:nth-child(2){ display:none; } } @media (max-width: 360px){ .compare-savings{ overflow-x:auto; } .savings-table{ min-width: 340px; } } /* ========================================================= Contact ========================================================= */ .contact{ background: var(--navy-mid); color: #EEF1F5; } .contact .eyebrow{ color: var(--accent-teal); } .contact h2{ color:#fff; } .contact .section-lede{ color: rgba(238,241,245,0.72); } .contact-inner{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; } .contact-details{ margin-top: 2rem; display:flex; flex-direction:column; gap:1rem; } .contact-details li{ display:flex; align-items:center; gap:.75rem; font-size:.95rem; color: rgba(238,241,245,0.85); } .contact-details svg{ color: var(--accent-orange); flex-shrink:0; } .contact-details a:hover{ color: var(--accent-orange); } .contact-form{ background: var(--paper-alt); color: var(--ink); border-radius: var(--radius); padding: 2rem; } .contact-cta{ background: var(--paper-alt); color: var(--ink); border-radius: var(--radius); padding: 2.25rem 2rem; text-align: center; display:flex; flex-direction:column; align-items:center; } .contact-cta-icon{ width: 56px; height:56px; border-radius:50%; background: #FFF1EA; color: var(--accent-orange); display:flex; align-items:center; justify-content:center; margin-bottom: 1.1rem; } .contact-cta h3{ font-size: 1.2rem; font-weight:600; margin-bottom:.7rem; } .contact-cta p{ font-size:.92rem; color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 42ch; } .contact-cta-note{ margin-top: 1.1rem; margin-bottom:0; font-size:.8rem; color: var(--ink-faint); max-width: 100%; } .form-row{ margin-bottom: 1.1rem; display:flex; flex-direction:column; gap:.4rem; } .form-row--split{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .form-row--split > div{ display:flex; flex-direction:column; gap:.4rem; } label{ font-size:.82rem; font-weight:600; color: var(--ink-soft); } input, select, textarea{ font-family: var(--font-body); font-size:.95rem; padding:.7rem .8rem; border:1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); } input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent-orange); outline-offset:1px; border-color: var(--accent-orange); } textarea{ resize: vertical; } .form-note{ margin-top: .85rem; font-size:.85rem; min-height: 1.2em; color: var(--accent-teal-text); font-weight:600; } .form-note--error{ color: var(--accent-orange-text) !important; } /* ========================================================= Footer ========================================================= */ .site-footer{ background: var(--navy-deep); color: rgba(238,241,245,0.7); padding: 3rem 0; } .footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; padding-bottom: 1.5rem; border-bottom:1px solid rgba(238,241,245,0.12); } .footer-brand .footer-logo{ margin-bottom:.6rem; } .footer-brand .logo-line1{ font-family: var(--font-display); color:#fff; font-weight:600; display:block; } .footer-brand p{ margin-top:.35rem; font-size:.85rem; } .footer-nav{ display:flex; flex-wrap:wrap; gap: .6rem 1.5rem; font-size:.88rem; } .footer-nav a:hover{ color: var(--accent-orange); } .footer-legal{ font-size:.78rem; padding-top:1.25rem; text-align:center; } .footer-version{ font-size:.68rem; text-align:center; color: rgba(238,241,245,0.35); margin-top:.35rem; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1000px){ .why-inner, .contact-inner, .veteran-inner{ grid-template-columns: 1fr; } .ticket-grid{ grid-template-columns: repeat(2, 1fr); } .ticket--wide{ grid-column: span 2; } .steps{ grid-template-columns: repeat(2, 1fr); } .stat-strip{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px){ .header-inner{ gap: .6rem; } .header-actions{ gap:.5rem; } .header-actions .btn-small{ padding:.5rem .85rem; font-size:.72rem; } .logo-text{ display:none; } .main-nav{ display:flex; flex-direction:column; gap:0; position:absolute; top: var(--header-h); left:0; right:0; background: var(--paper-alt); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition: max-height .25s ease; } .main-nav a{ padding: 1rem 28px; border-bottom:1px solid var(--line); } .main-nav a::after{ display:none; } .main-nav.is-open{ max-height: 360px; overflow-y:auto; } .header-actions .phone-link{ display:none; } .nav-toggle{ display:flex; } .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .nav-toggle span{ transition: transform .2s ease, opacity .2s ease; } } @media (max-width: 860px){ .hero-inner{ grid-template-columns: 1fr; } .hero-diagram{ order:-1; max-width: 340px; margin: 0 auto 1rem; } } @media (max-width: 640px){ section{ padding: 3.5rem 0; } .ticket-grid{ grid-template-columns: 1fr; } .ticket--wide{ grid-column: span 1; } .ul-columns{ grid-template-columns: 1fr 1fr; } .steps{ grid-template-columns: 1fr; } .why-grid{ grid-template-columns: 1fr; } .form-row--split{ grid-template-columns: 1fr; } .hero-stats{ gap: 1.5rem; } .footer-inner{ flex-direction:column; align-items:flex-start; } .stat-strip{ grid-template-columns: 1fr 1fr; } .compare{ aspect-ratio: 3/4; } .mock-hero{ flex-direction:column; align-items:stretch; } }