/* LC-40 Quiet confidence: original, dependency-free stylesheet for the website, workspace and policy pages. */
/* Follows Material Design 3 guidelines, not Material styling: type scale roles, 4px grid, window size classes
   (600/840/1200/1600), 48px touch targets, WCAG AA contrast, state layers, focus rings and standard motion.
   The palette, wordmark, typefaces and shapes stay LC-40. See planning/lc40-design.md. */

/* Tokens */
:root{
  /* Color roles. --line is decorative (outline-variant); --outline bounds fields and controls (>=3:1). */
  --page:#f8f9f5;--surface:#fff;--subtle:#f2f4ef;--tint:#edf3e9;--lime:#d7e9b9;
  --ink:#202b26;--muted:#5c6a61;--line:#dce3db;--outline:#7b887f;
  --accent:#214d3c;--accent-text:#fff;--indicator:#5b8546;--focus:var(--accent);
  --danger:#a84032;--danger-tint:#fff0ed;--warning:#94620b;--warning-tint:#fff6df;
  /* Type scale roles (size/line height). */
  --font:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --mono:"Cascadia Code",Consolas,monospace;
  --display-l:600 57px/64px var(--font);--display-m:600 45px/52px var(--font);--display-s:600 36px/44px var(--font);
  --headline-l:600 32px/40px var(--font);--headline-m:600 28px/36px var(--font);--headline-s:600 24px/32px var(--font);
  --title-l:600 22px/28px var(--font);--title-m:600 16px/24px var(--font);--title-s:600 14px/20px var(--font);
  --body-l:400 16px/24px var(--font);--body-m:400 14px/20px var(--font);--body-s:400 12px/16px var(--font);
  --label-l:600 14px/20px var(--font);--label-m:600 12px/16px var(--font);--label-s:600 11px/16px var(--font);
  /* Shape scale. */
  --shape-xs:4px;--shape-s:8px;--shape-m:12px;--shape-l:16px;--shape-xl:20px;--shape-full:999px;
  /* Motion: standard easing and durations. */
  --ease:cubic-bezier(.2,0,0,1);--ease-enter:cubic-bezier(.05,.7,.1,1);--dur-short:150ms;--dur-medium:250ms;
  /* Layout: window margin per size class. */
  --margin:24px;--content:1184px;
  --shadow:0 24px 60px -28px #253b3533;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--page);color:var(--ink);font:var(--body-m);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.38}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
svg{display:block}
p,h1,h2,h3{margin:0}
p{color:var(--muted)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible),main:focus{outline:none}

/* Icons: 16 (beside small text), 18 (in buttons), 20 (default), 24 (prominent). */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none}
[data-icon] svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.btn [data-icon] svg{width:18px;height:18px}

/* State layers (hover 8%, focus and pressed 10%) and 48px touch targets. */
.btn,.icon-btn,.landing-nav a,.document-tabs a,.document-aside nav a,.faq-items summary{position:relative;isolation:isolate}
.btn::before,.icon-btn::before,.landing-nav a::before,.document-tabs a::before,.document-aside nav a::before,.faq-items summary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:currentColor;opacity:0;transition:opacity var(--dur-short) var(--ease);pointer-events:none}
:is(.btn,.icon-btn,.landing-nav a,.document-tabs a,.document-aside nav a,.faq-items summary):hover::before{opacity:.08}
:is(.btn,.icon-btn,.landing-nav a,.document-tabs a,.document-aside nav a,.faq-items summary):is(:focus-visible,:active)::before{opacity:.1}
:is(.btn,.icon-btn):disabled::before{opacity:0}
.btn::after,.icon-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,48px);height:max(100%,48px);transform:translate(-50%,-50%)}

