/* Ownership graph — the "where you should be" chart shared by the four level pages.
   One graph, four states: the shape, axis and both bands are identical on every page.
   What changes is the identity colour, how far the curve is drawn, and the You-are-here
   flag. Markup is a single <section class="og og--growth" data-level="2">; js/ownership-graph.js
   builds the rest. */

.service-page>.service-ownership{
  padding:112px var(--gutter)!important;
  background:var(--cloud)!important;
  color:var(--ink);
}

.og{
  --accent:var(--mist);
  --accent-ink:var(--ink);

  /* the chart is a dark readout panel on every page: signal yellow and mist are
     unreadable as data on the cloud surface, and the near-black stage already exists
     in the footer, so the chart reads as one instrument across all four levels */
  --og-surface:#19171c;
  --og-surface-lift:#221f27;
  --og-grid:#2e2a35;
  --og-text-primary:#f3f3f5;
  --og-text-secondary:#b3aec0;
  --og-text-muted:#7d7789;
  --og-series-paid:#6b6675;

  /* narrower than --max (1344px) on purpose: the SVG keeps a 760x400 ratio, so a
     full-width panel would stand up over 650px tall and swamp the section */
  width:min(100%,1120px);
  margin-inline:auto;
}

.og-panel{
  background:var(--og-surface);
  color:var(--og-text-primary);
  border-radius:16px;
  padding:44px clamp(20px,4vw,52px) 38px;
  position:relative;
  overflow:hidden;
}
.og-panel::before{ /* the level identity as a solid edge, per DESIGN.md */
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--accent);
}

.og-head{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:36px;
}
.og-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--og-text-muted);
}
.og-eyebrow b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
}
.og-title{
  margin:12px 0 0;
  font-family:"Switzer",Avenir Next,sans-serif;
  font-size:clamp(26px,2.8vw,38px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.025em;
  max-width:20ch;
  text-wrap:balance;
}

.og-legend{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:4px}
.og-key{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:500;
  color:var(--og-text-secondary);
  white-space:nowrap;
}
.og-key i{display:block;width:14px;height:14px;border-radius:4px;flex:none}
.og-key--paid i{background:var(--og-series-paid)}
.og-key--kept i{background:var(--accent)}

/* ---------- chart ---------- */
.og-figure{margin:0;position:relative}
.og-svg{display:block;width:100%;height:auto;overflow:visible}

.og-grid line{stroke:var(--og-grid);stroke-width:1;shape-rendering:crispEdges}
.og-axis-y text{fill:var(--og-text-muted);font-size:12px;font-weight:500}
.og-axis-x text{font-size:12.5px;font-weight:600;fill:var(--og-text-muted)}
.og-axis-x text.is-here{fill:var(--og-text-primary)}
.og-axis-x .og-stage-sub{font-size:11px;font-weight:500;fill:var(--og-text-muted)}

/* the rented band is a wash carried by its hatch, never a saturated block —
   the accent band is the only thing allowed to be loud */
.og-band-paid{fill:var(--og-series-paid);opacity:.26}
.og-line-paid{fill:none;stroke:var(--og-series-paid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.og-band-kept{fill:var(--accent)}
.og-line-kept{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.og-ahead{fill:none;stroke:var(--og-text-muted);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 7}

.og-marker circle{stroke:var(--og-surface);stroke-width:2}
.og-marker line{stroke:var(--accent);stroke-width:1;opacity:.45}

.og-flag rect{fill:var(--accent)}
.og-flag text{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  fill:var(--accent-ink);
}

/* ---------- panel footer ---------- */
.og-foot{
  display:flex;
  flex-wrap:wrap;
  gap:18px 32px;
  align-items:baseline;
  justify-content:space-between;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--og-grid);
}
.og-read{margin:0;font-size:16px;line-height:1.5;color:var(--og-text-secondary);max-width:52ch;text-wrap:pretty}
.og-read b{color:var(--og-text-primary);font-weight:600}
.og-disclaimer{margin:0;font-size:12px;line-height:1.5;color:var(--og-text-muted);max-width:34ch}

.og-tablelink{
  appearance:none;
  border:1px solid var(--og-grid);
  background:transparent;
  color:var(--og-text-secondary);
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
}
.og-tablelink:hover,
.og-tablelink:focus-visible{border-color:var(--accent);color:var(--og-text-primary)}
.og-tablelink:focus-visible{outline:2px solid var(--signal-blue);outline-offset:2px}

.og-table{
  margin-top:24px;
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  font-variant-numeric:tabular-nums;
}
.og-table[hidden]{display:none}
.og-table th,
.og-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--og-grid);color:var(--og-text-secondary)}
.og-table th{
  color:var(--og-text-muted);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.og-table caption{text-align:left;padding:0 0 10px;color:var(--og-text-muted);font-size:12px}
.og-table tr[data-here] td{color:var(--og-text-primary);font-weight:600}

/* ---------- tooltip ---------- */
.og-tip{
  position:absolute;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-118%);
  background:var(--og-surface-lift);
  border:1px solid var(--og-grid);
  border-radius:10px;
  padding:10px 12px;
  min-width:176px;
  transition:opacity .12s linear;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.og-tip[data-on]{opacity:1}
.og-tip strong{display:block;font-size:13px;font-weight:600;color:var(--og-text-primary);margin-bottom:7px}
.og-tip span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--og-text-secondary);line-height:1.7}
.og-tip span i{width:9px;height:9px;border-radius:3px;flex:none}

/* ---------- the four level identities ---------- */
.og--entry{--accent:#f2f1f3;--accent-ink:#19171c}
.og--growth{--accent:var(--signal-blue);--accent-ink:#06202b}
.og--scale{--accent:#7c3aed;--accent-ink:#f3f3f5}
.og--elite{--accent:var(--signal-yellow);--accent-ink:#19171c}

@media (max-width:720px){
  .service-page>.service-ownership{padding:78px 20px!important}
  .og-panel{padding:32px 18px 30px}
  .og-head{align-items:flex-start}
  .og-foot{flex-direction:column}

  /* the SVG scales to ~45% on a phone, which would render 12px axis type at 5px.
     Sizes are in user units, so scale them back up and drop the second label line.
     js/ownership-graph.js widens the gutters to match. */
  .og-axis-y text{font-size:25px}
  .og-axis-x text{font-size:27px}
  .og-axis-x .og-stage-sub,
  .og-axis-y text.og-axis-title{display:none}
  .og-flag text{font-size:23px}
  .og-flag rect{x:-112px;y:-30px;width:224px;height:52px;rx:16px}
  .og-marker circle{r:11px;stroke-width:4px}
  .og-line-kept,
  .og-line-paid{stroke-width:4}
  .og-ahead{stroke-width:4;stroke-dasharray:4 14}
}

@media (prefers-reduced-motion:reduce){
  .og-tip{transition:none}
}