/* THE LANDING PAGE FOR MINERAL OWNERS and the guides index (round 11). Older readers: large plain type, high contrast,
   big tap targets, one column on a phone, nothing that moves text. Colors only through the site's variables. */
.landing { max-width: 880px; margin: 0 auto; padding: 0 16px 48px; font-size: 1.125rem; line-height: 1.65; }
.landing p, .landing li { color: var(--text); }
.landing h1 { font-size: 2.2rem; line-height: 1.15; margin: 2rem 0 .8rem; }
.landing h2 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .8rem; }
.landing h3 { font-size: 1.22rem; line-height: 1.35; margin: 0 0 .5rem; }
.landing a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.lp-lead { font-size: 1.25rem; line-height: 1.6; color: var(--text-2); margin: 0 0 1.4rem; max-width: 40em; }
.lp-hero { padding: 0 0 1.6rem; border-bottom: 1px solid var(--line); }

.lp-search { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.lp-search label { display: block; font-weight: 650; font-size: 1.2rem; margin: 0 0 .6rem; color: var(--text); }
.lp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.landing input[type=search], .landing input[type=email], .landing input[type=text] {
  min-height: 52px; font-size: 1.125rem; padding: 12px 14px; width: 100%;
  border: 2px solid var(--line-strong); background: var(--bg); color: var(--text);
}
.lp-row input[type=search] { flex: 1 1 260px; width: auto; }
.landing input::placeholder { color: var(--muted); opacity: 1; }
.landing input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.landing .lp-btn { min-height: 52px; font-size: 1.1rem; padding: 12px 22px; white-space: normal; }
.lp-join { margin: 1rem 0 0; font-size: 1.15rem; }

.lp-band { padding: 2rem 0 0; }
.lp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lp-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.lp-card p:last-child { margin-bottom: 0; }
.lp-tag { display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: .8rem;
  font-weight: 650; letter-spacing: .04em; color: var(--text); background: var(--surface-3); border: 1px solid var(--line-strong); }

.lp-promise { border: 2px solid var(--accent); }
.lp-promises { margin: 0 0 1rem; padding-left: 1.2em; }
.lp-promises li { margin: 0 0 .7rem; }
.landing .lp-small { font-size: 1rem; color: var(--text-2); }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-steps li { background: var(--surface-1); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 16px 18px; }

.lp-cost { font-size: 1.25rem; font-weight: 600; }

.lp-form { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.lp-form label { font-weight: 650; margin-top: 6px; }
.lp-form .lp-btn { margin-top: 12px; align-self: flex-start; }
.lp-said { font-weight: 650; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border-left: 4px solid var(--accent); }
.lp-claim { margin: 0; }

.lp-guides { list-style: none; margin: 0; padding: 0; }
.lp-guides li { padding: .6rem 0; border-top: 1px solid var(--line); }
.lp-guides li:first-child { border-top: 0; padding-top: 0; }
.lp-guides p { margin: .3rem 0 0; color: var(--text-2); }
.guides-index .lp-card { margin-top: 1rem; }

/* ------------------------------------------------------------------ THE OWNER LANDING PAGE (round 13)
   The app's own design system (style.css: .hero, .live, .statband, .features, .card, .kv, .ticks, .price) carries the
   look; these rules add only what an older reader needs (larger type, plain contrast, 48 px targets), the chart, the
   steps row and the phone fixes. main.owner-home is the page's own class: the guides index keeps .landing. */
.owner-home { font-size: 1.0625rem; line-height: 1.65; }
.owner-home p, .owner-home li { font-size: 1.0625rem; }
.owner-home a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.owner-home .section-head h2, .owner-home .card h2 { font-size: 1.6rem; line-height: 1.25; letter-spacing: -.01em; }
.owner-home .card h2 { margin: 0 0 .7rem; }
.owner-home .btn { min-height: 48px; font-size: 1.05rem; }

/* the hero: the map is behind; the words stand on their own shade in both themes */
.oh-hero .hero-in { padding-top: 56px; padding-bottom: 56px; }
.oh-hero h1 { max-width: 13ch; }
.oh-hero .lead { font-size: 1.2rem; line-height: 1.6; color: var(--text); max-width: 46ch; }
.oh-search { max-width: 600px; margin: 1.4rem 0 0; padding: 18px; border-radius: var(--r-lg);
  background: rgba(var(--surface-rgb), .92); border: 1px solid var(--line); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.oh-search label { display: block; font-size: 1.25rem; font-weight: 650; color: var(--text); margin: 0 0 .6rem; }
.oh-search-row { display: flex; flex-wrap: wrap; gap: 10px; }
.oh-search input[type=search] { flex: 1 1 240px; min-height: 52px; font-size: 1.1rem; padding: 12px 14px;
  border: 2px solid var(--line-strong); background: var(--bg); color: var(--text); }
.oh-search input::placeholder { color: var(--muted); opacity: 1; }
.oh-search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.oh-search .btn { min-height: 52px; padding: 0 22px; font-size: 1.1rem; }
.owner-home .oh-note { margin: .7rem 0 0; font-size: 1rem; color: var(--text-2); }
.oh-hero .hero-links { margin-top: 20px; }
.oh-hero .btn-ghost { background: rgba(var(--surface-rgb), .85); }
.oh-hero .btn-ghost:hover { background: var(--surface-2); }
.oh-hero .live { font-size: .8rem; line-height: 1.35; max-width: 100%; }

/* the four numbers */
.oh-band { padding-top: 36px; }
.owner-home .statband .stat { padding: 20px 22px; }
.owner-home .statband .stat-n { font-size: 2rem; }
.owner-home .statband .stat-l { font-size: .8rem; color: var(--text-2); }
.oh-statband.oh-n3 { grid-template-columns: repeat(3, 1fr); }
.oh-statband.oh-n2 { grid-template-columns: repeat(2, 1fr); }

/* what you get */
.owner-home .oh-head-note { margin: 0; color: var(--text-2); font-size: 1.0625rem; }
.owner-home .feature { padding: 22px; display: flex; flex-direction: column; }
.owner-home .feature h3 { font-size: 1.2rem; line-height: 1.35; margin: 14px 0 8px; }
.owner-home .feature p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.owner-home .feature .oh-more { margin-top: auto; padding-top: 12px; }
.owner-home .feature .oh-more a { display: inline-flex; align-items: center; min-height: 48px; }
.oh-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: .78rem;
  font-weight: 650; letter-spacing: .04em; color: var(--text); background: var(--surface-3); border: 1px solid var(--line-strong); }
.owner-home .feature-ico { width: 44px; height: 44px; border-radius: 12px; }

/* proof: the chart card and the table of right now */
.oh-proof { align-items: start; }
.owner-home .oh-proof .card { margin: 16px 0 0; }
.oh-decline .eyebrow { margin-top: 0; }
.oh-chart { margin: 14px 0 0; }
.oh-chart svg { display: block; width: 100%; height: auto; max-width: 560px; overflow: visible; }
.oh-bar { fill: var(--chart-bar); transition: fill .15s ease; }
.oh-bar:hover { fill: var(--accent); }
.oh-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.oh-base { stroke: var(--line-strong); stroke-width: 1.5; }
.oh-axis-t { fill: var(--muted); font: 500 11.5px var(--font); }
.oh-axis-w { fill: var(--muted); font: 600 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.oh-val { fill: var(--text); font: 650 11.5px var(--mono); }
.oh-chart figcaption { margin: 12px 0 0; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.oh-table { margin: .8rem 0 0; }
.oh-table summary { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.0625rem; font-weight: 600; }
.oh-table table { max-width: 320px; margin: .3rem 0 .4rem; }
.oh-table th, .oh-table td { padding: 6px 10px 6px 0; text-align: left; border-bottom: 1px solid var(--line-soft); }
.owner-home .oh-why { margin: .6rem 0 0; color: var(--text); }
.oh-tested { margin: 18px 0 0; padding: 16px 18px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-soft); }
.oh-tested h3 { margin: 0 0 .4rem; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; }
.oh-tested h3 .ico { color: var(--approved-text); }
.owner-home .oh-tested p { margin: 0; color: var(--text-2); }
.oh-now .kv th, .oh-now .kv td { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.0625rem; }
.oh-now .kv th { color: var(--text-2); width: auto; padding-right: 12px; text-align: left; }
.oh-now .kv td { text-align: right; color: var(--text); font-size: 1.0625rem; }
.owner-home .oh-quiet { margin: 1rem 0 0; color: var(--text-2); font-size: 1rem; }

/* family and the promise */
.owner-home .oh-wide { margin: 0; }
.oh-ico-xl { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; }
.oh-ico-xl .ico { width: 26px; height: 26px; }
.oh-family { display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .06), rgba(var(--violet-rgb), .06)), var(--surface-1); }
.oh-family p { margin: 0; color: var(--text); }
.owner-home .oh-promise { border: 2px solid rgba(var(--accent-rgb), .55); box-shadow: var(--glow); }
.oh-promise-head { display: flex; align-items: center; gap: 16px; margin-bottom: .6rem; }
.oh-promise-head h2 { margin: 0; }
.oh-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.oh-promises li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.oh-check { display: inline-flex; flex: 0 0 auto; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--approved-text); background: rgba(var(--approved-rgb), .12); border: 1px solid rgba(var(--approved-rgb), .35); margin-top: 1px; }
.oh-check .ico { width: 16px; height: 16px; }

