/* Inter, self-hosted so the page can preload it (index.html): Google's own
   latin file, the variable font, one file for every weight. Licence beside it,
   fonts/Inter-OFL.txt. Only the latin range: every character on the page is in
   it; anything outside falls to the fallback below. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The fallback that paints before Inter arrives: Arial (or its metric twins),
   scaled to Inter's advance widths and given Inter's vertical metrics, so the
   swap moves nothing. Measured from the glyph advances on the hero's own text:
   Inter 400 over Arial is 1.076 (the lede), Inter 800 over Arial Bold is 1.046
   (the headline). Ascent and descent are Inter's (1984 and 494 of 2048)
   divided by that scale. */
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:100 549;
  src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Helvetica");
  size-adjust:107.6%;ascent-override:90.03%;descent-override:22.42%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:550 1000;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Bold"),local("Helvetica-Bold");
  size-adjust:104.6%;ascent-override:92.62%;descent-override:23.06%;line-gap-override:0%}

/* Tokens, from the DoorInspec+ design system's tokens.json. The system serves no
   tokens.css, so the variables its bundle.css expects are declared here. */
:root{
  --blue:#1D79FF; --navy:#01173A; --night:#0C0E11; --night-2:#14171C;
  --chalk:#FFFFFF; --chalk-2:#A8AEB7; --chalk-3:#6A7078;
  --edge:rgba(255,255,255,.09);
  --edge-strong:rgba(255,255,255,.18); /* the brief: "--edge at double opacity" */
  --font-sans:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px;
  --section-min:100px; --section-max:140px;
  --radius-button:11px; --radius-screen:12px; --radius-panel:16px;
  --shadow-screen:0 40px 80px -24px rgba(0,0,0,.65);
  --content-max:1240px;
  --nav-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--navy)}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* ---------- page shell ---------- */
.di-page{position:relative;width:100%;overflow-x:clip;
  /* THE HERO GLOW: the site's blue, brightest at the top centre, over a navy
     wash, falling off to the page's night. Painted on the page so it runs
     behind the menu bar and the hero with no seam. Colours are tokens only:
     --blue at an alpha (the rgba is --blue's own channels, as ds.css writes
     its stage glow), --navy, --night. */
  --glow-h:1100px;
  --glow-img:radial-gradient(ellipse 58% 62% at 50% 0%,rgba(29,121,255,.24),rgba(29,121,255,0) 70%),
    radial-gradient(ellipse 125% 100% at 50% 0%,var(--navy) 0%,rgba(1,23,58,0) 72%);
  background-color:var(--night);background-image:var(--glow-img);
  background-size:100% var(--glow-h);background-repeat:no-repeat;background-position:50% 0}
.di-nav-sentinel{position:absolute;top:0;left:0;width:1px;height:120px;pointer-events:none}

/* ---------- nav ---------- */
.di-nav{position:sticky;top:0;z-index:60;
  /* the same glow layers, sized the same, so the bar matches the page at the
     top and stays opaque if it sticks without site.js (reduced motion) */
  background-color:var(--night);background-image:var(--glow-img);
  background-size:100% var(--glow-h);background-repeat:no-repeat;background-position:50% 0;
  border-bottom:1px solid transparent;
  transition:background .2s ease,border-color .2s ease}
