/* ==========================================================================
   Inbound and Organic page only (inbound-organic.html, _build/organic_page.py,
   behaviour in assets/organic.js). Loaded after signals.css and paid.css,
   which supply the shared hero card, icon tabs, panels, marquee, number
   fields and scope builder. Same outbound-style vocabulary throughout.
   ========================================================================== */

.og-stars { color: #E8A317; letter-spacing: 1px; }

/* ---- hero: one question, every place they ask -------------------------- */
.og-u { max-width: 360px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 34px -14px rgba(0, 0, 0, .22); overflow: hidden; }
.og-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px; padding: 9px 14px; border-radius: 100px; border: 1px solid #dfe1e5; font-size: 13px; }
.og-q i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #4d5156; position: relative; }
.og-q i::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: #4d5156; transform: rotate(45deg); }
.og-map { position: relative; height: 96px; margin: 0 12px; border-radius: 8px; background:
  linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 22px 22px,
  linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 22px 22px, #eef2f0; }
.og-map::before { content: ""; position: absolute; left: -10%; right: -10%; top: 46%; height: 10px; background: #fff; transform: rotate(-8deg); }
.og-pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: #9aa0a6; transform: rotate(-45deg); }
.og-pin--you { width: 20px; height: 20px; background: #E2520F; box-shadow: 0 2px 6px rgba(226, 82, 15, .45); }
.og-pack { list-style: none; margin: 8px 12px 0; padding: 0; }
.og-pack li { display: grid; gap: 1px; padding: 7px 8px; border-bottom: 1px solid #ebebeb; }
.og-pack li b { font-size: 13.5px; font-weight: 400; color: #1a0dab; }
.og-pack li span { font-size: 11.5px; color: #70757a; }
.og-pack li.is-you { border-radius: 6px; background: rgba(226, 82, 15, .08); }
.og-pack li.is-you b { font-weight: 700; }
.og-org { display: grid; gap: 2px; padding: 10px 20px 14px; }
.og-org small { font-size: 11.5px; color: #4d5156; }
.og-org b { font-size: 15px; font-weight: 400; color: #1a0dab; }

/* a generic assistant window, deliberately no particular product */
.og-chat__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #eee; font-size: 12px; font-weight: 700; color: #444; }
.og-chat__bar i { width: 18px; height: 18px; border-radius: 6px; background: conic-gradient(from 200deg, #2F5BD3, #8C95E8, #F2C230, #2F5BD3); }
.og-bubble { margin: 12px 14px 4px auto; max-width: 78%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: #f0f0f0; font-size: 13px; width: fit-content; }
.og-reply, .og-ans { padding: 6px 14px 14px; font-size: 13px; line-height: 1.5; }
.og-reply p, .og-ans p { margin: 6px 0; }
.og-reply ol, .og-ans ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.og-reply sup { color: #2F5BD3; font-size: 10px; margin-left: 2px; }
.og-u--engine { padding: 14px 16px; }
.og-engine__q { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.og-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.og-sources span { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: #f4f4f2; font-size: 10.5px; color: #555; }
.og-sources i { width: 16px; height: 16px; border-radius: 50%; background: #d8dbe0; }
.og-sources span:first-child i { background: conic-gradient(from 200deg, #E2520F, #F2C230, #7FB8F0, #2F5BD3, #E2520F); }
.og-engine__a { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.og-engine__a sup { padding: 0 4px; margin-left: 2px; border-radius: 3px; background: #eef1fb; color: #2F5BD3; font-size: 10px; }
.og-engine__more { margin: 0; padding-top: 10px; border-top: 1px solid #eee; font-size: 11.5px; color: #777; }
.og-u--reviews { padding: 16px 18px; }
.og-rv__head { display: flex; align-items: center; gap: 10px; }
.og-rv__head i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 700;
  background: conic-gradient(from 200deg, #E2520F, #F2C230, #7FB8F0, #2F5BD3, #E2520F); }
.og-rv__head span { display: grid; }
.og-rv__head small { font-size: 11.5px; color: #777; }
.og-rv__score { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; }
.og-rv__score strong { font-size: 36px; line-height: 1; }
.og-rv__score span { display: grid; font-size: 16px; }
.og-rv__score small { font-size: 11.5px; color: #777; }
.og-rv__bars { display: grid; gap: 4px; margin-bottom: 12px; }
.og-rv__bars span { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: center; font-size: 11px; color: #777; }
.og-rv__bars i { height: 6px; border-radius: 100px; background: linear-gradient(90deg, #E8A317 var(--w), #eee var(--w)); }
.og-u--reviews blockquote { margin: 0; padding: 10px 12px; border-radius: 8px; background: #f7f6f2; font-size: 13px; }
.og-u--reviews cite { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: #777; }

/* ---- a pill toggle (the before/after switch) ---------------------------- */
.pd-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 100px; border: 1px solid var(--line); background: rgba(var(--ov), .02); }
.pd-seg button { padding: 9px 16px; border: 0; border-radius: 100px; background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; transition: background var(--fast), color var(--fast); }
.pd-seg button:hover { background: rgba(var(--ov), .05); color: var(--text); }
.pd-seg button.is-on { background: var(--green-fill); color: #fff; }

/* ---- why the AI picked them ---------------------------------------------- */
.og-answer { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.og-answer__left { display: grid; gap: 14px; }
.og-seg { justify-self: start; }
.og-win { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: #202124; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .2); }
.og-ans { font-size: 14.5px; }
.og-ans li { padding: 2px 0; }
.og-ans li.is-you { padding: 8px 10px; margin-left: -10px; border-radius: 8px; background: rgba(226, 82, 15, .09); }
.og-ans__note { font-family: var(--font-mono); font-size: 11.5px; color: #777; }
.og-answer[data-state="before"] [data-ans="after"], .og-answer[data-state="after"] [data-ans="before"] { display: none; }
html:not(.sg-js) .og-answer [data-ans] { display: block !important; }
.og-ans[data-ans="before"] .og-ans__note { color: #B4400A; }
.og-ref {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 3px; padding: 0; border: 1px solid rgba(47, 91, 211, .35); border-radius: 5px;
  background: #eef1fb; color: #2F5BD3; font: 700 11px/1 Arial, sans-serif; cursor: pointer; vertical-align: 1px; transition: background var(--fast), color var(--fast);
}
.og-ref.is-hot, .og-ref:hover { background: #2F5BD3; color: #fff; }
.og-answer__fine { margin: 0; font-size: 11px; line-height: 1.6; }
.og-cites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.og-cite {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 13px 14px; border-radius: var(--r-md); border: 1px solid transparent;
  background: rgba(var(--ov), .025); outline: none; transition: background var(--fast), border-color var(--fast), transform var(--fast) var(--ease), opacity var(--mid);
}
.og-cite__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.og-cite b { font-size: 15px; font-weight: 500; }
.og-cite p { margin: 4px 0 0; font-size: 13.8px; line-height: 1.55; color: var(--text-2); }
.og-cite.is-hot { border-color: rgba(226, 82, 15, .55); background: rgba(226, 82, 15, .10); transform: translateX(3px); }
.og-cite.is-hot .og-cite__n { background: #2F5BD3; border-color: transparent; color: #fff; }
.og-answer[data-state="before"] .og-cite { opacity: .45; }
.og-answer.is-focused .og-cite:not(.is-hot) { opacity: .45; }

/* ---- two speeds ------------------------------------------------------------
   The explanation lives inside the chart: numbered pins on the curve, the
   chosen stage's stretch shaded behind, and a card in the empty headroom
   above the early, low part of the curve. */
.og-tl.sg-climb { display: block; }
.og-tl__stage { position: relative; }
.og-tl__fig { position: relative; width: 100%; }
.og-tl__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--font-mono); }
.og-tl__fast { fill: url(#ogFast); }
.og-tl__contours { fill: none; stroke: url(#ogLine); stroke-width: .9; opacity: .55; }
.og-tl__fastline { fill: none; stroke: #E2520F; stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }
.og-tl__total { fill: none; stroke: url(#ogLine); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.og-tl__tag { font-size: 11px; letter-spacing: .1em; fill: #B4400A; }
.og-tl__tag--slow { fill: var(--cobalt); }
.og-tl__axis path { fill: none; stroke: var(--text-3); stroke-width: 1; }
.og-tl__axis text { fill: var(--text-3); font-size: 12px; letter-spacing: .08em; }
.og-tl__head path { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.og-tl__hit { fill: transparent; cursor: ew-resize; touch-action: pan-y; }
.og-span { transition: x .5s var(--ease), width .5s var(--ease), fill var(--mid); }
.og-span--fast { fill: url(#ogSpanFast); }
.og-span--slow { fill: url(#ogSpanSlow); }
.og-stop { cursor: pointer; outline: none; }
.og-stop circle { fill: var(--ink); stroke: var(--text-3); stroke-width: 1.5; transition: fill var(--mid), stroke var(--mid), r var(--mid) var(--ease); }
.og-stop text { fill: var(--text-3); font-size: 12px; font-weight: 600; pointer-events: none; transition: fill var(--mid); }
.og-stop.is-live circle { stroke: var(--text); }
.og-stop.is-live text { fill: var(--text); }
.og-stop:hover circle, .og-stop:focus-visible circle { stroke: var(--orange); stroke-width: 2.5; }
.og-stop.is-on circle { r: 18; fill: var(--orange); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 8px rgba(226, 82, 15, .4)); }
.og-stop--slow.is-on circle { fill: var(--cobalt); filter: drop-shadow(0 3px 8px rgba(47, 91, 211, .4)); }
.og-stop.is-on text { fill: #fff; font-size: 14px; }

/* the stage card, sitting inside the chart's headroom on the left */
.og-card {
  position: absolute; left: 8%; top: 1.5%; width: min(36%, 400px); display: grid; gap: 10px; padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(360px 160px at 0% 0%, rgba(226, 82, 15, .14), transparent 70%), rgba(var(--surface-rgb), .92);
  backdrop-filter: blur(6px); box-shadow: 0 18px 40px -26px rgba(20, 20, 20, .35);
}
.og-card__n { margin: 0; font-size: 12px; color: var(--text-3); }
.og-card__n b { color: var(--orange); font-weight: 500; }
.og-card__step { display: grid; gap: 4px; }
.og-card__step .sg-k { margin: 0; }
.og-card__lane { justify-self: start; padding: 3px 10px; border-radius: 100px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.og-card__lane--fast { border: 1px solid rgba(226, 82, 15, .45); color: var(--orange); }
.og-card__lane--slow { border: 1px solid rgba(47, 91, 211, .4); color: var(--cobalt); }
.og-card__step h3 { margin: 2px 0 2px; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.og-card__step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.sg-js .og-card__step:not([hidden]) { animation: sg-fade 380ms var(--ease); }
html:not(.sg-js) .og-card__step { display: grid !important; margin-bottom: 10px; }
html:not(.sg-js) .og-card__nav, html:not(.sg-js) .og-card__hint, html:not(.sg-js) .og-card__n { display: none; }
.og-card__nav { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 4px; }
.og-card__nav .sg-climb__arrow { width: 36px; height: 36px; font-size: 14px; }
.og-card__hint { margin: 0; font-size: 11px; }

@media (max-width: 900px) {
  .og-answer { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* not enough headroom in the chart: the card moves under it */
  .og-card { position: static; width: auto; margin-top: 16px; }
}
@media (max-width: 640px) {
  .og-tl__fig { width: 720px; }
  .og-sources span { font-size: 9.5px; }
}