/* how it works: three cards, the numeral from a counter */
.oh-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: ohstep; }
.oh-steps li { counter-increment: ohstep; position: relative; background: var(--surface-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 20px 22px 22px; color: var(--text); }
.oh-steps li::before { content: counter(ohstep); display: block; font: 700 2.4rem/1 var(--font); letter-spacing: -.03em; margin: 0 0 10px;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* what it costs: two plans (round 18), side by side from 760px, stacked on a phone */
.oh-plans { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 16px 0 0; align-items: stretch; }
.owner-home .oh-plan { margin: 0; display: flex; flex-direction: column; }
.owner-home .oh-plan-complete { border-color: rgba(var(--accent-rgb), .4); box-shadow: var(--glow);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), transparent 45%), var(--surface-1); }
.owner-home .oh-plan-name { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.01em; color: var(--text); }
.oh-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.oh-plan-pills { display: flex; flex-wrap: wrap; gap: 6px 8px; flex: 1 1 100%; }   /* own row: both lists start level */
.owner-home .oh-plan .price { margin: 0; font-size: 1.1rem; color: var(--text-2); white-space: nowrap; }
.owner-home .oh-plan .price-n { font-size: 3rem; }
.owner-home .oh-plan .pill { font-size: .8rem; }
.owner-home .oh-cost { font-weight: 600; font-size: 1.15rem; color: var(--text); margin: 1.1rem 0 0; max-width: 60ch; }
.owner-home .oh-ticks { margin: 1rem 0 0; }
.owner-home .oh-ticks li { font-size: 1.0625rem; color: var(--text); }
.owner-home .oh-notice { margin-top: .9rem; }
.owner-home .oh-plan-note { margin: .6rem 0 0; color: var(--text); font-weight: 600; font-size: 1rem; }
/* the small "Complete plan" tag beside a showcase row's heading */
.oh-tag-plan { color: var(--accent-text); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .4);
  white-space: nowrap; letter-spacing: .02em; }