.di-nav.is-stuck{background:rgba(12,14,17,.92);border-bottom-color:var(--edge);backdrop-filter:blur(10px)}
.di-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  height:var(--nav-h);max-width:var(--content-max);margin-inline:auto;padding-inline:var(--space-3)}
.di-nav__brand{position:relative;display:block;flex:none;height:36px;width:248px;transition:width .2s ease}
.di-nav__lockup,.di-nav__mark{position:absolute;left:0;top:0;height:36px;width:auto;transition:opacity .2s ease}
.di-nav__mark{opacity:0}
.di-nav.is-stuck .di-nav__brand{width:37px}
.di-nav.is-stuck .di-nav__lockup{opacity:0}
.di-nav.is-stuck .di-nav__mark{opacity:1}
.di-nav__links{display:flex;align-items:center;gap:var(--space-4);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.di-nav__links a{font-size:16px;font-weight:500;line-height:1;color:var(--chalk-2);text-decoration:none}
.di-nav__links a:hover{color:var(--chalk)}
.di-nav__links a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.di-nav.is-stuck .di-nav__links{opacity:0;visibility:hidden;transform:translateY(-4px)}
/* One primary per viewport: over the hero the nav action is the hairline button,
   and it takes the chalk fill only once the hero's own primary has scrolled away. */
.di-nav.is-stuck .di-nav__cta{background:var(--chalk);color:var(--night);border-color:transparent}
.di-nav__cta{transition:background .2s ease,color .2s ease,border-color .2s ease}

/* ---------- shared section parts ---------- */
.di-eyebrow--plain{text-transform:none}   /* the brief writes section eyebrows lowercase */
.di-points{list-style:none;margin:var(--space-4) 0 0;padding:0;max-width:62ch}
.di-points li{padding-top:20px;margin-top:20px;border-top:1px solid var(--edge);
  font-size:17px;font-weight:400;line-height:1.6;color:var(--chalk-2)}
.di-points li:first-child{margin-top:0}
.di-points strong{font-weight:600;color:var(--chalk)}

/* the subtle frame + the one large soft shadow */
.di-shot{margin:0;border:1px solid var(--edge);border-radius:var(--radius-screen);
  overflow:hidden;background:var(--night-2);line-height:0;box-shadow:var(--shadow-screen)}
.di-shot img{display:block;width:100%;height:auto}

.di-block__inner{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:var(--space-5);align-items:center}
.di-block--flip .di-block__text{order:2}
.di-block--flip .di-shot{order:1}
.di-block--phone .di-block__inner{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
/* The job's steps: the stage takes the wide column, so the pin drop and the
   wall run read at desktop size. Below 1001 every block is one column. */
@media (min-width:1001px){
  .di-block--wide-shot .di-block__inner{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
}

/* The phone gets a device shell. The system's "no device frame" is set aside here
   on Michael's word: the site call screen is a tall white sheet and reads as lost
   without one. Generic hardware, no maker's marks and no invented status bar. */
.di-phone{margin:0;width:372px;max-width:100%;justify-self:center}
.di-phone__shell{position:relative;padding:13px;border-radius:54px;
  background:var(--night-2);border:1px solid var(--edge-strong);
  box-shadow:var(--shadow-screen),inset 0 1px 0 var(--edge-strong)}
.di-phone__screen{border-radius:41px;overflow:hidden;line-height:0;background:var(--chalk)}
.di-phone__screen img{display:block;width:100%;height:auto}
.di-phone__key{position:absolute;width:2px;border-radius:2px;background:var(--edge-strong)}
/* The home page's phone (BRIEF_homepage_rewrite, Michael 23 Oct): Michael's
   real screenshots with the phone's status bar cropped off, so the frame's own
   top shows instead: a band in the app's header colour (#292725, sampled from
   the screenshots) with the island drawn in it. Drawn here, no maker's art.
   The band and the island scale with the screen's width (iPhone geometry:
   status bar 12.05% of the width, island 32% wide at 126:37, 2.8% down). */
.di-phone--island .di-phone__screen{position:relative;padding-top:12.05%;background:#292725}
.di-phone--island .di-phone__screen::before{content:"";position:absolute;z-index:2;top:0;left:50%;
  width:32%;aspect-ratio:126/37;margin-top:2.8%;transform:translateX(-50%);border-radius:999px;background:#000}
.di-phone__key--power{right:-1px;top:168px;height:76px}
.di-phone__key--vol-up{left:-1px;top:130px;height:46px}
.di-phone__key--vol-down{left:-1px;top:188px;height:46px}

/* ---------- hero ---------- */
.di-hero{padding-top:96px;position:relative;background:transparent}
.di-hero__inner{position:relative}
.di-hero__text{max-width:760px}
/* The hero's measures in em, not ch: ch is the width of the showing font's
   "0", and Inter's is about 16% wider than the fallback's, so a ch measure
   rewraps the hero when Inter arrives. These are the same widths in Inter:
   16ch at 800 is 16 x 0.6919em, 56ch at 400 is 56 x 0.6309em. */
.di-hero__headline{margin:0;max-width:11.07em;
  font-size:clamp(64px,5.3vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.045em;
  color:var(--chalk)}
/* the page's only gradient: the hero headline, chalk to a mid-grey (the system uses
   chalk-2 until DESIGN.md sets that value). Guarded so the text never vanishes. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .di-hero__headline{background-image:linear-gradient(180deg,var(--chalk) 38%,var(--chalk-2) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.di-hero__lede{max-width:35.33em}
.di-hero__actions{margin-top:var(--space-4)}
.di-hero__note{margin:var(--space-2) 0 0;font-size:13px;line-height:1.5;color:var(--chalk-3)}
.di-hero__stage{margin-top:-40px;width:1150px;max-width:none;margin-left:auto;margin-right:-200px}

/* The two screenshots, each in a browser frame: a bar with three dots and an
   empty address pill, in token colours only. A faint blue glow sits behind
   each; the stage's own ::after (ds.css) fades the bottom into the page. */
.di-browser{--bar:clamp(14px,2.2vw,26px);overflow:hidden;background:var(--night-2);
  border:1px solid var(--edge-strong);border-radius:var(--radius-screen);
  box-shadow:var(--shadow-screen),0 0 80px -12px rgba(29,121,255,.28)}
.di-browser::before{content:"";display:block;height:var(--bar);border-bottom:1px solid var(--edge);
  background:
    radial-gradient(circle,var(--chalk-3) 0 calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .5px)) calc(var(--bar) * .3) 50% / calc(var(--bar) * .5) var(--bar) no-repeat,
    radial-gradient(circle,var(--chalk-3) 0 calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .5px)) calc(var(--bar) * .8) 50% / calc(var(--bar) * .5) var(--bar) no-repeat,
    radial-gradient(circle,var(--chalk-3) 0 calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .5px)) calc(var(--bar) * 1.3) 50% / calc(var(--bar) * .5) var(--bar) no-repeat,
    linear-gradient(var(--edge),var(--edge)) 50% 50% / 34% calc(var(--bar) * .5) no-repeat}
.di-browser img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}

/* A much fainter echo of the glow on one or two dark bands further down. */
.di-band--glow{background-image:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(29,121,255,.09),rgba(29,121,255,0) 70%)}

/* ---------- modules ---------- */
.di-modules__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);
  list-style:none;margin:48px 0 0;padding:0}
.di-card{background:var(--night-2);border:1px solid var(--edge);border-radius:var(--radius-panel);
  padding:var(--space-3);transition:transform .15s ease,border-color .15s ease}
.di-card:hover{transform:translateY(-4px);border-color:var(--edge-strong)}
.di-card h3{margin:0 0 12px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--chalk)}
.di-card p{margin:0;font-size:16px;font-weight:400;line-height:1.6;color:var(--chalk-2)}
.di-modules__note{margin:28px 0 0;font-size:17px;line-height:1.6;color:var(--chalk-2)}

/* ---------- the audit trail ---------- */
.di-trailsec__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);
  gap:var(--space-5);align-items:start}
