/* panels.css — the front page's framed product panels, the benchmark stat
 * row, the chart panel and the firms panel (T9 round 5, 2026-10-23; our own
 * look since round 6, 2026-10-24).
 * Namespace: hp- (panels) and hs- (stats); .hw-firms-box is the firms panel.
 * Loaded after world.css and before benchmark.css.
 *
 * THE LOOK (round 6, owner: "make the panels ours"). The idea stays (real
 * captures in frames, a title and one line, one connected grid); the
 * identity comes from our own artwork:
 *   tints     drawn from the autumn tree scene: deep rust, amber, moss and
 *             warm stone (light theme: their daylight equivalents)
 *   surface   a faint paper grain over every card, like the painted art
 *   frame     (round 7, 2026-10-24, owner: "I dont like the new border
 *             design") the seam lines and the mat round each capture are
 *             gone. Each card carries ONE hairline ring, an inset box
 *             shadow drawn over the card's own content (a 1 px rounded
 *             border bowties in headless shots), in the ink at 10%, like
 *             hebbia.com's framed product cards. 10 px corners, 16 px apart.
 *   width     (round 7, owner: "cover more x axis, like hebbia") the grid
 *             leaves the page container and runs almost edge to edge: a
 *             24 to 40 px margin at 1280 to 1440, a little more on big
 *             screens. The section title stays centred above it.
 * No glow, no accent stripes, no colour lines. Motion: transform and
 * opacity only. */

/* ── Tints ─────────────────────────────────────────────────────────────
   --hp-bg the card, --hp-ink its title, --hp-ink-2 its line. The values
   (both themes) live in home.css palette:tokens as --tone-*. */
.hp-tone-a{ --hp-bg:var(--tone-a); --hp-ink:var(--tone-a-ink); --hp-ink-2:var(--tone-a-ink-2); }  /* deep rust */
.hp-tone-b{ --hp-bg:var(--tone-b); --hp-ink:var(--tone-b-ink); --hp-ink-2:var(--tone-b-ink-2); }  /* amber */
.hp-tone-c{ --hp-bg:var(--tone-c); --hp-ink:var(--tone-c-ink); --hp-ink-2:var(--tone-c-ink-2); }  /* moss */
.hp-tone-d{ --hp-bg:var(--tone-d); --hp-ink:var(--tone-d-ink); --hp-ink-2:var(--tone-d-ink-2); }  /* warm stone */
.hp-tone-show, .hp-tone-chart, .hp-tone-firms{
  --hp-bg:var(--tone-plain); --hp-ink:var(--text-primary); --hp-ink-2:var(--text-muted); }

/* the shared measures, the side margin of the full width grid and the
   ring colour (the page ink at 10%, so it follows the theme) */
:root{ --hp-gap:16px; --hp-r:10px; --hp-pad:24px; --hp-edge:clamp(20px, 2.2vw, 56px);
  --hp-ring:color-mix(in srgb, var(--text-primary) 10%, transparent); }

/* one picture per theme; a display:none lazy image is never fetched */
.hp-img--light{ display:none; }
html[data-theme="light"] .hp-img--dark{ display:none; }
html[data-theme="light"] .hp-img--light{ display:block; }

/* ── Section ──────────────────────────────────────────────────────────── */
.hp-head, .hs-head{ text-align:center; margin:0 auto clamp(40px, 4.2vw, 96px); max-width:min(100%, 960px); }
.hp-head .cv-h2, .hs-head .cv-h2{ text-wrap:balance; }
/* the benchmark follows the product with ONE section gap, and the team
   follows it with one (they were two each: 240 px at 1440) */
.hs.cv-sec{ padding-top:0; padding-bottom:0; }
.hs.cv-sec[id]{ scroll-margin-top:calc(var(--cv-nav-h, 64px) + var(--cv-jump-gap)); }

/* Card heights follow the CONTAINER's width (cqw), not the window's, so the
   proportions hold where the container stops growing (1920 and up). */