.oh-row-words h3 .oh-tag-plan { vertical-align: 4px; margin-left: 0; }   /* no indent when it wraps under the heading */

/* early access: the round 11 form, in the app's card */
.oh-early { padding-bottom: 56px; }
.owner-home .lp-btn { min-height: 52px; font-size: 1.1rem; padding: 12px 22px; white-space: normal; }
.owner-home .lp-form input[type=email], .owner-home .lp-form input[type=text] {
  min-height: 52px; font-size: 1.1rem; padding: 12px 14px; width: 100%;
  border: 2px solid var(--line-strong); background: var(--bg); color: var(--text); }
.owner-home .lp-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }

.oh-hero h1 em { display: block; }
.oh-now .kv td { white-space: nowrap; }
.oh-proof { padding-top: 28px; }

@media (min-width: 640px) {
  .oh-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .oh-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-items: start; padding: 18px; }
  .oh-steps li::before { margin: 0; font-size: 2.2rem; }
}
/* round 18: the two plans side by side from 760px; the early access card stays under them */
@media (min-width: 760px) {
  .oh-plans { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .oh-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .oh-hero .hero-in { padding-top: 88px; padding-bottom: 84px; }
  .oh-hero h1 { font-size: 4rem; }
  .owner-home .section-head h2 { font-size: 1.85rem; }
  .oh-proof { grid-template-columns: 1.2fr 1fr; gap: 0 20px; }
}
@media (max-width: 759px) {
  .oh-hero .hero-in { padding: 36px 16px 40px; }
  .oh-hero h1 { font-size: 2.6rem; }
  .owner-home > .wrap { padding: 0 16px; }
  .oh-search { padding: 14px; }
  /* on a phone the words cover the whole map: a flatter, stronger shade so no place name shows through a sentence */
  .oh-hero .hero-shade { background: linear-gradient(180deg, rgba(var(--bg-rgb), .95) 0%, rgba(var(--bg-rgb), .93) 60%, rgba(var(--bg-rgb), .97) 100%); }
  .oh-hero .live { letter-spacing: .07em; font-size: .76rem; padding: 8px 12px; }
  .oh-search .btn { flex: 1 1 100%; justify-content: center; }
  .oh-hero .hero-links .btn { flex: 1 1 100%; justify-content: center; }
  .owner-home .statband .stat { padding: 16px; }
  .owner-home .statband .stat-n { font-size: 1.6rem; }
  .oh-statband.oh-n3 { grid-template-columns: repeat(2, 1fr); }
  .owner-home .card { padding: 20px 18px; }
  .oh-family { flex-direction: column; gap: 12px; }
  .owner-home .lp-btn { width: 100%; }
  .lp-form .lp-btn { align-self: stretch; }
}

/* ------------------------------------------------------------------ ROUND 13, PART TWO: the product working
   The map showpiece (a preview that opens full screen) and "A look inside": one row per feature, words beside a real
   panel. Colors only through the site's variables; geometry from landing.py; no style attribute in the page. */

/* the map showpiece */
.oh-mapx { position: relative; height: 360px; margin: 16px 0 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .35); box-shadow: var(--glow), var(--shadow);
  background: radial-gradient(ellipse at 30% 40%, rgba(var(--accent-rgb), .16), transparent 60%),
              radial-gradient(ellipse at 75% 65%, rgba(var(--violet-rgb), .16), transparent 55%), var(--surface-1);
  transition: transform .2s ease, box-shadow .2s ease; }
.oh-mapx:hover { transform: translateY(-3px); }
.oh-mapx-map { position: absolute; inset: 0; }
.oh-mapx-link { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 20px; cursor: pointer; text-decoration: none;
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), .45), rgba(var(--bg-rgb), 0) 62%); }
/* (the page underlines its text links with `.owner-home a:not(.btn)`; this link is a whole panel, so it must outrank it) */
.owner-home a.oh-mapx-link, .owner-home a.oh-mapx-link:hover, .owner-home a.oh-mapx-link:focus { text-decoration: none; }
.oh-mapx-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.owner-home .oh-mapx-btn { min-height: 58px; padding: 0 30px; font-size: 1.2rem; border-radius: 999px; gap: 10px;
  animation: oh-ring 2.4s ease-out infinite; }
.oh-mapx-btn .ico { width: 22px; height: 22px; }
.oh-mapx-link:hover .oh-mapx-btn { filter: brightness(1.08); }
@keyframes oh-ring {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55), 0 10px 30px rgba(var(--violet-rgb), .3); }
  70% { box-shadow: 0 0 0 18px rgba(var(--accent-rgb), 0), 0 10px 30px rgba(var(--violet-rgb), .3); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0), 0 10px 30px rgba(var(--violet-rgb), .3); }
}
.oh-mapx-fallback { display: block; max-width: 34ch; text-align: center; color: var(--text-2); font-size: 1rem;
  padding: 8px 14px; border-radius: var(--r); background: rgba(var(--surface-rgb), .85); }
