/* ==========================================================================
   Kyle Langham Consulting — shared stylesheet
   Hand-written. No framework, no build step.
   Mobile-first: base rules are phone, min-width queries scale up.

   Contents
     1.  Tokens
     2.  Reset + base type
     3.  Layout primitives (.wrap, .eyebrow, .btn)
     4.  Nav
     5.  Hero + node graph
     6.  Function grid (homepage)
     7.  Video embed
     8.  Generic sections, bands, callouts
     9.  Function page parts (time table, reply card)
     10. Diagnostic page parts
     11. For-IT page parts (documentation register)
     12. About page parts
     13. Footer
     14. Print
   ========================================================================== */


/* 1. TOKENS ================================================================ */

:root{
  --ink:#1D1D1F;
  --ink-2:#3A3A3C;
  --muted:#6E6E73;
  --line:#E3E3E6;
  --line-2:#EFEFF1;
  --canvas:#FBFBFD;
  --card:#FFFFFF;
  --wash:#F4F6FA;
  --accent:#0A6CFF;
  --accent-soft:#EDF3FF;
  --accent-line:#DCE8FF;
  --accent-ink:#0852C4;
  --stop:#B23B00;
  --stop-soft:#FCEEE7;
  --stop-line:#F0C9B5;
  --maxw:1080px;
  --readw:720px;   /* measure for long-form documentation prose */
}


/* 2. RESET + BASE TYPE ===================================================== */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Inter",Arial,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}
img,svg{max-width:100%;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.15;}

/* skip link — the /for-it page gets forwarded around and may be read with a keyboard */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;
      border-radius:0 0 10px 0;font-size:14px;font-weight:600;text-decoration:none;z-index:200;}
.skip:focus{left:0;}


/* 3. LAYOUT PRIMITIVES ===================================================== */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
@media(min-width:640px){ .wrap{padding:0 28px;} }

.eyebrow{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
@media(min-width:640px){ .eyebrow{font-size:11px;} }

.eyebrow-muted{color:var(--muted);}

section.block{padding:52px 0;}
@media(min-width:640px){ section.block{padding:68px 0;} }
@media(min-width:900px){ section.block{padding:76px 0;} }

.lede{font-size:24px;line-height:1.18;margin:14px 0 0;max-width:18em;}
@media(min-width:640px){ .lede{font-size:28px;} }
@media(min-width:900px){ .lede{font-size:30px;} }

.sec-intro{font-size:15.5px;color:var(--ink-2);margin-top:14px;max-width:44em;}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  border-radius:11px;padding:13px 20px;
  font-size:14.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  font-family:inherit;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-ink);}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:#CFCFD4;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;}
.btn .arr{font-size:15px;line-height:1;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn,.btn:hover{transition:none;transform:none;}
}


/* 4. NAV =================================================================== */

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(251,251,253,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;}

.logo{display:flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;}
.logo .mark{width:26px;height:26px;flex:none;}
.logo .n{font-size:15px;font-weight:700;letter-spacing:-.01em;display:block;}
.logo .t{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
         margin-top:2px;display:block;}

/* hamburger — visible on phone only */
.navtoggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:-8px;
  background:none;border:0;cursor:pointer;color:var(--ink);
}
.navtoggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;
               stroke-linecap:round;fill:none;}
.navtoggle .ico-x{display:none;}
.navtoggle[aria-expanded="true"] .ico-x{display:block;}
.navtoggle[aria-expanded="true"] .ico-bars{display:none;}

/* drawer: closed by default on phone */
.navlinks{
  display:none;
  position:absolute;left:0;right:0;top:58px;
  background:var(--canvas);border-bottom:1px solid var(--line);
  padding:8px 22px 20px;
  flex-direction:column;align-items:stretch;gap:0;
  max-height:calc(100vh - 58px);overflow-y:auto;
}
.navlinks.open{display:flex;}
.navlinks a{
  font-size:15px;color:var(--ink-2);text-decoration:none;
  padding:11px 0;border-bottom:1px solid var(--line-2);
}
.navlinks a:hover{color:var(--ink);}

.navgroup{display:contents;}
.navgroup > .navgroup-label{font-size:15px;color:var(--ink-2);text-decoration:none;
                            padding:11px 0;border-bottom:1px solid var(--line-2);}
.navgroup .navmenu{display:flex;flex-direction:column;}
.navgroup .navmenu a{font-size:14px;color:var(--muted);padding:9px 0 9px 16px;}

