/* ════════════════════════════════════════════════════════════════════════════
   MIKODES Daylight — overlay for the product landings (owner-approved look, 2026-11-10).
   Master: MIKODES-BRAIN/DESIGN/daylight-kit/landing/daylight.css — copied into every landing by
   apply_landings.py as /daylight.css and loaded AFTER the landing kit's style.css. Edit the master, re-run.

   The HTML is not regenerated: this file restyles the landing kit's own classes ("Bento" shell) to
   Daylight — Instrument Sans, white / mist surfaces, ink text, indigo only for things you press, pill
   buttons, huge tight headlines, and the hero as one stage: the kit's MacBook / iPhone frames on the
   product's own colour as a wash.

   1  kit landings      html[data-theme="bento"]   (22 pages built by DESIGN/landing-kit)
   2  duo               html[data-dl="duo"]
   3  nfccrypto-card    html[data-dl="nfc"]
   ════════════════════════════════════════════════════════════════════════════ */

/* ═════════ 1 · landing kit ═════════ */

/* tokens. The kit paints with --c / --v (the product colour). Daylight keeps that colour for the wash only,
   so it is captured on <html> first (--wash, --p-*) and <body> then points the kit's accent at indigo. */
html[data-theme="bento"] {
  --dl-paper: #FFFFFF; --dl-mist: #F5F6FB; --dl-ink: #0E1030; --dl-slate: #5C6180; --dl-line: #E6E8F2; --dl-line-2: #C9CCE0;
  --dl-indigo: #3B2DFF; --dl-indigo-deep: #2A1FD9; --dl-open: #17B26A;
  --dl-font: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --p-c: var(--c); --p-c-rgb: var(--c-rgb); --p-on-c: var(--on-c); --p-v: var(--v); --p-v-rgb: var(--v-rgb); --p-on-v: var(--on-v);
  --wash: var(--v); --wash-rgb: var(--v-rgb); --wash2: var(--v);
  --bg: #fff; --bg-rgb: 255 255 255; --surf: 255 255 255; --line: #E6E8F2; --line-2: #DCDFEC;
  --text: #0E1030; --text-2: #33365A; --muted: #5C6180; --grey: #8A8FB0;
  --display: var(--dl-font); --sans: var(--dl-font); --mono: var(--dl-font);
  --r: 28px;
  scroll-padding-top: 96px;
}
/* a neighbouring hue for the second light, where the browser can turn the wheel */
@supports (color: oklch(from red l c h)) {
  html[data-theme="bento"] { --wash2: oklch(from var(--v) l c calc(h + 38)); }
}
html[data-theme="bento"] body {
  --c: #3B2DFF; --c-rgb: 59, 45, 255; --on-c: #fff; --v: #6253FF; --v-rgb: 98, 83, 255; --on-v: #fff; --ct: #3B2DFF; --vt: #3B2DFF;
  background: #fff; color: var(--dl-ink); font-family: var(--dl-font); font-size: 17px; line-height: 1.5; letter-spacing: -.006em;
  text-rendering: optimizeLegibility;
}
html[data-theme="bento"] ::selection { background: rgba(59, 45, 255, .18); }
html[data-theme="bento"] :focus-visible { outline: 3px solid var(--dl-indigo); outline-offset: 3px; border-radius: 8px; }
html[data-theme="bento"] main > section { width: min(1240px, 100% - 48px); }

/* type (inside <main> only: the buy popup that /buy-popup.js appends to <body> keeps its own) */
html[data-theme="bento"] main :is(h1, h2) { font-weight: 600; letter-spacing: -.045em; line-height: .98; }
html[data-theme="bento"] main h2 { font-size: clamp(36px, 4.6vw, 64px); max-width: 14em; }
html[data-theme="bento"] main h3 { font-weight: 600; letter-spacing: -.03em; }
html[data-theme="bento"] main :is(h1, h2) span,
html[data-theme="bento"] .buy-card h2 span { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
  color: #6E7396; animation: none; filter: none; }
html[data-theme="bento"] .sub { color: var(--dl-slate); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; letter-spacing: -.012em; }
html[data-theme="bento"] .kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--dl-slate) !important; font: 600 15px/1.2 var(--dl-font); letter-spacing: -.005em; text-transform: none; }
html[data-theme="bento"] .kicker::before { width: 9px; height: 9px; margin: 0; border-radius: 50%; background: var(--wash);
  box-shadow: 0 0 0 4px rgba(var(--wash-rgb), .18); }
html[data-theme="bento"] .label { font: 600 13px/1.2 var(--dl-font); letter-spacing: .04em; color: var(--dl-slate); }
html[data-theme="bento"] .note, html[data-theme="bento"] .fine { font-family: var(--dl-font); }