.oh-mapx.is-live .oh-mapx-fallback { display: none; }
.oh-mapx-map .maplibregl-ctrl-attrib { opacity: .7; }
.oh-mapx-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 14px 0 0; }
.oh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.owner-home .oh-legend .pill { font-size: .78rem; }
.oh-mapx-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.oh-wkey { gap: 6px 14px; }
.oh-wkey[hidden] { display: none; }
.oh-wkey span { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.owner-home .oh-mapx-note { margin: 0; }

/* the full-screen map: a dialog over everything. THE MAP FILLS IT; the way back, the two switches, the zoom buttons
   and the one offer strip float over it as frosted glass made from the theme's own colors. */
.oh-mapx-on, .oh-mapx-on body { overflow: hidden; }
.oh-mapx-dialog { position: fixed; inset: 0; z-index: 2000; display: block; background: var(--bg); overflow: hidden;
  --mx-gap: 8px; --mx-top: calc(var(--mx-gap) + env(safe-area-inset-top, 0px));
  --mx-left: calc(var(--mx-gap) + env(safe-area-inset-left, 0px)); --mx-right: calc(var(--mx-gap) + env(safe-area-inset-right, 0px));
  --mx-bottom: calc(var(--mx-gap) + env(safe-area-inset-bottom, 0px)); --mx-cta-h: 64px;
  --glass-bg: rgba(var(--bg-rgb), .56); --glass-rim: rgba(255, 255, 255, .13);
  --glass-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
  --glass-chip: rgba(255, 255, 255, .11); --glass-chip-edge: inset 0 0 0 1px rgba(255, 255, 255, .1); }
:root[data-theme="light"] .oh-mapx-dialog { --glass-bg: rgba(var(--bg-rgb), .62); --glass-rim: rgba(255, 255, 255, .75);
  --glass-shadow: 0 10px 30px -10px rgba(15, 27, 42, .35), 0 1px 3px rgba(15, 27, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
  --glass-chip: rgba(255, 255, 255, .92); --glass-chip-edge: 0 1px 3px rgba(15, 27, 42, .16), inset 0 0 0 1px rgba(15, 27, 42, .06); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .oh-mapx-dialog { --glass-bg: rgba(var(--bg-rgb), .62); --glass-rim: rgba(255, 255, 255, .75);
    --glass-shadow: 0 10px 30px -10px rgba(15, 27, 42, .35), 0 1px 3px rgba(15, 27, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
    --glass-chip: rgba(255, 255, 255, .92); --glass-chip-edge: 0 1px 3px rgba(15, 27, 42, .16), inset 0 0 0 1px rgba(15, 27, 42, .06); }
}
.oh-mapx-dialog[hidden] { display: none; }
.oh-mapx-dialog:focus { outline: none; }
.oh-mapx-dialog .oh-glass, .oh-mapx-dialog .oh-mapx-back.btn, .oh-mapx-dialog .maplibregl-ctrl-group {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-rim); box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); color: var(--text); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .oh-mapx-dialog .oh-glass, .oh-mapx-dialog .oh-mapx-back.btn, .oh-mapx-dialog .maplibregl-ctrl-group {
    background: rgba(var(--surface-rgb), .97) !important; }
}
.oh-mapx-body { position: absolute; inset: 0; }
/* top left: the way back, in words, then the two switches under it */
.oh-mapx-top { position: absolute; z-index: 5; top: var(--mx-top); left: var(--mx-left); display: flex; align-items: center;
  gap: 14px; max-width: calc(100% - 90px); pointer-events: none; }
.oh-mapx-top > * { pointer-events: auto; }
.oh-mapx-dialog .oh-mapx-back.btn { min-height: 48px; border-radius: 999px; font-size: 1rem; font-weight: 650;
  padding: 0 18px 0 12px; gap: 8px; flex: 0 0 auto; }
.oh-mapx-dialog .oh-mapx-back.btn:hover { background: rgba(var(--bg-rgb), .74) !important; }
.oh-mapx-back:focus-visible, .oh-mapx-sw:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.oh-back-ico { display: inline-flex; transform: rotate(180deg); }
.oh-back-ico .ico { width: 20px; height: 20px; }
.owner-home .oh-mapx-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.oh-mapx-layers { position: absolute; z-index: 5; top: calc(var(--mx-top) + 54px); left: var(--mx-left); display: flex;
  gap: 2px; padding: 2px; border-radius: 999px; }
.oh-mapx-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px 0 13px; border: 0;
  border-radius: 999px; background: transparent; color: var(--text-2); font: 600 .9375rem/1 var(--font); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; }
