/* ========================================================================= DeviceShelf — homepage redesign (home.css) Scope: ONLY index.html, gated behind . Goal: a system utility, not a SaaS landing page. References: Little Snitch (trust, calm), TablePlus (precise, native), Panic (human tone). No gradient text, no glossy pills, no glow. Real app screenshots are the hero. Content stays 1:1 — this file only changes how it looks. ========================================================================= */ .home2 { --ink: #17191e; /* near-black, warm */ --ink-soft: #55585f; --ink-faint: #646771; /* WCAG AA on paper (was #8a8d94, 3.18:1 fail) */ --paper: #fafafa; /* neutral off-white — not warm, not clinical (Option A) */ --paper-2: #f0f0ef; /* card / recessed */ --line: #e4e3e1; /* hairline — neutral, no tan */ --line-2: #d8d7d5; --signal: #1f9d5c; /* "online/active" green, aligned to the logo mint (#33cf90) */ --signal-ink: #0f6b3a; --amber: #b7791f; --red: #c0392b; --accent: #2b4bd6; /* one restrained blue, used sparingly for links */ --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--paper); color: var(--ink); } /* Kill the old page's atmospheric noise on the homepage only. */ .home2 { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* A quiet technical grid behind the hero — atmosphere without gradients. */ .home2 .hero2 { position: relative; padding: clamp(2.5rem, 7vh, 6rem) 0 clamp(3rem, 8vh, 6.5rem); background: linear-gradient(to bottom, rgba(250,250,250,0) 60%, var(--paper) 100%), radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0); background-size: 100% 100%, 26px 26px; border-bottom: 1px solid var(--line); overflow: hidden; } .home2 .hero2-inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* ---- copy column ------------------------------------------------------ */ .home2 .eyebrow2 { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: 0.6rem; } .home2 .eyebrow2::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(31,138,76,0.16); } .home2 .hero2-title { font-family: var(--sans); font-weight: 680; font-size: clamp(2.5rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.028em; margin: 0 0 1.3rem; color: var(--ink); text-wrap: balance; } /* Neutralise the inherited gradient span — solid ink, no rainbow. */ .home2 .hero2-title .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); } .home2 .hero2-sub { font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.55; color: var(--ink-soft); max-width: 34em; margin: 0 0 1.9rem; } .home2 .cta-row2 { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 1.15rem; } .home2 .btn2 { font-family: var(--sans); font-size: 0.98rem; font-weight: 560; padding: 0.82rem 1.35rem; border-radius: 9px; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform .12s ease, background .12s ease, border-color .12s ease; line-height: 1; } .home2 .btn2-solid { background: var(--ink); color: #fff; border: 1px solid var(--ink); } .home2 .btn2-solid:hover { background: #000; transform: translateY(-1px); } .home2 .btn2-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .home2 .btn2-ghost:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); } /* Trust line — the promise, set as an engineered microtext. */ .home2 .trustline { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-faint); margin: 0 0 1.9rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; } .home2 .trustline span { display: inline-flex; align-items: center; gap: 0.45rem; } .home2 .trustline span::before { content: "✓"; color: var(--signal); font-family: var(--sans); font-weight: 700; } /* Spec tags (former glossy pills) — flat hairline mono chips. */ .home2 .hero2-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; } .home2 .hero2-specs .pill-info { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 0.42rem 0.68rem; box-shadow: none; } /* ---- screenshot column: the real app, seated like a real window ------- */ .home2 .hero2-shot { position: relative; } .home2 .app-window { border: 1px solid var(--line-2); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 1px rgba(20,22,28,0.04), 0 18px 40px -18px rgba(20,22,28,0.28); } .home2 .app-window .app-bar { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem; background: var(--paper-2); border-bottom: 1px solid var(--line); } .home2 .app-window .tl { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 0.5px solid rgba(0,0,0,0.12); } .home2 .app-window .tl.r { background: #ec6a5e; } .home2 .app-window .tl.y { background: #f4bf4f; } .home2 .app-window .tl.g { background: #61c554; } .home2 .app-window .app-title { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); margin-left: 0.5rem; } .home2 .app-window img { display: block; width: 100%; height: auto; } /* A small live badge pinned inside the window — very Little Snitch. */ .home2 .app-window { position: relative; } .home2 .shot-live { position: absolute; top: 44px; right: 14px; background: rgba(23,25,30,0.92); color: #fff; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em; padding: 0.34rem 0.6rem; border-radius: 7px; box-shadow: 0 8px 20px -10px rgba(20,22,28,0.6); display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(6px); } .home2 .shot-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #61c554; box-shadow: 0 0 0 3px rgba(97,197,84,0.28); } /* Plain, quiet caption under the screenshot. */ .home2 .shot-meta { margin: 0.9rem 0 0; font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; color: var(--ink-faint); } /* ---- responsive ------------------------------------------------------- */ @media (max-width: 900px) { .home2 .hero2-inner { grid-template-columns: 1fr; gap: 2.2rem; } .home2 .hero2-shot { order: 2; } .home2 .shot-tag { left: 10px; } } /* ========================================================================= FULL-PAGE ROLLOUT — restyle every shared section under .home2 only. Strategy: override styles.css classes in-scope; no other page is touched. ========================================================================= */ /* ---- kill ALL gradient text on the homepage ---------------------------- */ .home2 .grad { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit; } /* ---- nav: paper, hairline, ink ---------------------------------------- */ .home2 .nav { background: rgba(251,251,249,0.82); border-bottom: 1px solid var(--line); } .home2 .nav.scrolled { box-shadow: 0 1px 0 var(--line); } .home2 .nav-links a { color: var(--ink-soft); font-weight: 500; } .home2 .nav-links a:hover { color: var(--ink); } .home2 .brand-wordmark { color: var(--ink); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; font-weight: 680; letter-spacing: -0.02em; } .home2 .lang-switcher { border-color: var(--line-2); color: var(--ink-soft); background: #fff; } /* ---- buttons: ink primary, hairline ghost ----------------------------- */ .home2 .btn-primary { background: var(--ink); color: #fff; box-shadow: none; border: 1px solid var(--ink); border-radius: 9px; } .home2 .btn-primary:hover { background: #000; box-shadow: none; } .home2 .btn-ghost, .home2 .hero .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); border-radius: 9px; } .home2 .btn-ghost:hover { background: rgba(0,0,0,0.02); border-color: var(--ink); } .home2 .btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 9px; } .home2 .btn-secondary:hover { border-color: var(--ink); } /* ---- section rhythm: alternate paper / recessed ----------------------- */ .home2 .section { background: var(--paper); } .home2 .gallery-section, .home2 .story-section, .home2 .ai-section, .home2 .providers-section, .home2 .server-section, .home2 .faq-section, .home2 .pricing-section { background: var(--paper-2); } /* ---- eyebrows: mono, faint, dotted ------------------------------------ */ .home2 .eyebrow { font-family: var(--mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .home2 .eyebrow.center { display: block; } /* ---- headings --------------------------------------------------------- */ .home2 .section-title, .home2 .statement .display, .home2 .ai-text h2, .home2 .mobile-text h2 { color: var(--ink); letter-spacing: -0.028em; font-weight: 680; } .home2 .statement .display { font-weight: 700; } .home2 .section-sub, .home2 .statement-sub { color: var(--ink-soft); } /* ---- statement: solid ink, calmer ------------------------------------- */ .home2 .statement { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ---- story ------------------------------------------------------------ */ .home2 .story-prose p { color: var(--ink-soft); } .home2 .story-sign { color: var(--ink-faint); font-family: var(--mono); font-size: 0.85rem; } /* ---- feature grid: a numbered spec index, NOT icon cards -------------- */ /* No card boxes, no emoji. Each feature is an entry in a technical index: a mono ordinal, a hairline rule, a strong title, a quiet description. */ .home2 .feature-grid { counter-reset: feat; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); column-gap: 2.6rem; row-gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--ink); } .home2 .feature { counter-increment: feat; position: relative; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 1.5rem 0 1.7rem; } .home2 .feature::before { content: counter(feat, decimal-leading-zero); position: absolute; top: 1.5rem; right: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-faint); } .home2 .feature-icon { display: none; } /* drop the emoji tiles */ .home2 .feature h3 { color: var(--ink); font-weight: 640; font-size: 1.05rem; letter-spacing: -0.012em; margin: 0 2.4rem 0.5rem 0; } .home2 .feature p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; } .home2 .feature p a { color: var(--accent); } .home2 .feature .small a { color: var(--accent); } /* the three lead features get a quiet "core" marker, not a glossy panel */ .home2 .feature.feature-highlight { background: transparent; box-shadow: none; } .home2 .feature.feature-highlight h3::after { content: "core"; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-ink); border: 1px solid rgba(31,138,76,0.32); border-radius: 5px; padding: 0.12rem 0.36rem; margin-left: 0.55rem; vertical-align: middle; } /* ---- window chrome: light, seated (screenshots pop) ------------------- */ .home2 .window { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 1px 1px rgba(20,22,28,0.04), 0 18px 40px -20px rgba(20,22,28,0.26); } .home2 .window-bar { height: auto; background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 0.55rem 0.85rem; } .home2 .window-title { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); } .home2 .window .dot { border: 0.5px solid rgba(0,0,0,0.12); } /* gallery captions */ .home2 .shot-cap { color: var(--ink-soft); } /* ---- AI section: light, precise chat ---------------------------------- */ .home2 .ai-text .lead { color: var(--ink-soft); } .home2 .ai-text .check-list li { color: var(--ink); } .home2 .ai-text .muted { color: var(--ink-faint); } .home2 .ai-provider { background: #fff; border: 1px solid var(--line); border-radius: 9px; } .home2 .ai-provider strong { color: var(--ink); } .home2 .ai-provider small { color: var(--ink-faint); } .home2 .window-body.chat { background: #fff; } .home2 .msg.user { background: var(--ink); color: #fff; } .home2 .msg.bot { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); } /* ---- security: was dark → paper, hairline cards ----------------------- */ .home2 .security-section { background: var(--paper); } .home2 .security-section .section-title { color: var(--ink); } .home2 .security-section .section-sub { color: var(--ink-soft); } .home2 .security-section .eyebrow { color: var(--signal-ink); } .home2 .security-grid { border-top: 1px solid var(--ink); } .home2 .security-card { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.4rem 1.6rem 1.5rem 0; } .home2 .security-card h3 { color: var(--ink); font-weight: 640; letter-spacing: -0.01em; } .home2 .security-card p { color: var(--ink-soft); } /* ---- detection chips: mono hairline tags ------------------------------ */ /* Detection legend: flat mono hairline tags (not white icon cards); size to content so long labels like "Unknown → ask AI" never clip. */ .home2 .provider-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin-top: 2.2rem; } .home2 .provider { flex: 0 0 auto; width: auto; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); font-family: var(--mono); font-size: 0.82rem; padding: 0.5rem 0.9rem; white-space: nowrap; box-shadow: none; gap: 0.5rem; transition: border-color .12s ease, color .12s ease; } .home2 .provider:hover { border-color: var(--ink); color: var(--ink); } /* ---- mobile: paper, subtle phones ------------------------------------- */ .home2 .mobile-section { background: var(--paper); } .home2 .mobile-text .lead { color: var(--ink-soft); } .home2 .mobile-text .check-list li { color: var(--ink); } /* ---- server: paper section, terminal stays intentionally dark --------- */ .home2 .server-section { color: var(--ink); } .home2 .server-section .section-title { color: var(--ink); } .home2 .server-section .section-sub { color: var(--ink-soft); } .home2 .server-section .term-window { background: #0f1116; border-color: #23262e; box-shadow: 0 18px 44px -22px rgba(20,22,28,0.55); } .home2 .server-section .term-window .window-bar { background: #171a20; border-bottom-color: #23262e; } .home2 .server-section .term-window .window-title { color: #6b7080; } .home2 .server-section .term-body { color: #cbd3df; } .home2 .server-section .term-body .t-cmd { color: #7fe0a3; } .home2 .server-section .btn-ghost { color: var(--ink); border-color: var(--line-2); } .home2 .server-section .btn-ghost:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); } .home2 .server-token-hint, .home2 .server-token-hint code { color: var(--ink-soft); } /* ---- contact form ----------------------------------------------------- */ .home2 .contact-form input, .home2 .contact-form select, .home2 .contact-form textarea { background: #fff; border: 1px solid var(--line-2); border-radius: 9px; color: var(--ink); } .home2 .contact-form input:focus, .home2 .contact-form select:focus, .home2 .contact-form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(43,75,214,0.22); } .home2 a:focus-visible, .home2 button:focus-visible, .home2 summary:focus-visible, .home2 .btn:focus-visible, .home2 .btn2:focus-visible, .home2 .dl-chip:focus-visible, .home2 select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; } .home2 .contact-form label > span { color: var(--ink); } /* ---- FAQ: hairline details -------------------------------------------- */ .home2 .faq { background: #fff; border: 1px solid var(--line); border-radius: 10px; } .home2 .faq summary { color: var(--ink); } .home2 .faq p { color: var(--ink-soft); } .home2 .faq[open] { border-color: var(--line-2); } /* ---- privacy: was dark → paper ---------------------------------------- */ .home2 .privacy-section { background: var(--paper); color: var(--ink); } .home2 .privacy-section .section-title { color: var(--ink); } .home2 .privacy-grid { border-top: 1px solid var(--ink); } .home2 .privacy-card { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.4rem 1.6rem 1.5rem 0; } .home2 .privacy-card h3 { color: var(--ink); font-weight: 640; letter-spacing: -0.01em; } .home2 .privacy-card p { color: var(--ink-soft); } /* ---- pricing: clean, ink CTA ------------------------------------------ */ .home2 .price-card { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; } .home2 .price-card.featured { border-color: var(--ink); box-shadow: 0 20px 50px -30px rgba(20,22,28,0.4); } .home2 .price-card h3 { color: var(--ink); } .home2 .price .amount { color: var(--ink); } .home2 .price .strike { color: var(--ink-faint); } .home2 .price .period { color: var(--ink-faint); font-family: var(--mono); } .home2 .price-card ul li { color: var(--ink-soft); } .home2 .launch-banner { background: rgba(31,157,92,0.08); color: var(--signal-ink); border: 1px solid rgba(31,157,92,0.28); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em; } .home2 .dl-chip { border-color: var(--line-2); color: var(--ink); background: #fff; } .home2 .dl-chip:hover { border-color: var(--ink); } /* ---- requirements cards: subtle tint, NO left-border accent ----------- */ .home2 .reqs-grid { border-top: 1px solid var(--ink); } .home2 .reqs-card, .home2 .reqs-card.ok, .home2 .reqs-card.warn, .home2 .reqs-card.info { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.4rem 1.6rem 1.5rem 0; } .home2 .reqs-card.ok h3 { color: var(--signal-ink); } .home2 .reqs-card.warn h3 { color: var(--amber); } .home2 .reqs-card h3 { color: var(--ink); font-weight: 640; letter-spacing: -0.01em; } .home2 .reqs-card li { color: var(--ink-soft); } .home2 .reqs-card li strong { color: var(--ink); } /* ---- sibling band ----------------------------------------------------- */ .home2 .sibling-band { background: #fff; border: 1px solid var(--line); border-radius: 12px; } .home2 .sibling-copy h3 { color: var(--ink); } .home2 .sibling-copy .muted { color: var(--ink-soft); } /* ---- footer: light anchor, hairline top ------------------------------- */ .home2 .footer { background: var(--paper-2); color: var(--ink-soft); border-top: 1px solid var(--line); } .home2 .footer h4 { color: var(--ink); } .home2 .footer a { color: var(--ink-soft); } .home2 .footer a:hover { color: var(--ink); } .home2 .footer .brand span { color: var(--ink); } .home2 .footer .copyright { color: var(--ink-faint); border-top-color: var(--line); } /* ---- misc: lists, check-lists, muted ---------------------------------- */ .home2 .check-list li::before { color: var(--signal); } .home2 .muted { color: var(--ink-faint); } .home2 .pill-info { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); box-shadow: none; font-family: var(--mono); font-size: 0.75rem; } /* ========================================================================= LEAN STRUCTURE — layouts for the restructured homepage ========================================================================= */ /* Local-first: 4 hairline blocks across */ .home2 .security-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 2.6rem; } /* Honest expectations: 2 hairline columns, no tinted cards */ .home2 .reqs-grid--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 3rem; margin-top: 2.5rem; border-top: 1px solid var(--ink); } .home2 .reqs-grid--2 .reqs-card, .home2 .reqs-grid--2 .reqs-card.ok, .home2 .reqs-grid--2 .reqs-card.warn { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.6rem 0 1.7rem; } .home2 .reqs-grid--2 .reqs-card.ok h3 { color: var(--signal-ink); } .home2 .reqs-grid--2 .reqs-card.warn h3 { color: var(--ink); } .home2 .reqs-grid--2 .reqs-card h3 { font-weight: 640; letter-spacing: -0.01em; margin-bottom: 0.9rem; } /* Also-available teasers — quiet, link-forward, not big mockups */ .home2 .teaser-section { background: var(--paper); } .home2 .teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 3rem; border-top: 1px solid var(--ink); max-width: 900px; margin: 0 auto; } .home2 .teaser { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--line); } .home2 .teaser h3 { color: var(--ink); font-weight: 640; font-size: 1.05rem; margin-bottom: 0.4rem; } .home2 .teaser p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 0.5rem; line-height: 1.5; } .home2 .teaser a { color: var(--accent); font-family: var(--mono); font-size: 0.82rem; } /* Contact line — replaces the whole contact form */ .home2 .contact-line { text-align: center; margin: 2.4rem 0 0; color: var(--ink-soft); font-size: 0.98rem; } .home2 .contact-line a { color: var(--accent); } /* Pricing includes-list: quieter, mono checks */ .home2 .price-card ul li { list-style: none; padding-left: 0; } /* ========================================================================= PROOF SECTIONS — Security report · Optional AI · Platforms · Server · Power Same hairline / mono spec language, not glossy cards. ========================================================================= */ /* Section rhythm for the new proof block */ .home2 .security-report-section, .home2 .platform-section, .home2 .power-section { background: var(--paper); } .home2 .ai-lite-section, .home2 .server-lite-section { background: var(--paper-2); } /* Capability grids (Security, AI): label-only hairline blocks with a check */ .home2 .proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 2.6rem; margin-top: 2.5rem; border-top: 1px solid var(--ink); } .home2 .proof-item { border-bottom: 1px solid var(--line); padding: 1.25rem 0 1.3rem; } .home2 .proof-item h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: baseline; gap: 0.55rem; } .home2 .proof-item h3::before { content: "✓"; color: var(--signal); font-weight: 700; font-size: 0.9rem; } /* Platform support: three labelled columns */ .home2 .platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 2.6rem; margin-top: 2.2rem; border-top: 1px solid var(--ink); } .home2 .platform-col { border-bottom: 1px solid var(--line); padding: 1.4rem 0 1.5rem; } .home2 .platform-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.45rem; } .home2 .platform-os { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; } /* Server-edition: narrow, centred, calm */ .home2 .container.narrow { max-width: 720px; } .home2 .server-lite-section .section-sub { text-align: center; } .home2 .center-cta { text-align: center; margin-top: 1.6rem; } /* Power users: a dense mono capability list */ .home2 .power-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 2.6rem; border-top: 1px solid var(--ink); } .home2 .power-list li { border-bottom: 1px solid var(--line); padding: 0.95rem 0; color: var(--ink); font-family: var(--mono); font-size: 0.9rem; letter-spacing: -0.01em; } .home2 .power-list li::before { content: none; } /* ========================================================================= SITE-WIDE THEME — remap styles.css design tokens inside .home2 so EVERY page (incl. per-page inline