.hp > .cv-wrap{ container-type:inline-size; max-width:none; padding:0 var(--hp-edge); }
.hp-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  /* five rows of pairs (T10 added Fundamentals and Corp events) at one height; the Workspaces card below takes its
     own height (an auto row), so it never spills past the grid */
  grid-template-rows:repeat(5, clamp(440px, 49.5cqw, 900px));
  grid-auto-rows:auto;
  gap:var(--hp-gap);
}
.hp-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  border-radius:var(--hp-r);
  background:var(--hp-bg);
  color:var(--hp-ink);
}
/* the one hairline ring, over the captures that run off the card's edges */
.hp-card::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hp-ring);
}
/* paper grain, from the painted art: a static noise tile, blended softly */
.hp-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay; opacity:0.16;
}
html[data-theme="light"] .hp-card::before{ opacity:0.22; }
.hp-card--wide{ grid-column:span 2; }
.hp-card--show{ grid-column:1 / -1; grid-row:span 1; }

.hp-txt{ position:relative; z-index:2; flex:none; padding:var(--hp-pad) var(--hp-pad) 0; max-width:34em; }
.hp-t{
  margin:0;
  font-family:var(--font-display); font-size:20px; font-weight:400;
  line-height:1.25; letter-spacing:-0.005em;
  color:var(--hp-ink);
}
.hp-p{
  margin:4px 0 0;
  font-size:15px; line-height:1.45; font-weight:400;
  color:var(--hp-ink-2);
  text-wrap:pretty;
}

/* ── The frames ───────────────────────────────────────────────────────
   The stage fills the card under the words (24 px below them, on the same
   24 px left line) and the frame inside it is wider and taller than the
   stage, so it runs off the card's right and bottom edges. A wide card
   shows the screen at 112% of the card width, a narrow one at 200%: its
   left part, or with .hp-shot--r its RIGHT part (the frame then ends 24 px
   inside the card's right edge and runs off the left and bottom). */
.hp-stage{ position:relative; z-index:1; flex:1 1 auto; min-height:0; margin:var(--hp-pad) 0 0 var(--hp-pad); }
.hp-shot{
  position:absolute; left:0; top:0; margin:0;
  width:calc((100% + var(--hp-pad)) * 1.12);
  aspect-ratio:1280 / 800;
  border-radius:6px 6px 0 0; overflow:hidden;
  background:var(--shot-bg);
  box-shadow:0 0 0 1px var(--hp-ring), 0 24px 48px -28px color-mix(in srgb, var(--shade) 55%, transparent);
}
html[data-theme="light"] .hp-shot{ box-shadow:0 0 0 1px var(--hp-ring), 0 24px 48px -30px color-mix(in srgb, var(--shade) 30%, transparent); }
.hp-card--narrow .hp-shot{ width:calc((100% + var(--hp-pad)) * 2); }
.hp-shot .hp-img{ width:100%; height:100%; object-fit:cover; object-position:left top; }
.hp-shot--r{ left:auto; right:var(--hp-pad); }
.hp-shot--r .hp-img{ object-position:right top; }
/* A narrow right crop (Analyst targets) used to start its window at 53% of
   the still (1280 wide), so the chart title read "rice and average target".
   Its frame is a touch smaller and its right inset scales with the card,
   so the window starts at 51.3% of the still at every desktop width (the
   title starts at 52.4%) and the frame still ends 24 px inside the card at
   1280: visible left = (1.93 - 1 + 0.06) / 1.93. The phone rule below keeps
   its own 1.7 width. */
.hp-card--narrow .hp-shot--r{ width:calc((100% + var(--hp-pad)) * 1.93); right:calc((100% + var(--hp-pad)) * 0.06); }

/* Two screens (Markets, Calendars): the second sits behind, to the right,
   a step dimmer, the first in front 48 px lower, so the pair reads as a
   stack of real windows. */
.hp-stage--pair .hp-shot--back{ left:56px; opacity:0.5; }
.hp-stage--pair .hp-shot--front{ top:48px; }

/* ── Sections with several tools (T10, 2026-10-24) ──────────────────────
   A panel is one app SECTION (Markets, Calendars, Screener, Fundamentals,
   Corp events); a small switch under its line names each tool as the app
   sidebar does. The chosen tool's screen comes to the front of the stack,
   the next one sits behind it as before, the rest are put away
   (display:none, so a screen is fetched only once the visitor reaches for
   the switch: panels.js "warms" the card on pointer or focus). The card's
   height is the grid row's, so a switch never moves the page. Active =
   a filled background in the card's ink; no underline, stripe or glow. */
