/* duc-sections.css — WP-2: Pricing · Scenery · Blog + the page-level forest ground.
   Transcribed from dc/SitePricing.dc.html, dc/SiteScenery.dc.html, dc/SiteBlog.dc.html and the ground layer in
   dc/WEB home v2.dc.html + dc/WebHomeMobile.dc.html. Tokens come from duc-core.css (:root); every var() carries the
   DC literal as its fallback so the sections render correctly on their own.
   Breakpoints (BUILD_PLAN §2.3): desktop wrappers ≥ 900px; pricing 3→1 columns by track sizing at a 636px grid;
   scenery mobile layout < 700px. prefers-reduced-motion honoured (A-32). Never a global a{color}. */

.duc-pricing,
.duc-scenery,
.duc-blog {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, 'Segoe UI', Roboto, Arial, sans-serif);
  color: var(--ink, #12161B);
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING · SitePricing.dc.html
   The section root carries no page padding: the page skeleton's `.duc-sec--pricing` wrapper (WP-F) supplies the DC
   wrapper padding (desktop `40px 116px 80px`, join page bottom 40, mobile `64px 24px 16px`). Inside a
   [data-current-plan] wrapper (the join report) the Account card renders "Your current plan", inert.
   ═══════════════════════════════════════════════════════════════════════ */
.duc-pricing { padding: 0; width: 100%; box-sizing: border-box; }

.duc-pricing__inner {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.duc-pricing__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.duc-pricing__h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--ink, #12161B);
}
.duc-pricing__sub {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body2, #3E4A55);
  text-wrap: pretty;
}

/* Monthly / Yearly segmented control (34px track, 30px segments; ::before lifts the hit target to 44px) */
.duc-pricing__bill {
  display: flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  height: 34px;
  width: 100%;
  max-width: 340px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(118, 118, 128, .12);
}
.duc-pricing__seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 30px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: -.1px;
  font-weight: 500;
  color: var(--ink, #12161B);
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  transition: background .15s ease;
}
.duc-pricing__seg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}
.duc-pricing__seg.is-on {
  background: var(--white, #FFFFFF);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.duc-pricing__seg:focus-visible {
  outline: 3px solid var(--blue, #0070A0);
  outline-offset: 2px;
}

/* Three equal columns while the grid is ≥ 636px wide; below that the max() term explodes → one column (never 2+1) */
.duc-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc((100% - 32px) / 3), calc((636px - 100%) * 200))), 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1020px;
  align-items: stretch;
}
.duc-pricing__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white, #FFFFFF);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) 22px;
  box-sizing: border-box;
  border: 1px solid var(--hair, #E5E5EA);
}
.duc-pricing__card--primary { border: 1.5px solid var(--ink, #12161B); }
.duc-pricing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.duc-pricing__name {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.08px;
  color: var(--muted, #6D6D72);
}
.duc-pricing__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--ink, #12161B);
  color: var(--white, #FFFFFF);
  font-size: 11.5px;
  font-weight: 600;
}
.duc-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.duc-pricing__amt {
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--ink, #12161B);
}
.duc-pricing__per {
  font-size: 14px;
  color: var(--muted, #6D6D72);
}
.duc-pricing__plan-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted, #6D6D72);
  text-wrap: pretty;
}
.duc-pricing__bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.duc-pricing__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink, #12161B);
  text-wrap: pretty;
}
.duc-pricing__tick {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--blue-tint, #E1EEF5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}
.duc-pricing__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
.duc-pricing__note {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--muted, #6D6D72);
}
.duc-pricing__cta {
  min-height: 48px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}
@media (hover:hover){.duc-pricing__cta:hover{ filter: brightness(.96); }}
.duc-pricing__cta:focus-visible {
  outline: 3px solid var(--blue, #0070A0);
  outline-offset: 2px;
}
/* colours are root-scoped (0,2,0 / 0,3,0) so the page's global link colour and link hover never reach the CTAs */
.duc-pricing .duc-pricing__cta--primary,
.duc-pricing .duc-pricing__cta--primary:hover { background: var(--ink, #12161B); color: var(--white, #FFFFFF); border: none; }
.duc-pricing .duc-pricing__cta--outline,
.duc-pricing .duc-pricing__cta--outline:hover { background: var(--white, #FFFFFF); color: var(--ink, #12161B); border: 1px solid var(--ink, #12161B); }
.duc-pricing .duc-pricing__cta--ghost,
.duc-pricing .duc-pricing__cta--ghost:hover   { background: var(--white, #FFFFFF); color: var(--ink, #12161B); border: 1px solid var(--hair, #E5E5EA); }
.duc-pricing__cta--current {
  display: none;
  background: var(--field, #F2F2F7);
  color: var(--muted, #6D6D72);
  border: none;
  cursor: default;
  pointer-events: none;
}
[data-current-plan] .duc-pricing__cta--account { display: none; }
[data-current-plan] .duc-pricing__cta--current { display: inline-flex; }
.duc-pricing__fine {
  font-size: 12px;
  color: var(--body3, #5D6A75);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCENERY · SiteScenery.dc.html (CL-041 + CL-042 mobile)
   Statements ink word by word past a read line 62% down the viewport. Each window is pinned 1.2H
   (hold 0.3H, open 0.9H) inside a 220vh track; sections.js writes clip-path / opacity / transform per frame.
   No shadow, hairline, sticker or block anywhere (CL-041).
   ═══════════════════════════════════════════════════════════════════════ */
/* no margin on the root: the page's `.duc-sec--scenery` wrapper carries the DC margin-top (60px desktop / 32px mobile) */
.duc-scenery { margin: 0; }

.duc-scenery__statement {
  position: relative;
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(96px, 12vw, 150px) 0 clamp(56px, 7vw, 90px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  width: calc(100% - clamp(48px, (100% - 700px) * 10, 232px));
  min-width: 0;
}
.duc-scenery__p {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.22;
  text-wrap: pretty;
  color: var(--ink, #12161B);
}
/* word spans (created by sections.js); colour is written inline per frame — warm grey rgb(133,128,111) → ink.
   #85806F is 3.4:1 on paper (AA for this ≥ 24px text); the DC's #C2BDB0 start was 1.6:1 — F1 */
.duc-scenery__w { color: rgb(133, 128, 111); }

.duc-scenery__win {
  position: relative;
  height: 220vh;
  height: 220svh;   /* stable track: dvh re-lays the page out when the iOS toolbar collapses — F10 */
}
.duc-scenery__box {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* closed framing (desktop): 26px under the 88px app bar, 84px in from the rule, half the width — JS opens it */
.duc-scenery__img {
  position: absolute;
  inset: 0;
  clip-path: inset(114px 84px 0 50%);
}
.duc-scenery__img--forest { clip-path: inset(114px 50% 0 84px); }
.duc-scenery__img picture { display: contents; }
.duc-scenery__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.duc-scenery__copy {
  position: absolute;
  top: 100px;
  bottom: 0;
  width: min(460px, calc(50% - 150px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}
.duc-scenery__copy--a { left: 116px; }
.duc-scenery__copy--b { right: 116px; }
.duc-scenery__eyebrow {
  font-size: 13px;
  letter-spacing: -.08px;
  color: var(--body3, #5D6A75);
}
.duc-scenery__h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--ink, #12161B);
  text-wrap: pretty;
}
.duc-scenery__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.duc-scenery__list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.duc-scenery__n {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--body3, #5D6A75);
  flex: none;
}
.duc-scenery__li {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #12161B);
}
.duc-scenery__groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.duc-scenery__group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.duc-scenery__gh {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #12161B);
}
.duc-scenery__gb {
  font-size: 15px;
  line-height: 22px;
  color: var(--body2, #3E4A55);
  text-wrap: pretty;
}
.duc-scenery__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.duc-scenery__cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  text-decoration: none;
  box-sizing: content-box;     /* the board draws these in content-box: bordered = 50px, borderless = 48 — F2 / D-4 */
  transition: background .15s ease;
}
/* colours are root-scoped so the page's global link colour / hover never reach the CTAs */
.duc-scenery .duc-scenery__cta--ink { background: var(--ink, #12161B); color: var(--white, #FFFFFF); }
@media (hover:hover){.duc-scenery .duc-scenery__cta--ink:hover{ background: var(--ink-hover, #28313B); color: var(--white, #FFFFFF); }}
.duc-scenery__cta--values { align-self: flex-start; margin-top: 10px; }
.duc-scenery .duc-scenery__cta--outline {
  background: var(--white, #FFFFFF);
  border: 1px solid var(--glass-18, rgba(18, 22, 27, .18));
  color: var(--ink, #12161B);
}
@media (hover:hover){.duc-scenery .duc-scenery__cta--outline:hover{ background: #F7F5EF; color: var(--ink, #12161B); }}
.duc-scenery__cta:focus-visible {
  outline: 3px solid var(--blue, #0070A0);
  outline-offset: 2px;
}

/* mobile (< 700): copy stacks at the top; the window starts as a band 24px under it, inset to the 20px rules */
@media (max-width: 699px) {
  .duc-scenery__copy,
  .duc-scenery__copy--a,
  .duc-scenery__copy--b {
    left: 24px;
    right: 24px;
    top: 96px;
    bottom: auto;
    width: auto;
    justify-content: flex-start;
    gap: 14px;
    overflow: visible;
  }
  .duc-scenery__img,
  .duc-scenery__img--forest { clip-path: inset(60% 20px 0 20px); }
}

/* no JS: unpinned static windows (JS adds .is-live) */
.duc-scenery:not(.is-live) .duc-scenery__win { height: auto; }
.duc-scenery:not(.is-live) .duc-scenery__box { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG · SiteBlog.dc.html (CL-037/CL-038, A-35)
   Rides on the forest ground. Solid paper header panel, solid white cards, snap rail, hidden scrollbar.
   ═══════════════════════════════════════════════════════════════════════ */
/* no padding on the root: the page's `.duc-sec--blog` wrapper carries the DC padding (150px 0 120px desktop / 110px 0 90px mobile) */
.duc-blog {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.duc-blog__head {
  width: 100%;
  box-sizing: border-box;
  padding: 0 clamp(24px, (100% - 700px) * 10, 116px);
}
.duc-blog__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper, #EFEDE6);
  border-radius: 16px;
  padding: 18px 22px;
  box-sizing: border-box;
}
.duc-blog__h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--ink, #12161B);
}
.duc-blog__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.duc-blog__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--glass-16, rgba(18, 22, 27, .16));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  flex: none;
  transition: background .15s ease;
}
@media (hover:hover){.duc-blog__btn:hover{ background: var(--white, #FFFFFF); }}
.duc-blog__btn[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (hover:hover){.duc-blog__btn[aria-disabled="true"]:hover{ background: rgba(255, 255, 255, .75); }}
.duc-blog .duc-blog__all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--glass-16, rgba(18, 22, 27, .16));
  color: var(--ink, #12161B);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .15s ease;
}
@media (hover:hover){.duc-blog .duc-blog__all:hover{ background: var(--white, #FFFFFF); color: var(--ink, #12161B); }}
.duc-blog__btn:focus-visible,
.duc-blog__all:focus-visible {
  outline: 3px solid var(--blue, #0070A0);
  outline-offset: 2px;
}

.duc-blog__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 8px;
  padding-left: clamp(24px, (100% - 700px) * 10, 116px);
  scroll-padding-left: clamp(24px, (100% - 700px) * 10, 116px);
  box-sizing: border-box;
  width: 100%;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.duc-blog__rail::-webkit-scrollbar { display: none; }
.duc-blog__rail.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.duc-blog__rail:focus-visible {
  outline: 3px solid var(--blue, #0070A0);
  outline-offset: -3px;
}
/* card: 320px content box (+12px padding +1px hairline each side, as the DC renders it); root-scoped so the page's
   global border-box reset (0,1,1) does not shrink it */
.duc-blog .duc-blog__card {
  flex: none;
  width: 320px;
  box-sizing: content-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--hair, #E5E5EA);
  border-radius: 16px;
  padding: 12px 12px 18px;
  color: var(--ink, #12161B);
  box-shadow: 0 12px 32px rgba(18, 22, 27, .14);
}
.duc-blog__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;   /* no fill: the board's cover slot is transparent until real cover art exists — F6 / D-8 */
}
.duc-blog__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}
.duc-blog__tag {
  font-size: 13px;
  letter-spacing: -.08px;
  color: var(--muted, #6D6D72);
}
.duc-blog__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.3;
  color: var(--ink, #12161B);
  text-wrap: pretty;
}
.duc-blog__date {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--muted, #6D6D72);
  margin-top: 4px;
}
.duc-blog__spacer {
  flex: none;
  width: clamp(8px, (100% - 700px) * 10, 100px);
}

/* ═══════════════════════════════════════════════════════════════════════
   FOREST GROUND · the page-level fixed landscape layer (WEB home v2.dc.html:32-34, WebHomeMobile.dc.html:50).
   The hook `#duc-forest-ground` lives in the page skeleton as the FIRST child of the fixed blueprint ground
   (so the dot grid, rules and marks paint above the photo). Opacity = smoothstep((1.12·vh − sceneryBottom) / (0.1·vh)),
   written by sections.js. The image is attached (.is-armed) only once the scenery is near, so the home page's
   first paint never waits for it.
   ═══════════════════════════════════════════════════════════════════════ */
#duc-forest-ground {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#duc-forest-ground.is-armed {
  background-image: url('../assets/site/scene-forest.jpg');
  background-image: image-set(url('../assets/site/scene-forest.webp') type('image/webp'),
                              url('../assets/site/scene-forest.jpg') type('image/jpeg'));   /* P4 */
}

/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION (A-32): no word inking (sections.js leaves the paragraphs as plain ink), windows unpinned and
   static in their closed framing (copy beside the picture), no hover transitions.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .duc-scenery__win { height: auto; }
  .duc-scenery__box { position: relative; }
  .duc-scenery__img { clip-path: inset(114px 84px 0 50%); }
  .duc-scenery__img--forest { clip-path: inset(114px 50% 0 84px); opacity: 1; }
  .duc-scenery__copy { opacity: 1; transform: none; pointer-events: auto; }
  .duc-pricing__seg,
  .duc-pricing__cta,
  .duc-scenery__cta,
  .duc-blog__btn,
  .duc-blog__all { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 699px) {
  .duc-scenery__img,
  .duc-scenery__img--forest { clip-path: inset(60% 20px 0 20px); }
}