/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- GENERAL SETTINGS -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

body {
  margin: 0;
  background-color: #F5F5F5;
  font-family: var(--tp-font-sans);
  font-size: 1.9565vh; /* ~18px on a 920px tall viewport */
  line-height: 1.25;
  color: #333;
}

/*
====================================================================================================================================================
------------------------------------------------------------- DESIGN SYSTEM (tp-*) -----------------------------------------------------------------
====================================================================================================================================================
WHY: the 2026 redesign (REDESIGN_PLAN.md section 2) gives every page one consistent look. Everything new is built from
the tokens below and the tp-* components, so colours, spacing and type are defined ONCE. The tp- prefix keeps the
components from colliding with the older classes further down, which still style the parts not yet migrated.

HOW: tokens are CSS custom properties on :root (colour, type, spacing, radius, shadow, z-index, motion). Components are
plain classes with BEM-like modifiers (tp-btn--primary). Sizes use clamp()/rem so they scale with the screen and with
browser zoom; layout widths stay in vw/% like the rest of the stylesheet. The existing aspect-ratio bands and the
max-width: 768px rules further down are reused, not replaced.

WHO: the Jinja partials (Header/Footer/Breadcrumbs/NextStep/...) and the redesigned pages; behaviour for interactive
components (tp-info popovers, tp-tabs, tp-modal, beginner mode) lives in JavaScript/tpDesign.js.
*/

/* Self-hosted typefaces (src/main/webapp/Fonts, SIL OFL; served by /fonts/<file>). Variable fonts: one file per style.
   font-display: swap shows the text at once in the fallback font, so fonts never block reading. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-Italic-Variable.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }

:root {
  /* Brand greens - #145536 (primary) and #1c754e (accent) are the original brand colours. */
  --tp-green-900: #0F3D2E;
  --tp-green-800: #145536;
  --tp-green-700: #1A5C40;
  --tp-green-600: #1C754E;
  --tp-green-200: #BFE3CF;
  --tp-green-300: #A7F3C8;   /* bright accent on dark green (sketch highlight) */
  --tp-green-950: #0B2B21;   /* footer / deepest band */
  /* Polish 2026-10-18: extra shades used by the polish blocks (buttons, washes, lines, mock-up, brand badges). */
  --tp-green-750: #1A6646;
  --tp-wash: #F4F8F5;
  --tp-wash-soft: #F7FAF8;
  --tp-mint: #EEF8F2;
  --tp-line-cool: #DFE8E2;
  --tp-line-faint: #EDF2EF;
  --tp-line-strong: #C8D3CC;
  --tp-dot-red: #F87171;
  --tp-dot-amber: #FBBF24;
  --tp-dot-green: #34D399;
  --tp-blue: #1F5F8B;
  --tp-blue-300: #7DB8E0;
  --tp-blue-50: #F1F7FC;
  --tp-amber-700: #B54708;
  --tp-amber-50: #FFF8F0;
  --tp-gold: #F4C95D;
  --tp-gold-line: #EBC567;
  --tp-gold-50: #FFF8E6;
  --tp-visa-navy: #1A1F71;
  --tp-mc-red: #EB001B;
  --tp-mc-orange: #F79E1B;
  --tp-stripe-purple: #635BFF;   /* Stripe's brand colour for the "stripe" payment badge */
  --tp-green-100: #E2F4EB;
  --tp-green-50:  #F3FAF6;

  /* Neutrals. Contrast (WCAG): ink on paper ~15:1, muted on white >= 4.5:1, white on green-800 ~9:1. */
  --tp-ink:       #14201A;
  --tp-ink-soft:  #3D4F45;
  --tp-muted:     #5E6E64;
  --tp-line:      #D8E5DD;
  --tp-line-soft: #E9F0EC;
  --tp-paper:     #FAFBF9;
  --tp-surface:   #FFFFFF;
  --tp-on-brand:  #FFFFFF;

  /* Semantic colours - only for values/status and always paired with an icon or text, never colour alone. */
  --tp-up:        #1C754E;
  --tp-down:      #B42318;
  --tp-down-bg:   #FDECEA;
  --tp-warn:      #B54708;
  --tp-warn-bg:   #FEF3E6;
  --tp-info:      #1F5F8B;
  --tp-info-bg:   #EAF3FA;
  --tp-info-line: #C7DDEE;
  --tp-warn-line: #F5D3AE;
  --tp-warn-hover:#FCE3C6;
  --tp-focus:     #1F5F8B;

  /* Typography: system fonts (no external font requests - fast, and no font CDN data transfer from the EU). */
  /* Typography (polish 2026-10-18, after the design sketch): Plus Jakarta Sans for text and UI, Fraunces for
     headings, JetBrains Mono for tickers and figures; system fonts as fallback. */
  --tp-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --tp-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --tp-text-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --tp-text-sm:   clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --tp-text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --tp-text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --tp-h3:        clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --tp-h2:        clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --tp-h1:        clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --tp-leading:   1.6;
  --tp-leading-tight: 1.2;

  /* Spacing scale (rem, so browser zoom scales it). */
  --tp-space-1: 0.25rem;
  --tp-space-2: 0.5rem;
  --tp-space-3: 0.75rem;
  --tp-space-4: 1rem;
  --tp-space-5: 1.5rem;
  --tp-space-6: 2rem;
  --tp-space-7: 3rem;
  --tp-space-8: 4rem;
  --tp-space-9: 6rem;
  --tp-section: clamp(3rem, 2rem + 4vw, 6rem);   /* vertical rhythm between page sections */
  --tp-gutter:  clamp(1rem, 0.6rem + 2vw, 2rem); /* side padding inside full-width bands */

  /* Widths: content is capped on ultrawide screens; text lines are kept readable. */
  --tp-max:     min(92vw, 72rem);
  --tp-measure: 68ch;

  /* Radius and (green-tinted, subdued) shadows. */
  --tp-radius-sm: 8px;
  --tp-radius:    14px;
  --tp-radius-lg: 22px;
  --tp-radius-pill: 999px;
  --tp-shadow-sm: 0 1px 2px rgba(15, 61, 46, 0.06), 0 1px 3px rgba(15, 61, 46, 0.08);
  --tp-shadow-md: 0 4px 12px rgba(15, 61, 46, 0.08), 0 2px 4px rgba(15, 61, 46, 0.06);
  --tp-shadow-lg: 0 18px 40px rgba(15, 61, 46, 0.14), 0 4px 10px rgba(15, 61, 46, 0.08);

  /* z-index scale. Modal/popover match the existing 10000/10001 so nothing ends up behind the old modals. */
  --tp-z-sticky:   100;
  --tp-z-header:   500;
  --tp-z-dropdown: 900;
  --tp-z-overlay:  9000;
  --tp-z-modal:    10000;
  --tp-z-popover:  10001;

  /* Motion: short and calm; switched off entirely under prefers-reduced-motion (bottom of this block). */
  --tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tp-fast: 150ms;
  --tp-med:  250ms;

  /* Reserved ad heights per screen type (no layout shift when an ad loads or stays empty). */
  --tp-ad-h: 90px;   /* leaderboard 728x90 on desktop */
}

/* Tablet-ish shapes get the 300x250 rectangle height, phones the mobile 320x100 banner. */
@media (max-aspect-ratio: 7/6) { :root { --tp-ad-h: 250px; } }
@media (max-width: 768px)      { :root { --tp-ad-h: 100px; } }

/* --- Base helpers ------------------------------------------------------------------------------------------- */

/* Visible only to screen readers (labels for icon buttons, table captions, ...). */
.tp-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Keyboard users always see where they are (WCAG 2.4.7 / 2.4.11). */
.tp-scope :focus-visible,
[class^="tp-"]:focus-visible,
[class*=" tp-"]:focus-visible {
  outline: 3px solid var(--tp-focus);
  outline-offset: 2px;
}

/* Skip link: first focusable element on every page, jumps past the header. */
.tp-skip {
  position: absolute; left: var(--tp-space-4); top: -100px;
  z-index: var(--tp-z-popover);
  background: var(--tp-surface); color: var(--tp-green-800);
  padding: var(--tp-space-2) var(--tp-space-4);
  border-radius: var(--tp-radius-sm); box-shadow: var(--tp-shadow-md);
  font: 600 var(--tp-text-sm)/1.2 var(--tp-font-sans);
}
.tp-skip:focus { top: var(--tp-space-4); }

/* Page container and section rhythm for redesigned pages. */
.tp-container {
  width: var(--tp-max);
  max-width: var(--tp-max);
  margin-inline: auto;
}
.tp-section { padding-block: var(--tp-section); }
.tp-section--tight { padding-block: calc(var(--tp-section) / 2); }
.tp-section--alt { background: var(--tp-green-50); }
.tp-section--brand { background: var(--tp-green-800); color: var(--tp-on-brand); }

/* Typography scope: redesigned content opts in with .tp-scope so old pages are not restyled by accident. */
.tp-scope {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading);
  color: var(--tp-ink);
}
.tp-scope h1, .tp-h1 { font-size: var(--tp-h1); line-height: var(--tp-leading-tight); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--tp-space-4); color: inherit; }
.tp-scope h2, .tp-h2 { font-size: var(--tp-h2); line-height: var(--tp-leading-tight); font-weight: 750; letter-spacing: -0.015em; margin: 0 0 var(--tp-space-4); color: inherit; }
.tp-scope h3, .tp-h3 { font-size: var(--tp-h3); line-height: 1.3; font-weight: 700; margin: 0 0 var(--tp-space-3); color: inherit; }
/* The older global element rules further down (h1 centred, h3/h4 uppercase in vh units, p 14px-in-vh, white links,
   green buttons) would leak into redesigned content; .tp-scope resets exactly those properties. */
.tp-scope h1, .tp-scope h2, .tp-scope h3, .tp-scope h4 { text-align: start; text-transform: none; }
.tp-scope h4 { font-size: var(--tp-text-base); font-weight: 700; margin: 0 0 var(--tp-space-2); }
.tp-scope p { font-size: inherit; line-height: inherit; margin: 0 0 var(--tp-space-4); max-width: var(--tp-measure); }
.tp-scope li { margin-bottom: var(--tp-space-1); }
.tp-scope a:not([class]) { color: var(--tp-green-600); text-underline-offset: 0.18em; }
.tp-scope a:not([class]):hover { color: var(--tp-green-800); }
.tp-lead { font-size: var(--tp-text-lg); color: var(--tp-ink-soft); max-width: var(--tp-measure); }
.tp-eyebrow {
  display: inline-block;
  font-size: var(--tp-text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-green-600);
  margin-bottom: var(--tp-space-3);
}
.tp-section--brand .tp-eyebrow { color: var(--tp-green-200); }
.tp-muted { color: var(--tp-muted); }
.tp-num { font-variant-numeric: tabular-nums; }

/* Simple responsive grid: columns appear as room allows (no fixed breakpoints needed). */
.tp-grid {
  display: grid;
  gap: var(--tp-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tp-grid-min, 16rem)), 1fr));
}
.tp-stack > * + * { margin-top: var(--tp-space-4); }
.tp-stack > :is(h2, h3) + * { margin-top: var(--tp-space-3); }
.tp-stack > * + :is(h2, h3) { margin-top: var(--tp-space-7); }
.tp-row { display: flex; flex-wrap: wrap; gap: var(--tp-space-3); align-items: center; }

/* --- Buttons ------------------------------------------------------------------------------------------------ */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-2);
  min-height: 44px;                                      /* WCAG 2.5.8 target size, comfortable on touch */
  padding: var(--tp-space-2) var(--tp-space-5);
  border: 2px solid transparent; border-radius: var(--tp-radius-pill);
  font: 650 var(--tp-text-sm)/1.2 var(--tp-font-sans);
  letter-spacing: 0.01em; text-decoration: none; text-transform: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--tp-fast) var(--tp-ease), color var(--tp-fast) var(--tp-ease),
              border-color var(--tp-fast) var(--tp-ease), box-shadow var(--tp-fast) var(--tp-ease),
              transform var(--tp-fast) var(--tp-ease);
}
.tp-btn:active { transform: translateY(1px); }
.tp-btn[disabled], .tp-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.tp-btn--primary { background: var(--tp-green-800); color: var(--tp-on-brand); box-shadow: var(--tp-shadow-sm); }
.tp-btn--primary:hover { background: var(--tp-green-900); box-shadow: var(--tp-shadow-md); }
.tp-btn--secondary { background: var(--tp-surface); color: var(--tp-green-800); border-color: var(--tp-green-800); }
.tp-btn--secondary:hover { background: var(--tp-green-50); }
.tp-btn--ghost { background: transparent; color: var(--tp-green-800); }
.tp-btn--ghost:hover { background: var(--tp-green-100); }
/* On dark (brand) backgrounds. */
.tp-btn--light { background: var(--tp-surface); color: var(--tp-green-900); }
.tp-btn--light:hover { background: var(--tp-green-100); }
.tp-btn--outline-light { background: transparent; color: var(--tp-on-brand); border-color: rgba(255, 255, 255, 0.75); }
.tp-btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); }
.tp-btn--lg { min-height: 52px; padding-inline: var(--tp-space-6); font-size: var(--tp-text-base); }
.tp-btn--sm { min-height: 36px; padding: var(--tp-space-1) var(--tp-space-4); font-size: var(--tp-text-xs); }
.tp-btn--block { display: flex; width: 100%; }

/* --- Cards -------------------------------------------------------------------------------------------------- */
.tp-card {
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  padding: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  box-shadow: var(--tp-shadow-sm);
  color: var(--tp-ink);
}
.tp-card > :last-child { margin-bottom: 0; }
.tp-card--link { display: block; text-decoration: none; transition: box-shadow var(--tp-med) var(--tp-ease), transform var(--tp-med) var(--tp-ease), border-color var(--tp-med) var(--tp-ease); }
.tp-card--link:hover { box-shadow: var(--tp-shadow-md); transform: translateY(-2px); border-color: var(--tp-green-200); }
.tp-card--soft { background: var(--tp-green-50); border-color: var(--tp-green-100); box-shadow: none; }
.tp-card__title { font-size: var(--tp-text-lg); font-weight: 700; text-transform: none; margin: 0 0 var(--tp-space-2); color: var(--tp-ink); }
.tp-card__icon {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: var(--tp-space-3);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-green-100); color: var(--tp-green-800);
  font-size: 1.3rem;
}

/* --- Badges and chips --------------------------------------------------------------------------------------- */
.tp-badge {
  display: inline-flex; align-items: center; gap: var(--tp-space-1);
  padding: 0.15em 0.6em;
  border-radius: var(--tp-radius-pill);
  font: 700 var(--tp-text-xs)/1.4 var(--tp-font-sans);
  background: var(--tp-green-100); color: var(--tp-green-900);
  white-space: nowrap;
}
.tp-badge--up   { background: var(--tp-green-100); color: var(--tp-up); }
.tp-badge--down { background: var(--tp-down-bg);   color: var(--tp-down); }
.tp-badge--warn { background: var(--tp-warn-bg);   color: var(--tp-warn); }
.tp-badge--info { background: var(--tp-info-bg);   color: var(--tp-info); }
.tp-badge--neutral { background: var(--tp-line-soft); color: var(--tp-ink-soft); }

/* Removable filter chip (screener): the whole chip is the remove button so the target is large. */
.tp-chip {
  display: inline-flex; align-items: center; gap: var(--tp-space-2);
  min-height: 36px; padding: var(--tp-space-1) var(--tp-space-2) var(--tp-space-1) var(--tp-space-3);
  border: 1px solid var(--tp-green-200); border-radius: var(--tp-radius-pill);
  background: var(--tp-green-50); color: var(--tp-green-900);
  font: 600 var(--tp-text-sm)/1.2 var(--tp-font-sans);
}
.tp-chip__remove {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
}
.tp-chip__remove:hover { background: var(--tp-green-100); color: inherit; }
.tp-chips { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }

/* --- Info button + popover (glossary tooltips) ---------------------------------------------------------------
   A real <button> so it works with tap, mouse and keyboard; tpDesign.js positions .tp-popover next to it and closes it
   on Escape/outside tap. The text comes from content/glossary.json. */
.tp-info {
  display: inline-grid; place-items: center;
  width: 1.35em; height: 1.35em; min-width: 24px; min-height: 24px;   /* WCAG 2.5.8 minimum */
  margin-inline-start: 0.3em; padding: 0;
  border: 1.5px solid currentColor; border-radius: 50%;
  background: transparent; color: var(--tp-green-600);
  font: 700 0.75em/1 var(--tp-font-sans); cursor: help;
  vertical-align: middle;
}
.tp-info:hover, .tp-info[aria-expanded="true"] { background: var(--tp-green-600); color: var(--tp-on-brand); border-color: var(--tp-green-600); }
.tp-popover {
  position: absolute; z-index: var(--tp-z-popover);
  width: min(22rem, calc(100vw - 2rem));
  padding: var(--tp-space-4);
  background: var(--tp-surface); color: var(--tp-ink);
  border: 1px solid var(--tp-line); border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-lg);
  font: 400 var(--tp-text-sm)/1.5 var(--tp-font-sans);
  text-align: left; text-transform: none; letter-spacing: normal; white-space: normal;
}
.tp-popover[hidden] { display: none; }
.tp-popover__term { display: block; font-weight: 700; margin-bottom: var(--tp-space-1); color: var(--tp-green-900); }
.tp-popover__more { display: inline-block; margin-top: var(--tp-space-2); color: var(--tp-green-600); font-weight: 600; }
/* Dotted underline for terms that carry an explanation (desktop hover hint; the info button is the real control). */
.tp-term { text-decoration: underline dotted var(--tp-green-600); text-underline-offset: 0.2em; }

/* --- Callouts (intro / beginner / disclaimer boxes) --------------------------------------------------------- */
.tp-callout {
  display: flex; gap: var(--tp-space-3); align-items: flex-start;
  padding: var(--tp-space-4) var(--tp-space-5);
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-green-200);
  border-inline-start: 5px solid var(--tp-green-600);
  background: var(--tp-green-50); color: var(--tp-ink);
}
.tp-callout > :last-child { margin-bottom: 0; }
.tp-callout__icon { flex: none; font-size: 1.25rem; line-height: 1.4; }
.tp-callout__body > :last-child { margin-bottom: 0; }
.tp-callout__title { font-weight: 700; margin: 0 0 var(--tp-space-1); }
.tp-callout--info { border-color: var(--tp-info-line); border-inline-start-color: var(--tp-info); background: var(--tp-info-bg); }
.tp-callout--warn { border-color: var(--tp-warn-line); border-inline-start-color: var(--tp-warn); background: var(--tp-warn-bg); }
.tp-callout__close { margin-inline-start: auto; flex: none; }

/* Beginner mode: .tp-guide elements are only shown while beginner mode is on (default). The "I know the basics"
   switch sets html.tp-expert (remembered in localStorage tp_beginner=off) and hides them. */
html.tp-expert .tp-guide { display: none !important; }

/* --- Tabs ------------------------------------------------------------------------------------------------------ */
.tp-tabs { display: flex; gap: var(--tp-space-1); overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--tp-line); }
.tp-tab {
  flex: none; min-height: 44px;
  padding: var(--tp-space-2) var(--tp-space-4);
  border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--tp-ink-soft); cursor: pointer;
  font: 600 var(--tp-text-sm)/1.2 var(--tp-font-sans);
}
.tp-tab:hover { color: var(--tp-green-800); background: transparent; }   /* overrides the global green button:hover */
.tp-tab[aria-selected="true"] { color: var(--tp-green-800); border-bottom-color: var(--tp-green-600); }
.tp-tabpanel { padding-top: var(--tp-space-5); }
.tp-tabpanel[hidden] { display: none; }

/* --- Accordion (native <details>, no JS needed) -------------------------------------------------------------- */
.tp-accordion { border: 1px solid var(--tp-line); border-radius: var(--tp-radius); background: var(--tp-surface); overflow: hidden; }
.tp-accordion + .tp-accordion { margin-top: var(--tp-space-3); }
.tp-accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3);
  min-height: 44px; padding: var(--tp-space-3) var(--tp-space-5);
  cursor: pointer; list-style: none;
  font-weight: 650; color: var(--tp-ink);
}
.tp-accordion > summary::-webkit-details-marker { display: none; }
.tp-accordion > summary::after {
  content: ""; flex: none; width: 0.6em; height: 0.6em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tp-med) var(--tp-ease);
}
.tp-accordion[open] > summary::after { transform: rotate(-135deg); }
.tp-accordion > summary:hover { background: var(--tp-green-50); }
.tp-accordion__body { padding: 0 var(--tp-space-5) var(--tp-space-4); }
.tp-accordion__body > :last-child { margin-bottom: 0; }

/* --- Breadcrumbs ------------------------------------------------------------------------------------------- */
.tp-breadcrumb { font-size: var(--tp-text-sm); color: var(--tp-muted); }
.tp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--tp-space-1) var(--tp-space-2); margin: 0; padding: 0; list-style: none; }
.tp-breadcrumb li { display: inline-flex; align-items: center; gap: var(--tp-space-2); }
.tp-breadcrumb li + li::before { content: "/"; color: var(--tp-line); }
.tp-breadcrumb a { color: var(--tp-green-600); text-decoration: none; }
.tp-breadcrumb a:hover { text-decoration: underline; }
.tp-breadcrumb [aria-current="page"] { color: var(--tp-ink-soft); }

/* --- Step indicator (beginner journey: Learn -> Find -> Understand) --------------------------------------------- */
.tp-steps { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); margin: 0; padding: 0; list-style: none; counter-reset: tp-step; }
.tp-steps li {
  counter-increment: tp-step;
  display: inline-flex; align-items: center; gap: var(--tp-space-2);
  padding: var(--tp-space-1) var(--tp-space-3) var(--tp-space-1) var(--tp-space-1);
  border-radius: var(--tp-radius-pill);
  background: var(--tp-line-soft); color: var(--tp-ink-soft);
  font: 600 var(--tp-text-xs)/1.2 var(--tp-font-sans);
}
.tp-steps li::before {
  content: counter(tp-step);
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--tp-surface); color: var(--tp-ink-soft);
}
.tp-steps li[aria-current="step"] { background: var(--tp-green-800); color: var(--tp-on-brand); }
.tp-steps li[aria-current="step"]::before { color: var(--tp-green-800); }
.tp-steps li.is-done { background: var(--tp-green-100); color: var(--tp-green-900); }
.tp-steps li.is-done::before { content: "\2713"; color: var(--tp-green-600); }
.tp-steps a, .tp-scope .tp-steps a { color: inherit; text-decoration: none; }   /* beats .tp-scope a:not([class]) */

/* --- Next step (end of every page: one primary action, at most one secondary) ------------------------------ */
.tp-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--tp-radius-lg);
  background: linear-gradient(135deg, var(--tp-green-800), var(--tp-green-600));
  color: var(--tp-on-brand);
  box-shadow: var(--tp-shadow-md);
}
.tp-next__text { flex: 1 1 18rem; }
.tp-next__label { font-size: var(--tp-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-green-200); }
.tp-next__title { font-size: var(--tp-text-lg); font-weight: 750; margin: var(--tp-space-1) 0 0; color: var(--tp-on-brand); }
.tp-next__desc { margin: var(--tp-space-1) 0 0; color: rgba(255, 255, 255, 0.88); }
.tp-next__actions { display: flex; flex-wrap: wrap; gap: var(--tp-space-3); }

/* --- Section navigation (stock page "jump to" bar) ------------------------------------------------------- */
.tp-section-nav {
  position: sticky; top: 0; z-index: var(--tp-z-sticky);
  display: flex; gap: var(--tp-space-1); overflow-x: auto; scrollbar-width: none;
  padding: var(--tp-space-2) 0;
  background: rgba(250, 251, 249, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tp-line);
}
.tp-section-nav::-webkit-scrollbar { display: none; }
.tp-section-nav a {
  flex: none; display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 var(--tp-space-3); border-radius: var(--tp-radius-pill);
  color: var(--tp-ink-soft); text-decoration: none;
  font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
}
.tp-section-nav a:hover, .tp-section-nav a[aria-current="true"] { background: var(--tp-green-100); color: var(--tp-green-900); }

/* --- Modal and bottom sheet ------------------------------------------------------------------------------- */
.tp-modal {
  position: fixed; inset: 0; z-index: var(--tp-z-modal);
  display: grid; place-items: center;
  padding: var(--tp-space-4);
  background: rgba(15, 32, 26, 0.55);
}
.tp-modal[hidden] { display: none; }
.tp-modal__dialog {
  width: min(40rem, 100%);
  max-height: min(90dvh, 90vh);
  overflow: auto; overscroll-behavior: contain;
  background: var(--tp-surface); color: var(--tp-ink);
  border-radius: var(--tp-radius-lg);
  box-shadow: var(--tp-shadow-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-family: var(--tp-font-sans); line-height: var(--tp-leading);
}
.tp-modal__title { font-size: var(--tp-h3); font-weight: 750; margin: 0 0 var(--tp-space-3); }
.tp-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tp-space-3); margin-top: var(--tp-space-5); }

/* On phones dialogs slide up as a bottom sheet (thumb-reachable, uses the dynamic viewport height). */
.tp-sheet { position: fixed; inset: auto 0 0 0; z-index: var(--tp-z-modal); }
@media (max-width: 768px) {
  .tp-modal { place-items: end stretch; padding: 0; }
  .tp-modal__dialog, .tp-sheet__panel {
    width: 100%; max-height: 88svh;
    border-radius: var(--tp-radius-lg) var(--tp-radius-lg) 0 0;
    padding-bottom: max(var(--tp-space-5), env(safe-area-inset-bottom));
  }
}
.tp-sheet__panel {
  background: var(--tp-surface); color: var(--tp-ink);
  box-shadow: var(--tp-shadow-lg);
  padding: var(--tp-space-5);
  border-radius: var(--tp-radius-lg) var(--tp-radius-lg) 0 0;
}

/* --- Ad slot ------------------------------------------------------------------------------------------------
   Clearly separated from content (label, border, background) per AdSense policy; the height is reserved up front so
   nothing jumps when the ad loads. Labelled "Advertisements" (one of the two labels AdSense allows). Paying users get
   body.ad-free, which removes the slot completely. */
.tp-ad {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: var(--tp-max);
  min-height: calc(var(--tp-ad-h) + 1.75rem);
  margin: var(--tp-space-6) auto;
  padding: var(--tp-space-2);
  border: 1px dashed var(--tp-line);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-paper);
  box-sizing: border-box;
}
.tp-ad::before {
  content: "Advertisements";
  align-self: flex-start;
  margin-bottom: var(--tp-space-1);
  font: 600 var(--tp-text-xs)/1.2 var(--tp-font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tp-muted);
}
.tp-ad > ins, .tp-ad > div { width: 100%; min-height: var(--tp-ad-h); }
body.ad-free .tp-ad { display: none !important; }

/* --- Unusual-value flag --------------------------------------------------------------------------------------
   Marks a number that is far outside the normal range (e.g. a 60 % dividend yield). Icon + text, never colour alone. */
.tp-flag {
  display: inline-flex; align-items: center; gap: 0.25em;
  margin-inline-start: 0.35em; padding: 0 0.45em;
  border: 1px solid var(--tp-warn-line); border-radius: var(--tp-radius-pill);
  background: var(--tp-warn-bg); color: var(--tp-warn);
  font: 700 var(--tp-text-xs)/1.5 var(--tp-font-sans);
  cursor: help; white-space: nowrap; vertical-align: middle;
}
.tp-flag::before { content: "\2691"; }   /* the flag glyph */

/* --- Empty state (screener without results, missing data) --------------------------------------------- */
.tp-empty {
  display: grid; justify-items: center; gap: var(--tp-space-3);
  padding: var(--tp-space-7) var(--tp-space-4);
  text-align: center; color: var(--tp-ink-soft);
}
.tp-empty__title { font-size: var(--tp-text-lg); font-weight: 700; color: var(--tp-ink); margin: 0; }

/* --- Key figure ("In short" box, stat tiles) --------------------------------------------------------------- */
.tp-stat { display: grid; gap: var(--tp-space-1); }
.tp-stat__label { font-size: var(--tp-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-muted); }
.tp-stat__value { font-size: var(--tp-text-lg); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--tp-ink); }
.tp-stat__value--up::before   { content: "\25B2\00A0"; color: var(--tp-up); font-size: 0.8em; }
.tp-stat__value--down::before { content: "\25BC\00A0"; color: var(--tp-down); font-size: 0.8em; }

/* --- Switch (the "I know the basics" toggle) ------------------------------------------------------------------ */
.tp-switch { display: inline-flex; align-items: center; gap: var(--tp-space-2); cursor: pointer; font: 600 var(--tp-text-sm)/1.2 var(--tp-font-sans); }
.tp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-switch__track {
  position: relative; flex: none; width: 2.6rem; height: 1.5rem;
  border-radius: var(--tp-radius-pill); background: var(--tp-muted);
  transition: background-color var(--tp-fast) var(--tp-ease);
}
.tp-switch__track::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff;
  transition: transform var(--tp-fast) var(--tp-ease);
}
.tp-switch input:checked + .tp-switch__track { background: var(--tp-green-600); }
.tp-switch input:checked + .tp-switch__track::after { transform: translateX(1.1rem); }
.tp-switch input:focus-visible + .tp-switch__track { outline: 3px solid var(--tp-focus); outline-offset: 2px; }

/* --- Disclaimer line (footer and next to presets) ------------------------------------------------------- */
.tp-disclaimer { font-size: var(--tp-text-xs); line-height: 1.5; color: var(--tp-muted); }
.tp-section--brand .tp-disclaimer { color: rgba(255, 255, 255, 0.8); }

/* --- Reduced motion: no transitions, no smooth scrolling, no hover lifts --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class^="tp-"], [class*=" tp-"], [class^="tp-"]::after, [class*=" tp-"]::after {
    transition: none !important;
    animation: none !important;
  }
  .tp-card--link:hover { transform: none; }
  html { scroll-behavior: auto !important; }
}


/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- HEADER SETTINGS ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.top-bar {
  background-color: #145536;
  color: white;
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-button-container {
  display: flex;
  max-width: 60%;
  width: 60%;
  justify-content: space-between;
  margin: 0 auto; /* Centers the container horizontally */
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.shield-icon {
  width: 1.042vw; /* ~20px on a 1920px wide viewport */
  height: 2.174vh; /* ~20px on a 920px tall viewport */
  margin-right: 0.521vw; /* ~10px on a 1920px wide viewport */
}

.top-bar-right {
  display: flex;
  align-items: center;
}

.contact-us {
  color: white;
  text-decoration: none;
  margin-right: 1.042vw;
  font-size: 1em;
}

.login-button {
  background-color: transparent;
  color: white;
  border: 0.1087vh solid white; /* ~1px on a 920px tall viewport */
  padding: 0.5435vh 0.7813vw; /* ~5px on a 920px tall viewport and ~15px on a 1920px wide viewport */
  border-radius: 0.5435vh; /* ~5px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.login-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Main Navigation Bar */
.main-nav {
    background-color: #145536; /* Optional: Matches the top bar */
    color: white;
    padding: 2.1739vh; /* ~20px on a 920px tall viewport */
    display: flex;
    align-items: center;
}

.main-nav-container {
  display: flex;
  max-width: 60%;
  width: 60%;
  justify-content: space-between;
  margin: 0 auto; /* Centers the container horizontally */
}

.logo {
  margin-right: 1.042vw; /* ~20px on a 1920px wide viewport */
  font-size: 3.2609vh; /* ~30px on a 920px tall viewport */
  font-weight: bold;
  left: 0%;
  width: 25%;
  white-space: nowrap; /* Prevents text wrapping to multiple lines */
}

.logo-link {
    display: inline-block; /* Keeps it inline if needed */
    text-decoration: none; /* No underline by default */
}

.logo-link:hover {
    text-decoration: underline; /* Adds underline on hover */
    text-decoration-color: white; /* Makes the underline white */
}

.nav-links {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.nav-links ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-grow: 1; /* Allows ul to expand within nav-links */
  justify-content: space-around; /* Evenly spaces the links */
}

.nav-links li {
	/* No margin right now */
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1.9565vh; /* ~18px on a 920px tall viewport */
}

.nav-links a.active {
  border-bottom: 0.2174vh solid white; /* ~2px on a 920px tall viewport */
}

.nav-links a:hover {
  opacity: 0.8;
}

.language-selector {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.globe-icon {
  width: 1.042vw; /* ~20px on a 1920px wide viewport */
  height: 2.174vh; /* ~20px on a 920px tall viewport */
  margin-right: 0.2604vw; /* ~5px on a 1920px wide viewport */
}

/* Hero Section */
.hero-section {
  background: linear-gradient(to bottom, #145536, #1c754e);
  padding: 1vh 1.0417vw 10.8696vh 1.0417vw; /* ~9px and ~100px on a 920px tall viewport and ~20px and ~20px on a 1920px wide viewport */
  position: relative;
  overflow: hidden;
}

.hero-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 60vw; /* ~1152px on a 1920px wide viewport - 60% width */
    margin: 0 auto;
    padding: 2.174vh; /* ~20px on a 920px tall viewport */
}

.hero-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 1.042vw; /* ~20px on a 1920px wide viewport */
}

.hero-left h1 {
    margin-bottom: 1vh; /* ~9px on a 920px tall viewport */
    color: white;
    font-size: 1.75em;
    text-align: left;
}

.hero-left p {
    margin-bottom: 2.174vh; /* ~20px on a 920px tall viewport */
    color: white;
    font-size: 1em;
    line-height: 1.5
}

.hero-buttons {
    display: flex;
    gap: 0.7813vw; /* ~15px on a 1920px wide viewport */
    margin-top: 2.174vh; /* ~20px on a 920px tall viewport */
}

.hero-buttons button {
    padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
    border-radius: 0.5435vh; /* ~5px on a 920px tall viewport */
    cursor: pointer;
}

.primary-button {
  background-color: #145536;
  color: white;
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  border: none;
  border-radius: 2.7174vh; /* ~25px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.primary-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.secondary-button {
  background-color: transparent;
  color: white;
  border: 0.2174vh solid white; /* ~2px on a 920px tall viewport */
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  border-radius: 2.7174vh; /* ~25px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.secondary-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Carousel Container */
.carousel {
  position: relative;
  width: 100%;
}

/* Hide all slides by default */
.carousel-slide {
  display: none;
  height: 32.6087vh; /* ~300px on a 920px tall viewport */
}

/* Show the active slide */
.carousel-slide.active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Carousel Controls (Arrows and Dots) */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.174vh; /* ~20px on a 920px tall viewport */
}

/* Arrows */
.carousel-arrow {
  background: none;
  border: none;
  font-size: 2.6087vh; /* ~24px on a 920px tall viewport */
  cursor: pointer;
  color: white; /* Matches white dots; adjust if needed */
  margin: 0 0.5208vw; /* ~10px on a 1920px wide viewport */
  padding: 0.5435vh; /* ~5px on a 920px tall viewport */
}

.carousel-dots {
    display: flex;
    align-items: center;
}

.carousel-dots span {
    width: 0.5208vw; /* ~10px on a 1920px wide viewport */
    height: 1.086vh; /* ~10px on a 920px tall viewport */
    background-color: white;
    border-radius: 50%;
    margin: 0 0.2604vw; /* ~5px on a 1920px wide viewport */
    opacity: 0.5;
}

.carousel-dots .active {
    opacity: 1;
}

.dot {
  width: 0.5208vw; /* ~10px on a 1920px wide viewport */
  height: 1.086vh; /* ~10px on a 920px tall viewport */
  background-color: white;
  border-radius: 50%;
  margin: 0 0.2604vw; /* ~5px on a 1920px wide viewport */
  opacity: 0.5;
  cursor: pointer;
}

.dot.active {
  opacity: 1;
}

.hero-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center; /* Ensures vertical centering */
}

.illustration {
    width: 100%;
    max-width: 13.0208vw; /* ~250px on a 1920px wide viewport */
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
}


