:root { --ink:#0b1020; --muted:#5e677f; --paper:#f8f8fb; --line:#e5e7ef; --blue:#335dff; --aqua:#58e0d0; --lime:#d4f58a; --coral:#ff7a59; --shadow:0 20px 55px rgba(24,34,72,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } .skip-link { position:absolute; top:-4rem; left:1rem; background:var(--ink); color:#fff; padding:.7rem 1rem; z-index:20; } .skip-link:focus { top:1rem; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:0 max(5vw,24px); border-bottom:1px solid rgba(229,231,239,.72); background:rgba(248,248,251,.88); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }.header-left { display:flex; align-items:center; gap:1rem; }.account-links { display:flex; gap:.65rem; padding-left:1rem; border-left:1px solid #e1e5ef; font-size:.76rem; font-weight:750; }.account-links a:last-child { padding:.28rem .55rem; border-radius:999px; color:#fff; background:var(--ink); }
.brand { display:flex; align-items:center; gap:.65rem; font-size:1.02rem; font-weight:700; letter-spacing:-.03em; white-space:nowrap; } .brand b { color:var(--blue); } .brand-mark { display:grid; width:32px; height:32px; border-radius:9px; place-items:center; color:#fff; background:var(--ink); font-size:.66rem; letter-spacing:-.08em; }
nav { display:flex; align-items:center; gap:1.5rem; color:#4a5267; font-size:.92rem; } nav a:hover, footer a:hover { color:var(--blue); }.all-tools-menu { position:relative; }.all-tools-menu summary { cursor:pointer; list-style:none; font-weight:700; }.all-tools-menu summary::-webkit-details-marker { display:none; }.all-tools-menu summary span { color:var(--blue); margin-left:.18rem; }.dropdown-tools { position:absolute; top:calc(100% + 14px); left:-14px; display:grid; min-width:175px; padding:.45rem; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }.dropdown-tools a { padding:.5rem .6rem; border-radius:7px; font-size:.8rem; }.dropdown-tools a:hover { background:#edf0ff; }.header-cta { padding:.57rem .9rem; border:1px solid var(--ink); border-radius:999px; font-weight:700; font-size:.84rem; }
.hero { max-width:1180px; margin:0 auto; padding:6.5rem max(5vw,24px) 5rem; display:grid; grid-template-columns:1.05fr .8fr; gap:5rem; align-items:center; overflow:hidden; }.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.71rem; margin:0 0 .8rem; }.hero h1,.section-heading h2,.membership h2,.desktop h2,.faq h2,.guides h2 { letter-spacing:-.065em; line-height:.98; font-size:clamp(2.7rem,6vw,5.2rem); margin:.2rem 0 1.5rem; max-width:800px; }.hero h1 em { color:var(--blue); font-style:normal; }.hero-lede { color:var(--muted); max-width:610px; font-size:1.12rem; }.hero-actions { display:flex; align-items:center; gap:1.4rem; margin:2rem 0; }.button { border-radius:999px; padding:.85rem 1.2rem; font-weight:750; border:1px solid transparent; transition:transform .15s ease,box-shadow .15s ease; display:inline-flex; align-items:center; justify-content:center; }.button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(37,58,138,.14); }.button-primary { color:#fff; background:var(--blue); }.button-primary:disabled { background:#aab7e6; cursor:not-allowed; transform:none; box-shadow:none; }.button-outline { background:#fff; border-color:#cfd4e4; }.button-light { background:#fff; color:var(--ink); }.text-link { color:var(--blue); font-weight:750; }.trust-list { list-style:none; display:flex; gap:1.25rem; padding:0; margin:1.7rem 0 0; color:#4d576e; font-size:.82rem; }.trust-list li::before { content:"✓"; color:#178675; font-weight:900; margin-right:.38rem; }
.home-tools { max-width:1180px; margin:0 auto; padding:1rem max(5vw,24px) 5rem; }.home-tools-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; }.home-tools-heading .text-link { white-space:nowrap; margin-bottom:1rem; }.tool-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.7rem 0; }.tool-filters button { border:1px solid #dfe4ef; padding:.48rem .72rem; border-radius:999px; color:#556079; background:#fff; font-size:.77rem; font-weight:800; }.tool-filters button:hover,.tool-filters button.is-active { color:#fff; border-color:var(--ink); background:var(--ink); }.home-tool-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; }.home-tool-card { min-height:130px; display:flex; flex-direction:column; align-items:flex-start; padding:.9rem; border:1px solid #e0e5ef; border-radius:14px; color:var(--ink); background:#fff; transition:.18s ease; }.home-tool-card:hover { transform:translateY(-3px); border-color:#b9c5f8; box-shadow:0 13px 25px rgba(24,34,72,.09); }.home-tool-card[hidden] { display:none; }.home-tool-card i { display:grid; width:31px; height:31px; place-items:center; margin-bottom:.6rem; border-radius:9px; color:var(--blue); background:#e9edff; font-size:.83rem; font-style:normal; font-weight:900; }.home-tool-card strong { font-size:.82rem; letter-spacing:-.03em; }.home-tool-card small { flex:1; margin:.17rem 0 .45rem; color:#737d93; font-size:.68rem; line-height:1.25; }.home-tool-card b { padding:.12rem .34rem; border-radius:99px; color:#087f71; background:#d5faf4; font-size:.57rem; letter-spacing:.04em; text-transform:uppercase; }.home-tool-card.is-coming { background:#f3f5f8; color:#667087; cursor:default; }.home-tool-card.is-coming b { color:#778098; background:#e6e9ee; }
.hero-art { min-height:360px; position:relative; }.paper { position:absolute; width:245px; height:310px; right:14%; top:16px; border-radius:13px; background:#fff; box-shadow:var(--shadow); }.paper-back { transform:rotate(14deg) translate(33px,25px); background:var(--aqua); }.paper-mid { transform:rotate(-9deg) translate(-31px,35px); background:var(--lime); }.paper-front { padding:40px 30px; overflow:hidden; }.paper-tab { display:block; width:51px; height:10px; border-radius:99px; background:var(--coral); margin-bottom:38px; }.paper-line { display:block; width:78%; height:9px; border-radius:99px; background:#e8ebf3; margin:16px 0; }.paper-line-long { width:100%; background:#cdd6fb; }.paper-line-short { width:48%; }.paper-stamp { position:absolute; bottom:30px; right:28px; display:grid; place-items:center; width:66px; height:66px; border:3px solid var(--blue); color:var(--blue); border-radius:50%; transform:rotate(-13deg); font-weight:900; font-size:.8rem; }.spark { position:absolute; color:var(--blue); font-size:2rem; font-weight:300; }.spark-one { top:3%; right:7%; }.spark-two { bottom:6%; left:12%; color:var(--coral); }
.tool-section,.why-section,.membership,.desktop,.faq { max-width:1180px; margin:0 auto; padding:5.5rem max(5vw,24px); }.tool-section { background:#fff; max-width:none; }.tool-section > .section-heading,.tool-section > .tool-layout { max-width:1080px; margin-left:auto; margin-right:auto; }.section-heading { margin-bottom:2.4rem; }.section-heading h2 { font-size:clamp(2rem,4.4vw,3.5rem); margin-bottom:.85rem; }.section-heading > p:not(.eyebrow) { max-width:610px; color:var(--muted); }.compact { margin-bottom:2rem; }
.catalog { max-width:1180px; margin:0 auto; padding:5.5rem max(5vw,24px); }.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.catalog-card { min-height:290px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:1.25rem; display:flex; flex-direction:column; gap:.25rem; transition:transform .2s ease,box-shadow .2s ease; }.catalog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.catalog-card h3 { letter-spacing:-.04em; margin:.75rem 0 .5rem; }.catalog-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; font-size:1.1rem; }.catalog-icon.blue { color:var(--blue); background:#e9edff; }.catalog-icon.coral { color:#d74a2c; background:#ffe5df; }.catalog-icon.aqua { color:#087f71; background:#d5faf4; }.catalog-icon.lime { color:#526b15; background:#edf9cf; }.catalog-card a,.catalog-card span:not(.catalog-icon) { border-top:1px solid #edf0f5; padding:.5rem 0; display:flex; justify-content:space-between; align-items:center; color:#556079; font-size:.81rem; }.catalog-card a { color:var(--ink); font-weight:700; }.catalog-card a:hover { color:var(--blue); }.catalog-card b,.catalog-card small { padding:.12rem .35rem; border-radius:99px; background:#d5faf4; color:#087f71; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; }.catalog-card small { background:#f0f1f5; color:#7d8699; }
.tool-layout { display:grid; grid-template-columns:286px 1fr; gap:1.25rem; }.tool-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; align-content:start; }.tool-tab { min-height:94px; text-align:left; border:1px solid var(--line); background:#fff; padding:.85rem; color:#4e5870; font-weight:700; border-radius:14px; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }.tool-tab span { display:block; color:var(--blue); font-size:1.2rem; line-height:1; margin-bottom:.48rem; }.tool-tab strong,.tool-tab small { display:block; }.tool-tab strong { color:var(--ink); font-size:.86rem; }.tool-tab small { color:#778098; font-size:.7rem; font-weight:600; line-height:1.2; margin-top:.14rem; }.tool-tab:hover { transform:translateY(-2px); border-color:#b9c5f8; box-shadow:0 12px 24px rgba(24,34,72,.09); }.tool-tab.is-active { border-color:var(--blue); box-shadow:0 10px 24px rgba(51,93,255,.14); }.tool-tab.is-prominent { background:var(--ink); border-color:var(--ink); }.tool-tab.is-prominent span,.tool-tab.is-prominent strong { color:#fff; }.tool-tab.is-prominent small { color:#b8c4ea; }.workspace { background:var(--ink); color:#fff; border-radius:18px; padding:clamp(1.25rem,4vw,2.7rem); box-shadow:var(--shadow); }.workspace-topline { display:flex; justify-content:space-between; gap:1rem; align-items:start; }.workspace-label { font-size:.69rem; letter-spacing:.12em; color:var(--aqua); font-weight:800; margin:0; }.workspace h3 { font-size:1.55rem; letter-spacing:-.04em; margin:.3rem 0 1.5rem; }.local-badge { color:var(--lime); border:1px solid rgba(212,245,138,.4); border-radius:999px; padding:.3rem .55rem; font-size:.73rem; white-space:nowrap; }.drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; border:1.5px dashed #647097; border-radius:14px; background:rgba(255,255,255,.035); text-align:center; padding:1.5rem; transition:.18s ease; }.drop-zone:hover,.drop-zone.is-dragging { border-color:var(--aqua); background:rgba(88,224,208,.08); }.drop-zone input { position:absolute; opacity:0; pointer-events:none; }.drop-icon { display:grid; place-items:center; height:43px; width:43px; border-radius:50%; background:#354268; color:var(--aqua); font-size:1.5rem; margin-bottom:.65rem; }.drop-zone strong { font-size:1rem; }.drop-zone > span:last-child { color:#aeb7ce; font-size:.82rem; margin-top:.22rem; }.file-list { margin-top:.8rem; }.file-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.6rem .7rem; border-radius:8px; background:rgba(255,255,255,.08); font-size:.85rem; }.file-row + .file-row { margin-top:.35rem; }.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-size { color:#b5bed2; white-space:nowrap; }.tool-options { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1rem; }.option { display:flex; gap:.5rem; align-items:center; color:#c5cce0; font-size:.83rem; }.option input,.option select { color:var(--ink); padding:.46rem .55rem; border-radius:7px; border:0; max-width:180px; }.status { color:#b5bed2; font-size:.82rem; min-height:1.3em; margin:.9rem 0; }.status.is-error { color:#ffb4a1; }.status.is-success { color:var(--aqua); }.workspace-actions { display:flex; gap:.6rem; }.workspace .button-quiet { color:#c5cce0; }
.ad-slot { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; color:#7b8499; background:repeating-linear-gradient(45deg,#f1f3f7,#f1f3f7 9px,#f8f9fb 9px,#f8f9fb 18px); border:1px solid #e4e7ef; }.ad-slot span { font-size:.63rem; letter-spacing:.12em; font-weight:800; text-transform:uppercase; }.ad-slot p { font-size:.8rem; margin:.25rem 0 0; }.ad-slot-wide { max-width:970px; height:120px; margin:4rem auto; }.ad-slot-compact { max-width:728px; height:90px; margin:0 auto 4rem; }
.why-section { padding-top:3rem; }.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.benefit-grid article { border:1px solid var(--line); border-radius:14px; padding:1.45rem; background:#fff; }.benefit-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--blue); background:#e9edff; font-size:1.2rem; }.benefit-grid h3 { margin:1rem 0 .35rem; letter-spacing:-.04em; }.benefit-grid p { color:var(--muted); font-size:.9rem; margin:0; }
.membership { display:grid; grid-template-columns:.9fr 1.25fr; gap:4rem; align-items:center; background:#e9edff; max-width:none; padding-left:max(5vw,24px); padding-right:max(5vw,24px); }.membership-copy { max-width:470px; }.membership h2,.desktop h2 { font-size:clamp(2rem,4vw,3.45rem); }.membership-copy > p:not(.eyebrow),.desktop p:not(.eyebrow) { color:#4f5c7a; }.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }.plan-card { position:relative; background:#fff; border-radius:14px; padding:1.2rem; min-height:300px; display:flex; flex-direction:column; }.plan-card.plan-featured { background:var(--ink); color:#fff; transform:translateY(-8px); }.plan-flag { position:absolute; top:-10px; right:13px; background:var(--coral); color:#fff; padding:.16rem .5rem; border-radius:99px; font-size:.65rem; font-weight:800; text-transform:uppercase; }.plan-name { font-size:.9rem; font-weight:800; margin:0; }.price { font-weight:850; font-size:1.6rem; letter-spacing:-.06em; margin:.5rem 0; }.price small { color:#7a849a; font-size:.72rem; letter-spacing:0; }.plan-featured .price small { color:#b7c0d7; }.plan-card ul { padding-left:1.05rem; color:#647087; font-size:.8rem; min-height:103px; }.plan-featured ul { color:#d0d7e8; }.plan-card li { margin:.42rem 0; }.plan-card .button { margin-top:auto; font-size:.78rem; padding:.65rem .55rem; }.pricing-note { grid-column:1/-1; margin:0; color:#596684; font-size:.78rem; }
.desktop { display:grid; grid-template-columns:.95fr 1fr; align-items:center; gap:5rem; }.desktop-window { height:245px; border:8px solid #1c263e; border-radius:15px; background:linear-gradient(130deg,#304367,#18334a); box-shadow:20px 20px 0 #cdd6fb; position:relative; padding:25px; color:#fff; overflow:hidden; }.desktop-window > div { width:8px; height:8px; float:left; margin-right:6px; border-radius:50%; background:#ff8a6b; }.desktop-window > div:nth-child(2) { background:#f7dc76; }.desktop-window > div:nth-child(3) { background:#5adacb; }.desktop-window span { display:block; clear:both; padding-top:30px; color:#d2dbf9; font-size:.75rem; }.desktop-window i { display:inline-block; width:23%; height:104px; background:#dbe5ff; opacity:.9; margin:17px 3% 0 0; border-radius:6px; }.desktop-window i:nth-of-type(2) { height:63px; background:var(--aqua); }.desktop-window i:nth-of-type(3) { height:84px; background:var(--coral); }.desktop-window b { position:absolute; right:16px; bottom:14px; font-size:.67rem; color:var(--lime); letter-spacing:.08em; text-transform:uppercase; }
.faq { max-width:900px; }.faq h2 { font-size:clamp(2rem,4vw,3.3rem); }.faq details { border-top:1px solid var(--line); padding:1.05rem 0; }.faq details:last-child { border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; font-weight:750; }.faq details p { color:var(--muted); margin:.75rem 1.2rem 0 0; }
.guides { max-width:1180px; margin:0 auto; padding:1rem max(5vw,24px) 5.5rem; }.guides h2 { font-size:clamp(2rem,4vw,3.3rem); }.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.guide-grid article { padding:1.25rem; background:#fff; border-radius:14px; border:1px solid var(--line); }.guide-grid h3 { margin:0 0 .45rem; letter-spacing:-.04em; font-size:1rem; }.guide-grid p { color:var(--muted); font-size:.85rem; margin:0 0 1rem; }.guide-grid a { color:var(--blue); font-size:.8rem; font-weight:800; }
footer { max-width:1180px; margin:0 auto; padding:2.5rem max(5vw,24px); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:1.5rem; align-items:start; color:#69738a; font-size:.85rem; }footer p { margin:0; }footer div { display:flex; justify-content:flex-end; gap:1rem; }footer small { grid-column:1/-1; margin-top:.7rem; color:#8a92a3; }
.legal-page { max-width:820px; margin:0 auto; padding:5.5rem max(5vw,24px); }.legal-page h1 { letter-spacing:-.06em; font-size:clamp(2.7rem,6vw,4.5rem); margin:.15rem 0 .5rem; }.legal-page h2 { font-size:1.25rem; letter-spacing:-.04em; margin:2.25rem 0 .45rem; }.legal-page p { color:#536078; }.legal-updated { color:#8a92a3 !important; font-size:.86rem; margin-top:0; }.legal-note { margin-top:2.5rem; padding:1rem 1.1rem; border-left:3px solid var(--coral); background:#fff2ef; font-size:.88rem; }
@media (max-width:820px) { nav { display:none; }.hero,.membership,.desktop { grid-template-columns:1fr; gap:2.4rem; }.hero { padding-top:4.2rem; }.hero-art { min-height:300px; }.paper { right:25%; }.home-tool-grid { grid-template-columns:repeat(3,1fr); }.home-tools-heading { align-items:start; flex-direction:column; gap:0; }.tool-layout { grid-template-columns:1fr; }.tool-tabs { grid-template-columns:repeat(3,minmax(150px,1fr)); overflow:auto; padding-bottom:.4rem; }.benefit-grid,.plan-grid,.catalog-grid,.guide-grid { grid-template-columns:repeat(2,1fr); }.plan-card.plan-featured { transform:none; }.membership { padding-top:4rem; padding-bottom:4rem; }.desktop { padding-top:4rem; padding-bottom:4rem; }footer { grid-template-columns:1fr; }footer div { justify-content:flex-start; } }
@media (max-width:520px) { .site-header { padding:0 18px; }.account-links { display:none; }.header-cta { display:none; }.hero,.tool-section,.home-tools,.why-section,.catalog,.membership,.desktop,.faq,.guides { padding-left:20px; padding-right:20px; }.home-tool-grid { grid-template-columns:repeat(2,1fr); }.home-tool-card { min-height:118px; }.hero h1 { font-size:3rem; }.hero-actions,.trust-list,.workspace-actions { flex-wrap:wrap; }.trust-list { display:grid; gap:.4rem; }.paper { transform:scale(.84); transform-origin:top right; right:8%; }.paper-back { transform:rotate(14deg) translate(33px,25px) scale(.84); }.paper-mid { transform:rotate(-9deg) translate(-31px,35px) scale(.84); }.workspace-topline { display:block; }.local-badge { display:inline-block; margin-bottom:1rem; }.ad-slot-wide { margin:2rem 20px; height:100px; }.desktop-window { transform:scale(.9); transform-origin:left top; margin-bottom:-24px; }.benefit-grid,.plan-grid,.catalog-grid,.guide-grid { grid-template-columns:1fr; } }
.tool-ad { max-width:1120px; min-height:96px; margin:1.25rem auto; padding:.75rem 1rem; display:grid; place-items:center; border:1px solid #e2e6ef; border-radius:14px; color:#8a94a9; background:#fafbfe; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.quota-card { display:grid; gap:.42rem; margin:1rem 0; padding:1rem; border:1px solid #cfd8fb; border-radius:13px; color:#34415e; background:linear-gradient(135deg,#f7f9ff,#eef2ff); }.quota-card b { color:#243eaf; font-size:1.02rem; }.quota-card p { margin:0; color:#66728c; font-size:.77rem; line-height:1.4; }.quota-card .quota-links { display:flex; gap:.75rem; align-items:center; margin-top:.2rem; font-size:.78rem; font-weight:800; }.quota-card .quota-links a:first-child { color:#fff; background:#335dff; padding:.42rem .62rem; border-radius:7px; }.quota-chip { width:max-content; padding:.18rem .45rem; border-radius:99px; color:#314db9; background:#dce5ff; font-size:.64rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }