/* Tone 27 brand guidelines (Figma: Tone 27 - Brand Guidelines, 3.1 to 4.3). Light screens are mostly
     cream with deep teal, white and sage; dark ones mostly deep teal with cream, pistachio and emerald. */
  :root {
    --ink: #082F2E; --ink-line: #1D4644; --ink-2: #0F3A38;
    --cream: #F5EFDF; --sage: #DCDCCD; --white: #FFFFFF;
    --dgreen: #082F2E; --green: #378C6A;
    --mint: #CFE6D5; --pistachio: #D6EE9A; --buttercup: #F2D97A; --blue: #A9C9E4; --pink: #F5C7CF; --coral: #E26B52;
    --line: #DCDCCD; --muted: #55625F; --body: #082F2E;
    /* Text on deep teal: cream, and cream softened for the quieter lines. */
    --on-ink: rgba(245, 239, 223, .84); --on-ink-2: rgba(245, 239, 223, .62);
    --ok: #2B7357; --ok-bg: #CFE6D5; --warn: #8A6A0E; --warn-bg: #F7E9B5; --bad: #B3462F; --bad-bg: #F9D9D0;
    /* One colour per brand, used everywhere the four are compared. The prospect is always deep teal. */
    --b1: #082F2E; --b2: #378C6A; --b3: #E26B52; --b4: #A9C9E4;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--cream); font-family: "Inter", system-ui, sans-serif; color: var(--body); -webkit-font-smoothing: antialiased; }
  em, .serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
    .screen { width: 100%; min-height: 100vh; margin: 0; background: var(--cream); position: relative; overflow: hidden; display: flex; flex-direction: column; }
  .screen.fixed { min-height: 100vh; }
  button { font: inherit; cursor: pointer; border: none; }

  /* Public top bar */
  .top { height: 72px; flex: 0 0 72px; display: flex; align-items: center; padding: 0 56px; gap: 28px; position: relative; z-index: 3; }
  /* The wordmark keeps its shape and takes the brand colours (Adam, 2026-10-27). */
  .brand { font-weight: 800; font-size: 24px; letter-spacing: -0.04em; display: flex; align-items: baseline; gap: 5px; color: var(--dgreen); }
  .brand em { color: var(--green); font-size: 27px; letter-spacing: -0.01em; }
  /* On dark pages the header is see-through and the hero runs up behind it, so the brand shapes
     there aren't cut off by a header edge (Adam, 2026-10-27). */
  .top.dark { background: transparent; margin-bottom: -72px; }
  .top.dark .brand { color: var(--cream); } .top.dark .brand em { color: var(--pistachio); }
  .top .spacer { flex: 1; }
  .tlink { color: var(--dgreen); font-size: 14.5px; font-weight: 600; }
  .top.dark .tlink { color: var(--cream); }
  .steps { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--muted); }
  .steps .st { display: flex; align-items: center; gap: 8px; }
  .steps .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--white); border: 1.5px solid var(--line); color: var(--muted); }
  .steps .st.done .n { background: var(--green); border-color: var(--green); color: #fff; }
  .steps .st.on { color: var(--dgreen); } .steps .st.on .n { background: var(--ink); border-color: var(--ink); color: #fff; }
  .steps .bar { width: 28px; height: 1.5px; background: var(--line); }

  /* Type */
  /* Headlines pair Inter Bold with Instrument Serif set a touch larger, leading matching the Inter size. */
  .kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
  h1 { font-weight: 700; letter-spacing: -0.045em; line-height: 1; margin: 0; color: var(--dgreen); font-size: 76px; }
  h2 { font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0; color: var(--dgreen); font-size: 44px; }
  h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 0; color: var(--dgreen); font-size: 24px; }
  h1 em, h2 em, h3 em { color: inherit; font-size: 1.06em; letter-spacing: -0.02em; }
  .lead { color: var(--muted); font-size: 19px; line-height: 1.5; margin: 18px 0 0; }
  .sub { color: var(--muted); font-size: 15.5px; line-height: 1.5; margin: 8px 0 0; }
  .muted { color: var(--muted); }
  .small { font-size: 13px; }

  /* Bits */
  .card { background: var(--white); border-radius: 24px; }
  .hair { height: 1px; background: var(--line); }
  .btn { text-decoration: none; border-radius: 999px; padding: 15px 26px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .btn.green, .btn.ink { background: var(--ink); color: var(--cream); }
  .btn.peach { background: var(--pistachio); color: var(--ink); }
  .btn.ghost { background: transparent; color: var(--dgreen); border: 1.5px solid var(--line); }
  .btn.sm { padding: 9px 17px; font-size: 14px; }
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .pill.quiet { background: var(--white); color: var(--muted); border: 1px solid var(--line); }
  .pill.ok { background: var(--ok-bg); color: var(--ok); }
  .pill.warn { background: var(--warn-bg); color: var(--warn); }
  .pill.bad { background: var(--bad-bg); color: var(--bad); }
  .pill.ink { background: var(--ink); color: var(--pistachio); }
  .field { background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 14px 18px; font-size: 16px; color: var(--dgreen); display: flex; align-items: center; gap: 10px; }
  .field label { display: block; }
  .flabel { font-size: 13px; font-weight: 700; color: var(--green); margin: 0 0 8px; display: flex; justify-content: space-between; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; background: var(--cream); color: var(--dgreen); font-size: 14px; font-weight: 600; }
  .chip .x { opacity: .45; font-weight: 700; }
  .swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
  .logo-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: 0 0 auto; }
  .blob { position: absolute; border-radius: 50%; z-index: 0; }
  .blob.shape { border-radius: 0; height: auto; pointer-events: none; }
  svg.i { width: 18px; height: 18px; flex: 0 0 auto; }
  .lock { position: relative; }
  .lock .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,243,228,0) 0%, rgba(248,243,228,.92) 45%); border-radius: 24px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px; }
  .blur { filter: blur(5px); user-select: none; }

  /* Report */
  .rwrap { padding: 0 96px; }
  .sec { padding: 72px 0 0; }
  .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 28px; }
  .note { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .tbl th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--green); padding: 0 14px 12px; }
  .tbl td { padding: 14px; border-top: 1px solid var(--line); vertical-align: middle; }
  .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .barrow { display: flex; align-items: center; gap: 12px; }
  .bar-bg { flex: 1; height: 10px; border-radius: 5px; background: var(--cream); }
  .bar-fg { height: 10px; border-radius: 5px; }
  .opp { border-radius: 24px; padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; }
  .opp .num { font-family: "Instrument Serif"; font-style: italic; font-size: 54px; line-height: .8; color: var(--green); }
  .ad { border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
  .ad .pic { height: 150px; position: relative; display: flex; align-items: flex-end; padding: 14px; }
  .ad .pic .h { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-size: 18px; position: relative; z-index: 2; }
  .ad .meta { padding: 12px 14px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
  .grid-dot { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
  .grid-dot.yes { background: var(--green); color: #fff; }
  .grid-dot.no { background: var(--cream); color: var(--muted); }
  .grid-dot.na { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }

  /* App additions (not in the static designs) */
  .rwrap { max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box; }
  .tlink { text-decoration: none; }
  a { color: inherit; }
  input, textarea, select { font: inherit; color: var(--dgreen); }
  .field input, .field select { border: 0; outline: 0; background: transparent; width: 100%; font-size: inherit; color: var(--dgreen); }
  .field:focus-within { border-color: var(--green); }
  .chip button { background: none; padding: 0; color: var(--muted); font-weight: 700; }
  .pill.sel { background: var(--ink); color: #fff; border: 1px solid var(--ink); padding: 9px 15px; font-size: 14px; cursor: pointer; }
  .pill.opt { padding: 9px 15px; font-size: 14px; cursor: pointer; }
  .btn[disabled] { opacity: .55; cursor: default; }
  .err { color: var(--bad); font-size: 14px; font-weight: 600; margin-top: 10px; min-height: 20px; }
  .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pistachio); border-top-color: var(--ink); animation: sp 0.9s linear infinite; display: inline-block; }
  @keyframes sp { to { transform: rotate(360deg); } }
  .grid-dot.run { background: var(--pistachio); color: var(--ink); }
  .grid-dot.unk { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
  .ad .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ad .pic .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
  .footer-note { padding: 28px 96px 60px; }
  .alt-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--cream); cursor:pointer; }
  .alt-row:hover { outline: 1.5px solid var(--green); }
  .hide { display: none !important; }
  @media screen and (max-width: 960px) {
    .top { padding: 0 20px; gap: 14px; height: auto; min-height: 64px; flex-wrap: wrap; }
    .top.dark { height: 64px; flex-basis: 64px; margin-bottom: -64px; }
    .top .tlink { display: none; }
    .steps .bar, .steps .st:not(.on) span:not(.n) { display: none; }
    h1 { font-size: 46px; } h2 { font-size: 34px !important; }
    .rwrap { padding: 0 20px; } .footer-note { padding: 24px 20px 48px; }
    .stack-m { grid-template-columns: 1fr !important; display: grid !important; }
    .pad-m { padding-left: 20px !important; padding-right: 20px !important; }
    .tbl { font-size: 13px; } .tbl td, .tbl th { padding: 10px 8px; }
    .scroll-x { overflow-x: auto; }
    .blob { display: none; }
    .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  }

  /* Native ad containers: drawn to look like each platform's own ad unit (layout only, no platform logos). */
  .nat { font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: rgba(0,0,0,.9); }
  .li-ad { background:#fff; border-radius:8px; box-shadow: 0 0 0 1px rgba(140,140,140,.2), 0 2px 6px rgba(8,47,46,.06); overflow:hidden; display:flex; flex-direction:column; }
  .li-ad .hd { display:flex; gap:8px; padding:12px 12px 0; align-items:flex-start; }
  .li-ad .hd img.logo { width:48px; height:48px; border-radius:4px; object-fit:cover; flex:0 0 auto; }
  .li-ad .nm { font-size:14px; font-weight:600; line-height:1.3; }
  .li-ad .sub { font-size:12px; color:rgba(0,0,0,.6); line-height:1.35; }
  .li-ad .fol { margin-left:auto; color:#0a66c2; font-size:14px; font-weight:600; white-space:nowrap; padding-top:2px; }
  .li-ad .tx { font-size:13.5px; line-height:1.45; padding:8px 12px 10px; }
  .li-ad .tx span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .li-ad .tx .more { color:rgba(0,0,0,.6); }
  .li-ad .media { position:relative; aspect-ratio: 1.91 / 1; background:#e9e5df; }
  .li-ad .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .li-ad .media .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; }
  .li-ad .bar { background:#eef3f8; display:flex; gap:10px; align-items:center; padding:10px 12px; }
  .li-ad .bar .h { font-size:13.5px; font-weight:600; line-height:1.3; flex:1; }
  .li-ad .bar .cta { border:1px solid #0a66c2; color:#0a66c2; border-radius:99px; padding:5px 14px; font-size:13.5px; font-weight:600; white-space:nowrap; }
  .li-ad .soc { display:flex; justify-content:space-around; padding:6px 4px 8px; border-top:1px solid #e8e8e8; margin-top:0; font-size:12.5px; font-weight:600; color:rgba(0,0,0,.6); }
  .ad-col { display:flex; flex-direction:column; }
  .ad-col .ad-stat { margin:0 0 10px; }
  .ad-stat { margin-top:10px; background:var(--ink); color:#fff; border-radius:14px; border:2px solid transparent; padding:12px 16px; display:flex; align-items:center; gap:12px; }
  .ad-stat .l b { display:block; color:#fff; font-weight:700; font-size:13px; }
  .ad-stat.mine .l b { color:var(--dgreen); }
  .ad-stat .d { font-family: Inter; font-size:30px; font-weight:700; letter-spacing:-0.04em; color:var(--pistachio); }
  .ad-stat .l { font-family: Inter; font-size:13px; color:var(--on-ink); font-weight:600; }
  .ad-stat.mine { background:var(--white); color:var(--dgreen); border:2px dashed var(--line); }
  .ad-stat.mine .d { color:var(--muted); } .ad-stat.mine .l { color:var(--muted); }
  .fb-ad { background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); overflow:hidden; }
  .fb-ad .hd { display:flex; gap:8px; padding:12px 12px 8px; align-items:center; }
  .fb-ad .av { width:40px; height:40px; border-radius:50%; flex:0 0 auto; }
  .fb-ad .nm { font-size:15px; font-weight:600; color:#050505; } .fb-ad .sub { font-size:13px; color:#65676b; }
  .fb-ad .tx { font-size:15px; line-height:1.33; padding:0 12px 10px; color:#050505; }
  .fb-ad .media { aspect-ratio:1/1; position:relative; }
  .fb-ad .bar { background:#f0f2f5; display:flex; align-items:center; gap:10px; padding:10px 12px; }
  .fb-ad .bar .u { font-size:12px; color:#65676b; text-transform:uppercase; } .fb-ad .bar .h { font-size:15px; font-weight:600; color:#050505; }
  .fb-ad .bar .cta { margin-left:auto; background:#e4e6eb; color:#050505; border-radius:6px; padding:8px 14px; font-size:15px; font-weight:600; white-space:nowrap; }
  .fb-ad .soc { display:flex; justify-content:space-around; padding:8px; border-top:1px solid #ced0d4; margin:0 12px; font-size:14px; font-weight:600; color:#65676b; }
  .g-ad { background:#fff; border-radius:12px; padding:18px 20px; box-shadow:0 1px 3px rgba(0,0,0,.12); font-family: Arial, sans-serif; }
  .g-ad .sp { font-size:14px; font-weight:700; color:#202124; margin-bottom:10px; }
  .g-ad .site { display:flex; align-items:center; gap:10px; }
  .g-ad .fav { width:28px; height:28px; border-radius:50%; background:#f1f3f4; border:1px solid #dadce0; display:grid; place-items:center; overflow:hidden; }
  .g-ad .fav img { width:28px; height:28px; object-fit:cover; }
  .g-ad .sn { font-size:14px; color:#202124; } .g-ad .su { font-size:12px; color:#4d5156; }
  .g-ad .t { font-size:20px; color:#1a0dab; line-height:1.3; margin:8px 0 4px; }
  .g-ad .d { font-size:14px; color:#4d5156; line-height:1.58; }

  .vol-row { display:grid; grid-template-columns:118px 1fr 58px; align-items:center; gap:12px; }
  .vol-row .bg { height:16px; border-radius:6px; background:var(--cream); } .vol-row.you .bg { height:22px; }
  .vol-row .fg { height:100%; border-radius:6px; }
  .feat { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; align-items:start; }
  .g-img { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.15); overflow:hidden; }
  .g-img .media { aspect-ratio: 1.91 / 1; position:relative; background:#f1f3f4; } .g-img .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .g-img .cap { padding:10px 12px; font-size:12px; color:#4d5156; display:flex; gap:8px; align-items:center; } .g-img .cap b { color:#202124; }
  @media screen and (max-width: 960px) { .feat { grid-template-columns: 1fr 1fr; } .vol-row { grid-template-columns: 96px 1fr 40px; } }

  /* Real ad images are big: keep every column to its share of the grid. */
  .feat > .ad-col { min-width: 0; }
  .ad-col .nat { max-width: 100%; }
  .fb-ad .media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background:#f0f2f5; }
  .fb-ad .media img, .g-img .media img, .li-ad .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .fb-ad .av { object-fit: cover; }
  .fb-ad .tx span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* Show each asset at its own shape, as the platforms do: no fixed frame, no cropping. */
  .li-ad .media, .fb-ad .media, .g-img .media { aspect-ratio: auto; height: auto; min-height: 0; }
  .li-ad .media img, .fb-ad .media img, .g-img .media img { position: static; display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; background: #f3f2ef; }

  /* Platform mark, top right of each strip */
  .ad-stat { position: relative; --strip-bg: var(--ink); }
  .ad-stat.mine { --strip-bg: var(--white); }
  .ad-stat .pf { position: absolute; top: 9px; right: 10px; width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; line-height: 0; box-shadow: 0 0 0 1px rgba(8,47,46,.08); }
  .ad-stat .pf img { max-width: 20px; max-height: 20px; display: block; }
  .ad-stat .l { padding-right: 38px; }

  /* Locked detail: a blurred stand-in with the gate stuck to the bottom of the screen while they scroll over it. */
  .detail-locked { position: relative; }
  .detail-locked .gate-sticky { position: sticky; bottom: 24px; z-index: 6; }
  .detail-locked .gate-sticky #unlockpos { margin-top: 24px; box-shadow: 0 -16px 60px rgba(4,47,46,.22), 0 24px 60px rgba(4,47,46,.28); }
  /* Edge to edge, like the real report, while its content stays lined up with the page (Adam, 2026-10-23). */
  /* It runs 24px past each edge so the blur's soft fringe falls off screen (.screen clips it). */
  .detail-preview { --bleed: calc(max(96px, calc(50vw - 624px)) + 24px); margin: 0 calc(50% - 50vw - 24px); padding: 0 var(--bleed); }
  /* The band stands on its own if someone strips .detail-preview in the browser, then goes edge to edge inside it. */
  .pv-band { margin-top: 40px; border-radius: 28px; padding: 48px 56px 56px; }
  .detail-preview .pv-band { margin: 40px calc(-1 * var(--bleed)) 0; border-radius: 0; padding: 56px var(--bleed) 60px; }
  @media screen and (max-width: 960px) { .detail-preview { --bleed: 44px; } }
  .detail-preview { filter: blur(12px); opacity: .55; pointer-events: none; user-select: none; -webkit-user-select: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 120px), transparent 100%); }
  @media screen and (max-width: 960px) { .detail-locked .gate-sticky { bottom: 8px; } }

  /* overflow:hidden on .screen made it a scroll container, which stops position:sticky; clip keeps the cropping without that. */
  .screen { overflow: clip; }

  /* Moving between steps: the new screen eases in (a cross-fade via view transitions where supported). */
  ::view-transition-old(root) { animation: cw-out .22s ease both; }
  ::view-transition-new(root) { animation: cw-in .38s cubic-bezier(.2,.7,.2,1) both; }
  .screen.enter { animation: cw-in .38s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes cw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes cw-out { to { opacity: 0; } }
  /* The live line under the spinning step. */
  .live { transition: opacity .18s ease; min-height: 1.4em; }
  .live.out { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), .screen.enter { animation: none; } .live { transition: none; } }

  /* Google ad images are Google's own renders: some are cropped hard at the right and flush left.
     A margin and a soft right edge make them sit like a search result (Adam, 2026-10-23). */
  .g-img .media { padding: 16px 0 12px 16px; background: #fff; overflow: hidden; }
  .g-img .media img { background: #fff; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }

  /* Full report examples: the snapshot's ad columns, three across so the real ads stay readable. */
  .feat.ex { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  @media screen and (max-width: 960px) { .feat.ex { grid-template-columns: 1fr; } }

  /* PDF export (api/pdf renders /r/:id?pdf=1 in headless Chrome): the same page, without the
     things you can't click on paper, and nothing split across a page break. */
  @page { size: 1440px 2036px; margin: 0; }
  html.pdf, html.pdf body { background: var(--cream); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.pdf .top .tlink, html.pdf .top .btn, html.pdf .no-pdf { display: none !important; }
  html.pdf .pdf-only { display: inline-flex !important; }
  html.pdf .card:not(:has(.feat)):not(:has(.tbl tr:nth-child(9))), html.pdf .opp, html.pdf .ad-col, html.pdf .sec-head, html.pdf tr, html.pdf .vol-card, html.pdf #book, html.pdf .gap-band { break-inside: avoid; }
  html.pdf .sec-head { break-after: avoid; }
  html.pdf .card { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  html.pdf .screen { min-height: 0; }
  .pdf-only { display: none; }

  /* Building the snapshot (Figma 14, plasma-loading.html): the prospect's icon in pulsing plasma,
     each find popping out of it and settling into a chip, what we're on as a caption underneath. */
  .screen.plasma-screen { background: var(--ink); color: var(--cream); height: 100vh; min-height: 640px; }
  .plasma-screen .top { position: absolute; inset: 0 0 auto 0; background: transparent; z-index: 5; }
  .plasma-screen .top .tlink { color: #fff; opacity: .85; }
  .pl-intro { position: absolute; left: 56px; top: 104px; z-index: 4; max-width: 600px; }
  .pl-intro .kicker { color: var(--pistachio); }
  .pl-intro h2 { margin: 12px 0 0; font-size: 46px; line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--cream); }
  .pl-intro h2 em { color: var(--pistachio); font-size: 50px; }
  .pl-map { position: absolute; inset: 0; }
  .pl-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .pl-lines line { stroke: var(--pistachio); stroke-opacity: .18; stroke-width: 1.5; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset .5s ease-out, stroke-opacity .6s; }
  .pl-lines line.on { stroke-dashoffset: 0; }
  .pl-lines line.hot { stroke-opacity: .55; }
  .pl-core { position: absolute; width: 0; height: 0; }
  .pl-plasma { position: absolute; width: 360px; height: 360px; left: -180px; top: -180px; border-radius: 50%; filter: blur(26px); animation: pl-pulse 2.6s ease-in-out infinite; }
  .pl-plasma i { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .85; }
  .pl-plasma i:nth-child(1) { width: 62%; height: 62%; left: 6%; top: 10%; background: var(--green); animation: pl-orbit1 7s ease-in-out infinite; }
  .pl-plasma i:nth-child(2) { width: 56%; height: 56%; right: 4%; top: 18%; background: var(--buttercup); animation: pl-orbit2 9s ease-in-out infinite; }
  .pl-plasma i:nth-child(3) { width: 52%; height: 52%; left: 22%; bottom: 2%; background: var(--blue); opacity: .7; animation: pl-orbit3 8s ease-in-out infinite; }
  .pl-plasma i:nth-child(4) { width: 40%; height: 40%; left: 30%; top: 30%; background: var(--mint); opacity: .75; animation: pl-orbit2 6s ease-in-out infinite reverse; }
  .pl-ring { position: absolute; width: 250px; height: 250px; left: -125px; top: -125px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(236,252,203,.55), transparent 35%, rgba(248,212,178,.5), transparent 70%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); animation: pl-spin 6s linear infinite; }
  .pl-burst { position: absolute; width: 150px; height: 150px; left: -75px; top: -75px; border-radius: 50%; border: 2px solid var(--pistachio); opacity: 0; }
  .pl-burst.go { animation: pl-burst .9s ease-out; }
  .pl-logo { position: absolute; width: 140px; height: 140px; left: -70px; top: -70px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 0 60px rgba(236,252,203,.35); }
  .pl-logo .mark { width: 76px; height: 76px; border-radius: 18px; background: var(--dgreen); color: var(--pistachio); display: grid; place-items: center; font-weight: 700; font-size: 40px; letter-spacing: -0.04em; }
  .pl-logo img { width: 76px; height: 76px; object-fit: contain; border-radius: 14px; }
  .pl-doing { position: absolute; left: 0; top: 150px; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--pistachio); background: rgba(4,47,46,.82); border: 1px solid var(--ink-line); padding: 8px 14px; border-radius: 999px; transition: opacity .25s; z-index: 4; }
  .pl-doing .dots::after { content: ""; animation: pl-dots 1.4s steps(4) infinite; }
  .pl-node { position: absolute; left: 0; top: 0; width: 270px; transform: translate(-50%, -50%) scale(.2); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.3, .4, 1), opacity .35s, width .5s; z-index: 3; }
  .pl-node .pl-card { background: var(--white); color: var(--dgreen); border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.28); transition: background .5s, color .5s, box-shadow .5s, padding .5s; }
  .pl-node .t { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; display: flex; align-items: center; gap: 8px; }
  .pl-node .n { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
  .pl-node .sub { margin-top: 4px; font-size: 13px; line-height: 1.4; color: #4f625c; transition: color .5s; }
  .pl-node ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
  .pl-node li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
  .pl-node li b { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; flex: none; }
  .pl-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--pistachio); color: var(--dgreen); }
  .pl-node.settled { z-index: 2; }
  .pl-node.settled .pl-card { background: var(--ink-2); color: var(--pistachio); box-shadow: inset 0 0 0 1px var(--ink-line); padding: 10px 13px; }
  .pl-node.settled .sub, .pl-node.settled li { color: var(--on-ink-2); }
  .pl-node.settled .t { font-size: 14px; }
  .pl-node.settled .n { font-size: 20px; }
  .pl-node.settled .pl-tag { background: var(--ink-line); color: var(--pistachio); }
  .pl-node.gone { opacity: 0 !important; }
  .pl-foot { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; flex-direction: column; align-items: center; z-index: 4; padding: 0 16px; }
  .pl-foot form, .pl-foot .done { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--ink-line); padding: 8px 8px 8px 22px; border-radius: 999px; }
  .pl-foot .done { padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--pistachio); }
  .pl-foot span { font-size: 14px; color: var(--on-ink-2); margin-right: 6px; }
  .pl-foot input { font: inherit; font-size: 14px; border: 0; border-radius: 999px; padding: 11px 16px; width: 240px; background: var(--white); color: var(--dgreen); outline: none; }
  .pl-foot button { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 11px 18px; background: var(--pistachio); color: var(--dgreen); }
  .pl-foot .err { color: var(--pink); font-size: 13px; margin-top: 8px; min-height: 0; }
  @keyframes pl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  @keyframes pl-spin { to { transform: rotate(360deg); } }
  @keyframes pl-orbit1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18%, 10%); } }
  @keyframes pl-orbit2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16%, 14%); } }
  @keyframes pl-orbit3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10%, -18%); } }
  @keyframes pl-burst { 0% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.1); } }
  @keyframes pl-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
  /* Phone: plasma up top, the newest find just under it, older ones stacked below. */
  @media screen and (max-width: 760px) {
    .plasma-screen .top { padding: 0 16px; }
    .pl-intro { left: 16px; right: 16px; top: 70px; }
    .pl-intro h2 { font-size: 34px !important; } .pl-intro h2 em { font-size: 38px; }
    .pl-plasma { width: 230px; height: 230px; left: -115px; top: -115px; }
    .pl-ring { width: 170px; height: 170px; left: -85px; top: -85px; }
    .pl-logo { width: 96px; height: 96px; left: -48px; top: -48px; }
    .pl-logo .mark, .pl-logo img { width: 54px; height: 54px; font-size: 28px; border-radius: 13px; }
    .pl-doing { top: 64px; font-size: 13px; white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
    .pl-lines { display: none; }
    .pl-node { width: calc(100vw - 32px); max-width: 420px; }
    .pl-foot form { flex-wrap: wrap; padding: 12px; width: 100%; max-width: 420px; border-radius: 24px; }
    .pl-foot span { width: 100%; margin: 0 0 2px; }
    .pl-foot input { flex: 1; width: auto; min-width: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pl-plasma, .pl-ring, .pl-plasma i { animation: none; }
    .pl-node { transition: opacity .3s; }
  }

  /* Commentary as short points, and the sources table at the bottom of the full report. */
  .pts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
  .pts li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--dgreen); }
  .pts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .tbl.src td { vertical-align: top; font-size: 14px; line-height: 1.5; }
  .tbl.src td:first-child { width: 220px; }
  .opp .pts { margin-top: 0; } .opp .pts li { font-size: 14.5px; } .opp .pts li::before { background: var(--dgreen); }