/* Buttons: filled (primary), tonal (soft), outlined, text. One filled action per region. */
.btn{min-height:48px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--shape-s);font:var(--label-l);letter-spacing:.1px;text-align:center;background:none;transition:box-shadow var(--dur-short) var(--ease)}
.btn-primary{background:var(--accent);color:var(--accent-text);box-shadow:0 1px 2px #11291b14}
.btn-primary:hover:not(:disabled){box-shadow:0 2px 6px #11291b24}
.btn-soft{background:var(--tint);color:var(--accent)}
.btn-outline{background:var(--surface);border-color:var(--outline);color:var(--accent)}
.btn-text{padding-left:12px;padding-right:12px;color:var(--accent)}
.btn-small{min-height:40px;padding:8px 16px}
.btn-small.btn-text{padding-left:12px;padding-right:12px}
.btn-large{min-height:56px;padding:16px 24px}
.btn-full{width:100%}
.btn-link{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:2px}
.icon-btn{width:40px;height:40px;border:0;border-radius:var(--shape-full);background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.skip-link{position:fixed;top:-80px;left:16px;z-index:100;display:inline-flex;align-items:center;min-height:48px;padding:12px 16px;border-radius:var(--shape-s);background:var(--accent);color:var(--accent-text);font:var(--label-l)}
.skip-link:focus{top:8px}

/* Top app bar */
.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--margin)}
.site-header{height:64px;border-bottom:1px solid var(--line);background:var(--page)}
.header-inner{max-width:var(--content);height:100%;padding:0 var(--margin);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;min-height:48px;font:700 22px/28px var(--font);letter-spacing:-.05em;white-space:nowrap}
.brand-light{font-weight:400}
.brand-period{color:var(--accent)}
.brand-mark{display:block;flex:none;width:36px;height:36px;border-radius:var(--shape-s);background:var(--accent);object-fit:contain}
.landing-nav{display:flex;gap:8px;margin-left:auto;margin-right:8px}
.landing-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border-radius:var(--shape-s);color:var(--muted);font:var(--label-l);font-weight:400}
.landing-nav a:hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:8px}
.site-header .btn{white-space:nowrap}

/* Shared section labels */
.eyebrow{display:flex;align-items:center;gap:8px;font:var(--label-m);letter-spacing:.12em;color:var(--accent)}
.mini-lines{display:inline-block;width:20px;height:12px;background:linear-gradient(var(--accent),var(--accent)) 0 0/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 5px/20px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 10px/14px 2px no-repeat}
.live-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#618451}