.navcta{
  margin-top:16px;
  background:var(--ink);color:#fff !important;
  padding:12px 16px !important;border-radius:10px;
  font-size:14px;font-weight:600;text-align:center;border-bottom:0 !important;
}
.navcta:hover{background:#000;}

/* desktop nav */
@media(min-width:900px){
  .navtoggle{display:none;}
  .navlinks{
    display:flex !important;position:static;flex-direction:row;align-items:center;
    gap:26px;background:none;border:0;padding:0;max-height:none;overflow:visible;
  }
  .navlinks a{font-size:13.5px;padding:0;border-bottom:0;}
  .navgroup{display:block;position:relative;}
  .navgroup > .navgroup-label{font-size:13.5px;padding:19px 0;border-bottom:0;}
  .navgroup > .navgroup-label::after{content:"";display:inline-block;margin-left:6px;
    border:3.5px solid transparent;border-top-color:currentColor;transform:translateY(2px);}
  .navgroup .navmenu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);
    min-width:230px;background:var(--card);border:1px solid var(--line);
    border-radius:14px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.09);
    opacity:0;visibility:hidden;transition:opacity .12s ease;
  }
  .navgroup:hover .navmenu,
  .navgroup:focus-within .navmenu{opacity:1;visibility:visible;}
  .navgroup .navmenu a{font-size:13.5px;color:var(--ink-2);padding:8px 12px;border-radius:9px;}
  .navgroup .navmenu a:hover{background:var(--accent-soft);color:var(--accent-ink);}
  .navcta{margin-top:0;padding:8px 15px !important;border-radius:9px;font-size:13px;}
}


/* 5. HERO + NODE GRAPH ===================================================== */

.hero{padding:34px 0 8px;}
@media(min-width:900px){ .hero{padding:60px 0 32px;} }

.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.08fr .92fr;gap:48px;} }

.hero h1{font-size:32px;line-height:1.08;letter-spacing:-.028em;margin:14px 0 0;}
@media(min-width:640px){ .hero h1{font-size:40px;} }
@media(min-width:900px){ .hero h1{font-size:46px;} }

.hero .sub{font-size:16px;color:var(--ink-2);margin-top:18px;max-width:31em;}
@media(min-width:900px){ .hero .sub{font-size:17px;margin-top:20px;} }
.hero .sub b{color:var(--ink);font-weight:600;}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}

/* credential line directly under the hero */
.credline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.credline .firms{display:flex;gap:7px;flex-wrap:wrap;}
.credline .firms span{
  font-size:12px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:100px;padding:4px 12px;
}

/* node graph — lifted from the existing site, animation intact */
.graph{width:100%;max-width:420px;margin:0 auto;}
@media(min-width:900px){ .graph{max-width:450px;margin-left:auto;margin-right:0;} }
.graph svg{width:100%;height:auto;display:block;overflow:visible;}
.nd-link{stroke:var(--accent);stroke-width:1.6;fill:none;
         stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1s ease forwards;}
