/* ===== index.css — byte-exact relocation of the page's inline cascade (V185 lineage). Order preserved; layer comments intact. ===== */ /* ============ TOKENS (literal values for maximum compatibility) cream bg #faf9f5 ink #18181a muted #6b6b66 hairline #e6e4dc green #1a7f53 green-bright #54c98a red #c23b2e slate #5c6672 dark panel #0f1115 / #16181c panel text #f5f4f0 ============ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } .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; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plexmono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plexmono-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } body { background: #faf9f5; color: #18181a; font-family: 'Archivo','Archivo Fallback', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } .skip { position: absolute; left: -9999px; top: 0; background: #18181a; color: #f5f4f0; padding: 10px 16px; z-index: 300; font-family: 'Archivo','Archivo Fallback', system-ui, sans-serif; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } section { padding: 88px 0; } section[id] { scroll-margin-top: 28px; } .eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #1a7f53; margin-bottom: 18px; } h1, h2 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; } h2 { font-size: clamp(29px, 1.8vw + 22px, 38px); margin-bottom: 16px; max-width: 720px; } .sub { color: #6b6b66; font-size: 18px; max-width: 640px; } .hairline { border: 0; border-top: 1px solid #e6e4dc; } /* ---------- nav ---------- */ nav { position: sticky; top: 0; z-index: 100; background: rgba(250,249,245,0.92); border-bottom: 1px solid #e6e4dc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.18em; font-size: 17px; text-decoration: none; } .brand svg { width: 28px; height: 28px; border-radius: 6px; } .nav-links { display: flex; gap: 26px; align-items: center; } .nav-links a { text-decoration: none; font-size: 14.5px; color: #46464a; font-weight: 500; } .nav-links a:hover { color: #18181a; } .nav-inner { position: relative; } .mz-burger { display: none; background: none; border: 1px solid #d8d6cd; border-radius: 8px; padding: 9px 13px; font-size: 18px; line-height: 1.3; color: #18181a; cursor: pointer; } @media (max-width: 760px) { .nav-links { display: none; } .mz-burger { display: inline-block; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: #faf9f5; border-bottom: 1px solid #e6e4dc; padding: 6px 22px 16px; gap: 0; z-index: 150; box-shadow: 0 14px 30px rgba(24,24,26,.08); } .nav-links.open a { display: block; padding: 13px 0; border-bottom: 1px solid #efeee9; font-size: 16px; text-align: center; } .nav-links.open a.btn { border: 0; margin-top: 10px; text-align: center; } } .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer; background: #18181a; color: #f5f4f0 !important; font-weight: 600; font-size: 15.5px; padding: 15px 26px; min-height: 48px; box-sizing: border-box; border-radius: 10px; border: 0; } .btn:hover { background: #000; } .btn.green { background: #1a7f53; } .btn.green:hover { background: #14653f; } .btn.small { padding: 9px 18px; font-size: 14px; } .btn-ghost { text-decoration: none; font-weight: 600; font-size: 15.5px; color: #18181a; padding: 15px 6px; display: inline-block; min-height: 48px; box-sizing: border-box; } .btn-ghost:hover { color: #1a7f53; } /* ---------- hero ---------- */ #top { padding: 48px 0 88px; } .hero-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; } .hero-copy { flex: 1 1 400px; min-width: 300px; text-align: center; } h1 { font-size: clamp(34px, 3.4vw + 22px, 56px); } h1 .flip { color: #54c98a; } .stack-acc { margin-top: 30px; } .stack-acc details { background: #171a20; border: 1px solid #262a31; border-radius: 12px; margin-bottom: 10px; } .stack-acc summary { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; padding: 15px 52px; cursor: pointer; list-style: none; } .stack-acc summary::-webkit-details-marker { display: none; } .stack-acc summary h3 { margin: 0; font-size: 17px; color: #f5f4f0; } .stack-acc summary:hover h3 { color: #54c98a; } .stack-acc .n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; color: #54c98a; } .stack-acc .chev { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #8b8983; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 16px; transition: transform .18s ease; } .stack-acc details[open] .chev { transform: translateY(-50%) rotate(45deg); } .stack-acc .stk-body { padding: 0 24px 18px; text-align: center; } .stack-acc .stk-body p { color: #b9b8b2; max-width: 660px; margin-left: auto; margin-right: auto; } .hero-kicker { display: flex; align-items: stretch; justify-content: center; gap: 16px; margin-bottom: 24px; } .hero-kicker .hk-bar { width: 3px; border-radius: 2px; background: linear-gradient(180deg, #54c98a 0%, rgba(84,201,138,.1) 100%); } .hero-kicker .hk-1 { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #54c98a; } .hero-kicker .hk-2 { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #8b8983; margin-top: 6px; } .hero-sub { color: #46464a; font-size: 18.5px; margin: 22px 0 30px; max-width: 560px; } .hero-ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .trial-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: #6b6b66; margin-top: 14px; } .hero-proof { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; margin-top: 8px; } .hero-proof a { color: #6b6b66; text-decoration: underline dotted; text-underline-offset: 3px; } .hero-proof a:hover { color: #1a7f53; } :focus-visible { outline: 2px solid #1a7f53; outline-offset: 2px; } .hero-ctas { justify-content: center; } .hero-checks { list-style: none; margin-top: 30px; } .hero-checks li { font-size: 15px; color: #46464a; padding: 3px 0; } .hero-checks li::before { content: "✓ "; color: #1a7f53; font-weight: 700; } @media (max-width: 760px) { h1 { line-height: 1.14; } section { padding: 64px 0; } #top { padding-top: 26px; } .specbar { font-size: 10px; letter-spacing: 0.1em; padding: 10px 14px; } .score-copy > .sub { text-align: center; margin-left: auto; margin-right: auto; } } .hero-panel { flex: 1 1 540px; min-width: 300px; background: #0f1115; border: 1px solid rgba(245,244,240,.12); border-radius: 16px; box-shadow: 0 18px 44px rgba(15,17,21,.16); padding: 0; position: relative; overflow: hidden; } .readout-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(245,244,240,.12); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: #a6a6a2; } .readout-head .live { display: flex; gap: 7px; align-items: center; color: #54c98a; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #54c98a; animation: mzpulse 1.6s ease-in-out infinite; } @keyframes mzpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } .mz-reseed { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; color: #8b93a0; background: none; border: 1px solid #2a2f38; border-radius: 8px; padding: 4px 9px; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .mz-reseed:hover { color: #f5f4f0; border-color: #54c98a; } .mz-realtape { margin-left: 12px; color: #54c98a; text-decoration: none; } .mz-realtape:hover { text-decoration: underline; } .chart-viewport { position: relative; height: 320px; } #chartCanvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .35s cubic-bezier(.16,1,.3,1); will-change: transform; } .playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(217,138,43,.45); pointer-events: none; } .playhead-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #d98a2b; box-shadow: 0 0 10px rgba(217,138,43,.8); transform: translate(-50%,-50%); pointer-events: none; } .readout-foot { display: block; padding: 13px 18px; border-top: 1px solid rgba(245,244,240,.12); } .readout-foot .score { display: flex; align-items: baseline; gap: 8px; } .score-num { font-weight: 800; font-size: 34px; color: #18181a; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .hero-panel .score-num { color: #f5f4f0; } .score-max { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #8b8983; } .hero-panel .score-max { color: #a6a6a2; } .verdict { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #46464a; margin-left: 6px; } .hero-panel .verdict { color: #a6a6a2; } .rf-cap { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; color: #8b8983; display: block; margin-bottom: 2px; } .rf-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; } .hero-panel .score-num { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1; } .hero-panel .verdict { margin-left: 10px; } .rf-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; color: #8a8880; display: block; margin-top: 4px; } .readout-foot .log { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: #a6a6a2; } .mz-play { position: absolute; right: 10px; bottom: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.06em; color: #a6a6a2; background: rgba(15,17,21,.92); border: 1px solid #5a5d63; border-radius: 7px; padding: 6px 10px; cursor: pointer; } .mz-play:hover { border-color: #d98a2b; color: #d98a2b; } .specbar { border-top: 1px solid #e6e4dc; border-bottom: 1px solid #e6e4dc; background: #f5f4f0; text-align: center; padding: 12px 18px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: #6b6b66; } .sim-note { padding: 12px 22px 15px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; line-height: 1.6; color: #8b8983; border-top: 1px solid rgba(245,244,240,.12); background: rgba(245,244,240,.05); margin: 0; text-align: center; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .card, .band-card { transition: transform .18s ease, box-shadow .18s ease; } .card:hover, .band-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24,24,26,.07); } .btn { transition: transform .15s ease, background-color .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } } /* ---------- problem cards ---------- */ .cards { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 44px; } .card { flex: 1 1 280px; background: #fff; border: 1px solid #e6e4dc; border-radius: 14px; padding: 26px; text-align: center; } .card .k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.18em; color: #6b6b66; display: block; margin-bottom: 12px; } .card p { font-size: 15.5px; color: #46464a; } .card.hit { background: #0f1115; border-color: #0f1115; color: #f5f4f0; } .card.hit .k { color: #54c98a; } .card.hit p { color: #cfcfca; } /* ---------- concept ---------- */ .band-cards { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; } .band-card { flex: 1 1 300px; border-radius: 14px; padding: 24px; border: 1px solid #e6e4dc; background: #fff; text-align: center; } .band-card.red { border-left: 5px solid #c23b2e; } .band-card.green { border-left: 5px solid #1a7f53; } .band-card .k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.16em; font-weight: 500; } .band-card.red .k { color: #c23b2e; } .band-card.green .k { color: #1a7f53; } .kicker { font-weight: 700; margin-top: 26px; font-size: 18px; } .namelink { margin: -8px 0 22px; } .namelink a { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: #6b6b66; text-decoration: none; border-bottom: 1px solid #d8d6cd; padding-bottom: 2px; } .namelink a:hover { color: #1a7f53; border-color: #1a7f53; } @media (max-width: 520px) { .score-num { font-size: 28px; } .chart-viewport { height: 260px; } } /* ---------- stack ---------- */ .dark { background: #0f1115; color: #f5f4f0; } .dark h2 { color: #f5f4f0; } .dark .sub { color: #a6a6a2; } .dark .eyebrow { color: #54c98a; } .layers { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; } .layer { flex: 1 1 300px; background: #16181c; border: 1px solid #24262c; border-radius: 12px; padding: 22px; text-align: center; } .layer .n { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: #54c98a; font-size: 12px; letter-spacing: 0.16em; } .layer h3 { font-size: 17px; margin: 8px 0 6px; font-weight: 700; } .layer p { font-size: 14.5px; color: #a6a6a2; } .stack-kicker { margin-top: 34px; font-weight: 700; font-size: 18px; color: #f5f4f0; } /* ---------- score ---------- */ .score-grid { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 44px; align-items: center; justify-content: center; max-width: 980px; margin-left: auto; margin-right: auto; } .score-copy { flex: 1 1 380px; max-width: 480px; text-align: center; } .thD .score-widget { box-shadow: 0 18px 60px rgba(0,0,0,0.45); } .legend { list-style: none; margin-top: 22px; font-size: 15px; color: #46464a; } .legend li { padding: 5px 0; } .legend b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; } .score-widget { flex: 1 1 380px; background: #fff; border: 1px solid #e6e4dc; border-radius: 16px; padding: 28px; text-align: center; } .score-widget .label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; color: #6b6b66; } .score-num { font-size: 62px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 10px 0 2px; } .score-num small { font-size: 20px; color: #8b8983; font-weight: 600; margin-left: 7px; letter-spacing: 0.02em; } .verdict { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 13px; letter-spacing: 0.14em; } .verdict-note { font-size: 14.5px; color: #46464a; margin-top: 12px; min-height: 60px; } input, button, select, textarea { font: inherit; letter-spacing: inherit; } input[type=range] { width: 100%; margin-top: 20px; accent-color: #1a7f53; } .eg { font-size: 13.5px; line-height: 1.6; color: #6b6b66; margin-top: 9px; } .eg b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.12em; color: #1a7f53; text-transform: uppercase; margin-right: 7px; } .dark .eg { color: #a6a6a2; } .dark .eg b { color: #54c98a; } .drag-hint { font-size: 13px; color: #6b6b66; margin-top: 8px; } /* ---------- proof ---------- */ .figures { display: flex; flex-direction: column; gap: 34px; margin-top: 44px; } figure { background: #0f1115; border-radius: 16px; padding: 14px; } figure img { border-radius: 10px; width: 100%; height: auto; } figure a { cursor: zoom-in; } figcaption { font-family: 'Archivo','Archivo Fallback', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; letter-spacing: .01em; color: #b7b6b0; padding: 14px 12px 8px; text-align: center; max-width: 62ch; margin: 0 auto; } figcaption b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .09em; color: #f5f4f0; font-weight: 500; margin-bottom: 6px; } .restraint { margin-top: 44px; background: #fff; border: 1px solid #e6e4dc; border-left: 5px solid #1a7f53; border-radius: 14px; padding: 28px; text-align: center; } .restraint h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; } .restraint p { color: #46464a; font-size: 16px; max-width: 700px; margin-left: auto; margin-right: auto; } /* ---------- founder ---------- */ .founder { background: #16181c; border-radius: 18px; padding: 44px; color: #f5f4f0; text-align: center; } .founder .eyebrow { color: #54c98a; } .founder h2 { color: #f5f4f0; margin-left: auto; margin-right: auto; } .founder p { color: #cfcfca; font-size: 16.5px; max-width: 720px; margin: 6px auto 0; } .founder a:not(.btn):not(.btn-ghost) { color: #54c98a; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13.5px; display: inline-block; margin: 18px 10px 0; } .founder .btn, .founder .btn-ghost { margin: 18px 8px 0; } .founder .btn-ghost { border: 1px solid rgba(245,244,240,.18); border-radius: 10px; color: #d8d7d1; padding: 13px 22px; background: linear-gradient(180deg, rgba(245,244,240,.03), rgba(245,244,240,0)); transition: border-color .18s ease, color .18s ease, background .18s ease; } .founder .btn-ghost:hover { border-color: rgba(84,201,138,.5); color: #54c98a; background: rgba(84,201,138,.05); } /* ---------- steps ---------- */ .steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 44px; } .step { flex: 1 1 220px; background: #fff; border: 1px solid #e6e4dc; border-radius: 12px; padding: 22px; text-align: center; } .step .n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.18em; color: #1a7f53; font-weight: 500; } .step h3 { font-size: 16.5px; margin: 8px 0 6px; } .step p { font-size: 14.5px; color: #46464a; } .mantra { margin-top: 30px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: #6b6b66; letter-spacing: 0.06em; } /* ---------- pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; } .price-premium { border-color: #d98a2b !important; } .price-box { background: #0f1115; color: #f5f4f0; border-radius: 20px; padding: 46px; margin-top: 44px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; align-content: flex-start; } .price-left { flex: 1 1 320px; text-align: center; } .price-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; color: #54c98a; } .price-num { font-size: clamp(48px, 4vw + 34px, 68px); font-weight: 900; letter-spacing: -0.03em; margin: 14px 0 2px; } .price-num small { font-size: 20px; font-weight: 600; color: #a6a6a2; } .price-strike { display: none; font-size: 26px; color: #7a7a76; text-decoration: line-through; font-weight: 700; margin-right: 10px; } .founding-note { display: none; font-size: 14.5px; color: #d98a2b; margin-bottom: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .anchor-line { color: #a6a6a2; font-size: 15px; margin: 10px auto 24px; max-width: 380px; } .price-trial { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: #a6a6a2; margin-top: 14px; } .included { flex: 1 1 320px; list-style: none; text-align: center; } .included li { padding: 9px 0; border-bottom: 1px solid #24262c; font-size: 15.5px; color: #cfcfca; } .included li::before { content: "✓ "; color: #54c98a; font-weight: 700; } /* ---------- pricing: mobile hardening (V145) ---------- The pricing block shipped with no mobile rules at all: .price-grid used repeat(auto-fit, minmax(310px,1fr)) and .price-left/.included carried a 320px flex-basis while the card's content box on a 393px phone is only ~253px — the flex items could not shrink (default min-width:auto), so content escaped the card and the card's dark background painted behind nothing. Below 760px the grid and the flex are removed entirely, which eliminates the whole failure class rather than nudging a number. Desktop (>760px) is untouched. */ @media (max-width: 760px) { .price-grid { display: block; } .price-box { display: block; width: 100%; max-width: 100%; padding: 30px 20px; margin-top: 24px; background: #0f1115; color: #f5f4f0; } .price-left, .included { flex: none; width: 100%; min-width: 0; max-width: 100%; } .included { margin-top: 26px; } .price-label { display: block; font-size: 11px; letter-spacing: 0.14em; line-height: 1.6; } .price-num { font-size: 44px; line-height: 1.06; } .price-num small { font-size: 16px; } .anchor-line { max-width: 100%; } .price-box .btn { width: 100%; } .annual-strip { font-size: 11px; letter-spacing: 0.02em; } .included li { font-size: 15px; } } /* tablet band: two columns still fit, but the 68px price does not */ @media (min-width: 761px) and (max-width: 900px) { .price-box { padding: 34px 26px; } .price-num { font-size: 46px; } } /* ---------- faq ---------- */ .faq { max-width: 760px; margin: 40px auto 0; text-align: left; } details { border-bottom: 1px solid #e6e4dc; } summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 17.5px; display: flex; justify-content: space-between; gap: 16px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: #1a7f53; font-weight: 700; font-size: 22px; } details[open] summary::after { content: "–"; } details p { padding: 0 0 22px; color: #46464a; font-size: 15.5px; max-width: 680px; } .faq summary { position: relative; justify-content: center; text-align: center; padding: 20px 44px; } .faq summary::after { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } .faq details p { max-width: 620px; margin-left: auto; margin-right: auto; } /* ---------- regime read ---------- */ .read-box { border-top: 1px solid #e6e4dc; padding: 34px 0 0; margin-top: 10px; text-align: center; } .read-box h2 { font-size: 24px; margin-left: auto; margin-right: auto; } .read-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; max-width: 560px; margin-left: auto; margin-right: auto; justify-content: center; } .read-form input[type=email] { flex: 1 1 260px; padding: 13px 16px; font-size: 16px; border: 1.5px solid #cfcfca; border-radius: 10px; background: #faf9f5; font-family: 'Archivo','Archivo Fallback', system-ui, sans-serif; } .read-form input[type=email]:focus { border-color: #1a7f53; outline: none; } .read-note { font-size: 13px; color: #a6a6a2; margin-top: 12px; } .read-ok { display: none; margin-top: 18px; font-weight: 700; color: #1a7f53; } .read-err { display: none; margin-top: 18px; font-weight: 700; color: #c23b2e; } /* ---------- final cta / footer ---------- */ .final { text-align: center; } .final h2 { margin: 0 auto 16px; } .final .sub { margin: 0 auto 30px; } footer { border-top: 1px solid #e6e4dc; padding: 44px 0 60px; text-align: center; } .foot-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; } .disclaimer { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; line-height: 1.7; color: #9a9a96; max-width: 640px; margin-left: auto; margin-right: auto; } .foot-brand { font-weight: 900; letter-spacing: 0.18em; } .foot-links { font-size: 13.5px; color: #6b6b66; } .foot-links a { color: #6b6b66; } .yt-lite { position: relative; padding-bottom: 56.25%; height: 0; background: #0f1115; border-radius: 10px; overflow: hidden; cursor: pointer; display: block; } .yt-lite img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; } .yt-lite iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .yt-play { position: absolute; top: 50%; left: 50%; margin: -26px 0 0 -37px; width: 74px; height: 52px; background: #1a7f53; border-radius: 12px; color: #f5f4f0; font-size: 20px; text-align: center; line-height: 52px; transition: transform .15s ease, background .15s ease; } .yt-lite:hover .yt-play { background: #14653f; transform: scale(1.06); } .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .js .reveal.in { opacity: 1; transform: none; } .js .cards .reveal:nth-child(2), .js .figures .reveal:nth-child(2) { transition-delay: .07s; } .js .cards .reveal:nth-child(3), .js .figures .reveal:nth-child(3) { transition-delay: .14s; } } /* comparison table */ .tbl-wrap { margin-top: 40px; overflow-x: auto; } .tbl-note { margin-top: 12px; font-size: 13.5px; color: #6b6b66; } .workbench { border: 1px solid #e6e4dc; background: #f5f4f0; border-radius: 14px; padding: 22px 24px 24px; } .wb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .wb-all { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: #1a7f53; text-decoration: none; } .wb-all:hover { color: #18181a; } .wb-line { margin: 8px 0 16px; color: #46464a; font-size: 15px; } .wb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .wb-grid a { text-decoration: none; } .wb-grid img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: left center; display: block; border-radius: 8px; border: 1px solid #e6e4dc; } .wb-grid span { display: block; margin-top: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; color: #46464a; } @media (max-width: 680px) { .wb-grid { grid-template-columns: 1fr; } } .never { margin-top: 20px; border: 1px dashed #d8d6cd; border-radius: 12px; padding: 16px 20px; } .never-k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #c23b2e; } .never-list { margin: 8px 0 4px; color: #46464a; font-size: 15px; } .never-close { margin: 0; font-size: 13.5px; color: #6b6b66; } table.cmp { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e6e4dc; border-radius: 14px; overflow: hidden; min-width: 640px; } table.cmp th, table.cmp td { text-align: left; padding: 14px 18px; font-size: 15px; border-bottom: 1px solid #e6e4dc; vertical-align: top; } table.cmp thead th { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; color: #6b6b66; background: #f5f4f0; text-align: center; vertical-align: middle; } table.cmp tbody td:first-child { font-weight: 700; width: 160px; text-align: center; vertical-align: middle; } table.cmp tbody td:nth-child(2) { color: #6b6b66; } table.cmp tbody td:nth-child(2), table.cmp tbody td:nth-child(3) { text-align: center; vertical-align: middle; } table.cmp td.mz, table.cmp th.mz { background: #f2f7f4; color: #18181a; } table.cmp th.mz { color: #1a7f53; } table.cmp tr:last-child td { border-bottom: 0; } .onboard { margin-top: 30px; } .ob-title { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6b66; margin-bottom: 10px; text-align: center; } .ob-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ob-steps div { border: 1px solid #e6e4dc; background: #fff; border-radius: 10px; padding: 13px 15px; font-size: 13.5px; line-height: 1.55; color: #46464a; text-align: center; display: flex; flex-direction: column; justify-content: center; } .ob-steps b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; color: #1a7f53; margin-bottom: 6px; } @media (max-width: 680px) { .ob-steps { grid-template-columns: 1fr; } } @media (max-width: 680px) { table.cmp { min-width: 0; } table.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } table.cmp tr { display: block; padding: 12px 0 4px; border-bottom: 1px solid #e6e4dc; } table.cmp tbody tr:last-child { border-bottom: 0; } table.cmp th, table.cmp td { display: block; width: auto; border-bottom: 0; padding: 4px 16px 8px; text-align: center; } table.cmp tbody td:first-child { width: auto; font-size: 16px; padding-bottom: 2px; } table.cmp tbody td:nth-child(2)::before { content: "STATIC"; display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; color: #6b6b66; margin-bottom: 3px; } table.cmp td.mz::before { content: "MIZAN"; display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; color: #1a7f53; margin-bottom: 3px; } table.cmp td.mz { border-radius: 8px; margin: 4px 12px 12px; padding: 10px 12px 12px; } } /* pipeline flow strip */ .flow { margin-top: 38px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 8px; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .fc { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; padding: 8px 12px; border-radius: 8px; background: #16181c; border: 1px solid #2c2f36; color: #cfcfca; } .fc.in-chip { border-color: #46464a; color: #f5f4f0; } .fc.score-chip { border-color: #54c98a; color: #54c98a; } .fc.pass-chip { background: #123527; border-color: #1a7f53; color: #54c98a; } .fc.block-chip { background: #331a17; border-color: #c23b2e; color: #e0705f; } .fa { color: #6b6b66; font-size: 15px; } /* sticky mobile CTA */ .sticky-cta { display: none; } @media (max-width: 760px) { .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(15,17,21,0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px calc(18px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; gap: 12px; transform: translateY(110%); transition: transform .25s ease; } .sticky-cta.on { transform: translateY(0); } .sc-txt { color: #f5f4f0; font-size: 13px; } footer { padding-bottom: calc(120px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } } /* legacy flex prefixes (old WebKit) */ .nav-inner, .hero-grid, .hero-ctas, .cards, .band-cards, .layers, .score-grid, .steps, .price-box, .read-form, .foot-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; } .nav-inner { -webkit-flex-wrap: nowrap; -webkit-align-items: center; -webkit-justify-content: space-between; } .hero-copy { -webkit-flex: 1 1 400px; } .hero-panel { -webkit-flex: 1 1 540px; } .card { -webkit-flex: 1 1 280px; } .band-card { -webkit-flex: 1 1 300px; } .layer { -webkit-flex: 1 1 300px; } .step { -webkit-flex: 1 1 220px; } .score-copy, .score-widget { -webkit-flex: 1 1 380px; } .price-left { -webkit-flex: 1 1 320px; } .included { -webkit-flex: 1 1 320px; } .read-form input[type=email] { -webkit-flex: 1 1 260px; } ::selection { background: #1a7f53; color: #faf9f5; } /* ============ DUOTONE THEME LAYER (V54) ============ */ body { background: #0f1115; } section.thD { background: #0f1115; color: #f5f4f0; } section.thL { background: #fbfbf9; color: #16181c; } section.thD + section.thL, section.thL + section.thD { border-top: 1px solid rgba(84,201,138,0.18); } .thD h1, .thD h2, .thD h3, .thD b { color: #f5f4f0; } .thD .sub, .thD p { color: #bfbeb8; } .thD .eyebrow { color: #54c98a; } .thL .eyebrow { color: #1a7f53; } .thD .card, .thD .band-card, .thD .price-card, .thD .tier, .thD .read-box, .thD .never, .thD .faq details, .thD blockquote { background: #171a20; border-color: #262a31; box-shadow: none; } .thD .card p, .thD .tier li, .thD .band-card p { color: #b9b8b2; } .thD .legend { color: #b9b8b2; } .thD .legend b { color: #f5f4f0; } .thD .k { color: #8b8983; } .thD .card.hit { border-color: #1a7f53; } .thD .never-k { color: #e08a80; } .thD .never-list, .thD .never-close { color: #b9b8b2; } .thD .tbl-wrap table, .thD .tbl-wrap th, .thD .tbl-wrap td { background: #171a20; border-color: #262a31; color: #c3c2bc; } .thD .tbl-note, .thD .trial-note, .thD figcaption, .thD .worst { color: #8b8983; } .thD .faq summary { color: #f5f4f0; } .thD .faq details p { color: #b9b8b2; } .thD input[type=email], .thD input[type=text], .thD textarea { background: #12141a; border-color: #2e333b; color: #f5f4f0; } .thD .link, .thD .namelink a, .thD .workwhisper a { color: #54c98a; } .thD .shots3 img, .thD .shotwrap img { border-color: #20242b; } .thD .btn.ghost { border-color: #2e333b; color: #e7e6e1; } .thD .btn.ghost:hover { border-color: #1a7f53; color: #54c98a; } .thL .card, .thL .band-card, .thL .price-card, .thL .tier, .thL .read-box, .thL .faq details, .thL blockquote { background: #ffffff; border-color: #e6e4dc; } .thL .card.hit { background: #0f1115; border-color: #0f1115; } .thD .hero-checks li { color: #b9b8b2; } .thD .hero-checks li::before { color: #54c98a; } .thD .verdict-note { color: #46464a; } .thD .drag-hint { color: #6b6b66; } .thD .workbench .eyebrow { color: #1a7f53; } .thD .workbench p { color: #46464a; } /* ---------- v61: one alignment system — section headers centered ---------- */ section .wrap > .eyebrow, section .wrap > h2, section .wrap > .sub, section .wrap > .namelink, section .wrap > .kicker, section .wrap > .stack-kicker, section .wrap > .tbl-note, section .wrap > .mantra { text-align: center; } section .wrap > h2, section .wrap > .sub { margin-left: auto; margin-right: auto; } .never { text-align: center; } @media (min-width: 761px) { .layers { justify-content: center; } .layers .layer:nth-child(3n+1):last-child { flex: 0 1 333px; } } @media (max-width: 760px) { .tos-strip .ts-buy { text-align: left; margin-left: 0; } } nav { background: rgba(15,17,21,0.92) !important; border-bottom: 1px solid #262a31 !important; } nav a { color: #b9b8b2 !important; } nav a:hover { color: #54c98a !important; } nav .brand, nav .brand a { color: #f5f4f0 !important; } .thD .btn-ghost { border: 1px solid rgba(245,244,240,.14); border-radius: 10px; color: #d8d7d1; padding: 13px 22px; background: linear-gradient(180deg, rgba(245,244,240,.03), rgba(245,244,240,0)); transition: border-color .18s ease, color .18s ease, background .18s ease; } .thD .btn-ghost:hover { border-color: rgba(84,201,138,.5); color: #54c98a; background: rgba(84,201,138,.05); } footer { background: #0f1115; border-top: 1px solid #262a31 !important; color: #b9b8b2; } footer a { color: #b9b8b2; } footer a:hover { color: #54c98a; } footer .foot-brand { color: #f5f4f0; } .specbar.thD { background: #0c0e12 !important; border-color: #262a31 !important; color: #8b8983 !important; } /* balance dashboard mock */ .bd-panel { max-width: 500px; margin: 38px auto 12px; background: rgba(23,26,32,0.85); border: 1px solid #2a2f37; border-radius: 14px; padding: 20px 24px; box-shadow: 0 18px 60px rgba(0,0,0,0.45); font-family: 'IBM Plex Mono', ui-monospace, monospace; } .bd-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(233,230,223,0.05); font-size: 12.5px; } .bd-row:last-child { border-bottom: none; } .bd-row .l { color: #8b8983; letter-spacing: 0.12em; font-size: 10.5px; } .bd-row .v { color: #e8e6df; } .bd-head .l { color: #e3d9bf; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; } .bd-head .v { color: #8b8983; } .bd-grn { color: #54c98a !important; } .bd-bar { color: #54c98a; letter-spacing: 1px; } .bd-cap { color: #8b8983; font-size: 10.5px; letter-spacing: 0.05em; padding-top: 6px; margin: 0 auto; text-align: center; } .bd-notes { max-width: 500px; margin: 26px auto 0; text-align: center; } .bd-notes p { font-size: 14.5px; color: #b9b8b2; margin: 8px 0; } .bd-sec { border-top: 1px solid rgba(84,201,138,0.12); } .bd-sec .wrap { text-align: center; } .bd-sec h2 { margin-left: auto; margin-right: auto; } .bd-sec .sub { margin-left: auto; margin-right: auto; max-width: 640px; } .bd-meter { display: inline-block; width: 112px; height: 8px; background: #21252c; border-radius: 4px; vertical-align: middle; margin-right: 9px; overflow: hidden; } .bd-meter > span { display: block; height: 100%; background: #54c98a; border-radius: 4px; } /* V58 mobile nav + wit component */ .mz-burger { color: #f5f4f0 !important; background: transparent !important; border: 1px solid #2e333b !important; border-radius: 8px; padding: 7px 12px !important; font-size: 20px !important; line-height: 1 !important; } .mz-burger:hover, .mz-burger:focus-visible { color: #54c98a !important; border-color: #1a7f53 !important; } .nav-links.open { background: #101216 !important; border-bottom: 1px solid #262a31 !important; box-shadow: 0 22px 48px rgba(0,0,0,0.55); } .nav-links.open a { color: #e7e6e1 !important; border-bottom: 1px solid #1c2026 !important; } .nav-links.open a:hover { color: #54c98a !important; } .nav-links.open a.btn { color: #fff !important; border-bottom: 0 !important; } .h1-quip { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.08em; color: #1a7f53; margin: -8px 0 24px; } /* Soft cross-page fade in supporting browsers, motion-safe only */ @media not (prefers-reduced-motion: reduce) { @view-transition { navigation: auto; } } /* ---------- v62: centered content system polish — hover, motion (gated for touch + reduced motion) ---------- */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .layer, .step, .stack-acc details, .price-box, .score-widget { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .layer:hover { transform: translateY(-3px); border-color: #2f5a44; box-shadow: 0 16px 40px rgba(0,0,0,.35); } .step:hover { transform: translateY(-3px); border-color: #d8d6cd; box-shadow: 0 10px 24px rgba(24,24,26,.08); } .stack-acc details:hover { border-color: #2f5a44; } .price-box:hover { transform: translateY(-2px); box-shadow: 0 22px 55px rgba(0,0,0,.45); } .thD .card:hover, .thD .band-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.35); border-color: #2f5a44; } .faq summary { transition: color .15s ease; } .faq summary:hover { color: #1a7f53; } .fc { transition: border-color .18s ease, color .18s ease; } .flow:hover .fc.score-chip { border-color: #7fe0ab; color: #7fe0ab; } } /* ---------- v63: architect layer — design tokens + container queries ---------- */ :root { --mz-green: #1a7f53; --mz-green-hi: #54c98a; --mz-ink: #18181a; --mz-paper: #faf9f5; --mz-night: #0f1115; --mz-card-d: #171a20; --mz-line-d: #262a31; --mz-line-l: #e6e4dc; --mz-red: #c23b2e; } .onboard, .price-grid { container-type: inline-size; } @container (max-width: 680px) { .ob-steps { grid-template-columns: 1fr; } .price-box { padding: 32px 24px; } } /* ---------- v64: teardown implementation ---------- */ .never { background: #0f1115; border: 0; border-radius: 18px; padding: 52px 28px 44px; } .never .never-k { font-size: 11.5px; } .never-stack { margin: 18px 0 10px; } .never-stack p { font-weight: 800; font-size: clamp(21px, 2.2vw + 12px, 33px); letter-spacing: -0.01em; line-height: 1.3; color: #f5f4f0; margin: 4px 0; } .never-close { color: #54c98a; font-size: 14px; } .stk-quant { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #54c98a; margin-bottom: 10px; } .stack-acc .stk-body { text-align: left; } .stack-acc .stk-body p { text-align: left; margin-left: 0; margin-right: 0; max-width: none; } .ctx-cta { text-align: center; margin-top: 30px; } .risk-line { text-align: center; color: #46464a; font-size: 15.5px; margin-top: 26px; font-weight: 600; } /* ---------- v65: proprietary positioning ---------- */ .hero-fam { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; color: #8b8983; margin: 10px 0 0; } .never-share { margin-top: 22px; background: transparent; border: 1px solid rgba(245,244,240,.22); border-radius: 999px; color: #d8d7d1; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; padding: 12px 20px; cursor: pointer; transition: border-color .18s ease, color .18s ease; } .never-share:hover { border-color: rgba(84,201,138,.55); color: #54c98a; } #access .layer .k { color: #54c98a; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.16em; display: block; margin-bottom: 10px; } /* ---------- v66: vertical rhythm — no stacked dead space between same-theme sections ---------- */ section.thL + section.thL, section.thD + section.thD { padding-top: 48px; } #category { padding-bottom: 48px; } #access + section { padding-top: 64px; } /* ---------- v67: autopsy round ---------- */ .hero-fam { font-size: 13px; color: #b9b8b2; letter-spacing: 0.05em; margin-top: 12px; } .hero-lines { color: #cfcfca; font-size: 17px; line-height: 1.6; margin-top: 14px; } #category h2 { font-size: clamp(34px, 3.2vw + 18px, 54px); max-width: 940px; } .pill-n { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 26px; font-weight: 700; color: #2f5a44; margin-bottom: 8px; } .eq-stat { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.14em; color: #54c98a; margin: 18px 0 8px; text-align: center; } .never { padding: 64px 28px 52px; } .never-stack p { font-size: clamp(26px, 3vw + 14px, 44px); } /* ---------- v68: annual + fixes ---------- */ .annual-strip { margin-top: 12px; padding: 10px 14px; border: 1px dashed rgba(84,201,138,.35); border-radius: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.04em; color: #b9b8b2; } .annual-strip .as-k { color: #54c98a; letter-spacing: 0.16em; margin-right: 6px; } .annual-strip a { color: #54c98a; } .annual-note { text-align: center; color: #6b6b66; font-size: 14.5px; margin-top: 10px; } /* ===== V95 UPSCALE LAYER — precision micro-interactions, motion only on affordances ===== */ h1, h2, h3 { text-wrap: balance; } p, .sub, figcaption { text-wrap: pretty; } a, button, summary { -webkit-tap-highlight-color: transparent; } :where(a, button, summary, [role="button"], input, .btn):focus-visible { outline: 2px solid #1a7f53; outline-offset: 3px; border-radius: 4px; } .price-num, .ts-price, .score-num, .ps-num, .bd-row .v { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation-duration: .20s; } ::view-transition-new(root) { animation-duration: .24s; } /* buttons: lift, glow, press */ .btn { transition: transform .18s cubic-bezier(.2,.7,.3,1.2), box-shadow .22s ease, background-color .18s ease, color .18s ease, border-color .18s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(26,127,83,.30), 0 2px 6px rgba(0,0,0,.16); } .btn:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 8px rgba(26,127,83,.22); transition-duration: .06s; } /* nav links: hairline underline that draws itself */ nav a:not(.btn) { position: relative; } nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: currentColor; opacity: .65; transition: right .22s cubic-bezier(.2,.7,.3,1); } nav a:not(.btn):hover::after, nav a:not(.btn):focus-visible::after { right: 0; } /* arrow links nudge forward */ .get, .back, .wb-all { transition: transform .18s cubic-bezier(.2,.7,.3,1), color .16s ease; display: inline-block; } .get:hover, .back:hover, .wb-all:hover { transform: translateX(2px); } /* clickable cards + proof figures: quiet elevation */ .wn, .wb-grid a { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .22s ease; } .wn:hover, .wb-grid a:hover { transform: translateY(-2px); } figure { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; } figure:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15,17,21,.26); } figure a img { transition: filter .25s ease; } figure a:hover img { filter: brightness(1.05); } /* FAQ: answers rise into place, marker eases */ details summary { transition: color .16s ease; } details[open] > p { animation: mzFaqIn .32s cubic-bezier(.2,.7,.3,1) both; } @keyframes mzFaqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* form inputs: focus breathes */ input[type="email"], input[type="text"] { transition: border-color .18s ease, box-shadow .18s ease; } input[type="email"]:focus, input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(26,127,83,.18); } } /* ---- touch devices: press feedback replaces hover; luxury is response ---- */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } @media (hover: none) and (pointer: coarse) { input[type="email"], input[type="text"] { font-size: 16px; } /* prevents iOS focus zoom */ } @media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) { a:active, summary:active { opacity: .62; transition: opacity .06s ease; } .btn:active { transform: scale(.97); opacity: 1; } .wn:active, .wb-grid a:active, .tool:active, figure:active { transform: scale(.985); transition: transform .1s ease; } .get:active, .back:active, .wb-all:active { transform: translateX(2px); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { #mzNav.open { animation: mzMenuIn .22s cubic-bezier(.2,.7,.3,1) both; } @keyframes mzMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } .sticky-cta { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } /* ---- V97 platform layer: 2025-era CSS, all progressive ---- */ :root { interpolate-size: allow-keywords; accent-color: #1a7f53; } html { scrollbar-gutter: stable; } h1, h2 { text-box: trim-both cap alphabetic; } p, figcaption { hanging-punctuation: first; } #mzNav.open, .lightbox { overscroll-behavior: contain; } #mzNav { view-transition-name: mizan-nav; } .brand { view-transition-name: mizan-brand; } #mzNav .btn { view-transition-name: mizan-nav-cta; } @media (prefers-reduced-motion: no-preference) { /* details finally animates its height: the FAQ opens like a drawer, not a trapdoor */ details::details-content { block-size: 0; overflow-y: clip; transition: block-size .34s cubic-bezier(.2,.7,.3,1), content-visibility .34s allow-discrete; } details[open]::details-content { block-size: auto; } /* reading progress hairline, scroll-driven, zero JS */ @supports (animation-timeline: scroll()) { body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #1a7f53; transform-origin: 0 50%; transform: scaleX(0); animation: mzProgress linear both; animation-timeline: scroll(root); z-index: 9999; pointer-events: none; } @keyframes mzProgress { to { transform: scaleX(1); } } } } /* render-on-demand for long pages: off-screen sections cost nothing */ /* ---- V98: 48px touch floor on coarse pointers — hit areas grow, layout does not ---- */ @media (pointer: coarse) { .mz-burger { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .brand { display: inline-flex; align-items: center; min-height: 48px; } #mzNav.open a:not(.btn) { display: flex; align-items: center; min-height: 48px; } .mz-reseed, .get { min-height: 44px; display: inline-flex; align-items: center; } .shelf a { display: inline-block; } .foot > p a, .foot-links a, .disclaimer a, a[href^="mailto:"] { padding-block: 15px; padding-inline: 8px; margin-block: -15px; margin-inline: -8px; display: inline-block; } .namelink a, .wb-all, .wb-line a, .back, .verify, .founder a, .gal-note a, .price-trial a, .read-note a, .ts-buy a, .mz-realtape, .sim-note a, .demo-note a, .hero-proof a { padding-block: 14px; margin-block: -14px; display: inline-block; } input[type="range"] { min-height: 44px; } summary { min-height: 48px; display: flex; align-items: center; } } /* V151 armor: invisible unless needed. clip kills any future 320px spill without creating a scroll container (sticky-safe); focus ring appears for keyboard users only. */ @supports (overflow: clip) { html { overflow-x: clip; } } :focus-visible { outline: 2px solid #1a7f53; outline-offset: 2px; border-radius: 2px; } /* V152 rhythm: section labels get presence + guaranteed air, every page. Later in cascade at equal (0,1,0) specificity, so these declarations win for exactly the properties set; per-theme colors (.dark/.thD/.thL at (0,2,0)) still own color. display:block makes margin-bottom real on the span-based labels; gaps only grow, never shrink. */ .eyebrow { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.26em; margin-bottom: 18px; } .who-k { font-size: 12.5px; letter-spacing: .22em; margin: 30px 0 14px; } /* V153: heading rhythm, by default, everywhere. (a) .h1-quip carried margin: -8px ... — a negative top margin that shoved it into any large headline. Neutralized globally: +14px, same (0,1,0) specificity, later in cascade wins. (b) Every bold header gets a guaranteed floor of air before the next paragraph. Adjacent-sibling margins COLLAPSE (larger wins), so gaps only rise to 12px where they were tighter — nothing shrinks. */ .h1-quip { margin-top: 14px; } h1 + p, h2 + p, h3 + p { margin-top: 12px; } /* V157: trademark superscript — small, quiet, no line-box inflation */ .tm { font-size: .42em; vertical-align: .6em; letter-spacing: 0; opacity: .78; font-weight: 500; margin-left: 1px; } .brand .tm { margin-left: -10px; } /* V162 (rebased on V157 per owner): nav consistency, ZERO mechanics changed. The V158-V161 overlay/scroll-lock/armor system is deliberately NOT here — it misbehaved on real iPhones. The menu stays V157's simple absolute dropdown; this block only unifies its skin across all pages: - dark dropdown everywhere (index's own proven recipe, ported) - link text LEFT-aligned everywhere (chart alone was centered; majority wins) - burger identical everywhere (methodology shipped invisible: light glyph on the dark bar), green on hover/focus/open - burger breakpoint 760 -> 860 so seven links never wrap on small tablets */ @media (max-width: 860px) { .nav-links { display: none; } .mz-burger { display: inline-flex; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: #101216 !important; border-bottom: 1px solid #262a31 !important; box-shadow: 0 22px 48px rgba(0,0,0,.55); padding: 6px 22px 16px; gap: 0; z-index: 150; } .nav-links.open a { display: block; padding: 13px 0 !important; border-bottom: 1px solid #1c2026 !important; font-size: 16px; text-align: left !important; color: #e7e6e1 !important; text-decoration: none; } .nav-links.open a:hover, .nav-links.open a:active { color: #54c98a !important; } .nav-links.open a.btn { border-bottom: 0 !important; margin-top: 10px; text-align: center !important; background: #1a7f53 !important; color: #f5f4f0 !important; border-radius: 10px; } } .mz-burger { color: #f5f4f0 !important; background: transparent !important; border: 1px solid #2e333b !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer; touch-action: manipulation; } .mz-burger:hover, .mz-burger:focus-visible, .mz-burger[aria-expanded="true"] { color: #54c98a !important; border-color: #1a7f53 !important; } /* V169: hero strip breathing — equal air above and below the family strip. Was 30px above (hero-sub margin-bottom won the collapse) vs 14px below (hero-fam had no bottom margin; hero-lines' 14px won). Now 22px both. */ .hero-sub { margin-bottom: 22px !important; } .hero-fam { margin-top: 22px !important; margin-bottom: 22px !important; } /* V173: footer restructure — links row, icon row, attribution pushed down. Icons inline SVG (currentColor), green on hover, 44px tap targets. */ .foot-soc { margin: 14px 0 0; display: flex; justify-content: center; gap: 26px; } .foot-soc a { color: #8b8983; display: inline-flex; padding: 12px; margin: -12px; } .foot-soc a:hover, .foot-soc a:focus-visible { color: #54c98a; } .foot-soc svg { width: 19px; height: 19px; fill: currentColor; display: block; } .foot-attrib { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.08em; color: #8b8983; margin: 16px 0 0; text-align: center; } /* V176: keyword rails stack on mobile — one item per line, separators hidden (same law as one-sentence-per-line, extended to keyword rails). Desktop rendering unchanged: spans are inline, separators visible. */ @media (max-width: 860px) { .rs { display: none; } .ri { display: block; padding: 3px 0; } } /* V177: color-role rule — GREEN is the label voice. Kicker/label rails (short mono lines that introduce or tag content) render green; full- width divider bands (.specbar) stay muted by design — quiet reinforcement, not a second shout. Dark sections: #54c98a; light sections: #1a7f53 for contrast. */ .hero-fam, .hero .hero-fam, #top .hero-fam, .eq-stat { color: #54c98a !important; } .hero-fam .ri { color: #54c98a !important; } #proof figcaption b { color: #1a7f53; } /* V181: scroll progress bar — single deterministic driver. The native scroll-driven animation (body::after + animation-timeline) glitched on real WebKit: a tap triggers a style recompute and the animation momentarily resolves against a stale timeline snapshot (the ~half jump), re-linking on the next scroll. Native path removed; the JS rAF driver now runs for everyone. Same lesson as the nav rollback: mechanisms this toolchain cannot test on real WebKit stay boring. */ body::after { content: none !important; animation: none !important; } .lb{position:fixed;inset:0;z-index:1000;background:rgba(8,10,14,.93);display:flex;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity .18s ease} .lb.on{opacity:1} .lb img{max-width:94vw;max-height:92vh;max-height:88dvh;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.55);cursor:zoom-in;display:block} .lb.zoom{display:block;overflow:auto;-webkit-overflow-scrolling:touch} .lb.zoom img{max-width:none;max-height:none;width:auto;margin:4vh auto;padding:0 4vw;cursor:zoom-out;border-radius:0;box-shadow:none} .lb-x{position:fixed;top:14px;right:18px;z-index:1001;font:400 30px/1 system-ui;color:#e8e6df;background:none;border:0;cursor:pointer;opacity:.75} .lb-x:hover{opacity:1} @media (prefers-reduced-motion: reduce){.lb{transition:none}} /* ===== V188 batch ===== */ .hero-fam .rs { display: none; } .hero-fam .ri { display: block; padding: 3px 0; } .specbar { color: #54c98a; } .lbx { position: fixed; inset: 0; background: rgba(8,10,13,.93); display: none; align-items: center; justify-content: center; z-index: 400; padding: 4vh 4vw; cursor: zoom-out; } .lbx.on { display: flex; } .lbx img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } /* ===== V189: GREEN TOKEN RULE — #54c98a on dark surfaces, #1a7f53 on light, no third shades. Compound-selector belts. ===== */ .specbar.thD { color: #54c98a; } .thD .eyebrow { color: #54c98a; } .stk summary { display: flex; align-items: center; gap: 14px; } .stk summary h3 { margin: 0; flex: 1; text-align: left; } .lbx { touch-action: none; } /* V190: free's proven lightbox, ported verbatim */ .lb{position:fixed;inset:0;z-index:1000;background:rgba(8,10,14,.93);display:flex;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity .18s ease} .lb.on{opacity:1} .lb img{max-width:94vw;max-height:92vh;max-height:88dvh;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.55);cursor:zoom-in;display:block} .lb.zoom{display:block;overflow:auto;-webkit-overflow-scrolling:touch} .lb.zoom img{max-width:none;max-height:none;width:auto;margin:4vh auto;padding:0 4vw;cursor:zoom-out;border-radius:0;box-shadow:none} .lb-x{position:fixed;top:14px;right:18px;z-index:1001;font:400 30px/1 system-ui;color:#e8e6df;background:none;border:0;cursor:pointer;opacity:.75} .lb-x:hover{opacity:1} @media (prefers-reduced-motion: reduce){.lb{transition:none}} /* V190 belts + fixes */ .specbar.thD, .thD .eyebrow { color: #54c98a !important; } .stack-acc summary::after { content: none; } .stack-acc .chev { color: #54c98a; } .stk-body { text-align: center; } /* V191: price-action heading matches the category showpiece scale */ #price-action h2 { font-size: clamp(34px, 3.2vw + 18px, 54px); } /* V196: pricing anchor clears the 64px sticky nav (section has reduced padding-top); access sub in brand green */ section#pricing { scroll-margin-top: 92px; } #access .sub { color: #54c98a; } /* V198: replay centered on all devices; replay kickers in brand green */ .replay { max-width: 860px; margin: 44px auto 0; text-align: center; background: #0c0e12; border: 1px solid rgba(84,201,138,0.18); border-radius: 18px; padding: 10px 30px; } .rp-row { padding: 24px 0; border-bottom: 1px dashed rgba(245,244,240,0.09); } .rp-row:last-child { border-bottom: 0; } .rp-tag { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: #54c98a; margin-bottom: 10px; } .rp-row p { margin: 0 auto; max-width: 680px; font-size: 15.5px; line-height: 1.7; color: #bfbeb8; } .rp-chip { display: inline-block; white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; color: #b9b8b2; border: 1px solid rgba(245,244,240,0.24); border-radius: 6px; padding: 2px 8px; vertical-align: 1px; } #replay .kicker { color: #54c98a; } @media (max-width: 640px) { .replay { padding: 4px 16px; margin-top: 32px; } .rp-row { padding: 20px 0; } .rp-dash { display: none; } .rp-chip { display: block; width: max-content; max-width: 100%; margin: 10px auto; } } /* V201: seven-checks accordion — titles and panel text centered on all devices */ .stack-acc .stk summary h3 { flex: 0 1 auto; text-align: center; } .stack-acc .stk-body { text-align: center; } .stack-acc .stk-body p { text-align: center; margin-left: auto; margin-right: auto; max-width: 660px; } /* V204: brand tap lands at absolute page top (nothing hidden under the sticky nav); desktop lightbox zoom actually magnifies */ section#top { scroll-margin-top: 64px; } @media (min-width: 1000px) and (hover: hover) { .lb.zoom img { width: min(170vw, 2800px); height: auto; } } /* V210: hero anti-scam disambiguation strip */ .hero-not { margin: 18px 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8b8983; } .hero-not-is { margin: 6px 0 0; font-size: 15.5px; font-weight: 600; color: #f5f4f0; } /* V211: a unit never breaks mid-phrase — wraps happen between items */ .ri, .nb { white-space: nowrap; } /* V212: featured member quote + centered FAQ answers */ .quote { max-width: 720px; margin: 10px auto 0; text-align: center; } .quote blockquote { margin: 0; font-size: clamp(19px, 1.2vw + 14px, 23px); line-height: 1.65; font-weight: 600; color: #16181c; } .quote blockquote::before { content: "\201C"; color: #1a7f53; } .quote blockquote::after { content: "\201D"; color: #1a7f53; } .quote figcaption { margin-top: 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; color: #1a7f53; } .quote-note { margin-top: 24px; text-align: center; font-size: 14px; color: #6b6b66; } .faq details p { text-align: center; } /* V213: seven-checks accordion — number pinned to the left edge, mirroring the + on the right; title stays centered */ .stack-acc .stk summary .n { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }