/* Material-inspired semantic roles. The app has one dark color system. */
:root{color-scheme:dark;--paper:#151e2c;--surface:#223149;--surface-raised:#2b3c56;--surface-soft:#283e5e;--ink:#edf2fb;--muted:#b4c4dc;--line:#455a79;--action:#b7d1ff;--action-hover:#d2e2ff;--on-action:#142d52;--green:var(--action);--mint:var(--surface-soft);--focus:#b7d1ff;--accent:#b7d1ff;--brand-highlight:#ffb77f}
body,body.product-home,body.auth-entry{background:var(--paper);color:var(--ink)}
body a{color:var(--action)}
body .brand .brand-wordmark{color:var(--ink)}body .brand .brand-studio{color:var(--muted)}
body .button,body.product-home .button,body .product-hero .button{background:var(--action);border-color:var(--action);color:var(--on-action);border-radius:10px;box-shadow:none}
body .button:hover,body.product-home .button:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--on-action)}
body .secondary{background:transparent;border-color:var(--line);color:var(--action);border-radius:10px}
body .secondary:hover{background:var(--surface-raised)}
body button:disabled{background:#303744;color:#a6afbd;border-color:#495263;box-shadow:none}
body :is(input,select,textarea){background:#19263a;color:var(--ink);border-color:var(--line)}
body input::placeholder,body textarea::placeholder{color:#9da9bc}
body :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
::selection{background:#3b5686;color:#fff}
body :is(.nav,.product-header,.entry-header,.product-footer){border-color:var(--line)}
body :is(.product-kicker,.step-index,.step-label,.eyebrow){color:var(--action)}
body .document .eyebrow{color:var(--action)}
body #care-form,body #ops-queue form{display:grid;gap:20px}
body #care-form[hidden]{display:none}
body #care-form label,body #ops-queue label{display:grid;gap:8px}
body #care-form .approval{display:flex;align-items:flex-start;gap:12px}
body #care-form :is(select,textarea),body #ops-queue :is(input,textarea){width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit}
body #care-form textarea{min-height:150px;resize:vertical}
body :is(.product-lead,.product-fine,.product-section-head>p:last-child,.product-steps p,.product-examples p,.product-footer p,.plans-roadmap p,.plans-process li p,.entry-intro>p:not(.eyebrow),.entry-form #auth-status){color:var(--muted)}
body .product-hero{background:radial-gradient(ellipse at 95% 5%,#335e91,transparent 65%),#203651;border-color:#455a79;border-radius:24px}
body .product-home h1 em,body.product-home h1 em,body .plans-hero h1 em{color:#b8cfff}
body .product-kicker>span{background:var(--action)}
body .product-hero :is(.product-kicker,.product-fine,.returning span){color:#bdcbe1}
body .product-hero .product-lead{color:#d3def0}
body .product-hero .returning{border-color:#4a5a73}
body :is(.product-showcase,.product-examples>a,.workspace-card,.wizard-card,.entry-form,.offer-comparison article,.plans-price,.hosting-card,.document.wrap,.plan-options article){background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
body :is(.product-showcase,.product-examples>a,.workspace-card,.wizard-card,.entry-form,.offer-comparison article){border-radius:16px}
body :is(.example-chrome,.product-showcase>a,.access-strip,.product-closing,.plans-preview,.wizard-availability,.purchase-progress,.notice,.entry-intro .notice){background:var(--surface-raised);color:var(--ink);border-color:var(--line)}
body :is(.example-chrome,.example-caption span,.preview-principles,.access-strip p,.plans-preview small,.offer-comparison article>span){color:var(--muted)}
body .example-chrome i{background:#7b8aa3}
body :is(.example-caption>a,.preview-principles,.product-steps li,#examples,.plans-roadmap,.plans-access,.plans-process li,.returning){border-color:var(--line)}
body :is(.hosting-section,.plans-offer){background:#151f31;color:var(--ink)}
body :is(.hosting-card p,.hosting-card li,.hosting-card small,.hosting-copy p){color:var(--muted)}
body .hosting-card strong{color:var(--ink)}
body .offer-comparison article:first-child{border-color:var(--action)}
body .plans-price .product-kicker,body footer a,body .document footer a{color:var(--action)}
body footer.wrap a{color:var(--action);display:inline-flex;align-items:center;min-height:44px}
body :is(.product-showcase,.product-examples>a):hover{border-color:#8394b0}
body :is(.wizard-layout aside li.active,.wizard-card .option:has(input:checked)){background:var(--surface-soft);color:var(--ink);border-color:var(--action)}
body .wizard-card .option{background:var(--surface);border-color:var(--line)}
body .wizard-card .option:hover{background:var(--surface-raised);border-color:#8394b0}
body .wizard-card :is(input,select,textarea){border-color:var(--line)}
body :is(.wizard-availability summary,.document h1,.document h2,.document strong){color:var(--ink)}
body :is(.document p,.document li){color:var(--muted)}
body :is(.document .notice,.document .steps,.document th,.other-answer,#fit-result,.help-answer,.topics button){background:var(--surface-raised);color:var(--ink);border-color:var(--line)}
body .document table,body .help-panel{background:var(--surface);color:var(--ink);border-color:var(--line)}
body :is(.field-error,#wizard-error,#storage-status.warning){color:#ffb4ab}
body #fit-result.review{background:#3b3020;color:#f0d7a9}
body .paw-assistant{--paw-ink:#edf2fb;--paw-paper:#223149;--paw-mint:#283e5e;--paw-accent:#b7d1ff}
body :is(.paw-launcher,.paw-panel,.paw-topics button,.paw-form input){background:var(--surface);color:var(--ink);border-color:var(--line)}
body .paw-message{background:var(--surface-raised);color:var(--ink)}
body .paw-user{background:var(--surface-soft)}body .paw-form button{background:var(--action);color:var(--on-action)}
body :is(.paw-header p,.paw-privacy){color:var(--muted)}
/* Clerk uses its supported appearance variables; these cover enclosing UI. */
body .cl-card,body .cl-footer{background:var(--surface);color:var(--ink)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto}}

/* Task hierarchy and predictable spacing. */
html{scroll-padding-top:112px}body{line-height:1.65}
body :is(.product-lead,.entry-intro>p,.document p,.wizard-intro>p){max-width:65ch}
body :is(.product-links a,.product-account a,.nav nav a,.entry-header nav a,footer nav a,.breadcrumb a){display:inline-flex;align-items:center;min-height:44px}
body :is(summary,.text-button){min-height:44px;cursor:pointer}
body header [aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
body .product-account .secondary{padding:10px 18px;font-weight:650}
body .product-section{padding-block:64px}
body .product-home h2{max-width:23ch}
body .product-fine,body .example-caption span,body .product-examples p{font-size:13px}
body .example-caption>a{width:auto;min-width:104px;padding:8px 12px;font-size:13px;white-space:nowrap;border-radius:10px}
.resume-brief{padding:16px;border:1px solid #6c83ad;border-radius:12px;background:#283e5e;margin-top:20px}
.resume-brief span{display:block;font-size:13px;color:#d3def0}.resume-brief a{display:inline-flex;min-height:44px;align-items:center;font-weight:650}
.availability-badge{display:inline-block;color:#d7e4ff;background:#283e5e;padding:5px 9px;border-radius:6px;font-size:12px}.availability-badge.muted{background:#303744;color:#c5ccda}
body .compact-plans h3{font-size:24px;margin:20px 0 10px}body .plan-summary-price{font-size:25px;font-weight:650}body .plan-summary-price small{font-size:12px;font-weight:400;color:var(--muted)}
.breadcrumb{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px;margin-bottom:24px;color:var(--muted)}
.workspace-journey{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}.workspace-journey li{border-left:2px solid #667fa8;padding:8px 16px}.workspace-journey strong,.workspace-journey span{display:block}.workspace-journey span{color:var(--muted);font-size:13px}
.field-hint,.field-count{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:6px}.field-count{text-align:right;font-variant-numeric:tabular-nums}
.reset-options{margin-top:20px;font-size:13px}.reset-options summary{color:var(--muted)}
#step-list button{border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:44px;padding:0;width:100%}
body .wizard-layout aside li.complete{padding-block:0}body .wizard-layout aside li.complete::after{content:none}
body .wizard-intro h1{font-size:clamp(28px,3vw,38px);margin-block:12px}body .wizard-intro>p{font-size:14px;margin-block:10px}
body .wizard-shell{padding-top:24px}body .wizard-layout{margin-top:22px}
body .wizard-card #step-title{scroll-margin-top:24px}body .wizard-nav .button{max-width:75%;white-space:normal;text-align:center}
@media(min-width:901px){.product-header{position:sticky;top:0;z-index:30;background:#151e2cf5;backdrop-filter:blur(16px)}body .wizard-layout>aside{align-self:start;position:sticky;top:24px}}
@media(max-width:700px){body .wizard-shell .paw-launcher{position:static;margin:12px 0;box-shadow:none}body .wizard-shell .paw-panel{bottom:16px;max-height:calc(100dvh - 32px)}}
@media(max-width:700px){html{scroll-padding-top:20px}body .product-section{padding-block:42px}body .product-hero{padding:28px 22px}body .product-home h1{font-size:40px}body .wizard-intro .eyebrow{display:none}body .wizard-layout aside li{flex-shrink:0}body .wizard-layout aside .reset-options{margin-top:8px}body .workspace-journey{grid-template-columns:1fr;gap:4px}body .workspace-journey li{display:flex;gap:12px;align-items:baseline}body .product-actions{gap:12px}}

/* Cohesive application system: layout and component roles shared across every route. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-control:10px;--radius-card:16px;--danger:#ffb4ab;--warning:#f0d7a9;--sidebar-width:232px}
body{margin:0;font:400 16px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body *{box-sizing:border-box}body :is(h1,h2,h3,h4){font-family:inherit;letter-spacing:-.035em;color:var(--ink)}body h1,body .document h1,body .workspace h1{font-size:clamp(28px,3vw,36px);line-height:1.2;font-weight:650;max-width:28ch;margin:12px 0 16px}body h2{font-size:24px;line-height:1.3}body h3{font-size:20px;line-height:1.4}
body .product-home h1,body.product-home h1{font-size:clamp(40px,4.5vw,56px)}body :is(.quiet,small,.product-fine,.field-hint,.field-count,.entry-help,.plans-access,.notice){font-size:14px}
body :is(.wrap,.product-width){max-width:1200px;padding-inline:32px}body p{overflow-wrap:anywhere}body :is(p,li){line-height:1.65}body a{text-underline-offset:4px}body img{max-width:100%}
body button,body .button,body .secondary{font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;min-height:44px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-control);cursor:pointer;background:var(--surface-raised);color:var(--ink);transition:background-color .15s,border-color .15s}
body .button,body button[type=submit],body #confirm-change{background:var(--action);color:var(--on-action);border-color:var(--action)}body .secondary{background:transparent;color:var(--action)}body button:hover,body .secondary:hover{background:var(--surface-soft)}body .button:hover,body button[type=submit]:hover{background:var(--action-hover);color:var(--on-action)}body button:disabled{background:#303744;color:#a6afbd;border-color:var(--line);cursor:not-allowed}
body :is(input,select,textarea){font:inherit;color:var(--ink);background:#19263a;border:1px solid var(--line);border-radius:10px;padding:12px;min-height:44px;max-width:100%}body textarea{resize:vertical}body input:is([type=checkbox],[type=radio]){width:20px;height:20px;min-height:20px;padding:0;accent-color:var(--action);flex-shrink:0}
body label{line-height:1.5}body form label{display:block;margin:16px 0 8px}body form label>input:not([type=checkbox]):not([type=radio]),body form label>select,body form label>textarea{display:block;width:100%;margin-top:8px}body label:has(>input[type=checkbox]){display:flex;align-items:flex-start;gap:12px;padding-block:8px;min-height:44px}
body :is(.document.wrap,.workspace.wrap){max-width:1200px;width:100%;padding:40px 32px 64px;margin:0 auto;background:transparent;border:0;border-radius:0;box-shadow:none}body .document>p{max-width:65ch}body .document h2{margin-top:32px}body .document .steps{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin:24px 0}
body :is(.notice,[data-state]){border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px 20px;color:var(--ink);margin-block:24px}body [data-state=error]{border-color:var(--danger)}body [data-state=loading]{color:var(--muted)}body .status-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}body .status-actions a{min-height:44px;display:inline-flex;align-items:center}
body .document :is(table,th,td,#order-details){background:var(--surface);color:var(--ink);border-color:var(--line)}body .document #order-details{padding:24px;border:1px solid var(--line);border-radius:16px}body dd{margin:0;overflow-wrap:anywhere}body .document :is(dt,.quiet){color:var(--muted)}body .document :is(.steps>h2,.steps>h3){margin-top:0}
body dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:24px}body dialog::backdrop{background:#0009}body dialog h2{margin-top:0}
body .danger-zone{border:1px solid #705256;border-radius:16px;padding:24px;margin-top:32px}body .danger-zone button[type=submit]{background:transparent;border-color:var(--danger);color:var(--danger)}body .data-tools{padding-block:24px;border-top:1px solid var(--line)}
body .app-public-header{max-width:1200px;padding:20px 32px;margin:auto;display:flex;align-items:center;gap:24px;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--paper)}body .app-public-header nav{display:flex;align-items:center;gap:20px}body .app-public-header a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}body .app-public-header a[aria-current=page]{color:var(--ink);text-decoration:underline}
body.app-shell{padding-left:var(--sidebar-width)}body .app-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);padding:24px 16px;background:#111a28;border-right:1px solid var(--line);z-index:40;overflow-y:auto}body .shell-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 24px}body .shell-brand .brand-wordmark{font-size:20px}.nav-caption{font-size:11px;letter-spacing:.12em;color:var(--muted);margin:16px 12px 8px}
body .app-sidebar nav{display:grid;gap:4px}body .app-sidebar nav a{display:flex;gap:12px;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:550;text-decoration:none;color:var(--muted)}body .app-sidebar nav a:hover{background:var(--surface)}body .app-sidebar nav a[aria-current=page]{background:var(--surface-soft);color:var(--action);text-decoration:none}.nav-icon{width:20px;text-align:center;font-size:20px;line-height:1}
.shell-bottom{margin-top:32px;padding:24px 12px 0;border-top:1px solid var(--line)}.shell-bottom>a,.shell-auth a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}.shell-auth{display:flex;gap:16px}.shell-bottom p{font-size:12px;color:var(--muted)}body .menu-toggle{display:none}
body .app-footer{max-width:1200px;display:flex;justify-content:space-between;gap:24px;margin:0 auto;padding:24px 32px!important;color:var(--muted);border-top:1px solid var(--line);font-size:14px}body .app-footer nav{display:flex;flex-wrap:wrap;gap:24px}body .app-footer a{display:inline-flex;align-items:center;min-height:44px}
body .entry-layout{margin:48px auto;gap:48px;max-width:1120px;padding:0 32px}body .entry-intro h1{font:650 36px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:-.04em}body .entry-form{padding:32px}body .entry-intro .notice{border:1px solid var(--line)}body .entry-help{flex-wrap:wrap}body .entry-help a{min-height:44px;display:inline-flex;align-items:center}
body .plans-hero{padding-block:48px;gap:48px}body .plans-hero h1{font-size:36px}body .plans-offer{background:var(--surface);border:1px solid var(--line);border-radius:16px}body .plans-price{background:var(--surface-raised)}body .offer-comparison article{display:flex;flex-direction:column;padding:24px}body .offer-comparison article>a:last-child{margin-top:auto;min-height:44px;display:inline-flex;align-items:center}body .offer-comparison article p{font-size:16px}body .offer-comparison article .product-kicker{font-size:12px}
body #subscription-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}body #subscription-plans>form,body #care-form{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}body #subscription-plans h3{margin-top:0}body #subscription-list article{display:flex;flex-direction:column;align-items:flex-start;gap:12px}body #subscription-list article>p{margin:0}body #subscription-list article>form{width:100%;border-top:1px solid var(--line);padding-top:16px;margin-top:8px}body #care-history{display:grid;gap:24px}body #ops-queue form{margin-block:24px}body #ops-queue label{font-size:14px}body #ops-queue textarea{min-height:88px}
body .workspace-card>h2{font-size:20px}body .workspace-card>p{font-size:14px}body #publications>p,body #reviews>p{padding:16px 0;border-top:1px solid var(--line)}body .workspace-journey{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px}body .workspace-journey li{border:0}body .workspace-journey span{font-size:14px}
body .wizard-shell{max-width:1120px}body .wizard-card{padding:32px}body .wizard-intro>p{font-size:16px}body .wizard-intro .quiet{font-size:14px}body .wizard-layout{gap:32px}body .wizard-layout aside li{font-size:14px}body .wizard-nav{position:sticky;bottom:0;background:var(--surface);padding-bottom:8px;z-index:2}body .wizard-card .option{min-height:56px}body .wizard-card input[type=radio]{min-height:20px}body .wizard-card :is(.option strong,.option span){font-size:16px}body #website-preview{border:1px solid var(--line)!important;border-radius:16px;margin-block:24px}body #approve-review,body #publish-review{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-block:24px}body .breadcrumb{font-size:14px;margin-bottom:24px}
body .support-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}body .support-grid article{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}body .support-grid h2{margin-top:0}body .document-nav{display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}body .document-nav a{display:inline-flex;min-height:44px;align-items:center}
@media(max-width:900px){body.app-shell{padding-left:0}body .app-sidebar{position:relative;width:auto;padding:16px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}body .shell-brand{padding:0}.app-sidebar .nav-caption{margin-top:24px}body .menu-ready .menu-toggle{display:inline-flex}body .menu-ready:not(.menu-open) #app-navigation{display:none}body .shell-bottom{margin-top:16px}body .app-public-header{flex-wrap:wrap;gap:12px 24px}body .app-public-header .product-account{margin-left:auto}body .app-public-header nav{gap:16px}}
@media(max-width:700px){body :is(.wrap,.product-width){padding-inline:16px}body :is(.document.wrap,.workspace.wrap){padding:32px 16px 48px}body .app-public-header{padding:16px}body .app-public-header .brand-wordmark{font-size:20px}body .app-public-header .product-links{order:3;width:100%;border-top:1px solid var(--line);padding-top:8px}body .app-footer{padding:24px 16px!important;display:block}body .app-footer nav{margin-top:12px;gap:16px}body .entry-layout{padding:0 16px;gap:24px;margin:32px auto}body .entry-form{padding:24px 16px}body .entry-intro h1{font-size:28px}body .entry-intro>p{font-size:16px}body #subscription-plans,body .support-grid{grid-template-columns:1fr}body .plans-hero{gap:24px;padding-block:32px}body .plans-hero h1{font-size:32px}body .wizard-card{padding:24px 16px}body .wizard-layout{gap:16px}body .workspace-journey{gap:8px}body .workspace-journey li{display:block;padding:8px}body .product-hero{padding:24px 16px}body .product-section{padding-block:48px}body #approve-review,body #publish-review,body #care-form{padding:24px 16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

body .reference-details{border:1px solid var(--line);padding:16px 24px;border-radius:16px;margin:24px 0}body .reference-details #order-details{border:0;padding:16px 0}body .checklist{padding-left:24px;max-width:65ch}body .checklist li{padding:16px 0 16px 8px;border-bottom:1px solid var(--line)}body .document h2[id]{scroll-margin-top:24px}body .menu-toggle[hidden]{display:none!important}

body .document h1,body .wizard-intro h1,body .wizard-card h2,body .brand,body .product-kicker,body .eyebrow{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body.product-home .product-kicker,body.product-home .hosting-card li::before{color:var(--action)}body .hosting-section{background:var(--surface)}body .hosting-card{background:var(--surface-raised)}body #subscription-list details{order:10;width:100%;font-size:14px}body #subscription-list details p{overflow-wrap:anywhere}

body.product-home .hosting-card-top>span,body.product-home .product-closing p{color:var(--muted)}

body .product-hero{margin-top:24px;margin-bottom:32px;padding:64px 48px;gap:48px;border:1px solid #455a79}body.product-home h1 em{font-family:inherit;font-style:normal;font-weight:650;letter-spacing:inherit}body .product-showcase{transform:none}body .plans-process li>span{color:var(--action)}
@media(max-width:900px){body .product-hero{gap:32px;padding:32px}}@media(max-width:700px){body .product-hero{padding:24px 16px;gap:24px}}

/* Apricot identifies the current brief step; blue remains the action color. */
body .step-meta{color:var(--brand-highlight)}body progress{accent-color:var(--brand-highlight)}body .offer-comparison article:nth-child(2)>.product-kicker{color:var(--brand-highlight)}