.nd-sys{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .5s ease forwards;}
.nd-label{font:600 11px -apple-system,Arial,sans-serif;fill:var(--ink);}
.nd-wrap{opacity:0;animation:fade .8s ease 1s forwards;}
.nd-pill-bg{fill:#fff;stroke:var(--accent);stroke-width:1.2;}
.nd-pill-tx{font:600 9px -apple-system,Arial,sans-serif;fill:var(--accent-ink);letter-spacing:.11em;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pop{from{opacity:0;transform:scale(.78);}to{opacity:1;transform:scale(1);}}
@keyframes fade{to{opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .nd-link,.nd-sys,.nd-wrap{animation:none;opacity:1;stroke-dashoffset:0;}
}


/* 6. FUNCTION GRID ========================================================= */

.fgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px;}
@media(min-width:640px){ .fgrid{grid-template-columns:1fr 1fr;gap:14px;} }
@media(min-width:900px){ .fgrid{grid-template-columns:repeat(3,1fr);gap:16px;} }

.fcard{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px;text-decoration:none;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease;
}
.fcard:hover{border-color:#CFD9EC;transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,32,64,.06);}
.fcard .ico{
  width:38px;height:38px;flex:none;border-radius:10px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.fcard .ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;
                stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.fcard h3{font-size:16.5px;font-weight:650;letter-spacing:-.012em;}
.fcard p{font-size:13.8px;color:var(--muted);line-height:1.5;margin-top:7px;flex:1;}
.fcard .go{
  font-size:13px;font-weight:600;color:var(--accent);margin-top:14px;
  display:inline-flex;align-items:center;gap:6px;
}
@media(prefers-reduced-motion:reduce){ .fcard,.fcard:hover{transition:none;transform:none;} }


/* 7. VIDEO EMBED =========================================================== */

.demo{max-width:840px;margin:0 auto;}
.video-wrap{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;
}
.video-wrap iframe,.video-wrap video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* placeholder shown until a real embed replaces it */
.video-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:24px;
  background:
    repeating-linear-gradient(45deg,var(--wash) 0 12px,#fff 12px 24px);
}
.video-ph .tag{
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:100px;padding:6px 14px;
}
.video-ph .ttl{font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--ink);}
.video-ph .sub{font-size:13px;color:var(--muted);max-width:34em;}

.demo-cap{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:52em;}
.demo-cap b{color:var(--ink-2);font-weight:600;}


/* 8. SECTIONS, BANDS, CALLOUTS ============================================ */

.band{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.two-col{display:grid;grid-template-columns:1fr;gap:26px;margin-top:24px;}
@media(min-width:900px){ .two-col{grid-template-columns:1fr 1fr;gap:40px;} }
.two-col p{font-size:15.5px;color:var(--ink-2);}
.two-col p + p{margin-top:14px;}

.prose p{font-size:15.5px;color:var(--ink-2);max-width:var(--readw);}
.prose p + p{margin-top:15px;}
.prose p b{color:var(--ink);font-weight:600;}

/* numbered step cards (how I work) */
.steps{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;}
@media(min-width:640px){ .steps{grid-template-columns:1fr 1fr;gap:18px;} }
.estep{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;}
.estep .num{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em;}
.estep h3{font-size:19px;margin-top:10px;letter-spacing:-.015em;}
.estep .form{font-size:12.5px;color:var(--muted);margin-top:4px;font-weight:500;}
.estep p{font-size:14px;color:var(--ink-2);margin-top:12px;}

/* accent callout — used for the /for-it pointer */
.xnote{
  margin-top:24px;background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:16px;padding:20px 22px;max-width:52em;
}
.xnote p{font-size:14.5px;color:var(--ink-2);}
.xnote b{color:var(--ink);font-weight:650;}
.xnote a{color:var(--accent-ink);font-weight:600;text-decoration:none;
         display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14.5px;}
.xnote a:hover{text-decoration:underline;}

.pnote{font-size:13px;color:var(--muted);margin-top:18px;max-width:44em;}

/* centered final CTA */
.final{text-align:center;padding:64px 0;}
@media(min-width:900px){ .final{padding:84px 0;} }
.final h2{font-size:27px;letter-spacing:-.025em;line-height:1.14;max-width:16em;margin:0 auto;}
@media(min-width:640px){ .final h2{font-size:32px;} }
.final p{font-size:15.5px;color:var(--ink-2);margin:14px auto 0;max-width:34em;}
.final .btn{margin-top:24px;}


/* 9. FUNCTION PAGE PARTS ================================================== */

/* page header shared by every interior page */
.phead{padding:34px 0 4px;}
@media(min-width:900px){ .phead{padding:54px 0 8px;} }
.phead h1{font-size:31px;letter-spacing:-.028em;margin-top:14px;max-width:15em;}
@media(min-width:640px){ .phead h1{font-size:38px;} }
@media(min-width:900px){ .phead h1{font-size:43px;} }
.phead .standfirst{font-size:16.5px;color:var(--ink-2);margin-top:16px;max-width:36em;}

/* today vs. with an agent */
.timegrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px;}
@media(min-width:640px){ .timegrid{grid-template-columns:1fr 1fr;gap:18px;} }
.tcol{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--card);}
.tcol.now{background:var(--wash);}
.tcol .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--muted);font-weight:600;}
.tcol.next .k{color:var(--accent);}
.tcol .t{font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:8px;line-height:1;}
.tcol.next .t{color:var(--accent);}
.tcol .t small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-.01em;}
.tcol ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px;}
.tcol li{font-size:13.5px;color:var(--ink-2);line-height:1.45;padding-left:17px;position:relative;}
.tcol li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
                 border-radius:50%;background:var(--line);}
.tcol.next li::before{background:var(--accent);}

.honest{
  font-size:12.8px;color:var(--muted);margin-top:16px;max-width:52em;
  border-left:2px solid var(--line);padding-left:14px;line-height:1.5;
}

