/* ============================================================
   Datum — robotics supply
   Shared stylesheet. Edit brand colours in :root only.
   ============================================================ */

:root{
  --field:#EAF2FC;
  --paper:#F8FBFF;
  --graphite:#071426;
  --graphite-soft:#597087;
  --rule:#B7CDE5;
  --rule-faint:#D8E5F2;
  --signal:#2878FF;
  --signal-hi:#31D6F6;
  --alert:#8C3A22;
  --ok:#1687DE;

  --sans:Arial,"Segoe UI",sans-serif;
  --cond:Arial,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gut:clamp(1.25rem,4vw,3rem);
  --maxw:1180px;
  --readw:74ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0;background:var(--field);color:var(--graphite);
  font-family:var(--sans);font-size:clamp(1rem,0.97rem + 0.15vw,1.075rem);
  line-height:1.6;font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-family:var(--cond);font-weight:600;letter-spacing:-0.012em;line-height:1.08;margin:0}
p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--signal);color:var(--graphite);padding:0.6rem 1rem;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:1px solid var(--graphite);background:var(--signal);
  color:var(--graphite);font-family:var(--cond);font-weight:600;font-size:1rem;
  padding:0.62rem 1.15rem;text-decoration:none;cursor:pointer;border-radius:2px;
}
.btn:hover{background:var(--signal-hi)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border-color:var(--rule)}
.btn-ghost:hover{background:var(--paper);border-color:var(--graphite)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:40}
.masthead .wrap{display:flex;align-items:center;gap:1.25rem;min-height:60px}
.mark{font-family:var(--cond);font-weight:700;font-size:1.32rem;letter-spacing:-0.02em;text-decoration:none;white-space:nowrap}
.mark span{color:var(--graphite-soft);font-weight:500}
.navlinks{display:flex;gap:1.25rem;margin-left:auto;font-size:0.9rem}
.navlinks a{text-decoration:none;color:var(--graphite-soft);padding-block:0.4rem;white-space:nowrap}
.navlinks a:hover{color:var(--graphite)}
.navlinks a[aria-current="page"]{color:var(--graphite);box-shadow:inset 0 -2px 0 var(--signal)}
.masthead .btn{padding:0.45rem 0.9rem;font-size:0.95rem}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:2px;padding:0.4rem 0.7rem;font-family:var(--mono);font-size:0.85rem;cursor:pointer}
@media(max-width:900px){
  .navlinks{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:0.5rem var(--gut) 1rem;margin:0;
  }
  .navlinks[hidden]{display:none}
  .navlinks a{padding:0.7rem 0;border-top:1px solid var(--rule-faint);font-size:1rem}
  .navtoggle{display:block}
  .masthead .btn{margin-left:0.5rem}
}

