/* Dark Browser additions on top of landing.css: the iPhone frame, the before
   and after slider, the theme switcher and the pricing cards. Sizes inside
   .db-phone scale from --w, the frame's outer width. */

/* script.js hardcodes the template's navy nav and cyan FAQ highlight */
#zz-nav[style*="linear-gradient"]{background:linear-gradient(180deg,rgba(7,8,12,.86),rgba(7,8,12,.62)) !important}
[data-faq][data-open="1"]{background:linear-gradient(155deg,rgba(var(--accent-rgb),.11),rgba(var(--accent-2-rgb),.04)) !important}

/* A serif at 800 reads clumsy; 700 keeps the headlines tight */
#zz h1,#zz h2,#zz h3{font-weight:700 !important}

/* Five links need more room than the template's three */
.nav-links a{white-space:nowrap}
@media (max-width:960px){.nav-links{display:none !important}}

/* The phone cluster sits close to the headline; keep the H1 a touch smaller */
.hero h1{font-size:clamp(44px,5.9vw,76px) !important}

/* ===== Logo ===== */
.db-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.db-logo:hover{color:var(--ink)}
.db-logo img{width:32px;height:32px;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 18px -6px rgba(0,0,0,.8)}
.db-cta-icon{width:72px;height:72px;border-radius:17px;margin:0 auto 24px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 18px 40px -14px rgba(0,0,0,.8)}