/* the reply offer — the CTA on all seven function pages */
.reply{
  background:var(--ink);color:#fff;border-radius:22px;
  padding:30px 24px;margin-top:8px;
}
@media(min-width:640px){ .reply{padding:38px 40px;} }
.reply .eyebrow{color:#5EA0FF;}
.reply h2{font-size:25px;letter-spacing:-.022em;margin-top:12px;}
@media(min-width:640px){ .reply h2{font-size:29px;} }
.reply p{font-size:15.5px;color:rgba(255,255,255,.8);margin-top:12px;max-width:38em;}
.reply .mail{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  background:#fff;color:var(--ink);border-radius:11px;padding:13px 20px;
  font-size:15px;font-weight:650;text-decoration:none;letter-spacing:-.01em;
  transition:transform .12s ease;
}
.reply .mail:hover{transform:translateY(-1px);}
.reply .mail svg{width:17px;height:17px;stroke:var(--accent);fill:none;
                 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.reply .nocall{font-size:13px;color:rgba(255,255,255,.55);margin-top:14px;}

/* quiet secondary link — must not compete with the reply card */
.quiet{text-align:center;margin-top:20px;}
.quiet a{font-size:13px;color:var(--muted);text-decoration:underline;
         text-underline-offset:3px;text-decoration-color:var(--line);}
.quiet a:hover{color:var(--ink-2);text-decoration-color:var(--muted);}

/* sibling function pages */
.also{border-top:1px solid var(--line);margin-top:56px;padding-top:26px;}
.also .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--muted);font-weight:600;}
.also ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.also a{font-size:13px;color:var(--ink-2);text-decoration:none;background:var(--card);
        border:1px solid var(--line);border-radius:100px;padding:7px 14px;display:inline-block;}
.also a:hover{border-color:var(--accent);color:var(--accent-ink);}


/* 10. DIAGNOSTIC PAGE PARTS =============================================== */

.lenses{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;}
@media(min-width:900px){ .lenses{grid-template-columns:repeat(3,1fr);gap:16px;} }
/* flex column so the .q rule sits on a shared baseline across all three cards */
.lens{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;
      display:flex;flex-direction:column;}
.lens .ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);
           display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.lens .ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;
               stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.lens h3{font-size:17px;letter-spacing:-.014em;}
.lens p{font-size:13.8px;color:var(--muted);margin-top:8px;line-height:1.5;flex:1;}
.lens .q{font-size:13px;color:var(--ink-2);margin-top:12px;padding-top:12px;
         border-top:1px solid var(--line-2);font-weight:500;}

/* numbered deliverables */
.gets{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px;}
@media(min-width:640px){ .gets{grid-template-columns:1fr 1fr;gap:14px;} }
.gets li{display:flex;gap:13px;align-items:flex-start;background:var(--card);
         border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.gets .n{flex:none;width:22px;height:22px;border-radius:7px;background:var(--accent-soft);
         color:var(--accent);font-size:11.5px;font-weight:700;
         display:flex;align-items:center;justify-content:center;margin-top:1px;}
.gets .cat{font-size:14.5px;font-weight:650;letter-spacing:-.008em;}
.gets .sub{font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px;}

/* scope dials */
.dials{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px;}
@media(min-width:640px){ .dials{grid-template-columns:1fr 1fr;gap:18px;} }
.dial{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;}
.dial .d{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);
         display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.dial .d svg{width:18px;height:18px;stroke:var(--accent);fill:none;
             stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.dial h3{font-size:16px;letter-spacing:-.012em;}
.dial p{font-size:13.8px;color:var(--muted);margin-top:8px;line-height:1.5;}

/* price block */
.price{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:28px 24px;margin-top:26px;
}
@media(min-width:640px){ .price{padding:34px 36px;} }
.price .fee{font-size:52px;font-weight:700;letter-spacing:-.035em;line-height:1;}
@media(min-width:640px){ .price .fee{font-size:62px;} }
.price .feecap{font-size:14.5px;color:var(--muted);margin-top:10px;}
.terms{display:grid;grid-template-columns:1fr;gap:0;margin-top:24px;
       border:1px solid var(--line);border-radius:14px;overflow:hidden;}
@media(min-width:640px){ .terms{grid-template-columns:repeat(3,1fr);} }
.term{padding:16px 18px;}
.term + .term{border-top:1px solid var(--line);}
@media(min-width:640px){ .term + .term{border-top:0;border-left:1px solid var(--line);} }
.term .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--muted);margin-bottom:6px;font-weight:600;}
.term .v{font-size:15px;font-weight:700;letter-spacing:-.015em;}
.term .v small{display:block;font-size:12px;font-weight:400;color:var(--muted);
               margin-top:4px;letter-spacing:0;}