/* Home: hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-top:80px;padding-bottom:64px}
.hero h1{margin:24px 0;font:var(--display-l);letter-spacing:-.03em}
.hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.02em;color:var(--accent)}
.hero-description{max-width:440px;font:var(--body-l)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 16px}
.hero-note{display:flex;align-items:center;gap:8px;font:var(--body-s)}
.hero-note [data-icon] svg{width:16px;height:16px}
.dot-separator{padding:0 4px}
.hero-visual{position:relative;padding:24px 0 0}
.visual-caption{display:flex;align-items:center;gap:8px;margin:0 0 16px 12px;font:var(--label-s);letter-spacing:.1em;color:var(--muted)}
.preview-window{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--shape-l);background:var(--surface);box-shadow:var(--shadow)}
.preview-titlebar{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--line);font:var(--title-s)}
.preview-titlebar>[data-icon]{color:var(--muted)}
.preview-online{display:flex;align-items:center;gap:8px;margin-left:auto;font:var(--body-s);color:var(--muted)}
.preview-inner{padding:24px}
.ask-label{display:flex;align-items:center;gap:8px;font:var(--body-s);color:var(--muted)}
.ask-label [data-icon]{width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--accent)}
.ask-label [data-icon] svg{width:16px;height:16px}
.ask-bubble{margin:8px 0 24px;padding:16px;border:1px solid var(--line);border-radius:var(--shape-xs) var(--shape-m) var(--shape-m) var(--shape-m);background:var(--subtle);font:var(--body-l)}
.parallel-label{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:var(--body-s);color:var(--muted)}
.connector-line{flex:1;height:1px;background:var(--line)}
.preview-jobs{display:grid;gap:8px}
.preview-job{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--shape-s)}
.preview-job>[data-icon]:first-child{width:32px;height:32px;border-radius:var(--shape-s);background:var(--tint);color:var(--accent)}
.preview-job>[data-icon]:first-child svg{width:18px;height:18px}
.preview-job>[data-icon]:last-child{color:var(--indicator)}
.preview-job>div{flex:1;min-width:0}
.preview-job strong{display:block;font:var(--label-l)}
.mini-progress{display:block;max-width:200px;height:4px;margin-top:8px;overflow:hidden;border-radius:var(--shape-full);background:var(--tint)}
.mini-progress i{display:block;width:0;height:100%;border-radius:inherit;background:var(--indicator)}
.job-percent{font:500 12px/16px var(--mono);color:var(--muted)}
.preview-footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:24px;font:var(--body-s);color:var(--muted)}
.preview-footer>span:first-child{display:flex;align-items:center;gap:8px;margin-right:auto}
.preview-footer [data-icon] svg{width:16px;height:16px}
.control-tag{position:relative;display:flex;align-items:center;gap:12px;max-width:344px;margin:-4px -16px 0 auto;padding:16px;border:4px solid var(--page);border-radius:var(--shape-l);background:var(--accent);color:var(--accent-text);box-shadow:0 14px 25px -20px #153b43;transform:translateY(20px)}
.control-tag>[data-icon]{color:var(--lime)}
.control-tag>[data-icon]:first-child svg{width:24px;height:24px}
.control-tag>[data-icon]:last-child{margin-left:auto}
.control-tag strong{display:block;font:var(--title-s)}
.control-tag div span{display:block;margin-top:2px;font:var(--body-s);color:#d9e5d7}
.visual-disclaimer{margin:40px 0 0 12px;font:var(--body-s)}

/* Home: compatibility, steps, plans, FAQ */
.compatibility{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;padding-top:24px;padding-bottom:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.compatibility>span{font:var(--body-m);color:var(--muted)}
.compatibility>div{display:flex;flex-wrap:wrap;gap:16px 32px}
.compatibility small{width:100%;font:var(--body-s);color:var(--muted)}
.client-word{display:flex;align-items:center;gap:8px;font:var(--title-l);letter-spacing:-.02em;color:#4d5951}
.client-word [data-icon] svg{width:24px;height:24px}
.section-heading{margin-bottom:24px}
.section-heading h2{margin-top:12px;font:var(--display-s);letter-spacing:-.02em}
.how-section{display:grid;grid-template-columns:280px 1fr;gap:40px;padding-top:64px;padding-bottom:64px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.steps-grid article{position:relative}
.step-number{display:block;margin-bottom:24px;font:500 12px/16px var(--mono);color:var(--muted)}
.step-icon{margin-bottom:16px;color:var(--accent)}
.step-icon svg{width:24px;height:24px}
.steps-grid h3{margin-bottom:8px;font:var(--title-m)}
.steps-grid p{max-width:32ch;font:var(--body-m)}
.plans-section{padding-top:48px;padding-bottom:40px;border-top:1px solid var(--line)}
.plans-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.plans-heading>p{font:var(--body-m);text-align:right}
.small-muted{font:var(--body-s);color:var(--muted)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plan-card{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:var(--shape-l);background:var(--surface)}
.pro-card{border-color:#c3d3bb;background:var(--tint)}
.plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.plan-name{display:flex;align-items:center;gap:8px;font:var(--title-l)}
.plan-tag{padding:2px 8px;border:1px solid #c2d3b9;border-radius:var(--shape-full);background:var(--surface);font:var(--label-s);letter-spacing:.06em}
.plan-top p{margin-top:4px;font:var(--body-m)}
.price{font:var(--headline-l);letter-spacing:-.02em;text-align:right;white-space:nowrap}
.price-unit{display:block;margin-top:4px;font:var(--body-s);color:var(--muted)}
.plan-features{display:flex;justify-content:space-between;gap:16px;margin:24px 0}
.plan-features>span{font:var(--body-s);color:var(--muted)}
.plan-features strong{display:block;margin-bottom:4px;font:var(--title-m);color:var(--ink)}
.plan-card .btn{width:100%;margin-top:auto}
.plan-card>small{display:block;margin-top:12px;font:var(--body-s);text-align:center;color:var(--muted)}
.pricing-note{max-width:820px;margin-top:16px;font:var(--body-s)}
.faq-section{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;padding-top:40px;padding-bottom:56px}
.faq-section h2{margin:12px 0 8px;font:var(--headline-m);letter-spacing:-.02em}
.faq-section>div>p{font:var(--body-m)}
.faq-items details{border-bottom:1px solid var(--line)}
.faq-items summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px;border-radius:var(--shape-s);font:var(--body-l);list-style:none;cursor:pointer}
.faq-items summary::-webkit-details-marker{display:none}
.faq-items summary [data-icon]{color:var(--accent);transition:transform var(--dur-medium) var(--ease)}
.faq-items details[open] summary [data-icon]{transform:rotate(45deg)}
.faq-items details p{padding:0 56px 16px 16px;font:var(--body-m)}
.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;min-height:80px;padding-top:16px;padding-bottom:16px;border-top:1px solid var(--line);font:var(--body-s);color:var(--muted)}
.footer>div{display:flex;flex-wrap:wrap;gap:8px;margin-right:-8px}
.footer a,.workspace-foot a,.document-footer a{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 8px}
.footer a:hover,.workspace-foot a:hover,.document-footer a:hover{color:var(--accent);text-decoration:underline}

/* Workspace: a single room, not a dashboard maze. */
.workspace{max-width:1136px;min-height:calc(100vh - 65px);padding-top:48px;padding-bottom:24px}
.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.workspace-heading h1{margin:12px 0 8px;font:var(--headline-l);letter-spacing:-.02em}
.workspace-heading p{font:var(--body-m)}
.connection-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:24px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--shape-m);background:var(--surface)}
.connection-device{display:flex;align-items:center;gap:12px;min-width:0}
.connection-device>[data-icon]{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--shape-s);background:var(--subtle);color:var(--muted)}
.connection-device strong{font:var(--title-s);overflow-wrap:anywhere}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--shape-full);background:var(--subtle);color:var(--muted);font:var(--label-m);white-space:nowrap}
.status-pill.running{background:var(--tint);color:var(--accent)}
.status-pill.offline{background:var(--danger-tint);color:var(--danger)}
.status-pill.offline .live-dot{background:currentColor}
.work-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:24px}
.activity-panel{display:flex;flex-direction:column;min-height:448px;overflow:hidden;border:1px solid var(--line);border-radius:var(--shape-l);background:var(--surface)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;border-bottom:1px solid var(--line)}
.panel-heading h2{margin-bottom:4px;font:var(--title-l)}
.panel-heading p{font:var(--body-m)}
.job-list{flex:1;padding:8px 24px}
.job-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;padding:16px 0;border-bottom:1px solid var(--line)}
.job-row:last-child{border-bottom:0}
.job-status-icon{width:40px;height:40px;border-radius:var(--shape-s);background:var(--tint);color:var(--accent)}
.job-main{min-width:0}
.job-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.job-title-row strong{min-width:0;font:var(--title-s);overflow-wrap:anywhere}
.job-title-row span{font:var(--label-m);color:var(--muted)}
.job-main p{margin-top:4px;font:var(--body-m)}
.task-progress{max-width:240px;height:4px;margin-top:8px;overflow:hidden;border-radius:var(--shape-full);background:var(--tint)}
.task-progress i{display:block;width:0;height:100%;border-radius:inherit;background:var(--indicator);transition:width var(--dur-medium) var(--ease)}
.empty-state{padding:48px 24px;text-align:center}
.empty-state strong{display:block;margin-bottom:4px;font:var(--title-m)}
.empty-state p{font:var(--body-m)}
.activity-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 24px;border-top:1px solid var(--line);background:var(--subtle);font:var(--body-s);color:var(--muted)}
.activity-bottom>span{display:flex;align-items:center;gap:8px}
.activity-bottom>span [data-icon] svg{width:16px;height:16px}
.workspace-aside{display:grid;align-content:start;gap:16px}
.start-card{--focus:var(--lime);position:relative;padding:24px;border-radius:var(--shape-l);background:var(--accent);color:var(--accent-text)}
.card-symbol{position:absolute;top:24px;right:24px;color:var(--lime)}
.card-symbol svg{width:24px;height:24px}
.start-card .eyebrow{margin-bottom:16px;color:var(--lime)}
.start-card h2{margin-bottom:12px;font:400 24px/32px var(--font);letter-spacing:-.02em}
.start-card p{max-width:260px;margin-bottom:16px;font:var(--body-m);color:#d2dfd2}
.start-card .btn{width:100%;margin-top:8px}
.start-card .btn-primary{background:var(--lime);color:#21422e}
.start-card .btn-soft{border-color:#ffffff59;background:#ffffff0d;color:#f6f8f2}
.usage-card{padding:24px;border:1px solid var(--line);border-radius:var(--shape-l);background:var(--surface)}
.usage-card .eyebrow{margin-bottom:8px}
.usage-number{font:var(--headline-m);letter-spacing:-.02em}
.usage-number span{font:var(--body-m);letter-spacing:0;color:var(--muted)}
.usage-line{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0;font:var(--body-m)}
.usage-card small{display:block;font:var(--body-s);color:var(--muted)}
.workspace-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:24px;padding-top:8px;border-top:1px solid var(--line);font:var(--body-s);color:var(--muted)}
.workspace-foot>span:first-child{display:flex;align-items:center;gap:8px}

/* Enrollment lives in the workspace, not on another page. */
.setup-shell{max-width:640px;margin:0 auto}
.setup-card{padding:32px;border:1px solid var(--line);border-radius:var(--shape-l);background:var(--surface)}
.setup-card .card-symbol{position:static;width:48px;height:48px;margin-bottom:24px;border-radius:var(--shape-m);background:var(--tint);color:var(--accent)}
.setup-card .eyebrow{margin-bottom:8px}
.setup-card h2{margin-bottom:8px;font:var(--headline-s)}
.setup-card p{max-width:56ch;font:var(--body-m)}
.setup-card .btn{margin-top:24px}

/* Dialogs: headline, supporting text, content, then end-aligned actions (dismiss before confirm). */
dialog{width:min(512px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:var(--shape-xl);background:var(--surface);color:var(--ink);box-shadow:0 28px 100px #102d2440}
dialog[open]{animation:dialog-enter var(--dur-medium) var(--ease-enter)}
dialog::backdrop{background:#19292069;backdrop-filter:blur(5px)}
.modal-shell{padding:24px}
.modal-eyebrow{margin-bottom:16px;font:var(--label-m);letter-spacing:.12em;color:var(--muted)}
.modal-shell h2{margin-bottom:16px;font:var(--headline-s);letter-spacing:-.01em}
.modal-intro{margin-bottom:24px;font:var(--body-m)}
.modal-intro strong{color:var(--ink);overflow-wrap:anywhere}
.modal-small{margin-top:16px;font:var(--body-s);color:var(--muted)}
.modal-small a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.modal-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:24px}
.form-message{font:var(--body-s);color:var(--muted)}
.form-message:not(:empty){margin-top:16px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line);font:var(--body-m)}
.setting-row strong{font:var(--title-s);text-align:right;overflow-wrap:anywhere}
.pay-summary{display:flex;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--shape-m);background:var(--subtle)}
.pay-summary strong{font:var(--title-s)}
.pay-summary p{margin-top:4px;font:var(--body-s)}
.pay-summary .price{font:var(--headline-m)}
.paypal-btn{border-color:#e8c66b;background:#f7da89;color:#27374b}
.npm-command{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 4px 16px;border:1px solid var(--line);border-radius:var(--shape-s);background:var(--subtle)}
.npm-command code{font:400 14px/20px var(--mono);overflow-wrap:anywhere}
.npm-command .btn{flex:none}
.toast{position:fixed;bottom:24px;left:50%;z-index:1000;width:max-content;max-width:min(672px,calc(100vw - 32px));min-height:48px;padding:14px 16px;border-radius:var(--shape-xs);background:var(--ink);color:var(--surface);font:var(--body-m);box-shadow:var(--shadow);transform:translateX(-50%)}

/* Text fields: persistent label, 3:1 outline, 2px focus indicator, supporting text below. */
.field{display:block;margin:0 0 16px}
.field>span{display:block;margin-bottom:8px;font:var(--label-l)}
.field input,.field select{width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--outline);border-radius:var(--shape-s);background:var(--surface);color:var(--ink);font:var(--body-l)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.field input:user-invalid{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.field input::placeholder{color:#738078}
.field-help{display:block;margin-top:4px;font:var(--body-s);color:var(--muted)}

/* Policy and support pages share the LC-40 palette; no script required. */
.document-page .document-main{padding-top:56px;padding-bottom:64px}
.document-intro{max-width:780px;margin-bottom:32px}
.document-intro h1{margin:16px 0;font:var(--display-m);letter-spacing:-.03em}
.document-lead{max-width:620px;font:var(--body-l)}
.document-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;font:var(--body-s)}
.document-badge{margin-right:4px;padding:2px 8px;border:1px solid #ceddc5;border-radius:var(--shape-full);background:var(--tint);color:var(--accent);font:var(--label-s)}
.document-tabs{display:flex;gap:4px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.document-tabs a{display:flex;align-items:center;min-height:48px;padding:12px 16px;border-radius:var(--shape-s) var(--shape-s) 0 0;color:var(--muted);font:var(--title-s);font-weight:400}
.document-tabs a:hover{color:var(--accent)}
.document-tabs a:focus-visible{outline-offset:-3px}
.document-tabs a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent);color:var(--accent);font-weight:600}
.document-layout{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:start;gap:40px}
.document-aside{position:sticky;top:24px}
.document-aside ol{margin:12px 0 24px;padding:0;border-left:1px solid var(--line);list-style:none}
.document-aside nav a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:0 var(--shape-s) var(--shape-s) 0;color:var(--muted);font:var(--body-m)}
.document-aside nav a:hover{color:var(--accent)}
.document-contact{padding:20px 0;border-top:1px solid var(--line);font:var(--body-m)}
.document-contact p{margin-bottom:8px}
.document-contact strong{display:block;margin-bottom:4px;font:var(--title-s)}
.document-contact a{display:inline-flex;align-items:center;min-height:48px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.document-article{min-width:0;padding:32px;border:1px solid var(--line);border-radius:var(--shape-l);background:var(--surface)}
.document-summary{margin-bottom:12px;padding:24px;border:1px solid #dce7d5;border-radius:var(--shape-m);background:var(--tint)}
.document-summary h2{margin:0 0 12px;font:var(--title-m);color:var(--accent)}
.document-summary ul{margin:0;padding-left:20px;font:var(--body-m);color:var(--accent)}
.document-summary li+li{margin-top:8px}
.document-section{padding:28px 0;border-bottom:1px solid var(--line)}
.document-section:last-child{padding-bottom:0;border:0}
.document-section h2{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font:var(--headline-s);letter-spacing:-.01em;scroll-margin-top:24px}
.document-section h2>span{flex:none;font:500 12px/16px var(--mono);color:var(--muted)}
.document-section p,.document-section li{font:var(--body-l);color:var(--ink);overflow-wrap:anywhere}
.document-section p+p,.document-section ul+p{margin-top:12px}
.document-section ul{margin:12px 0;padding-left:24px}
.document-section li+li{margin-top:8px}
.document-section a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.document-table{margin-top:20px}
.document-table table{width:100%;border-collapse:collapse;font:var(--body-m);text-align:left}
.document-table caption{margin-bottom:8px;font:var(--body-s);color:var(--muted);text-align:left}
.document-table th,.document-table td{padding:12px 16px;border:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.document-table thead th{background:var(--subtle);font-weight:600}
.document-table tbody th{width:32%;font-weight:600}
.document-table td{color:var(--muted)}
.document-page .document-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:16px;padding-bottom:16px;border-top:1px solid var(--line);font:var(--body-s);color:var(--muted)}
.document-footer nav{display:flex;flex-wrap:wrap;gap:8px}

@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.98)}}

/* Window size classes: extra-large >=1600, large 1200-1599, expanded 840-1199, medium 600-839, compact <600. */
@media(min-width:1600px){
  .hero{padding-top:96px;padding-bottom:80px}
  .hero-description{max-width:480px}
}
@media(max-width:1199px){
  .hero{gap:40px;padding-top:64px}
  .hero h1{font:var(--display-m);letter-spacing:-.03em}
  .how-section{grid-template-columns:232px 1fr;gap:24px}
  .steps-grid{gap:24px}
  .work-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}
  .control-tag{margin-right:-8px}
}
@media(max-width:839px){
  .landing-nav{display:none}
  .hero{grid-template-columns:1fr;max-width:640px;gap:32px;padding-top:48px;padding-bottom:32px}
  .hero-copy{text-align:center}
  .hero-copy .eyebrow,.hero-note,.hero-actions{justify-content:center}
  .hero-description{margin:auto}
  .hero h1 em{white-space:nowrap}
  .hero-visual{width:100%;max-width:520px;margin:auto}
  .visual-disclaimer{margin-left:0;text-align:center}
  .compatibility{justify-content:center;text-align:center}
  .compatibility>div{justify-content:center}
  .how-section{grid-template-columns:1fr;gap:16px;padding-top:48px;padding-bottom:48px}
  .section-heading h2 br{display:none}
  .plans-heading{display:block}
  .plans-heading>p{margin-top:16px;text-align:left}
  .plan-features{flex-wrap:wrap}
  .faq-section{grid-template-columns:1fr;gap:16px}
  .work-grid{grid-template-columns:1fr}
  .workspace{padding-top:32px}
  .workspace-aside{grid-template-columns:1.4fr 1fr}
  .activity-panel{min-height:368px}
  .document-page .document-main{padding-top:40px}
  .document-layout{grid-template-columns:1fr;gap:24px}
  .document-aside{position:static}
  .document-aside ol{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0;border:0}
  .document-aside nav a{padding:8px 12px;border:1px solid var(--line);border-radius:var(--shape-s);background:var(--surface)}
  .document-contact{display:none}
  .document-tabs{margin-bottom:24px}
}
@media(max-width:599px){
  :root{--margin:16px}
  .header-inner{gap:8px}
  .brand{gap:8px;font-size:18px;line-height:24px}
  .brand-mark{width:32px;height:32px}
  .header-actions{gap:4px}
  .header-actions .btn [data-icon],.document-page .site-header .btn span{display:none}
  .header-actions .btn-primary,.document-page .site-header .btn{padding-left:12px;padding-right:12px}
  .hero{gap:24px;padding-top:40px}
  .hero h1{margin:16px 0;font:var(--display-s);letter-spacing:-.02em}
  .hero-actions{margin-top:24px}
  .hero-actions .btn{flex:1 1 200px}
  .preview-titlebar{padding:12px 16px}
  .preview-inner{padding:16px}
  .control-tag{max-width:300px;margin-right:-4px;padding:12px;border-width:3px}
  .section-heading{margin-bottom:16px}
  .section-heading h2{font:var(--headline-l);letter-spacing:-.02em}
  .how-section{padding-top:40px;padding-bottom:32px}
  .steps-grid{grid-template-columns:1fr;gap:0}
  .steps-grid article{padding:20px 0 20px 56px;border-top:1px solid var(--line)}
  .step-number{position:absolute;top:24px;left:0}
  .step-icon{position:absolute;top:48px;left:0}
  .steps-grid p{max-width:none}
  .plans-section{padding-top:32px;padding-bottom:24px}
  .plan-grid{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .plan-card{padding:20px}
  .plan-features{flex-wrap:nowrap;gap:12px}
  .faq-section{padding-top:32px;padding-bottom:32px}
  .faq-section h2{font:var(--headline-s)}
  .faq-items summary{padding:16px 8px}
  .faq-items details p{padding:0 8px 16px}
  .footer{flex-direction:column;align-items:flex-start;padding-top:16px}
  .footer>div{margin-left:-8px}
  .workspace{min-height:calc(100vh - 65px);padding-top:24px}
  .workspace-heading{align-items:flex-start;gap:8px;margin-bottom:16px}
  .workspace-heading h1{font:var(--headline-m);letter-spacing:-.02em}
  .connection-bar{padding:12px 16px}
  .work-grid{gap:16px}
  .panel-heading{padding:20px 16px}
  .job-list{padding:4px 16px}
  .job-row{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .job-row>.btn{grid-column:2;justify-self:start;margin-left:-12px}
  .activity-bottom{padding-left:16px}
  .workspace-aside{grid-template-columns:1fr}
  .start-card h2 br{display:none}
  .start-card p{max-width:none}
  .workspace-foot{flex-direction:column;align-items:flex-start;gap:0}
  .setup-card{padding:24px}
  .modal-shell{padding:24px 20px}
  .document-page .document-main{padding-top:32px;padding-bottom:40px}
  .document-intro{margin-bottom:24px}
  .document-intro h1{font:var(--display-s);letter-spacing:-.02em}
  .document-tabs{gap:0;overflow-x:auto;scrollbar-width:none}
  .document-tabs a{flex:none;padding:12px}
  .document-article{padding:20px 16px;border-radius:var(--shape-m)}
  .document-summary{padding:16px}
  .document-section{padding:24px 0}
  .document-section h2{gap:8px;font:var(--title-l)}
  .document-table th,.document-table td{padding:8px}
  .document-table tbody th{width:36%}
}
/* Narrow compact phones: the top app bar keeps the logo mark and its actions; the link keeps its accessible name. */
@media(max-width:399px){
  .brand{min-width:48px}
  .brand>span{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .document-page{background:white;color:black;font-size:11pt}
  .document-page .site-header,.document-page .skip-link,.document-aside,.document-tabs,.document-page .document-footer{display:none}
  .document-page .document-main{max-width:none;padding:0}
  .document-layout{display:block}
  .document-article{padding:0;border:0}
  .document-section{break-inside:avoid}
  .document-summary{background:none}
}