/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  body {
    font-size: 1.9565vw; /* Adjust font size to be relative to width for better scaling on narrow screens */
  }

  .top-bar {
    padding: 1.087vh 2vw; /* Increase horizontal padding slightly for touch-friendly spacing */
    flex-direction: column; /* Stack elements vertically if needed */
  }

  .top-bar-button-container {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .top-bar-left, .top-bar-right {
    margin-bottom: 1vh;
  }

  .shield-icon {
    width: 5vw;
    height: 5vw; /* Make square for better mobile fit */
    margin-right: 2vw;
  }

  .contact-us {
    margin-right: 0;
    margin-bottom: 1vh;
  }

  .login-button {
    width: 100%; /* Full width for easier tapping */
  }

  .main-nav {
    padding: 2vh;
  }

  .main-nav-container {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    margin-right: 0;
    margin-bottom: 2vh;
    width: 100%;
    text-align: center;
    font-size: 4vw;
  }

  .nav-links {
    width: 100%;
    justify-content: center;
  }

  .nav-links ul {
    flex-direction: column;
    align-items: center;
  }

  .nav-links li {
    margin-bottom: 1vh;
  }

  .nav-links a {
    font-size: 3vw;
  }

  .language-selector {
    margin-left: 0;
    margin-top: 1vh;
  }

  .globe-icon {
    width: 5vw;
    height: 5vw;
    margin-right: 1vw;
  }

  .hero-section {
    padding: 5vh 4vw 10vh 4vw; /* Increase horizontal padding for mobile */
  }

  .hero-content {
    flex-direction: column;
    max-width: 100%;
    padding: 2vh 0;
    align-items: center;
    text-align: center;
  }

  .hero-left, .hero-right {
    width: 100%;
    padding-right: 0;
    align-items: center;
  }

  .hero-left h1 {
    font-size: 1.5em; /* Slightly smaller for mobile */
    text-align: center;
  }

  .hero-left p {
    font-size: 0.9em;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 2vh;
    width: 100%;
    justify-content: center;
  }

  .hero-buttons button {
    width: 100%; /* Full width buttons for easy tapping */
    padding: 2vh 4vw;
    font-size: 3vw;
  }

  .primary-button, .secondary-button {
    padding: 2vh 4vw;
    border-radius: 5vh;
    font-size: 3vw;
  }

  .carousel-slide {
    height: auto; /* Allow content to determine height */
  }

  .carousel-controls {
    margin-top: 2vh;
  }

  .carousel-arrow {
    font-size: 5vw;
    margin: 0 2vw;
  }

  .carousel-dots span, .dot {
    width: 3vw;
    height: 3vw;
    margin: 0 1vw;
  }

  .hero-right {
    margin-top: 4vh; /* Add space between left and right sections */
  }

  .illustration {
    max-width: 50vw; /* Larger relative to mobile screen */
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ CHART SETTINGS ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    height: 30%;
    margin: 5% auto 0 auto; /* centers the container horizontally */
    margin-bottom: 4vh;
    position: relative;
  	min-height: 400px;
}

#stockInfoContent .chart-container.chart-error .chart-error-msg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}

.chart {
    width: 50%;
    height: 30%;
}

.range_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5% auto;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 1.8vh;
  color: #635a5a;
}

input[type="number"] {
  color: #8a8383;
  width: 2.60417vw; /* ~50px on a 1920px wide viewport */
  height: 3.26087vh; /* ~30px on a 920px tall viewport */
  font-size: 2.17391vh; /* ~20px on a 920px tall viewport */
  border: none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

.chartButton {
  display: inline-block;
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  font-size: 2.6087vh; /* ~24px on a 920px tall viewport */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #1c754e;
  border: none;
  border-radius: 1.63044vh; /* ~15px on a 920px tall viewport */
  box-shadow: 0 0.97826vh #999; /* ~9px on a 920px tall viewport */
}

.chartButton:hover {background-color: #145536}

.chartButton:active {
  background-color: #145536;
  box-shadow: 0 0.54348vh #666; /* ~5px on a 920px tall viewport */
  transform: translateY(0.43478vh); /* ~4px on a 920px tall viewport */
}

.sliders_control {
  position: relative;
  min-height: 50px;
  margin: 30px 0;
  height: 50px;
}

/* Invisible track — we don't want the browser to draw anything */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  position: absolute;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  pointer-events: none;         /* only thumbs get events */
  z-index: 2;
}

/* Remove the grey track completely */
input[type="range"]::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none;
  height: 8px;
}
input[type="range"]::-moz-range-track {
  background: transparent !important;
  border: none;
  height: 8px;
}

/* Slimmer & taller thumbs – the 2025 premium look */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;                  /* ← much slimmer (was 30px) */
  height: 36px;                 /* ← slightly taller for elegance */
  background: white;
  border-radius: 9px;           /* perfect pill shape */
  box-shadow: 0 0 0 1.5px #C6C6C6, 0 4px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  margin-top: -14px;            /* (36px height / 2) - (8px track / 2) = -14px */
  z-index: 10;
  transition: all 0.18s ease;
}

input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 18px;
  height: 36px;
  background: white;
  border-radius: 9px;
  box-shadow: 0 0 0 1.5px #C6C6C6, 0 4px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 3px #1c754e33, 0 6px 16px rgba(0,0,0,0.2);
  transform: scale(1.08);
}

input[type="range"]::-webkit-slider-thumb:active {
  background: #1c754e;
  box-shadow: 0 0 0 4px #1c754e44;
  transform: scale(1.1);
}

/* Remove your old specific rules */
#fromSlider{
  height: 50px !important;   /* override any height:0 */
  z-index: 5;
}

#toSlider {
    z-index: 10 !important;   /* higher than green bar (z-index:5) and fromSlider */
}

#toSlider::-webkit-slider-thumb,
#toSlider::-moz-range-thumb {
    z-index: 10 !important;
    position: relative;       /* helps some browsers respect z-index */
}

