/* Shared CleanLoop brand: restrained surfaces and content-led responsive layouts. */
:root { --navy:#102b3f; --ink:#102b3f; --ink-soft:#263e50; --blue:#0868c9; --blue-soft:#edf5ff; --green:#168575; --green-deep:#126b5e; --mint:#edf8f5; --mist:#f5f7fa; --line:#dce3eb; --muted:#526576; --shadow:0 12px 32px rgba(16,43,63,.07); }
html { scroll-padding-top:88px; }
body { background:#fff; overflow-x:visible; }
.shell { width:min(1240px,calc(100% - 64px)); }
h1,h2,h3 { text-wrap:balance; letter-spacing:-.025em; }
h2 { font-size:clamp(28px,3.2vw,40px); line-height:1.16; }
p { text-wrap:pretty; }
.section { padding-block:80px; }
.section-label { letter-spacing:.075em; line-height:1.5; font-size:11px; }
.btn { min-height:48px; padding:12px 20px; border-radius:8px; box-shadow:none; line-height:1.4; text-align:center; }
.btn.primary,.btn.green { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:none; }
.btn.primary:hover,.btn.green:hover { background:#0756a5; border-color:#0756a5; transform:none; }
.btn.light { background:#fff; color:var(--ink); border-color:var(--line); }
.site-nav { background:#fff; border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:none; }
.nav-inner { min-height:80px; gap:24px; }
.brand { gap:11px; color:var(--ink); letter-spacing:-.03em; }
.brand img { width:40px; height:40px; border-radius:10px; box-shadow:none; border:0; }
.nav-links { gap:20px; }
.nav-links a { color:#425567; font-weight:600; }
.site-nav .nav-actions { width:auto; flex-wrap:nowrap; gap:12px; }
.lang-toggle { border-radius:8px; border-color:var(--line); background:#f5f7fa; }
.lang-toggle button { border-radius:5px; font-weight:650; }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:48px; padding:76px max(32px,calc((100% - 1240px) / 2)); height:auto; min-height:0; overflow:visible; background:#fff; color:var(--ink); }
.hero::before,.hero::after,.hero-shield { display:none; }
.hero-inner { order:1; width:100%; margin:0; padding:0; min-width:0; }
.hero-copy { width:auto; max-width:none; }
.hero .section-label { display:block; margin-bottom:18px; color:var(--green-deep); }
.hero h1 { max-width:none; font-size:clamp(36px,4.1vw,56px); line-height:1.09; letter-spacing:-.035em; }
.hero-copy > p { margin-top:22px; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-actions { margin-top:28px; gap:12px; }
.hero-proof-list { display:flex; flex-wrap:wrap; gap:10px 18px; margin:22px 0 0; padding:0; list-style:none; }
.hero-proof-list li { display:flex; align-items:baseline; gap:7px; color:var(--muted); font-size:11px; line-height:1.5; }
.hero-proof-list li::before { content:""; flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:var(--green); }
.hero-scene { order:2; position:relative; inset:auto; width:auto; min-width:0; opacity:1; }
.scene-app { height:auto; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(16,43,63,.1); }
.scene-topbar { height:auto; min-height:58px; padding:14px 16px; gap:12px; flex-wrap:wrap; }
.scene-title { gap:8px; min-width:0; flex-wrap:wrap; }
.scene-mark { background:var(--navy); color:#fff; }
.scene-live { display:none; }
.scene-body { height:auto; grid-template-columns:106px minmax(0,1fr); }
.scene-sidebar { padding:18px 9px; background:var(--navy); }
.scene-sidebar strong { padding-inline:7px; font-size:11px; }
.scene-nav-item { padding:9px 7px; font-size:10px; font-weight:600; }
.scene-content { padding:18px; min-width:0; overflow:visible; }
.scene-heading { display:block; }
.scene-heading > span { display:none; }
.scene-heading b { font-size:18px; line-height:1.3; }
.scene-summary { gap:7px; margin-top:16px; }
.scene-metric { padding:10px; min-width:0; }
.scene-metric span { font-size:9px; }
.scene-board { gap:7px; margin-top:14px; }
.scene-column { min-width:0; min-height:215px; padding:8px; }
.scene-column > strong { font-size:10px; gap:4px; flex-wrap:wrap; }
.scene-order { padding:8px; overflow-wrap:anywhere; }
.scene-order b { font-size:10px; }
.scene-order small { font-size:10px; line-height:1.5; }
.signal-bar { background:#fff; border-block:1px solid var(--line); padding:0; }
.signal-inner { margin:0 auto; border:0; box-shadow:none; border-radius:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
.signal-item,.signal-item:first-child { min-height:0; padding:26px 22px; }
.signal-item span { font-size:11px; color:var(--blue); }
.signal-item strong { font-size:14px; line-height:1.45; }
.signal-item small { font-size:12px; }
.workspace-section,.product-section,.pricing-section { background:var(--mist); }
.workspace-heading { gap:40px; }
.workspace-grid { gap:16px; }
.workspace-card { min-width:0; min-height:254px; padding:24px; border:1px solid var(--line); border-radius:10px; box-shadow:none; }
.workspace-card:hover { transform:none; border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.workspace-card::before { display:none; }
.workspace-card-top { gap:12px; flex-wrap:wrap; }
.workspace-mark { border-radius:8px; background:var(--navy); box-shadow:none; }
.workspace-status { padding:4px 7px; border-radius:4px; background:var(--mist); color:var(--muted); font-size:10px; }
.workspace-card h3 { margin-top:24px; font-size:20px; }
.workspace-card p { font-size:14px; }
.operation-band,.final-cta { background:var(--navy); }
.operation-band .section-label,.final-cta .section-label { color:#82d9cb; }
.order-strip { border-radius:8px; padding:18px; }
.flow-track { gap:12px; }
.flow-step,.flow-step + .flow-step { min-height:0; padding:20px; border:1px solid #405568; border-radius:8px; background:transparent; }
.flow-step .step-index { position:static; background:transparent; border-color:#82d9cb; color:#82d9cb; }
.flow-step h3 { min-height:0; }
.completion-rule { padding:18px; border-left-color:#82d9cb; }
.laundry-head { gap:48px; }
.portal-preview,.role-stage { border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.portal-sidebar { background:var(--navy); }
.portal-main,.role-canvas { background:var(--mist); }
.portal-topbar { min-height:62px; }
.portal-foot { gap:20px; }
.portal-foot .btn { flex-shrink:0; }
.role-tabs { padding:4px; border:1px solid var(--line); border-radius:8px; background:#e9eef3; }
.role-tab { border-radius:5px; }
.role-grid { grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); }
.role-explainer { padding:32px; }
.role-canvas { min-width:0; }
.phone-ui { max-width:100%; box-shadow:var(--shadow); }
.phone-action { background:var(--blue); color:#fff; }
.desktop-ui { min-width:0; width:100%; transform:none; box-shadow:var(--shadow); }
.desktop-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.desktop-stat,.desktop-row > * { min-width:0; overflow-wrap:anywhere; }
.business-statement { border-left-color:var(--green); }
.price-card,.price-card.featured { min-width:0; border-radius:10px; box-shadow:none; transform:none; }
.price-card.featured { border-color:var(--green); background:#fff; }
.price-card:hover,.price-card.featured:hover { transform:none; }
.final-cta::after { display:none; }
.footer-brand img { border-radius:8px; }
footer { background:#0b1f2f; }
@media(max-width:1120px) {
 .hero { gap:32px; padding-block:52px; }
 .scene-sidebar { display:none; } .scene-body { grid-template-columns:minmax(0,1fr); }
 .nav-links { gap:14px; }
 .workspace-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .signal-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .signal-item:nth-child(2) { border-right:0; }
 .signal-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}
@media(max-width:900px) {
 .hero { grid-template-columns:minmax(0,1fr); padding:48px 32px; gap:36px; }
 .hero-inner { max-width:640px; } .hero-scene { max-width:760px; width:100%; }
 .hero-copy { width:auto; max-width:none; }
 .hero h1 { font-size:clamp(36px,6.5vw,50px); }
 .scene-sidebar { display:block; } .scene-body { grid-template-columns:130px minmax(0,1fr); }
 .role-grid { grid-template-columns:minmax(0,1fr); } .portal-workspace { min-height:0; }
}
@media(max-width:660px) {
 html { scroll-padding-top:70px; } .shell { width:calc(100% - 32px); } .section { padding-block:48px; }
 .nav-inner { gap:8px; min-height:66px; } .site-nav .nav-actions { gap:8px; } .brand img { width:34px; height:34px; }
 .hero { padding:38px 16px 32px; gap:30px; } .hero h1 { font-size:clamp(32px,9vw,42px); }
 .hero-copy > p { font-size:16px; } .hero-proof-list { display:grid; gap:8px; }
 .scene-body { grid-template-columns:minmax(0,1fr); } .scene-sidebar { display:none; }
 .scene-content { padding:12px; } .scene-heading b { font-size:16px; }
 .scene-column { padding:6px; min-height:0; } .scene-order { padding:7px; } .scene-order + .scene-order { display:none; }
 .signal-inner { grid-template-columns:minmax(0,1fr); }
 .signal-item,.signal-item:first-child { padding:20px 0; border-right:0; } .signal-item:last-child { border-bottom:0; }
 .workspace-grid { grid-template-columns:minmax(0,1fr); } .workspace-card { min-height:0; padding:22px; }
 .flow-track,.pricing-grid { grid-template-columns:minmax(0,1fr); overflow:visible; padding-bottom:0; gap:12px; }
 .flow-rail-toolbar,.pricing-rail-toolbar { display:none; }
 .flow-step,.flow-step + .flow-step { padding:20px; min-height:0; } .flow-step h3 { min-height:0; } .price-card { min-height:0; }
 .portal-foot .btn { width:100%; } .role-explainer { padding:24px; } .role-canvas { padding:18px 12px; min-height:0; }
 .desktop-ui { min-width:0; transform:none; } .desktop-body { padding:12px; } .desktop-stats { gap:6px; }
 .desktop-stat { padding:10px 8px; } .desktop-stat strong { font-size:19px; }
 .desktop-bar { padding:12px; gap:10px; flex-wrap:wrap; }
 .desktop-row { padding:10px; gap:8px; grid-template-columns:1fr 1fr 1fr; } .cta-actions { min-width:0; }
}