@font-face{font-family:"Space Grotesk";src:url("/brand-assets/fonts/SpaceGrotesk-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/brand-assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/brand-assets/fonts/SpaceGrotesk-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("/brand-assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/brand-assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/brand-assets/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/brand-assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/brand-assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --c-papper:#FFFFFF;
  --c-krit:#0B0B0C;
  --c-blyerts:#3A3A3A;
  --c-aska:#6B6B6B;
  --c-duk:#F2F2F0;
  --c-linje:#E4E4E2;
  --c-yta-dark:#161617;
  --c-aska-ljus:#9A9A9A;
  --c-gran:#1E7A44;
  --c-ockra:#8A6400;
  --c-tegel:#C0271D;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --r-ctrl:8px;
  --r-card:12px;
  --r-modal:16px;
  --r-full:999px;
  --border:1px solid var(--c-linje);
  --border-strong:1.5px solid var(--c-krit);
  --shadow-pop:0 8px 24px rgb(11 11 12 / .10);
  --t-fast:120ms;
  --t-base:180ms;
  --t-slow:260ms;
  --focus:0 0 0 2px var(--c-papper),0 0 0 4px var(--c-krit);
  --max-width:1200px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-papper);color:var(--c-krit);font-family:"Inter",Arial,sans-serif;font-size:16px;line-height:1.55}
