/* Shared visual system: an image-first, light photographic workspace. */
:root { --bg:#f8f9fc; --bg-2:#fff; --text:#17212b; --muted:#5e6877; --muted-2:#687487; --line:#e2e7ef; --line-strong:#cbd3df; --acid:#3558f4; --cyan:#3558f4; --violet:#3558f4; --spectrum:linear-gradient(90deg,#3558f4,#3558f4); --max:1240px; --blue-soft:#eef2ff; }
html { scroll-padding-top:100px; }
body { background:var(--bg); color:var(--text); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #8ea7ff; outline-offset:4px; }
[hidden] { display:none!important; }
.auth-controls{position:relative;min-width:170px;display:flex;justify-content:flex-end}.google-signin[aria-busy=true]{cursor:wait;opacity:.8}.google-signin[aria-busy=true] .google-mark{font-size:0;width:18px;height:18px;border:2px solid #bbc4b0;border-top-color:#3d4b32;border-radius:50%;animation:auth-spin .8s linear infinite}.auth-feedback{position:absolute;right:0;top:100%;width:min(300px,calc(100vw - 40px));padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 8px 24px #0001;font-size:13px;line-height:1.6;color:var(--text);z-index:100}.account-initial{display:grid;place-items:center;background:#e8eddf;color:#405533;border-radius:50%;width:32px;height:32px;flex-shrink:0;font-size:14px;font-weight:700}.account-summary>span:not(.account-initial){min-width:0}.account-summary strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-summary:disabled,.profile-menu button:disabled{cursor:wait;opacity:.7}@keyframes auth-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.google-signin[aria-busy=true] .google-mark{animation:none}}@media(max-width:720px){.auth-controls{min-width:0}.auth-controls .header-signin{min-width:96px}.account-summary .account-initial{display:grid}.account-summary .account-initial[hidden]{display:none!important}}
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
.site-header,.seo-header { width:100%; max-width:none; margin:0; padding:0 max(24px,calc((100vw - var(--max))/2)); min-height:88px; display:flex; gap:36px; align-items:center; position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { gap:12px; flex-shrink:0; }
.brand>img { width:40px; height:40px; }
.brand-name { display:flex; flex-direction:column; gap:1px; }
.brand-name b { color:#17212b; font-size:18px; line-height:1.2; letter-spacing:-.6px; }
.brand-name small { color:#657084; font:600 12px/1.3 Manrope,Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; }
.main-nav,.seo-header nav { display:flex; align-items:center; gap:24px; margin:0 0 0 auto; }
.nav-editor { color:var(--muted); font-size:14px; font-weight:700; padding:12px 0; }
.nav-editor[aria-current=page] { color:var(--text); }
.use-cases-menu { position:static; border:0; }
.use-cases-menu>summary { border:0; background:transparent; border-radius:10px; min-height:44px; padding:10px 12px; gap:10px; color:var(--text); font-size:14px; font-weight:700; }
.use-cases-menu>summary:hover,.use-cases-menu[open]>summary { background:var(--blue-soft); color:var(--acid); }
.use-cases-menu>summary>span { color:currentColor; font-size:16px; }
.use-cases-menu[open]>summary>span { transform:rotate(180deg); }
.use-cases-panel { position:absolute; top:calc(100% + 10px); left:auto; right:max(24px,calc((100vw - var(--max))/2)); width:min(920px,calc(100vw - 48px)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:26px; background:#fff; color:var(--text); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px #24365720; }
.use-cases-panel>div { min-width:0; }
.use-cases-panel>div>b { display:block; margin:0 10px 12px; color:#7c8595; font:700 12px/1.3 Manrope,Arial,sans-serif; letter-spacing:1.3px; text-transform:uppercase; }
.use-cases-panel a { padding:10px; display:flex; align-items:center; gap:12px; border-radius:10px; color:var(--text); font-size:14px; line-height:1.35; }
.use-cases-panel a:hover,.use-cases-panel a[aria-current=page] { background:#f1f4fb; color:var(--acid); }
.use-cases-panel a img { width:42px; height:42px; object-fit:cover; border-radius:9px; }
.use-cases-panel a strong { display:block; font-size:14px; font-weight:700; }
.use-cases-panel a small { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.auth-controls { margin-left:0; }
.google-signin,.nav-cta { min-height:44px; min-width:0; padding:11px 18px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--text); font-weight:700; font-size:14px; box-shadow:0 2px 3px #17212b04; gap:10px; }
.google-signin:hover { background:#f3f5fa; border-color:#adb9cb; }
.google-mark { background:#f0f4ff; color:#3567dd; font:700 18px/1 Arial,sans-serif; border:0; }
.header-signin { min-width:104px; }
.nav-cta { background:var(--acid); color:#fff; border-color:var(--acid); }
.account-summary { max-width:235px; min-height:48px; padding:6px 10px; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.account-summary:hover,.account-summary[aria-expanded=true] { border-color:#abbafa; background:#f8faff; }
.account-summary strong { color:var(--text); font-size:13px; }
.account-summary small { color:var(--acid); font:600 12px/1.4 Manrope,Arial,sans-serif; }
.account-summary>img { width:32px; height:32px; }
.profile-menu { width:280px; padding:8px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:#fff; box-shadow:0 20px 60px #24365725; }
.profile-menu>div { border-color:var(--line); padding:12px; }
.profile-menu>div b { font-size:14px; }
.profile-menu>div span { font-size:13px; }
.profile-menu>a,.profile-menu>button { font-size:14px; color:var(--text); padding:12px; }
.profile-menu>a:hover,.profile-menu>button:hover { background:var(--blue-soft); color:var(--acid); }
.profile-menu>a>b,.profile-menu>button>b { display:none; }
.hero { min-height:0; overflow:visible; background:linear-gradient(180deg,#fff 0%,#f8f9fc 100%); }
.hero-grid,.hero-orb { display:none; }
.hero-inner { width:min(calc(100% - 48px),var(--max)); padding:64px 0 68px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.hero-copy { padding:12px 0 0; }
.eyebrow { font:700 12px/1.4 Manrope,Arial,sans-serif; letter-spacing:1.6px; text-transform:uppercase; color:var(--acid); margin:0 0 18px; gap:8px; }
.eyebrow>span { display:none; }
.eyebrow::after { display:none; }
.hero h1 { font-size:clamp(42px,4.7vw,66px); line-height:1.06; font-weight:800; letter-spacing:-3px; margin:0 0 22px; }
.hero h1 em { color:var(--acid); background:none; -webkit-text-fill-color:currentColor; font-style:normal; }
.hero-lede { margin:0; max-width:500px; font-size:17px; line-height:1.8; color:var(--muted); }
.hero-actions { gap:20px; margin:24px 0; }
.primary-link,.primary-button { min-width:0; min-height:48px; padding:13px 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--acid); border:1px solid var(--acid); border-radius:10px; color:#fff; font-size:14px; font-weight:700; line-height:1.5; box-shadow:0 3px 5px #3558f414; transition:background .18s,box-shadow .18s; }
.primary-link:hover,.primary-button:hover:not(:disabled) { background:#2444d3; box-shadow:0 6px 18px #3558f426; transform:none; }
.primary-link>span[aria-hidden],.primary-button>span[aria-hidden],.nav-cta>span[aria-hidden],.text-link>span[aria-hidden] { display:none; }
.text-link { color:var(--text); font-size:14px; font-weight:700; padding:10px 0; border-color:#bac5d8; }
.hero-stats { margin:24px 0 0; border:0; display:flex; flex-wrap:wrap; gap:18px; }
.hero-stats>div { display:flex; align-items:center; gap:7px; padding:0; }
.hero-stats dt { font-size:14px; color:#375647; }
.hero-stats dd { margin:0; color:var(--muted); font:500 13px/1.5 Manrope,Arial,sans-serif; text-transform:none; letter-spacing:0; }
.hero-study { margin:30px 0 0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:0 8px 24px #26395007; }
.hero-study .comparison { border-radius:10px; aspect-ratio:1.65; }
.hero-study figcaption { padding:10px 6px 4px; display:flex; gap:8px; justify-content:space-between; color:var(--muted); font-size:12px; }
.hero-study figcaption b { color:var(--text); font-weight:600; }
.tool-shell { border:1px solid #dae1eb; border-radius:22px; background:#fff; box-shadow:0 16px 48px #29406c0c,0 3px 8px #29406c04; backdrop-filter:none; scroll-margin-top:110px; }
.tool-topline { min-height:56px; padding:14px 24px; color:var(--text); font:700 13px/1.4 Manrope,Arial,sans-serif; letter-spacing:0; background:#fff; }
.live-dot { display:none; }
.preview-pill { border:0; border-radius:6px; background:var(--blue-soft); color:#3152c8; padding:5px 8px; font-size:12px; font-weight:600; }
.tool-card { background:#fff; padding:24px; }
.auth-gate { min-height:370px; padding:30px 18px; border:1px dashed #cbd6e8; border-radius:14px; background:#f7f9fd; }
.auth-gate-glow { display:none; }
.auth-lock { width:62px; height:62px; border-radius:16px; background:#eaf0ff; border:1px solid #dbe5ff; box-shadow:none; color:var(--acid); margin-bottom:22px; }
.auth-lock svg { width:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.auth-gate h2 { max-width:310px; font-size:27px; line-height:1.25; letter-spacing:-1px; margin-bottom:12px; }
.auth-gate>.step-label { display:none; }
.auth-gate>p:not(.step-label) { font-size:14px; line-height:1.8; max-width:310px; margin-bottom:24px; }
.auth-gate .google-signin { min-width:230px; min-height:48px; background:#fff; }
.auth-gate>small { font:500 12px/1.6 Manrope,Arial,sans-serif; margin-top:16px; }
.tool-assurance { display:flex; justify-content:center; gap:18px; margin:18px 0 0; color:var(--muted); font-size:12px; }
.tool-heading { align-items:center; margin-bottom:16px; }
.step-label { color:var(--muted-2); font:700 11px/1.4 Manrope,Arial,sans-serif; letter-spacing:1.2px; margin-bottom:5px; }
.tool-heading h2 { font-size:22px; line-height:1.3; letter-spacing:-.6px; }
.format-copy { font:600 11px/1.4 Manrope,Arial,sans-serif; white-space:nowrap; }
.drop-zone { min-height:210px; padding:24px; background:#f7f9fd; border:1.5px dashed #c5d0e3; border-radius:14px; }
.drop-zone::before,.drop-zone::after { display:none; }
.drop-zone:hover,.drop-zone.is-dragging { background:#eef3ff; border-color:var(--acid); transform:none; }
.drop-zone:focus-within { outline:3px solid #8ea7ff; outline-offset:3px; }
.upload-icon { width:52px; height:52px; border-radius:14px; background:#e9efff; border:0; box-shadow:none; }
.upload-icon svg { stroke:var(--acid); }
.drop-zone strong { font-size:16px; margin-top:14px; }
.drop-zone>span:not(.upload-icon) { font-size:14px; }
.drop-zone small { font:500 12px/1.5 Manrope,Arial,sans-serif; }
.file-preview { background:#f7f9fd; border:1px solid var(--line); border-radius:12px; padding:12px; }
.file-preview img { border-radius:8px; }
.file-preview strong { font-size:14px; }
.file-preview span { font:500 12px/1.6 Manrope,Arial,sans-serif; }
.file-preview button { color:var(--muted); background:#fff; }
.mode-picker { margin:22px 0 12px; gap:6px; }
.mode-picker legend { color:var(--text); font:700 13px/1.4 Manrope,Arial,sans-serif; letter-spacing:0; margin-bottom:10px; }
.mode-picker label>span { min-height:44px; padding:9px 3px; font-size:12px; font-weight:600; background:#fff; border-color:var(--line); border-radius:8px; }
.mode-picker label i { display:none; }
.mode-picker input:checked+span { color:var(--acid); border-color:#9aacf9; background:var(--blue-soft); box-shadow:inset 0 0 0 1px #9aacf930; }
.mode-hint { margin:0 0 18px; color:var(--muted); font-size:12px; min-height:20px; }
.primary-button { width:100%; }
.primary-button:disabled { opacity:1; color:#8b95a5; background:#edf0f5; border-color:#e4e9f1; box-shadow:none; }
.tool-note { min-height:20px; font:500 12px/1.6 Manrope,Arial,sans-serif; margin-top:12px; color:var(--muted); }
.result-panel { margin-top:24px; padding-top:24px; }
.result-heading h3 { font-size:20px; letter-spacing:-.5px; }
.result-heading>span { border:0; background:var(--blue-soft); color:var(--acid); font:600 12px/1.4 Manrope,Arial,sans-serif; }
.result-grid { border-color:var(--line); border-radius:12px; background:var(--line); }
.result-grid figure { background:#f1f3f7; }
.result-grid figcaption { font:600 12px/1.4 Manrope,Arial,sans-serif; color:var(--text); padding:10px 12px; text-transform:none; letter-spacing:0; background:#fff; }
.result-panel>p { font-size:13px; line-height:1.7; }
.result-actions { grid-template-columns:1fr; }
.result-actions>button { background:#fff; font-size:14px; min-height:44px; border-radius:10px; }
@media(max-width:1000px) { .site-header,.seo-header{gap:22px}.hero-inner{gap:32px;padding:44px 0}.hero h1{font-size:52px}.hero-lede{font-size:16px}.tool-card{padding:20px}.auth-gate{padding:28px 14px}.account-summary>span{display:none}.format-copy{display:none} }
@media(max-width:720px) { .site-header,.seo-header{min-height:72px;padding:0 18px;gap:14px}.brand>img{width:34px;height:34px}.brand-name b{font-size:15px}.brand-name small{font-size:10px}.main-nav,.seo-header nav{gap:0}.nav-editor{display:none}.use-cases-menu>summary{padding:10px 8px;font-size:13px}.google-signin.header-signin{min-width:0;padding:10px 12px}.header-signin .google-mark{display:none}.auth-controls{flex-shrink:0}.use-cases-panel{right:12px;width:calc(100vw - 24px);padding:18px;gap:16px;max-height:calc(100dvh - 110px);overflow:auto;grid-template-columns:1fr 1fr}.use-cases-panel>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.use-cases-panel>div:last-child>b{grid-column:1/-1}.use-cases-panel a{padding:8px 5px;gap:8px}.use-cases-panel a img{width:32px;height:36px}.use-cases-panel a strong{font-size:13px}.use-cases-panel a small{font-size:11px}.hero-inner{width:calc(100% - 36px);grid-template-columns:1fr;padding:36px 0 40px;gap:30px}.hero-copy{padding:0}.hero h1{font-size:46px;letter-spacing:-2.2px;max-width:560px}.hero-lede{max-width:580px}.hero-study{display:none}.hero-actions{margin:22px 0 18px}.hero-actions .primary-link{display:none}.hero-stats{gap:12px;margin-top:18px}.hero-stats dd{font-size:12px}.tool-card{padding:18px}.tool-topline{padding:12px 18px}.auth-gate{min-height:325px}.auth-gate h2{font-size:25px}.tool-assurance{gap:12px}.mode-picker label>span{font-size:11px}.profile-menu{right:-2px;width:min(280px,calc(100vw - 36px))}.seo-header .nav-cta{font-size:12px;padding:10px 12px}.account-summary{padding:5px;border:0}.account-summary>i{display:none}.account-summary>img{width:32px;height:32px} }
.tool-assurance { flex-wrap:wrap; }
@media(max-width:380px) { .site-header .brand-name,.seo-header .brand-name{display:none}.hero h1{font-size:40px}.hero-stats{flex-wrap:wrap}.use-cases-panel a img{display:none} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }
