/* iautomateit brand (Dilon 2026-11-08): navy #14213D, cream #F4EDE0, coral #FF6B5B,
   Inter Tight headings + Inter body. Loaded LAST on every marketing page so it wins
   the cascade; page CSS keeps using the role tokens (--ground, --ink, --blue...).
   RULE (Dilon): coral ONLY on the primary button we most want clicked (.btn, not
   .btn.ghost). Every other accent is cream on navy. */
:root{
  --navy:#14213D;--navy-2:#1A2A4C;--navy-3:#22355C;
  --cream:#F4EDE0;--coral:#FF6B5B;--coral-ink:#14213D;
  --ground:#14213D;--ink:#F4EDE0;--blue:#F4EDE0;--lime:#F4EDE0;
  --dim:#B9B4AA;--rule:rgba(244,237,224,.14);--panel:#1A2A4C;
  --display:'Inter Tight','Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --pixel:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  color-scheme:dark;
}
html{background:var(--navy)}
body{background:var(--navy);color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased}
/* page-wide atmosphere: soft lighter-navy glow and fine vertical ribbing of the reference */
body::before{background-image:
  repeating-linear-gradient(90deg,rgba(244,237,224,.025) 0 1px,transparent 1px 6px),
  radial-gradient(60% 40% at 50% 0%,rgba(80,108,168,.22),transparent 70%)!important;
  background-size:auto!important;background-repeat:no-repeat!important;opacity:1!important}

/* headings: Inter Tight, sentence case like the reference */
h1,h2,h3,.display,.h2,.h3{font-family:var(--display)}
.display,.h2{text-transform:none!important;letter-spacing:-.04em}
.hero .display,.hero .display *{text-transform:none!important}
.hero .pick{text-transform:lowercase!important}
.foot-big{font-family:var(--display);text-transform:none!important;letter-spacing:-.04em;font-weight:700}
.mono,.shot-bar span,.post-meta{letter-spacing:.08em}

/* links and accents: cream, links underlined so they still read as links */
.blue,.post-go,.resource-browse,.resource-label,.post-meta,.opt-meta,.opt-for,.work-n,.step-c .n,.opt-top .n,.facts li span:last-child{color:var(--cream)!important}
.post-go,.resource-browse{text-decoration:underline;text-decoration-color:rgba(244,237,224,.4);text-underline-offset:3px}
:focus-visible{outline-color:var(--cream)!important}

/* nav: navy glass bar, cream lowercase wordmark */
header.nav,header.nav.stuck{background:rgba(20,33,61,.72)!important;border-bottom:1px solid rgba(244,237,224,.10)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.nav,header.nav.stuck{background:rgba(20,33,61,.96)!important}}
@media(prefers-reduced-transparency:reduce){header.nav,header.nav.stuck{background:var(--navy)!important}}
.mark,.load-mark span{font-family:var(--display)!important;background:transparent!important;color:var(--cream)!important;border:0!important;padding:6px 0!important;letter-spacing:-.02em!important;font-weight:700!important;text-transform:lowercase}
.slots{color:var(--cream)}
.slots b{background:var(--cream);border-color:var(--cream);border-radius:50%}

/* buttons: coral pill = the one action we want; everything else cream outline */
.btn{background:var(--coral);color:var(--coral-ink);border-color:var(--coral);border-radius:999px;font-weight:600}
.btn:hover{background:var(--cream);border-color:var(--cream);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(244,237,224,.4)}
.btn.ghost:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.cta-motion::before{background:var(--cream)!important;opacity:.18!important}
.tag{background:rgba(244,237,224,.08);color:var(--cream);border:1px solid rgba(244,237,224,.16);border-radius:999px}
.transition-block{background:var(--navy-2)}

/* hero: the painting stays, under a navy wash so cream type reads */
.hero{background-color:transparent!important}
.hero>.hero-media{background:var(--navy-2)!important;border-radius:18px!important;
  box-shadow:0 0 0 1px rgba(244,237,224,.10),0 24px 60px -20px rgba(0,0,0,.55)!important}
.hero-media .hm-in{border-radius:18px!important}
.hero-media::before,.hero-media::after{display:none!important}
.hero-media .hm-in::after{mix-blend-mode:normal!important;background:
  repeating-linear-gradient(90deg,rgba(244,237,224,.035) 0 1px,transparent 1px 5px),
  linear-gradient(180deg,rgba(20,33,61,.94) 0%,rgba(20,33,61,.82) 38%,rgba(20,33,61,.35) 66%,rgba(20,33,61,.15) 100%)!important}
