/* ===================== Docutrain — landing page (v2, Vercel-style) ===================== Built on the Vercel-style system (DESIGN.md). Flat, editorial, Geist + Geist Mono. Marketing cards use a crisp hairline edge on white over a slightly cooler canvas (not soft grey blur). Hairlines also on chrome / interactive controls. One radius scale. Subpages (why-docutrain, pricing, blog) and React marketing shells use this file. */ /* ========== Fonts (self-hosted Geist, variable) ========== Metric-matched fallbacks so the fallback->Geist swap is width-identical (no layout shift). woff2 are ed in . */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Fallback'; src: local('Arial'); size-adjust: 103.99%; ascent-override: 96.65%; descent-override: 28.37%; line-gap-override: 0%; } @font-face { font-family: 'Geist Mono Fallback'; src: local('Courier New'); size-adjust: 98.32%; ascent-override: 102.22%; descent-override: 30%; line-gap-override: 0%; } :root{ /* grayscale axis — light canvas, white cards, visible edges (no soft haze) */ --v-bg:#fafafa; --v-surface:#ffffff; --v-surface-muted:#f5f5f5; --v-fg:#0a0a0a; --v-fg-muted:#666666; --v-fg-subtle:#8f8f8f; --v-border:#d4d4d4; --v-border-strong:#bdbdbd; --v-hover:#efefef; /* accent = Docutrain brand blue (sampled from logo), used sparingly */ --brand:#0f81c7; --brand-ink:#0a6aa6; --brand-tint:#eef6fc; --brand-line:#cfe6f5; --v-warn:#f5a623; --v-danger:#e5484d; --v-delta-up:#0d7a3d; --v-violet:#7c3aed; --ink:#0a0a0a; --ink-2:#161616; --sans:'Geist','Geist Fallback',-apple-system,system-ui,'Segoe UI',sans-serif; --mono:'Geist Mono','Geist Mono Fallback',ui-monospace,'SF Mono',Menlo,monospace; --maxw:1140px; --hero-maxw:1280px; /* one radius scale */ --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:12px; --r-pill:999px; /* hard hairline only — no soft grey shadow (reads as blur) */ --elev:0 0 0 1px var(--v-border); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--sans);color:var(--v-fg);background:var(--v-bg); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:15px;line-height:1.5} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} /* ---- shared atoms ---- */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .v-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--v-fg-subtle)} .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--v-fg-muted)} .kicker .bar{width:16px;height:2px;background:var(--brand);border-radius:2px} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);white-space:nowrap} .eyebrow::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--brand);flex:none} /* buttons (DESIGN.md §6) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:var(--r-sm); font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-.005em;cursor:pointer;border:1px solid transparent; transition:background-color .12s,border-color .12s,color .12s;white-space:nowrap} .btn-primary{background:var(--v-fg);color:#fafafa;border-color:var(--v-fg)} .btn-primary:hover{background:#262626} .btn-secondary{background:var(--v-surface);color:var(--v-fg);border-color:var(--v-border)} .btn-secondary:hover{background:var(--v-hover);border-color:var(--v-border-strong)} .btn-green{background:var(--v-delta-up);color:#fafafa;border-color:var(--v-delta-up)} .btn-green:hover{background:#0a6532;border-color:#0a6532} .btn-ghost{background:none;color:var(--v-fg-muted);border-color:transparent;padding:0 11px;height:34px;font-size:13.5px} .btn-ghost:hover{color:var(--v-fg);background:var(--v-hover)} .btn-lg{height:44px;padding:0 20px;font-size:15px} .btn svg{flex:none;width:16px;height:16px;display:block} /* ===================== NAV ===================== */ .nav{position:sticky;top:0;z-index:50;height:60px;background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--v-border)} .nav-in{max-width:var(--hero-maxw);margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;gap:28px} /* keep the logo link from shrinking when the nav links compete for width */ .nav-in>a{flex:none;display:inline-flex;align-items:center} .nav-logo{height:26px;width:auto;flex:none} .nav-links{display:flex;align-items:center;gap:4px;margin-left:8px} .nav-link{ font-size:15px;color:var(--v-fg);padding:8px 13px;border-radius:var(--r-sm);transition:.12s; font-weight:600;letter-spacing:-.018em;white-space:nowrap; } .nav-link:hover{color:var(--v-fg);background:var(--v-hover)} .nav-link.active{color:var(--v-fg);background:var(--v-hover);font-weight:600} /* Products dropdown (home page) */ .nav-dropdown{position:relative;display:inline-flex;align-items:center} .nav-dropdown-trigger{ display:inline-flex;align-items:center;gap:5px;border:0;background:none;font:inherit;cursor:pointer; font-size:15px;color:var(--v-fg);padding:8px 13px;border-radius:var(--r-sm);transition:.12s; font-weight:600;letter-spacing:-.018em;white-space:nowrap; } .nav-dropdown-trigger:hover,.nav-dropdown.is-open .nav-dropdown-trigger{color:var(--v-fg);background:var(--v-hover)} .nav-dropdown-chevron{width:14px;height:14px;flex:none;opacity:.85;transition:transform .15s ease} .nav-dropdown.is-open .nav-dropdown-chevron{transform:rotate(180deg)} .nav-dropdown-panel{ position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:368px;padding:10px 8px 8px; background:var(--v-surface);border:none;border-radius:var(--r-md); box-shadow:var(--elev), 0 16px 40px -18px rgba(10,10,10,.18); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px); transition:opacity .15s ease,transform .15s ease,visibility .15s; } .nav-dropdown.is-open .nav-dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .nav-dropdown-eyebrow{ margin:0 0 6px;padding:0 12px 8px; font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:var(--v-fg-subtle); border-bottom:1px solid var(--v-border); } .nav-dropdown-item{ display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:var(--r-sm); color:inherit;text-decoration:none;transition:background-color .12s,color .12s; } .nav-dropdown-item:hover{background:var(--v-hover)} .nav-dropdown-item:hover .nav-dropdown-title{color:var(--brand-ink)} .nav-dropdown-item:hover .nav-dropdown-icon{background:var(--brand-tint);color:var(--brand-ink)} .nav-dropdown-icon{ flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px; border:none;border-radius:var(--r-md);background:var(--v-hover);color:var(--brand); transition:background-color .12s,color .12s; } .nav-dropdown-icon svg{width:19px;height:19px;display:block} .nav-dropdown-copy{display:flex;flex-direction:column;gap:4px;min-width:0} .nav-dropdown-title{ font-size:15.5px;font-weight:600;color:var(--v-fg);letter-spacing:-.022em;line-height:1.25; transition:color .12s; } .nav-dropdown-desc{ font-size:13.5px;line-height:1.55;color:var(--v-fg-muted);letter-spacing:-.005em;max-width:26ch; } .nav-right{margin-left:auto;display:flex;align-items:center;gap:8px} /* Match user-menu hamburger footprint (34×34) — same as ChatHeaderHamburgerTrigger */ .nav-right .btn{box-sizing:border-box;height:34px;padding:0 12px;font-size:13px;border-radius:var(--r-sm);gap:6px;line-height:1} .nav-right .btn svg{flex:none;width:14px;height:14px;display:block;color:inherit;fill:none;stroke:currentColor} .nav-right .btn .nav-start-icon, .nav-right .btn svg.nav-start-icon{fill:currentColor;stroke:currentColor} /* Nav CTAs: Sign in / Dashboard = quiet outline; Get Started = solid primary */ .nav-right a[href="/app/login"], .nav-right .nav-dashboard-link{ background:var(--v-surface);color:var(--v-fg);border-color:var(--v-border); } .nav-right a[href="/app/login"]:hover, .nav-right .nav-dashboard-link:hover{ background:var(--v-hover);border-color:var(--v-border-strong);color:var(--v-fg); } .nav-right a[href="/app/start"]{ background:var(--v-fg);color:#fafafa;border-color:var(--v-fg); } .nav-right a[href="/app/start"]:hover{ background:#262626;border-color:#262626;color:#fafafa; } .nav-right a[href="/app/start"] svg{color:inherit;fill:currentColor;stroke:currentColor} /* Logged-in dashboard shortcut — hide when the nav row is too tight (mobile menu still has it). */ @media (max-width:1200px){ .nav-dashboard-link{display:none!important} } .nav-sep{width:1px;height:22px;background:var(--v-border)} .nav-sep-links{margin:0 7px} /* nav hamburger (mobile) — landing.js animates the 3 spans + toggles .active */ .nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:2px; width:36px;height:36px;margin-left:auto;border:0;background:none;cursor:pointer;padding:0; appearance:none;-webkit-appearance:none;box-sizing:border-box} .nav-toggle span{display:block;height:2px;width:18px;margin:0;background:var(--v-fg);transform-origin:center; transition:transform .2s ease-out,opacity .1s ease-out} .nav-toggle.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)} .nav-toggle.is-open span:nth-child(2){opacity:0} .nav-toggle.is-open span:nth-child(3){transform:translateY(-4px) rotate(-45deg)} /* subtle border firm-up once scrolled (landing.js adds .scrolled) */ .nav.scrolled{border-bottom-color:var(--v-border-strong)} /* auth-aware visibility — preserves the head session-detection script's no-flash behavior (html.is-authed toggles logged-in vs logged-out controls; landing.js re-syncs after DOM ready + on cross-tab sign-out). */ [data-auth="logged-in"]{display:none!important} html.is-authed [data-auth="logged-in"]{display:inline-flex!important} html.is-authed [data-auth="logged-out"]{display:none!important} .mobile-menu [data-auth]{display:none!important} .mobile-menu-foot[data-auth]{display:none!important} .mobile-menu-foot[data-auth="logged-out"]{display:flex!important} html.is-authed .mobile-menu-foot[data-auth="logged-out"]{display:none!important} html.is-authed .mobile-menu-foot[data-auth="logged-in"]{display:flex!important} /* Reserve a fixed 34x34 footprint so the actions row width can't change while the React user-menu island hands off (skeleton 34x34 -> innerHTML='' -> async-mounted ChatHeaderHamburgerTrigger, also 34x34). */ .user-menu-mount{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px} .user-menu-mount button{border-style:solid;appearance:none;-webkit-appearance:none;box-sizing:border-box} .user-menu-skeleton{box-sizing:border-box;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--v-border);background:var(--v-surface)} /* mobile slide-down menu (shown by landing.js via .active) */ .mobile-menu{display:none;position:fixed;inset:60px 0 0 0;z-index:49;background:var(--v-bg); flex-direction:column;border-top:1px solid var(--v-border);overflow:hidden} .mobile-menu.active{display:flex} .mobile-menu-body{flex:1;overflow-y:auto;padding:20px 28px 12px;-webkit-overflow-scrolling:touch} .mobile-menu-group+.mobile-menu-group{margin-top:22px} .mobile-menu-label{ display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--v-fg-subtle);margin:0 0 4px;padding:0 6px; } .mobile-menu-links{display:flex;flex-direction:column} .mobile-menu-links a{ display:flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;color:var(--v-fg-muted); padding:0 6px;border-bottom:1px solid var(--v-border);letter-spacing:-.012em; } .mobile-menu-links a:hover{color:var(--v-fg)} .mobile-menu-links-rich a{ flex-direction:column;align-items:flex-start;justify-content:center;gap:3px; min-height:58px;padding:10px 6px; } .mobile-menu-link-title{ font-size:17px;font-weight:600;letter-spacing:-.018em;line-height:1.25;color:var(--v-fg); } .mobile-menu-link-desc{ font-size:13.5px;font-weight:450;line-height:1.45;color:var(--v-fg-muted);letter-spacing:-.005em; } .mobile-menu-links-rich a:hover .mobile-menu-link-title{color:var(--brand-ink)} .mobile-menu-foot{ flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:16px 28px calc(20px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--v-border);background:var(--v-surface); } .mobile-menu-signin{ display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px; font-size:15px;font-weight:500;color:var(--v-fg);border:1px solid var(--v-border);border-radius:var(--r-sm); background:var(--v-surface);line-height:1;transition:background-color .12s,border-color .12s,color .12s; } .mobile-menu-signin:hover{color:var(--v-fg);background:var(--v-hover);border-color:var(--v-border-strong)} /* Mobile Get Started — same solid primary as desktop nav CTA */ .mobile-menu-signin[href="/app/start"], .mobile-menu a.m-primary{ display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:48px;height:auto; margin:0;padding:0 16px;background:var(--v-fg);color:#fafafa;border:1px solid var(--v-fg);border-radius:var(--r-sm); font-size:15px;font-weight:500;line-height:1; } .mobile-menu-signin[href="/app/start"]:hover, .mobile-menu a.m-primary:hover{background:#262626;color:#fafafa;border-color:#262626} .mobile-menu-signin[href="/app/dashboard"]{background:var(--v-surface);border-color:var(--v-border);color:var(--v-fg)} .mobile-menu-signin[href="/app/dashboard"]:hover{background:var(--v-hover);border-color:var(--v-border-strong);color:var(--v-fg)} .mobile-menu-signin svg, .mobile-menu a.m-primary svg{flex:none;width:16px;height:16px;display:block;color:inherit;fill:currentColor;stroke:currentColor} /* ===================== HERO ===================== */ .hero{padding:84px 0 56px;position:relative;overflow:hidden} .hero .hero-in{max-width:var(--hero-maxw);margin-left:auto;margin-right:auto} .hero-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .hero h1{font-size:68px;line-height:1.02;font-weight:600;letter-spacing:-.034em;margin:18px 0 0;text-wrap:balance} .hero h1 .b{color:var(--brand)} .hero-sub{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--v-fg-muted);max-width:560px} .hero-actions-block{margin-top:28px;display:flex;flex-direction:column} .hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:0} /* hero — chat mock: each bubble wipes in once (no looping skeleton shimmer) */ .diagram{position:relative;border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)} /* Stay clipped until the wipe runs — avoids a flash when .is-loaded is added */ .hero .diagram .chat-msg{clip-path:inset(0 100% 0 0)} .hero .diagram .chat-msg.user{clip-path:inset(0 0 0 100%)} .hero .diagram.is-loaded .chat-msg{ animation:hero-bubble-wipe-ltr .78s cubic-bezier(.16,1,.3,1) both;will-change:clip-path } .hero .diagram.is-loaded .chat-msg.user{animation-name:hero-bubble-wipe-rtl} .hero .diagram.is-loaded .chat-msg:nth-child(1){animation-delay:.06s} .hero .diagram.is-loaded .chat-msg:nth-child(2){animation-delay:.34s} .hero .diagram.is-loaded .chat-msg:nth-child(3){animation-delay:.62s} @keyframes hero-bubble-wipe-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes hero-bubble-wipe-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}} .diagram-head{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)} .diagram-head .d{width:9px;height:9px;border-radius:999px;background:var(--v-border-strong)} .diagram-head .t{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)} .diagram-head .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-delta-up)} .diagram-head .live i{ position:relative;display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--v-delta-up);flex:none; } .diagram-head .live i::before{ content:'';position:absolute;inset:-4px;border-radius:999px;background:var(--v-delta-up);opacity:.35; animation:hero-live-pulse 2s ease-out infinite; } @keyframes hero-live-pulse{0%{transform:scale(.55);opacity:.45}70%,100%{transform:scale(1.65);opacity:0}} @media (prefers-reduced-motion:reduce){.diagram-head .live i::before{animation:none;opacity:.25;transform:none}} /* message thread */ .chat-thread{padding:18px 16px 6px;display:flex;flex-direction:column;gap:13px} .chat-msg{display:flex;gap:9px;align-items:flex-start;max-width:86%} .chat-msg.bot{align-self:flex-start} .chat-msg.user{align-self:flex-end;flex-direction:row-reverse} .chat-av{width:26px;height:26px;border-radius:var(--r-pill);flex:none;background:var(--brand-tint) url('/docutrain-icon.png') center/68% no-repeat;border:none} .chat-bubble{border:none;border-radius:var(--r-md);padding:11px 12px;display:flex;flex-direction:column;gap:7px;background:var(--v-hover);min-width:120px} .chat-bubble.b-bot{border-top-left-radius:var(--r-xs)} .chat-bubble.b-user{background:var(--brand);border-color:var(--brand);border-top-right-radius:var(--r-xs);min-width:0} /* skeleton lines — static placeholders revealed by the bubble wipe */ .sk-l{height:7px;border-radius:var(--r-xs);background:#e8e8e8} .chat-bubble.b-user .sk-l{background:rgba(255,255,255,.42)} @media (prefers-reduced-motion:reduce){ .hero .diagram .chat-msg{ animation:none!important;clip-path:none!important;will-change:auto } } .chat-src{display:inline-flex;align-items:center;gap:6px;margin-top:1px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink)} .chat-src i{width:5px;height:5px;border-radius:999px;background:var(--brand);flex:none} /* composer */ .chat-composer{margin:8px 14px 0;display:flex;align-items:center;gap:10px;border:1px solid var(--v-border);border-radius:var(--r-lg);padding:8px 8px 8px 12px;background:var(--v-surface)} .chat-composer .ph{flex:1;display:inline-flex;align-items:center;font-size:13px;color:var(--v-fg-subtle)} .chat-composer .ph::after{ content:'';display:inline-block;width:2px;height:14px;margin-left:2px;background:var(--brand);border-radius:1px; opacity:0;transform:translateY(.5px); } .hero .diagram.is-loaded .chat-composer .ph::after{ animation:hero-composer-cursor 1.05s step-end .4s infinite; } @keyframes hero-composer-cursor{0%,49%{opacity:1}50%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .hero .diagram.is-loaded .chat-composer .ph::after{animation:none;opacity:.85} } .chat-composer .send{width:30px;height:30px;border-radius:var(--r-sm);background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;flex:none} /* composer control chips */ .chat-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px 15px} .cc-grp{display:flex;align-items:center;gap:7px;min-width:0} .cc-lbl{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);flex:none} .cc-seg{display:inline-flex;border:none;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--v-hover)} .cc-seg span{padding:4px 9px;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--v-fg-muted);border-right:1px solid rgba(10,10,10,.06);white-space:nowrap} .cc-seg span:last-child{border-right:none} .cc-seg span.on{background:var(--brand-tint);color:var(--brand-ink)} @media (max-width:600px){ .chat-controls{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 14px;flex-wrap:nowrap} .cc-grp{justify-content:flex-start;width:auto;min-width:0} .cc-grp:last-child{display:none} .cc-seg span{padding:4px 8px;font-size:9.5px} .chat-composer{margin-left:12px;margin-right:12px} .chat-thread{padding-left:12px;padding-right:12px} .diagram-head .t{font-size:10px;margin-left:4px} } /* ---- format strip (hero-width bar, partial dividers) ---- */ .formats-section .formats-in{max-width:var(--hero-maxw)} .formats{ display:flex;align-items:stretch; border:none;border-radius:0;background:transparent;box-shadow:none; padding:0;border-top:1px solid var(--v-border);border-bottom:1px solid var(--v-border); } .formats .lead{ display:flex;align-items:center;flex-shrink:0;margin:0; padding:14px 28px 14px 0; font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-fg-subtle); white-space:nowrap;position:relative; } .formats .lead::after{ content:'';position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:22px;background:var(--v-border); } .hero-formats-row{ list-style:none;margin:0;padding:0;flex:1;display:flex;align-items:stretch;min-width:0; } .hero-format{ flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px; min-width:0;padding:14px 16px;border:none;border-radius:0; background:transparent;transition:background-color .12s;position:relative; } .hero-format:not(:last-child)::after{ content:'';position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:22px;background:var(--v-border); } .hero-format:hover{background:var(--v-hover)} .hero-format-icon{color:var(--v-fg-subtle);line-height:0;flex-shrink:0} .hero-format-icon svg{width:auto;height:22px;display:block} .hero-format-name{ font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--v-fg);white-space:nowrap; } .hero-format-sub{display:none} /* sparing brand-accent highlights inside the otherwise-neutral glyphs */ .hero-format-icon-peak{fill:var(--brand);stroke:none} .hero-format-icon-play{fill:var(--brand);stroke:none} .hero-format-icon-stamp{stroke:var(--brand)} .hero-format-icon-stampchar{fill:var(--brand);stroke:none;font-family:var(--mono);font-size:5px;font-weight:700;letter-spacing:.02em} @media (max-width:920px){ .formats .lead{font-size:9px;padding-right:20px} .hero-format{gap:5px;padding:14px 10px} .hero-format-name{font-size:10px} .hero-format-icon svg{height:20px} } @media (max-width:760px){ .formats{flex-direction:column} .formats .lead{ justify-content:center;padding:12px 16px; } .formats .lead::after{ right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%); width:48px;height:1px; } .hero-formats-row{flex-wrap:wrap} .hero-format{ flex:1 1 33.333%;padding:14px 8px; } .hero-format::after{display:none} .hero-format:not(:nth-child(3n))::after{ display:block;right:0;top:50%;bottom:auto;left:auto;transform:translateY(-50%); width:1px;height:22px; } .hero-format:nth-child(3n+4)::before{ content:'';position:absolute;left:50%;top:0;transform:translateX(-50%); width:48px;height:1px;background:var(--v-border); } } @media (max-width:440px){ .hero-format{flex:1 1 50%} .hero-format:not(:nth-child(3n))::after{display:none} .hero-format:not(:nth-child(2n))::after{ display:block;right:0;top:50%;bottom:auto;left:auto;transform:translateY(-50%); width:1px;height:22px; } .hero-format:nth-child(3n+4)::before{display:none} .hero-format:nth-child(2n+3)::before{ content:'';position:absolute;left:50%;top:0;transform:translateX(-50%); width:48px;height:1px;background:var(--v-border); } } .fchip .d{width:6px;height:6px;border-radius:2px} /* ===================== SECTION scaffolding ===================== */ .section{padding:100px 0;border-bottom:1px solid var(--v-border)} .section-head{max-width:680px} .section-head.center{margin:0 auto;text-align:center} .section-head h2{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-.028em;margin:13px 0 0;text-wrap:balance} .section-head p{margin:15px 0 0;font-size:16px;line-height:1.6;color:var(--v-fg-muted)} .section-head.center p{margin-left:auto;margin-right:auto} /* ---- features bento ---- */ .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px} .bento-cell{position:relative;display:flex;flex-direction:column;border:none;border-radius:var(--r-lg); background:var(--v-surface);padding:26px 26px 24px;transition:background-color .12s;min-height:172px;box-shadow:var(--elev)} .bento-cell:hover{background:var(--v-surface-muted)} .bento-cell.span2{grid-column:span 2} .bento-cell.span3{grid-column:span 3} .bento-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto} .bento-ico{color:var(--brand-ink);display:inline-flex;line-height:0} .bento-ico svg{width:28px;height:28px;display:block;flex:none;stroke-width:1.35} .bento-idx{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--v-fg-subtle);font-variant-numeric:tabular-nums} .bento h3{font-size:16px;font-weight:600;letter-spacing:-.012em;margin:20px 0 0} .bento p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--v-fg-muted);max-width:460px} /* grounded mini-visual */ .bento-ground{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:18px} .gchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--v-fg)} .gchip svg{flex:none;color:var(--v-delta-up)} /* single avatar showcase tile */ .bento-cell.bento-avatar-cell{display:grid;grid-template-rows:auto 1fr auto;min-height:240px} .bento-cell.bento-avatar-cell .bento-top{margin-bottom:0} .bento-avatar{display:flex;align-items:center;justify-content:center;padding:10px 0} .bento-avatar img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:none; background:var(--v-surface);box-shadow:var(--elev)} .bento-cell.bento-avatar-cell .bento-foot{margin-top:20px} .bento-cell.bento-avatar-cell h3{margin-top:0} /* branding avatars inline */ .bento-cell.branding{padding:16px;justify-content:center} /* Hollywood Squares avatar grid */ .hsq{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .hsq-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 14px;border-radius:var(--r-md); border:none;background:var(--v-hover);text-align:center;transition:background-color .12s} .hsq-tile:hover{background:#ececec} .hsq-tile img{width:56px;height:56px;border-radius:var(--r-lg);object-fit:cover;border:none;background:var(--v-surface)} .hsq-name{font-size:12.5px;font-weight:600;color:var(--v-fg);line-height:1.2;letter-spacing:-.01em} .hsq-name small{display:block;font-family:var(--mono);font-size:9px;font-weight:400;color:var(--v-fg-subtle);margin-top:3px;letter-spacing:.02em} .hsq-more{flex-direction:row;justify-content:center;gap:9px;background:var(--brand-tint);border:none;color:var(--brand-ink);grid-column:1 / -1} .hsq-more .t{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.35} @media (max-width:920px){ .bento{grid-template-columns:1fr 1fr} .bento-cell.span2,.bento-cell.span3{grid-column:span 2} .bento-cell.branding{flex-direction:column;align-items:stretch;gap:22px} .bento-cell.branding .bb-text{flex:none} } @media (max-width:560px){ .bento{grid-template-columns:1fr} .bento-cell.span2,.bento-cell.span3{grid-column:span 1} .hsq{grid-template-columns:repeat(3,1fr)} } /* ---- how it works ---- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .step{position:relative;border:none;border-radius:var(--r-lg);background:var(--v-surface);padding:26px 24px;box-shadow:var(--elev)} .step-n{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--v-fg-subtle);letter-spacing:.08em} .step-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-sm); border:none;background:var(--brand-tint);color:var(--brand-ink);margin:14px 0 16px} .step h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0} .step p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--v-fg-muted)} .step-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:500;color:var(--brand-ink)} /* ---- split (media showcase / generic 2-col) ---- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:8px} .split.rev{align-items:start} .split.rev .split-text{order:2} .split-text h2{font-size:30px;line-height:1.12;font-weight:600;letter-spacing:-.026em;margin:13px 0 0;text-wrap:balance} .split-text p{margin:15px 0 0;font-size:15.5px;line-height:1.62;color:var(--v-fg-muted);max-width:460px} .checklist{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .checklist li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--v-fg)} .checklist li svg{flex:none;color:var(--brand);margin-top:1px} .checklist li b{font-weight:600} .checklist li span{color:var(--v-fg-muted)} /* media showcase visual — assistant response with lightbox + video */ .media-card{border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)} .media-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)} .media-head .av{width:24px;height:24px;border-radius:var(--r-pill);flex:none;background:var(--brand-tint) url('/docutrain-icon.png') center/68% no-repeat;border:none} .media-head .nm{font-size:12.5px;font-weight:600} .media-head .st{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle);display:flex;align-items:center;gap:5px} .media-head .st .dot{width:6px;height:6px;border-radius:999px;background:var(--v-delta-up)} .media-body{padding:16px 16px 18px} .media-q{display:inline-block;font-size:12.5px;color:var(--v-fg-muted);background:var(--v-hover);border:none; border-radius:var(--r-sm);padding:7px 11px;margin-bottom:14px} .media-line{height:8px;border-radius:3px;background:var(--v-hover);margin-bottom:8px} .media-attach{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .attach{position:relative;border:none;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/10;background:var(--v-hover)} .attach .mock{display:block;width:100%;height:100%} .attach .tag{position:absolute;top:7px;left:7px;z-index:1;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;background:rgba(255,255,255,.94);border:none;border-radius:var(--r-xs);padding:2px 6px;color:var(--v-fg-muted)} .attach .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:38px;height:38px;border-radius:999px; background:rgba(255,255,255,.95);border:none;display:flex;align-items:center;justify-content:center;color:var(--v-fg); box-shadow:var(--elev)} .attach .dur{position:absolute;bottom:7px;right:7px;z-index:1;font-family:var(--mono);font-size:9px;background:var(--v-fg);color:#fff;border-radius:3px;padding:2px 5px} /* ---- access / security row ---- */ .access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .access{border:none;border-radius:var(--r-lg);background:var(--v-surface);padding:26px 24px;box-shadow:var(--elev)} .access-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .access-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm);border:none;background:var(--v-hover);color:var(--v-fg)} .access h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0} .access p{margin:7px 0 0;font-size:13px;line-height:1.58;color:var(--v-fg-muted)} .v-chip{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border:none; border-radius:var(--r-pill);font-family:var(--mono);font-size:10.5px;font-weight:500;background:var(--v-hover)} .v-chip .cdot{width:6px;height:6px;border-radius:999px} /* ---- collections + branding (two halves) ---- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px} .panel{border:none;border-radius:var(--r-lg);background:var(--v-surface);padding:28px 26px;box-shadow:var(--elev)} .panel h3{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:14px 0 0} .panel p{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--v-fg-muted)} .panel-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);border:none;background:var(--v-hover);color:var(--v-fg)} /* collection stack visual */ .coll-vis{margin-top:20px;display:flex;flex-direction:column;gap:8px} .coll-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;border-radius:var(--r-sm);background:var(--v-hover)} .coll-item .ci{width:26px;height:26px;border-radius:var(--r-sm);border:none;background:var(--v-surface);display:flex;align-items:center;justify-content:center;color:var(--v-fg-subtle);flex:none} .coll-item .ct{font-size:13px;font-weight:500} .coll-item .cm{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle)} /* avatars visual */ .av-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px} .av-card{display:flex;align-items:center;gap:13px;padding:10px 18px 10px 10px;border:none;border-radius:var(--r-lg);background:var(--v-hover)} .av-card .av{width:60px;height:60px;border-radius:var(--r-md);flex:none;border:none;object-fit:cover;background:var(--v-surface)} .av-card .an{font-size:14px;font-weight:600;line-height:1.15;letter-spacing:-.01em} .av-card .ad{font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle);margin-top:2px} /* company branding visual */ .brand-vis{margin-top:20px;display:flex;flex-direction:column;gap:10px} .brand-field{display:flex;align-items:center;gap:12px;padding:11px 14px;border:none;border-radius:var(--r-md);background:var(--v-hover)} .brand-field .bf-label{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);flex:none;width:78px} .brand-field .bf-logo{height:17px;width:auto} .brand-field .bf-val{font-size:13.5px;font-weight:600;color:var(--v-fg);display:inline-flex;align-items:center;white-space:nowrap} .brand-field .bf-val .caret{display:inline-block;width:1.5px;height:15px;background:var(--brand);margin-left:2px;animation:bf-blink 1.1s step-end infinite} @keyframes bf-blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.brand-field .bf-val .caret{animation:none}} .brand-swatches{display:flex;align-items:center;gap:11px} .brand-swatches .sws{display:flex;gap:9px;margin-left:auto} .brand-sw{width:24px;height:24px;border-radius:var(--r-sm);border:none;box-shadow:inset 0 0 0 1px rgba(10,10,10,.08)} .brand-sw.sel{outline:2px solid var(--brand);outline-offset:2px} /* ---- safety / compliance — live moderation console ---- */ .guard-console{margin-top:48px;border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)} .guard-head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)} .guard-head .ttl{font-size:13px;font-weight:600;letter-spacing:-.01em} .guard-head .right{margin-left:auto;display:flex;align-items:center;gap:12px} .guard-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--v-delta-up)} .guard-live .pulse{width:7px;height:7px;border-radius:999px;background:var(--v-delta-up);position:relative} .guard-live .pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1px solid var(--v-delta-up);opacity:.6;animation:guard-ping 1.8s ease-out infinite} @keyframes guard-ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}} @media (prefers-reduced-motion:reduce){.guard-live .pulse::after{animation:none;opacity:.4}} .guard-head .win{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)} .guard-grid{display:grid;grid-template-columns:236px 1fr} .guard-legend{border-right:1px solid var(--v-border);padding:16px 18px;background:var(--v-surface-muted)} .guard-legend .lh{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin-bottom:14px} .guard-det{display:flex;align-items:center;gap:10px;padding:9px 0} .guard-det + .guard-det{border-top:1px solid var(--v-border)} .guard-det .dt{width:8px;height:8px;border-radius:999px;flex:none} .guard-det .nm{font-size:12.5px;font-weight:500;color:var(--v-fg)} .guard-det .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)} .guard-det .ct b{color:var(--v-fg);font-weight:600} .guard-feed{min-width:0} .guard-row{display:grid;grid-template-columns:18px 132px 1fr auto;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--v-border);transition:background-color .12s} .guard-row:last-child{border-bottom:none} .guard-row:hover{background:var(--v-bg)} .guard-row .sev{width:8px;height:8px;border-radius:999px;justify-self:center} .guard-type{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);border:none; background:var(--v-hover);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .guard-msg{min-width:0;font-size:13px;color:var(--v-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .guard-msg .q{color:var(--v-fg-subtle);font-style:italic} .guard-end{display:flex;align-items:center;gap:14px;white-space:nowrap} .guard-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500} .guard-status .sd{width:6px;height:6px;border-radius:999px} .guard-time{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle);min-width:48px;text-align:right} /* severity / status colors */ .c-danger{color:var(--v-danger)}.bg-danger{background:var(--v-danger)} .c-warn{color:#b7791f}.bg-warn{background:var(--v-warn)} .c-subtle{color:var(--v-fg-subtle)}.bg-subtle{background:var(--v-fg-subtle)} .c-brand{color:var(--brand-ink)}.bg-brand{background:var(--brand)} .c-ok{color:var(--v-delta-up)}.bg-ok{background:var(--v-delta-up)} .guard-type.t-danger{color:var(--v-danger);background:#fef2f2;border-color:transparent} .guard-type.t-warn{color:#b7791f;background:#fffbeb;border-color:transparent} .guard-type.t-subtle{color:var(--v-fg-subtle)} .guard-type.t-brand{color:var(--brand-ink);background:var(--brand-tint);border-color:transparent} .guard-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--v-border);background:var(--v-surface-muted)} .guard-foot .note{font-size:12.5px;color:var(--v-fg-muted)} .guard-foot .note b{color:var(--v-fg);font-weight:600} .guard-foot .all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--brand-ink)} @media (max-width:780px){ .guard-grid{grid-template-columns:1fr} .guard-legend{border-right:none;border-bottom:1px solid var(--v-border)} .guard-row{grid-template-columns:14px 1fr;row-gap:8px} .guard-row .guard-type{grid-column:2}.guard-end{grid-column:2} } /* ---- embed widget ---- */ .embed-card{border:none;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);position:relative;box-shadow:var(--elev)} .embed-head{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #2a2a2a} .embed-head .d{width:9px;height:9px;border-radius:999px;background:#3a3a3a} .embed-head .t{margin-left:8px;font-family:var(--mono);font-size:11px;color:#8a8a8a} .embed-code{padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:#d4d4d4;overflow-x:auto} .embed-code .tag{color:#7ec5f0}.embed-code .at{color:#c8a0f0}.embed-code .vl{color:#9fe0a8}.embed-code .cm{color:#6a6a6a} /* floating widget mock */ .widget-mock{position:relative;border:none;border-radius:var(--r-lg);background:var(--v-hover); min-height:220px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:18px} .widget-mock .sitebar{position:absolute;top:0;left:0;right:0;height:38px;border-bottom:1px solid var(--v-border);background:var(--v-surface);display:flex;align-items:center;gap:8px;padding:0 14px} .widget-mock .sb-dot{width:8px;height:8px;border-radius:999px;background:var(--v-border-strong)} .widget-mock .sb-line{height:6px;border-radius:3px;background:var(--v-hover)} .widget-bubble{width:54px;height:54px;border-radius:999px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff; box-shadow:0 8px 24px -8px rgba(15,129,199,.5)} .widget-pop{position:absolute;right:18px;bottom:84px;width:210px;border:none;border-radius:var(--r-md);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)} .widget-pop .wp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--v-border)} .widget-pop .wp-av{width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,var(--brand),#0a6aa6)} .widget-pop .wp-nm{font-size:11.5px;font-weight:600} .widget-pop .wp-body{padding:12px} .widget-pop .wp-msg{height:7px;border-radius:3px;background:var(--v-hover);margin-bottom:7px} /* ---- analytics / intelligence ---- */ .intel-card{border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)} .intel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)} .intel-head .ttl{font-size:13px;font-weight:600} .intel-body{padding:6px 0} .theme-row{display:grid;grid-template-columns:1fr 120px 56px;gap:16px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--v-border)} .theme-row:last-child{border-bottom:none} .theme-name{font-size:13.5px;font-weight:500} .theme-name small{display:block;font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle);font-weight:400;margin-top:2px} .theme-bar{height:6px;border-radius:3px;background:var(--v-hover);overflow:hidden} .theme-bar i{display:block;height:100%;border-radius:3px;background:var(--brand)} .theme-pct{font-family:var(--mono);font-size:12px;color:var(--v-fg);text-align:right} /* ---- final CTA band ---- */ .cta-band{background:var(--ink);color:#fafafa;border-bottom:1px solid var(--ink)} .cta-in{padding:84px 0;text-align:center} .cta-in .eyebrow{color:#9fd4f5} .cta-in .eyebrow::before{background:#7ec5f0} .cta-in h2{font-size:42px;line-height:1.07;font-weight:600;letter-spacing:-.03em;margin:14px auto 0;max-width:620px;text-wrap:balance} .cta-in p{margin:16px auto 0;max-width:480px;font-size:16px;line-height:1.6;color:#a3a3a3} .cta-actions{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:30px} .btn-on-dark{background:#fafafa;color:#0a0a0a;border-color:#fafafa} .btn-on-dark:hover{background:#e5e5e5} .btn-dark-ghost{background:transparent;color:#fafafa;border-color:#333} .btn-dark-ghost:hover{background:#1a1a1a;border-color:#444} .cta-note{margin-top:20px;font-family:var(--mono);font-size:11px;color:#7a7a7a} /* ---- footer ---- */ .footer{background:var(--v-bg);padding:56px 0 40px} .footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px} .footer-brand .logo{height:24px;width:auto;margin-bottom:14px} .footer-brand p{font-size:13px;line-height:1.6;color:var(--v-fg-muted);max-width:240px;margin:0} .footer-col h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin:0 0 14px} .footer-col a{display:block;font-size:13.5px;color:var(--v-fg-muted);padding:5px 0;transition:.12s} .footer-col a:hover{color:var(--v-fg)} .footer-bottom{max-width:var(--maxw);margin:40px auto 0;padding:22px 28px 0;border-top:1px solid var(--v-border); display:flex;align-items:center;justify-content:space-between;gap:16px} .footer-bottom .c{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)} /* ---- responsive ---- */ @media (max-width:920px){ .hero-in,.split,.footer-in{grid-template-columns:1fr;gap:36px} .steps,.access-grid,.duo{grid-template-columns:1fr} .hero{padding:64px 0 48px} .hero h1{font-size:52px}.split.rev .split-text{order:0} .footer-in{grid-template-columns:1fr 1fr} } /* nav: collapse to hamburger + mobile menu once the full link set won't fit */ @media (max-width:1080px){ .nav-links,.nav-right{display:none} .nav-toggle{display:flex} .nav-in{gap:16px} } @media (max-width:600px){ .wrap,.nav-in,.footer-bottom{padding-left:20px;padding-right:20px} .mobile-menu-body,.mobile-menu-foot{padding-left:20px;padding-right:20px} .footer-in{grid-template-columns:1fr 1fr} .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px} .cta-in h2{font-size:32px} .cta-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-left:auto;margin-right:auto} .cta-actions .btn{width:100%} .hero{padding:48px 0 36px} .hero h1{font-size:44px} .hero-sub{max-width:none;font-size:16px} .hero-actions-block{margin-top:20px} .hero-cta{flex-direction:column;align-items:stretch;width:100%;gap:10px} .hero-cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center} .hero-cta .btn svg{flex:none} .kicker{letter-spacing:.08em;font-size:11px} .page-title{font-size:36px} .plan-grid{grid-template-columns:1fr} } /* ===================== SUBPAGES (why / pricing / blog) ===================== */ .container{max-width:var(--maxw);margin:0 auto;padding:0 28px} .section-sm{padding:56px 0} .hero-actions{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:4px} /* page heroes */ .pricing-hero,.article-header{padding:72px 0 48px;border-bottom:1px solid var(--v-border)} .hero-meta,.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin-bottom:24px} .hero-meta-sep,.article-meta-sep{width:20px;height:1px;background:var(--v-border)} .page-title,.hero-wordmark,.article-title{font-size:clamp(36px,6vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.05; color:var(--v-fg);margin:0 0 14px;text-wrap:balance} .hero-deck,.article-deck{font-size:clamp(17px,2vw,20px);line-height:1.45;color:var(--v-fg-muted);margin:0;max-width:640px;letter-spacing:-.01em} /* editorial article (why-docutrain) */ .article-body{max-width:720px;margin:0 auto;padding:64px 28px;font-size:16.5px;line-height:1.72;color:var(--v-fg)} .article-body p{margin:0 0 22px} .article-body p strong{font-weight:600} .article-section{margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--v-border)} .article-section:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0} .article-section h2{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--v-fg);margin:0 0 20px} .article-section .label,.section-marker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:12px} .article-section .label::before,.section-marker::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--brand);flex:none} .principle-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--v-border)} .principle-list li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--v-border);align-items:start} .principle-num{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--brand-ink)} .principle-list h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--v-fg);margin:0 0 8px} .principle-list p{font-size:15px;line-height:1.62;color:var(--v-fg-muted);margin:0} .pull-quote{font-size:17px;font-weight:500;font-style:italic;line-height:1.55;color:var(--v-fg);background:var(--v-surface-muted); border:none;border-radius:var(--r-lg);padding:22px 24px;margin:28px 0} .bio-block{display:grid;gap:14px} .bio-lead{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start} .bio-photo{margin:0} .bio-photo img{display:block;width:200px;height:200px;object-fit:cover;border-radius:var(--r-lg);border:none;box-shadow:var(--elev)} .bio-block a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px} .article-cta{display:grid;gap:14px;padding:28px 0;margin-top:24px;border-top:1px solid var(--v-border)} .article-cta p{font-family:var(--mono);font-size:13px;color:var(--v-fg-muted);margin:0} /* pricing plans */ .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;padding-bottom:56px} .plan-card{display:flex;flex-direction:column;border:none;border-radius:var(--r-lg);background:var(--v-surface); padding:28px 22px;position:relative;transition:background-color .12s;box-shadow:var(--elev)} .plan-card:hover{background:var(--v-surface-muted)} .plan-card.featured{background:var(--brand-tint);box-shadow:0 0 0 1px var(--brand-line)} .plan-recommended{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase; letter-spacing:.08em;color:var(--brand-ink);padding:3px 8px;border:none;border-radius:var(--r-xs);background:var(--v-surface)} .plan-tier{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin-bottom:8px} .plan-name{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--v-fg);margin-bottom:14px} .plan-description{font-size:13.5px;line-height:1.55;color:var(--v-fg-muted);margin:0 0 20px;min-height:56px} .plan-price{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--v-fg);margin-bottom:4px} .plan-price-note{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--v-fg-subtle);margin-bottom:20px} .plan-limits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px} .plan-limit-chip{display:inline-flex;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--v-fg-muted);padding:3px 8px; border:none;border-radius:var(--r-pill);background:var(--v-hover)} .plan-features{list-style:none;margin:0 0 24px;padding:16px 0 0;border-top:1px solid var(--v-border);flex:1} .plan-features li{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:5px 0;font-size:13.5px;line-height:1.5;color:var(--v-fg);align-items:start} .plan-features li.unavailable{color:var(--v-fg-subtle)} .plan-features .check{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-ink);line-height:1.4} .plan-features .dash{font-family:var(--mono);font-size:12px;color:var(--v-fg-subtle);line-height:1.4} .plan-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px; font-size:14px;font-weight:500;border-radius:var(--r-sm);text-decoration:none;transition:background-color .12s,border-color .12s,color .12s} .plan-cta-primary{background:var(--v-fg);color:#fafafa;border:1px solid var(--v-fg)} .plan-cta-primary:hover{background:#262626} .plan-cta-outline{background:var(--v-surface);color:var(--v-fg);border:1px solid var(--v-border)} .plan-cta-outline:hover{background:var(--v-hover);border-color:var(--v-border-strong)} /* comparison table */ .comparison-wrap{border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow-x:auto;margin-bottom:56px;box-shadow:var(--elev)} .comparison{width:100%;border-collapse:collapse;font-size:14px} .comparison thead th{text-align:left;padding:14px 18px;font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase; letter-spacing:.08em;color:var(--v-fg-subtle);border-bottom:1px solid var(--v-border);background:var(--v-surface-muted);white-space:nowrap} .comparison thead th.col-featured{color:var(--brand-ink)} .comparison tbody td{padding:12px 18px;border-bottom:1px solid var(--v-border);vertical-align:middle} .comparison tbody tr:last-child td{border-bottom:0} .comparison tbody td:first-child{color:var(--v-fg);font-weight:500} .comparison tbody td.col-featured{background:var(--brand-tint);color:var(--brand-ink);font-weight:500} .comparison .cat-row td{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; color:var(--v-fg-subtle);background:var(--v-surface-muted);padding:10px 18px} .comparison .check{font-family:var(--mono);color:var(--v-fg);font-weight:600} .comparison .check.primary{color:var(--brand-ink)} .comparison .dash{font-family:var(--mono);color:var(--v-fg-subtle)} .comparison .value{font-family:var(--mono);color:var(--v-fg);font-weight:500} .comparison .value.accent{color:var(--brand-ink)} /* FAQ */ .faq{border-top:1px solid var(--v-border);margin-bottom:56px} .faq-item{border-bottom:1px solid var(--v-border)} .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:15px;font-weight:500; letter-spacing:-.01em;color:var(--v-fg);background:none;border:0;cursor:pointer;text-align:left;font-family:var(--sans)} .faq-chevron{flex:none;color:var(--v-fg-subtle);transition:transform .15s} .faq-item.open .faq-chevron{transform:rotate(180deg)} .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out} .faq-item.open .faq-answer{grid-template-rows:1fr} .faq-answer-inner{overflow:hidden} .faq-answer-inner>div{padding:0 0 20px;font-size:14.5px;line-height:1.62;color:var(--v-fg-muted)} .faq-answer-inner a{color:var(--brand-ink);text-decoration:underline} /* blog index + posts */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:36px} .blog-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border:none;border-radius:var(--r-lg); background:var(--v-surface);color:var(--v-fg);text-decoration:none;transition:background-color .12s;height:100%;box-shadow:var(--elev)} .blog-card:hover{background:var(--v-surface-muted)} .blog-card-order{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)} .blog-card-title{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.28;color:var(--v-fg);margin:0} .blog-card-deck{font-size:14px;line-height:1.55;color:var(--v-fg-muted);margin:0;flex:1} .blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle);margin-top:4px} .blog-card-arrow{transition:transform .12s} .blog-card:hover .blog-card-arrow{transform:translateX(3px)} .blog-back{color:var(--brand-ink);text-decoration:none} .blog-back:hover{text-decoration:underline} .blog-body,.blog-article .article-body{max-width:760px} .blog-body h2,.blog-article .blog-body h2{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--v-fg);margin:36px 0 14px} .blog-body h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:28px 0 12px} .blog-body h4{font-size:15px;font-weight:600;margin:22px 0 10px} .blog-body p{margin:0 0 18px} .blog-body p strong{font-weight:600;color:var(--v-fg)} .blog-body a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px} .blog-body ul,.blog-body ol{margin:0 0 18px;padding-left:1.35em} .blog-body li{margin-bottom:8px;line-height:1.62;color:var(--v-fg-muted)} .blog-body li::marker{color:var(--v-fg-subtle)} .blog-body hr{border:0;border-top:1px solid var(--v-border);margin:32px 0} .blog-body blockquote{margin:24px 0;padding:16px 20px;border:none;background:var(--v-surface-muted);border-radius:var(--r-md)} .blog-body blockquote p{margin:0;font-style:italic;color:var(--v-fg-muted)} .blog-body code{font-family:var(--mono);font-size:.88em;background:var(--v-hover);border:none;border-radius:var(--r-xs);padding:1px 5px} .blog-body pre{background:var(--ink);color:#e5e5e5;border-radius:var(--r-lg);padding:18px 20px;overflow-x:auto;margin:0 0 20px;font-size:13px;line-height:1.65} .blog-body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit} .blog-table-wrap{overflow-x:auto;margin:0 0 24px;border:none;border-radius:var(--r-lg);box-shadow:var(--elev);background:var(--v-surface)} .blog-table{width:100%;border-collapse:collapse;font-size:14px} .blog-table thead{background:var(--v-surface-muted)} .blog-table th{text-align:left;padding:12px 16px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:var(--v-fg-subtle);border-bottom:1px solid var(--v-border)} .blog-table td{padding:12px 16px;border-top:1px solid var(--v-border);vertical-align:top;color:var(--v-fg-muted)} .blog-table td code{font-size:12px} .blog-content-image,.blog-content-figure{margin:24px 0} .blog-content-image{max-width:100%;height:auto;border-radius:var(--r-lg);border:none;box-shadow:var(--elev)} .blog-content-caption{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle);margin-top:8px;text-align:center} .blog-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:40px 0;padding-top:32px;border-top:1px solid var(--v-border)} .blog-prevnext-link{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:none;border-radius:var(--r-lg); background:var(--v-surface);text-decoration:none;transition:background-color .12s;box-shadow:var(--elev)} .blog-prevnext-link:hover{background:var(--v-surface-muted)} .blog-prevnext-next{text-align:right} .blog-prevnext-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--v-fg-subtle)} .blog-prevnext-title{font-size:14px;font-weight:600;line-height:1.35;color:var(--v-fg)} @media (max-width:1000px){ .plan-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:780px){ .bio-lead{display:flow-root} .bio-photo{float:left;margin:2px 18px 10px 0} .bio-photo img{width:108px;height:108px} .bio-lead > p{margin-top:0} .blog-prevnext{grid-template-columns:1fr} .blog-prevnext-next{text-align:left} .comparison-wrap{font-size:13px} }