.oh-mapx-sw[hidden] { display: none; }
.oh-mapx-sw[aria-pressed="true"] { color: var(--text); background: var(--glass-chip); box-shadow: var(--glass-chip-edge); }
.oh-mapx-sw:hover { color: var(--text); }
.oh-sw-dot { flex: none; width: 10px; height: 10px; transition: opacity .18s ease, filter .18s ease; }
.oh-sw-unit { border-radius: 3px; background: conic-gradient(var(--approved) 0 34%, var(--hearing) 0 67%, var(--pending) 0); }
.oh-sw-well { border-radius: 50%; background: var(--ow-shale); box-shadow: 0 0 7px var(--ow-shale); }
.oh-mapx-sw[aria-pressed="false"] .oh-sw-dot { opacity: .4; filter: grayscale(1); box-shadow: inset 0 0 0 2px currentColor; background: none; }
/* top right: the zoom buttons, the same glass */
.oh-mapx-dialog .maplibregl-ctrl-top-right { top: var(--mx-top); right: var(--mx-right); }
.oh-mapx-dialog .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
.oh-mapx-dialog .maplibregl-ctrl-group { border-radius: 16px !important; }
.oh-mapx-dialog .maplibregl-ctrl-group button { width: 44px; height: 44px; background: transparent; }
.oh-mapx-dialog .maplibregl-ctrl-group button + button { border-top: 1px solid var(--glass-rim) !important; }
.oh-mapx-dialog .maplibregl-ctrl-group button:hover { background: rgba(var(--bg-rgb), .4) !important; }
.oh-mapx-dialog .maplibregl-ctrl-group button .maplibregl-ctrl-icon { opacity: 1; }
/* the attribution (required): compact, always above the offer strip */
.oh-mapx-dialog .maplibregl-ctrl-bottom-right { right: var(--mx-right); bottom: calc(var(--mx-bottom) + var(--mx-cta-h) + 8px); }
.oh-mapx-dialog .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact { margin: 0; }
/* the hint: above the strip and the attribution, gone after the first tap */
.oh-mapx-hint { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(var(--mx-bottom) + var(--mx-cta-h) + 42px);
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 9px 16px; border-radius: 999px;
  font-size: .9375rem; line-height: 1.3; text-align: center; pointer-events: none; }
.oh-mapx-hint[hidden] { display: none; }
/* bottom: ONE strip, the offer line and its button on one row */
.oh-mapx-cta { position: absolute; z-index: 5; left: var(--mx-left); right: var(--mx-right); bottom: var(--mx-bottom);
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 18px; }
.owner-home .oh-mapx-offer { margin: 0; flex: 1 1 auto; min-width: 0; font-size: .84375rem; line-height: 1.3; color: var(--text); }
.oh-mapx-offer span { color: var(--text-2); }
.owner-home .oh-mapx-go { flex: 0 0 auto; min-height: 44px; padding: 0 14px; font-size: .875rem; border-radius: 13px;
  justify-content: center; white-space: nowrap; }
