:root{--ink:#152642;--muted:#60718b;--line:#dbe4ef;--blue:#2565dc;--navy:#0e2342;--paper:#fff;--bg:#f3f6fb;font:14px/1.48 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h2{font-size:23px;letter-spacing:-.035em;margin-bottom:5px}h3{font-size:15px;margin-bottom:3px}p{color:var(--muted)}[hidden]{display:none!important}:focus-visible{outline:3px solid #65a4ff;outline-offset:2px}.skip{position:absolute;top:-60px;left:15px;padding:8px;background:white;z-index:20}.skip:focus{top:15px}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.rail{background:linear-gradient(160deg,#102a50,#0a1c36);color:#dbe7fa;position:sticky;top:0;height:100vh;padding:24px 15px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:8px 10px 29px;color:white}.brand-mark{display:grid;place-items:center;background:#2c6de2;width:36px;height:36px;border-radius:11px;font-size:23px}.brand b{display:block;letter-spacing:.11em;font-size:14px}.brand small{font-size:10px;letter-spacing:.08em;color:#98b5dd}.rail-label{display:block;font-size:10px;letter-spacing:.18em;color:#7fa1d0;margin:0 11px 10px;font-weight:800}.rail-section a{display:block;padding:11px;border-radius:9px;color:#b9cce8}.rail-section a:hover,.rail-section a:focus-visible{background:#204678;color:white}.rail-foot{margin-top:auto;padding:18px 10px 3px;border-top:1px solid #315072}.rail-foot strong{color:white}.rail-foot p{color:#a8bddb;font-size:12px;margin:6px 0 15px}.rail-foot a{color:#dcecff;text-decoration:underline;text-underline-offset:3px;font-size:12px}.stage{min-width:0}.topbar{height:66px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:8;backdrop-filter:blur(12px)}.topbar strong{display:block;line-height:1.1;font-size:17px}.overline,.eyebrow{font-size:10px;font-weight:900;letter-spacing:.15em;color:var(--blue)}.top-status{font-size:12px;color:#53708d}.top-status i{display:inline-block;width:7px;height:7px;background:#29ab82;border-radius:50%;margin-right:6px}main{max-width:1600px;margin:auto;padding:29px 30px 80px}
.intro{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:20px 0 31px}.intro h1{font-size:clamp(34px,4.5vw,61px);line-height:1.02;letter-spacing:-.065em;margin:11px 0 14px}.intro h1 em{font-style:normal;color:#2766d8}.intro p{max-width:650px;font-size:16px;margin:0}.intro-stat{min-width:170px;padding:16px 20px;border-left:1px solid #cddbea}.intro-stat span,.intro-stat small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;color:#7890a9}.intro-stat strong{display:block;font-size:42px;line-height:1.1;color:#245cbd}.workspace{display:grid;grid-template-columns:305px minmax(0,1fr);gap:22px;align-items:start}.left-column{display:grid;gap:18px}.card{background:white;border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:0 8px 30px #193d6b0b}.card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:17px}.card-head h2{font-size:18px;margin:0}.card-head p{font-size:12px;margin:3px 0 0}.step{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e4eeff;color:#1b61d3;font-weight:900;font-size:12px;flex:none}.card label{display:block;font-size:12px;font-weight:750;color:#425a78;margin:13px 0 0}.card input:not([type=color]),.card select,.card textarea{display:block;width:100%;padding:10px 11px;border:1px solid #ccdaea;border-radius:9px;background:#fff;color:#182c46;margin-top:5px;min-width:0}.card textarea{resize:vertical}.card input:focus,.card select:focus,.card textarea:focus{border-color:var(--blue);outline:2px solid #cfe0ff}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.control-grid label{margin-top:0}.control-grid input[type=color]{display:block;width:100%;height:38px;padding:3px;background:#fff;border:1px solid #c8d8e8;border-radius:9px;margin-top:5px}.primary,.quiet{border-radius:9px;padding:10px 14px;font-weight:800}.primary{border:1px solid #1d60d1;background:#2565dc;color:white;box-shadow:0 5px 12px #2565dc29}.primary:hover{background:#174fb2}.primary span{float:right}.quiet{border:1px solid #cbd9e8;background:white;color:#1d4f9f}.quiet:hover{background:#eaf2ff}.wide{width:100%;margin-top:18px}.action-row{display:flex;gap:8px;justify-content:space-between;margin-top:17px}.action-row button{font-size:12px}.save-note{font-size:11px;line-height:1.45;margin:14px 0 0}.right-column{min-width:0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:0 0 14px}.section-head p{font-size:13px;margin:0}.section-head h2{margin:4px 0}.directions{margin-bottom:24px}.direction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.direction-card{background:white;border:2px solid #dce5f0;border-radius:13px;padding:10px;text-align:left;min-width:0;transition:transform .15s,border-color .15s,box-shadow .15s}.direction-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #1e468417}.direction-card.selected{border-color:#2766d8;box-shadow:0 0 0 3px #dceaff}.direction-thumbnail{height:82px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:7px;background:var(--d-bg);border:1px solid #d9e1e8}.direction-thumbnail .tile-copy{padding:12px 8px}.direction-thumbnail .tile-copy:before,.direction-thumbnail .tile-copy:after{content:"";display:block;height:5px;width:76%;background:var(--d-ink);border-radius:4px;margin-bottom:6px}.direction-thumbnail .tile-copy:after{width:48%;background:var(--d-primary)}.direction-thumbnail .tile-image{background:linear-gradient(135deg,var(--d-primary),var(--d-accent));opacity:.85}.direction-card[data-layout=immersive] .direction-thumbnail{display:block;background:linear-gradient(110deg,#0008,#0000),linear-gradient(140deg,var(--d-primary),var(--d-accent))}.direction-card[data-layout=immersive] .tile-copy:before{background:white}.direction-card[data-layout=editorial] .tile-image{grid-column:1;grid-row:1}.direction-card[data-layout=editorial] .tile-copy{grid-column:2;grid-row:1}.direction-card[data-layout=minimal] .direction-thumbnail{background:white}.direction-card[data-layout=minimal] .tile-image{align-self:center;margin:10px;border-radius:3px}.direction-meta{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:4px}.direction-meta b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.direction-meta span{font-size:10px;color:#69809c}.direction-card p{font-size:11px;line-height:1.3;margin:5px 0 7px;min-height:28px}.swatches{display:flex;gap:3px}.swatches i{width:12px;height:12px;border:1px solid #d1dbe6;border-radius:50%}.compare-mark{display:flex;align-items:center;gap:5px;font-size:10px;color:#53708d;margin-top:8px}.compare-mark input{margin:0}
.preview-section{min-width:0}.device-toggle{display:flex;background:#e8eef7;border-radius:9px;padding:3px;flex:none}.device-toggle button{border:0;background:none;border-radius:7px;color:#62748d;padding:6px 10px;font-size:11px;font-weight:800}.device-toggle button.selected{background:white;color:#164c9e;box-shadow:0 1px 4px #17385b1b}.preview-frame{padding:20px;background:linear-gradient(135deg,#dfe7f1,#edf2f8);border:1px solid #d6e1ed;border-radius:17px;min-height:520px;overflow:auto}.preview-frame.mobile #preview-content{max-width:365px;margin:auto}.preview-caption{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#7889a0;margin:9px 2px 0}.preview-caption span:last-child{font-weight:700}.library,.saved{margin-top:45px}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.library-group{background:white;border:1px solid var(--line);border-radius:14px;padding:14px}.library-group h3{font-size:15px;margin:0 0 10px}.library-card{width:100%;border:1px solid #e3eaf2;background:#f7f9fc;border-radius:9px;padding:9px 10px;margin:4px 0;text-align:left;display:flex;justify-content:space-between;align-items:center;color:#284568}.library-card:hover{border-color:#4c87e7;background:#e9f2ff}.library-card small{color:#7a8ea5}.saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}.saved-card{background:white;border:1px solid var(--line);border-radius:12px;padding:14px}.saved-card h3{margin-bottom:2px}.saved-card small{display:block;color:#7b8da1}.saved-card .row{display:flex;gap:6px;margin-top:11px}.saved-card button{padding:6px 9px;font-size:11px;border-radius:7px;border:1px solid #cfdbeb;background:#f6f9fc;color:#245798}.saved-empty{border:1px dashed #b9cce3;border-radius:13px;padding:25px;color:#617891;background:#f9fbfd}
/* Rendered site concept. These styles are isolated under .mock. */
.mock{--c-bg:#f5f8fc;--c-ink:#172943;--c-primary:#1e62cd;--c-accent:#7bb3e8;--c-surface:#fff;--c-radius:14px;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--c-ink);background:var(--c-bg);border:1px solid #cdd8e6;border-radius:11px;box-shadow:0 13px 37px #0c274021;overflow:hidden;min-width:0}.mock[data-typeface=editorial] h1,.mock[data-typeface=editorial] h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.04em}.mock[data-typeface=technical]{font-family:Arial,Helvetica,sans-serif}.mock[data-corners=sharp]{--c-radius:2px}.mock[data-corners=round]{--c-radius:27px}.mock a{color:inherit}.mock-nav{height:56px;padding:0 4%;display:flex;align-items:center;gap:20px;background:var(--c-surface);border-bottom:1px solid color-mix(in srgb,var(--c-ink) 13%,transparent);font-size:12px}.mock-logo{font-size:16px;font-weight:950;letter-spacing:.055em;white-space:nowrap}.mock-logo i{font-style:normal;color:var(--c-primary)}.mock-nav-links{margin-left:auto;display:flex;gap:17px;color:var(--c-ink);opacity:.7}.mock-nav-action{background:var(--c-primary);color:#fff!important;padding:8px 12px;border-radius:var(--c-radius);font-weight:800;white-space:nowrap}.mock-hero{min-height:345px;display:grid;grid-template-columns:1fr 47%;overflow:hidden}.mock-copy{padding:7% 6%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.mock-kicker{font-size:10px;letter-spacing:.18em;font-weight:900;text-transform:uppercase;color:var(--c-primary)}.mock h1{font-size:clamp(30px,3.6vw,54px);line-height:1.02;letter-spacing:-.06em;margin:15px 0}.mock-copy p{font-size:13px;line-height:1.5;color:var(--c-ink);opacity:.72;max-width:410px;margin:0 0 19px}.mock-cta{display:inline-block;background:var(--c-primary);color:white!important;padding:12px 16px;border-radius:var(--c-radius);font-weight:850;font-size:11px}.mock-hero-image{position:relative;min-height:280px;background:var(--c-primary)}.mock-hero-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.mock-hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,var(--c-primary));opacity:.17}.mock-trust{display:flex;justify-content:space-between;gap:10px;padding:11px 4%;font-size:10px;font-weight:800;background:var(--c-primary);color:#fff}.mock-products{padding:25px 4% 34px}.mock-products-head{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:13px}.mock-products h2{font-size:23px;letter-spacing:-.04em;margin:0}.mock-products-head span{font-size:10px;color:var(--c-primary);font-weight:850}.mock-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mock-product{background:var(--c-surface);border-radius:var(--c-radius);overflow:hidden;border:1px solid color-mix(in srgb,var(--c-ink) 12%,transparent)}.mock-product .art{height:105px;background:var(--c-accent);position:relative;overflow:hidden}.mock-product .art img{width:100%;height:100%;object-fit:cover}.mock-product .art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--c-primary),transparent);opacity:.09}.mock-product .info{padding:11px}.mock-product strong{display:block;font-size:12px;line-height:1.2}.mock-product small{font-size:10px;color:var(--c-primary);font-weight:750}.mock-footer{background:var(--c-ink);color:#fff;padding:18px 4%;font-size:10px;display:flex;justify-content:space-between}.mock[data-layout=editorial] .mock-hero{grid-template-columns:46% 1fr}.mock[data-layout=editorial] .mock-hero-image{grid-column:1;grid-row:1}.mock[data-layout=editorial] .mock-copy{grid-column:2;grid-row:1}.mock[data-layout=editorial] .mock-copy{padding:9%}.mock[data-layout=immersive] .mock-hero{display:block;position:relative;min-height:390px}.mock[data-layout=immersive] .mock-hero-image{position:absolute;inset:0}.mock[data-layout=immersive] .mock-hero-image:after{background:linear-gradient(90deg,#071b36dc,#071b3644);opacity:1}.mock[data-layout=immersive] .mock-copy{position:relative;z-index:1;min-height:390px;width:70%;color:#fff}.mock[data-layout=immersive] .mock-kicker,.mock[data-layout=immersive] .mock-copy p{color:#fff;opacity:.95}.mock[data-layout=immersive] .mock-cta{background:var(--c-accent);color:#13253e!important}.mock[data-layout=minimal] .mock-hero{grid-template-columns:1fr 38%;min-height:350px}.mock[data-layout=minimal] .mock-copy{padding:10%}.mock[data-layout=minimal] .mock-hero-image{margin:25px;border-radius:var(--c-radius);min-height:300px;overflow:hidden}.mock[data-layout=minimal] .mock-trust{background:var(--c-surface);color:var(--c-ink);border-block:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent)}
.preview-frame.mobile .mock-nav-links{display:none}.preview-frame.mobile .mock-nav{height:47px}.preview-frame.mobile .mock-nav-action{font-size:9px;padding:6px}.preview-frame.mobile .mock-hero,.preview-frame.mobile .mock[data-layout=editorial] .mock-hero,.preview-frame.mobile .mock[data-layout=minimal] .mock-hero{display:flex;flex-direction:column}.preview-frame.mobile .mock-copy{padding:28px 21px}.preview-frame.mobile .mock h1{font-size:35px}.preview-frame.mobile .mock-hero-image,.preview-frame.mobile .mock[data-layout=minimal] .mock-hero-image{height:210px;min-height:210px;margin:0;border-radius:0}.preview-frame.mobile .mock[data-layout=editorial] .mock-hero-image{order:2}.preview-frame.mobile .mock[data-layout=immersive] .mock-hero{display:block}.preview-frame.mobile .mock[data-layout=immersive] .mock-hero-image{height:auto}.preview-frame.mobile .mock[data-layout=immersive] .mock-copy{min-height:350px;width:100%;padding:35px 22px}.preview-frame.mobile .mock-trust{font-size:8px;flex-wrap:wrap}.preview-frame.mobile .mock-product-grid{gap:5px}.preview-frame.mobile .mock-product .art{height:68px}.preview-frame.mobile .mock-product .info{padding:6px}.preview-frame.mobile .mock-product strong{font-size:9px}.preview-frame.mobile .mock-products h2{font-size:18px}
dialog{border:0;border-radius:18px;padding:0;width:min(1100px,96vw);max-height:92vh;box-shadow:0 35px 90px #061a36aa}dialog::backdrop{background:#071c38b8}.dialog-top{padding:17px 21px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.dialog-top h2{margin:2px 0 0}.dialog-top button{border:0;background:none;font-size:28px}.compare-content{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;overflow:auto}.compare-pane h3{margin:0 0 9px}.compare-pane .mock{font-size:12px}.compare-pane .mock h1{font-size:31px}.compare-pane .mock-hero{min-height:260px}.compare-pane .mock-hero-image{min-height:260px}.compare-pane .mock-products{padding:15px}.compare-pane .mock-product .art{height:75px}
@media(max-width:1300px){.workspace{grid-template-columns:280px 1fr}.direction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.shell{display:block}.rail{position:static;height:auto;display:block;padding:12px 18px}.brand{padding:3px}.rail-section,.rail-foot{display:none}.topbar{position:static;padding:0 18px}.workspace{grid-template-columns:1fr}.left-column{grid-template-columns:1fr 1fr}.intro-stat{display:none}main{padding:20px 18px 65px}}@media(max-width:650px){.left-column{grid-template-columns:1fr}.intro h1{font-size:38px}.direction-grid,.library-grid{grid-template-columns:1fr 1fr}.preview-frame{padding:9px;min-height:0}.preview-caption{display:block}.mock-nav-links{display:none}.mock-nav-action{font-size:9px}.mock-hero,.mock[data-layout=editorial] .mock-hero,.mock[data-layout=minimal] .mock-hero{display:flex;flex-direction:column}.mock-copy{padding:25px}.mock h1{font-size:35px}.mock-hero-image,.mock[data-layout=minimal] .mock-hero-image{min-height:190px;height:190px;margin:0;border-radius:0}.mock[data-layout=immersive] .mock-hero{display:block}.mock[data-layout=immersive] .mock-hero-image{height:auto}.mock[data-layout=immersive] .mock-copy{min-height:330px;width:100%}.mock-trust{font-size:8px;flex-wrap:wrap}.mock-product-grid{gap:5px}.mock-product .art{height:70px}.mock-product .info{padding:6px}.mock-product strong{font-size:9px}.mock-products h2{font-size:18px}.compare-content{grid-template-columns:1fr}.section-head{align-items:start}.top-status{display:none}}
.mock-search{display:flex;align-items:center;gap:6px;background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-ink) 24%,transparent);border-radius:var(--c-radius);padding:5px 5px 5px 12px;width:min(100%,395px);box-shadow:0 4px 14px #001c3116;color:var(--c-ink);font-size:10px}.mock-search span{flex:1;opacity:.6}.mock-search b{background:var(--c-primary);color:white;padding:9px 11px;border-radius:var(--c-radius);white-space:nowrap}.mock[data-layout=immersive] .mock-search{background:#fff}