/* ===== iPhone ===== */
.db-phone{--w:300px;position:relative;width:var(--w);padding:calc(var(--w)*.034);border-radius:calc(var(--w)*.165);
  background:linear-gradient(160deg,#17181d,#07080b 55%,#121318);
  box-shadow:0 0 0 calc(var(--w)*.006) #4b4e57,0 0 0 calc(var(--w)*.014) #1b1d23,0 0 0 calc(var(--w)*.018) rgba(255,255,255,.16),
    0 calc(var(--w)*.16) calc(var(--w)*.32) calc(var(--w)*-.11) rgba(0,0,0,.95)}
.db-phone::before,.db-phone::after{content:"";position:absolute;width:calc(var(--w)*.012);border-radius:2px;background:#30333a}
.db-phone::before{left:calc(var(--w)*-.031);top:calc(var(--w)*.36);height:calc(var(--w)*.075);box-shadow:0 calc(var(--w)*.13) 0 #30333a,0 calc(var(--w)*.25) 0 #30333a}
.db-phone::after{right:calc(var(--w)*-.031);top:calc(var(--w)*.5);height:calc(var(--w)*.17)}
.db-phone-screen{position:relative;aspect-ratio:1206/2622;border-radius:calc(var(--w)*.13);overflow:hidden;background:#000;isolation:isolate}
.db-phone-screen>img{display:block;width:100%;height:100%;object-fit:cover}
.db-phone-screen::after{content:"";position:absolute;z-index:20;top:calc(var(--w)*.026);left:50%;transform:translateX(-50%);width:calc(var(--w)*.29);height:calc(var(--w)*.085);border-radius:999px;background:#000;pointer-events:none}
.db-glow{box-shadow:0 0 0 calc(var(--w)*.006) #4b4e57,0 0 0 calc(var(--w)*.014) #1b1d23,0 0 0 calc(var(--w)*.018) rgba(255,255,255,.16),
    0 calc(var(--w)*.16) calc(var(--w)*.32) calc(var(--w)*-.11) rgba(0,0,0,.95),0 0 80px -16px rgba(var(--accent-rgb),.4)}

/* ===== Before and after ===== */
.db-hero-phone{left:50%;transform:translateX(-50%)}
.db-ba{--pos:50%;position:absolute;inset:0;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.db-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.db-ba-before{position:absolute;inset:0;-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0);clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.db-ba-line{position:absolute;z-index:5;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 16px 2px rgba(var(--accent-rgb),.55)}
.db-ba-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(14,16,24,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.92);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.7),0 0 22px -2px rgba(var(--accent-rgb),.6);transition:transform .2s ease;outline:none}
.db-ba-knob svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.db-ba.is-dragging .db-ba-knob,.db-ba-knob:focus-visible{transform:scale(1.12)}
.db-ba-knob:focus-visible{box-shadow:0 0 0 3px var(--accent),0 8px 24px -6px rgba(0,0,0,.7)}
.db-ba-tag{position:absolute;z-index:6;top:78%;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;transition:opacity .25s ease;pointer-events:none}
.db-ba-tag-before{left:7.5%;background:rgba(10,12,18,.8);color:#fff}
.db-ba-tag-after{right:7.5%;background:var(--accent);color:#1d1206}
.db-ba-hint{position:absolute;left:0;right:0;bottom:0;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;color:rgba(247,242,234,.56)}
.db-ba-hint svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Hero proof line ===== */
.db-proof-icon{width:20px;height:20px;flex:none}

/* ===== Pro tag ===== */
.db-pro,.db-free{display:inline-block;padding:5px 9px;border-radius:999px;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.1em;line-height:1}
.db-pro{background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#1d1206}
.db-free{background:rgba(255,255,255,.1);color:rgba(247,242,234,.82)}
h3 .db-pro{position:relative;top:-6px;margin-left:8px}

/* ===== Theme switcher ===== */
.db-themes{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"head phone" "list phone";column-gap:48px;align-items:center}
.db-themes-head{grid-area:head;align-self:end}
.db-themes-list{grid-area:list;align-self:start;display:grid;gap:10px;max-width:440px}
.db-themes-phone{grid-area:phone;position:relative;display:flex;justify-content:center}
.db-theme-btn{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border-radius:18px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.db-theme-btn:hover{transform:translateY(-2px)}
.db-theme-btn[aria-pressed="true"]{background:linear-gradient(155deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.05));border-color:rgba(var(--accent-rgb),.55)}
.db-theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.db-swatch{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:16px}
.db-theme-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.db-theme-text strong{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.1}
.db-theme-text small{font-size:13.5px;line-height:1.35;color:rgba(247,242,234,.6)}
.db-theme-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.db-theme-img.is-on{opacity:1}

/* ===== Pricing ===== */
.db-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.db-price-card{position:relative;padding:32px 30px;border-radius:26px;background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 30px 70px -36px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
.db-price-pro{border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(155deg,rgba(var(--accent-rgb),.13),rgba(255,255,255,.025) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 30px 70px -36px rgba(0,0,0,.8),0 0 60px -20px rgba(var(--accent-rgb),.45)}
.db-price-name{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink)}
.db-price-amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-top:14px;font-family:var(--display);font-weight:700;font-size:52px;line-height:1;color:var(--ink)}
.db-price-amount strong{font-weight:inherit}
.db-save{align-self:center;padding:5px 10px;border-radius:999px;background:linear-gradient(135deg,#FFC98A,var(--accent));color:#1A1206;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em}
.db-price-trial{margin-top:12px;font-size:15.5px;font-weight:700;color:var(--accent)}
.db-price-amount span{margin-left:6px;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:17px;font-weight:600;color:rgba(247,242,234,.55)}
.db-price-note{margin-top:10px;font-size:15px;line-height:1.5;color:rgba(247,242,234,.66)}
.db-price-list{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:11px}
.db-price-list li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.45;color:rgba(247,242,234,.84)}
.db-price-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(var(--accent-rgb),.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB45C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.db-price-foot{text-align:center;margin:22px auto 0;max-width:560px;font-size:13.5px;line-height:1.55;color:rgba(247,242,234,.5)}

/* ===== Responsive ===== */
@media (max-width:880px){
  .db-hero-visual{height:690px !important}
  .db-themes{grid-template-columns:1fr;grid-template-areas:"head" "phone" "list";row-gap:28px}
  .db-themes-list{grid-template-columns:1fr 1fr;max-width:none}
}
@media (max-width:720px){
  .db-price-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .db-hero-visual{height:604px !important;max-width:100% !important}
  .db-hero-phone{--w:262px !important}
  .db-side{display:none !important}
  .db-feat{--w:250px !important}
  .db-themes-phone .db-phone{--w:262px !important}
  .db-theme-btn{padding:10px 12px;gap:10px}
  .db-theme-text small{display:none}
  .db-price-card{padding:28px 22px}
}
@media (max-width:380px){
  .db-hero-visual{height:556px !important}
  .db-hero-phone{--w:240px !important}
  .db-themes-list{grid-template-columns:1fr}
}

/* ===== Bedtime copy (2026-10-10): buttons, statement, problem, before and after, lights off ===== */
.hero h1{font-size:clamp(38px,calc(5.1vw - 6px),54px) !important} /* two lines: "More Relaxing Nights." needs ~10px of width per px */
.db-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:999px;margin-bottom:26px;font-size:13.5px;font-weight:600;color:rgba(var(--ink-rgb),.9);
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.db-badge-moon{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--bg)}
.db-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:17px 28px;border-radius:18px;font-weight:800;font-size:17px;line-height:1.2;text-align:center;text-wrap:balance;color:#1d1206;
  background:linear-gradient(180deg,#FFD9A6,var(--accent));border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 44px -18px rgba(var(--accent-rgb),.75);transition:transform .28s ease,box-shadow .28s ease}
.db-btn:hover{color:#1d1206;transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 28px 56px -18px rgba(var(--accent-rgb),.85)}
.db-btn svg{flex:none;width:19px;height:19px;fill:currentColor}
.db-btn-dark{color:#fff;background:linear-gradient(180deg,rgba(15,22,36,.94),rgba(6,12,24,.98));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 22px 48px -18px rgba(0,0,0,.85)}
.db-btn-dark:hover{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 30px 60px -18px rgba(0,0,0,.9)}
.db-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:17px 24px;border-radius:18px;font-weight:600;font-size:16px;color:var(--ink);
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:transform .28s ease,background .28s ease}
.db-btn-ghost:hover{color:var(--ink);transform:translateY(-3px);background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.db-btn-note{margin-top:12px;font-size:14.5px;color:rgba(247,242,234,.6)}
.db-chip{padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;color:rgba(247,242,234,.82);background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14)}
.db-chip.is-warm{color:var(--accent-tint);background:linear-gradient(135deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));border-color:rgba(var(--accent-rgb),.35)}

.db-statement{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:70px 28px 20px;text-align:center}
.db-statement p{font-size:19px;line-height:1.6;color:rgba(247,242,234,.72);max-width:660px;margin:0 auto 16px}
.db-statement p strong{color:var(--ink);font-weight:700}
.db-statement .db-statement-big{max-width:none;margin-bottom:26px;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,50px);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}

.db-prose p{font-size:18px;line-height:1.6;color:rgba(247,242,234,.72);margin:0 0 14px;max-width:500px}
.db-prose .db-prose-strong{color:var(--ink);font-weight:700}
.db-prose-center p{margin-left:auto;margin-right:auto}

/* The bright page glows like a flashlight */
.db-flash{box-shadow:0 0 0 calc(var(--w)*.006) #4b4e57,0 0 0 calc(var(--w)*.014) #1b1d23,0 0 0 calc(var(--w)*.018) rgba(255,255,255,.16),
  0 calc(var(--w)*.16) calc(var(--w)*.32) calc(var(--w)*-.11) rgba(0,0,0,.95),0 0 110px 6px rgba(255,255,255,.32)}

.db-pair{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:900px;margin:0 auto}
.db-pair-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.db-pair-label{margin:30px 0 10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,234,.6)}
.db-pair-label.is-after{color:var(--accent)}
.db-pair-card p{margin:0;max-width:340px;font-size:16.5px;line-height:1.6;color:rgba(247,242,234,.72)}

.db-night{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:90px 28px 40px;text-align:center}
.db-moon{display:block;width:96px;height:96px;margin:0 auto 26px;filter:drop-shadow(0 0 36px rgba(var(--accent-rgb),.6))}

.db-start{max-width:760px;margin:0 auto;padding:54px 40px;border-radius:30px;text-align:center;
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 30px 70px -36px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.db-start p{font-size:18px;line-height:1.55;color:rgba(247,242,234,.72);margin:18px auto 28px}

@media (max-width:720px){
  .db-pair{grid-template-columns:1fr;gap:64px}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(28px,8.4vw,40px) !important}
  .db-btn,.db-btn-ghost{width:100%}
  .db-start{padding:42px 22px}
  .db-pair .db-phone{--w:240px !important}
  .db-statement{padding-top:50px}
}

/* ===== Header images (2026-10-11): Marcin's App Store images, fanned on wide screens, a swipeable row on phones ===== */
.db-shot{position:absolute;margin:0;border-radius:30px;overflow:hidden;background:#0b0b0f;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.09)}
.db-shot-front{box-shadow:0 44px 90px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12),0 0 70px -18px rgba(var(--accent-rgb),.45)}
.db-shot img{display:block;width:100%;height:auto}
/* The fan scales with its column, and stays a phone pair's width once the hero stacks. */
.db-shots{max-width:540px;margin-left:auto;margin-right:auto;width:100%}
@media (max-width:560px){
  .db-hero-visual.db-shots{height:auto !important;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    width:auto !important;max-width:none !important;margin:8px calc(50% - 50vw) 0 !important;padding:8px 16px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .db-shots::-webkit-scrollbar{display:none}
  .db-shots [data-blob]{display:none}
  .db-shot{position:relative !important;left:auto !important;top:auto !important;transform:none !important;
    flex:0 0 74%;max-width:300px;width:auto !important;scroll-snap-align:center;border-radius:24px}
  .db-shot-front{order:-1}
}

/* ===== Final pass (2026-10-12): hero chips, drag sliders for light and dark and for ads ===== */
.db-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 30px}
.db-hero-chips .db-chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:8px 14px}
.db-hero-chips a.db-chip{color:var(--accent-tint)}
.db-hero-chips .db-pro{padding:3px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.08em}
.db-compare{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:1000px;margin:0 auto}
.db-compare-media{display:flex;flex-direction:column;align-items:center}
.db-compare .db-ba-hint{position:static;margin:22px 0 0;text-align:center}
.db-compare-copy{display:flex;flex-direction:column;gap:28px}
.db-compare-ads .db-compare-copy{gap:0}
/* The copy is one block beside the phone. On narrow screens it dissolves (display:contents)
   so the slider can sit between the headline and the list. */
.db-compare-ads{grid-template-columns:1.2fr .8fr;max-width:1060px}
.db-compare-copy .db-pair-label{margin:0 0 8px}
.db-compare-copy p{margin:0;font-size:17.5px;line-height:1.6;color:rgba(247,242,234,.72);max-width:440px}
.db-compare-copy .db-compare-note{font-size:15.5px;color:rgba(247,242,234,.55);padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.db-compare-copy .db-compare-lead{font-size:19px;margin-bottom:26px;max-width:470px}
.db-compare-ads .db-btn{align-self:flex-start}
.db-checks{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:13px}
.db-checks li{position:relative;padding-left:32px;font-size:16.5px;line-height:1.45;color:rgba(247,242,234,.84)}
.db-checks li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:rgba(var(--accent-rgb),.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB45C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:960px){
  .db-compare{grid-template-columns:1fr;gap:44px;max-width:560px}
  .db-compare-ads{grid-template-columns:1fr;row-gap:40px}
  .db-ads-copy{display:contents}
  .db-ads-head{order:1}
  .db-compare-ads .db-compare-media{order:2}
  .db-ads-body{order:3}
  .db-compare-ads .db-compare-copy .db-compare-lead{margin-bottom:0}
}
@media (max-width:560px){
  .db-compare-phone{--w:272px !important}
  .db-hero-chips{margin-top:-14px}
}
@media (max-width:380px){
  .db-compare-phone{--w:248px !important}
}