.di-trail{list-style:none;margin:0;padding:0;counter-reset:none}
.di-trail__row{position:relative;padding:0 0 0 28px;margin-bottom:22px;
  font-size:16px;line-height:1.5;color:var(--chalk-2)}
.di-trail__row:last-child{margin-bottom:0}
.di-trail__row::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--chalk-3)}
.di-trail__row::after{content:"";position:absolute;left:3px;top:18px;bottom:-22px;width:1px;background:var(--edge)}
.di-trail__row:last-child::after{display:none}
.di-trail__row strong{font-weight:600;color:var(--chalk)}
.di-trailsec .di-shot{margin-top:var(--space-5)}

/* ---------- reports (no real screenshot exists yet) ---------- */
.di-reports__inner{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:var(--space-5);align-items:start}
.di-reports .di-points{margin-top:0}

/* ---------- close ---------- */
.di-close__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.di-close .di-band__heading{max-width:none}
.di-close .di-band__lede{max-width:48ch}

/* ---------- footer ---------- */
.di-footer{padding-block:100px 80px}
.di-footer__inner{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));
  gap:var(--space-4)}
.di-footer__brand img{height:36px;width:auto;display:block}
.di-footer__brand p{margin:var(--space-3) 0 0;max-width:26ch;font-size:13px;line-height:1.5;color:var(--chalk-2)}
.di-footer h3{margin:0 0 var(--space-2);font-size:13px;font-weight:600;line-height:1.4;
  letter-spacing:.07em;text-transform:uppercase;color:var(--chalk-2)}
.di-footer ul{list-style:none;margin:0;padding:0}
.di-footer li{margin-bottom:12px}
.di-footer li a{font-size:16px;line-height:1.5;color:var(--chalk-2);text-decoration:none}
.di-footer li a:hover{color:var(--chalk)}
.di-footer__base{grid-column:1 / -1;margin-top:var(--space-5);padding-top:var(--space-3);
  border-top:1px solid var(--edge);font-size:13px;line-height:1.5;color:var(--chalk-2)}

a:focus-visible,button:focus-visible,.di-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- the product in motion (motion.js) ----------
   Every block below is laid out FINISHED by default: the still frame shown,
   the pin placed, the wall drawn, the fix on the quote. motion.js adds
   .is-armed (the start state) only when motion is allowed, then .is-playing
   and per-step classes. Only opacity, transform and stroke-dashoffset move,
   so nothing reflows. Reduced motion never arms, and the rules at the end of
   the motion section pin everything to the still. */

/* 1 · the phone sequence: five frames of one size, stacked */
.di-seq{display:grid}
.di-seq__frame{grid-area:1 / 1;display:block;width:100%;height:auto;opacity:0}
.di-seq__frame.is-shown{opacity:1}
.di-seq.is-armed .di-seq__frame{transition:opacity .35s ease}

/* 2 · how a job runs: the steps and the stage */
.di-steps li{position:relative;transition:color .3s ease}
.di-steps li strong{transition:color .3s ease}
.di-steps li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left center;opacity:0}
.di-steps.is-armed li{color:var(--chalk-3)}
.di-steps.is-armed li strong{color:var(--chalk-2)}
.di-steps.is-armed li.is-active{color:var(--chalk-2)}
.di-steps.is-armed li.is-active strong{color:var(--chalk)}
.di-steps.is-armed li:not(.is-active) .di-num{opacity:.5;box-shadow:none}
.di-steps.is-armed li .di-num{transition:opacity .3s ease,box-shadow .3s ease}
.di-steps.is-armed li.is-active::after{opacity:1;transform:scaleX(1);
  transition:transform var(--step-ms,2600ms) linear}
.di-steps.is-armed li.is-done::after{opacity:1;transform:scaleX(1);background:var(--edge-strong)}
.di-stage4{position:relative;aspect-ratio:1440 / 710;container-type:inline-size}
.di-stage4__frame{position:absolute;inset:0;opacity:0}
.di-stage4__frame.is-shown{opacity:1}
.di-stage4.is-armed .di-stage4__frame{transition:opacity .4s ease}
.di-stage4__frame img{display:block;width:100%;height:100%}

