/* --------------------------------------------------------------------------- * Circuit Craftworks — Replace Your Subscriptions * SITE SKIN. Presentation only. * * This layer makes the configurator read as part of circuitcraftworks.com. It * changes no markup, no engine behaviour and no logo colour. It: * 1. remaps the configurator's own design tokens to the site's light system * (the "Option A Light" palette used by every frozen page body); * 2. repairs the typography — the frozen sheet asks for "Space Grotesk", * which the site does not load, so every heading and metric was falling * back to the browser's default serif; * 3. replaces the packaged cover-scaled board illustration with the site's * own PCB field system (backplane gradient, copper pours, edge rails and * vector board fields in the site's copper hierarchy); * 4. rebuilds panels, cards, buttons and labels in the site's construction. * * The frozen production/replace-subscriptions.css and .js are untouched. * ------------------------------------------------------------------------- */ /* ========================================================================= * 1. SITE DESIGN TOKENS * Values taken verbatim from the light system the site's page bodies use. * ====================================================================== */ #cc-subscription-configurator{ --cc-site-bg:#e3eaf0; --cc-site-bg-deep:#d5e0ea; --cc-site-panel:#ffffff; --cc-site-panel-2:#f7fbfd; --cc-site-text:#09192f; --cc-site-muted:#465d70; --cc-site-muted-2:#71869a; --cc-site-blue:#0a8fd4; --cc-site-blue-2:#0f7fbe; --cc-site-cyan:#10bce8; --cc-site-green:#138b74; --cc-site-amber:#a76b10; --cc-site-kicker:#0b6fa9; --cc-site-mono:#56758d; --cc-site-line-soft:rgba(12,120,176,.10); --cc-site-line:rgba(12,120,176,.16); --cc-site-line-lit:rgba(10,143,212,.44); --cc-site-edge-soft:rgba(18,96,147,.16); --cc-site-edge-mid:rgba(12,128,190,.24); --cc-site-edge-active:rgba(10,143,212,.48); --cc-site-lift-0:0 7px 18px rgba(39,78,104,.07); --cc-site-lift-1:0 14px 34px rgba(39,78,104,.10); --cc-site-lift-2:0 22px 52px rgba(39,78,104,.13); --cc-site-surf-1:linear-gradient(155deg,#ffffff,#fbfdfe); --cc-site-surf-2:linear-gradient(158deg,#f7fafc,#f4fafd); --cc-site-surf-3:linear-gradient(158deg,#f7fbfd,#e5eef4); --cc-site-r-sm:10px; --cc-site-r:16px; --cc-site-r-lg:22px; /* --- remap every token the frozen sheet actually paints with --- */ --bg:var(--cc-site-bg); --panel:var(--cc-site-panel); --panel-2:var(--cc-site-panel-2); --ink:var(--cc-site-text); --muted:var(--cc-site-muted); --line:var(--cc-site-line); --trace:var(--cc-site-blue); --trace-soft:rgba(10,143,212,.15); --trace-bright:var(--cc-site-cyan); --danger:#c0392f; --ok:var(--cc-site-green); --warning:var(--cc-site-amber); --shadow:var(--cc-site-lift-1); --radius:var(--cc-site-r); --cc-board:var(--cc-site-bg); --cc-board-deep:var(--cc-site-bg-deep); --cc-metal:var(--cc-site-panel); --cc-metal-2:var(--cc-site-panel-2); --cc-ink:var(--cc-site-text); --cc-line:var(--cc-site-line); --cc-soft-line:rgba(12,120,176,.13); --cc-cyan:var(--cc-site-blue); --cc-cyan-dark:var(--cc-site-blue-2); --cc-cyan-hot:var(--cc-site-cyan); --cc-shadow:var(--cc-site-lift-2); --cc-inset:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.3); --cc-board-art:none; --cc-board-fallback:none; --cc10-board:var(--cc-site-bg); --cc10-board-2:#dce6ee; --cc10-board-edge:#cfdce7; --cc10-deck:#ffffff; --cc10-deck-hi:#ffffff; --cc10-deck-low:var(--cc-site-panel-2); --cc10-panel:#ffffff; --cc10-panel-cool:var(--cc-site-panel-2); --cc10-panel-data:#f2f8fb; --cc10-panel-steel:#eef5f9; --cc10-text:var(--cc-site-text); --cc10-muted:var(--cc-site-muted); --cc10-hair:var(--cc-site-line); --cc10-hair-strong:rgba(10,143,212,.30); --cc10-trace:var(--cc-site-blue); --cc10-trace-2:var(--cc-site-blue-2); --cc10-trace-3:#4fa8dc; --cc10-trace-4:#a9d3ea; --cc10-cyan:var(--cc-site-cyan); --cc10-header-1:#0e4266; --cc10-header-2:#0b3a5b; --cc10-header-3:#082c47; --cc11-electric:var(--cc-site-cyan); --cc11-electric-hot:#e8faff; --cc11-route:var(--cc-site-blue); --cc11-success:var(--cc-site-green); --cc12-blue:var(--cc-site-blue); --cc12-ink:var(--cc-site-text); --cc12-line:rgba(12,120,176,.18); --cc12-muted:var(--cc-site-muted); color:var(--cc-site-text); position:relative; z-index:0; isolation:isolate; } /* The board is painted on an opaque base, exactly as #ccgx-page is on every other page. Without it the warm body colour (#F5F1EA) showed through the translucent backplane gradients and gave this page a blue cast no other page has. rgb(223,232,241) is the site's own computed value. */ #cc-subscription-configurator.cc-subscription-configurator{ background:#dfe8f1 !important; } /* ========================================================================= * 2. TYPOGRAPHY — the site loads Sora + Inter. "Space Grotesk" is not loaded, * so every rule asking for it was rendering in the default serif. * ====================================================================== */ #cc-subscription-configurator .brand-mark{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .brand-copy strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .hero h1,#cc-subscription-configurator .section-heading h2,#cc-subscription-configurator .modal h2{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .how-it-works b{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .how-it-works h2{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .bundle-card strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .panel-title h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .flying-logo{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .latest-replacement strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .server-face strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .summary-grid strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .question-icon{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .question-heading h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .recommendation-panel h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .build-review-grid h3,#cc-subscription-configurator .build-spec-card h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .logo-fallback{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .drawer-service-identity h2{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .savings-heading h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .money-reclaimed strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .savings-metrics strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .assembly-topline strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .assembly-core span{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .assembly-module strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .bp-node b{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .options-heading h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .options-status strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .option-icon{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .option-card h4{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .final-server-screen strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .ownership-card h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .ownership-callout strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .request-band strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .cancel-stamp{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .flight-badge{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .discovery-copy h2{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .guide-header h2{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .guide-step-copy h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .guide-choice-icon{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .request-modal-header h2{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .request-build-strip strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .request-success-mark{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .request-success h3{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator .request-success-id strong{font-family:Sora,"Space Grotesk",Inter,system-ui,sans-serif;} #cc-subscription-configurator{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} #cc-subscription-configurator .hero h1, #cc-subscription-configurator .section-heading h2, #cc-subscription-configurator .how-it-works h2{ letter-spacing:-.035em; color:var(--cc-site-text); text-shadow:0 2px 0 rgba(255,255,255,.9),0 5px 18px rgba(10,143,212,.10); } #cc-subscription-configurator .hero h1 span{color:var(--cc-site-blue);} #cc-subscription-configurator .eyebrow, #cc-subscription-configurator .section-heading .eyebrow{color:var(--cc-site-kicker);} #cc-subscription-configurator .eyebrow:before{background:var(--cc-site-blue);} /* ========================================================================= * 3. BOARD SUBSTRATE * The board itself is installed by integration/cc-rs-board.css, which is the * site's own backplane + PCB-field stylesheet reproduced declaration for * declaration. Nothing about the board is defined here. All that remains is * switching off the packaged build's own background layers so the site board * is the only one on the page. * ====================================================================== */ /* The packaged cover-scaled illustration and its fixed grid. */ #cc-subscription-configurator .pcb-bg{display:none !important;} /* The two gutter SVGs the package draws with preserveAspectRatio="none" - stretched artwork, which is the one thing the site's board never does. */ #cc-subscription-configurator .cc10-pcb{display:none !important;} /* The packaged 44px utility grid and its repeating edge-finger combs. */ #cc-subscription-configurator .cc10-assembly{background:transparent !important;} #cc-subscription-configurator .cc10-assembly:before, #cc-subscription-configurator .cc10-assembly:after{display:none !important;} /* The deck is transparent so the board reads through it exactly as the board reads through a section on every other page. Its own 52px grid and edge rails go with it - the backplane supplies the rails now. */ #cc-subscription-configurator .cc10-deck{background:none !important;} #cc-subscription-configurator .cc10-deck:before, #cc-subscription-configurator .cc10-deck:after{display:none !important;} /* The fields are laid into the backplane as full-width bands proportioned like the site's sections, so preserveAspectRatio="slice" shows the same portion of the artwork the rest of the site shows. Every field property - position, width, height, opacity - still comes from the site's own stylesheet. */ #cc-subscription-configurator .ccgx-board-stack{ position:absolute;inset:0; display:flex;flex-direction:column; } #cc-subscription-configurator .ccgx-board-band{ position:relative;flex:1 1 0;min-height:0; } /* The reading deck matches the site's content measure: 1425px, the same width .ccgx-wrap resolves to on every other page. */ #cc-subscription-configurator .cc10-deck{ width:min(1781px,calc(100vw - 26px)) !important; margin-inline:auto !important; } /* Tablet and phone keep a real side gutter rather than running the copy to the edge; the same correction is applied site-wide in site-compatibility.css. */ @media (max-width:1120px){ #cc-subscription-configurator .cc10-deck{width:calc(100% - 72px) !important;} } @media (max-width:700px){ #cc-subscription-configurator .cc10-deck{width:calc(100% - 32px) !important;} } #cc-subscription-configurator .cc10-deck>section{position:relative;z-index:2;} /* The packaged sheet paints its illustration into the hero card; that surface becomes plain site material. */ #cc-subscription-configurator .hero-board{ background:var(--cc-site-surf-1); border:1px solid var(--cc-site-line); box-shadow:var(--cc-site-lift-2),inset 0 0 0 8px rgba(255,255,255,.5); } #cc-subscription-configurator .configurator-wrap{background:transparent;border-color:transparent;} #cc-subscription-configurator .configurator-wrap:before, #cc-subscription-configurator .configurator-wrap:after{display:none !important;} /* ========================================================================= * 4. MATERIAL — panels, cards, controls in the site's construction * ====================================================================== */ /* Card and panel material, measured from the site's own components: card - rgba(255,255,255,.91), 1px rgba(6,146,216,.14), 13px, 0 8px 22px rgba(28,61,84,.043) panel - 1px rgba(12,128,190,.24), 16px, inset 0 1px 0 #fff + 0 18px 40px rgba(29,79,111,.08) */ #cc-subscription-configurator .service-card, #cc-subscription-configurator .replacement-card, #cc-subscription-configurator .bundle-card, #cc-subscription-configurator .how-it-works article, #cc-subscription-configurator .summary-grid>div, #cc-subscription-configurator .metric, #cc-subscription-configurator .request-build-strip>div{ background:rgba(255,255,255,.91); border:1px solid rgba(6,146,216,.14); border-radius:13px; box-shadow:0 8px 22px rgba(28,61,84,.043); } #cc-subscription-configurator .service-card:hover{ border-color:rgba(12,128,190,.24); box-shadow:0 12px 28px rgba(28,61,84,.07); } #cc-subscription-configurator .service-card.selected{ border-color:rgba(10,143,212,.48); box-shadow:0 0 0 1px rgba(10,143,212,.48),0 12px 28px rgba(28,61,84,.07); } #cc-subscription-configurator .panel, #cc-subscription-configurator .savings-panel, #cc-subscription-configurator .system-blueprint, #cc-subscription-configurator .summary-section, #cc-subscription-configurator .question-stack, #cc-subscription-configurator .request-modal, #cc-subscription-configurator .service-drawer{ background:linear-gradient(155deg,#ffffff,#fbfdfe); border:1px solid rgba(12,128,190,.24); border-radius:16px; box-shadow:inset 0 1px 0 #ffffff,0 18px 40px rgba(29,79,111,.08); } #cc-subscription-configurator .btn{border-radius:var(--cc-site-r-sm);} #cc-subscription-configurator .btn-primary{ background:var(--cc-site-blue);color:#fff; box-shadow:0 10px 24px rgba(10,143,212,.24); } #cc-subscription-configurator .btn-primary:hover{ background:var(--cc-site-blue-2); box-shadow:0 13px 28px rgba(10,143,212,.30); } #cc-subscription-configurator .btn-secondary{ background:rgba(255,255,255,.86); border:1px solid var(--cc-site-line); color:var(--cc-site-text); } #cc-subscription-configurator .btn-secondary:hover{ background:#fff;border-color:var(--cc-site-edge-mid); } #cc-subscription-configurator a{color:var(--cc-site-blue);} #cc-subscription-configurator ::selection{background:rgba(10,143,212,.18);} #cc-subscription-configurator :focus-visible{outline:2px solid var(--cc-site-blue);outline-offset:2px;} /* ========================================================================= * 5. HEADINGS AND SECTION FURNITURE * ====================================================================== */ /* Hero display line: the frozen sheet clips a gradient to the text, so the heading text-shadow must not apply to it or it washes the gradient out. */ #cc-subscription-configurator .hero h1 span{ background-image:linear-gradient(100deg,#0a8fd4,#0f7fbe 52%,#10bce8) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; text-shadow:none !important; } /* The site keeps no white panel behind its section copy - legibility comes from a white lift under the type itself. Same declaration, applied to the copy that sits directly on the board here. */ #cc-subscription-configurator .hero h1, #cc-subscription-configurator .hero-lead, #cc-subscription-configurator .hero-disclosure, #cc-subscription-configurator .section-heading h2, #cc-subscription-configurator .section-heading p, #cc-subscription-configurator .section-heading .eyebrow, #cc-subscription-configurator .how-it-works h2, #cc-subscription-configurator .how-it-works p, #cc-subscription-configurator .slots-remaining, #cc-subscription-configurator .bundle-section>.shell>p{ text-shadow:0 2px 0 rgba(255,255,255,.9),0 5px 18px rgba(10,143,212,.10); } #cc-subscription-configurator .hero h1 span{text-shadow:none !important;} /* Section rhythm and kickers, in the site's construction. */ #cc-subscription-configurator .section-heading .eyebrow, #cc-subscription-configurator .eyebrow{ font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.15em; } #cc-subscription-configurator .how-it-works article{ background:var(--cc-site-surf-1); border:1px solid var(--cc-site-line); border-radius:var(--cc-site-r-sm); box-shadow:var(--cc-site-lift-0); } #cc-subscription-configurator .how-it-works b{color:var(--cc-site-kicker);} /* Data surfaces read as inset chassis panels, as they do elsewhere on the site. */ #cc-subscription-configurator .metric, #cc-subscription-configurator .summary-grid>div, #cc-subscription-configurator .request-build-strip>div{ background:rgba(250,253,255,.9); } #cc-subscription-configurator .savings-panel, #cc-subscription-configurator .question-stack, #cc-subscription-configurator .system-blueprint{ background:var(--cc-site-panel); } /* ========================================================================= * 6. SECTION LABELS — the site introduces a section with a bordered * monospace kicker pill. The hero eyebrow adopts the same component. * ====================================================================== */ #cc-subscription-configurator .hero .eyebrow{ display:inline-flex;align-items:center;gap:10px; padding:9px 16px; border:1px solid var(--cc-site-line); border-radius:999px; background:rgba(255,255,255,.78); box-shadow:var(--cc-site-lift-0); color:var(--cc-site-kicker); font-size:11px; } #cc-subscription-configurator .hero .eyebrow:before{ width:7px;height:7px;border-radius:50%; background:var(--cc-site-blue); box-shadow:0 0 0 4px rgba(10,143,212,.14); } /* ========================================================================= * 8. NO OPAQUE SLABS OVER THE BOARD * * Four elements in the packaged build paint a flat pale-blue fill * (rgb(234,243,247)) straight over the substrate, so the board vanished in * those bands and the page showed a blue cast across part of its height that * no other page has. On the rest of the site a section never fills; only cards * and panels carry a surface, and they are near-white and slightly * translucent so the copper still reads through. * ====================================================================== */ #cc-subscription-configurator .how-it-works, #cc-subscription-configurator .bundle-grid, #cc-subscription-configurator .bundle-section, #cc-subscription-configurator .system-options, #cc-subscription-configurator .requirements-section, #cc-subscription-configurator .summary-section{ background:transparent !important; background-image:none !important; } /* Real panels keep a surface, in the site's white panel material. */ #cc-subscription-configurator .disposal-panel.panel, #cc-subscription-configurator .picker-panel.panel, #cc-subscription-configurator .private-panel.panel{ background:linear-gradient(155deg,#ffffff,#fbfdfe) !important; border:1px solid rgba(12,128,190,.24); border-radius:16px; box-shadow:inset 0 1px 0 #ffffff,0 18px 40px rgba(29,79,111,.08); } #cc-subscription-configurator .discovery-band{ border:1px solid rgba(12,128,190,.24); border-radius:16px; box-shadow:inset 0 1px 0 #ffffff,0 18px 40px rgba(29,79,111,.08); } #cc-subscription-configurator .config-bottom-bar{ background:rgba(255,255,255,.93) !important; border:1px solid rgba(6,146,216,.14); border-radius:13px; } /* The packaged edge masks fade the board out at the gutters; the site's board runs to the edge of the page. */ #cc-subscription-configurator .cc10-edge-mask{display:none !important;} /* ========================================================================= * 9. LEGIBILITY * * The packaged build sets a great deal of real interface text between 6px and * 12px - body copy at 9px, select options and field labels at 9px, filter * chips at 8px, buttons at 12px. Measured on the live page, 30 distinct * selectors rendered text under 13px. * * Every rule below is generated from the frozen stylesheet itself: each * selector that declares a sub-13px size is restated here at a readable one, * so the type scale keeps its original hierarchy and nothing else about those * rules changes. Board silkscreen (SVG ) is untouched - it is artwork. * ====================================================================== */ #cc-subscription-configurator{font-size:16px;} #cc-subscription-configurator .brand-copy small{font-size:14px;} #cc-subscription-configurator .eyebrow{font-size:14px;} #cc-subscription-configurator .hero-disclosure{font-size:15px;} #cc-subscription-configurator .hero-service .mini-logo{font-size:14px;} #cc-subscription-configurator .hero-service b{font-size:15px;} #cc-subscription-configurator .hero-server span{font-size:15px;} #cc-subscription-configurator .bundle-card span{font-size:15px;} #cc-subscription-configurator .bundle-card em{font-size:13px;} #cc-subscription-configurator .config-progress span{font-size:13.5px;} #cc-subscription-configurator .config-progress button{font-size:14px;} #cc-subscription-configurator .panel-title span{font-size:13px;} #cc-subscription-configurator .panel-title>b{font-size:13.5px;} #cc-subscription-configurator .category-chip{font-size:13.5px;} #cc-subscription-configurator .service-card.selected:after{font-size:12px;} #cc-subscription-configurator .service-logo{font-size:13px;} #cc-subscription-configurator .service-card strong{font-size:14px;} #cc-subscription-configurator .service-card small{font-size:13px;} #cc-subscription-configurator .bay-top{font-size:12px;} #cc-subscription-configurator .bay-idle p{font-size:13.5px;} #cc-subscription-configurator .bay-active b{font-size:15px;} #cc-subscription-configurator .bay-active span{font-size:13px;} #cc-subscription-configurator .bay-status{font-size:13px;} #cc-subscription-configurator .latest-replacement span{font-size:12px;} #cc-subscription-configurator .latest-replacement small{font-size:13.5px;} #cc-subscription-configurator .server-face span{font-size:12px;} #cc-subscription-configurator .server-caption{font-size:13px;} #cc-subscription-configurator .replacement-icon{font-size:13px;} #cc-subscription-configurator .replacement-card strong{font-size:15px;} #cc-subscription-configurator .replacement-card small{font-size:13px;} #cc-subscription-configurator .replacement-count{font-size:12px;} #cc-subscription-configurator .replacement-services{font-size:13px;} #cc-subscription-configurator .private-empty p{font-size:13.5px;} #cc-subscription-configurator .config-bottom-bar span{font-size:13px;} #cc-subscription-configurator .summary-grid span{font-size:13.5px;} #cc-subscription-configurator .summary-item b{font-size:15px;} #cc-subscription-configurator .summary-item span{font-size:15px;} #cc-subscription-configurator .summary-item em{font-size:13px;} #cc-subscription-configurator .toast{font-size:14px;} #cc-subscription-configurator .requirements-toolbar span{font-size:13px;} #cc-subscription-configurator .status-chip{font-size:13px;} #cc-subscription-configurator .question-icon{font-size:14px;} #cc-subscription-configurator .question-heading b{font-size:12px;} #cc-subscription-configurator .question-copy>p{font-size:14px;} #cc-subscription-configurator .field-block>span{font-size:13.5px;} #cc-subscription-configurator .field-block>small{font-size:13px;} #cc-subscription-configurator .field-block select,#cc-subscription-configurator .field-block input{font-size:14px;} #cc-subscription-configurator .hardware-badge{font-size:13px;} #cc-subscription-configurator .recommendation-panel>p{font-size:14px;} #cc-subscription-configurator .recommendation-metrics span{font-size:12px;} #cc-subscription-configurator .recommendation-metrics strong{font-size:14px;} #cc-subscription-configurator .load-bars label{font-size:13px;} #cc-subscription-configurator .recommendation-alert p{font-size:13px;} #cc-subscription-configurator .build-spec-card dt{font-size:13.5px;} #cc-subscription-configurator .build-spec-card dd{font-size:13.5px;} #cc-subscription-configurator .payload-toggle{font-size:13px;} #cc-subscription-configurator .payload-preview{font-size:13px;} #cc-subscription-configurator .service-select strong{font-size:14px;} #cc-subscription-configurator .service-select small{font-size:13px;} #cc-subscription-configurator .service-info{font-size:14px;} #cc-subscription-configurator .logo-fallback{font-size:14px;} #cc-subscription-configurator .drawer-service-identity span{font-size:13px;} #cc-subscription-configurator .drawer-classification{font-size:12px;} #cc-subscription-configurator .mapping-side span{font-size:13px;} #cc-subscription-configurator .drawer-section>span{font-size:12px;} #cc-subscription-configurator .drawer-section p{font-size:14px;} #cc-subscription-configurator .drawer-section li{font-size:13.5px;} #cc-subscription-configurator .service-card.selected:after{font-size:11.5px;} #cc-subscription-configurator .savings-heading p{font-size:13.5px;} #cc-subscription-configurator .money-reclaimed>span{font-size:12px;} #cc-subscription-configurator .money-reclaimed strong small{font-size:14px;} #cc-subscription-configurator .savings-metrics span{font-size:12px;} #cc-subscription-configurator .savings-empty{font-size:13.5px;} #cc-subscription-configurator .savings-service strong{font-size:13.5px;} #cc-subscription-configurator .savings-service small{font-size:12px;} #cc-subscription-configurator .compact-money span{font-size:13.5px;} #cc-subscription-configurator .compact-money input{font-size:13.5px;} #cc-subscription-configurator .finance-mode{font-size:13px;} #cc-subscription-configurator .row-annual{font-size:13px;} #cc-subscription-configurator .savings-disclosure{font-size:12px;} #cc-subscription-configurator .drawer-finance-grid label>small{font-size:12px;} #cc-subscription-configurator .money-input b{font-size:13.5px;} #cc-subscription-configurator .money-input input,#cc-subscription-configurator .drawer-finance-grid select{font-size:13.5px;} #cc-subscription-configurator .drawer-finance>p{font-size:13px;} #cc-subscription-configurator .assembly-topline span{font-size:11.5px;} #cc-subscription-configurator .assembly-topline strong{font-size:13.5px;} #cc-subscription-configurator .assembly-topline>b{font-size:12px;} #cc-subscription-configurator .assembly-core b{font-size:11px;} #cc-subscription-configurator .assembly-module span{font-size:11px;} #cc-subscription-configurator .assembly-module strong{font-size:14px;} #cc-subscription-configurator .assembly-module small{font-size:11px;} #cc-subscription-configurator .blueprint-head span{font-size:11.5px;} #cc-subscription-configurator .blueprint-head b{font-size:12px;} #cc-subscription-configurator .bp-node span{font-size:11px;} #cc-subscription-configurator .bp-node b{font-size:13px;} #cc-subscription-configurator .options-heading p{font-size:13.5px;} #cc-subscription-configurator .options-status span{font-size:11.5px;} #cc-subscription-configurator .option-icon{font-size:13px;} #cc-subscription-configurator .option-card>span{font-size:11.5px;} #cc-subscription-configurator .option-card p{font-size:13px;} #cc-subscription-configurator .option-card>small{font-size:11.5px;} #cc-subscription-configurator .tier-strip i{font-size:11px;} #cc-subscription-configurator .option-select{font-size:13px;} #cc-subscription-configurator .segmented-option button{font-size:12px;} #cc-subscription-configurator .segmented-option button small{font-size:11.5px;} #cc-subscription-configurator .toggle-card>span:last-child b{font-size:13px;} #cc-subscription-configurator .toggle-card>span:last-child small{font-size:11.5px;} #cc-subscription-configurator .protection-summary span{font-size:11.5px;} #cc-subscription-configurator .protection-summary strong{font-size:13px;} #cc-subscription-configurator .final-server-top span{font-size:11.5px;} #cc-subscription-configurator .final-server-top b{font-size:11.5px;} #cc-subscription-configurator .final-server-screen span{font-size:13px;} #cc-subscription-configurator .final-server-specs span{font-size:11.5px;} #cc-subscription-configurator .ownership-card li{font-size:13.5px;} #cc-subscription-configurator .ownership-callout span{font-size:11.5px;} #cc-subscription-configurator .review-heading span{font-size:11.5px;} #cc-subscription-configurator .request-band span{font-size:11.5px;} #cc-subscription-configurator .request-band small{font-size:12px;} #cc-subscription-configurator .processing-cost{font-size:11.5px;} #cc-subscription-configurator .bay-output-port{font-size:11px;} #cc-subscription-configurator .replacement-card.just-added:after{font-size:11px;} #cc-subscription-configurator .discovery-action small{font-size:13px;} #cc-subscription-configurator .guide-progress span{font-size:11.5px;} #cc-subscription-configurator .guide-progress strong{font-size:13.5px;} #cc-subscription-configurator .guide-step-copy p{font-size:15px;} #cc-subscription-configurator .guide-choice strong,#cc-subscription-configurator .guide-goal strong,#cc-subscription-configurator .guide-result strong{font-size:14px;} #cc-subscription-configurator .guide-choice small,#cc-subscription-configurator .guide-goal small,#cc-subscription-configurator .guide-result small{font-size:13px;} #cc-subscription-configurator .guide-result>i{font-size:11.5px;} #cc-subscription-configurator .guide-empty{font-size:14px;} #cc-subscription-configurator .guide-footer-status strong{font-size:13.5px;} #cc-subscription-configurator .guide-footer-status small{font-size:12px;} #cc-subscription-configurator .resume-bar strong{font-size:14px;} #cc-subscription-configurator .resume-bar small{font-size:13px;} #cc-subscription-configurator .resume-actions button{font-size:13px;} #cc-subscription-configurator .request-modal-header p{font-size:14px;} #cc-subscription-configurator .request-build-strip span{font-size:11.5px;} #cc-subscription-configurator .request-fields label>span{font-size:13px;} #cc-subscription-configurator .request-fields input,#cc-subscription-configurator .request-fields select,#cc-subscription-configurator .request-fields textarea{font-size:15px;} #cc-subscription-configurator .request-consent span{font-size:13.5px;} #cc-subscription-configurator .request-validation{font-size:13.5px;} #cc-subscription-configurator .request-form-footer strong{font-size:13.5px;} #cc-subscription-configurator .request-form-footer small{font-size:12px;} #cc-subscription-configurator .request-success p{font-size:14px;} #cc-subscription-configurator .request-success-id span{font-size:11.5px;} #cc-subscription-configurator .brand-copy small{font-size:12px;} #cc-subscription-configurator .eyebrow{font-size:13px;} #cc-subscription-configurator .btn{font-size:15px;} #cc-subscription-configurator .hero-server:before{font-size:11.5px;} #cc-subscription-configurator .hero-server span{font-size:13.5px;} #cc-subscription-configurator .how-it-works p{font-size:15px;} #cc-subscription-configurator .bundle-card em{font-size:11.5px;} #cc-subscription-configurator .panel-title span{font-size:11.5px;} #cc-subscription-configurator .panel-title>b{font-size:12px;} #cc-subscription-configurator .search-box input{font-size:15px;} #cc-subscription-configurator .category-chip{font-size:12px;} #cc-subscription-configurator .bay-top{font-size:11.5px;} #cc-subscription-configurator .brand-copy small{font-size:12px;} #cc-subscription-configurator .cc10-pcb .silk-text{font-size:12px;} #cc-subscription-configurator .cc10-pcb .cc7-port-label{font-size:11.5px;} #cc-subscription-configurator .eyebrow{font-size:13.5px;} #cc-subscription-configurator .hero-disclosure{font-size:14px;} #cc-subscription-configurator .btn{font-size:15px;} #cc-subscription-configurator .hero-board:before{font-size:12px;} #cc-subscription-configurator .hero-service b{font-size:14px;} #cc-subscription-configurator .how-it-works b{font-size:13.5px;} #cc-subscription-configurator .bundle-card span{font-size:13px;} #cc-subscription-configurator .bundle-card small{font-size:15px;} #cc-subscription-configurator .discovery-band:before{font-size:12px;} #cc-subscription-configurator .panel-title span{font-size:12px;} #cc-subscription-configurator .panel-title>b{font-size:12px;} #cc-subscription-configurator .load-bars-title{font-size:12px;} #cc-subscription-configurator .recommendation-metrics>div:first-child strong{font-size:15px;} #cc-subscription-configurator .recommendation-alert:before{font-size:12px;} #cc-subscription-configurator .segmented-option button.suggested:not(.active):after{font-size:11px;} #cc-subscription-configurator .ownership-callout small{font-size:13.5px;} #cc-subscription-configurator .review-note p{font-size:15px;} #cc-subscription-configurator .next-step-rail b{font-size:13.5px;} #cc-subscription-configurator .next-step-rail span{font-size:12px;} #cc-subscription-configurator .next-step-rail p{font-size:15px;} @media(max-width:760px){ #cc-subscription-configurator .hero-service b{font-size:13px;} #cc-subscription-configurator .hero-server strong{font-size:13.5px;} #cc-subscription-configurator .hero-server span{font-size:13px;} #cc-subscription-configurator .request-build-strip strong{font-size:15px;} #cc-subscription-configurator .brand-copy small{font-size:11.5px;} #cc-subscription-configurator .header-cta{font-size:13px;} #cc-subscription-configurator .hero-service b{font-size:13px;} #cc-subscription-configurator .hero-server span{font-size:12px;} #cc-subscription-configurator .config-progress strong{font-size:14px;} #cc-subscription-configurator .config-progress button{font-size:12px;} #cc-subscription-configurator .config-bottom-bar span{font-size:11.5px;} #cc-subscription-configurator .config-bottom-bar strong{font-size:14px;} } @media(max-width:1100px){ #cc-subscription-configurator .brand-copy small{font-size:11.5px;} } @media(max-width:620px){ #cc-subscription-configurator .header-cta{font-size:13px;} #cc-subscription-configurator .hero-service b{font-size:13px;} #cc-subscription-configurator .hero-server span{font-size:12px;} #cc-subscription-configurator .hero-server strong{font-size:15px;} #cc-subscription-configurator .hero-server span{font-size:13px;} #cc-subscription-configurator .savings-disclosure{font-size:14px;} } /* Final floor: the handful the generated pass could not reach, because their size comes from a rule the frozen sheet applies elsewhere. */ #cc-subscription-configurator .btn{font-size:15px !important;} #cc-subscription-configurator .category-chip{font-size:13px !important;} #cc-subscription-configurator .hero-disclosure{font-size:13.5px !important;} #cc-subscription-configurator .savings-disclosure, #cc-subscription-configurator .replacement-count, #cc-subscription-configurator .drawer-classification, #cc-subscription-configurator .load-bars-title, #cc-subscription-configurator .processing-cost{font-size:13px !important;} #cc-subscription-configurator small{font-size:12.5px !important;} #cc-subscription-configurator button{font-size:14px !important;} #cc-subscription-configurator .request-fields input, #cc-subscription-configurator .request-fields select, #cc-subscription-configurator .request-fields textarea, #cc-subscription-configurator .request-consent span{font-size:14.5px !important;} /* Remaining small-caps labels and micro-copy. */ #cc-subscription-configurator .section-heading>span, #cc-subscription-configurator .hero-copy>span, #cc-subscription-configurator .discovery-copy>span, #cc-subscription-configurator .review-heading>span, #cc-subscription-configurator .eyebrow{font-size:12.5px !important;} #cc-subscription-configurator .bundle-card>span, #cc-subscription-configurator .assembly-module>span, #cc-subscription-configurator .bp-node>span, #cc-subscription-configurator .option-card>span, #cc-subscription-configurator .drawer-section>span, #cc-subscription-configurator .final-server-specs>span, #cc-subscription-configurator .bay-output-port>span, #cc-subscription-configurator .latest-replacement>span{font-size:12px !important;} #cc-subscription-configurator .drawer-finance small, #cc-subscription-configurator #drawerSavingsHint{font-size:12.5px !important;} #cc-subscription-configurator i, #cc-subscription-configurator em{font-size:12px !important;} /* ========================================================================= * 10. PRICING CONTROLS (pricing handoff 2026-09-03, §1 / §2) * ====================================================================== */ #cc-subscription-configurator .savings-service small.savings-estimate{ display:block;margin-top:3px;font-size:12px !important;color:var(--cc-site-muted-2);line-height:1.45; white-space:normal;overflow:visible;text-overflow:clip; } #cc-subscription-configurator .savings-actual{ margin-top:4px;padding:3px 10px;font-size:12px !important;font-weight:700; border:1px solid var(--cc-site-line);border-radius:999px; background:rgba(255,255,255,.9);color:var(--cc-site-blue);cursor:pointer; } #cc-subscription-configurator .savings-actual:hover{ border-color:var(--cc-site-edge-mid);background:#fff; } #cc-subscription-configurator .savings-dedupe{ display:inline-block;margin-top:4px;padding:3px 9px; font-style:normal;font-size:11.5px !important;font-weight:700; border-radius:999px;background:rgba(10,143,212,.10);color:var(--cc-site-kicker); } #cc-subscription-configurator .savings-seats{ display:inline-flex;align-items:center;gap:6px;margin-top:4px;margin-left:6px; padding:2px 8px 2px 10px;border:1px solid var(--cc-site-line);border-radius:999px;background:rgba(255,255,255,.9); } #cc-subscription-configurator .savings-seats span{ font-size:11px !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-site-muted-2); } #cc-subscription-configurator .savings-seats input{ width:46px;padding:3px 4px;font-size:13px !important;text-align:center; border:0;background:transparent;color:var(--cc-site-text); } #cc-subscription-configurator .savings-dedupe--split{ background:rgba(233,141,45,.14);color:#8a5210; } #cc-subscription-configurator .savings-split{ margin-top:4px;margin-left:6px;padding:3px 10px;font-size:11.5px !important;font-weight:700; border:1px solid var(--cc-site-line);border-radius:999px; background:rgba(255,255,255,.9);color:var(--cc-site-blue);cursor:pointer; } #cc-subscription-configurator .savings-split:hover{ border-color:var(--cc-site-edge-mid);background:#fff; } /* ========================================================================= * 11. HARDWARE / ELECTRICITY / OWNERSHIP (hardware-ROI handoff 2026-09-04) * Reuses the site tokens so the new blocks read as the same product. * ====================================================================== */ #cc-subscription-configurator .savings-cancel{ display:flex;align-items:flex-start;gap:7px;margin-top:6px; font-size:12.5px !important;line-height:1.4;color:var(--cc-site-muted-2);cursor:pointer; } #cc-subscription-configurator .savings-cancel.on{color:var(--cc-site-text);} #cc-subscription-configurator .savings-cancel input{ width:15px;height:15px;margin:1px 0 0;accent-color:var(--cc-site-blue);flex:0 0 auto; } #cc-subscription-configurator .savings-cancel span{white-space:normal;} #cc-subscription-configurator .ccrs-pricecopy{ margin-top:20px;padding:18px 20px;border:1px solid var(--cc-site-line); border-radius:var(--cc-site-r);background:rgba(255,255,255,.72); } #cc-subscription-configurator .ccrs-pricecopy h3{margin:0 0 8px;font-size:19px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-pricecopy p{margin:0 0 8px;font-size:14.5px;line-height:1.62;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-ownership{margin-top:26px;} #cc-subscription-configurator .ccrs-own-inner{ border:1px solid #b9cbd0;border-radius:22px; background:linear-gradient(145deg,#f7fafb,#e4edef); padding:26px;box-shadow:0 18px 44px rgba(28,52,60,.08); } #cc-subscription-configurator .ccrs-eyebrow{ margin:0 0 4px;font-family:var(--cc-site-mono,inherit);font-size:11.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--cc-site-kicker); } #cc-subscription-configurator .ccrs-own-head h2{margin:0 0 10px;font-size:27px;line-height:1.2;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-own-head p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--cc-site-muted);max-width:74ch;} #cc-subscription-configurator .ccrs-own-support{font-weight:700;color:var(--cc-site-text) !important;} #cc-subscription-configurator .ccrs-fulfillment{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:20px 0 6px; } #cc-subscription-configurator .ccrs-fulfil{ position:relative;display:flex;flex-direction:column;gap:6px;text-align:left; white-space:normal;overflow-wrap:anywhere;height:100%; padding:18px 18px 16px;border:1px solid var(--cc-site-line);border-radius:16px; background:rgba(255,255,255,.9);cursor:pointer;color:var(--cc-site-text); transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; } #cc-subscription-configurator .ccrs-fulfil:hover{border-color:var(--cc-site-edge-mid);transform:translateY(-1px);} #cc-subscription-configurator .ccrs-fulfil.active{ border-color:var(--cc-site-blue);box-shadow:0 0 0 2px rgba(10,143,212,.18),0 14px 30px rgba(24,58,66,.10); } #cc-subscription-configurator .ccrs-fulfil strong{font-size:16px;line-height:1.3;} #cc-subscription-configurator .ccrs-fulfil span{font-size:13.5px;line-height:1.55;color:var(--cc-site-muted);white-space:normal;display:block;} #cc-subscription-configurator .ccrs-fulfil strong, #cc-subscription-configurator .ccrs-fulfil em{white-space:normal;display:block;} #cc-subscription-configurator .ccrs-fulfil-status{margin-top:auto;padding-top:6px;} #cc-subscription-configurator .ccrs-fulfil-badge{ align-self:flex-start;padding:3px 10px;border-radius:999px;font-size:11px !important;font-weight:700; letter-spacing:.08em;text-transform:uppercase;background:rgba(10,143,212,.12);color:var(--cc-site-blue); } #cc-subscription-configurator .ccrs-fulfil-status{ font-style:normal;font-size:12px;font-weight:700;color:#8a5210; } #cc-subscription-configurator .ccrs-own-hardware, #cc-subscription-configurator .ccrs-minspec{ margin-top:16px;padding:18px;border:1px dashed var(--cc-site-edge-mid);border-radius:16px;background:rgba(255,255,255,.7); } #cc-subscription-configurator .ccrs-own-hardware h3, #cc-subscription-configurator .ccrs-minspec h3{margin:0 0 12px;font-size:17px;} #cc-subscription-configurator .ccrs-own-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;} #cc-subscription-configurator .ccrs-own-grid label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-own-grid input{ padding:9px 11px;border:1px solid var(--cc-site-line);border-radius:10px;background:#fff; font-size:14px;font-weight:400;color:var(--cc-site-text); } #cc-subscription-configurator .ccrs-own-wide{grid-column:1/-1;} #cc-subscription-configurator .ccrs-note{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-reccard{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr);gap:20px;margin-top:20px; padding:20px;border:1px solid var(--cc-site-line-lit);border-radius:18px;background:rgba(255,255,255,.92); } #cc-subscription-configurator .ccrs-reccard h3{margin:0 0 8px;font-size:21px;} #cc-subscription-configurator .ccrs-reccard-note{margin:0 0 10px;font-size:14px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-sizedfor{margin:0 0 10px;padding-left:18px;} #cc-subscription-configurator .ccrs-sizedfor li{font-size:14px;line-height:1.6;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-freshness{margin:0;font-size:12.5px;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-reccard-power{ border-left:1px solid var(--cc-site-line);padding-left:20px; } #cc-subscription-configurator .ccrs-power-figure{margin:0;display:flex;align-items:baseline;gap:3px;} #cc-subscription-configurator .ccrs-power-figure strong{font-size:30px;line-height:1.1;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-power-figure span{font-size:14px;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-power-sub{margin:2px 0 6px;font-size:14px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-power-basis{margin:0 0 12px;font-size:12.5px;color:var(--cc-site-muted-2);line-height:1.5;} #cc-subscription-configurator .ccrs-rate{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-rate-input{display:inline-flex;align-items:center;gap:6px;} #cc-subscription-configurator .ccrs-rate-input input{ width:96px;padding:8px 10px;border:1px solid var(--cc-site-line);border-radius:10px;background:#fff; font-size:15px;font-weight:700;color:var(--cc-site-text); } #cc-subscription-configurator .ccrs-rate-input span{font-size:13px;font-weight:700;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-compare{margin-top:22px;} #cc-subscription-configurator .ccrs-compare h2{margin:0 0 14px;font-size:24px;} #cc-subscription-configurator .ccrs-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;} #cc-subscription-configurator .ccrs-compare-col{ padding:18px;border:1px solid var(--cc-site-line);border-radius:16px;background:rgba(255,255,255,.9); } #cc-subscription-configurator .ccrs-compare-col.result{ border-color:var(--cc-site-blue);box-shadow:0 0 0 2px rgba(10,143,212,.14); background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(226,243,251,.92)); } #cc-subscription-configurator .ccrs-compare-col h4{margin:0 0 10px;font-size:15px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-big{margin:0;font-size:27px;line-height:1.15;font-weight:700;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-sub{margin:2px 0 8px;font-size:15px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-longterm{ display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr);gap:22px;margin-top:24px; padding-top:20px;border-top:1px solid var(--cc-site-line); } #cc-subscription-configurator .ccrs-longterm h2{margin:0 0 10px;font-size:24px;} #cc-subscription-configurator .ccrs-longterm h3{margin:16px 0 8px;font-size:19px;} #cc-subscription-configurator .ccrs-longterm p{margin:0 0 9px;font-size:14.5px;line-height:1.62;color:var(--cc-site-muted);max-width:70ch;} #cc-subscription-configurator .ccrs-costtable{margin-bottom:14px;} #cc-subscription-configurator .ccrs-costtable h4{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-site-kicker);} #cc-subscription-configurator .ccrs-costtable dl{margin:0;} #cc-subscription-configurator .ccrs-costtable dl div{ display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--cc-site-line-soft); } #cc-subscription-configurator .ccrs-costtable dl div.total{border-bottom:0;border-top:1px solid var(--cc-site-line);margin-top:4px;font-weight:700;} #cc-subscription-configurator .ccrs-costtable dt{margin:0;font-size:14px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-costtable dd{margin:0;font-size:14px;font-weight:700;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-roi{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px; padding:16px;border:1px solid var(--cc-site-line-lit);border-radius:16px;background:rgba(255,255,255,.9); } #cc-subscription-configurator .ccrs-growth{ margin-top:20px;padding:14px 18px;border:1px solid var(--cc-site-line);border-radius:14px;background:rgba(255,255,255,.72); } #cc-subscription-configurator .ccrs-growth summary{font-size:16px;font-weight:700;cursor:pointer;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-growth p{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-growth-control{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-growth-control span{display:flex;align-items:center;gap:10px;} #cc-subscription-configurator .ccrs-growth-control input[type=range]{flex:1 1 220px;max-width:320px;accent-color:var(--cc-site-blue);} #cc-subscription-configurator .ccrs-growth-control output{font-size:15px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-growth-quick{ margin-top:10px;padding:6px 14px;border:1px solid var(--cc-site-line);border-radius:999px; background:#fff;font-size:13px;font-weight:700;color:var(--cc-site-blue);cursor:pointer; } #cc-subscription-configurator .ccrs-growth-result{font-weight:700;color:var(--cc-site-text) !important;} #cc-subscription-configurator .ccrs-duetoday{ margin-top:22px;padding:18px 20px;border:1px solid var(--cc-site-line-lit);border-radius:16px;background:rgba(255,255,255,.92); } #cc-subscription-configurator .ccrs-duetoday h3{margin:0 0 10px;font-size:19px;} #cc-subscription-configurator .ccrs-duetoday dl{margin:0;} #cc-subscription-configurator .ccrs-duetoday dl div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--cc-site-line-soft);} #cc-subscription-configurator .ccrs-duetoday dl div.total{border-bottom:0;border-top:1px solid var(--cc-site-line);margin-top:4px;font-size:16px;font-weight:700;} #cc-subscription-configurator .ccrs-duetoday dt{margin:0;font-size:14px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-duetoday dd{margin:0;font-size:14px;font-weight:700;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-disclaimer{margin-top:20px;padding-top:14px;border-top:1px solid var(--cc-site-line);} #cc-subscription-configurator .ccrs-disclaimer p{margin:0 0 7px;font-size:12.5px;line-height:1.6;color:var(--cc-site-muted-2);max-width:88ch;} @media (max-width:900px){ #cc-subscription-configurator .ccrs-reccard{grid-template-columns:1fr;} #cc-subscription-configurator .ccrs-reccard-power{border-left:0;border-top:1px solid var(--cc-site-line);padding-left:0;padding-top:16px;} #cc-subscription-configurator .ccrs-longterm{grid-template-columns:1fr;} } @media (max-width:640px){ #cc-subscription-configurator .ccrs-own-inner{padding:18px;} #cc-subscription-configurator .ccrs-own-head h2{font-size:22px;} #cc-subscription-configurator .ccrs-compare h2, #cc-subscription-configurator .ccrs-longterm h2{font-size:20px;} #cc-subscription-configurator .ccrs-big{font-size:23px;} } #cc-subscription-configurator .ccrs-support{ margin-top:18px;padding:16px 18px;border:1px solid var(--cc-site-line);border-radius:14px;background:rgba(255,255,255,.82); display:flex;flex-direction:column;gap:6px;max-width:520px; } #cc-subscription-configurator .ccrs-support label{ font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-site-kicker); } #cc-subscription-configurator .ccrs-support select{ padding:9px 11px;border:1px solid var(--cc-site-line);border-radius:10px;background:#fff; font-size:14px;color:var(--cc-site-text); } /* ========================================================================= * 12. BOARD EDGE — remove the pale inset frame (2026-09-04) * * production/replace-subscriptions.css draws the deck with * inset 0 0 0 7px rgba(255,255,255,.58) (4px under 620px) * inset 0 0 0 8px rgba(119,159,183,.12) * which paints a near-white ring just inside the deck edge. Because the deck * sits a few pixels in from the viewport, that ring reads as a pale gutter * framing the whole page — the substrate stops, a white strip appears, then * the board resumes. Nothing else on the site does this. * * The outer drop shadow and the hairline board edge stay; only the pale inset * ring goes, so the backplane and its traces run continuously to the edge. * ====================================================================== */ #cc-subscription-configurator .cc10-deck{ box-shadow: 0 30px 70px rgba(52,96,125,.14), 0 0 0 1px rgba(93,132,157,.28) !important; } @media (max-width:620px){ #cc-subscription-configurator .cc10-deck{ box-shadow: 0 16px 36px rgba(52,96,125,.12), 0 0 0 1px rgba(93,132,157,.25) !important; } } /* Funnel pass: stage-two block, unknown-hardware prompt, compare intro. */ #cc-subscription-configurator .ccrs-stagetwo{border-style:dashed;background:rgba(255,255,255,.72);} #cc-subscription-configurator .ccrs-stagetwo-kicker{ margin:-6px 0 10px;font-size:12px !important;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--cc-site-kicker); } #cc-subscription-configurator .ccrs-compare-intro{margin:-6px 0 14px;font-size:14.5px;color:var(--cc-site-muted);max-width:70ch;} #cc-subscription-configurator .ccrs-own-unknown{ margin-top:12px;padding:12px 14px;border:1px solid rgba(233,141,45,.45);border-radius:12px;background:rgba(233,141,45,.08); } #cc-subscription-configurator .ccrs-own-unknown p{margin:0 0 8px;font-size:13.5px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-own-switch, #cc-subscription-configurator .ccrs-own-review{ margin-right:8px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer; border:1px solid var(--cc-site-line);background:#fff;color:var(--cc-site-blue); } #cc-subscription-configurator .ccrs-own-switch{background:var(--cc-site-blue);border-color:var(--cc-site-blue);color:#fff;} #cc-subscription-configurator .ccrs-own-grid select{ padding:9px 11px;border:1px solid var(--cc-site-line);border-radius:10px;background:#fff; font-size:14px;font-weight:400;color:var(--cc-site-text); } /* Cancellation intent is a checkbox; savings confidence is a status, not a choice. */ #cc-subscription-configurator .savings-status{ display:flex;flex-direction:column;gap:2px;font-size:12.5px !important;font-weight:700;line-height:1.35; } #cc-subscription-configurator .savings-status small{ font-size:11.5px !important;font-weight:400;color:var(--cc-site-muted-2);white-space:normal; } #cc-subscription-configurator .savings-status.likely{color:#1f7a4d;} #cc-subscription-configurator .savings-status.potential{color:#8a5210;} #cc-subscription-configurator .savings-status.keep, #cc-subscription-configurator .savings-status.none{color:var(--cc-site-muted-2);font-weight:400;} /* Hardware expectation: planning range and the representative example. */ #cc-subscription-configurator .ccrs-hwexpect{ margin-top:20px;padding:20px;border:1px solid var(--cc-site-line-lit);border-radius:18px;background:rgba(255,255,255,.92); } #cc-subscription-configurator .ccrs-hwexpect h3{margin:0 0 6px;font-size:21px;} #cc-subscription-configurator .ccrs-hwexpect > p{margin:0 0 14px;font-size:14.5px;color:var(--cc-site-muted);max-width:70ch;} #cc-subscription-configurator .ccrs-hwexpect-grid{ display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.85fr);gap:22px;align-items:start; } #cc-subscription-configurator .ccrs-hwexpect dl{margin:10px 0 0;} #cc-subscription-configurator .ccrs-hwexpect dl div{ display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--cc-site-line-soft); } #cc-subscription-configurator .ccrs-hwexpect dt{margin:0;font-size:14px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-hwexpect dd{margin:0;font-size:14px;font-weight:700;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-nosurprise{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(10,143,212,.08);} #cc-subscription-configurator .ccrs-hwpolicy{margin-top:14px;padding-top:12px;border-top:1px solid var(--cc-site-line-soft);} #cc-subscription-configurator .ccrs-hwexample{ margin:0;padding:14px;border:1px solid var(--cc-site-line);border-radius:14px;background:rgba(247,251,253,.9);text-align:center; } #cc-subscription-configurator .ccrs-hwexample img{ display:block;width:100%;max-width:230px;height:auto;margin:8px auto 10px;border-radius:10px;background:#fff; } #cc-subscription-configurator .ccrs-hwexample figcaption{display:flex;flex-direction:column;gap:4px;text-align:left;} #cc-subscription-configurator .ccrs-hwexample strong{font-size:14.5px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-hwexample span{font-size:12.5px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-hwexample a{font-size:13px;font-weight:700;color:var(--cc-site-blue);} #cc-subscription-configurator .ccrs-hwexample small{font-size:11.5px !important;color:var(--cc-site-muted-2);line-height:1.5;} @media (max-width:900px){ #cc-subscription-configurator .ccrs-hwexpect-grid{grid-template-columns:1fr;} } /* ========================================================================= * 13. SELECTION ARCHITECTURE (conversion reset 2026-09-04) * Two columns, a literal bin, and an explicit source → app mapping. * ====================================================================== */ #cc-subscription-configurator .configurator.ccrs-two-col{ grid-template-columns:minmax(0,57fr) minmax(0,43fr) !important; } @media (max-width:900px){ #cc-subscription-configurator .configurator.ccrs-two-col{grid-template-columns:1fr !important;} } #cc-subscription-configurator .ccrs-bin{ margin-top:16px;padding:16px 16px 14px;border:1px solid var(--cc-site-line);border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(233,241,247,.85));text-align:center; } #cc-subscription-configurator .ccrs-bin-label{ margin:0;font-size:12.5px !important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-site-kicker); } #cc-subscription-configurator .ccrs-bin-help{margin:4px 0 10px;font-size:12.5px;color:var(--cc-site-muted-2);} /* the can itself: steel body, dark navy rim, subtle PCB ribs */ #cc-subscription-configurator .ccrs-can{ position:relative;width:104px;height:96px;margin:0 auto 10px; } #cc-subscription-configurator .ccrs-can-lid{ position:absolute;left:2px;right:2px;top:0;height:14px;border-radius:7px 7px 4px 4px; background:linear-gradient(180deg,#2c3f52,#1b2b3a);box-shadow:0 2px 0 rgba(255,255,255,.18) inset; } #cc-subscription-configurator .ccrs-can-lid::after{ content:"";position:absolute;left:50%;top:-7px;width:34px;height:8px;transform:translateX(-50%); border-radius:4px;background:linear-gradient(180deg,#33485d,#22323f); } #cc-subscription-configurator .ccrs-can-body{ position:absolute;left:10px;right:10px;top:18px;bottom:0; border-radius:4px 4px 12px 12px;overflow:hidden; background:linear-gradient(180deg,#dfe8ef,#b9c8d5 60%,#93a6b6); box-shadow:inset 0 0 0 1px rgba(29,52,70,.35), 0 10px 18px rgba(24,58,66,.16); clip-path:polygon(4% 0,96% 0,88% 100%,12% 100%); display:flex;justify-content:center;gap:14px;padding-top:10px; } #cc-subscription-configurator .ccrs-can-rib{ width:2px;height:100%;background:linear-gradient(180deg,rgba(29,52,70,.20),rgba(29,52,70,.05)); } #cc-subscription-configurator .ccrs-can.hit .ccrs-can-lid{animation:ccrsCanLid .34s ease;} #cc-subscription-configurator .ccrs-can.hit .ccrs-can-body{animation:ccrsCanBody .34s ease;} @keyframes ccrsCanLid{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-6px) rotate(-7deg)}100%{transform:translateY(0) rotate(0)}} @keyframes ccrsCanBody{0%{transform:scaleY(1)}45%{transform:scaleY(.97)}100%{transform:scaleY(1)}} #cc-subscription-configurator .ccrs-bin-stack{ display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:34px; } #cc-subscription-configurator .ccrs-bin-token{ display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px; border-radius:8px;background:#fff;border:1px solid var(--cc-site-line);overflow:hidden; } #cc-subscription-configurator .ccrs-bin-token img, #cc-subscription-configurator .ccrs-bin-logo{max-width:22px;max-height:22px;} #cc-subscription-configurator .ccrs-bin-more{ display:inline-flex;align-items:center;padding:0 9px;height:32px;border-radius:999px; background:rgba(10,143,212,.12);color:var(--cc-site-blue);font-size:12px;font-weight:700; } #cc-subscription-configurator .ccrs-bin-count{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--cc-site-muted-2);} .ccrs-drop-token{ position:fixed;z-index:9999;width:44px;height:44px;border-radius:10px;background:#fff; border:1px solid rgba(29,52,70,.25);box-shadow:0 10px 24px rgba(24,58,66,.22); display:flex;align-items:center;justify-content:center;pointer-events:none; } .ccrs-drop-token img{max-width:30px;max-height:30px;} #cc-subscription-configurator .ccrs-mapping{display:flex;flex-direction:column;gap:12px;margin:10px 0 14px;} #cc-subscription-configurator .ccrs-map-empty{margin:0;font-size:13.5px;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-map-group{ padding:12px;border:1px solid var(--cc-site-line);border-radius:14px;background:rgba(255,255,255,.9); } #cc-subscription-configurator .ccrs-map-sources{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;} #cc-subscription-configurator .ccrs-map-src{ display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px; border:1px solid var(--cc-site-line-soft);background:#fff;font-size:11.5px;color:var(--cc-site-muted); } #cc-subscription-configurator .ccrs-map-src em{font-style:normal;} #cc-subscription-configurator .ccrs-map-srclogo{max-width:16px;max-height:16px;} #cc-subscription-configurator .ccrs-map-arrow{margin:6px 0;text-align:center;font-size:18px;color:var(--cc-site-blue);} #cc-subscription-configurator .ccrs-map-dest{display:flex;align-items:center;gap:10px;} #cc-subscription-configurator .ccrs-map-destlogo{width:34px;height:34px;object-fit:contain;flex:0 0 auto;} #cc-subscription-configurator .ccrs-map-destmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;} #cc-subscription-configurator .ccrs-map-destmain strong{font-size:15px;} #cc-subscription-configurator .ccrs-map-destmain small{font-size:12.5px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-map-count{font-size:12px;font-weight:700;color:var(--cc-site-kicker);} #cc-subscription-configurator .ccrs-map-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;} #cc-subscription-configurator .ccrs-map-badge{ padding:2px 8px;border-radius:999px;background:rgba(31,122,77,.10);color:#1f7a4d; font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; } #cc-subscription-configurator .ccrs-map-info{ flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--cc-site-line); background:#fff;color:var(--cc-site-blue);font-weight:700;font-size:13px;cursor:pointer; } #cc-subscription-configurator .ccrs-map-info:hover{border-color:var(--cc-site-blue);} #cc-subscription-configurator .ccrs-appinfo{ position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center; background:rgba(12,28,40,.55);padding:20px; } #cc-subscription-configurator .ccrs-appinfo-panel{ position:relative;max-width:520px;width:100%;max-height:82vh;overflow:auto; padding:22px;border-radius:18px;background:#fff;box-shadow:0 30px 70px rgba(12,28,40,.35); } #cc-subscription-configurator .ccrs-appinfo-close{ position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%; border:1px solid var(--cc-site-line);background:#fff;font-size:17px;line-height:1;cursor:pointer;color:var(--cc-site-muted); } #cc-subscription-configurator .ccrs-appinfo h3{margin:0;font-size:21px;} #cc-subscription-configurator .ccrs-appinfo-head p{margin:2px 0 12px;font-size:14px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-appinfo h4{ margin:14px 0 6px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-site-kicker); } #cc-subscription-configurator .ccrs-appinfo ul{margin:0;padding-left:18px;} #cc-subscription-configurator .ccrs-appinfo li, #cc-subscription-configurator .ccrs-appinfo p{font-size:14px;line-height:1.55;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-appinfo-know{ margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(233,141,45,.10); } @media (prefers-reduced-motion:reduce){ .ccrs-drop-token{display:none !important;} #cc-subscription-configurator .ccrs-can.hit .ccrs-can-lid, #cc-subscription-configurator .ccrs-can.hit .ccrs-can-body{animation:none;} } /* The mapping list replaces the old destination cards; one card per app only. */ #cc-subscription-configurator #replacementStack, #cc-subscription-configurator #privateEmpty{display:none !important;} /* Bin lid opens for the drop. */ #cc-subscription-configurator .ccrs-can-lid{transform-origin:14% 90%;transition:transform .22s cubic-bezier(.3,.05,.2,1);} #cc-subscription-configurator .ccrs-can.open .ccrs-can-lid{transform:translate(-10px,-16px) rotate(-38deg);} #cc-subscription-configurator .ccrs-can.hit .ccrs-can-lid{animation:ccrsCanLid .38s ease;} /* A new mapping group arrives rather than just appearing. */ @keyframes ccrsMapEnter{ 0%{opacity:0;transform:translateY(-10px) scale(.98)} 60%{opacity:1;transform:translateY(2px) scale(1)} 100%{opacity:1;transform:none} } @keyframes ccrsMapArrow{ 0%{opacity:.2;transform:translateY(-6px)} 50%{opacity:1;transform:translateY(3px)} 100%{opacity:.85;transform:none} } #cc-subscription-configurator .ccrs-map-enter{animation:ccrsMapEnter .48s cubic-bezier(.32,.05,.25,1);} #cc-subscription-configurator .ccrs-map-enter .ccrs-map-arrow{animation:ccrsMapArrow .7s ease .1s;} #cc-subscription-configurator .ccrs-map-enter .ccrs-map-src{animation:ccrsMapEnter .5s ease both;} #cc-subscription-configurator .ccrs-map-enter .ccrs-map-destlogo{animation:ccrsMapEnter .6s ease .18s both;} /* The info affordance sits with the app identity, not off in the margin. */ #cc-subscription-configurator .ccrs-map-destmain strong{display:flex;align-items:center;gap:8px;} #cc-subscription-configurator .ccrs-map-info{ width:22px;height:22px;line-height:1;border-radius:50%;flex:0 0 auto; border:1px solid var(--cc-site-blue);background:rgba(10,143,212,.10);color:var(--cc-site-blue); font-weight:700;font-size:12px;font-style:italic;cursor:pointer; } #cc-subscription-configurator .ccrs-map-info:hover{background:var(--cc-site-blue);color:#fff;} /* Price-history badge and summary. */ #cc-subscription-configurator .ccrs-hist-badge{ align-self:center;padding:3px 9px;border-radius:999px;border:1px solid rgba(184,74,42,.35); background:rgba(214,105,64,.10);color:#a2401f;font-size:11.5px !important;font-weight:700;cursor:pointer;white-space:nowrap; } #cc-subscription-configurator .ccrs-hist-badge:hover{background:rgba(214,105,64,.18);} #cc-subscription-configurator .ccrs-history{ margin-top:18px;padding:18px 20px;border:1px solid var(--cc-site-line);border-radius:16px;background:rgba(255,255,255,.8); } #cc-subscription-configurator .ccrs-history h3{margin:0 0 6px;font-size:20px;} #cc-subscription-configurator .ccrs-history > p{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--cc-site-muted);max-width:72ch;} #cc-subscription-configurator .ccrs-hist-group{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--cc-site-line-soft);} #cc-subscription-configurator .ccrs-hist-line{margin:2px 0 4px;font-size:13.5px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-hist-figures{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;font-size:15px;} #cc-subscription-configurator .ccrs-hist-figures b{color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-hist-figures em{font-style:normal;font-weight:700;color:#a2401f;} #cc-subscription-configurator .ccrs-hist-proj{margin-top:12px;} #cc-subscription-configurator .ccrs-hist-projgrid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:8px 0; } #cc-subscription-configurator .ccrs-hist-projgrid div{ padding:12px;border:1px solid var(--cc-site-line);border-radius:12px;background:#fff; } #cc-subscription-configurator .ccrs-hist-projgrid span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-hist-projgrid strong{font-size:21px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-hist-cumulative{margin:6px 0 0;font-size:14px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-hist-own{ margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(31,122,77,.08);font-size:14px;line-height:1.6;color:var(--cc-site-text); } #cc-subscription-configurator .ccrs-growth h3{margin:0 0 6px;font-size:19px;} #cc-subscription-configurator .ccrs-growth-result{font-size:15px;line-height:1.6;color:var(--cc-site-text) !important;} /* ========================================================================= * 14. RENDERING COST (2026-09-04) * * content-visibility:auto on the PCB bands was measured against the live page * and DID change what the board paints near the viewport edge, so it was * reverted. The optimisations kept in this pass are the ones that provably * cannot alter a pixel: fewer requests, fewer bytes, fewer REST calls. * ====================================================================== */ /* ========================================================================= * 15. SYSTEM CHOOSER + FUTURE-PRICE TILE (2026-09-04) * ====================================================================== */ #cc-subscription-configurator .ccrs-chooser{ margin-top:18px;padding:20px;border:1px solid var(--cc-site-line-lit);border-radius:18px;background:rgba(255,255,255,.92); } #cc-subscription-configurator .ccrs-chooser-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;} #cc-subscription-configurator .ccrs-chooser-head h3{margin:0 0 6px;font-size:21px;} #cc-subscription-configurator .ccrs-chooser-head p{margin:0;font-size:14.5px;line-height:1.6;color:var(--cc-site-muted);max-width:62ch;} #cc-subscription-configurator .ccrs-chooser-all{ flex:0 0 auto;padding:8px 16px;border-radius:999px;border:1px solid var(--cc-site-line); background:#fff;color:var(--cc-site-blue);font-size:13px;font-weight:700;cursor:pointer; } #cc-subscription-configurator .ccrs-chooser-all:hover{border-color:var(--cc-site-blue);} #cc-subscription-configurator .ccrs-chooser-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0 4px; } #cc-subscription-configurator .ccrs-opt{ position:relative;display:flex;flex-direction:column;gap:10px;padding:16px; border:1px solid var(--cc-site-line);border-radius:16px;background:rgba(250,253,255,.95); } #cc-subscription-configurator .ccrs-opt.selected{border-color:var(--cc-site-blue);box-shadow:0 0 0 2px rgba(10,143,212,.18);} #cc-subscription-configurator .ccrs-opt.oos{opacity:.72;} #cc-subscription-configurator .ccrs-opt-badge{ position:absolute;top:12px;right:12px;padding:3px 10px;border-radius:999px; background:rgba(10,143,212,.12);color:var(--cc-site-blue);font-size:10.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } #cc-subscription-configurator .ccrs-opt-media{display:flex;align-items:center;justify-content:center;min-height:120px;} #cc-subscription-configurator .ccrs-opt-media img{max-width:170px;max-height:130px;height:auto;} #cc-subscription-configurator .ccrs-opt-main{display:flex;flex-direction:column;gap:6px;} #cc-subscription-configurator .ccrs-opt-main strong{font-size:15.5px;} #cc-subscription-configurator .ccrs-opt-main small{font-size:12.5px;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-opt-verdict{ align-self:flex-start;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700; } #cc-subscription-configurator .ccrs-opt-verdict.match{background:rgba(31,122,77,.12);color:#1f7a4d;} #cc-subscription-configurator .ccrs-opt-verdict.headroom{background:rgba(10,143,212,.12);color:var(--cc-site-blue);} #cc-subscription-configurator .ccrs-opt-verdict.over{background:rgba(233,141,45,.14);color:#8a5210;} #cc-subscription-configurator .ccrs-opt-verdict.under{background:rgba(184,74,42,.12);color:#a2401f;} #cc-subscription-configurator .ccrs-opt-why{margin:0;font-size:12.5px;line-height:1.5;color:var(--cc-site-muted);} #cc-subscription-configurator .ccrs-opt-notes{margin:0;padding-left:16px;} #cc-subscription-configurator .ccrs-opt-notes li{font-size:12px;color:var(--cc-site-muted-2);line-height:1.45;} #cc-subscription-configurator .ccrs-opt-price{margin:2px 0 0;font-size:14px;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-opt-price b{font-size:19px;color:var(--cc-site-text);} #cc-subscription-configurator .ccrs-opt-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;} #cc-subscription-configurator .ccrs-opt-choose{ padding:8px 16px;border-radius:999px;border:1px solid var(--cc-site-blue); background:var(--cc-site-blue);color:#fff;font-size:13px;font-weight:700;cursor:pointer; } #cc-subscription-configurator .ccrs-opt.selected .ccrs-opt-choose{background:#1f7a4d;border-color:#1f7a4d;} #cc-subscription-configurator .ccrs-opt-actions a{font-size:12.5px;font-weight:700;color:var(--cc-site-blue);} #cc-subscription-configurator #ccrsFutureMetric small{ display:block;margin-top:4px;font-size:11.5px !important;line-height:1.45;color:var(--cc-site-muted-2); } #cc-subscription-configurator .ccrs-opt-blocked{ font-size:12.5px;font-weight:700;color:var(--cc-site-muted-2); } /* ========================================================================= * 16. STEPPED FLOW (2026-09-04) * ====================================================================== */ #cc-subscription-configurator .ccrs-step-hidden{display:none !important;} #cc-subscription-configurator .ccrs-rail{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px; margin:18px auto 6px;padding:14px;border:1px solid var(--cc-site-line);border-radius:16px; background:rgba(255,255,255,.86); } #cc-subscription-configurator .ccrs-rail-step{ display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:12px;text-align:left; border:1px solid transparent;background:transparent;cursor:pointer;color:var(--cc-site-muted); } #cc-subscription-configurator .ccrs-rail-step:hover{background:rgba(10,143,212,.06);} #cc-subscription-configurator .ccrs-rail-step.active{ border-color:var(--cc-site-blue);background:rgba(10,143,212,.10);color:var(--cc-site-text); } #cc-subscription-configurator .ccrs-rail-n{ flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(29,52,70,.10);color:var(--cc-site-muted-2);font-size:13px;font-weight:700; } #cc-subscription-configurator .ccrs-rail-step.active .ccrs-rail-n{background:var(--cc-site-blue);color:#fff;} #cc-subscription-configurator .ccrs-rail-main{display:flex;flex-direction:column;gap:2px;min-width:0;} #cc-subscription-configurator .ccrs-rail-main strong{font-size:14px;line-height:1.25;} #cc-subscription-configurator .ccrs-rail-main small{font-size:11.5px;line-height:1.4;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-stepbar{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin:16px auto 26px;padding:14px 18px;border:1px solid var(--cc-site-line);border-radius:14px; background:rgba(255,255,255,.9); } #cc-subscription-configurator .ccrs-step-label{font-size:13px;font-weight:700;color:var(--cc-site-muted-2);} #cc-subscription-configurator .ccrs-step-back, #cc-subscription-configurator .ccrs-step-next{ padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer; } #cc-subscription-configurator .ccrs-step-back{ border:1px solid var(--cc-site-line);background:#fff;color:var(--cc-site-muted); } #cc-subscription-configurator .ccrs-step-back:disabled{opacity:.45;cursor:default;} #cc-subscription-configurator .ccrs-step-next{ border:1px solid var(--cc-site-blue);background:var(--cc-site-blue);color:#fff; } #cc-subscription-configurator .ccrs-step-next:hover{filter:brightness(1.05);} @media (max-width:640px){ #cc-subscription-configurator .ccrs-rail{grid-template-columns:1fr 1fr;padding:10px;} #cc-subscription-configurator .ccrs-rail-main small{display:none;} #cc-subscription-configurator .ccrs-stepbar{position:sticky;bottom:10px;z-index:40;box-shadow:0 12px 30px rgba(24,58,66,.18);} }