/* ============================================================
   Dribs homes (/, /de/, /es/), on top of styles.css,
   dribs-landing.css and pages.css. Markup: scripts/home/render.mjs.
   Motion: home.js, plus the scroll-linked bits at the end of this
   file. Every animated thing is styled here in its final state.
   ============================================================ */

/* ── App screens ──
   --sw is the screen width in px (unitless, so it can also scale the
   660 × 1434 layer box). Colours are the screenshots' own. */
/* overflow: clip, not hidden (dribs-landing.css), so the sticky phones stick. */
.dribs.h-home { --sw: 300; overflow: clip; }
.h-screen {
  --app-bg: rgb(5,5,6); --app-card: rgb(35,35,36); --app-card-edge: rgba(255,255,255,.1);
  --app-text: rgb(243,244,246); --app-sub: rgb(150,150,156); --app-red: rgb(255,128,145);
  --app-orange: rgb(255,162,9); --app-bar: #6c63ff; --app-track: rgb(48,48,49); --app-over: #ef4444;
  --app-dim: rgba(0,0,0,.55); --app-flash: rgba(255,255,255,.32);
  --glass: rgba(255,255,255,.14); --glass-edge: rgba(255,255,255,.28); --glass-text: #fff;
  position: relative; width: calc(var(--sw) * 1px); aspect-ratio: 660 / 1434; overflow: hidden;
  border-radius: calc(var(--sw) * .135px); background: var(--app-bg); isolation: isolate;
}
@media (prefers-color-scheme: light) {
  .h-screen {
    --app-bg: rgb(232,232,235); --app-card: rgb(253,253,253); --app-card-edge: rgba(0,0,0,.06);
    --app-text: rgb(21,23,26); --app-sub: rgb(141,141,145); --app-red: rgb(176,56,30);
    --app-orange: rgb(213,106,0); --app-bar: rgb(75,67,214); --app-track: rgb(235,235,235);
    --app-dim: rgba(60,60,70,.3); --app-flash: rgba(0,0,0,.12);
    --glass: rgba(255,255,255,.62); --glass-edge: rgba(0,0,0,.1); --glass-text: rgb(21,23,26);
  }
}
.h-light-only { display: none; }
@media (prefers-color-scheme: light) { .h-light-only { display: inline; } .h-dark-only { display: none; } }

