/* ==== Design tokens ==== */ :root { /* Brand-exact hexes from Arbtask Brand Guideline (2026) — do not alter these four */ --brand-green-leaf:#043324;--brand-green-apple:#8CC653;--brand-orange-carrot:#F27038;--brand-white-seed:#F3EAE1; /* Green (Leaf) ramp — primary. 900 is the exact brand Green Leaf; other steps are derived tints for UI states. */ --green-50:#EAF3EE;--green-100:#D2E6DA;--green-200:#A8CDB7;--green-300:#78B08F;--green-400:#4C9269; --green-500:#2F7A50;--green-600:#1E6142;--green-700:#124B34;--green-800:#0A3F2C;--green-900:#043324;--green-950:#021F16; /* Apple ramp — accent/success. 400 is the exact brand Green Apple. */ --apple-50:#F5FAEE;--apple-100:#E7F3D6;--apple-200:#D2E8B4;--apple-300:#B4D989; --apple-400:#8CC653;--apple-500:#6FA83E;--apple-600:#578633;--apple-700:#436829; /* Orange (Carrot) ramp — attention/warning. 400 is the exact brand Orange Carrot. */ --orange-50:#FEF1EA;--orange-100:#FCDFCF;--orange-200:#F8BC9E;--orange-300:#F59D71; --orange-400:#F27038;--orange-500:#DD5A20;--orange-600:#B84614;--orange-700:#93380F; /* Cream (White Seed) ramp — warm neutral for marketing surfaces. 100 is the exact brand White Seed. */ --cream-50:#FDFAF7;--cream-100:#F3EAE1;--cream-200:#E7D9C9; /* Neutral warm-greige scale — not in the brand guideline; warmed to pair with the earthy green palette and the editorial paper direction. */ --gray-0:#FFFFFF;--gray-50:#F5F3ED;--gray-100:#ECE9E0;--gray-200:#DED9CC;--gray-300:#C6BFAE; --gray-400:#9E9684;--gray-500:#726B5C;--gray-600:#544F44;--gray-700:#3D392F;--gray-800:#28251E; --gray-900:#1A1813;--gray-950:#0F0E0A; /* Editorial paper — warm off-white page background */ --paper:#F6F4EC; --red-100:#FBEAEA;--red-500:#C23B3B;--red-700:#8C2A2A; /* Semantic aliases */ --color-primary:var(--green-900);--color-primary-hover:var(--green-800);--color-primary-active:var(--green-950); --color-primary-subtle:var(--green-50);--color-primary-border:var(--green-200); --color-accent:var(--apple-400);--color-accent-hover:var(--apple-500);--color-accent-subtle:var(--apple-50); --color-attention:var(--orange-400);--color-attention-hover:var(--orange-500);--color-attention-subtle:var(--orange-50); --surface-page:var(--paper);--surface-card:var(--gray-0);--surface-sunken:var(--gray-100); --surface-inverse:var(--green-900);--surface-warm:var(--cream-100);--surface-overlay:rgba(4,51,36,0.5); --text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-400); --text-brand:var(--green-900);--text-on-primary:var(--gray-0);--text-on-accent:var(--green-900); --text-link:var(--green-700);--text-link-hover:var(--green-900); --border-default:var(--gray-200);--border-strong:var(--gray-300);--border-focus:var(--apple-500); --color-success:var(--green-700);--color-success-bg:var(--green-50); --color-warning:var(--orange-400);--color-warning-bg:var(--orange-50);--color-warning-text:var(--orange-700); --color-danger:var(--red-500);--color-danger-bg:var(--red-100);--color-danger-text:var(--red-700); --color-info:var(--gray-700);--color-info-bg:var(--gray-100);--color-info-text:var(--gray-800); --focus-ring:0 0 0 3px rgba(140,198,83,0.45); /* Typography — Archivo (industrial grotesk) throughout; IBM Plex Mono for job codes/data */ --font-sans:'Archivo',ui-sans-serif,system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace; --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:16px;--text-lg:18px; --text-xl:20px;--text-2xl:24px;--text-3xl:28px;--text-4xl:32px;--text-5xl:40px;--text-6xl:48px;--text-7xl:60px; --leading-tight:1.15;--leading-snug:1.35;--leading-normal:1.5;--leading-relaxed:1.65; --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800; --tracking-tight:-0.02em;--tracking-normal:0em;--tracking-wide:0.04em; --font-display:var(--weight-extrabold) var(--text-7xl)/1.04 var(--font-sans); --font-h1:var(--weight-bold) var(--text-6xl)/1.07 var(--font-sans); --font-h2:var(--weight-bold) var(--text-4xl)/1.14 var(--font-sans); --font-h3:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans); --font-h4:var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-sans); --font-body-lg:var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-sans); --font-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans); --font-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans); --font-label:var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans); --font-caption:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-sans); --font-mono-sm:var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-mono); --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px; --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px; --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-2xl:24px;--radius-pill:999px; --shadow-xs:0 1px 2px rgba(26,24,19,0.05); --shadow-sm:0 1px 3px rgba(26,24,19,0.06),0 1px 2px rgba(26,24,19,0.04); --shadow-md:0 6px 18px rgba(26,24,19,0.08),0 2px 5px rgba(26,24,19,0.04); --shadow-lg:0 18px 40px rgba(26,24,19,0.12),0 4px 10px rgba(26,24,19,0.05); --shadow-focus:var(--focus-ring); --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1); --duration-fast:120ms;--duration-base:180ms;--duration-slow:280ms; } /* ==== Base ==== */ *{box-sizing:border-box} body{margin:0;font-family:var(--font-sans);color:var(--text-primary);background:var(--surface-page);font:var(--font-body)} a{color:var(--text-link);text-decoration:none} a:hover{color:var(--text-link-hover);text-decoration:underline} img{display:block;max-width:100%} /* ==== Components ==== */ .icon{display:inline-block;vertical-align:middle;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill); background:var(--color-primary);color:var(--text-on-primary);font-family:var(--font-sans);font-weight:var(--weight-semibold); text-decoration:none;border:none;cursor:pointer;transition:background var(--duration-base) var(--ease-out);text-align:center} .btn:hover{background:var(--color-primary-hover);color:var(--text-on-primary);text-decoration:none} .btn-sm{min-height:32px;padding:6px 16px;font:var(--font-label);font-weight:var(--weight-semibold)} .btn-lg{min-height:48px;padding:12px 28px;font-size:var(--text-md)} .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-pill);font:var(--font-caption);font-weight:600} .badge-success{background:var(--color-success-bg);color:var(--color-success)} .avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%; background:var(--green-100);color:var(--green-800);font-weight:600;font-size:12px;font-family:var(--font-sans);flex-shrink:0} .mock-shot{height:380px;border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--border-default);box-shadow:var(--shadow-md)} .mock-shot img{width:100%;height:100%;object-fit:cover;display:block} .hover-card{transition:all var(--duration-base) var(--ease-out)} .hover-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--orange-300)} .cta-light:hover{background:var(--cream-200)} /* Feature tabs */ .tab-btn{padding:10px 22px;border-radius:999px;cursor:pointer;border:1px solid var(--orange-300);background:transparent; color:var(--gray-700);font:var(--font-label);transition:all var(--duration-base) var(--ease-out)} .tab-btn.active{border-color:var(--green-900);background:var(--green-900);color:#fff} .tab-panel[hidden]{display:none!important} /* Testimonial carousel */ .testimonial-quote{min-height:150px} .testimonial-dot{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;padding:0; background:var(--green-700);transition:background var(--duration-base) var(--ease-out)} .testimonial-dot.active{background:var(--orange-400)} .testimonial-fade{animation:fadeA .45s var(--ease-out) both} /* Pricing plans */ .plan-toggle{padding:9px 20px;border-radius:999px;cursor:pointer;font:var(--font-label);border:1px solid var(--gray-300); background:transparent;color:var(--gray-600);transition:all var(--duration-base) var(--ease-out)} .plan-toggle.active{border-color:var(--green-900);background:var(--green-900);color:#fff} .plan-card{position:relative;background:var(--surface-card);border-radius:var(--radius-xl);padding:26px 24px; border:1px solid var(--border-default);display:flex;flex-direction:column} .plan-card.popular{border:2px solid var(--orange-400);box-shadow:var(--shadow-md)} .plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--orange-400);color:#fff; font:var(--font-caption);padding:3px 12px;border-radius:var(--radius-pill);white-space:nowrap} .plan-cta{margin-top:20px;display:inline-flex;align-items:center;justify-content:center;height:40px; border-radius:var(--radius-pill);font:var(--weight-semibold) var(--text-base)/1 var(--font-sans); background:transparent;color:var(--green-900);border:1px solid var(--green-900); transition:all var(--duration-base) var(--ease-out)} .plan-cta:hover{background:var(--green-50);color:var(--green-900);text-decoration:none} .plan-cta.popular{background:var(--green-900);color:#fff;border:none} .plan-cta.popular:hover{background:var(--green-800);color:#fff} /* ==== Header / nav ==== */ header{position:sticky;top:0;z-index:40;background:rgba(246,244,236,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)} [data-mobile-only]{display:none} .menu-toggle{align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border-strong); border-radius:var(--radius-md);background:transparent;cursor:pointer} /* ==== Responsive rules: media queries cannot be inline, so they live here. Overrides use !important to win over inline styles. ==== */ @media (max-width: 860px) { body { overflow-x: hidden; } header nav { display: none !important; } header > div:last-child { padding: 10px 18px !important; } section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 44px !important; padding-bottom: 44px !important; } footer { padding: 28px 20px !important; } footer > div { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } /* minmax(0,...) — not bare 1fr — so a track can shrink below its content's natural width (e.g. a nowrap button). Otherwise the grid item refuses to shrink, drags the column wider than the viewport, and overflow-x:hidden silently clips the overflow. */ .grid-cols { grid-template-columns: minmax(0,1fr) !important; } .wrap-row { flex-wrap: wrap !important; row-gap: 10px; } .step-line { display: none !important; } h1 { font-size: 32px !important; line-height: 1.15 !important; } h2 { font-size: 25px !important; line-height: 1.2 !important; } h3 { font-size: 19px !important; } .hero-img, .mock-shot { height: 300px !important; } .testimonial-quote { min-height: 0 !important; } } [data-mobile-only] { display: none; } @media (max-width: 860px) { [data-mobile-only] { display: inline-flex !important; } header nav[data-open="1"] { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column !important; gap: 0 !important; background: var(--paper); border-bottom: 1px solid var(--border-default); padding: 6px 20px 14px; } header nav[data-open="1"] a { padding: 11px 0; } } @media (max-width: 560px) { h1 { font-size: 28px !important; } section { padding-top: 36px !important; padding-bottom: 36px !important; } } @media (max-width: 400px) { .hide-xs { display: none !important; } } /* pricing.html / affiliate.html carry an extra currency