/* Green bar that represents the selected range */
.sliders_control::before {
  content: "";
  position: absolute;
  height: 8px;
  background: #1c754e;
  left: 15px;                     /* thumb radius */
  right: 15px;                    /* thumb radius */
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- STYLE FOR THE STOCK SELECTION BOX -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.chartStockPickBox {
  width: 49.957%;
  box-sizing: border-box;
  border: 0.21739vh solid #ccc; /* ~2px on a 920px tall viewport */
  border-radius: 0.32609vh; /* ~3px on a 920px tall viewport */
  font-size: 2.17391vh; /* ~20px on a 920px tall viewport */
  background-color: white;
  background-size: 3.26087vh 1.5625vw; /* ~30px on a 920px tall viewport and ~30px on a 1920px wide viewport */
  background-position: 0.32609vh center; /* ~3px on a 920px tall viewport */
  background-repeat: no-repeat;
  padding: 1.30435vh 2.60416vw 1.30435vh 2.60416vw; /* ~12px and ~12px on a 920px tall viewport and ~50px and ~50px on a 1920px wide viewport */
  transition: width 0.4s ease-in-out;
}

.chartStockPickBox:focus {
  width: 49.957%;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- SELECT DROPDOWN APPEARENCE SETTINGS ------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.custom-select {
  position: relative;
  font-family: var(--tp-font-sans);
  width: 20%;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #1c754e;
  height: 5.43478vh; /* ~50px on a 920px tall viewport */
  border-radius: 2.17391vh; /* ~20px on a 920px tall viewport */
  line-height: 5.43478vh; /* ~50px on a 920px tall viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.08696vh; /* ~10px on a 920px tall viewport */
  text-align: left;
  font-size: 1.73913vh; /* ~24px on a 920px tall viewport */
  position: relative;
  padding-right: 4.34783vh; /* ~40px on a 920px tall viewport */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove bottom rounded corners when the dropdown is active */
.select-selected.select-arrow-active {
  border-radius: 2.17391vh 2.17391vh 0 0; /* Rounded corners for top only ~20px on a 920px tall viewport */
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.54348vh; /* ~5px on a 920px tall viewport */
  width: 0;
  height: 0;
  border: 0.65217vh solid transparent; /* ~6px on a 920px tall viewport */
  border-color: #fff transparent transparent transparent;
}

.select-items div, .select-selected {
  color: #ffffff;
  padding: 0.86957vh 0.83333vw; /* ~8px on a 920px tall viewport and ~16px on a 1920px wide viewport */
  cursor: pointer;
  user-select: none;
  font-size: 1.73913vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*style items (options):*/
.select-items {
  position: absolute;
  border-radius: 0 0 2.17391vh 2.17391vh; /* Rounded corners for bottom only ~20px on a 920px tall viewport */
  background-color: #1c754e;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- SELECT DROPDOWN APPEARENCE SETTINGS 2 ----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.custom-select2 {
  position: relative;
  font-family: var(--tp-font-sans);
  width: 5vw !important;
  height: 3.8vh !important;
}

.custom-select2 select {
  display: none; /*hide original SELECT element:*/
}

.select-selected2 {
  background-color: #1c754e;
  height: 3.8vh; /* ~50px on a 920px tall viewport */
  border-radius: 1.9vh; /* ~20px on a 920px tall viewport */
  line-height: 3.8vh; /* ~50px on a 920px tall viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.83333vw; /* ~10px on a 1920px wide viewport */
  text-align: left;
  font-size: 1.52174vh; /* ~24px on a 920px tall viewport */
  position: relative;
  padding-right: 1.45vw; /* ~40px on a 1920px wide viewport */
  width: 100%; /* Fixed width for the button */
  box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Remove bottom rounded corners when the dropdown is active */
.select-selected2.select-arrow-active2 {
  border-radius: 2.17391vh 2.17391vh 0 0; /* Rounded corners for top only ~20px on a 920px tall viewport */
}

/*style the arrow inside the select element:*/
.select-selected2:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.54348vh; /* ~5px on a 920px tall viewport */
  width: 0;
  height: 0;
  border: 0.65217vh solid transparent; /* ~6px on a 920px tall viewport */
  border-width: 0.5vh;
  border-color: #fff transparent transparent transparent;
}

.select-items2 div, .select-selected2 {
  color: #ffffff;
  padding: 0.6vh 0.52vw; /* ~8px on a 920px tall viewport and ~16px on a 1920px wide viewport */
  cursor: pointer;
  user-select: none;
  font-size: 1.43vh;
}

/*style items (options):*/
.select-items2 {
  position: absolute;
  border-radius: 0 0 2.17391vh 2.17391vh; /* Rounded corners for bottom only ~20px on a 920px tall viewport */
  background-color: #1c754e;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%; /* Fixed width for the dropdown items */
  box-sizing: border-box; /* Ensure padding is included in the width */
}

/*hide the items when the select box is closed:*/
.select-hide2 {
  display: none;
}

.select-items2 div:hover, .same-as-selected2 {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- BOTTOM CONTROLS APPEARENCE SETTINGS ------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.controls-container {
    display: flex;
    flex-wrap: nowrap;           /* var: wrap → hold alt på én række, aldrig ombrudt */
    align-items: center;
    gap: 1.2vh 0.8vw;
    width: 100%;                 /* spænder over grafens bredde (som slideren/datoerne) */
    margin-top: 1.5vh;
}
.controls-group { display: flex; align-items: center; gap: 0.8vw; min-width: 0; }   /* min-width:0 → må krympe i stedet for at ombryde */
.controls-group--search { flex: 1 1 auto; min-width: 0; }   /* søgegruppen fylder resten → rækken når helt ud */

.chartButton, .chartStockPickBox { margin: 0; }   /* afstand styres nu af gap på grupperne */

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

input[type="date"].form_control_container__time__input {
    background-color: #1c754e;
    padding: 1.08696vh; /* ~10px on a 920px tall viewport */
    font-family: var(--tp-font-sans);
    color: #ffffff;
    font-size: 1.95652vh; /* ~18px on a 920px tall viewport */
    border: none;
    outline: none;
    border-radius: 0.54348vh; /* ~5px on a 920px tall viewport */
}

/* If the calendar icon is also styled, keep this part */
input[type="date"].form_control_container__time__input::-webkit-calendar-picker-indicator {
    background-color: #ffffff;
    padding: 0.54348vh; /* ~5px on a 920px tall viewport */
    cursor: pointer;
    border-radius: 0.32609vh; /* ~3px on a 920px tall viewport */
}

.chartTitel {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0 0 14px 0;
    padding: 3vh 0 0 0;
    border-top: 2px solid #d9d9d9;   /* tynd linje over — som sektions-overskrifterne / billede 5 */
    font-family: var(--tp-font-sans);
    font-weight: 700;
    font-size: 2.9vh;
    text-align: left;
    color: #111;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ TABLE SETTINGS ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.table-container {
  margin: auto;
  max-width: 62.5vw; /* ~1200px on a 1920px wide viewport */
  min-height: 100vh;
  overflow: scroll;
  width: 100%;
  margin-top: 10%;
  margin-bottom: 10%;
}
table {
  border-collapse: collapse;
  width: 100%;
}
thead tr {
  border-bottom: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
  border-top: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
  height: 0.1087vh; /* ~1px on a 920px tall viewport */
}
th {
  font-weight: bold;
  height: inherit;
  padding: 0;
}
th:not(:first-of-type) {
  border-left: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
}
th button {
  background-color: #eee;
  border: none;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 100%;
  margin: 0;
  min-width: max-content;
  padding: 0.35rem 0.4rem;
  position: relative;
  text-align: left;
  width: 100%;
}

th button::after {
  position: absolute;
  right: 0.5rem;
}

tbody tr {
  border-bottom: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
}
td {
  padding: 0.5rem 1rem;
  text-align: left;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- SCREENING TABLE SELECT SETTINGS ----------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.screeningCustom-Select {
    width: 100%;
    font-family: var(--tp-font-sans);
    position: relative;
    margin-bottom: 1%;
    margin-top: 1%;
  }

.screeningSelect-Box {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.54348vh 2.08333vw 0.54348vh 0.52083vw;
    border-bottom: 2px solid #d9d9d9;              /* was black → grey */
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(20px, 3vh, 29px);             /* was 4.34782vh → matches step titles */
    color: #111;                                   /* was #000000 */
    text-transform: uppercase;                     /* NEW */
    letter-spacing: .01em;                         /* NEW */
    font-family: var(--tp-font-sans);      /* NEW */
    text-align: left;                              /* NEW (ensure left) */
  }

.screeningSelect-Box::after {
    content: "+";                                  /* was "▶" */
    position: absolute;
    right: 0.52083vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(22px, 3.4vh, 32px);           /* was 3.26087vh */
    color: #111;                                   /* was #000000 */
    width: 2.08333vw;
    height: 4.34783vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tp-font-sans);
}

.screeningSelect-Box.expanded::after {
    content: "\2212";                              /* minus sign, was "▼" */
}

.screeningOptions-Container {
	visibility: hidden;
	max-height: 0;
    width: 100%;
    transition: visibility 0.3s, max-height 0.3s ease-out;
    border-top: none;
    z-index: 2;
    background: #F5F5F5;
    overflow-y: hidden; /* Add scroll */
    padding: 0.54348vh; /* ~5px on a 920px tall viewport */
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.screeningOptions-Container.expanded {
	visibility: visible;
	max-height: 54.34783vh;
	overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: rgba(255,255,255,.95);
    border-radius: 1.30435vh;
    box-shadow: 0 0 2.4vh rgba(0,0,0,.08), 0 .9vh 1.6vw rgba(0,0,0,.16);
    padding: 2.6vh 1vw;            /* var 1.4vh → lidt højere box */
  }

.screeningOption-Item {
    padding: 0.54348vh 0.52083vw;
    color: #fff;
    margin: 0.21739vh;
    flex: 0 0 calc(20% - 0.43478vh);
    cursor: pointer;
    background: #1c754e;
    border-radius: 0.54348vh;
  }

.screeningOption-Item.selected {
    font-weight: bold;
    background: #145536;
  }

.screeningOption-Item:hover {
    background-color: #14553680;
  }

.green-heading {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.54348vh 2.08333vw 0.54348vh 0.52083vw;
    border-bottom: 2px solid #d9d9d9;              /* was black → grey */
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(20px, 3vh, 29px);             /* was 4.34783vh */
    color: #111;                                   /* was #000000 */
    text-align: left;
    margin-bottom: 2.17391vh;
    text-transform: uppercase;                     /* NEW */
    letter-spacing: .01em;                         /* NEW */
    font-family: var(--tp-font-sans);      /* NEW */
}
  
/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- STYLE FOR SCREENING TABLE INPUT BOX ------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.screeningTableInputBox {
  width: 75%;
  box-sizing: border-box;
  border: 0.21739vh solid #ccc; /* ~2px on a 920px tall viewport */
  border-radius: 0.32609vh; /* ~3px on a 920px tall viewport */
  font-size: 1.30435vh; /* Smaller input text - ~12px on a 920px tall viewport */
  background-color: white;
  background-size: 3.26087vh 1.5625vh; /* ~30px on a 920px tall viewport and a 1920px wide viewport */
  background-position: 0.1087vh center; /* ~1px on a 920px tall viewport */
  background-repeat: no-repeat;
  padding: 0.43478vh 0.3125vw; /* ~4px on a 920px tall viewport and 6px on a 1920px wide viewport */
  transition: width 0.4s ease-in-out;
  display: block; /* Ensures it's a block element */
  margin: 0 auto; /* Center the input box */
}

.screeningTableInputBox:focus {
  width: 75%; /* Ensure the width remains the same on focus */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------- STYLE FOR SCREENING TABLE FOCUS BUTTON -----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
/* Basic button styles */
.focus-button {
  background-color: #1c754e;
  color: white; /* White text */
  font-size: 1.30435vh; /* Font size - ~16px on a 920px tall viewport */
  border-radius: 0.54348vh; /* Rounded corners - ~5px on a 920px tall viewport */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition for focus state */
  margin: 0 auto; /* Center horizontally */
  margin-left: 0.31vw !important;
  width: 10%;
  text-align: center;
}

/* Button hover state */
.focus-button:hover {
  background-color: #145536; /* Darker blue on hover */
}

/* Button focus state */
.focus-button:focus {
  background-color: #145536; /* Slightly different blue background */
}

.logo4 {
  /* Adjust the size and margin of the logo as needed */
  width: 1.04167vw; /* ~40px on a 1920px wide viewport */
  height: 2.17391vh; /* ~40px on a 920px tall viewport */
  margin: 0 auto; /* Center horizontally */
  position: relative;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- STYLE FOR UP AND DOWN SORT ARROWS -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.sort-up, .sort-down {
    margin: 0;
    padding: 0.3vh; /* ~5px on a 920px tall viewport */
    border: none;
    background-color: inherit;
    color: white;
    cursor: pointer;
    font-size: 1.2vh;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------- SECTOR SELECT SETTINGS -------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.sectorCustom-Select {
    width: 100%;
    min-width: 20.83333vw; /* ~400px on a 1920px wide viewport */
    font-family: var(--tp-font-sans);
    position: relative;
    margin-bottom: 1%;
    margin-top: 1%;
  }

.sectorSelect-Box {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.54348vh 0.52083vw; /* ~5px on a 920px tall viewport and 10px on a 1920px wide viewport */
    padding-left: 5%;
    cursor: pointer;
    font-weight: bold; /* Make text bold */
  	font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
  }

.sectorSelect-Box::after {
    content: "+";
    position: absolute;
    left: 2.5%;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold; /* Make text bold */
  	font-size: 4.34783vh; /* ~40px on a 920px tall viewport */
  }

.sectorSelect-Box.expanded::after {
    content: "-";
    font-size: 1.30435vh; /* ~12px on a 920px tall viewport */
  }

.sectorOptions-Container {
	visibility: hidden;
	max-height: 0;
    width: 100%;
    transition: visibility 0.3s, max-height 0.3s ease-out;
    border-top: none;
    z-index: 2;
    background-color: #1c754e;
    overflow-y: hidden; /* Add scroll */
    padding: 0.54348vh; /* ~5px on a 920px tall viewport */
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.sectorOptions-Container.expanded {
	visibility: visible;
	max-height: 54.34783vh; /* ~500px on a 920px tall viewport */
	overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.sectorOption-Item {
    padding: 0.54348vh 0.52083vw; /* ~5px on a 920px tall viewport and 10px on a 1920px wide viewport */
    color: #F5F5F5;
    margin: 0.21739vh; /* ~2px on a 920px tall viewport */
    flex: 0 0 calc(20% - 0.43478vh); /* Adjust the width for 3 items per row - ~4px on a 920px tall viewport */
    cursor: pointer;
    background: #1c754e;
    border-radius: 0.54348vh; /* ~5px on a 920px tall viewport */
    border: 0.21739vh solid #fff; /* ~2px on a 920px tall viewport */
    font-size: 1.30435vh; /* ~12px on a 920px tall viewport */
  }

.sectorOption-Item.selected {
    font-weight: bold;
    background: #145536;
  }

.sectorOption-Item:hover {
    background-color: #14553680;
  }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- SCREENING TABLE APPEARENCE SETTINGS -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.screeningTableContainer{
  width: 60%;
  max-width: 60%;
  overflow-x: auto;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 2.17391vh; /* ~20px on a 920px tall viewport */
}

h1 {
margin-top: 0;
text-align: center;
}

.screeningTableInput-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.screeningTableStyle {
  font-family: var(--tp-font-sans);
  border-collapse: collapse;
  width: 100%;
}

.screeningTableStyle th {
  border: 0.1087vh solid #ddd;
  font-size: 1.52174vh;
  padding: 0.65vh 0.31vw;
}
.screeningTableStyle td {
  border: 0.1087vh solid #ddd;
  font-size: 1.30435vh;
  padding: 0.5vh 0.42vw;
}

.screeningTableStyle tr:nth-child(even){background-color: #BBBB;}

.screeningTableStyle tr:hover {background-color: #ddd;}

.screeningTableStyle th {
  padding-top: 1.30435vh; /* ~12px on a 920px tall viewport */
  padding-bottom: 1.30435vh; /* ~12px on a 920px tall viewport */
  text-align: left;
  background-color: #1c754e;
  color: white;
}


#rows,
#columns {
padding: 1.08696vh; /* ~10px on a 920px tall viewport */
font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
margin-right: 0.52083vw; /* ~10px on a 1920px wide viewport */
border-radius: 0.54348vh; /* ~5px on a 920px tall viewport */
border: 0.1087vh solid #ccc; /* ~1px on a 920px tall viewport */
}

#rows:focus,
#columns:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 0.1087vh 0.1087vh rgba(0,0,0,.075), 0 0 0.86957vh rgba(102,175,233,.6); /* ~1px and 8px on a 920px tall viewport */
box-shadow: inset 0 0.1087vh 0.1087vh rgba(0,0,0,.075), 0 0 0.86957vh rgba(102,175,233,.6); /* ~1px and 8px on a 920px tall viewport */
}

.screeningTableButton {
padding: 1.08696vh 1.04167vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
cursor: pointer;
background-color: #1c754e;
color: white;
border: none;
border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
}

.screeningTableButton:hover {
opacity: 0.8;
}

table {
  border-collapse: collapse;
  width: 100%;
}
.screeningTableHeader-input {
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  border: none;
  outline: none;
  text-transform: uppercase;
}

#screeningTable{
  margin-top: 3.26087vh; /* ~30px on a 920px tall viewport */
}

th, td {
  border: 0.1087vh solid black; /* ~1px on a 920px tall viewport */
  padding: 0.86957vh; /* ~8px on a 920px tall viewport */
  text-align: left;
}

.screenTableEditable-cell {
  background-color: #f2f2f2;
  outline: none
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

.screeningTableStyle td {
  color: black;
}

.screeningTableStyle td a {
  color: black;
  text-decoration: underline; /* Optional: to make links visible */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- SCREENING TABLE APPEARENCE SETTINGS -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Containeren scroller ikke længere selv — det gør scroll-området indeni — så overskrift,
   Update-knap og sektor-vælger står stille mens kun tabellen kører sidelæns. */
.screeningTableContainer { overflow: visible; }

/* Tabellens egen top-margin fjernes; kortet nedenfor styrer nu afstanden. */
#screeningTable { margin-top: 0; }

/* ---- Det hvide "kort" der pakker tabellen (login-container-look: afrundet + blød fade) --------- */
.screenerPanel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2.17391vh;
    padding: 0.7vh 0.42vw;                      /* tynd hvid ramme rundt om tabellen (jf. billede 8) */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.30435vh;                   /* samme radius som .login-container */
    /* blød fade hele vejen rundt, en anelse kraftigere nedenunder så det virker "løftet" */
    box-shadow: 0 0 2.4vh rgba(0, 0, 0, 0.08),
                0 0.9vh 1.6vw rgba(0, 0, 0, 0.16);
}

/* ---- Fælles look for begge scrollbars (top + bund): grøn, i sidens stil --------------------- */
.screenerScrollbar-top,
.screenerTable-scroll {
    scrollbar-width: thin;                      /* Firefox */
    scrollbar-color: #145536 #dfe5e2;           /* thumb  track (Firefox) */
}
.screenerScrollbar-top::-webkit-scrollbar,
.screenerTable-scroll::-webkit-scrollbar {
    height: 1.15vh;                             /* tykkelse på den vandrette bar */
}
.screenerScrollbar-top::-webkit-scrollbar-track,
.screenerTable-scroll::-webkit-scrollbar-track {
    background: #dfe5e2;
    border-radius: 1vh;
}
.screenerScrollbar-top::-webkit-scrollbar-thumb,
.screenerTable-scroll::-webkit-scrollbar-thumb {
    background: #1c754e;
    border-radius: 1vh;
    border: 0.2vh solid #dfe5e2;                /* lille indryk så thumb'en læses som en pille */
}
.screenerScrollbar-top::-webkit-scrollbar-thumb:hover,
.screenerTable-scroll::-webkit-scrollbar-thumb:hover {
    background: #145536;
}

/* ---- Top-scrollbar-striben (det lille afrundede felt lige over headerne) ----------------------- */
.screenerScrollbar-top {
    width: 100%;
    height: 1.4vh;                              /* plads til at vise scrollbaren */
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 0.5vh;
    /* JS skjuler striben når tabellen ikke er bred nok til at scrolle */
}
.screenerScrollbar-top-spacer {
    height: 0.1vh;                              /* usynlig; det er dens BREDDE (sat af JS) der driver scroll */
}

/* ---- Det ene element der scroller tabellen sidelæns -------------------------------------------- */
.screenerTable-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;          /* blød momentum-scroll på touch */
}

/* ---- Loader-felt ------------------------------------------------------------------------------- */
/* Skjult indtil JS sætter kortet i en loading-tilstand. */
.screenerLoader-panel {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* HENTNING (Create / Update): loaderen sidder UNDER kolonne-headerne og strækker kortet ned,
   så du får den høje "venter"-boks fra din skitse. */
.screenerPanel.is-loading .screenerLoader-panel {
    display: flex;
    position: relative;
    min-height: 32vh;
}

/* SORTERING (klient-side): loaderen lægger sig som et blødt slør OVER tabellen, så rækkerne ikke
   hopper op og ned ved hvert klik. */
.screenerPanel.is-sorting .screenerLoader-panel {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 1.30435vh;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------- SCREENER TABLE - SHORT-WRAPPER, DOUDBLE SCROLLBAR & LOADER-FIELD -----------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
.screeningTableContainer { overflow: visible; }

/* Tabellens egen top-margin fjernes; kortet nedenfor styrer nu afstanden. */
#screeningTable { margin-top: 0; }

/* ---- Det hvide "kort" der pakker tabellen (login-container-look: afrundet + blød fade) --------- */
.screenerPanel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2.17391vh;
    margin-bottom: 2vh;
    padding: 0.7vh 0;                            /* tynd hvid ramme foroven/forneden; siderne flugter */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.30435vh;                   /* samme radius som .login-container */
    box-shadow: 0 0 2.4vh rgba(0, 0, 0, 0.08),
                0 0.9vh 1.6vw rgba(0, 0, 0, 0.16);
}

/* ---- Scroll-containeren: native scrollbar SKJULES helt (vi tegner vores egen) --------------- */
.screenerTable-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;          /* momentum på touch */
    scrollbar-width: none;                       /* Firefox: skjul native */
}
.screenerTable-scroll::-webkit-scrollbar {
    display: none;                               /* WebKit: skjul native */
}

/* ---- Vores egen bjælke (identisk i top og bund, ALTID synlig og samme højde) ---------------- */
/* En almindelig <div> vi selv farver → hverken OS eller browser kan skjule den eller ændre dens
   look. Top og bund bruger præcis samme regel, så de er identiske (jf. billede 1). */
.screenerScrollbar {
    position: relative;
    width: auto;
    height: 1.1vh;                              /* bjælkens tykkelse — samme top og bund */
    margin: 0.45vh 0.5vw;                       /* lille indryk så den ikke rammer de runde hjørner */
    box-sizing: border-box;
    background: #dfe5e2;                         /* track (den lyse rende) */
    border-radius: 1vh;
    /* Bemærk: bliver ALDRIG display:none → pladsen bevares selv uden noget at scrolle (billede 4-fix) */
}

/* Selve "gribe-klodsen" — altid samme grønne look */
.screenerScrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;                                /* JS sætter den rigtige bredde; fuld når intet skal scrolles */
    background: #1c754e;                         /* den mørkegrønne — samme i alle tilstande */
    border-radius: 1vh;
    cursor: pointer;
}
.screenerScrollbar-thumb:hover,
.screenerScrollbar-thumb.dragging {
    background: #145536;                         /* en anelse mørkere ved hover/træk = lidt feedback */
}

/* ---- Loader-felt ------------------------------------------------------------------------------- */
/* Skjult indtil JS sætter kortet i en loading-tilstand. */
.screenerLoader-panel {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* HENTNING (Create / Update): loaderen sidder UNDER kolonne-headerne og strækker kortet ned,
   så du får den høje "venter"-boks fra din skitse. */
.screenerPanel.is-loading .screenerLoader-panel {
    display: flex;
    position: relative;
    min-height: 32vh;
}

/* SORTERING (klient-side): loaderen lægger sig som et blødt slør OVER tabellen, så rækkerne ikke
   hopper op og ned ved hvert klik. */
.screenerPanel.is-sorting .screenerLoader-panel {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 1.30435vh;
}

.screenerPanel .screener-error{
  padding: 4vh 1vw;
  text-align: center;
  color: #999;
  font-family: var(--tp-font-sans);
  font-size: 1.8vh;
}
.screenerPanel.is-error .screenerTable-scroll,
.screenerPanel.is-error .screenerScrollbar{ display: none; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------- SCREENER GUIDE - EDITORIAL TEXT BLOCKS (NEW, SCOPED UNDER .TPG) ------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* intro lead / page title (no stripe — this is the hero) */
.tpg .tpLead{padding-bottom:3vh;margin-bottom:.5vh;border-bottom:2px solid #d9d9d9;}
.tpg .tpLead-title{font-family:var(--tp-font-sans);font-size:clamp(26px,4vh,40px);font-weight:700;line-height:1.12;color:#111;margin:0 0 1.6vh 0;text-align:left;letter-spacing:.005em;}
.tpg .tpLead-body{font-size:2vh;line-height:1.72;color:#1e1e1e;margin:0;}

/* eyebrow label ( | STEP 1 | , | WHAT YOU CAN SCREEN FOR | ) */
.tpg .tpMini-label,
.tpg .tpStep-eyebrow{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:clamp(14px,2.1vh,20px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#145536;line-height:1;padding:1px 11px;border-left:2px solid #145536;border-right:2px solid #145536;margin-bottom:1.6vh;}

/* "what you can screen for" block: green stripe hugs the text, black bold lead-ins */
.tpg .tpMini{position:relative;padding:3vh 0 1vh 1vw;}
.tpg .tpMini::before{content:"";position:absolute;left:0;top:3vh;bottom:1vh;width:4px;background:#1c754e;border-radius:2px;}
.tpg .tpMetrics{margin:.4vh 0 0 0;}
.tpg .tpMetrics-row{font-size:2vh;line-height:1.55;color:#1e1e1e;margin:0 0 .9vh 0;}
.tpg .tpMetrics-row b{color:#111;font-weight:700;}

/* a numbered step: green stripe hugs the text + grey divider, black bold sub lead-ins */
.tpg .tpStep{position:relative;padding:3.4vh 0 3.4vh 1vw;border-bottom:2px solid #d9d9d9;}
.tpg .tpStep:last-of-type{border-bottom:none;}
.tpg .tpStep::before{content:"";position:absolute;left:0;top:3.4vh;bottom:3.4vh;width:4px;background:#1c754e;border-radius:2px;}
.tpg .tpStep-title{font-family:var(--tp-font-sans);font-size:clamp(20px,3vh,29px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.18;color:#111;margin:0 0 1.5vh 0;}
.tpg .tpStep-body{font-size:2vh;line-height:1.72;color:#1e1e1e;margin:0;}
.tpg .tpStep-body + .tpStep-body{margin-top:1.4vh;}
.tpg .tpStep-sub{font-size:2vh;line-height:1.6;color:#1e1e1e;margin:1.4vh 0 0 0;}
.tpg .tpStep-sub + .tpStep-body{margin-top:1.4vh;}
.tpg .tpStep-sub b{color:#111;font-weight:700;}

/* lead paragraph beside a panel (short block — border-left stripe already hugs it) */
.tpg .tpPanelLead{font-size:2vh;line-height:1.72;color:#1e1e1e;margin:1.6vh 0 .4vh 0;padding:.4vh 0 .4vh .9vw;border-left:4px solid #1c754e;}
.tpg .tpPanelLead b{color:#145536;font-weight:700;}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------- SCREENER HEADER INFO ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
/* the "i" inside each green header cell */
.screenerInfo-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;min-width:18px;margin:0 0 0 5px;padding:0;vertical-align:middle;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.75);
    background:rgba(255,255,255,.14);
    color:#fff;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
    font-size:12px;line-height:1;cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.screenerInfo-btn:hover,
.screenerInfo-btn:focus{background:#fff;color:#145536;outline:none;}

/* the pop-out description card */
.screenerInfo-popup{
    position:fixed;z-index:10001;display:none;
    min-width:220px;max-width:320px;width:max-content;
    background:#fff;border-radius:10px;border-top:4px solid #1c754e;
    box-shadow:0 12px 36px rgba(0,0,0,.22);
    padding:13px 16px 15px;
    font-family:var(--tp-font-sans);color:#222;text-align:left;
}
.screenerInfo-popup.open{display:block;}
.screenerInfo-close{
    position:absolute;top:5px;right:9px;background:none;border:none;
    font-size:19px;line-height:1;color:#9a9a9a;cursor:pointer;padding:2px;
}
.screenerInfo-close:hover{color:#333;}
.screenerInfo-title{font-weight:700;font-size:16px;color:#145536;margin:0 20px 0 0;line-height:1.2;}
.screenerInfo-subtitle{font-size:12.5px;font-weight:700;color:#1c754e;margin-top:9px;}
.screenerInfo-text{font-size:13.5px;line-height:1.55;color:#222;margin:3px 0 0;}
.screenerInfo-loading{font-size:13px;color:#888;}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ FOOTER SETTINGS -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.footer {
    background: linear-gradient(to bottom, #1c754e, #145536);
    color: white;
    padding: 2.17391vh; /* ~20px on a 920px tall viewport */
    font-family: var(--tp-font-sans);
}

.footer-columns {
    display: flex;
    max-width: 80%;
    width: 80%;
    margin: 0 auto; /* Centers the container horizontally */
    align-items: flex-start; /* Aligns all columns at the top */
}

.column1 {
    flex: 1;
    padding: 0 0.52083vw; /* ~10px on a 1920px wide viewport */
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    align-items: flex-start; /* Aligns content to the left */
    min-height: 200px; /* Ensures consistent minimum height across columns */
}

.column2 {
    flex: 1;
    padding: 0 0.78125vw; /* ~15px on a 1920px wide viewport */
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.95652vh; /* ~18px on a 920px tall viewport */
    margin-bottom: 1.08696vh; /* ~10px on a 920px tall viewport */
}

h4 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
    margin-top: 1.63044vh; /* ~15px on a 920px tall viewport */
    margin-bottom: 0.54348vh; /* ~5px on a 920px tall viewport */
}

p {
    font-size: 1.52174vh; /* ~14px on a 920px tall viewport */
    margin: 0.54348vh 0; /* ~5px on a 920px tall viewport */
}

.description {
    text-align: justify;
}

.secondary {
    color: #B0B0B0;
    font-size: 1.30435vh; /* ~12px on a 920px tall viewport */
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 0.54348vh; /* ~5px on a 920px tall viewport */
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 80%;
    width: 80%;
    margin: 0 auto; /* Centers the container horizontally */
    margin-top: 4.34783vh; /* ~40px on a 920px tall viewport */
}

.social-media {
    display: flex;
    justify-content: center;
    gap: 1.63044vh; /* ~15px on a 920px tall viewport */
    align-items: center;
}

/* Payment Methods Header */
.footer-bottom h2 {
    font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.payment-methods {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.52083vw; /* ~10px on a 1920px wide viewport */
    flex-wrap: wrap;
}

.payment-methods p {
    text-transform: uppercase;
    font-size: 1.52173vh; /* ~14px on a 920px tall viewport */
    margin: 0.54348vh 0; /* ~5px on a 920px tall viewport */
}

.logo2 {
    width: 2.60417vw; /* ~50px on a 1920px wide viewport */
    height: auto;
}

.logo3 {
    width: 1.5625vw; /* ~30px on a 1920px wide viewport */
    height: auto;
}

.payment-icon {
    width: 2.08333vw; /* ~40px on a 1920px wide viewport */
    height: 3.26087vh; /* ~30px on a 920px tall viewport */
    margin: 0 0.54348vh; /* ~5px on a 920px tall viewport */
    filter: grayscale(100%);
}

/* socialMediaContainer styling (default state) */
.socialMediaContainer {
    width: 2.60417vw; /* ~50px on a 1920px wide viewport */
    height: 5.43478vh; /* ~50px on a 920px tall viewport */
    background: linear-gradient(to bottom, #145536, #1c754e);
    border-radius: 1.08696vh; /* ~10px on a 920px tall viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Hover state */
.socialMediaContainer:hover {
    background: #145536;
}

/* Specific styling for disclaimer button */
#disclaimerButton {
    color: white;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--tp-font-sans);
    font-size: 1.52174vh; /* Matches p tag size for consistency */
    font-weight: normal;
    border: none;
    outline: none;
    padding: 0.5em 0; /* Adds vertical spacing instead of offset */
    width: 100%; /* Ensures it takes full column width */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ BACK TO TOP BUTTON SETTINGS -----------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

#backToTop {
    position: fixed;
    bottom: 2.17391vh; /* ~20px on a 920px tall viewport */
    left: 1.04167vw; /* ~20px on a 1920px wide viewport */
    z-index: 1000;
    display: none;
    background-color: #1c754e;
    color: white;
    border: none;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    padding: 1.08696vh 1.04166vw; /* ~10px on a 920px tall viewport & 20px on a 1920px wide viewport */
    font-family: var(--tp-font-sans);
    font-weight: bold;
    font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#backToTop:hover {
    background-color: #145536;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- DISCLAIMER STYLE -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Button Styling */
#disclaimerButton {
    color: white;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--tp-font-sans);
    font-size: 1.73913vh; /* Reasonable default to match body text - ~16px on a 920px tall viewport */
    font-weight: normal; /* Matches typical non-bold text */
    border: none; /* Removes any default border */
    outline: none; /* Removes the focus outline */
    top: -5.43478vh; /* ~50px on a 920px tall viewport */
}

#disclaimerButton:hover {
    outline: none; /* Removes the default outline */
    text-decoration: underline;
}

/* Popup Styling */
#disclaimerPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 0.1087vh solid #ccc; /* Light gray border for a paper edge - ~1px on a 920px tall viewport */
    box-shadow: 0 0.43478vh 1.30435vh rgba(0,0,0,0.15); /* Slightly stronger shadow for depth - ~4px & 12px on a 920px tall viewport */
    z-index: 1000;
    padding: 4.34782vh 2.60417vw; /* Generous padding for document margins - ~40px on a 920px tall viewport & 50px on a 1920px wide viewport */
    width: 60%; /* Narrower width for a document feel */
    max-height: 80%; /* Limits height to fit screens */
    overflow-y: auto; /* Scrollable if content overflows */
    font-family: var(--tp-font-sans);
    color: black; /* Standard black text */
    line-height: 1.8; /* Increased for better readability */
}

/* Header Styling */
#disclaimerHeader {
    text-align: center;
    margin-bottom: 3.26087vh; /* ~30px on a 920px tall viewport */
}

#disclaimerHeader h1 {
    font-size: 3.04348vh; /* Prominent title - ~28px on a 920px tall viewport */
    font-weight: bold;
    margin-bottom: 1.08696vh; /* ~10px on a 920px tall viewport */
}

#disclaimerHeader p {
    font-size: 1.52174vh; /* Smaller for date or subtitle - ~14px on a 920px tall viewport */
    color: #555; /* Gray for less emphasis */
}

/* Paragraph Styling */
#disclaimerPopup p {
    font-size: 1.73913vh; /* Readable text size - ~16px on a 920px tall viewport */
    text-align: justify; /* Formal, justified alignment */
    margin-bottom: 2.17391vh; /* Spacing between paragraphs - ~20px on a 920px tall viewport */
    line-height: 1.8; /* Matches the popup's line height */
}

/* List Styling */
#disclaimerPopup ul {
    font-size: 1.73913vh; /* Consistent with paragraphs - ~16px on a 920px tall viewport */
    margin-bottom: 2.17391vh; /* Spacing after lists - ~20px on a 920px tall viewport */
    padding-left: 1.5625vw; /* Indentation for clarity - ~30px on a 1920px wide viewport */
    list-style-type: disc; /* Classic bullet points */
}

/* Footer Styling */
#disclaimerFooter {
    text-align: center;
    margin-top: 3.26087vh; /* ~30px on a 920px tall viewport */
    font-size: 1.30435vh; /* Smaller text for footer - ~12px on a 920px tall viewport */
    color: #777; /* Light gray for subtlety */
}

/* Close Button Styling */
#closeButton {
    position: absolute;
    top: 1.08696vh; /* ~10px on a 920px tall viewport */
    right: 0.52083vw; /* ~10px on a 1920px wide viewport */
    cursor: pointer;
    font-size: 1.73913; /* Smaller to be unobtrusive - ~16px on a 920px tall viewport */
    color: #666; /* Subtle gray */
}

#closeButton:hover {
    color: #333; /* Darker gray on hover */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- AD SIDE BAR STYLE ----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Left sidebar */
.left-sidebar {
  position: fixed;
  left: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000; /* Ensure above content but consider if header/footer need higher */
  overflow: hidden;
  margin-left: 1.04167vw; /* ~20px on a 1920px wide viewport */
}

/* Right sidebar */
.right-sidebar {
  position: fixed;
  right: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  margin-right: 1.04167vw; /* ~20px on a 1920px wide viewport */
}

/* Media query remains unchanged */
@media screen and (max-width: 768px) {
  .left-sidebar, .right-sidebar {
    display: none;
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------- STICKY AD SIDE BAR STYLE ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Sticky left sidebar */
.sticky-left-sidebar {
  position: fixed;
  left: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  height: 86.95652vh; /* ~800px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  margin-left: 1.04167vw; /* ~20px on a 1920px wide viewport */
}

/* Sticky right sidebar */
.sticky-right-sidebar {
  position: fixed;
  right: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  height: 86.95652vh; /* ~800px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  margin-right: 1.04167vw; /* ~20px on a 1920px wide viewport */
}

/* Media query to hide on small screens, matching the original */
@media screen and (max-width: 768px) {
  .sticky-left-sidebar, .sticky-right-sidebar {
    display: none;
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- STICKY AD HORIZONTAL BAR STYLE ---------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Sticky horizontal bar */
.sticky-horizontal-bar {
  position: fixed;
  left: 50%; /* Position left edge at center */
  transform: translateX(-50%); /* Shift left by half its width to center perfectly */
  width: 52.08333vw; /* Fixed width on desktop; adjust as needed - ~1000px on a 1920px wide viewport */
  height: 32.6087vh; /* Fixed height; adjust as needed for your content - ~300px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
}

/* Media query to scale width on phone screens (assuming phone as max-width: 768px, matching your existing query) */
@media screen and (max-width: 768px) {
  .sticky-horizontal-bar {
    width: 100%; /* Scale to full width on phone */
    left: 0; /* Align to left for full width */
    transform: none; /* Remove transform as it's full width */
    margin: 0; /* Remove any margins if needed */
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- HORIZONTAL AD BAR STYLE ---------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Simple horizontal bar */
.horizontal-bar {
  display: flex;
  justify-content: center;
  width: 57.29167vw; /* Full width by default - ~1100px on a 1920px wide viewport */
  height: 32.6087vh; /* Adjust height as needed - ~300px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  overflow: hidden;
  margin: 3vh auto 8vh auto;
}

/* Optional: Media query to adjust on smaller screens if desired */
@media screen and (max-width: 768px) {
  .horizontal-bar {
    height: 50px; /* Example: Smaller height on mobile */
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- VIDEO AD STYLE -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

#videoAdContainer {
	display: flex;
    width: 60%;
    height: 100%; /* Fill parent's height */
    margin: 6vh auto; /* Center it on the page - ~20px on a 1920px wide viewport */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    overflow: hidden;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------- LEFT & RIGHT TEXTBOX, VIDEO AD CONTAINER -----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.leftRightContainer {
    display: flex;
    flex-direction: row; /* For side-by-side layout */
    align-items: stretch; /* Stretch items to fill height */
    justify-content: center; /* Horizontally centers the content */
    gap: 1.04167vw; /* Adds space between text and video - ~20px on a 1920px wide viewport */
    width: 60%;
    height: 34.722%; /* Set fixed height instead of min-height for % to apply */
    margin: 5% auto 0 auto; /* Centers the container horizontally */
    margin-bottom: 10%;
}

.leftRightTextbox {
    width: calc(60% - 0.52083vw); /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    font-family: var(--tp-font-sans);
    color: #333;
    box-sizing: border-box; /* Ensures padding is included in width/height */
    overflow: auto; /* Handles content overflow if needed */
}

#videoAdContainerLeftRight {
    width: calc(40% - 0.52083vw);  /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    flex-shrink: 0; /* Prevents shrinking in flex layout */
    margin: 0; /* Remove auto margin to fit side-by-side */
}

#videoAdContainerLeftRight video {
    width: 100%;
    height: 100%;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------- LEFT & RIGHT TEXTBOX, VIDEO AD CONTAINER 2 ----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.leftRightContainer2 {
    display: flex;
    flex-direction: row; /* For side-by-side layout */
    align-items: stretch; /* Stretch items to fill height */
    justify-content: center; /* Horizontally centers the content */
    gap: 1.04167vw; /* Adds space between text and video - ~20px on a 1920px wide viewport */
    width: 80%;
    height: 34.722%; /* Set fixed height instead of min-height for % to apply */
    margin: 5% auto 0 auto; /* Centers the container horizontally */
    margin-bottom: 10%;
}

.leftRightTextbox2 {
    width: calc(50% - 0.52083vw); /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    font-family: var(--tp-font-sans);
    color: #333;
    box-sizing: border-box; /* Ensures padding is included in width/height */
    overflow: auto; /* Handles content overflow if needed */
}

#symbolPrompt .leftRightTextbox2 {
  overflow: visible;
}

#videoAdContainerLeftRight2 {
    width: calc(50% - 0.52083vw);  /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    flex-shrink: 0; /* Prevents shrinking in flex layout */
    margin: 0; /* Remove auto margin to fit side-by-side */
}

#videoAdContainerLeftRight2 video {
    width: 100%;
    height: 100%;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- HIDE AD STYLE ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Hide all ad containers for paying users */
body.ad-free .left-sidebar,
body.ad-free .right-sidebar,
body.ad-free .sticky-left-sidebar,
body.ad-free .sticky-right-sidebar,
body.ad-free .horizontal-bar,
body.ad-free .sticky-horizontal-bar,
body.ad-free #videoAdContainer,
body.ad-free #videoAdContainerLeftRight,
body.ad-free #videoAdContainerLeftRight2,
body.ad-free .leftRightContainer,
body.ad-free .co-video-ad {
    display: none !important;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------- POLICY PAGE -------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Fede etiketter i sort i stedet for sitets grønne <strong> */
.policy-page strong { color: #000; }

/* Gør links tydelige på den lyse politik-baggrund */
.policy-page a {
    color: #1b5e20;            /* mørkegrøn — skift til din præcise brand-farve */
    text-decoration: underline;
}
.policy-page a:hover { text-decoration: none; }

/* Indryk de punktopstillede lister */
.policy-page ul {
    margin: 0.5em 0;
    padding-left: 1.75em;
    list-style-type: disc;     /* sæt til 'none' hvis du helt vil undvære bullets */
}
.policy-page li { margin-bottom: 0.5em; }

/* Cookietabel (flyttet ud af HTML'en) */
.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95em;
}
.policy-table th, .policy-table td {
    border: 1px solid #ddd;
    padding: 0.6em 0.8em;
    text-align: left;
    vertical-align: top;
}
.policy-table th { background: #f5f5f5; font-weight: bold; color: #000; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- TEXT BOX CONTAINERS AND STYLES ---------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Main text container, centered and taking up 60% of viewport width */
.mainTextContainer {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin: 6vh auto; /* Centers horizontally, matches your margin specs */
    box-sizing: border-box;
}

/* Full-width textbox for main heading and intro paragraph */
.full-width-textbox {
    width: 100%;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    font-family: var(--tp-font-sans);
    color: #333;
    box-sizing: border-box;
    overflow: auto; /* Handles content overflow if needed */
}

/* Styling for feature list items */
.leftRightTextbox ul {
    padding-left: 2vw;
    margin: 0;
}

.leftRightTextbox li {
    margin-bottom: 1vh;
}

/* Responsive headings */
.mainTextContainer h1 {
    font-size: 3.2609vh; /* ~30px on a 920px tall viewport */
    margin-bottom: 1vh;
    color: #000000; /* Dark teal for emphasis, matches professional tone */
    text-align: left; /* Align h1 to the left */
}

.mainTextContainer h2 {
    font-size: 2.3913vh; /* ~22px on a 920px tall viewport */
    margin-top: 2vh;
    margin-bottom: 1vh;
    color: #000000;
    text-align: left; /* Align h2 to the left */
}

.mainTextContainer p, li {
    font-size: 1.9565vh; /* Matches body font size */
    line-height: 1.25;
}

/* Ensure text remains readable on smaller screens */
@media (max-width: 768px) {
    .header-container {
        width: 90%;
        margin: 3% auto 5% auto;
    }

    .leftRightTextbox {
        width: 100%; /* Full width on smaller screens */
    }

    .full-width-textbox {
        padding: 1vh 3vw;
    }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------- HARMONISING -------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.mainTextContainer h1:not(.tpLead-title):not(.chartTitel){
    color:#111; padding-bottom:1.4vh; margin-bottom:2.4vh; border-bottom:2px solid #d9d9d9;
}
#stockInfoContent .mainTextContainer h1:not(.chartTitel){
    border-bottom:none; padding-bottom:0; margin-bottom:1vh;
}
.mainTextContainer .full-width-textbox h2{
    color:#111; padding-top:3vh; margin-top:3.4vh; border-top:2px solid #d9d9d9;
}
.mainTextContainer .leftRightTextbox h2,
.mainTextContainer .leftRightTextbox2 h2{
    color:#111;
}
.mainTextContainer .leftRightTextbox,
.mainTextContainer .leftRightTextbox2{
    border-left:4px solid #1c754e; padding-left:1vw;
}
.mainTextContainer li strong{ color:#145536; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- TICKER SEARCH ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
/* Wrapper om et søge-input, så resultatlisten kan ligge absolut lige under feltet. */
.ticker-search-wrapper {
  position: relative;
  width: 100%;
}
.ticker-search-wrapper input {
  width: 100%;
  box-sizing: border-box;
}

/* Selve resultatlisten (skjult indtil JS viser den). */
.ticker-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 1vh);              /* luft mellem felt og liste (får den til at "springe ned") */
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-top: 0.4vh solid #1c754e;    /* grøn accent-kant, som sidens .screenerInfo-popup */
  border-radius: 1vh;                 /* samme runde look som .login-container / .screenerPanel */
  box-shadow: 0 0 2.4vh rgba(0,0,0,.08), 0 0.9vh 1.6vw rgba(0,0,0,.16);  /* sidens kort-skygge */
  max-height: 46vh;
  overflow: hidden auto;              /* klipper rækkerne pænt til de runde hjørner */
  font-family: var(--tp-font-sans);   /* samme font-stak som resten af siden */
}

/* Én række i listen. */
.ticker-search-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: clamp(8px, 1.4vh, 14px) clamp(10px, 1vw, 18px);   /* lidt luftigere */
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.15s ease;
}
.ticker-search-item:last-child { border-bottom: none; }

/* Hover + tastatur-markering: sidens grønne tone i stedet for grå. */
.ticker-search-item:hover,
.ticker-search-item.active {
  background-color: rgba(20, 85, 54, 0.07);
}

/* Ticker-symbolet: sidens grønne accent + fed, fast min-bredde så navnene flugter. */
.ticker-search-symbol {
  color: #145536;
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 6ch;
  font-size: clamp(13px, 1.9565vh, 18px);
}

/* Firmanavn: mørkt, fylder resten, forkortes med ellipsis hvis for langt. */
.ticker-search-name {
  color: #222;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(13px, 1.9565vh, 18px);
}

/* Land + børs: grå, højrestillet, lidt mindre. */
.ticker-search-meta {
  color: #8c8c8c;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 1vw;
  white-space: nowrap;
  font-size: clamp(11px, 1.6vh, 15px);
}

/* Besked-række (fx "accepter TOS" eller ingen resultater). */
.ticker-search-empty {
  padding: clamp(10px, 1.6vh, 18px);
  color: #8c8c8c;
  font-size: clamp(12px, 1.7vh, 16px);
  font-family: var(--tp-font-sans);
}

.chart-search-wrapper {
  display: inline-block;
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}
.chart-search-wrapper .chartStockPickBox {
  width: 100%;
  margin: 0;
}
@media (max-aspect-ratio: 7/6) {
  .chart-search-wrapper { width: auto; }   /* var: 100% → bliv i rækken (ikke fuld bredde/stak) */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------- CONTACT FORM STYLES ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

form {
     display: flex;
     flex-direction: column;
     gap: 1vh;
 }

 input, select, textarea {
     padding: 1vh 1vw;
     border: 1px solid #ccc;
     border-radius: 0.43478vh;
     font-family: var(--tp-font-sans);
     font-size: 1.9565vh;
     color: #333;
     background-color: #F5F5F5;
     box-sizing: border-box;
 }

 textarea {
     resize: vertical;
     min-height: 20vh;
 }

 button {
     padding: 1vh 2vw;
     background-color: #1c754e;
     color: #FFFFFF;
     border: none;
     border-radius: 0.43478vh;
     cursor: pointer;
     font-size: 1.9565vh;
 }

 button:hover {
     background-color: #145536;
 }

 .error {
     color: red;
     font-size: 1.5vh;
 }

 /* Success confirmation modal */
 .contactFormModal {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #FFFFFF;
     padding: 2vh 3vw;
     border-radius: 0.43478vh;
     box-shadow: 0 0.21739vh 0.43478vh rgba(0, 0, 0, 0.2);
     text-align: center;
     z-index: 1000;
 }

 .contactFormModal p {
     font-size: 2vh;
     color: #1A3C34;
 }

 .contactFormModal button {
     margin-top: 2vh;
 }

 .contactFormOverlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 999;
 }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------- FINANCIAL ENCYCLOPEDIA --------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Hvert emne er nu ren prosa i PolicyPage-stil (intet kort), med luft imellem. */
.encyclopedia-entry { margin: 0 0 4vh 0; }

/* Klikbar header (fjern browserens standard-trekant). Hele title+intro-området folder ud/ind. */
.encyclopedia-entry > summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.encyclopedia-entry > summary::-webkit-details-marker { display: none; }

/* Titel-række: fed overskrift + grå streg under (som PolicyPage), med +/- yderst til højre. */
.encyclopedia-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  font-family: var(--tp-font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 3vh;
  color: #111;
  padding-bottom: 1.4vh;
  border-bottom: 2px solid #d9d9d9;
}
.encyclopedia-title::after {
  content: "+";
  flex: 0 0 auto;
  font-size: clamp(22px, 3.4vh, 32px);
  line-height: 1;
  color: #111;
  transition: color 0.15s ease;
}
.encyclopedia-entry[open] .encyclopedia-title::after { content: "\2212"; }          /* minus når åben */
.encyclopedia-entry > summary:hover .encyclopedia-title::after { color: #145536; }  /* lille hover-hint */

/* Lille intro — altid synlig. Klippes til 3 linjer når sammenklappet, fuld når udfoldet. */
.encyclopedia-intro {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 1.6vh;
  font-size: clamp(15px, 2.1vh, 20px);
  line-height: 1.6;
  color: #1e1e1e;
}
.encyclopedia-entry[open] .encyclopedia-intro {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Brødtekst — vises når emnet foldes ud (samme prosa som PolicyPage). */
.encyclopedia-body p {
  font-size: clamp(15px, 1.9565vh, 19px);
  line-height: 1.72;
  color: #1e1e1e;
  margin: 1.6vh 0 0 0;
}

/* Skjul encyklopædi-annoncer for betalende (ad-free) brugere, ligesom sidens øvrige annoncer. */
body.ad-free .encyclopedia-ad { display: none !important; }
.encyclopedia-ad { margin: 1.5em 0; } 

/* Horisontal annonce: genbruger .horizontal-bar, men i fuld container-bredde så den flugter emnerne. */
.encyclopedia-ad.horizontal-bar { width: 100%; }

/* Video-annonce (billede 3): to halvdele — annonce-panel + video — så video-feltet "skrumper" ind. */
.encyclopedia-video-ad {
  display: flex;
  flex-direction: row;
  align-items: flex-start;         /* video beholder sit naturlige forhold */
  gap: 1.04167vw;
  width: 100%;
  margin: 4vh auto;
}
.encyclopedia-video-ad-text {
  flex: 1 1 auto;
  min-width: 0;                     /* lange ord sprænger ikke kolonnen */
  border-left: 4px solid #1c754e;   /* grøn streg som .leftRightTextbox2 / billede 3 */
  padding-left: 1vw;
}
.encyclopedia-video-ad-text .encyclopedia-entry { margin: 0; }   /* rækken styrer afstanden */
.encyclopedia-video-ad-video {
  flex: 0 0 calc(50% - 0.52083vw);
}
.encyclopedia-video-ad-video video {
  width: 100%;
  height: auto;                     /* naturligt 16:9 som About-siden */
  display: block;
  border-radius: 0.43478vh;         /* samme radius som sidens andre videoer */
}

/* Betalende (ad-free) brugere: skjul KUN videoen; emnet bliver stående i fuld bredde. */
body.ad-free .encyclopedia-video-ad-video { display: none !important; }
body.ad-free .encyclopedia-video-ad-text  { border-left: none; padding-left: 0; }

/* Smalle skærme: stak tekst over video. */
@media (max-aspect-ratio: 7/6) {
  .encyclopedia-video-ad { flex-direction: column; }
  .encyclopedia-video-ad-video { flex-basis: auto; width: 100%; }
}

#encyclopedia-content { position: relative; }
#encyclopedia-content.encyclopedia-loading { min-height: 40vh; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- STOCK INFO ---------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

#stockInfoContent{padding-bottom:6vh;}

/* JS-fyldte sektioner holdes i samme centrerede kolonne (ikke under ad-rails) */
#keyStatsSection,
#financialsSection,
#policySection,
#newsSection{width:60%;margin-left:auto;margin-right:auto;box-sizing:border-box;}

/* Stock-info-kolonnen: 60% er fint på desktop, men for smalt på telefon. Samme mønster som
   screener/login-kortene — gå til ~90% i portræt-båndet, med lidt margen til kort-skyggen.
   Desktop (bredere end 7/6) beholder 60%. */
@media (max-aspect-ratio: 7/6) {
  #keyStatsSection,
  #financialsSection,
  #policySection,
  #newsSection,
  #stockInfoContent .mainTextContainer,
  #stockInfoContent .chart-container { width: 90%; }
}

/* sektioner + overskrifter */
#stockInfoContent .sec{margin-top:3.261vh;}
#stockInfoContent .sec > h2{font-size:2.9vh;font-weight:700;color:#111;margin:0 0 1.522vh;padding-top:3vh;border-top:0.217vh solid #d9d9d9;}

/* kompakt firma-header (co-head) */
#stockInfoContent .co-head{border-left:0.435vh solid #1c754e;padding:.4vh 0 .4vh 0.833vw;margin-bottom:2.174vh;}
#stockInfoContent .co-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:1.087vh 0.521vw;margin:0 0 0.652vh;}
#stockInfoContent .full-width-textbox .co-title h1{font-size:3.4vh;font-weight:700;color:#111;margin:0;border:none;padding:0;}
#stockInfoContent .co-tag{font-family:Arial,sans-serif;font-size:1.25vh;font-weight:700;letter-spacing:.04em;background:#e7efe9;color:#145536;border-radius:0.543vh;padding:0.326vh 0.417vw;}
#stockInfoContent .co-facts{display:flex;flex-wrap:wrap;gap:0.652vh 1.25vw;font-size:1.85vh;color:#333;margin:0.435vh 0 0.870vh;}
#stockInfoContent .co-facts b{color:#145536;}
#stockInfoContent .co-desc{font-size:2vh;line-height:1.6;color:#333;max-width:80ch;margin:0;}
/* ==== Stock News bias tags — same pill shape as .co-tag, colour-coded ==== */
#stockInfoContent .news-tags{display:flex;flex-wrap:wrap;gap:0.4vh;margin:0.4vh 0 0.2vh;}
#stockInfoContent .news-tag{font-family:Arial,sans-serif;font-size:1.1vh;font-weight:700;letter-spacing:.04em;border-radius:0.543vh;padding:0.28vh 0.42vw;white-space:nowrap;}
#stockInfoContent .news-tag .nt-label{font-weight:600;opacity:.62;}
/* Political lean: blå (venstre) -> grå (center) -> rød (højre) */
#stockInfoContent .news-tag.lean-far-left  {background:#d3e0f2;color:#123a6b;}
#stockInfoContent .news-tag.lean-left      {background:#e5edf7;color:#1a4a86;}
#stockInfoContent .news-tag.lean-lean-left {background:#eef4fb;color:#24507f;}
#stockInfoContent .news-tag.lean-center    {background:#eceeef;color:#4a5157;}
#stockInfoContent .news-tag.lean-lean-right{background:#fdeeee;color:#9a3a30;}
#stockInfoContent .news-tag.lean-right     {background:#f7e6e6;color:#8a2626;}
#stockInfoContent .news-tag.lean-far-right {background:#f3d6d6;color:#6f1d1d;}

/* Company stance: for / imod / neutral */
#stockInfoContent .news-tag.stance-for-company    {background:#e7efe9;color:#145536;}
#stockInfoContent .news-tag.stance-against-company{background:#f7e6e6;color:#8a2626;}
#stockInfoContent .news-tag.stance-neutral        {background:#eceeef;color:#4a5157;}

/* Factuality: grøn (høj) -> rav (mixed) -> rød (lav) */
#stockInfoContent .news-tag.fact-very-high{background:#dcefe1;color:#145536;}
#stockInfoContent .news-tag.fact-high     {background:#e7efe9;color:#2c6b45;}
#stockInfoContent .news-tag.fact-mixed    {background:#f5ecd6;color:#8a6516;}
#stockInfoContent .news-tag.fact-low      {background:#fbe7dc;color:#9a4a1f;}
#stockInfoContent .news-tag.fact-very-low {background:#f7e6e6;color:#8a2626;}

/* header: firma-info til venstre, video-annonce til højre (skjules for ad-free via body.ad-free) */
#stockInfoContent .co-head::after{content:'';display:block;clear:both;}   /* så co-head omslutter floaten (grøn bjælke i fuld højde) */
#stockInfoContent .co-video-ad{float:right;width:44%;margin:0.4vh 0 1.2vh 1.5vw;border-radius:0.435vh;overflow:hidden;}
#stockInfoContent .co-video-ad video{width:100%;height:auto;display:block;border-radius:0.435vh;}
@media (max-aspect-ratio:7/6){
  #stockInfoContent .co-video-ad{float:none;width:100%;margin:0 0 1.5vh 0;}      /* mobil: video øverst i fuld bredde */
}

/* key statistics */
#stockInfoContent .kwrap{display:flex;gap:2.391vh 1.146vw;flex-wrap:wrap;}
#stockInfoContent .kstats{flex:1 1 520px;column-count:2;column-gap:1.354vw;}
#stockInfoContent .kstats .grp{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1.74vh;}
#stockInfoContent .kstats .grp b{display:block;color:#145536;font-size:1.65vh;margin:0 0 0.435vh;border-bottom:0.109vh solid #d9d9d9;padding-bottom:0.326vh;}
#stockInfoContent .kstats .row{display:flex;justify-content:space-between;font-size:1.8vh;padding:0.217vh 0;color:#333;}
#stockInfoContent .kstats .row span:last-child{font-weight:700;color:#111;}
#stockInfoContent .fin-controls{display:flex;flex-wrap:wrap;gap:0.652vh 0.521vw;margin:0 0 1.304vh;}
#stockInfoContent .fin-ctl{font-family:var(--tp-font-sans);font-size:1.55vh;color:#145536;background:#eef5f0;border:0.109vh solid #bcd6c6;border-radius:0.543vh;padding:0.435vh 0.6vw;cursor:pointer;}
#stockInfoContent .fin-ctl:hover{background:#e2efe7;}
#stockInfoContent .fin-note{font-family:Arial,sans-serif;font-size:1.4vh;color:#8a8a8a;margin:0.8vh 0 0;}

/* financial statement tabs + tabel (screener-look) */
#stockInfoContent .fin-tabs{display:flex;flex-wrap:wrap;gap:0.652vh 0.313vw;border-bottom:0.217vh solid #d9d9d9;}
#stockInfoContent .fin-tab{background:none;border:none;border-bottom:0.326vh solid transparent;margin-bottom:-0.217vh;padding:0.978vh 0.729vw;font-family:var(--tp-font-sans);font-size:1.95vh;color:#555;cursor:pointer;}
#stockInfoContent .fin-tab:hover{color:#145536;}
#stockInfoContent .fin-tab.active{color:#145536;font-weight:700;border-bottom-color:#1c754e;}
#stockInfoContent .fin-tablewrap{position:relative;margin-top:1.2vh;padding:0.7vh 0;background:rgba(255,255,255,0.95);border-radius:1.30435vh;overflow:hidden;box-shadow:0 0 2.4vh rgba(0,0,0,0.08), 0 0.9vh 1.6vw rgba(0,0,0,0.16);}
/* grøn scrollbar i BÅDE top og bund — altid synlig */
#stockInfoContent .fin-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#stockInfoContent .fin-scroll::-webkit-scrollbar{display:none;}
/* vores egen bjælke (identisk i top og bund, ALTID synlig) — samme værdier som .screenerScrollbar */
#stockInfoContent .fin-scrollbar{position:relative;width:auto;height:1.1vh;margin:0.45vh 0.5vw;box-sizing:border-box;background:#dfe5e2;border-radius:1vh;}
#stockInfoContent .fin-scrollbar-thumb{position:absolute;top:0;left:0;height:100%;width:100%;background:#1c754e;border-radius:1vh;cursor:pointer;}
#stockInfoContent .fin-scrollbar-thumb:hover,
#stockInfoContent .fin-scrollbar-thumb.dragging{background:#145536;}
#stockInfoContent table.fin{font-family:var(--tp-font-sans);border-collapse:collapse;width:100%;white-space:nowrap;}
#stockInfoContent table.fin thead th{border:0.109vh solid #ddd;background:#1c754e;color:#fff;font-weight:700;font-size:1.7vh;padding:1.304vh 0.31vw;text-align:right;}
#stockInfoContent table.fin thead th:first-child{text-align:left;position:sticky;left:0;z-index:3;}
#stockInfoContent table.fin td{border:0.109vh solid #ddd;color:#000;font-size:1.65vh;padding:0.5vh 0.42vw;text-align:right;}
#stockInfoContent table.fin tbody tr:nth-child(even) td{background:#cdcdcd;}
#stockInfoContent table.fin tbody tr:hover td{background:#ddd;}
#stockInfoContent table.fin tbody th.metric{position:sticky;left:0;z-index:2;border:0.109vh solid #ddd;background:#fff;color:#000;font-weight:400;font-size:1.65vh;padding:0.5vh 0.42vw;text-align:left;}
#stockInfoContent table.fin tbody tr:nth-child(even) th.metric{background:#cdcdcd;}
#stockInfoContent table.fin tbody tr:hover th.metric{background:#ddd;}
#stockInfoContent table.fin tr.strong th.metric,#stockInfoContent table.fin tr.strong td{font-weight:700;color:#000;}
#stockInfoContent table.fin tbody tr.sub th.metric{padding-left:calc(0.42vw + 1.5em);}   /* underposter rykkes ind */
#stockInfoContent table.fin td.neg{color:#c0392b;}
#stockInfoContent .fin-empty{font-family:Arial,sans-serif;font-size:1.8vh;color:#999;padding:2.826vh 0.625vw;text-align:center;}
#stockInfoContent .full-width-textbox.co-load-error .co-head{display:none;}

/* company policy cards (expandable) */
#stockInfoContent .policy-intro{font-family:Arial,sans-serif;font-size:1.55vh;color:#8a8a8a;margin:-0.435vh 0 1.304vh;}
#stockInfoContent .policy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.522vh 0.729vw;align-items:start;}
#stockInfoContent .policy-card{border:0.109vh solid #d9d9d9;border-left:0.435vh solid #1c754e;border-radius:0.652vh;background:#fff;overflow:hidden;}
#stockInfoContent .pc-head{padding:1.522vh 0.833vw;cursor:pointer;user-select:none;}
#stockInfoContent .pc-head .top{display:flex;justify-content:space-between;align-items:baseline;gap:1.087vh 0.521vw;}
#stockInfoContent .pc-head h3{margin:0;font-size:2vh;color:#145536;}
#stockInfoContent .pc-head .score{font-family:Arial,sans-serif;font-size:1.55vh;color:#888;white-space:nowrap;}
#stockInfoContent .bar{height:0.652vh;background:#e7efe9;border-radius:0.435vh;margin:0.870vh 0;overflow:hidden;}
#stockInfoContent .bar > i{display:block;height:100%;background:#1c754e;border-radius:0.435vh;}
#stockInfoContent .pc-hint{font-family:Arial,sans-serif;font-size:1.55vh;color:#145536;}
#stockInfoContent .pc-hint .arrow{display:inline-block;transition:transform .25s;}
#stockInfoContent .policy-card.open .pc-hint .arrow{transform:rotate(180deg);}
#stockInfoContent .pc-summary{list-style:disc;margin:0.978vh 0 0.217vh;padding-left:0.938vw;}
#stockInfoContent .pc-summary li{font-size:1.8vh;line-height:1.55;color:#555;margin-bottom:0.326vh;}
#stockInfoContent .policy-card.open .pc-summary{display:none;}
#stockInfoContent .pc-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
#stockInfoContent .policy-card.open .pc-body{max-height:300vh;}
#stockInfoContent .pt{padding:1.304vh 0.833vw;border-top:0.109vh solid #d9d9d9;}
#stockInfoContent .pt h4{margin:0 0 0.543vh;font-size:1.9vh;color:#145536;}
#stockInfoContent .pt p{margin:0;font-size:1.8vh;line-height:1.6;color:#444;}

/* news */
#stockInfoContent .news-item{border-top:0.109vh solid #d9d9d9;padding:1.304vh 0;}
#stockInfoContent .news-item:first-child{border-top:none;}
#stockInfoContent .news-item .meta{font-family:Arial,sans-serif;font-size:1.5vh;color:#8a8a8a;letter-spacing:.03em;}
#stockInfoContent .news-item h4{margin:0.326vh 0 0.435vh;font-size:2vh;color:#145536;}
#stockInfoContent .news-item h4 a{color:#145536;text-decoration:none;}
#stockInfoContent .news-item h4 a:hover{text-decoration:underline;}
#stockInfoContent .news-item p{margin:0;font-size:1.8vh;line-height:1.55;color:#444;}
/* ==== Load more articles-knap ==== */
#stockInfoContent .load-more-wrap{text-align:center;margin:2vh 0 0.8vh;}
#stockInfoContent .load-more-btn{
  display:inline-flex;align-items:center;gap:1vh;
  padding:1.4vh 2.4vw;font-family:Arial,sans-serif;font-size:1.9vh;font-weight:700;
  border:none;border-radius:1vh;cursor:pointer;
  background:#1c754e;color:#fff;transition:background .15s,transform .05s;
}
#stockInfoContent .load-more-btn:hover:not(:disabled){background:#145536;}
#stockInfoContent .load-more-btn:active:not(:disabled){transform:translateY(0.12vh);}
#stockInfoContent .load-more-btn:disabled{opacity:.6;cursor:default;}
#stockInfoContent .load-more-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4vh;height:2.4vh;border-radius:50%;
  background:rgba(255,255,255,.22);font-size:2.2vh;line-height:1;
}
/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- TOS AND AD-BLOCKER MODALS ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.tos-modal,
.adblock-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.tos-modal-content,
.adblock-modal-content {
    background: white;
    padding: 3.26087vh;
    max-width: 26.04167vw;
    border-radius: 1.08696vh;
    text-align: center;
    box-shadow: 0 0.43478vh 1.04167vw rgba(0, 0, 0, 0.3);
}

.tos-modal-content h2,
.adblock-modal-content h2 {
    margin-top: 0;
    color: #333;
}

.tos-modal-content p,
.adblock-modal-content p {
    margin: 2.17391vh 0;
    font-size: 1.1em;
    color: #555;
}

.modal-button {
    margin: 1.08696vh;
    padding: 1.30435vh 1.25vw;
    border: none;
    border-radius: 0.54348vh;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s;
}

.modal-button.accept {
    background: #1c754e;
    color: white;
}

.modal-button.accept:hover {
    background: #145536;
}

.modal-button.reject {
    background: #CC0000;
    color: white;
}

.modal-button.reject:hover {
    background: #A30000;
}

.modal-button.adblock {
    background: #007bff;
    color: white;
}

.modal-button:hover {
    transform: scale(1.05);
}

.tos-modal-warning-text {
    font-size: 0.9em;
    color: #666;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- REGISTER AND LOGIN STYLES ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.login-container {
    max-width: 52.08333vw;
    height: 92.3913vh;
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 1.5625vw;
    background: rgba(255,255,255,0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0,0,0,0.3);
    color: #222;
}

.login-container h1 {
    text-align: center;
    margin-bottom: 3.26087vh;
}

.login-container2 {
    max-width: 52.08333vw;
    height: 92.3913vh;
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 1.5625vw;
    background: rgba(255,255,255,0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0,0,0,0.3);
    color: #222;
}

.login-container2 h1 {
    text-align: left;           /* ← changed to left */
    margin-bottom: 3.26087vh;
}

.login-container3 {
    max-width: 52.08333vw;
    max-height: 350vh; /* Longer */
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 1.5625vw;
    background: rgba(255,255,255,0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0,0,0,0.3);
    color: #222;
}

.login-container h3 {
    text-align: center;
    color: #145536;
    margin-bottom: 3.26087vh;
}

.form-group { 
    margin-bottom: 2.17391vh; 
}

.form-group label { 
    display: block; 
    margin-bottom: 0.65217vh; 
    font-weight: 600; 
}

.form-group input {
    width: 100%;
    padding: 1.52174vh;
    border: 0.1087vh solid #ccc;
    border-radius: 0.65217vh;
    font-size: 1.73913vh;
}

.tos-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.41667vw;
    font-size: 1.73913vh;
}

.tos-checkbox-label input[type="checkbox"] {
    width: 2vw;
    height: 2vw;
    accent-color: #145536;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.tos-link {
    color: #145536;
    text-decoration: underline;
    text-decoration-color: #145536;
}

/* Changed from .login-button to .login-button2 */
.login-button2 {
    width: 100%;
    padding: 1.73913vh;
    background: #1c754e;
    color: white;
    font-size: 1.95652vh;
    font-weight: bold;
    border: none;
    border-radius: 0.65217vh;
    cursor: pointer;
    margin-top: 1.08696vh;
}

.login-button2:hover { 
    background: #145536; 
}

.register-link {
    text-align: center;
    margin-top: 2.71739vh;
    color: #000000;
}

.register-link a { 
    color: #000000; 
    text-decoration: underline;
}

.success-message {
    text-align: left;           /* left-aligned text */
    font-size: 1.95652vh;
    margin: 2.71739vh 0 1.82291vw 0;      /* removed horizontal auto-centering */
    line-height: 1.6;
    max-width: 19.79167vw;           /* keeps it from becoming too wide */
}

.button-row {
    display: flex;
    gap: 1.63044vh;
    justify-content: center;
}

.single-button {
    display: inline-block;
    text-align: center;
}

.logout-Button {
  background-color: transparent;
  color: white;
  border: 0.1087vh solid white; /* ~1px on a 920px tall viewport */
  padding: 0.5435vh 0.7813vw; /* ~5px on a 920px tall viewport and ~15px on a 1920px wide viewport */
  border-radius: 0.5435vh; /* ~5px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.logout-Button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- BILLING TOGGLE STYLES ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.billing-toggle {
    text-align: center;
    margin: 30px 0 25px;
}

.toggle-container {
    display: inline-flex;
    background: #f1f1f1;
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toggle-btn {
    padding: 10px 28px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    background: transparent;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn.active {
    background: #145536;
    color: white;
}

.best-value {
    font-size: 0.85em;
    color: #145536;
}

/* ====================== PRICING CARDS ====================== */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25vw;
    margin-top: 4.5vh;
    margin-bottom: 3.26vh;
}

.plan-card {
    background: white;
    border: 0.22vh solid #e5e5e5;
    border-radius: 1.74vh;
    padding: 3.04vh 1.25vw;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 0.43vh 0.78vw rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.plan-card.popular {
    border-color: #145536;
    transform: scale(1.04);
}

.plan-card.popular:hover {
    transform: scale(1.04) translateY(-4px);
}

/* Most Popular Badge */
.popular-badge {
    position: absolute;
    top: -1.6vh;
    left: 50%;
    transform: translateX(-50%);
    background: #145536;
    color: white;
    font-size: 1.5vh;
    font-weight: 700;
    padding: 0.7vh 1.04vw;
    border-radius: 3.26vh;
    white-space: nowrap;
    box-shadow: 0 0.43vh 0.625vw rgba(0, 100, 0, 0.3);
}

/* Plan Title */
.plan-title {
    margin: 0 0 1.74vh 0;
    font-size: 2.4vh;
    font-weight: 700;
    color: #222;
}

/* Price Container */
.price-container {
    margin: 20px 0 24px;
    min-height: 72px;
}

.price {
    font-size: 3.7vh;
    font-weight: 700;
    line-height: 1;
    color: #111;
}

.price-unit {
    font-size: 0.42em;
    font-weight: 500;
    vertical-align: middle;
}

/* Hide yearly prices by default */
.yearly-price {
    display: none;
}

.price-period {
    color: #666;
    font-size: 1.8vh;
    margin-top: 0.43vh;
}

/* Features List */
.plan-features {
    text-align: left;
    padding-left: 0;
    margin-bottom: 3.48vh;
    line-height: 1.8;
    list-style: none;
}

.plan-features li {
    margin-bottom: 1.3vh;
    position: relative;
    padding-left: 1.5625vw;
    font-size: 1.62vh;
}

.plan-features li:last-child {
    margin-bottom: 0;
}

.plan-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #145536;
    font-weight: bold;
    font-size: 1.7vh;
}

/* Select Button */
.select-plan-btn {
    width: 100%;
    padding: 1.4vh;
    background: #145536;
    color: white;
    border: none;
    border-radius: 1.09vh;
    font-size: 1.8vh;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}

.select-plan-btn:hover {
    background: #005000;
    transform: translateY(-1px);
}

/* Selected card highlight */
.plan-card.selected,
.plan-card.current-tier {
    border-color: #145536;
    box-shadow: 0 0 0 8px rgba(0, 100, 0, 0.25);
}

.current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #1c754e;
    color: white;
    font-size: 0.8em;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px #1c754e;
}

.upgrade-button {
	margin: 20px 0;
	font-size: 1.1em;
	font-weight: 600;
	color: #145536;
	text-align: center;
}

/* ==================== UPGRADE COST INFO ==================== */
.upgrade-cost-info {
    color: #222;
    text-align: left;
    font-weight: bold;
    font-size: 4rem;
    padding-left: 10px;
}

/* Clean email display when logged in */
.user-email {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: color 0.2s ease;
}

.user-email:hover {
    text-decoration: underline; /* Adds underline on hover */
    text-decoration-color: white; /* Makes the underline white */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------- USER SETTING STYLES ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.profile-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-label {
    font-weight: 600;
    color: #222;
    font-size: 2rem;
}

.profile-value {
    font-weight: 500;
    color: #006400;
    font-size: 2rem;
}

/* Affiliate Dashboard */
.affiliate-dashboard {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
}

.affiliate-dashboard h2 {
    margin-bottom: 20px;
    color: #222;
}

.affiliate-payout-info {
    margin: 2vh 0;
    padding: 1.5vh;
    background-color: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.4;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------- AFFILIATE SIGNUP STYLES ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.affiliate-container {
    max-width: 52.08333vw;
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 2.60417vw;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0, 0, 0, 0.3);
    color: #222;
}

.affiliate-container h1 {
    text-align: center;
    margin: 0 0 2.17391vh 0;
    color: #222;
}

.affiliate-intro {
    text-align: left;
    font-size: 1.9565vh;
    line-height: 1.6;
    margin: 0 0 1.08696vh 0;
    color: #222;
}

.affiliate-intro strong {
    color: #222;
    font-weight: 700;
}

.affiliate-subtitle {
    text-align: left;
    font-size: 1.73913vh;
    line-height: 1.6;
    margin: 0 0 3.26087vh 0;
    color: #444444;
}

.affiliate-steps {
    background: #f7f9fc;
    border-left: 0.43478vh solid #145536;
    padding: 2.17391vh 1.5625vw;
    margin: 2.71739vh 0;
    border-radius: 0.65217vh;
}

.affiliate-steps h3 {
    margin: 0 0 1.63044vh 0;
    color: #222;
    font-size: 2.17391vh;
    font-weight: bold;
    text-transform: none;       /* override global uppercase */
    letter-spacing: 0;
}

.affiliate-steps ol {
    padding-left: 1.5625vw;
    margin: 0;
    line-height: 1.7;
    color: #333;
    font-size: 1.73913vh;
    list-style: decimal;
}

.affiliate-steps ol li {
    margin-bottom: 1.08696vh;
}

.affiliate-steps ol li:last-child {
    margin-bottom: 0;
}

.affiliate-steps code {
    background: rgba(20, 85, 54, 0.1);
    color: #145536;
    padding: 0.21739vh 0.41667vw;
    border-radius: 0.32609vh;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
}

.affiliate-requirements {
    background: #fffbe6;
    border-left: 0.43478vh solid #d4a017;
    padding: 2.17391vh 1.5625vw;
    margin: 2.71739vh 0;
    border-radius: 0.65217vh;
}

.affiliate-requirements strong {
    display: block;
    margin-bottom: 0.86957vh;
    color: #222;
    font-size: 1.9565vh;
    font-weight: 700;
}

.affiliate-requirements ul {
    padding-left: 1.5625vw;
    margin: 0;
    line-height: 1.7;
    color: #333;
    font-size: 1.73913vh;
    list-style: disc;
}

.affiliate-requirements li {
    margin-bottom: 0.54348vh;
}

.affiliate-requirements li:last-child {
    margin-bottom: 0;
}

.affiliate-input-hint {
    display: block;
    margin-top: 0.54348vh;
    color: #666;
    font-size: 1.52174vh;
    line-height: 1.4;
}

.affiliate-brand-label {
    display: flex;
    align-items: flex-start;
    gap: 0.52083vw;
    font-size: 1.73913vh;
    margin: 1.63044vh 0 2.17391vh 0;
    color: #333;
    line-height: 1.5;
    font-weight: normal;
    cursor: pointer;
}

.affiliate-brand-label input[type="checkbox"] {
	width: 2vw;
	height: 2vw;
	accent-color: #145536;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.affiliate-brand-label code {
    background: rgba(20, 85, 54, 0.1);
    color: #145536;
    padding: 0.10870vh 0.31250vw;
    border-radius: 0.32609vh;
    font-family: 'Courier New', monospace;
    font-size: 0.92em;
}

.affiliate-tos-label {
    display: flex;
    align-items: flex-start;
    gap: 0.52083vw;
    font-size: 1.73913vh;
    margin: 2.17391vh 0;
    color: #333;
    line-height: 1.5;
    font-weight: normal;
    cursor: pointer;
}

.affiliate-tos-label input[type="checkbox"] {
	width: 2vw;
	height: 2vw;
	accent-color: #145536;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.affiliate-tos-label a {
    color: #222;
    text-decoration: underline;
    font-weight: 600;
}

.affiliate-tos-label a:hover {
    color: #444444;
}

.affiliate-settings-link {
    margin-top: 2.71739vh;
    text-align: center;
    font-size: 1.52174vh;
    color: #888;
    line-height: 1.5;
}

.affiliate-settings-link a {
    color: #222;
    text-decoration: underline;
}

.affiliate-settings-link a:hover {
    color: #444444;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- ACCOUNT DELETION STYLES --------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.delete-account-link-wrapper {
    margin-top: 4vh;
    text-align: center;
}

.delete-account-link {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

.delete-account-sub-link {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
    font-size: 0.9em;
}

.hide-delete-section-wrapper {
    margin-top: 1vh;
}

.danger-zone {
    display: none;
    margin-top: 2vh;
    padding: 2vh;
    border: 2px solid #c0392b;
    border-radius: 8px;
}

.danger-zone.visible {
    display: block;
}

.danger-zone-title {
    color: #c0392b;
}

.danger-button {
    background-color: #8b0000;
    color: white;
    border: none;
    padding: 1vh 2vh;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.danger-button:hover {
    background-color: #6b0000;
}

.danger-button.cancel-deletion {
    background-color: #1c754e;
}

.danger-button.cancel-deletion:hover {
    background-color: #155a3c;
}

.deletion-countdown {
    display: none;
    color: #c0392b;
    margin-top: 1vh;
    font-weight: bold;
}

.deletion-countdown.visible {
    display: block;
}

.deletion-warning-list {
    text-align: left;
    margin: 1.5vh 0;
}

.hide-delete-section-wrapper.hidden {
    display: none;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ LOADING ICON --------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  z-index:20;
}
.loader.hidden{ display:none; }

.loader svg{
  /* blød dybde – fjern hvis du vil have den helt flad */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));
}

/* --- farver (rent mørkegrøn/hvid/grøn) --- */
.planet     { fill:#145536; }   /* skiven (planeten) */
.ocean      { fill:#1c754e; }   /* havet i bunden    */
.graph-line { stroke:#ffffff; } /* grafen            */
.dot        { fill:#ffffff; }   /* knudepunkterne    */

/* --- farver (rent sort/hvid/grå) --- */
.loader.sekundaer{
  --planet:#0e2a3a;
  --ocean:#2f7fa8;
  --graf:#ffffff;
}

/* --- linjen tegnes op, hviler, og trækkes tilbage i loop --- */
.graph-line{
  animation:draw 2.8s linear infinite;
  will-change:stroke-dashoffset;
}
@keyframes draw{
  0%   { stroke-dashoffset:224; }  /* skjult                   */
  48%  { stroke-dashoffset:0;   }  /* fuldt tegnet – på toppen */
  64%  { stroke-dashoffset:0;   }  /* hviler et øjeblik        */
  92%  { stroke-dashoffset:224; }  /* trukket helt tilbage     */
  100% { stroke-dashoffset:224; }  /* kort pust før den gentager */
}

/* --- prikkerne deler samme tidslinje som linjen --- */
.dot{
  opacity:0;
  transform:scale(.35);
  transform-box:fill-box;      /* så skaleringen sker om prikkens eget centrum */
  transform-origin:center;
  animation-duration:2.8s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:opacity, transform;
}
.dot-1{ animation-name:dot1; }
.dot-2{ animation-name:dot2; }
.dot-3{ animation-name:dot3; }
.dot-4{ animation-name:dot4; }
.dot-5{ animation-name:dot5; }
.dot-6{ animation-name:dot6; }

/* Hvert vindue er beregnet ud fra hvor langt henne på linjen prikken sidder,
   så den lander præcis når linjen når den – og forsvinder når linjen ruller forbi den igen. */
@keyframes dot1{ /* nås 0%  · forlades 92% */
  0%,0%     { opacity:0; transform:scale(.35); }
  4%        { opacity:1; transform:scale(1);   }
  92%       { opacity:1; transform:scale(1);   }
  96%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot2{ /* nås 8%  · forlades 87% */
  0%,8%     { opacity:0; transform:scale(.35); }
  12%       { opacity:1; transform:scale(1);   }
  87%       { opacity:1; transform:scale(1);   }
  91%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot3{ /* nås 13% · forlades 84% */
  0%,13%    { opacity:0; transform:scale(.35); }
  17%       { opacity:1; transform:scale(1);   }
  84%       { opacity:1; transform:scale(1);   }
  88%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot4{ /* nås 27% · forlades 77% */
  0%,27%    { opacity:0; transform:scale(.35); }
  31%       { opacity:1; transform:scale(1);   }
  77%       { opacity:1; transform:scale(1);   }
  81%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot5{ /* nås 34% · forlades 72% */
  0%,34%    { opacity:0; transform:scale(.35); }
  38%       { opacity:1; transform:scale(1);   }
  72%       { opacity:1; transform:scale(1);   }
  76%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot6{ /* nås 47% · forlades 64% (kun synlig mens grafen er helt oppe) */
  0%,47%    { opacity:0; transform:scale(.35); }
  51%       { opacity:1; transform:scale(1);   }
  64%       { opacity:1; transform:scale(1);   }
  68%,100%  { opacity:0; transform:scale(.35); }
}

/* "Loading..."-tekst under alle spinner-ikoner */
.loader { flex-direction: column; gap: 1.4vh; }
.loader::after {
  content: "Loading...";
  color: #145536;
  font-family: var(--tp-font-sans);
  font-size: 1.8vh;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Tilgængelighed: stå stille som en færdigtegnet graf hvis brugeren fravælger animation */
@media (prefers-reduced-motion: reduce){
  .graph-line{ animation:none; stroke-dashoffset:0; }
  .dot{ animation:none; opacity:1; transform:scale(1); }
}

/* Samme princip som .chart-container: positioneret boks + reserveret højde, så
   husets .loader centrerer sig dér hvor indholdet lander (i stedet for at flygte
   op i skærmen, fordi ingen forælder var position:relative). */

/* --- Firma-headeren (beskrivelsen) --- */
#stockInfoContent .full-width-textbox { position: relative; }
#stockInfoContent .full-width-textbox.loading { min-height: 40vh; }

#stockInfoContent .full-width-textbox.loading .co-title,
#stockInfoContent .full-width-textbox.loading .co-facts,
#stockInfoContent .full-width-textbox.loading .co-desc { visibility: hidden; }

#stockInfoContent .full-width-textbox.loading #info-loader { right: 46%; }
@media (max-width: 768px) {
  #stockInfoContent .full-width-textbox.loading #info-loader { right: 0; }
}

/* --- De JS-renderede sektioner (Key Statistics, Financials, Policy, News) --- */
#stockInfoContent .sec .sec-loader { position: relative; min-height: 26vh; }
#stockInfoContent #financialsSection .sec-loader { min-height: 34vh; }
#stockInfoContent #policySection     .sec-loader { min-height: 24vh; }
#stockInfoContent #newsSection       .sec-loader { min-height: 30vh; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------ ADAPTIVE ASPECT-RATIO LAYER (added below) --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------

   HOW THIS LAYER WORKS
   --------------------
   Everything ABOVE this line is the original design, tuned for a 16:9 screen. It is left
   completely untouched and is used as the DEFAULT. This layer sits on top and only re-tunes a
   small set of high-impact "control" values per aspect-ratio band, so the 16:9 look is preserved
   exactly while every other screen shape gets a sensible layout.

   Three repeated values are routed through CSS variables, so each band only has to flip one or
   two numbers instead of duplicating hundreds of rules:

     --content-width : width of the main centred column (top-bar row, nav row, hero, chart,
                       tables, video ad, text blocks, disclaimer popup).      Default 60%
     --footer-width  : width of the wider blocks (footer + the wide text/video rows). Default 80%
     --rail-display  : whether the fixed left/right ad rails show (block) or not (none). Default block

   ABOUT THE BANDS
   ---------------
   "aspect-ratio" in a media query = viewport width / height. Real screens almost never match a
   named ratio exactly, so each requested ratio owns a *band* (a min/max range). The band edges
   sit at the midpoints between neighbouring ratios, so any screen falls into its nearest band:

        ratio     decimal    band (aspect-ratio range)        typical device
        9:16      0.562      up to 0.625                      phone, portrait
        2:3       0.667      0.625 - 0.778                    tablet, portrait
        8:9       0.889      0.778 - 0.944                    tall window / near-square
        1:1       1.000      0.944 - 1.167                    square window
        4:3       1.333      1.167 - 1.417                    classic monitor, landscape
        3:2       1.500      1.417 - 1.550                    landscape
        16:10     1.600      1.550 - 1.688                    wide laptop, landscape
        16:9      1.778      1.688 - 2.056                    << DEFAULT: no override needed >>
        21:9      2.333      from 2.056                       ultra-wide monitor

   A NOTE ON UNITS
   ---------------
   Widths stay in % (relative to the parent, exactly like the original) and everything else stays
   in vh / vw, as requested. The only px-like values are the rem bounds inside the clamp() used for
   body text on portrait screens: because an aspect ratio does NOT tell us the physical size (a 9:16
   viewport can be a 400px phone or a 1400px portrait monitor), those bounds keep the text readable
   at both extremes while the preferred value still tracks the width in vw.

   AD BANNERS
   ----------
   The two fixed side rails need horizontal room next to the ~60% column, so they only show on
   landscape shapes (roughly 4:3 and wider). On a square screen and on every portrait screen they
   are hidden (--rail-display: none) and the horizontal banner is stretched to full width instead -
   which is the layout the phone screenshots use. (body.ad-free still hides every banner as before,
   because it uses !important.)
*/

/* Base variable values = the original 16:9 design ------------------------------------------------ */
:root {
  --content-width: 60%;
  --footer-width: 80%;
  --rail-display: block;
}

/* Route the repeated widths / rail visibility through the variables. These appear after the
   originals, so they win by source order and, at their defaults, resolve to exactly the same
   numbers as before (i.e. 16:9 is visually unchanged). */
.top-bar-button-container,
.main-nav-container,
.chart-container,
.screeningTableContainer,
#videoAdContainer,
.leftRightContainer,
.mainTextContainer,
#disclaimerPopup {
  width: var(--content-width);
  max-width: var(--content-width);
}

.hero-content {
  max-width: var(--content-width); /* the hero centres via max-width only */
}

.footer-columns,
.footer-bottom,
.leftRightContainer2 {
  width: var(--footer-width);
  max-width: var(--footer-width);
}

/* The footer has FIVE link columns (.column1). Originally they were flex:1 with a 0 basis, so they
   never wrapped - on a square or small screen all five got crushed into one row (~140px each, with a
   whole disclaimer paragraph inside). Let them wrap based on *physical* width (a rem threshold), the
   same reasoning as the portrait body-text clamp(): how readable a text column is depends on its real
   width, not on the screen's aspect ratio. The 12rem basis is chosen so a 16:9 desktop keeps all five
   on ONE row down to ~1200px wide (your calibrated 1920 look is unchanged); narrower/square/portrait
   screens gracefully reflow to 3 -> 2 -> 1 columns. row-gap only spaces the wrapped rows (no effect
   when everything fits on one line, i.e. none on 16:9). */
.footer-columns { flex-wrap: wrap; row-gap: 3vh; }
.column1 { flex: 1 1 12rem; }

.left-sidebar,
.right-sidebar,
.sticky-left-sidebar,
.sticky-right-sidebar {
  display: var(--rail-display); /* body.ad-free .*-sidebar still wins with !important */
}


/* =================================================================================================
   SHARED  |  SQUARE + ALL PORTRAIT   (aspect-ratio <= ~1.167)
   Hide the side rails, promote the horizontal banner to full width, and let the pricing grid drop
   to two columns. Common to a square screen and to every portrait screen.
   ================================================================================================= */
@media (max-aspect-ratio: 7/6) {
  :root { --rail-display: none; }

  .horizontal-bar,
  .sticky-horizontal-bar {
    width: 100%;
    left: 0;
    transform: none;
    margin: 6vh auto;
  }

  .plans-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =================================================================================================
   SHARED  |  PORTRAIT ONLY   (aspect-ratio <= ~0.944)
   Taller-than-wide screens: stack the header rows, the hero and the footer so nothing gets squeezed
   into a column that is too narrow, and drop the pricing grid to a single column. Driven by aspect
   ratio (not px width) so it also works for a portrait tablet or a portrait desktop monitor.
   ================================================================================================= */
@media (max-aspect-ratio: 17/18) {
  .top-bar { flex-direction: column; }
  .top-bar-button-container,
  .main-nav-container { flex-direction: column; align-items: center; }
  .top-bar-left,
  .top-bar-right { margin-bottom: 1vh; }
  .login-button { width: 100%; }

  .logo { margin-right: 0; margin-bottom: 2vh; width: 100%; text-align: center; }
  .nav-links { width: 100%; justify-content: center; }
  .nav-links ul { flex-direction: column; align-items: center; }
  .nav-links li { margin-bottom: 1vh; }
  .language-selector { margin-left: 0; margin-top: 1vh; }

  .hero-content { flex-direction: column; align-items: center; text-align: center; }
  .hero-left,
  .hero-right { width: 100%; padding-right: 0; align-items: center; }
  .hero-left h1,
  .hero-left p { text-align: center; }
  .hero-buttons { flex-direction: column; align-items: center; width: 100%; }
  .hero-buttons button,
  .primary-button,
  .secondary-button { width: 100%; }
  .hero-right { margin-top: 4vh; }
  .illustration { max-width: 50vw; }

  /* full-width single stack: 100% basis makes each column take its own row (works with the
     flex-wrap set above, so wrapping and portrait-stacking use the same mechanism) */
  .footer-columns { align-items: center; text-align: center; }
  .column1 { align-items: center; min-height: 0; margin-bottom: 3vh; flex-basis: 100%; }
  .footer-bottom { flex-direction: column; gap: 2vh; }

  .plans-grid { grid-template-columns: 1fr; }
}


/* =================================================================================================
   PER-RATIO BANDS
   Each band owns an exclusive range and only re-tunes the column widths (plus body text size on
   portrait). Ordered widest -> narrowest for readability.
   ================================================================================================= */

/* --- 21:9  ultra-wide ---------------------------------------------------------------------------
   Very wide and short: pull the column in so text lines don't run huge and the rails get plenty of
   room; charts still get well over half the width. */
@media (min-aspect-ratio: 37/18) {
  :root {
    --content-width: 54%;
    --footer-width: 72%;
  }
}

/* --- 16:10  wide landscape --------------------------------------------------------------------- */
@media (min-aspect-ratio: 31/20) and (max-aspect-ratio: 27/16) {
  :root {
    --content-width: 62%;
    --footer-width: 82%;
  }
}

/* --- 3:2  landscape ---------------------------------------------------------------------------- */
@media (min-aspect-ratio: 17/12) and (max-aspect-ratio: 31/20) {
  :root {
    --content-width: 62%;
    --footer-width: 82%;
  }
}

/* --- 4:3  classic landscape -------------------------------------------------------------------
   The narrowest landscape shape: keep the column near 60% so the side rails still fit comfortably. */
@media (min-aspect-ratio: 7/6) and (max-aspect-ratio: 17/12) {
  :root {
    --content-width: 60%;
    --footer-width: 84%;
  }
}

/* --- 1:1  square ------------------------------------------------------------------------------
   No rails (set in the shared block above); widen the column so content isn't stuck in a thin strip,
   but keep the desktop-style header/hero (no stacking). */
@media (min-aspect-ratio: 17/18) and (max-aspect-ratio: 7/6) {
  :root {
    --content-width: 80%;
    --footer-width: 88%;
  }
}

/* --- 8:9  near-square portrait ---------------------------------------------------------------- */
@media (min-aspect-ratio: 7/9) and (max-aspect-ratio: 17/18) {
  :root {
    --content-width: 90%;
    --footer-width: 93%;
  }
  body { font-size: clamp(0.9rem, 2vw, 1.25rem); }
}

/* --- 2:3  portrait tablet ---------------------------------------------------------------------- */
@media (min-aspect-ratio: 5/8) and (max-aspect-ratio: 7/9) {
  :root {
    --content-width: 92%;
    --footer-width: 95%;
  }
  body { font-size: clamp(0.9rem, 2.4vw, 1.25rem); }
}

/* --- 9:16  portrait phone ---------------------------------------------------------------------- */
@media (max-aspect-ratio: 5/8) {
  :root {
    --content-width: 94%;
    --footer-width: 96%;
  }
  body { font-size: clamp(0.85rem, 3.6vw, 1.2rem); }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------- END OF ADAPTIVE ASPECT-RATIO LAYER -----------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v2  — from the cross-device screenshots ===========================================
====   (cross-browser hero, proportional icons/logos, chart-control layout, spacing)             ===
====================================================================================================
   Appended last, so these override earlier rules by source order. At 16:9 every value resolves to
   ~the original number, so the approved desktop look is preserved; the changes only bite off-16:9
   or where a value was previously unbounded.
*/

/* 1) HERO CAROUSEL HEIGHT — stops the copy painting over the buttons (Chrome vs Firefox, and the
      half-width window in 3monitor.png) and removes the empty band under short slides on phones.
      Cause: .carousel-slide had a FIXED height (32.6vh); only the active slide shows, so the
      carousel is exactly that tall. When the text needed more than 32.6vh (taller line metrics in
      Firefox, a web-font fallback, or a narrower column) it overflowed the box and landed on the
      .hero-buttons that follow it. Fix: height:auto + min-height, so the slide grows to fit its text
      in any browser at any width (buttons always sit below), while min-height keeps the 16:9 rhythm. */
.carousel-slide { height: auto; min-height: 32.6087vh; }

/* 2) PROPORTIONAL ICONS / LOGOS — stops icons distorting + collapsing on non-16:9 / small screens
      (the shield + globe became thin slivers, the social badges tall pills, the payment/social icons
      specks), WITHOUT shrinking them on large monitors.
      Cause: WIDTH in vw but HEIGHT in vh — the two axes drift apart off the tuned ratio and the vw
      side collapses on a phone. Fix: max(px-floor, original-vw) + height:auto. The vw term is the
      element's ORIGINAL width, so at 1920 it equals the original size and it keeps scaling UP on
      QHD / ultrawide exactly as before (a fixed clamp ceiling was capping them too small on big
      screens). The px floor only kicks in on small screens so the icon never collapses; height:auto
      keeps each image's intrinsic ratio, and the social badge is made square. */
.shield-icon,
.globe-icon           { width: max(16px, 1.042vw); height: auto; }
.socialMediaContainer { width: max(38px, 2.604vw); height: max(38px, 2.604vw); }
.logo3                { width: max(20px, 1.5625vw); height: auto; }   /* social glyph */
.logo2                { width: max(30px, 2.604vw); height: auto; }    /* payment icon */

/* 3) SQUARE + PORTRAIT refinements (<= ~7/6), matching the rest of the layer. */
@media (max-aspect-ratio: 7/6) {

  /* The hero has a decorative chevron strip (.-pattern) pinned to its bottom that is 10.87vh tall;
     the hero's bottom padding must reserve at least that much room, or the stacked illustration
     overlaps the strip on phones. (v2 wrongly cut this to 5vh — that was the "logo under the png
     strip" bug.) Keep it a touch above the strip height so the illustration clears it. */
  .hero-section   { padding-bottom: 11vh; }
  .carousel-slide { min-height: 0; }          /* content-drive height so short slides don't leave a gap */

  /* hero illustration: bounded + fluid instead of a raw 50vw (which is huge on a big portrait screen) */
  .illustration   { max-width: clamp(140px, 40vw, 240px); }

  /* Chart bottom controls: keep everything on ONE row on all widths (was: stacked column).
     Buttons keep their size; the dropdown + search field shrink (and truncate) to make room. */
  .controls-container { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1.5vw; }
  .controls-group { flex: 1 1 0; min-width: 0; gap: 1.5vw; }               /* de to grupper deler bredden ligeligt */
  .controls-group--search { flex: 1 1 0; min-width: 0; }
  .custom-select { width: auto !important; flex: 1 1 0; min-width: 0; }    /* ophæver inline 15.625vw + den gamle 100% */
  .chart-search-wrapper { flex: 1 1 0; min-width: 0; width: auto; }
  .chartStockPickBox { width: 100%; min-width: 0; }
  .chartButton { flex: 0 0 auto; white-space: nowrap; }                    /* knap-tekst ombryder ikke → felterne krymper i stedet */

  /* mindre tekst + venstrestillet dropdown-label, så alt kan være der og trunkeres pænt */
  .controls-container .select-selected   { font-size: clamp(11px, 1.7vh, 15px); justify-content: flex-start; text-align: left; padding-right: 3vh; }
  .controls-container .chartButton       { font-size: clamp(11px, 1.7vh, 15px); padding: 1vh 2.5vw; }
  .controls-container .chartStockPickBox { font-size: clamp(11px, 1.7vh, 15px); }

  .chart-container { height: auto; }

  /* Wide data table: keep it in its horizontal-scroll wrapper (the right pattern on a phone) and make
     that scroll smooth. Forcibly reflowing a many-column table hurts more than it helps. */
  .screeningTableContainer { -webkit-overflow-scrolling: touch; }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v2 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v3  — second round of screenshots ================================================
====================================================================================================
*/

@media (max-aspect-ratio: 7/6) {

  /* HEADER sits too low on phones: the top-bar + main-nav vertical padding is vh-based and stacks up
     on tall screens, pushing the TICKER PICKER logo well down the page. Tighten the header padding so
     the logo comes back up. (Horizontal padding kept generous.) */
  .top-bar  { padding-top: 0.8vh; padding-bottom: 0.8vh; }
  .main-nav { padding: 1vh 3vw; }        /* was 2.17vh on every side */
  .logo     { margin-bottom: 0.8vh; }

  /* SCREENER TABLE icons too small on phones. The table lives in a horizontal-scroll wrapper, so on a
     phone its cells stay near desktop scale while the page scrolls — but the sort arrows / crown /
     sort markers inside were sized in vw and collapsed to a few px. Size any in-table image to track
     the table's own text (vh) with a px floor, so the markers read at a sensible size again.
     (These controls are generated by JS, so this targets images inside the table generically; if an
     arrow is drawn as a font glyph instead of an image, tell me its class and I'll size that too.) */
  .screeningTableStyle img { height: clamp(14px, 2vh, 22px); width: auto; }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v3 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v4  — third round of screenshots =================================================
====================================================================================================
*/

/* CAROUSEL DOTS — same width-vw + height-vh distortion as the other icons, so on a phone the round
   dots squished into thin vertical bars ("|||||"). Make them square with a px floor. At 1920 this is
   ~10px, same as before. */
.carousel-dots span,
.dot { width: max(9px, 0.55vw); height: max(9px, 0.55vw); }

@media (max-aspect-ratio: 7/6) {

  /* HEADER — pull it tighter still on phones so the TICKER PICKER logo sits right under the top bar
     instead of dropping into the green space below it. The leftover gap was the top-bar-right margin
     + top-bar bottom padding + main-nav top padding stacking up; trim all three. */
  .top-bar        { padding-top: 0.5vh; padding-bottom: 0.4vh; }
  .top-bar-left,
  .top-bar-right  { margin-bottom: 0.4vh; }
  .main-nav       { padding: 0.5vh 3vw; }
  .logo           { margin-bottom: 0.5vh; }
  .nav-links li   { margin-bottom: 0.5vh; }

  /* SCREENER TABLE — the Above/Below/Between filter dropdown (.custom-select2) was 5vw wide (~18px on
     a phone), so its label spilled over the column edge and, once expanded, the option list was far
     too narrow to read. Give it a real width that fits "Between"; the column and the absolutely-
     positioned option list both follow this width. (JS-generated control; this is the dropdown class
     the stylesheet already defines for the table filter.) */
  .custom-select2 { width: clamp(88px, 26vw, 120px) !important; }

  /* Column-header text was sized in vh and read a bit large + bold for a phone, so the header row
     wrapped tall and looked out of proportion with the data rows. Scale it down a touch (px floor)
     and tighten the header padding so the header block is more compact. */
  .screeningTableStyle th     { font-size: clamp(10px, 1.2vh, 12px); padding-top: 0.7vh; padding-bottom: 0.7vh; }
  .screeningTableHeader-input { font-size: clamp(10px, 1.2vh, 12px); }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v4 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v5  — login / account card width on mobile =======================================
====================================================================================================
*/

@media (max-aspect-ratio: 7/6) {
  /* The login / account cards (login-container, -container2, -container3) were never routed through
     the adaptive width system, so they kept their desktop max-width of ~52vw — only about half the
     screen on a phone. Widen them on narrow screens so the form uses the width properly, while
     leaving a small margin for the card's shadow. Desktop 16:9 keeps the original 52vw look. */
  .login-container,
  .login-container2,
  .login-container3 { max-width: 90%; }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v5 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v6 — sector-selection menu (pop-out rectangle + smaller chips) ===================
====   Pairs with a small JS change in Dynamic_screeningTable.js (toggleOptions + positionSectorMenu).
====================================================================================================
*/

/* The Sector cell no longer has to reserve ~400px of width for the options (they now pop OUT over the
   table), so let the Sector column size to its data instead of being forced huge. */
.sectorCustom-Select { min-width: 8vw; }

/* The options list pops out of the narrow cell as an absolute overlay. The JS sets left/width/top so it
   spans the whole table just below the filter row; the values here are safe fallbacks if JS hasn't run
   yet. z-index lifts it above the table body; box-sizing keeps the JS width = the table width exactly. */
.sectorOptions-Container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  padding: 1vh;
  gap: 0.4vh 0.4vw;
}

/* Expanded = the "rectangle": a distinct white border + shadow so it reads as a pop-out lifted off the
   table. It scales to its content height (the JS sets max-height to the content's scrollHeight). */
.sectorOptions-Container.expanded {
  border: 0.22vh solid #fff;
  border-radius: 0.8vh;
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, 0.35);
}

/* Smaller chips: size to their own text instead of a forced 20% width, with smaller (bounded) type.
   Keeps the bordered-green look you liked — just more compact. Spacing comes from the container gap. */
.sectorOption-Item {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 0.35vh 0.6vw;
  font-size: clamp(9px, 1.05vh, 12px);
  line-height: 1.25;
  text-align: center;
}

@media (max-aspect-ratio:7/6){
  #stockInfoContent .policy-grid{grid-template-columns:1fr;}
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v6 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v7 — sector chip text a touch larger on monitors (landscape) =====================
====================================================================================================
*/
@media (min-aspect-ratio: 7/6) {
  /* On monitor / landscape aspect ratios the chips have room, so bump the text back up a bit (~the
     original size). Portrait / mobile aspect ratios keep the smaller v6 size, which read fine there. */
  .sectorOption-Item { font-size: clamp(12px, 1.3vh, 15px); }
}

/*
====================================================================================================================================================
---------------------------------------------------------- SHARED LAYOUT (redesign phase 2) --------------------------------------------------------
====================================================================================================================================================
WHY: the shared header (TickerPickerHeader.html), footer (TickerPickerFooter.html) and the full-disclaimer dialog in the
redesigned look, built from the design-system tokens at the top of this file. Placed LAST so it wins over the older
.top-bar/.main-nav/.footer rules and their aspect-ratio variants; the selectors combine the new tp-* class with the kept
legacy class (e.g. .tp-header.top-bar), so the legacy rules still apply wherever the old markup is used.
*/

/* Readable base size on every screen. The original 1.9565vh (~18px on a 920px tall desktop) became ~7px on a phone in
   landscape once the page got a real mobile viewport; the clamp keeps 18px on the calibrated desktop. */
body {
  font-size: clamp(0.9375rem, 1.9565vh, 1.25rem);
  background-color: var(--tp-paper);
  color: var(--tp-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.tp-menu-open { overflow: hidden; }      /* no page scroll behind the open mobile menu */
img { max-width: 100%; }

/* --- Header ---------------------------------------------------------------------------------------------- */
.tp-header.top-bar {
  position: sticky; top: 0; z-index: var(--tp-z-header);
  display: block;
  padding: 0;
  background: var(--tp-green-800);
  color: var(--tp-on-brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), var(--tp-shadow-sm);
  font-family: var(--tp-font-sans);
}
.tp-header__inner {
  display: flex; align-items: center; gap: clamp(0.75rem, 0.4rem + 1.5vw, 2rem);
  width: var(--tp-max); max-width: var(--tp-max);
  min-height: clamp(3.5rem, 3.2rem + 0.8vw, 4.25rem);
  margin-inline: auto;
}
.tp-header .tp-logo.logo-link {
  display: inline-flex; align-items: center; gap: var(--tp-space-2);
  flex: none;
  color: var(--tp-on-brand); text-decoration: none;
}
.tp-header .tp-logo.logo-link:hover { text-decoration: none; opacity: 0.92; }
.tp-header .tp-logo__icon { width: 2.25rem; height: 2.25rem; }
.tp-header .tp-logo__word.logo {
  margin: 0; width: auto;
  font: 800 clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem)/1 var(--tp-font-sans);
  letter-spacing: 0.02em; text-transform: uppercase; text-align: left;
  color: var(--tp-on-brand);
}

.tp-header .tp-nav.main-nav {
  display: flex; align-items: center; gap: clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
  flex: 1 1 auto;
  padding: 0; margin: 0;
  background: transparent;
}
.tp-nav__list { display: flex; align-items: center; gap: var(--tp-space-1); margin: 0; padding: 0; list-style: none; }
.tp-nav__list li { margin: 0; }
.tp-header .tp-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--tp-space-3);
  border-radius: var(--tp-radius-pill);
  color: rgba(255, 255, 255, 0.92);
  font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
  text-decoration: none; text-transform: none;
  margin: 0;
}
.tp-header .tp-nav__link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.tp-header .tp-nav__link[aria-current="page"] { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tp-header .tp-switch { margin-inline-start: auto; color: rgba(255, 255, 255, 0.92); font-size: var(--tp-text-xs); white-space: nowrap; }
.tp-switch--on-brand .tp-switch__track { background: rgba(255, 255, 255, 0.3); }
.tp-switch--on-brand input:checked + .tp-switch__track { background: var(--tp-green-200); }
.tp-switch--on-brand input:checked + .tp-switch__track::after { background: var(--tp-green-900); }

.tp-header .tp-header__actions.top-bar-right {
  display: flex; align-items: center; gap: var(--tp-space-2);
  flex: none; margin: 0;
}
/* Log in / account e-mail / log out (updateLoginButton swaps the classes; all three look like header pills). */
.tp-header .login-button,
.tp-header .user-email,
.tp-header .logout-Button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; max-width: 16rem;
  padding: 0 var(--tp-space-4);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--tp-radius-pill);
  background: transparent; color: #fff;
  font: 600 var(--tp-text-sm)/1 var(--tp-font-sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; width: auto; margin: 0;
}
.tp-header .login-button { background: #fff; color: var(--tp-green-900); border-color: #fff; }
.tp-header .login-button:hover { background: var(--tp-green-100); }
.tp-header .user-email { border-color: transparent; padding-inline: var(--tp-space-2); }
.tp-header .user-email:hover, .tp-header .logout-Button:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }

/* Hamburger button: only on narrow screens. */
.tp-menu-btn {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--tp-radius-sm);
  background: transparent; color: #fff; cursor: pointer;
}
.tp-menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
.tp-menu-btn__bars,
.tp-menu-btn__bars::before,
.tp-menu-btn__bars::after {
  display: block; position: relative;
  width: 22px; height: 2px; margin-inline: auto;
  background: currentColor; border-radius: 2px;
  transition: transform var(--tp-fast) var(--tp-ease), opacity var(--tp-fast) var(--tp-ease);
}
.tp-menu-btn__bars::before, .tp-menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.tp-menu-btn__bars::before { top: -7px; }
.tp-menu-btn__bars::after { top: 7px; }
.tp-header.is-menu-open .tp-menu-btn__bars { background: transparent; }
.tp-header.is-menu-open .tp-menu-btn__bars::before { transform: translateY(7px) rotate(45deg); }
.tp-header.is-menu-open .tp-menu-btn__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Mid widths: the logged-in e-mail is shortened so nav + switch + account still fit on one row. */
@media (max-width: 1440px) { .tp-header .user-email { max-width: 11rem; display: block; line-height: 40px; } }

/* Narrow screens (phones, tablets, phone landscape, small laptops): the nav becomes a drop-down panel under the header.
   1100px (not 768) because five links + the switch + the account buttons do not fit on one row below that. */
@media (max-width: 1100px) {
  .tp-menu-btn { display: inline-grid; place-items: center; }
  .tp-header__inner { width: auto; max-width: none; padding-inline: var(--tp-gutter); }
  .tp-header .tp-logo.logo-link { margin-inline-end: auto; }
  .tp-header .tp-nav.main-nav {
    display: none;
    position: fixed; left: 0; right: 0;
    top: var(--tp-header-h, 3.5rem);
    max-height: calc(100dvh - var(--tp-header-h, 3.5rem));
    overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: var(--tp-space-4);
    padding: var(--tp-space-4) var(--tp-gutter) max(var(--tp-space-6), env(safe-area-inset-bottom));
    background: var(--tp-green-900);
    box-shadow: var(--tp-shadow-lg);
  }
  .tp-header.is-menu-open .tp-nav.main-nav { display: flex; }
  .tp-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .tp-header .tp-nav__link {
    width: 100%; min-height: 52px; padding: 0 var(--tp-space-3);
    border-radius: var(--tp-radius-sm);
    font-size: var(--tp-text-base);
  }
  .tp-nav__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .tp-header .tp-switch { margin: var(--tp-space-2) 0 0; padding: var(--tp-space-3); font-size: var(--tp-text-sm); }
  .tp-header .user-email { max-width: 38vw; }
}
/* Phones while logged in: e-mail + "Log out" + menu need the room, so the logo shows only its icon (the link keeps
   its "Ticker Picker - home" label) and the e-mail is shortened with an ellipsis. */
@media (max-width: 560px) {
  .tp-header:has(.user-email) .tp-logo__word.logo { display: none; }
  .tp-header .user-email { max-width: 8.5rem; display: block; line-height: 40px; }
  .tp-header .logout-Button { padding-inline: var(--tp-space-3); }
}
@media (max-width: 359px) {
  .tp-header .tp-logo__word.logo { font-size: 0.95rem; }
  .tp-header .user-email { max-width: 5.5rem; }
}

/* Sticky elements below the header (stock page section nav). */
.tp-section-nav { top: var(--tp-header-h, 0px); }
/* Jump targets (#anchors) should not end up hidden under the sticky header. */
html { scroll-padding-top: calc(var(--tp-header-h, 0px) + 0.75rem); }

/* --- Footer ------------------------------------------------------------------------------------------------ */
.tp-footer.footer {
  margin-top: var(--tp-section);
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 var(--tp-space-6);
  background: var(--tp-green-900);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--tp-font-sans);
  font-size: var(--tp-text-sm);
  line-height: 1.6;
}
.tp-footer__inner { width: var(--tp-max); max-width: var(--tp-max); margin-inline: auto; }
/* Brand | disclaimer | services | company | client area on wide screens; brand on its own row + 2x2 on tablets;
   one column on phones. */
.tp-footer__grid {
  display: grid; gap: var(--tp-space-6) var(--tp-space-5);
  grid-template-columns: 1.6fr 1.3fr 1fr 1fr 1fr;
}
@media (max-width: 1100px) {
  .tp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .tp-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.tp-footer .tp-footer__heading {
  display: flex; align-items: center; gap: var(--tp-space-2);
  margin: 0 0 var(--tp-space-3);
  font: 700 var(--tp-text-xs)/1.3 var(--tp-font-sans);
  letter-spacing: 0.12em; text-transform: uppercase; text-align: left;
  color: #fff;
}
.tp-footer .tp-footer__brand > .tp-footer__heading { font-size: var(--tp-text-base); letter-spacing: 0.04em; }
.tp-footer .tp-footer__heading--sub { margin-top: var(--tp-space-5); }
.tp-footer__logo { width: 1.75rem; height: 1.75rem; }
.tp-footer__tagline { margin: 0 0 var(--tp-space-3); color: var(--tp-green-200); font-weight: 600; font-size: var(--tp-text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.tp-footer p, .tp-footer .description, .tp-footer .secondary {
  margin: 0 0 var(--tp-space-2);
  font-size: var(--tp-text-sm); text-align: left;
  color: rgba(255, 255, 255, 0.8);
  max-width: 40rem;
}
.tp-footer ul { margin: 0; padding: 0; list-style: none; }
.tp-footer li { margin: 0 0 var(--tp-space-1); }
.tp-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.tp-footer nav a { display: inline-block; padding: 0.3rem 0; font-size: var(--tp-text-sm); }   /* >= 24px tall targets (WCAG 2.5.8) */
.tp-footer a:hover { color: #fff; text-decoration: underline; }

.tp-footer .social-media.tp-footer__social { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--tp-space-2); margin-top: var(--tp-space-4); }
.tp-footer .socialMediaContainer {
  width: 40px; height: 40px; margin: 0;
  display: grid; place-items: center;
  border-radius: var(--tp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color var(--tp-fast) var(--tp-ease);
}
.tp-footer .socialMediaContainer:hover { background: rgba(255, 255, 255, 0.18); }
.tp-footer .socialMediaContainer a { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; }
.tp-footer .logo3 { width: 20px; height: auto; }
.tp-footer .logo2 { width: 40px; height: auto; }

.tp-footer #disclaimerButton {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font: 400 var(--tp-text-sm)/1.6 var(--tp-font-sans);
  text-align: left; cursor: pointer;
}
.tp-footer #disclaimerButton:hover { color: #fff; text-decoration: underline; background: transparent; }

.tp-footer .footer-bottom.tp-footer__bottom {
  display: flex; flex-direction: row; flex-wrap: wrap;   /* row: the legacy portrait rule set column */ align-items: center; justify-content: space-between; gap: var(--tp-space-4);
  width: auto; max-width: none;
  margin: var(--tp-space-7) 0 0; padding-top: var(--tp-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.tp-footer .tp-footer__notice { flex: 1 1 22rem; margin: 0; color: #fff; }
.tp-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-3); }
.tp-footer .tp-footer__heading--inline { margin: 0; }
.tp-footer .payment-methods { gap: var(--tp-space-2); justify-content: flex-start; }
.tp-footer .tp-footer__meta { flex-basis: 100%; margin: 0; font-size: var(--tp-text-xs); color: rgba(255, 255, 255, 0.65); }

/* Full disclaimer as an accessible dialog (same text and ids as before). */
.tp-footer #disclaimerPopup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: var(--tp-z-modal);
  width: min(44rem, calc(100vw - 2rem)); max-width: none;
  max-height: min(85dvh, 85vh); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--tp-surface); color: var(--tp-ink);
  border: 1px solid var(--tp-line); border-radius: var(--tp-radius-lg);
  box-shadow: 0 0 0 100vmax rgba(15, 32, 26, 0.55), var(--tp-shadow-lg);   /* the outer shadow dims the page */
  font: 400 var(--tp-text-base)/1.6 var(--tp-font-sans);
  box-sizing: border-box;
}
.tp-footer #disclaimerPopup p,
.tp-footer #disclaimerPopup ul { font-size: var(--tp-text-sm); text-align: left; color: var(--tp-ink-soft); max-width: none; margin: 0 0 var(--tp-space-3); line-height: 1.65; }
.tp-footer #disclaimerPopup ul { list-style: disc; padding-left: 1.25rem; }
.tp-footer #disclaimerPopup li { margin-bottom: var(--tp-space-1); }
.tp-footer #disclaimerHeader { text-align: left; margin-bottom: var(--tp-space-4); }
.tp-footer #disclaimerHeader h2 { margin: 0 0 var(--tp-space-1); font: 750 var(--tp-h3)/1.2 var(--tp-font-sans); color: var(--tp-ink); text-transform: none; }
.tp-footer #disclaimerHeader p { color: var(--tp-muted); font-size: var(--tp-text-xs); }
.tp-footer #disclaimerFooter p { text-align: center; color: var(--tp-muted); font-size: var(--tp-text-xs); }
.tp-footer #closeButton {
  position: absolute; top: var(--tp-space-3); right: var(--tp-space-3);
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--tp-line-soft); color: var(--tp-ink);
  font: 400 1.5rem/1 var(--tp-font-sans);
  cursor: pointer;
}
.tp-footer #closeButton:hover { background: var(--tp-line); }

/* --- Back to top ---------------------------------------------------------------------------------------- */
#backToTop {
  min-height: 44px;
  padding: 0 var(--tp-space-4);
  border-radius: var(--tp-radius-pill);
  background-color: var(--tp-green-800);
  box-shadow: var(--tp-shadow-md);
  font: 650 var(--tp-text-sm)/1 var(--tp-font-sans);
  left: max(1rem, env(safe-area-inset-left));   /* stays on the left as before; the ad-rail code keeps rails clear of it */
  z-index: var(--tp-z-sticky);
}
#backToTop:hover { background-color: var(--tp-green-900); }

/*
====================================================================================================================================================
------------------------------------------------------------- PAGES (redesign phase 3) -------------------------------------------------------------
====================================================================================================================================================
WHY: page-level layouts for the redesigned pages, built only from the tokens and tp-* components above. One block per page.
*/

/* --- Shared page pieces --------------------------------------------------------------------------------------- */
.tp-split {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.tp-card__more { display: inline-block; margin-top: var(--tp-space-2); font-weight: 650; color: var(--tp-green-600); font-size: var(--tp-text-sm); }
.tp-page-head { padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--tp-green-50); border-bottom: 1px solid var(--tp-line); }
.tp-page-head .tp-breadcrumb { margin-bottom: var(--tp-space-4); }
.tp-page-head .tp-steps { margin-bottom: var(--tp-space-4); }
.tp-page-head p.tp-lead { margin-bottom: 0; }

/* --- Landing: hero ----------------------------------------------------------------------------------------------- */
.tp-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  background:
    radial-gradient(60rem 30rem at 85% 10%, rgba(28, 117, 78, 0.55), transparent 60%),
    linear-gradient(160deg, var(--tp-green-900), var(--tp-green-800) 55%, var(--tp-green-700));
  color: var(--tp-on-brand);
}
.tp-hero__grid { display: grid; gap: var(--tp-space-6); align-items: center; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.tp-hero h1 { color: #fff; max-width: 18ch; }
.tp-hero .tp-lead { color: rgba(255, 255, 255, 0.88); }
.tp-hero .tp-eyebrow { color: var(--tp-green-200); }
.tp-hero .tp-steps { margin-bottom: var(--tp-space-5); }
.tp-hero .tp-steps li { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); }
.tp-hero .tp-steps li::before { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tp-hero .tp-steps li[aria-current="step"] { background: #fff; color: var(--tp-green-900); }
.tp-hero .tp-steps li[aria-current="step"]::before { background: var(--tp-green-800); color: #fff; }
.tp-hero__actions { margin-top: var(--tp-space-5); }
.tp-hero__note { margin-top: var(--tp-space-4); font-size: var(--tp-text-sm); color: rgba(255, 255, 255, 0.75); }
.tp-scope .tp-hero__note a { color: #fff; }
.tp-hero__art { display: grid; place-items: center; }
.tp-hero__logo { width: min(100%, 22rem); height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35)); }
@media (max-width: 768px), (max-aspect-ratio: 7/6) {
  .tp-hero__grid { grid-template-columns: 1fr; }
  .tp-hero__art { order: -1; }
  .tp-hero__logo { width: clamp(6rem, 28vw, 11rem); }
}
/* Phone in landscape: the hero must not fill the whole (short) screen with the illustration. */
@media (max-height: 500px) and (orientation: landscape) { .tp-hero__art { display: none; } }

/* --- Landing: journey ---------------------------------------------------------------------------------------- */
.tp-journey {
  display: grid; gap: var(--tp-space-5); margin: var(--tp-space-6) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.tp-journey__step { position: relative; display: flex; flex-direction: column; gap: var(--tp-space-2); margin: 0; }
.tp-journey__step p { flex: 1; }
.tp-journey__step .tp-btn { align-self: flex-start; }
.tp-journey__num {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--tp-green-800); color: #fff; font-weight: 800;
}

/* --- Landing: example table ------------------------------------------------------------------------------------ */
.tp-example { margin: 0; padding: var(--tp-space-5); background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-md); }
.tp-example__caption { font-size: var(--tp-text-xs); font-weight: 650; color: var(--tp-muted); margin-bottom: var(--tp-space-3); }
.tp-example__scroll { overflow-x: auto; }
.tp-example__table { width: 100%; border-collapse: collapse; font-size: var(--tp-text-sm); }
.tp-example__table th { text-align: left; font-weight: 650; color: var(--tp-ink-soft); padding: var(--tp-space-2) var(--tp-space-3); border-bottom: 2px solid var(--tp-line); white-space: nowrap; }
.tp-example__table td { padding: var(--tp-space-3); border-bottom: 1px solid var(--tp-line-soft); white-space: nowrap; }
.tp-example__table td.tp-num { text-align: right; }
.tp-example__hint { margin: var(--tp-space-3) 0 0; font-size: var(--tp-text-xs); color: var(--tp-muted); }

/* --- Landing: profiles ----------------------------------------------------------------------------------------- */
.tp-profiles { margin-top: var(--tp-space-6); }
.tp-profile { display: flex; flex-direction: column; gap: var(--tp-space-1); border-top: 4px solid var(--tp-green-600); }
.tp-profile--dividend { border-top-color: var(--tp-info); }
.tp-profile--high-risk { border-top-color: var(--tp-warn); }
.tp-profile__tagline { font-weight: 650; color: var(--tp-ink-soft); margin-bottom: var(--tp-space-2); }
.tp-profile__filters { margin: var(--tp-space-2) 0 var(--tp-space-4); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }
.tp-profile__filters li { margin: 0; padding: 0.15em 0.6em; border-radius: var(--tp-radius-pill); background: var(--tp-green-50); border: 1px solid var(--tp-line); font-size: var(--tp-text-xs); font-weight: 600; color: var(--tp-ink-soft); }
.tp-profile__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-3); }
.tp-profile__learn { font-size: var(--tp-text-sm); font-weight: 600; color: var(--tp-green-600); }
.tp-profiles__disclaimer { margin-top: var(--tp-space-5); max-width: var(--tp-measure); }

/* --- Landing: features, accounts, FAQ ------------------------------------------------------------------------------ */
.tp-features { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tp-space-4); }
.tp-features li { margin: 0; padding: var(--tp-space-4) var(--tp-space-5); background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-radius); }
.tp-features strong { color: var(--tp-green-800); }
.tp-accounts { border-top: 4px solid var(--tp-green-600); }
.tp-faq { max-width: 52rem; }
.tp-faq h2 { margin-bottom: var(--tp-space-5); }

/* --- Learn / encyclopedia --------------------------------------------------------------------------------------- */
.tp-search { display: block; max-width: 36rem; margin-top: var(--tp-space-5); }
.tp-search input {
  width: 100%; min-height: 52px; box-sizing: border-box;
  padding: 0 var(--tp-space-4) 0 2.75rem;
  border: 1.5px solid var(--tp-line); border-radius: var(--tp-radius-pill);
  background: var(--tp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235E6E64' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1rem center;
  font: 400 var(--tp-text-base)/1.2 var(--tp-font-sans); color: var(--tp-ink);
  box-shadow: var(--tp-shadow-sm);
}
.tp-search input:focus { outline: 3px solid var(--tp-focus); outline-offset: 2px; border-color: var(--tp-green-600); }

.tp-link-list { margin: 0; padding: 0; list-style: none; }
.tp-link-list li { margin: 0; padding: var(--tp-space-3) 0; border-bottom: 1px solid var(--tp-line-soft); }
.tp-link-list li:last-child { border-bottom: 0; }
.tp-scope .tp-link-list a { font-weight: 650; text-decoration: none; }
.tp-scope .tp-link-list a:hover { text-decoration: underline; }

.tp-learn__all { display: grid; gap: var(--tp-space-6) var(--tp-space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.tp-learn__all > .tp-empty { grid-column: 1 / -1; }
.tp-learn__cat-title { font-size: var(--tp-text-lg); margin: 0 0 var(--tp-space-2); }
.tp-scope .tp-learn__cat-title a { color: var(--tp-ink); text-decoration: none; }
.tp-learn__item-summary { display: block; margin-top: var(--tp-space-1); font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tp-learn__terms { max-height: 28rem; overflow-y: auto; padding-right: var(--tp-space-2); }

.tp-learn__layout {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  padding-block: var(--tp-space-7);
}
@media (max-width: 900px), (max-aspect-ratio: 7/6) { .tp-learn__layout { grid-template-columns: minmax(0, 1fr); } }
.tp-learn__article { max-width: var(--tp-measure); }
.tp-learn__article h2 { font-size: var(--tp-h3); margin-top: var(--tp-space-6); }
.tp-learn__article .tp-callout { margin: var(--tp-space-6) 0 var(--tp-space-4); }
.tp-learn__aside { display: grid; gap: var(--tp-space-4); }
.tp-learn__aside-title { font-size: var(--tp-text-base); margin: 0 0 var(--tp-space-3); }
.tp-terms { margin: 0; }
.tp-terms dt { font-weight: 700; color: var(--tp-green-900); margin-top: var(--tp-space-3); }
.tp-terms dt:first-child { margin-top: 0; }
.tp-terms dd { margin: var(--tp-space-1) 0 0; font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tp-learn__group { margin: var(--tp-space-7) 0 var(--tp-space-4); }
.tp-learn__cats ul { margin: 0; padding: 0; list-style: none; }
.tp-scope a.tp-chip--link { text-decoration: none; color: var(--tp-green-900); padding-inline: var(--tp-space-4); }
.tp-scope a.tp-chip--link:hover { background: var(--tp-green-100); }

.tp-az { display: flex; flex-wrap: wrap; gap: var(--tp-space-1); margin-bottom: var(--tp-space-5); position: sticky; top: var(--tp-header-h, 0px); z-index: 2; padding: var(--tp-space-2) 0; background: var(--tp-paper); }
.tp-scope .tp-az a { display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; border-radius: var(--tp-radius-sm); font-weight: 700; text-decoration: none; color: var(--tp-green-800); background: var(--tp-green-50); }
.tp-scope .tp-az a:hover { background: var(--tp-green-100); }
.tp-glossary { max-width: 52rem; }
.tp-glossary__letter { font-size: var(--tp-h3); margin: var(--tp-space-6) 0 var(--tp-space-2); padding-bottom: var(--tp-space-2); border-bottom: 2px solid var(--tp-green-600); color: var(--tp-green-800); }
.tp-glossary__entry { padding: var(--tp-space-3) 0; border-bottom: 1px solid var(--tp-line-soft); scroll-margin-top: calc(var(--tp-header-h, 0px) + 4rem); }
.tp-glossary__entry:target { background: var(--tp-green-50); outline: 2px solid var(--tp-green-200); border-radius: var(--tp-radius-sm); padding-inline: var(--tp-space-3); }
.tp-glossary__term { font-size: var(--tp-text-base); margin: 0 0 var(--tp-space-1); }
.tp-glossary__entry p { margin: 0; }

/* Component headings keep their own size inside .tp-scope (.tp-scope h2/h3 would otherwise win on specificity). */
.tp-scope .tp-card__title { font-size: var(--tp-text-lg); margin: 0 0 var(--tp-space-2); }
.tp-scope .tp-learn__aside-title { font-size: var(--tp-text-base); margin: 0 0 var(--tp-space-3); letter-spacing: 0; }
.tp-scope .tp-learn__cat-title { font-size: var(--tp-text-lg); margin: 0 0 var(--tp-space-2); }
.tp-scope .tp-glossary__term { font-size: var(--tp-text-base); margin: 0 0 var(--tp-space-1); }
.tp-scope .tp-glossary__letter { font-size: var(--tp-h3); }
.tp-scope .tp-empty__title, .tp-scope .tp-next__title { font-size: var(--tp-text-lg); }
.tp-scope .tp-modal__title { font-size: var(--tp-h3); }

/* --- Screener ------------------------------------------------------------------------------------------------- */
.tp-screener__intro { margin-top: var(--tp-space-6); }
.tp-scope .tp-screener__h2 { font-size: var(--tp-h3); margin: 0 0 var(--tp-space-3); }
.tp-screener__profiles { margin-top: var(--tp-space-6); }
.tp-segmented { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }
.tp-segmented__btn {
  min-height: 44px; padding: 0 var(--tp-space-5);
  border: 1.5px solid var(--tp-green-200); border-radius: var(--tp-radius-pill);
  background: var(--tp-surface); color: var(--tp-green-900);
  font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); cursor: pointer;
}
.tp-segmented__btn:hover { background: var(--tp-green-50); color: var(--tp-green-900); }
.tp-segmented__btn[aria-pressed="true"] { background: var(--tp-green-800); border-color: var(--tp-green-800); color: #fff; }
.tp-preset-info { margin-top: var(--tp-space-4); max-width: 52rem; }
.tp-preset-info p { margin-bottom: var(--tp-space-2); }
.tp-preset-info__name { font-weight: 750; color: var(--tp-green-900); }
.tp-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-2) var(--tp-space-3); margin-top: var(--tp-space-5); }
.tp-active-filters[hidden] { display: none; }
.tp-active-filters__label { font-weight: 650; font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tp-active-filters .tp-chips { margin: 0; padding: 0; list-style: none; }
.tp-active-filters .tp-chip { margin: 0; }

.tp-screener__results { margin-top: var(--tp-space-6); }
.tp-screener__results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tp-space-2) var(--tp-space-4); }
.tp-scope .tp-screener__hint { margin: 0 0 var(--tp-space-3); font-size: var(--tp-text-sm); }
.tp-screener .screeningTableContainer { width: auto; max-width: none; margin: 0; }
.tp-screener__adjust { margin-bottom: var(--tp-space-4); }
.tp-screener .screeningSelect-Box { font-size: var(--tp-text-base); text-transform: none; color: var(--tp-ink); padding: var(--tp-space-2) 2.5rem var(--tp-space-2) 0; }
.tp-screener .screeningSelect-Box::after { width: 2rem; height: 2rem; right: 0; color: var(--tp-green-800); font-size: 1.5rem; }
.tp-screener .screeningOption-Item {
  flex: 0 0 auto; margin: 0.2rem; padding: 0.45rem 0.8rem;
  border-radius: var(--tp-radius-pill); font-size: var(--tp-text-sm);
  background: var(--tp-green-50); color: var(--tp-green-900); border: 1px solid var(--tp-green-200);
}
.tp-screener .screeningOption-Item.selected { background: var(--tp-green-800); color: #fff; border-color: var(--tp-green-800); }
.tp-screener .screeningOption-Item:hover { background: var(--tp-green-100); color: var(--tp-green-900); }
.tp-screener .screeningOption-Item.selected:hover { background: var(--tp-green-900); color: #fff; }
.tp-screener .screeningOptions-Container.expanded { max-height: none; padding: var(--tp-space-3); border-radius: var(--tp-radius); }
.tp-screener .tpPanelLead { font-size: var(--tp-text-sm); color: var(--tp-ink-soft); margin: var(--tp-space-3) 0; }
.tp-screener .screeningTableInput-container { justify-content: flex-start; margin-bottom: var(--tp-space-3); }
.tp-screener .screeningTableButton { font-size: var(--tp-text-sm); }

/* The table: readable rem sizes, light zebra, hover; the first column (Ticker) stays visible while the table
   scrolls sideways, so a row can always be identified on a phone. */
.tp-screener #screeningTable { margin-top: 0; font-size: var(--tp-text-sm); }
.tp-screener .screeningTableStyle th { font-size: var(--tp-text-xs); padding: var(--tp-space-2); border-color: rgba(255, 255, 255, 0.18); background: var(--tp-green-800); vertical-align: top; }
.tp-screener .screeningTableStyle td { font-size: var(--tp-text-sm); padding: var(--tp-space-2) var(--tp-space-3); border: 0; border-bottom: 1px solid var(--tp-line-soft); color: var(--tp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--tp-surface); }
.tp-screener .screeningTableStyle tr:nth-child(even) td { background: var(--tp-paper); }
.tp-screener .screeningTableStyle tr.screenerRow-link { cursor: pointer; }
.tp-screener .screeningTableStyle tr.screenerRow-link:hover td { background: var(--tp-green-50); }
.tp-screener .screeningTableStyle td a { color: var(--tp-green-800); font-weight: 700; }
.tp-screener #screeningTable tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--tp-line); }
.tp-screener #screeningTable th:first-child { z-index: 2; }
.tp-screener .screeningTableInputBox { width: 100%; min-height: 36px; font-size: var(--tp-text-xs); border-radius: var(--tp-radius-sm); padding: 0 var(--tp-space-2); }
/* "No stocks match": the text wraps inside the table's own width (the columns decide how wide the table is). It
   used to inherit the cells' white-space:nowrap - the general td rule is more specific than .screenerEmpty-cell -
   so the sentence made the table wider than its columns and ran out of the box. */
.tp-screener .screeningTableStyle td.screenerEmpty-cell { white-space: normal; position: static !important; box-shadow: none !important; background: var(--tp-surface) !important; text-align: center; }
.tp-screener .screenerEmpty-cell .tp-empty { padding-block: var(--tp-space-6); max-width: 36rem; margin-inline: auto; }
/* When the columns make the table wider than the box, the message stays in the VISIBLE part of the box: it is
   pinned to the left edge of the scroll area (sticky) and exactly as wide as that area (container query unit). */
.tp-screener .screenerTable-scroll { container-type: inline-size; }
.tp-screener .screenerEmpty-cell .tp-empty { position: sticky; left: 0; box-sizing: border-box;
  width: min(100cqw, 100%); max-width: none; margin-inline: 0; padding-inline: var(--tp-space-5); }
.tp-screener .screenerEmpty-cell .tp-empty > p { max-width: 36rem; margin-inline: auto; }
.screenerInfo-more { display: inline-block; margin-top: var(--tp-space-2); font-weight: 650; color: var(--tp-green-600); }
.tp-screener__disclaimer { margin-top: var(--tp-space-4); }
.tp-screener__howto { margin-top: var(--tp-space-7); max-width: 52rem; }
.tp-screener__howto .tpMini { margin-top: var(--tp-space-3); }
.tp-screener__howto p.tpStep-body, .tp-screener__howto p.tpLead-body { font-size: var(--tp-text-base); color: var(--tp-ink); }
.tp-screener .horizontal-bar { margin-block: var(--tp-space-6); }

/* --- Stock page --------------------------------------------------------------------------------------------- */
.tp-stock .tp-page-head .tp-steps { margin-bottom: var(--tp-space-3); }
.tp-stock__search { display: flex; flex-wrap: wrap; gap: var(--tp-space-3); align-items: flex-start; margin-top: var(--tp-space-5); max-width: 44rem; }
.tp-stock__search .ticker-search-wrapper { flex: 1 1 auto; min-width: min(100%, 18rem); }   /* basis 'auto': 18rem became a HEIGHT when the form stacks as a column, which pushed the result list 288px down */
.tp-stock__search #symbolInput { width: 100%; min-height: 52px; box-sizing: border-box; border-radius: var(--tp-radius-pill); font-size: var(--tp-text-base); padding-left: 2.75rem; border: 1.5px solid var(--tp-line); background-color: var(--tp-surface); }
.tp-stock__search .chartButton { min-height: 52px; }
.tp-stock__search #symbolErrorMessage { flex-basis: 100%; margin: 0; color: var(--tp-down); }
.tp-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tp-space-2); }
.tp-checklist li { margin: 0; padding-left: 1.6rem; position: relative; }
.tp-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--tp-green-600); font-weight: 800; }

/* Company header: the same .co-* markup the scripts fill, restyled on the page-head band. */
.tp-stock__head .full-width-textbox { position: relative; width: auto; max-width: none; padding: 0; margin: 0; background: transparent; box-shadow: none; }
.tp-stock .co-head { display: block; }
.tp-stock .co-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-2) var(--tp-space-3); }
.tp-stock .co-title h1, .tp-stock .co-title h2 { margin: 0; font-size: var(--tp-h1); }
.tp-stock .co-tag { font: 700 var(--tp-text-xs)/1.4 var(--tp-font-sans); padding: 0.2em 0.7em; border-radius: var(--tp-radius-pill); background: var(--tp-green-100); color: var(--tp-green-900); }
.tp-stock .co-tag:empty, .tp-stock .co-tag:has(> span:empty) { display: none; }
.tp-stock .co-facts { display: flex; flex-wrap: wrap; gap: var(--tp-space-2) var(--tp-space-5); margin: var(--tp-space-4) 0; font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tp-stock .co-facts b { color: var(--tp-ink); font-weight: 650; }
/* Key figures rendered only for a verified search-engine crawler (stock_bot_facts, DECISIONS D41); people see the
   same figures in Key Statistics after accepting the terms. Same look as the header facts. */
.tp-stock .co-botfacts { display: flex; flex-wrap: wrap; gap: var(--tp-space-2) var(--tp-space-5); margin: var(--tp-space-4) 0 0; font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tp-stock .co-botfacts dt { display: inline; color: var(--tp-ink); font-weight: 650; }
.tp-stock .co-botfacts dt::after { content: ": "; }
.tp-stock .co-botfacts dd { display: inline; margin: 0; }
.tp-stock .co-desc { max-width: var(--tp-measure); font-size: var(--tp-text-base); color: var(--tp-ink-soft); margin: 0; }

.tp-stock .tp-section-nav { margin: 0; padding: 0; }
.tp-section-nav__inner { display: flex; gap: var(--tp-space-1); overflow-x: auto; scrollbar-width: none; padding-block: var(--tp-space-2); }
.tp-section-nav__inner::-webkit-scrollbar { display: none; }
.tp-scope .tp-section-nav a { flex: none; color: var(--tp-ink-soft); text-decoration: none; }

.tp-stock__body { padding-top: var(--tp-space-6); }
.tp-stock__section { margin-top: var(--tp-space-7); scroll-margin-top: calc(var(--tp-header-h, 0px) + 3.5rem); }
.tp-stock #keyStatsSection, .tp-stock #financialsSection, .tp-stock #policySection, .tp-stock #newsSection, .tp-stock #tpInShort { scroll-margin-top: calc(var(--tp-header-h, 0px) + 3.5rem); }
.tp-section-intro { max-width: var(--tp-measure); margin: 0 0 var(--tp-space-3); padding: var(--tp-space-3) var(--tp-space-4); border-radius: var(--tp-radius-sm); background: var(--tp-green-50); border: 1px solid var(--tp-green-100); font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }

.tp-inshort { border-top: 4px solid var(--tp-green-600); }
.tp-scope .tp-inshort__title { font-size: var(--tp-h3); margin-bottom: var(--tp-space-4); }
.tp-inshort__grid { display: grid; gap: var(--tp-space-4) var(--tp-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.tp-inshort .tp-stat { padding: var(--tp-space-3) 0; border-top: 1px solid var(--tp-line-soft); }
.tp-stat__note { font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tp-inshort__sector { margin: var(--tp-space-5) 0 var(--tp-space-3); }

/* The chart, sections and tables use the full content width inside the redesigned page. */
.tp-stock .chart-container { width: auto; max-width: none; margin: 0; }
.tp-stock .custom-select { width: clamp(12rem, 16vw, 18rem); }
.tp-stock .chartTitel { font-size: var(--tp-h3); text-align: left; text-transform: none; }
.tp-stock .sec h2 { font-size: var(--tp-h3); text-transform: none; text-align: left; }
.news-day { margin: var(--tp-space-6) 0 var(--tp-space-2); padding-bottom: var(--tp-space-2); border-bottom: 2px solid var(--tp-green-600); font-size: var(--tp-text-base); color: var(--tp-green-900); text-transform: none; }
.news-list > .news-day:first-child { margin-top: var(--tp-space-2); }
.tp-stock .horizontal-bar { margin-block: var(--tp-space-6); }
.tp-stock [data-tp-term] .tp-info { font-size: 0.7rem; }
/* The sections fill the redesigned content column (the legacy rule fixed them at 60% of the window). */
.tp-stock #keyStatsSection, .tp-stock #financialsSection, .tp-stock #policySection, .tp-stock #newsSection { width: auto; margin-left: 0; margin-right: 0; }
.tp-stock #stockInfoContent .sec { margin-top: 0; }
.tp-stock #stockInfoContent .sec > h2 { font-size: var(--tp-h3); color: var(--tp-ink); border-top: 0; padding-top: 0; }
/* Long company descriptions: 4 lines, then "Read the full description". */
.tp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.tp-clamp.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.tp-clamp-toggle { margin-top: var(--tp-space-2); padding-inline: 0; }
/* The legacy phone rules for the company header (#stockInfoContent ...) are larger and bolder; keep the new scale. */
.tp-stock #stockInfoContent .co-title h1, .tp-stock #stockInfoContent .co-title h2 { font-size: var(--tp-h1); }
.tp-stock #stockInfoContent .co-facts { font-size: var(--tp-text-sm); font-weight: 400; gap: var(--tp-space-1) var(--tp-space-4); }
.tp-stock #stockInfoContent .co-desc { font-size: var(--tp-text-base); line-height: var(--tp-leading); font-weight: 400; }
.tp-stock #stockInfoContent .full-width-textbox { border: 0; padding: 0; }
.tp-inshort__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--tp-space-3) var(--tp-space-4); }
.tp-stock #stockInfoContent .co-head, .tp-stock #stockInfoContent .full-width-textbox { border-left: 0; padding-left: 0; }

/* --- Article pages (news, about, blog, contact) ---------------------------------------------------------- */
.tp-prose-layout {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
  padding-block: var(--tp-space-7);
}
@media (max-width: 900px), (max-aspect-ratio: 7/6) { .tp-prose-layout { grid-template-columns: minmax(0, 1fr); } }
.tp-prose { max-width: var(--tp-measure); }
.tp-prose h2 { font-size: var(--tp-h3); margin-top: var(--tp-space-6); }
.tp-prose > :first-child, .tp-prose section:first-child h2 { margin-top: 0; }
.tp-prose ul { padding-left: 1.25rem; margin: 0 0 var(--tp-space-4); }
.tp-prose li { margin-bottom: var(--tp-space-2); }
.tp-prose .tp-badge { margin-bottom: var(--tp-space-2); }
.tp-prose section { scroll-margin-top: calc(var(--tp-header-h, 0px) + 1rem); }
.tp-prose-aside { display: grid; gap: var(--tp-space-4); position: sticky; top: calc(var(--tp-header-h, 0px) + 1rem); }
@media (max-width: 900px), (max-aspect-ratio: 7/6) { .tp-prose-aside { position: static; } }
.tp-upcoming li { font-size: var(--tp-text-sm); }
.tp-article-page .horizontal-bar { margin-inline: auto; }

/* Forms in the new look (contact form; account pages below). */
.tp-form { display: grid; gap: var(--tp-space-2); }
.tp-form label { font-weight: 650; font-size: var(--tp-text-sm); color: var(--tp-ink); margin-top: var(--tp-space-2); }
.tp-form input, .tp-form select, .tp-form textarea,
.tp-account input[type="text"], .tp-account input[type="email"], .tp-account input[type="password"], .tp-account select, .tp-account textarea {
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: var(--tp-space-2) var(--tp-space-3);
  border: 1.5px solid var(--tp-line); border-radius: var(--tp-radius-sm);
  background: var(--tp-surface); color: var(--tp-ink);
  font: 400 var(--tp-text-base)/1.4 var(--tp-font-sans);
}
.tp-form textarea { min-height: 10rem; }
.tp-form input:focus, .tp-form select:focus, .tp-form textarea:focus,
.tp-account input:focus, .tp-account select:focus, .tp-account textarea:focus { outline: 3px solid var(--tp-focus); outline-offset: 1px; border-color: var(--tp-green-600); }
.tp-form .tp-btn { justify-self: start; margin-top: var(--tp-space-3); }
.tp-form .error, .tp-account .error { color: var(--tp-down); font-size: var(--tp-text-sm); margin: 0; }
.tp-form-card h2 { font-size: var(--tp-h3); }

/* --- Account, sign-up and receipt pages ------------------------------------------------------------------ */
.tp-account { display: block; padding: var(--tp-section) var(--tp-gutter); background: linear-gradient(180deg, var(--tp-green-50), var(--tp-paper) 22rem); }
.tp-account .login-container, .tp-account .login-container2, .tp-account .login-container3, .tp-account .affiliate-container {
  width: min(100%, 30rem); max-width: none; box-sizing: border-box;
  margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-radius-lg);
  box-shadow: var(--tp-shadow-md); font-family: var(--tp-font-sans); color: var(--tp-ink);
}
.tp-account .login-container3, .tp-account .affiliate-container { width: min(100%, 64rem); }
.tp-account h1 { font-size: var(--tp-h2); text-align: center; margin: 0 0 var(--tp-space-5); color: var(--tp-ink); }
.tp-account h2 { color: var(--tp-ink); }
.tp-account label { font-weight: 650; font-size: var(--tp-text-sm); }
.tp-account .form-group { margin-bottom: var(--tp-space-4); }
.tp-account .login-button2 {
  width: 100%; min-height: 48px; border: 0; border-radius: var(--tp-radius-pill);
  background: var(--tp-green-800); color: #fff; cursor: pointer;
  font: 700 var(--tp-text-base)/1 var(--tp-font-sans); letter-spacing: 0.02em;
}
.tp-account .login-button2:hover { background: var(--tp-green-900); }
.tp-account a { color: var(--tp-green-700); }
.tp-account .register-link, .tp-account .forgot-password-link { text-align: center; font-size: var(--tp-text-sm); margin-top: var(--tp-space-3); }
/* Account settings rows: label and value wrap instead of pushing long e-mails off a phone screen. */
.tp-account .profile-row { display: flex; flex-wrap: wrap; gap: var(--tp-space-1) var(--tp-space-4); justify-content: space-between; }
.tp-account .profile-label { flex: 1 1 10rem; }
.tp-account .profile-value { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; text-align: right; }
@media (max-width: 560px) { .tp-account .profile-value { text-align: left; } }
.tp-account .upgrade-cost-info { font-size: var(--tp-text-base); overflow-wrap: anywhere; padding-left: 0; }   /* was 4rem, wider than a phone */
.tp-account .login-container, .tp-account .login-container2 { min-height: 0; height: auto; }

/*
====================================================================================================================================================
-------------------------------------------------------- ADS, CONSENT AND DIALOGS (redesign phase 5) ----------------------------------------------
====================================================================================================================================================
WHY: ad slots are clearly separated from content and labelled "Advertisements" (AdSense allows only that label or
"Sponsored Links"), their height is reserved once ads are switched on (body.tp-ads-on, set by loadAdScripts after the
consent choice) so the page does not jump, and an unfilled slot collapses instead of leaving an empty box. Paying users
(body.ad-free) never see a slot. The shared dialogs get the design-system look.
*/
.tp-ads-on .horizontal-bar.tp-ad-filled,
.tp-ads-on .encyclopedia-ad.tp-ad-filled {
  position: relative; box-sizing: border-box;
  width: min(var(--tp-max), 100%); max-width: var(--tp-max);
  min-height: calc(var(--tp-ad-h) + 1.75rem);
  margin: var(--tp-space-6) auto; padding: 1.5rem var(--tp-space-2) var(--tp-space-2);
  border: 1px dashed var(--tp-line); border-radius: var(--tp-radius-sm);
  background: var(--tp-paper);
}
.tp-ads-on .tp-ad-filled::before {
  content: "Advertisements";
  position: absolute; top: 0.35rem; left: var(--tp-space-2);
  font: 600 var(--tp-text-xs)/1.2 var(--tp-font-sans);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-muted);
}
.tp-ads-on .sticky-left-sidebar.tp-ad-filled, .tp-ads-on .sticky-right-sidebar.tp-ad-filled { padding-top: 1.5rem; box-sizing: border-box; }
.tp-ads-on .sticky-left-sidebar.tp-ad-filled::before, .tp-ads-on .sticky-right-sidebar.tp-ad-filled::before { position: absolute; }
/* AdSense marks a slot it could not fill; collapse it so no empty labelled box remains. */
.tp-ad-filled:has(ins[data-ad-status="unfilled"]) { display: none !important; }
body.ad-free .tp-ad-filled { display: none !important; }

/* Footer: "Privacy and cookie settings" looks like the other legal links. */
.tp-footer .tp-footer__linkbtn {
  padding: 0.3rem 0; border: 0; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, 0.9); font: inherit; font-size: var(--tp-text-sm); text-align: left;
}
.tp-footer .tp-footer__linkbtn:hover { color: #fff; text-decoration: underline; background: transparent; }

/* Shared dialogs (ToS, re-accept, ad-required, daily limit): same ids/classes, design-system look. */
.tos-modal, .adblock-modal { background: rgba(15, 32, 26, 0.55) !important; align-items: center; justify-content: center; padding: var(--tp-space-4); box-sizing: border-box; }
.tos-modal .tos-modal-content, .adblock-modal .adblock-modal-content {
  width: min(36rem, 100%); max-width: none; max-height: min(88dvh, 88vh); overflow: auto; box-sizing: border-box;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--tp-surface); color: var(--tp-ink);
  border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-lg);
  font: 400 var(--tp-text-base)/1.6 var(--tp-font-sans); text-align: left;
}
.tos-modal h2, .adblock-modal h2 { font-size: var(--tp-h3); margin: 0 0 var(--tp-space-3); color: var(--tp-ink); text-transform: none; text-align: left; }
.tos-modal p, .adblock-modal p { font-size: var(--tp-text-base); margin: 0 0 var(--tp-space-3); color: var(--tp-ink-soft); text-align: left; }
.tos-summary { margin: 0 0 var(--tp-space-3); padding-left: 1.2rem; color: var(--tp-ink); }
.tos-summary li { margin-bottom: var(--tp-space-2); }
.tos-modal-note { font-size: var(--tp-text-sm) !important; color: var(--tp-muted) !important; }
.tos-modal-actions { display: flex; flex-wrap: wrap; gap: var(--tp-space-3); margin-top: var(--tp-space-4); }
.tos-modal .modal-button, .adblock-modal .modal-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0;
  padding: 0 var(--tp-space-5); border-radius: var(--tp-radius-pill); cursor: pointer; text-decoration: none;
  font: 650 var(--tp-text-sm)/1.2 var(--tp-font-sans); width: auto;
}
.tos-modal .modal-button.accept, .adblock-modal .modal-button.adblock { background: var(--tp-green-800); color: #fff; border: 2px solid var(--tp-green-800); }
.tos-modal .modal-button.accept:hover { background: var(--tp-green-900); }
.tos-modal .modal-button.reject { background: var(--tp-surface); color: var(--tp-green-800); border: 2px solid var(--tp-green-800); }
.tos-modal .tos-link { color: var(--tp-green-700); font-weight: 650; }
@media (max-width: 768px) {
  .tos-modal, .adblock-modal { align-items: flex-end !important; padding: 0; }
  .tos-modal .tos-modal-content, .adblock-modal .adblock-modal-content { width: 100%; border-radius: var(--tp-radius-lg) var(--tp-radius-lg) 0 0; padding-bottom: max(var(--tp-space-5), env(safe-area-inset-bottom)); }
  .tos-modal-actions .modal-button { flex: 1 1 100%; }
}

/* Empty ad slots take no space; a slot appears only once fillAdSlots() has put an ad unit in it (tp-ad-filled). This
   replaces the old fixed grey 300px .horizontal-bar box, which showed even when no ad came. */
.horizontal-bar:not(.tp-ad-filled), .encyclopedia-ad:not(.tp-ad-filled) { display: none !important; }
.tp-ads-on .horizontal-bar.tp-ad-filled { display: block; height: auto; overflow: hidden; }
.tp-prose .horizontal-bar.tp-ad-filled, .tp-learn__article .horizontal-bar.tp-ad-filled { width: 100%; }

/* Side rails (wide landscape screens only, as before): at most 300px wide (the standard 300x600 unit; on ultrawide
   screens 15.6vw grew to 500+px), transparent until an ad is placed, and the page content keeps clear of them.
   The space is reserved for everyone who is not a confirmed subscriber (body.ad-free), from the first paint, so the
   content does not jump when the ads arrive; subscribers get the full width as soon as their plan is confirmed. */
:root { --tp-rail-w: min(15.625vw, 300px); --tp-rail-gap: calc(var(--tp-rail-w) + 1.04167vw + 1.5rem); }
.sticky-left-sidebar, .sticky-right-sidebar { width: var(--tp-rail-w); }
.sticky-left-sidebar:not(.tp-ad-filled), .sticky-right-sidebar:not(.tp-ad-filled) { background: transparent; pointer-events: none; }
@media (min-aspect-ratio: 7/6) and (min-width: 769px) {
  html:not([data-tp-ads="off"]) body:not(.ad-free) main:not(.tp-account):not(.tp-landing):not(.tp-noads) { --tp-max: min(calc(100vw - 2 * var(--tp-rail-gap)), 72rem); }
}
/* Long button labels wrap instead of pushing past a narrow screen; grid children may shrink below their content
   width so inner scroll areas (example table, screener table) scroll instead of widening the page. */
.tp-btn { white-space: normal; text-align: center; max-width: 100%; }
.tp-split > *, .tp-grid > *, .tp-prose-layout > *, .tp-learn__layout > *, .tp-hero__grid > * { min-width: 0; }

/* Unusual-value flag as a button (screener cells, stock page): keeps its warning look on hover (the global green
   button:hover would otherwise win) and has at least a 24px target (WCAG 2.5.8). */
button.tp-flag { min-height: 24px; cursor: pointer; }
button.tp-flag:hover, button.tp-flag[aria-expanded="true"] { background: var(--tp-warn-hover); color: var(--tp-warn); }
.tp-flag--legend { cursor: default; }

/* News Cycle Score band per day (feature flag; redesign-prompt section 13). */
.news-day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-2); }
.news-day--band { padding: var(--tp-space-2) var(--tp-space-3); border: 1px solid var(--tp-line); border-bottom: 2px solid var(--tp-green-600); border-radius: var(--tp-radius-sm) var(--tp-radius-sm) 0 0; background: var(--tp-green-50); }
.news-cycle { display: inline-flex; align-items: center; gap: 0.3em; font: 650 var(--tp-text-xs)/1.4 var(--tp-font-sans); white-space: normal; }
.tp-scope .news-day { font-size: var(--tp-text-base); }

/* Accessibility fixes found by Lighthouse (2026-10-17): sufficient contrast for the older grey notes, links inside
   running text are underlined (not only coloured), and the logo keeps its real proportions (129x107). */
.tp-header .tp-logo__icon { width: auto; height: 2.25rem; }
.tp-footer__logo { width: auto; height: 1.75rem; }
#stockInfoContent .fin-note, #stockInfoContent .policy-intro, #stockInfoContent .pc-head .score { color: var(--tp-muted); }
.screenerPanel .screener-error { color: var(--tp-down); }
.tp-scope p a:not([class]), .tp-scope li a:not([class]), .tp-section-intro a { text-decoration: underline; text-underline-offset: 0.18em; }
#stockInfoContent .news-item .meta, .news-item .meta { color: var(--tp-muted); }
#stockInfoContent .news-tag .nt-label, .news-tag .nt-label { color: inherit; opacity: 1; font-weight: 700; }   /* full contrast; was opacity .62 */

/* Touch targets (redesign-prompt section 14: ~44px). The icons stay visually small; an invisible ::after enlarges the
   area that reacts to a tap. */
.tp-info, .screenerInfo-btn, .sort-up, .sort-down { position: relative; }
.tp-info::after, .screenerInfo-btn::after, .sort-up::after, .sort-down::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.sort-up::after, .sort-down::after { height: 24px; }   /* the two arrows sit on top of each other */
.tp-steps a { display: inline-flex; align-items: center; min-height: 32px; }
.tp-footer nav a { padding: 0.55rem 0; }
.tp-footer .socialMediaContainer { width: 44px; height: 44px; }
.tp-footer .socialMediaContainer a { width: 44px; height: 44px; }

/* The price chart on phones: tall enough to read, controls stacked with full-width inputs. */
@media (max-width: 600px) {
  .tp-stock .chart-container canvas#chart { min-height: 55svh; }
  .tp-stock .controls-container, .tp-stock .controls-group { display: flex; flex-direction: column; align-items: stretch; gap: var(--tp-space-2); width: 100%; }
  .tp-stock .custom-select, .tp-stock .custom-select select, .tp-stock .chart-search-wrapper, .tp-stock #stockSymbolInput { width: 100% !important; max-width: none; }
  .tp-stock .chartButton { width: 100%; min-height: 44px; }
}

/* Narrowest phones: the header items fit without a sub-pixel horizontal scroll. */
@media (max-width: 380px) {
  .tp-header__inner { gap: var(--tp-space-2); padding-inline: var(--tp-space-3); }
  .tp-header .tp-header__actions.top-bar-right { gap: var(--tp-space-1); min-width: 0; }
}

/* Landing: "How to find a good stock" steps (redesign-prompt section 4.2). */
.tp-ropes { display: grid; gap: var(--tp-space-4); margin: var(--tp-space-6) 0 var(--tp-space-7); padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.tp-ropes__step { display: flex; gap: var(--tp-space-3); align-items: flex-start; margin: 0; }
.tp-ropes__step p { margin-bottom: var(--tp-space-2); font-size: var(--tp-text-sm); }
.tp-scope .tp-journey__heading { font-size: var(--tp-h3); margin-top: var(--tp-space-6); }

/* Editable filter chips (screener). */
.tp-chip__edit { border: 0; background: transparent; color: inherit; font: inherit; padding: 0.35rem 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 0.2em; min-height: 32px; }
.tp-chip__edit:hover { background: transparent; color: var(--tp-green-800); }
.tp-chip--editing { padding: var(--tp-space-2) var(--tp-space-3); border-radius: var(--tp-radius); }
.tp-chip__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-2); }
.tp-chip__form input { width: 6.5rem; min-height: 36px; padding: 0 var(--tp-space-2); border: 1.5px solid var(--tp-line); border-radius: var(--tp-radius-sm); font: inherit; }

/*
====================================================================================================================================================
------------------------------------------------------------ POLISH (2026-10-18) ------------------------------------------------------------------
====================================================================================================================================================
WHY: the owner asked for a more refined look, starting from the design sketch (sketches/TickerPickerGrokMouse) and going
further: self-hosted typefaces (Fraunces headings, Plus Jakarta Sans text, JetBrains Mono figures), a light glassy
header, a deep green footer, softer cards with icon tiles, a hero with a product mock-up, and calmer tables.
Only appearance changes here - no structure, ids or behaviour. Placed last so it refines everything above.
*/

/* --- Base ------------------------------------------------------------------------------------------------------------ */
:root {
  --tp-line: var(--tp-line-cool);
  --tp-line-soft: var(--tp-line-faint);
  --tp-paper: var(--tp-wash-soft);
  --tp-shadow-sm: 0 1px 2px rgba(15, 61, 46, 0.05), 0 2px 6px rgba(15, 61, 46, 0.04);
  --tp-shadow-md: 0 10px 30px -12px rgba(15, 61, 46, 0.22), 0 2px 6px rgba(15, 61, 46, 0.05);
  --tp-shadow-lg: 0 30px 60px -24px rgba(15, 61, 46, 0.35), 0 8px 18px -8px rgba(15, 61, 46, 0.12);
  --tp-radius: 16px;
  --tp-radius-lg: 24px;
  --tp-mint-wash: radial-gradient(70rem 32rem at 85% -10%, rgba(28, 117, 78, 0.14), transparent 60%),
                  radial-gradient(50rem 28rem at -10% 10%, rgba(167, 243, 200, 0.18), transparent 55%);
}
body { font-family: var(--tp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.tp-scope { font-family: var(--tp-font-sans); }
.tp-scope h1, .tp-h1 { font-family: var(--tp-font-display); font-weight: 600; letter-spacing: -0.012em; font-variation-settings: "opsz" 72, "SOFT" 30; }
.tp-scope h2, .tp-h2 { font-family: var(--tp-font-display); font-weight: 600; letter-spacing: -0.01em; font-variation-settings: "opsz" 60, "SOFT" 30; }
.tp-scope h3, .tp-scope .tp-card__title { font-family: var(--tp-font-sans); font-weight: 700; letter-spacing: -0.01em; }
.tp-accent { font-family: var(--tp-font-display); font-style: italic; font-weight: 600; color: var(--tp-green-600); font-variation-settings: "opsz" 72, "SOFT" 60; }
.tp-num, .tp-mono, .tp-scope td.tp-num { font-family: var(--tp-font-mono); font-variant-numeric: tabular-nums; }
.tp-lead { color: var(--tp-ink-soft); }
::selection { background: var(--tp-green-200); color: var(--tp-green-950); }

/* Icons from the sprite (TickerPickerIcons.html). */
.tp-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.tp-icon--sm { width: 1em; height: 1em; }
.tp-btn .tp-icon { transition: transform var(--tp-fast) var(--tp-ease); }
.tp-btn:hover .tp-icon { transform: translateX(2px); }

/* Pill badge (hero eyebrow, after the sketch). */
.tp-pill-badge {
  display: inline-flex; align-items: center; gap: var(--tp-space-2);
  padding: 0.35rem 0.85rem 0.35rem 0.6rem; margin-bottom: var(--tp-space-4);
  border: 1px solid var(--tp-green-200); border-radius: var(--tp-radius-pill);
  background: var(--tp-green-50); color: var(--tp-green-800);
  font: 600 var(--tp-text-sm)/1.2 var(--tp-font-sans);
}
.tp-pill-badge__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tp-green-600); box-shadow: 0 0 0 4px rgba(28, 117, 78, 0.18); }

/* --- Buttons ------------------------------------------------------------------------------------------------------------ */
.tp-btn { font-weight: 650; letter-spacing: -0.005em; }
.tp-btn--primary { background: linear-gradient(180deg, var(--tp-green-750), var(--tp-green-800)); box-shadow: 0 8px 20px -8px rgba(20, 85, 54, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.tp-btn--primary:hover { background: linear-gradient(180deg, var(--tp-green-800), var(--tp-green-900)); box-shadow: 0 12px 24px -10px rgba(20, 85, 54, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.tp-btn--secondary { border-width: 1.5px; border-color: var(--tp-line); color: var(--tp-ink); box-shadow: var(--tp-shadow-sm); }
.tp-btn--secondary:hover { border-color: var(--tp-green-200); background: var(--tp-surface); color: var(--tp-green-800); }

/* --- Cards and icon tiles ------------------------------------------------------------------------------------------------- */
.tp-card { border-color: var(--tp-line); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-sm); }
.tp-card--link:hover { border-color: var(--tp-green-200); box-shadow: var(--tp-shadow-md); transform: translateY(-3px); }
.tp-card--soft { background: linear-gradient(180deg, var(--tp-green-50), #fff); }
.tp-card__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: linear-gradient(180deg, var(--tp-mint), var(--tp-green-100));
  border: 1px solid var(--tp-green-200); color: var(--tp-green-800);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.tp-card__icon .tp-icon { width: 1.35rem; height: 1.35rem; }
.tp-card__more { display: inline-flex; align-items: center; gap: 0.3em; }

/* --- Header: light, glassy, like the sketch ---------------------------------------------------------------------------------- */
.tp-header.top-bar {
  background: rgba(249, 250, 248, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  color: var(--tp-ink);
  border-bottom: 1px solid var(--tp-line);
  box-shadow: none;
}
.tp-header .tp-logo.logo-link { color: var(--tp-ink); gap: 0.6rem; }
.tp-header .tp-logo__icon { width: 2.25rem; height: 2.25rem; filter: drop-shadow(0 4px 8px rgba(124, 21, 15, 0.25)); }
.tp-logo__text { display: grid; line-height: 1.05; }
.tp-header .tp-logo__word.logo { color: var(--tp-green-900); text-transform: none; letter-spacing: -0.02em; font: 800 1.15rem/1.05 var(--tp-font-sans); }
.tp-logo__sub { font: 600 0.62rem/1.2 var(--tp-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-muted); }
.tp-header .tp-nav__link { color: var(--tp-ink-soft); font-weight: 600; }
.tp-header .tp-nav__link:hover { background: var(--tp-green-50); color: var(--tp-green-900); }
.tp-header .tp-nav__link[aria-current="page"] { background: var(--tp-green-100); color: var(--tp-green-900); }
.tp-header .tp-switch { color: var(--tp-ink-soft); }
.tp-switch--on-brand .tp-switch__track { background: var(--tp-line-strong); }
.tp-switch--on-brand input:checked + .tp-switch__track { background: var(--tp-green-600); }
.tp-switch--on-brand input:checked + .tp-switch__track::after { background: #fff; }
.tp-header .login-button { background: linear-gradient(180deg, var(--tp-green-750), var(--tp-green-800)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(20, 85, 54, 0.6); }
.tp-header .login-button:hover { background: var(--tp-green-900); }
.tp-header .user-email { color: var(--tp-ink); }
.tp-header .user-email:hover { background: var(--tp-green-50); color: var(--tp-green-900); }
.tp-header .logout-Button { color: var(--tp-green-800); border-color: var(--tp-line); }
.tp-header .logout-Button:hover { background: var(--tp-green-50); border-color: var(--tp-green-200); }
.tp-menu-btn { color: var(--tp-ink); }
.tp-menu-btn:hover { background: var(--tp-green-50); }
@media (max-width: 1100px) {
  .tp-header .tp-nav.main-nav { background: var(--tp-surface); border-bottom: 1px solid var(--tp-line); box-shadow: var(--tp-shadow-lg); }
  .tp-nav__list li + li { border-top-color: var(--tp-line-soft); }
  .tp-header .tp-nav__link { color: var(--tp-ink); }
}
@media (max-width: 560px) { .tp-logo__sub { display: none; } }
.tp-skip { color: var(--tp-green-800); }

/* --- Footer: deep green, after the sketch -------------------------------------------------------------------------------------- */
.tp-footer.footer { background: var(--tp-green-950); background-image: radial-gradient(60rem 22rem at 90% 0%, rgba(28, 117, 78, 0.22), transparent 60%); }
.tp-footer .tp-footer__brand > .tp-footer__heading { font: 800 1.1rem/1.2 var(--tp-font-sans); letter-spacing: -0.01em; text-transform: none; }
.tp-footer__logo { width: 2rem; height: 2rem; }
.tp-footer .tp-footer__heading { color: rgba(255, 255, 255, 0.6); letter-spacing: 0.14em; }
.tp-footer__tagline { color: var(--tp-green-300); }
.tp-footer .socialMediaContainer { border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.tp-footer .socialMediaContainer:hover { background: rgba(255, 255, 255, 0.14); }
.tp-footer .logo3 { opacity: 0.9; }
.tp-footer__globe { width: 1rem; height: 1rem; vertical-align: -0.2em; margin-right: 0.15rem; opacity: 0.8; }
.tp-footer .footer-bottom.tp-footer__bottom { border-top-color: rgba(255, 255, 255, 0.1); }

/* --- Hero: light wash + product mock-up -------------------------------------------------------------------------------------- */
.tp-hero {
  background: var(--tp-mint-wash), linear-gradient(180deg, var(--tp-wash), var(--tp-paper));
  color: var(--tp-ink);
  padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--tp-line);
}
.tp-hero h1 { color: var(--tp-green-950); max-width: 16ch; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem); line-height: 1.06; }
.tp-hero .tp-lead { color: var(--tp-ink-soft); font-size: var(--tp-text-lg); }
.tp-hero .tp-eyebrow { color: var(--tp-green-600); }
.tp-hero .tp-steps li { background: #fff; color: var(--tp-ink-soft); border: 1px solid var(--tp-line); }
.tp-hero .tp-steps li::before { background: var(--tp-green-50); color: var(--tp-green-800); }
.tp-hero .tp-steps li[aria-current="step"] { background: var(--tp-green-800); color: #fff; border-color: var(--tp-green-800); }
.tp-hero .tp-steps li[aria-current="step"]::before { background: #fff; color: var(--tp-green-800); }
.tp-hero__note { color: var(--tp-muted); }
.tp-scope .tp-hero__note a { color: var(--tp-green-700); }
.tp-hero__art { position: relative; }

.tp-mock {
  position: relative; width: min(100%, 34rem); margin-inline: auto;
  padding: var(--tp-space-3) var(--tp-space-4) var(--tp-space-4);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--tp-line); border-radius: 20px;
  box-shadow: var(--tp-shadow-lg); transform: rotate(-1deg);
  font-family: var(--tp-font-sans);
}
.tp-mock__bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 10px; border-bottom: 1px solid var(--tp-line-soft); }
.tp-mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--tp-dot-red); }
.tp-mock__bar span:nth-child(2) { background: var(--tp-dot-amber); }
.tp-mock__bar span:nth-child(3) { background: var(--tp-dot-green); }
.tp-mock__bar em { margin-left: 8px; padding: 3px 10px; border-radius: 8px; background: var(--tp-paper); border: 1px solid var(--tp-line-soft); font: 500 0.72rem/1.4 var(--tp-font-mono); color: var(--tp-muted); font-style: normal; }
.tp-mock__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.tp-mock__chips b, .tp-mock__chips i { padding: 3px 10px; border-radius: 999px; font: 600 0.72rem/1.5 var(--tp-font-sans); font-style: normal; }
.tp-mock__chips b { background: var(--tp-green-50); color: var(--tp-green-900); border: 1px solid var(--tp-green-200); }
.tp-mock__chips i { color: var(--tp-muted); border: 1px dashed var(--tp-line); }
.tp-mock__rank { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--tp-green-900); color: #fff; font: 600 0.72rem/1.5 var(--tp-font-sans); }
.tp-mock__table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.8rem; }
.tp-mock__table th { text-align: left; padding: 6px 8px; font: 600 0.66rem/1.2 var(--tp-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-muted); border-bottom: 1px solid var(--tp-line); }
.tp-mock__table td { padding: 9px 8px; border-bottom: 1px solid var(--tp-line-soft); font-family: var(--tp-font-mono); font-size: 0.78rem; color: var(--tp-ink); }
.tp-mock__table td.tk { font-weight: 600; font-family: var(--tp-font-sans); }
.tp-mock__table td s { text-decoration: none; padding: 2px 7px; border-radius: 6px; background: var(--tp-paper); border: 1px solid var(--tp-line-soft); font: 500 0.7rem/1.4 var(--tp-font-sans); color: var(--tp-ink-soft); }
.tp-mock__table .is-focus { background: rgba(226, 244, 235, 0.65); }
.tp-mock__table td.up { color: var(--tp-up); font-weight: 600; }
.tp-mock__note { margin-top: 8px; font-size: 0.68rem; color: var(--tp-muted); }
.tp-mock__float {
  position: absolute; right: -1.5rem; bottom: 2.6rem; width: 13.5rem;
  display: grid; gap: 2px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--tp-line); border-radius: 14px; box-shadow: var(--tp-shadow-md);
  transform: rotate(1.5deg); font-size: 0.75rem; color: var(--tp-ink-soft);
}
.tp-mock__float-label { font: 600 0.62rem/1.2 var(--tp-font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-green-600); }
.tp-mock__float strong { font: 600 1.15rem/1.2 var(--tp-font-display); color: var(--tp-green-950); }
.tp-mock__logo { position: absolute; right: -1.4rem; top: -1.8rem; width: 4rem; height: 4rem; filter: drop-shadow(0 10px 18px rgba(124, 21, 15, 0.3)); transform: rotate(-8deg); }
@media (max-width: 768px), (max-aspect-ratio: 7/6) {
  .tp-hero__art { order: 0; margin-top: var(--tp-space-6); }
  .tp-mock { transform: none; }
  .tp-mock__float { right: 0.5rem; bottom: -1.5rem; }
  .tp-mock__logo { left: auto; right: -0.5rem; top: -1.6rem; width: 3.2rem; height: 3.2rem; }
}
@media (max-width: 420px) { .tp-mock__table th:nth-child(2), .tp-mock__table td:nth-child(2) { display: none; } .tp-mock__float { width: 11.5rem; } }

.tp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tp-space-3) var(--tp-space-6); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: 0; list-style: none; }
.tp-trust li { display: inline-flex; align-items: center; gap: var(--tp-space-2); margin: 0; color: var(--tp-ink-soft); font-size: var(--tp-text-sm); }
.tp-trust .tp-icon { color: var(--tp-green-600); width: 1.1rem; height: 1.1rem; }

/* --- Sections, page heads, next step ----------------------------------------------------------------------------------------- */
.tp-section--alt { background: linear-gradient(180deg, var(--tp-wash), var(--tp-wash-soft)); border-block: 1px solid var(--tp-line-soft); }
.tp-eyebrow { letter-spacing: 0.16em; }
.tp-page-head { background: var(--tp-mint-wash), linear-gradient(180deg, var(--tp-wash), var(--tp-paper)); border-bottom-color: var(--tp-line); }
.tp-page-head h1 { color: var(--tp-green-950); }
.tp-next {
  background: radial-gradient(40rem 18rem at 100% 0%, rgba(167, 243, 200, 0.22), transparent 60%), linear-gradient(140deg, var(--tp-green-900), var(--tp-green-800) 60%, var(--tp-green-750));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--tp-shadow-lg);
}
.tp-next__label { color: var(--tp-green-300); }
.tp-next__title { font-family: var(--tp-font-display); font-weight: 600; font-size: var(--tp-h3); letter-spacing: -0.015em; }

/* --- Landing pieces ------------------------------------------------------------------------------------------------------------ */
.tp-ropes__step { gap: var(--tp-space-4); }
.tp-ropes__icon { position: relative; flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 12px; background: linear-gradient(180deg, var(--tp-mint), var(--tp-green-100)); border: 1px solid var(--tp-green-200); color: var(--tp-green-800); }
.tp-ropes__icon .tp-icon { width: 1.35rem; height: 1.35rem; }
.tp-ropes__icon b { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--tp-green-800); color: #fff; font: 700 0.68rem/1 var(--tp-font-mono); border: 2px solid #fff; }
.tp-journey__num { font-family: var(--tp-font-mono); background: linear-gradient(180deg, var(--tp-green-750), var(--tp-green-800)); box-shadow: 0 6px 14px -6px rgba(20, 85, 54, 0.6); }
.tp-features li { display: flex; gap: var(--tp-space-3); align-items: flex-start; box-shadow: var(--tp-shadow-sm); }
.tp-features li > .tp-icon { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; color: var(--tp-green-600); }
.tp-data-art { display: block; width: 4.5rem; height: 4.5rem; margin-bottom: var(--tp-space-3); filter: drop-shadow(0 10px 18px rgba(15, 61, 46, 0.25)); }
.tp-example { border-radius: 20px; box-shadow: var(--tp-shadow-lg); }
.tp-example__table th { font: 600 0.7rem/1.2 var(--tp-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-muted); }
.tp-example__table td.tp-num { font-family: var(--tp-font-mono); }
.tp-profile { border-top: 0; position: relative; overflow: hidden; }
.tp-profile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--tp-green-600), var(--tp-green-300)); }
.tp-profile--dividend::before { background: linear-gradient(90deg, var(--tp-blue), var(--tp-blue-300)); }
.tp-profile--high-risk::before { background: linear-gradient(90deg, var(--tp-amber-700), var(--tp-gold)); }
.tp-profile--dividend .tp-card__icon { background: linear-gradient(180deg, var(--tp-blue-50), var(--tp-info-bg)); border-color: var(--tp-info-line); color: var(--tp-info); }
.tp-profile--high-risk .tp-card__icon { background: linear-gradient(180deg, var(--tp-amber-50), var(--tp-warn-bg)); border-color: var(--tp-warn-line); color: var(--tp-warn); }
.tp-profile__filters li { background: #fff; }
.tp-accordion { border-radius: 14px; box-shadow: var(--tp-shadow-sm); }
.tp-accordion > summary { font-weight: 650; }

/* Polish fixes: tables inside the mock-up / example have no legacy black borders; step links are not underlined;
   the five "find a good stock" steps sit in one row on wide screens with the icon on top. */
.tp-mock__table th, .tp-mock__table td, .tp-example__table th, .tp-example__table td { border-left: 0; border-right: 0; border-top: 0; }
.tp-mock__table th, .tp-example__table th { border-bottom: 1px solid var(--tp-line); }
.tp-mock__table td, .tp-example__table td { border-bottom: 1px solid var(--tp-line-soft); }
.tp-scope .tp-steps a, .tp-scope li.tp-steps a, .tp-steps li a { text-decoration: none; }
.tp-hero__actions + .tp-hero__note { margin-top: var(--tp-space-5); }
.tp-ropes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
@media (min-width: 1200px) { .tp-ropes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tp-ropes__step { flex-direction: column; gap: var(--tp-space-3); }
.tp-scope .tp-ropes__step .tp-card__title { font-size: var(--tp-text-lg); margin-bottom: var(--tp-space-1); }
.tp-scope .tp-steps li a:not([class]) { text-decoration: none; color: inherit; }
.tp-scope .tp-card p, .tp-scope .tp-ropes__step p { line-height: 1.6; }

/* Footer polish: white brand name, compact social row, payment badges in the site's style. */
.tp-footer .tp-footer__brand > .tp-footer__heading { color: #fff; }
.tp-footer .social-media.tp-footer__social { gap: 0.45rem; }
.tp-footer .payment-methods { gap: 0.45rem; }
.tp-footer .tp-pay {
  display: inline-grid; place-items: center; width: 3rem; height: 2rem;
  border-radius: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.tp-footer .tp-pay .tp-icon { width: 1.15rem; height: 1.15rem; }
.tp-footer .tp-pay--visa { background: #fff; color: var(--tp-visa-navy); font: italic 800 0.8rem/1 var(--tp-font-sans); letter-spacing: 0.02em; }
.tp-footer .tp-pay--mc { position: relative; background: #fff; }
.tp-footer .tp-pay--mc i { position: absolute; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; border-radius: 50%; }
.tp-footer .tp-pay--mc i:first-child { left: calc(50% - 0.8rem); background: var(--tp-mc-red); }
.tp-footer .tp-pay--mc i:last-child { left: calc(50% - 0.2rem); background: var(--tp-mc-orange); mix-blend-mode: multiply; }
.tp-features li { line-height: 1.6; }

/* --- Screener table (polish 2026-10-18): a light, calm header instead of the heavy green bar. The header cells are
   built by Dynamic_screeningTable.js with inline styles, hence the !important on those few properties. ------------ */
.tp-scope .tp-breadcrumb li a:not([class]) { text-decoration: none; }
.tp-chip__edit { text-decoration: none; }
.tp-chip__edit:hover { text-decoration: underline dotted; }
.tp-screener .screenerPanel { border: 1px solid var(--tp-line); border-radius: var(--tp-radius); background: var(--tp-surface); box-shadow: var(--tp-shadow-md); padding: 0; overflow: hidden; }
.tp-screener .screenerScrollbar { background: var(--tp-line-soft); height: 6px; border-radius: 0; margin: 0; }
.tp-screener .screenerScrollbar-thumb { background: var(--tp-green-600); border-radius: 999px; height: 6px; }
.tp-screener .screeningTableStyle th {
  background: var(--tp-wash); color: var(--tp-ink); border: 0;
  border-bottom: 1px solid var(--tp-line); border-right: 1px solid var(--tp-line-soft);
  font: 650 var(--tp-text-xs)/1.3 var(--tp-font-sans); letter-spacing: 0.01em;
}
.tp-screener #screeningTable tr:first-child th { padding-top: var(--tp-space-3); }
.tp-screener #screeningTable th > div { background: transparent !important; justify-content: center; gap: 4px; margin-top: 6px; }
.tp-screener .focus-button {
  flex: none !important; margin: 0 !important;
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--tp-line); border-radius: 10px; background: var(--tp-surface); cursor: pointer;
  box-shadow: var(--tp-shadow-sm); transition: border-color var(--tp-fast) var(--tp-ease), background-color var(--tp-fast) var(--tp-ease);
}
.tp-screener .focus-button:hover { background: var(--tp-green-50); border-color: var(--tp-green-200); }
.tp-screener .focus-button.focus, .tp-screener .focus-button:has(img[src*="focus-active"]) { background: var(--tp-gold-50); border-color: var(--tp-gold-line); }
.tp-screener .focus-button img.logo4 { width: 20px; height: 20px; margin: 0; }
.tp-screener #screeningTable th > div > div { flex: none !important; gap: 0; }
.tp-screener .sort-up, .tp-screener .sort-down {
  width: 24px; height: 16px; padding: 0; margin: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--tp-muted); font-size: 0.6rem; line-height: 1; cursor: pointer;
}
.tp-screener .sort-up:hover, .tp-screener .sort-down:hover { background: var(--tp-green-100); color: var(--tp-green-800); }
.tp-screener .screenerInfo-btn { background: transparent; border: 1.5px solid var(--tp-green-600); color: var(--tp-green-600); }
.tp-screener .screenerInfo-btn:hover, .tp-screener .screenerInfo-btn:focus { background: var(--tp-green-600); color: #fff; }
.tp-screener #screeningTable tr:nth-child(2) th { background: var(--tp-wash-soft); padding: var(--tp-space-2); vertical-align: top; }
.tp-screener .screeningTableInputBox { border: 1.5px solid var(--tp-line); background: #fff; color: var(--tp-ink); font-family: var(--tp-font-sans); }
.tp-screener .screeningTableInputBox:focus { border-color: var(--tp-green-600); outline: 3px solid rgba(31, 95, 139, 0.25); }
.tp-screener .custom-select2 { width: 100% !important; height: auto !important; margin-top: 6px; }
.tp-screener .select-selected2 {
  height: 32px; line-height: 32px; border-radius: 999px; padding: 0 1.6rem 0 0.8rem; font: 600 var(--tp-text-xs)/32px var(--tp-font-sans);
  background: var(--tp-green-50); color: var(--tp-green-900); border: 1px solid var(--tp-green-200); justify-content: flex-start;
}
.tp-screener .select-selected2:after { border-color: var(--tp-green-800) transparent transparent transparent; right: 0.7rem; margin-top: -2px; }
.tp-screener .select-items2 div { color: var(--tp-ink); background: #fff; font-size: var(--tp-text-xs); }
.tp-screener .select-items2 div:hover { background: var(--tp-green-50); }
.tp-screener .sectorSelect-Box {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: auto; min-height: 32px; margin-top: 2px; padding: 0 0.8rem;
  border: 1px dashed var(--tp-green-200); border-radius: 999px; background: #fff; color: var(--tp-green-800);
  font: 650 var(--tp-text-xs)/1 var(--tp-font-sans);
}
.tp-screener .sectorSelect-Box::before { content: "Choose"; }
.tp-screener .sectorSelect-Box::after { position: static; transform: none; content: "+"; font-size: 1rem; line-height: 1; }
.tp-screener .sectorSelect-Box.expanded::after { content: "\2212"; font-size: 1rem; }
.tp-screener .sectorOptions-Container.expanded { background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-lg); padding: var(--tp-space-3); }
.tp-screener .sectorOption-Item { border-radius: 999px; background: var(--tp-green-50); color: var(--tp-green-900); border: 1px solid var(--tp-green-200); padding: 0.35rem 0.75rem; font-size: var(--tp-text-xs); }
.tp-screener .sectorOption-Item.selected { background: var(--tp-green-800); color: #fff; border-color: var(--tp-green-800); }
.tp-screener .screeningTableStyle td { font-size: var(--tp-text-sm); }
.tp-screener .screeningTableStyle td:not(:first-child) { font-family: var(--tp-font-mono); font-size: 0.82rem; }
.tp-screener .screeningTableStyle td:nth-child(2), .tp-screener .screeningTableStyle td:nth-child(3) { font-family: var(--tp-font-sans); font-size: var(--tp-text-sm); }
.tp-screener .screeningTableStyle td a { font-family: var(--tp-font-mono); text-decoration: none; letter-spacing: 0.02em; }
.tp-screener .screeningTableStyle tr.screenerRow-link:hover td a { text-decoration: underline; }
.tp-screener .screeningTableButton { border-radius: 999px; }
.tp-screener .tp-preset-info { background: linear-gradient(180deg, var(--tp-green-50), #fff); }
.tp-screener .tp-preset-info__name { font: 600 var(--tp-text-lg)/1.2 var(--tp-font-display); }
.tp-segmented__btn { box-shadow: var(--tp-shadow-sm); }
.tp-segmented__btn[aria-pressed="true"] { background: linear-gradient(180deg, var(--tp-green-750), var(--tp-green-800)); box-shadow: 0 6px 16px -8px rgba(20, 85, 54, 0.6); }
.tp-callout { border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-sm); background: linear-gradient(180deg, var(--tp-green-50), #fff); }
.tp-screener .screenerScrollbar-thumb { background: var(--tp-green-200); }
.tp-screener .screenerScrollbar-thumb:hover, .tp-screener .screenerScrollbar-thumb.dragging { background: var(--tp-green-600); }

/* --- Stock page (polish 2026-10-18) ------------------------------------------------------------------------------------- */
/* Sections as calm cards. */
.tp-stock #stockInfoContent .sec { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-radius); padding: clamp(1rem, 0.8rem + 1vw, 1.75rem); box-shadow: var(--tp-shadow-sm); }
.tp-stock #stockInfoContent .sec > h2 { font-family: var(--tp-font-display); font-weight: 600; margin-bottom: var(--tp-space-4); }
.tp-stock .chart-container { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-radius); padding: clamp(1rem, 0.8rem + 1vw, 1.75rem); box-shadow: var(--tp-shadow-sm); }
.tp-stock .chartTitel { font-family: var(--tp-font-display); font-weight: 600; border: 0; padding: 0; }
.tp-section-intro { background: linear-gradient(180deg, var(--tp-green-50), #fff); border-color: var(--tp-green-100); border-radius: 12px; }
.tp-section-nav__inner a[aria-current="true"], .tp-scope .tp-section-nav a:hover { background: var(--tp-green-100); color: var(--tp-green-900); }

/* Company header. */
.tp-stock .co-title h1, .tp-stock .co-title h2 { letter-spacing: -0.015em; }
.tp-stock .co-tag { background: #fff; border: 1px solid var(--tp-line); color: var(--tp-ink-soft); font-family: var(--tp-font-mono); letter-spacing: 0.02em; }
.tp-stock #stockInfoContent .co-facts b { color: var(--tp-muted); font-weight: 600; }
.tp-stock #stockInfoContent .co-facts > span { padding: 0.3rem 0.7rem; border-radius: 999px; background: #fff; border: 1px solid var(--tp-line-soft); }

/* In short tiles. */
.tp-inshort { border-top: 0; position: relative; overflow: hidden; }
.tp-inshort::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--tp-green-600), var(--tp-green-300)); }
.tp-inshort .tp-stat { padding: var(--tp-space-3) var(--tp-space-4); border: 1px solid var(--tp-line-soft); border-radius: 12px; background: linear-gradient(180deg, #fff, var(--tp-paper)); }
.tp-stat__value { font-family: var(--tp-font-mono); font-size: 1.35rem; letter-spacing: -0.01em; color: var(--tp-green-950); }

/* Chart controls: light inputs and buttons instead of the heavy green blocks. */
.tp-stock .chartButton, .tp-stock button.chartButton {
  min-height: 42px; padding: 0 1.1rem; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, var(--tp-green-750), var(--tp-green-800)); color: #fff;
  font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); box-shadow: 0 6px 14px -8px rgba(20, 85, 54, 0.6);
}
.tp-stock .chartButton:hover { background: var(--tp-green-900); }
.tp-stock .chartButton:active { transform: translateY(1px); box-shadow: none; }
.tp-stock .chartStockPickBox, .tp-stock #stockSymbolInput {
  min-height: 42px; border: 1.5px solid var(--tp-line); border-radius: 999px; background-color: #fff;
  background-image: url("/images/icons/search.svg") !important; background-size: 18px !important; background-position: 14px center !important; background-repeat: no-repeat !important;
  padding-left: 2.4rem; font: 500 var(--tp-text-sm)/1 var(--tp-font-sans); color: var(--tp-ink); box-shadow: none;
}
.tp-stock .custom-select .select-selected { background: var(--tp-green-50); color: var(--tp-green-900); border: 1px solid var(--tp-green-200); border-radius: 999px; font: 600 var(--tp-text-xs)/1 var(--tp-font-sans); }
.tp-stock .custom-select .select-selected:after { border-color: var(--tp-green-800) transparent transparent transparent; }
.tp-stock .custom-select .select-items div { color: var(--tp-ink); background: #fff; }
.tp-stock input[type="date"].form_control_container__time__input { background: #fff; color: var(--tp-ink); border: 1.5px solid var(--tp-line); border-radius: 10px; font: 500 var(--tp-text-sm)/1 var(--tp-font-mono); padding: 0.5rem 0.7rem; }
.tp-stock input[type="date"].form_control_container__time__input::-webkit-calendar-picker-indicator { filter: none; opacity: 0.6; }
.tp-stock .form_control_container__time { color: var(--tp-muted); font: 600 var(--tp-text-xs)/1.4 var(--tp-font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.tp-stock .range_container { border: 1px solid var(--tp-line-soft); border-radius: 12px; background: var(--tp-paper); }
.tp-stock .sliders_control::before { background: var(--tp-green-200); }
.tp-stock input[type="range"]::-webkit-slider-thumb { background: #fff; border: 2px solid var(--tp-green-600); box-shadow: var(--tp-shadow-sm); }
.tp-stock input[type="range"]::-moz-range-thumb { background: #fff; border: 2px solid var(--tp-green-600); }

/* Key statistics. */
.tp-stock #stockInfoContent .kstats .grp b { color: var(--tp-green-700); font: 700 var(--tp-text-xs)/1.4 var(--tp-font-sans); letter-spacing: 0.1em; text-transform: uppercase; border-bottom-color: var(--tp-line); padding-bottom: 0.4rem; margin-bottom: 0.3rem; }
.tp-stock #stockInfoContent .kstats .row { font-size: var(--tp-text-sm); padding: 0.32rem 0; color: var(--tp-ink-soft); border-bottom: 1px dashed var(--tp-line-soft); }
.tp-stock #stockInfoContent .kstats .row span:last-child { font-family: var(--tp-font-mono); font-weight: 600; color: var(--tp-ink); }

/* Financial statements. */
.tp-stock #stockInfoContent .fin-ctl { min-height: 34px; border: 1.5px solid var(--tp-line); border-radius: 999px; padding: 0 0.8rem; background: #fff; color: var(--tp-ink); font: 600 var(--tp-text-xs)/1 var(--tp-font-sans); }
.tp-stock #stockInfoContent .fin-tabs { border-bottom: 1px solid var(--tp-line); gap: 0.25rem; }
.tp-stock #stockInfoContent .fin-tab { font: 600 var(--tp-text-sm)/1 var(--tp-font-sans); color: var(--tp-ink-soft); padding: 0.75rem 0.85rem; border-bottom-width: 3px; }
.tp-stock #stockInfoContent .fin-tab:hover { color: var(--tp-green-800); background: transparent; }
.tp-stock #stockInfoContent .fin-tab.active { color: var(--tp-green-900); border-bottom-color: var(--tp-green-600); }
.tp-stock #stockInfoContent .fin-tablewrap { border: 1px solid var(--tp-line); border-radius: 14px; box-shadow: none; padding: 0; }
.tp-stock #stockInfoContent .fin-scrollbar { height: 6px; margin: 0; border-radius: 0; background: var(--tp-line-soft); }
.tp-stock #stockInfoContent .fin-scrollbar-thumb { background: var(--tp-green-200); border-radius: 999px; }
.tp-stock #stockInfoContent .fin-scrollbar-thumb:hover, .tp-stock #stockInfoContent .fin-scrollbar-thumb.dragging { background: var(--tp-green-600); }
.tp-stock #stockInfoContent table.fin thead th { background: var(--tp-wash); color: var(--tp-ink-soft); border: 0; border-bottom: 1px solid var(--tp-line); font: 650 var(--tp-text-xs)/1.2 var(--tp-font-sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.8rem 0.7rem; }
.tp-stock #stockInfoContent table.fin td { border: 0; border-bottom: 1px solid var(--tp-line-soft); color: var(--tp-ink); font: 500 0.8rem/1.3 var(--tp-font-mono); padding: 0.5rem 0.7rem; }
.tp-stock #stockInfoContent table.fin tbody th.metric { border: 0; border-bottom: 1px solid var(--tp-line-soft); color: var(--tp-ink); font: 500 var(--tp-text-sm)/1.3 var(--tp-font-sans); padding: 0.5rem 0.7rem; box-shadow: 1px 0 0 var(--tp-line-soft); }
.tp-stock #stockInfoContent table.fin tbody tr:nth-child(even) td, .tp-stock #stockInfoContent table.fin tbody tr:nth-child(even) th.metric { background: var(--tp-wash-soft); }
.tp-stock #stockInfoContent table.fin tbody tr:hover td, .tp-stock #stockInfoContent table.fin tbody tr:hover th.metric { background: var(--tp-green-50); }
.tp-stock #stockInfoContent table.fin tr.strong th.metric, .tp-stock #stockInfoContent table.fin tr.strong td { font-weight: 700; color: var(--tp-green-950); }
.tp-stock #stockInfoContent table.fin tr.grouprow th.metric { color: var(--tp-green-700); font: 700 var(--tp-text-xs)/1.4 var(--tp-font-sans); letter-spacing: 0.08em; text-transform: uppercase; background: var(--tp-wash); }
.tp-stock #stockInfoContent table.fin td.neg { color: var(--tp-down); }

/* Company policy cards and news. */
.tp-stock #stockInfoContent .policy-card { border: 1px solid var(--tp-line); border-radius: 14px; box-shadow: var(--tp-shadow-sm); position: relative; }
.tp-stock #stockInfoContent .policy-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--tp-green-600), var(--tp-green-300)); }
.tp-stock #stockInfoContent .pc-head h3 { font: 700 var(--tp-text-base)/1.3 var(--tp-font-sans); color: var(--tp-green-900); }
.tp-stock #stockInfoContent .bar { background: var(--tp-line-soft); height: 6px; border-radius: 999px; }
.tp-stock #stockInfoContent .news-item { padding: 1rem 0; border-top-color: var(--tp-line-soft); }
.tp-stock #stockInfoContent .news-item h4 { font: 650 var(--tp-text-base)/1.4 var(--tp-font-sans); margin: 0.3rem 0; }
.tp-stock #stockInfoContent .news-item h4 a { color: var(--tp-green-900); text-decoration: none; }
.tp-stock #stockInfoContent .news-item h4 a:hover { text-decoration: underline; }
.tp-stock #stockInfoContent .news-tag { border-radius: 999px; font-size: 0.7rem; padding: 0.15rem 0.6rem; }
.tp-stock .load-more-btn { border-radius: 999px; border: 1.5px solid var(--tp-line); background: #fff; color: var(--tp-green-800); font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); box-shadow: var(--tp-shadow-sm); }
.tp-stock .load-more-btn:hover { border-color: var(--tp-green-200); background: var(--tp-green-50); }
.news-day { border-bottom-color: var(--tp-line); color: var(--tp-ink-soft); font-family: var(--tp-font-sans); letter-spacing: 0.02em; }

/* Symbol search on the prompt page. */
.tp-stock__search #symbolInput { background-image: url("/images/icons/search.svg") !important; background-size: 20px !important; background-position: 16px center !important; background-repeat: no-repeat !important; box-shadow: var(--tp-shadow-md); }
.tp-stock #stockInfoContent .policy-card { border-left: 1px solid var(--tp-line); padding-left: 4px; }
.tp-stock #stockInfoContent .policy-intro, .tp-stock #stockInfoContent .pc-head .score, .tp-stock #stockInfoContent .fin-note, .tp-stock #stockInfoContent .fin-empty { font-family: var(--tp-font-sans); }
.tp-stock #stockInfoContent .news-item .meta { font-family: var(--tp-font-mono); font-size: 0.72rem; color: var(--tp-muted); }
.tp-stock #stockInfoContent .news-tag { font-family: var(--tp-font-sans); font-weight: 600; }

/* POLISH (2026-10-18): account/register forms. WHY: the legacy plan cards, billing toggle and buttons fell back to the
   browser's system font and vh-based sizes; this aligns them with the site's type scale and buttons. Look only. */
.toggle-btn, .select-plan-btn, button, input, select, textarea { font-family: var(--tp-font-sans); }
.toggle-container { background: var(--tp-green-50); box-shadow: inset 0 0 0 1px var(--tp-line); }
.toggle-btn { font-size: 0.95rem; padding: 0.55rem 1.5rem; }
.toggle-btn.active { background: var(--tp-green-800); box-shadow: 0 1px 2px rgba(10, 40, 25, .25); }
.plans-grid { gap: clamp(0.75rem, 1.25vw, 1.25rem); font-size: 0.9rem; }
.plan-card { border-radius: 16px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.select-plan-btn { border-radius: 999px; font-size: 0.95rem; font-weight: 600; padding: 0.7rem 1rem; letter-spacing: 0; }
.select-plan-btn:hover { background: var(--tp-green-700); }
.tp-account .login-button2 { letter-spacing: 0.03em; font-size: 0.9rem; font-weight: 600; }
/* Plan features: the legacy vw-based indent let the check mark overlap the text on phones. */
.plan-features li { padding-left: 1.5em; font-size: 0.875rem; line-height: 1.45; margin-bottom: 0.5rem; font-weight: 500; }
.plan-features li:before { font-size: 0.875rem; color: var(--tp-green-700); }

/* Link lists (related topics, all articles, "On this page"): the list itself marks them as links, so no underline until
   hover/focus. The table of contents gets quiet links, sticky beside the text on wide screens. */
.tp-scope .tp-link-list li a:not([class]) { text-decoration: none; }
.tp-scope .tp-link-list li a:not([class]):hover, .tp-scope .tp-link-list li a:not([class]):focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.tp-scope .tp-toc .tp-link-list li a:not([class]) { font-weight: 500; color: var(--tp-ink-soft); }
.tp-scope .tp-toc .tp-link-list li a:not([class]):hover, .tp-scope .tp-toc .tp-link-list li a:not([class]):focus-visible { color: var(--tp-green-800); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .tp-toc { position: sticky; top: 5.5rem; } }

/* Account page: the legacy 2rem labels/values in pure green dominated the page; quiet summary rows and air between the
   form sections instead. Look only - ids and forms unchanged. */
.tp-account .profile-card, .tp-account .affiliate-dashboard { border-color: var(--tp-line); box-shadow: var(--tp-shadow-sm); border-radius: var(--tp-radius-lg); }
.tp-account .profile-row { border-bottom-color: var(--tp-line-soft); padding: 0.85rem 0; align-items: baseline; }
.tp-account .profile-label { font-size: var(--tp-text-sm); font-weight: 600; color: var(--tp-muted); text-transform: none; }
.tp-account .profile-value { font-size: var(--tp-text-base); font-weight: 600; color: var(--tp-ink); }
.tp-account #profile-subscription, .tp-account #profile-cancel-status { color: var(--tp-green-700); }
.tp-account .login-container3 > h2 { margin-top: var(--tp-space-7); }
.tp-account h2 { font-size: var(--tp-h3); padding-top: var(--tp-space-2); }

/* Bulleted lists inside articles (news, blog): the global list reset removed the markers. */
.tp-prose ul:not([class]) { list-style: disc; }
.tp-prose ol:not([class]) { list-style: decimal; padding-left: 1.4rem; }
.tp-prose ul:not([class]) li::marker { color: var(--tp-green-600); }
.tp-prose ul:not([class]) li + li { margin-top: 0.3rem; }

/* POLISH (2026-10-18): dialogs (ToS, daily limit, ad notice). WHY: a calmer, more finished look - blurred backdrop,
   display-font heading, check-mark summary and a short entrance - without touching ids, onclick handlers or how the
   JS opens them (style.display = 'flex'). The animation is skipped for users who prefer reduced motion. */
.tos-modal, .adblock-modal { -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
.tos-modal .tos-modal-content, .adblock-modal .adblock-modal-content { border: 1px solid var(--tp-line); animation: tp-dialog-in 220ms var(--tp-ease) both; }
.tos-modal h2, .adblock-modal h2 { font-family: var(--tp-font-display); font-weight: 600; letter-spacing: -0.01em; }
.tos-summary { list-style: none; padding: var(--tp-space-3) var(--tp-space-4); background: var(--tp-green-50); border: 1px solid var(--tp-green-100); border-radius: var(--tp-radius); }
.tos-summary li { position: relative; padding-left: 1.6rem; font-size: var(--tp-text-sm); line-height: 1.5; }
.tos-summary li:last-child { margin-bottom: 0; }
.tos-summary li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--tp-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.tos-modal .tos-link { text-underline-offset: 3px; }
@keyframes tp-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tos-modal .tos-modal-content, .adblock-modal .adblock-modal-content { animation: none; } }
@media (max-width: 768px) { .tos-modal .tos-modal-content, .adblock-modal .adblock-modal-content { max-height: 92dvh; } }
/* Error line inside a ToS dialog when saving the acceptance failed (tpTosError in TickerPickerSimpleProgrammability.js). */
.tos-modal .tos-modal-error { margin: var(--tp-space-3) 0 0; padding: 0.6rem 0.8rem; border-radius: var(--tp-radius-sm); background: var(--tp-down-bg); color: var(--tp-down); font-size: var(--tp-text-sm); }

/* Ad-free pages (html[data-tp-ads="off"], see tp_ad_mode in TickerPickerHoster.py): no slot is ever shown, the rails
   reserve no space, as for subscribers (body.ad-free). */
html[data-tp-ads="off"] .left-sidebar, html[data-tp-ads="off"] .right-sidebar,
html[data-tp-ads="off"] .sticky-left-sidebar, html[data-tp-ads="off"] .sticky-right-sidebar,
html[data-tp-ads="off"] .horizontal-bar, html[data-tp-ads="off"] .sticky-horizontal-bar,
html[data-tp-ads="off"] .encyclopedia-ad { display: none !important; }

/* Ad preview outside production (tp_ad_mode 'preview'): the filled slot shows where an ad will sit and how big it is,
   without loading any Google script. Same labelled box as a live ad, so the layout is reviewed as it will look. */
.tp-ad-preview {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  width: 100%; height: 100%; min-height: var(--tp-ad-h); box-sizing: border-box;
  border-radius: var(--tp-radius-sm); text-align: center; padding: var(--tp-space-3);
  background: repeating-linear-gradient(135deg, var(--tp-wash) 0 12px, var(--tp-wash-soft) 12px 24px);
  color: var(--tp-muted); font: 600 var(--tp-text-sm)/1.3 var(--tp-font-sans);
}
.tp-ad-preview small { font-weight: 400; font-size: var(--tp-text-xs); }
.sticky-left-sidebar .tp-ad-preview, .sticky-right-sidebar .tp-ad-preview { min-height: 100%; }

/* Rewarded video in the daily-limit dialog (#rateLimitReward, tpStartRewardVideo in TickerPickerSimpleProgrammability.js):
   an opt-in offer set apart from the dialog's own buttons, and the preview "video" used outside production. */
.tp-reward { margin-top: var(--tp-space-4); padding: var(--tp-space-4); border: 1px solid var(--tp-green-100); border-radius: var(--tp-radius); background: var(--tp-green-50); }
.tp-reward[hidden] { display: none; }
.tos-modal .tp-reward__text { margin: 0 0 var(--tp-space-3); color: var(--tp-ink); font-weight: 600; }
.tp-reward .modal-button[disabled] { opacity: 0.6; cursor: progress; }
.tp-reward__stage { margin-top: var(--tp-space-3); }
.tp-reward__stage[hidden] { display: none; }
.tp-reward__video {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  aspect-ratio: 16 / 9; width: 100%; border-radius: var(--tp-radius-sm); margin-bottom: var(--tp-space-3);
  background: linear-gradient(135deg, var(--tp-green-900), var(--tp-green-700)); color: var(--tp-on-brand);
  font: 600 var(--tp-text-base)/1.3 var(--tp-font-sans);
}
.tp-reward__video small { font-weight: 400; font-size: var(--tp-text-xs); opacity: 0.85; }
.tp-reward__count { position: absolute; top: var(--tp-space-2); right: var(--tp-space-3); font: 600 var(--tp-text-sm)/1 var(--tp-font-mono); }
.tos-modal .tp-reward__status { margin: var(--tp-space-3) 0 0; font-size: var(--tp-text-sm); color: var(--tp-ink-soft); }
.tos-modal .tp-reward__status:empty { display: none; }

/* Footer payment badge: Stripe (the card processor), lowercase wordmark on Stripe's purple. */
.tp-footer .tp-pay--stripe { background: var(--tp-stripe-purple); color: #fff; font: 800 0.8rem/1 var(--tp-font-sans); letter-spacing: -0.02em; text-transform: lowercase; }

/* The (i) icon shown inside an instruction ("Tap the (i) icon ..."): looks exactly like the real button, but is
   plain text - no hover, no pointer - so readers recognise what to look for instead of reading a letter "i". */
.tp-info.tp-info--legend { display: inline-grid; min-width: 0; min-height: 0; margin-inline: 0.1em; vertical-align: -0.2em; cursor: default; pointer-events: none; }

/* "Load more articles" (stock page news, stockFinancials.js) in the design-system look: a secondary pill button
   with a round "+" badge, like the other buttons - the old Arial/vh green block stood out. */
.tp-stock #stockInfoContent .load-more-wrap { margin: var(--tp-space-5) 0 var(--tp-space-2); }
.tp-stock #stockInfoContent .load-more-btn {
  gap: 0.6rem; min-height: 44px; padding: 0.55rem 1.4rem 0.55rem 0.6rem;
  border: 1.5px solid var(--tp-green-800); border-radius: var(--tp-radius-pill);
  background: var(--tp-surface); color: var(--tp-green-800);
  font: 650 var(--tp-text-sm)/1.2 var(--tp-font-sans); box-shadow: var(--tp-shadow-sm);
  transition: background var(--tp-fast) var(--tp-ease), box-shadow var(--tp-fast) var(--tp-ease);
}
.tp-stock #stockInfoContent .load-more-btn:hover:not(:disabled) { background: var(--tp-green-50); box-shadow: var(--tp-shadow-md); }
.tp-stock #stockInfoContent .load-more-icon {
  width: 1.75rem; height: 1.75rem; font-size: 1.1rem; font-weight: 700;
  background: var(--tp-green-800); color: var(--tp-on-brand);
}

/* Ticker search (stock page "Look up a stock" and the chart's "Change stock"): the result list hangs directly
   under the field and joins it - same width, the field's bottom corners square off while the list is open - so
   field and list read as one control. :has() keeps it CSS-only (the JS only toggles the list's display). */
.ticker-search-results {
  top: calc(100% - 1px); border: 1.5px solid var(--tp-green-600); border-top: 1px solid var(--tp-line-soft);
  border-radius: 0 0 var(--tp-radius-lg) var(--tp-radius-lg); box-shadow: var(--tp-shadow-lg);
  max-height: min(60vh, 26rem);
}
.ticker-search-wrapper:has(.ticker-search-results[style*="block"]) input {
  border-color: var(--tp-green-600) !important;
  border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
  border-top-left-radius: var(--tp-radius-lg) !important; border-top-right-radius: var(--tp-radius-lg) !important;
  box-shadow: none !important;
}
.ticker-search-item { gap: var(--tp-space-3); padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--tp-line-soft); }
.ticker-search-item:hover, .ticker-search-item.active { background-color: var(--tp-green-50); }
.ticker-search-symbol { font: 700 var(--tp-text-sm)/1.2 var(--tp-font-mono); color: var(--tp-green-800); min-width: 7ch; }
.ticker-search-name { font-size: var(--tp-text-sm); color: var(--tp-ink); }
.ticker-search-meta { font-size: var(--tp-text-xs); color: var(--tp-muted); }

/* Encyclopedia search suggestions (initSuggest in tpDesign.js): a list that joins the search field, like the
   ticker search - title, what it is (category / article / glossary term) and a one-line summary. */
.tp-search-wrap { position: relative; max-width: 36rem; }
.tp-search-wrap .tp-search { max-width: none; }
.tp-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: var(--tp-z-dropdown);
  max-height: min(60vh, 28rem); overflow: auto; background: var(--tp-surface);
  border: 1.5px solid var(--tp-green-600); border-top: 1px solid var(--tp-line-soft);
  border-radius: 0 0 var(--tp-radius-lg) var(--tp-radius-lg); box-shadow: var(--tp-shadow-lg);
}
.tp-suggest[hidden] { display: none; }
.tp-search-wrap:has(.tp-suggest:not([hidden])) .tp-search input {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--tp-green-600);
}
.tp-scope .tp-suggest__item {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--tp-space-3); padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--tp-line-soft); color: var(--tp-ink); text-decoration: none;
}
.tp-scope .tp-suggest__item:last-child { border-bottom: 0; }
.tp-scope .tp-suggest__item:hover, .tp-scope .tp-suggest__item.is-active { background: var(--tp-green-50); }
.tp-suggest__title { font-weight: 650; color: var(--tp-green-800); }
.tp-suggest__kind { font-size: var(--tp-text-xs); color: var(--tp-muted); text-align: right; white-space: nowrap; }
.tp-suggest__summary { grid-column: 1 / -1; font-size: var(--tp-text-sm); color: var(--tp-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-suggest__empty { padding: 0.8rem 1.1rem; color: var(--tp-muted); font-size: var(--tp-text-sm); }
@media (max-width: 560px) { .tp-suggest__item { grid-template-columns: 1fr; } .tp-suggest__kind { text-align: left; } }

/* Footer brand: the full emblem (logo-emblem-512.png - the lettering needs the site fonts, so it is a rendered
   PNG) above the name, where there is room for its detail. The header keeps the simplified logo-mark.svg. */
.tp-footer .tp-footer__brand > .tp-footer__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tp-space-3); }
.tp-footer .tp-footer__logo.tp-footer__emblem { width: clamp(5.5rem, 4rem + 4vw, 7.5rem); height: auto; }

/* POLISH round 2 (2026-10-20), hero example (owner's wish, after sketches/TickerPickerGrokMouse): the card starts
   tilted in 3D and straightens when pointed at; the row under the pointer is marked; the "In plain English" card
   bobs gently until it is pointed at. Both example tables (hero and "What is a stock screener?") now look like the
   real screener table: dark green header, the focus column with the crown, green bold company names, mono numbers.
   Visitors who ask for reduced motion get the straight card without animation. */
.tp-mock { transform: perspective(1200px) rotateY(-9deg) rotateX(5deg) rotate(-1.5deg); transform-origin: 60% 50%;
  transition: transform 0.6s var(--tp-ease), box-shadow 0.6s var(--tp-ease); }
.tp-hero__art:hover .tp-mock, .tp-mock:focus-within { transform: none; box-shadow: var(--tp-shadow-lg), 0 30px 60px -20px rgba(20, 85, 54, 0.28); }
.tp-mock__float { animation: tp-bob 5s ease-in-out infinite; }
.tp-mock__float:hover { animation-play-state: paused; }
@keyframes tp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.tp-mock__table th, .tp-example__table th { background: var(--tp-green-800); color: #fff; border-bottom: 0; }
.tp-mock__table th:first-child, .tp-example__table th:first-child { border-top-left-radius: 8px; }
.tp-mock__table th:last-child, .tp-example__table th:last-child { border-top-right-radius: 8px; }
.tp-mock__table th.is-focus, .tp-example__table th.is-focus { background: var(--tp-green-700); }
.tp-mock__crown { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.tp-mock__table td.is-focus, .tp-example__table td.is-focus { background: var(--tp-green-50); }
.tp-mock__table td.tk, .tp-example__table td.tk { color: var(--tp-green-800); font-weight: 700; font-family: var(--tp-font-mono); }
.tp-example__table td.up { color: var(--tp-up); font-weight: 600; }
.tp-mock__table tbody tr, .tp-example__table tbody tr { transition: background-color var(--tp-fast) var(--tp-ease); }
.tp-mock__table tbody tr:hover td, .tp-example__table tbody tr:hover td { background: var(--tp-green-100); }
.tp-mock__table tbody tr:hover td:first-child, .tp-example__table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--tp-green-600); }
@media (max-width: 768px), (max-aspect-ratio: 7/6) { .tp-mock, .tp-hero__art:hover .tp-mock { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tp-mock { transform: none; transition: none; } .tp-mock__float { animation: none; } }

/* "How to use the screener" (owner's wish 2026-10-20: prettier steps). Each step's summary carries a round number
   badge (the words "Step N" stay for screen readers), and "What you can screen for" is a calm two-column list -
   category on the left, the metrics on the right - instead of large lines between vertical bars. */
.tp-screener__howto .tp-accordion > summary { display: flex; align-items: center; gap: var(--tp-space-3); }
.tp-howto__num {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--tp-green-800); color: var(--tp-on-brand); font: 700 var(--tp-text-sm)/1 var(--tp-font-sans);
}
.tp-screener__howto .tp-accordion[open] .tp-howto__num { background: var(--tp-green-600); }
.tp-screener__howto .tpStep-body { margin-left: calc(2rem + var(--tp-space-3)); color: var(--tp-ink-soft); }
.tp-screener__howto .tpMini { padding: 0; margin-top: var(--tp-space-4); }
.tp-screener__howto .tpMini::before { display: none; }
.tp-screener__howto .tpMini-label { display: block; margin: 0 0 var(--tp-space-2); padding: 0; border: 0;
  font: 700 var(--tp-text-xs)/1.2 var(--tp-font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-green-600); }
.tp-screener__howto .tpMini-label::before, .tp-screener__howto .tpMini-label::after { content: none; }
.tp-screener__howto .tpMetrics { margin: 0; padding: 0; border: 1px solid var(--tp-line-soft); border-radius: var(--tp-radius); overflow: hidden; }
.tp-screener__howto .tpMetrics-row {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: var(--tp-space-3); margin: 0;
  padding: 0.65rem var(--tp-space-4); font-size: var(--tp-text-sm); line-height: 1.5; color: var(--tp-ink-soft);
  border-bottom: 1px solid var(--tp-line-soft);
}
.tp-screener__howto .tpMetrics-row:nth-child(even) { background: var(--tp-paper); }
.tp-screener__howto .tpMetrics-row:last-child { border-bottom: 0; }
.tp-screener__howto .tpMetrics-row b { color: var(--tp-green-800); font-weight: 700; }
@media (max-width: 560px) { .tp-screener__howto .tpMetrics-row { grid-template-columns: 1fr; gap: 2px; } .tp-screener__howto .tpStep-body { margin-left: 0; } }

/* "Content to include" - the column chooser (owner's wish 2026-10-20: it looked messy). An even grid of equal-width
   options, text on the left, a check circle that fills when the column is chosen. Only the column chooser
   (#screeningOptions-Container); the sector/country menus keep their own look. The JS finds options by position,
   so this is styling only - no markup change. */
.tp-screener #screeningOptions-Container.expanded {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--tp-space-2);
  padding: var(--tp-space-4); background: var(--tp-paper); border: 1px solid var(--tp-line-soft);
}
.tp-screener #screeningOptions-Container .screeningOption-Item {
  position: relative; display: flex; align-items: center; min-height: 44px; margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 2.4rem; border-radius: 10px; text-align: left; line-height: 1.25;
  font: 550 var(--tp-text-sm)/1.25 var(--tp-font-sans); color: var(--tp-ink);
  background: var(--tp-surface); border: 1px solid var(--tp-line); box-shadow: none;
}
.tp-screener #screeningOptions-Container .screeningOption-Item::before {
  content: ""; position: absolute; left: 0.75rem; top: 50%; width: 1.05rem; height: 1.05rem; translate: 0 -50%;
  border: 1.5px solid var(--tp-line-strong); border-radius: 50%; background: var(--tp-surface);
}
.tp-screener #screeningOptions-Container .screeningOption-Item:hover { border-color: var(--tp-green-600); background: var(--tp-green-50); color: var(--tp-green-900); }
.tp-screener #screeningOptions-Container .screeningOption-Item.selected { background: var(--tp-green-50); border-color: var(--tp-green-600); color: var(--tp-green-900); font-weight: 650; }
.tp-screener #screeningOptions-Container .screeningOption-Item.selected::before {
  border-color: var(--tp-green-700);
  background: var(--tp-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/75% no-repeat;
}
.tp-screener #screeningOptions-Container .screeningOption-Item.selected:hover { background: var(--tp-green-100); color: var(--tp-green-900); }

/* Header language picker (#tpLang): a globe-with-speech-bubble button with the language code, opening a small menu
   (English only for now). Sits before "Log in", so it is found where people look for it on any screen size. */
.tp-lang { position: relative; }
.tp-lang__btn {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 0.7rem; list-style: none;
  border: 1px solid var(--tp-line); border-radius: var(--tp-radius-pill); background: var(--tp-surface);
  color: var(--tp-green-800); font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); cursor: pointer;
}
.tp-lang__btn::-webkit-details-marker { display: none; }
.tp-lang__btn::marker { content: ""; }
.tp-lang__btn .tp-icon { width: 1.2rem; height: 1.2rem; }
.tp-lang__btn:hover, .tp-lang[open] > .tp-lang__btn { border-color: var(--tp-green-600); background: var(--tp-green-50); }
.tp-lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--tp-z-dropdown); min-width: 13rem;
  padding: var(--tp-space-2); background: var(--tp-surface); border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-lg);
}
.tp-lang__item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 0.75rem;
  border: 0; border-radius: var(--tp-radius-sm); background: var(--tp-green-50); color: var(--tp-green-900);
  font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); cursor: pointer; text-align: left;
}
.tp-lang__check .tp-icon { width: 1rem; height: 1rem; color: var(--tp-green-700); }
.tp-lang__note { margin: var(--tp-space-2) 0.75rem 0.25rem; font-size: var(--tp-text-xs); color: var(--tp-muted); }
@media (max-width: 560px) { .tp-lang__code { display: none; } .tp-lang__btn { padding: 0 0.55rem; } }
/* The fixed ad rails carried z-index 1000 from the old layout, so they covered menus opened from the header (the
   language menu). They never overlap content, so a low layer is enough; header menus now always open on top. */
.sticky-left-sidebar, .sticky-right-sidebar, .left-sidebar, .right-sidebar { z-index: 5; }

/* Terms and policies page (TickerPickerPolicyPage.html). WAITING: these rules style the rebuilt page (a new ToS
   version the owner approved 2026-10-20), which is not installed yet - see kendte_huller.md, Webapp. Layout: one readable article. Numbered sections
   separated by a hairline, the owner's favourite green-edged indented boxes for some sections, the all-caps legal
   notices as a calm callout, a scrollable table on small screens, and an "On this page" list that follows the reader.
   No ads here (NO_AD_PATHS). */
.tp-policy .tp-page-head h1 { margin-bottom: var(--tp-space-2); }
.tp-policy__effective p { margin: 0; font-size: var(--tp-text-base); color: var(--tp-ink-soft); }
.tp-policy__body { min-width: 0; }
.tp-policy__body > section, .tp-policy__body h2, .tp-policy__body h3 { scroll-margin-top: 6rem; }
.tp-policy__section + .tp-policy__section:has(> h2) { margin-top: var(--tp-space-6); padding-top: var(--tp-space-5); border-top: 1px solid var(--tp-line-soft); }
.tp-policy__section h3 { margin-top: var(--tp-space-5); font-size: var(--tp-text-lg); }
.tp-policy__box {
  margin: var(--tp-space-6) 0 var(--tp-space-6) var(--tp-space-4); padding: var(--tp-space-4) var(--tp-space-5);
  border-left: 4px solid var(--tp-green-600); border-radius: 0 var(--tp-radius) var(--tp-radius) 0;
  background: var(--tp-green-50);
}
.tp-policy__box > :first-child { margin-top: 0; }
.tp-policy__box > :last-child { margin-bottom: 0; }
.tp-policy__notice {
  margin: var(--tp-space-5) 0; padding: var(--tp-space-4) var(--tp-space-5);
  border: 1px solid var(--tp-warn-line); border-radius: var(--tp-radius); background: var(--tp-warn-bg);
}
.tp-policy__notice > :last-child { margin-bottom: 0; }
.tp-policy__body .policy-table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: var(--tp-space-4) 0; font-size: var(--tp-text-sm); }
.tp-policy__body .policy-table th, .tp-policy__body .policy-table td { padding: 0.55rem 0.75rem; border: 0; border-bottom: 1px solid var(--tp-line-soft); text-align: left; vertical-align: top; }
.tp-policy__body .policy-table th { background: var(--tp-green-800); color: #fff; font-weight: 650; }
.tp-policy__body .policy-table tr:nth-child(even) td { background: var(--tp-paper); }
.tp-policy__aside { align-self: stretch; }   /* the column spans the whole article, so the list can stay in view */
.tp-policy__toc { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; }
.tp-policy__toc ol { list-style: none; padding: 0; margin: 0; }
.tp-scope .tp-policy__toc .tp-link-list li a:not([class]) { font-size: var(--tp-text-sm); }
@media (max-width: 900px) { .tp-policy__toc { position: static; max-height: none; } .tp-policy__aside { order: -1; } .tp-policy__box { margin-left: 0; } }

/* Learning path (owner's wish 2026-10-20; TickerPickerLearnPath.html + tpLearnPath.js). A slim band under the page
   head: one segment per category (width by its number of articles) that fills as articles are read and gets a
   check mark when done; the current category stands out; previous/next on the right. With "I know the basics" or
   the whole path read, the band shows complete. */
.tp-path { background: var(--tp-surface); border-bottom: 1px solid var(--tp-line-soft); box-shadow: 0 1px 0 rgba(15, 42, 31, 0.02); }
.tp-path__inner { display: flex; align-items: center; gap: var(--tp-space-4); padding-block: var(--tp-space-3); }
.tp-scope .tp-path__home { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
  color: var(--tp-green-800); font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); text-decoration: none; }
.tp-path__home .tp-icon { width: 1.15rem; height: 1.15rem; }
.tp-scope .tp-path__home:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-path__track { flex: 1 1 auto; min-width: 0; }
.tp-path__cats { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tp-path__cat { position: relative; flex: var(--n, 1) 1 0; min-width: 18px; }
.tp-path__cat > a { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--tp-green-100);
  overflow: visible; transition: height var(--tp-fast) var(--tp-ease); }
.tp-path__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--fill, 0) * 100%); border-radius: inherit;
  background: var(--tp-green-600); transition: width 0.5s var(--tp-ease); }
.tp-path__cat.is-current > a { height: 14px; margin-top: -2px; box-shadow: 0 0 0 2px var(--tp-surface), 0 0 0 3.5px var(--tp-green-700); }
.tp-path__cat:hover > a { background: var(--tp-green-200); }
.tp-path__check { position: absolute; right: -4px; top: 50%; translate: 0 -50%; display: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--tp-green-700); color: #fff; box-shadow: 0 0 0 2px var(--tp-surface); }
.tp-path__check .tp-icon { width: 12px; height: 12px; margin: 3px; }
.tp-path__cat.is-done .tp-path__check { display: block; }
.tp-path__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; z-index: 2; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; background: var(--tp-green-950); color: #fff; font: 600 var(--tp-text-xs)/1.3 var(--tp-font-sans);
  opacity: 0; pointer-events: none; transition: opacity var(--tp-fast) var(--tp-ease); }
.tp-path__cat:hover .tp-path__tip, .tp-path__cat:focus-within .tp-path__tip { opacity: 1; }
.tp-path__status { display: flex; flex-wrap: wrap; gap: 0 var(--tp-space-3); margin: 0.45rem 0 0; font-size: var(--tp-text-xs); color: var(--tp-muted); }
.tp-path__where { font-weight: 650; color: var(--tp-ink-soft); }
.tp-path.is-complete .tp-path__read { color: var(--tp-green-700); font-weight: 650; }
.tp-path.is-complete .tp-path__fill { background: var(--tp-green-700); }
.tp-path__nav { display: flex; gap: var(--tp-space-2); flex: 0 0 auto; }
.tp-scope .tp-path__btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px; padding: 0 0.85rem;
  border: 1.5px solid var(--tp-line); border-radius: var(--tp-radius-pill); background: var(--tp-surface);
  color: var(--tp-green-800); font: 650 var(--tp-text-sm)/1 var(--tp-font-sans); text-decoration: none; }
.tp-scope .tp-path__btn:hover { border-color: var(--tp-green-600); background: var(--tp-green-50); }
.tp-scope .tp-path__btn--next { background: var(--tp-green-800); border-color: var(--tp-green-800); color: #fff; }
.tp-scope .tp-path__btn--next:hover { background: var(--tp-green-900); }
.tp-path__btn .tp-icon { width: 1rem; height: 1rem; }
.tp-path__back { rotate: 180deg; }
@media (max-width: 700px) {
  .tp-path__inner { flex-wrap: wrap; gap: var(--tp-space-2) var(--tp-space-3); }
  .tp-path__track { order: 3; flex-basis: 100%; }
  .tp-path__nav { margin-left: auto; }
  .tp-path__btn span { display: none; }
  .tp-scope .tp-path__btn { padding: 0 0.7rem; }
}
/* "Jump to another part of the path?" */
.tp-path__confirm { position: fixed; inset: 0; margin: auto; height: fit-content; max-width: min(28rem, calc(100vw - 2rem)); padding: var(--tp-space-5); border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-lg); color: var(--tp-ink); font-family: var(--tp-font-sans); }
.tp-path__confirm::backdrop { background: rgba(15, 32, 26, 0.45); backdrop-filter: blur(4px); }
.tp-path__confirm h2 { margin: 0 0 var(--tp-space-2); font: 600 var(--tp-h3)/1.2 var(--tp-font-display); }
.tp-path__confirm p { margin: 0 0 var(--tp-space-4); color: var(--tp-ink-soft); }
.tp-path__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }
/* Read articles on a category page get a quiet check. */
.tp-card[data-learn-key].is-read { border-color: var(--tp-green-200); }
.tp-card[data-learn-key].is-read .tp-card__more::after { content: "  \2713 Read"; color: var(--tp-green-700); }
/* Next-step band: the quiet third link. */
.tp-scope .tp-next__extra { align-self: center; color: rgba(255, 255, 255, 0.9); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Encyclopedia front page: the learning-path card and a read badge per category card. */
.tp-learnprog { margin-top: var(--tp-space-6); }
.tp-learnprog__card { padding: var(--tp-space-5); border-color: var(--tp-green-200); background: linear-gradient(180deg, var(--tp-surface), var(--tp-green-50)); }
.tp-learnprog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tp-space-4); }
.tp-learnprog__title { margin: 0.2rem 0 0.4rem; font-size: var(--tp-h3); }
.tp-learnprog__text { margin: 0; color: var(--tp-ink-soft); max-width: 40rem; }
.tp-learnprog__actions { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }
.tp-learnprog__bar { margin-top: var(--tp-space-4); height: 10px; border-radius: 999px; background: var(--tp-green-100); overflow: hidden; }
.tp-learnprog__bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--tp-green-600); transition: width 0.6s var(--tp-ease); }
.tp-learnprog.is-complete .tp-learnprog__bar > span { background: var(--tp-green-700); }
.tp-learnprog__badge { display: inline-block; margin-top: var(--tp-space-2); padding: 2px 8px; border-radius: 999px;
  background: var(--tp-green-50); border: 1px solid var(--tp-green-200); color: var(--tp-green-800); font: 650 var(--tp-text-xs)/1.4 var(--tp-font-sans); }
.tp-learn-grid a.is-read { border-color: var(--tp-green-200); }
.tp-learn-grid a.is-read .tp-learnprog__badge { background: var(--tp-green-700); border-color: var(--tp-green-700); color: #fff; }

/* Wider screener table for subscribers on large screens (#tpWideToggle, initWideTable in tpDesign.js). Hidden for
   everyone else; the results section then spans the window (minus a margin), centred on the page. */
.tp-wide-toggle { display: none; margin-left: auto; min-height: 38px; padding: 0 1rem; font-size: var(--tp-text-sm); }
@media (min-width: 1100px) { body.ad-free .tp-wide-toggle { display: inline-flex; } }
@media (min-width: 1100px) {
  body.ad-free .tp-screener__results.is-wide { position: relative; left: 50%; translate: -50% 0; width: min(calc(100vw - 4rem), 120rem); }
}

/* Price chart, round 2 (owner's wish 2026-10-20): head with the currency, a toolbar (view + planned layers + refresh),
   a chart box with a fluid height (Candle_Stick_Chart.js uses maintainAspectRatio: false), and the stock switch as its
   own labelled row. Colours for the canvas are read from the --tp-chart-* tokens by chartToken(). */
:root {
  --tp-chart-up: #1c754e; --tp-chart-down: #c0392b; --tp-chart-flat: #6b7280;
  --tp-chart-projection: #b7791f; --tp-chart-grid: rgba(20, 85, 54, 0.08); --tp-chart-tick: #5b6b63;
  --tp-chart-surface: #fff; --tp-chart-radius: 12px; --tp-pill: 999px;
}
.tp-stock .chart-container { align-items: stretch; gap: var(--tp-space-4); min-height: 0; }
.tp-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tp-space-2) var(--tp-space-4); }
.tp-chart__head .chartTitel { margin: 0; }
.tp-chart__meta { margin: 0; color: var(--tp-muted); font: 600 var(--tp-text-xs)/1.4 var(--tp-font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tp-chart__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tp-space-3) var(--tp-space-4); padding: var(--tp-space-3); border: 1px solid var(--tp-line-soft); border-radius: var(--tp-chart-radius); background: var(--tp-paper); }
.tp-chart__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.tp-chart__field--layers { flex: 1 1 22rem; }
.tp-chart__label { color: var(--tp-muted); font: 600 var(--tp-text-xs)/1.4 var(--tp-font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.tp-chart__toolbar .custom-select { min-width: 13rem; }
.tp-chart__layers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tp-layer { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; padding: 0 0.75rem; border: 1.5px solid var(--tp-line); border-radius: var(--tp-pill); background: var(--tp-chart-surface); color: var(--tp-ink-soft); font: 600 var(--tp-text-xs)/1 var(--tp-font-sans); cursor: pointer; }
.tp-layer[aria-pressed="true"] { border-color: var(--tp-green-600); background: var(--tp-green-50); color: var(--tp-green-900); }
.tp-layer:disabled { cursor: not-allowed; color: var(--tp-muted); border-style: dashed; background: transparent; }
.tp-layer__soon { padding: 0.15rem 0.4rem; border-radius: var(--tp-pill); background: var(--tp-green-100); color: var(--tp-green-900); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
.tp-stock .tp-chart__refresh { margin-left: auto; }
.tp-chart__canvas { position: relative; width: 100%; height: clamp(18rem, 48vh, 34rem); }
.tp-stock .tp-chart__canvas canvas#chart { width: 100% !important; height: 100% !important; min-height: 0; }
.tp-chart__switch { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; padding-top: var(--tp-space-3); border-top: 1px solid var(--tp-line-soft); }
.tp-stock .tp-chart__switch .controls-group--search { display: flex; gap: var(--tp-space-2); width: 100%; }
@media (max-width: 600px) {
  .tp-chart__toolbar { flex-direction: column; align-items: stretch; }
  .tp-chart__field--layers { flex: 0 0 auto; }   /* the 22rem basis would become a height in a column */
  .tp-layer { min-height: 30px; padding: 0 0.6rem; }
  .tp-stock .tp-chart__refresh { margin-left: 0; }
  .tp-chart__canvas { height: clamp(16rem, 55svh, 26rem); }
  .tp-stock .tp-chart__canvas canvas#chart { min-height: 0; }
  .tp-chart__toolbar .custom-select { min-width: 0; }
}

/* Round-2 QA fixes (2026-10-20). */
/* Hero: the floating P/E card hung over the table's numbers (P/E and the focused Growth column). It now sits on the
   mock's lower edge, beside the "Example" note, and the art keeps room for it so nothing below is covered. */
.tp-mock__float { bottom: -4rem; right: 1.25rem; }
.tp-hero__art { margin-bottom: 4.4rem; }
@media (max-width: 768px), (max-aspect-ratio: 7/6) { .tp-mock__float { right: 0.5rem; bottom: -4.2rem; } }
/* Language menu: anchored to the button's right edge it ran off the left of a phone when the header also holds the
   e-mail and "Log out". On phones it opens fixed under the header, inside the screen. */
@media (max-width: 600px) {
  .tp-lang__menu { position: fixed; top: calc(var(--tp-header-h, 64px) + 4px); left: 1rem; right: 1rem; min-width: 0; }
}
/* Path confirmation: the padding came on top of max-width (content-box), 5 px too wide on a 390 px phone. */
.tp-path__confirm { box-sizing: border-box; width: min(28rem, calc(100vw - 2rem)); }
/* Front page: a little air between the step indicator and the text under it. */
.tp-scope .tp-journey__heading + .tp-steps, .tp-scope .tp-journey__heading ~ .tp-steps { margin-bottom: var(--tp-space-4); }
/* Path bar tooltips are hover help; hidden ones near the right edge still widened a phone's page (433 px at 390).
   Touch screens have no hover, so they are not rendered there; on desktop the last two open towards the left. */
@media (hover: none), (max-width: 600px) { .tp-path__tip { display: none; } }
.tp-path__cat:nth-last-child(-n+2) .tp-path__tip { left: auto; right: 0; translate: 0 0; }
/* Signed-in phones: the language button made the header 4 px too wide at 390 px; the e-mail gives up the room. */
@media (max-width: 420px) { .tp-header .user-email { max-width: 6.5rem; } }

/* Screener: the currency choice for amounts (#tpCurrencyMode, D34) - a small labelled select in the results head,
   beside "Wider table", with its note (#tpCurrencyNote) on its own line below. */
.tp-compare-cur { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; color: var(--tp-muted); font: 600 var(--tp-text-xs)/1.2 var(--tp-font-sans); letter-spacing: 0.04em; }
.tp-compare-cur__select { min-height: 36px; padding: 0 0.6rem; border: 1.5px solid var(--tp-line); border-radius: var(--tp-pill, 999px); background: var(--tp-surface); color: var(--tp-ink); font: 600 var(--tp-text-sm)/1 var(--tp-font-sans); }
.tp-compare-cur + .tp-wide-toggle { margin-left: 0; }
/* Stock header: a fact whose value is empty (e.g. "Reports in" when the statements are in the price's currency) is
   not shown, also before the page script runs - no empty label, no layout jump (D32). */
.tp-stock #stockInfoContent .co-facts > span:has(> span:empty) { display: none; }

/* Exchange toggle on the price chart (#tpListings, D33): one pill per exchange; the pressed one is filled. */
.tp-chart__listings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; width: 100%; }
.tp-listing { min-height: 34px; padding: 0 0.8rem; border: 1.5px solid var(--tp-line); border-radius: var(--tp-pill, 999px); background: var(--tp-surface); color: var(--tp-ink-soft); font: 600 var(--tp-text-xs)/1 var(--tp-font-mono); cursor: pointer; }
:root { --tp-on-green: #fff; }   /* text on a filled brand-green control */
.tp-listing[aria-pressed="true"] { border-color: var(--tp-green-700); background: var(--tp-green-700); color: var(--tp-on-green); }
.tp-listing:focus-visible { outline: 3px solid var(--tp-green-300); outline-offset: 2px; }
/* Phones: under "Switch to another stock" the button sits BELOW the search field, so a floating suggestion list
   covered it and took its clicks. There the list is part of the flow and pushes the button down instead. */
@media (max-width: 600px) {
  .tp-stock .tp-chart__switch .ticker-search-results { position: static; margin-top: -1px; }
}
.tp-compare-cur label { color: var(--tp-muted); }
.tp-currency-note { flex-basis: 100%; margin: 0; font-size: var(--tp-text-xs); }
/* Price chart: currency and rate choice (#tpChartCurrency, #tpChartRate, D34) - plain selects in the toolbar. */
.tp-chart__select { min-height: 38px; padding: 0 0.7rem; border: 1.5px solid var(--tp-line); border-radius: var(--tp-pill, 999px); background: var(--tp-surface); color: var(--tp-ink); font: 600 var(--tp-text-sm)/1 var(--tp-font-sans); }
.tp-chart__field[hidden], .fin-ctl[hidden] { display: none; }   /* the rate choice only shows when converting (D34) */

/* ---- Round 3 (owner's points 4-6, 2026-10-22) ----
   4: learn cards are flex columns, so "Read ->" / "Read -> (check) Read" always sits on the card's bottom edge - the
      same level in every card of a row, whatever the length of the summary. */
.tp-card--link[data-learn-key] { display: flex; flex-direction: column; }
.tp-card--link[data-learn-key] .tp-card__more { margin-top: auto; padding-top: var(--tp-space-2); align-self: flex-start; }
/* 5: the learning-path bar is a rounded panel exactly as wide as the page column, instead of a band running edge to
      edge under the side ads. */
.tp-path { background: none; border-bottom: 0; box-shadow: none; padding-block: var(--tp-space-3) 0; }
.tp-path__inner { background: var(--tp-surface); border: 1px solid var(--tp-line-soft); border-radius: var(--tp-radius-lg);
  box-shadow: var(--tp-shadow-sm); padding: var(--tp-space-4) clamp(0.75rem, 0.5rem + 1vw, 1.25rem) var(--tp-space-3); }
/* 6: the end-of-article card - a short line above the buttons and a "Read previous" button. */
.tp-next .tp-next__kicker { flex-basis: 100%; max-width: none; margin: 0 0 calc(-1 * var(--tp-space-1)); color: var(--tp-green-200);
  font-size: var(--tp-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* 3: the footer badge sits under the brand text (name, tagline, description) instead of above it. */
.tp-footer .tp-footer__brand > .tp-footer__emblem { display: block; width: clamp(6rem, 4.5rem + 4vw, 8.5rem); height: auto;
  margin: var(--tp-space-2) 0 var(--tp-space-3); filter: drop-shadow(0 6px 14px var(--tp-badge-shadow)); }
:root { --tp-badge-shadow: rgba(0, 0, 0, 0.28); }
/* 12: "Adjust filters yourself" shows the column grid at once, as step 1 and 2 with one short hint each - no nested
      +/- sub-menu, no floating box with its own scroll bar. */
.tp-screener .tp-screener__adjust .screeningSelect-Box, .tp-screener .tp-adjust__step {
  display: flex; align-items: center; gap: 0.6rem; margin: var(--tp-space-2) 0 0; padding: 0; border: 0; cursor: default;
  font: 700 var(--tp-text-base)/1.3 var(--tp-font-sans); color: var(--tp-ink); text-transform: none; background: none; }
.tp-screener .tp-screener__adjust .screeningSelect-Box::after { content: none; display: none; }
.tp-adjust__num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; border-radius: 50%;
  background: var(--tp-green-800); color: var(--tp-on-green); font: 700 var(--tp-text-xs)/1 var(--tp-font-sans); }
.tp-scope .tp-adjust__hint { margin: 0.3rem 0 var(--tp-space-3) 2.2rem; font-size: var(--tp-text-sm); color: var(--tp-muted); max-width: 60ch; }
.tp-screener .tp-screener__adjust #screeningOptions-Container.expanded { max-height: none; overflow: visible; visibility: visible;
  margin: 0 0 var(--tp-space-4); padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 560px) {
  .tp-scope .tp-adjust__hint { margin-left: 0; }
  /* two columns on phones, so the list is half as long */
  .tp-screener .tp-screener__adjust #screeningOptions-Container.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .tp-screener .tp-screener__adjust #screeningOptions-Container .screeningOption-Item { padding: 0.45rem 0.5rem 0.45rem 2rem; font-size: var(--tp-text-xs); }
  .tp-screener .tp-screener__adjust #screeningOptions-Container .screeningOption-Item::before { left: 0.55rem; }
}
/* 13: the chart toolbar - every control top-aligned in one row, labels on one line; the Refresh button lines up with
      the selects; the View select as tall as the others. Layers wrap inside their own field. */
@media (min-width: 601px) {
  .tp-stock .tp-chart__toolbar { align-items: flex-start; }
  .tp-stock .tp-chart__toolbar .tp-chart__refresh { align-self: flex-start; margin-top: calc(var(--tp-text-xs) * 1.4 + 0.35rem); }
}
/* the View box (custom select) as tall as the Currency/Rate selects and the button */
.tp-stock .tp-chart__toolbar .custom-select .select-selected { height: 38px; line-height: 38px; justify-content: flex-start;
  padding: 0 2.4rem 0 0.9rem; font-size: var(--tp-text-sm); }
.tp-layer:not(:disabled):hover { border-color: var(--tp-green-600); color: var(--tp-green-900); }
.tp-layer[aria-pressed="false"] { border-style: solid; }
/* 14: the stock page's section bar (owner's point 14, 2026-10-22) still sticks under the header when scrolling, but
      only as a panel exactly as wide as the page column. The full-width band it used to be lay across the side ads
      (ugly, and against the ad policy: content must not cover an ad). The outer sticky element is now transparent
      and lets clicks through, so the ads beside it stay fully visible and clickable. */
.tp-stock .tp-section-nav { background: none; border-bottom: 0; backdrop-filter: none; pointer-events: none;
  padding-block: var(--tp-space-2); }
.tp-stock .tp-section-nav__inner { pointer-events: auto; background: rgba(250, 251, 249, 0.94); backdrop-filter: blur(6px);
  border: 1px solid var(--tp-line); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-sm);
  padding: var(--tp-space-2) clamp(0.5rem, 0.25rem + 1vw, 1rem); }