button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Space Grotesk","Inter",Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.75rem,7vw,5.5rem);max-width:13ch;margin-bottom:var(--s-5)}
h2{font-size:clamp(2rem,4.5vw,3.75rem);max-width:16ch;margin-bottom:var(--s-4)}
h3{font-size:1.35rem;margin-bottom:var(--s-3)}
.eyebrow,.feature-number,.workspace-label,.user-label,.price,.data-label{font-family:"JetBrains Mono","Courier New",monospace;font-variant-numeric:tabular-nums}
.eyebrow{margin-bottom:var(--s-4);color:var(--c-aska);font-size:.75rem;font-weight:500;letter-spacing:.14em}
.wordmark{width:128px;height:auto}
.skip-link{position:fixed;z-index:100;left:var(--s-4);top:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--c-krit);color:var(--c-papper);transform:translateY(-160%);transition:transform var(--t-fast)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:none;box-shadow:var(--focus)}
.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border-radius:var(--r-ctrl);padding:10px var(--s-4);font-weight:500;text-decoration:none;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.button:active{transform:translateY(1px)}
.button-primary{border:1px solid var(--c-krit);background:var(--c-krit);color:var(--c-papper)}
.button-primary:hover{background:var(--c-blyerts)}
.button-secondary{border:1px solid var(--c-krit);background:var(--c-papper);color:var(--c-krit)}
.button-secondary:hover{background:var(--c-duk)}
.button[disabled]{border-color:var(--c-linje);background:var(--c-duk);color:var(--c-aska);cursor:not-allowed}
.text-link{text-decoration:underline;text-underline-offset:4px;font-weight:500}
.button-row{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.site-header{position:relative;display:flex;max-width:var(--max-width);min-height:80px;margin:0 auto;padding:var(--s-5) var(--s-6);align-items:center;justify-content:space-between}
.site-header nav{display:flex;align-items:center;gap:var(--s-5)}
.site-header nav>a:not(.button){text-decoration:none;font-size:.9rem}
.site-header nav>a:not(.button):hover{text-decoration:underline;text-underline-offset:4px}
.site-header nav>a[aria-current="page"]{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.hero{max-width:var(--max-width);min-height:calc(100vh - 80px);margin:0 auto;padding:clamp(64px,10vw,140px) var(--s-6) var(--s-8);display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:650px;margin-bottom:var(--s-6);color:var(--c-blyerts);font-size:clamp(1.1rem,2vw,1.35rem)}
.proof{margin-top:var(--s-8);font-family:"Space Grotesk","Inter",sans-serif;font-size:1.1rem;font-weight:500}
.section{max-width:var(--max-width);margin:0 auto;padding:clamp(80px,10vw,140px) var(--s-6)}
.section-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-8);margin-bottom:var(--s-8)}
.section-heading .eyebrow{grid-column:1/-1}
.section-heading p:last-child{max-width:54ch;color:var(--c-blyerts);font-size:1.05rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border-strong)}
.feature-grid article{padding:var(--s-6) var(--s-6) var(--s-7) 0;border-bottom:var(--border)}
.feature-grid article+article{padding-left:var(--s-6);border-left:var(--border)}
.feature-number{display:block;margin-bottom:var(--s-7);color:var(--c-aska);font-size:.8rem}
.feature-grid p{color:var(--c-blyerts);max-width:34ch}
.statement{background:var(--c-krit);color:var(--c-papper);padding:clamp(96px,14vw,180px) max(var(--s-6),calc((100vw - var(--max-width))/2 + var(--s-6)))}
.statement .eyebrow{color:var(--c-aska-ljus)}
.statement h2{max-width:18ch}
.statement>p:last-child{max-width:50ch;color:var(--c-aska-ljus);font-size:1.1rem}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);border:var(--border)}
.price-card{min-height:300px;padding:var(--s-5);display:flex;flex-direction:column}
.price-card+.price-card{border-left:var(--border)}
.price-card-featured{background:var(--c-krit);color:var(--c-papper)}
.price-card-featured .eyebrow,.price-card-featured>p:last-child{color:var(--c-aska-ljus)}
.price{margin:var(--s-4) 0 var(--s-6);font-size:.85rem}
.price span{display:block;font-family:"Space Grotesk","Inter",sans-serif;font-size:clamp(2rem,3vw,3rem);font-weight:500;letter-spacing:-.04em}
.price-card>p:last-child{margin-top:auto;color:var(--c-blyerts)}
.pricing-note{margin-top:var(--s-4);color:var(--c-aska);font-size:.85rem}
.signup-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);max-width:var(--max-width);margin:0 auto;padding:clamp(80px,12vw,160px) var(--s-6);align-items:end}
.compact-surface{margin-bottom:var(--s-8);padding:var(--s-7);border:var(--border);border-radius:var(--r-card);background:var(--c-duk)}
.compact-surface form{display:flex;flex-direction:column;gap:var(--s-3)}
.signup-section>div>p:last-child{color:var(--c-blyerts)}
.lead-form label,.app-dialog label,.field-label{display:block;margin-bottom:var(--s-2);font-size:.82rem;font-weight:500}
.form-row{display:flex;gap:var(--s-2)}
input,textarea,select{width:100%;min-height:44px;border:var(--border);border-radius:var(--r-ctrl);background:var(--c-papper);color:var(--c-krit);padding:var(--s-3)}
input:focus,textarea:focus,select:focus{border-color:var(--c-krit);box-shadow:var(--focus);outline:none}
textarea{resize:vertical}
.form-status{min-height:1.5em;margin:var(--s-3) 0 0;color:var(--c-blyerts);font-size:.85rem}
.form-status.error{color:var(--c-tegel)}
.form-status.success{color:var(--c-gran)}
.site-footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;min-height:260px;padding:var(--s-8) max(var(--s-6),calc((100vw - var(--max-width))/2 + var(--s-6)));background:var(--c-krit);color:var(--c-papper)}
.site-footer>p{margin:0;text-align:center}
.site-footer nav{display:flex;justify-content:flex-end;gap:var(--s-5);flex-wrap:wrap}
.site-footer a{text-underline-offset:4px}
.policy-page{max-width:var(--max-width);margin:0 auto;padding:clamp(72px,9vw,128px) var(--s-6)}
.policy-page>h1{max-width:16ch}
.policy-intro{max-width:68ch;margin-bottom:var(--s-7);color:var(--c-blyerts);font-size:clamp(1.1rem,2vw,1.35rem)}
.status-callout{display:block;margin:0 0 var(--s-7);border:var(--border-strong);border-radius:var(--r-card);background:var(--c-duk);padding:var(--s-5);font-style:normal}
.status-callout code,.policy-page code{font-family:"JetBrains Mono",monospace;font-size:.86em}
.policy-grid{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border-strong)}
.policy-grid section{padding:var(--s-7) var(--s-7) var(--s-7) 0;border-bottom:var(--border)}
.policy-grid section:nth-child(even){padding-left:var(--s-7);border-left:var(--border)}
.policy-grid h2{max-width:18ch;font-size:clamp(1.7rem,3vw,2.5rem)}
.policy-grid section>p:last-child{max-width:54ch;color:var(--c-blyerts)}