/* 3 · the plan: the pin drops, then the wall run draws along it */
.di-plan{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.di-plan__wall{fill:none;stroke:#3B77D8;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0}
.di-plan__end{fill:#3B77D8}
.di-stage4.is-armed .di-plan__wall{stroke-dashoffset:1}
.di-stage4.is-armed .di-plan__end{opacity:0}
.di-stage4.is-armed .di-plan__pin{opacity:0;transform:translateY(-36px)}
.di-stage4.is-armed.is-pin .di-plan__pin{opacity:1;transform:none;
  transition:opacity .25s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.di-stage4.is-armed.is-wall .di-plan__wall{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.di-stage4.is-armed.is-wall .di-plan__end--a{opacity:1;transition:opacity .2s ease}
.di-stage4.is-armed.is-wall .di-plan__end--b{opacity:1;transition:opacity .2s ease 1.2s}

/* app-look pieces, light, as the web app draws them */
.di-app{--app-canvas:#EBEBE8;--app-card:#FFFFFF;--app-edge:#E3E3DF;--app-ink:#111111;
  --app-ink-2:#6F6F6C;--app-fail:#E24B4A;--app-fail-bg:#FCECEC;--app-pass:#3DAE3A;
  background:var(--app-canvas);color:var(--app-ink);line-height:1.35}
.di-app p{margin:0}
.di-app__card{background:var(--app-card);border:1px solid var(--app-edge);border-radius:10px}
.di-app__title{font-size:15px;font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.di-app__meta,.di-app__note{font-size:13px;color:var(--app-ink-2)}
.di-app__label{font-size:12px;font-weight:600;color:var(--app-ink-2);margin-top:14px !important}
.di-app__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--app-ink-2);flex:none}
.di-app__dot--fail{background:var(--app-fail)}
.di-app__dot--pass{background:var(--app-pass)}
.di-app__chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:500}
.di-app__chip--fail{background:var(--app-fail-bg);color:var(--app-fail)}
.di-app__kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:12px 0 0;font-size:13px}
.di-app__kv dt{color:var(--app-ink-2)}
.di-app__kv dd{margin:0}
.di-app__line{display:flex;justify-content:space-between;gap:12px;margin-top:8px !important;padding:10px 12px;
  font-size:13px;border:1px solid var(--app-edge);border-radius:8px;background:var(--app-card)}
.di-app__line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.di-app__total{display:flex;justify-content:space-between;margin-top:14px !important;padding-top:10px;
  border-top:1px solid var(--app-edge);font-size:14px;font-weight:600}

/* step 4's panel: the report issued, emailed, opened */
.di-sent{display:flex;align-items:center;justify-content:center;padding:6cqw}
.di-sent__card{width:100%;max-width:560px;padding:clamp(12px,2.6cqw,28px)}
.di-sent .di-app__title{font-size:clamp(12px,2.1cqw,20px)}
.di-sent .di-app__meta{font-size:clamp(10px,1.5cqw,14px);margin-top:4px}
.di-sent__rows{margin-top:clamp(8px,2cqw,20px);border-top:1px solid var(--app-edge)}
.di-sent__row{display:flex;align-items:center;gap:10px;padding-top:clamp(6px,1.4cqw,14px);font-size:clamp(11px,1.7cqw,16px)}
.di-stage4.is-armed .di-sent__row{opacity:0;transform:translateY(6px)}
.di-stage4.is-armed.is-step4 .di-sent__row--sent{opacity:1;transform:none;transition:opacity .35s ease .3s,transform .35s ease .3s}
.di-stage4.is-armed.is-step4 .di-sent__row--open{opacity:1;transform:none;transition:opacity .35s ease 1.3s,transform .35s ease 1.3s}

/* 4 · remedials: the priced fix moves from the record onto the quote */
.di-fixmove{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:28px;line-height:1.35}
.di-fixmove__record,.di-fixmove__quote{padding:20px}
.di-fixmove__onquote{margin-top:10px !important}
.di-fixmove__sum{display:inline-grid}
.di-fixmove__before,.di-fixmove__after{grid-area:1 / 1;text-align:right}
.di-fixmove__before{opacity:0}
.di-fixmove.is-armed .di-fixmove__dst{opacity:0}
.di-fixmove.is-armed .di-fixmove__onquote{opacity:0}
.di-fixmove.is-armed .di-fixmove__before{opacity:1}
.di-fixmove.is-armed .di-fixmove__after{opacity:0}
.di-fixmove.is-armed.is-lift .di-fixmove__dst{opacity:1;transform:translate(var(--fly-x,0),var(--fly-y,0));
  box-shadow:0 12px 28px -10px rgba(0,0,0,.28);border-color:#C9D7F5;transition:opacity .2s ease}
.di-fixmove.is-armed.is-moved .di-fixmove__dst{transform:none;box-shadow:none;border-color:var(--app-edge);
  transition:transform .75s cubic-bezier(.3,.7,.25,1),box-shadow .4s ease .55s,border-color .4s ease .55s}
.di-fixmove.is-armed.is-landed .di-fixmove__before{opacity:0;transition:opacity .25s ease}
.di-fixmove.is-armed.is-landed .di-fixmove__after{opacity:1;transition:opacity .25s ease .1s}
.di-fixmove.is-armed.is-landed .di-fixmove__onquote{opacity:1;transition:opacity .3s ease .2s}

/* ---------- POLISH (30 Sep 2026): richer, calm to use ----------
   One focal glow per section. The blues are the site's --blue and two
   deeper shades of it for the button fill, chosen so white text on it keeps
   AA contrast (4.66:1 at the lightest point). */
.di-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.di-ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons: the blue as a soft gradient with a gentle glow; hover lifts,
   glows and sweeps a light across; a clear ring for keyboards */
.di-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease,background-color .2s ease}
.di-btn--primary{color:var(--chalk);border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1C6FEA 0%,#0E56C4 100%);
  box-shadow:0 8px 22px -8px rgba(29,121,255,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.di-btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);
  transform:translateX(-120%)}
.di-btn--primary:hover{transform:translateY(-1px);
  box-shadow:0 14px 32px -8px rgba(29,121,255,.85),0 0 0 1px rgba(29,121,255,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.di-btn--primary:hover::after{transform:translateX(120%);transition:transform .7s ease}
.di-btn--secondary{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.di-btn--secondary:hover{transform:translateY(-1px);border-color:rgba(29,121,255,.55);
  box-shadow:0 0 22px -6px rgba(29,121,255,.55)}
.di-btn:focus-visible,.di-btn--primary:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.di-nav.is-stuck .di-nav__cta{color:var(--chalk);border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1C6FEA 0%,#0E56C4 100%)}

/* the pill over the hero headline, and the headline's accent */
.di-pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:500;line-height:1.2;letter-spacing:.01em;color:var(--chalk);
  background:rgba(29,121,255,.12);border:1px solid rgba(29,121,255,.42);box-shadow:0 0 26px -6px rgba(29,121,255,.55)}
.di-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px 1px rgba(29,121,255,.9);flex:none}
.di-accent{color:#6BAAFF}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .di-accent{background-image:linear-gradient(95deg,#8BBEFF 0%,#4B93FF 45%,var(--blue) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* cards and panels: dark glass, a thin border fading from blue to nothing;
   hover lifts a touch and glows */
.di-card{border:1px solid transparent;
  background:linear-gradient(180deg,rgba(20,23,28,.94),rgba(16,19,23,.94)) padding-box,
    linear-gradient(145deg,rgba(29,121,255,.55),rgba(29,121,255,.1) 38%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.02)) border-box;
  transition:transform .2s ease,box-shadow .25s ease}
.di-card:hover{transform:translateY(-3px);border-color:transparent;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.8),0 0 34px -14px rgba(29,121,255,.55)}
.di-card .di-ico{width:28px;height:28px;margin-bottom:16px;color:#6BAAFF;filter:drop-shadow(0 0 6px rgba(29,121,255,.45))}

/* a faint dot grid in the dark bands, fading out at the edges */
.di-band--dots{position:relative;isolation:isolate}
.di-band--dots::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 45%,#000 15%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 62% at 50% 45%,#000 15%,transparent 75%)}

/* step numbers, and the list dividers, with a soft glow */
.di-num{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:12px;vertical-align:-7px;
  border-radius:50%;font-size:13px;font-weight:700;line-height:1;color:var(--chalk);
  background:radial-gradient(circle at 50% 30%,rgba(29,121,255,.5),rgba(29,121,255,.14));
  border:1px solid rgba(29,121,255,.6);box-shadow:0 0 18px -3px rgba(29,121,255,.6)}
.di-points li{position:relative;border-top:0}
.di-points li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(29,121,255,.55),rgba(255,255,255,.1) 35%,rgba(255,255,255,.04))}
.di-points__iconed{padding-left:40px}
/* the step badges hang in a gutter, so a wrapped line starts under the words */
.di-steps li{padding-left:44px}
.di-steps li > .di-num{position:absolute;left:0;top:17px;margin:0}
.di-points__iconed .di-ico{position:absolute;left:0;top:21px;width:24px;height:24px;color:#6BAAFF;
  filter:drop-shadow(0 0 6px rgba(29,121,255,.45))}

/* screenshots: a framed app screen with a faint glow behind */
.di-shot{box-shadow:var(--shadow-screen),0 0 90px -26px rgba(29,121,255,.45)}
.di-frame{overflow:hidden;line-height:0;background:var(--night-2);border:1px solid var(--edge-strong);
  border-radius:var(--radius-screen);box-shadow:var(--shadow-screen),0 0 90px -26px rgba(29,121,255,.45)}
[data-tilt]{transform-origin:50% 50%;will-change:auto}
/* a frame that holds app-look elements, not a screenshot, keeps the app's
   canvas and its line height */
.di-frame.di-app{background:var(--app-canvas);line-height:1.35}

/* B · the building: an illustration on the band, not the app */
.di-iso{overflow:visible;inset:-12% -3%}
.di-iso img{object-fit:contain}
.di-iso__over{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.di-iso__run{fill:none;stroke:#F07C1B;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(240,124,27,.45))}
.di-stage4.is-armed .di-iso__run{stroke-dashoffset:1}
.di-stage4.is-armed .di-iso__pin{opacity:0;transform:translateY(-42px)}
.di-stage4.is-armed.is-pin .di-iso__pin{opacity:1;transform:none;
  transition:opacity .25s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.di-stage4.is-armed.is-wall .di-iso__run{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}

/* C · the trade switcher: the cards are the tabs */
.di-trade{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  width:100%;margin:0;font:inherit;text-align:left;color:inherit;cursor:pointer;padding:var(--space-3)}
.di-trade:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.di-trades.is-live .di-trade[aria-selected="false"] h3{color:var(--chalk-2)}
.di-trade[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(24,34,52,.96),rgba(17,22,31,.96)) padding-box,
    linear-gradient(145deg,rgba(29,121,255,.9),rgba(29,121,255,.3) 45%,rgba(255,255,255,.06)) border-box;
  box-shadow:0 0 36px -14px rgba(29,121,255,.6)}
.di-trades__stage{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.di-trades__panel{margin:0}
.di-trades__panel img{display:block;width:100%;height:auto}
.di-trades.is-live .di-trades__panel:not([hidden]){animation:di-fadein .35s ease}
@keyframes di-fadein{from{opacity:0}to{opacity:1}}

/* C · start in three steps */
.di-start__steps{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.di-start__step .di-num{display:grid;margin:0 0 18px}
.di-start__note{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;font-size:17px;font-weight:500;color:var(--chalk)}

/* The home page's real phone screenshots (Michael, 23 Oct): the plan beside
   the hero's words; two phones under "How a job runs". */
.di-hero__inner--phone{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:var(--space-5);align-items:center}
.di-phones{display:flex;justify-content:center;gap:var(--space-5);margin-top:var(--space-5)}
.di-phones .di-phone{width:330px}
.di-phones figcaption{margin-top:14px;font-size:14px;line-height:1.45;color:var(--chalk-2);text-align:center}
@media (max-width:1000px){
  .di-hero__inner--phone{grid-template-columns:minmax(0,1fr)}
  .di-hero__inner--phone .di-hero__phone{width:300px;margin-top:var(--space-4)}
}
@media (max-width:640px){
  .di-phones{gap:14px}
  .di-phones .di-phone{width:calc(50% - 7px)}
  .di-phones .di-phone__shell{padding:6px;border-radius:26px}
  .di-phones .di-phone__screen{border-radius:21px}
  .di-phones figcaption{font-size:12.5px}
}

/* C · the founder's photo, only when one is supplied (home_config.FOUNDER_PHOTO) */
.di-founder__photo{margin:var(--space-3) 0 0}
.di-founder__photo img{display:block;width:100%;max-width:280px;height:auto;border-radius:14px}

/* C · questions */
.di-faq__inner{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--space-5);align-items:start}
.di-faq__list{display:grid;gap:12px}
.di-faq__item{border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.di-faq__item[open]{border-color:rgba(29,121,255,.35);background:rgba(29,121,255,.04)}
.di-faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;
  list-style:none;padding:18px 20px;font-size:17px;font-weight:600;line-height:1.4;color:var(--chalk)}
.di-faq__item summary::-webkit-details-marker{display:none}
.di-faq__item summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.6px solid #6BAAFF;
  border-bottom:1.6px solid #6BAAFF;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.di-faq__item[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.di-faq__item summary:focus-visible{outline:2px solid var(--chalk);outline-offset:2px;border-radius:12px}
.di-faq__item p{margin:0;padding:0 20px 18px;font-size:16px;line-height:1.6;color:var(--chalk-2)}
.di-faq__item a{color:var(--chalk);text-underline-offset:3px}
.di-faq__item .di-faq__bullets{margin:-10px 0 0;padding:0 20px 18px 44px;font-size:16px;line-height:1.6;color:var(--chalk-2)}
.di-faq__item .di-faq__bullets li{margin-bottom:2px}

/* On Irish jobs (SEO brief, 14 Oct 2026, §6): the heading beside the prose,
   as the questions band below it. */
.di-irish__inner{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--space-5);align-items:start}
.di-irish__body{max-width:68ch}
.di-irish__body p,.di-irish__body li{font-size:17px;line-height:1.6;color:var(--chalk-2)}
.di-irish__body p{margin:0 0 var(--space-3)}
.di-irish__body p:last-child{margin-bottom:0}
.di-irish__body ul{margin:-8px 0 var(--space-3);padding-left:24px}
.di-irish__body li{margin-bottom:2px}

/* C · the trust line */
.di-close .di-actions{margin-top:var(--space-3)}
.di-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:var(--space-4) 0 0;padding:0}
.di-trust li{display:inline-flex;align-items:center;gap:9px;font-size:14px;line-height:1.4;color:var(--chalk-2)}
.di-trust .di-ico{width:18px;height:18px;color:#6BAAFF}
.di-trust a{color:var(--chalk-2);text-underline-offset:3px}
.di-trust a:hover{color:var(--chalk)}

/* ---------- motion ----------
   Everything is visible by default. The logic class adds .is-ready only when the
   page is genuinely scrollable and reduced motion is off, so a still render and a
   reduced-motion reader get the finished page, never a blank one. */
.is-ready .di-hero [data-load]{opacity:0;transform:translateY(16px)}
.is-ready.is-loaded .di-hero [data-load]{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--d,0) * 1ms)}
.is-ready [data-reveal]{opacity:0;transform:translateY(20px)}
.is-ready [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--d,0) * 1ms)}
.is-ready .di-shot[data-reveal],.is-ready .di-phone[data-reveal]{transform:translateY(24px)}
.is-ready .di-shot[data-reveal].is-in,.is-ready .di-phone[data-reveal].is-in{transform:none}
/* the one animation that demonstrates the product: the trail arrives in order */
.is-ready .di-trail__row{opacity:0;transform:translateY(6px)}
.is-ready .di-trail.is-in .di-trail__row{opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s ease;
  transition-delay:calc((4 - var(--i,0)) * 420ms + 150ms)}
