/* Electric Software: the AI security section (/ai-security/). Loaded after /assets/site.css on these pages only.
   Built by web\build-web.mjs, which copies this file to ai-security\assets\ai.css with a content hash.
   site.css still draws the header, hero, page card, cards, CTA band and footer. This file adds the guide's look
   (pictures in white cards on a light stage, the navy "What we do for you" panel), the chapter list, the clips,
   and the live 3D home's "Talk to an expert" modal. Colours: site tokens where the site already has the thing,
   brand tokens (C:\Marketing\Electric_Software\_brand\brand-tokens.json) for the rest. Every text colour set here
   is 4.5:1 or better on its background; check-site.mjs measures it.
   Rhythm: 17px body text, one spacing scale (--s1 to --s4), and pictures and clips that sit beside the words on
   wide screens and between them on phones, so no column is left half empty. */

/* Brand fonts, self hosted: the same Sora and Inter the site loads from Google Fonts, so these pages make no
   third party font request and render the same offline. */
@font-face{font-family:"Sora";src:url("fonts/sora-latin-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --es-cobalt:#1B7CEB; --es-sky:#38B6FF; --es-navy:#06279B; --es-ink:#0B1220; --es-slate:#48566A; --es-mist:#EEF2F7;
  --es-card-shadow:0 12px 30px rgba(11,18,32,.12);
  --s1:.75rem; --s2:1.25rem; --s3:2rem; --s4:3rem; --measure:42rem;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- reading size and rhythm ----------
   Only the section's own text: the site's CTA band keeps its own type and colours. :where() keeps these at
   (0,2,0), above site.css's .page-body p and below every specific rule in this file. */
.ai .page-body{padding-top:clamp(2.2rem,5vw,3.2rem);padding-bottom:clamp(2.2rem,5vw,3.2rem)}
.ai .page-body :where(p,li):where(:not(.cta-band *)){font-size:1.0625rem;line-height:1.72;color:#2f3b49}
.ai .page-body :where(p):where(:not(.cta-band *)){margin:0 0 var(--s2);max-width:var(--measure)}
.ai .page-body :where(ul,ol):where(:not(.cta-band *)){margin:0 0 var(--s2);max-width:var(--measure)}
.ai .page-body :where(li):where(:not(.cta-band *)){margin:0 0 .5rem}
.ai .page-body li > ul,.ai .page-body li > ol{margin:.5rem 0 .2rem}
.ai .page-body h2{margin:var(--s4) 0 var(--s2);font-size:clamp(1.4rem,3vw,1.7rem)}
.ai .page-body h3{margin:var(--s3) 0 var(--s1);font-size:1.18rem;line-height:1.3}
.ai .page-body li::marker{color:var(--es-cobalt)}
/* Links in the section's own text: the site's deep accent, underlined. The lighter accent is about 4:1 on white. */
.ai .page-body a:not(.btn){color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.ai .page-body a:not(.btn):hover{color:var(--es-navy)}
/* Phones first: a little more width for the words than the other subpages give. */
@media (max-width:480px){
  .ai main.page{padding:0 .7rem 2rem}
  .ai .page-body{padding:1.9rem 1.1rem 2.1rem}
}

/* ---------- hero ---------- */
.ai .hero h1{max-width:22ch}
.hero .rule-title{display:flex;align-items:flex-start;gap:.8rem;max-width:24ch}
.rule-title .num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(2.2rem,5vw,2.9rem);height:clamp(2.2rem,5vw,2.9rem);margin-top:.12em;border-radius:50%;
  background:var(--es-sky);color:var(--es-ink);font-size:clamp(1.05rem,2.4vw,1.35rem);letter-spacing:0}
/* front page: the opening clip sits beside the words on wide screens, under them on phones */
.hero.has-clip .hero-in{display:grid;gap:var(--s3);max-width:980px}
@media (min-width:820px){.hero.has-clip .hero-in{grid-template-columns:minmax(0,1fr) 196px;align-items:center;column-gap:3rem}}
.hero .clip{justify-self:center;margin:0;width:min(100%,220px)}
@media (min-width:820px){.hero .clip{width:196px}}

/* ---------- front page: the rules, chapter by chapter ---------- */
.chapters{list-style:none;padding:0;margin:var(--s2) 0 0}
.ai .page-body .chapters{max-width:none}
.chapter{display:grid;gap:var(--s1) var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.chapter:first-child{border-top:0;padding-top:var(--s1)}
@media (min-width:760px){.chapter{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.ai .page-body .ch-no{margin:0 0 .2rem;font-size:.9rem;font-weight:600;color:var(--es-slate)}
.ai .page-body .chapter h3{margin:0 0 .35rem;font-size:1.22rem}
.ai .page-body .ch-intro{margin:0;font-size:.98rem;line-height:1.6;color:var(--es-slate)}
.ch-rules{list-style:none;padding:0;margin:0;display:grid;gap:var(--s1)}
.ai .page-body .ch-rules{margin:0;max-width:none}
.ai .page-body .ch-rules li{margin:0}
.ai .page-body .ch-rules a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  padding:1rem 1.15rem;border-radius:14px;background:#f6f8fb;border:1px solid transparent;text-decoration:none;
  transition:border-color .15s ease,background .15s ease}
.ai .page-body .ch-rules a:hover{background:#fff;border-color:#bcd8ff}
.n-dot{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--es-navy);color:#fff;font:700 .88rem/1 var(--disp)}
.ch-rules .rt strong{display:block;font-family:var(--disp);font-weight:600;font-size:1.08rem;line-height:1.3;color:var(--es-ink)}
.ch-rules .rt span{display:block;margin-top:.25rem;font-size:1.0625rem;line-height:1.55;color:#3d4a5a}

/* Do this week: a to do list beside the cover picture */
.week{display:grid;gap:var(--s3);margin:var(--s2) 0 0;padding:var(--s2);border-radius:20px;background:var(--es-mist)}
@media (min-width:760px){.week{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;padding:var(--s3)}}
.ai .page-body .week-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);max-width:none}
.ai .page-body .week-list li{position:relative;margin:0;padding-left:2.2rem;color:var(--es-ink)}
.week-list li::before{content:"";position:absolute;left:0;top:.3rem;width:1.2rem;height:1.2rem;border-radius:5px;
  border:2px solid var(--es-cobalt);background:#fff}
.ai .page-body .week-list .rule-ref{margin-left:.35rem;font-size:.92rem;font-weight:600;white-space:nowrap}
.week figure{margin:0}

/* Common questions: one row per question, the answer opens on a click (and stays in the page for search) */
.ai .page-body .faq{margin:var(--s2) 0 0;border-top:1px solid var(--line)}
.ai .page-body .faq details{border-bottom:1px solid var(--line)}
.ai .page-body .faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem .2rem;cursor:pointer;list-style:none}
.ai .page-body .faq summary::-webkit-details-marker{display:none}
.ai .page-body .faq summary h3{margin:0;font-size:1.12rem;line-height:1.35}
.ai .page-body .faq summary::after{content:"";flex:none;width:11px;height:11px;margin:0 .45rem .3rem 0;border-right:2.5px solid var(--es-cobalt);
  border-bottom:2.5px solid var(--es-cobalt);transform:rotate(45deg)}
.ai .page-body .faq details[open] > summary::after{margin-bottom:-.3rem;transform:rotate(-135deg)}
.ai .page-body .faq summary:hover h3{color:var(--es-cobalt)}
.ai .page-body .faq summary:focus-visible{outline:3px solid var(--es-cobalt);outline-offset:2px;border-radius:6px}
.ai .page-body .faq details > p{margin:0 0 1.1rem;padding:0 .2rem}
.ai .page-body .faq .rule-ref{margin-left:.35rem;font-size:.92rem;font-weight:600;white-space:nowrap}

/* Downloads: two open, one behind a short form (first name, work email) */
.ai .page-body .downloads{list-style:none;padding:0;margin:var(--s2) 0 0;display:grid;gap:var(--s1);max-width:none}
.ai .page-body .downloads > li{display:grid;gap:var(--s1) var(--s3);align-items:center;margin:0;padding:var(--s2) 1.4rem;border-radius:18px;background:#fff;border:1px solid #d5deea}
@media (min-width:720px){.ai .page-body .downloads > li{grid-template-columns:minmax(0,1fr) auto}}
.ai .page-body .downloads h3{margin:0 0 .2rem;font-size:1.15rem}
.ai .page-body .downloads p{margin:0}
.ai .page-body .downloads .dl-meta{font-size:.92rem;font-weight:600;color:var(--es-slate)}
.ai .page-body .downloads .dl-gated{background:var(--es-mist);border-color:var(--es-mist)}
@media (min-width:720px){.ai .page-body .downloads .dl-gated{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.gate{display:grid;gap:var(--s1)}
.gate-fields{display:grid;gap:var(--s1)}
@media (min-width:520px){.gate-fields{grid-template-columns:1fr 1fr}}
.gate .field label{display:block;margin:0 0 .3rem;font-size:.9rem;font-weight:600;color:var(--es-ink)}
.gate .field input{width:100%;padding:.75rem .85rem;border:1.5px solid #b9c4d2;border-radius:12px;background:#fff;font:inherit;font-size:1rem;color:var(--es-ink)}
.gate .field input:focus{outline:none;border-color:var(--es-cobalt);box-shadow:0 0 0 3px rgba(27,124,235,.2)}
.gate .field .err-msg{display:none;margin:.3rem 0 0;font-size:.86rem;color:#a83411}
.gate .field.err input{border-color:#a83411}
.gate .field.err .err-msg{display:block}
.gate .btn{justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:600}
.ai .page-body .gate .gate-note{font-size:.92rem;color:var(--es-slate)}
.ai .page-body .gate .gate-status{font-weight:600;color:#0e6b3f}
.ai .page-body .gate .gate-status.bad{color:#a83411}
.ai .page-body .gate .gate-status:empty{display:none}

/* the guide's picture look: a still in a rounded white card on a light stage */
.stage{padding:12px;border-radius:22px;background:var(--es-mist)}
.stage .card{padding:8px;background:#fff;border-radius:16px;box-shadow:var(--es-card-shadow)}
.ai .page-body .stage img{display:block;width:100%;height:auto;border-radius:10px}

/* ---------- rule pages ---------- */
/* The one line. With a picture it leads the page; with none it's set large as a pull quote. */
.ai .page-body .lead-line{position:relative;margin:0 0 var(--s3);padding-left:1.15rem;max-width:36ch;
  font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.35;color:var(--es-navy)}
.lead-line::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:var(--es-cobalt)}
.quote{position:relative;margin:0 0 var(--s2);padding:var(--s3) var(--s2) var(--s3) 2rem;border-radius:20px;background:var(--es-mist)}
.quote::before{content:"";position:absolute;left:0;top:var(--s3);bottom:var(--s3);width:5px;border-radius:0 5px 5px 0;background:var(--es-cobalt)}
.ai .page-body .quote p{margin:0;max-width:26ch;font-family:var(--disp);font-weight:600;font-size:clamp(1.55rem,4.2vw,2.25rem);line-height:1.25;color:var(--es-navy)}
/* The rule's picture, beside "What it means" on wide screens */
.art{margin:0 0 var(--s2)}
@media (min-width:900px){.art{float:right;width:44%;margin:.4rem 0 var(--s2) 2.4rem}}

/* Sections and panels make their own block, so they sit cleanly beside a picture or clip */
.story,.part,.panel,.wedo,.ai .page-body ul.cards{display:flow-root}
.ai .page-body .b > h2:first-child{margin-top:var(--s4)}

/* A simple example: on the site's wire, like its quotes */
.story{margin:0;padding:var(--s2) 1.4rem var(--s2) 1.5rem;background:#f5f9ff;border-radius:0 16px 16px 0;max-width:var(--measure);
  border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--accent),var(--cyan)) 1}
.ai .page-body .story p{margin:0 0 var(--s1)}
.ai .page-body .story p:last-child{margin-bottom:0}

/* Do it yourself: one heading, then each labelled part as its own sub-section */
.part{margin:var(--s3) 0 0;padding-top:var(--s2);border-top:1px solid var(--line);max-width:var(--measure)}
.b > h2 + .part{margin-top:0;padding-top:0;border-top:0}
.ai .page-body .part h3{margin:0 0 var(--s1)}
.part h3 .h-note{font-family:var(--body);font-weight:500;font-size:.92rem;color:var(--es-slate)}
.ai .page-body .part > :last-child{margin-bottom:0}
.ai .page-body .diy ol{list-style:none;padding-left:0;counter-reset:step}
.ai .page-body .diy ol > li{counter-increment:step;position:relative;padding-left:2.5rem;margin:0 0 .8rem}
.ai .page-body .diy ol > li::before{content:counter(step);position:absolute;left:0;top:.2rem;width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--es-navy);color:#fff;font:700 .84rem/1.7rem var(--disp);text-align:center}
/* Labelled lists as the site's cards: three across, a last odd card spans the row, so no row ends half empty */
@media (min-width:720px){
  .ai .page-body ul.cards{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none}
  .ai .page-body ul.cards li{grid-column:span 2}
  .ai .page-body ul.cards li:last-child:nth-child(3n+1){grid-column:span 6}
  .ai .page-body ul.cards li:nth-last-child(2):nth-child(3n+1),.ai .page-body ul.cards li:last-child:nth-child(3n+2){grid-column:span 3}
}
.ai .page-body ul.cards{gap:var(--s1)}
.ai .page-body ul.cards li{margin:0;padding:1.05rem 1.2rem 1.15rem}
.ai .page-body ul.cards li strong{font-size:1.02rem;margin-bottom:.3rem}

/* How to check, then what that misses */
.panel{margin:var(--s3) 0 0;padding:var(--s2) 1.4rem;border-radius:18px;max-width:calc(var(--measure) + 2.8rem)}
.ai .page-body .panel > h2{margin:0 0 var(--s1);font-size:1.25rem}
.ai .page-body .panel > :last-child{margin-bottom:0}
.panel.check{background:#fff;border:1.5px solid var(--es-cobalt)}
.ai .page-body .panel.check h2::before{background:var(--es-cobalt)}
.panel.misses{background:#f4f6f9;border:1.5px dashed #a9b5c4}
.ai .page-body .panel.misses h2::before{background:var(--es-slate)}
.ai .page-body .b.diy + .panel{margin-top:var(--s4)}

/* What we do for you: the guide's navy panel */
.wedo{margin:var(--s4) 0 0;padding:clamp(1.5rem,4vw,2.2rem);border-radius:20px;background:var(--night2);color:#fff}
.ai .page-body .wedo h2{margin:0 0 var(--s1);color:#fff}
.ai .page-body .wedo h2::before{background:var(--es-sky)}
.ai .page-body .wedo p,.ai .page-body .wedo li{color:#e2eaf6}
.ai .page-body .wedo .plan{margin:var(--s2) 0 0;font-size:.92rem;line-height:1.6;color:#b9c8dc}
.ai .page-body .wedo a:not(.btn){color:var(--es-sky)}
.ai .page-body .wedo a:not(.btn):hover{color:#fff}

/* Why we're sure (off unless build-web.mjs --sources) */
.ai .page-body .sure p,.ai .page-body .sure li{font-size:.94rem;color:var(--es-slate)}

/* Previous and next rule */
.rule-nav{clear:both;display:grid;gap:var(--s1);margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--line)}
@media (min-width:640px){.rule-nav{grid-template-columns:1fr 1fr}}
.ai .page-body .rule-nav a.step{display:block;padding:1rem 1.2rem 1.05rem;border:1px solid #d5deea;border-radius:14px;background:#fbfdff;text-decoration:none}
.ai .page-body .rule-nav a.step:hover{border-color:#9cc3f5;background:#fff}
.rule-nav .dir{display:block;font-size:.9rem;font-weight:600;color:var(--es-slate)}
.rule-nav .t{display:block;margin-top:.25rem;font-family:var(--disp);font-weight:600;line-height:1.3;color:var(--es-ink)}
.rule-nav .next{text-align:right}
@media (min-width:640px){.rule-nav .next:only-child{grid-column:2}}
.ai .page-body .all-rules{margin:var(--s2) auto 0;text-align:center;font-weight:600}
.ai .cta-band{clear:both;margin-top:var(--s4)}

/* ---------- clips: click to play, nothing loads before the click ---------- */
.clip{margin:var(--s3) auto;width:min(100%,280px)}
@media (min-width:900px){.page-body .clip{float:right;clear:right;width:240px;margin:.4rem 0 var(--s2) 2.4rem}}
.clip-frame{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--es-mist);box-shadow:var(--es-card-shadow)}
.clip-frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--es-mist)}
.clip-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.6rem;
  padding:0 0 24%;border:0;background:transparent;cursor:pointer;font:inherit}
.clip-play[hidden]{display:none}
.clip-icon{position:relative;width:64px;height:64px;border-radius:50%;background:var(--es-navy);box-shadow:0 12px 26px -10px rgba(6,39,155,.75);transition:transform .15s ease}
.clip-icon::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-36%,-50%);
  border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.clip-play:hover .clip-icon{transform:scale(1.06)}
.clip-time{padding:.34rem .7rem;border-radius:999px;background:var(--es-ink);color:#fff;font:600 .9rem/1 var(--body)}
.clip-play:focus-visible{outline:3px solid var(--es-cobalt);outline-offset:-3px;border-radius:18px}
.clip-full{position:absolute;top:.6rem;right:.6rem;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:0;border-radius:50%;background:rgba(11,18,32,.72);color:#fff;cursor:pointer}
.clip-full[hidden]{display:none}
.clip-full svg{width:18px;height:18px}
.clip-full:hover{background:var(--es-navy)}
.clip-full:focus-visible{outline:3px solid var(--es-cobalt);outline-offset:2px}
/* full screen shows the whole clip: the frame's crop (cover) would cut the top and bottom off a tall clip on a
   wide screen. Two rules, since a browser drops a whole rule over a pseudo class it doesn't know. */
.clip-frame video:fullscreen{object-fit:contain;background:#000}
.clip-frame video:-webkit-full-screen{object-fit:contain;background:#000}
.clip figcaption{margin-top:var(--s1)}
.clip .kind{display:block;margin:0 0 .25rem;font-size:.9rem;font-weight:600;color:var(--es-slate)}
.clip .title{display:block;font-family:var(--disp);font-weight:600;font-size:1.05rem;line-height:1.4;color:var(--es-ink)}
.hero .clip .kind{color:var(--hero-soft)}
.hero .clip .title{color:var(--hero-ink)}

/* ---------- "Talk to an expert" modal: copied from the live 3D home (index.html, #hs-modal), opened by the AI
   Check's "Book a free AI review". The fallback links use the site's deep accent here for contrast. ---------- */
#hs-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(6,12,24,.62);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease;pointer-events:none}
#hs-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.hs-modal-box{position:relative;background:#fff;color:#0b1220;border-radius:20px;max-width:520px;width:100%;
  max-height:88vh;overflow-y:auto;padding:1.6rem 1.6rem 1.3rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.hs-modal-box h3{font-family:var(--disp);font-size:1.5rem;margin:0 0 .3rem}
.hs-modal-box>p{color:var(--ink-soft);font-size:.92rem;margin:0 0 1rem}
.hs-modal-close{position:absolute;top:.7rem;right:.9rem;border:none;background:transparent;font-size:1.35rem;cursor:pointer;color:var(--ink-soft);line-height:1}
.hs-modal-close:hover{color:var(--ink)}
.hs-fallback{margin-top:1rem;font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:.8rem}
.hs-fallback a{color:var(--accent-deep);font-weight:600;text-decoration:none}
/* preview only: where the live HubSpot form loads */
.hs-placeholder{padding:1.4rem 1.2rem;border:1.5px dashed #a9b5c4;border-radius:14px;background:#f6f8fb;color:#334155;font-size:.95rem;line-height:1.55}
.all-rules a + a{margin-left:1.6rem}

@media (prefers-reduced-motion:reduce){
  .clip-icon,.ai .page-body .ch-rules a{transition:none}
  .clip-play:hover .clip-icon{transform:none}
}