/* ===================================================================
   Durusi — expandable product bento (Stripe-pattern)
   Three consistent rows: copy left, full app screen right.
   Clicking a row opens a dialog where the screen is the hero.
   Self-contained: only reads tokens already defined in home.css.
   =================================================================== */

.bento-sec { position: relative; }

/* ── rows ────────────────────────────────────────────────────────────── */
.bento { display: flex; flex-direction: column; gap: 16px; max-width: 1060px; margin: 0 auto; }

.bento-card {
  --acc: #15AC76;
  --acc-2: #45FBB2;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--r-card);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.bento-card:hover { transform: translateY(-3px); }
.bento-card:active { transform: translateY(-1px); }

/* pointer-following gradient ring (Stripe's .__border + .__border-color) */
.bento-card__glow {
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--r-card) + 1.5px);
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s linear;
  pointer-events: none;
  z-index: 0;
}
.bento-card:hover .bento-card__glow,
.bento-card:focus-visible .bento-card__glow { opacity: 1; }

.bento-card__glow::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  left: 0; top: 0;
  transform: translate(calc(var(--mx, 50%) - 310px), calc(var(--my, 50%) - 310px));
  background: radial-gradient(circle, var(--acc-2) 0%, var(--acc) 34%, transparent 68%);
  opacity: .85;
}

.bento-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 556px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,39,24,.04), 0 12px 32px rgba(16,39,24,.05);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.bento-card:hover .bento-card__inner {
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(16,39,24,.05), 0 22px 50px rgba(16,39,24,.10);
}

.bento-card__text {
  position: relative;
  z-index: 2;
  flex: 0 0 43%;
  padding: 44px 28px 44px 46px;
}
.bento-card__eyebrow {
  display: block;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 10px;
}
.bento-card__title {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.24rem, 2vw, 1.72rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--forest);
  max-width: 24ch;
  text-wrap: balance;
}
.bento-card__hint {
  display: block;
  margin-top: 18px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--acc);
}
.bento-card__hint span { border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); padding-bottom: 1px; }

