/* Clay Links 1.0 — UI/UX Pro Max: flat product UI, visible focus, responsive density. */
:root{--clay-radius:18px;--clay-fast:140ms;--clay-normal:220ms}
body{--bg:#f4f7f6;--card:#fff;--ink:#143b37;--muted:#526862;--line:#dce6e1;--accent:#08766d;--soft:#e7f3ed;--nav:#f9fbf9;--shadow:none;font-family:'Plus Jakarta Sans',Inter,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.65}
body[data-theme=dark]{--bg:#111e1d;--card:#182b28;--ink:#edf6ef;--muted:#adc2ba;--line:#354c44;--accent:#66d4bb;--soft:#25453b;--nav:#15231f;--shadow:none}
body[data-accent=violet]{--accent:#6940bf;--soft:#f0eafb}body[data-accent=blue]{--accent:#245ac0;--soft:#eaf0fd}body[data-accent=orange]{--accent:#a74d16;--soft:#fff0df}
body[data-theme=dark][data-accent=violet]{--accent:#c6b0fb;--soft:#36294a}body[data-theme=dark][data-accent=blue]{--accent:#a6c4ff;--soft:#263b58}body[data-theme=dark][data-accent=orange]{--accent:#ffc28c;--soft:#493526}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}a,button,summary{touch-action:manipulation}a,button{transition:background-color var(--clay-fast),color var(--clay-fast),border-color var(--clay-fast),opacity var(--clay-fast)}
.btn{min-height:44px;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:650;box-shadow:none!important}.btn.small{min-height:40px;font-size:13px;padding:8px 13px}.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{filter:brightness(.92)}body[data-theme=dark] .btn.primary{color:#102f27}.btn.outline{background:var(--card);border-color:var(--line)}.btn.light{background:#fff;color:#143b37}.icon-btn{width:44px;height:44px;border-radius:10px;flex-shrink:0}.icon-btn svg{width:18px;height:18px}.button-row{gap:10px}.btn:active,.icon-btn:active{opacity:.78}
:is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}.skip:focus{color:#143b37;z-index:1000}
h1,h2,h3{text-wrap:balance}h1{letter-spacing:-1.3px}h2{font-size:24px;letter-spacing:-.6px}p{overflow-wrap:anywhere}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:750}.micro,small{font-size:12px}.brand{font-size:23px;letter-spacing:-.8px;gap:11px}.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--accent);font-size:30px;color:#fff}.brand small{font-size:10px;font-weight:600;border-radius:6px;color:var(--muted)}body[data-theme=dark] .brand-mark{color:#143b37}.brand-mark span{font-size:15px;right:4px;top:4px}
input,textarea,select{border-radius:10px;min-height:46px;padding:12px 14px;background:var(--card);border-color:var(--line);font-size:15px;line-height:1.5}input:hover,textarea:hover,select:hover{border-color:var(--muted)}input::placeholder{opacity:1;color:var(--muted)}label{font-size:13px;gap:8px;margin-bottom:18px}input[type=checkbox]{min-height:0;width:18px;height:18px}label.check{min-height:40px;gap:10px}label.check input{width:18px}.form-error{background:#fff1ef;color:#a62e27;padding:12px 14px;border-radius:10px;margin-top:12px}.form-error:empty{display:none}body[data-theme=dark] .form-error{background:#492a26;color:#ffbcb4}
.card,.feature-card,.price-card,.blog-card{border-radius:var(--clay-radius);box-shadow:none;background:var(--card);border-color:var(--line)}.card{padding:26px}.card-head{margin-bottom:24px}.card h3{font-size:17px}.callout{border-color:var(--line);background:var(--soft);border-radius:12px;font-size:14px;line-height:1.7}.notice-strip{font-size:14px;line-height:1.7;border-radius:12px}.empty{padding:48px 24px}.empty h3{font-size:21px}.badge{font-size:11px;letter-spacing:.3px;padding:5px 10px}.badge.green{background:#e6f2e9;color:#246143}.badge.amber{background:#fff0d7;color:#84530c}.badge.blue{background:#e9effd;color:#3154a3}.badge.red{background:#ffebe9;color:#a13630}body[data-theme=dark] .badge.green{background:#234b36;color:#b2e8be}body[data-theme=dark] .badge.amber{background:#4a3b20;color:#ffda96}body[data-theme=dark] .badge.blue{background:#263d5d;color:#b5ceff}body[data-theme=dark] .badge.red{background:#512e2c;color:#ffc3bd}
/* Public pages: a quiet editorial frame and one strong action. */
.public-nav{max-width:1440px;margin:auto;padding:22px 5%;height:90px;background:var(--bg);border-bottom:1px solid var(--line)}.public-nav nav{gap:28px}.public-nav nav a{font-size:14px;color:var(--muted)}.public-nav>div{display:flex;gap:8px}.public-nav .brand-mark{width:36px;height:36px}.public-nav .brand small{display:none}
.hero{max-width:1440px;margin:auto;min-height:640px;padding:76px 5% 88px;display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;background:none}.seo-hero h1{font-size:clamp(44px,5vw,76px);font-weight:750;line-height:1.08;letter-spacing:-3.2px;margin:24px 0}.hero h1 em{color:var(--accent);font-style:normal}.hero .lead{font-size:18px;line-height:1.8;max-width:530px;color:var(--muted);margin-bottom:28px}.hero .eyebrow{font-size:11px;letter-spacing:1.4px}.hero .btn.large{min-height:52px;padding:14px 22px}.hero .micro{font-size:12px;line-height:1.8;max-width:460px}.hero-art{padding:48px 12px;background:var(--soft);border-radius:28px;min-width:0}.link-preview{position:relative;transform:none;border-radius:20px;border:1px solid var(--line);background:var(--card);box-shadow:none;padding:30px;margin:0 12px}.preview-top{font-size:10px;gap:12px;margin-bottom:32px}.preview-top .brand-mark{width:32px;height:32px;font-size:23px;border-radius:9px}.url-long{font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:16px;overflow-wrap:anywhere;white-space:normal}.hero-short{font-size:clamp(17px,2vw,26px);font-weight:700;letter-spacing:-.8px;overflow-wrap:anywhere;word-break:break-word;color:var(--ink);background:var(--soft);padding:17px 14px;border-radius:10px}.hero-short span{color:var(--accent)}.preview-arrow{color:var(--accent);font-size:26px;padding:6px}.preview-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.preview-pills span{font-size:11px;padding:6px 9px;border:1px solid var(--line);background:var(--card);border-radius:7px}.floating-note,.floating-bottom{position:static;transform:none;background:none;box-shadow:none;border:0;text-align:center;padding:0 18px;color:var(--ink)}.floating-note{font-size:14px;margin-bottom:24px}.floating-note span{margin-left:10px}.floating-bottom{font-size:11px;margin-top:22px;color:var(--muted)}
.section{max-width:1280px;margin:auto;padding:66px 5%}.section-heading{max-width:740px;margin:0 auto 36px}.section-heading h1,.section-heading h2{font-size:clamp(28px,3vw,40px);letter-spacing:-1.3px;line-height:1.2;margin-bottom:18px}.section-heading p{font-size:16px;line-height:1.8;color:var(--muted)}.feature-grid{gap:20px}.feature-card{padding:30px}.feature-icon{border-radius:12px;background:var(--soft);color:var(--accent)}.feature-card h3{font-size:19px}.feature-card p{font-size:15px;color:var(--muted);line-height:1.8}.seo-steps li{padding:28px;background:var(--card);border-radius:18px}.seo-steps p,.seo-use-cases .card p{font-size:15px;color:var(--muted);line-height:1.8}.seo-steps li>span{font-size:13px}.cta-panel{max-width:1160px;padding:52px;margin:42px auto 64px;background:#174e40;border-radius:24px;box-shadow:none}.cta-panel h2{font-size:36px;max-width:700px;line-height:1.25}.cta-panel .eyebrow,.cta-panel p{color:#d1eadd}.cta-panel .btn.light{margin-top:14px}.pricing-grid{gap:20px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}.price-card{padding:28px}.price-card h2{font-size:30px;letter-spacing:-1px}.price-card p,.price-card li{font-size:14px}.price-card h2 small{font-size:13px;letter-spacing:0}.seo-faq summary{padding:10px 0;font-size:17px}.public-footer{max-width:1440px;margin:auto;border-top:1px solid var(--line);padding:36px 5%;gap:24px}.public-footer nav{gap:20px}.public-footer nav a{font-size:13px}.public-footer small{font-size:11px}.blog-placeholder{background:var(--soft)}.blog-card-body{padding:26px}.prose{line-height:1.85;font-size:16px}.prose h1{font-size:42px}.blog-content{font-size:17px}.blog-content a{text-decoration:underline;text-underline-offset:3px}
/* Workspace: broad content, compact navigation, comfortable controls. */
.workspace{--nav:var(--card);grid-template-columns:246px minmax(0,1fr)}.sidebar{background:var(--card);color:var(--ink);border-right:1px solid var(--line);width:246px;padding:28px 20px 20px}.sidebar .brand{color:var(--ink);font-size:22px;padding:0 6px}.sidebar .brand small{border-color:var(--line);color:var(--muted)}.sidebar-scroll{padding-top:24px}.nav-label{color:var(--muted);font-size:10px;letter-spacing:1.5px;font-weight:750;padding:0 14px;margin:24px 0 10px}.nav-item{border-radius:10px;color:var(--muted);font-size:14px;min-height:46px;padding:11px 14px;margin-bottom:5px;gap:13px}.nav-item:hover{color:var(--ink);background:var(--bg);text-decoration:none}.nav-item.active{background:var(--soft);color:var(--accent);font-weight:700}.nav-item svg{width:19px;height:19px}.side-bottom{border-top:1px solid var(--line);padding-top:16px}.plan-note{background:var(--bg);border:1px solid var(--line);border-radius:14px;color:var(--ink);padding:16px}.plan-note p{font-size:12px;color:var(--ink)}.plan-note small{font-size:11px;color:var(--muted)}.plan-note .btn{background:var(--card);color:var(--accent);border:1px solid var(--line);font-size:11px;padding:8px;min-height:38px}.profile{gap:10px;margin-top:18px;color:var(--ink)}.profile-info b{font-size:12px;color:var(--ink)}.profile-info small{font-size:11px;color:var(--muted)}.profile .icon-btn{color:var(--muted);border-color:var(--line);width:36px;height:40px}.avatar{background:var(--soft);color:var(--accent);border-radius:12px;width:38px;height:38px;font-weight:750}.workspace-body{min-width:0}.topbar{height:84px;background:var(--card);border-bottom:1px solid var(--line);padding:18px 36px}.breadcrumb{font-size:13px;gap:12px}.topbar-actions{gap:12px}.topbar-actions .badge{font-size:10px;text-transform:none;letter-spacing:0;padding:8px 12px}.topbar .btn.small{min-height:44px}.workspace .content{max-width:1480px;margin:0 auto;padding:34px clamp(22px,3vw,44px) 48px}.workspace .page-heading{align-items:center;gap:20px;margin-bottom:28px}.workspace .page-heading h1{font-size:32px;letter-spacing:-1.2px;margin-bottom:8px}.workspace .page-heading p{font-size:14px;color:var(--muted)}.workspace .page-heading .eyebrow{font-size:10px;color:var(--accent);letter-spacing:1.6px;margin-bottom:9px}.workspace .stack{gap:24px}.workspace .card{border-radius:18px;padding:26px;box-shadow:none}.kpi-grid{gap:18px}.kpi{border-radius:16px;box-shadow:none;padding:24px;background:var(--card);border:1px solid var(--line)}.kpi-icon{border-radius:12px;background:var(--soft);color:var(--accent)}.kpi-value{font-size:32px;letter-spacing:-1.3px}.kpi p,.kpi small{font-size:12px}.chart{height:220px}.chart-area{opacity:.07}.chart-line{stroke-width:3}.segmented{background:var(--bg);padding:4px;gap:4px;border:0;border-radius:10px}.segmented button{min-width:42px;min-height:36px;font-size:12px;border-radius:7px;color:var(--muted)}.segmented button.active{background:var(--card);color:var(--accent);box-shadow:none}.toolbar{gap:12px;margin-bottom:24px}.toolbar input{max-width:none;min-height:46px}.toolbar select{min-height:46px;font-size:13px}.table-scroll{border-radius:10px}table{font-size:13px}th{padding:14px 16px;background:var(--bg);font-size:10px;letter-spacing:1px;color:var(--muted)}td{padding:19px 16px}.link-name{font-size:14px;font-weight:650}.link-url{font-size:12px}.destination{font-size:12px;color:var(--muted)}.table-actions{gap:8px}.table-actions .icon-btn{border-color:transparent}.link-editor-tabs{background:var(--bg);padding:6px;border-radius:12px;gap:6px}.link-editor-tabs button{min-height:42px;border-radius:8px;font-size:13px}.link-editor-tabs button.active{background:var(--card);color:var(--accent);box-shadow:none}.editor-intro{background:var(--soft);border-color:var(--line)}
dialog{border-radius:22px;border:1px solid var(--line);box-shadow:0 24px 100px #102c3226}dialog::backdrop{background:#112b2766}.modal-head{padding:23px 28px;border-color:var(--line)}.modal-head h2{font-size:22px}.modal-body{padding:26px 28px}.modal-footer{gap:12px}.auth-wrap{background:var(--bg);padding:48px 22px;min-height:100dvh}.auth-card{max-width:520px;padding:42px;border:1px solid var(--line);border-radius:24px;box-shadow:none;background:var(--card)}.auth-card .brand{margin-bottom:38px}.auth-card h1{font-size:36px;letter-spacing:-1.6px;line-height:1.18;margin-bottom:16px}.auth-card>p:not(.eyebrow){font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:26px}.auth-card .eyebrow{font-size:10px}.auth-card form .btn.primary{width:100%;min-height:50px;margin-top:12px}.auth-card .auth-bottom{font-size:13px;margin:24px 0 0}.auth-card label{margin-bottom:20px}.workspace-footer{font-size:11px}#toast{font-size:14px;max-width:min(480px,calc(100vw - 32px));border-radius:12px}pre{font-size:13px;overflow-x:auto}
@media(min-width:1440px){.hero{gap:88px}.hero-art{padding:58px 24px}.workspace .content{padding-top:42px}.topbar{padding-left:44px;padding-right:44px}}
@media(max-width:1100px){.workspace{grid-template-columns:218px minmax(0,1fr)}.sidebar{width:218px;padding:24px 14px 18px}.sidebar .brand{font-size:20px;gap:8px}.sidebar .brand small{display:none}.hero{gap:36px;padding-top:54px;min-height:570px}.seo-hero h1{font-size:55px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:16px 24px}.content .split{grid-template-columns:1.4fr 1fr}.workspace .card{padding:22px}.topbar-actions .badge{display:none}}
@media(max-width:900px){.workspace{display:block}.sidebar{width:258px;background:var(--card);z-index:60}.topbar .mobile-toggle{display:inline-flex}.topbar{position:sticky;top:0;z-index:25}.content .split{grid-template-columns:1fr}.hero{gap:28px}.hero .lead{font-size:16px}.hero .button-row{gap:10px}.hero .btn.large{font-size:13px;padding:12px 16px}.hero-art{padding:32px 4px}.link-preview{padding:22px}.preview-top .badge{font-size:8px}.public-nav nav{gap:18px}.public-nav .brand{font-size:21px}.public-nav>div .btn{font-size:13px;padding:9px 13px}.cta-panel{margin:32px 5% 52px}.section{padding-top:52px;padding-bottom:52px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body{font-size:16px}.public-nav{min-height:82px;height:auto;padding:20px 22px;gap:14px;flex-wrap:wrap}.public-nav .brand{font-size:21px}.public-nav nav{order:3;width:100%;justify-content:space-between;display:flex;padding-top:12px;border-top:1px solid var(--line);gap:10px}.public-nav nav a{display:inline!important;font-size:12px}.public-nav>div{gap:6px;margin-left:auto}.public-nav>div .btn{font-size:12px;min-height:40px;padding:8px 11px}.hero{display:grid;grid-template-columns:1fr;padding:44px 22px 52px;gap:34px;min-height:0}.seo-hero h1{font-size:clamp(41px,10.2vw,58px);letter-spacing:-2.1px;margin:20px 0}.hero .eyebrow{font-size:9px;letter-spacing:1px}.hero .lead{font-size:16px;line-height:1.8}.hero .button-row{gap:10px}.hero .btn.large{font-size:13px;min-height:48px;padding:13px 16px}.hero-art{max-width:520px;width:100%;padding:30px 8px;border-radius:22px;margin:auto}.link-preview{margin:0 12px;padding:22px}.hero-short{font-size:21px}.url-long{font-size:11px}.preview-top{font-size:9px}.preview-pills span{font-size:10px}.section{padding:44px 22px}.section-heading h1,.section-heading h2{font-size:30px;letter-spacing:-1px}.section-heading p{font-size:15px}.feature-grid,.grid3,.seo-steps{grid-template-columns:1fr}.feature-card{padding:26px}.feature-card p{font-size:15px}.cta-panel{padding:34px 26px;margin:28px 22px 44px;border-radius:20px}.cta-panel h2{font-size:29px;letter-spacing:-1px}.pricing-grid{grid-template-columns:1fr}.public-footer{padding:30px 22px;gap:24px}.public-footer nav{gap:16px;flex-wrap:wrap}.public-footer nav a{font-size:13px}.auth-wrap{padding:28px 16px}.auth-card{padding:30px 24px;border-radius:20px}.auth-card .brand{margin-bottom:30px}.auth-card h1{font-size:31px;letter-spacing:-1.2px}.auth-card label{font-size:13px}.auth-card input,.auth-card textarea,.auth-card select{font-size:16px}.workspace .content{padding:27px 18px 40px}.topbar{height:74px;padding:14px 18px;gap:12px}.breadcrumb{font-size:12px;gap:8px;min-width:0}.breadcrumb>span{display:none}.breadcrumb b{white-space:nowrap}.topbar-actions{gap:8px}.topbar-actions .icon-btn{width:40px;height:42px}.topbar .btn.small{min-height:42px;padding:9px 12px;font-size:12px}.workspace .page-heading{align-items:flex-start;gap:16px;margin-bottom:24px}.workspace .page-heading h1{font-size:29px}.workspace .page-heading p{font-size:14px}.workspace .page-heading .eyebrow{font-size:9px}.workspace .page-heading .button-row{gap:8px}.kpi-grid{gap:12px}.kpi{padding:20px 16px}.kpi-value{font-size:28px}.kpi small{font-size:11px}.kpi-icon{width:32px;height:32px}.workspace .card{padding:20px;border-radius:15px}.card-head{gap:14px}.card-head h3{font-size:16px}.card-head small{font-size:11px}.chart{height:165px}.chart-labels{font-size:10px}.table-scroll{margin:0 -20px}.links-table tr{padding:8px 0 12px}.links-table td{padding:7px 20px}.links-table td:nth-child(3):before{font-size:11px}.links-table .link-name{font-size:15px}.links-table .link-url{font-size:12px;max-width:100%}.links-table .destination{font-size:12px}.table-actions .icon-btn{width:44px;height:44px}.toolbar{gap:10px}.toolbar input,.toolbar select{font-size:16px;min-width:0}.toolbar input{flex-basis:100%}.field-grid{grid-template-columns:1fr}.field-grid>.wide{grid-column:auto}.grid2{grid-template-columns:1fr}.rule-row{grid-template-columns:minmax(92px,.65fr) minmax(0,1fr) 40px}.rule-row input,.rule-row select{font-size:14px}.features-check{grid-template-columns:repeat(2,minmax(0,1fr))}.modal-head{padding:20px}.modal-body{padding:22px 20px}.modal-head h2{font-size:21px}dialog{max-width:calc(100vw - 20px);border-radius:18px}.link-editor-tabs{gap:4px;flex-wrap:wrap}.link-editor-tabs button{font-size:12px;padding:9px 10px;min-height:42px}.workspace-footer{font-size:10px;line-height:1.8}.prose h1{font-size:34px}.segmented button{min-width:38px;min-height:36px}.preview-image-box{gap:12px}.blog-article h1{font-size:34px}.blog-wrap{padding:32px 22px}.blog-card-body{padding:24px}}
@media(max-width:380px){.public-nav{padding:18px}.public-nav .brand{font-size:18px;gap:7px}.public-nav .brand-mark{width:32px;height:32px;font-size:25px}.public-nav>div .btn{padding:8px;font-size:11px}.topbar{padding:12px}.breadcrumb{font-size:11px;gap:5px}.topbar-actions{gap:5px}.topbar .btn.small{font-size:11px;padding:9px}.workspace .content{padding-left:14px;padding-right:14px}.auth-card{padding:27px 21px}.hero .button-row{align-items:stretch}.hero .button-row .btn{flex:1}}
.workspace .workspace-body{margin-left:246px;width:calc(100% - 246px)}
.sidebar .brand{white-space:nowrap;font-size:21px;margin:0 0 22px;padding:0 5px;gap:10px}.sidebar .brand small{display:none}.sidebar-scroll{padding-top:4px}.kpis{gap:18px}.welcome-panel{background:#174e40!important;box-shadow:none}.welcome-panel:before,.welcome-panel:after{display:none}.welcome-panel .eyebrow{color:#c7ecdc}.welcome-panel p{color:#e2f1ea}.welcome-panel .btn{background:#fff;color:#174e40}.welcome-panel h2{color:#fff}.sidebar .nav-item.active{background:var(--soft);color:var(--accent);border-left-color:var(--accent)}
.sidebar .brand-mark{background:var(--accent);color:#fff}body[data-theme=dark] .sidebar .brand-mark{color:#143b37}
@media(max-width:1100px){.workspace .workspace-body{margin-left:218px;width:calc(100% - 218px)}}
@media(max-width:900px){.workspace .workspace-body{margin:0;width:100%}.workspace .sidebar{width:258px;transform:translateX(-100%);transition:transform var(--clay-normal);z-index:60}.workspace .sidebar.open{transform:translateX(0)}.navigation-backdrop{z-index:55}}
@media(max-width:720px){.kpis{gap:12px}.kpi small{line-height:1.7}.workspace .page-heading{margin-top:2px}.welcome-panel{padding:25px!important}.welcome-panel .eyebrow{font-size:9px;letter-spacing:1.4px}.welcome-panel h2{font-size:25px;letter-spacing:-.8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}