/* The DEVI family layer (website preview 49, owner 11/10/2026: "a large website update and consistency sweep,
   matching the current website where users work and the iOS app", a calm commercial look in DEVI's own colors).
   Served as /shared/devi-family.css and linked twice on every public page: last in the head, so the first paint is
   right, and again at the very end of the body, so it also settles over the page sections' own stylesheets.
   Brand gradient from the app icon: #2447D6 > #5B3FE0 > #8A4DF0. Dark first: page #06070B, ink #F4F6FB.
   Rules for phone width (owner, 11/10/2026: "never wrapped into a weird second line"): chips, pills and buttons
   stay on one line; drawn labels shorten instead of wrapping. Every motion is off under reduced motion. */
:root{--fam-page:#06070B;--fam-ink:#F4F6FB;--fam-muted:#9BA4B8;--fam-card:#0D0E12;--fam-line:rgba(255,255,255,.10);
--fam-brand:linear-gradient(100deg,#2447D6 0%,#5B3FE0 52%,#8A4DF0 100%);
--fam-text-grad:linear-gradient(100deg,#6F90FF,#9A86FF 55%,#C79BFF);
--fam-mesh:radial-gradient(ellipse 45% 70% at 8% 10%,rgba(111,144,255,.9),transparent 60%),radial-gradient(ellipse 50% 80% at 60% 0%,#5B3FE0,transparent 65%),radial-gradient(ellipse 45% 70% at 95% 80%,rgba(138,77,240,.95),transparent 60%),#1A1D52;
--fam-close:radial-gradient(ellipse 60% 80% at 0% 100%,#2447D6,transparent 60%),radial-gradient(ellipse 60% 80% at 100% 0%,#8A4DF0,transparent 60%),#3A2CB0}
html,body{background:var(--fam-page)}

/* Buttons: pills, like the app's chips and the iPhone app's capsules. Primary is the brand gradient, secondary white. */
body .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:999px;
background:var(--fam-brand);color:#fff;-webkit-text-fill-color:#fff;font-weight:600;white-space:nowrap;box-shadow:none;text-decoration:none}
body .btn:hover{filter:brightness(1.08)}
body .btn.btnghost{background:#F4F6FB;color:#0B0B0F;-webkit-text-fill-color:#0B0B0F;border:0}
body .btn.btnghost:hover{background:#E6E9F2;filter:none}
nav.sitenav .btn.navcta{min-height:44px;padding:0 20px}

/* Eyebrows become chips with a square marker. */
body .eyebrow{font-family:Inter,"Segoe UI",system-ui,sans-serif!important;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 12px;border-radius:6px;background:#F4F6FB;
color:#0B0B0F!important;-webkit-text-fill-color:#0B0B0F!important;background-image:none!important;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.02em;text-transform:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
body .eyebrow::before{content:"";flex:none;width:8px;height:8px;background:#5B3FE0}
body .sechead .eyebrow,body .eyebrow{margin-bottom:18px}

/* Page heroes: a rounded panel in the brand gradient, inset from the edges. */
body header.pghero44{margin:12px 12px 0;border-radius:24px;overflow:hidden;background:var(--fam-mesh)!important;padding:72px 0}
body header.pghero44 h1{color:#fff;-webkit-text-fill-color:#fff;background:none}
body header.pghero44 .lead,body header.pghero44 .herolead{color:#EEF0FF;-webkit-text-fill-color:#EEF0FF}
body header.pghero44 .btn{background:#06070B}
body header.pghero44 .btn.btnghost{background:#fff;color:#0B0B0F;-webkit-text-fill-color:#0B0B0F}
body header.pghero44 .pgwin44 .app44{box-shadow:0 30px 70px rgba(6,7,11,.45)}

/* Bands become raised panels, so sections alternate without flat black blocks. */
body main section.band23{margin:0 12px;border-radius:24px;background:#0B0C14!important;border:1px solid var(--fam-line)}
/* A thin gradient rule between plain sections. */
body main section.sec23:not(.band23)+section.sec23:not(.band23){background-image:linear-gradient(90deg,transparent,rgba(91,63,224,.65),transparent);
background-size:min(1200px,calc(100% - 64px)) 1px;background-repeat:no-repeat;background-position:top center}
body main section.band23+section.sec23,body main section.sec23+section.band23{margin-top:24px}

/* The closing call to action: a gradient panel, black and white pills. */
body .cta23{background:var(--fam-page)!important}
body .cta23 .ctapanel{border:0!important;border-radius:24px;background:var(--fam-close)!important;color:#fff;box-shadow:none!important}
body .cta23 .ctapanel::before,body .cta23 .ctapanel::after{display:none!important}
body .cta23 .ctapanel h2,body .cta23 .ctapanel p:not(.eyebrow){color:#fff!important;-webkit-text-fill-color:#fff!important;background:none}
body .cta23 .ctapanel .btn{background:#06070B}
body .cta23 .ctapanel .btn.btnghost{background:#fff;color:#0B0B0F;-webkit-text-fill-color:#0B0B0F}

/* Cards and the app's own drawings keep the workspace's 12 px corners. */
body .d-card{border-radius:12px}

/* Footer: the giant DEVI in the app icon's gradient; one line, "(c) 2026 DEVI Ops". */
body footer.sitefoot{border-top:0;background-image:linear-gradient(90deg,transparent,rgba(91,63,224,.6),transparent);
background-size:min(1200px,calc(100% - 64px)) 1px;background-repeat:no-repeat;background-position:top center}

/* Phone width: nothing runs past the edge and nothing breaks onto a stray second line. */
@media (max-width:700px){
body header.pghero44{margin:8px 8px 0;border-radius:18px;padding:48px 0}
body main section.band23,body .cta23 .ctapanel{margin-left:8px;margin-right:8px;border-radius:18px}
body .btn{padding:0 20px}
body .eyebrow{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){body .btn{transition:none}}
/* Headings wrap evenly on every page. */
body main h1,body main h2,body header h1{text-wrap:balance}
/* 11/11/2026: never one word alone on the last line. Headings balance; body text wraps 'pretty'; short centered text balances. */
body :is(main,header) :is(h3,h4,.h2,.h3){text-wrap:balance}
body :is(main,header,footer) :is(p,li,dd,dt,figcaption,blockquote,small,label,summary){text-wrap:pretty}
body :is(main,header) :is(p,li,small):where([class*=lead],.lead,.sub,.cap,.c){text-wrap:balance}

/* Step rows on the product pages (website preview 49): the variety of the home page. Every second row sits on a
   light panel, the others on a raised dark panel; the drawings stay as they are. */
body main ol.pf41{display:flex;flex-direction:column;gap:20px}
body main ol.pf41>li{border-top:0!important;border-radius:24px;padding:clamp(28px,4.5vw,56px) clamp(20px,4vw,56px)!important;background:#0B0C14;border:1px solid var(--fam-line)}
body main ol.pf41>li:nth-child(even){background:linear-gradient(160deg,#F5F3FF 0%,#ECEFFF 55%,#F1EAFF 100%);border-color:transparent}
body main ol.pf41>li:nth-child(even) .pfhead h2{color:#0B0B0F!important;-webkit-text-fill-color:#0B0B0F!important}
body main ol.pf41>li:nth-child(even) .pfl{color:#3A3D45!important;-webkit-text-fill-color:#3A3D45!important}
body main ol.pf41 .pfn{background:var(--fam-brand);color:#fff}
@media (max-width:700px){body main ol.pf41>li{border-radius:18px;padding:24px 18px!important}}