/* Dorax Finance — Open Finance on a phone, v336 (features/phone/openbank-land.js): the forest only in the bar; on the page the question and three
   answers apart, then how it would work, what it would give and your data, with no box. The page's own colours (--bq-*). */
@media (max-width: 920px) {
  :root.land .obl { display: flex; flex-direction: column; gap: 34px; padding: 30px 0 28px; }
  :root.land .obl-top { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  :root.land .obl-now { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); font-size: 13px; font-weight: 600; }
  :root.land .obl-now i { width: 8px; height: 8px; border-radius: 50%; background: var(--bq-ink-3); }
  :root.land .obl-q { margin: 0; color: var(--bq-ink); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
  :root.land .obl-sub { margin: -6px 0 0; color: var(--bq-ink-2); font-size: 14px; line-height: 1.45; }
  /* three answers, each its own button with room between them */
  :root.land .obl-votes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
  :root.land .obl-vote { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line-2, var(--bq-line)); color: var(--bq-ink); font-size: 15px; font-weight: 600; transition: background-color 250ms ease-out, box-shadow 250ms ease-out, color 250ms ease-out, transform 120ms ease-out; }
  :root.land .obl-vote.on { background: var(--lk-lime); box-shadow: none; color: var(--lk-deep); }
  :root.land .obl-vote:active { transform: scale(.97); }
  :root.land .obl-vote:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land .obl-thanks { display: flex; align-items: center; gap: 8px; margin: -2px 0 0; color: var(--bq-accent); font-size: 13.5px; font-weight: 600; }
  :root.land .obl-thanks svg { width: 16px; height: 16px; stroke-width: 2.4; }

  :root.land .obl-sec { display: flex; flex-direction: column; }
  :root.land .obl-sec > h2 { margin: 0 0 12px; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land .obl-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.land .obl-t b { color: var(--bq-ink); font-size: 15px; font-weight: 600; }
  :root.land .obl-t small { color: var(--bq-ink-2); font-size: 13px; line-height: 1.4; }
  :root.land .obl-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }
  :root.land .obl-ic svg { width: 18px; height: 18px; }
  /* four steps on one line */
  :root.land .obl-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  :root.land .obl-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
  :root.land .obl-steps li:last-child { padding-bottom: 0; }
  :root.land .obl-steps li:not(:last-child)::after { content: ""; position: absolute; top: 36px; bottom: 4px; left: 15px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--lk-lime) 25%, transparent); }
  :root.land .obl-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bq-accent); color: var(--bq-accent); font-size: 14px; font-weight: 700; }
  :root.land .obl-steps .obl-t { padding-top: 5px; }
  /* four pictures, two by two */
  :root.land .obl-gives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  :root.land .obl-give { display: flex; flex-direction: column; gap: 10px; }
  :root.land .obl-give .obl-ic { width: 44px; height: 44px; }
  :root.land .obl-give .obl-ic svg { width: 20px; height: 20px; }
  /* your data: rows with no box */
  :root.land .obl-rows { display: flex; flex-direction: column; margin-top: -10px; }
  :root.land .obl-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; }
  :root.land .obl-row + .obl-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--bq-line); }
  /* what it is: one row that opens */
  :root.land .obl-wh { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 12px; min-height: 56px; }
  :root.land .obl-wh b { flex: 1 1 auto; color: var(--bq-ink); font-size: 15px; font-weight: 600; }
  :root.land .obl-chev { flex: none; display: grid; color: var(--bq-ink-3); transform: rotate(90deg); transition: transform 300ms var(--ease); }
  :root.land .obl-wh[aria-expanded="true"] .obl-chev { transform: rotate(-90deg); }
  :root.land .obl-chev svg { width: 16px; height: 16px; }
  :root.land .obl-wh:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 14px; }
  :root.land .obl-wa p { margin: 4px 0 0 52px; color: var(--bq-ink-2); font-size: 14px; line-height: 1.55; animation: recl-in 260ms var(--ease) both; }
  :root.land .obl-keep { display: flex; gap: 10px; margin: -14px 0 0; color: var(--bq-ink-3); font-size: 13px; line-height: 1.5; }
  :root.land .obl-keep > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
  :root.land .obl-keep .linkbtn { color: var(--bq-accent); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { :root.land :is(.obl-vote, .obl-chev) { transition: none; } :root.land .obl-wa p { animation: none; } }
}