/* what it is not */
.not{background:var(--stop-soft);border:1px solid var(--stop-line);
     border-radius:18px;padding:22px;margin-top:26px;}
.not .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--stop);font-weight:700;margin-bottom:12px;}
.not ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.not li{font-size:13.8px;color:#7A4A30;line-height:1.45;padding-left:20px;position:relative;}
.not li::before{content:"\2715";position:absolute;left:0;top:1px;color:var(--stop);
                font-size:10px;font-weight:700;}
.not li b{color:var(--stop);font-weight:650;}


/* 11. FOR-IT PAGE ========================================================= */

/* This page reads as documentation, not marketing. Tighter measure, numbered
   sections, a contents block a reviewer can scan before committing to read. */

.toc{background:var(--card);border:1px solid var(--line);border-radius:18px;
     padding:22px;margin-top:26px;}
.toc .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--muted);font-weight:600;margin-bottom:12px;}
.toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:1fr;gap:2px;}
@media(min-width:640px){ .toc ol{grid-template-columns:1fr 1fr;gap:2px 26px;} }
.toc li{counter-increment:toc;}
.toc a{display:flex;gap:10px;font-size:14px;color:var(--ink-2);text-decoration:none;
       padding:7px 0;border-bottom:1px solid var(--line-2);}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--accent);
               font-weight:700;font-size:11.5px;padding-top:3px;flex:none;}
.toc a:hover{color:var(--accent-ink);}

.doc{counter-reset:doc;}
.docsec{padding-top:44px;}
.docsec .num{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.06em;}
.docsec h2{font-size:23px;letter-spacing:-.02em;margin-top:8px;}
@media(min-width:640px){ .docsec h2{font-size:26px;} }
.docsec > p,.docsec > ul,.docsec > ol{max-width:var(--readw);}
.docsec p{font-size:15.5px;color:var(--ink-2);margin-top:14px;}
.docsec p b{color:var(--ink);font-weight:650;}
.docsec h3{font-size:15.5px;margin-top:24px;letter-spacing:-.01em;}

.doclist{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.doclist li{font-size:15px;color:var(--ink-2);line-height:1.5;
            padding-left:20px;position:relative;}
.doclist li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
                    border-radius:50%;background:var(--accent);}
.doclist li b{color:var(--ink);font-weight:650;}

/* read vs write, and other two-column fact tables */
.tablewrap{overflow-x:auto;margin-top:18px;-webkit-overflow-scrolling:touch;}
table.facts{border-collapse:collapse;width:100%;min-width:520px;background:var(--card);
            border:1px solid var(--line);border-radius:14px;overflow:hidden;}
table.facts th,table.facts td{
  text-align:left;font-size:13.8px;padding:12px 16px;
  border-bottom:1px solid var(--line-2);vertical-align:top;
}
table.facts th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
               color:var(--muted);font-weight:600;background:var(--wash);}
table.facts td{color:var(--ink-2);}
table.facts td:first-child{color:var(--ink);font-weight:600;white-space:nowrap;}
table.facts tr:last-child td{border-bottom:0;}
/* specificity has to beat `table.facts td` above, hence the td qualifier */
table.facts td.yes,.yes{color:#127A3E;font-weight:650;}
table.facts td.no,.no{color:var(--stop);font-weight:650;}

/* explicit scope boundaries */
.bounds{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;}
@media(min-width:640px){ .bounds{grid-template-columns:1fr 1fr;} }
.bounds li{display:flex;gap:11px;align-items:flex-start;background:var(--stop-soft);
           border:1px solid var(--stop-line);border-radius:13px;padding:14px 16px;
           font-size:13.8px;color:#7A4A30;line-height:1.45;}
.bounds li::before{content:"\2715";color:var(--stop);font-size:10px;font-weight:700;
                   flex:none;padding-top:3px;}
.bounds li b{color:var(--stop);font-weight:650;}

/* download strip */
.dl{background:var(--wash);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px;margin-top:44px;display:flex;flex-direction:column;gap:16px;}
@media(min-width:640px){
  .dl{flex-direction:row;align-items:center;justify-content:space-between;padding:28px 32px;}
}
.dl h2{font-size:20px;letter-spacing:-.018em;}
.dl p{font-size:14px;color:var(--muted);margin-top:7px;max-width:38em;}
.dl .btn{flex:none;}

/* printed-document header/footer — hidden on screen, revealed for print */
.printonly{display:none;}


/* 12. ABOUT PAGE ========================================================== */

.arc{list-style:none;margin-top:26px;border-left:2px solid var(--line);
     padding-left:22px;display:flex;flex-direction:column;gap:24px;}
.arc li{position:relative;}
.arc li::before{content:"";position:absolute;left:-28px;top:6px;width:10px;height:10px;
                border-radius:50%;background:var(--accent);border:2px solid var(--canvas);}
.arc .org{font-size:17px;font-weight:700;letter-spacing:-.015em;}
.arc .role{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:3px;
           letter-spacing:.02em;}
.arc p{font-size:14.5px;color:var(--ink-2);margin-top:9px;max-width:44em;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chips span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--card);
            border:1px solid var(--line);border-radius:100px;padding:6px 14px;}

.contactcard{background:var(--card);border:1px solid var(--line);border-radius:20px;
             padding:24px;margin-top:26px;}
.contactcard .row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;}
.contactcard a,.contactcard span.v{font-size:14.5px;color:var(--ink-2);text-decoration:none;}
.contactcard a:hover{color:var(--accent);}