.hp-stage--pair .hp-shot--front{ z-index:2; }
.hp-stage--pair .hp-shot--back{ z-index:1; }
.hp-shot--off{ display:none; }
.hp-stage.is-warm .hp-shot--off{ display:block; visibility:hidden; }
html.hw-js .hp-shot.is-in{ animation:hp-shot-in 420ms var(--ease-out) both; }
@keyframes hp-shot-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.hp-parts{ display:none; }
html.hw-js .hp-parts{ display:flex; flex-wrap:wrap; gap:4px; margin:14px 0 0 -8px; }
.hp-part{
  appearance:none; margin:0; border:0; cursor:pointer;
  font:inherit; font-size:13px; line-height:18px; font-weight:400; white-space:nowrap;
  padding:4px 8px; border-radius:6px;
  background:transparent; color:var(--hp-ink-2);
  transition:color var(--dur-fast) ease;
}
.hp-part:hover{ color:var(--hp-ink); background:color-mix(in srgb, var(--hp-ink) 6%, transparent); }
.hp-part.is-on{ color:var(--hp-ink); background:color-mix(in srgb, var(--hp-ink) 13%, transparent); }
.hp-part:focus-visible{ outline:2px solid var(--hp-ink); outline-offset:1px; }

/* Showpiece: the monitor on its desk (Workspaces), full width, the words
   top left and the monitor large on the right. The desk is feathered into
   the card (round 6, review: it read as a pasted rectangle): the picture
   is fully opaque down to the desk top (80% of its height); below, the
   desk fades out to the sides and to the bottom edge. */
.hp-card--show{ grid-row:auto; height:clamp(520px, 67cqw, 1280px); }
.hp-desk{
  position:absolute; right:3%; bottom:-2%; z-index:1;
  width:min(70%, calc(100% - 48px)); aspect-ratio:2400 / 2242;
  /* palette:allow mask, the desk feather (alpha only) */
  -webkit-mask-image:linear-gradient(#000, #000), radial-gradient(ellipse 46% 100% at 54% 0%, #000 45%, transparent 100%);
  mask-image:linear-gradient(#000, #000), radial-gradient(ellipse 46% 100% at 54% 0%, #000 45%, transparent 100%);
  /* palette:end */
  -webkit-mask-size:100% 80%, 100% 20%; mask-size:100% 80%, 100% 20%;
  -webkit-mask-position:top, bottom; mask-position:top, bottom;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hp-desk .hp-img{ width:100%; height:auto; }
.hp-card--show .hp-txt{ max-width:min(34em, 30%); }
/* the tools a workspace holds, a quiet list down the empty left column */
.hp-tools{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:12px; }
.hp-tools li{ font-size:16px; line-height:1.3; color:var(--hp-ink-2); }

/* ── Motion ───────────────────────────────────────────────────────────
   The cards ride the page's reveal (world.css .hw-reveal: opacity and a
   short rise). A card's frame follows 90 ms later with its own rise, so
   the surface settles card by card, left to right within a row. */
html.hw-js .hp-card.hw-reveal{ transition-delay:calc(var(--i, 0) * 70ms); }
html.hw-js .hp-card .hp-stage{ opacity:0; transform:translateY(28px);
  transition:opacity 520ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms + 90ms); }
html.hw-js .hp-card.is-in .hp-stage{ opacity:1; transform:none; }
html.hw-js .hp-card .hp-desk{ transition:transform 600ms var(--ease-out); }

/* ── Benchmark: three figures and the chart panel ─────────────────────── */
.hs-line{ margin:clamp(12px, 1vw, 20px) 0 0; font-size:var(--cv-t-lead); line-height:1.5; color:var(--cv-ink-2); }
.hs-stats{
  list-style:none; margin:0 0 clamp(40px, 4.2vw, 96px); padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;
}
.hs-stat a{ display:block; color:inherit; text-decoration:none; padding:8px 0; }
.hs-n{
  display:block;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(56px, 5.4vw, 120px); line-height:1; letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;
  color:var(--text-primary);
}
.hs-c{
  display:block; margin-top:clamp(12px, 1vw, 20px);
  font-size:14px; line-height:1.4; letter-spacing:0.005em;
  color:var(--cv-ink-2);
  transition:color var(--dur-fast) ease;
}
.hs-stat a:hover .hs-c, .hs-stat a:focus-visible .hs-c{ color:var(--text-primary); }
.hs-stat a:focus-visible{ outline:2px solid var(--text-primary); outline-offset:4px; border-radius:4px; }

/* The chart panel: the words, the two models' gains and the link down the
   left, the chart on the right two thirds, in the same ringed card. */
.hp-card--chart{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows:auto auto 1fr; column-gap:24px;
}
.hp-card--chart .hp-txt{ grid-column:1; grid-row:1; }
.hs-gains{ grid-column:1; grid-row:2; position:relative; z-index:2; margin:32px 0 0; padding:0 var(--hp-pad); display:grid; gap:24px; }
.hs-gain dt{ font-size:15px; line-height:1.3; color:var(--hp-ink); margin:0 0 8px; }
.hs-maker{ display:block; margin-top:2px; font-size:12px; color:var(--hp-ink-2); white-space:nowrap; }
.hs-gain dd{ margin:0; font-size:14px; line-height:1.5; color:var(--hp-ink-2); }
.hs-gn{
  display:inline-block; min-width:3.6em;
  font-family:var(--font-display); font-weight:300; font-size:26px; line-height:1.2;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--hp-ink);
}
.hp-card--chart .bench-more{ grid-column:1; grid-row:3; align-self:end; justify-self:start; position:relative; z-index:2; margin:24px 0 var(--hp-pad) var(--hp-pad); }
.hs-chart{ grid-column:2; grid-row:1 / span 3; position:relative; z-index:2; padding:32px 48px 32px 0; }
.hs-chart .bench-plot{ margin-top:calc(2.4 * var(--hw-u, 16px)); }

/* ── Firms: a panel with the words left and the workspace screen right ── */
.hw-firms-box{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr);
  height:clamp(340px, 30vw, 560px);
}
.hw-firms-copy{ position:relative; z-index:2; padding:var(--hp-pad); }
.hw-firms-copy .cv-btn{ margin-top:var(--hp-pad); }
.hw-firms-stage{ margin:var(--hp-pad) 0 0 0; }
.hw-firms-stage .hp-shot{ width:115%; }

