/* Root-cause fix attempts (100vw on the full-bleed sections, then margin-left/right:calc(50% - 50vw)) both still overflowed by the exact same amount, because the CSS `vw` unit itself includes the scrollbar gutter's width - confirmed live: .channels-section/.setup-section rendered at 982px (== window.innerWidth, scrollbar included) against a 966px (== document.documentElement.clientWidth, scrollbar excluded) viewport, an 8px gap that reappears no matter how the vw-based math is rearranged. overflow-x:hidden on html (not body, which would break the nav's position:sticky) is the standard safety net for this - it can't stop an element from computing wider than the viewport, but it stops that from ever becoming a page-wide horizontal scrollbar. */ /* scroll-behavior:smooth was applied globally here before - that makes normal mouse-wheel/trackpad scrolling feel laggy/janky (every wheel tick re-triggers a smooth-scroll animation that fights the previous one), not just anchor-link jumps. Smooth scrolling is now opt-in via .smooth-scroll, added to only for the duration of an in-page anchor jump (see landing.js). */ html.smooth-scroll { scroll-behavior: smooth; } html { overflow-x: hidden; } body { font-family: -apple-system, "Segoe UI", Arial, sans-serif; margin: 0; color: var(--ink); line-height: 1.6; background: var(--surface); } a { color: inherit; } .icon-svg { width: 22px; height: 22px; } /* Transparent at the top of the page (no visible seam against the hero below it) - landing.js toggles .nav-scrolled once the visitor actually scrolls, which is what brings in the solid backdrop/border/shadow so the nav reads as a distinct, "active" bar once it's overlapping real content instead of floating in the hero with a hairline border under it. */ nav { position: sticky; top: 0; z-index: 100; box-sizing: border-box; background: transparent; border-bottom: 1px solid transparent; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } nav.nav-scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); box-shadow: 0 2px 14px rgba(20,20,15,0.06); } .cap-strip { max-width: none; width: 100%; margin: 0 auto; padding: 0 32px 64px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; } /* Small pill badges, same visual language as .channel-pill further down this file - was plain dot+text before, which on mobile's single-column stack read as a flat bulleted list rather than a highlight row. */ .cap-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: rgba(14,107,69,0.05); border: 1px solid rgba(14,107,69,0.16); border-radius: 999px; padding: 8px 16px; white-space: nowrap; animation: capFloat 3.2s ease-in-out infinite; } .cap-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } @keyframes capFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Staggered per-badge so all 4 bob out of sync (feels organic/floating, not like one rigid block moving together) - same idea as .feature-item's staggered reveal delay above, just for a continuous animation instead of a one-time entrance. */ .cap-item:nth-child(1) { animation-delay: 0s; } .cap-item:nth-child(2) { animation-delay: 0.5s; } .cap-item:nth-child(3) { animation-delay: 1s; } .cap-item:nth-child(4) { animation-delay: 1.5s; } .wordmark { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .wordmark .mark { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; } @media (max-width: 480px) { .wordmark .wordmark-text { display: none; } footer .wordmark .wordmark-text { display: inline; } } .wordmark .suffix { color: var(--ink-muted); font-weight: 500; } footer .wordmark .suffix { display: inline-block; padding-left: 0.42em; } nav .nav-links { display: flex; align-items: center; gap: 28px; } nav .nav-links .link { font-size: 14px; color: var(--ink-2); text-decoration: none; } nav .nav-links .link:hover { color: var(--ink); } .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; } .nav-dropdown-trigger svg { opacity: 0.7; transition: transform 0.15s ease; } .nav-dropdown:hover .nav-dropdown-trigger svg, .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; min-width: 180px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 200; } .nav-dropdown-menu-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,20,15,0.12); padding: 6px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; } .nav-dropdown-item { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; } .nav-dropdown-item:hover { background: var(--plane); color: var(--ink); } nav .nav-cta { background: var(--ink); color: white; padding: 9px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; } nav .nav-cta:hover { background: var(--brand); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--border); border-radius: 7px; color: var(--ink); cursor: pointer; flex-shrink: 0; } nav .nav-profile { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--border); transition: border-color 0.15s; } nav .nav-profile:hover { border-color: var(--ink-muted); } nav .nav-profile-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: white; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } nav .nav-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Just above the 900px hamburger breakpoint, the full desktop nav (4 links/ dropdowns + language select + login-or-profile chip) was tight enough to occasionally not fit its row, forcing the page wider than the viewport and causing a page-wide horizontal scrollbar (confirmed live: scrollWidth 974px vs clientWidth 966px at a 982px window). Tightening the gap and the language select's width here gives that zone real breathing room without touching the 900px/600px breakpoints anything else relies on. */ @media (min-width: 901px) and (max-width: 1100px) { nav .nav-links { gap: 18px; } .lang-select { padding: 5px 6px; font-size: 12px; max-width: 118px; } } .hero { box-sizing: border-box; padding: 88px 32px 80px; } .hero-inner { box-sizing: border-box; max-width: none; width: 100%; margin: 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } .hero-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border); padding: 5px 12px; border-radius: 4px; margin-bottom: 22px; } .hero h1 { font-size: 44px; margin: 0 0 20px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink); } .hero p.lead { font-size: 17px; color: var(--ink-2); max-width: 480px; margin: 0 0 30px; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .hero-mock { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--card); } .hero-mock-chrome { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--plane); border-bottom: 1px solid var(--border); } .hero-mock-url { flex: 1; margin-left: 6px; text-align: center; font-size: 11.5px; color: var(--ink-muted); background: white; border: 1px solid var(--border); border-radius: 5px; padding: 3px 10px; } .hero-mock-scene { position: relative; height: 420px; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(162,208,195,0.35), transparent 55%), linear-gradient(160deg, #eef4f0, var(--plane) 70%); } /* Abstract "site behind the widget" - plain shapes, no real copy/images, purely to sell "this widget floats on YOUR site" instead of empty gradient space. Sized in % of the scene so it scales down naturally at the same breakpoints already used for .hero-mock-scene/.hero-widget below, no extra media queries needed for it. */ .hero-fake-site { position: absolute; inset: 0; padding: 7%; box-sizing: border-box; opacity: 0.6; } .hero-fake-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 8%; } .hero-fake-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .hero-fake-bar { display: inline-block; height: 8px; border-radius: 4px; background: rgba(20,20,15,0.14); } .hero-fake-hero { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8%; } .hero-fake-cta { width: 90px; height: 22px; border-radius: 6px; background: var(--brand); opacity: 0.4; margin-top: 4px; } .hero-fake-cards { display: flex; gap: 3%; } .hero-fake-card { flex: 1; height: 60px; border-radius: 8px; background: rgba(20,20,15,0.06); border: 1px solid rgba(20,20,15,0.08); } /* Split into an outer wrap (positioning + float animation + the notification badge, which must NOT be clipped) and the inner .hero-widget (the actual card, which needs overflow:hidden to keep its header/body/input corners clean) - the badge sits on the wrap so it isn't cut off by that overflow. */ .hero-widget-wrap { position: absolute; bottom: 22px; right: 20px; width: min(260px, calc(100% - 40px)); animation: heroFloat 3.6s ease-in-out infinite; } .hero-widget { position: relative; background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .hero-widget-header { position: relative; background: var(--brand); color: white; padding: 12px 14px; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; } .hero-widget-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; } .hero-widget-msg { font-size: 12px; line-height: 1.45; padding: 9px 11px; border-radius: 9px; max-width: 88%; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; } .hero-widget-msg.is-visible { opacity: 1; transform: translateY(0); } .hero-widget-msg.bot { background: var(--plane); border: 1px solid var(--border); color: var(--ink); align-self: flex-start; } .hero-widget-msg.user { background: var(--brand); color: white; align-self: flex-end; } /* Notification badge + typing indicator - both start hidden, toggled by the JS timeline below via a plain "is-visible" class rather than inline styles, so prefers-reduced-motion / no-JS just leaves them invisible. Badge sits on the WIDGET's own outer corner (half overlapping the edge, the universal "unread count on a card" pattern), not inside the header bar next to the collapse arrow - sitting right next to that icon read as if the badge belonged to the arrow itself, confusing about what "1" even meant. */ .hero-widget-badge { opacity: 0; transform: scale(0.4); transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); background: #e0553f; color: white; font-size: 10px; font-weight: 700; line-height: 1; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -6px; right: -6px; z-index: 1; box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 2px white; } .hero-widget-badge.is-visible { opacity: 1; transform: scale(1); } .hero-widget-typing { display: none; align-items: center; gap: 4px; align-self: flex-start; background: var(--plane); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; } .hero-widget-typing.is-visible { display: flex; } .hero-widget-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); animation: heroTypingBounce 1.1s ease-in-out infinite; } .hero-widget-typing span:nth-child(2) { animation-delay: 0.15s; } .hero-widget-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes heroTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } } .hero-widget-input { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); color: var(--ink-muted); } .hero-widget-placeholder { flex: 1; font-size: 12px; color: var(--ink-muted); } .hero-widget-emoji { font-size: 14px; line-height: 1; } .hero-widget-send { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .hero-widget-wrap { animation: none; } .hero-widget-typing span { animation: none; } } @media (max-width: 900px) { .hero-mock-scene { height: 360px; } } .industry-page { --industry-accent: var(--accent); } .industry-blue { --industry-accent: #3f6f8f; } .industry-amber { --industry-accent: #b47732; } .industry-hero { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 104px 5vw 92px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr); gap: 7vw; align-items: center; } .industry-hero-copy { max-width: 690px; } .industry-audience { color: var(--industry-accent); font-size: 13px; font-weight: 700; margin: 0 0 18px; } /* Capped at 48px (was clamp(...,66px) - genuinely oversized on wide screens, confirmed live: 64-66px real rendered size vs the homepage hero's own 44px, an odd scale mismatch between two peer pages with a near-identical 2-column hero layout). 48px matches the tablet breakpoint below, which already used 48px as a flat override - now the whole scale (38 -> 48) is one smooth curve instead of jumping mid-way. */ .industry-hero h1 { max-width: 680px; margin: 0 0 22px; font-size: clamp(38px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); } .industry-intro { max-width: 620px; margin: 0 0 32px; color: var(--ink-2); font-size: 18px; line-height: 1.7; } .industry-hero .hero-tag { color: var(--industry-accent); } .industry-hero-art { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, var(--card), var(--plane)); box-shadow: var(--shadow-lg); } .industry-art-top, .industry-art-line, .industry-art-row { display: flex; align-items: center; gap: 10px; } .industry-art-top { justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--border); color: var(--ink); font-size: 14px; font-weight: 700; } .industry-live-dot { color: var(--industry-accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .industry-live-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--industry-accent); } .industry-art-line { padding: 22px 0 14px; color: var(--ink-2); font-size: 13px; } .industry-art-line b { margin-left: auto; color: var(--ink-muted); font-size: 11px; font-weight: 500; } .industry-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--industry-accent); color: white; font-size: 11px; font-weight: 700; } .industry-art-message { margin: 0 0 22px; padding: 16px; border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.55; } .industry-art-row { justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: 12px; } .industry-art-row strong { color: var(--ink); font-size: 12px; } .industry-section { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 96px 5vw; } .industry-section-head { align-items: end; margin-bottom: 52px; } .industry-section-head h2 { max-width: 610px; font-size: 38px; line-height: 1.1; } .industry-section-lead { max-width: 360px; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; } /* Upgraded from the plain seamless-bordered grid (gap:1px trick) to the same spaced/shadowed/hover-lift card treatment #features .feature-item already uses on the homepage - these cards read as flat/plain next to that page by comparison. */ .industry-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .industry-feature { min-height: 250px; padding: 30px; background: var(--card); border-radius: 16px; box-shadow: 0 10px 30px rgba(20,37,29,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; } .industry-feature:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,37,29,0.11); } .industry-feature-number { display: block; margin-bottom: 38px; color: var(--industry-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; } .industry-feature h3 { margin: 0 0 12px; color: var(--ink); font-size: 19px; line-height: 1.25; } .industry-feature p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; } .industry-workflow-section { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 96px 5vw; } .industry-workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; } .industry-workflow-step { padding-top: 24px; border-top: 2px solid var(--industry-accent); } .industry-workflow-step .industry-feature-number { margin-bottom: 24px; } .industry-workflow-step h3 { margin: 0 0 10px; color: var(--ink); font-size: 18px; } .industry-workflow-step p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; } .industry-scope-note { max-width: 760px; margin: 48px 0 0; padding: 16px 18px; border-left: 3px solid var(--industry-accent); background: var(--plane); color: var(--ink-2); font-size: 13px; line-height: 1.6; } .industry-outcomes { background: var(--brand); color: white; } .industry-outcomes-inner { width: 100%; box-sizing: border-box; max-width: none; margin: 0; padding: 88px 5vw; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8vw; align-items: center; } .industry-outcomes h2 { max-width: 450px; margin: 6px 0 16px; color: white; font-size: 38px; line-height: 1.1; } .industry-outcomes p { max-width: 460px; margin: 0; color: rgba(255,255,255,0.72); line-height: 1.65; } .industry-outcomes .eyebrow { color: rgba(255,255,255,0.6); } .industry-outcomes ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .industry-outcomes li { display: flex; gap: 14px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.17); color: rgba(255,255,255,0.9); font-size: 16px; } .industry-outcomes li span { color: var(--accent); font-weight: 700; } .industry-faq-section { padding-bottom: 108px; } .industry-faq-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 8vw; align-items: start; } .industry-faq-list { min-width: 0; } .industry-faq-item { border-top: 1px solid var(--border); } .industry-faq-item:last-child { border-bottom: 1px solid var(--border); } .industry-faq-item summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 16px; font-weight: 700; } .industry-faq-item summary::-webkit-details-marker { display: none; } .industry-faq-item summary::after { content: '+'; color: var(--industry-accent); font-size: 22px; font-weight: 400; } .industry-faq-item[open] summary::after { content: '\2212'; } .industry-faq-item p { max-width: 700px; margin: -4px 0 22px; color: var(--ink-2); font-size: 14px; line-height: 1.7; } .industry-faq-aside { position: sticky; top: 96px; padding: 28px; border: 1px solid var(--border); border-top: 3px solid var(--industry-accent); background: var(--plane); } .industry-faq-aside h3 { margin: 8px 0 24px; color: var(--ink); font-size: 22px; line-height: 1.25; } .industry-faq-aside ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; } .industry-faq-aside li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; } .industry-faq-aside li > span { color: var(--industry-accent); font-size: 18px; font-weight: 700; } .industry-faq-aside strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.35; } .industry-faq-aside p { margin: 5px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; } .industry-faq-aside .industry-card-link { margin-top: 26px; } .industry-transcript { display: grid; gap: 10px; } .industry-transcript-row { max-width: 88%; padding: 10px 13px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--border); } .industry-transcript-row p { margin: 3px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; } .industry-transcript-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); } .industry-transcript-bot { margin-left: auto; background: var(--industry-accent); border-color: var(--industry-accent); } .industry-transcript-bot p { color: rgba(255,255,255,0.92); } .industry-transcript-bot .industry-transcript-label { color: rgba(255,255,255,0.75); } .industry-cta p { max-width: 500px; margin: 12px auto 0; color: rgba(255,255,255,0.78); } section { box-sizing: border-box; max-width: none; width: 100%; margin: 0; padding: 76px 32px; } section > .section-head, section > .feature-list, section > .workflow-layout, section > .faq-list, section > .reveal { max-width: none; margin-left: 0; margin-right: 0; } section > .section-head { margin-bottom: 44px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 44px; flex-wrap: wrap; gap: 12px; } .eyebrow { color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; } /* One consistent section-heading scale (34/30/26 desktop/tablet/mobile), matching the hero/workflow sections' own font-style (this plain element selector, no font-family override -> inherits body's default sans-serif stack) - individual sections used to each pick their own size (28-42px) with no clear reasoning, which read as inconsistent against each other. */ h2 { font-size: 34px; margin: 4px 0 0; color: var(--ink); letter-spacing: -0.015em; font-weight: 700; } .section-subtitle { max-width: 620px; margin: 12px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; } .feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .feature-item { background: var(--card); padding: 30px; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); z-index: 1; } .feature-item .icon-wrap { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 18px; } .feature-icon-letter { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .feature-item h3 { color: var(--ink); margin: 0 0 10px; font-size: 16.5px; font-weight: 700; } .feature-item p { color: var(--ink-2); margin: 0; font-size: 14px; } /* "Everything your front desk needs" - matches the icon-badge/Sora-title style the "Tailored to your industry" section established: seamless bordered grid (the gap:1px background trick above) swapped for spaced white cards with a soft shadow, dark-green icon badge instead of an outlined box. Scoped to #features since .feature-list/.feature-item are the shared base rules just above. */ #features .feature-list { gap: 22px; background: none; border: none; border-radius: 0; overflow: visible; box-shadow: none; } #features .feature-item { border-radius: 16px; padding: 34px 30px; box-shadow: 0 10px 30px rgba(20,37,29,0.07); } #features .feature-item:hover { box-shadow: 0 16px 40px rgba(20,37,29,0.11); } #features .feature-item .icon-wrap { width: 46px; height: 46px; border-radius: 12px; background: #0e6b45; color: #ffffff; border: none; margin-bottom: 20px; } #features .feature-item h3 { font-family: 'Sora', -apple-system, "Segoe UI", Arial, sans-serif; font-size: 17px; } .feature-item ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; } .feature-item li { margin-bottom: 5px; } /* .feature-list's base grid-template-columns (repeat(auto-fit, minmax(240px,1fr))) picks column count purely from container width vs the 240px minimum, with no awareness that there are exactly 4 cards here - confirmed live via computed style at every 10-20px step: it lands on exactly 3 columns for any viewport from 830px to 1089px, leaving the 4th card alone on its own row (3+1) instead of a clean 2x2. Below 830px it's already 2 columns (2x2 - fine as-is) and 1090px+ it's already 4 (fine as-is) - this band is the only broken one. */ @media (min-width: 828px) and (max-width: 1090px) { #features .feature-list { grid-template-columns: repeat(2, 1fr); } } /* "Tailored to your industry" - deliberately literal hex, not the site's shared --token palette, matching the same self-contained-color-identity pattern .channels-section/.workflow-section right below already use for a section that's meant to visually stand apart from the rest of the page. */ .industries-section { padding: 100px 32px 108px; background: linear-gradient(180deg, #faf7f1, #f3ede0); } .industries-section .section-head { max-width: 640px; margin: 0 0 40px; } .industries-section .section-head .eyebrow { color: #0e6b45; } .industries-section h2 { color: #14251d; } .industries-accent { color: #0e6b45; } .industries-tabs { display: flex; justify-content: flex-start; gap: 10px; margin: 0 0 36px; max-width: 680px; } .industries-tab { flex: 0 0 auto; padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; font-family: 'Sora', -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer; background: transparent; color: #14251d; border: 1.5px solid rgba(20,37,29,0.14); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .industries-tab:hover { border-color: rgba(20,37,29,0.28); } .industries-tab.is-active { background: #0e6b45; border-color: #0e6b45; color: #ffffff; } .industries-panel { max-width: 1080px; margin: 0 auto; background: #ffffff; border-radius: 20px; box-shadow: 0 20px 50px rgba(20,37,29,0.08); overflow: hidden; } .industries-panel-inner { display: none; grid-template-columns: 1.1fr 0.9fr; gap: 0; align-items: stretch; } .industries-panel-inner.is-active { display: grid; } .industries-panel-left { padding: 52px 56px; } .industries-panel-right { padding: 52px 48px; display: flex; align-items: center; justify-content: center; background: #f7f4ed; } .industries-icon-badge { width: 46px; height: 46px; border-radius: 12px; background: #0e6b45; color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .industries-icon-badge .icon-svg { width: 22px; height: 22px; } .industries-subtitle { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0e6b45; margin-bottom: 10px; } .industries-panel-left h3 { font-family: 'Sora', -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 26px; color: #14251d; margin: 0 0 12px; } .industries-panel-desc { color: #4b5b52; font-size: 15.5px; line-height: 1.65; margin: 0 0 24px; max-width: 440px; } .industries-checklist { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 11px; } .industries-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #2c3b33; line-height: 1.5; } .industries-checklist li::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #0e6b45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; } .industries-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: #0e6b45; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; } .industries-cta-arrow { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .industries-notif-card { width: 100%; max-width: 320px; background: #f2ebda; border: 1px solid rgba(20,37,29,0.08); border-radius: 14px; padding: 20px 22px; } .industries-notif-head { font-size: 12px; font-weight: 700; color: #8a7a5c; margin-bottom: 10px; } .industries-notif-title { font-family: 'Sora', -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 16px; color: #14251d; margin-bottom: 6px; } .industries-notif-text { font-size: 13.5px; color: #5a5442; line-height: 1.55; } @media (max-width: 900px) { .industries-panel-inner.is-active { grid-template-columns: 1fr; } .industries-panel-right { padding: 36px 40px 44px; } } @media (max-width: 600px) { .industries-section { padding: 72px 20px 80px; } .industries-tabs { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; } .industries-tabs::-webkit-scrollbar { display: none; } .industries-tab { white-space: nowrap; } .industries-panel-left { padding: 36px 24px 8px; } .industries-panel-right { padding: 8px 24px 36px; } } /* Full-bleed breakout without the classic 100vw-scrollbar bug: 100vw includes the scrollbar gutter width, so on a page tall enough to scroll vertically it's wider than the actual viewport and forces horizontal scroll too. margin-left/right calc(50% - 50vw) with an auto width achieves the same edge-to-edge span using the containing block's own width instead. */ .channels-section { width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #fbfaf6; color: #10264a; padding: 112px 32px 108px; } .channels-inner { max-width: 1080px; margin: 0 auto; } .channels-section .section-head { max-width: 760px; margin: 0 0 64px; } .channels-section .eyebrow { color: #087f72; } .channels-section h2 { color: #10264a; } .channels-section .section-subtitle { max-width: 680px; margin: 16px 0 0; color: #465a78; font-size: 16px; line-height: 1.7; } .channel-pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 18px; max-width: 980px; margin: 0 auto; } .channel-pill { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px; border: 1px solid rgba(13,61,52,0.2); border-radius: 999px; background: rgba(255,255,255,0.72); color: #10264a; font-size: 16px; font-weight: 600; white-space: nowrap; } .channel-pill i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--brand); } /* Every pill's dot was the identical brand green regardless of channel - a small muted palette cycling across the 8 live pills (nth-child counts position within .channel-pills, so this reliably targets pills 1-8 in DOM order) gives each channel a distinct read without going garish. The 9th/"soon" pill is 4n+1 - never matched here, so .channel-pill-soon i below still governs it untouched. */ .channel-pills .channel-pill:nth-child(4n+2) i { background: #3b6ea5; } .channel-pills .channel-pill:nth-child(4n+3) i { background: #c08a2e; } .channel-pills .channel-pill:nth-child(4n+4) i { background: #8a5a7a; } .channel-pill-soon { opacity: 0.6; border-style: dashed; } .channel-pill-soon i { background: rgba(13,61,52,0.35); } @media (max-width: 480px) { /* Longer pill labels (e.g. "No website? Get your own chat page") don't fit on one line at very narrow widths - white-space:nowrap there forced the pill wider than the viewport and caused page-level horizontal scroll. */ .channel-pill { white-space: normal; text-align: center; padding: 10px 20px; font-size: 14.5px; } } .industry-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: none; } .industry-card-link span { transition: transform 0.15s ease; } .industry-card-link:hover { color: var(--accent); } .industry-card-link:hover span { transform: translateX(3px); } .chrome-dot { width: 10px; height: 10px; border-radius: 50%; } .chrome-dot.red { background: #e5484d; } .chrome-dot.yellow { background: #e0a83a; } .chrome-dot.green { background: var(--accent); } .setup-section { width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #f2efe7; color: #10264a; padding: 112px 32px 124px; } .setup-inner { max-width: 1080px; margin: 0 auto; } .setup-section .section-head { margin-bottom: 76px; } .setup-section .eyebrow { color: #087f72; } .setup-section h2 { color: #10264a; } .setup-subtitle { max-width: 680px; margin: 16px 0 0; color: #465a78; font-size: 16px; line-height: 1.7; } .steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .steps::before { content: ""; position: absolute; top: 29px; left: 30px; right: 30px; height: 2px; background: rgba(16,38,74,0.16); } .step { position: relative; z-index: 1; border: 0; padding: 0 24px 0 0; } .step-num { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #10264a; color: #f7fbf8; font-size: 15px; font-weight: 700; letter-spacing: 0; } .step b { display: block; margin: 26px 0 8px; color: #10264a; font-size: 18px; line-height: 1.35; } .step p { max-width: 250px; color: #465a78; font-size: 15px; line-height: 1.65; margin: 0; } .workflow-section { background: #0b211d; color: #f7fbf8; } .workflow-section h2 { color: #f7fbf8; } .workflow-section .eyebrow { color: #79d3ae; } .workflow-subtitle { max-width: 620px; margin: 12px 0 0; color: rgba(247,251,248,0.72); font-size: 15px; } /* min(360px, 100%) instead of a bare 360px - a bare minmax() floor is a hard requirement the grid enforces regardless of available space, so between this section's 900px single-column breakpoint and roughly 1150px (where 0.9fr's own content plus the 72px gap plus a full 360px no longer fit) the row was forced wider than its container, overflowing the whole page horizontally. Capping the floor at 100% means it only ever asks for as much room as actually exists. */ .workflow-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(min(360px, 100%), 1.1fr); gap: 72px; align-items: start; } .workflow-steps { display: flex; flex-direction: column; gap: 24px; } .workflow-step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; min-height: 220px; padding: 26px 0 26px 24px; border-left: 2px solid rgba(247,251,248,0.2); transition: border-color 0.2s ease, transform 0.2s ease; } .workflow-step.is-active { border-left-color: var(--accent); transform: translateX(4px); } .workflow-step-number { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; } .workflow-step h3 { margin: 0 0 10px; font-size: 18px; color: #f7fbf8; } .workflow-step p { margin: 0; color: rgba(247,251,248,0.72); font-size: 14px; line-height: 1.65; max-width: 360px; } .workflow-preview-wrap { position: sticky; top: 96px; } .workflow-preview { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); } .workflow-preview-chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--plane); color: var(--ink-muted); font-size: 11.5px; } .workflow-preview-chrome span:last-child { margin-left: 7px; } .workflow-preview-body { min-height: 360px; padding: 34px; display: flex; align-items: center; background: radial-gradient(circle at 80% 20%, rgba(162,208,195,0.26), transparent 52%), var(--surface); } .workflow-view { display: none; width: 100%; animation: workflowViewIn 0.3s ease both; } .workflow-view.is-visible { display: block; } @keyframes workflowViewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .workflow-view-label { margin-bottom: 18px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; } .workflow-chat-bubble { max-width: 78%; padding: 12px 14px; border-radius: 9px; font-size: 13px; line-height: 1.45; margin-bottom: 12px; } .workflow-chat-user { margin-left: auto; background: var(--brand); color: white; } .workflow-chat-ai { background: var(--card); border: 1px solid var(--border); color: var(--ink); } .workflow-chat-input { margin-top: 28px; padding: 12px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: 12px; } .workflow-table-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 10px; align-items: center; padding: 16px 12px; border-bottom: 1px solid var(--border); color: var(--ink-2); font-size: 12px; } .workflow-table-row strong { color: var(--ink); } .workflow-table-head { padding-top: 0; color: var(--ink-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .workflow-status { color: var(--accent); font-weight: 700; } .workflow-alert { text-align: center; } .workflow-alert-icon { width: 48px; height: 48px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(184,69,47,0.12); color: var(--danger); font-size: 24px; font-weight: 700; } .workflow-view-alert .workflow-view-label { color: var(--danger); } .workflow-view-alert h3 { margin: 0 0 8px; font-size: 20px; color: var(--ink); } .workflow-view-alert p { max-width: 340px; margin: 0 auto 22px; color: var(--ink-2); font-size: 13px; } .workflow-alert-button { padding: 11px 16px; border: 0; border-radius: 6px; background: var(--danger); color: white; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .demo-box { display: flex; align-items: flex-start; gap: 22px; background: #ffffff; border: none; border-radius: 16px; padding: 40px 44px; box-shadow: 0 10px 30px rgba(20,37,29,0.07); } .demo-icon-badge { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: #0e6b45; color: #ffffff; display: flex; align-items: center; justify-content: center; } .demo-icon-badge .icon-svg { width: 22px; height: 22px; } .demo-box p { color: var(--ink-2); margin: 0; } .demo-box code { background: #f2ebda; border: 1px solid rgba(14,107,69,0.28); color: #0e6b45; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-family: inherit; font-weight: 600; } /* Industry links inside demo_desc get the same pill treatment .demo-box code already had (colored, no underline) instead of a plain blue underlined link - the browser default read as mismatched against this card's own style. */ .demo-box a { background: #f2ebda; border: 1px solid rgba(14,107,69,0.28); color: #0e6b45; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; } .demo-box a:hover { background: #ece2ca; } .cta-band { background: var(--brand); color: white; text-align: center; padding: 64px 32px; } .cta-band h2 { color: white; } .cta-band .eyebrow { color: rgba(255,255,255,0.6); } /* Bottom padding cleared to 90px (not the original 28px) - the floating widget bubble (widget.js) is position:fixed at bottom:20px, 52px tall, so it occupies roughly the bottom 72px of the viewport regardless of scroll position. With only 28px of clearance, scrolling to the true end of the page put the bubble directly over the footer's bottom row (rights/built-by text). */ footer { border-top: 1px solid var(--border); padding: 56px 32px 90px; } .footer-inner { max-width: none; width: 100%; margin: 0; } .footer-cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; margin-bottom: 40px; } .footer-cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 14px; } .footer-cols a { display: block; color: var(--ink-2); text-decoration: none; font-size: 14px; margin-bottom: 10px; } .footer-cols a:hover { color: var(--ink); } /* .footer-cols a's `display: block` above wins over .wordmark's `display: flex` (higher specificity), which broke vertical-centering between the monogram and "Deskio AI" text in the footer only - navbar's wordmark isn't inside .footer-cols so it was fine. Re-assert flex/align-items here, scoped narrowly so it doesn't affect the other footer links. */ .footer-cols a.wordmark { display: flex; align-items: center; margin-bottom: 0; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-muted); flex-wrap: wrap; gap: 10px; } .lang-select { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); font-family: inherit; } .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 460px; margin: 0 auto; background: var(--ink); color: white; border-radius: 12px; padding: 18px 20px; box-shadow: 0 12px 32px rgba(0,0,0,0.22); z-index: 1000000; display: none; } .cookie-banner.show { display: block; } .cookie-banner p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.85); } .cookie-banner a { color: white; text-decoration: underline; } .cookie-banner .cookie-actions { display: flex; gap: 10px; } .cookie-banner button { flex: 1; padding: 9px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); } .cookie-banner .accept { background: var(--accent); color: white; border-color: var(--accent); } .cookie-banner .decline { background: transparent; color: white; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .setup-section { padding: 80px 20px 88px; } .setup-section .section-head { margin-bottom: 48px; } h2 { font-size: 30px; } .steps { gap: 34px; } .steps::before { top: 29px; bottom: 29px; left: 29px; right: auto; width: 2px; height: auto; } .step { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; padding: 0; } .step b { margin: 0 0 8px; align-self: center; } .step p { grid-column: 2; } .footer-cols { grid-template-columns: 1fr 1fr; } nav { padding: 12px 20px; } .hero { padding: 60px 20px 64px; } .hero h1 { font-size: 38px; } .hero p.lead { font-size: 16px; } .hero-inner { gap: 42px; } .workflow-layout { grid-template-columns: 1fr; gap: 20px; } .workflow-preview-wrap { position: sticky; top: 76px; z-index: 2; order: 0; } .workflow-steps { order: 1; } .workflow-preview { box-shadow: var(--shadow-md); } .workflow-steps { gap: 8px; } .workflow-step { min-height: 0; padding: 22px 0 22px 18px; } .nav-toggle { display: flex; } nav .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 24px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 28px 24px 32px; } nav .nav-links.open { display: flex; } nav .nav-links .link { display: block; font-size: 15px; } nav .nav-cta, nav .nav-profile { width: 100%; justify-content: center; } .nav-dropdown { width: 100%; } .nav-dropdown-trigger { pointer-events: none; opacity: 0.6; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .nav-dropdown-trigger svg { display: none; } .nav-dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; padding-top: 0; margin-top: 6px; min-width: 0; } .nav-dropdown-menu-inner { background: none; border: none; box-shadow: none; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 16px; } .nav-dropdown-item { padding: 0; font-size: 15px; color: var(--ink-2); } .industry-hero { grid-template-columns: 1fr; gap: 48px; padding: 72px 20px 68px; } .industry-hero h1 { font-size: 48px; } .industry-section { padding: 72px 20px; } .industry-section-head { align-items: start; gap: 18px; } .industry-section-head h2 { font-size: 32px; } .industry-feature-grid { grid-template-columns: 1fr; } .industry-feature { min-height: 0; padding: 28px 24px; } .industry-feature-number { margin-bottom: 24px; } .industry-workflow-section { padding: 72px 20px; } .industry-workflow-grid { grid-template-columns: 1fr; gap: 30px; } .industry-scope-note { margin-top: 36px; } .industry-outcomes-inner { grid-template-columns: 1fr; gap: 42px; padding: 72px 20px; } .industry-outcomes h2 { font-size: 32px; } } @media (max-width: 600px) { nav { padding-left: 16px; padding-right: 16px; } nav .nav-links { padding-left: 20px; padding-right: 20px; } .hero { padding: 56px 20px 60px; } .hero-tag { font-size: 10px; letter-spacing: 0.045em; padding: 5px 9px; } .hero h1 { font-size: 32px; line-height: 1.14; margin-bottom: 16px; } .hero p.lead { font-size: 15px; margin-bottom: 24px; } .cta-row { flex-direction: row; align-items: stretch; gap: 10px; } .cta-row a { flex: 1 1 0; min-width: 0; text-align: center; padding-left: 10px; padding-right: 10px; white-space: normal; font-size: 13.5px; line-height: 1.25; } .cta-band .cta-row { align-items: center; } .cta-band .cta-row .btn-primary { width: auto; padding: 9px 16px; font-size: 13px; } .hero-inner { gap: 48px; } .workflow-subtitle { font-size: 14px; } .workflow-preview-body { min-height: 310px; padding: 22px 18px; } .workflow-table-row { grid-template-columns: 1.3fr 1fr; } .workflow-table-row span:last-child { display: none; } .workflow-step { grid-template-columns: 36px 1fr; gap: 12px; } .hero-mock-scene { height: 390px; } .hero-widget-wrap { bottom: 14px; right: 14px; width: calc(100% - 28px); animation: none; } .demo-box { flex-direction: column; padding: 28px 24px; gap: 16px; } .cap-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 20px 56px; } .cap-item { font-size: 12.5px; padding: 7px 13px; } section { padding: 72px 20px; } .section-head, section > .section-head { margin-bottom: 36px; } h2 { font-size: 26px; } .feature-item { padding: 32px 24px; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 18px; margin-bottom: 28px; } .footer-cols h4 { font-size: 10px; margin-bottom: 12px; } .footer-cols a { font-size: 12px; margin-bottom: 8px; } .footer-cols p { font-size: 11px !important; line-height: 1.5; margin-top: 12px !important; } /* Same bubble-clearance fix as the base footer rule above - the mobile widget bubble sits at bottom:16px (widget.js's own <=480px override) instead of 20px, but is still 52px tall, so a similar ~85px clearance is needed. */ footer { padding: 36px 18px 85px; } .footer-bottom { padding-top: 16px; font-size: 10px; gap: 8px; flex-wrap: nowrap; justify-content: space-between; } .industry-hero { gap: 40px; padding-top: 56px; padding-bottom: 56px; } .industry-hero h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 18px; } .industry-intro { font-size: 15px; line-height: 1.55; margin-bottom: 28px; } .industry-hero-art { padding: 18px; } .industry-section { padding: 64px 20px; } .industry-workflow-section { padding: 64px 20px; } .industry-section-head { margin-bottom: 32px; } .industry-section-head h2 { font-size: 27px; } .industry-outcomes-inner { padding: 64px 20px; } .industry-outcomes h2 { font-size: 29px; } .industry-outcomes li { font-size: 14px; } .industry-faq-section { padding-bottom: 72px; } .industry-faq-layout { grid-template-columns: 1fr; gap: 42px; } .industry-faq-aside { position: static; } .industry-faq-item summary { font-size: 15px; } } .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } .feature-item.reveal:nth-child(1) { transition-delay: 0s; } .feature-item.reveal:nth-child(2) { transition-delay: 0.12s; } .feature-item.reveal:nth-child(3) { transition-delay: 0.24s; } .step.reveal:nth-child(1) { transition-delay: 0s; } .step.reveal:nth-child(2) { transition-delay: 0.12s; } .step.reveal:nth-child(3) { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cap-item { animation: none; } } .prose { max-width: 720px; } .prose p { color: var(--ink-2); font-size: 15.5px; margin: 0 0 18px; } .prose h3 { font-size: 19px; margin: 36px 0 10px; letter-spacing: -0.01em; } /* About page: hero right-side visual card, filling .hero-inner's second grid column (about.html used to override grid-template-columns to a single centered column here, which left the whole right half of the hero empty - this card is the fix, scoped under its own class so the shared .hero-inner/.hero rules used by every other page stay untouched). */ .about-hero-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 34px 32px; box-shadow: var(--shadow-lg); } .about-hero-card .icon-wrap { width: 46px; height: 46px; border-radius: 12px; background: var(--brand); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .about-hero-card h3 { margin: 0 0 10px; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; } .about-hero-card p { margin: 0 0 22px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; } .about-hero-card .industries-checklist { margin: 0; } .about-hero-card .industries-checklist li { font-size: 13.5px; } @media (max-width: 900px) { .about-hero-card { max-width: 480px; } } /* About page: "why we built it" card grid, replacing the old bare .prose stacked-paragraph layout. Reuses .feature-item's card anatomy (icon-wrap/h3/p) with the same spaced-card, soft-shadow treatment #features already uses, scoped here instead of edited in place so landing.html's own #features section is unaffected. */ .about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .about-cards .feature-item { background: var(--card); border-radius: 16px; padding: 30px 28px; box-shadow: 0 10px 30px rgba(20,37,29,0.07); } .about-cards .feature-item:hover { box-shadow: 0 16px 40px rgba(20,37,29,0.11); } .about-cards .feature-item .icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #ffffff; border: none; } .about-cards .feature-item h3 { font-size: 16.5px; } .about-cards .feature-item a { color: var(--accent); font-weight: 600; text-decoration: none; } .about-cards .feature-item a:hover { text-decoration: underline; } .contact-form { max-width: 520px; margin: 0 auto; } .contact-form .field { margin-bottom: 18px; } .contact-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 11px 13px; font-size: 14.5px; font-family: inherit; color: var(--ink); background: var(--surface); } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); } .contact-form button[type="submit"] { border: none; cursor: pointer; width: 100%; } .contact-direct { max-width: 520px; margin: 26px auto 0; font-size: 13.5px; color: var(--ink-muted); text-align: center; } /* Split contact layout - left intro/shortcuts, right form card. .contact-form/ .contact-direct above stay as the base field styling; only overridden here to fill the card's width instead of their old standalone-page centering. */ .contact-card { border: 1px solid var(--border); border-radius: 18px; padding: 44px; box-shadow: var(--shadow-lg); background: var(--surface); } .contact-card .contact-form, .contact-card .contact-direct { max-width: none; margin-left: 0; margin-right: 0; text-align: left; } .contact-divider { height: 1px; background: var(--border); margin: 36px 0; max-width: 400px; } .contact-info-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; text-decoration: none; } .contact-info-icon { width: 40px; height: 40px; border-radius: 11px; background: #dbeee7; color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 5px; } .contact-info-value { font-size: 16px; font-weight: 600; color: var(--brand); } .contact-info-arrow { display: inline-block; transition: transform .15s; } .contact-info-row:hover .contact-info-arrow { transform: translateX(3px); } @media (max-width: 900px) { .contact-hero .hero-inner { grid-template-columns: 1fr !important; gap: 44px !important; } } .contact-direct a { color: var(--brand); font-weight: 600; text-decoration: none; } .contact-direct a:hover { text-decoration: underline; } .faq-section { background: #f2efe7; padding-top: 88px; padding-bottom: 96px; } .faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; max-width: 1080px; margin: 0 auto; align-items: start; } .faq-intro { position: sticky; top: 96px; } .faq-intro .eyebrow { color: #087f72; } .faq-intro h2 { margin: 8px 0 14px; color: #12203A; font-size: 34px; line-height: 1.15; } .faq-intro > p { max-width: 320px; margin: 0; color: #3C4A66; font-size: 15px; line-height: 1.7; } .faq-support-card { max-width: 320px; margin-top: 34px; padding: 22px; border: 1px solid #DAD5C8; border-top: 3px solid var(--brand); background: rgba(255,255,255,0.5); } .faq-support-card h3 { margin: 0 0 8px; color: #12203A; font-size: 17px; line-height: 1.3; } .faq-support-card p { margin: 0 0 16px; color: #3C4A66; font-size: 13.5px; line-height: 1.6; } .faq-support-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 13.5px; font-weight: 700; text-decoration: none; } .faq-support-link span { transition: transform 0.15s ease; } .faq-support-link:hover span { transform: translateX(3px); } .faq-list { max-width: 720px; margin: 0; } .faq-item { border-top: 1px solid #DAD5C8; margin: 0; background: transparent; } .faq-item:last-child { border-bottom: 1px solid #DAD5C8; } .faq-item summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 15px; font-weight: 600; color: #12203A; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 19px; font-weight: 400; color: #087f72; transition: transform 0.2s ease; } .faq-item[open] summary::after { content: "\2212"; } .faq-item-body { max-width: 640px; padding: 0 28px 18px 0; font-size: 14px; line-height: 1.7; color: #3C4A66; } .faq-item-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--grid); border-radius: 4px; padding: 1px 5px; } .landing-faq-section { background: #f2efe7; padding-top: 88px; padding-bottom: 96px; } .landing-faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; max-width: 1080px; margin: 0 auto; align-items: start; } .landing-faq-intro { position: sticky; top: 96px; } .landing-faq-intro .eyebrow { color: #087f72; } .landing-faq-intro h2 { margin: 8px 0 14px; color: #12203A; font-size: 34px; line-height: 1.15; } .landing-faq-intro > p { max-width: 320px; margin: 0; color: #3C4A66; font-size: 15px; line-height: 1.7; } .landing-faq-section .faq-support-card { max-width: 320px; } .landing-faq-view-all { margin-top: 28px; } @media (max-width: 860px) { .landing-faq-section { padding: 64px 20px 72px; } .landing-faq-layout { grid-template-columns: 1fr; gap: 44px; } .landing-faq-intro { position: static; } .landing-faq-intro h2 { font-size: 30px; } .landing-faq-intro > p, .landing-faq-section .faq-support-card { max-width: 520px; } .landing-faq-section .faq-list { max-width: 100%; } } @media (max-width: 860px) { .faq-section { padding: 64px 20px 72px; } .faq-layout { grid-template-columns: 1fr; gap: 44px; } .faq-intro { position: static; } .faq-intro h2 { font-size: 30px; } .faq-intro > p, .faq-support-card { max-width: 520px; } .faq-list { max-width: 100%; } } .faq-section { background: var(--plane); padding-top: 88px; padding-bottom: 96px; } .faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; max-width: 1080px; margin: 0 auto; align-items: start; } .faq-intro { position: sticky; top: 96px; } .faq-intro .eyebrow { color: var(--accent); } .faq-intro h2 { margin: 8px 0 14px; color: var(--ink); font-size: 34px; line-height: 1.15; } .faq-intro > p { max-width: 320px; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; } .faq-support-card { max-width: 320px; margin-top: 34px; padding: 22px; border: 1px solid var(--border); border-top: 3px solid var(--brand); background: var(--card); } .faq-support-card h3 { margin: 0 0 8px; color: var(--ink); font-size: 17px; line-height: 1.3; } .faq-support-card p { margin: 0 0 16px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; } .faq-support-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 13.5px; font-weight: 700; text-decoration: none; } .faq-support-link span { transition: transform 0.15s ease; } .faq-support-link:hover span { transform: translateX(3px); } .faq-section .faq-list { max-width: 720px; margin: 0; } .faq-section .faq-item { border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 0; background: transparent; } .faq-section .faq-item:last-child { border-bottom: 1px solid var(--border); } .faq-section .faq-item summary { padding: 18px 0; } .faq-section .faq-item summary::after { color: var(--accent); transition: transform 0.2s ease; } .faq-section .faq-item-body { max-width: 640px; padding: 0 28px 18px 0; } .landing-faq-section { background: var(--surface); padding-top: 88px; padding-bottom: 96px; } .landing-faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; max-width: 1080px; margin: 0 auto; align-items: start; } .landing-faq-intro { position: sticky; top: 96px; } .landing-faq-intro .eyebrow { color: var(--accent); } .landing-faq-intro h2 { margin: 8px 0 14px; color: var(--ink); line-height: 1.15; } .landing-faq-intro > p { max-width: 320px; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; } .landing-faq-section .faq-support-card { max-width: 320px; } .landing-faq-section .faq-list { max-width: 720px; margin: 0; } .landing-faq-section .faq-item { border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 0; background: transparent; } .landing-faq-section .faq-item:last-child { border-bottom: 1px solid var(--border); } .landing-faq-section .faq-item summary { padding: 18px 0; } .landing-faq-section .faq-item summary::after { color: var(--accent); transition: transform 0.2s ease; } .landing-faq-section .faq-item-body { max-width: 640px; padding: 0 28px 18px 0; } .landing-faq-view-all { margin-top: 28px; } @media (max-width: 600px) { .faq-section { padding: 64px 20px 72px; } .faq-layout { grid-template-columns: 1fr; gap: 44px; } .faq-intro { position: static; } .faq-intro h2 { font-size: 30px; } .faq-intro > p, .faq-support-card { max-width: 520px; } .faq-section .faq-list { max-width: 100%; } .landing-faq-section { padding: 64px 20px 72px; } .landing-faq-layout { grid-template-columns: 1fr; gap: 44px; } .landing-faq-intro { position: static; } .landing-faq-intro > p, .landing-faq-section .faq-support-card { max-width: 520px; } .landing-faq-section .faq-list { max-width: 100%; } } .support-search { width: 100%; max-width: 620px; border: 1px solid var(--border); border-radius: 8px; padding: 13px 15px; font-size: 15px; font-family: inherit; color: var(--ink); background: var(--surface); margin-bottom: 22px; } .support-search:focus { outline: none; border-color: var(--accent); } .support-category-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 12px; } .support-no-results { max-width: 760px; padding: 30px 0; font-size: 14px; color: var(--ink-muted); } /* Hero search - larger, centered, with an inline icon (redesigned layout; #support-search keeps its id so support-search.js's filtering is untouched). */ .support-hero-search { max-width: 640px; margin: 8px auto 0; position: relative; } .support-hero-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; } .support-hero-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 999px; padding: 15px 20px 15px 50px; font-size: 15px; font-family: inherit; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-md); text-align: center; } .support-hero-search input:placeholder-shown { text-align: center; } .support-hero-search input:not(:placeholder-shown) { text-align: left; } .support-hero-search input:focus { outline: none; border-color: var(--accent); } /* Quick topics - a curated set of category shortcuts (first few categories, see support_quick_topics in routes/pages.py) that jump down to their full section below. */ .support-topics-section { padding: 8px 64px 56px; max-width: 1152px; margin: 0 auto; } .support-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .topic-card { display: block; border: 1px solid var(--border); border-radius: 14px; padding: 26px; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; background: var(--surface); } .topic-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .topic-card-icon { width: 42px; height: 42px; border-radius: 11px; background: #dbeee7; color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .topic-card-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .topic-card-count { font-size: 13px; color: var(--ink-muted); margin-bottom: 16px; } .topic-card-cta { font-size: 13px; font-weight: 600; color: var(--brand); } .support-divider { height: 1px; background: var(--border); max-width: 1152px; margin: 0 auto; } /* Two-column FAQ: sticky category index on the left, full accordion list on the right - same .support-category/.faq-item markup/ids as before (search filtering and #slug deep-linking are unaffected), just wrapped in a grid. */ .support-main { padding: 56px 64px 40px; max-width: 1152px; margin: 0 auto; } .support-layout { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: start; } .support-index { position: sticky; top: 88px; } .support-index-title { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 12px; } .support-index-sub { font-size: 14px; color: var(--ink-muted); line-height: 1.6; max-width: 280px; margin-bottom: 24px; } .support-index-list { display: flex; flex-direction: column; gap: 9px; } .support-index-list a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; } .support-index-list a:hover { color: var(--brand); } .support-categories { min-width: 0; } .support-categories .support-category { max-width: none; } /* Still need help - two equal contact cards replacing the old single-line bar. */ .support-help { background: var(--plane); padding: 72px 64px; } .support-help-inner { max-width: 1152px; margin: 0 auto; } .support-help-heading { text-align: center; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 8px; } .support-help-subtitle { text-align: center; font-size: 15px; color: var(--ink-2); margin-bottom: 32px; } .support-help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 720px; margin: 0 auto; } .support-help-card { display: block; text-align: left; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px; font-family: inherit; cursor: pointer; transition: border-color .15s, transform .15s; } .support-help-card:hover { border-color: var(--brand); transform: translateY(-2px); } .support-help-card-icon { width: 38px; height: 38px; border-radius: 10px; background: #dbeee7; color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .support-help-card-title { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .support-help-card-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; } .support-help-card-link { font-size: 13.5px; font-weight: 600; color: var(--brand); } @media (max-width: 900px) { .support-topics { grid-template-columns: repeat(2, 1fr); } .support-layout { grid-template-columns: 1fr; gap: 32px; } .support-index { position: static; } .support-help-cards { grid-template-columns: 1fr; } } @media (max-width: 640px) { .support-topics-section, .support-main, .support-help { padding-left: 20px; padding-right: 20px; } .support-topics { grid-template-columns: 1fr; } }