/* the ⤢ affordance, top-right */
.bento-card__expand {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 3;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(16,39,24,.05);
  color: var(--forest);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.bento-card:hover .bento-card__expand {
  background: var(--acc);
  color: #fff;
  transform: scale(1.06);
}
.bento-card__expand svg { width: 13px; height: 13px; display: block; }

/* screenshot — whole device visible, no crop, no light frame.
   The media side is a tinted panel so the composition reads as deliberate
   rather than a small phone floating in empty white. */
.bento-card__media {
  position: relative;
  z-index: 1;
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 34px;
  min-width: 0;
  background:
    radial-gradient(120% 90% at 50% 108%, color-mix(in srgb, var(--acc) 20%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, color-mix(in srgb, var(--acc) 7%, #fff) 0%, color-mix(in srgb, var(--acc) 2%, #fff) 100%);
  border-left: 1px solid var(--line);
}
.bento-card__media img {
  display: block;
  width: 248px;
  height: auto;
  border-radius: 34px;
  box-shadow: 0 18px 46px rgba(16,39,24,.20), 0 2px 8px rgba(16,39,24,.08);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.bento-card:hover .bento-card__media img { transform: translateY(-6px) scale(1.015); }


/* ── dialog ──────────────────────────────────────────────────────────── */
.bento-dlg {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bento-dlg.is-open { display: block; }

.bento-dlg__scrim {
  position: fixed;
  inset: 0;
  background: rgba(226, 236, 231, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
}
.bento-dlg.is-in .bento-dlg__scrim { opacity: 1; }

.bento-dlg__wrap {
  position: relative;
  min-height: 100%;
  padding: 48px 24px 72px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.bento-dlg__panel {
  --acc: #15AC76;
  --acc-2: #45FBB2;
  position: relative;
  width: 100%;
  max-width: 1120px;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 40px 90px rgba(16,39,24,.18);
  padding: 46px 52px 50px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.bento-dlg.is-in .bento-dlg__panel { opacity: 1; transform: none; }

/* blurred accent orbs, Stripe's bento-overlay-gradient */
.bento-dlg__panel::before {
  content: "";
  position: absolute;
  right: -6%; top: -26%;
  width: 58%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 30%, transparent) 0%, transparent 62%);
  filter: blur(12px);
  pointer-events: none;
}
.bento-dlg__panel::after {
  content: "";
  position: absolute;
  right: 12%; bottom: -30%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc-2) 32%, transparent) 0%, transparent 64%);
  filter: blur(14px);
  pointer-events: none;
}
.bento-dlg__panel > * { position: relative; z-index: 1; }

.bento-dlg__close {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 4;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 11px;
  background: rgba(16,39,24,.06);
  color: var(--forest);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.bento-dlg__close:hover { background: var(--forest); color: #fff; }
.bento-dlg__close svg { width: 15px; height: 15px; display: block; }

/* top block: copy left, the screen as the hero on the right */
.bento-dlg__top {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 46px;
  align-items: center;
}
.bento-dlg__copy { min-width: 0; padding-right: 8px; }

.bento-dlg__eyebrow {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acc);
}
.bento-dlg__title {
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--forest);
  max-width: 18ch;
  text-wrap: balance;
}
.bento-dlg__lede {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--cocoa);
  font-size: 1.04rem;
  line-height: 1.66;
}
.bento-dlg__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.bento-dlg__hero { display: flex; justify-content: center; align-items: center; }
.bento-dlg__hero img {
  display: block;
  width: 318px;
  max-width: 100%;
  height: auto;
  border-radius: 44px;
  box-shadow: 0 30px 70px rgba(16,39,24,.24), 0 3px 10px rgba(16,39,24,.10);
}

/* feature pairs — 2x2 beside the screen so the whole dialog fits one screen */
.bento-dlg__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(16,39,24,.10);
}
.bento-dlg__grid h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin-bottom: 5px;
}
.bento-dlg__grid p { color: var(--cocoa); font-size: .88rem; line-height: 1.5; }

/* CTA takes the card's own accent so each dialog is themed end to end.
   glass.css styles buttons via `.btn:not(.btn-ghost):not(.btn-white):not(.btn-yellow)`
   which is specificity (0,4,0) with !important, so these selectors deliberately
   carry five classes to outrank it. Do not "simplify" them. */
.bento-dlg__panel .bento-dlg__cta .btn:not(.btn-ghost):not(.btn-white),
.bento-dlg__panel .bento-dlg__cta .btn-primary:not(.btn-ghost) {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: #fff !important;
}
.bento-dlg__panel .bento-dlg__cta .btn:not(.btn-ghost):not(.btn-white):hover,
.bento-dlg__panel .bento-dlg__cta .btn-primary:not(.btn-ghost):hover {
  background: var(--forest) !important;
  border-color: var(--forest) !important;
  color: #fff !important;
}
.bento-dlg__panel .bento-dlg__cta .btn * { color: inherit !important; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .bento-dlg__panel { padding: 46px 34px 52px; }
  .bento-dlg__top { grid-template-columns: 1fr 260px; gap: 32px; }
  .bento-dlg__hero img { width: 250px; border-radius: 34px; }
  .bento-card__text { flex-basis: 50%; padding: 38px 20px 38px 38px; }
  .bento-card__media { padding: 26px 34px; }
}

@media (max-width: 780px) {
  /* rows become stacked cards, copy above the screen */
  .bento-card__inner { flex-direction: column; align-items: stretch; min-height: 0; }
  .bento-card__text { flex: none; padding: 28px 26px 0; padding-right: 60px; }
  .bento-card__title { max-width: none; }
  .bento-card__media { padding: 26px 26px 32px; border-left: 0; border-top: 1px solid var(--line); }
  .bento-card__media img { width: 230px; border-radius: 32px; }
}

@media (max-width: 640px) {
  .bento-dlg__wrap { padding: 18px 12px 44px; }
  .bento-dlg__panel { padding: 38px 22px 42px; border-radius: 18px; }
  .bento-dlg__top { grid-template-columns: 1fr; gap: 30px; }
  .bento-dlg__copy { padding-right: 0; }
  .bento-dlg__hero img { width: 230px; border-radius: 32px; }
  .bento-dlg__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; padding-top: 28px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bento-card,
  .bento-card__inner,
  .bento-card__media img,
  .bento-card__glow,
  .bento-dlg__panel,
  .bento-dlg__scrim { transition: none !important; }
  .bento-card:hover { transform: none; }
  .bento-card:hover .bento-card__media img { transform: none; }
  .bento-dlg__panel { transform: none; }
}

/* Stop the page scrolling behind an open dialog.
   Deliberately body-only: putting overflow:hidden on <html> makes the root a
   scroll container, which breaks compositing over the WebGL page background
   (the whole viewport paints black). Locking body alone holds the scroll
   position just as well and leaves the root layer untouched. */
html.bento-lock body { overflow: hidden; }