/* nav */
html[data-theme="bento"] .nav { padding: 20px max(24px, calc((100% - 1360px) / 2)); border-bottom-color: transparent; }
html[data-theme="bento"] .nav::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="bento"] .scrolled .nav { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--dl-line); }
html[data-theme="bento"] .scrolled .nav::before { background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
html[data-theme="bento"] .nav nav { color: #33365A; font-size: 16px; font-weight: 500; gap: 30px; }
html[data-theme="bento"] .nav nav a { white-space: nowrap; }
html[data-theme="bento"] .nav nav a:hover, html[data-theme="bento"] .nav nav a[aria-current="true"] { color: var(--dl-indigo); }
html[data-theme="bento"] .nav nav a:not(.navbuy)::after { display: none; }
html[data-theme="bento"] .navbuy { border: 1px solid var(--dl-line); border-radius: 999px; padding: 9px 18px; background: #fff; font-size: 15px; font-weight: 600; color: var(--dl-ink) !important; }
html[data-theme="bento"] .nav nav .navbuy:hover { border-color: var(--dl-line-2); color: var(--dl-ink) !important; background: #fff; }
html[data-theme="bento"] .lockup { gap: 12px; }
html[data-theme="bento"] .vlogo { width: 36px; height: 36px; border-radius: 10px; }
html[data-theme="bento"] .lockup:hover .vlogo { transform: none; }
html[data-theme="bento"] .nav .lk { flex-direction: row; align-items: center; gap: 14px; }
html[data-theme="bento"] .lk b { font: 700 20px/1 var(--dl-font); letter-spacing: -.02em; color: var(--dl-ink); }
html[data-theme="bento"] .lk b.long { font-size: 19px; letter-spacing: -.02em; }
html[data-theme="bento"] .lk .by { margin-top: 0; gap: 7px; font: 500 15px/1 var(--dl-font); letter-spacing: 0; color: var(--dl-slate); }
html[data-theme="bento"] .lk .mkm { width: 20px; height: 20px; border-radius: 6px; }
html[data-theme="bento"] .menu-btn { border: 1px solid var(--dl-line); border-radius: 999px; background: #fff; color: var(--dl-ink); width: 42px; height: 42px; }

/* buttons: pills. Indigo is the one colour you press. */
html[data-theme="bento"] .btn { height: 56px; padding: 0 28px; border-radius: 999px; font: 600 17px/1 var(--dl-font); letter-spacing: -.01em; gap: 10px; border: 0; }
html[data-theme="bento"] .btn:not(.btn-ghost) { background: var(--dl-indigo); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(59, 45, 255, .7); }
html[data-theme="bento"] .btn:not(.btn-ghost):hover { background: var(--dl-indigo-deep); transform: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(59, 45, 255, .7); }
html[data-theme="bento"] .btn-ghost { background: #fff; color: var(--dl-ink); box-shadow: inset 0 0 0 1px var(--dl-line); }
html[data-theme="bento"] .btn-ghost:hover { transform: none; box-shadow: inset 0 0 0 1px var(--dl-line-2); }
html[data-theme="bento"] .btn-ghost svg { color: var(--dl-ink); }
html[data-theme="bento"] .btn.btn-sm { height: 42px; padding: 0 20px; border-radius: 999px; font-size: 15px; color: #fff; }
html[data-theme="bento"] .btn.btn-sm.btn-ghost { color: var(--dl-ink); }
html[data-theme="bento"] .btn:hover svg:not(.go) { transform: none; }
html[data-theme="bento"] .pulse-dot { color: #7CF0B8; }
html[data-theme="bento"] .btn-ghost .pulse-dot { color: var(--dl-open); }
/* the store button, in the hero, the final call and the buy box (added by apply_landings.py) */
html[data-theme="bento"] .btn.store { background: #fff; color: var(--dl-indigo); box-shadow: inset 0 0 0 1.5px var(--dl-indigo); }
html[data-theme="bento"] .btn.store:hover { background: #F3F2FF; box-shadow: inset 0 0 0 1.5px var(--dl-indigo); }
html[data-theme="bento"] .btn.store svg { stroke: currentColor; }

/* ── hero: the copy centred, then the product on its own colour ───────────── */
html[data-theme="bento"] body { background:
  radial-gradient(50vw 560px at 0% 0%, rgba(var(--wash-rgb), .16), transparent 70%) no-repeat,
  radial-gradient(50vw 560px at 100% 90px, rgba(var(--wash-rgb), .12), transparent 70%) no-repeat, #fff; }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-theme="bento"] body { background:
    radial-gradient(50vw 560px at 0% 0%, color-mix(in oklab, var(--wash2) 30%, transparent), transparent 70%) no-repeat,
    radial-gradient(50vw 560px at 100% 90px, color-mix(in oklab, var(--wash) 20%, transparent), transparent 70%) no-repeat, #fff; }
}
/* One grid for the whole hero (the kit's two wrappers dissolve), so the order is ours:
   pill, headline, lead, actions, note | the stage | facts | checks. Sizes on the stage are cqw of the hero. */
html[data-theme="bento"] main > section.bento-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; justify-items: center; align-items: start;
  width: min(1360px, 100% - 48px); min-height: 0; padding: 28px 0 0; text-align: center; container-type: inline-size; }
html[data-theme="bento"] .bento-hero > .bh-copy, html[data-theme="bento"] .bento-hero > .bh-grid { display: contents; }
html[data-theme="bento"] .bento-hero .bh-copy > * { position: relative; z-index: 1; grid-column: 1 / -1; order: 0; }
html[data-theme="bento"] .bento-hero .live-pill { grid-row: 1; justify-self: center; min-height: 0; padding: 8px 15px 8px 13px; border: 1px solid rgba(14, 16, 48, .08); border-radius: 999px; background: rgba(255, 255, 255, .72);
  color: var(--dl-ink); font: 600 14.5px/1.2 var(--dl-font); letter-spacing: -.005em; }
html[data-theme="bento"] .bento-hero .live-pill:hover { border-color: rgba(14, 16, 48, .2); }
html[data-theme="bento"] .bento-hero .live-pill i { width: 9px; height: 9px; background: var(--dl-open); box-shadow: 0 0 0 4px rgba(23, 178, 106, .22); animation: none; }
html[data-theme="bento"] .bento-hero .live-pill.nodemo { color: var(--dl-ink); background: rgba(255, 255, 255, .72); border-color: rgba(14, 16, 48, .08); }
html[data-theme="bento"] .bento-hero .live-pill.nodemo i { background: var(--dl-indigo); box-shadow: 0 0 0 4px rgba(59, 45, 255, .2); }
/* one sentence per line; --h1-ch (set on the h1 by apply_landings.py) is the longer sentence in characters,
   so the size is the largest at which that sentence still fits the page */
html[data-theme="bento"] .bento-hero h1 { grid-row: 2; max-width: none; margin: 22px 0 0; color: var(--dl-ink);
  font-size: clamp(40px, min(7vw, calc(205vw / var(--h1-ch, 36))), 100px); line-height: .94; letter-spacing: -.052em; font-weight: 600; text-wrap: balance; }
html[data-theme="bento"] .bento-hero h1 span { display: block; color: inherit; }
html[data-theme="bento"] .bento-hero h1 span::before { content: none; }
html[data-theme="bento"] .bento-hero .lead { grid-row: 3; max-width: 56ch; margin: 24px 0 0; color: #45486B;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.38; letter-spacing: -.012em; text-wrap: pretty; }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-theme="bento"] .bento-hero .lead { color: color-mix(in oklab, var(--wash) 22%, #3A3D61); }
}
html[data-theme="bento"] .bento-hero .lbs { grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 16px; max-width: none; margin-top: 30px; }
html[data-theme="bento"] .bento-hero .lb { flex: none; justify-content: center; height: 56px; min-height: 0; padding: 0 28px; gap: 10px; border: 1px solid transparent; border-radius: 999px;
  font: 600 17px/1 var(--dl-font); letter-spacing: -.01em; white-space: nowrap; transform: none; }
html[data-theme="bento"] .bento-hero .lb svg { display: none; }
html[data-theme="bento"] .bento-hero .lb.dark { background: var(--dl-indigo); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(59, 45, 255, .7); }
html[data-theme="bento"] .bento-hero .lb.dark:hover { background: var(--dl-indigo-deep); }
html[data-theme="bento"] .bento-hero .lb.store { background: #fff; color: var(--dl-indigo); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--dl-indigo); }
html[data-theme="bento"] .bento-hero .lb.store:hover { background: #F3F2FF; }
html[data-theme="bento"] .bento-hero .lb:not(.dark):not(.store) { height: auto; padding: 4px 0 3px; margin: 0 8px; border: 0; border-bottom: 1px solid var(--dl-line-2); border-radius: 0; background: none;
  color: var(--dl-ink); box-shadow: none; }
html[data-theme="bento"] .bento-hero .lb:not(.dark):not(.store):hover { border-bottom-color: var(--dl-ink); box-shadow: none; }
html[data-theme="bento"] .bento-hero .fine { grid-row: 5; max-width: 66ch; margin: 16px 0 0; color: var(--dl-slate); font-size: 14.5px; line-height: 1.45; }

/* the stage: the kit's MacBook and iPhone on the product's colour, cut by the bottom edge */
html[data-theme="bento"] .bento-hero .bh-grid > .t { order: 0; margin: 0; animation: none; contain: none; will-change: auto; }
html[data-theme="bento"] .bento-hero .bh-grid > .t.scr { position: relative; grid-row: 6; grid-column: 1 / -1; justify-self: stretch; display: block; height: 45.6cqw; margin-top: 44px;
  padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; clip-path: inset(-300vh -100vw 0 -100vw); text-align: left; }
html[data-theme="bento"] .bento-hero .bh-grid > .t.scr::after { content: none; }
html[data-theme="bento"] .bento-hero .bh-grid > .t.scr::before { content: ""; display: block; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: -1800px; bottom: 0;
  opacity: 1; pointer-events: none; border-radius: 0;
  background: radial-gradient(72vw 40cqw at 50% 100%, rgba(var(--wash-rgb), .5), transparent 72%), rgba(var(--wash-rgb), .07); }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-theme="bento"] .bento-hero .bh-grid > .t.scr::before {
    background: radial-gradient(72vw 40cqw at 50% 100%, color-mix(in oklab, var(--wash) 62%, #fff), transparent 72%), rgba(var(--wash-rgb), .07); }
}
html[data-theme="bento"] .bento-hero .t.scr > figure { animation: rise .9s var(--ease) .1s both; transform: none; transition: none; }
html[data-theme="bento"] .bento-hero .t.scr > .mac { position: absolute; left: 5cqw; top: 0; width: 82cqw; max-width: none; }
html[data-theme="bento"] .bento-hero .bh-grid:not(:has(> .t.ph)) .t.scr > .mac { left: 9cqw; }
html[data-theme="bento"] .bento-hero .t.scr > .iphone { position: absolute; left: 50%; top: 0; width: 26cqw; margin: 0 0 0 -13cqw; }
html[data-theme="bento"] .bento-hero .bh-grid > .t.ph { position: relative; z-index: 2; grid-row: 6; grid-column: 1 / -1; justify-self: end; align-self: start; display: block;
  width: 17.5cqw; height: 38.6cqw; margin: calc(44px + 7cqw) 4cqw 0 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; clip-path: inset(-20cqw -20cqw 0 -20cqw); }
html[data-theme="bento"] .bento-hero .bh-grid > .t.ph::before { content: none; }
html[data-theme="bento"] .bento-hero .t.ph .iphone { width: 100%; margin: 0; animation: rise .9s var(--ease) .25s both; transform: none; }
html[data-theme="bento"] .bento-hero .t.ph:hover .iphone { transform: none; }
/* the facts under the stage: calm white cards, one row whether the product has one, two or three */
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn) { grid-row: 7; grid-column: span 12; justify-self: stretch; align-self: stretch; height: auto; min-height: 0; margin-top: 16px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 24px 28px; border: 1px solid var(--dl-line); border-radius: 24px; background: #fff; color: var(--dl-ink); box-shadow: none; transform: none; }
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn):has(~ :is(.t.cap, .t.earn)),
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn) ~ :is(.t.cap, .t.earn) { grid-column: span 6; }
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn):has(~ :is(.t.cap, .t.earn) ~ :is(.t.cap, .t.earn)),
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn) ~ :is(.t.cap, .t.earn):has(~ :is(.t.cap, .t.earn)),
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn) ~ :is(.t.cap, .t.earn) ~ :is(.t.cap, .t.earn) { grid-column: span 4; }
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn)::before, html[data-theme="bento"] .bento-hero .bh-grid > .t.earn::after { content: none; }
html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn):hover { transform: none; box-shadow: none; }
html[data-theme="bento"] .bento-hero .t small { font: 500 15px/1.3 var(--dl-font); letter-spacing: -.005em; text-transform: none; color: var(--dl-slate); }
html[data-theme="bento"] .bento-hero .t.cap b, html[data-theme="bento"] .bento-hero .t.cap b.long { margin-top: 6px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--dl-ink);
  font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -.045em; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme="bento"] .bento-hero .t.cap.alt { background: #fff; border-color: var(--dl-line); }
html[data-theme="bento"] .bento-hero a.t.earn { border-color: var(--dl-line); }
html[data-theme="bento"] .bento-hero a.t.earn:hover { border-color: var(--dl-line-2); }
html[data-theme="bento"] .bento-hero .t.earn small { color: var(--dl-slate); line-height: 1.3; }
html[data-theme="bento"] .bento-hero .t.earn b, html[data-theme="bento"] .bento-hero .t.earn.calc-cta b { margin-top: 6px; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
html[data-theme="bento"] .bento-hero .t.earn span, html[data-theme="bento"] .bento-hero .t.earn.calc-cta span { display: none; }
html[data-theme="bento"] .bento-hero .t.earn em, html[data-theme="bento"] .bento-hero .t.earn.calc-cta em { align-self: center; margin-top: 10px; padding: 0; border-radius: 0; background: none; opacity: 1;
  color: var(--dl-indigo); font: 600 15.5px/1.2 var(--dl-font); letter-spacing: -.005em; transform: none; filter: none; }
html[data-theme="bento"] .bento-hero .t.earn:hover em { transform: none; text-decoration: underline; text-underline-offset: 4px; }
/* what you get, in a line under it */
html[data-theme="bento"] .bento-hero .checks { grid-row: 8; justify-content: center; gap: 8px; margin: 22px 0 0; font: 500 14.5px/1.2 var(--dl-font); color: #3A3D61; }
html[data-theme="bento"] .bento-hero .checks li { gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px; background: var(--dl-mist); }
html[data-theme="bento"] .bento-hero .checks svg { stroke: var(--dl-indigo); }

/* devices: lit by the product colour, standing still */
html[data-theme="bento"] .mac::after { left: 3%; right: 3%; bottom: -3.2cqw; height: 6.5cqw; background: rgba(var(--wash-rgb), .5); opacity: .5; filter: blur(2.2cqw); }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-theme="bento"] .mac::after { background: color-mix(in oklab, var(--wash) 55%, #0E1030); opacity: .38; }
}
html[data-theme="bento"] .mac-lid { box-shadow: inset 0 0 0 .18cqw #2c2e33, inset 0 0 0 .35cqw #0b0b0d, 0 0 0 .12cqw #3A3B42; }
html[data-theme="bento"] .ip-body { box-shadow: 0 0 0 .3cqw #26272C, 0 22cqw 28cqw -10cqw rgba(var(--wash-rgb), .45), 0 6cqw 9cqw -3cqw rgba(14, 16, 48, .28); }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-theme="bento"] .ip-body { box-shadow: 0 0 0 .3cqw #26272C, 0 22cqw 28cqw -10cqw color-mix(in oklab, var(--wash) 50%, #0E1030), 0 6cqw 9cqw -3cqw rgba(14, 16, 48, .28); }
}

/* the readable screen under the hero, and the walk */
html[data-theme="bento"] .heroshot { margin-top: 72px; }
html[data-theme="bento"] :is(.heroshot, .walk .wrow) figure:not(.iphone) { border: 1px solid var(--dl-line); border-radius: 24px; box-shadow: 0 30px 60px -34px rgba(14, 16, 48, .28); }
html[data-theme="bento"] :is(.heroshot, .walk) .hbar { display: flex; align-items: center; gap: 7px; padding: 11px 18px; background: var(--dl-mist); border-bottom: 1px solid var(--dl-line); }
html[data-theme="bento"] :is(.heroshot, .walk) .hbar i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dl-line-2); }
html[data-theme="bento"] :is(.heroshot, .walk) .hbar span { margin-left: 8px; font: 500 13.5px/1.2 var(--dl-font); color: var(--dl-slate); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="bento"] :is(.heroshot, .walk .wrow) figcaption { margin-top: 14px; font-size: 15px; color: var(--dl-slate); }
html[data-theme="bento"] .walk .wrow h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; margin-bottom: 18px; }
html[data-theme="bento"] .walk .wph b { font-size: 15px; font-weight: 600; color: var(--dl-ink); }

/* built on */
html[data-theme="bento"] .stack { border-top-color: var(--dl-line); margin-top: 56px !important; }
html[data-theme="bento"] .stack p { font: 600 14px/1 var(--dl-font); letter-spacing: 0; text-transform: none; color: var(--dl-slate); }
html[data-theme="bento"] .stack li { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: #3A3D61; }
html[data-theme="bento"] .stack li::before { color: var(--dl-line-2); }

/* ── sections ─────────────────────────────────────────────────────────────── */
/* steps */
html[data-theme="bento"] .loop li, html[data-theme="bento"] .loop li:last-child { border: 1px solid var(--dl-line); border-radius: 24px; background: #fff; padding: 24px; }
html[data-theme="bento"] .loop li:hover { background: #fff; }
html[data-theme="bento"] .loop li::before { font: 600 14px/1 var(--dl-font); color: var(--dl-slate); font-variant-numeric: tabular-nums; }
html[data-theme="bento"] .loop b { font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
html[data-theme="bento"] .loop span { color: var(--dl-slate); font-size: 16px; }
html[data-theme="bento"] .loop li:last-child, html[data-theme="bento"] .psteps li:last-child { background: var(--dl-ink); border-color: var(--dl-ink); color: #fff; }
html[data-theme="bento"] :is(.loop, .psteps) li:last-child span:last-child, html[data-theme="bento"] .loop li:last-child::before { color: #B9BCD6; opacity: 1; }
/* every white tile: hairline, big radius, no lift, no spotlight */
html[data-theme="bento"] :is(.card, .ring, .pcard, .dcol, .pcard2, .psteps li, .ccard, .svc-card, .cin, .biz-copy, .tabs) { border-color: var(--dl-line); box-shadow: none; }
html[data-theme="bento"] :is(.card, .ring, .pcard, .dcol, .pcard2, .psteps li, .ccard, .t)::before { display: none; }
html[data-theme="bento"] :is(.card, .ring, .svc-card):hover { transform: none; box-shadow: none; border-color: var(--dl-line-2); }
html[data-theme="bento"] .console .ring { border-color: var(--dl-line); }
/* business plan */
html[data-theme="bento"] .psteps li { border-radius: 28px; padding: 24px; }
html[data-theme="bento"] .psteps .pn { width: auto; height: auto; justify-content: start; border-radius: 0; background: none; color: var(--dl-slate) !important; font: 600 14px/1 var(--dl-font); font-variant-numeric: tabular-nums; }
html[data-theme="bento"] .psteps li:last-child .pn { background: none; color: #B9BCD6 !important; }
html[data-theme="bento"] .psteps b { font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
html[data-theme="bento"] .psteps span:last-child { font-size: 16px; }
html[data-theme="bento"] :is(.who, .rev, .pcost) svg { border-radius: 12px; background: var(--dl-mist); stroke: var(--dl-indigo); }
html[data-theme="bento"] .rev li { border-bottom: 1px solid var(--dl-line); }
html[data-theme="bento"] .pcost { border-top-color: var(--dl-line); }
/* calculator: white inputs, an ink result */
html[data-theme="bento"] .cin, html[data-theme="bento"] .cout { border-radius: 28px; }
html[data-theme="bento"] .cout { background: var(--dl-ink); }
html[data-theme="bento"] :is(.cout, .buy-card)::after { content: none; }
html[data-theme="bento"] .cout::before { content: none; }
html[data-theme="bento"] .cout .label { color: #B9BCD6; }
html[data-theme="bento"] .big { font-weight: 600; letter-spacing: -.05em; }
html[data-theme="bento"] .yr, html[data-theme="bento"] .net { color: #B9BCD6; }
html[data-theme="bento"] .bars i b { background: linear-gradient(90deg, #6C5BFF, #A79DFF); }
html[data-theme="bento"] .net.tot b { color: #7CF0B8; }
html[data-theme="bento"] .cout .btn:not(.btn-ghost) { background: #fff; color: var(--dl-indigo); box-shadow: none; }
html[data-theme="bento"] .cout .btn:not(.btn-ghost):hover { background: #F3F2FF; }
html[data-theme="bento"] .cout .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html[data-theme="bento"] .scen { background: var(--dl-mist); border-radius: 999px; }
html[data-theme="bento"] .scen button[aria-pressed="true"] { background: #fff; color: var(--dl-ink); box-shadow: 0 1px 2px rgba(14, 16, 48, .12), 0 6px 14px -8px rgba(14, 16, 48, .3); }
html[data-theme="bento"] .crow output { font: 600 18px/1 var(--dl-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-theme="bento"] .cl small { font: 500 13px/1.3 var(--dl-font); }
html[data-theme="bento"] .crow input::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--dl-indigo) var(--f, 50%), var(--dl-line) var(--f, 50%)); }
html[data-theme="bento"] .crow input::-webkit-slider-thumb { border: 5px solid var(--dl-indigo); box-shadow: 0 2px 6px rgba(14, 16, 48, .2); }
html[data-theme="bento"] .crow input::-moz-range-track { background: var(--dl-line); }
/* how you earn */
html[data-theme="bento"] .biz-copy { border-radius: 28px; }
html[data-theme="bento"] .biz li::before { background: var(--dl-indigo); }
html[data-theme="bento"] .stats { border-top-color: var(--dl-line); }
html[data-theme="bento"] .stats b { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: var(--dl-ink);
  font: 600 36px/1.05 var(--dl-font); letter-spacing: -.045em; }
/* features */
html[data-theme="bento"] .says span { font: 500 14.5px/1.2 var(--dl-font); background: var(--dl-mist); border-color: transparent; color: #3A3D61; }
html[data-theme="bento"] .card { border-radius: 28px; padding: 14px 14px 24px; }
html[data-theme="bento"] .card h3 { font-size: 22px; letter-spacing: -.035em; margin: 20px 10px 6px; }
html[data-theme="bento"] .card p { font-size: 16px; color: var(--dl-slate); margin: 0 10px; }
html[data-theme="bento"] .card p b { color: var(--dl-ink); font-weight: 600; }
html[data-theme="bento"] .card small { margin: auto 10px 0; font: 500 14px/1.35 var(--dl-font); letter-spacing: 0; color: var(--dl-slate) !important; }
html[data-theme="bento"] .card small::before { color: var(--dl-indigo); font-weight: 700; }
html[data-theme="bento"] .card .ic { background: var(--dl-mist); color: var(--dl-indigo); }
html[data-theme="bento"] .card .shot { border-radius: 18px; background: var(--dl-mist); }
html[data-theme="bento"] .card:hover .shot img { transform: none; object-position: top left; }
/* the little product mocks keep the product's own colour: they are its UI, not ours */
html[data-theme="bento"] .mock { --c: var(--p-c); --c-rgb: var(--p-c-rgb); --on-c: var(--p-on-c); --v: var(--p-v); --v-rgb: var(--p-v-rgb); --on-v: var(--p-on-v);
  --mono: "Geist Mono", ui-monospace, monospace; border-radius: 18px; background-color: var(--dl-ink); }
html[data-theme="bento"] .card:hover .mock > *:nth-child(odd) { transform: none; }
html[data-theme="bento"] .feat > .note, html[data-theme="bento"] .note { font: 500 14px/1.4 var(--dl-font); color: var(--dl-slate); }

/* stages: every dark tile becomes the product's colour as daylight */
html[data-theme="bento"] :is(.gal, .tour-stage, .showcase, .biz .showcase) { border-radius: 44px;
  background: radial-gradient(85% 75% at 50% 108%, rgba(var(--wash-rgb), .42), transparent 72%), radial-gradient(70% 70% at 0% 0%, rgba(var(--wash-rgb), .2), transparent 70%), rgba(var(--wash-rgb), .08); }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-theme="bento"] :is(.gal, .tour-stage, .showcase, .biz .showcase) {
    background: radial-gradient(85% 75% at 50% 108%, color-mix(in oklab, var(--wash) 46%, #fff), transparent 72%),
      radial-gradient(70% 70% at 0% 0%, color-mix(in oklab, var(--wash2) 26%, #fff), transparent 70%), color-mix(in oklab, var(--wash) 9%, #fff); }
}
html[data-theme="bento"] .gal::before, html[data-theme="bento"] :is(.showcase, .tour-stage)::after { content: none; }
html[data-theme="bento"] .gal > figure { animation: none; }
html[data-theme="bento"] .gal .g-back { filter: none; opacity: .92; }
html[data-theme="bento"] .showcase:hover .mac, html[data-theme="bento"] .showcase:hover .iphone.d2 { transform: none; }
html[data-theme="bento"] .frame-cta, html[data-theme="bento"] .showcase:hover .frame-cta { background: #fff; color: var(--dl-indigo); font: 600 15px/1 var(--dl-font); padding: 13px 20px;
  box-shadow: 0 10px 24px -12px rgba(14, 16, 48, .4); }
html[data-theme="bento"] :is(.gal, .tour-stage) :focus-visible, html[data-theme="bento"] :is(.showcase, .slide):focus-visible { outline-color: var(--dl-indigo); }
/* tour */
html[data-theme="bento"] .tabs { border-radius: 28px; padding: 10px; }
html[data-theme="bento"] .tabs button { border-radius: 18px; color: var(--dl-slate); font: 500 16px/1.3 var(--dl-font); }
html[data-theme="bento"] .tabs button:hover { background: var(--dl-mist); color: var(--dl-ink); }
html[data-theme="bento"] .tabs button[aria-selected="true"] { background: var(--dl-mist); color: var(--dl-ink); font-weight: 600; }
html[data-theme="bento"] .tabs .n { font: 600 13px/1 var(--dl-font); font-variant-numeric: tabular-nums; color: #8A8FB0; }
html[data-theme="bento"] .tabs button[aria-selected="true"] .n { color: var(--dl-indigo); transform: none; }
html[data-theme="bento"] .tabs .tbar { background: var(--dl-indigo); }
/* trust, console, services, docs */
html[data-theme="bento"] :is(.ring, .svc-card, .dcol, .ccard) { border-radius: 28px; }
html[data-theme="bento"] .ring b { font: 600 14px/1.2 var(--dl-font); letter-spacing: .03em; }
html[data-theme="bento"] .ring span, html[data-theme="bento"] .svc-card > p, html[data-theme="bento"] .svc-pts li { color: var(--dl-slate); }
html[data-theme="bento"] .ring.info b { color: var(--dl-indigo); }
html[data-theme="bento"] .con-host { font: 500 15px/1.3 var(--dl-font); letter-spacing: 0; color: var(--dl-slate); }
html[data-theme="bento"] .svc-ic { border-radius: 12px; background: var(--dl-mist); }
html[data-theme="bento"] .svc-card h3 { font-size: 22px; letter-spacing: -.035em; }
html[data-theme="bento"] .dcol a { border-radius: 12px; font-size: 16px; color: #33365A; }
html[data-theme="bento"] .dcol a:hover { background: var(--dl-mist); color: var(--dl-indigo); }
html[data-theme="bento"] .docs-head .btn { background: var(--dl-indigo); }

/* buy: the one indigo block on the page */
html[data-theme="bento"] .buy-card { border-radius: 56px; padding: 72px 72px 68px; gap: 56px; align-items: center; background-color: var(--dl-indigo);
  background-image: radial-gradient(60% 90% at 100% 0%, #6C5BFF, transparent 60%), radial-gradient(50% 80% at 0% 100%, #2414D8, transparent 60%); }
html[data-theme="bento"] .buy-card .kicker, html[data-theme="bento"] .buy-sec .buy-card .kicker { background: none; border: 0; color: #DAD7FF !important; }
html[data-theme="bento"] .buy-card .kicker::before { background: #7CF0B8; box-shadow: 0 0 0 4px rgba(124, 240, 184, .25); }
html[data-theme="bento"] .buy-card h2 span { color: #C8C2FF; }
html[data-theme="bento"] .inc li { color: #fff; font-size: 19px; letter-spacing: -.015em; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
html[data-theme="bento"] .inc { gap: 0; }
html[data-theme="bento"] .inc li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
html[data-theme="bento"] .inc svg { stroke: #BDB7FF; }
html[data-theme="bento"] .bsvc { border: 0; border-radius: 24px; background: rgba(255, 255, 255, .12); }
html[data-theme="bento"] .bsvc .label { color: #DAD7FF; }
html[data-theme="bento"] .bsvc p:not(.label) { color: #E7E4FF; }
html[data-theme="bento"] .bsvc .btn.btn-sm.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html[data-theme="bento"] .bsvc .btn-ghost svg { color: #fff; }
html[data-theme="bento"] .bsvc .btn.btn-sm.btn-ghost:hover { background: rgba(255, 255, 255, .2); }
html[data-theme="bento"] .buy-box { border-radius: 36px; padding: 40px 32px; background: #fff; box-shadow: 0 30px 60px -30px rgba(10, 5, 90, .6); }
html[data-theme="bento"] .buy-box img { border-radius: 16px; }
html[data-theme="bento"] .price { font: 600 34px/1.05 var(--dl-font); letter-spacing: -.045em; }
html[data-theme="bento"] .price.ask { color: var(--dl-ink); font-size: 30px; }
html[data-theme="bento"] .bbtns .btn { border-radius: 999px; min-height: 56px; }
html[data-theme="bento"] .bbtns .btn.store { background: var(--dl-indigo); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(59, 45, 255, .7); }
html[data-theme="bento"] .bbtns .btn.store:hover { background: var(--dl-indigo-deep); }
html[data-theme="bento"] .bbtns:has(.store) .btn:not(.store) { background: #fff; color: var(--dl-ink); box-shadow: inset 0 0 0 1px var(--dl-line); }
html[data-theme="bento"] .bbtns:has(.store) .btn:not(.store) svg { stroke: var(--dl-ink); }
html[data-theme="bento"] .bnote { color: var(--dl-slate); font-size: 14.5px; }

/* final */
html[data-theme="bento"] .final h2 { font-size: clamp(40px, 5.4vw, 76px); max-width: 12em; }
html[data-theme="bento"] .final .cta { gap: 14px 12px; margin-top: 40px; }
html[data-theme="bento"] .status { background: var(--dl-mist); border-color: transparent; font: 500 14.5px/1.3 var(--dl-font); color: var(--dl-slate); }
html[data-theme="bento"] .status i { background: var(--dl-open); box-shadow: 0 0 0 4px rgba(23, 178, 106, .22); animation: none; }

/* contact, Also by MIKODES, footer */
html[data-theme="bento"] .copy input { border-color: var(--dl-line); background: var(--dl-mist); border-radius: 999px; font: 500 16px var(--dl-font); padding: 0 20px; }
html[data-theme="bento"] .copy button { border-color: var(--dl-line); border-radius: 999px; }
html[data-theme="bento"] .cnote { color: var(--dl-slate); }
html[data-theme="bento"] .pcard { border-radius: 24px; }
html[data-theme="bento"] a.pcard:hover { transform: none; border-color: var(--dl-line-2); box-shadow: none; }
html[data-theme="bento"] .pcard.here { border-color: var(--dl-ink); box-shadow: none; }
html[data-theme="bento"] .pcard b { font-weight: 600; letter-spacing: -.02em; }
html[data-theme="bento"] .pcard .s { color: var(--dl-slate); }
html[data-theme="bento"] .st { font: 600 12px/1.2 var(--dl-font); letter-spacing: .04em; }
html[data-theme="bento"] .st i { box-shadow: none; }
html[data-theme="bento"] .st.here { color: var(--dl-ink) !important; } html[data-theme="bento"] .st.here i { background: var(--dl-ink); }
html[data-theme="bento"] a.pcard:hover .go { color: var(--dl-indigo); }
html[data-theme="bento"] .foot { background: #fff; border-top: 1px solid var(--dl-line); padding-top: 72px;
  padding-left: max(24px, calc((100% - 1240px) / 2)); padding-right: max(24px, calc((100% - 1240px) / 2)); }
html[data-theme="bento"] .fbrand p { color: var(--dl-slate); font-size: 16px; }
html[data-theme="bento"] .foot .label { color: var(--dl-ink); font: 600 15px/1.2 var(--dl-font); letter-spacing: 0; text-transform: none; }
html[data-theme="bento"] .foot ul { color: #3A3D61; font-size: 16px; }
html[data-theme="bento"] .fm:hover, html[data-theme="bento"] .foot ul a:hover { color: var(--dl-indigo); }
html[data-theme="bento"] .fbot { border-top-color: var(--dl-line); font: 400 14.5px/1.45 var(--dl-font); color: var(--dl-slate); }
html[data-theme="bento"] .fbot b { color: var(--dl-ink); }
html[data-theme="bento"] .progress { height: 2px; }
html[data-theme="bento"] .progress i { background: var(--dl-indigo); box-shadow: none; }
html[data-theme="bento"] .mbar { border-color: var(--dl-line); border-radius: 999px; box-shadow: 0 20px 50px -20px rgba(14, 16, 48, .35); }
html[data-theme="bento"] .lightbox { border-color: var(--dl-line); border-radius: 24px; }

/* ── small screens ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* the lockup goes back to two lines (name over "by MIKODES") so the menu keeps one line */
  html[data-theme="bento"] .nav nav { font-size: 15px; gap: 20px; }
  html[data-theme="bento"] .nav .lk { flex-direction: column; align-items: flex-start; gap: 0; }
  html[data-theme="bento"] .nav .lk .by { margin-top: 4px; font-size: 12.5px; gap: 5px; }
  html[data-theme="bento"] .nav .lk .mkm { width: 15px; height: 15px; border-radius: 4px; }
  html[data-theme="bento"] .navbuy { padding: 8px 15px; font-size: 14.5px; }
}
@media (max-width: 1024px) {
  html[data-theme="bento"] .nav nav { font-size: 14.5px; gap: 15px; }
}
@media (max-width: 900px) {
  html[data-theme="bento"] .nav nav { gap: 0; border-color: var(--dl-line); border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(14, 16, 48, .3); font-size: 17px; }
  html[data-theme="bento"] .nav nav a:hover { background: var(--dl-mist); }
  html[data-theme="bento"] .nav nav .navbuy { border: 0; background: none; color: var(--dl-indigo) !important; padding: 13px 12px; font-size: inherit; }
  html[data-theme="bento"] :is(.gal, .tour-stage, .showcase, .biz .showcase) { border-radius: 32px; }
  html[data-theme="bento"] .buy-card { border-radius: 40px; padding: 48px 40px; }
}
@media (max-width: 720px) {
  html[data-theme="bento"] body { font-size: 16.5px; }
  html[data-theme="bento"] .nav { padding-top: 14px; padding-bottom: 14px; }
  html[data-theme="bento"] .nav .lk .by { font-size: 11.5px; }
  html[data-theme="bento"] .btn { height: 52px; padding: 0 22px; font-size: 16px; }
  html[data-theme="bento"] .btn.btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
  html[data-theme="bento"] main > section.bento-hero { width: calc(100% - 32px); padding-top: 14px; column-gap: 12px; }
  html[data-theme="bento"] .bento-hero h1 { font-size: clamp(38px, 11.4vw, 56px); margin-top: 20px; }
  html[data-theme="bento"] .bento-hero .lead { margin-top: 18px; font-size: 18px; }
  html[data-theme="bento"] .bento-hero .lbs { margin-top: 26px; gap: 12px 8px; justify-self: stretch; }
  html[data-theme="bento"] .bento-hero .lb { height: 52px; padding: 0 22px; font-size: 16px; }
  html[data-theme="bento"] .bento-hero .lb:is(.dark, .store) { flex: 1 1 100%; }
  html[data-theme="bento"] .bento-hero .lb:not(.dark):not(.store) { height: auto; margin: 8px 8px 0; font-size: 16px; }
  html[data-theme="bento"] .bento-hero .bh-grid > .t.scr { height: 66cqw; margin-top: 36px; padding: 0; }
  html[data-theme="bento"] .bento-hero .t.scr > .mac { width: 96cqw; left: -4cqw; }
  html[data-theme="bento"] .bento-hero .bh-grid:not(:has(> .t.ph)) .t.scr > .mac { width: 100cqw; left: 0; }
  html[data-theme="bento"] .bento-hero .t.scr > .iphone { width: 46cqw; margin-left: -23cqw; }
  html[data-theme="bento"] .bento-hero .bh-grid > .t.ph { width: 27cqw; height: 53cqw; margin: calc(36px + 13cqw) 2cqw 0 0; }
  html[data-theme="bento"] .bento-hero .bh-grid > :is(.t.cap, .t.earn) { grid-column: span 12 !important; grid-row: auto; margin-top: 12px; padding: 18px 22px; border-radius: 20px; }
  html[data-theme="bento"] .bento-hero .checks { grid-row: 20; margin-top: 16px; }
  html[data-theme="bento"] .bento-hero .checks li { font-size: 13.5px; }
  html[data-theme="bento"] .bento-hero .live-pill { max-width: 100%; font-size: 13px; padding: 7px 13px 7px 11px; }
  html[data-theme="bento"] .bento-hero .live-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-theme="bento"] .heroshot { margin-top: 44px; }
  html[data-theme="bento"] :is(.heroshot, .walk .wrow) figure:not(.iphone) { border-radius: 16px; }
  html[data-theme="bento"] main h2 { font-size: clamp(32px, 9vw, 44px); }
  html[data-theme="bento"] .final h2 { font-size: clamp(36px, 10.5vw, 48px); }
  html[data-theme="bento"] :is(.gal, .tour-stage, .showcase, .biz .showcase) { border-radius: 28px; }
  html[data-theme="bento"] :is(.card, .ring, .svc-card, .dcol, .ccard, .psteps li, .cin, .cout, .biz-copy, .tabs) { border-radius: 24px; }
  html[data-theme="bento"] .loop li, html[data-theme="bento"] .loop li:last-child { border-radius: 20px; padding: 18px; }
  html[data-theme="bento"] .psteps .pn { margin: 0; }
  html[data-theme="bento"] .buy-card { border-radius: 32px; padding: 36px 22px; gap: 32px; }
  html[data-theme="bento"] .buy-box { border-radius: 26px; padding: 30px 22px; }
  html[data-theme="bento"] .inc li { font-size: 17px; }
  html[data-theme="bento"] .pcard { border-radius: 18px; }
  html[data-theme="bento"] .foot { padding-top: 56px; }
}
@media (max-width: 400px) {
  html[data-theme="bento"] main h2 { font-size: 32px; }
  html[data-theme="bento"] .buy-card { padding: 30px 16px; }
}

/* ═════════ 2 · duo (own small template: ten apps, one hub page) ═════════ */
html[data-dl="duo"] { --bg: #fff; --card: #fff; --fg: #0E1030; --mut: #5C6180; --line: #E6E8F2; --wash: #B02E62; --wash2: #FFC24B;
  --dl-indigo: #3B2DFF; --dl-indigo-deep: #2A1FD9; --dl-font: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif; color-scheme: light; }
html[data-dl="duo"] body { color: var(--fg); font: 18px/1.45 var(--dl-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  background: radial-gradient(50vw 560px at 0% 0%, rgba(255, 194, 75, .22), transparent 70%) no-repeat, radial-gradient(50vw 560px at 100% 90px, rgba(176, 46, 98, .13), transparent 70%) no-repeat, #fff; }
html[data-dl="duo"] a:focus-visible { outline: 3px solid var(--dl-indigo); outline-offset: 3px; border-radius: 8px; }
html[data-dl="duo"] header.top { max-width: 1440px; padding: 22px 40px; }
html[data-dl="duo"] header.top > a { font-size: 20px; letter-spacing: -.02em; }
html[data-dl="duo"] header.top nav a { margin-left: 28px; font-size: 16px; font-weight: 500; color: #33365A; }
html[data-dl="duo"] header.top nav a:hover { color: var(--dl-indigo); }
html[data-dl="duo"] main { max-width: 1440px; padding: 0 40px; }
html[data-dl="duo"] .hero { padding: 48px 0 0; text-align: center; }
html[data-dl="duo"] .hero h1 { font-size: clamp(44px, 7vw, 100px); line-height: .94; letter-spacing: -.052em; font-weight: 600; text-wrap: balance; }
html[data-dl="duo"] .hero p { max-width: 46ch; margin: 28px auto 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -.012em; color: #5B3F4C; text-wrap: pretty; }
html[data-dl="duo"] .dl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 16px; margin-top: 36px; }
html[data-dl="duo"] .dl-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border-radius: 999px; font: 600 17px/1 var(--dl-font);
  letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
html[data-dl="duo"] .dl-btn.go { background: var(--dl-indigo); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(59, 45, 255, .7); }
html[data-dl="duo"] .dl-btn.go:hover { background: var(--dl-indigo-deep); }
html[data-dl="duo"] .dl-btn.store { background: #fff; color: var(--dl-indigo); box-shadow: inset 0 0 0 1.5px var(--dl-indigo); }
html[data-dl="duo"] .dl-btn.store:hover { background: #F3F2FF; }
html[data-dl="duo"] .dl-stage { position: relative; container-type: inline-size; overflow: hidden; height: 40vw; max-height: 560px; min-height: 260px; margin-top: 56px; border-radius: 56px;
  background: radial-gradient(85% 75% at 50% 108%, rgba(176, 46, 98, .42), transparent 72%), radial-gradient(70% 70% at 0% 0%, rgba(255, 194, 75, .3), transparent 70%), #FBF1F4; }
@supports (background: color-mix(in oklab, red 10%, white)) {
  html[data-dl="duo"] .dl-stage { background: radial-gradient(85% 75% at 50% 108%, color-mix(in oklab, var(--wash) 46%, #fff), transparent 72%),
    radial-gradient(70% 70% at 0% 0%, color-mix(in oklab, var(--wash2) 30%, #fff), transparent 70%), color-mix(in oklab, var(--wash) 9%, #fff); }
}
/* the Daylight phone frame; 1em = 1% of the phone's width */
html[data-dl="duo"] .dl-phone { position: absolute; top: 4.5cqw; width: var(--w); margin: 0; padding: 3em; border-radius: 16.5em; background: #050507; font-size: calc(var(--w) / 100); --w: 19cqw;
  box-shadow: 0 0 0 .3em #26272C, 0 0 0 1em #D5D8DF, 0 0 0 1.16em #9CA0AB, 0 7em 9em -3em rgba(90, 20, 50, .7), 0 2em 3em -1em rgba(14, 16, 48, .28); }
html[data-dl="duo"] .dl-phone img { display: block; width: 100%; height: auto; aspect-ratio: 94 / 203.5; object-fit: cover; object-position: top; border-radius: 13.6em; }
html[data-dl="duo"] .dl-phone::after { content: ""; position: absolute; top: 5.2em; left: 50%; width: 27em; height: 7.4em; margin-left: -13.5em; border-radius: 4em; background: #000; }
html[data-dl="duo"] .dl-phone.a { left: calc(50% - 21cqw); }
html[data-dl="duo"] .dl-phone.b { left: calc(50% + 2cqw); top: 8.5cqw; }
html[data-dl="duo"] .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 88px; }
html[data-dl="duo"] .card { gap: 18px; padding: 20px; border-radius: 28px; border-color: var(--line); background: #fff; }
html[data-dl="duo"] .card:hover { border-color: #C9CCE0; }
html[data-dl="duo"] .card img { width: 72px; height: 72px; border-radius: 18px; }
html[data-dl="duo"] .card b { font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
html[data-dl="duo"] .card span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.3; }
html[data-dl="duo"] .dl-end { margin-top: 120px; padding: 88px 40px 84px; border-radius: 56px; text-align: center; color: #fff; background-color: var(--dl-indigo);
  background-image: radial-gradient(60% 90% at 100% 0%, #6C5BFF, transparent 60%), radial-gradient(50% 80% at 0% 100%, #2414D8, transparent 60%); }
html[data-dl="duo"] .dl-end h2 { margin: 0; font-size: clamp(40px, 5.4vw, 76px); line-height: .98; letter-spacing: -.045em; font-weight: 600; }
html[data-dl="duo"] .dl-end p { max-width: 36ch; margin: 22px auto 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: #DAD7FF; }
html[data-dl="duo"] .dl-end .dl-btn { margin-top: 36px; background: #fff; color: var(--dl-indigo); box-shadow: none; }
html[data-dl="duo"] .dl-end .dl-btn:hover { background: #F3F2FF; }
html[data-dl="duo"] footer { padding: 72px 16px 56px; font-size: 14.5px; }
@media (max-width: 720px) {
  html[data-dl="duo"] body { font-size: 17px; }
  html[data-dl="duo"] header.top { padding: 16px; }
  html[data-dl="duo"] header.top nav a { margin-left: 16px; font-size: 15px; }
  html[data-dl="duo"] main { padding: 0 16px; }
  html[data-dl="duo"] .hero { padding-top: 28px; }
  html[data-dl="duo"] .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  html[data-dl="duo"] .dl-cta { margin-top: 28px; gap: 12px; }
  html[data-dl="duo"] .dl-btn { height: 52px; padding: 0 22px; font-size: 16px; }
  html[data-dl="duo"] .dl-cta .dl-btn { flex: 1 1 100%; white-space: normal; text-align: center; line-height: 1.2; }
  html[data-dl="duo"] .dl-stage { height: 84vw; max-height: none; margin-top: 40px; border-radius: 32px; }
  html[data-dl="duo"] .dl-phone { --w: 36cqw; top: 8cqw; }
  html[data-dl="duo"] .dl-phone.a { left: calc(50% - 39cqw); }
  html[data-dl="duo"] .dl-phone.b { left: calc(50% + 3cqw); top: 15cqw; }
  html[data-dl="duo"] .grid { grid-template-columns: 1fr; gap: 12px; margin-top: 56px; }
  html[data-dl="duo"] .card { border-radius: 22px; padding: 16px; }
  html[data-dl="duo"] .card img { width: 60px; height: 60px; border-radius: 15px; }
  html[data-dl="duo"] .dl-end { margin-top: 72px; padding: 52px 22px; border-radius: 32px; }
  html[data-dl="duo"] .dl-end .dl-btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 22px; line-height: 1.2; }
}

/* ═════════ 3 · nfccrypto-card (own template: a black product site → daylight; the metal cards stay metal) ═════════ */
html[data-dl="nfc"] { --bg: #fff; --band: #F5F6FB; --surface: #fff; --raised: #F5F6FB; --line: #E6E8F2; --line-2: #C9CCE0; --fg: #0E1030; --muted: #5C6180; --faint: #7B80A3;
  --ok: #0E9F5E; --warn: #B45309; --wash: #C4902A; --wash2: #F0CE6E; --dl-indigo: #3B2DFF; --dl-indigo-deep: #2A1FD9;
  --dl-font: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif; --display: var(--dl-font); --body: var(--dl-font); --col: 1240px; color-scheme: light; }
html[data-dl="nfc"] body { margin: 0; font-size: 17px; line-height: 1.5; letter-spacing: -.006em; text-rendering: optimizeLegibility; }
html[data-dl="nfc"] :focus-visible { outline: 3px solid var(--dl-indigo); outline-offset: 3px; border-radius: 8px; }
html[data-dl="nfc"] main :is(h1, h2, h3) { font-weight: 600; }
html[data-dl="nfc"] .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg); }
html[data-dl="nfc"] .eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1.2 var(--dl-font); letter-spacing: -.005em; text-transform: none; color: var(--muted); }
html[data-dl="nfc"] .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wash); box-shadow: 0 0 0 4px rgba(196, 144, 42, .2); }
html[data-dl="nfc"] .lede { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.38; letter-spacing: -.012em; }
/* buttons */
html[data-dl="nfc"] .btn { height: 56px; padding: 0 28px; border: 1px solid var(--line); background: #fff; color: var(--fg); font: 600 17px/1 var(--dl-font); letter-spacing: -.01em; white-space: nowrap; }
html[data-dl="nfc"] .btn:hover { transform: none; border-color: var(--line-2); background: #fff; }
html[data-dl="nfc"] .btn.primary { border-color: transparent; background: var(--dl-indigo); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(59, 45, 255, .7); }
html[data-dl="nfc"] .btn.primary:hover { background: var(--dl-indigo-deep); }
html[data-dl="nfc"] .btn.store { border-color: transparent; color: var(--dl-indigo); box-shadow: inset 0 0 0 1.5px var(--dl-indigo); }
html[data-dl="nfc"] .btn.store:hover { background: #F3F2FF; }
html[data-dl="nfc"] .btn.sm { height: 42px; padding: 0 20px; font-size: 15px; }
/* nav */
html[data-dl="nfc"] .nav { background: rgba(255, 255, 255, .86); border-bottom-color: var(--line); }
html[data-dl="nfc"] .nav .wrap { height: 72px; }
html[data-dl="nfc"] .logo { font-size: 20px; }
html[data-dl="nfc"] .nav nav { gap: 28px; }
html[data-dl="nfc"] .nav nav a { font-size: 16px; color: #33365A; }
html[data-dl="nfc"] .nav nav a:hover { color: var(--dl-indigo); }
/* hero: copy centred, the cards on gold light */
html[data-dl="nfc"] .hero { padding-block: 56px 0;
  background: radial-gradient(62% 46% at 50% 100%, rgba(196, 144, 42, .5), transparent 72%), radial-gradient(50% 50% at 0% 0%, rgba(240, 206, 110, .32), transparent 70%),
    radial-gradient(50% 50% at 100% 10%, rgba(196, 144, 42, .16), transparent 70%), #FDF8EC; }
html[data-dl="nfc"] .hero canvas { display: none; }
html[data-dl="nfc"] .hero .wrap { display: block; min-height: 0; text-align: center; }
html[data-dl="nfc"] .pill { padding: 6px 15px 6px 6px; border-color: rgba(14, 16, 48, .08); background: rgba(255, 255, 255, .72); color: var(--fg); font-size: 14.5px; font-weight: 600; }
html[data-dl="nfc"] .pill b { background: var(--fg); color: #fff; }
html[data-dl="nfc"] .hero h1 { margin-top: 24px; font-size: clamp(48px, 8.2vw, 118px); line-height: .93; letter-spacing: -.052em; font-weight: 600; }
html[data-dl="nfc"] .hero h1 .muted { color: #8A6A1F; }
html[data-dl="nfc"] .hero .lede { max-width: 52ch; margin: 26px auto 0; color: #5A4A2A; }
html[data-dl="nfc"] .ctas { justify-content: center; gap: 14px 16px; margin-top: 34px; }
html[data-dl="nfc"] .specs { justify-content: center; gap: 8px; margin-top: 24px; font: 500 14px/1.2 var(--dl-font); color: #4B4320; }
html[data-dl="nfc"] .specs span { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .66); }
html[data-dl="nfc"] .specs span::before { background: var(--wash); }
html[data-dl="nfc"] .hero-stage { max-width: 640px; margin: 48px auto 0; aspect-ratio: 1 / .5; align-items: end; overflow: hidden; }
html[data-dl="nfc"] .hero-stage .glow { display: none; }
html[data-dl="nfc"] .hero-stage .main-card { transform: translateY(34%); }
html[data-dl="nfc"] .hero-stage .back-card { transform: translate(14%, -6%) rotate(9deg); }
html[data-dl="nfc"] .hero-stage .back-card2 { transform: translate(-16%, 14%) rotate(-7deg); }
html[data-dl="nfc"] .face { box-shadow: 0 40px 60px -30px rgba(70, 48, 6, .55), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
/* marquee, bands, stats */
html[data-dl="nfc"] .marquee { border-color: var(--line); }
html[data-dl="nfc"] .track span { color: #3A3D61; font-weight: 600; letter-spacing: -.02em; }
html[data-dl="nfc"] .track span i { background: var(--line-2); opacity: 1; }
html[data-dl="nfc"] .band.alt { border-color: transparent; }
html[data-dl="nfc"] .band-head h2 { font-size: clamp(36px, 4.8vw, 68px); line-height: .98; letter-spacing: -.045em; font-weight: 600; }
html[data-dl="nfc"] .stats, html[data-dl="nfc"] .sec-grid { border-radius: 28px; }
html[data-dl="nfc"] .stat .n { font-weight: 600; letter-spacing: -.05em; }
html[data-dl="nfc"] .stat .l { font-size: 15.5px; }
/* story: the phone and what is on its screen stay dark, like the app */
html[data-dl="nfc"] .progress i { background: var(--dl-indigo); }
html[data-dl="nfc"] .step { border-radius: 24px; }
html[data-dl="nfc"] .step.on { background: var(--band); border-color: transparent; }
html[data-dl="nfc"] .step h3 small { font: 600 13px/1 var(--dl-font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
html[data-dl="nfc"] .phone { --fg: #f5f5f7; --muted: #8e8e96; --line: #232329; --ok: #30d158; color: #f5f5f7;
  box-shadow: 0 60px 90px -40px rgba(90, 62, 8, .6), 0 20px 30px -12px rgba(14, 16, 48, .28), inset 0 0 0 2px #19191c; }
html[data-dl="nfc"] .phone .eyebrow { color: #8e8e96; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
html[data-dl="nfc"] .phone .eyebrow::before { content: none; }
html[data-dl="nfc"] .scene .rings i, html[data-dl="nfc"] .wave-viz i { border-color: rgba(196, 144, 42, .7); }
html[data-dl="nfc"] .scene .tapcard { filter: drop-shadow(0 30px 34px rgba(90, 62, 8, .4)); }
/* tiles */
html[data-dl="nfc"] .tile, html[data-dl="nfc"] .product { border-radius: 28px; }
html[data-dl="nfc"] .tile h3 { font-size: 22px; letter-spacing: -.035em; }
html[data-dl="nfc"] .tile p { font-size: 16px; }
html[data-dl="nfc"] .urlbar { background: var(--band); border-color: var(--line); color: var(--fg); border-radius: 999px; padding: 13px 18px; font: 500 15px var(--dl-font); }
html[data-dl="nfc"] .code { background: #0E1030; border: 0; border-radius: 16px; color: #B9BCD6; }
html[data-dl="nfc"] .code .k { color: #fff; } html[data-dl="nfc"] .code .s { color: #F0CE6E; } html[data-dl="nfc"] .code .c { color: #7F84A6; }
html[data-dl="nfc"] .batch .bar { background: var(--line); }
html[data-dl="nfc"] .batch .bar i { background: linear-gradient(90deg, #F0CE6E, #C4902A); }
html[data-dl="nfc"] .batch .row { font: 500 14px var(--dl-font); }
html[data-dl="nfc"] .os span { background: var(--band); border-color: transparent; border-radius: 999px; padding: 9px 16px; }
html[data-dl="nfc"] .wave-viz b { background: #fff; border-color: var(--line); font: 700 12px var(--dl-font); }
html[data-dl="nfc"] .product h3 { font-size: 30px; letter-spacing: -.04em; }
html[data-dl="nfc"] .product .who { font: 600 14px/1.2 var(--dl-font); letter-spacing: 0; text-transform: none; }
html[data-dl="nfc"] .chips span { border: 0; background: var(--band); color: #3A3D61; font: 500 14px var(--dl-font); padding: 6px 12px; }
html[data-dl="nfc"] .product:hover .shot, html[data-dl="nfc"] .product:hover .desk { transform: none; }
html[data-dl="nfc"] .gallery figcaption { font: 500 14px var(--dl-font); }
/* designer */
html[data-dl="nfc"] .preview { border: 0; border-radius: 44px;
  background: radial-gradient(85% 75% at 50% 108%, rgba(196, 144, 42, .42), transparent 72%), radial-gradient(70% 70% at 0% 0%, rgba(240, 206, 110, .3), transparent 70%), #FBF4E2; }
html[data-dl="nfc"] .field > label, html[data-dl="nfc"] .field > .lbl { font: 600 14px/1.2 var(--dl-font); letter-spacing: 0; text-transform: none; }
html[data-dl="nfc"] .field input[type=text] { height: 52px; border-radius: 16px; border-color: var(--line-2); }
html[data-dl="nfc"] .swatch { border-radius: 16px; }
html[data-dl="nfc"] .swatch i { border-color: rgba(14, 16, 48, .15); }
html[data-dl="nfc"] .swatch[aria-pressed="true"] { border-color: var(--dl-indigo); background: #F3F2FF; box-shadow: inset 0 0 0 1px var(--dl-indigo); }
html[data-dl="nfc"] .seg { border: 0; border-radius: 999px; background: var(--band); padding: 5px; }
html[data-dl="nfc"] .seg button { height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; }
html[data-dl="nfc"] .seg button[aria-pressed="true"] { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(14, 16, 48, .12), 0 6px 14px -8px rgba(14, 16, 48, .3); }
html[data-dl="nfc"] .spec-out { background: #0E1030; border: 0; border-radius: 16px; color: #B9BCD6; }
/* studio, security, faq */
html[data-dl="nfc"] .window { border-color: var(--line-2); box-shadow: 0 50px 80px -44px rgba(14, 16, 48, .5); }
html[data-dl="nfc"] .window .bar span { color: #8e8e96; }
html[data-dl="nfc"] .flow li::before { font: 600 14px var(--dl-font); }
html[data-dl="nfc"] .flow b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
html[data-dl="nfc"] .flow span { font-size: 16px; }
html[data-dl="nfc"] .sec { background: #fff; }
html[data-dl="nfc"] .sec .k { font: 600 14px/1.2 var(--dl-font); letter-spacing: 0; text-transform: none; }
html[data-dl="nfc"] .sec .v { font-weight: 600; letter-spacing: -.035em; }
html[data-dl="nfc"] .sec p { font-size: 16px; }
html[data-dl="nfc"] .faq summary { font-size: 21px; letter-spacing: -.03em; }
/* final + footer */
html[data-dl="nfc"] .cta { background: radial-gradient(60% 50% at 50% 0%, rgba(196, 144, 42, .34), transparent 72%), #fff; }
html[data-dl="nfc"] .cta h2 { font-size: clamp(44px, 7vw, 100px); line-height: .94; letter-spacing: -.052em; font-weight: 600; }
html[data-dl="nfc"] .footer { border-top-color: var(--line); color: var(--muted); font-size: 14.5px; }
html[data-dl="nfc"] .footer a { color: var(--fg); font-weight: 600; }
@media (max-width: 720px) {
  html[data-dl="nfc"] .btn { height: 52px; padding: 0 22px; font-size: 16px; }
  html[data-dl="nfc"] .btn.sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
  html[data-dl="nfc"] .hero { padding-top: 32px; }
  html[data-dl="nfc"] .hero h1 { font-size: clamp(46px, 14vw, 64px); }
  html[data-dl="nfc"] .hero .ctas .btn { flex: 1 1 100%; }
  html[data-dl="nfc"] .hero-stage { margin-top: 32px; }
  html[data-dl="nfc"] .band-head h2 { font-size: clamp(32px, 9vw, 44px); }
  html[data-dl="nfc"] .preview { border-radius: 32px; }
  html[data-dl="nfc"] .tile, html[data-dl="nfc"] .product, html[data-dl="nfc"] .stats, html[data-dl="nfc"] .sec-grid { border-radius: 24px; }
  html[data-dl="nfc"] .cta .ctas .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  html[data-dl="nfc"] .seg button { height: 36px; padding: 0 11px; font-size: 13.5px; }
}