/* Product application */
.app-body{min-height:100vh;overflow:hidden}
.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.app-sidebar{display:flex;max-height:100vh;overflow-y:auto;flex-direction:column;border-right:var(--border);background:var(--c-papper);padding:var(--s-6) var(--s-4)}
.app-logo{display:inline-block;margin:0 var(--s-3) var(--s-8)}
.app-nav{display:flex;flex-direction:column;gap:var(--s-1)}
.nav-item{display:flex;width:100%;min-height:44px;align-items:center;gap:var(--s-3);border:0;border-radius:var(--r-ctrl);background:transparent;color:var(--c-blyerts);padding:0 var(--s-3);text-align:left;cursor:pointer}
.nav-item:hover{background:var(--c-duk);color:var(--c-krit)}
.nav-item.active{color:var(--c-krit);font-weight:500}
.nav-dot{width:7px;height:7px;flex:0 0 auto;border-radius:var(--r-full);background:transparent}
.nav-item.active .nav-dot{background:var(--c-krit)}
.sidebar-footer{margin-top:auto;padding:var(--s-5) var(--s-3) 0;border-top:var(--border)}
.workspace-label,.user-label{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}
.workspace-label{color:var(--c-krit);font-weight:500}
.user-label{margin-top:var(--s-1);color:var(--c-aska)}
.app-column{min-width:0;max-height:100vh;overflow:auto}
.app-topbar{position:sticky;z-index:5;top:0;display:flex;min-height:72px;align-items:center;justify-content:flex-end;border-bottom:var(--border);background:rgb(255 255 255 / .94);padding:0 var(--s-6)}
.topbar-actions{display:flex;gap:var(--s-2);align-items:center}
.compact-select select{width:auto;min-width:68px}
.compact-button{font-size:.85rem}
.icon-button{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:0;border-radius:var(--r-ctrl);background:transparent;color:inherit;cursor:pointer;font-size:1.6rem}
.icon-button:hover{background:var(--c-duk)}
.menu-button{display:none;margin-right:auto;flex-direction:column;gap:4px}
.menu-button span{display:block;width:18px;height:1.5px;background:currentColor}
.app-main{max-width:1280px;margin:0 auto;padding:var(--s-8)}
.view-heading{display:flex;min-height:150px;align-items:flex-start;justify-content:space-between;gap:var(--s-6);border-bottom:var(--border-strong);margin-bottom:var(--s-7)}
.view-heading h1{max-width:none;margin:0 0 var(--s-3);font-size:clamp(2.25rem,4vw,3.75rem)}
.view-description{max-width:62ch;color:var(--c-blyerts)}
.view-content{min-height:300px}
.loading-state,.empty-state{display:flex;min-height:300px;align-items:center;justify-content:center;flex-direction:column;gap:var(--s-4);text-align:center;color:var(--c-blyerts)}
.empty-punkt{width:64px;height:64px;border-radius:var(--r-full);background:var(--c-krit)}
.loading-dots{display:flex;gap:var(--s-2)}
.loading-dots i{width:8px;height:8px;border-radius:var(--r-full);background:var(--c-krit);animation:pulse 1s infinite ease-in-out}
.loading-dots i:nth-child(2){animation-delay:120ms}
.loading-dots i:nth-child(3){animation-delay:240ms}
@keyframes pulse{0%,70%,100%{opacity:.2;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.metric-card,.content-card{border:var(--border);border-radius:var(--r-card);background:var(--c-papper);padding:var(--s-5)}
.metric-card .metric{display:block;margin:var(--s-6) 0 var(--s-2);font-family:"JetBrains Mono",monospace;font-size:2.5rem;font-variant-numeric:tabular-nums}
.metric-card p:last-child{margin:0;color:var(--c-aska);font-size:.85rem}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.content-card{display:flex;min-height:220px;flex-direction:column;transition:border-color var(--t-fast)}
.content-card:hover{border-color:var(--c-krit)}
.content-card .eyebrow{margin-bottom:var(--s-5)}
.content-card h3{font-size:1.25rem}
.content-card>p:not(.eyebrow){color:var(--c-blyerts)}
.content-card .card-actions{display:flex;align-items:center;gap:var(--s-3);margin-top:auto;padding-top:var(--s-5)}
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{height:44px;border-bottom:var(--border-strong);color:var(--c-blyerts);font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:500;letter-spacing:.08em;text-align:left;text-transform:uppercase}
.data-table td{min-height:44px;padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:var(--border);vertical-align:top}
.data-table tr:hover td{background:var(--c-duk)}
.data-table .table-meta{color:var(--c-aska);font-size:.8rem}
.data-table .numeric{font-family:"JetBrains Mono",monospace;text-align:right;font-variant-numeric:tabular-nums}
.search-row{display:flex;max-width:520px;gap:var(--s-2);margin-bottom:var(--s-6)}
.settings-form{max-width:720px}
.settings-form .field-group,.app-dialog .field-group{margin-bottom:var(--s-4)}
.settings-form .button{margin-top:var(--s-4)}
.status-word{display:inline-flex;align-items:center;gap:var(--s-2);font-size:.85rem}
.status-word::before{content:"";width:7px;height:7px;border-radius:var(--r-full);background:var(--c-gran)}
.status-word.invited::before{background:var(--c-ockra)}
.app-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border:0;border-radius:var(--r-modal);box-shadow:var(--shadow-pop);padding:var(--s-7);background:var(--c-papper);color:var(--c-krit)}
.app-dialog::backdrop{background:rgb(11 11 12 / .4)}
.app-dialog h2{font-size:2rem}
.dialog-close-form{position:absolute;right:var(--s-4);top:var(--s-4)}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-5)}
.run-result{margin-top:var(--s-6);padding-top:var(--s-5);border-top:var(--border-strong)}
.run-result pre{overflow:auto;max-height:360px;white-space:pre-wrap;font-family:"Inter",sans-serif;line-height:1.55}
.toast{position:fixed;z-index:50;left:var(--s-5);bottom:var(--s-5);max-width:420px;border-radius:var(--r-ctrl);background:var(--c-krit);color:var(--c-papper);padding:var(--s-4) var(--s-5);box-shadow:var(--shadow-pop)}
.toast.error{background:var(--c-tegel)}
.stack{display:grid;gap:var(--s-6)}
.panel{border:var(--border);border-radius:var(--r-card);padding:var(--s-6);background:var(--c-papper)}
.panel>h2{max-width:none;font-size:clamp(1.6rem,3vw,2.4rem)}
.panel>.eyebrow{margin-bottom:var(--s-3)}
.section-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.row-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.button.destructive{border-color:var(--c-tegel);color:var(--c-tegel)}
.button.destructive:hover{background:var(--c-tegel);color:var(--c-papper)}
.endpoint-code,.secret-result code{display:block;overflow-wrap:anywhere;border:var(--border);border-radius:var(--r-ctrl);background:var(--c-duk);padding:var(--s-4);font-family:"JetBrains Mono",monospace;font-size:.82rem}
.instruction-list{display:grid;gap:var(--s-2);margin:var(--s-5) 0;padding-left:var(--s-5)}
.prompt-copy{overflow:auto;white-space:pre-wrap;border:var(--border);border-radius:var(--r-ctrl);background:var(--c-duk);padding:var(--s-4);font-family:"JetBrains Mono",monospace;font-size:.78rem;line-height:1.55}
.inline-form{max-width:720px;margin-bottom:var(--s-5)}
.inline-form label{display:block;margin-bottom:var(--s-2);font-size:.82rem;font-weight:500}
.secret-result{display:grid;gap:var(--s-3);margin:var(--s-5) 0;border:var(--border-strong);border-radius:var(--r-card);padding:var(--s-5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4)}
.form-note{color:var(--c-aska);font-size:.85rem}
.compact-metrics{grid-template-columns:repeat(5,1fr)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

body[data-theme="dark"]{
  --c-papper:#0B0B0C;
  --c-krit:#FFFFFF;
  --c-blyerts:#D8D8D6;
  --c-aska:#9A9A9A;
  --c-duk:#161617;
  --c-linje:#2A2A2B;
  --border-strong:1.5px solid var(--c-krit);
  --shadow-pop:0 8px 24px rgb(0 0 0 / .35);
  --focus:0 0 0 2px var(--c-papper),0 0 0 4px var(--c-krit);
  color-scheme:dark;
}
body[data-theme="dark"] .wordmark{content:url("/brand-assets/logos/clywer-wordmark-vit.svg")}
body[data-theme="dark"] .app-topbar{background:rgb(11 11 12 / .94)}
body[data-theme="dark"] .empty-punkt{border:1px solid var(--c-krit)}

@media(max-width:900px){
  .site-header nav>a:not(.button){display:none}
  .section-heading,.signup-section{grid-template-columns:1fr}
  .feature-grid,.pricing-grid{grid-template-columns:1fr 1fr}
  .feature-grid article+article{padding-left:0;border-left:0}
  .feature-grid article:nth-child(even){padding-left:var(--s-5);border-left:var(--border)}
  .price-card:nth-child(3){border-left:0;border-top:var(--border)}
  .price-card:nth-child(4){border-top:var(--border)}
  .site-footer{grid-template-columns:1fr;gap:var(--s-6);align-items:start}
  .policy-grid{grid-template-columns:1fr}
  .policy-grid section:nth-child(even){padding-left:0;border-left:0}
  .site-footer>p{text-align:left}
  .site-footer nav{justify-content:flex-start}
  .app-shell{grid-template-columns:1fr}
  .app-sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:280px;transform:translateX(-100%);transition:transform var(--t-base);box-shadow:var(--shadow-pop)}
  .app-sidebar.open{transform:translateX(0)}
  .menu-button{display:flex}
  .app-main{padding:var(--s-6)}
  .metric-grid,.card-grid{grid-template-columns:1fr 1fr}
  .compact-metrics{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
  .site-header,.hero,.section,.signup-section,.policy-page{padding-left:var(--s-4);padding-right:var(--s-4)}
  .site-header{min-height:72px}
  .wordmark{width:108px}
  .hero{min-height:auto;padding-top:var(--s-8)}
  .feature-grid,.pricing-grid{grid-template-columns:1fr}
  .feature-grid article:nth-child(even),.price-card+.price-card{padding-left:0;border-left:0;border-top:var(--border)}
  .form-row{flex-direction:column}
  .site-footer{padding-left:var(--s-4);padding-right:var(--s-4)}
  .app-topbar{padding:0 var(--s-4)}
  .app-main{padding:var(--s-7) var(--s-4)}
  .view-heading{flex-direction:column;min-height:0;padding-bottom:var(--s-6)}
  .metric-grid,.card-grid{grid-template-columns:1fr}
  .form-grid,.compact-metrics{grid-template-columns:1fr}
  .app-dialog{padding:var(--s-6) var(--s-4)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}