/* ── Tablets and phones ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .hp-grid{ grid-template-rows:repeat(5, clamp(420px, 64cqw, 640px)); }
}
@media (max-width:860px){
  :root{ --hp-gap:12px; --hp-pad:20px; }
  .hp-grid{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-auto-rows:auto; }
  .hp-card, .hp-card--wide, .hp-card--narrow{ grid-column:1 / -1; height:clamp(360px, 104vw, 620px); }
  .hp-card--narrow .hp-shot, .hp-card--wide .hp-shot{ width:calc((100% + var(--hp-pad)) * 1.7); }
  .hp-card--show{ height:clamp(540px, 152vw, 860px); }
  .hp-card--show .hp-txt{ max-width:none; }
  .hp-tools{ margin-top:20px; display:flex; flex-wrap:wrap; gap:6px 16px; }
  .hp-tools li{ font-size:14px; }
  .hp-desk{ right:auto; left:12px; width:calc(100% - 24px); }
  .hs-stats{ grid-template-columns:minmax(0, 1fr); gap:24px; }
  .hp-card--chart{ display:flex; height:auto; }
  .hs-gains{ margin-top:24px; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .hs-chart{ padding:8px var(--hp-pad) 24px; }
  .hp-card--chart .bench-more{ align-self:flex-start; margin:0 0 var(--hp-pad) var(--hp-pad); }
  .hw-firms-box{ display:flex; height:clamp(380px, 100vw, 560px); }
  .hw-firms-stage{ margin:0 0 0 var(--hp-pad); }
  .hw-firms-stage .hp-shot{ width:170%; }
}
@media (max-width:560px){ .hw-firms-box .cv-btn{ width:100%; } }

@media (prefers-reduced-motion:reduce){
  html.hw-js .hp-card .hp-stage{ opacity:1; transform:none; transition:none; }
  html.hw-js .hp-card.hw-reveal{ transition-delay:0ms; }
}