.oh-mapx-dialog.is-moving .oh-mapx-top, .oh-mapx-dialog.is-moving .oh-mapx-cta, .oh-mapx-dialog.is-moving .oh-mapx-hint,
.oh-mapx-dialog.is-moving .oh-mapx-layers { opacity: 0; }
.oh-mapx-dialog .oh-mapx-top, .oh-mapx-dialog .oh-mapx-cta, .oh-mapx-dialog .oh-mapx-layers { transition: opacity .18s ease; }
.oh-popup .maplibregl-popup-content { background: var(--surface-1); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 30px 12px 14px; font: 1rem/1.45 var(--font); }
.oh-popup .maplibregl-popup-tip { border-top-color: var(--surface-1); border-bottom-color: var(--surface-1); }
.oh-popup .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 1.3rem; color: var(--text-2); }
.oh-pop { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.oh-pop-name { font-size: 1.05rem; }
.oh-pop-line { color: var(--text-2); }
@media (min-width: 760px) {
  .oh-mapx-dialog { --mx-gap: 16px; }
  .oh-mapx-layers { top: calc(var(--mx-top) + 60px); }
  /* the desk has room: the title beside the way back, and the strip a compact bar in the middle of the foot */
  .owner-home .oh-mapx-title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    clip-path: none; font-size: 1.125rem; line-height: 1.25; font-weight: 700; color: var(--text);
    text-shadow: 0 0 2px rgba(var(--bg-rgb), 1), 0 0 10px rgba(var(--bg-rgb), .95), 0 0 22px rgba(var(--bg-rgb), .8); }
  .oh-mapx-cta { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--mx-gap) - 220px);
    gap: 16px; padding: 7px 7px 7px 20px; }
  .owner-home .oh-mapx-offer { font-size: .9375rem; }
  .owner-home .oh-mapx-go { min-height: 44px; }
}
@media (min-width: 760px) {
  .oh-mapx { height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .owner-home .oh-mapx-btn { animation: none; }
  .oh-mapx, .oh-mapx:hover { transition: none; transform: none; }
}

/* a look inside: one row per feature */
.oh-show .section-head { margin-bottom: 8px; }
.oh-row { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 28px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.section-head + .oh-row { border-top: 0; }
.oh-row-words h3 { font-size: 1.45rem; line-height: 1.25; margin: 14px 0 10px; letter-spacing: -.01em; }
.owner-home .oh-row-words p { color: var(--text); font-size: 1.1rem; line-height: 1.65; margin: 0; max-width: 40ch; }
.owner-home .oh-panel { margin: 0; min-width: 0; }
.oh-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.oh-panel-head h4 { margin: 0; flex: 1 1 11em; font-size: 1.15rem; line-height: 1.35; color: var(--text); }
.oh-panel-head .pill { flex: 0 0 auto; }
.oh-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: 0 0 auto; }
.oh-tags .oh-tag { margin: 0; }
.oh-pill-rec { color: var(--text-2); border-color: var(--line-strong); background: var(--surface-2); }
.oh-pill-rec::before { background: var(--approved); box-shadow: none; }
.owner-home .oh-panel-sub { margin: .35rem 0 0; color: var(--text-2); font-size: 1rem; }
.owner-home .oh-panel-foot { margin: 14px 0 0; font-size: 1rem; color: var(--text-2); }
/* round 18: every demo panel carries .demo-panel, so it reads the same on another page (the upgrade page) that is not
   main.owner-home: the page-wide type and each .owner-home rule a panel needs, said again under the panel's own class */
.demo-panel { font-size: 1.0625rem; line-height: 1.65; margin: 0; min-width: 0; }
.demo-panel p, .demo-panel li { font-size: 1.0625rem; }
.demo-panel .oh-panel-sub { margin: .35rem 0 0; color: var(--text-2); font-size: 1rem; }
.demo-panel .oh-panel-foot { margin: 14px 0 0; font-size: 1rem; color: var(--text-2); }
.demo-panel .oh-key { margin: 16px 0 0; gap: 6px 10px; font-size: .95rem; color: var(--text-2); }
.demo-panel .oh-chart-t { margin: 16px 0 0; font-weight: 650; color: var(--text); font-size: 1rem; }
.demo-panel .oh-feed .pill { font-size: .72rem; }
.demo-panel .oh-feed-foot { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--text-2); font-size: 1rem; }
@media (max-width: 759px) { .demo-panel.card { padding: 20px 18px; } }

/* income: three tiles, the key, the chart */
.oh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; }
.oh-tile { padding: 12px 12px 10px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oh-tile-n { font: 700 1.3rem/1.2 var(--font); letter-spacing: -.01em; color: var(--text); }
.oh-tile-l { font-size: .85rem; line-height: 1.3; color: var(--text-2); }
.owner-home .oh-key { margin: 16px 0 0; gap: 6px 10px; font-size: .95rem; color: var(--text-2); }
.oh-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; }
.oh-sw + .oh-sw, .oh-key .oh-sw-fut { margin-left: 8px; }
.oh-sw-past { background: var(--chart-bar); }
.oh-sw-fut { background: repeating-linear-gradient(45deg, var(--chart-bar) 0 2px, rgba(var(--accent-rgb), .3) 2px 5px);
  box-shadow: inset 0 0 0 1px var(--chart-bar); }