/* ---------- page title block (drawing convention) ---------- */
.titleblock{background:var(--paper);border-bottom:1px solid var(--rule)}
.titleblock .wrap{padding-block:clamp(2rem,5vw,3.25rem)}
.crumbs{font-family:var(--mono);font-size:0.76rem;color:var(--graphite-soft);margin-bottom:0.9rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.titleblock h1{font-size:clamp(2rem,1.3rem + 2.9vw,3.35rem);max-width:22ch;margin-bottom:0.7rem}
.titleblock .lede{max-width:64ch;color:var(--graphite-soft);font-size:clamp(1.02rem,0.99rem + 0.25vw,1.14rem);margin:0}

/* ---------- hero (home) ---------- */
.hero{padding-block:clamp(2.5rem,6.5vw,4.5rem) clamp(2.25rem,5.5vw,3.75rem)}
.hero h1{font-size:clamp(2.25rem,1.15rem + 4.8vw,4.1rem);max-width:19ch;margin-bottom:1rem}
.hero .lede{max-width:60ch;font-size:clamp(1.05rem,1rem + 0.3vw,1.2rem);color:var(--graphite-soft);margin-bottom:2.1rem}

/* ---------- BOM console ---------- */
.console{background:var(--graphite);color:#E7EAE7;border-radius:3px;box-shadow:0 0 0 1px var(--graphite);overflow:hidden}
.console-bar{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;padding:0.6rem clamp(0.9rem,2.5vw,1.4rem);border-bottom:1px solid #39434B;font-family:var(--mono);font-size:0.75rem;color:#93A0A8}
.console-bar b{color:#E7EAE7;font-weight:500}
.console-bar .sep{color:#4E5A63}
.console-body{padding:clamp(0.9rem,2.5vw,1.4rem)}
.console label{display:block;font-family:var(--cond);font-weight:600;font-size:1.06rem;margin-bottom:0.15rem}
.console .hint{font-size:0.86rem;color:#93A0A8;margin-bottom:0.7rem}
.console textarea{
  width:100%;min-height:158px;resize:vertical;background:#161C21;color:#E7EAE7;
  border:1px solid #39434B;border-radius:2px;font-family:var(--mono);font-size:0.845rem;
  line-height:1.65;padding:0.8rem 0.9rem;
}
.console textarea::placeholder{color:#5E6B74}
.console textarea:focus{border-color:var(--signal)}
.console-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:0.9rem}
.tally{font-family:var(--mono);font-size:0.8rem;color:#93A0A8}
.linkish{background:none;border:0;color:#93A0A8;font-family:var(--sans);font-size:0.85rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0.3rem 0}
.linkish:hover{color:#E7EAE7}
.parsed{margin-top:1.1rem;border-top:1px solid #39434B;padding-top:0.9rem}
.parsed[hidden]{display:none}
table.rows{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.79rem}
table.rows th{text-align:left;font-weight:500;color:#7E8C95;padding:0 0.6rem 0.4rem 0;border-bottom:1px solid #39434B;white-space:nowrap}
table.rows td{padding:0.38rem 0.6rem 0.38rem 0;border-bottom:1px solid #262E35;vertical-align:top}
table.rows tr:last-child td{border-bottom:0}
.cat{display:inline-block;padding:0.05rem 0.42rem;border:1px solid #4E5A63;border-radius:2px;color:#B9C4CB;font-size:0.73rem;white-space:nowrap}
.cat.unknown{border-color:var(--signal);color:var(--signal)}
.qty{color:#E7EAE7}
.rowfoot{font-size:0.8rem;color:#93A0A8;margin-top:0.7rem;font-family:var(--sans)}
.capture{margin-top:1rem;padding-top:0.95rem;border-top:1px solid #39434B}
.capture[hidden]{display:none}
.capture-grid{display:flex;gap:0.6rem;flex-wrap:wrap;align-items:flex-start}
.capture input{flex:1 1 240px;background:#161C21;color:#E7EAE7;border:1px solid #39434B;border-radius:2px;font-family:var(--sans);font-size:0.95rem;padding:0.66rem 0.8rem;min-width:0}
.capture input:focus{border-color:var(--signal)}
.capture .note{font-size:0.8rem;color:#7E8C95;margin:0.6rem 0 0}
.sent{font-family:var(--cond);font-weight:600;font-size:1.12rem;color:var(--signal);margin:0}
.sent + p{font-size:0.9rem;color:#93A0A8;margin:0.35rem 0 0}

/* ---------- bands & blocks ---------- */
.band{background:var(--paper);border-block:1px solid var(--rule)}
.band + .band{border-top:0}
section.blk{padding-block:clamp(2.6rem,5.5vw,4rem)}
.blk > .wrap > h2{font-size:clamp(1.6rem,1.2rem + 1.55vw,2.35rem);max-width:24ch;margin-bottom:0.55rem}
.blk .sub{max-width:62ch;color:var(--graphite-soft);margin-bottom:1.9rem}

/* ---------- image placeholders / photos ---------- */
figure{margin:0}
.shot{border:1px solid var(--rule);border-radius:2px;background:var(--paper);overflow:hidden}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover}
.shot.wide img{aspect-ratio:16/9}
.shot.sq img{aspect-ratio:1/1}
figcaption{font-size:0.83rem;color:var(--graphite-soft);padding-top:0.55rem}

/* ---------- capability index ---------- */
.index{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:0 clamp(1.5rem,4vw,3.25rem)}
.grp{border-top:2px solid var(--graphite);padding:0.85rem 0 1.4rem}
.grp h3{font-size:1.16rem;margin-bottom:0.3rem}
.grp h3 a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--rule)}
.grp h3 a:hover{box-shadow:inset 0 -2px 0 var(--signal)}
.grp p{font-size:0.9rem;color:var(--graphite-soft);margin:0 0 0.55rem}
.grp ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:0.795rem;line-height:1.85}
.grp li{border-bottom:1px dotted var(--rule-faint);display:flex;justify-content:space-between;gap:1rem}
.grp li span{color:var(--graphite-soft);white-space:nowrap}

/* ---------- category cards with photos ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.5vw,1.8rem)}
.card{border:1px solid var(--rule);border-radius:2px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--rule)}
.card .body{padding:1rem 1.1rem 1.2rem;display:flex;flex:1;flex-direction:column}
.card h3{font-size:1.1rem;margin-bottom:0.3rem}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card:hover{border-color:var(--graphite)}
.card p{font-size:0.9rem;color:var(--graphite-soft);margin:0}
.card .meta{font-family:var(--mono);font-size:0.75rem;color:var(--graphite-soft);margin-top:auto;padding-top:0.7rem}
@media(max-width:850px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}

/* ---------- process ---------- */
ol.flow{list-style:none;counter-reset:s;margin:0;padding:0;max-width:78ch}
ol.flow li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:0 1.1rem;padding:1.15rem 0;border-top:1px solid var(--rule-faint)}
ol.flow li:first-child{border-top:1px solid var(--graphite)}
ol.flow li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:0.88rem;color:var(--graphite-soft);padding-top:0.16rem}
ol.flow h3{font-size:1.13rem;margin-bottom:0.22rem}
ol.flow p{font-size:0.945rem;color:var(--graphite-soft);margin:0}
ol.flow p + p{margin-top:0.5rem}
.when{font-family:var(--mono);font-size:0.78rem;color:var(--graphite);background:var(--field);padding:0.05rem 0.4rem;border-radius:2px;margin-left:0.5rem;white-space:nowrap}
.band .when{background:var(--field)}

/* ---------- scope ---------- */
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.5rem,4vw,3rem)}
.scope h3{font-size:1.16rem;padding-bottom:0.6rem;margin-bottom:0.9rem;border-bottom:2px solid var(--graphite)}
.scope ul{list-style:none;margin:0;padding:0}
.scope li{padding:0.6rem 0 0.6rem 1.55rem;border-bottom:1px solid var(--rule-faint);position:relative;font-size:0.945rem}
.scope li::before{position:absolute;left:0;top:0.6rem;font-family:var(--mono);font-size:0.9rem}
.yes li::before{content:"+";color:var(--ok)}
.no li::before{content:"\2013";color:var(--alert)}
.scope .why{display:block;color:var(--graphite-soft);font-size:0.855rem;margin-top:0.15rem}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:0.925rem;min-width:640px}
.cmp caption{text-align:left;color:var(--graphite-soft);font-size:0.875rem;padding-bottom:0.7rem}
.cmp th,.cmp td{text-align:left;padding:0.72rem 0.9rem 0.72rem 0;border-bottom:1px solid var(--rule-faint);vertical-align:top}
.cmp thead th{font-family:var(--cond);font-weight:600;font-size:1rem;border-bottom:2px solid var(--graphite)}
.cmp tbody th{font-weight:500;color:var(--graphite-soft);width:12rem}
.cmp td.ours,.cmp thead th.ours{background:var(--field);padding-inline:0.9rem}
.cmp td.ours{font-weight:500}
.spec{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.82rem;min-width:560px}
.spec th{text-align:left;font-weight:500;color:var(--graphite-soft);border-bottom:2px solid var(--graphite);padding:0 0.9rem 0.5rem 0;white-space:nowrap}
.spec td{padding:0.55rem 0.9rem 0.55rem 0;border-bottom:1px solid var(--rule-faint);vertical-align:top}

/* ---------- fee cards ---------- */
.fee{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(1.4rem,3.5vw,2.5rem);align-items:start}
.fee-card{border:1px solid var(--rule);border-radius:2px;padding:1.4rem;background:var(--paper)}
.band .fee-card{background:var(--field);border-color:var(--rule)}
.fee-card.lead{border-color:var(--graphite);border-width:2px}
.fee-card h3{font-size:1.16rem;margin-bottom:0.15rem}
.fee-card .rate{font-family:var(--cond);font-weight:700;font-size:2.3rem;line-height:1;margin:0.5rem 0 0.15rem}
.fee-card .rate small{font-family:var(--mono);font-weight:400;font-size:0.85rem;color:var(--graphite-soft);letter-spacing:0}
.fee-card p{font-size:0.92rem;color:var(--graphite-soft);margin:0.7rem 0 0}
.fee-card ul{list-style:none;margin:0.9rem 0 0;padding:0;font-size:0.9rem}
.fee-card li{padding:0.42rem 0;border-top:1px dotted var(--rule-faint)}

/* ---------- faq / details ---------- */
.faq{max-width:var(--readw)}
details{border-top:1px solid var(--rule-faint);padding:0.2rem 0}
details:first-of-type{border-top:1px solid var(--graphite)}
summary{font-family:var(--cond);font-weight:600;font-size:1.08rem;cursor:pointer;padding:0.85rem 2rem 0.85rem 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0.35rem;top:0.78rem;font-family:var(--mono);font-weight:400;color:var(--graphite-soft)}
details[open] summary::after{content:"\2013"}
details p{font-size:0.945rem;color:var(--graphite-soft);padding-bottom:0.85rem;margin:0;max-width:68ch}

/* ---------- article ---------- */
.article{max-width:var(--readw);margin-inline:auto}
.article h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,1.95rem);margin:2.4rem 0 0.7rem}
.article h3{font-size:1.18rem;margin:1.8rem 0 0.5rem}
.article p{margin-bottom:1.05em}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.3rem}
.article li{margin-bottom:0.45em}
.article a{text-decoration:underline;text-underline-offset:3px}
.article .shot{margin:1.8rem 0}
.pullout{border-left:3px solid var(--signal);background:var(--paper);padding:1rem 1.2rem;margin:1.6rem 0;font-size:0.96rem}
.band .pullout{background:var(--field)}
.pullout p:last-child{margin-bottom:0}
.byline{font-family:var(--mono);font-size:0.78rem;color:var(--graphite-soft);border-top:1px solid var(--rule-faint);border-bottom:1px solid var(--rule-faint);padding:0.6rem 0;margin-bottom:2rem}

/* ---------- guide list ---------- */
.postlist{list-style:none;margin:0;padding:0;max-width:82ch}
.postlist li{border-top:1px solid var(--rule-faint);padding:1.2rem 0}
.postlist li:first-child{border-top:1px solid var(--graphite)}
.postlist h3{font-size:1.2rem;margin-bottom:0.3rem}
.postlist h3 a{text-decoration:none}
.postlist h3 a:hover{box-shadow:inset 0 -2px 0 var(--signal)}
.postlist p{font-size:0.94rem;color:var(--graphite-soft);margin:0}
.postlist .meta{font-family:var(--mono);font-size:0.76rem;color:var(--graphite-soft);margin-top:0.5rem}

/* ---------- contact form ---------- */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem 1.25rem;max-width:760px}
.field{display:flex;flex-direction:column;gap:0.3rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--cond);font-weight:600;font-size:0.98rem}
.field .help{font-size:0.83rem;color:var(--graphite-soft)}
.field input,.field textarea,.field select{
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;color:var(--graphite);
  font-family:var(--sans);font-size:1rem;padding:0.66rem 0.75rem;width:100%;
}
.field textarea{min-height:150px;resize:vertical;font-family:var(--mono);font-size:0.87rem;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--graphite);outline:2px solid var(--signal);outline-offset:1px}
.formnote{font-size:0.86rem;color:var(--graphite-soft);max-width:60ch;margin-top:1rem}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.5rem,4vw,3rem);align-items:start}
.split.narrow{grid-template-columns:minmax(260px,1fr) minmax(300px,1.4fr)}
@media(max-width:760px){.split.narrow{grid-template-columns:1fr}}

/* ---------- closer ---------- */
.closer{background:var(--graphite);color:#E7EAE7;padding-block:clamp(2.6rem,5.5vw,4rem)}
.closer h2{font-size:clamp(1.65rem,1.2rem + 1.7vw,2.5rem);max-width:20ch;margin-bottom:0.75rem}
.closer p{color:#A6B2B9;max-width:56ch}
.closer .btn{margin-top:0.6rem;border-color:var(--signal)}
.closer a:not(.btn){color:#D7DEE2}

/* ---------- footer ---------- */
footer{background:var(--paper);border-top:1px solid var(--rule);padding-block:2.25rem;font-size:0.875rem}
.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:1.75rem}
.foot h4{font-family:var(--cond);font-size:0.98rem;margin-bottom:0.5rem}
.foot ul{list-style:none;margin:0;padding:0;line-height:2}
.foot a{color:var(--graphite-soft);text-decoration:none}
.foot a:hover{color:var(--graphite);text-decoration:underline;text-underline-offset:3px}
.foot p{color:var(--graphite-soft);max-width:32ch;margin:0}
.colophon{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--rule-faint);color:var(--graphite-soft);font-family:var(--mono);font-size:0.75rem;display:flex;gap:1.25rem;flex-wrap:wrap}

/* ---------- utility ---------- */
.mt0{margin-top:0}
.center{text-align:center}
.big404{font-family:var(--cond);font-weight:700;font-size:clamp(4rem,18vw,10rem);line-height:0.9;margin:0 0 1rem}

/* Technology-blue visual layer — no external assets */
body{background:radial-gradient(circle at 80% 0,rgba(40,120,255,.09),transparent 28%),var(--field)}
.topline{background:linear-gradient(90deg,#071426,#124898,#071426);color:#c8e9ff;text-align:center;padding:.48rem 1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em}
.masthead{background:rgba(248,251,255,.92);backdrop-filter:blur(16px);border-color:#c5d8ed}.masthead .wrap{min-height:70px}.mark{color:#071426}.mark:before{content:"◆";display:inline-grid;place-items:center;width:2rem;height:2rem;margin-right:.55rem;border-radius:.55rem;background:linear-gradient(135deg,#2878ff,#31d6f6);color:white;font-size:.72rem;box-shadow:0 8px 25px rgba(40,120,255,.25)}
.btn{border:0;border-radius:.65rem;background:linear-gradient(135deg,#256cff,#168eff);color:white;box-shadow:0 9px 25px rgba(35,111,255,.22);transition:transform .2s,box-shadow .2s}.btn:hover{background:linear-gradient(135deg,#1f61e8,#0f80e0);transform:translateY(-2px);box-shadow:0 13px 34px rgba(35,111,255,.32)}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(40,128,255,.3),transparent 27%),linear-gradient(145deg,#061426,#0a2448);color:white;border-bottom:1px solid #174c80}.hero:before,.titleblock:before,.closer:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(90,168,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(90,168,255,.08) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.hero .wrap,.titleblock .wrap,.closer .wrap{position:relative}.hero h1{font-weight:700;letter-spacing:-.045em}.hero .lede{color:#b8cee0}
.titleblock{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 10%,rgba(40,128,255,.25),transparent 28%),linear-gradient(145deg,#061426,#0a2448);color:white;border-color:#174c80}.titleblock .lede{color:#b8cee0}.crumbs,.crumbs a{color:#76badf}
.console{border:1px solid #1e5792;border-radius:.9rem;background:linear-gradient(145deg,#07182e,#0c2b52);box-shadow:0 26px 70px rgba(10,54,110,.2)}.console textarea,.capture input{border-radius:.55rem;background:#07172b;border-color:#265783}.console-bar,.parsed,.capture{border-color:#28547d}.cat{border-radius:.4rem}.cat.unknown{color:#43d8f6;border-color:#43d8f6}
.band{background:#f8fbff;border-color:#ccdded}section.blk{position:relative}.blk> .wrap>h2{letter-spacing:-.035em}
.cards{gap:1.15rem}.card,.fee-card,.shot{border-radius:.9rem;border-color:#c7d9eb;background:white;box-shadow:0 12px 36px rgba(18,67,122,.07);transition:transform .2s,border-color .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);border-color:#71aaf0;box-shadow:0 18px 50px rgba(18,67,122,.13)}.card img{border-color:#d6e4f2}.card .meta{color:#2577da}
.grp{border-top-color:#1f7ce0}.grp h3 a:hover,.postlist h3 a:hover{box-shadow:inset 0 -2px 0 #2878ff}.when{color:#176ecb;background:#e6f1ff;border-radius:.45rem}.flow li:first-child,.scope h3,.cmp thead th,.spec th{border-color:#267ee0}
.scope>div,.fee-card{background:white;border-radius:.9rem;padding:1.25rem;box-shadow:0 12px 34px rgba(18,67,122,.06)}.cmp td.ours,.cmp thead th.ours{background:#e8f2ff}.pullout{border-left-color:#2878ff;background:#eaf4ff;border-radius:0 .7rem .7rem 0}.faq details,details{background:white;border:1px solid #d2e0ef;border-radius:.65rem;margin:.55rem 0;padding:.15rem 1rem}.faq details:first-of-type,details:first-of-type{border-color:#b7cee7}.field input,.field textarea,.field select{border-radius:.55rem;background:white}.field input:focus,.field textarea:focus,.field select:focus{border-color:#2878ff;outline-color:rgba(40,120,255,.2)}
.appgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.appgrid article{min-height:13rem;padding:1.3rem;border:1px solid #c8dced;border-radius:.8rem;background:white}.appgrid span{font-family:var(--mono);font-size:.75rem;color:#2079da}.appgrid h3{margin-top:2.8rem;font-size:1.05rem}.appgrid p{font-size:.84rem;color:var(--graphite-soft)}.checklist{list-style:none;padding:0;margin:0 0 1.5rem}.checklist li{padding:.65rem 0;border-bottom:1px solid #d7e4f1}.checklist li:before{content:"✓";color:#2182e5;margin-right:.7rem}
.closer{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,rgba(49,214,246,.42),transparent 22%),linear-gradient(135deg,#075eff,#168bdc);color:white}.closer p{color:#e3f2ff}.closer .btn{background:#071426;border:0}
footer{background:linear-gradient(145deg,#061426,#091e39);color:white;border-color:#234b70}.foot a,.foot p,.colophon{color:#9db8cf}.foot h4{color:#65d8f2}.colophon{border-color:#244c70}
@media(max-width:850px){.appgrid{grid-template-columns:1fr 1fr}.topline{font-size:.57rem}.mark:before{display:none}}
@media(max-width:520px){.appgrid{grid-template-columns:1fr}.topline{font-size:.5rem}.hero h1{font-size:2.3rem}}