/* ...one by one and oldest first: the record builds in the order it
   happened, and the newest line, at the top, arrives last. */
@media (prefers-reduced-motion:reduce){
  .di-page *{transition:none !important;animation:none !important}
  .is-ready [data-reveal],.is-ready .di-hero [data-load],.is-ready .di-trail__row{opacity:1;transform:none}
  /* motion.js never arms under reduced motion; this holds the stills even if
     the preference changes after the page has armed. */
  .di-seq .di-seq__frame{opacity:0 !important}
  .di-seq .di-seq__frame[data-still]{opacity:1 !important}
  .di-stage4 .di-stage4__frame{opacity:0 !important}
  .di-stage4 .di-stage4__frame[data-frame="1"]{opacity:1 !important}
  .di-plan__wall{stroke-dashoffset:0 !important}
  .di-plan__end,.di-plan__pin,.di-sent__row,.di-fixmove__dst,.di-fixmove__onquote,.di-fixmove__after{opacity:1 !important;transform:none !important}
  .di-fixmove__before{opacity:0 !important}
  .di-iso__run{stroke-dashoffset:0 !important}
  .di-iso__pin{opacity:1 !important;transform:none !important}
  .di-card:hover,.di-btn:hover{transform:none}
  .di-btn--primary::after{display:none}
}