/* 13. FOOTER ============================================================== */

.foot{border-top:1px solid var(--line);padding:30px 0 36px;margin-top:auto;}
.foot .wrap{display:flex;flex-direction:column;gap:18px;}
@media(min-width:900px){
  .foot .wrap{flex-direction:row;justify-content:space-between;align-items:center;gap:24px;}
}
.foot .contact{display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;
               font-size:13px;color:var(--muted);}
.foot .contact a{color:var(--ink-2);text-decoration:none;}
.foot .contact a:hover{color:var(--accent);}
.foot .dot{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none;}
@media(max-width:899px){ .foot .dot{display:none;} }
.foot .contact .sep{width:100%;height:0;}


/* 14. PRINT =============================================================== */
/* Target: window.print() on for-it.html produces a clean letter-size document
   an IT reviewer can circulate. No nav, no buttons, no calendar. */

@media print{
  @page{ size:Letter; margin:0.6in; }

  html,body{background:#fff;color:#000;font-size:10.5pt;line-height:1.42;}

  /* strip every piece of site chrome */
  .nav,.navtoggle,.navlinks,.foot,.skip,.dl,.btn,.quiet,.also,.reply,.toc{display:none !important;}

  /* printed letterhead + closing contact block */
  .printonly{display:block;}
  .print-head{
    display:flex;justify-content:space-between;align-items:flex-start;
    border-bottom:1pt solid #C9CDD4;padding-bottom:10pt;margin-bottom:16pt;
  }
  .print-head .mark{width:26pt;height:26pt;}
  .print-head .logo{display:flex;gap:8pt;align-items:center;}
  .print-head .n{font-size:11pt;font-weight:700;}
  .print-head .t{font-size:6.5pt;letter-spacing:.2em;text-transform:uppercase;color:#6E6E73;}
  .print-head .meta{text-align:right;font-size:8pt;color:#6E6E73;line-height:1.5;}
  .print-foot{
    border-top:1pt solid #C9CDD4;margin-top:20pt;padding-top:10pt;
    font-size:8.5pt;color:#3A3A3C;line-height:1.5;
  }
  .print-foot b{font-weight:700;color:#000;}

  .wrap{max-width:none;padding:0;}
  .phead{padding:0;}
  .phead h1{font-size:22pt;max-width:none;}
  .phead .standfirst{font-size:11pt;margin-top:8pt;max-width:none;}
  section.block{padding:0;}

  .docsec{padding-top:16pt;break-inside:avoid;page-break-inside:avoid;}
  .docsec h2{font-size:13.5pt;margin-top:4pt;}
  .docsec h3{font-size:11pt;margin-top:12pt;}
  .docsec p,.doclist li{font-size:10pt;color:#1D1D1F;max-width:none;}
  .docsec .num{font-size:8.5pt;}

  .tablewrap{overflow:visible;}
  table.facts{min-width:0;font-size:9pt;break-inside:avoid;page-break-inside:avoid;}
  table.facts th,table.facts td{padding:6pt 8pt;font-size:9pt;}
  table.facts th{background:#F4F6FA !important;-webkit-print-color-adjust:exact;
                 print-color-adjust:exact;}

  .bounds{gap:6pt;}
  .bounds li{background:#fff;border:0.75pt solid #C9CDD4;padding:7pt 9pt;font-size:9.5pt;
             color:#1D1D1F;break-inside:avoid;}

  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  a{color:#000;text-decoration:none;}
}