/* DRIPLAB homepage: echte fotografie, heldere keuzeroutes en materiaal als accent. */

/* Clip decoratie aan de paginarand; carrousels houden hun eigen scrollgebied. */
html, body { overflow-x: clip; }

.dl-hero {
  min-height: 900px;
  padding: 136px 0 64px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.dl-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9px;
  background: linear-gradient(90deg, var(--magenta) 0 36%, var(--violet) 36% 67%, var(--blauw) 67%);
}

.dl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(32px, 6vw, 94px);
  align-items: center;
}

.dl-hero-copy { position: relative; z-index: 2; }

.dl-doodle {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.dl-kicker {
  color: rgba(250,250,248,.64);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dl-hero-title {
  margin-top: 28px;
  color: var(--paper);
  font-size: clamp(58px, 7.4vw, 112px);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.dl-hero-title span { display: block; white-space: nowrap; }
.dl-hero-title .dl-hero-line-birthday { position:relative; width:max-content; }

.dl-hero-title .dl-accent {
  position: relative;
  width: max-content;
  color: var(--ink);
  background: var(--zon);
  padding: .02em .11em .08em;
  transform: rotate(-1.5deg);
  margin-top: .09em;
}

.dl-doodle-crown {
  width: clamp(72px, 7vw, 118px);
  top: -.72em;
  right: .08em;
  transform: rotate(8deg);
  animation: dl-doodle-bob 4.8s ease-in-out infinite;
}

.dl-doodle-underline {
  width: 92%;
  height: auto;
  left: 4%;
  top: calc(100% - 45px);
  transform: rotate(6deg);
}

.dl-doodle-loop {
  width: clamp(66px, 6vw, 104px);
  left: max(10px, calc(50vw - 770px));
  top: 55%;
  transform: rotate(13deg);
  opacity: .86;
}

@keyframes dl-doodle-bob {
  50% { transform: rotate(3deg) translateY(-9px); }
}

.dl-hero-lede {
  max-width: 52ch;
  margin-top: 37px;
  color: rgba(250,250,248,.74);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

.dl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.dl-hero .dl-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 470px);
  margin-top: 34px;
}

.dl-hero .dl-actions > a {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  padding-inline: 18px;
  text-align: center;
}

.dl-text-link {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.dl-hero .dl-text-link,
.dl-text-link-light { color: var(--paper); }

.dl-hero .dl-text-link {
  border: 1px solid rgba(250,250,248,.3);
  border-radius: 999px;
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.dl-hero .dl-text-link:hover {
  color: var(--ink);
  border-color: var(--paper);
  background: var(--paper);
  transform: translateY(-2px);
}

.dl-text-link::after { content: "↗"; font-size: 17px; text-decoration: none; }

.dl-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  margin: 46px 0 0;
  border-block: 1px solid var(--line-dark);
}

.dl-hero-facts div { padding: 18px 18px 20px 0; }
.dl-hero-facts div + div { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.dl-hero-facts dt { color: rgba(250,250,248,.46); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.dl-hero-facts dd { margin: 5px 0 0; color: var(--paper); font-size: 13px; font-weight: 650; line-height: 1.35; }

.dl-hero-visual {
  position: relative;
  min-height: 690px;
  margin: 0;
}

.dl-hero-visual::before {
  content: "";
  position: absolute;
  inset: 5% -5% 2% 8%;
  background: var(--violet);
  border-radius: 43% 57% 36% 64% / 52% 34% 66% 48%;
  transform: rotate(2deg);
}

.dl-hero-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  border-radius: 38% 62% 31% 69% / 55% 38% 62% 45%;
  filter: saturate(.92) contrast(1.03);
}

.dl-photo-note {
  position: absolute;
  left: -28px;
  bottom: 44px;
  width: min(320px, 74%);
  padding: 25px 24px 23px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fffdf5;
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--zon), 16px 16px 0 var(--magenta), 0 24px 56px rgba(0,0,0,.24);
  transform: rotate(-1.5deg);
}

.dl-photo-note::before {
  content: "";
  position: absolute;
  width: 86px;
  height: 22px;
  top: -12px;
  left: 50%;
  background: rgba(207,187,255,.9);
  transform: translateX(-50%) rotate(4deg);
}

.dl-photo-note strong {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.dl-photo-note strong::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 9px;
  background: url("../visuals/doodles/underline-violet.png") center / 100% auto no-repeat;
}

.dl-photo-note span { display: block; margin-top: 13px; color: rgba(11,11,12,.64); font-size: 12px; line-height: 1.4; }

.dl-photo-note .dl-photo-note-label {
  position: absolute;
  top: -17px;
  left: 18px;
  width: max-content;
  margin: 0;
  padding: 6px 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.dl-seal {
  position: absolute;
  right: -26px;
  top: 46px;
  width: 126px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(9deg);
  background: var(--drip-ring);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 3px rgba(250,250,248,.2), 0 18px 38px rgba(0,0,0,.3);
}

.dl-seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(11,11,12,.88);
}

.dl-social-rail {
  position: absolute;
  z-index: 5;
  right: 18px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--paper);
  writing-mode: vertical-rl;
  transform: translateY(-42%);
}

.dl-social-rail a {
  color: rgba(250,250,248,.7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
}

.dl-social-rail a:hover { color: var(--zon); }
.dl-social-rail img { width: 28px; transform: rotate(7deg); }

.dl-ticker { overflow: hidden; background: var(--zon); color: var(--ink); border-bottom: 1px solid var(--ink); }
.dl-ticker-track { display: flex; width: max-content; animation: dl-ticker 220s linear infinite; }
.dl-ticker-sequence { display: flex; flex: none; }
.dl-ticker span, .dl-ticker i { padding: 14px 24px; font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.dl-ticker i { color: var(--zon); background: var(--ink); }
@keyframes dl-ticker { to { transform: translateX(-50%); } }

.dl-section-head {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(280px,.5fr);
  gap: clamp(30px, 7vw, 110px);
  align-items: end;
}

.dl-section-head-light .lede { color: rgba(250,250,248,.62); }

.dl-audience-stage {
  display: grid;
  grid-template-columns: minmax(246px, .4fr) minmax(0, 1.6fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.dl-audience-tabs { display: flex; flex-direction: column; background: var(--paper-2); border-right: 1px solid var(--line); }
.dl-audience-tab {
  flex: 1 1 0;
  min-height: 0;
  padding: 13px 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), padding .25s var(--ease);
}
.dl-audience-tab:last-child { border-bottom: 0; }
.dl-audience-tab span { display: block; margin-top: 5px; color: rgba(11,11,12,.52); font-size: 11px; font-weight: 550; letter-spacing: .02em; }
.dl-audience-tab:hover { padding-left: 30px; }
.dl-audience-tab.is-active { background: var(--ink); color: var(--paper); padding-left: 30px; }
.dl-audience-tab.is-active span { color: rgba(250,250,248,.58); }

.dl-audience-panel { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr); min-height:0; }
.dl-audience-image { position:relative; aspect-ratio:1; height:auto; min-height:0; align-self:start; overflow:hidden; background:var(--ink-2); }
.dl-audience-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .2s ease, transform .6s var(--ease); }
.dl-audience-image.is-changing img { opacity: 0; transform: scale(1.03); }
.dl-image-label { position: absolute; left: 22px; bottom: 22px; padding: 9px 13px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dl-audience-disclosure { position:absolute; right:16px; top:16px; padding:7px 10px; background:rgba(11,11,12,.78); color:rgba(250,250,248,.78); font-size:9px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }
.dl-audience-disclosure:empty { display:none; }
.dl-audience-copy { padding: clamp(38px, 4.4vw, 62px); align-self: center; }
.dl-audience-copy h3 { margin-top: 14px; font-size: clamp(30px, 2.8vw, 43px); line-height: 1.02; }
.dl-audience-copy > p:not(.label) { margin-top: 18px; color: rgba(11,11,12,.65); line-height: 1.58; }
.dl-audience-copy .dl-checks { margin-top: 22px; gap: 11px; }
.dl-audience-copy .btn { margin-top: 28px; }

.dl-checks { display: grid; gap: 8px; margin-top: 16px; }
.dl-checks li { position: relative; padding-left: 23px; color: rgba(11,11,12,.73); font-size: 13px; line-height: 1.38; }
.dl-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--violet); font-weight: 900; }

.dl-table {
  position: relative;
  background: #eeebf7;
  overflow: hidden;
}
.dl-table::before {
  content: "";
  position: absolute;
  width: min(42vw, 580px);
  aspect-ratio: 1;
  right: 2vw;
  top: 5%;
  border: 2px solid rgba(139,63,209,.16);
  border-radius: 43% 57% 62% 38% / 46% 37% 63% 54%;
  transform: rotate(18deg);
}
.dl-table-intro { max-width:850px; margin-left:auto; text-align:right; }
.dl-table-intro .lede { margin-left:auto; }
.dl-table-photo { position: relative; margin-inline: 0; min-height: min(65vw, 720px); overflow: hidden; border-radius: var(--radius-l); background: var(--ink); }
.dl-table-photo > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: brightness(.74) saturate(.92); }
.dl-table-photo figcaption { position: absolute; inset: 0; }
.dl-callout { position: absolute; max-width: 290px; padding: 18px 24px; background: rgba(250,250,248,.98); color: var(--ink); border: 2px solid var(--bubble, var(--magenta)); border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 1.3; backdrop-filter: blur(8px); box-shadow: 5px 5px 0 var(--bubble, var(--magenta)); }
.dl-callout b { display: block; margin-bottom: 5px; color: var(--magenta); font-size: 11px; letter-spacing: .15em; }
.dl-callout::before,
.dl-callout::after { content: ""; position: absolute; left: 31px; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.dl-callout::before { width: 30px; height: 21px; bottom: -18px; background: var(--bubble, var(--magenta)); }
.dl-callout::after { width: 22px; height: 15px; bottom: -12px; left: 34px; background: var(--paper); }
.dl-callout-a { --bubble:var(--magenta); left: 50%; top: 50%; transform:translate(-50%,-50%); }
.dl-callout-b { --bubble:var(--blauw); left: 50%; top: 6%; transform:translateX(-50%); }
.dl-callout-c { --bubble:var(--zon); left: calc(8% + 15px); bottom: calc(10% + 30px); }
.dl-callout-d { --bubble:var(--mint); right: 6%; bottom: 9%; }
.dl-photo-disclosure { position:absolute; right:16px; bottom:16px; padding:8px 11px; background:rgba(11,11,12,.78); color:rgba(250,250,248,.76); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

.dl-detail-row { display: grid; grid-template-columns: .7fr 1fr 1.1fr; gap: clamp(16px,3vw,38px); align-items: stretch; margin-top: 22px; }
.dl-detail-row figure { min-height: 280px; margin: 0; overflow: hidden; border-radius: var(--radius); }
.dl-detail-row figure img { width: 100%; height: 100%; object-fit: cover; }
.dl-detail-row blockquote { display: flex; position:relative; isolation:isolate; overflow:hidden; flex-direction: column; justify-content: space-between; margin: 0; padding: 32px; background: var(--violet); color:var(--paper); border-radius: var(--radius); }
.dl-detail-row blockquote > span,.dl-detail-row blockquote > p { position:relative; z-index:2; }
.dl-detail-row blockquote p { margin-top: 30px; max-width:16ch; font-size: clamp(27px,3vw,43px); font-weight: 800; line-height: .98; letter-spacing: -.045em; }
.dl-liquid-canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.95; }
.dl-liquid-spark { position:absolute; z-index:2; width:74px; right:12px; top:8px; transform:rotate(11deg); animation:dl-prop-hover 4.4s ease-in-out infinite; }
@keyframes dl-prop-hover {
  0%, 100% { transform:translateY(0) rotate(11deg); }
  50% { transform:translateY(-10px) rotate(4deg); }
}
.dl-run-sheet { padding: 28px; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.dl-run-sheet ol { display: grid; gap: 0; margin: 17px 0 0; padding: 0; list-style: none; }
.dl-run-sheet li { display: grid; grid-template-columns: 70px 1fr; gap: 15px; padding: 15px 0; border-top: 1px solid var(--line-dark); font-size: 16px; line-height: 1.35; }
.dl-run-sheet li b { color: var(--mint); font-size: 13px; letter-spacing: .08em; }

.dl-audience,
.dl-table,
.dl-labs,
.dl-packages,
.dl-proof { position:relative; isolation:isolate; overflow:visible; }
.dl-audience > .wrap,
.dl-table > .wrap,
.dl-labs > .wrap,
.dl-packages > .wrap,
.dl-proof > .wrap { position:relative; z-index:2; }
.dl-lab-rail-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.dl-lab-rail-status {
  color:rgba(250,250,248,.62);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dl-lab-rail-buttons { display:flex; gap:9px; }
.dl-lab-rail-button {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--zon);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.28);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s ease;
}
.dl-lab-rail-button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.dl-lab-rail-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 7px 0 rgba(0,0,0,.28); }
.dl-lab-rail-button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.28); }
.dl-lab-rail-button:focus-visible { outline:3px solid var(--paper); outline-offset:3px; }
.dl-lab-rail-button:disabled { opacity:.34; cursor:default; box-shadow:none; }
.dl-lab-rail {
  display:flex;
  gap:clamp(14px,1.5vw,22px);
  margin-top:12px;
  padding:4px clamp(40px,7vw,110px) 28px 2px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  scrollbar-width:none;
  cursor:grab;
  touch-action:auto;
  user-select:none;
  -webkit-user-select:none;
  -webkit-overflow-scrolling:touch;
}
.dl-lab-rail::-webkit-scrollbar { display:none; }
.dl-lab-rail::after { content:""; flex:0 0 calc(100% - clamp(260px,38vw,420px) - 2px); }
.dl-lab-rail.is-dragging { cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.dl-lab-rail img { pointer-events:none; -webkit-user-drag:none; }
.dl-lab-card {
  flex:0 0 clamp(260px,38vw,420px);
  position: relative;
  min-height: 470px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 26px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--paper);
  background: #151518;
  text-decoration: none;
  isolation: isolate;
  -webkit-user-drag:none;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.dl-lab-card-wide { grid-column: span 3; }
.dl-lab-card[data-lab="slime"],
.dl-lab-card[data-lab="canvas"] { min-height: 510px; }
.dl-lab-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .65s var(--ease); }
.dl-lab-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 43%, rgba(5,5,8,.58) 0 24%, rgba(5,5,8,.34) 48%, transparent 76%), linear-gradient(180deg, rgba(11,11,12,.05) 12%, rgba(11,11,12,.28) 52%, rgba(11,11,12,.95) 94%); z-index: 1; }
.dl-lab-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--lab); z-index: 3; }
.dl-lab-card:hover > img { transform: scale(1.035); }
.dl-lab-title-art { position:absolute; z-index:2; left:50%; top:43%; width:58%; transform:translate(-50%,-50%) rotate(-2deg); pointer-events:none; filter:drop-shadow(0 16px 18px rgba(0,0,0,.38)); transition:transform .45s var(--ease); }
.dl-lab-title-art img { display:block; width:100%; height:auto; }
.dl-lab-card[data-lab="canvas"] .dl-lab-title-art { width:62%; transform:translate(-50%,-50%) rotate(2deg); }
.dl-lab-card[data-lab="football"] .dl-lab-title-art { width:68%; top:42%; }
.dl-lab-card[data-lab="bear"] .dl-lab-title-art { width:72%; top:40%; }
.dl-lab-card[data-lab="garden"] .dl-lab-title-art { width:72%; top:43%; }
.dl-lab-card:hover .dl-lab-title-art { transform:translate(-50%,calc(-50% - 8px)) rotate(1deg) scale(1.035); }
.dl-section-prop { position:absolute; z-index:4; display:block; top:0; width:clamp(230px,18vw,370px); pointer-events:none; user-select:none; filter:drop-shadow(0 24px 30px rgba(11,11,12,.3)); animation:dl-section-prop-float 6s ease-in-out infinite; }
.dl-section-prop img { display:block; width:100%; height:auto; }
.dl-table { padding-bottom:clamp(120px,9vw,180px); }
.dl-labs { padding-top:clamp(150px,12vw,230px); padding-bottom:clamp(100px,8vw,160px); }
.dl-packages { padding-top:clamp(120px,10vw,200px); }
.dl-section-prop[data-section-prop="garden"] { width:clamp(260px,19vw,360px); right:clamp(150px,11vw,340px); transform:translateY(-48%) rotate(8deg); }
.dl-section-prop[data-section-prop="canvas"] { left:clamp(150px,11vw,340px); top:130px; width:clamp(297px,22.08vw,455px); transform:translateY(-51%) rotate(-8deg); animation-delay:-1.2s; }
.dl-section-prop[data-section-prop="slime"] { right:clamp(150px,11vw,340px); width:clamp(250px,19vw,390px); transform:translateY(-50%) rotate(10deg); animation-delay:-2.4s; }
.dl-section-prop[data-section-prop="football"] { left:50%; width:clamp(230px,17vw,330px); transform:translateY(-50%) rotate(-8deg); animation-delay:-3.6s; }
.dl-section-prop[data-section-prop="bear"] { right:clamp(150px,11vw,340px); width:clamp(230px,17vw,340px); transform:translateY(-46%) rotate(7deg); animation-delay:-4.8s; }
@keyframes dl-section-prop-float { 0%,100%{translate:0 0; rotate:-1deg} 50%{translate:0 -14px; rotate:2deg} }
.dl-lab-index { position: absolute; z-index: 2; top: 23px; left: 24px; color: var(--paper); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.dl-lab-card > div { position: relative; z-index: 2; }
.dl-lab-card > div > span { color: rgba(250,250,248,.6); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.dl-lab-card h3 { margin-top: 8px; font-size: clamp(30px,3.2vw,48px); }
.dl-lab-card p { max-width: 40ch; margin-top: 10px; color: rgba(250,250,248,.68); font-size: 13px; }
.dl-lab-card-type { background: var(--lab); color: var(--ink); }
.dl-lab-card-type::before { background: radial-gradient(circle at 80% 18%, rgba(255,255,255,.54), transparent 42%), linear-gradient(180deg, transparent 30%, rgba(250,250,248,.84) 100%); }
.dl-lab-card-type::after { background: var(--ink); }
.dl-lab-card-type > strong { position: absolute; z-index: 2; right: -10px; top: 20%; color: rgba(250,250,248,.2); font-size: clamp(70px,10vw,148px); line-height: .7; letter-spacing: -.08em; transform: rotate(90deg) translateX(40%); transform-origin: right top; }
.dl-lab-card-type .dl-lab-index, .dl-lab-card-type > div > span { color: rgba(11,11,12,.55); }
.dl-lab-card-type p { color: rgba(11,11,12,.65); }

.dl-package-builder { display: block; }
.dl-package-scroll-hint { display:none; }
.dl-package-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; background: transparent; }
.dl-package-tabs.is-draggable { cursor:grab; user-select:none; -webkit-user-select:none; scroll-padding-inline:20px; }
.dl-package-tabs.is-draggable button { cursor:grab; }
.dl-package-tabs.is-dragging { scroll-snap-type:none; scroll-behavior:auto; }
.dl-package-tabs.is-dragging, .dl-package-tabs.is-dragging button { cursor:grabbing; }
.dl-package-tabs button { position:relative; min-height: 124px; padding: 21px 24px; border: 2px solid var(--ink); border-radius: 22px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; box-shadow: 0 7px 0 rgba(11,11,12,.13); transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.dl-package-tabs button:nth-child(1) { transform:rotate(-.7deg); }
.dl-package-tabs button:nth-child(2) { transform:translateY(5px) rotate(.5deg); }
.dl-package-tabs button:nth-child(3) { transform:rotate(-.35deg); }
.dl-package-tabs small { display:block; margin-bottom:13px; color:var(--magenta); font-size:10px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.dl-package-tabs span { display: inline-block; font-size: clamp(22px,2.3vw,32px); font-weight: 900; letter-spacing:-.04em; }
.dl-package-tabs b { float:right; display:inline-block; margin-top:4px; padding:7px 10px 6px; border:1px solid currentColor; border-radius:4px; color:rgba(11,11,12,.72); background:#fff2b9; font-size:clamp(14px,1.35vw,19px); line-height:1; box-shadow:3px 3px 0 rgba(11,11,12,.12); transform:rotate(2.5deg); }
.dl-package-tabs button:nth-child(2) b { background:#f0e5ff; transform:rotate(-2deg); }
.dl-package-tabs button:nth-child(3) b { background:#dcfaf2; transform:rotate(1.4deg); }
.dl-package-tabs button:hover { transform:translateY(-3px) rotate(0); }
.dl-package-tabs button.is-active { background: var(--ink); color: var(--paper); box-shadow: 0 8px 0 var(--magenta); transform:translateY(-5px) rotate(0); }
.dl-package-tabs button.is-active b { border-color:var(--zon); color:var(--ink); background:var(--zon); box-shadow:3px 3px 0 var(--magenta); }
.dl-package-tabs button.is-active small { color:var(--zon); }
.dl-package-panel { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); min-height: 540px; margin-top:32px; overflow:hidden; border:1px solid var(--line); border-radius:32px; background: #fff; box-shadow:var(--shadow-soft); }
.dl-package-panel.is-changing .dl-package-visual img { opacity:0; transform:scale(1.025); }
.dl-package-panel.is-changing .dl-package-copy { opacity:.72; transform:translateY(5px); }
.dl-package-visual { position:relative; min-height:540px; padding:10px; background:#d7d2ec; }
.dl-package-visual::before { content:""; position:absolute; z-index:3; width:112px; height:25px; left:50%; top:0; background:rgba(255,193,38,.82); transform:translate(-50%,-5px) rotate(-2deg); mix-blend-mode:multiply; }
.dl-package-visual figure { position: relative; height:100%; min-height:520px; margin: 0; overflow: hidden; border-radius:24px; background: var(--ink); }
.dl-package-visual img { width: 100%; height: 100%; object-fit: cover; transition:opacity .22s ease, transform .6s var(--ease); }
.dl-package-visual figcaption { position: absolute; left: 22px; bottom: 22px; display:grid; gap:5px; max-width:calc(100% - 44px); padding: 12px 15px; border:2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow:5px 5px 0 var(--magenta); }
.dl-package-visual figcaption b { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.dl-package-visual figcaption span { font-size:12px; font-weight:700; }
.dl-package-copy { position:relative; padding: clamp(42px,5.5vw,76px); align-self: stretch; display:flex; flex-direction:column; justify-content:center; background:#fffdf5; transition:opacity .2s ease, transform .2s ease; }
.dl-package-copy::before { content:"+"; position:absolute; right:24px; top:15px; color:var(--violet); font-size:58px; font-weight:300; line-height:1; transform:rotate(12deg); }
.dl-package-copy h3 { margin-top: 12px; font-size: clamp(33px,4vw,58px); }
.dl-package-copy > p:not(.label) { margin-top: 16px; color: rgba(11,11,12,.64); }
.dl-package-copy .btn { margin-top: 26px; }
.dl-package-copy small { display: block; margin-top: 17px; color: rgba(11,11,12,.46); font-size: 10px; line-height: 1.45; }

.dl-proof { background: var(--paper-2); }
.dl-proof-grid { display:grid; grid-template-columns:minmax(260px,.68fr) minmax(0,1.72fr); gap:clamp(20px,3vw,46px); align-items:stretch; }
.dl-proof-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,4vw,56px); background: var(--paper); border-radius: var(--radius); }
.dl-proof-copy .dl-text-link { margin-top: 30px; }
.dl-proof-stack { position:relative; min-height:610px; isolation:isolate; }
.dl-proof-stack::before,
.dl-proof-stack::after { content:""; position:absolute; inset:24px 64px 20px 28px; z-index:-2; border:12px solid var(--paper); border-radius:var(--radius); background:#cabcf5; box-shadow:var(--shadow-lift); transform:rotate(-3.2deg); }
.dl-proof-stack::after { inset:18px 42px 28px 48px; z-index:-1; background:#ffd768; transform:rotate(2.6deg); }
.dl-proof-card { position:absolute; inset:12px 50px 18px 38px; margin:0; overflow:hidden; border:12px solid var(--paper); border-radius:var(--radius); background:var(--ink); box-shadow:0 24px 52px rgba(11,11,12,.24); transform:rotate(var(--photo-tilt,0deg)); transform-origin:50% 70%; }
.dl-proof-card img { display:block; width:100%; height:100%; object-fit:cover; }
.dl-proof-card.is-landing { animation:dl-photo-land .58s cubic-bezier(.2,.85,.22,1.15) both; }
@keyframes dl-photo-land {
  from { opacity:0; transform:translate(70px,-38px) rotate(calc(var(--photo-tilt,0deg) + 8deg)) scale(.88); }
  to { opacity:1; transform:translate(0,0) rotate(var(--photo-tilt,0deg)) scale(1); }
}
.dl-proof-stack-meta { position:absolute; z-index:12; left:16px; bottom:2px; display:flex; align-items:center; gap:10px; padding:9px 13px; border:2px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--magenta); transform:rotate(-1.5deg); }
.dl-proof-stack-meta b { font-size:11px; letter-spacing:.1em; }
.dl-proof-stack-meta span { font-size:10px; font-weight:800; text-transform:uppercase; }
.dl-proof-next { position:absolute; z-index:14; right:10px; top:50%; display:grid; place-items:center; width:72px; aspect-ratio:1; border:3px solid var(--ink); border-radius:50%; background:var(--zon); color:var(--ink); box-shadow:0 10px 0 rgba(11,11,12,.18); cursor:pointer; transform:translateY(-50%) rotate(-4deg); transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.dl-proof-next:hover { transform:translateY(calc(-50% - 5px)) rotate(2deg); box-shadow:0 15px 0 rgba(11,11,12,.14); }
.dl-proof-next svg { width:34px; height:34px; }

.dl-feedback { position:relative; z-index:1; overflow:clip; }
.dl-closer { position: relative; z-index:2; padding-block: clamp(90px,11vw,160px); overflow: visible; }
.dl-closer::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: linear-gradient(90deg,var(--magenta),var(--violet)); }
.dl-closer-grid { position:relative; z-index:2; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px,8vw,130px); align-items: end; }
.dl-closer-copy > p { max-width: 46ch; color: rgba(250,250,248,.67); font-size: 18px; }
.dl-closer-copy .dl-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dl-closer-copy .dl-actions > a { width:100%; min-height:54px; justify-content:center; padding-inline:18px; text-align:center; }
.dl-closer-copy .dl-text-link { border:1px solid rgba(250,250,248,.3); border-radius:999px; text-decoration:none; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.dl-closer-copy .dl-text-link:hover { color:var(--ink); border-color:var(--paper); background:var(--paper); transform:translateY(-2px); }
.dl-closer-doodle { position:absolute; z-index:1; pointer-events:none; user-select:none; filter:drop-shadow(0 14px 20px rgba(0,0,0,.28)); }
.dl-closer-doodle-orbit { width:clamp(120px,13vw,210px); left:19%; bottom:7%; animation:dl-float-orbit 7s ease-in-out infinite; }
.dl-closer-doodle-lightning { width:clamp(78px,8vw,126px); left:43%; top:9%; animation:dl-float-lightning 4.8s ease-in-out infinite; }
.dl-closer-doodle-infinity { width:clamp(112px,12vw,190px); right:14%; bottom:10%; animation:dl-float-infinity 6s ease-in-out infinite; }
.dl-closer-bear { display:none; }
@media (min-width: 811px) {
  .dl-feedback { padding-bottom:clamp(220px,20vw,320px); }
  .dl-proof .dl-section-prop[data-section-prop="bear"] { display:none; }
  .dl-closer { padding-block:clamp(84px,7vw,112px); }
  .dl-closer-heading { position:relative; }
  .dl-closer-doodle-orbit { left:0; top:100%; bottom:auto; margin-top:22px; z-index:2; animation-name:dl-float-orbit-under; }
  .dl-closer-copy { position:relative; min-width:0; }
  .dl-closer-bear {
    display:block;
    position:absolute;
    right:calc(clamp(0px,3vw,60px) + clamp(49.5px,4.5vw,72px));
    bottom:0;
    width:clamp(561px,51vw,816px);
    pointer-events:none;
    user-select:none;
    z-index:3;
    transform-origin:50% 50%;
    filter:drop-shadow(0 24px 30px rgba(11,11,12,.3));
    transform:translateY(60%) rotate(7deg);
    animation:dl-section-prop-float 6s ease-in-out infinite;
    animation-delay:-4.8s;
  }
  .dl-closer-bear img { display:block; width:100%; height:auto; }
  .dl-closer-doodle-infinity { display:none; }
}
@keyframes dl-float-orbit { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translate(12px,-15px) rotate(2deg)} }
@keyframes dl-float-orbit-under { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translate(10px,8px) rotate(2deg)} }
@keyframes dl-float-lightning { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(-17px) rotate(-4deg)} }
@keyframes dl-float-infinity { 0%,100%{transform:scale(.94) rotate(4deg)} 50%{transform:scale(1.07) rotate(-5deg)} }

@media (max-width: 1100px) {
  .dl-hero { min-height: auto; }
  .dl-hero-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .dl-hero-title { font-size: clamp(54px,7.8vw,86px); }
  .dl-hero-visual { min-height: 600px; }
  .dl-audience-tabs { justify-content: flex-start; }
  .dl-audience-tab { flex: 0 0 auto; min-height: 78px; }
  .dl-audience-panel { grid-template-columns:1fr; height:auto; }
  .dl-audience-image { aspect-ratio:16 / 9; height:auto; min-height:0; }
  .dl-lab-card, .dl-lab-card-wide { grid-column: span 3; }
  .dl-proof-grid { grid-template-columns: 1fr 1.25fr; }
  .dl-proof-stack { min-height:540px; }
}

@media (max-width: 1320px) {
  .dl-social-rail { display:none; }
  .dl-doodle-loop { display:none; }
  .dl-section-prop { width:190px; }
  .dl-section-prop[data-section-prop="canvas"] { width:235px; left:56px; }
  .dl-table { padding-bottom:210px; }
  .dl-labs { padding-top:150px; padding-bottom:170px; }
  .dl-packages { padding-top:100px; }
  .dl-section-prop[data-section-prop="garden"] { width:350px; right:56px; }
  .dl-section-prop[data-section-prop="slime"] { width:205px; right:56px; }
  .dl-section-prop[data-section-prop="football"] { width:277.5px; left:50%; }
  .dl-section-prop[data-section-prop="bear"] { width:190px; right:56px; }
}

@media (min-width: 811px) and (max-width: 1100px) {
  .dl-table { overflow-x:clip; overflow-y:visible; }
  .dl-doodle-underline { top:calc(100% - 20px); }
  .dl-audience-image { height:auto; min-height:0; }
  .dl-proof-next { right:10px; }
}

@media (max-width: 810px) {
  .dl-table { overflow-x: clip; overflow-y: visible; }
  .dl-hero { padding-top: 116px; }
  .dl-hero-grid, .dl-section-head, .dl-audience-stage, .dl-package-builder, .dl-package-panel, .dl-closer-grid { grid-template-columns: 1fr; }
  .dl-hero-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .dl-hero-copy { order:1; min-width:0; }
  .dl-hero-visual { order:0; height:clamp(480px,72vw,580px); min-height:0; max-height:none; }
  .dl-hero-title { margin-top: 12px; }
  .dl-hero-title span { white-space: normal; }
  .dl-hero-lede { margin-top: 58px; }
  .dl-doodle-crown { right:.08em; top:-.72em; }
  .dl-photo-note { left: 12px; }
  .dl-seal { right: 6px; top: 22px; width: 104px; }
  .dl-audience-tabs { display: grid; grid-template-columns: repeat(5, minmax(160px,1fr)); grid-template-rows: none; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
  .dl-audience-tab { min-height: 86px; border-bottom: 0; border-right: 1px solid var(--line); font-size: 14px; }
  .dl-audience-tab:hover, .dl-audience-tab.is-active { padding-left: 24px; }
  .dl-audience-panel { min-height: 0; }
  .dl-detail-row { grid-template-columns: 1fr 1fr; }
  .dl-detail-row figure { display: none; }
  .dl-package-tabs { display: grid; grid-template-columns: repeat(3,1fr); }
  .dl-package-tabs button { min-height: 94px; }
  .dl-package-visual { min-height: 440px; }
  .dl-proof-next { right:-18px; width:64px; }
  .dl-section-prop[data-section-prop="canvas"] { width:258px; left:20px; right:auto; }
  .dl-table { padding-bottom:160px; }
  .dl-labs { padding-top:120px; padding-bottom:130px; }
  .dl-packages { padding-top:100px; }
  .dl-section-prop[data-section-prop="garden"] { width:252px; right:42px; top:-50px; }
  .dl-section-prop[data-section-prop="slime"] { width:170.4px; right:42px; top:-28px; }
  .dl-section-prop[data-section-prop="football"] { width:198px; left:auto; right:42px; }
  .dl-section-prop[data-section-prop="bear"] { width:264px; right:24px; }
}

/* Apply the complete mobile layout throughout the single-column range. */
@media (max-width: 810px) {
  .dl-hero { padding-bottom: 42px; }
  .dl-hero-visual { min-height: 480px; }
  .dl-hero-visual::before { inset: 5% -10% 0 5%; }
  .dl-hero-title { font-size: clamp(38px,11vw,72px); margin-top: 8px; }
  .dl-hero-lede { margin-top: 64px; }
  .dl-doodle-crown { width:72px; top:-.72em; right:.08em; }
  .dl-doodle-underline { width:92%; height:auto; left:4%; top:calc(100% - 37px); transform:rotate(5deg); }
  .dl-section-prop[data-section-prop="canvas"] { width:237px; left:20px; right:auto; }
  .dl-hero .dl-actions { grid-template-columns:1fr; width:100%; }
  .dl-hero-facts { grid-template-columns: 1fr; }
  .dl-hero-facts div, .dl-hero-facts div + div { padding: 13px 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .dl-hero-facts div:first-child { border-top: 0; }
  .dl-audience-image { height:auto; min-height:0; }
  .dl-audience-copy { padding: 28px 22px 34px; }
  .dl-table-photo { min-height: 560px; }
  .dl-callout { max-width: 190px; font-size: 11px; padding: 12px 14px; }
  .dl-photo-disclosure { left:12px; right:auto; bottom:12px; max-width:75%; font-size:8px; }
  .dl-callout-a { left: 12px; top: 14px; transform:none; }
  .dl-callout-b { left:auto; right:12px; top:102px; transform:none; }
  .dl-callout-c { left:27px; bottom:126px; }
  .dl-callout-d { right: 12px; bottom: 14px; }
  .dl-detail-row { grid-template-columns: 1fr; }
  .dl-lab-rail { grid-template-columns: 1fr; }
  .dl-lab-card, .dl-lab-card-wide { grid-column: auto; min-height: 470px; }
  .dl-lab-card[data-lab="canvas"] .dl-lab-title-art { width:76%; }
  .dl-package-tabs {
    display:flex;
    gap:12px;
    margin-inline:-20px;
    padding:8px 20px 14px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .dl-package-scroll-hint {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    margin:0 0 7px;
    color:rgba(11,11,12,.62);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .dl-package-scroll-hint span {
    display:grid;
    place-items:center;
    width:34px;
    aspect-ratio:1;
    border:2px solid var(--ink);
    border-radius:50%;
    background:var(--zon);
    color:var(--ink);
    font-size:23px;
    line-height:1;
  }
  .dl-package-tabs::-webkit-scrollbar { display:none; }
  .dl-package-tabs button {
    flex:0 0 min(78vw,310px);
    min-height:112px;
    padding:18px 17px;
    scroll-snap-align:start;
  }
  .dl-package-tabs span { font-size:22px; }
  .dl-package-tabs b { float:right; margin-top:4px; padding:7px 8px; font-size:13px; }
  .dl-package-visual { min-height: 390px; }
  .dl-package-copy { padding: 30px 22px 36px; }
  .dl-proof-grid { grid-template-columns: 1fr; }
  .dl-proof-stack { min-height:440px; }
  .dl-proof-card { inset:10px 24px 20px 20px; border-width:8px; }
  .dl-proof-stack::before,.dl-proof-stack::after { inset:18px 30px 20px 20px; border-width:8px; }
  .dl-proof-next { right:4px; width:58px; }
  .dl-proof-stack-meta span { display:none; }
  .dl-closer-doodle-orbit { left:2%; bottom:2%; }
  .dl-closer-doodle-lightning { left:auto; right:6%; top:7%; }
  .dl-closer-doodle-infinity { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-ticker-track { animation: none; }
  .dl-liquid-spark { animation: none; }
  .dl-proof-card.is-landing,.dl-closer-doodle,.dl-closer-bear,.dl-section-prop { animation:none; }
}

/* Keep feedback readable and let the orbit cross the closer/footer seam. */
.dl-feedback {
  --centered-bear-width:clamp(346.8px,31.62vw,510px);
  padding-top:calc(var(--stack) * .7 - 21px);
  padding-bottom:calc(var(--centered-bear-width) * .625 + 48px);
}
.dl-feedback > .dl-closer-bear {
  left:50%;
  right:auto;
  bottom:0;
  width:var(--centered-bear-width);
  transform:translate(-50%,50%) rotate(7deg);
}
@media (min-width:811px) {
  .dl-feedback > .dl-closer-bear { bottom:30px; }
}
.dl-feedback > .wrap-narrow { position:relative; z-index:4; }
.dl-feedback .sm-box { text-align:center; }
.dl-feedback .sm-row { justify-content:center; }
.dl-closer > .dl-closer-doodle-orbit { left:max(24px,calc((100vw - 1280px)/2)); top:auto; bottom:-65px; margin-top:0; z-index:3; }
@media(max-width:810px) {
  .dl-closer > .dl-closer-doodle-orbit { left:24px; bottom:-45px; }
}

@media(max-width:810px) {
  .dl-table-intro { padding-top:166px; }
}

/* Mobile bear peeks over the feedback/closer seam, clear of the rating controls. */
@media (max-width:810px) {
  .dl-proof .dl-section-prop[data-section-prop="bear"] { display:none; }
  .dl-feedback {
    --centered-bear-width:clamp(204px,51vw,285.6px);
    --feedback-bear-width:clamp(300px,70vw,440px);
    padding-top:32px;
    padding-bottom:calc(var(--centered-bear-width) * .625 + 48px);
  }
  .dl-closer-bear {
    display:block;
    position:absolute;
    left:50%;
    bottom:0;
    width:var(--feedback-bear-width);
    pointer-events:none;
    user-select:none;
    transform:translate(-50%,50%) rotate(7deg);
    filter:drop-shadow(0 18px 24px rgba(11,11,12,.3));
  }
  .dl-closer-bear img { display:block; width:100%; height:auto; }
}