/* ---------- responsive: the design system's three breakpoints ---------- */
@media (max-width:1240px){
  .di-hero__stage{width:auto;margin-right:calc(var(--space-3) * -1)}
}
@media (max-width:1000px){
  /* The two screenshots stay a stack of pages at every width: ds.css flattens
     them into a sideways scroller below 1001; this restores the layering,
     flat, the behind page up and to the right, the lead in front. */
  .di-stage__screens{display:block;overflow:visible;padding:0;aspect-ratio:100 / 64;transform:none}
  .di-stage__screen{position:absolute;flex:none}
  .di-stage__screen--behind{right:0;top:0;width:78%}
  .di-stage__screen--lead{left:0;top:22%;width:86%}
  .di-stage::after{display:block;height:42%;inset:auto calc(var(--space-3) * -1) -2px}
  .di-nav__links{display:none}
  .di-hero__stage{margin-top:var(--space-4);margin-right:calc(var(--space-3) * -1)}
  .di-block__inner,.di-trailsec__top,.di-reports__inner,.di-block--phone .di-block__inner{
    grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .di-block--flip .di-block__text{order:1}
  .di-block--flip .di-shot,.di-block--flip .di-phone,.di-block--flip .di-stage4{order:2}
  .di-iso{inset:0}
  .di-modules__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .di-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
}
@media (max-width:640px){
  .di-hero{padding-top:72px}
  .di-hero__headline{font-size:40px;line-height:1.06;max-width:none}
  .di-modules__grid{grid-template-columns:minmax(0,1fr)}
  .di-phone{width:320px}
  .di-fixmove{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
  /* the building fills the phone's width: the illustration reaches above
     and below its 2:1 stage, into space kept for it */
  .di-stage4{margin-block:24px 16px}
  .di-iso{inset:-30% 0}
  .di-fixmove__record,.di-fixmove__quote{padding:16px}
  /* The nav at phone width: the lockup at 24px (166 wide) and a tighter
     button (139), so brand and action fit 342px at 390 without clipping. */
  .di-nav__inner{gap:var(--space-2)}
  .di-nav__brand{height:24px;width:166px}
  .di-nav__lockup,.di-nav__mark{height:24px}
  .di-nav.is-stuck .di-nav__brand{width:25px}
  .di-nav__cta{padding-inline:var(--space-2)}
  .di-footer__inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:374px){
  /* 360-wide phones: a 16px nav gutter gives the same row 328px. */
  .di-nav__inner{padding-inline:var(--space-2)}
}

/* ---------- the new sections at narrow widths ---------- */
@media (max-width:1000px){
  .di-start__steps{grid-template-columns:minmax(0,1fr)}
  .di-faq__inner,.di-irish__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
}

/* Trade tabs on phones: one row of pills directly above the screenshot.
   The row scrolls sideways inside itself when the four labels don't fit;
   the page never does. Only with the script live: without it every panel
   shows and the cards stay as cards. */
@media (max-width:640px){
  .di-trades.is-live .di-modules__grid{display:flex;flex-wrap:nowrap;gap:8px;margin-top:32px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    padding:2px 24px 2px 2px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .di-trades.is-live .di-modules__grid::-webkit-scrollbar{display:none}
  .di-trades.is-live .di-trade{flex:0 0 auto;width:auto;flex-direction:row;align-items:center;
    padding:8px 14px;border-radius:999px;scroll-snap-align:start;transform:none}
  .di-trades.is-live .di-trade .di-ico,.di-trades.is-live .di-trade p{display:none}
  .di-trades.is-live .di-trade h3{margin:0;font-size:14px;line-height:1.3;white-space:nowrap}
  .di-trades.is-live .di-trade[aria-selected="true"]{box-shadow:0 0 22px -10px rgba(29,121,255,.6)}
  .di-trades.is-live .di-trades__stage{margin-top:12px}
}

/* ---------- the service pages (one per search) ----------
   The home page's bands, cards, frames and footer, plus three parts of their
   own: the crumb trail, the page's hero (smaller than the home page's, the
   screenshot below the words at every width) and the related-pages cards. */
.di-crumbs{margin:0 0 var(--space-3);padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  font-size:14px;line-height:1.4;color:var(--chalk-3)}
.di-crumbs li+li::before{content:"/";margin-right:6px;color:var(--chalk-3)}
.di-crumbs a{color:var(--chalk-2);text-decoration:none}
.di-crumbs a:hover{color:var(--chalk)}
.di-svc-hero{padding-top:72px;position:relative;background:transparent}
.di-svc-hero__title{margin:0;max-width:18em;
  font-size:clamp(40px,4.4vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:var(--chalk);
  text-wrap:balance}
.di-svc-hero .di-band__lede{max-width:40em}
.di-svc-hero__sub{margin:var(--space-2) 0 0;max-width:32em;font-size:22px;font-weight:600;line-height:1.3;
  letter-spacing:-.01em;color:var(--chalk-2)}
.di-svc-hero__stage{margin-top:var(--space-5)}
.di-svc-hero__stage .di-browser{border-radius:var(--radius-screen);border:1px solid var(--edge-strong);
  box-shadow:var(--shadow-screen),0 0 90px -26px rgba(29,121,255,.45)}
.di-svc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,372px);gap:var(--space-5);align-items:center}
.di-svc-pair .di-phone{justify-self:end}
.di-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3);
  margin-top:var(--space-4)}