.hero-card,.hero-card .display,.hero-card .lead{color:var(--cream)!important}
.hero-card .hero-method,.hero-card .hero-offer{color:#E6DFD2!important}
.hero-foot{color:var(--dim)!important}
.pick s{background:var(--navy);border-color:var(--cream)}
.pick.hit::before{background:rgba(244,237,224,.18)!important}
.vc b{background:rgba(34,53,92,.92)!important;color:var(--cream)!important}
.vc.in b{background:rgba(244,237,224,.92)!important;color:var(--navy)!important}

/* surfaces: cards step up in lightness, rounded like the reference */
.shot,.sheet,.resource-feature,.guide-tile,.step-c{background:var(--navy-2)!important;border-color:var(--rule)!important}
.shot,.resource-feature{border-radius:14px}
.guide-tile{color:var(--cream)!important}
.steps{background:var(--rule)}
.section-painting{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(244,237,224,.10),0 20px 50px -24px rgba(0,0,0,.6)!important}
.resource-cover{border-color:var(--rule)!important}
@media(hover:hover){.guide-tile:hover{background:var(--navy-3)!important;border-color:rgba(244,237,224,.32)!important}
  .resource-row:hover,.post-row:hover{background:var(--navy-2)!important}}
.portfolio-image-link{background:var(--navy-2)!important;border-color:var(--rule)!important}
.shot.mock img,.shot video{background:var(--navy-2)!important}
.opt-line{background:var(--rule)}

/* SVG illustrations: cream marks, navy ticks */
.hf-slot{fill:var(--cream)!important;stroke:var(--cream)!important}
.hf-slot-check,.hf-day-check{stroke:var(--navy)!important}
.hf-day{fill:var(--cream)!important;stroke:var(--cream)!important}
.hf-guarantee-icon *,.hf-audit-icon *{stroke:var(--cream)!important}
.system-path li::before{background:var(--cream)!important}

/* guarantee: a raised navy card, not a coloured block */
#guarantee{background:var(--navy-2)!important;border:1px solid var(--rule)!important;border-radius:18px;color:var(--cream)!important}
#guarantee h3,#guarantee p{color:var(--cream)!important}

/* email buttons: secondary, cream outline */
.email-button{background:transparent!important;color:var(--cream)!important;border-color:rgba(244,237,224,.4)!important;border-radius:999px}
@media(hover:hover){.email-button:hover{background:var(--cream)!important;color:var(--navy)!important;border-color:var(--cream)!important}}

/* application popup + diary */
dialog.apply::backdrop{background:rgba(10,16,30,.7)}
.sheet{border-radius:18px;color:var(--cream)}
.x{border-color:rgba(244,237,224,.4)!important;border-radius:50%}
.x:hover{background:var(--cream)!important;color:var(--navy)!important}
.pips i{background:var(--rule)}.pips i.now,.pips i.done{background:var(--cream)}
input,select,textarea{color:var(--cream)}
input::placeholder,textarea::placeholder{color:#8E8A84}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--cream)!important}
.bk-grid button.on,.bk-times button.on{background:var(--cream)!important;border-color:var(--cream)!important;color:var(--navy)!important}
.bk-nav button:hover:not(:disabled),.bk-times button:hover{background:rgba(244,237,224,.12)!important;color:var(--cream)!important}
select option{background:var(--navy);color:var(--cream)}
.sheet h2,.sheet h3,.sheet .h2{text-transform:none!important;font-family:var(--display)}
.audit-availability::before{background:var(--cream)!important}

/* subpages (blog, case studies): sentence-case headings, dark panels, readable highlights */
h1,h2,h3{text-transform:none!important}
h1 mark,h2 mark{background:var(--cream)!important;color:var(--navy)!important}
.v,.v-steps,.v-check{background:var(--navy-2)!important;border-color:var(--rule)!important}
.v-compare>div+div{background:var(--navy-3)!important;border-left-color:var(--rule)!important}
.v-steps li::before{background:var(--cream)!important;color:var(--navy)!important;border-color:var(--cream)!important}
.v-check li::before{background:transparent!important;border-color:var(--cream)!important}
.v-bar i{background:var(--cream)!important}
.time-note{background:var(--navy-2)!important;border:1px solid var(--rule);color:var(--cream)!important}