/* Terminal theme for optionsbrewers.com, after the trading dashboard's Terminal look: black ground, amber labels and
   headers, white figures, green/red for up/down, navy panel title bars, yellow inputs, monospace throughout.
   Pages opt in with <body class="term"> and this stylesheet after style-orders.css, so pages not yet moved over keep
   their old look; every rule is scoped to body.term. Layout: one centered column (max 1120px) of panels. */
body.term {
  --t-bg: #000; --t-panel: #070809; --t-panel-2: #0d0f12; --t-line: #262a30; --t-bar: #0d2a5e;
  --t-amber: #ffb21a; --t-text: #f2f2f2; --t-text-2: #b9bec6; --t-muted: #7d838c;
  --t-green: #2fd567; --t-red: #ff4d4d; --t-input: #ffe14d;
  --t-mono: "IBM Plex Mono", Menlo, Consolas, monospace;
  background: var(--t-bg); color: var(--t-text); font-family: var(--t-mono);
  color-scheme: dark;
}
body.term, body.term p, body.term button, body.term textarea, body.term input { font-family: var(--t-mono); }
body.term p { color: var(--t-text-2); line-height: 1.65; }
body.term h1, body.term h2, body.term h3, body.term h4 { color: var(--t-amber); font-family: var(--t-mono); letter-spacing: .02em; }
body.term a { color: var(--t-amber); }
body.term a:hover { color: #ffd06b; }
body.term strong { color: var(--t-text); }
body.term ::selection { background: var(--t-amber); color: #000; }

/* ---- header ---- */
body.term header { background: #000; border-bottom: 2px solid var(--t-amber); padding: 0 16px; }
body.term nav.header-wrapper a { color: var(--t-text-2); padding: 22px 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; transition: color .15s, background-color .15s; }
body.term nav.header-wrapper a:hover { color: var(--t-amber); background: #0d0f12; text-decoration: none; }
body.term nav.header-wrapper a.header-logo { color: var(--t-amber); font-weight: 700; letter-spacing: .12em; padding: 14px 16px 14px 0; }
body.term nav.header-wrapper a.header-logo:hover { background: none; color: #ffd06b; }
body.term .logo-icon { height: 30px; border-radius: 4px; }
body.term .header-menu .username a { border: 1px solid var(--t-amber); color: var(--t-amber); padding: 8px 16px; margin: 0; }
body.term .header-menu .username a:hover { background: var(--t-amber); color: #000; }
body.term .header-wrapper.mobile .header-mobile-title { color: var(--t-amber); font-family: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; }
body.term .header-wrapper.mobile .menu { background: #000; border-right: 1px solid var(--t-line); }
body.term .header-wrapper.mobile .menu li a { color: var(--t-text); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }

/* ---- footer ---- */
body.term .disclaimer-container { background: #000; border-top: 1px solid var(--t-line); }
body.term .site-nav-column h3 { color: var(--t-amber); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
body.term .site-nav-column a { color: var(--t-text-2); font-size: 13px; }
body.term .site-nav-column a:hover { color: var(--t-amber); }
body.term .disclaimer-wrapper h3 { color: var(--t-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
body.term .disclaimer-wrapper p { color: var(--t-muted); font-size: 11px; line-height: 1.6; }
body.term footer { background: #000; border-top: 1px solid var(--t-line); border-bottom: 0; }
body.term footer p, body.term .footer-wrapper a { color: var(--t-muted) !important; font-size: 12px; }
body.term .cookie-policy-wrapper { background: var(--t-panel-2); border: 1px solid var(--t-amber); border-radius: 0; box-shadow: none; }
body.term .cookie-policy-wrapper p { color: var(--t-text-2); font-size: 12px; }
body.term .cookie-policy-wrapper button { background: var(--t-amber); border-radius: 0; }
body.term .cookie-policy-wrapper button a { color: #000; }

/* ---- building blocks ---- */
body.term .t-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px 56px; box-sizing: border-box; }
body.term .t-status { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--t-line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
body.term .t-status b { color: var(--t-amber); font-weight: 700; }
body.term .t-status .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--t-green); margin-right: 6px; vertical-align: 1px; }
body.term .t-panel { border: 1px solid var(--t-line); background: var(--t-panel); margin-top: 20px; }
body.term .t-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--t-bar); color: var(--t-text); padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.term .t-bar span { color: var(--t-amber); }
body.term .t-body { padding: 18px 20px; }
body.term .t-btn { display: inline-block; font: 700 13px/1 var(--t-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 12px 20px; border: 1px solid var(--t-amber); background: var(--t-amber); color: #000; border-radius: 0; margin: 0; }
body.term .t-btn:hover { background: #ffd06b; border-color: #ffd06b; color: #000; }
body.term .t-btn.ghost { background: transparent; color: var(--t-amber); }
body.term .t-btn.ghost:hover { background: var(--t-amber); color: #000; }
body.term .t-btn:focus-visible, body.term a:focus-visible { outline: 2px solid var(--t-input); outline-offset: 2px; }
body.term .t-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.term .t-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
body.term .pos { color: var(--t-green); } body.term .neg { color: var(--t-red); }

/* hero */
body.term .t-hero { padding: 48px 0 8px; }
body.term .t-hero h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
body.term .t-hero h1 .cur { display: inline-block; width: .55em; height: .9em; background: var(--t-amber); vertical-align: -.08em; margin-left: .12em; animation: t-blink 1.1s steps(1) infinite; }
@keyframes t-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.term .t-hero h1 .cur { animation: none; } }
body.term .t-hero .lede { font-size: 16px; max-width: 640px; margin-top: 18px; color: var(--t-text-2); }
body.term .t-prompt { color: var(--t-green); font-size: 13px; margin-bottom: 14px; }
body.term .t-prompt::before { content: "> "; color: var(--t-muted); }

/* function keys: the three things members get */
body.term .t-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--t-line); border: 1px solid var(--t-line); margin-top: 28px; }
body.term .t-key { background: var(--t-panel); padding: 18px 18px 20px; }
body.term .t-key .fk { display: inline-block; font-size: 11px; font-weight: 700; color: #000; background: var(--t-amber); padding: 2px 6px; margin-right: 8px; }
body.term .t-key h3 { display: inline; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
body.term .t-key p { font-size: 13px; margin-top: 10px; }

/* feature rows: screenshots beside copy */
body.term .t-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; }
body.term .t-feature.rev .t-shots { order: 2; }
body.term .t-shots { background: #000; border-right: 1px solid var(--t-line); min-width: 0; }
body.term .t-feature.rev .t-shots { border-right: 0; border-left: 1px solid var(--t-line); }
body.term .t-feature .t-body h2 { font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }
body.term .t-feature .t-body .blurb { color: var(--t-text); font-size: 15px; margin: 12px 0; }
body.term .t-feature .t-body p { font-size: 13px; margin-top: 10px; }
body.term .t-more { display: inline-block; margin-top: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
body.term .swiper-container { width: 100%; height: 100%; min-height: 280px; }
body.term .swiper-slide { display: flex; align-items: center; justify-content: center; background: #000; }
body.term .swiper-slide img { max-width: 100%; max-height: 420px; object-fit: contain; display: block; }
body.term .swiper-pagination-bullet { background: var(--t-muted); opacity: 1; border-radius: 0; }
body.term .swiper-pagination-bullet-active { background: var(--t-amber); }
body.term .swiper-button-next, body.term .swiper-button-prev { color: var(--t-amber); }
@media (max-width: 760px) {
  body.term .t-feature { grid-template-columns: 1fr; }
  body.term .t-feature.rev .t-shots { order: 0; border-left: 0; }
  body.term .t-shots { border-right: 0; border-bottom: 1px solid var(--t-line); }
}

/* long copy */
body.term .t-prose p { font-size: 14px; max-width: 76ch; margin-top: 12px; }
body.term .t-prose p:first-child { margin-top: 0; }

/* member notes */
body.term .t-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 16px; }
body.term .t-notes figure { margin: 0; border: 1px solid var(--t-line); background: #000; padding: 6px; }
body.term .t-notes img { width: 100%; display: block; }

/* newsletter (Mailchimp's markup, restyled) */
body.term #mc_embed_signup { background: transparent; font-family: var(--t-mono); width: auto; }
body.term #mc_embed_signup form { padding: 0; }
body.term #mc_embed_signup h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
body.term #mc_embed_signup .subscribe-description { font-size: 13px; margin: 8px 0 14px; }
body.term #mc_embed_signup .email-inputs-wrapper { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
body.term #mc_embed_signup .mc-field-group { width: auto; flex: 1 1 200px; padding: 0; min-height: 0; }
body.term #mc_embed_signup input[type="text"], body.term #mc_embed_signup input[type="email"] { width: 100%; box-sizing: border-box; background: #000; color: var(--t-input); border: 1px solid var(--t-input); border-radius: 0; padding: 11px 12px; font: 14px var(--t-mono); text-indent: 0; }
body.term #mc_embed_signup input::placeholder { color: #9c8a2a; }
body.term #mc_embed_signup .button { background: var(--t-amber); color: #000; border-radius: 0; height: auto; padding: 12px 20px; margin: 0; font: 700 13px var(--t-mono); letter-spacing: .1em; text-transform: uppercase; }
body.term #mc_embed_signup .button:hover { background: #ffd06b; }
/* style-orders.css sets these inputs (and the submit button) with !important, so the overrides need it too */
body.term .email-inputs-wrapper input { max-width: none !important; height: auto !important; padding: 11px 12px !important; border: 1px solid var(--t-input) !important; background: #000 !important; color: var(--t-input) !important; border-radius: 0 !important; }
body.term .email-inputs-wrapper input[type="submit"], body.term #mc-embedded-subscribe { background: var(--t-amber) !important; background-color: var(--t-amber) !important; border-color: var(--t-amber) !important; color: #000 !important; padding: 12px 20px !important; cursor: pointer; }
body.term .email-inputs-wrapper input[type="submit"]:hover, body.term #mc-embedded-subscribe:hover { background: #ffd06b !important; background-color: #ffd06b !important; }
body.term #mce-EMAIL { min-width: 0; }
body.term #mce-responses { align-items: flex-start !important; text-decoration: none; background: none !important; }
body.term #mc_embed_signup div.response { color: var(--t-green); padding: 10px 0 0; margin: 0; float: none; width: auto; }

/* ---- performance record ---- */
body.term .tr { color: var(--t-text); max-width: 1120px; padding: 0 16px 56px; }
body.term .tr .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--t-line); border: 1px solid var(--t-line); margin: 20px 0; }
body.term .tr .tile { background: var(--t-panel); border: 0; border-radius: 0; padding: 14px 16px; }
body.term .tr .tile .k { color: var(--t-muted); font-size: 11px; letter-spacing: .12em; }
body.term .tr .tile .v { color: var(--t-text); font-size: 26px; }
body.term .tr .tile .v.pos { color: var(--t-green); } body.term .tr .tile .v.neg { color: var(--t-red); }
body.term .tr .tile .s { color: var(--t-muted); }
body.term .tr .open-note { background: #120d02; border-left: 3px solid var(--t-amber); color: var(--t-text-2); font-size: 13px; }
body.term .tr .open-note b { color: var(--t-amber); }
body.term .tr .scroll { border: 1px solid var(--t-line); border-radius: 0; }
body.term .tr th { background: var(--t-bar); color: var(--t-text); border-bottom: 0; font-size: 11px; letter-spacing: .12em; }
body.term .tr td { border-bottom: 1px solid var(--t-line); color: var(--t-text); font-size: 13px; }
body.term .tr tbody tr:hover td { background: #0d0f12; }
body.term .tr td.pos { color: var(--t-green); } body.term .tr td.neg { color: var(--t-red); }
body.term .tr .tick { color: var(--t-amber); }
body.term .tr .empty { color: var(--t-muted); }
body.term .tr .cta { border-radius: 0; background: var(--t-amber); color: #000; font-family: var(--t-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
body.term .tr .fine { color: var(--t-muted); font-size: 12px; }
body.term .tr .channel { color: var(--t-amber); background: none; }
body.term .tr .test-note { background: #1a0606; border: 1px solid var(--t-red); color: var(--t-red); border-radius: 0; }

/* ---- product, plans and trial pages (phase 2): their existing markup, re-themed ---- */
/* the site's orange buttons with a link inside: amber, square, black label */
body.term button:not(.bundle-toggle) { background: var(--t-amber); border-radius: 0; color: #000; font-family: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; }
body.term button:not(.bundle-toggle):hover { background: #ffd06b; }
body.term button a, body.term button a:hover { color: #000; text-decoration: none; font-weight: 700; }
body.term button.medium a, body.term button.large a { font-size: 14px; }
body.term .product-title, body.term .main h1, body.term .main h2 { color: var(--t-amber); }
body.term .product-subtitle, body.term .product-description { color: var(--t-text-2); }
body.term .product-footnotes { color: var(--t-muted); font-size: 12px; }
body.term span.channel, body.term li.plan span.channel { color: var(--t-amber); font-size: 12px; letter-spacing: .04em; }
body.term .nav-links .nav-link { color: var(--t-text-2); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
body.term .nav-links .nav-link.active, body.term .nav-links .nav-link:hover { color: var(--t-amber); }
body.term .pagination-wrapper { border: 1px solid var(--t-line); border-radius: 0; background: var(--t-panel); }
body.term .pagination-wrapper a { color: var(--t-amber); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
body.term .alerts-reel img, body.term .members-reel img { border: 1px solid var(--t-line); }
body.term .lead-brewer { color: var(--t-amber); }
body.term .social-media-icon-wrapper a { background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 0; }
body.term .social-media-icon-wrapper a:hover { background: var(--t-bar); border-color: var(--t-amber); }

/* plans: monthly/yearly toggle, cards, prices, check marks */
body.term #pricing-period { border: 1px solid var(--t-line); border-radius: 0; box-shadow: none; }
body.term #pricing-period button { background: var(--t-panel-2); color: var(--t-text-2); font-family: var(--t-mono); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; text-decoration: none; }
body.term #pricing-period button.active { background: var(--t-amber); color: #000; border-radius: 0; font-weight: 700; text-decoration: none; }
body.term #pricing-period button.active:hover { background: #ffd06b; }
body.term ul.plans .plan-wrapper { background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 0; box-shadow: none; }
body.term ul.plans li.plan:first-child .plan-wrapper { border-color: var(--t-amber); }
body.term .plan-header { border-radius: 0; border-bottom: 1px solid var(--t-line); }
body.term .plan-header h2 { color: var(--t-amber); letter-spacing: .08em; }
body.term .plan-header h3 { color: var(--t-muted); font-family: var(--t-mono); }
body.term .plan-header h3 span { color: var(--t-text); font-family: var(--t-mono); }
body.term .plan-overview { color: var(--t-text-2); }
body.term .best-value { background: var(--t-amber); color: #000; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
body.term li.plan .plan-body li, body.term li.plan p { color: var(--t-text-2); }
body.term li.plan .plan-body > ul > li > div > svg { color: var(--t-green); fill: var(--t-green); }
/* the plans page's "Log in with Discord" dialog */
body.term .modal-container.active { background: rgba(0, 0, 0, .8); }
body.term .modal-container .modal { background: var(--t-panel-2); border: 1px solid var(--t-amber); border-radius: 0; color: var(--t-text); }
body.term .modal-container .modal .modal-title h2 { color: var(--t-amber); text-transform: uppercase; letter-spacing: .06em; font-size: 20px; }
body.term .modal-container .modal .modal-body p { color: var(--t-text-2); }
body.term .modal button.modal-close { background: transparent; border: 1px solid var(--t-line); padding: 10px; }
body.term .modal button.modal-close:hover { background: var(--t-panel); border-color: var(--t-amber); }
body.term .modal button.modal-close img { filter: invert(1); }

/* ---- resources, blog, legal, member dashboard (phase 3) ---- */
body.term input[type="text"], body.term input[type="email"], body.term input[type="url"], body.term input[type="number"], body.term textarea, body.term select {
  background: #000; color: var(--t-input); border: 1px solid var(--t-input); border-radius: 0; font-family: var(--t-mono); padding: 8px 10px; }
body.term input:focus, body.term textarea:focus, body.term select:focus { outline: 2px solid var(--t-amber); outline-offset: 1px; }
body.term blockquote { border-left: 3px solid var(--t-amber); margin: 16px 0; padding: 4px 0 4px 16px; color: var(--t-text-2); }
body.term .main li { color: var(--t-text-2); }
body.term .dashboard-heading { color: var(--t-amber); }
body.term .warning.block { border: 1px solid var(--t-amber); background: #120d02; padding: 10px 14px; }
body.term .note { color: var(--t-muted); }
body.term hr { border: 0; border-top: 1px solid var(--t-line); }
/* resources: click-to-play video tiles (a Short's thumbnail, cropped to the vertical frame) */
body.term .yt, body.term .yt-frame { position: relative; width: 252px; max-width: 100%; aspect-ratio: 252 / 540; border: 1px solid var(--t-line); background: var(--t-panel-2); }
body.term .yt { display: block; padding: 0; margin: 0; cursor: pointer; overflow: hidden; border-radius: 0; text-transform: none; letter-spacing: 0; }
body.term .yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
body.term .yt:hover img, body.term .yt:focus-visible img { transform: scale(1.03); }
body.term .yt:hover, body.term .yt:focus-visible { border-color: var(--t-amber); background: var(--t-panel-2); }
body.term .yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; transform: translate(-50%, -50%); background: var(--t-amber); }
body.term .yt-play::after { content: ""; position: absolute; left: 26px; top: 12px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #000; }
/* homepage: the daily board sample, shown whole rather than in a carousel */
body.term .t-board { display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
body.term .t-board img { width: 100%; max-width: 560px; height: auto; display: block; border: 1px solid var(--t-line); }
body.term .fine-note { font-size: 12px; color: var(--t-muted); margin-top: 6px; }
body.term .alerts-reel img { width: 100%; max-width: 680px; height: auto; display: block; }