/* ce-net.com on the design cell. Every page links https://design.ce-net.com/v1/tokens.css and then this file.
   This file holds NO colour or font values: only var() references to the design cell and the ce-design touches
   (Michroma display headings, mono uppercase labels, glass cards with amber corner ticks, the light/dark switch).
   Change the look in the design-tokens repo (`design-tokens publish`), never here.
   Leif 2026-10-25 19:29 CST: "all the design for ce-net is all design in one cell ... light theme is default everywhere."
   Roll the whole site back: sh bin/deploy-cloudflare.sh --ref ce-net-com-pre-twinton-2026-10-25. Goal lead-10251229-750. */

/* Michroma is wide; this face is the design cell's own Michroma file at a fitted size so headings keep their lines. */
@font-face{font-family:"ce-disp-fit";font-weight:400;font-display:swap;size-adjust:80%;
  src:url(https://design.ce-net.com/v1/fonts/michroma.woff2) format("woff2")}
@font-face{font-family:"ce-disp-phone";font-weight:400;font-display:swap;size-adjust:66%;
  src:url(https://design.ce-net.com/v1/fonts/michroma.woff2) format("woff2")}

html{background-color:var(--ground);color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline-color:var(--acc)}

h1,h2{font-family:"ce-disp-fit",var(--disp);font-weight:400;letter-spacing:.01em}
@media (max-width:560px){h1,h2{overflow-wrap:break-word}}
h1 b,h1 strong,h2 b,h2 strong{font-weight:400}
.eyebrow,.kicker,.overline,.tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:var(--track-label)}

/* glass cards with amber corner ticks (drawn as backgrounds so the page's own ::before/::after stay free) */
.card,.plan,.chart-card,.receipt-card{
  background:
    linear-gradient(var(--acc),var(--acc)) 0 0/var(--tick) 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 0/1px var(--tick) no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 100%/var(--tick) 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 100%/1px var(--tick) no-repeat,
    var(--panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 0 0 1px var(--line)}

/* the reticle lockup, light or dark */
.ce-brandrow{display:inline-flex;align-items:center;gap:10px;flex:none;min-width:0}
.ce-lockup{display:block;height:20px;width:auto;max-width:none}
.ce-lockup--d{display:none!important}
:root[data-theme="dark"] .ce-lockup--l{display:none!important}
:root[data-theme="dark"] .ce-lockup--d{display:block!important}
@media (max-width:560px){.ce-lockup{height:14px}.ce-brandrow{gap:6px}.ce-theme-toggle{width:28px;height:28px}}
footer .ce-lockup{height:22px}

/* the light/dark switch */
.ce-theme-toggle{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;padding:0;margin:0;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.ce-theme-toggle:hover{color:var(--acc);background:var(--hover)}
.ce-theme-toggle:active{transform:scale(.96)}
.ce-theme-toggle svg{width:15px;height:15px;display:block}
.ce-theme-toggle .ce-moon{display:none}
:root[data-theme="dark"] .ce-theme-toggle .ce-sun{display:none}
:root[data-theme="dark"] .ce-theme-toggle .ce-moon{display:block}
.ce-theme-toggle--float{position:fixed;right:16px;bottom:16px;z-index:2147483000;background:var(--panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@media print{.ce-theme-toggle{display:none}}
/* phone: the nav row has no room for the switch; a floating one (outside the header, whose blur would trap it) shows instead */
.ce-theme-toggle--phone{display:none}
@media (max-width:30rem){.ce-brandrow .ce-theme-toggle{display:none}.ce-theme-toggle.ce-theme-toggle--phone{display:inline-grid;width:36px;height:36px}.nav__row .ce-lockup{height:12px}
  h1{font-family:"ce-disp-phone","ce-disp-fit",var(--disp)}}

/* Buttons and body text in Foreman's look (goal lead-10251734-784, Leif 2026-10-26 00:34 CST).
   Buttons: square (--r-sm), compact, Geist medium uppercase with the label tracking; amber fill only on the one primary.
   Body: Geist at --t-lg for ledes (ink), --t-base for running text (ink-2), no tracking, a ~60ch measure.
   Media and step cards take the card radius (--r). Rollback: sh bin/deploy-cloudflare.sh --ref ce-net-com-pre-buttons-2026-10-26 */
:root{--pg-r:var(--r)}
/* full-bleed bands on the solutions pages are computed from 100vw, which includes the scrollbar: clip the page's
   horizontal overflow on body, never on the root (that would clip the scroll container itself) */
:root body{overflow-x:clip}
/* the hero shutter keeps its move; only its corner follows the card radius */
:root .hero--frame .hero__shot img{clip-path:inset(0 100% 0 0 round var(--r))}
@keyframes shutter{to{clip-path:inset(0 0 0 0 round var(--r))}}
@media (prefers-reduced-motion:reduce){:root .hero--frame .hero__shot img{clip-path:none}}
:root body{font-family:var(--sans);letter-spacing:0}
:root .btn,:root .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);
  font:500 var(--t-sm)/1 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;text-decoration:none;white-space:nowrap;
  filter:none;cursor:pointer;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),transform .14s var(--ease)}
:root .btn:hover,:root .button:hover{background:var(--press);transform:none;filter:none}
:root .btn:active,:root .button:active{transform:scale(.97)}
:root .btn--primary,:root .btn.primary,:root .btn-primary,:root .btn.solid,:root .pr .btn,:root .button:not(.secondary){
  background:var(--acc);color:var(--acc-ink);box-shadow:none}
:root .btn--primary:hover,:root .btn.primary:hover,:root .btn-primary:hover,:root .btn.solid:hover,:root .pr .btn:hover,:root .button:not(.secondary):hover{
  background:var(--acc-hi);color:var(--acc-ink)}
:root .btn.ghost,:root .btn.link,:root .btn.quiet{box-shadow:none;color:var(--ink-2)}
:root .btn.ghost:hover,:root .btn.link:hover,:root .btn.quiet:hover{color:var(--ink)}
:root .btn-sm,:root .btn.small,:root .button.small{min-height:32px;padding:0 12px;font-size:var(--t-xs)}
/* the theme's controls are square too: form fields and the time slots, never pills */
:root input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),:root select,:root textarea{border-radius:var(--r-sm)}
:root .slot{border-radius:var(--r-sm)}
:root .nav__cta{min-height:36px;padding:0 14px}
:root .section--band .btn:not(.btn--primary),:root .gpu-feature .btn:not(.btn--primary){background:transparent}
:root .section--band .btn:not(.btn--primary):hover,:root .gpu-feature .btn:not(.btn--primary):hover{background:var(--press)}
:root .call .btn--primary{background:var(--acc);color:var(--acc-ink)}
/* a primary sitting on an amber panel inverts, or it has no edge against the panel */
:root .cta .main .btn--primary{background:var(--acc-ink);color:var(--acc)}
:root .cta .main .btn--primary:hover{background:var(--acc-ink);color:var(--acc-hi)}
:root .nav__links a,:root .nav-more summary,:root .nav__menu summary,:root .nav__signin{border-radius:var(--r-sm)}
:root .nav-more details>ul a,:root .nav__menu li a{border-radius:var(--r-sm)}
:root .lede,:root .intro,:root .pr .lede,:root .hero--frame .lede{font-family:var(--sans);font-size:var(--t-lg);font-weight:400;line-height:1.6;
  letter-spacing:0;max-width:60ch;text-wrap:pretty}
:root .split p:not(.lede):not(.eyebrow):not(.fine),:root .hero__copy>p:not(.lede):not(.fine):not(.eyebrow){color:var(--ink-2)}
:root .split p:not(.lede):not(.eyebrow):not(.fine),:root .hero__copy>p:not(.lede):not(.fine):not(.eyebrow),:root .pr p,:root .pr li,:root .pr dd,
:root main p:not([class]){font-family:var(--sans);font-size:var(--t-base);line-height:1.6;letter-spacing:0;max-width:62ch}
:root .reel,:root .panel,:root .stat,:root .sc-reel,:root .sc-demo{border-radius:var(--r)}
:root .sc-made img{border-radius:var(--r)}
/* the solutions case card is a statement block, not a glass panel: keep its text on the panel in both themes */
:root .pr .card{background:var(--well);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
:root .pr .card h3{color:var(--ink)}
:root .pr .card dt,:root .pr .card .card-note{color:var(--ink-2)}
:root .pr .check .ok{color:color-mix(in srgb,var(--ok) 78%,var(--ink))}
:root .pr .check .no{color:color-mix(in srgb,var(--bad) 78%,var(--ink))}
:root .pr .pick button{border-radius:var(--r-sm);font:500 var(--t-sm)/1 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase}
/* an inverted band must stay a band in dark, not turn the page light */
:root[data-theme="dark"] .why{background:var(--well);color:var(--ink)}
:root[data-theme="dark"] .why h2,:root[data-theme="dark"] .why-grid b{color:var(--ink)}
:root[data-theme="dark"] .why-grid p{color:var(--ink-2)}
@media (min-width:1181px) and (max-width:1600px){:root .nav__links a,:root .nav-more summary{padding:0 8px}}
@media (min-width:1181px) and (max-width:1520px){:root .nav__links li:has(>a[href="/mesh/"]),:root .nav__links li:has(>a[href="/enterprise/"]){display:none}}
:root .steps li{font-size:var(--t-base);line-height:1.55;letter-spacing:0}
@media (max-width:640px){
  :root .actions .btn{flex:0 0 auto}
  :root .btn,:root .button{min-height:44px}
  :root .btn-sm,:root .btn.small,:root .button.small,:root .nav__cta{min-height:36px}
  :root .call__row .btn{width:auto}}