.di-related__card{display:block;text-decoration:none;padding:24px}
.di-related__card h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
.di-related__card h3::after{content:"\2192";color:#6BAAFF;font-weight:500}
.di-band__lede a,.di-points a,.di-modules__note a{color:var(--chalk);text-underline-offset:3px}
.di-footer__inner--six{grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr))}
@media (max-width:1000px){
  .di-svc-pair{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .di-svc-pair .di-phone{justify-self:center}
  .di-footer__inner--six{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .di-svc-hero{padding-top:48px}
  .di-svc-hero__title{font-size:36px;line-height:1.08}
  .di-svc-hero__stage{margin-top:var(--space-4)}
  .di-footer__inner--six{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1001px){
  .di-points--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5);max-width:none}
  .di-points--grid li:nth-child(2){margin-top:0}
}

/* ---------- blog (13 Oct 2026; site/tools/build_blog.py) ----------
   BRIEF_blog_section_and_post_01: the night ground, Inter only, the title in
   chalk, the body in chalk-2 at body size, the eyebrow in upper case, a
   reading width of about 720px, the sources at caption size. Tokens only. */
.di-blog,.di-article{padding-top:72px;background:transparent}
.di-blog__inner,.di-article__inner{max-width:720px;margin-inline:auto}
.di-blog__heading,.di-article__title{margin:0;font-size:clamp(34px,4vw,48px);font-weight:800;
  line-height:1.08;letter-spacing:-.035em;color:var(--chalk);text-wrap:balance}
.di-blog .di-band__lede{margin-top:var(--space-2)}
.di-blog__list{list-style:none;margin:var(--space-5) 0 0;padding:0;border-top:1px solid var(--edge)}
.di-blog__item{border-bottom:1px solid var(--edge)}
.di-blog__link{display:block;padding:var(--space-3) 0;text-decoration:none}
.di-blog__eyebrow,.di-article__eyebrow{display:block;margin:0;font-size:13px;font-weight:600;line-height:1.4;
  letter-spacing:.07em;text-transform:uppercase;color:var(--chalk-2)}
.di-blog__title{margin:6px 0 0;font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--chalk)}
.di-blog__date{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--chalk-3);font-variant-numeric:tabular-nums}
.di-blog__first{margin:8px 0 0;font-size:17px;line-height:1.6;color:var(--chalk-2)}
.di-blog__link:hover .di-blog__title{color:var(--blue)}
.di-blog__link:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.di-blog__empty{margin:var(--space-5) 0 0;padding-top:var(--space-3);border-top:1px solid var(--edge);
  font-size:17px;line-height:1.6;color:var(--chalk-3)}

