*{box-sizing:border-box}body{margin:0;font-family:var(--cc-font);font-size:var(--cc-fs-lg);line-height:var(--cc-lh-normal);color:var(--cc-text);background:var(--cc-bg);-webkit-font-smoothing:antialiased}.site-header{display:flex;align-items:center;gap:var(--cc-sp-2);padding:var(--cc-sp-4) var(--cc-sp-6);border-bottom:1px solid var(--cc-border);background:var(--cc-surface)}.site-mark{flex:0 0 auto;align-self:center}.wordmark{font-weight:var(--cc-fw-semibold)}.endorsement{color:var(--cc-text-muted);font-size:var(--cc-fs-sm)}.site-main{max-width:54rem;margin:0 auto;padding:var(--cc-sp-6) var(--cc-sp-5)}h1{font-size:1.75rem;margin:0 0 var(--cc-sp-3)}h1,h2{line-height:var(--cc-lh-tight);font-weight:var(--cc-fw-semibold)}h2{font-size:1.15rem;margin:var(--cc-sp-6) 0 var(--cc-sp-3)}p{margin:0 0 var(--cc-sp-4)}.lead{font-size:1.05rem}.hint,.lead{color:var(--cc-text-secondary)}.hint,.muted{font-size:var(--cc-fs-md)}.muted{color:var(--cc-text-muted)}label{display:block;margin:var(--cc-sp-4) 0 var(--cc-sp-1);font-size:var(--cc-fs-md);font-weight:var(--cc-fw-medium);color:var(--cc-text-secondary)}input{width:100%;padding:var(--cc-sp-3) var(--cc-sp-4);font:inherit;color:var(--cc-text);background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:var(--cc-radius-sm)}input:focus-visible{outline:2px solid var(--cc-accent);outline-offset:0;border-color:var(--cc-accent)}button{margin-top:var(--cc-sp-4);padding:var(--cc-sp-3) var(--cc-sp-5);font:inherit;font-weight:var(--cc-fw-medium);color:var(--cc-text-on-accent);background:var(--cc-accent);border:1px solid var(--cc-accent);border-radius:var(--cc-radius-sm);cursor:pointer;transition:background var(--cc-dur) var(--cc-ease)}button:hover{background:var(--cc-accent-hover);border-color:var(--cc-accent-hover)}button:focus-visible{outline:2px solid var(--cc-accent);outline-offset:2px}button[disabled]{opacity:.55;cursor:default}button.secondary{color:var(--cc-text);background:var(--cc-surface);border-color:var(--cc-border-strong)}button.secondary:hover{background:var(--cc-surface-hover)}button.link{margin:0;padding:0;border:none;background:none;color:var(--cc-accent);font-weight:var(--cc-fw-regular)}button.link:hover{background:none;text-decoration:underline}.card{border:1px solid var(--cc-border);border-radius:var(--cc-radius-lg);background:var(--cc-surface);padding:var(--cc-sp-5);margin:var(--cc-sp-4) 0}.meter{height:6px;background:var(--cc-surface-subtle);border-radius:3px;overflow:hidden}.meter-fill{height:100%;background:var(--cc-accent);transition:width var(--cc-dur) var(--cc-ease)}.meter-fill.warn{background:var(--cc-warning)}.meter-fill.full{background:var(--cc-danger)}.error{color:var(--cc-text);background:var(--cc-danger-subtle)}.error,.notice{border-radius:var(--cc-radius-sm);padding:var(--cc-sp-3) var(--cc-sp-4);font-size:var(--cc-fs-md)}.notice{background:var(--cc-success-subtle)}.plans{grid-gap:var(--cc-sp-4);gap:var(--cc-sp-4);align-items:start}@media (max-width:40rem){.plans{grid-template-columns:1fr}}.plan-card{border:1px solid var(--cc-border);border-radius:var(--cc-radius-lg);background:var(--cc-surface);padding:var(--cc-sp-5)}.plan-card.featured{border-color:var(--cc-accent)}.plan-name{font-size:var(--cc-fs-xs);font-weight:var(--cc-fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--cc-text-muted);margin:0 0 var(--cc-sp-2)}.plan-card.featured .plan-name{color:var(--cc-accent)}.price{font-size:2rem;font-weight:var(--cc-fw-semibold);line-height:1;margin:0 0 var(--cc-sp-1)}.price span{font-size:var(--cc-fs-md);font-weight:var(--cc-fw-regular);color:var(--cc-text-secondary)}.features{list-style:none;margin:var(--cc-sp-4) 0;padding:0;display:flex;flex-direction:column;gap:var(--cc-sp-2)}.features li{font-size:var(--cc-fs-md);color:var(--cc-text-secondary);padding-left:var(--cc-sp-5);position:relative}.features li:before{content:"\2713";position:absolute;left:0;color:var(--cc-success)}.plan-row{display:flex;align-items:baseline;justify-content:space-between}.badge{font-size:var(--cc-fs-xs);font-weight:var(--cc-fw-semibold);letter-spacing:.04em;padding:2px var(--cc-sp-2);border-radius:3px;color:var(--cc-accent);background:var(--cc-accent-subtle)}.site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--cc-sp-3);max-width:54rem;margin:var(--cc-sp-6) auto 0;padding:var(--cc-sp-5);border-top:1px solid var(--cc-border);font-size:var(--cc-fs-md);color:var(--cc-text-muted)}.site-footer nav{display:flex;gap:var(--cc-sp-5)}.site-footer a{color:var(--cc-text-secondary);text-decoration:none}.site-footer a:hover{color:var(--cc-text);text-decoration:underline}.wide{max-width:68rem;margin:0 auto}.section{padding:var(--cc-sp-6) 0}.section-head{max-width:34rem;margin-bottom:var(--cc-sp-5)}.section-head h2{margin-top:0;font-size:1.6rem}.eyebrow{display:block;margin-bottom:var(--cc-sp-2);font-size:var(--cc-fs-xs);font-weight:var(--cc-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--cc-accent)}.hero{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--cc-sp-6);gap:var(--cc-sp-6);align-items:center;padding:var(--cc-sp-6) 0 var(--cc-sp-6)}@media (max-width:56rem){.hero{grid-template-columns:1fr}}.hero h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;letter-spacing:-.02em;max-width:16ch}.hero .lead{font-size:1.1rem;max-width:42ch;color:var(--cc-text-secondary)}.cta-row{display:flex;align-items:center;gap:var(--cc-sp-4);flex-wrap:wrap;margin-top:var(--cc-sp-5)}.cta-row button{margin-top:0;padding:var(--cc-sp-4) var(--cc-sp-6);font-size:var(--cc-fs-lg)}.cta-row .note{margin:0;font-size:var(--cc-fs-md);color:var(--cc-text-muted)}.mock{border:1px solid var(--cc-border);border-radius:var(--cc-radius-lg);background:var(--cc-surface);box-shadow:var(--cc-shadow-md);overflow:hidden}.mock-bar{display:flex;align-items:center;gap:var(--cc-sp-2);padding:var(--cc-sp-3) var(--cc-sp-4);background:var(--cc-surface-subtle);border-bottom:1px solid var(--cc-border)}.mock-dot{width:8px;height:8px;border-radius:50%;background:var(--cc-border-strong)}.mock-host{margin-left:var(--cc-sp-2);font-size:var(--cc-fs-sm);color:var(--cc-text-muted)}.mock-body{padding:var(--cc-sp-5)}.mock-draft{font-size:var(--cc-fs-lg);line-height:var(--cc-lh-relaxed);margin:0 0 var(--cc-sp-4)}.mock-draft mark{background:var(--cc-accent-subtle);color:inherit;padding:1px 2px;border-radius:2px}.mock-panel{border:1px solid var(--cc-border);border-radius:var(--cc-radius-md);background:var(--cc-surface);box-shadow:var(--cc-shadow-sm);overflow:hidden}.mock-panel-head{display:flex;align-items:center;gap:var(--cc-sp-2);padding:var(--cc-sp-3) var(--cc-sp-4);border-bottom:1px solid var(--cc-border);font-size:var(--cc-fs-md);font-weight:var(--cc-fw-semibold)}.mock-grip{display:flex;flex-direction:column;gap:2px}.mock-grip span{display:block;width:11px;height:1.5px;background:var(--cc-border-strong);border-radius:1px}.mock-panel-body{padding:var(--cc-sp-4);display:flex;flex-direction:column;gap:var(--cc-sp-2)}.mock-label{font-size:var(--cc-fs-xs);font-weight:var(--cc-fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--cc-text-muted);margin:var(--cc-sp-1) 0 0}.mock-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--cc-sp-2);gap:var(--cc-sp-2)}.mock-chip{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-sp-2) var(--cc-sp-3);font-size:var(--cc-fs-md);border:1px solid var(--cc-border);border-radius:var(--cc-radius-sm);background:var(--cc-surface)}.mock-chip.on{border-color:var(--cc-accent);font-weight:var(--cc-fw-medium)}.mock-chip.on,.mock-pro{background:var(--cc-accent-subtle);color:var(--cc-accent)}.mock-pro{font-size:9px;font-weight:var(--cc-fw-semibold);letter-spacing:.04em;padding:1px var(--cc-sp-1);border-radius:3px}.mock-result{margin-top:var(--cc-sp-2);padding:var(--cc-sp-4);font-size:var(--cc-fs-md);line-height:var(--cc-lh-relaxed);background:var(--cc-surface-subtle);border:1px solid var(--cc-border);border-radius:var(--cc-radius-md)}.mock-actions{display:flex;gap:var(--cc-sp-2);margin-top:var(--cc-sp-3)}.mock-btn{flex:1 1;text-align:center;padding:var(--cc-sp-2) var(--cc-sp-3);font-size:var(--cc-fs-md);border-radius:var(--cc-radius-sm);border:1px solid var(--cc-border);background:var(--cc-surface)}.mock-btn.primary{color:var(--cc-text-on-accent);background:var(--cc-accent);border-color:var(--cc-accent);font-weight:var(--cc-fw-medium)}.situations{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--cc-sp-4);gap:var(--cc-sp-4)}@media (max-width:52rem){.situations{grid-template-columns:1fr}}.situation{border:1px solid var(--cc-border);border-left:3px solid var(--cc-accent);border-radius:var(--cc-radius-md);background:var(--cc-surface);padding:var(--cc-sp-5)}.situation h3{margin:0 0 var(--cc-sp-2);font-size:var(--cc-fs-lg)}.situation p{margin:0;font-size:var(--cc-fs-md);color:var(--cc-text-secondary)}.example{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:var(--cc-sp-4);gap:var(--cc-sp-4);align-items:stretch}@media (max-width:52rem){.example{grid-template-columns:1fr}.example .arrow{transform:rotate(90deg);justify-self:center}}.example .side{border:1px solid var(--cc-border);border-radius:var(--cc-radius-md);background:var(--cc-surface);padding:var(--cc-sp-5)}.example .side.after{border-color:var(--cc-accent)}.example .side p{margin:0;font-size:var(--cc-fs-lg);line-height:var(--cc-lh-relaxed)}.example .side p mark{background:var(--cc-success-subtle);color:inherit;padding:1px 3px;border-radius:2px}.example .label{display:block;margin-bottom:var(--cc-sp-3);font-size:var(--cc-fs-xs);font-weight:var(--cc-fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--cc-text-muted)}.example .side.after .label{color:var(--cc-accent)}.example .arrow{align-self:center;color:var(--cc-border-strong);font-size:1.5rem}.feature{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--cc-sp-6);gap:var(--cc-sp-6);align-items:center;padding:var(--cc-sp-6) 0;border-top:1px solid var(--cc-border)}@media (max-width:56rem){.feature{grid-template-columns:1fr}}.feature.flip .feature-visual{order:-1}@media (max-width:56rem){.feature.flip .feature-visual{order:0}}.feature h2{margin-top:0;font-size:1.5rem}.feature p{color:var(--cc-text-secondary)}.hosts{display:flex;gap:var(--cc-sp-3);flex-wrap:wrap}.host-chip{display:inline-flex;align-items:center;gap:var(--cc-sp-2);padding:var(--cc-sp-3) var(--cc-sp-4);border:1px solid var(--cc-border);border-radius:var(--cc-radius-md);background:var(--cc-surface);font-size:var(--cc-fs-md);font-weight:var(--cc-fw-medium)}.host-chip.soon{color:var(--cc-text-muted);font-weight:var(--cc-fw-regular)}.band{border:1px solid var(--cc-border);border-radius:var(--cc-radius-lg);background:var(--cc-surface);padding:var(--cc-sp-6);margin:var(--cc-sp-6) 0}.band-list{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--cc-sp-5);gap:var(--cc-sp-5);margin-top:var(--cc-sp-5)}@media (max-width:52rem){.band-list{grid-template-columns:1fr}}.band-item strong{display:block;margin-bottom:var(--cc-sp-1)}.band-item p{margin:0;font-size:var(--cc-fs-md);color:var(--cc-text-secondary)}.steps{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--cc-sp-5);gap:var(--cc-sp-5)}@media (max-width:52rem){.steps{grid-template-columns:1fr}}.step .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-bottom:var(--cc-sp-3);border-radius:50%;font-size:var(--cc-fs-sm);font-weight:var(--cc-fw-semibold);color:var(--cc-text-on-accent);background:var(--cc-accent)}.step strong{display:block;margin-bottom:var(--cc-sp-1)}.step p{margin:0;font-size:var(--cc-fs-md);color:var(--cc-text-secondary)}.closing{text-align:center;padding:var(--cc-sp-6) var(--cc-sp-5);border-top:1px solid var(--cc-border)}.closing h2{font-size:1.75rem;max-width:22ch;margin-inline:auto}.closing .cta-row{justify-content:center}.plans{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-top:8px}@media (max-width:520px){.plans{grid-template-columns:1fr}}.plan{border:1px solid var(--cc-border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px}.plan.best{border-color:var(--cc-accent)}.plan-name{font-size:13px;font-weight:600;color:var(--cc-text-secondary);display:flex;align-items:center;gap:8px;margin:0}.plan-name .tag{font-size:11px;font-weight:600;padding:2px 6px;border-radius:999px;background:var(--cc-accent-subtle);color:var(--cc-accent)}.plan-price{font-size:24px;font-weight:600;margin:0 0 8px}.plan-price span{font-size:13px;font-weight:400;color:var(--cc-text-secondary)}.plan button{width:100%;margin-top:auto}.linklike{background:none;border:none;padding:0;font:inherit;color:var(--cc-text-secondary);text-decoration:underline;cursor:pointer}.linklike:hover{color:var(--cc-text)}.notice{border:1px solid var(--cc-accent);background:var(--cc-accent-subtle);color:var(--cc-accent);border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:14px}.hint.subtle{color:var(--cc-text-muted);font-size:var(--cc-fs-sm);margin-top:var(--cc-sp-2)}