/* DS 1.2 specimens (Federico 10-23: "too boring beige. the landing is also not that boring.")
   The landing's energy on content pages, not only its tokens: a real hero world (sky dome, halftone clouds, the
   landing's hills, Scout), landing-scale type, and a rhythm of grounds (paper, halftone sky, meadow green, one deep
   Edge-blue band). Art is CSS backgrounds on existing elements (no new requests above the fold besides the sky),
   lazy below the fold by nature of background painting, and no infinite animation: idle CPU stays at zero.
   Loaded only on DS12_PAGES (tools/stamp_chrome.py), after edge-ds1-11.css. */

:root {
  --w12-paper: #f5f3eb; --w12-ink: #16251e; --w12-muted: #56645a; --w12-blue: #154cff; --w12-deep: #0b2a9e;
  --w12-meadow: #334626; --w12-meadow-2: #2a3b1f; --w12-meadow-ink: #eef2e6; --w12-meadow-muted: #c3cfb6;
  --w12-sky: #2e78b1; --w12-gutter: max(16px, calc(50vw - 600px));
}
html:root:not(#ds12) body { overflow-x: clip; }
/* the DS1.1 dome on body::after gives way to the hero worlds below */
html:root:not(#ds12) body::after { content: none !important; display: none !important; }

/* full-bleed grounds: a section paints its band edge to edge without changing its own width */
html:root:not(#ds12) .w12-band { position: relative; isolation: isolate; }
html:root:not(#ds12) .w12-band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none; }

/* Scout: the landing's pixel pilot. One short arrival, then still (no idle animation). */
@keyframes w12-arrive { from { transform: translate(-60px, 26px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes w12-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================== SKILL PAGE (German Taxes) ============================== */
html:root:not(#ds12) .v3-hero.skill-hero { position: relative; isolation: isolate; }
/* the world behind the hero: dome top right, the landing's hills across the bottom, full bleed */
html:root:not(#ds12) .v3-hero.skill-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * var(--hh, 72px)) calc(50% - 50vw) 0;
  background:
    linear-gradient(180deg, transparent calc(100% - 90px), var(--w12-meadow)),
    url("/assets/kit/v3/hills-near.webp") center bottom / max(1800px, 100vw) 300px no-repeat,
    url("/assets/kit/v3/hills-far.webp") center calc(100% - 120px) / max(1800px, 100vw) 260px no-repeat,
    url("/assets/kit/sky.webp") right max(-40px, calc(50vw - 760px)) top 40px / clamp(420px, 44vw, 660px) auto no-repeat;
}
html:root:not(#ds12) .v3-hero .full { min-height: min(900px, calc(100svh - 8px)); padding: 40px 0 300px; align-items: start; gap: 56px; }
html:root:not(#ds12) .v3-hero .v3-copy { padding-top: 34px; }
html:root:not(#ds12) .v3-hero h1 {
  line-height: .98 !important; letter-spacing: -.045em !important;
  font-weight: 500 !important; margin: 26px 0 22px !important; max-width: 9.5ch;
}
html:root:not(#ds12) .v3-hero .lede { font-size: 21px !important; max-width: 27ch !important; color: var(--w12-muted) !important; }
/* the skill's own visual floats on the dome; Scout lands on it */
html:root:not(#ds12) .v3-hero .v3-fig { position: relative; margin-top: 132px; }
html:root:not(#ds12) .v3-hero .v3-fig .res { box-shadow: 0 2px 0 rgba(22,37,30,.06), 0 30px 70px -24px rgba(11,42,110,.45) !important; }
html:root:not(#ds12) .v3-hero .v3-fig::before {
  content: ""; position: absolute; z-index: 2; left: -58px; top: -129px; width: 124px; height: 105px; pointer-events: none;
  /* Plane and Scout fully above the card with a 24px gap, nothing clipped, no outline; Scout's feet on the plane's top
     edge (Federico 10-24). Plane 120x65 at y 40 (viewBox 200x108); Scout 44px at x 58, feet at y 46. */
  background: url("/assets/kit/scout.svg") 58px 6px / 44px 44px no-repeat, url("/assets/kit/paper-plane-seat.svg") 0 40px / 120px 65px no-repeat;
  filter: drop-shadow(0 10px 12px rgba(13,42,106,.22));
}
@media (prefers-reduced-motion: no-preference) {
  html:root:not(#ds12) .v3-hero .v3-fig::before { animation: w12-arrive 1.1s cubic-bezier(.2,.75,.2,1) .35s both; }
  html:root:not(#ds12) .v3-hero .v3-fig .res { animation: w12-rise .9s cubic-bezier(.2,.75,.2,1) .1s both; }
}
html:root:not(#ds12) .v3-hero .cue { color: var(--w12-meadow-ink) !important; bottom: 26px !important; }

/* below the hero: the meadow. Tabs, uses, steps and the example sit on green; cards stay white */
html:root:not(#ds12) .skill-page.sv3 > .detail-panel { position: relative; isolation: isolate; }
/* .sb is the sticky tab bar (position: sticky already): it stays a meadow strip while stuck */
html:root:not(#ds12) .skill-page.sv3 > :is(.sb, .detail-panel)::before {
  content: "" !important; position: absolute !important; inset: -1px calc(50% - 50vw) -1px !important; z-index: -1 !important; pointer-events: none;
  background: var(--w12-meadow) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important;
}
html:root:not(#ds12) .skill-page.sv3 > .sb { margin-bottom: 0 !important; padding-bottom: 40px; }
html:root:not(#ds12) .skill-page.sv3 .sb .skill-tabs { border-bottom-color: rgba(238,242,230,.22) !important; }
html:root:not(#ds12) .skill-page.sv3 .sb .snt { color: var(--w12-meadow-ink) !important; }
html:root:not(#ds12) .skill-page.sv3 > .detail-panel { padding-bottom: 120px; }
html:root:not(#ds12) .skill-page.sv3 .sb .tb { background: transparent; }
html:root:not(#ds12) .skill-page.sv3 .skill-tabs [role=tab] { color: var(--w12-meadow-muted) !important; }
html:root:not(#ds12) .skill-page.sv3 .skill-tabs [role=tab][aria-selected=true] { color: #fff !important; border-color: #fff !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel :is(h2, h3):not(:where(.ev4-card, .ev4 .section, .v3-side, .v3-use, .v3-how > div, .wid, .md-missing, .skill-trust, .details-accordion, .skill-file-workspace, .v6-win, .skill-details, .skill-evidence) *) { color: var(--w12-meadow-ink) !important; font-size: clamp(32px, 3.4vw, 48px) !important; font-weight: 500 !important; letter-spacing: -.035em !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel figcaption, html:root:not(#ds12) .skill-page.sv3 .detail-panel .small-note { color: var(--w12-meadow-muted) !important; }

/* one deep Edge-blue band to close: the landing's halftone sky, a row of halftone clouds rising from the meadow */
html:root:not(#ds12) .skill-page.sv3 .v7-end { position: relative; isolation: isolate; margin-top: 0 !important; border-radius: 0 !important;
  background: transparent !important; padding-block: 270px 64px !important; } /* the CTA closes the band: no empty sky under it (Federico 10-24) */
html:root:not(#ds12) .skill-page.sv3 .v7-end::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: url("/assets/kit/v3/v3-cloud-mid.webp") left -180px top 10px / auto 230px repeat-x, url("/assets/kit/v3/v3-cloud-far.webp") left 140px top -24px / auto 200px repeat-x,
              linear-gradient(180deg, var(--w12-meadow) 0, var(--w12-meadow) 120px, transparent 176px), /* meadow runs on behind the cloud row: no blue strip, no seam (Federico 10-24) */
              linear-gradient(180deg, transparent 40%, rgba(11,42,158,.0) 40%),
              linear-gradient(180deg, rgba(11,42,158,.12), rgba(11,42,158,.5)),
              url("/assets/kit/v3/v3-card-sky.webp") center top / 100% 100% no-repeat, var(--w12-deep); }
html:root:not(#ds12) .skill-page.sv3 .v7-end :is(.v7-end-in, > div) { border: 0 !important; background: none !important; box-shadow: none !important; }
html:root:not(#ds12) .skill-page.sv3 .v7-end p { opacity: 1 !important; font-size: 18px !important; }
html:root:not(#ds12) .skill-page.sv3 .v7-end h2 { font-size: clamp(40px, 4.6vw, 68px) !important; font-weight: 500 !important; letter-spacing: -.04em !important; line-height: 1 !important; }

/* ============================== PRICING ============================== */
/* hero: landing-scale headline on the paper, the dome rising behind it, Scout flying in */
html:root:not(#ds12) .pr-hero { position: relative; isolation: isolate; padding-bottom: 40px !important; }
html:root:not(#ds12) .pr-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -120px calc(50% - 50vw) -260px;
  background: url("/assets/kit/sky.webp") right max(-60px, calc(50vw - 760px)) top 30px / clamp(380px, 38vw, 580px) auto no-repeat; }
html:root:not(#ds12) .pr-hero h1 { font-size: clamp(48px, 6vw, 88px) !important; line-height: .98 !important; letter-spacing: -.045em !important; font-weight: 500 !important; }
html:root:not(#ds12) .pr-hero::after { content: ""; position: absolute; left: calc(50% - 470px); top: 6px; width: 128px; height: 70px; pointer-events: none;
  background: url("/assets/kit/scout.svg") 52px 0 / 44px 44px no-repeat, url("/assets/kit/paper-plane.svg") 0 18px / 120px auto no-repeat;
  filter: drop-shadow(0 10px 12px rgba(13,42,106,.22)); }
@media (prefers-reduced-motion: no-preference) { html:root:not(#ds12) .pr-hero::after { animation: w12-arrive 1.1s cubic-bezier(.2,.75,.2,1) .3s both; } }
/* the plan cards float on the halftone sky */
html:root:not(#ds12) .pr-plans { position: relative; isolation: isolate; padding-block: 72px 140px !important; }
html:root:not(#ds12) .pr-plans::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc(50% - 50vw);
  background: url("/assets/kit/v3/v3-cloud-mid.webp") center bottom -40px / max(1400px, 100vw) auto no-repeat,
              url("/assets/kit/v3/v3-card-sky.webp") center / cover no-repeat, var(--w12-sky);
  -webkit-mask: linear-gradient(transparent, #000 90px, #000 calc(100% - 110px), transparent); mask: linear-gradient(transparent, #000 90px, #000 calc(100% - 110px), transparent); }
html:root:not(#ds12) .pr-plans .pr-plan { background: #fff !important; box-shadow: 0 2px 0 rgba(22,37,30,.06), 0 34px 70px -28px rgba(6,26,80,.55) !important; }
/* the creators: on the meadow, the landing's halftone cut-outs */
html:root:not(#ds12) .pr-creators { position: relative; isolation: isolate; padding-block: 110px !important; margin-top: 0 !important; }
html:root:not(#ds12) .pr-creators::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc(50% - 50vw); background: var(--w12-meadow); }
html:root:not(#ds12) .pr-creators :is(h2, .ov-h2) { color: var(--w12-meadow-ink) !important; }
html:root:not(#ds12) .pr-creators :is(p, .ov-lede, .pr-cr-h) { color: var(--w12-meadow-muted) !important; }
html:root:not(#ds12) .pr-creators .pr-cr-list { display: grid; gap: 10px; }
html:root:not(#ds12) .pr-creators .pr-cr-list li { border: 0 !important; }
html:root:not(#ds12) .pr-creators .pr-cr-list li a { background: #fff; border-radius: 16px; padding: 12px 18px 12px 12px !important; color: var(--w12-ink) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 18px 34px -22px rgba(0,0,0,.6); }
html:root:not(#ds12) .pr-creators .pr-cr-list li a b { color: var(--w12-ink) !important; font-weight: 500 !important; font-size: 17px; }
html:root:not(#ds12) .pr-creators .pr-cr-list li a img { width: 44px !important; height: 44px !important; border-radius: 50% !important; filter: grayscale(1) contrast(1.1); }
html:root:not(#ds12) .pr-creators :is(.ov-btn, .btn):not(.ov-btn-dark) { background: #fff !important; }
html:root:not(#ds12) .pr-creators a:not(.ov-btn):not([class*=btn]) { color: #fff !important; }
/* get started: the one deep-blue band */
html:root:not(#ds12) .pr-start { position: relative; isolation: isolate; padding-block: 270px 150px !important; margin-top: 0 !important; }
html:root:not(#ds12) .pr-start::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc(50% - 50vw);
  background: url("/assets/kit/v3/v3-cloud-mid.webp") left -180px top 10px / auto 230px repeat-x, url("/assets/kit/v3/v3-cloud-far.webp") left 140px top -24px / auto 200px repeat-x,
              linear-gradient(180deg, var(--w12-meadow) 0, var(--w12-meadow) 120px, transparent 176px), /* meadow runs on behind the cloud row: no blue strip, no seam (Federico 10-24) */
              linear-gradient(180deg, rgba(11,42,158,.12), rgba(11,42,158,.5)),
              url("/assets/kit/v3/v3-card-sky.webp") center / cover no-repeat, var(--w12-deep); }
html:root:not(#ds12) .pr-start :is(h2, .ov-h2) { color: #fff !important; font-size: clamp(40px, 4.6vw, 68px) !important; font-weight: 500 !important; letter-spacing: -.04em !important; }
html:root:not(#ds12) .pr-start :is(.ov-lede, p):not(.eu-panel *) { color: #fff !important; opacity: 1 !important; font-size: 18px; }
html:root:not(#ds12) .pr-start .pr-prompt code { background: #fff !important; }
html:root:not(#ds12) .pr-start :is(.ov-chip, .ov-agent) { background: rgba(255,255,255,.92) !important; }

/* ============================== DOCS ============================== */
/* lighter: a sky header (halftone clouds over the paper, the dome at the right) and Scout on the title */
html:root:not(#ds12) body:has(main > section.hero + section#the-idea) main > section.hero { position: relative; isolation: isolate; padding-top: 28px !important; padding-bottom: 56px !important; }
html:root:not(#ds12) body:has(main > section.hero + section#the-idea)::before {
  height: 640px !important; opacity: 1 !important;
  background: url("/assets/kit/sky.webp") right max(-150px, calc(50vw - 860px)) top 40px / clamp(280px, 26vw, 400px) auto no-repeat !important;
  -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
html:root:not(#ds12) body:has(main > section.hero + section#the-idea) main > section.hero h1 { font-size: clamp(40px, 4.4vw, 64px) !important; line-height: 1 !important; letter-spacing: -.04em !important; font-weight: 500 !important; max-width: 14ch; }
html:root:not(#ds12) body:has(main > section.hero + section#the-idea) main > section.hero h1::after { content: ""; display: inline-block; width: .62em; height: .62em; margin-left: .18em; vertical-align: .02em;
  background: url("/assets/kit/scout.svg") center / contain no-repeat; }
/* set-up steps on the halftone sky band */
html:root:not(#ds12) main > section#set-up { position: relative; isolation: isolate; padding-block: 72px 190px !important; }
html:root:not(#ds12) main > section#set-up::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 -40px; border-radius: 28px;
  background: url("/assets/kit/v3/v3-pano-cloud.webp") center bottom -20px / 1500px auto no-repeat, url("/assets/kit/v3/v3-card-sky.webp") center / cover no-repeat, var(--w12-sky); }
html:root:not(#ds12) main > section#set-up .sec-h h2 { color: #fff !important; font-size: clamp(30px, 3vw, 44px) !important; font-weight: 500 !important; letter-spacing: -.035em !important; }
html:root:not(#ds12) main > section#set-up .sec-h p, html:root:not(#ds12) main > section#set-up > div:last-child .small { color: #e4ecff !important; }
html:root:not(#ds12) main > section#set-up > div:last-child .small { display: inline-block; background: rgba(11,42,158,.55); padding: 4px 12px; border-radius: 999px; }

/* ============================== PHONES ============================== */
@media (max-width: 760px) {
  html:root:not(#ds12) .v3-hero.skill-hero::before {
    background:
      linear-gradient(180deg, transparent calc(100% - 50px), var(--w12-meadow)),
      url("/assets/kit/v3/hills-near-mobile.webp") center bottom / 100% 170px no-repeat,
      url("/assets/kit/v3/hills-far-mobile.webp") center calc(100% - 70px) / 100% 150px no-repeat,
      url("/assets/kit/sky.webp") right -70px bottom 210px / 300px auto no-repeat;
  }
  html:root:not(#ds12) .v3-hero .full { padding: 16px 0 190px !important; gap: 24px !important; }
  html:root:not(#ds12) .v3-hero .v3-copy { padding-top: 8px; }
  html:root:not(#ds12) .v3-hero h1 { margin: 18px 0 14px !important; }
  html:root:not(#ds12) .v3-hero .lede { font-size: 17px !important; }
  html:root:not(#ds12) .v3-hero .v3-fig { margin-top: 112px; }
  html:root:not(#ds12) .v3-hero .v3-fig::before { left: -6px; top: -129px; transform-origin: left bottom; scale: .8; }
  html:root:not(#ds12) .pr-hero::before { display: none; } /* phones: no art behind the centred headline */
  html:root:not(#ds12) .pr-hero::after { left: 8px; top: -18px; scale: .7; transform-origin: left; }
  html:root:not(#ds12) .pr-hero h1 { font-size: clamp(40px, 11.5vw, 52px) !important; }
  html:root:not(#ds12) body:has(main > section.hero + section#the-idea)::before { display: none !important; } /* phones: the title carries Scout; no art behind words */
  html:root:not(#ds12) main > section#set-up::before { inset: 0 -12px; border-radius: 22px; }
}

/* the footer's hills follow the last band closely */
html:root:not(#ds12) body:has(.pr-start, .skill-page.sv3) .ds1-footer { margin-top: 24px !important; }

/* pricing Get started on the blue band: the Get Edge dialog's card (white panel, soft code box, blue keycap) and its plain
   host row in white instead of glass chips (coordinator 10-23: chips cramped, names clipped) */
html:root:not(#ds12) .pr-start .pr-prompt { background: #fff !important; padding: 16px !important; border-radius: 18px !important; max-width: 720px !important;
  box-shadow: 0 2px 0 rgba(6,26,80,.18), 0 30px 60px -28px rgba(6,26,80,.6) !important; }
html:root:not(#ds12) .pr-start .pr-prompt code { background: #f3f5f8 !important; border: 1px solid #d6dce5 !important; }
html:root:not(#ds12) .pr-start :is(.ov-chips, .ov-agents) { justify-content: center; gap: 8px 22px !important; }
html:root:not(#ds12) .pr-start :is(.ov-chip, .ov-agent) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: #fff !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -.01em; }
html:root:not(#ds12) .pr-start .ov-chip .ov-i { color: #fff !important; }
html:root:not(#ds12) .pr-start .ov-agent .ov-mark { background: none !important; border: 0 !important; width: 18px !important; height: 18px !important; }
html:root:not(#ds12) .pr-start .ov-agent :is(img, svg) { width: 16px !important; height: 16px !important; filter: brightness(0) invert(1); }
html:root:not(#ds12) .pr-start .ov-agents { margin-top: 18px !important; }

/* German Taxes: the hero title opens bigger than the landing's own (coordinator 10-23: same punch) */
html:root:not(#ds12) .v3-hero.skill-hero { --ds11-h1: clamp(46px, 4.6vw, 68px); }
html:root:not(#ds12):has(meta[name=edge-skill][content$="/german-taxes-elster"]) .v3-hero.skill-hero { --ds11-h1: clamp(56px, 6vw, 92px); }
html:root:not(#ds12) .v3-hero h1 { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }
html:root:not(#ds12):not(:has(meta[name=edge-skill][content$="/german-taxes-elster"])) .v3-hero h1 { max-width: 13ch; }
@media (max-width: 760px) { html:root:not(#ds12) .v3-hero.skill-hero { --ds11-h1: clamp(40px, 11.6vw, 50px); } }

/* ---- cleaning pass (Federico 10-23: "some stuff needs cleaning on layout") ---- */
/* blue bands dissolve into the paper instead of ending on a hard light-blue edge; the footer hills follow */
html:root:not(#ds12) :is(.skill-page.sv3 .v7-end, .pr-start)::before {
  -webkit-mask: linear-gradient(#000 calc(100% - 60px), transparent); mask: linear-gradient(#000 calc(100% - 60px), transparent); }
html:root:not(#ds12) body:has(.pr-start, .skill-page.sv3) .ds1-footer { margin-top: -40px !important; }
/* skill: tighter hero-to-content step; tab rule spans the whole content width; less green under the example */
html:root:not(#ds12) .v3-hero .full { padding-bottom: 250px !important; }
html:root:not(#ds12) .skill-page.sv3 > .sb { padding-bottom: 28px; }
html:root:not(#ds12) .skill-page.sv3 .sb .tb { border-bottom: 1px solid rgba(238,242,230,.22); }
html:root:not(#ds12) .skill-page.sv3 .sb .skill-tabs { border-bottom: 0 !important; }
html:root:not(#ds12) .skill-page.sv3 > .detail-panel { padding-bottom: 56px !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel h2:first-child { margin-top: 0 !important; }
/* cards on the green: one radius, one hairline, one shadow */
html:root:not(#ds12) .skill-page.sv3 .detail-panel :is(.v3-use, .v3-how > div, .v6-win, .v3-side) {
  border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 18px 36px -24px rgba(0,0,0,.55) !important; }
/* the info card is ONE card (Federico 10-24: one soft shadow per floating object, outer card only):
   its groups (Creator, You need, Works in any agent, Source; the trust audit) get no shadow and no fill box,
   only spacing and the small uppercase labels */
html:root:not(#ds12) .skill-page.sv3 .detail-panel .v3-side { background: #fff !important; border-radius: 22px !important; padding: 24px !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel .v3-side :is(div, section, article, aside, figure, ul, li, p) { box-shadow: none !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel .v3-side > :is(div, section) { background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel .v3-side > :is(div, section) + :is(div, section) { margin-top: 26px !important; }
/* pricing: the proof line gets air before the meadow; no stray rule over the creator list */
html:root:not(#ds12) .pr-proof { padding-block: 96px 104px !important; margin-block: 0 !important; }
html:root:not(#ds12) .pr-creators .pr-cr-list, html:root:not(#ds12) .pr-creators .pr-cr-list li:first-child { border-top: 0 !important; }
/* docs: the setup card's heading at section scale; less empty sky under the note */
html:root:not(#ds12) main > section#set-up .sec-h h2:not(#x) { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.05 !important; font-weight: 500 !important; letter-spacing: -.035em !important; color: #fff !important; }
html:root:not(#ds12) main > section#set-up .sec-h p:not(#x) { font-size: 17px !important; color: #e4ecff !important; }
@media (max-width: 760px) {
  html:root:not(#ds12) .v3-hero .full { padding-bottom: 170px !important; }
  html:root:not(#ds12) :is(.skill-page.sv3 .v7-end, .pr-start) { padding-block: 240px 56px !important; }
  html:root:not(#ds12) main > section#set-up { padding-block: 44px 120px !important; }
  html:root:not(#ds12) main > section#set-up::before { background-size: auto 100px, cover !important; background-position: center bottom, center !important; }
  html:root:not(#ds12) .pr-proof { padding-block: 64px 72px !important; }
}

/* ============================== EVERY OTHER DS1 PAGE (DS 1.2 rollout, Federico 10-23 YES) ============================== */
/* Pages without their own DS 1.2 composition (skill v3, pricing, docs home) get the same world in two moves:
   the sky dome and Scout open the page, and the landing's sky with its clouds closes it behind the footer hills.
   Text never sits on art: the dome stays in the right margin and drops on phones. */
html:root:not(#ds12) body:not(:has(.skill-page.sv3, .pr-hero, main > section.hero + section#the-idea)) {
  --w12-open: 1; }
html:root:not(#ds12) body:not(:has(.skill-page.sv3, .pr-hero, main > section.hero + section#the-idea))::before {
  content: "" !important; display: block !important; position: absolute !important; z-index: -1 !important; pointer-events: none !important;
  inset: 0 0 auto 0 !important; height: 620px !important; opacity: 1 !important;
  background: url("/assets/kit/sky.webp") right max(-170px, calc(50vw - 900px)) top 54px / clamp(260px, 24vw, 380px) auto no-repeat !important;
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
html:root:not(#ds12) body:not(:has(.skill-page.sv3, .pr-hero, main > section.hero + section#the-idea)) main h1:not(.sr-only):not(:has(> *))::after {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-left: .2em; vertical-align: .02em;
  background: url("/assets/kit/scout.svg") center / contain no-repeat; }
/* the closing sky: blue rising out of the paper, a row of halftone clouds whose feet the footer hills cover */
html:root:not(#ds12) body:not(:has(.pr-start, .skill-page.sv3)) .ds1-footer { --w12-cb: clamp(190px, 18vw, 270px);
  margin-top: clamp(40px, 5vw, 80px) !important; padding-top: var(--w12-cb); isolation: isolate; }
html:root:not(#ds12) body:not(:has(.pr-start, .skill-page.sv3)) .ds1-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent calc(var(--w12-cb) - 40px), rgb(170,203,228) calc(var(--w12-cb) + 30px)),
              url("/assets/kit/v3/v3-cloud-mid.webp") left -180px top calc(var(--w12-cb) - 150px) / auto 230px repeat-x,
              url("/assets/kit/v3/v3-cloud-far.webp") left 140px top calc(var(--w12-cb) - 170px) / auto 200px repeat-x,
              url("/assets/kit/v3/v3-card-sky.webp") center top / 100% calc(var(--w12-cb) + 260px) no-repeat, rgb(170,203,228);
  -webkit-mask: linear-gradient(transparent, #000 calc(var(--w12-cb) * .55)); mask: linear-gradient(transparent, #000 calc(var(--w12-cb) * .55)); }
html:root:not(#ds12) body:not(:has(.pr-start, .skill-page.sv3)) .ds1-footer-hills { position: relative; }
@media (max-width: 760px) {
  html:root:not(#ds12) body:not(:has(.skill-page.sv3, .pr-hero, main > section.hero + section#the-idea))::before { display: none !important; }
  html:root:not(#ds12) body:not(:has(.pr-start, .skill-page.sv3)) .ds1-footer { --w12-cb: 130px; }
  html:root:not(#ds12) body:not(:has(.pr-start, .skill-page.sv3)) .ds1-footer::before {
    background-size: auto, auto 140px, auto 120px, 100% calc(var(--w12-cb) + 160px), auto;
    background-position: 0 0, left -120px top calc(var(--w12-cb) - 92px), left 90px top calc(var(--w12-cb) - 104px), center top, 0 0; }
}

/* Phone: wide data tables scroll inside their wrapper instead of squeezing every column (tasks "Side by side"). */
@media (max-width:700px){.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-wrap>table.data-table{min-width:680px}}

/* the provenance line under the hero card sits on the halftone sky: a solid white label, readable on the dither (Federico 10-24) */
html:root:not(#ds12) .v3-hero .v3-fig .v3-note { display: inline-block; margin: 12px 0 0 !important; padding: 6px 10px; border-radius: 8px;
  background: #fff; color: #3b4741 !important; font-size: 12px; line-height: 1.45; box-shadow: 0 6px 16px -10px rgba(13,42,106,.25); }

/* headings on a white card take the card's ink, never the meadow's cream (Federico 10-24: "Inside the skill", "Audit", "SKILL.md" were
   cream on white); card headings keep a card scale */
html:root:not(#ds12) .skill-page.sv3 .detail-panel :where(.ev4-card, .ev4 .section, .v3-side, .v3-use, .v3-how > div, .wid, .md-missing, .skill-trust, .details-accordion, .skill-file-workspace, .v6-win, .skill-details, .skill-evidence) :is(h2, h3, h4) { color: #16251e !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel :where(.ev4 .section, .ev4-card, .skill-evidence, .skill-details) .section-head h2,
html:root:not(#ds12) .skill-page.sv3 .detail-panel :where(.ev4 .section, .skill-evidence, .skill-details) > h2 { font-size: clamp(24px, 2.2vw, 30px) !important; letter-spacing: -.02em !important; }
html:root:not(#ds12) .skill-page.sv3 .detail-panel .wid h3 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase; color: #3b4741 !important; }
/* a panel's first card margin stays inside the panel: no paper strip between the tab bar and the card (Federico 10-24) */
html:root:not(#ds12) .skill-page.sv3 > .detail-panel { display: flow-root; }
/* Item 4 (Federico 10-24): every heading and line on the sky band reads at 4.5:1 or more. A soft deep-blue wash
   sits behind the closing text and the pricing heading; the halftone stays visible around it. */
html:root:not(#ds12) .skill-page.sv3 .v7-end .v7-end-in { position: relative; isolation: isolate; }
/* the wash reaches past the text column; clip it to the band so the page never scrolls sideways */
html:root:not(#ds12) .skill-page.sv3 .v7-end { overflow-x: clip; }
html:root:not(#ds12) .skill-page.sv3 .v7-end .v7-end-in::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -48px -18%;
  background: radial-gradient(closest-side, rgba(9, 38, 140, .62), rgba(9, 38, 140, .5) 55%, rgba(9, 38, 140, 0)) !important; }
html:root:not(#ds12) .pr-start :is(h2, .ov-h2) { background: radial-gradient(closest-side, rgba(9, 38, 140, .6), rgba(9, 38, 140, .45) 60%, rgba(9, 38, 140, 0)) !important; padding: 24px 6% 28px; margin-inline: auto; max-width: 920px; }
/* The Record tab sat as ink text straight on the dark meadow (unreadable since RC9): it gets the same white card as the other tabs. */
html:root:not(#ds12) .skill-page.sv3 .detail-panel > .skill-details { background: #fff !important; border-radius: 20px !important; padding: clamp(20px, 3vw, 32px) !important; box-shadow: 0 18px 48px rgba(22, 37, 30, .18) !important; color: #16251e; }

/* One simple skill page (Federico 10-25: "/explore/ is nice because it does not have too much styling ... keep them more simple").
   Paper ground under the tabs and cards (no dark-green body, no meadow below the hero), one hero accent (the half-moon sky,
   desktop only), flat white cards with one soft shadow, ink headings. The closing cloud band stays as it is. */
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero::before{background:url(/assets/kit/sky.webp) no-repeat right -160px top 0/620px auto !important;inset:-64px -130px auto auto !important;width:min(700px,70vw);height:520px;opacity:.9}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero{min-height:0 !important;height:auto !important;padding-bottom:40px !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero .v3-fig::before{display:none !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero .v3-fig{margin-top:24px !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .detail-panel::before{background:transparent !important}
/* the sticky tab bar keeps a paper fill so content scrolls under it, not through it */
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .sb::before{background:#f5f3eb !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .sb .snt{color:#16251e !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 :is(.sb,.detail-panel) :is(h2,h3,h4,p,li,dt,dd,span,a,button){text-shadow:none !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .detail-panel > :is(h2,h3),html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .detail-panel .section-head :is(h2,h3),html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .detail-panel > * > h2{color:#16251e !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .sb [role=tab]{color:#59685f !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .sb [role=tab][aria-selected=true]{color:#16251e !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-scroll,html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 [class*=scroll-cue]{display:none !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 :is(.v3-how>div,.wid,.ev4-card,.v3-side,.skill-details,.v3-use>div,.res){box-shadow:0 1px 2px rgba(22,37,30,.05),0 6px 20px rgba(22,37,30,.06) !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-note{background:transparent !important;box-shadow:none !important;color:#59685f !important;padding-inline:0 !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero{padding-bottom:24px !important;margin-bottom:0 !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero > *:last-child{margin-bottom:0 !important}
@media (max-width:640px){html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero::before{display:none !important}}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-hero .full{min-height:0 !important;height:auto !important;padding-bottom:56px !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .v3-main > :is(h2,h3),html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 .detail-panel :is(h2,h3):not(.v3-side *):not(.v3-how *){color:#16251e !important}
html:root:not(#simple1):not(#simple2):not(#simple3) .skill-page.sv3 :is(.v3-main,.detail-panel) > p:not([class*=key]){color:#59685f !important}

/* Skill page art fix (Federico 10-26: hero art clipped by boxes, caption over the art, dark strip + crude clouds in the closing band).
   One sky illustration in the hero, drawn whole (never cropped by its box); the caption knocks the art out; the closing band is one
   continuous sky with the high-res horizon clouds that runs on behind the hills into the footer. */
html:root:not(#af1):not(#af2):not(#af3):not(#af4) body:has(.skill-page.sv3)::after{content:none !important;display:none !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v3-hero::before{content:"" !important;display:block !important;position:absolute !important;z-index:-1 !important;pointer-events:none !important;
  --af-sky:clamp(300px,30vw,470px);inset:-40px calc(50% - 50vw) auto auto !important;width:var(--af-sky) !important;height:calc(var(--af-sky) * 1.563) !important;
  background:url("/assets/kit/sky.webp") right top / 100% 100% no-repeat !important;opacity:.94 !important;mask:none !important;filter:saturate(.9)}
@media (max-width:1000px){html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v3-hero::before{--af-sky:clamp(260px,34vw,320px);top:-24px !important;opacity:.6 !important}}
@media (max-width:640px){html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v3-hero::before{display:none !important}}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v3-hero .v3-fig .v3-note{display:table !important;position:relative;background:#f5f3eb !important;color:#3b4741 !important;padding:5px 12px !important;margin:10px 0 0 -12px !important;border-radius:999px !important;box-shadow:none !important}

/* closing band v3 (Federico 10-26): the hero's art continues at the foot of the page. One cloud bank drawn in the hero
   globe's own halftone (v9-cloud-bank*.webp: #2677a7 grain on transparent, so the page paper is the light) rises from behind
   the hills and cradles the headline; the sky above fades out of the paper. Ink text on the light sky. */
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end{overflow:visible !important;overflow-x:visible !important;padding-block:110px 24px !important;margin-bottom:0 !important;color:#16251e !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end::before{inset:0 calc(50% - 50vw) -230px !important;mask:none !important;-webkit-mask:none !important;
  background:url("/assets/kit/v3/v9-cloud-bank-2.webp") center bottom / 2800px 720px no-repeat !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end .v7-end-in{padding-bottom:24px !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end .v7-end-in::after{content:none !important;background:none !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) body .skill-page.sv3 .v7-end :is(h2,h3):not(#ds11){color:#16251e !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) body .skill-page.sv3 .v7-end :is(p,small,.lede):not(#ds11){color:#2c3a33 !important;opacity:1 !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) body:has(.skill-page.sv3) .ds1-footer{margin-top:-64px !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) body:has(.skill-page.sv3) .ds1-footer-hills{background:url("/assets/kit/hills-band.webp") center top / max(100%,1100px) auto no-repeat !important;background-color:transparent !important}
@media (max-width:760px){
  html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end{padding-block:72px 16px !important}
  html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end::before{background:url("/assets/kit/v3/v9-cloud-bank-phone.webp") center bottom / 700px 820px no-repeat !important}
  html:root:not(#af1):not(#af2):not(#af3):not(#af4) body:has(.skill-page.sv3) .ds1-footer{margin-top:-50px !important}}
@media (max-width:700px){html:root:not(#af1):not(#af2):not(#af3):not(#af4) body:has(.skill-page.sv3) .ds1-footer-hills{background:url("/assets/kit/hills-band-mobile.webp") center top / 100% auto no-repeat !important;background-color:transparent !important}}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v3-hero .cue{display:none !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v6-chat > figcaption{color:#59685f !important}
/* keys press like the Edge key (ds1.1 pressed state): the face moves down 1px onto a shorter base; no shrink */
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .btn.primary:active{transform:translateY(1px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 0 rgba(12,25,48,.14) !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 :is(.btn.share,.btn.secondary,.v7-copy):active{transform:translateY(1px) !important;box-shadow:inset 0 1px 0 #fff,0 1px 0 #d6dce5 !important}
html:root:not(#af1):not(#af2):not(#af3):not(#af4) .skill-page.sv3 .v7-end .btn.primary:active{box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(12,25,48,.14) !important}