/* The screenshots' iPhone: a titanium rail around a black bezel. */
.h-phone {
  width: calc(var(--sw) * 1px + 21px); padding: 9px; border-radius: calc(var(--sw) * .17px);
  border: 1.5px solid transparent; flex: none;
  background:
    linear-gradient(#060607, #060607) padding-box,
    linear-gradient(180deg, #6b6b72 0%, #3f3f45 6%, #2b2b30 18%, #232327 50%, #2b2b30 82%, #47474d 94%, #61616a 100%) border-box;
  box-shadow: 0 40px 80px -24px rgba(10,8,30,.7), 0 10px 22px rgba(0,0,0,.25);
}
.h-px { position: absolute; left: 0; top: 0; width: 660px; height: 1434px; transform-origin: 0 0; transform: scale(calc(var(--sw) / 660)); }
.h-px img { max-width: none; }
.h-l { position: absolute; left: 0; top: 0; width: 660px; height: 1434px; display: block; }
.h-crop { position: absolute; overflow: hidden; }
.h-wipe { clip-path: inset(var(--clip)); }

/* In-app text, sized like the screenshots (SF on Apple devices). */
.h-t { position: absolute; font-family: var(--font); white-space: nowrap; color: var(--app-text); }
.h-total { height: 60px; line-height: 60px; font-weight: 700; font-size: 60.5px; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.h-daytotal { right: 28px; top: 653px; height: 28px; line-height: 28px; font-weight: 600; font-size: 17.5px; color: var(--app-red); text-align: right; }
.h-row { position: absolute; left: 23px; width: 615px; height: 107px; border-radius: 28px; background: var(--app-card); box-shadow: inset 0 0 0 1.5px var(--app-card-edge); }
.h-row .h-crop { position: absolute; }
.h-row-title { left: 124px; top: 24px; font-weight: 600; font-size: 24.5px; }
.h-row-sub { left: 122px; top: 60px; font-size: 16.5px; color: var(--app-sub); }
.h-row-amt { right: 29px; top: 27px; font-weight: 600; font-size: 22px; text-align: right; }
.h-row-time { right: 29px; top: 58px; font-size: 16.5px; color: var(--app-sub); text-align: right; }
.h-newrow { top: 708px; }
.h-rest { transform: translateY(132px); }
.h-sheet { position: absolute; inset: 0; transform: translateY(1434px); }
.h-date { top: 243px; width: 182px; height: 28px; line-height: 28px; text-align: center; font-size: 23px; }
.h-time { width: 120px; }
.h-amount { right: 67px; top: 376px; height: 104px; line-height: 104px; font-weight: 600; font-size: 84px; letter-spacing: -.01em; }
.h-amount .op { color: var(--app-orange); margin: 0 .1em; }
.h-amount .ph { opacity: .3; }
.h-caret { display: inline-block; width: 3px; height: 92px; margin-left: 5px; background: var(--app-text); vertical-align: -14px; animation: h-blink 1s steps(1) infinite; }
@keyframes h-blink { 50% { opacity: 0; } }
.h-result { left: 181px; top: 484px; font-weight: 600; font-size: 22.5px; color: var(--app-orange); }
.h-keyflash { position: absolute; border-radius: 16px; background: var(--app-flash); }
.h-dim { position: absolute; inset: 0; background: var(--app-dim); }
.h-lift { top: 1236px; z-index: 3; transform: translateY(-636px) scale(1.05); box-shadow: inset 0 0 0 1.5px var(--app-card-edge), 0 30px 60px -10px rgba(0,0,0,.6); }
.h-track, .h-fill { position: absolute; left: 60px; width: 540px; height: 11px; border-radius: 6px; background: var(--app-track); }
.h-fill { background: var(--app-bar); transform-origin: 0 50%; transform: scaleX(var(--f)); }
.h-fill.h-over { background: var(--app-over); }
.h-ledgers-sheet { transform: none; }
.h-ring { position: absolute; left: 552px; top: 813px; width: 76px; height: 76px; border-radius: 50%; box-shadow: 0 0 0 3px var(--primary-lighter); opacity: 0; }

/* Glass: the app's own material, for the cursor and the chips in a screen. */
.h-glass {
  background: var(--glass); border: 1.5px solid var(--glass-edge); color: var(--glass-text);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.h-gc {
  position: absolute; z-index: 20; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; opacity: 0;
  background: rgba(255,255,255,.26); border: 1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-color-scheme: light) { .h-gc { background: rgba(30,30,40,.16); border-color: rgba(30,30,40,.3); } }
.h-chip {
  position: absolute; left: 50%; z-index: 15; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 18px 28px; border-radius: 999px; font-family: var(--font); font-size: 24px; font-weight: 600; white-space: nowrap;
}
.h-chip small { font-size: 19px; font-weight: 500; opacity: .7; }
.h-chip [data-count] { font-variant-numeric: tabular-nums; }
.h-avatars { display: flex; }
.h-avatars i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 19px; color: #fff; background: #6c63ff; }
.h-avatars i + i { margin-left: -10px; background: #2fc0a0; box-shadow: 0 0 0 3px rgba(40,40,44,1); }

/* ── Hero ── */
.h-hero { position: relative; z-index: 2; padding: 34px 40px 30px; text-align: center; }
.h-hero-copy { display: flex; flex-direction: column; align-items: center; }
.h-h1 { font-size: clamp(44px, 5.8vw, 76px); margin: 22px 0 0; }
.h-hero-sub { max-width: 620px; margin: 24px auto 0; }
.h-hero .d-cta { margin-top: 32px; }
.h-hero .d-note { justify-content: center; }
.h-hero-art { position: relative; display: flex; justify-content: center; margin: 56px auto 0; max-width: 980px; --sw: 320; }
.h-float {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 18px;
  font-size: 15px; color: var(--text-primary); white-space: nowrap;
  background: rgba(255,255,255,.07); border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: light) { .h-float { background: rgba(255,255,255,.7); box-shadow: 0 24px 50px -22px rgba(30,20,90,.35); } }
.h-float b { font-weight: 700; font-variant-numeric: tabular-nums; }
.h-float span { color: var(--text-secondary); }
.h-float svg { color: var(--primary-display); }
.h-float-ic { width: 12px; height: 12px; border-radius: 50%; }
.h-ic-green { background: var(--income); box-shadow: 0 0 10px var(--income); }
.h-float-1 { left: 2%; top: 20%; }
.h-float-2 { right: 0; top: 44%; }
.h-float-2 b { color: var(--text-primary); }
.h-float-3 { left: 8%; top: 70%; }

/* ── Section heads ── */
.h-head { max-width: 680px; }
.h-head-center { margin: 0 auto; text-align: center; }
.h-head-center .d-sub { margin: 18px auto 0; max-width: 620px; }
.h-h2 { font-size: clamp(34px, 4.4vw, 52px); margin: 16px 0 0; }

/* ── Phone story ──
   Without JS, and on narrow screens: copy + phone pairs. On wide screens
   home.js adds .is-sticky and moves the screens into the sticky phone. */
.h-story { position: relative; z-index: 2; padding: 120px 40px 40px; }
.h-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; padding: 70px 0; max-width: 980px; }
.h-step-copy { max-width: 460px; }
.h-step-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-display); }
.h-step h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 12px 0 0; text-wrap: balance; }
.h-step p { font-size: 18px; line-height: 1.55; color: var(--text-secondary); margin: 16px 0 0; text-wrap: pretty; }
.h-step .h-fine { font-size: 14px; color: var(--text-tertiary); margin-top: 12px; }
.h-more { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 600; }
.h-stage { display: none; }

.h-story.is-sticky .h-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
.h-story.is-sticky .h-step { display: flex; align-items: center; min-height: 86vh; padding: 0; }
.h-story.is-sticky .h-step:last-child { min-height: 96vh; }
.h-story.is-sticky .h-step-phone { display: none; }
.h-story.is-sticky .h-step-copy { opacity: .3; transition: opacity .5s ease; }
.h-story.is-sticky .h-step.is-on .h-step-copy, .h-story.is-sticky .h-step:focus-within .h-step-copy { opacity: 1; }
.h-story.is-sticky .h-stage { display: block; }
.h-stage-sticky { position: sticky; top: max(84px, calc(50vh - 340px)); display: flex; align-items: center; gap: 36px; padding-bottom: 40px; }
.h-stage-phone { position: relative; height: calc(var(--sw) * 2.1727px + 21px); }
.h-stage-phone .h-screen { position: absolute; left: 9px; top: 9px; opacity: 0; transition: opacity .45s ease; }
.h-stage-phone .h-screen.is-on { opacity: 1; }
/* Short laptop screens: a smaller sticky phone, so it fits. */
@media (max-height: 800px) { .h-stage-phone { --sw: 250; } }
@media (max-height: 680px) { .h-stage-phone { --sw: 210; } }

/* The rail: fills with scroll (--p, set by home.js); the current step's label lights up. */
.h-rail { position: relative; list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 42px; }
.h-rail::before, .h-rail::after { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--hairline); }
.h-rail::after { background: linear-gradient(var(--primary-lighter), var(--primary-light)); bottom: auto; height: calc((100% - 20px) * var(--p, 0)); }
.h-rail li { position: relative; padding-left: 24px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); transition: color .3s; white-space: nowrap; }
.h-rail li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--bg-2); box-shadow: 0 0 0 2px var(--hairline); z-index: 1; transition: background .3s, box-shadow .3s; }
.h-rail li.done::before { background: var(--primary-light); box-shadow: 0 0 0 2px var(--primary-light); }
.h-rail li.cur { color: var(--text-primary); }
.h-rail li.cur::before { background: #fff; box-shadow: 0 0 0 3px var(--primary-light), 0 0 14px var(--primary-light); }

/* ── Privacy tile ── (violet in both schemes, like the "keep" blog cover) */
.h-privacy { position: relative; z-index: 2; padding: 80px 16px; }
.h-tile { position: relative; overflow: clip; border-radius: 40px; padding: 110px 40px 120px; color: #fff; background: linear-gradient(140deg, #1b1257 0%, #3b2bd0 45%, #8f7bff 100%); }
.h-tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: radial-gradient(circle, rgba(255,255,255,.55) 1.2px, transparent 1.8px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 95%); mask-image: linear-gradient(115deg, transparent 35%, #000 95%);
}
.h-tile-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
.h-tile .d-eyebrow { color: rgba(255,255,255,.8); }
.h-big { margin: 20px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; line-height: .98; font-size: clamp(46px, 6.8vw, 100px); text-wrap: balance; }
.h-line { display: block; }
.h-lede { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.84); max-width: 480px; margin: 34px 0 0; text-wrap: pretty; }
.dribs .h-more-light { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); }
.dribs .h-more-light:hover { color: #fff; text-decoration-color: #fff; }
.h-receipt {
  margin-top: 52px; max-width: 480px; padding: 26px 28px 22px; border-radius: 22px;
  background: rgba(14,8,52,.42); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.h-receipt h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.h-receipt ul { list-style: none; margin: 0; padding: 0; }
.h-receipt li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 16.5px; }
.h-dots { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(255,255,255,.3); transform: translateY(-4px); }
.h-total-row { margin-top: 8px; padding-top: 14px !important; border-top: 1.5px dashed rgba(255,255,255,.32); font-weight: 700; }
.h-reel { display: inline-flex; flex-direction: column; height: 1.25em; line-height: 1.25em; overflow: hidden; font-family: var(--font-display); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.h-reel span { transform: translateY(-900%); }
.h-receipt-foot { margin: 14px 0 0; font-size: 13.5px; color: rgba(255,255,255,.72); }
.h-hide-stage { --sw: 260; position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.h-toggle {
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; background: rgba(20,12,70,.35); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.h-switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #34c759; transition: background .25s; }
.h-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transform: translateX(18px); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.h-toggle.is-off .h-switch { background: rgba(255,255,255,.22); }
.h-toggle.is-off .h-switch::after { transform: none; }
.h-hide-cap { font-size: 13.5px; color: rgba(255,255,255,.74); max-width: 300px; text-align: center; line-height: 1.45; margin: 0; }

/* ── Every device ── */
.h-devices { position: relative; z-index: 2; padding: 110px 40px; }
.h-devices-art { position: relative; max-width: 1040px; margin: 70px auto 0; padding-bottom: 60px; --sw: 220; }
.h-mac { width: 84%; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.6); }
.h-mac img { display: block; width: 100%; height: auto; }
.h-devices-phone { position: absolute; right: 0; bottom: 0; }
.h-sync { position: absolute; left: 66%; top: 6%; width: 22%; overflow: visible; }
.h-sync path { fill: none; stroke: var(--primary-light); stroke-width: 2; stroke-dasharray: 4 7; opacity: .55; }

/* ── A few more things ── */
.h-more-things { position: relative; z-index: 2; padding: 90px 40px 60px; }
.h-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.dribs .h-bento-card {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text-primary);
  transition: transform .2s, background .2s;
}
.dribs .h-bento-card:hover { color: var(--text-primary); background: var(--overlay-medium); transform: translateY(-2px); }
.h-bento-card h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.h-bento-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.h-marquee { margin-top: 70px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.h-marquee-label { margin: 0 0 18px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.h-marquee-track { display: flex; gap: 14px; width: max-content; }
.h-marquee-track span { padding: 10px 18px; border-radius: 999px; font-family: var(--font-mono); font-size: 15px; color: var(--text-secondary); background: var(--overlay-light); border: 1px solid var(--card-border); }

/* ── Final call to action ── */
.h-final { position: relative; z-index: 2; padding: 110px 40px 130px; text-align: center; }
.h-final-icon { display: block; margin: 0 auto; border-radius: 20px; box-shadow: 0 20px 50px -12px rgba(107,99,255,.6); }
.h-final .h-h2 { margin-top: 28px; }
.h-final .d-sub { margin: 16px auto 0; max-width: 560px; }
.h-final-badge { margin-top: 34px; display: flex; justify-content: center; }
.h-final-badge .d-badge img { height: 64px; }
.h-made { margin: 22px 0 0; font-size: 14px; color: var(--text-tertiary); }

/* ── Narrow screens ── */
@media (max-width: 940px) {
  .h-hero { padding: 24px 22px 20px; }
  .h-hero-art { --sw: 270; margin-top: 54px; }
  .h-float-1 { left: 0; top: 14%; }
  .h-float-2 { right: 0; top: 50%; }
  .h-float-3 { display: none; }
  .h-story, .h-devices, .h-more-things, .h-final { padding-left: 22px; padding-right: 22px; }
  .h-story { padding-top: 80px; }
  .h-step { grid-template-columns: 1fr; gap: 34px; justify-items: center; text-align: center; padding: 56px 0; margin: 0 auto; }
  .h-step-copy { margin: 0 auto; }
  .h-step-phone { --sw: 260; }
  .h-tile { padding: 72px 24px 80px; border-radius: 30px; }
  .h-tile-grid { grid-template-columns: 1fr; gap: 48px; }
  .h-hide-stage { position: static; }
  .h-bento { grid-template-columns: repeat(2, 1fr); }
  .h-devices-art { --sw: 150; padding-bottom: 30px; }
  .h-mac { width: 92%; }
  .h-sync { display: none; }
}
@media (max-width: 640px) {
  .h-float { display: none; }
  .h-bento { grid-template-columns: 1fr; }
  .h-receipt { padding: 22px 20px 18px; }
  .h-receipt li { font-size: 15px; }
  .h-devices-art { --sw: 110; }
}

/* ── Motion ──
   html[data-motion] is set by an inline script when the visitor allows
   motion. home.js does the scenes; the rest is CSS. */
html:not([data-motion]) .h-stage-phone .h-screen, html:not([data-motion]) .h-step-copy { transition: none; }
html:not([data-motion]) .h-caret { animation: none; }
/* Until home.js has rewound the hero, hide what it's about to animate. */
html[data-motion] [data-scene="hero"]:not(.is-live) :is(.h-total, .h-wipe) { opacity: 0; }
html[data-motion] .h-rv { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
html[data-motion] .h-rv:not(.is-in):not(:focus-within) { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: no-preference) {
  .h-marquee-track { animation: h-marquee 70s linear infinite; }
  @keyframes h-marquee { to { transform: translateX(calc(-50% - 7px)); } }
  .h-sync path { animation: h-flow 1.4s linear infinite; }
  @keyframes h-flow { to { stroke-dashoffset: -22; } }

  @supports (animation-timeline: view()) {
    /* The privacy lines light up one by one as they cross the screen. */
    .h-line { animation: h-lit linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
    @keyframes h-lit { from { opacity: .18; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
    /* The hero's chips drift at different depths. */
    .h-float { animation: h-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .h-float-1 { --d: 70px; } .h-float-2 { --d: -50px; } .h-float-3 { --d: 36px; }
    @keyframes h-drift { from { translate: 0 calc(var(--d) * -.5); } to { translate: 0 var(--d); } }
    /* The phone joins the Mac. */
    .h-devices-phone { animation: h-join linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes h-join { from { translate: 90px 30px; rotate: 6deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
  }
}