/* ==========================================================================
   DVCodeWeb deployment fixes
   Layered ON TOP of the Claude Design artboard. The artboard itself is never
   edited, so a re-export from Claude Design stays a drop-in replacement.
   Every rule here documents the defect it corrects.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mobile menu overlay collapsed to the header
   The masthead applies backdrop-filter: blur() for its glass effect. A
   backdrop-filter makes an element a containing block for position:fixed
   descendants, so the design system's full-screen menu overlay (position:fixed;
   inset:0) resolved against the 77px header box instead of the viewport. It
   opened as a 390x77 sliver with the nav links clipped out of view.
   The masthead sits at the top of the viewport, so re-anchoring the overlay to
   viewport units restores the intended full-screen menu.
   -------------------------------------------------------------------------- */
div[style*="position: fixed"][style*="z-index: 60"] {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;   /* fallback for older engines */
  height: 100dvh !important;  /* accounts for mobile browser chrome */
  max-width: 100vw !important;
}

/* The same containing-block trap clips the scrim behind the overlay. */
div[style*="position: fixed"][style*="z-index: 59"] {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
}

/* --------------------------------------------------------------------------
   2. Reviews wall unreadable on phones
   The review cards are a fixed 330px inside a 390px viewport, so exactly one
   card fits and the next is a sliver. On top of that the marquee applies a
   depth effect (opacity 1 - d*0.85, scale 1 - d*0.1) measured from the centre
   of the viewport. That reads as depth on a wide screen with several cards in
   view; on a phone it leaves the single visible card shrunken and washed out
   to as little as 12% opacity.

   Cards become viewport-relative so one sits comfortably with the next
   peeking, and the depth effect is neutralised at this width. The marquee
   itself still scrolls: it translates the TRACK, while the depth pass writes
   to the ITEMS, so overriding item opacity/transform leaves motion intact.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  [data-wall-card] {
    width: min(310px, 82vw) !important;
  }
  [data-role="wallTrack"] > [data-wall-card] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. Scroll reveal (see dv-motion.js)
   The artboard animates the hero on load and animates on interaction, but has
   no scroll reveal, so the whole page below the fold appears with no entrance.
   The hidden state is applied by script, never by this stylesheet alone, so
   content is never left invisible if the script does not run.
   -------------------------------------------------------------------------- */
[data-dv-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

[data-dv-reveal],
[data-dv-in] {
  transition:
    opacity 620ms cubic-bezier(.22, .68, .3, 1) var(--dv-delay, 0ms),
    transform 620ms cubic-bezier(.22, .68, .3, 1) var(--dv-delay, 0ms);
}

[data-dv-in] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-dv-reveal],
  [data-dv-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. Phone tap targets in the masthead
   The homepage masthead comes from the design system and gives its logo link a
   48px min-height. The other artboards hand-roll their header, so the same link
   renders 131x24 - well under a comfortable thumb target, on five pages.
   Only the height is padded; the logo itself does not move.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  [data-role="stickyNav"] a,
  header a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   5. Prose below the design system's own phone floor
   The artboard sets --t-xs to 15px under 900px precisely so body copy never
   drops below 15px on a phone. One line in the "ser encontrado" mock search
   result hardcodes 13.5px instead of using the variable, so it alone ignores
   the floor. Raised on phones only; desktop keeps the designed size.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  [data-role="findBody"] [style*="13.5px"] {
    font-size: 15px !important;
  }
}

/* --------------------------------------------------------------------------
   6. Under-sized buttons on phones
   The article page's content-type filter chips render 34px tall. Across all
   seven pages these are the only buttons under 40px, so a blanket phone floor
   lifts exactly them and touches nothing that was already comfortable.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  button {
    /* these chips carry an inline min-height, which beats a plain rule */
    min-height: 40px !important;
  }
}

/* ==========================================================================
   MOBILE PASS - homepage
   The artboard is desktop-first. Its horizontal rails were sized for a wide
   viewport, so on a phone they land mid-card and cut words in half, with no
   sign that anything scrolls. Reference patterns (Noom, Careem, Formula 1 on
   Mobbin) all do the same three things: inset the card, let the next one peek,
   and snap so a card never rests half-cut.
   ========================================================================== */

@media (max-width: 899px) {

  /* ------------------------------------------------------------------------
     7. Horizontal rails land mid-card
     [data-role="stageSel"] (the hero's sector tabs AND the automation tabs)
     and [data-role="qualRail"] are real scrollers, but with no snap. A phone
     flick leaves a tab or a card sliced down the middle - the automation row
     rests with "Seguimento" cut at the edge, reading like a rendering fault
     rather than something you can swipe.
     Snapping makes every rest position a clean card edge.
     ------------------------------------------------------------------------ */
  [data-role="stageSel"],
  [data-role="qualRail"] {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
    overscroll-behavior-x: contain;
  }

  [data-role="stageSel"] > *,
  [data-qual-card] {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ------------------------------------------------------------------------
     8. Service rows drop their tier label onto its own line
     Each row is a wrapping flexbox: number, name, tier tag, arrow. When the
     name is long ("Branding e identidade") the tag no longer fits and wraps to
     the next line hard against the left margin, under the number, where it
     reads as a stray orphaned word rather than a label for the row above.
     Letting the name shrink keeps the tag on its own row, right-aligned.
     ------------------------------------------------------------------------ */
  [data-svc-name] {
    /* 0 1 auto, NOT 1 1 auto: flex-grow:1 stretches the name to fill the row
       (300px when it only needs 195px) and pushes the tag off the line, which
       is the very wrap this rule exists to prevent. Shrink, never grow. */
    /* !important because the artboard sets flex:1 1 auto inline on this
       element, and an inline declaration beats a plain stylesheet rule. */
    flex: 0 1 auto !important;
    min-width: 0;
  }

  [data-svc-tag] {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
  }

  /* With the name at its natural width the longest row is still ~10px over at
     390px. The row's 18px column gap is desktop spacing; tightening it on a
     phone recovers 16px and keeps every tier tag on its own row's line.
     !important because the gap is set inline on the row. */
  [data-svc-row] {
    column-gap: 10px !important;
  }

  /* Cap the name so a long one wraps its own text instead of shoving the tier
     tag onto a second line. Reserves room for the number, the widest tag and
     the gaps, so the behaviour is the same at 320px as at 430px rather than
     breaking down on smaller Androids. */
  [data-svc-name] {
    max-width: calc(100vw - 190px);
  }
}

/* --------------------------------------------------------------------------
   9. Hero headline does not dominate
   The artboard sets the desktop H1 to a fixed 58px, while the design system's
   own statement scale runs to 150px. Worse, the second line is weakened twice:
   font-weight 500 instead of 700, AND 66% opacity. The references that make a
   headline carry a hero (Craft, Frontify, Browserbase on Mobbin) all keep the
   whole headline at full strength and let it form one dense block.
   Scale it with the viewport and give line two most of its weight back.
   -------------------------------------------------------------------------- */
.dv-hero-h1,
h1[data-anim] {
  /* 68px is the ceiling, not a taste call: the hero text block is 880px wide
     and "Criação de sites profissionais" needs 995px at 78px, so it wrapped and
     broke the designed two-line rhythm into a ragged three. At 68px line one
     fits on one line with room to spare, and it is still a 17% jump on the
     artboard's fixed 58px. */
  font-size: clamp(44px, 4.7vw, 68px) !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
}

/* line two: keep a hint of hierarchy, lose the fade that halved its impact */
h1[data-anim] > span:last-child {
  font-weight: 600 !important;
  color: rgba(244, 242, 238, .88) !important;
}

@media (max-width: 899px) {
  h1[data-anim],
  h1:not([data-anim]) {
    font-size: clamp(34px, 10.2vw, 46px) !important;
    line-height: .98 !important;
  }
}

/* --------------------------------------------------------------------------
   10. Hero sector strip becomes a compact progress indicator
   The strip under the mockup listed the six demo sectors (01 CLÍNICA … 06
   LOGÍSTICA). Each item carries a 1px track with a [data-strip-progress] fill
   that the cycler animates on whichever demo is showing. The labels go, but
   that fill is the only signal the mockup advances by itself, so the tracks
   stay.
   Stretched full width they read as a stray rule. Mistral AI's showcase (via
   Mobbin) uses a small centred segmented pill instead, which is legible as an
   indicator rather than as a border. Six equal segments, centred, rounded.
   The cycler's JS is untouched: it still finds every [data-strip-item] and its
   progress element exactly where it expects them.
   -------------------------------------------------------------------------- */

/* the label row (number + sector name) inside each strip item */
[data-strip-item] > div:first-child {
  display: none !important;
}

/* the row that holds the six items */
div:has(> [data-strip-item]) {
  justify-content: center !important;
  gap: 8px !important;
  max-width: none !important;
}

[data-strip-item] {
  flex: 0 0 26px !important;
  min-height: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* the track, and the fill inside it */
[data-strip-item] > div:last-child {
  height: 3px !important;
  margin-top: 0 !important;
  border-radius: 999px !important;
  background: rgba(244, 242, 238, .18) !important;
  overflow: hidden;
}

[data-strip-progress] {
  height: 3px !important;
  border-radius: 999px !important;
}

/* mobile: items were sized to their label inside a scroller. With the labels
   gone they would collapse, so give them the same fixed segment width and stop
   the row scrolling. */
[data-strip-scroll] {
  overflow-x: hidden !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   11. Air between the header and the hero
   The eyebrow sat 27px below a 78px sticky header, so the page opened cramped.
   navSpacer exists purely to offset the fixed nav, which makes it the right
   place to add the breathing room rather than pushing margins around inside
   the hero content.
   -------------------------------------------------------------------------- */
[data-role="navSpacer"] {
  height: 150px !important;
}

@media (max-width: 899px) {
  [data-role="navSpacer"] {
    height: 108px !important;
  }
}

/* --------------------------------------------------------------------------
   12. Headline accent
   With the whole H1 restored to full strength (rule 9), the two lines needed a
   focal point. Colouring only the payoff word is the pattern Browserbase uses
   on Mobbin: the headline stays one solid block, and the eye still lands on the
   word that matters. It also brings the brand violet into the hero, where it
   otherwise only appears on the CTA.
   -------------------------------------------------------------------------- */
h1 .dv-accent {
  color: #B47CFD !important;
}

/* line two no longer needs to be dimmed now the accent carries the emphasis */
h1[data-anim] > span:last-child {
  color: #F4F2EE !important;
}

/* --------------------------------------------------------------------------
   13. Hero grid: start it at the header, and fade it downward
   The grid layer is position:absolute; top:0 inside the hero content wrapper,
   so it begins wherever that wrapper begins. Rule 11 pushed the wrapper down
   for breathing room and dragged the grid with it, leaving a flat band with no
   grid between the header and where the grid now starts.

   Offset arithmetic: wrapper top = navSpacer height + its 26px margin, so the
   distance back up to the bottom of the 78px header is
     desktop  150 + 26 - 78 =  98px
     mobile   108 + 26 - 78 =  56px
   Pull the layer up by that much and grow its height to match, so it starts
   flush under the header without losing any coverage at the bottom.

   The artboard already masks the grid with a radial vignette, which softens it
   at the sides. Compositing a second, vertical mask over it makes the grid
   strongest just under the header and dissolve into the background further
   down, which is the effect asked for.
   -------------------------------------------------------------------------- */
div[style*="background-size: 72px 72px"] {
  top: -98px !important;
  height: calc(100vh + 98px) !important;

  -webkit-mask-image:
    radial-gradient(120% 90% at 50% 22%, #000 20%, rgba(0, 0, 0, .35) 62%, transparent 96%),
    linear-gradient(to bottom, #000 0%, #000 26%, rgba(0, 0, 0, .45) 58%, transparent 92%) !important;
  mask-image:
    radial-gradient(120% 90% at 50% 22%, #000 20%, rgba(0, 0, 0, .35) 62%, transparent 96%),
    linear-gradient(to bottom, #000 0%, #000 26%, rgba(0, 0, 0, .45) 58%, transparent 92%) !important;

  -webkit-mask-composite: source-in;
  mask-composite: intersect !important;
}

@media (max-width: 899px) {
  div[style*="background-size: 72px 72px"] {
    top: -56px !important;
    height: calc(100vh + 56px) !important;
  }
}

/* --------------------------------------------------------------------------
   14. Clients strip: soft edges instead of blurred boxes
   The marquee ended in two 120x168px panels carrying
   backdrop-filter: blur(14px) plus a translucent fill and a 1px rule. They read
   as hard grey rectangles sitting on top of the logos rather than as an edge
   treatment, and they ate 240px of the strip.
   Every reference strip (Legora, Voiceflow, 1Password, Headspace on Mobbin)
   simply lets the logos dissolve at the edges. A mask on the scroller does
   exactly that, costs no space, and needs no extra elements.
   -------------------------------------------------------------------------- */
[data-role="gateL"],
[data-role="gateR"] {
  display: none !important;
}

[data-role="stripOuter"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

/* --------------------------------------------------------------------------
   17. Clients strip: label row instead of a stacked heading
   Replicates the Claude Design alternative: the eyebrow and the line sit on one
   baseline, a hairline runs from the end of the text to the right edge, and the
   logos follow underneath. It turns a heading block into a caption, which is
   the right weight for a supporting strip.

   The eyebrow, the h2 and the marquee are already siblings in one wrapper, so
   the whole thing is a flex row with the marquee forced onto its own line.
   The rule is the h2's own ::after, growing to fill whatever space is left, so
   it needs no extra element and adapts to any length of copy.
   -------------------------------------------------------------------------- */
/* the content wrapper is the direct child that holds the marquee. Selecting it
   by :first-of-type instead matched the section's decorative gradient layer,
   so the flex row never applied and the label stayed stacked. */
section:has([data-role="stripOuter"]) > div:has(> [data-role="stripOuter"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 30px !important;
  row-gap: 0 !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* the CLIENTES label keeps its own width */
section:has([data-role="stripOuter"]) > div:has(> [data-role="stripOuter"]) > div:first-child {
  flex: 0 0 auto !important;
}

/* the line, demoted from a 40px heading to a caption, plus the hairline */
section:has([data-role="stripOuter"]) h2 {
  /* basis 0, not auto: with flex-basis:auto the h2 demands its max-content
     width (the text plus the rule's min-width), which overflows the row and
     pushes the CLIENTES label onto a line of its own. Basis 0 lets it simply
     take whatever is left beside the label. */
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  max-width: none !important;
  margin: 0 !important;
}

section:has([data-role="stripOuter"]) h2 > span:first-child {
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  color: rgba(244, 242, 238, .84) !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

section:has([data-role="stripOuter"]) h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 40px;
  background: rgba(244, 242, 238, .2);
}

/* the marquee drops to its own row under the label */
section:has([data-role="stripOuter"]) [data-role="stripOuter"] {
  flex: 0 0 100% !important;
  margin-top: 30px !important;
  /* The artboard fixes this row at 168px while the logos inside are capped at
     max-height 40px, so two thirds of the band was empty: 64px of dead air
     above the logos and 64px below, which read as a hole between the hero and
     SERVIÇOS rather than as a band. Sized to the logos plus even breathing
     room instead. */
  height: 96px !important;
}

@media (max-width: 899px) {
  section:has([data-role="stripOuter"]) [data-role="stripOuter"] {
    margin-top: 24px !important;
    height: 84px !important;
  }
}

/* on a phone the label and the line stack, and the hairline stops earning its
   space, so it goes */
@media (max-width: 899px) {
  section:has([data-role="stripOuter"]) h2 {
    flex: 0 0 100% !important;
    margin-top: 8px !important;
  }
  section:has([data-role="stripOuter"]) h2::after {
    display: none;
  }
  section:has([data-role="stripOuter"]) h2 > span:first-child {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   18. TECNOLOGIA section (data-dvts), inserted by build-artboard.js from
       tools/overlay/section-techstack.html, generated by build-techstack.js.

   The point of this layout is that the section's height is fixed. A vertical
   list of tools grows a row for every logo added, and this section does not
   deserve that much of the page. Here the logos sit in a horizontal track that
   scrolls once they stop fitting, and the description sits in a readout of
   fixed height below it. Add a twentieth logo and the section is still exactly
   as tall.

   Two things that look like paranoia and are not:
     - min-width: 0 on .dvts-panels and .dvts-track. Grid and flex items both
       default to min-width: auto, so each sizes to its content instead of its
       track. Without these the track never scrolls; it just overflows the
       section and the last logos are clipped away silently.
     - the readout lines stack in one grid cell rather than being absolutely
       positioned. Absolute children leave the wrapper at zero height, which
       drops the service link on top of the paragraph on narrow screens.
--------------------------------------------------------------------------- */

[data-dvts] .dvts-glow {
  position: absolute;
  left: -6%;
  top: 0;
  width: 70%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(58% 44% at 14% 30%, rgba(123, 69, 214, .15) 0%,
    rgba(180, 124, 253, .06) 44%, rgba(11, 9, 16, 0) 74%);
}

.dvts-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  margin-top: 58px;
  border-top: 1px solid #241F2E;
  border-bottom: 1px solid #241F2E;
}

/* --- service rail --- */
.dvts-rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #241F2E;
}
.dvts-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex: 1 1 0;
  min-height: 52px;
  padding: 0 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid #241F2E;
  cursor: pointer;
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: rgba(244, 242, 238, .44);
  transition: color .28s ease, background .28s ease;
}
.dvts-rail-item:last-child { border-bottom: 0; }
.dvts-rail-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: #B47CFD;
  transform: scaleY(0);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.dvts-rail-item:hover {
  color: rgba(244, 242, 238, .78);
  background: rgba(180, 124, 253, .035);
}
.dvts-rail-item.is-active {
  color: #F4F2EE;
  background: rgba(180, 124, 253, .06);
}
.dvts-rail-item.is-active::before { transform: scaleY(1); }
.dvts-rail-n { color: #B47CFD; opacity: .75; }
.dvts-rail-l { flex: 1 1 auto; }
.dvts-rail-c { font-size: 10px; color: #8E8799; opacity: .7; }

/* --- horizontal logo track --- */
.dvts-panels { min-width: 0; }
.dvts-panel { display: none; height: 100%; }
.dvts-panel.is-active { display: flex; flex-direction: column; }

.dvts-track-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 152px;
}
/* Fade an edge only when there is something past it, so the fade always means
   "there is more this way". The mask sits on the scroller, not the wrapper, so
   the nav buttons in the wrapper are not faded along with the logos. */
.dvts-track.can-next {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 62px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 62px), transparent 100%);
}
.dvts-track.can-prev {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 62px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 62px, #000 100%);
}
.dvts-track.can-prev.can-next {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 62px,
    #000 calc(100% - 62px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 62px,
    #000 calc(100% - 62px), transparent 100%);
}
/* Desktop has no visible scrollbar here and a wheel does not scroll sideways on
   its own, so without these the track is simply stuck. Drag works too; the
   cursor says so. */
.dvts-track.can-prev, .dvts-track.can-next { cursor: grab; }
.dvts-track.is-dragging { cursor: grabbing; }
.dvts-track.is-dragging .dvts-slot { pointer-events: none; }

.dvts-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  background: rgba(11, 9, 16, .82);
  border: 1px solid #2E2739;
  color: #B47CFD;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, background .26s ease, border-color .26s ease,
    transform .26s cubic-bezier(.2, .7, .3, 1);
}
.dvts-nav-prev { left: 6px; transform: translateX(-6px); }
.dvts-nav-next { right: 6px; transform: translateX(6px); }
.dvts-track-wrap.can-prev .dvts-nav-prev,
.dvts-track-wrap.can-next .dvts-nav-next {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.dvts-nav:hover {
  background: rgba(24, 17, 36, .95);
  border-color: rgba(180, 124, 253, .55);
}
.dvts-nav:active { transform: scale(.94); }
.dvts-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.dvts-track::-webkit-scrollbar { display: none; }

.dvts-slot {
  position: relative;
  flex: 0 0 auto;
  width: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 26px 12px;
  background: none;
  border: 0;
  border-right: 1px solid #241F2E;
  cursor: pointer;
  transition: background .3s ease;
  animation: dvtsSlotIn .5s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i) * 45ms);
}
.dvts-slot:last-child { border-right: 0; }
/* no divider on the last slot, so no tick either */
.dvts-slot:last-child::after { display: none; }
@keyframes dvtsSlotIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* scale tick at the foot of each divider. overflow-x: auto clips the y axis,
   so this stays inside the box rather than straddling the baseline */
.dvts-slot::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 1px;
  height: 11px;
  background: #B47CFD;
  opacity: .42;
  transition: opacity .3s ease, height .3s ease;
}
.dvts-slot:hover, .dvts-slot.is-on { background: rgba(180, 124, 253, .05); }
.dvts-slot:hover::after, .dvts-slot.is-on::after { opacity: 1; height: 17px; }
.dvts-slot-n {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: #B47CFD;
  opacity: .45;
  transition: opacity .3s ease;
}
.dvts-slot:hover .dvts-slot-n, .dvts-slot.is-on .dvts-slot-n { opacity: 1; }
.dvts-slot-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}
.dvts-ic {
  width: 74px;
  height: 29px;
  fill: #F4F2EE;
  opacity: .55;
  transition: opacity .32s ease, transform .32s ease;
}
.dvts-slot:hover .dvts-ic, .dvts-slot.is-on .dvts-ic {
  opacity: 1;
  transform: translateY(-2px);
}
.dvts-ic.dvts-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 29px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: #B47CFD;
  border: 1px dashed rgba(180, 124, 253, .5);
  opacity: .9;
  fill: none;
}
.dvts-slot-name {
  font-size: 12.5px;
  letter-spacing: -.008em;
  color: rgba(244, 242, 238, .5);
  white-space: nowrap;
  transition: color .3s ease;
}
.dvts-slot:hover .dvts-slot-name, .dvts-slot.is-on .dvts-slot-name { color: #F4F2EE; }
.dvts-slot.is-missing .dvts-slot-name::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: #B47CFD;
}

/* --- readout: fixed height, so switching service never nudges the page --- */
.dvts-readout {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  min-height: 106px;
  border-top: 1px solid #241F2E;
  padding: 24px 30px 26px;
}
.dvts-readout-body {
  flex: 1 1 auto;
  align-self: stretch;
  display: grid;
  min-height: 78px;
}
.dvts-read {
  grid-area: 1 / 1;
  max-width: 720px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
}
.dvts-read.is-on { opacity: 1; transform: none; }
.dvts-read-default {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .56);
  text-wrap: pretty;
}
.dvts-read-name { font-size: 15.5px; font-weight: 500; color: #F4F2EE; }
.dvts-read-role {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 242, 238, .56);
  text-wrap: pretty;
}
.dvts-svc-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 28px;
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: #B47CFD;
  opacity: .8;
  transition: opacity .28s ease;
}
.dvts-svc-link:hover { opacity: 1; }
.dvts-svc-link span { transition: transform .28s cubic-bezier(.2, .7, .3, 1); }
.dvts-svc-link:hover span { transform: translateX(4px); }

.dvts-rail-item:focus-visible, .dvts-slot:focus-visible {
  outline: 2px solid #B47CFD;
  outline-offset: -2px;
}

@media (max-width: 899px) {
  .dvts-layout { grid-template-columns: 1fr; margin-top: 38px; }
  .dvts-rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #241F2E;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .dvts-rail::-webkit-scrollbar { display: none; }
  .dvts-rail-item {
    flex: 0 0 auto;
    width: auto;
    min-height: 54px;
    padding: 0 17px;
    border-bottom: 0;
    border-right: 1px solid #241F2E;
    scroll-snap-align: start;
  }
  .dvts-rail-item:last-child { border-right: 0; }
  .dvts-rail-item::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
  }
  .dvts-rail-item.is-active::before { transform: scaleX(1); }
  .dvts-rail-c { display: none; }
  .dvts-track-wrap { min-height: 0; }
  /* touch drags the track natively, so the arrows are dead weight */
  .dvts-nav { display: none; }
  .dvts-track.can-prev, .dvts-track.can-next { cursor: default; }
  .dvts-slot { width: 124px; padding: 22px 8px; gap: 13px; }
  .dvts-ic { width: 58px; height: 26px; }
  .dvts-slot-name { font-size: 11.5px; }
  .dvts-readout {
    flex-direction: column;
    min-height: 0;
    padding: 20px 4px 22px;
  }
  .dvts-readout-body { min-height: 118px; }
  .dvts-read-default, .dvts-read-role { font-size: 15px; }
  .dvts-read-name { font-size: 15px; }
  .dvts-svc-link { margin: 14px 0 0; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dvts-slot { animation: none; }
}



/* ---------------------------------------------------------------------------
   19. Masthead. The design system ships a plain full-width bar: logo left,
   mono links right, and a flat violet slab for the CTA. Next to a page built
   out of hairline panels it reads as the one piece nobody designed.

   It becomes a single floating glass pill: logo left, navigation centred, and
   the action at the far right.

   The material is layered the way Apple's is, because a single translucent
   fill reads as a tint rather than as glass:
     - a blurred, heavily saturated backdrop
     - a top-lit gradient over it
     - a bright specular hairline on the TOP edge only, via inset box-shadow
     - a broad diagonal sheen in ::before
     - a soft drop shadow so it floats rather than sits

   The component was first restyled here. Since 13 Sep 2026 every page carries
   a plain-HTML header instead (tools/build-header.js); only the wrapper reset
   below still applies.

   Centring the nav needs care. The links and the CTA are siblings inside one
   .dv-nav-wide element, so centring that element would drag the CTA to the
   middle with them. Instead the logo and the CTA are lifted out of flow to the
   two edges, which leaves the links as the only in-flow child to centre. The
   CTA must resolve against the row, so .dv-nav-wide is deliberately never given
   a position: giving it one would make it the containing block instead.

   backdrop-filter makes an element a containing block for position:fixed
   descendants, which is what once collapsed the mobile menu to a 390x77 sliver.
   Safe here only because rule 1 re-anchors that overlay to viewport units.
--------------------------------------------------------------------------- */

[data-role="stickyNav"] {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 18px var(--gutter, 64px) 0 !important;
}

/* The pill itself, its links and the menu are the shared header now
   (tools/build-header.js, the dvh-header block at the end of this file). */


/* ---------------------------------------------------------------------------
   21. SER ENCONTRADO (data-dvse), generated by build-encontrado.js and inserted
   by build-artboard.js where O PONTO DE VIRAGEM used to sit.

   The old version of this section hid two thirds of its point behind tabs, so
   the reader had to work to get it. Three phone screens side by side say it
   before a word is read: the same customer, three places, and one slot on each
   that is either yours or somebody else's.

   Exactly one thing is violet on every screen, and it always says "A sua
   empresa". That is the whole teaching device, so nothing else in the mock is
   allowed to be violet.
--------------------------------------------------------------------------- */

[data-dvse] .dvse-glow {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 1200px;
  height: 760px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 46% at 50% 40%, rgba(123, 69, 214, .20) 0%,
    rgba(180, 124, 253, .07) 46%, rgba(11, 9, 16, 0) 76%);
}

.dvse-lead {
  max-width: 640px;
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .6);
  text-wrap: pretty;
}
.dvse-lead b { color: #F4F2EE; font-weight: 600; }

.dvse-rowwrap { margin-top: 58px; }
.dvse-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.dvse-card {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  align-content: start;
}
.dvse-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dvse-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: #B47CFD;
}
.dvse-t {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.024em;
}
.dvse-tag {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: #8E8799;
  white-space: nowrap;
}
.dvse-card figcaption {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 242, 238, .56);
  text-wrap: pretty;
}