.oh-inc-chart { margin-top: 8px; }
.oh-ibar { transition: filter .15s ease, opacity .15s ease; }
.oh-ibar-past { fill: var(--chart-bar); }
.oh-ibar-fut { stroke: var(--chart-bar); stroke-width: 1; }
.oh-ibar:hover { filter: brightness(1.2); }
.oh-hatch-bg { fill: var(--chart-bar); fill-opacity: .32; }
.oh-hatch-ln { fill: var(--chart-bar); }
.oh-table td + td + td { color: var(--text-2); }

/* the well */
.oh-kv { width: 100%; margin: 12px 0 0; border-collapse: collapse; }
.oh-kv th, .oh-kv td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; vertical-align: top; }
.oh-kv th { color: var(--text-2); font-weight: 500; text-align: left; padding-right: 12px; width: 44%; }
.oh-kv td { color: var(--text); text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.owner-home .oh-chart-t { margin: 16px 0 0; font-weight: 650; color: var(--text); font-size: 1rem; }
.oh-well-chart { margin-top: 6px; }

/* activity: the newest filings */
.oh-feed { list-style: none; margin: 12px 0 0; padding: 0; }
.oh-feed li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.oh-feed time { font: 650 .95rem/1.6 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-feed-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.owner-home .oh-feed .pill { font-size: .72rem; }
.oh-feed-who { line-height: 1.45; }
.oh-feed-unit { font-weight: 650; color: var(--text); }
.oh-feed-op { color: var(--text-2); font-size: .95rem; white-space: nowrap; }
.oh-feed-op::before { content: "\00B7"; margin: 0 6px 0 2px; color: var(--muted); }
.owner-home .oh-feed-foot { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--text-2); font-size: 1rem; }
.oh-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.8s ease-in-out infinite; flex: 0 0 auto; }

/* documents kept: a picture of the product, nothing to type into */
.oh-fakesearch { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; min-height: 48px; padding: 0 14px;
  border-radius: var(--r); border: 2px solid var(--line-strong); background: var(--bg); color: var(--muted); font-size: 1rem; }
.oh-docs-list { list-style: none; margin: 10px 0 0; padding: 0; }
.oh-docs-list li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.oh-doc-ico { display: inline-flex; flex: 0 0 auto; width: 36px; height: 36px; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--accent-text); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .25); }
.oh-doc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oh-doc-t { font-weight: 650; color: var(--text); }
.oh-doc-red { font: 500 .92rem/1.5 var(--mono); color: var(--text-2); }
.oh-redact { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 2px; background: var(--accent-ink);
  color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--line-strong); user-select: none; }
.oh-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-2); font-size: .95rem; }
.oh-docs-list .oh-kind { margin: 0; vertical-align: 0; }
.oh-lockline { display: flex; align-items: center; gap: 8px; }
.oh-lockline .ico { color: var(--approved-text); flex: 0 0 auto; }

/* a document read for you */
.oh-reading { margin: 14px 0 0; display: grid; gap: 10px; }
.oh-reading div { padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-soft); }
.oh-reading dt { font-size: .85rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 4px; }
.oh-reading dd { margin: 0; color: var(--text); font-size: 1.0625rem; line-height: 1.55; }

@media (min-width: 900px) {
  .oh-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 40px 0; align-items: center; }
  /* the section head is the first div: the income row's words sit left, the next row's right, and so on */
  .oh-row:nth-of-type(odd) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .oh-row:nth-of-type(odd) .oh-row-words { order: 2; }
  .oh-row.oh-solo { grid-template-columns: 1fr; }
  .oh-row-words h3 { font-size: 1.7rem; }
}
@media (max-width: 759px) {
  .oh-mapx-sec .oh-mapx { margin-left: 0; margin-right: 0; }
  .oh-tile { padding: 10px 9px 8px; }
  .oh-tile-n { font-size: 1.05rem; }
  .oh-tile-l { font-size: .8rem; }
  .oh-row { padding: 24px 0; }
}

@media (min-width: 760px) {
  .landing h1 { font-size: 2.8rem; margin-top: 2.6rem; }
  .lp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .landing .lp-btn { width: 100%; }
  .lp-form .lp-btn { align-self: stretch; }
}