.di-article__back{margin:0 0 var(--space-3);font-size:14px;line-height:1.4}
.di-article__back a{color:var(--chalk-2);text-decoration:none}
.di-article__back a::before{content:"‹ "}
.di-article__back a:hover{color:var(--chalk)}
.di-article__header{display:block;width:100%;height:auto;margin:0 0 var(--space-4);border-radius:var(--radius-screen)}
.di-article__title{margin-top:var(--space-1)}
.di-article__byline{margin:var(--space-2) 0 var(--space-4);font-size:14px;line-height:1.5;color:var(--chalk-3)}
.di-article__body h2{margin:var(--space-5) 0 var(--space-2);font-size:24px;font-weight:700;
  line-height:1.25;letter-spacing:-.02em;color:var(--chalk)}
.di-article__body h3{margin:var(--space-4) 0 var(--space-2);font-size:21px;font-weight:700;line-height:1.3;
  letter-spacing:-.015em;color:var(--chalk)}
/* The questions under "Common questions" (Search Console brief, 28 Oct). */
.di-article__body h4{margin:var(--space-3) 0 var(--space-1);font-size:18px;font-weight:700;line-height:1.35;
  color:var(--chalk)}
.di-article__body p,.di-article__body li{font-size:17px;line-height:1.6;color:var(--chalk-2)}
.di-article__body p{margin:0 0 var(--space-3)}
.di-article__body ul,.di-article__body ol{margin:0 0 var(--space-3);padding-left:24px}
.di-article__body li{margin-bottom:var(--space-1)}
.di-article__body strong{color:var(--chalk);font-weight:600}
.di-article__body a,.di-article__sources a{color:var(--chalk);text-underline-offset:3px}
.di-article__body a:hover,.di-article__sources a:hover{color:var(--blue)}
.di-article__body code{font-size:.9em;padding:1px 6px;border-radius:6px;background:var(--night-2);color:var(--chalk)}
.di-article__video{margin:var(--space-4) 0;aspect-ratio:16/9;border-radius:var(--radius-button);overflow:hidden;background:var(--night-2)}
.di-article__video iframe{display:block;width:100%;height:100%;border:0}
.di-article__body blockquote{margin:0 0 var(--space-3);padding:0 0 0 var(--space-3);border-left:2px solid var(--edge-strong)}
.di-article__body blockquote p{color:var(--chalk-3);margin:0}
.di-article__sources{margin-top:var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--edge)}
.di-article__sources h2{margin:0 0 var(--space-1);font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.07em;
  text-transform:uppercase;color:var(--chalk-2)}
.di-article__sources ul,.di-article__sources ol{margin:0;padding-left:18px}
.di-article__sources li{font-size:13px;line-height:1.55;color:var(--chalk-3);margin-bottom:4px}
.di-article__host{color:var(--chalk-3)}
.di-article__related{margin:0 0 var(--space-2);font-size:17px;line-height:1.6;color:var(--chalk-2)}
.di-article__related a{color:var(--chalk);text-underline-offset:3px}
.di-article__related a:hover{color:var(--blue)}
.di-article__demo{margin:0 0 var(--space-3);font-size:17px;line-height:1.6}
.di-article__demo a{color:var(--chalk);text-underline-offset:3px}
.di-article__demo a:hover{color:var(--blue)}
.di-article__demo a:focus-visible,.di-article__body a:focus-visible,.di-article__sources a:focus-visible,
.di-article__back a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
@media (max-width:640px){
  .di-blog,.di-article{padding-top:40px}
  .di-blog__title{font-size:20px}
  .di-article__header{margin-bottom:var(--space-3);border-radius:var(--radius-button)}
  .di-article__body h3{font-size:19px}
}

/* ---------- not found (14 Oct 2026; site/tools/build_service_pages.py) ---------- */
.di-notfound{padding-top:72px;background:transparent}
.di-notfound .di-related__grid{margin-top:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.di-notfound .di-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.di-notfound .di-related__grid{grid-template-columns:1fr}}
.di-notfound__links{display:flex;gap:var(--space-3);margin:var(--space-3) 0 0;font-size:17px;line-height:1.5}
.di-notfound__links a{color:var(--chalk);text-underline-offset:3px}
.di-notfound__links a:hover{color:var(--blue)}
@media (max-width:640px){.di-notfound{padding-top:40px}}