.dvse-phone {
  position: relative;
  border-radius: 26px;
  padding: 10px 9px 12px;
  background: linear-gradient(180deg, #2B2438, #171222);
  border: 1px solid rgba(214, 188, 254, .2);
  box-shadow: 0 26px 60px rgba(7, 5, 9, .6), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.dvse-notch {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
}
/* fixed height so the three phones and their captions line up */
.dvse-scr {
  border-radius: 18px;
  background: #FFFFFF;
  color: #1A1720;
  padding: 16px 12px 12px;
  height: 392px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

.dvse-sbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #DCDAD5;
  border-radius: 999px;
  background: #fff;
}
.dvse-g { fill: #4285F4; flex: 0 0 auto; }
.dvse-gem { fill: #7B45D6; flex: 0 0 auto; }
.dvse-ai { fill: #111; flex: 0 0 auto; }
.dvse-q {
  font-size: 11.5px;
  color: #3C3A44;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dvse-map {
  position: relative;
  height: 74px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(160deg, #E9EEE6, #DCE6DA);
}
.dvse-road { position: absolute; background: #fff; opacity: .9; }
.dvse-r1 { left: 0; right: 0; top: 38%; height: 5px; transform: rotate(-4deg); }
.dvse-r2 { top: 0; bottom: 0; left: 36%; width: 5px; }
.dvse-r3 { left: 0; right: 0; top: 74%; height: 3px; transform: rotate(3deg); }
.dvse-pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #9AA0A6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.dvse-p1 { left: 20%; top: 22%; }
.dvse-p2 { left: 62%; top: 56%; }
.dvse-p3 { left: 41%; top: 34%; background: #7B45D6; width: 12px; height: 12px; }

.dvse-res {
  border: 1px solid #E6E4DF;
  border-radius: 9px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
}
.dvse-res.is-on {
  border-color: #7B45D6;
  box-shadow: 0 0 0 2px rgba(123, 69, 214, .16);
}
.dvse-res.is-flat { border-style: dashed; opacity: .5; gap: 5px; }
.dvse-res-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dvse-res-name { font-size: 12.5px; font-weight: 600; color: #7B45D6; }
.dvse-badge {
  font-size: 9.5px;
  font-weight: 600;
  color: #137333;
  background: #E6F4EA;
  border-radius: 4px;
  padding: 2px 5px;
}
.dvse-meta { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #5F6368; }
.dvse-stars { color: #F5A623; font-size: 9px; letter-spacing: -1px; }
.dvse-stars.is-dim { color: #C8C6C1; }
.dvse-bar { display: inline-block; height: 6px; border-radius: 3px; background: #E8E6E1; }
.dvse-bar.is-sm { height: 5px; }
.dvse-bar.is-tiny { height: 4px; }
.dvse-res-top .dvse-bar { height: 8px; }

.dvse-aio { border: 1px solid #E6E4DF; border-radius: 11px; overflow: hidden; background: #fff; }
.dvse-aio-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(123, 69, 214, .10), rgba(66, 133, 244, .08));
  font-size: 10px;
  font-weight: 600;
  color: #5B4B7A;
}
.dvse-aio-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.dvse-aio-body p { margin: 0; font-size: 11px; line-height: 1.5; color: #3C3A44; }
.dvse-chips { display: flex; gap: 5px; padding: 0 10px 10px; flex-wrap: wrap; }
.dvse-chip {
  display: inline-flex;
  align-items: center;
  min-width: 52px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid #E6E4DF;
  border-radius: 999px;
  font-size: 9.5px;
  color: #5F6368;
}
.dvse-chip.is-on { border-color: #7B45D6; color: #7B45D6; font-weight: 600; }

/* the argument, drawn: the blue links sit below everything else */
.dvse-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  color: #B4B1AB;
  text-transform: uppercase;
}
.dvse-fold::before, .dvse-fold::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #E6E4DF;
}

.dvse-scr.is-chat { gap: 8px; }
.dvse-cbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EDEBE7;
  font-size: 12px;
  font-weight: 600;
  color: #111;
}
.dvse-msg { border-radius: 12px; padding: 9px 11px; font-size: 11px; line-height: 1.5; }
.dvse-msg.is-you { align-self: flex-end; max-width: 88%; background: #F0EEEA; color: #3C3A44; }
.dvse-msg.is-bot {
  background: #fff;
  border: 1px solid #EDEBE7;
  color: #3C3A44;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dvse-msg.is-bot p { margin: 0; }
.dvse-named { font-weight: 700; color: #7B45D6; font-size: 12.5px; }
.dvse-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #E6E4DF;
  border-radius: 999px;
  font-size: 10.5px;
  color: #9A9791;
}
.dvse-send { width: 16px; height: 16px; border-radius: 50%; background: #111; flex: 0 0 auto; }
.dvse-nolinks {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  color: #B4B1AB;
  text-transform: uppercase;
  text-align: center;
}

.dvse-after {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid #241F2E;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px 30px;
}
.dvse-after-t { max-width: 640px; min-width: 0; }
.dvse-after p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .6);
}
/* The section spends three phone mockups setting up a problem and this one
   sentence is the answer to it, so it gets to be the thing you actually read.
   Set as a line of its own against a violet rule rather than bolded inside the
   paragraph, where it was the same size as the setup and disappeared. */
.dvse-claim {
  margin-top: 14px !important;
  padding-left: 18px;
  border-left: 2px solid #B47CFD;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 29px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.032em;
  color: #F4F2EE !important;
  text-wrap: pretty;
}

/* The third screen shows ChatGPT because a mock has to look like a real app,
   but the point is the category, not one product. The marks under the caption
   say so without a second phone. */
.dvse-marks {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #241F2E;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: #8E8799;
  text-transform: uppercase;
}
.dvse-m { fill: rgba(244, 242, 238, .62); flex: 0 0 auto; }

.dvse-swipe { display: none; }

@media (max-width: 1080px) {
  /* three phones will not fit, so they become a swipe track with the next one
     peeking, which is what tells the reader there are three */
  .dvse-rowwrap { margin-left: calc(var(--gutter, 22px) * -1); margin-right: calc(var(--gutter, 22px) * -1); }
  .dvse-row {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 0 var(--gutter, 22px) 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .dvse-row::-webkit-scrollbar { display: none; }
  /* Wider card so the simulated screen, and the type inside it, come up to a
     readable size. The next card still peeks, which is what says "there are
     three of these". */
  .dvse-card { flex: 0 0 86%; max-width: 340px; scroll-snap-align: center; }
  .dvse-scr { height: 420px; }
  .dvse-q { font-size: 12.5px; }
  .dvse-aio-body p { font-size: 12px; }
  .dvse-msg { font-size: 12px; }
  .dvse-res-name { font-size: 13.5px; }
  .dvse-meta { font-size: 11.5px; }
  .dvse-named { font-size: 13.5px; }
  /* The tag fits beside the title on some cards and not others at this width,
     so the head row wrapped unevenly and the captions stopped lining up with
     the card next to them. Stacking it makes every head the same height. */
  .dvse-head { flex-direction: column; align-items: flex-start; gap: 3px; }
  .dvse-tag { margin-left: 0; }
  .dvse-swipe {
    display: block;
    margin-top: 14px;
    padding: 0 var(--gutter, 22px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .14em;
    color: #8E8799;
  }
  .dvse-after { margin-top: 34px; }
  }

/* ---------------------------------------------------------------------------
   22. TRABALHOS header (data-dvwh).

   The artboard set the section up as a stacked two-line heading, which said
   everything in one voice and left no room to explain what the grid holds.
   Split into title left, description right, with the two facts riding the rule
   underneath: it reads as a section header rather than a caption, and the facts
   double as a legend for the two filters below.
--------------------------------------------------------------------------- */

[data-dvwh] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: end;
  gap: 16px 40px;
  margin: 18px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid #241F2E;
}
[data-dvwh] > * { min-width: 0; }
.dvwh-t {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
  color: #F4F2EE;
  text-wrap: balance;
}
.dvwh-aside { display: flex; flex-direction: column; gap: 18px; }
.dvwh-aside p {
  max-width: 470px;
  /* the descender of the title sits a touch below the last text baseline, so a
     bottom-aligned paragraph reads as floating without this nudge */
  margin: 0 0 4px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .62);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  [data-dvwh] {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding-bottom: 22px;
  }
  .dvwh-aside p { max-width: none; font-size: 15.5px; margin-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   23. Project cards.

   Three separate layers were dimming the work: the card veil, the section
   vignette and the page grain. The first two are lightened in the content
   overlay and the grain globally; this is the part that has to live in CSS,
   because the artboard gives the cards no hover state at all. Hovering now
   lifts the image instead of leaving the same flat panel under the cursor. The
   veil is kept, only pulled back: the name and sector sit on the image and need
   something behind them.
--------------------------------------------------------------------------- */

[data-proj-veil] { transition: opacity .35s ease; }
[data-proj-card] image-slot {
  transition: filter .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
[data-proj-card] > div { transition: box-shadow .35s ease, background .35s ease; }

@media (hover: hover) {
  /* Brightness and scale carry the hover, not a lighter veil: the veil's base
     is what keeps the name legible over the light bottom edge of several of
     these screenshots, so pulling it back would trade one problem for another.
     The artboard already dims the other cards, so the contrast is doubled. */
  [data-proj-card]:hover image-slot { filter: brightness(1.16) saturate(1.06); transform: scale(1.035); }
  [data-proj-card]:hover > div {
    background: linear-gradient(210deg, rgba(214, 188, 254, .8) 0%, rgba(244, 242, 238, .16) 46%, rgba(244, 242, 238, .05) 100%);
    box-shadow: 0 26px 60px rgba(7, 5, 9, .58), 0 0 0 1px rgba(180, 124, 253, .18);
  }
}

/* ---------------------------------------------------------------------------
   24. Footer (data-dvft), generated by build-footer.js.

   Built to read as a footer on sight: a contact block with the real address and
   number, hairline-separated columns, the wordmark set across the bottom, and a
   legal bar under it. The wordmark is the device doing most of the work; it is
   aria-hidden because the logo above already names the company.
--------------------------------------------------------------------------- */

[data-dvft] .dvft-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1100px;
  height: 340px;
  transform: translate(-50%, -55%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(123, 69, 214, .22) 0%, rgba(11, 9, 16, 0) 72%);
}
.dvft-in {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px var(--gutter, 64px) 26px;
}

.dvft-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
}
.dvft-top > * { min-width: 0; }
.dvft-brand { display: flex; flex-direction: column; align-items: flex-start; }
.dvft-logo { display: block; height: 72px; width: auto; }
.dvft-what {
  max-width: 300px;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .62);
}
.dvft-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(180, 124, 253, .38);
  font-family: 'Archivo', sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -.028em;
  color: #F4F2EE;
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.dvft-mail span { color: #B47CFD; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.dvft-mail:hover { border-color: #B47CFD; }
.dvft-mail:hover span { transform: translateX(4px); }
.dvft-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(244, 242, 238, .72);
  text-decoration: none;
}
.dvft-tel:hover { color: #F4F2EE; }

.dvft-social { display: flex; gap: 8px; margin-top: 26px; }
.dvft-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #241F2E;
  background: rgba(244, 242, 238, .03);
  color: rgba(244, 242, 238, .68);
  transition: border-color .28s ease, background .28s ease, color .28s ease, transform .28s cubic-bezier(.2, .7, .3, 1);
}
.dvft-s svg { fill: currentColor; }
.dvft-s:hover {
  border-color: rgba(180, 124, 253, .55);
  background: rgba(180, 124, 253, .12);
  color: #F4F2EE;
  transform: translateY(-2px);
}

.dvft-col { padding-left: 32px; border-left: 1px solid #241F2E; }
.dvft-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: #8E8799;
}
.dvft-links { display: flex; flex-direction: column; margin-top: 6px; }
.dvft-l {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 14.5px;
  color: rgba(244, 242, 238, .68);
  text-decoration: none;
  transition: color .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}
.dvft-l:hover { color: #F4F2EE; transform: translateX(3px); }

.dvft-markwrap {
  margin-top: 56px;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
/* the SVG carries its own type; it only has to fill the column */
.dvft-mark { display: block; width: 100%; height: auto; }

.dvft-bot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  padding-top: 20px;
  border-top: 1px solid #241F2E;
}
.dvft-cr, .dvft-legal a, .dvft-legal button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: #8E8799;
  text-decoration: none;
}
.dvft-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.dvft-legal a, .dvft-legal button {
  display: flex;
  align-items: center;
  min-height: 44px;
  transition: color .25s ease;
}
/* "Preferências de cookies" is a button (Complianz reopens the banner from
   it), so it sheds the browser's button look and reads like the links. */
.dvft-legal button {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 400;
  line-height: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.dvft-legal button:focus-visible { outline: 2px solid #B47CFD; outline-offset: 2px; }
.dvft-legal a:hover, .dvft-legal button:hover { color: #F4F2EE; }

/* ---------------------------------------------------------------------------
   26. "PASSE O RATO PARA PARAR" on a touch screen.

   The marquee hint tells the reader to hover to stop the row, which is not an
   action a phone or tablet has. Hidden where there is no pointer that hovers,
   rather than reworded, because on a mouse the hint is genuinely useful.
--------------------------------------------------------------------------- */

/* Rail hints, shared by all four rails.

   Each hint names the gesture the reader's device actually has. Hiding it on
   touch instead (which is what these rules used to do) left a phone with no
   sign that a rail moves at all, while the ENCONTRADO rail announced its swipe
   regardless: the same page told the same reader two different things. */
.dv-h-touch { display: none; }
@media (hover: none) {
  .dv-h-mouse { display: none; }
  .dv-h-touch { display: inline; }
}

@media (max-width: 1080px) {
  .dvft-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 32px; }
  .dvft-brand { grid-column: 1 / -1; }
  .dvft-col:nth-of-type(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .dvft-in { padding-top: 56px; }
  /* 14.5px is the design system's --t-md, which is fine beside a desktop
     column and too small as the only prose on a phone */
  .dvft-what { font-size: 15.5px; max-width: none; }
  .dvft-top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dvft-col { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid #241F2E; }
  .dvft-markwrap { margin-top: 40px; }
  .dvft-bot { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   25. Page grain.

   Every artboard paints a fixed grain layer over the whole viewport at z-index
   40 in overlay blend mode. At .2 it lands on the project screenshots as well
   as on the flat panels, and reads there as noise across somebody's design
   work. .12 keeps the texture on the flat surfaces without filming over the
   images. It is an inline style on the artboard element, so overriding it needs
   both the attribute selector and !important; the alternative is a per-page
   content rule, and the grain layer is on all seven pages.
--------------------------------------------------------------------------- */

div[style*="mix-blend-mode: overlay"][style*="grain"] { opacity: .12 !important; }
/* The homepage paints its grain fixed, above every section (z-index 40). The
   Servico shell paints it absolute and first in the flow, so every section
   with a background covered it and the service pages lost the texture below
   the hero (owner, 12 Sep 2026). Fixed and on top on every page, as on home. */
div[style*="mix-blend-mode: overlay"][style*="grain.webp"] { position: fixed !important; inset: 0 !important; z-index: 40 !important; }

/* ---------------------------------------------------------------------------
   27. TRABALHOS category filter (data-role="workCats").

   The artboard set these buttons in Archivo and grew the active one to 44px, so
   the filter read as a second heading under the section title and gave no sign
   it could be pressed. Chips in the mono face instead: nothing else on the page
   looks like this, the active one is filled rather than merely bigger, and the
   row no longer competes with the title above it.

   The artboard's applyCat used to write colour and font-size inline, which no
   stylesheet can beat. A content rule swaps that for a class toggle, so
   everything below is free to apply.
--------------------------------------------------------------------------- */

.dvwf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  padding-bottom: 30px;
}
.dvwf-b {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #241F2E;
  background: rgba(244, 242, 238, .02);
  cursor: pointer;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, .62);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.dvwf-b:hover {
  border-color: rgba(180, 124, 253, .5);
  background: rgba(180, 124, 253, .08);
  color: #F4F2EE;
}
.dvwf-b.is-on {
  border-color: #B47CFD;
  background: #B47CFD;
  color: #0B0910;
  font-weight: 700;
}
.dvwf-b:focus-visible { outline: 2px solid #D6BCFE; outline-offset: 2px; }

@media (max-width: 600px) {
  .dvwf { gap: 6px; padding-bottom: 24px; }
  .dvwf-b { padding: 0 13px; letter-spacing: .12em; }
}

/* ---------------------------------------------------------------------------
   28. AUTOMAÇÕES stage (.dvau), generated by build-automacoes.js.

   The video, a three-condition test, and one way out.

   Every earlier version of this section failed the same way: it was too
   specific. Four category tabs, then a capability list, then a headline about
   a request arriving at 23h. Each told a reader whose work looked different
   that the section was not for them. The test below is the fix — it never
   names a sector, a tool or a task, so the reader supplies their own.

   CHEGA / PERCEBE / AGE / RESPONDE is gone. It described the machinery, which
   is meaningless to someone who does not already know what an automation is.
--------------------------------------------------------------------------- */

.dvau { margin-top: 44px; }

.dvau-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 238, .1);
  background: #0B0910;
  box-shadow: 0 30px 66px rgba(7, 5, 9, .6);
}
.dvau-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 5px 9px;
  background: rgba(7, 5, 9, .7);
  backdrop-filter: blur(12px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: #D6BCFE;
}
.dvau-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: repeating-linear-gradient(135deg, rgba(244, 242, 238, .022) 0 12px, rgba(244, 242, 238, 0) 12px 24px);
}
.dvau-ph-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 162, 63, .9);
}
.dvau-ph-t {
  max-width: 460px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 242, 238, .6);
}
.dvau-ph-p {
  padding: 7px 11px;
  border: 1px dashed rgba(244, 242, 238, .2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(244, 242, 238, .72);
  user-select: all;
}

.dvau-test { margin-top: 44px; }
.dvau-test-h {
  max-width: 760px;
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #F4F2EE;
  text-wrap: pretty;
}
.dvau-conds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  background: #241F2E;
  border: 1px solid #241F2E;
}
.dvau-conds > * { min-width: 0; }
.dvau-cond {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px 22px;
  background: #0B0910;
}
.dvau-cond-h {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.03em;
  color: #F4F2EE;
}
.dvau-tick { flex: 0 0 auto; color: #B47CFD; }
.dvau-cond-d {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(244, 242, 238, .6);
  text-wrap: pretty;
}
.dvau-test-note {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .72);
  text-wrap: pretty;
}

.dvau-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  margin-top: 32px;
  padding: 0 26px;
  border: 1px solid rgba(244, 242, 238, .22);
  background: rgba(244, 242, 238, .05);
  backdrop-filter: blur(14px);
  font-size: 16px;
  font-weight: 500;
  color: #F4F2EE;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
.dvau-cta span { color: #B47CFD; transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
.dvau-cta:hover { border-color: rgba(180, 124, 253, .55); background: rgba(180, 124, 253, .1); }
.dvau-cta:hover span { transform: translateX(4px); }
.dvau-cta:focus-visible { outline: 2px solid #D6BCFE; outline-offset: 3px; }

@media (max-width: 900px) {
  .dvau-conds { grid-template-columns: minmax(0, 1fr); }
  .dvau-test { margin-top: 36px; }
}
@media (max-width: 700px) {
  .dvau-media { aspect-ratio: 4 / 3; }
  .dvau-cond { padding: 20px 18px; }
  .dvau-cta { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   29. O QUE GARANTIMOS rail (data-role="qualRail").

   Eight cards in a horizontal rail with the scrollbar hidden. The artboard gave
   it two arrow buttons up in the header and nothing else, so on a desktop with
   no touchscreen a reader who did not spot those buttons saw three cards and
   assumed that was all of them. Wheel and drag are added in dv-motion.js; this
   is the part that makes the rail *look* draggable before anyone tries.

   The cards themselves are legible but their tick lists were set at 11px mono,
   which is the size the design system uses for labels, not for the three
   promises that are the actual substance of each card.
--------------------------------------------------------------------------- */

/* say it is draggable before the reader has to guess */
[data-role="qualRail"] { cursor: grab; }
[data-role="qualRail"]:active { cursor: grabbing; }
[data-role="qualRail"].is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* a drag must not leave the card text selected behind it */
[data-role="qualRail"].is-dragging * { user-select: none; }

/* The three promises are the substance of each card, not a caption, so they
   come up from the 11px label size. Matched on the tick rows' own
   letter-spacing: an earlier attempt keyed on "line-height: 1.5", which also
   matches the card paragraph's 1.58 and shrank the body copy with it. */
[data-qual-card] [style*="letter-spacing: .05em"] { font-size: 12.5px !important; }
[data-qual-card] [style*="rgba(180,124,253,.85)"] { font-size: 12.5px !important; }

/* the arrows are the discoverable control, so they should not look disabled */
[data-qual-arrow] { border-radius: 0; }
[data-qual-arrow]:focus-visible { outline: 2px solid #7B45D6; outline-offset: 2px; }

/* The artboard draws the progress bar under the rail, then clears its own
   padding: `bar.style.paddingLeft = bar.style.paddingRight = ''` strips the
   left and right components out of the element's inline `padding` shorthand,
   which leaves it at 0. The bar therefore ran edge to edge while the cards
   started at the gutter. Putting the gutter back lines the bar up with the
   first card, and with the hint below it. */
[data-role="qualBarWrap"] {
  padding-left: var(--gutter, 64px);
  padding-right: var(--gutter, 64px);
}

.dvql-hint {
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(11, 9, 16, .5);
}

/* ---------------------------------------------------------------------------
   30. COMO TRABALHAMOS (data-role="rail").

   Four steps that were four columns of text separated by hairlines: legible,
   but nothing about it said "these are stages" and the strongest fact in the
   section (the whole project costs the client about four hours) sat in the
   footer at the size of a caption.

   The layout is a CSS subgrid, and layoutProcess() writes padding and borders
   inline on every step, so the panel is built by giving the four content rows a
   shared background and side borders rather than boxing the step itself. That
   keeps the artboard's row alignment intact: the "O QUE FAZ" block still starts
   at the same height in all four columns however long the paragraph above it is.

   The dot row stays outside the panel, so the timeline still reads as a
   timeline running above the cards.
--------------------------------------------------------------------------- */

[data-role="railSteps"] { column-gap: 14px !important; }

/* the four content rows, made to look like one panel */
[data-step] > [data-step-head],
[data-step] > [data-step-name],
[data-step] > [data-step-we],
[data-step] > [data-step-you] {
  padding-left: 22px !important;
  padding-right: 22px !important;
  border-left: 1px solid #241F2E;
  border-right: 1px solid #241F2E;
  background: linear-gradient(215deg, rgba(28, 21, 44, .5), rgba(14, 11, 20, .66));
  transition: background .32s ease, border-color .32s ease;
}
[data-step] > [data-step-head] {
  padding-top: 22px !important;
  border-top: 1px solid #241F2E;
}
[data-step] > [data-step-you] {
  padding-bottom: 22px !important;
  border-bottom: 1px solid #241F2E;
}
/* layoutProcess sets these inline for the column layout; the panel replaces them */
[data-step] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

@media (hover: hover) and (min-width: 901px) {
  [data-step]:hover > [data-step-head],
  [data-step]:hover > [data-step-name],
  [data-step]:hover > [data-step-we],
  [data-step]:hover > [data-step-you] {
    border-color: rgba(180, 124, 253, .34);
    background: linear-gradient(215deg, rgba(36, 27, 56, .62), rgba(18, 13, 26, .74));
  }
}

/* the timeline above the panels */
[data-role="railTrack"] { top: 5px !important; }
[data-role="railFill"] { top: 5px !important; height: 2px !important; }
[data-step-dot] {
  width: 11px !important;
  height: 11px !important;
  top: 0 !important;
  left: 22px !important;
}

/* the step number was the same size as its duration label; it is the thing
   that makes four paragraphs read as four stages */
[data-step-num] {
  font-size: 15px !important;
  letter-spacing: .1em !important;
  color: #B47CFD !important;
}

[data-step-name] { padding-bottom: 16px !important; }
[data-step-we] p { font-size: 15px !important; }
/* no margin between the rows: they share one panel background, and any gap
   shows as a seam across it. The divider is the row's own top border. */
[data-step-you] { margin-top: 0 !important; }

@media (max-width: 900px) {
  [data-role="railSteps"] { row-gap: 14px !important; }
  /* layoutProcess stacks the steps and draws a top rule between them; with
     panels that rule doubles up on the panel's own border */
  [data-step] {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   31. AVALIAÇÕES (.dvrv), generated by build-reviews.js.

   Replaces a placeholder banner, a 0,0 rating card and ten lorem cards with the
   real reviews and the client video, in that order: the wall first, the video
   as the close.

   The row is the artboard's own marquee. The markup reuses data-role="wallRow"
   and data-role="wallTrack", so layoutMarquees() drives it and the auto-scroll
   and hover-to-pause come from the artboard rather than being rebuilt here.
   Drag is added in the content overlay alongside the project rows.

   The one thing deliberately not kept is the artboard's edge treatment: it
   faded 22% of the row's width to near-black on each side, so 44% of the cards
   were dimmed and only the middle was readable.
--------------------------------------------------------------------------- */

.dvrv-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: #B47CFD;
}
.dvrv-h2 {
  margin: 18px 0 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -.042em;
  color: #F4F2EE;
  text-wrap: pretty;
}
.dvrv-lead {
  max-width: 560px;
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(244, 242, 238, .62);
}
/* Stated, not apologised for: a fact about who did the work. */
.dvrv-note {
  max-width: 620px;
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(180, 124, 253, .5);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, .54);
}

.dvrv-wall { position: relative; margin-top: 46px; }
.dvrv-row { position: relative; overflow: hidden; }
.dvrv-track {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 0 9px;
  will-change: transform;
  cursor: grab;
}
.dvrv-track.is-dragging { cursor: grabbing; }
.dvrv-track.is-dragging * { user-select: none; }

/* a hint that the row continues, not a wall of black over half of it */
.dvrv-wall::before,
.dvrv-wall::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 76px;
  pointer-events: none;
  z-index: 2;
}
.dvrv-wall::before { left: 0; background: linear-gradient(90deg, #0B0910, rgba(11, 9, 16, 0)); }
.dvrv-wall::after { right: 0; background: linear-gradient(270deg, #0B0910, rgba(11, 9, 16, 0)); }

.dvrv-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 340px;
  padding: 22px;
  border: 1px solid #241F2E;
  background: linear-gradient(210deg, rgba(28, 21, 44, .6), rgba(14, 11, 20, .74));
  transition: border-color .3s ease, background .3s ease;
}
@media (hover: hover) {
  .dvrv-card:hover {
    border-color: rgba(180, 124, 253, .38);
    background: linear-gradient(210deg, rgba(36, 27, 56, .7), rgba(18, 13, 26, .8));
  }
}
.dvrv-stars {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .16em;
  color: #FFA23F;
}
.dvrv-text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(244, 242, 238, .74);
  /* clamped so the cards match; the button lifts it, and the row is paused
     under the pointer while anyone is reading an expanded one */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.dvrv-card.is-open .dvrv-text { -webkit-line-clamp: unset; overflow: visible; }
.dvrv-more {
  align-self: flex-start;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: #B47CFD;
}
.dvrv-more:hover { color: #D6BCFE; }

.dvrv-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dvrv-name { font-size: 15px; font-weight: 600; color: #F4F2EE; }
.dvrv-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: #8E8799;
}
.dvrv-card .dvrv-who { margin-top: auto; padding-top: 18px; }

.dvrv-hint {
  max-width: 1440px;
  margin: 18px auto 0;
  padding: 0 var(--gutter, 64px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(244, 242, 238, .4);
}
/* the video closes the section, shot vertical so it is shown vertical */
.dvrv-videowrap {
  max-width: 1440px;
  margin: 0 auto;
  /* The video closes the section, so the section's bottom beat has to live
     here. Without it the gap to TECNOLOGIA measured half the page rhythm. */
  padding: 60px var(--gutter, 64px) var(--beat-minor, 104px);
}
.dvrv-feature {
  display: grid;
  grid-template-columns: minmax(0, 272px) minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  margin: 0;
  padding-top: 44px;
  border-top: 1px solid #241F2E;
}
.dvrv-vwrap {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214, 188, 254, .22);
  background: #07050A;
  box-shadow: 0 26px 58px rgba(7, 5, 9, .6);
}
.dvrv-v {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #07050A;
}
.dvrv-fkey {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: #8E8799;
}
.dvrv-fq {
  max-width: 520px;
  margin: 14px 0 18px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.2;
  letter-spacing: -.032em;
  color: #F4F2EE;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* 14.5px is fine beside a desktop heading and too small as prose on a phone */
  .dvrv-note { font-size: 15.5px; }
  .dvrv-wall::before, .dvrv-wall::after { width: 26px; }
  .dvrv-card { width: 290px; padding: 20px; }
  .dvrv-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .dvrv-vwrap { max-width: 280px; }
  .dvrv-videowrap { padding-top: 44px; }
}

/* ---------------------------------------------------------------------------
   32. PERGUNTAS FREQUENTES.

   layoutFaq() pins the answer absolutely at left 52% / top 0 and sizes the list
   to 48%, so with nine questions the list is roughly twice the height of the
   answer and the answer floats alone at the top of a large empty column. It
   cannot be made to sit anywhere else without fighting the inline positioning,
   so instead it is given a panel: the space beside the list then reads as a
   deliberate gutter rather than as something that failed to load.

   The padding needs !important because layoutFaq writes padding inline while it
   measures the tallest answer, and scoping to the desktop breakpoint keeps the
   stacked mobile accordion untouched.
--------------------------------------------------------------------------- */

@media (min-width: 901px) {
  [data-faq-a] {
    box-sizing: border-box;
    padding: 28px 30px !important;
    border: 1px solid #241F2E;
    background: linear-gradient(215deg, rgba(28, 21, 44, .5), rgba(14, 11, 20, .66));
  }
}

/* the questions carry the whole interaction, so the rows are given room and the
   active one is unmistakable rather than a shade brighter */
[data-faq-q] { padding: 16px 0 !important; transition: color .3s ease, padding-left .3s ease; }
@media (hover: hover) {
  [data-faq-q]:hover { padding-left: 6px !important; }
}
[data-faq-q]:focus-visible { outline: 2px solid #7B45D6; outline-offset: 3px; }
[data-faq-mark] {
  width: 7px !important;
  height: 7px !important;
  margin-top: 8px !important;
}
[data-faq-heading] { letter-spacing: -.032em; }



/* >>> dvw-automacao (generated) */
/* ---------------------------------------------------------------------------
   35. AUTOMAÇÕES widget (.dvw), generated by tools/build-automacao-widget.js.

   Replaces the "VÍDEO POR ADICIONAR" placeholder.

   Every class is dvw- prefixed on purpose: .chip, .step, .field, .card, .done
   and .slot all already exist in this stylesheet, and a collision would restyle
   the component silently rather than fail.
--------------------------------------------------------------------------- */

.dvw{position:relative;display:grid;column-gap:30px;padding:20px 22px;
     grid-template-columns:120px minmax(0,1fr) 208px;align-items:stretch;
     height:100%;font-family:'Instrument Sans',system-ui,sans-serif}
.dvw-defs{position:absolute;width:0;height:0}
.dvw-mono{font-family:'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase}

/* channels */
.dvw-chans{display:flex;flex-direction:column;justify-content:space-around;
           padding:6% 0;position:relative;z-index:2}
.dvw-chan{display:flex;align-items:center;gap:9px;flex-direction:row-reverse;
          justify-content:flex-end}
.dvw-clabel{font-size:10px;color:#9A93A6;white-space:nowrap}
.dvw-chip{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;
          border:1px solid #3A3348;background:#1B1624;
          box-shadow:0 6px 16px rgba(7,5,9,.5);
          animation:dvwChip 14s linear infinite}
.dvw-chip svg{width:15px;height:15px;fill:rgba(244,242,238,.66);
              animation:dvwChipSvg 14s linear infinite}
/* Every channel lights at once. One firing alone implied a hierarchy between
   them that does not exist: the whole point is that the source does not matter. */
@keyframes dvwChip{0%,6%{border-color:#B47CFD}14%,100%{border-color:#241F2E}}
@keyframes dvwChipSvg{0%,6%{fill:#F4F2EE}14%,100%{fill:rgba(244,242,238,.66)}}

/* panel */
.dvw-panel{position:relative;z-index:2;align-self:center;width:100%;
           background:#1B1624;border:1px solid #3A3348;display:flex;flex-direction:column;
           box-shadow:0 0 0 1px rgba(180,124,253,.22),
                      0 0 22px -4px rgba(180,124,253,.30),
                      0 22px 50px rgba(7,5,9,.6),
                      inset 0 1px 0 rgba(244,242,238,.07)}
.dvw-phead{display:flex;align-items:center;gap:7px;padding:9px 12px;
           border-bottom:1px solid #332C42;background:#241E31}
.dvw-pdot{width:6px;height:6px;border-radius:50%;background:#3A3348}
.dvw-ptitle{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
            color:#9A93A6;margin-left:5px}
.dvw-plive{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9.5px;
           letter-spacing:.16em;color:#B47CFD}
.dvw-plive::before{content:'';display:inline-block;width:5px;height:5px;background:#B47CFD;
                   margin-right:6px;vertical-align:1px;animation:dvwBlink 1.8s steps(1) infinite}
@keyframes dvwBlink{0%,55%{opacity:1}56%,100%{opacity:.25}}

.dvw-pbody{display:grid;grid-template-columns:158px 1fr;min-height:0;flex:1}
.dvw-steps{position:relative;list-style:none;margin:0;
           border-right:1px solid #332C42;padding:12px 0}
/* a rail that fills as the run advances, so progress reads even mid-step */
.dvw-steps::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;background:#332C42}
.dvw-steps::after{content:'';position:absolute;left:0;top:12px;width:2px;height:calc(100% - 24px);
                  background:#B47CFD;transform-origin:top;transform:scaleY(0);
                  animation:dvwRail 14s linear infinite}
@keyframes dvwRail{0%{transform:scaleY(0)}21.4%{transform:scaleY(.25)}42.9%{transform:scaleY(.5)}
                   64.3%{transform:scaleY(.75)}85.7%,96%{transform:scaleY(1)}97%,100%{transform:scaleY(0)}}
.dvw-step{display:grid;grid-template-columns:22px 1fr;gap:0 8px;padding:6px 12px;
          position:relative;opacity:.62;animation:dvwStep 14s linear infinite;
          animation-delay:calc(var(--i) * 3s)}
@keyframes dvwStep{0%,2%{opacity:1;background:rgba(180,124,253,.13)}
                   22%,100%{opacity:.62;background:transparent}}
.dvw-step::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:transparent;
                  animation:dvwStepBar 14s linear infinite;animation-delay:calc(var(--i) * 3s)}
@keyframes dvwStepBar{0%,2%{background:#B47CFD}22%,100%{background:transparent}}
.dvw-sn{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#D6BCFE;padding-top:2px}
.dvw-sk{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.15em;color:#F4F2EE}
.dvw-sd{grid-column:2;font-size:12.5px;line-height:1.45;color:#A79FB3;margin-top:2px}

.dvw-work{position:relative;padding:14px 14px 16px;min-height:200px}
.dvw-scene{position:absolute;inset:14px 14px 16px;opacity:0;display:flex;
           flex-direction:column;justify-content:center;gap:8px;
           animation:dvwScene 14s linear infinite}
.dvw-s2{animation-delay:3s}
.dvw-s3{animation-delay:6s}
.dvw-s4{animation-delay:9s}
@keyframes dvwScene{0%{opacity:0;transform:translateY(6px)}3%,20%{opacity:1;transform:none}
                    23%,100%{opacity:0;transform:translateY(-4px)}}

.dvw-bubble{max-width:92%;border:1px solid #3A3348;background:#100C17;padding:10px 12px}
.dvw-who{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
         letter-spacing:.16em;color:#9A93A6;margin-bottom:6px}
.dvw-bubble p{margin:0;font-size:14.5px;line-height:1.5;color:#F4F2EE}
.dvw-out{margin-left:auto;border-color:#7B45D6;background:rgba(180,124,253,.09)}

.dvw-fields{display:grid;gap:7px}
.dvw-field{display:grid;grid-template-columns:74px 1fr;align-items:baseline;gap:10px;
           border-bottom:1px solid #332C42;padding-bottom:6px;opacity:0;
           animation:dvwField 14s linear infinite;animation-delay:calc(3s + var(--i) * .45s)}
@keyframes dvwField{0%{opacity:0;transform:translateX(-4px)}2%,20%{opacity:1;transform:none}
                    23%,100%{opacity:0}}
.dvw-fk{font-size:9.5px;color:#9A93A6}
.dvw-fv{font-size:14.5px;color:#F4F2EE}

.dvw-typing{display:inline-flex;gap:3px;vertical-align:middle;margin-left:2px}
.dvw-typing i{width:3px;height:3px;background:#B47CFD;display:block;
              animation:dvwDots 1.2s steps(1) infinite}
.dvw-typing i:nth-child(2){animation-delay:.2s}
.dvw-typing i:nth-child(3){animation-delay:.4s}
@keyframes dvwDots{0%,66%{opacity:.25}67%,100%{opacity:1}}

.dvw-done{display:flex;align-items:center;gap:9px;border:1px solid #3A3348;
          background:#100C17;padding:11px 12px}
.dvw-tk{color:#B47CFD;font-family:'JetBrains Mono',monospace;font-size:12px}
.dvw-dt{font-size:14px;color:#F4F2EE}

/* satellites */
.dvw-sats{display:flex;flex-direction:column;justify-content:space-around;gap:14px;
          padding:4% 0;position:relative;z-index:2}
.dvw-sat{border:1px solid #3A3348;background:#1B1624;
         box-shadow:0 0 0 1px rgba(180,124,253,.16),0 0 16px -4px rgba(180,124,253,.22),
                    0 12px 28px rgba(7,5,9,.5),inset 0 1px 0 rgba(244,242,238,.06)}
.dvw-sathead{display:flex;align-items:center;justify-content:space-between;
             padding:7px 10px;border-bottom:1px solid #332C42;background:#241E31}
.dvw-sathead .dvw-mono{font-size:9px;color:#9A93A6}
.dvw-satbody{padding:10px}
/* Rests visible and dim, brightens on cue. An empty panel for the first six
   seconds is a dead box on load, which is what a shared link screenshots. */
.dvw-msg{border:1px solid #7B45D6;background:rgba(180,124,253,.09);padding:8px 9px;
         font-size:12.5px;line-height:1.45;color:#F4F2EE;opacity:.34;
         animation:dvwMsg 14s linear infinite;animation-delay:6.4s}
@keyframes dvwMsg{0%{opacity:.34;transform:translateY(4px)}4%,26%{opacity:1;transform:none}
                  30%,100%{opacity:.34;transform:none}}

.dvw-week{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.dvw-day{display:flex;flex-direction:column;gap:4px}
.dvw-dn{font-size:8.5px;color:#9A93A6;text-align:center}
.dvw-slot{height:11px;border:1px solid #332C42;background:#100C17}
.dvw-busy{background:rgba(244,242,238,.09)}
.dvw-fills{border-color:#B47CFD;background:transparent;
           animation:dvwSlot 14s linear infinite;animation-delay:9.4s}
@keyframes dvwSlot{0%{background:transparent}4%,28%{background:#B47CFD}
                   32%,100%{background:rgba(180,124,253,.42)}}

/* connectors, drawn from measured geometry by dv-motion.js */
.dvw-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.dvw-wires .dvw-w{fill:none;stroke:#3A3348;stroke-width:1;vector-effect:non-scaling-stroke;
                  color:#6B5F80}
.dvw-wires .dvw-pulse{fill:none;stroke:#B47CFD;stroke-width:1.6;vector-effect:non-scaling-stroke;
                      stroke-linecap:round}

/* The box is 16:9 on a desktop and cannot be on a phone: at 360px that is a
   200px strip, too short to hold any of this. Below the breakpoint it takes its
   height from its content and the system stacks, with nothing hidden, because
   the point of the picture is that it all connects. */
/* The container reads as one object rather than a hole in the page. */
.dvau-media:has(.dvw){border-color:rgba(214,188,254,.18);
                      box-shadow:0 0 34px -12px rgba(180,124,253,.26),
                                 0 30px 66px rgba(7,5,9,.6)}

@media (max-width:860px){
  .dvau-media{aspect-ratio:auto}
  .dvw{grid-template-columns:1fr;row-gap:34px;padding:16px 14px}
  .dvw-chans{flex-direction:row;justify-content:space-between;gap:8px;padding:0}
  .dvw-chan{flex-direction:column;gap:6px;flex:1 1 0;align-items:center;justify-content:flex-start}
  .dvw-clabel{font-size:8.5px}
  .dvw-pbody{grid-template-columns:1fr}
  .dvw-steps{border-right:0;border-bottom:1px solid #241F2E;padding:8px 0;
             display:grid;grid-template-columns:repeat(2,1fr)}
  .dvw-steps::before,.dvw-steps::after{display:none}
  .dvw-sd{display:none}
  .dvw-work{min-height:172px}
  .dvw-sats{flex-direction:row;padding:0;gap:14px}
  .dvw-sat{flex:1 1 0;min-width:0}
  /* the design system's prose floor on a touch screen */
  .dvw-bubble p,.dvw-fv,.dvw-dt,.dvw-msg{font-size:15px;line-height:1.5}
}
@media (max-width:520px){
  .dvw-steps{grid-template-columns:1fr}
  .dvw-bubble{max-width:100%}
  .dvw-sats{flex-direction:column;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .dvw *,.dvw *::before,.dvw *::after{animation:none!important}
  .dvw-scene{position:relative;inset:auto;opacity:1;margin-bottom:10px}
  .dvw-s2,.dvw-s3,.dvw-s4{display:none}
  .dvw-step,.dvw-field,.dvw-msg{opacity:1}
  .dvw-fills{background:#B47CFD}
}
/* <<< dvw-automacao */


/* ---------------------------------------------------------------------------
   36. COMO TRABALHAMOS timeline.

   The four markers above the cards read as disconnected squares because the
   track behind them is rgba(244,242,238,.12), which against ink is invisible.
   The line is the whole reason the markers mean "stages" rather than "four
   decorations", so it is lifted to a real hairline and given some weight.

   The node backgrounds are deliberately NOT touched: layoutProcess() writes the
   active state inline, and an !important here would freeze every marker in its
   resting colour. Size and the ring around it are safe to set, because nothing
   in the artboard's script writes those.
--------------------------------------------------------------------------- */

[data-role="railTrack"] {
  height: 2px !important;
  background: #332C42 !important;
}
[data-role="railFill"] {
  height: 2px !important;
  box-shadow: 0 0 12px -2px rgba(180, 124, 253, .75);
}
[data-step-dot] {
  width: 10px !important;
  height: 10px !important;
  /* punches the track out around each node, so the marker sits on the line
     rather than being crossed by it */
  outline: 3px solid #0B0910;
}

/* The durations are gone, so the head row is a number on its own and the old
   space-between left it stranded against the right edge. */
[data-step-head] { justify-content: flex-start !important; }

/* >>> dvest-orcamento (generated) */
/* ---------------------------------------------------------------------------
   34. ORÇAMENTO (section[data-dvest]), generated by build-estimator.js and
       painted by dv-estimator.js.

   A wizard, not a form. One question fills the stage; the rail above and the
   numbered list beside it say where the reader is and how much is left.

   No price appears on any option. The breakdown exists only on the last screen,
   after the details are in, where it carries more weight than the total because
   it shows where the money goes and therefore what could come out.

   Everything is measured in hairlines and mono kickers rather than cards and
   shadows: a technical drawing, not a landing page.
--------------------------------------------------------------------------- */

/* The section used to be flat #0B0910, the same black as the one above it, so
   the two ran together and the panel floated in nothing. It gets its own
   ground now: a shade lifted, a measured grid behind it, and a ruled top edge
   with ticks. Drawn as an SVG pattern rather than a gradient, because the only
   gradient on this site lives inside the logo. */
section[data-dvest]{background:#0C0912 !important}
section[data-dvest]::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0H0v56' fill='none' stroke='%23B47CFD' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 56px}
/* A ruled edge, like the top of a scale. It is the join between this section
   and the one above, and it should look deliberate. */
section[data-dvest]::after{content:'';position:absolute;left:0;right:0;top:0;height:9px;
  pointer-events:none;border-top:1px solid #241F2E;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='9'%3E%3Cpath d='M.5 0v8' fill='none' stroke='%233A3348' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 9px;background-repeat:repeat-x}

.dvest-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;
          padding:var(--beat-minor,104px) var(--gutter,64px)}
.dvest-hd{max-width:760px;margin:0 0 clamp(26px,3.4vw,44px)}
.dvest-kicker{display:block;font-family:'JetBrains Mono',monospace;
              font-size:var(--size-mono,11px);letter-spacing:.18em;color:#B47CFD}
.dvest-h2{margin:16px 0 0;font-family:'Archivo',sans-serif;font-weight:700;
          font-size:clamp(34px,5vw,68px);line-height:1.02;letter-spacing:-.042em;color:#F4F2EE}
.dvest-sub{margin:14px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.5;
           color:rgba(244,242,238,.60);max-width:60ch}
.dvest-foot-note{margin:20px 0 0;font-size:14px;line-height:1.55;color:#8E8799}
.dvest-noscript{margin:0;padding:20px;border:1px solid #3A3348;color:#A79FB3;font-size:15px}
.dvest-noscript a{color:#B47CFD}

/* ---------- the shell ---------- */

.dvest-shell{border:1px solid #3A3348;background:#14101C;position:relative;
             box-shadow:0 0 0 1px rgba(180,124,253,.10),
                        0 0 34px -10px rgba(180,124,253,.20),
                        0 26px 60px rgba(7,5,9,.55)}

.dvest-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
            padding:14px clamp(18px,2.4vw,30px);border-bottom:1px solid #241F2E}
.dvest-head-l{display:flex;align-items:center;gap:12px;min-width:0}
.dvest-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;
               color:#B47CFD;white-space:nowrap}
.dvest-flow{padding:3px 9px;border:1px solid #3A3348;font-size:12px;color:#C8C1D4;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dvest-count{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
             color:#8E8799;white-space:nowrap;font-variant-numeric:tabular-nums}

/* One tick per screen. A filled bar would say "62%", which is a promise about
   how long the rest takes; ticks only say how many questions are left. */
.dvest-rail{display:flex;gap:3px;padding:0 clamp(18px,2.4vw,30px);margin-top:-1px}
.dvest-tick{flex:1 1 0;height:3px;background:#2E2740;transition:background .3s ease}
.dvest-tick.is-done{background:#7B45D6}
.dvest-tick.is-now{background:#B47CFD;box-shadow:0 0 10px -1px rgba(180,124,253,.7)}

.dvest-body{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:start}
.dvest-shell.is-choosing .dvest-body{grid-template-columns:minmax(0,1fr)}
.dvest-shell.is-choosing .dvest-head{border-bottom-color:#3A3348}

/* ---------- the side rail ---------- */

.dvest-nav{border-right:1px solid #241F2E;padding:clamp(20px,2.4vw,28px) 0;
           position:sticky;top:92px}
.dvest-nav-list{list-style:none;margin:0;padding:0}
.dvest-nav-b{display:flex;align-items:baseline;gap:11px;width:100%;
             padding:9px clamp(16px,2vw,24px);border:0;border-left:2px solid transparent;
             background:none;font-family:inherit;text-align:left;cursor:pointer;
             color:#6F6880;transition:color .18s ease,border-color .18s ease}
.dvest-nav-b:hover:not(:disabled){color:#C8C1D4}
.dvest-nav-b:disabled{cursor:default;color:#4A4459}
.dvest-nav-b:focus-visible{outline:2px solid #B47CFD;outline-offset:-2px}
.dvest-nav-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
             font-variant-numeric:tabular-nums;flex:0 0 auto}
/* 13.5px was too small to scan at a glance, which is the only job this list has */
.dvest-nav-t{font-size:15px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;
             white-space:nowrap}
.dvest-nav-i.is-done .dvest-nav-b{color:#9A93A6}
.dvest-nav-i.is-now .dvest-nav-b{color:#F4F2EE;border-left-color:#B47CFD}
.dvest-nav-i.is-now .dvest-nav-n{color:#B47CFD}

/* ---------- the stage ---------- */

.dvest-stage{padding:clamp(24px,3.2vw,44px) clamp(20px,3vw,44px);min-width:0}
.dvest-stage.is-fwd{animation:dvest-in-f .26s cubic-bezier(.2,.7,.3,1)}
.dvest-stage.is-back{animation:dvest-in-b .26s cubic-bezier(.2,.7,.3,1)}
@keyframes dvest-in-f{from{opacity:0;transform:translateX(16px)}}
@keyframes dvest-in-b{from{opacity:0;transform:translateX(-16px)}}

/* The question gets the width of the stage, not a 32ch column. Cramping a
   six-word question onto three lines made every screen look busier than it is;
   the help text underneath keeps a reading measure of its own. */
.dvest-qh{max-width:min(760px,100%);margin:0 0 clamp(20px,2.4vw,30px)}
.dvest-q{margin:0;font-family:'Archivo',sans-serif;font-weight:700;
         font-size:clamp(24px,2.9vw,38px);line-height:1.12;letter-spacing:-.032em;color:#F4F2EE;
         text-wrap:balance}
.dvest-q:focus{outline:none}
.dvest-help{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:#9A93A6;max-width:62ch}

/* ---------- the cover ---------- */

.dvest-cover{max-width:760px}
.dvest-cover-t{margin:0;font-family:'Archivo',sans-serif;font-weight:700;
               font-size:clamp(28px,3.6vw,46px);line-height:1.06;letter-spacing:-.036em;
               color:#F4F2EE;text-wrap:balance}
.dvest-cover-t:focus{outline:none}
.dvest-cover-b{margin:16px 0 0;font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;
               color:#A79FB3;max-width:58ch}

/* Four facts, set as a ruled strip. It is the closest thing here to a spec
   sheet, which is the right register for a tool that does arithmetic. */
.dvest-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));
             gap:0;margin:clamp(26px,3vw,38px) 0 0;border-top:1px solid #322B40}
.dvest-fact{padding:15px 18px 15px 0;border-right:1px solid #241F2E}
.dvest-fact:last-child{border-right:0}
.dvest-fact-k{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:-.01em;
              color:#B47CFD}
.dvest-fact-v{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:#8E8799}
.dvest-next.is-lead{min-height:54px;padding:0 32px;font-size:16.5px}

/* ---------- option cards ---------- */

.dvest-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));
            gap:9px}
.dvest-opt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:13px;
           padding:15px 17px;border:1px solid #322B40;background:#0E0A15;color:#F4F2EE;
           font-family:inherit;text-align:left;cursor:pointer;min-height:62px;
           transition:border-color .18s ease,background .18s ease,transform .18s ease}
.dvest-opt:hover{border-color:#5E4E7A;background:#130E1D}
.dvest-opt:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}
.dvest-opt:active{transform:translateY(1px)}
.dvest-opt-mark{width:15px;height:15px;margin-top:3px;border:1px solid #4A4459;
                flex:0 0 auto;position:relative;transition:border-color .18s ease}
.dvest-opt-mark::after{content:'';position:absolute;inset:3px;background:#B47CFD;
                       transform:scale(0);transition:transform .18s cubic-bezier(.3,1.4,.5,1)}
.dvest-opt-txt{display:block;min-width:0}
.dvest-opt-l{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.008em;
             line-height:1.3}
.dvest-opt-n{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:#918AA0}
/* An option that has stopped costing anything says so on the card. It is
   scope, not a price, and the reader should not have to wonder. */
.dvest-opt-free{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:#6FCF97}
.dvest-opt-free::before{content:'+ '}
.dvest-opt.is-on{border-color:#B47CFD;background:rgba(180,124,253,.10)}
.dvest-opt.is-on .dvest-opt-mark{border-color:#B47CFD}
.dvest-opt.is-on .dvest-opt-mark::after{transform:scale(1)}
.dvest-opt.is-on .dvest-opt-n{color:#B0A7C0}

/* ---------- the chooser ---------- */

/* ---------- what the build already includes ---------- */

/* Shown above the paid extras, because someone about to be offered add-ons has
   to know what they are already getting before deciding they need more. */
.dvest-inc{margin:0 0 20px;padding:15px 17px;border:1px solid #322B40;
           border-left:2px solid #6FCF97;background:#0E0A15}
.dvest-inc-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
             letter-spacing:.16em;color:#6FCF97}
.dvest-inc-n{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#8E8799;max-width:56ch}
.dvest-inc-l{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.dvest-inc-l li{padding:4px 9px;border:1px solid #2E2740;font-size:12.5px;color:#C8C1D4}
.dvest-inc-l li::before{content:'+ ';color:#6FCF97}
.dvest-inc.is-result{margin:0 0 22px}

/* ---------- the budget slider ---------- */

.dvest-budget{max-width:560px;transition:opacity .2s ease}
/* the counter's slider is a small control; a budget slider is the whole answer */
.dvest-budget .dvest-slider{max-width:none}
.dvest-budget.is-off{opacity:.4}
.dvest-budget-read{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dvest-budget-n{font-family:'JetBrains Mono',monospace;font-weight:500;
                font-size:clamp(30px,4.2vw,46px);line-height:1;letter-spacing:-.02em;
                color:#FFA23F;font-variant-numeric:tabular-nums}
.dvest-budget-s{font-size:15px;color:#8E8799}
.dvest-budget-ends{display:flex;justify-content:space-between;
                   font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#6F6880}
.dvest-budget-say{margin-top:16px;max-width:56ch;min-height:44px}
.dvest-budget-help{margin:0;font-size:14px;line-height:1.55;color:#8E8799}
.dvest-budget-good{margin:8px 0 0;font-size:14px;line-height:1.55;color:#6FCF97}
/* A warning, not an error: the reader has not done anything wrong, we are
   telling them what that budget can and cannot buy. */
.dvest-budget-warn{margin:8px 0 0;padding:12px 14px;border-left:2px solid #FFA23F;
                   background:rgba(255,162,63,.08);font-size:14px;line-height:1.55;
                   color:#FFD3A3}
.dvest-unsure{margin-top:18px;min-height:44px;padding:0 16px;border:1px solid #322B40;
              background:none;color:#9A93A6;font-family:'JetBrains Mono',monospace;
              font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
              transition:border-color .18s ease,color .18s ease,background .18s ease}
.dvest-unsure:hover{border-color:#5E4E7A;color:#C8C1D4}
.dvest-unsure.is-on{border-color:#B47CFD;background:rgba(180,124,253,.12);color:#F4F2EE}
.dvest-unsure:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}

/* ---------- what the monthly plan covers, on the result ---------- */

.dvest-chips{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.dvest-chips li{padding:4px 9px;border:1px solid #2E2740;font-size:12.5px;color:#8E8799}

/* ---------- the counter ---------- */

.dvest-count-box{display:flex;align-items:stretch;gap:0;border:1px solid #322B40;
                 background:#0E0A15;max-width:340px}
.dvest-step-b{width:56px;flex:0 0 56px;border:0;background:none;color:#F4F2EE;
              font-family:'Archivo',sans-serif;font-size:24px;line-height:1;cursor:pointer;
              transition:background .18s ease,color .18s ease}
.dvest-step-b:hover:not(:disabled){background:rgba(180,124,253,.12);color:#D6BCFE}
.dvest-step-b:disabled{color:#4A4459;cursor:default}
.dvest-step-b:focus-visible{outline:2px solid #B47CFD;outline-offset:-2px}
.dvest-count-read{flex:1 1 auto;display:flex;align-items:baseline;justify-content:center;
                  gap:8px;padding:16px 8px;border-left:1px solid #322B40;
                  border-right:1px solid #322B40;min-width:0}
.dvest-count-n{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:34px;
               line-height:1;color:#F4F2EE;font-variant-numeric:tabular-nums}
.dvest-count-u{font-size:14px;color:#8E8799;white-space:nowrap}

/* 44px tall, not 26. The track is still a 2px hairline; the height is the
   touch target around it, which a thumb needs and a mouse never notices. */
.dvest-slider{-webkit-appearance:none;appearance:none;width:100%;max-width:340px;
              height:44px;margin:6px 0 0;background:none;cursor:pointer;display:block}
.dvest-slider:focus{outline:none}
.dvest-slider:focus-visible{outline:2px solid #B47CFD;outline-offset:4px}
.dvest-slider::-webkit-slider-runnable-track{height:2px;background:#322B40}
.dvest-slider::-moz-range-track{height:2px;background:#322B40}
.dvest-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
   width:16px;height:16px;margin-top:-7px;background:#B47CFD;border:0;border-radius:0;
   box-shadow:0 0 0 4px rgba(180,124,253,.16)}
.dvest-slider::-moz-range-thumb{width:16px;height:16px;background:#B47CFD;border:0;
   border-radius:0;box-shadow:0 0 0 4px rgba(180,124,253,.16)}

.dvest-tier{margin-top:22px;padding:15px 17px;border:1px solid #322B40;
            border-left:2px solid #B47CFD;background:#0E0A15;max-width:460px}
.dvest-tier-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
              letter-spacing:.16em;color:#B47CFD}
.dvest-tier-l{display:block;margin-top:7px;font-size:17px;font-weight:600;
              letter-spacing:-.012em;color:#F4F2EE}
.dvest-tier-n{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:#918AA0}

/* ---------- the review ---------- */

.dvest-rev{border-top:1px solid #241F2E}
.dvest-rev-r{display:flex;align-items:center;justify-content:space-between;gap:16px;
             padding:13px 0;border-bottom:1px solid #241F2E}
.dvest-rev-l{min-width:0}
.dvest-rev-q{display:block;font-size:12.5px;line-height:1.4;color:#8E8799}
.dvest-rev-a{display:block;margin-top:3px;font-size:15.5px;line-height:1.4;color:#F4F2EE}
.dvest-rev-b{flex:0 0 auto;min-height:36px;padding:0 12px;border:1px solid #322B40;
             background:none;color:#B47CFD;font-family:'JetBrains Mono',monospace;
             font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
             transition:border-color .18s ease,background .18s ease}
.dvest-rev-b:hover{border-color:#B47CFD;background:rgba(180,124,253,.10)}
.dvest-rev-b:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}

/* ---------- the gate ---------- */

.dvest-gate{margin:0 0 24px;padding:18px 20px;border:1px solid #3A3348;
            border-left:2px solid #B47CFD;background:rgba(180,124,253,.07)}
.dvest-gate-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
              letter-spacing:.18em;color:#B47CFD}
.dvest-gate-t{margin:9px 0 0;font-family:'Archivo',sans-serif;font-weight:700;
              font-size:clamp(20px,2.3vw,28px);line-height:1.15;letter-spacing:-.028em;
              color:#F4F2EE}
.dvest-gate-t:focus{outline:none}
.dvest-gate-b{margin:9px 0 0;font-size:15px;line-height:1.55;color:#B0A7C0;max-width:52ch}

.dvest-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
            gap:15px}
.dvest-field{display:grid;gap:6px;align-content:start;min-width:0}
.dvest-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
             text-transform:uppercase;color:#9A93A6}
/* 16px is the floor: anything smaller and iOS zooms the page on focus. */
.dvest-input{min-height:50px;padding:0 14px;border:1px solid #322B40;background:#0E0A15;
             color:#F4F2EE;font-family:inherit;font-size:16px;width:100%;
             transition:border-color .18s ease}
.dvest-input:focus{outline:none;border-color:#B47CFD;
                   box-shadow:0 0 0 3px rgba(180,124,253,.14)}
.dvest-field-h{font-size:12.5px;line-height:1.45;color:#8E8799}
/* off-screen rather than display:none, which some bots skip */
.dvest-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dvest-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;font-size:14px;
               line-height:1.5;color:#A79FB3;cursor:pointer}
.dvest-consent input{margin-top:2px;width:19px;height:19px;flex:0 0 auto;accent-color:#B47CFD}
.dvest-consent a{color:#C9A6FF;text-decoration:underline;text-decoration-color:#B47CFD;text-underline-offset:3px}
.dvest-error{grid-column:1/-1;margin:0;padding:11px 13px;border-left:2px solid #FF8A8A;
             background:rgba(255,138,138,.08);font-size:14px;line-height:1.5;color:#FFC9C9}

/* ---------- the action bar ---------- */

.dvest-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
           padding:14px clamp(18px,2.4vw,30px);border-top:1px solid #241F2E;background:#100C18}
.dvest-bar-r{display:flex;align-items:center;gap:10px;min-width:0}
.dvest-bar-hint{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
                text-transform:uppercase;color:#6F6880}
.dvest-bar-gap{display:block}
.dvest-back{min-height:46px;padding:0 14px;border:1px solid transparent;background:none;
            color:#9A93A6;font-family:'JetBrains Mono',monospace;font-size:11px;
            letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
            transition:color .18s ease,border-color .18s ease}
.dvest-back:hover:not(:disabled){color:#B47CFD;border-color:#322B40}
.dvest-back:disabled{opacity:.35;cursor:default}
.dvest-back:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}
.dvest-next{min-height:46px;padding:0 26px;border:0;background:#B47CFD;color:#0B0910;
            font-family:inherit;font-size:15.5px;font-weight:600;cursor:pointer;
            white-space:nowrap;transition:background .18s ease}
.dvest-next:hover:not(:disabled){background:#D6BCFE}
.dvest-next:disabled{opacity:.38;cursor:default}
.dvest-next:focus-visible{outline:2px solid #D6BCFE;outline-offset:2px}

/* ---------- the result ---------- */

.dvest-shell.is-result .dvest-stage{padding:clamp(26px,3.4vw,46px) clamp(20px,3vw,46px)}
.dvest-sent{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 26px;
            font-size:14.5px;color:#9A93A6}
.dvest-sent-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
              color:#0B0910;background:#B47CFD;padding:4px 8px}

.dvest-big{margin:0 0 26px;padding-bottom:24px;border-bottom:1px solid #3A3348}
.dvest-big-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
             letter-spacing:.18em;color:#8E8799}
/* Amber is the money colour and appears nowhere else on the page. */
.dvest-big-v{display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;
             font-weight:500;font-size:clamp(30px,5.4vw,60px);line-height:1.02;
             letter-spacing:-.03em;color:#FFA23F;font-variant-numeric:tabular-nums}
.dvest-big-v:focus{outline:none}
.dvest-big-n{display:block;margin-top:12px;font-size:14px;color:#8E8799}
.dvest-big.is-quiet .dvest-big-t{display:block;margin-top:10px;font-family:'Archivo',sans-serif;
             font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.08;
             letter-spacing:-.034em;color:#F4F2EE}
.dvest-big.is-quiet .dvest-big-t:focus{outline:none}
.dvest-big-b{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:#B0A7C0;max-width:56ch}

.dvest-lines{margin:0 0 22px}
.dvest-line{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
            padding:12px 0;border-bottom:1px solid #241F2E;
            animation:dvest-rise .4s cubic-bezier(.2,.7,.3,1) backwards;
            animation-delay:calc(var(--i,0)*45ms + 140ms)}
@keyframes dvest-rise{from{opacity:0;transform:translateY(9px)}}
.dvest-line-l{min-width:0}
.dvest-line-t{display:block;font-size:15.5px;line-height:1.35;color:#F4F2EE}
.dvest-line-n{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:#8E8799}
.dvest-line-v{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:13px;
              color:#FFA23F;white-space:nowrap;font-variant-numeric:tabular-nums}
.dvest-line.is-annual{border-bottom:0;border-top:1px solid #3A3348;
                      margin:14px 0 24px;padding-top:16px;animation:none}
.dvest-line.is-annual{flex-wrap:wrap}
.dvest-line.is-annual .dvest-line-t{color:#C8C1D4}
/* Their own domain is good news, not a footnote crammed onto the end of the
   note explaining what the plan covers. */
.dvest-line-own{flex:1 1 100%;margin:8px 0 0;padding:9px 12px;border-left:2px solid #6FCF97;
                background:rgba(111,207,151,.07);font-size:13px;line-height:1.5;color:#A9C9B6}
.dvest-line.is-annual .dvest-line-v{color:#9A93A6}
.dvest-line.is-annual.is-none .dvest-line-v{color:#6F6880}

/* ---------- the monthly line, on the result ---------- */

/* One line under the number, not a table row. It is a second, smaller
   commitment and should read as an addendum to the price, not a rival to it. */
.dvest-plus{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
            margin:0 0 22px;padding:14px 16px;border:1px solid #322B40;background:#0E0A15}
.dvest-plus-l{font-size:15px;color:#F4F2EE}
.dvest-plus-v{font-family:'JetBrains Mono',monospace;font-size:15px;color:#FFA23F;
              font-variant-numeric:tabular-nums;white-space:nowrap}
.dvest-plus-n{flex:1 1 100%;font-size:13px;line-height:1.5;color:#8E8799}
.dvest-plus.is-none .dvest-plus-l{color:#9A93A6}

/* ---------- the detail, folded away ---------- */

.dvest-toggle-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.dvest-toggle{min-height:42px;padding:0 14px;border:1px solid #322B40;background:none;
              color:#C8C1D4;font-family:'JetBrains Mono',monospace;font-size:10.5px;
              letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
              transition:border-color .18s ease,color .18s ease}
.dvest-toggle:hover{border-color:#B47CFD;color:#F4F2EE}
.dvest-toggle:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}
.dvest-toggle-n{font-size:13px;color:#6F6880}
.dvest-detail{margin:0 0 22px}
.dvest-chips li.is-head{border:0;padding-left:0;color:#6F6880;
                        font-family:'JetBrains Mono',monospace;font-size:10.5px;
                        letter-spacing:.12em;text-transform:uppercase}

/* ---------- what they made of the number ---------- */

/* The one question worth asking someone who has just seen a price. It gets the
   weight the breakdown used to have, because the answer decides whether there
   is a conversation to have at all. */
.dvest-fb{margin:0 0 22px;padding:20px;border:1px solid #3A3348;
          border-left:2px solid #B47CFD;background:rgba(180,124,253,.06)}
.dvest-fb-q{margin:0;font-family:'Archivo',sans-serif;font-weight:700;
            font-size:clamp(19px,2.1vw,25px);line-height:1.15;letter-spacing:-.026em;
            color:#F4F2EE}
.dvest-fb-h{margin:9px 0 0;font-size:14px;line-height:1.55;color:#9A93A6;max-width:52ch}
.dvest-fb-opts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.dvest-fb-o{min-height:44px;padding:0 15px;border:1px solid #3A3348;background:#0E0A15;
            color:#F4F2EE;font-family:inherit;font-size:14.5px;cursor:pointer;
            transition:border-color .18s ease,background .18s ease}
.dvest-fb-o:hover{border-color:#5E4E7A}
.dvest-fb-o.is-on{border-color:#B47CFD;background:rgba(180,124,253,.16)}
.dvest-fb-o:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}
.dvest-fb-budget{margin:22px 0 0;max-width:460px;transition:opacity .2s ease}
.dvest-fb-budget.is-off{opacity:.45}
.dvest-fb-budget .dvest-slider{max-width:none}
.dvest-fb-bq{margin:0 0 10px;font-size:15px;line-height:1.5;color:#C8C1D4}
.dvest-fb-send{margin:20px 0 0;min-height:48px;padding:0 24px;border:0;background:#B47CFD;
               color:#0B0910;font-family:inherit;font-size:15.5px;font-weight:600;
               cursor:pointer;transition:background .18s ease}
.dvest-fb-send:hover:not(:disabled){background:#D6BCFE}
.dvest-fb-send:disabled{opacity:.38;cursor:default}
.dvest-fb-send:focus-visible{outline:2px solid #D6BCFE;outline-offset:2px}
.dvest-fb.is-done{border-left-color:#6FCF97;background:rgba(111,207,151,.06)}
.dvest-fb-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
            letter-spacing:.18em;color:#6FCF97}
.dvest-fb-done{margin:9px 0 0;font-size:15px;line-height:1.55;color:#C8C1D4}

/* Named, not priced. An item with no published figure gets no number, and
   saying so plainly beats a plausible-looking guess. */
.dvest-quotes{margin:0 0 22px;padding:17px 19px;border:1px solid #322B40;background:#0E0A15}
.dvest-quotes-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
                letter-spacing:.16em;color:#B47CFD}
.dvest-quotes-b{margin:9px 0 0;font-size:14px;line-height:1.55;color:#918AA0;max-width:56ch}
.dvest-quotes-l{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.dvest-quotes-l li{padding:5px 10px;border:1px solid #3A3348;font-size:13.5px;color:#F4F2EE}

/* Not fine print. It sits above the buttons because "this is an estimate, and
   you may need less than you asked for" is the honest headline. */
.dvest-disc{margin:0 0 22px;padding:16px 18px;border-left:2px solid #B47CFD;
            background:rgba(180,124,253,.07)}
.dvest-disc-h{display:block;font-size:15.5px;font-weight:600;color:#F4F2EE}
.dvest-disc-b{margin:7px 0 0;font-size:14.5px;line-height:1.6;color:#A79FB3;max-width:60ch}

.dvest-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.dvest-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
           padding:0 24px;background:#B47CFD;color:#0B0910;font-size:15.5px;font-weight:600;
           text-decoration:none;transition:background .18s ease}
.dvest-cta:hover{background:#D6BCFE;color:#0B0910}
.dvest-cta.is-quiet{background:transparent;border:1px solid #3A3348;color:#F4F2EE}
.dvest-cta.is-quiet:hover{border-color:#B47CFD;background:transparent;color:#F4F2EE}
.dvest-restart{min-height:40px;padding:0;border:0;background:none;color:#8E8799;
               font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
               text-transform:uppercase;cursor:pointer}
.dvest-restart:hover{color:#B47CFD}
.dvest-restart:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}

/* ---------- narrower ---------- */

@media (max-width:1040px){
  /* The side rail is a convenience, not the navigation: the ticks and the
     counter already say where the reader is, and the bar moves them. */
  .dvest-nav{display:none}
  .dvest-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .dvest-fact{padding:13px 14px 13px 0}
  .dvest-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvest-fact:nth-child(2n){border-right:0}
  .dvest-fact:nth-child(n+3){border-top:1px solid #241F2E}
  .dvest-next.is-lead{padding:0 22px;font-size:16px}
  .dvest-in{padding:var(--beat-minor,60px) var(--gutter,20px)}
  .dvest-opts{grid-template-columns:minmax(0,1fr)}
  .dvest-form{grid-template-columns:minmax(0,1fr)}
  .dvest-count-box,.dvest-slider{max-width:none}
  .dvest-stage{padding:24px 18px}
  .dvest-head,.dvest-bar{padding-left:18px;padding-right:18px}
  .dvest-rail{padding-left:18px;padding-right:18px}
  .dvest-actions .dvest-cta{flex:1 1 100%}
}
@media (max-width:460px){
  /* Voltar loses its word before Continuar loses its padding. */
  .dvest-back{padding:0 8px;font-size:10px}
  .dvest-next{padding:0 16px;font-size:15px}
  .dvest-bar{padding:12px 14px}
  .dvest-opt{padding:14px 15px;gap:11px}
  .dvest-sent{gap:8px}
  .dvest-line{gap:12px}
  .dvest-rev-r{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .dvest-stage.is-fwd,.dvest-stage.is-back,.dvest-line{animation:none}
  .dvest-opt,.dvest-opt-mark::after,.dvest-tick,.dvest-input,.dvest-next,.dvest-cta{
    transition:none}
}
/* <<< dvest-orcamento */

/* >>> dvs-sites (generated) */
/* ---------------------------------------------------------------------------
   37. CRIAÇÃO DE SITES (the dvs- sections), generated by build-sites-page.js.

   The owner asked for glow and polish on top of the drawing system, and for a
   page that is dark without being flat black. Violet does two jobs here: it is
   the line (ticks, pins, rules) and, very quietly, the light behind the one
   focal object in each section.
--------------------------------------------------------------------------- */

.dvs-hero,.dvs-prob,.dvs-tipos,.dvs-leva,.dvs-enc,.dvs-proc{--dvs-ink:#0B0910;--dvs-raised:#131019;--dvs-rule:#241F2E;--dvs-lit:#3A3348;
  --dvs-text:#F4F2EE;--dvs-body:rgba(244,242,238,.72);--dvs-muted:#8E8799;
  --dvs-violet:#B47CFD;--dvs-deep:#7B45D6;--dvs-soft:#D6BCFE;--dvs-amber:#FFA23F;
  position:relative;color:var(--dvs-text);font-family:'Instrument Sans',system-ui,sans-serif}

/* ---------- shared type ---------- */

.dvs-kicker{display:flex;align-items:center;gap:12px;margin:0;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dvs-violet)}
.dvs-kicker::before{content:'';width:22px;height:1px;background:var(--dvs-violet)}
/* Smaller than it was (owner, 12 Sep 2026: the H1 took too much of the first
   screen). The hero no longer carries an eyebrow above it: the breadcrumb
   already names the page. */
.dvs-h1{margin:0;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(36px,4.3vw,62px);line-height:.98;letter-spacing:-.042em;color:var(--dvs-text);
  text-wrap:balance;hyphens:none}
.dvs-h2{margin:18px 0 0;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(31px,3.9vw,56px);line-height:1.02;letter-spacing:-.038em;color:var(--dvs-text);
  text-wrap:balance}
/* Where the kicker names the topic ("Tipos de site", "Como trabalhamos") it
   sits inside the h2, so the heading carries the words people search for. It
   looks exactly as it did as a separate line above. */
.dvs-h2k{margin:0}
.dvs-h2k .dvs-kicker{font-weight:400;line-height:1.5}
.dvs-h2k .dvs-h2-t{display:block;margin-top:18px}
.dvs-lead{margin:22px 0 0;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--dvs-body);
  max-width:38ch}
.dvs-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--dvs-violet);
  font-variant-numeric:tabular-nums}

/* ---------- buttons, matched to the homepage ---------- */

.dvs-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;
  padding:0 24px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.dvs-btn.is-primary{background:var(--dvs-violet);color:var(--dvs-ink);
  box-shadow:0 10px 30px -12px rgba(180,124,253,.7)}
.dvs-btn.is-primary:hover{background:var(--dvs-soft)}
.dvs-btn.is-quiet{border-color:var(--dvs-lit);color:var(--dvs-text)}
.dvs-btn.is-quiet:hover{border-color:var(--dvs-violet);background:rgba(180,124,253,.08)}
.dvs-btn:focus-visible{outline:2px solid var(--dvs-violet);outline-offset:3px}
.dvs-arr{display:inline-block;transition:transform .18s ease}
.dvs-btn:hover .dvs-arr{transform:translateX(3px)}

/* ---------- entrance: pure CSS, so nothing depends on JS to be visible ---------- */

.dvs-rise{animation:dvs-rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes dvs-rise{from{opacity:0;transform:translateY(16px)}}

/* ====================================================================== */
/* 01 hero                                                                */
/* ====================================================================== */

.dvs-hero{background:var(--dvs-ink);overflow:hidden;isolation:isolate}
/* The grid fades out over the last third instead of stopping at the edge, so
   the hero hands over to the clients strip on the same ink with no seam. */
.dvs-hero::before{content:'';position:absolute;inset:0;z-index:-2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0H0v56' fill='none' stroke='%23B47CFD' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}
/* The one light on the page: behind the plate, low and wide, so it reads as the
   screen glowing rather than as fog. */
.dvs-hero::after{content:'';position:absolute;z-index:-1;right:-12%;top:14%;width:78%;height:86%;
  background:radial-gradient(closest-side,rgba(123,69,214,.30),rgba(123,69,214,.10) 55%,transparent);
  filter:blur(8px);pointer-events:none}

.dvs-hero-in{max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:0 clamp(40px,5vw,84px);align-items:start;
  /* The masthead sits in the flow and already takes its own 80px; this is only
     the air between it and the breadcrumb. */
  padding:clamp(40px,4.5vw,64px) var(--gutter,64px) clamp(56px,6vw,88px)}
/* The breadcrumb is a row of its own, so both columns start level: the kicker
   lines up with the plate's caption instead of floating half-way down it. */
.dvs-hero-in > .dvs-crumb{grid-column:1/-1}
.dvs-hero-copy{padding-top:4px}

.dvs-crumb{display:flex;align-items:center;gap:10px;margin:0 0 30px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-muted)}
/* 44px of hit area on a line that looks 11px tall: negative margins keep the
   visual rhythm while the link stays something a thumb can hit. */
.dvs-crumb a{color:var(--dvs-violet);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;margin:-14px 0}
.dvs-crumb a:hover{color:var(--dvs-soft)}
.dvs-crumb [aria-current]{color:var(--dvs-text)}

.dvs-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- the plate ---------- */

.dvs-plate{margin:0;position:relative}
.dvs-plate-cap{display:flex;justify-content:space-between;gap:16px;margin:0 0 14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dvs-muted)}
.dvs-demo{color:var(--dvs-amber)}

.dvs-frame{position:relative;border:1px solid var(--dvs-lit);border-radius:2px;background:#070509;
  box-shadow:0 0 0 1px rgba(180,124,253,.10),0 40px 90px -30px rgba(7,5,9,.9),
             0 0 60px -20px rgba(180,124,253,.35)}
.dvs-frame img{display:block;width:100%;height:auto;aspect-ratio:1586/992;object-fit:cover;border-radius:2px}

/* Crop marks, as on a printer's proof: they say "this is a drawing of a site",
   which is exactly what it is. */
.dvs-crop{position:absolute;width:14px;height:14px;pointer-events:none}
.dvs-crop::before,.dvs-crop::after{content:'';position:absolute;background:var(--dvs-violet)}
.dvs-crop::before{width:14px;height:1px}.dvs-crop::after{width:1px;height:14px}
.dvs-crop.is-tl{left:-22px;top:-22px}.dvs-crop.is-tl::before{bottom:0;right:0}.dvs-crop.is-tl::after{right:0;bottom:0}
.dvs-crop.is-tr{right:-22px;top:-22px}.dvs-crop.is-tr::before{bottom:0;left:0}.dvs-crop.is-tr::after{left:0;bottom:0}
.dvs-crop.is-bl{left:-22px;bottom:-22px}.dvs-crop.is-bl::before{top:0;right:0}.dvs-crop.is-bl::after{right:0;top:0}
.dvs-crop.is-br{right:-22px;bottom:-22px}.dvs-crop.is-br::before{top:0;left:0}.dvs-crop.is-br::after{left:0;top:0}

/* The pins are the thing to press, so they glow and breathe until someone
   presses one. The button is a 44px target; the violet disc inside is 30px. */
.dvs-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;
  border:0;background:none;cursor:pointer;display:grid;place-items:center;
  animation:dvs-pin .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0ms)}
.dvs-pin span{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--dvs-violet);color:var(--dvs-ink);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  box-shadow:0 0 0 4px rgba(11,9,16,.5),0 0 18px 2px rgba(180,124,253,.8);transition:transform .2s ease,background .2s ease}
.dvs-pin span::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--dvs-violet);opacity:0;
  animation:dvs-ring 2.4s ease-out infinite;animation-delay:calc(var(--d,0ms) + 600ms)}
@keyframes dvs-pin{from{opacity:0;transform:scale(.4)}}
@keyframes dvs-ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
@media (hover:hover){.dvs-pin:hover span{transform:scale(1.12)}}
.dvs-pin[aria-expanded="true"] span{background:#fff;transform:scale(1.12)}
.dvs-pin[aria-expanded="true"] span::after,.dvs-plate.is-used .dvs-pin span::after{animation:none}
.dvs-pin:focus-visible{outline:none}
.dvs-pin:focus-visible span{outline:2px solid #fff;outline-offset:3px}

/* the note opens on the drawing, next to its number; placed by the JS */
.dvs-pop{position:absolute;z-index:3;display:none;width:min(260px,74%);padding:11px 14px 13px;border:1px solid var(--dvs-violet);
  background:rgba(13,10,19,.96);box-shadow:0 18px 40px -12px rgba(7,5,9,.9),0 0 30px -10px rgba(180,124,253,.6)}
.dvs-pop.is-open{display:block;animation:dvs-fade .25s ease both}
.dvs-pop p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--dvs-text)}
.dvs-pop::before{content:'';position:absolute;left:var(--ax,50%);top:-6px;width:10px;height:10px;margin-left:-5px;
  border-left:1px solid var(--dvs-violet);border-top:1px solid var(--dvs-violet);background:rgba(13,10,19,.96);transform:rotate(45deg)}
.dvs-pop.is-up::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.dvs-plate-hint{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-muted)}
.dvs-plate-hint span{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--dvs-violet);
  animation:dvs-live 1.8s ease-out infinite}

/* ====================================================================== */
/* 02 problema                                                            */
/* ====================================================================== */

.dvs-prob{background:#0D0A13;border-top:1px solid var(--dvs-rule);overflow:clip;isolation:isolate}
.dvs-prob::before{content:'';position:absolute;z-index:-1;left:-10%;top:-20%;width:60%;height:70%;
  background:radial-gradient(closest-side,rgba(123,69,214,.20),transparent);filter:blur(6px);pointer-events:none}

.dvs-prob-in{max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start;
  padding:clamp(88px,9vw,136px) var(--gutter,64px)}
.dvs-prob-side{position:sticky;top:112px}

.dvs-verdict{margin-top:36px;padding:24px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.85);
  box-shadow:0 0 0 1px rgba(180,124,253,.08),0 24px 60px -30px rgba(7,5,9,.9)}
.dvs-meter{display:flex;align-items:baseline;gap:14px}
.dvs-count{font-family:'JetBrains Mono',monospace;font-size:44px;line-height:1;letter-spacing:-.02em;
  color:var(--dvs-text);font-variant-numeric:tabular-nums}
.dvs-count b{font-weight:500;color:var(--dvs-violet)}
.dvs-of{font-size:22px;margin-left:6px;color:var(--dvs-muted)}
.dvs-meter-l{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dvs-muted)}
.dvs-gauge{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:18px 0 0}
.dvs-gauge i{height:4px;background:var(--dvs-rule);transition:background .3s ease,box-shadow .3s ease}
.dvs-gauge i.is-on{background:var(--dvs-violet);box-shadow:0 0 12px -2px rgba(180,124,253,.8)}
.dvs-say{margin:18px 0 0;font-size:17px;line-height:1.55;color:var(--dvs-text);min-height:3.1em}
.dvs-verdict .dvs-btn{margin-top:20px}

.dvs-instr{margin:0 0 16px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dvs-muted)}
.dvs-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dvs-li{border:1px solid var(--dvs-rule);background:#0F0C16;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.dvs-li:hover{border-color:var(--dvs-lit)}
.dvs-li.is-on{border-color:var(--dvs-violet);background:rgba(180,124,253,.07);
  box-shadow:0 0 0 1px rgba(180,124,253,.18),0 14px 40px -24px rgba(180,124,253,.6)}

.dvs-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  width:100%;min-height:72px;padding:18px 22px;border:0;background:none;color:var(--dvs-text);
  font-family:inherit;font-size:clamp(16px,1.3vw,18px);line-height:1.45;text-align:left;cursor:pointer}
.dvs-item:focus-visible{outline:2px solid var(--dvs-violet);outline-offset:-2px}
.dvs-box{position:relative;width:24px;height:24px;border:1px solid #4A4459;flex:0 0 auto;
  transition:border-color .2s ease,background .2s ease}
.dvs-box::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;
  font-size:15px;color:var(--dvs-ink);transform:scale(0);transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.dvs-li.is-on .dvs-box{border-color:var(--dvs-violet);background:var(--dvs-violet)}
.dvs-li.is-on .dvs-box::after{transform:scale(1)}
/* Invites the first mark once, when the list scrolls into view. */
.dvs-li.is-invite .dvs-box{animation:dvs-invite 1.2s ease-in-out 2}
@keyframes dvs-invite{50%{border-color:var(--dvs-violet);box-shadow:0 0 0 6px rgba(180,124,253,.18)}}

.dvs-cost{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1)}
.dvs-cost > div{overflow:hidden}
.dvs-li.is-on .dvs-cost{grid-template-rows:1fr}
.dvs-cost p{margin:0 22px 20px calc(22px + 18px + 2ch);padding-left:14px;border-left:2px solid var(--dvs-violet);
  font-size:15.5px;line-height:1.55;color:var(--dvs-body)}
.dvs-cost-k{display:block;margin-bottom:4px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dvs-violet)}

/* ---------------------------------------------------------------- narrower */

@media (max-width:1100px){
  .dvs-hero-in{grid-template-columns:minmax(0,1fr);gap:0;padding-top:clamp(36px,5vw,56px)}
  .dvs-lead{max-width:52ch}
  .dvs-plate{max-width:860px;margin-top:56px}
}
@media (max-width:900px){
  .dvs-prob-in{grid-template-columns:minmax(0,1fr);gap:0}
  .dvs-prob-side{position:static}
  /* On a phone the list comes first and the verdict follows it, so the reader
     sees the tally only after they have given it something to count. */
  .dvs-prob-in{display:flex;flex-direction:column}
  .dvs-prob-side{display:contents}
  .dvs-prob-side > .dvs-kicker{order:1}.dvs-prob-side > .dvs-h2{order:2}.dvs-prob-side > .dvs-lead{order:3}
  .dvs-prob-list{order:4;margin-top:34px}.dvs-verdict{order:5;margin-top:24px}
}
@media (max-width:620px){
  .dvs-hero-in{padding:32px var(--gutter,20px) 40px}
  .dvs-plate{margin-top:44px}
  .dvs-crumb{margin-bottom:22px}
  .dvs-ctas{flex-direction:column;align-items:stretch}
  /* On a 350px plate a 30px disc covers the word it points at; the target
     stays 40px, the disc shrinks. */
  .dvs-pin{width:40px;height:40px;margin:-20px 0 0 -20px}
  .dvs-pin span{width:22px;height:22px;font-size:10px;
    box-shadow:0 0 0 3px rgba(11,9,16,.5),0 0 14px 2px rgba(180,124,253,.8)}
  .dvs-pop p{font-size:13.5px}
  .dvs-crop{display:none}
  .dvs-plate-cap{flex-direction:column;gap:6px}
  .dvs-prob-in{padding:88px var(--gutter,20px)}
  .dvs-item{padding:16px 16px;gap:14px}
  .dvs-cost p{margin:0 16px 18px 16px}
  .dvs-verdict{padding:20px}
  .dvs-verdict .dvs-btn{width:100%}
  /* Keeps "Simular o preço de um site novo" on one line at 360px. */
  .dvs-btn{padding:0 18px;font-size:11.5px;letter-spacing:.08em}
}

@media (prefers-reduced-motion:reduce){
  .dvs-rise,.dvs-pin,.dvs-pin span::after,.dvs-plate-hint span,.dvs-li.is-invite .dvs-box{animation:none}
  .dvs-cost,.dvs-li,.dvs-gauge i,.dvs-box::after,.dvs-btn,.dvs-arr{transition:none}
}

/* ====================================================================== */
/* clientes: the homepage strip. Section 17 above lays it out; this only  */
/* sizes the cells the homepage sized from JS.                            */
/* ====================================================================== */

.dvs-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:190px;height:100%;padding:0 26px}
.dvs-logo img{max-width:100%;max-height:40px;filter:brightness(0) invert(1)}
@media (max-width:899px){.dvs-logo{width:130px;padding:0 16px}.dvs-logo img{max-height:28px}}

/* ====================================================================== */
/* trabalhos: the homepage portfolio, as classes instead of inline styles */
/* ====================================================================== */

.dvs-pj-stage{position:relative;display:flex;flex-direction:column;gap:20px}
.dvs-pj-row{position:relative;overflow:hidden;height:300px;cursor:grab;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 1.6%,#000 4.5%,#000 95.5%,rgba(0,0,0,.72) 98.4%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 1.6%,#000 4.5%,#000 95.5%,rgba(0,0,0,.72) 98.4%,rgba(0,0,0,0) 100%)}
.dvs-pj-row.is-dragging{cursor:grabbing}
.dvs-pj-track{display:flex;gap:20px;height:100%;will-change:transform}
.dvs-pj{position:relative;flex:0 0 auto;height:100%;-webkit-user-select:none;user-select:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.dvs-pj-b{position:relative;overflow:hidden;height:100%;padding:1px;
  background:linear-gradient(210deg,rgba(214,188,254,.42) 0%,rgba(244,242,238,.07) 46%,rgba(244,242,238,.02) 100%);
  box-shadow:0 22px 48px rgba(7,5,9,.5)}
.dvs-pj-in{position:relative;overflow:hidden;height:100%;background:#0E0B14}
.dvs-pj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;pointer-events:none;-webkit-user-drag:none;
  transition:opacity .45s ease,filter .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.dvs-pj img.is-in{opacity:1}
@media (hover:hover){.dvs-pj:hover img{filter:brightness(1.16) saturate(1.06);transform:scale(1.035)}}
.dvs-pj-veil{position:absolute;inset:0;
  background:linear-gradient(rgba(11,9,16,0) 56%,rgba(7,5,9,.16) 75%,rgba(5,4,7,.9) 89%,rgba(5,4,7,.96) 100%)}
.dvs-pj-tags{position:absolute;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.dvs-pj-kind{padding:5px 9px;background:rgba(16,12,26,.6);font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;color:#D6BCFE}
.dvs-pj-cap{position:absolute;left:14px;right:14px;bottom:13px}
.dvs-pj-name{display:block;font-size:15px;font-weight:500;line-height:1.25;color:#F4F2EE}
.dvs-pj-sec{display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  color:rgba(244,242,238,.6)}
.dvs-pj-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:26px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:rgba(244,242,238,.55)}
@media (max-width:899px){.dvs-pj-row{height:232px}}

/* ====================================================================== */
/* 03 tipos de site                                                       */
/* ====================================================================== */

.dvs-tipos{background:var(--dvs-ink);border-top:1px solid var(--dvs-rule);overflow:clip;isolation:isolate}
.dvs-tipos::before{content:'';position:absolute;z-index:-1;right:-10%;top:32%;width:72%;height:78%;
  background:radial-gradient(closest-side,rgba(123,69,214,.26),rgba(123,69,214,.08) 55%,transparent);
  filter:blur(8px);pointer-events:none}
.dvs-tipos-in,.dvs-leva-in{max-width:1440px;margin:0 auto;padding:clamp(88px,9vw,136px) var(--gutter,64px)}

/* Section header shared by every service section, the homepage's own pattern
   (TECNOLOGIA > "As ferramentas que usamos." > the grey line under it): one
   column, read top to bottom. It used to put the claim left and the text right,
   and the owner did not know which side to read first (12 Sep 2026). */
.dvs-head{display:block;max-width:980px}
.dvs-head .dvs-lead{margin:16px 0 0;max-width:36em;font-family:'Archivo',sans-serif;font-weight:500;
  font-size:clamp(18px,1.75vw,24px);line-height:1.34;letter-spacing:-.018em;color:rgba(244,242,238,.72)}
.dvs-h3{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1.08;
  letter-spacing:-.034em;color:var(--dvs-text);text-wrap:balance}

.dvs-tbox{margin-top:clamp(40px,5vw,64px);border:1px solid var(--dvs-lit);background:rgba(19,16,25,.62);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px rgba(180,124,253,.08),0 40px 90px -40px rgba(7,5,9,.9),0 0 90px -40px rgba(180,124,253,.5)}
.dvs-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--dvs-rule)}
.dvs-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:104px;
  padding:20px 24px;border:0;border-right:1px solid var(--dvs-rule);background:none;color:inherit;
  font-family:inherit;text-align:left;cursor:pointer;transition:background .25s ease}
.dvs-tab:nth-child(4){border-right:0}
.dvs-tab:hover{background:rgba(180,124,253,.05)}
.dvs-tab:focus-visible{outline:2px solid var(--dvs-violet);outline-offset:-2px}
.dvs-tab-t{margin-top:4px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(17px,1.6vw,22px);line-height:1.1;
  letter-spacing:-.03em;color:rgba(244,242,238,.6);transition:color .25s ease}
.dvs-tab-p{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dvs-muted);transition:color .25s ease}
.dvs-tab[aria-selected="true"]{background:linear-gradient(180deg,rgba(180,124,253,.12),rgba(180,124,253,0) 80%)}
.dvs-tab[aria-selected="true"] .dvs-tab-t{color:var(--dvs-text)}
.dvs-tab[aria-selected="true"] .dvs-tab-p{color:var(--dvs-soft)}
.dvs-tab-bar{position:absolute;left:0;top:-1px;width:25%;height:2px;background:var(--dvs-violet);
  box-shadow:0 0 18px rgba(180,124,253,.9);transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}

.dvs-tstage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);
  padding:clamp(24px,3vw,44px);align-items:start}
.dvs-planw{margin:0}
.dvs-plan-cap{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dvs-muted)}
.dvs-plan-cap [data-dvs-plan-n]{color:var(--dvs-soft)}
.dvs-plan{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(6,clamp(46px,4.3vw,60px));gap:8px;padding:12px;border:2px solid var(--dvs-lit);
  background-color:#0C0912;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0H0v56' fill='none' stroke='%23B47CFD' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");background-size:28px 28px}
.dvs-plan[data-t="1"]{grid-template-areas:"ini ini ini ini" "ini ini ini ini" "ini ini ini ini" "ini ini ini ini" "ini ini ini ini" "ini ini ini ini"}
.dvs-plan[data-t="1"] .dvs-room:not([data-in~="1"]){display:none}
.dvs-plan[data-t="2"]{grid-template-areas:"ini ini srv srv" "ini ini srv srv" "ini ini sob sob" "tra tra sob sob" "tra tra con con" "tra tra con con"}
.dvs-plan[data-t="2"] .dvs-room:not([data-in~="2"]){display:none}
.dvs-plan[data-t="3"]{grid-template-areas:"ini ini srv srv" "ini ini s1 s2" "sob sob s3 faq" "tra tra blg blg" "tra tra blg blg" "con con blg blg"}
.dvs-plan[data-t="3"] .dvs-room:not([data-in~="3"]){display:none}
.dvs-plan[data-t="4"]{grid-template-areas:"ini ini srv srv" "ini ini s1 s2" "sob tra s3 s4" "faq con blg blg" "mar mar cli cli" "en en en en"}
.dvs-plan[data-t="4"] .dvs-room:not([data-in~="4"]){display:none}
.dvs-room[data-r="ini"]{grid-area:ini}.dvs-room[data-r="srv"]{grid-area:srv}.dvs-room[data-r="s1"]{grid-area:s1}.dvs-room[data-r="s2"]{grid-area:s2}.dvs-room[data-r="s3"]{grid-area:s3}.dvs-room[data-r="s4"]{grid-area:s4}.dvs-room[data-r="sob"]{grid-area:sob}.dvs-room[data-r="tra"]{grid-area:tra}.dvs-room[data-r="blg"]{grid-area:blg}.dvs-room[data-r="faq"]{grid-area:faq}.dvs-room[data-r="con"]{grid-area:con}.dvs-room[data-r="mar"]{grid-area:mar}.dvs-room[data-r="cli"]{grid-area:cli}.dvs-room[data-r="en"]{grid-area:en}
.dvs-room{position:relative;min-width:0;min-height:0}
.dvs-room-box{position:absolute;inset:0;border:1px solid rgba(180,124,253,.36);background:rgba(180,124,253,.04);
  transform-origin:0 0;transition:transform .55s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease}
.dvs-room-l{position:absolute;left:10px;right:8px;top:8px;display:flex;flex-direction:column;gap:3px;min-width:0;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.dvs-room-t{font-size:13px;font-weight:500;line-height:1.2;color:var(--dvs-text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dvs-room-m{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dvs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dvs-room.is-home .dvs-room-box{border-color:var(--dvs-violet);background:rgba(180,124,253,.11);
  box-shadow:inset 0 0 40px -14px rgba(180,124,253,.6)}
.dvs-room.is-home .dvs-room-m{color:var(--dvs-soft)}
.dvs-room.is-fn .dvs-room-box{border-style:dashed;border-color:rgba(214,188,254,.55);background:rgba(214,188,254,.09)}
.dvs-m1{display:none}
.dvs-plan[data-t="1"] .dvs-m1{display:inline}
.dvs-plan[data-t="1"] .dvs-m2{display:none}
/* A one-page site drawn as one long room cut into sections: the dashed lines
   are where the other tiers put walls. */
.dvs-bands{position:absolute;left:10px;right:10px;top:52px;bottom:10px;display:grid;
  grid-template-rows:1.4fr 1fr 1fr .8fr;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.dvs-plan[data-t="1"] .dvs-bands{opacity:1;visibility:visible;transition:opacity .4s ease .25s,visibility 0s}
.dvs-bands > span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px;
  border-top:1px dashed rgba(180,124,253,.42);font-size:13px;color:var(--dvs-body)}
.dvs-room.is-new .dvs-room-box,.dvs-room.is-new .dvs-room-l{animation:dvs-room-in .5s cubic-bezier(.3,1.3,.5,1) backwards;
  animation-delay:var(--i,0ms)}
@keyframes dvs-room-in{from{opacity:0;transform:scale(.72)}}

.dvs-tinfo{display:flex;flex-direction:column}
/* display:flex outranks the UA rule for [hidden], so all four showed at once */
.dvs-tinfo[hidden]{display:none}
.dvs-tinfo.is-in{animation:dvs-fade .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes dvs-fade{from{opacity:0;transform:translateY(10px)}}
.dvs-tinfo-p{margin:10px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dvs-violet)}
.dvs-tinfo-b{margin-top:22px;padding-top:18px;border-top:1px solid var(--dvs-rule)}
.dvs-tk{margin:0 0 8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dvs-muted)}
.dvs-tinfo-b p:not(.dvs-tk){margin:0;font-size:16px;line-height:1.6;color:var(--dvs-body)}
.dvs-tinfo .dvs-btn{margin-top:28px;align-self:flex-start}

/* ====================================================================== */
/* 06 o que o site leva                                                   */
/* ====================================================================== */

.dvs-leva{background:#0D0A13;border-top:1px solid var(--dvs-rule);overflow:clip;isolation:isolate}
.dvs-leva::before{content:'';position:absolute;z-index:-1;right:-8%;top:20%;width:66%;height:70%;
  background:radial-gradient(closest-side,rgba(123,69,214,.24),rgba(123,69,214,.07) 55%,transparent);
  filter:blur(8px);pointer-events:none}
.dvs-leva-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);
  margin-top:clamp(48px,6vw,88px);align-items:start}
/* The drawing stays put while the four layers scroll past it. */
.dvs-leva-vis{grid-column:2;grid-row:1;position:sticky;top:clamp(96px,16vh,150px);margin:0}
.dvs-layers{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0}
.dvs-layer{position:relative;padding:clamp(40px,11vh,110px) 0 clamp(40px,11vh,110px) 28px;
  border-left:1px solid var(--dvs-rule);opacity:.38;transition:opacity .45s ease}
.dvs-layer:first-child{padding-top:6px}
.dvs-layer:last-child{padding-bottom:clamp(60px,20vh,200px)}
.dvs-layer::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--dvs-violet);
  box-shadow:0 0 14px rgba(180,124,253,.7);transform:scaleY(0);transform-origin:top;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.dvs-layer.is-on{opacity:1}
.dvs-layer.is-on::before{transform:scaleY(1)}
.dvs-layer .dvs-h3{margin-top:12px}
.dvs-layer-line{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--dvs-body);max-width:40ch}
.dvs-layer ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.dvs-layer ul li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--dvs-text)}
.dvs-layer ul li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--dvs-violet)}

/* ---------- the drawing: one site, four layers ---------- */

.dvs-mock{position:relative;border:1px solid var(--dvs-lit);border-radius:3px;background:#0A0810;overflow:hidden;
  box-shadow:0 0 0 1px rgba(180,124,253,.1),0 40px 90px -30px rgba(7,5,9,.9),0 0 70px -20px rgba(180,124,253,.38)}
.dvs-mk-bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;border-bottom:1px solid var(--dvs-rule);
  background:#110E18}
.dvs-mk-dots{display:flex;gap:6px}
.dvs-mk-dots i{width:8px;height:8px;border-radius:50%;background:#2B2535}
.dvs-mk-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:22px;padding:0 10px;background:#0B0910;
  border:1px solid var(--dvs-rule);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;
  color:var(--dvs-muted);white-space:nowrap;overflow:hidden}
.dvs-mk-lock{display:none;position:relative;flex:0 0 auto;width:8px;height:7px;margin-top:4px;background:var(--dvs-soft);
  border-radius:1px}
.dvs-mk-lock::before{content:'';position:absolute;left:1px;top:-5px;width:6px;height:6px;box-sizing:border-box;
  border:1.5px solid var(--dvs-soft);border-bottom:0;border-radius:3px 3px 0 0}
.dvs-u2{display:none}
.dvs-mock.is-l3 .dvs-mk-lock{display:inline-block}
.dvs-mock.is-l4 .dvs-u1{display:none}
.dvs-mock.is-l4 .dvs-u2{display:inline;color:var(--dvs-text)}
.dvs-mk-live{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-soft);opacity:0;transition:opacity .4s ease}
.dvs-mk-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dvs-violet);
  animation:dvs-live 1.8s ease-out infinite}
@keyframes dvs-live{0%{box-shadow:0 0 0 0 rgba(180,124,253,.6)}70%,100%{box-shadow:0 0 0 7px rgba(180,124,253,0)}}
.dvs-mock.is-l4 .dvs-mk-live{opacity:1}

.dvs-mk-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0B0910}
/* layer 1 only: the column grid and a dimension line, as on a design board */
.dvs-mk-grid{position:absolute;top:0;bottom:0;left:6%;right:6%;opacity:0;transition:opacity .5s ease;
  background:repeating-linear-gradient(90deg,rgba(180,124,253,.075) 0 7%,transparent 7% 8.3333%)}
.dvs-mk-dim{position:absolute;left:6%;right:6%;top:13.5%;height:1px;background:rgba(180,124,253,.6);opacity:0;
  transition:opacity .4s ease}
.dvs-mk-dim::before,.dvs-mk-dim::after{content:'';position:absolute;top:-4px;width:1px;height:9px;background:rgba(180,124,253,.8)}
.dvs-mk-dim::before{left:0}.dvs-mk-dim::after{right:0}
.dvs-mk-dim span{position:absolute;left:50%;top:-7px;transform:translateX(-50%);padding:0 8px;background:#0B0910;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dvs-violet);white-space:nowrap}
.dvs-mock:not(.is-l2) .dvs-mk-grid,.dvs-mock:not(.is-l2) .dvs-mk-dim{opacity:1}

.dvs-w{position:absolute;display:block;border:1px solid rgba(180,124,253,.6);
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.dvs-w.nv,.dvs-w.s{border-width:0;background:rgba(180,124,253,.42)}
.dvs-w.im{background:
  linear-gradient(to top right,transparent calc(50% - .6px),rgba(180,124,253,.45) 50%,transparent calc(50% + .6px)),
  linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(180,124,253,.45) 50%,transparent calc(50% + .6px))}
.dvs-w.cd::before,.dvs-w.cd::after{content:'';position:absolute;left:10%;opacity:0;transition:opacity .5s ease}
.dvs-w.cd::before{top:20%;width:48%;height:12%;background:rgba(244,242,238,.62)}
.dvs-w.cd::after{top:48%;width:78%;height:30%;
  background:linear-gradient(rgba(244,242,238,.26),rgba(244,242,238,.26)) 0 0/100% 2px no-repeat,
             linear-gradient(rgba(244,242,238,.26),rgba(244,242,238,.26)) 0 50%/82% 2px no-repeat,
             linear-gradient(rgba(244,242,238,.26),rgba(244,242,238,.26)) 0 100%/60% 2px no-repeat}
.dvs-mock.is-l2 .dvs-w{border-color:transparent}
.dvs-mock.is-l2 .dvs-w.lg{background:var(--dvs-violet)}
.dvs-mock.is-l2 .dvs-w.nv{background:rgba(244,242,238,.5)}
.dvs-mock.is-l2 .dvs-w.h{background:rgba(244,242,238,.9)}
.dvs-mock.is-l2 .dvs-w.s{background:rgba(244,242,238,.36)}
.dvs-mock.is-l2 .dvs-w.bt{border-color:rgba(244,242,238,.4)}
.dvs-mock.is-l2 .dvs-w.pr,.dvs-mock.is-l2 .dvs-w.nb{background:var(--dvs-violet);border-color:var(--dvs-violet)}
.dvs-mock.is-l2 .dvs-w.im{background:radial-gradient(120% 90% at 70% 18%,rgba(214,188,254,.55),rgba(123,69,214,.34) 42%,#131019 82%)}
.dvs-mock.is-l2 .dvs-w.cd{background:#16121F;border-color:#2A2433}
.dvs-mock.is-l2 .dvs-w.cd::before,.dvs-mock.is-l2 .dvs-w.cd::after{opacity:1}

/* layer 3: what works underneath, called out on the drawing */
.dvs-chip,.dvs-wa,.dvs-ck{opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.dvs-chip{position:absolute;z-index:2;padding:4px 8px;border:1px solid var(--dvs-violet);background:rgba(11,9,16,.88);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dvs-soft);white-space:nowrap;transform:translateY(6px) scale(.92);box-shadow:0 6px 18px rgba(7,5,9,.6)}
.dvs-wa{position:absolute;z-index:2;right:3.5%;bottom:14%;width:6.5%;aspect-ratio:1;border-radius:50%;
  background:var(--dvs-violet);box-shadow:0 6px 16px rgba(7,5,9,.6);transform:scale(.4)}
.dvs-wa::before{content:'';position:absolute;inset:29%;border:2px solid var(--dvs-ink);border-radius:50% 50% 50% 10%}
.dvs-ck{position:absolute;z-index:2;left:0;right:0;bottom:0;height:9%;display:flex;align-items:center;
  justify-content:space-between;padding:0 3%;background:rgba(19,16,25,.96);border-top:1px solid var(--dvs-lit);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dvs-muted);transform:translateY(100%)}
.dvs-ck i{width:10%;height:48%;background:var(--dvs-violet)}
.dvs-mock.is-l3 .dvs-chip,.dvs-mock.is-l3 .dvs-wa,.dvs-mock.is-l3 .dvs-ck{opacity:1;transform:none;
  transition-delay:var(--d,0ms)}

/* layer 4: the finished site replaces the drawing */
.dvs-mk-shot{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.025);transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.dvs-mock.is-l4 .dvs-mk-shot{opacity:1;transform:none}

.dvs-mk-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:16px}
.dvs-mk-steps{flex:1 1 380px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dvs-mk-step{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 0 0;border:0;
  background:none;color:var(--dvs-muted);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-align:left;cursor:pointer;transition:color .25s ease}
.dvs-mk-step::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--dvs-rule);
  transition:background .3s ease,box-shadow .3s ease}
.dvs-mk-step.is-past::before{background:rgba(180,124,253,.5)}
.dvs-mk-step[aria-current]{color:var(--dvs-text)}
.dvs-mk-step[aria-current]::before{background:var(--dvs-violet);box-shadow:0 0 12px -2px rgba(180,124,253,.8)}
.dvs-mk-step:hover{color:var(--dvs-text)}
.dvs-mk-step:focus-visible{outline:2px solid var(--dvs-violet);outline-offset:2px}
.dvs-mk-cap .dvs-demo{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .4s ease}
.dvs-mk-cap .dvs-demo.is-on{opacity:1}

/* ---------------------------------------------------------------- narrower */

@media (max-width:999px){
  .dvs-head .dvs-lead{margin-top:12px}
  .dvs-tstage{grid-template-columns:minmax(0,1fr)}
  .dvs-tinfos{max-width:640px}
  /* No sticky drawing on a narrow screen: it would take half the viewport.
     The drawing sits above the list and plays its four layers on its own. */
  .dvs-leva-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .dvs-leva-vis{position:relative;top:auto;grid-column:1;grid-row:1}
  .dvs-layers{grid-column:1;grid-row:2;margin-top:44px}
  .dvs-layer{opacity:1;padding:28px 0 28px 22px}
  .dvs-layer:first-child{padding-top:4px}
  .dvs-layer:last-child{padding-bottom:4px}
}
@media (max-width:700px){
  .dvs-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvs-tab{min-height:80px;padding:14px 16px;gap:4px}
  .dvs-tab:nth-child(2){border-right:0}
  .dvs-tab:nth-child(-n+2){border-bottom:1px solid var(--dvs-rule)}
  .dvs-tab-t{font-size:16px}
  .dvs-tab-p{font-size:10px;letter-spacing:.1em}
  .dvs-tab-bar{display:none}
  .dvs-tab[aria-selected="true"]{box-shadow:inset 0 2px 0 var(--dvs-violet)}
}
@media (max-width:620px){
  .dvs-tipos-in,.dvs-leva-in{padding:88px var(--gutter,20px)}
  .dvs-tstage{padding:18px 14px 22px;gap:30px}
  .dvs-plan{grid-template-rows:repeat(6,46px);gap:5px;padding:7px}
  .dvs-room-l{left:7px;right:5px;top:6px}
  .dvs-room-t{font-size:11.5px}
  .dvs-room:not(.is-home) .dvs-room-m{display:none}
  .dvs-bands{left:7px;right:7px;top:44px;bottom:7px}
  .dvs-bands > span{font-size:12px;padding:0 4px}
  .dvs-tinfo .dvs-btn{align-self:stretch}
  .dvs-mk-cap{flex-direction:column;align-items:stretch}
  .dvs-mk-steps{flex:0 0 auto}
  .dvs-mk-step{font-size:9.5px;letter-spacing:.06em;gap:5px}
  .dvs-mk-step .dvs-n{display:none}
  .dvs-chip{font-size:8.5px;padding:3px 6px}
  .dvs-mk-dim span{font-size:8px}
  .dvs-mk-url{font-size:10px}
  .dvs-ck{font-size:7.5px}
}

/* 320 to 380: a single room is about 55px wide, and "Trabalhos" or "Serviço 1"
   was cut. Less padding around the plan buys the room its label back. */
@media (max-width:380px){
  .dvs-tstage{padding:16px 8px 20px}
  .dvs-plan{gap:4px;padding:5px;border-width:1px}
  .dvs-room-l{left:5px;right:3px;top:5px}
  .dvs-room-t{font-size:10.5px;letter-spacing:-.01em}
  .dvs-bands{left:5px;right:5px;top:40px;bottom:5px}
}

@media (prefers-reduced-motion:reduce){
  .dvs-room-box,.dvs-room-l,.dvs-tab-bar,.dvs-w,.dvs-chip,.dvs-wa,.dvs-ck,.dvs-mk-shot,.dvs-layer,.dvs-layer::before,
  .dvs-pj,.dvs-pj img{transition:none}
  .dvs-room.is-new .dvs-room-box,.dvs-room.is-new .dvs-room-l,.dvs-tinfo.is-in,.dvs-mk-live::before{animation:none}
}

/* ====================================================================== */
/* 07 pronto para ser encontrado                                          */
/* ====================================================================== */

.dvs-enc{background:var(--dvs-ink);border-top:1px solid var(--dvs-rule);overflow:clip;isolation:isolate}
.dvs-enc::before{content:'';position:absolute;z-index:-1;right:-6%;top:26%;width:56%;height:74%;
  background:radial-gradient(closest-side,rgba(123,69,214,.28),rgba(123,69,214,.08) 55%,transparent);
  filter:blur(8px);pointer-events:none}
.dvs-enc-in,.dvs-proc-in{max-width:1440px;margin:0 auto;padding:clamp(88px,9vw,136px) var(--gutter,64px)}
.dvs-enc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);
  margin-top:clamp(48px,6vw,80px);align-items:center}

.dvs-enc-form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.dvs-fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.dvs-fld > span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dvs-muted)}
.dvs-fld input,.dvs-fld select{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--dvs-lit);border-radius:0;
  background-color:rgba(19,16,25,.85);color:var(--dvs-text);font-family:inherit;font-size:16px;
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease}
.dvs-fld select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B47CFD' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;
  cursor:pointer}
.dvs-fld select option{background:#131019;color:#F4F2EE}
.dvs-fld input::placeholder{color:rgba(244,242,238,.36)}
.dvs-fld input:focus,.dvs-fld select:focus{outline:none;border-color:var(--dvs-violet);box-shadow:0 0 0 3px rgba(180,124,253,.2)}
.dvs-enc-priv{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:13.5px;color:var(--dvs-muted)}
.dvs-enc-priv::before{content:'';flex:0 0 auto;width:6px;height:6px;background:var(--dvs-violet)}

.dvs-enc-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;border:1px solid var(--dvs-lit)}
.dvs-enc-tab{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 10px;border:0;
  border-right:1px solid var(--dvs-rule);background:none;color:var(--dvs-muted);font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}
.dvs-enc-tab:last-child{border-right:0}
.dvs-enc-tab:hover{color:var(--dvs-text)}
.dvs-enc-tab:focus-visible{outline:2px solid var(--dvs-violet);outline-offset:-2px}
.dvs-enc-mk{flex:0 0 auto;width:15px;height:15px;fill:currentColor}
.dvs-enc-tab[aria-selected="true"]{background:rgba(180,124,253,.12);color:var(--dvs-text);box-shadow:inset 0 -2px 0 var(--dvs-violet)}

.dvs-enc-notes{list-style:none;margin:26px 0 0;padding:0;min-height:260px}
.dvs-enc-notes li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid var(--dvs-rule);
  font-size:16px;line-height:1.55;color:var(--dvs-body);animation:dvs-fade .4s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--d,0ms)}
.dvs-enc-notes li:last-child{border-bottom:1px solid var(--dvs-rule)}
.dvs-enc-notes li b,.dvs-xc b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--dvs-violet);
  color:var(--dvs-ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500}
.dvs-enc-honest{margin:clamp(48px,5vw,72px) 0 0;max-width:74ch;padding-left:18px;border-left:2px solid var(--dvs-violet);
  font-size:16px;line-height:1.6;color:var(--dvs-body)}

/* ---------- the phone, and the divider between outside and inside ---------- */

.dvs-phone-w{margin:0;justify-self:center;width:100%;max-width:340px}
.dvs-phone{position:relative;padding:11px;border-radius:42px;background:linear-gradient(160deg,#2C2536,#141019);
  box-shadow:0 0 0 1px #3A3348,0 40px 90px -30px rgba(7,5,9,.9),0 0 100px -30px rgba(180,124,253,.55)}
.dvs-phone-scr{position:relative;overflow:hidden;border-radius:32px;aspect-ratio:9/18.5;background:#fff;isolation:isolate;
  container-type:inline-size;--split:42%}
.dvs-phone-scr::after{content:'';position:absolute;z-index:8;top:2%;left:37%;width:26%;height:3%;border-radius:20px;background:#0B0910}
.dvs-sc-layer{position:absolute;inset:0}
.dvs-sc-layer.is-xray{z-index:2;background:#0B0910;clip-path:inset(0 0 0 var(--split))}
.dvs-sc-layer.is-xray::before{content:'';position:absolute;inset:0;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0H0v56' fill='none' stroke='%23B47CFD' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");background-size:20px 20px}
.dvs-xr-under{position:absolute;inset:0;filter:invert(1) hue-rotate(180deg);opacity:.2}
.dvs-xc{position:absolute;z-index:2;padding:6px 8px 6px 32px;border:1px solid var(--dvs-violet);background:rgba(13,10,19,.94);
  font-family:'JetBrains Mono',monospace;font-size:max(9px,3.1cqw);line-height:1.5;color:var(--dvs-soft);
  overflow-wrap:anywhere;box-shadow:0 0 18px -6px rgba(180,124,253,.8)}
.dvs-xc b{position:absolute;left:6px;top:5px;width:19px;height:19px;font-size:10px}
.dvs-xc em{font-style:normal;color:#fff}
.dvs-xc .k{color:#9C8FB4}
.dvs-split{position:absolute;z-index:6;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:var(--dvs-violet);
  box-shadow:0 0 14px rgba(180,124,253,.9);pointer-events:none}
.dvs-split i{position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:var(--dvs-violet);box-shadow:0 0 0 4px rgba(11,9,16,.45),0 8px 20px rgba(7,5,9,.6)}
.dvs-split i::before,.dvs-split i::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;
  border:solid var(--dvs-ink);border-width:0 2px 2px 0}
.dvs-split i::before{left:9px;transform:rotate(135deg)}
.dvs-split i::after{right:9px;transform:rotate(-45deg)}
/* the real control: a range input over the whole screen, invisible, so a
   click, a drag, a swipe or the arrow keys all move the divider */
.dvs-split-in{position:absolute;z-index:7;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;touch-action:pan-y}
.dvs-phone-scr:has(.dvs-split-in:focus-visible) .dvs-split i{outline:2px solid #fff;outline-offset:3px}
.dvs-phone-cap{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-muted)}
.dvs-phone-hint{color:var(--dvs-violet)}

/* ---------- the four screens, drawn in relative units so they scale ---------- */

.dvs-sc{position:absolute;inset:0;padding:13% 5.5% 0;background:#fff;color:#202124;
  font-family:Arial,'Helvetica Neue',sans-serif;font-size:4.2cqw;line-height:1.35;text-align:left}
.dvs-sc b{font-weight:700}
.dvs-sc svg{flex:0 0 auto;width:1.25em;height:1.25em}
.g-top{display:flex;align-items:center;gap:.6em;height:3em;padding:0 1em;border-radius:2em;box-shadow:0 1px 6px rgba(32,33,36,.28)}
.g-top svg{fill:#4285F4}
.g-q{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95em}
.g-tabs{display:flex;gap:1.2em;margin:1em .2em 0;border-bottom:1px solid #ebebeb;font-size:.8em;color:#5f6368}
.g-tabs span{padding-bottom:.6em}
.g-tabs .on{color:#1a73e8;box-shadow:inset 0 -2px 0 #1a73e8}
.g-res{margin-top:1.1em}
.g-site{display:flex;align-items:center;gap:.6em;min-width:0}
.g-site > span:last-child{min-width:0}
.g-fav{flex:0 0 auto;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:#B47CFD;
  color:#0B0910;font-weight:700;font-size:.8em}
.g-site b,.a-src b{display:block;font-weight:400;font-size:.85em;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-site i,.a-src i{display:block;font-style:normal;font-size:.75em;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-title{margin-top:.5em;font-size:1.18em;line-height:1.3;color:#1a0dab;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.g-desc{margin-top:.35em;font-size:.84em;color:#4d5156;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.g-links{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.8em}
.g-links span{padding:.35em .8em;border:1px solid #dadce0;border-radius:2em;font-size:.78em;color:#1a0dab}
.g-skel{margin-top:1.5em;padding-top:1.2em;border-top:1px solid #ebebeb}
.g-skel i{display:block;height:.6em;margin-bottom:.7em;border-radius:.3em;background:#ececec}
.m-map{position:relative;height:28%;margin:1em -6% 0;background:#e9eee6;
  background-image:linear-gradient(100deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),
    linear-gradient(8deg,transparent 58%,#fff 58%,#fff 61%,transparent 61%),
    linear-gradient(90deg,transparent 22%,#dfe7da 22%,#dfe7da 34%,transparent 34%)}
.m-pin{position:absolute;width:1em;height:1em;border-radius:50% 50% 50% 0;background:#9aa0a6;transform:rotate(-45deg)}
.m-pin.is-you{width:1.4em;height:1.4em;background:#7B45D6;box-shadow:0 0 0 .35em rgba(180,124,253,.3)}
.m-card{margin-top:1em;padding:.8em 1em;border:1.5px solid #B47CFD;border-radius:.8em;box-shadow:0 2px 10px rgba(123,69,214,.18)}
.m-card b{display:block;color:#7B45D6;font-size:1.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-card span{display:block;margin-top:.2em;font-size:.8em;color:#4d5156}
.m-card .m-open{color:#188038}
.m-btns{display:flex;gap:.5em;margin-top:.7em}
.m-btns span{flex:1;padding:.5em 0;border:1px solid #dadce0;border-radius:2em;font-size:.78em;color:#1a73e8;text-align:center}
.m-skel i{display:block;height:3.4em;margin-top:.8em;border:1px solid #eee;border-radius:.8em;background:#fafafa}
.a-box{margin-top:1.1em;padding:1em;border:1px solid #ece4fb;border-radius:1em;background:linear-gradient(180deg,#f3ecff,#fff 62%)}
.a-h{display:flex;align-items:center;gap:.5em;font-size:.82em;font-weight:700}
.a-h svg{fill:#7B45D6}
.a-p{margin:.7em 0 0;font-size:.86em;line-height:1.5}
.a-p b,.c-a b{color:#7B45D6}
.a-src{display:flex;align-items:center;gap:.6em;margin-top:.9em;padding:.6em .7em;border:1px solid #B47CFD;border-radius:.7em;
  background:#fff;min-width:0}
.a-src > span:last-child{min-width:0}
.c-top{display:flex;align-items:center;gap:.5em;padding-bottom:.8em;border-bottom:1px solid #ececec;font-size:.9em;font-weight:700}
.c-top svg{fill:#202124}
.c-u{width:fit-content;max-width:82%;margin:1.2em 0 0 auto;padding:.7em 1em;border-radius:1.2em;background:#f1f1f1;font-size:.86em}
.c-a{margin-top:1em;font-size:.88em;line-height:1.55}
.c-a p{margin:0 0 .6em}
.c-in{position:absolute;left:5.5%;right:5.5%;bottom:5%;padding:.8em 1em;border:1px solid #e3e3e3;border-radius:2em;
  font-size:.8em;color:#8e8e8e}

/* ---------------------------------------------------------------- narrower */

@media (max-width:999px){
  .dvs-enc-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .dvs-enc-side{display:contents}
  .dvs-enc-form{order:1}.dvs-enc-tabs{order:2}.dvs-phone-w{order:3;margin-top:32px}.dvs-enc-notes{order:4;min-height:0}
}
@media (max-width:700px){
  .dvs-enc-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dvs-fld.is-name{grid-column:1/-1}
  .dvs-enc-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvs-enc-tab:nth-child(2){border-right:0}
  .dvs-enc-tab:nth-child(-n+2){border-bottom:1px solid var(--dvs-rule)}
}
@media (max-width:620px){
  .dvs-enc-in,.dvs-proc-in{padding:88px var(--gutter,20px)}
  .dvs-phone-w{max-width:300px}
}
@media (prefers-reduced-motion:reduce){
  .dvs-enc-notes li{animation:none}
}

/* ====================================================================== */
/* 10 avaliações: the homepage wall; only touch drag is new               */
/* ====================================================================== */

.dvs-rev .dvrv-row{touch-action:pan-y;cursor:grab}
/* without the video block that closed it on the homepage, the wall's hint is
   the last thing in the section, so the bottom beat moves here */
.dvs-rev{padding-bottom:clamp(64px,7vw,104px)}
/* the homepage's "Ver mais" is 14px tall; here it gets a 40px hit area */
.dvs-rev .dvrv-more:not([hidden]){display:inline-flex;align-items:center;min-height:40px}
.dvs-rev .dvrv-row.is-dragging{cursor:grabbing}

/* ====================================================================== */
/* 11 perguntas: the homepage FAQ design, rebuilt with classes            */
/* ====================================================================== */

.dvs-faq{position:relative;overflow:clip;background:#0B0910;border-top:1px solid #241F2E;color:#F4F2EE;
  font-family:'Instrument Sans',system-ui,sans-serif}
.dvs-faq-in{position:relative;max-width:1440px;margin:0 auto;padding:var(--beat-minor,96px) var(--gutter,64px) var(--beat-minor,104px)}
.dvs-faq-k{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#B47CFD}
.dvs-faq-h2{max-width:980px;margin:18px 0 16px;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(34px,4.4vw,58px);
  line-height:1;letter-spacing:-.042em;color:#F4F2EE;text-wrap:pretty}
.dvs-faq-lead{max-width:600px;margin:0 0 46px;font-size:16.5px;line-height:1.62;color:rgba(244,242,238,.62)}
.dvs-faq-lay{position:relative}
.dvs-faq-lay::before{content:'';position:absolute;right:0;top:-6%;width:52%;height:70%;pointer-events:none;
  background:radial-gradient(50% 52% at 46% 40%,rgba(180,124,253,.14) 0%,rgba(11,9,16,0) 74%)}
.dvs-faq-list{width:48%}
.dvs-faq-qh{margin:0;font:inherit}
.dvs-faq-q{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:56px;padding:14px 0;border:0;
  border-bottom:1px solid #241F2E;background:none;cursor:pointer;text-align:left;font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(16px,1.5vw,20px);line-height:1.35;color:rgba(244,242,238,.56);transition:color .3s ease}
.dvs-faq-q i{flex:0 0 auto;width:6px;height:6px;margin-top:9px;background:rgba(244,242,238,.2);transition:background .3s ease}
.dvs-faq-q:hover{color:rgba(244,242,238,.86)}
.dvs-faq-it.is-on .dvs-faq-q{color:#B47CFD}
.dvs-faq-it.is-on .dvs-faq-q i{background:#B47CFD}
.dvs-faq-q:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}
.dvs-faq-a{position:absolute;left:52%;top:0;width:48%;padding:30px 32px 24px;border:1px solid #2A2433;
  background:linear-gradient(210deg,rgba(28,21,44,.55),rgba(14,11,20,.72));box-shadow:0 30px 70px -40px rgba(7,5,9,.9)}
.dvs-faq-a[hidden]{display:none}
.dvs-faq-a.is-in{animation:dvs-fade .35s cubic-bezier(.2,.7,.2,1) both}
.dvs-faq-ah{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(20px,2vw,27px);line-height:1.14;
  letter-spacing:-.03em;color:#F4F2EE}
.dvs-faq-a p:not(.dvs-faq-ah){max-width:620px;margin:16px 0 0;font-size:16.5px;line-height:1.66;color:rgba(244,242,238,.76)}
.dvs-faq-a a{display:inline-flex;align-items:center;gap:9px;min-height:48px;margin-top:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B47CFD;text-decoration:none}
.dvs-faq-a a:hover{color:#D6BCFE}
.dvs-faq-a a:focus-visible{outline:2px solid #B47CFD;outline-offset:2px}
.dvs-faq-links{display:flex;flex-wrap:wrap;gap:0 28px}
@media (max-width:899px){
  .dvs-faq-list{width:auto}
  .dvs-faq-lay::before{display:none}
  .dvs-faq-a{position:static;width:auto;padding:4px 0 22px;border:0;background:none;box-shadow:none}
  .dvs-faq-ah{display:none}
  .dvs-faq-a p:not(.dvs-faq-ah){margin-top:8px}
}

/* ====================================================================== */
/* 12 fecho: the homepage close                                           */
/* ====================================================================== */

.dvs-close-h{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(36px,5.6vw,80px);line-height:.98;
  letter-spacing:-.045em;color:#F4F2EE;text-wrap:balance}
.dvs-close-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:38px}
.dvs-close-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;
  border:1px solid rgba(244,242,238,.2);background:rgba(244,242,238,.05);color:#F4F2EE;font-size:16px;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:transform .22s cubic-bezier(.2,.7,.3,1),background .22s ease,border-color .22s ease}
.dvs-close-b:not(.is-p){-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dvs-close-b.is-p{padding:0 26px;border-color:#B47CFD;background:#B47CFD;color:#0B0910;font-weight:600}
/* hover only where there is a pointer that hovers: on a phone a tap left the
   primary button stuck in its pale hover colour */
@media (hover:hover){
  .dvs-close-b:hover{transform:translateY(-2px);border-color:rgba(244,242,238,.42)}
  .dvs-close-b.is-p:hover{background:#D6BCFE;border-color:#D6BCFE}
}
.dvs-close-b:focus-visible{outline:2px solid #D6BCFE;outline-offset:3px}
.dvs-close-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;margin-top:18px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.12em}
.dvs-close-meta a{display:inline-flex;align-items:center;min-height:44px;color:rgba(244,242,238,.5);text-decoration:none}
.dvs-close-meta a:hover{color:#F4F2EE}
@media (max-width:420px){.dvs-close-ctas{flex-direction:column;align-items:stretch}}
@media (prefers-reduced-motion:reduce){.dvs-faq-a.is-in{animation:none}.dvs-close-b{transition:none}}

/* ====================================================================== */
/* shared by every service page (owner review, 12 Sep 2026)               */
/* ====================================================================== */

/* A hero without a plate (the price page): one column, the copy wider. */
.dvs-hero-in.is-solo{grid-template-columns:minmax(0,1fr)}
.dvs-hero-in.is-solo .dvs-hero-copy{max-width:900px}
.dvs-hero-in.is-solo .dvs-lead{max-width:46ch}

/* Sources stay (they are what answer engines and careful readers check) but
   quiet: small, grey, sentence case, never the loudest thing in a card. A
   link inside a source sentence is plain inline text (exempt from the target
   size, WCAG 2.5.8), so a credit line never breaks into tall rows. */
section .dvl-src{font-size:12px;line-height:1.6;color:rgba(142,135,153,.85)}
section .dvl-src a{display:inline;min-height:0}
section .dvl-src a,section a.dvl-law-ref,section .dvm-num-src,section .dvad-src,section .dvbr-src,section .dvpr-src{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;
  color:rgba(142,135,153,.9);text-decoration:underline;text-decoration-color:rgba(142,135,153,.35);text-underline-offset:3px}
@media (hover:hover){section .dvl-src a:hover,section a.dvl-law-ref:hover,section .dvm-num-src:hover,section .dvad-src:hover,
  section .dvbr-src:hover,section .dvpr-src:hover{color:var(--dvs-text,#F4F2EE)}}
section span.dvl-law-ref{font-family:'Instrument Sans',system-ui,sans-serif;font-size:12px;letter-spacing:0;text-transform:none;color:rgba(142,135,153,.9)}

/* ---------- the process, compact (tried on the price page first) ----------
   Five steps in one row with a thin line through the numbers; on a phone a
   short list. Every word in view, no scenes, a fraction of the height of the
   journey version. */
.dvs-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:clamp(40px,5vw,60px) 0 0;
  padding:0;list-style:none;counter-reset:dvsstep}
.dvs-steps::before{content:'';position:absolute;left:24px;right:24px;top:23px;height:1px;
  background:linear-gradient(90deg,rgba(180,124,253,.7),rgba(180,124,253,.18))}
.dvs-steps li{position:relative;display:flex;flex-direction:column;padding:62px 0 0;counter-increment:dvsstep}
.dvs-steps h3 + p{margin-bottom:12px}
.dvs-steps li::before{content:counter(dvsstep,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:46px;height:46px;border:1px solid rgba(180,124,253,.6);border-radius:50%;background:#0D0A13;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#D6BCFE;box-shadow:0 0 22px -6px rgba(180,124,253,.7)}
.dvs-steps h3{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;color:#F4F2EE}
.dvs-steps p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:rgba(244,242,238,.72)}
.dvs-steps .dvs-steps-you{margin-top:auto;padding-top:10px;border-top:1px solid #241F2E;font-size:13px;color:#8E8799}
.dvs-steps .dvs-steps-you b{font-weight:600;color:#D6BCFE}
@media (max-width:1100px){
  .dvs-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .dvs-steps::before{display:none}
}
@media (max-width:600px){
  .dvs-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .dvs-steps li{padding:0 0 22px 64px;min-height:46px}
  .dvs-steps li:not(:last-child)::after{content:'';position:absolute;left:23px;top:50px;bottom:4px;width:1px;background:rgba(180,124,253,.3)}
}

/* ====================================================================== */
/* 08 como trabalhamos: one spine, five steps, every word in view         */
/* ====================================================================== */

.dvs-proc{background:#0D0A13;border-top:1px solid var(--dvs-rule);overflow:clip;isolation:isolate}
.dvs-proc::before{content:'';position:absolute;z-index:-1;left:-8%;top:24%;width:60%;height:70%;
  background:radial-gradient(closest-side,rgba(123,69,214,.2),transparent);filter:blur(6px);pointer-events:none}
.dvs-jr{position:relative;margin-top:clamp(48px,6vw,80px);--p:0}
.dvs-jr-spine{position:absolute;left:27px;top:28px;width:2px;height:0;background:var(--dvs-rule);pointer-events:none}
.dvs-jr-spine i{display:block;width:100%;height:calc(var(--p) * 100%);
  background:linear-gradient(180deg,var(--dvs-violet),var(--dvs-soft));box-shadow:0 0 12px rgba(180,124,253,.8)}
.dvs-jr-list{list-style:none;margin:0;padding:0}
.dvs-jr-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,400px);
  gap:0 clamp(28px,4vw,64px);align-items:center;padding:34px 0}
.dvs-jr-num{align-self:start;position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;
  border:1px solid var(--dvs-lit);border-radius:50%;background:#0D0A13;font-family:'JetBrains Mono',monospace;
  font-size:13px;letter-spacing:.06em;color:var(--dvs-muted);
  transition:background .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease}
.dvs-jr-step.is-on .dvs-jr-num{border-color:var(--dvs-violet);background:var(--dvs-violet);color:var(--dvs-ink);
  box-shadow:0 0 0 6px rgba(180,124,253,.14),0 0 26px rgba(180,124,253,.6)}
.dvs-jr-body{min-width:0;padding-top:10px}
.dvs-jr-we{margin:12px 0 0;max-width:56ch;font-size:16.5px;line-height:1.62;color:var(--dvs-body)}
.dvs-jr-you{max-width:56ch;margin-top:18px;padding:12px 16px;border-left:2px solid var(--dvs-soft);background:rgba(214,188,254,.06)}
.dvs-jr-you .dvs-tk{margin:0 0 4px}
.dvs-jr-you p:not(.dvs-tk){margin:0;font-size:15.5px;line-height:1.55;color:var(--dvs-text)}
.dvs-jr-note{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet)}
.dvs-jr-note::before{content:'✓'}
.dvs-jr-vis{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--dvs-lit);
  background:linear-gradient(210deg,rgba(28,21,44,.6),rgba(14,11,20,.82));box-shadow:0 30px 70px -40px rgba(7,5,9,.9);
  transition:border-color .5s ease,box-shadow .5s ease}
.dvs-jr-step.is-on .dvs-jr-vis{border-color:rgba(180,124,253,.5);
  box-shadow:0 0 0 1px rgba(180,124,253,.12),0 30px 70px -40px rgba(7,5,9,.9),0 0 60px -24px rgba(180,124,253,.55)}

/* The five drawings. Their hidden starting state only applies once the JS has
   marked the list ready, so without it every drawing simply shows finished. */
@keyframes dvs-pop{to{opacity:1;transform:none}}
@keyframes dvs-draw{to{clip-path:inset(0 0 0 0)}}
@keyframes dvs-fill{to{transform:scaleX(1)}}
@keyframes dvs-stamp{to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes dvs-hide{to{opacity:0}}
@keyframes dvs-show{to{opacity:1}}

.dvs-sc1{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 20px}
.dvs-bub{max-width:84%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.4}
.dvs-bub.is-them{align-self:flex-start;border-bottom-left-radius:4px;background:#241D31;color:var(--dvs-text)}
.dvs-bub.is-us{align-self:flex-end;border-bottom-right-radius:4px;background:var(--dvs-violet);color:var(--dvs-ink)}
.dvs-scope{align-self:center;margin-top:4px;padding:5px 11px;border:1px solid var(--dvs-violet);background:rgba(11,9,16,.7);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-soft)}
.dvs-jr.is-ready .dvs-sc1 > *{opacity:0;transform:translateY(8px)}
.dvs-jr.is-ready .is-on .dvs-sc1 > *{animation:dvs-pop .45s cubic-bezier(.3,1.3,.5,1) forwards;
  animation-delay:calc(var(--i) * 600ms + 150ms)}

.dvs-sc2{position:absolute;inset:18px 20px}
.dvs-sc2 i{position:absolute;border:1.5px dashed rgba(180,124,253,.75);border-radius:3px}
.dvs-stamp{position:absolute;right:4%;bottom:10%;padding:6px 12px;border:2px solid var(--dvs-violet);background:rgba(11,9,16,.9);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dvs-violet);
  transform:rotate(-8deg)}
.dvs-jr.is-ready .dvs-sc2 i{clip-path:inset(0 100% 0 0)}
.dvs-jr.is-ready .is-on .dvs-sc2 i{animation:dvs-draw .55s ease forwards;animation-delay:calc(var(--i) * 180ms)}
.dvs-jr.is-ready .dvs-stamp{opacity:0;transform:rotate(-8deg) scale(1.6)}
.dvs-jr.is-ready .is-on .dvs-stamp{animation:dvs-stamp .4s cubic-bezier(.3,1.4,.5,1) 1.3s forwards}

.dvs-sc3{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:13px;margin:0;padding:18px 22px;
  list-style:none}
.dvs-sc3 li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:13.5px;color:var(--dvs-body)}
.dvs-sc3 em{font-style:normal;color:var(--dvs-violet)}
.dvs-sc3 b{grid-column:1/-1;position:relative;height:4px;overflow:hidden;background:var(--dvs-rule)}
.dvs-sc3 b::after{content:'';position:absolute;inset:0;background:var(--dvs-violet);transform-origin:left center}
.dvs-jr.is-ready .dvs-sc3 b::after{transform:scaleX(0)}
.dvs-jr.is-ready .is-on .dvs-sc3 b::after{animation:dvs-fill .7s ease forwards;animation-delay:calc(var(--i) * 450ms)}
.dvs-jr.is-ready .dvs-sc3 em{opacity:0}
.dvs-jr.is-ready .is-on .dvs-sc3 em{animation:dvs-show .3s ease forwards;animation-delay:calc(var(--i) * 450ms + 700ms)}

.dvs-sc4{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.dvs-url{display:flex;align-items:center;gap:9px;height:32px;padding:0 12px;border:1px solid var(--dvs-lit);background:#0B0910;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dvs-muted)}
.dvs-lk{position:relative;flex:0 0 auto;width:8px;height:7px;margin-top:4px;border-radius:1px;background:var(--dvs-soft)}
.dvs-lk::before{content:'';position:absolute;left:1px;top:-5px;width:6px;height:6px;box-sizing:border-box;
  border:1.5px solid var(--dvs-soft);border-bottom:0;border-radius:3px 3px 0 0}
.dvs-us{position:relative;flex:1;height:100%}
.dvs-us span{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap}
.dvs-us .u2{color:var(--dvs-text)}
.dvs-jr:not(.is-ready) .dvs-us .u1{display:none}
.dvs-pg{flex:1;display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid var(--dvs-rule);background:rgba(19,16,25,.6)}
.dvs-pg i{display:block;height:7px;background:rgba(244,242,238,.14)}
.dvs-pg i:first-child{height:12px;background:rgba(244,242,238,.5)}
.dvs-live{position:absolute;right:20px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;
  border:1px solid var(--dvs-violet);background:rgba(11,9,16,.92);font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-soft)}
.dvs-live i{width:7px;height:7px;border-radius:50%;background:var(--dvs-violet);animation:dvs-live 1.8s ease-out infinite}
.dvs-jr.is-ready .dvs-us .u2,.dvs-jr.is-ready .dvs-lk,.dvs-jr.is-ready .dvs-live{opacity:0}
.dvs-jr.is-ready .is-on .dvs-us .u1{animation:dvs-hide .3s ease .9s forwards}
.dvs-jr.is-ready .is-on .dvs-us .u2,.dvs-jr.is-ready .is-on .dvs-lk{animation:dvs-show .3s ease 1.05s forwards}
.dvs-jr.is-ready .is-on .dvs-live{transform:translateY(8px);animation:dvs-pop .4s cubic-bezier(.3,1.4,.5,1) 1.4s forwards}

.dvs-sc5{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px 20px}
.dvs-care-k,.dvs-care-f{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.dvs-care-k{color:var(--dvs-soft)}
.dvs-care-f{color:var(--dvs-muted)}
.dvs-sc5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.dvs-sc5 li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;border:1px solid var(--dvs-rule);
  background:rgba(19,16,25,.8)}
.dvs-sc5 b{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dvs-muted)}
.dvs-sc5 i{font-style:normal;font-size:15px;color:var(--dvs-violet)}
.dvs-jr.is-ready .dvs-sc5 i{opacity:0;transform:scale(.4)}
.dvs-jr.is-ready .is-on .dvs-sc5 i{animation:dvs-pop .35s cubic-bezier(.3,1.4,.5,1) forwards;
  animation-delay:calc(var(--i) * 260ms + 200ms)}

@media (max-width:760px){
  .dvs-jr-step{grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start;padding:28px 0}
  .dvs-jr-num{width:44px;height:44px;font-size:12px}
  .dvs-jr-body{padding-top:6px}
  .dvs-jr-vis{grid-column:2;aspect-ratio:4/3}
}
@media (max-width:380px){
  .dvs-bub,.dvs-sc3 li{font-size:12.5px}
  .dvs-sc5 b{font-size:9px;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){.dvs-jr-num,.dvs-jr-vis{transition:none}}
/* <<< dvs-sites */

/* >>> dvcs-case (generated) */
/* ---------------------------------------------------------------------------
   CASO DE ESTUDO (.dvcs), generated by build-case-study.js.

   One graph: Google clicks per month since the launch, as bars, the last 28
   days in the bright colour, matched by the number and the axis label that
   share that colour. Under it, the return as a multiple (no amounts) and the
   four things we did.
--------------------------------------------------------------------------- */

.dvcs{position:relative;overflow:clip;isolation:isolate;background:#0B0910;border-top:1px solid #241F2E;color:#F4F2EE;
  font-family:'Instrument Sans',system-ui,sans-serif}
.dvcs::before{content:'';position:absolute;z-index:-1;left:-10%;top:12%;width:70%;height:70%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(123,69,214,.24),rgba(123,69,214,.07) 55%,transparent);filter:blur(8px)}
.dvcs-in{max-width:1440px;margin:0 auto;padding:clamp(88px,9vw,136px) var(--gutter,64px)}
.dvcs-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:20px clamp(40px,5vw,84px)}
.dvcs-kicker{display:flex;align-items:center;gap:12px;margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;
  letter-spacing:.16em;line-height:1.4;text-transform:uppercase;color:#B47CFD}
.dvcs-kicker::before{content:'';width:22px;height:1px;background:#B47CFD}
.dvcs-h2{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(31px,3.9vw,56px);line-height:1.02;
  letter-spacing:-.038em;color:#F4F2EE;text-wrap:balance}
.dvcs-h2-t{display:block;margin-top:18px}
.dvcs-lead{margin:0 0 6px;max-width:46ch;font-size:clamp(16.5px,1.35vw,19px);line-height:1.6;color:rgba(244,242,238,.72)}
.dvcs-k{margin:0 0 18px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B47CFD}

.dvcs-main{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;
  margin-top:clamp(44px,5vw,72px)}
.dvcs-vid{margin:0}
.dvcs-vid-frame{position:relative;overflow:hidden;border:1px solid rgba(214,188,254,.28);background:#07050A;
  box-shadow:0 30px 70px -30px rgba(7,5,9,.9),0 0 60px -24px rgba(180,124,253,.5)}
.dvcs-v{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#07050A}
.dvcs-vid figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:14px;font-size:14.5px;
  line-height:1.5;color:rgba(244,242,238,.72)}
.dvcs-vid-n{font-size:12.5px;color:#8E8799}
.dvcs-ext{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#B47CFD;text-decoration:none}
.dvcs-ext:focus-visible{outline:2px solid #D6BCFE;outline-offset:2px}
@media (hover:hover){.dvcs-ext:hover{color:#D6BCFE}}

.dvcs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dvcs-card{padding:clamp(22px,2.6vw,34px);border:1px solid #2A2433;
  background:linear-gradient(210deg,rgba(28,21,44,.55),rgba(14,11,20,.72))}
.dvcs-chart{grid-column:1/-1;border-color:rgba(180,124,253,.4);background:linear-gradient(210deg,rgba(40,28,64,.6),rgba(14,11,20,.78));
  box-shadow:0 0 70px -30px rgba(180,124,253,.55)}

/* the graph: the muted line is everything, the bright one is the last 28 days */
.dvcs-nums{display:flex;flex-wrap:wrap;gap:14px clamp(32px,5vw,72px)}
.dvcs-nums p{display:flex;flex-direction:column;gap:6px;margin:0}
.dvcs-nums b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(38px,3.8vw,56px);line-height:1;letter-spacing:-.04em;
  color:#F4F2EE}
.dvcs-nums span{display:flex;align-items:center;gap:8px;font-size:14.5px;color:rgba(244,242,238,.72)}
.dvcs-nums .is-hot b{color:#D6BCFE}
.dvcs-nums .is-hot span{color:#F4F2EE}
.dvcs-nums .is-hot i{width:18px;height:3px;border-radius:2px;background:#D6BCFE;box-shadow:0 0 10px rgba(214,188,254,.8)}
/* the bars: one per month since the launch, the bright one is the last 28 days */
.dvcs-bars{position:relative;margin-top:30px;height:clamp(220px,22vw,300px);border-bottom:1px solid #3A3348}
.dvcs-grid{position:absolute;inset:34px 0 0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.dvcs-grid i{display:block;height:0;border-top:1px dashed rgba(142,135,153,.22)}
.dvcs-cols{position:absolute;inset:34px 0 0;display:flex;align-items:flex-end;gap:clamp(4px,.9vw,12px)}
.dvcs-col{position:relative;flex:1 1 0;height:var(--h);border-radius:5px 5px 0 0;transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(180,124,253,.82),rgba(123,69,214,.26))}
.dvcs-col.is-hot{background:linear-gradient(180deg,#F4F2EE,#D6BCFE 22%,#B47CFD);box-shadow:0 0 36px -4px rgba(214,188,254,.7)}
.dvcs-col b{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);font-family:'Archivo',sans-serif;
  font-weight:700;font-size:clamp(17px,1.7vw,24px);line-height:1;letter-spacing:-.03em;color:#D6BCFE;white-space:nowrap}
.dvcs-axis{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8E8799}
.dvcs-axis .is-hot{color:#D6BCFE}
.dvcs-note{margin:18px 0 0;max-width:68ch;font-size:15px;line-height:1.6;color:rgba(244,242,238,.72)}

/* the return, as a multiple only */
.dvcs-x{margin:0}
.dvcs-x b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(64px,6.4vw,96px);line-height:.9;letter-spacing:-.05em;
  color:#D6BCFE;font-variant-numeric:tabular-nums}
.dvcs-roi-t{margin:16px 0 0;max-width:34ch;font-size:16px;line-height:1.55;color:rgba(244,242,238,.84)}

/* what we did */
.dvcs-did-l{display:grid;gap:0;margin:0;padding:0;list-style:none}
.dvcs-did-l li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;padding:11px 0;border-top:1px solid #241F2E;
  font-size:15.5px;line-height:1.45;color:#F4F2EE}
.dvcs-did-l li:first-child{border-top:0;padding-top:0}
.dvcs-did-l span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#B47CFD}

.dvcs.is-ready .dvcs-col{transform:scaleY(0)}
.dvcs.is-ready .dvcs-col b{opacity:0}
.dvcs.is-on .dvcs-col{transform:scaleY(1);transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 70ms)}
.dvcs.is-on .dvcs-col b{opacity:1;transition:opacity .4s ease 1.4s}

.dvcs-cta{margin-top:clamp(32px,4vw,48px)}
.dvcs-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;
  background:#B47CFD;color:#0B0910;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px -12px rgba(180,124,253,.7);transition:background .18s ease}
.dvcs-btn:focus-visible{outline:2px solid #D6BCFE;outline-offset:3px}
@media (hover:hover){.dvcs-btn:hover{background:#D6BCFE}}

@media (max-width:999px){
  .dvcs-head{grid-template-columns:minmax(0,1fr)}
  .dvcs-lead{margin:0}
  .dvcs-main{grid-template-columns:minmax(0,1fr)}
  .dvcs-vid{max-width:320px}
}
@media (max-width:680px){
  .dvcs-cards{grid-template-columns:minmax(0,1fr)}
  .dvcs-bars{height:220px}
}
@media (max-width:620px){
  .dvcs-in{padding:88px var(--gutter,20px)}
  .dvcs-btn{width:100%;padding:0 18px;font-size:11.5px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.dvcs.is-on .dvcs-col{transition:none}}
/* <<< dvcs-case */

/* >>> dvl-lojas (generated) */
/* ---------------------------------------------------------------------------
   LOJAS ONLINE (the dvl- sections), generated by build-lojas-page.js.
   The shared chrome (kicker, h2, lead, buttons, the hero plate, the journey,
   the FAQ) is the Criação de Sites page's dvs- rules; these are only the
   sections a shop needs. The dvs tokens are declared again on .dvl, because
   the dvs rules read them and they are scoped to the dvs sections.
--------------------------------------------------------------------------- */

.dvl{--dvs-ink:#0B0910;--dvs-raised:#131019;--dvs-rule:#241F2E;--dvs-lit:#3A3348;
  --dvs-text:#F4F2EE;--dvs-body:rgba(244,242,238,.72);--dvs-muted:#8E8799;
  --dvs-violet:#B47CFD;--dvs-deep:#7B45D6;--dvs-soft:#D6BCFE;--dvs-amber:#FFA23F;
  position:relative;overflow:clip;isolation:isolate;background:var(--dvs-ink);border-top:1px solid var(--dvs-rule);
  color:var(--dvs-text);font-family:'Instrument Sans',system-ui,sans-serif}
.dvl::before{content:'';position:absolute;z-index:-1;width:64%;height:72%;pointer-events:none;filter:blur(8px);
  background:radial-gradient(closest-side,rgba(123,69,214,.2),rgba(123,69,214,.06) 55%,transparent)}
.dvl-path::before{left:-14%;top:10%}
.dvl-plat{background:#0D0A13}.dvl-plat::before{right:-16%;top:18%}
.dvl-co::before{right:-10%;top:30%}
.dvl-fb{background:#0D0A13}.dvl-fb::before{left:-12%;top:24%}
.dvl-g::before{right:-14%;top:12%}
.dvl-price{background:#0D0A13}.dvl-price::before{left:18%;top:8%}
.dvl-price .dvs-lead{max-width:52ch}
.dvl-price-tbl{margin-top:clamp(36px,4.5vw,56px)}
.dvl-price-x{margin:18px 0 0;max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--dvs-body)}
.dvl-price-x b{font-weight:600;color:var(--dvs-text)}
.dvl-price-tbl tbody th{width:34%}
.dvl-price-v{white-space:nowrap;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;
  color:var(--dvs-soft) !important}
.dvl-in{max-width:1440px;margin:0 auto;padding:clamp(88px,9vw,136px) var(--gutter,64px)}
.dvl-k{margin:0 0 10px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dvs-violet)}
.dvl-k.is-warn{color:var(--dvs-amber)}
.dvl-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 01 the hero's four facts, under the buttons ---------- */

.dvl-hfacts{display:flex;flex-wrap:wrap;gap:12px 24px;margin:32px 0 0;padding:22px 0 0;list-style:none;
  border-top:1px solid var(--dvs-rule)}
.dvl-hfacts li{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-body)}
.dvl-hfacts li::before{content:'';flex:0 0 auto;width:6px;height:6px;background:var(--dvs-violet);box-shadow:0 0 8px rgba(180,124,253,.8)}
.dvl-hfacts li:first-child{color:var(--dvs-text)}

/* ---------- 02 the path of a purchase ---------- */

.dvl-path-box{margin-top:clamp(40px,5vw,64px)}
.dvl-stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.dvl-stop{width:100%;min-height:76px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
  padding:14px 16px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);color:var(--dvs-body);
  font-family:inherit;font-size:15.5px;line-height:1.3;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.dvl-stop.is-past{color:var(--dvs-text)}
.dvl-stop.is-past .dvs-n{color:var(--dvs-soft)}
.dvl-stop[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.12);color:var(--dvs-text);
  box-shadow:0 0 34px -12px rgba(180,124,253,.75)}
@media (hover:hover){.dvl-stop:hover{border-color:var(--dvs-violet);color:var(--dvs-text)}}
.dvl-stop:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvl-track{--p:10%;position:relative;height:2px;margin:28px 0 30px;background:var(--dvs-rule)}
.dvl-track-fill{position:absolute;left:0;top:0;height:100%;width:var(--p);
  background:linear-gradient(90deg,var(--dvs-deep),var(--dvs-violet));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.dvl-walker{position:absolute;top:50%;left:var(--p);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--dvs-soft);box-shadow:0 0 0 5px rgba(180,124,253,.2),0 0 22px rgba(214,188,254,.85);
  transition:left .6s cubic-bezier(.2,.7,.2,1)}
.dvl-panel{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.dvl-panel.is-on{display:grid;animation:dvl-in .35s ease both}
@keyframes dvl-in{from{opacity:0;transform:translateY(8px)}}
.dvl-panel-h{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin:0;font-family:'Archivo',sans-serif;
  font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.03em;color:var(--dvs-text)}
.dvl-why,.dvl-fix{padding:22px 24px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.82)}
.dvl-why{border-color:rgba(255,162,63,.35)}
.dvl-fix{border-color:rgba(180,124,253,.5);box-shadow:0 0 50px -24px rgba(180,124,253,.6)}
.dvl-why p:last-child,.dvl-fix p:last-child{margin:0;font-size:17px;line-height:1.55;color:var(--dvs-text)}
/* Source lines read as one sentence; the link keeps a 40px target by sitting
   in a line box that tall, not by breaking the sentence into flex items. */
.dvl-src{margin:18px 0 0;font-size:13px;line-height:1.6;color:var(--dvs-muted)}
.dvl-src a{display:inline-flex;align-items:center;min-height:40px;vertical-align:middle;color:var(--dvs-violet);text-decoration:none}
@media (hover:hover){.dvl-src a:hover{color:var(--dvs-soft)}}

/* ---------- 03 platform ---------- */

.dvl-plat-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvl-qs{display:grid;gap:12px}
.dvl-q{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;padding:16px 18px 16px 22px;
  border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvl-q p{margin:0;font-size:16.5px;line-height:1.45;color:var(--dvs-text)}
.dvl-yn{display:flex;flex:0 0 auto;border:1px solid var(--dvs-lit)}
.dvl-yn button{min-width:66px;min-height:44px;padding:0 14px;border:0;background:none;color:var(--dvs-body);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.dvl-yn button+button{border-left:1px solid var(--dvs-lit)}
.dvl-yn button[aria-pressed="true"]{background:var(--dvs-violet);color:var(--dvs-ink)}
.dvl-yn button:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:-2px}
.dvl-rec{position:sticky;top:112px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvl-rec-name{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(32px,3.2vw,46px);line-height:1.02;
  letter-spacing:-.04em;color:var(--dvs-soft)}
.dvl-meter{display:grid;gap:10px;margin:22px 0 0}
.dvl-meter div{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:12px;font-size:13.5px;color:var(--dvs-body)}
.dvl-meter i{display:block;height:6px;background:var(--dvs-rule)}
.dvl-meter b{display:block;height:100%;width:var(--w,0%);background:var(--dvs-violet);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.dvl-rec-why{margin:18px 0 22px;font-size:16px;line-height:1.55;color:var(--dvs-body)}
.dvl-cmp{margin-top:clamp(56px,6vw,88px)}
.dvl-cmp-h{margin:0 0 18px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.dvl-tbl{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.dvl-tbl th,.dvl-tbl td{padding:16px 18px;border-bottom:1px solid var(--dvs-rule);text-align:left;vertical-align:top}
.dvl-tbl thead th{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dvs-violet);border-bottom-color:var(--dvs-lit)}
.dvl-tbl tbody th{width:26%;font-weight:600;color:var(--dvs-text)}
.dvl-tbl td{color:var(--dvs-body)}

/* ---------- 05 checkout ---------- */

.dvl-co-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvl-grp{padding:18px 0 20px;border-top:1px solid var(--dvs-rule)}
.dvl-grp:first-child{border-top:0;padding-top:0}
.dvl-grp-h{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dvl-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--dvs-lit);
  border-radius:999px;background:rgba(19,16,25,.72);color:var(--dvs-body);font-family:inherit;font-size:15px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.dvl-chip i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dvs-lit);transition:background .18s ease,border-color .18s ease}
.dvl-chip[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.12);color:var(--dvs-text)}
.dvl-chip[aria-pressed="true"] i{border-color:var(--dvs-violet);background:var(--dvs-violet);box-shadow:0 0 10px rgba(180,124,253,.8)}
@media (hover:hover){.dvl-chip:hover{border-color:var(--dvs-violet);color:var(--dvs-text)}}
.dvl-chip:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvl-explain{margin-top:8px;padding:18px 20px;border-left:2px solid var(--dvs-violet);background:rgba(180,124,253,.07)}
.dvl-explain p:last-child{margin:0;font-size:16px;line-height:1.55;color:var(--dvs-text)}

.dvl-phone{position:sticky;top:104px;justify-self:center;width:min(100%,360px);margin:0;padding:12px;border-radius:44px;
  background:#16121D;border:1px solid var(--dvs-lit);
  box-shadow:0 40px 80px -30px rgba(7,5,9,.9),0 0 70px -24px rgba(180,124,253,.55)}
.dvl-screen{border-radius:32px;overflow:hidden;background:#F6F1EA;color:#2B2521;font-size:14px;line-height:1.35;
  font-family:'Instrument Sans',system-ui,sans-serif}
.dvl-sc-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid #E4DACD}
.dvl-sc-top b{font-family:'Archivo',sans-serif;font-size:20px;letter-spacing:-.02em}
.dvl-sc-top b i{font-style:normal;color:#B4532A}
.dvl-sc-top span{font-size:12.5px;color:#8A7D72}
.dvl-sc-sec{display:grid;gap:8px;padding:14px 20px;border-bottom:1px solid #E4DACD}
.dvl-sc-h{margin:0 0 2px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A7D72}
.dvl-sc-row{display:flex;justify-content:space-between;gap:12px}
.dvl-sc-row b{font-weight:600;white-space:nowrap}
.dvl-sc-row.is-total{padding-top:6px;border-top:1px dashed #D9CDBE;font-size:15.5px}
.dvl-sc-free{display:none;margin:0;padding:7px 10px;border-radius:8px;background:#E6F0E9;color:#2F6B4F;font-size:12.5px;font-weight:500}
.dvl-sc-free.is-on{display:block}
.dvl-sc-in{display:block;padding:10px 12px;border:1px solid #D9CDBE;border-radius:10px;background:#fff;color:#8A7D72;font-size:13px}
.dvl-sc-in.is-off,.dvl-sc-chk.is-off,.dvl-sc-pay.is-off{display:none}
.dvl-sc-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:#5A4F47}
.dvl-sc-chk i{width:15px;height:15px;border:1.5px solid #B9AB9A;border-radius:4px}
.dvl-sc-pay{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #E4DACD;border-radius:10px;background:#fff;
  animation:dvl-in .3s ease both}
.dvl-sc-pay i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1.5px solid #B9AB9A}
.dvl-sc-pay.is-sel{border-color:#2B2521}
.dvl-sc-pay.is-sel i{border:5px solid #2B2521}
.dvl-sc-pay span{display:grid;gap:1px}
.dvl-sc-pay b{font-weight:600;font-size:13.5px}
.dvl-sc-pay em{font-style:normal;font-size:12px;color:#8A7D72}
.dvl-sc-pay[data-co-pay="mbway"] b{color:#C8102E}
.dvl-sc-btn{margin:14px 20px 20px;padding:14px;border-radius:12px;background:#B4532A;color:#fff;text-align:center;font-weight:600}
.dvl-demo-note{margin-top:12px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dvs-amber)}

/* ---------- 06 front and back ---------- */

.dvl-fb-box{margin-top:clamp(36px,4.5vw,56px)}
.dvl-fb-sw{display:inline-flex;flex-wrap:wrap;border:1px solid var(--dvs-lit)}
.dvl-fb-sw button{min-height:48px;padding:0 20px;border:0;background:none;color:var(--dvs-body);font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease}
.dvl-fb-sw button+button{border-left:1px solid var(--dvs-lit)}
.dvl-fb-sw button[aria-pressed="true"]{background:var(--dvs-violet);color:var(--dvs-ink)}
.dvl-fb-sw button:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:-2px}
.dvl-fb-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:28px}
.dvl-flip{perspective:1800px}
.dvl-flip-in{position:relative;aspect-ratio:2/1;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.dvl-flip.is-back .dvl-flip-in{transform:rotateY(180deg)}
.dvl-face{position:absolute;inset:0;container-type:inline-size;overflow:hidden;border-radius:6px;border:1px solid var(--dvs-lit);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 40px 90px -34px rgba(7,5,9,.9),0 0 60px -24px rgba(180,124,253,.45)}
.dvl-face.is-back{transform:rotateY(180deg)}
.dvl-face.is-front{background:#F6F1EA;color:#2B2521}
.dvl-st-bar{display:flex;align-items:center;gap:4cqw;padding:2.6cqw 4cqw;border-bottom:1px solid #E4DACD;font-size:1.9cqw;color:#5A4F47}
.dvl-st-bar b{font-family:'Archivo',sans-serif;font-size:3cqw;color:#2B2521;margin-right:auto}
.dvl-st-bar b i{font-style:normal;color:#B4532A}
.dvl-st-cart{padding:.8cqw 1.8cqw;border:1px solid #D9CDBE;border-radius:99px;color:#2B2521}
.dvl-st-tools{display:flex;align-items:center;gap:1.4cqw;padding:2.4cqw 4cqw 0}
.dvl-st-search{flex:1;padding:1.2cqw 1.8cqw;border:1px solid #D9CDBE;border-radius:1cqw;background:#fff;font-size:1.7cqw;color:#8A7D72}
.dvl-st-f{padding:1cqw 1.8cqw;border:1px solid #D9CDBE;border-radius:99px;font-size:1.7cqw;color:#5A4F47}
.dvl-st-f.is-on{background:#2B2521;border-color:#2B2521;color:#F6F1EA}
.dvl-st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2cqw;padding:2.6cqw 4cqw}
.dvl-st-img{aspect-ratio:1;display:grid;place-items:center;border-radius:1.2cqw;background:#EDE4D8}
.dvl-st-img svg{width:72%}
.dvl-st-card p{margin:1.2cqw 0 .4cqw;font-size:1.7cqw;line-height:1.3;color:#2B2521}
.dvl-st-card b{font-size:1.8cqw}
.dvl-face.is-back{display:grid;grid-template-columns:22% 1fr;background:#12101A;color:#E9E4F2}
.dvl-ad-side{display:flex;flex-direction:column;gap:1.6cqw;padding:3cqw 2.4cqw;background:#0C0A12;border-right:1px solid #241F2E;font-size:1.8cqw;color:#8E8799}
.dvl-ad-side b{font-family:'Archivo',sans-serif;font-size:2.8cqw;color:#F4F2EE;margin-bottom:1.4cqw}
.dvl-ad-side b i{font-style:normal;color:#B4532A}
.dvl-ad-side .is-on{color:#F4F2EE;padding-left:1.2cqw;border-left:2px solid var(--dvs-violet)}
.dvl-ad-main{padding:3cqw}
.dvl-ad-top{display:flex;justify-content:space-between;align-items:baseline;font-family:'Archivo',sans-serif;font-size:2.8cqw;font-weight:600}
.dvl-ad-top em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:1.5cqw;font-weight:400;color:var(--dvs-violet)}
.dvl-ad-rows{display:grid;gap:1cqw;margin-top:2cqw}
.dvl-ad-row{display:grid;grid-template-columns:14% 22% 1fr 16%;align-items:center;gap:1.4cqw;padding:1.5cqw 1.8cqw;border:1px solid #241F2E;
  background:#16121F;font-size:1.75cqw}
.dvl-ad-row b:last-child{text-align:right}
.dvl-ad-st{justify-self:start;padding:.5cqw 1.2cqw;border-radius:99px;background:#241F2E;color:#C9C2D6;font-size:1.5cqw}
.dvl-ad-st.is-ok{background:rgba(92,196,140,.16);color:#8EE0B4}
.dvl-ad-st.is-wait{background:rgba(255,162,63,.16);color:#FFC57F}
.dvl-ad-alerts{display:flex;flex-wrap:wrap;gap:1.2cqw;margin-top:2.4cqw}
.dvl-ad-al{padding:1cqw 1.6cqw;border:1px solid #3A3348;font-size:1.6cqw;color:#C9C2D6}
.dvl-ad-al.is-warn{border-color:rgba(255,162,63,.5);color:#FFC57F}
.dvl-fb-list{display:none}
.dvl-fb-list.is-on{display:block;animation:dvl-in .35s ease both}
.dvl-fb-lh{margin:0 0 6px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.dvl-fb-list ul{margin:0;padding:0;list-style:none}
.dvl-fb-list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--dvs-rule);font-size:16.5px;line-height:1.45;color:var(--dvs-text)}
.dvl-fb-list li::before{content:'';position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:2px solid var(--dvs-violet);
  border-bottom:2px solid var(--dvs-violet);transform:rotate(-45deg)}
.dvl-law{margin-top:clamp(56px,6vw,88px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--dvs-rule)}
.dvl-law-h{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.dvl-law-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 0;padding:0;list-style:none}
.dvl-law-g li{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
/* 40px of hit area on a line that looks 11px tall, as in the breadcrumb */
.dvl-law-ref{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:40px;margin:-12px 0 -8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet);
  text-decoration:none}
@media (hover:hover){.dvl-law-ref:hover{color:var(--dvs-soft)}}
.dvl-law-ref:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
/* the figures behind the path and the checkout, each with its source below */
.dvl-stat,.dvl-co-stat{display:flex;align-items:baseline;gap:12px;margin:0;font-size:15px;line-height:1.45;color:var(--dvs-body)}
.dvl-stat{grid-column:1/-1}
.dvl-co-stat{margin-top:18px}
.dvl-stat b,.dvl-co-stat b{flex:0 0 auto;font-family:'Archivo',sans-serif;font-weight:700;font-size:30px;line-height:1;
  letter-spacing:-.03em;color:var(--dvs-soft)}
.dvl-law-g b{font-family:'Archivo',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em}
.dvl-law-g p{margin:0;font-size:15px;line-height:1.5;color:var(--dvs-body)}
.dvl-law-n{margin:16px 0 0;font-size:14px;color:var(--dvs-muted)}

/* ---------- 07 google ---------- */

.dvl-g-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvl-field{display:grid;gap:8px;margin-top:16px}
.dvl-field:first-child{margin-top:0}
.dvl-field span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvl-field input{min-height:52px;padding:0 16px;border:1px solid var(--dvs-lit);background:#0F0C15;color:var(--dvs-text);
  font-family:inherit;font-size:16px}
.dvl-field input::placeholder{color:#6B6475}
.dvl-field input:focus{outline:none;border-color:var(--dvs-violet);box-shadow:0 0 0 3px rgba(180,124,253,.2)}
.dvl-g-priv{margin:14px 0 0;font-size:13.5px;color:var(--dvs-muted)}
.dvl-serp{padding:22px 24px;border-radius:12px;background:#fff;color:#202124;font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 30px 70px -30px rgba(7,5,9,.9),0 0 60px -26px rgba(180,124,253,.5)}
.dvl-serp-site{display:flex;align-items:center;gap:12px}
.dvl-serp-site i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#F1ECE4;color:#B4532A;
  font-style:normal;font-weight:700;font-size:13px}
.dvl-serp-site span{display:grid;min-width:0}
.dvl-serp-site b{font-weight:400;font-size:14px}
.dvl-serp-site em{overflow:hidden;font-style:normal;font-size:12px;color:#4D5156;white-space:nowrap;text-overflow:ellipsis}
.dvl-serp-t{margin:10px 0 4px;font-size:20px;line-height:1.3;color:#1A0DAB;overflow-wrap:anywhere}
.dvl-serp-rich{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:14px;color:#4D5156}
.dvl-serp-rich b{color:#202124}
.dvl-serp-rich .is-ok{color:#188038}
.dvl-serp-d{margin:6px 0 0;font-size:14px;line-height:1.55;color:#4D5156}
.dvl-code{margin:16px 0 0;padding:18px 20px;overflow-x:auto;border:1px solid var(--dvs-lit);background:#0F0C15;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.65;color:var(--dvs-body);white-space:pre}
.dvl-code b{font-weight:400;color:var(--dvs-soft)}
.dvl-g-note{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--dvs-body)}

/* ---------- widths ---------- */

@media (max-width:1100px){
  .dvl-law-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .dvl-plat-grid,.dvl-co-grid,.dvl-fb-grid,.dvl-g-grid{grid-template-columns:minmax(0,1fr)}
  .dvl-rec,.dvl-phone{position:static}
}
@media (max-width:760px){
  .dvl-stops{gap:6px}
  .dvl-stop{min-height:52px;align-items:center;padding:10px 4px}
  .dvl-stop .dvs-n{font-size:13px}
  .dvl-stop-t{display:none}
  .dvl-track{margin:20px 0 22px}
  .dvl-panel{grid-template-columns:minmax(0,1fr)}
  .dvl-q{flex-direction:column;align-items:stretch}
  .dvl-yn{align-self:flex-start}
  .dvl-tbl thead{display:none}
  .dvl-tbl,.dvl-tbl tbody,.dvl-tbl tr,.dvl-tbl th,.dvl-tbl td{display:block;width:auto}
  .dvl-tbl tr{padding:14px 0;border-bottom:1px solid var(--dvs-rule)}
  .dvl-tbl th,.dvl-tbl td{padding:4px 0;border:0}
  .dvl-tbl tbody th{margin-bottom:6px;width:auto}
  .dvl-tbl td::before{content:attr(data-l);display:block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
  .dvl-fb-sw{display:flex}
  .dvl-fb-sw button{flex:1;padding:0 10px;font-size:11px}
  .dvl-law-g{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .dvl-track-fill,.dvl-walker,.dvl-flip-in,.dvl-meter b{transition:none}
  .dvl-panel.is-on,.dvl-fb-list.is-on,.dvl-sc-pay{animation:none}
}
/* <<< dvl-lojas */

/* >>> dvo-seo (generated) */
/* ---------------------------------------------------------------------------
   SEO, AEO E GEO (the dvo- sections), generated by build-seo-page.js.
   The sections sit on the .dvl base from the Lojas Online page (tokens,
   padding, source lines, tables, fields); these rules are only what the SEO
   page adds.
--------------------------------------------------------------------------- */

.dvo-ctr::before{right:-12%;top:14%}
.dvo-eng{background:#0D0A13}.dvo-eng::before{left:-14%;top:22%}
.dvo-test::before{right:-10%;top:30%}
.dvo-month{background:#0D0A13}.dvo-month::before{left:-8%;top:14%}
.dvo-snip::before{right:-14%;top:18%}

/* ---------- 02 first place against page two ---------- */

.dvo-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,48px)}
.dvo-vs-c{margin:0;padding:clamp(22px,2.6vw,32px);border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvo-vs-c.is-top{border-color:rgba(180,124,253,.5);background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));
  box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvo-vs-c .dvl-k{margin:0 0 18px}
.dvo-dots{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:clamp(4px,.5vw,7px);margin:0 0 24px}
.dvo-dots i{aspect-ratio:1;border-radius:50%;background:var(--dvs-rule)}
.dvo-dots i.is-on{background:var(--dvs-soft);box-shadow:0 0 8px rgba(214,188,254,.55)}
.dvo-dots i.is-half{background:linear-gradient(90deg,var(--dvs-soft) 0 50%,var(--dvs-rule) 50% 100%)}
.dvo-vs-n{display:flex;align-items:baseline;gap:14px;margin:0}
.dvo-vs-n b{flex:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(48px,5vw,72px);line-height:.9;letter-spacing:-.05em;
  color:var(--dvs-soft)}
.dvo-vs-c:not(.is-top) .dvo-vs-n b{color:var(--dvs-muted)}
.dvo-vs-n span{font-size:16px;line-height:1.45;color:var(--dvs-text)}
.dvo-vs-line{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--dvs-body)}
.dvo-ai{margin-top:clamp(44px,5vw,64px);padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--dvs-rule)}
.dvo-ai-h{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;color:var(--dvs-text)}
.dvo-ai-lead{margin:10px 0 0;max-width:62ch;font-size:16px;line-height:1.6;color:var(--dvs-body)}
.dvo-ai-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 0;padding:0;list-style:none}
.dvo-ai-l li{display:grid;align-content:start;gap:10px;padding:clamp(20px,2.2vw,26px);border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvo-ai-l b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(28px,2.8vw,38px);line-height:1;letter-spacing:-.035em;color:var(--dvs-soft)}
.dvo-ai-l span{font-size:15.5px;line-height:1.55;color:var(--dvs-body)}
.dvo-ai-so{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--dvs-violet);font-size:16.5px;line-height:1.55;color:var(--dvs-text)}
.dvo-ctr .dvl-src,.dvo-eng .dvl-src{margin-top:22px}

/* ---------- 03 the four places ---------- */

.dvo-eng-box{margin-top:clamp(32px,4vw,48px)}
.dvo-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dvo-tab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:64px;padding:12px 16px;border:1px solid var(--dvs-lit);
  background:rgba(19,16,25,.72);color:var(--dvs-muted);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.dvo-tab b{font-family:'Archivo',sans-serif;font-size:19px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvo-tab span{font-size:13.5px}
.dvo-tab[aria-selected="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.12);box-shadow:0 0 30px -12px rgba(180,124,253,.7)}
.dvo-tab[aria-selected="true"] b{color:var(--dvs-soft)}
@media (hover:hover){.dvo-tab:hover{border-color:var(--dvs-violet)}}
.dvo-tab:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvo-panel{display:none;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:32px}
.dvo-panel.is-on{display:grid;animation:dvl-in .35s ease both}
.dvo-panel-h{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;color:var(--dvs-text)}
.dvo-panel-h span{color:var(--dvs-muted);font-weight:400}
.dvo-full{margin:6px 0 16px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvo-def{margin:0 0 20px;font-size:17px;line-height:1.6;color:var(--dvs-text)}
.dvo-panel-tx .dvl-k{margin:0 0 4px}
.dvo-panel-tx ul{margin:0;padding:0;list-style:none}
.dvo-panel-tx li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--dvs-rule);font-size:16px;color:var(--dvs-body)}
.dvo-panel-tx li::before{content:'';position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:2px solid var(--dvs-violet);
  border-bottom:2px solid var(--dvs-violet);transform:rotate(-45deg)}

/* the drawings: light like the real screens, one violet ring for "you" */
.dvo-mk{margin:0;min-width:0}
.dvo-mk .dvl-demo-note{margin-top:14px}
.dvo-mk-win{overflow:hidden;border-radius:14px;background:#fff;color:#202124;font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.dvo-mk-q{display:flex;align-items:center;gap:10px;margin:16px 18px 12px;padding:10px 16px;border:1px solid #DFE1E5;border-radius:99px;
  box-shadow:0 1px 6px rgba(32,33,36,.1);font-size:14px;color:#202124}
.dvo-mk-q::before{content:'';flex:none;width:10px;height:10px;border:2px solid #9AA0A6;border-radius:50%}
.dvo-mk-q span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dvo-mk-tabs{display:flex;gap:20px;padding:0 22px;border-bottom:1px solid #EBEBEB;font-size:12.5px;color:#5F6368;overflow:hidden}
.dvo-mk-tabs span{padding:0 0 9px;white-space:nowrap}
.dvo-mk-tabs span.is-on{padding-bottom:7px;border-bottom:2px solid #1A73E8;color:#1A73E8}
.dvo-mk-body{display:grid;gap:22px;padding:26px 22px}
.dvo-mk .dvl-serp{padding:0;border-radius:0;background:none;box-shadow:none}
.dvo-mk .dvl-serp-t{font-size:18px}
.dvo-hit{position:relative;border-radius:8px;box-shadow:0 0 0 2px #B47CFD,0 0 0 8px rgba(180,124,253,.2)}
.dvo-hit::after{content:attr(data-tag);position:absolute;right:10px;top:0;transform:translateY(-50%);padding:4px 9px;border-radius:99px;
  background:#B47CFD;color:#0B0910;font-family:'JetBrains Mono',monospace;font-size:9.5px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap}
.dvo-mk .dvl-serp.dvo-hit{padding:16px 16px 14px}
.dvo-gh{display:grid;gap:8px;padding:0 2px}
.dvo-gh i{display:block;height:9px;border-radius:5px;background:#ECEDEF}
.dvo-gh i:nth-child(1){width:34%}
.dvo-gh i:nth-child(2){width:68%;height:14px;background:#E1E6F4}
.dvo-gh i:nth-child(3){width:92%}
.dvo-map{position:relative;height:clamp(120px,13vw,160px);margin:14px 18px 4px;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 82% 26%,#CFE8D1 0 36px,transparent 37px),
    linear-gradient(90deg,transparent 44%,#fff 44% 47%,transparent 47%),
    linear-gradient(0deg,transparent 56%,#fff 56% 60%,transparent 60%),
    linear-gradient(28deg,transparent 64%,#FBE3A6 64% 67%,transparent 67%),#E9EEF2}
.dvo-pin{position:absolute;width:16px;height:16px;margin:-16px 0 0 -8px;border-radius:50% 50% 50% 0;background:#EA4335;transform:rotate(-45deg);
  box-shadow:0 2px 4px rgba(0,0,0,.25)}
.dvo-pin::after{content:'';position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#fff}
.dvo-pin.is-hit{width:24px;height:24px;margin:-24px 0 0 -12px;background:#B47CFD;box-shadow:0 0 0 6px rgba(180,124,253,.25)}
.dvo-pin.is-hit::after{left:8px;top:8px;width:8px;height:8px}
.dvo-pack{display:grid;gap:18px;margin:0;padding:22px 22px 24px;list-style:none}
.dvo-pack li{display:grid;gap:3px;font-size:13px;line-height:1.45;color:#70757A}
.dvo-pack li.dvo-hit{padding:14px 16px 12px}
.dvo-pack li b{font-size:15.5px;font-weight:400;color:#1A0DAB}
.dvo-stars{font-style:normal;color:#E8A500;letter-spacing:1px}
.dvo-open{font-style:normal;color:#188038}
.dvo-aio{display:grid;gap:12px;padding:18px;border-radius:14px;background:#F0F4F9}
.dvo-aio p{margin:0;font-size:14px;line-height:1.6;color:#1F1F1F}
.dvo-aio .dvo-aio-k{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.dvo-aio-k svg{fill:#4285F4}
.dvo-aio-src{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border-radius:10px;background:#fff}
.dvo-aio-src i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#F1ECE4;color:#B4532A;
  font-style:normal;font-weight:700;font-size:12px}
.dvo-aio-src span{display:grid;min-width:0}
.dvo-aio-src b{font-size:13.5px;font-weight:400;color:#202124}
.dvo-aio-src em{font-style:normal;font-size:12px;color:#4D5156}
.dvo-mk-chat{display:grid;gap:18px;padding:clamp(18px,2.4vw,28px);border-radius:14px;background:#212121;color:#ECECEC;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;box-shadow:0 30px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.dvo-chat-u{justify-self:end;max-width:82%;margin:0;padding:10px 16px;border-radius:18px;background:#303030;font-size:14.5px;line-height:1.5}
.dvo-chat-a{font-size:14.5px;line-height:1.65}
.dvo-chat-a p{margin:0}
.dvo-chat-a b{color:#fff}
.dvo-chat-a .dvo-chat-src{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.dvo-chat-src span{font-size:12px;color:#8E8E8E}
.dvo-chat-src em{font-style:normal;padding:5px 11px;border-radius:99px;background:#2F2F2F;font-size:12px;color:#C9C9C9}
.dvo-chat-src em.dvo-hit{border-radius:99px}
.dvo-chat-src em.dvo-hit::after{right:auto;left:0}
.dvo-chat-in{margin:4px 0 0;padding:12px 18px;border-radius:26px;background:#303030;font-size:14px;color:#8E8E8E}

/* the comparison: one row per place */
.dvo-cmp{margin-top:clamp(48px,6vw,80px)}
.dvo-tbl{table-layout:fixed}
.dvo-tbl thead th{color:var(--dvs-violet)}
.dvo-tbl tbody th{width:18%}
.dvo-tbl tbody th b{display:inline-block;padding:5px 12px;border:1px solid rgba(180,124,253,.55);border-radius:99px;background:rgba(180,124,253,.1);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--dvs-soft);white-space:nowrap}
.dvo-tbl tbody th span{display:block;margin-top:8px;font-weight:400;font-size:13.5px;color:var(--dvs-muted)}
.dvo-tbl td{font-size:15px}
.dvo-tbl td:last-child{color:var(--dvs-text)}
@media (hover:hover){.dvo-tbl tbody tr:hover > *{background:rgba(180,124,253,.05)}}

/* ---------- 04 the quick test ---------- */

.dvo-test-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvo-checks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.dvo-check{width:100%;min-height:60px;display:grid;grid-template-columns:34px minmax(0,1fr) 26px;align-items:center;gap:14px;
  padding:14px 18px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);color:var(--dvs-text);font-family:inherit;
  font-size:16px;line-height:1.4;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.dvo-box{width:24px;height:24px;border:1.5px solid var(--dvs-lit);display:grid;place-items:center;transition:background .18s ease,border-color .18s ease}
.dvo-check[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.1)}
.dvo-check[aria-pressed="true"] .dvo-box{background:var(--dvs-violet);border-color:var(--dvs-violet)}
.dvo-check[aria-pressed="true"] .dvo-box::after{content:'';width:11px;height:6px;margin-top:-3px;border-left:2px solid var(--dvs-ink);
  border-bottom:2px solid var(--dvs-ink);transform:rotate(-45deg)}
@media (hover:hover){.dvo-check:hover{border-color:var(--dvs-violet)}}
.dvo-check:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvo-score{position:sticky;top:112px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvo-score-n{display:flex;align-items:baseline;gap:8px;margin:0}
.dvo-score-n b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(56px,6vw,80px);line-height:.9;letter-spacing:-.05em;color:var(--dvs-soft)}
.dvo-score-n span{font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--dvs-muted)}
.dvo-gauge{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:18px 0}
.dvo-gauge i{height:8px;background:var(--dvs-rule);transition:background .25s ease}
.dvo-gauge i.is-on{background:var(--dvs-violet);box-shadow:0 0 10px rgba(180,124,253,.7)}
.dvo-verdict{margin:0 0 20px;font-size:17px;line-height:1.5;color:var(--dvs-text)}
.dvo-miss-k{margin-top:4px}
.dvo-miss{margin:0 0 22px;padding:0;list-style:none}
.dvo-miss li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid var(--dvs-rule);font-size:14.5px;line-height:1.45;color:var(--dvs-body)}
.dvo-miss li::before{content:'';position:absolute;left:2px;top:15px;width:8px;height:8px;border:1.5px solid var(--dvs-amber)}
.dvo-miss li.is-done{display:none}

/* ---------- 05 the monthly wheel ---------- */

.dvo-month-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;
  margin-top:clamp(40px,5vw,64px)}
.dvo-wheel{position:relative;width:min(100%,460px);aspect-ratio:1;justify-self:center;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.dvo-q{border:1px solid var(--dvs-lit);background:rgba(19,16,25,.75);color:var(--dvs-body);font-family:'Archivo',sans-serif;
  font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.02em;cursor:pointer;display:grid;padding:0;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.dvo-q span{padding:22%}
.dvo-q.is-q1{border-radius:100% 0 0 0;align-items:start;justify-items:start}
.dvo-q.is-q2{border-radius:0 100% 0 0;align-items:start;justify-items:end}
.dvo-q.is-q3{border-radius:0 0 0 100%;align-items:end;justify-items:start}
.dvo-q.is-q4{border-radius:0 0 100% 0;align-items:end;justify-items:end}
.dvo-q.is-q1 span,.dvo-q.is-q3 span{padding-right:0}.dvo-q.is-q2 span,.dvo-q.is-q4 span{padding-left:0}
.dvo-q.is-q1 span,.dvo-q.is-q2 span{padding-bottom:0}.dvo-q.is-q3 span,.dvo-q.is-q4 span{padding-top:0}
.dvo-q[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.16);color:var(--dvs-soft);
  box-shadow:0 0 40px -12px rgba(180,124,253,.8)}
@media (hover:hover){.dvo-q:hover,.dvo-core:hover{border-color:var(--dvs-violet);color:var(--dvs-text)}}
.dvo-q:focus-visible,.dvo-core:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:3px}
.dvo-core{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid var(--dvs-lit);background:#0D0A13;color:var(--dvs-text);font-family:'Archivo',sans-serif;font-size:clamp(15px,1.4vw,18px);
  font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:2;
  box-shadow:0 0 0 10px #0D0A13;transition:border-color .2s ease,color .2s ease,box-shadow .2s ease}
.dvo-core em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dvs-violet)}
.dvo-core[aria-pressed="true"]{border-color:var(--dvs-violet);color:var(--dvs-soft);box-shadow:0 0 0 10px #0D0A13,0 0 40px 0 rgba(180,124,253,.6)}
.dvo-orbit{position:absolute;left:50%;top:50%;width:50%;height:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px dashed rgba(180,124,253,.35);pointer-events:none;z-index:1;animation:dvo-spin 40s linear infinite}
@keyframes dvo-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.dvo-fr{display:none}
.dvo-fr.is-on{display:block;animation:dvl-in .35s ease both}
.dvo-fr-h{margin:0 0 10px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em}
.dvo-fr p{margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--dvs-text)}
.dvo-fr ul{margin:0;padding:0;list-style:none}
.dvo-fr li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid var(--dvs-rule);font-size:16px;color:var(--dvs-body)}
.dvo-fr li::before{content:'';position:absolute;left:2px;top:18px;width:11px;height:6px;border-left:2px solid var(--dvs-violet);
  border-bottom:2px solid var(--dvs-violet);transform:rotate(-45deg)}

/* ---------- 07 the snippet ---------- */

.dvo-snip-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvo-snip-form textarea{min-height:120px;padding:14px 16px;border:1px solid var(--dvs-lit);background:#0F0C15;color:var(--dvs-text);
  font-family:inherit;font-size:16px;line-height:1.5;resize:vertical}
.dvo-snip-form textarea::placeholder{color:#6B6475}
.dvo-snip-form textarea:focus{outline:none;border-color:var(--dvs-violet);box-shadow:0 0 0 3px rgba(180,124,253,.2)}
.dvo-snip-serp{max-width:652px}
.dvo-snip-t{white-space:nowrap;overflow:hidden}
.dvo-meters{display:grid;gap:14px;margin-top:22px;max-width:652px}
.dvo-meter p{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:14px;color:var(--dvs-body)}
.dvo-meter p b{font-weight:600;color:var(--dvs-text)}
.dvo-meter > i{display:block;height:8px;background:var(--dvs-rule)}
.dvo-meter > i b{display:block;height:100%;width:var(--w,0%);max-width:100%;background:var(--dvs-violet);transition:width .25s ease,background .25s ease}
.dvo-meter.is-over > i b{background:var(--dvs-amber)}
.dvo-meter.is-over p span{color:var(--dvs-amber)}

/* ---------- widths ---------- */

@media (max-width:999px){
  .dvo-test-grid,.dvo-month-grid,.dvo-snip-grid,.dvo-panel{grid-template-columns:minmax(0,1fr)}
  .dvo-score{position:static}
}
@media (max-width:760px){
  .dvo-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvo-vs,.dvo-ai-l{grid-template-columns:minmax(0,1fr)}
  .dvo-wheel{width:min(100%,340px)}
  /* the comparison: each place is one card */
  .dvo-tbl td::before{content:attr(data-l)}
  .dvo-tbl tbody tr{margin-bottom:10px;padding:18px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
  .dvo-tbl tbody th{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:auto;margin-bottom:6px}
  .dvo-tbl tbody th span{margin-top:0}
  .dvo-tbl td:first-of-type::before{margin-top:0}
}
@media (max-width:520px){
  .dvo-mk-tabs{gap:14px;padding:0 16px}
  .dvo-mk-body,.dvo-pack{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .dvo-orbit{animation:none}
  .dvo-panel.is-on,.dvo-fr.is-on{animation:none}
}
/* <<< dvo-seo */

/* >>> dvm-auto (generated) */
/* ---------------------------------------------------------------------------
   AUTOMAÇÕES E IA (the dvm- sections), generated by build-automacoes-page.js.
   On the .dvl base (lojas) and the .dvo tabs (seo); these are only what this
   page adds.
--------------------------------------------------------------------------- */

.dvm-time::before{right:-12%;top:18%}
.dvm-flow{background:#0D0A13}.dvm-flow::before{left:-12%;top:20%}
.dvm-uses::before{right:-14%;top:10%}
.dvm-med{background:#0D0A13}.dvm-med::before{left:-12%;top:20%}
.dvm-num::before{left:-12%;top:16%}
.dvm-chat{background:#0D0A13}.dvm-chat::before{right:-10%;top:24%}
.dvm-lim::before{right:-10%;top:30%}
.dvm-tools{background:#0D0A13}.dvm-tools::before{left:20%;top:10%}

/* ---------- 02 the reader's time ---------- */

.dvm-time-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvm-rows{display:grid;gap:10px}
.dvm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 92px;align-items:center;gap:16px;min-height:60px;padding:10px 18px;
  border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);cursor:pointer}
.dvm-row-t{font-size:16px;line-height:1.35;color:var(--dvs-text)}
.dvm-row-v{justify-self:end;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:12.5px;color:var(--dvs-muted);white-space:nowrap}
.dvm-row.is-set{border-color:rgba(180,124,253,.55)}
.dvm-row.is-set .dvm-row-v{color:var(--dvs-soft)}
.dvm-row input[type=range]{width:100%;height:44px;margin:0;background:none;accent-color:var(--dvs-violet);cursor:pointer}
.dvm-rate{margin-top:12px}
.dvm-total{position:sticky;top:112px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvm-total-n{display:flex;align-items:baseline;gap:12px;margin:0}
.dvm-total-n b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(64px,7vw,104px);line-height:.9;letter-spacing:-.05em;
  color:var(--dvs-soft);font-variant-numeric:tabular-nums}
.dvm-total-n span{font-family:'Archivo',sans-serif;font-weight:600;font-size:22px;color:var(--dvs-text)}
.dvm-total-d{margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--dvs-text)}
.dvm-total-e{margin:6px 0 0;font-size:16px;color:var(--dvs-soft)}
.dvm-bars{display:flex;height:10px;gap:3px;margin:22px 0 10px;background:var(--dvs-rule)}
.dvm-bars i{display:block;height:100%;width:0;background:var(--dvs-violet);transition:width .3s ease}
.dvm-bars i:nth-child(2n){background:var(--dvs-soft)}
.dvm-total-n2{margin:0 0 20px;font-size:13px;color:var(--dvs-muted)}

/* ---------- 03 the four beats ---------- */

.dvm-flow-box{margin-top:clamp(36px,4.5vw,56px)}
.dvm-cases{margin-bottom:26px}
.dvm-beats{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;position:relative}
.dvm-beats.is-on{display:grid}
.dvm-beats::before{content:'';position:absolute;left:4%;right:4%;top:22px;height:2px;background:var(--dvs-rule)}
.dvm-beat{position:relative;padding:48px 20px 22px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);opacity:.4;
  transform:translateY(8px);transition:opacity .45s ease,transform .45s ease,border-color .45s ease,box-shadow .45s ease}
.dvm-beat.is-lit{opacity:1;transform:none;border-color:var(--dvs-violet);box-shadow:0 0 40px -16px rgba(180,124,253,.8)}
.dvm-beat-k{position:absolute;left:20px;top:12px;display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dvs-violet)}
.dvm-beat-k i{width:12px;height:12px;border-radius:50%;background:var(--dvs-lit);transition:background .3s ease,box-shadow .3s ease}
.dvm-beat.is-lit .dvm-beat-k i{background:var(--dvs-soft);box-shadow:0 0 12px rgba(214,188,254,.9)}
.dvm-beat em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dvs-muted)}
.dvm-beat p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--dvs-text)}
.dvm-flow-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:20px;font-size:14px;color:var(--dvs-muted)}
.dvm-replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--dvs-lit);background:none;
  color:var(--dvs-text);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
@media (hover:hover){.dvm-replay:hover{border-color:var(--dvs-violet)}}
.dvm-replay:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}

/* ---------- 04 uses ---------- */

.dvm-uses-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(36px,4.5vw,56px) 0 0;padding:0;list-style:none}
.dvm-uses-g li{padding:22px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);transition:border-color .2s ease,transform .2s ease}
@media (hover:hover){.dvm-uses-g li:hover{border-color:var(--dvs-violet);transform:translateY(-2px)}}
.dvm-uses-g h3{margin:12px 0 6px;font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvm-uses-g p{margin:0;font-size:15px;line-height:1.5;color:var(--dvs-body)}
.dvm-uses-end{margin:22px 0 0;font-family:'Archivo',sans-serif;font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--dvs-soft)}
.dvm-uses-end a{display:inline-block;min-height:44px;line-height:44px;color:var(--dvs-text);text-decoration:underline;text-decoration-color:var(--dvs-violet);
  text-underline-offset:4px}
@media (hover:hover){.dvm-uses-end a:hover{color:var(--dvs-soft)}}
.dvm-uses-end a:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}

/* ---------- 04b the numbers ---------- */

.dvm-num-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(36px,4.5vw,56px) 0 0;padding:0;list-style:none}
.dvm-num-g li{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,28px);border:1px solid var(--dvs-lit);
  background:rgba(19,16,25,.72)}
.dvm-num-n{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(44px,4.4vw,64px);line-height:.95;letter-spacing:-.04em;
  color:var(--dvs-soft);font-variant-numeric:tabular-nums}
.dvm-num-g p{flex:1;margin:0;font-size:15.5px;line-height:1.5;color:var(--dvs-text)}
.dvm-num-src{display:inline-flex;align-items:center;gap:6px;min-height:44px;align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet);text-decoration:none}
@media (hover:hover){.dvm-num-src:hover{color:var(--dvs-soft)}}
.dvm-num-src:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
@media (max-width:1100px){.dvm-num-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dvm-num-g{grid-template-columns:minmax(0,1fr)}}

/* ---------- 05 the demo chat ---------- */

/* the phone sits at the top of the row, so the answer to a chip lands in view */
.dvm-chat-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvm-phone{position:static;justify-self:center}
.dvm-screen{display:flex;flex-direction:column;height:440px;background:#ECE5DD}
.dvm-chat-hd{display:flex;align-items:center;gap:12px;padding:18px 16px 12px;background:#1F5C4A;color:#fff}
.dvm-chat-hd i{width:36px;height:36px;border-radius:50%;background:#fff;color:#1F5C4A;display:grid;place-items:center;font-style:normal;font-weight:700}
.dvm-chat-hd b{display:block;font-size:15.5px}
.dvm-chat-hd small{font-size:12.5px;opacity:.85}
.dvm-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 12px;scroll-behavior:smooth}
.dvm-m{max-width:84%;margin:0;padding:9px 12px;border-radius:12px;font-size:14.5px;line-height:1.4;color:#1D2A2F;
  box-shadow:0 1px 1px rgba(0,0,0,.08);animation:dvl-in .3s ease both}
.dvm-m.is-in{align-self:flex-end;background:#D9FDD3;border-top-right-radius:3px}
.dvm-m.is-out{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.dvm-m.is-hand{background:#FFF4DD;border:1px solid #F2C46B}
.dvm-tag{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#1F7A5A}
.dvm-m.is-typing{color:#7B8A8F;font-style:italic}
.dvm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dvm-ask > .dvm-replay{margin-bottom:22px}
.dvm-ask-n{margin:0 0 16px;font-size:15.5px;line-height:1.55;color:var(--dvs-body)}
/* what the demo assistant knows; the line an answer comes from lights up */
.dvm-know{margin:0 0 18px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvm-know-h{display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 16px;border-bottom:1px solid var(--dvs-rule);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvm-know-h em{font-style:normal;color:var(--dvs-muted)}
.dvm-know ul{margin:0;padding:6px 0;list-style:none}
.dvm-know li{display:flex;justify-content:space-between;gap:14px;padding:8px 16px;font-size:14.5px;line-height:1.4;color:var(--dvs-body);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.dvm-know li b{font-weight:600;color:var(--dvs-text);text-align:right}
.dvm-know li.is-read{background:rgba(180,124,253,.14);color:var(--dvs-text);box-shadow:inset 2px 0 0 var(--dvs-violet)}
.dvm-know li.is-read b{color:var(--dvs-soft)}

/* ---------- 04c custom work ---------- */

.dvm-med-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.dvm-med-steps{margin:0;padding:0;list-style:none}
.dvm-med-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--dvs-rule)}
.dvm-med-steps li:first-child{padding-top:0}
.dvm-med-steps .dvs-n{grid-row:span 2;padding-top:4px}
.dvm-med-steps b{font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvm-med-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--dvs-body)}
.dvm-med-mk{margin:0;min-width:0}
.dvm-med-mk .dvl-demo-note{margin-top:14px}
.dvm-med-win{overflow:hidden;border-radius:14px;background:#fff;color:#1F1B2A;font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.dvm-med-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:14px 18px;border-bottom:1px solid #ECE9F2}
.dvm-med-bar b{font-size:14.5px}
.dvm-med-bar span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#1E7A4B}
.dvm-med-bar span::before{content:'';width:8px;height:8px;border-radius:50%;background:#1E9E5E}
.dvm-med-t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.dvm-med-t th,.dvm-med-t td{padding:11px 14px;border-bottom:1px solid #F0EDF5;text-align:right;white-space:nowrap}
.dvm-med-t thead th{padding-top:8px;padding-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A7390;background:#FAF9FC;
  white-space:normal}
.dvm-med-t thead th:first-child,.dvm-med-t tbody th{text-align:left}
.dvm-med-t thead th[colspan]{text-align:center}
.dvm-med-t tbody th{font-weight:700;white-space:normal;color:#1F1B2A}
.dvm-med-t td{color:#5D5670}
.dvm-med-t td.is-best{font-weight:700;color:#1F1B2A;background:#F1EEF8}
.dvm-med-t td.is-wait{font-style:italic;color:#A59FB5;white-space:normal}
.dvm-med-t td.is-ok{font-weight:700;color:#1E7A4B}
.dvm-med-t td.is-over{font-weight:700;color:#B4531A;background:#FFF4E5}
.dvm-med-log{display:grid;gap:8px;margin:0;padding:14px 18px 18px;list-style:none;font-size:13.5px;line-height:1.45;color:#5D5670}
.dvm-med-log li{position:relative;padding-left:20px}
.dvm-med-log li::before{content:'';position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;background:#8B6CF0}
.dvm-med-log li.is-warn::before{background:#E8891A}
.dvm-med-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(28px,3.4vw,40px);
  padding:clamp(20px,2.4vw,28px);border:1px solid rgba(180,124,253,.45);background:rgba(180,124,253,.06)}
.dvm-med-cta p{margin:0;max-width:52ch;font-family:'Archivo',sans-serif;font-weight:500;font-size:clamp(18px,1.7vw,22px);line-height:1.4;color:var(--dvs-text)}

/* ---------- 06 limits: one card per situation, the rows lined up ---------- */

.dvm-lim-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(32px,4vw,48px) 0 0;padding:0;list-style:none}
.dvm-lim-g li{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvm-lim-g h3{display:flex;align-items:center;gap:10px;margin:0;padding:18px 20px;border-bottom:1px solid var(--dvs-rule);font-family:'Archivo',sans-serif;
  font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvm-lim-g p{position:relative;margin:0;padding:16px 20px 18px 54px;font-size:15px;line-height:1.5;color:var(--dvs-text)}
.dvm-lim-g p b{display:block;margin-bottom:4px;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.dvm-lim-g p::before{position:absolute;left:20px;top:17px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1}
.dvm-lim-g .is-does b{color:var(--dvs-soft)}
.dvm-lim-g .is-does::before{content:'✓';border:1px solid var(--dvs-violet);background:rgba(180,124,253,.16);color:var(--dvs-soft)}
.dvm-lim-g .is-never{border-top:1px dashed rgba(255,197,127,.28);background:rgba(255,197,127,.035);color:var(--dvs-body)}
.dvm-lim-g .is-never b{color:#FFC57F}
.dvm-lim-g .is-never::before{content:'✕';border:1px solid rgba(255,197,127,.7);color:#FFC57F}

/* ---------- 07 tools: two rows that keep moving ---------- */

.dvm-lanes{display:grid;gap:12px;margin-top:clamp(32px,4vw,48px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.dvm-lane{display:flex;width:max-content}
.dvm-track{display:flex;flex:none;gap:12px;margin:0;padding:0 12px 0 0;list-style:none;animation:dvm-marq 60s linear infinite}
.dvm-lane.is-rev .dvm-track{animation-direction:reverse;animation-duration:72s}
.dvm-track li{display:flex;align-items:center;gap:10px;flex:none;height:56px;padding:0 20px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;white-space:nowrap;color:var(--dvs-text)}
.dvm-track svg{flex:none;fill:var(--dvs-soft)}
@keyframes dvm-marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (hover:hover){.dvm-lanes:hover .dvm-track{animation-play-state:paused}}
.dvm-tools-n{margin:22px 0 0;font-size:15.5px;line-height:1.55;color:var(--dvs-body)}

@media (max-width:1100px){
  .dvm-uses-g,.dvm-lim-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .dvm-time-grid,.dvm-chat-grid,.dvm-med-grid{grid-template-columns:minmax(0,1fr)}
  .dvm-total{position:static}
  /* the questions sit right above the phone, so the answer lands in view of the
     chip that asked it; the knowledge card and the note follow the phone */
  .dvm-chat-grid{row-gap:16px}
  .dvm-ask{display:contents}
  .dvm-ask > .dvl-k,.dvm-chips,.dvm-ask > .dvm-replay{order:-1}
  .dvm-chips{margin-bottom:0}
  .dvm-know,.dvm-ask-n{order:1}
  .dvm-know{margin:8px 0 0}
  .dvm-ask-n{margin:0}
  .dvm-ask > .dvm-replay{justify-self:start;margin-bottom:0}
  .dvm-beats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvm-beats::before{display:none}
}
@media (max-width:760px){
  .dvm-row{grid-template-columns:minmax(0,1fr) 84px;row-gap:2px}
  .dvm-row input[type=range]{grid-column:1/-1;grid-row:2}
  .dvm-beats{grid-template-columns:minmax(0,1fr)}
  .dvm-uses-g{grid-template-columns:minmax(0,1fr)}
  .dvm-screen{height:380px}
}
@media (max-width:600px){
  .dvm-lim-g{grid-template-columns:minmax(0,1fr)}
  .dvm-med-t{font-size:12.5px}
  .dvm-med-t th,.dvm-med-t td{padding:9px 5px}
  .dvm-med-t tbody th{padding-left:10px}
  .dvm-med-t thead th{font-size:10px;letter-spacing:.03em}
  .dvm-med-bar,.dvm-med-log{padding-left:14px;padding-right:14px}
  .dvm-track li{height:50px;padding:0 16px;font-size:15px}
}
@media (max-width:360px){
  /* the smallest phones: "Eletrodomésticos" is one long word, so everything else gives way */
  .dvm-med-t{font-size:11.5px}
  .dvm-med-t th,.dvm-med-t td{padding:8px 4px}
  .dvm-med-t tbody th{padding-left:8px;-webkit-hyphens:auto;hyphens:auto}
  .dvm-med-t thead th{font-size:9px;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){
  .dvm-beat{transition:none;opacity:1;transform:none}
  .dvm-m{animation:none}
  /* no movement: one copy of each row, wrapped */
  .dvm-track{animation:none;flex-wrap:wrap;row-gap:12px}
  .dvm-track[aria-hidden="true"]{display:none}
  .dvm-lane{width:auto}
  .dvm-lanes{-webkit-mask-image:none;mask-image:none}
}
/* <<< dvm-auto */

/* >>> dvad-ads (generated) */
/* ---------------------------------------------------------------------------
   ANÚNCIOS PAGOS (the dvad- sections), generated by build-ads-page.js.
   On the .dvl base (lojas), the .dvo wheel and meters (seo) and the .dvm-num
   cards (automações); these are only what this page adds.
--------------------------------------------------------------------------- */

.dvad-bud::before{right:-12%;top:18%}
.dvad-pk{background:#0D0A13}.dvad-pk::before{left:-12%;top:20%}
.dvad-ad::before{right:-14%;top:10%}
.dvad-num{background:#0D0A13}.dvad-num::before{left:-12%;top:16%}
.dvad-month::before{right:-10%;top:24%}
.dvad-quote{background:#0D0A13}.dvad-quote::before{left:30%;top:10%}
.dvad-fit::before{right:-10%;top:30%}

.dvad-src{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet);text-decoration:none}
@media (hover:hover){.dvad-src:hover{color:var(--dvs-soft)}}
.dvad-src:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvad-srcs{display:flex;flex-wrap:wrap;gap:0 22px}

/* ---------- 02 the budget ---------- */

.dvad-bud-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:stretch;
  margin-top:clamp(40px,5vw,64px)}
.dvad-ctl{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvad-ctl .dvl-k{margin:0}
.dvad-val{display:flex;align-items:baseline;gap:12px;margin:0}
.dvad-val b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(56px,6vw,88px);line-height:.9;letter-spacing:-.05em;
  color:var(--dvs-soft);font-variant-numeric:tabular-nums}
.dvad-val span{font-family:'Archivo',sans-serif;font-weight:600;font-size:20px;color:var(--dvs-text)}
.dvad-ctl input[type=range]{width:100%;height:44px;margin:0;background:none;accent-color:var(--dvs-violet);cursor:pointer}
.dvad-day{margin:0;font-size:17px;line-height:1.5;color:var(--dvs-text)}
.dvad-warn{margin:0;padding:12px 14px;border-left:2px solid #FFC57F;background:rgba(255,197,127,.07);font-size:15px;line-height:1.5;color:#FFD9A8}
.dvad-ctl .dvs-btn{align-self:flex-start;margin-top:auto}
.dvad-chart{display:flex;flex-direction:column;gap:14px;margin:0;padding:clamp(20px,2.4vw,28px);border:1px solid var(--dvs-lit);
  background:rgba(19,16,25,.72)}
.dvad-chart .dvl-k{margin:0}
.dvad-plot{position:relative;display:flex;align-items:flex-end;gap:3px;height:clamp(160px,18vw,220px);margin-top:26px;
  border-bottom:1px solid var(--dvs-rule)}
.dvad-plot i{flex:1;min-width:0;height:var(--h);background:linear-gradient(to top,rgba(180,124,253,.3),rgba(180,124,253,.92));
  transition:height .4s ease,background .3s ease}
.dvad-plot.is-empty i{background:rgba(180,124,253,.16)}
.dvad-line{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,197,127,.75);pointer-events:none}
.dvad-line.is-max{bottom:100%}
.dvad-line.is-avg{bottom:50%;border-top:1px solid rgba(214,188,254,.7)}
.dvad-line > span{position:absolute;right:0;bottom:4px;padding:2px 6px;background:#131019;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.06em;color:#FFC57F;white-space:nowrap}
.dvad-line.is-avg > span{color:var(--dvs-soft)}
.dvad-axis{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dvs-muted)}
.dvad-rule{margin:0;font-size:14.5px;line-height:1.6;color:var(--dvs-body)}
.dvad-pay,.dvad-vs{margin-top:clamp(48px,6vw,80px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--dvs-rule)}
.dvad-pay .dvl-tbl,.dvad-vs .dvl-tbl{margin-top:22px}
.dvad-pay-tbl tbody th,.dvad-vs-tbl tbody th{width:24%}

/* ---------- 03 google or social ---------- */

.dvad-pk-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvad-picks{display:grid;gap:10px}
.dvad-pick{display:flex;align-items:center;gap:16px;min-height:66px;padding:14px 18px;border:1px solid var(--dvs-lit);
  background:rgba(19,16,25,.72);color:var(--dvs-body);font:inherit;font-size:16.5px;line-height:1.4;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.dvad-pick b{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:12px;color:var(--dvs-violet)}
.dvad-pick[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.14);color:var(--dvs-text);
  box-shadow:0 0 40px -16px rgba(180,124,253,.8)}
@media (hover:hover){.dvad-pick:hover{border-color:var(--dvs-violet);color:var(--dvs-text)}}
.dvad-pick:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvad-rec{display:none;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvad-rec.is-on{display:block;animation:dvl-in .35s ease both}
/* .dvs-btn.is-quiet leaves the background to the element; a <button> would get the browser's grey */
.dvad-rec .dvs-btn{background:transparent}
.dvad-rec .dvl-k{margin:0 0 10px}
.dvad-rec h3{margin:0 0 10px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;color:var(--dvs-text)}
.dvad-rec > p:not(.dvl-k){margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--dvs-text)}
.dvad-rec ul{margin:0 0 20px;padding:0;list-style:none}
.dvad-rec li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--dvs-rule);font-size:16px;color:var(--dvs-body)}
.dvad-rec li::before{content:'';position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:2px solid var(--dvs-violet);
  border-bottom:2px solid var(--dvs-violet);transform:rotate(-45deg)}

/* ---------- 04 the reader's ad ---------- */

.dvad-ad-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvad-form{display:grid;gap:12px}
.dvad-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.dvad-prev{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start;position:sticky;top:104px}
.dvad-prev .dvl-k{margin:0 0 10px}
.dvad-prev .dvl-demo-note{grid-column:1/-1;margin:0}
.dvad-serp .dvl-serp-t{white-space:normal}
.dvad-sp{margin:0 0 8px;font-size:13px;font-weight:700;color:#202124}
.dvad-ig{overflow:hidden;border-radius:18px;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.dvad-ig-h{display:flex;align-items:center;gap:10px;padding:10px 12px}
.dvad-ig-h > i{display:grid;width:34px;height:34px;padding:2px;border-radius:50%;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.dvad-ig-h > i span{display:grid;place-items:center;border-radius:50%;background:#fff;color:#1A73E8;font-style:normal;font-weight:700;font-size:13px}
.dvad-ig-h b{display:block;font-size:13.5px}
.dvad-ig-h small{font-size:11.5px;color:#737373}
.dvad-ig-img{display:grid;place-items:center;min-height:190px;padding:24px;background:linear-gradient(160deg,#DDEBF7,#B8D3EC 60%,#9CC2E6);
  font-family:Georgia,serif;font-size:22px;line-height:1.25;color:#1D3F66;text-align:center;overflow-wrap:anywhere}
.dvad-ig-cta{display:flex;justify-content:space-between;padding:12px 14px;background:#EEF4FB;color:#1A5FB4;font-weight:700;font-size:14px}
.dvad-ig-cap{display:-webkit-box;margin:0;padding:10px 14px 14px;overflow:hidden;font-size:13.5px;line-height:1.45;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}

/* ---------- 07 the client ---------- */

.dvad-quote .dvs-h2{margin-bottom:0}
.dvad-q{max-width:1000px;margin:clamp(32px,4vw,48px) 0 0;padding:0 0 0 clamp(18px,2.4vw,32px);border-left:2px solid var(--dvs-violet)}
.dvad-q blockquote{margin:0}
.dvad-q blockquote p{margin:0;font-family:'Archivo',sans-serif;font-weight:500;font-size:clamp(22px,2.5vw,34px);line-height:1.32;
  letter-spacing:-.02em;color:var(--dvs-text)}
.dvad-q figcaption{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dvs-muted)}
.dvad-q figcaption b{color:var(--dvs-soft);font-weight:400}

/* ---------- 08 when not ---------- */

.dvad-fit-l{margin-top:clamp(36px,4.5vw,56px);padding-top:0;border-top:0}

@media (max-width:1100px){
  .dvad-prev{grid-template-columns:minmax(0,1fr)}
  .dvad-ig{max-width:380px}
}
@media (max-width:999px){
  .dvad-bud-grid,.dvad-pk-grid,.dvad-ad-grid{grid-template-columns:minmax(0,1fr)}
  /* one column: the Google preview goes above the fields, so what is typed is seen
     without scrolling past the form; the Instagram preview follows the form */
  .dvad-prev{display:contents}
  .dvad-pg{order:-1}
  .dvad-pi{order:1}
  .dvad-prev .dvl-demo-note{order:2}
}
@media (max-width:760px){
  .dvad-meters{grid-template-columns:minmax(0,1fr)}
  .dvad-pay-tbl tbody th,.dvad-vs-tbl tbody th{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .dvad-plot i{transition:none}
}
/* <<< dvad-ads */

/* >>> dvbr-brand (generated) */
/* ---------------------------------------------------------------------------
   BRANDING (the dvbr- sections), generated by build-branding-page.js.
   On the .dvl base (lojas) and the .dvo tabs (seo); these are only what this
   page adds.
--------------------------------------------------------------------------- */

.dvbr-parts::before{right:-12%;top:18%}
.dvbr-mt-s{background:#0D0A13}.dvbr-mt-s::before{left:-12%;top:20%}
.dvbr-apps{background:#0D0A13}.dvbr-apps::before{left:-12%;top:16%}
.dvbr-reb::before{right:-10%;top:24%}
.dvbr-reg{background:#0D0A13}.dvbr-reg::before{left:20%;top:10%}

.dvbr-src{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet);text-decoration:none}
@media (hover:hover){.dvbr-src:hover{color:var(--dvs-soft)}}
.dvbr-src:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvbr-srcs{display:flex;flex-wrap:wrap;gap:0 22px}
.dvbr-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--dvs-body)}
.dvbr-chips{display:flex;flex-wrap:wrap;gap:8px}
.dvbr-chips .dvl-chip i{border:0}
.dvbr-chips .dvl-chip[aria-pressed="true"]{border-color:var(--dvs-violet);
  background:rgba(180,124,253,.16);color:var(--dvs-text);box-shadow:0 0 30px -14px rgba(180,124,253,.9)}

/* ---------- 02 the parts ---------- */

.dvbr-parts-box{margin-top:clamp(36px,4.5vw,56px)}
.dvbr-tabs{margin-bottom:22px}
.dvbr-panel{display:none;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.dvbr-panel.is-on{display:grid;animation:dvl-in .35s ease both}
.dvbr-focus{position:relative;margin:0;overflow:hidden;border:1px solid var(--dvs-lit);background:#131019}
.dvbr-focus img{display:block;width:100%;height:auto;aspect-ratio:1}
.dvbr-focus i{position:absolute;outline:2px solid var(--dvs-violet);outline-offset:0;box-shadow:0 0 0 2000px rgba(11,9,16,.66),0 0 40px rgba(180,124,253,.6);
  border-radius:4px;pointer-events:none}
.dvbr-panel-t h3{margin:0 0 12px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;color:var(--dvs-text)}
.dvbr-panel-t p{margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--dvs-text)}
.dvbr-panel-t .dvbr-cap{margin:0;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dvs-muted)}
.dvbr-defs{margin-top:clamp(48px,6vw,80px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--dvs-rule)}
.dvbr-defs dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 0}
.dvbr-defs dl > div{padding:20px 22px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvbr-defs dt{font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;color:var(--dvs-text)}
.dvbr-defs dd{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--dvs-body)}

/* ---------- 03 what a manual has: eight pages, drawn ---------- */

.dvbr-mt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(32px,4vw,48px) 0 0;padding:0;list-style:none}
.dvbr-mt li{display:flex;flex-direction:column;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);transition:border-color .2s ease,transform .2s ease}
@media (hover:hover){.dvbr-mt li:hover{border-color:rgba(180,124,253,.6);transform:translateY(-2px)}}
.dvbr-mt p{display:flex;align-items:baseline;gap:10px;margin:0;padding:14px 16px 16px;font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;
  line-height:1.3;letter-spacing:-.01em;color:var(--dvs-text)}
.dvbr-mt-v{position:relative;display:grid;place-items:center;aspect-ratio:1.55;margin:10px 10px 0;border-radius:4px;background:#F3F7F7;color:#0B1F24;
  overflow:hidden;container-type:inline-size;font-family:'Archivo',sans-serif}
.dvbr-lk{display:inline-flex;align-items:center;gap:.35em;font-weight:700;font-size:clamp(11px,9cqi,26px);line-height:1;letter-spacing:-.02em;color:#0B1F24}
.dvbr-lk i,.dvbr-mv .is-ico i,.dvbr-mapp .is-icon i{display:inline-grid;place-items:center;width:1.3em;height:1.3em;border-radius:.3em;background:#0E5E6F;
  color:#FFFFFF;font-style:normal;font-weight:700}
.dvbr-mv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:88%}
.dvbr-mv > span{display:grid;place-items:center;aspect-ratio:1.1;border:1px solid rgba(0,0,0,.1);border-radius:3px}
.dvbr-mv .dvbr-lk{font-size:clamp(8px,4.4cqi,14px)}
.dvbr-mv .is-neg{background:#0B1F24}
.dvbr-mv .is-neg .dvbr-lk{color:#FFFFFF}
.dvbr-mv .is-ico i{font-size:clamp(14px,9cqi,26px)}
.dvbr-mclear{padding:7% 9%;outline:1px dashed #0E5E6F;border-radius:2px;box-shadow:inset 0 0 0 999px rgba(14,94,111,.06)}
.dvbr-mtag{position:absolute;right:8px;bottom:7px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#0E5E6F}
.dvbr-mtag.is-no{color:#A3241B}
.dvbr-msw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:84%}
.dvbr-msw i{display:block;aspect-ratio:1.2;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.dvbr-msw code{display:block;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:clamp(8px,4cqi,11px);color:#0B1F24;opacity:.8}
.dvbr-mct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:84%}
.dvbr-mct b{display:grid;place-items:center;aspect-ratio:1.5;border-radius:3px;font-size:clamp(16px,11cqi,30px);font-weight:700}
.dvbr-mct em{display:block;margin-top:5px;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:clamp(8px,3.8cqi,11px);color:#1E6B45}
.dvbr-mct .is-no em{color:#A3241B}
.dvbr-mty{display:flex;align-items:center;gap:8%;width:80%}
.dvbr-mty b{font-size:clamp(32px,24cqi,64px);line-height:1;font-weight:700;color:#0B1F24}
.dvbr-mty span{display:grid;gap:6px}
.dvbr-mty i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:clamp(8px,4.2cqi,12px);color:#0B1F24;opacity:.75}
.dvbr-mty i:first-child{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(11px,6cqi,18px);opacity:1}
.dvbr-mpat{position:absolute;inset:0;background:radial-gradient(circle at 0 0,#0E5E6F 0 34%,transparent 35%) 0 0/34px 34px,
  radial-gradient(circle at 100% 100%,rgba(14,94,111,.28) 0 34%,transparent 35%) 0 0/34px 34px,#F3F7F7}
.dvbr-mapp{display:flex;align-items:center;gap:10%;width:84%}
.dvbr-mapp .is-card{display:grid;gap:5px;flex:1;padding:10% 9%;border-radius:3px;background:#FFFFFF;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.dvbr-mapp .is-card .dvbr-lk{font-size:clamp(9px,5.6cqi,16px)}
.dvbr-mapp .is-card > i{display:block;height:3px;width:70%;border-radius:2px;background:rgba(11,31,36,.2)}
.dvbr-mapp .is-card > i + i{width:50%}
.dvbr-mapp .is-icon i{width:1.4em;height:1.4em;font-size:clamp(20px,12cqi,40px);border-radius:.32em;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.dvbr-mno .dvbr-lk{transform:scaleX(1.5)}
.dvbr-mno::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1px),#A3241B calc(50% - 1px),#A3241B calc(50% + 1px),transparent calc(50% + 1px))}
.dvbr-mt-n{max-width:80ch;margin:18px 0 0;font-size:14.5px;line-height:1.6;color:var(--dvs-body)}

/* ---------- 05 applications ---------- */

.dvbr-apps-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(36px,4.5vw,56px) 0 0;padding:0;list-style:none}
.dvbr-app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:1px solid var(--dvs-lit);
  background:rgba(19,16,25,.72);color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.dvbr-app[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.1);box-shadow:0 0 44px -16px rgba(180,124,253,.9)}
@media (hover:hover){.dvbr-app:hover{border-color:var(--dvs-violet)}}
.dvbr-app:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvbr-crop{position:relative;display:block;aspect-ratio:1.4;overflow:hidden;background:#131019}
.dvbr-crop img{position:absolute;display:block;max-width:none;height:auto}
.dvbr-app-t{display:block;padding:16px 18px 18px}
.dvbr-app-t b{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;color:var(--dvs-text)}
.dvbr-app-t > span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--dvs-body)}
.dvbr-app-t em{display:block;margin-top:10px;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dvs-muted)}
.dvbr-app-c{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);background:rgba(11,9,16,.62)}
.dvbr-app[aria-pressed="true"] .dvbr-app-c{border-color:var(--dvs-violet);background:var(--dvs-violet)}
.dvbr-app[aria-pressed="true"] .dvbr-app-c::after{content:'';width:11px;height:6px;margin-top:-3px;border-left:2px solid #0B0910;
  border-bottom:2px solid #0B0910;transform:rotate(-45deg)}
.dvbr-apps-f{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:24px}
.dvbr-apps-f p{margin:0;font-size:15.5px;color:var(--dvs-body)}
.dvbr-apps-f a{display:inline-block;min-height:44px;line-height:44px;color:var(--dvs-text);text-decoration:underline;
  text-decoration-color:var(--dvs-violet);text-underline-offset:4px}
@media (hover:hover){.dvbr-apps-f a:hover{color:var(--dvs-soft)}}

/* ---------- 06 rebranding ---------- */

.dvbr-reb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;
  margin-top:clamp(40px,5vw,64px)}
.dvbr-signs ul{margin:16px 0 0;padding:0;list-style:none}
.dvbr-signs li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--dvs-rule);font-size:16.5px;line-height:1.5;color:var(--dvs-text)}
.dvbr-signs li::before{content:'';position:absolute;left:4px;top:23px;width:10px;height:10px;border-radius:50%;background:var(--dvs-violet);
  box-shadow:0 0 12px rgba(180,124,253,.8)}
.dvbr-ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.dvbr-way{padding:22px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvbr-way h3{margin:12px 0 6px;font-family:'Archivo',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvbr-way p{margin:0;font-size:15.5px;line-height:1.55;color:var(--dvs-body)}
.dvbr-study{grid-column:1/-1;margin:0;padding:22px 24px;border-left:2px solid var(--dvs-violet);background:rgba(180,124,253,.06)}
.dvbr-study blockquote{margin:0}
.dvbr-study p{margin:0;font-family:'Archivo',sans-serif;font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:var(--dvs-text)}
.dvbr-study figcaption{margin-top:6px}
.dvbr-go{grid-column:1/-1;justify-self:start;background:transparent}

/* ---------- 07 registration: what you sell, then the classes ---------- */

.dvbr-reg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;
  margin-top:clamp(32px,4vw,48px)}
.dvbr-calc{display:grid;gap:14px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvbr-calc .dvl-k{margin:0}
.dvbr-calc .dvl-chip{font-size:14px}
.dvbr-res{display:flex;align-items:center;gap:14px;margin:4px 0 0;padding-top:16px;border-top:1px solid var(--dvs-rule)}
.dvbr-res b{min-width:1.2ch;font-family:'Archivo',sans-serif;font-weight:700;font-size:52px;line-height:1;color:var(--dvs-soft);font-variant-numeric:tabular-nums}
.dvbr-res > span{display:grid;gap:3px;font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;color:var(--dvs-text)}
.dvbr-res em{font-style:normal;font-family:'Instrument Sans',system-ui,sans-serif;font-weight:400;font-size:14px;color:var(--dvs-muted)}
.dvbr-tot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0}
.dvbr-tot > div{padding:14px 16px;border:1px solid var(--dvs-lit);background:rgba(11,9,16,.5)}
.dvbr-tot dt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet)}
.dvbr-tot dd{margin:6px 0 4px;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;
  color:var(--dvs-text);font-variant-numeric:tabular-nums}
.dvbr-tot p{margin:0;font-size:13px;color:var(--dvs-muted)}
.dvbr-reg-tbl{margin-top:18px}
.dvbr-reg-tbl tbody th{width:18%}
.dvbr-reg-notes{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,3vw,40px)}

@media (max-width:1100px){
  .dvbr-defs dl,.dvbr-apps-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .dvbr-panel,.dvbr-reb-grid,.dvbr-reg-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .dvbr-mt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .dvbr-reg-tbl tbody th{width:auto}
  .dvbr-reg-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .dvbr-defs dl,.dvbr-apps-g,.dvbr-ways,.dvbr-tot{grid-template-columns:minmax(0,1fr)}
  .dvbr-mt{gap:8px}
  .dvbr-mt p{gap:8px;padding:12px 12px 14px;font-size:14.5px}
  .dvbr-mt-v{margin:8px 8px 0}
  .dvbr-mtag{right:6px;bottom:5px;font-size:8.5px}
}
@media (prefers-reduced-motion:reduce){
  .dvbr-mt li{transition:none}
}
/* <<< dvbr-brand */

/* >>> dvpr-precos (generated) */
/* ---------------------------------------------------------------------------
   TABELA DE PREÇOS (the dvpr- sections), generated by build-precos-page.js.
   On the .dvl base (lojas), the .dvm-num cards and the .dvm-lanes moving rows
   (automações); these are only what this page adds.
--------------------------------------------------------------------------- */

.dvpr-tab::before{right:-12%;top:18%}
.dvpr-calc{background:#0D0A13}.dvpr-calc::before{left:-12%;top:20%}
.dvpr-inc-s::before{right:-14%;top:10%}
.dvpr-mo-s{background:#0D0A13}.dvpr-mo-s::before{left:-12%;top:16%}
.dvpr-pay::before{right:-10%;top:24%}
.dvpr-num{background:#0D0A13}.dvpr-num::before{right:-10%;top:30%}

.dvpr-upd{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dvs-soft)}
.dvpr-upd > span{width:8px;height:8px;border-radius:50%;background:#56D39A;box-shadow:0 0 10px rgba(86,211,154,.8)}
.dvs-hero-copy .dvpr-upd{margin-top:18px}
.dvpr-link{display:inline-flex;align-items:center;min-height:44px;color:var(--dvs-text);text-decoration:underline;
  text-decoration-color:var(--dvs-violet);text-underline-offset:4px}
@media (hover:hover){.dvpr-link:hover{color:var(--dvs-soft)}}
.dvpr-link:focus-visible,.dvpr-src:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvpr-note,.dvpr-hint{margin:0;font-size:14.5px;line-height:1.6;color:var(--dvs-body)}
.dvpr-checks{margin:14px 0 0;padding:0;list-style:none}
.dvpr-checks li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--dvs-rule);font-size:16px;color:var(--dvs-text)}
.dvpr-checks li::before{content:'';position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:2px solid var(--dvs-violet);
  border-bottom:2px solid var(--dvs-violet);transform:rotate(-45deg)}
.dvpr-tf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin-top:16px}

/* ---------- 02 the price cards (a real table, drawn as cards) ---------- */

.dvpr-cards{display:block;width:100%;margin-top:clamp(32px,4vw,48px);border-collapse:separate;border-spacing:0}
/* the header row is for screen readers and search engines only: every part of
   it is taken out of the layout, so it cannot widen the page on small phones */
.dvpr-cards thead,.dvpr-cards thead tr,.dvpr-cards thead th{position:absolute;display:block;width:1px;height:1px;margin:0;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dvpr-cards tbody{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dvpr-cards tbody + tbody{margin-top:clamp(40px,5vw,64px)}
.dvpr-cards tbody.is-shops{grid-template-columns:repeat(2,minmax(0,1fr))}
.dvpr-cards tr.is-grp{display:block;grid-column:1/-1}
.dvpr-cards tr.is-grp th{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:0 0 12px;border-bottom:1px solid var(--dvs-rule);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;color:var(--dvs-text);text-align:left}
.dvpr-cards tr.is-grp th span{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dvs-violet)}
.dvpr-card{display:flex;flex-direction:column;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
@media (hover:hover){.dvpr-card:hover{border-color:rgba(180,124,253,.6);transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(180,124,253,.6)}}
.dvpr-card th,.dvpr-card td{display:block;padding:0 20px;border:0;text-align:left;font-weight:400}
.dvpr-card th > b{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.02em;color:var(--dvs-text)}
.dvpr-sub{display:inline-block;margin-top:8px;padding:3px 9px;border:1px solid rgba(180,124,253,.4);border-radius:99px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dvs-soft)}
.dvpr-card .dvpr-p{padding-top:18px}
.dvpr-card .dvpr-p b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(24px,2.1vw,30px);line-height:1.1;letter-spacing:-.03em;
  color:var(--dvs-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.dvpr-card .dvpr-inc{flex:1;padding-top:12px;font-size:14.5px;line-height:1.55;color:var(--dvs-body)}
.dvpr-card .dvpr-go{padding:18px 20px 20px}
.dvpr-go-b{width:100%;justify-content:center;background:transparent}

/* the blueprints: pages and products drawn in violet on a grid */
.dvpr-art{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;aspect-ratio:1.75;margin:10px -10px 18px;
  border:1px solid rgba(180,124,253,.2);overflow:hidden;
  background:linear-gradient(rgba(180,124,253,.07) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(180,124,253,.07) 1px,transparent 1px) 0 0/16px 16px,#110E18}
.dvpr-pg{position:relative;display:block;flex:none;width:22px;height:30px;border:1.5px solid var(--dvs-soft);border-radius:2px;background:rgba(214,188,254,.07)}
.dvpr-pg::before{content:'';position:absolute;left:3px;right:3px;top:3px;height:4px;border-radius:1px;background:rgba(214,188,254,.6)}
.dvpr-pg.is-dash{border-style:dashed;border-color:rgba(214,188,254,.45);background:none}
.dvpr-pg.is-dash::before{opacity:.35}
.dvpr-pg.is-fade{opacity:.3}
.dvpr-pg.is-big{width:64px;height:86px}
.dvpr-pg.is-big::before{left:5px;right:5px;top:5px;height:6px}
.dvpr-pg.is-big > i{position:absolute;left:6px;right:6px;display:block;border-radius:1px;background:rgba(214,188,254,.28)}
.dvpr-pg.is-big > i:nth-child(1){top:17px;height:24px}
.dvpr-pg.is-big > i:nth-child(2){top:47px;height:10px;right:52%}
.dvpr-pg.is-big > i:nth-child(3){top:47px;height:10px;left:52%}
.dvpr-pg.is-big > i:nth-child(4){top:64px;height:12px;background:none;border:1px solid rgba(214,188,254,.5)}
.dvpr-art.is-five .dvpr-pg{width:28px;height:38px}
.dvpr-art.is-twelve{display:grid;grid-template-columns:repeat(6,22px);gap:8px;align-content:center;justify-content:center}
.dvpr-art.is-custom{display:grid;grid-template-columns:repeat(8,16px);gap:6px;align-content:center;justify-content:center}
.dvpr-art.is-custom .dvpr-pg{width:16px;height:22px}
.dvpr-art.is-custom .dvpr-pg::before{left:2px;right:2px;top:2px;height:3px}
.dvpr-more{position:absolute;right:12px;bottom:6px;font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;line-height:1;color:var(--dvs-soft)}
.dvpr-grid{display:grid;grid-template-columns:repeat(3,30px);gap:8px}
.dvpr-prod{position:relative;display:block;width:30px;height:40px;border:1.5px solid var(--dvs-soft);border-radius:3px;background:rgba(214,188,254,.07)}
.dvpr-prod::before{content:'';position:absolute;left:3px;right:3px;top:3px;height:18px;border-radius:2px;background:rgba(214,188,254,.3)}
.dvpr-prod::after{content:'';position:absolute;left:3px;right:9px;bottom:5px;height:3px;border-radius:1px;background:rgba(214,188,254,.6)}
.dvpr-inf{margin-left:10px;font-family:'Archivo',sans-serif;font-weight:700;font-size:40px;line-height:1;color:var(--dvs-soft)}
.dvpr-filt{display:grid;gap:7px;width:46px;padding:8px;border:1.5px dashed rgba(214,188,254,.45);border-radius:3px}
.dvpr-filt > i{display:block;height:4px;border-radius:1px;background:rgba(214,188,254,.5)}
.dvpr-filt > i:nth-child(2n){width:65%}
.dvpr-nodes{display:grid;gap:9px;margin-left:8px}
.dvpr-nodes > i{position:relative;display:block;width:14px;height:14px;border:1.5px solid var(--dvs-soft);border-radius:50%}
.dvpr-nodes > i::before{content:'';position:absolute;right:100%;top:50%;width:10px;height:1.5px;margin-top:-.75px;background:var(--dvs-soft)}
.dvpr-cards tbody.is-shops .dvpr-art{aspect-ratio:3.4}

/* ---------- 03 the calculator ---------- */

.dvpr-calc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(32px,4vw,48px)}
.dvpr-ctl{display:grid;gap:14px}
.dvpr-ctl .dvl-k{margin:8px 0 0}
.dvpr-seg{display:flex;flex-wrap:wrap;gap:8px}
.dvpr-seg .dvl-chip[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.16);color:var(--dvs-text);
  box-shadow:0 0 30px -14px rgba(180,124,253,.9)}
.dvpr-grp{display:grid;gap:14px}
.dvpr-grp.is-off{display:none}
.dvpr-pages{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 12px;padding:18px 20px;border:1px solid var(--dvs-lit);
  background:rgba(19,16,25,.72);cursor:pointer}
.dvpr-pages .dvl-k{margin:0 !important}
.dvpr-pages b{font-family:'Archivo',sans-serif;font-size:22px;font-weight:700;color:var(--dvs-soft);font-variant-numeric:tabular-nums}
.dvpr-pages input{grid-column:1/-1;width:100%;height:44px;margin:0;background:none;accent-color:var(--dvs-violet);cursor:pointer}
.dvpr-xs{display:flex;flex-wrap:wrap;gap:8px}
.dvpr-x{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 12px;border:1px solid var(--dvs-lit);border-radius:99px;
  background:rgba(19,16,25,.72);color:var(--dvs-body);font:inherit;font-size:14.5px;line-height:1.3;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.dvpr-x i{position:relative;flex:none;width:16px;height:16px;border:1px solid rgba(255,255,255,.4);border-radius:4px}
.dvpr-x[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.14);color:var(--dvs-text)}
.dvpr-x[aria-pressed="true"] i{border-color:var(--dvs-violet);background:var(--dvs-violet)}
.dvpr-x[aria-pressed="true"] i::after{content:'';position:absolute;left:4px;top:3px;width:7px;height:4px;border-left:2px solid #0B0910;
  border-bottom:2px solid #0B0910;transform:rotate(-45deg)}
.dvpr-x.is-inc{cursor:default;border-style:dashed}
.dvpr-x.is-inc[aria-pressed="true"] i{border-color:#56D39A;background:#56D39A}
@media (hover:hover){.dvpr-x:not(.is-inc):hover{border-color:var(--dvs-violet);color:var(--dvs-text)}}
.dvpr-x:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvpr-ctl .dvpr-hint{margin-top:4px;color:var(--dvs-muted)}
.dvpr-bar{display:none}
.dvpr-res{position:sticky;top:104px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvpr-res .dvl-k{margin:0 0 8px}
.dvpr-total{margin:0;font-family:'Archivo',sans-serif}
.dvpr-total b{display:block;font-weight:700;font-size:clamp(32px,3.4vw,44px);line-height:1.05;letter-spacing:-.035em;color:var(--dvs-soft);
  font-variant-numeric:tabular-nums}
.dvpr-mline{margin:10px 0 0;font-size:14.5px;color:var(--dvs-body)}
.dvpr-res .dvpr-in-k{margin-top:24px}
.dvpr-lines{margin:0;padding:0;list-style:none}
.dvpr-lines li{position:relative;padding:9px 0 9px 24px;border-bottom:1px solid var(--dvs-rule);font-size:15px;color:var(--dvs-text)}
.dvpr-lines li::before{content:'';position:absolute;left:2px;top:16px;width:9px;height:5px;border-left:2px solid var(--dvs-violet);
  border-bottom:2px solid var(--dvs-violet);transform:rotate(-45deg)}
.dvpr-lines li em{font-style:normal;color:#56D39A}
.dvpr-disc{margin:16px 0 18px;font-size:13.5px;color:var(--dvs-muted)}

/* ---------- 04 always included: two moving rows (the .dvm-lanes of automações) ---------- */

.dvpr-lane-k{display:flex;align-items:baseline;gap:12px;margin:clamp(28px,3.4vw,40px) 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvpr-lane-k em{font-style:normal;color:var(--dvs-muted)}
.dvpr-lane-k + .dvpr-lanes{margin-top:14px}
.dvpr-lanes .dvm-track li{height:58px;gap:12px;padding:0 20px 0 12px}
.dvpr-lanes .dvm-track svg{fill:none;stroke:var(--dvs-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dvpr-ico{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(180,124,253,.35);
  background:rgba(180,124,253,.12)}
.dvpr-inc-s .dvpr-note{margin-top:22px}

/* ---------- 05 after launch ---------- */

.dvpr-mo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-top:clamp(32px,4vw,48px)}
.dvpr-mo{padding:clamp(22px,2.4vw,30px);border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvpr-mo.is-on{border-color:rgba(180,124,253,.5);background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));
  box-shadow:0 0 60px -30px rgba(180,124,253,.6)}
.dvpr-mo .dvl-k{margin:0}
.dvpr-mo-p{display:flex;align-items:baseline;gap:8px;margin:10px 0 0;color:var(--dvs-body);font-size:15px}
.dvpr-mo-p b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(44px,4.6vw,60px);letter-spacing:-.04em;line-height:1;color:var(--dvs-soft)}
.dvpr-mo-n{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--dvs-body)}
.dvpr-mo-n.dvpr-ssl{margin-top:22px;padding-top:16px;border-top:1px solid var(--dvs-rule);font-size:14px}
.dvpr-mo-s .dvpr-tf{margin-top:12px}

/* ---------- 06 payment ---------- */

.dvpr-pay-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:clamp(32px,4vw,48px)}
.dvpr-way{padding:clamp(22px,2.6vw,32px);border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvpr-way .dvl-k{margin:0}
.dvpr-way h3{margin:10px 0 24px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(20px,1.9vw,24px);letter-spacing:-.02em;color:var(--dvs-text)}
.dvpr-tl{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.dvpr-tl::before{content:'';position:absolute;left:16.6%;right:16.6%;top:13px;height:2px;background:var(--dvs-rule)}
.dvpr-tl li{position:relative;display:grid;justify-items:center;gap:4px;padding-top:36px;text-align:center}
.dvpr-tl li::before{content:'';position:absolute;top:6px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:#0D0A13;border:2px solid var(--dvs-lit)}
.dvpr-tl li.is-pay::before{background:var(--dvs-violet);border-color:var(--dvs-violet);box-shadow:0 0 14px rgba(180,124,253,.9)}
.dvpr-tl b{font-size:14.5px;font-weight:600;color:var(--dvs-text)}
.dvpr-tl span{font-size:13px;color:var(--dvs-muted)}
.dvpr-tl li.is-pay span{color:var(--dvs-soft)}

@media (max-width:1100px){
  .dvpr-cards tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .dvpr-calc-grid{grid-template-columns:minmax(0,1fr)}
  .dvpr-res{position:static}
  /* the estimate follows the reader down the options, so no choice is made blind */
  .dvpr-bar{position:sticky;bottom:0;z-index:4;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:4px calc(-1 * var(--gutter,20px)) 0;
    padding:14px var(--gutter,20px);background:rgba(11,9,16,.96);border-top:1px solid rgba(180,124,253,.6);box-shadow:0 -12px 30px -12px rgba(0,0,0,.8)}
  .dvpr-bar span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
  .dvpr-bar b{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;color:var(--dvs-soft);white-space:nowrap}
}
@media (max-width:760px){
  .dvpr-pay-grid,.dvpr-mo-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .dvpr-cards tbody,.dvpr-cards tbody.is-shops{grid-template-columns:minmax(0,1fr)}
  .dvpr-cards tbody.is-shops .dvpr-art{aspect-ratio:2.4}
  .dvpr-lanes .dvm-track li{height:52px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .dvpr-card{transition:none}
}
/* <<< dvpr-precos */

/* >>> dvap-apps (generated) */
/* ---------------------------------------------------------------------------
   APLICAÇÕES WEB (the dvap- sections), generated by build-aplicacoes-page.js.
   On the .dvl base (lojas), the .dvo tabs (seo) and the .dvm-uses / .dvm-num
   cards (automações); these are only what this page adds.
--------------------------------------------------------------------------- */

.dvap-chk::before{right:-12%;top:18%}
.dvap-types{background:#0D0A13}.dvap-types::before{left:-12%;top:20%}
.dvap-roles::before{right:-14%;top:10%}
.dvap-num{background:#0D0A13}.dvap-num::before{left:-12%;top:16%}
.dvap-inc::before{right:-10%;top:24%}
.dvap-price{background:#0D0A13}.dvap-price::before{left:-10%;top:30%}

/* ---------- 02 do you need one ---------- */

.dvap-chk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.dvap-says{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dvap-say{display:flex;align-items:flex-start;gap:12px;min-height:60px;padding:15px 16px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72);
  color:var(--dvs-body);font:inherit;font-size:15.5px;line-height:1.45;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.dvap-say i{position:relative;flex:none;width:18px;height:18px;margin-top:2px;border:1px solid rgba(255,255,255,.4);border-radius:4px}
.dvap-say[aria-pressed="true"]{border-color:var(--dvs-violet);background:rgba(180,124,253,.14);color:var(--dvs-text)}
.dvap-say[aria-pressed="true"] i{border-color:var(--dvs-violet);background:var(--dvs-violet)}
.dvap-say[aria-pressed="true"] i::after{content:'';position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid #0B0910;
  border-bottom:2px solid #0B0910;transform:rotate(-45deg)}
@media (hover:hover){.dvap-say:hover{border-color:var(--dvs-violet);color:var(--dvs-text)}}
.dvap-say:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvap-res-box{position:sticky;top:104px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(180,124,253,.5);
  background:linear-gradient(210deg,rgba(40,28,64,.62),rgba(14,11,20,.82));box-shadow:0 0 70px -30px rgba(180,124,253,.6)}
.dvap-res-box > .dvl-k{margin:0 0 12px}
.dvap-res{display:none}
.dvap-res.is-on{display:block;animation:dvl-in .3s ease both}
.dvap-res h3{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.03em;color:var(--dvs-soft)}
.dvap-res p{margin:12px 0 20px;font-size:16px;line-height:1.55;color:var(--dvs-text)}
.dvap-res[data-res="none"] p{margin-bottom:0;color:var(--dvs-body)}
.dvap-meter{display:grid;gap:10px;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--dvs-rule);list-style:none}
.dvap-meter li{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dvs-muted)}
.dvap-meter i{display:block;height:6px;background:var(--dvs-rule)}
.dvap-meter b{display:block;width:0;height:100%;background:var(--dvs-violet);transition:width .35s ease}
.dvap-defs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:clamp(36px,4.5vw,56px) 0 0}
.dvap-defs > div{display:flex;flex-direction:column;padding:20px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvap-defs > div.is-here{border-color:rgba(180,124,253,.5)}
.dvm-uses-g .dvap-inst{margin-top:12px;padding-top:10px;border-top:1px dashed var(--dvs-rule);font-size:14px;color:var(--dvs-muted)}
.dvap-defs dt{font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvap-defs dd{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--dvs-body)}
/* only a second line (the link, or "this page") goes to the foot; a card with
   the description alone keeps it at the top */
.dvap-defs dd + dd{margin-top:auto;padding-top:8px}
.dvap-defs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--dvs-soft);text-decoration:underline;
  text-decoration-color:var(--dvs-violet);text-underline-offset:4px}
@media (hover:hover){.dvap-defs a:hover{color:var(--dvs-text)}}
.dvap-defs a:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}
.dvap-defs .dvap-here{display:flex;align-items:center;min-height:44px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dvs-violet)}

/* ---------- 04 accounts and permissions ---------- */

.dvap-roles-box{margin-top:clamp(32px,4vw,48px)}
.dvap-tabs{margin-bottom:24px}
.dvap-roles-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.dvap-app-fig{margin:0;min-width:0}
.dvap-app-fig .dvl-demo-note{margin-top:14px}
.dvap-app{overflow:hidden;border-radius:14px;background:#FFFFFF;color:#1F1B2A;font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.dvap-app-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:14px 18px;border-bottom:1px solid #ECE9F2}
.dvap-app-bar > b{font-size:15px}
/* the demo app keeps its own face: the section's mono label styles must not reach it */
.dvap-who{display:none;align-items:center;gap:8px;font-family:Arial,Helvetica,sans-serif;font-size:13px;letter-spacing:0;text-transform:none;color:#4C465C}
.dvap-who.is-on{display:inline-flex}
.dvap-who em{padding:3px 8px;border-radius:99px;background:#EDE7FB;color:#5B3FC4;font-family:Arial,Helvetica,sans-serif;font-style:normal;
  font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none}
.dvap-rows{margin:0;padding:4px 0;list-style:none}
.dvap-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:14px;min-height:48px;padding:10px 18px;
  border-bottom:1px solid #F3F1F7;font-size:14px;line-height:1.4;transition:background .3s ease}
.dvap-rows li:last-child{border-bottom:0}
.dvap-rows li > span{color:#7A7390}
.dvap-rows li > b{font-weight:700;color:#1F1B2A;animation:dvl-in .3s ease both}
.dvap-rows li > em{display:none;align-items:center;gap:8px;font-style:normal;color:#A59FB5}
.dvap-rows li > em::before{content:'';width:9px;height:8px;margin-top:4px;border:1.5px solid #A59FB5;border-radius:2px;
  box-shadow:0 -5px 0 -3px #fff,0 -6px 0 -2px #A59FB5}
.dvap-rows li.is-off{background:#FAF9FC}
.dvap-rows li.is-off > b{display:none}
.dvap-rows li.is-off > em{display:inline-flex}
.dvap-rt{display:none}
.dvap-rt.is-on{display:block;animation:dvl-in .3s ease both}
.dvap-count{display:flex;align-items:baseline;gap:10px;margin:0}
.dvap-count b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(56px,6vw,88px);line-height:.9;letter-spacing:-.05em;color:var(--dvs-soft)}
.dvap-count span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvap-rt h3{margin:18px 0 0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;color:var(--dvs-text)}
.dvap-rt p:last-child{margin:8px 0 0;font-size:16.5px;line-height:1.55;color:var(--dvs-text)}
.dvap-role-n{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--dvs-rule);font-size:15px;line-height:1.55;color:var(--dvs-body)}

/* ---------- 06 what goes in ---------- */

.dvap-inc-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(32px,4vw,48px) 0 0;padding:0;list-style:none}
.dvap-inc-g li{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvap-inc-g b{font-family:'Archivo',sans-serif;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.02em;color:var(--dvs-text)}
.dvap-inc-g p{margin:0;font-size:14.5px;line-height:1.5;color:var(--dvs-body)}

/* ---------- 07 what moves the price ---------- */

.dvap-ftbl{width:100%;margin-top:clamp(32px,4vw,48px);border-collapse:collapse;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvap-ftbl th,.dvap-ftbl td{padding:16px 20px;border-bottom:1px solid var(--dvs-rule);text-align:left;vertical-align:top;font-size:15.5px;line-height:1.5}
.dvap-ftbl tbody tr:last-child > *{border-bottom:0}
.dvap-ftbl thead th{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dvs-violet);background:rgba(180,124,253,.06)}
.dvap-ftbl tbody th{width:24%;font-family:'Archivo',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvap-ftbl td{color:var(--dvs-body)}
.dvap-ftbl td:last-child{color:var(--dvs-text)}
@media (max-width:760px){
  /* one card per factor; the header row stays for screen readers only, taken
     out of the layout so it cannot widen the page */
  .dvap-ftbl thead,.dvap-ftbl thead tr,.dvap-ftbl thead th{position:absolute;display:block;width:1px;height:1px;margin:0;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .dvap-ftbl,.dvap-ftbl tbody,.dvap-ftbl tr,.dvap-ftbl tbody th,.dvap-ftbl td{display:block;width:auto}
  .dvap-ftbl tr{border-bottom:1px solid var(--dvs-lit)}
  .dvap-ftbl tbody tr:last-child{border-bottom:0}
  .dvap-ftbl tbody th,.dvap-ftbl td{padding:8px 16px;border-bottom:0}
  .dvap-ftbl tbody th{padding-top:16px}
  .dvap-ftbl td:last-child{padding-bottom:16px}
  .dvap-ftbl td::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--dvs-violet)}
}
.dvap-sub{margin:clamp(40px,5vw,64px) 0 0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;
  color:var(--dvs-text)}
.dvap-sub + .dvm-uses-g{margin-top:20px}
.dvap-phases{margin-top:clamp(36px,4.5vw,56px)}
.dvap-phases-h{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;color:var(--dvs-text)}
.dvap-phases-l{margin:8px 0 0;max-width:62ch;font-size:16px;line-height:1.55;color:var(--dvs-body)}
.dvap-ph{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0 0;padding:0;list-style:none}
.dvap-ph::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--dvs-violet),rgba(180,124,253,.15))}
.dvap-ph li{position:relative;padding:34px 0 0}
.dvap-ph li::before{content:'';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#0D0A13;border:2px solid var(--dvs-lit)}
.dvap-ph li.is-first::before{background:var(--dvs-violet);border-color:var(--dvs-violet);box-shadow:0 0 14px rgba(180,124,253,.9)}
.dvap-ph b{display:block;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvap-ph span{display:block;margin-top:6px;font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--dvs-text)}
.dvap-ph p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--dvs-body)}

@media (max-width:1100px){
  .dvap-defs,.dvap-inc-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .dvap-chk-grid,.dvap-roles-grid{grid-template-columns:minmax(0,1fr)}
  .dvap-res-box{position:static}
}
@media (max-width:760px){
  .dvap-says{grid-template-columns:minmax(0,1fr)}
  .dvap-ph{grid-template-columns:minmax(0,1fr);gap:0}
  .dvap-ph::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--dvs-violet),rgba(180,124,253,.15))}
  .dvap-ph li{padding:0 0 22px 36px}
  .dvap-ph li::before{top:2px}
}
@media (max-width:600px){
  .dvap-defs,.dvap-inc-g{grid-template-columns:minmax(0,1fr)}
  .dvap-rows li{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 14px}
  .dvap-app-bar{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .dvap-res.is-on,.dvap-rt.is-on,.dvap-rows li > b{animation:none}
  .dvap-meter b{transition:none}
}
/* <<< dvap-apps */

/* >>> dvh-header (generated) */
/* The site header (dvh-), generated by tools/build-header.js. Edit that file.
   The same floating glass pill the Masthead restyle (rule 19) made, now plain
   HTML with real links and a services menu. The blog lifts these rules. */
.dvh{position:relative;max-width:1440px;margin:0 auto;font-family:'Instrument Sans',system-ui,sans-serif}
.dvh *,.dvh-menu *{box-sizing:border-box}
.dvh-in{position:relative;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:12px;
  min-height:62px;padding:0 8px 0 16px;border:1px solid rgba(255,255,255,.15);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 46%,rgba(180,124,253,.06) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 24px rgba(180,124,253,.08),0 20px 54px rgba(7,5,9,.5),0 3px 10px rgba(7,5,9,.35);
  transition:background .3s ease}
/* once the page moves under it, a darker glass keeps the links readable over any section */
html.dvh-scrolled .dvh-in{background:linear-gradient(180deg,rgba(40,31,56,.84) 0%,rgba(19,16,25,.88) 100%)}
.dvh-in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 220% at 18% -60%,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 55%)}
.dvh-in > *{position:relative;z-index:1}
.dvh-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;justify-self:start;font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:-.02em;color:#F4F2EE;text-decoration:none}
/* the pill keeps about 12px of air above and below the logo */
.dvh .dvh-logo img,.dvh-menu .dvh-logo img{display:block;width:auto;max-width:none;height:38px}
@media (max-width:1023px){.dvh .dvh-logo img{height:34px}}
.dvh-nav{display:flex;align-items:center;gap:2px}
.dvh .dvh-l,.dvh .dvh-dd-b{display:inline-flex;align-items:center;gap:8px;height:40px;min-height:0;margin:0;padding:0 15px;border:0;border-radius:999px;background:none;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:rgba(244,242,238,.74);text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.dvh .dvh-l:hover,.dvh .dvh-dd-b:hover{color:#F4F2EE;background:rgba(255,255,255,.07)}
.dvh .dvh-l[aria-current],.dvh .dvh-dd-b[aria-current]{color:#F4F2EE;background:rgba(255,255,255,.1)}
html.dvh-svc-open .dvh .dvh-dd-b{color:#F4F2EE;background:rgba(255,255,255,.1)}
.dvh-chev{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
html.dvh-svc-open .dvh-chev{transform:rotate(180deg)}
.dvh-cta{display:inline-flex;align-items:center;gap:12px;justify-self:end;height:44px;padding:0 20px;border-radius:999px;background:rgba(180,124,253,.92);
  color:#0B0910;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 14px rgba(123,69,214,.4);transition:background .28s ease}
.dvh-cta:hover{background:#C79BFF}
.dvh a:focus-visible,.dvh button:focus-visible,.dvh-menu a:focus-visible,.dvh-menu button:focus-visible{outline:2px solid #D6BCFE;outline-offset:3px}

/* the services menu */
.dvh-dd{position:relative}
.dvh-dd-p{position:absolute;top:calc(100% + 24px);left:50%;z-index:2;width:min(660px,calc(100vw - 48px));padding:10px;
  border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(17,14,23,.97);
  box-shadow:0 34px 80px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
/* a bridge over the gap, so the pointer can travel from the button to the panel */
.dvh-dd-p::before{content:"";position:absolute;left:0;right:0;top:-36px;height:36px}
html.dvh-svc-open .dvh-dd-p{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.dvh-dd-l{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;padding:0;list-style:none}
.dvh-dd-l a{display:grid;grid-template-columns:26px 1fr;column-gap:6px;row-gap:3px;height:100%;padding:13px 14px;border-radius:16px;text-decoration:none;
  transition:background .18s ease}
.dvh-dd-l a:hover,.dvh-dd-l a:focus-visible{background:rgba(255,255,255,.06)}
.dvh-dd-l a[aria-current]{background:rgba(180,124,253,.12)}
.dvh-dd-l i{grid-row:span 2;padding-top:3px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;font-size:10.5px;letter-spacing:.08em;color:#B47CFD}
.dvh-dd-l b{font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.015em;line-height:1.25;color:#F4F2EE}
.dvh-dd-l span{font-size:13.5px;line-height:1.4;color:rgba(244,242,238,.66)}
.dvh-dd-f{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px;padding:14px 16px;border-radius:16px;
  background:rgba(180,124,253,.1);border:1px solid rgba(180,124,253,.22);text-decoration:none;transition:background .18s ease}
.dvh-dd-f:hover{background:rgba(180,124,253,.17)}
.dvh-dd-f span{font-size:14px;color:rgba(244,242,238,.8)}
.dvh-dd-f b{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#D6BCFE;white-space:nowrap}

/* the phone menu */
.dvh-menu-b{display:none}
.dvh-menu{position:fixed;top:0;left:0;z-index:95;width:100vw;height:100vh;height:100dvh;display:none;flex-direction:column;overflow-y:auto;
  overscroll-behavior:contain;padding:0 var(--gutter,20px) 24px;background:#0B0910;font-family:'Instrument Sans',system-ui,sans-serif}
html.dvh-menu-open{overflow:hidden}
html.dvh-menu-open .dvh-menu{display:flex}
.dvh-menu-hd{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:68px;border-bottom:1px solid #241F2E}
.dvh-menu .dvh-menu-x{min-height:44px;padding:0 4px;border:0;background:none;color:#F4F2EE;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.dvh-menu .dvh-menu-k{margin:24px 0 4px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B47CFD}
.dvh-menu .dvh-menu-svc{display:grid;grid-template-columns:1fr;column-gap:28px;margin:0;padding:0;list-style:none}
.dvh-menu .dvh-menu-svc a{display:flex;align-items:center;min-height:50px;padding:10px 0;border-bottom:1px solid #241F2E;font-family:'Archivo',system-ui,sans-serif;font-weight:500;
  font-size:19px;letter-spacing:-.02em;line-height:1.2;color:#F4F2EE;text-decoration:none}
.dvh-menu .dvh-menu-main{margin:24px 0 28px;padding:0;list-style:none}
.dvh-menu .dvh-menu-main a{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid #241F2E;font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  font-size:clamp(28px,8vw,38px);line-height:1.1;letter-spacing:-.035em;color:#F4F2EE;text-decoration:none}
.dvh-menu .dvh-menu-main a b{flex:none;width:22px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:11px;letter-spacing:.1em;color:#B47CFD}
.dvh-menu a[aria-current]{color:#D6BCFE}
.dvh-menu .dvh-menu-cta{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:54px;margin-top:auto;padding:0 22px;border-radius:999px;
  background:#B47CFD;color:#0B0910;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.dvh-menu .dvh-menu-c{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin:10px 0 0}
.dvh-menu .dvh-menu-c a{display:inline-flex;align-items:center;min-height:44px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.06em;color:rgba(244,242,238,.72);text-decoration:none}
@media (min-width:560px){.dvh-menu .dvh-menu-svc{grid-template-columns:1fr 1fr}}

/* a narrower desktop keeps the whole row: tighter links, the same order */
@media (max-width:1239px){
  .dvh .dvh-l,.dvh .dvh-dd-b{padding:0 11px;letter-spacing:.12em}
  .dvh-cta{padding:0 16px}
}
/* below 1024 the pill holds the logo and the menu button */
@media (max-width:1023px){
  .dvh-in{grid-template-columns:minmax(0,1fr) auto;min-height:56px;padding:0 6px 0 16px}
  .dvh-nav,.dvh .dvh-cta{display:none}
  .dvh .dvh-menu-b{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.16);
    border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);color:#F4F2EE;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
}
/* <<< dvh-header */

/* >>> dvmt-manut (generated) */
/* ---------------------------------------------------------------------------
   MANUTENÇÃO (the dvmt- sections), generated by build-manutencao-page.js.
   It reuses the lojas base, the automações uses and numbers cards and the
   aplicações inclusions, factor table and phases (named without their class
   prefixes here, because each builder refuses its prefix in other blocks);
   these are only what this page adds.
--------------------------------------------------------------------------- */

.dvmt-what::before{right:-12%;top:18%}
.dvmt-inc{background:#0D0A13}.dvmt-inc::before{left:-12%;top:20%}
.dvmt-why::before{right:-14%;top:10%}
.dvmt-price{background:#0D0A13}.dvmt-price::before{left:-10%;top:30%}
.dvmt-own::before{right:-10%;top:24%}
.dvmt-urg{background:#0D0A13}.dvmt-urg::before{left:-10%;top:20%}

/* ---------- 02 what we maintain ---------- */
.dvmt-kinds{grid-template-columns:repeat(4,minmax(0,1fr))}
.dvmt-kinds li{display:flex;flex-direction:column}
.dvmt-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;padding-top:10px;color:var(--dvs-soft);
  text-decoration:underline;text-decoration-color:var(--dvs-violet);text-underline-offset:4px}
@media (hover:hover){.dvmt-more:hover{color:var(--dvs-text)}}
.dvmt-more:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}

/* ---------- 03 maintenance and evolution ---------- */
.dvmt-twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3.5vw,44px)}
.dvmt-tw{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,30px);border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvmt-tw.is-keep{border-color:rgba(180,124,253,.5);background:linear-gradient(210deg,rgba(40,28,64,.55),rgba(14,11,20,.8))}
.dvmt-tw h3{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;color:var(--dvs-text)}
.dvmt-tw p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--dvs-body)}
.dvmt-tw .dvl-k{margin:0 0 10px}
.dvmt-tw .dvmt-tw-f{margin-top:auto;padding-top:16px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dvs-violet)}

/* ---------- 05 the price example and the ways to pay ---------- */
.dvmt-eg{margin:20px 0 0;max-width:72ch;padding:14px 18px;border-left:3px solid var(--dvs-violet);background:rgba(180,124,253,.07);
  font-size:15.5px;line-height:1.55;color:var(--dvs-text)}
.dvmt-pay{margin-top:clamp(36px,4.5vw,56px)}
.dvmt-pay-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 0;padding:0;list-style:none}
.dvmt-pay-g li{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--dvs-lit);background:rgba(19,16,25,.72)}
.dvmt-pay-g li:nth-child(2){border-color:rgba(180,124,253,.5)}
.dvmt-pay-g b{font-family:'Archivo',sans-serif;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.02em;color:var(--dvs-text)}
.dvmt-pay-g p{margin:0;font-size:14.5px;line-height:1.5;color:var(--dvs-body)}

/* ---------- 06 who owns the site ---------- */
.dvmt-own-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(32px,4vw,48px) 0 0}
.dvmt-own-g > div{padding:20px;border:1px solid var(--dvs-lit);border-top:2px solid var(--dvs-violet);background:rgba(19,16,25,.72)}
.dvmt-own-g dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dvs-violet)}
.dvmt-own-g dd{margin:10px 0 0;font-family:'Archivo',sans-serif;font-weight:600;font-size:17px;line-height:1.35;letter-spacing:-.015em;color:var(--dvs-text)}
.dvmt-own-f{margin:22px 0 0}
.dvmt-own-f a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--dvs-soft);text-decoration:underline;
  text-decoration-color:var(--dvs-violet);text-underline-offset:4px}
.dvmt-own-f a:focus-visible{outline:2px solid var(--dvs-soft);outline-offset:2px}

/* ---------- 07 down or attacked ---------- */
.dvmt-urg-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(24px,3vw,44px);border:1px solid rgba(255,162,63,.45);background:linear-gradient(210deg,rgba(64,40,20,.35),rgba(14,11,20,.85));
  box-shadow:0 0 80px -34px rgba(255,162,63,.5)}
.dvmt-urg-copy .dvl-k{color:#FFA23F}
.dvmt-urg-copy .dvs-h2{margin:10px 0 0}
.dvmt-urg-copy > p:not(.dvl-k){margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--dvs-body)}
.dvmt-urg-copy .dvs-ctas{margin-top:22px}
.dvmt-urg-ph{margin-top:6px}
.dvmt-urg-ph li.is-first::before{background:#FFA23F;border-color:#FFA23F;box-shadow:0 0 14px rgba(255,162,63,.9)}
.dvmt-urg-ph::before{background:linear-gradient(90deg,#FFA23F,rgba(255,162,63,.15))}
.dvmt-urg-ph b{color:#FFA23F}

@media (max-width:1100px){
  .dvmt-kinds,.dvmt-pay-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvmt-own-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dvmt-urg-box{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .dvmt-urg-ph::before{background:linear-gradient(180deg,#FFA23F,rgba(255,162,63,.15))}
}
@media (max-width:600px){
  .dvmt-kinds,.dvmt-pay-g,.dvmt-twin,.dvmt-own-g{grid-template-columns:minmax(0,1fr)}
}
/* <<< dvmt-manut */